zoukankan      html  css  js  c++  java
  • jQuery源码解析对象实例化与jQuery原型及整体构建模型分析(一)

    //源码剖析都基于jQuery-2.0.3版本,主要考虑到兼容IE

    一、关于jQuery对象实例化的逻辑:

    整个jQuery程序被包裹在一个匿名自执行行数内:

     (function(window,undefined){
           //......
     })(window);

    外部程序不能直接调用jQuery对象的属性和方法,jQuery所有方法和属性被变成局部私有的。例如:

     1 (function(window,undefined){
     2     var a = "我是a";
     3     var b = function(a){
     4            alert("我是b");
     5     }
     6  })(window);
     7  console.log(a);
     8 //报错:a is not defined(a未定义)
     9  b();
    10 //报错:b is not defined(b未定义)

    既然所有方法和属性都是私有的,就存在一个问题,如何使用jQuery对象和对象的方法和属性呢?

    这就产生了jQuery的接口$:(8825~8827行)

    if ( typeof window === "object" && typeof window.document === "object" ) {
        window.jQuery = window.$ = jQuery;
    }

    这个逻辑处理了jQuery的对外接口,将自身赋给window对象下的$属性,同时还赋给了window对象下的jQuery属性,这样在全局下(window对象)就有了两个属性可以调取jQuery,分别是$和jQuery;

    然后jQuery又是通过一个构造方法实现的(61~64行)

    1 jQuery = function( selector, context ) {
    2 // The jQuery object is actually just the init constructor 'enhanced'
    3     return new jQuery.fn.init( selector, context, rootjQuery );
    4 }

    通过上面的源码可以看到,jQuery是将两个参数selector,context传入一个init()方法(init()方法会返回一个对象);

    init立即执行获后获得的就是一个jQuery对象初始化对象。   193行 //return jQuery.makeArray( selector, this );

    //通常的jQuery对象初始化
    $(fuction(){
        //通过jQuery实现的具体业务逻辑
    });

    暂且不说写入自己的这个匿名方法参数的原理,$()就等于实现了jQuery(),也同等于init()执行并返回对象,这个对象就是jQuery对象的实例化。

    还记得在jQuery通过window的自身扩展的$属性和jQuery属性来实现jQuery的接口,也就是说,jQuery实例化的方法还可以写成:

    //通常的jQuery对象初始化
    jQuery(fuction(){
        //通过jQuery实现的具体业务逻辑
    });

    以上就是jQuery对象实初始化的全部过程和内容,接下来正式进入jQuery原型的构建原理和extend内部扩展方法说明的内容:

    继续剖析jQuery原型的构建原理:

    从上面对象实例化的jQuery的过程可以知道,jQuery的对象原型是通过init()方法构造的,然而下面一段代码一定会让很多人疑惑(96~279行)。

    jQuery.fn = jQuery.prototype = {......}

    前面的构造逻辑已经表明了,jQuery对象是通过init()方法构造的,

    那么jQuery的原型应该就是基于init构造方法的,为什么还要在这里写jQuery的原型呢?

    所以往后看,源码283行有如下代码:

    jQuery.fn.init.prototype = jQuery.fn;

    这行代码就是将前面写的jQuery原型赋给了init的原型,

    所以,jQuery通过init()构造实例对象,最后还是基于自身的原型构造的。最终的原型链指向的还是jQuery.proptotype;

    在源码96行可以看到,jQuery的原型是一个自定义的对象(前面有提到);

    jQuery.fn = jQuery.prototype = {......}

    所以在源码的100行有这样的代码,重新将构造方法指向了jQuery,实现了jQuery的构造逻辑。

    constructor: jQuery,

    二、jQuery构建模型分析图

    三、jQuery构建逻辑的实现过程(仿写jQuery)

    1.创建一个闭包环境

  • 相关阅读:
    三级连动的下拉框(数据库版)吐血推荐
    行排菜单
    用AJAX制作天气预
    XmlHttp实战学习中....
    ASP+JS三级连动下拉框
    ASP连接11种数据库语法总结
    oa数据库设计
    RSS PUBData 把正常时间函数转成rss2.0的标准
    浮点数的表示和基本运算
    C#4.0新特性:可选参数,命名参数,Dynamic
  • 原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/9966299.html
Copyright © 2011-2022 走看看