JS模块化规范之AMD

2023-12-20 18:14:41

JS模块化规范之AMD

模块规范

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就介绍到这里啦，感谢友友们的阅读，有问题欢迎评论区讨论哟！
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_45364386/article/details/135087438
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。