AMD 简介
前端开发在近一两年发展的非常快,JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了,这些框架都在尝试着解决一些前端开发中的共性问题,但是实现又不尽相同。在这个背景下,CommonJS 社区诞生了,为了让前端框架发展的更加成熟,CommonJS 鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD(Asynchronous Module Definition)就是其中的一个规范。
传统 JavaScript 代码的问题
让我们来看看一般情况下 JavaScript 代码是如何开发的:通过script标签来载入 JavaScript 文件,用全局变量来区分不同的功能代码,全局变量之间的依赖关系需要显式的通过指定其加载顺序来解决,发布应用时要通过工具来压缩所有的 JavaScript 代码到一个文件。当 Web 项目变得非常庞大,前端模块非常多的时候,手动管理这些全局变量间的依赖关系就变得很困难,这种做法显得非常的低效。
AMD 的引入
AMD 提出了一种基于模块的异步加载 JavaScript 代码的机制,它推荐开发人员将 JavaScript 代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的 JavaScript 代码好处很明显,各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载 JavaScript 代码,使 Web 页面上其他不依赖 JavaScript 代码的 UI 元素,如图片、CSS 以及其他 DOM 节点得以先加载完毕,Web 页面加载速度更快,用户也得到更好的体验。
CommonJS 的 AMD 规范中只定义了一个全局的方法,如清单 1 所示。
清单 1. AMD 规范
define(id?, dependencies?, factory);
该方法用来定义一个 JavaScript 模块,开发人员可以用这个方法来将部分功能模块封装在这个 define 方法体内。
id 表示该模块的标识,为可选参数。
dependencies 是一个字符串 Array,表示该模块依赖的其他所有模块标识,模块依赖必须在真正执行具体的 factory 方法前解决,这些依赖对象加载执行以后的返回值,可以以默认的顺序作为 factory 方法的参数。dependencies 也是可选参数,当用户不提供该参数时,实现 AMD 的框架应提供默认值为 [“require”,”exports”,“module”]。
factory 是一个用于执行改模块的方法,它可以使用前面 dependencies 里声明的其他依赖模块的返回值作为参数,若该方法有返回值,当该模块被其他模块依赖时,返回值就是该模块的输出。
CommonJS 在规范中并没有详细规定其他的方法,一些主要的 AMD 框架如 RequireJS、curl、bdload 等都实现了 define 方法,同时各个框架都有自己的补充使得其 API 更实用。
下面:我将举一个很简单的require.js的模块化使用:
首先看我这个demo的文件路径:
<a href="https://img-blog.csdn.net/20150211115148526"></a>
模块一:student.js
define(function(){
return {
createStudent: function(name,gender){
return {
name: name,
gender: gender
};
}
};
});
模块二:class.js
define(function(){
var allStudents = [];
return {
classID: '001',
department: 'computer',
addToClass: function(student) {
allStudents.push(student);
},
getClassSize: function() {
return allStudent.length;
}
};
});
模块三: manager.js 依赖模块一、二
define(['student','class'],function(student,cls){
return {
addNewStudent: function(name,gender) {
cls.addToClass(student.createStudent(name,gender));
},
getClassSize: function() {
return cls.getClassSize();
}
};
});
测试:main.js
// require(['student','class'],function(student,cls){
// cls.addToClass(student.createStudent('jack','male'));
// cls.addToClass(student.createStudent('lucy','female'));
// console.log(cls.getClassSize());
// });
require(['manager'],function(m){
m.addNewStudent('jack','male');
m.addNewStudent('lucy','female');
console.log(m.getClassSize());
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="require.js" data-main="main"></script>/**记得引进require.js**/
<title>require学习</title>
</head>
<body>
<p>请查看控制台</p>
</body>
</html>
这是我自己学习AMD,require.js的开始,希望跟大家一起交流学习,共同进步!