小程序模板網(wǎng)

深入wepy源碼:wepy運(yùn)行原理分析

發(fā)布時(shí)間:2018-05-30 11:32 所屬欄目:小程序開(kāi)發(fā)教程

分析源碼之前,我們先來(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-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目錄結(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                
  ├─...

createApp和createPage

$createApp

// 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 寫(xiě)法的核心。

$createPage

// dist/pages/index.js 
Page(require('./../npm/wepy/lib/wepy.js').default.$createPage(Index , 'pages/index'));

$createPage() 和 $createApp() 類似,只不過(guò)是返回的是 Page 的方法,此外,還在生命周期中,添加了數(shù)據(jù)臟值檢查 $apply()。

數(shù)據(jù)綁定

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@1.7.1 版本為準(zhǔn),更多信息可參考 另外,文中有任何表述不清或不當(dāng)?shù)牡胤?,歡迎大家批評(píng)指正。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24485.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢