[译]你应该知道的4种JavaScript设计模式

2023-03-15 12:14:44

这里介绍下面这4种设计模式

Module
Prototype
Observer
Singleton

每种模式有许多属性构成，在这我只强调以下几点：

1 Context: 在何种情况使用哪种模式？

2 问题: 我们要解决什么为题？

3 解决方案: 怎么用模式解决我们的问题？

4 实现: 怎么实现这些模式？

Module

module是JavaScript里面的类。类的一个优点是封装--使得某些状态和行为不被其他的类访问. Module设计模式允许我们有私有成员和公共成员。

Module应该是IIFE(Immediately-Invoked-Function-Expressions)这样我们就能有私有作用域-它通过闭包来保护其中的私有成员（Module返回的是一个object而不是一个function）.

他应该类似于下面的样子：

(function() {

    // 在此声明私有变量或者函数

    return {

        // 在此声明公共变量或者函数

    }

})();

在return一个对象之前我们声明了些变量和函数. 外部的代码无法方位我们的私有变量或函数，因为他们不在一个作用域。下面我们看一个更具体一些的例子：

var HTMLChanger = (function() {

  var contents = 'contents'

  var changeHTML = function() {

    var element = document.getElementById('attribute-to-change');

    element.innerHTML = contents;

  }

  return {

    callChangeHTML: function() {

      changeHTML();

      console.log(contents);

    }

  };

})();

HTMLChanger.callChangeHTML();       // Outputs: 'contents'

console.log(HTMLChanger.contents);  // undefined

注意callChangeHTML绑定在返回的对象里面，能在HTMLChanger命名空间中被引用。然而在此module外，contents是不能被访问的。

Revealing Module

Revealing是Module模式的一个变种。目的是维持封装并且通过返回的对象字面量暴露一些变量和方法。他应该类似于下面的样子：

var Exposer = (function() {

  var privateVariable = 10;

  var privateMethod = function() {

    console.log('Inside a private method!');

    privateVariable++;

  }

  var methodToExpose = function() {

    console.log('This is a method I want to expose!');

  }

  var otherMethodIWantToExpose = function() {

    privateMethod();

  }

  return {

      first: methodToExpose,

      second: otherMethodIWantToExpose

  };

})();

Exposer.first();        // Output: This is a method I want to expose!

Exposer.second();       // Output: Inside a private method!

Exposer.methodToExpose; // undefined

Prototype

为了克隆一个对象必须先要有一个用力实例化对象的构造函数。然后通过关键字prototype来将变量和方法绑定到对象结构中。看看下面的例子：

var TeslaModelS = function() {

  this.numWheels    = 4;

  this.manufacturer = 'Tesla';

  this.make         = 'Model S';

}

TeslaModelS.prototype.go = function() {

  // Rotate wheels

}

TeslaModelS.prototype.stop = function() {

  // Apply brake pads

}

当创建了一个TeslaModelS对象，他会保持构造函数里面初始化的状态。可以通过另外一个方法在prototype上扩展功能：

var TeslaModelS = function() {

  this.numWheels    = 4;

  this.manufacturer = 'Tesla';

  this.make         = 'Model S';

}

TeslaModelS.prototype = {

  go: function() {

    // Rotate wheels

  },

  stop: function() {

    // Apply brake pads

  }

}

Revealing Prototype

var TeslaModelS = function() {

  this.numWheels    = 4;

  this.manufacturer = 'Tesla';

  this.make         = 'Model S';

}

TeslaModelS.prototype = function() {

  var go = function() {

    // Rotate wheels

  };

  var stop = function() {

    // Apply brake pads

  };

  return {

    pressBrakePedal: stop,

    pressGasPedal: go

  }

}();

Observer

我们经常会遇到这样的情况当一个应用的某部分发生了改变的时候，该应用的其他部分需要被更新。在AngularJS中如果$scope对象更新了，一个事件将会被触发通知到其他的组件。观察者模式就是用来干这个事情的。

另一个例子是model-view-controller（MVC）架构；当model更新了，view会发生变化。

var Subject = function() {

  this.observers = [];

  return {

    subscribeObserver: function(observer) {

      this.observers.push(observer);

    },

    unsubscribeObserver: function(observer) {

      var index = this.observers.indexOf(observer);

      if(index > -1) {

        this.observers.splice(index, 1);

      }

    },

    notifyObserver: function(observer) {

      var index = this.observers.indexOf(observer);

      if(index > -1) {

        this.observers[index].notify(index);

      }

    },

    notifyAllObservers: function() {

      for(var i = 0; i < this.observers.length; i++){

        this.observers[i].notify(i);

      };

    }

  };

};

var Observer = function() {

  return {

    notify: function(index) {

      console.log("Observer " + index + " is notified!");

    }

  }

}

var subject = new Subject();

var observer1 = new Observer();

var observer2 = new Observer();

var observer3 = new Observer();

var observer4 = new Observer();

subject.subscribeObserver(observer1);

subject.subscribeObserver(observer2);

subject.subscribeObserver(observer3);

subject.subscribeObserver(observer4);

subject.notifyObserver(observer2); // Observer 2 is notified!

subject.notifyAllObservers();

// Observer 1 is notified!

// Observer 2 is notified!

// Observer 3 is notified!

// Observer 4 is notified!

Singleton

var printer = (function () {

  var printerInstance;

  function create () {

    function print() {

      // underlying printer mechanics

    }

    function turnOn() {

      // warm up

      // check for paper

    }

    return {

      // public + private states and behaviors

      print: print,

      turnOn: turnOn

    };

  }

  return {

    getInstance: function() {

      if(!printerInstance) {

        printerInstance = create();

      }

      return printerInstance;

    }

  };

  function Singleton () {

    if(!printerInstance) {

      printerInstance = intialize();

    }

  };

})();

var officePrinter = printer.getInstance();

码农公寓