Vdt.js 前端虚拟DOM模板引擎开源项目

我要开发同款
匿名用户2015年12月17日
63阅读
所属分类JavaScript、Web应用开发、浏览器/JS引擎
授权协议MIT

作品详情

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();    }});
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论