sea.js简单使用教程

Posted 2021-02-11 glacial_water

sea.js简单使用教程

1. 下载sea.js, 并引入

   • 官网: http://seajs.org/

   • github : https://github.com/seajs/seajs

   • 将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) {
       //内部变量数据
       var data = ‘atguigu.com‘
       //内部函数
       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) {
       //引入依赖模块(同步)
       var 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. index.html:

   
   <!--
   使用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>