第一章  总体架构

1、设计理念

jQuery的理念就是“写更少的代码,做更多的事”,而且做到代码的高度兼容性。

2、总体架构

大致可以分为三个部分:构造模块,底层支持模块和功能模块。

3、使用自调用匿名函数

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

这里先分析一下匿名函数:

匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法,有两种比较常见的写法:

写法一:(function(){
...
}()) 写法二:(function(){
...
})()

除了这两种写法之外还有很多写法,可以参考js自调用匿名函的N种写法

jQuery采用这种方式就是为了创建一个封闭的作用域,以免受到其他代码影响或者影响其他代码,保持独立性。

自调用匿名函数也是可以传递参数的,jQuery传递了两个参数 window和undefined首先都是可以方便压缩,例如在jQuery.min.js分别用a,b代替这两个参数

再者就是window是js的全局变量,引入到jQuery的作用域后就变成了局部变量这样在访问时就不用退出jQuery的作用域查找了,这里涉及到js作用域链的知识,举个小例子说明一下

               var a='a';
(function b(){
var c='c';
console.log(c);
console.log(a);
}())
console.log(a); //输出‘a’
//console.log(c); //报错 c未声明的变量

这里我在全局和函数和局部变量里面里面分别声明了两个变量,当在全局访问时局部变量不能识别,在局部访问时都能识别。当执行访问一个变量的代码时,会首先在当前同级作用域内搜索,如果搜索不到就会向上一级作用域搜索直到找到为止。所以在函数b里面访问的两个变量的执行效率是不同的,变量c在b的作用域里面直接找到,变量a不在b的作用域里面所以向上查找到window(全局变量)下的a输出了结果。如果我们把上述代码改动一下变成这样:

       var a='a';
(function b(a){
var c='c';
console.log(c);
console.log(a);
}(a)) //console.log(a); //输出‘a’
//console.log(c); //报错 c未声明

结果一样但是效率却提高了,因为a已经在b的作用域内不需要向上查找了,这就是为什么jQuery这样做的原因,是不是很值得我们学习啊!

虽然在传递参数的时候传入了一个window但是在接受参数的时候却变成了两个,那第二个"undefined"由于没有值就会被赋值为Undefined类型的唯一值“undefined”,这样做似乎不是多次一举吗?其实不是的,在一些浏览器中undefined的值是可以被重写的,下面这张图展示了不同浏览器测试的结果

所以jQuery巧妙地利用了js的特性,保证在jQuery中的undefined是js的Undefined类型的值“undefined”。

还有就是注意到在jQuery代码的末尾是加了分号的,这是一个很好地习惯,因为在自调用匿名函数前后不加分好可能会导致错误

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jQuery", [], function () { return jQuery; } );
} //jQuery末尾使用了分号 })( window );

下面举例说明会报错的例子:

  //普通的函数不会报错
var a='a'
function b(){
return;
}
 //自调用函数匿名会报错会把“a”当成函数执行报错
var a='a'
(function (){
return;
}())

jQuery总体架构的更多相关文章

  1. jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数

    一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,con ...

  2. jQuery源码分析-01总体架构

    1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, und ...

  3. jquery 1.7.2源码解析(一)总体架构

    总体架构 jquery模块分类和依赖关系: 自调用匿名函数: /** * 自调用匿名函数,jquery加载完后立即被调用,用来加载各个模块 * 为什么使用自调用匿名函数: * 通过使用自调用匿名函数, ...

  4. jQuery整体架构源码解析(转载)

    jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...

  5. [转]新型智慧城市总体架构 华为 新ICT 一云二网三平台

    本文转自:http://www.jpsycn.com/hangyexinwen/20160801142354.html “十三五”规划提出,充分运用现代信息技术和大数据,建设一批新型示范性智慧城市.日 ...

  6. Openvswitch原理与代码分析(1):总体架构

      一.Opevswitch总体架构   Openvswitch的架构网上有如下的图表示:       每个模块都有不同的功能 ovs-vswitchd 为主要模块,实现交换机的守护进程daemon ...

  7. Apache Mesos总体架构

    http://developer.51cto.com/art/201401/426507.htm 1. 前言 同其他大部分分布式系统一样,Apache Mesos为了简化设计,也是采用了master/ ...

  8. jQuery整体架构源码解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  9. Android MediaScanner:(一)MediaScanner总体架构

    Android MediaScanner:(一)MediaScanner总体架构 分类: Android android.multimedia2012-05-19 18:29 5050人阅读 评论(5 ...

随机推荐

  1. Zookeeper-Zookeeper的配置

    前面两篇文章介绍了Zookeeper是什么和可以干什么,那么接下来我们就实际的接触一下Zookeeper这个东西,看看具体如何使用,有个大体的感受,后面再描述某些地方的时候也能在大脑中有具体的印象.本 ...

  2. 用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片

    用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片 ticons的用法可以百度 这里记录下具体的编译方法 在安装了ticons和ImageMagickDisp ...

  3. 15 Best Responsive HTML5 Frameworks 2014

    Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...

  4. ThreadLocal之我见

    一直都对ThreadLocal类感觉隔层纱似的,因为在开发中几乎是没有用到过,也大体知道他是用来保存一个线程范围内有效的变量.甚至觉着它的实现就是类似于一个map,以线程id作为key,要保存的变量作 ...

  5. asp.Net获取脚本传过来的参数的方法汇总

    最基础的知识啦,不过,还是记下来吧. 接收用get 方法传输的数据的写法: string userName= Request.QueryString["name"]; 接收用pos ...

  6. 基于HT for Web矢量实现2D叶轮旋转

    之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转. 我们先来看下这个叶轮模型长什么样 从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...

  7. RegularHelper

    private const string m_NumberPattm = @"^[-+]?(0{1}|(([1-9]){1}[0-9]{0,6}))?$"; private con ...

  8. 个人作业-Week2:案例分析

    截止时间:2016年9月25日24:00. 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课? 都不对, 软件工程有 ...

  9. jquery的promise实践--连续加载图片

    在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...

  10. LINQ的First与FirstOrDefault方法和Last与LastOrDefault方法。

    First与FirstOrDefault的方法,均是返回集合中的第一个元素,区别在于如果没有结果,前者(First)会有抛出异常,后者(FirstOrDefault)会返回默认值.Last与LastO ...