ванильный javascript что это

Vanilla JS — очень мощный javascript-фреймворк

Как ни странно, на Хабре упоминание этого мощнейшего фреймворка нашлось лишь в одном комментарии от апреля 2012 года.

Вступление

Для меня эта тема особенно актуальна, ведь последнее время на Хабре упоминается огромное количество js-фреймворков. Какие-то из них авторы различных проектов находят в Сети, какие-то — пишут сами, не очень понимая зачем. Кто-то просто пишет свои велосипеды.

Моё же мнение — надо стремиться к отсутствию избыточного кода, к максимальному минимализму, простите за тавтологию.
Если на весь сайт вам нужно только выбирать html-элементы по их id — глупо подключать jQuery.

Если вам на Node.js проекте надо собрать пачку js-файлов и сжать их — глупо писать или подключать тяжёлые фреймворки с кучей настроек, параметров, дополнений и методов, ведь простейший скрипт, склеивающий файлы и прогоняющий их через Кроукфордский jsmin будет намного быстрее, надёжнее и проще.

Чем больше кода — тем больше ошибок. Чем больше стороннего кода — тем сложнее поддерживать проект. Ведь когда вы берёте чужой код, вы берёте на себя и ответственность за его поддержку. Нельзя будет сказать «этот баг не мой, а вон из той библиотеки».

Vanilla JS

Итак, начнём обзор этого мощнейшего и самого популярного в мире JS-фреймворка.

(далее — перевод с официального сайта фреймворка)

Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.
Кто использует Vanilla JS? Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow.

Вообще-то, Vanilla JS уже используется на большем количестве сайтов, чем jQuery, Prototype JS, MooTools, YUI и Google Web Toolkit вместе взятые!

Деплоймент

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

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:

Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:

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

Сравнение скорости работы с другими фреймворками

Поиск DOM-элемента по ID

Поиск элементов по названию тэга

Примеры кода

Плавно скрыть элемент

AJAX-вызов

Заключение

Источник

Ванильный JavaScript и HTML. Никаких фреймворков. Никаких библиотек. Никаких проблем

Используете для создания приложений Vue, React, Angular или Svelte? Я использую, и если вы тоже, и уверен, что вам уже давно не приходилось писать приложение, которое выводит информацию без этих прекрасных инструментов.

Когда-то многие из нас писали веб-приложения только с помощью тех средств, что были встроены в браузер. И хотя современные инструменты помогают нам абстрагироваться от этого (и имеют много других преимуществ), всё ещё полезно знать, что происходит у них под капотом.

При выводе небольшого количества информации вам может потребоваться использовать HTML, JavaScript и DOM без каких-либо инструментов. Недавно я написал несколько базовых примеров, которые иллюстрируют основы веб-разработки и помогают в изучении DOM, HTML, JavaScript и принципов работы браузера. Этот опыт позволил мне понять, что другие разработчики — возможно, вы, — будут рады вспомнить, как выводить информацию без использования библиотек.

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

Давайте рассмотрим разные способы вывода информации. И держите под рукой эту документацию!

Образец приложения

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

Инструменты

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

Мы будем использовать только HTML, TypeScript/JavaScript, CSS и браузерную DOM (объектную модель документа). Давайте посмотрим, как можно отобразить HTML.

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

Подход

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

Отображение индикатора выполнения

Индикатор должен отображаться, пока приложение решает, какие персонажи должны попасть в список. То есть сначала индикатор невидим, затем пользователь нажимает кнопку обновления, индикатор появляется, и снова исчезает после отображения списка.

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

Отображение индикатора с помощью внутреннего HTML

Просто. Легко. Почему так нельзя сказать про любой код? Ну посмотрите, как быстро этот фрагмент решает проблему!

Вероятно, вы уже заметили, насколько уязвим этот код. Одна ошибка в HTML — и всё! У нас проблема. И действительно ли он удобочитаем? Да, это так, но что будет, когда HTML станет слишком сложным? Когда у вас 20 строк кода с классами, атрибутами и значениями… ну, вы поняли. Да, решение не идеальное. Но при небольшом количестве HTML вполне работает, и я рекомендую присмотреться к нему любителям всё писать в одну строку.

И последнее: innerHTML может влиять на скорость отображения. Я не увлекаюсь избыточной оптимизацией, но лучше проверяйте производительность, потому что innerHTML может быть причиной возникновения циклов отрисовки и вывода макетов в браузере. Имейте в виду.

Индикатор выполнения с помощью DOM API

Уменьшить громоздкость длинных строк можно с помощью DOM API. Создаём элемент, добавляем необходимые классы и атрибуты, задаём значения, а потом добавляем его в DOM.

Преимущество в том, что нужно писать больше кода и полагаться на API. То есть по сравнению с innerHTML при опечатках повышается вероятность, что система сообщит об ошибке, которая поможет найти причину проблемы и придумать решение.

Отрисовка индикатора с помощью шаблонов

Ещё один способ заключается в создании тега и использовании его для упрощения вывода информации.

Создадим и присвоим ему ID. Шаблон не будет отображён на HTML-странице, но позднее вы можете ссылаться на его содержимое и использовать его. Это очень полезно, вы можете писать HTML везде, где это целесообразно: на HTML-странице, с применением всех полезных возможностей HTML-редактора.

Затем код может взять шаблон с помощью метода document.importNode() из DOM API. По мере необходимости код может манипулировать содержимым шаблона. Теперь добавьте это содержимое в DOM, чтобы отобразить индикатор.

Шаблоны — хороший способ сборки HTML; мне он нравится, потому что позволяет писать HTML там, где это имеет смысл, и можно меньше делать с помощью кода на TypeScript/JavaScript.

Можно ли импортировать шаблоны из других файлов? Да, но с помощью других библиотек. Однако сейчас мы от них сознательно отказались. Импорт HTML обсуждается годами, но, как видно из материалов сайта «Can I Use», даже не все современные браузеры поддерживают эту возможность.

Отображение списка персонажей

и списка персонажей заключается в том, что теперь мы:

Отображение персонажей с помощью внутреннего HTML

Это работает. И возможно, это более удобочитаемо. Что насчёт производительности? Трудно ли выявить (или вообще возможно?) опечатки при наборе кода? Судить вам. Но давайте не будем делать выводов, пока не разберёмся с другими методиками.

Отображение персонажей с помощью DOM API

Отображение персонажей с помощью шаблонов

. Сначала на HTML-странице создаём шаблон. Этот HTML-код будет чуть сложнее, чем в случае с

. Но это не проблема. Это просто HTML внутри HTML-страницы, так что мы можем легко исправлять ошибки и форматирование с помощью прекрасного редактора VS Code.

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

Итоги

Я не упомянул о том, как отображают информацию популярные фреймворки и библиотеки. Vue, React, Angular и Svelte существенно облегчают задачу и требуют писать меньше кода. Также у них есть и другие преимущества. В этой статье мы рассмотрели лишь относительно простые методики вывода информации с помощью DOM и чистого HTML, а также TypeScript/JavaScript.

Надеюсь, вы теперь представляете, как выводить информацию без использования библиотек. Есть ли другие способы? Конечно. Можно написать функции, которые упростят код и позволят использовать его многократно? Конечно. Но однажды вам захочется поэкспериментировать с одним из таких прекрасных инструментов, как Vue, React, Angular или Svelte.

Эти фреймворки делают за нас много работы. Вы можете помнить, как выводить информацию с помощью чистого DOM-кода с JavaScript или jQuery. Или как делать это с помощью инструментов вроде handlebars или mustache. А может быть, вы никогда не выводили информацию в DOM без помощи фреймворка. Можете сами представить, какие процессы протекают под капотом современных библиотек и фреймворков, когда они выводят для вас информацию на экран.

Полезно знать, что можно сделать с помощью чистого HTML, TypeScript/JavaScript и CSS, даже если вы используете фреймворк, который избавляет вас от всего этого.

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

Источник

Учите ванильный JavaScript, прежде чем браться за фреймворки

Что такое «ванильный JavaScript»?

VanillaJS – это использование простого JavaScript без каких-либо дополнительных библиотек, таких как jQuery. Люди используют этот термин как шутку, чтобы напомнить другим разработчикам, что многое можно сделать в наши дни без дополнительных библиотек JavaScript.

Или, в нашем случае, без новых, причудливых фреймворков.

Фреймворк Vanilla JS

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

Хотя Эрик не использовал термин как таковой, его сайт, безусловно, способствовал его популярности.

Состояние современного «обычного» JavaScript

Исторически сложилось так, что разработчики должны были обходить нативный JavaScript для решения многих задач, например, кроссбраузерности, или просто для выхода за пределы возможностей языка. Речь идет о далеких днях IE 6-7. Очень часто им в этом помогала jQuery. Но сейчас этот продолжительный условный рефлекс опоры на внешние библиотеки уже не нужен, благодаря эволюции спецификации ECMAScript, и современным браузерам, поддерживающим большинство новых возможностей.

Сегодня выбор Vanilla JS вместо jQuery чаще всего является самым разумным, не раздувая кодовую базу ненужными зависимостями. Очевидный пример с великолепного сайта Возможно вам не нужна jQuery:

На этом сайте полно примеров ванильного JS, обязательно посмотрите!

Если вам нужно больше доказательств:

We’re finally finished removing jQuery from https://t.co/r2QL2aHBfa frontend. What did we replace it with? No framework whatsoever:

• querySelectorAll,
• fetch for ajax,
• delegated-events for event handling,
• polyfills for standard DOM stuff,
• CustomElements on the rise.

О JS фреймворках: за и против

Прежде всего, что мы имеем ввиду под термином «JS фреймворки»?

Речь идет о всех этих Angular, Vue, React, Backbone, Ember, Knockout, Ext, jQuery, Meteor, Express, Koa, Total, Socket.io и им подобных. Да, безусловно, они все разные. Да, некоторые из них на самом деле не фреймворки, а скорее библиотеки. Но в рамках этой статьи мы обобщим их, потому что все они имеют общую цель.

За: JavaScript-фреймворки великолепны

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

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

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

Другой ключевой причиной использования фреймворков является практика. Они заставляют тебя тренироваться снова и снова. И это замечательно! Практика всегда приводит к мастерству, чего бы вы ни пытались достичь.

Против: JavaScript-фреймворки ужасны

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

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

Ты не React-разработчик и не Vue-разработчик. Ты просто разработчик.

Конечно, фреймворки полезны для небольших команд, работающих над одним приложением. Да, они сэкономят вам некоторое время (если вы не наркоман рефакторинга). Но что делать, если у вас несколько команд и несколько проектов? Как вы думаете, все руководители групп согласятся на единую платформу для всего набора приложений? А что, если в 2019 появится новый суперфреймворк?

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

Почему сначала нужно учить ванильный JavaScript?

Если вы освоите основы JavaScript, то вашей единственной проблемой при изучении новых фреймворков будет их синтаксис.

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

За последние 5 лет появилось больше 10 фронтенд-фреймворков. Угадайте, сколько будет в ближайшие 5-10 лет? Если вы просто притворяетесь, что знаете JavaScript, этот движок, питающий веб-революцию, как вы будете идти с ним в ногу?

Просто подумайте о том, что сегодня делают «разработчики jQuery»: пытаются догнать Angular. Завтра они будут пытаться догнать React / Vue. И этот грустный цикл продолжается.

Знание ванильного JavaScript позволит вам понять или даже внести свой вклад в JS фреймворки, и поможет выбрать правильный, когда вам это потребуется.

Где и как учить ванильный JavaScript?

Надеюсь, вы готовы запачкать руки простым старым JavaScript. Вот вам суперсовет:

Всегда будьте любопытны, всегда читайте исходники и всегда пробуйте сами.

И еще несколько конкретных рекомендаций:

Для начинающих: вот отличный материал для старта. И еще немного:

А здесь огромный список ресурсов для обучения.

Еще парочка статей:

Заключение

Использование фреймворка, безусловно, даст вам быстрые результаты. Но если Вы не понимаете основные понятия, стоящие за ним, то далеко не уйдете. Научиться играть Wonderwall на гитаре не значит научиться сочинять музыку, но это даст вам повод для практики.

Принцип «сначала изучи основы» применим практически ко всему в жизни. От изучения нового языка программирования до нового вида спорта. Это требует много практики, но когда вы освоите основы, начнется самое интересное.

Источник

Для чего вам отдельно изучать vanilla JavaScript

Дата публикации: 2019-04-29

От автора: многие люди часто смотрят на vanilla JavaScript и фыркают. Для чего изучать vanilla JavaScript, если у нас есть Angular, React и Node.js? Но именно в этом многие разработчики, особенно новички, ошибаются. Чего они не понимают, так это того, что все это и многое другое построено на JavaScript. Вот несколько веских причин, почему вы должны изучать vanilla JavaScript, даже если вы думаете, что вам это не нужно.

Понимание

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

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

Кто-нибудь помнит старые добрые времена jQuery? Никто больше не говорит о когда-то популярной библиотеке JavaScript. Всем нужны React и Angular.

Лучший код

Если вы лучше поймете, как работает JavaScript, у вас будет больше шансов создать более качественный код.
Суть JavaScript в том, что он был создан, чтобы каждый мог писать код. Однако со временем приложения и требования стали более сложными, и JavaScript изменился, чтобы приспособиться к ним.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Большинство основных проблем в программном обеспечении — это проблемы неправильного представления — Рич Хики, дизайнер Clojure.

Когда вы изучите vanilla JavaScript, вы освоите его преимуществам и нюансы. Вы сможете увидеть и понять вещи, которые не видят 90% начинающих разработчиков. С этими новыми знаниями вы начнете воспринимать набор кода по-разному и увидите, где можно улучшить вещи, чтобы уменьшить сложность.

Ускоренное внедрение фреймворков и библиотек

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

Разница между теми, кто знает и понимает JavaScript, и теми, кто не знает — это разница между механиком и водителем. Если ваша машина сломается, у механика будет больше шансов починить машину самостоятельно, чем у водителя.

Чтобы стать фантастическим профессиональным разработчиком, вы должны выйти за пределы мышления пользователя JavaScript и войти в пространство создателя. Фреймворки и библиотеки, такие как Angular и React, являются просто инструментами, которые помогают обрабатывать и организовывать JavaScript.

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

Когда вы изучаете vanilla JavaScript, вы больше понимаете, что делаете. Вы не пишете код, просто потому что в руководстве сказано так.

Долговечность

Фреймворки и библиотеки меняются, но JavaScript — это навсегда.

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

Помните, когда Facebook изменил свою лицензию с BSD + Patents на MIT, и каждый стартап теперь хочет, чтобы их материалы были написаны на React? А как насчет Angular? Я помню.

Помните, когда вышел Angular 2 и все на Angular 1 рухнуло? Я помню. Помните, когда вышел Angular 1, и все перестали говорить о jQuery? Я помню. Но это все еще всего лишь JavaScript — написанный и структурированный по-другому.

Заключение

Когда вы изучаете vanilla JavaScript, вы также учитесь разрабатывать код и способы уменьшения сложности. В то время как учебные пособия по Angular и React сейчас в моде, FreeCodeCamp приложил усилия, чтобы включить vanilla JavaScript в качестве одной из своих сертификаций — и не без причины. Поэтому если вы потратите время на самостоятельное изучение JavaScript, оно безусловно будет того стоить.

Автор: Aphinya Dechalert

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Источник

Пишем фронтенд-компоненты на ванильном JS

В наши дни вокруг фронтенд-фреймворков (React, Angular, Vue) много шумихи. Поразмышляем, какую проблему они решают и для чего могут быть полезны.

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

Созданная функция будет представлять собой раскрывающийся список элементов. Она должна принимать параметр, указывающий на количество элементов, отображаемых при начальной загрузке. При нажатии на “Показать больше” (Show more) будут показаны все элементы в списке. “Показать меньше” (Show less) скроет все элементы, кроме ранее выбранного числа. Фича должна быть расширяемой, чтобы добавлять на одну страницу несколько таких списков.

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

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

Прежде чем приступать, нужно рассмотреть несколько моментов.

Затем, наконец, можно приступить к созданию JS-фичи, добавляя функции в код.

1. Дизайн кода + модульность

Требования гласят, что компонент должен быть доступен для переиспользования во многих экземплярах списка. Как добиться этого в JS?

Способ заключается в создании того, что называется “модулем”. Это набор переменных и функций, которые инкапсулированы в единый контекст выполнения, поэтому переменные внутри будут частными и ограниченными. Другими словами, когда вы создаете объект или функцию в JavaScript, то назначаете границу вокруг функций и переменных внутри них, делая эти значения уникальными.

Узнать больше о шаблоне модуля JavaScript можно из главы о модулях в книге Эдди Османи “Изучение шаблонов проектирования Javascript”. В очень упрощенном виде это означает, что мы пишем код со следующей структурой:

Мы определяем компонент в области действия функции (либо внутри объекта, либо внутри функции, возвращающей объект). Такая структура позволяет написать компонент, все переменные которого ограничены только конкретным экземпляром списка. Так нам не придется больше беспокоиться о расширяемости модуля в будущем. Нет проблемы создать на одной странице один, два или пять списков. Вот модуль, который мы написали:

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

Здесь можно было бы раскрыть больше внутренних процессов:

Затем пользователь компонента вызывал бы эти действия извне функции следующим образом:

Здесь следует отметить еще одно: для обозначения элемента DOM используется $ . Это соглашение Jquery, популярной библиотеки методов расширения Javascript, но оно распространилось повсюду для определения переменных в JS, указывающих на один или несколько узлов DOM.

2. Рендеринг HTML-кода

Требования к компоненту не подразумевают существенного динамического изменения контента. Но, как и всегда при проектировании пользовательского интерфейса, вам так или иначе придется иметь дело с рендерингом. Вот разметка для компонента:

На первый взгляд, на основе пользовательского ввода придется ре-рендерить не так уж и много. Единственное, что могло бы часто меняться, — это текст “показать больше”. Что нам нужно сделать, так это отделить логику рендеринга HTML от остальной части компонента.

3. Сохранение состояния компонента

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

Определить состояние просто: let state = . Затем события могут вызвать изменение состояния, что поменяет значение этой переменной в области действия функции. А это, в свою очередь, вызовет повторный рендеринг, влияющий на отображение. Таков проверенный временем паттерн, который более причудливыми способами реализуется во всех современных фронтенд-фреймворках.

4. Уничтожение элемента

Создание фичи

Наконец-то мы готовы создать необходимую фичу. Сначала нужно определить JS-функцию, которая будет модулем для компонента (опять же, термин “модуль” здесь означает часть JS-кода, который будет определять область действия и применяться только к целевому элементу). В приведенном ниже коде строка collapsible($module1, 2) говорит: “Создайте новый модуль JS-кода, который применяет функциональность свертывания только к элементу под названием module1 ”.

Здесь хорошо видны преимущества применения фреймворков даже для таких небольших компонентов.

Разработка без фронтенд-фреймворков — полезное упражнение, которое позволяет увидеть потрясающую функциональность, к которой эти инструменты дают доступ.

Весь код из примера можно посмотреть здесь.

Источник