目录

1. jQuery 介绍

2. 如何只暴露出jQuery，$接口?

3. 接口jQuery(简写$)是怎么实现如此复杂的功能的?

4. extend--jQuery扩展功能的机制

1. jQuery 介绍

jquery是使用js编写的第三方库。按着官网的宣传，jQuery的优点是 write less，do more。

简而言之，js原生可能需要好几行才能实现的效果(还得考虑浏览器兼容问题)，jquery可能一行代码就搞定了。(无需考虑兼容问题)

2. 如何只暴露出jQuery，$接口?

这个比较简单，我们通过立即执行函数，便可以将我们需要暴露的接口赋值给window即可

;(function(){ 
    function foo(){ 
        console.log(a); 
    } 
    window.a = 1; 
})(); 

console.log(a); // 1 
console.log(foo); // ReferrenceError

(function(e, undefined){
    function foo(){
        console.log(a);
    }
    window.a = 1;
})(window);

首先传入window对象的作用如下

undefined = 1; 
console.log(undefined); // 返回1，undefined被修改

如果undefined一不小心被修改了，那么可能后面的程序会出错。

现在的浏览器是不能修改undefined了(修改了也无效)，而且在严格模式下还会报错。

3. 接口jQuery(简写$)是怎么实现如此复杂的功能的?

如下所示

$("ul li").css("background", "red");

$.extend({
    utilMethod: function(){
        console.log("utilMethod");
    }
})

我们确实通过工厂函数来批量造函数(这样就可以不用new)，但是jQuery应该不会这样做。原因如下:

首先造出来的对象都叫Object，其次一些公共的方法每次都需要拷贝一下，非常消耗性能(jQuery的方法还特别多)

// 源码61行，做了一定的修改
function jQuery(){
    // 源码中是new jQuery.fn.init(), 在96行的代码中可以看到其实jQuery.fn === jQuery.prototype
    // 这里也是简写，毕竟fn比prototype短了很多
    return new jQuery.prototype.init();
}

function jQuery(){
    return new jQuery.prototype.init();
}

jQuery.prototype = {
    constructor: jQuery,
    init: function(){},
    eq: function(){}
}

但是我们需要使用jQuery.prototype上的方法。如下:

$("ul li").eq(0);

那该怎么办?

我们需要手动将 jQuery.prototype.init.prototype 重新赋值为 jQuery.prototype就可以了(毕竟__proto__只是一个引用)

// 源码283行，fn其实是prototype的缩写 
jQuery.fn.init.prototype = jQuery.fn;

因此jQuery提供了extend方法，不但jQuery内部使用extend方法来实现其它功能，我们自己也可以使用extend来扩展jQuery的方法

这样的话，就不需要直接在jQuery.prototype上直接书写方法了。

下一篇说一下extend方法的实现