zoukankan      html  css  js  c++  java
  • 1.1 jQuery总体框架

    1.11自调用匿名函数 self-invoking anonymous function

    打开jQuery源码,首先我们可以看到这样的代码结构:
    ( function(widow,undefined){
        //code ....
    })(window)
    1. 这是一个自调用匿名函数。那到底是什么呢?在第一括号内,创建一个匿名函数;第二个括号,表示立即执行。      → what
    2. 那么为什么要创建一个“自调用匿名函数”呢?
    通过定义一个匿名函数,创建一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。
          这一点很重要也非常有用,也是一个js框架必须的要支持的功能。jQuery被应该到海量的javaScript程序当中,必
         须保证jQuery创建的变量不能和导入它的程序所使用的变量发生冲突。
           3.   匿名函数从语法上叫 “函数直接量”,JavaScript语法需要包围匿名函数的括号,但是事实上自调用匿名函数有2中写法(注意红色括号
    //第一种
    (function() { 
      console.info( this ); 
      console.info( arguments ); 
    }( window ) )

    //第二种
    (function() { 
     console.info( this ); 
     console.info( arguments ); 
    })( window );

    4.     为什么要传入window呢?

    通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery-1.6.1.min.js:

    (function(a,b){})(window); // window 被优化为 a   

    5.     为什么要在在参数列表中增加undefined呢?

    在 自调用匿名函数 的作用域内,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。

    undefined = "now it's defined";

    alert( undefined );

    浏览器测试结果:

    浏览器

    测试结果

    结论

    ie

    now it's defined

    可以改变

    firefox

    undefined

    不能改变

    chrome

    now it's defined

    可以改变

    opera

    now it's defined

    可以改变

    6.     注意到源码最后的分号了吗?

    分号是可选的,但省略分号并不是一个好的编程习惯;为了更好的兼容性和健壮性,请在每行代码后加上分号并养成习惯。

    1.12       总体架构

    接下来看看在 自调用匿名函数 中都实现了什么功能,按照代码顺序排列:

    (function( window, undefined ) {

        // 构造jQuery对象

    var jQuery = function( selector, context ) {

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

        }

    /工具函数 Utilities

    // 异步队列 Deferred

    // 浏览器测试 Support

    // 数据缓存 Data

    // 队列 queue

    // 属性操作 Attribute

    // 事件处理 Event

    // 选择器 Sizzle

    // DOM遍历

    // DOM操作

    // CSS操作

    // 异步请求 Ajax

    // 动画 FX

    // 坐标和大小

        window.jQuery = window.$ = jQuery;

    })(window);

    --------------------------

         通过jQuery(xxx)的调用实现没有生成对象,它的this是指向window对象的,那么jQuery的那些实例方法是怎么样继承过来的呢?接下来看一下:

      var jQuery = window.jQuery= function( selector, context ) {

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

        }

    这是jQuery的总入口,jQuery对象不是通过new jQuery来继承prototype中的方法,而是jQuery.fn.init函数生成的对象。

    1.2 jQuery ---- 正则表达式



  • 相关阅读:
    [Python] 网络
    [c++] 命令
    [DB] 关系型数据库
    [win] cmd 常用命令
    [linux] Git基本概念&操作
    [SQL] 常用命令
    redis(二十四):Redis分布式锁以及实现(python)
    redis(二十三):Redis 集群(proxy 型)二
    redis(二十二):Redis 集群(proxy 型)一
    redis(二十一):Redis 架构模式实现(哨兵)
  • 原文地址:https://www.cnblogs.com/huangjihua/p/4125170.html
Copyright © 2011-2022 走看看