TmodJS笔记

TmodJS 介绍

TmodJS（原名 atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板，从而让前端模板实现工程化管理，支持引入子模板，最终保证前端模板在复杂单页 web 应用下的可维护性。

• 预编译工具

使用它可以让前端模版不再受浏览器的限制，支持如后端模版一样按文件放置、include 语句等特性：模板使用者无需关心模板内部的依赖，子模板会自动提前载入。
编译后的模板不再依赖模板引擎，模板可以通过 SeaJS 或 RequireJS 等加载器进行异步加载，亦能利用它们成熟的打包合并工具进行上线前的优化，如合并与压缩。

• 加载器（requireJS、SeaJS）
  
  1. http://www.requirejs.cn
  2. http://seajs.org/docs

---

总结：使用预编译工具将模板生成模块JS，然后通过加载器（requireJS 、SeaJS ）将模板ＪＳ加
载到页面中。

---

TmodJS 配置

• 安装

//Win
npm install -g tmodjs

//Mac OS
sudo npm install -g tmodjs

• 编写模板
  默认基本语法是simple语法。
  表达式 { { } }，内容输出，条件，遍历，包括子模板，辅助方法。

//内容输出
{{content}}
//条件
{{if option1}}
    <p>{{content1}}</p>
    {{else if option2}}
        <p>{{content2}}</p>
{{/if}}
//遍历
{{each result}}
    <p>{{$value.code}}</p>
{{/each}}
//子模板
{{include "tpl_name"}}
默认共享数据，也可以指定数据
{{include "tpl_name" data}}

https://github.com/aui/tmodjs/wiki/%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95

• 编译模板

tmod [模板目录] [配置参数]

tmod ./tpl(必须是模板根目录) --output ./build

• 使用模板
  1 、使用script标签加载

<script src="tpl/build/template.js"></script>
<script>
    var html = template('news/list', _list);
    document.getElementById('list').innerHTML = html;
</script>

2、使用RequireJS、SeaJS加载

var render = require('./tpl/build/news/list');
var html = render(_list);

• 配置信息
  TmodJS 的项目配置文件保存在模板目录的 package.json 文件中：

{
    "name": "template",
    "version": "1.0.0",
    "dependencies": {
        "tmodjs": "1.0.0"
    },
    "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": false
    }
}

https://github.com/aui/tmodjs