JS模块化(二):AMD(RequireJS)

最新推荐文章于 2024-02-04 09:32:43 发布

五花毛

最新推荐文章于 2024-02-04 09:32:43 发布

阅读量298

点赞数

分类专栏： JavaScript 文章标签： AMD 模块化 RequireJS

本文链接：https://blog.csdn.net/hanhanyoona/article/details/84869730

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

AMD规范说明:
       Asynchronous Moudle Definition(异步模块定义)
       专门用于浏览器端,模块的加载是异步的
   AMD基本语法
       * 定义暴露模块:
           // 定义没有依赖的模块
           define(function(){
               return 模块
           })
           // 定义有依赖的模块
           define(['module1','module2'],function(m1,m2){
               return 模块
           })
       * 引入使用模块:
           require(['module1','module2'],function(m1,m2){
               使用m1/m2
           })
   AMD实现(浏览器端):
       Require.js

我们先不使用AMD规范实现模块化:

先创建一个目录结构,如下所示:

module1.js内容如下:

// 利用立即执行函数定义模块
// 定义一个没有以来的模块
// 不使用AND规范
// 通过window将模块暴露出去

(function(window){
	let name = 'I am module1';
	function getName(){
		return name;
	}
	window.module1 = {getName}
})(window)

module2.js内容如下:

// 定义一个有依赖的模块 依赖module1

(function(window,module1){
	let msg = 'I am module2';
	function getMsg(){
		console.log(msg , module1.getName())
	}
	window.module2 = {getMsg}
})(window,module1)

app.js 内容如下:

// 相当于主源文件 引入模块
// module1.js 依赖了 module2.js 主源文件只需要引入module2 
(function(module2){
	module2.getMsg()

})(module2)

index.html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>No AMD</title>
</head>
<body>
	<!-- 
		app.js中引入了module2.js  module2.js中引入了module1.js
		所以先引入module1.js 在引入module2.js 最后引入app.js
	 -->
</body>
<script type="text/javascript" src="js/module1.js"></script>
<script type="text/javascript" src="js/module2.js"></script>
<script type="text/javascript" src="app.js"></script>
</html>

结果如下:

没有用AMD规范,index.html就要把每个模块的JS都引入.

下面使用AMD规范实现模块化:

使用RequireJS自定义模块:

创建目录结构如下:
           /-js
           /-libs // 通常放框架的文件
           /-require.js
           /-modules
               /-module1.js
               /-module2.js
           /-main.js // 主源文件
           /-index.html

下载require.js,官网: https://requirejs.org/

module2.js

// 定义没有依赖的模块

define(function(){
	let name = "I am Yoona";
	function getName(){
		return name ;
	}

	// 暴露模块
	return {getName}
})

module1.js:

// 定义一个有依赖的模块

define(['module2'],function(module2){
	let age = 'I am 28';
	function getAge(){
		console.log(module2.getName(), age )
	}
	// 暴露模块
	return {getAge}
})

main.js

(function(){

	// 基本配置 映射模块
	requirejs.config({
		baseUrl:'js/',// 基本的路径 出发点在根目录下 也可以不写
		paths:{ // 配置路径 映射模块 后边不用加 .js  requirejs会自动加上
			module2:'./modules/module2',
			module1:'./modules/module1',
			
		}
	})


	requirejs(['module1'],function(module1){
		module1.getAge();
	})

})()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>RequireJS</title>
</head>
<body>
	
</body>
<!-- 先引入require.js 并指定js的主文件的入口 -->
<script data-main="js/main.js" src="js/libs/require.js"></script>
</html>

结果如下:

接下来使用第三方模块:

比如使用JQ,把jquery.js放入libs文件夹里边

在main.js里边引用jquery模块:

(function(){

	// 基本配置 映射模块
	requirejs.config({
		baseUrl:'js/',// 基本的路径 出发点在根目录下
		paths:{ // 配置路径 映射模块 后边不用加 .js  requirejs会自动加上
			module2:'./modules/module2',
			module1:'./modules/module1',
			jquery:'./libs/jquery-1.11.1'// jquery 必须小写
		}
	})


	requirejs(['module1','jquery'],function(module1,$){
		module1.getAge();
		$('body').html('Yoona')
	})

})()

结果如下所示:

这里需要注意的是,引用jquery模块,映射模块时必须要小写,这是因为jQuery内置支持AMD规范; jquery.js中有想喝么一段代码:

所以注意必须使用小写jquery.

但是,并不是所有的js都内置了AMD规范,比如angular.js

在main.js里面添加angular的配置:

(function(){

	// 基本配置 映射模块
	requirejs.config({
		baseUrl:'js/',// 基本的路径 出发点在根目录下
		paths:{ // 配置路径 映射模块 后边不用加 .js  requirejs会自动加上
			module2:'./modules/module2',
			module1:'./modules/module1',
			jquery:'./libs/jquery-1.11.1',// jquery 必须小写
			angular:'libs/angular'
		},
		
	})


	requirejs(['module1','jquery','angular'],function(module1,$,angular){
		module1.getAge();
		$('body').html('Yoona')
		console.log(angular)
	})

})()

输出angular为undefined,

需要添加配置:

(function(){

	// 基本配置 映射模块
	requirejs.config({
		baseUrl:'js/',// 基本的路径 出发点在根目录下
		paths:{ // 配置路径 映射模块 后边不用加 .js  requirejs会自动加上
			module2:'./modules/module2',
			module1:'./modules/module1',
			jquery:'./libs/jquery-1.11.1',// jquery 必须小写
			angular:'libs/angular'
		},
		shim:{// 是一个单独的配置
			angular:{
				// 暴露angular对象
				exports:'angular'
			}
		}
	})


	requirejs(['module1','jquery','angular'],function(module1,$,angular){
		module1.getAge();
		$('body').html('Yoona')
		console.log(angular)
	})

})()

此时就可以输出angular对象.

五花毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS模块化(二):AMD(RequireJS)

AMD规范说明: Asynchronous Moudle Definition(异步模块定义) 专门用于浏览器端,模块的加载是异步的 AMD基本语法 * 定义暴露模块: // 定义没有依赖的模块 define(function(){ return 模块 ...
复制链接

扫一扫