type
status
date
slug
summary
tags
category
icon
学习进度
AJAX
AJAX介绍：
AJAX是异步的JavaScript和XML，简单理解就是使用XMLHrrpRequest对象与服务器通信，它可以在不刷新页面的情况下与服务器通信，交互数据，或更新页面。AJAX的作用是浏览器和服务器之间通信，动态数据交互。
URL
URL介绍：
统一资源定位符，或叫统一资源定位器、定位地址、URL地址，俗称网页地址，简称网址，用于访问网络上的资源。是因特网上标准的资源地址，现在它已经被万维网联盟编制为因特网标准RFC 1738。
- http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式。
- 域名：标记服务器在互联网中方位。
- 资源路径：标记资源在服务器下的具体位置。
URL查询参数
传参数的作用：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。
语法：
http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2常用请求方法
请求方法：对服务器资源，要执行的操作
请求方法 | 操作 |
GET | 获取数据 |
POST | 提交数据 |
PUT | 修改数据（全部） |
DELETE | 删除数据 |
PATCH | 修改数据（部分） |
axios的核心配置：
- url：请求URL地址
- method：请求方法，GET可以省略（不区分大小写）
- params：查询参数
- data：提交数据
axios错误处理
- axios错误处理是对axios请求过程中发生的错误进行捕获、处理、响应的过程。
- axios错误处理一般会使用
catch函数，无论是请求错误还是响应错误，最终都会进入到catch函数中。
- axios错误处理通常在具体请求的
catch中，如果业务复杂，也可以前后端约定好错误代码，按照不同的错误代码做出相应的错误处理。
语法：在
then方法的后面，通过.语法调用catch方法，传入回调函数并定义形参。
例子：注册用户，重复注册时通过弹框提示用户错误原因。
HTTP协议-请求报文
HTTP协议：规定了浏览器发送及服务器返回内容的格式。
请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容。
请求报文主要有三部分组成：请求行、请求头、请求体。
- 请求行：请求方法，URL，协议。
- 请求头：以键值对的格式携带的附加信息。
- 空行：分隔请求头，空行之后是发送给服务器的资源。
- 请求体：发送的资源。
在浏览器上查看请求报文的步骤：
请求报文可以协助调试，发生错误的时候可以查看请求报文的内容信息，来排查和分析出错的地方。
HTTP协议-响应报文
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容。
响应报文的组成：
- 响应行：（状态行）协议、HTTP响应状态码、状态信息。
- 响应头：以键值对的格式携带的附加信息。
- 空行：分隔响应头，空行之后的是返回给浏览器的资源。
- 响应体：返回的资源。
HTTP响应状态码
HTTP响应状态码：用来表明请求是否成功完成。
比如：404（服务器找不到资源）
状态码 | 说明 |
1xx | 信息 |
2xx | 成功 |
3xx | 重定向消息 |
4xx | 客户端错误 |
5xx | 服务端错误 |
接口文档
接口文档是介于前端与后端之间的一种规范性文档，用于描述前后端交互的接口信息。
接口的基本信息：
- 接口协议：如http、https、tcp协议等。
- 接口请求方式：常见的请求方式有get、post，还有put、delete等。
- 接口url。
- 接口名称。
- 接口请求头部：包含请求头部参数、参数说明。
- 接口请求体：包含请求参数、参数说明，与参数格式。
form-serialize插件
作用：快速收集表单元素的值。
Bootstrap弹框
- 通过属性控制，弹窗显示或隐藏（适合单纯的显示隐藏的时候）
- 通过JS控制，弹框显示或隐藏（适合在显示和隐藏之前还要进行js操作的时候）
图书管理案例
当属性名和类名相同的时候可以使用以下技巧快速赋值。
图片上传
XMLHttpRequest
AJAX 的原理是：通过 XmlHttpRequest 对象来向服务器发送异步请求，从服务器中获得数据，然后用 JavaScript 来操作 DOM 从而更新局部页面。
AJAX 相当于在用户和服务器之间加了一个中间层（AJAX 引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，只有确定需要从服务器读取新数据时再由 AJAX 引擎代为向服务器提交请求。
XHR是XMLHttpRequest的缩写，是浏览器内置的一种对HTTP请求和响应的处理方式，能够获取和发送数据，支持流处理、进度事件和断点续传，是fetch和Ajax的基础。
XHR是浏览器与服务器之间进行数据通信的底层接口，它提供了一种向服务器发送请求并接收响应的方法。
XHR可以用于向服务器发送HTTP请求以及接收服务器的响应，但它对于HTTP协议的访问、请求类型、请求数据大小等方面都有一定的限制，不同的浏览器对于XHR的支持程度也不同。
XHR使用步骤：
- 创建XHR对象。
- 调用open方法，设置rul和请求方法。
- 监听loadend事件，接收结果。
- 调用send方法，发起请求。
XMLHttpRequest-查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。
语法：
http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2Promise
promise对象用于表示一个异步操作的最终完成或失败及其结果值。
Promise-三种状态
概念：一个Promise对象，必然处于以下三种状态的其中一种
- 待定（pending）：初始状态，既没有兑现，也没有拒绝。
- 已兑现（fulfilled）：意味着，操作成功完成。
- 已拒绝（rejected）：意味着，操作失败。
注意：Promise对象一旦被兑现/拒绝就是已敲定了，状态无法再被改变。
同步代码和异步代码
同步代码：实际上浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作，在上一行完成后才会执行下一行。这样做很有必要，因为每一行代码都是建立在前面代码的基础之上的。这也使得它成为一个同步程序。
异步代码：异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果。比如：setTimeout、setInterval、事件、AJAX。
- 同步代码：逐行执行，需原地等待结果后，才继续向下执行。
- 异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数。
回调函数地狱
概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱。
缺点：可读性差，异常无法捕获，耦合性差，牵一发动全身。
详细解释：回调函数地狱是指在编写异步JavaScript代码时，回调函数嵌套的现象越来越深，导致代码的可读性变差、维护性变差、复杂度增加、错误率增加等问题。回调函数的问题在于，如果不小心处理不当，它们非常容易导致嵌套回调函数的问题，这些被称为回调地狱。回调地狱的本质是嵌套函数存在严重的耦合，牵一发而动全身，以及错误处理比较艰难，不能使用try catch 和不能直接return。
Promise-链式调用
概念：依靠
then()方法会返回一个新生的Promise对象特性，继续串联下一环任务，直到结束。细节：
then()回调函数中的返回值，会影响新生的Promise对象最终状态和结果。好吃：通过链式调用，解决回调函数嵌套问题。
async函数和await
定义：async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字来获取Promise对象成功的结果值。async和await关键字让我们可以用一种简洁的方式写出基于Promise的异步行为，而无需链式调用Promise。
注意：async函数可以调用await，但await只能在async函数中使用，await等待的是一个Promise对象，后面必须跟一个Promise对象。
好处：
- 代码结构更简单：使用类似于同步代码的语法，使得异步操作的代码更加易于理解和编写。
- 错误处理更方便：使用try/catch块可以非常方便地捕获和处理异步操作中的错误。
- 调试更便捷：使用async/await可以更方便地在开发者工具中进行调试。
- 处理并发和串行操作更直观：使用async/await可以通过简单的语法实现并行和串行的异步操作。
async函数和await捕获错误
- try/catch块是一个错误处理机制，用于在代码执行过程中捕获和处理可能出现的错误。它包括两个部分：try块和catch块。
- 在try块中，你可以放置可能抛出错误的代码，这些错误包括但不限于语法错误、类型错误、运行时错误等。当try块中的代码执行时，如果发生错误，程序会立即跳转到后面的catch块中进行处理。
- catch块用于捕获try块中抛出的错误，并对其进行处理。在catch块中，你可以定义一个变量来接收错误的详细信息，然后对这个错误进行处理。catch块通常用于输出错误信息、记录错误或者执行一些恢复操作。
- try/catch块的使用可以使得代码更加健壮和可靠，因为它可以在发生错误时提供更好的控制流和错误处理机制。
语法：try…catch语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。
事件循环
定义：执行代码和收集异步任务的模型，在调用空闲，反复调用任务队列里面回调函数的执行机制，就叫事件循环。
原因：因为JavaScript是单线程的，为了异步耗时的代码不阻塞JS引擎，设计执行代码的模型。
- JS内会直接执行同步代码，遇到异步代码就给宿主浏览器环境执行，异步有了结果后，把回调函数放入任务队列排队，当调用栈空闲后，反复调用任务队列里的回调函数。
宏任务与微任务
概念：JS引擎是运行在客户端，浏览器是运行在服务端。
宏任务：浏览器执行的异步代码。例如：JS脚本事件，计时器，AXAJ请求完成事件，用户交互事件等。
微任务：JS引擎执行的异步代码。例如：Promise对象.then()的回调（但Promise对象是同步代码）
JavaScript内代执行步骤：
- 执行第一个script脚本事件宏任务，里面的同步代码。
- 遇到宏任务/微任务交给宿主环境，有结果回调函数进入对应队列。
- 当执行栈空闲时，首先清空微任务队列，再执行下一个宏任务，从新再走一遍这个流程。
Promise.all静态方法
概念：合并多个Promise对象，等待所有同时成功完成（或某一个失败），做后续逻辑
语法：
项目准备
技术：
- 基于Bootstrap搭建网站标签和样式。
- 集成wangEditor插件实现富文本编辑器。
- 使用原生JS完成增删改查等业务。
- 基于axios与黑马头条线上接口交互。
登录页面
手机验证码登录流程
- 输入手机号，点击发送验证码（正则表达式）（绑定点击事件）。
- 调用服务器的短信验证码接口，并携带已经输入的手机号。
- 服务器会为该手机号随机生成一个验证码，并且记录保存下生成的时间（后期做对比）。
- 服务器调用运营商接口，并携带手机号和验证码一起发送过去（三大运营商），如果手机没有收到短信需将第四部前面的流程重新做一次。
- 运营商通过基站将包含验证码的短信发送到指定的电话号码上（这个步骤不会等手机端回应，只要短信发送成功即可）。
- 发送成功之后就把返回成功的响应结果返回给服务器。
- 服务器再将成功的结果发送到客户端（客户端就会显示短信发送成功并显示在倒计时）。
- 用户查看到短信之后将验证码输入到输入框中最后点击登录按钮（绑定点击事件）。
- 客户端调用验证码登录接口，并携带手机号和验证码一起发送过去给服务器。
- 服务器收到手机号和验证码之后和之前第三步生成的记录做对比，判断验证码是否正确以及是否在有效期内并返回。
- 比对完之后将结果返回给用户端登录成功或是失败。
token的介绍
概念： 访问权限的令牌，本质上是一串字符串。
创建：正确登录后，由后端签发并返回。
作用：判断当前使用该网站的用户是否有登录状态等，控制访问权限。
注意：前端只能判断token的有无，而后端通过解密可以提取token字符串的原始信息，才能判断token的有效性。
axios请求拦截器
axios请求拦截器：发起请求之前，调用一个函数，对请求参数进行设置。
什么时候使用axios请求拦截器：有公共配置和设置时，统一设置在请求拦截器中。
什么时候使用axios请求拦截器：有公共配置和设置时，统一设置在请求拦截器中。
axios响应拦截器
axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应结果统一处理。
axios响应拦截器是通过响应状态码来判断调用成功或是失败的回调函数，状态码为2xx则触发成功回调，其他则触发失败的回调函数。
优化axios响应结果
因为axios响应的结果是axios内部封装的结果对象，如下图会把服务器返回的数据对象挂在data属性下，比如我们要访问里面的name属性就需要再then下的result.data.data.name这样才能拿到name属性的值，这时我们就想到能不能把result的值直接是服务器返回来的结果对象。
富文本编辑器
使用wangEditor插件
- 引入css定义样式
- 定义html结构
- 引入JS创建编辑器
- 监听内容改变，保存在隐藏文本域（便于后期收集）
第一步先准备html标签结构，然后引入对应的css和js插件，第二步（基于文档样式复制过来）按需改改，第三步根据文档引入核心js代码（要搞懂每一行代码每个配置项甚至是每个变量的作用）再结合文档，这样才能在原有的基础上更改成符合自己需求的样子，最后一步把富文本的内容同步到一个隐藏域的tectarea中，方便我们发布时的快速收集
获取频道数据列表
封面设置
这段代码的作用是，当用户点击页面上的某个元素时，会自动触发另一个元素的点击事件，通常用于实现一些交互效果或者隐藏一些原生的文件上传按钮。
可以同时应用click事件和change事件在同一个元素上。click事件用于处理用户的点击交互，而change事件用于处理表单元素值的改变。这两种事件可以分别用于不同的交互场景，比如在单击按钮时执行某些操作，同时也可以在表单元素的值发生改变时执行其他操作。因此，你可以在同一个元素上同时应用这两种事件，根据需要来处理不同的交互逻辑。
FormData是一种用于在客户端收集和发送数据的对象，通常用于处理表单数据或进行文件上传。可以通过调用new FormData()构造函数，你可以创建一个空的 FormData 对象。然后，你可以使用 FormData 对象的方法来添加键值对数据，这些数据可以是表单字段的值，也可以是文件对象。收集并保存发布的文章
获取文章列表数据
文章筛选功能
分页功能
删除功能和出现的bug
编辑文章回显
编辑文章保存
退出功能
Node.js
前端工程化： 开发项目直到上线，过程中集成的所有工具和技术。
Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容）
Node.js是什么：Node.js是基于Chrome谷歌浏览器的内核V8引擎（C++程序）封装的（运行环境），它可以独立执行JavaScript代码的环境。
Node.js与浏览器环境的JS最大区别是：Node.js环境中没有BOM和DOM。
Node.js的作用：
编写后端程序：数据和网页资源等。
前端工程化：集成各种开发中使用的工具和技术。
Node.js执行代码步骤：在VSCode终端中输入：node xxx.js回车即可执行（注意路径）
fs模块-读写文件
模块：类似插件，封装了方法/属性。
fs模块：封装了与本机文件系统进行交互的，方法/属性。
语法：
- 加载fs模块对象
- 写入文件内容
- 读取文件内容
- 示例代码
path模块-路径处理
URL中的端口号
URL：统一资源定位符，简称网址，用于访问服务器里的资源。
端口号：标记服务器里不同功能的服务程序。
端口号范围：0-65535之间的任意整数。
注意：http协议，默认访问80端口
Web服务程序：提供网上信息浏览的程序代码。
http模块-创建Web服务
需求：创建Web服务并响应内容给浏览器
步骤：
- 加载http模块，创建Web服务对象。
- 监听request请求事件，设置响应头和响应体。
- 配置端口号并启动Web服务
- 浏览器请求http：//localhost:3000测试（localhost：固定代表本机的域名）
模块化简介
- CommonJS模块是为Node.js打包JavaScript代码的原始方式。Node.js还支持浏览器和其他JavaScript运行时使用的ECMAScript模块标准。
- 概念：项目是由很多个模块文件组成的。
- 好处：提高代码复用性，按需加载，独立作用域。
- Node.js中每个文件都是独立的模块。
模块之间使用特定语法进行导入和导出使用。
如果导入的是内置模块直接写名字，导入自定义模块的话需要写模块文件路径。
模块名或路径：
内置模块：直接写名字（例如：fs，path，http）（npm下载的也是写名字）
自定义模块：写模块文件路径（例如：
./utils.js）CommonJS标准规定：
导出模块：
module.exports = {}导入模块：
require('模块名或路径')
ECMAScript标准-默认导出和导入
默认标准使用：
- 导出：
export default{}
- 导入：
import变量名from'模块名或路径'
Node.js支持两种模块化标准：
- CommonJS标准语法（默认）
- ECMAScript标准语法
注意：Node.js默认支持CommonJS标准语法。
如需使用ECMAScript标准语法，在运行模块所在文件夹新建package.json文件，并设置
{"type":"module"}
ECMAScript标准-命名导出和导入
命名标准使用：
- 导出：
export修饰定义语句
- 导入：
import{同名变量}from'模块名或路径'
默认和命名如何选择：
- 按需加载，使用命名导出和导入
- 全部加载，使用默认导出和导入
包的概念
包：将模块，代码，其他资料聚合成一个文件夹。
包分类：
项目包：主要用于编写项目和业务逻辑。
软件包：封装工具和方法进行使用。
要求：根目录中，必须有package.json文件（记录包的清单信息）
Utils下的lib文件夹里面就是我们要封装的工具和方法的源代码。
index.js文件就是我们默认向外暴露的唯一出口。
要把上面的arr.js和str.js两个文件里面的功能和方法引入到index.js出口文件中再向外暴露。（这个唯一出口的作用就是把所有工具模块方法集中起来，统一向外暴露）
导入utils软件包，使用里面封装的工具函数。
引入require(’./utils’)，它就会去找软件包下的index.js入口文件（如果没有index.js文件就找main属性指定的入口文件）
在终端运行这个server.js文件就可以使用软件包里面的函数了。
npm-软件包管理器
- npm是Node.js标准的软件包管理器。
- 2017年仓库已有35万个软件包。
- 他起初是作为下载和管理Node.js包依赖的方式，但其现在已分为前端JavaScript中的使用工具。
- npm软件包管理器作用是下载包以及管理版本。
- 终端命令口诀：
npm是下包，node是执行。
npm init -y命令是初始化项目清单文件package.json
npm i 软件包名字是下载软件包的命令。
- 下载的包会放在当前目录下的node_modulse中，并记录在package.json中。
npm安装所有依赖
- 项目中不包含node_modules是不能正常运行的。（因为缺少依赖的本地软件包）
- 别人的项目不带node_modules是因为自己用npm下载依赖比磁盘传递拷贝要快得多。但会带package.json和package-lock.json文件，这样我们自己就可以通过npm i命令来下载package.json中记录的所有软件包（所有依赖软件包）。
npm全局软件包nodemon
软件包区别：
本地软件包：当前项目内使用，封装属性和方法，存在于node_modules。
全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置。
nodemon作用：替代node命令，检测代码更改，自动重启程序。
nodemon的使用：
- 安装：
npm i nodemon -g(-g代表安装到全局环境中）。（因为服务器在国外，所有需要镜像源，输入npm config set registry https://registry.npm.taobao.org/）
- 运行：
nodemon待执行的目标js文件
Node.js总结
Webpack简介
Webpack是一个用于现代JavaScript应用程序的静态打包工具，当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块合成一个或多个bundles，它们均为静态资源，用于展示你的内容。
静态模块： 指的是编写代码过程中的，html，css，js，图片等固定内容的文件。
打包：把静态模块内容，压缩，整合，转译等（前端工程化）
- 把less/sass转成css代码。
- 把ES6+降级成ES5
- 支持多种模块标准语法。
自动生成html文件
插件html-webpack-plugin：在webpack打包时生成html文件。
- 下载html-webpack-plugin本地软件包。
- 配置webpack.config.js让Webpack拥有插件功能。
- 打包重新观察。
最终都会找到这个dist出口的路径，然后拼接打包后的文件引入到输出文件当中。
打包css代码
加载器css-loader：解析css代码。
加载器style-loader：把解析后的css代码插入到DOM
（插件只是让webpack拥有更多功能，加载器能让webpack识别更多内容类型的模块文件）
步骤：
- 准备css文件代码引入到src/login/index.js中（压缩转义处理等）。
- 下载css-loader和style-loader本地软件包。
- 配置webpack.config.js让webback拥有该加载器功能。
- 打包重新观察。
优化-提取css代码
插件 mini-css-extract-plugin：提取css代码（把css单独提取到css文件中）
步骤：
- 下载mini-css-extract-plugin本地软件包。
- 配置webpack.config.js让Webpack拥有该插件功能。
- 打包重新观察。
注意：不能和style-loader一起使用
好处：css文件可以被浏览器缓存，减少js文件体积。
优化-压缩过程
问题：css代码提取后没有压缩。
解决：使用css-minimizer-webpack-plugin插件。
步骤：
- 下载css-minimizer-webpack-plugin本地软件包。
- 配置webpack.config.js让webpack拥有该功能。
- 打包重新观察。
- Webpack核心的使用：实际上我们想要Webpack拥有一些额外的功能，就不断地找插件或加载器下载，看文档给它配置上，那就能让Webpack拥有这些功能了。
打包less代码
加载器less-loader：把less代码编译为css代码。
步骤：
- 新建less代码（设置背景图）并引入到src/login/index.js中。
- 下载less和less-loader本地软件包。
注意：less-loader需要配合less软件包使用。
- Less 是一种 CSS 预处理器，用来为 CSS 文件添加变量、函数、混入等高级功能。Less 文件的后缀名是
.less，它的语法和 CSS 类似，但是支持一些额外的特性。
打包图片
资源模块：Webpack5内置资源模块（字体，图片等）打包，无需额外loader（加载器）
步骤：
- 配置：webpack.config.js让Webpack拥有打包图片功能。
- 占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串。（哈希算法会对我们引入的这些资源模块内容做算法计算，每一个内容对应的哈希字符串都是一对一的映射关系，只要图片不变哈希值就一直都不变）
- 占位符【ext】使用当前模块原本的占位符，例如：.png/.jpg等字符串。（引入的资源模块拓展名也是不相同的，所以也要用拓展名的占位符）
- 占位符【query】保留引入文件时代码中查询参数（只有URL下生效）
注意：判断临界值默认为8KB
- 大于8KB文件：发送一个单独的文件并导出URL地址。
- 小于8KB文件：导出一个data URL（base64字符串）（data URL 统一资源标识符）
小文件打包进浏览器当中，浏览器就可以减少一次http请求，可使网页加载更快一些。
文件转base64会让文件夹体积变大百分之二十到三十，如果文件越大转base64就得不偿失了，所以小的转，大的直接复制文件。
搭建开发环境
问题：之前改代码，需要重新打包才能运行查看，效率很低。
开发环境：配置webpack-dev-server快速开发应用程序。
作用：启动Web服务，知道检测代码变化，热更新到网页。
- 开发环境：项目还处于自己电脑中的运行的环境。
- 生产环境：代码最终要运行到线上给用户访问的环境。
注意：dist目录和打包内容是在内存里（更新快）
步骤：
- 下载webpack-dev-server软件包到当前项目。
- 设置模式为开发模式，并配置自定义命令。（两个设置）
- 使用npm run dev 来启动开发服务器，试试热更新效果。
打包模式
打包模式：告知Webpack使用相应模式的内置优化。
模式名称 | 模式名字 | 特定 | 场景 |
开发模式 | development | 调试代码，实时加载，模块热替换等 | 本地开发 |
生产模式 | production | 压缩代码，资源优化，更轻量等 | 打包上线 |
设置：
方式1：在webpack.config.js配置文件设置mode选项。（快）
方式2：在package.json命令行设置mode参数。（小）
注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置。
打包模式的应用
需求：在开发模式下用style-loader内嵌更快，在生产模式下提取css代码。
方案1：webpack.config.js配置导出函数，但是局限性大（只接受2种模式）
方案2：借助cross-env（跨平台通用）包命令，设置参数区分环境。
方案3：配置不同的webpac.config.js（适合多种模式差异性较大情况）
步骤：
- 下载cross-env软件包到当前项目。
- 配置自定义命令，传入参数名和值（会绑定到process.env对象下）
- 在webpack.config.js区分不同环境使用不同配置。
前端注入环境变量
需求：前端项目中，开发模式下打印语句生效，生产模式下打印语法失效。
问题：cross-env设置的只在Node.js环境生效，前端代码无法访问process.env.NODE_ENV
解决：使用Webpack内置的DefinePlugin插件。
作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式。
开发环境调错-source map
问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
source map：可以准确追踪error和warning在原始代码的位置。
设置：webpack.config.js配置devtool选项。
inline-source-map选项：把源码的位置信息一起打包在js文件内。
注意：source map仅适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）
解析别名alias
解析别名：配置模块如何解析，创建import引入路径的别名，来确保模块引入变得更简单。
例如：原来路径如图，比较长而且相对路径不安全。
解决：在webpack.config.js中配置解析别名@来代表src绝对路径。
把
用@来代表绝对路径
优化-CDN使用
CDN定义：内容分发网络，指的是一组分布在各个地区的服务器。
作用：把静态资源文件/第三方库放到CDN网络中各个服务器中，供用户就近请求获取。
好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略。
步骤：
- 在html中引入第三方库的CDN地址并用模板语法判断。
- 配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）
- 在html文件中使用cdn地址，用户使用cdn技术来就近获取第三方库的相关代码内容，所以在Webpack打包的情况下就没有任何的第三方源代码了，这样就可以让我们的项目体积更小一些，它运行在浏览器上，实际上第三方库它会用cdm地址进行请求，然后就近返回第三方库源码。（其实开发模式和生产模式运行的代码都是一样的）（借助cdn实现加速的一个效果）
多页面打包
单页面：单个html文件，切换DOM的方式实现不同业务逻辑展示。
多页面：多个html文件，切换页面实现不同业务逻辑展示。
需求：把黑马头条-数据管理平台-内容页面一起引入打包使用。
步骤：
- 准备源码（html，css，js）放入相应位置，并改用模块化语法导出。
- 下载form-serialize包并导入到核心代码中使用。
- 配置webpack.config.js多入口和多页面的设置。
优化-分割公共代码
需求：把2个以上页面引用的公共代码提取。
步骤：
- 配置webpack.config.js的splitChunks分割功能。
Git初识
Git：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码。
作用：记录代码内容，切换代码版本，多人开发时高效合并代码内容。
配置：用户名和邮箱，应用在每次提交代码版本时表明自己身份。
Git仓库
Git仓库（repository）：记录文件状态内容的地方，存储着修改的历史记录。
两种创建方式：
- 把本地文件夹转换成Git仓库：命令git init
- 从其他服务器上克隆Git仓库。
注意：以
.开头的文件一般是隐藏的。Git的三个区域
Git使用时：
工作区：实际开发时操作的文件夹。
暂存区：保存之前的准备区域（暂存改动过的文件）
版本库：提交并保存暂存区中的内容，产生一个版本快照。
命令 | 作用 |
git add 文件名 | 暂存指定文件 |
git add . | 暂存所有改动的文件 |
git commit -m “注释说明” | 提交并保存，产生版本快照 |
git ls-files | 查看当前项目下记录的文件 |
步骤：git add 添加到暂存区，等待时机后 git commit 提交保存到版本库，产生一次版本快照记录。
Git文件状态
Git文件2种状态：
未跟踪：新文件，从未被Git管理过。
已跟踪：Git已经知道和管理的文件（新添加，未修改，已修改）。
使用：修改文件，暂存，提交保存记录，如此反复。
命令：git status -s 查看暂存区和工作区的文件状态。
第一列是暂存区状态。
第二列时工作区状态。
技巧：第一个M是和版本库中已提交的进行对比。
文件状态 | 概念 | 场景 |
未跟踪（U） | 从未被Git管理过 | 新文件 |
新添加（A） | 第一次被Git管理 | 之前版本记录无此文件 |
未修改（‘’） | 三个区域一致 | 提交保存后 |
已修改（M） | 工作区内容变化 | 修改了内容产生 |
Git暂存区使用
暂存区：暂时存储，可以临时恢复代码内容，与版本库解耦。
暂存区的内容恢复到工作区：暂存区→覆盖→工作区
命令：git restore 目标文件（注意：完全确认覆盖时使用）（覆盖后没关vsc的情况下是可以Ctrl+z恢复的，关了就恢复不了）
从暂存区移除文件（取消暂存），命令：git rm —cached 目标文件
Git回退版本
概念：把版本库某个版本对应的内容快照，恢复到工作区、暂存区。
回退命令：
git reset —soft 版本号（其他文件未跟踪）
git reset —hard 版本号
git reset —mixed 版本号（与git reset等价）
注意1：只有记录在版本库的提交记录才能恢复。
注意2：回退后，继续修改 →暂存→提交操作即可（产生新的提交记录过程）
查看提交版本历史记录：git log —oneline
已回退，查看以前的历史记录：git reflog —oneline
删除文件
命令 clear ：清空终端内容。
没有从版本库直接删除的命令，比如我们想要删除某个版本的某个内容的话，就先回退该版本，再到工作区和暂存区删除想删除的内容再保存到版本库达到一个删除的效果。
总结：工作区只要改变，都可以暂存提交产生新记录。
忽略文件
概念：.gitignore文件可以让git彻底忽略跟踪指定文件。
目的：让git仓库更小更快，避免重复无意义的文件管理。
需要忽略的文件：
- 系统或软件自动生成的文件
- 编译产生的结果文件。
- 运行时生成的日志文件，缓存文件，临时文件等。
- 涉密文件，密码，秘钥等文件。
创建：
- 项目根目录新建.gitignore文件。
- 填入相应配置来忽略指定文件。
注意：如果文件已经被暂存区跟踪过，可以从暂存区移除即可。
分支
概念：本质上是指向提交节点的可变指针，默认名字是master。（指向提交记录）
注意：HEAD指针影响工作区、暂存区的代码状态。
分支使用场景：开发新需求、修复Bug，保证主线代码随时可用，多人协同开发提供效率。
- 创建分支命令：git branch分支名。
- 切换分支命令：git checkout分支名。
分支-合并与删除
- 合并其他分支过来：git merge 分支名
- 删除合并后（要合并后才能删除，而且要在合并后的原分支上删除分支）的分支指针：git branch -d 分支名
分支-合并与提交
合并提交：发生于原分支产生了新的提交记录后，再合并回去时发生，自动使用多个快照记录合并后产生一次新的提交。
注意：最后合并回到主分支上时是按提交记录的顺序按照产生的先后顺序排列，而非合并的先后顺序。
分支-合并冲突
概念：不同分支中，对同一个文件的同一部分修改，Git无法干净的合并，产生合并冲突。
解决：打开VSCode找到冲突文件并手动解决，解决后需要提交一次记录。
VSCode提供了四种方法：
- 采用当前更改：保留后更改的
- 采用传入的更改：保留已经更改的
- 保留双方更改：两个都一起保留
- 比较变更：可视化的比较两个的不同再做决定
避免冲突：（多人，多交流）
- 按页面划分不同分支开发。
- 公共代码在统一文件夹维护。
- Node等软件版本统一，npm包统一下载。
Git常用命令
命令 | 作用 | 注意 |
git -v | 查看Git版本 | ㅤ |
git init | 初始化Git仓库 | ㅤ |
git add 文件标识 | 暂存某个文件 | 文件标识以终端为起始的相对路径 |
git add . | 暂存所有文件 | ㅤ |
git commit -m '说明注释' | 提交产生版本记录 | 每次提交，把暂存区内容快照一份 |
git status | 查看文件状态-详细信息 | ㅤ |
git status -s | 查看文件状态-简略信息 | 第一列时暂存区状态，第二列是工作区状态 |
git ls-files | 查看暂存区文件列表 | ㅤ |
git restore 文件标识 | 从暂存区恢复到工作区 | 如果文件标识为 . 则恢复所有文件 |
git rm —cached 文件标识 | 从暂存区移除文件 | 不让git跟踪文件变化 |
git log | 查看提交记录-详细信息 | ㅤ |
git log —oneline | 查看提交记录-简略信息 | 版本号、分支指针、提交时说明注释 |
git reflog —oneline | 查看完整历史-简略消息 | 包括提交，切换，回退等所有记录 |
git reset 版本号 | 切换版本代码到暂存区和工作区 | —soft模式保留暂存区和工作区原本内容
—hard模式不保留暂存区和工作区原本内容
—mixed模式不保留暂存区，工作区保留（默认）先覆盖到暂存区，再用暂存区对比
覆盖工作区 |
git branch 分支名 | 创建分支 | ㅤ |
git branch | 查看本地分支 | ㅤ |
git branch -d 分支名 | 删除分支 | 请确保记录已经合并到别的分支下，再删除分支 |
git checkout 分支名 | 切换分支 | ㅤ |
git checkout -b 分支名 | 创建并立刻切换分支 | ㅤ |
git merge 分支名 | 把分支提交历史记录合并到当前所在分支 | ㅤ |
文件状态 | 概念 | 场景 |
未跟踪（U） | 从未被Git管理过 | 新文件 |
新添加（A） | 第一次被Git管理 | 之前版本记录无此文件 |
未修改（‘’） | 三个区域一致 | 提交保存后 |
已修改（M） | 工作区内容变化 | 修改了内容产生 |
Git远程托管
概念：托管在因特网或其他网络中的你的项目的版本库。
作用：保存版本库的历史记录，多人协作。
创建：公司自己服务器、第三方托管平台（Gitee，GitLab，GitHub…）。
需求：创建远程版本库，并把本地Git仓库推送上去保存。
步骤：
- 注册第三方托管平台网站账号。
- 新建仓库得到远程仓库Git地址。
- 本地Git仓库添加远程仓库原点地址：
- 命令：git remote add 远程仓库别名 远程仓库地址
- 例如：git remote add origin https://gitee.com/lidongxu/work.git
- 本地Git仓库推送版本记录到远程仓库。
- 命令：git push -u 远程仓库别名 本地：远程分支名
- 例如：git push -u origin master
- 完整写法：git push —set-upstream origin master:master （本地分支名：远程分支名）
- gitee新建仓库基本需要填写的选项
- 权限说明：管理员拥有仓库的全部权限，不包括删除仓库和清空仓库等。
- HTTPS：以https开头git结尾的，不能直接用浏览器访问，只能在Git终端访问。
- SSH：git@开头，这个协议可以免输入账号密码就可以连接使用，但需要配对对应的公钥才能使用。拓展：SSH是一种网络安全协议，通过加密和认证机制实现安全的访问和文件传输等业务。
git remote -v命令：查看本地Git仓库中有哪些远程仓库的地址，实际开发中一个本地仓库对应一个远程仓库就足够了。
- (fetch)：表示从哪个远程仓库取对应Git版本库的内容。
- (push)：表示从哪个远程版本库推送。
- 删除远程仓库的命令：
git remote remove 远程仓库别名
Git远程仓库-克隆
克隆：拷贝一个Git仓库到本地，进行使用。
命令：git clone 远程仓库地址。在运行命令所在文件夹，生成work项目文件夹（包含版本库，并映射到暂存区和工作区）（命令在Git提供的终端输入）。
注意：Git本地仓库已经建立好和远程仓库的连接。
注意：仓库公开随意克隆，推送需要身为仓库团队成员。
多人协同开发
步骤：开发代码→工作区→暂存区→提交→拉取（可选）→推送
- 推送之前要判断远程仓库的代码有没有更新，有的话还需拉取之后才推送，避免顶掉别人已经更新好的代码。
- clone是克隆创建一个一模一样的新文件，之后在这个文件基础上的更新就用pull push。
想要看到别人同步上去的最新内容：git pull oringin master （拉取）等价于
git fetch origin master:master（获取远程分支记录到本地，未合并）
git merge oringin/master（把远程分支记录合并到所在分支下）
在VSCode中使用Git
VSCode中有Git的可视化操作
点击完提交之后会有一个’同步更改‘按钮，点击就可以同步到远程版本库上去了。
提交之前也会遇到上一课说到的比如别人已经更新了等等，就可以点击右上角的三个点，这样就可以先拉取或推送了。
Git常用命令
命令 | 作用 | 注意 |
git remote add 远程仓库别名 远程仓库地址 | 添加远程仓库地址 | 别名唯一，地址是.git结尾的网址 |
git remote -v | 查看远程仓库地址 | ㅤ |
git remote remove 远程仓库别名 | 删除远程仓库地址 | ㅤ |
git pull 远程仓库别名 分支名 | 拉取 | 完整写法：git pull 远程仓库别名 远程分支名:本地分支名
等价于：git fetch 和 gitmerge |
git push 远程仓库别名 分支名 | 推送 | 完整写法：git push 远程仓库别名 本地分支名:远程分支名
-u：建立通道后以后可以简写git push |
git pull —rebase 远程仓库别名 分支名 | 拉取合并 | 合并没有关系的记录 |
git clone 远程仓库地址 | 克隆 | 从0得到一个远程的Git仓库到本地使用 |
- 作者:heliang
- 链接:https://heliang.fun/article/Web
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。