Vanilla js что это

Vanilla js что это

  • Переводы, 4 октября 2018 в 11:52
  • Никита Прияцелюк

В этой статье мы создадим простую игру с помощью HTML5, CSS3 и чистого JavaScript. Вам не понадобятся глубокие знания программирования. Если вы знаете, для чего нужны HTML, CSS и JS, то этого более чем достаточно. На работу игры вы можете посмотреть здесь.

Структура файлов

Начнём с создания нужных папок и файлов:

Начальный шаблон, соединяющий CSS- и JS-файлы:

В игре будет 12 карточек. Каждая карта состоит из контейнера div с классом .memory-card , внутри которого находится два элемента img . Первая отвечает за лицо ( front-face ) карточки, а вторая — за рубашку ( back-face ).

Необходимые изображения можно скачать из репозитория проекта.

Обернём набор карточек в контейнер section . В итоге получаем:

Мы используем простой, но очень полезный сброс стилей, который будет применён ко всем элементам:

Свойство box-sizing: border-box учитывает значения внутренних отступов и границ элемента при подсчёте общей высоты и ширины, поэтому нам не нужно заниматься математикой.

Если применить к body свойство display: flex и margin: auto к контейнеру .memory-game , то он будет выровнен вертикально и горизонтально.

.memory-game также будет flex-контейнером. По умолчанию ширина элементов уменьшается, чтобы они помещались в контейнер. Если присвоить свойству flex-wrap значение wrap , элементы будут располагаться на нескольких строках в соответствии с их размерами:

Ширина и высота каждой карточки подсчитывается с помощью CSS-функции calc() . Создадим три ряда по четыре карточки, установив значения ширины и высоты равными 25% и 33.333% соответственно минус 10px от внешнего отступа.

Чтобы разместить наследников .memory-card , добавим position: relative . Так мы сможем абсолютно расположить наследников относительно родительского элемента.

Свойство position: absolute , установленное для .front-face и .back-face , уберёт элементы с их исходных позиций и разместит поверх друг друга:

Поле из карточек должно выглядеть примерно так:

Добавим ещё эффект при клике. Псевдокласс :active будет срабатывать при каждом нажатии на элемент. Он устанавливает длительность анимации равной 0.2 с:

Переворачиваем карточки

Чтобы перевернуть карточку после нажатия, добавим класс flip . Для этого давайте выберем все элементы memory-card с помощью document.querySelectorAll() . Затем пройдёмся по ним в forEach -цикле и добавим обработчики событий. При каждом нажатии на карточку будет вызываться функция flipCard() . this отвечает за нажатую карточку. Функция получает доступ к списку классов элемента и активирует класс flip :

CSS класс flip переворачивает карточку на 180 градусов:

Чтобы создать 3D-эффект переворота, добавим свойство perspective в .memory-game . Это свойство отвечает за расстояние между объектом и пользователем в z-плоскости. Чем ниже значение, тем сильнее эффект. Установим значение 1000px для едва уловимого эффекта:

Добавим к элементам .memory-card свойство transform-style: preserve-3d , чтобы поместить их в 3D-пространство, созданное в родителе, вместо того, чтобы ограничивать их плоскостью z = 0 (transform-style):

Теперь мы можем применить transition к свойству transform , чтобы создать эффект движения:

Отлично, теперь карточки переворачиваются в 3D! Но почему мы не видим лицо карточки? На данный момент .front-face и .back-face наложены друг на друга из-за абсолютного позиционирования. Рубашкой каждого элемента является зеркальное отражение его лица. По умолчанию значение свойства backface-visibility равно visible , поэтому вот что мы видим при перевороте карточки:

Чтобы исправить это, применим свойство backface-visibility: hidden для .front-face и .back-face :

Если перезагрузить страницу и снова перевернуть карточку, она пропадёт!

Так как мы скрыли заднюю сторону обеих картинок, на обратной стороне ничего нет. Поэтому сейчас нам нужно перевернуть .front-face на 180 градусов:

Наконец, мы получили желаемый эффект переворота!

Ищем пару

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

После нажатия на первую карточку она ожидает переворота другой. Переменные hasFlippedCard и flippedCard будут отвечать за состояние переворота. Если ни одна карточка не перевёрнута, значение hasFlippedCard устанавливается равным true , а нажатой карточке присваивается flippedCard . Ещё давайте сменим метод toggle() на add() :

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

Всякий раз, когда нам нужно добавить дополнительную информацию к HTML-элементам, мы можем использовать data-* атрибуты, где вместо «*» может быть любое слово. Добавим каждой карточке атрибут data-framework :

Теперь мы можем проверить, совпадают ли карточки, с помощью свойства dataset . Поместим логику сравнения в метод checkForMatch() и снова присвоим переменной hasFlippedCard значение false . В случае совпадения будет вызван метод disableCards() и обработчики событий будут откреплены от обеих карточек, чтобы предотвратить их переворот. В противном случае метод unflipCards() перевернёт обе карточки с помощью 1500 мс тайм-аута, который удалит класс .flip :

Читайте также:  Ipad pro 2018 комплектация

Складываем всё воедино:

Более элегантный способ написать условие совпадения — тернарный оператор. Он состоит из трёх частей. Первая часть — это условие, вторая часть выполняется, если условие возвращает true , в противном случае выполняется третья часть:

Блокируем поле

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

Объявим переменную lockBoard . Когда игрок нажмёт на вторую карточку, lockBoard будет присвоено значение true , а условие if (lockBoard) return; предотвратит переворот других карточек до того, как эти две будут спрятаны или совпадут:

Нажатие на ту же карточку

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

Чтобы избежать этого, добавим проверку на то, равняется ли нажатая карточка переменной firstCard , и вёрнемся из функции, если это так:

Переменные firstCard и secondCard нужно обнулять после каждого раунда. Реализуем эту логику в новом методе resetBoard() . Поместим в него hasFlippedCard = false и lockBoard = false . Деструктурирующее присваивание [var1, var2] = [‘value1’, ‘value2’] из ES6 позволяет писать код меньших размеров:

Новый метод будет вызываться из disableCards() и unflipCards() :

Перемешивание

Наша игра выглядит довольно неплохо, но играть в неё не очень весело, если карточки всегда на одном месте. Пора это исправить.

Когда у контейнера есть свойство display: flex , его элементы упорядочиваются сначала по номеру группы, а потом по порядку в исходном коде. Каждая группа определяется свойством order , которое содержит положительное или отрицательное целое число. По умолчанию свойство order каждого flex-элемента имеет значение 0 . Если групп больше одной, элементы сначала упорядочиваются по возрастанию порядка группы.

В игре есть 12 карточек, поэтому мы пройдёмся по ним в цикле, сгенерируем случайное число от 0 до 12 и присвоим его свойству order :

Чтобы вызвать функцию shuffle() , сделаем её IIFE (Immediately Invoked Function Expression). Это значит, что она будет выполнена сразу после объявления. Скрипт должен иметь примерно такой вид:

Что такое «ванильный 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-фреймворки великолепны

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

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

Читайте также:  1K2 service nalog ru 1k личный кабинет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

  • Если Вы не знаете основных принципов веба, вы в конечном итоге уткнетесь в тупик благодаря эволюции самого языка и постоянному появлению новых фреймворков.
  • Знание чистого JS сделает вас ценным инженером, который может решать сложные проблемы.
  • Это сделает вас универсальным и продуктивным разработчиков, как во фронтенде, так и в бекенде.
  • Это даст вам набор инструментов для развития, а не только для выполнения.
  • Это поможет вам, когда потребутеся использовать фреймворк (или нет).
  • Это даст вам общее представление о том, как работают браузеры и компьютеры.

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

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

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

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

Понимание

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

Читайте также:  Intel hd graphics drivers windows 7 x64

И это еще одна вещь, которую многие разработчики не признают — что существуют фреймворки и библиотеки, помогающие создавать код 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. Полное руководство

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

Ссылка на основную публикацию
Adblock detector