目录
#博学谷IT学习技术支持#
1、ES6 模块化
1. 回顾:node.js 中如何实现模块化
node.js 遵循了 CommonJS 的模块化规范。其中:
导入其它模块使用 require() 方法
模块对外共享成员使用 module.exports 对象
模块化的好处:
大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,
利人利己
2. 前端模块化规范的分类
在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模
块化规范。
AMD 和 CMD 适用于浏览器端的 Javascript 模块化
CommonJS 适用于服务器端的 Javascript 模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!
3. 什么是 ES6 模块化规范
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。
ES6 模块化规范中定义:
每个 js 文件都是一个独立的模块
导入其它模块成员使用 import 关键字
向外共享模块成员使用 export 关键字
4. 在 node.js 中体验 ES6 模块化
node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语
法,可以按照如下两个步骤进行配置:
确保安装了 v14.15.1 或更高版本的 node.js
在 package.json 的根节点中添加 "type": "module" 节点
首先先检自己的node.js版本号
在终端中输入 npm init -y 生成package.json文件
在 package.json 的根节点中添加 "type": "module" 节点
5. ES6 模块化的基本语法
ES6 的模块化主要包含如下 3 种用法:
默认导出与默认导入
按需导出与按需导入
直接导入并执行模块中的代码
5.1默认导出与默认导入
默认导出
默认导出的语法: export default 默认导出的成员
let i = 10
function fn() {
return 1
}
export default {
i,
fn
}
默认导入
默认导入的语法: import 接收名称 from '模块标识符'
import obj from './01向外导出成员.js'
console.log(obj); //{ i: 10, fn: [Function: fn] }
默认导出的注意事项
每个模块中,只允许使用唯一的一次 export default,否则会报错!
默认导入的注意事项
默认导入时的接收名称可以任意名称,只要是合法的成员名称即可:
5.2按需导出与按需导入
按需导出
按需导出的语法: export 按需导出的成员
export let i = 1
export function fn() {
return 'aaa'
}
按需导入
按需导入的语法: import { s1 } from '模块标识符'
import {i, fn} from './03.按需导出.js'
console.log(i); //1
console.log(fn); //[Function: fn]
按需导出与按需导入的注意事项
每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时,可以使用 as 关键字进行重命名
按需导入可以和默认导入一起使用
5.3 直接导入并执行模块中的代码
如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导
入并执行模块代码,示例代码如下:
import './01向外导出成员.js'
2、Promise
1. 回调地狱
多层回调函数的相互在嵌套,就形成了回调地狱。示例代码如下
回调地狱的缺点:
代码耦合性太强,牵一发而动全身,难以维护
大量冗余的代码相互嵌套,代码的可读性变差
1.1 如何解决回调地狱的问题
为了解决回调地狱的问题,ES6(ECMAScript 2015)中新增了 Promise 的概念。
1.2 Promise 的基本概念
1.Promise 是一个构造函数
我们可以创建 Promise 的实例 const p = new Promise()
new 出来的 Promise 实例对象,代表一个异步操作
Promise.prototype 上包含一个 .then() 方法
每一次 new Promise() 构造函数得到的实例对象,
都可以通过原型链的方式访问到 .then() 方法,例如 p.then()
.then() 方法用来预先指定成功和失败的回调函数
p.then(成功的回调函数,失败的回调函数)
p.then(result => { }, error => { })
调用 .then() 方法时,成功的回调函数是必选的、失败的回调函数是可选的