Как работать с состояниями в приложений JavaScript?

Question

[Андрей]

Здравствуйте, помогите пожалуйста разобраться новичку, как правильно работать с состояниями приложения, я пишу приложения в нем есть 5 чекбоксов, если чекбокс выбран объект возвращает on иначе null.

В зависимости от того какая комбинация чекбоксов выбрана идет загрузка файла например:

if( чек1 === null && чек2 === null && чек3 === null && cчек4 === null &&  чек5 === null ) {
    все чекбоксы null загружаем дифолтный файл
}

Проблема появляется кода нужно отметить например первые 3 чекбокса или 3 и 4 как не хардкодить логику и не копипастить код?

Буду рад любой помощи ссылкам.

Comments

[Stalker_RED]

Опишите немного подробнее. Как вы определяете, что нужно отметить 3 и 4? Эти данные приходят откуда-то или хранятся? Что там про файл, совсем непонятно.

[Андрей]

Здравствуйте, спасибо за проявлены интерес, опишу поподробнее, чекбоксы отмечаются из админки, и в js я получаю объект вида const my_options = { "чек1":"on", "чек2":null," чек3":null," чек4":null }; итд дальше при помощи if esle строю условия и подгружаю контент из файлов при помощи $( "#new" ).load( "/resources/load.html" );

[akass]

Андрей, Почему бы просто по отдельности не подгружать?

Answer 1

[Сергей Соколов]

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

0000 0010
   │ │││┕╼ бит 0, чекбокс 0
   │ ││└── бит 1, чекбокс 1
   │ │└─── бит 2, чекбокс 2
   │ └──── бит 3, чекбокс 3
   └────── бит 4, чекбокс 4

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

switch( bitmap) {
  case 0: // все выключены
    // загрузить что-то там
    break;
  case 1<<3: // включен только 3-й бит
    // загрузить что-то для 3-го чекбокса
    break;
  case 28: // вкл. 3, 4 и 5-й
  // ...
}

Comments

[Андрей]

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

[Сергей Соколов]

Андрей, давайте тогда от результата: как вы хотите работать без условий? Нарисуйте идеальный мир )