JavaScript 模块化简析

更新日期: 2020-02-01阅读: 1.6k标签: 模块

前言

关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS 、CMD AMD 这些名词,以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范,Sea.js 遵循 CMD 规范。自然直观的代码组织方式,依赖的自动加载……”

作为前端新手,我表示实在是一脸懵逼,理解不能。按照我一贯的风格,介绍一个东西之前总得解释一下为什么需要这个东西。


JavaScript 基础

做客户端的同学对 OC 的 #import "classname"、Swift 的 Module 以及文件修饰符 和 Java 的 import package+class 模式应该都不陌生。我们习惯了引用一个文件就是引用一个类的模式。然而在 JavaScript 这种动态语言中,事情又有一些变化,举个例子说明:

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body>
</html>
// index.js
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = 'Hello bestswifter';
}

HTML 中的 <script> 标签可以理解为 import,这样按钮的 onclick 事件就可以调用定义在 index.js 中的 onPress 函数了。

假设随着项目的发展,我们发现点击后的文字需要动态生成,并且由别的 JS 文件生成,那么简单的 index.js 就无法胜任了。我们假设生成的内容定义在 math.js 文件中:

// math.js
function add(a, b) {
    return a + b;
}

按照客户端的思维,此时的 index.js 文件应该这样写:

// index.js
import "math.js"
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}

很不幸,JavaScript 并不支持 import 这种写法,也就是说在一个 JS 文件中根本无法引用别的 JS 文件中的方法。正确的解决方案是在 index.js 中直接调用 add 方法,同时在 index.html 中引用 math.js:

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="math.js"></script>
  </head>
  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body>
</html>
// index.js
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}

可以看到这种写法并不优雅, index.js 对别的 JS 文件中的内容并没有控制权,能否调用到 add 方法完全取决于使用自己的 HTML 文件有没有正确引用别的 JS 文件。


初步模块化

刚刚所说的痛点其实可以分为两种:

  1. index.js 无法 import,依赖于 HTML 的引用
  2. index.js 中无法对 add 方法的来源做区分,缺少命名空间的概念

第一个问题留在后面解答,我们先着手解决第二个问题,比如先把函数放到一个对象中,这样我们可以暴露一个对象,让使用者调用这个对象的多个方法:

//index.js 
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = math.add(1, 2);
}
//math.js
var math = {
    base: 0,
    add: function(a, b) {
        return a + b + base;
    },
};

可以看到在 index.js 中已经可以指定一个简易版的命名空间了(也就是 math)。但目前还有一个小问题,比如 base 这个属性会被暴露给外界,也可以被修改。所以更好的方式是将 math 定义在一个闭包里,从而隐藏内部属性:

// math.js
var math = (function() {
    var base = 0;
    return {
        add: function(a, b) {
            return a + b + base;
        },
    };
})();

到目前为止,我们实现了模块的定义和使用。不过模块化的一大精髓在于命名空间,也就是说我们希望自己的 math 模块不是全局的,而是按需导入,这样一来,即使多个文件暴露同名对象也不会出问题。就像 node.js 中那样,需要暴露的模块定义自己的 export 内容,然后调用方使用 require 方法。

其实可以简单模拟一下 node.js 的工作方式,通过增加一个中间层来解决: 首先定义一个全局变量:

// global.js
var module = {
    exports: {}, // 用来存储所有暴露的内容
};

然后在 math.js 中暴露对象:

var math = (function() {
    var base = 0;
    return {
        add: function(a, b) {
            return a + b + base;
        },
    };
})();
module.exports.math = math;

使用者 index.js 现在应该是:

var math = module.exports.math;
function onPress() {
    var p = document.getElementById('hello');
    // math
    p.innerHTML = math.add(1, 2);
}


现有模块化方案

上述简单的模块化方式有一些小问题。首先,index.js 必须严格依赖于 math.js 执行,因为只有 math.js 执行完才会向全局的 module.export 中注册自己。这就要求开发者必须手动管理 js 文件的加载顺序。随着项目越来越大,依赖的维护会变得越来越复杂。

其次,由于加载 JS 文件时,浏览器会停止渲染网页,因此我们还需要 JS 文件的异步按需加载。

最后一个问题是,之前给出的简化版模块化方案并没有解决模块的命名空间,相同的导出依旧会替换掉之前的内容,而解决方案则是维护一个 “文件路径 <–> 导出内容” 的表,并且根据文件路径加载。

基于上述需求,市场上出现了很多套模块化方案。为啥会有多套标准呢,实际上还是由前端的特性导致的。由于缺乏一个统一的标准,所以很多情况下大家做事的时候都是靠约定,就比如上述的 export 和 require。如果代码的提供者把导出内容存储在 module.exports里,而使用者读取的是 module.export,那自然是徒劳的。不仅如此,各个规范的实现方式、使用场景也不尽相同。

CommonJS

比较知名的规范有 CommonJS、AMD 和 CMD。而知名框架 Node.js、RequireJS 和 Seajs 分别实现了上述规范。

最早的规范是 CommonJS,Node.js 使用了这一规范。这一规范和我们之前的做法比较类似,是同步加载 JS 脚本。这么做在服务端毫无问题,因为文件都存在磁盘上,然而浏览器的特性决定了 JS 脚本需要异步加载,否则就会失去响应,因此 CommonJS 规范无法直接在浏览器中使用。

AMD

浏览器端著名的模块管理工具 Require.js 的做法是异步加载,通过 Webworker 的 importScripts(url); 函数加载 JS 脚本,然后执行当初注册的回调。Require.js 的写法是:

require(['myModule1', 'myModule2'], function (m1, m2){
    // 主回调逻辑
    m1.printName();
    m2.printName();
});

由于这两个模块是异步下载,因此哪个模块先被下载、执行并不确定,但可以肯定的是主回调一定在所有依赖都被加载完成后才执行。

Require.js 的这种写法也被称为前置加载,在写主逻辑之前必须指定所有的依赖,同时这些依赖也会立刻被异步加载。

由 Require.js 引申出来的规范被称为 AMD(Asynchronous Module Definition)。

CMD

另一种优秀的模块管理工具是 Sea.js,它的写法是:

define(function(require, exports, module) {
    var foo = require('foo'); // 同步
    foo.add(1, 2); 
    ...
    require.async('math', function(math) { // 异步
        math.add(1, 2);
    });
});

Sea.js 也被称为就近加载,从它的写法上可以很明显的看到和 Require.js 的不同。我们可以在需要用到依赖的时候才申明。

Sea.js 遇到依赖后只会去下载 JS 文件,并不会执行,而是等到所有被依赖的 JS 脚本都下载完以后,才从头开始执行主逻辑。因此被依赖模块的执行顺序和书写顺序完全一致。

由 Sea.js 引申出来的规范被称为 CMD(Common Module Definition)。


ES 6 模块化

在 ES6 中,我们使用 export 关键字来导出模块,使用 import 关键字引用模块。需要说明的是,ES 6 的这套标准和目前的标准没有直接关系,目前也很少有 JS 引擎能直接支持。因此 babel 的做法实际上是将不被支持的 import 翻译成目前已被支持的 require。

尽管目前使用 import 和 require 的区别不大(本质上是一回事),但依然强烈推荐使用 import 关键字,因为一旦 JS 引擎能够解析 ES 6 的 import 关键字,整个实现方式就会和目前发生比较大的变化。如果目前就开始使用 import 关键字,将来代码的改动会非常小。


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

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 及 核心原理实现

点击更多...

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