使用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() {...} );