正文
seaJs模块化开发简单入门
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
随着前端技术的日益成熟，功能越来越丰富强大，规范也越来越健全，在这样的背景环境下很快便有了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
1
2
3
4
5
6
7
8
9
10
11
12
define(function(require,exports,module){
// 引用test.js
//require('./test.js')
/*
* 如果地址是一个模块，那么require的返回值就是模块中的exports
*/
function (){
alert(require('./test.js').num);
};
// 向外暴露模块接口
exports.alert = alert;
})
-
1） exports : 对外的接口
2） require : 依赖的接口
-
test.js
1
2
3
4
define(function(require,exports,module){
var num = 10;
exports.num = num;
});
调用模块
-
html页面中引入seajs和使用use方法请求入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
大专栏 seaJs模块化开发简单入门iv class="line"><html>
npm
安装
npm i seajs
bower
安装
bower i seajs
-
main.js
123456789101112define(function(require,exports,module){// 引用test.js//require('./test.js')/** 如果地址是一个模块，那么require的返回值就是模块中的exports*/function (){alert(require('./test.js').num);};// 向外暴露模块接口exports.alert = alert;}) -
1） exports : 对外的接口
2） require : 依赖的接口 -
test.js
1234define(function(require,exports,module){var num = 10;exports.num = num;});
调用模块
-
html页面中引入seajs和使用use方法请求入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
大专栏 seaJs模块化开发简单入门iv class="line"><html>
html页面中引入seajs和使用use方法请求入口文件
|
|
