prototype.js 源码解读, 中文帮助文档

prototype 1.3 源码解读Tag：JavaScript prototype /*prototype 1.3.1 版本和之前的 1.2.0 版本有了不少改进,并增加了新的功能： 1. 增加了事件注册管理 2. 增加了空间定位的常用函数 3. 改善了 xmlhttp 的封装 4. 移除了 Effect.js，交给 Rico 或者 script.aculo.us 这些扩展库类实现。 5. bug 修复 代码: */ /** * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: '1.3.1', // 一个空方法，其后的代码常会用到，先前的版本该方法被定义于 Ajax 类中。 emptyFunction: function() {} } /** * 创建一种类型，注意其属性 create 是一个方法，返回一个构造函数。 * 一般使用如下 * var X = Class.create(); 返回一个类型，类似于 java 的一个Class实例。 * 要使用 X 类型，需继续用 new X()来获取一个实例，如同 java 的 Class.newInstance()方法。 * * 返回的构造函数会执行名为 initialize 的方法， initialize 是 Ruby 对象的构造器方法名字。 * 此时initialize方法还没有定义，其后的代码中创建新类型时会建立相应的同名方法。 * */ var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } /** * 创建一个对象，从变量名来思考，本意也许是定义一个抽象类，以后创建新对象都 extend 它。 * 但从其后代码的应用来看， Abstract 更多是为了保持命名空间清晰的考虑。 * 也就是说，我们可以给 Abstract 这个对象实例添加新的对象定义。 */ var Abstract = new Object(); Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destination; } /** * 获取参数对象的所有属性和方法，有点象多重继承。但是这种继承是动态获得的。 * 如： * 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; * } * * 新的形式新定义了一个静态方法 Object.extend，这样做的目的大概是为了使代码更为清晰 */ Object.prototype.extend = function(object) { return Object.extend.apply(this, [this, object]); } /** * 这个方法很有趣，它封装一个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 http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp * 阅读其后的代码就会发现，bind 被应用的很广泛，该方法和 Object.prototype.extend 一样是 Prototype 的核心。 * 还有一个 call 方法，应用起来和 apply 类似。可以一起研究下。 */ Function.prototype.bind = function(object) { var __method = this; return function() { __method.apply(object, arguments); } } /** * 和bind一样，不过这个方法一般用做html控件对象的事件处理。所以要传递event对象 * 注意这时候，用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参数形式的定义。 */ 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() { setInterval(this.onTimerEvent.bind(this), this.frequency * 1000); }, onTimerEvent: function() { if (!this.currentlyExecuting) { try { this.currentlyExecuting = true; this.callback(); } finally { this.currentlyExecuting = false; } } } } /*--------------------------------------------------------------------------*/ /** * 这个函数就 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; } /** * 为兼容旧版本的浏览器增加 Array 的 push 方法。 */ if (!Array.prototype.push) { Array.prototype.push = function() { var startLength = this.length; for (var i = 0; i < arguments.length; i++) this[startLength + i] = arguments[i]; return this.length; } } /** * 为兼容旧版本的浏览器增加 Function 的 apply 方法。 */ if (!Function.prototype.apply) { // Based on code from http://www.youngpup.net/ 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; } } /** * 扩展 javascript 内置的 String 对象 */ String.prototype.extend({ /** * 去掉字符串中的<html>标签 */ stripTags: function() { return this.replace(/<\/?[^>]+>/gi, ''); }, /** * 这个方法很常见，通常的实现都是用正则表达式替换特殊字符为html规范定义的命名实体或者十进制编码，比如： * string.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); * 而这里的实现借用浏览器自身的内部替换，确实巧妙。 */ escapeHTML: function() { var div = document.createElement('div'); var text = document.createTextNode(this); div.appendChild(text); return div.innerHTML; }, /** * 同上 */ unescapeHTML: function() { var div = document.createElement('div'); div.innerHTML = this.stripTags(); return div.childNodes[0].nodeValue; } }); /** * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象 */