JavaScript设计模式(一)

使用JavaScript框架和库过程中, 我遇到过很多感觉上'奇形怪状'的代码. 大多数情况下, 按照惯例编写代码也能够写出很多出色的功能. 但是如果不从根本上理解它们实现的方法, 就没办法完全充分发挥出它们的全部优点.

以下是我阅读 JavaScript设计模式(Ross Harmes和Dustin Diaz合著) 后的理解:

Getting Started

JavaScript是一门非常灵活的语言, 完成同一个任务的编程模式可能有很多种. 例如, 我想要编写一个启动/停止的动画:

1. 普通的过程式编程

   function startAnimation() {...};
   function stopAnimation() {...};
   

2. 通过定义一个类

   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, 这显然不是我们想要的.

3. 更加'面向对象'的方式

   //在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() {...} );