js 设计模式 第六章 chaining

why？

chain 是针对对象的，chain链条上的所有方法都是这个对象的方法

一个没有用chain技巧的

var dom = document.getElementById('dom');
setStyle(dom,'color','green');
show(dom);

如果使用了chain

$('dom').setStyle('color','green').show();

chain技巧，让相关操作，紧密地组织在一起，拥有高内聚的特点。故更优雅、易读、易理解

how？

在类的prototype中，每一个方法的结束，返回this，这样，这个类的方法就可以chainable

what？

jquery 中 $ 的简单模拟实现

(function(){
    function _$(els){
	    this.elements = [];
		for(var i=0,len=els.length;i<len;++i){
		
		    var element = els[i];
			if(typeof element === 'string'){
			    element = document.getElementById(element);
			}
			this.elements.push(element);
		}
	}
	window.$ = function(){
       return new _$(arguments);	
	}
    _$.prototype = {
	    each : function(fn){
	        for(var i=0,len=this.elements.length;i<len;i++){
		        fn.call(this,this.elements[i]);	
			}	
		},
		setStyle : function(prop,val){
		   this.each(function(el){
		       el.style[prop] = val; 
		   }); 
		   return this;
		},
	    show : function(){
		    var that = this;
			this.each(function(el){
			    that.setStyle('display','block');
			});
			return this;
		},
		addEvent: function(type, fn) {
				var add = function(el) {
				if (window.addEventListener) {
				    el.addEventListener(type, fn, false);
				}
				else if (window.attachEvent) {
				    el.attachEvent('on'+type, fn);
				}
				};
				this.each(function(el) {
				    add(el);
				});
				return this;
		}
	};
	window.$ = function(){
	    return new _$(arguments);
	}
		
})();

$(window).addEvent('load',function(){
    $('test-1','test-2').show().
	  setStyle('color','red').
	  addEvent('click',function(e){
           $(this).setStyle('color','green');	  
	  });
});

chain 的特点是，所有函数都返回this，如果希望放回其他对象，该怎么办呢？

为了不改变chain在各个函数中的一致性，我们还是让所有函数放回this，针对需要返回其他对象的函数，我们通过会掉函数来实现。

如：

getName : function(name,callback){
     var name = this.name;
     callback.call(this,name);
     return this;
}

我们可以再callback中处理数据，而后还是返回this