Home-theater-designers
Если вы когда-нибудь захотите создать повторно используемый код JavaScript или сотрудничать с командой разработчиков, вам необходимо знать, как использовать и идентифицировать различные шаблоны проектирования на языке.
В JavaScript термин шаблон проектирования относится к определенному способу написания кода и часто рассматривается как шаблон программирования. Интересно то, что шаблон дизайна этикеток можно применять ко всему, от всего приложения до простого блока кода.
Шаблон проектирования - это обширная тема, но, разобравшись в шаблоне модуля и фабричном методе, вы должны с ним разобраться.
Шаблон модуля
Модули JavaScript были представлены в 2009 году вместе с версией языка программирования ES5. Используя модули, разработчики теперь могли создавать собственные фрагменты кода и экспортировать их для использования в других разделах приложения JavaScript.
Базовая структура шаблона модуля
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); В приведенном выше примере шаблоны модулей всегда заключаются в выражение немедленно вызываемой функции (IIFE). Это означает, что шаблон модуля выполняется сразу после его определения. Важно отметить, что шаблон модуля состоит из двух отдельных разделов.
Первый раздел используется для объявления частных переменных и функций, к которым можно получить доступ только в рамках шаблона модуля.
Второй раздел состоит из возвращаемого значения, которое включает общедоступные переменные и функции, к которым можно получить доступ вне области действия шаблона модуля.
Использование шаблона модуля для создания приложения
Рассмотрим простое приложение, например диспетчер задач. Используя шаблон модуля, вам нужно будет создать собственные модули для каждого раздела. Они могут включать:
- Контроллер задач
- Контроллер пользовательского интерфейса
- Контроллер хранилища
- Контроллер приложения
Связанный: Проекты программирования для начинающих
Контроллер задач будет использоваться для создания каждой новой задачи. Контроллер пользовательского интерфейса будет использоваться для управления функциями, связанными с пользовательским интерфейсом, такими как прослушивание нажатия кнопки или изменение того, что отображается. Контроллер хранилища будет использоваться для сохранения каждой новой задачи в базе данных. Модуль приложения будет использоваться для выполнения приложения.
Использование шаблона модуля для создания примера контроллера пользовательского интерфейса
const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();
В приведенном выше примере четко показаны два раздела, которые находятся в шаблоне модуля - частный и открытый.
В закрытом разделе функции переменная компонента и функция changeComponent являются закрытыми. Поэтому, если вы хотите изменить весь текст h1 на веб-странице, вы получите сообщение об ошибке, если напишете следующий код.
Неправильный способ вызова примера changeComponent
UIController.changeComponent();
В сообщении об ошибке будет явно указано, что changeComponent () не является функцией функции UIController. В этом прелесть модульного паттерна; переменные и функции, созданные в закрытом разделе, никогда не будут доступны напрямую за пределами области действия этой функции.
Хотя к частным переменным нельзя получить прямой доступ, тем не менее, к ним можно получить доступ косвенно (из общедоступного раздела). Вывод из приведенного выше примера контроллера пользовательского интерфейса заключается в том, что публичный раздел в шаблоне модуля всегда отмечен свойством return.
В параметрах свойства return мы теперь можем получить косвенный доступ к функции changeComponent. Теперь мы можем использовать следующую строку кода (с шаблоном модуля выше), чтобы эффективно заменить весь текст h1 на целевой веб-странице на замещающий текст.
Правильный способ вызова примера changeComponent
UIController.callChangeComponent();
Заводской образец
Фабричный шаблон (также известный как фабричный метод) - еще один популярный шаблон проектирования JavaScript. Шаблон модуля проявляется, когда требуется инкапсуляция данных, а шаблон фабрики наиболее полезен в тех случаях, когда мы имеем дело с коллекцией различных объектов, схожих в некоторых аспектах.
Возвращаясь к нашему диспетчеру задач выше; если бы мы разрешили пользователю назначать тип каждой создаваемой задаче, то мы могли бы создать этот аспект приложения (довольно эффективно), используя фабричный шаблон.
Пример использования фабричного шаблона для назначения типа задачи
//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}В приведенном выше коде используется фабричный метод для создания новых задач, проверки типа (срочный или тривиальный) и назначения соответствующего свойства перед печатью новой задачи на консоли.
Внутренняя функция createTask устанавливает основу для одновременного создания нескольких задач, но перед тем, как мы попытаемся создать какие-либо новые задачи, есть некоторый дополнительный код, который нам необходимо включить в этот раздел проекта.
В приведенном выше коде мы создаем новую UrgentTask или новую Trivialtask, если выполняется определенное условие. Однако в нашем проекте нет функции или класса с такими именами - эту проблему можно легко решить, добавив в наш проект следующий код.
Создавайте срочные и тривиальные задачи
//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}
Благодаря приведенному выше коду мы теперь можем назначать свойство UrgentTask или TrivialTask каждой новой создаваемой задаче. Следующим шагом будет создание новой задачи, но перед этим нам нужно создать базу данных для хранения каждой новой задачи по мере ее создания.
Учитывая, что создание базы данных - это целая статья, мы заменим базу данных структурой данных (массивом).
Создание примера массива
//create an array to host the different task
const task = [];
Теперь мы наконец можем создать новую задачу.
Пример создания новых задач
//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));
С помощью приведенного выше кода вы теперь можете создать две новые задачи, используя функцию TaskFactory, которую мы создали изначально. Когда мы создаем каждую новую задачу, свойства (имя и тип) передаются функции createTask, которая находится в функции TaskFactory, которую мы создали с использованием шаблона фабрики.
После того, как каждая задача прошла через TaskFactory и ей присваивается соответствующее свойство типа. Затем он помещается в массив задач, который мы создали ранее.
Наша единственная дилемма теперь заключается в том, как мы узнаем, что эти две задачи были созданы или что наш фабричный шаблон сработал? Если бы мы использовали базу данных, мы могли бы просто проверить базу данных, чтобы увидеть, были ли созданы две новые задачи.
Вернитесь к приведенному выше примеру использования шаблона Factory для назначения типа задачи, непосредственно под тем, который используется для печати задачи и ее типа в комментарии консоли, есть небольшая функция task.define, которая была создана для печати каждой задачи в массиве на консоль, используя следующие метод массива .
//print each task to the console
task.forEach(function(task){
task.define();
});
Вы должны увидеть в консоли следующий вывод.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Теперь вы можете использовать шаблоны дизайна в своих проектах на JavaScript
На этом этапе вы должны понимать шаблоны проектирования в JavaScript и понимать, как шаблоны проектирования можно использовать для создания повторно используемого кода и облегчить жизнь всем разработчикам, участвующим в проекте.
Теперь вы знаете, как работают два популярных шаблона проектирования JavaScript, и сможете эффективно применять их для разработки приложения.
Кредит изображения: Alltechbuzz / Pixabay
как иметь анимированные обои windows 10Делиться Делиться Твитнуть Эл. адрес Как объявить переменные в JavaScript
Чтобы начать работу с JavaScript, вам нужно понимать переменные. Вот три способа объявления переменных в JavaScript.
Читать далее Похожие темы- Программирование
- JavaScript
Кадейша Кин (Kadeisha Kean) - разработчик программного обеспечения полного стека и автор статей по техническим / технологическим вопросам. У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производить материал, понятный любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).
Ещё от Kadeisha KeanПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться