模块化

模块化本质化就是对变量的管理，是一种提供对外通信接口，进行代码切分/组合的管理方式。其呈现的方式因不同的模块化方案而不同，基本是以文件粒度区分(依据实现颗粒度可以不同）。

我们平时用 node 1.js 执行文件中的js代码是可以的，但是当文件中 import { get } from 'lodash' 导入了其他模块的包，就有进行一个模块化，这个时候就需要将模块化

模块已经成为了代码管理/编译，业务分离的基本单元。

模块化的发展历史

函数时代

模块化混沌时期，组织代码就是靠「经验」，基本就是全局函数各种调用

命名空间

模块化思想雏形初现，通过简单的命名空间进行「块儿」的切分，更分离，和内聚

弥补了全局函数的一些缺点，业界著名案例「YUI2」

巧用闭包

// moduleA.js

(function(global) {

    var name = 'tom' ;

    function getScore() {} ;

    global.moduleA = { name, getScrore } ;

}) (window)



// moduleA.js

(function (global, $) {

// ...

}) (window, Jquery)

现代模块化机制

总的来说，现代模块化机制要解决的问题如下：

命名污染，全局污染，变量冲突等基础问题
内聚且私有，变量不能被外界污染到
怎么引入（依赖）其它模块，怎样暴露出接口给其它模块
最烦人的是依赖顺序问题，还记得以前的 Jquery 问题嘛
上述第三点可能导致的循环引用问题，等边界情况

Commonjs

是sever端进行使用

在服务器端，模块的加载是运行时同步加载的，只有加载完成，才能执行后面的操作。；在浏览器端，模块需要提前编译打包处理。

基本语法

暴露模块：module.exports = value或exports.xxx = value

引入模块：require(xxx),如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径

本质

这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

AMD

AMD 规范的代表是 RequireJS

AMD规范是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。

不管有没有用到该模块都会执行，只要被引用就会执行

AMD Usage

define(id?, depencies?, factory);



define('foo', ['utils', 'bar'], function(utils, bar) {

  utils.add(1, 2);

  return {

    name: 'foo'

  }

})

实现一个符合 AMD 的 rj.js

只是核心能力作为实现，具体：requirejs.org/docs/api.ht…

可以直接配置依赖路径

rj.config({ paths: {

  'jquery': 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'

} });

rj(['jquery'], function(jquery) {
  // ....
})

加载模块

// RequestJs('')

rj(['moduleA'], function(moduleA) {});

定义模块

rj('moduleA', [], function() {

  return 'hello zhuawa!';

})

行为

// RequireJS

define('a', function () {

  console.log('a load')

  return {

    run: function () { console.log('a run') }

  }

})



define('b', function () {

  console.log('b load')

  return {

    run: function () { console.log('b run') }

  }

})



require(['a', 'b'], function (a, b) {

  console.log('main run') // 🔥

  a.run()

  b.run()

})



// a load

// b load

// main run

// a run

// b run

记录一下：

require 的时候加载了依赖的模块

一些可以用来测试的 CDN 地址 :

systemjs -> cdn.bootcdn.net/ajax/libs/s…

lodash -> cdn.bootcdn.net/ajax/libs/l…

CMD

CMD规范的代表是Seajs， CMD规范整合了CommonJS和AMD规范的特点。

AMD 和 CMD

AMD：不管有没有用到该模块都会执行，只要被引用就会执行CMD：只有主模块逻辑有运行到了，才会进行一个执行。

ES6 模块化(esm)

ES modules（ESM）是JavaScript 官方的标准化模块系统。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 模块与 CommonJS 模块的差异

① CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

② CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

rollup.js

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码

Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。

使用 npm install --global rollup 进行安装。

配置文件

注: Dir 是指定一个文件夹，file是指定一个文件

其他：

Code spliing进行代码切分，代码进行按需加载

按需加载的本质就是利用promise进行实现的

模块化

模块化的发展历史

函数时代

命名空间

巧用闭包

现代模块化机制