宏观解析jQuery框架源码

对于jQuery只停留在应用是可悲的，在做项目的过程，jquery源码一度成为了自己开发的瓶颈，利用了近一天的时间对其宏观上进行了彻底的分析，收获颇丰，分享于此——

在此说明，所研究的jQuery框架版本为1.7.2。

宏观而言，jQuery框架可分为3个步骤——

1.定义jQuery变量

2.扩充jQuery变量及jQuery.fn变量(利用jQuery及jQuery.fn命名空间进行方法的填充)

3.将jQuery置于全局

其细节如下——

1./**

2. * 1.定义jQuery变量

3. * var jQuery = (function () {

4. *

5. * //定义一个局部变量jQuery

6. * var jQuery = function(selector, context) {

7. * //这是所有jQuery选择器的开始

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

9. * },

10. *

11. * //接着定义其他变量，最主要的是对jQuery函数原型的改造

12. * //两者皆为指针，并指向同一起始位置，但后续对两个对象的扩充，使得两者能

够指向的位置域有所不同

13. * jQuery.fn = jQuery.prototype = {

14. * constructor: jQuery,

15. * init: function(){...},//定义了所有jQuery选择器的开始

16. * //还定义了其他的基础方法，如

17. * size: function(){...},

18. * toArray: function(){...},

19. * get: function(){...},

20. * ......

21. * port: [].sort,

22. * splice: [].splice

23. * };

24. *

25. * //对上面定义的init函数重置原型

26. * jQuery.fn.init.prototype = jQuery.fn;

27. *

28. * //实现了jQuery原型的扩充

29. * jQuery.extend = jQuery.fn.extend = function() {

30. * ......

31. * }

32. *

33. * //定义完jQuery命名空间下的extend方法，就可以直接扩充jQuery原型了

34. * jQuery.extend({

35. * noConflict: function(deep){...},

36. * //一系列方法...

37. * })

38. *

39. * //鉴别构造器语句...

40. * //鉴别浏览器语句...

41. * //其他...

42. *

43. * //要返回这个局部变量jQuery对象，赋值给外围的jQuery变量

44. * return jQuery;

45. *

46. * )();

47. *

48. * 2.扩充jQuery变量及jQuery.fn变量(利用jQuery及jQuery.fn命名空间进行方法的填

充)

49. * 核心的两个方法——

50. * jQuery.extend({...})

51. * jQuery.fn.extend({...})

52. *

53. * 3.将jQuery置于全局

54. * 在代码的最后——

55. * window.jQuery = window.$ = jQuery;

56. *

57. */

选取3个例子进行深入研究——

1.(function ($) {

3. /**

4. * 测试-jquery选择器方法(初始化)、测试-append方法，流程解析如下——

5. * 1>$('#test', 'body')调用jQuery函数

(var jQuery = function(selector, context) {return new jQuery.fn.init(selector, cont ext, rootjQuery);})

6. * 先对选择器selector(即#test)，进行初始化，即

(jQuery.fn.init('#test', 'body', [#document]))

7. * 发现有context(即body)，那么要对body进行初始化，再调用

$(context).find(selector)方法(即$('body').find('body'))

8. * 2>对于append方法：会调用jQuery.fn.domManip方法(这个方法会调用

jQuery.buildFragment方法)，最终会调用selector的dom元素的appendChild方法进行dom操作

9. */

10. $('#test', 'body').append('

implant content

');

11.

12. /**

13. * 测试-扩展jQuery对象本身，即，用来在jQuery命名空间上增加新函数

14. * 看了源码就会发现：

15. * 它循环了传入的对象参数里面的key-value值，并对jQuery这个函数对象做了扩

展，其key值正是传参的key值(min和max)

16. */

17. $.extend({

18. min: function(a, b) { return a < b ? a : b; },

19. max: function(a, b) { return a > b ? a : b; }

20. });

21. $.min(2,3); //2

22.

23. /**

24. * 测试-扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

25. * 看了源码就会发现：

26. * 它与jQuery.extend的调用方法是同一个方法，只不过它对jQuery.fn这个命名

空间做了功能扩展

27. */

28. $.fn.extend({

29. check: function() {

30. return this.each(function() {

31. this.checked = true;

32. });

33. },

34. uncheck: function() {

35. return this.each(function() {

36. this.checked = false;

37. });

38. }

39. });

40.

41. /**

42. * 搜索jQuery变量，只要在这个代码段之前引入jQuery.js框架即可，在这个框架中，会把

jQuery变量放置到window对象中

43. * 源码如下：

44. * // Expose jQuery to the global object

45. * window.jQuery = window.$ = jQuery; //这句放在了框架中的最后一句，

46. * //这句之前，在框架中对jQuery这个局

部对象变量(命名空间)，做了方法及属性的填充

47. */

48. })(jQuery);

1./**

2. * 需要的前提知识——

3. * 1.JS执行顺序

4. * 1>预解析

5. * 2>执行

6. * 2.函数作用域

7. * 1>this(深入理解函数调用模式)

8. * 2>变量检索(深入理解变量对象VO)

9. * 3>模块模式(深入理解闭包)

10. * 3.函数原型继承

11. */

1./**

2. * 从源码的架构可以学到

3. * 1.对于重复利用的变量，提前重新赋值，置为局部变量，这样就减少了变量查找的过程，提

高了性能，如：

4. * var document = window.document,

5. * navigator = window.navigator,

6. * location = window.location;

7. * 2.单变量置顶集中声明

8. * 在每一个函数执行域中，把所有该函数所需要的变量在这个函数域的最顶端进行声明，

利于变量管理，提高性能，利于维护

9. * 3.绝大部分函数定义用的是函数表达式的方式，而非函数声明的方式，这种方式利于代码维

护，值得借鉴

10. * 4.代码组织方式

11. * 1>整体而言，深度利用命名空间的方式管理自己的代码，极大的提高的代码的维护性，

值得借鉴

12. * 2>利用模块模式，充分划分哪些变量及函数是私有的。利用命名空间的方式，充分划分

哪些变量及函数是公有的。

13. * 3>功能模块化：并没有一次性将所需要的功能函数扩充于jQuery或jQuery.fn命名空

间中，而是充分利用模块化思想进行划分。

14. * 4>源码中的每一个函数都是以key-value(这里的value是函数)的形式置于某个命名空

间中，而不是简单的功能function的平铺。

15. * 增加了代码的维护性，值得借鉴。

16. */

1./**

2. * 研究jquery框架的作用：

3. * 1.在做基于jquery框架的项目时，可依据所需性能合理使用里面的方法，

4. * 例如，能完成同样一项功能的两个方法，我们当然要选择性能高的一个方法

5. * 2.理解了整体架构，对于细节方法的具体实现，可根据应用具体分析

6. * 3.对于以后研究基于jquery的框架(如jquery.validate.js或jquery.ptTimeSelect.js)

就不再成为难点

7. * 4.记住jquery框架的编码风格，利于对比其他优秀框架，吸取其精华

8. */