接上篇，继续讲设计模式

  

     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 设计模式可以为复杂的问题提供解决方案，提升开发速度并提高生产率。但并不能说这些设计模式就可以让开发人员偷懒了。

接上篇，继续讲设计模式

  

     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 设计模式可以为复杂的问题提供解决方案，提升开发速度并提高生产率。但并不能说这些设计模式就可以让开发人员偷懒了。