【代碼筆記】js代理模式

代理模式

特色：代理能夠在請求發到真正應答方以前，對請求作一些預處理，幫助減輕真正請求應答方的責任，有利於函數單一職責化，下降模塊耦合性。根據預處理的動做分類可分爲 保護代理（過濾不合法請求），虛擬代理（爲請求選擇適合的執行時間），緩存代理（在訪問應答方以前先訪問代理中的緩存）等及其變形。

實現思路：在真正接受請求的應答方以前加一層代理，負責對請求的預處理。

/* 代理模式
*  B經過proxy向A請求 B.doSomethingToA( proxy );
*/
var A = function  () {
	doSomething: function  ( args ) {
		//...
	}
}
var proxy = function  () {
	doSomething: function  ( args ) {
		// ...preprocessing
		// proprocessor done, go to A
		A.doSomething( args )
	}
}
var B = function  () {
	doSomethingToA: function  ( target ) {
		var args;
		target.doSomething( args );
	}
}

示例：

//示例：圖片預加載
/* myImage.jpg 要顯示的圖片 @myImage 至關於模板中的A */
var myImage = (function  () {
	var imgNode = document.createElement( 'img' );
	document.body.appendChild( imageNode );
	return {
		setSrc: function  ( src ) {
			imgNode.src = src;
		}
	}
})();
var proxy = (function  () {
	var img = new Image;
	img.onload = function  () {
		myImage.setSrc( this.src );
	}
	return {
		setSrc: function  ( src ) {
			myImage.setSrc( 'loading.gif' );
			img.src = src;
		}
	}
})();
proxy.setSrc( 'myImage.jpg' );

//示例：緩存代理
var fn = function  () {
	// do something..
}
var proxy = (function  () {
	var cache = {};
	return function  () {
		var args = Array.prototype.join.call( arguments,',' );
		if( args in cache ){
			return cache[ args ];
		}
		return cache[ args ] = fn.apply( this, arguments );
	}
})();
//擴展：緩存代理工廠
var prodA = function  () {
	// 
}
var prodB = function  () {
	// 
}
var prodC = function  () {
	// 
}
var createProxyFactory = function  ( fn ) { //傳入fn參數來動態建立緩存代理
	var cache = {};
	return function  () {
		var args = Array.prototype.join.call( arguments,',' );
		if( args in cache ){
			return cache[ args ];
		}
		return cache[ args ] = fn.apply( this, arguments );
	}
};
var proxyA = createProxyFactory( prodA );
var proxyB = createProxyFactory( prodB );
var proxyC = createProxyFactory( prodC );
proxyA();
proxyB();
proxyC();