SASS-ı kəsin: Hər şey üçün Inline JavaScript stillərindən necə istifadə etmək olar.

Hal-hazırda, ön veb inkişaf yalnız veb səhifələr deyil, tətbiqetmə yaratmaqla bağlıdır. CSS və SASS səhifələrin tərtibatı üçün əla olsalar da, tətbiqetmələrin tərtibatı üçün əla deyildi. Bu, xüsusən komponent əsaslı bir strategiya ilə işləyirsinizsə doğrudur.

Komponent əsaslı bir strategiya, tətbiqetmənizi komponentlər adlanan kiçik təkrar istifadə edilə bilən bloklara ayırmaq fikridir. Tətbiqinizi yaratmaq üçün komponentlərdən istifadə etmək, ön ucunuzun təkrar istifadəsini, aydınlığını və səmərəliliyini artıra bilər.

Komponent əsaslı yanaşmadan tam istifadə etmək üçün xüsusiyyətləri, işarələri və üslubları tam əhatə edən komponentlərə ehtiyacımız var.

Bu yazı, komponent əsaslı inkişafda kömək üçün üslubları yazmaq üçün satır daxilində JavaScript istifadə qaydalarını göstərəcəkdir. Sonda tək bir fayl olan, asanlıqla paylaşılan və tamamilə özünə sahib olan ön komponentlərə sahib olacağıq.

Üslublarınızı JS-də yazmaq böyük bir dəyişiklikdir. Buna görə niyə bunu etmək istədiyimizi izah etmək üçün biraz vaxt ayırmaq istərdim. Doğru iş üçün doğru vasitə seçməyə inanıram. SASS bu zaman üçün doğru vasitə olduğuna əmin idi və aşağıdakı kimi böyük üstünlüklər verdi:

  • Yuva
  • dəyişənlər
  • Qarışıqlar

Üslər işarələmənizi əks etdirə bildiyindən yuva yerləşdirmə çox böyük bir fayda gətirdi. Olsaydı:

Bunu edə bilərsən:

Bu fayda artıq o qədər də faydalı deyil. Hələ də biçimimizi əks etdirən üslublarımız çox maraqlıdır, lakin şəkillərimiz dəyişdi!

Günümüzdə bu komponent əsaslı "İstifadəçi Siyahısı" və "İstifadəçi" adlanan iki ayrı hissəyə bölünməyə üstünlük veririk. Nəticə, "UserList" in təkrarlanan "İstifadəçi" seriyasını ehtiva etdiyi iki sənəddir.

Tətbiqimizi komponentlərə böldüyümüz üçün, eyni strategiyanı istifadə edərək üslublarımızı yazmalıyıq. Bu o deməkdir ki, üslublarımızı komponentin işarələməsi ilə birlikdə tapmağa çalışmalıyıq ki, onlar birlikdə tutulsun.

Buna nail olmağın bir yolu kaskad üslub vərəqlərindən əvvəl istifadə edildiyi kimi satır içi üslublardan istifadə etməkdir.

Bu klassik metod, komponent əsaslı bir yanaşma ilə çox yaxşı uyğun gəlir. Çox məhdudlaşdırıcı olduğu üçün istifadə etməyəcəyik, amma müasir bir üslub həllində axtardığımız prinsipləri göstərir.

Dəyişənlər və qarışıqlar

SASS yuva qurmağından danışdıq. Bəs digər böyük üstünlüklər - dəyişənlər və qarışıqlar?

Yaxşı, bunun üçün kifayət qədər populyar bir başqa həll yolu var - JavaScript!

Stil həlli üçün lazım olanı əldə etmək üçün "var" və "function" üçün JavaScript-in təbii funksiyalarından istifadə edə bilsəydik, yaxşı olmazdımı? Üslublarımızı yazmaq üçün JavaScript istifadə edərkən JS-yə sevdiyimiz rahatlıq, güc və tanışlıq qazanırıq. Üstəgəl! Bütün komponentimiz tək bir dildə yazıla bilər! Və hətta bir fayl!

Hədəflərimiz

Budur nə etmək istəyirik:

  • Üslublarımızı işarənin düz yanında düzəldin
  • "İdxal" və "İxracat" rənglər və ya kəsmə nöqtələri kimi dəyişənlər
  • Statusa əsasən "dinamik" üslublar yazın (açıq / qapalı menyu və s.)

Daha bir neçə tələb:

  • `: Hover,: before,: after` kimi yalançı dövlətləri əhatə etməlidir
  • Birbaşa `@media (max-width: 600px) 'kimi media sorğularını dəstəkləməlidir
  • Funksiyalara / üçlüyə icazə verin (yuxarıdakı dinamikaya baxın)

Yan not: "JS stilləri" ilə "CSS in JS" arasındakı fərqi izah edin

İki fərqli yanaşma var:

  • CSS-nizi JS-yə daxil edə bilərsiniz
  • CSS-nizi JS istifadə edərək yaza bilərsiniz

İkinci üsula üstünlük verirəm və buraya girəcəyimiz şey budur.

İlk yanaşma üçün CSS modulları "CSS-in JS-də yazılması" kateqoriyasında populyar bir həlldir. Buraya qoyduğunuz müntəzəm CSS daxildir bir komponent yaz. Ad aralığı siniflər və ya kimliklər ilə əl ilə edilə bilər. Ancaq bu, yalnız belə bir dəyəri istifadə etmək üçün kifayət deyil. Dəyişən dəstək və ya qarışıqlar üçün PostCSS və ya CSS modulları ilə SASS kimi bir CSS artırıcı istifadə etməlisiniz.

Burada da dəyişənlər, üçlülər və ya funksiyalar kimi dil funksiyaları üçün JavaScript istifadə etmək istərdik. Çözümümüz bizi JS əvəzinə bir növ "inkişaf etmiş" CSS yazmağa məcbur edərsə, bu, ehtiyaclarımız üçün işləməyəcəkdir.

Hər iki yanaşma üçün çoxsaylı CSS-in-JS həlləri mövcuddur. Yoxla! Hələlik hədəflərimizə və tələblərimizə cavab vermək üçün ən yaxşı hesab etdiyimi həyata keçirəcəyik.

Gəlin başlayaq!

İstifadə edəcəyik:

  • ES6 Babel tərəfindən dəyişdirildi
  • İşarələrimizi göstərməyə cavab verin
  • JS-dən CSS yaratmaq üçün Afrodita yazırıq.

Əvvəlcə UserMenu adlı sadə bir komponent yaradaq. Kiçik bir istifadəçi avatarı və tıklandığında açılan bir menyu olacaq.

Bunu tətbiq səhifənizdə belə istifadə edə bilərsiniz:

İşarə vacib deyil. Bu, sadəcə Basic React və ya hətta ES6 / vətəndaşı olmayan funksiya komponentləri üçün bir az sintaksis ilə AngularJSdir.

Gəlin stil verməyə başlayaq! Afrodita ilə başlayın.

Burada sənədlərdə göstərildiyi kimi Afroditadan ehtiyac duyduğumuz xüsusi funksiyaları idxal edirik.

İdxal haqqında qeyd: 'foo' dan ʻimport {bar} sintaksisli müəyyən istinadları idxal edirik. Daha çox məlumat üçün MDN idxal sənədlərinə baxın

İndi bir "const" stili yazdıq və içindəki "stillər" obyektimizlə "StyleSheet.create ()" istifadə edirik. Bu Afrodita sənədlərindəndir. Afrodit edər "

"Background-color" əvəzinə "backgroundColor" yazdıq. Bütün CSS xüsusiyyətlərimiz JS-də dəvəyə qoyulmalıdır! "MarginLeft" və ya "fontSize" və ya "justifyContent" kimi. Əslində çox öyrəşmək lazımdır, xüsusən də mənim kimi JavaScript yazarsan!

Bu əsasdır.

Qırmızı altıbucaqlı rəng əvəzinə artıq markalı bir rəng istifadə etmək istəyirik. JavasScript dəyişənlərindən istifadə edə bilərik. Bir `rənglər.js` faylı quraq. Bu bütün sənəddir:

Rəng dəyişənlərimizin hamısı bu fayldan ixrac olunur. Dəyərlər yenidən təyin edilmədiyi üçün "var" əvəzinə "const" istifadə edirik. İndi faylı komponentimizə daxil edə və rənglərimizi aşağıdakı kimi istifadə edə bilərik:

JS dəyişənimizi bir simli ilə birlikdə istifadə etməli olduğumuz vəziyyət? Bir kənar spesifikasiya kimi? Asan. Yalnız ES6 şablon ədədi istifadə edin.

Orada gedirik. Dəyişən simimizlə birləşir.

Psevdo dərsləri haqqında nə demək olar? Problem deyil. Afroditin `: əvvəl` və`: sonra` kimi yalançı dərslər üçün böyük dəstəyi var.

Yalnız yalançı sinfi yuva qurun, ancaq açar adı kimi bir simli istifadə edin (`: əvvəl`)! Yuxarıdakı nümunədə istifadəçi adının solunda kiçik bir dairə yaradılmışdır.

Media sorğuları eyni şəkildə işləyir.

İndi fasilə nöqtəmiz var! Dolgu "600px" -in altına endirildi.

Bunu bir addım daha irəli aparmaq və tətbiq nöqtəsindəki kəsmə nöqtələrimizi izləmək istəsək nə olardı? JavaScript!

Ayrı bir fayl yaradacağıq, sətir kimi istifadə etmək istədiyimiz kəsmə nöqtələrini yazaq və dəyişənlərə təyin edəcəyik.

İndi .js sənədimizdən bir kəsmə nöqtəsi idxal edə və onu "color.js" ilə etdiyimiz kimi dəyişən kimi istifadə edə bilərik.

"[İsMobile]" "breakpoints.js" sənədimizdən "@media (max-width: 600px)" simvoluna interpolasiya olunur və nəzərdə tutulduğu kimi işləyir.

Son tətbiqetməyimizi edək. Öyrəndiklərimiz daxil olmaqla hər şeyi bir araya gətirəcəyik. Həm də komponentin açıq və ya qapalı olmasına əsaslanan menyunu göstərən dövlət əsaslı bir üslub yaradacağıq.

Qeyd: isOpen dəyişənini daha yüksək səviyyədən qəbul edərkən bəzi detalları görməməzlikdən gəlmək olar. Fərqli bir yerdə idarə olunduğunu və divimizə basmaqla onu "true" -dan "false" -ə çevirdiyini düşünək.

Qeyd 2: Bu kodu oxumaq üçün ox funksiyalarını başa düşmək vacibdir. Siz öyrəşdiyiniz zaman onlar çox gözəldirlər. Bunlar mahiyyətcə dərhal "qayıdan" "funksiyalar" dır. MDN-də ox funksiyaları.

Son kodumuz budur: (Çalışan bir CodePen demosuna da baxa bilərsiniz.)

Əsas dəyişiklik üslub sabitimizi StyleSheet.create obyektini qaytaran bir funksiyaya çevirməyimizdir. Komponentdən bir arqument olaraq isOpen tələb olunur. IsOpen dəyişdikdə menyumuz yox olacaq.

İş demosunu yoxlayın

Nəticələr

Bu yanaşma ilə nə etdik? Yaxşı, kifayət qədər mürəkkəb bir komponent haqqında hər şeyi tək bir faylda və tək bir dildə yerləşdirə bildik.

Tətbiq mahiyyətcə JavaScript olduğundan, komponentlərinizi necə qurmaq istədiyinizi seçə bilərsiniz. JavaScript-in icazə verdiyi bütün nümunələr sizin üçün mövcuddur.

Bu o deməkdir ki, stil həlliniz birbaşa bütün tətbiqetmə arxitekturanızı əks etdirə bilər. Bu metodla quruluşunuza tam nəzarət edə bilərsiniz. Bu parçaları hərəkət etdirə və birləşdirə bilərsiniz, ancaq bunun ən insanın oxunaqlı və ən faydalı konfiqurasiyası olduğunu düşünürsən.

Təcrübəmdə ən yaxşı metod bir çox kiçik, tamamilə təcrid olunmuş komponent yaratmaqdır. Onların əksəriyyəti dəyişməz tətbiqetmə arxitekturası deyiləndə yalnız yuxarıdan aşağıya məlumat alan "vətəndaşlığı olmayan" və ya "lal" komponentlərdir.

Bu komponentlərin işarələrini, üslublarını və funksiyalarını daxil etmələrini üstün tuturam. Yalnız bir yer və bir aydın asılılıq ağacı olduğu zaman komponentləri idarə etmək və ya dəyişdirmək əhəmiyyətsizdir.

Bu komponentlər yalnız bir problem olduğundan, fayllar nadir hallarda çox böyüyür. Çox mürəkkəbləşirlərsə, onları mücərrədləşdirə və ya ayrı komponentlərə yenidən düzəldə bilərsiniz.

İnline JS stilinin başqa bir faydası, yeniləmələrdə kod tapmaq əhəmiyyətsizdir, çünki bir komponent üçün lazım olan hər şey tək bir sənəddədir.

Bu şəkildə yaradılan komponentləri bölüşmək də asandır, çünki onları bir JS faylı kimi paylaya bilərsiniz. İstehlakçılar idxal bəyannamələrini öz mülahizələrinə əsasən yerinə yetirə bilərlər. İdxal Cavabının İdxal Bucağı ola bilməməsinin səbəbi yoxdur

İçəri JS üslublarının gücünü, SASS-ı necə əvəz edə biləcəklərini nümayiş etdirdiyimi və komponent əsaslı inkişaf barədə bir az fikir aldığımı ümid edirəm. Bu, həqiqətən komandamız üçün işləyən bir yanaşmadır. Ümid edirəm sizin üçün işləyir!

Andrew Davis, 2014-cü ildən bəri Capital One üçün və 2001-ci ildən bəri veb üçün böyük bir istifadəçi təcrübəsi hazırlamış və inkişaf etdirmişdir.

API'lər, açıq mənbə, icma tədbirləri və Capital One-dakı inkişaf mədəniyyəti haqqında daha çox məlumat üçün bir pəncərə inkişaf etdirici portalımız olan DevExchange-i ziyarət edin. https://developer.capitalone.com/