Дизайн Javascript кода. Модули

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

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

При работе с Javascript необходимо немного самодисциплины, чтобы не дать хаосу взять верх. Для этого я хочу рассказать вам об одном проверенном паттерне разработки, который называется "Модуль". Но прежде чем начать, стоит отметить, что существует множество паттернов разработки и не меньшее количество ресурсов, где с ними можно ознакомиться. Я настоятельно рекомендую прочитать бесплатную книгу Эдди Османи о паттернах в Javascript , которая будет полезна разработчикам любого уровня.

Паттерн "Модуль"

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

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

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

Создание модуля

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

var textField = {
   maxlength: 1000,
    
   autocomplete: function(textField) { 
      /* Метод модуля textField */
   },
     
   getValue: function(textField) { 
      /* Еще один метод модуля textField */ 
   }       
};
 
var comboBox = {
   getValue: function(comboBox) { 
       /* Метод модуля comboBox */
   }    
};

Теперь мы можем использовать методы модуля, обращаясь к нему по имени.

textField.autocomplete(...);var val = comboBox.getValue(...);

Также можно организовывать более сложную структуру модулей.

var utils = {
   textField: {
      autocomplete: function(textField) { ... },
       
      getValue: function(textField) { ... }       
   },
    
   comboBox: {
      getValue: function(comboBox) { ... }    
   },
    
   checkBox: {
      /* Методы модуля checkBox */
   }
}
 
utils.textField.autocomplete(...);

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