龙都娱乐»JavaScript»JavaScript 模板引擎 Velocity.js

JavaScript 模板引擎 Velocity.js

来源:csdn 发布时间:2014-05-02 阅读次数:
  Velocity.js是Velocity模板语法的Javascript实现。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含基本数据类型、变量赋值和函数等功能。Velocity语法具有很高的容错能力,类似于html结构的解析,同时语法规则复杂。velocity.js兼容ie6+,chrome等其他浏览器。   开源协议:The MIT License   代码托管地址https://github.com/shepherdwind/velocity.js

  功能特性

  1. 支持客户端和服务器端使用
  2. 语法是富逻辑的,构成门微型的语言
  3. 语法分析和模板渲染分离
  4. 基本完全支持velocity语法
  5. 浏览器使用支持模板之间相互引用,依据js模块加载机制,比如kissy
  6. 三个Helper,友好的数据模拟解决方案
  7. 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介绍请 参看这里
QQ群:WEB龙都娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共1条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共1条评论
登录会员中心
龙都娱乐