“React、Vue、Angular等均屬于MVVM模式，在一些只需完成數(shù)據(jù)和模板簡(jiǎn)單渲染的場(chǎng)合，顯得笨重且學(xué)習(xí)成本較高，而解決該問(wèn)題非常優(yōu)秀框架之一是doT.js，本文將對(duì)它進(jìn)行詳解。 ”
　　背景
　　前端渲染有很多框架，而且形式和內(nèi)容在不斷發(fā)生變化。這些演變的背后是設(shè)計(jì)模式的變化，而歸根到底是功能劃分邏輯的演變：MVC—》MVP—》MVVM（忽略最早混在一起的寫(xiě)法，那不稱(chēng)為模式）。近幾年興起的React、Vue、Angular等框架都屬于MVVM模式，能幫我們實(shí)現(xiàn)界面渲染、事件綁定、路由分發(fā)等復(fù)雜功能。但在一些只需完成數(shù)據(jù)和模板簡(jiǎn)單渲染的場(chǎng)合，它們就顯得笨重而且學(xué)習(xí)成本較高了。
　　例如，在美團(tuán)外賣(mài)的開(kāi)發(fā)實(shí)踐中，前端經(jīng)常從后端接口取得長(zhǎng)串的數(shù)據(jù)，這些數(shù)據(jù)擁有相同的樣式模板，前端需要將這些數(shù)據(jù)在同一個(gè)樣式模板上做重復(fù)渲染操作。
　　解決這個(gè)問(wèn)題的模板引擎有很多，doT.js（出自女程序員Laura Doktorova之手）是其中非常優(yōu)秀的一個(gè)。下表將doT.js與其他同類(lèi)引擎做了對(duì)比：
　　
　　可以看出，doT.js表現(xiàn)突出。而且，它的性能也很優(yōu)秀，本人在Mac Pro上的用Chrome瀏覽器（版本為：56.0.2924.87）上做100條數(shù)據(jù)10000次渲染性能測(cè)試，結(jié)果如下：
　　
　　從上可以看出doT.js更值得推薦，它的主要優(yōu)勢(shì)在于：
　　小巧精簡(jiǎn)，源代碼不超過(guò)兩百行，6KB的大小，壓縮版只有4KB；
　　支持表達(dá)式豐富，涵蓋幾乎所有應(yīng)用場(chǎng)景的表達(dá)式語(yǔ)句；
　　性能優(yōu)秀；
　　不依賴(lài)第三方庫(kù)。
　　本文主要對(duì)doT.js的源碼進(jìn)行分析，探究一下這類(lèi)模板引擎的實(shí)現(xiàn)原理。
　　如何使用
　　如果之前用過(guò)doT.js，可以跳過(guò)此小節(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è)計(jì)思路：將數(shù)據(jù)注入到預(yù)置的視圖模板中渲染，返回HTML代碼段，從而得到最終視圖。
　　下面是一些常用語(yǔ)法表達(dá)式對(duì)照表：
　　

普通下載普通下載

相關(guān)電子資料下載

• 躍昉動(dòng)態(tài)｜躍昉簽署亞洲城市減碳卡澳門(mén)合作框架協(xié)議 26
• 使用MVVM框架實(shí)現(xiàn)一個(gè)簡(jiǎn)單加法器 30
• 探討嵌入式系統(tǒng)的軟硬件框架 29
• 昇騰AI框架全棧深度介紹 317
• 隆基與德國(guó)重要合作伙伴PVI簽署1.5GW Hi-MO X6框架協(xié)議 208
• PyCharm 2022.2支持最新 Python 3.11 和 PyScript 框架 86
• 華工科技與振華重工簽署戰(zhàn)略合作框架協(xié)議 253
• 嵌入式狀態(tài)機(jī)編程-QP狀態(tài)機(jī)框架基本知識(shí)介紹 76
• 介紹一款基于昆侖芯AI加速卡的高效模型推理部署框架 142
• 基于觀察者模式設(shè)計(jì)的框架-REB，使代碼模塊化 68