我喜欢Javascript,热衷于 Ajax 应用。我把自己阅读prototype源码的体会写下来,希望对大家重新认识 Javascript 有所帮助。
prototype.js 代码:
使用也很简单, 调用 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.
prototype.js 代码:
1/** 2 3 * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 4 5 */ 6 7var 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 50var 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 81var 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 100Object.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 * [URL]http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp[/URL] 152 153 * 还有一个 call 方法,应用起来和 apply 类似。可以一起研究下。 154 155 */ 156 157Function.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 180Function.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 199Number.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 216var 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 282var PeriodicalExecuter = Class.create(); 283 284PeriodicalExecuter.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 352function $() { 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} 379 380 view plain | print | ? /** * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: '@@VERSION@@' } /** * 创建一种类型,注意其属性 create 是一个方法,返回一个构造函数。 * 一般使用如下 * var X = Class.create(); 返回一个类型,类似于 java 的一个 * Class实例。 * 要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的 * Class.newInstance()方法。 * * 返回的构造函数会执行名为 initialize 的方法, initialize 是 * Ruby 对象的构造器方法名字。 * 此时initialize方法还没有定义,其后的代码中创建新类型时会建立 * 相应的同名方法。 * * 如果一定要从java上去理解。你可以理解为用Class.create()创建一个 * 继承java.lang.Class类的类。 * 当然java不允许这样做,因为Class类是final的 * */ var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } /** * 创建一个对象,从变量名来思考,本意也许是定义一个抽象类,以后创建 * 新对象都 extend 它。 * 但从其后代码的应用来看, Abstract 更多是为了保持命名空间清晰的考虑。 * 也就是说,我们可以给 Abstract 这个对象实例添加新的对象定义。 * * 从java去理解,就是动态给一个对象创建内部类。 */ var Abstract = new Object(); /** * 获取参数对象的所有属性和方法,有点象多重继承。但是这种继承是动态获得的。 * 如: * var a = new ObjectA(), b = new ObjectB(); * var c = a.extend(b); * 此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是, * c instanceof ObjectB 将返回false。 */ Object.prototype.extend = function(object) { for (property in object) { this[property] = object[property]; } return this; } /** * 这个方法很有趣,它封装一个javascript函数对象,返回一个新函数对象,新函 * 数对象的主体和原对象相同,但是bind()方法参数将被用作当前对象的对象。 * 也就是说新函数中的 this 引用被改变为参数提供的对象。 * 比如: * <input type="text" id="aaa" value="aaa"> * <input type="text" id="bbb" value="bbb"> * ................. * <script> * var aaa = document.getElementById("aaa"); * var bbb = document.getElementById("bbb"); * aaa.showValue = function() {alert(this.value);} * aaa.showValue2 = aaa.showValue.bind(bbb); * </script> * 那么,调用aaa.showValue 将返回"aaa", * 但调用aaa.showValue2 将返回"bbb"。 * * apply 是ie5.5后才出现的新方法(Netscape好像很早就支持了)。 * 该方法更多的资料参考MSDN * [URL]http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp[/URL] * 还有一个 call 方法,应用起来和 apply 类似。可以一起研究下。 */ Function.prototype.bind = function(object) { var method = this; return function() { method.apply(object, arguments); } } /** * 和bind一样,不过这个方法一般用做html控件对象的事件处理。所以要传递event对象 * 注意这时候,用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参 * 数形式的定义。如同 java 两个过载的方法。 */ Function.prototype.bindAsEventListener = function(object) { var method = this; return function(event) { method.call(object, event || window.event); } } /** * 将整数形式RGB颜色值转换为HEX形式 */ Number.prototype.toColorPart = function() { var digits = this.toString(16); if (this < 16) return '0' + digits; return digits; } /** * 典型 Ruby 风格的函数,将参数中的方法逐个调用,返回第一个成功执行的方法的返回值 */ var Try = { these: function() { var returnValue; for (var i = 0; i < arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} } return returnValue; } } /*--------------------------------------------------------------------------*/ /** * 一个设计精巧的定时执行器 * 首先由 Class.create() 创建一个 PeriodicalExecuter 类型, * 然后用对象直接量的语法形式设置原型。 * * 需要特别说明的是 rgisterCallback 方法,它调用上面定义的函数原型方法bind, * 并传递自己为参数。 * 之所以这样做,是因为 setTimeout 默认总以 window 对象为当前对象,也就是说, * 如果 registerCallback 方法定义如下的话: * registerCallback: function() { * setTimeout(this.onTimerEvent, this.frequency * 1000); * } * 那么,this.onTimeoutEvent 方法执行失败,因为它无法 * 访问 this.currentlyExecuting 属性。 * 而使用了bind以后,该方法才能正确的找到this, * 也就是PeriodicalExecuter的当前实例。 */ var PeriodicalExecuter = Class.create(); PeriodicalExecuter.prototype = { initialize: function(callback, frequency) { this.callback = callback; this.frequency = frequency; this.currentlyExecuting = false; this.registerCallback(); }, registerCallback: function() { setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); }, onTimerEvent: function() { if (!this.currentlyExecuting) { try { this.currentlyExecuting = true; this.callback(); } finally { this.currentlyExecuting = false; } } this.registerCallback(); } } /*--------------------------------------------------------------------------*/ /** * 这个函数就 Ruby 了。我觉得它的作用主要有两个 * 1. 大概是 document.getElementById(id) 的最简化调用。 * 比如:$("aaa") 将返回上 aaa 对象 * 2. 得到对象数组 * 比如: $("aaa","bbb") 返回一个包括id为 * "aaa"和"bbb"两个input控件对象的数组。 */ function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } ajax.js 代码: 1/** 2 3 * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象 4 5 */ 6 7var 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 45Ajax.Base = function() {}; 46 47Ajax.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 95Ajax.Request = Class.create(); 96 97 98/** 99 100 * 定义四种事件(状态), 参考 101 102 * [URL]http://msdn.microsoft.com/workshop/[/URL] 103 104 * author/dhtml/reference/properties/readystate_1.asp 105 106 */ 107 108Ajax.Request.Events = 109 110 ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; 111 112 113/** 114 115 * 116 117 */ 118 119Ajax.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 243Ajax.Updater = Class.create(); 244 245Ajax.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}); view plain | print | ? /** * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象 */ var Ajax = { getTransport: function() { return Try.these( function() {return new ActiveXObject('Msxml2.XMLHTTP')}, function() {return new ActiveXObject('Microsoft.XMLHTTP')}, function() {return new XMLHttpRequest()} ) || false; }, emptyFunction: function() {} } /** * 我以为此时的Ajax对象起到命名空间的作用。 * Ajax.Base 声明为一个基础对象类型 * 注意 Ajax.Base 并没有使用 Class.create() 的方式来创建,我想是因为作者并不 * 希望 Ajax.Base 被库使用者实例化。 * 作者在其他对象类型的声明中,将会继承于它。 * 就好像 java 中的私有抽象类 */ Ajax.Base = function() {}; Ajax.Base.prototype = { /** * extend (见prototype.js中的定义) 的用法真是让人耳目一新 * options 首先设置默认属性,然后再 extend 参数对象,那么参数对象中也有同名 * 的属性,那么就覆盖默认属性值。 * 想想如果我写这样的实现,应该类似如下: setOptions: function(options) { this.options.methed = options.methed? options.methed : 'post'; .......... } 我想很多时候,java 限制了 js 的创意。 */ setOptions: function(options) { this.options = { method: 'post', asynchronous: true, parameters: '' }.extend(options || {}); } } /** * Ajax.Request 封装 XmlHttp */ Ajax.Request = Class.create(); /** * 定义四种事件(状态), 参考 * [URL]http://msdn.microsoft.com/workshop/[/URL] * author/dhtml/reference/properties/readystate_1.asp */ Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; /** * */ Ajax.Request.prototype = (new Ajax.Base()).extend({ initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setOptions(options); try { if (this.options.method == 'get') url += '?' + this.options.parameters + '&_='; /** * 此处好像强制使用了异步方式,而不是依照 this.options.asynchronous 的值 */ this.transport.open(this.options.method, url, true); /** * 这里提供了 XmlHttp 传输过程中每个步骤的回调函数 */ if (this.options.asynchronous) { this.transport.onreadystatechange = this.onStateChange.bind(this); setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10); } this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); this.transport.setRequestHeader('X-Prototype-Version', Prototype.Version); if (this.options.method == 'post') { this.transport.setRequestHeader('Connection', 'close'); this.transport.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } this.transport.send(this.options.method == 'post' ? this.options.parameters + '&_=' : null); } catch (e) { } }, onStateChange: function() { var readyState = this.transport.readyState; /** * 如果不是 Loading 状态,就调用回调函数 */ if (readyState != 1) this.respondToReadyState(this.transport.readyState); }, /** * 回调函数定义在 this.options 属性中,比如: var option = { onLoaded : function(req) {...}; ...... } new Ajax.Request(url, option); */ respondToReadyState: function(readyState) { var event = Ajax.Request.Events[readyState]; (this.options['on' + event] || Ajax.emptyFunction)(this.transport); } }); /** * Ajax.Updater 用于绑定一个html元素与 XmlHttp调用的返回值。 * 类似与 buffalo 的 bind。 * 如果 options 中有 insertion(from dom.js) 对象的话, * insertion 能提供更多的插入控制。 */ Ajax.Updater = Class.create(); Ajax.Updater.prototype = (new Ajax.Base()).extend({ initialize: function(container, url, options) { this.container = $(container); this.setOptions(options); if (this.options.asynchronous) { this.onComplete = this.options.onComplete; this.options.onComplete = this.updateContent.bind(this); } this.request = new Ajax.Request(url, this.options); if (!this.options.asynchronous) this.updateContent(); }, updateContent: function() { if (this.options.insertion) { new this.options.insertion(this.container, this.request.transport.responseText); } else { this.container.innerHTML = this.request.transport.responseText; } if (this.onComplete) { setTimeout((function() {this.onComplete(this.request)}).bind(this), 10); } } }); form.js 代码: 1/** 2 3 * 针对 页面元素对象 的工具类,提供一些简单静态方法 4 5 */ 6 7var 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 93var 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 225Form.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 281Form.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 352var $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 394Abstract.TimedObserver = function() {} 395 396 397/** 398 399 * 这个设计和 PeriodicalExecuter 一样,bind 方法是实现的核心 400 401 */ 402 403Abstract.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 458Form.Element.Observer = Class.create(); 459 460Form.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 471Form.Observer = Class.create(); 472 473Form.Observer.prototype = (new Abstract.TimedObserver()).extend({ 474 475 getValue: function() { 476 477 return Form.serialize(this.element); 478 479 } 480 481}); view plain | print | ? /** * 针对 页面元素对象 的工具类,提供一些简单静态方法 */ var Field = { /** * 清除参数引用对象的值 */ clear: function() { for (var i = 0; i < arguments.length; i++) $(arguments[i]).value = ''; }, /** * 使参数引用对象获取焦点 */ focus: function(element) { $(element).focus(); }, /** * 判断参数引用对象值是否为空,如为空,返回false, 反之true */ present: function() { for (var i = 0; i < arguments.length; i++) if ($(arguments[i]).value == '') return false; return true; }, /** * 使选中参数引用对象 */ select: function(element) { $(element).select(); }, /** * 使参数引用对象处于可编辑状态 */ activate: function(element) { $(element).focus(); $(element).select(); } } /*-----------------------------------------------------------------*/ /** * 表单工具类 */ var Form = { /** * 将表单元素序列化后的值组合成 QueryString 的形式 */ serialize: function(form) { var elements = Form.getElements($(form)); var queryComponents = new Array(); for (var i = 0; i < elements.length; i++) { var queryComponent = Form.Element.serialize(elements[i]); if (queryComponent) queryComponents.push(queryComponent); } return queryComponents.join('&'); }, /** * 得到表单的所有元素对象 */ getElements: function(form) { form = $(form); var elements = new Array(); for (tagName in Form.Element.Serializers) { var tagElements = form.getElementsByTagName(tagName); for (var j = 0; j < tagElements.length; j++) elements.push(tagElements[j]); } return elements; }, /** * 将指定表单的元素置于不可用状态 */ disable: function(form) { var elements = Form.getElements(form); for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.blur(); element.disable = 'true'; } }, /** * 使表单的第一个非 hidden 类型而且处于可用状态的元素获得焦点 */ focusFirstElement: function(form) { form = $(form); var elements = Form.getElements(form); for (var i = 0; i < elements.length; i++) { var element = elements[i]; if (element.type != 'hidden' && !element.disabled) { Field.activate(element); break; } } }, /* * 重置表单 */ reset: function(form) { $(form).reset(); } } /** * 表单元素工具类 */ Form.Element = { /** * 返回表单元素的值先序列化再进行 URL 编码后的值 */ serialize: function(element) { element = $(element); var method = element.tagName.toLowerCase(); var parameter = Form.Element.Serializers[method](element); if (parameter) return encodeURIComponent(parameter[0]) + '=' + encodeURIComponent(parameter[1]); }, /** * 返回表单元素序列化后的值 */ getValue: function(element) { element = $(element); var method = element.tagName.toLowerCase(); var parameter = Form.Element.Serializers[method](element); if (parameter) return parameter[1]; } } /** * prototype 的所谓序列化其实就是将表单的名字和值组合成一个数组 */ Form.Element.Serializers = { input: function(element) { switch (element.type.toLowerCase()) { case 'hidden': case 'password': case 'text': return Form.Element.Serializers.textarea(element); case 'checkbox': case 'radio': return Form.Element.Serializers.inputSelector(element); } return false; }, inputSelector: function(element) { if (element.checked) return [element.name, element.value]; }, textarea: function(element) { return [element.name, element.value]; }, /** * 看样子,也不支持多选框(select-multiple) */ select: function(element) { var index = element.selectedIndex; var value = element.options[index].value || element.options[index].text; return [element.name, (index >= 0) ? value : '']; } } /*--------------------------------------------------------------------------*/ /** * Form.Element.getValue 也许会经常用到,所以做了一个快捷引用 */ var $F = Form.Element.getValue; /*--------------------------------------------------------------------------*/ /** * Abstract.TimedObserver 也没有用 Class.create() 来创建, * 和Ajax.Base 意图应该一样 * Abstract.TimedObserver 顾名思义, * 是套用Observer设计模式来跟踪指定表单元素, * 当表单元素的值发生变化的时候,就执行回调函数 * * 我想 Observer 与注册onchange事件相似, * 不同点在于 onchange 事件是在元素失去焦点 * 的时候才激发。 * 同样的与 onpropertychange 事件也相似, * 不过它只关注表单元素的值的变化,而且提供timeout的控制。 * * 除此之外,Observer 的好处大概就在与更面向对象,另外可以动态的更换回调函数, * 这就比注册事件要灵活一些。 * Observer 应该可以胜任动态数据校验,或者多个关联下拉选项列表的连动等等 * */ Abstract.TimedObserver = function() {} /** * 这个设计和 PeriodicalExecuter 一样,bind 方法是实现的核心 */ Abstract.TimedObserver.prototype = { initialize: function(element, frequency, callback) { this.frequency = frequency; this.element = $(element); this.callback = callback; this.lastValue = this.getValue(); this.registerCallback(); }, registerCallback: function() { setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); }, onTimerEvent: function() { var value = this.getValue(); if (this.lastValue != value) { this.callback(this.element, value); this.lastValue = value; } this.registerCallback(); } } /** * Form.Element.Observer 和 Form.Observer 其实是一样的 * 注意 Form.Observer 并不是用来跟踪整个表单的,我想大概只是 * 为了减少书写(这是Ruby的一个设计原则) */ Form.Element.Observer = Class.create(); Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({ getValue: function() { return Form.Element.getValue(this.element); } }); Form.Observer = Class.create(); Form.Observer.prototype = (new Abstract.TimedObserver()).extend({ getValue: function() { return Form.serialize(this.element); } }); dom.js 代码: 1/** 2 3 * 根据 class attribute 的名字得到对象数组,支持 multiple class 4 5 * 6 7 */ 8 9document.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 55var 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 124var Toggle = new Object(); 125 126Toggle.display = Element.toggle; 127 128 129/*--------------------------------------------------------------------------*/ 130 131 132/** 133 134 * 动态插入内容的实现,MS的Jscript实现中对象有一个 insertAdjacentHTML 方法 135 136 * [URL]http://msdn.microsoft.com/workshop/[/URL] 137 138 * author/dhtml/reference/methods/insertadjacenthtml.asp 139 140 * 这里算是一个对象形式的封装。 141 142 */ 143 144Abstract.Insertion = function(adjacency) { 145 146 this.adjacency = adjacency; 147 148} 149 150 151Abstract.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 222var Insertion = new Object(); 223 224 225Insertion.Before = Class.create(); 226 227Insertion.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 253Insertion.Top = Class.create(); 254 255Insertion.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 283Insertion.Bottom = Class.create(); 284 285Insertion.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 312Insertion.After = Class.create(); 313 314Insertion.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}); view plain | print | ? /** * 根据 class attribute 的名字得到对象数组,支持 multiple class * */ document.getElementsByClassName = function(className) { var children = document.getElementsByTagName('*') || document.all; var elements = new Array(); for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == className) { elements.push(child); break; } } } return elements; } /*--------------------------------------------------------------------------*/ /** * Element 就象一个 java 的工具类,主要用来 隐藏/显示/销除 对象, * 以及获取对象的简单属性。 * */ var Element = { toggle: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); element.style.display = (element.style.display == 'none' ? '' : 'none'); } }, hide: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); element.style.display = 'none'; } }, show: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); element.style.display = ''; } }, remove: function(element) { element = $(element); element.parentNode.removeChild(element); }, getHeight: function(element) { element = $(element); return element.offsetHeight; } } /** * 为 Element.toggle 做了一个符号连接,大概是兼容性的考虑 */ var Toggle = new Object(); Toggle.display = Element.toggle; /*--------------------------------------------------------------------------*/ /** * 动态插入内容的实现,MS的Jscript实现中对象有一个 insertAdjacentHTML 方法 * [URL]http://msdn.microsoft.com/workshop/[/URL] * author/dhtml/reference/methods/insertadjacenthtml.asp * 这里算是一个对象形式的封装。 */ Abstract.Insertion = function(adjacency) { this.adjacency = adjacency; } Abstract.Insertion.prototype = { initialize: function(element, content) { this.element = $(element); this.content = content; if (this.adjacency && this.element.insertAdjacentHTML) { this.element.insertAdjacentHTML(this.adjacency, this.content); } else { /** * gecko 不支持 insertAdjacentHTML 方法,但可以用如下代码代替 */ this.range = this.element.ownerDocument.createRange(); /** * 如果定义了 initializeRange 方法,则实行, * 这里相当与定义了一个抽象的 initializeRange 方法 */ if (this.initializeRange) this.initializeRange(); this.fragment = this.range.createContextualFragment(this.content); /** * insertContent 也是一个抽象方法,子类必须实现 */ this.insertContent(); } } } /** * prototype 加深了我的体会,就是写js 如何去遵循 * Don’t Repeat Yourself (DRY) 原则 * 上文中 Abstract.Insertion 算是一个抽象类, * 定义了名为 initializeRange 的一个抽象方法 * var Insertion = new Object() 建立一个命名空间 * Insertion.Before|Top|Bottom|After 就象是四个java中 * 的四个静态内部类,而它们分别继承于 * Abstract.Insertion,并实现了initializeRange方法。 */ var Insertion = new Object(); Insertion.Before = Class.create(); Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({ initializeRange: function() { this.range.setStartBefore(this.element); }, /** * 将内容插入到指定节点的前面, 与指定节点同级 */ insertContent: function() { this.element.parentNode.insertBefore(this.fragment, this.element); } }); Insertion.Top = Class.create(); Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({ initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(true); }, /** * 将内容插入到指定节点的第一个子节点前,于是内容变为该节点的第一个子节点 */ insertContent: function() { this.element.insertBefore(this.fragment, this.element.firstChild); } }); Insertion.Bottom = Class.create(); Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({ initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(this.element); }, /** * 将内容插入到指定节点的最后,于是内容变为该节点的最后一个子节点 */ insertContent: function() { this.element.appendChild(this.fragment); } }); Insertion.After = Class.create(); Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({ initializeRange: function() { this.range.setStartAfter(this.element); }, /** * 将内容插入到指定节点的后面, 与指定节点同级 */ insertContent: function() { this.element.parentNode.insertBefore(this.fragment, this.element.nextSibling); } }); 其他代码: prototype 还有两个源码文件 effects.js compat.js 就不贴出来了。两者并不常用,effects.js 看example 做花哨的效果还不错,不过代码中没有太多新鲜的东西。 需要指出的就是 compat.js 中 Funcation.prototype.apply 的实现有两个错误(应该是拼写错误), 我分别贴出来,大家比较一下就清楚了。 1/* 这是包含错误的原版本 2 3if (!Function.prototype.apply) { 4 5// Based on code from [URL]http://www.youngpup.net/[/URL] 6 7Function.prototype.apply = function(object, parameters) { 8 9var parameterStrings = new Array(); 10 11if (!object) object = window; 12 13if (!parameters) parameters = new Array(); 14 15 16for (var i = 0; i < parameters.length; i++) 17 18parameterStrings[i] = 'x[' + i + ']'; //Error 1 19 20 21object.__apply__ = this; 22 23var result = eval('obj.__apply__(' + //Error 2 24 25parameterStrings[i].join(', ') + ')'); 26 27object.__apply__ = null; 28 29 30return result; 31 32} 33 34} 35 36*/ 37 38 39if (!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} view plain | print | ? /* 这是包含错误的原版本 if (!Function.prototype.apply) { // Based on code from [URL]http://www.youngpup.net/[/URL] Function.prototype.apply = function(object, parameters) { var parameterStrings = new Array(); if (!object) object = window; if (!parameters) parameters = new Array(); for (var i = 0; i < parameters.length; i++) parameterStrings[i] = 'x[' + i + ']'; //Error 1 object.__apply__ = this; var result = eval('obj.__apply__(' + //Error 2 parameterStrings[i].join(', ') + ')'); object.__apply__ = null; return result; } } */ if (!Function.prototype.apply) { Function.prototype.apply = function(object, parameters) { var parameterStrings = new Array(); if (!object) object = window; if (!parameters) parameters = new Array(); for (var i = 0; i < parameters.length; i++) parameterStrings[i] = 'parameters[' + i + ']'; object.__apply__ = this; var result = eval('object.__apply__(' + parameterStrings.join(', ') + ')'); object.__apply__ = null; return result; } } 接下来是我模仿着编写的一个 Effect 的一个子类,用来实现闪烁的效果。 1Effect.Blink = Class.create(); 2 3Effect.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}; view plain | print | ? Effect.Blink = Class.create(); Effect.Blink.prototype = { initialize: function(element, frequency) { this.element = $(element); this.frequency = frequency?frequency:1000; this.element.effect_blink = this; this.blink(); }, blink: function() { if (this.timer) clearTimeout(this.timer); try { this.element.style.visibility = this.element.style.visibility == 'hidden'?'visible':'hidden'; } catch (e) {} this.timer = setTimeout(this.blink.bind(this), this.frequency); } };
使用也很简单, 调用 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.