程序猿AA-优快云博客

原创 JavaScript 设计模式 - 命令模式详解

命令模式是一种行为设计模式，它将请求封装为独立对象，使发送者和接收者解耦。该模式的核心优势包括：支持撤销/重做操作、实现命令队列、组合宏命令，并遵循开闭原则便于扩展。典型应用场景包括菜单系统、计算器撤销功能、异步任务队列等。Vue实现案例展示了通用命令管理器（支持撤销/重做）和操作队列功能。虽然会增加系统复杂性，但命令模式在需要参数化操作、记录日志或组合命令时特别有用，能显著提升代码的灵活性和可维护性。

2025-07-27 14:59:49 525

原创 JavaScript 发布-订阅（观察者）模式详解

发布-订阅模式是一种行为设计模式，通过定义一对多的依赖关系实现对象间松耦合通信。该模式中，发布者将消息分类发布，订阅者选择性地接收特定类别的消息。其核心优势包括解耦组件、动态管理订阅关系、易于扩展和异步处理能力。DOM事件系统是该模式的典型应用。文章提供了售楼处通知购房者的完整实现案例，并展示了在Vue项目中作为全局事件总线和状态管理的应用方式。尽管该模式存在内存消耗、调试困难等缺点，但特别适用于一对多通知、事件驱动架构等场景，能有效提升前端应用的灵活性和可维护性。

2025-07-26 22:28:00 537

原创 js迭代器模式：高效遍历数据的核心技巧

迭代器模式是一种行为型设计模式，提供统一访问聚合对象元素的方式，无需暴露内部结构。核心包括迭代器接口和聚合对象，支持多种遍历（正序/倒序/过滤），适用于数组、树、图等数据结构。JavaScript原生支持迭代器协议（next方法）和可迭代协议（Symbol.iterator）。实际应用包括：统一数据接口、异步迭代、组件树渲染、表单验证和分页加载。Vue项目中可结合适配器模式处理复杂业务场景。建议简单遍历用内部迭代器，复杂控制用外部迭代器，异步数据使用异步迭代器。该模式解耦遍历逻辑，提高代码复用性和可维护性。

2025-06-29 11:01:45 765

原创 Vue 中的样式隔离与深度选择器使用教程指南

在 Vue 开发中，为了防止组件之间样式冲突，通常使用scoped属性来实现样式隔离。然而，在使用第三方 UI 组件库（如 Element Plus、Ant Design Vue）时，我们往往需要对这些组件的内部元素进行样式定制。由于scoped的限制，直接编写的样式无法穿透作用域影响子组件。本文档详细介绍了 Vue 中的样式隔离机制、深度选择器的用法及兼容性，并提供微信小程序中的特殊处理方式。场景推荐写法Vue3 项目:deep():global()Vue2 项目::v-deep/deep/

2025-06-29 00:32:40 1490

原创 web前端最流行且易学的技术栈

本文总结了前端开发中的关键技术选型建议。在语言选择上，TypeScript适合大型项目，JavaScript适合小型开发；框架方面推荐Vue3和UniApp；构建工具Vite为首选。包管理推荐pnpm，测试库建议Vitest和Cypress。CSS框架根据需求选择预编译或原子化方案，UI库推荐AntDesignVue和Vant。工具库涵盖时间处理、数值计算等场景。代码规范强调ESLint标准化和CommitMessage校验。工程规范要求在CI中实施TypeCheck和测试验证，确保代码质量。这些技术组合能

2025-06-27 00:40:34 1999

原创 web前端安全开发规范：全方位防护指南

本文摘要：文章系统阐述了现代化应用安全防护体系的核心原则与实施细则。主要包含四大模块：1)安全原则方面强调最小暴露、零信任设计、数据最小化及防御为先；2)安全规范细化包括登录态存储优化、核心攻击面防护（XSS/CSRF/重定向等）、CSP策略实施；3)数据与接口安全增强涉及脱敏处理、参数防篡改及严格鉴权；4)风险响应机制涵盖异常监控、Token管理及账号封锁策略。技术方案覆盖Web、小程序和APP全平台，提出代码分割、签名校验、生物认证等具体防护措施。

2025-06-26 00:42:42 1548

原创 HTTP请求的五大入参方式解析

HTTP请求中常用的五种数据格式：1) JSON(application/json)用于结构化数据传输；2) x-www-form-urlencoded用于表单键值对提交；3) form-data支持文件上传；4) raw-json为工具原始输入格式；5) json-text是非标准文本格式。不同格式对应不同Content-Type，其中form-data是唯一支持文件上传的格式，而JSON格式最为通用。每种格式都有特定使用场景，开发时应根据需求选择合适的传输格式。

2025-06-24 23:41:20 412

原创 web前端项目加载及渲染性能优化方案规范

本文系统介绍了前端性能优化的核心原理与实践方法。首先分析了浏览器渲染流程关键路径及常见性能瓶颈（资源加载、JS阻塞、内存泄漏等），并解读了WebVitals核心指标（LCP、INP、CLS）。其次归纳了性能问题的典型表现及影响，包括加载慢、渲染卡顿等。最后给出优化实践：构建部署阶段采用压缩/CDN/代码拆分；代码层面实施懒加载/虚拟滚动/动画优化；网络请求进行缓存/预加载控制；页面体验优化包括骨架屏/图片懒加载等。这些方法可有效提升页面加载速度与交互流畅度，改善用户体验。

2025-06-24 00:30:05 309

原创 Git常用命令速查，git新手入门指南，配置、推送、解决问题全攻略

Git常用操作速查指南本文总结了Git版本控制的常用命令和实用技巧，涵盖基础操作、分支管理、撤销恢复、标签管理、远程仓库等核心功能。主要内容包括：仓库初始化、提交、推送等基础命令分支创建、切换、合并的操作方法代码撤销与版本回退的多种方式解决常见开发问题的实用案例日常开发的最佳实践建议特别提供了5个典型问题的解决方案，如误删文件恢复、合并冲突处理等。适合开发者作为日常参考手册使用，帮助提高Git使用效率。

2024-08-28 12:50:38 295

原创 call 和 apply 和 bind，函数对象的方法

可以改变this的指向。this会指向到传入的参数对象。apply：参数只能通过一个数组传递。call：可以传递多个参数。

2024-08-07 14:42:44 153

原创学习Vue3 —— Reactive全家桶

注意：不能直接赋值，否则会破坏调Proxy，导致视图不更新。浅层修改数据，如果是深层的数据只会改变值，不会改变视图。拷贝一份proxy对象，将其设为只读。

2024-07-26 19:50:04 127

原创学习Vue3 —— Ref全家桶

浅层响应式，修改属性的值时，不会更新视图（注意：跟ref在一起修改值时，shallowRef也会更新视图）customRef 是个工厂函数要求我们返回一个对象并且实现 get 和 set 适合去做防抖之类的。接受一个内部值，并返回响应式且可变的 ref 对象，ref 对象仅有一个.value属性，指向内部值。强制更新 shallowRef 的视图。判断是不是一个 ref 对象。

2024-07-26 18:30:20 161

u010553212的博客