SeaJS简介三：模块载入和引用

最新推荐文章于 2021-06-15 18:53:53 发布

lfsf802

最新推荐文章于 2021-06-15 18:53:53 发布

阅读量2.1w

点赞数 1

分类专栏：前端技术

本文链接：https://blog.csdn.net/lfsf802/article/details/26758567

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

之前对模块有过介绍，一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。

SeaJS支持如下几种方式：

第一种：绝对路径--给出js文件的绝对路径

require("http://example/js/a");

第二种：相对路径--用相对调用载入函数所在js文件的相对地址寻找模块

require("./c");

第三种：通过全局变量来匹配相对路径：相对SeaJS全局配置中的“base”来寻址（后面文章会介绍到）

SeaJS提供了三种载入的方式：seajs.use，require和require.async

第一种：seajs.use

seajs.use主要用于载入入口模块。入口模块相当于JAVA程序的main函数，同时也是整个模块依赖树的根。

这种方式有几种写法：

//单一模式
seajs.use('./a');
 
//回调模式
seajs.use('./a', function(a) {
  a.run();
});
 
//多模块模式
seajs.use(['./a', './b'], function(a, b) {
  a.run();
  b.run();
});

一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入sea.js的script标签加入”data-main”属性来省略seajs.use。

来个小实例来说明一下：

 
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js" data-main="./init"></script>
</body>
</html>

第二种：require

require是SeaJS主要的模块加载方法，当在一个模块中需要用到其它模块时一般用require加载：ar a = require('a'); //引入a模块

第三种：require.async

之前的require方式是一次把所有依赖的JS文件都加载进来，如果想什么时候用到什么时候加载的话就会用这种方式，这种方式效率比require高一些。

通过上面的介绍，应该对SeaJS的模块载入和引用有所了解了，其实者通过这几篇的介绍会发现SeaJS的模块化编程思想和它带给开发人员的简单易用的特点。下篇博客介绍一下SeaJS的全局配置。

lfsf802

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
8
评论
SeaJS简介三：模块载入和引用

之前对模块有过介绍，一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。 SeaJS支持如下几种方式：第一种：绝对路径--给出js文件的绝对路径 require("http://example/js/a"); 第二种：相对路径--用相对调用载入函数所在js文件的相对地址寻找模块 require(".
复制链接

扫一扫