實現一個jQuery的API

你什麼都不懂發表於2018-07-16
jQueryAPI

在不使用jQuery函式庫的情況下自制一個與jQuery同樣原理的API:

首先，確認以下兩個需求：

 var $div = $('div')

1  $div.addClass('red') // 可將所有 div 的 class 新增一個 red
2  $div.setText('hi') // 可將所有 div 的 textContent 變為 hi
jQuery本質上就是一個建構函式，我們需要給它輸入引數，就可以返回對應引數的jQuery例項。

window.jQuery=function (){}
複製程式碼

① jQuery的核心思想就是先選擇後處理，jQuery建構函式的引數，主要是CSS選擇器。選擇一個引數，比如，需求1 是讓

的class='red', 其中'div'就是要傳入的引數。

②

window.jQuery=function (nodeOrSelector){
  var nodes={}
  let temp=document.querySelectorAll(nodeOrSelector)
  for(let i=0;i<temp.length;i++){
    nodes[i]=temp[i]
  }
  nodes.length=temp.length
  return nodes
}
複製程式碼

使用document.querySelectorAll, 因為它遵循的是css選擇器的規則，可以幫助我們獲取一個或者多個元素節點，用它確定選中引數的結果，在html文件中會獲取到多個結果，這個結果集是一個偽陣列，遍歷這個偽陣列，將遍歷的結果存放在nodes物件中。

③

window.jQuery=function (nodeOrSelector){
  var nodes={}
  let temp=document.querySelectorAll(nodeOrSelector)
  for(let i=0;i<temp.length;i++){
    nodes[i]=temp[i]
  }
  nodes.length=temp.length
  nodes.addClass=function (className) {
    for(i=0;i<nodes.length;i++){
      nodes[i].classList.add(className)
    }
}
  return nodes
}
複製程式碼

獲取到這個nodes物件之後，通過nodes建立一個建構函式,這個函式中的className，就是在window.jQuery使用addClass這個屬性時要輸入的引數。在這個函式內部建立一個for迴圈，遍歷nodes,每一輪給nodes中對應的節點新增一個className。

就可以實現 需求1了。

④

window.jQuery=function (nodeOrSelector){
   var nodes={}
   let temp=document.querySelectorAll(nodeOrSelector)
   for(let i=0;i<temp.length;i++){
    nodes[i]=temp[i]
   }
   nodes.length=temp.length
   nodes.addClass=function (className) {
    for(i=0;i<nodes.length;i++){
      nodes[i].classList.add(className)
    }
 }
 nodes.setText=function (text){
  for(i=0;i<nodes.length;i++){
    nodes[i].textContent=text
  }
 }
   return nodes
}
複製程式碼

window.$ = jQuery 與需求1 同樣的步驟，nodes.setText接受一個引數text,在這個函式內部建立一個for迴圈，遍歷nodes每一輪給nodes中對應的節點新增一個text。

這樣兩個API就可以實現這兩個需求了。它們可以同時給1個或多個元素節點，新增class和textContent。

相關文章