JS模块化（三）AMD(Asynchronous Module Definition)的应用

基本使用

• 暴露出去

// 定义没有依赖的模块
define(function(){
	return 模块	
})

// 定义有依赖的模块
define(['module1','module2'],function(m1,m2){
	return 模块
})

• 应用进来

requirejs(['module1','module2'],function(m1,m2){
	使用m1,m2即可
})

自定义依赖的引用

• 文件的结构

└─js
    │  main.js
    │
    ├─libs
    │      require.js
    │
    └─modules
            alerter.js
            dataService.js
│
│  index.html

• modules 的文件

dataService.js

define(function () {
	let name = "dataService.js";
	function getName(){
		return name;
	}
	
	// 向外暴露模块
	return {getName};
})


alerter.js

define(['dataService'],function (dataService) {
	let msg = "alerter.js";
	function showMsg(){
		console.log(msg, dataService.getName());
	}
	
	// 向外暴露模块
	return {showMsg};
})

• 主文件main.js

(function() {
	// 配置requirejs
	requirejs.config({
		baseUrl: "js/",
		paths: {
			dataService: './modules/dataService',
			alerter: './modules/alerter'
		}
	});

	// 引入依赖
	requirejs(['alerter'], function(alerter) {
		alerter.showMsg();		// alerter.js dataService.js
	});

})()

• html文件

<script data-main="js/main.js" src="js/libs/require.js"></script>

这种方式需要做requirejs的配置，之后再引入js文件的时候，注意src是requre.js 而data-main才是我们的main.js,这种方式是针对客户端较早出现的一种方式

引入第三方的依赖 （引入jQuery为例）

• 放入相关的js，文件结构

│  index.html
│
└─js
    │  main.js
    │
    ├─libs
    │      jquery-1.11.0.js
    │      require.js
    │
    └─modules
            alerter.js
            dataService.js

• 其余和之前相同，就是引入第三方库即可，main.js

(function() {
	// 配置requirejs
	requirejs.config({
		baseUrl: "js/",
		paths: {
			dataService: './modules/dataService',
			alerter: './modules/alerter',
			jquery: './libs/jquery-1.11.0'	// jQuery源码中 遵循了AMD规范 并且暴露模块为jquery
		}
	});

	// 引入依赖
	requirejs(['alerter',"jquery"], function(alerter,$) {
		alerter.showMsg();
		$("body").css("background","deeppink");
		
	});

})()

• html文件

<script data-main="js/main.js" src="js/libs/require.js"></script>

都是在内部引入的，所以发请求只需要一个请求就可以搞定，只需要配置好模块路径即可