В 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.