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  *     
124    
125  *     
126    
127  * .................    
128    
129  *     
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 
123下一页阅读全文

[转]prototype 源码解读 超强推荐第1/3页的更多相关文章

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

    我喜欢Javascript,热衷于Ajax应用。我把自己阅读prototype源码的体会写下来,希望对大家重新认识Javascript有所帮助。

  2. Vue3 源码解读静态提升详解

    这篇文章主要为大家介绍了Vue3源码解读静态提升示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  3. js技巧收集(200多个) 超强推荐第1/2页

    1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后,产生该文件Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件点击时文字消失,失去焦点时文字再出现2.网页按钮的特殊颜色

  4. vue源码解读子节点优化更新

    这篇文章主要为大家介绍了vue源码解读子节点优化更新示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  5. node.js require() 源码解读

    学习 Node.js ,必学如何使用 require 语句。本文通过源码分析,详细介绍 require 语句的内部运行机制,帮你理解 Node.js 的模块机制

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部