[js]JavaScript模板引擎Velocity.js

  Velocity.js是Velocity模板语法的Javascript实现。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含基本数据类型、变量赋值和函数等功能。Velocity语法具有很高的容错能力,类似于html结构的解析,同时语法规则复杂。velocity.js兼容ie6+,chrome等其他浏览器。

  开源协议:The MIT License

  代码托管地址:https://github.com/shepherdwind/velocity.js

  功能特性

  • 支持客户端和服务器端使用
  • 语法是富逻辑的,构成门微型的语言
  • 语法分析和模板渲染分离
  • 基本完全支持velocity语法
  • 浏览器使用支持模板之间相互引用,依据js模块加载机制,比如kissy
  • 三个Helper,友好的数据模拟解决方案
  • Vim Syntax

  Velocity.js使用介绍

  安装

  via npm:

$ npm install velocity.js

  查看最新版本

$ npm info velocityjs version

  浏览器支持

  兼容ie6+,chrome等其他浏览器

  执行cake命令进行打包velocity.js浏览器端脚本:

$ make parse

  需要cli下安装coffeejs,暂时打包是为kissy所使用的,velocity.js需要的一些常用的 ecma5功能,比如foreach, some, isArray等,在node环境下是自带的功能,而web端的兼 容是交给已有的类库解决。需要自行提供一组跨浏览器的api,比如kissy打包:

//api map var utils = { forEach : S.each, some : S.some, mixin : S.mix,
    guid : S.guid, isArray : S.isArray, indexOf : S.indexOf, keys : S.keys,
    now : S.now };

  Velocity语法具有很高的容错能力,类似于html结构的解析,同时语法规则复杂,所以语法 解释器执行性能可能比较慢,Velocity.js把语法结构分析运算和语法执行两个过程独立出来, 第一步,语法结构分析返回一个数组(语法树),描述velocity语法,语法执行使用数据和语 法树,计算模板最终结果。

  执行build后,得到两个文件,分别是build/velocity/下的index.js和parse.js,两者 相互独立,parse.js语法分析过程可以放在本地完成,执行命令:

  把语法分析和模板拼接分开,为了方便在本地编译语法树,减少在web端js运算。本地编译 模板的思路,源自KISSY的 xtemplate。

  虽然语法解释器可以在浏览器端执行,但是,不推荐那么使用。

#使用velocity命令行工具打包
veloctiy --build *.vm
veloctiy -b *.vm

  源码test/web/中目录的js,一部分就是线下编译后的得到的,此处可 直接访问。

  公共API:

  node_module

var Velocity = require('../src/velocity');

//1. 直接解析
Velocity.render('string of velocity', context);

//2. 使用Parser和Compile
var Parser = Velocity.Parser;
var Compile = Velocity.Compile;

var asts = Parser.parse('string of velocity');
(new Compile(asts)).render(context);

  context 

  context是一个对象,可以为空,执行中$foo.bar,访问路径是context.foo.bar, context的属性可以是函数,和vm中定义保持一致。

  On Broswer

  1 . 使用线下打包方案:

KISSY.use('velocity/index, web/directives', function(S, Velocity, asts){
  var compile = new Velocity(asts);
  S.all('body').html(compile.render());
});

  2 . 使用线上编译:

KISSY.use('velocity/index, velocity/parse', function(S, Velocity, Parser){
  var html = (S.all('#tpl').html());
  var asts = Parser.parse(html);
  var compile = new Velocity(asts);
  console.log(compile.render());
});

  两者的区别在于asts的获取,第一种方式,直接取asts,第二种,需要首先执行语法分析过程。

  更多velocity.js介绍请 参看这里。

分享到:更多 ()

抢沙发

评论前必须登录!