Javascriptの関数オブジェクト(8)DOMオブジェクトマネージャ

対話式のWebページを開発して、情報を表示したり、ユーザーから入力を受けたりするためのダイアログが必要です.
 
ダイアログの作成は、ページ上のいくつかのDOMノードの生成と挿入に対応しており、これらのDOMノードを除去するオーバーヘッドを考慮して、
 
ダイアログの閉じは、これらのDOMノードをページ上に非表示にするだけです.以下はjs生成ダイアログの例である.
 

var Dialog = function(){
	
	this.element = document.createElement('div'); //        DOM  
	this.element.style.display = 'none'; //   div   
	this.element.style.position = 'absolute'; //   div            
	this.element.style.border = 'gray solid'; // Dialog       
	this.element.className = 'dialog';
	//     body         div  
	document.getElementsByTagName('body')[0].appendChild(this.element);
};

Dialog.prototype = { //         Dialog      
	show: function(x,y, contentHTML){
		//    HTML          ，       div   
		this.element.innerHTML = contentHTML;
		this.element.style.left = x + 'px'; //  div       
		this.element.style.top = y + 'px'; //  div       
		this.element.style.display = 'block'; //   div  
	},
	
	hide: function(){
		this.element.style.display = 'none'; //   div   
	},
	
	isVisible: function(){
		if(this.element.style.display == 'none'){
			return false;
		}else return true;
	}
};

var myDialog = new Dialog();
myDialog.show(200,100, '<h1>This is a dialog!</h1>');

 
上記のコードは、ダイアログのDOMノードからのオーバーヘッドを除去することを回避したが、ダイアログDOMノードを作成するプロセスは依然としてオーバーヘッドをもたらす.
 
ユーザーが「開く」＋「閉じる」ダイアログを繰り返すと、多くのDOMノードが発生し、ブラウザの応答速度が遅くなり、ユーザー体験に影響を与えます.
 
DOMツリーの構造が複雑なページでは、特に顕著である(初期のExtJSでも同様の問題があり、後のバージョンで修正された).
 
以下のコードは、スレッドのプールに似ている原理で、ダイアログオブジェクトマネージャを作成します.
 
ダイアログの表示内容が必要な場合は、まずマネージャを巡回します.使用されていないダイアログがあれば、このダイアログは内容を表示します.
 
現在のすべてのダイアログが使用されている場合、管理者は、新しいダイアログを作成してコンテンツを表示し、管理キューに追加します.
 

//        ，         。            ，        
var DialogManager = (function(){

	var createdDialogs = []; //           ，
	
	return {
		display: function(x, y, contentHTML){
			//          ，             ，       ，
			var hiddenIndex = 0;
			for(var i=0, len=createdDialogs.length; i<len; i++ ){
				
				if(!createdDialogs[i].isVisible()){
					createdDialogs[i].show(x, y, contentHTML);
					hiddenIndex = i;
					break;
				}
			}
			//               ，                 
			if(hiddenIndex == 0){
				var newDialog = new Dialog();
				newDialog.show(x, y, contentHTML);
				createdDialogs.push(newDialog);
				console.log('Dialog '+createdDialogs.length+' has been created!');
			}
		}
	}
})();

//            
DialogManager.display(300,200,'<h1>This is a managed dialog!</h1>');
DialogManager.display(300,300,'<h1>This is another managed dialog!</h1>');

 
DOMノードの作成および削除に関するこれらの性能に大きな影響を及ぼす動作において、それらのライフサイクルに対するホストはすべてのjsフレームの重要な内容である.
 
さらに、大きなjsオブジェクト自体も、複雑なデータタイプを含むjsonオブジェクトのように、頻繁にそれらを作成・削除する前に、性能上の影響を考慮する必要があります.