原生js實現簡單的鏈式操做

在jQuery中，一個jq對象能一直連續調用各類方法，由於jQuery把這些方法掛載他自定義的一個對象中，可是使用原生的js獲取的DOM對象，只能使用一次addEventLisenter方法添加事件，若是要接着添加事件，還得再調用addEventLisenter。

var area = document.querySelector('.area');
area.addEventListener('mouseenter', function(){
    console.log( 'mouse enter' );
});
area.addEventListener('click', function(){
    console.log( 'click' );
});

但是若是我想在area綁定mouseenter事件後，接着綁定click事件呢。咱們也能夠參考下jQuery的實現思路，可是沒jQuery這麼完善。

;(function(){
    window.G = function(selector){
        return new _G(selector);
    }
    function _G(selector){
        this.elements = document.querySelector(selector);
        return this;
    }
    _G.prototype = {
        constructor : _G,
        method : function(name, fn){
            if(this.elements){
                this.elements.addEventListener(name, fn, false);
            }
            return this;
        }
    }
})();

這樣咱們就能實現一個簡單的鏈式調用了，給.area同時綁定兩個事件：

G('.area').method('mouseenter', function(){
    console.log( 'mouse enter' );
}).method('click', function(){
    console.log( 'click' );
})

實現原理相信你們看到代碼也很是的清楚：

1. 輸出一下G('.area')，他返回的就是一個_G的實例對象；

2. 在_G的內部，把DOM對象存儲在elements上，而後prototype上實現了method方法，就是給elements添加對應的事件，每次調用後，都把this返回，供下次使用；

3. G('.area')就能使用使用method方法來添加事件了，同時每次method都會把this返回，這樣就能連續添加事件

上面的代碼咱們只是實現瞭如何爲DOM對象連續添加事件，固然咱們還能夠在_G.prototype中添加別的方法，不過別忘記了return this：

_G.prototype = {
    constructor : _G,
    method : function(name, fn){
        if(this.elements){
            this.elements.addEventListener(name, fn, false);
        }
        return this;
    },
    show : function(){
        this.elements.style.display='';
        return this;
    },
    hide : function(){
        this.elements.style.display='none';
        return this;
    }
}

這樣G()就能使用show()和hide()了：

// 隱藏
G('.area').hide();

// 顯示而且綁定click事件
G('.area').show().method('click', function(){
    console.log( Date.now() );
})

注意： G('.area')不是原生的DOM對象，不能直接操做DOM對象上的屬性與方法，好比我想隱藏.area:

G('.area').style.display='none'; // 錯誤

是不能這麼操做的。DOM對象存儲在elements中，若是想直接在DOM對象上操做，能夠：

G('.area').elements.style.display='none'; // 正確

總結一下，這裏咱們也只是用原生js簡單的實現了下鏈式操做，更復雜的功能，好比對象緩存，異常處理等等，都須要後續再完善處理。