jQuery源码阅读笔记

自执行匿名函数：

• 常见格式：(function() { … })();
• 解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
• 作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。
• 其他写法

(function(){//常见写法
    ...
})(); 

( function(){//写法2
    ...
}() );

!function(){//写法3
    ...
}();

(function(window,undefined){
    var jQuery = (function(){
        ...
    })();
    window.jQuery = window.$ = jQuery;
})(window);

• jQuery的所有代码都所有代码都被包裹在一个立即执行的匿名函数表达式中，当浏览去加载完jQuery文件后，自调用匿名函数会立即开始执行，初始化jQuery的各个模块。
• 通过创建匿名函数，创建一个特殊的作用域，该作用域中的代码不会和已有的同名函数、方法和变量以及第三方库冲突。
• 方法的最后手动将变量jQuery添加到window对象上，明确地使变量jQuery成为公开的全局变量，而其他的部分将是私有的。

为什么要传入window
    通过传入window对象，可将window对象变为局部变量，这样当在JQ代码块中访问window对象时，不需要将作用域回退到顶部作用域，从而可以更方便的访问window；而且这样做可以在代码压缩时进行优化。

为什么设置参数undefined
1. 特殊值undefined是window对象的一个属性，将其作为局部变量使用，可缩短查找undefined时的作用域链；
2. 可在压缩代码时进行优化；
3. 可确保参数undefined的值不会被重新。

• 可通过 undefined = “hahah”; 改变undefined的值，但是不同浏览器得到的alert(undefined)结果不同；
• alert(“undefined” in window); 得true

注意自调用匿名函数最后的分号;
对于JS,如果语句分别放置在不同的行中，分号;是可选的，但是对于自调用匿名函数来说，在之前或之后省略分号都会引起语法错误。

构造函数jQuery()有7种用法：

1.jQuery( selector [,context] ) 接受一个CSS选择器表达式和可选的选择器上下文，返回一个包含了匹配的DOM元素的jQuery对象

$('div.foo').click(function(){
  $('span',this).addClass('bar');
})
对选择器表达式span的查找范围被限定在this范围内，即只有被点击元素内的span元素才会被添加类样式bar

2.jQuery( html [,ownerDocument]、jQuery(html,props) ) 用提供的HTML代码创建DOM元素

$('
My new text
').appendTo('body');
如果是单标签调浏览器原生方法document.createElement()创建DOM元素；如果是复杂标签，利用浏览器的innerHTML机制创建DOM元素。

创建一个div并设置类样式，文本内容，绑定一个click事件，插入body节点末尾，当点击该元素时，还会切换类样式test:
$("
",{
    "class":"test",
    text:"Click me!",
    click:function(){
        $(this).toggleClass("test");
    }
}).appendTo("body");

3.jQuery( element ),jQuery( elementArray )封装DOM元素为JQ对象

这个功能常见于事件监听函数，即把关键字this引用的DOM元素封装为JQ对象，然后在该JQ对象上调用jQuery方法。
$('div.foo').click(function(){
    $(this).slideUp();
});
先调用$(this)把被点击的div元素封装为JQ对象，然后调用方法slideUp()以滑动动画隐藏该div元素。

4.jQuery( object ) 封装普通对象为JQ对象

这个功能可方便地在普通JS对象上实现自定义事件的绑定和触发。
var foo = { foo:'bar',hello:'world' };//定义一个普通JS对象
var $foo = $(foo); //封装成JQ对象
$foo.on('custom',function(){
    console.log('custom event was called');
});//绑定一个事件
$foo.trigger('custom');//触发这个事件

5.jQuery( callback ) 绑定ready事件监听函数，当DOM结构加载完成时执行

ready事件并不是浏览器原生事件，而是DOMContentLoaded事件、onreadystatechange事件和函数doScrollCheck()的统称。

6.jQuery( jQuery object ) 接受一个jQuery对象，返回该JQ对象的拷贝副本

副本与传入的JQ对象引用完全相同的DOM元素

7.jQuery( ) 创建一个空的JQ对象

这个功能可用来复用JQ对象。例如，创建一个空的JQ对象，然后在需要时先手动修改其中的元素，再调用JQ方法，从而避免重复创建JQ对象。

构造JQ对象模块的总体源码结构

(function(window,undefined){

    //构造JQ对象
    var jQuery = (function(){
        var jQuery = function(selector,context){
            return new jQuery.fn.init(selector,context,rootjQuery);
        },
        //一堆局部变量声明
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector,context,rootjQuery){...},
            //一堆原型属性和方法
        };
        jQuery.fn.init.prototype = jQuery.fn;
        jQuery.extend = jQuery.fn.extend = function(){...};
        jQuery.extend({
            //一堆静态属性和方法
        });
        return jQuery;
    })();

    window.jQuery = window.$ = jQuery;
})(window);

在构造函数内容使用运算符new创建并返回另一个构造函数实例

通常我们创建一个对象或实例的方法是在运算符new后紧跟一个构造函数。但是，如果构造函数有返回值，运算符new所创建的对象会被丢弃，返回值将作为new表达式的值。
JQ在构造函数jQuery()内部用运算符new创建并返回另一个构造函数的实例，省去了构造函数jQuery()前面的运算符new，即我们创建jQuery对象时，可以省略运算符new直接写jQuery()。

jQuery.fn = jQuery.prototype？

设置jQuery.fn指向构造函数jQuery()的原型对象jQuery.prototype。jQuery.fn是 jQuery.prototype的简写

继续更新中。。。