实现一个 jQuery 的API

上图，看最终结果:

// 实现一个 jQuery 的API

window.jQuery = function(_x){
  let e;
  if(typeof _x === "string"){
    e = document.querySelectorAll(_x);
  }else{
    e = _x;
  }
  return {
    addClass: function(_classStr){
      for(let i=0; i<e.length;i++){
        e[i].classList.add(_classStr);
      }
    },
    setText: function(_textStr){
      for(let i=0; i<e.length;i++){
        e[i].textContent = _textStr;
      }
    }
  }
}
window.$ = jQuery

var $div = $('div')

$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

过程中一些细节：

第一部分：

开启一个独立的命名空间，window.jQuery = {}，可改写成window.jQuery = function(){ return {};}

第二部分：

window.jQuery返回的是一个对象，对象里边存在一些可以操作的方法 .addClass() .setText()

return {
  addClass: function(){},
  setText: function(){}
}

需要注意的是对象里边存在着遍历操作。

第三部分

window.$ = jQuery 是什么鬼？
那就翻译一下吧，看这里 >>> window.$ = window.jQuery
其实就是简单的赋值（引用），为了更方便的使用这个 jQuery 。但是有一种习俗（约定成俗的规则），jQuery的变量前面要加 $ 前缀。防止以后犯晕不知道那个是原生的DOM,那个是jQuery的。

第四部分（最后一点）

细心的你可能会发现，window.jQuery中产生一个闭包了。 对就是产生一个闭包（闭包 = 环境因子 + 操作因子）。

• 环境因子： 变量 e
• 操作因子： addClass() setText()

其实这些东西在实际的 jQuery 函数库中是就是这样的（不过他们实现的更高级一些），思路基本都相通的。