原生js實現(xiàn)簡單的鏈式操作
更新時間：2017年07月04日 14:40:38 作者：Wenzi
這篇文章主要介紹了原生js實現(xiàn)簡單的鏈式操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在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)一個簡單的鏈式調(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添加對應的事件，每次調(diào)用后，都把this返回，供下次使用；
- G(‘.area')就能使用使用method方法來添加事件了，同時每次method都會把this返回，這樣就能連續(xù)添加事件
上面的代碼我們只是實現(xiàn)了如何為DOM對象連續(xù)添加事件，當然我們還可以在_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)了下鏈式操作，更復雜的功能，比如對象緩存，異常處理等等，都需要后續(xù)再完善處理。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)幸運抽獎頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗，是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題，考察了for循環(huán)、定時器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等，一不小心你可能就會做錯，快來看看你有沒有掌握了上面的知識。2017-06-06
這篇文章主要介紹了在微信小程序中使用mqtt服務的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
本文主要介紹了微信小程序開發(fā)之表單驗證WxValidate使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
對于需要獲取一個窗口關(guān)閉后的返回信息時，需要用的到。2009-01-01
javascript中使用正則表達式清理table樣式的代碼
本文給大家講解的是使用javascript實現(xiàn)去除多余的TABLE的樣式，主要通過結(jié)合正則表達式來實現(xiàn)，非常的簡單實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了微信小程序按鈕點擊動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
下面小編就為大家?guī)硪黄谝粋€頁面重復使用一個js函數(shù)的方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
如今ES6已經(jīng)發(fā)布了有一段時間了，很多人學了ES6但是卻沒運行環(huán)境，下面這篇文章主要給大家介紹了關(guān)于搭建ES6運行環(huán)境的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
JS async 函數(shù)的含義和用法實例總結(jié)
這篇文章主要介紹了JS async 函數(shù)的含義和用法,結(jié)合實例形式總結(jié)分析了JS async 函數(shù)的基本功能、含義、使用方法及操作注意事項,需要的朋友可以參考下2020-04-04