dom.tpl
DOM模版通用翻译器,用于将DOM模版翻译成其他模版语言,接口类似Q.js。
模版简史
jQuery作者John Resig的著名文章JavaScript Micro-Templating,开启了前端模版引擎的序章。
之后,模版引擎走向了两个方向:
- 强大的自定义语法,代表有著名的handlebars
- 性能优先,追求极速体验,支持Javascript语法,代表有doT
但随着MVVM
和Web Component
的崛起,模版引擎又有了一些有趣的新成员:
- DOM Base Template
- Markup Template,代表有plates
为了解决什么需求?
DSLs
(Domain Specific Languages) ,例如<%=foo%>
和{{foo}}
的可移植性较差- 逻辑和模版真正分离,模版本身就是一个标准
HTML
片段 DOM
结构不依赖于数据,使得DOM
在没有数据时是可分析的
当然DOM Base Template
也有一些很难逾越的问题,比如性能,由于基于DOM树
的建立以及对DOM树
的遍历,所以对性能并不友好,这也正是Markup Template
出现的原因。
dom.tpl
实际上是一个DOM Base Template
翻译器,我们的思想是既然DOM Base Template
有性能问题,那么我们通过一次编译将其翻译成性能更好的模版,例如:
翻译成:
<%=it.message%>
例子可见Qtpl.js
。
使用
语法上和Q.js,在元素上通过自定义属性来映射指令。
directive
告知翻译器如何对节点进行操作,遵循Vuejs写法:
例如模版:
引擎会找到对应的text
指令来对该p元素进行操作,例如velocity.js
:
var domTpl = directives: // text指令是发现q-text后在其内插入${value} { value = ; var dom = htmlparser; DomUtils; } ;
再例如Qtpl.js
的例子:
var domTpl = // 所有value都会经过get方法预处理,例如message预处理后变成it.message { return 'it.' + value; } // 所有filter的组装方法 // filters是字符串数组,value是上面prefix的结果 { var args foo; if filterslength filters return value; } directives: // 最后到directive,输出结构 { var dom = htmlparser; DomUtils; } ;
默认方法
- get的默认为:
// 即直接返回值,不进行prefix { return value;}
- applyFilters默认为:
// 如果输入为filters = ['filter1 arg', 'filter2'], value = message,则输出为:filter2(filter1(message, 'arg')) { var args foo; if filterslength filters return value; }