Sometimes you'll have objects that manage state along with event handling. This happens frequently in MVC apps. Let's start with a messy example:
var Launcher = function(rocket) {
this.rocket = rocket
}
Launcher.prototype.isReady = function() {
| var $ = function() { | |
| var readyFn = [], | |
| loadedFn = [], | |
| $ = function(selector, context) { | |
| return new NL(qsa(selector, context)) | |
| }, | |
| qsa = function(selector, context) { | |
| if (typeof selector == "object" && (selector.nodeType || "setInterval" in selector)) return [selector]; | |
| if (selector instanceof NL) return selector; | |
| return (context || document).querySelectorAll(selector) |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Single-Column Responsive Email Template</title> | |
| <style> | |
| @media only screen and (min-device-width: 541px) { | |
| .content { |
| var gulp = require('gulp') | |
| , jshint = require('gulp-jshint') | |
| , csslint = require('gulp-csslint') | |
| , sass = require('gulp-sass') | |
| , gconcat = require('gulp-concat') | |
| , uglify = require('gulp-uglify') | |
| , rename = require('gulp-rename') | |
| , ngmin = require('gulp-ngmin') | |
| , gzip = require('gulp-gzip') | |
| , jade = require('gulp-jade') |
| #!/bin/bash | |
| # Favicon and Apple Touch Icon Generator | |
| # | |
| # This bash script takes an image as a parameter, and uses ImageMagick to convert it to several | |
| # other formats used on modern websites. The following copies are generated: | |
| # | |
| # * apple-touch-icon-114x114-precomposed.png | |
| # * apple-touch-icon-57x57-precomposed.png | |
| # * apple-touch-icon-72x72-precomposed.png |
| ... | |
| // test for font-face version to load via Data URI'd CSS | |
| // Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot | |
| var fonts = ns.files.css.fontsWOFF, | |
| ua = win.navigator.userAgent; | |
| // android webkit browser, non-chrome | |
| if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){ | |
| fonts = ns.files.css.fontsTTF; | |
| } |
| <!doctype html> | |
| <html lang="en" class="breakpoint-medium"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Metaquery Boilerplate</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <meta name="breakpoint" content="small" media="(max-width: 480px)"> | |
| <meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)"> |
| // ---- | |
| // Sass (v3.3.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| //************************************************************************// | |
| // Strip Unit | |
| // http://stackoverflow.com/a/12335841/673457 | |
| //************************************************************************// | |
| @function strip( $val ) { |
| var IE = (function() { | |
| if (document.documentMode) { | |
| return document.documentMode; | |
| } else { | |
| for (var i = 7; i > 4; i--) { | |
| var div = document.createElement("div"); | |
| div.innerHTML = "<!--[if IE " + i + "]><span></span><![endif]-->"; | |
| if (div.getElementsByTagName("span").length) { |