JAvascript学習(10)——[知識備蓄]チェーンコール

前回は簡単に注文例の使い方を話しましたが、これもjavaでよく見られるデザインモデルです.
今日はチェーン呼び出しを簡単に言えば、チェーン呼び出しを聞いたことがない人が多いかもしれませんが、実は私が簡単に言えば、あなたは基本的に使っているに違いありません.よく知られているjQueryでは、私たちは通常1つの関数を呼び出した後、newの新しいオブジェクトに行く必要はありません.これが典型的なチェーン呼び出しです.
まず例を挙げて、チェーン呼び出しではなく、不便な点を説明します.
 

/**

 *                

 */

(function(){

	//    cat

	function Cat(name){

		this.name = name;

		this.run = function(){

			document.write(name+ " start run");

		}

		this.stopRun = function(){

			document.write(name+ " stop run");

		}

		this.sing = function(){

			document.write(name+ " start sing");

		}

		this.StopSing = function(){

			document.write(name+ " stop sing");

		}		

	}

	//  

	var c = new Cat("abc");

	c.run();

	c.sing();

	c.StopSing();

	c.stopRun();

})()

次に、上の非チェーン呼び出しと比較するために、次のチェーン呼び出しの利点を例に挙げて説明します.
 
 

/**

 *                

 */

(function(){

	//    cat

	function Cat(name){

		this.name = name;

		this.run = function(){

			document.write(name+ " start run");

			return this;

		}

		this.stopRun = function(){

			document.write(name+ " stop run");

			return this;

		}

		this.sing = function(){

			document.write(name+ " start sing");

			return this;

		}

		this.StopSing = function(){

			document.write(name+ " stop sing");

			return this;

		}		

	}

	//  

	var c = new Cat("abc");

	c.run().stopRun().sing().StopSing();

})()

以上の2つの例も、チェーン呼び出しと非チェーン呼び出しの違いを比較的簡単に説明した.
 
では、jqueryのチェーン呼び出しの例を真似します.
 

/**

 *   jquery     

 */

//   (Function)    ,            

Function.prototype.method = function(name,fn){

	this.prototype[name] = fn;

	return this;

};

(function(){

	//             

	function _$(els){};	

	//    

	_$.onready = function(obj,fn){

		if(obj){

			//      (_$)   window 

			obj.$ = function(){

				return new _$(arguments);

			}			

		}else{

			//      (_$)   window 

			window.$ = function(){

				return new _$(arguments);

			}

		}

		fn();

	}

	//       jquery        

	_$.method("addEvent",function(type,fn){

		fn();

	}).method("getEvent",function(fn,e){

		fn();

	}).method("addClass",function(className){

		fn();

	}).method("removeClass",function(className){

		fn();

	}).method("replaceClass",function(oldClass,newClass){

		fn();

	}).method("getStyle",function(el,fn){

		fn();

	}).method("setStyle",function(el,fn){

		fn();

	}).method("load",function(url,fn){

		fn();

	});

	//    

	var com = {};

	_$.onready(com,function(){

//		$("div01").addEvent("click",function(){

//			alert("click Event");

//		})

		com.$("div01").addEvent("click",function(){

			alert("click Event");

			com.$(this).getEvent(function(){

				alert("click getEvent");

			})

		})		

	})

})()

 
 
上の例も簡単に説明して、みんなに役に立つことを望んで、どんな問題があったらすぐに交流します.