在之前的几篇文章里，我们讨论了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，随后我们就会根据当前的函数名去创建相应的事件。
Hello小程序将与您共同成长。微信号：130870319 QQ群：40726600
网友评论