全部内容
JavaScript 实现页面地震特效

本文介绍如何使用一段简短的 JavaScript 代码实现浏览器页面的地震抖动特效。该示例通过简单的 DOM 操作触发页面震动效果,适用于前端趣味开发或特定交互场景。需要注意的是,引入外部 JS 后需刷新页面方可执行,且提供了运行、复制和保存代码的便捷按钮。

2026-10-24 09:53:56
200
闭包旅人
JavaScript 获取元素位置:getBoundingClientRect() 详解

getBoundingClientRect() 方法返回包含元素左上角和右下角相对于视口距离的对象。通过结合滚动偏移量,可计算元素的绝对位置。该方法在 IE、Firefox 3.0+ 及 Opera 9.5+ 中受支持,旧版浏览器可能不支持。

2026-10-24 09:52:27
406
函数茶馆
JavaScript中SessionStorage与LocalStorage的使用、区别及安全实践

本文详解JavaScript中SessionStorage与LocalStorage的用法、区别及安全实践。SessionStorage数据随窗口关闭清除,适合独立会话;LocalStorage跨标签页共享,适合持久化存储。两者均受同源策略限制,但易受XSS攻击,建议避免存储敏感信息,并对数据进行加密和验证。

2026-10-24 09:50:42
246
安全边界
JavaScript 中正确判断 undefined 的方法

本文详细解析了JavaScript中判断undefined的常见误区与正确做法。指出直接使用==比较null和undefined会导致逻辑错误,推荐使用typeof运算符进行严格判断,并说明其返回的六种字符串类型,帮助开发者避免潜在Bug。

2026-10-24 09:50:08
508
函数茶馆
JavaScript 单例模式实现:从全局对象到惰性创建

本文深入解析 JavaScript 中单例模式的实现原理,涵盖从简单全局对象到基于闭包和代理的高级写法。重点介绍如何通过解耦创建与判断逻辑优化代码结构,并探讨惰性单例在提升页面性能中的应用场景,帮助开发者掌握唯一实例的全局访问控制。

2026-10-24 09:49:56
237
青柠
JavaScript 实现建造者模式详解

本文介绍 JavaScript 中建造者模式的实现方法。通过将复杂对象分解为简单部分并解耦构建过程,该模式便于扩展且封装性好。文章通过包工头与工人的比喻解释原理,并提供完整的 JS 代码示例,展示如何分步构建对象。

2026-10-24 09:49:39
326
异步漫步
JavaScript 实现观察者模式详解:从原理到代码

本文详细解析 JavaScript 中的观察者模式(发布-订阅模式)。通过 iPhone 预订的生活案例通俗解释其一对多依赖关系,并深入剖析 DOM 事件监听与 Vue 双向绑定中的实际应用。最后提供完整的 JavaScript 代码实现,涵盖订阅、发布、取消订阅及预订列表管理等核心逻辑,帮助开发者深入理解该设计模式。

2026-10-24 09:49:30
470
代码拾荒
JavaScript原型模式实现:Object.create与prototype对比

本文深入解析JavaScript中的原型模式,重点介绍利用Object.create方法创建继承对象的技术细节,包括参数用法及属性初始化。同时对比展示了通过手动设置prototype属性实现原型模式的传统方式,帮助开发者理解__proto__、constructor等核心概念在实际编码中的应用。

2026-10-24 09:49:18
241
拾光
JavaScript策略模式详解:从年终奖计算到表单校验

本文深入解析JavaScript中的策略模式,通过年终奖计算和表单校验两个实际案例,展示如何利用策略对象替代复杂的if-else分支判断。文章详细说明了策略模式的定义、优缺点及代码实现,帮助开发者提升代码的可扩展性与可维护性,实现算法与使用场景的解耦。

2026-10-24 09:49:06
479
函数茶馆
JavaScript适配器模式:接口兼容与数据格式转换实战

本文深入解析JavaScript中的适配器模式,通过接口兼容与数据格式转换两个典型案例,展示如何利用适配器解决已有接口不匹配及前后端数据格式不一致的问题。文章涵盖代码实现细节,帮助开发者在迭代中灵活应对变化,提升开发效率。

2026-10-24 09:49:03
420
阿沐
JavaScript设计模式:职责链模式的原理与实战优化

本文深入解析JavaScript行为型设计模式中的职责链模式。通过电商手机预售订单场景,展示如何从复杂的if-else嵌套代码重构为清晰的职责链。文章进一步探讨如何通过返回nextSuccessor实现开放封闭原则,并补充逻辑短路知识,帮助开发者掌握解耦请求发送者与接收者的核心技巧。

2026-10-24 09:48:45
362
安全边界
JavaScript命令模式详解:从基础解耦到宏命令实现

本文详解JavaScript中的命令模式,阐述其如何通过封装请求实现发送者与接收者的解耦。通过按钮点击示例展示基础用法,并深入解析宏命令机制,以电脑开机自启动为例,演示如何批量执行多个命令对象,帮助开发者理解行为型设计模式的实际应用。

2026-10-24 09:48:18
514
木棉