用JS 封装的基本思路

尝试用 JS 来实现 jQuery 中简单的 API：addClass和removeClass

三种封装写法/思路：

第一种是使用闭包，代码如下

function jQuery(selector) {
    const falseArr = document.querySelectorAll(selector)//伪数组
    const tagArr = Array.from(falseArr)//数组
    const api = {
        addClass(className) {
            tagArr.forEach((tag) => {//遍历
                tag.classList.add(className)
            })
        },
        removeClass(className) {
            tagArr.forEach((tag) => {
                tag.classList.remove(className)
            })
        }
    }
    return api
}
const $ = jQuery//别名

第二种是使用构造函数（或者说原型），代码如下

function jQuery(selector){
    const falseArr = document.querySelectorAll(selector);
    this.tagArr = Array.from(falseArr);
}
jQuery.prototype = {
    constructor: jQuery,
    addClass(className){
        this.tagArr.forEach((tag) => {
            tag.classList.add(className)
        });
    },
    removeClass(className){
        this.tagArr.forEach((tag) => {
            tag.classList.remove(className)
        });
    }
};
const $ = jQuery;

第三种是使用类，代码如下

class jQuery{
    constructor(selector){
        this.falseArr = document.querySelectorAll(selector);
        this.tagArr = Array.from(falseArr);
    }
    addClass(className){
        this.tagArr.forEach((tag) => {
            tag.classList.add(className)
        });
    }
    removeClass(className){
        this.tagArr.forEach((tag) => {
            tag.classList.remove(className)
        });
    }
    
}
const $ = jQuery;