请选择 进入手机版 | 继续访问电脑版
创作

#楼主# 2020-6-18

跳转到指定楼层
接上篇,继续讲设计模式

   23.jpg

     5. 工厂模式
      这个模式的创新之处在于,它不需要构造函数就能创建对象。它提供了用于创建对象的通用接口,我们可以在其中指定要创建的工厂(factory)对象的类型。这样一来,我们只需指定对象,然后工厂会实例化并返回这个对象供我们使用。
     当对象组件设置起来很复杂,并且我们希望根据所处的环境轻松地创建不同的对象实例时,使用工厂模式就是很明智的选择。在处理许多共享相同属性的小型对象,以及创建一些需要解耦的对象时也可以使用工厂模式。

  1. // Dealer A
  2. DealerA = {};
  3. DealerA.title = function title() {
  4.       return "Dealer A";
  5. };
  6. DealerA.pay = function pay(amount) {
  7. console.log(
  8.       `set up configuration using username: ${this.username} and password: ${
  9.        this.password
  10. }`
  11. );
  12. return `Payment for service ${amount} is successful using ${this.title()}`;
  13. };
  14. //Dealer B
  15. DealerB = {};
  16. DealerB.title = function title() {
  17.       return "Dealer B";
  18. };
  19. DealerB.pay = function pay(amount) {
  20. console.log(
  21.    `set up configuration using username: ${this.username}
  22.    and password: ${this.password}`
  23. );
  24. return `Payment for service ${amount} is successful using ${this.title()}`;
  25. };
  26. //@param {*} DealerOption
  27. //@param {*} config
  28. function DealerFactory(DealerOption, config = {}) {
  29.     const dealer = Object.create(dealerOption);
  30.     Object.assign(dealer, config);
  31.    return dealer;
  32. }
  33. const dealerFactory = DealerFactory(DealerA, {
  34.     username: "user",
  35.     password: "pass"
  36. });
  37. console.log(dealerFactory.title());
  38. console.log(dealerFactory.pay(12));
  39. const dealerFactory2 = DealerFactory(DealerB, {
  40.     username: "user2",
  41.     password: "pass2"
  42. });
  43. console.log(dealerFactory2.title());
  44. console.log(dealerFactory2.pay(50));
复制代码
     
     6. 观察者模式
       观察者(observer)设计模式在许多对象同时与其他对象集通信的场景中用起来很方便。在观察者模式中不会在状态之间发生不必要的事件 push 和 pull;相比之下,所涉及的模块仅会修改数据的当前状态。
  1. function Observer() {
  2.     this.observerContainer = [];
  3. }
  4. Observer.prototype.subscribe = function (element) {
  5.     this.observerContainer.push(element);
  6. }
  7. // 下面是从 container 中移除一个元素
  8. Observer.prototype.unsubscribe = function (element) {
  9. const elementIndex = this.observerContainer.indexOf(element);
  10. if (elementIndex > -1) {
  11.      this.observerContainer.splice(elementIndex, 1);
  12. }
  13. }
  14. /**
  15. * we notify elements added to the container by calling
  16. * each subscribed components added to our container
  17. */
  18. Observer.prototype.notifyAll = function (element) {
  19.     this.observerContainer.forEach(function (observerElement) {
  20.     observerElement(element);
  21. });
  22. }
复制代码


    7. 命令模式
      最后介绍的是命令(command)模式。命令设计模式将方法调用、操作或请求封装到单个对象中,以便我们可以自行传递方法调用。命令设计模式让我们可以从任何正在执行的命令中发出命令,并将责任委托给与之前不同的对象。这些命令以 run() 和 execute() 格式显示。
  1. (function(){
  2. var carManager = {
  3.      // 请求的信息
  4. requestInfo: function( model, id ){
  5.      return "The information for " + model + " with ID " + id + " is foo bar";
  6. },
  7. // 现在购买这个 car
  8. buyVehicle: function( model, id ){
  9.       return "You have successfully purchased Item " + id + ", a " + model;
  10. },
  11. // 现在 arrange viewing
  12. arrangeViewing: function( model, id ){
  13.     return "You have successfully booked a viewing of " + model + " ( " + id + " ) ";
  14. }
  15. };
  16. })();
复制代码

小结

      对于 JavaScript 开发人员来说,使用设计模式的好处很多。设计模式的一些主要优点包括提升项目的可维护性,还能减少开发周期中不必要的工作。JavaScript 设计模式可以为复杂的问题提供解决方案,提升开发速度并提高生产率。但并不能说这些设计模式就可以让开发人员偷懒了。


转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部