lifesinger commented on 29 Jun 2013 文本插件 在 JavaScript 中嵌入 HTML 模板很不方便,特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。 首先,需要引入文本插件: <script src="path/to/sea.js">script> <script src="path/to/seajs-text.js">script> 也可以通过 preload 配置来引入。 加载模板字符串 引入文本插件后,就可以在模块中直接通过 require 来加载文本文件了: define(function(require) {// 获取文本内容var tpl = require('./a.tpl');console.log(tpl);}); a.tpl I am {{name}}. 除了 .tpl 后缀, 还可以使用 .html 后缀,或 text! 前缀来指明文本文件。 加载 Handlebars 模板并进行预编译 对于 Handlebars 模板,在开发时我们可以让编译透明化。首先要配置 handlebars 的路径: seajs.config({alias: {handlebars: 'gallery/handlebars/1.0.2/handlebars'} }) 然后在模块代码中,就可以直接获取编译后的 handlebars 模块函数了: var compiled = require('./a.handlebars')var html = compiled({foo: 'bar'}) 加载 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') 即可。
文本插件
在 JavaScript 中嵌入 HTML 模板很不方便,特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。
首先,需要引入文本插件:
也可以通过
preload
配置来引入。加载模板字符串
引入文本插件后,就可以在模块中直接通过
require
来加载文本文件了:a.tpl
除了
.tpl
后缀, 还可以使用.html
后缀,或text!
前缀来指明文本文件。加载 Handlebars 模板并进行预编译
对于 Handlebars 模板,在开发时我们可以让编译透明化。首先要配置 handlebars 的路径:
然后在模块代码中,就可以直接获取编译后的 handlebars 模块函数了:
加载 JSON 数据
除了加载模板等文本文件,使用文本插件还可以加载 JSON 数据:
a.json
除了
.json
后缀,还可以使用json!
前缀来指明 JSON 文件。注意事项
Sea.js 通过 XHR 来加载文本文件。受同源策略限制,在开发完成后,推荐通过构建工具将文本文件转换为 JS 代码。这样,上线后就可以从任意域加载。
Sea.js 原生支持 css 文件的加载,直接
require('path/to/file.css')
即可。