-
-
Save branneman/37865bcfc5d102c2be6c to your computer and use it in GitHub Desktop.
| <!doctype html> | |
| <html> | |
| <head> | |
| ... | |
| <script> | |
| (function(d){ | |
| if (!('querySelector' in d && 'addEventListener' in window)) return; | |
| d.documentElement.className += ' has-js'; | |
| d.addEventListener('DOMContentLoaded', function() { | |
| var s = d.createElement('script'); | |
| s.setAttribute('src', '/static/js/vendor/requirejs/require.js'); | |
| s.setAttribute('data-main', '/static/js/main'); | |
| d.body.appendChild(s); | |
| }); | |
| }(document)); | |
| </script> | |
| </head> | |
| <body> | |
| ... | |
| </body> | |
| </html> |
| (function(){ | |
| require.config({ | |
| map: { | |
| '*': { | |
| classList: 'polyfills/classList', | |
| conditioner: 'vendor/conditionerjs/conditioner' | |
| } | |
| } | |
| }); | |
| var polyfills = []; | |
| if (!('classList' in document.documentElement)) { | |
| polyfills.push('classList'); | |
| } | |
| // ... more feature detections ... | |
| require(['conditioner'].concat(polyfills), function(conditioner) { | |
| conditioner.init(); | |
| }); | |
| }()); |
Looks nice, I've taken a stab at shortening the mustard cut a bit. And have implemented the bouncer pattern.
(function(){
var d = document;
if (!('querySelector' in d && 'addEventListener' in window)) {return;}
d.documentElement.className += ' has-js';
d.addEventListener('DOMContentLoaded', function() {
var s = d.createElement('script');
s.setAttribute('src', '/static/js/vendor/requirejs/require.js');
s.setAttribute('data-main', '/static/js/main');
d.body.appendChild(s);
});
}());Also the new module enabled property in Conditioner might be interesting in relation to the polyfills. It's a micro mustard cut.
To prevent polluting the global scope with the _polyfills variable you could wrap the entire main.js in a self executing function or maybe even make a separate polyfills module.
Manual minification, I love it. We can do even better:
(function(d){
// ...
}(document));Also, would it be possible to shorten both the setAttribute calls? I know s.src = will work, but will this work for the data attribute as well?
var s = d.createElement('script');
s.src = '/static/js/vendor/requirejs/require.js';
s['data-main'] = '/static/js/main';Or we could go crazy and save more bytes:
(function(d, f){
s[f]('src', '/static/js/vendor/requirejs/require.js');
s[f]('data-main', '/static/js/main');
}(document, 'setAttribute'));On second thought, let's stop here ;) We should leave minification to a minifier.
Anyway, I've updated the gist with the sane changes.
Haha, brilliant! :-) Excellent plan to leave minifying to the pros ;)
Updated! Thanks for the response so far :)