Автор оригинала: ASHUTOSH K SINGH.
JavaScript – один из самых популярных языков в Интернете. Несмотря на то, что он был изначально разработан только для веб-страниц, он видел экспоненциальный рост за последние два десятилетия.
Теперь JavaScript способен делать практически все и работает на нескольких платформах и устройствах, включая IOT. И с недавним запуском Dragon SpaceX JavaScript даже в космосе.
Одной из причин его популярности является наличие большого количества рамки и библиотек. Они делают развитие намного легче по сравнению с традиционным ванильным развитием JS.
Есть библиотеки практически все, и больше выходят почти каждый день. Но с таким количеством библиотек к выбору из этого становится трудно отслеживать каждого и то, как оно может быть адаптировано специально для ваших потребностей.
В этой статье мы обсудим 10 самых популярных библиотек JS, которые вы можете использовать для создания следующего проекта.
Я думаю, что Leaflet – лучшая библиотека открытого исходного кода для добавления мобильных интерактивных карт в ваше приложение.
Его маленький размер (39КБ) делает его великой альтернативой, чтобы рассмотреть другие библиотеки карты. С кросшкойной эффективностью и хорошо документированной API у него есть все, что вам нужно, чтобы вы влюбились.
Вот какой-то пример код, который создает карту листовки:
var map = new L.Map("map", {
center: new L.LatLng(40.7401, -73.9891),
zoom: 12,
layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});В брошюре нам нужно обеспечить плитку, так как по умолчанию нет ни одного. Но это также означает, что может выбрать из широкого ассортимента слоев как свободной, так и премии. Вы можете исследовать различные слои свободных плиток здесь Отказ
Прочитайте Документы или следовать за Учебники Узнать больше.
Эта библиотека с открытым исходным кодом помогает создавать полноэкранные веб-сайты прокрутки, как вы можете видеть в вышеупомянутом GIF. Он прост в использовании и имеет много вариантов настроить, поэтому не удивительно, что он используется тысячами разработчиков и имеет более 30 тысяч звезд на Github.
Вот демонстрационная демонстрация, с которой вы можете играть с:
Вы даже можете использовать его с популярными каркасами, такими как:
Я наткнулся на эту библиотеку около года назад, и с тех пор она стала одним из моих любимых. Это одна из немногих библиотек, которые вы можете использовать практически в каждом проекте. Если вы еще не начали использовать его, просто попробуйте, вы не будете разочарованы.
Одна из лучших библиотек анимации там, Anime.js гибкий и простой в использовании. Это идеальный инструмент, который поможет вам добавить некоторую крутую анимацию в ваш проект.
Anime.js хорошо работает с свойствами CSS, атрибутами SVG, DOM и объектами JavaScript и могут быть легко интегрированы в ваши приложения.
Как разработчик, важно иметь хорошее портфолио. Первые впечатления, которые у людей есть из вашего портфолио, помогают решить, будут ли они нанимать вас или нет. А какой лучший инструмент, чем эта библиотека, чтобы принести жизнь в ваше портфолио. Он не только улучшит ваш сайт, но поможет продемонстрировать фактические навыки.
Проверьте этот кодепен, чтобы узнать больше:
Вы также можете взглянуть на все остальные классные проекты на Кодепен или Прочитайте документы здесь Отказ
Я наткнулся на эту библиотеку во время поиска способа реализации полноэкранной функции в моем проекте.
Если вы также хотите иметь полноэкранную функцию, я бы порекомендовал использовать эту библиотеку вместо Полноэкранный API Из-за его эффективности кросс-браузера (хотя она построена поверх этого).
Это настолько маленькое, что вы даже не заметите это – всего около 0,7 кБ.
Попробуйте Демо или прочитать Документы Узнать больше.
Работа с датой и временем может быть огромная боль, особенно с вызовами API, разные часовые пояса, местные языки и так далее. Moment.js может помочь вам решить все эти проблемы, независимо от того, ли он манипулируют, проверяют, разборки или форматирование даты или времени.
Есть так много прохладных методов, которые действительно полезны для ваших проектов. Например, я использовал .FROMNow () Способ в одном из моих проектов блога, чтобы показать время, которое статья была опубликована.
const moment = require('moment');
relativeTimeOfPost = moment([2019, 07, 13]).fromNow();
// a year ago
Хотя я не использую это очень часто, я поклонник его поддержки для интернационализации. Например, мы можем настроить вышеупомянутый результат с использованием .locale () метод.
// French
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow();
//il y a un an
// Spanish
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow();
//hace un añoПрочитайте Документы здесь Отказ
Обновление сентября 2020 года: Moment.js вступил в режим обслуживания. Подробнее об этом здесь Отказ Вы можете узнать, такие альтернативы, как Day.js или Дата FNS Отказ
Hamber.js – это легкая библиотека JavaScript, которая позволяет добавлять жесты с несколькими касанием в ваши веб-приложения.
Я бы порекомендовал эту библиотеку добавить несколько удовольствий к вашим компонентам. Вот пример для игры. Просто запустите ручку и нажмите или нажмите на серый Div.
Он может распознать жесты, сделанные прикосновением, мыши и улучшенными ценами. Для пользователей jQuery я бы порекомендовал использовать jQuery Plugin Отказ
$(element).hammer(options).bind("pan", myPanHandler);Прочитайте Документы здесь Отказ
Masonry – это библиотека макета сетки JavaScript. Это супер потрясающий, и я использую его для многих моих проектов. Он может принять ваши простые элементы сетки и поместить их на основе доступного вертикального пространства, вроде как подрядчики соответствуют камням или блокам в стену.
Вы можете использовать эту библиотеку, чтобы показать свои проекты в другом свете. Используйте его с картами, изображениями, модалами и так далее.
Вот простой пример, чтобы показать вам магию в действии. Ну, не волшебство точно, но как планировка меняется, когда вы Увеличить на веб-страница.
И вот код для вышеуказанного:
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
itemSelector: '.grid-item',
columnWidth: 400
});
var msnry = new Masonry( '.grid');
Вот классная демонстрация на кодепене:
Проверьте эти проекты
- https://halcyon-theme.tumblr.com/
- https://tympanus.net/Development/GridLoadingEffects/index.html
- https://www.erikjo.com/work
Если вы одержимый данными разработчиком, эта библиотека для вас. Мне еще предстоит найти библиотеку, которая манипулирует данные как эффективно и красиво, как D3. Благодаря более чем 92 тысячам звезд на GitHub D3 – любимая библиотека визуализации данных многих разработчиков.
Я недавно использовал D3 для визуализации данных COVID-19 с реагированием и Джонс Хопкинс CSSE Data Repository на GitHub Отказ Это я был действительно интересным проектом, и если вы думаете о том, чтобы сделать что-то подобное, я бы предложил дать D3.js попробую.
Подробнее об этом здесь Отказ
Slick полностью отзывчивый, промежуточный, бесконечный цикл и многое другое. Как упоминалось на домашней странице, это действительно последняя карусель, которую вам когда-либо понадобится.
Я использовал эту библиотеку на некоторое время, и она спасла меня так много времени. Благодаря нескольким строкам кода вы можете добавить так много функций для вашей карусели.
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});Проверьте демонстрацию здесь Отказ
POPPER.JS – это легкая ~ 3 Kb JavaScript Library с нулевыми зависимостями, которые обеспечивают надежный и расширяемый механизм позиционирования, который вы можете использовать, чтобы убедиться, что все ваши элементы Popper расположены в нужном месте.
Возможно, не может показаться важно, чтобы проводить время настроить элементы Поппера, но эти мелочи – это то, что заставляет вас выделиться как разработчик. И с таким небольшим размером он не занимает много места.
Прочитайте Документы здесь Отказ
Как разработчик, имеющий и использование правильных библиотек JavaScript, важно. Это сделает вас более продуктивным и сделает развитие намного проще и быстрее. В конце концов, это зависит от вас, какую библиотеку предпочитаю на основе ваших потребностей.
Это 10 библиотек JavaScript, которые вы можете попробовать и начать использовать в своих проектах сегодня. Какие еще крутые библиотеки JavaScript вы используете? Хотите ли вы еще одну статью? Tweet И дайте мне знать.