前端模块规范化(1) AMD

最新推荐文章于 2024-06-13 13:06:10 发布

Melody°

最新推荐文章于 2024-06-13 13:06:10 发布

阅读量191

点赞数 1

分类专栏： Web前端学习

本文链接：https://blog.csdn.net/weixin_43846213/article/details/89432600

版权

Web前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、AMD：它是 RequireJS 在推广过程中对模块定义的规范化产出，它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。
（1）引入 require.js
（2）模块的定义：define()
（3）模块的导入：require()
例：假如创建了三个js，它们的关系与作用如下在这里插入图片描述
1、math.js不依赖于任何文件

define(function() {     
	var PI = 3.1415926;
	function multiple(num1,num2) {
		return num1 * num2;
	} 
	function square(n) {
//		return n * n;
		return Math.pow(n,2);
	} 
	return {  
		PI: PI,
		multiple: multiple,
		square: square
	}
})

2、s.js依赖于math.js定义的数学运算方法

define(['./math'],function(m1){   //[]里面指定要依赖的模块
	function circle(r){
		return m1.multiple(m1.PI,m1.square(r));
	}
	return {
		s_circle:circle
	}
})

3、main.js依赖于s.js定义的计算图形面积的方法

(function(){	
	require(['./s'],function(s){
		alert(s.s_circle(10));
	})
})()

4、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--//data-main的意思是指向入口文件main.js-->
		<script src="require.js" data-main="./main.js"></script>
	</body>
</html>