【CommonJS和ES Module 使用】

一、CommonJS

CommonJS : CommonJS是一种规范，是一种内容导出导入的一种方法（不官方的方法）

        使用exports和module.exports 导出内容，

        require函数 导入数据，

注意 ：CommonJS 并没对浏览器进行配置  所以说我们得到的结果都要在终端中打印。

1.导出方式

        a.第一种导出    exports.自定义名字 = 属性名/函数;

let name = "李四";
let email = "[email protected]";

function getPow(num) {
    return num * num
}

function getSort(arr) {
    return arr.sort(function(a, b) {
        return a - b;
    })
}

// 第一种 模块化直接导出 exports.自定义名字 = 属性/函数;
exports.name = name;
exports.email = email;
exports.getPow = getPow;
exports.getSort = getSort

        b.第二种导出    module.exports.自定义名字 = 属性名/函数;

let name = "张三";
let addr = "河南";

function getSum(a, b) {
    return a + b
}

function getRandom() {
    return Math.floor(Math.random() * 10)
}

// 第二种导出   module.exports.自定义名字 = 属性名/函数;
module.exports.getSum = getSum;
module.exports.getRandom = getRandom;
module.exports.name = name;
module.exports.addr = addr

        c.第三那种导出   对象导出

let name = "李四";
let emali = "[email protected]";

function getPow(num) {
    return num * num
}

function getSort(arr) {
    return arr.sort(function(a, b) {
        return a - b;
    })
}
// 第三种方式  对象式导出
module.exports = {
    name,
    emali,
    getPow,
    getSort
}

2.导入方式  require（x）

         导入使用require函数  他也有三种规则    

 a.情况一node核心模块  require（x）

        X是一个Node核心模块，比如 fs，path，http，

         直接打印核心模块 ，如果不是核心模块 ，那么就会报错

b.情况二  X是以 ./ 或 ../ 或 /（根目录）开头的

• 第一步：将X当做一个文件在对应的目录下查找；
  • 1.如果有后缀名，按照后缀名的格式查找对应的文件
  • 2.如果没有后缀名，会按照如下顺序：
    1. 直接查找文件X
    2. 查找X.js文件
    3. 查找X.json文件
    4. 查找X.node文件
• 第二步：没有找到对应的文件，将X作为一个目录
  • 查找目录下面的index文件
  1. 查找X/index.js文件
  2. 查找X/index.json文件
  3. 查找X/index.node文件

          如果没有找到，那么报错：not found

c.直接是一个X（没有路径），并且X不是一个核心模块  只是一个名称时

        这样我们是无法直接找到的  我们要在当前目录下建一个node_modules文件  这个名字是固定的不可以更该，在这个文件夹里建一个 x文件     在x文件里建一个index.js

        只有这样才能找到 这是require的默认寻找路径

当我们使用npm下载js是就会默认创建一个node_modules文件  所以我们要这样书写

总结：

CommonJS加载模块是同步的

        同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被继续往下运行

CommonJS 不能应用于浏览器中

二、ES Module         ES6及以上   官方用法

         export负责将模块内的内容导出；

         import负责从其他模块导入内容；

采用ES Module将自动采用严格模式：use strict

1.导出数据

        a.使用espotr关键字进行导出        此 {} 只是大括号  并不是对象语法

let name = "李四"

function getPow(num) {
    console.log(num * num);
}

function getReverse(arr) {
    console.log(arr.reverse());
}

// 第一种导出方式  
export {
    name,
    getPow,
    getReverse
}

        b.使用起别名进行导出    解决命名冲突问题

let name = "李四"
let addr = "河南"
let eamil = "[email protected]"

function getPow(num) {
    // console.log(num * num);
    return num * num
}

function getReverse(arr) {
    console.log(arr.reverse());
}

//  第二种导出方式 起别名 防止命名冲突问题
export {
    name as liname,
    addr as liaddr,
    eamil,
    getPow,
    getReverse
}

        c. 在声明变量时直接导出    这种不能起别名可能会引起命名冲突问题

// 第三种方式  直接导出
export let name = "foo模块";
export let addr = "河南";
export function getSum(num1, num2) {
    return num1 + num2
}

2.引入数据

        使用import关键字  导入也有好几种方式

        1> import {标识符列表} from '模块'；

        这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；

import { liname, liaddr, eamil, getPow, getReverse } from "./lisi.js"

let name = "张三";
let addr = "北京"

function getSum(a, b) {
    console.log(a + b);
}

console.log(liname);
console.log(liaddr);
console.log(eamil);
console.log(getPow(10));
getReverse([1, 2, 3, 4, 5, 6, 7, 8, 9])

 2>使用起别名进行引入数据

        通过as关键字起别名

  // 导入起别名  基本上都是导入起别名

   import { name as fname, addr as faddr, getSum } from "./foo.js"

   import { name as liname, eamil, getPow } from "./lisi.js"

   let name = "main模块"
   let addr = "北京"

   // foo 模块
   console.log(fname);
   console.log(faddr);
   console.log(getSum(10, 20));
   console.log("======================");

   // lisi 模块
   console.log(liname);
   console.log(eamil);
   console.log(getPow(50));

   // main 模块
   console.log("================");
   console.log(name);
   console.log(addr);

3> 默认导出   使用 import  *   as   自定义名字  "模块"

   // 导入的第三种方式  整体导入
   import * as foo from "./foo.js"
   import * as lisi from "./lisi.js"

   let name = "main模块"
   let addr = "北京"

   // foo 模块
   console.log(foo.addr);
   console.log(foo.name);
   console.log(foo.getSum(10, 20));

   console.log("======================");

   // lisi 模块
   console.log(lisi.name);
   console.log(lisi.eamil);
   console.log(lisi.getPow(30));

   // main 模块
   console.log("================");
   console.log(name);
   console.log(addr);

---