add：CommonJS

2018-04-10 22:15:23 +08:00 · 2018-04-10 22:15:23 +08:00 · 52c211cdb4
commit 52c211cdb4
parent eb72fefb3a
3 changed files with 500 additions and 187 deletions
--- a/09-Node.js/01-Node.js入门.md
+++ b/09-Node.js/01-Node.js入门.md
@ -239,6 +239,16 @@ proxy
 ### NVM 的常用命令


+
+查看当前使用的 nvm 版本：
+
+```
+nvm -v
+
+nvm --version
+```
+
+
 查看本地安装的所有的 node 版本：

 ```
@ -266,14 +276,6 @@ nvm uninstall 版本号
 nvm use 版本号 [arch]
 ```

-查看当前使用的 nvm 版本：
-
-```
-nvm -v
-
-nvm --version
-```
-
 ### Node 的常用命令

 查看 node 的版本：
--- a/09-Node.js/02-JavaScript模块化开发.md
+++ b/09-Node.js/02-JavaScript模块化开发.md
@ -1,179 +0,0 @@
-
-
-## 前言
-
-网站越来越复杂，js代码、js文件也越来越多，会遇到**一些问题**：
-
- 命名冲突
-
- 文件依赖
-
- 各种问题
-
-程序模块化包括：
-
- 日期模块
-
- 数学计算模块
-
- 日志模块
-
- 登陆认证模块
-
- 报表展示模块等。
-
-所有这些模块共同组成了程序软件系统。
-
-一次编写，多次使用，才是提高效率的核心。
-
-
-**程序模块化开发的优点：**
-
- 开发效率高：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能。
-
- 方便后期维护：软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较频繁。使用模块化的开发，方式更容易维护。
-
-## 模块化规范
-
-###  模块化的概念解读
-
-模块化起源于 Node.js。Node.js 中把很多 js 打包成 package，需要的时候直接通过 require 的方式进行调用（CommonJS），这就是模块化的方式。
-
-那如何把这种模块化思维应用到前端来呢？这就产生了两种伟大的 js：RequireJS 和 SeaJS。
-
-
-
-### 模块化规范
-
-服务器端规范：
-
- [**CommonJS**](http://www.commonjs.org/)：是 Node.js 使用的模块化规范。
-
-CommonJS 就是一套约定标准，不是技术。用于约定我们的代码应该是怎样的一种结构。
-
-
-浏览器端规范：
-
- [**AMD规范**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
-
-```
- 异步加载模块；
-
- 依赖前置、提前执行：require([`foo`,`bar`],function(foo,bar){});   //也就是说把所有的包都 require 成功，再继续执行代码。
-
- define 定义模块：define([`require`,`foo`],function(){return});
-```
-
- **[CMD规范](https://github.com/amdjs/amdjs-api)**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
-
-```
-
-	同步加载模块；
-
-	依赖就近，延迟执行：require(./a) 直接引入。或者Require.async 异步引入。   //依赖就近：执行到这一部分的时候，再去加载对应的文件。
-
-	define 定义模块， export 导出：define(function(require, export, module){});
-```
-
-
-面试时，经常会问：AMD 和CMD 的区别。
-
-
-
-## SeaJS 的应用
-
-### SeaJS 的介绍
-
-SeaJS：一个基于CMD规范实现的模块化开发解决方案。
-
-作者：Alibaba 玉伯。
-
-官网：<http://seajs.org/>
-
-GitHub：<https://github.com/seajs/seajs>
-
-现在官网变成了：<https://seajs.github.io/seajs/docs/>
-
-特性：
-
- 简单友好的模块定义规范。
-
- 自然直观的代码组织方式。
-
-
-20180303_2107.png
-
-
-
-
-
-
-
-
-## RequireJS（AMD）、SeaJS（CDM）、CommonJS、ES6 的对比
-
-### RequireJS 和 AMD
-
-
-AMD 是 RequireJS 在推广过程中对模块化定义的规范化产出。
-
-
-20180303_1653.png
-
-
-异步模块定义，特点是依赖前置。
-
-
-### SeaJS 和 CMD
-
-CMD 是 SeaJS 在推广过程中对模块化定义的规范化产出
-
-
-同步模块定义。
-
-```javascript
-	// 所有模块都通过 define 来定义
-	define(funtion(require, exports, module) {
-
-        //通过 require 引入依赖
-
-        var $ require(`jquery`);
-
-        var Spinning = require(`./spinning`);
-	})
-```
-
-SeaJS 是淘宝开发团队做的，知名度不如 RequireJS。
-
-### CommonJS
-
-CommonJS 的规范：module.exports
-
-服务器端的 Node.js 推荐使用 CommonJS 规范，来定义模块化开发。前端浏览器不支持 CommonJS 规范。
-
-20180303_1701.png
-
-
-以上三个都是 ES5里面的规范。
-
-### ES6
-
-ES6的特性：export/import
-
-20180303_1704.png
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
--- a/09-Node.js/02-JavaScript模块化：CommonJS.md
+++ b/09-Node.js/02-JavaScript模块化：CommonJS.md
@ -0,0 +1,490 @@
+
+
+## 前言
+
+网站越来越复杂，js代码、js文件也越来越多，会遇到**一些问题**：
+
+
+- 文件依赖
+
+- 全局污染、命名冲突
+
+程序模块化包括：
+
+- 日期模块
+
+- 数学计算模块
+
+- 日志模块
+
+- 登陆认证模块
+
+- 报表展示模块等。
+
+所有这些模块共同组成了程序软件系统。
+
+一次编写，多次使用，才是提高效率的核心。
+
+## 模块化的理解
+
+
+### 什么是模块化
+
+
+**概念**：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起。
+
+模块的内部数据、实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
+
+最早的时候，我们会把所有的代码都写在一个js文件里，那么，耦合性会很高（关联性强），不利于维护；而且会造成全局污染，很容易命名冲突。
+
+
+### 模块化的好处
+
+- 避免命名冲突，减少命名空间污染
+
+- 降低耦合性；更好地分离、按需加载
+
+- **高复用性**：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能。
+
+- **高可维护性**：软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较频繁。使用模块化的开发，方式更容易维护。
+
+- 部署方便
+
+
+
+
+## 模块化规范
+
+### 模块化规范的引入
+
+假设我们引入模块化，首先可能会想到的思路是：在一个文件中引入多个js文件。如下：
+
+```html
+<body>
+    <script src="zepto.js"></script>
+    <script src="fastClick.js"></script>
+    <script src="util/login.js"></script>
+    <script src="util/base.js"></script>
+    <script src="util/city.js"></script>
+</body>
+```
+
+但是这样做会带来很多问题：
+
+- 请求过多：引入十个js文件，就有十次http请求。
+
+- 依赖模糊：不同的js文件可能会相互依赖，如果该其中的一个文件，另外一个文件可能会报错。
+
+以上两点，最终导致：**难以维护**。
+
+于是，这就引入了模块化规范。
+
+
+###  模块化的概念解读
+
+模块化起源于 Node.js。Node.js 中把很多 js 打包成 package，需要的时候直接通过 require 的方式进行调用（CommonJS），这就是模块化的方式。
+
+那如何把这种模块化思维应用到前端来呢？这就产生了两种伟大的 js：RequireJS 和 SeaJS。
+
+
+
+### 模块化规范
+
+服务器端规范：
+
+- [**CommonJS**](http://www.commonjs.org/)：是 Node.js 使用的模块化规范。
+
+CommonJS 就是一套约定标准，不是技术。用于约定我们的代码应该是怎样的一种结构。
+
+
+浏览器端规范：
+
+- [**AMD规范**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
+
+```
+- 异步加载模块；
+
+- 依赖前置、提前执行：require([`foo`,`bar`],function(foo,bar){});   //也就是说把所有的包都 require 成功，再继续执行代码。
+
+- define 定义模块：define([`require`,`foo`],function(){return});
+```
+
+- **[CMD规范](https://github.com/amdjs/amdjs-api)**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
+
+```
+
+	同步加载模块；
+
+	依赖就近，延迟执行：require(./a) 直接引入。或者Require.async 异步引入。   //依赖就近：执行到这一部分的时候，再去加载对应的文件。
+
+	define 定义模块， export 导出：define(function(require, export, module){});
+```
+
+
+PS：面试时，经常会问AMD 和 CMD 的区别。
+
+
+另外，还有ES6规范。
+
+这篇文章，我们来讲一下`CommonJS`。
+
+
+## CommonJS 的基本语法
+
+
+### CommonJS 的介绍
+
+
+[CommonJS](http://www.commonjs.org/)：是 Node.js 使用的模块化规范。
+
+也就是说，Node.js 就是基于 CommonJS 这种模块化规范来编写的。
+
+在 CommonJS 中，每个文件都可以当作一个模块：
+
+- 在服务器端：模块的加载是运行时同步加载的。
+
+- 在浏览器端: 模块需要提前编译打包处理。首先，既然同步的，很容易引起阻塞；其次，浏览器不认识`require`语法，因此，需要提前编译打包。
+
+
+### 暴露模块的方式
+
+**方式一**：
+
+```javascript
+	module.exports = value
+```
+
+这个 value 可以是任意的数据类型。
+
+**方式二**：
+
+```javascript
+	exports.xxx = value
+```
+
+
+**问题**: 暴露的模块到底是谁？
+
+**答案**：暴露的本质是`exports`对象。【重要】
+
+比如，方式二可以理解成是，**给 exports 对象添加属性**。
+
+PS：暴露的关键词是`exports`，不是`export`。
+
+
+
+
+
+### 引入模块的方式
+
+```
+require(xxx)
+```
+
+解释：
+
+- 下载的第三方模块：xxx直接为模块名（包名）。
+
+- 自定义模块：xxx为模块文件路径
+
+
+## CommonJS 在服务器端的实现举例
+
+
+### 1、初始化项目
+
+在工程文件中新建如下目录和文件：
+
+```
+modules
+    | module1.js
+    | module2.js
+    | module3.js
+
+app.js
+```
+
+然后在根目录下新建如下命令：
+
+```
+	npm init
+```
+
+
+然后根据提示，依次输入如下内容：
+
+- **包名**：可以自己起包名，也可以用默认的包名。注意，包名里不能有中文，不能有大写。
+
+- **版本**：可以用默认的版本 1.0.0，也可以自己修改包名。
+
+其他的参数，一路回车即可。效果如下：
+
+20180410_1425.png
+
+于是，根目录下会自动生成`package.json`这个文件。点进去看一下：
+
+```json
+{
+  "name": "commonjs_node",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "smyhvae",
+  "license": "ISC"
+}
+
+```
+
+
+### 2、导入第三方包举例
+
+`uniq`这个第三方包的作用是保证唯一性。我们在当前工程目录下，输入如下命令进行安装：
+
+```
+	npm install uniq
+```
+
+安装成功后，根目录下会自动生成相应的文件：
+
+20180410_1450.png
+
+
+需要说明的是，我的node版本是 v8.10.0（v8以上），对应的 npm 版本是 v5.6.0，版本比较高，因此，当我输入完`npm install uniq`之后，`package.json`中就会自动添加`uniq`包的依赖：
+
+20180410_18-55.png
+
+
+如果有些童鞋的npm版本较低，就需要手动去添加依赖；另一种方式是，可以使用`npm install uniq --save`命令，这个多出来的`--save`就可以自动添加依赖。
+
+
+我们去[官网](https://www.npmjs.com/package/uniq)看一下`uniq`的用法：
+
+```javascript
+	let uniq = require('uniq');
+
+	let arr = [1, 1, 2, 2, 3, 5];
+	uniq(arr);
+	console.log(arr);  //输出结果：[ 1, 2, 3, 5 ]
+
+```
+
+可以看出，这个包可以起到数组去重的作用。
+
+### 代码演示
+
+（1）module1.js：
+
+```javascript
+//暴露方式一：module.exports = value
+
+//暴露一个对象出去
+module.exports = {
+    name: '我是 module1',
+    foo(){
+        console.log(this.name);
+    }
+}
+
+//我们不能再继续写 module.exports = xxx。因为重新赋值，会把之前的赋值覆盖掉。
+
+```
+
+（2）module2.js：
+
+```javascript
+//暴露方式一：module.exports = value
+
+//暴露一个函数出去
+module.exports = function(){
+    console.log('我是 module2');
+}
+```
+
+注意，此时暴露出去的 exports 对象 等价于整个函数。
+
+（3）module3.js：
+
+```javascript
+//暴露方式二：exports.xxx = value
+
+//可以往export对象中不断地添加属性，进行暴露
+
+exports.foo1 = function(){
+    console.log('module3 中的 foo1 方法');
+}
+
+exports.foo2 = function(){
+    console.log('module3 中的 foo2 方法');
+}
+
+exports.arr = [1,1,2,2,3,5,11];
+
+```
+
+（4）app.js：（将其他模块汇集到主模块）
+
+```javascript
+//将其他模块汇集到主模块
+
+let uniq = require('uniq'); //引入时，第三方模块要放在自定义模块的上面
+
+let module1 = require('./modules/module1');
+let module2 = require('./modules/module2');
+let module3 = require('./modules/module3');
+
+//调用module1对象的方法
+module1.foo();
+
+//调用module2的函数
+module2();  //注意，在定义时，module2对象等价于整个函数function。所以，module2()的意思是，直接调用了函数。
+
+//调用module3中的属性
+module3.foo1();
+module3.foo2();
+
+uniq(module3.arr); //将module3中的数组进行去重操作
+console.log(module3.arr); //打印数组去重后的结果
+```
+
+这样的话，我们的代码就写完了。
+
+我们在命令行中输入`node app.js`，就可以把代码跑起来了。打印结果如下：
+
+```bash
+我是 module1
+我是 module2
+module3 中的 foo1 方法
+module3 中的 foo2 方法
+[ 1, 11, 2, 3, 5 ]
+
+```
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+## CommonJS 在浏览器端的实现
+
+这里可以用到[Browserify](http://browserify.org/)这个工具进行编译打包。Browserify 称为 CommonJS 的浏览器端的打包工具。
+
+
+
+
+
+
+
+
+
+## others
+
+
+### SeaJS 的介绍
+
+SeaJS：一个基于CMD规范实现的模块化开发解决方案。
+
+作者：Alibaba 玉伯。
+
+官网：<http://seajs.org/>
+
+GitHub：<https://github.com/seajs/seajs>
+
+现在官网变成了：<https://seajs.github.io/seajs/docs/>
+
+特性：
+
+- 简单友好的模块定义规范。
+
+- 自然直观的代码组织方式。
+
+
+20180303_2107.png
+
+
+
+
+
+
+
+
+### RequireJS（AMD）、SeaJS（CDM）、CommonJS、ES6 的对比
+
+1、RequireJS 和 AMD：
+
+
+AMD 是 RequireJS 在推广过程中对模块化定义的规范化产出。
+
+
+20180303_1653.png
+
+
+异步模块定义，特点是依赖前置。
+
+
+2、SeaJS 和 CMD：
+
+CMD 是 SeaJS 在推广过程中对模块化定义的规范化产出
+
+
+同步模块定义。
+
+```javascript
+	// 所有模块都通过 define 来定义
+	define(funtion(require, exports, module) {
+
+        //通过 require 引入依赖
+
+        var $ require(`jquery`);
+
+        var Spinning = require(`./spinning`);
+	})
+```
+
+SeaJS 是淘宝开发团队做的，知名度不如 RequireJS。
+
+3、CommonJS：
+
+CommonJS 的规范：module.exports
+
+服务器端的 Node.js 推荐使用 CommonJS 规范，来定义模块化开发。前端浏览器不支持 CommonJS 规范。
+
+20180303_1701.png
+
+
+以上三个都是 ES5里面的规范。
+
+4、ES6：
+
+ES6的特性：export/import
+
+20180303_1704.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+