Откройте для себя мощность закрытия в Vuejs

Автор оригинала: FreeCodeCamp Community Member.

Fabian Hinsenkamp

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

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

Здесь вы узнаете, насколько мощные замыкания JavaScript. Будьте в курсе, этот учебник поставляется с проблемой. ? Это все о создании элегантного пикура Emoji в Vuejs и замыкания для использующих функций более высокого порядка.

Давайте погрузимся прямо в это!

Функциональная область

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

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

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

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

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

function square(x){
  const squaredX = x  x;
  console.log(squaredX); // 25
  return squaredX;
}

const squaredA = square(5);

console.log(squaredA); // 25 
console.log(squaredX); // ReferenceError: squaredX is not defined

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

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

Закрытие

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

let globalString = 'A'

function hello(){
  const localString = 'C'
  console.log(globalString, localString);
}

hello(); // A C

globalString = "B";

hello(); // B C

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

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

Функции высшего порядка

Функция, которая работает в других функциях, либо принимая их в качестве аргументов, либо возвращая их, называется Функция высшего порядка Отказ

function createMultiplier(multiplier){
  return function(value){
    return value  multiplier;
  }
}

const multiplyBy2 = createMultiplier(2);

console.log(multiplyBy2(5)); //10

Здесь мы наконец можем испытать силу закрытия. Хотя …| CreateMultiPLier уже успешно завершен, мы все еще можем получить доступ к его первоначальному множитель имущество.

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

Конфиденциальность данных

function privateVariables(){
  let privateValue = 100;
  return {
    get: function(){
      return privateValue;
    }
  }
}

console.log(privateVariables.get()); //100

Как приходят замыкание, позволяют нам реализовать конфиденциальность данных?

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

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

Coding Challenge: Picker Tone Emoji

Отлично, вот всю теорию, которую нам нужно для фактического строить что-то мощное в Vuejs и используя силу закрытия!

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

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

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

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

Вы можете проверить песочница Для кода!

Намекать

Emojis можно хранить в виде HTML-шестнадцатеричных кодов в строковых значениях. Сложенные руки Emoji IS & # X1F64F. Чтобы изменить тонус, прикрепите к нему цветовой код. Вы можете найти коды здесь Отказ

Продление вызова здания

Вы хотите сделать его еще один шаг вперед, и действительно видите, если вы освоили замыкание? Затем пропустите несколько эмоджив и сделайте его работать, чтобы вы могли изменить тонус скин нескольких эмоджин по одному за раз. ?

Заключение

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

Мы можем использовать это поведение JavaScript в Vuejs для динамически создания методов на основе динамических аргументов без загрязнения наших компонентов с огромным разнообразием переменных и методов.

Спасибо за прочтение ?

Первоначально опубликовано в моем блоге на https://hinsencamp.com Отказ