当前位置: 首页 > 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.gsyq.cn/news/8980.html

相关文章:

  • 利用Burpsuite实现抓取https流量
  • RTX4090双卡本地布署QwenImage模型并生成OpenAI API - yi
  • ubuntu22.04下搭建iRedMail邮件服务器 - 实践
  • 深入解析:SQL语句优化的步骤详解
  • 图解22:扩展系统的最佳8种策略
  • Winform项目添加WPF
  • 本地免费使用网页表格控件websheet
  • 图解21:Redis为什么这么快
  • 图解20:API接口12种安全措施
  • C#文件操作入门
  • python2.7+pandas
  • SAP集成HTTP接口(x-www-form-urlencoded格式)
  • iText与OpenPDF使用差异及中文处理完全指南 - 实践
  • 在Go中构建应用级IP防火墙机制
  • PCIe 8.0 v0.3草案公布:SSD硬盘能飙1TB/s速度
  • 用 R 语言实现验证码识别
  • Composer在PHP项目中的手动类自动加载策略
  • 2025-2026-1 20231301 《信息安全设计》第二周学习总结
  • 完整教程:第7.9节:awk语言 nextfile 语句
  • 详细介绍:导师推荐毕设:基于SpringBoot+Vue的中小企业进销存管理系统设计
  • HarmonyOS之UIContext - 实践
  • 深入解析:C语言:猜数字游戏
  • US$29 Vag R250 VW Audi Dashboard Programmer Free Shipping
  • 标题:分享一个值得推荐的免费云服务——阿贝云
  • PPT2Note使用说明
  • 详细介绍:Flink-新增 Kafka source 引发状态丢失导致启动失败
  • DDD - 概念复习
  • CSP-J1S1_2025
  • 基于ThinkPHP实现动态ZIP压缩包的生成
  • 完整教程:还在为第三方包 bug 头疼?patch-package 让你轻松打补丁!