当前位置:首页 > Web开发 > 正文

seaJs模块化开发简单入门

2024-03-31 Web开发

跟着前端技术的日益成熟,成果越来越丰茂盛大,规范也越来越健全,在这样的配景环境下很快便有了、、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