Front-End webfejlesztés legjobb gyakorlatai az iparágban szerzett tapasztalataimból
Ha még nem követi ezeket, fontolja meg, hogy azonnal elkezdi
Pár hónappal ezelőtt, elkezdtem dolgozni egy egyéves webalkalmazás-fejlesztési projekten, és rájöttem, hogy milyen sok fejlesztő nincs teljesen tisztában a webalkalmazások front-end fejlesztésének legjobb ipari gyakorlataival. Még én sem voltam tisztában néhány gyakorlattal. Ezért úgy döntöttem, hogy megírom ezt a cikket, hogy megosszam, amit tudok és amit tanultam a webalkalmazások fejlesztése során követendő legjobb gyakorlatokról.
Ez a cikk a front-end fejlesztés legjobb gyakorlataira fog összpontosítani, mert tapasztalatom szerint a front-end kód minősége a legmeghatározóbb tényezője egy nagyszerű webalkalmazásnak, de a legtöbb fejlesztő nem követi ezeket a gyakorlatokat, és az egyes komponenseket fejleszti. Ha a front-end fejlesztők nem követik ezeket a gyakorlatokat, akkor nagyon nehéz lesz a kódot kezelni, nem lesz konzisztens a tervezés, és a webalkalmazás sebességére is negatív hatással lesz. Ezen gyakorlatok követése tisztábbá és könnyebben kezelhetővé teszi a kódot, és növeli az összes fejlesztő termelékenységét.
Ebben a cikkben a projekt frontend architektúrájának strukturálásakor, a frontend kód megírásakor és a telepítés előkészítésekor követendő legjobb gyakorlatokról fogok beszélni. Tehát kezdjük el.
A projekt megkezdésekor az első dolog a front-end kódarchitektúra megfelelő strukturálása. És ezek azok a legjobb gyakorlatok, amelyeket a projekt minden front-end fejlesztőjének követnie kell.
A stíluskód strukturálása
A stílusok mappában hozzon létre külön mappákat a konfigurációk, az alap, az elrendezés, a komponensek és az oldalak számára a webalkalmazástól függően. Használjon külön tipográfia fájlt a webalkalmazásban használt összes HTML szövegcímke (például h1,h2,…) méretének és színének meghatározásához. A színeket egy változófájlban kell meghatározni, és a színeket megfelelő nevű változókhoz kell rendelni, és ezeket a változókat kell használni, amikor a színeket az egész webhelyen alkalmazni kell. Ezeket a stílusfájlokat az alábbi képhez hasonlóan létrehozott mappákba építse be.
Aztán ezeket a fájlokat importálhatja a fő stílusfájlba. Ha scss-t használsz a webes alkalmazásodban, akkor a main.scss fájl az alábbi kódhoz hasonló lenne.
A JS kód strukturálása
A JavaScript strukturálása alapvetően a fájlok felosztását és a saját JavaScript elkülönítését jelenti a máshonnan származóaktól. A pluginok, a vendor és a scriptek a három fő mappa, amelyekre a JS fájlokat feloszthatjuk. A pluginok a hasznos kóddarabokat tartalmaznák, amelyeket mindenhol használunk a webalkalmazásban, például a jQuery pluginokat, a vendorok a harmadik féltől származó JavaScript-kódot, például a keretrendszereket és könyvtárakat, például a slick könyvtárat, a scripts mappába pedig a webalkalmazásunk logikájához írt szkripteket.
