源代码阅读方法 jQuery源码解析 核心模块core.js
2013-05-15 16:35
981 查看
之前想看看jQuery的源代码但并没有看下去,可能是因为没有掌握好方法,现在尝试按照以下的方法进行阅读,而阅读的前提就是:这里假设你已经学会了jQuery的基本使用,对Javascript也比较熟悉,也大致浏览了它的API,已经把jQuery的源代码从github获取到了,并查看了一番(https://github.com/jquery/jquery)。
阅读源代码的步骤:详细阅读API和官方给定的文档;找到一个感兴趣的API;从最核心的基础函数库开始阅读,可以先大致了解,理清各层的关系;顺着调用的思路详细阅读,跟踪到每一条注释和变量;同样的方法阅读其他的API。
现在我们开始顺着阅读源代码的思路,找到一个感兴趣而比较简单的API开始阅读,这里就在API文档中找到核心部分的 core.js。
1、首先是分析源代码的基本框架
jQuery中最基本的一个文件就是core.js,打开这个文件大致浏览下:
1.1、项目的编译顺序
首先我们可以看到jQuery项目中的 Gruntfile.js 文件,里面就涉及到了src目录下各个模块文件的编译顺序:
可以按照这个顺序阅读源代码。下面就从core.js中抽取出最关键的一些架构代码进行解释。
1.2、关键的架构代码
1.2.1、变量和正则表达式的声明部分
这里我们关注的一个是:
在变量定义部分定义了jQuery,这里又调用了jQuery.fn.init来创建一个对象返回。
1.2.2、jQuery.fn = jQuery.prototype 对象
jQuery.fn = jQuery.prototype 把jQuery的原型prototype赋给jQuery.fn,所以jQuery.fn.init实际上就是jQuery.protype.init方法。
1.2.3、jQuery.fn.init.prototype = jQuery.fn
jQuery.fn.init.prototype = jQuery.fn;
这句话的意思就是让jQuery.fn.init继承jQuery.fn,使得jQuery.fn有的属性,jQuery.fn.init也有。
所以回到第1步中的jQuery函数:
这里的jQuery函数实际上是执行了:
return new jQuery.fn.init(selector, context, rootjQuery);
所以其实返回的对象也就相当于有jQuery.fn对象的所有属性。
其实这种初始化jQuery的方法在很多JS代码中都是非常常见的。
由此可见,jQuery方法就是一个工厂方法,用来产生jQuery对象的实例。
1.2.4、jQuery.extend = jQuery.fn.extend对象
这样,所有的由 new jQuery 方法创建的对象都具有了extend方法。关于这个extend方法的作用,其实可以扩展jQuery对象实例的功能,这在插件开发中很有用,编写插件的方法参考这里:
jQuery插件实现的方法和原理简单说明
jQuery插件的编写相关技术 设计总结和最佳实践
1.2.5、jQuery.extend()对jQuery进行扩展
1.2.6、jQuery.ready.promise = function( obj ) 函数
1.2.7、function isArraylike( obj ) {} 函数
1.2.8、rootjQuery = jQuery(document);
这句话产生的实例只是在core.js内部使用。
1.2.9、window.jQuery = window.$ = jQuery;
最后在 exports.js 文件里面看到这个:
就是将jQuery($)这个Function对象暴露到全局范围。
3、现在是时候开始仔细阅读里面的方法了
3.1、init方法
首先看到jQuery.fn = jQuery.prototype中的init方法:
根据上面的分析,这个方法是在jQuery函数(如下)被调用的,其实就是jQuery的选择器。
仔细阅读可以发现,init方法中通过对各种类型的selector选择子做不同的处理,把获取或者根据条件创建的dom节点存到this数组中然后返回。
3.2、get([index])方法
下面看看get([index])的代码:
基本用法如下:
这段代码在 jQuery.fn = jQuery.prototype 中。这里很容易可以看出,当传入的num为空时,就把this转换为空数组返回,当num不为空时,就按照num取到对应第几个元素。而这里的this就是jQuery.fn作用域,以this数组的形式存储了通过selector获取到的dom节点。
来源http://www.itzhai.com/source-code-read-jquery-source-parse-the-core-module-core-js.html
阅读源代码的步骤:详细阅读API和官方给定的文档;找到一个感兴趣的API;从最核心的基础函数库开始阅读,可以先大致了解,理清各层的关系;顺着调用的思路详细阅读,跟踪到每一条注释和变量;同样的方法阅读其他的API。
现在我们开始顺着阅读源代码的思路,找到一个感兴趣而比较简单的API开始阅读,这里就在API文档中找到核心部分的 core.js。
1、首先是分析源代码的基本框架
jQuery中最基本的一个文件就是core.js,打开这个文件大致浏览下:
1.1、项目的编译顺序
首先我们可以看到jQuery项目中的 Gruntfile.js 文件,里面就涉及到了src目录下各个模块文件的编译顺序:
build: { "dist/jquery.js": [ "src/intro.js", "src/core.js", "src/callbacks.js", "src/deferred.js", "src/support.js", "src/data.js", "src/queue.js", "src/attributes.js", "src/event.js", "src/selector.js", "src/traversing.js", "src/manipulation.js", { flag: "css", src: "src/css.js" }, "src/serialize.js", { flag: "ajax", src: "src/ajax.js" }, { flag: "ajax/script", src: "src/ajax/script.js", needs: ["ajax"] }, { flag: "ajax/jsonp", src: "src/ajax/jsonp.js", needs: [ "ajax", "ajax/script" ] }, { flag: "ajax/xhr", src: "src/ajax/xhr.js", needs: ["ajax"] }, { flag: "effects", src: "src/effects.js", needs: ["css"] }, { flag: "offset", src: "src/offset.js", needs: ["css"] }, { flag: "dimensions", src: "src/dimensions.js", needs: ["css"] }, { flag: "deprecated", src: "src/deprecated.js" }, "src/exports.js", "src/outro.js" ] },
可以按照这个顺序阅读源代码。下面就从core.js中抽取出最关键的一些架构代码进行解释。
1.2、关键的架构代码
1.2.1、变量和正则表达式的声明部分
这里我们关注的一个是:
jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); },
在变量定义部分定义了jQuery,这里又调用了jQuery.fn.init来创建一个对象返回。
1.2.2、jQuery.fn = jQuery.prototype 对象
jQuery.fn = jQuery.prototype 把jQuery的原型prototype赋给jQuery.fn,所以jQuery.fn.init实际上就是jQuery.protype.init方法。
1.2.3、jQuery.fn.init.prototype = jQuery.fn
jQuery.fn.init.prototype = jQuery.fn;
这句话的意思就是让jQuery.fn.init继承jQuery.fn,使得jQuery.fn有的属性,jQuery.fn.init也有。
所以回到第1步中的jQuery函数:
jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); },
这里的jQuery函数实际上是执行了:
return new jQuery.fn.init(selector, context, rootjQuery);
所以其实返回的对象也就相当于有jQuery.fn对象的所有属性。
其实这种初始化jQuery的方法在很多JS代码中都是非常常见的。
由此可见,jQuery方法就是一个工厂方法,用来产生jQuery对象的实例。
1.2.4、jQuery.extend = jQuery.fn.extend对象
这样,所有的由 new jQuery 方法创建的对象都具有了extend方法。关于这个extend方法的作用,其实可以扩展jQuery对象实例的功能,这在插件开发中很有用,编写插件的方法参考这里:
jQuery插件实现的方法和原理简单说明
jQuery插件的编写相关技术 设计总结和最佳实践
1.2.5、jQuery.extend()对jQuery进行扩展
1.2.6、jQuery.ready.promise = function( obj ) 函数
1.2.7、function isArraylike( obj ) {} 函数
1.2.8、rootjQuery = jQuery(document);
这句话产生的实例只是在core.js内部使用。
1.2.9、window.jQuery = window.$ = jQuery;
最后在 exports.js 文件里面看到这个:
// Expose jQuery to the global object window.jQuery = window.$ = jQuery;
就是将jQuery($)这个Function对象暴露到全局范围。
3、现在是时候开始仔细阅读里面的方法了
3.1、init方法
首先看到jQuery.fn = jQuery.prototype中的init方法:
根据上面的分析,这个方法是在jQuery函数(如下)被调用的,其实就是jQuery的选择器。
jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); },
jQuery([selector,[context]]) 返回值:jQuery 概述 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。
仔细阅读可以发现,init方法中通过对各种类型的selector选择子做不同的处理,把获取或者根据条件创建的dom节点存到this数组中然后返回。
3.2、get([index])方法
下面看看get([index])的代码:
get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this[ this.length + num ] : this[ num ] ); },
get([index]) 返回值:Element 概述 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
基本用法如下:
$("img").get(0);
这段代码在 jQuery.fn = jQuery.prototype 中。这里很容易可以看出,当传入的num为空时,就把this转换为空数组返回,当num不为空时,就按照num取到对应第几个元素。而这里的this就是jQuery.fn作用域,以this数组的形式存储了通过selector获取到的dom节点。
来源http://www.itzhai.com/source-code-read-jquery-source-parse-the-core-module-core-js.html
相关文章推荐
- jQuery 1.8源码分析 core.js核心模块 jQuery对象的构造分析
- Three.js源码阅读笔记(基础的核心Core对象)
- jQuery源码阅读(六)---jQuery实例方法解析
- jQuery核心源码core.js分析
- jQuery 1.6 源码学习(五)——core.js[5]之类型判断方法type
- jQuery 1.6 源码学习(六)——core.js[6]之jQuery对象/数组操作相关方法
- spark SQL源码阅读001——sql.core包核心类——001执行SQL语法解析
- jQuery 1.6 源码学习(三)——core.js[3]之init方法
- jQuery 1.6 源码学习(七)——core.js[7]之实用工具方法(Utilities)
- jQuery 1.6 源码学习(二)——core.js[2]之extend&ready方法
- Three.js源码阅读笔记(基础的核心Core对象)
- jQuery核心源码core.js分析
- jQuery源码解析(架构与依赖模块)笔记二--核心模块
- spark SQL源码阅读002——sql.core包核心类——002执行SQL语法2次解析SQL词(analyse)
- AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
- jquery源码阅读知识储备(11)数学方法(四舍五入)
- jQuery 1.6 源码学习(四)——core.js[4]之链式调用&隐式迭代
- OpenCV(六) Opencv中 core 核心模块详解——访问图像像素的几种方法
- JQuery源码解析-JQuery的工具方法(2)
- jQuery1.5.1 animate方法源码阅读