博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
车大棒浅谈jQuery源码(一)
阅读量:5147 次
发布时间:2019-06-13

本文共 2617 字,大约阅读时间需要 8 分钟。

1240

背景

因为最近辞职找工作,投了许多家公司。结果简历要么石沉大海,一点音讯都没有,要么就是邮件回复说不匹配。后面加了一些QQ群,才发现原来我工作经验年限太少了。现在深圳都是3经验起步,北京据说更加恐怖。

宅居在出租房中发愁的时候,看到群里大神说如果在简历上加上一句熟读jquery源码+vue源码,那么3年经验就不再是一个问题,说到底还是能力不够。

当时感觉心中为之一怔,于是开始一边看源码一边做笔记,才有这个博客的开始。

1240

老王:"上网搜搜jQuery源码,一大把源码资料讲解。你这个博客不会直接是复制粘贴,源码注释流吧?那你的博客有啥看头!"

车大棒;'咳咳!!老王你又过来砸场子这样不好吧!当然今天你又砸到钢板了,作为一名前端段子手我会给读者复制粘贴看代码注释吗?'

我可是一条有梦想的咸鱼!

1240

匿名函数

函数的创建

在了解什么是匿名函数之前,让我们先来上一段创建函数最常见的的形式。

var Hello = function(){    do something......}

这种形式看起来好像是常规变量的赋值语句,即创建一个函数并将它赋值给变量Hello。这种情况下创建的函数叫做匿名函数(annoymous function),因为function关键字后面没有标识符。

那么问题来了,如果不用一个变量去接受这个匿名函数。那么如何才能调用这个匿名函数呢?

匿名函数自调用

说到匿名函数自调用,有的小伙伴可能就会尝试直接单独把function拿出来,然后再调用。

function(){console.log(1)}()        //验证猜想

那么接下来让我们输出这行代码,看浏览器是否正常的解析这行代码。然后成功的在控制台输出数字1

控制台报错

结果浏览器很不给面子的解析失败,还给你报出一串红色警告字符。是不是感觉很委屈,恐怕浏览器才委屈吧。因为你没有按照浏览器的规则来,浏览器当然会不给面子给你红色警告。

道理其实很简单,当js编译器开始执行的时候,碰见function之后。看到它周围没有任何东西。于是就把function关键字解析成函数声明,因此导致后面运行出错了。

原文地址:

这个时候我们只需要用一个括号把这个匿名函数包裹起来,避免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"

不遵守ES5标准的IE8就问你怕不怕

因为undefined能够被重写,赋予新的值。所以早期jQuery在自调用匿名函数 的作用域内,为了确保undefined是真的未定义。(早期可是IE天下)

为什么jQuery采用匿名函数

采用匿名函数自执行,就可以形成一个巨大的作用域。里面拥有很多不用担心被污染的局部变量,之后只需要开放暴露一个接口就可以了。

好吧,估计在这里有人就开始有一点头晕了。没有关系,让我们回归到举栗子环节当中:

赶紧记笔记

(function( window, undefined ) {   var $ =  "车大棒";})(window);console.log($)

如上一个匿名函数形成了一个作用域,然后$符就是其中的局部变量。这个时候如果我们直接去拿这个$变量,console.log($)那么浏览器肯定会报如下错。

1240

那么这个时候,我就通过暴露接口,让外面可以通过接口直接访问到这个$这个变量。

(function( window, undefined ) {   var $ =  "车大棒";    window.$ = $;})(window);console.log($)

那样便能够成功访问到这个我定义的局部变量$

1240

同理jQuery源码里面也是如此,通过window去暴露一个接口。

来自于jQuery2.0.3

是不是感觉,我嚓!这么简单粗暴!(额,不简单粗暴点估计你们都不愿意看了)

strip

小结:

本节主要是对于一个匿名函数的小结,通过研究jQuery源码从而间接的帮助大家温习和回顾以前的JavaScript知识点。

原创文章,文笔有限,才疏学浅,文中若有不正之处,欢迎各位啪啪的打脸赐教。

strip

我是车大棒,我的目标是星辰与大海!

转载于:https://www.cnblogs.com/chedabang/p/6610062.html

你可能感兴趣的文章
JVM_垃圾收集器
查看>>
作业二:结对项目之需求分析与原型模型设计
查看>>
线段树
查看>>
Android摄像头採集的视频数据流怎样通过Socket实时发送到目标服务端
查看>>
怎样给UINavigationBar加入button?
查看>>
iOS使用push隐藏子页面底部bottom TabBar
查看>>
MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误解决办法...
查看>>
为学Linux,我看了这些书
查看>>
vue.js源码学习分享(七)
查看>>
dropzone的使用方法
查看>>
[转]How WebKit Loads a Web Page
查看>>
user_agents 模块 parse,对浏览器信息处理模块,获取版本号等信息
查看>>
BZOJ1598: [Usaco2008 Mar]牛跑步
查看>>
python基础学习(一) 第一个python程序
查看>>
表格和分页组件封装
查看>>
javascript:window.history.go(-1)
查看>>
Leetcode zigzag conversion
查看>>
字母统计
查看>>
在windows下用vagrant建立lnmp开发环境
查看>>
线段树(基础)
查看>>