From 9f4093333b460df4ce0f4cc51a7f37d14dc1462c Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 17 May 2021 09:56:06 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-ES6的介绍和环境配置.md | 0 .../02-ES5中的严格模式.md | 0 .../03-ES5中的一些扩展.md | 0 .../04-ES6：变量 let、const 和块级作用域.md | 0 .../05-ES6：变量的解构赋值.md | 0 .../06-ES6：箭头函数.md | 0 .../07-剩余参数和扩展运算符.md | 0 .../08-字符串、数组、对象的扩展.md | 0 .../09-内置对象扩展：Set数据结构.md | 0 .../10-Promise入门详解.md | 73 +------------------ 05-JavaScript基础：ES6语法/10-单线程和异步.md | 71 ++++++++++++++++++ .../11-Promise的常见用法和API.md | 0 .../12-ES7：async函数详解.md | 0 .../ES6：Symbol.md | 0 14 files changed, 74 insertions(+), 70 deletions(-) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/01-ES6的介绍和环境配置.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/02-ES5中的严格模式.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/03-ES5中的一些扩展.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/04-ES6：变量 let、const 和块级作用域.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/05-ES6：变量的解构赋值.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/06-ES6：箭头函数.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/07-剩余参数和扩展运算符.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/08-字符串、数组、对象的扩展.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/09-内置对象扩展：Set数据结构.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/10-Promise入门详解.md (85%) create mode 100644 05-JavaScript基础：ES6语法/10-单线程和异步.md rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/11-Promise的常见用法和API.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/12-ES7：async函数详解.md (100%) rename {05-JavaScript之ES6语法 => 05-JavaScript基础：ES6语法}/ES6：Symbol.md (100%) diff --git a/05-JavaScript之ES6语法/01-ES6的介绍和环境配置.md b/05-JavaScript基础：ES6语法/01-ES6的介绍和环境配置.md similarity index 100% rename from 05-JavaScript之ES6语法/01-ES6的介绍和环境配置.md rename to 05-JavaScript基础：ES6语法/01-ES6的介绍和环境配置.md diff --git a/05-JavaScript之ES6语法/02-ES5中的严格模式.md b/05-JavaScript基础：ES6语法/02-ES5中的严格模式.md similarity index 100% rename from 05-JavaScript之ES6语法/02-ES5中的严格模式.md rename to 05-JavaScript基础：ES6语法/02-ES5中的严格模式.md diff --git a/05-JavaScript之ES6语法/03-ES5中的一些扩展.md b/05-JavaScript基础：ES6语法/03-ES5中的一些扩展.md similarity index 100% rename from 05-JavaScript之ES6语法/03-ES5中的一些扩展.md rename to 05-JavaScript基础：ES6语法/03-ES5中的一些扩展.md diff --git a/05-JavaScript之ES6语法/04-ES6：变量 let、const 和块级作用域.md b/05-JavaScript基础：ES6语法/04-ES6：变量 let、const 和块级作用域.md similarity index 100% rename from 05-JavaScript之ES6语法/04-ES6：变量 let、const 和块级作用域.md rename to 05-JavaScript基础：ES6语法/04-ES6：变量 let、const 和块级作用域.md diff --git a/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md b/05-JavaScript基础：ES6语法/05-ES6：变量的解构赋值.md similarity index 100% rename from 05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md rename to 05-JavaScript基础：ES6语法/05-ES6：变量的解构赋值.md diff --git a/05-JavaScript之ES6语法/06-ES6：箭头函数.md b/05-JavaScript基础：ES6语法/06-ES6：箭头函数.md similarity index 100% rename from 05-JavaScript之ES6语法/06-ES6：箭头函数.md rename to 05-JavaScript基础：ES6语法/06-ES6：箭头函数.md diff --git a/05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md b/05-JavaScript基础：ES6语法/07-剩余参数和扩展运算符.md similarity index 100% rename from 05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md rename to 05-JavaScript基础：ES6语法/07-剩余参数和扩展运算符.md diff --git a/05-JavaScript之ES6语法/08-字符串、数组、对象的扩展.md b/05-JavaScript基础：ES6语法/08-字符串、数组、对象的扩展.md similarity index 100% rename from 05-JavaScript之ES6语法/08-字符串、数组、对象的扩展.md rename to 05-JavaScript基础：ES6语法/08-字符串、数组、对象的扩展.md diff --git a/05-JavaScript之ES6语法/09-内置对象扩展：Set数据结构.md b/05-JavaScript基础：ES6语法/09-内置对象扩展：Set数据结构.md similarity index 100% rename from 05-JavaScript之ES6语法/09-内置对象扩展：Set数据结构.md rename to 05-JavaScript基础：ES6语法/09-内置对象扩展：Set数据结构.md diff --git a/05-JavaScript之ES6语法/10-Promise入门详解.md b/05-JavaScript基础：ES6语法/10-Promise入门详解.md similarity index 85% rename from 05-JavaScript之ES6语法/10-Promise入门详解.md rename to 05-JavaScript基础：ES6语法/10-Promise入门详解.md index 1b00998..510a1f1 100644 --- a/05-JavaScript之ES6语法/10-Promise入门详解.md +++ b/05-JavaScript基础：ES6语法/10-Promise入门详解.md @@ -1,77 +1,10 @@ -## 前言：单线程和异步 - -### 单线程 - -JavaScript 的执行环境是**单线程**。即同一时间，只能处理一个任务。 - -具体来说，所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个。所有的任务都**需要排队**。 - -JS为何要被设计为单线程呢？原因如下： - -- 首先是历史原因，在最初设计 JS 这门语言时，多进程、多线程的架构并不流行，硬件支持并不好。 - -- 其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。 - -- 而且，如果多个线程同时操作同一个 DOM，在多线程不加锁的情况下，会产生冲突，最终会导致 DOM 渲染的结果不符预期。 - -所以，为了避免这些复杂问题的出现，JS被设计成了单线程语言。 - -### 同步任务和异步任务、事件循环 - -如果当前正在执行的任务很耗时，它就会**阻塞**其他正在排队的任务。为了解决这个问题，JS在设计之初，将任务分成了两类：同步任务、异步任务。 - -- 同步任务：在**主线程**上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。 - -- 异步任务：不进入主线程、而是进入**任务队列**（task queue）的任务。只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。 - - - -### 多次异步调用的顺序 - -- 多次异步调用的结果，顺序可能不同步。 - -- 异步调用的结果如果**存在依赖**，则需要通过回调函数进行嵌套。 - - -### 前端使用异步的场景 - -什么时候需要**等待**，就什么时候用异步。 - -- 定时任务：setTimeout（定时炸弹）、setInterval（循环执行） - -- 事件绑定（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步） - -- 网络请求：ajax请求、网络图片加载 - -- ES6中的Promise - - - - -### 接口调用的方式 - -js 中常见的接口调用方式，有以下几种： - -- 原生 ajax、基于 jQuery 的 ajax -- Promise -- Fetch -- axios - - -今天这篇文章，我们重点讲一下接口调用里的**Promise**。 - - - -### 参考链接 - -- [JS-同步任务，异步任务，微任务，和宏任务](https://github.com/PleaseStartYourPerformance/javaScript/issues/34) - -- [JS同步异步宏任务微任务](https://juejin.cn/post/6875605533127081992)、[JavaScript中事件循环的理解](https://zhuanlan.zhihu.com/p/364475433)、[javascript事件循环机制](https://github.com/reng99/blogs/issues/34) ## 为什么需要 Promise？ -如上一段所述，Javascript 是⼀⻔单线程语⾔。早期我们解决异步场景时，⼤部分情况都是通过回调函数来进⾏。 +我们在上一篇文章《单线程和异步》中讲过，Javascript 是⼀⻔单线程语⾔。早期我们解决异步场景时，⼤部分情况都是通过回调函数来进⾏。 + +（如果你还不了解单线程和异步的概念，可以先去回顾上一篇文章。） ### 回调的定义 diff --git a/05-JavaScript基础：ES6语法/10-单线程和异步.md b/05-JavaScript基础：ES6语法/10-单线程和异步.md new file mode 100644 index 0000000..30e5426 --- /dev/null +++ b/05-JavaScript基础：ES6语法/10-单线程和异步.md @@ -0,0 +1,71 @@ + +## 单线程 + +JavaScript 的执行环境是**单线程**。即同一时间，只能处理一个任务。 + +具体来说，所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个。所有的任务都**需要排队**。 + +JS为何要被设计为单线程呢？原因如下： + +- 首先是历史原因，在最初设计 JS 这门语言时，多进程、多线程的架构并不流行，硬件支持并不好。 + +- 其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。 + +- 而且，如果多个线程同时操作同一个 DOM，在多线程不加锁的情况下，会产生冲突，最终会导致 DOM 渲染的结果不符预期。 + +所以，为了避免这些复杂问题的出现，JS被设计成了单线程语言。 + +## 同步任务和异步任务 + + +如果当前正在执行的任务很耗时，它就会**阻塞**其他正在排队的任务。为了解决这个问题，JS在设计之初，将任务分成了两类：同步任务、异步任务。 + +- 同步任务：在**主线程**上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。 + +- 异步任务：不进入主线程、而是进入**任务队列**（task queue）的任务。只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。 + + +### 事件循环 + +这里少一个图 + + +### 多次异步调用的顺序 + +- 多次异步调用的结果，顺序可能不同步。 + +- 异步调用的结果如果**存在依赖**，则需要通过回调函数进行嵌套。 + + +### 前端使用异步的场景 + +什么时候需要**等待**，就什么时候用异步。 + +- 定时任务：setTimeout（定时炸弹）、setInterval（循环执行） + +- 事件绑定（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步） + +- 网络请求：ajax请求、网络图片加载 + +- ES6中的Promise + + + +### 接口调用的方式 + +js 中常见的接口调用方式，有以下几种： + +- 原生 ajax、基于 jQuery 的 ajax +- Promise +- Fetch +- axios + + +下一篇文章，我们重点讲一下接口调用里的**Promise**。 + + +## 参考链接 + +- [JS-同步任务，异步任务，微任务，和宏任务](https://github.com/PleaseStartYourPerformance/javaScript/issues/34) + +- [JS同步异步宏任务微任务](https://juejin.cn/post/6875605533127081992)、[JavaScript中事件循环的理解](https://zhuanlan.zhihu.com/p/364475433)、[javascript事件循环机制](https://github.com/reng99/blogs/issues/34) diff --git a/05-JavaScript之ES6语法/11-Promise的常见用法和API.md b/05-JavaScript基础：ES6语法/11-Promise的常见用法和API.md similarity index 100% rename from 05-JavaScript之ES6语法/11-Promise的常见用法和API.md rename to 05-JavaScript基础：ES6语法/11-Promise的常见用法和API.md diff --git a/05-JavaScript之ES6语法/12-ES7：async函数详解.md b/05-JavaScript基础：ES6语法/12-ES7：async函数详解.md similarity index 100% rename from 05-JavaScript之ES6语法/12-ES7：async函数详解.md rename to 05-JavaScript基础：ES6语法/12-ES7：async函数详解.md diff --git a/05-JavaScript之ES6语法/ES6：Symbol.md b/05-JavaScript基础：ES6语法/ES6：Symbol.md similarity index 100% rename from 05-JavaScript之ES6语法/ES6：Symbol.md rename to 05-JavaScript基础：ES6语法/ES6：Symbol.md