Chain of responsibility

本文关于 职责链模式、链式调用,原理与实现

职责链模式,链式调用

首先我得纠正我的一个错误观点,我居然把链式调用当成异步来处理了。这个思想上嘛,就是错的。所以再重新来看链式的话,就比较简单了。还有一=一点的是我对jQuery不熟,所以看来的看看源码了。

那么最关键的就是: return this 实际的代码实现就是通过原型构造模式然后return this this才是精髓

第一种

如:

function a(value) {  
  this.text = 'aaaa'
  this.width = '100px'
}
a.prototype = {  
  set:function(name,val) {
    this[name] = val;
    return this;
  },
  get:function(name) {
    return this[name]
  }
}
var b =new a();

console.log(b.set('y','YYYasdf').get('y'))          // YYYasdf  
console.log(b.set('test','TESTasdf').get('test'))   // TESTasdf  
console.log(b.get('width'))                         // '100px'  

简单封装:

(function(){
function Aa(value) {  
  this.value = value
  this.text = 'aaaa'
  this.width = '100px'
}
Aa.prototype = {  
  set:function(name,val) {
    this[name] = val;
    return this;
  },
  get:function(name) {
    return this[name]
  }
}
window.Aa= function(value){  
    return new Aa(value);
}
})()

console.log(Aa('test').set('valu','1000').get('value'))      //  
var a = Aa('ttt')          // 实例  
a.set('ddd','这是ddd')  
a.get('ddd')   // 这是ddd  
>> Aa {value: "ttt", text: "aaaa", width: "100px", ddd: "这是ddd"}

第二种方法

function chain(obj) {  
    var slice = [].slice
    return function() {
        var Self = arguments.callee
        var Self.obj = obj
        if (arguments.length === 0) {
            return Self.obj
        }
        Self.obj[arguments[0]].apply(Self.obj, slice.call(arguments, 1))
        return Self
    }
}
//定义的function/类ClassB
function ClassB(){  
    this.prop1 = null;
    this.prop2 = null;
    this.prop3 = null;
}
ClassB.prototype = {  
    method1 : function(p1){
        this.prop1 = p1;
    },
    method2 : function(p2){
        this.prop2 = p2;
    },
    method3 : function(p3){
        this.prop3 = p3;
    }

var obj = new ClassB();  // 把方法直接传入  
chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6  

深入

为了保持链式调用能使用,return this是不能动的,那么要对取到的值进行操作的话,就应该在取值器内部进行,将我们需要的操作过程封装成函数传入取值器,将值作为自定义函数的参数,这就是典型的回调函数思想。

(function() {
  function _$(els) {
    ...
  }

  _$.prototype = {
    getValue: function(callback) {
      callback.call(this, this.value); // 通过传入回调函数对取到的值进行操作
      return this; // 同时不影响继续链式调用
    }
    ...
  }
})();

// 以第一种的方法来看:a.get('ddd') 直接返回值了,那么就不能保持链式调用了。但对于取值来说,我们是要获得这个值,那么其实也就没必须去进行下一步的链式了。如果是设置与操作的话,自然的返回this。或者说是返回一个对象能够进行下一步的调用。因为一连串的调用可以不仅仅是只对最初的对象做出反应。
$('div').find('h3').eq(2).html('Hello'); // 例如这里的jQuery,一连串的查找,找到正确的DOM元素,

jQuery 简单实现

下面代码是简单的实现:算是链式思想的简单应用,所以也该看看jQuery的代码了,真切的了解jQuery。一个完全的实现

(function(window){
function _$(node) {  
 this.dom = document.getElementById(node)
}

_$.prototype = {  
    find:function(nod) {
      if(!node) { throw 'error' }
      var a = this.dom;
      this.dom = document.getElementById(nod);
        return this
    },   // 对于选择器的话,得看看。
    css:function(name,val) {
        if(val) {
            this.dom.style[name] = val;
            return this
        }
        else {
            return this.dom.getAttribute(name)
        }
    },
    html:function(val) {
        if(val) {
            this.dom.innderHTML = val;
            return this
        }
        else {
            return this.dom.innerHTML
        }
    }
}
_$.globalFoo = function() {} // 添加全局的方法  
    window.$ = function(node) {
        return new _$(node)
    }
})(window)

 $('test').css('color','gold') 
 $('test').find('some').css('color','deepskyblue')
 $('test').html('22222222')
 console.log( $('test').html() )

http://www.cnblogs.com/youxin/p/3410185.html

那么接下来就是对于整个模式的讨论了。然后是jQuery里的理解与简单实现。