10個每個開發人員都喜歡的JavaScript模式

英文 | https://medium.com/javascript-in-plain-english/top-10-javascript-patterns-every-developers-like-fa79b5400cc1

翻譯 | web前端開發（ID：web_qdkf）

1、構造器模式

在面向對象的編程語言中，構造函數是一種特殊的方法，用於在爲其分配了內存後初始化新創建的對象。在JavaScript中，幾乎所有東西都是對象，我們最常對對象構造函數感興趣。

例如，由於對象構造函數用於創建特定類型的對象，因此準備對象以供使用和接受參數時，構造函數可在首次創建對象時用來設置成員屬性和方法的值。

如我們所見，JavaScript不支持類的概念，因此在構造函數內部，此關鍵字引用正在創建的新對象並重新訪問對象創建，基本的構造函數可能如下所示：

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

2、moModuleattern

模塊是任何健壯的應用程序體系結構中不可或缺的一部分，通常有助於保持項目代碼單元的清晰分離和組織實現模塊有多種選擇。

這些包括：

• 對象文字符號

• 模塊模式

• AMD模塊

• CommonJS模塊

• ECMAScript Harmony模塊

對象文字：

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

模塊模式：

讓我們開始通過創建一個獨立的模塊來研究Module模式的實現。

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

3、顯示模塊模式

顯示模塊可以做的一件事是，當我們要從另一個對象調用一個公共方法或訪問公共變量時，避免重複主對象的名稱。

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');

4、單例模式

這樣就知道了Singleton模式，因爲它將類的實例化限制爲單個對象。單例不同於靜態類，因爲我們可以延遲其初始化。通常，因爲它們需要一些在初始化期間可能不可用的信息。對於不知道先前引用它們的代碼，它們沒有提供易於檢索的方法。讓我們看一下單例的結構：

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();

5、觀察者模式

觀察者是一種設計模式，其中對象根據觀察者維護對象列表，並自動將狀態的任何更改通知它們。

• 學科

• 維護觀察者列表，添加或刪除觀察者的設施

• 觀察者

• 爲需要通知受試者狀態變化的對象提供更新的接口

• 具體主題

• 向狀態觀察者廣播通知，存儲具體觀察者的狀態

• 具體觀察者

• 存儲對ConcreteSubject的引用，爲觀察者實現更新的接口，以確保狀態與主題一致

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];  }};//...

當主題需要將一些有趣的事情通知觀察者時，它會向觀察者廣播通知（包括與通知主題相關的特定數據）

當我們不再希望特定觀察者通過其註冊的主題來通知其更改時，該主題可以將其從觀察者列表中刪除。將來，我將更多地討論如何在JavaScript中廣泛使用觀察者的功能。

6、中介者模式

如果系統之間組件之間的直接關係過多。該組件就是可以通過控件進行通信的中心點了。中介體模式通過確保組件而不是彼此明確引用來促進鬆散耦合。

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;    }  };})();

7、原型模式

使用Prototype模式的好處之一是，我們已經利用JavaScript原生提供的原型優勢，而不是嘗試模仿其他語言的功能。讓我們看一下模式示例。

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'

8、工廠模式

Factory可以提供用於創建對象的通用接口，我們可以在其中指定希望創建的工廠對象的類型。

請參見下圖。

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

9、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

在這種情況下，超級英雄能夠用特定於其對象的值覆蓋任何繼承的值。

10、裝飾器模式

裝飾器是一種結構設計模式，旨在促進代碼重用。與Mixins相似，它們可以被認爲是對象子類化的另一種可行選擇。傳統上，裝飾器提供了將行爲動態添加到系統中現有類的功能。這個是裝飾器本身不該有的基本功能。讓我們看看它市如何在JavaScript中進行工作的。

function MacBook() {  this.cost = function() {    return 997;  };  this.screenSize = function() {    return 11.6;  };}// Decorator 1function Memory(macbook) {  var v = macbook.cost();  macbook.cost = function() {    return v + 75;  };}// Decorator 2function Engraving(macbook) {  var v = macbook.cost();  macbook.cost = function() {    return v + 200;  };}// Decorator 3function 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

所有模式都可能不適用於一個項目，並且某些項目可能會受益於Observer模式提供的去耦收益。也就是說，一旦我們牢牢掌握了設計模式及其最適合的解決特定問題的技巧的話，將它集成到我們的應用程序體系結構中變得更加容易。