SeaJS

摘要：本文学习前端模块化工具SeaJS的核心思想和使用方式，以及与其他模块化工具的对比。

1 简介

1.1 介绍

SeaJS是遵循CMD（Common Module Definition）规范实现的JS模块加载器，由阿里玉伯主导开发，主要用于浏览器环境。

CMD规范采用异步方式加载模块，推崇依赖就近，模块不会提前加载，而是按需加载。

SeaJS解决了传统开发中的依赖管理、命名冲突、文件加载顺序等问题，提供了清晰的模块定义和依赖管理机制。

SeaJS与RequireJS同为早期前端模块化的重要方案，在国内前端社区曾广泛使用，后期随着ESM与构建工具兴起而逐步淡出。

1.2 背景

在传统的JS开发中，代码组织存在以下问题：

• 全局变量污染，命名冲突
• 文件依赖关系难以维护
• 代码复用和测试困难
• 资源加载阻塞页面渲染

模块化开发通过封装和依赖管理，使代码结构更清晰，维护性更高。

1.3 对比

前端模块化规范对比：

2 快速使用

2.1 引入

下载使用依赖的sea.js文件，官网提供了压缩包：

• 官网：https://seajs.github.io/seajs/docs/#intro

目录结构：

1
2
3
4
5
6
7

webapp
├── index.html
└── js
    ├── sea.js
    ├── sea-main.js
    └── show
        └── show.js

解压后，将dist目录下的sea.js文件放到项目中，在HTML中通过script元素引入：

1

<script src="js/sea.js"></script>

2.2 定义模块

使用define()方法定义模块，SeaJS推荐一个JS文件只定义一个模块。

示例：

1
2
3
4
5
6

define(function(require, exports, module) {
  function show(msg) {
    console.log(msg);
  }
  exports.show = show;
});

2.3 配置模块

增加配置代码：

1
2
3
4
5
6
7
8
9
10

<script>
  seajs.config({
    base: './js',
    alias: {
      'show': 'show/show',
    },
    charset: 'utf-8',
    timeout: 20000
  });
</script>

2.4 入口脚本

通过seajs.use()方法加载入口脚本：

1
2
3

<script>
  seajs.use("./js/sea-main.js")
</script>

在入口脚本中使用模块：

1
2
3
4

define(function(require, exports, module) {
  const show = require('show');
  show.show('hello')
});