js模块化规范—CMD规范

时间 2019-11-12 标签模块化规范 cmd

CMD规范说明javascript

专门用于浏览器端, 模块的加载是异步的，模块使用时才会加载执行，github地址html

CMD基本语法java

定义暴露模块git

//定义有依赖的模块
define(function(require, exports, module){
    //引入依赖模块(同步)
    var module2 = require('./module2')
    //引入依赖模块(异步)
      require.async('./module3', function (m3) {
        
      })
    //暴露模块
    exports.xxx = value
})

引入使用模块github

define(function (require) {
    var m1 = require('./module1')
    var m4 = require('./module4')
    m1.show()
    m4.show()
})

CMD规范的实现（浏览器端）浏览器

CMD规范须要用到sea.js，下载sea.js, 并引入，将sea.js导入项目: js/libs/sea.js异步

建立项目结构async



|-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html

定义sea.js的模块代码：module1.js函数

define(function (require, exports, module) {
  //内部变量数据
  var data = 'atguigu.com'
  //内部函数
  function show() {
    console.log('module1 show() ' + data)
  }

  //向外暴露
  exports.show = show
})

定义sea.js的模块代码：module2.jsui

define(function (require, exports, module) {
  module.exports = {
    msg: 'I Will Back'
  }
})

定义sea.js的模块代码：module3.js

define(function (require, exports, module) {
  const API_KEY = 'abc123'
  exports.API_KEY = API_KEY
})

定义sea.js的模块代码：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()
})

如何使用模块

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
  seajs.use('./js/modules/main')
</script>
</body>
</html>