原生/CommonJS /AMD/UMD 模块化详解

模块化

模块化已经是现代前端开发中不可或缺的一部分了把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展
从 ECMAScript2015 开始引入了模块的概念，我们称为：ECMAScript Module，简称：ESM

模块化的核心

• 独立的作用域
• 如何导出模块内部数据
• 如何导入外部模块数据

ESM

从 ECMAScript2015/ECMAScript6 开始，JavaScript 原生引入了模块概念，而且现在主流浏览器也都有了很好的支持

独立模块作用域

一个文件就是模块，拥有独立的作用域，且导出的模块都自动处于 严格模式下，即：'use strict'

原生

静态模式
import必须放在模块化代码的最顶层 放点击事件里不行 这种方式叫静态导入，不支持延迟加载

import b from "./b.js"  //正常情况导出 
    console.log(b)

b.js文件 导出

export default "这是b文件的内容"

使用
module告诉他是个模块

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

动态方式导入

    // 动态导入  异步加载
    document.onclick = async function(){  //
      let b = await import ("./b.js")    //类似懒加载
        console.log(b.default)
    }

CommonJS 后端

在早起前端对于模块化并没有什么规范，反而是偏向服务端的应用有更强烈的需求，CommonJS 规范就是一套偏向服务端的模块化规范，NodeJS 就采用了这个规范。

// 导出
module.exports = {
    val:"这是b模块导出的内容",
    vals:"这是b模块导出的内容2"
}

//导入 模块化在后端的写法

let b = require('./b.js')
console.log(b)
// 在终端输入 node a 输出  {val:这是b模块导出的内容}
console.log(b.vals) // 输出  这是b模块导出的内容2

AMD

因为 CommonJS 规范一些特性（基于文件系统，同步加载），它并不适用于浏览器端，所以另外定义了适用于浏览器端的规范 ，我们可以通过一些第三方库来解决

独立模块作用域
通过一个 define 方法来定义一个模块，并通过该方法的第二个回调函数参数来产生独立作用域
就是通过define导出导入 （解决代码规范的问题）

//使用 define导入 需要参数 不需返回值
define([  //参数1 导入的路径  是个数组形式 可写多个
    './js/b.js',
], function(require) {//参数2：函数，参数存放导入的数据
    console.log(require)
    
});

// define导出 需要返回值 不需要参数 
define(function(){
    let val = "这是amd规范下的数据";
        return val
})

  <!--data-main当前主入口             三方库网络路径 -->
    <script data-main='./js/a.js' src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>

UMD导出

严格来说，UMD 并不属于一套模块规范，它主要用来处理 CommonJS、AMD、CMD 的差异兼容，是模块代码能在前面不同的模块(原生/node/AMD)环境下都能正常运行
哪里调用哪里传参
导入要遵守当前模块(原生/node/AMD)环境 导入较为简单一般不需要处理

// UMD包含以上三种模式 以此满足各种条件下的导出情况
// ()()匿名函数的自调用  (匿名函数的定义)(调用 需要的参数)
(function(factory){
    // module是不是对象                     module.exports是不是对象
    if (typeof module === "object" && typeof module.exports === "object") {
        //条件满足说明是后端 Node, CommonJS-like 方式导出
        module.exports = factory; //不需要调用，哪里使用，哪里调用
    }else if (typeof define === "function" && define.amd) {
      	//说明是 AMD 模块环境下 
          define(function(){
              return factory
          });
  }else{ //就是全局 原生
      window.rmb = factory
  }
}) (function (val){ //自定义过滤器
    return '$' +(val/100)  .toFixed(1)
   })