JS模块化规范——CMD相关笔记

CMD（相对于其他三个，在市面上应用不多，作了解即可）

一、规范

1.1 说明

• Common Module Definition(通用模块定义)
• https://github.com/seajs/seajs/issues/242
• 专门用于浏览器端, 模块的加载是异步的
• 模块使用时才会加载执行

1.2 基本语法

• 定义暴露模块

//定义没有依赖的模块
define(function(require, exports, module){
	exports.xxx = value
	module.exports = value
})

//定义有依赖的模块
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()
})

二、实现（浏览器端）

2.1 Sea.js

1. 下载sea.js, 并引入

• 文档:http://www.zhangxinxu.com/sp/seajs/
• github : https://github.com/seajs/seajs
• 将sea.js导入项目: js/libs/sea.js

2. 创建项目结构

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

3. 定义sea.js的模块代码

• module1.js

  // 定义没有依赖的模块
  define(function (require, exports, module) {
    let msg = 'module1'
  
    function foo() {
      return msg
    }
    // 暴露模块
    module.exports = {
      foo
    }
  })
  

• module2.js

  define(function (require, exports, module) {
    let msg = 'module2'
  
    function bar() {
      console.log(msg)
    }
  
    module.exports = bar
  })
  

• module3.js

  define(function (require, exports, module) {
    let data = 'module3'
  
    function fun() {
      console.log(data)
    }
    exports.module3 = {
      fun
    }
  })
  

• module4.js

  define(function (require, exports, module) {
    let msg = 'module4'
    // 同步引入
    let module2 = require('./module2')
    module2()
    // 异步引入
    require.async('./module3.js', function (module3) {
      module3.module3.fun()
    })
  
    function fun2() {
      console.log(msg)
    }
    exports.fun2 = fun2
  })
  

• main.js : 主(入口)模块

  define(function(require) {
    let module1 = require('./module1')
    console.log(module1.foo())
    let module4 = require('./module4')
    module4.fun2()
  })
  

4. index.html:

<!--
使用seajs:
  1. 引入sea.js库
  2. 如何定义导出模块 :
    define()
    exports
    module.exports
  3. 如何依赖模块:
    require()
  4. 如何使用模块:
    seajs.use()
-->
<script type='text/javascript' src='js/libs/sea.js'></script>
<script type='text/javascript'>
  seajs.use('./js/modules/main.js');
</script>