[转]prototype 源码解读 超强推荐
人气:0复制代码 代码如下:
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的源码解读心得，颇有借鉴意义。
我喜欢Javascript，热衷于 Ajax 应用。我把自己阅读prototype源码的体会写下来，希望对大家重新认识 Javascript 有所帮助。
prototype.js 代码：
复制代码 代码如下:
/**
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 }
ajax.js 代码：
复制代码 代码如下:
/**
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 });
form.js 代码：
复制代码 代码如下:
/**
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 });
dom.js 代码：
复制代码 代码如下:
/**
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 });
其他代码：
prototype 还有两个源码文件 effects.js compat.js 就不贴出来了。两者并不常用，effects.js 看example 做花哨的效果还不错，不过代码中没有太多新鲜的东西。
需要指出的就是
compat.js 中 Funcation.prototype.apply 的实现有两个错误（应该是拼写错误）， 我分别贴出来，大家比较一下就清楚了。
复制代码 代码如下:
/* 这是包含错误的原版本
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 的一个子类，用来实现闪烁的效果。
复制代码 代码如下:
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 };
使用也很简单， 调用 new Effect.Blink(elementId) 就好了。
通过对 prototype 源码的研究，我想我对javascript又有了一点新的体会，而最大的体会就是 《Ajax : A New Approach to Web Applications》文章最后作者对设计人员的建议： to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.
加载全部内容