在 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