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

以下代码只是呈现了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);