seajs学习(7)----文本插件

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 文件。

注意事项

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

  2. 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值