手把手带你实现一个mini版jquery-阿里云开发者社区

手把手带你实现一个mini版jquery

2022-09-22 157

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手写一个mini版jquery

手写一个mini版jquery

我们要实现的功能如下

1.执行结构

2.amd模块检测

3.整体架构搭建

4.原型方法添加

5.全局方法添加

执行结构与amd模块检测

  //amd模块检测
   if (typeof define === 'function' && define.amd){
    define(definition);
   }
   //执行结构
   var $ = jQuery = (function(window,undefined){
  })(window)

整体架构搭建

  // 对dom集合进行存储，生成jquery对象
    function Query(dom, selector){
        // 通过遍历dom集合，将el注入this实例 => Z函数的实例
        let i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) this[i] = dom[i]
        this.length = len
        this.selector = selector || ''
        return this;
    }
    // 进行dom查看，同时生成jquery对象
    function Z(elements, selector){
        return Query.call(this, elements, selector)
    }
    // 具体的dom查找
    function qsa(element, selector){
        // 暂时不考虑选择器的其它情况
        return element.querySelectorAll(selector)
    }
     // 得到jquery对象
    return function(nodeSelector){
        let doms = qsa(document, nodeSelector)
        // debugger;
        return new Z(doms, nodeSelector);
    }

原型方法添加

   Z.prototype = {
        each(callback){
            // [].every 是es5的数组原型方法，用于循环，返回值为布尔值（循环的内容必须都满足，才会返回true，否则返回false）
            [].every.call(this, function(el, index){
                return callback.call(el, index, el) !== false
            })
        },
        // 查找元素
        find(selector){
            let doms = []
            this.each(function(index, el){
                let childs = this.querySelectorAll(selector);
                doms.push(...childs);
            })
            //为了实现链式操作 返回当前对象
            return new Z(doms, selector);
        },
        //增加样式
        addClass:function (classes){
            let className = classes.split(' ');
             className.forEach(value => {
                 this.each(function(index,el){
                    el.classList.add(value);
                 })
             });
            return this;
        },
        //比较第几个
        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 isWindow(obj)     { return obj != null && obj == obj.window }
    function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
    function $(nodeSelector){
        let doms = qsa(document, nodeSelector)
        return new Z(doms, nodeSelector);
    }
    // 定义zepto的全局方法(也可以外部使用)
    $.isFunction = isFunction;
    $.isWindow = isWindow;
    $.isDocument = isDocument;
    // 得到jquery对象
    return $

完整代码

//amd模块检测
if (typeof define === 'function' && define.amd){
  define(definition);
 }
var $ = jQuery = (function(window,undefined){
    // 对dom集合进行存储，生成jquery对象
    function Query(dom, selector){
        // 通过遍历dom集合，将el注入this实例 => Z函数的实例
        let i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) this[i] = dom[i]
        this.length = len
        this.selector = selector || ''
        return this;
    }
    // 进行dom查看，同时生成jquery对象
    function Z(elements, selector){
        return Query.call(this, elements, selector)
    }
    // 具体的dom查找
    function qsa(element, selector){
        // 暂时不考虑选择器的其它情况
        return element.querySelectorAll(selector)
    }
    Z.prototype = {
        each(callback){
            // [].every 是es5的数组原型方法，用于循环，返回值为布尔值（循环的内容必须都满足，才会返回true，否则返回false）
            [].every.call(this, function(el, index){
                return callback.call(el, index, el) !== false
            })
        },
        find(selector){
            let doms = []
            this.each(function(index, el){
                let childs = this.querySelectorAll(selector);
                doms.push(...childs);
            })
            return new Z(doms, selector);
        },
        addClass:function (classes){
            let className = classes.split(' ');
             className.forEach(value => {
                 this.each(function(index,el){
                    el.classList.add(value);
                 })
             });
            return this;
        },
        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 isWindow(obj)     { return obj != null && obj == obj.window }
    function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
    function $(nodeSelector){
        let doms = qsa(document, nodeSelector)
        return new Z(doms, nodeSelector);
    }
    // 定义zepto的全局方法(也可以外部使用)
    $.isFunction = isFunction;
    $.isWindow = isWindow;
    $.isDocument = isDocument;
    // 得到jquery对象
    return $
})(window)