可维护性，每一个模块都是独立的。良好的设计能够极大的降低项目的耦合度。以便于其能独立于别的功能被整改。至少维护一个独立的功能模块，比维护一坨凌乱的代码要容易很多。

减少全局变量污染，前端开发的初期，我们都在为全局变量而头疼，因为经常会触发一些难以排查且非技术性的 bug。当一些无关的代码一不小心重名了全局变量，我们就会遇到烦人的“命名空间污染”的问题。在模块化规范没有确定之前，其实我们都在极力的避免于此。（后文会介绍）

可复用性，前端模块功能的封装，极大的提高了代码的可复用性。这点应该就不用详细说明了。想想从 npm 上找 package 的时候，是在干啥？

方便管理依赖关系，在模块化规范没有完全确定的时候，模块之间相互依赖的关系非常的模糊，完全取决于 js 文件引入的顺序。粗俗！丝毫没有技术含量，不仅依赖模糊且难以维护。

编码: 将不同的功能封装成不同的全局函数

问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系，模块之间的关系模糊

//函数1
function fn1(){
  //statement
}
//函数2
function fn2(){
  //statement
}

let module1 = {
  let tag : 1,
  let name:'module1',
  
  fun1(){
    console.log('this is fun1')
  },
  
  fun2(){
    console.log('this is fun2')
  }
}

module1.fun2();

一定程度上优化了命名冲突，降低了全局变量污染的风险

有一定的模块封装和隔离，并且还可以进一步语义化一些

并没有实质上改变命名冲突的问题

外部可以随意修改内部成员变量，还是容易产生意外风险

let global = 'Hello, I am a global variable :)';

(function () {
  // 在函数的作用域中下面的变量是私有的

  const myGrades = [93, 95, 88, 0, 55, 91];

  let average = function() {
    let total = myGrades.reduce(function(accumulator, item) {
      return accumulator + item}, 0);

    return 'Your average grade is ' + total / myGrades.length + '.';
  }

  let failing = function(){
    let failingGrades = myGrades.filter(function(item) {
      return item < 70;});

    return 'You failed ' + failingGrades.length + ' times.';
  }

  console.log(failing());
  console.log(global);

// 需要暴露的api
return {
  // something
}
}());

// 控制台显示：'You failed 2 times.'
// 控制台显示：'Hello, I am a global variable :)'

// module.js文件
(function(window, $) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
    $('body').css('background', 'red')
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar }
})(window, jquery)

 // index.html文件
  <!-- 引入的js必须有一定顺序 -->
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="module.js"></script>
  <script type="text/javascript">
    myModule.foo()
  </script>

实现了基本的封装

只暴露对外的方法操作，利用闭包实现了类似 public 和 private 的概念

模块依赖关系模糊

模块与模块之间不好管理

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

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

// example.js
let x = 5;
let addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

let example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6

console.log('开始加载了') // 会输出 开始加载了

function run (val) {
  console.log(val)
}

以文件为一个单元模块，代码运行在模块作用域内，不会污染全局变量

同步加载模块，在服务端直接读取本地磁盘没问题，不太适用于浏览器

模块可以加载多次，但是只会在第一次加载时运行，然后在加载，就是读取的缓存文件。需清理缓存后才可再次读取文件内容

模块加载的顺序，按照其在代码中出现的顺序

导出的是值的拷贝，这一点和 ES6 有着很大的不同（后面会介绍到）

function Module(id = '', parent) {
  this.id = id;
  this.path = path.dirname(id);
  this.exports = {};
  this.parent = parent;
  updateChildren(parent, this, false);
  this.filename = null;
  this.loaded = false;
  this.children = [];
}

//实例化一个模块
var module = new Module(filename, parent);

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

异步加载模块，不会造成因网络问题而出现的假死

显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入

在模块开始时，加载所有所需依赖

使用模块

define(factory);

define 是一个全局函数，用来定义模块，参数factory可以是对象、字符串、函数

factory 为对象、字符串时，表示模块的接口就是该对象、字符串。比如可以如下定义一个 JSON 数据模块：

define({ "foo": "bar" });

也可以通过字符串定义模板模块：

define('I am a template. My name is {{name}}.');

factory 为函数时，表示是模块的构造方法。

执行该构造方法，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和 module：

define(function(require, exports, module) {
  // 模块代码
});

使用sea.js

/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

关于 sea.js 的使用，仔细看文档，其实还是有很多知识点的。但是鉴于我们着实现在使用不多（我也不熟），所以这里也就参考网上优秀文章和自己实践，抛砖引玉。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        //浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

　　在 ES Module 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES Module 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES Module 的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

　　CommonJS 和 AMD 模块，其本质是在运行时生成一个对象进行导出，称为“运行时加载”，没法进行“编译优化”，而 ES Module 不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。这称为“编译时加载”或者静态加载，即 ES Module 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES Module 模块本身，因为它不是对象。

由于 ES Module 是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

特点

静态编译

输出的值引用，而非值拷贝

import 只能写在顶层，因为是静态语法

9、CommonJs、ESM 区别

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

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

import 命令会被 JS 引擎静态分析，优先于模块内的其他内容执行

export 命令会有变量声明提升的效果,所以import 和 export 命令在模块中的位置并不影响程序的输出。

异步加载模块，不会造成因网络问题而出现的假死

显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入

在模块开始时，加载所有所需依赖