[转]prototype 源码解读 超强推荐第1/3页

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for Web 2.0 developers everywhere.Ruby On Rails 中文社区的醒来贴了自己对于prototype的源码解读心得，颇有借鉴意义。

/**    
2    
3  * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号    
4    
5  */    
6     
7 var Prototype = {     
8     
9   Version: '@@VERSION@@'    
10     
11 }     
12     
13     
14 /**    
15    
16  * 创建一种类型，注意其属性 create 是一个方法，返回一个构造函数。    
17    
18  * 一般使用如下    
19    
20  *     var X = Class.create();  返回一个类型，类似于 java 的一个    
21    
22  * Class实例。    
23    
24  * 要使用 X 类型，需继续用 new X()来获取一个实例，如同 java 的    
25    
26  * Class.newInstance()方法。    
27    
28  *    
29    
30  * 返回的构造函数会执行名为 initialize 的方法， initialize 是    
31    
32  * Ruby 对象的构造器方法名字。    
33    
34  * 此时initialize方法还没有定义，其后的代码中创建新类型时会建立    
35    
36  * 相应的同名方法。    
37    
38  *    
39    
40  * 如果一定要从java上去理解。你可以理解为用Class.create()创建一个    
41    
42  * 继承java.lang.Class类的类。    
43    
44  * 当然java不允许这样做，因为Class类是final的    
45    
46  *    
47    
48  */    
49     
50 var Class = {     
51     
52   create: function() {     
53     
54     return function() {     
55     
56       this.initialize.apply(this, arguments);     
57     
58     }     
59     
60   }     
61     
62 }     
63     
64     
65 /**    
66    
67  * 创建一个对象，从变量名来思考，本意也许是定义一个抽象类，以后创建    
68    
69  * 新对象都 extend 它。    
70    
71  * 但从其后代码的应用来看， Abstract 更多是为了保持命名空间清晰的考虑。    
72    
73  * 也就是说，我们可以给 Abstract 这个对象实例添加新的对象定义。    
74    
75  *    
76    
77  * 从java去理解，就是动态给一个对象创建内部类。    
78    
79  */    
80     
81 var Abstract = new Object();     
82     
83     
84 /**    
85    
86  * 获取参数对象的所有属性和方法，有点象多重继承。但是这种继承是动态获得的。    
87    
88  * 如：    
89    
90  *     var a = new ObjectA(), b = new ObjectB();    
91    
92  *     var c = a.extend(b);    
93    
94  * 此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是，    
95    
96  * c instanceof ObjectB 将返回false。    
97    
98  */    
99     
100 Object.prototype.extend = function(object) {     
101     
102   for (property in object) {     
103     
104     this[property] = object[property];     
105     
106   }     
107     
108   return this;     
109     
110 }     
111     
112     
113 /**    
114    
115  * 这个方法很有趣，它封装一个javascript函数对象，返回一个新函数对象，新函    
116    
117  * 数对象的主体和原对象相同，但是bind()方法参数将被用作当前对象的对象。    
118    
119  * 也就是说新函数中的 this 引用被改变为参数提供的对象。    
120    
121  * 比如：    
122    
123  * <input type="text" id="aaa" value="aaa">    
124    
125  * <input type="text" id="bbb" value="bbb">    
126    
127  * .................    
128    
129  * <script>    
130    
131  *     var aaa = document.getElementById("aaa");    
132    
133  *     var bbb = document.getElementById("bbb");    
134    
135  *     aaa.showValue = function() {alert(this.value);}    
136    
137  *     aaa.showValue2 = aaa.showValue.bind(bbb);    
138    
139  * </script>    
140    
141  *  那么，调用aaa.showValue 将返回"aaa",    
142    
143  *  但调用aaa.showValue2 将返回"bbb"。    
144    
145  *    
146    
147  * apply 是ie5.5后才出现的新方法(Netscape好像很早就支持了)。    
148    
149  * 该方法更多的资料参考MSDN    
150    
151  * http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp    
152    
153  * 还有一个 call 方法，应用起来和 apply 类似。可以一起研究下。    
154    
155  */    
156     
157 Function.prototype.bind = function(object) {     
158     
159   var method = this;     
160     
161   return function() {     
162     
163     method.apply(object, arguments);     
164     
165   }     
166     
167 }     
168     
169     
170 /**    
171    
172  * 和bind一样，不过这个方法一般用做html控件对象的事件处理。所以要传递event对象    
173    
174  * 注意这时候，用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参    
175    
176  * 数形式的定义。如同 java 两个过载的方法。    
177    
178  */    
179     
180 Function.prototype.bindAsEventListener = function(object) {     
181     
182   var method = this;     
183     
184   return function(event) {     
185     
186     method.call(object, event || window.event);     
187     
188   }     
189     
190 }     
191     
192     
193 /**    
194    
195  * 将整数形式RGB颜色值转换为HEX形式    
196    
197  */    
198     
199 Number.prototype.toColorPart = function() {     
200     
201   var digits = this.toString(16);     
202     
203   if (this < 16) return '0' + digits;     
204     
205   return digits;     
206     
207 }     
208     
209     
210 /**    
211    
212  * 典型 Ruby 风格的函数，将参数中的方法逐个调用，返回第一个成功执行的方法的返回值    
213    
214  */    
215     
216 var Try = {     
217     
218   these: function() {     
219     
220     var returnValue;     
221     
222     
223     for (var i = 0; i < arguments.length; i++) {     
224     
225       var lambda = arguments[i];     
226     
227       try {     
228     
229         returnValue = lambda();     
230     
231         break;     
232     
233       } catch (e) {}     
234     
235     }     
236     
237     
238     return returnValue;     
239     
240   }     
241     
242 }     
243     
244     
245 /*--------------------------------------------------------------------------*/    
246     
247     
248 /**    
249    
250  * 一个设计精巧的定时执行器    
251    
252  * 首先由 Class.create() 创建一个 PeriodicalExecuter 类型，    
253    
254  * 然后用对象直接量的语法形式设置原型。    
255    
256  *    
257    
258  * 需要特别说明的是 rgisterCallback 方法，它调用上面定义的函数原型方法bind,    
259    
260  * 并传递自己为参数。    
261    
262  * 之所以这样做，是因为 setTimeout 默认总以 window 对象为当前对象，也就是说，    
263    
264  * 如果 registerCallback 方法定义如下的话：    
265    
266  *     registerCallback: function() {    
267    
268  *         setTimeout(this.onTimerEvent, this.frequency * 1000);    
269    
270  *     }    
271    
272  * 那么，this.onTimeoutEvent 方法执行失败，因为它无法    
273    
274  * 访问 this.currentlyExecuting 属性。    
275    
276  * 而使用了bind以后，该方法才能正确的找到this，    
277    
278  * 也就是PeriodicalExecuter的当前实例。    
279    
280  */    
281     
282 var PeriodicalExecuter = Class.create();     
283     
284 PeriodicalExecuter.prototype = {     
285     
286   initialize: function(callback, frequency) {     
287     
288     this.callback = callback;     
289     
290     this.frequency = frequency;     
291     
292     this.currentlyExecuting = false;     
293     
294     
295     this.registerCallback();     
296     
297   },     
298     
299     
300   registerCallback: function() {     
301     
302     setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000);     
303     
304   },     
305     
306     
307   onTimerEvent: function() {     
308     
309     if (!this.currentlyExecuting) {     
310     
311       try {     
312     
313         this.currentlyExecuting = true;     
314     
315         this.callback();     
316     
317       } finally {     
318     
319         this.currentlyExecuting = false;     
320     
321       }     
322     
323     }     
324     
325     
326     this.registerCallback();     
327     
328   }     
329     
330 }     
331     
332     
333 /*--------------------------------------------------------------------------*/    
334     
335     
336 /**    
337    
338  * 这个函数就 Ruby 了。我觉得它的作用主要有两个    
339    
340  * 1.  大概是 document.getElementById(id) 的最简化调用。    
341    
342  * 比如：$("aaa") 将返回上 aaa 对象    
343    
344  * 2.  得到对象数组    
345    
346  * 比如: $("aaa","bbb") 返回一个包括id为    
347    
348  * "aaa"和"bbb"两个input控件对象的数组。    
349    
350  */    
351     
352 function $() {     
353     
354   var elements = new Array();     
355     
356     
357   for (var i = 0; i < arguments.length; i++) {     
358     
359     var element = arguments[i];     
360     
361     if (typeof element == 'string')     
362     
363       element = document.getElementById(element);     
364     
365     
366     if (arguments.length == 1)     
367     
368       return element;     
369     
370     
371     elements.push(element);     
372     
373   }     
374     
375     
376   return elements;     
377     
378 }