浅谈 AMD 模块化规范

概述

AMD(Asynchronous Module Definition),异步模块定义,主要用于浏览器,该规范原生 js 不支持,使用 AMD 规范进行开发的时候需要引入第三方的库,即 RequireJS

定义模块

RequireJS 定义了一个 define 函数,用来定义模块

define([id], [dependencies], factory)

参数:

参数名 是否必须 描述
id 字符串类型,定义模块标识(模块名),如果没有提供参数,默认为文件名
dependencies 字符串数组,表示该模块依赖的其他模块,这些模块会在 factory 方法执行前加载完毕
factory 初始化模块需要执行的函数或对象或一个其他类型的值

常规用法,依赖了其他模块,factory 中的参数与 dependencies 应一一对应

// test.js
define([ 'module1', 'module2' ], function (module1, module2) {
  return {
    count: module1.number + module2.number;
  }
});

// main.js
require([ 'test' ], function (test) {
  // ...
})

具名模块,依赖了其他模块,factory 中的参数与 dependencies 应一一对应

// main.js
define('myModule', [ 'module1', 'module2' ], function (module1, module2) {
  return {
    count: module1.number + module2.number;
  }
});

require([ 'myModule' ], function (myModule) {
  // ...
})

常规写法,不依赖其他模块

// person.js
define(function () {
  return {
    name: 'johnhan',
    age: 24
  };
});

// main.js
require([ 'person' ], function (person) {
  // ...
})

第三个参数类型可以是 Object,所以上面的代码可简化为

// person.js
define({
  name: 'johnhan',
  age: 24
});

// main.js
require([ 'person' ], function (person) {
  // ...
})

dependencies 是可选的,默认为 [ "require", "exports", "module" ] 三个内置模块,关于这三个内置模块的介绍可点此传送门

// person.js
define(function (require, exports, module) {
  return {
    name: require('test').name,
    age: 24
  };
});

// main.js
require([ 'person' ], function (person) {
  // ...
})

所以如果依赖比较多,可以使用内置的 require 模块

// 参数比较多,这样写比较麻烦
define(
  [ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
  function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){
    // ...
  }
);

// 可以这样写,会简单很多
define(
  function (require) {
    var dep1 = require('dep1'),
        dep2 = require('dep2'),
        dep3 = require('dep3'),
        dep4 = require('dep4'),
        dep5 = require('dep5'),
        dep6 = require('dep6'),
        dep7 = require('dep7'),
        dep8 = require('dep8');
    // ...
  }
});

加载模块

RequireJS 定义了一个 require 函数,用来加载模块(注意和内置 require 模块的区别)

require(modules, factory, [error])

参数:

参数名 是否必须 描述
modules 字符串数组,表示要加载的其他模块
factory 工厂方法,模块加载完后需要执行的函数

常规用法

require(['a', 'b'], function (a, b) {
  // ...
});

带错误回调

require(['a', 'b'], function (a, b) {
  // ...
}, function (error) {
  // ...
});
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1068.html
京ICP备19044523号-1