js模块化

老刘大话前端

一. 什么是模块化

模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。
js中的模块化方法,大致分为以下几个:commonJS, amd, cmd, umd, esModule。下面我们来逐个击破。

二. CommonJS

commonjs规范为js提供一个美好的愿景-希望js能够在任何地方都去运行。它的定义也十分简单,主要分为:模块引用、模块定义、模块标识。
1. 模块引用

在commonjs中,使用require方法引用模块

2. 模块定义
在模块中,上下文提供了exports对象,用来导出模块的方法或变量。另外还存在一个module对象,它代表着模块本身。在node.js中,一个文件就是一个模块。具体导出方式:
module.exports.test = () => {
  return "test";
}
3. 模块标识

模块标识实际上就是require方法的参数,即引入模块的路径。

commonjs的优点:
  • 所有代码都运行在模块作用域,不会污染全局
  • 模块的加载只需要运行一次,以后都从缓存中加载
  • 模块加载是同步的,按照代码中出现的顺序
  • 简单易用
commonjs缺点:
  • 同步加载的方法,不适合浏览器环境。浏览器环境瓶颈在于带宽,服务器环境瓶颈在于cpu和内存。浏览器环境需要异步加载模块。
  • 非es官方标准
实现:node.js

三. AMD

amd规范是commonjs的延伸,amd全名:异步模块定义,针对浏览器设计。定义一套模块异步加载规范,来解决commonjs同步加载问题。
它的规范只有1个定义:
define(id: string, dependencies: Array<string>, factory: Function)

举个🌰

定义:
define("module", ["module1", "module2"], function(m1, m2) {
  return "test";
})
使用:
require(["module", "../file"], function(module, file) { /* ... */ });
与commonjs区别:
  1. amd使用define定义模块,而在node实现中是隐式包装。
  2. 内容需要通过返回(return)的方式实现导出。
AMD优点:
  • 解决了浏览器异步加载模块问题
AMD缺点:
  • 是commonjs模块化规范的一种妥协方式
  • 非es官方标准
实现:require.js

四. CMD

cmd规范由玉伯提出,与amd主要区别在于:定义模块和依赖模块引入的部分。
  1. amd需要声明模块的时候,指定所有依赖。
  2. cmd更接近node.js对commonjs规范的定义:define(factory),依赖部分, cmd可以动态引入:
define(function(require, exports, module) {
})
CMD优点:
  • 更容易在node.js中运行
  • 延迟执行
CMD缺点:
  • 依赖 SPM 打包,模块的加载逻辑偏重
  • 非es官方标准

五. UMD

为了让同一个模块,能够在浏览器环境和服务器环境能够兼容。umd是commonjs和amd的结合体。其代码如下:
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define([], factory);
    } else if (typeof exports === 'object') {
        // commonjs,如 nodejs
        module.exports = factory();
    } else {
        // root == window or global
        root.returnExports = factory();
  }
}(this, function () {
    return {};
}));
UMD优点:
  • 统一浏览器端和服务器端规范
  • 非es官方标准

六. ES Module

es module 是es官方提供的js模块化标准方案,相对社区上的amd, cmd,umd等,它是标准。其设计思想,尽量静态化,这样编译时,才能确定依赖关系。这也是webpack 摇树能够实现的关键原因。
es module使用 import 导入模块。 使用 export 导出模块。
举个🌰
// a.js
let foo = "hello";
export foo;
// b.js
import { foo } from "a";
console.log(foo); // hello
commonjs与es module区别:
commonjses module
导出值拷贝导出值,模块内部值变化不影响引用值import是值的引用
运行机制运行时加载依赖,加载的是一个对象编译时加载,加载的是模块的接口定义,在代码静态解析时会生成
阅读 217
1 声望
1 粉丝
0 条评论
你知道吗?

1 声望
1 粉丝
宣传栏