TmodJS 解决前端模板外置
在前端界面的开发中一些公用模块如头部、底部在每个页面都需要用到，如果用服务器端语言来处理这个问题，可以很简单的用include搞定。
但是如果想用前端语言来处理就比较麻烦了，网上的解决方案可畏是五花八门，基本是用iframe或者某些大型的js框架来处理。在潜意识中iframe能不用当然是尽量不用，但用大型js框架又感觉有点杀鸡用牛刀的感觉。
这时候比较理想的选择就是模板库了，如artTemplate等。使用初期感觉渲染数据和结构很方便，但之后发现它也有致命的短板，就是模板必须写在当前页面里，并不能外置公用，显然这并没有解决最根本的问题。
到了这个阶段tmodjs该出场了，它是一个前端模板预编译工具，可以让前端页面模板拥有include的能力。
tmodjs的安装方法在它的官方文档上写的很详细，大家也可以去官网文档查看，这里我大致说下一步骤：
1.首先电脑必须有安装Node.js环境，安装教程请参考Windows安装Nodejs。
2.安装成功后使用 NodeJS 附带的npm命令，执行：
npm install -g tmodjs3.新建测试项目文件夹test，在test根目录下新建tpl、build文件夹及index.html
test
├── tpl
├── build
└── index.html
index.html：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TmodJStitle>
head>
<body>
<main id="main">main>
body>
html>4.在cmd命令框输入路径定位到test文件夹根目录，比如我的test项目在D盘根目录下，就输入d:回车，然后再输入cd test定位到test文件夹根目录
5.继续在cmd命令框输入tmod ./tpl –output ./build 然后回车，会自动在tpl文件夹下生成package.json配置文件，自动在build文件夹下生成template.js。这步完成后tmodjs会监控模板目录修改，每次模板修改都会增量编译。
test
├── tpl
│ └── package.json
│
├── build
│ └── template.js
│
└── index.html
6.在tpl目录下新建page.html模板，模板语法与artTemplate是相同的，这里只做模板演示所以只写静态html了
page.html：
<div> page template test div>test
├── tpl
│ ├── package.json
│ └── page.html
│
├── build
│ └── package.json
│
└── index.html
7.模板文件建好后用编辑器打开test根目录下的index.html，载入build\template.js到页面，然后加载page.html模板内容到index.html页面id为box的容器里。
index.html：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TmodJStitle>
head>
<body>
<main id="main">main>
<script src="build/template.js">script>
<script>
var oMain = document.getElementById('main');
oMain.innerHTML = template('page',{});
//template方法第一个参数填写page模板文件名,而且不需要后缀
//template方法第二个参数放data数据，由于这里演示没有用到所以只放了一个空数据对象
script>
body>
html>8.编辑完后保存并在浏览器打开index.html页面，可以看到page.html模板的内容已经成功加载到index.html页面里
9.tmodjs的模板语法特性还支持模板内部include其他模板文件，下面的步骤讲解
10.在tpl目录下再新建一个header.html模板
test
├── tpl
│ ├── package.json
│ ├── page.html
│ └── header.html
│
├── build
│ └── package.json
│
└── index.html
header.html：
<header> header template test</header>11.然后在page.html页面include这个header.html模板
page.html：
{{include './header'}}
<div> page template test div>12.再刷新index.html，发现header.html模板的内容也被成功include出来了
结语：tmodjs的功能远不止这些，这里只演示了它基本的用法，更多的使用方法请移步tmodjs官方文档查看