jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

接下来通过下面这些最常见的jQuery操作,利用ES6来实现一个jQuery的API:

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

大致思路

我们的需求是通过构造一个新的函数,这个函数返回一个对象,该对象包括两种属性方法,即addClass和setText,便可以使用jQuery构造一个新的node(即$div),随后便可以使用$div调用addClass和setText两个属性。
首先我们在这个函数体的内部声明一个变量findNode,随后可以在下面两种属性方法中调用。

addClass()实现思路

通过调用mapNodes遍历节点对象,将获取到的节点添加相应的class。

setText()实现思路

通过调用mapNodes遍历节点对象,将获取到的每个节点的内容通过textContent方法设置为用户设置的text。

最终代码

window.jQuery = function (selectorOrNode) {
  const nodes = {}
  if (typeof selectorOrNode === 'string') {
    nodes = document.querySelectorAll(selector)
  } else {
    nodes = {
      0: selectorOrNode,
      length: 1,
    }
  }
  const mapNodes = callback => {
    for(let i = 0; i<dom.length; i++){
        callback(nodes[i]);
    }
  }
  dom.addClass(className) {
    mapNodes((ele)=>{
      ele.classList.add(className);
    })
  }
  dom.setText(text) {
    mapNodes((ele)=>{
      ele.innerText = text;
    })
  }
  return dom
}
window.$ = jQuery

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

小套路解析

  • 利用箭头函数创建一个循环器,将遍历dom伪数组的工作抽象,调用的时候将当前循环的元素通过callback的方式来回调,由于dome比较简单,所以没必要用promes
  • 将方法挂载到获取到的dom节点上,并且直接返回dom节点,便于后续进行原生操作
  • 利用es6的语法糖可以将key:function的形式简写为xxx(){}直接存入哈希
  • 当然这套写法的缺点也很明显,就是只兼容现代浏览器,无论是es6还是querySelectorAll兼容性都很差