Namespaces в JavaScript. Ставим точку в вопросе

Kate · 13 Окт 2021

Развитие языка javascript переносит выполнение кодов на распределенную сеть пользователей и снимает нагрузку с сервера. Это разумный подход. Введение в js ключевых слов class, extends и static дало возможность легко моделировать классами и объектами предметную область проекта. Это замечательно. Следующий вопрос, который необходимо рассмотреть при возрастании сложности js-проекта - это пространство имен. Именно оно позволяет избежать конфликтов с ворохом разнородных js-скриптов. Как показывает практика с этим вопросом почему-то возникли большие сложности. Смотрим ссылки ниже:

https://support.qbpro.ru/index.php?title=Базовые_Namespace_паттерны_JavaScript

https://habr.com/ru/post/527610/

https://drbrain.ru/articles/js-namespaces/

https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript

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

Есть еще и стандартная схема с использованием import, export модулей:

https://learn.javascript.ru/modules-intro

https://habr.com/ru/company/domclick/blog/532084/

За модулями конечно будущее, но с ними возникает пара вопросов - это локальное их использование без сервера (CORS policy), а главное поддержка их браузерами все еще не завершена (многопоточно web-workers не обработают модуль, старые браузеры тоже не понимают):

https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Modules

Многопоточный веб-worker по-своему захватывает скрипты:

https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts

Ладно, учтем комментарии и выберем наиболее простую схему (паттерн) для работы с пространством имен, так чтобы многопоточные workers были довольны и интернет работал нормально. Для улучшенного понимания остановимся на варианте где количество стрелочек, скобочек и прочих засоряющих человеческое восприятие закорючек минимально.

/**
* @namespace namespaceOne
*/
const namespaceOne = new function(){
class First {
//статическое свойство
static className = "First";
constructor() {
console.log("class First consructed");
}

print() {
console.log("First print");
}

//статическая функция
static printStatic() {
console.log(First.className + " static print ");
}
}

//наследование
class Second extends First {
constructor() {
super();
Second.className = "Second";
console.log("class Second consructed");
}
//полиморфизм
print() {
console.log(Second.className + " print");
}
}

class Third {
className;
encapsulation;
constructor() {
this.className = "Third";
this.encapsulation = new Second(); //инкапсуляция
console.log("class Third consructed");
}
print() {
console.log("Third print");
}
}
console.log("namespaceOne code done");
//экспорт пространства имен
return {First: First, Second: Second, Third: Third};
};

/**
* @namespace namespaceTwo
*/
const namespaceTwo = new function(){
class First {
constructor() {
console.log("other class First consructed");
}

print() {
console.log("other First print");
}
}
//экспорт пространства имен
return {First: First};
};

/**
* @namespace namespaceThree
*/
const namespaceThree = new function(){
//импорт пространства имен
namespaceOne.First.printStatic();
let second = new namespaceOne.Second();
second.print();

let ThirdClass = namespaceOne.Third;
let third = new ThirdClass();
third.print();

let first1 = new namespaceOne.First();
let first2 = new namespaceTwo.First();
first1.print();
first2.print();
};
Теперь вы можете смело добавлять свой код в любой проект, в любое место образно говоря просто взяв его {в фигурные скобки} и все - секундное дело. С большой вероятностью конфликтов у вас не возникнет.

Минус такого решения только один, надо добавлять комментарии, что вот такие конструкции: const namespaceYou = new function(){...} - являются namespace, а не чудной функцией.