seajs之seajs-text和seajs-debug插件

作者：zccst

终于明白为什么项目中加这个文件了，原来是为了载入模板。
首先，使用seajx-text加入模板
然后，再用Hogan或mustache解析模板，完成替换


[size=large][b]一、文本插件seajs-text[/b][/size]

在 JavaScript 中嵌入 HTML 模板很不方便，特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。

首先，需要引入文本插件：

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-text.js"></script>
也可以通过 preload 配置来引入。

[b]加载模板字符串[/b]

引入文本插件后，就可以在模块中直接通过 require 来加载文本文件了：

define(function(require) {

// 获取文本内容
var tpl = require('./a.tpl');
console.log(tpl);

});
a.tpl

<div>I am {{name}}.</div>
除了 .tpl 后缀, 还可以使用 .html 后缀，或 text! 前缀来指明文本文件。

[b]加载 Handlebars 模板并进行预编译[/b]

对于 Handlebars 模板，在开发时我们可以让编译透明化。首先要配置 handlebars 的路径：

seajs.config({
alias: {
handlebars: 'gallery/handlebars/1.0.2/handlebars'
}
})
然后在模块代码中，就可以直接获取编译后的 handlebars 模块函数了：

var compiled = require('./a.handlebars')
var html = compiled({foo: 'bar'})


[b]加载 JSON 数据[/b]

除了加载模板等文本文件，使用文本插件还可以加载 JSON 数据：

a.json

{
"name": "Frank",
"age": 30
}
define(function(require) {

// 加载 json 数据
var data = require('./a.json');
console.log(data.name);

});
除了 .json 后缀，还可以使用 json! 前缀来指明 JSON 文件。

[b]注意事项[/b]

Sea.js 通过 XHR 来加载文本文件。受同源策略限制，在开发完成后，推荐通过构建工具将文本文件转换为 JS 代码。这样，上线后就可以从任意域加载。

Sea.js 原生支持 css 文件的加载，直接 require('path/to/file.css') 即可。


[size=large][b]二、调试插件seajs-debug[/b][/size]
[url]https://github.com/seajs/seajs-debug/blob/master/README.md[/url]
[url]https://github.com/seajs/seajs-debug/issues/4[/url]


如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]