中国领先的IT技术网站
|
|

宏观解析jQuery框架源码

宏观而言,jQuery框架可分为3个步骤——1.定义jQuery变量;.扩充jQuery变量及jQuery.fn变量(利用jQuery及jQuery.fn命名空间进行方法的填充);3.将jQuery置于全局

作者:金广国来源:博客园|2012-11-06 11:07

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


对于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 ($) {  
  2.        
  3.      /**  
  4.       * 测试-jquery选择器方法(初始化)、测试-append方法,流程解析如下——  
  5.       * 1>$('#test', 'body')调用jQuery函数(var jQuery = function(selector, context) {return new jQuery.fn.init(selector, context, 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('<div class="c2">implant content<div>');      
  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.  */ 

原文链接:http://www.cnblogs.com/jinguangguo/archive/2012/10/31/2748766.html

【编辑推荐】

  1. 使用 RequireJS 优化 Web 应用前端
  2. 2012年12个值得收藏的新jQuery插件
  3. 响应式Web设计的必备jQuery插件
  4. 页面构建和JS前端不得不说的那点事儿
  5. 用JSLint精炼提升JavaScript代码
【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

软件设计师考试全真模拟试题及解析

本书是按照全国计算机技术与软件专业技术资格(水平)考试《软件设计师考试大纲》的要求,参照《软件设计师教程》及近年来考试试题编写的,...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Phthon,最神奇好玩的编程语言