weixin_47808575的博客

原创 数据结构---二叉树

参考：二叉树遍历方法——前、中、后序遍历（图解）_二叉树遍历前序中序后序-CSDN博客

原创 数据结构---散列表（哈希表）

1、哈希表（Hash Table）：也叫做散列表。是根据关键码值（Key Value）直接进行访问的数据结构。2、哈希表通过「键 key 」和「映射函数 Hash(key) 」计算出对应的「值 value」，把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做「哈希函数（散列函数）」，存放记录的数组叫做「哈希表（散列表）」。

原创 数据结构---链表

1、数组是访问元素比较方便，这一节的则是插入与删除更方便。2、数组的元素地址是强制连续的，但是，它通过地址引用的方式指向下一个元素的位置，所以链表的数据结构看起来比较像一个串。

原创 数据结构---队列

队列是一种先进先出(FIFO)的数据结构，它有两个主要操作：入队(enqueue)和出队(dequeue)。队列中的元素只能通过队尾入队，只能通过队头出队。

原创 数据结构---栈

是一个，并且可以在数组的任意位置和元素。但是有时候，我们为了实现某些功能，必须对这种任意性加以限制。就是比较常见的。

原创 数据结构---数组

JavaScript 中的数组是一种特殊的对象，它能在单个变量名下存储多个值。数组内的每个值都有一个索引号，从0开始，这也使得我们可以用数组来模拟其他语言中的数组、列表、堆栈等结构。

原创 前端大杂烩

京东面试总结-CSDN博客58面试总结-CSDN博客字节面试问题-CSDN博客。

原创 react VS vue

用于构建用户界面的js库用于构建用户界面的渐进式js库。

原创 React setState

4、如果是true，说明组件正在批量更新，任何需要更新的组件需要进入dirtyComponents队列进行等待。都要进行新旧虚拟DOM的对比，然后将差异化的dom更新到页面上，性能损耗很大。设置为了异步，当状态更新时不能立即拿到更新后的状态，而是批量进行更新。方法将传入的状态放到组件的状态队列里面。5、如果是false，就正常进行批量更新。是同步的，那也就是每次调用。来处理将要更新的实例对象。是true还是false。

原创 react之错误边界

实际上是组件。

原创 react重新渲染以及避免不必要的渲染

1、setState2、context3、props4、forceUpdate1、useState2、props1、React.PureComponent/shouldComponentUpdate1、React.memo2、useMemo(缓存变量)3、useCallback(缓存函数)创建context对象注入数据类组件函数式组件1、通过Consume拿到数据2、 通过useContext 方式

原创 react-fiber

是协程，是比线程更小的单元，可以被人为中断和恢复，当react更新时间超过1帧时，会产生视觉卡顿的效果，因此我们可以通过fiber把浏览器渲染过程分段执行，每执行一会就让出主线程控制权，执行优先级更高的任务。大家都知道，页面是一帧一帧绘制出来的，当每秒绘制的帧数达到60时，页面是流畅的，小于这个值的时候是卡顿的，转换成时间就是16ms(1000/60)内执行的任务如果没有完成就会有卡顿。3、执行的过程就是，每处理完一个任务单元，若还有足够的时间就继续做下一个小任务，没有就把时间交还给浏览器。

原创 react合成事件

1、进行浏览器兼容，实现更好的跨平台React 采用的是顶层事件代理机制，能够保证冒泡一致性，可以跨浏览器执行。React 提供的合成事件用来抹平不同浏览器事件对象之间的差异，将不同平台事件模拟合成事件。2、避免垃圾回收事件对象可能会被频繁创建和回收，因此 React 引入事件池，在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉，而是存放进一个数组中，当事件触发，就从这个数组中弹出，避免频繁地去创建和销毁(垃圾回收)。3、方便事件统一管理和事务机制。

原创 简易版async/await

generator函数跟普通函数在写法上的区别就是，多了一个星号*，并且只有在generator函数中才能使用yield，什么是yield呢，他相当于generator函数执行的中途暂停点，比如下方有3个暂停点。而怎么才能暂停后继续走呢？那就得使用到next方法，next方法执行后会返回一个对象，对象中有value 和 done两个属性。2、 async函数返回的是一个Promise对象，有无值看有无return值。3、await后面最好是接Promise，虽然接其他值也能达到排队效果。

原创 手写promise

提示：在实现promise的时候，要先完全数据promise的具体使用，这样才能事半功倍。

原创 HarmonyOS--开发者证书考试地址

初级证书：华为开发者学堂高级证书：华为开发者学堂

原创 HarmonyOS--路由管理--页面路由 (@ohos.router)

自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。// 弹出自定义的询问框message: '您还没有完成支付，确定要返回吗？',buttons: [text: '取消',},text: '确认',// 用户点击了“取消”按钮// 用户点击了“确认”按钮// 调用router.back()方法，返回上一个页面})

原创 HarmonyOS--路由管理--组件导航 (Navigation)

1、Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式2、Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。3、通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果4、在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

原创 HarmonyOS--状态管理--装饰器

组件内的变量被@State装饰器装饰时，就可以触发其直接绑定UI组件的刷新。当状态改变时，UI会发生对应的渲染改变。

原创 HarmonyOS--UI范式基本语法--装饰器

在@Styles的基础上，我们提供了@Extend，用于扩展原生组件样式。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。可以提炼公共样式进行复用的装饰器@Styles。@Require装饰的参数，必须在构造时传参。更轻量的UI元素复用机制@Builder。让不可动画属性也能实现动画效果。

原创 HarmonyOS--数据传输能力

文档中心

原创 HarmonyOS--数据持久化--关系型数据库

关系型数据库基于SQLite组件，适用于存储包含复杂关系数据的场景，比如一个班级的学生信息，需要包括姓名、学号、各科成绩等，又或者公司的雇员信息，需要包括姓名、工号、职位等，由于数据之间有较强的对应关系，复杂程度比键值型数据更高，此时需要使用关系型数据库来持久化保存数据。

原创 HarmonyOS--数据持久化--键值型数据库

键值型数据库存储键值对形式的数据，当需要存储的数据没有复杂的关系模型，比如存储商品名称及对应价格、员工工号及今日是否已出勤等，由于数据复杂度低，更容易兼容不同数据库版本和设备类型，因此推荐使用键值型数据库持久化此类数据。

原创 HarmonyOS--数据持久化--用户首选项

1、用户首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。当用户希望有一个全局唯一存储的地方，可以采用用户首选项来进行存储。2、Preferences会将该数据缓存在内存中，当用户读取的时候，能够快速从内存中获取数据3、当需要持久化时可以使用flush接口将内存中的数据写入持久化文件中。

原创 HarmonyOS--生命周期

2、执行onWindowStageCreate()创建一个窗口，在这里可以使windowStage.loadContent(url，（）=>{})打开一个页面。1、首先执行onCreate(),用于页面初始化和设置页面逻辑。3、当应用在前台页面展示时执行onForeground()aboutToAppear()：组件即将出现时回调改接口。onBackPress()：当用户点击返回按钮时触发。onPageShow()：页面每次显示时触发一次。onPagehide()：页面每次隐藏时触发一次。

原创 uniapp微信小程序开发物料

使用pinia做全局状态管理，借助pinia-plugin-unistorage插件做数据持久化。在app.json文件中配置pages路由路径。第三方依赖包存储在node_moudle包中。使用npm、yarn、pnpm来进行包管理。使用vuex做全局状态管理。

原创 原生微信小程序开发物料

下载第三方包之后在微信开发者工具下 工具--构建npm生成该文件。小程序的第三方包在miniprogram_npm文件夹下管理。在app.json文件中配置pages路由路径。

原创 微信小程序---支付

获取订单编号再次请求后端接口，拿到wx.requestPayment()需要的参数。如果没有登录，走前端登录流程，不再赘述。跟自己的后端商议入参，然后获取订单编号。

原创 微信小程序---登录

接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。3、之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。获取 临时登录凭证code ，并回传到开发者服务器。

原创 小程序性能优化

包含默认启动页面 / TabBar 页面 以及 所有分包都需用到公共资源的包。

原创 多页面项目的按需打包

现代框架像vue、react、svelte框架等是单页面框架，如果想实现多页面，需要借助webpack和vite等打包工具进行配置，但是多页面就会有一个问题，如果本次只改动了一个页面的逻辑难道要全部打包吗？4、在拿到用户输入之后，是不是可以启用打包工具了，为了页面的可维护性，这里做了代码拆分，所以，在当前页面如何启动打包工具呢？1、让用户在终端输入自己要启动的页面是不是要和终端交互呢，那么交互使用什么插件呢？这个推荐增加一个全局变量，将用户输入的页面名称存进全局变量，在打包工具的配置页面写入。

原创 charles抓包工具之---弱网测试

原创 chlarles抓包工具之---打断点

1、选中需要打断点的接口右键，选中Breakpoints。通过打断点可以修改请求的数据或者响应，来测试各种场景。如果打断点一直进不去，把设置的query项清空。

原创 charles抓包工具之---添加vConsole

` 部分添加 `vConsole`。- `Match` 设置为 `URL`，并输入你希望匹配的 URL 或使用正则表达式，例如 `.*` 代表匹配所有 URL。- 在 `Match` 文本框中输入 ``，这表示找到响应体中的 `

原创 前端性能优化

这是一篇道阻且长的文章，会更新很多方面，也会更新很长时间，希望可以坚持下去，写一篇成功且实用的性能优化文章，希望大家可以在评论区给我一些思路，持续更新。

原创 力扣算法---拥有最多糖果的孩子

孩子 1 有 2 个糖果，如果他得到所有额外的糖果（3个），那么他总共有 5 个糖果，他将成为拥有最多糖果的孩子。孩子 4 有 1 个糖果，即使他得到所有额外的糖果，他也只有 4 个糖果，无法成为拥有糖果最多的孩子。孩子 2 有 3 个糖果，如果他得到至少 2 个额外糖果，那么他将成为拥有最多糖果的孩子。孩子 5 有 3 个糖果，如果他得到至少 2 个额外糖果，那么他将成为拥有最多糖果的孩子。只有 1 个额外糖果，所以不管额外糖果给谁，只有孩子 1 可以成为拥有糖果最多的孩子。个孩子拥有的糖果数目。

原创 力扣算法--交替合并字符串

开始，通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长，就将多出来的字母追加到合并后字符串的末尾。注意，word2 比 word1 长，"rs" 需要追加到合并后字符串的末尾。注意，word1 比 word2 长，"cd" 需要追加到合并后字符串的末尾。合并后： a p b q r s。合并后： a p b q c d。合并后： a p b q c r。

原创 前端工程化之---git hooks

1、git hook 让我们可以在 git 执行一些行为的前后时机，执行一些脚本。2、比如pre-commit，能够在我们真正提交 commit 之前先执行一段代码，如果这段代码报错（exit 1），提交会被取消；如果正常执行，commit 会被真正提交。3、或是commit-msg，也能在真正 commit 前拿到 commit 信息内容，去做一些检验工作。

原创 前端工程化之---代码规范

首先，使用 `eslint-config-prettier` 禁用与 Prettier 冲突的 ESLint 规则，然后使用 `eslint-plugin-prettier` 将 Prettier 应用到 ESLint 中，以便在代码检查时自动格式化代码。使用 `eslint-plugin-prettier` 可以在代码检查的同时，自动格式化代码，使其符合 Prettier 的规则。prettier 的作用是对代码进行风格检查，针对的文件类型更加全面，例如js、ts、css、html、json、md等。

原创 webpack4和webpack5区别4---自动清除打包目录

需要使用clean-webpack-plugin插件。