05 CMD-SeaJS 模块化

SeaJS 模块化

1. 下载sea.js, 并引入

• 官网
• github
• 将sea.js导入项目：js/libs/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>

​