構造型設計モード-多重化可能性を高める(ブリッジモード、享元モード、テンプレート方法モード)

多重化のポイント:

オブジェクトは再利用できます.

を変更しなくても大丈夫です.

重複コードが少ない

モジュール機能単一

 
ブリッジモード
目的:結合の代わりにブリッジを通して、アプリケーションシーン:モジュール間の結合を低減し、
一:基本構造

//      ,          

//                  
function rect(color){
	showcolor(color)
}
function circle(color){
	showcolor(color)
}
function delta(color){
	showcolor(color)
}
//     
function showcolor(color){
	
}
//             
new circle('red');
//             3      ,      9          

二:例
例:選択効果の違いを作成します.
需要:メニューのセットがあります.上のオプションはそれぞれ違った効果があります.

// menu1,menu2,menu3
function menuItem(word,color){
	this.word = word;
	this.dom = document.createElement('div');
	this.dom.innerHTML = this.word;
	this.color = color;
}
//     
menuItem.prototype.bind = function(){
	var self = this;
	this.dow.onmouseover = function(){
		this.style.color = self.color.cOver;
	}
	this.dom.onmouseout = function(){
		this.style.color = self.color.cOut;
	}
}
//       
function menuColor(cOver,cOut){
	this.cOver = cOver;
	this.cOut = cOut;
}
//         
var data = [
	{
		word:'menu1',
		color:['red','yellow']
	},{
		word:'menu2',
		color:['red','yellow']
	}
]
for (var i = 0;i

例:Expreeでgetを作成するなどの方法
需要:expressの中にget、postなど7、8の方法がありますが、どうやって速く作成できますか?

   express ,    
app.get   get     
app.post   post     
app.delete   delete     


       
function express(){
	
}
//  express  methods      ,      require   ,        
var methods = ['get','post','delete','put'];
methods.forEach(function(method){
	app[method] = function(){
		//         route    ,  route  method
		route[method].apply(route,slice.call(arguments,1))
	}
})

 
享元モード
目的:対象/コードの数を減らし、シーンを適用する:コードの中に類似のオブジェクトと同様のコードブロックが大量に作成された場合
一:基本構造

//            ,        ,        ,              
function Pop(){
	
}
//        
Pop.prototype.action = function(){
	
}
Pop.prototype.show = function(){
	//     
}
//                       
var popArr = [
	{text:'this is win1',style:[400,400]},
	{text:'this is win2',style:[400,100]},
]
var poper = new Pop();
for (var i=0;i<100;i++) {
	poper.show(popArr[i])
}
ps:      ,   new100 ;             ,                  ,

二:適用例
例:ファイルアップロード
需要:プロジェクトにはファイルアップロードの機能があります.この機能は複数のファイルをアップロードすることができます.

//          
var data = [
	{
		type:'img',
		file:'file1'
	},{
		type:'word',
		file:'file2'
	}
]

function uploader(){
	
}
uploader.prototype.init = function(){
	//         html
}
uploader.prototype.delete = function(){
	//     html
}
uploader.prototype.uploading = function(fileType,file){
	//   
}
var uploader = new uploader();
for(var i=0;i

jQueryのexted
需要:extens方法はパラメータの数を判断して異なる操作を行う必要があります.

//   extend        
$.extend({a:1});//        ,     jQuery   
$.extend({a:1},{b:1});//    ,        {a:1,b:1}

function extend(){
	//           arg
	var target = arguments[0];
	//         
	var source;
	
	if(arguments==1){
		target = this;
		source = arguments[0];
	}else{
		target = arguments[0];
		source = arguments[1];
	}
	
	for(var item in source){
		target[item] = source[item]
	}
	
	//             
	// if(arguments==1){
	// 	for(var item in arguments[0]){
	// 		        ,    this 
	// 		this[item] = arguments[0][item]
	// 	}
	// }else{
	// 	for(var item in arguments[1]){
	// 		     ,          arg 
	// 		arguments[0][item] = arguments[1][item]
	// 	}
	// }
}

テンプレートモード
目的:一連の操作の骨組みを定義し、後の同様の操作の内容を簡略化し、応用シーン:プロジェクトに多くの類似の操作内容が現れた場合.
一:基本構造

//                             
function baseNav(){
	//             
}
baseNav.prototype.action = function(fn){
	//      ,            
}
ps:                                                     

二:適用例
例:1つのボックスコンポーネントを作成する(引き継ぎ)
需要:プロジェクトには一連のパチンコがあります.各パチンコの行為の大きさは文字と違っています.

//          
function basePop(word,size){
	this.word = word;
	this.size = size;
	this.dom = null;
}
//      
basePop.prototype.init = function(){
	var div = document.createElement('div');
	div.innerHTML = this.word;
	div.style.width = this.size.width + 'px';
	div.style.height = this.size.height + 'px';
	this.dom = div;
}
//     
basePop.prototype.hidden = function(){
	this.dom.style.display = 'none';
}
basePop.prototype.confirm = function(){
	this.dom.style.display = 'none';
}

//        (ajax  ),         
function ajaxPop(word,siez){
	basePop.call(this,word,size);
}
//        
ajaxPop.prototype = new basePop();

//          
var hidden = ajaxPop.prototype.hidden;
//         
ajaxPop.prototype.hidden = function(){
	//           
	hidden.call(this);
	//        
	console.log(1);
}

//       
var confirm = ajaxPop.prototype.confirm;
ajaxPop.prototype.confirm = function(){
	confirm.call(this);
	console.log(2);
}

例:パッケージ化アルゴリズム計算機(組み合わせ)
需要:今は一連の自分のアルゴリズムがありますが、このアルゴリズムは違うところでいくつかの異なる操作を追加する必要があります.

function counter(){
	//     ,      
	this.beforeCounter = [];
	this.afterCounter = [];
}

//     (    ,    )
counter.prototype.addBefore = function(fn){
	//    push   
	this.beforeCounter.push(fn);
}
counter.prototype.addAfter = function(fn){
	//    push   
	this.afterCounter.push(fn);
}

//       
counter.prototype.count = function(){
	var _resultnum = num;
	var _arr = [baseCount];
	
	//  _arr       
	_arr = this.beforeCounter.concat(_arr);
	_arr = _arr.concat(this.afterCounter);
	
	function baseCount(num){
		// num         
		num+=4;
		num*=4;
		return num;
	}
	//      0          ,           _resultnum   _resultnum;
	while(_arr.length>0){
		_resultnum = _arr.shift()(_resultnum);
	}
	return _resultnum;
}

//         
var counterObj = new counter();
counterObj.addBefore(function(num){
	num--;
	return num;
})
counterObj.addAfter(function(num){
	num*=2;
	return num;
})
counterObj.count(10);