JavaScript中设计模式 从入门到实践应用

原生小程序中没有状态管理，看别人写状态管理需要观察者模式便来补一下。vue 中也使用了观察者模式，vue2 中用的 Object ……get、set 实现的。

构造器模式

用于在为其分配了内存后初始化新创建的对象。

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// Usage:
var bmw = new Car('M4', '2019', '1000');

moModuleattern

• 对象文字符号
• 模块模式
• AMD模块
• CommonJS模块
• ECMAScript Harmony模块

var newObject = {
  variableKey：variableValue，
  functionKey：function（）{
    //…
  }
};

模块模式：

var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return ++counter;
    },
    resetCounter: function() {
      counter = 0;
    }
  };
})();
// Usage:
testModule.incrementCounter();
testModule.resetCounter();

显示模块模式

当我们要从另一个对象调用一个公共方法或访问公共变量时，避免重复主对象的名称。

var myRevealingModule = (function() {
  var privateVariable = 'not okay',
    publicVariable = 'okay';
  function privateFun() {
    return privateVariable;
  }
function publicSetName(strName) {
    privateVariable = strName;
  }
function publicGetName() {
    privateFun();
  }
return {
    setName: publicSetName,
    message: publicVariable,
    getName: publicGetName
  };
})();
//Usage:
myRevealingModule.setName('Marvin King');

单例模式

var singletonPattern = (function() {
  var instance;
  function init() {
    // Singleton
    function privateMethod() {
      console.log('privateMethod');
    }
    var privateVariable = 'this is private variable';
    var privateRandomNumber = Math.random();
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProperty: 'this is public property',
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  }
return {
    // Get the singleton instance if one exists
    // or create if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();
// Usage:
var single = singletonPattern.getInstance();

观察者模式/发布-订阅模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。

function ObserverList() {
  this.observerList = [];
}
ObserverList.prototype.Add = function(obj) {
  return this.observerList.push(obj);
};
ObserverList.prototype.Empty = function() {
  this.observerList = [];
};
ObserverList.prototype.Count = function() {
  return this.observerList.length;
};
ObserverList.prototype.Get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};
//...

中介者模式

中介体模式通过确保组件而不是彼此明确引用来促进松散耦合。

var mediator = (function() {
  var topics = {};
  var subscribe = function(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    topics[topic].push({ context: this, callback: fn });
    return this;
  };
// publish/broadcast an event to the rest of the application
  var publish = function(topic) {
    var args;
    if (!topics[topic]) {
      return false;
    }
    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.content, args);
    }
    return this;
  };
    return {
      publish: publish,
      subscribe: subscribe,
      installTo: function(obj) {
        obj.subscribe = subscribe;
        obj.publish = publish;
      }
    };
  })();

原型模式

var myCar = {
  name: 'bmw',
  drive: function() {
    console.log('I am driving!');
  },
  panic: function() {
    console.log('wait, how do you stop this thing?');
  }
};
//Usages:
var yourCar = Object.create(myCar);
console.log(yourCar.name); //'bmw'

工厂模式

function Car(options) {
  this.doors = options.doors || 4;
  this.state = options.state || 'brand new';
  this.color = options.color || 'silver';
}

Mixin模式

混合类是提供功能的类，这些功能可以由子类或子类组轻松继承以进行功能复用。

var Person = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.gender = 'male';
};
var clark = new Person('Clark', 'kent');

var Superhero = function(firstName, lastName, powers) {
  Person.call(this.firstName, this.lastName);
  this.powers = powers;
};
SuperHero.prototype = Object.create(Person.prototype);
var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);
console.log(superman); //output personal attributes as well as power

装饰器模式

function MacBook() {
  this.cost = function() {
    return 997;
  };
  this.screenSize = function() {
    return 11.6;
  };
}
// Decorator 1
function Memory(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 75;
  };
}
// Decorator 2
function Engraving(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 200;
  };
}
// Decorator 3
function Insurance(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 250;
  };
}
var mb = new MacBook();
Memory(mb);
Engraving(mb);
Insurance(mb);
mb.cost(); // 1522

---

10个每个开发人员都喜欢的JavaScript模式√
菜鸟教程 观察者模式
JavaScript 设计模式与开发实践 第8章
不知道怎么封装代码？看看这几种设计模式吧！
JavaScript 设计模式学习总结与感悟