Способы улучшения производительности этого кода javascript?

Question

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

Или, если вы заметили что-нибудь, что можно было бы сделать по-другому ... Спасибо!

function pic_form_function(form, nr, val) { 
    document.getElementById("image_to_delete").value=0; 
    var re = /\..+$/; 
    var extension = val.match(re); 
    if (extension==".jpg" || extension==".jpeg" || extension==".gif" || extension==".png" || extension==".bmp") { 
     if (nr==1){ 
      var ID_file1 = document.getElementById("pic_id_nr1").value; 
      window.parent.document.getElementById("pic1_filename").value=ID_file1+extension; 
      window.parent.document.getElementById("annonsera_nr_pics").value=1; 
      window.parent.document.getElementById("iframe_upload_pic").style.height="180px"; 
      document.getElementById("pic_target").style.height="160px"; 
      document.getElementById("pic_target").style.display="block"; 
      document.getElementById("remove_pic").value=0; 
      document.getElementById("extra_pic_checkbox").style.display="inline"; 
      document.getElementById("extra_pic_fnt").style.display="inline"; 
     } 
     else if (nr==2){ 
      var ID_file2 = document.getElementById("pic_id_nr2").value; 
      window.parent.document.getElementById("pic2_filename").value=ID_file2+extension; //Passing fileInputName to parent window... 
      window.parent.document.getElementById("annonsera_nr_pics").value=2; 
      document.getElementById("extrapic").value=2; 
      document.getElementById("pic_file3").disabled=false; 
     } 
     else if (nr==3){ 
      var ID_file3 = document.getElementById("pic_id_nr3").value; 
      window.parent.document.getElementById("annonsera_nr_pics").value=3; 
      window.parent.document.getElementById("pic3_filename").value=ID_file3+extension; 

      document.getElementById("extrapic").value=3; 
      document.getElementById("pic_file4").disabled=false; 
     } 
     else if (nr==4){ 
      var ID_file4 = document.getElementById("pic_id_nr4").value; 
      window.parent.document.getElementById("annonsera_nr_pics").value=4; 
      window.parent.document.getElementById("pic4_filename").value=ID_file4+extension; 

      document.getElementById("extrapic").value=4; 
      document.getElementById("pic_file5").disabled=false; 
     } 
     else if (nr==5){ 
      var ID_file5 = document.getElementById("pic_id_nr5").value; 
      window.parent.document.getElementById("annonsera_nr_pics").value=5; 
      window.parent.document.getElementById("pic5_filename").value=ID_file5+extension; 

      document.getElementById("extrapic").value=5; 
     } 
    } 
    if (extension!=".jpg" && extension!=".jpeg" && extension!=".gif" && extension!=".png" && extension!=".bmp") { 
     window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="block"; 
    } 
    else { 
     window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="none"; 
     form.submit(); 
    } 
} 

Answer 1

Если меня, я определю следующее сверху.

$=function(x){return document.getElementById(x);} 

заменит все document.getElementById на $ первый.

или лучше пользователь jQuery.

Answer 2

Не существует специальных вычислений, выполняемых рядом с элементами перемещения и присваивания их атрибутов некоторым значениям. Таким образом, код не делает много, чтобы попытаться улучшить его производительность.

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

Answer 3

О производительности:

Для извлечения файла расширение, которое вы можете использовать метод String.substring вместо RegExp, улучшение производительности будет незначительным, но я думаю, что он получает читаемость:

var extension = val.substring(val.lastIndexOf('.')); 

О коде:

1. Вы можете иметь только один ID_file переменные, объявленные в верхней части вашей функции, и использовать его в if блоках.

2. В else if блоки, где nr==2, 3 и 4 действительно похожи, и вы могли бы сделать то же самое для этих трех случаев:

//.. 
else if (nr >= 2 && nr <= 4){ 
    ID_file = document.getElementById("pic_id_nr"+nr).value; // point #1 assumed 
    window.parent.document.getElementById("pic"+nr+"_filename").value=ID_file+extension; 
    window.parent.document.getElementById("annonsera_nr_pics").value = nr; 
    document.getElementById("extrapic").value = nr; 
    document.getElementById("pic_file"+(+nr+1)).disabled=false; 
} 

О читаемости:

Вы можете определить короткие строки в com пн и многословным вызовы функций в начале, как S.Mark также предлагает:

var el = document.getElementById, 
    parentEl = window.parent.document.getElementById; 

Answer 4

• Продолжая то, что CMS сделал с кодом повторения, вы можете реорганизовывать общий код вне последовательности else if блоков.
• Заявление было сделано для замены последовательности if с.
• Вместо приведенных выше двух предложений вы можете определить, какие функции выполняют для одних и тех же задач для более читаемой реализации.
• Если вы продолжаете использовать регулярные выражения (я лично считаю их очень читаемыми), помните, что match возвращает массив.
• Кроме того, .+ будет жадно соответствовать всем символам после первого периода. Лучше соответствовать только периодам с [^.]+.

• Вместо длинной последовательности сравнения строк, вы можете использовать объекты как ассоциативные массивы:

  var imageExtensions = {'.jpg': 1, '.jpeg': 1, '.gif': 1, '.png': 1, '.bmp': 1}; 
  if (imageExtensions[extension]) { 
  

• Последнее if ... else ... ненужно, учитывая, что проверки условия для отрицания условия в первом if , Просто переместите блок else в конец первого if и поверните последние if (...) на else.

• Лично я считаю, что короткий код обработки ошибок читается при размещении рядом с оператором if, который обнаружил ошибку, а не после длинного блока, обрабатывающего случай без ошибок. После предыдущего рефактора, давайте поменяем блок if блоком else и отрицаем условное.

Принимая все вместе выше, мы получаем:

function pic_form_function(form, nr, val) { 
    document.getElementById("image_to_delete").value=0; 
    var extension = val.match(/\.[^.]+$/); 
    if (extension) { 
     extension = extension[0]; 
    } 
    var imageExtensions = {'.jpg': 1, '.jpeg': 1, '.gif': 1, '.png': 1, '.bmp': 1}; 
    if (! imageExtensions[extension]) { 
     window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="block"; 
    } else { 
     var ID_file = document.getElementById("pic_id_nr" + nr).value; 
     window.parent.document.getElementById("pic"+nr+"_filename").value=ID_file+extension; 
     window.parent.document.getElementById("annonsera_nr_pics").value=nr; 

     switch (nr) { 
     case 1: 
      window.parent.document.getElementById("iframe_upload_pic").style.height="180px"; 
      document.getElementById("pic_target").style.height="160px"; 
      document.getElementById("pic_target").style.display="block"; 
      document.getElementById("remove_pic").value=0; 
      document.getElementById("extra_pic_checkbox").style.display="inline"; 
      document.getElementById("extra_pic_fnt").style.display="inline"; 
      break; 
     case 2: // FALLTHRU 
     case 3: // FALLTHRU 
     case 4: 
      document.getElementById("pic_file"+nr).disabled=false; 
      // FALLTHRU 
     case 5: 
      document.getElementById("extrapic").value=nr; 
      break; 
     } 
     window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="none"; 
     form.submit(); 
    } 
} 

, который короче, но может быть более удобным для чтения.

Обратите внимание, что если $ обертка определен в «window.parent», вы должны быть в состоянии назвать его как window.parent.$ у ребенка:

window.parent.$("annonsera_imagenotvalid_error").style.display="none"; 

Answer 5

Вы должны кэшировать Dóm Lookups например

var pic_target = document.getElementById("pic_target"); 

Затем вы можете использовать эту переменную для применения стиля, и только один раз поиск домена выполняется. Я думаю, что это ключевая вещь для ускорения js