《nodejs跨栏》webpack篇

发布时间 2023-06-07 15:04:23作者: Fusio

AMD规范是什么?

参考链接:https://blog.csdn.net/qq_43267592/article/details/103918703
1、定义
AMD规范全称是Asynchronous Module Definition,即异步模块加载机制。它完整描述了模块的定义,依赖关系,引用关系以及加载机制。
2、应用
AMD对应的就是很有名的RequireJS。下面看一下如何使用require.js

(1)下载require.js,https://requirejs.org/docs/download.html
(2)引用js

<script src="js/require.js" data-main="js/main"></script>
//data-main属性的作用是,指定网页程序的主模块,它会在require.js加载完成后首个加载

(3)语法

define([id], [dependencies], factory)
//参数:
//id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
//dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖必须在真正执 行具体的factory方法前解决
//factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值。

例如:

define(['jquery'], function () {
   // 方法
   function myFunc(){};
   // 暴露公共方法
   return myFunc;
   });

(4)模块写法
一般情况下主模块都会依赖于其他模块,此时则需要使用AMD规范定义的的require()函数

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
				// 代码
});

// require()函数接受两个参数。
// 第一个参数是一个数组,表示所依赖的模块,上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’],即主模块依赖这三个模块;
// 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。

加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

例子:假定主模块main.js依赖jquery、underscore和backbone这三个模块,就可以这样写:

require(['jquery', 'underscore', 'backbone'], function (Backbone){
   // 代码
});

require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。