Velocity.js —— 来自淘宝的 JS 模板引擎

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

注意

velocityjs在npm中包名从原来的velocity.js改为velocityjs,感觉require("velocity.js") 比较不好看,所以改名,从0.3.0之后的版本都在velocityjs下更新。

查看最新版本

  1. $ npm info velocityjs version 

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

最新版下载地址:https://github.com/shepherdwind/velocity.js/zipball/master

Features

  • 支持客户端和服务器端使用

  • 语法是富逻辑的,构成门微型的语言

  • 语法分析和模板渲染分离

  • 基本完全支持velocity语法

  • 浏览器使用支持模板之间相互引用,依据kissy模块加载机制

  • 三个Helper,友好的数据模拟解决方案

  • Vim Syntax

Install

via npm:

 
  1. $ npm install velocityjs 

Broswer Support

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

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

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

 
  1. $ make parse  

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

 
  1. //api map  
  2. var utils = {  
  3.   forEach : S.each,  
  4.   some    : S.some,  
  5.   mixin   : S.mix,  
  6.   guid    : S.guid,  
  7.   isArray : S.isArray,  
  8.   indexOf : S.indexOf,  
  9.   keys    : S.keys,  
  10.   now     : S.now  
  11. };  

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

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

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

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

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

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

Public API

node_module

 
  1. var Velocity = require('../src/velocity');  
  2.  
  3. //1. 直接解析  
  4. Velocity.render('string of velocity', context);  
  5.  
  6. //2. 使用Parser和Compile  
  7. var Parser = Velocity.Parser;  
  8. var Compile = Velocity.Compile;  
  9.  
  10. var asts = Parser.parse('string of velocity');  
  11. (new Compile(asts)).render(context);  

context

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

On Broswer

1 . 使用线下打包方案:

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

2 . 使用线上编译:

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

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

Syntax

具体语法请访问官网文档:velocity user guide

Directives

Directives支持set, foreach, if|else|elseif, macro, parse, break。不 支持有,stop, evaluate, define,感觉这些语法比较偏,用处不大,暂时没有实现。 其中parse,在web端,使用kissy的模块加载器加载,需要首先线下编译打包,例子

macro

宏分为系统的宏,比如parse, include,和用户自定义宏,通过#macro在vm中定义,此 外可以使用自定义的js函数替代在vm中定义。对于系统宏和自定义宏,不做区分,对于 #parse#include的调用,可以使用自定义函数来执行。具体见issue #3

foreach

foreach在velocity中对对象的遍历,和js有区别,java中对象是一个map,需要通过方法 keyset来获取map中的key,foreach循环写法等同于js的for in循环,感觉有点怪异。在 一个foreach,有一个$foreach的对象可以使用,此变量作用域为当前循环范围。

  1. #foreach($num in [1..5])  
  2.   index => $foreach.index   
  3.   count => $foreach.count  
  4.   #if (!$foreach.hasNext) end #end  
  5. #end  
  6. 结果:  
  7. index => 0  
  8. count => 1  
  9.  
  10. index => 1  
  11. count => 2  
  12. ...  
  13. index => 4  
  14. count => 5  
  15. end  

string

velocity中字符串求值和php类似,双引号字符串里面的变量会被替换变量对应的值,单引 号原样返回,推荐尽量使用单引号,那样性能好一些。此外,双引号中变量替换,没有再次 调用语法分析器,而是使用正则,只支持简单的引用替换,比如"$varname1 $foo.bar""$foo.bar[1] $foo.bar()"都不支持。如果需要完整支持字符串双引号,需要反复调用语 法分析器,考虑到性能,基本引用基本够用了,vm本身支持强大的变量赋值,可以先赋值, 在放入字符串,或者使用加法进行字符串拼接。

在java中可能大量使用双引号方式,因为java对象无法自动转换类型,双引号做类型转换用, 而在web端,js无此需要。

velocity

  1. Usage: velocity [options] [file ...]  
  2.  
  3. Options:  
  4.  
  5.   -h, --help         output usage information  
  6.   -V, --version      output the version number  
  7.   -b, --build        build .vm file to js ast module of kissy  
  8.  
  9. Example:  
  10.  
  11.   # parse vm file  
  12.   $ velocity a.vm   
  13.  
  14.   # parse vm file with json data  
  15.   $ velocity a.vm  a.json  
  16.  
  17.   # build asts module of kissy  
  18.   $ velocity *.vm  

Helper

Helper提供一些额外的功能,主要用于解决vm数据模拟问题。

  • structure 获取vm中所有变量的结构: $foo.bar => foo: {bar: 'string'}
  • backstep vm逆推,根据velocity文件和解析后的结果,计算数据结构和内容
  • jsonify 把vm转换为json结构,去除其中的html标签,比如:

jsonify文档issue #11

  1. hello world $foo.name.  
  2. =>  
  3. {foo: { name: $foo.name }}  

License

(The MIT License)

Copyright (c) 2012-2013 Eward Songeward.song@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

来自:https://github.com/shepherdwind/velocity.js

 

责任编辑:林师授 来源: 51cto
相关推荐

2013-08-20 18:50:46

JS模板引擎模块化Web App

2021-02-01 08:36:19

JS引擎V8

2021-04-21 12:04:47

JS引擎流程

2016-08-02 10:22:10

JS微软Node

2021-02-27 10:52:08

JS移动端Hermes

2021-09-07 15:25:51

鸿蒙HarmonyOS应用

2021-01-11 13:46:26

Spring BootThymeleafJava

2011-07-15 14:01:50

PHP模板引擎

2015-08-04 10:25:12

velocity

2016-11-14 15:51:42

JavaScriptAngular.jsReact.js

2012-06-07 16:16:43

JavaScript

2020-06-02 14:00:53

Vue.js组件Web开发

2017-03-10 18:29:17

Androidfreemarker应用

2011-10-22 11:32:42

Node.js

2020-10-19 11:49:32

NodeJavaScript

2011-07-07 16:15:20

Smarty

2017-01-04 15:22:57

TrimPath模板引擎

2022-02-08 18:09:20

JS引擎解析器

2024-04-12 08:32:03

JSAI机器学习

2012-11-20 11:26:19

Velocity Ch
点赞
收藏

51CTO技术栈公众号