如何手写一个jquery的工具库

这是我听过的一个公开课所做的笔记~

先来一个基础版的，这样有什么问题呢，就是把各种事件都绑定到原型上面了，破坏了原型的纯净性

let $ = jQuery = (function (windwo) {
    let jquery = function (nodeSelector) {
        this.nodes = document.querySelectorAll(nodeSelector);
    };
    jquery.prototype = {
        // 封装函数 需要修改循环结构的时候 只需要修改each
        each: function (callback) {
            for (let i = 0; i < this.nodes.length; i++) {
                callback.call(this, i, this.nodes[i])
            }
        },
        // 添加 class
        addClass: function (classes) {
            let className = classes.split(" ");
            className.forEach(value => {
                this.each((index, obj) => {
                    obj.classList.add(value)
                })
            })
        },
        // 修改 text
        setText: function (text) {
            this.each((index, obj) => {
                obj.textContent = text
            })
        },
        //移除 dom
        remove: function () {
            let el;
            this.each((index, obj) => {
                el = obj;
                el.parentNode && el.parentNode.removeChild(el);
            });
        }
    };
    return function (nodeSelector) {
        return new jquery(nodeSelector)
    }
})(window)

看看老师写的高级代码

let $ = jQuery = (function (window) {
    // 功能分区

    // 获取元素 对dom进行集合存储
    function queryDom(dom, selector) {
        let i, len = dom ? dom.length : 0;
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len;
        // 容错处理
        this.selector = selector || ' ';
        return this
    }
    // Z的作用 保证了jquery的纯净性 扩展性
    function Z(elements, selector) {
        return queryDom.call(this, elements, selector)
    }
    // 具体查找dom
    function querySA(elements, selector) {
        return elements.querySelectorAll(selector)
    }

    Z.prototype = {
        each(callback) {
            // every 的循环粒子变为 this[下标值] => dom值
            [].every.call(this, function (el, index) {
                return callback.call(el, index, el) !== false
            })
        },
        // jquery 链式调用

        // 查找方法
        find(selector) {
            let doms = [];
            this.each(function (index, el) {
                let childs = this.querySelectorAll(selector);
                doms.push(...childs)
            })
            return new Z(doms, selector)
        },
        // 具体下标
        eq(i) {
            let doms = [];
            this.each(function (index, el) {
                if (i == index) {
                    doms.push(this)
                }
            })
            return new Z(doms, this.selector)
        },
        // 移除方法
        remove() {
            this.each(function (index, el) {
                this.remove()
            })
        }
    };

    // 全局函数
    function isFunction(value) {
        return typeof value == 'function'
    }

    // 整合
    function $(nodeSelector) {
        let doms = querySA(document, nodeSelector);
        return new Z(doms, nodeSelector)
    }

    $.isFunction = isFunction;
    return $;
})(window);

前端路漫漫，且行且沉淀！