Автор оригинала: FreeCodeCamp Community Member.
Энтони Нг
Это часть моего плана для преднамеренной практики для улучшения как разработчика. Посмотрите на Эта статья Узнать больше.
В этой статье мы посмотрим на библиотеку под названием классы (Вот оформление репозиторий GitHub ). классы Предоставляет простую API для создания названий классов в реакции. Мы посмотрим на то, что это делает, и то, что я узнал, пройдя через их репо.
Как пользоваться?
классы API очень прост. У них есть отличные примеры в их Readme.md Отказ
Вы можете пройти строковые аргументы, как так:
классы Также принимайте объекты как аргументы. Если значение ключа является falsy (false, null, undefined, 0, nan, пустая строка), классы пропускает значение.
классы также принимает массивы в качестве аргументов. Аргументы массива рекурсивно сплющены и обрабатываются с использованием вышеуказанных правил. Вы можете смешивать и сопоставить различные типы аргументов (строки, массивы, объекты).
Использование с реакцией
Первичное использование этого пакета является создание имени класса RACT проще для работы.
Без классы Возможно, вы могли бы использовать строковые манипулирование для создания названий классов Rection.
Теперь с классы Пакет, это будет выглядеть так:
Общие ошибки: «Неопределенные» классы
Самая распространенная ошибка, которую я вижу на работе, используя классы являются undefined названия классов.
Помните, что фальсивые значения игнорируются внутри классы упаковка.
Зная это, мы можем обновить наше классы Пример:
Разные версии, которые вы можете выбрать: DEDUPE
Есть 2 вопроса, к которым вы можете столкнуться. Вы видите их?
К счастью, классы Обеспечивает версию своей библиотеки для нас, чтобы использовать, называемые дедеп Отказ
Это больше походит на это. Обратите внимание, что дедеп около 5x медленнее, чем по умолчанию классы упаковка. Используйте это только при необходимости.
Разные версии, которые вы можете выбрать: привязать
привязывать это еще одна опционная версия классы Отказ Это предназначено для того, чтобы помочь нам, когда мы используем модули CSS с реагированием. Но я нахожу, что по умолчанию классы Пакет хорошо работает с модулями CSS.
Посмотрите на Readme.md за дополнительной информацией.
Object.Create (NULL)
Это лучшая практика для использования HasownProperty При итерации на ключах объекта. Вы можете проверить, принадлежит ли ключ к объекту или унаследовано.
Мы бы использовали HasownProperty Чтобы получить свойства, которые принадлежат к нашему созданному объекту.
Вместо использования HasownProperty , мы можем создать новый объект, который не наследует ничего!
Но это также означает методы, которые объекты наследуют, такие как TOSTRING не будет существовать на этом новом объекте.
Удивительная документация и отличные тесты
Просмотрите исходный код классы Отказ Это заморожено удивительным комментариями и документацией.
Потрясающая документация – это не то, что исключительно для проектов с открытым исходным кодом.
Вы нашли отличный фрагмент кода, который вы использовали в вашем личном проекте? Вы провели часы поиска идеального ответа Stackoverflow? Включите эти ссылки в качестве комментариев в вашем коде! Он спасет других разработчиков (и будущего вас), когда выяснить, что происходит.
классы Удивительная документация на их readme.md. Он имеет богатые примеры, которые показывают все, что может сделать этот пакет.
Документация и комментарии отличные. Тем не менее, они могут гнить и стать вне синхронизации с тем, что на самом деле делает код. Но тесты не лгут! Хорошо написанные тесты расскажут вам все, что пакет должен быть в состоянии сделать и не делать. Если вы новичок в библиотеке, проверьте свои тесты, чтобы получить лучшее понимание библиотеки.
Применить/call.
Зная, как использовать JavaScript Применить и Позвоните Есть ли вопросы о хорошем интервью. Но я редко собираюсь использовать их в реальном мире. Видеть это внутри классы Пакет был хорошим компенсацией того, что он делает.
Применить и Позвоните в основном делать то же самое. Он устанавливает это вызывающей функции.
Например,
Разница возникает, когда вы хотите пройти аргументы в функцию вызывающей связи. Давайте посмотрим на функцию, которая принимает аргументы.
Обратите внимание на небольшую разницу здесь. Применить Принимает свои аргументы в массиве (я помню это, помнив, что Применить и Массив Оба начинаются с A ). Позвоните Принимает свои аргументы по отдельности, как нормальная функция.
классы использует Применить Чтобы обрабатывать аргументы массива, переданные в него.
Не доверяй ничего
Посмотрите на фрагмент кода ниже.
Почему мы сохраняем HasownProperty Функция для переменной? Это потому, что мы должны быть защищены в отношении приведенных аргументов. Мы захватываем HasownProperty от Объект. Прототип Отказ Давайте посмотрим на почему.
В этом есть смысл. Но что, если кто-то пройдет нам, как это так:
Используя HasownProperty Функция из Объект. Прототип это безопасная альтернатива.
Но обратите внимание, что даже это не надежно. Ниже приведено еще возможно.
HTML-объекты
Я всегда забываю о HTML-сущностях. Я всегда ищу причудливое изображение, но использование HTML-объектов хорошо поддерживается и может сэкономить вам HTTP-запрос для изображения.
Прежде чем начать чистить изображения Google для активов, посмотрите на это Диаграмма Чтобы увидеть, имеет ли у него то, что вам нужно.
Производительность исполнения
Вам больше не нужно спорить с вашим сотрудником о для петлей против для каждых петлей ! Вы можете урегулировать все споры, увидев, как он выполняет с использованием стационарных инструментов (таких как jsperf ).
классы загружается и используется многими, а производительность самая большая проблема. Различия в производительности рассматриваются до того, как будут приняты какие-либо запросы на тягу.
Ваши личные проекты могут быть беспокоиться о производительности. Но хорошо поддерживать в виду производительность. Занять пару минут, чтобы играть с jsperf и настроить свои собственные тесты.
Travis.yml.
Заинтересованы в добавлении причудливых значков в ваш readme.md? Проверьте это отличное EGGHEAD Учебное пособие Кент C. Dodds при запуске собственного проекта с открытым исходным кодом. Он охватывает часто-игнорируемые темы, такие как создание непрерывной интеграции, используя семантический выпуск, публикацию на NPM и многое другое.
Гит виноват, следуйте, история
Вы когда-нибудь столкнулись с определенной линейкой кода и были любопытны о том, как это должно быть? Используйте Гит виноват Особенность из веб-сайта GitHub. Он скажет вам, когда это было написано, кто написал его, и что это зафиксировало.
Вы также можете просмотреть историю файла и посмотреть, как он развился с помощью История Git расположен прямо рядом с Гит виноват Отказ Просмотр всех коммитов показывает, как определенный файл эволюционировал со временем.
Я рекомендую вам найти проект с открытым исходным кодом, который вам нравятся и используют, и начнем свой вклад к нему. Вы можете Смотреть Репозиторий и получать уведомления, когда есть какие-либо обновления. Вы не можете быть готовы к изменению кода. Но обновление документации или помощи с проблемами других людей также ценны.
Спасибо за чтение этого, и я надеюсь, что вы узнали что-то новое.