js模块化规范—CMD规范

CMD规范说明

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

CMD基本语法

定义暴露模块

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

引入使用模块

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

创建项目结构

|-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.js

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>

js模块化规范—CMD规范

猜你喜欢