jQuery1.7系列一: jQuery 对象的实质

    声明:写博客,是对自身知识的一种总结,也是一种分享,但由于作者本人水平有限,难免会有一些地方说得不对,还请大家友善指出,或致电:[email protected]

      关注:国内开源jQuery-UI组件库:Operamasks-UI

         jQuery版本: v1.7.1

 

jQuery1.7系列一:   jQuery 对象的实质

 

一.何为jQuery对象

 

        用过jQuery的朋友都知道,jQuery很大的一个特点就在于其选择器上,我们可以很容易对众多的dom节点进行操作,而且还是链式的操作,这一切都要得益于jQuery对象,那么jQuery对象到底是什么?

        我们经常写类似这样的代码: jQuery(“div”).addClass(“myCls”),而这里jQuery(“div”)返回的结果就是jQuery对象,其实它也就是一个 javascript对象来的,只是这个对象的创建过程比较复杂而已,而只有理解好了jQuery对象的实质,才能更好的深入学习jQuery。

 

二.jQuery对象创建的背后

 

    为了把握好jQuery对象的创建,有必要对其创建过程进行一个深入的分析。以下代码是jQuery对象创建的一个架子,我们可以由此来学习。

(function( window, undefined ) {
	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){
				//做一些初始化工作,比如查找对应选择器的dom元素
			},
			length: 0
			//其它一些东西
		};
		jQuery.fn.init.prototype = jQuery.fn;
		return jQuery;
	})();
	window.jQuery = window.$ = jQuery;
})(window);
 

接下来,我们一步一步来解开jQuery对象的谜底。

 

1.      最外层的闭包代码是这样的:

(function( window,undefined ) {

})(window);

 

        把window对象传进去了,这倒没什么,有趣的是为什么会有个undefined 的形参? 在javascript语言中,Undefined是其中的一个类型,而其类型值只有 undefined 一个,就像Number也是其中的一个类型,但类型值却有多个,如100,20,88等等。而这个 undefined是用来标识一个未赋值的变量的,就比如声明一个变量 var fun , 这时fun的值就为undefined。但是由于有些古老的浏览器并不直接认识undefined,然而在调用函数传递参数时如果形参个数大于实参,后边 的形参却会被赋值真正的undefined,所以像上边这种写法是最保险的,能够保证闭包的形参undefined 一定是Undefined类型的唯一值 undefined.

        如果觉得有点晕,看下边这个例子。

var a =undefined;
 

        在某些旧浏览器中,如果它不能直接认识undefined,那么这样写应该会报undefined 这个变量没有定义的错误,而如果这样写

 

(function(undefined){

    var a = undefined;

})();
 

那么就一定不会报错了,所以jQuery还是考虑得很周到的。

 

2.      让我们再次精简代码,看看这个jQuery到底是什么

var jQuery = (function() {

    var jQuery = function(selector, context ) {

        return newjQuery.fn.init( selector, context, rootjQuery );

    },

    return jQuery;

})();

window.jQuery = window.$ = jQuery;
 

 

在使用的时候,我们是这样写的 $(“div”),而这个$其实就是下边这个函数,

 

var jQuery = function( selector, context ) {

         return new jQuery.fn.init( selector,context, rootjQuery );

},
 

所以执行 var $obj = $(“div”)就相当于执行

var $obj= return new jQuery.fn.init( "div", context, rootjQuery );

 

         到这里,我们便了然于胸,原来所谓的jQuery对象就是jQuery.fn.init这个函数的一个实例而已。

上边最原始的骨架图现在还剩下两句比较难懂的语句,它们是

 

jQuery.fn= jQuery.prototype = {}; //代码1

jQuery.fn.init.prototype= jQuery.fn; //代码2
 

为了更清晰到底发生了什么事,我们直接看执行这两句代码后结果如何:

 

jQuery1.7系列一: jQuery 对象的实质_第1张图片

 

        由以上图可以看出,这时候,init函数的prototype已经指向了jQuery.fn 所指向的对象,那也就是说,如果我向fn添加属性的话,那么 new init() 得到的实例也就相应可以找到新加的属性了,这也就是jQuery的插件机制。

         比如,你想添加一个方法,判断选择器中是否包括了表单,那么该插件大致可以这样写:

 

$.fn.containsForm = function(){

 var i=0,

      el;

    while(el=this[i++]){

             if(el.tagName.toLowerCase() === ‘form’){

                 return true;

             }

    }

    return false;

}
 

然后就可以直接使用该插件了,如 $(“myform”).containsForm();

 

       jQuery对象主要就是这样了,顺便还谈到了jQuery对fn的扩展机制,在jQuery的源码中,对jQuery对象添加了很多便利的方法,如addClass,find等,都是通过这种方式实现的。

你可能感兴趣的:(jQuery)