「微信小程序」剖析(四):原生的实时DOM转Virtual DOM

在之前的几篇文章里,我们讨论了MINA的一些原理。晚上在想着怎么结合Vux + Virtual Dom实现一个名为WINV框架的时候,在探索WCC功能才发现:自己又忽略掉了一个很重要的性能优化细节。这个WCC如果内置在浏览器里,就是可以实时的将DOM转换为以JSON表示的DOM。

先将DOM转换为Virtual Dom,再转换回去的优点是可以分离数据和样式。这也就是为什么React的学习成本高的原因之一了。

Virtual Dom的表现形式

为了将真实的DOM转换为Virtual DOM,我们需要将DOM以一定的形式保存下来,如MINA的:

<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>

如:

又或者是React中的:

当然我们也可以自己实现一个比较简单的DOM转为Virtual DOM,如将

转换为接近原生的:

原生的Parser

我会假装你已经知道了浏览器相关的很多细节,我也假装我已经对这些细节很清晰。下图一份Webkit浏览器的早期架构图:

如果我们使用JS实现一个将WXML将换为DOM JSON,我们就需要间接通过JavaScript Engine(即JSCore )来转换这个JSON文件。当有大量的DOM的时候,这就不是一件轻松的事了。所以,在WCC的生成代码里对DOM的数量限制为16000

我们可以用原生的接口来将WX DOM转换为JSON,但是我们没有办法用原生的接口来将DOM JSON转换DOM——毕竟我们还有大量的数据和绑定函数。

而这一点对于混合应用来说,就特别有帮助:

如果这个插件可以用在Cordova上,那么它将改善混合应用的性能。

数据绑定

当我们触发了generateFunc方法的时候:

我们调用下面的方法去初始化我们的DOM,并把数据传输进去:

函数绑定

MINA的函数绑定机制是由函数名来决定的,如:

对于其他类型的绑定则是:

PS:我突然就不想看这个if else经过minify以后的代码了,太恶心了。。。

如,我们的wxml:

<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>

我们的propKey是bindtap,我们的propValue是bindViewTap,随后我们就会根据当前的函数名去创建相应的事件。

原文发布于微信公众号 - phodal(phodal-weixin)

原文发表时间:2016-09-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全沾开发(huā)

使用JavaScript实现一个俄罗斯方块

使用JavaScript实现一个俄罗斯方块 清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍...

3736
来自专栏数说工作室

【SAS Says】基础篇:ODS的使用(下)

特别说明:本节【SAS Says】基础篇:SAS软件入门(下),用的是数说君学习《The little SAS book》时的中文笔记,我们认为这是打基础的最好...

2774
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

19410
来自专栏24K纯开源

QT中获取选中的radioButton的两种方法

QT中要获取radioButton组中被选中的那个按钮,可以采用两种如下两种办法进行: 方法一:采用对象名称进行获取 代码: 1 QRadioButt...

2375
来自专栏小狼的世界

YUI3 CSS框架学习

改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构...

1103
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

1002
来自专栏Android知识点总结

D5-Android绘图之让图形动起来

1002
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

8596
来自专栏码神联盟

碎片化 | 第四阶段-41-struts2字节流生成验证码-视频

如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056700jckx.html 验证码实现 需求: 在登录的页面,增...

2929
来自专栏deepcc

.clearfix:after的用法,清除浮动

2686

扫码关注云+社区

领取腾讯云代金券