seajs之seajs-text和seajs-debug插件

作者：zccst

终于明白为什么项目中加这个文件了，原来是为了载入模板。

首先，使用seajx-text加入模板

然后，再用Hogan或mustache解析模板，完成替换

一、文本插件seajs-text

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

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

<scriptsrc="path/to/sea.js"></script>

<scriptsrc="path/to/seajs-text.js"></script>

也可以通过preload配置来引入。

加载模板字符串

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

define(function(require){

//获取文本内容

vartpl=require('./a.tpl');

console.log(tpl);

});

a.tpl

<div>Iam{{name}}.</div>

除了.tpl后缀,还可以使用.html后缀，或text!前缀来指明文本文件。

加载Handlebars模板并进行预编译

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

seajs.config({

alias:{

handlebars:'gallery/handlebars/1.0.2/handlebars'

}

})

然后在模块代码中，就可以直接获取编译后的handlebars模块函数了：

varcompiled=require('./a.handlebars')

varhtml=compiled({foo:'bar'})

加载JSON数据

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

a.json

{

"name":"Frank",

"age":30

}

define(function(require){

//加载json数据

vardata=require('./a.json');

console.log(data.name);

});

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

注意事项

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

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

二、调试插件seajs-debug

https://github.com/seajs/seajs-debug/blob/master/README.md

https://github.com/seajs/seajs-debug/issues/4

如果您觉得本文的内容对您的学习有所帮助，您可以微信：