目的:
了解jQuery整体结构,自己构造出$(oo).xx这种东西
解析:
在jQuery中,你会发现整篇满眼的“$(xx)”、“$(oo).css(xx)”这种,是的,它就是构造jQuery对象的构造函数简称,你可以这样理解:$==window.$==window.jQuery
也就是说我们常用的$为widow对象下的一个属性,那么这个属性是怎么跑到window上的呢?
我们先把源码中多余的代码去掉会看到:
一:
1 (function(window,undefined){ 2 3 //code 4 5 })(window)
说明:
1、通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间下,你可以玩命定义你的var变量而不会破坏全局的命名空间。
2、通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化
3、参数列表中增加undefined,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。(undefined = "123";)这样。
二:
我们将代码扩充一下
1 (function (window, undefined) { 2 var jQuery = window.jQuery = window.$ = function (selector, context) { 3 return new jQuery.fn.init(selector, context); 4 } 5 jQuery.fn = jQuery.prototype = { 6 init: function (selector, context) { 7 }, 8 jquery: "xxx" 9 } 10 jQuery.fn.init.prototype = jQuery.fn; 11 })(window) 12 alert($().jquery) //成功构造出$(oo).xx这种东西
说明:
1、selector:也就是你传入$()内的参数,形如$("#id")、$(".class")、$("div p span")
2、context:可选参数,会默认成当前节点的上下文
3、new jQuery.fn.init:jQuery真正的入口,创建出各种jQuery对象
4、jQuery.fn.init.prototype = jQuery.fn;此句为关键代码,将上一条说明中创建的jQuery实例对象的原型链连上jQuery的原型方法,原型链不太懂的同学可以看下这个【javascript继承】之——原型链继承和类式继承
(本篇至此,其他内容未完,待续……)
下一节提示:
介绍jQuery的基本组成,了解到底什么是jQuery对象,以及常说的jQuery对象的”原型方法”和“静态方法”