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

在jQuery中，一個(gè)jq對(duì)象能一直連續(xù)調(diào)用各種方法，因?yàn)閖Query把這些方法掛載他自定義的一個(gè)對(duì)象中，但是使用原生的js獲取的DOM對(duì)象，只能使用一次addEventLisenter方法添加事件，如果要接著添加事件，還得再調(diào)用addEventLisenter。

成都創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、網(wǎng)站建設(shè)與策劃設(shè)計(jì),塔城網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:塔城等地區(qū)。塔城做網(wǎng)站價(jià)格咨詢:028-86922220

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)思路，但是沒(méi)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è)簡(jiǎn)單的鏈?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í)例對(duì)象；
• 在_G的內(nèi)部，把DOM對(duì)象存儲(chǔ)在elements上，然后prototype上實(shí)現(xiàn)了method方法，就是給elements添加對(duì)應(yīng)的事件，每次調(diào)用后，都把this返回，供下次使用；
• G(‘.area')就能使用使用method方法來(lái)添加事件了，同時(shí)每次method都會(huì)把this返回，這樣就能連續(xù)添加事件
  

上面的代碼我們只是實(shí)現(xiàn)了如何為DOM對(duì)象連續(xù)添加事件，當(dāng)然我們還可以在_G.prototype中添加別的方法，不過(guò)別忘記了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對(duì)象，不能直接操作DOM對(duì)象上的屬性與方法，比如我想隱藏.area:

G('.area').style.display='none'; // 錯(cuò)誤

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：原生js實(shí)現(xiàn)簡(jiǎn)單的鏈?zhǔn)讲僮?
轉(zhuǎn)載源于：http://weahome.cn/article/pdedjs.html