代码改变世界

在SeaJS中实现html模板文件的加载（Temod介绍）

2011-07-01 15:58  T2噬菌体  阅读(16876)  评论(4)  编辑  收藏  举报

在几天前的一篇文章中，我介绍了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的使用示例。

image

如上图所示，其中bin下放着temod.js，例子放在example下。example目录内部如下：

image

刚开始没有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，则可看到如下效果：

image

如果不了解SeaJS，请看这篇文章：http://www.cnblogs.com/leoo2sk/archive/2011/06/27/write-javascript-with-seajs.html。

需要这个例子的完整代码可以访问https://github.com/ericzy/temod/tree/master/example。