事件工具类

/* addEvent: simplified event attachment */
function addEvent( obj, type, fn ) {if (obj.addEventListener) {obj.addEventListener( type, fn, false );EventCache.add(obj, type, fn);}else if (obj.attachEvent) {obj["e"+type+fn] = fn;obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }obj.attachEvent( "on"+type, obj[type+fn] );EventCache.add(obj, type, fn);}else {obj["on"+type] = obj["e"+type+fn];}
}var EventCache = function(){var listEvents = [];return {listEvents : listEvents,add : function(node, sEventName, fHandler){listEvents.push(arguments);},flush : function(){var i, item;for(i = listEvents.length - 1; i >= 0; i = i - 1){item = listEvents[i];if(item[0].removeEventListener){item[0].removeEventListener(item[1], item[2], item[3]);};if(item[1].substring(0, 2) != "on"){item[1] = "on" + item[1];};if(item[0].detachEvent){item[0].detachEvent(item[1], item[2]);};item[0][item[1]] = null;};}};
}();
addEvent(window,’unload',EventCache.flush);
/* window 'load' attachment */
function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;}else {window.onload = function() {oldonload();func();}}
}

JS劫持操作—模拟JS验证框架(单例应用)

GiantCorp.RegPage = {FORM_ID: 'reg-form',OUTPUT_ID: 'reg-results',// Form handling methods.handleSubmit: function(e) {e.preventDefault(); // Stop the normal form submission.var data = {};var inputs = GiantCorp.RegPage.formEl.getElementsByTagName('input');for(var i = 0, len = inputs.length; i < len; i++) {data[inputs[i].name] = inputs[i].value;}GiantCorp.RegPage.sendRegistration(data);},sendRegistration: function(data) {// Make an XHR request and call displayResult() when the response is},displayResult: function(response) {GiantCorp.RegPage.outputEl.innerHTML = response;},// Initialization method.init: function() {// Get the form and output elements.GiantCorp.RegPage.formEl = $(GiantCorp.RegPage.FORM_ID);GiantCorp.RegPage.outputEl = $(GiantCorp.RegPage.OUTPUT_ID);// Hijack the form submission.addEvent(GiantCorp.RegPage.formEl, 'submit', GiantCorp.RegPage.handleSubmit);}
};// Invoke the initialization method after the page loads.
addLoadEvent(GiantCorp.RegPage.init);

运行过程中动态改变类实现(工厂应用)

有些时候为了适应没的场景，有些代码没必要每次调用时都进行一次环境判断，所以可以memoizing技术动态改写运行中代码的实现。

createXhrObject: function() { // Factory method.var methods = [function () {return new XMLHttpRequest();},function () {return new ActiveXObject('Msxml2.XMLHTTP');}];for (var i = 0, len = methods.length; i < len; i++) {try {methods[i]();}catch (e) {continue;}//如果得到与环境相同的合法参数，就改变函数的内容，下面两条语句任选其一this.createXhrObject = methods[i]; // Memoize the method.//this.constructor.prototype.createXhrObject = methods[i];return methods[i];}
}

请求序列—工厂应用

发起多个请求，程序会自动缓存，并通过setTimeOut重复调用。

var myHandler = XhrManager.createXhrHandler();
var callback = {success: function(responseText) { alert('Success: ' + responseText); },failure: function(statusCode) { alert('Failure: ' + statusCode); }
};
myHandler.request('GET', 'script.php', callback);var XhrManager = {createXhrHandler: function() {var xhr;if(this.isOffline()) {xhr = new OfflineHandler();}else if(this.isHighLatency()) {xhr = new QueuedHandler();}else {xhr = new SimpleHandler()}Interface.ensureImplements(xhr, AjaxHandler);return xhr},isOffline: function() { // Do a quick request with SimpleHandler and see if},isHighLatency: function() {//检查请求所经历的时间，根据时间长短来判断请求成功与否}
};var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXhrObject']);/* SimpleHandler class. */
var SimpleHandler = function() {}; // implements AjaxHandler
SimpleHandler.prototype = {request: function(method, url, callback, postVars) {var xhr = this.createXhrObject();xhr.onreadystatechange = function() {if(xhr.readyState !== 4) return;(xhr.status === 200) ?callback.success(xhr.responseText, xhr.responseXML) :callback.failure(xhr.status);};xhr.open(method, url, true);if(method !== 'POST') postVars = null;xhr.send(postVars);},createXhrObject: function() { // Factory method.var methods = [function() { return new XMLHttpRequest(); },function() { return new ActiveXObject('Msxml2.XMLHTTP'); },function() { return new ActiveXObject('Microsoft.XMLHTTP'); }];for(var i = 0, len = methods.length; i < len; i++) {try {methods[i]();}catch(e) {continue;}this.createXhrObject = methods[i];return methods[i];}throw new Error('SimpleHandler: Could not create an XHR object.');}
};/* 用户处于离线状态时会把所有请求缓存起来. */
var OfflineHandler = function() { // implements AjaxHandlerthis.storedRequests = [];
};
extend(OfflineHandler, SimpleHandler);
OfflineHandler.prototype.request = function(method, url, callback, postVars) {if(XhrManager.isOffline()) { // Store the requests until we are online.this.storedRequests.push({method: method,url: url,callback: callback,postVars: postVars});}else { // Call SimpleHandler's request method if we are online.this.flushStoredRequests();OfflineHandler.superclass.request(method, url, callback, postVars);}
};
OfflineHandler.prototype.flushStoredRequests = function() {for(var i = 0, len = storedRequests.length; i < len; i++) {var req = storedRequests[i];OfflineHandler.superclass.request(req.method, req.url, req.callback,req.postVars);}
};/* 在发起新请求之前确保所有的请求都已成功处理. 如果有未完成的或有正在处理的则在请定时间后再调用*/
var QueuedHandler = function() { // implements AjaxHandlerthis.queue = [];this.requestInProgress = false;this.retryDelay = 5; // In seconds.
};
extend(QueuedHandler, SimpleHandler);
QueuedHandler.prototype.request = function(method, url, callback, postVars,override) {if(this.requestInProgress && !override) {this.queue.push({method: method,url: url,callback: callback,postVars: postVars});}else {this.requestInProgress = true;var xhr = this.createXhrObject();var that = this;xhr.onreadystatechange = function() {if(xhr.readyState !== 4) return;if(xhr.status === 200) {callback.success(xhr.responseText, xhr.responseXML);that.advanceQueue();}else {callback.failure(xhr.status);setTimeout(function() { that.request(method, url, callback, postVars); },that.retryDelay * 1000);}};xhr.open(method, url, true);if(method !== 'POST') postVars = null;xhr.send(postVars);}
};
QueuedHandler.prototype.advanceQueue = function() {if(this.queue.length === 0) {this.requestInProgress = false;return;}var req = this.queue.shift();this.request(req.method, req.url, req.callback, req.postVars, true);
};

性能检查器—装饰应用

这个例子充分应用了通道方法，利用此模式应该可以做到AOP的功能。

var ListBuilder = function(parent, listLength) {this.parentEl = document.createElement(parent);this.listLength = listLength;
};ListBuilder.prototype = {buildList: function() {var list = document.createElement('ol');this.parentEl.appendChild(list);for(var i = 0; i < this.listLength; i++) {var item = document.createElement('li');list.appendChild(item);}}
};var MethodProfiler = function(component) {this.component = component;this.timers = {};for(var key in this.component) {// Ensure that the property is a function.if(typeof this.component[key] !== 'function') {continue;}// Add the method.var that = this;(function(methodName) {that[methodName] = function() {that.startTimer(methodName);var returnValue = that.component[methodName].apply(that.component,arguments);that.displayTime(methodName, that.getElapsedTime(methodName));return returnValue;};})(key); }
};
MethodProfiler.prototype = {startTimer: function(methodName) {this.timers[methodName] = (new Date()).getTime();},getElapsedTime: function(methodName) {return (new Date()).getTime() - this.timers[methodName];},displayTime: function(methodName, time) {console.log(methodName + ': ' + time + ' ms');}
};var list = new ListBuilder('list-container', 5000);
list = new MethodProfiler(list);//装饰者应用
list.buildList('ol'); // Displays "buildList: 301 ms".
list.buildList('ul'); // Displays "buildList: 287 ms".
list.removeLists('ul'); // 未实现，如果有此方法则会自动计算时间.