Node.js和CommonJs模块化的介绍、引入及使用

梦里梦外; 2023-05-21 15:29 16阅读 0赞

# 一、概念 #

## 1、什么是 CommonJs ##

JavaScript是一个强大的面向对象语言 它有很多快速高效的解释器  
然而 JavaScript标准定义的API只是为了构建基于浏览器的应用程序 并没有制定一个用于更广泛的应用程序的标准库  
CommonJS规范的提出主要是为了**弥补当前JavaScript没有标准的缺陷**  
它的终极目标就是：提供一个类似Python 或 Ruby 或 Java语言的**标准库** 而不只是停留在脚本程序的阶段

用CommonJS API编写出的应用 不仅可利用JavaScript来开发客户端应用 还可编写如下应用：

*  服务器端JavaScript应用程序(即NodeJs)
 *  命令行工具
 *  桌面图形界面应用程序

简单来说：**CommonJs就是模块化的标准 而Nodejs就是CommonJs(模块化)的实现**

## 2、NodeJs中的模块化 ##

在Node中 模块分为两类 一类是Node自己提供的模块 称为**核心模块** 另一类是用户编写的模块 称为**文件模块**

*  **核心模块**部分在 Node 源代码的编译过程中编译进了二进制执行文件  
    在Node进程启动时 部分核心模块就被直接加载进内存中 所以这部分核心模块引入时 文件定位和编译执行这两个步骤可以省略掉  
    并且在路径分析中优先判断 因此 它的加载速度是最快的  
    如：HTTP 模块 URL 模块 Fs模块  
    这些模块都是Nodejs内置的核心模块 可直接引入使用
 *  **文件模块**则是在运行时动态加载 需要完整的路径分析 文件定位 编译执行过程  
    其速度相比核心模块稍微慢一些 但使用场景非常多  
    此种模块需自己定义

## 3、CommonJS(Nodejs)中自定义模块的规定 ##

*  可将公共的功能**抽离**成为一个单独的js文件作为一个模块  
    默认情况下 这个模块里面的方法或者属性 外界是没法访问的  
    若要让外界可以访问模块里面的方法或者属性 则必须在模块里面通过`exports`或`module.exports`来暴露属性或者方法
 *  在需要使用这些模块的文件中 通过`require()`方法引入模块  
    此时 即可使用模块里暴露的属性和方法了

模块化用到了**面向对象**的思想 类似于Java中的类的概念

--------------------

# 二、案例 #

## 1、普通使用 ##

**config.js**

var msg="This is Config";
    
    // 暴露属性
    module.exports=msg;

**commonJs1.js**

var http=require("http");
    
    // 引入自定义的模块
    var msg=require("./config.js") // 指定路径引入
    
    var app=http.createServer(function(req,resp){
        
    
        resp.writeHead(200,{
        "Content-Type":"text/html;charset=utf-8"});
    
        resp.write("Hello");
    
        console.log(msg);
        
        resp.end();
    });
    
    app.listen(8001,"127.0.0.1");

结果：  
![在这里插入图片描述][20200416231953164.png]  
输出两次是因为请求了两次  
一次是普通请求 另一次是favicon.ico的请求

## 2、小细节 ##

**tools.js**

### ①、结构展示 ###

**commonJs2.js**

// 引入自定义的模块
    var tools=require("./tools.js")
    
    console.log(tools);

输出：  
![在这里插入图片描述][2020041623222840.png]

### ②、调用方法 ###

**commonJs2.js**

// 引入自定义的模块
    var tools=require("./tools.js")
    
    console.log(tools.tools.add(1,2));

输出：  
![在这里插入图片描述][20200416232324860.png]

### ③、换一种暴露方法的方式 ###

以tools.tools的形式调用**不太合理**  
可以换一种暴露方法的方式

**tools.js**

var tools={
        
    
        // 加
        add:function(x,y)
        {
        
            return x+y;
        },
        // 乘
        multiply:function(x,y)
        {
        
            return x*y;
        }
    
    }
    
    // 暴露方法
    module.exports=tools

**commonJs2.js**

// 引入自定义的模块
    var tools=require("./tools.js")
    
    console.log(tools.add(1,2));
    console.log(tools.multiply(4,5));

输出：  
![在这里插入图片描述][20200416232439722.png]

### ④、简写 ###

可**省略\[.js\]后缀名**

// 引入自定义的模块
    var tools=require("./tools") // 省略[.js]后缀名
    
    console.log(tools.add(1,2));
    console.log(tools.multiply(4,5));

输出：  
![在这里插入图片描述][20200416232513979.png]

## 3、路径问题 ##

### ①、自动寻找 ###

当引入的模块在当前同级目录下不存在的时候  
会在目录下的`node_modules`包下寻找

目录结构：  
![在这里插入图片描述][2020041623263158.png]  
**test.js**

var msg="This is test";
    
    exports.msg=msg;

**commonJs4.js**

var test=require("test");
    
    console.log(test);

输出：  
![在这里插入图片描述][20200416232703661.png]

### ②、更深一步的自动寻找 ###

目录结构：  
![在这里插入图片描述][20200416232747173.png]  
**aaa.js**

var msg="aaa";
    
    exports.msg=msg;

**commonJs5.js**

var aaa=require("aaa/aaa"); // 会自动从node_modules包下找
    
    console.log(aaa);

输出：  
![在这里插入图片描述][20200416232814152.png]

### ③、指定 · 定位 ###

目录结构：  
![在这里插入图片描述][20200416232926190.png]  
直接通过bbb定位到bbb/bbb

此时 需要通`过npm init`生成**package.json**  
在需要定位的包下输入`npm init --yes`强制生成package.json文件

注：一定要进入**需要定位的包**的目录下再执行该指令  
确保package.json文件和要定位的包是同级的![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]  
**package.json**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 1]  
**commonJs6.js**

var bbb=require("bbb"); // 路径直接用bbb
    
    console.log(bbb);

输出：  
![在这里插入图片描述][20200416233141277.png]

##### 执行步骤： #####

bbb包在根目录不存在 因此自动去了**node\_modules**包  
然后找到了bbb包 在bbb包里有**package.json**文件 然后会**从package.json文件中找main`入口`**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 2]

--------------------

[20200416231953164.png]: /images/20230521/74ce16661d3941d785b97ac2ebd7fe65.png
[2020041623222840.png]: /images/20230521/5a395d65f05f4231988d0dac96956007.png
[20200416232324860.png]: /images/20230521/32fec0fd90e84ca0a60207bad2f619fa.png
[20200416232439722.png]: /images/20230521/23719b3992d04a8ebb2af12dc172048d.png
[20200416232513979.png]: /images/20230521/f4e90149419c4612985e298524549826.png
[2020041623263158.png]: /images/20230521/24bc2feaed80446fa6b2c62941b90024.png
[20200416232703661.png]: /images/20230521/bdacb45fe8a44e75bca9ae50f01993ae.png
[20200416232747173.png]: /images/20230521/d83d324013cb41c7ae637d7da35c2586.png
[20200416232814152.png]: /images/20230521/ee695be76ea04d7b91d56abee90fe44e.png
[20200416232926190.png]: /images/20230521/28f139923587490ebf7bd25bd8c7792a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]: /images/20230521/19ba07ffe41a433297841269c2189c85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 1]: /images/20230521/73a74098400c4d54bad39948129a4494.png
[20200416233141277.png]: /images/20230521/b575a661eb3d4043952183f7c4b6990d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 2]: /images/20230521/bae97252cc6b4ef8b403ba95bc6b20b8.png