链式调用方法

javascript链式调用方法，是个有用的小技巧，可以节省大量的代码，看下例子：

(function(arg){
            alert(arg)
            return arguments.callee;
        })('第一次')('第二次')

当然，把方法加进去，我们还可以扩展如下：

(function(fn,arg){
            var args = Array.prototype.slice.call(arguments);
            args.shift().apply(null,args);
            return arguments.callee;
        })(function(a,b){alert(a+b)},3,5)(function(a,b){alert(a-b)},12,5)

我们可以做一个链式调用工具函数：

function chain(obj){
    return function(){
        var Self = arguments.callee; 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)

如果对于一个对象，我们可以这样：

<div id="test"></div>
    <script>
            
        var $ = function(id){
                this.element = document.getElementById(id);
            }
            
            $.prototype = {
                constructor : $,
                show : function(){
                    setTimeout(function(){console.log('show')},1000);
                    return this;
                },
                hide : function(){
                    setTimeout(function(){console.log('hide')},2000);
                    return this;
                }
            }
            
            new $('test').show().hide();
            
    </script>

 再看一个从库里简化出来的一个链式调用：

(function(){
    function extend(obj){
        (function(){
        //
        this.append=function(obj){
            this.appendChild(obj);
            return this;
        }
        //
        this.appendTo=function(obj){
            obj.appendChild(this);
            return this;
        }
        //
        this.attr=function(a,b){
            if(a instanceof Object){
                for(var x in a){
                    this.setAttribute(x,a[x]);
                }
            }else{
                this.setAttribute(a,b);
            }
            return this;
        }
        //
        this.css=function(a,b){
            if(a instanceof Object){
                for(var x in a){
                    this.style[x]=a[x];
                }
            }else{
                this.style[a]=b;
            }
            return this;
        }
        
        //
        this.html=function(str){
            if( typeof str =='undefined'){
                return this.innerHTML;
            }
            this.innerHTML=str;
            return this;
        }
        }).apply(obj);
        
        return obj;
    }
    window.$c=function(str){
        return extend(document.createElement(str));
    }
})();

$c('div').appendTo(document.body).attr('name','testName').html('ddddd').css('color','#f00')