原生js實現(xiàn)簡單的鏈式操作
更新時間：2017年07月04日 14:40:38 作者：Wenzi
這篇文章主要介紹了原生js實現(xiàn)簡單的鏈式操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在jQuery中，一個jq對象能一直連續(xù)調用各種方法，因為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的實現(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)一個簡單的鏈式調用了，給.area同時綁定兩個事件：
G('.area').method('mouseenter', function(){
console.log( 'mouse enter' );
}).method('click', function(){
console.log( 'click' );
})
實現(xiàn)原理相信大家看到代碼也非常的清楚：
- 輸出一下G('.area')，他返回的就是一個_G的實例對象；
- 在_G的內部，把DOM對象存儲在elements上，然后prototype上實現(xiàn)了method方法，就是給elements添加對應的事件，每次調用后，都把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'; // 正確
總結一下，這里我們也只是用原生js簡單的實現(xiàn)了下鏈式操作，更復雜的功能，比如對象緩存，異常處理等等，都需要后續(xù)再完善處理。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文給大家分享的是一則非常常用和實用的小技巧，當鼠標點擊到輸入框（input）里的時候，輸入框的提示消失，鼠標再移開，輸入框提示出現(xiàn)，推薦給小伙伴們2015-03-03
微信小程序頁面跳轉功能之從列表的item項跳轉到下一個頁面的方法
這篇文章主要介紹了微信小程序頁面跳轉功能之從列表的item項跳轉到下一個頁面的方法,結合具體實例形式總結分析了微信小程序頁面跳轉及列表item項跳轉頁面的相關操作技巧,需要的朋友可以參考下2017-11-11
chrome下判斷點擊input上標簽還是其余標簽的實現(xiàn)方法
下面小編就為大家?guī)硪黄猚hrome下判斷點擊input上標簽還是其余標簽的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本文分享了js格式化時間的實例代碼，需要的朋友可以看下2016-11-11
js日期時間補零的小例子，需要的朋友可以參考一下2013-03-03
用js將long型數據轉換成date型或datetime型的實例
下面小編就為大家?guī)硪黄胘s將long型數據轉換成date型或datetime型的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了微信小程序 搜索框組件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JS實現(xiàn)從網頁頂部掉下彈出層效果的方法,實例分析了javascript創(chuàng)建彈出窗口及窗口掉落與抖動效果實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Javascript原生的String處理函數顯得很不夠豐富2010-04-04
JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法,實例分析了javascript節(jié)點遍歷的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07