jQuery源码学习2——初始化篇

这一篇主要总结一下jQuery这个js在引入的时候做的一些初始化工作

第一句window.undefined=window.undefined;

是为了兼容低版本的IE而写的

因为在低版本的IE中undefined不是window对象下的属性

因此window.undefined就是undefined

根据=运算符右结核性的特征，=右边的window.undefined就是undefined

既然window没有undefined属性

因此左边其实可以理解为在window下面扩展一个undefined属性

这个值就是undefined

接下来

if ( $ ){
    jQuery._$ = $;
}

这个是为了防冲突处理

如果在引入jQuery之前先引入了其他的库

而其他的库里面已经将$作为全局变量

这样就先将其他库中的$存在_$属性下

接下来再将jQuery赋值给$

此后再调用$的时候调的就是jQuery的$

如果想要用其它库

就可以通过jQuery._$来获取

接下来将已经定义好的jQuery构造函数赋值给$

var $ = jQuery;

再往下给jQuery添加了一些实例方法

我个人感觉这些实例方法处于一个比较顶层的位置

也就是说在这些方法里面会调用很多其他的方法，尤其是调用其他静态方法

所以我想学习完一些最基本的静态方法之后再回过头来看这部分

接下来就是extend方法了

extend是jQuery内部扩展实例化方法和静态方法的一个基础方法

也是jQuery对外扩展插件的一个方法

jQuery.extend = jQuery.fn.extend = function(obj,prop) {
    if ( !prop ) { prop = obj; obj = this; }
    for ( var i in prop ) obj[i] = prop[i];
    return obj;
};

v1.0.0的extend逻辑很简单

从函数的定义上来看，作者希望给extend传入两个参数：obj和prop

功能自然就是把prop里面的成员扩展给obj

但是如果只传入了一个参数，就代表给jQuery或jQuery.fn本身扩展

也就是说obj就是jQuery或jQuery.fn

方法里面的第一句也就是这个作用了

值得一提的是这个地方巧妙的利用了this

如果通过如下方式调用

jQuery.extend({"aaa":1})

那么里面的this指向就是jQuery，这样就会把aaa扩展成jQuery的静态成员

而如果通过下面这种方式调用

jQuery.fn.extend({"bbb":2});

那么里面的this指向的就是jQuery.fn，即jQuery.prototype，这样就会把bbb扩展成jQuery的实例化成员

再往下就又扩展了一些静态成员

这些静态属性或方法涵盖了初始化、属性操作、样式操作、DOM操作、选择器、事件系统等等

初始化：init

属性操作：className.add className.remove className.has attr

样式操作：swap css curCSS

DOM操作：clean getAll parents sibling

选择器：expr token find parse filter

事件系统：event.add event.remove event.trigger event.handle event.fix

工具方法：each trim merge grep map

这些方法等遇到了再具体去看

再往下来了一个初始化代码块，这个代码块又给jQuery增加了两个静态成员：

jQuery.browser和jQuery.boxModel

jQuery.browser用于判断浏览器，jQuery.boxModel用于判断是否是标准盒模型

这两个属性都很简单

再往下就出现了jQuery.macros这个静态成员

macros里面其实存储了若干方法的"公共信息"

这些方法在接下来的jQuery.init()会逐个实现

jQuery.extend({
    jQuery.initDone = true;
    init:function(){
        jQuery.each(jQuery.macros.axis,function(i,n){...});
        jQuery.each(jQuery.macros.to,function(i,n){...});
        jQuery.each(jQuery.macros.each,function(i,n){...});
        jQuery.each(jQuery.macros.filter,function(i,n){...});
        jQuery.each(jQuery.macros.attr,function(i,n){...});
        jQuery.each(jQuery.macros.css,function(i,n){...});
    },
    each:function(obj,fn,args){
        if ( obj.length == undefined ){
        　　for ( var i in obj ){
           　　fn.apply( obj[i], args || [i, obj[i]] );
           }
        }else{
        　　for ( var i = 0; i < obj.length; i++ ){
        　　　　fn.apply( obj[i], args || [i, obj[i]] );
        　　}
        }
    　　 return obj;
    }
});

jQuery.macros = {
    to: {
        appendTo: "append",
        prependTo: "prepend",
        insertBefore: "before",
        insertAfter: "after"
    },    
    css: "width,height,top,left,position,float,overflow,color,background".split(","),
    filter: [ "eq", "lt", "gt", "contains" ],
    attr: {
        val: "value",
        html: "innerHTML",
        id: null,
        title: null,
        name: null,
        href: null,
        src: null,
        rel: null
    },    
    axis: {
        parent: "a.parentNode",
        ancestors: jQuery.parents,
        parents: jQuery.parents,
        next: "jQuery.sibling(a).next",
        prev: "jQuery.sibling(a).prev",
        siblings: jQuery.sibling,
        children: "a.childNodes"
    },
    each: {
        removeAttr: function( key ) {
            this.removeAttribute( key );
        },
        show: function(){
            this.style.display = this.oldblock ? this.oldblock : "";
            if ( jQuery.css(this,"display") == "none" )
                this.style.display = "block";
        },
        hide: function(){
            this.oldblock = this.oldblock || jQuery.css(this,"display");
            if ( this.oldblock == "none" )
                this.oldblock = "block";
            this.style.display = "none";
        },
        toggle: function(){
            $(this)[ $(this).is(":hidden") ? "show" : "hide" ].apply( $(this), arguments );
        },
        addClass: function(c){
            jQuery.className.add(this,c);
        },
        removeClass: function(c){
            jQuery.className.remove(this,c);
        },
        toggleClass: function( c ){
            jQuery.className[ jQuery.className.has(this,c) ? "remove" : "add" ](this,c);
        },

        remove: function(a){
            if ( !a || jQuery.filter( [this], a ).r )
                this.parentNode.removeChild( this );
        },
        empty: function(){
            while ( this.firstChild )
                this.removeChild( this.firstChild );
        },
        bind: function( type, fn ) {
            if ( fn.constructor == String )
                fn = new Function("e", ( !fn.indexOf(".") ? "$(this)" : "return " ) + fn);
            jQuery.event.add( this, type, fn );
        },

        unbind: function( type, fn ) {
            jQuery.event.remove( this, type, fn );
        },
        trigger: function( type, data ) {
            jQuery.event.trigger( type, data, this );
        }
    }
};

jQuery.init();

jQuery初始化的过程中调用了init方法

init方法通过each遍历了macros里面枚举的方法

each方法内部会做判断，判断传入的obj是数组还是对象从而确定是用foreach遍历还是for循环

最后会将这些方法实现、扩展到jQuery.prototype上

再往下，又扩展了原型方法toggle hover ready和静态方法ready

再往下又来了一个new function(){}自执行代码块

这个代码块的前半部分是为实例化对象扩展一些事件方法及其事件扩展方法

所谓事件扩展方法，举例来说click事件

相对应的，就有unclick oneclick这两个扩展方法

后半部分是做load的功能

代码的最后扩展了动画和ajax的一些成员

总的来说，jQuery源码包含了以下几个模块：

1、基本的工具方法

2、事件系统

3、DOMReady——等待DOM结构加载完成后再执行相应函数

4、DOM操作

5、属性及样式操作

6、选择器

7、动画

8、ajax