Определение функций 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() {

};