语言►JavaScript►模块化方案►AMD

如何在RequireJS中定义模块

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/20/%E5%A6%82%E4%BD%95%E5%9C%A8RequireJS%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%A8%A1%E5%9D%97/

摘要

本文主要讲述了：

  1. 对象
  2. 回调函数
  3. 具有依赖关系的对象
  4. 具有依赖关系的函数
  5. CommonJS 包装函数
  6. 带有名称的模块

正文

模块不同于传统脚本文件之处就在于：模块可以避免污染全局作用域。

RequireJS 通过define()来定义模块。

对象

假如模块本身没有依赖项，且模块只是简单的对象。那么可以把对象作为参数直接传递给define()函数。

示例：

1
2
3
4
define({
  color: 'black',
  size: 'unisize',
});

回调函数

假如模块本身没有依赖，但是需要在定义模块之前做一些工作。那么可以向define()传递一个回调函数。

示例：

1
2
3
4
5
6
define(function () {
  return {
    color: 'black',
    size: 'unisize',
  };
});

具有依赖关系的对象

假如模块需要依赖，那么define()的第一个参数应该是依赖名数组，第二个参数是回调函数。

在所有依赖项都被加载之后，回调函数才会执行。

示例：

1
2
3
4
5
6
7
8
9
10
define(['./cart', './inventory'], function (cart, inventory) {
  return {
    color: 'blue',
    size: 'large',
    test() {
      console.log(cart);
      console.log(inventory);
    },
  };
});

具有依赖关系的函数

RequireJS 也允许定义函数格式的模块。

示例：回调函数返回了一个函数而非对象。

1
2
3
4
5
6
define(['my/cart', 'my/inventory'], function (cart, inventory) {
  return function () {
    console.log(cart);
    console.log(inventory);
  };
});

CommonJS 包装函数

如果开发者希望在 ReqiureJS 中复用 CommonJS 模块的代码，可以使用 CommonJS 包装函数。

示例：

1
2
3
4
5
6
define(function (require, exports, module) {
  module.exports = {
    color: 'black',
    size: 'unisize',
  };
});

带有名称的模块

带名称的模块通常由优化工具生成，开发者可以显式设置模块的名称，但这会使得可移植性降低。如果将模块文件移动到另外一个目录就需要重命名。因此不推荐开发者定义带名称的模块，而交给优化工具自动处理。

示例：

1
2
3
4
5
6
define('demo', function () {
  return {
    color: 'black',
    size: 'unisize',
  };
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/20/%E5%A6%82%E4%BD%95%E5%9C%A8RequireJS%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%A8%A1%E5%9D%97/

本文对你有帮助？请支持我

支付宝
微信