Understand their design ideas from the native JS achieve an API of jQuery

According to statistics, around the world there are about 80 to 90% of the site directly or indirectly using jQuery, in view of its so popular, so every front-end engineers should understand and learn it. How can we quickly understand the jQuery it? Reading the source code is too complicated, so here is implemented using the native JS jQuery in addClass this API, jQuery to understand the design idea by implementing this process, keep it simple and easy to understand.

Package function

function addClass(classes){} //可将所有输入的标签的class添加一个类
复制代码

Implementation of this function

Function addClass()is to enter a class name, to check all labels add a class, so use to the classList.add()specific implementation is as follows:

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

Namespaces

Creating an object in a global variable, function packaged for storage, which is the namespace (the previous name plus a unified prefix)

window.jQuery = {}
jQuery.addClass = addClass

jQuery.addClass('div', 'red')
复制代码

After finishing

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')
复制代码

The node to the front

node.addClass(classes)
复制代码

Method a: extended Node interface, directly in Node.prototypethe function add

Node.prototype.addClass = function(){
   ...
}
复制代码

Method two: the new interface 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')
复制代码

The second is called "non-invasive."

further improvement

Abbreviations and allowed to give or may be a node selector

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 package

According to a package design ideas jQuery ajax function

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)
}
复制代码

Upgrades to improve it to meet the promise Rules

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)
    })
}
复制代码

If you think the article to help you slightly, welcome in my GitHub blog points praise and attention, very grateful!