JS设计模式-抽象工厂模式

创建抽象工厂类

// 抽象工厂类【抽象类】
class BaseFactory {
  // 提供店铺类型的接口
  createStore() {
    throw new Error("抽象方法【createStore】不允许直接调用,需要重写");
  }
  // 提供服务人员的接口
  createServicePeople() {
    throw new Error("抽象方法【createServicePeople】不允许直接调用,需要重写");
  }
}

具体工厂类【实现类】

// 具体工厂实现类
class AchieveBaseFactory extends BaseFactory {
  createStore() {
    // 返回店铺类型
    return new HotPotStore();
  }
  createServicePeople() {
    // 返回服务人员信息
    return new WaiterStaff();
  }
}

// 具体工厂实现类
class NewAchieveBaseFactory extends BaseFactory {
  createStore() {
    return new CafeStore();
  }
  createServicePeople() {
    return new ChefStaff();
  }
}

商店类【抽象类】

// 商店类【抽象类】
class Store {
  getAddress() {
    throw new Error("抽象方法不允许直接调用,需要重写");
  }
}
// 创建火锅商店【实现类】
class HotPotStore extends Store {
  getAddress() {
    return "火锅店,万达一楼77号";
  }
}
// 创建咖啡商店【实现类】
class CafeStore extends Store {
  getAddress() {
    return "咖啡店,万象城二楼99号";
  }
}

员工类【抽象类】

// 员工类【抽象类】
class Staff {
  getStaff() {
    throw new Error("抽象方法不允许直接调用,需要重写");
  }
}
// 创建厨师【实现类】
class ChefStaff extends Staff {
  getStaff() {
    return "厨师,张三";
  }
}
// 创建服务员【实现类】
class WaiterStaff extends Staff {
  getStaff() {
    return "服务员, 李四";
  }
}

实现

我的产业

// 我的产业
let myIndustry = new AchieveBaseFactory();
// 拥有店铺类型
let myStore = myIndustry.createStore();
// 获取门店地址
let myStoreAddress = myStore.getAddress();
console.log(myStoreAddress); //火锅店,万达一楼77号

// 拥有员工
let myStaff = myIndustry.createServicePeople();
// 获取员工信息
let myStaffInfo = myStaff.getStaff();
console.log(myStaffInfo); //服务员, 李四

我的新产业

//开个新店
let newMyIndustry = new NewAchieveBaseFactory();
// 创建店铺
let newStore = newMyIndustry.createStore();
let newAddress = newStore.getAddress();
console.log(newAddress); //咖啡店,万象城二楼99号

// 添加员工
let newStaff = newMyIndustry.createServicePeople();
let newStaffInfo = newStaff.getStaff();
console.log(newStaffInfo); //服务员, 李四
  • 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值