美文网首页
设计模式整理

设计模式整理

作者: 马建阳 | 来源:发表于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()
    

    相关文章

      网友评论

          本文标题:设计模式整理

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