简单的封装一个库

今天我尝试用 JS 来实现 jQuery 中最简单的 API：addClass，一共有三种写法：

第一种是使用闭包

   function jQuery(选择器) {
            const 标签伪数组 = document.querySelectorAll(选择器)
            const 标签数组 = Array.from(标签伪数组)
            const api = {
                addClass(className) {
                    标签数组.forEach((标签) => {
                        标签.classList.add(className)
                    })
                },
                removeClass(className) {
                    标签数组.forEach((标签) => {
                        标签.classList.remove(className)
                    })
                }
            }
            return api
        }
        const $ = jQuery;
        const btn = document.querySelector('.btn');
        btn.onclick = function(){
            $('.red').addClass('green');

        }

第二种是使用构造函数

 function jQuery(选择器) {
            const 标签伪数组 = document.querySelectorAll(选择器);
            this.标签数组 = Array.from(标签伪数组);
        }
        jQuery.prototype = {
            constructor: jQuery,
            addClass(className) {
                this.标签数组.forEach((标签) => {
                    标签.classList.add(className);
                });
            }
        };
        const $ = jQuery;
        // 用法
        const button = document.getElementById("btn");
        button.onclick = function () {
            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')
        }

最后

以上就是义气小馒头为你收集整理的封装一个库简单的封装一个库的全部内容，希望文章能够帮你解决封装一个库简单的封装一个库所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。