jQuery源码框架分析

jQuery的无new构造

常规的通过构造函数创建实例的方法如下:

var A = function(selector, context) {
......
}
A.prototype = {
name: function(){},
age: function(){}
}
var a = new A();
a.name();

而使用jQuery的方法创建实例则是

$().ready();
$().noConflict();

来看看jQuery是如何通过不需要new就能创建一个新的实例:
这是jQuery的实现源码:

(function(window, undefined) {
    var 
    // ...
    jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context, rootjQuery);//返回实例
    },

    jQuery.fn = jQuery.prototype = {
        init: function(selector, context, rootjQuery) {
            return this;//this指向实例
        }
    }
    jQuery.fn.init.prototype = jQuery.fn;//显性地将init方法的原型定义为jQuery.fn,也就是jQuery.prototype(jQuery的原型)

})(window);

这样每次使用jQuery的时候就会产生一个新的实例。
定义window.$ = window.jQuery就能够用$代替jQuery。

链式调用

在jQuery中,可以对方法进行链式调用。使用链式调用可以节约代码,提高效率。

$('div').removeClass('active').addClass('hello');

要能够进行链式调用,必须在第一个方法的调用后返回对象本身。
比如:

$('div').removeClass('active').addClass('hello');

分解
a = $('div');
a.removeClass('active');
a.addClass('hello');

实现链式的基本条件就是实例this的存在,并且是同一个。

A.prototype = {
    init: function() {
        return this;
    },
    name: function() {
        return this;
    }
}

插件接口

jQuery给开发者提供了可以为jQuery添加属性和方法的接口
使用jQuery.fn.extend()来为对象添加方法。
在jQuery的源码中可以看到,jQuery.extend和jQuery.fn.extend其实是指向同一个方法的不同引用。

jQuery.extend = jQuery.fn.extend = function() {
......
}

jQuery.extend 对jQuery本身的属性和方法进行了扩展

jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展,也就是jQuery的原型进行扩展
以上两种扩展都不会破坏jQuery的原有的方法和属性。
它们的官方解释是:

1)jQuery.extend(): 把两个或者更多的对象合并到第一个当中,

2)jQuery.fn.extend():把对象挂载到 jQuery 的 prototype 属性,来扩展一个新的 jQuery 实例方法。

变量冲突处理

通过一开始保存全局变量的 window.jQuery 以及 windw.$ 。

当需要处理冲突的时候,调用静态方法 noConflict(),让出变量的控制权。
让出了这两个符号之后,是否就不能在我们的代码中使用 jQuery 或者呢 $ 呢?其实,还是可以使用的:

// 让出 jQuery 、$ 的控制权不代表不能使用 jQuery 和 $ ,方法如下:

var query = jQuery.noConflict(true);

(function($) { 

// 插件或其他形式的代码,也可以将参数设为 jQuery
})(query);

//  ... 其他用 $ 作为别名的库的代码

参考文章1
参考文章2
参考文章3

你可能感兴趣的:(jQuery源码框架分析)