zoukankan      html  css  js  c++  java
  • jquery源码解析:代码结构分析

    本系列是针对jquery2.0.3版本进行的讲解。此版本不支持IE8及以下版本。

    (function(){

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

      (96,283)     给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用)

      (285,347)    extend : jQuery的继承方法

      (349,817)    jQuery.extend():扩展一些工具方法(静态方法,直接通过$来调用的,比如:$.trim)

      (877,2856)  Sizzle:复杂选择器的实现。比如:$("ul li + p ");

      (2880,3042)  Callbacks:回调对象-》函数的统一管理。

      (3043,3183)  Deferred:延迟对象-》对异步的统一管理

      (3184,3295)  support:功能检测

      (3308,3652)  data(): 数据缓存

      (3653,3797)  queue():队列管理,dequeue.

      (3803,4299)  attr(),prop(),val(),addClass(),对元素属性的操作

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

      (5140,6057)  DOM操作:添加,删除,获取(next),包装(wrap),Dom筛选

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

      (6621,7854)  提交的数据和ajax的操作:load,ajax

      (7855,8584)  animate():运动的操作。 show,hide,fadeIn。

      (8585,8792)  offset(),位置和尺寸的一些方法

      (8804,8821)  jQuery支持模块化的模式

      (8826)             window.jQuery = window.$ = jQuery;

    })()

    (function(window,undefined){    

      //window局部化,1.查找速度快。2.利于代码压缩,可以把window压缩成a。

      //undefined,有些浏览器的undefined可以被修改,为了防止undefined被修改,所以传了一个undefined给了jQuery

      core_strundefined = typeof undefined;    

        //为了防止ie9以及以下版本,判定一个xmlNode方法为undefined时出问题。  

        //比如:a.b== undefined(a为xmlNode,并且在IE9以下浏览器下,b不存在a中,出问题);  typeof a.b== "undefined"(没问题)

      class2type = {};    

         //类型判断,里面存的是{"[object String]":"string",....}。先去了解object.prototype.toString.call()

      core_version = "2.0.3";

      core_concat = [].concat;    //缓存数组方法以及对象方法。利于压缩。可以对core_concat压缩。

      ......

      var rootjQuery,

      _jQuery = window.jQuery,       //以防在引入jQuery库时,已经有其他库引用jQuery和$标示符了。

      _$ = window.$,         //因此先把他们保存起来。(prototype.js就引用了$标识)

      jQuery = function(selector, context){

        return new jQuery.fn.init(selector,context,rootjQuery);

      }

      ......

      window.jQuery = window.$ = jQuery;

    })(window)  

    这里我要详细的讲下new jQuery.fn.init(selector,context,rootjQuery);我看了太多别人写的jQuery源码解析,大多写的不详细,导致刚开始看的时候,没看懂。

    我们平常新建一个jQuery对象:$("div"),jQuery("div"),调用的就是new jQuery.fn.init(selector,context,rootjQuery);

    很多人会有疑问,怎么new一个init,就是jQuery对象。除非init.prototype 就是jQuery.prototype。

    大家可以在283行看到这样一句话:jQuery.fn.init.prototype = jQuery.fn;96行看到这样一句话:jQuery.fn = jQuery.prototype = {}

    印证了上面的观点。jQuery.fn.init.prototype 就是jQuery.prototype。

    当你们去看init方法的时候,会发现它返回的是this,this指的就是new出来的jQuery对象,而大家都知道,当访问一个实例对象的方法和属性时,如果实例对象没有,那么就去找原型对象,因此jQuery.prototype对象中的属性和方法,都可以通过new 出来的jQuery实例对象访问。也就是$("div")这种jQuery的实例对象可以调用各种在jQuery.prototype对象中的属性和方法。

    而对于这种静态属性和方法,$.trim,jQuery.trim,是在构造函数的属性上定义的,跟实例对象没有什么关系。举个例子:function Person(){},Person.prototype={};

    new Person()就是实例对象,它可以调用Person.prototype中的所有属性和方法。而Person.trim = function(){},就是静态方法,只能通过构造函数Person.trim才能进行调用。

    有一个知识点,-webkit-margin-left   ->js访问时,会转化成webkitMarginLeft,而-ms-margin-left会转换成MsMarginLeft。

    加油!

  • 相关阅读:
    Laravel 5.7 RCE (CVE-2019-9081)
    Laravel 5.8 RCE 分析
    CVE-2018-12613 的一些思考
    2019CISCN华南线下两道web复现
    Intellij idea导入项目时没有目录结构
    [BZOJ4907]柠檬
    [BZOJ3675]序列分割
    aes加解密
    java:基于redis实现分布式定时任务
    PBKDF2加密
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4127380.html
Copyright © 2011-2022 走看看