js框架封装，模拟jQuery封装

Posted 2020-08-27 MarsQi

模拟jQuery框架，利用原生的js技术，封装一个js框架，以加深对jQuery的常用api的使用和面向对象原理的理解；
一：结构部分
首先利用闭包，构造一个自执行函数，然后利用选择器函数Sizzle，获取dom元素；其后设置入口函数jQuery，返回一个F的实例；
然后对jQuery.prototype进行设置；其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery；
二：jQuery.fn.extend = jQuery.extend = function(){}
通过向jQuery的原型和jQuery上添加一个extend方法（详见下面代码extend部分）；
可以实现扩展工具类方法和dom操作、css操作类的方法；

jQuery.fn.extend(object); 对jQuery.fn即jQuery.prototype
得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

代码如下，欢迎指正

(function (window) {
　　//伪数组借用数组的push和splice方法
    var arr = [];//Array.prototype;
    var push = arr.push;
    var splice = arr.splice;

    //jQuery.extend()工具类方法中的type部分代码预处理
    var toString = Object.prototype.toString;
    var types = "Number,String,Boolean,Null,Undefined,Array,Object,Function,Math,Date,RegExp".split(",");
    var class2type = {};
    for (var i = 0; i < types; i++) {
        var type = types[i];
        class2type["[object " + type + "]"] = type.toLowerCase();
    }
    /**
     * 获取dom元素的伪数组nodelist 不考虑兼容性问题；
     * @param selector
     * @returns {NodeList}
     * @constructor
     */
    var Sizzle = function (selector) {
        return document.querySelectorAll(selector);
    }

    /**
     * 设置入口函数，返回F的实例对象
     * @param selector
     * @returns {*}
     */
    function jQuery(selector) {
        return jQuery.fn.F(selector);
    }

    /**
     * jQuery.prototype设置
     * @type {{constructor: jQuery, F: Function}}
     */
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        version: "0.0.1",
        F: function (selector) {
            if (jQuery.isString(selector)) {
                if (selector.charAt(0) === "<" && selector.charAt(selector.length - 1) === ">" && selector.length >= 3) {
                    //eg:$("<input>");
                    var div = document.createElement("div");
                    div.innerhtml = selector;
                    //for(var i =0;i<div.childNodes.length;i++){
                    //    var child = div.childNodes[i];
                    //    push.call(this.child);
                    //}
                    push.apply(this, div.childNodes);
                } else {
                    //eg:$("div")
                    splice.call(this, 0, this.length);
                    var elements = Sizzle(selector);
                    push.apply(this, elements);
                }
            } else if (selector.nodeType) {
                //鸭式辨型思想
                //this[0] = selector;
                //this.length = 1;
                push.call(this, selector);
            } else if (selector.version === this.version) {
                return selector;
            }
            return this;//实现链式编程
        }
    }

    /**
     * extend方法
     * @type {Function}
     */
    jQuery.fn.extend = jQuery.extend = function () {
        var argLen = arguments.length;
        var arg0 = arguments[0];
        var sources = [];
        var target;
        if (argLen === 0) return this;
        if (argLen === 1) {
            sources.push(arg0);
            target = this;
        } else {
            //for(var i=1;i<argLen;i++){
            //    sources.push(arguments[i]);
            //}
            push.apply(sources, arguments);
            target = arg0;
        }

        for (var i = 0; i < sources.length; i++) {
            var source = sources[i];
            for (var key in source) {
                target[key] = source[key];
            }
        }
        return target;
    }
    /**
     * 工具类方法，添加到jQuery中，使用$.方法名（）调用
     */
    jQuery.extend({
　　　　//判断数据类型
        type: function (data) {
            return class2type[toString.call(data)];
        },
　　　　//判断是不是字符串
        isString: function (str) {
            return jQuery.type(str) === "string";
        },
　　　　//判断是不是函数
        isFunction: function (fn) {
            return jQuery.type(fn) === "function";
        },
　　　　 //抛出异常
        error: function (msg) {
            throw new Error(msg);
        },
　　　　　//去除字符串两边的空格
        trim: function (str) {
            return str.replace(/^\s+|\s+$/g, "");
        },
　　　　　//遍历（数组的遍历或者对象的遍历）
        each: function (array, callback) {
            var len = array.length;
            var i;
            if (typeof len === "number" && len >= 0) {
                for (i = 0; i < len;) {
                    if (callback.call(array[i], i, array[i++]) === false) {
                        break;
                    }
                }
            } else {
                for (i in array) {
                    if (callback.call(array[i], i, array[i]) === false) {
                        break;
                    }
                }
            }
        }
    })

    //jQuery.fn中的each方法：这样F的实例，即jQuery的对象拥有的each方法
    jQuery.fn.extend({
        each: function (callback) {
            jQuery.each(this, callback);
            return this;
        }
    })
    //css模块
    jQuery.fn.extend({
        css: function () {
            var argLen = arguments.length;
            var arg0 = arguments[0];
            var arg1 = arguments[1];
            if (argLen === 0) return this;
            if (argLen === 1) {
                if (jQuery.isString(arg0)) {
                    //表示获取第一个dom元素的css样式
                    var firstDom = this[0];
                    return window.getComputedStyle(firstDom, null)[arg0];
                } else {
                    //是一个对象的时候表示设置多个样式
                    //return this.each(function(){
                    //    var dom = this;
                    //    jQuery.each(arg0,function(styleName,styleValue){
                    //        dom.style[styleName] = styleValue;
                    //    })
                    //})
                    return this.each(function () {
                        jQuery.extend(this.style, arg0);
                    });
                }
            } else {
                //传递两个参数；设置单个css样式
                return this.each(function () {
                    this.style[arg0] = arg1;
                })
            }

        },
　　　　//显示
        show: function () {
            return this.css("display", "block");
        },
　　　　//隐藏
        hide: function () {
            return this, css("display", "none");
        },
　　　　//切换显示和隐藏
        toggle: function () {
            return this.each(function () {
                var $this = $(this);
                $this.css("display") === "none" ? $this.show() : $this.hide();
            })
        }
    })
    //属性模块
    jQuery.fn.extend({
        attr: function (arg0, arg1) {
            var argLen = arguments.length;
            if (argLen === 0) return this;
            if (argLen === 1) {
                if (jQuery.isString(arg0)) {
                    //获取第一个dom元素的属性值
                    var firstDom = this[0];
                    return firstDom.getAttribute(arg0);
                } else {
                    //设置一个对象的属性
                    return this.each(function () {
                        var dom = this;
                        jQuery.each(function (className, classValue) {
                            dom.setAttribute(className, classValue);
                        })

                    })
                }
            } else {
                //两个参数；设置属性
                return this.each(function () {
                    this.setAttribute(arg0, arg1);
                })
            }
        },
        hasClass: function (className) {
            //遍历，只要有一个dom元素含有className这个类名就返回true
            var isExist = false;
            this.each(function () {
                if ((" " + this.className + " ").indexOf(" " + className + " ") > -1) {
                    isExist = true;
                    return false;
                }
            })
            return isExist;
        },
        addClass: function (className) {
            var classNames = className.split(" ");
            return this.each(function () {
                for (var i = 0; i < classNames.length; i++) {
                    var singleClassName = className[i];
                    if (!$(this).hasClass(singleClassName)) {
                        this.className += " " + singleClassName;
                    }
                }
            })

        },
        removeClass: function (className) {
            if (!className) {
                //删除全部类名
                return this.each(function () {
                    this.className = "";
                })
            } else {
                //删除一个或者多个类名
                var classNames = className.split(" ");
                return this.each(function () {
                    var domClassName = " " + this.className + " ";
                    for (var i = 0; i < classNames.length; i++) {
                        var singleClassName = " " + classNames[i] + " ";
                        domClassName = domClassName.replace(singleClassName, " ");
                    }
                    this.className = $.trim(domClassName);
                })
            }
        }
    })
    //dom操作方法模块
    jQuery.fn.extend({
        appendTo: function () {
            var $parent = $(arguments[0]);
            return this.each(function () {
                var child = this;
                $parent.each(function () {
                    var parent = this;
                    parent.appendChild(child.cloneNode(true));
                })
            })

        },
        prependTo: function () {
            var $parent = $(arguments[0]);
            return this.each(function () {
                var child = this;
                $parent.each(function () {
                    var parent = this;
                    parent.insertBefore(child.cloneNode(true), parent.firstChild);
                })
            })
        },
        append: function () {
            var $parent = $this;
            var $child = $(arguments[0]);
            $child.appendTo($parent);
            return this;
        },
        prepend: function () {
            var $parent = $this;
            var $child = $(arguments[0]);
            $child.prependTo($parent);
            return this;
        },
        remove: function () {
            return this.each(function(){
                this.parentNode.removeChild(this);
            })
        },
        html: function (html) {
            if (html === undefined) {
                //返回第一个dom元素的html
                var firstDom = this[0];
                return firstDom.innerHTML;
            }
            //如果为null或者其他参数时候
            return this.each(function () {
                this.innerHTML = html;
                //this.innerHTML = html===null?"":html;
            })
        },
        text: function (text) {
            if (html === undefined) {
                var str = "";
                this.each(function () {
                    str += this.innerText;
                })
                return str;
            }
            return this.each(function () {
                this.innerText = text;
            })
        }
    })

    //事件模块
    jQuery.fn.extend({
        on:function(type,callback){
            return this.each(function(){
                this.addEventListener(type,callback);
            })
        }
    })
    var eventTypes = "click dblclivk keydown keyup mousedown mouseup mouseout mouseenter mouseleave load".split(" ");
    for(var i =0;i<eventTypes.length;i++){
        var eventType = eventTypes[i];
        $.fn[eventType] = (function(){
            var type = eventType;
            return function(callback){
                return this.on(type,callback);
            }
        })()
    }

    //F的实例 = jQuery的实例
    jQuery.fn.F.prototype = jQuery.fn;
    //暴露出去两个接口
    window.$ = window.jQuery = jQuery;
})(window)