seaJs模块化开发简单入门

字数：660 阅读时长：2分钟阅读：85

随着前端技术的日益成熟，功能越来越丰富强大，规范也越来越健全，在这样的背景环境下很快便有了CommonJs、AMD、CMD等一系列规范，使前端发开趋向模块化、规范化。
CMD模块化的代表之一就是国内开发的seaJs，它有很多优点：

遵从CMD规范，代码模块化
中文文档通俗易懂，入门上手简单
兼容性好、配置简洁明了、提供插件接口

seajs模块化基本流程：

引入sea.js库
define定义模块
exports暴露模块
require导入模块

安装

npm安装
```
npm i seajs
```
bower安装
```
bower i seajs
```
官网下载：http://seajs.org/docs/#downloads

定义模块

main.js

define(function(require,exports,module){        // 参数固定，不可随意改变
    // 引用test.js
    //require('./test.js')
    /*
    * 如果地址是一个模块，那么require的返回值就是模块中的exports
    */
    function alert(){
        alert(require('./test.js').num);
    };
    // 向外暴露模块接口
    exports.alert = alert;
})

1） exports : 对外的接口
2） require : 依赖的接口

test.js

define(function(require,exports,module){
    var num = 10;
    exports.num = num;
});

调用模块

html页面中引入seajs和使用use方法请求入口文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>seaJs</title>
</head>
<body>
<script src="sea.js"></script>
<script>
    /*
     * seajs.use方法：
     * 页面去调用模块，
     * 第一个参数：模块的地址
     * 第二个参数：地址加载成功后的回调函数
     * seajs的默认目录：sea.js所在的目录
     * */
    seajs.use('./js/main.js',function(exports){
        // 回调的参数，就是模块中的exports
        exports.alert();
    });
    // 加载多个文件
    /*
    seajs.use(['./main.js','./main2.js'],function(ex1,ex2){
        操作
    })*/
</script>
</body>
</html>

加载多个入口文件
1
2
3
4
5
seajs.use(['./main.js','./main2.js'],function(ex1,ex2){ // 模块加载完成时执行回调操作 ex1.fn(); // 调用ex1的方法 ex2.fn(); // 调用ex2的方法 })
有些js文件可能是在某些事件触发后才会被加载使用，因此没有必要在页面刚访问时，就加在所有资源文件，这样也可以减少客户端与服务器端的请求时间，提高用户体验。

seaja对于此便提供了一个async异步请求的方法：

1
2
3

require.async('./test2.js',function(ex){    // 异步请求
    ex.fn();
})

如有不当，请参考官网文档
seajs的具体config配置见：https://github.com/seajs/seajs/issues/262
参考文档：

欢迎访问：个人博客地址

本文作者： Tiven
发布时间： 2017-03-16
最后更新： 2023-07-17
本文标题： seaJs模块化开发简单入门
本文链接： https://www.tiven.cn/p/88e75d70/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！

天問

博观而约取，厚积而薄发

seaJs模块化开发简单入门

安装

定义模块

调用模块