前端渲染引擎的優(yōu)勢分析

“React、Vue、Angular等均屬于MVVM模式，在一些只需完成數(shù)據(jù)和模板簡單渲染的場合，顯得笨重且學(xué)習(xí)成本較高，而解決該問題非常優(yōu)秀框架之一是doT.js，本文將對它進行詳解。 ”
　　背景
　　前端渲染有很多框架，而且形式和內(nèi)容在不斷發(fā)生變化。這些演變的背后是設(shè)計模式的變化，而歸根到底是功能劃分邏輯的演變：MVC—》MVP—》MVVM（忽略最早混在一起的寫法，那不稱為模式）。近幾年興起的React、Vue、Angular等框架都屬于MVVM模式，能幫我們實現(xiàn)界面渲染、事件綁定、路由分發(fā)等復(fù)雜功能。但在一些只需完成數(shù)據(jù)和模板簡單渲染的場合，它們就顯得笨重而且學(xué)習(xí)成本較高了。
　　例如，在美團外賣的開發(fā)實踐中，前端經(jīng)常從后端接口取得長串的數(shù)據(jù)，這些數(shù)據(jù)擁有相同的樣式模板，前端需要將這些數(shù)據(jù)在同一個樣式模板上做重復(fù)渲染操作。
　　解決這個問題的模板引擎有很多，doT.js（出自女程序員Laura Doktorova之手）是其中非常優(yōu)秀的一個。下表將doT.js與其他同類引擎做了對比：
　　
　　可以看出，doT.js表現(xiàn)突出。而且，它的性能也很優(yōu)秀，本人在Mac Pro上的用Chrome瀏覽器（版本為：56.0.2924.87）上做100條數(shù)據(jù)10000次渲染性能測試，結(jié)果如下：
　　
　　從上可以看出doT.js更值得推薦，它的主要優(yōu)勢在于：
　　小巧精簡，源代碼不超過兩百行，6KB的大小，壓縮版只有4KB；
　　支持表達式豐富，涵蓋幾乎所有應(yīng)用場景的表達式語句；
　　性能優(yōu)秀；
　　不依賴第三方庫。
　　本文主要對doT.js的源碼進行分析，探究一下這類模板引擎的實現(xiàn)原理。
　　如何使用
　　如果之前用過doT.js，可以跳過此小節(jié)，doT.js使用示例如下：
　　《 type=“text/html” id=“tpl”》 《div》 《a》name：{{= it.name}}《/a》 《p》age：{{= it.age}}《/p》 《p》hello：{{= it.sayHello（） }}《/p》 《select》 {{~ it.arr:item}} 《option {{？item.id == it.stringParams2}}selected{{？}} value=“{{=item.id}}”》 {{=item.text}} 《/option》 {{~}} 《/select》 《/div》《/》《》 $（“#app”）.html（doT.template（$（“#tpl”）.html（））（{ name：‘stringParams1’， stringParams1：‘stringParams1_value’， stringParams2:1， arr：［{id:0，text：‘val1’}，{id:1，text：‘val2’}］， sayHello:function （） { return this［this.name］ } }））;《/》
　　可以看出doT.js的設(shè)計思路：將數(shù)據(jù)注入到預(yù)置的視圖模板中渲染，返回HTML代碼段，從而得到最終視圖。
　　下面是一些常用語法表達式對照表：