Рефакторинг Код JS

Question

Я надеялся, что кто-то может указать мне в сторону ссылки/статьи, которые помогут мне понять рефакторинг JavaScript. Я склонен использовать много вложенных операторов if/else и хочу научиться очищать код.

Любое объяснение того, как вы будете реорганизовать приведенный ниже код, будет очень помогать. Заранее спасибо!

var yourself = { 
    fibonacci : function(n) { 
     if (n === 0) { 
      return 0; 
     } 
     if (n === 1) { 
      return 1; 
     } 
     else { 
      return this.fibonacci(n - 1) + 
      this.fibonacci(n - 2); 
     } 
    } 
}; 

Answer 1

Для меня рефакторинг в основном зависит от стиля и удобочитаемости. Сначала я заметил, что первые две, если ветви выглядят почти одинаково. Неужели я могу их каким-то образом объединить? Поэтому я сделал это:

var yourself = { 
    fibonacci : function(n) { 
    if (n === 0 || n === 1) { 
     return n; 
    } 
    else { 
     return this.fibonacci(n - 1) + this.fibonacci(n - 2); 
    } 
    } 
}; 

Не слишком потрепанный. Что еще мы можем сделать? В ветках if на самом деле не нужны скобки. Это на самом деле опасная привычка, но я объясню позже.

var yourself = { 
    fibonacci : function(n) { 
    if (n === 0 || n === 1) 
     return n; 
    else 
     return this.fibonacci(n - 1) + this.fibonacci(n - 2); 
    } 
}; 

Теперь давайте сделаем экзотику и используем тернарный оператор!

var yourself = { 
    fibonacci : function(n) { 
    return (n === 0 || n === 1) ? n : this.fibonacci(n - 1) + this.fibonacci(n - 2); 
    } 
}; 

Вау, это довольно уродливо, не так ли? Трудно читать, все на одной линии, но так кратки.

Именно поэтому важно переоценивать каждый раз, когда вы рефакторинг.

Задайте себе вопрос: легко ли это понять? Могу ли я сразу сказать, что происходит? В этом последнем примере мы потеряли много отступов, которые полезны для выяснения общей структуры и потока вашего кода. Мы потеряли полезную визуальную информацию, предпочитая краткий код.

Я бы не пошел со второй попыткой рефакторинга. Удаление этих брекетов - плохая идея, потому что она работает только с однострочными ветвями. Если вы вернетесь позже и добавите вторую строку, но вы забудете добавить фигурные скобки, тогда при попытке запустить код вы получите очень загадочную ошибку.

Я думаю, что ваш оригинальный код на самом деле замечательный. Это кратким, понятным и понятным. Он буквально излагает определение функции фибоначчи: «Если это 0 или 1, верните это. В противном случае рекурсивно вычислите результат».

Рефакторинг исходит из опыта, от сгибания кода до тех пор, пока он не будет выглядеть правильно, и постоянно спрашивать себя, действительно ли это улучшение. Ценностная ясность прежде всего, а затем производительность, и будьте осторожны с лаконичностью.

Для некоторого дополнительного чтения, стиль руководства AirBnB также рассматривается: https://github.com/airbnb/javascript

Answer 2

Просто используйте кэш.

var yourself = { 
 
    cache : {}, 
 
    fibonacci : function(n) { 
 
     if (n === 0) { 
 
      return 0; 
 
     } 
 
     if (n === 1) { 
 
      return 1; 
 
     } 
 
     if(this.cache[n]){ 
 
      console.log('cache return'); 
 
      return this.cache[n]; 
 
     } 
 
     else { 
 
      this.cache[n] = this.fibonacci(n - 1) + 
 
      this.fibonacci(n - 2); 
 
      return this.cache[n]; 
 
     } 
 
    } 
 
}; 
 
console.log(
 
yourself.fibonacci(12) 
 
)

Answer 3

В этом случае, я думаю, что я хотел бы отметить, что возвращение возвращение (выход путь) из кода. Остальное должно быть ненужным.

var yourself = { 
    fibonacci : function(n) { 
    // Return quickly for the trivial cases 
    if (n < 2) { return n; } 
    // ...otherwise calculate it recursively 
    return this.fibonacci(n - 1) + this.fibonacci(n - 2); 
    } 
}; 

Хорошая книга Code Complete. Я не могу сказать вам, содержит ли последняя редакция JavaScript, но в нем подробно рассматриваются очистка кода и преимущество хорошего форматирования исходного кода.

Другие категорически не согласны с тем, что после инструкции if я не добавил жесткий возврат, и все же я нахожу этот короткий стиль кода «тест-и-выход», чтобы ускорить чтение.