封装一个库的基本思路

今天我尝试实现 jQuery 中最简单的 API：addClass 和 removeClass
现在需要将下面几个 div 的背景颜色替换为绿色。

.red {
  background-color: red;
}
.green {
  background-color: green;
}

<div class="red">1</div>
<div class="red">2</div>
<div class="red">3</div>
<div class="red">4</div>
<div class="red">5</div>

1. 闭包封装

jQuery = function () {
  const api = {
    addClass(className) {
      this.elementArray.forEach((element) => {
        element.classList.add(className)
      })
      return this
    },
    removeClass(className) {
      this.elementArray.forEach((element) => {
        element.classList.remove(className)
      })
      return this
    }
  }

  return function (selector) {
    const nodeList = document.querySelectorAll(selector)
    const elementArray = Array.from(nodeList)
    return { elementArray, ...api }
  }
}()

const $ = jQuery

$('.red').removeClass('red').addClass('green')

2. 构造函数封装

function jQuery(selector) {
  if (!(this instanceof jQuery)) {
    return new jQuery(selector)
  }
  const nodeList = document.querySelectorAll(selector)
  this.elementArray = Array.from(nodeList)
}

jQuery.prototype = {
  constructor: jQuery,
  addClass(className) {
    this.elementArray.forEach((element) => {
      element.classList.add(className)
    })
    return this
  },
  removeClass(className) {
    this.elementArray.forEach((element) => {
      element.classList.remove(className)
    })
    return this
  }
}

const $ = jQuery

$('.red').removeClass('red').addClass('green')

3. class封装

class jQuery {
  constructor(selector) {
    const nodeList = document.querySelectorAll(selector)
    this.elementArray = Array.from(nodeList)
  }

  static create(selector) {
    return new jQuery(selector)
  }

  addClass(className) {
    this.elementArray.forEach((element) => {
      element.classList.add(className)
    })
    return this
  }

  removeClass(className) {
    this.elementArray.forEach((element) => {
      element.classList.remove(className)
    })
    return this
  }
}

const $ = jQuery

$.create('.red').removeClass('red').addClass('green')