在之前的幾篇文章里，我們討論了MINA的一些原理。晚上在想著怎么結(jié)合Vux + Virtual Dom實(shí)現(xiàn)一個(gè)名為WINV框架的時(shí)候，在探索WCC功能才發(fā)現(xiàn)：自己又忽略掉了一個(gè)很重要的性能優(yōu)化細(xì)節(jié)。這個(gè)WCC如果內(nèi)置在瀏覽器里，就是可以實(shí)時(shí)的將DOM轉(zhuǎn)換為以JSON表示的DOM。

先將DOM轉(zhuǎn)換為Virtual Dom，再轉(zhuǎn)換回去的優(yōu)點(diǎn)是可以分離數(shù)據(jù)和樣式。這也就是為什么React的學(xué)習(xí)成本高的原因之一了。

**Virtual Dom的表現(xiàn)形式
**
為了將真實(shí)的DOM轉(zhuǎn)換為Virtual DOM，我們需要將DOM以一定的形式保存下來，如MINA的：

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

這里寫圖片描述

又或者是React中的：

這里寫圖片描述

當(dāng)然我們也可以自己實(shí)現(xiàn)一個(gè)比較簡單的DOM轉(zhuǎn)為Virtual DOM，如將

這里寫圖片描述

轉(zhuǎn)換為接近原生的：

這里寫圖片描述

**原生的Parser
**

我會假裝你已經(jīng)知道了瀏覽器相關(guān)的很多細(xì)節(jié)，我也假裝我已經(jīng)對這些細(xì)節(jié)很清晰。下圖一份Webkit瀏覽器的早期架構(gòu)圖：

如果我們使用JS實(shí)現(xiàn)一個(gè)將WXML將換為DOM JSON，我們就需要間接通過JavaScript Engine（即JSCore ）來轉(zhuǎn)換這個(gè)JSON文件。當(dāng)有大量的DOM的時(shí)候，這就不是一件輕松的事了。所以，在WCC的生成代碼里對DOM的數(shù)量限制為16000
。

我們可以用原生的接口來將WX DOM轉(zhuǎn)換為JSON，但是我們沒有辦法用原生的接口來將DOM JSON轉(zhuǎn)換DOM——畢竟我們還有大量的數(shù)據(jù)和綁定函數(shù)。

而這一點(diǎn)對于混合應(yīng)用來說，就特別有幫助：

如果這個(gè)插件可以用在Cordova****上，那么它將改善混合應(yīng)用的性能。

**數(shù)據(jù)綁定
**
當(dāng)我們觸發(fā)了generateFunc方法的時(shí)候：

這里寫圖片描述

我們調(diào)用下面的方法去初始化我們的DOM，并把數(shù)據(jù)傳輸進(jìn)去：

這里寫圖片描述

函數(shù)綁定

MINA的函數(shù)綁定機(jī)制是由函數(shù)名來決定的，如：

這里寫圖片描述

對于其他類型的綁定則是：

這里寫圖片描述

PS：我突然就不想看這個(gè)if else經(jīng)過minify以后的代碼了，太惡心了。。。

如，我們的wxml：

<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
我們的propKey是bindtap，我們的propValue是bindViewTap，隨后我們就會根據(jù)當(dāng)前的函數(shù)名去創(chuàng)建相應(yīng)的事件。

Hello小程序將與您共同成長。微信號：130870319 QQ群：40726600