I seem to implement this feature in just about every project, and I never seem to be able to find my old implementations easily enough. So, here's a gist. Should help to get things started.
Using Vue:
// Autosize textarea directive| 'use strict'; | |
| // The STRIPE-supported currencies, sorted by code | |
| export const currencies = [ | |
| { | |
| 'code':'AED', | |
| 'description':'United Arab Emirates Dirham' | |
| }, | |
| { | |
| 'code':'AFN', |
| // Convert a string to Underscore | |
| public static class StringEx | |
| { | |
| public static string Underscored(this string s) | |
| { | |
| var builder = new StringBuilder(); | |
| for (var i = 0; i < s.Length; ++i) | |
| { | |
| if (ShouldUnderscore(i, s)) |
| use std::io::Writer; | |
| // This specifies lifetime constraint of 'a | |
| // Type W must implement the Writer trait | |
| // Type W has the lifetime 'a (the same as the related struct instance) | |
| pub struct Foo<'a, W: 'a + Writer> { | |
| writer: &'a mut W | |
| } |
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>Toggle Example</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } |
| # OpenStruct is slow. But if you need/want similar functionality, | |
| # you can achieve it with really good perf results. See the impl | |
| # of NotificationEvent below. | |
| # | |
| # Benchmark results from my Macbook (2.6 GHz Intel Core i5) | |
| # | |
| # Rehearsal ----------------------------------------------------- | |
| # Literal 1.060000 0.020000 1.080000 ( 1.080056) | |
| # NotificationEvent 1.350000 0.000000 1.350000 ( 1.367066) | |
| # OpenStruct 11.500000 0.110000 11.610000 ( 11.646464) |
| Look for `// CHRIS:` comments to get some inline thoughts. | |
| Well, I learned something new. I've never seen "text/babel" as a script type. How are you transpiling your JSX? | |
| I think if I were interviewing you, I'd ask why you didn't use ES6 modules or TypeScript, and something like Webpack to bundle them. It's something you should familiarize yourself with, since every production stack you will work with will be using some equivalent. (TypeScript + VS Code is a great combo, by the way.) | |
| You'll also benefit from using a linter on your JavaScript. It catches bugs, and ensures you format things nicely (which helps when someone's interviewing / reviewing your code!) | |
| So here's what I'd recommend after a quick scan: |
| // Example usage of SortedRouter | |
| var SortedRouter = require('./sortedrouter'); | |
| var router = new SortedRouter(); | |
| // Supports multiple URLs | |
| router.route('', 'books', show('<h1>Books</h1>')); | |
| router.route('books/new', show('<h1>New Book</h1>')); | |
| router.route('books/:id', show('<h1>Show Book</h1>')); |
| // This is what your gulp task should look like | |
| gulp.task('qunit', function(done) { | |
| var files = glob.sync('./test/**/*.html'); | |
| runAllQunits(files); | |
| }); | |
| // Runs through each qunit file (one at a time, though this could be relatively easily parallelized) | |
| function runAllQunits(testFiles) { | |
| var browser = new Zombie(); |