JavaScript

Паттерны проектирования

Давай уже паттерны! =/

Примеры реализации паттернов

Модуль

Модуль

var myModule = {

  myProperty: "someValue",

  myConfig: {
    useCaching: true,
    language: "ru"
  },

  myMethod: function () {
    console.log( "Сообщение, которое выводит метод myMethod" );
  },

  myMethod2: function () {
    console.log( "Язык сайта:" + this.myConfig.language);
  }

  getMyProperty: function() {
    console.log( this.myProperty );
  }

};

Модуль использование

// Выведет: Сообщение, которое выводит метод myMethod
myModule.myMethod();

// Выведет: Язык сайта: ru
myModule.myMethod2();

// Выведет: someValue
myModule.getMyProperty();

Модуль с приватными свойствами

var testModule = (function () {

  var counter = 0;

  return {

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

    resetCounter: function () {
      console.log( "Значение счетчика до сброса: " + counter );
      counter = 0;
    }
  };

})();

Модуль с приватными свойствами использование

// Увеличиваем значение счетчика на единицу
testModule.incrementCounter();

// Проверяем значение и обнуляем
// Вывод: Значение счетчика до сброса1
testModule.resetCounter();

Примеры реализации паттернов

Декоратор

Декоратор с приватными свойствами

function Vehicle( vehicleType ){

  this.vehicleType = vehicleType || "Лодка";
  this.model = "стандартная";
  this.sign = "П-123-21";

}

var testInstance = new Vehicle( "Авто" );
console.log( testInstance );

var truck = new Vehicle( "Грузовик" );

truck.setModel = function( modelName ){
    this.model = modelName;
};

truck.setColor = function( color ){
    this.color = color;
};

truck.setModel( "MAN" );
truck.setColor( "Синий" );

console.log( truck );

var secondInstance = new Vehicle( "Авто" );
console.log( secondInstance );

Примеры реализации паттернов

Наблюдатель

Наблюдатель

var PubSub = function() {};

PubSub.prototype.subscribe = function(topic, callback, context) {
  context = context || this;
  this._topics = this._topics || {};
  this._topics[topic] = this._topics.topic || [];
  this._topics[topic].push({ "context": context, "callback" : callback });
};

PubSub.prototype.publish = function(topic) {
  this._topics[topic].forEach(function(subscription) {
    subscription.callback.call(subscription.context);
  });
};

PubSub.prototype.addTag = function(tag) {
  this._tags = this._tags || [];
  this._tags.push(tag);
  this.publish && this.publish("tag:added");
};

var object = new PubSub();

object.subscribe("tag:added", function() {
  console.log('Тег добавлен');
});

object.addTag("Тест");

object.addTag("Крутой тег");

Важное уточнение

На самом деле существует более ста видов паттернов, нет необходимости знать их все. Достаточно изучить несколько основных (например те, что я Вам сегодня показал). Если перед Вами будет стоять нетривиальная задача, то можно легко найти необходимый конкретно вам паттерн!