Подставить список переменных в фрагмент кода - PullRequest
Новая
       26

Подставить список переменных в фрагмент кода

1 голос
/ 10 апреля 2020

Я на самом деле не js эксперт, поэтому у меня следующая ситуация: код ниже рисует спарклайны (jQuery спарклайны), однако у меня есть более 400 переменных для этого, и я не думаю, что это разумно повторить этот код 400 раз, как заменить имя переменной (var1) в этом коде на переменную, содержащую все имена? 

 $('#sparkline_var1_x').sparkline(var1, {
    type: "bar",
barColor: '#fc3944',
        tooltipFormat: '{{offset:offset}} {{value}}',
tooltipValueLookups: {
        'offset': labels
    }
});

например, у меня есть переменная с именем var_all и содержит var1, var2, ..., var400, как его заменить таким образом 

 $('#sparkline_$var_all_x').sparkline($var_all, {
    type: "bar",
barColor: '#fc3944',
        tooltipFormat: '{{offset:offset}} {{value}}',
tooltipValueLookups: {
        'offset': labels
    }
});

Так что это просто пишется один раз. Теперь вышеприведенный код может не иметь смысла для JS разработчика, но просто чтобы понять концепцию.

1 Ответ

0 голосов
/ 10 апреля 2020

Превратите ваш var_all в массив, содержащий переменные var#, например: 

const varAll = [var1, var2, var3, ...]

(желательно без сохранения отдельных var1 переменных, они повторяются)

Затем выполните итерацию по массиву, используя значение и индекс, чтобы определить, какой #sparkline_var1_x использовать: 

varAll.forEach((val, i) => {
  $(`#sparkline_var${i + i}_x`).sparkline(val, {
    type: "bar",
      barColor: '#fc3944',
      tooltipFormat: '{{offset:offset}} {{value}}',
      tooltipValueLookups: {
        'offset': labels
      }
  });
});

Но числовые c -индексированные идентификаторы - довольно неприятный запах кода. Элементы с идентификатором должны указывать абсолютно уникальный в документе, который существует только один раз. Попробуйте вместо этого использовать классы, например sparkline: 

const sparklines = $('.sparklines');
varAll.forEach((val, i) => {
  $(sparklines[i]).sparkline(val, {
    type: "bar",
      barColor: '#fc3944',
      tooltipFormat: '{{offset:offset}} {{value}}',
      tooltipValueLookups: {
        'offset': labels
      }
  });
});
...