Как создать и использовать глобальную переменную в jQuery/JavaScript

Оффтоп javascript
1

Проблема с глобальной переменной

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

let counterVar = 0;
$(document).ready(function() {
  $('#actionButton').on('click', function() {
    if (counterVar === 0) {
      console.log('Первый вариант');
      counterVar = 1;
    } else if (counterVar === 1) {
      console.log('Второй вариант');
      counterVar = 2;
    } else {
      console.log('Третий вариант');
    }
  });
});
2

Попробуй объявить переменную вне функций и обращаться к ней из любого места. Мне часто приходилось так решать. Интересно, как обойдешься с ситуацией, если понадобится вернуть переменную к начальному значению? Что планируешь делать дальше?

3

За годы работы заметил, что проще объявлять переменные вне всех функций, как ты сделал. Главное – контролировать изменения, чтобы логика не запуталась. Например, если нужно вернуть значение к исходному состоянию, можно обернуть изменение переменной в отдельную функцию для сброса. Так легче отследить, где именно происходит модификация, и в будущем поддерживать код будет проще.

4

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

5

Интересное решение. У меня иногда используют window.counterVar для явного обращения к глобальной переменной. А как думаете, если проект станет крупнее, выйдет ли модульный подход или стоит оставить простой глобальный объект? Что пробовали для упрощения логики?

6

При росте проекта, даже если window.counterVar выглядит удобным, стоит переходить к модульной архитектуре. Использование IIFE или современного модуля ES6 помогает избежать случайных пересечений и сохраняет код чистым. Опыт подсказывает, что лучше сразу планировать структуру и минимизировать глобальное пространство, чтобы поддержка и отладка приложения были очевидными и простыми.