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下一页阅读全文