CMD模块化规范

环境准备

第一步：准备环境

文件说明：

1. js 文件夹中存放业务逻辑代码，main.js用于汇总各模块。
2. libs 中存放的是第三方库，例如必须要用的sea.js。

sea.js

第二步：在index.html中配置main.js与sea.js。

<script type="text/js" src="./libs/sea.js"></script>

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

导出数据

CMD中同样使用define函数定义模块并导出数据。

shool.js

/* 
  收到的三个参数分别为：require、exports、module
    1. require用于引入其他模块
    2. exports、module用于导出数据
*/
define(function(require,exports,module){
  const name = '折木'
  const slogan = 'js一把梭！'

  function getTel (){
    return '19986494173'
  }

  function getCities(){
    return ['北京','上海','深圳','成都','武汉','西安']
  }
  // 导出数据
  module.exports = {name,slogan,getTel}
})

导入数据

CMD规范中使用收到的require参数进行模块导入。

student.js

define(function(require,exports,module){
  const name = '张三'
  const motto = '相信明天会更好！'

  // 引入welcome模块
  const welcome = require('./welcome')
  console.log(welcome)
  
  function getTel (){
    return '19986494173'
  }
  function getHobby(){
    return ['抽烟','喝酒','coding']
  }

  exports.name = name
  exports.motto = motto
  exports.getTel = getTel
})

使用模块

main.js

define(function(require){
  const school = require('./school')
  const student = require('./student')

  // 使用模块
  console.log(school)
  console.log(student)
})