Объект или массив или оба

Question

У меня следующий код, который нужно упростить.

MenusDeroulants (string, html_element) - это функция, которую я использую для 11 пар, и которая дает мне следующее:

        MenusDeroulants("GetListeCatDdeurs", $("#cbx_Cat_Ddeur"));
        MenusDeroulants("GetListeCommunautes", $("#cbx_Communaute"));
        MenusDeroulants("GetListeOccupations", $("#cbx_Occupation"));
        MenusDeroulants("GetListeProvinces", $("#cbx_Province"));
        MenusDeroulants("GetListeScolarites", $("#cbx_Scolarite"));
        MenusDeroulants("GetListeSexes", $("#cbx_Sexe"));
        MenusDeroulants("GetListeSituations_Matrimoniales", $("#cbx_SituationMatrimoniale"));
        MenusDeroulants("GetListeSource_De_Revenus", $("#cbx_SrceRevenu"));
        MenusDeroulants("GetListeStatuts_Legaux", $("#cbx_StatutLegal"));
        MenusDeroulants("GetListeTranche_Revenu", $("#cbx_TrancheRevenu"));
        MenusDeroulants("GetListeVilles", $("#cbx_Ville"));

Есть ли способ упростить это? Мое понимание массивов и объектов настолько ограничено, что я не мог найти способ создать цикл.

Answer 1

Я бы сказал, просто сохраните значения как data- * атрибуты на элементах и ​​получите их динамически с помощью набора данных или data () . Присвойте каждому элементу общий идентификатор, например, класс, и просто переберите эту коллекцию.

HTML

<select id="cbx_Cat_Ddeur" class="dropdowns" data-method="GetListeCatDdeurs"></select>

JS

$('.dropdowns').each((index,element)={
  MenusDeroulants(element);
});

function MenusDeroulants(element){
  var method = element.dataset['method'];
  //or
  var method = $(element).data('method');
  /* do the rest of work */
}

Таким образом, вам не нужно копаться в куче других JS, если что-либо, например, строковое значение или id элемента изменяется. Нет необходимости хранить статические массивы или объекты и т. Д.

Answer 2

Один из способов сделать это:

let params = [
  {method: "GetListeCatDdeurs", elem: "#cbx_Cat_Ddeur"},
  {method: "GetListeCommunautes", elem: "#cbx_Communaute"},
  // etc...
];
for (p of params)
  MenusDeroulants(p.method, $(p.elem));

Answer 3

Вы можете создать массив объектов следующим образом:

var arr = [
  { 'fn': 'GetListeCatDdeurs', 'div': 'cbx_Cat_Ddeur' },
  { 'fn': 'GetListeCommunautes', 'div': 'cbx_Communaute' },
  { 'fn': 'GetListeOccupations', 'div': 'cbx_Occupation' } // continue...
];

arr.forEach(x => {
  MenusDeroulants(x.fn, $('#' + x.div));
});

Или вы можете просто создать массив имен div. Еще проще, если все эти div - дети одного div. Затем сгенерируйте GetListeCatDdeurs через RegEx. Например:

var arr = [
  'cbx_Cat_Ddeur',
  'cbx_Communaute',
  'cbx_Occupation', // etc...
];

arr.forEach(x => {
  var fn = 'GetListe' + x.slice(x.indexOf('_') + 1).replace(/_/g, '') + 's';
  MenusDeroulants(fn, $('#' + x));
});

Answer 4

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

const list = [
  { string: 'GetListeCatDdeurs',   selector: '#cbx_Cat_Ddeur' },
  { string: 'GetListeCommunautes', selector: '#cbx_Communaute' },
  { string: 'GetListeOccupations', selector: '#cbx_Occupation' },
  // etc
];
list.forEach(({ string, selector }) => {
  MenusDeroulants(string, $(selector));
});

Не уверен, какими будут все вызовы MenusDeroulants, но если первый аргумент всегда начинается с GetListe, а селектор всегда является идентификатором, начинающимся с cbx_, вы можете меньше повторяться, добавляя эти общие подстроки во время цикла forEach:

const list = [
  { subString: 'CatDdeurs',   subSelector: 'Cat_Ddeur' },
  { subString: 'Communautes', subSelector: 'Communaute' },
  { subString: 'Occupations', subSelector: 'Occupation' },
  // etc
];
list.forEach(({ subString, subSelector}) => {
  MenusDeroulants('GetListe' + subString, $('#cbx_' + subSelector));
});