浅析jQuery库的核心架构和常用API的简单实现

Posted 2020-08-07

以下代码只是呈现了jQuery库中的原型继承的实现原理，以及其常用功能模块的简单实现，并不涉及过多的兼容性处理


//This is my$;
(function (window , undefined) {
    //核心架构
    function my$(selector){
        //使用构造函数，创建my$对象，构造函数是其原型中的一个方法
        return new my$.prototype.init(selector);
    }
    my$.fn = my$.prototype = {
        constructor : my$,
        type : my$,
        events : {},
        length : 0 ,
        //核心模块init
        init : function (selector) {
            if(!selector){
                return this ;
            }
            //如果参数是字符串
            if(typeof selector ==="string"){
                //如果是html标签
                if(selector.charAt(0) === "<"){
                    [].push.apply(this , this.constructor.parseHtml(selector));
                }else{
                    //如果参数是选择器，
                    [].push.apply(this , this.constructor.Select(selector));
                }
                return this;
            }
            //如果参数是入口函数
            if(typeof selector === "function"){
                var oldfn = window.onload ;
                window.onload = function(){
                    oldfn && oldfn();
                    selector();
                }
            }
            //如果参数的DOM元素
            if(selector.nodeType){
                this[this.length ++] = selector;
                return this;
            }
            //如果参数是my$对象
            if(selector.type === "my$"){
                //return selector;
                [].push.apply(this , selector);
                return this ;
            }
            //如果参数是伪数组对象
            if(selector.length >= 0){
                [].push.apply(this, selector);
                return this ;
            }else{
                this[0] = selector;
                this.length = 1;
            }
            return this;
        },
        //常用方法模块
        toArray : function () {
            return [].slice.apply(this);
        },
        get : function (index) {
            if(index === undefined){
                return this.toArray();
            }else {
                if(index >= 0){
                    return this[index];
                }
                return this[this.length + index];
            }
        },
        eq : function(index){
            return this.constructor(this.get(index));
        },
        each : function(callback){
            this.constructor.each(this , callback);
            return this;
        },
        map : function(callback){
            return this.constructor.map(this , callback);
        },
        end : function () {
            return this.prev || this ;
        }
    }
    //实现原型链继承结构
    my$.prototype.init.prototype = my$.fn;
    //实现添加方法的功能
    my$.fn.extend = my$.extend = function(obj){
        for(var k in obj){
            this[k] = obj[k];
        }
    }
    //---------------工具方法模块------------------------------------
    //创建标签功能
    my$.parseHtml = (function () {
        var node = document.createElement("div");
        return function (str){
            var arr = [];
            node.innerHTML = str ;
            arr.push.apply(arr , node.childNodes);
            return arr ;
        }
    })();
    //选择器模块
    my$.Select = (function () {
        //不考虑兼容问题的简单实现就是采用querySelectAll的方法
        var support = {},//能力检测
            rnative = /\[nativecode\]/,
            push = [].push;
        support.qsa = rnative.test( document.querySelectorAll + "");
        var Select  = function( selector) {
            if (support.qsa) {
                return document.querySelectorAll(selector);
            }
        }
        return Select;
    })();
    //---------------------添加工具方法------------------------
    my$.extend({
        each : function(arr , callback){
            if( arr.length >= 0){
                for(var i = 0 ; i < arr.length ; i ++){
                    if( callback.call(arr[i] , i , arr[i] ) === false){
                        break;
                    }
                }
            } else{
                for(var k in arr){
                    if( callback.call(arr[k] , k , arr[k]) === false){
                        break;
                    }
                }
            }
            return arr;
        },
        map : function(arr , callback){
            var newArr = [];
            if( arr.length >= 0){
                for(var i = 0 ; i < arr.length ; i ++){
                    var res = callback(arr[i] , i)
                    if( res !== undefined){
                        newArr.push(res);
                    }
                }
            }else {
                for(var k in arr){
                    var res = callback(arr[k] , k)
                    if( res  !== undefined){
                        newArr.push( res );
                    }
                }
            }
            return newArr;
        },
        //DOM操作
        append : function (parent , newchild ) {
            parent.appendChild(newchild);
        },
        //样式操作
        getStyle : function (dom ,name) {
            if(dom.currentStyle){
                return dom.constructor[name];
            }else{
                return window.getComputedStyle(dom , null)[name];
            }
        },
        //属性操作
        getText : function (dom) {
            if(dom.innerText){
                return dom.innerText;
            }else{
                return dom.textContent;
            }
        }
        //可以继续添加...
    });

    //实例方法 --- DOM操作
    my$.fn.extend({
        appendTo : function (nodes){
            var list =  this.constructor(nodes);
            var newObj = this.constructor() ;
            var temp ;
            for(var i = 0 ; i < list.length ; i ++){
                for(var j = 0 ; j < this.length ; j ++){
                    temp = i === 0
                        ? this[j]
                        : this[j].cloneNode(true);
                    list[i].appendChild( temp );
                    newObj[ newObj.length ++ ] = temp;
                }
            }
            newObj.prev = this;
            return newObj;
        },
        append : function(nodes){
            this.constructor(nodes).appendTo(this);
            return this;
        }
        //可以继续添加...
    });
    //事件函数
    my$.fn.extend({
        on : function ( type , fn ) {
            return this.each(function(i , v ){
                v.addEventListener(type , fn);
            });
        },
        off : function( type , fn ){
            return this.each(function( i , v ){
                v.removeEventListener( type , fn );
            });
        }
    })
    my$.each(("onblur,onfocus,onclick,onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout," +
        "onmouseover,onmouseup,onmousewheel,onkeydown,onkeypress,onkeyup").split(",")
        , function ( i , v) {
            var event = v.slice(2);
            my$.fn[event] = function(callback){
                return this.on( event , callback);
            };
        });
    //样式操作
    my$.fn.extend({
        css : function (name , value) {
            if(typeof name === "string" && typeof value === "string"){
                this.each(function () {
                    this.style[name] = value;
                })
            }else if(typeof name === "string" && value === undefined){
                return this[0].style[name];
            }else if(typeof name === "object" && value === undefined){
                this.each(function () {
                    for(var k in name){
                        this.style[k] = name[k];
                    }
                })
            }
            return  this ;
        }
    });

    //属性操作
    my$.fn.extend({
        attr : function (name , value) {
            if(typeof name === "string" && typeof value === "function"){
                this.each(function ( i , v) {
                    this.setAttribute(name , value.call(this , v , i));
                });

            }else if(typeof name === "string" && typeof value === "string"){
                this.each(function () {
                    this.setAttribute(name , value);
                });

            }else if(typeof name === "string" && value === undefined){
                return this[0].getAttribute(name);
            }else if(typeof name === "object" && value === undefined){
                this.each(function () {
                    for(var k in name){
                        this.setAttribute( k , name[k]);
                    }
                });
            }
            return  this ;
        },
        html : function (value) {;
            if(typeof value === ‘string‘){
                this.each(function () {
                    this.innerHTML = value;
                });
            }else if( value === undefined){
                return this[0].innerHTML ;
            }
            return this ;
        }
    });
    
    window.my$ = window.$ = my$ ;
})(window);