车大棒浅谈jQuery源码(一)
背景
因为最近辞职找工作,投了许多家公司。结果简历要么石沉大海,一点音讯都没有,要么就是邮件回复说不匹配。后面加了一些QQ群,才发现原来我工作经验年限太少了。现在深圳都是3经验起步,北京据说更加恐怖。
宅居在出租房中发愁的时候,看到群里大神说如果在简历上加上一句熟读jquery源码+vue源码,那么3年经验就不再是一个问题,说到底还是能力不够。
当时感觉心中为之一怔,于是开始一边看源码一边做笔记,才有这个博客的开始。
老王:"上网搜搜jQuery源码,一大把源码资料讲解。你这个博客不会直接是复制粘贴,源码注释流吧?那你的博客有啥看头!"
车大棒;'咳咳!!老王你又过来砸场子这样不好吧!当然今天你又砸到钢板了,作为一名前端段子手我会给读者复制粘贴看代码注释吗?'
我可是一条有梦想的咸鱼!
匿名函数
函数的创建
在了解什么是匿名函数之前,让我们先来上一段创建函数最常见的的形式。
var Hello = function(){
do something......
}
这种形式看起来好像是常规变量的赋值语句,即创建一个函数并将它赋值给变量Hello。这种情况下创建的函数叫做匿名函数(annoymous function),因为function关键字后面没有标识符。
那么问题来了,如果不用一个变量去接受这个匿名函数。那么如何才能调用这个匿名函数呢?
匿名函数自调用
说到匿名函数自调用,有的小伙伴可能就会尝试直接单独把function拿出来,然后再调用。
function(){console.log(1)}() //验证猜想
那么接下来让我们输出这行代码,看浏览器是否正常的解析这行代码。然后成功的在控制台输出数字1
结果浏览器很不给面子的解析失败,还给你报出一串红色警告字符。是不是感觉很委屈,恐怕浏览器才委屈吧。因为你没有按照浏览器的规则来,浏览器当然会不给面子给你红色警告。
道理其实很简单,当js编译器开始执行的时候,碰见function之后。看到它周围没有任何东西。于是就把function关键字解析成函数声明,因此导致后面运行出错了。
原文地址:https://stackoverflow.com/questions/13341698/javascript-plus-sign-in-front-of-function-name
这个时候我们只需要用一个括号把这个匿名函数包裹起来,避免js编译器将function关键字解析成函数声明,然后代码就能够正常执行。
匿名函数调用非主流的写法
当然除了主流常用的函数自调用写法,还是有其他非主流的写法。
同理因为function前面有这些运算符,因此js编译器就把后面的匿名函数当作一个整体,没有将关键字function去解析。
但是既然是非主流的写法,就肯定会存在沦为非主流写法所带来的坑。还是前面的代码,我分开输出并在每行里面添加一个return 1.结果每一行出现的结果各不相同。
这是因为匿名函数也是一种值,这些运算符会将后面的函数体当成一个整体,先对匿名函数进行求值,然后在对结果进行运算。
所以在使用这些非主流的函数自调用写法要注意这些坑,别因为追求个(装)性(B)而导致后面出现问题就尴尬了。
jQuery:匿名自执行函数
当我们打开jQuery源码的时候,前面提到主流的匿名函数结构一下子呈现眼前。
(function( window, undefined ) {
// jquery code
})(window);
为什么要传入window呢?
通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jQuery压缩代码:
(function(a,b){})(window); // window 被优化为 a
可以被修改的undefined
众所周知undefined属于JavaScript基本数据类型中的一种类型,undefined
是全局对象的属性即它是全局范围的变量。初始值undefined是原始值。
但是在ES5规范之前,undefined是可以被定义。
undefined = "one Dog"
alert(undefined) // 不遵守ES5规范的浏览器就会输出one dog
本来我还在想去哪里找不遵守ES5版本的浏览器,结果就想起来IE。于是经过测试IE6、IE7、IE8全部都能够弹出"one Dog"
因为undefined能够被重写,赋予新的值。所以早期jQuery在自调用匿名函数 的作用域内,为了确保undefined是真的未定义。(早期可是IE天下)
为什么jQuery采用匿名函数
采用匿名函数自执行,就可以形成一个巨大的作用域。里面拥有很多不用担心被污染的局部变量,之后只需要开放暴露一个接口就可以了。
好吧,估计在这里有人就开始有一点头晕了。没有关系,让我们回归到举栗子环节当中:
(function( window, undefined ) {
var $ = "车大棒";
})(window);
console.log($)
如上一个匿名函数形成了一个作用域,然后$符就是其中的局部变量。这个时候如果我们直接去拿这个$变量,console.log($)
那么浏览器肯定会报如下错。
那么这个时候,我就通过暴露接口,让外面可以通过接口直接访问到这个$这个变量。
(function( window, undefined ) {
var $ = "车大棒";
window.$ = $;
})(window);
console.log($)
那样便能够成功访问到这个我定义的局部变量$
同理jQuery源码里面也是如此,通过window去暴露一个接口。
是不是感觉,我嚓!这么简单粗暴!(额,不简单粗暴点估计你们都不愿意看了)
小结:
本节主要是对于一个匿名函数的小结,通过研究jQuery源码从而间接的帮助大家温习和回顾以前的JavaScript知识点。
原创文章,文笔有限,才疏学浅,文中若有不正之处,欢迎各位啪啪的打脸赐教。
我是车大棒,我的目标是星辰与大海!
车大棒浅谈jQuery源码(一)的更多相关文章
- 车大棒浅谈jQuery源码(二)
前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...
- 浅谈flask源码之请求过程
更新时间:2018年07月26日 09:51:36 作者:Dear. 我要评论 这篇文章主要介绍了浅谈flask源码之请求过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随 ...
- 浅谈 jQuery 事件源码定位问题
该方法已过期,chrome 48还是49开始,自带各种流行框架的事件绑定解析. 勾上这个选项即可. 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到 ...
- 浅谈C++源码的过国内杀软的免杀
以下只是简单的思路和定位.也许有人秒过,但是不要笑话我写的笨方法.定位永远是过期不了的. 其实这里废话一下 , 本人并不是大牛 ,今天跟大家分享下 .所以写出这篇文章.(大牛飘过) 只是个人实战的经验 ...
- 车大棒浅谈for循环+canvas实现黑客帝国矩形阵
背景: 一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo.觉得创意不错,就下载下来研究一下. 网上浏览jQuery的写法 $(document).ready ...
- 一个QQ木马的逆向分析浅谈(附带源码)
程序流程:首先注册自己程序的窗口以及类等一系列窗口操作,安装了一个定时器,间隔为100ms,功能搜索QQ的类名,如果找到就利用FindWindow("5B3838F5-0C81-46D9-A ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- jQuery源码浅析2–奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
随机推荐
- Mysql数据库连接查询
Mysql数据库连接查询 连接是关系数据库模型的主要特点.连接查询是关系数据库中最主要的查询,主要包括内连接.外连接等.通过连接运算可以 ...
- esri-leaflet入门教程(1)-leaflet介绍
esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...
- Cesium原理篇:glTF
关键字:Cesium glTF WebGL技术 大纲: 1 glTF简介,这是一个什么东西,有哪些特点 2 Cesium如何加载,渲染glTF,逻辑结构和关键技术 3 个人总结,从glTF学习如何设计 ...
- shiro的入门实例-shiro于spring的整合
shiro是一款java安全框架.简单而且可以满足实际的工作需要 第一步.导入maven依赖 <!-- shiro --> <dependency> <groupId&g ...
- udp 服务器界面监听
今天在做项目的时候,发现不同子网下是不能做UDP通信的,不知道是不是这样呢 遇到一个错误:eclipse遇到报错: The type JPEGImageEncoder is not accessibl ...
- 使用fliter实现ie下css中rgba的效果
直接举例吧background-color: rgba(255,255,255,0.8); 设置背景颜色为白色,不透明度设为80% 在ie下可以用fliter这一属性进行设置: filter:prog ...
- Java排序小算法(冒泡和选择)
package MyTest; import java.util.Scanner; public class BubbleSort { public void Init(int array[]) { ...
- Java基于文件的对象存储
工作中经常需要处理对象的处理,有的时候还需要将对象保存到文件中做持久化. 特别是当不能使用数据库的时候就特别需要一个简单的对象集合的增删改查操作, 于是就有了下面这个文件DB的工具类 package ...
- Java设计和实现方法
方法签名 方法名是驼峰命名 方法名最好能说明该方法主要做什么 方法参数的名字最好能说明该参数的意义 方法参数个数最好低于6个 例如: public void setTitleVisible(int l ...
- 不惧面试:HTTP协议(3) - Cookie
v博客前言 先交代下背景,写这个系列的原因是总结自己遇到的面试题以及可能遇到的题目,更重要的是,今年定的目标是掌握网络这一块的知识点,先是搞懂HTTP协议,然后是TCP/IP协议,再就是WCF如何运用 ...