AMD(Asynchronous Module Definition) 即异步模块定义，是一个在浏览器端模块化开发的规范。

规范

模块定义

语法：define([依赖模块名...], 回调函数);

举例：module1.js

define(function () {    //暴露一个对象    return {        msg: 'module1',        show: function () {            console.log(this.msg);        }    };});

举例：module2.js

/** * 模块2，define声明依赖模块1 * 模块1作为形参传入回调 */define(["module1"], function (module1) {    let msg = 'module2';    function show() {        console.log(msg + "依赖" + module1.msg);        module1.show();    }    //暴露一个方法    return {show};});

举例：module3.js

/** * 模块3，define声明依赖第三方库 */define(["jquery"], function ($) {    $('body').css('background', 'pink');    let msg = 'module3';    function show() {        console.log(msg);    }    return {show};});

引入模块

语法：require([依赖模块...], 回调函数);

实现

require.js

require.js(官网：https://requirejs.org/)是AMD规范的一个库。

定义模块

见前面module1，module2，module3的定义。

引入模块

main.js

requirejs.config({    baseUrl: 'js/lib',  //相对项目根目录的路径    //定义模块名和文件的对应关系，省略末尾.js    paths: {        jquery: 'jquery.min-3.4.1',        angular: 'angular.min',        module1: 'module1',        module2: 'module2',        module3: 'module3'    },    //angular是非AMD规范的模块，需要shim中配置模块的exports    shim: {        'angular': {            exports: 'angular'        }    }});//导入模块2、模块3，模块1也被加载require(["module2", "module3", "angular"], function (module2, module3, angular) {    module2.show();    module3.show();    console.log(angular);});

目录结构




javascript define的用法 js define()_js define函数


总结

  • 优点：适合在浏览器环境中异步加载模块。可以并行加载多个模块
  • 缺点：提高了开发成本，并且不能按需加载，而是必须提前加载所有的依赖。