前端模块化知识

前言

JavaScript初衷：实现简单的页面交互逻辑，寥寥数语即可；
随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀

问题：
这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码。

浏览器加载

HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。

<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
  // module code
</script>

<!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>
标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

defer与async的区别是：

defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；

async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行。

<script type="module" src="./foo.js"></script>

标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。

一旦使用了async属性，<script type="module">就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。

演化轨迹

require/exports 出生在野生规范当中，什么叫做野生规范？即这些规范是 JavaScript 社区中的开发者自己草拟的规则，得到了大家的承认或者广泛的应用。比如 CommonJS、AMD、CMD 等等。import/export 则是名门正派。TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。

require/exports 相关的规范由于野生性质，在 2010 年前后出生。AMD、CMD 相对命比较短，到 2014 年基本上就摇摇欲坠了。

CommonJs用在服务器端，AMD和CMD用在浏览器环境。
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）

Browsersify、Webpack 一开始的目的就是打包 CommonJS 模块。

CommonJS 作为 Node.js 的规范，一直沿用至今。由于 npm 上 CommonJS 的类库众多，以及 CommonJS 和 ES6 之间的差异，Node.js 无法直接兼容 ES6。所以现阶段 require/exports 任然是必要且实必须的。出自 ES6 的 import/export 相对就晚了许多。被大家所熟知和使用也是 2015 年之后的事了。 这其实要感谢 babel（原来项目名叫做 6to5，后更名为 babel） 这个神一般的项目。由于有了 babel 将还未被宿主环境（各浏览器、Node.js）直接支持的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这种写法 —— Webpack 插上 babel-loader 这个翅膀才开始高飞，大家也才可以称 " 我在使用 ES6！ "

所以说目前 require/exports 是必要且必须的。因为事实是，你编写的 import/export 最终都是编译为 require/exports 来执行的。

浏览器端，加载 JavaScript 最佳、最容易的方式是在 document 中插入<script>标签。但脚本标签天生异步，所以传统 CommonJS 模块在浏览器环境中无法正常加载。 Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的。

AMD、CMD

AMD、CMD是一套封装模块定义的标准，核心方法：

// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此处略去 100 行
  var b = require('./b') // 依赖可以就近书写
  b.doSomething()
  // ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
  a.doSomething()
  // 此处略去 100 行
  b.doSomething()
  ...
}) 

感兴趣可以了解一下define的逻辑，传送门。

大多数的模块倚赖加载器/管理器本质上都是将这种模块定义封装进一个友好的API（接口）。我们知道，在requirejs中，使用define([],function(){})来定一个模块的，来看下面一段原理性代码。

var MyModules=(function Manager(){
    var moudules={}; //对象字面量
    function define(name,deps,impl){
        for(var i=0;i<deps.length;i++){
            deps[i]=moudules[deps[i]]; 
        }
        moudules[name]=impl.apply(impl,deps);
        console.log(moudules[name]);
    }

    function get(name){
        return moudules[name];
    }
    return {
        define:define,
        get:get
    };
})();

这里我们定义了一个匿名函数，并让他立即执行，然后将返回值传给了MyModules。

MyModules.define('bar',[],function(){
    function hello(who){
       return 'Let me introduce:'+who;
    }
    return {
       hello:hello
    }
});
var bar=MyModules.get('bar');
console.log(bar.hello('nihao')); // Let me introduce:nihao

大致分析一下执行过程：
通过MyModules的公共接口define,同时，传给define的第二个参数是一个空数组，所以说，for循环会跳过，这时，最关键的一句是impl.apply(impl,deps)。它会将impl也就是第三个匿名函数参数的this值绑定到函数自身的作用域并同时将第二个参数deps作为函数的参数传进去。

那当需要依赖其他模块时

MyModules.define('foo',['bar'],function(bar){
     var hungry='hippo';
     function awesome(){
         console.log(bar.hello(hungry).toUpperCase());
     }
     return {
        awesome:awesome
     }
});
var foo=MyModules.get('foo');
foo.awesome(); // LET ME INTRODUCE:NIHAO

其关键的步骤就是第二个参数是有一个数组值的数组，代码将执行遍历此数组操作，然后，将该数组的第一个值赋值为此前module对象中的bar属性对象，所以说该数组中的值也就也就指向了moudule对象中的bar属性对象(注意引用类型的复制问题)。

ES6 模块与 CommonJS 模块的差异

它们有两个重大差异。

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

参考链接

https://es6.ruanyifeng.com/#docs/module-loader

https://www.zhihu.com/question/56820346/answer/150724784

https://www.jianshu.com/p/d67bc79976e6

https://www.cnblogs.com/qqqiangqiang/p/5352417.html