Хорошие практики в JavaScript: модульность и интерфейсы

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

Обертка анонимной функцией

Хорошей практикой при разработке будет оборачивать исполняемый код в анонимную функцию. Это позволит Вам изолировать данные (функции и переменные) в замыкании.

(function(window) {
...Тут Ваш код
})(window);

В рамках ES6 этот подход можно применять по разному. Самым простым примером будет такой подход:

(function(window){
class YourOwnClass{/.../};
document.addEventListener("DOMContentLoaded", () => {
let layout = new YourOwnClass();
});
})(window);

Но в примере выше есть одна особенность. Код вне анонимной функции ничего не знает о переменной layout и не может взаимодействовать с ней.

Тут нам на помощь приходит такой подход как реализация фасадов или по другому - интерфейсов.

(function(window){
class YourOwnClass{/.../}; //методы указанные внутри класса являются интерфейсом для взаимодействия с классом. Для реализации приватных методов необходимо вынести функцию из класса и вызвать их в необходимом методе класса.
function privateMethodForYourOwnClass(){...}

document.addEventListener("DOMContentLoaded", () => {
window.layout = new YourOwnClass();
});
})(window);

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

Использование возможностей ES6

Для полноты картины следует так же упомянуть о возможностях организации кода в модули с использованием возможностей ES6. А именно export и import.

Обратите внимание что использование import и export требует наличия сборщика для разрешения зависимостей (webpack или babel + require.js)

Для создания модуля используем директиву export.

export class yourModuleClass {
//Тут код Вашего класса
}

Для использования Вашего модуля в другом файле используем директиву import

import { yourModuleClass } from "./yourModuleClass.js"

let module = new yourModuleClass();

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

На этом все, спасибо что прочли и надеюсь эта статья открыла для Вас что то новое

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