- 博客(13)
- 收藏
- 关注
RSS订阅原创 JS设计模式(5): 发布订阅模式
发布订阅模式（Publish/Subscribe Pattern）是一种消息范式，发布者（Publisher）不会将消息直接发送给特定的订阅者（Subscriber），而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。这种模式实现了发布者和订阅者之间的解耦，使得它们可以独立变化而互不影响。
2025-06-08 10:09:38
989
原创 JS设计模式(4)：观察者模式
本文介绍了JavaScript中的观察者模式，这是一种用于实现对象间一对多依赖关系的行为型设计模式。文章通过电商、新闻订阅等场景说明了该模式的应用价值，详细解析了观察者模式的两个核心角色（被观察者和观察者）及其实现原理。代码示例展示了如何利用Proxy代理对象实现属性变化监听和自动通知机制，并通过对比表格突出了观察者模式在耦合性、扩展性等方面的优势。最后列举了该模式在状态监控、消息订阅等场景的广泛应用，帮助开发者构建低耦合、高扩展性的代码架构。
2025-06-06 21:45:43
943
原创 学习AJAX，我的目标是什么(AI)
从基础到进阶掌握AJAX技术，分七个阶段：1）夯实XHR基础，掌握请求流程与核心API；2）学习现代方案Fetch API和Axios的使用与差异；3）深入HTTP协议、跨域、异步处理等原理；4）通过手写实现、场景题、安全防护等实战巩固；5）了解React/Vue等框架的集成方式；6）推荐MDN文档、《JS高级程序设计》等学习资源；7）面试需重点准备技术对比、CORS、API设计等问题。包含代码示例与高频考点，强调理论与实践结合。
2025-05-30 16:23:20
888
原创 入门AJAX——XMLHttpRequest（Post）
本文介绍了如何使用XMLHttpRequest实现POST请求，完成一个简单的删除功能。文章包含三部分：1)搭建本地服务器接口，提供列表删除功能；2)前端页面设计，包含获取和删除按钮；3)实现POST请求函数，处理服务器响应并更新页面。通过示例演示了从获取列表到删除特定元素的全过程，并提供了完整的代码实现。读者可以选择使用本地服务器或作者提供的远程接口进行练习。关键词：XMLHttpRequest、POST请求、前端开发、AJAX、HTTP请求
2025-05-30 13:08:13
1861
原创 入门AJAX——XMLHttpRequest（Get）
本文介绍了AJAX的基本概念与使用方法。AJAX是一种异步JavaScript技术，可以不重新加载页面的情况下与服务器交换数据。文章首先解释了XML与异步JS的特点，然后通过一个简单示例演示了如何使用XMLHttpRequest对象发起GET请求并更新页面内容。接着实现了一个搜索词推荐功能，展示了前后端交互的实际应用。后端使用Express搭建接口，前端通过监听输入事件实时获取服务器返回的匹配单词。文章提供了完整的代码示例，帮助读者快速理解AJAX的核心机制和实现方法。
2025-05-29 18:13:21
1070
原创 JS设计模式(3)：装饰器模式
本文介绍了装饰器模式（Decorator Pattern）及其应用场景。该模式通过在运行时动态"包裹"目标对象，实现非侵入式的功能扩展，解决了核心逻辑与非核心功能（如错误处理、权限校验）紧耦合的问题。文章通过两个实际案例展示了装饰器模式的实现方式：使用闭包包装原函数，在调用前后添加额外逻辑。相比继承，装饰器模式具有动态扩展、灵活组合和非侵入性等优势，特别适合需要功能插拔和灵活扩展的场景。关键点包括保持接口一致性、避免修改原对象代码以及通过组合多个装饰器实现功能叠加。
2025-05-28 19:01:42
392
原创 Proxy，框架的响应式基础(1): 初识 Proxy
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义我们可以将Proxy形象化为银行行长引入的「智能机器人代理系统」。当使用 new Proxy(target, handler) 代理一个对象时（类比为用机器人系统接管保险柜），Proxy 会在对象的基础操作层插入一层「透明拦截器」，自动拦截并处理该操作。// 保险柜对象gold: 100, // 100枚金币diamond: 5, // 5颗钻石// 创建 safe 对象的代理Proxy 是对象的智能代理。
2025-05-27 15:05:30
398
原创 JS设计模式(2)：构造器模式与原型模式
本文介绍了JavaScript中构造器模式和原型模式的应用。通过飞行射击游戏敌机对象创建案例，展示了构造器函数如何批量生成对象实例并解决代码冗余问题。同时指出在构造函数内定义方法会导致内存浪费，进而引入原型模式，将公共方法挂载到原型对象实现共享。最后对比了ES6的class语法，说明其本质是构造器+原型链的语法糖。文章帮助开发者理解对象创建的性能优化思路，为面向对象编程打下基础。
2025-05-27 12:33:06
553
原创 JS 设计模式(1)：初识设计模式
设计模式是软件开发中的"思维包"，封装了经过验证的设计思路而非具体代码，主要分为创建类、结构类和行为类三大类。文章通过建筑类比说明设计模式的重要性，指出没有统一设计会导致代码耦合和难以维护。同时强调要避免过度设计，简单系统使用复杂模式反而会增加复杂度。判断标准是代码是否更难理解和维护成本是否升高，设计模式本质是解决问题的工具而非炫技手段。后续文章将首先讲解创建类设计模式。
2025-05-26 22:46:14
535
原创 前端框架从0到1实战：simple框架设计全解析 (2)：Webpack 环境搭建
本文介绍了Simple框架的开发环境搭建过程。首先规划了项目目录结构，包括核心代码、页面文件和打包输出目录。最后展示了初始化效果，通过index.js入口文件引入页面资源。文章提供了完整的代码仓库地址，便于读者参考实现。
2025-05-26 00:52:09
803
原创 前端框架从0到1实战：simple框架设计全解析 (1) ：框架概览
本文介绍如何从零开发一个轻量级响应式前端框架simple。该框架基于ES6+原生API实现，采用无虚拟DOM的靶向更新机制，支持选项式编程风格。
2025-05-25 20:42:17
1169
原创 迭代：一道面试题引出的一片知识真空（二）
让我们实现自定义迭代器，让数组通过for...of遍历时仅输出奇数索引元素（1, 3, 5），你知道怎么实现了吗？console.log(val) // 要求打印 1, 3, 5很简单，上面在实现迭代器的代码中，每次我们让指针 i 前进一步来迭代每一个元素。let i = 0return {} else {i += 2 // 指针前进两步，跳过奇数索引元素console.log(val) // 打印 1, 3, 5是不是很神奇呢？这也正说明 for … of 确实是基于迭代实现的遍历。
2025-05-24 13:33:34
1064
原创 迭代：一道面试题引出的一片知识真空（一）
迭代就是对可迭代对象的元素的顺序访问。而所谓可迭代对象指的是可以在原型链上访问到属性并获取迭代器的那些元素。迭代器通过next()方法实现对可迭代对象元素的依次访问，返回值有value和done两个属性指示当前被访问的值以及迭代是否完成。我们甚至可以通过在 Object 原型上定义迭代器使得 for…of 可以去遍历对象。回到最开始的面试题上：问：能运行吗？答：不能运行，因为数组的解构赋值要求等号右面是一个可迭代对象，因为数组解构赋值的实质与 for … of 类似，通过迭代器去提取元素。
2025-05-23 23:52:03
1101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人