seaJs模块化开发简单入门
跟着前端技术的日益成熟,成果越来越丰茂盛大,规范也越来越健全,在这样的配景环境下很快便有了、、CMD等一系列规范,使前端发开趋向模块化、规范化。
CMD模块化的代表之一就是国内开发的seaJs,它有很多长处:
遵从CMD规范,代码模块化
中文文档通俗易懂,入门上手简单
兼容性好、配置简洁明了、供给插件接口
seajs模块化根基流程:
引入sea.js库
define界说模块
exports袒露模块
require导入模块
安置npm安置npm i seajs
bower安置bower i seajs
官网下载:
界说模块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
<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
参考文档:
seaJs模块化开发简单入门
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30726.html