实现一个 jQuery 的API

字数 308阅读 137

上图,看最终结果:

// 实现一个 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 函数库中是就是这样的(不过他们实现的更高级一些),思路基本都相通的。

推荐阅读更多精彩内容