/* 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();
}
}
}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 AjaxHandler
this.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 AjaxHandler
this.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'); // 未实现，如果有此方法则会自动计算时间.