zoukankan      html  css  js  c++  java
  • jquery的2.0.3版本源码系列(1)总体结构

    为什么选择2.X版本,而不是1.X版本,因为2.X不兼容IE6/7/8,所以少了兼容代码,让我们更专注于jquery原理的代码。

    一共有8830行。

    1.1 匿名函数自执行

    首先,匿名函数的作用是,把函数内部的变量和函数变成"局部变量"和"局部函数"的,那么就不会与外部的变量和函数发生冲突了。

    (function(){
                 
          var a=10;
            
     })();
             
    alert(a);//console.log报错,"Uncaught ReferenceError: a is not defined"。
    (function(){
           
            var a=10;
             
             function $(){
                     
                     alert(a);
              }
     })();
     
    $();//console报错,"Uncaught ReferenceError: $ is not defined"

    第二,如何对外部提供接口,让外部可以调用jQuery()函数。方式是把$函数挂载到window对象上。

    (function(){
                 
          function $(){
                   
                  alert("string");
           }
           
           window.$=$;
    
    })();
             
    $();//那么现在就可以在匿名函数外部调用$(),也就是jQuery()函数。

    第三,window参数。为什么要传这个参数呢?

    不传,匿名函数可以取到window对象吗?答案是可以的。

    传window参数的好处是:

    (1)查找速度快:window是作用域链的最顶端,那么传了之后就不用在匿名函数调用window时往外一层层的找了。

    (2)压缩的好处:压缩时,window变成字母,能更好的优化。下图是2.0.3压缩版本。

    第四,undefined参数。

    undefined既不是保留字,也不是关键字,它是window的一个属性。它在某些浏览器中,可以被修改,能够被赋值。

    var undefined=10;
             
    alert(undefined);

    浏览器IE10的显示效果

    浏览器IE7的显示效果

    1.2 代码行数的分布

    21行-94行,定义了一些变量和函数,jQuery=function(){}。

    96行-283行,给jQuery对象,添加一些方法和属性(jquery是基于面向对象的程序)

    从下面的写法可以看出,arr是对象,那么调用方法就直接使用点语法,它和jquery的方法调用十分相似。

    285行-347行,extend是JQ的继承方法。继承有利于代码的独立性和扩展。

    349行-817行,jQuery.extend():扩展了一些工具方法。

    jQuery提供了2种操作代码的方式,一种是实例方法,它给JQ对象使用,另一种是静态方法($是一个函数,那么是扩展工具方法),既可以给JQ对象使用,也可以给原生的JS使用。

    静态方法更加底层一些。

    877行-2856行,sizzle是复杂选择器的实现。Sizzle。

    2880行-3042行,callbacks是回调对象。它是函数的统一管理。

    首先引入jQuery库,然后参照如下代码。代码通过回调函数cb对函数进行触发fire,删除remove。

    function fn1(){alert(1)}
    
    function fn2(){alert(2)}
    
    var cb=$.Callbacks();
    
    cb.add(fn1);
    cb.add(fn2);
    cb.fire();
    cb.remove(fn2);
    cb.fire();

    3043行-3183行,Deferred延迟对象,它是对异步的统一管理。

    第一种代码看起来是十分奇怪的,明明弹出字符串2是写在后面,可是事实上是先执行,然后再弹出2。否则就要把alert出2嵌套进定时器里边儿。

    setTimeout(function(){
                 
            alert(1);
    
     },1000);
             
    alert(2);

    第二种是延迟对象的写法,写起来是同步,但执行的时候是异步。

    var dfd=$.Deferred();//定义延迟对象。
             
    setTimeout(function(){
                 
         alert(1);
             、
         dfd.resolve(true);
        
         //定时器等到3秒后,先弹出数字1,然后解决延迟对象,从而触发done方法传进去的函数参数。
    
    },3000);
    
    dfd.done(function(){    //当浏览器的js引擎读到这里时把函数存起来,等到resolve时触发
                 
          alert(2);
    
    })

    3184行-3295行,support:功能检测。对浏览器发展非常有用的。checkon老版本的浏览器默认空字符串,新版本的浏览器是on,那么以此来区分新旧浏览器。

    3308行-3652行,data():数据缓存。比如获取、删除、设置数据。data并非挂载到元素身上,而是通过一系列的操作。否则,如果挂载到元素上,又操作了对象,那么会发生内存泄漏。

    3653行-3797行,queue()队列管理。

    3803行-4299行,attr()、prop()、val()、addClass()等,对元素属性的操作。

    4300行-5128行,on()、trigger(),事件操作的相关方法。

    5140行-6057行,DOM操作:添加、删除、获取、包装、innerHTML、DOM筛选。

    6058行-6620行,css():样式的操作。

    6621行-7854行,数据和ajax():比如跨域、load()、getJson等。

    7855行-8584行,animate():运动的方法,show()、hide()。

    8585行-8792行,offset():位置与尺寸的方法。

    8804行-8821行,JQ支持模块化的模式,比如commonJS、CMD规范。

    8826行,window.jQuery=window.$=jQuery;对外提供接口。

  • 相关阅读:
    虚方法、重写方法以及抽象类的知识小结
    DateTime时间格式
    JavaScript中Eval()函数的作用
    JQuery Event属性说明
    正则表达式30分钟入门教程
    dwz的form表单中url的变量替换
    dwz中权限的控制
    Dwz下拉菜单的二级联动
    Win7下用IIS发布网站
    IntelliJ IDEA 常用快捷键列表及技巧大全
  • 原文地址:https://www.cnblogs.com/chenmeng2062/p/6728001.html
Copyright © 2011-2022 走看看