- 博客(63)
- 收藏
- 关注
RSS订阅原创 Vue3 基础
Vue3 的编译器会标记静态节点，在渲染时跳过这些节点的比对，减少虚拟 DOM 的开销。例如模板中的纯文本节点会被提升为常量。标记动态节点类型（如仅 class 或仅 text 动态），在 diff 过程中仅比对带标记的节点，减少不必要的操作。Vue3 的服务端渲染速度比 Vue2 快 2-3 倍，得益于更高效的组件编译和更少的运行时开销。，支持更全面的响应式数据类型（如 Map、Set），并解决了数组和对象属性的监听限制。单个组件可返回多个根节点，减少不必要的包裹元素。
2025-09-17 23:49:53
738
原创 微服务和分布式的基础学识
分布式系统的CAP定理指出，任何分布式系统最多只能同时满足一致性（Consistency）、可用性（Availability）和分区容错性（Partition tolerance）中的两项。微服务是一种软件架构风格，将单一应用程序划分为一组小型服务，每个服务运行在独立的进程中，通过轻量级机制（如HTTP/REST）通信。每个服务围绕业务能力构建，可独立部署、扩展和技术异构。分布式系统由多台计算机通过网络连接，协调完成共同任务。
2025-09-17 23:01:04
677
原创 type（类型别名）和 interface的区别和最佳实践
TypeScript中interface和type的区别主要体现在扩展方式和功能特性上。interface支持继承和声明合并，更适合OOP风格的对象定义；type则支持交叉类型和更丰富的类型描述能力，包括联合类型、元组等。最佳实践建议：优先使用interface定义对象结构，当需要复杂类型或联合类型时使用type。两者在性能上差异可忽略，关键区别在于interface支持声明合并而type不支持。
2025-09-09 21:41:58
532
原创 ts中type 与 interface 的区别
TypeScript中type和interface的主要区别：1. 使用场景不同：interface适合声明合并和对象结构，type适合联合类型和元组；2. 修饰范围：interface只能修饰引用类型，type可修饰任何类型；3. 声明特性：interface支持重复声明和合并，type不允许；4. 扩展方式：interface用extends，type用交叉类型(&)；5. 特殊功能：interface支持this和重载，type不支持。建议对象结构用interface，复杂类型用type。随着
2025-09-09 20:47:32
960
原创 Typescript基础
TypeScript是JavaScript的超集，添加了静态类型、类、接口等特性，编译后生成JavaScript代码。它与JavaScript的主要区别在于：TS是面向对象语言，支持可选参数、静态类型和接口；JS是脚本语言，不支持这些特性。TS的数据类型包括基本类型（boolean、number等）和高级类型（枚举、元组、泛型等）。高级特性如装饰器（扩展功能不修改原代码）、命名空间（解决命名冲突）和模块（通过import/export管理作用域）增强了代码组织和可维护性。TS通过类型系统、面向对象和模块化等
2025-09-09 20:15:29
907
原创 浏览器渲染原理与优化详解
减少关键资源数量：最小化阻塞渲染的资源（CSS、同步JS）减小关键资源大小：压缩、代码拆分、tree shaking缩短关键路径长度：优化加载顺序，并行下载避免强制同步布局：读写分离DOM样式属性减少重绘和回流：使用transform和opacity等属性。
2025-03-26 22:44:57
931
原创 前端性能优化
图片优化使用合适格式（WebP优于JPEG/PNG）响应式图片（srcset/picture）图片压缩工具懒加载原生属性Intersection Observer API实现适用于图片/iframe/组件等代码分割Webpack动态导入路由级代码分割缓存策略浏览器缓存（Cache-Control/Expires）Service Worker离线缓存CDN缓存构建优化文件合并压缩混淆。
2025-03-26 22:30:40
1600
原创 关于回调函数
特性回调地狱Promise模块化代码结构嵌套多，难以阅读链式调用，扁平化同步写法，最直观独立函数，主逻辑扁平化错误处理需要在每个回调中处理通过.catch统一处理通过try/catch统一处理通过try/catch统一处理可读性差较好最好最好可复用性低中中高适用场景简单异步操作复杂异步操作复杂异步操作（推荐）复杂逻辑，需要拆分为模块。
2025-03-22 01:26:24
1287
原创 React状态管理
通过这个例子，我们学习了如何使用和useReducer状态管理：将购物车的状态和逻辑集中管理。组件复用：商品列表和购物车组件各自独立，但共享相同的状态。代码结构清晰：将上下文、组件和主应用分离，易于维护和扩展。通过模块化的方式进行管理实现statestate和 actions单独抽离，模块化管理。使用简化了 Redux 的代码。在组件中通过和访问和操作状态。这种模式非常适合大型应用的状态管理，代码结构清晰，易于维护和扩展。😊。
2025-03-22 01:02:51
1262
原创 React组件复用
组件复用是指将可复用的逻辑或 UI 提取到单独的组件中，以便在多个地方复用。这可以提高代码的可维护性和可读性，并减少重复代码。首先，我们需要将公用组件的逻辑和 UI 封装到一个单独的组件中。假设我们要封装一个通用的。假设你有一个登录页面和一个注册页面，它们都需要使用。封装好公用组件后，我们可以在其他组件或页面中通过。
2025-03-22 00:44:09
686
原创 React学习（进阶）
以下内容属于 React 的高级主题，适合在掌握了基础知识（如组件、JSX、Props、State、事件处理等）之后深入学习。用于捕获子组件的 JavaScript 错误，并显示备用 UI。是一个函数，接收一个组件并返回一个新的组件，用于复用组件逻辑。用于在组件树中共享数据，避免通过 Props 层层传递。React 提供了一些方法来优化性能，避免不必要的渲染。是一种通过 Props 传递渲染逻辑的技术。用于直接访问 DOM 元素或组件实例。
2025-03-22 00:29:30
603
原创 React学习(基础)
React是 Facebook 开发的一个用于构建用户界面的 JavaScript 库。它采用组件化的思想，允许开发者通过构建可复用的组件来创建复杂的用户界面。核心概念组件化：React 应用由组件构成，组件是 UI 的基本单元。虚拟 DOM：React 通过虚拟 DOM 提高性能，减少直接操作真实 DOM 的次数。JSX：JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。
2025-03-22 00:21:01
938
原创 Es6新特性
是 ES6 引入的一个数组方法，用于用一个固定值填充数组的指定范围。扩展运算符将数组或对象的内容“展开”为独立的值。默认参数允许在函数定义时为参数设置默认值，如果调用时未提供该参数，则使用默认值。是一种对象，用于定义基本操作的自定义行为（如属性查找、赋值、函数调用等）。是一个对象，表示一个异步操作的最终状态（完成或失败）。模块化将代码组织为独立的单元，每个模块有自己的作用域。是一种异步编程的解决方案，用于处理异步操作的结果。都会生成一个唯一的值，即使传入相同的参数。是静态绑定的，继承自定义时的外层作用域。
2025-03-22 00:05:13
991
原创 前端模块化
ES Modules 是 JavaScript 的官方模块化标准，适合现代前端开发，广泛用于浏览器和 Node.js（Node.js 12+ 已原生支持）。现代构建工具（如 Webpack、Rollup、Vite）可以自动处理模块化方案之间的转换和兼容性问题。CommonJS 是 Node.js 默认使用的模块化规范，主要用于服务器端开发。它的特点是同步加载模块。ES Modules 导入 CommonJS。CommonJS 导入 ES Modules。
2025-03-20 23:09:13
678
原创 DOM 操作与事件处理
DOM 是浏览器将 HTML 文档解析成的一个树状结构，每个 HTML 元素都是一个节点（Node）。JavaScript 可以通过 DOM API 访问和操作这些节点。
2025-03-20 01:27:59
770
原创 CSS3 基础布局技术与响应式设计
Flexbox适合一维布局，Grid适合二维布局。媒体查询允许你根据设备特性应用不同的样式，移动优先是一种设计理念，首先为移动设备设计样式，然后逐步增强为大屏幕设备的样式。
2025-03-20 00:08:06
1301
原创 WebSocket：开启实时通信的新篇章
WebSocket 是一种建立在单个 TCP 连接上的全双工通信协议，它允许服务器和客户端在建立连接后，可以随时向对方发送数据。客户端和服务器都可以主动发送消息，无需等待对方的请求。建立连接后，数据可以几乎实时地传输，避免了 HTTP 请求的额外开销。WebSocket 使用更轻量级的协议头，并且连接保持持久，减少了不必要的网络开销。WebSocket 作为一种高效的双向通信协议，为实时交互应用提供了强大的技术支持。它已经成为现代 Web 应用中不可或缺的一部分，并将继续在未来发挥重要的作用。
2025-03-19 23:46:32
1096
原创 什么是防抖和节流，他们的应用场景有哪些
防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。（当事件被触发，设定一个周期延迟执行动作，若期间被触发则重新设定周期，直到周期结束，执行动作）节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。
2025-03-17 15:38:47
674
原创 http proxy的原理是什么
代理服务器会自动提取请求数据包中的HTTP请求数据发送给服务端，并将服务端的HTTP响应数据转发给发送请求的客户端，HTTP代理服务器使用的端口通常是8080。
2025-03-17 15:10:48
673
原创 第三章 Pinia配置添加
Pinia与Vuex一样，也是Vue的状态管理库。作为Vuex的代替者，Pinia后来居上，已经成为了开发者首选的状态管理工具。
2023-09-05 16:00:37
492
原创 集成网易云信SDK,进行即时通信-Web（语音通信）
4.将所需的 SDK 文件，传入script标签的src中即可。在下文中使用 window 对象属性即可获取对 SDK 的引用。SDK 解压后可得到以下三个文件（配图仅以 v9.8.0 为例）选择自己开发的环境，选择下面的不含UI集成（根据自己需求选择适合自己的）这边自己是通过方式一进行添加，然后封装在工具中的ts文件中。3.将语音消息转化然后调用Nim中的发送语音消息API。以上就是简单的进行语音收发和获取历史消息记录。这边是没有语音通信权限的，可以申请免费试用。utils文件夹中的Nim.ts中。
2023-07-17 15:29:50
1838
原创 JS-SDK接入以及微信二次分享
如果是 html 的静态页面在前端通过 ajax 将url传到后台签名，前端需要用 js 获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。如果这里获取到的 signature 和你得出的 signature 一致，就证明你的 signature 是正确的。
2023-05-29 20:23:00
3498
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人