ネイティブJSから自分のデザインのアイデアを理解するのjQueryのAPIを達成

統計によると、世界中に直接的または間接的にjQueryを使ってサイトの約80〜90％が存在し、そのように人気を考慮して、そのすべてのフロントエンドエンジニアが理解し、それを学ぶ必要があります。どのように我々はすぐにjQueryのそれを理解することができますか？ソースコードを読むことは、このAPI、jQueryのは、このプロセスを実装することで、設計の考え方を理解するaddClassにネイティブJSの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.addClass(classes)
复制代码

方法：直接の拡張Nodeインタフェース、Node.prototype機能追加

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

方法2：新しいインターフェイス 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)
}
复制代码

約束のルールを満たすために、それを改善するためのアップグレード

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のブログのポイントの賞賛と注目、非常に感謝！