您好,登錄后才能下訂單哦!
這篇文章主要講解了“wepy運(yùn)行原理是什么”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“wepy運(yùn)行原理是什么”吧!
分析源碼之前,我們先來(lái)回顧一下,wepy 的使用:
<!-- 小程序入口 app.wpy --> <script> import wepy from 'wepy'; export default class extends wepy.app { ...... } </script>
讓我們一起看看 export 出來(lái)的 class,是怎么轉(zhuǎn)換成小程序語(yǔ)言的。
在《深入wepy源碼:wpy文件編譯過(guò)程》中,我們介紹了 wepy-cli 是如何編譯 wpy 文件的,里面有說(shuō)到,complie-script.js 在處理 script 代碼時(shí),會(huì)加入 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 方法。在看這兩個(gè)方法之前,我們先來(lái)看一下 wepy 的目錄結(jié)構(gòu),以便后面的分析更好理解。
├─wepy ├─src ├─app.js 全局app邏輯,請(qǐng)求優(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 ├─...
// dist/app.js App(require('./npm/wepy/lib/wepy.js').default.$createApp(_default, {}));
$createApp() 返回了一個(gè)類型為 object 的 config,里面包含了 ['onLaunch', 'onShow', 'onHide', 'onError'] 這些方法。
還執(zhí)行了 $initAPI(),主要利用 Object.defineProperty 的 get 方法,將返回封裝為 promise,這里也是 API 實(shí)現(xiàn) promise 寫法的核心。
// dist/pages/index.js Page(require('./../npm/wepy/lib/wepy.js').default.$createPage(Index , 'pages/index'));
$createPage() 和 $createApp() 類似,只不過(guò)是返回的是 Page 的方法,此外,還在生命周期中,添加了數(shù)據(jù)臟值檢查 $apply()。
wepy 使用臟數(shù)據(jù)檢查對(duì)原生小程序 setData 進(jìn)行封裝,在函數(shù)運(yùn)行周期結(jié)束時(shí)執(zhí)行臟數(shù)據(jù)檢查。如果在異步函數(shù)中更新數(shù)據(jù)時(shí),則需要手動(dòng)執(zhí)行 $apply()。
在 $createPage() 中,會(huì)在生命周期中調(diào)用 $apply(),來(lái)看一下它的定義:
$apply (fn) { if (typeof(fn) === 'function') { fn.call(this); this.$apply(); } else { if (this.$$phase) { this.$$phase = '$apply'; } else { this.$digest(); } } }
$$phase 標(biāo)識(shí)是否有 臟數(shù)據(jù)檢查 在運(yùn)行,如果沒(méi)有,則執(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í)行時(shí),主要是遍歷 originData,將 originData[k] 和 this[k] 做對(duì)比,如果不一樣,放到 readyToSet中,在循環(huán)之后,統(tǒng)一執(zhí)行 setData 方法。
最后,在檢查 $$phase 是否有被設(shè)置為 '$apply',如果是,則再做一次臟數(shù)據(jù)檢查。
感謝各位的閱讀,以上就是“wepy運(yùn)行原理是什么”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)wepy運(yùn)行原理是什么這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。