理解前端模块概念：CommonJs与ES6Module

前言

现代前端开发每时每刻都和模块打交道。例如，在项目中引入一个插件，或者实现一个供全局使用组件的JS文件。这些都可以称为模块。

在设计程序结构时，不可能把所有代码都放在一起。更为友好的组织方式时按照特定的功能将代码拆分为多个代码片段，每个片段实现一个功能或者一个特定的目的，然后通过接口的方式组合在一起。这就是模块思想。

JavaScript里的模块

众所周知，JavaScript在早期是没有模块这一概念。唯有通过srcipt标签将多个js文件一个个的插入在HTML中。当项目越来越大时，这种方式会导致很多问题：

  • 需要手动维护JavaScript的加载顺序。因为通常script之间会有很多依赖关系，但这种关系都是隐式的，除非一个个去查看注释（如果没有注释，那就...），否则很难指明谁依赖谁。

  • 命名冲突。所有script文件所定义的所有内容都由全局作用域共享。一个人开发还好，碰上多人协作开发，那就是灾害。

  • 如果script数量太多，这也会影响页面加载。因为script标签都需要向服务器请求资源，过多的请求会严重降低渲染的速度。

而模块化就能很好的解决以上问题。

何为模块

模块是使用不同方式加载的JS文件。这种不同模式很有必要，因为它与脚本有着非常不同的语义，在ES6的模块中有着下列的语义：

  • 模块自动运行在严格模式下。

  • 在模块的顶层作用域创建的变量，不会被自动添加在共享的全局作用域中，它们之后在各自的模块顶层作用域下生存。

  • 通过导入导出的语句，可以非常清晰的指明模块的依赖关系。

这些差异代表了JS代码加载与执行方面的显著改变。

模块的发展

从2009年开始，JavaScript社区开始对模块化不断进行尝试，并依次出现了AMD、CommonJs、CMD等解决方案。

Nodejs是CommonJs规范的主要实践者，所以也是这几个方案里面使用最广泛的方案。但这些都只是由社区提出的规范，并不能算语言本身的特性。

到了2015年，ECMAScript6.0正式定义了JavaScript模块标准。

CommonJs

JavaScript在2009年提出了CommonJs规范，包含了模块、文件、IO、控制台在内的一系列标准。并且nodejs实现了CommonJS中的一部分，并在其基础上进行了一些调整。现在我们所说的CommonJs其实是Nodejs中的版本，并非它的原始定义。

CommonJs最初只为服务器端服务的。因为它定义的两个主要概念：

  • require函数，用于导入；

  • module.exports变量，用于导出；

这两个关键字，浏览器都不支持。直到社区出现了诸如browserify编译库将commonjs编译成为浏览器所能支持的语法。这就意味着客户端代码可以遵循Commonjs标准来编写了。

不仅如此，借助Nodejs的npm包管理器，开发人员还可以获取社区上的优秀代码库，或者将自己的代码发布出去以供需要的人使用。这种方式使CommonJs在前端开发中逐渐流行了起来。

模块

CommonJs规范中规定了每一个文件都是一个模块。使用require导入的文件会形成一个属于自身的模块作用域，这样就不会在进行变量以及函数声明时会污染全局作用域。所有的变量和函数都只有模块自身能访问，对外不可见的。

举例：

// foo.js
var name = 'foo';

// bar.js
var name = 'bar';
require('./foo.js');
console.log(name); // bar

在bar.js中通过require函数加载foo.js。运行之后输出的结果是‘bar’，这就说明了foo.js中的变量声明并不会影响bar.js。每个文件都拥有自己的作用域。

导出

导出是一个模块对外暴露自身的唯一方式。在CommonJs中，通过module.exports可以导出模块中的内容。

举例:

module.exports = {
    name: 'foo'
}

CommonJs模块内部会有一个module对象用于存放当前模块的信息，可以理解为在每个模块的最开始中定义了以下对象：

var module = {};
// ...
module.exports = {};

CommonJs也支持另一种导出方式：exports。

exports.name = 'foo'

在实现上，这段代码与上面的module.exports没有不同，其内在机制是将exports指向了module.exports。可以简单的理解为CommonJs在每个模块的开头默认添加了以下代码:

var module = {
    exports: {}
}
var exports = module.exports;

因此，为export.name赋值相当于在module.exports对象上添加了一个name属性。

也很容易看出exports与module.exports只是指向同一个对象。所以对exports进行赋值操作，使其指向新的对象，就会失效了。

举例:

exports = {
    name: 'foo'
}

此时name属性并不会被导出。

另外这两个方法，并不能一起运用。因为使用module.exports赋值就相当于使其指向新的对象。之前的exports赋值都会失效。

导入

CommonJs使用require函数进行导入操作。

举例:

// foo.js
module.exports = {
    sayname: function () {
        console.log('foo');
    }
};

// bar.js
var sayname = require('./foo.js').sayname;
sayname(); // foo

在bar.js中导入了foo.js，并调用了它的sayname函数。

当require一个模块时会有两种情况：

  • 模块是第一次被require加载。这时会首先执行该模块，然后导出内容。

  • 模块是曾经被require加载过。这时会直接导出执行得到的结果。

举例：

// foo.js
console.log('running foo.js')
exports.name = 'foo';

// bar.js
var firstname = require('./foo').name;
console.log('firstname:', firstname); 

var lastname = require('./foo').name;
console.log('lastname:', lastname);

输出的是：

running foo.js
fistname:foo

lastname:foo

从上面代码看有两个地方都require了foo文件，但从结果看，只运行了一遍foo.js。

module对象中有一个loaded属性用于记录该模块是否被加载过。默认值为false，当模块第一次被加载时，会赋值为true，后面再次加载时会检查module.loaded是否为true，如果是，则直接返回结果，并不会再次执行代码。

require函数可以接受表达式，借助这个特性可以动态地制定模块的加载路径。

举例：

var path = ['foo.js', 'bar.js'];
path.forEach(name => {
    require('./' + name);
})

ES6Module

CommonJs可以说是比较好的解决了模块的问题，但这些都只是由社区提出的规范，并不能算语言本身的特性。

到了2015年，ECMAScript6.0正式定义了JavaScript模块标准。从此 JavaScript 语言才具备了模块这一特性。

模块

将前面CommonJs的例子，用ES6Module方式改写。

// foo.js
export default {
    sayname: function () {
        console.log('foo');
    }
};

// bar.js
import foo from './foo.js'
foo.sayname(); // foo

ES6Module也是将每个文件作为一个模块，每个模块拥有自身的作用域，不同的是导入、导出语句。import和export也是作为保留关键字在ES6版本加入了进来，而且ES6Module会自动采用严格模式。

导出

在ES6Module中使用export命令来导出模块。export有两种形式：

  • 命名导出

  • 默认导出

1、命令导出 一个模块可以有多个命名导出，有两种不同的写法：

// 1
export const name = 'foo';

// 2
const name = 'foo';
export { name }

可以通过as关键字对变量重命名。

例如：

const name = 'foo';
export { name as nickname }

2、默认导出

默认导出只能有一个：

export default {
    name: 'foo'
}

可以将export default理解为对外输出一个名为default的变量。

导入

ES6Module使用import语法导入模块。

举例：

// foo.js
export const name = 'foo';
// bar.js
import { name } from './foo'
console.log(name)

加载带有命令导出的模块时，import后面要跟一对大括号来将导入的变量名包裹起来，并且这写变量名需要与导出的变量名完全一致。导入变量的效果相当于在当前作用域下声明了这些变量，并且不可以对齐进行修改。

与命令导出类似，也可以通过as关键字对导入的变量重命名。

举例：

// foo.js
export const name = 'foo';
// bar.js
import { name as nickname } from './foo'
console.log(nickname)

// 也可以通过整体导入的方法
import * as name from './foo'
console.log(name.name)

默认导入的例子：

// foo.js
export default {
    name: 'foo'
}

// bar
import name from './foo'
console.log(name.name)

CommonJs与ES6Module的区别

对模块依赖的处理区别

CommonJs与ES6Module最本质的区别在于前者对模块依赖的解决是动态的，而后者是静态的。

  • 动态：模块依赖关系的建立是发生在代码运行阶段；

  • 静态：模块依赖关系的建立是发生在代码编译阶段；

在CommonJs中，当模块A加载模块B时，会执行B的代码，将其module.exports对象作为require函数的返回值进行返回。并且requrie的模块路径可以动态指定，支持传入一个表示式，甚至可以使用if语句判断是否加载某个模块。所以CommonJs模块被执行前，并没有办法确定明确的依赖关系，模块的导入，导出发生在代码的运行阶段。

ES6Module的导入、导出语句都是声明式的，不支持导入的路径是一个表达式，并且导入、导出语句必须位于模块的顶层作用域。在ES6代码的编译阶段就可以分析出模块的依赖关系。

导入模块值的区别

在导入一个模块时，对于CommonJs来说是得到了一个导出值的拷贝；而在ES6Module中则是值的动态映射，并且这个映射是只读的。

举例：

// foo
var count = 0;
module.exports = {
    count: count,
    add: function (a, b) {
        count++;
        return a+b;
    }
}

// bar
var count = require('./foo').count;
var add = require('./foo').add;

console.log(count); // 0
add(2,3);
console.log(count); // 0

count += 1;
console.log(count); // 1(拷贝值可以更改)

bar中的count是对foo中count的一份值拷贝，因此在调用add函数时，虽然更改了foo中count的值，但是并不会对bar中导入值造成更改。

另一方面拷贝值可以进行更改。

使用ES6Module进行改写

// foo
let count = 0;
const add = function (a,b) {
    count++;
    return a+b;
}
export { count, add }

// bar
import { count, add } from './foo';
console.log(count); // 0
add(2,3);
console.log(count); // 1（实时反映foo中count的值）

count++; // 报错 count is read-only

可以将映射关系理解为一面镜子，从镜子中可以实时观察到原有的事物，但不能操作镜子中的影像。

循环依赖的区别

CommonJs中循环依赖的例子：

// foo
const bar = require('./bar')
console.log('来自bar：', bar);
module.exports = 'foo';

// bar
const foo = require('./foo');
console.log('来自foo：', foo);
module.exports = 'bar;

// index
require('./foo')

在控制台输出:

来自foo：()
来自bar：bar

首先来梳理执行流程：

  • index文件中引入了foo，此时开始执行foo中的代码；

  • foo第一句导入了bar，这是foo不会继续向下执行，而是进入了bar的内部。

  • 在bar中又引入了foo，这里产生了循环依赖。但并不会再次执行foo，而是直接导出返回值，也就是module.exports。但由于foo未执行完，导出值是默认的空对象，因此当bar执行到console.log时，打印出来的是空对象。

  • bar执行完毕，foo继续向下执行直到流程结束。

使用ES6Module重写上面例子：

// foo
import bar from './bar';
console.log('来自bar：', bar);
export default 'foo'

// bar
import foo from './foo'
console.log('来自foo：', foo);
export default 'bar'

// index
import foo from './foo'

结果是: 来自foo: undefined 来自bar：bar

在bar中同样无法得到foo正确的导出值，只不过和CommonJS默认导出一个空对象不同，这里获取到的是undefined。

结尾

模块是程序设计的重要概念，希望上述内容能让你了解到前端模块的概念。详细的用法搜索官网或者书籍进行学习。书籍推荐

作者：zhangwinwin
链接：理解前端模块概念：CommonJs与ES6Module
来源：github

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,542评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,596评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,021评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,682评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,792评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,985评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,107评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,845评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,299评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,441评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,072评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2赞 350