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

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

Функции обратного вызова

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

$('#element-id').click(function(){
  alert('You clicked this element!')
});

В этом примере при щелчке по элементу с идентификатором element-id выполняется функция предупреждения, переданная в качестве аргумента для click. .

Функции обратного вызова являются производными от дисциплины программирования, известной как функциональное программирование (ключ кроется в названии, верно?). На самом базовом уровне функциональное программирование позволяет передавать функции в качестве аргументов функции - именно это мы и пытаемся сделать с помощью обратных вызовов.

Создание собственной инфраструктуры тестирования JavaScript

На этой неделе перед нами стояла задача тестировать одностраничное приложение JavaScript без использования каких-либо фреймворков для тестирования или существующих библиотек JS, таких как JQuery. Вы спросите, как мы можем протестировать что-то без использования библиотеки тестирования? Само собой, конечно! Сначала я был полностью сбит с толку этим ожиданием, как мне создать среду тестирования ?! Конечно, это то, чего может достичь только человек с многолетним опытом. Что ж, это не так сложно, как кажется на первый взгляд.

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

/assert.js
var assert = {
  isTrue: function(assertionToCheck) {
    if (!assertionToCheck) {
      throw("Assertion failed: expected "  + assertionToCheck + " to be true")
    }
  }
}

Здесь у нас есть assert var с методом isTrue (). isTrue () принимает аргумент, который является утверждением, которое мы хотим проверить, истинно. Возьмем, к примеру, приведенный ниже пример. У нас есть объект заметки, который при создании экземпляра примет строку и сохранит ее в свойстве text. Используя наше ранее определенное утверждение, мы можем использовать следующий код, чтобы проверить, что конструктор Note делает то, что мы от него ожидаем:

/note-test.js
function testTextOfNote() {
  var note = new Note('My favourite language is JavaScript')
  assert.isTrue(note.text === 'My favourite language is JavaScript')
}
testTextOfNote()

Наша модель заметки выглядит так:

/note-model.js
(function (exports) {
  function Note (text) {
    this.text = text
  }
  exports.Note = Note
})(this)

Чтобы действительно запустить наши тесты, нам нужно создать SpecRunner.html, из которого мы можем вызывать все наши скрипты:

/SpecRunner.html
<!-- SOURCE -->
<script src="./src/note-model.js"></script>
<!-- TEST -->
<script src="./spec/note-test.js"></script>

Объектная модель документа (DOM)

Когда браузер загружает веб-страницу, он генерирует так называемый D объект O объект M объект (DOM). . Для простоты мы можем думать об этом как о виртуальном представлении веб-страницы. Модель DOM представляет элементы веб-страницы с узлами и объектами, таким образом, она позволяет языкам программирования взаимодействовать с ними и изменять их. DOM можно представить как созданную в виде древовидной структуры:

С этой структурой JavaScript может использоваться для динамического управления почти всеми HTML-элементами DOM. Оно может:

  • Измените все элементы HTML
  • Изменить все атрибуты HTML
  • Удалите все существующие элементы и атрибуты HTML.
  • Добавить новые элементы и атрибуты HTML
  • Реагировать на действия всех HTML-элементов на странице
  • Создавайте новые события на странице
  • Изменить / создать / удалить весь CSS на странице

Довольно круто, правда! Я бы сказал, что моим главным достижением на этой неделе было полное понимание того, что на самом деле представляет собой объектная модель документа, ее важность с точки зрения манипулирования динамическим HTML и того, как на самом деле получить к ней доступ и что-то изменить! На этой неделе я действительно увидел, как создаются современные веб-страницы и ими управляют, и теперь понимаю, как это делать сам.

Слушатели событий

Слушатели событий классные, по-настоящему. Они используют возможности функции обратного вызова, которые предлагает JavaScript, для выполнения функции при возникновении определенного события. Например, допустим, мы хотим, чтобы что-то произошло, когда мы нажимаем кнопку «Сказать привет» на нашей веб-странице. Когда мы нажимаем эту кнопку, мы хотим, чтобы текст со словом «Привет» отображался на нашей веб-странице без обновления страницы. Т.е. мы не хотим, чтобы нас связывали с другим URL. С помощью слушателей событий мы можем это сделать! Сначала давайте настроим наш HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="./test.js"></script>
  </head>
  <body>
    <button id="testButton">Say Hi</button>
    <p id="testHi"></p>
  </body>
</html>

Итак, здесь нам нужен файл test.js, в который мы собираемся написать наш код JavaScript, и мы создали кнопку с идентификатором «testButton», а также элемент ‹p› с идентификатором «testHi». », В котором в настоящее время нет текста. Теперь напишем немного JavaScript:

# /test.js
document.getElementById('testButton').addEventListener("click", sayHi)
function sayHi(){
  document.getElementById('testHi').innerHTML = 'Hi'
}

Хорошо, позвольте мне объяснить, что здесь происходит. В первой строке файла test.js мы создали прослушиватель событий, который отслеживает событие «щелчок», которое происходит в элементе с идентификатором «testButton». Так уж получилось, что это наша кнопка. Слушатель событий также содержит функцию обратного вызова с именем sayHi. Эта функция sayHi - это функция, которая будет выполняться, когда прослушиватель событий «услышит» щелчок по нашей кнопке. Мы определили функцию sayHi во второй части кода, которая просто захватывает элемент на pge с идентификатором «testHi» и изменяет внутренний HTML-код этого элемента на строку «Hi '.

Обозначение объектов JavaScript - JSON

JSON - это в значительной степени наиболее распространенный метод передачи данных / информации по сети. По сути, это синтаксис, который позволяет передавать эту информацию в Интернете как единый объект. JSON - это текст, написанный в нотации JavaScript.

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

На этой неделе / ​​в выходные мы выполняли вызовы API к веб-серверу-хранителю, что позволяло нам получать данные JSON, содержащие информацию о текущих статьях на веб-сайте-хранителе. Затем мы можем делать все, что захотим, с этой информацией. Но как сделать вызов API? Что, черт возьми, вообще такое API?

Интерфейс прикладного программирования - API

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

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

Запросы будут возвращать разные результаты в зависимости от параметров, указанных в запросах. Как обсуждалось выше, все эти данные возвращаются в стандартном строковом формате, который затем может быть преобразован в объект JSON и при необходимости обработан. Хорошим примером того, как выглядят данные при вызове API, является The Guardian Newspaper.

Можно с уверенностью сказать, что я многому научился на этой неделе, как и каждую неделю в Makers Academy. Я должен сказать, что мне очень нравится взаимодействие логики веб-сайта со стороной клиента (прослушиватели событий и DOM), и мне очень понравилось делать вызовы API на выходных. Это определенно то, над чем я бы хотел потратить больше времени. Быть комфортным, делая эти вызовы, используя ванильный JavaScript, а затем переходя на библиотеки, такие как JQuery.