Ужасные Ошибки JavaScript, чтобы избежать с статический анализатор кода

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

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

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

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

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

JSLint

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

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

JSLint покажет две ошибки для этого кода:

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

Первая проблема заключается в декларации переменной i в начало цикла.JSLint также не нравится ++ оператор в конце декларации цикла.Она хочет код выглядит следующим образом:

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

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

JSHint

JSHint работает аналогично JSLint, но это написано на вершине Node.js 7 , и это гораздо более гибким.JSHint имеет длинный список options 8 , что позволяет создавать пользовательские проверки от написать собственную reporter 9 .

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

jshint test.js

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

Закрытие Compiler

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

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

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

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

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

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

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

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

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

== Versus ===

JavaScript является динамически typed 15 язык.Вы не должны объявлять типы, когда вы кодирования, но они существуют во время выполнения.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 и s имеют одинаковое значение, но не тем же шрифтом .

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

Проверить этот код с 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 16 в глобальную область видимости для всей страницы.Это означает, что она будет существовать и иметь значение Hello, World после test функция запуска.Это называется “глобального загрязнения сфера.”

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

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

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

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

Comments are closed.