在SeaJS中实现html模板文件的加载（Temod介绍）
在几天前的一篇文章中，我介绍了JavaScript的模块化加载框架SeaJS。目前SeaJS支持js和css的模块化加载。在实际应用中，可能会遇到需要加载html页面模板文件的场景，例如我接触的某些应用使用Template Toolkit（以下简称TT）写页面模板，然后由js载入TT模板后渲染输出，在这种纯JavaScript渲染的Web架构中，需要将tt文件（或其它格式html模板文件）作为模块载入。
实现这一点的基本的方法是将tt文件内容看做一个长字符串，然后封装为纯Json格式的模块：
define({
html: '<div>html</div>' //原html模板文件代码
});
由于JavaScript不支持类似于php heredoc那样的长字符串写法，所以手工做这种转换会比较纠结，而且还要处理特殊字符转义、html压缩等繁琐事情，当模板文件比较多时全手工实现费时费力还容易出错。所以我写了一个小工具temod，temod可以将html或tt等页面模板文件编译成符合CommonJS规范的module，这样任何实现了CommonJS规范的模块加载框架（如SeaJS）就可以将编译好的文件作为普通模板加载进来。
Temod目前托管在GitHub上，访问地址是：https://github.com/ericzy/temod
Temod使用简介
获取temod
获取temod有两种方式，一是通过Git获取整个temod git repository：
git clone https://github.com/ericzy/temod.git
或者也可以通过这个地址直接下载temod.js脚本：https://raw.github.com/ericzy/temod/master/bin/temod.js。例如在linux下可以通过wget获取：
wget https://raw.github.com/ericzy/temod/master/bin/temod.js
运行temod
Temod程序只有一个temod.js，这个脚本使用NodeJS写成，不需要任何安装，直接使用NodeJS执行即可：
node temod.js path/to/template/directory [option]
temod.js的第一个参数为必须参数，是模板文件所在目录，可选参数option有如下几个：
--compress=on|off —— 是否开启html代码压缩。如果设为on，则temod会将整个模板文件压缩成一个不换行字符串；如果设为off，则会将模板文件中每一行转为一个字符串，这些字符串组成数组，通过join输出页面，保持所有html代码格式。一般来说，前者节省带宽，而后者传给客户端的html源代码可读性更好。默认开启压缩。
--encoding=utf-8 —— 模板文件和输出文件的编码，默认为utf-8。
--ext=htm,html,tt,tpl,… —— 模板文件扩展名。这个选项指定了所有模板文件的扩展名，如果文件在模板文件目录里但不包含指定的扩展名，则不会被编译。多个扩展名之间用英文逗号隔开。默认为htm,html,tt,tpl。
temod会自动遍历指定的模板目录，生成一个与其结构一致的目录，名称为原目录名加“_build”，其中包含了所有编译好的文件，文件名为源文件名加“.js”。
Temod使用示例
下面给一个temod的使用示例。
如上图所示，其中bin下放着temod.js，例子放在example下。example目录内部如下：
刚开始没有template_build，这是一个编译生成的目录。其中template下放有一个模板文件content.tt：
<div>
<p>This is a Temod Sample.</p>
<p><a href="https://github.com/ericzy/temod">Click here to visit home page</a></p>
</div>
现在到bin目录下运行如下命令：
node temod.js ../example/template --compress=on --ext=tt --encoding=utf-8
或者省略默认参数也可以：
node temod.js ../example/template
这会在example下生成template_build目录，里面有个content.tt.js文件，内容如下：
//This file was generated by temod (https://github.com/ericy/temod)
define({html: '<div><p>This is a Temod Sample.</p><p><a href="https://github.com/ericzy/temod">Click here to visit home page</a></p></div>'});
然后我们在js下写一个init.js模块，在这个模块中加载这个模板并做一些渲染操作：
define(function(require, exports, module) {
var tpl = require('../template_build/content.tt');
document.body.innerHTML = tpl.html;
});
最后在index.html中将init作为入口模块：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Temod Sample</title> </head> <body> <script src="./js/sea.js" data-main="./js/init"></script> </body> </html>
访问index.html，则可看到如下效果：
如果不了解SeaJS，请看这篇文章：http://www.cnblogs.com/leoo2sk/archive/2011/06/27/write-javascript-with-seajs.html。
需要这个例子的完整代码可以访问https://github.com/ericzy/temod/tree/master/example。
作者: T2噬菌体 发表于 2011-07-01 15:58 原文链接
评论: 2 查看评论 发表评论
最新新闻：
· 美国法院驳回针对微软和雅虎的反垄断诉讼(2011-08-27 09:41)
· Windows 8:两款采用Metro UI界面的新应用(2011-08-27 09:39)
· 诺基亚手机应用竞赛耗资千万美元(2011-08-27 09:37)
· 2011年必须看的20多个新鲜和实用的jQuery插件(2011-08-27 09:36)
· Facebook将停止运营团购服务Facebook Deals(2011-08-27 09:36)
编辑推荐：你会做Web上的用户登录功能吗？
网站导航：博客园首页 我的园子 新闻 闪存 小组 博问 知识库