webpack攻略
webpack简介简介本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
webpack的核心概念为以下模块，后续会对以下概念针对性输出文章。
入口（entry）
输出（output）
loader
插件（plugin）
安装webpack 对操作系统没有要求，使用 Windows、Mac、Linux 操作系统均可，它唯一的依赖是 Node.js，所以使用 webpack 前需要先安装 Node.js，安装地址为 [Nodejs]](http://nodejs.cn/download/) 推荐安装TLS（长期维护）版本。node 安装完成后，在命令行输入 node -v，可显示版本号即安装成功。接下来，我们需要使用 Node.js 的包管理器 npm 来安装 webpack ，安装模块的方式有两种：一种是全局安装，一种是 ...
前端通关手册-React
概述React 是用于构建用户界面的 JavaScript 库，React 核心只关注视图，不断优化算法，改进性能，提高开发和交互体验。
React 迭代稳定，重视兼容和过渡，在国内外，尤其是南方，都有相当多的公司在使用 React。
渐进式的思想同样表现在 React 的学习曲线上，能够与传统的 Web 技术共存，灵活的 JSX 语法等都会让 React 上手很快， 而庞大生态赋予了 React 更强能力的同时，也让开发者感叹花费了更多时间在社区里遨游。
React 应用React 在前端开发领域应用广泛，使用 React 可以构建 Web，插件，单页应用，App，小程序，桌面端，服务端等，微服务，Serverless，低代码，虚拟现实等都有 React 的用武之地。
React 面试注意事项React 面试题可以分为以下 4 个方面
基础：ES5+ 作用域，class，箭头函数，this 指向，异步编程，高阶函数的循环等常问
会用：state，副作用，Hook，加载渲染过程，路由、测试、调试、TS、Redux 等常问
原理：Virtual DOM，Diff 算法，设计组件，优化性 ...
git使用
git常用命令git init初始化一个 Git 仓库，它将创建一个 .git 文件夹，后续的操作记录都会在此文件夹里，相当于 Git 的数据库。
git remote add origin 远程仓库地址将本地仓库和远程仓库关联，origin 是远程仓库的名字，是 Git 的默认叫法。关联之后，我们就可以将本地的提交历史推送到远程仓库，完成和其他人的协同工作了。
git remote -v查看关联的远程仓库列表，返回远程仓库名和 URL：
12git remote -vorigin https://github.com/schacon/ticgit (fetch)
git status显示当前工作目录和暂存区的状态，例如创建了一个文件，此时 git status 就会在 Untracked files 里显示该未追踪的文件，如果将该文件 add 了之后，就会在 Changes to be committed 看到，即已经加到缓存区，等待提交。最后，当我们 commit，就会发现没有任何修改和未提交的文件了。
git add [file] 、git add .用于将已修改或未跟踪的文 ...
前端学习路线
HTML / CSS / JavaScript 基础学习
xxxxxxxxxx //取消http代理git config –global –unset http.proxy//取消https代理 git config –global –unset https.proxyJS
《CSS 世界》 讲解细腻，拓展延伸对 CSS 的认识
《现代 JavaScript 教程》 线上教程，简单明了，时效性强
《JavaScript 高级程序设计》 传说中的红宝书
《JavaScript 权威指南》 传说中的犀牛书
jQuery / ES6+ / 正则 / Canvas 进阶学习
《jQuery 中文文档》 翻译完整，结构清晰
《ES6 入门教程》 线上教程，很多前端学习 ES6 的起点和字典
《正则表达式 30 分钟入门教程》 30 分钟从入门到掌握正则的使用
《Web 前端开发精品课 HTML5 Canvas 开发详解》图文并茂，代码示例丰富
《前端通关手册：JavaScript》 大量面试真题检测 ...
手撕代码-前端
数组扁平化ES6的flat方法flat() 方法将以指定的深度递归遍历数组，并将所有元素与遍历的子数组中的元素合并到一个新数组中以返回。
1234const arr = [1,[2,[3,[4,5]]],6]const res = JSON.stringify(arr).replace(/\[|\]/g,'')const res2 = JSON.parse('[' + res + ']')console.log(res2)
使用正则首先是使用 JSON.stringify 把 arr转为字符串接着使用正则把字符串里面的 [ 和 ] 去掉然后再拼接数组括号转为数组对象。
1234const arr = [1,[2,[3,[4,5]]],6]const res = JSON.stringify(arr).replace(/\[|\]/g,'')const res2 = JSON.parse('[' + res + ']')console.log(res2)
递归123 ...
操作系统
操作系统常见的操作系统Windows和Linux，它们的区别在于内核不同
计算机是由各种外部硬件设备组成的，比如内存、cpu、硬盘等，如果每个应用都要和这些硬件设备对接通信协议，那这样太累了，所以这个中间人就由内核来负责，让内核作为应用连接硬件设备的桥梁，应用程序只需关心与内核交互，不用关心硬件的细节。
内核有哪些能力呢？现代操作系统，内核一般会提供 4个基本能力:
管理进程、线程，决定哪个进程、线程使用 CPU，也就是进程调度的能力;
管理内存，决定内存的分配和回收，也就是内存管理的能力;
管理硬件设备，为进程与硬件设备之间提供通信能力，也就是硬件通信能力;。
提供系统调用，如果应用程序要运行更高权限运行的服务，那么就需要有系统调用，它是用户程序与操。作系统之间的接口。
内核具有很高的权限，可以控制 cpu、内存、硬盘等硬件，而应用程序具有的权限很小，因此大多数操作系统，把内存分成了两个区域:
内核空间，这个内存空间只有内核程序可以访问；
用户空间，这个内存空间专门给应用程序使用；
用户空间的代码只能访问一个局部的内存空间，而内核空间的代码可以访问所有内存空间。因此，当 ...
CSS面试记录
如何实现一个元素的水平垂直居中？要求对行内元素、块状元素及不定宽高的块状元素均可适用：
css3 有哪些新特性？
rgba 和 透明度
background-image、background-origin、background-size、background-repeat
word-wrap: break-word（对长的不可分割的单词换行）
文字阴影 text-shadow
font-face属性，定义自己的字体
border-radius
边框图片 border-image
盒阴影 box-shadow
媒体查询：定义多套 css，当浏览器尺寸发生变化时采用不同的属性
style 标签写在 body 后与 body 前有什么区别？
写在 body 标签前有利于浏览器逐步渲染： resources downloading –> cssDOM + DOM –> Render Tree –> layout –> paint
写在 body 标签后： 由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览 ...
HTML面试记录
HTML5新特性
HTML5的语义化是指使用正确的HTML元素（标签）来清楚地描述其含义和结构，以便更好地传达网页的内容和结构。HTML5引入了多种新的语义元素，这些元素提供了比传统HTML更丰富的方式来描述网页的不同部分。语义化的HTML不仅可以提高网页的可读性，还有助于搜索引擎优化（SEO），并增强网页的可访问性。
HTML5是HTML的第五个版本，引入了许多新的特性和功能。以下是HTML5的一些新增的特性：
语义化标签：HTML5引入了一些新的语义化标签，如header、nav、section、article等，使得网页结构更加清晰明了。
视频和音频支持：HTML5提供了video和audio`标签，可以直接在网页中嵌入视频和音频内容，不再需要使用第三方插件。
Canvas绘图：HTML5的canvas标签允许通过JavaScript在网页上绘制图形、动画和游戏等交互式内容。
本地存储：HTML5引入了本地存储机制，包括localStorage和sessionStorage，可以在浏览器端存储数据，提供了更好的离线应用支持。
表单增强：HTML5为表单元素提供 ...
Vue面试题总结
MVVM原理MVVM（Model-View-ViewModel）是一种软件架构设计模式，特别适合用于现代前端框架中，帮助实现数据驱动视图的开发方式。Vue.js 就是基于 MVVM 模式的框架之一。理解 MVVM 原理有助于理解 Vue 的工作机制，以及它是如何实现响应式数据绑定的。以下是 MVVM 模式的各个部分及其工作原理的详细描述：
MVVM 模式中的三个核心部分Model（模型）：Model 是应用程序的核心数据层，代表应用程序的数据和业务逻辑。它负责直接与后台 API 进行通信，获取和处理数据。在 Vue 中，Model 通常由 Vue 的响应式对象（例如使用 ref 或 reactive 创建的对象）表示。
View（视图）：View 是用户界面部分，负责显示数据给用户。它代表了用户直接与之交互的部分，比如 HTML 模板。在 Vue 中，View 就是模板文件（例如 .vue 文件中的模板部分），它会在浏览器中渲染成 DOM 元素。
ViewModel（视图模型）ViewModel 是连接 Model 和 View 的桥梁。它包含所有的展示逻辑，负责将 Model 中的数 ...
axios封装
对Axios的理解Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js，它提供了简洁的 API 和拦截器等功能，非常适合进行封装以应对复杂的请求场景。下面展示一个简单的 Axios 封装示例，包括基础配置、请求拦截器、响应拦截器以及如何使用。
安装 Axios首先，你需要确保项目中已经安装了 Axios。如果还未安装，可以通过以下命令安装：
1npm install axios
Axios 封装下面的代码示例展示了如何封装 Axios，包括配置基本的请求信息、添加请求拦截器和响应拦截器。
12345678910111213141516171819202122232425262728293031323334353637383940414243import axios from 'axios';// 创建axios实例const service = axios.create({ baseURL: 'https://your-api-baseurl.com', // API的base_url tim ...
