從原生JS實現jQuery的一個API中體會其設計思想

根據統計，全世界大約有80~90%的網站直接或間接地使用了jQuery，鑑於它如此流行，因此每一位前端工程師都應該瞭解和學習它。那如何才能快速理解jQuery呢？讀源代碼又太繁瑣，因此這裏利用原生JS來實現jQuery中的addClass這個API，經過實現此過程來體會jQuery的設計思想，力求簡單易懂。

封裝函數

function addClass(classes){} //可將全部輸入的標籤的class添加一個類
複製代碼

實現這個函數

函數addClass()是輸入一個類名，給選中的全部標籤添加一個類，因此要用到classList.add()，具體實現以下:

function addClass(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}
複製代碼

命名空間

在全局變量中建立一個對象，用來儲存封裝後的函數，這就是命名空間（名字前面統一加一個前綴）

window.jQuery = {}
jQuery.addClass = addClass

jQuery.addClass('div', 'red')
複製代碼

整理以後

window.jQuery = {}
jQuery.addClass = function(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}

jQuery.addClass('div', 'red')
複製代碼

將node放到前面

node.addClass(classes)
複製代碼

方法一：擴展 Node 接口，直接在 Node.prototype 上加函數

Node.prototype.addClass = function(){
   ...
}
複製代碼

方法二：新的接口 BetterNode

window.jQuery = function(node) {
  return {
    element: node,
    addClass: function(classes) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].classList.add(classes)
      }
    }
  }
}

let node2 = jQuery('div')
node2.addClass('red')
複製代碼

第二種叫作「無侵入」。

進一步完善

給個縮寫而且使其能夠是節點或者選擇器

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
    }
  }
  nodes.addClass = function(classes){
    for(let i=0;i<nodes.length;i++){
      nodes[i].classList.add(classes)
    }
  }
  return nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可將全部 div 的 class 添加一個 red
複製代碼

封裝ajax

按照jQuery的設計思路封裝一個ajax函數

window.jQuery.ajax = function(url, method, body, success, fail) {
    let request = XMLHttpResquest()
    request.open(method, url)
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                success.call(undefined, request.responseText)
            } else if (request.status >= 400) {
                fail.call(undefined, request)
            }
        }
    }
    request.send(body)
}
複製代碼

升級改進一下知足promise規則

window.jQuery.ajax = function({ url, method, body, headers }) {
    return new Promise(function(resolve, reject) {
        let request = XMLHttpResquest()
        request.open(method, url)
        for (let key in headers) {
            let value = headers[key]
            request.setRequestHeader(key, value)
        }
        request.onreadystatechange = () => {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    success.call(undefined, request.responseText)
                } else if (request.status >= 400) {
                    fail.call(undefined, request)
                }
            }
        }
        request.send(body)
    })
}
複製代碼

若是以爲文章對你有些許幫助，歡迎在個人GitHub博客點贊和關注，感激涕零！