architecture.md

1. Модульность - наше все!

   Обязательно дробить приложение на разные модули, даже если сайт - просто статичный контент с несколькими обработчиками событий, которые вешаются через jquery.
   Для импорта модулей друг в друга использовать webpack, если проект совсем простой, можно обойтись созданием одного (!) глобального объекта и у него свойствами сохранять разные модули.
   Для каждого модуля - только один файл. Без использования webpack и других сборщиков сами заботьтесь о том, чтобы не загрязнять глобальную область видимости (оборачивать все содержимое каждого файла в самовызывающуюся функцию).
   В рамках одного модуля описывать только схожий функционал, который объединен смыслом. Это называется связность. Обратная сторона медали - зацепление, когда модули друг от друга сильно зависят - этого как раз надо избегать. То есть общий принцип - модули надо разбить так, чтобы внутри каждого модуля была максимальная схожесть области работы, а между модулями было максимальное различие. Например, в статистике сегмантация выполняется по таким же принципам, все группы должны состоять из максимально похожих элементов и при этом максимально отличаться друг от друга :).

2. В рамках модуля четко делить на слои и не мешать логику работы с DOM и работу с данными (например, ajax-запросы);

   Вообще всю работу с самими данными максимально отделять от работы с DOM и обработке событий пользователя (клики, сабмиты и тд).
   Желательно для каждого приложения более менее формализовать структуру модуля, описать ее в конкретном виде для всех проектов невозможно, так как что-то пишется на React, что-то на React+Redux, а что-то на простом jquery. Для последнего этот пункт наиболее важен, но при этом наиболее неопределен.

3. Избегать мутаций одной переменной сразу в нескольких функциях;

   Пример плохого кода:

    var box = {};
   
    function addBall(box) {
      box.ball = {radius: 2};
    }
   
    function addFood(box) {
      box.food = {carrot: 4};
    }
   
    function addShoes(box) {
      box.shoes = {sneakers: 2};
    }
   
    addBall(box);
    addFood(box);
    addShoes(box);

   Из-за таких действий область использования переменной становится слишком большой и тяжело понять, какая именно функция и когда изменила переменную. Когда произойдет ошибка в 10-ой функции, будет непонятно почему box содержит 5 пар кроссовок и 15 морковок.
   Используйте чистые функции, пересоздавайте объекты, а не мутируйте их, а еще лучше формализуйте все возможности изменить ваш объект, как это делает Redux для переменной состояния приложения.

4. В js нет публичных и частных свойств, поэтому частные методы просто делать с префиксами "_" (нижнее подчеркивание);

   class Person {
     constructor (name) {
      this.name = name;
     }
   
      public () {
        console.log('Call me from the outer modules');
      }
   
      _private () {
        console.log('Call me only from the class Person methods, for example from public');
      }
   }

5. При написании класса все публичные методы объявляйте первыми, причем самым первым должен идти конструктор, все приватные методы группируйте по смыслу внизу класса;