当前位置: 首页 > news >正文

JS设计模式-模块模式

模块模式好像不是经典的设计模式,但不可避免的每种编程语言都加入了模块的概念。有时候可能用了模块模式但并不知道自己用的是模块模式。
虽然不是经典的设计模式,但是作为JS创建模块的一种模式也是经常被使用。这里对它做一下介绍

啥是模块

模块模式是一种创建型设计模式,它使用闭包来创建私有变量和方法,同时提供公共接口来访问。模块模式是JavaScript中最常用的模式之一,它提供了封装、私有性和组织代码的能力。

函数式模块

// 使用模块模式创建可复用的组合函数
const useCounter = (function() {// 私有变量let count = 0;let listeners = [];// 私有方法function notifyListeners() {listeners.forEach(listener => listener(count));}// 公共接口return {// 获取当前计数
    get count() {return count;},// 增加计数increment: function(value = 1) {count += value;notifyListeners();return count;},// 减少计数decrement: function(value = 1) {count -= value;notifyListeners();return count;},// 重置计数reset: function() {count = 0;notifyListeners();return count;},// 设置计数set: function(value) {count = value;notifyListeners();return count;},// 监听变化watch: function(callback) {listeners.push(callback);return function() {const index = listeners.indexOf(callback);if (index > -1) {listeners.splice(index, 1);}};}};
})();// 使用示例
const counter = useCounter;
console.log('初始计数:', counter.count);const unsubscribe = counter.watch((newCount) => {console.log('计数变化:', newCount);
});counter.increment(5);
counter.decrement(2);
counter.reset();unsubscribe(); // 取消监听

 

http://www.hskmm.com/?act=detail&tid=12021

相关文章:

  • 关于天猫精灵喵控的初步拆机研究
  • 利用Burpsuite实现抓取https流量
  • C++完全攻略:从新手到高手的编程进化之路 - 详解
  • 深入解析:敏捷开发-Scrum(下)
  • RTX4090双卡本地布署QwenImage模型并生成OpenAI API - yi
  • Visual Studio 报错:“9_自定义命令”名称在默认命名空间“9_自定义命令”中无效。请更正项目文件中的 RootNamespace 标记值。
  • 图解23:datetime和timestamp的区别
  • 深入解析:SQL语句优化的步骤详解
  • 在Java中识别泛型信息
  • Kali Linux 光标与快捷键全攻略
  • 图解22:扩展系统的最佳8种策略
  • Winform项目添加WPF
  • 本地免费使用网页表格控件websheet
  • 图解21:Redis为什么这么快
  • 图解20:API接口12种安全措施
  • promise使用
  • iOS App 内存泄漏与性能调优实战 如何排查内存难题、优化CPU与GPU性能、降低耗电并提升流畅度(uni-app iOS制作优化指南)
  • 图解18:测试功能阶段
  • 图解19:Redis常见的14个场景
  • DDD - 技术落地
  • 一些dp技巧
  • 2025.09.20|第十一届全国地图学与地理信息系统学术大会在线报告_刘纪平报告
  • C++经典排序技巧总结
  • 静态资源管理:Nginx在Docker中的部署
  • C#文件操作入门
  • javascript基础 - Ref
  • ES——(一)基本概念 - 指南
  • python2.7+pandas
  • SAP集成HTTP接口(x-www-form-urlencoded格式)
  • iText与OpenPDF使用差异及中文处理完全指南 - 实践