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

update: let 和 const

Browse Source
This commit is contained in:
qianguyihao
2019-09-03 22:20:19 +08:00
parent 0bb33431a3
commit 9021ded31e
17 changed files with 44 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
11-Node.js和模块化/00-事件驱动和非阻塞机制.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)

574
11-Node.js和模块化/01-Node.js入门.md Normal file
View File

@@ -0,0 +1,574 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8492713.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## Node.js的介绍
### 引擎
**引擎的特性**：
JS的内核即**引擎**。因为引擎有以下特性：
（1）转化的作用：
- 汽油柴油等等->动能
- 模板+数据--->页面
- js引擎：js 代码--->机器码\字节码
（2）移植性。
**有哪些引擎**：
![](http://img.smyhvae.com/20180302_1258.png)
备注：Node是用V8引擎去解析 js，此时，我们不用去考虑浏览器的兼容性问题。
### 什么是 Node.js
**1、官方解释：**
Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。
![](http://img.smyhvae.com/20180301_1540.png)
如上图所示：
- Node 内部采用 Google Chrome 的 V8 引擎，作为 JavaScript 语言解释器；
- 通过自行开发的 libuv 库，调用操作系统资源。
**2、非官方解释：**
**Node.js**：是 JavaScript 语言在服务器端的运行环境（平台）。
**3、运行环境（平台）的含义：**
- 首先，JavaScript 语言通过 Node 在服务器运行，在这个意义上，Node 有点像 JavaScript 虚拟机。
- 其次，Node 提供大量工具库，使得 JavaScript 语言能与操作系统互动（比如读写文件、新建子进程），在这个意义上， Node 又是 JavaScript 的工具库。
**总结：**
**Node.js 是一个 JavaScript 的运行环境（平台）**，不是一门语言，也不是 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 的历史
- 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：
- https://github.com/nodejs/node-v0.x-archive/wiki/Projects,-Applications,-and-Companies-Using-Node
- https://nodejs.org/en/foundation/members/
- https://github.com/NetEase/pomelo
还有以下几个网站：
- LinkedIn移动版From RoR to Node.js, base on Joyent
- Paypal From Java to Node.js
- Twitter的队列：收集需要保存的Tweets，传给负责写入的进程
- 知乎的推送
- 网易、阿里、各种创业团队等
### Node.js的主要应用领域
- RESTFul API
- 实时通信：如消息推送等
- 高并发
- I/O阻塞
### 知名度较高的Node.js开源项目
![](http://img.smyhvae.com/20180301_2009.png)
- express：Node.js中最有名的web服务器框架。
- PM2：node 本来是单进程的，PM2可以实现和管理多进程。
- jade：非常优秀的模板引擎，不仅限于 js 语言。
- CoffeeScript：用简洁的方式展示 JavaScript 优秀的部分。
- Atom：文本编辑器。
- socket.io：实时通信框架。
- mocha：功能强大的 node.js 测试框架。
## Node.js的特点
### 单线程
## 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 安装包进行安装，不方便 node 的更新，原因如下：
- 以前版本安装的很多全局的工具包需要重新安装；
- 无法回滚到之前的版本；
- 无法在多个版本之间切换（很多时候我们要使用特定版本）。
因此，我们暂时先不用安装 Node.js，稍后用 NVM 的方式来安装 Node.js。
### 通过 NVM 安装Node.js（推荐）
**NVM**：node.js version manager，用来管理 node 的版本。安装的步骤如下。
（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%`
配置成功后，重启资源管理器。
**验证：**(在 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 安装失败，可以参考上面这个链接。
### NVM 的常用命令
查看当前使用的 nvm 版本：
```
nvm -v
nvm --version
```
查看本地安装的所有的 node 版本：
```
nvm list|ls
```
**安装指定版本的node：**
```
nvm install 版本号 [arch]
```
比如：`nvm install 8.10.0`。
卸载指定版本node：
```
nvm uninstall 版本号
```
切换使用指定版本的node：
```
nvm use 版本号 [arch]
```
### Node 的常用命令
查看 node 的版本：
```
$ node -v
```
执行脚本字符串：
```
$ node -e 'console.log("Hello World")'
```
运行脚本文件：
```
$ node index.js
$ node path/index.js
$ node path/index
```
查看帮助：
```
$ node --help
```
**进入 REPL 环境：**
```
$ 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 目录中找。
比如说：
```
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 可能不是最新版本，可以用下面的命令，更新到最新版本：
```
$ npm install npm -g
```
### 配置 NPM 的全局目录（暂略）
NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。
输入`npm config ls`，查看：
![](http://img.smyhvae.com/20180302_1210.png)
### NPM的常用命令
- npm init --yes
项目的初始化。执行完成后，会生成`package.json`文件。
- npm install [package]
只在当前工程下安装 package。
- npm install -g [package]
在全局环境下安装 package。
- npm run [script]
## NRM的安装(Win 和 Mac 通用)
由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。
**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。
- 项目地址：<https://www.npmjs.com/package/nrm>
- GitHub地址： <https://github.com/Pana/nrm>
安装 NRM：
```
npm install -g nrm
```
![](http://img.smyhvae.com/20180302_1208.png)
**NRM 的常用命令：**
```
nrm ls //显示全部的镜像
nrm use taobao // 使用淘宝的镜像
```
效果入下：
![](http://img.smyhvae.com/20180302_1215.png)
推荐的国内加速镜像淘宝：<https://npm.taobao.org/>
## 安装cnpm
- 项目地址：<https://npm.taobao.org/>
安装`cnpm`替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）：
```bash
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
![](http://img.smyhvae.com/20180302_2204.png)
如果我们需要通过 cnpm 去安装一个包时，举例如下：
```
cnpm i vue
```
解释： i 指的就是 install。
## Node 的使用
我们可以输入`node`命令，然后在里面写 js 的代码，也可以 通过 node 运行 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入：
```
node 01.js
```
就可以执行 js 程序。
## Mac 下的环境安装
### Mac 下安装 NVM
（1）打开 终端.app，输入：
```
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）配置环境变量：
打开文件：
```
open ～／.bash_profile
```
在最后一行输入：
```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
```
如果你发现文件中已经存在了上面这行代码，就不用往里面加了。
最后，重启终端软件，输入`nvm`试试。
PS：NVM 现在已经不支持 Homebrew 的方式来安装了。
参考链接：<https://www.jianshu.com/p/a3f8778bc0a1>
### Mac 下安装 Node（通过nvm安装）
和Windows下一样，也是执行如下命令：
```
nvm install 8.10.0
```
网速有点慢，要稍等。
![](http://img.smyhvae.com/20180302_2148.png)
输入 `node -v`，查看当前使用的 node 版本。
安装好 `Node` 之后，`npm` 也会自动安装的，输入 `npm -v`，查看 npm 的版本。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

613
11-Node.js和模块化/02-JavaScript模块化01：CommonJS.md Normal file
View File

@@ -0,0 +1,613 @@
## 前言
网站越来越复杂，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`。
## 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，也可以自己修改包名。
其他的参数，一路回车即可。效果如下：
![](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>
```
## 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)

204
11-Node.js和模块化/02-JavaScript模块化02：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)

255
11-Node.js和模块化/02-JavaScript模块化03：CMD.md Normal file
View File

@@ -0,0 +1,255 @@
## 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)

292
11-Node.js和模块化/02-JavaScript模块化04：ES6.md Normal file
View File

@@ -0,0 +1,292 @@
## 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的代码了。

114
11-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
11-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 的作用域
##

80
11-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
11-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
```