Функция, функция, функция стрелки

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

function likeCallback(e) {
  let heart = e.target;
  mimicServerCall()
    .then(function(serverMessage){
      alert("You notified the server!");
      alert(serverMessage);
      heart.innerText = glyphStates[heart.innerText];
      heart.style.color = colorStates[heart.style.color];
    })
    .catch(function(error) {
      alert("Something went wrong!");
    });
}

ВОА! Здесь происходит много всего, чего мне не нужно сразу понимать. По сути, это действия, которые происходят, когда пользователь нажимает на элемент сердца, чтобы поставить отметку «Нравится» в приложении Simple Liker.

Объявлена ​​основная функция likeCallback(e). В нем есть несколько переменных, операторов и вызовов других функций. Это похоже на последовательность событий, которая может быть вызвана вызовом likeCallback(e).

Что такое функция в JavaScript?

Это функция, которая может принимать ввод и возвращать вывод (может запускать некоторые другие задачи по пути).

Чтобы объявить функцию, она начинается с ключевого слова function, за которым следует имя функции.

В скобках следует параметр (или список параметров), доступный функции для использования.

В фигурных скобках следует оператор (или операторы), который определяет функцию и будет запускаться при вызове функции.

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

function addingEventListener(){
  const input = document.getElementById('input');
  input.addEventListener('click', function(event) {
    alert('I was clicked!');
})};

Все заключено в функцию addingEventListener( ).

addEventListener( ) - это метод, прикрепленный к элементу HTML (здесь он прикреплен к постоянной переменной с именем input, которая захватывает элемент с идентификатором 'input’), который принимает два аргумента в скобках.

1. название события, которое оно прослушивает; 'click' мыши
2. функция обратного вызова; function(event)

Эта функция обратного вызова является ответом на «обработку» события 'click' мыши.

Далее в синтаксис

Когда происходит событие 'click', добавляется объект события для ссылки на это событие. Затем этот объект события передается функции обратного вызова в качестве ее первого параметра.

function(event) временами немного избыточен, но обеспечивает лучшую читаемость. Эта функция обратного вызова также будет работать, если круглые скобки пусты, поскольку объект события автоматически передается ей, например, function( ).

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

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

function addingEventListener( ) {
  const input = document.getElementById(‘input’);
  input.addEventListener(‘click’, itsBeenClicked)
}
function itsBeenClicked( ) {
  alert(‘I was clicked!’);
}

Функция, назначенная переменной

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

Больше информации здесь:

По сути, мы можем рассматривать функции как переменную, передавать их в качестве аргумента другим функциям, возвращать их другой функцией и можно присвоить переменной как значение.

var aClick = function itsBeenClicked( ) {alert(‘I was clicked!’);

Теперь мы можем вызывать эту функцию с aClick( ) вместо itsBeenClicked( ).

Стрелочные функции

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

fetch('https://anapioficeandfire.com/api/books')
  .then(resp => resp.json())
  .then(json => console.log(json));

Немедленное обращение - короткая и ясная функция, но что здесь происходит?

Не вдаваясь в подробности о выборке, приведенное выше, по сути, «извлекает» кучу данных из URL-адреса API. Затем ответ («resp») преобразуется в читаемый формат JSON. Наконец, консоль регистрирует этот читаемый формат JSON.

Примечание. Каждый оператор получает вывод из предыдущего оператора.

На мгновение подумайте о второй строке…

  .then(resp => resp.json( ) )

… И вольно интерпретировать его в знакомое функциональное выражение…

  .then(function(resp) {return resp.json()} );

Примечание: это плохой код! Я просто использую приведенное выше, чтобы понять функции стрелок.

Функция .then берет вывод предыдущего оператора и воплощает его в resp, который использует как ввод для вычисления вывода, resp.json( ). Затем это отправляется в следующий оператор.

Параллельное сравнение

Чтобы переключиться на формат стрелки, мы можем убрать ключевое слово function, круглые скобки вокруг аргумента, фигурные скобки вокруг тела и слово «return». Затем, конечно, вставьте эту стрелку между ними, что означает возврат.

Кстати, для нескольких параметров снова потребуются скобки.

Заключительные слова

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

Ресурсы