Вряд ли линия моего кода выходит идеально первый раз я пишу это.Ну, большую часть времени … Часть времени … Хм, вряд ли когда-либо.Правда в том, что я провожу больше времени, чтобы гоняться за мои собственные ошибки программирования глупо, чем я хотел бы признать.Вот почему я использовать статические анализаторы в каждом файле JavaScript пишу .

Статические анализаторы посмотреть на код и найти проблемы прежде, чем вы запустите его.Они делают простые проверки, как соблюдение синтаксиса (например, вкладки вместо пробелов), и более целостные проверяет, как убедившись, что ваши функции не являются слишком сложными.Статические анализаторы также найти ошибки, которые вы не можете найти с testing, как экземпляры ==, когда вы имеете в виду === .

В больших проектах и ​​на больших команд, вы будете счастливы иметь немного помочь в поиске этих “простых” ошибки, которые оказываются намного меньше, чем просто они выглядели .

JSLint, JSHint и закрытие Compiler

У вас есть три основных варианта для статических анализаторов в мире JavaScript: JSLint __13 | | 1__12 , JSHint ² и Закрытие Compiler ³ .

JSLint

JSLint был первый статический анализатор для JavaScript.Вы можете запустить его на официальном website __35 | | 4__12 или использование один из wrappers __41 | | 5__12 запустить его на ваших локальных файлов.JSLint находит много полезных ошибок, но это очень жесткая.Вот хороший пример:

var s = 'mystring';
for (var i = 0; i < s.length; i++) {
  console.log(s.charAt(i));
}

Unexpected '++'.
Move 'var' declarations to the top of the function.

var s = 'mystring';
var i;
for (i = 0; i < s.length; i = i + 1) {
  console.log(s.charAt(i));
}

Я ценю, где JSLint приходит от, но это просто слишком строгим для меня.Это было слишком жестким для Антон Kovalyov ⁶ , так что он создал JSHint .

JSHint

JSHint работает аналогично JSLint, но это написано на вершине Node.js __63 | | 7__12 , и это гораздо более гибким.JSHint имеет длинный список options __69 | | 8__12 , что позволяет создавать пользовательские проверки по Написаниесобственный reporter ⁹ .

Вы можете запустить JSHint от website ¹⁰ , но большую часть времени вы установки JSHint как местные командной строки tool __15 | 11 использованием узла.js.После установки JSHint, вы можете запустить его против ваших файлов с командой вроде этого:

jshint test.js

JSHint также имеет плагины для популярных текстовых редакторов, так что вы можете запускать JSHint пока вы кодирования .

Закрытие Compiler

Закрытие компилятора, от Google, это другая порода.Как и предполагает название, это компилятор, а также проверки.Это написано в Java и на основе Rhino __27 | 12 | __4 анализатора от Mozilla.Закрытие компилятора имеет простой режим, чтобы сделать основную проверку кода, но он также имеет более продвинутые режимы, чтобы сделать лишнюю проверку соблюдения специальных и деклараций типа .

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

Google делает простую версию своего компилятора доступную на Web __37 | 13 , но большую часть времени вы будете хотеть скачать Закрытие Compiler ¹⁴ и запустить его локально .

Закрытие компилятора выведет список файлов в один файл свернутом после проверки их код.Вы можете запустить его, как, что после того как вы скачали compiler.jar файл .

java -jar compiler.jar --js_output_file compress.js --js test1.js --js test2.js

Выбор подходящего Checker

В моих проектов, я объединить Closure Compiler с JSHint.Закрытие компилятора делает минимизацию и основную проверку, в то время как JSHint обрабатывает более сложного анализа кода.Два хорошо работают вместе, и каждый охватывает несколько областей, которые другой нет.Кроме того, я могу использовать возможности расширения на JSHint написать свои шашки.Один из распространенных проверки я пишу проверок для конкретных функций, которые я не хочу, как вызов функции, которые я не хочу, чтобы в моем проекте .

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

Эта статья использует JSHint для большинства примеров, но Closure Compiler будет производить подобные предупреждения .

== === Сравнении

JavaScript является Динамически typed ¹⁵ язык.Вы не должны объявить типы, когда вы кодирования, но они существуют во время выполнения.JavaScript предоставляет два сравнения операторам справиться с этими динамическими типами: == и ===.Давайте посмотрим на пример .

var n = 123;
var s = '123';

if (n == s) {
  alert('The variables were equal');
}

if (n === s) {
  alert('The variables were identical');
}

== оператор сравнивает значения двух объектов.Он преобразует объекты и сравнивает их отдельно от их типов.=== оператор сравнивает типы объектов и ценностей.В этом случае, первый if блок будет всплывающее предупреждение, а второй if Блок не будет — потому n 43 ~ и | имеют одинаковое значение, но не такой же тип .

== компаратора реликвия из корней языка C в JavaScript.С его помощью почти всегда ошибка: Сравнение значений отдельно от типов редко, что разработчик значит делать.В действительности, число “сто двадцать три” отличается от строки Эти операторы легко опечатки и даже легче неправильно .__ 6 “раз, два, три.” |

Проверить этот код с JSHint, и вы получите это:

test.js: line 9, col 12, Expected '===' and instead saw '=='.

Неопределенные переменные и конце Definitions

Давайте начнем с простой код:

function test() {
  var myVar = 'Hello, World';
  console.log(myvar);
}

Смотреть ошибка?Я делаю эту ошибку все время.Выполните этот код, и вы получите сообщение об ошибке:

ReferenceError: myvar is not defined

Давайте сделаем проблема немного сложнее определить:

function test() {
  myVar = 'Hello, World';
  console.log(myVar);
}

Запуск это, и вы будете получать:

Hello, World

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

В первом случае, JSHint скажу вам следующее:

test.js: line 3, col 17, 'myvar' is not defined.

Во втором случае, он скажет вам:

test.js: line 2, col 5, 'myVar' is not defined.
test.js: line 3, col 17, 'myVar' is not defined.

Первый случай спасает вас от ошибки во время выполнения.Вы не должны испытать ваше приложение — JSHint найдете ошибку для вас.Второй случай еще хуже, поскольку тестирование не найдете ошибку .

Проблема с втором случае коварно тонким и сложным.Переменная myVar Сейчас сбежал из своей области видимости функции и был hoisted __34 | 16 в глобальном масштабе для всей страницы.Это означает, что она будет существовать и иметь значение Hello, World после test функция запуска.Это называется “глобального загрязнения область.”

myVar переменная будет существовать для каждого другой функции, что бежит за test функцию.Запустите следующий код после того как вы запустите test функцию:

console.log('myVar: ' + myVar);

Вы все равно получите Hello, World.myVar переменная торчать коде как форму, в рез� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров