代码改变世界

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

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

几天前的一篇文章中,我介绍了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