來學着寫本身的「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」來實現咱們本身需求