小烜同学 小烜同学
首页
  • 前端文章

    • Vue 源码解析
    • Redux 源码解析
  • Docker
  • Kubernetes
  • LeetCode 解题集
  • 技术杂谈
  • Linux
  • Npm
  • Yarn
  • Docker
  • Git
  • 云服务器
  • Elasticsearch
  • Nginx
  • CSS
  • MongoDB
  • 翻译文章
  • 友情链接
  • 前端相关
  • Nginx
关于
  • 分类
  • 标签
  • 归档
GitHub

小烜同学

小学一年级的前端菜鸟
首页
  • 前端文章

    • Vue 源码解析
    • Redux 源码解析
  • Docker
  • Kubernetes
  • LeetCode 解题集
  • 技术杂谈
  • Linux
  • Npm
  • Yarn
  • Docker
  • Git
  • 云服务器
  • Elasticsearch
  • Nginx
  • CSS
  • MongoDB
  • 翻译文章
  • 友情链接
  • 前端相关
  • Nginx
关于
  • 分类
  • 标签
  • 归档
GitHub
  • LeetCode 解题集
  • 技术杂谈

    • 2018 年终总结
    • 你会 babel 插件么?我也不会
    • Base64 编码
    • 数字证书那些事
    • FCC 2018 前端技术大会总结
    • es6 模块化与 node 的模块化
      • 概述
      • 差异
      • ES6 模块化
    • 换个角度学 Webpack
    • Grid 布局发车啦
    • Http 缓存那些事
    • 试炼之石 - Performance
    • 给你的项目装个探头 — Sentry
    • 一道面试题引发的血案
    • Timing Attack
    • 大话 SPA router
    • 流“忙”
    • JS 看不懂的 []+{}
    • 怎么写一个高逼格的 README
    • immutable 和 React 的那些事儿
  • 技术
  • 技术杂谈
小烜同学
2020-02-20

es6 模块化与 node 的模块化

在平常的工作中,我们经常使用到模块化开发,那么具体这两者之间有什么区别呢?我们接下来一起探索一下。

# 概述

在 ES6 之前,主要的模块化方案是 CommonJS(服务器) 和 AMD 规范(浏览器),ES6 模块化的出现成为了浏览器和服务器通用的模块解决方案。

ES6 的设计思想是尽量的静态化,这样在编译的时候就能够确定模块间的依赖关系,并进行优化。而 CommonJS 和 AMD 都只能在运行时确定这些东西。

# 差异

  1. 模块的加载方式

    // CommonJS 是将整个模块加载进来
    const { a, b, c } = require('./m.js');
    // 相当于
    const _m = require('./m.js');
    const a = _m.a;
    const b = _m.b;
    const c = _m.c;
    
    // ES6 是静态加载,在编译时已经完成了模块的加载,也就是说它只加载了这三个变量,其他的都没有加载
    const { a, b, c } = require('./m.js');
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
  2. 模块的加载结果

    // CommonJS 输出的是值的拷贝,也就是说,一旦输入一个值,模块再变化也不会影响
    // ES6 模块输出的是值的引用
    
    1
    2

# ES6 模块化

import 命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行,比如我们这样写就会报错。

if (flag) {
  import X from './x.js';
}
1
2
3

报错的原因就是,import 执行是在编译时,这时候不会去执行 if,所以把 import 放在里面毫无意义。这样做虽然看起来效率高,但是我们不能够做到按需加载,这就是一个很大的问题,但是 require 就能够做到。

if (path) {
  const module = require('./m.js');
}
1
2
3

所以说如果 ES6 模块化要替代 CommonJS,就需要提供这么一种机制,因为这是一种非常常见的需求。

所以,在后来的标准中有一个提案,import() 函数,他就能做到动态加载,他返回的是一个 Promise 对象。

编辑
#模块化
FCC 2018 前端技术大会总结
换个角度学 Webpack

← FCC 2018 前端技术大会总结 换个角度学 Webpack →

最近更新
01
学点 Docker (二) - 容器镜像
07-09
02
Kubernetes 是什么
07-09
03
解决 Docker 容器无法输入中文
07-09
更多文章>
Theme by Vdoing | Copyright © 2018-2020 小烜同学 | MIT Licensed
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式