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