国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生js實現(xiàn)簡單的鏈?zhǔn)讲僮?

Vixb / 1391人閱讀

摘要：對象存儲在中，如果想直接在對象上操作，可以正確總結(jié)一下，這里我們也只是用原生簡單的實現(xiàn)了下鏈?zhǔn)讲僮?，更?fù)雜的功能，比如對象緩存，異常處理等等，都需要后續(xù)再完善處理。

在jQuery中，一個jq對象能一直連續(xù)調(diào)用各種方法，因為jQuery把這些方法掛載他自定義的一個對象中，但是使用原生的js獲取的DOM對象，只能使用一次addEventLisenter方法添加事件，如果要接著添加事件，還得再調(diào)用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的實現(xiàn)思路，但是沒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;
        }
    }
})();

這樣我們就能實現(xiàn)一個簡單的鏈?zhǔn)秸{(diào)用了，給.area同時綁定兩個事件：

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

實現(xiàn)原理相信大家看到代碼也非常的清楚：

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

在_G的內(nèi)部，把DOM對象存儲在elements上，然后prototype上實現(xiàn)了method方法，就是給elements添加對應(yīng)的事件，每次調(diào)用后，都把this返回，供下次使用；

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

上面的代碼我們只是實現(xiàn)了如何為DOM對象連續(xù)添加事件，當(dāng)然我們還可以在_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"; // 正確

總結(jié)一下，這里我們也只是用原生js簡單的實現(xiàn)了下鏈?zhǔn)讲僮?，更?fù)雜的功能，比如對象緩存，異常處理等等，都需要后續(xù)再完善處理。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83711.html

相關(guān)文章

  • 前端培訓(xùn)-中級階段（6）- jQuery的事件綁定鏈?zhǔn)?/em>操作及原理（2019-07-25期）

    摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...

    Airy 評論0 收藏0

  • 前端培訓(xùn)-中級階段（6）- jQuery的事件綁定鏈?zhǔn)?/em>操作及原理（2019-07-25期）

    摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...

    sutaking 評論0 收藏0

  • 仿效jQuery如何高效的寫JSLite

    摘要：討論和性能的文章并不罕見?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗。附加事件處理程序的首選方法。糟糕建議高效使用子查詢緩存的父元素正如前面所提到的，遍歷是一項昂貴的操作。糟糕建議高效避免通用選擇符將通用選擇符放到后代選擇符中，性能非常糟糕。 討論jQuery和javascript性能的文章并不罕見。然而，我計劃根據(jù)他人對jQuery總結(jié)的一些速度方面的技巧和一些建議，來教你提升你的JSLit...

    PascalXie 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<