加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

深入wepy源码:wepy运行原理分析

发布时间:2020-12-14 19:54:48 所属栏目:资源 来源:网络整理
导读:惠民小程序小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈 深入wepy源码:wepy运行原理分析 。 最新消息, 分析源码之前,我们先来回顾一下,wepy 的使用: 让我们一起看看 export 出来的 class,是怎么转换成小程序语言的。 在《深入wepy源

惠民小程序小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈深入wepy源码:wepy运行原理分析

最新消息,

分析源码之前,我们先来回顾一下,wepy 的使用:

让我们一起看看 export 出来的 class,是怎么转换成小程序语言的。

在《深入wepy源码:wpy文件编译过程》中,我们介绍了 wepy-cli 是如何编译 wpy 文件的,里面有说到,complie-script.js 在处理 script 代码时,会加入 wepy 初始化的代码。编译之后 dist 目录下的文件,如下:

// dist/app.jsApp(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'));

可以看出,主要调用了$createApp和$createPage方法。在看这两个方法之前,我们先来看一下 wepy 的目录结构,以便后面的分析更好理解。

wepy目录结构

├─wepy ├─src ├─app.js全局app逻辑,请求优化、promisify API、拦截器功能等├─base.js 定义了 $createApp 和 $createPage 等方法├─component.js组件逻辑,脏值检查、组件通信等├─event.js事件方法├─mixin.js混合方法├─native.js 空,代码里用于app.js中重新定义wx接口├─page.js 继承component,page的一些优化├─util.js 工具方法├─wepy.js 入口文件├─test├─...createApp和createPage$createApp

// dist/app.jsApp(require('./npm/wepy/lib/wepy.js').default.$createApp(_default,{}));

$createApp()返回了一个类型为 object 的 config,里面包含了['onLaunch','onShow','onHide','onError']这些方法。

还执行了$initAPI(),主要利用Object.defineProperty的 get 方法,将返回封装为 promise,这里也是 API 实现 promise 写法的核心。

$createPage

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

$createPage()和$createApp()类似,只不过是返回的是 Page 的方法,此外,还在生命周期中,添加了数据脏值检查$apply()。

数据绑定

wepy 使用脏数据检查对原生小程序setData进行封装,在函数运行周期结束时执行脏数据检查。如果在异步函数中更新数据时,则需要手动执行$apply()。

在$createPage()中,会在生命周期中调用$apply(),来看一下它的定义:

$apply (fn) {if (typeof(fn) === 'function') {fn.call(this);this.$apply();} else {if (this.$$phase) {this.$$phase = '$apply';} else {this.$digest();}}}

$$phase标识是否有 脏数据检查 在运行,如果没有,则执行$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()执行时,主要是遍历originData,将originData[k]和this[k]做对比,如果不一样,放到readyToSet中,在循环之后,统一执行setData方法。

最后,在检查 $$phase 是否有被设置为'$apply',如果是,则再做一次脏数据检查。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读