深入wepy源碼:wepy運行原理分析
分析源碼之前,我們先來回顧一下,wepy 的使用:
<!-- 小程序入口 app.wpy --> <script> import wepy from 'wepy'; export default class extends wepy.app { ...... } </script>
讓我們一起看看 export 出來的 class,是怎么轉(zhuǎn)換成小程序語言的。
在《深入wepy源碼:wpy文件編譯過程》中,我們介紹了 wepy-cli 是如何編譯 wpy 文件的,里面有說到,complie-script.js 在處理 script 代碼時,會加入 wepy 初始化的代碼。編譯之后 dist 目錄下的文件,如下:
// dist/app.js App(require('./npm/wepy/lib/wepy.js').default.$createApp(_default, {})); // dist/pages/index.js Page(require('./../npm/wepy/lib/wepy.js').default.$createPage(Index , 'pages/index'));
可以看出,主要調(diào)用了 $createApp 和 $createPage 方法。在看這兩個方法之前,我們先來看一下 wepy 的目錄結(jié)構(gòu),以便后面的分析更好理解。
wepy目錄結(jié)構(gòu)
├─wepy ├─src ├─app.js 全局app邏輯,請求優(yōu)化、promisify API、攔截器功能等 ├─base.js 定義了 $createApp 和 $createPage 等方法 ├─component.js 組件邏輯,臟值檢查、組件通信等 ├─event.js 事件方法 ├─mixin.js 混合方法 ├─native.js 空,代碼里用于app.js中重新定義wx接口 ├─page.js 繼承component,page的一些優(yōu)化 ├─util.js 工具方法 ├─wepy.js 入口文件 ├─test ├─...
createApp和 createPage
$createApp
// dist/app.js App(require('./npm/wepy/lib/wepy.js').default.$createApp(_default, {}));
$createApp() 返回了一個類型為 object 的 config,里面包含了 ['onLaunch', 'onShow', 'onHide', 'onError'] 這些方法。
還執(zhí)行了 $initAPI(),主要利用 Object.defineProperty 的 get 方法,將返回封裝為 promise,這里也是 API 實現(xiàn) promise 寫法的核心。
$createPage
// dist/pages/index.js Page(require('./../npm/wepy/lib/wepy.js').default.$createPage(Index , 'pages/index'));
$createPage() 和 $createApp() 類似,只不過是返回的是 Page 的方法,此外,還在生命周期中,添加了數(shù)據(jù)臟值檢查 $apply()。
數(shù)據(jù)綁定
wepy 使用臟數(shù)據(jù)檢查對原生小程序 setData 進行封裝,在函數(shù)運行周期結(jié)束時執(zhí)行臟數(shù)據(jù)檢查。如果在異步函數(shù)中更新數(shù)據(jù)時,則需要手動執(zhí)行 $apply()。
在 $createPage() 中,會在生命周期中調(diào)用 $apply(),來看一下它的定義:
$apply (fn) { if (typeof(fn) === 'function') { fn.call(this); this.$apply(); } else { if (this.$$phase) { this.$$phase = '$apply'; } else { this.$digest(); } } }
$$phase 標識是否有 臟數(shù)據(jù)檢查 在運行,如果沒有,則執(zhí)行 $digest()。
$digest() { let k; let originData = this.$data; this.$$phase = '$digest'; this.$$dc = 0; while (this.$$phase) { this.$$dc++; if (this.$$dc >= 3) { throw new Error('Can not call $apply in $apply process'); } ...... this.$$phase = (this.$$phase === '$apply') ? '$digest' : false; } }
$digest() 執(zhí)行時,主要是遍歷 originData,將 originData[k] 和 this[k] 做對比,如果不一樣,放到 readyToSet中,在循環(huán)之后,統(tǒng)一執(zhí)行 setData 方法。
最后,在檢查 $$phase 是否有被設(shè)置為 '$apply',如果是,則再做一次臟數(shù)據(jù)檢查。