背景

管理 html css 等资源。

text.js 是什么

text.js是require.js的一个插件，用于异步加载文本资源，如txt、css、html、xml、svg等。

入门

安装

  • 官方下载

https://github.com/requirejs/text/blob/master/text.js 官网下载。

  • npm
  [plaintext]
1
npm install requirejs/text
  • 个人

我直接取官方下载了文件，保存到本地：require-text.js

使用

文件层级

使用到的文件在同一个文件夹：

  [plaintext]
1
2
3
require-text.js
test.html
header.html

文件内容

  • test.html

内容如下

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>require-js</title>
    <script src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>
<body>
    <div id="header"></div>
</body>
<script>
    requirejs.config({
        paths:{
            // 默认就是 js 资源，不需要使用后缀
            "text": "require-text",
        }
    });

    requirejs(["text!header.html"], function(header) {
        // 将文件内容写入到当前页面
        console.log(header);
        document.getElementById("header").innerHTML = header;
    });
</script>
</html>
  • header.html

内容如下：

  [html]
1
2
3
<div>
    表头信息
</div>

效果

打开 test.html，就可以看到 header 的内容已经被加到页面了。

参考资料

https://github.com/requirejs/text

在Html中使用Requirejs进行模块化开发

[require.js插件] text.js异步加载文本资源

require.js插件-text.js使用

https://cdnjs.com/libraries/require-text