update: Node.js 环境配置

04-JavaScript基础/01-JS简介.md

@@ -85,12 +85,14 @@ JavaScript运行在用户的终端网页上，而不是服务器上，所以我
 
 JavaScript基础分为三个部分：
 
-- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
+- **ECMAScript**：JavaScript 的**语法标准**。包括变量、表达式、运算符、函数、if语句、for语句等。
 
 - **DOM**：Document Object Model（文档对象模型），操作**页面上的元素**的API。比如让盒子移动、变色、改变大小、轮播图等等。
 
 - **BOM**：Browser Object Model（浏览器对象模型），操作**浏览器部分功能**的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
 
+通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。
+
 ## JavaScript 的特点
 
 ### 特点1：解释型语言

11-Node.js和模块化/01-Node.js介绍和环境配置.md

@@ -1,11 +1,14 @@
 
 
-
 ## Node.js的介绍
 
 ### 什么是 Node.js（官方解释）
 
-Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。
+Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
+
+Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。
+
+Node.js 的包管理器 npm 是全球最大的开源库生态系统。
 
 ![](http://img.smyhvae.com/20180301_1540.png)
 
@@ -16,6 +19,7 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
 - 通过自行开发的 libuv 库，调用操作系统资源。
 
 
+
 ### 什么是 Node.js（非官方解释）
 
 **Node.js是 JavaScript 语言在服务器端的运行环境（平台）**。Node.js 不是一门语言，也不是 JavaScript 的框架。
@@ -32,7 +36,13 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
 
 - 其次，Node 生态系统活跃，提供了大量的开源库，使得 JavaScript 语言能与操作系统进行交互（比如读写文件、新建子进程），在这个层次上，Node 又是属于 JavaScript 的工具库。
 
-### 为什么要学习服务器端开发
+## Node.js和服务器端开发
+
+> 在这一段，“服务器端开发”和“后台开发”是一个概念。
+
+### 前端同学为什么要学习后台开发
+
+- 了解前后端交互流程。
 
 - 能够和后台开发的程序员更佳紧密地结合、更顺畅地沟通。
 
@@ -40,14 +50,55 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
 
 - 拓宽知识视野和技术栈，能够站在全局的角度审视整个项目。
 
-### 为什么选择 Node.js 做后台开发
+### 为什么选择 Node.js 做后台开发（Node.js的优势）
 
-- 使用 JavaScript 语言 开发服务器端应用。
+1、使用 JavaScript 语言开发服务器端应用，**便于前端同学上手**（一些公司甚至要求前端工程师掌握 Node.js 开发）。
 
-- 一些公司要求前端工程师掌握 Node.js 开发。
+2、**性能高**。AO操作的性能可能没有优势，但运算方面的性能不错。
 
-- Node.js 生态系统活跃，提供了大量的开源库。
+3、**有利于和前端代码整合**，甚至共用部分代码。
 
+比如说，针对接口返回的各种字段，前后端都必须要做校验。此时，如果用 Node.js 来做后台开发的话，前后端可以共用校验的代码。
+
+4、Node.js 生态系统活跃，提供了大量的开源库。
+
+**思考**：限制语言能力的不是语言本身，而是语言的运行环境（平台）。
+
+### Node.js 的用途
+
+**1、中间层**。
+
+前端访问中间层，中间层再访问后台的 Java/C++ 服务。这样做的好处是：安全性（不会把主服务器暴露在外面）、提高性能（做缓存等）、降低主服务器的复杂度。
+
+当然，有时候做 Node.js 开发，是因为：后台人力不够，所以把后台开发的一部分工作量，转移给前端同学。
+
+**2、公司内部工具**。
+
+**3、小型服务**（比如管理系统）。
+
+需要声明的是：Node.js很难像 Java/C++ 那样，成为后台的主力开发语言。这并非是因为 Node.js的性能问题（实际上，Node.js的性能还不错），主要是因为，Node.js的框架的支持度不够，很难独立成为后台开发语言。
+
+### Node.js 的组成
+
+我们知道，JavaScript 的组成分为三个部分：
+
+- ECMAScript
+
+- DOM
+
+- BOM
+
+ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS 提供的API。
+
+而 Node.js 的组成分为：
+
+- **ECMAScript**。ECMAScript的所有语法在Node环境中都可以使用。
+
+- **Node 环境**提供的一些**附加API**(包括文件、网络、路径等等 API)。
+
+如下图所示：
+
+![](http://img.smyhvae.com/20200409_1545.png)
 
 ## Node.js的发展
 
@@ -79,6 +130,7 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
 - I/O阻塞
 
 
+
 ### 知名度较高的Node.js开源项目
 
 ![](http://img.smyhvae.com/20180301_2009.png)
@@ -100,9 +152,6 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
 - socket.io：实时通信框架。
 
 
-### Node.js的特点
-
-- 单线程
 
 
 
@@ -120,17 +169,30 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
 
 注意，我们以一定要用偶数版（V4、V6等)，不要用奇数版（比如V5），因为奇数版不稳定。
 
-我们并不推荐直接采用 Node.js.msi（windows）或者 Node.js.pkg（Mac） 安装包进行安装，原因如下：
+后续如果需要安装其他版本，可以这样做：重新下载最新的安装包，覆盖安装即可。
 
+但我们并不推荐直接采用 Node.js.msi（windows）或者 Node.js.pkg（Mac） 安装包进行安装，因为会产生如下问题。
 
-- 不方便 Node.js 版本的更新；
+**通过 Node.js 安装包产生的问题**：
 
-- 无法回滚到之前的版本；
+- 安装新版本时，以前版本安装的很多全局工具包，需要重新安装。
 
-- 无法在多个版本之间切换（在有些项目中，我们要使用 Node 的指定版本）。
+- 无法回滚到之前的版本。
+
+- 无法在多个版本之间切换（很多时候我们要使用特定版本）
 
 因此，我们暂时先不用安装 Node.js，稍后用 NVM 的方式来安装 Node.js。
 
+### Node.js 版本常识
+
+- 偶数版本为稳定版（0.6.x ，0.8.x ，8.10.x）
+
+- 奇数版本为非稳定版（0.7.x ，0.9.x ，9.11.x）
+
+- LTS（Long Term Support）
+
+参考链接：[node.js中LTS和Current的区别](https://blog.csdn.net/u012532033/article/details/73332099)
+
 
 ## Node.js 运行环境配置：通过 NVM（推荐）
 
@@ -454,7 +516,6 @@ NVM、Node、NPM 安装之后，目录分布如下：
 $ npm install npm -g
 ```
 
-
 ### 配置 NPM 的全局目录（暂略）
 
 NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。
@@ -466,32 +527,77 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议
 
 ### NPM的常用命令
 
-- npm init --yes
+查看 npm 当前版本：
 
-项目的初始化。执行完成后，会生成`package.json`文件。
+```bash
+npm -v
+```
 
-- npm install [package]
+更新 npm：
 
-只在当前工程下安装 package。
+```bash
+npm install npm@latest -g
 
-- npm install -g [package]
+```
 
-在全局环境下安装 package。
+项目初始化：（执行完成后，会生成`package.json`文件）
 
-- npm run [script]
+```bash
+npm init
+
+npm init --yes 默认配置
+```
+
+只在当前工程下安装指定的包：
+
+```bash
+npm install [package]
+```
+
+在全局阿浑惊吓安装指定的包：
+
+```
+npm install -g [package]
+```
+
+## 配置 npm 镜像源
+
+由于 npm 默认的下载地址在国外（npmjs.com），有时候会被墙，导致无法下载或者下载很慢。因此，我们可以尝试切换成，从其他的镜像源下载npm包。
+
+切换镜像源，有下面这几种方式：
+
+- 方式1：临时切换镜像源。
+
+- 方式2：通过 NRM 切换镜像源（最为推荐的方式）。
+
+- 方式3：cnpm。
+
+下面来分别讲一下。
+
+### 方式1：临时切换镜像源
+
+安装指定包的时候，通过追加 `--registry`参数即可。格式如下：
+
+```bash
+# 格式
+npm install [package] --registry [https://xxx]
+
+# 举例：在下载安装 express 这个包的时候，临时指定镜像源为 https://registry.npm.taobao.org
+npm install express --registry https://registry.npm.taobao.org
+```
 
 
-## NRM的安装(Win 和 Mac 通用)
+### 方式2：通过 NRM 切换镜像源（推荐）
 
-由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。
 
-**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。
+**NRM**：Node Registry Manager。作用是：**切换和管理npm包的镜像源**。
 
 - 项目地址：<https://www.npmjs.com/package/nrm>
 
 - GitHub地址： <https://github.com/Pana/nrm>
 
-安装 NRM：
+
+**安装 NRM**：
 
 ```bash
 	npm install -g nrm
@@ -510,7 +616,7 @@ nrm ls
 nrm use taobao
 ```
 
-效果入下：
+效果如下：
 
 ![](http://img.smyhvae.com/20180302_1215.png)
 
@@ -518,39 +624,38 @@ nrm use taobao
 推荐的国内加速镜像淘宝：<https://npm.taobao.org/>
 
 
-## 安装cnpm
+## 方式3：安装cnpm
 
 - 项目地址：<https://npm.taobao.org/>
 
-安装`cnpm`替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）：
+安装`cnpm`替换npm（npm 由于源服务器在国外，下载包的速度较慢，cnpm 会使用国内镜像）：
 
 ```bash
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 ```
 
-
 ![](http://img.smyhvae.com/20180302_2204.png)
 
 
 如果我们需要通过 cnpm 去安装一个包时，举例如下：
 
 ```bash
-	cnpm i vue
+	cnpm install vue
 ```
 
-解释： i  指的就是 install。
+这里的单词 `install` 可以简写成 `i`。
 
+## Node.js 的简单使用
 
-## Node 的使用
+我们可以输入`node`命令，然后在里面写 js 的代码。
 
-我们可以输入`node`命令，然后在里面写 js 的代码，也可以 通过 node 运行 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入：
+或者，也可以 通过 node 运行 指定的 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入：
 
 ```bash
 	node 01.js
 ```
 
-就可以执行  js 程序。
+就可以执行这个 js 程序，直接在命令行查看运行结果。
-
 
 
 ## 我的公众号

11-Node.js和模块化/02-Node.js模块化规范：CommonJS.md

@@ -4,7 +4,6 @@
 
 网站越来越复杂，js代码、js文件也越来越多，会遇到**一些问题**：
 
-
 - 文件依赖
 
 - 全局污染、命名冲突
@@ -27,7 +26,6 @@
 
 ## 模块化的理解
 
-
 ### 什么是模块化
 
 
@@ -37,7 +35,6 @@
 
 最早的时候，我们会把所有的代码都写在一个js文件里，那么，耦合性会很高（关联性强），不利于维护；而且会造成全局污染，很容易命名冲突。
 
-
 ### 模块化的好处
 
 - 避免命名冲突，减少命名空间污染
@@ -87,7 +84,6 @@
 那如何把这种模块化思维应用到前端来呢？这就产生了两种伟大的 js：RequireJS 和 SeaJS。
 
 
-
 ### 模块化规范
 
 服务器端规范：
@@ -126,12 +122,10 @@ PS：面试时，经常会问AMD 和 CMD 的区别。
 
 另外，还有ES6规范。
 
-这篇文章，我们来讲一下`CommonJS`。
+这篇文章，我们来讲一下`CommonJS`，它是 Node.js 使用的模块化规范。
-
 
 ## CommonJS 的基本语法
 
-
 ### CommonJS 的介绍
 
 
@@ -182,9 +176,11 @@ require(xxx)
 
 解释：
 
-- 下载的第三方模块：xxx直接为模块名（包名）。
+- 内置模块：xxx 为模块名（包名）
 
-- 自定义模块：xxx为模块文件路径
+- 下载的第三方模块：xxx为模块名（包名）。
+
+- 自定义模块：xxx为模块文件路径。
 
 
 ## CommonJS 在服务器端的实现举例
@@ -536,70 +532,6 @@ module3.foo2();
 
 
 
-## others
-
-
-### SeaJS 的介绍
-
-SeaJS：一个基于CMD规范实现的模块化开发解决方案。
-
-作者：Alibaba 玉伯。
-
-官网：<http://seajs.org/>
-
-GitHub：<https://github.com/seajs/seajs>
-
-现在官网变成了：<https://seajs.github.io/seajs/docs/>
-
-特性：
-
-- 简单友好的模块定义规范。
-
-- 自然直观的代码组织方式。
-
-![](http://img.smyhvae.com/20180303_2107.png)
-
-### RequireJS（AMD）、SeaJS（CDM）、CommonJS、ES6 的对比
-
-1、RequireJS 和 AMD：
-
-![](http://img.smyhvae.com/20180303_1653.png)
-
-异步模块定义，特点是依赖前置。
-
-2、SeaJS 和 CMD：
-
-
-同步模块定义。
-
-```javascript
-  // 所有模块都通过 define 来定义
-  define(funtion(require, exports, module) {
-
-        //通过 require 引入依赖
-
-        var $ require(`jquery`);
-
-        var Spinning = require(`./spinning`);
-  })
-```
-
-3、CommonJS：
-
-![](http://img.smyhvae.com/20180303_1701.png)
-
-以上三个都是 ES5里面的规范。
-
-4、ES6：
-
-ES6的特性：export/import
-
-![](http://img.smyhvae.com/20180303_1704.png)
-
-
-
-
-
 
 
 

11-Node.js和模块化/JavaScript模块化：CMD.md

@@ -253,3 +253,70 @@ define(function (require) {
 打印结果：
 
 ![](http://img.smyhvae.com/20180412_1955.png)
+
+
+
+
+
+
+## others
+
+
+### SeaJS 的介绍
+
+SeaJS：一个基于CMD规范实现的模块化开发解决方案。
+
+作者：Alibaba 玉伯。
+
+官网：<http://seajs.org/>
+
+GitHub：<https://github.com/seajs/seajs>
+
+现在官网变成了：<https://seajs.github.io/seajs/docs/>
+
+特性：
+
+- 简单友好的模块定义规范。
+
+- 自然直观的代码组织方式。
+
+![](http://img.smyhvae.com/20180303_2107.png)
+
+### RequireJS（AMD）、SeaJS（CDM）、CommonJS、ES6 的对比
+
+1、RequireJS 和 AMD：
+
+![](http://img.smyhvae.com/20180303_1653.png)
+
+异步模块定义，特点是依赖前置。
+
+2、SeaJS 和 CMD：
+
+
+同步模块定义。
+
+```javascript
+  // 所有模块都通过 define 来定义
+  define(funtion(require, exports, module) {
+
+        //通过 require 引入依赖
+
+        var $ require(`jquery`);
+
+        var Spinning = require(`./spinning`);
+  })
+```
+
+3、CommonJS：
+
+![](http://img.smyhvae.com/20180303_1701.png)
+
+以上三个都是 ES5里面的规范。
+
+4、ES6：
+
+ES6的特性：export/import
+
+![](http://img.smyhvae.com/20180303_1704.png)
+
+

11-Node.js和模块化/JavaScript模块化：ES6.md

@@ -1,10 +1,36 @@
 
+## 模块化开发的引入
+
+### JS开发的弊端
+
+JS 在使用时存在两大问题，而 Node.js 可以很好地避免这两个问题：
+
+- 文件依赖。比如 a 文件依赖 b 文件，b 文件依赖 c 文件。而 Node.js 中的文件依赖，不需要人工维护和人为分析。
+
+- 命名冲突。js 的各个文件是相互开放的，容易导致命名冲突。而 Node.js 是属于半封闭的状态，可以指定哪些内容是开放的，哪些内容是封闭的。
+
+Node.js 在解决这两个问题时，用到的就是模块化开发。
+
+### 软件开发中的模块化开发
+
+一个功能就是一个模块，多个模块可以组成完整的应用，抽离一个模块不会影响其他功能的运行。
+
+效果如下：
+
+![](http://img.smyhvae.com/20200409_1934.png)
+
+### Node.js 中的模块化开发
+
+Node.js 规定，一个 JS 文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法访问。
+
+模块内部可以使用 `exports` 对象进行成员导出， 使用 `require` 方法导入其他模块。效果如下：
+
+![](http://img.smyhvae.com/20200409_1932.png)
 
 ## ES6模块化的基本语法
 
 ### ES6模块化的说明
 
-
 **依赖模块需要编译打包处理**。原因如下：
 
 - （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过`Babel`将 ES6 转化为 ES5。

18-推荐链接/01-2020年Web前端最新导航.md

@@ -50,13 +50,6 @@
 
 中国区的高分项目，都在这里了。
 
-- GitHub 中国区排名：<https://githuber.cn/search?language=JavaScript>
-
-这个网站虽然比较小众，但排名还是相对比较准的。
-
-- GitHub 中国区排名：<http://githubrank.com/>
-
-这个排名很久没更新了，早就不准了；而且还经常打不开。
 
 - GitHub 全球排名：<https://gitstar-ranking.com/>
 
@@ -68,6 +61,15 @@
 
 2019-12备注：现在的 GitHub trending 已经不是严格按照新增的 star 数来排行了。所以说，这个排名，也不是那么权威了。
 
+- GitHub 中国区排名：<https://githuber.cn/search?language=JavaScript>
+
+这个网站虽然比较小众，但排名还是相对比较准的。
+
+- GitHub 中国区排名：<http://githubrank.com/>
+
+这个排名很久没更新了，早就不准了；而且还经常打不开。
+
+
 ## 资讯
 
 - 36氪：<https://36kr.com/>

18-推荐链接/02-GitHub项目推荐.md

@@ -28,6 +28,11 @@
 
 - 极客时间 App 的《数据结构与算法之美》
 
+## Vue 教程
+
+- 你也许不知道的 Vuejs：<https://github.com/yugasun/You-May-Not-Know-Vuejs>
+
+
 ## 前端教程类
 
 ## 其他

18-推荐链接/04-前端文章推荐.md

@@ -1,8 +1,15 @@
 
 
+
+### 2020-04-09
+
+- [使用 ImgBot 自动为 Github 项目优化图片](https://www.cnblogs.com/lfri/p/12257277.html)
+
+
 ### 2020-03-31
 
 - [基于Vue2.0 + elementUI 后台管理平台](https://www.jianshu.com/p/deeddeabdef8)
 
 这个elementUI的demo比较完整。项目地址在 [GitHub](https://github.com/xiahuahua/vue-admin-demo)上。
 
+