/* Prototype JavaScript framework, version 1.4.0 * (c) 2005 Sam Stephenson <sam@conio.net> * * Prototype is freely distributable under the terms of an MIT-style license. * For details, see the Prototype web site: http://prototype.conio.net/ * 这是一个JavaScript的框架,致力于简化动态的Web开发，完全按照面对对象的思想 * 进行Javascript开发，添加了迭代器的概念增强Javascript的设计能力。 * Prototype框架构思独特充满了技巧性的代码，方便易用的工具类！ */*--------------------------------------------------------------------------*/ /* 【Prototype】定义一个全局对象,提供一个全局的基本信息和工具 */var Prototype = { Version: '1.4.0', //可以作为版本检测用//用于脚本检测的正则表达式，经常使用所以放在这里起到全局常量的作用 ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)', emptyFunction: function() {},//空函数 K: function(x) {return x}//K方法返回参数本身，在后面经常用到}/*========================================================================================*//* *【Class】对象的作用只有一个就是提供了一个定义类的模式 * 仅含有create 一个方法，返回一个构造函数。 * 一般使用如下 * var X = Class.create(); 返回一个类型 * 要使用 X 类型，需继续用 new X()来获取一个实例 这与C# JAVA类似 * 返回的构造函数会执行名为 initialize 的方法， initialize 是 Ruby 对象的构造器方法名字。 * 此时initialize方法还没有定义，其后的代码中创建新类型时会建立相应的同名方法,可以看作是一个抽象方法。 * 从C#角度讲可以理解为用Class.create()创建一个继承Object基类的类。 * */ var Class = { create: function() { return function() { //下面使用Apply方法传递参数是一个常用的技巧 this.initialize.apply(this, arguments); } }}/*========================================================================================*///Abstract是一个空对象，它的作用仅仅是作为一个抽象的命名空间，所有在该对象下定义的类都是抽象类//从而从形式上与实体类分开var Abstract = new Object();/* *Object是所有对象的基类，这个基类有两个静态方法 */ //把Source的所有属性和方法传递给Destination，实现了继承的效果Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destination;}//观察Object的组成，需要参数中的object实现自己的inspect方法Object.inspect = function(object) { try { if (object == undefined) return 'undefined'; if (object == null) return 'null'; return object.inspect ? object.inspect() : object.toString(); } catch (e) { if (e instanceof RangeError) return ''; throw e; }}/*========================================================================================*///【Function】是所有函数对象的基类，可以通过对它的扩展实现对所有函数对象添加功能/* 这里在绑定的时候旧可以传递参数而不是调用的时候才指定参数，bind方法接收多个参数 将函数绑定到第一个参数指定的对象上，并返回该方法的调用句柄*/Function.prototype.bind = function() { // $A()方法的作用是把参数专为数组 //数组的shift方法作用是删除数组的第一个元素 var __method = this, args = $A(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat($A(arguments))); //这里的$A(arguments)是条用返回函数句柄时传递的参数，不是bind方法的参数 }}/** * 和bind一样，不过这个方法一般用做html控件对象的事件处理。所以要传递event对象 * 好像是重载了_method方法 */ Function.prototype.bindAsEventListener = function(object) { var __method = this; return function(event) { return __method.call(object, event || window.event); }}/*========================================================================================*///【Function】是所有数值类型的基类Object.extend(Number.prototype, { toColorPart: function() { //RGB-》16进制颜色 var digits = this.toString(16); if (this < 16) return '0' + digits; return digits; }, succ: function() { //数值加一 var a=1; var b=a.succ; 那么b=2 return this + 1; }, times: function(iterator) { //这里的参数iterator是一个迭代器作用就是循环调用指定次数的iterator函数 //$R(start,end,exclusive)是创建ObjectRnge对象的快捷方式 $R(0, this, true).each(iterator); return this; }});/*========================================================================================*///提供了一个方法these，要求参数是函数的句柄，可以有多个。作用就是返回第一个成功执行的函数的返回值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; }}/*========================================================================================*///定时器类用来实现Window.setInterval的效果，在给定时间间隔执行某一个函数，增加了对重复执行的控制Svar PeriodicalExecuter = Class.create();PeriodicalExecuter.prototype = { initialize: function(callback, frequency) { //构造函数指定回调函数和执行频率，单位是秒 this.callback = callback; this.frequency = frequency; this.currentlyExecuting = false; this.registerCallback(); }, /* 开始调用定时器，无需显示调用，在构造函数中就实现了自动调用，这一下面的this.onTimerEvent.bind(this)如果写成this.onTimerEvent则this指针就会指向widows对象即setInterval的默认对象从而不能正确的引用到下面两个函数上，也就失去了对正在执行函数的控制*/ registerCallback: function() { setInterval(this.onTimerEvent.bind(this), this.frequency * 1000); },//下面的函数相当于是回调函数的一个代理， setInterval是到了指定的时间就会强制执行而这里//加入了一个判断如果callback函数执行的时间超过了一个时间片，则阻止其被重复执行 onTimerEvent: function() { if (!this.currentlyExecuting) { try { this.currentlyExecuting = true; this.callback(); } finally { this.currentlyExecuting = false; } } }}/*使用举例：function GetOnlineCount(){//获得在线人数}new PeriodicalExecuter(GetOnlineCount,10)每10秒获取一次*//*========================================================================================*//* 框架核心内容--------【基础工具类】/*========================================================================================*/ /*document.getElementById(id)获取一个指定ID的结点,是这个方法的快捷方式和扩展 可以指定多个参数返回一个对象数组。参数也不一定是ID也可以是对象本身的引用，例如 $('id')等价于$($('id')) */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;}/*========================================================================================*///【String】类的扩展//删除字符串中的HTML标记Object.extend(String.prototype, { stripTags: function() { return this.replace(/<\/?[^>]+>/gi, ''); },//删除字符串中的脚本块 stripScripts: function() { return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), ''); },//提取字符串中的所有脚本块，作为数组返回，每一个脚本作为一个数组元素 extractScripts: function() { var matchAll = new RegExp(Prototype.ScriptFragment, 'img'); var matchOne = new RegExp(Prototype.ScriptFragment, 'im'); return (this.match(matchAll) || []).map(function(scriptTag) { return (scriptTag.match(matchOne) || ['', ''])[1]; }); },//提取字符串中的脚本并执行 evalScripts: function() { return this.extractScripts().map(eval); },//将字符串进行html编码例如"<" --》"<" escapeHTML: function() { var div = document.createElement('div'); var text = document.createTextNode(this); div.appendChild(text); return div.innerHTML; },//对字符串进行html解码例如"<"--》"<" unescapeHTML: function() { var div = document.createElement('div'); div.innerHTML = this.stripTags(); return div.childNodes[0] ? div.childNodes[0].nodeValue : ''; },//将查询字符串格式的字符串转换为键值对数组//例如var s="a=1&b=2&c=3"; var s2=s.toQueryParams(); s2为{a:1,b:2,c:3} toQueryParams: function() { var pairs = this.match(/^\??(.*)$/)[1].split('&'); return pairs.inject({}, function(params, pairString) { var pair = pairString.split('='); params[pair[0]] = pair[1]; return params; }); },//字符串转换为字符数组 "abc"-->['a','b','c'] toArray: function() { return this.split(''); },//连字符--》骆驼样式 'good-man'-->'goodMan' camelize: function() { var oStringList = this.split('-'); if (oStringList.length == 1) return oStringList[0]; var camelizedString = this.indexOf('-') == 0 ? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0]; for (var i = 1, len = oStringList.length; i < len; i++) { var s = oStringList[i]; camelizedString += s.charAt(0).toUpperCase() + s.substring(1); } return camelizedString; },//得到字符串的组成结构 inspect: function() { return "'" + this.replace('\\', '\\\\').replace("'", '\\\'') + "'"; }});//定义了一个等价的函数String.prototype.parseQuery = String.prototype.toQueryParams;/*========================================================================================*///【Enumerable】可枚举接口 是整个1.4.0框架的核心工具，所有实现此接口的类必须要实现_each(iterator)方法var $break = new Object(); //首先定义了两个异常对象，用于进行迭代计算的控制var $continue = new Object();var Enumerable = {//用于对对象的每一个元素遍历执行iterator迭代器函数 each: function(iterator) { var index = 0; //可选参数表示元素在枚举对象的次序 try { this._each(function(value) {//value是枚举元素的值 try { iterator(value, index++); } catch (e) { if (e != $continue) throw e; } }); } catch (e) { if (e != $break) throw e; } },//判断是否所有的枚举元素都能使iterator返回true all: function(iterator) { var result = true; this.each(function(value, index) { result = result && !!(iterator || Prototype.K)(value, index); if (!result) throw $break; }); return result; },//判断是否有枚举元素能使iterator返回true，有一个就是True any: function(iterator) { var result = true; this.each(function(value, index) { if (result = !!(iterator || Prototype.K)(value, index)) throw $break; }); return result; },//对所有的枚举元素执行iterator迭代器函数 结果作为一个数组返回 collect: function(iterator) { var results = []; this.each(function(value, index) { results.push(iterator(value, index)); }); return results; },//第一个素能使iterator返回true的枚举元素的值，没有返回undefined detect: function (iterator) { var result; this.each(function(value, index) { if (iterator(value, index)) { result = value; throw $break; } }); return result; },//找到所有的能使iterator迭代器函数返回true的枚举元素 作为一个数组返回 findAll: function(iterator) { var results = []; this.each(function(value, index) { if (iterator(value, index)) results.push(value); }); return results; },//找到素有匹配pattern的枚举元素，结果作为数组返回，iterator可选，如果不指定旧返回素有匹配pattern的枚举元素 grep: function(pattern, iterator) {//正则模式 迭代器 var results = []; this.each(function(value, index) { var stringValue = value.toString(); if (stringValue.match(pattern)) results.push((iterator || Prototype.K)(value, index)); }) return results; },//判断枚举对象中是否含有参数Object指定的值 include: function(object) { var found = false; this.each(function(value) { if (value == object) { found = true; throw $break; } }); return found; },//将memo作为iterator的第一个参数，枚举元素作为iterator的第二个参数，枚举元素的次序作为第三个//参数每次迭代器的返回值将作为下一个iterator的memo参数，从而所有的迭代执行都通过memo联系起来了 inject: function(memo, iterator) { this.each(function(value, index) { memo = iterator(memo, value, index); }); return memo; },//对所有的枚举元素执行method方法 后面是要传递的参数 invoke: function(method) { var args = $A(arguments).slice(1); return this.collect(function(value) { return value[method].apply(value, args); }); },//返回的最大的迭代器执行结果 max: function(iterator) { var result; this.each(function(value, index) { value = (iterator || Prototype.K)(value, index); if (value >= (result || value)) result = value; }); return result; },//反之 min: function(iterator) { var result; this.each(function(value, index) { value = (iterator || Prototype.K)(value, index); if (value <= (result || value)) result = value; }); return result; },//返回两个数组一组能使iterator返回true 另一组返回false partition: function(iterator) { var trues = [], falses = []; this.each(function(value, index) { ((iterator || Prototype.K)(value, index) ? trues : falses).push(value); }); return [trues, falses]; },//获取所有枚举元素的property属性值作为数组的返回 pluck: function(property) { var results = []; this.each(function(value, index) { results.push(value[property]); }); return results; },//与findall相反 reject: function(iterator) { var results = []; this.each(function(value, index) { if (!iterator(value, index)) results.push(value); }); return results; },//根据iterator的结果排序 最小的在前面 作为数组返回 sortBy: function(iterator) { return this.collect(function(value, index) { return {value: value, criteria: iterator(value, index)}; }).sort(function(left, right) { var a = left.criteria, b = right.criteria; return a < b ? -1 : a > b ? 1 : 0; }).pluck('value'); },//枚举对象--》数组 toArray: function() { return this.collect(Prototype.K); },//接收多个枚举对象参数，最后一个可以是迭代器用于阵列转换 zip: function() { var iterator = Prototype.K, args = $A(arguments); if (typeof args.last() == 'function') iterator = args.pop(); var collections = [this].concat(args).map($A); return this.map(function(value, index) { iterator(value = collections.pluck(index)); return value; }); },//返回枚举对象的字符串描述 inspect: function() { return '#<Enumerable:' + this.toArray().inspect() + '>'; }}//等价函数定义Object.extend(Enumerable, { map: Enumerable.collect, find: Enumerable.detect, select: Enumerable.findAll, member: Enumerable.include, entries: Enumerable.toArray});/*========================================================================================*///【Array】数组对象//参数转换为数组，如果参数定义了toarray则直接调用，否则枚举获得数组var $A = Array.from = function(iterable) { if (!iterable) return []; if (iterable.toArray) { return iterable.toArray(); } else { var results = []; for (var i = 0; i < iterable.length; i++) results.push(iterable[i]); return results; }}//数组对象继承了Enumerable接口Object.extend(Array.prototype, Enumerable);Array.prototype._reverse = Array.prototype.reverse;Object.extend(Array.prototype, {//实现了枚举接口方法，用于对数组内的元素执行迭代器 _each: function(iterator) { for (var i = 0; i < this.length; i++) iterator(this[i]); },//清空数组 clear: function() { this.length = 0; return this; },//取得第一个元素 first: function() { return this[0]; },//取得最后一个元素 last: function() { return this[this.length - 1]; },//删除数组元素中所有的null undefined值 作为新数组返回，原数组不受影响 compact: function() { return this.select(function(value) { return value != undefined || value != null; }); },//展开所有数组元素不再嵌套 flatten: function() { return this.inject([], function(array, value) { return array.concat(value.constructor == Array ? value.flatten() : [value]); }); },//数组中删除指定的元素，返回删除后的结果，原数组不受影响 without: function() { var values = $A(arguments); return this.select(function(value) { return !values.include(value); }); },//Value元素在数组中的索引值 indexOf: function(object) { for (var i = 0; i < this.length; i++) if (this[i] == object) return i; return -1; },//反转数组 reverse: function(inline) { return (inline !== false ? this : this.toArray())._reverse(); },//删除数组中第一个元素并返回这个元素的值 shift: function() { var result = this[0]; for (var i = 0; i < this.length - 1; i++) this[i] = this[i + 1]; this.length--; return result; },//得到数组的字符串描述例如arr=[1,2,3]-----> "[1,2,3]" inspect: function() { return '[' + this.map(Object.inspect).join(', ') + ']'; }});/*========================================================================================*///【Hash】哈希对象var Hash = {//实现枚举接口方法从而使Hash对象也是枚举对象 _each: function(iterator) { for (key in this) { var value = this[key]; if (typeof value == 'function') continue; var pair = [key, value]; pair.key = key; pair.value = value; iterator(pair); } },//所有键数组 keys: function() { return this.pluck('key'); },//所有值数组 values: function() { return this.pluck('value'); },//合并哈希表，键相同就覆盖调用者 merge: function(hash) { return $H(hash).inject($H(this), function(mergedHash, pair) { mergedHash[pair.key] = pair.value; return mergedHash; }); },//键值对组成查询字符串的形式 toQueryString: function() { return this.map(function(pair) { return pair.map(encodeURIComponent).join('='); }).join('&'); },//获取Hash对象的字符串描述 inspect: function() { return '#<Hash:{' + this.map(function(pair) { return pair.map(Object.inspect).join(': '); }).join(', ') + '}>'; }}/*哈希表不是类而是对象所以不能用new的方法创建，而是用$H()函数 这个方法吧一个对象转换为哈希对象，对象的属性名为key 值为value 可枚举！！*/function $H(object) { var hash = Object.extend({}, object || {}); Object.extend(hash, Enumerable); Object.extend(hash, Hash); return hash;}/*========================================================================================*///【ObjectRange】用于进行指定次数的循环运算，同样继承于枚举接口并实现_each方法//有了这个方法基本上Javascript里面就不用for循环了ObjectRange = Class.create();Object.extend(ObjectRange.prototype, Enumerable);Object.extend(ObjectRange.prototype, {//构造函数同事指定了3个参数的值 initialize: function(start, end, exclusive) { this.start = start; //其实索引 this.end = end;//结束索引 this.exclusive = exclusive;//表示是否包含结束索引 }, _each: function(iterator) { var value = this.start; do { iterator(value); value = value.succ(); } while (this.include(value)); },//重写枚举接口的include方法，判断改循环的索引是否包含参数value的指定的值 include: function(value) { if (value < this.start) return false; if (this.exclusive) return value < this.end; return value <= this.end; }});//使用$R()方法快速创建objectRange对象var $R = function(start, end, exclusive) { return new ObjectRange(start, end, exclusive);}/*========================================================================================*//* 【Ajax模块】/*========================================================================================*///【ajax对象】var Ajax = {//创建浏览器兼容的XMLHttpRequest对象 getTransport: function() { return Try.these( function() {return new ActiveXObject('Msxml2.XMLHTTP')}, function() {return new ActiveXObject('Microsoft.XMLHTTP')}, function() {return new XMLHttpRequest()} ) || false; },//当前激活的请求数目 activeRequestCount: 0}//【Ajax.Responders对象】Ajax.Responders = { responders: [],//表示所有响应处理代理 _each: function(iterator) { this.responders._each(iterator); },//注册一个响应代理 register: function(responderToAdd) { if (!this.include(responderToAdd)) this.responders.push(responderToAdd); },//删除一个响应代理 unregister: function(responderToRemove) { this.responders = this.responders.without(responderToRemove); },//分发一个回调函数，让所有半酣callback回调函数事件标识符的响应代理都被调用//传递三个参数最后一个可选表示Json对象 dispatch: function(callback, request, transport, json) { this.each(function(responder) { if (responder[callback] && typeof responder[callback] == 'function') { try { responder[callback].apply(responder, [request, transport, json]); } catch (e) {} } }); }};Object.extend(Ajax.Responders, Enumerable);//统计当前活动请求的数目Ajax.Responders.register({//开始创建了一个请求 onCreate: function() { Ajax.activeRequestCount++; },//请求结束 onComplete: function() { Ajax.activeRequestCount--; }});//【Ajax.Base类】进行服务器通信的基类Ajax.Base = function() {};Ajax.Base.prototype = { setOptions: function(options) { this.options = { method: 'post', asynchronous: true, parameters: '' } Object.extend(this.options, options || {}); }, responseIsSuccess: function() { return this.transport.status == undefined || this.transport.status == 0 || (this.transport.status >= 200 && this.transport.status < 300); }, responseIsFailure: function() { return !this.responseIsSuccess(); }}//【Ajax.Request类】用于向服务器端发送请求，封装了XmlHttpRequestAjax.Request = Class.create();Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'];Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setOptions(options);//使用基类方法设置 this.request(url); },//向指定url发送请求 一般不会显示调用 request: function(url) { var parameters = this.options.parameters || ''; if (parameters.length > 0) parameters += '&_='; try { this.url = url; if (this.options.method == 'get' && parameters.length > 0) this.url += (this.url.match(/\?/) ? '&' : '?') + parameters; Ajax.Responders.dispatch('onCreate', this, this.transport); this.transport.open(this.options.method, this.url, this.options.asynchronous); if (this.options.asynchronous) { this.transport.onreadystatechange = this.onStateChange.bind(this); setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10); } this.setRequestHeaders(); var body = this.options.postBody ? this.options.postBody : parameters; this.transport.send(this.options.method == 'post' ? body : null); } catch (e) { this.dispatchException(e); } },//设置请求的Http头 类内部使用 一般无需显示调用 setRequestHeaders: function() { var requestHeaders = ['X-Requested-With', 'XMLHttpRequest', 'X-Prototype-Version', Prototype.Version]; if (this.options.method == 'post') { requestHeaders.push('Content-type', 'application/x-www-form-urlencoded'); /* Force "Connection: close" for Mozilla browsers to work around * a bug where XMLHttpReqeuest sends an incorrect Content-length * header. See Mozilla Bugzilla #246651. */ if (this.transport.overrideMimeType) requestHeaders.push('Connection', 'close'); } if (this.options.requestHeaders) requestHeaders.push.apply(requestHeaders, this.options.requestHeaders); for (var i = 0; i < requestHeaders.length; i += 2) this.transport.setRequestHeader(requestHeaders[i], requestHeaders[i+1]); },//检测XMLHttpRquest对象的onstatechange事件类内部使用 一般无需显示调用 onStateChange: function() { var readyState = this.transport.readyState; if (readyState != 1) this.respondToReadyState(this.transport.readyState); },//获取指定的Http头的内容 header: function(name) { try { return this.transport.getResponseHeader(name); } catch (e) {} },//如果服务器返回了Http头"X-JOSN"则将其作为js执行并返回执行结果 evalJSON: function() { try { return eval(this.header('X-JSON')); } catch (e) {} },//将XMLHttpRequest返回的responseText作为JS语句执行并返回执行结果 evalResponse: function() { try { return eval(this.transport.responseText); } catch (e) { this.dispatchException(e); } },//处理XMLHttpRequest的readystate属性根据成功或失败调用Options对象中相应的回调函数//同时通知Ajax.Responders中注册的响应处理句柄 respondToReadyState: function(readyState) { var event = Ajax.Request.Events[readyState]; var transport = this.transport, json = this.evalJSON(); if (event == 'Complete') { try { (this.options['on' + this.transport.status] || this.options['on' + (this.responseIsSuccess() ? 'Success' : 'Failure')] || Prototype.emptyFunction)(transport, json); } catch (e) { this.dispatchException(e); } if ((this.header('Content-type') || '').match(/^text\/javascript/i)) this.evalResponse(); } try { (this.options['on' + event] || Prototype.emptyFunction)(transport, json); Ajax.Responders.dispatch('on' + event, this, transport, json); } catch (e) { this.dispatchException(e); } /* Avoid memory leak in MSIE: clean up the oncomplete event handler */ if (event == 'Complete') this.transport.onreadystatechange = Prototype.emptyFunction; }, dispatchException: function(exception) { (this.options.onException || Prototype.emptyFunction)(this, exception); Ajax.Responders.dispatch('onException', this, exception); }});/*========================================================================================*///【Ajax.Updater类】用于将获取的内容填充到指定的容器中去Ajax.Updater = Class.create();Object.extend(Object.extend(Ajax.Updater.prototype, Ajax.Request.prototype), {//重写了构造函数 initialize: function(container, url, options) { this.containers = { success: container.success ? $(container.success) : $(container), failure: container.failure ? $(container.failure) : (container.success ? null : $(container)) } this.transport = Ajax.getTransport(); this.setOptions(options);//可以指定evalscripts属性和insertion属性 var onComplete = this.options.onComplete || Prototype.emptyFunction; this.options.onComplete = (function(transport, object) { this.updateContent(); onComplete(transport, object); }).bind(this); this.request(url); }, updateContent: function() { var receiver = this.responseIsSuccess() ? this.containers.success : this.containers.failure; var response = this.transport.responseText; if (!this.options.evalScripts) response = response.stripScripts(); if (receiver) { if (this.options.insertion) { new this.options.insertion(receiver, response); } else { Element.update(receiver, response); } } if (this.responseIsSuccess()) { if (this.onComplete) setTimeout(this.onComplete.bind(this), 10); } }});/*========================================================================================*///【Ajax.PeriodicalUpdater类】用于定时执行服务器异步调用，功能与Updater相同只是有了定时功能Ajax.PeriodicalUpdater = Class.create();Ajax.PeriodicalUpdater.prototype = Object.extend(new Ajax.Base(), { initialize: function(container, url, options) { this.setOptions(options); this.onComplete = this.options.onComplete;//区别就在下面两个属性 频率 衰减参数 指数增长！只要有一次不同旧回复原有频率 this.frequency = (this.options.frequency || 2); this.decay = (this.options.decay || 1); this.updater = {}; this.container = container; this.url = url; this.start(); }, start: function() { this.options.onComplete = this.updateComplete.bind(this); this.onTimerEvent(); }, stop: function() { this.updater.onComplete = undefined; clearTimeout(this.timer); (this.onComplete || Prototype.emptyFunction).apply(this, arguments); }, updateComplete: function(request) { if (this.options.decay) { this.decay = (request.responseText == this.lastText ? this.decay * this.options.decay : 1); this.lastText = request.responseText; } this.timer = setTimeout(this.onTimerEvent.bind(this), this.decay * this.frequency * 1000); }, onTimerEvent: function() { this.updater = new Ajax.Updater(this.container, this.url, this.options); }});/*========================================================================================*//*【文档操作的封装】/*========================================================================================*///返回了一个数组包含了所有符合条件的结点的引用document.getElementsByClassName = function(className, parentElement) { //parentElement不指定就在全局查找 var children = ($(parentElement) || document.body).getElementsByTagName('*'); return $A(children).inject([], function(elements, child) { if (child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))) elements.push(child); return elements; });}/*【Element对象】用于对文档结点做一些统一的操作*/if (!window.Element) { var Element = new Object();}Object.extend(Element, { visible: function(element) { return $(element).style.display != 'none'; },//指定结点可见性的切换 toggle: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); Element[Element.visible(element) ? 'hide' : 'show'](element); } }, 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); },//将html片段填充到element指定的结点中 update: function(element, html) { $(element).innerHTML = html.stripScripts(); setTimeout(function() {html.evalScripts()}, 10); },//获得element的绝对高度 getHeight: function(element) { element = $(element); return element.offsetHeight; }, classNames: function(element) { return new Element.ClassNames(element); }, hasClassName: function(element, className) { if (!(element = $(element))) return; return Element.classNames(element).include(className); }, addClassName: function(element, className) { if (!(element = $(element))) return; return Element.classNames(element).add(className); }, removeClassName: function(element, className) { if (!(element = $(element))) return; return Element.classNames(element).remove(className); }, // removes whitespace-only text node children cleanWhitespace: function(element) { element = $(element); for (var i = 0; i < element.childNodes.length; i++) { var node = element.childNodes[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node); } }, empty: function(element) { return $(element).innerHTML.match(/^\s*$/); },//将浏览器的滚动条滚动到指定的结点的位置 scrollTo: function(element) { element = $(element); var x = element.x ? element.x : element.offsetLeft, y = element.y ? element.y : element.offsetTop; window.scrollTo(x, y); },//得到element的结点的绝对样式 getStyle: function(element, style) { element = $(element); var value = element.style[style.camelize()]; if (!value) { if (document.defaultView && document.defaultView.getComputedStyle) { var css = document.defaultView.getComputedStyle(element, null); value = css ? css.getPropertyValue(style) : null; } else if (element.currentStyle) { value = element.currentStyle[style.camelize()]; } } if (window.opera && ['left', 'top', 'right', 'bottom'].include(style)) if (Element.getStyle(element, 'position') == 'static') value = 'auto'; return value == 'auto' ? null : value; },//设置结点样式 var style={background-color:'black',color:'red'} Element.setStyle($('div1'),style) setStyle: function(element, style) { element = $(element); for (name in style) element.style[name.camelize()] = style[name]; }, //获得结点的宽度高度 该方法无论结点是否可见 都能获得其大小 getDimensions: function(element) { element = $(element); if (Element.getStyle(element, 'display') != 'none') return {width: element.offsetWidth, height: element.offsetHeight}; // All *Width and *Height properties give 0 on elements with display none, // so enable the element temporarily var els = element.style; var originalVisibility = els.visibility; var originalPosition = els.position; els.visibility = 'hidden'; els.position = 'absolute'; els.display = ''; var originalWidth = element.clientWidth; var originalHeight = element.clientHeight; els.display = 'none'; els.position = originalPosition; els.visibility = originalVisibility; return {width: originalWidth, height: originalHeight}; },//相对定位 makePositioned: function(element) { element = $(element); var pos = Element.getStyle(element, 'position'); if (pos == 'static' || !pos) { element._madePositioned = true; element.style.position = 'relative'; // Opera returns the offset relative to the positioning context, when an // element is position relative but top and left have not been defined if (window.opera) { element.style.top = 0; element.style.left = 0; } } },//取消相对定位 undoPositioned: function(element) { element = $(element); if (element._madePositioned) { element._madePositioned = undefined; element.style.position = element.style.top = element.style.left = element.style.bottom = element.style.right = ''; } },//使结点隐藏超出的部分 overflow=relative makeClipping: function(element) { element = $(element); if (element._overflow) return; element._overflow = element.style.overflow; if ((Element.getStyle(element, 'overflow') || 'visible') != 'hidden') element.style.overflow = 'hidden'; }, undoClipping: function(element) { element = $(element); if (element._overflow) return; element.style.overflow = element._overflow; element._overflow = undefined; }});/*========================================================================================*///Toggle对象是Element.toggle方法的一个快捷用法var Toggle = new Object();Toggle.display = Element.toggle;/*========================================================================================*///【Insertion命名空间】包含了4个类把指定的html片段插入到指定的结点的相应位置上Abstract.Insertion = function(adjacency) { this.adjacency = adjacency;}Abstract.Insertion.prototype = { initialize: function(element, content) { this.element = $(element); this.content = content.stripScripts(); if (this.adjacency && this.element.insertAdjacentHTML) { try { this.element.insertAdjacentHTML(this.adjacency, this.content); } catch (e) { if (this.element.tagName.toLowerCase() == 'tbody') { this.insertContent(this.contentFromAnonymousTable()); } else { throw e; } } } else { this.range = this.element.ownerDocument.createRange(); if (this.initializeRange) this.initializeRange(); this.insertContent([this.range.createContextualFragment(this.content)]); } setTimeout(function() {content.evalScripts()}, 10); }, contentFromAnonymousTable: function() { var div = document.createElement('div'); div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>'; return $A(div.childNodes[0].childNodes[0].childNodes); }}var Insertion = new Object();Insertion.Before = Class.create();Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), { initializeRange: function() { this.range.setStartBefore(this.element); }, insertContent: function(fragments) { fragments.each((function(fragment) { this.element.parentNode.insertBefore(fragment, this.element); }).bind(this)); }});Insertion.Top = Class.create();Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), { initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(true); }, insertContent: function(fragments) { fragments.reverse(false).each((function(fragment) { this.element.insertBefore(fragment, this.element.firstChild); }).bind(this)); }});Insertion.Bottom = Class.create();Insertion.Bottom.prototype = Object.extend(new Abstract.Insertion('beforeEnd'), { initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(this.element); }, insertContent: function(fragments) { fragments.each((function(fragment) { this.element.appendChild(fragment); }).bind(this)); }});Insertion.After = Class.create();Insertion.After.prototype = Object.extend(new Abstract.Insertion('afterEnd'), { initializeRange: function() { this.range.setStartAfter(this.element); }, insertContent: function(fragments) { fragments.each((function(fragment) { this.element.parentNode.insertBefore(fragment, this.element.nextSibling); }).bind(this)); }});/*========================================================================================*///【Element.ClassNames】获得一个结点的所有的class名称组成的对象，实现了枚举接口Element.ClassNames = Class.create();Element.ClassNames.prototype = { initialize: function(element) { this.element = $(element); }, _each: function(iterator) { this.element.className.split(/\s+/).select(function(name) { return name.length > 0; })._each(iterator); }, set: function(className) { this.element.className = className; }, add: function(classNameToAdd) { if (this.include(classNameToAdd)) return; this.set(this.toArray().concat(classNameToAdd).join(' ')); }, remove: function(classNameToRemove) { if (!this.include(classNameToRemove)) return; this.set(this.select(function(className) { return className != classNameToRemove; }).join(' ')); }, toString: function() {//获得所有class的字符串表示空格隔开 return this.toArray().join(' '); }}//表单域对象工具类Object.extend(Element.ClassNames.prototype, Enumerable);var Field = { clear: function() { for (var i = 0; i < arguments.length; i++) $(arguments[i]).value = ''; }, focus: function(element) { $(element).focus(); }, present: function() { for (var i = 0; i < arguments.length; i++) if ($(arguments[i]).value == '') return false; return true; },//选中表单域 select: function(element) { $(element).select(); },//focus + select activate: function(element) { element = $(element); element.focus(); if (element.select) element.select(); }}/*【Form】表单工具对象*/var Form = {//表单数据序列化 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; },//有一个满足就返回 getInputs: function(form, typeName, name) { form = $(form); var inputs = form.getElementsByTagName('input'); if (!typeName && !name) return inputs; var matchingInputs = new Array(); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if ((typeName && input.type != typeName) || (name && input.name != name)) continue; matchingInputs.push(input); } return matchingInputs; },//整个表单域禁用 disable: function(form) { var elements = Form.getElements(form); for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.blur(); element.disabled = 'true'; } },//启用 enable: function(form) { var elements = Form.getElements(form); for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.disabled = ''; } },//获取第一个可用的表单域 findFirstElement: function(form) { return Form.getElements(form).find(function(element) { return element.type != 'hidden' && !element.disabled && ['input', 'select', 'textarea'].include(element.tagName.toLowerCase()); }); },//激活第一个表单域 focusFirstElement: function(form) { Field.activate(Form.findFirstElement(form)); }, reset: function(form) { $(form).reset(); }}//【Form.Element】 对特定的表单域进行操作Form.Element = {//序列化形成"&name=value" serialize: function(element) { element = $(element); var method = element.tagName.toLowerCase(); var parameter = Form.Element.Serializers[method](element); if (parameter) { var key = encodeURIComponent(parameter[0]); if (key.length == 0) return; if (parameter[1].constructor != Array) parameter[1] = [parameter[1]]; return parameter[1].map(function(value) { return key + '=' + encodeURIComponent(value); }).join('&'); } },//获得指定表单域的值 getValue: function(element) { element = $(element); var method = element.tagName.toLowerCase(); var parameter = Form.Element.Serializers[method](element); if (parameter) return parameter[1]; }}//【Form.Element.Serializers】针对不同的表单域进行序列化Form.Element.Serializers = {//一般用所有的<input>标记的序列化都可以 input: function(element) { switch (element.type.toLowerCase()) { case 'submit': 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: function(element) { return Form.Element.Serializers[element.type == 'select-one' ? 'selectOne' : 'selectMany'](element); }, selectOne: function(element) { var value = '', opt, index = element.selectedIndex; if (index >= 0) { opt = element.options[index]; value = opt.value; if (!value && !('value' in opt)) value = opt.text; } return [element.name, value]; }, selectMany: function(element) { var value = new Array(); for (var i = 0; i < element.length; i++) { var opt = element.options[i]; if (opt.selected) { var optValue = opt.value; if (!optValue && !('value' in opt)) optValue = opt.text; value.push(optValue); } } return [element.name, value]; }}//【获得表单域的值】var $F = Form.Element.getValue;/*========================================================================================*//*【Observer模式框架】 观察对象仅仅针对表单和表单域*//*========================================================================================*/Abstract.TimedObserver = function() {}//定义了基于定时器的观察模式基类后面的类都继承了这个类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() { setInterval(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; } }}//【Form.Element.Observer类】实现了getvalue方法Form.Element.Observer = Class.create();Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { getValue: function() { return Form.Element.getValue(this.element); }});//【Form.Observer类】实现了getvalue方法，只要有一个表单域发生变化就会触发回调Form.Observer = Class.create();Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { getValue: function() { return Form.serialize(this.element); }});//【Abstract.EventObserver 类】基于事件的Oberver模式的基类 后面的具体类都继承这个类Abstract.EventObserver = function() {}Abstract.EventObserver.prototype = { initialize: function(element, callback) { this.element = $(element); this.callback = callback; this.lastValue = this.getValue(); if (this.element.tagName.toLowerCase() == 'form') this.registerFormCallbacks(); else this.registerCallback(this.element); },//每次发生事件时被调用 内部调用 无需显示调用 onElementEvent: function() { var value = this.getValue(); if (this.lastValue != value) { this.callback(this.element, value); this.lastValue = value; } },//注册表表单域事件 registerFormCallbacks: function() { var elements = Form.getElements(this.element); for (var i = 0; i < elements.length; i++) this.registerCallback(elements[i]); }, registerCallback: function(element) { if (element.type) { switch (element.type.toLowerCase()) { case 'checkbox': case 'radio': Event.observe(element, 'click', this.onElementEvent.bind(this)); break; case 'password': case 'text': case 'textarea': case 'select-one': case 'select-multiple': Event.observe(element, 'change', this.onElementEvent.bind(this)); break; } } }}//【Form.Element.EventObserver】Form.Element.EventObserver = Class.create();Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { getValue: function() { return Form.Element.getValue(this.element); }});//【Form.EventObserver】Form.EventObserver = Class.create();Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { getValue: function() { return Form.serialize(this.element); }});/*========================================================================================*//*【事件处理:对Event对象的扩展】对javascript事件处理机制进行封装*//*========================================================================================*/if (!window.Event) { var Event = new Object();}Object.extend(Event, { KEY_BACKSPACE: 8, KEY_TAB: 9, KEY_RETURN: 13, KEY_ESC: 27, KEY_LEFT: 37, KEY_UP: 38, KEY_RIGHT: 39, KEY_DOWN: 40, KEY_DELETE: 46,//获取触发事件的对象 element: function(event) { return event.target || event.srcElement; }, isLeftClick: function(event) { return (((event.which) && (event.which == 1)) || ((event.button) && (event.button == 1))); }, pointerX: function(event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); }, pointerY: function(event) { return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); },//停止事件的传递 stop: function(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } }, // find the first node with the given tagName, starting from the // node the event was triggered on; traverses the DOM upwards findElement: function(event, tagName) { var element = Event.element(event); while (element.parentNode && (!element.tagName || (element.tagName.toUpperCase() != tagName.toUpperCase()))) element = element.parentNode; return element; }, observers: false, _observeAndCache: function(element, name, observer, useCapture) { if (!this.observers) this.observers = []; if (element.addEventListener) { this.observers.push([element, name, observer, useCapture]); element.addEventListener(name, observer, useCapture); } else if (element.attachEvent) { this.observers.push([element, name, observer, useCapture]); element.attachEvent('on' + name, observer); } },//删除所有通过Event.observers绑定的事件 unloadCache: function() { if (!Event.observers) return; for (var i = 0; i < Event.observers.length; i++) { Event.stopObserving.apply(this, Event.observers[i]); Event.observers[i][0] = null; } Event.observers = false; },//绑定一个事件 observe: function(element, name, observer, useCapture) { var element = $(element); useCapture = useCapture || false; if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || element.attachEvent)) name = 'keydown'; this._observeAndCache(element, name, observer, useCapture); },//取消事件绑定 stopObserving: function(element, name, observer, useCapture) { var element = $(element); useCapture = useCapture || false; if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || element.detachEvent)) name = 'keydown'; if (element.removeEventListener) { element.removeEventListener(name, observer, useCapture); } else if (element.detachEvent) { element.detachEvent('on' + name, observer); } }});//【结点的位置处理:Position对象】/* prevent memory leaks in IE */Event.observe(window, 'unload', Event.unloadCache, false);var Position = { // set to true if needed, warning: firefox performance problems // NOT neeeded for page scrolling, only if draggable contained in // scrollable elements includeScrollOffsets: false, // must be called before calling withinIncludingScrolloffset, every time the // page is scrolled用于计算滚动条的位置信息 prepare: function() { this.deltaX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; this.deltaY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; },//计算节点的绝对滚动位置返回包含两个元素的数组到文档左侧 顶部的距离 realOffset: function(element) { var valueT = 0, valueL = 0; do { valueT += element.scrollTop || 0; valueL += element.scrollLeft || 0; element = element.parentNode; } while (element); return [valueL, valueT]; },//计算结点相对于文档的绝对滚动位置，返回包含两个元素的数组到文档左侧 顶部的距离 cumulativeOffset: function(element) { var valueT = 0, valueL = 0; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; element = element.offsetParent; } while (element); return [valueL, valueT]; },//相对位置 positionedOffset: function(element) { var valueT = 0, valueL = 0; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; element = element.offsetParent; if (element) { p = Element.getStyle(element, 'position'); if (p == 'relative' || p == 'absolute') break; } } while (element); return [valueL, valueT]; }, offsetParent: function(element) { if (element.offsetParent) return element.offsetParent; if (element == document.body) return element; while ((element = element.parentNode) && element != document.body) if (Element.getStyle(element, 'position') != 'static') return element; return document.body; }, // caches x/y coordinate pair to use with overlap是否在element内 within: function(element, x, y) { if (this.includeScrollOffsets) return this.withinIncludingScrolloffsets(element, x, y); this.xcomp = x; this.ycomp = y; this.offset = this.cumulativeOffset(element); return (y >= this.offset[1] && y < this.offset[1] + element.offsetHeight && x >= this.offset[0] && x < this.offset[0] + element.offsetWidth); }, withinIncludingScrolloffsets: function(element, x, y) { var offsetcache = this.realOffset(element); this.xcomp = x + offsetcache[0] - this.deltaX; this.ycomp = y + offsetcache[1] - this.deltaY; this.offset = this.cumulativeOffset(element); return (this.ycomp >= this.offset[1] && this.ycomp < this.offset[1] + element.offsetHeight && this.xcomp >= this.offset[0] && this.xcomp < this.offset[0] + element.offsetWidth); }, // within must be called directly before overlap: function(mode, element) { if (!mode) return 0; if (mode == 'vertical') return ((this.offset[1] + element.offsetHeight) - this.ycomp) / element.offsetHeight; if (mode == 'horizontal') return ((this.offset[0] + element.offsetWidth) - this.xcomp) / element.offsetWidth; },//克隆结点 常用于拖放 clone: function(source, target) { source = $(source); target = $(target); target.style.position = 'absolute'; var offsets = this.cumulativeOffset(source); target.style.top = offsets[1] + 'px'; target.style.left = offsets[0] + 'px'; target.style.width = source.offsetWidth + 'px'; target.style.height = source.offsetHeight + 'px'; }, page: function(forElement) { var valueT = 0, valueL = 0; var element = forElement; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; // Safari fix if (element.offsetParent==document.body) if (Element.getStyle(element,'position')=='absolute') break; } while (element = element.offsetParent); element = forElement; do { valueT -= element.scrollTop || 0; valueL -= element.scrollLeft || 0; } while (element = element.parentNode); return [valueL, valueT]; }, clone: function(source, target) { var options = Object.extend({ setLeft: true, setTop: true, setWidth: true, setHeight: true, offsetTop: 0, offsetLeft: 0 }, arguments[2] || {}) // find page position of source source = $(source); var p = Position.page(source); // find coordinate system to use target = $(target); var delta = [0, 0]; var parent = null; // delta [0,0] will do fine with position: fixed elements, // position:absolute needs offsetParent deltas if (Element.getStyle(target,'position') == 'absolute') { parent = Position.offsetParent(target); delta = Position.page(parent); } // correct by body offsets (fixes Safari) if (parent == document.body) { delta[0] -= document.body.offsetLeft; delta[1] -= document.body.offsetTop; } // set position if(options.setLeft) target.style.left = (p[0] - delta[0] + options.offsetLeft) + 'px'; if(options.setTop) target.style.top = (p[1] - delta[1] + options.offsetTop) + 'px'; if(options.setWidth) target.style.width = source.offsetWidth + 'px'; if(options.setHeight) target.style.height = source.offsetHeight + 'px'; },//绝对定位 absolutize: function(element) { element = $(element); if (element.style.position == 'absolute') return; Position.prepare(); var offsets = Position.positionedOffset(element); var top = offsets[1]; var left = offsets[0]; var width = element.clientWidth; var height = element.clientHeight; element._originalLeft = left - parseFloat(element.style.left || 0); element._originalTop = top - parseFloat(element.style.top || 0); element._originalWidth = element.style.width; element._originalHeight = element.style.height; element.style.position = 'absolute'; element.style.top = top + 'px';; element.style.left = left + 'px';; element.style.width = width + 'px';; element.style.height = height + 'px';; },//相对定位 relativize: function(element) { element = $(element); if (element.style.position == 'relative') return; Position.prepare(); element.style.position = 'relative'; var top = parseFloat(element.style.top || 0) - (element._originalTop || 0); var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0); element.style.top = top + 'px'; element.style.left = left + 'px'; element.style.height = element._originalHeight; element.style.width = element._originalWidth; }}// Safari returns margins on body which is incorrect if the child is absolutely// positioned. For performance reasons, redefine Position.cumulativeOffset for// KHTML/WebKit only.if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) { Position.cumulativeOffset = function(element) { var valueT = 0, valueL = 0; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; if (element.offsetParent == document.body) if (Element.getStyle(element, 'position') == 'absolute') break; element = element.offsetParent; } while (element); return [valueL, valueT]; }}//--------->完成
