2302_80406801的博客

原创 js 原型链分析

在 js 中原型链主要是为了实现面向对象语言中继承的特性。对于前端从业者来说，原型链确实是非常重要，具有划分性的知识，掌握好原型链的问题能让你更好的理解 js 的原型继承机制。

原创 vue生命周期

vue生命周期

原创 vue2的基本语法

vue虽然是javascript的一套框架，但是他依然有许多特有的语法，还是需要掌握的。对于引入vue源码的方式不做探讨，在正式的开发中，不会通过这种方式。无论是下载到本地还是直接用cdn建议在学习的时候这样用，开发中不会如此使用。

原创 vue介绍

原创 在nestjs中集成jwt校验

jwt (json web token) 是 通过json的形式在网络中传输的一种协议。jwt 的优势在于它可以支持跨端在 小程序或者手机端进行使用。一般情况下，它包括三部分 header、payload、signature。

原创 nestjs中集成swagger文档

【代码】nestjs中集成swagger文档。

原创 nestjs引篇

Nestjs 是一个用于构建高效、可扩展的 Node.js 服务器端的框架。它的底层以前端常见的两个服务端框架：express和 Fastify 为基础。（默认express 可以换成Fastify）

原创 认识mysql

mysql 是一个关系型数据库管理系统，关系型数据库管理系统（RDBMS）是针对关系数据的数据库管理系统。关系型数据库管理系统一般有：Oracle、MySQL、SQL Server、DB2、PostgreSQL等等非常多。这是反直觉的，因为很多人刻板认为 mysql就是数据库，但其实本质上它是在数据库和用户之间进行一个中间层，这个中间层就是关系型数据库管理系统。sql 是一种数据库查询语言，关系型数据库是通过 sql 语句进行管理的。mysql 是关系型数据库管理系统。

原创 linux 的文件结构

本文主要介绍了linux的相关文件目录以及作用

原创 markdown 基本语法

根据# 号个数,每个# 号都代表一级标题.根据自己的层次结构决定使用几个#号。一般是有递进规律，一个井号的只用一次。

原创 react hooks

什么是 hooks?增强了函数组件的功能。在没有 hooks 时，函数组件是没有状态、生命周期、ref 等。通过 hooks 使函数组件也具有这些能力。在没有 hooks 时，函数组件是缺少部分功能的，只有 class 类组件才拥有这些功能。因此函数组件性能更优，更符合 React 的设计，所以要尽可能的用函数组件。

原创 react函数组件和类组件

首先，类组件和函数组件本质上都是相同的，只是两种不同的编写组件的方式。并且，由于 hooks 的出现，函数在性能和功能上完全可以取代类组件。而且，函数组件也更方便，因此在开发中应该越来越趋近于函数组件，但是也要了解类组件的编写方法，了解 react 的原理。

原创 资源提示符

前面两个可以在写的时候正常的根据实际场景使用，后两个一般是在框架中做一些优化使用。

原创 包管理器分析

对于前端开发而言，包管理是其中非常重要的一环。

原创 css 探索 : BFC

BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。

原创 屏幕刷新率与页面渲染优化

现代浏览器通过高效的事件循环机制协调多种任务，并根据系统资源和用户交互状态动态调整渲染行为。开发者应理解每一帧的工作流程和时间预算，合理安排任务执行顺序，从而构建出高性能、流畅的 Web 应用体验。

原创 vim 的基本使用

vim 是一个强大的文本编辑器，是 vi 的增强版，广泛用于 Linux 和UNIX 系统中，因为它不仅仅有文本编辑功能还可以进行复杂的文本操作。

原创 react 脚手架

脚手架相当于是命令行操作工具，为我们预设了 webpack 的打包配置以及各种项目初始化需要引入的包。可以通过下面这个命令全局安装官方脚手架。17 几乎跟 16 用法没有区别。18或者更高 默认最高版本。常用的 react 版本。

原创 前端模块化

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元.编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块，是将不同功能的函数封装起来，并提供使用接口，他们彼此之间互不影响，想要什么功能，就加载什么模块，可以实现按需加载。简单来说，模块化就是把系统分割成独立的功能块,提高代码的复用性。

原创 MVVM 模型

Model（模型）：负责处理数据和业务逻辑，比如数据的存储、读取、更新等操作。View（视图）：负责展示数据和与用户进行交互，像界面布局、按钮、文本框等。Controller（控制器）：作为 Model 和 View 之间的桥梁，接收用户的输入，调用 Model 进行相应的业务处理，并将处理结果传递给 View 进行展示。

原创 前端模块化开发

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元.编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块，是将不同功能的函数封装起来，并提供使用接口，他们彼此之间互不影响，想要什么功能，就加载什么模块，可以实现按需加载。简单来说，模块化就是把系统分割成独立的功能块,提高代码的复用性。

原创 计算机编码

例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。

原创 弹性布局和网格布局的属性总结

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

原创 CSS层叠顺序

在 CSS 中，元素的层叠顺序决定了当多个元素重叠时（跟布局没有完全的关系，也就是说层叠顺序只会在几个叠放元素上进行比较，而不会改变布局），哪个元素显示在最上面，哪个元素显示在最下面。默认情况下，元素的层叠顺序是由它们在 HTML 中出现的顺序决定的——后出现的元素会覆盖前面元素的显示区域。但 CSS 提供了多个方式来调整这个顺序，确保元素按照特定的需求进行堆叠。视觉层叠在浏览器渲染页面时，如果多个元素的位置发生重叠，浏览器会根据它们的“层叠顺序”来决定哪个元素显示在上面。

原创 01背包问题

我们可以将题目中的物品、价值、背包容量抽象成一个二维数组，以物品下标作为列头，背包容量作为行头，通过不断的填充这个二维的dp表格，我们可以找到最后一个位置，就是我们想要找到的在n件物品中 ，背包容量为total时的最优解。这个问题考察的方向是动态规划和贪心算法，通过降低问题的规模将复杂问题转换成简单问题，最终得到问题的解，该问题描述了一个有着最大容量限制的背包，在n件商品中找出可以放入物品的最大价值。通过表格将数据清晰的表现出来。实现一个算法求解 01 背包问题。

原创 浏览器是如何工作的

目前，桌面设备上有五种主要浏览器：Chrome、Internet Explorer、Firefox、Safari 和 Opera。在移动设备上，主要浏览器包括 Android 浏览器、iPhone、Opera Mini 和 Opera Mobile、UC 浏览器、Nokia S40/S60 浏览器和 Chrome，其中除了 Opera 浏览器外，所有浏览器均基于 WebKit。我将举例说明开源浏览器 Firefox 和 Chrome，以及 Safari（部分开源）。根据StatCounter 统计数据。

原创 ArkTs基本语法

ArkTS是HarmonyOS生态的应用开发语言。静态类型并发增强空值安全。

原创 pnpm和monorepo架构

pnpm是一个更快更小的软件包管理器，一般用于node_modules的相关包的安装，是对npm的改进。他可以在下载软件包之前先对依赖进行解析，然后对相同的包进行硬链接到你的项目中，避免了重复安装。

原创 Webpack常见配置实例

自定义 Loader 和 Plugin 是 Webpack 的强大功能之一。它们允许我们实现更复杂的功能，如文件转换、代码生成等。自定义 Loader:​​Loader 实质上是一个函数，它接收源文件内容作为输入，并输出处理后的内容。可以通过 this.callback 返回结果。自定义 Plugin:​Plugin 是一个类（ES6+），它包含 apply 方法。apply 方法接收一个 compiler 对象，通过这个对象你可以钩入 Webpack 的各个构建阶段。

原创 Webpack打包构建流程

在前端有非常多的资源，如css、js、vue、vue、 图片、字体等。有些资源需要加工处理3. 图片 -> file-loader + url-loaderoptimization（webpack优化配置）splitChunksPlugin（优化配置的重要部分插件）分包和压缩代码，合并代码，代码分割，缓存，css提取。

原创 HTML学习初步

HTML是广泛使用的标准标记语言，用于构建网页。是超链接和标记语言的组合。HyperText和。

原创 TS学习总结

用来创建一个类型别名，：可以精确地定义函数类型，包括参数类型和返回值类型。

原创 CSS核心（上）

CSS由多组“规则”组成。选择器（Selector）：多个选择器可以半角逗号隔开。属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。属性和值之间用半角冒号隔开，属性和值合称为“特性”。多个特性间用;隔开，最后用大括号{ }括起来。CSS里现在共有5种基本选择器（Basic Selectors）和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。

原创 css包含块

在css中一些属性的计算可能超出你的预料，在普遍情况下会认为定位属性和百分比的宽高是根据父元素计算的，但是准确来说他们都是根据元素所在的包含块来计算的，所以掌握包含块的知识是非常关键的。

原创 vue3（下）

实现原理:通过对Object.defineProperty()对属性的读取，修改进行拦截。即数据劫持的操作进行监听，但是这样是有问题的，就是无法删除和添加属性（只是说加上或者删除的没有了响应式），而且无法捕获到通过修改数组下标对数组的更改。通过Proxy代理，拦截对象中任意属性的变化，包括属性的读取，修改、设置、删除。通过Reflect 反射对被代理对象的属性进行操作。首先在vue3中不会存在vue2里面的那两个问题。引入watch,可以监听数据变化并调用相应的回调。使用时需要引入 computed方法。

原创 vue3（上）

组合式API的核心是setup函数，它是组件的入口点，所有的响应式API和组合式API都是在这个函数中使用的。v3也是支持一定的v2写法但是尽量不要在v3中书写v2的代码。

原创 资源提示符

async插入js脚本时可以使用该提示符，并行js脚本加载和html文件的解析，在加载完成后会直接执行js暂停html的渲染defer插入js脚本的提示符，并行js脚本的加载和html的解析，在js加载完成后不会立即执行，会等待html解析完再执行。

原创 文档碎片对象

【代码】文档碎片对象。

原创 vue路由

vue创建的是单页应用，需要使用路由进行页面跳转。单页应用的用户体验更好，不会造成页面跳转的抖动。router会监测网页路径的变化，通过监测不同路由路径来切换展示的组件。

原创 jwt加密

jwt的本质只是一个base64的字符串，本身没有什么加密，加密需要人为的对编码进行处理。