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}