added documentation and reference to code reuse patterns

chuanxshi · chuanxshi · commit fa1caed239c9 · 2012-01-30T02:01:57.000+08:00
diff --git a/code-reuse-patterns/borrowing-methods.html b/code-reuse-patterns/borrowing-methods.html
@@ -7,7 +7,7 @@
 <body>
 <script>
 /* Title: Borrowing Methods
-   Description: generally a pattern that should be avoided unless one is more comfortable with class than prototype
+   Description: reuse one or two methods of an existing object without forming a parent-child relationship with that object
 */
 
 function f() {
@@ -38,7 +38,7 @@
 
 // passing as a callback
 var yetanother = {
-  name: "Yet another object",
+  name: 'Yet another object',
   method: function (callback) {
     return callback('Hola');
   }
@@ -55,6 +55,8 @@
 console.log(twosay('yo')); // "yo, another object"
 
 
+// ECMAScript 5 adds a method bind() to Function.prototype, making it just as easy to use as apply() and call().
+
 if (typeof Function.prototype.bind === 'undefined') {
   Function.prototype.bind = function (thisArg) {
     var fn = this,
@@ -71,6 +73,10 @@
 
 var twosay3 = one.say.bind(two, 'Enchanté');
 console.log(twosay3()); // "Enchanté, another object"
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/cp1-default.html b/code-reuse-patterns/cp1-default.html
@@ -40,6 +40,10 @@
 // Drawback 2: it doesn't enable you to pass parameters to the child constructor
 var s = new Child('Seth');
 console.log(s.say()); // "Adam"
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/cp2-rent-a-constructor.html b/code-reuse-patterns/cp2-rent-a-constructor.html
@@ -51,6 +51,10 @@
 
 var jane = new CatWings();
 console.dir(jane);
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/cp3-rent-and-set-prototype.html b/code-reuse-patterns/cp3-rent-and-set-prototype.html
@@ -36,6 +36,10 @@
 console.log(kid.say()); // "Adam"
 
 // Drawback - the parent constructor is called twice, so it could be inefficient
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/cp4-share-the-prototype.html b/code-reuse-patterns/cp4-share-the-prototype.html
@@ -35,6 +35,10 @@
 kid.name = 'Patrick';
 console.log(kid.say()); // Patrick
 console.dir(kid);
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/cp5-a-temporary-constructor.html b/code-reuse-patterns/cp5-a-temporary-constructor.html
@@ -66,7 +66,10 @@
 console.log(kid.say()); // Patrick 
 console.log(kid.constructor.name); // Child
 console.log(kid.constructor === Parent); // false
- 
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/inheritance-by-copying-properties.html b/code-reuse-patterns/inheritance-by-copying-properties.html
@@ -69,6 +69,10 @@
 
 console.log(dad.reads === kid.reads); // false
 kid.reads.paper = false;
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/klass.html b/code-reuse-patterns/klass.html
@@ -78,6 +78,81 @@
 
 console.log(clark instanceof Man); // true
 console.log(clark instanceof SuperMan); // true
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+/* Title: Classical Pattern #5 - A Temporary Constructor (a pattern that should be generally avoided)
+   Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
+*/
+
+/* Basic */
+/*function inherit(C, P) {
+  var F = function () {};
+  F.prototype = P.prototype;
+  C.prototype = new F();
+}*/
+
+/* Storing the Superclass */
+/*function inherit(C, P) {
+  var F = function () {};
+  F.prototype = P.prototype;
+  C.prototype = new F();
+  C.uber = P.prototype;
+}*/
+
+/* Resetting the Constructor Pointer */
+/*function inherit(C, P) {
+  var F = function () {};
+  F.prototype = P.prototype;
+  C.prototype = new F();
+  C.uber = P.prototype;
+  C.prototype.constructor = C;
+}*/
+
+/* in closure */
+var inherit = (function () {
+  var F = function () {};
+  return function (C, P) {
+    F.prototype = P.prototype;
+    C.prototype = new F();
+    C.uber = P.prototype;
+    C.prototype.constructor = C;
+  }
+}());
+
+function Parent(name) {
+  this.name = name || 'Adam';
+}
+
+// adding functionality to the prototype
+Parent.prototype.say = function () {
+  return this.name;
+};
+
+// child constructor
+function Child(name) {}
+
+inherit(Child, Parent);
+
+var kid = new Child(); 
+console.log(kid.name); // undefined 
+console.log(typeof kid.say); // function 
+kid.name = 'Patrick'; 
+console.log(kid.say()); // Patrick 
+console.log(kid.constructor.name); // Child
+console.log(kid.constructor === Parent); // false
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
+</script>
+</body>
+</html>
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/mix-ins.html b/code-reuse-patterns/mix-ins.html
@@ -7,7 +7,7 @@
 <body>
 <script>
 /* Title: Mix-ins
-   Description: generally a pattern that should be avoided unless one is more comfortable with class than prototype
+   Description: copy from any number of objects and mix them all into a new object
 */
 
 function mix() {
@@ -25,11 +25,16 @@
 var cake = mix(
   {eggs: 2, large: true},
   {butter: 1, salted: true},
-  {flour: "3 cups"},
-  {sugar: "sure!"}
+  {flour: '3 cups'},
+  {sugar: 'sure!'}
 );
 
 console.dir(cake);
+
+
+// reference
+// http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mixinpatternjavascript
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
diff --git a/code-reuse-patterns/prototypal-inheritance.html b/code-reuse-patterns/prototypal-inheritance.html
@@ -25,7 +25,7 @@
 var child = object(parent);
 
 // testing 
-alert(child.name); // "Papa"
+console.log(child.name); // "Papa"
 
 
 // parent constructor
@@ -43,7 +43,7 @@
 var kid = object(papa);
 // test that both the own property
 // and the prototype property were inherited
-kid.getName(); // "Adam"
+console.log(kid.getName()); // "Adam"
 
 
 // parent constructor
@@ -57,17 +57,21 @@
 };
 // inherit
 var kid = object(Person.prototype);
-typeof kid.getName; // "function", because it was in the prototype
-typeof kid.name; // "undefined", because only the prototype was inherited
+console.log(typeof kid.getName); // "function", because it was in the prototype
+console.log(typeof kid.name); // "undefined", because only the prototype was inherited
 
 
 /* Addition to ECMAScript 5 */
 var child = Object.create(parent);
 
 var child = Object.create(parent, {
-age: { value: 2 } // ECMA5 descriptor
+  age: { value: 2 } // ECMA5 descriptor
 });
-child.hasOwnProperty("age"); // true
+console.log(child.hasOwnProperty("age")); // true
+
+
+// reference
+// http://shop.oreilly.com/product/9780596806767.do
 </script>
 </body>
 </html>
