JS模块化(三):CMD

   CMD规范说明:
        Common Module Definition(通用模块定义)
        专用于浏览器端,模的加载是异步的
        模块使用时才会加载执行
    CMD基本语法:
        定义暴露模块:
            // 定义没有依赖的模块:
                define(function(require,exports,module){
                    exports.xxx = value
                    module.exports = value
                })
            // 定义有依赖的模块:
                define(function(require,exports,module){
                    // 引入依赖模块(同步)
                    var module1 = require('./module1')
                    // 引入依赖模块(异步)
                    require.async('./module2',function(module3){
                        
                    })
                    // 暴露模块
                    exports.xxx = value  
                })

        引入使用模块:
            define(function(require){
                var module3 = require('./module3')
                var module4 = require('./module4')
                module3.show()
                module4.show()
            })
    在浏览器端的实现:Sea.js

举个栗子:

目录结构如下:

module1.js:

// 定义没有依赖的模块


define(function(require,exports,module){
	let name = 'module1';
	function getName(){
		return name;
	}

	//暴露模块 
	module.exports = {getName}
})

module2.js:

define(function(require,exports,module){
	let msg = 'module2';
	function getMsg(){
		console.log(msg)
	}
	//暴露模块
	module.exports = getMsg;
})

module3.js

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

	// 暴露模块
	exports.module3 = {getData}
})

module4.js

define(function(require,exports,module){
	let val = 'module4'
	function getVal(){
		console.log(val)

	}

	// 引入module2 同步
	let module2 = require('./module2.js');
	module2()

	// 异步引入module3
	require.async('./module3.js',function(module3){
		module3.module3.getData()
	});


	// 暴露模块
	module.exports = {getVal}


})

main.js

// 只需引入module1.js 和 module4.js

define(function(require,exports,module){
	let module1 = require('./module1.js')
	console.log(module1.getName())

	let module4 = require('./module4.js')
	module4.getVal()

})

index.html

结构如下:

因为在module4.js中引入了module3.js是异步的,所以先打印出module4,再打印出module3.