【Node.js和模块化】CommonJS

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

---

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 初始化

在根目录下通过下面命令自动生成.json文件（若没有设置过cnpm，则使用npm）

cnpm init

3.2 导入第3方包

cnpm install uniq

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

cnpm install uniq --save

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 初始化

在根目录下通过下面命令自动生成.json文件（若没有设置过cnpm，则使用npm）

cnpm init

4.2 导入第3方包

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

4.3 自定义模块

同上

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

• .html添加：

<script src="./js/src/app.js"></script>
 <script type="text/javascript" src="js/dist/bundle.js"></script>

• 命令：

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

---

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