Лучшие десять вещей, которые начинающие должны знать о JavaScript

Автор оригинала: James Jensen.

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

Вступление

Без сомнения, в IT-JavaScript абсолютно необходим для любого веб-разработчика. Прошли те дни, когда вы можете получить с небольшим количеством CSS и HTML. К счастью, у него есть так мало правил, которые он умерл, чтобы начать:

alert("Hello World."); // Shows the user "Hello World." in a dialog

Это оно! Многие простые задачи могут быть достигнуты только с несколькими строками кода. Там нет необходимости импортировать пакеты или объявлять пространства имен. Вы пишете какой-нибудь код, и он работает. Тем не менее, самому отсутствию структуры, которая дает JavaScript его низкий барьер для входа, также позволяет начать разработчикам писать неструктурированный, хрупкий код, не осознавая его. Как растет приложение, этот неструктурированный код вернется, чтобы преследовать вас в форме неожиданных, сложных ошибок.

В этом руководстве я планирую исправить некоторые общие заблуждения и ошибки, которые вызывают чрезмерную боль для начала разработчиков JavaScript. Вот несколько вещей каждый начальный JavaScript Developer должен знать:

1. Вы можете добавить свойства почти на все

JavaScript имеет только три примитивных типа данных: строка, номер и логический. Все остальное (если это не null или undefined ) может иметь добавленные свойства. Примечание: хотя Строка является примитивным типом ( «Привет» ), есть еще одно воплощение Строка В JavaScript, который является объектом ( Новая строка («Привет») ). Смотрите здесь для деталей. Вы, возможно, видели что-то вроде этого:

var a = {}; // create a new object 
a.b = 'hello';

В приведенном выше коде А.Б ничего не имел в виду, пока не установил ее значение. Сейчас А имеет свойство под названием B Отказ Но подожди, он получает времен.

var a = []; // create an array 
a.b = 'hello';

Отлично, так что теперь у вас есть пустой массив, с недвижимостью на нем называется B Отказ Осторожно: только потому, что вы может Поставить свойства на массивах не означает, что вы Должен Отказ Как я буду обсуждать позже, вышеуказанный код изменит поведение для ... в петли на этом массиве. Как насчет этого?

var a = function() {}; 
a.b = 'hello';

Да это правильно. А сейчас a Функция , с собственностью. Который приводит меня к моей следующей точке.

2. Функции являются объектами

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

function doIfTrue(isTrue, whatToDo)
{
  if(isTrue)
    whatToDo();
}
doIfTrue(true, function() {alert('hello');}); //  alerts "world"
doIfTrue(false, function() {alert('world');}); // does nothing

Функция выше относится к Whattodo Параметр как функция. Этот вид шаблона позволяет разработчикам делать некоторые очень мощные вещи, такие как настройка обработчиков событий с очень небольшим количеством кода.

3. Для … в петли итерации по именам свойств, а не ценности

Разработчики, прибывающие из фона Java или C #, используются для так называемых циклов «Foreach», которые повторяют все значения в коллекции. JavaScript не (в настоящее время) имеет эквивалентный цикл. Ближайшая вещь, «для в цикле», имеет некоторые важные различия:

var arr = ['a', 'b', 'c']; 
for(var i in arr) { 
  alert(i); // 0, 1, 2 
  alert(arr[i]); // 'a', 'b', 'c' 
}

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

Почему JavaScript делает это? Основная причина в том, что для ... в Не было сделано для массивов: это было сделано для объектов, которые имеют свойства на них:

var pairs = {'a': 'apple', 'b': 'banana'};
for(var key in pairs) {
  alert(key);        // 'a', 'b'
  alert(pairs[key]); // 'apple', 'banana'
}

Осторожно: потому что для ... в Структуру илет на свойства на объекте, вы получите странное поведение, если вы используете цикл на массиве, который имеет дополнительные свойства, добавленные к нему, по этой причине вы должны Избегайте использования для ... в Петли на массивах -Используйте простым для Петли вместо этого. Они в любом случае быстрее.

Примечание: Ecmascript 6 представит для ... из петли, которые повторяются непосредственно за ценности.

4. Переменная навес

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

var message = "hello world"; 
alert(message);

Если вышеуказанный код работает в браузере, он создаст новое глобальное свойство на окно Объект, называемый сообщение Отказ Это означает, что если какой-либо другой код на вашем сайте также имеет аналогичную объявленную переменную, называемую сообщение, они будут связываться друг на друга.

В JavaScript, Все переменные, объявленные с var Ключевое слово «ключевое слово» Отказ Это означает, что если вы хотите убедиться, что ваши переменные не глобальные, вы должны поставить их в функцию, а затем вызывать эту функцию.

(function() { 
  var message = "hello world"; 
  alert(message); 
})();

Разработчики с фоном на других языках на основе синтаксиса C используются для переменных, выделенных в курсовых скобках ( {} ). В JavaScript переменные объявлены с var «поднимаются» на вершину функции, в которой они объявлены. Этот код:

function sayHi() { 
  if(true) { 
    var s = "hi"; 
  } 
  alert(s); // alert("hi") -- `s` is still within scope. }

… такой же, как это:

function sayHi() { 
  var s; 
  if(true) { 
    s = "hi"; 
  } 
  alert(s); 
}

Это также означает, что если вы обратитесь к переменной за пределами объема вашей функции, вы будете использовать значение этой переменной На данный момент код работает Не в данный момент ваша функция создана. Это все время отслеживает новичков:

 var thingsToDo = [];
 for(var i = 0; i < 2; i++) {
   thingsToDo.push(function() {alert('hello ' + i);}); 
 }
 for(var k in thingsToDo) {
   thingsToDo[k]();               // alerts "hello 2" twice.
 }

Помните, что переменная Я Начинается как 0 значение, но к тому времени, когда он вызывается (во втором цикле) его значение было увеличено на 2 Отказ Чтобы захватить значение Я Когда вы создаете функцию, вам необходимо создать другую функцию:

var thingsToDo = [];
function createHelloAlert(v) {
  // `v` only exists within this method call.
  return function() {alert('hello ' + v;} 
}
for(var i = 0; i < 2; i++) {
  thingsToDo.push(createHelloAlert(i)); 
}
for(var k in thingsToDo) {
  thingsToDo[k]();  // alerts "hello 0", then "hello 1".
}

Примечание: ECMAScript 6 представит Пусть Ключевое слово, которое позволит вам объявить переменную, находящуюся на колесо. Это известно как лексическое определение навеса.

5. Переменные, которые не объявлены явно, могут быть глобальными

Предположим, вы не забыли обернуть свой код в функции, но забыл var ключевое слово:

(function() { 
  message = "hello world"; 
  alert(message); 
})();

Когда вы устанавливаете значение переменной, и у вас нет заявил Это, чтобы быть переменным для текущей области функции через var Ключевое слово, JavaScript предполагает, что вы имеете в виду This.propertyname Отказ Так что вышеуказанный код такой же, как это:

(function() { 
  this.message = "hello world"; 
  alert(this.message); 
})();

Если вы застройщика Java, вы говорите себе: «Что это? Нет, правда. Что это это ?» На других языках это означает, что экземпляр класса, на который вы смотрите, но в JavaScript это означает, что объект, на которую вызывалась ваша функция. Если вы сделали это:

var a = {
  foo: function() {
    this.message = "hello world";
  }
};
a.foo(); // `a.foo()` means foo's `this` is `a`.
alert(a.message); // outputs "hello world"

… затем звонить Foo Метод ставит значение на А ‘s сообщение имущество. Но поскольку наш оригинальный фрагмент кода вызывает функцию, которая ничего не имеет, это дается отблеская стоимость окно Отказ Вы в конечном итоге создаете другую глобальную переменную, просто забыв var ключевое слово.

6. Поймите, как работает. Прототип работает

JavaScript использует специальный Прототип Свойство для решения проблем, которые другие языки используют классы для решения. Рассмотрим следующее:

function Person(first, last)
{
  this.first = first;
  this.last = last;
}
var john = new Person("John", "Doe");
var mary = new Person("Mary", "Deer");
Person.prototype.full = function() {return this.first + " " + this.last;};
alert(john.full());

Здесь многое происходит здесь.

1. Мы создаем Функция , который установит свойства на своем это объект при вызове.
2. Мы создаем два отдельных экземпляра этой функции, поместив Новый Ключевое слово до наших звонков функций. Это гарантирует, что Джон и Мэри Обратитесь к полностью отдельным объектам, каждый с их собственным Первый и Последнее характеристики.
3. Мы создаем новую функцию и назначаем ее на полный Недвижимость на нашем Человек Функция Прототип имущество. Прототип Свойство существует на всех функциях, и позволяет определять свойства падения, которые должны существовать на каждом объекте, созданном из этой функции.
4. Мы называем полный () Функция на Джон Отказ JavaScript видит, что Джон Объект на самом деле не имеет полный Функция на нем, так что это ищет Человек. Прототип. Полный () функция и вызывает это вместо этого. Внутри этого звонка, однако, это все еще относится к Джон объект.

7. JavaScript никогда не спать () s

Многие языки поддерживают понятие Темы Что позволяет вам иметь несколько процедур одновременно. Проблема в том, что мульти-резьба открывает огромную банку червей: нить замки и другие гоночные условия, которые даже лучшие разработчики имеют трудное время с помощью.

JavaScript позволяет избежать этих проблем полностью, только позволяя одному кусочку кода запускать одновременно. Это здорово, но это требует от нас, чтобы написать наш код по-другому. Большинство языков создают слой абстракции над операциями, где программа ждет, пока что-то произойдет. Например, в Java вы можете позвонить Thread.sleep (100) И остальная часть вашей процедуры не будет проходить до прохождения 100 миллисекунд.

Когда у вас есть только один поток для работы, вы не можете позволить себе ничего не делать для сотен миллисекунд одновременно – оно замораживает пользовательский интерфейс и сделать ужасный пользовательский опыт. Так что JavaScript почти никогда не блокирует выполнение. Вместо этого он зависит от асинхронные обратные вызовы Чтобы вы сказали, что должно произойти, когда операция заканчивается. Например:

window.setTimeout(function() { console.log(a); }, 1000); 
console.log('hello world'); 
var a = 'got here';

Приведенный выше код будет Сначала создайте сообщение «Hello World» (Несмотря на то, что эта линия кода наступает после Settimeout () Метод), а затем печать “попал сюда” одна секунда позже. Даже если мы изменили тайм-аут в 0 Мы знать что А Переменная будет инициализирована перед тем, как зарегистрироваться, потому что никакого другого JavaScript не может работать, пока этот код не будет завершен.

Новички часто пишут код, а потом удивляетесь, почему А не имеет значения:

var a; 
$.ajax(url, {success: function(e, data) { a = data; }); console.log(a); // BAD! This line will run before `a` gets set to a value!

Не впадайте в эту ловушку.

Есть несколько предостережений, которые я должен упомянуть.

1. Не все функции, которые вы передаете в другие функции, являются асинхронные обратные вызовы Отказ Следующий код работает просто отлично, потому что DOIFTRUE () называет его Whattodo Аргумент, синхронно, прежде чем он возвращается:

2. Alert () является одним из Очень мало Исключения для не блокирующего правила – ничего не происходит до тех пор, пока окно оповещения не закрывается. Даже ожидания тайм-аута! Это одна из причин, по которой обычно лучше всего избегать использования Alert () Отказ

3. Веб-работники Может позволить вам запустить CPU-интенсивные задачи на отдельном потоке, но они очень осторожно структурированы, чтобы избежать состояния расы. Начальные разработчики редко нужно беспокоиться о таких вещах.

8. Автоматические преобразования типа

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

var s = 1 + ""; // yields "1"

JavaScript делает это немного дальше, чем многие языки, и вы можете использовать этот факт, чтобы ваш код был очень лаконичным. Например, вместо Если (а) {...} , вы можете просто сказать Если (а) {...} Отказ Хотя …| А Не булева, JavaScript может сказать, что вы хотите относиться к этому как один, поэтому он определяет, стоит ли А Значение - «правдоподобное» или «ложное» и действовало соответственно.

Falsy Значения JavaScript включают в себя:

• ложный
• 0
• Пустые струны ( '' или "" )
• ноль
• неопределенный
• Нан

Все остальное – Правда Отказ

Вот еще один пример:

var a = b || c;

Если B имеет правдовую ценность, как «Боб», это ценность, которую А получите. Если B является фальсию, А получит стоимость C Отказ

Вы можете заставить правду/ложное значение стать настоящим/ложным значением, отрицая его дважды:

var trueOrFalse = !!value;

Также в сравнении равенства х имеет некоторые сложные правила Для преобразования различных типов значений. Это может дать странное поведение, как:

var a = "1" == true; // true: "1" -> 1, which is truthy

И вы можете использовать === Оператор для строгого сравнения без автоматического преобразования.

var a = "1" === true; // false: different-typed values are not equal.

9. JavaScript является кодом – не данные или разметки

Для простоты многие онлайн-учебники будут смешивать JavaScript и HTML, вроде:

Смешанный HTML и JavaScript (плохо)

Delete

Это работает нормально для небольших учебных пособий, но у него есть некоторые серьезные недостатки, когда вы пишете реальные приложения. Он смешивает программное поведение элементов пользовательского интерфейса (представленное JavaScript) в структура и данные то есть (представлено HTML). HTML не должен решить, как он взаимодействует с JavaScript. Вместо этого отделите код JavaScript из HTML и позвольте решить, как он взаимодействует со страницей.

HTML

Delete

JavaScript (с jQuery)

// Set a click handler for anything with a data-confirmation attribute. 
$('[data-confirmation]').click(function() { 
  var message = $(this).data('confirmation'); 
  return confirm(message); 
});

Как видите, JavaScript теперь определил поведение для любого элемента с помощью Подтверждение Атрибут данных. Этот подход, иногда называемый «ненавязчивый JavaScript», имеет несколько преимуществ, в том числе:

1. Обычно он делает HTML-код более лаконичным и читаемым.
2. Это позволяет объявить концепцию пользовательского интерфейса в одном месте и повторно повторно повторно на протяжении всей вашей системы.
3. Если вы решите изменить свои детали реализации (например, диалоговые окна подтверждения браузера, являются уродливыми и несовместимыми – мы хотим использовать всплывающее окно! ») Вы можете сделать это в одном месте, не касаясь вашего HTML.

Если вы рендерируете шаблоны в браузере À la Угловой или полимер, это разделение означает, что включает HTML в одну часть вашего файла и JavaScript в другой. Если вы используете серверный двигатель, такой как JSP или бритва, вам лучше держать код JavaScript в статическом, кэшированном .js Файлы, вдали от всех ваших динамически генерируемых тегов HTML.

10. JavaScript не только для браузеров

JavaScript четко приходил на долгий путь, поскольку он был создан ( Якобы в десять дней ) В 1995 году. Теперь технологии, такие как Node.js, позволяют запускать JavaScript за пределами любого браузера. Некоторые общие случаи использования для JavaScript в качестве общего языка сценариев включают в себя:

1. Писать серверный код в JavaScript. Ghost.org Это всего лишь один пример веб-приложения, набонный сервером которого является JavaScript работает на Node.js.
2. Создание меньше файлов в CSS. Ress.js Самый быстрый, самый точный меньший преобразователь вокруг, и он написан в JavaScript. Если вы используете меньше, но не хотите, чтобы вы не могли повторно переведены на стороне клиента на каждую нагрузку на каждую страницу, это хорошая идея предварительно построить CSS, вызывая компилятор STRECTC через Node.js.
3. Управляющие задачи построения. Что, если вы хотите запустить модульные тесты на ваш JavaScript каждый раз, когда вы меняете файл, чтобы убедиться, что вы ничего не нарушили? Grunt.js с его Смотреть и Карма Плагины могут сделать это! Или вы можете настроить Grunt, чтобы восстановить все эти файлы CSS каждый раз, когда вы изменяете меньше файла.

Если вы разрабатываете веб-приложения, вам нужно будет изучать JavaScript. Вы также можете применить это знание другим аспектам вашей заявки!

Заключение

Нравится так или ненависть это – JavaScript здесь, чтобы остаться. В настоящее время это язык де-факто для построения любого вида богатого пользовательского опыта в Интернете.

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

Удачи.