JavaScript 模板引擎 Velocity.js_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介绍请 参看这里。

欢迎大家阅读《javaScript 模板引擎 Velocity.js_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)