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介绍请 参看这里。
评论前必须登录!
注册