Crox JS API
Crox的所有接口都声明在 Crox
这个JS对象上的。目前,具体的接口如下。
Crox.parse
Array Crox.parse(String tmpl)
解析Crox模板生成语法树 AST
参数
- tmpl:Crox模板字符串
返回值
AST
数组对象
示例
var tmpl = "{{root.a}} - {{root.b}}"
console.log(Crox.parse(tmpl)); // JS Array
AST的结构为:
[
"prog",
[
["eval", [".", ["id", "root"], "a"], true],
["text"," - "],
["eval", [".", ["id", "root"], "b"], true]
]
]
Crox模板解析后的抽象语法树(AST)结构相关的详细说明,请点击 这里
Crox.render
String Crox.render(String tmpl, data)
将数据填充到Crox模板中,并生成渲染后的结果
参数
-
tmpl:Crox模板字符串
-
data:用于渲染的JSON数据
返回值
- 用data渲染tmpl后的字符串
示例
var data = {
a: 1,
b: 2
};
var tmpl = "{{root.a}} - {{root.b}}"
console.log(Crox.render(tmpl, data)); // 1 - 2
Crox.compile
Function Crox.compile(String tmpl, Object options)
将Crox模板编译成 原生JS Function
参数
-
tmpl:Crox模板字符串
-
options:翻译时的额外参数,目前有
htmlEncode
(html特殊字符转义的方法名),debug: true
(运行时错误定位到crox的具体位置)
返回值
- 原生JS方法对象,传入data即可渲染出数据对应的文本内容
示例
var data = {
a: 1,
b: 2
};
var tmpl = "{{root.a}} - {{root.b}}"
var fn = Crox.compile(tmpl);
console.log(fn) // [Function]
console.log(fn(data)); // 1 - 2
Crox.compileToPhp
String Crox.compileToPhp(String tmpl)
将Crox模板编译成 PHP模板内容
参数
- tmpl:Crox模板字符串
返回值
- 翻译以后的php函数字符串
示例
var tmpl = "{{root.a}} - {{root.b}}"
console.log(Crox.compileToPhp(tmpl)); // php Function String
目前翻译成php的结果为:
<?php echo crox_encode($crox_root->a);?> - <?php echo crox_encode($crox_root->b);?>
其中包含一些辅助方法,后续将会改进。
Crox.compileToVM
String Crox.compileToVM(String tmpl)
将Crox模板翻译成 Velocity模板
参数
- tmpl:Crox模板字符串
返回值
- 翻译成的Velocity模板字符串
示例
var tmpl = "{{root.a}} - {{root.b}}"
console.log(Crox.compileToVM(tmpl)); // Velocity模板
Velocity模板内容如下:
#set($t = $_root.a)$!{t} - #set($t = $_root.b)$!{t}