Komponentët e uebit janë një grup i ri teknologjish që na lejojnë të krijojmë elementë të personalizuar dhe të përmbledhim funksionalitetin e tyre larg nga pjesa tjetër e kodit, duke i bërë ato shumë të ripërdorshme dhe të ndashme në aplikacionet tuaja të uebit, të përsosur për zhvillimin e sistemeve të dizajnit shumë të personalizuar.
Për këtë shembull, ne do të krijojmë dy komponentë kartash, duke transferuar nga një prej bibliotekave të mia të preferuara të modeleve, "Përbërësit Përfshirës" në "Heydon Pickering" për librin e shkëlqyer.
Duke përdorur Lit
Krijimi, shkallëzimi dhe mirëmbajtja e komponentëve të uebit me Javascript vanilje mund të bëhet shpejt e çrregullt, kështu që unë kam zgjedhur të përmirësoj ekspresivitetin duke përdorur ndriçimin që përdor Typescript. Gjithsesi, do të ishte më mirë nëse nuk harroni t'i hidhni një sy zbatimeve të vaniljes JS për të kuptuar se si funksionon zbatimi i Komponentëve të Uebit nën kapuç.
Dokumentacionin e ndezur mund ta gjeni nën këtë link dhe kodin origjinal Html dhe Js të elementit të kartës këtu.
Pra, le t'i bëjmë duart tona pis.
Unë kam filluar të inicioj një repo boshe git në "link". Mos ngurroni të shtoni kontributin tuaj dhe përmirësimet janë gjithmonë të mirëseardhura.
Unë kam shtuar bibliotekat Typescript, Eslint, Jasmine dhe Open Web Components, për t'i mbajtur të gjitha së bashku me praktikat më të mira të kodit dhe për të testuar komponentët pas:
Struktura ime e dosjes do të jetë një dosje përbërësish që mund të ketë gjëra të përbashkëta. Në këtë rast, ne do të ndajmë disa stile midis dy komponentëve.
Më pas, ne fillojmë të krijojmë një dekorues të ri të klasës @customElement ('card-image') në card.ts që shtrihet nga LitElement që trashëgon dhe kapsulon disa metoda për të hyrë në API të komponentëve të uebit:
Pasi të fillojmë të përcaktojmë një ndërfaqe për të kaluar vetitë e komponentit, unë e kam deklaruar atë në të njëjtin skedar, por mos ngurroni të krijoni një të ndarë, nëse mendoni se do të ripërdoret:
Është koha për të përcaktuar objektin e konfigurimit dhe Html që do të kthehet në metodën e renderit:
Tani mund të përcaktojmë stilet; ne gjithashtu importojmë një stil të përbashkët, i cili është përkufizimi i shkronjave:
Më në fund, ne do të vendosim dy ngjarje për të zgjidhur problemin e ngjarjes së klikimeve të tepërta të listuara këtu:
Dhe tani, ne duhet të kemi një komponent të vetëm karte që duket kështu:
Në pjesën tjetër, ne do ta testojmë këtë komponent dhe do të bëjmë një tjetër që ripërdor kartën origjinale.
Pjesën tjetër mund ta gjeni këtu 👉 Komponentët e uebit ndër-kornizë 📚 duke përdorur Lit (Pjesa II)
