AMD规范&RequireJs基础

最新推荐文章于 2021-07-30 09:03:39 发布
A__17
最新推荐文章于 2021-07-30 09:03:39 发布
阅读量645
点赞数
分类专栏： javascript 文章标签： AMD 异步模块加载机制 RequireJs
本文链接：https://blog.csdn.net/wodewutai17quiet/article/details/52263841
版权
javascript 专栏收录该内容
14 篇文章 0 订阅
订阅专栏
AMD简介：
	AMD：Asynchronous Module Definition，即异步模块加载机制。
	AMD中唯一的API(define函数)：
	
		define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
			参数：
				module-name: 模块标识，可以省略。
				array-of-dependencies: 所依赖的模块，可以省略。
				module-factory-or-object: 模块的实现，或者一个JavaScript对象。
			说明：
				当define函数执行时，它首先会异步的去调用第二个参数中列出的依赖模块，
				当依赖的所有模块都载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统该模块可用，也就通知了依赖于自己的模块自己已经可用了。

	AMD规范的实现框架：
		RequireJS，NodeJS，Dojo，Jquery


RequireJs：
	
	1）概念：用于客户端的模块管理，让客户端的代码由一个个模块组成，实现模块的异步或动态加载，从而提高代码的性能和可维护性。
		优点：
			1> 不使用RequireJS：页面在<head></head>标签中依次加载多个js文件：
				1)加载的时候，浏览器会停止网页渲染，加载的文件越多，网页失去响应的时间就会越长加载的时候，浏览器会停止网页渲染，加载的文件越多，网页失去响应的时间就会越长。
				2)js文件之间存在依赖关系，因此必须保证正确的加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
			2> 使用RequireJS：
				1)实现js文件的异步加载，极大地缩短了网页失去响应的时间。
				2)管理模块之间的依赖性，便于代码的编写和维护。
	
	2）核心思想：
		通过define()方法，将代码定义为模块；
		通过require.config()方法配置require.js的运行参数；
		通过require()方法，实现代码的模块加载。
		
	3）核心API：
		1> define方法：
			1)定义一个非独立模块：define(['module1', 'module2'], function(m1, m2){});
				说明：
					第一个参数：该模块所依赖的其他模块组成的数组。
						注意：一般情况下，module1模块和module2模块指的是当前目录下的module1.js文件和module2.js文件，相当于['./module1', './module2']
					第二个参数：是一个函数，当前面数组的所有成员都加载成功后，它将被调用。它的参数和数组的成员一一对应。
						注意：该函数必须返回一个模块对象，供其他模块调用。
				eg：
					define(['module1', 'module2'], function(m1, m2){
						return {
							method : function(){
								m1.methodA();
								m2.methodB();
							}
						};
					});
					
			2)定义一个不依赖其他模块的独立模块：define(模块对象);
			
				eg：定义一个包含method1和method2这两个方法的模块。
					方式一：
						define(function(){
							return {method1:function(){}, method2:function(){}};
						});
						说明：该函数的返回值就是要定义的模块对象;可以在函数体内添加一些模块的初始化代码。			
					方式二：
						define({method1:function(){}, method2:function(){}});
					
		2> require.config({baseUrl:"", paths:{}, shim:{}})方法：配置require.js的运行参数。
		
			说明：
				1)该方法写在配置文件中：amd.config.js、amd.config.debug.js
				2)该方法接受一个对象作为参数，即：{baseUrl:"", paths:{}, shim:{}}
					参数对象的属性：
						baseUrl：RequireJS以一个相对于baseUrl的地址来加载模块。
						paths：指定各个模块的位置。
							注：
								1)这个位置可以是同一个服务器上的相对位置，也可以是外部网址。
								2)可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置。
								3)指定本地文件路径时，可以省略文件最后的js后缀名。
						shims：专门用来配置不兼容(非AMD规范)的模块，为那些没有使用define()定义的模块来声明依赖关系
							注：
								deps：是一个数组，表明该模块的依赖性。
								exports：输出的变量名，即外部调用这个模块时的名称。
			eg：amd.config.js文件：
			
				require.config({
					baseUrl:"",
					paths:{
						"jquery":"scripts/jquery.min",
						"jxn.model": "scripts/jxn.web.core.model",
						"jxn.util": "scripts/jxn.web.core.util",
						"jquery.ui.draggable":"plugins/jquery-ui/jquery.ui.draggable"
					},
					shim:{
						"jquery.ui.draggable": {
							deps: [
								"jquery.ui.core",
								"jquery.ui.widget",
								"jquery.ui.mouse"
							], 
							exports: "jquery.ui.draggable"
						}
					}
				});
		
		3> require方法：require(['moduleX', 'moduleY'], function(x, y){}, function(error){});

			说明：
				第一个参数：该模块所依赖的其他模块组成的数组。
					注意：一般情况下，module1模块和module2模块指的是当前目录下的module1.js文件和module2.js文件，相当于['./module1', './module2']
				第二个参数：是一个函数，当前面数组的所有成员都加载成功后，它将被调用。它的参数和数组的成员一一对应。
				第三个参数：处理错误的回调函数，接受一个error对象作为参数。
			eg：
				require(['moduleX', 'moduleY'], function(x, y){
					x.methodA();
					y.methodB();
				});

	4）几点说明：
		1)RequireJS认为所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，
		2)如果服务器端采用JSONP模式，则可以直接在require方法中调用：
			注：必须将参数"callback"的值设为为"define"
				require(["http://someapi.com/foo?callback=define"],function (data) {
						//The data object will be the API response for the JSONP data call.
						console.log(data);
					}
				);

	5）应用开发
		1> 配置RequireJS：
			1)在web项目中创建配置文件：
				一般模式：webcontent\scripts\amdconfig\amd.config.js
				调试模式：webcontent\scripts\amdconfig\amd.config.debug.js
			2)编写配置文件amd.config.js和amd.config.debug.js：即完成require.config({});方法的编写。
		2> 自定义模块：
			1)在web项目中创建webcontent\scripts\module\jxnexample.js
			2)编写自定义模块对应的js文件，即完成define(['module1', 'module2'], function(m1, m2){});的编写。
		3> 使用已经定义好的模块：
			1)在web项目中创建页面及对应的js控制器:
				webcontent\html\test.html
				webcontent\controller\test.js
			2)引入RequireJS，并且指定页面的主模块。
			
				在test.html页面中引入RequireJS：在body的最后一行，即</body>标签的上一行引入RequireJS：
					<body>
						...
						<script src="webcontent/js/require.js?debug=true" data-main="webcontent/controller/test.js"></script>
					</body>
					注：data-main：指定网页程序的主模块，即test.js会被require.js第一个加载。
						debug=true表示开启调试模式。
					
				在test.js中编写控制器的逻辑
					require(["jquery", "jxn.model", "jxn.util", "jquery.ui.draggable"],function($, jxnModel, jxnUtil){
						
						$(function(){
							var time = jxnUtil.getCurrentTime();		
							alert(time);
						});
							
					}