seajs学习（7）----文本插件

最新推荐文章于 2020-12-03 12:23:32 发布

转载最新推荐文章于 2020-12-03 12:23:32 发布 · 408 阅读

文章标签：

7 篇文章

订阅专栏

本文介绍如何使用Sea.js加载模板字符串、JSON数据及文本文件，并解释了文本插件的配置方法。此外，还提供了关于插件动态加载的实用技巧。

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 数据：

a.json

{
  "name": "Frank",
  "age": 30
}

define(function(require) {

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

});

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

除了通过 seajs.config 来加载插件，还可以通过在 url 中添加特定参数来动态加载插件，比如：

http://example.com/path/to/page.html?seajs-debug&seajs-nocache&seajs-text

上面这种方式，等价：

seajs.config({
  plugins: ['debug', 'nocache', 'text']
})

动态加载的方式可以用来做在线调试，更详细的说明请参考： #319