Pro Javascript Design Patterns勘误Errata汇总（持续更新中）

结合从网上搜集的资料，现将Pro Javascript Design Patterns一书几处有错误嫌疑的地方整理出来。

1. P.28: Chapter 3： Encapsulation and Information Hiding > Fully Exposed Object  错误类型：印刷错误+计算方法错误

原代码为：

Book.prototype = {
  checkIsbn: function(isbn) {
    if(isbn == undefined || typeof isbn != 'string') {
      return false;
    }

    isbn = isbn.replace(/-/. ''); // Remove dashes.
    if(isbn.length != 10 && isbn.length != 13) {
      return false;
    }

    var sum = 0;
    if(isbn.length === 10) { // 10 digit ISBN.
      If(!isbn.match(\^\d{9}\)) { // Ensure characters 1 through 9 are digits.
        return false;
      }
	var sum = 0;
	if (isbn.length === 10) {
		console.log("checking for 10...");
		if (!isbn.match(/^\d{9}/)) {
			return false;
		}
		for ( var i = 0; i < 9; i++) {
			sum += isbn.charAt(i) * (10 - i);
		}
		var checksum = sum % 11;

		checksum = (checksum === 10) ? "X" : checksum;
		if (isbn.charAt(9) != checksum) {
			return false;
		}
	} else {
		if (!isbn.match(/^\d{12}/)) {
			return false;
		}
		for ( var i = 0; i < 12; i++) {
			sum += isbn.charAt(i) * ((i % 2 === 0) ? 1 : 3);
		}
		var checksum = sum % 10;
		if (isbn.charAt(12) != checksum) {
			return false;
		}
	}
...
};

应更正为：

Book.prototype = {
  checkIsbn: function(isbn) {
    if(isbn == undefined || typeof isbn != 'string') {
      return false;
    }

    isbn = isbn.replace(/-/g, ''); // Remove dashes.
    if(isbn.length != 10 && isbn.length != 13) {
      return false;
    }

    var sum = 0;
    if(isbn.length === 10) { // 10 digit ISBN.
      if(!isbn.match(\^\d{9}\)) { // Ensure characters 1 through 9 are digits.
        return false;
      }

    var sum = 0;
    if(isbn.length === 10) { // 10 digit ISBN.
      If(!isbn.match(\^\d{9}\)) { // Ensure characters 1 through 9 are digits.
        return false;
      }
	var sum = 0;
	if (isbn.length === 10) {
		console.log("checking for 10...");
		if (!isbn.match(/^\d{9}/)) {
			return false;
		}
		for ( var i = 0; i < 9; i++) {
			sum += isbn.charAt(i) * (10 - i);
		}
		var checksum = (11 - sum % 11) % 11;

		checksum = (checksum === 10) ? "X" : checksum;
		if (isbn.charAt(9) != checksum) {
			return false;
		}
	} else {
		if (!isbn.match(/^\d{12}/)) {
			return false;
		}
		for ( var i = 0; i < 12; i++) {
			sum += isbn.charAt(i) * ((i % 2 === 0) ? 1 : 3);
		}
		var checksum = (10 - sum % 10) % 10;
		if (isbn.charAt(12) != checksum) {
			return false;
		}
	}

...
};

关于验证ISBN号的正确计算方法，我参考了维基百科上的International Standard Book Number。这一点作者太疏忽大意了。

2. P.38: Chapter 3： Encapsulation and Information Hiding > Constants  错误类型：印刷错误+结构错误

原代码为：

var Class = (function() {
  
  // Constants (created as private static attributes).
  var UPPER_BOUND = 100;
  
  // Privileged static method.
  this.getUPPER_BOUND() {
    return UPPER_BOUND;
  }

  ...

  // Return the constructor.
  return function(constructorArgument) {
    ...
  }
})();


/* Grouping constants together. */

var Class = (function() {
  
  // Private static attributes.
  var constants = {
    UPPER_BOUND: 100,
    LOWER_BOUND: -100
  }
  
  // Privileged static method.
  this.getConstant(name) {
    return constants[name];
  }

  ...

  // Return the constructor.
  return function(constructorArgument) {
    ...
  }
})();


/* Usage. */

Class.getConstant('UPPER_BOUND');

应更正为：

var Class = (function() {
  
  // Constants (created as private static attributes).
  var UPPER_BOUND = 100;
  
  // Privileged static method.
  this.getUPPER_BOUND=function() {
    return UPPER_BOUND;
  }

  ...

  // Return the constructor.
  return function(constructorArgument) {
    ...
  }
})();


/* Grouping constants together. */

var Class = (function() {
  
  // Private static attributes.
  var constants = {
    UPPER_BOUND: 100,
    LOWER_BOUND: -100
  }
  
  // Privileged static method.
  this.getConstant=function(name) {
    return constants[name];
  }

  ...

  // Return the constructor.
  return function(constructorArgument) {
    ...
  }
})();


/* Usage. */

Class.getConstant('UPPER_BOUND');

关于此处代码的运行，有人提出并不能达到作者所提出的需求，因为即使照上面的方法更正后，由于this.getUPPER_BOUND和this.getConstant都是在自执行函数的内部运行，这里的this实际上将指向全局变量，即window。在StacksOverflow上，有人提出此讨论，众人相继给出解决办法，敬请参阅原文。

3. P.89: Chapter 6： Chaining > Using Callbacks to Retrieve Data from Chained Methods  错误类型：印刷错误+结构错误

原代码为：

// Accessor without function callbacks: returning requested data in accessors.
window.API = window.API || {};
API.prototype = function() {
  var name = 'Hello world';
  // Privileged mutator method.
  setName: function(newName) {
    name = newName;
    return this;
  },
  // Privileged accessor method.
  getName: function() {
    return name;
  }
}();

// Implementation code.
var o = new API;
console.log(o.getName()); // Displays 'Hello world'.
console.log(o.setName('Meow').getName()); // Displays 'Meow'.

// Accessor with function callbacks.
window.API2 = window.API2 || {};
API2.prototype = function() {
  var name = 'Hello world';
  // Privileged mutator method.
  setName: function(newName) {
    name = newName;
    return this;
  },
  // Privileged accessor method.
  getName: function(callback) {
    callback.call(this, name);
    return this;
  }
}();

// Implementation code.
var o2 = new API2;
o2.getName(console.log).setName('Meow').getName(console.log);
// Displays 'Hello world' and then 'Meow'.

应更正为：

// Accessor without function callbacks: returning requested data in accessors.
window.API = window.API || function(){};
API.prototype = function() {
  var name = 'Hello world';

return {
// Privileged mutator method.
  setName: function(newName) {
    name = newName;
    return this;
  },
  // Privileged accessor method.
  getName: function() {
    return name;
  }
}
}();

// Implementation code.
var o = new API;
console.log(o.getName()); // Displays 'Hello world'.
console.log(o.setName('Meow').getName()); // Displays 'Meow'.

// Accessor with function callbacks.
window.API2 = window.API2 || function(){};
API2.prototype = function() {
  var name = 'Hello world';
  return {// Privileged mutator method.
  setName: function(newName) {
    name = newName;
    return this;
  },
  // Privileged accessor method.
  getName: function(callback) {
    callback.call(this, name);
    return this;
  }
}
}();

// Implementation code.
var o2 = new API2;
o2.getName(console.log).setName('Meow').getName(console.log);
// Displays 'Hello world' and then 'Meow'.

这个问题是http://www.apress.com/9781590599082/上有人提出的。

4. P.100: Chapter 7: The Factory Pattern > XHR Factory  错误类型：印刷错误?结构错误?

原代码为：

/* SimpleHandler class. */
var SimpleHandler = function() {}; // implements AjaxHandler
SimpleHandler.prototype = {
  request: function(method, url, callback, postVars) {
  ...
  },
  createXhrObject: function() { // Factory method.
    var methods = [
      function() { return new XMLHttpRequest(); },
      function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
      function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
    ];
    
    for(var i = 0, len = methods.length; i < len; i++) {
      try {
        methods[i]();
      }
      catch(e) {
        continue;
      }
      // If we reach this point, method[i] worked.
      this.createXhrObject = methods[i]; // Memoize the method.
      return methods[i];
    }    
    // If we reach this point, none of the methods worked.
    throw new Error('SimpleHandler: Could not create an XHR object.');
  } 
};

应更正为：

/* SimpleHandler class. */
var SimpleHandler = function() {}; // implements AjaxHandler
SimpleHandler.prototype = {
  request: function(method, url, callback, postVars) {
  ...
  },
  createXhrObject: function() { // Factory method.
    var methods = [
      function() { return new XMLHttpRequest(); },
      function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
      function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
    ];
    
    for(var i = 0, len = methods.length; i < len; i++) {
      try {
        methods[i]();
      }
      catch(e) {
        continue;
      }
      // If we reach this point, method[i] worked.
      this.createXhrObject = methods[i]; // Memoize the method.
      return methods[i]();
    }    
    // If we reach this point, none of the methods worked.
    throw new Error('SimpleHandler: Could not create an XHR object.');
  } 
};

这一错误很可能是作者没有测试代码，照书中所述，createXhrObject要在第一次运行之后记住当前的运行环境中能够使用的HttpRequest对象，methods数组中的对象为函数，因此要用一个括号执行后才能得到真正的对象。

5. P.130: Chapter 9: The Composite Pattern > Form Validation  错误类型：印刷错误

原代码为：

/* Field class, abstract. */

var Field = function(id) { // implements Composite, FormItem
  this.id = id;
  this.element;
};
...
Field.prototype.save = function() {
  setCookie(this.id, this.getValue);
};

应更正为：

/* Field class, abstract. */
var Field = function(id) { // implements Composite, FormItem
  this.id = id;
  this.element;
};
...
Field.prototype.save = function() {
  setCookie(this.id, this.getValue());
};

6. P.155: Chapter 11: The Adapter Pattern > Adapting an Email API  错误类型：印刷错误

原代码为：

// dedMail application interface.
        var dedMail = (function() {
          function request(id, type, callback) {
              ...
          }
          return {
              ...
            formatMessage: function(e) {
              var e = e || window.event;
              try {
                e.preventDefault();
              } 
              catch(ex) {
                e.returnValue = false;
              }
              var targetEl = e.target || e.srcElement;
              var id = targetEl.id.toString().split('-')[1];
              dedMail.getMail(id, function(msgObject) {
                var resp = eval('('+msgObject+')');
                ...
                messagePane.innerHTML = DED.util.substitute(details, resp);
              }
          }; 
        })(); 
        
        // Set up mail implementation.
        addEvent(window, 'load', function() {
          var threads = getElementsByClass('thread', 'a');
          var messagePane = $('message-pane');
          for (var i=0, len=threads.length; formatMessage );
          }
        });

应更正为：

// dedMail application interface.

        var dedMail = (function() {
          function request(id, type, callback) {
              ...
          }
          return {
              ...
            formatMessage: function(e) {
              var e = e || window.event;
              try {
                e.preventDefault();
              } 
              catch(ex) {
                e.returnValue = false;
              }
              var targetEl = e.target || e.srcElement;
              var id = targetEl.id.toString().split('-')[1];
              dedMail.getMail(id, function(msgObject) {
                var resp = eval('('+msgObject+')');
                ...
                messagePane.innerHTML = DED.util.substitute(details, resp);
              })
            }
          }; 
        })(); 
        
        // Set up mail implementation.
        addEvent(window, 'load', function() {
          var threads = getElementsByClass('thread', 'a');
          var messagePane = $('message-pane');
          for (var i=0, len=threads.length; dedMail.formatMessage );
          }
        });

7. P.161,162,165,166: Chapter 12: The Decorator Pattern > The Structure of the Decorator   错误类型：结构错误

在多个页码处均为同一错误类型，仅举其中一处为例。P.161:

原代码为：

/* HeadlightDecorator class. */

var HeadlightDecorator = function(bicycle) { // implements Bicycle
  this.superclass.constructor(bicycle); // Call the superclass's constructor.
}
extend(HeadlightDecorator, BicycleDecorator); // Extend the superclass.
HeadlightDecorator.prototype.assemble = function() {
  return this.bicycle.assemble() + ' Attach headlight to handlebars.';
};
HeadlightDecorator.prototype.getPrice = function() {
  return this.bicycle.getPrice() + 15.00;
};

应更正为：

/* HeadlightDecorator class. */

var HeadlightDecorator = function(bicycle) { // implements Bicycle
  HeadlightDecorator.superclass.constructor.call(this, bicycle); // Call the superclass's constructor.
}
extend(HeadlightDecorator, BicycleDecorator); // Extend the superclass.
HeadlightDecorator.prototype.assemble = function() {
  return this.bicycle.assemble() + ' Attach headlight to handlebars.';
};
HeadlightDecorator.prototype.getPrice = function() {
  return this.bicycle.getPrice() + 15.00;
};

8. P.191: Chapter 13: The Flyweight Pattern > Sotring Instances for Later Reuse   错误类型：结构错误

原代码为：

			var DialogBoxManager = (function() {
				var created = [];

				return {
					displayDialogBox : function(id, header, body, footer) {
						var inUse = this.numberInUse();
						if (inUse > created.length) {
							created.push(this.createDialogBox(id));
						}
						created[i].show(header, body, footer);
					},

					createDialogBox : function(id) {
						return new DialogBox(id);
					},

					numberInUse : function() {
						var inUse = 0;
						for ( var i = 0; i < created.length; ++i) {
							console.log(created[i].state());
							if (created[i].state() == "visible") {
								inUse++;
							}
						}
						return inUse;
					}
				}
			})();

应更正为：

			var DialogBoxManager = (function() {
				var created = [];

				return {
					displayDialogBox : function(header, body, footer) {
						(this.getFirstHiddenDialogBox() || this.createDialogBox()).show(header, body, footer);
					},

					createDialogBox : function() {
						var db = new DialogBox(this.numberInUse());
						created.push(db);
						return db;
					},

					getFirstHiddenDialogBox : function() {
						for ( var i = 0; i < created.length; ++i) {
							if (created[i].state() != "visible") {
								return created[i];
							}
							continue;
						}
						return null;
					},

					numberInUse : function() {
						var inUse = 0;					
						for ( var i = 0; i < created.length; ++i) {
							if (created[i].state() == "visible") {
								inUse++;
							}
						}
						return inUse;
					}
				}
			})();

原代码中inUse > created.length是显然行不通的，inUse永远也不可能大于created.length，其判断也就失去了意义。改进后的代码将能在调用自动displayDialogBox时判断是否有隐藏的已经建立的DialogBox，如果有即用之，如果没有即调用createDialogBox创建一个新的，numberInUse在createDialogBox函数中使用。

9. P.198, P.248, P.252: Chapter 14: The Proxy Pattern > The Structure of the Proxy; Chapter 17: The Chain of Responsibility > The Structure of the Chain of Responsibility   错误类型：印刷错误

两处文字中均少了book，导致程序运行出现错误。

原代码为：

PublicLibrary.prototype = {
	findBooks : function(searchString) {
		var results = [];
		for ( var isbn in this.catalog) {
			if (!this.catalog.hasOwnProperty(isbn)) {
				continue;
			}
			if (this.catalog[isbn].getTitle().match(searchString)
					|| this.catalog[isbn].getAuthor().match(searchString)) {
				results.push(this.catalog[isbn]);
			}
		}
		return results;
	}
...
	addBook : function(newBook) {
		this.catalog[newBook.getIsbn()] = {
			book : newBook,
			available : true
		};
	}
}

应更正为：

PublicLibrary.prototype = {
	findBooks : function(searchString) {
		var results = [];
		for ( var isbn in this.catalog) {
			if (!this.catalog.hasOwnProperty(isbn)) {
				continue;
			}
			if (this.catalog[isbn].book.getTitle().match(searchString)
					|| this.catalog[isbn].book.getAuthor().match(searchString)) {
				results.push(this.catalog[isbn].book);
			}
		}
		return results;
	}
...
	addBook : function(newBook) {
		this.catalog[newBook.getIsbn()] = {
			book : newBook,
			available : true
		};
	}
}

10. P.250, P.254: Chapter 17: The Chain of Responsibility > The Structure of the Chain of Responsibility   错误类型：结构错误

原代码为：

var SciFiCatalog = function() {};// Implements Catalog
extend(SciFiCatalog , GenreCatalog);

应更正为：

var SciFiCatalog = function() {// Implements Catalog
SciFiCatalog.superclass.contructor.apply(this,arguments);
};
extend(SciFiCatalog , GenreCatalog);

Why?因为作者在本书中一直在用的extend方法是不能继承“父类”的constructor中的属性的，所以必须在“子类”的constructor中调用一遍该函数，以便“子类”继承“父类”的这些属性。

11. P.253: Chapter 17: The Chain of Responsibility > The Structure of the Chain of Responsibility   错误类型：印刷错误

原代码为：

if (found) {
	outerloop: for ( var i = 0; i != this.catalog.length; ++i) {
		var book = this.catalog[i];
		if (book.getTitle().match(searchString)
				|| book.getAuthor().match(searchString)) {
			for ( var j = 0; j != request.results.length; ++j) {
				if (request.results[j].getIsbn() === book.getIsbn()) {
					continue outerloop;
				}
			}
			request.results.push(book);
		}
	}
}

应更正为：

if (found) {
	outerloop: for ( var i = 0; i != this.catalog.length; ++i) {
		var book = this.catalog[i];
		if (book.getTitle().match( request.searchString)
				|| book.getAuthor().match( request.searchString)) {
			for ( var j = 0; j != request.results.length; ++j) {
				if (request.results[j].getIsbn() === book.getIsbn()) {
					continue outerloop;
				}
			}
			request.results.push(book);
		}
	}
}

这里的searchString前面显然是少了request，不然就是一个未定义的变量。

12. P.260: Chapter 17: The Chain of Responsibility > Adding Tags to Photos   错误类型：结构错误

原代码为：

DynamicGallery.prototype = {
  ...
  getAllLeaves: function() {
    var leaves = [];
    for(var node, i = 0; node = this.getChild(i); i++) {
      leaves.concat(node.getAllLeaves());
    }
    return leaves;
  },
...
    for(var results = [], node, i = 0; node = this.getChild(i); i++) {
      results.concat(node.getPhotosWithTag(tag));
    }
    return results;
  },
  ...
};

应更正为：

DynamicGallery.prototype = {
  ...
  getAllLeaves: function() {
    var leaves = [];
    for(var node, i = 0; node = this.getChild(i); i++) {
      leaves=leaves.concat(node.getAllLeaves());
    }
    return leaves;
  },
...
    for(var results = [], node, i = 0; node = this.getChild(i); i++) {
      results=results.concat(node.getPhotosWithTag(tag));
    }
    return results;
  },
  ...
};

Javascript中的Array.concat是在不改变原数组的情况下返回一个新数组。

本文来自pinocchioatbeijing（专注前端技术 追求至美生活 以文会友）在博客园的博客，文章URL：http://www.cnblogs.com/pinocchioatbeijing/archive/2012/02/01/2334126.html，转载请注明，并欢迎大家不吝赐教。