解读一个开源框架,最终目的当然就是学习程序的设计思想和实现技巧。

JavaScript宗旨就是Write Less, Do More,简洁的API,优雅的链式,强大的查询与便捷的操作都是我们喜欢他的原因。作为开发人员在使用jQuery时,由于仅仅只知道jQuery文档中的使用方法,不明白jQuery的运行原理,时常会碰到许多的问题。这些问题大部分是使用不当而产生,极少数是jQuery的Bug。因此如果我们只知道使用jQuery,而不知道其原理,那就是“知其然,而不知其所以然”,不明白其中运行机理和核心源码,我们也很难写出基于jQuery类库的高性能的程序出来。

jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我尽量按照这样的顺序去学习:

1. 读官方文档,官方有非常详细的文档说明

2. 读源码,加注释,把自己思考的过程和结果记录下来

3. 大量阅读相关的网文和书籍,比如相同主题的分析文档,网上常问的问题等

不管怎么说写一篇源码分析,记录自己的心得,加深理解,对我们来说好处不言而语。

好吧,废话不多说,开始解读(基于 jQuery 1.11 版本)。有分析或者语言表达不到位之处请指正(文笔一般)^^。

分析源码:首先要看懂这个(自调用匿名函数)

任何库和框架的设计,第一个要解决的问题就是命名空间与变量污染的问题。jQuery恰好利用到了javascript的函数作用域的特性,采用IIFE立即调用表达式包裹自身的方式来解决这个问题。

(function( window, undefined ) {
})(window,void 0);

通过定义这样一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。如果将匿名函数返回值(函数)赋予func,并且返回值调用匿名函数作用域上的变量,该局部变量在函数这行完之后空间不会被释放。

var func = (function( window, undefined ) {
var i = 0
return function(){
console.log(i++);
}
})(window,void 0);

多次运行func(),你会发现i实现了自加功能。

这样确保jQuery创建的变量不能和导入的其他程序所使用的变量发生冲突,这也是jquery兼容性强大原因之一。

从jQuery各个版本来看,jQuery立即调用函数表达式使用有三种写法:

/*第一种:*/
(function(global,factory){
factory(global)
})(this,function(){
return function(){
//jQuery 实现
}
}) /*第二种:*/
var factory = function(){
return function(){
//jQuery 实现
}
}() var jQuery = factory();
/*
  这种模式类似工厂模式,只是创建了一个单例
*/ /*第三种:*/
(function(window,undefined){
var jQuery = function(){
}
window.jQuery = window.$ = jQuery;
})(window) /* 这种写法的优势在于:
1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,在闭包内部使用它的时候,可以把它当成一个局部变量
2、undefined也是同样的道理,其实这个undefined并不是JavaScript数据类型的undefined,而是一个普普通通的变量名。只是因为没给它传递值,它的值就是undefined,undefined并不是JavaScript的保留字
*/

对比写法1和写法3,写法3 利用写法1思想,把整个函数作为参数传递给另外一个函数,这样做的目的是主要是判断jQuery在不同平台下的加载逻辑。

当前的主流库一般都提供了对AMD和CMD的支持。jQuery也不例外,来看看代码的实现。

(function( global, factory ) {
if ( typeof module === "object" && typeof module.exports === "object" ) {//判断是否模块化引入jQuery 支持CMD规范
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else if("function" == typeof define && define.amd) { //支持 AMD
   define([],factory)
   }else {
           factory( global );
}
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
    //省略jQuery实现
    return jQuery;
})

接下来看看jQuery自调用匿名函数中都实现了什么功能,按照代码顺序做下排列:

(function( window, undefined ) {

var jQuery = function( selector, context ) {//构建jquery对象
return new jQuery.fn.init( selector, context, rootjQuery );
}
// 工具函数 Utilities
// 异步队列 Deferred
// 浏览器测试 Support
// 数据缓存 Data
// 队列 queue
// 属性操作 Attribute
// 事件处理 Event
// 选择器 Sizzle
// DOM遍历
// DOM操作
// CSS操作
// 异步请求 Ajax
// 动画 FX
window.jQuery = window.$ = jQuery;
})(window);

以上注释清晰的展现了jQuery大致结构,有了这个结构框架,就能看懂jquery能做什么(结合jQuery文档,很容易就上手)。

jQuery一共13个模块,从2.1版开始jQuery支持通过AMD模块划分,这里面各个模块也不是单一的,比如jQuery动画,都会依赖异步队列、动画队列、回调队列与数据缓存模块等。 
jQuery抽出了所有可复用的特性,分离出单一模块,通过组合的用法,不管在设计思路与实现手法上jQuery都是非常高明的(这里模块化思想值得我们借鉴与学习)

任何程序代码不是一开始就复杂的,成功也不是一躇而蹴的。接下来章节就来分解jQuery内部各个模块,探讨各个模块功能与实现。坚持^^

最新文章

  1. ImageView属性
  2. css之px自动转rem—“懒人”必备
  3. HDU 4911 http://acm.hdu.edu.cn/showproblem.php?pid=4911(线段树求逆序对)
  4. 【OpenStack】OpenStack系列1之OpenStack本地开发环境搭建&&向社区贡献代码
  5. opengl绘制正弦曲线
  6. ACM第四站————最小生成树(普里姆算法)
  7. Java:String、StringBuffer和StringBuilder的区别
  8. 【Linux】gdb调试core文件
  9. 使用GitHub建立自己的个人主页
  10. Session Store
  11. 得到bundle seed id
  12. js performance
  13. JQuery获取Checkbox组的值
  14. TCP拥塞控制 (1)
  15. C#中的深复制与浅复制
  16. IDL Interpolate()函数
  17. Windows技巧
  18. (原)MobileNetV1
  19. java类中使用quartz,设置自动任务Demo
  20. 让DOM从页面中消失的方法

热门文章

  1. ios单元測试之GHUnit
  2. 如何注释ascx中的代码
  3. Get Length 使用dynamic关键字
  4. 请问在C#的Winform下如何用正则表达式限制用户只能在textBox中输入18位的身份证号码。
  5. hdu 6118(最小费用流)
  6. POJ 3264 Balanced Lineup (线段树)
  7. 2205 等差数列(dp)
  8. input点击修改样式
  9. 阿里云 CentOS 6.5 使用XAMPP 搭建LAMP环境
  10. xhtml1-frameset.dtd