[TOC] ## 前言 tmod作为前端页面模板引擎，除了本身支持模板引擎的基本语法之外，还支持模板文件目录，再我们开发项目实现模板复用，在减少开发量上有着无可替代的作用。 ## 性能 性能方面基本与artTemplate等同，不用过多担心。 ## 与art-Template的对比 * 编译模板为不依赖引擎的 js 文件 * 前端模板按文件与目录组织(推荐使用的主要原因) * 模板之间支持引入外部模板(推荐使用的主要原因) * 使用同步模板加载接口 * 可选多种规范的模块输出：AMD、CMD、CommonJS * 支持作为 GruntJS 的插件构建项目 * 模板目录可被前后端共享(推荐使用的主要原因) * 支持检测修改即时编译(推荐使用的主要原因) * 支持模板运行时调试(推荐使用的主要原因) * 配置文件支持多人共享(推荐使用的主要原因) ## 模块的建立使用 ### 安装 * 模块安装，请保证你的电脑已经安装了nodejs,另外额外建议使用cnpm安装模块，并将地址设置到淘宝镜像地址。 `npm install -g tmodjs` ### 模板语法：嵌入模板 * 模板包含表达式，子模板默认共享当前数据，也可以指定数据。 ~~~ {{include 'template_name'}} //子模板指定数据 {{include 'template_name' news_list}} {{include './public/applyResult-table'}} ~~~ * include路径规定： > 1. 路径不能带后缀名 > 2. 路径不能够进行字符串运算 > 3. 路径不能使用变量代替 > 4. 必须使用以.开头的相对路径 ### 基本语法参考 * 表达式，基本输出内容表达式 `{{content}}` `{{content.attr}}` * 条件表达式 ~~~ {{if admin}} <p>admin</p> {{else if code > 0}} <p>master</p> {{else}} <p>error!</p> {{/if}} ~~~ * 遍历表达式：无论是数组还是对象都可以用each语法遍历 ~~~ {{each list}} <li>{{$index}} - {{$value.user}}</li> {{/each}} ~~~ * [更多语法参考：tmod官方语法文档](https://github.com/aui/tmodjs/wiki/%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95) ### 模板编译 * 命令行编译基本格式 `tmod [模板目录] [配置参数]` * 配置参数，[配置参数](https://github.com/csnikey/tmodjs#配置参数)将会保存在模板目录配置文件中，下次运行无需输入配置参数（--no-watch 与 --debug 除外）。 * 示例：配置产出脚本js的目录：` tmod ./tpl --output ./build` * 模板目录配置文件，一般情况下配置会保存在配置文件中，其内容可能如下：一般情况下我们使用默认项就可以。 ~~~ { "name": "template", "version": "1.0.0", "dependencies": { "tmodjs": "1.0.4" }, "tmodjs-config": { "output": "./build", "charset": "utf-8", "syntax": "simple", "helpers": null, "escape": true, "compress": true, "type": "default", "runtime": "template.js", "combo": true, "minify": true, "cache": true, "verbose": true } } ~~~ * 参考配置项图文说明  * 产出文件 默认情况下，模板编译出一个tempalte.js的模板文件，你可以在具体页面中具体使用。 ### 模板使用 #### 一 并集的模板文件，此时需要引入template.js。 * 脚本方式,需要加载template.js ~~~ <script src="tpl/build/template.js"></script> var html = template('news/list', _list); document.getElementById('list').innerHTML = html; ~~~ * seajs方式,项目需要加载seajs文件，template.js不需要代码加载 ~~~ seajs.use('./tpl/build/template', function (template) { document.getElementById('doc').innerHTML = template('index', data); }); ~~~ * requirejs方式,项目需要加载requirejs文件，template.js不需要代码加载 ~~~ require(['./tpl/build/template'], function (template) { document.getElementById('doc').innerHTML = template('index', data); }); ~~~ * [ 参考官方写法实例](http://aui.github.io/tmodjs/test/index.html) #### 二 分模块的模板文件（现阶段不推荐使用） type指定amd / cmd / commonjs的会按照模块方式产出。此时每个模板就是一个单独的模块，无需引用 template.js： ~~~ var render = require('./tpl/build/news/list'); var html = render(_list); ~~~ ## 其他构建工具的支持 * grunt集成 `npm install grunt-tmod --save-dev`<br> 项目主页：[https://github.com/Jsonzhang/grunt-tmod](https://github.com/Jsonzhang/grunt-tmod) * gulp集成 npm install gulp-tmod --save-dev 项目主页：[https://github.com/lichunqiang/gulp-tmod](https://github.com/lichunqiang/gulp-tmod) ## 原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) * 注意事项： 1.待补充完善.... ## Q&A * TmodJS 需要部署到服务器中吗？ 不需要，只要本地实现即可，基于nodejs是为了跨平台。 * 如何将每个模板都编译成单独的 amd/cmd 模块输出？ 指定 type 参数即可，如--type cmd则可以让每个模板都支持 RequireJS/SeaJS 调用。一般我们不用这种方式。 * 如何将模板编译成 NodeJS 的模块？ 指定 type 参数即可，如--type commonjs。 * 如何修改默认的输出目录？ 指定 output 参数即可，如--output ../../build。 * 我需要手动合并模板，如何让 tmodjs 不合并输出？ 编辑配置文件，设置combo:false。 * 原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) ## 参考项目 * gitlab上tmod的demo项目参考： * github上tmod的demo项目参考： ## 参考文档 * [tmod-github参考文档](https://github.com/csnikey/tmodjs)