Шаблоны проектирования JavaScript

Дата публикации: 05.11.2013

Последнее обновление: 21.11.2013

Шаблоны проектирования, предлагают решение наиболее типичных задач, связанных с архитектурой объектно-ориентированного программного обеспечения. Они достаточно давно используются на практике и доказали свою полезность во многих ситуациях. Именно поэтому и вам будет полезно познакомиться с ними и обсудить их.

Хотя эти шаблоны проектирования могут применяться в любом языке программирования, тем не менее многие годы они изучаются с позиций языков со строгим контролем типов и со статическими классами, таких как C++ и Java.

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

Нами будут рассмотрены следующие шаблоны проектирования:

• Пространство имен
• Частные свойства и методы
• Модуль
• Шаблон модуль выявление
• Одиночка
• Наблюдатель
• Посредник
• Прототип
• Команда
• Фасад
• Фабричный метод
• Смешанный шаблон
• Декоратор
• Приспособленец

Часть 3.1 Шаблон “Пространство имен”

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

Взгляните на следующий пример:

1 // ДО: 5 глобальных переменных

2

3 function Parent() {}

4 function Child() {}

5 var some_var = 1;

6 var module1 = {};

7 module1.data = {a: 1, b: 2};

8 va module2 = {};

Такой программный код легко переписать иным способом, создав единственный глобальный объект, назовем его MYAPP, и превратив все функции и переменные в свойства этого глобального объекта:

01 // ПОСЛЕ: 1 глобальная переменная

02 // глобальный объект

03 var MYAPP = {};

04 // конструкторы

05 MYAPP.Parent = function () {};

06 MYAPP.Child = function () {};

07 // переменная

08 MYAPP.some_var = 1;

09 // обьект-контейнер

10 MYAPP.modules = {};

11 // вложенные обьекты

12 MYAPP.modules.modulel = {};

13 MYAPP.modules.modulel.data = {a: 1, b: 2};

14 MYAPP.modules.module2 = {};

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

Поэтому было бы очень удобно иметь функцию, которая взяла бы на себя выполнение всех операций, необходимых для создания пространства имен. Назовем эту функцию namespace() и положим, что она должна использоваться, как показано ниже:

1 // применение функции пространства имен

2 MYAPP.namespace('MYAPP.modules.module2');

3

4 // этот вызов эквивалентен следующей конструкции:

5 // var MYAPP = {

6 // modules: {

7 // module2: {}

8 // }

9 // };

Далее приводится пример реализации этой функции, в котором использован принцип неразрушения, то есть если пространство имен с заданным именем уже существует, оно не будет создано заново:

01 var MYAPP = MYAPP || {};

02 MYAPP.namespace = function (ns_string) {

03 var parts = ns_string.split('.'),

04 parent = MYAPP,

05 i;

06 // отбросить начальный префикс - имя глобального объекта

07 if (partsf[0] === "MYAPP") {

08 parts = parts.slice(1);

09 }

10 for (i = 0; i < parts.length; i += 1) {

11 // создать свойство, если оно отсутствует

12 if (typeof parent[parts[i]] === "undefined") {

13 parent[parts[i]] = {};

14 }

15 parent = parent[parts[i]];

16 }

17 return parent;

18 };

Такая реализация делает допустимыми все следующие варианты использования функции:

1 // присваивать возвращаемое значение локальной переменной

2 var module2 = MYAPP.namespace(‘MYAPP.modules.module2’);

3 module2 === MYAPP.modules.module2; // true

4 // опускать начальный префикс 'MYAPP'

5 MYAPP.namespace('modules.module51');

6 // создавать глубоко вложенные пространства имен

7 MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property' );

Часть 3.2 Шаблон “Частные свойства и методы”

В языке JavaScript нет специальных средств объявления частных (private), защищенных (protected) или общедоступных (public) свойств и методов, как в языке Java или в других языках. Все члены объектов в этом языке являются общедоступными:

1 var myobj = {

2 myprop: 1,

3 getProp: function () {

4 return this.myprop;

5 }

6 };

7 console.log(myobj.myprop); // 'myprop' - общедоступный член

8 console.log(myobj.getPropO); // getPropO - также общедоступный член

To же справедливо и при использовании функций-конструкторов для создания объектов - все члены являются общедоступными:

01 function Gadget() {

02 this.name = 'iPod';

03 this.stretch = function () {

04 return 'iPad';

05 };

06 }

07

08 var toy = new GadgetO;

09 console.log(toy.name); // 'name' - общедоступный член

10 console.log(toy.stretch()); // stretch() - общедоступный член

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

01 function Gadget() {

02 // частный член

03 var name = ‘iPod’;

04 // общедоступная функция

05 this.getName = function () {

06 return name;

07 };

08 }

09

10 var toy = new Gadget();

11 // имя 'name' не определено, частный член

12 console.log(toy.папе); // undefined

13 // общедоступный метод может обратиться к частному члену 'name'

14 console.log(toy.getName()); // "iPod"

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

До сих пор все примеры реализации частных свойств, которые мы видели, были основаны на использовании конструкторов. А как быть в случаях, когда объекты определяются в виде литералов? Возможно ли в таких ситуациях создавать частные члены? Как вы уже видели, чтобы обеспечить сокрытие данных, их необходимо обернуть функцией. Так, в случае литералов объектов замыкание можно создать с помощью дополнительной анонимной функции, вызываемой немедленно. Например:

01 var myobj; // это будет объект

02 (function () {

03 // частные члены

04 var name = "my, oh my";

05 // реализация общедоступных членов

06 // обратите внимание на отсутствие инструкции 'var'

07 myobj = {

08 // привилегированный метод

09 getName: function () {

10 return name;

11 }

12 };

13 }());

14 myobj.getName(); // "my, oh my"

Та же идея положена в основу следующего примера, имеющего несколько иную реализацию:

01 var myobj = (function () {

02 // частные члены

03 var name = "my, oh my";

04 // реализация общедоступных членов

05 return {

06 getName: function () {

07 return name;

08 }

09 };

10 }());

11 myobj.getName(); // "my, oh my"

Этот шаблон является также основой шаблона, известного под названием «модуль», исследованием которого мы займемся чуть ниже.

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

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

Как это сделать, показано в следующем примере:

01 function Gadget() {

02 // частный член

03 var name = 'iPod';

04 // общедоступная функция

05 this.getName = function () {

06 return name;

07 };

08 }

09

10 Gadget.prototype = (function () {

11 // частный член

12 var browser = "Mobile Webkit";

13 // общедоступные члены прототипа

14 return {

15 getBrowser: function () {

16 return browser;

17 }

18 };

19 }());

20 var toy = new Gadget();

21 console.log(toy.getName()); // "собственный" привилегированный метод

22 console.log(toy.getBrowser()); // привилегированный метод прототипа

javascript, уроки, шаблоны