- 博客(186)
- 收藏
- 关注
RSS订阅原创 怎么实现从React Native向JavaScript传递原生信息
以上就是在 React Native 入口页向 JavaScript 传递原生信息的 4 种方案，最后我再结合 React Native 的通信原理，简单给你总结一下这 4 种方案的优缺点。你可以从这张表格中，直观地看到这 4 种方案的通信效率对比、是否需要考虑时机问题、是否需要处理多入口场景以及是否影响调试。其中，被广泛应用的原生模块获取信息方案，由于调用链条过长所以通信效率最低。使用原生模块获取信息方案和原生端发送事件传递信息的方案，都需要我们考虑信息传递的时机问题。
2025-04-08 16:31:41
774
原创 CSS 实现波浪效果
具体使用需要自行调节 radial-gradient，background-size，background-position 的值，使形状衔接流畅。调整 background-size 的百分比会改变波浪的覆盖范围，调整 background-position 的值会改变两个渐变图案的重叠程度。第一个值：水平位置（left, center, right 或百分比），第二个值：垂直位置（top, center, bottom 或百分比）。每个颜色断点包含：颜色值 + 位置值（百分比），可以有多个颜色断点。
2025-04-08 16:31:08
310
原创 深入解析 React 的 beginWork 流程
首先在 beginWork 中，会判断当前的流程是 mount（初次渲染）还是update（更新），判断的依据就是 currentFiberNode 是否存在。如果当前的流程是 update，则 WorkInProgressFiberNode 存在对应的 CurrentFiberNode，接下来就判断是否能够复用。无法复用的 update 流程和 mount 流程大体一致，主要区别在于是否会生成带副作用标记 flags 的 FiberNode。整体的流程是怎样的？整体的流程是怎样的？
2025-04-08 16:29:54
865
原创 深入浅出JavaScript AOP：面向切面编程实践指南
AOP（面向切面编程）是一种编程范式，旨在将横切关注点（如日志记录、性能监测、事务管理等）与核心业务逻辑分离，提高代码的可维护性和复用性。AOP 允许我们在不修改核心业务逻辑的情况下，动态织入额外的功能。AOP 允许我们在不修改核心业务代码的前提下，动态织入横切关注点（如日志、监控、权限校验等），从而提升代码的解耦性、可扩展性和可维护性。在 JavaScript 中，我们可以通过扩展 Function.prototypebefore()：在方法执行前插入逻辑after()：在方法执行后插入逻辑。
2025-04-01 17:59:31
875
原创 [特殊字符] 2025 推荐一款 Vue 3 移动端模板
大家好！又是新的一年。我又来推荐这款移动端模板了。这也是系列文章的第三篇。每一年我都会推荐一次。在 2024 那一篇里，我介绍了v2版本新增了那些内容，做了哪些优化。同样，这篇文章我也会介绍v3版本新增了哪些内容，以及围绕这个模板项目发生了什么样的故事。
2025-04-01 17:58:54
977
原创 Web Worker 基本使用
在Web开发中，JavaScript的单线程特性常常成为性能瓶颈。当我们遇到需要大量计算的场景时（如图像处理、数据分析等），Web Worker 就成为了关键的解决方案。本文将通过一个完整示例，带你快速掌握Web Worker的使用方法。Web Worker是浏览器提供的JavaScript多线程解决方案，它允许我们在后台线程中运行脚本，与主线程并行执行。独立全局上下文无法直接操作DOM通过消息机制通信支持传递可序列化数据什么时候用 Web Worker？计算密集型任务（如加密、数据处理）
2025-04-01 17:57:34
1383
原创 面试官问我React Router原理，我掏出了平底锅…
（推眼镜）看你简历说精通React生态，那聊聊React Router的实现原理吧？：（突然合上电脑）如果让你从零实现一个mini React Router，核心步骤是？：（战术喝水）您这平底锅挺别致... 那我举个🌰：React Router就像个。：（突然扔飞盘）如果我有1000个路由路径，怎么快速匹配？：（掏出Outlet组件）这就是React Router的。：（递出平底锅）面试官，您看我这回答还...热乎吗？：（突然掏出个平底锅）等等，别背概念，说人话！：（掏出小本本）这是前端路由的。
2025-04-01 17:56:30
671
原创 Vue组件间的通信方式究竟有哪些
父子关系的组件数据传递选择props与$emit进行传递，也可选择ref。兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递。祖先与后代组件数据传递可选择attrs与listeners或者Provide与Inject。复杂关系的组件数据传递可以通过vuex存放共享的变量。原文：https://juejin.cn/post/7486668229046403111。
2025-03-28 18:14:11
810
原创 [特殊字符] 最牛的 Vue3 无限循环滚动 NPM 包开源了！
先介绍下这个 NPM 包🔥 超大数据流畅滚动即使 10 万条数据，也能丝滑滚动不卡顿！仅渲染可视区域的 2 倍数据，大幅减少 DOM 负担，让滚动更流畅。🌟 适应变化，始终顺滑支持容器大小动态调整，即使数据实时更新，依然能保持平滑滚动，提供最佳用户体验。🔧 灵活滚动控制支持四向滚动单步停顿滚动速度调节鼠标悬停控制等多种配置，让滚动更符合需求。npm 包地址:官网地址:如果觉得这个项目对你有帮助，欢迎留下宝贵的⭐Star⭐！
2025-03-28 18:13:39
862
原创 使用 simple-git 在 Node.js 中高效调用 Git 命令
近期在一个项目里面，我觉得其实可以基于 simple-git 在 cli 代码提交的时候跟 gpt 进行结合，再合并分支的时候通过大模型进行审核和优化建议，如果再牛逼一点其实可以直接去操作代码进行修改，主要灵感来自同事聊天，去年跟同事合作的过程中发现他在用 node+ gtp 大模型对代码的提交进行代码审核原文：https://juejin.cn/post/7486670839922819124。
2025-03-28 18:12:59
975
原创 useEffect 的核心使用技巧与避坑指南
将复杂的 effect 逻辑封装成自定义 Hook，可以使组件代码更加清晰，同时也方便复用和测试。这部分就不提供示例代码了哈。封装复杂逻辑：将部分集中功能封装在自定义 Hook 中，使得主组件更加专注于 UI 展示。复用性：同样的 Hook 可在其他需要这部分功能逻辑的组件中复用，避免代码重复。测试方便：自定义 Hook 独立封装后，可以单独编写测试用例，对其异步逻辑和状态管理进行验证。ts体验AI代码助手代码解读复制代码。
2025-03-28 18:12:28
1021
原创 响应式数组操作在Vue3和React中的差异
Vue3隐式自动响应，开发者可直接操作原数组，底层通过Proxy实现依赖追踪，心智模型更接近原生 JS。React显式不可变更新，强调数据不可变性，每次变更需返回新引用，避免副作用，更利于状态可预测性。
2025-03-24 17:28:37
379
原创 3.Webpack 与 Babel 集成
通过本节的学习，我们已经深入了解了如何在Webpack中集成Babel，包括基本配置、浏览器兼容性策略、性能优化以及TypeScript集成。Webpack和Babel的结合就像一场精心编排的协奏曲，两者互相配合，共同创造出现代前端开发的美妙乐章：Webpack负责资源的组织和优化，Babel则确保我们的代码能在各种环境中顺畅运行。使用最新的JavaScript语法，无需担心浏览器兼容性智能地按需引入polyfill，平衡兼容性和性能通过缓存和精确配置优化构建速度。
2025-03-24 17:28:04
630
原创 Flutter 新一代状态管理框架 signals ，它究竟具备什么魔法和优势
开始解析在聊 signals.dart 之前，需要快速介绍 signals 的前置概念，附带还有 Preact、Preact Signals 、SolidJS 等关键词。首先需要说明一点，「Signals」 是业内通用的一种状态管理模式，而 signals.dart 项目就是 Preact Signals 的一个 Dart 移植版本，所以在最底层源码里你可以看到 Preact Signals 的核心原语，自然也就是包含了Signal 的细粒度、惰性求值和自动依赖追踪等能力。
2025-03-24 17:27:09
693
原创 最新Vue3 Vite安装Tailwind CSS 4.0 教程
原文：https://juejin.cn/post/7484906189803323427。在项目中创建一个css文件 并在main.js引入。在vite.config.js中加入这两句。先创建一个vue3项目。
2025-03-24 17:26:28
321
原创 如何绕过限制，获取 Cursor 的系统提示词
如果想获取Cursor的系统提示词，当前最推荐的方法是：使用可以记录请求日志的 OpenAI 中转服务切换不同模型多次尝试从成功请求的LLM日志中获取完整信息如果本文介绍的方法都失效了，还有种间接获取提示词的方式：构造一个假的系统提示词，让Cursor将其与自己的系统提示词做对比，输出区别。也能绕过限制，获取一些碎片信息。原文：https://juejin.cn/post/7483409317566201866。
2025-03-20 18:26:07
1056
原创 [特殊字符] 一行代码，优雅的终结 React Context 嵌套地狱！
React Context 嵌套地狱是指 React Context Provider 的多层嵌套，如下图所示，类似于前端问题中的回调地狱一样，越来越多的 Context 会导致嵌套层数越来越大，导致代码阅读性极差。总体思路：多个状态合并到一个 Context 管理会导致非必要更新问题 => 拆分 Context、Provider 避免非必要更新 => 存在嵌套地狱问题 => 组件的嵌套实际上是子孙组件的不断创建 =>循环创建子孙组件。
2025-03-20 18:21:16
919
原创 HTML常用元素
通过这篇文章，我们深入了解了 HTML 常见元素和全局属性。这些知识是前端开发的基础，掌握好它们，就等于为构建精彩的网页世界打下了坚实的基础。希望大家在后续的学习和实践中，多动手、多尝试，用这些 HTML 元素创造出更多有趣、实用的网页！原文：https://juejin.cn/post/7482613160387723275。
2025-03-18 16:34:30
618
原创 Nuxt3 实现接口域名动态化
原文：https://juejin.cn/post/7482690481043767359。2, 在 nuxt.config.ts 中增加配置, 将环境配置信息加入到项目运行配置中。1, 创建环境配置 .env.developmen和.env.production。此时可以通过前端项目实现接口域名动态-根据网站域名来处理, 避免接口跨域。3, 创建plugins文件夹及下面的api-domain.ts。
2025-03-18 16:32:27
317
原创 js判断浏览器窗口回话关闭与刷新
通过时间差的时候，在大多数情况下，是可以区别出页面刷新与关闭情况。但不排除真正上生产，经大量测试后，可能出现的问题。这里觉得比较合适的是，与后端合作，通过webSocket的方式建立连接，断连。让后端去判断原文：https://juejin.cn/post/7482769108523221031。
2025-03-18 16:31:56
220
原创 2025年了，前端谁还用传统的 PostMan 或 ApiFox
这里会自动根据浏览器最近的请求，自动把header 及 cookie 带过来，如果请求的 url 和最近请求中数据中一样的接口，还可以把请求数据直接带过来，这样可以保证发送信息的一致性，无需重新构建信息，只需要改你需要改变的字段就可以，快速且便捷。有些时候，我们还想对于测试中，返回的某个特殊的数据，作为 mock 数据，方便我们对这一数据的代码处理，那我们可以直接把请求回来的数据转为 mock 数据，如一些错误数据的处理。我们想要工具，希望他是轻量的，并且能解决上面提到的所有问题，这里推荐一个工具。
2025-03-18 16:31:24
1039
原创 前端苦熬一月，被 Cursor 5 天超越，未来技术浪潮如何破局？
关于这个Cursor引申出来AI对我的冲击，算是告一段落了。告一段落并不是说我觉得自己不会被淘汰掉、或者说我已经想好了其他的出路，而是说我释怀了，AI替代了前端也好，没替代也好，我都决定要继续学习，谁让我爱呢。偶然想到了《堂吉诃德》，他威风凛凛、他勇往直前、他义无反顾、他披荆斩棘。有人笑他是疯子，我却觉得他是个英雄。原文：https://juejin.cn/post/7481992008673755163。
2025-03-18 16:28:17
1082
原创 react通讯
父组件通过props向子组件传递数据和函数。子组件可以通过props获取到这些数据和函数。原文：https://juejin.cn/post/7481992008673558555。你需要把一个 prop层层传递给深层嵌套的子组件时, 就可以用createContex。点击组件A, 修改组件b的颜色。
2025-03-17 15:05:34
146
原创 vue3手动触发组件的重载（卸载和挂载）
当状态发生变化时，Vue 不会立即重新渲染 DOM，而是将这些变化推入一个队列，并在下一个事件循环周期中统一处理这些变化。执行后，由于vue的异步更新机制，必须要在nextTick后再将isMounted设置为true，否则vue会认为isMounted的值没有变化，不会重新渲染组件。最近在做pdf在线预览需求，有一点需求是要手动刷新pdf的预览组件，所以总结了一下两种强制刷新组件的方法，亲测有效。发生变化，Vue 会销毁旧的组件实例并创建一个新的实例。时，组件会被销毁并重新创建。Vue 会根据组件的。
2025-03-17 15:05:00
359
原创 Next.js 教程：从零开始构建你的 Web 应用
Next.js 是一个基于 React 的开源 Web 开发框架，它提供了许多开箱即用的特性，简化了 React 应用的构建过程。在指定的时间间隔内，用户访问的仍然是缓存的静态页面。Next.js 基于 Node.js 运行，因此你需要安装 Node.js。打开浏览器访问该地址，你将看到 Next.js 的欢迎页面。Next.js 会自动生成唯一的 class 名称，防止样式冲突。适用于需要用户交互后才能获取的数据，或者数据更新频率较高的场景。Next.js 提供了多种数据获取方式，适用于不同的场景。
2025-03-17 15:04:24
1938
原创 SVG中linearGradient的id冲突的显隐问题深度解析
在某次重构中，我们遇到了一个诡异的SVG渲染问题：当一个包含相同渐变ID的SVG组件被隐藏时，其他同类组件的渐变效果会同步消失。一开始我们以为这个是个偶现的问题，且在排查中也怀疑是我们组件写的问题，直到发现了多次渲染的SVG组件会跟着第一个SVG状态同步变化时，我们才定位到可能是SVG本身的渲染机制问题。首先，我们先看一个非常简单的SVG的代码，渲染个渐变的三角形，具体代码如下所示：ini代码解读复制代码可能有些同学会看不懂上面的SVG在做什么，不过这个不是特别重要，大家只需要关注到，我们用的标签现
2025-03-17 15:03:49
508
原创 JavaScript构造函数的特点
JavaScript 中的构造函数是一种特殊的函数，用于创建和初始化对象。以下是构造函数的主要特点：1. 命名约定特点：ini代码解读复制代码2. 使用 调用特点：arduino代码解读复制代码3. 指向新对象特点：ini代码解读复制代码4. 隐式返回对象特点：ini代码解读复制代码5. 显式返回对象特点：如果构造函数显式返回一个对象，则 会返回该对象。如果返回非对象值（如 、 或原始值），则忽略返回值，返回新创建的对象。javascript代码解读复制代码6.
2025-03-07 16:37:23
325
原创 前端配置husky，commit-lint
之前进行自定义命令。我们可以使用husky在代码提交之前进行相应的检查，防止不规范的代码被提交到仓库。Husky 需要在 commit-msg 阶段运行 commitlint，以验证提交信息。原文：https://juejin.cn/post/7478690071397253129。在pre-commit文件我们可以写在git提交之前进行的命令。husky是 git 的hook工具，就是用于。commit-lint可以规范我们的提交信息。等描述词，commit-lint拒绝提交。
2025-03-07 16:36:53
612
原创 鸿蒙ArkUI实战：手把手教你实现高颜值骨架屏
在鸿蒙开发中，骨架屏（Skeleton Screen）是提升用户体验的重要技术手段。本文将基于HarmonyOS ArkUI框架，通过20行核心代码实现一个支持流光动画的骨架屏组件，让你的应用在数据加载时展现专业级视觉效果。
2025-03-07 16:36:19
371
原创 JS函数的this指向
第一个参数都要求是一个对象（给this准备），后面的参数，apply为数组，call为参数列表；call/apply是可以指定this的绑定对象。箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。foo直接调用和 call/apply 调用的不同在于this绑定的不同。object对象会被js引擎绑定到fn函数的中this里面。在调用这个函数时，会将this绑定到这个传入的对象上。在其调用位置中，是通过某个对象发起的函数调用。
2025-03-07 16:35:46
662
原创 【ThreeJS Basics 1-7】全屏和调整大小
现在，很多制造商都在这样做，你可以看到像素比甚至更高的屏幕。每个人的浏览器环境都是不同的，所以想要统一样式的话，需要留意更多细节，这里蓝色的边框是因为 chrome 的版本问题导致的，可以。几年前，所有屏幕的像素比都是1，一切都很好。但当你仔细观察屏幕时，你会看到这些像素，这对图像的精确度和字体的细度是一个限制。阻止滚动，默认的控件会帮我们处理好这种滚动的瑕疵，但是当我们不使用控件的话，应该如何去掉这种滚动效果呢。可能你会看到这样的效果，感觉不够精细，原因是像素比比较低。，并更新渲染器的像素比，只需调用。
2025-03-06 11:20:16
364
原创 Charles 抓包工具配置及使用
通过充当客户端与服务器之间的“中间人”（Man-in-the-Middle, MITM），拦截、记录并分析所有经过的网络流量。接下来我们拿出手机，打开 WIFI，确保和我们的电脑处于同一 WIFI 下，打开 WIFI 配置页【HTTP 代理】设置为。接下来我们打开【设置】->【通用】->【VPN 与设备管理】，这里看到我们刚刚下载的配置文件，点击安装。我们回到【通用】->【关于本机】->【证书信任设置】，找到刚刚安装好的证书并开启信任。，【服务器】设置为 Charles 给出的 ip，【端口】为。
2025-03-06 11:17:30
772
原创 下拉选择超大量数据请求时间长如何优化
本文介绍了在下拉选择场景下(其实其它场景也一样)请求超大量数据时请求时间过长的优化手段。首先经过字段名压缩和删除空白字符操作后及网络传输gzip压缩后数据大小为最初的1/15。然后后端通过Redis加了一层缓存，避免每次请求都要查询数据库的问题。最后又把数据写入js文件上传OSS，Redis只缓存js文件的url地址，返回给前端的也是url地址，前端通过动态import()获取js文件内的数据，这一步更是使请求数据能被浏览器缓存。不难发现，优化思路总结起来就是减少文件大小和加入多层缓存策略。
2025-03-06 11:16:16
721
原创 面试必看：css 的那些事（上）
在前端开发这块儿，CSS那可是核心技术之一，重要性怎么强调都不为过。不管是打造好看的用户界面，还是搞定复杂的页面布局，CSS都起着关键作用。今天呢，咱们就好好唠唠CSS面试里常见的几个重点问题，希望能帮大家更好地应付面试，提升自己的CSS本事。讲解的时候，我会结合具体的代码例子，再讲讲页面呈现出来的效果，让大家能更直观地理解这些知识点。
2025-03-06 11:13:00
525
原创 【Nova UI】二、解锁 Vue 组件库环境搭建秘籍：pnpm、TS 与 Monorepo 的协同
此刻，我们即将正式踏入实战的首站 —— 环境搭建，这一环节恰似开启组件库搭建大门的关键钥匙🔑，让我们一同深入探索，解锁其中蕴藏的奥秘。pnpm 在处理依赖安装、更新和删除等操作时，运用独特的技术手段，极大地优化了多个项目间的依赖共享机制，不仅显著提升了依赖管理的效率，还能大幅减少磁盘空间的占用，堪称高效与便捷的完美结合👏。前文已提及，Monorepo 作为一种先进的多项目管理策略，该文件在此发挥着核心作用，它能够精准清晰地定义工作区的范围与规则⚖️，为项目的整体架构和管理提供坚实的基础。
2025-03-04 15:21:10
314
原创 从源码角度看React中的memo
最近决定看一下react源码中关于memo，useMemo，useCallback，目前看到了memo部分就准备写一篇文章，后续应该会继续更新。
2025-03-04 15:20:30
432
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人