├── README.md
├── cn
    └── index.html
├── code-reuse-patterns
    ├── borrowing-methods.html
    ├── cp1-default.html
    ├── cp2-rent-a-constructor.html
    ├── cp3-rent-and-set-prototype.html
    ├── cp4-share-the-prototype.html
    ├── cp5-a-temporary-constructor.html
    ├── inheritance-by-copying-properties.html
    ├── klass.html
    ├── mix-ins.html
    └── prototypal-inheritance.html
├── css
    └── style.css
├── design-patterns
    ├── builder.html
    ├── chain-of-responsibility.html
    ├── command.html
    ├── decorator.html
    ├── facade.html
    ├── factory.html
    ├── iterator.html
    ├── mediator.html
    ├── multiton.html
    ├── observer.html
    ├── proxy.html
    ├── singleton.html
    ├── strategy.html
    └── visitor.html
├── dom-and-browser
    └── event-handling.html
├── function-patterns
    ├── callback.html
    ├── callbacks-and-scope.html
    ├── configuration-objects.html
    ├── currying.html
    ├── enforcing-new-in-constructors.html
    ├── function-call.html
    ├── immediate-functions.html
    ├── immediate-object-initialization.html
    ├── init-time-branching.html
    ├── memoization.html
    ├── partial-application.html
    ├── returning-functions.html
    ├── self-defining-functions.html
    └── self-overwrite.html
├── general-patterns
    ├── access-to-global-object.html
    ├── avoiding-eval.html
    ├── avoiding-implied-typecasting.html
    ├── built-in-prototypes.html
    ├── conditionals.html
    ├── for-in-loops.html
    ├── for-loops.html
    ├── function-declarations.html
    ├── global-import.html
    ├── globals.html
    ├── hoisting.html
    ├── iife-for-loop.html
    ├── map-and-filter-by-reduce.html
    ├── minimizing-globals.html
    ├── parseint.html
    ├── shim-sniffing.html
    ├── single-var-pattern.html
    └── switch-pattern.html
├── img
    ├── .gitignore
    ├── js-patterns-cn.png
    └── js-patterns.png
├── index.html
├── jquery-patterns
    ├── append.html
    ├── cache-selector.html
    ├── context-and-find.html
    ├── data.html
    ├── decending-from-id.html
    ├── detach.html
    ├── event-delegation.html
    ├── left-and-right.html
    ├── pubsub-callback.html
    ├── pubsub-custom-events.html
    ├── pubsub-observable.html
    ├── pubsub-plugin.html
    ├── requery.html
    ├── specific-when-needed.html
    ├── universal-selector.html
    └── window-scroll-event.html
├── jquery-plugin-patterns
    ├── amd-commonjs
    │   ├── pluginCore.js
    │   ├── pluginExtension.js
    │   └── usage.html
    ├── basic.html
    ├── best-options.html
    ├── custom-events.html
    ├── extend.html
    ├── highly-configurable-mutable.html
    ├── jquery-mobile-ui-widget-factory.html
    ├── lightweight.html
    ├── namespaced-starter.html
    ├── prototypal-inheritance.html
    ├── ui-widget-factory-bridge.html
    ├── ui-widget-factory-mobile.html
    ├── ui-widget-factory.html
    └── ui-widget-requirejs-module.html
├── js
    ├── libs
    │   ├── jquery-1.6.4.js
    │   ├── jquery-1.6.4.min.js
    │   └── modernizr-2.0.6.min.js
    ├── plugins.js
    └── script.js
├── literals-and-constructors
    ├── array-literal.html
    ├── enforcing-new.html
    ├── json.html
    ├── object-literal.html
    ├── primitive-wrappers.html
    └── regular-expression-literal.html
└── object-creation-patterns
    ├── chaining.html
    ├── declaring-dependencies.html
    ├── inheritence.html
    ├── module.html
    ├── module2.html
    ├── module3-augmentation.html
    ├── module4-loose-augmentation.html
    ├── module5-tight-augmentation.html
    ├── module6-clone-inheritance.html
    ├── module7-cross-file.html
    ├── namespace.html
    ├── object-constants.html
    ├── private-properties-and-methods.html
    ├── revelation.html
    ├── sandbox.html
    ├── static-members.html
    ├── sub-module.html
    └── sugar-method.html


/README.md:
--------------------------------------------------------------------------------
1 | #JavaScript Patterns
2 | 
3 | <img src="http://shichuan.github.io/javascript-patterns/img/js-patterns.png" alt="JS Patterns" title="JS Patterns" />
4 | <br />
5 | Project page at: <a href="http://shichuan.github.io/javascript-patterns" target="_blank">http://shichuan.github.io/javascript-patterns</a>
6 | 
7 | 


--------------------------------------------------------------------------------
/code-reuse-patterns/borrowing-methods.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Borrowing Methods
10 | 			 Description: reuse one or two methods of an existing object without forming a parent-child relationship with that object
11 | 			 */
12 | 
13 | 			function f() {
14 | 				var args = [].slice.call(arguments, 1, 3);
15 | 				return args;
16 | 			}
17 | 
18 | 			var one = {
19 | 				name:'object',
20 | 				say:function (greet) {
21 | 					return greet + ', ' + this.name;
22 | 				}
23 | 			};
24 | 
25 | 			// test
26 | 			console.log(one.say('hi')); // "hi, object"
27 | 
28 | 			var two = {
29 | 				name:'another object'
30 | 			};
31 | 			
32 | 			// apply two to original object one.
33 | 			console.log(one.say.apply(two, ['hello'])); // "hello, another object"
34 | 
35 | 			// assigning to a variable
36 | 			// `this` will point to the global object
37 | 			var say = one.say;
38 | 			console.log(say('hoho')); // "hoho, undefined"
39 | 
40 | 			// passing as a callback
41 | 			var yetanother = {
42 | 				name:'Yet another object',
43 | 				method:function (callback) {
44 | 					return callback('Hola');
45 | 				}
46 | 			};
47 | 			console.log(yetanother.method(one.say)); // "Hola, undefined"
48 | 
49 | 			function bind(o, m) {
50 | 				return function () {
51 | 					return m.apply(o, [].slice.call(arguments));
52 | 				};
53 | 			}
54 | 
55 | 			var twosay = bind(two, one.say);
56 | 			console.log(twosay('yo')); // "yo, another object"
57 | 
58 | 
59 | 			// ECMAScript 5 adds a method bind() to Function.prototype, making it just as easy to use as apply() and call().
60 | 
61 | 			if (typeof Function.prototype.bind === 'undefined') {
62 | 				Function.prototype.bind = function (thisArg) {
63 | 					var fn = this,
64 | 							slice = Array.prototype.slice,
65 | 							args = slice.call(arguments, 1);
66 | 					return function () {
67 | 						return fn.apply(thisArg, args.concat(slice.call(arguments)));
68 | 					};
69 | 				};
70 | 			}
71 | 
72 | 			var twosay2 = one.say.bind(two);
73 | 			console.log(twosay2('Bonjour')); // "Bonjour, another object"
74 | 
75 | 			var twosay3 = one.say.bind(two, 'Enchanté');
76 | 			console.log(twosay3()); // "Enchanté, another object"
77 | 
78 | 
79 | 			// reference
80 | 			// http://shop.oreilly.com/product/9780596806767.do
81 | 		</script>
82 | 	</body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/code-reuse-patterns/cp1-default.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Classical Pattern #1 - The Default Pattern (a pattern that should be generally avoided)
10 | 			 Description: create an object using the Parent() constructor and assign this object to the Child()'s prototype
11 | 			 */
12 | 
13 | 			function inherit(C, P) {
14 | 				C.prototype = new P();
15 | 			}
16 | 
17 | 			// the parent constructor
18 | 			function Parent(name) {
19 | 				this.name = name || 'Adam';
20 | 			}
21 | 			// adding functionality to the prototype
22 | 			Parent.prototype.say = function () {
23 | 				return this.name;
24 | 			};
25 | 			// empty child constructor
26 | 			function Child(name) {
27 | 			}
28 | 
29 | 			// inheritance magic happens here
30 | 			inherit(Child, Parent);
31 | 
32 | 			var kid = new Child();
33 | 			console.log(kid.say()); // "Adam"
34 | 
35 | 			// Drawback 1: own properties added to `this` is inherited
36 | 			var kiddo = new Child();
37 | 			kiddo.name = "Patrick";
38 | 			console.log(kiddo.say()); // "Patrick"
39 | 
40 | 
41 | 			// Drawback 2: it doesn't enable you to pass parameters to the child constructor
42 | 			var s = new Child('Seth');
43 | 			console.log(s.say()); // "Adam"
44 | 
45 | 
46 | 			// reference
47 | 			// http://shop.oreilly.com/product/9780596806767.do
48 | 		</script>
49 | 	</body>
50 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/cp2-rent-a-constructor.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Classical Pattern #2 - Rent a Constructor (a pattern that should be generally avoided)
10 | 			 Description: it borrows the parent constructor, passing the child object to be bound to this and also forwarding any arguments
11 | 			 */
12 | 
13 | 			// the parent constructor
14 | 			function Parent(name) {
15 | 				this.name = name || 'Adam';
16 | 			}
17 | 
18 | 			// adding functionality to the prototype
19 | 			Parent.prototype.say = function () {
20 | 				return this.name;
21 | 			};
22 | 
23 | 			// child constructor
24 | 			function Child(name) {
25 | 				Parent.apply(this, arguments);
26 | 			}
27 | 
28 | 			var kid = new Child("Patrick");
29 | 			console.log(kid.name); // "Patrick"
30 | 
31 | 			// Drawback 1: nothing from the prototype gets inherited
32 | 			console.log(typeof kid.say); // "undefined"
33 | 
34 | 			// Multiple Inheritance by Borrowing Constructors
35 | 			function Cat() {
36 | 				this.legs = 4;
37 | 				this.say = function () {
38 | 					return "meaowww";
39 | 				}
40 | 			}
41 | 
42 | 			function Bird() {
43 | 				this.wings = 2;
44 | 				this.fly = true;
45 | 			}
46 | 
47 | 			function CatWings() {
48 | 				Cat.apply(this);
49 | 				Bird.apply(this);
50 | 			}
51 | 
52 | 			var jane = new CatWings();
53 | 			console.dir(jane);
54 | 
55 | 
56 | 			// reference
57 | 			// http://shop.oreilly.com/product/9780596806767.do
58 | 		</script>
59 | 	</body>
60 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/cp3-rent-and-set-prototype.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Classical Pattern #3 - Rent and Set Prototype (a pattern that should be generally avoided)
10 | 			 Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
11 | 			 */
12 | 
13 | 			// the parent constructor
14 | 			function Parent(name) {
15 | 				this.name = name || 'Adam';
16 | 			}
17 | 
18 | 			// adding functionality to the prototype
19 | 			Parent.prototype.say = function () {
20 | 				return this.name;
21 | 			};
22 | 
23 | 			// child constructor
24 | 			function Child(name) {
25 | 				Parent.apply(this, arguments);
26 | 			}
27 | 
28 | 			Child.prototype = new Parent();
29 | 
30 | 			var kid = new Child("Patrick");
31 | 			console.log(kid.name); // "Patrick"
32 | 			console.log(typeof kid.say); // function
33 | 			console.log(kid.say()); // Patrick
34 | 			console.dir(kid);
35 | 			delete kid.name;
36 | 			console.log(kid.say()); // "Adam"
37 | 
38 | 			// Drawback - the parent constructor is called twice, so it could be inefficient
39 | 
40 | 
41 | 			// reference
42 | 			// http://shop.oreilly.com/product/9780596806767.do
43 | 		</script>
44 | 	</body>
45 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/cp4-share-the-prototype.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Classical Pattern #3 - Share the Prototype (a pattern that should be generally avoided)
10 | 			 Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
11 | 			 */
12 | 
13 | 			function inherit(C, P) {
14 | 				C.prototype = P.prototype;
15 | 			}
16 | 
17 | 			// the parent constructor
18 | 			function Parent(name) {
19 | 				this.name = name || 'Adam';
20 | 			}
21 | 
22 | 			// adding functionality to the prototype
23 | 			Parent.prototype.say = function () {
24 | 				return this.name;
25 | 			};
26 | 
27 | 			// child constructor
28 | 			function Child(name) {
29 | 			}
30 | 
31 | 			inherit(Child, Parent);
32 | 
33 | 			var kid = new Child('Patrick');
34 | 			console.log(kid.name); // undefined
35 | 			console.log(typeof kid.say); // function
36 | 			kid.name = 'Patrick';
37 | 			console.log(kid.say()); // Patrick
38 | 			console.dir(kid);
39 | 
40 | 
41 | 			// reference
42 | 			// http://shop.oreilly.com/product/9780596806767.do
43 | 		</script>
44 | 	</body>
45 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/cp5-a-temporary-constructor.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Classical Pattern #5 - A Temporary Constructor (a pattern that should be generally avoided)
10 | 			 Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
11 | 			 */
12 | 
13 | 			/* Basic */
14 | 			/*function inherit(C, P) {
15 | 			 var F = function () {};
16 | 			 F.prototype = P.prototype;
17 | 			 C.prototype = new F();
18 | 			 }*/
19 | 
20 | 			/* Storing the Superclass */
21 | 			/*function inherit(C, P) {
22 | 			 var F = function () {};
23 | 			 F.prototype = P.prototype;
24 | 			 C.prototype = new F();
25 | 			 C.uber = P.prototype;
26 | 			 }*/
27 | 
28 | 			/* Resetting the Constructor Pointer */
29 | 			/*function inherit(C, P) {
30 | 			 var F = function () {};
31 | 			 F.prototype = P.prototype;
32 | 			 C.prototype = new F();
33 | 			 C.uber = P.prototype;
34 | 			 C.prototype.constructor = C;
35 | 			 }*/
36 | 
37 | 			/* in closure */
38 | 			var inherit = (function () {
39 | 				var F = function () {
40 | 				};
41 | 				return function (C, P) {
42 | 					F.prototype = P.prototype;
43 | 					C.prototype = new F();
44 | 					C.uber = P.prototype;
45 | 					C.prototype.constructor = C;
46 | 				}
47 | 			}());
48 | 
49 | 			function Parent(name) {
50 | 				this.name = name || 'Adam';
51 | 			}
52 | 
53 | 			// adding functionality to the prototype
54 | 			Parent.prototype.say = function () {
55 | 				return this.name;
56 | 			};
57 | 
58 | 			// child constructor
59 | 			function Child(name) {
60 | 			}
61 | 
62 | 			inherit(Child, Parent);
63 | 
64 | 			var kid = new Child();
65 | 			console.log(kid.name); // undefined
66 | 			console.log(typeof kid.say); // function
67 | 			kid.name = 'Patrick';
68 | 			console.log(kid.say()); // Patrick
69 | 			console.log(kid.constructor.name); // Child
70 | 			console.log(kid.constructor === Parent); // false
71 | 
72 | 
73 | 			// reference
74 | 			// http://shop.oreilly.com/product/9780596806767.do
75 | 		</script>
76 | 	</body>
77 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/inheritance-by-copying-properties.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Inheritance by Copying Properties
10 | 			 Description: an object gets functionality from another object, simply by copying it
11 | 			 */
12 | 
13 | 			/* shallow copy */
14 | 			function extend(parent, child) {
15 | 				var i;
16 | 				child = child || {};
17 | 				for (i in parent) {
18 | 					if (parent.hasOwnProperty(i)) {
19 | 						child[i] = parent[i];
20 | 					}
21 | 				}
22 | 				return child;
23 | 			}
24 | 
25 | 			var dad = {name:"Adam"};
26 | 			var kid = extend(dad);
27 | 			console.log(kid.name); // "Adam"
28 | 
29 | 			var dad = {
30 | 				counts:[1, 2, 3],
31 | 				reads:{paper:true}
32 | 			};
33 | 			var kid = extend(dad);
34 | 			kid.counts.push(4);
35 | 			console.log(dad.counts.toString()); // "1,2,3,4"
36 | 			console.log(dad.reads === kid.reads); // true
37 | 
38 | 
39 | 			/* deep copy */
40 | 			function extendDeep(parent, child) {
41 | 				var i,
42 | 						toStr = Object.prototype.toString,
43 | 						astr = "[object Array]";
44 | 
45 | 				child = child || {};
46 | 
47 | 				for (i in parent) {
48 | 					if (parent.hasOwnProperty(i)) {
49 | 						if (typeof parent[i] === 'object') {
50 | 							child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
51 | 							extendDeep(parent[i], child[i]);
52 | 						} else {
53 | 							child[i] = parent[i];
54 | 						}
55 | 					}
56 | 				}
57 | 				return child;
58 | 			}
59 | 
60 | 			var dad = {
61 | 				counts:[1, 2, 3],
62 | 				reads:{paper:true}
63 | 			};
64 | 			var kid = extendDeep(dad);
65 | 
66 | 			kid.counts.push(4);
67 | 			console.log(kid.counts.toString()); // "1,2,3,4"
68 | 			console.log(dad.counts.toString()); // "1,2,3"
69 | 
70 | 			console.log(dad.reads === kid.reads); // false
71 | 			kid.reads.paper = false;
72 | 
73 | 
74 | 			// reference
75 | 			// http://shop.oreilly.com/product/9780596806767.do
76 | 		</script>
77 | 	</body>
78 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/klass.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Klass (a pattern that should be generally avoided)
 10 | 			 Description: generally a pattern that should be avoided unless one is more comfortable with class than prototype
 11 | 			 */
 12 | 
 13 | 			// Drawback: it brings the whole confusing notion of classes, which don’t technically exist in the language
 14 | 
 15 | 			// Benefit: you can tweak the syntax and the conventions to resemble another of your favorite languages
 16 | 
 17 | 			var klass = function (Parent, props) {
 18 | 
 19 | 				var Child, F, i;
 20 | 
 21 | 				// 1.
 22 | 				// new constructor
 23 | 				Child = function () {
 24 | 					if (Child.uber && Child.uber.hasOwnProperty("__construct")) {
 25 | 						Child.uber.__construct.apply(this, arguments);
 26 | 					}
 27 | 					if (Child.prototype.hasOwnProperty("__construct")) {
 28 | 						Child.prototype.__construct.apply(this, arguments);
 29 | 					}
 30 | 				};
 31 | 
 32 | 				// 2.
 33 | 				// inherit
 34 | 				Parent = Parent || Object;
 35 | 				F = function () {
 36 | 				};
 37 | 				F.prototype = Parent.prototype;
 38 | 				Child.prototype = new F();
 39 | 				Child.uber = Parent.prototype;
 40 | 				Child.prototype.constructor = Child;
 41 | 
 42 | 				// 3.
 43 | 				// add implementation methods
 44 | 				for (i in props) {
 45 | 					if (props.hasOwnProperty(i)) {
 46 | 						Child.prototype[i] = props[i];
 47 | 					}
 48 | 				}
 49 | 
 50 | 				// return the "class"
 51 | 				return Child;
 52 | 			};
 53 | 
 54 | 			var Man = klass(null, {
 55 | 				__construct:function (what) {
 56 | 					console.log("Man's constructor");
 57 | 					this.name = what;
 58 | 				},
 59 | 				getName:function () {
 60 | 					return this.name;
 61 | 				}
 62 | 			});
 63 | 
 64 | 			var first = new Man('Adam'); // logs "Man's constructor"
 65 | 			first.getName(); // "Adam"
 66 | 
 67 | 			var SuperMan = klass(Man, {
 68 | 				__construct:function (what) {
 69 | 					console.log("SuperMan's constructor");
 70 | 				},
 71 | 				getName:function () {
 72 | 					var name = SuperMan.uber.getName.call(this);
 73 | 					return "I am " + name;
 74 | 				}
 75 | 			});
 76 | 
 77 | 			var clark = new SuperMan('Clark Kent');
 78 | 			clark.getName(); // "I am Clark Kent"
 79 | 
 80 | 			console.log(clark instanceof Man); // true
 81 | 			console.log(clark instanceof SuperMan); // true
 82 | 
 83 | 			/* Title: Classical Pattern #5 - A Temporary Constructor (a pattern that should be generally avoided)
 84 | 			 Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
 85 | 			 */
 86 | 
 87 | 			/* Basic */
 88 | 			/*function inherit(C, P) {
 89 | 			 var F = function () {};
 90 | 			 F.prototype = P.prototype;
 91 | 			 C.prototype = new F();
 92 | 			 }*/
 93 | 
 94 | 			/* Storing the Superclass */
 95 | 			/*function inherit(C, P) {
 96 | 			 var F = function () {};
 97 | 			 F.prototype = P.prototype;
 98 | 			 C.prototype = new F();
 99 | 			 C.uber = P.prototype;
100 | 			 }*/
101 | 
102 | 			/* Resetting the Constructor Pointer */
103 | 			/*function inherit(C, P) {
104 | 			 var F = function () {};
105 | 			 F.prototype = P.prototype;
106 | 			 C.prototype = new F();
107 | 			 C.uber = P.prototype;
108 | 			 C.prototype.constructor = C;
109 | 			 }*/
110 | 
111 | 			/* in closure */
112 | 			var inherit = (function () {
113 | 				var F = function () {
114 | 				};
115 | 				return function (C, P) {
116 | 					F.prototype = P.prototype;
117 | 					C.prototype = new F();
118 | 					C.uber = P.prototype;
119 | 					C.prototype.constructor = C;
120 | 				}
121 | 			}());
122 | 
123 | 			function Parent(name) {
124 | 				this.name = name || 'Adam';
125 | 			}
126 | 
127 | 			// adding functionality to the prototype
128 | 			Parent.prototype.say = function () {
129 | 				return this.name;
130 | 			};
131 | 
132 | 			// child constructor
133 | 			function Child(name) {
134 | 			}
135 | 
136 | 			inherit(Child, Parent);
137 | 
138 | 			var kid = new Child();
139 | 			console.log(kid.name); // undefined
140 | 			console.log(typeof kid.say); // function
141 | 			kid.name = 'Patrick';
142 | 			console.log(kid.say()); // Patrick
143 | 			console.log(kid.constructor.name); // Child
144 | 			console.log(kid.constructor === Parent); // false
145 | 
146 | 
147 | 			// reference
148 | 			// http://shop.oreilly.com/product/9780596806767.do
149 | 		</script>
150 | 	</body>
151 | </html>
152 | 


--------------------------------------------------------------------------------
/code-reuse-patterns/mix-ins.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Mix-ins
10 | 			 Description: copy from any number of objects and mix them all into a new object
11 | 			 */
12 | 
13 | 			function mix() {
14 | 				var arg, prop, child = {};
15 | 				for (arg = 0; arg < arguments.length; arg += 1) {
16 | 					for (prop in arguments[arg]) {
17 | 						if (arguments[arg].hasOwnProperty(prop)) {
18 | 							child[prop] = arguments[arg][prop];
19 | 						}
20 | 					}
21 | 				}
22 | 				return child;
23 | 			}
24 | 
25 | 			var cake = mix(
26 | 					{eggs:2, large:true},
27 | 					{butter:1, salted:true},
28 | 					{flour:'3 cups'},
29 | 					{sugar:'sure!'}
30 | 			);
31 | 
32 | 			console.dir(cake);
33 | 
34 | 
35 | 			// reference
36 | 			// http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mixinpatternjavascript
37 | 			// http://shop.oreilly.com/product/9780596806767.do
38 | 		</script>
39 | 	</body>
40 | </html>


--------------------------------------------------------------------------------
/code-reuse-patterns/prototypal-inheritance.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Prototypal Inheritance
10 | 			 Description: objects inherit from other objects
11 | 			 */
12 | 
13 | 			function object(o) {
14 | 				function F() {
15 | 				}
16 | 
17 | 				F.prototype = o;
18 | 				return new F();
19 | 			}
20 | 
21 | 			// object to inherit from
22 | 			var parent = {
23 | 				name:"Papa"
24 | 			};
25 | 
26 | 			// the new object
27 | 			var child = object(parent);
28 | 
29 | 			// testing
30 | 			console.log(child.name); // "Papa"
31 | 
32 | 
33 | 			// parent constructor
34 | 			function Person() {
35 | 				// an "own" property
36 | 				this.name = "Adam";
37 | 			}
38 | 			// a property added to the prototype
39 | 			Person.prototype.getName = function () {
40 | 				return this.name;
41 | 			};
42 | 
43 | 			// create a new person
44 | 			var papa = new Person();
45 | 
46 | 			// inherit
47 | 			var kid = object(papa);
48 | 
49 | 			// test that both the own property
50 | 			// and the prototype property were inherited
51 | 			console.log(kid.getName()); // "Adam"
52 | 
53 | 			// parent constructor
54 | 			function Person() {
55 | 				// an "own" property
56 | 				this.name = "Adam";
57 | 			}
58 | 
59 | 			// a property added to the prototype
60 | 			Person.prototype.getName = function () {
61 | 				return this.name;
62 | 			};
63 | 
64 | 			// inherit
65 | 			var kid = object(Person.prototype);
66 | 			console.log(typeof kid.getName); // "function", because it was in the prototype
67 | 			console.log(typeof kid.name); // "undefined", because only the prototype was inherited
68 | 
69 | 			/* Addition to ECMAScript 5 */
70 | 			var child = Object.create(parent);
71 | 
72 | 			var child = Object.create(parent, {
73 | 				age:{ value:2 } // ECMA5 descriptor
74 | 			});
75 | 			console.log(child.hasOwnProperty("age")); // true
76 | 
77 | 
78 | 			// reference
79 | 			// http://shop.oreilly.com/product/9780596806767.do
80 | 		</script>
81 | 	</body>
82 | </html>


--------------------------------------------------------------------------------
/design-patterns/builder.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>JavaScript Patterns</title>
 5 |     <meta charset="utf-8">
 6 |   </head>
 7 |   <body>
 8 |     <button id="test">Test</button>
 9 |     <script>
10 |       /* Title: Builder
11 |        Description: constructs complex objects by separating construction and representation
12 |        */
13 |       function getBeerById(id, callback) {
14 |         // Make request for beer by ID, then return the beer data.
15 |         asyncRequest('GET', 'beer.uri?id=' + id, function (resp) {
16 |           // callback response
17 |           callback(resp.responseText);
18 |         });
19 |       }
20 |       var el = document.querySelector('#test');
21 |       el.addEventListener('click', getBeerByIdBridge, false);
22 |       function getBeerByIdBridge(e) {
23 |         getBeerById(this.id, function (beer) {
24 |           console.log('Requested Beer: ' + beer);
25 |         });
26 |       }
27 |       // reference
28 |       // http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#builderpatternjquery
29 |     </script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/design-patterns/chain-of-responsibility.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Chain of responsibility
10 | 			 Description: delegates commands to a chain of processing objects
11 | 			 */
12 | 
13 | 			var NO_TOPIC = -1;
14 | 			var Topic;
15 | 
16 | 			function Handler(s, t) {
17 | 				this.successor = s || null;
18 | 				this.topic = t || 0;
19 | 			}
20 | 
21 | 			Handler.prototype = {
22 | 				handle:function () {
23 | 					console.log(this.has());
24 | 					if (this.successor) {
25 | 						this.successor.handle();
26 | 					}
27 | 					console.log(this.topic);
28 | 				},
29 | 				has:function () {
30 | 					return this.topic != NO_TOPIC;
31 | 				}
32 | 			};
33 | 
34 | 			var _handle = Handler.prototype.handle;
35 | 
36 | 			var app = new Handler({
37 | 				handle:function () {
38 | 					console.log('app handle');
39 | 				}
40 | 			}, 3);
41 | 
42 | 			var dialog = new Handler(app, 1);
43 | 			//dialog.handle = function () {
44 | 			//if (this.has()) {
45 | 			//} else {
46 | 			//console.log('dialog handle');
47 | 			//_handle.call(this);
48 | 			//}
49 | 			//}
50 | 
51 | 			var button = new Handler(dialog, 2);
52 | 			//button.handle = function () {
53 | 			//if (this.has()) {
54 | 			//} else {
55 | 			//console.log('dialog handle');
56 | 			//_handle.call(this);
57 | 			//}
58 | 			//}
59 | 
60 | 			button.handle();
61 | 
62 | 			// reference
63 | 			// https://gist.github.com/1174982
64 | 		</script>
65 | 	</body>
66 | </html>


--------------------------------------------------------------------------------
/design-patterns/command.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Command
10 | 			 Description: creates objects which encapsulate actions and parameters
11 | 			 */
12 | 
13 | 			(function () {
14 | 
15 | 				var CarManager = {
16 | 
17 | 					/* request information */
18 | 					requestInfo:function (model, id) {
19 | 						return 'The purchase info for ' + model + ' with ID ' + id + ' is being processed...';
20 | 					},
21 | 
22 | 					/* purchase the car */
23 | 					buyVehicle:function (model, id) {
24 | 						return 'You have successfully purchased Item ' + id + ', a ' + model + '.';
25 | 					}
26 | 
27 | 				};
28 | 
29 | 				CarManager.execute = function (commad) {
30 | 					return CarManager[commad.request](commad.model, commad.carID);
31 | 				};
32 | 
33 | 				var actionA = CarManager.execute({request:'requestInfo', model:'Ford Mondeo', carID:'543434'});
34 | 				console.log(actionA);
35 | 				var actionB = CarManager.execute({request:'buyVehicle', model:'Ford Mondeo', carID:'543434'});
36 | 				console.log(actionB);
37 | 
38 | 			})();
39 | 
40 | 			// reference
41 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#commandpatternjavascript
42 | 		</script>
43 | 	</body>
44 | </html>


--------------------------------------------------------------------------------
/design-patterns/decorator.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Decorator
10 | 			 Description: dynamically adds/overrides behaviour in an existing method of an object
11 | 			 */
12 | 
13 | 			var tree = {};
14 | 			tree.decorate = function () {
15 | 				console.log('Make sure the tree won\'t fall');
16 | 			};
17 | 
18 | 			tree.getDecorator = function (deco) {
19 | 				tree[deco].prototype = this;
20 | 				return new tree[deco];
21 | 			};
22 | 
23 | 			tree.RedBalls = function () {
24 | 				this.decorate = function () {
25 | 					this.RedBalls.prototype.decorate();
26 | 					console.log('Put on some red balls');
27 | 				}
28 | 			};
29 | 
30 | 			tree.BlueBalls = function () {
31 | 				this.decorate = function () {
32 | 					this.BlueBalls.prototype.decorate();
33 | 					console.log('Add blue balls');
34 | 				}
35 | 			};
36 | 
37 | 			tree.Angel = function () {
38 | 				this.decorate = function () {
39 | 					this.Angel.prototype.decorate();
40 | 					console.log('An angel on the top');
41 | 				}
42 | 			};
43 | 
44 | 			tree = tree.getDecorator('BlueBalls');
45 | 			tree = tree.getDecorator('Angel');
46 | 			tree = tree.getDecorator('RedBalls');
47 | 
48 | 			tree.decorate();
49 | 
50 | 			// reference
51 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#decoratorpatternjavascript
52 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
53 | 		</script>
54 | 	</body>
55 | </html>


--------------------------------------------------------------------------------
/design-patterns/facade.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Facade
10 | 			 Description: provides a simplified interface to a large body of code
11 | 			 */
12 | 
13 | 			var mobileEvent = {
14 | 				// ...
15 | 				stop:function (e) {
16 | 					e.preventDefault();
17 | 					e.stopPropagation();
18 | 				}
19 | 				// ...
20 | 			};
21 | 
22 | 			// reference
23 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#facadepatternjavascript
24 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
25 | 		</script>
26 | 	</body>
27 | </html>


--------------------------------------------------------------------------------
/design-patterns/factory.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Factory method
10 | 			 Description: creates objects without specifying the exact class to create
11 | 			 */
12 | 
13 | 			var jsp = {};
14 | 			jsp.dom = {};
15 | 			jsp.dom.Text = function () {
16 | 				this.insert = function (where) {
17 | 					var txt = document.createTextNode(this.url);
18 | 					where.appendChild(txt);
19 | 				};
20 | 			};
21 | 			jsp.dom.Link = function () {
22 | 				this.insert = function (where) {
23 | 					var link = document.createElement('a');
24 | 					link.href = this.url;
25 | 					link.appendChild(document.createTextNode(this.url));
26 | 					where.appendChild(link);
27 | 				};
28 | 			};
29 | 			jsp.dom.Image = function () {
30 | 				this.insert = function (where) {
31 | 					var im = document.createElement('img');
32 | 					im.src = this.url;
33 | 					where.appendChild(im);
34 | 				};
35 | 			};
36 | 			jsp.dom.factory = function (type) {
37 | 				return new jsp.dom[type];
38 | 			}
39 | 
40 | 			var o = jsp.dom.factory('Link');
41 | 			o.url = 'http://google.com';
42 | 			o.insert(document.body);
43 | 
44 | 			var taskManager = {};
45 | 
46 | 			taskManager.update = function () {
47 | 				console.log('update');
48 | 			}
49 | 
50 | 			taskManager.read = function () {
51 | 				console.log('read');
52 | 			}
53 | 
54 | 			var type = 'update';
55 | 			var task;
56 | 
57 | 			if (type === 'update') {
58 | 				task = new taskManager.update();
59 | 			}
60 | 
61 | 			if (type === 'read') {
62 | 				task = new taskManager.read();
63 | 			}
64 | 
65 | 			taskManager.factory = function (typeType) {
66 | 				return new taskManager[typeType];
67 | 			}
68 | 
69 | 			task = new taskManager[type];
70 | 
71 | 			/*** Built-in Object Factory ***/
72 | 			var o = new Object(),
73 | 					n = new Object(1),
74 | 					s = Object('1'),
75 | 					b = Object(true);
76 | 
77 | 			// test
78 | 			o.constructor === Object;  // true
79 | 			n.constructor === Number;  // true
80 | 			s.constructor === String;  // true
81 | 			b.constructor === Boolean; // true
82 | 
83 | 			// reference
84 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript
85 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
86 | 		</script>
87 | 	</body>
88 | </html>


--------------------------------------------------------------------------------
/design-patterns/iterator.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>JavaScript Patterns</title>
 5 |     <meta charset="utf-8">
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       /* Title: Iterator
10 |        Description: implements a specialized language
11 |        */
12 |       var element;
13 |       while (element - agg.next()) {
14 |         // do something with the element
15 |         console.log(element);
16 |       }
17 |       while (agg.hasNext()) {
18 |         // do something with the next element...
19 |         console.log(agg.next());
20 |       }
21 |       var agg = (function () {
22 |         var index = 0,
23 |             data = [1, 2, 3, 4, 5],
24 |             length = data.length;
25 |         return {
26 |           next:function () {
27 |             var element;
28 |             if (!this.hasNext()) {
29 |               return null;
30 |             }
31 |             element = data[index];
32 |             index = index + 2;
33 |             return element;
34 |           },
35 |           hasNext:function () {
36 |             return index < length;
37 |           },
38 |           rewind:function () {
39 |             index = 0;
40 |           },
41 |           current:function () {
42 |             return data[index];
43 |           }
44 |         };
45 |       }());
46 |       // this loop logs 1, then 3, then 5
47 |       while (agg.hasNext()) {
48 |         console.log(agg.next());
49 |       }
50 |       // go back
51 |       agg.rewind();
52 |       console.log(agg.current()); // 1
53 |       // reference
54 |       // http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#iteratorpatternjquery
55 |       // http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
56 |     </script>
57 |   </body>
58 | </html>


--------------------------------------------------------------------------------
/design-patterns/mediator.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Mediator
10 | 			 Description: allows loose coupling between classes by being the only class that has detailed knowledge of their methods
11 | 			 */
12 | 
13 | 			function Player(name) {
14 | 				this.points = 0;
15 | 				this.name = name;
16 | 			}
17 | 			Player.prototype.play = function () {
18 | 				this.points += 1;
19 | 				mediator.played();
20 | 			};
21 | 			var scoreboard = {
22 | 
23 | 				// HTML element to be updated
24 | 				element:document.getElementById('results'),
25 | 
26 | 				// update the score display
27 | 				update:function (score) {
28 | 					var i, msg = '';
29 | 					for (i in score) {
30 | 						if (score.hasOwnProperty(i)) {
31 | 							msg += '<p><strong>' + i + '<\/strong>: ';
32 | 							msg += score[i];
33 | 							msg += '<\/p>';
34 | 						}
35 | 					}
36 | 					this.element.innerHTML = msg;
37 | 				}
38 | 			};
39 | 
40 | 			var mediator = {
41 | 
42 | 				// all the player
43 | 				players:{},
44 | 
45 | 				// initialization
46 | 				setup:function () {
47 | 					var players = this.players;
48 | 					players.home = new Player('Home');
49 | 					players.guest = new Player('Guest');
50 | 				},
51 | 
52 | 				// someone plays, update the score
53 | 				played:function () {
54 | 					var players = this.players,
55 | 							score = {
56 | 								Home:players.home.points,
57 | 								Guest:players.guest.points
58 | 							};
59 | 
60 | 					scoreboard.update(score);
61 | 				},
62 | 
63 | 				// handle user interactions
64 | 				keypress:function (e) {
65 | 					e = e || window.event; // IE
66 | 					if (e.which === 49) { // key "1"
67 | 						mediator.players.home.play();
68 | 						return;
69 | 					}
70 | 					if (e.which === 48) { // key "0"
71 | 						mediator.players.guest.play();
72 | 						return;
73 | 					}
74 | 				}
75 | 			};
76 | 
77 | 			// go!
78 | 			mediator.setup();
79 | 			window.onkeypress = mediator.keypress;
80 | 
81 | 			// game over in 30 seconds
82 | 			setTimeout(function () {
83 | 				window.onkeypress = null;
84 | 				console.log('Game over!');
85 | 			}, 30000);
86 | 
87 | 			// reference
88 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
89 | 		</script>
90 | 	</body>
91 | </html>


--------------------------------------------------------------------------------
/design-patterns/multiton.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 | <title>JavaScript Patterns</title>
 5 | <meta charset="utf-8">
 6 | </head>
 7 | <body>
 8 | <script>
 9 | /* Title: Multiton / Object Pool
10 |  Description: stores references to each object created for a class
11 | */
12 | 
13 | 
14 | //example class
15 | function Widget() {
16 |   // cache
17 |   Widget.instances = Widget.instances || [];
18 |  
19 |   // provide metadata
20 |   this.id = Widget.length;
21 |   
22 |   // store reference
23 |   Widget.instances.push(this);
24 |   // implicit return:
25 |   // return this;
26 | }
27 | 
28 | //getInstance method
29 | Widget.getInstance = function (index) {
30 |     return Widget.instances[index];
31 | };
32 | 
33 | 
34 | new Widget();
35 | new Widget();
36 | Widget.instances.length === 2; //true
37 | Widget.instances[0].id === 1; //true
38 | Widget.instances[1] === Widget.getInstance(1); //true
39 | 
40 | //Another example class uses the id to ensure prior
41 | //instances with the same id are removed from the object pool
42 | (function (global) {
43 |     var index = -1;
44 |     
45 |     function Widget(id) {
46 |         // provide metadata
47 |         //accept the id parameter to allow overwriting
48 |         this.id = id || (index += 1);
49 |       
50 |         // store reference
51 |         Widget.instances[this.id] = this;
52 |         // implicit return:
53 |         // return this;
54 |     }
55 |     
56 |     //cache
57 |     Widget.instances = {};
58 |     
59 |     //getInstance method
60 |     Widget.getInstance = function (index) {
61 |         return Widget.instances[index];
62 |     };
63 |     
64 |     return global.Widget = Widget;
65 | }(this));
66 | 
67 | new Widget();
68 | Widget.getInstance(0).id = 0; //true
69 | 
70 | var orig = new Widget();
71 | var compare = new Widget(1);
72 | compare.id === 1; //true
73 | compare === orig; //false
74 | 
75 | new Widget("test");
76 | Widget.instances.test === Widget.getInstance("test"); //true
77 | 
78 | //passing the id as a parameter does not increment the index
79 | new Widget().id === 2; //true
80 | 
81 | 
82 | //general reference about the multiton pattern: http://en.wikipedia.org/wiki/Multiton_pattern
83 | </script>
84 | </body>
85 | </html>


--------------------------------------------------------------------------------
/design-patterns/observer.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Observer
10 | 			 Description: is a publish/subscribe pattern which allows a number of observer objects to see an event
11 | 			 */
12 | 
13 | 			var observer = {
14 | 				addSubscriber:function (callback) {
15 | 					this.subscribers[this.subscribers.length] = callback;
16 | 				},
17 | 				removeSubscriber:function (callback) {
18 | 					for (var i = 0; i < this.subscribers.length; i++) {
19 | 						if (this.subscribers[i] === callback) {
20 | 							delete(this.subscribers[i]);
21 | 						}
22 | 					}
23 | 				},
24 | 				publish:function (what) {
25 | 					for (var i = 0; i < this.subscribers.length; i++) {
26 | 						if (typeof this.subscribers[i] === 'function') {
27 | 							this.subscribers[i](what);
28 | 						}
29 | 					}
30 | 				},
31 | 				make:function (o) { // turns an object into a publisher
32 | 					for (var i in this) {
33 | 						o[i] = this[i];
34 | 						o.subscribers = [];
35 | 					}
36 | 				}
37 | 			};
38 | 
39 | 			var blogger = {
40 | 				writeBlogPost:function () {
41 | 					var content = 'Today is ' + new Date();
42 | 					this.publish(content);
43 | 				}
44 | 			};
45 | 
46 | 			var la_times = {
47 | 				newIssue:function () {
48 | 					var paper = 'Martians have landed on Earth!';
49 | 					this.publish(paper);
50 | 				}
51 | 			};
52 | 
53 | 			observer.make(blogger);
54 | 			observer.make(la_times);
55 | 
56 | 			var jack = {
57 | 				read:function (what) {
58 | 					console.log('I just read that ' + what)
59 | 				}
60 | 			};
61 | 
62 | 			var jill = {
63 | 				gossip:function (what) {
64 | 					console.log('You didn\'t hear it from me, but ' + what)
65 | 				}
66 | 			};
67 | 
68 | 			blogger.addSubscriber(jack.read);
69 | 			blogger.addSubscriber(jill.gossip);
70 | 			blogger.writeBlogPost();
71 | 
72 | 			blogger.removeSubscriber(jill.gossip);
73 | 			blogger.writeBlogPost();
74 | 
75 | 			la_times.addSubscriber(jill.gossip);
76 | 			la_times.newIssue();
77 | 
78 | 			// reference
79 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript
80 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
81 | 		</script>
82 | 	</body>
83 | </html>


--------------------------------------------------------------------------------
/design-patterns/proxy.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<title>JavaScript Patterns</title>
  5 | 	<meta charset="utf-8">
  6 | 	<style>
  7 | 		img {
  8 | 			float: left;
  9 | 			padding-right: 7px;
 10 | 		}
 11 | 
 12 | 		div {
 13 | 			padding: 7px;
 14 | 			border: 1px solid #ccc;
 15 | 			background: #eee;
 16 | 			width: 400px;
 17 | 		}
 18 | 
 19 | 		h2 {
 20 | 			margin: 0;
 21 | 		}
 22 | 
 23 | 		span {
 24 | 			text-decoration: underline;
 25 | 			cursor: pointer;
 26 | 		}
 27 | 
 28 | 		body {
 29 | 			padding: 21px;
 30 | 			font-size: 105%;
 31 | 			font-family: Helvetica;
 32 | 		}
 33 | 
 34 | 		input {
 35 | 			margin-right: 7px;
 36 | 		}
 37 | 
 38 | 		a {
 39 | 			color: blue;
 40 | 		}
 41 | 	</style>
 42 | </head>
 43 | <body>
 44 | 	<h1>Dave Matthews vids</h1>
 45 | 	<p><span id="toggle-all">Toggle Checked</span></p>
 46 | 	<ol id="vids">
 47 | 		<li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--2158073">Gravedigger</a></li>
 48 | 		<li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--4472739">Save Me</a></li>
 49 | 		<li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--45286339">Crush</a></li>
 50 | 		<li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--2144530">Don't Drink The
 51 | 			Water</a></li>
 52 | 		<li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--217241800">Funny the Way It
 53 | 			Is</a></li>
 54 | 		<li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--2144532">What Would You Say</a>
 55 | 		</li>
 56 | 	</ol>
 57 | 
 58 | 	<script>
 59 | 		/* Title: Proxy
 60 | 		 Description: provides a placeholder for another object to control access, reduce cost, and reduce complexity
 61 | 		 */
 62 | 
 63 | 		var $ = function (id) {
 64 | 			return document.getElementById(id);
 65 | 		};
 66 | 
 67 | 		var http = {
 68 | 			makeRequest:function (ids, callback) {
 69 | 				var url = 'http://query.yahooapis.com/v1/public/yql?q=',
 70 | 						sql = 'select * from music.video.id where ids IN ("%ID%")',
 71 | 						format = "format=json",
 72 | 						handler = "callback=" + callback,
 73 | 						script = document.createElement('script');
 74 | 
 75 | 				sql = sql.replace('%ID%', ids.join('","'));
 76 | 				sql = encodeURIComponent(sql);
 77 | 
 78 | 				url += sql + '&' + format + '&' + handler;
 79 | 				script.src = url;
 80 | 
 81 | 				document.body.appendChild(script);
 82 | 			}
 83 | 		};
 84 | 
 85 | 		var proxy = {
 86 | 			ids:[],
 87 | 			delay:50,
 88 | 			timeout:null,
 89 | 			callback:null,
 90 | 			context:null,
 91 | 			makeRequest:function (id, callback, context) {
 92 | 
 93 | 				// add to the queue
 94 | 				this.ids.push(id);
 95 | 
 96 | 				this.callback = callback;
 97 | 				this.context = context;
 98 | 
 99 | 				// set up timeout
100 | 				if (!this.timeout) {
101 | 					this.timeout = setTimeout(function () {
102 | 						proxy.flush();
103 | 					}, this.delay);
104 | 				}
105 | 			},
106 | 			flush:function () {
107 | 				http.makeRequest(this.ids, 'proxy.handler');
108 | 				// clear timeout and queue
109 | 				this.timeout = null;
110 | 				this.ids = [];
111 | 
112 | 			},
113 | 			handler:function (data) {
114 | 				var i, max;
115 | 
116 | 				// single video
117 | 				if (parseInt(data.query.count, 10) === 1) {
118 | 					proxy.callback.call(proxy.context, data.query.results.Video);
119 | 					return;
120 | 				}
121 | 
122 | 				// multiple videos
123 | 				for (i = 0, max = data.query.results.Video.length; i < max; i += 1) {
124 | 					proxy.callback.call(proxy.context, data.query.results.Video[i]);
125 | 				}
126 | 			}
127 | 		};
128 | 
129 | 
130 | 		var videos = {
131 | 			getPlayer:function (id) {
132 | 				return '' +
133 | 						'<object width="400" height="255" id="uvp_fop" allowFullScreen="true">' +
134 | 						'<param name="movie" value="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"\/>' +
135 | 						'<param name="flashVars" value="id=v' + id + '&amp;eID=1301797&amp;lang=us&amp;enableFullScreen=0&amp;shareEnable=1"\/>' +
136 | 						'<param name="wmode" value="transparent"\/>' +
137 | 						'<embed ' +
138 | 						'height="255" ' +
139 | 						'width="400" ' +
140 | 						'id="uvp_fop" ' +
141 | 						'allowFullScreen="true" ' +
142 | 						'src="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" ' +
143 | 						'type="application/x-shockwave-flash" ' +
144 | 						'flashvars="id=v' + id + '&amp;eID=1301797&amp;lang=us&amp;ympsc=4195329&amp;enableFullScreen=1&amp;shareEnable=1"' +
145 | 						'\/>' +
146 | 						'<\/object>';
147 | 			},
148 | 
149 | 			updateList:function (data) {
150 | 				var id,
151 | 						html = '',
152 | 						info;
153 | 
154 | 				if (data.query) {
155 | 					data = data.query.results.Video;
156 | 				}
157 | 				id = data.id;
158 | 				html += '<img src="' + data.Image[0].url + '" width="50" \/>';
159 | 				html += '<h2>' + data.title + '<\/h2>';
160 | 				html += '<p>' + data.copyrightYear + ', ' + data.label + '<\/p>';
161 | 				if (data.Album) {
162 | 					html += '<p>Album: ' + data.Album.Release.title + ', ' + data.Album.Release.releaseYear + '<br \/>';
163 | 				}
164 | 				html += '<p><a class="play" href="http://new.music.yahoo.com/videos/--' + id + '">&raquo; play<\/a><\/p>';
165 | 				info = document.createElement('div');
166 | 				info.id = "info" + id;
167 | 				info.innerHTML = html;
168 | 				$('v' + id).appendChild(info);
169 | 			},
170 | 
171 | 			getInfo:function (id) {
172 | 				var info = $('info' + id);
173 | 
174 | 				if (!info) {
175 | 					proxy.makeRequest(id, videos.updateList, videos);
176 | 					return;
177 | 				}
178 | 
179 | 				if (info.style.display === "none") {
180 | 					info.style.display = '';
181 | 				} else {
182 | 					info.style.display = 'none';
183 | 				}
184 | 			}
185 | 		};
186 | 
187 | 
188 | 		$('vids').onclick = function (e) {
189 | 			var src, id;
190 | 
191 | 			e = e || window.event;
192 | 			src = e.target || e.srcElement;
193 | 
194 | 			if (src.nodeName.toUpperCase() !== "A") {
195 | 				return;
196 | 			}
197 | 
198 | 			if (typeof e.preventDefault === "function") {
199 | 				e.preventDefault();
200 | 			}
201 | 			e.returnValue = false;
202 | 
203 | 			id = src.href.split('--')[1];
204 | 
205 | 			if (src.className === "play") {
206 | 				src.parentNode.innerHTML = videos.getPlayer(id);
207 | 				return;
208 | 			}
209 | 
210 | 			src.parentNode.id = "v" + id;
211 | 			videos.getInfo(id);
212 | 		};
213 | 
214 | 		$('toggle-all').onclick = function (e) {
215 | 
216 | 			var hrefs,
217 | 					i,
218 | 					max,
219 | 					id;
220 | 
221 | 			hrefs = $('vids').getElementsByTagName('a');
222 | 			for (i = 0, max = hrefs.length; i < max; i += 1) {
223 | 				// skip play links
224 | 				if (hrefs[i].className === "play") {
225 | 					continue;
226 | 				}
227 | 				// skip unchecked
228 | 				if (!hrefs[i].parentNode.firstChild.checked) {
229 | 					continue;
230 | 				}
231 | 
232 | 				id = hrefs[i].href.split('--')[1];
233 | 				hrefs[i].parentNode.id = "v" + id;
234 | 				videos.getInfo(id);
235 | 			}
236 | 		};
237 | 
238 | 		// reference
239 | 		// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#proxypatternjquery
240 | 		// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
241 | 	</script>
242 | </body>
243 | </html>


--------------------------------------------------------------------------------
/design-patterns/singleton.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Singleton
 10 | 			 Description: restricts object creation for a class to only one instance
 11 | 			 */
 12 | 
 13 | 			var obj = {
 14 | 				myprop:'my value'
 15 | 			};
 16 | 
 17 | 			var obj2 = {
 18 | 				myprop:'my value'
 19 | 			};
 20 | 			obj === obj2; // false
 21 | 			obj == obj2;  // false
 22 | 
 23 | 			var uni = new Universe();
 24 | 			var uni2 = new Universe();
 25 | 			uni === uni2; // true
 26 | 
 27 | 			function Universe() {
 28 | 
 29 | 				// do we have an existing instance?
 30 | 				if (typeof Universe.instance === 'object') {
 31 | 					return Universe.instance;
 32 | 				}
 33 | 
 34 | 				// proceed as normal
 35 | 				this.start_time = 0;
 36 | 				this.bang = "Big";
 37 | 
 38 | 				// cache
 39 | 				Universe.instance = this;
 40 | 
 41 | 				// implicit return:
 42 | 				// return this;
 43 | 			}
 44 | 
 45 | 			// testing
 46 | 			var uni = new Universe();
 47 | 			var uni2 = new Universe();
 48 | 			uni === uni2; // true
 49 | 
 50 | 			/*** Instance in a Closure ***/
 51 | 
 52 | 			function Universe() {
 53 | 
 54 | 				// the cached instance
 55 | 				var instance = this;
 56 | 
 57 | 				// proceed as normal
 58 | 				this.start_time = 0;
 59 | 				this.bang = "Big";
 60 | 
 61 | 				// rewrite the contructor
 62 | 				Universe = function () {
 63 | 					return instance;
 64 | 				};
 65 | 			}
 66 | 
 67 | 			function Universe() {
 68 | 
 69 | 				// the cached instance
 70 | 				var instance;
 71 | 
 72 | 				// rewrite the constructor
 73 | 				Universe = function Universe() {
 74 | 					return instance;
 75 | 				};
 76 | 
 77 | 				// carry over the prototype properties
 78 | 				Universe.prototype = this;
 79 | 
 80 | 				// the instance
 81 | 				instance = new Universe();
 82 | 
 83 | 				// reset the constructor pointer
 84 | 				instance.constructor = Universe;
 85 | 
 86 | 				// all the functionality
 87 | 				instance.start_time = 0;
 88 | 				instance.bang = "Big";
 89 | 
 90 | 				return instance;
 91 | 			}
 92 | 
 93 | 
 94 | 			// testing
 95 | 			var uni = new Universe();
 96 | 			var uni2 = new Universe();
 97 | 			uni === uni2; // true
 98 | 
 99 | 			// adding to the prototype
100 | 			Universe.prototype.nothing = true;
101 | 
102 | 			var uni = new Universe();
103 | 
104 | 			// again adding to the prototype
105 | 			// after the initial object is created
106 | 			Universe.prototype.everything = true;
107 | 
108 | 			var uni2 = new Universe();
109 | 
110 | 			// only the original prototype was
111 | 			// linked to the objects
112 | 			uni.nothing; // true
113 | 			uni2.nothing; // true
114 | 			uni.everything; // true
115 | 			uni2.everything; // true
116 | 
117 | 			// that sounds right:
118 | 			uni.constructor.name; // "Universe"
119 | 			uni.constructor === Universe; // true
120 | 
121 | 			var Universe;
122 | 
123 | 			(function () {
124 | 
125 | 				var instance;
126 | 
127 | 				Universe = function Universe() {
128 | 
129 | 					if (instance) {
130 | 						return instance;
131 | 					}
132 | 
133 | 					instance = this;
134 | 
135 | 					// all the functionality
136 | 					this.start_time = 0;
137 | 					this.bang = "Big";
138 | 				};
139 | 			}());
140 | 
141 | 			// reference
142 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript
143 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
144 | 		</script>
145 | 	</body>
146 | </html>
147 | 


--------------------------------------------------------------------------------
/design-patterns/strategy.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Strategy
 10 | 			 Description: allows one of a family of algorithms to be selected on-the-fly at runtime
 11 | 			 */
 12 | 
 13 | 			var validator = {
 14 | 
 15 | 				// all available checks
 16 | 				types:{},
 17 | 
 18 | 				// error messages in the current
 19 | 				// validation session
 20 | 				messages:[],
 21 | 
 22 | 				// current validation config
 23 | 				// name: validation type
 24 | 				config:{},
 25 | 
 26 | 				// the interface method
 27 | 				// 'data' is key => value pairs
 28 | 				validate:function (data) {
 29 | 
 30 | 					var i, msg, type, checker, result_ok;
 31 | 
 32 | 					// reset all messages
 33 | 					this.messages = [];
 34 | 
 35 | 					for (i in data) {
 36 | 
 37 | 						if (data.hasOwnProperty(i)) {
 38 | 
 39 | 							type = this.config[i];
 40 | 							checker = this.types[type];
 41 | 
 42 | 							if (!type) {
 43 | 								continue; // no need to validate
 44 | 							}
 45 | 							if (!checker) { // uh-oh
 46 | 								throw {
 47 | 									name:"ValidationError",
 48 | 									message:"No handler to validate type " + type
 49 | 								};
 50 | 							}
 51 | 
 52 | 							result_ok = checker.validate(data[i]);
 53 | 							if (!result_ok) {
 54 | 								msg = "Invalid value for *" + i + "*, " + checker.instructions;
 55 | 								this.messages.push(msg);
 56 | 							}
 57 | 						}
 58 | 					}
 59 | 					return this.hasErrors();
 60 | 				},
 61 | 
 62 | 				// helper
 63 | 				hasErrors:function () {
 64 | 					return this.messages.length !== 0;
 65 | 				}
 66 | 			};
 67 | 
 68 | 			// checks for non-empty values
 69 | 			validator.types.isNonEmpty = {
 70 | 				validate:function (value) {
 71 | 					return value !== "";
 72 | 				},
 73 | 				instructions:"the value cannot be empty"
 74 | 			};
 75 | 
 76 | 			// checks if a value is a number
 77 | 			validator.types.isNumber = {
 78 | 				validate:function (value) {
 79 | 					return !isNaN(value) && value/Infinity === 0;
 80 | 				},
 81 | 				instructions:"the value can only be a valid number, e.g. 1, 3.14 or 2010"
 82 | 			};
 83 | 
 84 | 			// checks if the value contains only letters and numbers
 85 | 			validator.types.isAlphaNum = {
 86 | 				validate:function (value) {
 87 | 					return !/[^a-z0-9]/i.test(value);
 88 | 				},
 89 | 				instructions:"the value can only contain characters and numbers, no special symbols"
 90 | 			};
 91 | 
 92 | 			var data = {
 93 | 				first_name:"Super",
 94 | 				last_name:"Man",
 95 | 				age:"unknown",
 96 | 				username:"o_O"
 97 | 			};
 98 | 
 99 | 			validator.config = {
100 | 				first_name:'isNonEmpty',
101 | 				age:'isNumber',
102 | 				username:'isAlphaNum'
103 | 			};
104 | 
105 | 			validator.validate(data);
106 | 
107 | 			if (validator.hasErrors()) {
108 | 				console.log(validator.messages.join("\n"));
109 | 			}
110 | 
111 | 			// reference
112 | 			// http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#strategypatternjquery
113 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
114 | 		</script>
115 | 	</body>
116 | </html>
117 | 


--------------------------------------------------------------------------------
/design-patterns/visitor.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Visitor
10 | 			 Description: Represent an operation to be performed on the elements of an object structure.
11 | 			 Visitor lets you define a new operation without changing the classes of the elements on which it operates.
12 | 			 */
13 | 
14 | 			var Employee = function (name, salary, vacation) {
15 | 				var self = this;
16 | 
17 | 				this.accept = function (visitor) {
18 | 					visitor.visit(self);
19 | 				};
20 | 
21 | 				this.getName = function () {
22 | 					return name;
23 | 				};
24 | 
25 | 				this.getSalary = function () {
26 | 					return salary;
27 | 				};
28 | 
29 | 				this.setSalary = function (sal) {
30 | 					salary = sal;
31 | 				};
32 | 
33 | 				this.getVacation = function () {
34 | 					return vacation;
35 | 				};
36 | 
37 | 				this.setVacation = function (vac) {
38 | 					vacation = vac;
39 | 				};
40 | 			};
41 | 
42 | 			var ExtraSalary = function () {
43 | 				this.visit = function (emp) {
44 | 					emp.setSalary(emp.getSalary() * 1.1);
45 | 				};
46 | 			};
47 | 
48 | 			var ExtraVacation = function () {
49 | 				this.visit = function (emp) {
50 | 					emp.setVacation(emp.getVacation() + 2);
51 | 				};
52 | 			};
53 | 
54 | 			// log helper
55 | 			var log = (function() {
56 | 				var log = "";
57 | 
58 | 				return {
59 | 					add: function(msg) { log += msg + "\n"; },
60 | 					show: function() { alert(log); log = ""; }
61 | 				}
62 | 			})();
63 | 
64 | 			//example
65 | 			function run() {
66 | 
67 | 				var employees = [
68 | 					new Employee("John", 10000, 10),
69 | 					new Employee("Mary", 20000, 21),
70 | 					new Employee("Boss", 250000, 51)
71 | 				];
72 | 
73 | 				var visitorSalary = new ExtraSalary();
74 | 				var visitorVacation = new ExtraVacation();
75 | 
76 | 				for (var i = 0, len = employees.length; i < len; i++) {
77 | 					var emp = employees[i];
78 | 
79 | 					emp.accept(visitorSalary);
80 | 					emp.accept(visitorVacation);
81 | 					log.add(emp.getName() + ": $" + emp.getSalary() +
82 | 							" and " + emp.getVacation() + " vacation days");
83 | 				}
84 | 
85 | 				log.show();
86 | 			}
87 | 
88 | 			// reference
89 | 			// http://www.dofactory.com/javascript/visitor-design-pattern
90 | 		</script>
91 | 	</body>
92 | </html>


--------------------------------------------------------------------------------
/dom-and-browser/event-handling.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<button id="clickme">Click me: 0</button>
 9 | 		<script>
10 | 			/* Title: Event Handling
11 | 			 Description: when you pass function A to function B as a parameter, function A is a callback function
12 | 			 */
13 | 
14 | 			// antipattern
15 | 			/*var b = document.getElementById('clickme'),
16 | 			 count = 0;
17 | 			 b.onclick = function () {
18 | 			 count += 1;
19 | 			 b.innerHTML = "Click me: " + count;
20 | 			 };*/
21 | 
22 | 			// preferred
23 | 			var b = document.getElementById('clickme');
24 | 			if (document.addEventListener) { // W3C
25 | 				b.addEventListener('click', myHandler, false);
26 | 			} else if (document.attachEvent) { // IE
27 | 				b.attachEvent('onclick', myHandler);
28 | 			} else { // last resort
29 | 				b.onclick = myHandler;
30 | 			}
31 | 
32 | 			function myHandler(e) {
33 | 				var src, parts;
34 | 				// get event and source element
35 | 				e = e || window.event;
36 | 				src = e.target || e.srcElement;
37 | 				// actual work: update label
38 | 				parts = src.innerHTML.split(": ");
39 | 				parts[1] = parseInt(parts[1], 10) + 1;
40 | 				src.innerHTML = parts[0] + ": " + parts[1];
41 | 				// no bubble
42 | 				if (typeof e.stopPropagation === "function") {
43 | 					e.stopPropagation();
44 | 				}
45 | 				if (typeof e.cancelBubble !== "undefined") {
46 | 					e.cancelBubble = true;
47 | 				}
48 | 				// prevent default action
49 | 				if (typeof e.preventDefault === "function") {
50 | 					e.preventDefault();
51 | 				}
52 | 				if (typeof e.returnValue !== "undefined") {
53 | 					e.returnValue = false;
54 | 				}
55 | 			}
56 | 		</script>
57 | 	</body>
58 | </html>


--------------------------------------------------------------------------------
/function-patterns/callback.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Callback patterns
10 | 			 Description: when you pass function A to function B as a parameter, function A is a callback function
11 | 			 */
12 | 
13 | 			var complexComputation = function () { /* do some complex stuff and return a node */
14 | 			};
15 | 
16 | 			var findNodes = function (callback) {
17 | 				var nodes = [];
18 | 
19 | 				var node = complexComputation();
20 | 
21 | 				// call if callback is callable
22 | 				if (typeof callback === "function") {
23 | 					callback(node);
24 | 				}
25 | 
26 | 				nodes.push(node);
27 | 				return nodes;
28 | 			};
29 | 
30 | 			// a callback function
31 | 			var hide = function (node) {
32 | 				node.style.display = "none";
33 | 			};
34 | 
35 | 			// find the nodes and hide them as you go
36 | 			var hiddenNodes = findNodes(hide);
37 | 
38 | 			// you can also use an anonymous function, like this:
39 | 			var blockNodes = findNodes(function (node) {
40 | 				node.style.display = 'block';
41 | 			});
42 | 
43 | 			// reference
44 | 			// http://www.jspatterns.com/
45 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
46 | 		</script>
47 | 	</body>
48 | </html>


--------------------------------------------------------------------------------
/function-patterns/callbacks-and-scope.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			var myapp = {};
10 | 			myapp.color = "green";
11 | 			myapp.paint = function (node) {
12 | 				node.style.color = this.color;
13 | 			};
14 | 
15 | 			var findNodes = function (callback) {
16 | 				// ...
17 | 				if (typeof callback === "function") {
18 | 					callback(found);
19 | 				}
20 | 				// ...
21 | 			};
22 | 
23 | 			var findNodes = function (callback, callback_obj) {
24 | 				// ...
25 | 				if (typeof callback === "function") {
26 | 					callback.call(callback_obj, found);
27 | 				}
28 | 				// ...
29 | 			};
30 | 
31 | 			var findNodes = function (callback, callback_obj) {
32 | 				if (typeof callback === "string") {
33 | 					callback = callback_obj[callback];
34 | 				}
35 | 
36 | 				// ...
37 | 				if (typeof callback === "function") {
38 | 					callback.call(callback_obj, found);
39 | 				}
40 | 				// ...
41 | 			};
42 | 		</script>
43 | 	</body>
44 | </html>


--------------------------------------------------------------------------------
/function-patterns/configuration-objects.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Configuration objects
10 | 			 Description: keep control of function arguments and makes it easily configurable
11 | 			 */
12 | 
13 | 			var conf = {
14 | 				username:"shichuan",
15 | 				first:"Chuan",
16 | 				last:"Shi"
17 | 			};
18 | 			addPerson(conf);
19 | 
20 | 			// reference
21 | 			// http://www.jspatterns.com/
22 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/function-patterns/currying.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Currying
 10 | 			 Description: used to create new functions dynamically by partially applying a set of arguments
 11 | 			 in ECMAScript 5, you can use bind to implement curring.
 12 | 			 */
 13 | 
 14 | 			/***
 15 | 			 function application
 16 | 			 ***/
 17 | 			// define a function
 18 | 			var sayHi = function (who) {
 19 | 				return "Hello" + (who ? ", " + who : "") + "!";
 20 | 			};
 21 | 
 22 | 			// invoke a function
 23 | 			sayHi(); // "Hello!"
 24 | 			sayHi('world'); // "Hello, world!"
 25 | 
 26 | 			// apply a function
 27 | 			sayHi.apply(null, ["hello"]); // "Hello, hello!"
 28 | 
 29 | 			var alien = {
 30 | 				sayHi:function (who) {
 31 | 					return "Hello" + (who ? ", " + who : "") + "!";
 32 | 				}
 33 | 			};
 34 | 
 35 | 			alien.sayHi('world'); // "Hello, world!"
 36 | 			sayHi.apply(alien, ["humans"]); // "Hello, humans!"
 37 | 
 38 | 			// the second is more efficient, saves an array
 39 | 			sayHi.apply(alien, ["humans"]); // "Hello, humans!"
 40 | 			sayHi.call(alien, "humans"); // "Hello, humans!"
 41 | 
 42 | 			/***
 43 | 			 partial application
 44 | 			 ***/
 45 | 
 46 | 			// for illustration purposes
 47 | 			// not valid JavaScript
 48 | 
 49 | 			// we have this function
 50 | 			function add(x, y) {
 51 | 				return x + y;
 52 | 			}
 53 | 
 54 | 			// and we know the arguments
 55 | 			add(5, 4);
 56 | 
 57 | 			// step 1 -- substitute one argument
 58 | 			function add(5, y) {
 59 | 				return 5 + y;
 60 | 			}
 61 | 
 62 | 			// step 2 -- substitute the other argument
 63 | 			function add(5, 4) {
 64 | 				return 5 + 4;
 65 | 			}
 66 | 
 67 | 			/***
 68 | 			 currying
 69 | 			 ***/
 70 | 
 71 | 			// a curried add()
 72 | 			// accepts partial list of arguments
 73 | 			function add(x, y) {
 74 | 				var oldx = x, oldy = y;
 75 | 				if (typeof oldy === "undefined") { // partial
 76 | 					return function (newy) {
 77 | 						return oldx + newy;
 78 | 					}
 79 | 				}
 80 | 				// full application
 81 | 				return x + y;
 82 | 			}
 83 | 
 84 | 			// test
 85 | 			typeof add(5); // "function"
 86 | 			add(3)(4); // 7
 87 | 
 88 | 			// create and store a new function
 89 | 			var add2000 = add(2000);
 90 | 			add2000(10); // 2010
 91 | 
 92 | 			function schonfinkelize(fn) {
 93 | 				var slice = Array.prototype.slice,
 94 | 						stored_args = slice.call(arguments, 1);
 95 | 				return function () {
 96 | 					var new_args = slice.call(arguments),
 97 | 							args = stored_args.concat(new_args);
 98 | 					return fn.apply(null, args);
 99 | 				};
100 | 			}
101 | 
102 | 			// reference
103 | 			// http://www.jspatterns.com/
104 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
105 | 
106 | 			// Here's a generic curry function (from kybernetikos):
107 | 			// It's slightly more complex than the common examples of currying (e.g. the one above), but that's because
108 | 			//    the function can afterwards be called either in the normal way, or in the curried way.
109 | 			//    If you call a 3 argument curried function with it, the returned function *is also curried*.
110 | 			//    e.g. you can write func(arg1)(arg2)(arg3) or func(arg1, arg2, arg3) or func(arg1)(arg2, arg3) etc...
111 | 
112 | 			/* the curry procedure needs to know how many arguments are required before it should calculate the result */
113 | 			function curry(func, minArgs) {
114 | 				if (minArgs == undefined) {
115 | 					minArgs = 1;
116 | 				}
117 | 
118 | 				function funcWithArgsFrozen(frozenargs) {
119 | 					return function () {
120 | 						// could do an optimisation here - if called with no arguments
121 | 						// return exactly this function.
122 | 						var args = Array.prototype.slice.call(arguments);
123 | 						var newArgs = frozenargs.concat(args);
124 | 						if (newArgs.length >= minArgs) {
125 | 							return func.apply(this, newArgs);
126 | 						} else {
127 | 							return funcWithArgsFrozen(newArgs);
128 | 						}
129 | 					};
130 | 				}
131 | 
132 | 				return funcWithArgsFrozen([]);
133 | 			}
134 | 
135 | 			/* Here are some example uses - I use these with a functional immutable list structure implemented in js
136 | 			 but they also work ok for normal higher order functions over arrays.
137 | 			 */
138 | 
139 | 			var plus = curry(function () {
140 | 				var result = 0;
141 | 				for (var i = 0; i < arguments.length; ++i) {
142 | 					result += arguments[i];
143 | 				}
144 | 				return result;
145 | 			}, 2);
146 | 
147 | 			/* Now you can call
148 | 			 plus(3,2)         // normal call
149 | 			 plus(3)           // partial application (returns a function that adds 3 to its argument)
150 | 			 plus(3)(2)        // complete application (returns 5)
151 | 			 plus()(3)()()(2)  // returns 5
152 | 			 plus(3, 2, 4, 5)  // the normal call can optionally take more than the minimum number of arguments
153 | 			 plus(3)(2, 3, 5)  // the last application can too.
154 | 			 */
155 | 
156 | 			var minus = curry(function (x) {
157 | 				var result = x;
158 | 				for (var i = 1; i < arguments.length; ++i) {
159 | 					result -= arguments[i];
160 | 				}
161 | 				return result;
162 | 			}, 2);
163 | 
164 | 			/* flip switches the order of the first two arguments on a function.  It is curried itself and
165 | 			 the function it returns is curried too.  Particularly useful if you want a function that subtracts a number */
166 | 
167 | 			var flip = curry(function (func) {
168 | 				return curry(function (a, b) {
169 | 					return func(b, a);
170 | 				}, 2);
171 | 			});
172 | 
173 | 			/* for example
174 | 			 minus(5)             // returns a function that takes its argument away from 5
175 | 			 flip(minus)(5)       // returns a function that takes 5 away from its argument
176 | 			 */
177 | 		</script>
178 | 	</body>
179 | </html>
180 | 


--------------------------------------------------------------------------------
/function-patterns/enforcing-new-in-constructors.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			function Person() {
10 | 				var that = (this === window) ? {} : this;
11 | 				that.name = name;
12 | 				that.say = function () {
13 | 					return "I am " + that.name;
14 | 				};
15 | 				return that;
16 | 			}
17 | 
18 | 			// reference
19 | 			// http://www.jspatterns.com/
20 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
21 | 		</script>
22 | 	</body>
23 | </html>


--------------------------------------------------------------------------------
/function-patterns/function-call.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>JavaScript Patterns</title>
 5 |     <meta charset="utf-8">
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       // Title: 4 different ways to call function
10 |       
11 |       var foo, bar, baz, myapp;
12 | 
13 | 
14 |       function foo(a, b) {
15 |         return [this, a, b];
16 |       };
17 |       // using () operator
18 |       // if the function is called without an explicit owner object
19 |       // `this` keyword will refers to global
20 |       // 
21 |       // bar = [window, 1, 2]
22 |       bar = foo(1, 2);
23 |       console.log(bar);
24 | 
25 | 
26 |       myapp = {
27 |         baz: foo,
28 |         onemore: function() {
29 |           function insideTheClosure() {
30 |             return this;
31 |           }
32 |           return [this, insideTheClosure()]
33 |         }
34 |       };
35 | 
36 |       // still using () operator
37 |       // but now baz function belongs to myapp object
38 |       //
39 |       // bar = [myapp, 1, 2]
40 |       bar = myapp.baz(1, 2);
41 |       console.log(bar);
42 | 
43 |       // like in the first example we need to call function
44 |       // within myapp like myapp.baz()
45 |       // not just inside the object`s function
46 |       // 
47 |       // bar = [myapp, window]
48 |       bar = myapp.onemore();
49 |       console.log(bar);
50 | 
51 | 
52 |       // using apply and call methods of the Function itself
53 |       // there are almost the same
54 |       // but apply could be useful in case we don't know arguments beforehand
55 |       // 
56 |       // bar = [myapp, 1, 2]
57 |       bar = foo.call(myapp, 1, 2);
58 |       console.log(bar);
59 |       bar = foo.apply(myapp, [1, 2]);
60 |       console.log(bar);
61 | 
62 | 
63 |       /* Reference:
64 |        * http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/JavaScript-5-ways-to-call-a-function.aspx
65 |        */
66 |     </script>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/function-patterns/immediate-functions.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Immediate functions
10 | 			 Description: syntax that enables function execution as soon as it is defined
11 | 			 */
12 | 
13 | 			(function () {
14 | 				console.log('watch out!');
15 | 			}());
16 | 
17 | 			//alternative with less parentheses
18 | 			!function () {
19 | 				console.log('watch out!');
20 | 			}();
21 | 			
22 | 			//another alternative with less parentheses
23 | 			+function () {
24 | 				console.log('watch out!');
25 | 			}();
26 | 			
27 | 			//crockfords the good part book way of doing this
28 | 			(function () {
29 | 				console.log('watch out!');
30 | 			}());
31 | 
32 | 
33 | 			// reference
34 | 			// http://www.jspatterns.com/
35 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
36 | 		</script>
37 | 	</body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/function-patterns/immediate-object-initialization.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Immediate object initialization
10 | 			 Description: this pattern is mainly suitable for one-off tasks
11 | 			 */
12 | 
13 | 			({
14 | 				// here you can define setting values
15 | 				// a.k.a. configuration constants
16 | 				maxwidth:600,
17 | 				maxheight:400,
18 | 
19 | 				// you can also define utility methods
20 | 				gimmeMax:function () {
21 | 					return this.maxwidth + "x" + this.maxheight;
22 | 				},
23 | 
24 | 				// initialize
25 | 				init:function () {
26 | 					console.log(this.gimmeMax());
27 | 					// more init tasks...
28 | 				}
29 | 			}).init();
30 | 
31 | 			// reference
32 | 			// http://www.jspatterns.com/
33 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
34 | 		</script>
35 | 	</body>
36 | </html>


--------------------------------------------------------------------------------
/function-patterns/init-time-branching.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Init-time branching
10 | 			 Description: branch code once during initialization
11 | 			 */
12 | 
13 | 			// BEFORE
14 | 			/* var utils = {
15 | 			 addListener: function (el, type, fn) {
16 | 			 if (typeof window.addEventListener === 'function') {
17 | 			 el.addEventListener(type, fn, false);
18 | 			 } else if (typeof document.attachEvent !== 'undefined') {
19 | 			 el.attachEvent('on' + type, fn);
20 | 			 } else {
21 | 			 el['on' + type] = fn;
22 | 			 }
23 | 			 },
24 | 			 removeListener: function (el, type, fn) {
25 | 			 }
26 | 			 }; */
27 | 
28 | 			// the interface
29 | 			var utils = {
30 | 				addListener:null,
31 | 				removeListener:null
32 | 			};
33 | 
34 | 			// the implementation
35 | 			if (typeof window.addEventListener === 'function') {
36 | 				utils.addListener = function (el, type, fn) {
37 | 					el.addEventListener(type, fn, false);
38 | 				};
39 | 				utils.removeListener = function(el, type, fn) { 
40 | 					el.removeEventListener(type, fn, false); 
41 | 				};
42 | 			} else if (typeof document.attachEvent !== 'undefined') { // IE
43 | 				utils.addListener = function (el, type, fn) {
44 | 					el.attachEvent('on' + type, fn);
45 | 				};
46 | 				utils.removeListener = function (el, type, fn) {
47 | 					el.detachEvent('on' + type, fn);
48 | 				};
49 | 			} else { // older browsers
50 | 				utils.addListener = function (el, type, fn) {
51 | 					el['on' + type] = fn;
52 | 				};
53 | 				utils.removeListener = function (el, type, fn) {
54 | 					el['on' + type] = null;
55 | 				};
56 | 			}
57 | 
58 | 			// reference
59 | 			// http://www.jspatterns.com/
60 | 			// http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate
61 | 		</script>
62 | 	</body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/function-patterns/memoization.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Memoization
10 | 			 Description: use function properties to avoid repeated computation
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			// reason see: https://github.com/shichuan/javascript-patterns/issues/6
15 | 			var myFunc = function (param) {
16 | 				if (!myFunc.cache[param]) {
17 | 					var result = {};
18 | 					// ... expensive operation ...
19 | 					myFunc.cache[param] = result;
20 | 				}
21 | 				return myFunc.cache[param];
22 | 			};
23 | 
24 | 			// cache storage
25 | 			myFunc.cache = {};
26 | 
27 | 
28 | 			// preferred method 1
29 | 			// only one argument using param
30 | 
31 | 			var myFunc = function (param) {
32 | 				if (!myFunc.cache.hasOwnProperty(param)) {
33 | 					var result = {};
34 | 					// ... expensive operation ...
35 | 					myFunc.cache[param] = result;
36 | 				}
37 | 				return myFunc.cache[param];
38 | 			};
39 | 
40 | 			// cache storage
41 | 			myFunc.cache = {};
42 | 
43 | 
44 | 			// preferred method 2
45 | 			// multiple arguments using JSON stringify
46 | 			
47 | 			// this will only work correctly for primitive (and Array) arguments, 
48 | 			// since the order in which properties of Objects are enumerated is undetermined 
49 | 			// and can even change between enumerations. 
50 | 			// (a JSON encoder that sorts the keys won't have this issue).
51 | 
52 | 			var myFunc = function () {
53 | 				var cachekey = JSON.stringify(Array.prototype.slice.call(arguments)),
54 | 						result;
55 | 				if (!myFunc.cache[cachekey]) {
56 | 					result = {};
57 | 					// ... expensive operation ...
58 | 					myFunc.cache[cachekey] = result;
59 | 				}
60 | 				return myFunc.cache[cachekey];
61 | 			};
62 | 
63 | 			// cache storage
64 | 			myFunc.cache = {};
65 | 
66 | 
67 | 			// preferred method 3
68 | 			// multiple arguments using arguments.callee
69 | 
70 | 			var myFunc = function (param) {
71 | 				var f = arguments.callee,
72 | 						result;
73 | 				if (!f.cache[param]) {
74 | 					result = {};
75 | 					// ... expensive operation ...
76 | 					f.cache[param] = result;
77 | 				}
78 | 				return f.cache[param];
79 | 			};
80 | 
81 | 			// cache storage
82 | 			myFunc.cache = {};
83 | 		</script>
84 | 	</body>
85 | </html>


--------------------------------------------------------------------------------
/function-patterns/partial-application.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Partial application
10 | 			 Description: the process of fixing a number of arguments to a function, producing another function of smaller arity
11 | 			 */
12 | 
13 | 			var partialAny = (function(aps){
14 | 
15 | 				// This function will be returned as a result of the immediately 
16 | 				// invoked function expression and assigned to the `partialAny` var.
17 | 				function func(fn){
18 | 					var argsOrig = aps.call(arguments, 1);
19 | 					return function() {
20 | 						var args = [],
21 | 							argsPartial = aps.call(arguments),
22 | 							i = 0;
23 | 						// Iterate over all the originally-spedicified arguments. If that
24 | 						// argument was the `partialAny._` placeholder, use the next just
25 | 						// passed-in argument, otherwise use the originally-specified 
26 | 						// argument.
27 | 						for ( ; i < argsOrig.length; i++ ) {
28 | 							args[i] = argsOrig[i] === func._
29 | 							? argsPartial.shift()
30 | 							: argsOrig[i];
31 | 						}
32 | 
33 | 						// If any just-passed-in arguments remain, add them to the end.
34 | 						return fn.apply( this, args.concat( argsPartial ));
35 | 					};
36 | 				}
37 | 
38 | 				// This is used as the placeholder argument.
39 | 				func._ = {};
40 | 
41 | 				return func;
42 | 			})(Array.prototype.slice);
43 | 
44 | 			// Slightly more legitimate example
45 | 
46 | 			function hex( r, g, b ) {
47 | 				return '#' + r + g + b;
48 | 			}
49 | 
50 | 			var redMax = partialAny( hex, 'ff', partialAny._, partialAny._);
51 | 			console.log(redMax('11','22')); // "#ff1122"
52 | 
53 | 			// Because `_` is easier on the eyes than `partialAny._`, let's use
54 | 			// that instead. This is, of course, entirely optional, and the name
55 | 			// could just as well be `foo` or `PLACEHOLDER` instead of `_`.
56 | 
57 | 			var __ = partialAny._;
58 | 
59 | 			var greenMax = partialAny( hex, __, 'ff' );
60 | 			console.log(greenMax( '33', '44' )); 
61 | 
62 | 			var blueMax = partialAny( hex, __, __, 'ff' );
63 | 			console.log(blueMax( '55', '66' ));
64 | 
65 | 			var magentaMax = partialAny( hex, 'ff', __, 'ff' );
66 | 			console.log(magentaMax( '77' )); 
67 | 
68 | 			// reference
69 | 			// http://msdn.microsoft.com/en-us/magazine/gg575560.aspx
70 | 		</script>
71 | 	</body>
72 | </html>


--------------------------------------------------------------------------------
/function-patterns/returning-functions.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Returning functions
10 | 			 Description: one function returns another function or create another function on-demand
11 | 			 */
12 | 
13 | 			var setup = function () {
14 | 				console.log(1);
15 | 				return function () {
16 | 					console.log(2);
17 | 				};
18 | 			};
19 | 			// using the setup function
20 | 			var my = setup(); // alerts 1
21 | 			my(); // alerts 2
22 | 
23 | 
24 | 			 
25 | 			// Your setup function can store some private data in a closure and use that data somehow.
26 | 			// Here setup() creates a counter function, which gives a next ID for example. But the count variable is not exposed.
27 | 			
28 | 			var setup = function () {
29 | 				var count = 0;
30 | 				return function () {
31 | 					return ++count;
32 | 				};
33 | 			};
34 | 			// usage
35 | 			var next = setup();
36 | 			//next(); // returns 1
37 | 			//next(); // returns 2
38 | 			//next(); // returns 3
39 | 			
40 | 			var newCodes = function(){  
41 | 			    var dCodes = 'one'; 
42 | 			    var dCodes2 = 'two';     
43 | 			    return [dCodes, dCodes2];  
44 | 			};
45 | 			
46 | 			var codes = newCodes();
47 | 			var dCodes = codes[0]; //access the first
48 | 			var dCodes2 = codes[1]; //access the second
49 | 			
50 | 			var newCodes = function(){  
51 | 			    var dCodes = 'one'; // Linked ICDs  
52 | 			    var dCodes2 = 'two'; //Linked CPTs       
53 | 			    return {
54 | 			        dCodes: dCodes,
55 | 			        dCodes2: dCodes2
56 | 			    };  
57 | 			};
58 | 			
59 | 			var codes = newCodes();
60 | 			var dCodes = codes.dCodes; //access the one called dcodes
61 | 			var dCodes2 = codes.dCodes2; //access the one called dcodes2
62 | 			
63 | 			// reference
64 | 			// http://www.jspatterns.com/returning-functions/
65 | 		</script>
66 | 	</body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/function-patterns/self-defining-functions.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Self-defining functions
10 | 			 Description: self-overwrite with new bodies to do less work from the second invocation and after
11 | 			 */
12 | 
13 | 			var scareMe = function () {
14 | 				alert("Boo!");
15 | 				scareMe = function () {
16 | 					alert("Double boo!");
17 | 				};
18 | 			};
19 | 
20 | 			// 1. adding a new property
21 | 			scareMe.property = "properly";
22 | 			// 2. assigning to a different name
23 | 			var prank = scareMe;
24 | 			// 3. using as a method
25 | 			var spooky = {
26 | 				boo:scareMe
27 | 			};
28 | 			// calling with a new name
29 | 			prank(); // "Boo!"
30 | 			prank(); // "Boo!"
31 | 			console.log(prank.property); // "properly"
32 | 			// calling as a method
33 | 			spooky.boo(); // "Boo!"
34 | 			spooky.boo(); // "Boo!"
35 | 			console.log(spooky.boo.property); // "properly"
36 | 			// using the self-defined function
37 | 			scareMe(); // Double boo!
38 | 			scareMe(); // Double boo!
39 | 			console.log(scareMe.property); // undefined
40 | 		</script>
41 | 	</body>
42 | </html>


--------------------------------------------------------------------------------
/function-patterns/self-overwrite.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 
10 | 			function next() {
11 | 				var count = 1;
12 | 				next = function () {
13 | 					return ++count;
14 | 				};
15 | 				return count;
16 | 			}
17 | 			console.log(next()); // 1
18 | 			console.log(next()); // 2
19 | 		</script>
20 | 	</body>
21 | </html>


--------------------------------------------------------------------------------
/general-patterns/access-to-global-object.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Access to the Global Object
10 | 			 * Description: access the global object without hard-coding the identifier window
11 | 			 */
12 | 
13 | 			// access to the Global Object
14 | 			// this should work in ES3, ES5 and ES5-strict.
15 | 			var global = (function (g) {
16 | 				return g;
17 | 			})(this);
18 | 
19 | 			// Test Cases
20 | 			// http://jsperf.com/globalx/7
21 | 
22 | 			// References
23 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
24 | 		</script>
25 | 	</body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/general-patterns/avoiding-eval.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Avoiding eval()
10 | 			 * Description: avoid using eval()
11 | 			 */
12 | 
13 | 			// antipattern 1
14 | 			var property = "name",
15 | 			    obj = { name: "John" };
16 | 
17 | 			alert(eval("obj." + property));
18 | 
19 | 
20 | 			// preferred 1
21 | 			alert(obj[property]);
22 | 
23 | 
24 | 			/* antipattern 2
25 | 			 * It's also important to remember that passing strings to setInterval(), setTimeout(),
26 | 			 * and the Function() constructor is, for the most part, similar to using eval() and therefore should be avoided.
27 | 			 */
28 | 			setTimeout("myFunc()", 1000);
29 | 			setTimeout("myFunc(1, 2, 3)", 1000);
30 | 
31 | 
32 | 			// preferred 2
33 | 			setTimeout(myFunc, 1000);
34 | 			setTimeout(function () {
35 | 				myFunc(1, 2, 3);
36 | 			}, 1000);
37 | 			// in supported browsers (i.e. not IE)
38 | 			setTimeout(myFunc, 1000, 1, 2, 3);
39 | 
40 | 			// References
41 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
42 | 		</script>
43 | 	</body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/general-patterns/avoiding-implied-typecasting.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Implied Typecasting
10 | 			 * Description: avoid implied typecasting
11 | 			 */
12 | 
13 | 			var zero = 0;
14 | 
15 | 			/* antipattern
16 | 			 * JavaScript implicitly typecasts variables when you compare them.
17 | 			 * That's why comparisons such as false == 0 or "" == 0 return true.
18 | 			 */
19 | 			if (zero == false) {
20 | 				// this block is executed...
21 | 			}
22 | 
23 | 
24 | 			// preferred
25 | 			/* To avoid confusion caused by the implied typecasting,
26 | 			 * always use the === and !== operators that check both the values and the type of the expressions you compare
27 | 			 */
28 | 			if (zero === false) {
29 | 				// not executing because zero is 0, not false
30 | 			}
31 | 
32 | 
33 | 			/* NOTE: There's another school of thought that subscribes to the opinion that it's redundant to use === when == is
34 | 			 * sufficient. For example, when you use typeof you know it returns a string, so there's no reason to use strict
35 | 			 * equality. However, JSLint requires strict equality; it does make the code look consistent and reduces the mental
36 | 			 * effort when reading code. ("Is this == intentional or an omission?")
37 | 			 */
38 | 
39 | 
40 | 			// References
41 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
42 | 		</script>
43 | 	</body>
44 | </html>


--------------------------------------------------------------------------------
/general-patterns/built-in-prototypes.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: (Not) Augmenting Built-in Prototypes
10 | 			 * Description: it can seriously hurt maintainability, because it will make your code less predictable
11 | 			 */
12 | 
13 | 			/* NOTE: You can make an exception of the rule only when all these conditions are met:
14 | 
15 | 			 * 1. It's expected that future ECMAScript versions or JavaScript implementations will implement this functionality
16 | 			 *    as a built-in method consistently. For example, you can add methods described in ECMAScript 5 while waiting for
17 | 			 *    the browsers to catch up. In this case you’re just defining the useful methods ahead of time.
18 | 			 * 2. You check if your custom property or method doesn't exist already—maybe already implemented somewhere else in
19 | 			 *    the code or already part of the JavaScript engine of one of the browsers you support.
20 | 			 * 3. You clearly document and communicate the change with the team.
21 | 			 */
22 | 			if (typeof Object.prototype.myMethod !== "function") {
23 | 				Object.prototype.myMethod = function () {
24 | 					// implementation...
25 | 				};
26 | 			}
27 | 
28 | 			// References
29 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
30 | 		</script>
31 | 	</body>
32 | </html>


--------------------------------------------------------------------------------
/general-patterns/conditionals.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Conditionals
 10 | 			 * Description: pattern and antipattern of using if else
 11 | 			 */
 12 | 
 13 | 			/* NOTE: Paul Irish states that the first statement (normal pattern) is only an antipattern when optimizing for
 14 | 			 * low-bandwidth source (such as for a bookmarklet).
 15 | 			 * Using the normal pattern will generally outperform the regex (alternative method 1) in a loop,
 16 | 			 * and is faster than the object literal (alternative method 2) for lower numbers of conditions,
 17 | 			 * they generally even out around 10 conditions.
 18 | 			 * See http://jsperf.com/if-this-or-that
 19 | 			 */
 20 | 
 21 | 			// normal pattern
 22 | 			if (type === 'foo' || type === 'bar') {
 23 | 			}
 24 | 
 25 | 
 26 | 			// alternative method 1 - regex test
 27 | 			if (/^(foo|bar)$/.test(type)) {
 28 | 			}
 29 | 
 30 | 
 31 | 			// alternative method 2 - object literal lookup (smaller if < 5 items)
 32 | 			if (({foo:1, bar:1})[type]) {
 33 | 			}
 34 | 
 35 | 
 36 | 			/* alternative method 3 - binary-search-like approach
 37 | 			 * This approach is best when there are ranges of values for which to test
 38 | 			 */
 39 | 			if (value < 6) {
 40 | 				if (value < 3) {
 41 | 					if (value == 0) {
 42 | 						return result0;
 43 | 					} else if (value == 1) {
 44 | 						return result1;
 45 | 					} else {
 46 | 						return result2;
 47 | 					}
 48 | 				} else {
 49 | 					if (value == 3) {
 50 | 						return result3;
 51 | 					} else if (value == 4) {
 52 | 						return result4;
 53 | 					} else {
 54 | 						return result5;
 55 | 					}
 56 | 				}
 57 | 			} else {
 58 | 				if (value < 8) {
 59 | 					if (value == 6) {
 60 | 						return result6;
 61 | 					} else {
 62 | 						return result7;
 63 | 					}
 64 | 				} else {
 65 | 					if (value == 8) {
 66 | 						return result8;
 67 | 					} else if (value == 9) {
 68 | 						return result9;
 69 | 					} else {
 70 | 						return result10;
 71 | 					}
 72 | 				}
 73 | 			}
 74 | 
 75 | 
 76 | 			/* alternative method 4 - object/array lookup tables
 77 | 			 * Most useful when there is logical mapping between a single key and a single value
 78 | 			 */
 79 | 			if (value == 0) {
 80 | 				return result0;
 81 | 			} else if (value == 1) {
 82 | 				return result1;
 83 | 			} else if (value == 2) {
 84 | 				return result2;
 85 | 			}
 86 | 			
 87 | 			// define the array of results
 88 | 			var results = [result0, result1, result2];
 89 | 			// return the correct result
 90 | 			return results[value];
 91 | 			
 92 | 			
 93 | 			/* alternative method 5 - only using logical operators
 94 | 			 * Shorter way to use simple statements
 95 | 			 */
 96 | 			var 
 97 | 				type = 'foo',
 98 | 				type2 = 'bar',
 99 | 				result = 0;
100 | 				
101 | 			type == 'foo' && result++;
102 | 			console.log(result); // 1
103 | 			!type == 'foo' || result++;
104 | 			console.log(result); // 2
105 | 			type == 'foo' && type2 == 'bar' && result++;
106 | 			console.log(result); //3
107 | 			type == 'foo' && type2 == 'bar' && result == 3 && (result=0); //parentheses avoid "invalid assignment left-hand side" error
108 | 			console.log(result); //0
109 | 			type == 'OOF' || result++; //equivalent: type != 'OOF' && result++;
110 | 			console.log(result); //1			
111 | 
112 | 
113 | 			// References
114 | 			// http://paulirish.com/2009/perf/
115 | 		</script>
116 | 	</body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/general-patterns/for-in-loops.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: for-in loops
10 | 			 * Description: optimized for-in loops
11 | 			 */
12 | 			// the object
13 | 			var man = {
14 | 				hands:2,
15 | 				legs:2,
16 | 				heads:1
17 | 			};
18 | 			// somewhere else in the code
19 | 			// a method was added to all objects
20 | 			if (typeof Object.prototype.clone === 'undefined') {
21 | 				Object.prototype.clone = function () {
22 | 				};
23 | 			}
24 | 			
25 | 			// antipattern
26 | 			// for-in loop without checking hasOwnProperty()
27 | 			for (var i in man) {
28 | 				console.log(i, ":", man[i]);
29 | 			}
30 | 			/*
31 | 			 * result in the console
32 | 			 * hands : 2
33 | 			 * legs : 2
34 | 			 * heads : 1
35 | 			 * clone: function()
36 | 			 */
37 | 			// preferred 1
38 | 			for (var i in man) {
39 | 				if (man.hasOwnProperty(i)) { // filter
40 | 					console.log(i, ":", man[i]);
41 | 				}
42 | 			}
43 | 			/*
44 | 			 * result in the console
45 | 			 * hands : 2
46 | 			 * legs : 2
47 | 			 * heads : 1
48 | 			 */
49 | 			// preferred 2
50 | 			// benefit is you can avoid naming collisions in case the `man` object has redefined `hasOwnProperty`
51 | 			for (var i in man) {
52 | 				if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
53 | 					console.log(i, ":", man[i]);
54 | 				}
55 | 			}
56 | 			// preferred 3
57 | 			// use a local variable to "cache" `Object.prototype.hasOwnProperty`
58 | 			var i,
59 | 					hasOwn = Object.prototype.hasOwnProperty;
60 | 			for (i in man) {
61 | 				if (hasOwn.call(man, i)) { // filter
62 | 					console.log(i, ":", man[i]);
63 | 				}
64 | 			}
65 | 			
66 | 			
67 | 			//Preferred 4 
68 | 			/* Check if object has properties before print output
69 | 			 *  using Object.keys(obj) and length built ins. A good method for 
70 | 			 *  not wasting resources and avoiding errors with larger objects
71 | 			 */  
72 | 			if (Object.keys(man).length > 0){
73 | 			     for (var item in man)
74 | 				 console.log(item,':',man[item]);
75 | 			} else { 
76 | 			    console.log('Empty Object');}
77 | 			
78 | 			/*	
79 | 			 * hands : 2
80 | 			 * legs : 2
81 | 			 * heads : 1
82 | 			 * clone : function() {
83 | 			 *		    }
84 | 			 */
85 | 			
86 | 			
87 | 			// References
88 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
89 | 		</script>
90 | 	</body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/general-patterns/for-loops.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: for loops
10 | 			 * Description: optimized for loops
11 | 			 */
12 | 
13 | 			// sub-optimal loop
14 | 			for (var i = 0; i < myarray.length; i++) {
15 | 				// do something with myarray[i]
16 | 			}
17 | 
18 | 			// optimization 1 - cache the length of the array with the use of `max`
19 | 			for (var i = 0, max = myarray.length; i < max; i++) {
20 | 				// do something with myarray[i]
21 | 			}
22 | 
23 | 
24 | 			// optimization 2 - use single var pattern for consistency
25 | 			// NOTE: A drawback is that it makes it a little harder to copy and paste whole loops while refactoring code.
26 | 			var i = 0,
27 | 					max,
28 | 					myarray = [];
29 | 
30 | 			for (i = 0, max = myarray.length; i < max; i++) {
31 | 				// do something with myarray[i]
32 | 			}
33 | 
34 | 
35 | 			// optimization 3 - substitute `i++` with `i = i + 1`  or `i += 1` to avoid excessive trickiness
36 | 			var i = 0,
37 | 					max,
38 | 					myarray = [];
39 | 
40 | 			for (i = 0, max = myarray.length; i < max; i += 1) {
41 | 				// do something with myarray[i]
42 | 			}
43 | 
44 | 
45 | 			// preferred 1
46 | 			var i, myarray = [];
47 | 			for (i = myarray.length; i--;) {
48 | 				// do something with myarray[i]
49 | 			}
50 | 
51 | 
52 | 			// preferred 2
53 | 			var myarray = [],
54 | 					i = myarray.length;
55 | 			while (i--) {
56 | 				// do something with myarray[i]
57 | 			}
58 | 
59 | 
60 | 			// References
61 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
62 | 		</script>
63 | 	</body>
64 | </html>


--------------------------------------------------------------------------------
/general-patterns/function-declarations.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Function Declarations
10 | 			 * Description: creating anonymous functions and assigning them to a variable
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			// there is one benefit for this type of function decalaration:
15 | 			// you can call getData () before the declaration. 
16 | 			function getData() {
17 | 			}
18 | 
19 | 
20 | 			// preferred
21 | 			/* Benefits:
22 | 			 * 1. Makes it easier to understand "functions as an object".
23 | 			 * 2. It enforces good semicolon habits.
24 | 			 * 3. Doesn't have much of the baggage traditionally associated with functions and scope.
25 | 			 */
26 | 			var getData = function () {
27 | 			};
28 | 
29 | 
30 | 			// named function expression
31 | 			/* Benefits:
32 | 			 * 1. Provides the debugger with an explicit function name: helps stack inspection.
33 | 			 * Issues:
34 | 			 * 3. Can break IE, coffeescript doesn't do function names:
35 | 			 *    https://github.com/jashkenas/coffee-script/issues/366
36 | 			 */
37 | 			var getData = function getData () {
38 | 			};
39 | 
40 |                         // named function expression + 'F'
41 | 			/* Benefits:
42 | 			 * 1. Gets rid of (anonymous function) in stack traces
43 | 			 * 2. Doesn't break an IE (well, unless there's a function name collision of the sort described here: https://github.com/jashkenas/coffee-script/issues/366#issuecomment-242134)
44 | 			 */
45 | 			var getData = function getDataF () {
46 | 			};
47 | 
48 | 
49 | 			// References
50 | 			// http://ejohn.org/blog/javascript-as-a-first-language/
51 | 			// http://kangax.github.com/nfe/
52 | 		</script>
53 | 	</body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/general-patterns/global-import.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: The Problem with Globals
10 | 			 * Description: You can pass some global objects inside a function.
11 | 			 */
12 | 
13 | 			(function ($, YAHOO) {
14 | 				// now have access to globals jQuery (as $) and YAHOO in this code
15 | 			}(jQuery, YAHOO));
16 | 
17 | 			// References
18 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
19 | 		</script>
20 | 	</body>
21 | </html>


--------------------------------------------------------------------------------
/general-patterns/globals.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: The Problem with Globals
10 | 			 * Description: The problem is that they are shared among all the code in your JavaScript application or web page
11 | 			 */
12 | 
13 | 			// antipattern 1
14 | 			function sum(x, y) {
15 | 				// implied global
16 | 				result = x + y;
17 | 				return result;
18 | 			}
19 | 
20 | 
21 | 			// preferred 1
22 | 			function sum(x, y) {
23 | 				// a variable declared inside of a function is local to that function and not available outside the function
24 | 				var result = x + y;
25 | 				return result;
26 | 			}
27 | 
28 | 
29 | 			// antipattern 2
30 | 			function foo() {
31 | 				var a = b = 0;
32 | 				// ...
33 | 			}
34 | 
35 | 			// the preceding code snippet will behave as if you've typed the following
36 | 			var a = (b = 0);
37 | 
38 | 
39 | 			// preferred 2
40 | 			function foo() {
41 | 				var a, b;
42 | 				// ...
43 | 				a = b = 0; // both local
44 | 			}
45 | 
46 | 			// References
47 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
48 | 		</script>
49 | 	</body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/general-patterns/hoisting.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Hoisting
10 | 			 * Description: var statements anywhere in a function act as if the variables were declared at the top of the function
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			wontchange = "global"; // global variable
15 | 			willchange = "global"; // global variable
16 | 			function func_bad() {
17 | 				alert(wontchange); // "global"
18 | 				alert(willchange); // "undefined" due to the var below
19 | 				var willchange = "local"; // This rescopes willchange inside this function
20 | 				alert(willchange); // "local"
21 | 			}
22 | 			func_bad();
23 | 
24 | 			// the preceding code snippet will behave as if it were implemented like so:
25 | 			wontchange = "global"; // global variable
26 | 			willchange = "global"; // global variable
27 | 			function func() {
28 | 				// This still rescopes, but it is a lot more explicit
29 | 				var willchange; // same as -> var willchange = undefined;
30 | 				alert(wontchange); // "global"
31 | 				alert(willchange); // "undefined"
32 | 				willchange = "local";
33 | 				alert(willchange); // "local"
34 | 			}
35 | 			func();
36 | 
37 | 
38 | 			// References
39 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
40 | 		</script>
41 | 	</body>
42 | </html>


--------------------------------------------------------------------------------
/general-patterns/iife-for-loop.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <title>JavaScript Patterns</title>
 5 |         <meta charset="utf-8">
 6 |     </head>
 7 |     <body>
 8 |         <script>
 9 |             /* Title: iife for loops
10 |              * Description: loops that make use of counters as expected
11 |              */
12 | 
13 |             // this will log 'regular loop 5'
14 |             for (var i = 0; i < 5; i++) {
15 |               setTimeout(function() {
16 |                 console.log('regular loop', i);
17 |               }, 3000);
18 |             }
19 | 
20 |             // this will log 'iife loop 1', 'iife loop 2', 'iife loop 3', 'iife loop 4'
21 |             for (var i = 0; i < 5; i++) {
22 |               (function(n) {
23 |                 setTimeout(function() {
24 |                   console.log('iife loop', n);
25 |                 }, 3000);
26 |               })(i);
27 |             }
28 | 
29 |             // same results as the iife loop. Let isn't supported by all javascript versions
30 |             for (let i = 0; i < 5; i++) {
31 |               setTimeout(function() {
32 |                 console.log('let loop', i);
33 |               }, 3000);
34 |             }
35 | 
36 |             // References
37 |             // http://benalman.com/news/2010/11/immediately-invoked-function-expression/
38 |         </script>
39 |     </body>
40 | </html>


--------------------------------------------------------------------------------
/general-patterns/map-and-filter-by-reduce.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>JavaScript Patterns</title>
 5 |     <meta charset="utf-8">
 6 | </head>
 7 | <body>
 8 | <script>
 9 |   /* Title: Map and Filter By Reduce
10 |    * Description: Combine map and filter with reduce
11 |    */
12 | 
13 |   // Basic example
14 |   const euro = [29.76, 41.85, 46.5];
15 |   const above30 = euro.reduce((total, amount) => {
16 |     if (amount > 30) {
17 |       total.push(amount);
18 |     }
19 |     return total;
20 |   }, []);
21 |   console.log('above30', above30);
22 | 
23 |   // Using async/await
24 |   async function foo() {
25 |     try {
26 |       var values = await getValues();
27 | 
28 |       return await values.reduce(async function(values, value) {
29 |         values = await values;
30 |         value = await asyncOperation(value);
31 |         console.log(value);
32 |         values.push(value);
33 |         return values;
34 |       }, []);
35 |     } catch (err) {
36 |       console.log('We had an ', err);
37 |     }
38 |   }
39 | 
40 |   // References
41 |   // https://medium.freecodecamp.org/reduce-f47a7da511a9
42 |   // https://code.tutsplus.com/tutorials/a-primer-on-es7-async-functions--cms-22367
43 | </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/general-patterns/minimizing-globals.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Minimizing Globals
10 | 			 Description: they are declared outside of any function or simply used without being declared
11 | 			 */
12 | 
13 | 			myglobal = "hello"; // antipattern
14 | 			console.log(myglobal); // "hello"
15 | 			console.log(window.myglobal); // "hello"
16 | 			console.log(window["myglobal"]); // "hello"
17 | 			console.log(this.myglobal); // "hello"
18 | 
19 | 			// If you have to (gun to your head) use globals like jQuery does think of using a prefix and holding all your information in an object
20 | 			prefix_myglobal = {
21 | 			    method: function () {},
22 | 			    property: "hello"
23 | 			};
24 | 
25 | 			// References
26 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
27 | 		</script>
28 | 	</body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/general-patterns/parseint.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Number Conversions with parseInt()
10 | 			 Description: use the second radix parameter
11 | 			 */
12 | 
13 | 			// pattern 1
14 | 			/* NOTE: in this example, if you omit the radix parameter like parseInt(year), the returned value will be 0,
15 | 			 * because "09" assumes octal number (as if you did parseInt( year, 8 )) and 09 is not a valid digit in base 8.
16 | 			 */
17 | 			 //if we omit the radix parameter then the returned value is not zero, it takes base 10 in chrome console.please check
18 | 
19 | 			var month = "06",
20 | 			year = "09";
21 | 			month = parseInt(month, 10);
22 | 			year = parseInt(year, 10);
23 | 
24 | 
25 | 			// pattern 2
26 | 			/* NOTE: if you're expecting input such as “08 hello”, parseInt() will return a number, whereas the others will fail
27 | 			 * with NaN.
28 | 			 If the input string begins with "0", radix is eight (octal) or 10 (decimal).  
29 | 			 Exactly which radix is chosen is *implementation-dependent*.  
30 | 			 ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet.  For this reason always specify a radix when using parseInt.
31 | 			 */
32 | 			+"08" // result is 8
33 | 			Number("08") // 8
34 | 			
35 | 			//pattern 3
36 | 			/* NOTE: Bit operator parsing to int and chunk float vars, if a string has characters it return zero (0)
37 | 			 *
38 | 			 */
39 | 			("789"|0) // => 789
40 | 			("sds"|0) // => 0
41 | 			(8.45|0) // => 8
42 | 			("8.55"|0) // => 8
43 | 
44 | 			// References
45 | 			// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
46 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
47 | 		</script>
48 | 	</body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/general-patterns/shim-sniffing.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Shim Sniffing
10 | 			 * Description: 
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			Array.prototype.map = function() {
15 | 				// stuff
16 | 			};
17 | 
18 | 			// better 
19 | 			if (!Array.prototype.map) {
20 | 				Array.prototype.map = function() {
21 | 					// stuff
22 | 				};
23 | 			}
24 | 
25 | 			// even better
26 | 			if (typeof Array.prototype.map !== "function") {
27 | 				Array.prototype.map = function() {
28 | 					// stuff
29 | 				}
30 | 			}
31 | 
32 | 
33 | 			// If use either native or your own implementation, but not others:
34 | 			// When you call toString() of a native function it should return a string with a function that has a body of [native code] 
35 | 
36 | 			// by default there is white spaces and new lines issue
37 | 			console.log(Array.prototype.map.toString().replace(/\s/g, '*'));
38 | 			// "*function*map()*{*****[native*code]*}*"  // IE
39 | 			// "function*map()*{*****[native*code]*}" // FF
40 | 			// "function*map()*{*[native*code]*}" // Chrome
41 | 
42 | 			// a proper check can fix the problem
43 | 			console.log(Array.prototype.map.toString().replace(/\s/g, ''));
44 | 			// "functionmap(){[nativecode]}"
45 | 
46 | 			// a reusable shim() function
47 | 			function shim(o, prop, fn) {
48 | 				var nbody = "function" + prop + "(){[nativecode]}";
49 | 				if (o.hasOwnProperty(prop) &&
50 | 					o[prop].toString().replace(/\s/g, '') === nbody) {
51 | 					// native!
52 | 					return true;
53 | 				}
54 | 				// shim
55 | 				o[prop] = fn;
56 | 			}
57 | 
58 | 			// this is native, cool
59 | 			shim(
60 | 				Array.prototype, 'map',
61 | 				function(){/*...*/}
62 | 			); // true
63 | 
64 | 			// this is new
65 | 			shim(
66 | 				Array.prototype, 'mapzer',
67 | 				function(){console.log(this)}
68 | 			);
69 | 
70 | 			[1,2,3].mapzer(); // alerts 1,2,3
71 | 
72 | 			// References
73 | 			// http://www.jspatterns.com/shim-sniffing/
74 | 		</script>
75 | 	</body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/general-patterns/single-var-pattern.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>JavaScript Patterns</title>
 5 |     <meta charset="utf-8">
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       /* Title: Single var Pattern
10 |        Description: use one var statement and declare multiple variables
11 |        */
12 | 
13 |       /* Benefits:
14 |        * 1. Provides a single place to look for all the local variables needed by the function
15 |        * 2. Prevents logical errors when a variable is used before it's defined
16 |        * 3. Helps you remember to declare variables and therefore minimize globals
17 |        * 4. Is less code (to type and to transfer over the wire)
18 |        */
19 | 
20 |       function func() {
21 |         var a = 1
22 |           , b = 2
23 |           , sum = a + b
24 |           , myobject = {}
25 |           , i
26 |           , j;
27 | 
28 |         // function body...
29 |       }
30 | 
31 |       function updateElement() {
32 |         var el = document.getElementById("result")
33 |           , style = el.style;
34 |         // do something with el and style...
35 |       }
36 |       
37 |       // Preferred way 
38 |       // Move commas BEFORE vars
39 |       // You'll not forget to add one when adding variable to the end of list
40 |       function func() {
41 |         var a = 1
42 |             , b = 2
43 |             , sum = a + b
44 |             , myobject = {}
45 |             , i
46 |             , j;
47 | 
48 |         // function body...
49 |       }
50 | 
51 |       // References
52 |       // http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
53 |     </script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/general-patterns/switch-pattern.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: switch Pattern
10 | 			 Description: improve the readability and robustness of your switch statements
11 | 			 */
12 | 
13 | 			/* Style conventions:
14 | 			 * 1. Aligning each `case` with `switch` (an exception to the curly braces indentation rule).
15 | 			 * 2. Indenting the code within each case.
16 | 			 * 3. Ending each `case` with a clear `break`;.
17 | 			 * 4. Avoiding fall-throughs (when you omit the break intentionally). If you're absolutely convinced
18 | 			 *    that a fall-through is the best approach, make sure you document such cases, because they might
19 | 			 *    look like errors to the readers of your code.
20 | 			 * 5. Ending the `switch` with a `default`: to make sure there's always a sane result even if none of 
21 | 			 *    the cases matched.
22 | 			 */
23 | 
24 | 			//antipattern
25 | 			var inspect_me = 0,
26 | 					result = '';
27 | 			switch (inspect_me) {
28 | 			case 0:
29 | 				result = "zero";
30 | 				break;
31 | 			case 1:
32 | 				result = "one";
33 | 				break;
34 | 			default:
35 | 				result = "unknown";
36 | 			}
37 | 
38 | 			//preferred 1,
39 | 			//'cause it is much faster and easy to reuse and read
40 | 			//avoid to use switch
41 | 			var results = {
42 | 				0: "zero",
43 | 				1: "one"
44 | 			};
45 | 
46 | 			result = results[inspect_me] || "unknown";
47 | 
48 | 			//preferred 2
49 | 			var resultFuncs = {
50 | 				0: function () {
51 | 					//some code for "zero" case
52 | 					return "zero";
53 | 				},
54 | 				1: function () {
55 | 					//some code for one case
56 | 					return "one";
57 | 				}
58 | 			};
59 | 
60 | 			result = (resultFuncs[inspect_me] || function () {
61 | 				//some code for default case
62 | 				return "unknown";
63 | 			})();
64 | 
65 | 			// References
66 | 			// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
67 | 		</script>
68 | 	</body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/img/.gitignore:
--------------------------------------------------------------------------------
1 | !.gitignore
2 | 
3 | 


--------------------------------------------------------------------------------
/img/js-patterns-cn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chuanxshi/javascript-patterns/bff021b5923cd8a5bbe471c16c724e89324969a7/img/js-patterns-cn.png


--------------------------------------------------------------------------------
/img/js-patterns.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chuanxshi/javascript-patterns/bff021b5923cd8a5bbe471c16c724e89324969a7/img/js-patterns.png


--------------------------------------------------------------------------------
/jquery-patterns/append.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: append
10 | 			 * Description: use string concatenate and set innerHTML. Note that it is recommended to use the 
11 | 			 * array.join technique to concatenate long strings.
12 | 			 */
13 | 
14 | 			// antipattern
15 | 			// appending inside
16 | 			$.each(reallyLongArray, function (count, item) {
17 | 				var newLI = '<li>' + item + '</li>';
18 | 				$('#ballers').append(newLI);
19 | 			});
20 | 
21 | 
22 | 			// documentFragment off-DOM
23 | 			var frag = document.createDocumentFragment();
24 | 			$.each(reallyLongArray, function (count, item) {
25 | 				var newLI = $('<li>' + item + '</li>');
26 | 				frag.appendChild(newLI[0]);
27 | 			});
28 | 			$('#ballers')[0].appendChild(frag);
29 | 
30 | 
31 | 			// string concatenate and set innerHTML
32 | 			var myhtml = '';
33 | 			$.each(reallyLongArray, function (count, item) {
34 | 				myhtml += '<li>' + item + '</li>';
35 | 			});
36 | 			$('#ballers').html(myhtml);
37 | 
38 | 			// concatenate very long strings
39 | 			var myHtmlBuffer = [];
40 | 			$.each(reallyLongArray, function(count, item) {
41 | 				myHtmlBuffer.push('<li>' + item + '</li>');
42 | 			});
43 | 			$('#ballers').html(myHtmlBuffer.join(''));
44 | 
45 | 			// References
46 | 			// http://paulirish.com/2009/perf/
47 | 			// http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/
48 | 			// http://stackoverflow.com/questions/112158/javascript-string-concatenation
49 | 			// http://stackoverflow.com/questions/153381/javascript-string-concatenation-faster-than-this-example
50 | 		</script>
51 | 	</body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/jquery-patterns/cache-selector.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: selector cache
10 | 			 Description: using selector cache to avoid requery
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			$('.list-item').click(function () {
15 | 				$('.photo').hide();
16 | 			});
17 | 
18 | 
19 | 			// preferred
20 | 			var $photo;
21 | 			// prefix the cache with $ to help identify it as a selector cache later
22 | 			$('.list-item').click(function () {
23 | 				$photo = $photo || $('.photo');
24 | 				$photo.hide();
25 | 			});
26 | 
27 | 
28 | 			// References
29 | 			// http://ejohn.org/blog/learning-from-twitter/
30 | 		</script>
31 | 	</body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/jquery-patterns/context-and-find.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: context and find
10 | 			 * Description: better to choose `find` over `context` 
11 | 			 */
12 | 
13 | 			
14 | 			var arms = $('div.robotarm', '#container');
15 | 			$('.reply_form', $(this).closest('.comment')).hide();
16 | 
17 | 			// no performance gain over doing this, but a preferred pattern for readability reason
18 | 			var arms = $('#container').find('div.robotarm');
19 | 			$(this).closest('.comment').find('.reply_form').hide();
20 | 			
21 | 
22 | 			// References
23 | 			// http://paulirish.com/2009/perf/
24 | 		</script>
25 | 	</body>
26 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/data.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: data
10 | 			 * Description: pattern and antipattern of using data
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			$(elem).data(key, value);
15 | 
16 | 
17 | 			// preferred
18 | 			$.data(elem, key, value);
19 | 
20 | 
21 | 			// References
22 | 			// http://paulirish.com/2009/perf/
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/decending-from-id.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Decending from id
10 | 			 * Description: be more specific, better to descend from an id
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			var arms = $('.container div.robotarm');
15 | 
16 | 
17 | 			// better
18 | 			var arms = $('#container div.robotarm');
19 | 
20 | 
21 | 			// preferred
22 | 			var arms = $('#container').find('div.robotarm');
23 | 
24 | 
25 | 			// References
26 | 			// http://paulirish.com/2009/perf/
27 | 		</script>
28 | 	</body>
29 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/detach.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: detach
10 | 			 * Description: take element off the DOM while manipulating them
11 | 			 */
12 | 
13 | 			var table = $('#some-table');
14 | 			var parent = table.parent();
15 | 
16 | 			table.detach();
17 | 			table.addLotsAndLotsOfRows();
18 | 			parent.append(table);
19 | 
20 | 
21 | 			// References
22 | 			// http://paulirish.com/2009/perf/
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/event-delegation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: event delegation
10 | 			 Description: event delegation pattern and antipattern
11 | 			 */
12 | 
13 | 			// antipattern 
14 | 			// As of jQuery 1.7, the .live() method is deprecated
15 | 			// $('a.trigger', $('#container')[0]).live('click', handlerFn);
16 | 
17 | 
18 | 			// preferred
19 | 			$('#container').on('click', 'a.trigger', handlerFn);
20 | 
21 | 			// .bind()
22 | 			// .live() - best used for simple scenario, it functions the best with a supply selector only, it's not chainable
23 | 			// .delegate() - it gives you a more focused way, it can better filter the elements, for example, table row
24 | 
25 | 
26 | 			// References
27 | 			// http://paulirish.com/2009/perf/
28 | 		</script>
29 | 	</body>
30 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/left-and-right.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Left and Right
10 | 			 * Description: specific on the right, light on the left
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			$('div.data .brad')
15 | 
16 | 
17 | 			// preferred
18 | 			$('.data td.brad')
19 | 
20 | 
21 | 			// References
22 | 			// http://paulirish.com/2009/perf/
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/pubsub-callback.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 9 | 		<script>
10 | 			/* Title: Using jQuery 1.7's $.Callbacks() feature
11 | 			 * Description: $.Callbacks are a multi-purpose callbacks list object which can be used as a base layer to build new functionality including simple publish/subscribe systems. We haven't yet released the API documentation for this feature just yet, more information on it (including lots of examples) here: http://addyosmani.com/blog/jquery-1-7s-callbacks-feature-demystified/.
12 | 			 */
13 | 
14 | 			var topics = {};
15 | 
16 | 			jQuery.Topic = function( id ) {
17 | 			    var callbacks,
18 | 			        topic = id && topics[ id ];
19 | 			    if ( !topic ) {
20 | 			        callbacks = jQuery.Callbacks();
21 | 			        topic = {
22 | 			            publish: callbacks.fire,
23 | 			            subscribe: callbacks.add,
24 | 			            unsubscribe: callbacks.remove
25 | 			        };
26 | 			        if ( id ) {
27 | 			            topics[ id ] = topic;
28 | 			        }
29 | 			    }
30 | 			    return topic;
31 | 			};
32 | 
33 | 			function fn1( value ){
34 | 				console.log( value );
35 | 			}
36 | 
37 | 			function fn2( value ){
38 | 				fn1("fn2 says:" + value);
39 | 				return false;
40 | 			}
41 | 
42 | 			// Usage:
43 | 			// Subscribers
44 | 			$.Topic( 'mailArrived' ).subscribe( fn1 );
45 | 			$.Topic( 'mailArrived' ).subscribe( fn2 );
46 | 			$.Topic( 'mailSent' ).subscribe( fn1 );
47 | 
48 | 			// Publisher
49 | 			$.Topic( 'mailArrived' ).publish( 'hello world!' );
50 | 			$.Topic( 'mailSent' ).publish( 'woo! mail!' );
51 | 
52 | 			//  Here, 'hello world!' gets pushed to fn1 and fn2
53 | 			//  when the 'mailArrived' notification is published
54 | 			//  with 'woo! mail!' also being pushed to fn1 when
55 | 			//  the 'mailSent' notification is published.
56 | 			/*
57 | 			output:
58 | 			hello world!
59 | 			fn2 says: hello world!
60 | 			woo! mail!
61 | 			*/
62 | 
63 | 			// References
64 | 			// https://gist.github.com/1321768
65 | 		</script>
66 | 	</body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/jquery-patterns/pubsub-custom-events.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 9 | 		<script>
10 | 			/* Title: Custom events using .on() and .off()
11 | 			 * Description: A really tiny pub/sub implementation for jQuery 1.7 using the two new methods(since jQuery 1.7): .on() and .off().
12 | 			 */
13 | 
14 | 			/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
15 | 			 * http://benalman.com/
16 | 			 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
17 | 
18 | 			(function($) {
19 | 
20 | 			  var o = $({});
21 | 
22 | 			  $.subscribe = function() {
23 | 			    o.on.apply(o, arguments);
24 | 			  };
25 | 
26 | 			  $.unsubscribe = function() {
27 | 			    o.off.apply(o, arguments);
28 | 			  };
29 | 
30 | 			  $.publish = function() {
31 | 			    o.trigger.apply(o, arguments);
32 | 			  };
33 | 
34 | 			}(jQuery));
35 | 
36 | 
37 | 			// Usage:
38 | 			// Super-basic example:
39 | 
40 | 			function handle(e, a, b, c) {
41 | 			  // `e` is the event object, you probably don't care about it.
42 | 			  console.log(a + b + c);
43 | 			};
44 | 
45 | 			$.subscribe("/some/topic", handle);
46 | 
47 | 			$.publish("/some/topic", [ "a", "b", "c" ]);
48 | 			// logs: abc
49 | 
50 | 			$.unsubscribe("/some/topic", handle); // Unsubscribe just this handler
51 | 
52 | 			// Or:
53 | 
54 | 			$.subscribe("/some/topic", function(e, a, b, c) {
55 | 			  console.log(a + b + c);
56 | 			});
57 | 
58 | 			$.publish("/some/topic", [ "a", "b", "c" ]);
59 | 			// logs: abc
60 | 			// Unsubscribe all handlers for this topic
61 | 			$.unsubscribe("/some/topic"); 
62 | 
63 | 			// References
64 | 			// https://gist.github.com/1321768
65 | 		</script>
66 | 	</body>
67 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/pubsub-observable.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="http://brado23.github.com/jquery-ui/jquery-1.6.2.js"></script>
 9 |     <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.core.js"></script>
10 |     <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.widget.js"></script>
11 |     <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.button.js"></script>
12 |     <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.observable.js"></script>
13 |     <script src="http://brado23.github.com/jquery-ui/grid-editing/localstore.js"></script>
14 | 		<script src="http://brado23.github.com/jquery-ui/grid-editing/observer.js"></script>​
15 | 		<script>
16 | 			/* Title: Using jQuery UI $.Observable
17 | 			 * Description: Using jQuery UI $.Observable (which is currently still under development), when objects/collections of data are changed or updated, events are triggered to inform any observers of the change
18 | 			 */
19 | 
20 | 			/*$.observers example by @addyosmani*/
21 | 
22 | 			var myData = [], 
23 | 			    observer = $.observer(myData);
24 | 
25 | 			function dataChange( data ){
26 | 			   console.log('New data arrived with ID ' + data[0].id + ' and value ' + data[0].title);   
27 | 			}
28 | 
29 | 			$(observer).bind("change", function ( e ) { 
30 | 			    dataChange( e.target.data );
31 | 			});
32 | 
33 | 			$.observable( myData ).insert({
34 | 			                id: myData.length + 1,
35 | 			                title: 'test'
36 | 			            });
37 | 			
38 | 			// References
39 | 			// https://gist.github.com/1321768
40 | 		</script>
41 | 	</body>
42 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/pubsub-plugin.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 9 | 		<script>
10 | 			/* Title: One of the many third-party plugins
11 | 			 * Description: Peter Higgin's jQuery plugin, available here: https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js
12 | 			 */
13 | 
14 | 
15 | 			;(function(d){
16 | 			    // the topic/subscription hash
17 | 			    var cache = {};
18 | 
19 | 			    // Publish some data on a named topic.
20 | 			    d.publish = function(/* String */topic, /* Array? */args){
21 | 			        // topic: String - The channel to publish on
22 | 			        // args: Array - The data to publish. Each array item is converted into an ordered
23 | 			        // arguments on the subscribed functions. 
24 | 			        cache[topic] && d.each(cache[topic], function(){
25 | 			            this.apply(d, args || []);
26 | 			        });
27 | 			    };
28 | 
29 | 			    // Register a callback on a named topic.
30 | 			    d.subscribe = function(/* String */topic, /* Function */callback){    
31 | 			        // @topic: String - The channel to subscribe to
32 | 			        // @callback: Function - The handler event. Anytime something is $.publish'ed on a 
33 | 			        // subscribed channel, the callback will be called with the published array as 
34 | 			        // ordered arguments.
35 | 			        //
36 | 			        // returns: Array - A handle which can be used to unsubscribe this 
37 | 			        // particular subscription.
38 | 
39 | 			        if(!cache[topic]){
40 | 			            cache[topic] = [];
41 | 			        }
42 | 			        cache[topic].push(callback);
43 | 			        return [topic, callback]; // Array
44 | 			    };
45 | 
46 | 			    // Disconnect a subscribed function for a topic.
47 | 			    d.unsubscribe = function(/* Array */handle){    
48 | 			        // handle: Array - The return value from a $.subscribe call.
49 | 			        var t = handle[0];
50 | 			        cache[t] && d.each(cache[t], function(idx){
51 | 			            if(this == handle[1]){
52 | 			                cache[t].splice(idx, 1);
53 | 			            }
54 | 			        });
55 | 			    };
56 | 
57 | 			})(jQuery);
58 | 
59 | 
60 | 			// Usage:
61 | 			// Publish stuff on '/some/topic'. Anything subscribed will be called
62 | 			// with a function signature like: function(a,b,c){ ... }
63 | 
64 | 
65 | 			$.subscribe("/some/topic", function(a, b, c){ 
66 | 			    console.log(a,b,c);
67 | 			});
68 | 
69 | 
70 | 			$.publish("/some/topic", ["a","b","c"]);
71 | 
72 | 			// References
73 | 			// https://gist.github.com/1321768
74 | 		</script>
75 | 	</body>
76 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/requery.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: requery
10 | 			 * Description: avoid requery by using jQuery chaining
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			// create and append your element
15 | 			$(document.body).append("<div class='baaron' />");
16 | 				// requery to bind stuff
17 | 				$("div.baaron").click(function () {
18 | 			});
19 | 
20 | 
21 | 			// preferred 1
22 | 			// swap to appendTo to hold your element
23 | 			$("<div class='baaron' />")
24 | 				.appendTo(document.body)
25 | 				.click(function () {
26 | 					// do stuff
27 | 				});
28 | 					
29 | 			// preferred 2
30 | 			// cache the selector
31 | 			var $baaron = $("<div class='baaron' />").appendTo(document.body);
32 | 			
33 | 			$baaron.click(function () {
34 | 				// do stuff
35 | 			});
36 | 
37 | 
38 | 			// References
39 | 			// http://paulirish.com/2009/perf/
40 | 		</script>
41 | 	</body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/jquery-patterns/specific-when-needed.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Be Specific when Needed
10 | 			 * Description: no need to be over-specific
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			var arms = $('.data table.attendees td.brad');
15 | 
16 | 
17 | 			// preferred
18 | 			var arms = $('.data td.brad');
19 | 
20 | 
21 | 			// References
22 | 			// http://paulirish.com/2009/perf/
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/universal-selector.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Universal Selector
10 | 			 * Description: better use of universal selector
11 | 			 */
12 | 
13 | 			// antipattern 1
14 | 			$('.buttons > *')
15 | 
16 | 
17 | 			// preferred 1
18 | 			$('.buttons').children()
19 | 
20 | 
21 | 			// antipattern 2
22 | 			$('.gender :radio')
23 | 			$('.gender *:radio')
24 | 
25 | 
26 | 			// preferred 2
27 | 			$('.gender input:radio')
28 | 
29 | 
30 | 			// References
31 | 			// http://paulirish.com/2009/perf/
32 | 		</script>
33 | 	</body>
34 | </html>


--------------------------------------------------------------------------------
/jquery-patterns/window-scroll-event.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: window scroll event
10 | 			 * Description: avoid attaching handlers to the window scroll event
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			$(window).scroll(function () {
15 | 				$('.foo').something();
16 | 			});
17 | 
18 | 
19 | 			// preferred
20 | 			var outerPane = $details.find(".details-pane-outer"),
21 | 					didScroll = false;
22 | 			$(window).scroll(function () {
23 | 				didScroll = true;
24 | 			});
25 | 
26 | 			setInterval(function () {
27 | 				if (didScroll) {
28 | 					didScroll = false;
29 | 					// Check your page position and then
30 | 					// Load in more results
31 | 					// outerPane.html();
32 | 				}
33 | 			}, 250);
34 | 
35 | 
36 | 			// preferred v2, timeout instead of interval - no unnecessary ticks
37 | 			var scrollTimeout;  // global for any pending scrollTimeout
38 | 			var outerPane = $details.find(".details-pane-outer");
39 | 
40 | 			$(window).scroll(function () {
41 | 				if (scrollTimeout) {
42 | 					// clear the timeout, if one is pending
43 | 					clearTimeout(scrollTimeout);
44 | 					scrollTimeout = null;
45 | 				}
46 | 				scrollTimeout = setTimeout(scrollHandler, 250);
47 | 			});
48 | 
49 | 			scrollHandler = function () {
50 | 				// Check your page position and then
51 | 				// Load in more results
52 | 				// outerPane.html();
53 | 			};
54 | 
55 | 
56 | 			// References
57 | 			// http://ejohn.org/blog/learning-from-twitter/
58 | 		</script>
59 | 	</body>
60 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/amd-commonjs/pluginCore.js:
--------------------------------------------------------------------------------
 1 | // Module/Plugin core
 2 | // Note: the wrapper code you see around the module is what enables
 3 | // us to support multiple module formats and specifications by
 4 | // mapping the arguments defined to what a specific format expects
 5 | // to be present. Our actual module functionality is defined lower
 6 | // down, where a named module and exports are demonstrated.
 7 | //
 8 | // Note that dependencies can just as easily be declared if required
 9 | // and should work as demonstrated earlier with the AMD module examples.
10 | 
11 | (function ( name, definition ){
12 |   var theModule = definition(),
13 |       // this is considered "safe":
14 |       hasDefine = typeof define === 'function' && define.amd,
15 |       // hasDefine = typeof define === 'function',
16 |       hasExports = typeof module !== 'undefined' && module.exports;
17 | 
18 |   if ( hasDefine ){ // AMD Module
19 |     define(theModule);
20 |   } else if ( hasExports ) { // Node.js Module
21 |     module.exports = theModule;
22 |   } else { // Assign to common namespaces or simply the global object (window)
23 |     (this.jQuery || this.ender || this.$ || this)[name] = theModule;
24 |   }
25 | })( 'core', function () {
26 |     var module = this;
27 |     module.plugins = [];
28 |     module.highlightColor = "yellow";
29 |     module.errorColor = "red";
30 | 
31 |   // define the core module here and return the public API
32 | 
33 |   // This is the highlight method used by the core highlightAll()
34 |   // method and all of the plugins highlighting elements different
35 |   // colors
36 |   module.highlight = function(el,strColor){
37 |     if(this.jQuery){
38 |       jQuery(el).css('background', strColor);
39 |     }
40 |   }
41 |   return {
42 |       highlightAll:function(){
43 |         module.highlight('div', module.highlightColor);
44 |       }
45 |   };
46 | 
47 | });


--------------------------------------------------------------------------------
/jquery-plugin-patterns/amd-commonjs/pluginExtension.js:
--------------------------------------------------------------------------------
 1 | // Extension to module core
 2 | 
 3 | (function ( name, definition ) {
 4 |     var theModule = definition(),
 5 |         hasDefine = typeof define === 'function',
 6 |         hasExports = typeof module !== 'undefined' && module.exports;
 7 | 
 8 |     if ( hasDefine ) { // AMD Module
 9 |         define(theModule);
10 |     } else if ( hasExports ) { // Node.js Module
11 |         module.exports = theModule;
12 |     } else { // Assign to common namespaces or simply the global object (window)
13 | 
14 |         // account for for flat-file/global module extensions
15 |         var obj = null;
16 |         var namespaces = name.split(".");
17 |         var scope = (this.jQuery || this.ender || this.$ || this);
18 |         for (var i = 0; i < namespaces.length; i++) {
19 |             var packageName = namespaces[i];
20 |             if (obj && i == namespaces.length - 1) {
21 |                 obj[packageName] = theModule;
22 |             } else if (typeof scope[packageName] === "undefined") {
23 |                 scope[packageName] = {};
24 |             }
25 |             obj = scope[packageName];
26 |         }
27 | 
28 |     }
29 | })('core.plugin', function () {
30 | 
31 |     // Define your module here and return the public API.
32 |     // This code could be easily adapted with the core to
33 |     // allow for methods that overwrite and extend core functionality
34 |     // in order to expand the highlight method to do more if you wish.
35 |     return {
36 |         setGreen: function ( el ) {
37 |             highlight(el, 'green');
38 |         },
39 |         setRed: function ( el ) {
40 |             highlight(el, errorColor);
41 |         }
42 |     };
43 | 
44 | });


--------------------------------------------------------------------------------
/jquery-plugin-patterns/amd-commonjs/usage.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 9 | 		<script src="pluginCore.js"></script>
10 | 		<script src="pluginExtension.js"></script>
11 | 
12 | 		<script type="text/javascript">
13 | 
14 | 		$(function(){
15 | 
16 | 		    // Our plugin 'core' is exposed under a core namespace in
17 | 		    // this example, which we first cache
18 | 		    var core = $.core;
19 | 
20 | 		    // Then use use some of the built-in core functionality to
21 | 		    // highlight all divs in the page yellow
22 | 		    core.highlightAll();
23 | 
24 | 		    // Access the plugins (extensions) loaded into the 'plugin'
25 | 		    // namespace of our core module:
26 | 
27 | 		    // Set the first div in the page to have a green background.
28 | 		    core.plugin.setGreen("div:first");
29 | 		    // Here we're making use of the core's 'highlight' method
30 | 		    // under the hood from a plugin loaded in after it
31 | 
32 | 		    // Set the last div to the 'errorColor' property defined in
33 | 		    // our core module/plugin. If you review the code further down,
34 | 		    // you'll see how easy it is to consume properties and methods
35 | 		    // between the core and other plugins
36 | 		    core.plugin.setRed('div:last');
37 | 		});
38 | 
39 | 		</script>
40 | 		
41 | 		<script>
42 | 		// References
43 | 		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
44 | 		</script>
45 | 	</body>
46 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/basic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 9 | 		<script>
10 | 		/*!
11 | 		 * jQuery basic plugin boilerplate
12 | 		 */
13 | 
14 | 		/*
15 | 		The most basic form of jQuery plugin
16 | 		This is great for compactness
17 | 		*/
18 | 
19 | 		$.fn.myPluginName = function() {
20 | 		    // your plugin logic
21 | 		};
22 | 
23 | 
24 | 		/*
25 | 		A better foundation to build on
26 | 		Here, we’ve wrapped our plugin logic in an anonymous function. To ensure that our use of the $ sign as a shorthand creates no conflicts between jQuery and other JavaScript libraries, we simply pass it to this closure, which maps it to the dollar sign, thus ensuring that it can’t be affected by anything outside of its scope of execution.
27 | 		*/
28 | 
29 | 		(function( $ ){
30 | 		  	$.fn.myPluginName = function() {
31 | 		    	// your plugin logic
32 | 		  	};
33 | 		})( jQuery );
34 | 
35 | 
36 | 		// References
37 | 		// Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
38 | 		</script>
39 | 	</body>
40 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/best-options.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 		/*!
10 | 		 * jQuery 'best options' plugin boilerplate
11 | 		 * Author: @cowboy
12 | 		 * Further changes: @addyosmani
13 | 		 * Licensed under the MIT license
14 | 		 */
15 | 
16 | 		;(function ( $, window, document, undefined ) {
17 | 
18 | 		    $.fn.pluginName = function ( options ) {
19 | 
20 | 		        // Here's a best practice for overriding 'defaults'
21 | 		        // with specified options. Note how, rather than a
22 | 		        // regular defaults object being passed as the second
23 | 		        // parameter, we instead refer to $.fn.pluginName.options
24 | 		        // explicitly, merging it with the options passed directly
25 | 		        // to the plugin. This allows us to override options both
26 | 		        // globally and on a per-call level. 
27 | 
28 | 		        options = $.extend( {}, $.fn.pluginName.options, options );
29 | 
30 | 		        return this.each(function () {
31 | 
32 | 		            var elem = $(this);
33 | 
34 | 		        });
35 | 		    };
36 | 
37 | 		    // Globally overriding options
38 | 		    // Here are our publicly accessible default plugin options
39 | 		    // that are available in case the user doesn't pass in all
40 | 		    // of the values expected. The user is given a default
41 | 		    // experience but can also override the values as necessary.
42 | 		    // eg. $fn.pluginName.key ='otherval';
43 | 
44 | 		    $.fn.pluginName.options = {
45 | 
46 | 		        key: "value",
47 | 		        myMethod: function ( elem, param ) {
48 | 
49 | 		        }
50 | 		    };
51 | 
52 | 		})( jQuery, window, document );
53 | 
54 | 
55 | 		// References
56 | 		/*
57 | 		jQuery Pluginization and the accompanying gist (by Ben Alman) - http://goo.gl/1VwfP http://goo.gl/bg63
58 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
59 | 		*/
60 | 		</script>
61 | 	</body>
62 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/custom-events.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 		/*!
10 | 		 * jQuery custom-events plugin boilerplate
11 | 		 * Author: DevPatch
12 | 		 * Further changes: @addyosmani
13 | 		 * Licensed under the MIT license
14 | 		 */
15 | 
16 | 		// In this pattern, we use jQuery's custom events to add
17 | 		// pub/sub (publish/subscribe) capabilities to widgets.
18 | 		// Each widget would publish certain events and subscribe
19 | 		// to others. This approach effectively helps to decouple
20 | 		// the widgets and enables them to function independently.
21 | 
22 | 		;(function ( $, window, document, undefined ) {
23 | 		    $.widget("ao.eventStatus", {
24 | 		        options: {
25 | 
26 | 		        },
27 | 
28 | 		        _create : function() {
29 | 		            var self = this;
30 | 
31 | 		            //self.element.addClass( "my-widget" );
32 | 
33 | 		            //subscribe to 'myEventStart'
34 | 		            self.element.bind( "myEventStart", function( e ) {
35 | 		                console.log("event start");
36 | 		            });
37 | 
38 | 		            //subscribe to 'myEventEnd'
39 | 		            self.element.bind( "myEventEnd", function( e ) {
40 | 		                console.log("event end");
41 | 		            });
42 | 
43 | 		            //unsubscribe to 'myEventStart'
44 | 		            //self.element.unbind( "myEventStart", function(e){
45 | 		                ///console.log("unsubscribed to this event");
46 | 		            //});
47 | 		        },
48 | 
49 | 		        destroy: function(){
50 | 		            $.Widget.prototype.destroy.apply( this, arguments );
51 | 		        },
52 | 		    });
53 | 		})( jQuery, window , document );
54 | 
55 | 		//Publishing event notifications
56 | 		//usage:
57 | 		// $(".my-widget").trigger("myEventStart");
58 | 		// $(".my-widget").trigger("myEventEnd");
59 | 
60 | 
61 | 		// References
62 | 		/*
63 | 		Communication Between jQuery UI Widgets (by Benjamin Sternthal) - http://goo.gl/oE0ge
64 | 		Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability (by Addy Osmani) - http://goo.gl/CU5fC
65 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
66 | 		*/
67 | 		</script>
68 | 	</body>
69 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/extend.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 		/*!
10 | 		 * jQuery extend-based plugin boilerplate
11 | 		 * Author: @oscargodson
12 | 		 * Further changes: @timmywil
13 | 		 * Licensed under the MIT license
14 | 		 */
15 | 
16 | 		/*
17 | 		As you'll notice below, we're making use of $.fn.extend to create our plugin rather
18 | 		than opting for $.fn.pluginname. This type of structure may be useful if you need
19 | 		to add a relatively large number of methods to your plugin. There are however alternatives
20 | 		to this that may be better suited, including Alex Sexton's prototypal inheritence pattern
21 | 		which is also included in this repo.
22 | 		*/
23 | 
24 | 
25 | 		// the semi colon before function invocation is a safety net against concatenated
26 | 		// scripts and/or other plugins which may not be closed properly.
27 | 		;( function( $ ){
28 | 			$.fn.extend( {
29 | 				pluginname: function( options ) {
30 | 
31 | 					this.defaults = {};
32 | 
33 | 					var settings = $.extend( {}, this.defaults, options );
34 | 
35 | 					return this.each( function() {
36 | 
37 | 						var $this = $( this );
38 | 
39 | 					});
40 | 
41 | 				}
42 | 
43 | 			});
44 | 
45 | 		})( jQuery );
46 | 
47 | 
48 | 		// References
49 | 		// Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
50 | 		</script>
51 | 	</body>
52 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/highly-configurable-mutable.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 		/*
10 | 		 * 'Highly configurable' mutable plugin boilerplate
11 | 		 * Author: @markdalgleish
12 | 		 * Further changes, comments: @addyosmani
13 | 		 * Licensed under the MIT license
14 | 		 */
15 | 
16 | 		// Note that with this pattern, as per Alex Sexton's, the plugin logic
17 | 		// hasn't been nested in a jQuery plugin. Instead, we just use
18 | 		// jQuery for its instantiation.
19 | 
20 | 		;(function( $, window, document, undefined ){
21 | 
22 | 		  // our plugin constructor
23 | 		  var Plugin = function( elem, options ){
24 | 		      this.elem = elem;
25 | 		      this.$elem = $(elem);
26 | 		      this.options = options;
27 | 
28 | 		      // This next line takes advantage of HTML5 data attributes
29 | 		      // to support customization of the plugin on a per-element
30 | 		      // basis. For example,
31 | 		      // <div class=item' data-plugin-options='{"message":"Goodbye World!"}'></div>
32 | 		      this.metadata = this.$elem.data( 'plugin-options' );
33 | 		    };
34 | 
35 | 		  // the plugin prototype
36 | 		  Plugin.prototype = {
37 | 		    defaults: {
38 | 		      message: 'Hello world!'
39 | 		    },
40 | 
41 | 		    init: function() {
42 | 		      // Introduce defaults that can be extended either
43 | 		      // globally or using an object literal.
44 | 		      this.config = $.extend({}, this.defaults, this.options,
45 | 		      this.metadata);
46 | 
47 | 		      // Sample usage:
48 | 		      // Set the message per instance:
49 | 		      // $('#elem').plugin({ message: 'Goodbye World!'});
50 | 		      // or
51 | 		      // var p = new Plugin(document.getElementById('elem'),
52 | 		      // { message: 'Goodbye World!'}).init()
53 | 		      // or, set the global default message:
54 | 		      // Plugin.defaults.message = 'Goodbye World!'
55 | 
56 | 		      this.sampleMethod();
57 | 		      return this;
58 | 		    },
59 | 
60 | 		    sampleMethod: function() {
61 | 		      // eg. show the currently configured message
62 | 		      // console.log(this.config.message);
63 | 		    }
64 | 		  }
65 | 
66 | 		  Plugin.defaults = Plugin.prototype.defaults;
67 | 
68 | 		  $.fn.plugin = function(options) {
69 | 		    return this.each(function() {
70 | 		      new Plugin(this, options).init();
71 | 		    });
72 | 		  };
73 | 
74 | 		  //optional: window.Plugin = Plugin;
75 | 
76 | 		})( jQuery, window , document );
77 | 
78 | 
79 | 		// References
80 | 		/*
81 | 		Creating Highly Configurable jQuery Plugins (by Mark Dalgleish) - http://goo.gl/1VwfP http://goo.gl/bg63
82 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
83 | 		*/
84 | 		</script>
85 | 	</body>
86 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 		/*!
 10 | 		 * (jQuery mobile) jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 11 | 		 * Author: @scottjehl
 12 | 		 * Further changes: @addyosmani
 13 | 		 * Licensed under the MIT license
 14 | 		 */
 15 | 
 16 | 		;(function ( $, window, document, undefined ) {
 17 | 
 18 | 		    //define a widget under a namespace of your choice
 19 | 		    //here 'mobile' has been used in the first parameter
 20 | 		    $.widget( "mobile.widgetName", $.mobile.widget, {
 21 | 
 22 | 		        //Options to be used as defaults
 23 | 		        options: {
 24 | 		            foo: true,
 25 | 		            bar: false
 26 | 		        },
 27 | 
 28 | 		        _create: function() {
 29 | 		            // _create will automatically run the first time this
 30 | 		            // widget is called. Put the initial widget set-up code
 31 | 		            // here, then you can access the element on which
 32 | 		            // the widget was called via this.element
 33 | 		            // The options defined above can be accessed via
 34 | 		            // this.options
 35 | 
 36 | 		            //var m = this.element,
 37 | 		            //p = m.parents(":jqmData(role='page')"),
 38 | 		            //c = p.find(":jqmData(role='content')")
 39 | 		        },
 40 | 
 41 | 		        // Private methods/props start with underscores
 42 | 		        _dosomething: function(){ ... },
 43 | 
 44 | 		        // Public methods like these below can can be called
 45 | 		                // externally:
 46 | 		        // $("#myelem").foo( "enable", arguments );
 47 | 
 48 | 		        enable: function() { ... },
 49 | 
 50 | 		        // Destroy an instantiated plugin and clean up modifications
 51 | 		        // the widget has made to the DOM
 52 | 		        destroy: function () {
 53 | 		            //this.element.removeStuff();
 54 | 		            // For UI 1.8, destroy must be invoked from the
 55 | 		            // base widget
 56 | 		            $.Widget.prototype.destroy.call(this);
 57 | 		            // For UI 1.9, define _destroy instead and don't
 58 | 		            // worry about calling the base widget
 59 | 		        },
 60 | 
 61 | 		        methodB: function ( event ) {
 62 | 		            //_trigger dispatches callbacks the plugin user can
 63 | 		            // subscribe to
 64 | 		            //signature: _trigger( "callbackName" , [eventObject],
 65 | 		            //  [uiObject] )
 66 | 		            // eg. this._trigger( "hover", e /*where e.type ==
 67 | 		            // "mouseenter"*/, { hovered: $(e.target)});
 68 | 		            this._trigger('methodA', event, {
 69 | 		                key: value
 70 | 		            });
 71 | 		        },
 72 | 
 73 | 		        methodA: function ( event ) {
 74 | 		            this._trigger('dataChanged', event, {
 75 | 		                key: value
 76 | 		            });
 77 | 		        },
 78 | 
 79 | 		        //Respond to any changes the user makes to the option method
 80 | 		        _setOption: function ( key, value ) {
 81 | 		            switch (key) {
 82 | 		            case "someValue":
 83 | 		                //this.options.someValue = doSomethingWith( value );
 84 | 		                break;
 85 | 		            default:
 86 | 		                //this.options[ key ] = value;
 87 | 		                break;
 88 | 		            }
 89 | 
 90 | 		            // For UI 1.8, _setOption must be manually invoked from
 91 | 		            // the base widget
 92 | 		            $.Widget.prototype._setOption.apply(this, arguments);
 93 | 		            // For UI 1.9 the _super method can be used instead
 94 | 		            // this._super( "_setOption", key, value );
 95 | 		        }
 96 | 		    });
 97 | 
 98 | 		})( jQuery, window, document );
 99 | 
100 | 		//usage: $("#myelem").foo( options );
101 | 
102 | 		/* Some additional notes - delete this section before using the boilerplate.
103 | 
104 | 		 We can also self-init this widget whenever a new page in jQuery Mobile is created. jQuery Mobile's "page" plugin dispatches a "create" event when a jQuery Mobile page (found via data-role=page attr) is first initialized.
105 | 
106 | 		We can listen for that event (called "pagecreate" ) and run our plugin automatically whenever a new page is created.
107 | 
108 | 		$(document).bind("pagecreate", function (e) {
109 | 		    // In here, e.target refers to the page that was created
110 | 		    // (it's the target of the pagecreate event)
111 | 		    // So, we can simply find elements on this page that match a
112 | 		    // selector of our choosing, and call our plugin on them.
113 | 		    // Here's how we'd call our "foo" plugin on any element with a
114 | 		    // data-role attribute of "foo":
115 | 		    $(e.target).find("[data-role='foo']").foo(options);
116 | 
117 | 		    // Or, better yet, let's write the selector accounting for the configurable
118 | 		    // data-attribute namespace
119 | 		    $(e.target).find(":jqmData(role='foo')").foo(options);
120 | 		});
121 | 
122 | 		That's it. Now you can simply reference the script containing your widget and pagecreate binding in a page running jQuery Mobile site, and it will automatically run like any other jQM plugin.
123 | 		*/
124 | 
125 | 
126 | 		// References
127 | 		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
128 | 		</script>
129 | 	</body>
130 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/lightweight.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 9 | 		<script>
10 | 		/*!
11 | 		 * jQuery lightweight plugin boilerplate
12 | 		 * Original author: @ajpiano
13 | 		 * Further changes, comments: @addyosmani
14 | 		 * Licensed under the MIT license
15 | 		 */
16 | 
17 | 		// the semi-colon before the function invocation is a safety
18 | 		// net against concatenated scripts and/or other plugins
19 | 		// that are not closed properly.
20 | 		;(function ( $, window, document, undefined ) {
21 | 
22 | 		    // undefined is used here as the undefined global
23 | 		    // variable in ECMAScript 3 and is mutable (i.e. it can
24 | 		    // be changed by someone else). undefined isn't really
25 | 		    // being passed in so we can ensure that its value is
26 | 		    // truly undefined. In ES5, undefined can no longer be
27 | 		    // modified.
28 | 
29 | 		    // window and document are passed through as local
30 | 		    // variables rather than as globals, because this (slightly)
31 | 		    // quickens the resolution process and can be more
32 | 		    // efficiently minified (especially when both are
33 | 		    // regularly referenced in your plugin).
34 | 
35 | 		    // Create the defaults once
36 | 		    var pluginName = 'defaultPluginName',
37 | 		        defaults = {
38 | 		            propertyName: "value"
39 | 		        };
40 | 
41 | 		    // The actual plugin constructor
42 | 		    function Plugin( element, options ) {
43 | 		        this.element = element;
44 | 
45 | 		        // jQuery has an extend method that merges the
46 | 		        // contents of two or more objects, storing the
47 | 		        // result in the first object. The first object
48 | 		        // is generally empty because we don't want to alter
49 | 		        // the default options for future instances of the plugin
50 | 		        this.options = $.extend( {}, defaults, options) ;
51 | 
52 | 		        this._defaults = defaults;
53 | 		        this._name = pluginName;
54 | 
55 | 		        this.init();
56 | 		    }
57 | 
58 | 		    Plugin.prototype.init = function () {
59 | 		        // Place initialization logic here
60 | 		        // You already have access to the DOM element and
61 | 		        // the options via the instance, e.g. this.element
62 | 		        // and this.options
63 | 		    };
64 | 
65 | 		    // A really lightweight plugin wrapper around the constructor,
66 | 		    // preventing against multiple instantiations
67 | 		    $.fn[pluginName] = function ( options ) {
68 | 		        return this.each(function () {
69 | 		            if (!$.data(this, 'plugin_' + pluginName)) {
70 | 		                $.data(this, 'plugin_' + pluginName,
71 | 		                new Plugin( this, options ));
72 | 		            }
73 | 		        });
74 | 		    }
75 | 
76 | 		})( jQuery, window, document );
77 | 
78 | 
79 | 		// References
80 | 		/* 
81 | 		Plugins/Authoring (by jQuery) - http://goo.gl/98R9
82 | 		Signs of a poorly written jQuery plugin (by Remy Sharp) - http://goo.gl/5RNI
83 | 		How to Create Your Own jQuery Plugin (by Elijah Manor) - http://goo.gl/EoSFq
84 | 		Style in jQuery Plugins and Why it Matters (by "Cowboy" Ben Alman) - http://goo.gl/E7pd0
85 | 		Create Your First jQuery Plugin Part 2 (by Andrew Wirick) - http://goo.gl/IhCYO
86 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
87 | 		*/
88 | 		</script>
89 | 	</body>
90 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/namespaced-starter.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 		/*!
10 | 		 * jQuery namespaced 'Starter' plugin boilerplate
11 | 		 * Author: @dougneiner
12 | 		 * Further changes: @addyosmani
13 | 		 * Licensed under the MIT license
14 | 		 */
15 | 
16 | 		;(function ( $ ) {
17 | 			if ( ! $.myNamespace ) {
18 | 				$.myNamespace = {};
19 | 			}
20 | 
21 | 			$.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
22 | 
23 | 				// To avoid scope issues, use 'base' instead of 'this'
24 | 				// to reference this class from internal events and functions.
25 | 				var base = this;
26 | 
27 | 				// Access to jQuery and DOM versions of element
28 | 				base.$el = $( el );
29 | 				base.el = el;
30 | 
31 | 				// Add a reverse reference to the DOM object
32 | 				base.$el.data( "myNamespace.myPluginName" , base );
33 | 
34 | 				base.init = function () {
35 | 					base.myFunctionParam = myFunctionParam;
36 | 
37 | 					base.settings = $.extend( {}, $.myNamespace.myPluginName.defaults, options );
38 | 
39 | 					// Put your initialization code here
40 | 
41 | 				};
42 | 
43 | 				// Sample Function, Uncomment to use
44 | 				// base.functionName = function( paramaters ){
45 | 				//
46 | 				// };
47 | 
48 | 				// Run initializer
49 | 				base.init();
50 | 			};
51 | 
52 | 			$.myNamespace.myPluginName.defaults = {
53 | 				myDefaultValue: ""
54 | 			};
55 | 
56 | 			$.fn.mynamespace_myPluginName = function( myFunctionParam, options ) {
57 | 				return this.each( function () {
58 | 					( new $.myNamespace.myPluginName( this, myFunctionParam, options ) );
59 | 				});
60 | 			};
61 | 
62 | 		} )( jQuery );
63 | 
64 | 
65 | 		// References
66 | 		/*
67 | 		Namespacing in JavaScript (by Angus Croll) - http://goo.gl/eul12
68 | 		Use Your $.fn jQuery Namespace (by Ryan Florence) - http://goo.gl/QQIC6
69 | 		JavaScript Namespacing (by Peter Michaux) - http://goo.gl/24t8N
70 | 		Modules and namespaces in JavaScript (by Axel Rauschmayer) - http://goo.gl/6XuqO
71 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
72 | 		*/
73 | 		</script>
74 | 	</body>
75 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/prototypal-inheritance.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 9 | 		<script>
10 | 		/*!
11 | 		 * jQuery prototypal inheritance plugin boilerplate
12 | 		 * Author: Alex Sexton, Scott Gonzalez
13 | 		 * Further changes: @addyosmani
14 | 		 * Licensed under the MIT license
15 | 		 */
16 | 
17 | 		// myObject - an object representing a concept that you want
18 | 		// to model (e.g. a car)
19 | 		var myObject = {
20 | 		  init: function( options, elem ) {
21 | 		    // Mix in the passed-in options with the default options
22 | 		    this.options = $.extend( {}, this.options, options );
23 | 
24 | 		    // Save the element reference, both as a jQuery
25 | 		    // reference and a normal reference
26 | 		    this.elem  = elem;
27 | 		    this.$elem = $(elem);
28 | 
29 | 		    // Build the DOM's initial structure
30 | 		    this._build();
31 | 
32 | 		    // return this so that we can chain and use the bridge with less code.
33 | 		    return this;
34 | 		  },
35 | 		  options: {
36 | 		    name: "No name"
37 | 		  },
38 | 		  _build: function(){
39 | 		    //this.$elem.html('<h1>'+this.options.name+'</h1>');
40 | 		  },
41 | 		  myMethod: function( msg ){
42 | 		    // You have direct access to the associated and cached
43 | 		    // jQuery element
44 | 		    // this.$elem.append('<p>'+msg+'</p>');
45 | 		  }
46 | 		};
47 | 
48 | 		// Object.create support test, and fallback for browsers without it
49 | 		if ( typeof Object.create !== 'function' ) {
50 | 		    Object.create = function (o) {
51 | 		        function F() {}
52 | 		        F.prototype = o;
53 | 		        return new F();
54 | 		    };
55 | 		}
56 | 
57 | 		// Create a plugin based on a defined object
58 | 		$.plugin = function( name, object ) {
59 | 		  $.fn[name] = function( options ) {
60 | 		    return this.each(function() {
61 | 		      if ( ! $.data( this, name ) ) {
62 | 		        $.data( this, name, Object.create(object).init(
63 | 		        options, this ) );
64 | 		      }
65 | 		    });
66 | 		  };
67 | 		};
68 | 
69 | 		// Usage:
70 | 		// With myObject, we could now essentially do this:
71 | 		// $.plugin('myobj', myObject);
72 | 
73 | 		// and at this point we could do the following
74 | 		// $('#elem').myobj({name: "John"});
75 | 		// var inst = $('#elem').data('myobj');
76 | 		// inst.myMethod('I am a method');
77 | 
78 | 
79 | 		// References
80 | 		/*
81 | 		Using Inheritance Patterns To Organize Large jQuery Applications (by Alex Sexton) - http://goo.gl/Z4lYz
82 | 		How to Manage Large Applications With jQuery or Whatever (by Alex Sexton) - http://goo.gl/kKWhj
83 | 		Practical Example of the Need for Prototypal Inheritance (by Neeraj Singh) - http://goo.gl/jrzb6
84 | 		Prototypal Inheritance in JavaScript (by Douglas Crockford) - http://goo.gl/TPXqV
85 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
86 | 		*/
87 | 		</script>
88 | 	</body>
89 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/ui-widget-factory-bridge.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  9 | 		<script>
 10 | 		/*!
 11 | 		 * jQuery UI Widget factory "bridge" plugin boilerplate
 12 | 		 * Author: @erichynds
 13 | 		 * Further changes, additional comments: @addyosmani
 14 | 		 * Licensed under the MIT license
 15 | 		 */
 16 | 
 17 | 		// a "widgetName" object constructor
 18 | 		// required: this must accept two arguments,
 19 | 		// options: an object of configuration options
 20 | 		// element: the DOM element the instance was created on
 21 | 		var widgetName = function( options, element ){
 22 | 		  this.name = "myWidgetName";
 23 | 		  this.options = options;
 24 | 		  this.element = element;
 25 | 		  this._init();
 26 | 		}
 27 | 
 28 | 		// the "widgetName" prototype
 29 | 		widgetName.prototype = {
 30 | 
 31 | 		    // _create will automatically run the first time this
 32 | 		    // widget is called
 33 | 		    _create: function(){
 34 | 		        // creation code
 35 | 		    },
 36 | 
 37 | 		    // required: initialization logic for the plugin goes into _init
 38 | 		    // This fires when your instance is first created and when
 39 | 		    // attempting to initialize the widget again (by the bridge)
 40 | 		    // after it has already been initialized.
 41 | 		    _init: function(){
 42 | 		        // init code
 43 | 		    },
 44 | 
 45 | 		    // required: objects to be used with the bridge must contain an
 46 | 		    // 'option'. Post-initialization, the logic for changing options
 47 | 		    // goes here.
 48 | 		    option: function( key, value ){
 49 | 
 50 | 		        // optional: get/change options post initialization
 51 | 		        // ignore if you don't require them.
 52 | 
 53 | 		        // signature: $('#foo').bar({ cool:false });
 54 | 		        if( $.isPlainObject( key ) ){
 55 | 		            this.options = $.extend( true, this.options, key );
 56 | 
 57 | 		        // signature: $('#foo').option('cool'); - getter
 58 | 		        } else if ( key && typeof value === "undefined" ){
 59 | 		            return this.options[ key ];
 60 | 
 61 | 		        // signature: $('#foo').bar('option', 'baz', false);
 62 | 		        } else {
 63 | 		            this.options[ key ] = value;
 64 | 		        }
 65 | 
 66 | 		        // required: option must return the current instance.
 67 | 		        // When re-initializing an instance on elements, option
 68 | 		        // is called first and is then chained to the _init method.
 69 | 		        return this;
 70 | 		    },
 71 | 
 72 | 		    // notice no underscore is used for public methods
 73 | 		    publicFunction: function(){
 74 | 		        console.log('public function');
 75 | 		    },
 76 | 
 77 | 		    // underscores are used for private methods
 78 | 		    _privateFunction: function(){
 79 | 		        console.log('private function');
 80 | 		    }
 81 | 		};
 82 | 
 83 | 		// usage:
 84 | 
 85 | 		// connect the widget obj to jQuery's API under the "foo" namespace
 86 | 		// $.widget.bridge("foo", widgetName);
 87 | 
 88 | 		// create an instance of the widget for use
 89 | 		// var instance = $("#elem").foo({
 90 | 		//     baz: true
 91 | 		// });
 92 | 
 93 | 		// your widget instance exists in the elem's data
 94 | 		// instance.data("foo").element; // => #elem element
 95 | 
 96 | 		// bridge allows you to call public methods...
 97 | 		// instance.foo("publicFunction"); // => "public method"
 98 | 
 99 | 		// bridge prevents calls to internal methods
100 | 		// instance.foo("_privateFunction"); // => #elem element
101 | 
102 | 
103 | 		// References
104 | 		/*
105 | 		Using $.widget.bridge Outside of the Widget Factory (by Eric Hynds) - http://goo.gl/UfPKn
106 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
107 | 		*/
108 | 		</script>
109 | 	</body>
110 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/ui-widget-factory-mobile.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 		/*!
 10 | 		 * jQuery UI Widget + RequireJS module boilerplate (for 1.8/9+)
 11 | 		 * Authors: @jrburke, @addyosmani
 12 | 		 * Licensed under the MIT license
 13 | 		 */
 14 | 
 15 | 		// Note from James:
 16 | 		//
 17 | 		// This assumes you are using the RequireJS+jQuery file, and
 18 | 		// that the following files are all in the same directory:
 19 | 		//
 20 | 		// - require-jquery.js
 21 | 		// - jquery-ui.custom.min.js (custom jQuery UI build with widget factory)
 22 | 		// - templates/
 23 | 		//    - asset.html
 24 | 		// - ao.myWidget.js 
 25 | 
 26 | 		// Then you can construct the widget like so: 
 27 | 
 28 | 		//ao.myWidget.js file:
 29 | 		define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.min","jquery.tmpl"], function ($, assetHtml) {
 30 | 
 31 | 		    // define your widget under a namespace of your choice
 32 | 		    // 'ao' is used here as a demonstration
 33 | 		    $.widget( "ao.myWidget", { 
 34 | 
 35 | 		        // Options to be used as defaults
 36 | 		        options: {}, 
 37 | 
 38 | 		        // Set up widget (e.g. create element, apply theming,
 39 | 		        // bind events, etc.)
 40 | 		        _create: function () {
 41 | 
 42 | 		            // _create will automatically run the first time
 43 | 		            // this widget is called. Put the initial widget
 44 | 		            // set-up code here, then you can access the element
 45 | 		            // on which the widget was called via this.element.
 46 | 		            // The options defined above can be accessed via
 47 | 		            // this.options
 48 | 
 49 | 		            //this.element.addStuff();
 50 | 		            //this.element.addStuff();
 51 | 		            //this.element.tmpl(assetHtml).appendTo(this.content);
 52 | 		        },
 53 | 
 54 | 		        // Destroy an instantiated plugin and clean up modifications
 55 | 		        // that the widget has made to the DOM
 56 | 		        destroy: function () {
 57 | 		            //t his.element.removeStuff();
 58 | 		            // For UI 1.8, destroy must be invoked from the base
 59 | 		            // widget
 60 | 		            $.Widget.prototype.destroy.call( this );
 61 | 		            // For UI 1.9, define _destroy instead and don't worry
 62 | 		            // about calling the base widget
 63 | 		        },
 64 | 
 65 | 		        methodB: function ( event ) {
 66 | 		            // _trigger dispatches callbacks the plugin user can
 67 | 		            // subscribe to
 68 | 		            //signature: _trigger( "callbackName" , [eventObject],
 69 | 		            // [uiObject] )
 70 | 		            this._trigger('methodA', event, {
 71 | 		                key: value
 72 | 		            });
 73 | 		        },
 74 | 
 75 | 		        methodA: function ( event ) {
 76 | 		            this._trigger('dataChanged', event, {
 77 | 		                key: value
 78 | 		            });
 79 | 		        },
 80 | 
 81 | 		        //Respond to any changes the user makes to the option method
 82 | 		        _setOption: function ( key, value ) {
 83 | 		            switch (key) {
 84 | 		            case "someValue":
 85 | 		                //this.options.someValue = doSomethingWith( value );
 86 | 		                break;
 87 | 		            default:
 88 | 		                //this.options[ key ] = value;
 89 | 		                break;
 90 | 		            }
 91 | 
 92 | 		            // For UI 1.8, _setOption must be manually invoked from
 93 | 		            // the base widget
 94 | 		            $.Widget.prototype._setOption.apply( this, arguments );
 95 | 		            // For UI 1.9 the _super method can be used instead
 96 | 		            //this._super( "_setOption", key, value );
 97 | 		        }
 98 | 
 99 | 		        //somewhere assetHtml would be used for templating, depending
100 | 		        // on your choice.
101 | 		    });
102 | 		}); 
103 | 
104 | 		// If you are going to use the RequireJS optimizer to combine files
105 | 		// together, you can leave off the "ao.myWidget" argument to define:
106 | 		// define(["jquery", "text!templates/asset.html", "jquery-ui.custom.min"], …
107 | 
108 | 
109 | 		// References
110 | 		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
111 | 		</script>
112 | 	</body>
113 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/ui-widget-factory.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  9 | 		<script>
 10 | 		/*!
 11 | 		 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 12 | 		 * Author: @addyosmani
 13 | 		 * Further changes: @peolanha
 14 | 		 * Licensed under the MIT license
 15 | 		 */
 16 | 
 17 | 		;(function ( $, window, document, undefined ) {
 18 | 
 19 | 		    // define your widget under a namespace of your choice
 20 | 		    //  with additional parameters e.g.
 21 | 		    // $.widget( "namespace.widgetname", (optional) - an
 22 | 		    // existing widget prototype to inherit from, an object
 23 | 		    // literal to become the widget's prototype ); 
 24 | 
 25 | 		    $.widget( "namespace.widgetname" , {
 26 | 
 27 | 		        //Options to be used as defaults
 28 | 		        options: {
 29 | 		            someValue: null
 30 | 		        },
 31 | 
 32 | 		        //Setup widget (eg. element creation, apply theming
 33 | 		        // , bind events etc.)
 34 | 		        _create: function () {
 35 | 
 36 | 		            // _create will automatically run the first time
 37 | 		            // this widget is called. Put the initial widget
 38 | 		            // setup code here, then you can access the element
 39 | 		            // on which the widget was called via this.element.
 40 | 		            // The options defined above can be accessed
 41 | 		            // via this.options this.element.addStuff();
 42 | 		        },
 43 | 
 44 | 		        // Destroy an instantiated plugin and clean up
 45 | 		        // modifications the widget has made to the DOM
 46 | 		        destroy: function () {
 47 | 
 48 | 		            // this.element.removeStuff();
 49 | 		            // For UI 1.8, destroy must be invoked from the
 50 | 		            // base widget
 51 | 		            $.Widget.prototype.destroy.call(this);
 52 | 		            // For UI 1.9, define _destroy instead and don't
 53 | 		            // worry about
 54 | 		            // calling the base widget
 55 | 		        },
 56 | 
 57 | 		        methodB: function ( event ) {
 58 | 		            //_trigger dispatches callbacks the plugin user
 59 | 		            // can subscribe to
 60 | 		            // signature: _trigger( "callbackName" , [eventObject],
 61 | 		            // [uiObject] )
 62 | 		            // eg. this._trigger( "hover", e /*where e.type ==
 63 | 		            // "mouseenter"*/, { hovered: $(e.target)});
 64 | 		            this._trigger('methodA', event, {
 65 | 		                key: value
 66 | 		            });
 67 | 		        },
 68 | 
 69 | 		        methodA: function ( event ) {
 70 | 		            this._trigger('dataChanged', event, {
 71 | 		                key: value
 72 | 		            });
 73 | 		        },
 74 | 
 75 | 		        // Respond to any changes the user makes to the
 76 | 		        // option method
 77 | 		        _setOption: function ( key, value ) {
 78 | 		            switch (key) {
 79 | 		            case "someValue":
 80 | 		                //this.options.someValue = doSomethingWith( value );
 81 | 		                break;
 82 | 		            default:
 83 | 		                //this.options[ key ] = value;
 84 | 		                break;
 85 | 		            }
 86 | 
 87 | 		            // For UI 1.8, _setOption must be manually invoked
 88 | 		            // from the base widget
 89 | 		            $.Widget.prototype._setOption.apply( this, arguments );
 90 | 		            // For UI 1.9 the _super method can be used instead
 91 | 		            // this._super( "_setOption", key, value );
 92 | 		        }
 93 | 		    });
 94 | 
 95 | 		})( jQuery, window, document );
 96 | 
 97 | 
 98 | 		// References
 99 | 		/*
100 | 		The jQuery UI Widget Factory (by Adam J. Sontag) - http://goo.gl/DLKEt
101 | 		Introduction to Stateful Plugins and the Widget Factory (by Doug Neiner) - http://goo.gl/eTGhP
102 | 		Widget Factory (by Scott González) - http://goo.gl/5qFQG
103 | 		Understanding jQuery UI widgets: A tutorial (by Hacking at 0300) - http://goo.gl/rBhaF
104 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
105 | 		*/
106 | 		</script>
107 | 	</body>
108 | </html>


--------------------------------------------------------------------------------
/jquery-plugin-patterns/ui-widget-requirejs-module.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 		/*!
 10 | 		 * jQuery UI Widget + RequireJS module boilerplate (for 1.8/9+)
 11 | 		 * Authors: @jrburke, @addyosmani
 12 | 		 * Licensed under the MIT license
 13 | 		 */
 14 | 
 15 | 		// Note from James:
 16 | 		//
 17 | 		// This assumes you are using the RequireJS+jQuery file, and
 18 | 		// that the following files are all in the same directory:
 19 | 		//
 20 | 		// - require-jquery.js
 21 | 		// - jquery-ui.custom.min.js (custom jQuery UI build with widget factory)
 22 | 		// - templates/
 23 | 		//    - asset.html
 24 | 		// - ao.myWidget.js 
 25 | 
 26 | 		// Then you can construct the widget like so: 
 27 | 
 28 | 		//ao.myWidget.js file:
 29 | 		define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.min","jquery.tmpl"], function ($, assetHtml) {
 30 | 
 31 | 		    // define your widget under a namespace of your choice
 32 | 		    // 'ao' is used here as a demonstration
 33 | 		    $.widget( "ao.myWidget", { 
 34 | 
 35 | 		        // Options to be used as defaults
 36 | 		        options: {}, 
 37 | 
 38 | 		        // Set up widget (e.g. create element, apply theming,
 39 | 		        // bind events, etc.)
 40 | 		        _create: function () {
 41 | 
 42 | 		            // _create will automatically run the first time
 43 | 		            // this widget is called. Put the initial widget
 44 | 		            // set-up code here, then you can access the element
 45 | 		            // on which the widget was called via this.element.
 46 | 		            // The options defined above can be accessed via
 47 | 		            // this.options
 48 | 
 49 | 		            //this.element.addStuff();
 50 | 		            //this.element.addStuff();
 51 | 		            //this.element.tmpl(assetHtml).appendTo(this.content);
 52 | 		        },
 53 | 
 54 | 		        // Destroy an instantiated plugin and clean up modifications
 55 | 		        // that the widget has made to the DOM
 56 | 		        destroy: function () {
 57 | 		            //t his.element.removeStuff();
 58 | 		            // For UI 1.8, destroy must be invoked from the base
 59 | 		            // widget
 60 | 		            $.Widget.prototype.destroy.call( this );
 61 | 		            // For UI 1.9, define _destroy instead and don't worry
 62 | 		            // about calling the base widget
 63 | 		        },
 64 | 
 65 | 		        methodB: function ( event ) {
 66 | 		            // _trigger dispatches callbacks the plugin user can
 67 | 		            // subscribe to
 68 | 		            //signature: _trigger( "callbackName" , [eventObject],
 69 | 		            // [uiObject] )
 70 | 		            this._trigger('methodA', event, {
 71 | 		                key: value
 72 | 		            });
 73 | 		        },
 74 | 
 75 | 		        methodA: function ( event ) {
 76 | 		            this._trigger('dataChanged', event, {
 77 | 		                key: value
 78 | 		            });
 79 | 		        },
 80 | 
 81 | 		        //Respond to any changes the user makes to the option method
 82 | 		        _setOption: function ( key, value ) {
 83 | 		            switch (key) {
 84 | 		            case "someValue":
 85 | 		                //this.options.someValue = doSomethingWith( value );
 86 | 		                break;
 87 | 		            default:
 88 | 		                //this.options[ key ] = value;
 89 | 		                break;
 90 | 		            }
 91 | 
 92 | 		            // For UI 1.8, _setOption must be manually invoked from
 93 | 		            // the base widget
 94 | 		            $.Widget.prototype._setOption.apply( this, arguments );
 95 | 		            // For UI 1.9 the _super method can be used instead
 96 | 		            //this._super( "_setOption", key, value );
 97 | 		        }
 98 | 
 99 | 		        //somewhere assetHtml would be used for templating, depending
100 | 		        // on your choice.
101 | 		    });
102 | 		}); 
103 | 
104 | 		// If you are going to use the RequireJS optimizer to combine files
105 | 		// together, you can leave off the "ao.myWidget" argument to define:
106 | 		// define(["jquery", "text!templates/asset.html", "jquery-ui.custom.min"], …
107 | 
108 | 
109 | 		// References
110 | 		/*
111 | 		Using RequireJS with jQuery (by Rebecca Murphey) - http://goo.gl/jpX31
112 | 		Fast Modular Code With jQuery and RequireJS (by James Burke) - http://goo.gl/BMEYQ
113 | 		jQuery’s Best Friends (by Alex Sexton) - http://jquerysbestfriends.com/
114 | 		Managing Dependencies With RequireJS (by Ruslan Matveev) - http://goo.gl/zRRT9
115 | 		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
116 | 		*/
117 | 		</script>
118 | 	</body>
119 | </html>


--------------------------------------------------------------------------------
/js/plugins.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // usage: log('inside coolFunc', this, arguments);
 3 | // paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
 4 | window.log = function(){
 5 |   log.history = log.history || [];   // store logs to an array for reference
 6 |   log.history.push(arguments);
 7 |   if(this.console) {
 8 |     arguments.callee = arguments.callee.caller;
 9 |     var newarr = [].slice.call(arguments);
10 |     (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
11 |   }
12 | };
13 | 
14 | // make it safe to use console.log always
15 | (function(b){function c(){}for(var d="assert,clear,count,debug,dir,dirxml,error,exception,firebug,group,groupCollapsed,groupEnd,info,log,memoryProfile,memoryProfileEnd,profile,profileEnd,table,time,timeEnd,timeStamp,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
16 | {console.log();return window.console;}catch(err){return window.console={};}})());
17 | 
18 | 
19 | // place any jQuery/helper plugins in here, instead of separate, slower script files.
20 | 
21 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | /* Author:
2 |   Shi Chuan
3 | */
4 | 
5 | 
6 | 
7 | 
8 | 
9 | 


--------------------------------------------------------------------------------
/literals-and-constructors/array-literal.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Array literal
10 | 			 * Description: use array literal notation to avoid potential errors when creating dynamic arrays at runtime
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			var a = new Array();
15 | 
16 | 
17 | 			// preferred
18 | 			var a = [];
19 | 
20 | 
21 | 			// References
22 | 			// http://shop.oreilly.com/product/9780596806767.do
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/literals-and-constructors/enforcing-new.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Enforcing new
10 | 			 * Description: when you forget `new`, `this` inside the constructor will point to the global object
11 | 			 */
12 | 
13 | 			// constructor
14 | 			function Waffle() {
15 | 				this.tastes = "yummy";
16 | 			}
17 | 
18 | 			// antipattern
19 | 			// forgotten `new`
20 | 			var good_morning = Waffle();
21 | 			console.log(typeof good_morning); // "undefined"
22 | 			console.log(window.tastes); // "yummy"
23 | 
24 | 
25 | 			// preferred
26 | 			var good_morning = new Waffle();
27 | 			console.log(typeof good_morning); // "object"
28 | 			console.log(good_morning.tastes); // "yummy"
29 | 
30 | 
31 | 			// preferred
32 | 			// You can also guarantee that this situation never occurs by guaranteeing new instances;
33 | 			// Similar to how you can call $() and $.Deferred() in the same way as new $() and new $.Deferred():
34 | 			function Waffle() {
35 | 				if (!(this instanceof Waffle)) {
36 | 					return new Waffle();
37 | 				}
38 | 
39 | 				this.tastes = "yummy";
40 | 			}
41 | 
42 | 			var good_morning = new Waffle();
43 | 			var good_evening = Waffle();
44 | 
45 | 			console.log(typeof good_morning); // "object"
46 | 			console.log(good_morning.tastes); // "yummy"
47 | 			console.log(typeof good_evening); // "object"
48 | 			console.log(good_evening.tastes); // "yummy"
49 | 
50 | 
51 | 			// References
52 | 			// http://shop.oreilly.com/product/9780596806767.do
53 | 		</script>
54 | 	</body>
55 | </html>


--------------------------------------------------------------------------------
/literals-and-constructors/json.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Working with JSON
10 | 			 * Description: use library from JSON.org or YUI, jQuery library
11 | 			 */
12 | 
13 | 			// an input JSON string
14 | 			var jstr = '{"mykey": "my value"}';
15 | 
16 | 			// antipattern
17 | 			var data = eval('(' + jstr + ')');
18 | 
19 | 
20 | 			// preferred
21 | 			// JSON.org library
22 | 			var data = JSON.parse(jstr);
23 | 			console.log(data.mykey); // "my value"
24 | 
25 | 
26 | 			// References
27 | 			// http://shop.oreilly.com/product/9780596806767.do
28 | 		</script>
29 | 	</body>
30 | </html>


--------------------------------------------------------------------------------
/literals-and-constructors/object-literal.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Object literal
10 | 			 * Description: use the simpler and reliable object literal instead of new Object();
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			var car = new Object();
15 | 			car.goes = "far";
16 | 
17 | 
18 | 			// preferred
19 | 			var car = {goes:"far"};
20 | 
21 | 
22 | 			// References
23 | 			// http://shop.oreilly.com/product/9780596806767.do
24 | 		</script>
25 | 	</body>
26 | </html>


--------------------------------------------------------------------------------
/literals-and-constructors/primitive-wrappers.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Primitive Wrappers
10 | 			 * Description: JavaScript has 3 primitive wrapper objects: number, string, boolean
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			// with wrappers
15 | 			var s = new String("my string");
16 | 			var n = new Number(101);
17 | 			var b = new Boolean(true);
18 | 
19 | 
20 | 			// preferred
21 | 			// without wrappers
22 | 			var s = "my string";
23 | 			var n = 101;
24 | 			var b = true;
25 | 
26 | 			/*
27 | 			 only use primitive wrappers when you want to augment the value and persist state
28 | 			 */
29 | 
30 | 			// primitive string
31 | 			var greet = "Hello there";
32 | 			// primitive is converted to an object
33 | 			// in order to use the split() method
34 | 			greet.split(' ')[0]; // "Hello"
35 | 			// attemting to augment a primitive is not an error
36 | 			greet.smile = true;
37 | 			// but it doesn't actually work
38 | 			console.log(typeof greet.smile); // "undefined"
39 | 
40 | 			// primitive wrapper
41 | 			var greet = new String("Hello there");
42 | 			// split() method is called directly on the object
43 | 			greet.split(' ')[0]; // "Hello"
44 | 			// augment the object
45 | 			greet.smile = true;
46 | 			console.log(typeof greet.smile); // "boolean"
47 | 
48 | 
49 | 			// References
50 | 			// http://shop.oreilly.com/product/9780596806767.do
51 | 		</script>
52 | 	</body>
53 | </html>


--------------------------------------------------------------------------------
/literals-and-constructors/regular-expression-literal.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Regular Expression Literal
10 | 			 * Description: the regular expression literal notation is shorter
11 | 			 */
12 | 
13 | 			// antipattern
14 | 			var re = new RegExp("\\\\", "gm");
15 | 
16 | 
17 | 			// preferred
18 | 			var re = /\\/gm;
19 | 
20 | 
21 | 			// References
22 | 			// http://shop.oreilly.com/product/9780596806767.do
23 | 		</script>
24 | 	</body>
25 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/chaining.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Chaining Pattern
10 | 			 Description: it enables you to call methods on an object one after the other
11 | 			 */
12 | 
13 | 			var obj = {
14 | 				value:1,
15 | 				increment:function () {
16 | 					this.value += 1;
17 | 					return this;
18 | 				},
19 | 				add:function (v) {
20 | 					this.value += v;
21 | 					return this;
22 | 				},
23 | 				shout:function () {
24 | 					console.log(this.value);
25 | 				}
26 | 			};
27 | 
28 | 			// chain method calls
29 | 			obj.increment().add(3).shout(); // 5
30 | 
31 | 			// as opposed to calling them one by one
32 | 			// obj.increment();
33 | 			// obj.add(3);
34 | 			// obj.shout();
35 | 		</script>
36 | 	</body>
37 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/declaring-dependencies.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Declaring Dependencies
10 | 			 Description: it's good to declare the modules your code relies on at the top
11 | 			 */
12 | 
13 | 			var myFunction = function () {
14 | 				// dependencies
15 | 				var event = YAHOO.util.Event,
16 | 						dom = YAHOO.util.dom;
17 | 
18 | 				// use event and dom variables
19 | 				// for the rest of the function...
20 | 			};
21 | 		</script>
22 | 	</body>
23 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/inheritence.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | * One base class is created.
  3 | * Another child class created extending the base class to demonstrate the inheritance.
  4 | * One subclass created extending the second class to demonstrate the multilevel inheritance.
  5 | * All the classes are having static, non-static, private and public members.
  6 | * In the test client we are demonstrating some of these features.
  7 | * To test the other features, additional caller codes has to be added.
  8 | -->
  9 | <!doctype html>
 10 | <html lang="en">
 11 | <head>
 12 | <title>JavaScript Patterns - Inheritance</title>
 13 | <meta charset="utf-8">
 14 | </head>
 15 | 
 16 | <script>
 17 | 	//Defination of top superclass
 18 | 	function topSuperClass() {
 19 | 
 20 | 	}
 21 | 	//static members
 22 | 	topSuperClass.staticProperty = function() {
 23 | 		//static private members
 24 | 		var TSCstaticPrivateVariable = "I am static private variable of top super class";
 25 | 		var TSCstaticPrivateMethod = function() {
 26 | 			return "I am a static private method of top super class";
 27 | 		};
 28 | 		return {
 29 | 			//static public members
 30 | 			TSCstaticPublicVariable : "I am static public variable of top super class",
 31 | 			TSCstaticPublicMethod : function() {
 32 | 				return "I am a static public method of top super class";
 33 | 			}
 34 | 		};
 35 | 	}();
 36 | 
 37 | 	//non static members
 38 | 	topSuperClass.prototype.TSCnonStaticProperty = function() {
 39 | 		//non static private members
 40 | 		var TSCnonStaticPrivateVariable = "I am non static private variable of top super class";
 41 | 		var TSCnonStaticPrivateMethod = function() {
 42 | 			return "I am a non static private method of top super class";
 43 | 		};
 44 | 		return {
 45 | 			//non static public members
 46 | 			TSCnonStaticPublicVariable : "I am non static public variable of top super class",
 47 | 			TSCnonStaticPublicMethod : function() {
 48 | 				alert(TSCnonStaticPrivateMethod());// accessing the private member inside class
 49 | 				return "I am a non static public method of top super class";
 50 | 			}
 51 | 		};
 52 | 	}();
 53 | 
 54 | 	//Defination of superclass
 55 | 	function superClass() {
 56 | 	}
 57 | 	//inheritance declaration
 58 | 	superClass.prototype = new topSuperClass();
 59 | 
 60 | 	//static members
 61 | 	superClass.staticProperty = function() {
 62 | 		//static private members
 63 | 		var SCstaticPrivateVariable = "I am static private variable of super class";
 64 | 		var SCstaticPrivateMethod = function() {
 65 | 			return "I am a static private method of super class";
 66 | 		};
 67 | 		return {
 68 | 			//static public members
 69 | 			SCstaticPublicVariable : "I am static public variable of super class",
 70 | 			SCstaticPublicMethod : function() {
 71 | 				return "I am a static public method of super class";
 72 | 			}
 73 | 		};
 74 | 	}();
 75 | 
 76 | 	//non static members
 77 | 	superClass.prototype.SCnonStaticProperty = function() {
 78 | 		//non static private members
 79 | 		var SCnonStaticPrivateVariable = "I am non static private variable of super class";
 80 | 		var SCnonStaticPrivateMethod = function() {
 81 | 			return "I am a non static private method of super class";
 82 | 		};
 83 | 		return {
 84 | 			//non static public members
 85 | 			SCnonStaticPublicVariable : "I am non static public variable of super class",
 86 | 			SCnonStaticPublicMethod : function() {
 87 | 				return "I am a non static public method of super class";
 88 | 			}
 89 | 		};
 90 | 	}();
 91 | 
 92 | 	//Defination of subclass
 93 | 	function subClass() {
 94 | 	}
 95 | 	//inheritance Declaration
 96 | 	//subClass.prototype = new topSuperClass();
 97 | 	subClass.prototype = new superClass();
 98 | 
 99 | 	//static members
100 | 	subClass.staticProperty = function() {
101 | 		//static private members
102 | 		var SBCstaticPrivateVariable = "I am static private variable of sub class";
103 | 		var SBCstaticPrivateMethod = function() {
104 | 			return "I am a static private method of sub class";
105 | 		};
106 | 		return {
107 | 			//static public members
108 | 			SBCstaticPublicVariable : "I am static public variable of sub class",
109 | 			SBCstaticPublicMethod : function() {
110 | 				return "I am a static public method of sub class";
111 | 			}
112 | 		};
113 | 	}();
114 | 
115 | 	//non static members
116 | 	subClass.prototype.SBCnonStaticProperty = function() {
117 | 		//non static private members
118 | 		var SBCnonStaticPrivateVariable = "I am non static private variable of sub class";
119 | 		var SBCnonStaticprivateMethod = function() {
120 | 			return "I am a non static private method of sub class";
121 | 		};
122 | 		return {
123 | 			//non static public members
124 | 			SBCnonStaticPublicVariable : "I am non static public variable of sub class",
125 | 			SBCnonStaticPublicMethod : function() {
126 | 				return "I am a non static public method of sub class";
127 | 			}
128 | 		};
129 | 	}();
130 | 
131 | 	//Inheritence Defination
132 | 	//superClass.prototype = new topSuperClass();
133 | 	//subClass.prototype = new superClass();
134 | 
135 | 	var test = function() {
136 | 
137 | 		//Demonstration of base class member access
138 | 		var topSuperClassObj = new topSuperClass();// Creation of object of the base class
139 | 
140 | 		//Calling the private static members with class refferene
141 | 		//alert(topSuperClass.staticProperty.TSCstaticPrivateVariable);//Not visible outside class
142 | 		//alert(topSuperClass.staticProperty.TSCstaticPrivateMethod());//Not visible outside class
143 | 
144 | 		//Accessing the public static members
145 | 		//alert(topSuperClass.staticProperty.TSCstaticPublicVariable);//Visible as public member variable 
146 | 		//alert(topSuperClass.staticProperty.TSCstaticPublicMethod());//Visible as public method
147 | 
148 | 		//Calling the private non static mebbers with object refferene
149 | 		//alert(topSuperClassObj.TSCnonStaticProperty.TSCnonStaticPrivateVariable);//Not visible outside class
150 | 		//alert(topSuperClassObj.TSCnonStaticProperty.TSCnonStaticPrivateMethod());//Not visible outside class
151 | 
152 | 		//Calling the public non static mebbers with object refferene
153 | 		//alert(topSuperClassObj.TSCnonStaticProperty.TSCnonStaticPublicVariable);//visible outside class
154 | 		alert(topSuperClassObj.TSCnonStaticProperty.TSCnonStaticPublicMethod());//visible outside class
155 | 
156 | 		//How to access super class methods using subclass reference
157 | 		//var subClassObj = new subClass();
158 | 		//alert(subClassObj.SBCnonStaticProperty.SBCnonStaticPublicMethod());
159 | 		//alert(subClass.staticProperty.SBCstaticPublicMethod());
160 | 
161 | 		//alert(subClassObj.SCnonStaticProperty.SCnonStaticPublicMethod());
162 | 		//alert(superClass.staticProperty.SCstaticPublicMethod());
163 | 
164 | 		//alert(subClassObj.TSCnonStaticProperty.TSCnonStaticPublicMethod());
165 | 		//alert(topSuperClass.staticProperty.TSCstaticPublicMethod());
166 | 
167 | 	}
168 | </script>
169 | 
170 | <body>
171 | 	<h1 align="center">JAVASCRIP INHERITANCE</h1>
172 | 	<p align="center">
173 | 		<input type="button" value="Test" onclick="test()">
174 | 	</p>
175 | 
176 | </body>
177 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Module Pattern
 10 | 			 Description: all the methods are kept private and you only expose those that you decide at the end
 11 | 			 */
 12 | 
 13 | 			var MYAPP = MYAPP || {};
 14 | 
 15 | 			MYAPP.namespace = function (ns_string) {
 16 | 				var parts = ns_string.split('.'),
 17 | 						parent = MYAPP,
 18 | 						i;
 19 | 
 20 | 				// strip redundant leading global
 21 | 				if (parts[0] === "MYAPP") {
 22 | 					parts = parts.slice(1);
 23 | 				}
 24 | 
 25 | 				for (i = 0; i < parts.length; i += 1) {
 26 | 					// create a property if it doesn't exist
 27 | 					if (typeof parent[parts[i]] === "undefined") {
 28 | 						parent[parts[i]] = {};
 29 | 					}
 30 | 					parent = parent[parts[i]];
 31 | 				}
 32 | 				return parent;
 33 | 			};
 34 | 
 35 | 			MYAPP.namespace('MYAPP.utilities.Array');
 36 | 
 37 | 			MYAPP.utilities.array = (function () {
 38 | 				// private properties
 39 | 				var array_string = "[object Array]",
 40 | 						ops = Object.prototype.toString,
 41 | 
 42 | 					// private methods
 43 | 						inArray = function (haystack, needle) {
 44 | 							for (var i = 0, max = haystack.length; i < max; i += 1) {
 45 | 								if (haystack[i] === needle) {
 46 | 									return i;
 47 | 								}
 48 | 							}
 49 | 							return -1;
 50 | 						},
 51 | 						isArray = function (a) {
 52 | 							return ops.call(a) === array_string;
 53 | 						};
 54 | 				// end var
 55 | 
 56 | 				// revealing public API
 57 | 				return {
 58 | 					isArray:isArray,
 59 | 					indexOf:inArray
 60 | 				};
 61 | 			}());
 62 | 
 63 | 
 64 | 			// Modules That Create Constructors
 65 | 
 66 | 			var MYAPP = MYAPP || {};
 67 | 
 68 | 			MYAPP.namespace = function (ns_string) {
 69 | 				var parts = ns_string.split('.'),
 70 | 						parent = MYAPP,
 71 | 						i;
 72 | 
 73 | 				// strip redundant leading global
 74 | 				if (parts[0] === "MYAPP") {
 75 | 					parts = parts.slice(1);
 76 | 				}
 77 | 
 78 | 				for (i = 0; i < parts.length; i += 1) {
 79 | 					// create a property if it doesn't exist
 80 | 					if (typeof parent[parts[i]] === "undefined") {
 81 | 						parent[parts[i]] = {};
 82 | 					}
 83 | 					parent = parent[parts[i]];
 84 | 				}
 85 | 				return parent;
 86 | 			};
 87 | 
 88 | 			MYAPP.namespace('MYAPP.utilities.Array');
 89 | 
 90 | 			MYAPP.utilities.Array = (function () {
 91 | 				// dependencies
 92 | 				var uobj = MYAPP.utilities.object,
 93 | 						ulang = MYAPP.utilities.lang,
 94 | 
 95 | 					// private properties and methods...
 96 | 						Constr;
 97 | 
 98 | 				// end var
 99 | 				// optionally one-time init procedures
100 | 				// ...
101 | 
102 | 				// public API -- constructor
103 | 				Constr = function (o) {
104 | 					this.elements = this.toArray(o);
105 | 				};
106 | 				// public API -- prototype
107 | 				Constr.prototype = {
108 | 					constructor:MYAPP.utilities.Array,
109 | 					version:"2.0",
110 | 					toArray:function (obj) {
111 | 						for (var i = 0, a = [], len = obj.length; i < len; i += 1) {
112 | 							a[i] = obj[i];
113 | 						}
114 | 						return a;
115 | 					}
116 | 				};
117 | 
118 | 				// return the constructor
119 | 				// to be assigned to the new namespace
120 | 				return Constr;
121 | 			}());
122 | 
123 | 			var arr = new MYAPP.utilities.Array(obj);
124 | 		</script>
125 | 	</body>
126 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Module Pattern
10 | 			 Description: all the methods are kept private and you only expose those that you decide at the end
11 | 			 */
12 | 			
13 | 			// create a namespace
14 | 			YAHOO.namespace("myProject");
15 | 
16 | 
17 | 
18 | 			YAHOO.myProject.myModule = function () {
19 | 
20 | 				//"private" variables:
21 | 				var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";
22 | 				
23 | 				//"private" method:
24 | 				var myPrivateMethod = function () {
25 | 					YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
26 | 				}
27 | 
28 | 				//return public methods
29 | 				return  {
30 | 					myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
31 | 					myPublicMethod: function () {
32 | 						YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
33 | 
34 | 						//Within myProject, I can access "private" vars and methods:
35 | 						YAHOO.log(myPrivateVar);
36 | 						YAHOO.log(myPrivateMethod());
37 | 
38 | 						//The native scope of myPublicMethod is myProject; we can
39 | 						//access public members using "this":
40 | 						YAHOO.log(this.myPublicProperty);
41 | 					}
42 | 				};
43 | 
44 | 			}(); // the parens here cause the anonymous function to execute and return
45 | 
46 | 			
47 | 			// Reference
48 | 			// http://yuiblog.com/blog/2007/06/12/module-pattern/
49 | 			
50 | 		</script>
51 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module3-augmentation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Module Pattern - Augmentation
10 | 			 Description: This pattern import modules, and add properties, then export it.  It has adventage for developing large applications.
11 | 			 */
12 | 			
13 | 			var MODULE = (function (my) {
14 | 				my.anotherMethod = function () {
15 | 					// added method...
16 | 				};
17 | 
18 | 				return my;
19 | 			}(MODULE));
20 | 
21 | 			
22 | 			// Reference
23 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
24 | 			
25 | 		</script>
26 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module4-loose-augmentation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Module Pattern - loose Augmentation
10 | 			 Description: This pattern import modules, and add properties, then export it.  It has adventage for developing large applications.
11 | 			 */
12 | 			
13 | 			var MODULE = (function (my) {
14 | 				my.anotherMethod = function () {
15 | 					// added method...
16 | 				};
17 | 
18 | 				return my;
19 | 			}(MODULE || {})); // adding a default object
20 | 
21 | 			
22 | 			// Reference
23 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
24 | 			
25 | 		</script>
26 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module5-tight-augmentation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Module Pattern - Tight Augmentation
10 | 			 Description: This pattern import modules, and add properties, then export it.  It has adventage for developing large applications.  And also have the authorities to old module method, and override a new one.
11 | 			 */
12 | 			
13 | 			var MODULE = (function (my) {
14 | 				var old_moduleMethod = my.moduleMethod;
15 | 
16 | 				my.moduleMethod = function () {
17 | 					// method override, has access to old through old_moduleMethod...
18 | 				};
19 | 
20 | 				return my;
21 | 			}(MODULE));
22 | 
23 | 			
24 | 			// Reference
25 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
26 | 			
27 | 		</script>
28 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module6-clone-inheritance.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Module Pattern - clone and inheritance Augmentation
10 | 			 Description: This pattern import modules, and add properties, then export it.  It has adventage for developing large applications.  And the new module object will inheritance the old one.
11 | 			 */
12 | 			var MODULE_TWO = (function (old) {
13 | 				var my = {},
14 | 					key;
15 | 
16 | 				// let my object inherience property
17 | 				for (key in old) {
18 | 					if (old.hasOwnProperty(key)) {
19 | 						my[key] = old[key];
20 | 					}
21 | 				}
22 | 
23 | 				var super_moduleMethod = old.moduleMethod;
24 | 				my.moduleMethod = function () {
25 | 					// override method on the clone, access to super through super_moduleMethod
26 | 				};
27 | 
28 | 				return my;
29 | 			}(MODULE));
30 | 
31 | 			
32 | 			// Reference
33 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
34 | 			
35 | 		</script>
36 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/module7-cross-file.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Module Pattern - cross-file private Augmentation
10 | 			 */
11 | 			
12 | 			var MODULE = (function (my) {
13 | 				var _private = my._private = my._private || {},
14 | 					_seal = my._seal = my._seal || function () {
15 | 						delete my._private;
16 | 						delete my._seal;
17 | 						delete my._unseal;
18 | 					},
19 | 					_unseal = my._unseal = my._unseal || function () {
20 | 						my._private = _private;
21 | 						my._seal = _seal;
22 | 						my._unseal = _unseal;
23 | 					};
24 | 
25 | 				// permanent access to _private, _seal, and _unseal
26 | 
27 | 				return my;
28 | 			}(MODULE || {}));
29 | 
30 | 			
31 | 			// Reference
32 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
33 | 			
34 | 		</script>
35 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/namespace.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Namespace Pattern
10 | 			 Description: namespaces help reduce the number of globals required and avoid naming collisions or excessive name prefixing
11 | 			 */
12 | 
13 | 			// unsafe
14 | 			var MYAPP = {};
15 | 			// better
16 | 			if (typeof MYAPP === "undefined") {
17 | 				var MYAPP = {};
18 | 			}
19 | 			// or shorter
20 | 			var MYAPP = MYAPP || {};
21 | 
22 | 			MYAPP.namespace = function (ns_string) {
23 | 				var parts = ns_string.split('.'),
24 | 						parent = MYAPP,
25 | 						i;
26 | 
27 | 				// strip redundant leading global
28 | 				if (parts[0] === "MYAPP") {
29 | 					parts = parts.slice(1);
30 | 				}
31 | 
32 | 				for (i = 0; i < parts.length; i += 1) {
33 | 					// create a property if it doesn't exist
34 | 					if (typeof parent[parts[i]] === "undefined") {
35 | 						parent[parts[i]] = {};
36 | 					}
37 | 					parent = parent[parts[i]];
38 | 				}
39 | 				return parent;
40 | 			};
41 | 
42 | 			// assign returned value to a local var
43 | 			var module2 = MYAPP.namespace('MYAPP.modules.module2');
44 | 			console.log(module2 === MYAPP.modules.module2); // true
45 | 
46 | 			// skip initial `MYAPP`
47 | 			MYAPP.namespace('modules.module51');
48 | 
49 | 			// long namespace
50 | 			MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property');
51 | 		</script>
52 | 	</body>
53 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/object-constants.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Object Constants
10 | 			 Description: an implementation of a constant object provides set, isDefined and get methods
11 | 			 */
12 | 
13 | 			var constant = (function () {
14 | 				var constants = {},
15 | 						ownProp = Object.prototype.hasOwnProperty,
16 | 						allowed = {
17 | 							string:1,
18 | 							number:1,
19 | 							boolean:1
20 | 						},
21 | 						prefix = (Math.random() + "_").slice(2);
22 | 				return {
23 | 					set:function (name, value) {
24 | 						if (this.isDefined(name)) {
25 | 							return false;
26 | 						}
27 | 						if (!ownProp.call(allowed, typeof value)) {
28 | 							return false;
29 | 						}
30 | 						constants[prefix + name] = value;
31 | 						return true;
32 | 					},
33 | 					isDefined:function (name) {
34 | 						return ownProp.call(constants, prefix + name);
35 | 					},
36 | 					get:function (name) {
37 | 						if (this.isDefined(name)) {
38 | 							return constants[prefix + name];
39 | 						}
40 | 						return null;
41 | 					}
42 | 				};
43 | 			}());
44 | 
45 | 			// check if defined
46 | 			console.log(constant.isDefined("maxwidth")); // false
47 | 
48 | 			// define
49 | 			console.log(constant.set("maxwidth", 480)); // true
50 | 
51 | 			// check again
52 | 			console.log(constant.isDefined("maxwidth")); // true
53 | 
54 | 			// attempt to redefine
55 | 			console.log(constant.set("maxwidth", 320)); // false
56 | 
57 | 			// is the value still intact?
58 | 			console.log(constant.get("maxwidth")); // 480
59 | 		</script>
60 | 	</body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/object-creation-patterns/private-properties-and-methods.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Private Properties and Methods
10 | 			 Description: JavaScript doesn't have special syntax for private members, you can implement them using a closure
11 | 			 */
12 | 
13 | 			function Gadget() {
14 | 				// private member
15 | 				var name = 'iPod';
16 | 				// privileged function
17 | 				this.getName = function () {
18 | 					return name;
19 | 				};
20 | 			}
21 | 			var toy = new Gadget();
22 | 
23 | 			// `name` is undefined, it's private
24 | 			console.log(toy.name); // undefined
25 | 
26 | 			// public method has access to `name`
27 | 			console.log(toy.getName()); // "iPod"
28 | 
29 | 			// this will be the object
30 | 			var bob = (function () {
31 | 				// private members
32 | 				var name = "Bob";
33 | 
34 | 				// implement the public interface
35 | 				var person = {
36 | 					// public method
37 | 					getName:function () {
38 | 						return name;
39 | 					}
40 | 				};
41 | 				
42 | 				return person;
43 | 			})();
44 | 			
45 | 			console.log(bob.getName()); // "Bob"
46 | 		</script>
47 | 	</body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/object-creation-patterns/revelation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Revelation Pattern
10 | 			 Description: it is about having private methods, which you also expose as public methods
11 | 			 */
12 | 
13 | 			var myarray;
14 | 
15 | 			(function () {
16 | 
17 | 				var astr = "[object Array]",
18 | 						toString = Object.prototype.toString;
19 | 
20 | 				function isArray(a) {
21 | 					return toString.call(a) === astr;
22 | 				}
23 | 
24 | 				function indexOf(haystack, needle) {
25 | 					var i = 0,
26 | 							max = haystack.length;
27 | 					for (; i < max; i += 1) {
28 | 						if (haystack[i] === needle) {
29 | 							return i;
30 | 						}
31 | 					}
32 | 					return -1;
33 | 				}
34 | 
35 | 				myarray = {
36 | 					isArray:isArray,
37 | 					indexOf:indexOf,
38 | 					inArray:indexOf
39 | 				};
40 | 			}());
41 | 
42 | 			console.log(myarray.isArray([1, 2])); // true
43 | 			console.log(myarray.isArray({0:1})); // false
44 | 			console.log(myarray.indexOf(["a", "b", "z"], "z")); // 2
45 | 			console.log(myarray.inArray(["a", "b", "z"], "z")); // 2
46 | 
47 | 			myarray.indexOf = null;
48 | 			console.log(myarray.inArray(["a", "b", "z"], "z")); // 2
49 | 		</script>
50 | 	</body>
51 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/sandbox.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Sandbox Pattern
 10 | 			 Description: it provides an environment for the modules to work without affecting other modules and their personal sandboxes
 11 | 			 */
 12 | 
 13 | 			function Sandbox() {
 14 | 				// turning arguments into an array
 15 | 				var args = Array.prototype.slice.call(arguments),
 16 | 					// the last argument is the callback
 17 | 						callback = args.pop(),
 18 | 					// modules can be passed as an array or as individual parameters
 19 | 						modules = (args[0] && typeof args[0] === "string") ? args : args[0],
 20 | 						i;
 21 | 
 22 | 				// make sure the function is called
 23 | 				// as a constructor
 24 | 				if (!(this instanceof Sandbox)) {
 25 | 					return new Sandbox(modules, callback);
 26 | 				}
 27 | 
 28 | 				// add properties to `this` as needed:
 29 | 				this.a = 1;
 30 | 				this.b = 2;
 31 | 
 32 | 				// now add modules to the core `this` object
 33 | 				// no modules or "*" both mean "use all modules"
 34 | 				if (!modules || modules == '*') {
 35 | 					modules = [];
 36 | 					for (i in Sandbox.modules) {
 37 | 						if (Sandbox.modules.hasOwnProperty(i)) {
 38 | 							modules.push(i);
 39 | 						}
 40 | 					}
 41 | 				}
 42 | 
 43 | 				// initialize the required modules
 44 | 				for (i = 0; i < modules.length; i += 1) {
 45 | 					Sandbox.modules[modules[i]](this);
 46 | 				}
 47 | 
 48 | 				// call the callback
 49 | 				callback(this);
 50 | 			}
 51 | 
 52 | 			// any prototype properties as needed
 53 | 			Sandbox.prototype = {
 54 | 				name:"My Application",
 55 | 				version:"1.0",
 56 | 				getName:function () {
 57 | 					return this.name;
 58 | 				}
 59 | 			};
 60 | 
 61 | 			Sandbox.modules = {};
 62 | 
 63 | 			Sandbox.modules.dom = function (box) {
 64 | 				box.getElement = function () {
 65 | 				};
 66 | 				box.getStyle = function () {
 67 | 				};
 68 | 				box.foo = "bar";
 69 | 			};
 70 | 
 71 | 			Sandbox.modules.event = function (box) {
 72 | 				// access to the Sandbox prototype if needed:
 73 | 				// box.constructor.prototype.m = "mmm";
 74 | 				box.attachEvent = function () {
 75 | 				};
 76 | 				box.detachEvent = function () {
 77 | 				};
 78 | 			};
 79 | 
 80 | 			Sandbox.modules.ajax = function (box) {
 81 | 				box.makeRequest = function () {
 82 | 				};
 83 | 				box.getResponse = function () {
 84 | 				};
 85 | 			};
 86 | 
 87 | 
 88 | 			// how to use
 89 | 			Sandbox(['ajax', 'event'], function (box) {
 90 | 				// console.log(box);
 91 | 			});
 92 | 
 93 | 			Sandbox('ajax', 'dom', function (box) {
 94 | 				// console.log(box);
 95 | 			});
 96 | 
 97 | 			Sandbox('*', function (box) {
 98 | 				// console.log(box);
 99 | 			});
100 | 		</script>
101 | 	</body>
102 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/static-members.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>JavaScript Patterns</title>
  5 | 		<meta charset="utf-8">
  6 | 	</head>
  7 | 	<body>
  8 | 		<script>
  9 | 			/* Title: Public and Private Static Members
 10 | 			 Description:
 11 | 			 Public Static Members - accessible outside the constructor
 12 | 			 Private Static Members - shared by all the objects with the same constructor function and not accessible outside the constructor
 13 | 			 */
 14 | 
 15 | 			// Public Static Members
 16 | 
 17 | 			// constructor
 18 | 			var Gadget = function () {
 19 | 			};
 20 | 
 21 | 			// a static method
 22 | 			Gadget.isShiny = function () {
 23 | 				return "you bet";
 24 | 			};
 25 | 
 26 | 			// a normal method added to the prototype
 27 | 			Gadget.prototype.setPrice = function (price) {
 28 | 				this.price = price;
 29 | 			};
 30 | 
 31 | 			// calling a static method
 32 | 			console.log(Gadget.isShiny()); // "you bet"
 33 | 
 34 | 			// creating an instance and calling a method
 35 | 			var iphone = new Gadget();
 36 | 			iphone.setPrice(500);
 37 | 
 38 | 			console.log(typeof Gadget.setPrice); // "undefined"
 39 | 			console.log(typeof iphone.isShiny); // "undefined"
 40 | 
 41 | 			Gadget.prototype.isShiny = Gadget.isShiny;
 42 | 			console.log(iphone.isShiny()); // "you bet"
 43 | 
 44 | 
 45 | 			// constructor
 46 | 			var Gadget = function (price) {
 47 | 				this.price = price;
 48 | 			};
 49 | 
 50 | 			// a static method
 51 | 			Gadget.isShiny = function () {
 52 | 
 53 | 				// this always works
 54 | 				var msg = "you bet";
 55 | 
 56 | 				if (this instanceof Gadget) {
 57 | 					// this only works if called non-statically
 58 | 					msg += ", it costs $" + this.price + '!';
 59 | 				}
 60 | 
 61 | 				return msg;
 62 | 			};
 63 | 
 64 | 			// a normal method added to the prototype
 65 | 			Gadget.prototype.isShiny = function () {
 66 | 				return Gadget.isShiny.call(this);
 67 | 			};
 68 | 
 69 | 			console.log(Gadget.isShiny()); // "you bet"
 70 | 
 71 | 			var a = new Gadget('499.99');
 72 | 			console.log(a.isShiny()); // "you bet, it costs $499.99!"
 73 | 
 74 | 
 75 | 			// Private Static Members
 76 | 
 77 | 			// method 1
 78 | 			var Gadget = (function () {
 79 | 
 80 | 				// static variable/property
 81 | 				var counter = 0;
 82 | 
 83 | 				// returning the new implementation
 84 | 				// of the constructor
 85 | 				return function () {
 86 | 					console.log(counter += 1);
 87 | 				};
 88 | 			}()); // execute immediately
 89 | 
 90 | 			var g1 = new Gadget(); // logs 1
 91 | 			var g2 = new Gadget(); // logs 2
 92 | 			var g3 = new Gadget(); // logs 3
 93 | 
 94 | 
 95 | 			// method 2
 96 | 			var Gadget = (function () {
 97 | 
 98 | 				// static variable/property
 99 | 				var counter = 0,
100 | 						NewGadget;
101 | 
102 | 				// this will become the
103 | 				// new constructor implementation
104 | 				NewGadget = function () {
105 | 					counter += 1;
106 | 				};
107 | 
108 | 				// a priviledged method
109 | 				NewGadget.prototype.getLastId = function () {
110 | 					return counter;
111 | 				};
112 | 
113 | 				// overwrite the constructor
114 | 				return NewGadget;
115 | 
116 | 			}()); // execute immediately
117 | 
118 | 			var iphone = new Gadget();
119 | 			iphone.getLastId(); // 1
120 | 			var ipod = new Gadget();
121 | 			ipod.getLastId(); // 2
122 | 			var ipad = new Gadget();
123 | 			ipad.getLastId(); // 3
124 | 		</script>
125 | 	</body>
126 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/sub-module.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: Sub Module Pattern 
10 | 			 Description: create a sub module.
11 | 			 */
12 | 			
13 | 			MODULE.sub = (function () {
14 | 				var my = {};
15 | 				// ...
16 | 
17 | 				return my;
18 | 			}());
19 | 
20 | 			
21 | 			// Reference
22 | 			// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
23 | 			
24 | 		</script>
25 | </html>


--------------------------------------------------------------------------------
/object-creation-patterns/sugar-method.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>JavaScript Patterns</title>
 5 | 		<meta charset="utf-8">
 6 | 	</head>
 7 | 	<body>
 8 | 		<script>
 9 | 			/* Title: method() Method
10 | 			 Description: adding convenient functionality to a language
11 | 			 */
12 | 
13 | 			if (typeof Function.prototype.method !== "function") {
14 | 				Function.prototype.method = function (name, implementation) {
15 | 					this.prototype[name] = implementation;
16 | 					return this;
17 | 				};
18 | 			}
19 | 
20 | 			var Person = function (name) {
21 | 				this.name = name;
22 | 			}.
23 | 					method('getName',
24 | 					function () {
25 | 						return this.name;
26 | 					}).
27 | 					method('setName', function (name) {
28 | 						this.name = name;
29 | 						return this;
30 | 					});
31 | 
32 | 			var a = new Person('Adam');
33 | 			console.log(a.getName()); // 'Adam'
34 | 			console.log(a.setName('Eve').getName()); // 'Eve'
35 | 		</script>
36 | 	</body>
37 | </html>


--------------------------------------------------------------------------------