jQuery框架总体分析
From：jQuery框架总体分析
jQuery的功能:
我们日常使用javascript干的最多的事情也就是
1.查找DOM节点
2.然后再对查找到的节点进行操作,例如修改样式 添加事件监听 修改内容等。
而jQuery框架的功能就是根据传递进来的参数赛选DOM节点,将DOM节点数组封装成jQuery对象.然后对这个 jQuery对象进行操作。
jQuery框架的总体架构:
- <span style="font-size: small;">(function (window,undefined){
- //jQuery的源码
- })(window)</span>
(function (window,undefined){
//jQuery的源码
})(window)
可以看到这里使用了一个匿名函数将所有源码进行了封装,这样有以下几个好处:
1. 可以防止命名冲突 里面定义的变量不会给外面的矛盾。
2. 可以实现私有变量和私有方法,只将提供给外界的公共接口暴露出来。
jQuery对象的创建:
由上面的讲解可知所有的功能都是建立在jQuery对象的基础之上的所以我们首先来看一下这个对象的构建:
- var jQuery = function( selector, context ) {
- return new jQuery.fn.init( selector, context );
- },
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
这里我们可以看到其实jQuery对象就是jQuery.fn.init对象，在init方法里面完成了jQuery对象的创建。这个方法的作用就是根据接受的字符串创建一个jQuery对象,其实这个对象就是一个DOM节点集合的数组。具体的实现后面会单独分析。
- //有定义了两个变量可以在多框架时使用
- _jQuery = window.jQuery,
- _$ = window.$,
- //将jQuery对象提供给外界使用
- window.jQuery = window.$ = jQuery
//有定义了两个变量可以在多框架时使用 _jQuery = window.jQuery, _$ = window.$, //将jQuery对象提供给外界使用 window.jQuery = window.$ = jQuery
jQuery对象的扩展机制:
创建了jQuery对象接下来就是要对对象进行方法扩展了。jQuery中有两种类型的方法，一种是jQuery的静态方法还有一种是类的实例方法。
- jQuery.fn.init.prototype = jQuery.fn;//这样我们要给jQuery扩展实例方法直接在jQuery.fn上面添加即可。
jQuery.fn.init.prototype = jQuery.fn;//这样我们要给jQuery扩展实例方法直接在jQuery.fn上面添加即可。
接着定义了extend方法: 用来扩展jQuery对象。
- jQuery.extend = jQuery.fn.extend = function(){
- /*
- 基本思路 使用for in循环遍历每一个属性进行拷贝。
- */
- }
jQuery.extend = jQuery.fn.extend = function(){
/*
基本思路 使用for in循环遍历每一个属性进行拷贝。
*/
}
从上面的方法可以看出
jQuery.extend()是给类扩展静态方法
jQuery.fn.extend()是给类扩展实例方法
jQuery库的扩展:
上面这些准备工作都做完之后接着就是要对jQuery对象进行扩展了，对于jQuery的扩展可以分为以下几个模块:
核心模块 :
1. 对jQuery对象进行操作的一些方法,因为jQuery对象实际是一个数组所以就是添加了一些数组的常用方法。 例如: size() get() first() last() slice() map()等。
2. 缓存系统
用来给DOM节点上存贮数据的。方法有data() removeData()两个方法。具体实习实现参考后面的文章。
3. 队列系统
这几个方法主要用来实现动画模块，方法有queue() dequeue() clearQueue().
工具类模块 :
这部分主要提供了一些工具方法例如对字符串的处理,数组的处理,浏览器特性的一些测试等。
事件处理模块 :
jQuery对于事件的处理方式是： 创建了一个Event构造函数用来生成 事件对象 ，这个对象是在 W3C event对象基础上建立的，并且屏蔽了浏览器之间的差异。还定义了一个event对象 里面添加 了一些常用的对事件处理的方法 例如事件绑定 解绑 事件触发 等这些方法使用的都是Event构造函 数创建出来的对象。有了这个event对象 接下来就是利用each方法和extend方法给jquery.fn这个 对象添加一些事件监听器。内部都是调用了event的方法。
动画模块 :
CSS选择器模块
DOM操作模块
