一、jQuery(闭包)的写法

注意 : 变量用中文命名是不推荐的！这里只是方便学习

jQuery写法(闭包)
 function jQuery(选择器) {
   const 所有伪数组 = document.querySelectorAll(选择器)
   const 所有数组 = Array.from(所有伪数组)

   return {
     addclass(className) {
       for (let i = 0; i < 所有数组.length; i++) {
         所有数组[i].classList.add(className)
       }
     },
     removeclass(className) {
       for (let i = 0; i < 所有数组.length; i++) {
         所有数组[i].classList.remove(className)
       }
     }
   }

 }
 
 const $ = jQuery

 $('.red').addclass('green')

闭包的写法会造成内存冗长

二、构造函数（原型）写法

function jQuery(选择器) {
   this.所有元素的伪数组 = document.querySelectorAll(选择器)
   this.所有元素 = Array.from(this.所有元素的伪数组)
 }
 jQuery.prototype = {
   constructor: jQuery,

   addClass(className) {
     const { 所有元素 } = this
     for (let i = 0; i < 所有元素.length; i++) {
       所有元素[i].classList.add(className)
     }
   },

 }
 const $ = jQuery
 //用法
 const button = document.getElementById('btn')
 button.onclick = () => {
   new $('.red').addClass('green')
 }
 

三、类写法

class jQuery {
  constructor(选择器) {
    this.所有元素的伪数组 = document.querySelectorAll(选择器)
    this.所有元素 = Array.from(this.所有元素的伪数组)
  }

  addClass(className) {
    const { 所有元素 } = this
    for (let i = 0; i < 所有元素.length; i++) {
      所有元素[i].classList.add(className)
    }
  }
}

const $ = jQuery
//用法
const button = document.getElementById('btn')
button.onclick = () => {
  new $('.red').addClass('green')
}