技术观点：jQuery仅仅是一个浏览器API(下)

学会使用this

通过一个简单的文本框处理库就能看出，和嵌套函数的编程方式比起来，使用prototype机制显得相当有优势，尤其是在编写复杂的程序时，这种优势显得尤为明显。下面我们就举一个常见的例子：

对于DOM文本框上的所有元素，grow和limitWarn功能被绑定到用户输入的keyup上，$(window).load则与文本绑定起来。grow用于计算文本的内容是否超出了文本框的高度，并根据文本内容动态增加文本框的高度。当文本框中的内容超出了给定阈值时，limitWarn将改变文本框的背景颜色。这里grow和limitWarm传递了三个引用（即i，elem和limitWarn/grow）。下面看看使用prototype的做法。

这里唯一的额外开销就是需要为方法绑定环境【1】，输入TextArea和prototype，然后实例化。当执行each中的方法前，会先调用一个构造函数创建一个新的对象。

现在设想一下，该项目的另外一个开发者也想在不同的环境中使用文本框。如果使用之前的函数编程方法，那么他估计得彻底重写文本框的管理代码了，但是如果使用的是TextArea prototype，那么他就基本上可以完全复用之前的代码了。

有几点需要注意一下。首先，在DialogWarnTextArea构造函数中使用this调用TextArea的构造函数时，需要确保初始化的属性值设置是正确的（即limit和$textArea）。你可以把它当成是一个super调用。

第二，在TextArea的原型中仅仅给出方法和属性的申明，在DialogWarnTextArea的原型中再给出具体的定义。这就是JavaScript开发者所说的“原型继承”，通过这种继承的方式模拟了其他编程语言的方法/属性查询过程【2】。

第三，如果在DialogWarnTextArea的原型中定义了一个limitWarn属性，那么用DialogWarnTextArea创建的对象都可以调用这个属性。

最后，如果需要改变TextArea构造函数的原型（没有参数传入），那么开发者就只能自己重新该写TextArea的代码了。

需要指出的是，有些情况下确实需要对部分代码重新编写（3个参数和limitWarn的布尔操作）,但是这些修改工作还是相对比较简单的。相比之下，如果不使用prototype，同样的功能修改可能需要在上层调用中加入grow方法，收集grow方法中传递的事件对象（作为一个事件句柄传递），并在每个文本框上添加一个循环处理。

进展缓慢

我所担心的、也正是我写这篇文章的原因——现在的开发者还没能及时地习惯使用库和结构化编程方式，他们还是沿用了以往的编程模式。随着客户端程序变得越来越复杂，这种旧的编程模式已经显得非常吃力了。即使只是实现一些简单的功能，开发者也应该尝试着从更高的层次看待自己的工作，并且尽量充分利用JavaScript的功能和那些现成的库函数。

1. 在面向对象的编程模型中, Underscore.js提供了一种很棒的机制帮助开发者为对象绑定各种方法（_.bindAll），使用Underscore.js时，必须在对象的原型申明中定义需要使用的方法。
2. 你可以从Douglas Crockford和Yehuda Katz那了解更多的原型继承方法。

文章来源：jQuery is just a browser API

译文来源：http://www.webapptrend.com/

 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，欢迎加入我们的QQ群：193775364