Как установить фреймворк js
Обновлено: 06.07.2024
JavaScript — это мультипарадигмальный язык, который поддерживает типы программирования, управляемые событиями, функциональные и обязательные (в том числе объектно-ориентированные и основанные на прототипах). Первоначально JavaScript использовался только на стороне клиента. Теперь JavaScript еще используется в качестве языка программирования на стороне сервера. Подводя итог, можно сказать, что JavaScript является языком Интернета.
Что такое JavaScript Framework? Зачем их вообще использовать?Фреймворки JS — это библиотеки программирования JavaScript, в которых есть предварительно написанный код для использования в стандартных функциях и задачах программирования. Это основа для создания веб-сайтов или веб-приложений вокруг.
Давайте начнем с того, зачем нам нужны фреймворки JavaScript? Кодирование вполне возможно без их использования, но правильно подобранная среда может значительно облегчить работу. Более того, они бесплатные и с открытым исходным кодом, так что нет риска.
В первую очередь это повысит вашу производительность. Рассматривайте это как своего рода обходной путь: вам придется писать меньше кода вручную, потому что уже есть заранее написанные и готовые к использованию функции и шаблоны. Некоторые компоненты веб-сайта не должны быть изготовлены по индивидуальному заказу, поэтому вы можете создавать и расширять предварительно созданные компоненты. Фреймворки более адаптируемы для дизайна веб-сайтов, и большинство разработчиков сайтов предпочитают их. Давайте посмотрим на лучшие JS Frameworks.
В настоящее время лидером в области инфраструктуры JavaScript UI является React. Сначала разработчики Facebook начали работать над этим, чтобы упростить свою работу. Приложение под названием Facebook Ads росло очень быстро, что означало сложное управление и поддержку. В результате команда начала создавать структуру, которая поможет им с эффективностью. У них был ранний прототип до 2011 года, а два года спустя, структура была с открытым исходным кодом и доступна для общественности. В настоящее время его используют многие бизнес-гиганты: AirBNB, PayPal, Netflix и т. д.
React основан на компоненте многократного использования. Проще говоря, это блоки кода, которые можно классифицировать как классы или функции. Каждый компонент представляет определенную часть страницы, такую как логотип, кнопка или поле ввода. Используемые ими параметры называются реквизитами, что означает свойства. Говоря о синтаксисе, большинство разработчиков сходятся во мнении, что React легко освоить, когда вы уже знаете JavaScript.
React использует JSX, синтаксис XML, который сочетает в себе JavaScript и HTML. Это не шаблон JavaScript; это полный JavaScript. Поначалу некоторые новые разработчики могут найти JSX немного запутанным. Однако, поработав с ним некоторое время, вы поймете, насколько это полезно. Это библиотека, на которую вы должны обратить внимание, если вы занимаетесь интерфейсной веб-разработкой. Запишись на курсы программирования React.
Это также предпочтительная среда пользовательского интерфейса JavaScript для разработчиков приложений Google. Angular имеет компонентную структуру, как и React. Вы можете манипулировать, вкладывать и использовать их по мере необходимости. Вам нужно будет использовать TypeScript, чтобы написать приложение в Angular. Это расширенный набор JavaScript, который использует тот же синтаксис, но также поддерживает статическую типизацию и классы. В TypeScript вы получаете модификаторы доступа, перечисления, обобщения, гибридные типы и многое другое. Проще говоря, Angular — это фантастическая платформа, на которую можно взглянуть, если вы новый разработчик.
Vue — это JavaScript-фреймворк с открытым исходным кодом для создания креативного интерфейса. Интеграция с Vue в проектах, использующих другие библиотеки JavaScript, упрощена, поскольку она разработана для адаптации. Более 36 000 веб-сайтов в настоящее время используют Vue. Такие компании, как Stackoverflow, PlayStation и т.д., полагаются на Vue для своих сайтов пользовательского интерфейса.
Vue.js также довольно прост в освоении: все что нужно, это JavaScript и HTML. Другой сильной стороной Vue.js является его интерфейс командной строки (CLI). Это базовый инструмент, который ускоряет разработку, предлагая массу плагинов, пресетов, мгновенного прототипирования и интерактивного инструмента разработки проектов. Некоторые из его функций включают компоненты, шаблоны, переходы и двустороннее связывание данных, а также фокус реактивности. Реактивность возникает при изменении или обновлении любого из объектов JavaScript в Vue. Vue.js использует то, что называется Shadow DOM, что делает рендеринг страницы быстрым.
JQuery, пожалуй, самая популярная библиотека JavaScript с таким количеством функций для современной разработки. JQuery — это быстрая и лаконичная библиотека JavaScript, созданная Джоном Резигом в 2006 году. Это кроссплатформенная библиотека JavaScript, предназначенная для упрощения HTML-скриптинга на стороне клиента. Более 19 миллионов веб-сайтов в настоящее время используют jQuery! Такие компании, как WordPress, Facebook, Google, IBM и многие другие, полагаются на jQuery для обеспечения своего рода просмотра веб-страниц.
Вы можете использовать API jQuery для обработки, анимации и манипулирования событием в HTML-документе, также известном как DOM. Кроме того, jQuery используется со строительными инструментами Angular и React App. Одним словом, одна из самых важных библиотек JavaScript для веб-разработки.
Это одна из самых популярных платформ JavaScript. Его можно использовать для создания одностраничного приложения. Разработка этого фреймворка предполагает, что все функции на стороне сервера должны проходить через API, что поможет достичь сложной функциональности за счет написания меньшего количества кода.
Node.js — это серверная платформа с открытым исходным кодом, созданная на основе Google Chrome JavaScript Engine. Количество сайтов, использующих NodeJS, увеличилось на 84 000. Это одна из наиболее загруженных кроссплатформенных сред выполнения для выполнения кода JavaScript. Node.js — это асинхронная, однопоточная, неблокирующая модель ввода / вывода, которая делает ее легкой и эффективной. Пакетная экосистема Node.js, npm, также является крупнейшей в мире библиотечной экосистемой с открытым исходным кодом. Запишись на курсы программирования NodeJS.
Ember.js — это JavaScript-фреймворк с открытым исходным кодом, который был первоначально выпущен Иегудой Кацем в 2011 году. Первоначально он назывался SproutCore 2.0, прежде чем стал называться Ember.js. Работа над Ember Framework началась в 2011 году, а версия 1.0 была выпущена два года спустя.
Он также отлично масштабируется и может использоваться для больших проектов. Apple Music, которая имеет более 60 миллионов подписчиков по всему миру, была построена на Ember. Если вы хотите увидеть, что вы сможете — есть инструмент под названием Ember Inspector, который позволяет вам ближе познакомиться с проектами Ember в Интернете.
В Ember есть отличный инструмент для сборки, заимствованный из многих других сред SPA, называемый Ember CLI. Этот инструмент сборки имеет все необходимое для начала работы. Вам нужен роутер? Там встроено. Нужно пройти тестирование? Он тоже встроен. Вам нужно работать с внутренними данными? Есть данные на Эмбер. Ember.js следует многим тем же принципам, что и Ruby в Rails. Он очень продуман, гибок.
Веб-фреймворк под названием Skybreak был выпущен в конце 2011 года. Через пару месяцев команда сменила название на Meteor. Используя простой JavaScript, вы можете создавать приложения, которые можно использовать на разных платформах, включая, помимо прочего, Android и iOS. Среда Meteor JS предоставляет решения с полным стеком. Использование этой инфраструктуры включает в себя важные области, такие как внутренняя разработка, управление базами данных, бизнес-логика и внешний рендеринг.
Aurelia — это интерфейсная среда с открытым исходным кодом, разработанная Робом Айзенбергом. Aurelia 1.0 была выпущена впервые в 2016 году. Aurelia состоит из функционально-ориентированных модулей, таких как плагины, маршрутизация, тестирование, внедрение зависимостей и многое другое. Вы можете использовать среду Aurelia JS для разработки веб-приложений, приложений для мобильных устройств и компьютеров. Модульность также позволяет создавать приложения разных размеров. Aurelia поддерживает как Babel, так и TypeScript. Он также полностью совместим с будущими версиями JavaScript.
Из вариантов, представленных в этом руководстве, Aurelia может быть одной из самых молодых: мы получили версию 1.0 только в середине 2016 года. Однако это дает ему небольшое преимущество: по словам его создателей, Aurelia предлагает компонентную модель, которая наилучшим образом соответствует лучшим веб-стандартам. Он использует множество новых функций ECMAScript (ECMAScript помогает определять стандарты JavaScript) и рекомендует вам использовать эти новые функции для написания кода. Это хорошо, потому что вы не изучаете собственный синтаксис, который работает только с Aurelia. Проверьте это, если найдете это интересным!
Для тех из вас, кто является новичком в веб-разработке, вы услышите много циничных людей, говорящих о том, что мир JavaScript стал слишком быстрым. Они будут стонать, что новые библиотеки JavaScript и фреймворки выходят слишком быстро, и что все пытаются сделать то же самое. Они не ошибаются в том, что он быстро развивается, но это не должно помешать вам выйти и изучить эти фреймворки и библиотеки JavaScript.
Nest.js — самый важный и популярный фреймворк для создания серверных веб-приложений Node.js. В этом большом гайде мы поможем новичкам сделать первый шаг в освоении этого фреймворка для серверного Javascript и расскажем, в чем вообще особенности Node.js.
Для комфортного усвоения этого гайда вам потребуется:
- Знание JavaScript на среднем уровне
- Знание основ TypeScript, особенно синтаксиса декораторов
- Базовые знания Node.js. Желательно, опыт с Express.js
- Знание базовых понятий MVC (Model-View-Controller)
Также нам понадобится уставленные на компьютер:
Docker мы будем использовать для развёртывания базы данных. Развертывание СУБД в контейнере — один из самых простых способов. Но если вы хотите использовать другой способ, или же работать с уже имеющейся СУБД — нет проблем. В таком случае Docker вам не понадобится.
Прокачивайте свой уровень программирования: На Хекслете есть несколько десятков треков — специальных курсов для опытных программистов, позволяющие повысить уровень компетентности разработчика в разных направлениях.
Введение
Зачем нам нужен фреймворк?
Большинство задач в программировании — типовые. Если не брать каких-то специфических бизнес-кейсов, скорее всего все возможные задачи уже решены другими программистами и не по одному разу. Не зря в среде программистов среде так часто можно услышать шутки о «велосипедостроении». Фреймворки помогают нам писать меньше шаблонного кода и сосредоточиться на том, какую полезную работу должна делать наша программа.
Первым супер-популярным веб-фреймворком для Node.js был express.js. Nest.js значительно расширяет его функциональность, добавляет декларативности, а также помогает разработчику строить приложение в соответствии с лучшими архитектурными практиками.
Для примера мы напишем небольшой блог, в котором можно просматривать и добавлять статьи. Конечно, это будет очень простое приложение, но его будет достаточно для первого знакомства.
Создадим проект
Чтобы каждый раз не приходилось настраивать проект с нуля, разработчики Nest.js вооружили нас консольной утилитой — @nestjs/cli . Установим её глобально:
Теперь в вашей директории с проектами выполним команду nest new , указав имя проекта.
Когда cli закончит свою работу, мы можем перейти в директорию nestjs-getting-started и посмотреть, что получилось:
npm run start:dev
Запущенное командой npm run start:dev приложение будет перезагружаться каждый раз, когда изменяется исходный код проекта.
Остановить работающее приложение можно комбинацией клавиш Ctrl+C
Точка входа
Точкой входа в приложение на Nest.js, как и в любом другом MVC-подобном фреймворке, являются контроллеры. Пока в приложении имеется один: app.controller.ts:
Обратите внимание, что класс AppController и метод getHello() помечены декораторами @Controller() и @Get() . Nest.js очень широко использует декораторы, поэтому к ним лучше сразу привыкать. Они позволяют писать приложение в более декларативном ключе, указывая что мы хотим сделать, и оставляя детали реализации фреймворку.
Если читатель «плавает» в теме декораторов, рекомендуем к прочтению эту статью.
Соответственно, значение, которое вернётся из метода, будет отправлено в теле ответа. Код ответа по умолчанию для GET-запросов — 200.
Метод getHello() и конструктор мы пока удалим. Взамен создадим метод index() , который будет возвращать статьи. Контроллер приобретёт такой вид:
Обратите внимание, что мы возвращаем не «голый» массив, а заворачиваем его в объект c ключом articles . Нам это пригодится чуть дальше.
Статьи
Пришло время наполнить блог статьями. Но что такое «статья»? Каждая статья — объект, который будет иметь уникальный идентификатор, заголовок и контент.
Создадим в папке src новый файл article.model.ts и в нём опишем класс статьи:
Почему id — необязательный параметр, выяснится позже — когда будем подключать базу данных.
Теперь представим, что у нас в блоге уже есть парочка статей. Создадим файл articles.ts:
Осталось вернуть массив статей из метода index() в контроллере:
Если теперь запустить приложение, мы увидим в браузере следующее:
Добавляем HTML-шаблоны
Для того, чтобы пользователю было комфортнее работать с сайтом, сервер должен вернуть браузеру ответ не в формате json, а в виде html-страницы.
Создадим в корне проекта директорию views — в ней мы будем размещать HTML-шаблоны.
Устанавливаем шаблонизатор
Nest.js по умолчанию не устанавливает никаких движков шаблонизации, так как не знает, какой именно по душе пользователю. Мы для этого примера возьмём pug (ранее известный как jade). Этот пакет нам придётся установить самостоятельно:
Чтобы подключить pug, перепишем функцию bootstrap ( main.ts ):
Первый шаблон
Наш первый шаблон index.pug будет выглядеть так:
Добавление стилей выходит за рамки этой статьи, поэтому оставим это на усмотрение читателя.
В контроллере добавим к методу index декоратор @Render() (импортируется из пакета @nestjs/common ):
Готово. Теперь при запуске приложения мы увидим то, что и ожидали — html-страницу с двумя статьями.
Добавляем просмотр статей
В app.controller.ts создадим новый метод:
При помощи декоратора @Param() мы можем достать этот идентификатор из URL, преобразовать его к числу (ParseIntPipe) и использовать для поиска нужной статьи.
Кроме декоратора @Param() в Nest.js есть также декораторы @Query() для query-параметров и @Body() для тела запроса.
Добавим в папку views шаблон article.pug:
Шапка будет та же самая, только в тэге title мы выведем название статьи. В теле страницы — ожидаемо title и content , а также ссылка «назад» — на главную страницу.
Осталось починить ссылки на главной странице:
Добавляем статью
Метод getForm() не требует никакого возвращаемого значения — он просто возвращает статический HTML.
Шаблон create-article.pug будет выглядеть так:
Подключаем базу данных
Пока наш блог хранит статьи в оперативной памяти, они будут теряться при каждом перезапуске приложения. Чтобы избавиться от этой проблемы, нам нужно организовать долговременное хранение данных.
Мы используем для этого PostgreSQL — самую популярную на сегодня свободную СУБД. Проще всего поднять базу данных локально при помощи Docker:
Когда Docker закончит свою работу и контейнер с базой данных запустится, можно заняться подключением. Для работы с базой мы будем использовать ORM (Object-Relational Mapping System) под названием Typeorm. Эта система также как, и Nest.js, основана на декораторах, и хорошо интегрируется с фреймворком.
Установим необходимые пакеты:
Теперь мы можем подключить базу данных к проекту.
Особое внимание следует здесь уделить параметру synchronize: true . Эта настройка означает, что при каждом запуске приложения схема БД будет приобретать ту форму, которую мы описываем в коде (классы, помеченные @Entity ). На этапе активной разработки приложения это очень удобная возможность.
Функционально мы пока ничего в приложении не поменяли, но при старте, если подключение БД прошло успешно, мы увидим в консоли несколько SQL-запросов.
Переносим статьи в базу данных
Перепишем файл article.model.ts:
Здесь мы видим несколько новых декораторов:
- @Entity() — означает, что в базе данных нашей модели соответствует таблица.
- @Column() — полю класса соответствует поле в таблице
- @PrimaryGeneratedColumn() — автоматически генерируемый идентификатор, которой будет в нашей таблице первичным ключом.
Поскольку у нас включена синхронизация, в БД уже создалась таблица articles. Вы можете убедиться в этом при помощи любой утилиты для работы с БД, например DBeaver или DataGrip.
Последний штрих: удалим файл articles.ts и перепишем app.controller.ts так, чтобы он использовал базу данных:
Теперь наши статьи будут сохраняться в базе данных и никуда не пропадут, даже если мы перезапустим сервер.
Заключение
Nest.js позволяет нам написать простое приложение с минимальными усилиями. Однако истинная мощь фреймворка станет очевидна при более глубоком погружении. Среди особенно мощных возможностей, выделяющих его на фоне других:
Чтобы освоить всё это, а также более продвинутые возможности Nest.js, читателю предстоит пройти немалый путь, и автор надеется, что эта статья станет уверенным первым шагом на нем.
Весь код учебного проекта, который мы использовали в этой статье в качестве примера, вы можете посмотреть здесь.
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях.
Это руководство представляет собой введение в стандартные веб-компоненты, написанные без использования инфраструктуры JavaScript. Вы узнаете, что это такое и как адаптировать их для своих собственных веб-проектов. Необходимо хорошее знание HTML5, CSS и JavaScript.
Что такое веб-компоненты (Web Components)?
В идеале ваш проект разработки должен использовать простые независимые модули. У каждого должна быть четкая единственная ответственность. Код инкапсулирован: нужно только знать, что будет выводиться при заданном наборе входных параметров. Другим разработчикам не нужно проверять реализацию (если, конечно, нет ошибки).
Большинство языков поощряют использование модулей и повторно используемого кода, но разработка браузера требует сочетания HTML, CSS и JavaScript для отображения содержимого, стилей и функциональности. Связанный код может быть разделен на несколько файлов и может неожиданно конфликтовать.
Фреймворки и библиотеки JavaScript, такие как React, Vue, Svelte и Angular, облегчили некоторые головные боли, представив свои собственные компонентные методы. Связанные HTML, CSS и JavaScript можно объединить в один файл. К сожалению:
- другое дело учиться
- фреймворки развиваются, и обновления часто требуют рефакторинга кода или даже его переписывания.
- компонент, написанный в одном фреймворке, обычно не работает в другом, и
- фреймворки могут быть тяжелыми и ограниченными возможностями JavaScript.
Десять лет назад многие из понятий, введенных JQuery были добавлены в браузеры (такие как querySelector, ближайший, ClassList, и так далее). Сегодня поставщики внедряют веб-компоненты, которые работают в браузере без фреймворка.
На это ушло время. Алекс Рассел сделал первоначальное предложение в 2011 году. Полимерный фреймворк Google (polyfill) появился в 2013 году, но прошло три года, прежде чем его собственные реализации появились в Chrome и Safari. Были некоторые напряженные переговоры, но Firefox добавил поддержку в 2018 году, а затем Edge (версия Chromium) в 2020 году.
Как работают веб-компоненты (Web Components)?
Рассмотрим HTML5 элементы, которые позволяют пользователям воспроизводить, приостанавливать, перематывать и перематывать мультимедиа с помощью ряда внутренних кнопок и элементов управления. По умолчанию браузер обрабатывает макет, стиль и функциональность.
Затем для вашего пользовательского элемента регистрируется класс JavaScript ES2015. Он может добавлять элементы DOM, такие как кнопки, заголовки, абзацы и т. Д. Чтобы они не конфликтовали с остальной частью страницы, вы можете прикрепить их к внутренней Shadow DOM, имеющей собственные стили с ограниченными областями. Вы можете думать об этом как о мини <iframe>, хотя свойства CSS, такие как шрифты и цвета, наследуются через каскад.
Наконец, вы можете добавлять контент в Shadow DOM с помощью повторно используемых HTML-шаблонов, которые предлагают некоторую конфигурацию с помощью <slot>тегов.
Стандартные веб-компоненты рудиментарны по сравнению с фреймворками. Они не включают в себя такие функции, как привязка данных и управление состоянием, но у веб-компонентов есть ряд неоспоримых преимуществ:
Ваш первый веб-компонент
Для начала добавьте <hello-world></hello-world> элемент на любую веб-страницу. (Закрывающий тег важен: вы не можете определить самозакрывающийся <hello-world />тег.)
Создайте HelloWorldкласс в своем файле сценария:
Веб-компоненты должны расширять интерфейс HTMLElement, который реализует свойства и методы по умолчанию для каждого элемента HTML.
Примечание. Firefox может расширять определенные элементы, такие как HTMLImageElementи HTMLButtonElement. Однако они не поддерживают Shadow DOM, и эта практика не поддерживается в других браузерах.
Браузер запускает connectedCallback()метод всякий раз, когда пользовательский элемент добавляется в документ. В этом случае изменяется внутренний текст. (Теневой DOM не используется.)
Загрузите страницу, и появится надпись «Hello World». Новый элемент можно стилизовать в CSS с помощью hello-world селектора:
Создать <word-count> компонент
<word-count> Компонент является более сложным. Этот пример может генерировать количество слов или количество минут, чтобы прочитать статью. Интернационализация API можно использовать для вывода цифр в правильном формате.
Могут быть добавлены следующие атрибуты элемента:
На <word-count>страницу можно добавить любое количество элементов. Например:
Конструктор WordCount
Новый WordCountкласс создается в модуле JavaScript с именем word-count.js:
Статическое wordsсвойство хранит количество слов на странице. Он рассчитывается один раз и используется повторно, поэтому другим <word-count>элементам не нужно повторять работу.
constructor()Функция выполняется при создании каждого объекта. Он должен вызвать super()метод для инициализации родителя, HTMLElementа затем при необходимости установить другие значения по умолчанию.
Прикрепите теневой DOM
Конструктор также определяет теневой DOM attachShadow()и сохраняет ссылку в shadowсвойстве, поэтому его можно использовать в любое время.
modeМожет быть установлен:
Этот компонент добавляет простой текст, и внешние изменения не критичны. Использование openдостаточно, чтобы другой JavaScript на странице мог запрашивать контент. Например:
Наблюдение за атрибутами WordCount
К этому веб-компоненту можно добавить любое количество атрибутов, но он касается только четырех, перечисленных выше. Статическое observedAttributes()свойство возвращает массив свойств для наблюдения:
this.updateCount();Вызов делает компонент, поэтому он может быть повторно запущен, если атрибут изменен после того, как она отображается в первый раз.
WordCount Визуализация
Две другие функции доступны в течение жизненного цикла веб-компонента, хотя здесь они не нужны:
- disconnectedCallback(): вызывается, когда веб-компонент удаляется из объектной модели документа. Он может очистить состояние, прервать запросы Ajax и т. Д.
- adoptedCallback(): вызывается, когда веб-компонент перемещается из одного документа в другой. Я никогда не находил ему применения!
updateCount()Метод вычисляет количество слов, если это не было сделано раньше. Он использует содержимое первого <main>тега или страницы, <body>когда оно недоступно:
Затем он обновляет Shadow DOM счетчиком слов или минут (если minutesатрибут установлен):
Затем регистрируется класс веб-компонента:
Раскрытие теневого DOM
Объемный стиль
Стили, установленные в Shadow DOM, привязаны к веб-компоненту. Они не могут влиять на внешние элементы страницы или быть изменены извне (хотя некоторые свойства, такие как font-family, цвета и интервал, могут передаваться каскадом):
Вы можете настроить таргетинг на сам элемент веб-компонента с помощью :hostселектора:
Стили также можно применять, когда веб-компоненту назначен определенный класс, например <my-component >
Переопределение стилей теней
Переопределить стили с ограниченной областью видимости непросто, и, вероятно, этого не должно быть. Есть несколько вариантов, если вы хотите предложить уровень стиля потребителям вашего веб-компонента:
События теневой DOM
Веб-компоненты могут присоединять события к любому элементу в теневой модели DOM так же, как и в модели страницы. Например, чтобы прослушать нажатие кнопки:
Событие всплывет на внешнюю страницу DOM, если вы не предотвратите это с помощью e.stopPropagation(). Однако событие перенаправлено; внешняя страница будет знать, что это произошло с вашим настраиваемым элементом, но не знает, какой элемент Shadow DOM был целью.
Определение HTML внутри вашего класса может быть непрактичным. Шаблоны HTML определяют фрагмент HTML на вашей странице, который может использоваться любым веб-компонентом:
- вы можете настроить HTML-код на клиенте или сервере без необходимости переписывать строки в классах JavaScript
- компоненты можно настраивать, не требуя отдельных классов JavaScript для каждого типа
HTML-шаблоны определяются внутри <template>тега. Идентификатор обычно определяется, поэтому вы можете ссылаться на него:
Код класса может получить этот шаблон.contentи клонировать его, чтобы создать уникальный фрагмент DOM перед внесением изменений и обновлением Shadow DOM:
Использование слотов для шаблонов
Шаблоны можно настраивать с помощью <slot>. Например, вы можете создать следующий шаблон:
Затем определите компонент:
На самом деле каждый <slot> указывает на свои вставленные элементы. Вы должны найти a <slot>в Shadow DOM, а затем использовать .assignedNodes()для возврата массива дочерних узлов, которые можно изменить. Например:
Невозможно напрямую стилизовать вставленные элементы, хотя вы можете настроить таргетинг на слоты и каскадировать свойства CSS:
Слоты немного громоздки, но содержимое отображается до запуска JavaScript вашего компонента. Их можно использовать для элементарного прогрессивного улучшения.
Декларативный теневой DOM
Компонент определяется с внутренним, <template>который имеет shadowrootнабор атрибутов, чтобы openили closedв случае необходимости:
После этого Shadow DOM будет готов к запуску класса компонента; он может обновлять содержимое по мере необходимости.
Эта функция появится в браузерах на базе Chrome, но еще не готова, и нет гарантии, что она будет поддерживаться в Firefox или Safari (хотя она легко полифицируется). Для получения дополнительной информации см. Декларативную теневую DOM.
Включающие входы
<input>, <textarea>И <select>поле, используемое в тени DOM являются не связанно с содержащей формой. Некоторые авторы веб-компонентов добавляют скрытые поля к DOM внешней страницы или используют интерфейс FormData для обновления значений, но это нарушает инкапсуляцию.
Новый интерфейс ElementInternals позволяет веб-компонентам ассоциировать себя с формами. Он реализован в Chrome, но для других браузеров требуется полифил.
Класс веб-компонента должен определять статическое formAssociatedсвойство как trueи при необходимости может предоставлять formAssociatedCallback()метод, который вызывается, когда форма связана с элементом управления:
Конструктор должен работать, this.attachInternals()чтобы компонент мог взаимодействовать с формой и другим кодом JavaScript. Метод ElementInternal setFormValue()устанавливает значение элемента (инициализируется пустой строкой):
connectedCallback()Метод делает Shadow DOM, как и раньше, но он также должен смотреть на поле для изменения и обновления значения:
ElementInternal также может предоставлять информацию о форме, метках и параметрах API проверки ограничений.
Будущее за веб-компонентами?
Если вы работаете с фреймворком JavaScript, веб-компоненты могут показаться низкоуровневыми и несколько громоздкими. Также потребовалось десятилетие, чтобы прийти к соглашению и достичь разумного уровня кросс-браузерной совместимости. Неудивительно, что разработчики не спешили их использовать.
Веб-компоненты не идеальны, но они будут развиваться, и их можно будет использовать уже сегодня. Они легкие, быстрые и предлагают функциональность, невозможную только в JavaScript. Более того, их можно использовать в любом фреймворке JavaScript.
Суть модульного тестирования заключается в проверке небольших изолированных фрагментов кода. Если тест использует внешний ресурс, например сеть или базу данных, он уже не является модульным.
Фреймворки модульного тестирования описывают тесты в человекочитаемом формате, чтобы те, кто не связан с технической сферой, смогли в них разобраться. Однако даже если вы являетесь представителем технической сферы, тесты в формате BDD могут значительно облегчить поиск проблемы.
Например, чтобы протестировать следующую функцию:
Нужно написать тест jasmine spec:
② Функция it(string, function) определяет отдельную спецификацию теста, которая содержит одно или несколько ожиданий теста.
Setup и teardown
В некоторых случаях при тестировании функции необходимо выполнить настройку. Например, создать несколько тестовых объектов. Кроме того, после завершения теста может потребоваться очистка. Например, удаление файлов с жесткого диска.
Эти действия называются setup и teardown (для очистки). В Jasmine есть несколько функций для упрощения этого процесса:
beforeAll вызывается один раз перед запуском всех спецификаций в тестовом наборе.
afterAll вызывается один раз после завершения всех спецификаций в тестовом наборе.
beforeEach вызывается перед каждой спецификацией теста, если функция запущена.
afterEach вызывается после выполнения каждой спецификации теста.
Использование в Node
В проекте Node файлы модульного теста определяются в папке test в одной директории с папкой src :
Тест содержит файлы спецификации, которые являются модульными тестами для файлов в папке src. В package.json test находится в разделе script .
Если в командной строке запущен npm run test , тестовый фреймворк jest запустит все файлы спецификации в папке test и отобразит результат в командной строке.
Переходим к созданию собственного тестового фреймворка, который будет работать на Node.
Начнем с создания проекта Node:
Устанавливаем зависимость chalk, с помощью которой мы будем раскрашивать результаты тестов: npm i chalk .
Создаем папку lib, в которой будут находиться файлы:
Создаем папку bin, поскольку фреймворк будет использоваться в качестве инструмента CLI Node:
Начнем с создания файла CLI.
Создаем файл kwuo в папке bin и добавляем следующее:
Переходим к установке и заполнению lib/cli/cli.js.
Этот файл находит папку test, получает все файлы из нее и запускает их.
Однако ни одна из них не определена в этих файлах. Каким образом файлы и функции работают без ReferenceError? Причина в том, что тестовый фреймворк реализовывает функции и устанавливает их как global перед запуском тестовых файлов.
Создаем файл index.js в папке lib:
Здесь мы устанавливаем глобальные переменные и реализуем функции describe , it , expect , afterEach , beforeEach , afterAll и beforeAll :
Затем устанавливаем массивы beforeEachs, afterEachs, afterAlls и beforeAlls. beforeEachs содержит функции, которые вызываются в начале функции it , к которой он прикреплен. afterEachs вызывается в конце it . beforeEachs и afterEachs вызываются в начале и конце describe .
stats собирает статистику каждой функции describe, а curDesc обозначает текущую функцию describe, запущенную для сбора данных тестирования. currIt содержит запущенную в данный момент функцию it, выполняющую сбор тестовых данных.
Также у нас есть функция expect. Она выполняет тестирование:
Функция expect принимает аргумент для тестирования и возвращает объект, который содержит функции matcher. В данном случае она возвращает объект с функциями toBe и toEqual с аргументом, который они используют для сопоставления с аргументом значения, предоставляемым функцией expect. toBe использует === для сопоставления аргумента значения с ожидаемым аргументом. toEqual использует == для проверки фактического значения с ожидаемым. Функции увеличивают переменные passedTests и failedTests в зависимости от результатов теста, а также записывают статистику в переменную currIt. Мы используем только две функции matcher, однако их гораздо больше:
- toThrow
- toBeNull
- toBeFalsy
- и т. д.
Вы также можете реализовать их.
Функция describe выполняет те же действия, что и it , но вызывает beforeAlls и afterAlls в начале и в конце.
Функция showTestsResults анализирует массив stats и печатает пройденные и неудачные тесты на терминале.
Таким образом, мы реализовали и установили все функции в объект global , чтобы тестовые файлы могли вызывать их без ошибок.
runTestFiles принимает файлы в массиве, просматривает их с помощью метода forEach и использует метод require для запуска каждого файла.
Структура папки kwuo выглядит следующим образом:
Тестирование фреймворка
Попробуем протестировать наш фреймворк с реальным проектом Node.
Создаем папку src и добавляем add.js и sub.js:
Содержимое add.js и sub.js:
Создаем папку test и тестовые файлы:
Файлы спецификации будут проверять функции add и sub в add.js и sub.js:
Запускаем npm run test в командной строке:
Результат теста будет следующим:
Читайте также: