zoukankan      html  css  js  c++  java
  • 逐行分析jQuery源码

    注意:本次源码分析选择2.0.3(因为不支持IE6、7、8,就少了很多兼容的hack的写法,对了解jQuery的实现原理有很大的帮助)

    1.jQuery有不同的版本,从2.x版本便不再支持IE6、7、8

       将jQuery拆分长框架一点一点进行了解

    2.

    (function ())();

    这个叫匿名函数自执行

    3.匿名函数自执行的好处是什么呢?

       匿名函数自执行里面的所有东西都是一个局部的。防止和其他的代码冲突。

    栗子①

    (function () {
       var a=10;
    })();
    alert(a);

    控制台报错,说a is not defined。

    4.如何能够访问到匿名函数自执行中的方法呢?

      很多种方法(⊙o⊙)哦。可以把你要对外提供的接口作为window的属性或者是方法。

    栗子②

    (function () {
        var a=10;
        
        function abc(){
            alert(a);
        }
        //将abc方法作为window的方法,就可以在匿名函数自执行外面进行访问了
        window.abc=abc;
    })();
    abc();

    但是要对外提供接口,我们才能找到使用的方法和属性

    5.在jQuery中,$()是jQuery()的简写方式。

    6.在jQuery文件中第21行到第94行就是定义了一些变量和函数。

      其中,60-64行是一个特别重要的函数,就是平时用的$() jQuery()对外的接口

    // Define a local copy of jQuery
    jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },

    但是现在这个jQuery还是以局部变量的形式存在,要提供对外的接口,才能使用。提供接口在第8823-8827行

    // If there is a window object, that at least has a document property,
    // define jQuery and $ identifiers
    if ( typeof window === "object" && typeof window.document === "object" ) {
        window.jQuery = window.$ = jQuery;
    }

    7.在第96-283行,都是给jQuery对象添加一些方法和属性。

      prototype(原型)是面向对象的东西,所以说,jQuery就是一个基于面向对象的程序,jQuery里面写的都是跟面向对象有关的。

    //96行
    jQuery.fn = jQuery.prototype

    8.为什么jQuery是一个基于面向对象的程序??

      栗子③

    //jQuery是这样调用方法的对吧。是不是和下面数组使用方法的方式非常像。
    //但是实际上$("div")他本身是一个函数调用,但是函数调用的执行结果是一个对象,所以,这就是为什么说jQuery是基于面向对象的程序喽~~~
    $("div").css(); $("div").text();
    //这是Array对象方法的使用方式,先实例化一个对象,然后使用对象调用方法。
    var arr=new Array(3); arr.sort(); arr.splice();
    //61--64
    jQuery = function( selector, context ) { //在这个函数执行完了就是一个new构造函数的过程,返回的就是一个jQuery对象~~既然返回的是对象,当然可以调用方法喽~~ return new jQuery.fn.init( selector, context, rootjQuery ); }

    9.285--347行-->  extend:是jQuery当中的一个继承方法,希望后续添加的方法都能挂在jQuery对象上,很方便扩展

    10.

    //通过使用对象调用的方法,是实例方法。
    $().text();
    $().html();
    
    //$是一个函数,在函数下面来扩展方法的话,就是扩展一些静态方法
    //在jQuery当中,给面向对象扩展静态属性和静态方法叫做扩展工具方法
    //工具方法和实例方法区别就在于,它既可以给jQuery对象来用,也可以给源生的JS来用,实例方法只能给jQuery对象调用
    $.trim(); $.proxy();

    11.静态方法和实例方法在jQuery中的关系?

      可以把静态方法看作是在jQuery中的最底层,而实例方法是上一层或者是更高层的。

      很多方法都是实例方法,里面调用的都是工具方法。

    12.877行--2856行  Sizzle 复杂选择器的实现

    13.2880行--3042行  Callbacks 回调对象 : 函数的统一管理

  • 相关阅读:
    Calendar来进行一个时间段内每天的判断
    关于PreparedStatement的setDate的了解
    git学习--创建标签
    git学习--bug分支
    hibernate(1)
    JavaScript(三)---- 控制流程语句
    JavaScript(二)---- 变量、数据类型和运算符
    JavaScript(一)---- 概述
    css(四)-- 盒子模型和定位
    css(三)-- 常用属性
  • 原文地址:https://www.cnblogs.com/yuqingfamily/p/5785593.html
Copyright © 2011-2022 走看看