原生js實(shí)現(xiàn)簡單的鏈?zhǔn)讲僮?/h1>

 更新時(shí)間：2017年07月04日 14:40:38   作者：Wenzi  

這篇文章主要介紹了原生js實(shí)現(xiàn)簡單的鏈?zhǔn)讲僮?，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在jQuery中，一個(gè)jq對象能一直連續(xù)調(diào)用各種方法，因?yàn)閖Query把這些方法掛載他自定義的一個(gè)對象中，但是使用原生的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的實(shí)現(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;
 }
 }
})();

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

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

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

• 輸出一下G('.area')，他返回的就是一個(gè)_G的實(shí)例對象；
• 在_G的內(nèi)部，把DOM對象存儲(chǔ)在elements上，然后prototype上實(shí)現(xiàn)了method方法，就是給elements添加對應(yīng)的事件，每次調(diào)用后，都把this返回，供下次使用；
• G(‘.area')就能使用使用method方法來添加事件了，同時(shí)每次method都會(huì)把this返回，這樣就能連續(xù)添加事件
  

上面的代碼我們只是實(shí)現(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'; // 錯(cuò)誤

是不能這么操作的。DOM對象存儲(chǔ)在elements中，如果想直接在DOM對象上操作，可以：

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• 原生js封裝的一些jquery方法(詳解)
• 原生js仿jquery實(shí)現(xiàn)對Ajax的封裝
• 詳解JavaScript原生封裝ajax請求和Jquery中的ajax請求
• JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
• 原生js實(shí)現(xiàn)對Ajax的封裝(仿jquery)
• 基于jquery封裝的一個(gè)js分頁
• JS鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)方法
• 學(xué)習(xí)JavaScript設(shè)計(jì)模式(鏈?zhǔn)秸{(diào)用)
• javascript中的鏈?zhǔn)秸{(diào)用
• js實(shí)現(xiàn)封裝jQuery的簡單方法與鏈?zhǔn)讲僮髟斀?/a>

• js
• 鏈?zhǔn)讲僮?/a>

相關(guān)文章

• 

  input輸入框鼠標(biāo)焦點(diǎn)提示信息

  本文給大家分享的是一則非常常用和實(shí)用的小技巧，當(dāng)鼠標(biāo)點(diǎn)擊到輸入框（input）里的時(shí)候，輸入框的提示消失，鼠標(biāo)再移開，輸入框提示出現(xiàn)，推薦給小伙伴們

  2015-03-03
• 

  微信小程序頁面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁面的方法

  這篇文章主要介紹了微信小程序頁面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁面的方法,結(jié)合具體實(shí)例形式總結(jié)分析了微信小程序頁面跳轉(zhuǎn)及列表item項(xiàng)跳轉(zhuǎn)頁面的相關(guān)操作技巧,需要的朋友可以參考下

  2017-11-11
• 

  chrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法

  下面小編就為大家?guī)硪黄猚hrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2016-09-09
• 

  js格式化時(shí)間的簡單實(shí)例

  本文分享了js格式化時(shí)間的實(shí)例代碼，需要的朋友可以看下

  2016-11-11
• 

  js日期時(shí)間補(bǔ)零的小例子

  js日期時(shí)間補(bǔ)零的小例子，需要的朋友可以參考一下

  2013-03-03
• 

  用js將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例

  下面小編就為大家?guī)硪黄胘s將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2017-07-07
• 

  微信小程序 搜索框組件代碼實(shí)例

  這篇文章主要介紹了微信小程序 搜索框組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

  2019-09-09
• 

  JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法

  這篇文章主要介紹了JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法,實(shí)例分析了javascript創(chuàng)建彈出窗口及窗口掉落與抖動(dòng)效果實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

  2015-08-08
• 

  Javascript string 擴(kuò)展庫代碼

  Javascript原生的String處理函數(shù)顯得很不夠豐富

  2010-04-04
• 

  JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法

  這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法,實(shí)例分析了javascript節(jié)點(diǎn)遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

  2015-07-07

最新評論