Определение функций JavaScript

В моем проекте (только в контексте браузера) я хочу использовать инструмент качества кода JS. Я пробовал как jslint, так и eslint. Я хочу, чтобы linter помог мне сделать мой код чистым, ясным, защищенным от ошибок и улучшить его общее качество. То, что я не хочу делать, это то, что я не хочу писать какие-то грязные хаки или использовать плохие методы, чтобы сделать литер счастливым.

Меня беспокоит только одна проблема. Оба они сообщили о проблеме, что я использую функцию до ее определения. Очевидно, что в следующем фрагменте кода bar не будет вызываться перед его определением.

function foo() {
    bar();
}

function bar() {

}

foo();

В этом простейшем сценарии я могу просто переместить bar до foo. Но бывают случаи, когда это просто невозможно. Первая функция использует вторую, вторая использует третью, а третью использует первую.

Похоже, я могу сделать линт счастливым, объявив все функции перед их определениями, как это.

var foo;

var bar;

foo = function() {
    bar();
};

bar = function() {

};

foo();

Вопросы:

  • Является ли первый фрагмент кода сломанным? Думаю - не.
  • Является ли первый фрагмент кода неприемлемым? Думаю - может быть.
  • Хорошо ли организовать код, подобный второму фрагменту (объявить функции перед их определением)?
  • Если yes, я должен придерживаться этой практики, не так ли?
  • Если no, что является хорошей практикой в ​​отношении этой проблемы?
  • Является ли эта ошибка-линтер заслуживающим внимания, или я должен просто отключить ее?

Ответы

Ответ 1

Нет, фрагменты не нарушаются, но не лучше.

var foo = function(){

}

var bar = function(){
  foo();
}

bar();

фактически станет:

var foo, bar;

foo = function(){

}

bar = function(){
  foo();
}

bar();

Следовательно, вы должны определить все переменные и функции в начале области. JavaScript использует Hoisting  который эффективно перемещает все объявления для переменных и функций в верхнюю часть области.

Выполнение этого самостоятельно считается лучшей практикой и повышает удобочитаемость.

Eslint будет проверять правило vars-on-top, которое определено и документировано здесь

https://www.reddit.com/r/learnjavascript/comments/3cq24a/crockford_says_hoisted_variable_declarations_are/ https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Ответ 2

  • Является ли первый фрагмент кода сломанным? нет, это не сломано.
  • Является ли первый фрагмент кода неприемлемым? Нет.
  • Хорошо ли организовать код, подобный второму фрагменту (объявить функции перед их определением)? Нет, есть много других хороших способов.
  • Если да, я должен придерживаться этой практики, не так ли? Да
  • Если это не хорошая практика в отношении этой проблемы? есть много хороших образцов, которые вы можете отслеживать.
  • Следует ли обратить внимание на эту ошибку линтера или я просто отключил ее? Хорошо обращать внимание на то, чтобы ваш код был чистым.

Всегда используйте строгий режим. "use strict"

У вас есть функции внутри области, такие как IIFE, для отсутствия глобальных переменных

читайте больше о IIFE

function foo() {
    bar();
};

function bar() {

};