Топ 10 паттернов программирования на JS

1. Паттерн конструктор (The constructor Pattern)

В классических объектно-ориентированных языках программирования конструктор - это специальный метод, используемый для инициализации вновь созданного объекта после выделения памяти для него. В JavaScript почти все является объектом, нас чаще всего интересуют конструкторы объектов. Поскольку конструкторы объектов используются для создания объектов определенных типов, например, как для подготовки объекта к использованию, так и для принятия аргументов конструктор может использовать для установки значений свойств и методов-членов при первом создании объекта.

В JavaScript конструкторе ключевое слово this ссылается на создаваемый новый объект, возвращающийся к созданию объекта, базовый конструктор может выглядеть следующим образом:

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

// Usage:
var bmw = new Car('M4', '2019', '1000');

2. Паттерн модуль (The module Pattern)

Модули являются неотъемлемой частью архитектуры любого надежного приложения и, как правило, помогают сохранять единицу кода для проекта четко отделенным и организованным.

Есть несколько вариантов реализации модулей. Они включают:

— Буквенное обозначение объекта

— Модуль Pattern

— Модули AMD

— Модуль CommonJS

— Модули ECMAScript Harmony

Буквенное обозначение объекта:

var newObject = {
  variableKey: variableValue,
  functionKey: function() {
    //…
  }
};

Модуль Pattern:

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

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

3. Паттерн выявления модулей (The Revealing Module Pattern)

Единственное, что может сделать этот паттерн, это избежать повторения имени основного объекта, когда мы хотим вызвать один открытый метод из другого или получить доступ к открытым переменным.

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. Паттерн синглтон (The Singleton Pattern)

Он ограничивает создание экземпляра класса одним объектом. Синглтоны отличаются от статических классов тем, что мы можем отложить их инициализацию. как правило, потому что им требуется некоторая информация, которая может быть недоступна во время инициализации.

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. Паттерн наблюдения (The 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];
  }
};

//...

Когда субъект должен уведомить наблюдателей о том, что происходит что-то интересное, он передает уведомление наблюдателям (включая конкретные данные, относящиеся к теме уведомления).

Когда мы больше не желаем, чтобы конкретный наблюдатель уведомлялся об изменениях субъектом, с которым он зарегистрирован, субъект может удалить его из списка наблюдателей.

6. Паттерн посредника (The Mediator Pattern)

Если кажется, что система имеет слишком много прямых связей между компонентами, возможно, пришло время иметь центральную точку управления, через которую взаимодействуют компоненты.

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. Паттерн прототипа (The Prototype Pattern)

Создает объекты на основе шаблона существующего объекта путем клонирования.

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. Паттерн фабрика (The Factory Pattern)

Может предоставить общий интерфейс для создания объектов, где мы можем указать тип объекта, который мы хотим создать.

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

9. Паттерн миксин (The Mixin Pattern)

Миксины - это классы, которые предлагают функциональные возможности, которые могут быть легко унаследованы подклассом или группой подклассов для повторного использования функции.

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. Паттерн декоратор (The Decorator Pattern)

Декораторы являются структурным шаблоном проектирования, целью которого является содействие повторному использованию кода. Подобно миксинам, их можно считать еще одной жизнеспособной альтернативой объектному подклассу. Декораторы могут динамически добавлять поведение к существующим классам в системе.

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

Заключение.

Не обязательно использовать все паттерны в каждом проекте и все вместе, но обязательно их знать и понимать, чтобы применить в подходящей ситуации.

источник