模块化的使用

一、模块化简介

        早期的网页中，是没有一个实质的模块规范的网页。我们实现模块化的方式，就是最原始的通过script标签来引入多个js文件。这会带来几个问题：

        1. 无法选择要引入模块的哪些内容，并不是一个模块中的所有内容我们都需要。

        2. 在复杂的模块场景下非常容易出错，如：我们要用jQuery里面的一些插件，需要先引入jQuery.js文件。

        于是，我们就继续在js中引入一个模块化的解决方案：

        在Node中，默认支持的模块化规范叫做CommonJS，在CommonJS中，一个js文件就是一个模块。

二、CommonJS规范

        1.  引入Common.js规范

            （1）使用函数require("模块的路径")函数来引入模块。

            （2）引入自定义模块时模块名要以./ 或 ../开头且扩展名可以省略

        我们创建一个m1.js文件作为模块，在m1.js中输出一个“我是模块1”

// m1.js
console.log("我是m1模块");

        我们再创建一个模块化.js用于引入模块。

        在CommonJS中，如果省略js文件的扩展名，node会自动为文件补全扩展名./ms.js

// index.js
const m1 = require("./m1");

        使用node运行模块化.js

        如果没有找到./m1.js它会寻找./m1.json，查找顺序为 js--> json --> node(特殊文件)。 

         2. 导出模块        

        在定义模块时，模块中的内容默认是不能被外部查看的，如在m1.js中定义变量，外部是接收不了的。

        可以通过exports来设置要向外暴露的内容，访问exports的方式有两种：exports 和 module.exports

        当我们在其他模块中引入当前模块时，require函数返回的就是exports。

        可以将希望暴露给外部模块的内容设置为exports的属性。

        1. 可以通过exports一个一个导出值。

        m1.js

exports.name = "孙悟空";
exports.age = 18;
exports.person = {
    name: "猪八戒",
    gender: "男",
    age: 28
};
exports.fn = function fn() {
    console.log("我是fn函数");
}

        模块化.js

const m1 = require("./m1");
console.log(m1);
console.log(m1.age);
m1.fn();

        输出结果如下

         2. 也可以直接通过module.exports同时导出多个值。

        m1.js

module.exports = {
    name: "孙悟空",
    age: 18,
    fn: () => {
        console.log("我是fn函数");
    }
}

        模块化.js中的代码和上面一致，输出结果如下：

        也可以使用如下方式去接收由module.exports导出模块化的参数 

const { name, age, fn } = require("./m1");
console.log(name, age, fn);
fn();

         

 

        3. 引入核心模块

         引入核心模块时，直接写核心模块的名字即可，也可以在核心模块前添加node。

const path1 = require("path");
const path2 = require("node:path");  //核心模块path

三、exports对象

        如果我们在m1.js中编写如下代码，它只会返回{ b:2 }。

exports.a = 1
module.exports = {
  b:2
}

        原因分析： 

         1. exports对象是module对象的一个属性，在初始时module.exports和exports指向同一块内存区域。

        在m1.js中编写如下代码

console.log(module.exports);
console.log(exports === module.exports);

        结果如下

        2. 模块导出的是module.exports，exports只是对它的引用，在不改变exports内存的情况下，

修改exports的值可以改变module.exports的值。

3. 导出时尽量使用module.exports，以免因为各种赋值导致的混乱