如何实现一个基于DOM的模板引擎.pdf

《如何实现一个基于DOM的模板引擎.pdf》由会员分享，可在线阅读，更多相关《如何实现一个基于DOM的模板引擎.pdf（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、题图：Vincent Guth注：本文所有代码均可在本人的个人项目colon中找到，本文也同步到了知乎专栏可能你已经体会到了 w e所带来的便捷了，相信有一部分原因也是因为其基于DOM 的语法简洁的模板渲染引擎。这篇文章将会介绍如何实现一个基于DOM的模板引擎（就像Vue的模板引擎一样）。Preface开始之前，我们先来看一下最终的效果:coist compiled=Compilc(、h)Heg?,greeting 卜/工 、，greeting:Hello Wor/d11)；compiledview/=、工 Hcg?,Hello Wod/kt、Compile实现一个模板引擎实际上就是实现一个编

2、译器，就像这样:const compiled=Coipile(teiplate:St片 八g|Nod%data:Object);coipiled.view/=compiled template首先，让我们来看下Compile内部是如何实现的：/c。叫川e js/*template compiler*Stn.gNode template邺曰M Objectj data*/f 八d o八 Coipile&platej data)if(!(tkis icstanceof Compile)return new Covpile(teiplate,data);this,options=;this,data

3、=data;if(template istaiaceof Node)加s.opticms.teMplate=template;eke if(typeof template=KtH八g)this.optio 八 s.template=doyvify(teplate:else coole.errorCteplate,oialy accept DOM node or string template);)template=tkis.optioias.teplate)wHk(笈 岬/温，(八。de,next)=if(八ode.八odeTgpe=i)/compile CICMC八十 八。pi忆0CMe八t

4、Nodes.call(this,八。de);return Mxt();eke if(node.node叫pe=3)/compile text 八。pile.teKtNo4es.caH(this,node);next。；)；this.view=template;template=null;Copile.coipilc=;walk通 过 上 面 的 代 码，可 以 看 到C。叫川e的构造函数主要就是做了一件事-遍 历t e叫;/a t e,然 后 通 过 判 断 节 点 类 型 的 不 同 来 做 不 同 的 编 译 操 作，这里就不介绍 如 何 遍 历 出 呻/加 了，不 明 白 的 话 可 以

5、 直 接 看wa l k函 数 的 源 码，我们着重来看 下 如 何 编 译 这 些 不 同 类 型 的 节 点，以 编 译n o W e m o de T g p e =工的 元 素 节 点 为 例:/*compile element 八。de*仆曰3 Node node*/C o p“e.c o k v p e.e/e 3 0八如o de s =fimetiem(八o de)c o n s t biiadSyibol=、:、；let attributes=slice.call(Mde.attributes),attrNaie-1attrValue=、,directiveNave=、；att

6、ributes.iap(attribute=attv,Nawe=a t t n fe u t e.m e;attrValue=attnbute.value.tniO；if(attKName.i八dexOf(bi八dSgmbol)-O&attrValae/=)diuectiveNaise=att 卜 Nae.slice(bi八 dSgmbol.le 八gth);this.bi 八4DiKective(八。de,express，。八：attrValue,八 M C:di-ectiveNaM。,)；Mde.e,ioveA.ttribute(attrNaie);else(tkis.bMdAttHbiA

7、te(八ode,attribute);!)；)；噢 忘 记 说 了，这里我参考了 W e 的 指 令 语 法，就 是 在 带 有 冒 号：的 属 性 名 中(当然 这 里 也 可 以 是 任 何 其 他 你 所 喜 欢 的 符 号)，可 以 直 接 写 JavaS cript的 表 达 式，然 后 也 会 提 供 几 个 特 殊 的 指 令，例 如-.text,外。w 等 等 来 对 元 素 做 一 些 不 同 的 操 作。其 实 该 函 数 只 做 了 两 件 事:遍历该节点的所有属性，通过判断属性类型的不同来做不同的操作，判断的标准就是属性名是否是冒号：开头并且属性的值不为空；*绑定相应的

8、指令去更新属性。Directive其次，再看一下Directive内部是如何实现的：import directives from./directives1;import geMrate from/coiM.pile/geMrate1;export default fuMtioia Pirectiv e(o p t i=)Object.assigNthi，options);Object.assigM加s,directivestkis.iaame);this.beforeUpdate&tki.beforeUpdateO；tkis.update&this.updatge-Mratekis.expre

9、iothis.coipile.optio.data);)Directive做了三件事：*注 册 指 令(Object.assigtki,directivtki.Mve)；*计算指令表达式的实际值(gecemte(tkis.expressi。八X this.coMpile.optiocs.data)；把计算出来的实际值更新到D O M上面（加工叩儿（仇0）。在介绍指令之前，先看一下它的用法：CoMpile.pstotgpe.bi八dDi%ctive=fuMtioi(options 八cw Directived.options)compile:this)；)；Copile.prototype.bi

10、iadAttribute=fuMtioia(八。de,attribute if(!kasliaterpolatioia(attribute.value)|attnbute.value.triiO=)return fake;this.bi八 dDirective(nodCjvavz attribute,expression:pae.textCattnbute.value),attrNae:attribute.iaaiej!)；bi八dDirective对Directive做了一1个非常简单的封装，接受二个必填属性:node.：当前所编译的节点，在 Directive的 update方法中用来更新

11、当前节点;name：当前所绑定的指令名称，用来区分具体使用哪个指令更新器来更新视图；*expression：parse 之后的 JavaScript 的表达式。*updater在 Directive 内部我们通过 O bject.directivcsthis.inaie);来注册不同的指令，所以变量directives的值可能是这样的：/directivesexport default/directive、：skowshow:beforeUpdate,(),update(hoA/)tkis.nodestyle.display=show?Mock、:八。八 e、；b)/directive.ite

12、xt、text：(beforeUpdate()update(value)/.卜所以假设某个指令的名字是 ow的话，那 么 Object.assigths,directivesthis.iaaie);就等同于:Object.assigNthis,beforeUpdatc(),update(skow)tkis.MdstyIe.display=skow?block：、八。八c;!)；表示对于指令效。w,指令更新器会改变该元素 允 如 的4印 的 值，从而实现对应的功能。所以你会发现，整个编译器结构设计好后，如果我们要拓展功能的话,只需简单地编写指令的更新器即可，这里再以指令te x t举个例子：/d

13、irectivesexport default/directive、:show/show：.当/directive、:text、text：(update(valae)this.ode.textCoteit=value;),);有没有发现编写一个指令其实非常的简单，然后我们就可以这么使用我们的te x t指令了：covst compiled=CoipilcC greeting:Hello World,!)；coipiled.view/=sHey?,Hello WorWsgenerate讲到这里，其实还有一个非常重要的点没有提到，就是我们如何把d比 真实数据渲染到模板中，比如Hey?,(greet

14、ing 如何渲染成Hey?,HelloW*/d ,通过下面三个步骤即可计算出表达式的真实数据：*把 Hey?,(greeting 解析成 Heg?,1+greeting 这样的 JavaScript表达式；提取其中的依赖变量并取得所在data中的对应值;利用M W Function)来创建一个匿名函数来返回这个表达式；*最后通过调用这个匿名函数来返回最终计算出来的数据并通过指令的update方法更新到视图中。*parse text/refereiace：https：/gitkub.coi/vuejs/vue/blob/dev/src/coipiler/parser/text-pairserjs

15、:L,2.S-L42.costtagRE=(?：.卜八)力。八 prseftext)if(!tagRE.test(texty)return JSONstricgifg(text);co八st tokens=;let lastMdex=tagRE.lastliadex=O;let iindexj matched;while(,atclaed=tRE.exec(text)i 八 de 乂=Matched.讥 W ex;if(index 心dex)tokc八s.push(JSON.stMngiFg(te)d:.sHce(asi:M，ex,in4cx);tokens,pusla(iatchedl.tn

16、kv();last Index=index+yvatchedO.length)if(lastIndex (H i1+J +colon+1 isawesome.1extract dependency我们会通过下面这个函数来提取出一个表达式中可能存在的变量：coist dope八de八cgRE=/八j Aq*w*-zA-z_Jww*-zA-Z$_Jw*:|(w*a-zA-Z$_Jw*)/g;C0iast global=tnAe-fakeJuNiefinedS(A#JNaNJisNaN,tgpeoPjhdecodeURI decodeUR.lCopoMit1,eModeURC,CModeURlCoi

17、poMt,uMScape1,J;escape,eval,sFMiteL NuMberlStH八gJpadeFloatJpadeMtLfix八ction extsetDependoaes(exp%ss/0八)coiast dependencies=口；exppessi(m.wplacc(dcp。八de八cgRE,(match,depe八de八eg)=if(depeiadeicy/=unde fined&pe n&八 aes.i八 dexORdepe 八de 八eg)=-1&globals.i八 dexOF(depe 八 de 八 eg)=-AXdepe 八 de 八 cies.p%(de?e h

18、 de 八 eg);)!)；return depe八deiacies;通过正则表达式d卬WencgRE匹配出可能的变量依赖后，还要进行一些对比，比如是否是全局变量等等。效果如下：extsctDcpe八，。八cies(、tgpeof Stn 八g(八&c)=string&Hello +world+!，+heHosplit()Join()+,、)；/=name,wod,%eU。这正是我们需要的结果，亡g p c o F,String,split和 joi八并不是data中所依赖的变量，所以不需要被提取出来。generateexport fuMtioia geMrate（expressioi c o

19、 n s t d e p e八d e h c i e s =e x t r*比D e p c n W e h c i e s（e x?K e s s i。八）；let d e p e八d e八c i e s C o d e =；dope八de八cies.Map（depe八de八eg=dependenciesCode+:V r$W e?e八d e八e g =t M g e t（*W e p e八d e八c y ）；、）；r e t u r n n e w F 八c力。八 CW”（depeiadeMiesCodejretuna 久e x p r e s s i。八;、）；）我们提取变量的目的就是为

20、了在g e n e m t e函数中生成相应的变量赋值的字符串便于在generate函数中使用，例如：n e w FuictioiCdata、var 八 KAC=d a%八var world=dataA/or（d;var hello=data,kello,;r e t u r n typeof S t r i八g（八=string&Hello 1+world+k e o.s p t（）Jo i M ）、）；/will geMrated：fb(八ctio八 aonyous(data)vav name=data八a&ej;vav wod=dataworld1;var hello=data,hell

21、o,1;return tgpeof St%八g(八 3 e)=KWMg，&Hello，+world+heHo.sp【it().joiN)+)这 样 的 话，只 需 要 在 调 用 这 个 匿 名 函 数 的 时 候 传 入 对 应 的 d a ta 即可获得我们想要 的 结 果 了。现 在 回 过 头 来 看 之 前 的 Directive部 分 代 码 应 该 就 一 目 了 然 了：export default c/ss Directive coistructor(optioias=)/.tkis.beforeUpdate&tkis.bcfoeUpdate-O；tkis.update&tk

22、is.update(geMrate(tkis.expressioi(this.coipile.datdy);ge八este(协k.exp/essi。八)(tkMcoMp7e.daa)就是表达式经过 thi.copile.data 计算后我们 所 需 要 的 值。compile text node我 们 前 面 只 讲 了 如 何 编 译 八。扇.八。原Tgpe=i的 元 素 节 点，那么文字节点如何编译 呢，其 实 理 解 了 前 面 所 讲 的 内 容 话，文 字 节 点 的 编 译 就 简 单 得 不 能 再 简 单 了：*compile text 八。de*Node八ode杀/Cpile

23、.textNodes=functio八（八ode）if（八odc.tcxtCo八 七e八2.tri&0=）return false;this.bM&Directivc（nodCj八 3C：text，expression:parse.textode.toctCote,1）；通过绑定text指令，并传入解析后的JavaScript表达式，在Directive内部就会计算出表达式实际的值并调用te xt的update函数更新视图完成渲染。.each指 令到目前为止，该模板引擎只实现了比较基本的功能，而最常见且重要的列表渲染功能还没有实现，所以我们现在要实现一个侬沙指令来渲染一个列表，这里可能要注意一

24、下，不能按照前面两个指令的思路来实现，应该换一个角度来思考,列表渲染其实相当于一个 子模板，里面的变量存在于:each指令所接收的data这 个 局部作用域中，这么说可能抽象，直接上代码：/：eack updateiport Compile frokvx path/to/coipile.jsexport default（befoeUpdateO this.placeholde=docuet.ceateComeiat(:eacK);this.八ode.paKC八tNode.Hep(aceCkild(this.placeholdcY,this.八。de);bupdateQ if(data&(Arr

25、ay.is Ar ray(data)return;const fragment=documentsreatePocumentFra5meiatO；data.iapiteij inHex)=const compiled=Copilthis.Mde.cloMNodeuej rtem,index,);fyagMC 八 t.appe 八4CkilA(coMpile4view);!)；this.placcholder.paKe八tNoAe.匕cplaceChild(f夕agMe八t,tkis.placeholder);)；在叩d ate之前，我们先把3 c h所在节点从D O M结构中去掉，但是要注意的

26、是并不能直接去掉，而是要在去掉的位置插入一个comment类型的节点作为占位符，目的是为了在我们把列表数据渲染出来后，能找回原来的位置并把它插入到DOM 中。那具体如何编译这个所谓的 子模板呢，首先，我们需要遍历3 M指令所接收的A rm g类型的数据（目前只支持该类型，当然你也可以增加对。块此类型的支持，原理是一样的）；其次，我们针对该列表的每一项数据进行一次模板的编译并把渲染后的模板插入到创建的docum ent仇igFwe八 土 中，当所有整个列表编译完后再把刚刚创建的com m grt类型的占位符替换为docuwe,vt Fragment以完成列表的渲染。此时，我们可以这么使用3 M指

27、令：CokvpileC li xachcoiieits Hata-index=&index/tem.coHtent 、，comments:content：Hello WorW?L（content:Just Awesome.,content:SW（?W Just WOW!：凡）；会渲染成：Hello Wor/d./Aata i八dex=1Just Awesoie.lidata-i八dex=W O W,Just WOW!其实细心的话你会发现，模板中使用的ite和index变量其实就是,each更新函数 中Coiw.pit&（teplate.,data）编译器里的data值的两个keg值。所以要自定

28、义这两个变量也是非常简单的：/.each updateri import Compile froFw patk/to/coipile.jsexport default beforeUpdate()this.placeholder=docue 八t.crc 笈6?。3出 八 方(：0枇林)；this.八o4e.paKentNode.Hep(aceChi(d(this.p(aceho(dcK,thk.八。de);/parse aliastkis.itei.Nai.e=s/tems;this.icdexNaMC=、inclef;this.dataNaie=trs.expression;if(tkis

29、.exp%ssion.i(exOF(in)!=-1)const bracketRE=(?：.卜 八)+?)/g；const item,data=tkis.cxpwssi。八，八)；let matched=iull;if(iatcked=bracketRE.excc(itei)c。八优ivdex=Fvuitchcd 工J.sp/if);index?this 八d e x N c =:;this.itCMName=/tem.tnmQ;eke(this.itCMNaMe=/tern,tn m();)this.dataNaie=data.tniO；this.expessio 八=this.dataNa

30、e;bupdate()if(data&fArray.isArray(datd)return;cokist frg3 0八 十 =docuient.creatcDocuvetFrageiatO；data.iapiteij index)=const compiled=Coipiltkis.Mde.cloMNodtueY(tkis.itekvNaie：this.i八dexNaMe：i八4ex,)；(VagMC 八 t.appe 八 4Child(coMpilc4view);!)；this.placcholdw.paKcntNocU.EcpIaceChild(沁igmc八t,tkis.placehol

31、der);)）；这样一来我们就可以通过(aliasIteM,alialiadex)i i a ite3s来自定义：eack指令的rte m和/认Hex变 量/,原理就是在beforcUpdate的时候去解析：e“c k指令的表达式，提取相关的变量名，然后上面的例子就可以写成这样了：CoipileC c o mme i a t.、，comments：co八tc八t:、He。W/d.、,h(c。八te n t：Just Awesome?L(c。八te八t：、WOW,Just WOW!：以!)；Conclusion到这里，其实一个比较简单的模板引擎算是实现了，当然还有很多地方可以完善的，比如可以增加

32、:c/ass,style,肝或:s%等等你可以想到的指令功能，添加这些功能都是非常的简单的。全篇介绍下来，整个核心无非就是遍历整个模板的节点树，其次针对每一个节点的字符串值来解析成对应的表达式，然后通过new FctioO这个构造函数来计算成实际的值，最终通过指令的update函数来更新到视图上。如果还是不清楚这些指令如何编写的话，可以参考我这个项目colon的相关源码（部分代码可能会有不影响理解的细微差别，可忽略），有任何问题都可以在issue上提。目前有一个局限就是DOM-based的模板引擎只适用于浏览器端，目前笔者也正在实现兼容Node端的版本，思路是把字符串模板解析成A ST,然后把更新数据到A ST上，最后再把A ST转成字符串模板，实现出来后有空的话再来介绍一下Node端的实现。最后，如果上面有说得不对或者有更好的实现方式的话，欢迎指出讨论。