webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 目录结构调整

Browse Source
This commit is contained in:
qianguyihao
2020-04-19 18:24:43 +08:00
parent 8e979bff7d
commit 6fbb5659e4
106 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

786
10-Node.js和模块化/01-Node.js介绍和环境配置.md Normal file
View File

@@ -0,0 +1,786 @@
## Node.js的介绍
### 什么是 Node.js
Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。Node.js 的包管理工具 npm 是全球最大的开源库生态系统。
![](http://img.smyhvae.com/20180301_1540.png)
如上图所示：
- Node.js 不是一门语言，也不是 JavaScript 的框架，**Node.js是 JavaScript 语言在服务器端的运行环境（平台）**。
- Node.js 内部采用 Google Chrome 的 V8 引擎，作为 JavaScript 语言解释器；同时结合自行开发的 libuv 库，扩展了 JS 的功能，使得 JS 既可以在前端进行DOM操作（浏览器端），又可以在后端调用操作系统资源（I/O操作、文件读写、数据库操作等），是目前最简单的全栈式语言。
### Node.js的特点
- 事件驱动
- 非阻塞IO模型（异步）
- 轻量和高效
### 运行环境（平台）的含义
首先，JavaScript 语言通过 Node 在服务器上运行，在这个意义上，Node 有点像 JavaScript 虚拟机。
其次，Node 生态系统活跃，提供了大量的开源库，使得 JavaScript 语言能与操作系统进行交互（比如读写文件、新建子进程），在这个层次上，Node 又是属于 JavaScript 的工具库。
**引申**：
与PHP、JSP、Python、Perl、Ruby的“既是语言，也是平台”不同，Node.js的使用JavaScript进行编程，运行在 Chrome 的 V8 引擎上。
与PHP、JSP等相比（PHP、JSP、.net都需要运行在服务器程序上，Apache、Naginx、Tomcat、IIS。
），Node.js跳过了Apache、Naginx、IIS等HTTP服务器，它自己不用建设在任何服务器软件之上。Node.js的许多设计理念与经典架构（LAMP = Linux + Apache + MySQL + PHP）有着很大的不同，可以提供强大的伸缩能力。Node.js没有web容器。
## Node.js和服务器端开发
> 在这一段，“服务器端开发”和“后台开发”是一个概念。
### 前端同学为什么要学习后台开发
- 了解前后端交互流程。
- 能够和后台开发的程序员更佳紧密地结合、更顺畅地沟通。
- 当网站的业务逻辑需要前置时，前端人员需要学习一些后台开发的技术，以完成相应的任务。
- 拓宽知识视野和技术栈，能够站在全局的角度审视整个项目。
### 为什么选择 Node.js 做后台开发（Node.js的优势）
1、使用 JavaScript 语言开发服务器端应用，**便于前端同学上手**（一些公司甚至要求前端工程师掌握 Node.js 开发）。
2、**性能高**。AO操作的性能可能没有优势，但运算方面的性能不错。
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的发展
### Node 的历史
Node.js 诞生于 2009 年，由 Joyent 的员工 Ryan Dahl 开发而成, 目前官网最新版本已经更新到 13.x.x版本，最新稳定的是10.15.3。
- 2008年左右，随着 Ajax 的逐渐普及，Web 开发逐渐走向复杂化，系统化；
- 2009年2月，Ryan Dahl 想要创建一个轻量级，适应现代 Web 开发的平台；
- 2009年5月，Ryan Dahl 在 GitHub 中开源了最初版本，同年11月，JSConf 就安排了 Node 讲座；
- 2010年底，Joyent 公司资助，Ryan Dahl 也加入了该公司，专门负责 Node 的开发；
- 2011年7月，在微软的支持下登陆 Windows 平台。PS：node 的生产环境基本是在 Linux 下。
据 Node.js 创始人 Ryan Dahl 回忆，他最初希望采用 Ruby，但是 Ruby 的虚拟机效率不行。
注意：是 Node 选择了 JavaScript，不是 JavaScript 发展出来了一个 Node。
### Node.js的主要应用领域
- RESTFul API
- 实时通信：如消息推送等
- 高并发
- I/O阻塞
### 知名度较高的Node.js开源项目
![](http://img.smyhvae.com/20180301_2009.png)
- express：Node.js中著名的web服务器框架。
- Koa：下一代的 Node.js 的 Web 框架。
- mocha：功能强大的 node.js 测试框架。
- PM2：node 本来是单进程的，PM2可以实现和管理多进程。
- jade：非常优秀的模板引擎，不仅限于 js 语言。
- CoffeeScript：用简洁的方式展示 JavaScript 优秀的部分。
- Atom：文本编辑器。
- socket.io：实时通信框架。
## Node.js 运行环境配置：通过 Node.js 安装包（不推荐）
去 Node.js 的[官网](https://nodejs.org/en/)下载安装包：
![](http://img.smyhvae.com/20180301_1505.png)
我们也可以在<https://nodejs.org/en/download/releases/> 里下载历史版本。
![](http://img.smyhvae.com/20180301_1507.png)
注意，我们以一定要用偶数版（V4、V6等)，不要用奇数版（比如V5），因为奇数版不稳定。
后续如果需要安装其他版本，可以这样做：重新下载最新的安装包，覆盖安装即可。
但我们并不推荐直接采用 Node.js.msi（windows）或者 Node.js.pkg（Mac） 安装包进行安装，因为会产生如下问题。
**通过 Node.js 安装包产生的问题**：
- 安装新版本时，以前版本安装的很多全局工具包，需要重新安装。
- 无法回滚到之前的版本。
- 无法在多个版本之间切换（很多时候我们要使用特定版本）
因此，我们暂时先不用安装 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（推荐）
**NVM**：node.js version manager，用来管理 node 的版本。
**我们可以先安装 NVM，然后通过 NVM 安装 Node.js**。这是官方推荐的做法。
Windows 和 Mac 下安装的Node.js 的步骤如下。
### Windows 系统安装 Node.js
**1、安装 NVM**：
（1）我们去 <https://github.com/coreybutler/nvm-windows/releases> 下载 NVM 的安装包：
![](http://img.smyhvae.com/20180301_1603.png)
下载下来后，直接解压到 `D:\web`目录下：
![](http://img.smyhvae.com/20180301_1610.png)
（2）在上面的目录中，新建一个`settings.txt`文件，里面的内容填充如下：
```bash
root: D:\web\nvm
path: D:\web\nodejs
arch: 64
proxy
```
上方内容的解释：
- root 配置为：当前 nvm.exe 所在的目录
- path 配置为：node 快捷方式所在的目录
- arch 配置为：当前操作系统的位数（32/64）
- proxy 不用配置
（3）配置环境变量：
- `NVM_HOME` = `D:\web\nvm`（当前 nvm.exe 所在目录）
- `NVM_SYMLINK` = `D:\web\nodejs` （node 快捷方式所在的目录）
- PATH += `;%NVM_HOME%;%NVM_SYMLINK%`
配置成功后，重启资源管理器。
**2、验证：**(在 cmd 命令行中输入命令)
（1）输入`nvm`命令查看环境变量是否配置成功：
![](http://img.smyhvae.com/20180301_1645.png)
（2）输入 `nvm ls`，查看已安装的所有 node 版本。
（3）输入 `nvm -v`，查看 已安装的 nvm 版本。
（4）输入 `node -v`，查看正在使用的 node 版本。
- **参考链接**：[安装npm，nvm，node](https://segmentfault.com/a/1190000011114680)
如果 Node 安装失败，可以参考上面这个链接。
**3、安装指定版本的 Node.js**：
```bash
nvm install 版本号
# 举例
nvm install 8.10.0
```
输入 `node -v`，查看当前使用的 node 版本。
关于 NVM 的常用命令，详见下一段。
### Mac 系统安装 Node.js
**1、安装 NVM**：
（1）打开 终端.app，输入：
```bash
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
```
安装成功的界面：
![](http://img.smyhvae.com/20180302_2126.png)
完成后，nvm就被安装在了`~/.nvm`下。
如果发现安装失败：
![](http://img.smyhvae.com/20180302_2111.png)
原因：Xcode 软件进行过更新。
解决办法：打开 Xcode 软件，同意相关内容即可。
（2）配置环境变量：
编辑器打开`~/.bash_profile`文件，如果不会就输入`open ~/.bash_profile`。
（补充：如果你的Mac电脑里找不到`~/.bash_profile`文件，那就找找有没有`~/.profile`文件，或者`~/.bashrc`文件，或者`~/.zshrc`文件）。
在最后一行输入：
```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
```
如果你发现文件中已经存在了上面这行代码，就不用往里面加了。这一步的作用是每次新打开一个bash，nvm都会被自动添加到环境变量中。
最后，输入 `source ~/.bash_profile`重启环境变量的配置。
PS：NVM 现在已经不支持 Homebrew 的方式来安装了。
参考链接：<https://www.jianshu.com/p/a3f8778bc0a1>
**2、验证：**(在 终端命令行中输入命令)
（1）输入 `nvm` 命令查看环境变量是否配置成功：
（2）输入 `nvm ls`，查看已安装的所有 node 版本。
（3）输入 `nvm -v`，查看 已安装的 nvm 版本。
（4）输入 `node -v`，查看正在使用的 node 版本。
**3、安装指定版本的 Node.js**：
和Windows下一样，也是执行如下命令：
```bash
nvm install 版本号
# 举例
nvm install 8.10.0
```
网速有点慢，要稍等。
![](http://img.smyhvae.com/20180302_2148.png)
输入 `node -v`，查看当前使用的 node 版本。
安装好 `Node` 之后，`npm` 也会自动安装的，输入 `npm -v`，查看 npm 的版本。
关于 NVM 的常用命令，详见下一段。
## NVM 的常用命令
> 注意，这一段说的是 NVM 的常用命令，不是 Node 的常用命令。
查看当前使用的 nvm 版本：
```bash
nvm -v
nvm --version
```
查看本地安装的所有的 Node.js 版本：
```bash
nvm list|ls
```
**安装指定版本的 Node.js：**
```bash
nvm install 版本号
# 举例
nvm install 8.10.0
```
卸载指定版本 Node.js：
```bash
nvm uninstall 版本号
```
切换使用指定版本的node：
```bash
nvm use 版本号
```
## Node.js 的常用命令
查看 node 的版本：
```bash
$ node -v
```
执行脚本字符串：
```bash
$ node -e 'console.log("Hello World")'
```
运行脚本文件：
```bash
$ node index.js
$ node path/index.js
$ node path/index
```
查看帮助：
```bash
$ node --help
```
**进入 REPL 环境：**
```bash
$ node
```
REPL 的全称：Read、Eval、 Print、Loop。类似于浏览器的控制台。
![](http://img.smyhvae.com/20180301_1900.png)
如果要退出 REPL 环境，可以输入`.exit` 或 `process.exit() `。
在 VS Code 里，我们可以在菜单栏选择“帮助->切换开发人员工具”，打开console控制台。
## 包和 NPM
### 什么是包
由于 Node 是一套轻内核的平台，虽然提供了一系列的内置模块，但是不足以满足开发者的需求，于是乎出现了包（package）的概念：
与核心模块类似，就是将一些预先设计好的功能或者说 API 封装到一个文件夹，提供给开发者使用。
Node 本身并没有太多的功能性 API，所以市面上涌现出大量的第三方人员开发出来的 Package。
### 包的加载机制
如果 Node中自带的包和第三方的包名冲突了，该怎么处理呢？原则是：
- 先在系统核心（优先级最高）的模块中找；
- 然后到当前项目中 node_modules 目录中找。
比如说：
```javascript
requiere(`fs`)
```
那加载的肯定是系统的包。所以，我们尽量不要创建一些和现有的包重名的包。
### NPM的概念
>包的生态圈一旦繁荣起来，就必须有工具去来管理这些包。NPM 应运而生。
**NPM**：Node Package Manager。官方链接： <https://www.npmjs.com/>
随着时间的发展，NPM 出现了两层概念：
- 一层含义是 Node 的开放式模块登记和管理系统，亦可以说是一个生态圈，一个社区。
- 另一层含义是 Node 默认的模块管理器，是一个命令行下的软件，用来安装和管理 Node 模块。
### NPM 的安装（不需要单独安装）
NPM 不需要单独安装。默认在安装 Node 的时候，会连带一起安装 NPM：
![](http://img.smyhvae.com/20180302_1105.png)
NVM、Node、NPM 安装之后，目录分布如下：
![](http://img.smyhvae.com/20180302_1134.png)
![](http://img.smyhvae.com/20180302_1137.png)
![](http://img.smyhvae.com/20180302_1138.png)
输入 `npm -v`，查看 npm 的版本：
![](http://img.smyhvae.com/20180302_1139.png)
如果上方命令无效，可能是之前的 node 并没有完全安装成功。解决办法：<https://segmentfault.com/a/1190000011114680>
另外，Node 附带的 NPM 可能不是最新版本，可以用下面的命令，更新到最新版本：
```bash
$ npm install npm -g
```
### 配置 NPM 的全局目录（暂略）
NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。
输入`npm config ls`，查看：
![](http://img.smyhvae.com/20180302_1210.png)
## NPM的常用命令
查看 npm 当前版本：
```bash
npm -v
```
更新 npm：
```bash
npm install npm@latest -g
```
项目初始化：（执行完成后，会生成`package.json`文件）
```bash
npm init
# 快速跳过问答式界面，选择默认配置
npm init --yes
```
只在当前工程下安装指定的包：
```bash
npm install [package]
```
在全局安装指定的包：
```
npm install -g [package]
```
安装的包只用于开发环境，不用于生产环境：（会出现在 package.json 文件中的 devDependencies 属性中）
```bash
npm install [package] --save-dev
# 或者
npm install [package] -D
```
安装的包需要发布到生产环境：（会出现在 package.json 文件中的 dependencies 属性中）
```bash
npm install [package] --save
# 或者
npm install [package] -S
```
查看当前目录下已安装的node包：
```bash
npm list
```
查看全局已经安装的node包：
```bash
npm list -g
```
查看npm帮助命令：
```bash
npm --help
```
查看指定命令的帮助：
```bash
npm [指定命令] --help
```
更新指定的包：
```bash
npm update [package]
```
卸载指定的包：
```bash
npm uninstall [package]
```
查看配置信息：
```bash
npm config list
```
查看本地安装的指定包的信息，没有则显示empty：
```bash
npm ls [package]
```
查看全局安装的指定包的信息，没有则显示empty：
```bash
npm ls [package] -g
```
查看远程npm上指定包的所有版本信息：
```bash
npm info [package]
```
查看当前包的安装路径：
```bash
npm root
```
查看全局包的安装路径：
```bash
npm root -g
```
## 配置 npm 镜像源
由于 npm 默认的下载地址在国外（npmjs.com），有时候会被墙，导致无法下载或者下载很慢。因此，我们可以尝试切换成，从其他的镜像源下载npm包。
切换镜像源，有下面这几种方式：
- 方式1：临时切换镜像源。
- 方式2：切换镜像源
- 方式3：通过 NRM 切换镜像源（最为推荐的方式）。
- 方式4：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
```
### 方式2：切换镜像源
```bash
npm config set registry https://registry.npm.taobao.org
```
执行上述命令后，以后下载所有 npm 包的时候，都会改为使用淘宝的镜像源。
### 方式3：通过 NRM 切换镜像源（推荐）
**NRM**：Node Registry Manager。作用是：**切换和管理npm包的镜像源**。
- 项目地址：<https://www.npmjs.com/package/nrm>
- GitHub地址： <https://github.com/Pana/nrm>
**安装 NRM**：
```bash
npm install -g nrm
```
![](http://img.smyhvae.com/20180302_1208.png)
**NRM 的常用命令：**
```bash
# 显示全部的镜像
nrm ls
# 使用淘宝的镜像
nrm use taobao
```
效果如下：
![](http://img.smyhvae.com/20180302_1215.png)
推荐的国内加速镜像淘宝：<https://npm.taobao.org/>
## 方式4：安装cnpm
- 项目地址：<https://npm.taobao.org/>
安装`cnpm`替换npm（npm 由于源服务器在国外，下载包的速度较慢，cnpm 会使用国内镜像）：
```bash
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
![](http://img.smyhvae.com/20180302_2204.png)
以后我们就可以通过 cnpm 命令去安装一个包。举例如下：
```bash
# 安装 vue 这个包
cnpm install vue
```
这里的单词 `install` 可以简写成 `i`。
## Node.js 的简单使用
我们可以输入`node`命令，然后在里面写 js 的代码。
或者，也可以 通过 node 运行 指定的 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入：
```bash
node 01.js
```
就可以执行这个 js 程序，直接在命令行查看运行结果。
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20200101.png)

698
10-Node.js和模块化/02-Node.js模块化规范：CommonJS.md Normal file
View File

@@ -0,0 +1,698 @@
## 前言
网站越来越复杂，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规范]()**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
```
同步加载模块；
依赖就近，延迟执行：require(./a) 直接引入。或者Require.async 异步引入。 //依赖就近：执行到这一部分的时候，再去加载对应的文件。
define 定义模块， export 导出：define(function(require, export, module){});
```
PS：面试时，经常会问AMD 和 CMD 的区别。
另外，还有ES6规范。
这篇文章，我们来讲一下`CommonJS`，它是 Node.js 使用的模块化规范。
## CommonJS 的基本语法
### CommonJS 的介绍
[CommonJS](http://www.commonjs.org/)：是 Node.js 使用的模块化规范。也就是说，Node.js 就是基于 CommonJS 这种模块化规范来编写的。
CommonJS 规范规定：每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口对象。加载某个模块，其实是加载该模块的 module.exports 对象。
在 CommonJS 中，每个文件都可以当作一个模块：
- 在服务器端：模块的加载是运行时同步加载的。
- 在浏览器端: 模块需要提前编译打包处理。首先，既然同步的，很容易引起阻塞；其次，浏览器不认识`require`语法，因此，需要提前编译打包。
### 模块的暴露和引入
Node.js 中只有模块作用域，两个模块之间的变量、方法，默认是互不冲突，互不影响，这样就导致一个问题：模块 A 要怎样使用模块B中的变量&方法呢？这就需要通过 `exports` 关键字来实现。
Node.js中，每个模块都有一个 exports 接口对象，我们可以把公共的变量、方法挂载到这个接口对象中，其他的模块才可以使用。
接下来详细讲一讲模块的暴露、模块的引入。
### 暴露模块的方式一： exports
`exports`对象用来导出当前模块的公共方法或属性。别的模块通过 require 函数调用当前模块时，得到的就是当前模块的 exports 对象。
**语法格式**：
```js
// 相当于是：给 exports 对象添加属性
exports.xxx = value
```
这个 value 可以是任意的数据类型。
**注意**：暴露的关键词是`exports`，不是`export`。其实，这里的 exports 类似于 ES6 中的 export 的用法，都是用来导出一个指定名字的对象。
**代码举例**：
```js
const name = 'qianguyihao';
const foo = function (value) {
return value * 2;
};
exports.name = name;
exports.foo = foo;
```
### 暴露模块的方式二： module.exports
`module.exports`用来导出一个默认对象，没有指定对象名。
语法格式：
```javascript
// 方式一：导出整个 exports 对象
module.exports = value;
// 方式二：给 exports 对象添加属性
module.exports.xxx = value;
```
这个 value 可以是任意的数据类型。
代码举例：
```js
// 方式1
module.exports = {
name: '我是 module1',
foo(){
console.log(this.name);
}
}
// 我们不能再继续写 module.exports = value2。因为重新赋值，会把 exports 对象 之前的赋值覆盖掉。
// 方式2
const age = 28;
module.exports.age = age;
```
`module.exports` 还可以修改模块的原始导出对象。比如当前模块原本导出的是一个对象，我们可以通过 module.exports 修改为导出一个函数。如下：
```js
module.exports = function () {
console.log('hello world')
}
```
### exports 和 module.exports 的区别
最重要的区别：
- 使用exports时，只能单个设置属性 `exports.a = a;`
- 使用module.exports时，既单个设置属性 `module.exports.a`，也可以整个赋值 `module.exports = obj`。
其他要点：
- Node中每个模块的最后，都会执行 `return: module.exports`。
- Node中每个模块都会把 `module.exports`指向的对象赋值给一个变量 `exports`，也就是说 `exports = module.exports`。
- `module.exports = XXX`，表示当前模块导出一个单一成员，结果就是XXX。
- 如果需要导出多个成员，则必须使用 `exports.add = XXX; exports.foo = XXX`。或者使用 `module.exports.add = XXX; module.export.foo = XXX`。
### 问题: 暴露的模块到底是谁？
**答案**：暴露的本质是`exports`对象。【重要】
比如，方式一的 `exports.a = a` 可以理解成是，**给 exports 对象添加属性**。方式二的 `module.exports = a`可以理解成是给整个 exports 对象赋值。方式二的 `module.exports.c = c`可以理解成是给 exports 对象添加属性。
Node.js 中每个模块都有一个 module 对象，module 对象中的有一个 exports 属性称之为**接口对象**。我们需要把模块之间公共的方法或属性挂载在这个接口对象中，方便其他的模块使用。
### 引入模块的方式：require
require函数用来在一个模块中引入另外一个模块。传入模块名，返回模块导出对象。
**语法格式**：
```js
const module1 = require('模块名');
```
解释：
- 内置模块：require的是**包名**。
- 下载的第三方模块：require的是**包名**。
- 自定义模块：require的是**文件路径**。文件路径既可以用绝对路径，也可以用相对路径。后缀名`.js`可以省略。
**代码举例**：
```js
const module1 = require('./main.js');
const module2 = require('./main');
const module3 = require('Demo/src/main.js');
```
**require()函数的两个作用**：
- 执行导入的模块中的代码。
- 返回导入模块中的接口对象。
### 主模块
主模块是整个程序执行的入口，可以调度其他模块。
```bash
# 运行main.js启动程序。此时，main.js就是主模块
$ node main.js
```
### 模块的初始化
一个模块中的 JS 代码仅在模块**第一次被使用时**执行一次，并且在使用的过程中进行初始化，然后会被缓存起来，便于后续继续使用。
代码举例：
（1）calModule.js:
```js
var a = 1;
​
function add () {
return ++a;
}
​
exports.add = add;
```
（2）main.js：（在 main.js 中引入 hello.js 模块）
```js
var addModule1 = require('./calModule')
var addModule2 = require('./calModule')
​
console.log(addModule1.add());
console.log(addModule2.add());
```
在命令行执行 `node main.js` 运行程序，打印结果：
```bash
2
3
```
从打印结果中可以看出，`calModule.js`这个模块虽然被引用了两次，但只初始化了一次。
## CommonJS 在服务器端的实现举例
### 1、初始化项目
在工程文件中新建如下目录和文件：
```
modules
| module1.js
| module2.js
| module3.js
app.js
```
然后在根目录下新建如下命令：
```
npm init
```
然后根据提示，依次输入如下内容：
- **包名**：可以自己起包名，也可以用默认的包名。注意，包名里不能有中文，不能有大写。
- **版本**：可以用默认的版本 1.0.0，也可以自己修改包名。
其他的参数，一路回车即可。效果如下：
![](http://img.smyhvae.com/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
```
安装成功后，根目录下会自动生成相应的文件：
![](http://img.smyhvae.com/20180410_1450.png)
需要说明的是，我的node版本是 v8.10.0（v8以上），对应的 npm 版本是 v5.6.0，版本比较高，因此，当我输入完`npm install uniq`之后，`package.json`中就会自动添加`uniq`包的依赖：
![](http://img.smyhvae.com/20180410_1855.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 ]
```
可以看出，这个包可以起到数组去重的作用。
### 3、自定义模块
（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 ]
```
## CommonJS 基于浏览器端的实现举例
### 1、初始化项目
在工程文件中新建如下目录和文件：
```
js
dist //打包生成文件的目录
src //源码所在的目录
| module1.js
| module2.js
| module3.js
| app.js //应用主源文件
index.html //因为CommonJS是基于浏览器端，js文件要跑在浏览器的页面上，所以要有这个html页面
```
然后在根目录下新建如下命令：
```
npm init
```
然后根据提示，依次输入如下内容：
- **包名**：可以自己起包名，也可以用默认的包名。注意，包名里不能有中文，不能有大写。
- **版本**：可以用默认的版本 1.0.0，也可以自己修改包名。
其他的参数，一路回车即可。
于是，根目录下会自动生成`package.json`这个文件。点进去看一下：
```json
{
"name": "commonjs_browser",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
```
### 2、下载第三方包：Browserify
这里需要用到[Browserify](http://browserify.org/)这个工具进行编译打包。Browserify 称为 CommonJS 的浏览器端的打包工具。
输入如下命令进行安装：（两个命令都要输入）
```javascript
npm install browserify -g //全局
npm install browserify --save-dev //局部。
```
上面的代码中，`-dev`表示开发依赖。这里解释一下相关概念：
- 开发依赖：当前这个包，只在开发环境下使用。
- 运行依赖：当前这个包，是在生产环境下使用。
### 3、自定义模块 & 代码运行
（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 方法');
}
```
（4）app.js：（将其他模块汇集到主模块）
```javascript
let module1 = require('./module1'); // ./ 指的是当前路径
let module2 = require('./module2');
let module3 = require('./module3');
module1.foo();
module2();
module3.foo1();
module3.foo2();
```
引入的路径解释：
- `./`是相对路径，指的是当前路径（app.js的当前路径是src）
到此，我们的主要代码就写完了。
但是，如果我们直接在index.html中，像下面这样写，是不行的：（因为浏览器不认识 require 关键字）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./js/src/app.js"></script>
</body>
</html>
```
为了能够让index.html引入app.js，我们需要输入如下命令：
打包处理js:
```
browserify js/src/app.js -o js/dist/bundle.js
```
然后在index.html中引入打包后的文件：
```html
<script type="text/javascript" src="js/dist/bundle.js"></script>
```

354
10-Node.js和模块化/03-Node.js内置模块：fs文件模块.md Normal file
View File

@@ -0,0 +1,354 @@
## Node.js 的API文档
Node.js 的API文档（英文）： <https://nodejs.org/docs/latest-v8.x/api/index.html>
Node.js 的API文档（中文）：<http://nodejs.cn/api/>
查阅文档时，稳定指数如下：
- 红色：废弃。
- 橙色：实验。表示当前版本可用，其他版本不确定。也许不向下兼容，建议不要在生产环境中使用该特性。
- 绿色：稳定。与 npm 生态系统的兼容性是最高的优先级。
## Node.js 中模块的分类
Node.js 应用由模块组成，采用 CommonJS 模块规范。Node.js中的模块分为三种：
- 内置模块
- 第三方模块
- 自定义模块
下面简单介绍一下。
### 1、内置模块
```js
const process = require('process');
const path = require('path');
console.log(process.version);
console.log(path.resolve('../'));
```
require方法用于加载模块。
### 2、require 加载第三方包的机制
```js
const express = require('express');
```
require 加载第三方包的机制：
（1）第三方包安装好后，这个包一般会存放在当前项目的 node_modules 文件夹中。我们找到这个包的 package.json 文件，并且找到里面的main属性对应的入口模块，这个入口模块就是这个包的入口文件。
（2）如果第三方包中没有找到package.json文件，或者package.json文件中没有main属性，则默认加载第三方包中的index.js文件。
（3）如果在 node_modules 文件夹中没有找到这个包，或者以上所有情况都没有找到，则会向上一级父级目录下查找node_modules文件夹，查找规则如上一致。
（4）如果一直找到该模块的磁盘根路径都没有找到，则会报错：can not find module xxx。
### 3、自定义模块（module）：
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
举例：
```
var example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6
```
## 读取文件
今天这篇文章，重点讲一下 Node 内置模块中的 **fs（文件处理模块）**。
在使用文件模块之前，记得先导入：
```js
// 导入文件模块
const fs = require('fs');
```
fs 的英文全称是 File System。fs 模块提供了很多 api 方法，我们首先应该学习的方法是**文件读取**。
Node中文件读取的方式主要有以下几种。
### 异步读取文件 fs.readFile()
语法格式：
```js
fs.readFile(file[, options], callback(error, data))
```
代码举例：
```javascript
const fs = require('fs');
fs.readFile('hello.txt', 'utf8', (err, data) => {
if (err) {
// 失败
console.log(err)
} else {
// 成功
console.log('异步读取数据：' + data2)
}
});
```
如果需要嵌套读取多个文件，可以用 promise 或者 async ... await 进行封装。代码举例如下。
### promise 封装 fs.readFile()
```js
const fs = require('fs');
function fsRead(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, { flag: 'r', encoding: "utf-8" }, (err, data) => {
if (err) {
//失败执行的内容
reject(err)
} else {
//成功执行的内容
resolve(data)
}
})
})
}
var promise1 = fsRead('hello1.txt')
promise1.then(res1 => {
console.log(res1);
return fsRead('hello2.txt');
}).then(res2 => {
console.log(res2);
return fsRead('hello3.txt');
}).then(res3 => {
console.log(res);
})
```
### async ... await 封装 fs.readFile()
这个写法更为简洁，推荐。
```js
var fs = require('fs');
function fsRead(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, { flag: 'r', encoding: "utf-8" }, (err, data) => {
if (err) {
//失败执行的内容
reject(err)
} else {
//成功执行的内容
resolve(data)
}
})
})
}
async function ReadList() {
var res1 = await fsRead('hello1.txt');
var res2 = await fsRead('hello2.txt');
var res3 = await fsRead('hello3.txt');
}
// 执行方法
ReadList();
```
### 同步读取文件 fs.readFileSync()
语法格式：
```js
fs.readFileSync(file[, options])
```
代码举例：
```javascript
const fs = require('fs');
try {
const data = fs.readFileSync('hello.txt', 'utf8');
console.log(data);
} catch(e) {
// 文件不存在，或者权限错误
throw e;
}
```
### Node.js 中的同步和异步的区别
fs模块对文件的几乎所有操作都有同步和异步两种形式。例如：readFile() 和 readFileSync()。
区别：
- 同步调用会阻塞代码的执行，异步则不会。
- 异步调用会将 读取任务 下达到任务队列，直到任务执行完成才会回调。
- 异常处理方面：同步必须使用 try catch 方式，异步可以通过回调函数的第一个参数。【重要】
## 写入文件
语法格式：
```js
fs.write(fd, string[, position[, encoding]], callback)
```
async ... await 封装：
```js
let fs = require('fs')
function writeFs(path, content) {
return new Promise(function (resolve, reject) {
fs.writeFile(path, content, { flag: "a", encoding: "utf-8" }, function (err) {
if (err) {
//console.log("写入内容出错")
reject(err)
} else {
resolve(err)
//console.log("写入内容成功")
}
})
})
}
async function writeList() {
await writeFs('1.html', "<h1>qianguyihao</h1>");
await writeFs('2.html', "<h1>hello world</h1>");
await writeFs('3.html', "<h1>永不止步</h1>");
}
writeList()
```
## 删除文件
语法格式：
```js
fs.unlink(path, callback)
```
参数说明：
- path：文件路径。
- callback：回调函数。
代码举例：
```js
fs.unlink('path/file.txt', (err) => {
if (err) throw err;
console.log('文件删除成功');
});
```
备注：`fs.unlink()` 不能用于删除目录。 如果要删除目录，可以使用 `fs.rmdir()`。
## Buffer
通过 Buffer 开辟的内存空间，都是连续的内存空间，所以效率比较高。
代码举例1：
```js
// 将字符串转成 buffer 对象
const str = 'qianguyihao';
let buffer = Buffer.from(str);
console.log(buffer); // 输出16进制编码
console.log(buffer.toString()); // 输出字符串：qianguyihao
```
代码举例2：
```js
// 从内存中开辟一个新的缓冲区
let buffer = Buffer.alloc(20);
buffer[0] = 'a';
console.log(buffer);
```
## 读取目录
语法格式：
```js
fs.mkdir(path[, options], callback)
```
参数说明：
- path：文件路径。
- options参数可以是：
- recursive：是否以递归的方式创建目录，默认为 false。
- mode：设置目录权限，默认为 0777。
代码举例：
```js
var fs = require("fs");
​
console.log("查看 /tmp 目录");
fs.readdir("/tmp/",function(err, files){
if (err) {
return console.error(err);
}
files.forEach( function (file){
console.log( file );
});
});
```
其他的还有：（暂略）
- 删除目录
- 输入输出

142
10-Node.js和模块化/04-Node.js内置模块：path路径模块.md Normal file
View File

@@ -0,0 +1,142 @@
## path 路径模块
Node.js 通过`path`这个内置模块，提供了一些路径操作的API，具体可以参考官方的api文档。这里列举一些常用的API。
### path.extname() 获取文件/路径的扩展名
语法格式：
```js
path.extname(myPath);
```
代码解释：
- 获取 `myPath` 这个文件或者路径的扩展名。
- `myPath` 这个参数要求是字符串。如果 `myPath` 不是字符串，则抛出 TypeError。
代码举例：
```js
const path = require('path');
path.extname('hello.txt'); // 返回 '.txt'
path.extname('www.qianguyihao.com'); // 返回 '.com'
path.extname('index.coffee.md'); // 返回 '.md'
path.extname('index.'); // 返回 '.'
path.extname('index'); // 返回 ''
path.extname('.index'); // 返回 ''
path.extname('.index.md'); // 返回 '.md'
```
### path.resolve() 生成完成的绝对路径
语法格式：
```js
path.resolve([...myPaths])
```
解释：
- 将路径或路径片段的序列解析为绝对路径。
- 返回的路径是**从右往左**处理，后面的每个 myPath 被依次解析，直到构造出一个完整的绝对路径。
代码举例：
```js
const path = require('path');
let arr1 = ['/foo1/foo2', 'qianguyihao', 'foo3'];
let result1 = path.resolve(...arr1);
console.log(result1); // 打印结果：/foo1/foo2/qianguyihao/foo3
let arr2 = ['/foo1/foo2', '/qianguyihao', 'foo3'];
let result2 = path.resolve(...arr2);
console.log(result2); // 打印结果：/qianguyihao/foo3
```
### 几个常见路径
- `__dirname`：这是一个常量，表示：当前执行文件所在**完整目录**。
- `__filename`：这是一个常量。表示：当前执行文件的**完整目录 + 文件名**。
- `process.cwd`：获取当前执行 Node命令 时的目录名。
代码举例：
```js
console.log(__dirname);
console.log(__filename);
console.log(process.cwd());
```
运行结果：
```bash
$ node app.js
/Users/smyhvae/qianguyihao
/Users/smyhvae/qianguyihao/app.js
/Users/smyhvae/qianguyihao
```
### path.join() 将多个路径进行拼接
如果是我们手动拼接路径，容易出错。这个时候，可以利用 path.join() 方法将路径进行拼接。
语法格式：
```js
path.join([...paths]);
```
解释：使用平台特定的分隔符作为定界符将所有给定的 path 片段连接在一起，然后规范化生成的路径。
代码举例：
```js
const path = require('path');
const result1 = path.join(__dirname, './app.js');
console.log(result1); // 返回：/Users/smyhvae/qianguyihao/app.js
const result2 = path.join('/foo1', 'foo2', './foo3');
console.log(result2); // 返回：/foo1/foo2/foo3
const result3 = path.join('/foo1', 'foo2', '/foo3');
console.log(result3); // 返回：/foo1/foo2/foo3
```
## OS 系统模块
- os.networkInterfaces() 查看网络地址
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20200101.png)

327
10-Node.js和模块化/06-Node.js操作MySQL数据库.md Normal file
View File

@@ -0,0 +1,327 @@
## Node.js 连接 MySQL
（1）安装 mysql 包：
```bash
$ npm install mysql
```
（2）引入 mysql 包：
```js
const mysql = require("mysql");
```
（3）建立连接：
```js
let mysql = require("mysql");
let options = {
host: "localhost",
//port:"3306", //可选，默认3306
user: "root",
password: 'xxx', // 这里改成你自己的数据库连接密码
database: "qiangu_database",
};
//创建与数据库进行连接的连接对象
let connection = mysql.createConnection(options);
//建立连接
connection.connect((err) => {
if (err) {
// 数据库连接成功
console.log(err);
} else {
// 数据库连接失败
console.log("数据库连接成功");
}
});
```
正常来说，运行程序后，应该会提示`数据库连接成功`。
如果在运行时提示错误`Client does not support authentication protocol requested by server`，解决办法如下：(在终端进入 sql 之后，输入如下命令)
```sql
# 注意，这里的 'root' 请填你的user账号， 'localhost' 请填 你的 host， 'password' 请填你的密码
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
# 然后执行如下命令
flush privileges;
```
## Node.js 增删改查 MySQL
针对下面这张表：
![](https://github.com/qianguyihao/Web/blob/master/img/20200418_1728.png)
通过 Node.js可以对其进行一些增删改查操作。代码举例如下。
### 1、查询表
```js
let mysql = require('mysql');
let options = {
host: 'localhost',
//port:"3306",//可选，默认3306
user: 'root',
password: 'xxx', // 这里改成你自己的数据库密码
database: 'qiangu_database'
}
//创建与数据库进行连接的连接对象
let connection = mysql.createConnection(options);
//建立连接
connection.connect((err) => {
if (err) {
// 数据库连接成功
console.log(err)
} else {
// 数据库连接失败
console.log('数据库连接成功')
}
});
// 1、查询表
let strSql1 = 'select * from qiangu_student_table';
connection.query(strSql1, (err, result, fields) => {
if (err) {
// 表查询失败
console.log(err);
} else {
// 表查询成功
console.log('qiangu_student_table 表查询结果：' + JSON.stringify(result));
console.log('fields:' + JSON.stringify(fields));
}
})
```
打印结果如下：
```bash
qiangu_student_table 表查询结果：
[{"id":1,"name":"千古壹号","age":28},{"id":2,"name":"许嵩","age":34},{"id":3,"name":"邓紫棋","age":28}]
fields:[
{"catalog":"def","db":"qiangu_database","table":"qiangu_student_table","orgTable":"qiangu_student_table","name":"id","orgName":"id","charsetNr":63,"length":11,"type":3,"flags":0,"decimals":0,"zeroFill":false,"protocol41":true},
{"catalog":"def","db":"qiangu_database","table":"qiangu_student_table","orgTable":"qiangu_student_table","name":"name","orgName":"name","charsetNr":33,"length":765,"type":253,"flags":0,"decimals":0,"zeroFill":false,"protocol41":true},
{"catalog":"def","db":"qiangu_database","table":"qiangu_student_table","orgTable":"qiangu_student_table","name":"age","orgName":"age","charsetNr":63,"length":11,"type":3,"flags":0,"decimals":0,"zeroFill":false,"protocol41":true}
]
```
### 删除表
```js
// 2、删除表
let strSql2 = 'drop table test2_table';
connection.query(strSql2, (err, result) => {
if (err) {
// 表删除失败
console.log(err);
} else {
// 表删除成功
console.log('表删除成功：' + result);
}
});
```
打印结果：
```bash
表删除成功：
OkPacket {
fieldCount: 0,
affectedRows: 0,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '',
protocol41: true,
changedRows: 0
}
```
### 删除数据库
将上方的sql语句换一下即可：
```sql
let strSql3 = 'drop database qiangu_database';
```
### 2、新建数据库
```js
let mysql = require('mysql');
let options = {
host: 'localhost',
//port:"3306",//可选，默认3306
user: 'root',
password: 'smyhvae001',
// database: 'qiangu_database' // 注意，因为代码里是创建新的数据库，所以这里不需要填其他的数据库名
}
//创建与数据库进行连接的连接对象
let connection = mysql.createConnection(options);
//建立连接
connection.connect((err) => {
if (err) {
// 数据库连接成功
console.log(err);
} else {
// 数据库连接失败
console.log('数据库连接成功')
}
});
// 创建新的数据库
const strSql4 = 'create database qiangu_database3';
connection.query(strSql4, (err, result) => {
if (err) {
console.log(err);
} else {
console.log('新建数据库成功：' + JSON.stringify(result));
}
});
```
打印结果：
```bash
数据库连接成功
新建数据库成功：{
"fieldCount":0,"affectedRows":1,"insertId":0,"serverStatus":2,"warningCount":0,"message":"","protocol41":true,"changedRows":0
}
```
### 3、新建表
新建表的sql语句举例：
```sql
CREATE TABLE `qiangu_table5` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`age` int DEFAULT NULL,
PRIMARY KEY (`id`)
);
```
如果是在 js 代码中执行上面这样命令的话，要记得把 sql 语句存放在字符串里的同一行。
代码举例如下：
```js
let mysql = require('mysql');
let options = {
host: 'localhost',
//port:"3306",//可选，默认3306
user: 'root',
password: 'smyhvae001',
database: 'qiangu_database'
}
//创建与数据库进行连接的连接对象
let connection = mysql.createConnection(options);
//建立连接
connection.connect((err) => {
if (err) {
// 数据库连接成功
console.log(err);
} else {
// 数据库连接失败
console.log('数据库连接成功')
}
});
// 新建表
// 注意，在 js 代码中，sql 语句要存放在字符串里的同一行。
const strSql5 = 'CREATE TABLE `qianguyihao_table5` (`id` int NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,`age` int DEFAULT NULL,PRIMARY KEY (`id`));';
connection.query(strSql5, (err, result) => {
if (err) {
// 新建表失败
console.log(err);
} else {
// 新建表成功
console.log('qianguyihao 新建表成功：' + JSON.stringify(result));
}
})
```
打印结果：
```bash
数据库连接成功
qianguyihao 新建表成功：
{
"fieldCount":0,"affectedRows":0,"insertId":0,"serverStatus":2,"warningCount":0,"message":"","protocol41":true,"changedRows":0
}
```
### 在指定的表中插入数据
在指定的表中插入数据：
```js
// 在指定的表中插入数据
const strSql6 = "insert into qianguyihao_table5 (name, age) values ('千古壹号', '28')";
connection.query(strSql6, (err, result) => {
if (err) {
// 插入数据失败
console.log(err);
} else {
// 在指定的表中插入数据成功
console.log('qianguyihao 在指定的表中插入数据成功：' + JSON.stringify(result));
}
});
```
打印结果：
```bash
qianguyihao 在指定的表中插入数据成功：
{
"fieldCount":0,"affectedRows":1,"insertId":1,"serverStatus":2,"warningCount":0,"message":"","protocol41":true,"changedRows":0
}
```
如果插入的数据是变量（比如是用户提交上来的数据），那么，sql 语句可以这样写：
```js
// 在指定的表中插入数据（数据作为变量）
const strSql7 = "insert into qianguyihao_table5 (name, age) values (?, ?)";
connection.query(strSql7, ['许嵩', '34'], (err, result) => {
if (err) {
// 插入数据失败
console.log(err);
} else {
// 在指定的表中插入数据成功
console.log('qiangauyihao 在指定的表中插入数据成功：' + JSON.stringify(result));
}
});
```

114
10-Node.js和模块化/CommonJS.md Normal file
View File

@@ -0,0 +1,114 @@
## 全局对象
### global
类似于客户端 JavaScript 运行环境中的 window。
## process
用于获取当前的 Node 进程信息，一般用于获取环境变量之类的信息。
### console
Node 中内置的 console 模块，提供操作控制台的输入输出功能，常见使用方式与客户端类似。
## 全局函数
- setInterval(callback, millisecond)
- clearInterval(timer)
- setTimeout(callback, millisecond)
- clearTimeout(timer)
- Buffer：Class
- 用于操作二进制数据
- 以后介绍
## Node 调试
### 最简单的调试
最方便也是最简单的调试：console.log()
### Node 原生的调试
网址：<https://nodejs.org/api/debugger.html>
### 第三方模块提供的调试工具
```
$ npm install node-inspector –g //方式一
$ npm install devtool -g //方式二
```
### 开发工具的调试
- Visual Studio Code
- WebStorm
## 模块化结构
Node 实现 CommonJS 规范，所以可以使用模块化的方式组织代码结构。
- Node 采用的模块化结构是按照 CommonJS 规范。
- 模块与文件是一一对应关系，即加载一个模块，实际上就是加载对应的一个模块文件。
### CommonJS 规范
CommonJS 就是一套约定标准，不是技术。用于约定我们的代码应该是怎样的一种结构。
参考链接：
- <http://wiki.commonjs.org/wiki/CommonJS>
### 常用内置模块
- `path`：处理文件路径。
- `fs`：操作（CRUD）文件系统。
- `child_process`：新建子进程。
- `util`：提供一系列实用小工具。
- `http`：提供 HTTP 服务器功能。
- `url`：用于解析 URL。
- `querystring`：解析 URL 中的查询字符串。
- `crypto`：提供加密和解密功能。
总结：更多内容可以参考 api文档：<https://nodejs.org/api/>
## 文件系统操作
### 相关模块
- fs：基础的文件操作 API
- path：提供和路径相关的操作 API
- readline：用于读取大文本文件，一行一行读
- fs-extra（第三方）：<https://www.npmjs.com/package/fs-extra>

153
10-Node.js和模块化/ES6.md Normal file
View File

@@ -0,0 +1,153 @@
## 前言
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
### 发展历史
20180303_1633.png
- 2015年6月，ES6正式发布。
### ES6 的其他优势
- 使用 babel 语法转换器，支持低端浏览器
- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 新源发开发。
## ES6 的常用语法
### ES6语法概览
- 块级作用域、字符串
- 对象扩展、解构
- 类、模块化等。
### 作用域：let 和 const
- 用 `let`定义变量 ，替代 var
- 用const 定义常量（定义后，不可修改）
- 作用域和 {}
举例：
```javascript
let a1 = 'haha';
const name = `smyhvae`;
```
### 模板字符串
我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接）
```javascript
var name = 'smyhvae';
var age = '26';
console.log('name:'+name+',age:'+age); //传统写法
```
这种写法，比较繁琐，而且容易出错。
现在有了 ES6 语法，字符串拼接可以这样写：
```javascript
var name = 'smyhvae';
var age = '26';
console.log('name:'+name+',age:'+age); //传统写法
console.log(`name:${name},age:${age}`); //ES6 写法
```
注意，上方代码中，倒数第二行用的是单引号，最后一行用的是反引号（在tab键的上方）。
### 函数扩展
ES6 中函数的用法：
- 参数默认值
- 箭头函数
- 展开运算符
定义和调用函数：（传统写法）
```javascript
function fn1(name) {
console.log(name);
}
fn1('smyhvae');
```
定义和调用函数：（ES6写法）
```javascript
var fn2 = (name)=>{
console.log(name);
}
fn2('smyhvae');
```
上面两端代码，执行的结果是一样的。
当然，也可以给上面这个函数的参数加一个默认值：
```javascript
var fn2 = (name='enen')=>{
console.log(name);
}
fn2(); //参数用默认值 enen
fn2('smyhvae');
```
比如说，1秒后执行一段代码，可以用箭头函数：
```javascript
setTimeout(()=>{
console.log('something');
},1000);
```
如果函数体只有一条 return 语句，那么大括号可以省略：
```javascript
const myDouble = x=>x*2;
console.log(myDouble(5)); //打印结果为10
```
箭头函数的好处：
- 简写代码
- 保持 this 的作用域
##

204
10-Node.js和模块化/JavaScript模块化：AMD.md Normal file
View File

@@ -0,0 +1,204 @@
## AMD的基本语法
### AMD的概念
**AMD**（Asynchronous Module Definition）：异步模块定义。AMD专门用于浏览器端，模块的加载是异步的。
[**AMD规范**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
RequireJS：一个基于AMD规范实现的模块化开发解决方案。
### 暴露模块的方式
**定义没有依赖的模块**：（参数只有一个 function）
```javascript
define(function () {
return 模块
})
```
**定义有依赖的模块**：（参数有两个：模块名、function）
```javascript
//定义有依赖的模块：第一个参数为数组
define(['module1', 'module2'], function (m1, m2) {
return 模块
})
```
代码解释：
- 第一个参数必须是数组，里面存放的是，需要依赖的其他的模块。
- 第二个参数是function，里面带了形参 m1 和 m2，分别代表了 module1 和 module2。这个形参的作用是，前面依赖的模块一旦声明了，就可以一一对应地注入到 function中去，从而在 function 内部使用依赖的模块。这种方式称之为**显式声明依赖注入**。
### 引入模块的方式
在主模块中引入其他的模块：
```javascript
//在主模块中引入其他的模块
require(['module1', 'module2'], function (m1, m2) {
使用m1 / m2
})
```
### RequireJS：是AMD的实现
- <http://www.requirejs.org/>
- <http://www.ruanyifeng.com/blog/2012/11/require_js.html>
## RequireJS的使用举例（自定义模块）
### 1、创建项目结构
在工程文件中新建如下目录：
```
js
| libs
| modules
| alerter.js
| dataService.js
| main.js
index.html
```
所有的代码写完之后，项目结构如下：
![](http://img.smyhvae.com/20180411_1331.png)
### 2、下载require.js，并导入
- 官网: <http://requirejs.org/docs/download.html>
- GitHub：<https://github.com/requirejs/requirejs>
在官网下载`require.js`文件：
![](http://img.smyhvae.com/20180411_1127.png)
然后将`require.js`文件拷贝到项目的`js/libs/`目录中。
这样的话，就导入成功了。
### 3、自定义模块
（1）dataService.js：
```javascript
//定义没有依赖的模块
define(function () {
let name = '我是 dataService.js中的内容';
function getName() {
return name;
}
//暴露模块
return { getName };
});
```
这模块没有依赖。
（2）alerter.js：
```javascript
//定义有依赖的模块
define(['myDataService'], function (dataService) {
let msg = '我是 aleter.js中的内容';
function showMsg() {
console.log(dataService.getName()); //调用了 myDataService 模块中的内容
console.log(msg);
}
//暴露模块
return { showMsg };
});
```
这个模块，依赖了`myDataService`这个模块，模块名是我自己起的。稍后，我们会在main.js中做映射，将`myDataService`这个名字和`dataService.js`文件关联起来。
（3）main.js：
> 这个是主模块。
```javascript
requirejs.config({
//baseUrl: 'js/', //基本路径
paths: { //配置路径
myDataService: './modules/dataService',
myAlerter: './modules/alerter'
}
});
requirejs(['myAlerter'], function (alerter) {
alerter.showMsg();
})();
```
这个模块，依赖了`myAlerter`这个模块，模块名是我自己起的。并且，我们在文件的上方做了映射，将`myAlerter`这个名字和`alerter.js`文件关联了起来。
我们来讲一下最上方的几行代码（即`requirejs.config`里的内容）的意思：
- 我们可以看到，文件（3）依赖了文件（2），文件（2）依赖了文件（1）。
- `paths`里做的就是映射：将键`myDataService`和文件`dataService.js`进行关联，将键`myAlerter`和文件`alerter.js`进行关联。
另外，再讲一下注释里的`baseUrl`的用法：如果没有这个注释，那么`paths`里的路径，是从**当前这个文件**（main.js）的角度出发的；如果加了一行`baseUrl`，表明它是 paths 里所有路径的最开头的部分，`baseUrl`的路径是从**项目的根目录**的角度出发的。
（4）index.html：
这个是入口文件。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 先通过 src 引入 require.js 文件，然后通过 data-main 引入主模块（main.js） -->
<script data-main="js/main.js" src="js/libs/require.js"></script>
</body>
</html>
```
注意，上面的代码中，我们直接通过`src`属性引入`requre.js `文件，一旦这个文件发挥作用了，会去找`data-main`属性里的指向，它正好指向的是主模块。
有了上面这种引入的方式，我们就不用再老土地引入多个`<script>`标签了。
运行 index.html，打印结果如下：
![](http://img.smyhvae.com/20180411_1740.png)
项目源码：[2018-04-11-RequireJSDemo](https://download.csdn.net/download/smyhvae/10341963)

322
10-Node.js和模块化/JavaScript模块化：CMD.md Normal file
View File

@@ -0,0 +1,322 @@
## CMD的基本语法
### CMD的概念
**CMD**（Common Module Definition）：同步模块定义。CMD专门用于浏览器端，模块的加载是同步的。模块在使用时才会加载执行。
[**CMD规范**]()：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。
### SeaJS
SeaJS：一个基于CMD规范实现的模块化开发解决方案。
官网链接：
- <http://seajs.org/>
- <https://github.com/seajs/seajs>
推荐学习链接：
- <http://www.zhangxinxu.com/sp/seajs/>
- <http://es6.ruanyifeng.com/#docs/module>
### 暴露模块的方式
> 不管是定义没有依赖的模块，还是定义有依赖的模块，参数只有一个，那就是 function。
**定义没有依赖的模块**：
```javascript
define(function (require, exports, module) {
exports.xxx = value
//暴露模块
module.exports = value
})
```
参数只有一个，那就是 function。function 里有三个参数：
**定义有依赖的模块**：
```javascript
//定义有依赖的模块
define(function (require, exports, module) {
//引入依赖的模块(同步的方式)
var module2 = require('./module2')
//引入依赖的模块(异步的方式)
require.async('./module3', function (m3) {
})
//暴露模块
exports.xxx = value
})
```
上面的代码可以看到，在引入依赖的模块时，有两种引入的方式：同步和异步。
### 引入模块的方式
```javascript
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
```
## SeaJS的使用举例（自定义模块）
### 1、创建项目结构
在工程文件中新建如下目录：
```
js
| libs
| sea.js
| modules
| module1.js
| module2.js
| module3.js
| module4.js
| main.js //主模块
index.html
```
### 2、下载SeaJS，并导入
- 官网: <https://seajs.github.io/seajs/docs/#downloads>
- GitHub：<https://github.com/seajs/seajs>
在官网下载`sea.js`文件，然后将其拷贝到项目的`js/libs/`目录中。这样的话，就导入成功了。
### 3、自定义模块
（1）module1.js：
```javascript
//定义没有依赖的模块
define(function (require, exports, module) {
let name = '我是 module1 中的内容';
function foo1() {
return name;
}
//暴露模块
module.exports = { foo1 }; //暴露出去的是 foo1这个函数对象
});
```
（2）module2.js：
```javascript
//定义没有依赖的模块
define(function (require, exports, module) {
let name = '我是 module2 中的内容';
function foo2() {
console.log(name);
}
//暴露模块
module.exports = foo2; //可以理解成：exports就是 foo2 这个函数
});
```
（3）module3.js:
```javascript
//定义没有依赖的模块
define(function (require,exports,module) {
let data = '我是 module3 中的内容';
function foo3() {
console.log(data);
}
//暴露模块
exports.module3 = { foo3 }; //可以理解成：给 export 对象暴露了 module3 这个属性，这个属性里有foo3 这个函数。
});
```
（4）module4.js：
这个模块依赖了 module2 和 module3。
```javascript
//定义有依赖的模块
define(function (require, exports, module) {
let name = '我是 module4 中的内容';
//同步的方式引入 module2
let myModule2 = require('./module2');
myModule2();
//异步的方式引入 module3
require.async('./module3', function (myModule3) {
myModule3.module3.foo3();
});
function foo4() {
console.log(name);
}
exports.foo4 = foo4;
})
```
（5）main.js：
- `module1.js`没有依赖其他的模块，它是独立的
- `module4.js`依赖了`module2`和`module3`。
因此，让`main.js`依赖`module1.js`和`module4`就够了。
main.js：
```javascript
//主模块（主模块不需要导出）
define(function (require) {
//导入 module1
let module1 = require('./module1');
console.log(module1.foo1()); //执行foo1函数后，将返回值打印
//导入 module4
let module4 = require('./module4');
module4.foo4();
});
```
（6）index.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入 sea.js库 -->
<script src="js/libs/sea.js"></script>
<script>
// 引入主模块
seajs.use('./js/modules/main.js');
</script>
</body>
</html>
```
打印结果：
![](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)

318
10-Node.js和模块化/JavaScript模块化：ES6.md Normal file
View File

@@ -0,0 +1,318 @@
## 模块化开发的引入
### 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。
- （2）生成了ES5之后，里面仍然有`require`语法，而浏览器并不认识`require`这个关键字。此时，可以用 `Browserify`编译打包 js，进行再次转换。
推荐学习链接：
- <http://es6.ruanyifeng.com/#docs/module>
### 基本语法：
**导出模块**：
```
export
```
**引入模块**：
```
import xxx from '路径'
```
## ES6模块化的使用举例（自定义模块）
### 1、初始化项目
（1）在工程文件中新建如下目录：
```
js
| src
| module1.js
| module2.js
| module3.js
| main.js
index.html
```
（2）在工程的根目录下，新建文件`package.json`，内容如下：
```json
{
"name": "es6-babel-browserify",
"version": "1.0.0"
}
```
### 2、环境配置：安装babel 和 browserify等
（1）安装babel 和 browserify：
```bash
npm install babel-cli -g
npm install babel-preset-es2015 --save-dev
npm install browserify -g
```
安装 babel 的详细解释，可以参考本人的另外一篇文章：[ES6的介绍和环境配置](https://github.com/smyhvae/Web/blob/master/10-ES6/03-ES6%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE.md)
（2）新建.babelrc：
在根目录下新建文件`.babelrc`，输入如下内容：
```
{
"presets":[
"es2015"
],
"plugins":[]
}
```
### 3、编写代码
（1）module1.js：
```javascript
//暴露模块：采用分别暴露的方式
export function foo1() {
console.log('我是 module1 中的 foo1');
}
export function foo2() {
console.log('我是 module2 中的 foo2');
}
export let arr = [1, 2, 3, 4, 5];
```
（2）module2.js：
```javascript
//暴露模块：采用统一暴露的方式
function fn1() {
console.log('我是 module2 中的 fn1');
}
function fn2() {
console.log('我是 module2 中的 fn2');
}
//统一暴露
export { fn1, fn2 };
```
（3）module3.js：
```javascript
//暴露模块：采用默认暴露的方式。
//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据
//语法格式：export default value;
export default () => {
console.log('我是 module3 中 default 方式暴露的函数');
};
```
这里，我们采取了一种新的暴露方式（默认暴露），在暴露时，加上了`default`这个关键字。代码里暴露了一个箭头函数，稍后，我们注意在main.js里是怎么引入module3.js的。
注意，我们只能写一次 default，也就是说，只能进行一次默认暴露。
（4）module4.js：（default方式暴露多个属性）
```javascript
//暴露模块：采用默认暴露的方式。
//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据
//语法格式：export default value;
export default {
name: '我是 module4 中 default 方式暴露的属性 name',
foo() {
console.log('我是 module4 中 default 方式暴露的函数 foo');
}
}
```
这里，我们依旧采取了默认暴露的方式，只能写一次 default。代码里暴露了一个对象（对象里存放了一个属性、一个方法）。稍后，我们注意在main.js里是怎么引入module4.js的。
如果我想暴露多个属性、多个对象怎呢？很简单，把你想要暴露的所有内容，都放在default里，包成一个对象。你看module4.js就是如此， 同时暴露了多个属性&方法。
（5）main.js：
这个是主模块。现在，我们来看一下，它如何引入上面的四个模块。
```javascript
//主模块。引入其他的模块
import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
import { fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module2 中的对象名一致。
import myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的，myModule3 这个名字是我随便起的
import myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的
//调用module1、module2中的内容
foo1();
foo2();
fn1();
fn2();
//调用module3中的内容
myModule3();
//调用module4中的内容
console.log(myModule4.name); //module4中的属性
myModule4.foo(); //module4中的方法
```
我们可以看出：（具体请看注释，非常重要）
- module1和module2是采用**常规暴露**的形式，在引入它们时，模块名要一致。而且，要求用**对象解构赋值**的形式，而不是用 `import myModule from ...`这种形式（否则会报错 undefined）。
- module2和module3是采用**默认暴露**的形式，在引入它们时，模块名随便起。
（6）index.html：
在这里引入main.js即可。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
```
### 4、编译转换
如果我们不进行转换，而是直接在 index.html 中加载 js/src/main.js，是会报错的：
接下来，我们就进行转换。
（1）利用 babel 将 ES6 转换为 ES5：
```
babel src -d build //build目录会自动生成
```
上方命令的意思是，将`src`目录下的所有ES6文件转化为ES5文件，并放在`build`目录下（`build`目录会被自动创建）。
转化成ES5之后，我们发现，如果直接在 index.html 中加载`build`目录下的ES5文件，也是会报错的，因为浏览器不认识`main.js`里的`require`关键字：
![](http://img.smyhvae.com/20180414_1410.png)
于是，我们还要进行一次转换。
（2）利用`Browserify`编译打包 `build`目录下的 ES5 文件：
```bash
browserify build/main.js -o dist/main.js //dist目录需要手动创建
```
dist/main.js就是我们需要引入到 index.html 里的文件。
以后，我们每次修改完ES6的代码，就要执行上面的两个命令，重新生成新的js文件。
运行效果：
![](http://img.smyhvae.com/20180414_1615.png)
工程文件：
- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940)
## ES6模块化的使用举例（引入第三方模块）
下载 jQuery 包：
```
npm install jquery@1 //下载jQuery 1.X 的版本里最新的
```
在main.js 中引入上面的 jQuery：
```
import $ from 'jQuery';
```
然后我们就可以通过`$`这个符号去写jQuery的代码了。

80
10-Node.js和模块化/Node.js代码举例.md Normal file
View File

@@ -0,0 +1,80 @@
## 在 Node.js 上建一个 http 服务器
（1）新建一个文件 `server01.js`，然后在里面输入如下代码：
```javascript
const http = require('http'); //引入 node.js里面的一个http包。因为引入之后，我们不会去修改它，所以用常量来表示
// 创建一台服务器
var server = http.createServer(function (){ //当有人来访问这台服务器时，就会执行 function 回调函数
console.log('有人来访问我了');
});
server.listen(8080); //要让服务器设置为监听状态，端口设置为8080
```
注意看注释。
我们把上面这个 js 文件跑起来，然后在浏览器端输入`http://localhost:8080/`，每请求一次，服务器的控制台就会打印 `有人来访问我了`。
（2）write()函数和 end()函数：
将上面的代码修改如下：
server02.js：
```javascript
const http = require('http');
// 创建一台服务器
var server = http.createServer(function (request, response) { //当有人来访问这个服务器时，就会执行function 这个回调函数
console.log('有人来访问我了');
response.write('smyhvae'); //向浏览器输出内容
response.end(); //结束了，浏览器你走吧。
});
server.listen(8080);
```
function 回调函数里可以设置两个参数：request 和 response。`response.write()`表示向浏览器输出一些内容。
将上面的 js 代码跑起来，产生的问题是，无论我们在浏览器端输入`http://localhost:8080/1.html`，还是输入`http://localhost:8080/2.jpg`，浏览器上显示的都是`smyhvae`。

69
10-Node.js和模块化/WebSocket.md Normal file
View File

@@ -0,0 +1,69 @@
## WebSocket 的引入
### 背景分析
HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。
当用户在浏览器上进行操作时，可以请求服务器上的api；但是反过来却不可能：服务器端发生了一个事件，无法将这个事件的信息**实时主动**地通知客户端。只有在客户端查询服务器当前状态时，所发生事件的信息才会从服务器传递到客户端。
那怎么去实时地知道服务器的状态呢？方法有两个：
（1）**轮询**：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。
（2）**长连接**：客户端只请求一次，但是服务器会将连接保持，不会返回结果。当服务器有了新数据时，实时地发给客户端，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。
### WebSocket 协议
最新的 HTML5协议，制定了 WebSocket 协议标准，允许客户端和服务器端以**全双工**的方式进行通信。
WebSocket 的原理非常简单：利用HTTP请求产生握手，HTTP头部含有 WebSocket 协议的请求，**握手之后，二者转用TCP协议进行交流*（QQ的协议）。
WebSocket协议需要浏览器和服务器都支持才可以使用：
- 支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5
- 支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3
### http 长连接和 websocket 的长连接区别
HTTP1.1通过使用Connection:keep-alive进行长连接，HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求，但是对每个请求仍然要单独发 header，Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。
websocket是一个真正的全双工。长连接第一次tcp链路建立之后，后续数据可以双方都进行发送，**不需要发送请求头**。
keep-alive双方并没有建立正真的连接会话，服务端可以在任何一次请求完成后关闭。WebSocket 它本身就规定了是正真的、双工的长连接，两边都必须要维持住连接的状态。
### Socket.IO 的引入
Node.js上需要写一些程序，来处理TCP请求。
Node.js从诞生之日起，就支持 WebSocket 协议。不过，从底层一步一步搭建一个Socket服务器很费劲（想象一下Node写一个静态文件服务都那么费劲）。所以，有大神帮我们写了一个库 Socket.IO。
Socket.IO 是业界良心，新手福音。它屏蔽了所有底层细节，让顶层调用非常简单。并且还为不支持 WebSocket 协议的浏览器，提供了长轮询的透明模拟机制。
Node的单线程、非阻塞I/O、事件驱动机制，使它非常适合Socket服务器。
### Socket.IO 的安装
Socket.IO 的官网是：<http://socket.io/>
安装方式：
```
npm install socket.io
```

138
10-Node.js和模块化/事件驱动和非阻塞机制.md Normal file
View File

@@ -0,0 +1,138 @@
## 异步编程
### 异步操作
- Node 采用 Chrome V8 引擎处理 JavaScript 脚本。V8 最大特点就是**单线程运行**，一次只能运行一个任务。
- Node 大量采用异步操作（asynchronous operation），即任务不是马上执行，而是插在任务队列的尾部，等到前面的任务运行完后再执行。
- 提高代码的响应能力。
异步IO也叫非阻塞IO。例如读文件，传统的语言，基本都是读取完毕才能进行下一步操作。非阻塞就是Node的callback，不会影响下一步操作，等到文件读取完毕，回调函数自动被执行，而不是在等待。
### 异步操作回调
由于系统永远不知道用户什么时候会输入内容，所以代码不能永远停在一个地方。
Node 中的操作方式就是以异步回调的方式解决无状态的问题。
### 回调函数的设计：错误优先
异步操作中，无法通过 try catch 捕获异常。
这是因为回调函数主要用于异步操作，当回调函数运行时，前期的操作早结束了，错误的执行栈早就不存在了，传统的错误捕捉机制try…catch对于异步操作行不通，所以只能把错误交给回调函数处理。
**统一约定：**
回调函数的第一个参数默认接收错误信息，第二个参数才是真正的回调数据（便于外界获取调用的错误情况）：
```
foo1('赵小黑', 19, function(error, data) {
if(error) throw error;
console.log(data);
});
```
### 异步回调的问题
相比较于传统的代码：
- 异步事件驱动的代码
- 不容易阅读
- 不容易调试
- 不容易维护
另外还有个问题是**回调地狱：**
```javascript
do1(function() {
do2(function() {
do3(function() {
do4(function() {
do5(function() {
do6()
});
});
});
});
});
```
## 进程和线程
### 进程（进行中的程序）
- 每一个 **正在运行** 的应用程序都称之为进程。
- 每一个应用程序运行都至少有一个进程。
- 进程是用来给应用程序提供一个运行的环境。
- 进程是操作系统为应用程序分配资源的一个单位。
### 线程
- 用来执行应用程序中的代码
- 在一个进程内部，可以有很多的线程
- 在一个线程内部，同时只可以干一件事
- 传统的开发方式大部分都是 I/O 阻塞的，所以需要多线程来更好的利用硬件资源。
线程并不是越多越好。
### 多线程的弊端
缺点一：
- 创建线程耗费。
- 线程数量有限。
- CPU 在不同线程之间转换，有个上下文转换，这个转换非常耗时。
所谓的多线程其实都是假的，对于单核CPU而言，它们无非是在抢占 CPU 资源。线程和线程之间需要**切换和调度**，这是很耗费资源的。
缺点二：
- 线程之间共享某些数据，同步某个状态都很麻烦。
就算 CPU 是多核的，现在的问题是，线程与线程之间如果要共享数据，该怎么办？比如 A 线程要访问 B 线程的变量。
## 事件驱动和非阻塞机制
参考链接：<https://www.kancloud.cn/revin/nodejs/176211>
总结：
- Node 中将所有的阻塞操作交给了内部线程池实现。
- Node 主线程本身，主要就是不断的**往返调度**。
### 平台实现差异
由于 Windows 和 *nix 平台（其他平台）的差异，Node 提供了 libuv 作为抽象封装层，保证上层的 Node 与下层的自定义线程池及 IOCP 之间各自独立。
如下图所示：
![](http://img.smyhvae.com/20180301_2252.png)