美文网首页
设计模式整理

设计模式整理

作者: 马建阳 | 来源:发表于2018-08-03 00:44 被阅读11次

最近准备入手一本腾讯大佬写的设计模式书籍,就准备整理一下之前接触过的设计模式。如下

模块模式


var testModule = (function () {

  var counter = 0;

  return {

    incrementCounter: function () {
      return counter++;
    },

    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };

})();

// Usage:

// Increment our counter
testModule.incrementCounter();

// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.resetCounter();

工厂模式

function Car(name) {
  this.name = name
  this.type = 'car'
}

function Bike(name) {
  this.name = name
  this.type = 'bike'
}


function Factory(type, name) {
 this.type = type 
}


Factory.prototype.getInstance = function() {
  if(this.type === 'car') {
    return new Car(this.name)
  }
  return new Bike(this.name)
}

var factory = new Factory('car', 'audio')
var car = factory.getInstance()

var factory2 = new Factory('bike', 'mybike')

var bike = factory2.getInstance()

单例模式

var mySingleton = (function () {

  // Instance stores a reference to the Singleton
  var instance;

  function init() {

    // Singleton

    // Private methods and variables
    function privateMethod(){
        console.log( "I am private" );
    }

    var privateVariable = "Im also private";

    var privateRandomNumber = Math.random();

    return {

      // Public methods and variables
      publicMethod: function () {
        console.log( "The public can see me!" );
      },

      publicProperty: "I am also public",

      getRandomNumber: function() {
        return privateRandomNumber;
      }

    };

  };

  return {

    // Get the Singleton instance if one exists
    // or create one if it doesn't
    getInstance: function () {

      if ( !instance ) {
        instance = init();
      }

      return instance;
    }

  };

})();

var instance1 = mySingleton.getInstance()
var instance2 = mySingleton.getInstance()
console.log(instance1 === instance2)

观察者模式
一个典型的观察者模式应用场景是用户在一个网站订阅主题

多个用户(观察者,Observer)都可以订阅某个主题(Subject)
当主题内容更新时订阅该主题的用户都能收到通知
以下是代码实现

Subject是构造函数,new Subject() 创建一个主题对象,该对象内部维护订阅当前主题的观察者数组。主题对象上有一些方法,如添加观察者(addObserver)、删除观察者(removeObserver)、通知观察者更新(notify)。 当notify 时实际上调用全部观察者 observer 自身的 update 方法。

Observer 是构造函数,new Observer() 创建一个观察者对象,该对象有一个 update 方法。


function Subject() {
  this.observers = []
}
Subject.prototype.addObserver = function(observer) {
  this.observers.push(observer)
}
Subject.prototype.removeObserver = function(observer) {
  var index = this.observers.indexOf(observer)
  if(index > -1){
    this.observers.splice(index, 1)
  }
}
Subject.prototype.notify = function() {
  this.observers.forEach(function(observer){
    observer.update()
  })
}

function Observer(name) {
  this.name = name
  this.update = function(){
    console.log(name + ' update...')
  }
}  

// 创建主题
var subject = new Subject()

//创建观察者1
var observer1 = new Observer('hunger')
//主题添加观察者1
subject.addObserver(observer1)
//创建观察者2
var observer2 = new Observer('valley')
//主题添加观察者2
subject.addObserver(observer2)

//主题通知所有的观察者更新
subject.notify()

相关文章

  • 设计模式

    设计模式脉络整理

  • 设计模式-整理中

    设计模式-整理中

  • 移动架构<第二篇>:设计模式

    设计模式整理: 设计模式<第一篇>:工厂模式设计模式<第二篇>:生产者/消费者设计模式 [未完待续...]

  • 23种设计模式汇总整理

    23种设计模式汇总整理

  • 设计模式整理

    最近准备入手一本腾讯大佬写的设计模式书籍,就准备整理一下之前接触过的设计模式。如下 模块模式 工厂模式 单例模式 ...

  • 设计模式整理

    准备 UML类图与时序图 设计模式原则 具体设计模式 创建型模式(6种) 我们总要创建类的对象来使用的,从全局创建...

  • 对 .Net的基础 脑图汇总

    细节整理:一、设计模式,23种设计模式、6种原则:原则:场景触发-解决问题-总结沉淀-推广应用 23种设计模式,解...

  • 设计模式整理—外观模式

    基本介绍 外观模式(Facade),也叫“过程模式:外观模式为子系统中的一组接口提供一个一致的界面,此模式定义了一...

  • 我使用过的技术

    通用 名称描述链接设计模式-设计模式整理[https://www.jianshu.com/p/3e042364cb...

  • 设计模式整理—设计原则

    设计原则 先复习一下6大设计原则,对他们的理解 单一职责(SRP Single Responsibility Pr...

网友评论

      本文标题:设计模式整理

      本文链接:https://www.haomeiwen.com/subject/timevftx.html