JavaScript: два интересных сниппета

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!



Hello, world!


В этой небольшой заметке я хочу поделиться с вами двумя сниппетами, которые показались мне очень интересными. Первый сниппет представляет собой пример реализации простой реактивности (signal), второй — способ предотвращения несогласованности данных в результате состояния гонки (race condition). Первая конструкция используется в SolidJS (с некоторыми дополнительными оптимизациями), вторая — заимствована из одного рабочего проекта.


Интересно? Тогда прошу под кат.


Начнем с сигнала.


Взгляните на следующий код:


let currentListener

function createSignal(initialValue) {
  let value = initialValue
  const subscribers = new Set()

  const read = () => {
    if (currentListener) {
      subscribers.add(currentListener)
    }
    return value
  }

  const write = (newValue) => {
    value = newValue
    subscribers.forEach((fn) => fn())
  }

  return [read, write]
}

function createEffect(callback) {
  currentListener = callback
  callback()
  currentListener = null
}

Функция createSignal создает "реактивное" значение, а функция createEffect принимает коллбэк, который выполняется при изменении этого значения.


Пример использования данного сниппета:



const [count, setCount] = createSignal(0)

const button = document.querySelector('button')

createEffect(() => {
  button.textContent = count()
})

button.addEventListener('click', () => {
  setCount(count() + 1)
})

При нажатии кнопки значение счетчика увеличивается на единицу. Это приводит к обновлению текста кнопки.


Таким образом, код работает, как ожидается. Но… почему? Как это работает?

Источник: https://habr.com/ru/companies/timeweb/articles/725504/


Интересные статьи

Интересные статьи

В этой статье мы популярно объясняем на собственном опыте как организовать массовую выгрузку, обработку и загрузку фотографий товаров из Bitrix, используя Python и минимальное количество SQL. Для проч...
В новом дайджесте окукливание Android и тестирование документации, конкурс Kotlin Heroes и понимание стоимости AWS, осциллограф своими руками и новые открытые карты, акторы, профайлеры, б...
В этом дайджесте обсуждаем ужасную документацию Apple, запуск Android Studio на любом устройстве, переезд на Kotlin (в том числе и Multiplatform), создание бэкенда без серверных разработч...
В новом дайджесте рассказываем про влияние пандемии на экономику приложений и про прогнозы ее развития, про неудачный социальный мониторинг и разработку на удаленке, про дизайн и собственные исто...
Одной из «киллер-фич» 12й версии Битрикса была объявлена возможность отдавать статические файлы из CDN, тем самым увеличивая скорость работы сайта. Попробуем оценить практический выигрыш от использова...