前端模块化知识梳理

更新日期: 2022-03-13阅读: 1k标签: 模块

一、背景

作为前端开发,模块化我们已经耳熟能详,我们平时接触到的 ES6 的 import,nodejs中的require他们有啥区别?

我们也听过CommonJS、CMD、AMD、ES6模块系统,这些都有什么联系呢?

本文将对这些问题进行归纳总结,可以对模块化有个清晰的认识。

二、为何需要模块化?

1. 起源

最开始 js 是没有模块化的概念的,就是普通的脚本语言放到 script 标签里,做些简单的校验,代码量比较少。

随着ajax的出现,前端可以请求数据了,做的事情更多了,逻辑越来越复杂,就会出现很多问题。

1.1 全局变量冲突

因为大家的代码都在一个作用域,不同人定义的变量名可能重复,导致覆盖。

var num = 1; // 一个人声明了
...
var num = 2; // 其他人又声明了

1.2 依赖关系管理麻烦

比如我们引入了3个js文件,他们直接相互依赖,我们需要按照依赖关系从上到下排序。

<script src='./one.js'></script>
<script src='./two.js'></script>
<script src='./three.js'></script>

如果文件有十多个,我们需要理清楚依赖关系再手动按顺序引入,会导致后续代码更加难以维护。

2. 早期解决方案

针对前面说的问题,其实也有一些响应的解决方案。

2.1 命名空间

命名空间是将一组实体、变量、函数、对象封装在一个空间的行为。这里展现了模块化思想雏形,通过简单的命名空间进行「块儿」的切分,体现了分离和内聚的思想。著名案例 「YUI2」。

// 示例:
const car = {
  name: '小汽车',
  start: () => {
    console.log('start')
  },
  stop: () => {
    console.log('stop')
  }
}

上面示例可以发现可能存在问题,比如我们修改了car的name,会导致原有的name被更改

car.name = '测试'
console.log(car) // {name: '111', start: ƒ, stop: ƒ}

2.2 闭包

再次提升模块化的解决方案,利用闭包使污染的问题得到解决,更加纯粹的内聚

moduleA = function() {
   var name = '小汽车';
   return {
      start: function (c){
         return name + '启动';
      };
   }
}()

上面示例中function内部的变量就对全局隐藏了,达到了封装的目的。但是模块名称暴露在全局,还是存在命名冲突的问题。

下面这个基于 IIFE 和闭包实现的效果:

// moduleA.js
(function(global) {
  var name = '小汽车';
  function start() {};
  global.moduleA = { name, start };
})(window)

上面表达式中的变量 name 不能直接从外部访问。

综上,所以模块化解决的问题有哪些:

  • 解决命名污染,全局污染,变量冲突等问题
  • 内聚私有,变量不能被外面访问到
  • 怎么引入其它模块,怎样暴露出接口给其它模块
  • 引入其他模块可能存在循环引用的问题

三、主流模块化解决方案

1. CommonJS

可以点击 CommonJS规范查看相关介绍。

1)每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

2)CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

3)require方法用于加载模块。

1.1 加载模块

var example = require('./example.js');
var config = require('config.js');
var http = require('http');

1.2 对外暴露模块

module.exports.example = function () {
  ...
}
module.exports = function(x){  
    console.log(x)
}

1.3 Node.js的模块化

说到CommonJS 我们要提一下 Node.js,Node.js的出现让我们可以用JavaScript来写服务端代码,而 Node 应用由模块组成,采用的是 CommonJS 模块规范,当然并非完全按照CommonJS来,它进行了取舍,增加了一些自身的特性。

1)Node内部提供一个Module构建函数。所有模块都是Module的实例,每个模块内部,都有一个module对象,代表当前模块。包含以下属性:

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

2)Node使用CommonJS模块规范,内置的require命令用于加载模块文件。

3)第一次加载某个模块时,Node会缓存该模块。以后再加载该模块,就直接从缓存取出该模块的module.exports属性。所有缓存的模块保存在require.cache之中。

// a.js
var name = 'Lucy'
exports.name = name
// b.js
var a = require('a.js')
console.log(a.name) // "Lucy"
a.name = "hello";
var b = require('./a.js')
console.log(b.name) // "hello"

上面第一次加载以后修改了name值,第二次加载的时候打印的name是上次修改的,证明是从缓存中读取的。

想删除模块的缓存可以这样:

delete require.cache[moduleName];

4)CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。请看下面这个例子。

// a.js
var counter = 3
exports.counter = counter
exports.addCounter = function(a){
    counter++
}
// b.js
var a = require('a.js')
console.log(a.counter) // 3
a.addCounter()
console.log(a.age) // 3

这个例子说明a.js模块加载以后,模块内部的变化就影响不到a.counter了。这是因为a.counter是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动后的值。

2.前端模块化

前面所说的CommonJS规范,都是基于node来说的,所以CommonJS都是针对服务端的实现。为什么呢?

因为CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。

如果是浏览器环境,要从服务器端加载模块,用CommonJS需要等模块下载完并运行后才能使用,将阻塞后面代码的执行,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范,解决异步加载的问题。

2.1 AMD(Asynchronous Module Definition)和 RequireJS

AMD是异步加载模块规范。

RequireJS是一个工具库。主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。

2.1.1 模块定义

1)独立模块(不需要依赖任何其他模块)

//独立模块定义
define({
  method1: function() {}
  method2: function() {}
});  
//或者
define(function(){
  return {
    method1: function() {},
    method2: function() {},
  }
});

2)非独立模块(需要依赖其他模块)

define(['module1', 'module2'], function(m1, m2){
    return {
        method: function() {
            m1.methodA();
            m2.methodB();
        }
    };
});

define方法:

  • 第一个参数是一个数组,它的成员是当前模块所依赖的模块
  • 第二个参数是一个函数,当前面数组的所有成员加载成功后,它将被调用。它的参数与数组的成员一一对应,这个函数必须返回一个对象,供其他模块调用

2.1.2 模块调用

require方法用于调用模块。它的参数与define方法类似。

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

define和require这两个定义模块、调用模块的方法,合称为AMD模式。它的模块定义的方法非常清晰,不会污染全局环境,能够清楚地显示依赖关系。

2.1.3 require.js的config方法

require方法本身也是一个对象,它带有一个config方法,用来配置require.js运行参数。

require.config({
    paths: {
        jquery: [
            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
            'lib/jquery'
        ]
    }
});

参数对象包含:

  • paths 指定各个模块的位置
  • baseUrl 指定本地模块位置的基准目
  • shim 用来帮助require.js加载非AMD规范的库。

2.1.3 CommonJS 和AMD的对比

  • CommonJS一般用于服务端比如node,AMD一般用于浏览器环境,并且允许非同步加载模块,可以根据需要动态加载模块
  • CommonJS和AMD都是运行时加载

2.1.4 运行时加载

简单来讲,就是CommonJS和AMD都只能在运行时才能确定一些东西,所以是运行时加载。比如下面的例子:

// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面代码其实是整体加载了fs模块,生成了一个_fs 的对象,然后从这个对象上读取三个方法。因为只有运行时才能得到这个对象,所以成为运行时加载。

下面是AMD的例子:

// AMD
define('a', function () {
  console.log('a 加载')
  return {
    run: function () { console.log('a 执行') }
  }
})
define('b', function () {
  console.log('b 加载')
  return {
    run: function () { console.log('b 执行') }
  }
})
//运行
require(['a', 'b'], function (a, b) {
  console.log('main 执行')  
  a.run()
  b.run()
})
// 运行结果:
// a 加载
// b 加载
// main 执行
// a 执行
// b 执行

我们可以看到执行的时候,a和b先加载,后面才从main开始执行。所以require一个模块的时候,模块会先被加载,并返回一个对象,并且这个对象是整体加载的,也就是常说的 依赖前置。

2.2 CMD(Common Module Definition) 和 SeaJS

在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范。

Sea.js和 RequireJS 区别在哪里呢?这里有个官方给出的区别。

RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。规范的不同,导致了两者 api 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

这里对AMD和CMD做个简单对比:

  1. AMD 定义模块时,指定所有的依赖,依赖模块加载后会执行回调并通过参数传到这回调方法中:
define(['module1', 'module2'], function(m1, m2) {
       ...
    });
  1. CMD规范中一个模块就是一个文件,模块更接近于Node对CommonJS规范的定义:

define(factory); // factory 可以是一个函数,也可以是一个对象或字符串。

factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外     提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和     module:

define(function(require, exports, module) {
  // 模块代码
});

其中,require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。需要依赖模块时,随时调用require( )引入即可

define(function(require, exports) {
      // 获取模块 a 的接口
      var a = require('./a');
      // 调用模块 a 的方法
      a.doSomething();
    });

下面演示一下CMD的执行

define('a', function (require, exports, module) {
  console.log('a 加载')
  exports.run = function () { console.log('a 执行') }
})
define('b', function (require, exports, module) {
  console.log('b 加载')
  exports.run = function () { console.log('b 执行') }
})
define('main', function (require, exports, module) {
  console.log('main 执行')
  var a = require('a')
  a.run()
  var b = require('b')
  b.run()
})
// main 执行
// a 加载
// a 执行
// b 加载
// b 执行

看到执行结果,会在真正需要使用(依赖)模块时才执行该模块,感觉这好像和我们认知的一样,毕竟我也是这么想的执行顺序,但是看前面AMD的执行结果,是先把a和b都加载以后,才开始执行main的。所以相较于AMD的依赖前置、提前执行,CMD则推崇依赖就近、延迟执行。

2.3 UMD(Universal Module Definition) 通用模块规范

可以看到其实兼容模式是将几种常见模块定义方式都做了兼容处理。

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'  
  ? factory(require('lodash'))  // node, commonJS
  : typeof define === 'function' && define.amd  
      ? define(['lodash'], factory) // amd cmd
      : (
          global = typeof globalThis !== 'undefined'  
              ? globalThis  
              : global || self, factory(global.lodash)
          );
}(this, (function (lodash) { 'use strict';
    ...
})));

2.4 ES6 模块

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

2.4.1 模块导出

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量(函数或类),就必须使用export关键字输出该变量(函数或类)。

1) 导出变量 和 函数

// a.js
// 导出变量
export var name = 'Michael';
export var year = 2010;
// 或者  
// 也可以这样导出
var name = 'Michael';
export { name, year };
复制代码
// 导出函数
export function multiply(x, y) {
  return x * y;
};

2) as的使用

通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

2.4.2 模块引入

1) 使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

// 一般用法
import { name, year} from './a.js';
// as 用法
import { name as userName } from './a.js';

注意:

import命令具有提升效果,会提升到整个模块的头部,首先执行。

下面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的(后面对比CommonJs时会讲到),在代码运行之前。

foo();
import { foo } from 'my_module';

2)整体模块加载

//user.js
export name = 'lili';
export age = 18;
//逐一加载
import { age, name } from './user.js';
//整体加载
import * as user from './user.js';
console.log(user.name);
console.log(user.age);

3)export default 命令

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。

export default function foo() { // 输出
  // ...
}
import foo from 'foo'; // 输入

注意: 正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确
var a = 1;
export default a;
// 错误
// `export default a`的含义是将变量`a`的值赋给变量`default`。
// 所以,这种写法会报错。
export default var a = 1;

2.4.3 ES6模块、CommonJS和AMD模块区别

1) 编译时加载 和 运行时加载

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。所以ES6是编译时加载。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

// CommonJS模块  
let { stat, exists, readFile } = require('fs');  
// 等同于  
let _fs = require('fs');  
let stat = _fs.stat;  
let exists = _fs.exists;  
let readfile = _fs.readfile;
// -----------------
// ES6模块
import { stat, exists, readFile } from 'fs';

CommonJS和ES6模块加载区别:

  • CommonJS 实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。
  • ES6模块 实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载 ”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。

2) 值拷贝 和 引用拷贝

  1. 前面 1.3 Node.js模块化提到了 CommonJS是值拷贝,模块加载完并输出一个值,模块内部的变化就影响不到这个值。因为这个值是一个原始类型的值,会被缓存。
  2. ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
// a.js
export let counter = 3;
export function addCounter() {
  counter++;
}
// b.js
import { counter, addCounter } from './a';
console.log(counter); // 3
addCounter();
console.log(counter); // 4

ES6 模块输入的变量counter是活的,完全反应其所在模块a.js内部的变化。

链接: https://fly63.com/article/detial/11258

ES6模块功能:export和import的加载方式

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

module、export、require、import的使用

module每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。在module中有一个属性exports,即:module.exports。它是该模块对外的输出值,是一个对象。

Node.js - 模块系统

模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

export和export default的区别

export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;

关于export和export default你不知道的事

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!