相信很多童鞋都用过jquery,但是对于jquery源码了解的并不是很多。接下来我将带大家了解下jquery源码设计思想。
首先我们要先知道jquery对外暴露了两个变量,$和jQuery,这两变量指向同一函数
$()传入任何参数,jq会做不同的处理,但是都会得到jq对象
jq对象实例会以下标的形式存储数据,还有length属性,说明jq是一个伪数组
那接下来我们思考:jquery为什么这么设计首先个人认为jquery的设计原则是内存共享,设计的时候所有的对象,构造方法,原型都访问同一块内存,就是jQuery.prototype
想想我们在每次$('div')的时候是不是重新创建了一个对象.所以在jquery内部帮我们new一个对象,而new的操作是由一个工厂函数完成的,这个工厂函数就是jQuery.
ok,我们现在已经可以通过jquery函数创建对象了,但是如果要是想要访问jQuery的原型还是很麻烦必须通过jQuery.prototype访问,为了方便访问,这个时候我们重新定义一个变量fn,并且置换原型,jQuery.fn = jQuery.prototype = {constructor:jQuery}
现在还有一个问题我们通过jQuery.prototype或者jQuery.fn是没有办法找到构造函数的,换句话说构造函数和jQuery没有产生关系,为了让他们产生关系,通过jQuery.fn可以找到init构造函数,我们将init构造函数添加到原型上jQuery.fn.init = function(){}
至此,已经接近尾声,我们的构造函数如何访问jQuery.fn上的内容呢?只需要让构造函数的原型指向工厂函数的原型即可jQuery.fn.init.prototype = jQuery.fn;
(function (window) {
var jQuery = function (selector) {
return new jQuery.fn.init(selector);
}
jQuery.fn = jQuery.prototype = {
constructor:jQuery
};
var init = jQuery.fn.init = function (selector) {
}
init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
}(window));
|
|