做外贸网站费用,双语网站后台怎么做,请别人做网站有风险吗,鹤壁网站推广1. ES6模块化
1.1 回顾#xff1a;node.js 中如何实现模块化
node.js 遵循了 CommonJS 的模块化规范。其中#xff1a;
导入其它模块使用 require() 方法模块对外共享成员使用 module.exports 对象
模块化的好处#xff1a; 大家都遵守同样的模块化规范写代码#xff0…1. ES6模块化
1.1 回顾node.js 中如何实现模块化
node.js 遵循了 CommonJS 的模块化规范。其中
导入其它模块使用 require() 方法模块对外共享成员使用 module.exports 对象
模块化的好处 大家都遵守同样的模块化规范写代码降低了沟通的成本极大方便了各个模块之间的相互调用利人利己。
1.2 前端模块化规范的分类
在 ES6 模块化规范诞生之前JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。
但是这些由社区提出的模块化标准还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准例如
AMD 和 CMD 适用于浏览器端的 Javascript 模块化CommonJS 适用于服务器端的 Javascript 模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此大一统的 ES6 模块化规范诞生了
1.3 什么是 ES6 模块化规范
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6 模块化规范中定义
每个 js 文件都是一个独立的模块导入其它模块成员使用 import 关键字向外共享模块成员使用 export 关键字
1.4 在 node.js 中体验 ES6 模块化
node.js 中默认仅支持 CommonJS 模块化规范若想基于 node.js 体验与学习 ES6 的模块化语法可以按照如下两个步骤进行配置 ① 确保安装了 v14.15.1 或更高版本的 node.js ② 在 package.json 的根节点中添加 type: module 节点
1.5 ES6 模块化的基本语法
ES6 的模块化主要包含如下 3 种用法 ① 默认导出与默认导入 ② 按需导出与按需导入 ③ 直接导入并执行模块中的代码
1.5.1 默认导出
默认导出的语法 export default 默认导出的成员
后期贴代码例子
默认导出的注意事项 每个模块中只允许使用唯一的一次 export default否则会报错
后期贴代码例子
1.5.1 默认导入
默认导入的语法import 接收名称 from 模块标识符
后期贴代码例子
默认导入的注意事项 默认导入时的接收名称可以任意名称只要是合法的成员名称即可
后期贴代码例子
1.5.2 按需导出
按需导出的语法 export 按需导出的成员
后期贴代码例子
1.5.2 按需导入
按需导入的语法 import { s1 } from 模块标识符
后期贴代码例子
按需导出与按需导入的注意事项
① 每个模块中可以使用多次按需导出 ② 按需导入的成员名称必须和按需导出的名称保持一致 ③ 按需导入时可以使用 as 关键字进行重命名 ④ 按需导入可以和默认导入一起使用
1.5.3 直接导入并执行模块中的代码
如果只想单纯地执行某个模块中的代码并不需要得到模块中向外共享的成员。此时可以直接导入并执行模块代码示例代码如下
后期贴代码例子
2. Promise
2.1 回调地狱
多层回调函数的相互嵌套就形成了回调地狱。示例代码如下
后期贴代码例子
回调地狱的缺点
代码耦合性太强牵一发而动全身难以维护大量冗余的代码相互嵌套代码的可读性变差
2.1.1 如何解决回调地狱的问题
为了解决回调地狱的问题ES6ECMAScript 2015中新增了 Promise 的概念。
2.1.2 Promise 的基本概念
① Promise 是一个构造函数
我们可以创建 Promise 的实例 const p new Promise()new 出来的 Promise 实例对象代表一个异步操作 ② Promise.prototype 上包含一个 .then() 方法每一次 new Promise() 构造函数得到的实例对象都可以通过原型链的方式访问到 .then() 方法例如 p.then() ③ .then() 方法用来预先指定成功和失败的回调函数p.then(成功的回调函数失败的回调函数)p.then(result { }, error { })调用 .then() 方法时成功的回调函数是必选的、失败的回调函数是可选的
2.2 基于回调函数按顺序读取文件内容
后期贴代码例子
2.3 基于 then-fs 读取文件内容
由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件不支持 Promise 的调用方式。因此需要先运行如下的命令安装 then-fs 这个第三方包从而支持我们基于 Promise 的方式读取文件的内容npm install then-fs
2.3.1 then-fs 的基本使用
调用 then-fs 提供的 readFile() 方法可以异步地读取文件的内容它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下
后期贴代码例子
注意上述的代码无法保证文件的读取顺序需要做进一步的改进
2.3.2 .then() 方法的特性
如果上一个 .then() 方法中返回了一个新的 Promise 实例对象则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用就解决了回调地狱的问题。
2.3.3 基于 Promise 按顺序读取文件的内容
Promise 支持链式调用从而来解决回调地狱的问题。示例代码如下
后期贴代码例子
2.3.4 通过 .catch 捕获错误
在 Promise 的链式操作中如果发生了错误可以使用 Promise.prototype.catch 方法进行捕获和处理
后期贴代码例子
如果不希望前面的错误导致后续的 .then 无法正常执行则可以将 .catch 的调用提前示例代码如下
后期贴代码例子
2.3.5 Promise.all() 方法
Promise.all() 方法会发起并行的 Promise 异步操作等所有的异步操作全部结束后才会执行下一步的 .then 操作等待机制。示例代码如下
后期贴代码例子
注意数组中 Promise 实例的顺序就是最终结果的顺序
2.3.6 Promise.race() 方法
Promise.race() 方法会发起并行的 Promise 异步操作只要任何一个异步操作完成就立即执行下一步的.then 操作赛跑机制。示例代码如下
后期贴代码例子
2.4 基于 Promise 封装读文件的方法
方法的封装要求 ① 方法的名称要定义为 getFile ② 方法接收一个形参 fpath表示要读取的文件的路径 ③ 方法的返回值为 Promise 实例对象
2.4.1 getFile 方法的基本定义
后期贴代码例子
注意第 5 行代码中的 new Promise() 只是创建了一个形式上的异步操作。
2.4.2 创建具体的异步操作
如果想要创建具体的异步操作则需要在 new Promise() 构造函数期间传递一个 function 函数将具体的异步操作定义到 function 函数内部。示例代码如下
后期贴代码例子
2.4.3 获取 .then 的两个实参
通过 .then() 指定的成功和失败的回调函数可以在 function 的形参中进行接收示例代码如下
后期贴代码例子
2.4.4 调用 resolve 和 reject 回调函数
Promise 异步操作的结果可以调用 resolve 或 reject 回调函数进行处理。示例代码如下
后期贴代码例子
3. async / await
3.1 什么是 async/await
async/await 是 ES8ECMAScript 2017引入的新语法用来简化 Promise 异步操作。在 async/await 出现之前开发者只能通过链式 .then() 的方式处理 Promise 异步操作。示例代码如下
后期贴代码例子
.then 链式调用的优点解决了回调地狱的问题.then 链式调用的缺点代码冗余、阅读性差、不易理解
3.2 async/await 的基本使用
使用 async/await 简化 Promise 异步操作的示例代码如下
后期贴代码例子
3.3 async/await 的使用注意事项
① 如果在 function 中使用了 await则 function 必须被 async 修饰 ② 在 async 方法中第一个 await 之前的代码会同步执行await 之后的代码会异步执行
后期贴代码例子
4. EventLoop
4.1 JavaScript 是单线程的语言
JavaScript 是一门单线程执行的编程语言。也就是说同一时间只能做一件事情。
贴图
单线程执行任务队列的问题 如果前一个任务非常耗时则后续的任务就不得不一直等待从而导致程序假死的问题。
4.2 同步任务和异步任务
为了防止某个耗时任务导致程序假死的问题JavaScript 把待执行的任务分为了两类 ① 同步任务synchronous
又叫做非耗时任务指的是在主线程上排队执行的那些任务只有前一个任务执行完毕才能执行后一个任务 ② 异步任务asynchronous又叫做耗时任务异步任务由 JavaScript 委托给宿主环境进行执行当异步任务执行完成后会通知 JavaScript 主线程执行异步任务的回调函数
4.3 同步任务和异步任务的执行过程
贴图
① 同步任务由 JavaScript 主线程次序执行 ② 异步任务委托给宿主环境执行 ③ 已完成的异步任务对应的回调函数会被加入到任务队列中等待执行 ④ JavaScript 主线程的执行栈被清空后会读取任务队列中的回调函数次序执行 ⑤ JavaScript 主线程不断重复上面的第 4 步
4.4 EventLoop 的基本概念
贴图
JavaScript 主线程从“任务队列”中读取异步任务的回调函数放到执行栈中依次执行。这个过程是循环不断的所以整个的这种运行机制又称为 EventLoop事件循环。
结合 EventLoop 分析输出的顺序
贴图代码
正确的输出结果ADCB。其中
A 和 D 属于同步任务。会根据代码的先后顺序依次被执行C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中等待主线程空闲时再执行
5. 宏任务和微任务
5.1 什么是宏任务和微任务
JavaScript 把异步任务又做了进一步的划分异步任务又分为两类分别是 ① 宏任务macrotask
异步 Ajax 请求、setTimeout、setInterval、文件操作其它宏任务 ② 微任务microtaskPromise.then、.catch 和 .finallyprocess.nextTick其它微任务
贴图
5.2 宏任务和微任务的执行顺序
贴图
每一个宏任务执行完之后都会检查是否存在待执行的微任务 如果有则执行完所有微任务之后再继续执行下一个宏任务。
5.3 去银行办业务的场景
① 小云和小腾去银行办业务。首先需要取号之后进行排队
宏任务队列 ② 假设当前银行网点只有一个柜员小云在办理存款业务时小腾只能等待单线程宏任务按次序执行 ③ 小云办完存款业务后柜员询问他是否还想办理其它业务当前宏任务执行完检查是否有微任务 ④ 小云告诉柜员想要买理财产品、再办个信用卡、最后再兑换点马年纪念币执行微任务后续宏任务被推迟 ⑤ 小云离开柜台后柜员开始为小腾办理业务所有微任务执行完毕开始执行下一个宏任务
5.4 分析以下代码输出的顺序
贴图代码
正确的输出顺序是2431 分析 ① 先执行所有的同步任务
执行第 6 行、第 12 行代码 ② 再执行微任务执行第 9 行代码 ③ 再执行下一个宏任务执行第 2 行代码
5.5 经典面试题
请分析以下代码输出的顺序代码较长截取成了左中右 3 个部分
贴图代码
正确的输出顺序是156234789
