- 博客(44)
- 收藏
- 关注
RSS订阅原创 npm中-d -g 和默认安装的区别
npm 中-d和-g的主要区别在于安装位置和用途-d（即--save-dev）用于将包安装为开发依赖，这些依赖会写入的字段。它们只在开发阶段需要，例如构建工具 Webpack 或代码转换器 Babel。当使用或设置时，这些开发依赖不会被安装，从而确保生产环境不会包含不必要的依赖包。-g表示全局安装，包会被安装在系统目录而非项目本地。这种方式安装的包通常作为命令行工具全局使用，它们不会记录在项目的中，因此对生产环境的依赖配置没有直接影响。当你在项目目录下直接运行（不添加-d或-g。
2025-11-11 22:12:53
417
原创 WebSocket 详解
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，实现了浏览器与服务器之间的实时双向数据传输。
2025-10-27 22:58:39
2967
1
原创 Promise 详解
Promise 的主要优势：避免回调地狱：使异步代码更易读和维护更好的错误处理：统一的错误处理机制链式调用：支持多个异步操作的顺序执行并行处理：通过等方法实现并行操作Promise 是现代 JavaScript 异步编程的基础，理解 Promise 对于掌握 async/await 和现代前端开发至关重要。
2025-10-27 22:23:54
604
原创 React-Window 虚拟化滚动
使用场景：长列表、大数据表格、下拉选择框等需要高性能滚动的场景。性能关键：确保itemSize准确（动态高度需额外处理），避免行组件不必要的重渲染。扩展工具：搭配或满足复杂需求。如果需要更复杂的交互（如拖拽排序），可以考虑结合 react-dnd等库实现。
2025-10-26 09:23:24
451
原创 react虚拟滚动
：在可视区域外额外渲染少量条目，避免快速滚动时出现空白。：提前确定条目高度（或使用动态高度预测），简化位置计算。属性，利用GPU加速提升性能。
2025-10-23 17:24:28
486
原创 浏览器存储
功能推荐技术存储用户偏好 / 主题 / 设置临时表单数据 / 页面级状态IndexedDB（推荐使用 Dexie.js）身份验证 / Token / 小数据跨请求Cookies（推荐 js-cookie 库）离线缓存 / 资源缓存 / PWACache API + 。
2025-09-04 17:43:58
865
原创 Local Storage 本地存储
Local Storage（本地存储） 是浏览器提供的一种 Web Storage API，用于在用户浏览器中存储 键值对（key-value）特性说明存储位置浏览器本地生命周期永久存储，除非手动清除或代码删除存储容量一般为 5MB~10MB（不同浏览器略有差异）作用域同源策略（相同协议+域名+端口）下共享是否支持同步读写✅ 是（但不要滥用，大量读写可能阻塞 UI）是否支持复杂对象❌ 默认只能存字符串，需手动 JSON 序列化/反序列化：长期保存，同源共享。
2025-09-04 17:40:49
648
原创 git使用
2. 取消 Assume Unchanged 标记。3. 取消 Skip Worktree 标记。然后查找你的文件，看首字母是否为小写（如。运行以下命令查看被标记为 。以小写字母开头的文件（比如。开头的文件表示被标记为 。）通常表示被标记为 。如果文件是被标记为 。找到你的目标文件名。
2025-08-31 22:31:33
233
原创 dayjs JavaScript 时间日期处理库
方法说明示例**dayjs()**获取当前时间 / 创建 dayjs 对象dayjs()****从字符串解析时间****从时间戳（毫秒）创建****格式化日期输出→**year()**获取年份→ 如 2024**month()**获取月份（0-11）→ 5（表示6月）**date()**获取日（1-31）→ 如 20**hour()minute()second()**时 / 分 / 秒****加 1 天****减 1 个月**
2025-08-31 18:08:30
1303
原创 react-beautiful-dnd React 拖拽（Drag and Drop）库
项目说明react-beautiful-dnd 是什么？一个由 Atlassian 开发的、专为 React 设计的 拖拽排序/看板库，以流畅动画和易用 API 著称适合什么场景？列表排序、看板（如 Trello）、任务卡片拖动、简单的拖放交互核心概念DroppableDraggable优点动画优美、API 简洁、上手容易、专精于列表/看板拖拽缺点不支持自由拖放（如画布任意位置）、功能相对专注推荐程度⭐⭐⭐⭐⭐ 如果你做的是任务排序、看板拖动，强烈推荐。
2025-08-31 15:08:24
1241
原创 react-virtualized React 应用中高效渲染大型列表和表格数据的库
在传统的 React 开发中，如果你渲染一个包含 1万条数据 的列表：👉 那么 React 会在 DOM 中 真实创建 1万个<div>元素，即使它们同时不可见（比如在屏幕外）卡顿（性能差）内存占用高滚动不流畅项目说明react-virtualized 是什么？一个用于 React 的高性能 虚拟化列表/表格/网格组件库，通过只渲染可见区域元素来优化长列表性能解决了什么问题？避免一次性渲染成千上万 DOM 节点，提升渲染性能、滚动流畅度、降低内存占用。
2025-08-31 14:32:20
949
原创 nvm使用和node使用
8,nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包。12,nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是。nvm 是一个用于管理多个 Node.js 版本的工具，适用于开发环境切换不同版本的 Node.js。nvm命令行操作命令 1,nvm nvm list 是查找本电脑上所有的node版本。2,nvm install 安装最新版本nvm。
2025-08-29 12:01:38
1004
原创 手机上访问你电脑上的前端项目
步骤操作内容1️⃣确保电脑上已启动前端项目（如2️⃣查看终端是否打印了或局域网访问地址（如3️⃣如果没有，确保你的开发服务器配置了4️⃣查看电脑的局域网 IP（如，通过ipconfig或ifconfig5️⃣确保手机和电脑连的是同一个 Wi-Fi6️⃣http://<电脑IP>:<端口>，如7️⃣成功访问！你可看到与电脑一样的页面，可用来预览、调试响应式布局等。
2025-08-28 18:52:52
1467
原创 使用git上传项目的步骤
步骤操作1确保已安装 Git2打开终端，进入你的项目文件夹3运行git init初始化仓库4运行git add .添加文件到暂存区5运行git commit -m "提交信息"提交到本地6在 GitHub/Gitee 等平台创建远程仓库，复制仓库地址7运行git remote add origin 仓库地址关联远程8运行（或 master）首次推送9之后日常使用git addgit commitgit push即可。
2025-08-27 19:28:38
1625
原创 监听 window 的 scroll 事件
如果你不想引入 lodash，可以自己写一个简单的 throttle：if (!然后在组件里这样使用：}, []);场景推荐方式监听整个页面滚动优化频繁触发使用throttle或debounce监听某个 div 滚动对该 DOM 元素添加检测元素是否进入视口使用。
2025-08-27 15:25:42
566
原创 组件卸载时useEffect状态
useEffect在 React 的函数组件中，当组件从 DOM 中移除（比如路由跳转、条件渲染不再显示等），就称为“组件卸载”。在useEffect中，你可以通过返回一个清理函数来响应组件卸载事件，并在该函数中执行清理逻辑（如清除定时器、取消订阅等）。组件是否卸载，没有直接的布尔值，但可以通过useRef手动跟踪，避免在卸载后执行无效操作。。
2025-08-21 19:29:52
974
原创 定时器（Timer）和延时器
操作方法说明延时执行（一次）延迟 delay 毫秒后执行 callback取消延时器取消尚未执行的定时任务定时执行（重复）每隔 interval 毫秒重复执行 callback取消定时器停止重复执行的定时任务React 中使用在useEffect中启动，在 清理函数（return 的函数） 中清除避免内存泄漏，非常重要！在 JavaScript 中，setTimeout用于延时执行，用于重复定时执行，分别用和来取消它们。。
2025-08-21 18:23:07
985
原创 在 React 中，父子组件之间的通信（传参和传方法）
父组件：调用并包含子组件的组件子组件：被父组件调用、渲染的组件传参（传递数据）：父组件把自己的 数据（如字符串、数字、对象、数组等） 传递给子组件，子组件接收并使用这些数据来渲染 UI。传方法（传递函数）：父组件把自己的 函数（方法） 传递给子组件，子组件在合适的时机（比如用户点击按钮）调用这个方法，从而实现 子组件向父组件通信 / 通知父组件做某些事情。功能说明传递方式代码体现父 → 子：传参（数据）。
2025-08-20 18:31:35
897
原创 CSS 定位的核心属性：position
定位类型值是否脱离文档流定位参考是否可用 top/left 等典型用途静态定位static❌ 不脱离❌ 无效默认布局，正常文档流相对定位relative❌ 不脱离元素自身原位置✅ 可用微调元素位置，作为 absolute 的参考父级绝对定位absolute✅ 脱离最近的定位祖先（或 html）✅ 可用弹窗、下拉菜单、tooltip固定定位fixed✅ 脱离浏览器视口（viewport）✅ 可用回到顶部、导航栏、悬浮按钮粘性定位sticky⚠️ 特殊。
2025-08-20 17:33:37
1079
原创 React Router v7 中的主要“方法”与“API”分类
Routes>是 v6 开始的新路由容器，替代了 v5 的<Switch><Route>定义单个路由规则，包括路径、组件等return (<Routes></Routes>属性说明path路由路径，比如/about/user/:idelement对应要渲染的 React 组件（v6 开始用 element 代替 component）功能API / 方法说明路由根容器必须，提供路由能力路由规则容器<Routes>v6+ 新容器，替代 Switch单个路由规则。
2025-08-19 18:05:11
988
原创 useEffect 的基本语法
useEffect**useEffect是 React 函数组件中用来处理副作用（如数据请求、事件监听、定时器等）的 Hook，通过依赖项控制它的执行时机，还可以返回清理函数用于卸载或更新前的清理工作。**。
2025-08-19 17:55:12
806
原创 package.json
特性（生产依赖）（开发依赖）用途项目运行时必须的包（比如 React、UI 库）仅在开发阶段使用的工具（比如 ESLint、Vite、测试工具）是否打包到生产环境✅ 是，会被打包进最终代码，运行时需要❌ 否，不会被打包进生产代码安装命令或或你的项目中的例子"react""vite""eslint"典型场景构建用户可见的页面、组件、逻辑代码检查、格式化、编译、测试、开发服务器等依赖类型何时使用放在哪个字段？生产依赖项目运行时需要，比如 React、UI库。
2025-08-19 16:21:47
1061
原创 React Router 版本详解及使用指南
v3/v4：奠定了现代React路由的基础v5：完善和优化，长期支持版本v6：现代化设计，推荐用于所有新项目对于大多数开发者，直接使用v6是最佳选择，它提供了更简洁的API、更好的开发体验和更强大的功能。现有项目升级时，建议逐步迁移并充分测试。
2025-08-19 11:12:53
1130
原创 Vite 使用
Vanilla含义：“原生 JS”，即不使用任何前端框架，纯手写 HTML/CSS/JavaScript 来构建页面和逻辑。适用场景：简单页面、学习浏览器原生 API、追求极致轻量或对框架生态无依赖的小项目。Vue特点：渐进式框架，易学易用，响应式和组件化开发体验友好，生态丰富（Vue Router、Pinia/Vuex、Vite 插件等）。适用场景：从简单 SPA 到复杂企业级应用都有很好支持，适合喜欢简洁 API、注重开发效率的团队。React。
2025-08-14 19:07:41
723
原创 CSS Modules 局部样式，防止样式污染
项目说明✅ 定义CSS Modules 是一种让 CSS 类名局部作用域化 的模块化方案✅ 核心特点类名不会全局污染，每个组件的样式相互独立✅ 使用方式通过导入，用引用✅ 支持构建工具Vite / Webpack / Next.js / CRA 等都支持✅ 支持预处理器可以使用，享受 Less/Sass 特性✅ 优点避免样式冲突、提高可维护性、支持所有 CSS 功能✅ 适用场景React / Vue 等组件化开发中管理样式的首选方案。
2025-08-13 19:00:56
714
原创 前端属性集合
block块元素，默认独占一行，元素自上而下排列，可以定义宽和高，一般可以用作其他元素类型的容器，里边可以存放其他的块元素和行内元素或者行内块元素，常见标签有：div，p，h1-h6， dl，dt，dd，ol，ul，li，hr，form，table，tr，td，(p标签不能容纳其他的块元素，只能容纳内联元素和内联块元素)。绝对定位，相对于包含块，根据偏移量进行偏移，完全脱离文档流，元素不占据原本空间位置，一般让它针对它的父元素进行定位，需要把父元素变为包含快，添加position:relative;
2025-08-11 11:00:22
935
原创 移动端自适应
当设计图宽为750px，100vw ÷ 7.5=13.33vw = 100px。将根元素设置为13.33vw，1rem = 13.33vw = 100px。
2025-08-08 19:02:57
168
原创 react 路由使用
通过 React Router，你可以轻松实现复杂的单页应用（SPA）路由需求！组件实现无刷新跳转（替代。父路由下定义子路由，需用。
2025-08-08 18:11:24
911
原创 在前端中如何处理0.5像素
可作为备选方案，但需考虑兼容性和复杂度。实际项目中，我会优先使用 UI 框架提供的解决方案，并与设计师确认效果预期。缩放伪元素实现视觉上的 0.5px 边框，这种方法兼容性好且易于维护。如果项目允许全局调整，也可以动态设置。“在前端中处理 0.5 像素通常是为了解决 Retina 屏下边框过粗的问题。
2025-08-08 17:51:19
572
原创 H5配置webpack
首先，确保你已经安装了 Node.js 和 npm。在 src 目录下创建 app.js 和 index.html 文件。2. 安装 Webpack 和相关插件。3. 创建 Webpack 配置文件。7. 添加 npm 脚本。6. 配置 Babel。
2024-11-20 21:26:48
560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人