Taro 源碼解讀 - @tarojs/taro 篇

由於近期使用到 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 鼓勵一下吧！