Vdt：一个基于虚拟DOM的模板引擎

npm version
Build Status
GitHub stars

功能特性

  • 基于虚拟DOM，更新速度快
  • 支持模板继承，包含，宏定义等功能
  • 文件大小在gzip压缩后大概13KB（包含浏览器实时编译模块）
  • 支持前后端渲染

示例

    1.   <div>
    2.       <h1>{title}</h1>
    3.       <div ev-click={onClick.bind(self)}>Clicked: {count}</div>
    4.       <ul v-for={items}>
    5.           <li>{key}: {value}</li>
    6.       </ul>
    7.   </div>
    1.   var vdt = Vdt(template);
    2.   vdt.render({
    3.       title: 'vdt',
    4.       items: {
    5.           a: 1,
    6.           b: 2
    7.       },
    8.       count: 0,
    10.       onClick: function() {
    11.           this.count++;
    12.           vdt.update();
    13.       }
    14.   });

安装

通过script标签引入

Vdt会暴露全局变量Vdt，请到github下载对应的文件，
或者通过npm安装，然后script标签引入

  1. npm install vdt --save
  1. <script type="text/javascript" src="node_modules/vdt/dist/vdt.min.js"></script>

与webpack或browserify结合使用

使用npm方式安装依赖

  1. npm install vdt --save
  1. var Vdt = require('vdt');

与requireJs等模块加载器结合使用

Vdt打包的文件支持通过UMD方式加载

  1. define(['path/to/vdt'], function(Vdt) { });

使用

浏览器

  1. var vdt = Vdt('<div>{name}</div>');
  3. // 渲染 
  4. vdt.render({name: 'Vdt'});
  6. // 更新 
  7. vdt.update({name: 'Javascript'});
  8. // 或者，这样修改数据后调用更新
  9. // vdt.data指向传递给vdt.render函数的数据
  10. vdt.data.name = 'Javascript'
  11. vdt.update();

webpack

当项目使用webpack构建时，可以使用vdt-loader将模板提取成单独文件。webpack配置如下：

  1. npm install vdt-loader --save-dev
  1. module.exports = {
  2.     ...
  3.     module: {
  4.         rules: [
  5.             {
  6.                 test: /\.vdt$/,
  7.                 use: [
  8.                     {
  9.                         loader: 'vdt-loader',
  10.                     }
  11.                 ]
  12.             }
  13.         ]
  14.     }
  15. }

如果你想在模板中使用es6语法，还可以加上babel-loader

  1. npm install babel-loader --save-dev
  1. rules: [
  2.     {
  3.         test: /\.vdt$/,
  4.         use: [
  5.             {
  6.                 loader: 'babel-loader',
  7.             },
  8.             {
  9.                 loader: 'vdt-loader',
  10.             }
  11.         ]
  12.     }
  13. ]

NodeJs

  • 作为Express的middleware，用于实时编译Vdt模板，返回js代码

    当Vdt和RequireJs等前端模块加载器结合使用，通常需要NodeJs实时编译Vdt模板，然后当做AMD模块返回

    Vdt提供的middlewareVdt.middleware会根据当前请求的js文件路径查找相应目录下是否存在.js文件，如果存在则不处理；
    不存在时会判断该目录下是否存在.vdt文件，如果存在则编译后当做js返回

    1.   var Vdt = require('vdt');
    2.   app.use(Vdt.middleware({
    3.       // Vdt模板路径，默认：process.cwd()
    4.       src: 'vdt/template/path', 
    5.       // 是否包成AMD模块，默认：是
    6.       amd: true, 
    7.       // 是否每次都强制编译，否则只有模板文件变更才编译，默认：否
    8.       force: false, 
    9.       // 模板语法分隔符，默认：一对大括号{} 
    10.       delimiters: ['{', '}'], 
    11.       // 自定义文本过滤器，可以对编译结果进行相应处理
    12.       filterSource: function(source) {
    13.           return source
    14.       }
    15.   }));

  • 作为NodeJs的模板引擎

    直接渲染字符串

    1.   Vdt('<div>{title}</div>').renderString({title: 'Vdt'});
    3.   // <div>Vdt</div>

    在server中，一般都是渲染文件，可以使用如下方式渲染。首先通过Vdt.setDefaults()方法
    设置你的模板路径views(默认：views)，以及模板文件扩展名extname(默认：vdt)

    1.   Vdt.setDefaults({views: 'views', extname: 'vdt'});
    2.   Vdt.renderFile('index', {title: 'Vdt'});
    4.   // <!DOCTYPE html>
    5.   // <div>Vdt</div>

    renderFile方法会自动在添加doctype申明，所以你的模板文件中不需要写该申明，否则编译报错。
    如果你想去掉该申明，可以如下设置：

    1.   Vdt.setDefaults({doctype: ''});

  • 与Express结合

    Vdt提供__express方法使之可以很方便地作为Express的模板引擎使用

    1.   var Express = require('express'),
    2.       Vdt = require('vdt');
    4.   var app = Express();
    5.   app.engine('vdt', Vdt.__express);
    6.   app.set('views', 'views');
    7.   app.set('view engine', 'vdt');
    9.   app.get('/', function(req, res, next) {
    10.       res.render('index', {title: 'Vdt'});
    11.   });

来源(书栈小编注)

https://github.com/Javey/javey.github.io