[转]prototype 源码解读 超强推荐

复制代码 代码如下:

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 } 

复制代码 代码如下:

/**  
2  
3  * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象  
4  
5  */  
6   
7 var Ajax = {   
8   
9   getTransport: function() {   
10   
11     return Try.these(   
12   
13       function() {return new ActiveXObject('Msxml2.XMLHTTP')},   
14   
15       function() {return new ActiveXObject('Microsoft.XMLHTTP')},   
16   
17       function() {return new XMLHttpRequest()}   
18   
19     ) || false;   
20   
21   },   
22   
23   
24   emptyFunction: function() {}   
25   
26 }   
27   
28   
29 /**  
30  
31  * 我以为此时的Ajax对象起到命名空间的作用。  
32  
33  * Ajax.Base 声明为一个基础对象类型  
34  
35  * 注意 Ajax.Base 并没有使用 Class.create() 的方式来创建，我想是因为作者并不  
36  
37  * 希望 Ajax.Base 被库使用者实例化。  
38  
39  * 作者在其他对象类型的声明中，将会继承于它。  
40  
41  * 就好像 java 中的私有抽象类  
42  
43  */  
44   
45 Ajax.Base = function() {};   
46   
47 Ajax.Base.prototype = {   
48   
49   /**  
50  
51    * extend (见prototype.js中的定义) 的用法真是让人耳目一新  
52  
53    * options 首先设置默认属性，然后再 extend 参数对象，那么参数对象中也有同名  
54  
55    * 的属性，那么就覆盖默认属性值。  
56  
57    * 想想如果我写这样的实现，应该类似如下：  
58  
59      setOptions: function(options) {  
60  
61       this.options.methed = options.methed? options.methed : 'post';  
62  
63       ..........  
64  
65      }  
66  
67      我想很多时候，java 限制了 js 的创意。  
68  
69    */  
70   
71   setOptions: function(options) {   
72   
73     this.options = {   
74   
75       method:       'post',   
76   
77       asynchronous: true,   
78   
79       parameters:   ''  
80   
81     }.extend(options || {});   
82   
83   }   
84   
85 }   
86   
87   
88   
89 /**  
90  
91  * Ajax.Request 封装 XmlHttp  
92  
93  */  
94   
95 Ajax.Request = Class.create();   
96   
97   
98 /**  
99  
100  * 定义四种事件(状态)， 参考  
101  
102  * http://msdn.microsoft.com/workshop/  
103  
104  * authorhttps://img.qb5200.com/download-x/dhtml/reference/properties/readystate_1.asp  
105  
106  */  
107   
108 Ajax.Request.Events =   
109   
110   ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'];   
111   
112   
113 /**  
114  
115  *  
116  
117  */  
118   
119 Ajax.Request.prototype = (new Ajax.Base()).extend({   
120   
121   initialize: function(url, options) {   
122   
123     this.transport = Ajax.getTransport();   
124   
125     this.setOptions(options);   
126   
127   
128     try {   
129   
130       if (this.options.method == 'get')   
131   
132         url += '?' + this.options.parameters + '&_=';   
133   
134   
135      /**  
136  
137       * 此处好像强制使用了异步方式，而不是依照 this.options.asynchronous 的值  
138  
139       */  
140   
141       this.transport.open(this.options.method, url, true);   
142   
143   
144      /**  
145  
146       * 这里提供了 XmlHttp 传输过程中每个步骤的回调函数  
147  
148       */  
149   
150       if (this.options.asynchronous) {   
151   
152         this.transport.onreadystatechange = this.onStateChange.bind(this);   
153   
154         setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10);   
155   
156       }   
157   
158   
159       this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest');   
160   
161       this.transport.setRequestHeader('X-Prototype-Version', Prototype.Version);   
162   
163   
164       if (this.options.method == 'post') {   
165   
166         this.transport.setRequestHeader('Connection', 'close');   
167   
168         this.transport.setRequestHeader('Content-type',   
169   
170           'application/x-www-form-urlencoded');   
171   
172       }   
173   
174   
175       this.transport.send(this.options.method == 'post' ?   
176   
177         this.options.parameters + '&_=' : null);   
178   
179   
180     } catch (e) {   
181   
182     }   
183   
184   },   
185   
186   
187   onStateChange: function() {   
188   
189     var readyState = this.transport.readyState;   
190   
191    /**  
192  
193     * 如果不是 Loading 状态，就调用回调函数  
194  
195      */  
196   
197     if (readyState != 1)   
198   
199       this.respondToReadyState(this.transport.readyState);   
200   
201   },   
202   
203   
204   /**  
205  
206    * 回调函数定义在 this.options 属性中，比如:  
207  
208       var option = {  
209  
210          onLoaded : function(req) {...};  
211  
212          ......  
213  
214       }  
215  
216       new Ajax.Request(url, option);  
217  
218    */  
219   
220   respondToReadyState: function(readyState) {   
221   
222     var event = Ajax.Request.Events[readyState];   
223   
224     (this.options['on' + event] || Ajax.emptyFunction)(this.transport);   
225   
226   }   
227   
228 });   
229   
230   
231 /**  
232  
233  * Ajax.Updater 用于绑定一个html元素与 XmlHttp调用的返回值。  
234  
235  * 类似与 buffalo 的 bind。  
236  
237  * 如果 options 中有 insertion(from dom.js) 对象的话,  
238  
239  * insertion 能提供更多的插入控制。  
240  
241  */  
242   
243 Ajax.Updater = Class.create();   
244   
245 Ajax.Updater.prototype = (new Ajax.Base()).extend({   
246   
247   initialize: function(container, url, options) {   
248   
249     this.container = $(container);   
250   
251     this.setOptions(options);   
252   
253   
254     if (this.options.asynchronous) {   
255   
256       this.onComplete = this.options.onComplete;   
257   
258       this.options.onComplete = this.updateContent.bind(this);   
259   
260     }   
261   
262   
263     this.request = new Ajax.Request(url, this.options);   
264   
265   
266     if (!this.options.asynchronous)   
267   
268       this.updateContent();   
269   
270   },   
271   
272   
273   updateContent: function() {   
274   
275     if (this.options.insertion) {   
276   
277       new this.options.insertion(this.container,   
278   
279         this.request.transport.responseText);   
280   
281     } else {   
282   
283       this.container.innerHTML = this.request.transport.responseText;   
284   
285     }   
286   
287   
288     if (this.onComplete) {   
289   
290       setTimeout((function() {this.onComplete(this.request)}).bind(this), 10);   
291   
292     }   
293   
294   }   
295   
296 });  

复制代码 代码如下:

/**  
2  
3  * 针对 页面元素对象 的工具类，提供一些简单静态方法  
4  
5  */  
6   
7 var Field = {   
8   
9   /**  
10  
11    * 清除参数引用对象的值  
12  
13    */  
14   
15   clear: function() {   
16   
17     for (var i = 0; i < arguments.length; i++)   
18   
19       $(arguments[i]).value = '';   
20   
21   },   
22   
23   
24   /**  
25  
26    * 使参数引用对象获取焦点  
27  
28    */  
29   
30   focus: function(element) {   
31   
32     $(element).focus();   
33   
34   },   
35   
36   
37   /**  
38  
39    * 判断参数引用对象值是否为空，如为空，返回false, 反之true  
40  
41    */  
42   
43   present: function() {   
44   
45     for (var i = 0; i < arguments.length; i++)   
46   
47       if ($(arguments[i]).value == '') return false;   
48   
49     return true;   
50   
51   },   
52   
53   
54   /**  
55  
56    * 使选中参数引用对象  
57  
58    */  
59   
60   select: function(element) {   
61   
62     $(element).select();   
63   
64   },   
65   
66   
67   /**  
68  
69    * 使参数引用对象处于可编辑状态  
70  
71    */  
72   
73   activate: function(element) {   
74   
75     $(element).focus();   
76   
77     $(element).select();   
78   
79   }   
80   
81 }   
82   
83   
84 /*-----------------------------------------------------------------*/  
85   
86   
87 /**  
88  
89  * 表单工具类  
90  
91  */  
92   
93 var Form = {   
94   
95   /**  
96  
97    * 将表单元素序列化后的值组合成 QueryString 的形式  
98  
99    */  
100   
101   serialize: function(form) {   
102   
103     var elements = Form.getElements($(form));   
104   
105     var queryComponents = new Array();   
106   
107   
108     for (var i = 0; i < elements.length; i++) {   
109   
110       var queryComponent = Form.Element.serialize(elements[i]);   
111   
112       if (queryComponent)   
113   
114         queryComponents.push(queryComponent);   
115   
116     }   
117   
118   
119     return queryComponents.join('&');   
120   
121   },   
122   
123   
124   /**  
125  
126    * 得到表单的所有元素对象  
127  
128    */  
129   
130   getElements: function(form) {   
131   
132     form = $(form);   
133   
134     var elements = new Array();   
135   
136   
137     for (tagName in Form.Element.Serializers) {   
138   
139       var tagElements = form.getElementsByTagName(tagName);   
140   
141       for (var j = 0; j < tagElements.length; j++)   
142   
143         elements.push(tagElements[j]);   
144   
145     }   
146   
147     return elements;   
148   
149   },   
150   
151   
152   /**  
153  
154    * 将指定表单的元素置于不可用状态  
155  
156    */  
157   
158   disable: function(form) {   
159   
160     var elements = Form.getElements(form);   
161   
162     for (var i = 0; i < elements.length; i++) {   
163   
164       var element = elements[i];   
165   
166       element.blur();   
167   
168       element.disable = 'true';   
169   
170     }   
171   
172   },   
173   
174   
175   /**  
176  
177    * 使表单的第一个非 hidden 类型而且处于可用状态的元素获得焦点  
178  
179    */  
180   
181   focusFirstElement: function(form) {   
182   
183     form = $(form);   
184   
185     var elements = Form.getElements(form);   
186   
187     for (var i = 0; i < elements.length; i++) {   
188   
189       var element = elements[i];   
190   
191       if (element.type != 'hidden' && !element.disabled) {   
192   
193         Field.activate(element);   
194   
195         break;   
196   
197       }   
198   
199     }   
200   
201   },   
202   
203   
204   /*  
205  
206    * 重置表单  
207  
208    */  
209   
210   reset: function(form) {   
211   
212     $(form).reset();   
213   
214   }   
215   
216 }   
217   
218   
219 /**  
220  
221  * 表单元素工具类  
222  
223  */  
224   
225 Form.Element = {   
226   
227   /**  
228  
229    * 返回表单元素的值先序列化再进行 URL 编码后的值  
230  
231    */  
232   
233   serialize: function(element) {   
234   
235     element = $(element);   
236   
237     var method = element.tagName.toLowerCase();   
238   
239     var parameter = Form.Element.Serializers[method](element);   
240   
241   
242     if (parameter)   
243   
244       return encodeURIComponent(parameter[0]) + '=' +   
245   
246         encodeURIComponent(parameter[1]);   
247   
248   },   
249   
250   
251   /**  
252  
253    *  返回表单元素序列化后的值  
254  
255    */  
256   
257   getValue: function(element) {   
258   
259     element = $(element);   
260   
261     var method = element.tagName.toLowerCase();   
262   
263     var parameter = Form.Element.Serializers[method](element);   
264   
265   
266     if (parameter)   
267   
268       return parameter[1];   
269   
270   }   
271   
272 }   
273   
274   
275 /**  
276  
277  * prototype 的所谓序列化其实就是将表单的名字和值组合成一个数组  
278  
279  */  
280   
281 Form.Element.Serializers = {   
282   
283   input: function(element) {   
284   
285     switch (element.type.toLowerCase()) {   
286   
287       case 'hidden':   
288   
289       case 'password':   
290   
291       case 'text':   
292   
293         return Form.Element.Serializers.textarea(element);   
294   
295       case 'checkbox':   
296   
297       case 'radio':   
298   
299         return Form.Element.Serializers.inputSelector(element);   
300   
301     }   
302   
303     return false;   
304   
305   },   
306   
307   
308   inputSelector: function(element) {   
309   
310     if (element.checked)   
311   
312       return [element.name, element.value];   
313   
314   },   
315   
316   
317   textarea: function(element) {   
318   
319     return [element.name, element.value];   
320   
321   },   
322   
323   
324   /**  
325  
326    * 看样子，也不支持多选框(select-multiple)  
327  
328    */  
329   
330   select: function(element) {   
331   
332     var index = element.selectedIndex;   
333   
334     var value = element.options[index].value || element.options[index].text;   
335   
336     return [element.name, (index >= 0) ? value : ''];   
337   
338   }   
339   
340 }   
341   
342   
343 /*--------------------------------------------------------------------------*/  
344   
345   
346 /**  
347  
348  * Form.Element.getValue 也许会经常用到，所以做了一个快捷引用  
349  
350  */  
351   
352 var $F = Form.Element.getValue;   
353   
354   
355 /*--------------------------------------------------------------------------*/  
356   
357   
358 /**  
359  
360  * Abstract.TimedObserver 也没有用 Class.create() 来创建，  
361  
362  * 和Ajax.Base 意图应该一样  
363  
364  * Abstract.TimedObserver 顾名思义，  
365  
366  * 是套用Observer设计模式来跟踪指定表单元素，  
367  
368  * 当表单元素的值发生变化的时候，就执行回调函数  
369  
370  *  
371  
372  * 我想　Observer 与注册onchange事件相似，  
373  
374  * 不同点在于 onchange 事件是在元素失去焦点  
375  
376  * 的时候才激发。  
377  
378  * 同样的与 onpropertychange 事件也相似，  
379  
380  * 不过它只关注表单元素的值的变化，而且提供timeout的控制。  
381  
382  *  
383  
384  * 除此之外，Observer 的好处大概就在与更面向对象，另外可以动态的更换回调函数，  
385  
386  * 这就比注册事件要灵活一些。  
387  
388  * Observer 应该可以胜任动态数据校验，或者多个关联下拉选项列表的连动等等  
389  
390  *  
391  
392  */  
393   
394 Abstract.TimedObserver = function() {}   
395   
396   
397 /**  
398  
399  * 这个设计和 PeriodicalExecuter 一样，bind 方法是实现的核心  
400  
401  */  
402   
403 Abstract.TimedObserver.prototype = {   
404   
405   initialize: function(element, frequency, callback) {   
406   
407     this.frequency = frequency;   
408   
409     this.element   = $(element);   
410   
411     this.callback  = callback;   
412   
413   
414     this.lastValue = this.getValue();   
415   
416     this.registerCallback();   
417   
418   },   
419   
420   
421   registerCallback: function() {   
422   
423     setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000);   
424   
425   },   
426   
427   
428   onTimerEvent: function() {   
429   
430     var value = this.getValue();   
431   
432     if (this.lastValue != value) {   
433   
434       this.callback(this.element, value);   
435   
436       this.lastValue = value;   
437   
438     }   
439   
440   
441     this.registerCallback();   
442   
443   }   
444   
445 }   
446   
447   
448 /**  
449  
450  * Form.Element.Observer 和 Form.Observer 其实是一样的  
451  
452  * 注意 Form.Observer 并不是用来跟踪整个表单的，我想大概只是  
453  
454  * 为了减少书写(这是Ruby的一个设计原则)  
455  
456  */  
457   
458 Form.Element.Observer = Class.create();   
459   
460 Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({   
461   
462   getValue: function() {   
463   
464     return Form.Element.getValue(this.element);   
465   
466   }   
467   
468 });   
469   
470   
471 Form.Observer = Class.create();   
472   
473 Form.Observer.prototype = (new Abstract.TimedObserver()).extend({   
474   
475   getValue: function() {   
476   
477     return Form.serialize(this.element);   
478   
479   }   
480   
481 });  

复制代码 代码如下:

/**  
2  
3  * 根据 class attribute 的名字得到对象数组，支持 multiple class  
4  
5  *  
6  
7  */  
8   
9 document.getElementsByClassName = function(className) {   
10   
11   var children = document.getElementsByTagName('*') || document.all;   
12   
13   var elements = new Array();   
14   
15   
16   for (var i = 0; i < children.length; i++) {   
17   
18     var child = children[i];   
19   
20     var classNames = child.className.split(' ');   
21   
22     for (var j = 0; j < classNames.length; j++) {   
23   
24       if (classNames[j] == className) {   
25   
26         elements.push(child);   
27   
28         break;   
29   
30       }   
31   
32     }   
33   
34   }   
35   
36   
37   return elements;   
38   
39 }   
40   
41   
42 /*--------------------------------------------------------------------------*/  
43   
44   
45 /**  
46  
47  * Element 就象一个 java 的工具类，主要用来 隐藏/显示/销除 对象，  
48  
49  * 以及获取对象的简单属性。  
50  
51  *  
52  
53  */  
54   
55 var Element = {   
56   
57   toggle: function() {   
58   
59     for (var i = 0; i < arguments.length; i++) {   
60   
61       var element = $(arguments[i]);   
62   
63       element.style.display =   
64   
65         (element.style.display == 'none' ? '' : 'none');   
66   
67     }   
68   
69   },   
70   
71   
72   hide: function() {   
73   
74     for (var i = 0; i < arguments.length; i++) {   
75   
76       var element = $(arguments[i]);   
77   
78       element.style.display = 'none';   
79   
80     }   
81   
82   },   
83   
84   
85   show: function() {   
86   
87     for (var i = 0; i < arguments.length; i++) {   
88   
89       var element = $(arguments[i]);   
90   
91       element.style.display = '';   
92   
93     }   
94   
95   },   
96   
97   
98   remove: function(element) {   
99   
100     element = $(element);   
101   
102     element.parentNode.removeChild(element);   
103   
104   },   
105   
106   
107   getHeight: function(element) {   
108   
109     element = $(element);   
110   
111     return element.offsetHeight;   
112   
113   }   
114   
115 }   
116   
117   
118 /**  
119  
120  * 为 Element.toggle 做了一个符号连接，大概是兼容性的考虑  
121  
122  */  
123   
124 var Toggle = new Object();   
125   
126 Toggle.display = Element.toggle;   
127   
128   
129 /*--------------------------------------------------------------------------*/  
130   
131   
132 /**  
133  
134  * 动态插入内容的实现，MS的Jscript实现中对象有一个 insertAdjacentHTML 方法  
135  
136  * http://msdn.microsoft.com/workshop/  
137  
138  * authorhttps://img.qb5200.com/download-x/dhtml/reference/methods/insertadjacenthtml.asp  
139  
140  * 这里算是一个对象形式的封装。  
141  
142  */  
143   
144 Abstract.Insertion = function(adjacency) {   
145   
146   this.adjacency = adjacency;   
147   
148 }   
149   
150   
151 Abstract.Insertion.prototype = {   
152   
153   initialize: function(element, content) {   
154   
155     this.element = $(element);   
156   
157     this.content = content;   
158   
159   
160     if (this.adjacency && this.element.insertAdjacentHTML) {   
161   
162       this.element.insertAdjacentHTML(this.adjacency, this.content);   
163   
164     } else {   
165   
166      /**  
167  
168       * gecko 不支持 insertAdjacentHTML 方法，但可以用如下代码代替  
169  
170       */  
171   
172       this.range = this.element.ownerDocument.createRange();   
173   
174      /**  
175  
176       * 如果定义了 initializeRange 方法，则实行，  
177  
178       * 这里相当与定义了一个抽象的 initializeRange 方法  
179  
180       */  
181   
182       if (this.initializeRange) this.initializeRange();   
183   
184       this.fragment = this.range.createContextualFragment(this.content);   
185   
186   
187      /**  
188  
189       * insertContent 也是一个抽象方法，子类必须实现  
190  
191       */  
192   
193       this.insertContent();   
194   
195     }   
196   
197   }   
198   
199 }   
200   
201   
202 /**  
203  
204  * prototype 加深了我的体会，就是写js 如何去遵循　  
205  
206  * Don't Repeat Yourself (DRY) 原则  
207  
208  * 上文中 Abstract.Insertion 算是一个抽象类，  
209  
210  * 定义了名为　initializeRange 的一个抽象方法  
211  
212  * var Insertion = new Object()　建立一个命名空间  
213  
214  * Insertion.Before|Top|Bottom|After 就象是四个java中  
215  
216  * 的四个静态内部类，而它们分别继承于  
217  
218  * Abstract.Insertion，并实现了initializeRange方法。  
219  
220  */  
221   
222 var Insertion = new Object();   
223   
224   
225 Insertion.Before = Class.create();   
226   
227 Insertion.Before.prototype =   
228   
229   (new Abstract.Insertion('beforeBegin')).extend({   
230   
231   initializeRange: function() {   
232   
233     this.range.setStartBefore(this.element);   
234   
235   },   
236   
237   
238   /**  
239  
240    * 将内容插入到指定节点的前面, 与指定节点同级  
241  
242    */  
243   
244   insertContent: function() {   
245   
246     this.element.parentNode.insertBefore(this.fragment, this.element);   
247   
248   }   
249   
250 });   
251   
252   
253 Insertion.Top = Class.create();   
254   
255 Insertion.Top.prototype =   
256   
257   (new Abstract.Insertion('afterBegin')).extend({   
258   
259   initializeRange: function() {   
260   
261     this.range.selectNodeContents(this.element);   
262   
263     this.range.collapse(true);   
264   
265   },   
266   
267   
268   /**  
269  
270    * 将内容插入到指定节点的第一个子节点前，于是内容变为该节点的第一个子节点  
271  
272    */  
273   
274   insertContent: function() {   
275   
276     this.element.insertBefore(this.fragment, this.element.firstChild);   
277   
278   }   
279   
280 });   
281   
282   
283 Insertion.Bottom = Class.create();   
284   
285 Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({   
286   
287   initializeRange: function() {   
288   
289     this.range.selectNodeContents(this.element);   
290   
291     this.range.collapse(this.element);   
292   
293   },   
294   
295   
296   /**  
297  
298    * 将内容插入到指定节点的最后，于是内容变为该节点的最后一个子节点  
299  
300    */  
301   
302   insertContent: function() {   
303   
304     this.element.appendChild(this.fragment);   
305   
306   }   
307   
308 });   
309   
310   
311   
312 Insertion.After = Class.create();   
313   
314 Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({   
315   
316   initializeRange: function() {   
317   
318     this.range.setStartAfter(this.element);   
319   
320   },   
321   
322   
323   /**  
324  
325    * 将内容插入到指定节点的后面, 与指定节点同级  
326  
327    */  
328   
329   insertContent: function() {   
330   
331     this.element.parentNode.insertBefore(this.fragment,   
332   
333       this.element.nextSibling);   
334   
335   }   
336   
337 }); 

复制代码 代码如下:

/* 这是包含错误的原版本  
2  
3 if (!Function.prototype.apply) {  
4  
5 // Based on code from http://www.youngpup.net/  
6  
7 Function.prototype.apply = function(object, parameters) {  
8  
9 var parameterStrings = new Array();  
10  
11 if (!object) object = window;  
12  
13 if (!parameters) parameters = new Array();  
14  
15  
16 for (var i = 0; i < parameters.length; i++)  
17  
18 parameterStrings[i] = 'x[' + i + ']'; //Error 1  
19  
20  
21 object.__apply__ = this;  
22  
23 var result = eval('obj.__apply__(' + //Error 2  
24  
25 parameterStrings[i].join(', ') + ')');  
26  
27 object.__apply__ = null;  
28  
29  
30 return result;  
31  
32 }  
33  
34 }  
35  
36 */  
37   
38   
39 if (!Function.prototype.apply) {   
40   
41   Function.prototype.apply = function(object, parameters) {   
42   
43     var parameterStrings = new Array();   
44   
45     if (!object) object = window;   
46   
47     if (!parameters) parameters = new Array();   
48   
49   
50     for (var i = 0; i < parameters.length; i++)   
51   
52       parameterStrings[i] = 'parameters[' + i + ']';   
53   
54   
55     object.__apply__ = this;   
56   
57     var result = eval('object.__apply__(' + parameterStrings.join(', ') + ')');   
58   
59     object.__apply__ = null;   
60   
61   
62     return result;   
63   
64   }   
65   
66 }  

复制代码 代码如下:

Effect.Blink = Class.create();   
2   
3 Effect.Blink.prototype = {   
4   
5   initialize: function(element, frequency) {   
6   
7     this.element = $(element);   
8   
9     this.frequency = frequency?frequency:1000;   
10   
11     this.element.effect_blink = this;   
12   
13     this.blink();   
14   
15   },   
16   
17   
18   blink: function() {   
19   
20     if (this.timer) clearTimeout(this.timer);   
21   
22     try {   
23   
24       this.element.style.visibility =   
25   
26           this.element.style.visibility == 'hidden'?'visible':'hidden';   
27   
28     } catch (e) {}   
29   
30     this.timer = setTimeout(this.blink.bind(this), this.frequency);   
31   
32    }   
33   
34 };