html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Использование паттернов проектирования в javaScript. Часть 1: Порождающие паттерны из песочницы

Привет, хабр!
С удивлением обнаружил отсутствие на хабре развернутой статьи о сабже, что немедленно сподвигло меня исправить эту вопиющую несправедливость.

В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.


Singleton


Если бы стояла задача описать этот паттерн одной фразой, то она получилась бы примерно следующей: Singleton — это класс, который может иметь только один экземпляр.
Самым простым и очевидным решением в javaScript для реализации этого паттерна является использование объектов:

var app = {
  property1: 'value',
  property2: 'value',
  ...
  method1: function () {
    ...
  },
  ...
}


Этот способ имеет как свои преимущества, так и недостатки. Его просто описать, многие его используют не догадываясь о существовании каких-либо паттернов и эта форма записи будет понятна любому javaScript разработчику. Но у него есть и существенный недостаток: основная цель паттерна singleton — обеспечить доступ к объекту без использования глобальных переменных, а данный способ предоставляет доступ к переменной app только в текущей области видимости. Это означает, что к объекту app мы сможем обратиться из любого места приложения только в том случае если он будет глобальным. Чаще всего это крайне неприемлемо, хорошим стилем разработки на javaScript является использование максимум одной глобальной переменной, в которой инкапсулируется все необходимое. А это означает, что приведенный выше подход мы сможем использовать максимум один раз в приложении.
Второй способ чуть более сложен, но зато и более универсален:

function SomeFunction () {
   if (typeof (SomeFunction.instance) == 'object') {
     return SomeFunction.instance;
   }
   this.property1 = 'value';
   this.property2 = 'value';
   SomeFunction.instance = this;
   return this;
}

SomeFunction.prototype.method1 = function () {
}


Теперь, используя любую модульную систему (например requirejs) мы в любом месте нашего приложения сможем подключить файл с описанием этой функции-конструктора и получим доступ к нашему объекту, выполнив:

var someObj = new SomeFunction ();


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

function SomeFunction () {
  var instance;
  SomeFunction = function () {
    return instance;
  }
  this.property1 = 'value';
  this.property2 = 'value';
  instance = this;
}


Казалось бы вот оно, решение всех проблем, но на место старых проблем приходят новые. А именно: все свойства, занесенные в прототип конструктора после создания экземпляра не будут доступны, т.к. по сути будут записаны в старый конструктор, а не в свежеопределенный. Но и из этой ситуации есть достойный выход:

function SomeFunction () {
  var instance;
  SomeFunction = function () {
     return instance;
  }
  SomeFunction.prototype = this;
  instance = new SomeFunction ();
  instance.constructor = SomeFunction;
  instance.property1 = 'value';
  instance.property2 = 'value';
  return instance;
}


Этот способ описания одиночки лишен всех вышеперечисленных недостатков и вполне пригоден для универсального использования, однако, способы описания одиночки с помощью замыкания не будут работать с requirejs, но если немного их модифицировать и вынести переменную из замыкания, созданного самой функцией в функцию, используемую в define, то проблема будет решена:

define([], function () {
  var instance = null;

  function SomeFunction() {
    if (instance) {
      return instance;
    }
    this.property1 = 'value';
    this.property2 = 'value';
    instance = this;
  };
  return SomeFunction;
}); 


Factory method


У фабричного метода две основных цели:
1) Не использовать явно конкретные классы
2) Объединить вместе часто используемые методы инициализации объектов
Простейшей реализацией фабричного метода является такой пример:

function Foo () {
  //...
}
function Bar () {
  //...
}
function factory (type) {
  switch (type) {
    case 'foo':
      return new Foo();
    case 'bar':
      return new Bar();
  }
}


Соответственно создание объектов будет выглядеть так:

foo = factory('foo');
bar = factory('bar');


Можно использовать более элегантное решение:

function PetFactory() {
};

PetFactory.register = function(name, PetConstructor) {
  if (name instanceof Function) {
    PetConstructor = name;
    name = null;
  }

  if (!(PetConstructor instanceof Function)) {
    throw {
      name: 'Error',
      message: 'PetConstructor is not function'
    }
  }
  this[name || PetConstructor.name] = PetConstructor;
};

PetFactory.create = function(petName) {
  var PetConstructor = this[petName];
  if (!(PetConstructor instanceof Function)) {
    throw {
      name: 'Error',
      message: 'constructor "' + petName + '" undefined'
    }
  }
  return new PetConstructor();
};


В этом случае мы не ограничиваем себя количеством классов, которые может порождать фабрика, можем добавлять их сколько угодно таким способом:

PetFactory.register('dog', function() {
  this.say = function () {
    console.log('gav');
  }
});


Ну или таким:

function Cat() {
}

Cat.prototype.say = function () {
  console.log('meow');
}

PetFactory.register(Cat);


Abstract Factory


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

function BluePopup () {
  //создание всплывающего окна
}

BluePopup.prototype.attach = function (elemens) {
  //присоединение других ui-элементов к окну
}

BluePopupFactory.register('popup', BluePopup);

function BluePopupButton () {
  //создание кнопки для синего всплывающего окна
}

BluePopupButton.prototype.setText = function (text) {
  //установка текста на кнопке
}

BluePopupFactory.register('button', BluePopupButton);

function BluePopupTitle () {
  //создание заголовка для синего окна
}

BluePopupTitle.prototype.setText = function (text) {
  //установка текста заголовка
}

BluePopupFactory.register('title', BluePopupTitle);


Наверное у нас должен быть некий класс, отвечающий за элементы интерфейса.

function UI () {
  //класс, отвечающий за ui-элементы
}


И в него мы добавим метод createPopup:

UI.createPopup = function (factory) {
  var popup = factory.create('popup'),
      buttonOk = factory.create('button'),
      buttonCancel = factory.create('button'),
      title = factory.create('title');

  buttonOk.setText('OK');
  buttonCancel.setText('Cancel');

  title.setText('Untitled');

  popup.attach([buttonOk, buttonCancel, title]);
}


Как видите createPopup принимает аргументом фабрику, создает само всплывающее окно и кнопки с заголовком для него, а затем присоединяет их к окну.
После этого можно использовать этот метод так:

var newPopup = UI.createPopup(BluePopupFactory);


Соответственно, можно описать неограниченное количество фабрик и передавать нужную при создании очередного всплывающего окна.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

10

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции