模块化-seajs

本文最后更新于：2023年3月30日 下午

利用模块可以避免 冲突、依赖、优化性能

先去www.seajs.org下载sea.js

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript">
    // seajs默认根目录就是sea.js
    seajs.use('test.js', function(ex) {
        // ex就是模块中的exports
        ex.tab();
    });
</script>
</head>
<body>
</body>
</html>

模块中的一个test.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
define(function(require, exports, module) {
    function tab(){
        alert(a);
    }
    // require依赖的接口
    require('test2.js');
    // 如果依赖的接口是模块那么
    /*function tab() {
        alert(require("test3.js").a);
    }*/
    // 异步加载test3.js即是说需要用到时才去加载他
    function tab() {
        require.async('test3.js', function(ex) {
           alert(ex.a);
        });
    }
    // exports对外提供接口
    exports.tab = tab;
});

test.js依赖于test2.j

1
a = 10;

test.js依赖的是一个模块的话：

1
2
3
4
define(function(require, exports, module) {
    a = 3;
    exports.a = a;
});
developer
#原创 #javaScript
模块化-seajs
https://seven3.site/js/模块化-seajs/
作者
Seven3s
发布于
2015年2月27日
许可协议