atc-前端模板预编译器

artTemplate

新一代 javascript 模板引擎

artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍

前端技术之痛与爱

随着 HTML5 时代到来，前端技术在不断的发展壮大，我们为此欣喜若狂。但作为一名前端开发者，我们也不无时无刻的感受到很多看似平常的技术因为浏览器制约难以在前端中实现，其中之一便是模板技术。

虽然我们已经有了很多优秀的前端模板引擎可以选择，但前端模板技术与服务器模板技术却完全不是一个层面的东西，受浏览器限制，前端模板按文件与目录组织、include 这些基本的特性几乎无法实现。例如：

而前端模板最佳实践是把所有模板使用 <script type="text/html" .. 标签写在页面里面。示例

随着应用越来越复杂、模板越来越多、模板各种依赖出现的时候，我们的页面会变得臃肿不堪、难以维护， 以至于我们不得不拿出各种技巧进行所谓优化，如抽离到js中、按需加载等。回过头再来看这些最佳实践，殊不知我们不经意之间为了解决一个问题引发了更多的 问题，如跨域部署、依赖管理、压缩、按需加载、请求合并等。

如何才是最佳的前端模板组织方案呢？

atc-模板预编译器

atc 即 artTemplate compiler，基于 artTemplate 实现的前端模板预编译器，使用它可以让前端模版不再受浏览器的限制，支持如后端模版一样按文件放置、include 语句等特性：模板使用者无需关心模板内部的依赖，子模板会自动提前载入。

编译后的模板不再依赖模板引擎，模板可以通过 SeaJS 或 RequireJS 等加载器进行异步加载，亦能利用它们成熟的打包合并工具进行上线前的优化，如合并与压缩。

注：artTemplate 也是 CDC 对外开源的前端模板引擎。它可以在浏览器、基于NodeJS的服务端、Windows脚本宿主中运行，相关介绍： http://cdc.tencent.com/?p=5723

atc-原理

atc 通过静态分析前端模板语法，把模板编译成对应的 js 文件，并包装成 cmd 异步模块。它生成的代码严谨且易于阅读，一个带include语句的模板编译原理：

模板使用者只需要利用脚本加载器 SeaJS 或者 RequireJS 指定路径即可加载，它们会自动处理模板中的包含关系，如使用 SeaJS 加载模板方式：

在线查看编译好的示例

预编译模板的优势

1. 利于维护：基于文件进行管理，大量模板可以有序组织
2. 模板复用：模板自身支持include语句引入外部模板文件，自动提前加载
3. 调试友好：编译后的模板无evel与new Function，错误可以被浏览器捕获；亦可映射模板文件到本地进行开发
4. 按需加载：各取所需，最大化节省网络流量
5. 按需合并：可通过打包工具按需合并模板，以减少HTTP请求数
6. 跨域部署：模板不再受限页面以及页面所处的域，可部署至CDN

项目主页

http://cdc-im.github.io/atc/

结合v2平台接口整合的demo