JS функция упаковка

Часть серии, чтобы отслеживать 90-дневный удар

Недавно меня наняли для нового концерта. Они наняли 2 из нас по 90-дневному доказующему контракту. Уверен, что это своего рода «конкуренция», чтобы увидеть, кто из нас может подняться на вершину.

Это мой способ усвоить то, что я изучаю на этом пути.

Береги фонд с помощью JavaScript

Обратные вызовы и узоры закрытия

Иногда API JavaScript не соответствуют тому, как они действуют. Окуповая их в функции, у нас есть больше контроля, больше настройки и более сильных обратных вызовов …

let createTimeout = (time) => {
    setTimeout(() => {
        console.log('done');
    }, time)
};

createTimeout(100);

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

let createTimeout = (time) => () => {
    setTimeout(() => {
        console.log('done');
    }, time);
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);
timeout1s();
timeout2s();
timeout3s();

^^^ Этот код предоставляет нам больше настройки. Но это не дает нам большего контроля над тем, что происходит в рамках Settimeout. Что если мы хотим дифференцировать поведение обратного вызова на основе параметра времени? Это означало бы, что наш код должен был действовать в одну сторону для 1, другой способ для 2 с и т. Д.

let createTimeout = (time) => (callback) => {
    setTimeout(callback, time);
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);
// call the functions AND provide unique callbacks
timeout1s(() => {
    console.log("one");
});
timeout2s(() => {
    console.log("two");
});
timeout3s(() => {
    console.log("three");
});

Это заставляет нас более последовательно справляться с асинхронным поведением. Но огромная часть асинхронного поведения создает в стратегии выхода. ” Что если нам нужно отменить среднюю функцию? “

let createTimeout = (time) => (callback) => {
    // setTimeout returns an id we can use
    let id = setTimeout(callback, time); 
    // return that from our function so we can access it
    return id;
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);

let id1s = timeout1s(() => {
    console.log("one");
});

ID1S теперь содержит значение созданного идентификатора Settimeout, и мы можем очистить его с помощью ClearTimeout (id1s) Анкет

Но если мы хотим еще больше контролировать наш код (что мы делаем), мы действительно можем продолжать обернуть нашу функциональность внутри более функций!

let createTimeout = (time) => (callback) => {
    let id = setTimeout(callback, time);
    // returns a function to capture **behavior**
    return () => clearTimeout(id1s);
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);

let cancel1s = timeout1s(() => {
    console.log("one");
});
cancel1s();
timeout2s(() => {
    console.log("two");
});

Концепции общей картины, которые я пытаюсь запечатлеть (и использовать движущийся вперед):

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

Давайте просмотрим тот же процесс со слушателем событий Конечная цель:

let addListener = selector => eventType => listener => {
    let element = document.querySelector(selector);
    element.addEventListener(eventType, listener);
    return () => {
        element.removeEventListener(eventType, listener);
    }
};

let addButtonListener = addListener('button');
let addButtonClickListener = addButtonListener("click")
let removeBtnClickListener = addButtonClickListener(() => {
    console.log('button clicked');
})
// removeBtnClickListener();

Как мы туда попали?

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

Давайте разберем это:

let addListener = selector => eventType => listener => {
    let element = document.querySelector(selector);
    element.addEventListener(eventType, listener);
    return () => {
        element.removeEventListener(eventType, listener);
    }
};

Когда мы называем addlistener ('кнопка'); Что у нас есть?

let addButtonListener = addListener('button');
console.log(addButtonListener);
let addButtonClickListener = addButtonListener("click")
console.log(addButtonClickListener);
let removeBtnClickListener = addButtonClickListener(() => {
    console.log('button clicked');
});
console.log(removeBtnClickListener);

Эти журналы в консоли довольно информативны:

Каждая вещь, регистрируемая, является функцией! И первые два возвращают еще одну функцию! Теперь у нас есть контроль над тем, как AddEventListener взаимодействует с другими API, такими как SetTimeout, дает нам уверенность в продвижении нашего шаблона вперед

Поместите этот код в файл JS, добавьте этот файл в простой HTML с 1 BTN и посмотрите, что произойдет:

// index.html

а также

//index.js
let addButtonListener = addListener('button');

let addButtonClickListener = addButtonListener("click")

let removeBtnClickListener = addButtonClickListener(() => {
    console.log('button clicked');
})

// removeBtnClickListener();

Если вызов удаления прокомментируется, мы видим журнал кликов в консоли. С помощью Unmemented убрать слушатель удаляется до того, как мы (пользователь) когда-либо получим возможность нажать что угодно.

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

Просто чтобы повторить цель этого обзора:

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

Оригинал: “https://dev.to/dhack/upskill-for-the-day-job-25o8”

Береги фонд с помощью JavaScript

Обратные вызовы и узоры закрытия

Читайте ещё по теме: