jQuery总体架构
第一章 总体架构
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总体架构的更多相关文章
- jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数
一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,con ...
- jQuery源码分析-01总体架构
1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, und ...
- jquery 1.7.2源码解析(一)总体架构
总体架构 jquery模块分类和依赖关系: 自调用匿名函数: /** * 自调用匿名函数,jquery加载完后立即被调用,用来加载各个模块 * 为什么使用自调用匿名函数: * 通过使用自调用匿名函数, ...
- jQuery整体架构源码解析(转载)
jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...
- [转]新型智慧城市总体架构 华为 新ICT 一云二网三平台
本文转自:http://www.jpsycn.com/hangyexinwen/20160801142354.html “十三五”规划提出,充分运用现代信息技术和大数据,建设一批新型示范性智慧城市.日 ...
- Openvswitch原理与代码分析(1):总体架构
一.Opevswitch总体架构 Openvswitch的架构网上有如下的图表示: 每个模块都有不同的功能 ovs-vswitchd 为主要模块,实现交换机的守护进程daemon ...
- Apache Mesos总体架构
http://developer.51cto.com/art/201401/426507.htm 1. 前言 同其他大部分分布式系统一样,Apache Mesos为了简化设计,也是采用了master/ ...
- jQuery整体架构源码解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- Android MediaScanner:(一)MediaScanner总体架构
Android MediaScanner:(一)MediaScanner总体架构 分类: Android android.multimedia2012-05-19 18:29 5050人阅读 评论(5 ...
随机推荐
- Zookeeper-Zookeeper的配置
前面两篇文章介绍了Zookeeper是什么和可以干什么,那么接下来我们就实际的接触一下Zookeeper这个东西,看看具体如何使用,有个大体的感受,后面再描述某些地方的时候也能在大脑中有具体的印象.本 ...
- 用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片
用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片 ticons的用法可以百度 这里记录下具体的编译方法 在安装了ticons和ImageMagickDisp ...
- 15 Best Responsive HTML5 Frameworks 2014
Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...
- ThreadLocal之我见
一直都对ThreadLocal类感觉隔层纱似的,因为在开发中几乎是没有用到过,也大体知道他是用来保存一个线程范围内有效的变量.甚至觉着它的实现就是类似于一个map,以线程id作为key,要保存的变量作 ...
- asp.Net获取脚本传过来的参数的方法汇总
最基础的知识啦,不过,还是记下来吧. 接收用get 方法传输的数据的写法: string userName= Request.QueryString["name"]; 接收用pos ...
- 基于HT for Web矢量实现2D叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转. 我们先来看下这个叶轮模型长什么样 从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...
- RegularHelper
private const string m_NumberPattm = @"^[-+]?(0{1}|(([1-9]){1}[0-9]{0,6}))?$"; private con ...
- 个人作业-Week2:案例分析
截止时间:2016年9月25日24:00. 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课? 都不对, 软件工程有 ...
- jquery的promise实践--连续加载图片
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...
- LINQ的First与FirstOrDefault方法和Last与LastOrDefault方法。
First与FirstOrDefault的方法,均是返回集合中的第一个元素,区别在于如果没有结果,前者(First)会有抛出异常,后者(FirstOrDefault)会返回默认值.Last与LastO ...