Мундариҷа
- Воситаҳои сифати рамз
- 01. TypeScript
- 02. ESLint
- 03. зеботар
- 04. Травис CI
- 05. JSDoc
- Чорчӯбаҳо
- 06. вокуниш нишон диҳед
- 07. кунҷӣ
- 08. Полимер
- 09. Свелте
- 10. Vue
- 11. Моча
- 12. Лӯхтак
- 13. протектор
- 14. Соати шаб
- Озмоиши лоиҳа
- 15. Ҷаззоб
- Плагинҳои муҳаррир
- 16. Куокка
- 17. Эммет
- 18. Арзиши воридот
- 19. Нишондиҳанда
- 20. Debugger Chrome
- Интерфейсҳо
- 21. D3
- 22. Anime.js
- 23. Moment.js
- 24. Интерфейси маъноӣ
- 25. Пелл
JavaScript ҷузъи муҳими ҳар як абзори веб таҳиягари веб мебошад, аммо барои аз он беҳтар истифода бурдан ба шумо фармони зиёда аз vanilla JS лозим аст.
- 12 саволи маъмули JavaScript ҷавоб дод
Агар шумо нав дар JavaScript кор карда истодаед, аммо миқдори зиёди асбобҳои мавҷудбуда назар ба каме ноумедкунанда ба назар мерасанд. Аз ин рӯ, мо 25 чизи беҳтаринро ҷамъ овардем, ки аз чаҳорчӯбаҳо ва интерфейсҳо то сифатҳои рамзӣ ва асбобҳои санҷиширо фаро мегиранд.
Муфассал дар бораи дарёфти баъзе аз абзорҳои беҳтарини тарроҳии веб, ки шумо метавонед ба онҳо даст бардоред ва чӣ гуна онҳо ба таҳиягари беҳтарини JavaScript кӯмак мекунанд. Ё барои васеи василаҳо, дастурҳои моро барои нигаҳдории болоии боло, беҳтарин вебсайтсоз ва провайдери хостинги веб бубинед.
Воситаҳои сифати рамз
01. TypeScript
Масъалаи маъмул барои таҳиягарони нави JavaScript системаи чопкунии динамикии он мебошад. Намуди тағирёбандаро дар вақти корӣ баровардан мумкин аст, аммо дар мавриди он, ки он дар оянда кадом навъи он шуда метавонад, маҳдудият нахоҳад дошт.
Чопкунии динамикӣ метавонад дар эҷоди нақшҳо муфид бошад, аммо то чӣ андоза муфид будани он аз лоиҳа вобаста аст. TypeScript ҳадафи он аст, ки услуби декларативии барномасозиро тавассути навиштани тағирёбандаҳо, ки таҳиягарон ҳис мекунанд, ин маънои онро дорад.
пеш> интерфейси Person {firstName: string; насаб: сатр; } функсияи салом (шахс: Person): string {return `Hello $ {person.firstName} $ {person.lastName} '; } / pre>
Эзоҳҳои навъе пайдо мешаванд, ки тағирёбанда муайян карда шавад. Бо объектҳо, интерфейсҳо сохтори объектро муайян мекунанд ва намуд истинод ба он интерфейс мегардад. Онҳоро барои сохтани объектҳои ба осонӣ фармоишӣ васеъ кардан мумкин аст.
pre> logger function (target: any, name: String) {console.log (`$ {name} баҳогузорӣ '); } class Greeter {@logger greet () {return "Салом, $ {this.greeting}"; }} / pre>
TypeScript ҳамчун як қисми системаи худ синтаксиси таҷрибавии JavaScript -ро истифода мебарад. Масалан, ороишгарон функсияҳое мебошанд, ки худро ба синф, усул ё амволе татбиқ мекунанд, ки вазифаи такроршавандаро таъмин мекунанд. Инҳо метавонанд такрориро дар лоиҳа наҷот диҳанд.
Он инчунин синтаксиси мавҷударо, ба монанди синфҳо, модулҳо ва функсияҳои тирро ба ES3 ё ES5-и эътиборнок тартиб медиҳад. Ин метавонад ба браузерҳои дар доираи ҳар як лоиҳа таъиншуда мутобиқ карда шавад. Вақте ки браузерҳо ин хусусиятҳоро табиатан дастгирӣ карда метавонанд, ба TypeScript супориш додан мумкин аст, ки онҳоро нигоҳ доранд ва рамзи натиҷаро беҳтар созанд.
TypeScript суперзетаи JavaScript аст, аз ин рӯ бидуни тағир додани сохтори он ба забон манфиатҳо фароҳам меорад. Дар натиҷа, ҳама гуна JavaScript TypeScript эътибор дорад ва ҳама хусусиятҳои истифодашуда комилан ихтиёрӣ мебошанд.
02. ESLint
Линтинг як намуди таҳлили рамзи статикӣ мебошад, ки дар лоиҳа барои санҷидани ҳама гуна скрипте, ки эҳтимол вайрон мешавад ё бо услуби барои лоиҳа мувофиқ набуда иҷро карда мешавад, иҷро карда мешавад. ESLint метавонад JavaScript-ро барои хатогиҳои маъмулӣ тафтиш кунад, илова бар риояи маҷмӯи қоидаҳои маъмул аз ширкатҳо, ба монанди Google ва Airbnb.
03. зеботар
Мисли ESLint, Prettier қодир аст, ки саволҳои форматро муайян кунад. Он инчунин як қадам пеш меравад ва хатҳои вайронкунандаро аз номи таҳиягар ба таври худкор навсозӣ мекунад. Гарчанде ки он қадар фармоишӣ нест, Prettier аз контекстҳои атроф огоҳтар аст ва танҳо форматро дар ҷое истифода мебарад, ки маъно дорад. Он инчунин метавонад форматҳои дигарро ба монанди JSX дастгирӣ кунад.
04. Травис CI
Travis CI воситаи муттаҳидсозии доимӣ (CI) мебошад. Он филиалҳои GitHub-ро барои иҷрои ҳама гуна вазифаҳои нав назорат мекунад ва бар зидди он озмоишҳо мегузаронад, то боварӣ ҳосил карда шавад, ки дар ин раванд ягон чиз вайрон нашудааст. Он гоҳ метавонад тағиротро ҷорӣ кунад ё дар бораи ҳама гуна мушкилот гурӯҳро огоҳ созад. Travis CI барои истифода бо лоиҳаҳои манбаъи кушода ройгон аст, ки дар онҷо пайдарпайӣ муҳим аст.
05. JSDoc
Ҳангоми навиштани модулҳои мураккаб, дар хотир доштани чӣ гуна ҳама чиз метавонад кори душвор бошад. Бо ёрии JSDoc, методҳо метавонанд рамзи махсус дошта бошанд, ки дар он корҳое, ки мекунанд, ҳама гуна параметрҳои интизоршаванда ва навъи чизеро, ки онҳо метавонанд баргардонанд, тасвир кунад. Сипас, ин метавонад барои сохтани ҳуҷҷатҳо коркард ё муҳаррирон ба монанди VS Code имкон диҳад, ки дар контекст ба таҳиягарон маслиҳат диҳанд.
Чорчӯбаҳо
06. вокуниш нишон диҳед
React, ки аз ҷониби Facebook сохта шудааст, яке аз маъмултарин чаҳорчӯби JavaScript аст, ки дар ҳоли ҳозир дар он ҷо аст. Он пеш аз ҳама барои таъмин намудани интерфейси корбари барнома сохта шудааст.
Он дар консепсияи компонентҳо сохта шудааст - блокҳои инфиродии мундариҷа, ки ба React чӣ гуна иҷро кардани ҳар як қисми барномаро мефаҳмонанд. Вақте ки чизе тағир меёбад, React кор хоҳад кард, ки дар саҳифа чӣ навсозӣ лозим аст. Амалан ҳама мантиқе, ки бо рафтори барнома дар дохили як ҷузъ сару кор мегирад, ин онҳоро ба осонӣ дубора истифода мебарад ва онҳо метавонанд аксар вақт дар лоиҳаҳо мубодила шаванд.
pre> class App React.Component {render () {return (div className = "App"> Magazine title = "Net Mag" /> / div>)}} / pre>
Гарчанде ки муҳим нест, бисёр лоиҳаҳои React дар JSX навишта шудаанд. Ин забонест, ки шабеҳи HTML менамояд ва кор мекунад, аммо ба компонентҳо имкон медиҳад, ки дар паҳлӯи ҳамдигар ба осонӣ кор кунанд.
Ҳар як ҷузъ усули махсуси 'render' дорад, ки ба React мегӯяд, ки чӣ нишон медиҳад. Арзишҳои дохилӣ ё берунӣ бо номи 'реквизитҳо' маълумотро дар бораи он, ки дар охири он бояд чӣ гуна бошад, оё матн ё ҷузъҳои дигари кӯдакро дар бар мегирад.
Реакт ҷараёни яктарафаи маълумотро истифода мебарад, яъне маъно дар волидайн ҳифз карда мешавад ва ба фарзандонаш мегузарад. Агар ба кӯдак лозим ояд, ки ин маълумотро навсозӣ кунад, усулҳои махсуси таҳияшуда барои зангзании кӯдак интиқол дода мешаванд.
React Router як бастаи маъмул аст, ки ҷузъҳои махсусро барои React барои новбари дохилӣ таъмин мекунад. Вобаста аз URL-и додашуда, React Router метавонад ҷузъҳои мушаххасро ба қисматҳои гуногуни барнома хидмат кунад.
Redux одатан барои идоракунии ҳолати саросарӣ бо React ҷуфт карда мешавад. Тавассути пайвастагиҳои махсус, React қодир аст бо як объекти калон муошират кунад, ки тамоми маълумотро барои барнома нигоҳ медорад. Баъдан қисмҳои интихобкардаи ин ҳолатро ба ҷузъҳо додан мумкин аст, то тарзи намоиш додани онро нишон диҳанд.
Дар маҷмӯъ, React як чаҳорчӯбаи нисбатан сабук аст, ки барои бисёр лоиҳаҳои гуногун кофӣ имрӯзӣ аст. Гарчанде ки ба монанди Angular пурра тавсиф карда нашудааст, имкон дорад, ки ҳамаи қисмҳоро барои ҳар як лоиҳа мувофиқи талабот якҷоя кунанд.
07. кунҷӣ
Angular яке аз аввалин чаҳорчӯби барномаҳои маъмули як саҳифа буд. Он пас аз баромади аввалини худ ба куллӣ тағйир ёфт ва бо як қатор хусусиятҳои нав, имрӯз ҳам маъмул аст.
Angular барои фарогирии тамоми ҷанбаҳои барнома - аз васлкунӣ то тазриқи вобастагӣ пешбинӣ шудааст. Он дорои сохтори мулоҳизакор мебошад, ки маънои онро дорад, ки ҳамаи лоиҳаҳо ба ҳамин монанд кор мекунанд.
Баръакси React, Angular барои ҳифзи ҳама ҷанбаҳо маълумоти дуҷонибаро ҳатмӣ мекунад. Арзишҳо дар қуттии матни вуруд, масалан, метавонанд бевосита моделро навсозӣ кунанд. Ба ин монанд, агар модели тағирёбанда ба таври худкор навсозӣ шавад. Ин ҳама чизро дар ҳамоҳанг нигоҳ медорад.
Angular дар болои TypeScript сохта шудааст, ки ба он имкон медиҳад, ки хусусиятҳои ба монанди чопи статикӣ ва ороишдиҳандаро истифода баранд, то таркиби ҷузъҳоро осонтар идора кунад. Пас TypeScript ба JavaScript муқаррарӣ ҷамъ меорад, то дар браузер ҳамчун муқаррарӣ истифода шавад.
08. Полимер
Полимер як чаҳорчӯбаи Google мебошад, ки барои сохтани замимаҳо бо истифодаи ҷузъҳои веб сохта шудааст. Бо кор бо мушаххасоти расмӣ, ин ҷузъҳо такроран истифода мешаванд ва метавонанд дар баробари унсурҳо ва усулҳои ватанӣ кор кунанд. Полимер 3 ба наздикӣ меояд ва ба истифодаи воридоти модули npm ва ES2015 мегузарад, зеро ниёзҳои таҳиягарон рушд кардаанд.
09. Свелте
Svelte ҳамчун як чаҳорчӯбаи сабук тарҳрезӣ шудааст, ки пас аз сохтани лоиҳа ба JavaScript стандартӣ нопадид мешавад. Мантиқ, услуб ва нишонаҳои таркибӣ ҳама дар файли ягона зиндагӣ мекунанд ва ба монанди компонентҳои веб бо сабкҳои васеъ ва унсурҳо> унсурҳо барои илова кардани мундариҷа кор мекунанд. Маҷмӯаи функсияҳо қасдан маҳдуд аст, аммо дар ҳолати зарурӣ метавонад ба осонӣ васеъ карда шавад.
10. Vue
Vue чаҳорчӯбаи нав аст, аммо чорчӯбаи зуд ба даст овардашуда. Гарчанде ки он ба дигарон монандӣ дорад, аммо он ҳамчунин баъзе нуқтаҳои дардро осон мекунад. Он ба дараҷаи кофӣ чандир аст, ки ё ҳамчун як қисми барномаи мавҷуда ё ҳамчун чаҳорчӯбаи асосии сайт истифода шавад.
Ҳама HTML, CSS ва JavaScript барои компонент метавонанд дар як файл зиндагӣ кунанд. Услубҳо фарогиранд, ки дар натиҷаи тарки ҷузъҳо ба лоиҳаҳои сершумор осонтар мешавад. Vue инчунин дорои китобхонаи идоракунии давлатии худ бо номи Vuex мебошад. Ба монанди системаҳои монанди Redux, барнома ба мағозаи марказонидашудаи маълумот дастрасӣ дорад. Ислоҳҳо тавассути мутатсия дар он ҳолат иҷро карда мешаванд, ки навсозиро дар ҳама ҷузъҳои истифодаи ин маълумот ба амал меоранд.
Ба ҳамин монанд, Vue инчунин роутерро барои фароҳам овардани новбари байни қисмҳои гуногуни барномаи як саҳифа дар бар мегирад. Бо муайян кардани ҳамаи хатсайрҳои мавҷуда, Vue ғамхорӣ дар байни онҳост.
11. Моча
Mocha аксар вақт барои таҳиягарон навиштани як қатор озмоишҳо дар лоиҳа мебошад, зеро оғози он содда аст. Ҳар як озмоиш метавонад тавассути гиреҳ ё браузер гузарад ва дидани он, ки мушкилот дар куҷо рух медиҳанд, осон аст. Mocha инчунин бо ҳама гуна китобхонаи тасдиқҳо кор мекунад, ки онро ба талаботҳои гурӯҳҳои гуногун мувофиқ месозад.
12. Лӯхтак
Puppeteer роҳи идоракунии Chrome бо гиреҳро пешниҳод мекунад, ки иҷрои санҷишҳои такроршавандаи UI-ро хеле осон мекунад. Он метавонад унсурҳои аёниро дар браузер тафтиш кунад, ба монанди унвони саҳифа, инчунин скриншотҳо эҷод кунад, то ҳама гуна регрессияҳоро пайгирӣ кунанд. Давандагони озмоишӣ, ба монанди Jest ё Mocha метавонанд Puppeteer -ро идора кунанд ва метавонанд аз санҷишҳо бар асоси натиҷаҳои он ноком шаванд.
13. протектор
Protractor воситаи махсуси санҷишӣ барои ҳамаи версияҳои Angular мебошад. Он Selenium -ро барои санҷишҳои ниҳоӣ дар муҳити воқеӣ ва браузерҳо истифода мебарад. Protractor ҳамаи танзимоти лозимаро иҷро мекунад ва метавонад ба таври худкор интизори бор шудани саҳифаро интизор шавад, ки ин аз санҷишҳои зудшикан ҷилавгирӣ мекунад ва ҳаҷми баъдан навиштанро кам мекунад.
14. Соати шаб
Барои дигар лоиҳаҳое, ки ба санҷиши ниҳоӣ ниёз доранд, Nightwatch як алтернативаи афсонавӣ месозад.Он инчунин Selenium -ро дар зери капот идора мекунад, ки ба шумо имкон медиҳад, ки корбари охиринро бинед. Тестҳо ҳамчун модулҳое навишта мешаванд, ки тавассути Node кор мекунанд ва барои онҳо пайвастшавӣ ба платформаҳои CI ё фиристодани натиҷаҳои онҳо ба нармафзори беруна васеъ карда мешавад.
Озмоиши лоиҳа
15. Ҷаззоб
Jest давандаи озмоишист, ки онро Фейсбук сохтааст. Ҳадафи асосии он аст, ки то ҳадди имкон осонтарин насб ва истифодаи он бошад ва бидуни оғоз барои оғози кор конфигуратсия лозим аст. Ҳама файлҳо дар дохили феҳристи "__tests__" ё бо ".spec.js" ё ".test.js" тамом мешаванд, ба таври худкор гирифта мешаванд.
Санҷишҳо зуд мегузаранд ва метавонанд дар ҳар як тағйирот кор кунанд, то боварӣ ҳосил кунанд, ки ҳама чиз дуруст кор мекунад. Ҷест ҳатто метавонад чизеро, ки пас аз содир шудани охирин таҷдид шудааст, бардорад ва танҳо озмоишҳоро дар унсурҳое, ки ба онҳо таъсир расонидааст, иҷро мекунад. Вариантҳои фармоишии сатри фармон боварӣ ҳосил мекунанд, ки санҷишҳои дуруст дар вақти зарурӣ иҷро мешаванд, ки барои зуд нигоҳ доштани абзорҳои муттаҳидсозӣ беҳтарин мебошанд.
Яке аз хусусиятҳои ҷолиби Jest ин санҷишҳои аксбардорӣ мебошад. Ҳангоми санҷидани арзиши мушаххас, Jest сохтори чизи санҷидашударо мегирад ва бо он дар санҷишҳои оянда муқоиса мекунад. Агар чизе тағир ёбад, Jest тағиротро таъкид мекунад ва он метавонад ислоҳ ё тасдиқ карда шавад. Ин барои ҷузъҳои React хеле хуб кор мекунад, аммо инчунин метавонад барои ҳама гуна арзиши силсилавӣ истифода шавад.
JSDOM бо нобаёнӣ танзим карда шудааст, ки озмоиши лоиҳаҳои браузерро тавассути фароҳам овардани онҳо тавассути Node осонтар мекунад. Jest инчунин дорои функсияҳои асосии санҷишӣ мебошад, ки масхараҳо, ҷосусон ва тасдиқҳоро дар бар мегирад. Гарчанде ки ин кор хоҳад кард, дигар асбобҳо, ба монанди Фермент ва Синон оварда мешаванд, то раванди осонтари санҷишҳои хаттиро ба роҳ монанд.
Дар ҳоле ки Jest аксар вақт барои санҷиши барномаҳои React истифода мешавад, дар асл он метавонад барои санҷидани лоиҳае истифода шавад, ки барои ҳама гуна чаҳорчӯба ё забон навишта шудааст. Файлҳои насби пешакӣ метавонанд мушкилотро барои фароҳам овардани муҳити дурусти озмоишӣ бароранд, масалан боварӣ ҳосил кунед, ки Angular дар саросари ҷаҳон муайян карда шудааст.
Плагинҳои муҳаррир
16. Куокка
Бо вуҷуди кӯшишҳои мо, ҳеҷ як таҳиягар наметавонад бори аввал ҳама чизро дуруст кунад. Вақте ки як идеяи хурд ба озмоиш ниёз дорад, ташкили лоиҳа танҳо барои дидани он, ки оё он метавонад аз ҳад зиёд бошад. Ҳангоми кор бо асбобҳо ва китобхонаҳои ношинос як фазои ҷудогонаи корӣ доштан беҳтар аст, ки дар ҳар қадам қадамҳои воқеиро нишон медиҳад.
Куокка муҳити атрофест, ки дар дохили муҳаррир зиндагӣ мекунад. Он рамзи дохилшударо арзёбӣ мекунад ва натиҷаро ҳангоми истифодаи он нишон медиҳад. Ин барои санҷиши блокҳои мантиқ бе сохтани бастаи нав ва дар браузер санҷидани он хеле хуб аст.
Блокҳои ранга дар баробари ҳар як рақами сатр нишон медиҳанд, ки онро Quokka фаро гирифтааст. Блоки сабз нишон медиҳад, ки ҳеҷ мушкиле вуҷуд надорад, дар ҳоле, ки сурх огоҳ мекунад, ки дар ин сатр мушкиле вуҷуд дорад. Шарҳи охири ин сатр маълумоти бештар медиҳад. Қуттии хокистарӣ нишон медиҳад, ки сатр ҳеҷ гоҳ ба даст намеояд, ки ин метавонад тасмими қасдан бошад ё набошад.
Дар ҳоле ки Quokka бо аксар танзимот фавран кор мекунад, танзимоти онро дар дохили ҳар як файл ё дохили pack.json, агар бо npm истифода шавад, танзим кардан мумкин аст. Аксар забонҳо, ки ба JavaScript асос ёфтаанд, аз ҷумла JSX ва TypeScript аллакай дастгирӣ карда мешаванд, аммо плагинҳо барои кор бо синтаксисҳои дигар, ба монанди jQuery, бидуни возеҳан ворид кардани он, дастрасанд. Васлкунакҳоро барои ворид ва вайрон кардани муҳити атроф ҳар дафъае, ки кодекс кор мекунад, овардан мумкин аст.
Лоиҳа аз ҷониби худи ҳамон гурӯҳе сохта шудааст, ки wallaby.js дорад, ки дорои функсияҳои шабеҳ аст, аммо барои сюитҳои тестӣ. Ҳангоми навиштани санҷиши номуваффақ, Wallaby ин масъаларо фавран қайд мекунад, ки маънои хатоҳо зудтар ба даст оварда мешавад.
Quokka ҳамчун плагин барои VS Code, Atom ё JetBrains IDE дастрас аст. Нашри ройгони ҷамъиятӣ аксари ҳолатҳоро дар бар мегирад, аммо нусхаи Pro ихтиёрӣ чизҳоро боз ҳам беҳтар менамояд, то санҷиши хаттии кодро барои муайян кардани масъалаҳои сусти иҷрои кор таъмин намояд.
17. Эммет
Эммет маҷмӯи плагинҳоест, ки барои аксари муҳаррирони рамзӣ мавҷуданд, ки ҳадафи он ба таҳиягарон имкон медиҳад, ки бо бартараф кардани ҳама вазифаҳои суст ва такроршаванда зуд рамзгузорӣ кунанд. Вақте ки таҳиягарон як калимаи калидии хурдро ворид мекунанд, он метавонад онро бо блоки калонтари мундариҷа муайян кунад ва иваз кунад. Эммет инчунин ниятҳои онҳоро мефаҳмад, синтаксисро таҳлил мекунад ва ҳатто рамзро ба таври худкор васеъ мекунад.
18. Арзиши воридот
Бо мурури замон, замимаҳо метавонанд ба зудӣ бо вобастагии калон, ки онҳоро вазнин мекунанд, дабдабанок шаванд. Арзиши воридот як плагини оддӣ барои VS Code аст, ки ҳаҷми ҳама гуна воридотро дар дохили сатр илова мекунад ва бо ранг рамзгузорӣ карда мешавад, то бубинад, ки бастаро чӣ қадар зиёд мекунад. Пас таҳиягар метавонад тасмим гирад, ки ин вазни изофӣ асоснок аст ё не.
19. Нишондиҳанда
Кодекс метавонад аксар вақт дар дохили ашё, функсияҳо ё унсурҳои лона ҷойгир карда шавад. Баъзан ин метавонад душвор кунад, ки дақиқан кадом кронштони кушода то кадом қавс пӯшида издивоҷ мекунад. BracketHighlighter for Sublime Text як кронштейнро ҳангоми интихоби дигараш равшан мекунад ва ҳатто бо якчанд интихобҳо ва сатрҳои дохили кор хоҳад кард.
20. Debugger Chrome
VS Code метавонад нуқтаҳои рахна созад ва дар бораи барномаҳои Node аллакай фикру мулоҳизаҳо пешниҳод кунад, аммо дар бораи браузер чӣ гуфтан мумкин аст? Васлкунаки Chrome Debugger муҳаррирро ба як мисоли DevTools пайваст мекунад, то худи ҳамон рафторро дар браузер фаъол созад. Кадам ба код, таваққуфро иҷро кунед ва арзишҳои тағирёбандаро дар муҳити шинос назорат кунед.
Интерфейсҳо
21. D3
Визуализатсияи маълумот як роҳи олиест барои ҷолибтар кардани маҷмӯаҳои калон. Бо наздик шудан ба иттилоот аз зовияи нав, маълумот осонтар фаҳмида мешавад ва тасаввуроти нав пайдо кардан мумкин аст. Бо вуҷуди ин, сохтани онҳо аз гуфтан осонтар аст ва кор бо SVG мустақиман бо чолишҳои худ меояд, дар ҳоле ки кӯшиши баромадан ба рони> элемент метавонад суст ва дастнорас бошад.
D3 мафҳуми ҳуҷҷатҳои маълумотдиҳанда мебошад ва барои сохтани визуализатсияи маълумот бо JavaScript бо истифодаи SVG, HTML ва CSS пешбинӣ шудааст. Ин ҳуҷҷатҳо тавре сохта шудаанд, ки ба осонӣ нав карда мешаванд, зеро корбар бо онҳо ҳамкорӣ мекунад ё маълумоти нав ворид мешавад.
Дар маркази худ, D3 маълумотро ба унсурҳои DOM мепайвандад, ки метавонанд вобаста ба лоиҳа бо тарзҳои гуногун тафсир карда шаванд. Масалан, диаграммаи сутунро бо якчанд див> унсурҳо сохтан мумкин аст, ки ба намуди панҷара монанд карда шудаанд. Ҳар як арзиши додаҳо ба сатр баста мешуд, ки дар ин ҳолат дар асоси арзиши он васеъ карда мешуд.
Бо нигоҳ доштани истинод ба унсури интихобшуда, диаграммаҳо метавонанд ба қадри зарурӣ нав карда шаванд. Усулҳои 'дохил' ва 'баромадан' муайян мекунанд, ки чӣ бояд кард, вақте ки элемент илова карда мешавад ё аз диаграмма дар асоси маълумот хориҷ карда мешавад. Бо вуҷуди ин, ҷадвалҳоро ба таври худкор ҷуброн кардан ва навсозӣ кардан мумкин аст.
Он ҷое ки D3 воқеан медурахшад тавассути визуализатсияҳои мураккаб, ба монанди харитаҳо. Ин тавассути manipulation of SVGs ба даст оварда мешавад. Дар ҳоле ки барои сохтани харита ягон вазифаи дарунсохт мавҷуд нест, имкон дорад D3 бо истифода аз d3.geo.path маълумоти GeoJSON кашад.
Бисёр воситаҳо ва китобхонаҳои дигар бо истифода аз D3 сохта шудаанд, ки барои осон кардани раванд пешбинӣ шудаанд. DataMaps маълумотҳои харитаи тайёрро дар бораи пешгӯиҳои муқарраршуда, ки метавонанд партофта шаванд ва дар ҳолати зарурӣ танзим кунанд, пешниҳод мекунад.
Азбаски D3 масъули DOM хоҳад буд, ҳамгироӣ бо чаҳорчӯби вебҳои муосир, ки дар асоси ҳолат навсозӣ мешаванд, душвор буда метавонад. Китобхонаҳо, ба монанди React-D3, барои кор бо рекламаи навсозӣ сохта шудаанд ва метавонанд мушкилотро аз ҳамгироӣ берун кунанд.
22. Anime.js
Сайтҳои бештар аниматсияҳои нозукро дар бар мегиранд. Аниматсияи хурд як роҳи олие барои чашми корбарро ҷалб кардан ва таваҷҷӯҳро эҷод кардан аст. Аниматсияҳои CSS барои гузаришҳои оддӣ, ки қаблан маълуманд, беҳтаринанд, аммо агар ҳадафҳо ва арзишҳо дар асоси вуруди корбар тағир ёбанд?
Anime.js абзорест, ки бо аниматсияҳо кор карданро осон мекунад. Ҳама чиз аз даъват ба 'anime' оғоз мешавад, ки ҳама чизро дар бораи аниматсия, аз ҷумла ҳадаф, давомнокӣ ва ҳама гуна гузаришҳо барои татбиқ муайян мекунад. Ҳадафҳо метавонанд аз гиреҳи DOM то объекти JavaScript бошанд, ки метавонанд арзишҳоро дар дохили худ гузаранд.
Як хусусияти бузурги Anime.js қобилияти эҷоди роҳе барои унсури пайравӣ дар асоси роҳ> унсури дар SVG муайяншуда мебошад. Бо даъват кардани anime.path (), он имкон медиҳад, ки ин роҳ ҳамчун арзиш барои ҷойгиркунии X / Y барои аниматсияҳои дигар истифода шавад. Инҳоро бо ҳам гузоштан ё якҷоя сохтан барои сохтани ҷадвали вақт бидуни ниёз ба арзишҳои муқарраршудаи офсетӣ.
23. Moment.js
Кор бо сана ва вақт метавонад душвор бошад. Объекти санаи маҳаллӣ барои кӯмак ба формат ва идоракунии минтақаҳои вақт функсияҳои каме фароҳам меорад. Лаҳза объектҳои махсусро эҷод мекунад, ки ба девҳо имкон медиҳанд, ки сана ва вақтро ба тариқи зарурӣ таҳлил ва формат кунанд. Андозаро танҳо бо назардошти маҳалҳое, ки барои ҳар як лоиҳа заруранд, хурд нигоҳ доштан мумкин аст.
24. Интерфейси маъноӣ
UI semantic ин маҷмӯи ҷузъҳои маъмул аст, ки дар сурати зарурӣ дар доираи ягон лоиҳа ба кор андохтан мумкин аст. Намунаҳои маъмул, ба монанди паймоишҳои нонрезаҳо ва тугмаҳои ивазкунӣ ташвиқ мекунанд, аввал бо HTML семантикӣ сохта мешаванд, ки китобхона онҳоро такмил медиҳад. Интегратсия барои чаҳорчӯбаҳо, ба монанди Vue ва Angular, метавонанд ба барномаҳое афтанд, ки эҷоди интерфейсро содда мекунанд.
25. Пелл
Бисёр лоиҳаҳо аз муҳаррири матни бой истифода мебаранд. Ин метавонад барои фасли шарҳҳое бошад, ки имконоти услубӣ маҳдуданд, аммо вақти сарборӣ муҳим аст ё дар CMS, ки маҷмӯи хусусиятҳои калон муҳим аст. Гарчанде ки дар он ҷо вариантҳои зиёди WYSIWYG мавҷуданд, онҳо метавонанд калон бошанд, ба вобастагиҳои кӯҳна такя кунанд ё нишонаҳои ғайримантикӣ эҷод кунанд.
Pell як муҳаррири оддии матн аст, ки вазнаш каме бештар аз 3 килоБайт буда, онро нисбат ба вариантҳо ба монанди TinyMCE ё Draft.js Facebook хурдтар мекунад. Инчунин вобастагиҳое вуҷуд надоранд, ки ба онҳо такя кардан лозим аст, ки ин Pell-ро барои ҳар як муҳаррири мавҷуда иваз мекунад.
Дар ҳоле ки дигарон метавонанд маҷмӯи хусусиятҳои калонтарро таъмин кунанд, Pell ба иҷрои асосҳои асосӣ диққат медиҳад. Амалҳое, ба монанди истинодҳо, рӯйхатҳо ва тасвирҳо аз қуттӣ мавҷуданд, аммо хусусиятҳои фармоишӣ метавонанд барои мувофиқ кардани ниёзҳои ҳама гуна лоиҳаҳо илова карда шаванд. Зоҳир ва эҳсосотро низ фармоиш додан мумкин аст, ки Pell файли тағирёбандаи SCSS-ро пешниҳод мекунад, то дар ҳолати зарурӣ сабт кунад.
Ин мақола дар аввал дар шумораи 306 аз чоп шудааст тӯр, маҷаллаи серхаридори ҷаҳон барои тарроҳони веб ва таҳиягарон. Ба шабакаи ин ҷо обуна шавед.
