web前端培训-模块化规范CMD

CMD

CMD的加载方式更加优秀，是通过按需加载的方式，而不是必须在模块开始就加载所有的依赖。

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。

用在浏览器端。

(1)CMD规范基本语法

定义暴露模块：

引入使用模块：

(2)sea.js简单使用教程

①下载sea.js, 并引入

官网: seajs.org/

github : github.com/seajs/seajs

然后将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
})
​
// 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()
})

④在index.html中引入

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。