JavaScript设计模式

• 使用JavaScript框架和库过程中, 我遇到过很多感觉上'奇形怪状'的代码. 大多数情况下, 按照惯例编写代码也能够写出很多出色的功能. 但是如果不从根本上理解它们实现的方法, 就没办法完全充分发挥出它们的全部优点.
  
  
  以下是我阅读 JavaScript设计模式(Ross Harmes和Dustin Diaz合著) 后的理解:
  
  
  Getting Started
  JavaScript是一门非常灵活的语言, 完成同一个任务的编程模式可能有很多种. 例如, 我想要编写一个启动/停止的动画:
  
  
  普通的过程式编程
  
  
  function startAnimation() {...};
  function stopAnimation() {...};
  通过定义一个类
  
  
  var Anim = function() {...};
  
  
  //把两个方法定义在原型对象中
  Anim.prototype.start = function() {...};
  Anim.prototype.stop = function() {...};
  
  
  var myAnim = new Anim();
  myAnim.start();
  myAnim.stop();
  或者, 用字面量对象创建类
  
  
  var Anim = function() {...};
  
  
  Anim.prototype = {
  start: function() {...},
  stop: function() {...},
  };
  tips: 虽然这两种方法看起来很类似, 实质上有不小的差异.
  
  
  造成差异的原因是, 每个构造函数的prototype属性默认指向一个原型对象. 原型对象包含一个constructor属性, 这个属性指向它的构造函数.
  
  
  而字面量式相当于手动创建了一个新的对象, 然后把新对象赋值给了prototype属性. 由于这个新对象是人为定义的, 也没有手动给它定义constructor属性. 所以造成了第二种方式的原型对象的constructor属性没有指向它的构造函数, 而指向了Object, 这显然不是我们想要的.
  
  
  更加'面向对象'的方式
  
  
  //在JavaScript中你可以很轻易地
  //在原生的Function类中定义一个辅助函数
  Function.prototype.method = function(name, fn) {
  this.prototype[name] = fn;
  };
  
  
  var Anim = function() {...};
  Anim.method( 'start', function() {...} );
  Anim.method( 'stop', function() {...} );
  简略修改一下以上的代码, 你甚至可以链式调用方法! (在jQuery中被大量应用的技巧)
  
  
  只需要在辅助函数中返回 this:
  
  
  Function.prototype.method = function(name, fn) {
  this.prototype[name] = fn;
  return this;
  };
  
  
  var Anim = function() {...};
  Anim.method( 'start', function() {...} )
  .method( 'stop', function() {...} );