Kbone原理解析 & 小程序技术选型

2019-12-16 12:05

转载自微信敞开社区: https://developers.weixin.qq.com/community/develop/article/doc/0006a6326b8d38e56b998833456813

“Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。”

首要咱们来看下一般Web端结构,以Vue结构为例,一份Vue模板对应一个组件,在代码构建阶段编译成调用凯发网娱乐下载Dom接口的JS函数,履行此JS函数就会创立出组件对应的Dom树,然后烘托到浏览器页面上。

可是,小程序是双线程的,并没有Dom树的概念,逻辑层和视图层彻底别离,逻辑层是一个朴实的JSCore,开发者能够编写JS脚本,可是无法直接调用Dom/Bom的api, 没有任何浏览器相关的完成。

在小程序中,视图层和逻辑层的交互是经过数据和时刻驱动的。

因而,要完成跨端同构,问题是:怎样将web端代码转为小程序代码?

现在业界盛行的第三方跨端结构们,惯例做法都是:静态编译兼容。

原理是把代码语法剖析一遍,然后将其间的模板部分翻译成对应的跨端需求的模板。

静态编译最大的局限性是无法确保转化的完整性,由于Vue模板和WXML模板的语法并不是直接对等的,Vue的特性规划也和小程序的规划无法划等号,这天然就导致了部分Vue特性的丢掉。

比如像Vue中的v-html指令、ref获取Dom节点、过滤器等就统统用不了。

除了Vue本身的特性外,一些本来依靠Dom/Bom接口的Vue插件页无法运用,例如Vue-Router。

Kbone是经过供给 适配器 的方法来完成同构,即运行时兼容,而非静态编译。

Kbone的适配器中心包括两个部分:

miniprogram-render: 仿制Dom/Bom接口,结构仿制Dom树;

miniprogram-element: 监听仿制Dom树改变,烘托到页面,一起监听用户行为,触发事情。

仿制Dom树和浏览器的运行时比照:

运用内置组件和自定义组件的自引证来进行递归,创立组件树。

如图,自定义custom-dom为递归自引证组件:

递归的停止条件是遇到特定节点、文本节点或许children空节点。

在创立出组件树猴,将Dom节点和自定义组件实例进行绑定,以便后续的Dom更新和操作。

kbone这儿还对节点数进行了优化:

假如一个dom节点对应一个自定义组件的话,就会创立许多自定义组件,这样会很糟蹋开支,这儿做了子树的兼并,也就是说3层才创立一个自定义组件,节约开支。

优化前:17个dom=17个自定义组件; 优化后:17个dom=4个自定义组件,蓝色那个是单节点,会兼并到上面的树;

dom 子树作为自定义组件烘托的层级数是能够经过装备传入,理论上层级越多,运用自定义组件数量越少,功用也就越好。

一棵很大的 Dom 树,一次性 setData 到视图层,可能会超越 setData 的巨细约束,拆分红多棵子 Dom 树,然后分批的 setData 到视图层,能够节约开支。

小程序的事情是视图层到逻辑层的通讯方法,事情绑定在组件上,当被触发时,就会履行逻辑层中对应的事情处理函数。

小程序的捕获冒泡是在视图层view端,因而逻辑层在整个捕获冒泡流程中各个节点接收到的事情不是同一个目标,小程序事情的捕获冒泡和阻挠冒泡等操作必须在WXML模板中生命,无法运用接口完成。

为了能够让web端和小程序端的事情体系行为共同,kbone除了仿制了一份Dom树外,也把整个事情体系仿制了一份,即在仿制Dom树上进行捕获冒泡。

当自定义组件监听到用户的操作后,就将事情发往仿制Dom树,后续自定义组件监听到的同一个事情的冒泡就直接疏忽。

当触发改节点,仿制Dom树接收到事情后,再进行捕获和冒泡,让事情在各个节点触发。

官方现已供给了kbone-cli能够用来快速开发:

用npm大局装置kbone-cli

能够依据自己的技能栈挑选不同的开发模板:React/Vue/Omi/Preact

然后就能够愉快的进行开发啦~

生成的demo项目结构如下:

demo中包括了多页跳转、vue-router、vuex等的运用示例,以及mp-webpack-plugin的装备示例。

关于多页面的运用,在 Web 端能够直接经过 a 标签或许 location 目标进行跳转,可是在小程序中则行不通。一起 Web 端的页面 url 完成和小程序页面路由也是彻底不一样的。

其间,有一部分两头差异的事务逻辑功用,也给出了3中不同的解决方案:

运用vue-improve-loader,在构建时对dom树节点进行删减,在需求提出的节点加上check-reduce特点 运用reduce-loader,将事务中不需求被打包的代码进行去除,运用行内loader和环境变量来判别 运用款式躲藏,即设置不需求显现的节点款式为 display:none

在实践开发中,还会碰到一些细节,例如:

详细了解了kbone之后,咱们来剖析下小程序技能结构究竟应该怎样选?

web端转小程序 or 两头 or 想要尝鲜 == kbone

多端 or Vue 技能栈 == uni-app

多端 or React 技能栈 == taro

不介意学习新技能栈 == wepy 2.0 or chaemeleon

小程序在十分快速的更新迭代,就算是原生结构也仍是有一些坑的,因而没有哪种结构是百分之百完美,需求依据事务详细需求以及本身技能栈偏好来进行挑选。

文章中提及到的部分第三方结构仅仅参阅了官方文档,没有逐逐个一测验,有问题费事指出,鞠躬~~

扫描二维码分享到微信

在线咨询
联系电话