文章目录

一、ES6 模块化
- （一）认识 ES6 模块化
- - 1、JS 模块化分类
  - 2、ES6 模块化定义
  - 3、node.js 中体验 ES6 模块化
- （二）基本语法
- - 1、默认导出/导入
  - 2、按需导出/导入
  - 3、直接导入并执行
二、Promise
- （一）回调地狱
- （二）基本概念
- - 1、构造函数
  - 2、.then()
- （三）基本用法
- - 1、基于 then-fs
  - 2、链式调用
  - 3、.catch() 捕获错误
  - 4、Promise.all()
  - 5、Promise.race()
  - 6、基于 Promise 封装文件
三、async/await
四、EventLoop
- （一）同步任务和异步任务
- （二）同步异步任务执行机制
- （三）EventLoop
五、宏任务和微任务
- （一）概念
- （二）执行机制
六、API 接口案例
- （一）案例需求
- （二）实现步骤
七、webpack
- （一）基本概念
- - 1、本质
  - 2、作用
- （二）使用步骤
- - 1、准备
  - 2、基础使用
- （三）配置
- - 1、修改默认入口和出口
  - 2、自动生成 html 文件
  - 3、打包 css 文件
  - 4、更多
- （四）开发服务器
- - 1、优点
  - 2、使用

一、ES6 模块化

（一）认识 ES6 模块化

1、JS 模块化分类

浏览器端：AMD、CMD
服务器端：CommonJS
官方通用：ES6 模块化

2、ES6 模块化定义

每个 JS 文件都是独立模块
导入其他模块使用 import 关键字
对外共享模块使用 export 关键字

3、node.js 中体验 ES6 模块化

安装 v14.15.1 或更高版本 node.js
npm init -y 快速生成的 package.json 根节点中添加 “type”:“module”

（二）基本语法

1、默认导出/导入

默认导出：export default 导出成员
注意：每个模块仅允许导出一次

let n1 = 10 // 定义模块私有成员 n1
let n2 = 20 // 定义模块私有成员 n2，未导出故外界无法获取
function show(){} // 定义模块私有方法 showexport default{ // 默认导出语法，向外共享两成员 n1 和 shown1,show
}

默认导入：import 接收名称 from '模块标识符'
注意：接收名称任意但必须合法（仅支持字母开头）

// 从模块 n1文档.js 中导入 export default 向外共享的成员，并用名称 m1 接收
import m1 from './01文档.js'console.log(m1) // n1 ：10， show:[Function: show]

2、按需导出/导入

按需导出：export 按需导出成员
注意
- 每个模块中可以使用多次按需导入
- 按需导入和按需导出成员名称必须保持一致
- 按需导入时支持 as 关键字重命名
- 支持按需导入和默认导入同时使用

export let s1 = 'aaa'
export let s2 = 'bbb'
export function dance(){}export default { // 同时使用默认导出s3: 'ccc'
}

按需导入：import {名称1, 名称2…} from ‘模块标识符’

import {s1, s2 as S2, dance} from './02文档.js'
import info, {s1, S2, dance} from './02文档.js' // 同时使用 info 进行默认导入console.log(s1) // aaa
console.log(s2) // bbb
console.log(dance) // [Function: dance]

3、直接导入并执行

直接导入：import ‘模块标识符’
- 注意：仅执行某个模块中的代码，无需得到模块向外共享成员

import './03文档.js'

二、Promise

（一）回调地狱

定义：多层回调函数的互相嵌套
缺点
- 耦合性强，难以维护
- 冗余代码相互嵌套，可读性差
方案：ES6 中新增 Promise 解决回调地狱问题

（二）基本概念

1、构造函数

创建实例：const p = new Promise()
实例对象：代表异步操作

2、.then()

Promise.prototype 上包含一个 .then() 方法
每次 new Promise() 得到的实例对象都可以通过原型链访问到 .then()
.then() 方法预先指定成功/失败回调函数
- p.then(成功回调函数, 失败回调函数)
- 成功回调必选，失败回调可选

p.then(result =>{}, error =>{})

（三）基本用法

1、基于 then-fs

node.js 官方 fs 模块仅支持回调函数方式读文件，不支持 Promise 调用方式
安装 then-fs 第三方包，支持 Promise 调用方式

2、链式调用

Promise 支持链式调用，解决回调地狱问题

3、.catch() 捕获错误

Promise 支持链式调用，解决回调地狱问题

4、Promise.all()

5、Promise.race()

6、基于 Promise 封装文件

方法名称：getFile
形参：fpath，读取文件的路径
返回值：Promise 实例对象

// 形式的异步操作，不确定具体功能读文件/发送 ajax
function getFile(fpath){return new Promise()
}// 具体的异步操作，确定为读取文件
function getFile(fpath){return new Promise(function(resolve, reject){fs.readFile(fpath, 'utf-8', (err, dataStr) => {}) // 将具体的异步操作定义到 function 内部}) getFile('路径').then(成功回调, 失败回调)}

三、async/await

背景：.then() 链式调用操作过于冗余，阅读性差，不易理解
作用：ES8 引入的新语法，简化 Promise 异步操作
注意
- await 用在 promise 实例对象之前，async 必须搭配使用
- async 方法中，第一个 await 之前的代码同步执行，之后的代码异步执行

四、EventLoop

（一）同步任务和异步任务

JS 是单线程执行的编程语言，同一时间只能做一件事。单线程执行任务队列时，如果前一任务非常耗时，则后续任务一直等待导致程序假死
同步任务：非耗时任务，在主线程排队按序执行
异步任务：耗时任务，由 JS 委托给宿主环境执行，执行完成后通知 JS 主线程执行异步任务的回调函数

（二）同步异步任务执行机制

（三）EventLoop

事件循环：JS 主线程不断从任务队列中读取异步任务的回调函数，放到执行栈依次执行

五、宏任务和微任务

（一）概念

（二）执行机制

交替执行：每一个宏任务执行完成，都会检查是否存在待执行的微任务，优先执行完所有微任务再执行下一个宏任务
场景类比

六、API 接口案例

（一）案例需求

基于 MySQL 数据库 + Express 对外提供用户列表的 API 接口服务
技术点
- 三方包 express 和 mysql2
- ES6 模块化
- Promise 和 async/await

（二）实现步骤

搭建项目基本结构
- ES6 模块化支持
- 安装第三方依赖包
```
npm install express@4.17.1 mysql2@2.2.5
```
创建基本服务器
创建 db 数据库操作模块
创建 user_ctrl 业务模块
创建 user_router 路由模块
导入并挂载路由模块
使用 try…catch 捕获异常

七、webpack

（一）基本概念

1、本质

第三方打包工具，整合、压缩、转义代码

2、作用

支持所有类型文件打包并减少文件数量
支持 less/sass 转为 css，支持 ES6/7/8 转为 ES5
提高浏览器打开速度

（二）使用步骤

1、准备

初始化包环境 package.json

yarn init // 传说中比 npm 更快的方式

安装依赖包

yarn add webpack webpack-cli -D

package.json 配置自定义命令 scripts

"scripts":{"build":"webpack"
}

编码：所有代码都要在入口文件引入

2、基础使用

打包入口：新建 src/index.js
操作函数：新建 src/操作函数.js 模块并导出
按需导入：index.js 引入模块并使用函数输出
进行打包：执行 yarn build 自定义命令进行打包生成 dist/main.js
- 找到配置文件、入口和依赖关系以后，打包代码输出到指定位置

（三）配置

新建 webpack.config.js 进行配置
webpack 默认打包 js 文件
开发环境编写代码，打包后运行代码
webpack-插件：更多功能
webpack-加载器：处理更多类型文件

1、修改默认入口和出口

默认入口：src/index.js
默认出口：dist/main.js
修改入口文件名
配置

module.exports = {entry: './src/main.js', // 入口output: { // 出口path: path.resolve(__dirname, 'dist'), // 出口路径filename: 'bundle.js', // 出口文件名},
};

打包

yarn build

2、自动生成 html 文件

安装

yarn add html-webpack-plugin -D

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [new HtmlWebpackPlugin({ //plugin 插件配置template:'./public/index.html' // 告知webpack 使用插件时，以自己 html 文件作为模板生成 dist/html 文件})],
};

打包

yarn build

3、打包 css 文件

安装

yarn add css-loader style-loader -D

配置

module.exports = {module: { // 加载器配置rules: [ // 规则{ // 一个具体规则test: /\.css$/i, // 匹配 .css 结尾的文件use: ["style-loader", "css-loader"], // 让 webpack 使用两个 loader 处理 css 文件；// 从右向左执行，不能颠倒顺序；// css-loader：webpack 解析 css 文件，把css 代码一起打包进 js 中；// style-loader：css 代码插入 DOM 中},],},
};

打包

yarn build

4、更多

更多插件参考 webpack

（四）开发服务器

1、优点

服务器内存中打包，速度快
自动更新打包变化代码，实时返回浏览器

2、使用

安装

yarn add webpack-dev-server -D

package.json 配置

"scripts":{"build":"webpack","server":"webpack server"}

启动

yarn serve

【前端进阶】前端进阶知识补充相关推荐

17、前端开发：HTML知识补充——表格标签
1.table标签块元素 tr表示表格中的一行,有几个tr就有几行 td表示一个单元格,有几个td就有几个单元格 rowspan 纵向合并单元格 colspan 横向合并单元格举例:三行两列表 ...
【前端词典】进阶必备的网络基础（下）
前言在上一篇我提到了前端面试频率较高的几个网络基础知识,这一篇我会把上一篇遗留的五个尽力讲清楚.如果还没有来得及看上一篇,那么现在可以一起看. 目录接下来我会讲以下内容: 五类 IP 地址跨域的 ...
写给前端的算法进阶指南，我是如何两个月零基础刷200题等推荐
大家好,我是若川. 话不多说,这一次花了几小时精心为大家挑选了20余篇好文,供大家阅读学习.本文阅读技巧,先粗看标题,感兴趣可以都关注一波,一起共同进步. 前端从进阶到入院作者ssh就职于字节跳动基 ...
写给初中级前端的高级进阶指南等
大家好,我是若川. 话不多说,这一次花了几小时精心为大家挑选了20余篇好文,供大家阅读学习.本文阅读技巧,先粗看标题,感兴趣可以都关注一波,绝对不亏. 程序员成长指北考拉妹子,一个有趣的且乐于分享的 ...
前端知识补充说明（一）之HTTP/浏览器等基础原理部分
前端知识补充说明(一)之HTTP/浏览器等基础原理部分 1. 说一下http和https https的SSL加密是在传输层实现的.(1)http和https的基本概念http: 超文本传输协议,是互联 ...
一名合格前端工程师的进阶指南！都来认真看一下吧
一.前端工程化是现代前端的必备技能 Web 前端这几年进化速度之快让人咂舌,很多前端工程师都不禁吐槽"学不动了". 如今已经不是 HTML.CSS.JS 前端三剑客仗剑走天下的时代 ...
一份【超级全面】的前端工程师的技术知识自检清单，初学者请收藏
开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现 ...
java 前端基础知识_【计算机·知识】关于前端的计算机基础知识
原标题:[计算机·知识]关于前端的计算机基础知识作为一个刚刚入门的程序猿,你是否对专业知识有足够的了解?今天新闻君带你走进前端的世界. 前端的语言接触起来相对于后端的语言要容易不少,但前端的语言也有 ...
谈谈Java程序员进阶的那些知识和方向
谈谈Java程序员进阶的那些知识和方向记得前段时间看过一篇文章谈到一种程序员叫野生程序员,战斗力极强,可以搞定一切问题,但是通常看问题抓不到本质,或者说是google/baidu/stackover ...
前端开发的浏览器知识
前端开发的浏览器知识 1.1 在浏览器中输入url 用户输入url,例如http://www.feng.com.其中http为协议,www.feng.com为网络地址,及指出需要的资源在哪台计算机上. ...

【前端进阶】前端进阶知识补充

文章目录

一、ES6 模块化

（一）认识 ES6 模块化

1、JS 模块化分类

2、ES6 模块化定义

3、node.js 中体验 ES6 模块化

（二）基本语法

1、默认导出/导入

2、按需导出/导入

3、直接导入并执行

二、Promise

（一）回调地狱

（二）基本概念

1、构造函数

2、.then()

（三）基本用法

1、基于 then-fs

2、链式调用

3、.catch() 捕获错误

4、Promise.all()

5、Promise.race()

6、基于 Promise 封装文件

三、async/await

四、EventLoop

（一）同步任务和异步任务

（二）同步异步任务执行机制

（三）EventLoop

五、宏任务和微任务

（一）概念

（二）执行机制

六、API 接口案例

（一）案例需求

（二）实现步骤

七、webpack

（一）基本概念

1、本质

2、作用

（二）使用步骤

1、准备

2、基础使用

（三）配置

1、修改默认入口和出口

2、自动生成 html 文件

3、打包 css 文件

4、更多

（四）开发服务器

1、优点

2、使用

【前端进阶】前端进阶知识补充相关推荐

最新文章

热门文章