模块化

模块化

 模块化已经是现代前端开发中不可或缺的一部分了
 模块化：把复杂的问题分解成相对独立的模块
 模块化的作用：降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展
 模块化的核心：1.独立的作用域(
        2.如何导出模块内部数据
        3.如何导入外部模块数据

模块化的向下兼容

一、ESM

 从 ECMAScript2015/ECMAScript6 开始JavaScript 原生引入了模块的概念，我们称为：ECMAScript Module，简称：ESM，现在主流浏览器也都有了很好的支持
 1.独立的作用域
  一个文件就是模块，拥有独立的作用域，且导出的模块都自动处于 严格模式下，即：'use strict')
 2.导出模块内部数据
  使用export语句导出模块内部数据

注意：1.export default 向外暴露的成员，可以使用任意变量来接收
   2.在一个模块中，export default 只允许向外暴露一次
   3.在一个模块中，可以同时使用export default 和export 向外暴露成员
   4.使用export向外暴露的成员，只能使用{ }的形式来接收，且必须严格按照导出时候的名称，
    这种形式，叫做按需导出
 3.导入外部模块数据
  导入分为静态导入和动态导入
  静态导入
  在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用
  <script type='module' src=''></script>
  静态导入方式不支持延迟加载，import 必须在模块的最开始

 动态导入
 有一个类似函数的动态 import()，它不需要依赖 type="module" 的 script 标签
 可以像调用函数一样来动态的导入模块,以这种方式调用，将返回一个 promise
 使用script标签时,可以直接使用<script src=''></script>

二、CommonJS

 在早起前端对于模块化并没有什么规范，反而是偏向服务端的应用有更强烈的需求，CommonJS 规范就是一套偏向服务端的模块化规范，NodeJS 就采用了这个规范
 1.独立的作用域
  一个文件就是模块，拥有独立的作用域
 2.导出模块内部数据
  通过 module.exports 或 exports 对象导出模块内部数据

 3.导入外部模块数据
  通过 require 函数导入外部模块数据

三、AMD

 因为 CommonJS 规范一些特性（基于文件系统，同步加载），它并不适用于浏览器端，所以另外定义了适用于浏览器端的规范
 浏览器并没有具体实现该规范的代码，我们可以通过一些第三方库来解决在浏览器端模块化的规范 这种方式就是AMD
 通过requirejs这个第三方库来规范
 <script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
 data-main绑定当前的主入口,是优先读取的文件
 1.独立模块作用域
  通过一个 define 方法来定义一个模块，并通过该方法的第二个回调函数参数来产生独立作用域
 2.导出模块内部数据
  通过 return 导出模块内部数据
  使用define 导出 时,需要返回值,不需要参数

 3.导入外部模块数据
  通过前置依赖列表导入外部模块数据
  使用define方法导入时,需要参数,不需要返回值
  参数1：导入的路径,(数组,因为可以导入多个)
  路径：从导入的html文件出发
  参数2：外部导入的数据会以参数的形式传入函数中

四、UMD

 严格来说，UMD 并不属于一套模块规范，它主要用来处理 CommonJS、AMD、CMD 的差异兼容，是模块代码能在前面不同的模块环境下都能正常运行
 使用闭包的方式处理模块化兼容的问题
 导出模块内部数据
 导入外部模块数据
 与原先的导入方式一样