Sea.js 支持丰富的插件,可用来实现各种功能。下面是文件插件的使用说明。
加载模板字符串
在 JavaScript 中嵌入 HTML 模板很不方便,特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。
首先,使用 seajs.config
配置文本插件:
seajs.config({
plugins: ['text']
});
接下来,就可以直接通过 require
来加载文本文件了:
define(function(require) {
// 获取文本内容
var tpl = require('./a.tpl');
console.log(tpl);
});
a.tpl
<div>I am {{name}}.</div>
除了 .tpl
后缀, 还可以使用 .html
后缀,或 text!
前缀来指明文本文件。
加载 JSON 数据
除了加载模板等文本文件,使用文本插件还可以加载 JSON 数据:
a.json
{
"name": "Frank",
"age": 30
}
define(function(require) {
// 加载 json 数据
var data = require('./a.json');
console.log(data.name);
});
除了 .json
后缀,还可以使用 json!
前缀来指明 JSON 文件。
注意事项
-
Sea.js 通过 XHR 来加载文本文件。受同源策略限制,在开发完成后,推荐通过构建工具将文本文件转换为 JS 代码。这样,上线后就可以从任意域加载。
-
Sea.js 原生支持 css 文件的加载,直接
require('path/to/file.css')
即可。
插件的动态加载
除了通过 seajs.config
来加载插件,还可以通过在 url 中添加特定参数来动态加载插件,比如:
http://example.com/path/to/page.html?seajs-debug&seajs-nocache&seajs-text
上面这种方式,等价:
seajs.config({
plugins: ['debug', 'nocache', 'text']
})
动态加载的方式可以用来做在线调试,更详细的说明请参考: #319