【JavaScript模块化】5-CMD-SeaJS模块化教程

偏执的太偏执、 2024-04-03 12:47 69阅读 0赞

### sea.js简单使用教程 ###

1.  下载sea.js, 并引入

*  官网: http://seajs.org/
 *  github : https://github.com/seajs/seajs
 *  将sea.js导入项目: js/libs/sea.js

1.  创建项目结构

1.  定义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()
        })

1.  index.html:

<script type="text/javascript" src="js/libs/sea.js"></script>
    <script type="text/javascript">
      seajs.use('./js/modules/main')
    </script>