手记

实现一个 jQuery 的API

上图,看最终结果:

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



作者:地球心
链接:https://www.jianshu.com/p/ebfbab4ffd49

0人推荐
随时随地看视频
慕课网APP