vdt.js是一个在浏览器中使用的前端模板引擎,基于virtual-dom库开发,采用虚拟dom的思想实现模板的渲染与更新。
相对于传统前端模板引擎而言,优势在于:模板更新便捷而高效。因为利用virtualdom技术,vdt模板渲染的结果并非传统的html字符串,而是dom,所以更新操作不会导致整个模板重绘。
目前该工具已在金山云项目中大量应用
更多信息,请参考:https://javey.github.io/vdt.html,期待大家关于文档和代码的pullrequest。
功能特性基于virtual-dom,DOM更新速度快
能实现前后端模板继承,包含,宏定义等
文件大小在gzip压缩后大概13KB(包含浏览器实时编译模块)
支持前后端渲染
安装通过script标签引入Vdt会暴露全局变量Vdt,请到github下载对应的文件,或者通过npm安装,然后script标签引入
npm install vdt --save<script type="text/javascript" src="node_modules/vdt/dist/vdt.js"></script>与webpack或browserify结合使用使用npm方式安装依赖
npm install vdt --savevar Vdt = require('vdt');与requireJs等模块加载器结合使用Vdt打包的文件支持通过UMD方式加载
define(['path/to/vdt'], function(Vdt) { });示例<div> <h1>{title}</h1> <div ev-click={onClick.bind(self)}>Clicked: {count}</div> <ul v-for={items}> <li>{key}: {value}</li> </ul></div>var vdt = Vdt(template);vdt.render({ title: 'vdt', items: { a: 1, b: 2 }, count: 0, onClick: function() { this.count++; vdt.update(); }});
评论