JavaScript抽象工厂模式:打造高效的对象创建工厂

JavaScript抽象工厂模式

在JavaScript中,对象的创建是非常常见的操作。但是,如果我们需要创建多个具有相似属性和方法的对象,手动一个一个创建会非常繁琐。这时候,抽象工厂模式就可以派上用场了。

什么是抽象工厂模式

抽象工厂模式是一种创建型设计模式,它可以通过提供一个接口来创建一系列相关或相互依赖的对象,而无需指定它们的具体类。

抽象工厂模式的优点

  • 可以确保创建的对象是相互依赖的,从而保证系统的一致性。
  • 可以隐藏对象的具体实现,从而降低了系统的耦合度。
  • 可以轻松地扩展系统,只需要添加新的工厂类即可。

抽象工厂模式的实现

在JavaScript中,我们可以使用函数来实现抽象工厂模式。具体实现步骤如下:

  1. 创建一个抽象工厂函数,用于创建一系列相关的对象。
  2. 在抽象工厂函数中,创建一个对象字典,用于存储不同类型的对象。
  3. 在对象字典中,为每种类型的对象创建一个工厂函数,用于创建该类型的对象。
  4. 在抽象工厂函数中,创建一个工厂选择器函数,用于根据传入的参数选择相应的工厂函数。
  5. 在工厂函数中,创建具体的对象,并返回该对象。

下面是一个简单的例子,演示如何使用抽象工厂模式创建不同类型的按钮:

// 创建抽象工厂函数
function createButtonFactory() {
  // 创建对象字典
  const factories = {
    'primary': createPrimaryButton,
    'secondary': createSecondaryButton,
  };

  // 创建工厂选择器函数
  function createButton(type) {
    const factory = factories[type];
    if (!factory) {
      throw new Error(`Invalid button type: ${type}`);
    }
    return factory();
  }

  // 创建具体的工厂函数
  function createPrimaryButton() {
    const button = document.createElement('button');
    button.className = 'btn btn-primary';
    button.textContent = 'Primary Button';
    return button;
  }

  function createSecondaryButton() {
    const button = document.createElement('button');
    button.className = 'btn btn-secondary';
    button.textContent = 'Secondary Button';
    return button;
  }

  // 返回工厂选择器函数
  return createButton;
}

// 使用抽象工厂函数创建不同类型的按钮
const createButton = createButtonFactory();
const primaryButton = createButton('primary');
const secondaryButton = createButton('secondary');

总结

抽象工厂模式是一种非常实用的设计模式,它可以帮助我们轻松地创建一系列相关的对象,并保证它们的一致性和可扩展性。在JavaScript中,我们可以使用函数来实现抽象工厂模式,从而提高代码的可读性和可维护性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Media(中介者)模式</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <h2>Media(中介者)模式</h2> <p>行为设计模式。公开一个统一的接口,系统的不同部分可以通过该接口进行通信。</p> <p>确保组件的交互是通过这个中心点来处理,而不是通过显示地引用彼此。</p> <p>这种模式可以帮助我们解耦系统并提高组件的可重用性</p> <hr> <script> // 1 基本实现 var mediator = (function (){ // 存储可被广播或监听的topic var topics = {}; // 订阅一个topic,提供一个回调函数,一旦topic被广播就执行该回调 var subscribe = function (topic, fn){ if(!topics[topic]){ topics[topic] = []; } topics[topic].push({context: this, callback: fn}); return this; }; // 发布/广播事件到程序的剩余部分 var publish = function (topic){ var args; if(!topics[topic]){ return false; } // call 和 apply 方法都是用来调用“不属于自身的方法”,apply第二参数必须是数组 // 下面的代码相当于 arguments.slice,但是arguments本身没有 slice方法 // slice 方法是用来截取数组 // arguments 是实参“数组” args = Array.prototype.slice.call(arguments, 1); for(var i = 0, l = topics[topic].length; i < l; i++){ var subscription = topics[topic][i]; subscription.callback.apply(subscription.context, args); // subscription.callback(arguments[1]); } return this; }; return { publish: publish, subscribe: subscribe, installTo: function (obj){ obj.subscribe = subscribe; obj.publish = publish; } } })(); </script> <h3>简单实现</h3> <form id="chatForm"> <label for="fromBox">Your Name:</label> <input id="fromBox" type="text"> <br> <label for="toBox">Send to:</label> <input id="toBox" type="text"> <br> <label for="chatBox">Message:</label> <input id="chatBox" type="text"> <button action="submit">Chat</button> </form> <div id="chatResult"></div> <script type="text/javascript"> $("#chatForm").on("submit", function (e){ e.preventDefault(); // 从UI上获取chat的数据 var text = $("#chatBox").val(), from = $("#fromBox").val(), to = $("#toBox").val(); // 将数据发布到newMessage主题上 mediator.publish("newMessage", {message: text, from: from, to: to}); }); // 将新信息附加到聊天记录结果上 function displayChat(data){ var date = new Date(), msg = data.from + " said \""+data.message+"\" to "+ data.to; $("#chatResult").prepend(""+msg+" ("+date.toLocaleTimeString()+")"); } // 记录消息日志 function logChat(data){ if(window.console){ console.log(data); } } // 通过mediator订阅提交的newMessage主题 mediator.subscribe("newMessage", displayChat); mediator.subscribe("newMessage", logChat); </script> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱划水de鲸鱼哥~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值