javascript设计模式-应用示例

事件工具类

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