溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

原生js實現(xiàn)簡單的鏈式操作

發(fā)布時間：2020-10-17 15:49:04 來源：腳本之家 閱讀：182 作者：Wenzi 欄目：web開發(fā)

在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)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手