前端虚拟DOM模板引擎：Vdt.js
jopen
9年前
vdt.js 是一个在浏览器中使用的前端模板引擎，基于virtual-dom库开发，采用虚拟dom的思想实现模板的渲染与更新。
相对于传统前端模板引擎而言，优势在于：模板更新便捷而高效。因为利用virtual dom技术，vdt模板渲染的结果并非传统的html字符串，而是dom，所以更新操作不会导致整个模板重绘。
目前该工具已在金山云项目中大量应用
更多信息，请参考：http://javey.github.io/vdt.html，期待大家关于文档和代码的pull request。
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Vdt</title> <script type="text/javasciprt" src="dist/vdt.js"></script> </head> <body> <div id="example_container"></div> <script type="text/vdt" id="example_template"> <div> <p>Hello {name}</p> <p>Now: {time}</p> </div> </script> <script type="text/javascript"> var template = document.getElementById("example_template").innerHTML, vdt = Vdt(template), dom = vdt.render({name: "Vdt", time: new Date().toLocaleTimeString()}); document.getElementById("example_container").appendChild(dom); setInterval(function() { vdt.data.time = new Date().toLocaleTimeString(); vdt.update(); }, 1000); </script> </body> </html>