diff --git a/10-ES6/07-ES6:Promise入门详解.md b/10-ES6/07-ES6:Promise入门详解.md index 9cd6b65..64dbc28 100644 --- a/10-ES6/07-ES6:Promise入门详解.md +++ b/10-ES6/07-ES6:Promise入门详解.md @@ -103,6 +103,7 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用 ``` + 上方代码中,当从接口返回的数据`data.retCode`的值不同时,可能会走 resolve,也可能会走 reject,这个由你自己的业务决定。 ## promise对象的3个状态(了解即可) @@ -156,7 +157,7 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用 ) ``` -## 基于 Promise 处理 多次 Ajax 请求(链式调用)【重要】 +## 基于 Promise 处理多次 Ajax 请求(链式调用)【重要】 实际开发中,我们经常需要同时请求多个接口。比如说:在请求完`接口1`的数据`data1`之后,需要根据`data1`的数据,继续请求接口2,获取`data2`;然后根据`data2`的数据,继续请求接口3。 @@ -178,12 +179,13 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用 diff --git a/10-ES6/08-ES6:async函数详解.md b/10-ES6/08-ES6:async函数详解.md deleted file mode 100644 index a823cac..0000000 --- a/10-ES6/08-ES6:async函数详解.md +++ /dev/null @@ -1,37 +0,0 @@ - -## async函数(异步函数) - -### 概述 - -> async 函数是在 ES2017 引入的。 - -概念:真正意义上去解决异步回调的问题,同步流程表达异步操作。 - -本质: Generator 的语法糖。 - -async比之前的 Promise、Generator要好用一些。 - - -语法: - -```javascript - async function foo() { - await 异步操作; - await 异步操作; - } -``` - -我们在普通的函数前面加上 async 关键字,就成了 async 函数。 - - -### async、Promise、Generator的对比(async的特点) - -1、不需要像Generator去调用next方法,遇到await等待,当前的异步操作完成就往下执行。 - -2、async返回的总是Promise对象,可以用then方法进行下一步操作。 - -3、async取代Generator函数的星号*,await取代Generator的yield。 - -4、语意上更为明确,使用简单,经临床验证,暂时没有任何副作用。 - - diff --git a/10-ES6/08-ES7:async函数详解.md b/10-ES6/08-ES7:async函数详解.md new file mode 100644 index 0000000..c2979a9 --- /dev/null +++ b/10-ES6/08-ES7:async函数详解.md @@ -0,0 +1,66 @@ + +> 备注: async/await 的内容还有待完善。 + +## async/await (异步函数)概述 + +async/await 是在 ES7 中引入的新语法,可以更加方便地进行异步操作。 + +本质: Generator 的语法糖。 + +- async 的返回值是 Promise 实例对象。 + +- await 可以得到异步结果。 + +我们在普通的函数前面加上 async 关键字,就成了 async 函数。 + +## async/await 的基本用法 + +async 后面可以跟一个 Promise 实例对象。代码举例如下: + +```javascript + const request1 = function() { + const promise = new Promise(resolve => { + request('https://www.baidu.com', function(response) { + if (response.retCode == 200) { + // 这里的 response 是接口1的返回结果 + resolve('request1 success'+ response); + } else { + reject('接口请求失败'); + } + }); + }); + + return promise; + }; + + async function queryData() { + const response = await request1(); + }); + return response; + } + queryData().then(data => { + console.log(data); + }); + +``` + + +## 基于 async/await 处理多次 Ajax 请求【重要】 + +实际开发中,现在有三个网络请求,请求2必须依赖请求1的结果,请求3必须依赖请求2的结果,如果按照往常的写法,会有三层回调,会陷入“回调地狱”。 + +这种场景其实就是接口的多层嵌套调用。之前学过 Promise,它可以把原本的**多层嵌套调用**改进为**链式调用**。 + +而今天要学习的 async/await ,可以把原本的“多层嵌套调用”改成类似于同步的写法,非常优雅。 + +代码举例: + +暂略。 + + +## 参考链接 + +- [js async await 终极异步解决方案](https://www.cnblogs.com/CandyManPing/p/9384104.html) + +- [理解 JavaScript 的 async/await](https://segmentfault.com/a/1190000007535316) + diff --git a/11-Node.js和模块化/01-Node.js入门.md b/11-Node.js和模块化/01-Node.js介绍和环境配置.md similarity index 68% rename from 11-Node.js和模块化/01-Node.js入门.md rename to 11-Node.js和模块化/01-Node.js介绍和环境配置.md index 858db18..d617306 100644 --- a/11-Node.js和模块化/01-Node.js入门.md +++ b/11-Node.js和模块化/01-Node.js介绍和环境配置.md @@ -1,41 +1,11 @@ -> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8492713.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。 - -> 以下是正文。 ## Node.js的介绍 +### 什么是 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 是全球最大的开源库生态系统。 +Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型( Node.js的特性),使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。 ![](http://img.smyhvae.com/20180301_1540.png) @@ -46,19 +16,9 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node. - 通过自行开发的 libuv 库,调用操作系统资源。 -**2、非官方解释:** +### 什么是 Node.js(非官方解释) -**Node.js**:是 JavaScript 语言在服务器端的运行环境(平台)。 - -**3、运行环境(平台)的含义:** - -- 首先,JavaScript 语言通过 Node 在服务器运行,在这个意义上,Node 有点像 JavaScript 虚拟机。 - -- 其次,Node 提供大量工具库,使得 JavaScript 语言能与操作系统互动(比如读写文件、新建子进程),在这个意义上, Node 又是 JavaScript 的工具库。 - -**总结:** - -**Node.js 是一个 JavaScript 的运行环境(平台)**,不是一门语言,也不是 JavaScript 的框架。 +**Node.js是 JavaScript 语言在服务器端的运行环境(平台)**。Node.js 不是一门语言,也不是 JavaScript 的框架。 - 与PHP、JSP、Python、Perl、Ruby的“既是语言,也是平台”不同,Node.js的使用JavaScript进行编程,运行在 Chrome 的 V8 引擎上。 @@ -66,9 +26,34 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node. ),Node.js跳过了Apache、Naginx、IIS等HTTP服务器,它自己不用建设在任何服务器软件之上。Node.js的许多设计理念与经典架构(LAMP = Linux + Apache + MySQL + PHP)有着很大的不同,可以提供强大的伸缩能力。Node.js没有web容器。 +### 运行环境(平台)的含义 + +- 首先,JavaScript 语言通过 Node 在服务器上运行,在这个意义上,Node 有点像 JavaScript 虚拟机。 + +- 其次,Node 生态系统活跃,提供了大量的开源库,使得 JavaScript 语言能与操作系统进行交互(比如读写文件、新建子进程),在这个层次上,Node 又是属于 JavaScript 的工具库。 + +### 为什么要学习服务器端开发 + +- 能够和后台开发的程序员更佳紧密地结合、更顺畅地沟通。 + +- 当网站的业务逻辑需要前置时,前端人员需要学习一些后台开发的技术,以完成相应的任务。 + +- 拓宽知识视野和技术栈,能够站在全局的角度审视整个项目。 + +### 为什么选择 Node.js 做后台开发 + +- 使用 JavaScript 语言 开发服务器端应用。 + +- 一些公司要求前端工程师掌握 Node.js 开发。 + +- Node.js 生态系统活跃,提供了大量的开源库。 + + +## Node.js的发展 + ### Node 的历史 -- 2008年左右,随着 AJAX 的逐渐普及,Web 开发逐渐走向复杂化,系统化; +- 2008年左右,随着 Ajax 的逐渐普及,Web 开发逐渐走向复杂化,系统化; - 2009年2月,Ryan Dahl 想要创建一个轻量级,适应现代 Web 开发的平台; @@ -82,31 +67,6 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node. 注意:是 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的主要应用领域 @@ -119,12 +79,15 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node. - I/O阻塞 - ### 知名度较高的Node.js开源项目 ![](http://img.smyhvae.com/20180301_2009.png) -- express:Node.js中最有名的web服务器框架。 +- express:Node.js中著名的web服务器框架。 + +- Koa:下一代的 Node.js 的 Web 框架。 + +- mocha:功能强大的 node.js 测试框架。 - PM2:node 本来是单进程的,PM2可以实现和管理多进程。 @@ -136,51 +99,52 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node. - socket.io:实时通信框架。 -- mocha:功能强大的 node.js 测试框架。 +### Node.js的特点 -## Node.js的特点 - -### 单线程 +- 单线程 +## Node.js 运行环境配置:通过 Node.js 安装包(不推荐) - - -## Node.js 的环境配置 - -### Node.js 安装包(不推荐) - 去 Node.js 的[官网](https://nodejs.org/en/)下载安装包: ![](http://img.smyhvae.com/20180301_1505.png) -我们也可以在上下载历史版本。 +我们也可以在 里下载历史版本。 ![](http://img.smyhvae.com/20180301_1507.png) 注意,我们以一定要用偶数版(V4、V6等),不要用奇数版(比如V5),因为奇数版不稳定。 -我们并不推荐直接采用 Node.js.msi 安装包进行安装,不方便 node 的更新,原因如下: +我们并不推荐直接采用 Node.js.msi(windows)或者 Node.js.pkg(Mac) 安装包进行安装,原因如下: -- 以前版本安装的很多全局的工具包需要重新安装; + +- 不方便 Node.js 版本的更新; - 无法回滚到之前的版本; -- 无法在多个版本之间切换(很多时候我们要使用特定版本)。 - +- 无法在多个版本之间切换(在有些项目中,我们要使用 Node 的指定版本)。 因此,我们暂时先不用安装 Node.js,稍后用 NVM 的方式来安装 Node.js。 -### 通过 NVM 安装Node.js(推荐) +## Node.js 运行环境配置:通过 NVM(推荐) -**NVM**:node.js version manager,用来管理 node 的版本。安装的步骤如下。 +**NVM**:node.js version manager,用来管理 node 的版本。 -(1)我们去[官网](https://github.com/coreybutler/nvm-windows/releases)下载 NVM 的安装包: +**我们可以先安装 NVM,然后通过 NVM 安装 Node.js**。这是官方推荐的做法。 + +Windows 和 Mac 下安装的Node.js 的步骤如下。 + +### Windows 系统安装 Node.js + +**1、安装 NVM**: + +(1)我们去 下载 NVM 的安装包: ![](http://img.smyhvae.com/20180301_1603.png) @@ -218,7 +182,7 @@ proxy 配置成功后,重启资源管理器。 -**验证:**(在 cmd 中输入命令) +**2、验证:**(在 cmd 命令行中输入命令) (1)输入`nvm`命令查看环境变量是否配置成功: @@ -234,65 +198,165 @@ proxy - **参考链接**:[安装npm,nvm,node](https://segmentfault.com/a/1190000011114680) -如果 node 安装失败,可以参考上面这个链接。 +如果 Node 安装失败,可以参考上面这个链接。 -### NVM 的常用命令 +**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 的方式来安装了。 + + +参考链接: + +**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 版本: +查看本地安装的所有的 Node.js 版本: -``` +```bash nvm list|ls ``` +**安装指定版本的 Node.js:** -**安装指定版本的node:** +```bash +nvm install 版本号 -``` -nvm install 版本号 [arch] +# 举例 +nvm install 8.10.0 ``` -比如:`nvm install 8.10.0`。 -卸载指定版本node: +卸载指定版本 Node.js: -``` +```bash nvm uninstall 版本号 ``` 切换使用指定版本的node: -``` -nvm use 版本号 [arch] +```bash +nvm use 版本号 ``` -### Node 的常用命令 +## Node.js 的常用命令 查看 node 的版本: -``` +```bash $ node -v ``` 执行脚本字符串: -``` +```bash $ node -e 'console.log("Hello World")' ``` 运行脚本文件: -``` +```bash $ node index.js $ node path/index.js @@ -303,14 +367,14 @@ $ node path/index 查看帮助: -``` +```bash $ node --help ``` **进入 REPL 环境:** -``` +```bash $ node ``` @@ -324,7 +388,6 @@ REPL 的全称:Read、Eval、 Print、Loop。类似于浏览器的控制台。 在 VS Code 里,我们可以在菜单栏选择“帮助->切换开发人员工具”,打开console控制台。 - ## 包和 NPM ### 什么是包 @@ -346,7 +409,7 @@ Node 本身并没有太多的功能性 API,所以市面上涌现出大量的 比如说: -``` +```javascript requiere(`fs`) ``` @@ -387,7 +450,7 @@ NVM、Node、NPM 安装之后,目录分布如下: 另外,Node 附带的 NPM 可能不是最新版本,可以用下面的命令,更新到最新版本: -``` +```bash $ npm install npm -g ``` @@ -430,20 +493,21 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议 安装 NRM: -``` +```bash npm install -g nrm ``` ![](http://img.smyhvae.com/20180302_1208.png) - **NRM 的常用命令:** -``` -nrm ls //显示全部的镜像 +```bash +# 显示全部的镜像 +nrm ls -nrm use taobao // 使用淘宝的镜像 +# 使用淘宝的镜像 +nrm use taobao ``` 效果入下: @@ -470,105 +534,31 @@ npm install -g cnpm --registry=https://registry.npm.taobao.org 如果我们需要通过 cnpm 去安装一个包时,举例如下: -``` +```bash cnpm i vue ``` - 解释: i 指的就是 install。 - ## Node 的使用 我们可以输入`node`命令,然后在里面写 js 的代码,也可以 通过 node 运行 js 文件。比如,编写好一个 js文件`01.js`,然后在命令行输入: -``` +```bash 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 的方式来安装了。 - - -参考链接: - - -### Mac 下安装 Node(通过nvm安装) - -和Windows下一样,也是执行如下命令: - -``` -nvm install 8.10.0 -``` - -网速有点慢,要稍等。 - -![](http://img.smyhvae.com/20180302_2148.png) - -输入 `node -v`,查看当前使用的 node 版本。 - -安装好 `Node` 之后,`npm` 也会自动安装的,输入 `npm -v`,查看 npm 的版本。 - - ## 我的公众号 -想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。 +想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: -![](http://img.smyhvae.com/2016040102.jpg) - +![](http://img.smyhvae.com/20200101.png) diff --git a/11-Node.js和模块化/00-事件驱动和非阻塞机制.md b/11-Node.js和模块化/事件驱动和非阻塞机制.md similarity index 98% rename from 11-Node.js和模块化/00-事件驱动和非阻塞机制.md rename to 11-Node.js和模块化/事件驱动和非阻塞机制.md index 10fbe6f..bc70423 100644 --- a/11-Node.js和模块化/00-事件驱动和非阻塞机制.md +++ b/11-Node.js和模块化/事件驱动和非阻塞机制.md @@ -50,7 +50,7 @@ foo1('赵小黑', 19, function(error, data) { - 不容易维护 -另外还有个问题是**回调黑洞:**(回调黑洞) +另外还有个问题是**回调地狱:** ```javascript do1(function() {