[转]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的源码解读心得,颇有借鉴意义。

我喜欢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 }

当前1/3页 123下一页阅读全文

(0)

相关推荐

  • [转]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 codeb

  • Ajax::prototype 源码解读

    AJAX之旅(1):由prototype_1.3.1进入javascript殿堂-类的初探  还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索.虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了.所以ajax的意思我就不详细解释了. 写这个教程的起因很简单:经过一段时间的ajax学习,有一些体会,并且越发认识到ajax技术的强大,所以决定记录下来,顺便也是对自己思路的整理.有关这个教程的后续,请关注http://www.x2design.net 前几年,javascri

  • jQuery源码解读之addClass()方法分析

    本文较为详细的分析了jQuery源码解读之addClass()方法.分享给大家供大家参考.具体分析如下: 给jQuery原型对象扩展addClass功能,jQuery.fn就是jQuery.prototype 复制代码 代码如下: jQuery.fn.extend({ /* 可以看出这是一个函数名叫addClass的插件方法. */     addClass: function( value ) {         var classes, elem, cur, clazz, j, finalV

  • jQuery源码解读之extend()与工具方法、实例方法详解

    本文实例讲述了jQuery源码解读之extend()与工具方法.实例方法.分享给大家供大家参考,具体如下: 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们

  • 详解JavaScript之Array.reduce源码解读

    前言 reduce(...)方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值(累计作用) 此方法接受两个参数:callback(...)(必选).initialValue(可选). callback(...)接受4个参数:Accumulator (acc) (累计器).Current Value (cur) (当前值).Current Index (idx) (当前索引).Source Array (src) (源数组). 注意点: 1.callb

  • 深入理解Java线程池从设计思想到源码解读

    线程池:从设计思想到源码解析 前言初识线程池线程池优势线程池设计思路 深入线程池构造方法任务队列拒绝策略线程池状态初始化&容量调整&关闭 使用线程池ThreadPoolExecutorExecutors封装线程池 解读线程池execute()addWorker()Worker类runWorker()processWorkerExit() 前言 各位小伙伴儿,春节已经结束了,在此献上一篇肝了一个春节假期的迟来的拜年之作,希望读者朋友们都能有收获. 根据穆氏哲学,投入越多,收获越大.我作此文时

  • Golang标准库unsafe源码解读

    目录 引言 unsafe包 unsafe构成 type ArbitraryType int type Pointer *ArbitraryType 灵活转换 潜在的危险性 正确的使用姿势 错误的使用姿势 func Sizeof(x ArbitraryType) uintptr func Offsetof(x ArbitraryType) uintptr func Alignof(x ArbitraryType) uintptr 引言 当你阅读Golang源码时一定遇到过unsafe.Pointe

  • Vue3 源码解读之副作用函数与依赖收集

    目录 副作用函数 副作用函数的全局变量 targetMap targetMap 为什么使用 WeakMap activeEffect shouldTrack 副作用的实现 effect 函数 ReactiveEffect 类 track 收集依赖 track 函数 trackEffects 函数 trigger 派发更新 trigger 函数 triggerEffects 函数 总结 版本:3.2.31 副作用函数 副作用函数是指会产生副作用的函数,如下面的代码所示: function effe

  • Evil.js项目源码解读

    目录 引言 源码解析 立即执行函数 为什么要用立即执行函数? includes方法 map方法 filter方法 setTimeout Promise.then JSON.stringify Date.getTime localStorage.getItem 用途 引言 2022年8月18日,一个名叫Evil.js的项目突然走红,README介绍如下: 什么?黑心996公司要让你提桶跑路了? 想在离开前给你们的项目留点小 礼物 ? 偷偷地把本项目引入你们的项目吧,你们的项目会有但不仅限于如下的神

  • Vue 2源码解读$mount函数原理

    目录 1. $mount 函数来源 2. runtime 运行时的 $mount 函数 2.1 mountComponent 函数 2.2 _update 函数(首次渲染) 3. runtime-with-compiler 的 $mount 函数 4. runtime 对 Vue 构造函数的其他修改 1. $mount 函数来源 上一节虽然直接从 core 目录下找到了 Vue 的构造函数定义,但是缺少 $mount 方法.所以直接从开发过程中使用的 vue.esm.js 找到对应的源码入口.

随机推荐