[前端]模块化开发

为什么需要模块化开发

随着时代的发展,系统功能的不断增加,导致代码体量的不断增加,随着代码的增加,引发了一系列问题,例如：代码的耦合性，代码的加载顺序，代码的命名冲突问题等，这些问题导致了模块化的开发已经成为不可避免的趋势。

模块化开发的目标

模块化开发的目标，是为了解决代码开发中遇到的各种问题，但是前端开发的关注点不是完全基于文件类型分离的，前端工程化的最终目的都是为了能够更好地维护代码，因此这些目标必将成为模块化开发的优点，也是模块开发演化过程中不断追求的结果

• 避免变量污染、命名冲突等
• 提高代码复用率
• 提高代码维护性
• 方便依赖关系的管理

模块化开发的演化

主要是在模块化实践过程中,为实现模块化而出现的不同方案

文件划分方案

随着代码的不断增多,即使将每个功能和相关的一些状态数据单独存放到不同的文件当中,让每个文件像是是一个独立的模块,但是在使用的时候,通过 script 标签引入文件,导致所有模块都暴露在全局范围内工作,引起一系列问题：

• 污染全局作用域
• 命名冲突问题
• 无法管理模块之间的依赖关系

对象封装方案

将变量或者函数等模块成员封装在对象中,当要使用的时候就调用这个对象的属性,但是仍旧存在问题：

• 没有私有属性,模块成员可以在外部被访问或修改
• 无法管理模块之间的依赖关系

立即执行函数

采用该方式为模块提供私有成员,因为在 javascript 中,只有函数内部的子函数才能读取局部变量,因此函数提供的私有作用域可确保函数中私有成员的安全,私有成员只能通过闭包的形式访问

在 javascript 中,只有函数内部的子函数才能读取局部变量

模块化开发规范

随着对模块化开发需求的增加,模块化开发形成了一些列的标准,并且这些标准也是在不断的发展的,目前的模块化开发标准包括：AMD 规范,CMD 规范,CommonJS 规范,ES6 规范。

模块化开发，肯定包括定义模块与使用模块；相同文件中可以直接使用定义的模块;在不同的文件中使用该模块是需要先导入该模块的，而被导入的模块必须是允许被导入的，也即该模块是被导出的。

所以下面将分别介绍不同规范是如何定义模块，导出与导入模块的，

CommonJS 规范

根据 CommonJS 规范实现的库或 API 是同步加载模块,CommonJS 是服务器端规范。

在服务器端,模块文件都存在本地磁盘,读取速度快,因此同步加载在服务器端不会有影响；

在浏览器端,由于网速等问题的影响,可能文件的加载需要较长时间,所以 AMD、CMD 异步加载方案更合理；

特点

1. 所有的代码都在独立的模块作用域中,不会污染全局作用域
2. 模块加载的顺序,按照其在代码中的引入顺序加载。
3. 模块可以多次加载,但是只会在第一次加载时运行一次,运行结果被缓存。之后加载从缓存中直接读取,清空缓存重新运行。
4. module.exports 属性输出是值拷贝。一旦操作完成,模块内发生的任何变化不会影响到已经输出的值。

定义模块

通过 module 对象来定义一个模块；

module 属性说明

module = {
  id: "", //模块的识别符，通常是带有绝对路径的模块文件名。
  filename: "", //模块的文件名，带有绝对路径。
  loaded: "", //返回一个布尔值，表示模块是否已经完成加载。
  parent: "", //返回一个对象，表示调用该模块的模块。
  children: "", //返回一个数组，表示该模块要用到的其他模块。
  exports: "" //表示模块对外输出的值。
};

全局对象 global

CommonJS 规范的全局对象是 global(类似于浏览器环境下的 window 对象),因此 global 对象上的变量或方法对其它文件是可获取的。

例如,

global.a = 1;

变量 a 被添加到了 global 上,在任意文件内都可以访问,该方式在模块化开发中是极不推荐的

导出模块(变量或方法)

模块导出的可以是变量或方法，CommonJS 通过 module.exports 暴露变量与方法；

let a = 1;

function getA() {
  //moduleA
  return a++;
}

module.exports.getA = getA;
//等价
exports.getA = getA;
//因为 exports = module.exports;

exports = ‘Hello World’||{}, exports 直接赋值,该操作切断了被赋值的 exports 与 module.exports 的联系,因此不可直接赋值!!! module.exports 可直接赋值

const a = 1;

module.exports = function () {
  return a;
};

导入模块

通过 require 来引入其它模块暴露的值；

let a = require("./moduleA"); //2
let b = require("./moduleA"); //2 使用被缓存的结果

通过 require,同一个模块只有第一个加载时运行一次,然后运行结果被缓存，其它的加载都使用被缓存的结果

AMD 规范

AMD,Async Module Define 规范就是为了解决 CommonJS 实时加载,同步执行所带来的的弊端而出现的,它兼容 CommonJS 规范,因此符合 CommonJS 规范的模块可以被 AMD 规范正确导入。

至于什么是同步与异步,不了解的可以自行查询

根据 AMD 规范实现的库或 API 是异步加载模块,异步加载即非阻塞加载,更加适合浏览器端

特点

1. 模块的加载是异步的

定义模块

通过 define 对象来定义一个模块；

define(id, [dependencies], factory);

• id:可选,即模块名,该参数省略情况下自动使用文件名
• dependencies:可选,依赖列表,数组每项是依赖的模块路径或模块名
• factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值

导出模块(变量或方法)

通过 define 来导出模块，模块的导出内容可以是变量，也可以是方法;

独立模块：不需要依赖任何其他模块;

导出对象

对象作为参数定义模块，直接作为模块导出；

//moduleA.js
define({
  printName: printName,
  getList: function () {
    return printName;
  }
});

函数作为参数定义模块，该函数必须有返回值;

函数返回对象:

//moduleA.js
define(function () {
  return {
    printName: printName,
    getList: function () {
      return printName;
    }
  };
});

导出函数

函数作为参数定义模块，该函数必须有返回值;

函数返回函数:

define(function () {
  //moduleA.js
  return function () {
    return printName;
  };
});

导出符合 CommonJs 规范的接口

非独立模块：需要依赖任何其他模块

define([moduleName], function (require, exports, module, moduleName) {
  const a = require("a");
  const b = require("b");
  exports.action = function () {};
  //exports={}直接赋值方式会失去与module.export的联系，因此该方式不可取
  module.exports = {
    name: 10,
    action: function () {
      console.log("输出内容");
    }
  };
});

依赖 require, exports, module 的引入可以被省略

exports 直接赋值,该操作会切断被赋值的 exports 与 module.exports 的联系,因此不可直接赋值!!! module.exports 可直接赋值

导入模块

require 导入方式

//使用模块 异步加载
require(["moduleA"], function (moduleA) {
  moduleA.printName();
});

define 导入方式

//引入依赖模块moduleA
//moduleA的输出值作为函数的参数
define(["moduleA", "jquery", "Base64"], function (moduleA, $, Base64) {
  return {
    printName
  };
});

CMD 规范

CMD,Common Module Definition 规范与 AMD 规范非常相似,但是相对来说更严格。CMD 规范定义的模块在 AMD 中也是合法的,它的基本语法也有点类似于 CommonJS,因此CMD兼容AMD与CommonJs

AMD 规范所推崇的是依赖前置,即提前声明好需要依赖的模块,CMD 推崇就近依赖,一般不在 define 中写依赖,而是使用 require 引入依赖

定义模块

define(id, [dependencies], factory);

• id:可选,即模块名,该参数省略情况下自动使用文件名,CMD 推崇一个文件一个模块
• dependencies:依赖列表,CMD 推崇就近依赖,一般不在 define 中写依赖
• factory:回调函数
  function(require,exports,module){}
  • require 用来获取其他模块提供的接口
  • exports 用来向外提供模块接口
  • module 存储模块相关联的一些属性和方法

导出模块(变量或方法)

exports 是指向 module.exports 的变量。

module 即模块对象,同 CommonJS。

define(function (require, exports, module) {
  var $ = require("jquery.js");
  $("div").addClass("active");
  // module.id == 'module2';
  //exports.name=$ 对外导出接口
});

注意,与 AMD 一样,尽管 CMD 也使用 require 导入模块,但它也是异步加载的。CMD 规范也会提前扫描回调函数,预下载依赖的模块,然后才会执行回调函数,以防止代码在执行过程中被阻塞

导入模块

require 导入其它模块

UMD 规范

UMD,Universal Module Define,通用模块定义。它是一种适配 CommonJS、AMD 和 CMD 的模块定义标准

UMD 规范在主函数中会通过检查 define、exports 这两个变量,来判断当前使用的模块化规范

!(function (root, name, factory) {
  // 是否在AMD规范下
  if (typeof define === "function" && define.amd) {
    define(name, factory);
    // 是否在CommonJS或CMD规范下
  } else if (typeof exports === "object") {
    module.exports = factory();
    // 没有使用模块化
  } else {
    root[name] = factory();
  }
})(this, "run", function () {
  function run() {
    return "this is run function!";
  }
  return run;
});

且 UMD 规范无论是在 CommonJS、AMD 还是 CMD 规范下运行该代码,都可以输出符合所用模块规范的模块,用以判断当前的规范,从而实现了代码的兼容性

UMD 没有对 ES6 的模块规范进行处理,因为 ES6 模块规范是语言层面的规范,未来会得到浏览器的原生支持。一旦 ES6 规范得到原生支持,UMD 规范以及另外三个规范都可能被取代

ES6 规范

传统的模块模式基于闭包,ES6 的模块规范是 JavaScript 语言层面的模块规范,目标是取代上述所有规范,成为前端领域的标准模块规范。未来的浏览器将原生支持该模块规范,也是未来推荐的开发语言

特点

1. 输出值引用

ES 模块化规范中导出的值是引用,所以不论何时修改模块中的变量,在外部都会有体现。

2. 静态化

ES6 模块规范的一大特点是静态化,编译的时候就确定模块之间的关系,每个模块的输入和输出变量也是确定的。静态化是为了实现 Tree Shaking 提升运行性能。

Tree Shaking:减少 web 项目中 js 的无用代码,以达到减少用户打开页面的等待的时间,缩短渲染的时间,提升响应的用户体验。

DCE:减少无用代码的操作叫做 DCE(Dead Code Elemination),DCE 意味着更小的体积,缩减 bundle size,从而获得更好的用户体验

ES6 模块化导出有 export 和 export default,建议用 export,因为 export default 导出整体对象,不利于 Tree Shaking,export default 导出的结果可以随意命名,不利于代码的管理

局限性

1. import 依赖必须在文件的顶部
2. export 导出变量类型严格限制
3. import 依赖不能动态确定

导出与导入模块

通过 export 暴露变量与方法；

通过 import 来引入其它模块暴露的值；

const a = 1;
const fn = () => {};
export { a, fn };

import { a, fn } from "./index"; //""内是js文件路径

规范的实践案例

主流的开发语言使用的方案

规范	库	说明
CommonJS 规范	Nodejs、Browerify	CommonJS 规范的实践
AMD 规范	RequireJS	AMD 规范的最好实现
CMD 规范	SeaJS	CMD 规范的实践

目前，库陆续开发出了ES6版本，但是仍旧存在很多使用以前规范的库版本

规范的混合使用

符合 ES6 规范的模块，简称 ESM，这种是未来的发展趋势，所以很多库的开发都在朝着 ES6 的方向靠拢；如果开发新的项目，也推荐使用ES6规范

Node.js 则是使用的 CommonJS 模块，简称 CJS。

这两种模块不兼容。

那么在 Nodejs 如何加载或运行使用 ESM 呢？

看到网上有提供说是在 package 文件夹中添加 type:"module"的值，因为本人本地测试 node api 服务，与 vue web 项目是在一个目录下，而如果设置 vue 中存在上述 type:"module"属性，会导致 vue 项目启动失败

发现可以将文件后缀名改为.mjs，文件将使用ESM规范解析，js 文件 node 会以 type 的设置值解读。

具体的混合使用的方法可以查看ES6与CJS的混合开发