Crox跨语言模板引擎-技术圈

Crox 是一个由 JavaScript 语言实现的高性能跨语言模板引擎。Crox 模板可以直接在JavaScript环境中使用，也可以翻译成 PHP、 JSP 等其他编程语言的可执行方法或翻译成 Velocity、Smarty 等其他模板引擎的源模板，Crox 通过独有的“模板逻辑直译”技术保证翻译后的结果在各种环境下都具备最佳执行效率。

说明

遍历数组用 each，遍历对象用 forin
=== !== == != 目前都允许，翻译成 js 时保持不变
build 目录下，是用 build.wsf（windows 下双击运行，需要 java、google closure compiler）生成的。
- crox.js 是 web（js）版的
- crox-all.js 还包含到 php、vm 的翻译
- crox2.js 是移动 web 版（比 crox.js 更轻量一点，不过差不多）
- xxx-min.js 是相应的压缩版

认识 Crox

为什么“又”做一个模板引擎

全端时代的展现端多样化迫使后端服务纯数据化改造进程加快，而在前端领域依靠前端构造展现的WebAPP架构与后台输出展现的传统架构将长期共存。在此背景下一个能够在多种架构环境中广泛适用的跨语言模板引擎将带给我们:

不同Web架构间从数据到HTML的构建过程的统一，这样：
- 不同架构间的前端组件和区块可以共享复用
- 前端工程师改开发Demo为开发模板，降低“套页面”引入的质量风险
促成新型的同时支持前后端渲染的前端架构，可以：
- 解决单页应用站点内容无法被搜索引擎抓取的问题
- 让移动端在省电模式（高网速后台渲染）和省流量模式（低网速前台渲染）中灵活切换成为可能
基于语法、词法分析的模板引擎将有助于区块内基于数据变化进行局部刷新的技术实现

高性能是跨语言模板引擎能够广泛应用的前提

“高性能”是跨语言全端模板引擎的核心技术指标。因为无论在动辄数千QPS的后端环境下，还是在展现伴随着内存和电力消耗的移动端，模板引擎的性能要求都比在PC端分布式运行的环境里高出太多。那么如何做到高性能呢？

通过逻辑“直译”保障高效
通过明确的API定义保障逻辑"直译"可行

因此，我们提出了Crox。

Crox是如何做到 高性能 和 跨语言 的呢？请先看看 Crox的概要设计文档吧

Crox模板语法

表达式输出

{{root.name}} // 输出 data.name

if选择语句

{{#if root.length > 0}} 有 {{else}} 没了 {{/if}}

循环语句

{{#each root val key}} {{key}} => {{val}} {{/each}}
{{#forin root val key}} {{key}} => {{val}} {{/forin}}

set赋值语句

{{set a = data.lilei.mother.phone.brand}} 然后可以 {{a.prop}}

include子模板导入

{{include "path/to/file.tpl"}} // 导入file.tpl

raw保留原始内容

{{#raw}}<script>console.log('{{#if}}{{/if}}')</script>{{/raw}} Crox翻译输出 <script>console.log('{{#if}}{{/if}}')</script>

Crox模板语法已被 Kissy XTemplate 模板（有限）兼容

更多Crox模板语法说明，请点击这里

如果对Crox的 编译原理 部分感兴趣，欢迎翻阅 Crox语言规范