00:00
哈喽,大家好,那从这个条件开始呢,我们来学习Excel的源码。啊,我们会给大家讲解一下Excel源码的一个结构,以及运行的流程啊,内部的一些实现技巧。呃,在开始呢,讲解源码之前呢,首先我先做一个说明。就是大家在看源码的时候呢,就不用自个儿去下载了。我建议呢大家使用,我给大家准备这个包。当然我这个包也是通过NPM去安装的啊,内容都是一样的。那为什么看我这个呢?因为我在这里呢,加了很多的中文注释。大家可以看一下。啊,每一行代码。都有什么,都是什么意思,我呢都做了一个说明。当然,不是每一个文件都讲的这么细啊。重要的文件,有技巧的地方,我都做了重要的这个中文的说明。不重要的,相对次要的,我的说明就比较少。有的可能只是对这个文件做了一个文字的描述。
01:01
啊,不过这些中文呢,对于大家在学习源码的时候呢,多少都会有一些帮助。啊,你在看到哪一段的时候,你能知道,哎,这个是什么意思啊,起到一个辅助作用。好,这是当前呢,对他做一个说明。那这个小节我们首先先来看一看Excel它源码,嗯,整个的目录啊,都存放的内容是什么。也就是对目录结构做一个说明。好了,我们来打开这个Excel文件夹。这个文件夹是Excel包的整个内容。下边这三个呢,是在安装Excel的时候,自动安装的几个依赖啊,这不是我们关注的重点,我们的重点在这个位置。好,那我们就一个一个开始来。首先,先看。D呢?它所存放的是打包后的文件。就是最终输出的Excel这个整体文件。
02:00
有两个你看啊,重要的一个是未打包未压缩的。一个呢是压缩后的。啊,如果说你在页面里边使用的话,显然用压缩的比这个未压缩的效率要更高一些。下边这两个文件呢,是我自己打包的啊,方便后续我们在网页里边引入啊,去看它代码的执行流程。其实内容的话跟里边是差不多的,那我就做了一点点改变啊,为了能够让代码在网页里边正常运行啊,改了一点点。好,那么第二个文件夹。Lib啊,这个是整个的核心目录,所有的源代码都是放在这个文件夹当中的。然后先看里边第一个子目录adapt。这个存放的是适配器。啊,大家看这。适配器啊,适配器的话有两个啊,里边有两个文件啊,当然这个read me的话是做一个说明一个呢是HTTP.gs。
03:00
这个文件是用来在诺基S当中。向远端服务发送HTTP请求的。比如说你在服务端请求一个接口。或者说做一个爬虫,用的都是这个文件里边的代码。而X h2.7S。这个文件它实现的是前端发送啊价格请求的功能。我们在网页里边用Excel发送阿贾克斯请求,用的就是这对代码。好,这是适配器。下边呢是cancel。通过单词字面意思我们能猜个差不多啊,这里呢,是与取消相关的一些功能文件。首先第一个呢是cancel。啊,你可以看到呢,它在这块都比较简单啊,就是一个构造函数。我们可以通过new castle方式去创建一个啊。这样的实例对象。并且这块呢,还加了一个这个属性杠杠castle杠杠啊,等于一个处这是下划线啊呃,加这个东西有什么用呢,其实就是为了识别。
04:06
我们这个。对象到底呢,是不是一个他的实力。啊,当然啊,因为呢,这个错误呢,有很多啊,我们可以通过这个属性来判断是不是用户取消的这样的一个信息。好了,最终再把它做一个输出啊,做一个暴露。然后下边这个cancel token呢,大家可能。有点印象啊,为什么呢?因为当时咱们在用Excel做取消请求的时候用了它啊。Cancel这块,它本身是一个构造函数。他可以拿实例化对象。啊,石丽华对象完了之后呢,啊就可以呢,对请求做一个取消。首先你先知道啊,这个文件呢,是用来创建取消请求那个呃,对象的一个构造函数。啊,最后呢,通过它咱们去实例化啊,不知道大家记不记得,当时咱们用的时候是这样用的啊,你有一个excel.cancel talking。
05:03
其实实例化用的函数就是它。然后呢,你看看这啊,有一个is cancel。这块就是用来判断啊,我们这个。值,它到底是不是。Cancel所产生的一个结果,是不是有取消产生的结果?啊,如果是是的话,那就是个true,如果不是的话,就是一个false。这是关于取消的三个文件。下边呢,这个是扣。核心的一些功能的。文件。点开第一个啊excel.gs这是Excel的构造函数文件,你可以看这。啊,太原构造函数最终暴露的是它。我们呢,通过Excel用它呢来实例化对象,当然了,说实例化并不是很准确啊。它只是作为创建对称的一个构造函数的组成。啊,至于创建实例对象,咱们后边还会再去说,你先知道啊,这个文件放的是Excel的构造函数。
06:06
然后呢,第二个呢,Build for pass,你通过字面意思能猜出来,用来构建一个完整的URL的函数文件,最终暴露的是一个函数。Create error通过字面意思也能猜出来,这个呢,是用来创建啊error对象的。然后看这个dispatch request,这个是用来发送请求的,这台大家可能会有有些困惑啊,发送请求不是用那个HTTP和那个Xh2.gs吗?编辑啊,他们的这个前边那个步骤。就是dispatch。由dispatch request这个函数去调其中某一个适配器来发送请求。所以说呢啊,HTTP.gs和XHR.gs我们可以认为是两个打工仔。啊,而dispatch request相当于是一个小老板。
07:01
啊,由小老板呢,去调用其中某一个员工完成指定需求。好,这是当前咱们对于dispatch做一个说明,它是用来发送请求的。还有一个呢,是enhance。Error啊,更新错误对象的一个函数文件,也是与函数啊,也是与错误相关的。好,再看下边这个intercept manager。这个是拦截器管理器的构造函数,我们通过它来去实例化拦截器啊这个对象。好,然后mer config啊,合并配置的一个函数文件。啊,就是可以将两个对象放进来,然后做一个合并。然后settle啊,这个呢,是根据响应的状态码啊来改变的一个状态。啊,大家可以看一下,然后呢,判断一下啊,就先先拿这个,先拿这个这个这个这个这个啊验证成功那个回调先拿过来啊,如果说没有问题,就改变状态为成功,如果说不满足状,不满足这个成功的状,这个状态那就设置为是失败。
08:10
啊,所以说这一个函数是用来改变请求成功状态和失败状态的一个关键点。啊,是他。好,然后呢,下边这个transform data啊这个呢是对结果做一个转换啊,对结果做一个格式化。所以说你会发现这个文件里边呢啊,都是一些什么呀,比较核心的文件,像Excel的构造函数啊,还有那发送请求啊,再比如说拦截器,还有合并对象,都是相对来说比较核心的功能。然后下边这个呢,Helper。本身是。帮助的意思。啊,帮忙帮手助手的意思啊,而在这儿它里边放的都是一些功能,功能函数。啊,点开第一个B。
09:00
啊,这个呢是一个函数啊,它它的作用其实跟BY的方法作用是差不多的啊,然后呢,去创建一个新函数,可以改变函数运行时this的指向。然后下边这个build URL呢,是用来创建URL的啊,它呢可以在URL后后边去放置参数,形成最终的URL。还有呢,是comp ul,大家看这base ul和ul一个合并。就是把URL呢合在一起,形成最终的一个结果。然后还有呢是cookies cookies这块呢,是对cookies做操作。啊,你可以看一下他这块一些。动作都是在对cookie做一些相关的处理啊。Cookie。可以去写入,而且还可以去读取cookie内容。然后呢,还有下边这个deprecated method这个方法的话呢。基本上是用不到的,我搜了一下这个方法,基本上没有,就没有出现过第二次。它的作用是干嘛呢?就是控制台提示不赞成使用的方法。
10:04
就是说会在控制台为我们输出一个内容,说这个方法呢啊不赞成,然后推荐使用新的方法。啊,在控制台做一个这样的说明。下边呢,是判断一个URL是不是一个绝对的URL啊,绝对路径。还有呢,判断ul是不是为同源的?啊,是不是来自于同一个服务。还有呢,是这个normalize header name对头信息做一个统一。把名字改成大写有这么一个作用。Pass,对头信息做一个解析。啊啊,这个的话是。呃,对。我们的这个谁呀,对这个请求做一个批量处理。我们这个批量的。阿贾克斯请求,然后做一个结果的处理,是这么一个作用。好,然后下边的话excel.gs这个是Excel的入口文件了啊,然后呢,请求的话,执行是从这个位置开始的,其实还有另外一个入口,就是后边这个index.gs但是这个文件呢,内容比较少,所以真正的入口文件是它啊excel.gs。
11:13
啊,这里边儿东西的话就比较多了啊,后边咱们再去介绍啊,你就记住这是Excel的入口文件。还有那default.gs这个文件呢,是Excel的默认配置文件。就是咱们所说那个配置对象。配置对象。默认配置信息都是在这个文件当中进行设置的。好,U这里边呢,是一个工具函数文件,包括了非常多的工具函数,然后检测是否为数组,是否为unDeFi,是否为八分,巴拉巴拉很多很多函数。我这块的话都是做了一些中文的说明。好,然后下边文件的话,相对来说就不是很重要了,这是一个change升级的一个文档说明,还有index.d.TS这是关于TS的使用一个版本文件。
12:01
index.gs这是整个包的,整个包的入口文件,从这开始,然后由它去引进来excel.gs啊,咱们那个核心文件。然后下边的话是开源的许可证,然后呢,Package n PM包的一个配置文件,还有read me,这是文档说明,还有一个是升级的一个指引。好了,那么以上的话是咱们当前对整个Excel这个包文件做了一个文件夹的结构说明啊。大家呢,心里边儿有一点印象就可以,不需要说完全都记住,因为在后边代码执行的时候,咱们还会再去说里边代码执行。好了,这个小节我们就先到这儿。
我来说两句