Skip to content

Latest commit

 

History

History
113 lines (79 loc) · 4.69 KB

mpregular.md

File metadata and controls

113 lines (79 loc) · 4.69 KB

Regular 在微信小程序中的使用

随着最近一段时间微信小程序的大火，很多公司开始重视起了微信小程序上面的开发投入，甚至出现了很多类似小程序的平台，比如快应用、百度小程序、支付宝小程序等等

（注：下文提到的小程序皆指微信小程序）

理论基础

为什么 Regular 代码可以跑在小程序平台上？

让我们先来看下微信小程序的整体架构

+--------------+    +---------------+
|     View     |    |  App Service  |
+----^---+-----+    +-----^---------+
     |   |                |   |
data |   | event    event |   | data
     |   |                |   |
+----+---v----------------+---v-----+
|              JSBridge             |
+-----------------------------------+

View 对应视图层，App Service 对应我们的逻辑层

View 和 AppService 分别跑在两个线程中，通过 JSBridge 进行数据和事件的通信

实现思路

举个例子（伪代码）：

<component
  bindtap="proxyEvent"
  data-cid="component-id"
  data-eid="event-id"
>
  Hello {{ __holders[ 'holder-id' ] }}
</component>
const Component = Regular.extend( {
  config() {
    this.data.name = 'world'
  },
  onClick() {
    console.log( 'clicked' )
  }
} )

const vm = new Component()
  1. 数据填充

只要通过一定规则拿到 holder-id 标识，就可以将 name 填充到模板的对应位置

  1. 事件处理

当 tap 触发时，会先执行 proxyEvent，mpregular 会在 proxyEvent 中通过 component-id 找到对应的 vm（ Regular 实例 ），再通过 event-id 找到真正的事件处理函数 onClick，然后执行

为什么设计 holders，而不传递真正的数据呢？

我们先来看下 holders 是长什么样子的

{
  "0":  ...,
  "1": ...,
  "2-0": ...,
  "2-1": ...
}

是一种扁平的结构

虽然这么看 holders 感觉平平无奇，但这其实是 mpregular 中最重要的一个设计

  • 全量的复杂表达式支持

    借助 holders，我们实现了 Regular 复杂表达式的全量支持。由于逻辑层提前将所有数据计算并剥离出来，放到了一个扁平的数据结构中，所以我们不再需要 小程序视图层 提供这些复杂表达式特性的支持，完全摆脱了小程序本身的模板语法限制，现在的 View 只会被用来做纯粹的渲染

  • 更高效的视图渲染

    根据我们的实践，当调用小程序的 setData 时，如果 View 层接收的数据量过大，会导致渲染时的明显卡顿，原因可能是 View 层 diff 的数据量过大导致，在传递数据过程中有一个大列表带了很多冗余的数据过去，而这点通过警告开发者不要这么做，是很难保证的，后端经常会传输一些冗余字段到前端，比如一个数组中真正用于渲染的其实只是部分字段，如果每次都是人工代码干预的方式，过滤模板真正用到的字段，代码将会很难维护，针对这块，mpregular 内部会在 setData 前把用于模板渲染的数据全部抽离到 holders 上，每个数据坑位都能通过某个 id 拿到自己数据，View 的 diff 也只需要在一层扁平结构上进行，可以保证更高效的更新和更好的渲染表现，在框架层面解决了这个问题，用食堂大叔的话说就是__吃多少拿多少__

总结

通过静态分析 Regular 模板，提前将 数据坑位查找规则 和 事件处理函数查找规则 在构建阶段生成到 wxml 中，到了运行时阶段，小程序的视图层和逻辑层就可以无缝衔接起来

和业界框架的对比

特性 小程序 mpvue mpregular
模板语法规范 原生小程序 Vue 模板语法 Regular 模板语法
组件化支持 小程序组件规范 Vue 组件 Regular 组件
computed 计算属性 x o o
model 双向绑定 x o o
slot 插槽 x x o
filter 过滤器 x x o
html 富文本 x x o
复杂表达式插值 x x o
小程序分包 o x o

目前 mpvue 的 slot 支持还存在一定问题

上述表格的结果统计于 2018-8-17，如果数据过时，欢迎在 guide 仓库的 issue 中指出

感谢

mpvue 的实现思路给了 mpregular 很多的灵感，在此表示诚挚的感谢！