文章目录
ES6模块化基本使用Promiseasync和awaitEventLoop宏任务和微任务API接口案例
Webpackwebpack处理css文件webpack处理图片和字体图标webpack兼容性webpack开发服务器（webpack-dev-server模块）
ES6模块化
ES6 模块化规范中定义：每个 js 文件都是一个独立的模块,导入其它模块成员使用 import 关键字,向外共享模块成员使用 export 关键字。
基本使用
node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照如下两个步骤进行配置：npm init -y配置初始环境
确保安装了 v14.15.1 或更高版本的 node.js在 package.json 的根节点中添加 “type”: “module” 节点 默认导出的语法： export default 默认导出的成员每个模块中，只允许使用一次 export default，否则会报错！
let n1 = 10
let n2 = 20
function show() {}
//默认
export default {
n1:20,
show
}
默认导入的语法： import 接收名称 from '模块标识符。默认导入时的接收名称可以任意名称，只要是合法的成员名称即可。
import m1 from './01.默认导出.js'
console.log(m1)//{ n1: 20, show: [Function: show] }
按需导出：：每个模块中可以使用多次按需导出
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {}
export default {
}
**按需导入：**按需导入的成员名称必须和按需导出的名称保持一致，按需导入时，可以使用 as 关键字进行重命名，按需导入可以和默认导入一起使用
import info, { s1, s2 as str2, say } from './03.按需导出.js'//info为默认，没有默认导出的时候值为{}，但是必须要有export default
如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，如：import './05.直接运行模块中的代码.js'
Promise
多层回调函数的相互嵌套，就形成了回调地狱，即回调里面有进行了回调，为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。Promise 是一个构造函数可以创建 Promise 的实例 const p = new Promise() Promise.prototype 上包含一个 .then() 方法. then() 方法用来预先指定成功和失败的回调函数。 p.then(成功的回调函数，失败的回调函数)。p.then(result => { }, error => { })调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的。then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。可以使用连环 .then()方法为执行规定顺序，解决回调地狱。 4.在 Promise 的链式操作中如果发生了错误，可以使用 catch 方法进行捕获和处理.
import thenFs from 'then-fs'
thenFs
.readFile('./files/11.txt', 'utf8')
.catch((err) => {
console.log(err.message)//箭头函数，函数的简单写法
})
.then((r1) => {
console.log(r1)
return thenFs.readFile('./files/2.txt', 'utf8')
})
.then((r2) => {
console.log(r2)
return thenFs.readFile('./files/3.txt', 'utf8')
})
Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）. Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的 .then 操作（赛跑机制）自定义promise读取函数的操作，因为前面我们讲过读取函数的操作返回的是promise实例对象：
import fs from 'fs'
function getFile(fpath) {
return new Promise(function (resolve, reject) {
fs.readFile(fpath, 'utf8', (err, dataStr) => {
if (err) return reject(err)
resolve(dataStr)
})
})
}
async和await
async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。上述情况下我们返回的是一个promise对象，使用await可以返回读取到的结果，但是如果使用await函数前就必须加上async。在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行，也就是先执行完所有从上到下的第一个await前的代码，在执行所有函数中在await之后的代码。
import thenFs from 'then-fs'
async function getAllFile() {
const r1 = await thenFs.readFile('./files/1.txt', 'utf8')
console.log(r1)//111
}
getAllFile()
EventLoop
JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。JavaScript 把待执行的任务分为了两类：
同步任务（synchronous）又叫做非耗时任务，指的是在主线程上排队执行的那些任务异步任务（asynchronous）又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境（如浏览器或者node.js）进行执行当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数,如函数这种比较复杂的就为异步任务。如下图所示：
JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）
宏任务和微任务
每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。promise函数里面是同步任务，但是后面的then是异步任务。
API接口案例
！！！注意：要想使用promise函数，在导入安装数据库的时候需要使用，mysql2！！！
Webpack
配置文档： https://webpack.docschina.org/concepts/#entry
webpack本质是, 一个第三方模块包, 用于分析, 并打包代码。 ⚫ 支持所有类型文件的打包 ⚫ 支持less/sass => css ⚫ 支持ES6/7/8 => ES5 ⚫ 压缩代码, 提高加载速度使用方法，建议使用yarn 和npm类似，但是速度更快 首先初始化：yarn init 其次安装依赖：yarn add webpack webpack-cli -D //D代表安装到开发环境 配置scripts： “scripts”: { “build”: “webpack” }webpack如何使用
默认src/index.js – 打包入口文件（注意一定要这样写，因为默认入口在这里）需要引入到入口的文件才会参与打包（即进行导入和导出进行关联）执行package.json里yarn build命令, 执行webpack打包命令默认输出dist/main.js的打包结果 更改webpack打包默认的入口和出口：新建webpack.config.js，填入配置，修改文件名
const path = require('path');
module.exports = {
entry: './src/main.js', // webpack入口
output: { // 出口
path: path.resolve(__dirname, 'dist'),//出口路径
filename: 'bundle.js',//出口文件名
},
};
下载jq用yarn add jquery,在js直接使用就行不用再去官网下载对应的包，在js文件夹中直接使用import $ from 'jquery’导入即可html-webpack-plugin插件：https://webpack.docschina.org/plugins/html-webpack-plugin/：以让该插件为你生成一个 HTML 文件（顺带所有的打包配置），不用再手动进行创建
下载插件：yarn add html-webpack-plugin -Dwebpack.config.js添加配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js', // webpack入口
output: { // 出口
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin({ // plugins插件配置
template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
})],
};
webpack处理css文件
安装css-loader和style-loader配置webpack.config.js：
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
在入口引入css文件 import “./css/index.css” 处理less文件yarn add less less-loader -D，配置webpack.config.js：随后再在入口处进行引入即可
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
};
webpack处理图片和字体图标
webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader 文档: https://webpack.docschina.org/guides/asset-modules/配置webpack.config.js：
rules: [ // 规则
{ // 图片文件的配置(仅适用于webpack5版本)
test: /\.(gif|png|jpg|jpeg)/,
type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
// 如果你设置的是asset模式
// 以8KB大小区分图片文件
// 小于8KB的, 把图片文件转base64, 打包进js中
// 大于8KB的, 直接把图片文件输出到dist下
}
],
同时，我们需要在main.js中把文件引入进去：import imgObj from ‘./assets/1.gif’图片转base64打包进js中好处是减少浏览器发送的请求次数, 读取图片速度快，坏处是图片过大, 转base64占空间会多30%左右。处理字体图标：将字体图标引入到入口css文件中：import “./assets/fonts/iconfont.css” 配置webpack.config.js：
rules: [
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
generator: { // 生成文件名字 - 定义规则
filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
}
}
],
webpack兼容性
1.下载babel 和babel-loader，babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法，babel-loader: 可以让webpack转译打包的js代码 安装：npm install -D babel-loader @babel/core @babel/preset-env webpack 2. 配置webpack.config.js：
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
use: {
loader: 'babel-loader', // 使用这个loader处理js文件
options: { // 加载器选项
presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
}
}
}
],
webpack开发服务器（webpack-dev-server模块）
webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/首先下载 yarn add webpack-dev-server -D 其次自定义webpack开发服务器启动命令serve – 在package.json里：
"scripts": {
"build": "webpack",
"serve":"webpack serve"
}
最后使用yarn serve 启动当前工程里的webpack开发服务器
精彩文章
您阅读本篇文章共花了：
发表评论