[TOC] ## 前言 tmod作为前端页面模板引擎，除了本身支持模板引擎的基本语法之外，还支持模板文件目录，再我们开发项目实现模板复用，在减少开发量上有着无可替代的作用。 ## 与其他模板引擎的效率对比 tmod本身执行效率与art-Template基本等同，我们用市场上已有的模板引擎做下渲染对比。 * 通过github项目的在线速度测试，[测试地址](https://aui.github.io/art-template/example/web-test-speed/) * 已得到的性能对比视图  ## 原理实现 * 为什么这个引擎比其他模板引擎快也是我们需要获知的。可能的原因如下： 1、预编译 在上述模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。artTemplate 模板编译器会根据一些简单的规则提取好所有模板变量，声明在渲染函数头部。 ## 与art-Template的对比优点 * 编译模板为不依赖引擎的 js 文件 * 前端模板按文件与目录组织（推荐使用主要原因） * 模板之间支持引入外部模板 * 使用同步模板加载接口 * 可选多种规范的模块输出：AMD、CMD、CommonJS * 支持作为 GruntJS 的插件构建项目 * 模板目录可被前后端共享 * 支持检测修改即时编译 * 支持模板运行时调试 * 配置文件支持多人共享 ## 模块的建立使用 * 模块安装 * 模块使用与配置 ## 基本语法 * 子模板 * 继承模板 * 框架模板 ### 基本语法参考 * 循环 * 判断 * 属性值获取 * 是的 * [更多语法参考：tmod官方语法文档](https://github.com/aui/tmodjs/wiki/%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95) ## 模板的最终使用 ## 原artTemplate模板的迁移 * [页面模板迁移指南](https://github.com/aui/tmodjs/wiki/%E9%A1%B5%E9%9D%A2%E4%B8%AD%E7%9A%84%E6%A8%A1%E6%9D%BF%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97) * 注意事项 ## 参考文档 * 参考文档 //template页面模板使用教程，以下原则or建议不分先后，请仔细阅读，遵守编码规范 1 针对当前页面使用页面模板的，建议使用原始方法，直接script标签加id,然后使用 2 针对多个页面会使用到的页面代码，建议加载到tpl目录，独立文件放在与package.json同级目录，template("")语法时直接文件名称就可。 3 需要的文件目录结构符合要求，tpl目录下游package.json,同目录的html外层文件，.build 的产出js目录，以及其他自定义的页面文件夹以及页面， 比如public>copyright.html等，建议所有的文件以html为后缀名。 4 模板文件中需要的样式或者脚本，建议整合文件中引入或者通过reqiure中引入。 5 模板语法 参考：https://github.com/aui/artTemplate 6 计算机打开cmd命令行，npm install -g tmodjs 全局新建这个模块 7 cd 切换目录到tpl的上一届目录结构（使用教程） 8 tmod tpl 实时编译运行模板文件，保证cmd窗口打开的情况下，所有的tpl模板文件是实时更新的（使用教程） 9 页面引入 ，引入产出目录build结构的template.js，然后template("")对应的文件，得到html字符串，吧对应的div的html替换即可。（使用教程） 10 命名 ，嵌入模板的外层建议命名为m-开头的，而嵌入部分的外层div建议使用i-开头的，后面的2 3位单词保持一致对应。（使用教程） 11 如果改变了模板引入的目录结构或者相关语法，是需要重新编译执行命令行的。（使用教程）