版权声明:本文章可转载,转载请注明本文地址,谢谢~ https://blog.csdn.net/weixin_43307658/article/details/89345322
模块化开发之AMD规范
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
概念
AMD(Asynchronous Module Definition),异步模块定义:它是在浏览器端实现模块化开发的规范。由于该规范不是原生
js
支持的,使用AMD规范进行开发的时候需要引入第三方的库函数,也就是鼎鼎大名的RequireJS
RequireJS
RequireJS
主要解决了两个问题:
- 多个
js
文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器js
加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
定义模块
RequireJS
定义了一个define
函数,用来定义模块
语法:
1 |
define([id], [dependencies], factory) |
参数:
- id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
- dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖必须在真正执行具体的
factory
方法前解决 - factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值
1 |
// mod1.js |
模块的加载
加载模块需要使用
require()
函数
语法:
1 |
require([dependencies], function(){}) |
参数:
- dependencies:字符串数组,该模块的依赖
- function:
Function
类型,所依赖的模块都加载成功之后,回调,依赖的模块会以参数的形式传入该函数,从而在回调函数内部就可以使用这些模块
1 |
|
require()
函数加载依赖模块是异步加载,这样浏览器就不会失去响应
AMD模式开发
AMD模式开发的简单三层结构(基础库/UI层/应用层):
- 定义无依赖的模块
1 |
// base.js |
- 定义有依赖的模块
1 |
// ui.js |
1 |
// page.js |
- 定义数据对象模块
1 |
// data.js |
- 具名模块
1 |
define('index', ['data','base'], function(data, base) { |
- 包装模块
1 |
define(function(require, exports, module) { |
dependencies
是可选参数,当用户不提供该参数时,实现AMD
的框架应提供默认值为[“require”,”exports”,“module”]
文章推荐
参考文章
- 玉伯大大在知乎上对于AMD 和 CMD 的区别的回答
- github上的AMD
- 一位道友的AMD和RequireJS初识 – 模块加载系列