Создание объектов JavaScript Шаблоны и практические рекомендации Javascript


Оглавление (нажмите, чтобы открыть):

Создание объектов JavaScript: Шаблоны и практические рекомендации Javascript

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

Литералы объектов

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

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

Фабричные функции

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

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

Прототипная последовательность

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

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

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

ES5 классы

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

По существу, данный способ также является достаточно часто используемым паттерном, поэтому его поддержка встроена в JavaScript. Функция create , которую мы объявили в примере выше, являет собой рудиментарную версию ключевого слова new , и мы можем избавиться от этой функции, заменив её словом new .

Подобную реализацию часто называют ES5 классами, которые являются функциями, создающими объекты и делегирующие общие данные в прототип-объект, и которые обрабатывают повторяющуюся логику с помощью ключевого слова new .

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

ES6 классы

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

JavaScript разработчики на протяжении многих лет использовали прототипные последовательности (наследование), и именно им можно отдать первое место в частоте использования в коде. Второе же место на сегодняшний день по частоте использования при работе с объектами, занимает синтаксис ES6 классов, основанный на прототипном наследовании, в отличии от фабричных функций, которые практически не зависят от прототипного наследования. Этот способ имеет небольшие отличия в производительности и в некоторых особенностях, которые мы сейчас разберем.

Производительность

Движок JavaScript настолько хорошо оптимизируется, что на сегодняшний день крайне трудно будет аргументировано сказать после изучения кода, какой вариант будет быстрее работать. Поэтому измерения являются ключевым моментом в этом деле. Но даже проводимые измерения могут ввести нас в заблуждение. Релизы движка JavaScript обычно выходят каждые шесть недель, и иногда со значительными изменениями в производительности. И по этой причине, сделанные нами до этого измерения и любые решения, принятые на основе этих результатов – можно смело выкинуть в окно. Моим правилом было отдавать предпочтение наиболее официально поддерживаемому и широко распространенному синтаксису на сегодняшний день, на том основании, что такой вариант будет получать самое пристальное внимание от разработчиков и в результате окажется самым производительным. Прямо сейчас таким синтаксисом является ES6 классы, и производительность такого варианта, примерно, в три раза быстрее, чем фабричные функции с возвращаемыми литералами.

Особенности

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

Заключение

Рассмотрев способы работы с объектами, наиболее предпочтительным вариантом окажется синтаксис ES6 классов. На данный момент он является стандартом, он прост в использовании и имеет чистый вид, и хорошую производительность. А также предоставляет все возможности, которые доступны в старом-добром способе с фабричной функцией.

При создании статьи были использованы следующие источники:

Создание объектов

В предыдущих главах мы рассматривали встроенные объекты JavaScript (такие как массивы, строки, и т.д.).

В данной главе мы научимся создавать свои собственные объекты.

Что такое объект?

Объект — это конструкция, которая может иметь свойства и методы. Объекты могут быть созданы двумя способами:

Синтаксис (первый способ):

Синтаксис (второй способ):

В JavaScript Вы можете обращаться к свойствам объектов двумя способами:

    Используя точку (‘.’) после имени объекта:

Заключая название свойства в квадратные скобки ([]) после имени объекта:

Свойства объектов

Свойства — это значения, связанные с объектами.

Например, объект человек может иметь следующие свойства: имя, возраст, профессия.

Методы объектов

Методы — это функции, связанные с объектами.

Например, объект человек может иметь следующие методы: идти(), сидеть(), думать().

Обратите внимание: в JavaScript объекты могут иметь неограниченное количество свойств и методов.

Конструкторы объектов

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

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

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

Обратите внимание: ключевое слово this используется для обозначения «текущего» объекта. К примеру при создании объекта human1, this в конструкторе Human подменяется на human1, а при создании объекта human2 подменяется на human2.

Обратите внимание: оператор new обязательно должен присутствовать при создании экземпляра объекта.

Свойство prototype

С помощью свойства prototype Вы можете добавлять новые свойства и методы к конструкторам объектов.

Добавленные к конструктору свойства и методы будут также добавлены ко всем объектам, которые были созданы данным конструктором.

Обратите внимание: свойство prototype присутствует также у всех встроенных конструкторов JavaScript таких как массив или строка.

Наследование

Наследование — является важным механизмом объектно-ориентированного программирования. Наследование позволяет ускорить и упростить разработку конструкторов объектов.

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

Обратите внимание: с помощью конструкции свойство || «Стандартное значение» мы можем присвоить свойству объекта стандартное значение в случае, если значение не было передано в конструктор при создании объекта.

Базовые шаблоны проектирования в JavaScript

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

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

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

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

Типы шаблонов проектирования

В разработке программного обеспечения существует множество шаблонов проектирования. Эти шаблоны сгруппированы под тремя группам, которые мы вкратце рассмотрим ниже:

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

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

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

Создание шаблона модуль

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

// а здесь у нас код

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

Пример реализуемого модуля показан ниже:

const options = <
username: ‘Michail’,
host : ‘myrusakov.ru’
>;

const Configuration = (function(params) <

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

const username = params.username \|\| »,
server = params.server \|\| »,
password = params.password \|\| »;

function checkPass()
<
if (this.password === ») <
alert(‘no password!’);
return false;
>


if (this.username === »)
<
alert(‘no username!’);
return false;
>

function login()
<
if (checkPass() && checkUsrname())
<
// выполнить авторизацию
>
>

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (https://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: https://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Native JS для чайников. Создание HTML-шаблона с помощью JS.

    Всем хорошего настроения.

    Попытаюсь описать максимально доходчиво без злоупотребления сложных терминов. Чтобы было легче усвоить данный контент, вам нужны: минимальные знания HTML, CSS, базовые знания Javascript.

    Сразу хочу пояснить, что при виртуализации вашей веб-странички по средствам javascript, сам процесс создания web-странички (разметка будет инициироваться в .js файле, а все стили будут храниться в .css файле), так что «возьни» с разметкой будет минимум.

    Для начала создания нашей виртуальной странички, создадим в корневой директории сайта стандартный index.html файл. В дальнейшем все пути (для простоты) будут подключаться относительно данного файла.

    Далее открываем данный файл для редактирования и заполняем стандартным скелетом гипер-разметки.

    Так как мы будем заполнять видимую область отображаемого контента страницы (содержание тега

    Понимание шаблонов проектирования в JavaScript

    Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

    Мастер Йода рекомендует:  Модуль re – регулярные выражения

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

    Введение

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

    Что такое шаблон проектирования?

    Шаблон проектирования является многоразовым программным решением

    Проще говоря, шаблон проектирования является многоразовым программным решением для определенного типа проблем, который часто возникает при разработке программного обеспечения. В течение многих лет практики разработки программного обеспечения эксперты выяснили способы решения подобных проблем. Эти решения были инкапсулированы в шаблоны проектирования. Так:

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

    Мы рассмотрим некоторые примеры шаблонов проектирования в учебнике.

    Типы шаблонов проектирования

    При разработке программного обеспечения шаблоны проектирования обычно группируются по нескольким категориям. Мы рассмотрим три наиболее важных из этих уроков. Они поясняются ниже:

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

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

  • Поведенческие шаблоны фокусируются на связи между объектами.
  • У вас могут возникнуть вопросы после прочтения этих кратких описаний. Это естественно, и все будет проясняться, как только мы рассмотрим некоторые шаблоны проектирования более детально. Так что читайте дальше!

    Заметка о классах в JavaScript

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

    Типы данных в JavaScript

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

    Обратите внимание на использование prototype при определении методов в типе данных Person . Поскольку объекты с несколькими Person ссылаются на один и тот же прототип, это позволяет использовать метод getAge() всеми экземплярами типа данных Person , а не переопределять его для каждого экземпляра. Кроме того, любой тип данных, который наследуется от Person , будет иметь доступ к методу getAge() .

    Работа с конфиденциальностью

    Еще одна распространенная проблема в JavaScript заключается в том, что нет истинного смысла частных переменных. Тем не менее, мы можем использовать закрытие, чтобы немного имитировать конфиденциальность. Рассмотрим следующий фрагмент:

    В приведенном выше примере мы создали объект retinaMacbook с общедоступными и частными переменными и методами. Так мы будем использовать его:

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

    Порождающие шаблоны проектирования

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

    Шаблон Builder

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

    Применение шаблона построителя позволяет нам создавать объекты, указывая только тип и содержимое объекта. Нам не нужно явно создавать объект.

    Например, вы, вероятно, сделали это бесчисленное количество раз в jQuery:

    Взгляните на три примера выше. В первом мы передали элемент

    . В последнем мы передали элемент . Результат всех трех был одинаковым: нам был возвращен объект jQuery, ссылающийся на узел DOM.

    Переменная $ реализует шаблон Builder в jQuery. В каждом примере нам был возвращен объект JQuery DOM и он имел доступ ко всем методам, предоставляемым библиотекой jQuery, но ни в коем случае мы явно не вызывали document.createElement . Библиотека JS обрабатывала все это под капотом.

    Представьте, сколько было бы работы, если бы мы должны были явно создать элемент DOM и вставлять в него контент! Используя шаблон построителя, мы можем сосредоточиться на типе и содержании объекта, а не на его явном создании.

    Шаблон прототипа

    Ранее мы рассмотрели, как определить типы данных в JavaScript через функции и добавить методы к prototype объекта. Шаблон Prototype позволяет объектам наследовать от других объектов через их прототипы.

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

    Это простой и естественный способ реализации наследования в JavaScript. Например:

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

    В приведенном выше примере мы использовали Object.create() . Однако Internet Explorer 8 не поддерживает новый метод. В этих случаях мы можем имитировать поведение:

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

    Структурные шаблоны проектирования

    Структурные шаблоны проектирования действительно полезны при определении того, как система должна работать. Они позволяют нашим приложениям легко масштабироваться и оставаться обслуживаемыми. Мы рассмотрим следующие шаблоны в этой группе: Composite и Facade.

    Композитный шаблон

    composite шаблон — это еще один шаблон, который вы, вероятно, использовали раньше, без какой-либо реализации.

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

    Так что это значит? Ну, рассмотрим этот пример в jQuery (у большинства JS-библиотек будет эквивалент этого):


    Большинство библиотек JavaScript предоставляют согласованный API независимо от того, имеем ли мы дело с одним элементом DOM или с массивом элементов DOM. В первом примере мы можем добавить класс select ко всем элементам, выбранным селектором .myList , но мы можем использовать тот же метод при работе с единственным элементом DOM, #myItem . Аналогично, мы можем присоединить обработчики событий, используя метод on() на нескольких узлах или на одном узле через один и тот же API.

    Используя шаблон Composite, jQuery (и многие другие библиотеки) предоставляют нам упрощенный API.

    Шаблон composite иногда может вызывать проблемы. В свободно типизированном языке, таком как JavaScript, часто бывает полезно знать, имеем ли мы дело с одним элементом или несколькими элементами. Поскольку шаблон composite использует один и тот же API для обоих случаев, мы иногда можем ошибаться и принимать один объект за несколько и наоборот. Некоторые библиотеки, такие как YUI3, предлагают два отдельных метода получения элементов ( Y.one() против Y.all() ).

    Фасад

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

    Шаблон Facade предоставляет пользователю простой интерфейс, скрывая его сложность.

    Шаблон Facade почти всегда улучшает удобство использования программного обеспечения. Используя jQuery в качестве примера снова, одним из наиболее популярных методов библиотеки является метод ready() :

    Метод ready() фактически реализует фасад. Если вы посмотрите на исходный код, вот что вы найдете:

    Под капотом метод ready() не так прост. jQuery нормализует несоответствия браузера, чтобы гарантировать, что ready() будет запущен в соответствующее время. Однако, как разработчику, вам предоставляется простой интерфейс.

    Большинство примеров шаблона Фасад следуют этому принципу. При реализации одного мы обычно полагаемся на условные операторы под капотом, но представляем его как простой интерфейс для пользователя. Другие методы, реализующие этот шаблон, включают animate() и css() . Можете ли вы подумать, почему они будут использовать шаблон фасада?

    Поведенческие шаблоны проектирования

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

    Шаблон наблюдатель

    Шаблон Observer является первым из двух моделей поведения, которые мы собираемся пройти. Вот его определение:

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

    Звучит довольно просто, не так ли? Нам нужно три метода для описания этого шаблона:

    • publish(data) : Вызывается субъектом, когда у него есть уведомление. В этот метод могут быть переданы некоторые данные.
    • subscribe(observer) : вызывается субъектом чтобы добавить наблюдателя в свой список наблюдателей.
    • unsubscribe(observer) : вызывается субъектом для удаления наблюдателя из его списка наблюдателей.

    Ну, оказывается, что большинство современных библиотек JavaScript поддерживают эти три метода как часть инфраструктуры пользовательских событий. Обычно есть метод on() или attach() , метод trigger() или fire() и метод off() или detach() . Рассмотрим следующий фрагмент:

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

    Посредник

    Последний шаблон, который мы будем рассматривать, — это шаблон посредника. Это похоже на шаблон Observer, но с некоторыми заметными отличиями.

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

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

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

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

    В шаблоне Observer нет единого объекта, который инкапсулирует ограничение. Вместо этого наблюдатель и субъект должны сотрудничать для поддержания ограничения. Шаблоны комуникации определяются тем, как наблюдатели и субъекты взаимосвязаны: у одного субъекта обычно есть много наблюдателей, и иногда наблюдатель одного субъекта является субъектом другого наблюдателя.

    Заключение

    Кто-то уже успешно применял это в прошлом.

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

    Для дополнительного чтения

    Большая часть контента из этой статьи находится в отличной книге «Учебные шаблоны обучения JavaScript» Адди Османи. Это онлайн-книга, которая была выпущена бесплатно под лицензией Creative Commons. Книга широко охватывает теорию и реализацию множества различных шаблонов, как в ванильном JavaScript, так и в различных JS-библиотеках. Я призываю вас заглянуть в нее, когда вы начнете свой следующий проект.

    4 шаблона проектирования JS, которые вам следует знать

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

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

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

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

    Каждый шаблон состоит из множества свойств, но я выделяю следующие ключевые моменты:

    1.Контекст: Где/при каких обстоятельствах используется тот или иной шаблон?

    2.Проблема: Какую проблему мы пытаемся решить?

    3.Решение: Как использовать это шаблон для решения этой проблемы?

    4.Реализация: Как выглядит реализация?

    # Шаблон Модуль (Module)

    В JavaScript модули являются наиболее распространенными шаблонами проектирования для обеспечения независимости каких-то частей кода от других компонентов. Это обеспечивает слабую связь для поддержания хорошо структурированного кода.
    Для тех, кто знаком с объектно-ориентированными языками, модули — это «классы» в JavaScript. Одно из многих преимуществ классов — инкапсуляция – защита состояния и поведения от доступа из других классов.
    Шаблон модуля дает доступ публичным и частным уровням (плюс менее защищенным и привилегированным).

    Модули должны быть немедленно вызываемыми функциями (IIFE) , чтобы позволить частным областям видимости, то есть замыканию, защитить переменные и методы (однако, вернется объект, а не функция). Вот как это выглядит:

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

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

    Обратите внимание, что callChangeHTML связан с возвращенным объектом и может ссылаться в рамках неймспейс (namespace) HTMLChanger. Однако, когда содержимое снаружи модуля, то такое невозможно.

    REVEALING MODULE PATTERN

    Цель — поддержание инкапсуляции и открытие определенных переменных и методов, возвращаемых в литерале объекта. Непосредственная реализация выглядит следующим образом:

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

    # Шаблон Прототип (Prototype)

    Любой Разработчик JavaScript либо видел ключевое слово prototype, озадаченный прототипным наследованием, либо реализовывал прототипы в своем коде. Шаблон прототип основывается на прототипном наследовании JavaScript. Модель прототипа используется в основном для создания объектов в ситуациях, требующих высокой производительности. Созданные объекты являются пустыми клонами исходного объекта.

    Мастер Йода рекомендует:  Проверка навыков и классные призы пройдите опрос разработчиков Developer Economics Survey Q2 2020

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

    Этот язык UML описывает интерфейс прототипа используется для клонирования конкретных реализаций.

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

    Конструктор позволяет создавать один объект TeslaModelS. При создании нового объекта TeslaModelS, он сохранит состояние, инициализированное в конструкторе. Кроме того, поддержание функции go и stop несложно, так как мы объявили их при помощи прототипов. Такой же способ расширения функции с использованием прототипа описан ниже:

    REVEALING PROTOTYPE PATTERN

    Так же как и шаблон модуль шаблон прототип имеет вариацию Revealing . Revealing паттерн обеспечивает инкапсуляцию с публичными и приватными членами.

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

    Обратите внимание, как функции Stop и Go будут защищены от возвращенного объекта в связи с нахождением за пределами области видимости возвращаемого объекта. Поскольку JavaScript изначально поддерживает прототипное наследование, нет необходимости переписывать базовые элементы(или особенности или черты).

    # Шаблон Наблюдатель (Observer)

    Бывает так, что одна часть приложения изменяется, а другие части нуждаются в обновлении. В Angular js, если $scope объекта обновляется, событие может быть запущено для уведомления другого компонента. Шаблон Observer включает в себя то, что, если объект изменен, то он передает (broadcasts) зависимым объектам, что изменение произошло.

    Другой яркий пример архитектура модель-представление-контроллер (MVC); представление обновляется когда изменяется модель. Одним из преимуществ является разрыв связи представления от модели для уменьшения зависимостей.

    Как показано на схеме UML, необходимые объекты это subject, observer, и concrete. Объект subject содержит ссылки на concrete observers для уведомления любых изменениях. Объект observer является абстрактным классом, позволяющий concrete observers реализовывать метод уведомления.

    Давайте взглянем на пример AngularJS, который включает в себя шаблон Observer через управление событиями.

    С шаблоном Observer важно различать независимый это объект или subject.

    Важно отметить, что, хотя шаблон Observer и предоставляет много преимуществ, но одним из недостатков является значительное падение производительности, так как количество «наблюдателей» (observers) увеличено. Один из самых пользующихся дурной славой наблюдателей являются watchers. В AngularJS мы можем наблюдать (watch) переменные, функции и объекты. Цикл $$digest работает и уведомляет каждого из watchers новыми значениями всякий раз, когда область объекта изменяется.

    Мы можем создать наши собственные Subjects и Observers в JavaScript. Давайте посмотрим, как это реализуется:

    PUBLISH/SUBSCRIBE

    Паттерн Publish/Subscribe использует канал topic/event, который находится между объектами, желающими получать уведомления (Subscribers) и объектом генерации события (Publisher). Эта система событий позволяет коду определить применение конкретных событий, которые могут передать пользовательские аргументы, содержащие значения, необходимые subscriber. Цель – избежание зависимости между подписчиком Subscriber и Publisher .

    В этом состоит отличие от шаблона Observer так как любой subscriber реализует соответствующий обработчик события чтобы зарегистрировать и получить topic уведомления, передаваемые publisher.

    Многие разработчики выбирают агрегирование (объединение) паттерна publish/subscribe и шаблона «наблюдателя» несмотря на различия. Subscriber в паттерне publish/subscribe уведомляются посредством сообщений, а «наблюдатели» уведомляются с помощью обработчика похожего на subject.

    В AngularJS subscriber ‘subscribes’ на событие, используя $on (‘event’, callback) , а publisher ‘publishes’ событие, используя $emit(‘event’, args) или $broadcast(‘event’, args).

    # Шаблон Синглтон (Singleton)

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

    Нахождение вариантов использования Синглтонов сложно для не использовавших их раньше. Одним из примеров является использование в офисном принтере. Допустим в офисе десять человек и все они используют один принтер, десять компьютеров подключены к одному принтеру (экземпляр). Путем совместного использования одного принтера, они делятся одними и те же ресурсами.

    Понимание шаблонов проектирования в JavaScript


    В этой статье мы расскажем об общих шаблонах проектирования в JS. Эти шаблоны предлагают разработчикам способы решения технических проблем многоразовыми и элегантными способами. Хотите улучшить ваши JavaScript навыки? Тогда читайте дальше.

    Что такое шаблон проектрирования или паттерн?

    Проще говоря, дизайн паттерн представляет собой многократно используемое программное решение для определенного типа проблемы, которая часто возникает при разработке программного обеспечения. За много лет практики разработки ПО, эксперты выяснили пути решения подобных проблем. Эти решения были инкапсулированы в шаблоны дизайна.

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

    Разновидности шаблонов проектирования

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

    1. Порождающие шаблоны (creational patterns) сосредоточены на способах создания объектов или классов. Это может показаться простым (и это в некоторых случаях оно так и есть), но большие приложения должны контролировать процесс создания объекта.
    2. Структурные шаблоны (structural design patterns) сосредоточены на том, чтобы управлять отношениями между объектами так, чтобы ваше приложение было построено масштабируемым способом. Ключевым аспектом структурной модели является обеспечение того, что изменение в одной части приложения не влияет на все другие части.
    3. Поведенческие шаблоны (behavioral patterns) сосредоточены на связи между объектами

    Примечание о классах в JavaScript

    Читая о дизайн шаблонах, вы часто будете видеть ссылки на классы и объекты. Это может привести к путанице, поскольку JavaScript на самом деле не использует “class” (класс), более правильным является термин “data type” (тип данных).

    Типы данных в JavaScript

    JavaScript является объектно-ориентированным языком, где объекты наследуют от других объектов, в концепции известной как прототипное наследство. Типы данных (data types) могут быть созданы путем определения того, что называется “функцией конструктора”, например:

    Обратите внимание на использование prototype при определении методов на Person типе данных. Так как несколько Person объектов будут ссылаться на тот же прототип, это позволит getAge() методу быть разделенным всеми экземплярами Person типа данных, нежели его переопределения для каждого экземпляра. Кроме того, любой тип данных, который наследует от Person, будет иметь доступ к методу getAge().

    Работа с конфиденциальностью

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

    В приведенном выше примере, мы создали retinaMacbook объект, с публичными и приватными переменными и методами. Вот, как мы будем это использовать:

    Порождающие шаблоны

    Существует много различных видов порождающих шаблонов (абстрактная фабрика, строитель, фабричный метод, отложенная инициализация, пул одиночек, объектный пул, прототип, получение ресурса есть инициализация, одиночка), но в этом уроке, мы только рассмотрим два из них: Строитель (Builder) и Прототип(Prototype). Они используются достаточно часто, чтобы заработать к себе внимание.

    Строительный шаблон (Builder pattern)

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

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

    Например, вы, наверняка, делали это бесчисленное количество раз в jQuery:

    Взгляните на три примера выше. В первом из них, мы прошли в

    . В последнем, мы прошли в элемент. Результат всех трех, был одинаковым, – нам был возвращен jQuery объект, ссылающийся на узел DOM.

    Переменная $ адаптирует строительный шаблон в jQuery. В каждом примере, нам был возвращен jQuery DOM объекти и имелся доступ ко всем методам, предоставляемых библиотекой jQuery, и не в одном из моментов, мы не вызывали document.createElement. JS library обработала все это за закрытыми дверями.

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

    Прототипный шаблон (Prototype pattern)

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

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

    Это простой и естественный способ реализации наследования в JavaScript. Например:

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

    В приведенном выше примере, мы использовали Object.create (). Однако, Internet Explorer 8 не поддерживает новый метод. В этих случаях мы можем имитировать его поведение:

    Структурные шаблоны

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

    Компоновщик (шаблон проектирования)

    • Шаблон Компоновщик, – это ещё один вид шаблона, который вы, вероятно, использовали без осознания того.

    Итак, что же это значит? Давайте, рассмотрим следующий пример в jQuery (у большинства JS библиотек будут эквиваленты этому):

    Большинство библиотек JavaScript обеспечивают последовательное API, независимо от того, имеем мы дело с одним элементом DOM или массивом DOM элементов. В первом примере, мы можем добавить selected класс ко все элементам подобраных селектором .myList, но мы также можем использовать этот же метод, когда речь идет об еденичном DOM элементе, #myItem. Точно так же можно приложить обработчик событий с помощью on() метода на нескольких узлах, или на одном узле через тот же API.

    Благодаря использованию композитных макетов, jQuery (и многие другие библиотеки) предоставляют нам упрощенный API.

    Composite шаблон иногда может вызывать проблемы. В слабо расписанном языке, таком как JavaScript, полезным будет знать, имеем ли мы дело с одним элементом или несколькими элементами. Так как компоновщик шаблон использует одинаковый API для обоих, мы зачастую можем принять одно за другое и в конечном итоге столкнуться с неожиданной ошибкой. Некоторым библиотекам, таким как YUI3, предлагают два отдельных метода получения элементов ( Y.one() vs Y.all()).

    Фасад (шаблон проектирования)

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

    Фасад паттерн предоставляет пользователю простой интерфейс, скрыв его основные сложности.

    Фасад шаблон, почти всегда улучшает удобство использования части программного обеспечения. Использование jQuery в качестве примера, одним из наиболее распространенных методов библиотеки, является ready() метод:

    Метод ready() фактически реализует фасад. Если взглянуть на источник, вот что вы найдете:

    Метод ready() не такой уж простой. jQuery нормализует непостоянство браузера, чтобы ready() сработал в нужный момент. Однако, как разработчик, вы будете представлены с простым интерфейсом.

    Большинство примеров фасад шаблонов, следует этому принципу. Для его реализации, мы обычно полагаемся на условные операторы, но представляем его в виде простого интерфейса для пользователя. Другие методы реализации этого паттерна включают в себя animate() и css().

    Поведенческие шаблоны

    Любая объектно-ориентированная система программного обеспечения будет иметь связи между объектами. Не организация таких связей может привести к ошибкам, которые трудно найти и исправить. Поведенческие шаблоны проектирования преписывают различные методы организации связи между объектами (цепочка ответственности, команда, интерпретатор, итератор, посредник, хранитель, наблюдатель, слуга, спецификация, состояние, стратегия, шаблонный метод, посетитель и т.д.). В этом раздел, мы рассмотрим Наблюдатель (Observer) и Посредник (Mediator) паттерны.

    Шаблон Наблюдатель (Observer)

    Вот что говорится о Наблюдателе:

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

    Нам нужно три метода для описания этого паттерна:

    publish(data): вызывается объектом, когда у него есть уведомление. Некоторые данные могут быть переданы с помощью этого метода.
    subscribe(observer): вызывается объектом, для добавления наблюдателя в свой список наблюдателей.
    unsubscribe(observer): вызывается объектом, чтобы удалить наблюдателя из списка наблюдателей.
    Большинство современных JavaScript библиотек поддерживают эти три метода, как часть своей инфраструктуры событий. Обычно есть on() или attach() метод, trigger() или fire() метод, и off() или detach() метод. Рассмотрим следующий сниппет:

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

    Шаблон Посредник (Mediator)

    Последний паттерн, который мы рассмотрим, это Посредник. Он похож на паттерн Наблюдатель, но с некоторыми заметными отличиями.

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

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

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

    Заключение

    Самое замечательное в шаблонах проектирования то, что кто-то уже успешно применил их в прошлом. Существует много open-source кода, который реализует различные шаблоны в JavaScript. Как разработчики, мы должны быть в курсе, какие паттерны есть, и когда их нужно применять.

    Давайте разоблачим мифы об операторе new в JavaScript

    Дата публикации: 2020-05-23

    От автора: в минувшие выходные я закончил работу над JavaScript: The Hard Parts Уилла Сентанса. Это может показаться не самым великолепным способом провести выходные, но я действительно развлекся и расслабился, заканчивая курс. Он коснулся функционального программирования, функций более высокого порядка, замыканий и асинхронного JavaScript.

    Для меня основной темой курса было то, как он расширил подходы JavaScript к объектно-ориентированному программированию (ООП) и демистифицировал магию оператора new. Теперь у меня есть хорошо продуманное понимание того, что происходит под капотом, когда используется оператор new JavaScript.

    Мастер Йода рекомендует:  Определение размеров шрифтов в CSS

    Объектно-ориентированное программирование в JavaScript

    Объектно-ориентированное программирование (ООП) — это парадигма программирования, основанная на концепции «объектов». Данные и функции (атрибуты и методы) объединены внутри объекта.

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

    Какие методы мы используем в нашем инструменте JavaScript для создания объекта?

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

    Объектно-ориентированный JavaScript для начинающих

    Разобравшись с основами, сосредоточимся на объектно-ориентированном JavaScript (OOJS) — данная статья дает базовое представление о теории объектно-ориентированного программирования (ООП), далее рассмотрено как JavaScript эмулирует классы объектов с помощью функции-конструктора и как создаются экземпляры объектов.

    Необходимые знания: Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Строительные блоки) и основы OOJS (см. Введение в объекты).
    Цель: Понять основную теорию объектно-ориентированного программирования, как это относится к JavaScript («все является объектом») и как создавать конструкторы и экземпляры объектов.


    Объектно-ориентированное программирование: основы

    Начнём с упрощённого высокоуровневого представления о том, что такое объектно-ориентированное программирование (ООП). Мы говорим упрощённого, потому что ООП может быстро стать очень сложным, и если сейчас дать полный курс, вероятно, можно запутать больше, чем помочь. Основная идея ООП заключается в том, что мы используем объекты для отображения моделей из реального мира в наших программах и/или упрощения доступа к функциям, которые в противном случае было бы трудно или невозможно использовать.

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

    Определение шаблона объекта

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

    Вернёмся к объекту Person из нашей статьи Основы объектов, который определяет общие сведения и функциональные возможности человека. Есть много вещей, которые вы можете узнать о человеке (его адрес, рост, размер обуви, профиль ДНК, номер паспорта, значимые черты личности . ), но в данном случае нас интересует только имя, возраст, пол и интересы, а так же мы хотим иметь возможность написать краткую информацию о нём, основываясь на этих данных, и сделать так, чтобы он поздоровался. Это известно как абстракция — создание простой модели более сложной сущности, которая представляет её наиболее важные аспекты таким образом, чтобы с ней было удобно работать для выполнения целей нашей программы.

    В некоторых языках ООП, это общее определение типа объекта называется class (JavaScript использует другой механизм и терминологию, как вы увидите ниже) — это на самом деле не объект, а шаблон, который определяет, какие характеристики должен иметь объект.

    Создание реальных объектов

    Из нашего класса мы можем создать экземпляры объектов — объекты, содержащие данные и функциональные возможности, определённые в классе. Из нашего класса Person мы теперь можем создавать модели реальных людей:

    Когда экземпляр объекта создается из класса, для его создания выполняется функция-конструктор класса. Этот процесс создания экземпляра объекта из класса называется создание экземпляра (instantiation) — из класса создается экземпляр объекта.

    Специализированные классы

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

    Это действительно полезно — преподаватели и студенты имеют много общих характеристик, таких как имя, пол и возраст, и удобно определить их только один раз. Вы можете также задать одну и ту же характеристику отдельно в разных классах, поскольку каждое определение этой характеристики будет находиться в отдельном пространстве имен. Например, приветствие студента может быть в форме «Yo, I’m [firstName]» (например Yo, I’m Sam), в то время как учитель может использовать что-то более формальное, такое как «Hello, my name is [Prefix] [lastName], and I teach [Subject].» (например Hello, My name is Mr Griffiths, and I teach Chemistry).

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

    Теперь вы можете создавать экземпляры объекта из дочерних классов. Например:

    Далее мы рассмотрим, как ООП теорию можно применить на практике в JavaScript.

    Конструкторы и экземпляры объектов

    JavaScript использует специальные функции, называемые функциями конструктора (constructor functions) для определения объектов и их свойств. Они полезны, потому что вы часто будете сталкиваться с ситуациями, в которых не известно, сколько объектов вы будете создавать; конструкторы позволяют создать столько объектов, сколько нужно эффективным способом, прикреплением данных и функций для объектов по мере необходимости.

    Рассмотрим создание классов через конструкторы и создание экземпляров объектов из них в JavaScript. Прежде всего, мы хотели бы, чтобы вы создали новую локальную копию файла oojs.html, который мы видели в нашей первой статье «Объекты».

    Простой пример

    1. Давайте рассмотрим как можно определить человека с нормальной функцией. Добавьте эту функцию в элемент script :
    2. Теперь вы можете создать нового человека, вызвав эту функцию — попробуйте следующие строки в консоли JavaScript браузера: Это работает достаточно хорошо, но код излишне многословен; если мы знаем, что хотим создать объект, зачем нам явно создавать новый пустой объект и возвращать его? К счастью, JavaScript предоставляет нам удобный способ в виде функций-конструкторов — давайте сделаем это сейчас!
    3. Замените предыдущую функцию следующей:

    Функция-конструктор — это JavaScript версия класса. Вы заметите, что в нем есть все признаки, которые вы ожидаете от функции, хотя он ничего не возвращают и явно не создает объект — он в основном просто определяет свойства и методы. Вы также увидите, что ключевое слово this также используется здесь, — это в основном говорит о том, что всякий раз, когда создается один из этих экземпляров объектов, свойство имени объекта будет равно значению name , переданному вызову конструктора, и метод greeting() будет использовать значение имени, переданное также вызову конструктора.

    Примечание: Имя функции конструктора обычно начинается с заглавной буквы — это соглашение используется для упрощения распознавания функций конструктора в коде.

    Итак, как мы вызываем конструктор для создания некоторых объектов?

    1. Добавьте следующие строки под предыдущим добавлением кода:
    2. Сохраните код и перезагрузите его в браузере и попробуйте ввести следующие строки в консоль JS:

    Круто! Теперь, как вы видите, у нас есть два новых объекта на странице, каждый из которых хранится в отдельном пространстве имен — при доступе к их свойствам и методам вы должны начинать вызовы с person1 или person2 ; функциональность, содержащаяся внутри, аккуратно упакована, поэтому она не будет конфликтовать с другими функциями. Тем не менее, у них есть одно и то же свойство name и greeting() . Обратите внимание, что они используют свое собственное значение name , которое было присвоено им, когда они были созданы; это одна из причин, почему очень важно использовать this , таким образом они будут использовать свои собственные значения, а не какие-либо другие.

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

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

    После создания новых объектов переменные person1 и person2 содержат следующие объекты:

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

    Создавая наш готовый конструктор

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

    1. Замените весь предыдущий код новой функцией конструктора — это, в принципе, тот же самое что и в наглядном примере, но несколько сложнее:
    2. Теперь добавьте следующую строку ниже, чтобы создать экземпляр объекта из него:

    Как вы могли заметить, вы можете получить доступ к свойствам и методам, как это было ранее, — попробуйте использовать их в консоли JS:

    Дальнейшие упражнения

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

    Кроме того, есть несколько проблем с нашим методом bio() — вывод всегда включает местоимение «He» («Он» в пер. с англ.), даже если ваш человек является женщиной или какой-либо другой предпочтительной гендерной классификацией. И био будет включать только два интереса, даже если в массиве interests указано больше. Можете ли Вы решить, как исправить это в определении класса (конструкторе)? Вы можете поместить любой код, который вам нравится внутри конструктора (вам, вероятно, понадобятся несколько условий и цикл). Подумайте о том, как предложения должны быть структурированы по-разному в зависимости от пола и в зависимости от того, имеет ли число перечисленных интересов 1, 2 или более 2.

    Примечание: Если у Вас возникли трудности с решением задачи, мы предоставили ответ в нашем репозитории GitHub (см. это в действии) — но сначала попробуйте написать сами!

    Другие способы создания экземпляров объектов

    До сих пор мы видели два разных способа создания экземпляра объекта — объявление объектного литерала и использование функции конструктора (см. выше).

    Это имеет смысл, но есть и другие способы — мы бы хотели ознакомить Вас с ними на случай, если Вы встретите их в своих путешествиях по Сети.

    Конструктор Object ()

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

    1. Попробуйте ввести это в консоль JavaScript вашего браузера:
    2. Это сохраняет ссылку на пустой объект в переменную person1 . Затем вы можете добавить свойства и методы к этому объекту с использованием точечной или скобочной нотации по желанию; попробуйте эти примеры в консоли:
    3. Вы также можете передать литерал объекта конструктору Object() в качестве параметра, чтобы заполнить его свойствами / методами. Попробуйте это в консоли JS:

    Использование метода create()

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

    Однако некоторые люди предпочитают создавать экземпляры объектов без предварительного создания конструкторов, особенно если они создают только несколько экземпляров объекта. JavaScript имеет встроенный метод create() , который позволяет вам это делать. С его помощью вы можете создать новый объект на основе любого существующего объекта.

    1. Закончив упражнение из предыдущего раздела, загруженное в браузер, попробуйте это в консоли JavaScript:
    2. Теперь попробуйте:

    Вы увидите, что person2 был создан на основе person1 — он имеет те же свойства и метод, доступные для него.

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

    Подробнее мы рассмотрим особенности метода create() немного позже.

    Сводка

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

    В следующей статье мы рассмотрим прототипы объектов JavaScript.

    Примеры практических шаблонов проектирования, ориентированных на объект javascript

    Какие объектно-ориентированные шаблоны проектирования вы используете в своем приложении javascript и почему?

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

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

    Ниже перечислены три популярных шаблона JavaScript. Они легко реализуемы из-за closures:

    • Образец модуля — Пример (и сделанный популярным) Эрика Мираглии
    • Memoization — пример Оливера Стила
    • Currying — Пример Dustin Diaz

    Вы также можете проверить:

    Ниже приводится сообщение о вводе/выводе Google с 2008 года, представленное Диасом, где он обсуждает некоторые темы из своей книги:

    Наследование

    Я использую обозначение для наследования, основанное на ExtJS 3, который, как мне кажется, работает довольно близко к подражанию классическому наследованию на Java. Он в основном работает следующим образом:

    Namespaces

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

    Это означает, что единственный путь к объекту окна — через собственный объект пространства имен/модулей:

    Интерфейсы

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

    Шаблоны OO

    Что касается «Шаблонов» в смысле Java, я нашел применение для Singleton pattern (отлично подходит для кеширования) и шаблон наблюдателя для управляемых событиями функций, таких как назначение некоторых действий, когда пользователь нажимает кнопку.

    Примером использования шаблона наблюдателя будет:

    И это всего лишь несколько трюков в моей сумке OO JS, надеюсь, что они вам полезны.

    Я рекомендую, если вы намереваетесь спуститься по этой дороге, которую вы прочтете Douglas Crockfords Javascript: хорошие части. Его блестящая книга для этого.

    Добавить комментарий