共计 2059 个字符,预计需要花费 6 分钟才能阅读完成。
因为近期应用到 Taro 编写小程序,出于好奇,筹备研读一下 Taro 的源码。
目录剖析
首先从官网拉取最新的 Taro 源码,版本号为 3.0.18
,源码目录如下:
目录没什么特地的,咱们来重点关注一下 packages
目录中的外围包(如下图)
这些外围包形成了 Taro
,实现了 Taro
的多平台构建。
@tarojs/taro
在开发过程中,咱们用的最频繁的包就是 tarojs/taro
,咱们从入口文件 packages/taro/index.js
开始剖析(如下图)
从上图咱们能够看出,Taro 依据不同的编译环境变量,引入了对应的编译包,从而放慢编译速度,减小编译体积。
编译包引入的是一个 initNativeAPI
初始化函数,用于初始化对应平台的原生 API。
微信平台编译包
这里咱们以最风行的微信小程序来举例说明,关上文件 packages/taro/apis/wx.js
,发现了导出的 initNativeAPI
函数(如下图)
咱们来对 initNativeApi
所做的事件进行剖析,总的来说 initNativeApi
所做的事件就是将微信的 API 进行一些二次封装,而后转成挂载在 Taro 对象下,开发者调用 Taro 的 API 即可调用到微信官网 API。
processApis
咱们先来看看 initNativeApi
中的 processApis
办法做了哪些事件吧(如下图)。
从上图能够看出,Taro 首先收集了三类办法:
1. `onAndSyncApis`:事件监听和同步事件 API;2. `noPromiseApis`:没有返回 `Promise` 的异步事件,`Taro` 将会把这些事件应用 `Promise` 进行二次封装;3. `otherApis`:其余 API,如设施、媒体、平台专属 API;
对于微信端不反对的办法,将返回一个正告函数(如下图)
对于 otherApis
,如果最初一个参数是 TaroComponent
,则会将最初一个参数替换为 TaroComponent.$scope
(如下图)
对于 onAndSyncApis
和 noPromiseApis
则有几种不同的解决形式:
1. 当第一个参数为字符串时,返回微信 API 执行后果(如下图)
2. 当办法为跳转类函数时,先去掉结尾的 `/`,去掉 `query` 局部,应用 url 获取组件。如果组件存在且蕴含 `componentWillPreload` 办法时,会执行 `componentWillPreload` 并且将执行后果存储在 `cacheData` 中,提供给组件后续的生命周期钩子应用。
3. 新建 `Promise`,将办法封装,在执行胜利时 `resolve`,执行失败时 `reject`,而后将该 `Promise` 返回。
下面这些工作就是 processApis
所做的事件,它将所有的微信原生 API 进行二次封装,而后挂载在 Taro 对象中。
request
接下来咱们看看对网络申请的革新,这里除了革新 request
外,还新增了 addInterceptor
和 cleanInterceptors
办法,用于在申请收回前或收回后做一些额定操作。代码实现如下:
taro.request = link.request.bind(link)
taro.addInterceptor = link.addInterceptor.bind(link)
taro.cleanInterceptors = link.cleanInterceptors.bind(link)
想要看懂 addInterceptor
的实现,须要找到 Link
的实现(如下图)
从上图红圈处能够看出,用于创立 Link
实例的拦截器将被放在调用链的最初一个,而后由 Chain
顺次程序执行每一个拦截器(interceptor),而后最终执行到创立 Link
实例的这个 interceptor
。
从下面的剖析就能很清晰的看出 拦截器
的实现,当初咱们来看看 request
的实现(如下图)。
从上图能够看出,request
实现的次要需要就是将原生的 request
办法应用 Promise
进行二次封装,并没有更多非凡解决。
通过剖析,咱们发现 Taro 对网络申请的封装,使其领有了 拦截器
的个性,并且有了更敌对的 Promise
调用形式。
其余
接下来三个都是微信小程序的全局办法,间接进行挂载(如下图)
接下来是像素转换函数,次要是将像素转成对应的 rpx
(如下图)
紧随其后的是 canIUseWebp
,意思是判断是否能够应用 webp
格局的图片(如下图)
从下图能够看出,目前只有安卓平台和开发者工具反对 webp
格局的图片,所以 webp
格局的图片肯定要审慎应用。
最初一步,将微信的云开发 SDK 挂载在 Taro.cloud
对象中,实现挂载(如下图)
小结
到这里,@tarojs/taro
就曾经解析实现了,这部分源码的实现还是比拟简洁明了的,作为 Taro
源码浏览系列入门还是挺不错的~
最初一件事
如果您曾经看到这里了,心愿您还是点个赞再走吧~
您的点赞是对作者的最大激励,也能够让更多人看到本篇文章!
如果感觉本文对您有帮忙,请帮忙在 github 上点亮 star
激励一下吧!