SeaJS 模块化
1. 下载sea.js, 并引入
2. 创建项目结构
|-js
|-libs
|-sea.js
|-modules
|-module1.js
|-module2.js
|-module3.js
|-module4.js
|-main.js
|-index.html
3. 定义sea.js的模块代码
-
module1.js
define(function (require, exports, module) { //内部变量数据 let data = 'hello world'; //内部函数 function show() { console.log(`module1 show() ${data}`) } //向外暴露 exports.show = show; })
-
module2.js
define(function (require, exports, module) { module.exports = { msg: 'I Will Back'; } })
-
module3.js
define(function (require, exports, module) { const API_KEY = 'abc123'; exports.API_KEY = API_KEY; })
-
module4.js
define(function (require, exports, module) { //引入依赖模块(同步) let module2 = require('./module2'); function show() { console.log(`module4 show() ${module2.msg}`); } exports.show = show; //引入依赖模块(异步) require.async('./module3', function (m3) { console.log(`异步引入依赖模块3 ${m3.API_KEY}`); }) })
-
main.js : 主(入口)模块
define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() })
4. 页面
<!--
使用seajs:
1. 引入sea.js库
2. 如何定义导出模块 :
define()
exports
module.exports
3. 如何依赖模块:
require()
4. 如何使用模块:
seajs.use()
-->
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/modules/main')
</script>