- 博客(194)
- 收藏
- 关注
RSS订阅原创 flexible.js+rem页面适配
flexible.js 介绍是一个用于移动端页面适配的 JavaScript 库，由阿里巴巴团队开发并开源。在移动 web 开发中，由于设备屏幕尺寸、分辨率以及像素比的差异，开发者通常需要编写额外的代码来确保页面在不同设备上都能正确显示。而的出现，极大地简化了这一过程。文件地址：https://pan.baidu.com/s/1WzOmsJ_m5aWWCNYXcJDD_g 提取码：nhqs核心功能：动态设置视口（Viewport）会根据设备的屏幕宽度动态设置标签中的和。
2024-05-13 13:21:33
694
原创 useLayoutEffect 和useEffect区别
但是在不写第二个参数的情况下，副作用函数会在每次组件更新时都被调用，这可能会导致性能问题或者不必要的副作用执行。因此，尽量在副作用函数中避免执行昂贵的操作，或者在适当的情况下通过传递依赖项来控制副作用的执行时机。中不写第二个参数时，意味着副作用函数会在每次组件渲染后都被调用，包括组件的初始渲染和每次更新。都是 React 提供的副作用钩子，用于处理组件中的副作用逻辑，平时使用较多的钩子函数。本身并不直接实现异步操作，它是 React 提供的副作用钩子，用于处理组件中的副作用逻辑。的回调函数中执行异步操作。
2024-04-30 14:18:08
1131
1
原创 TypeScript中的泛型
TypeScript想必大家也很熟了，今天主要介绍一下TS中的泛型，泛型也是一种强大的工具，它是可以在定义函数、类和接口时使用参数化类型，使得这些实体可以适用于多种数据类型而不失类型安全性。泛型的引入让开发者能够编写更加灵活和可重用的代码，同时保持静态类型检查的好处。泛型是一种在编程语言中提供抽象类型的机制，可以在使用时指定具体的类型。通过使用泛型，开发者可以编写具有通用性的代码，而不必提前指定具体的数据类型。
2024-02-02 17:14:25
565
原创 一个SSE（流式）接口引发的问题
最近我们公司也是在做认知助手，大模型相关的功能，正在做提示词，机器人对话相关功能。想要提高用户体验，使用SSE请求模式，在不等数据完全拿到的情况下边拿边返回。之前做过一版，但不是流式返回，是等待全部结果再返回，不得不说确实等待过程挺长，然后就有了现在的优化。想着功能都写好了，只是改一下接口，应该是个简单的需求。后端使用的post接口，经过一番搜索，最后使用的fetch。经过短短几个小时，配置写好，准备联调，以为需求就顺利完工了。奈何就这流式联调，还耗了两天。
2024-01-28 15:57:15
2638
1
原创 什么是JSX以及在React中的使用
JSX是一种JavaScript的语法扩展，它是一个看起来很像 XML 的 JavaScript 语法扩展。虽然它看起来像模板语言，但实际上它更接近于JavaScript的语法糖。JSX代码在运行时会被转译为普通的JavaScript对象。</h1>;在上述代码中，</h1>就是一个JSX表达式，它将被转译为')。
2024-01-21 10:58:46
1356
原创 React.js快速入门教程
React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
2024-01-21 10:58:32
2511
原创 git 的rebase、reset、revert区别？
rebase用于修改提交历史的顺序，将一系列提交重新应用到新的基底上。reset用于移动 HEAD 指针，可以用来撤销提交、取消暂存区的更改或者彻底丢弃更改。revert用于创建新的提交，撤销之前的提交，不改变历史。选择使用哪个命令取决于你的需求和工作流程。在共享的分支上使用rebase和reset时要小心，因为它们会改变提交历史，可能引发冲突。
2024-01-14 11:16:42
2090
原创 try...catch不能异步捕获代码错误？
或许这只是个基础知识，但或许你之前没有了解到这个，只是一贯的使用了try…catch。那就再学一下，在 JavaScript 中，try…catch 块确实是同步的，它用于捕获同步代码块中的异常。如果发生了异步操作中的错误，try…catch 无法捕获，因为它已经执行完毕，无法捕获异步代码中的异常。
2024-01-12 09:53:40
1076
原创 JavaScript数组sort()对负数排序的陷阱
想着好久没去力扣刷题了，刚好手上的需求也差不多了，就去看了看。看到一个难度级别为困难的题，看到这个题想着直接使用JS现成的方法，先concat再sort。再取中间值不就实现了吗。是不是你们也这么想，哈哈哈。就是上面的思路，果然很快，运行也通过了例子，然后提交，内心想（小菜一碟，轻松写完）。没想到却报错了吗，打脸太快。太自信也不行哇，来看看报上面错，竟然是sort方法出错了。
2024-01-09 17:42:28
748
1
原创 实现锚点定位功能（React/Vue）
最近接到一个需求，修改某某页面，增加XXX功能，并实现个锚点功能。做产品就是不断优化，增加功能的过程。实现锚点的方式很多， 很多UI库也提供了组件，可以根据自己的需求调整一下组件库也可以实现，也可以用标签实现，还可以基于api实现。最近也在用vue，既然写到了，就想到也可以使用vue的自定义指令实现一个锚点功能。当然实现的方式多种多样，我这里就举个例子。将自定义指令放在一个独立的文件中，然后在main.js文件中引入和注册这个指令。});// main.js// 注册全局指令。
2024-01-08 20:23:15
1069
原创 React hooks的闭包陷阱是怎么回事
由于公司项目用的技术栈是React，个人对React还是熟悉一些，但只能算能够熟练使用吧。虽然也很想成为大佬（持续努力中…）。最近想复习一下各个知识点，为了后续换工作做准备，每天更新一些文章，机会嘛总是留给有准备的人，既然技术能力有限，就得早做准备，提升自己。毕竟这两年大环境不咋地，建议能稳则稳。
2024-01-07 11:51:05
624
原创 Vue3之插槽
之前的文章里介绍了vue3中父传子props方法可以传递js中任意类型的数据。那么如何向子组件中传入模版呢，很多时候组件里面需要渲染一些自定义的模块，根据不同的场景显示不同的内容，此时传递模版就更方便，这就要用到slot也就是插槽了。文中的例子也都是使用vue3的语法。
2023-12-25 13:46:24
1013
原创 面试官：哪些情况会导致内存泄漏
闭包是指在函数内部定义的函数（内部函数）可以访问外部函数的变量，即使外部函数已经执行完毕。闭包是 JavaScript 中强大而灵活的特性，它使得可以在函数内部创建私有变量，实现模块化的设计，并提供了一种方式来处理函数作用域之外的变量。然而，需要小心避免不必要的闭包，以防止内存泄漏。内存泄漏是指在程序中分配的内存无法被释放，最终导致可用内存减少，可能导致程序性能下降或崩溃。避免内存泄漏的关键是养成良好的编码习惯，确保及时清理不再需要的资源和引用。
2023-12-22 09:21:16
955
原创 CSS之em、px、rem的区别
虽然在日常的开发中px、%用的多些，也会用到vh、vw，其他的虽然用的少但也得了解，说不定就能解决你样式中的问题呢。）通常更适用于响应式设计，因为它们可以根据上下文动态地适应变化的环境，而绝对单位（今天就具体介绍一下其中的em、rem、px。其他的感兴趣的可以自己去了解。都是用于指定元素大小的单位，它们在 CSS 中有不同的用途和特性。选择合适的单位也要考虑到响应式设计的需求。在css中计量单位分相对长度单位和绝对长度单位。）通常取决于的设计和开发需求。）在这方面相对较死板。
2023-12-21 17:26:42
882
原创 Vue3自定义hooks
以前在 Vue 2 中，逻辑复用主要通过 mixin 和高阶组件来实现，但这些方法有时会导致命名冲突、难以理解的代码和组件逻辑分散的问题。自定义 Hooks 的设计遵循 Composition API 的思想，使得 Vue 3 中的组件逻辑更加灵活和可复用。尽管 mixin 提供了一种在组件之间共享逻辑的方式，但也存在一些问题，比如命名冲突、难以理解的代码和不可预测的组件状态。在 Vue 3 中，自定义 Hooks 是通过 Composition API 实现的，它们是一组函数，用于封装可重用的逻辑。
2023-12-19 17:53:45
1136
原创 vue3组件注册
一般项目里有个公共的components一个专门的文件夹（通常称为components）中存放所有的组件，并在需要的地方进行引用，而不是通过全局注册。通过手动引入，你有更多的控制权，可以选择在需要的地方引入组件，而不是在整个应用中都注册。对于仅在某些页面或组件中使用的组件，可以考虑在局部注册或者按需注册。对于不是在应用初始化时就必须加载的组件，可以考虑使用路由懒加载或动态导入等技术，以减小应用启动时的初始负载。局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
2023-12-17 19:07:47
5062
原创 React Hooks解决了什么问题？
之前被面试官问到hooks解决了什么问题，当时就说了一部分，还是决定总结一下，毕竟临场发挥肯定会说不全。
2023-12-17 19:07:23
631
1
原创 Vue3基础之v-bind与v-on
通过绑定一个数组到 v-bind:style 或 :style 上，可以将多个样式对象组合应用到元素上。baseStyles 和 dynamicStylesArray 是两个样式对象，通过 :style 将它们组合应用到元素上。这种方式可以用于将基本样式与动态样式组合，实现更灵活的样式管理。当 dynamicStylesObject 中的属性值发生变化时，元素的样式也会相应地更新。是 Vue 中两个非常常用的指令，分别用于属性绑定和事件绑定。来绑定事件处理函数。在 Vue 3 中，你还可以使用简写语法。
2023-12-11 21:13:08
1056
原创 Vue3.0监听器watch与watchEffect
在 Vue 3 中，watch仍然是一种用于监听数据变化并执行相应操作的方式，不过在组合式 API 中，watch的使用方式与选项式 API 略有不同。以下是关于 Vue 3 中的watch。
2023-12-11 21:12:44
1614
原创 Vue3基础之v-if条件与 v-for循环
v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。如果你的元素在应用的生命周期中只会被渲染一次或很少改变，使用 v-if 可能更合适，因为它在条件为 false 时会从 DOM 中移除元素，减少了 DOM 操作的频率。如果你的元素需要频繁地显示和隐藏，条件经常变化，可以考虑使用 v-show，因为它不会在条件为 false 时从 DOM 中移除元素，减少了频繁的 DOM 操作。
2023-12-06 20:00:23
4103
原创 浅谈Vue.js的计算属性computed
computed属性用于声明计算属性，这些属性的值是基于其他响应式属性计算而来的，当依赖的响应式属性发生变化时，计算属性会自动重新计算。与Vue.js 2相比，Vue.js 3的computed属性语法稍有变化，不再使用对象字面量，而是使用类似函数的形式来声明计算属性。此外，Vue.js 3还引入了一个新的ref函数，用于创建响应式引用，可以在setup函数中使用。下面是一个简单的Vue.js 3中的computed<template><div></div>
2023-12-06 19:59:17
1526
原创 Vue3为什么会推出组合式API
大学前端入门学的vue2，工作了又用的React，现在想学习一下Vue3，开篇就介绍了组合式API，这和我认知里的vue2的选项式API区别还是蛮大的。本篇文章简单介绍一下组合式API。Vue 3引入了一种新的 API，称为“组合式 API”（Composition API）。与以前的选项式 API 不同，组合式 API 允许开发者将代码组织成逻辑相关的功能块，而不是按照选项的生命周期钩子来组织。这使得代码更加灵活、可维护，并且更容易重用。组合式 API 的核心特性是setup。
2023-12-03 12:41:24
1024
原创 Vue3中的Suspense组件有什么用？
Suspense>是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。意思就是一个用于处理异步组件的特殊组件。为了在异步组件加载的过程中展示一些占位内容，而不是直接等待组件加载完成，为了提高用户体验，使得页面的加载状态更加平滑。
2023-12-02 22:14:30
1213
原创 Vue3中定义变量是选择ref还是reactive？
在 Vue 3 的 Composition API 中被引入，它主要用于创建响应式对象，尤其是用于包装基本数据类型的响应式对象。虽然都用于创建响应式对象，但它们在设计和用途上有一些区别，适用于不同的场景。它接受一个普通对象，并返回一个代理对象，该代理对象中的属性都是响应式的。是用于创建响应式数据的两个不同的 API。的设计初衷是为了确保在模板中使用变量时能够区分变量本身和它的值。就足够了，但当处理更复杂的数据结构时，尤其是需要进行深层次的数据操作时，这是 Vue 3 的一个改进，旨在提供更自然的语法。
2023-12-02 22:13:48
1396
原创 Vue3中teleport 组件是干什么用的
组件是 Vue 3 中引入的一个新组件，它的作用是将组件的内容渲染到 DOM 中的任何位置。Portal 允许在组件的模板中将内容渲染到 DOM 树的其他位置，而不受组件嵌套的限制。可以轻松实现在组件内部定义的内容在 DOM 树的其他位置动态渲染，而不受组件嵌套的限制。元素下，而不是在组件自身的位置。实例会监听到内容的变化，一旦内容发生变化，它就会将内容移动到目标位置。组件内部的内容将被移动到目标位置，而不是在组件自身的位置进行渲染。会将其内部的内容移动到目标位置，而不是在组件自身的位置进行渲染。
2023-11-29 21:12:27
2037
原创 lodash中foreach踩坑
Lodash 是一个 JavaScript 实用工具库，提供了很多用于处理数据、简化开发等方面的功能。它提供了一组常用的工具函数，用于处理数组、对象、字符串等常见数据结构，同时也包含了一些函数式编程的工具。对于前端开发来说，是个很好用的工具，甚至看过有人说面试不会lodash被嘲讽了。我所在的公司项目中也用了这个库，今天就听同事吐槽，他循环两万条数据，进入卡住了溢出了，找了半天问题，最后没想到是foreach的过，换成for循环就没问题了。那么为什么呢，lodash是怎么实现foreach的呢？
2023-11-29 21:12:16
680
原创 JS扁平化数组，你知道几种方式呢？
数组扁平化是指将多层嵌套的数组转换为一个一维数组的过程。在多层嵌套的数组中，元素可以是基本数据类型，也可以是数组，这种层层嵌套的结构使得数组的处理变得复杂。通过扁平化数组，我们可以简化对数组的操作和处理。扁平化数组的概念在处理数据时非常有用，特别是在处理递归结构或者在进行某些操作时，我们更希望使用一维数组而不是多维数组。在前端开发中，对数组进行扁平化通常用于处理递归的组件结构，处理嵌套的API响应数据，或者在某些数据操作中简化数据结构。这个数组包含了数字和嵌套的数组。
2023-11-23 10:20:22
96
原创 vue的模板编译
AST 指的是抽象语法树，它是源代码的抽象语法结构的树状表示。在编译原理中，AST 是一个树状的数据结构，用于表示程序的语法结构，它捕捉了代码的语法信息，但忽略了具体的细节。在前端领域中，AST 在解析和处理代码时非常有用，特别是在编译器、静态分析工具、代码转换工具（如 Babel）等方面。它可以帮助我们理解代码的结构，进行代码的转换、优化等操作。对于 Vue.js 中的模板编译过程，AST 的角色是在模板字符串被解析之后，生成一个树状的结构来表示模板的语法。
2023-11-23 10:20:09
106
原创 只知道ECMAScript 2015（ES6），一篇汇总ECMAScript 2015~ECMAScript 2023新特性
我们常说的ES6也就是ECMAScript 2015是在2015年6月发布的。这个版本引入了许多重要的语言特性和改进，对 JavaScript 进行了深刻的扩展和升级，ES6 是 JavaScript 语言的一个里程碑。所以有时也被称为ES6。这是由于规范的发布年份与实际版本号之间的不匹配。然而，标准化组织决定更改命名方式，以便更好地反映年份，从而引入了“ECMAScript [年份]”的命名习惯。从2015年的ECMAScript 2015（ES6）到现在的ECMAScript 2023。
2023-11-23 10:19:51
255
原创 前端调试只会console.log()?
相信大家在日常开发中调试代码是必不可少的步骤，毕竟谁也不能保证代码不出问题，总得debug一下，输出信息看看数据有没有问题。是不是习惯性console.log(‘XXX’)或者debugger呢。而JavaScript中的console对象提供了丰富的方法用于更灵活的开发者交互。除了大家熟知的console.log之外，还有一系列强大的方法可供使用。比如console.info、console.warn和console.error，能够以不同级别输出信息，更清晰地表达代码的执行状态。
2023-11-19 19:52:41
246
原创 SSE（Server-Sent Events)请求之EventSource
最近有个需求有个搜索接口需要支持流式和静态两种方法，这个接口的查询时间可能很长，完全等结果出来再返回前端对于用户体验不好，于是就想实现持续性返回以提高用户体验。于是学习一下SSE。SSE 是指 Server-Sent Events（服务器推送事件），是一种基于 HTTP 的、服务器向客户端单向推送数据的技术。它允许服务器实时发送数据到客户端，而不需要客户端明确地请求。SSE 主要用于实现服务器向客户端的实时更新，比如新闻更新、股票报价、实时监控等场景。
2023-11-12 11:53:03
4773
原创 如何让useEffet支持async/await
刚开始学react写过类似下面的代码，就是想直接在useEffect中使用async/await。}, [])报错的意思： useEffect 期望接受一个同步的函数作为参数，但 async 函数实际上返回的是一个 Promise。useEffect应该返回的是一个销毁函数，这里第一个参数使用了async，返回就是promise，会导致销毁函数报错。当涉及到在useEffect中使用异步操作时，可以创建自定义的钩子函数，返回一个清理函数，类似于内置的useEffect。
2023-11-12 11:52:35
1186
原创 你知道css中的object-fit的用法吗？
你可以使用它来控制图像或视频的大小和位置，以适应不同尺寸的容器，而不需要添加额外的HTML或JavaScript代码。如果媒体元素原始尺寸小于容器，则它将按原始尺寸显示，否则将等比例缩小以适应容器。它用于控制内联媒体元素在其包含容器内的大小和位置，以确保其适应容器的规定尺寸。：媒体元素将等比例缩放，以适应容器，并确保完全可见，不会发生变形。：媒体元素将等比例缩放，以填充容器，可能超出容器的边界。将确保图像适应 300x200 的容器，而不会变形，并且可能会裁剪超出容器边界的部分。
2023-11-09 21:34:14
682
原创 Vite和Webpack区别
总体来说，Vite具有更快的启动速度、轻量的配置、更好的HMR和SSR支持等特点，适合现代化的框架。项目类型:如果是使用Vue或React作为前端框架开发的新项目，推荐选择Vite，可以获得更好的开发体验。插件依赖:如果项目依赖一些Webpack插件如DllPlugin等，目前Vite相应插件不完善，则推荐Webpack。构建速度:Vite的构建速度更快，如果追求快速的开发体验，则首选Vite。Vite利用ESM的优势，可以实现一些Webpack难以实现的功能，如“热修补”已运行的代码。
2023-11-09 21:33:33
1288
原创 antv/g6之图布局及切换布局
节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。g6支持使用 Dagre 布局来自动排列图中的节点，以形成层次结构。层次布局将自动排列节点和边，以形成层次结构，其中节点和边的位置由布局算法决定。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。Circular（环形）布局是一种图形布局算法，用于将图中的节点排列在一个环形的方式中。‘RL’：从右至左布局。方法允许你切换布局类型，并重新排列节点和边，以便在当前图表上应用新的布局。
2023-11-05 13:51:46
2813
原创 antv/g6之交互模式mode
在 AntV G6 中，“mode” 是用于配置图表交互模式的一种属性。通过设置 “mode”，可以控制图表的行为，以满足不同的交互需求。可能在不同的场景需要展现的交互行为不一样。比如查看模式下点击一个点就选中的状态，在编辑的情况下点击点可以出现编辑框，在创建边的情况下点击点就是创建一个边的起点。mode正是管理这些behavior的一种机制，一个图上可以存在多种交互模式，每个交互模式的behavior不一样。
2023-11-05 12:55:41
1319
原创 antv/g6元素之combo
在 G6 中，“Combo” 是一种特殊的元素，用于组合和展示多个节点元素的一种方式。它通常用于表示一个组或子图，将多个相关节点组织在一起，并在图形中以单一的形状显示。之前也介绍过自定义节点、自定义边。当然也可以使用G6.registerCombo () 进行自定义扩展内置的 Combo。不过官方介绍最好使用内置rect、circle进行拓展，不建议复写 update 和 draw 方法。/*** 绘制 Combo 中的图形。不需要为默认的 label 增加图形，父类方法会自动增加 label。
2023-11-04 14:36:16
1559
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人