25 от най-добрите API на JavaScript

Ето нашия избор на най-добрите API на JavaScript в момента, както и ръководство за започване на използването им. Те ще ви помогнат да добавите нова и интересна функционалност към вашите сайтове и приложения. Предупреждение: много от тези приложни програмни интерфейси все още са в процес на разработка, така че не забравяйте да проверите поддръжката на браузъра, преди да започнете да ги използвате, и осигурете резервни копия, когато е необходимо.

За още страхотни плъгини за разглеждане, разгледайте нашите ръководства за най-доброто API на HTML и API на Google . Или за изграждане на сайт от нулата (без код) използвайте a уеб конструктор . Освен това е жизненоважно да обмислите избора си уеб хостинг услуга, за да сте сигурни, че вашият сайт работи както искате.

01. Променете настройките на браузъра

Докато браузърът обикновено е „над“ всеки код, работещ в него, API, извлечен от Mozilla, позволява на JavaScript ограничен достъп до настройките на браузъра. Помислете за аспекти като четене на началната страница на потребителя, как се обработват отметките и къде се показват нови раздели.



02. API за файлове

Работата с големи количества постоянни данни винаги е била малък проблем за уеб приложенията. API на файла W3C комбинира някои от концепциите, използвани от различни доставчици - моля, имайте предвид, че пълният достъп до файловата система обикновено не се предоставя, най-вече от съображения за сигурност.

03. Когнитивни услуги на Microsoft

API на JavaScript: Когнитивни услуги на Microsoft

(Кредит за изображение: Microsoft)

Изкуственият интелект изисква екстремни количества данни за обучение - логично е, че продавачите не са мотивирани да предоставят тези модели на своите клиенти. Вместо това разработчиците имат право да изпращат полезни товари към сървър, който след това се анализира онлайн.

Докато всички големи доставчици на облаци предлагат повече или по-малко усъвършенствани услуги за изкуствен интелект, Microsoft се откроява със своя фокус върху функциите на AI. Офертите на API се включват под термина когнитивни услуги; можете да получите достъп до функции като разширени услуги за разпознаване на изображения. Например моментната снимка, придружаваща това поле, показва, че AI се използва за разпознаване на изпълнителния директор на Microsoft от снимка в пресата - други функции са свързани с разпознаването и транскрипцията на видео, ръкопис и звук.

Въпреки че качеството на продукцията обикновено е много високо, имайте предвид, че продължаващата употреба е почти не евтина - с течение на времето таксите за използване могат и се събират. (Ако имате мултимедийни файлове за архивиране, използвайте най-доброто съхранение в облак .)

04. API за отворено правителство

Демократично избраните представители обикновено показват голямо умение за трансформиране на парите. Концепцията за отворено управление означава, че резултатите от тези работи се предоставят чрез (обикновено отворени) API, което позволява на разработчици на трети страни да извършват всякакви магии за събиране на данни.

Една особено интересна област се отнася до транспорта: услугите на обществения транспорт са склонни да предоставят API с местоположения на техните превозни средства и честотите, наблюдавани в маршрутната мрежа.

Това не се прави от чист алтруизъм: когато се направи правилно, приложението за „местен трафик“ за определен град или град може бързо да се изкачи в редиците на местния магазин за приложения. Правителството не трябва да инвестира ресурси в създаването на услугата, докато разработчикът - обикновено - изкарва добре продажбата на рекламно пространство поради локално ограничената аудитория.

В допълнение към тези приложни програмни интерфейси (API), разработчиците обикновено се освобождават и от други неща. Френското правителство например ще предостави относително подробни възможности за търсене на адреси.

05. ТУК API за картографиране

API на JavaScript: ТУК

(Кредит за изображение: ТУК)

Състезанието по дефиниция е добро. Ето бившето картографско подразделение на Nokia и предлага на разработчиците алтернатива на „трета страна“ на картографските услуги от големите три. Един интересен аспект е изключително простият API, който прави изтеглянето на плочки лек бриз.

06. API на OpenStreetMap

OpenStreetMap не предоставя готови за показване карти. Вместо това ще е необходима услуга за визуализиране, като CartoType. Когато работите върху уебсайт, създаването на специална система за рендиране е малко работа - MapBox предоставя удобна алтернатива за заплащане за използване.

07. Магистър по лингвистика

Програмите, занимаващи се с генерирано от потребителите съдържание, могат да печелят точки за брауни, като предлагат интегрирана услуга за превод. Клиент за Twitter или Gab може например да превежда текстове на английски на руски, за да ги улесни в работата с тази аудитория.

Докато „системите за машинен превод“ са сред най-старите научни области в ИТ, създаването на работещ машинен преводач на ръка е трудно. API за превод на Microsoft наскоро беше актуализиран до версия 3.0 и представлява едно гише за всички проблеми от обхвата на babelese. В допълнение към извършването на преводи между езикови двойки, услугата може да се използва и за установяване на кой език е даден текст. След това можете да използвате тези данни, за да конфигурирате по-малки API, като например проверката на правописа.

И накрая, идиоми и отделни думи също могат да бъдат изпратени в речникова заявка. Върнатата информация зависи от ситуацията - в някои случаи Microsoft може дори да върне десетки идиоми, за да помогне за разбирането.

08. API за платно извън екрана

Веднъж разработчиците са използвали техника, наречена двойно буфериране, за да изобразяват графики без трептене. Google представи нещо подобно - създава прозорец извън екрана, където графиките могат да бъдат „инсценирани“ с висока производителност.

09. НАСА

API на JavaScript: NASA

(Кредит за изображение: Microsoft)

Решението на Microsoft да предостави на потребителите на Windows Phone 7 случайни кураторски тапети предизвика вълнения в индустрията. Като се има предвид, че снимките на Космоса са винаги популярни, защо да не отидете направо до източника и да си вземете няколко от безкрайния магазин на НАСА?

10. Вземете Slack данни

Slack се утвърди като инструмент за „модерно управление на проекти“. Ако някога ви се прииска да използвате данни, съдържащи се в такъв проект, вземете си API маркер и хакнете. Когато бъде направено правилно, вашето уеб приложение може дори да се интегрира в Slack GUI.

11. API на YouTube

API на JavaScript: YouTube

(Кредит за изображение: Microsoft)

Каналът в YouTube е толкова добър, колкото аналитиката, която стои зад него. Приложният програмен интерфейс (API) на YouTube за данни на Google може да не е особено пикантен, но освен всичко друго предоставя ценна информация за поведението на вашата аудитория.

12. API за искане на плащане

API на JavaScript: API за заявка за плащане

Първият API на JavaScript, който разглеждаме, е API за заявка за плащане. Когато създавате уебсайт за електронна търговия , много се мисли за подобряване на процеса на плащане, за да се гарантира, че преживяването е възможно най-гладко и без болка. Въвеждането на данни за плащане остава повтарящ се процес. Ако някое поле е леко погрешно, целият процес се счупва и трябва да се стартира отново. От страна на разработчика, проверяването на правилните проверки за валидиране за всеки метод на плащане отнема време.

API на заявката за плащане премахва тази част от опита за плащане. Страницата може да изиска необходимата информация и браузърът предоставя на потребителя полетата за въвеждане.

Потребителят трябва да въведе данните си само веднъж и те могат да бъдат използвани в различни уебсайтове и транзакции. В зависимост от устройството те могат дори да използват начините на плащане, свързани с потребителския акаунт, като Google и Apple Pay.

const request = new PaymentRequest( [{ supportedMethods: 'basic-card' }], { total: { label: 'Total', amount: { currency: 'GBP', value: 6.5 } } } );

Обектът взема няколко параметъра, които описват плащането, което трябва да се извърши. Първият описва приетите начини на плащане. Това могат да бъдат различни видове разплащателни карти, както и подробности за интегриране с други разплащателни решения на трети страни. Дори има възможност да се включи друго уеб приложение като начин на плащане чрез API за обработка на плащания.

Втората е разбивка на това, което се купува. Това може да бъде във всеки формат, който има смисъл за транзакцията. Това включва и опции за разходите за доставка, които могат да бъдат изчислени въз основа на други фактори, като адрес на доставка. Има и трети, незадължителен аргумент, за да се посочи допълнителна информация, която трябва да бъде събрана, като имейл адрес или номер за контакт.

13. CSS Layout API

JavaScript API: CSS Layout API

Като общо правило, вашият оформление на уебсайта трябва да се остави надолу до CSS. С JavaScript обработката на промените в оформлението е склонна към лоша производителност и много ръчно поддържане. Но какво се случва, ако даден сайт изисква нестандартно оформление? Традиционното мрежоподобно разположение, което CSS предоставя, може да не работи за по-креативни дизайнерски идеи.

API за оформление позволява на разработчиците да създават свои собствени модули за оформление, подобно на съществуващите мрежови или гъвкави модули, използвани днес. Като дефинира правилата, за които трябва да работи, API може да поставя елементи навсякъде в съдържащия го елемент. Това е вторият API на Houdini, който стига до браузърите.

Houdini представи концепцията за „worklets“, които работят подобно на работниците в мрежата, но са силно специализирани в една дейност. API за оформление работи чрез специфичен работен лист за оформление. Те се регистрират в браузъра, което им позволява да бъдат взети в CSS.

class MasonryWorklet { *layout(children, edges, constraints, styleMap) {} } registerLayout('masonry', MasonryWorklet);

Работната програма за оформление има един метод, наречен оформление , който се занимава с позиционирането на елементи. Той работи като генераторна функция, което му позволява да работи паралелно на останалата част от страницата, за да поддържа всичко гладко.

Първият параметър е препратка към непосредствените дъщерни елементи на този, към който се прилага оформлението. Данните за размера са достъпни от втория и третия параметър. Единият предоставя информация за позицията и размерите на елемента, който се стилизира, а другият определя ограниченията, в които елементът трябва да работи. Последният параметър описва останалите стилове на елемента, включително всички персонализирани свойства, от които може да се интересува.

.el { display: layout(masonry); }

Прилага се персонализиран модул, като се използва обичайния дисплей свойство върху елемент. Той използва оформление функция, заедно с името на работната лента.

14. API за управление на идентификационни данни

API на JavaScript: API за управление на идентификационни данни

Вместо да се налага да запомнят много индивидуални данни за вход, потребителите могат да влязат с идентификационните данни, съхранени в браузъра. По този начин потребителите на множество устройства могат да получат техните данни да ги следват, без да се налага да влизат всеки път.

Докато функцията за автоматично довършване на браузъра може да намали триенето с въвеждането на самата парола, API за управление на идентификационни данни може автоматично да влезе потребител веднага щом удари страницата. Той може да влезе и с други форми за удостоверяване, например публичен ключ или чрез доставчик на удостоверяване като OpenID.

15. CSS Paint API

JavaScript API: CSS Paint API

CSS и JavaScript често се разглеждат като отделни части от уебсайт - които се събират винаги по малки начини, като например добавяне на име на клас. Разработчиците имат малко възможности да променят начина, по който браузърът решава да изобрази страница, различна от директното актуализиране на DOM.

Всичко това ще се промени през следващата година, тъй като в браузърите започва да се появява нов набор от спецификации. Те осигуряват достъп до конвейера за рендиране в браузъра чрез JavaScript, за да помогнат на разработчиците да настроят фино действията на браузъра според техните нужди.

Работната група за Худини се състои от колекция от хора от браузъри и технологични компании. Те имат за цел да отворят начина, по който всичко се изобразява в браузъра по начин, който го прави лесно достъпен за разработчици. Това включва оформления, шрифтове и анимации.

Първата спецификация, която вече удря браузърите, е API на CSS Paint (известен също като CSS Custom Paint). Този API ви позволява програмно да генерирате изображение, когато CSS свойство очаква такова. Използвайте JavaScript, за да генерирате динамични фонове, граници и маски на изображения и да ги приложите в CSS без тежко изпълнение. На път е да бъде активиран по подразбиране в Chrome Stable.

class MyPaintWorklet { static get inputProperties() { return []; } paint(ctx, size, properties) { } } registerPaint('my-paint', MyPaintWorklet);

API на Paint използва работна лента за боя, за да дефинира какво трябва да прави браузърът всеки път, когато трябва да актуализира екрана. Всяка боя може да използва нова версия на работния лист, което означава, че всички постоянни данни трябва да се съхраняват другаде.

The боя методът за обратно извикване получава три стойности. Първият е контекстът, който работи почти като контекст на платно. Той може да бъде изтеглен по един и същ начин и има повечето същите възможности, но тъй като това може да се извиква няколко пъти в секунда, трябва да бъде опростен.

Втората стойност предоставя информация за елемента, който се рисува, като неговата височина и ширина. Това може да се използва, за да се гарантира, че крайният резултат се вписва идеално всеки път, когато се използва.

Крайната стойност съдържа всички свойства на стила на обекта. Това включва всички входни потребителски свойства, дефинирани в гетера. Те използват Typed Object Model - друга нова функция на Houdini, която прави CSS стойностите по-лесни за смилане в JavaScript.

Последното повикване регистрира работната лента с браузъра и я отваря до CSS страната.

.el { background-image: paint(my-paint); }

За да се използва в CSS, това включва едноредова функция. Предадената стойност е името на ефекта, предоставен при регистриране на работния лист. Приложният програмен интерфейс (API) и свързаният с него работен лист се предлагат в Chrome и Opera, докато той остава ключов фокус за браузърите Safari, Firefox и Samsung. Докато спецификацията е към завършване, очаквайте скоро да я види в тези браузъри.

По-късните итерации на спецификацията предоставят механизъм за предоставяне на аргументи срещу функцията CSS, подобно на начина, по който в момента се дефинират градиенти. Това позволява по-лесно персонализиране, без да се налага да прилагате персонализирани свойства. Разглеждат се и други опции, като например определяне на алфа канал за наслояване.

16. API за уеб анимации

JavaScript API: API за уеб анимации

Анимацията с JavaScript в миналото е имала лош опит. Преместването на елементи чрез промяна на стойностите на позицията води до много пребоядисвания и води до лошо представяне. CSS анимации са по-добрият избор, но са трудни за манипулиране в движение.

API за уеб анимации осигурява достъп до същия двигател за анимация, който захранва CSS страната.

Const animation = el.animate( [ { transform: 'rotate(0)' }, { transform: 'rotate(360deg)' } ], 1000 );

Всеки елемент има Анимирани метод, който отнема поредица ключови кадри плюс обект на настройки или продължителност. Това връща анимационен обект, който след това може да бъде актуализиран за възпроизвеждане, пауза и регулиране на скоростта на възпроизвеждане.

Има допълнителна полза, идваща от Худини, с анимационни работни програми. Те работят по подобен синтаксис на API, но позволяват по-фин контрол. Те могат да се контролират от входове, различни от времето, като превъртане или позиция на докосване. Това все още се разработва - за да научите повече, преминете към Блог за разработчици на Chrome .

Поддръжката на API за уеб анимации е малка, но бързо се разраства. Използвайки функцията за откриване на функции, тези, които имат поддръжка за нея, могат да усетят предимствата веднага.

17. API за запис на файлове

API на JavaScript: API за запис на файлове

Дългосрочната цел на уеб приложенията е да ги накарат да бъдат на същото ниво като техните родни колеги. Все пак липсва известна функционалност - особено около управлението на локални файлове.

Писането на файлове понастоящем включва създаване на файл за изтегляне и записване в определена директория. Запазването на итерации върху определен файл ще създаде множество копия, което не винаги е добро изживяване.

API за записваеми файлове ще осигури на разработчиците по-голяма гъвкавост и ще даде възможност на потребителите да решат къде да се съхраняват файловете. Това отваря вратата за по-пълноценни проекти в мрежата, като например онлайн редактор на код или сложни графични приложения.

Понастоящем този API е част от Проектът за възможности на Google . В момента е в процес на събиране на отзиви за потенциални функции, преди да попадне в браузъра в пробна версия. Въпросите около сигурността и какъв вид файлове могат да бъдат написани къде, трябва да се изгладят, преди API да стане официален.

18. API за общ сензор

Сензорите на устройствата, които носим всеки ден, са чудесен начин за осигуряване на допълнителна полза за приложението. Използването на физическата среда, например с акселерометър, може да осигури допълнително потапяне за творческо изживяване.

Ако вече имаме събития за такива неща, защо има нов API? Устройствата непрекъснато се променят и добавят нови и разнообразни сензори. За да се спести необходимостта от създаване на нови API за всеки нов сензор, който излиза, Generic Sensor API създава опростен интерфейс за всички тях.

Докато API все още е в разработка, Chrome и Firefox го включват зад флагове, с които да си поиграете. Други браузъри го обмислят за в бъдеще.

19. Paint Timing API

JavaScript API: Paint Timing API

Представянето е голям фокус тази година. Намаляването на размерите на файловете може да помогне, но производителността е нещо повече от това, което се изтегля в браузъра. Браузърът ‘рисува’ съдържанието му на екрана всеки път, когато нещо се промени. Докато не се случи първата боя, потребителите ще останат втренчени в празен екран. Когато се окачи в други подробности, като изтегляне на активи или обработка на JavaScript, времето до тази първа боя може да отнеме повече време.

API на Paint Timing съхранява подробна информация за две събития - първата боя и първата ‘съдържателна’ боя, която се отнася до нещо повече от просто стилизиране, като текст или изображение.

The PerformanceObserver интерфейсът описва какво да се прави, когато се случат тези събития. След това може да се използва за изпращане на данните до сървър за анализ по-късно.

В момента това е достъпно само в Chrome и Opera, но други браузъри като Edge и Safari са проявили интерес и вероятно ще го включат в бъдеще.

20. API за уеб реч

Този API е направен от две части - синтез и разпознаване. Синтезът на реч ще вземе предоставения му текст и ще го прочете с гласа, избран от потребителя. The Синтез на речта object осигурява достъп до всички различни опции, включително какво трябва да казва. Разпознаването включва вземане на вход за микрофон и разбиране на казаните думи. The Гласово разпознаване обект се използва за откриване на речта, която ще задейства „резултат“ с това, което смята, че потребителят е казал и доколко е уверен.

Синтезната страна на API се поддържа във всички основни браузъри. Понастоящем поддръжката за разпознаване на реч е ограничена до Chrome с префикс или Firefox с активиран флаг.

Има дискусии за разширяване на страната за разпознаване, за да се включат и други входове, включително WebRTC, за да се осигурят транскрипции на видеоконференции в реално време. Въпреки че те все още са в ранните етапи, това може да помогне да се направят уеб семинари и онлайн презентации по-достъпни и по-лесни за справяне в бъдеще.

21. Наблюдател на пресичане

Този JavaScript API може да се използва за разбиране на видимостта и позицията на DOM елементите (известни като „цели“) спрямо съдържащ елемент („коренът“). Използвайте го, за да задействате обратно извикване, когато елемент влезе и излезе от определена област. Този API е най-подходящ за мързеливо зареждане или безкрайни ефекти на превъртане.

22. Отчитащ наблюдател

Част от API за отчитане, Reporting Observers наблюдават някои видове отчети от JavaScript. Използвайте ги, за да получавате известия, когато браузърът трябва да се намеси - например, ако трябва да осигури резервен вариант за бавно зареждащ се шрифт.

23. OffscreenCanvas

Чертеж към a е скъпа задача за браузър. Този нов API ви позволява да изобразявате графики от основната нишка, без да удряте DOM.

24. API интернационализация

Известен от пространството на имената Международна , API за интернационализация ECMAScript осигурява езиково чувствително сравнение на низове, форматиране на числа и форматиране на дата и час. Използвайте го, за да избегнете изпращането на тежки библиотеки и да показвате дати, числа и низове във формат, който има смисъл в местоположението на потребителя.

25. GraphQL

  • Прочетете още: GraphQL

Въпреки че това не е API в най-строгия смисъл, GraphQL е нещо, което винаги заслужава да се спомене, когато става въпрос за обсъждане на API.

Методът за лудостта се отнася до заявки, изпълнявани срещу сървъри, съдържащи обектно хранилище. Вместо да принуждава разработчиците да създават API за достъп за всеки елемент, се установява „общ“ език за заявки. След това разработчикът на API трябва да предостави стандартизирано описание на обектите, съдържащи се в:

type Query { me: User } type User { id: ID name: String }

В следващата стъпка задействайте една или повече заявки срещу тези формализирани описания. Пример срещу (измислена) човешка база данни ще изглежда така:

{ human(id: '1000') { name height } }

Сървърите, способни на GraphQL, реагират чрез връщане на JSON обект, съдържащ търсените полета. Поради ограничените пространства не можем да разработваме тази тема допълнително - този урок предоставя обаче интересен преглед.

Това е редактирана версия на статии, които първоначално се появиха в Уеб дизайнер списание.

Прочетете още: