JS模块化规范之AMD

JS模块化规范之AMD

  • 模块规范
    • AMD(Asynchronous Module Definition)
      • 概念
      • 基本语法
      • AMD实现
        • 未使用AMD规范
        • 使用require.js
        • 总结

模块规范

AMD(Asynchronous Module Definition)

概念

Asynchronous Module Defintion
CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用,但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范,此外AMD规范比CommonJS规范在浏览器端实现要来着早。

基本语法

定义暴露模块:

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

引入使用模块:

require(['module1','module2'],function(m1,m2){
	使用m1,m2
});

AMD实现

通过比较是否使用AMD,来说明使用AMD实际使用的效果。

未使用AMD规范
//dataService.js文件
(function (window){
	let msg = 'www.baidu.com';
	function getMsg(){
		return msg.toUpperCase()
	}
	window.dataService = { getMsg }
})(window);
//alerter.js文件
(function (window,dataService){
	let name = 'huaxue';
	function showMsg(){
		alert(dataService.getMsg()+','+name);
	}
	window.alerter = { showMsg }
})(window,dataService);

// main.js文件
(function (alerter){
	alerter.showMsg()
})(alerter)

//index.html文件
<div><h1>Modular Demo 1: 未使用AMD(require.js)</h1></div>
<script type="text/javascript" src="js/modules/dataService.js"></script>
<script type="text/javascript" src="js/modules/alerter.js"></script>
<script type="text/javascript" src="js/main.js"></script>

最后的得到如下结果:

'WWW.BAIDU.COM','huaxue'

这种方式缺点很明显:首先会发送多个请求,其次引入的js文件顺序不能搞错,否则会报错

使用require.js

RequireJS是一个工具库,主要用于客户端的模块管理。它的模块管理遵守AMD规范,RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。

接下来介绍AMD规范在浏览器实现的步骤:

  1. 下载require.js,并引入
    • 官网:http://www.requirejs.cn/
    • github:https://github.com/requirejs/requiresjs
      然后将require.js导入项目:js/libs/require.js
  2. 创建项目结构
|-js
  |-libs
    |-require.js
    |-jquery.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html
  1. 定义require.js的模块代码
//dataService.js文件
//定义没有依赖的模块
define(funciton(){
	let msg = 'www.baidu.com';
	function getMsg(){
		return msg.toUpperCase()
	}
	return { getMsg }//暴露模块
})

//alerter.js文件
//定义有依赖的模块
define(['dataService'],function(dataService){
	let name = 'huaxue';
	function showMsg(){
		alert(dataService.getMsg()+','+name)
	}
	//暴露模块
	return { showMsg }
})
//main.js文件
(function (){
	require.config({
		baseUrl: 'js/',//基本路径,出发点在根目录下
		paths:{
			//映射:模块标识名:路径
			alerter:'./modules/alerter',//此处不能写成alerter.js会报错
			dataService: './modules/dataService'
		}
	})
	require(['alerter'],function(alerter){
		alerter.showMsg()
	})
})()

//index.html文件
<!DOCTYPE html>
<html>
	<head>
		<title>Modular Demo</title>
	</head>
	<body>
		<!-- 引入require.js并制定js主文件的入口-->
		<script data-main='js/main' src="js/libs/require.js"></script>
	</body>
</html>
  1. 页面引入jquery.js模块
    在index.html引入
<script data-main="js/main" src="js/libs/jquery.js"></script>
  1. 引入第三方库
//alerter.js文件
define(['dataService','jquery'],function(dataService,$){
	let name = 'Tom'
	function showMsg(){
		alert(dataService.getMsg()+','+name)
	}
	$('body').css('background','green')
	//暴露模块
	return { showMsg }
})

//main.js文件
(function(){
	require.config({
		baseUrl:'js/',//基本路径,出发点在根目录下
		paths: {
			//自定义模块
			alerter: './modules/alerter',//此处不能写成alerter.js,会报错
			dataService: './modules/dataService',
			//第三方库模块
			jquery:'./libs/jquery'
		}
	})
	require(['alerter'],function(){
		alerter.showMsg()
	})
})()

上例是在alerter.js文件中引入jQuery第三方库,main.js文件也要有相应的路径配置。

总结

通过两者的比较,我们可以得出AMD模块定义的方法非常清晰,不会污染全局环境,能够清楚地显示依赖关系。AMD模式可以用于浏览器环境,并且允许非同步加载模块,也可以根据需要动态加载模块。

好啦~AMD就介绍到这里啦,感谢友友们的阅读,有问题欢迎评论区讨论哟!
JS模块化规范之AMD_第1张图片

你可能感兴趣的:(前端,javascript,前端,开发语言)