來學著寫自己的“jQuery”

YyzclYang發表於2018-05-24
jQuery

jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作

jQuery是開源軟體，使用MIT許可證授權。jQuery的語法設計使得許多操作變得容易，如操作文件物件（document）、選擇文件物件模型（DOM）元素、建立動畫效果、處理事件、以及開發Ajax程式。jQuery也提供了給開發人員在其上建立外掛的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式

實際上jQuery可以看做將原生JavaScript庫組合優化，通過呼叫不同的原生API進行二次開發，以實現比原生JavaScript的API更為簡單、強大的功能。如果jQuery的功能沒攘括你的需求，那麼你可以自己寫個jQuery的函式來滿足自己的需求哦，下面來學習下如何封裝一個“jQuery”函式

1 怎樣封裝函式才好

當我們需要自己封裝一個函式時，可以直接將函式寫進Node.prototype裡面，也可以重新建立一個新的介面，那麼這兩者有什麼區別呢？

  • 方法一：擴充Node介面 可以直接在Node.prototype上加我們所需要的函式，但是這種方法有個缺點，如果我們的函式名已經在Node庫裡面存在了，那麼新函式就會覆蓋已經存在的函式，會導致已有函式失效，這顯然不是我們樂意看到的

  • 方法二：寫個新的介面 重新建立一個介面，在新的介面裡面寫函式，這種方法既不會覆蓋已有函式，又可以滿足我們的需求，所以我們採取這種方式來封裝函式

2 來寫一個jQuery

2.1 選擇器

當我們傳入一個篩選條件時，我們希望能獲取滿足篩選條件的所有節點，這裡要分情況來討論了

如果篩選條件是一個節點，那麼直接返回這個節點即可
如果篩選條件是一個字串，那麼就呼叫JavaScript的選擇器，篩選所有符合字串的節點

這裡有小細節要處理一下，通過JavaScript選擇器獲取的是一個由符合條件的節點組成的偽陣列，裡面不僅包含了節點資訊，還有一些其他內容
且篩選條件是一個節點的話，那麼返回的就不是個偽陣列了
為了保證結果的統一性，需要將偽陣列裡面的其他資訊清除，如果結果不是偽陣列，就將它變成一個偽陣列

程式碼實現如下

  let nodes = {};
  if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector);
    for(let i = 0; i < temp.length; i++){
      nodes[i]=temp[i];
    }
    nodes.length = temp.length;
  }else if(nodeOrSelector instanceof Node){
    nodes = {
      0 : nodeOrSelector,
      length : 1
    };
  }
複製程式碼

2.2 寫一個addClass()函式

addClass()函式的用途是將所選擇的元素的class屬性增加新內容

那麼遍歷所選擇的元素，通過原生JavaScript裡面的classList.add()函式即可是實現 程式碼實現如下

  nodes.addClass = function(classes){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList.add(classes);
      }
  };
複製程式碼

2.3 再寫一個setText()函式

我們通過setText()函式需要實現將元素的textContent內容改寫成指定內容

同樣的思路，遍歷元素，逐個將textContent改寫

程式碼實現如下

  nodes.setText = function(texts){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = texts;
      }
  };  
複製程式碼

2.4 組合一下吧

各個部分完成之後，就可以將其組合封裝成jQuery函式了

程式碼如下

window.jQuery = function(nodeOrSelector){
  //篩選元素
  let nodes = {};
  if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector);
    for(let i = 0; i < temp.length; i++){
      nodes[i]=temp[i];
    }
    nodes.length = temp.length;
  }else if(nodeOrSelector instanceof Node){
    nodes = {
      0 : nodeOrSelector,
      length : 1
    };
  }
  //增加class屬性函式
  nodes.addClass = function(classes){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList.add(classes);
      }
  };
  //改寫textContent內容函式
  nodes.setText = function(texts){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = texts;
      }
  };  
  //返回操作之後的內容
  return nodes;
}
複製程式碼

3 總結

jQuery沒想象中的那麼遙不可及，通過封裝函式，我們也可以寫一個自己的“jQuery”來實現我們自己需求

相關文章