JavaScript 模板引擎:Velocity.js

jopen 7年前

velocity.js是velocity模板语法的javascript实现。Velocity 是基于Java的模板引擎,广泛应用在阿里集体各个子公司。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含基本数据类型、变量赋值和函数等功能。

Features

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

Install

via npm:

$ npm install velocity.js

Broswer Support

点击此处可以体验web 端velocity语法解析过程,注:使用ACE作为代码编辑器,仅支持高级浏览器访问。

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

$ cake --build

需要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.jsparse.js,两者相互独立,parse.js语法分析过程可以放在本地完成,执行命令:

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

项目主页:http://www.open-open.com/lib/view/home/1398818988250