From:jQuery框架总体分析

jQuery的功能:

    我们日常使用javascript干的最多的事情也就是

        1.查找DOM节点

        2.然后再对查找到的节点进行操作,例如修改样式 添加事件监听 修改内容等。

   而jQuery框架的功能就是根据传递进来的参数赛选DOM节点,将DOM节点数组封装成jQuery对象.然后对这个      jQuery对象进行操作。  


jQuery框架的总体架构:

Js代码
  1. <span style=“font-size: small;”>(function (window,undefined){  
  2.     //jQuery的源码  
  3. })(window)</span>  
(function (window,undefined){
    //jQuery的源码
})(window)

    可以看到这里使用了一个匿名函数将所有源码进行了封装,这样有以下几个好处:

1. 可以防止命名冲突 里面定义的变量不会给外面的矛盾。

        2. 可以实现私有变量和私有方法,只将提供给外界的公共接口暴露出来。 

 

 jQuery对象的创建:

由上面的讲解可知所有的功能都是建立在jQuery对象的基础之上的所以我们首先来看一下这个对象的构建:

 


Js代码
  1. var jQuery = function( selector, context ) {  
  2.     return new jQuery.fn.init( selector, context );  
  3. },  
var jQuery = function( selector, context ) {
	return new jQuery.fn.init( selector, context );
},

    这里我们可以看到其实jQuery对象就是jQuery.fn.init对象,在init方法里面完成了jQuery对象的创建。这个方法的作用就是根据接受的字符串创建一个jQuery对象,其实这个对象就是一个DOM节点集合的数组。具体的实现后面会单独分析。

Js代码
  1. //有定义了两个变量可以在多框架时使用  
  2. _jQuery = window.jQuery,  
  3. _$ = window.$,  
  4. //将jQuery对象提供给外界使用  
  5. window.jQuery = window.$ = jQuery  
//有定义了两个变量可以在多框架时使用
_jQuery = window.jQuery,
_$ = window.$,
//将jQuery对象提供给外界使用
window.jQuery = window.$ = jQuery

 

   jQuery对象的扩展机制:

      创建了jQuery对象接下来就是要对对象进行方法扩展了。jQuery中有两种类型的方法,一种是jQuery的静态方法还有一种是类的实例方法。

Js代码
  1. jQuery.fn.init.prototype = jQuery.fn;//这样我们要给jQuery扩展实例方法直接在jQuery.fn上面添加即可。  
jQuery.fn.init.prototype = jQuery.fn;//这样我们要给jQuery扩展实例方法直接在jQuery.fn上面添加即可。

     接着定义了extend方法: 用来扩展jQuery对象。

Js代码
  1. jQuery.extend = jQuery.fn.extend = function(){  
  2.    /* 
  3.         基本思路 使用for  in循环遍历每一个属性进行拷贝。 
  4.    */  
  5. }  
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操作模块


版权声明:本文为leelike原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/leelike/archive/2011/01/21/1940747.html