【Node.js和模块化】CommonJS

r囧r小猫 2021-11-29 06:54 406阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]  
非商业用途自由转载，保持署名，注明出处！**

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

### 文章目录 ###

*  1.问题
 *  2.模块化规范
 *   *  2.1 暴露模块方式
     *  2.2 引入模块方式
 *  3.举例：服务器端
 *   *  3.1 初始化
     *  3.2 导入第3方包
     *  3.3 自定义模块
     *  3.4 运行代码
 *  4.举例：浏览器端
 *   *  4.1 初始化
     *  4.2 导入第3方包
     *  4.3 自定义模块
     *  4.4 添加.html文件&运行代码

# 1.问题 #

*  js代码增多导致网站变得更为复杂，带来两个主要问题：文件依赖，全局污染、命名冲突。
 *  解决方案就是通过模块化处理，即一次编写，多次使用！
 *  模块化是什么？将一个复杂的程序封装成几个文件并组合在一起。其中模块内部的数据是私有的，只向外部暴露一些接口方法。
 *  思路1：在一个文件内引入多个js文件，但会导致请求过多、依赖模糊（若改变其中一个文件，其他文件可能会报错），从而导致难以维护。
 *  因此需要**模块化规范**。

# 2.模块化规范 #

*  方式：通过Node.js把很多js打包成package，需要的时候通过require方式调用。通过两种js把这种方式应用到前端：RequireJS 和 SeaJS。
 *  CommonJS规范：是一套约束标准，**约定代码是怎样的一种结构！**，该规范下每个文件都可以当作一个模块。
 *  **Node.js基于CommonJS规范来编写**。
 *  同步加载！

## 2.1 暴露模块方式 ##

暴露的本质是exports对象！

module.exports = value；//方式1：暴露一个对象或函数
    exports.xxx = value；//方式2：给 exports 对象添加属性。

## 2.2 引入模块方式 ##

require(xxx)；//1.下载的模块，xxx为模块名；2.自定义模块：xxx为模块文件路径

# 3.举例：服务器端 #

## 3.1 初始化 ##

![在这里插入图片描述][2019072116042394.png]  
在根目录下通过下面命令自动生成.json文件（若没有设置过cnpm，则使用npm）

cnpm init

## 3.2 导入第3方包 ##

cnpm install uniq

对应.json文件会自动添加dependencies属性，若没有则输入以下命令：

cnpm install uniq --save

![在这里插入图片描述][20190721161019863.png]  
uniq的作用起到数组去重作用！

## 3.3 自定义模块 ##

*  针对module1.js通过方式1暴露一个对象

module.exports = { 
        name: 'lyh1',
        foo(){ 
            console.log(this.name);
        }
    }

*  针对module2.js通过方式1暴露一个函数：

module.exports = function(){ }//内容自定义，下同

*  针对module3.js通过方式2给对象添加属性

exports.foo1 = function(){ }
    exports.arr = [1,4,25,3,3,4];

*  将其他js汇集到主模块app.js

//初始化
    let uniq = require('uniq');//先引入第3方模块
    let module1 = require('./modules/module1');// ./是相对路径写法，表示当前目录下
    
    //调用
    module1.foo();//调用对象的方法
    module2();//调用函数
    module3.foo1();调用属性
    
    //去重操作
    uniq(module3.arr);

## 3.4 运行代码 ##

node app.js

# 4.举例：浏览器端 #

## 4.1 初始化 ##

![在这里插入图片描述][20190721162535767.png]  
在根目录下通过下面命令自动生成.json文件（若没有设置过cnpm，则使用npm）

cnpm init

## 4.2 导入第3方包 ##

cnpm install browserify -g          //全局
    cnpm install browserify --save-dev  //局部。

## 4.3 自定义模块 ##

同上

## 4.4 添加.html文件&运行代码 ##

*  .html添加：

*  命令：

browserify js/src/app.js -o js/dist/bundle.js  //为了能够让index.html引入app.js

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

**如有不当之处，欢迎指正!  
谢谢！**

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[2019072116042394.png]: /images/20211129/0ae7496f2d44414daa27e9066a73b836.png
[20190721161019863.png]: /images/20211129/b556d0a1a7484e5fa2ebd05b3a871c64.png
[20190721162535767.png]: /images/20211129/977d71b02e824476b93f85f2897b43ba.png