在 JavaScript 中嵌入 HTML 模板很不方便,特别是当模板内容有多行时。有了 SeaJS, 一切迎刃而解。
首先,使用 seajs.config 激活文本插件:
seajs.config({
preload: ['plugin-text']
});
接下来,通过 require 加载:
a.tpl:
<div>I am {{name}}.</div>
main.js:
define(function(require) {
var tpl = require('./a.tpl');
// do sth.
});
除了 .tpl 后缀, 还可以使用 .htm、
.html 后缀,或 text! 前缀来指明文本文件。
SeaJS 通过 XHR 来加载文本文件,受同源策略限制。在开发完成后,可以通过 spm (SeaJS 包管理器) 来将文本文件转换为 jsonp 代码。这样,上线后可以从任何域加载。
在线开发调试时,如果想跨域加载文本文件,可以通过 proxy 的方式来实现:
seajs.config({
map: [
[ /^(.*\.tpl)$/, 'http://path/to/proxy.php?q=$1' ]
]
});
proxy.php 内容很简单:
<?php echo file_get_contents($_GET['q']);
可以在本地 php 环境中部署 proxy.php, 再结合 SeaJS 的 map 功能,就可以很方便地开发调试。
测试用例:test.html