Öz Veb İnkişaf Çərçivənizi Yazaraq JavaScript Bacarıqlarınızı necə artırmaq olar

Unsplash-dan @ryoji__iwata tərəfindən hazırlanmış şəkil

Bir çərçivənin necə işlədiyini heç düşündünüzmü?

Uzun illər əvvəl jQuery öyrəndikdən sonra AngularJS kəşf etdiyim zaman AngularJS mənim üçün qaranlıq bir sehr kimi görünürdü.

Sonra Vue.js çıxdı və başlıq altında necə işlədiyini analiz edərkən öz ikitərəfli bağlama sistemimi yazmağa təşviq etdim.

Bu yazıda, xüsusi HTML element atributları, reaktivliyi və ikiqat bağlanması ilə müasir bir JavaScript çərçivəsini necə yazacağımı göstərəcəyəm.

Reaktivlik necə işləyir?

Reaktivliyin necə işlədiyini anlamaq yaxşı olardı. Yaxşı xəbər budur ki, bu asandır. Əslində, Vue.js-də yeni bir komponent elan etdiyiniz zaman, proksi dizayn nümunəsindən istifadə edərək, hər bir mülkü (alıcılar və təyin edənlər) proksimallaşdıracaqdır.

Bu şəkildə həm dəyər, həm də istifadəçi girişindən əmlak dəyəri dəyişiklikləri aşkar edilə bilər.

Proxy dizayn nümunəsi necə görünür

Proxy modelinin arxasındakı fikir sadəcə bir obyektə girişi həddindən artıq yükləməkdir. Həqiqi həyat analoqu bank hesabınıza giriş ola bilər.

Məsələn, birbaşa bank hesabınıza daxil ola və dəyərinizi ehtiyaclarınıza görə dəyişdirə bilməzsiniz. Bu icazəsi olan birisindən soruşmalısınız, bu halda bankınız.

Yuxarıdakı nümunədə, balansa daxil olmaq üçün bank obyektindən istifadə edirsinizsə, alıcı funksiyası həddindən artıq yüklənir və mülk mövcud olmasa da, əmlak dəyəri əvəzinə həmişə 9.000.000 qaytarır.

Set funksiyasını həddindən artıq yükləməklə onun davranışını manipulyasiya etmək mümkündür. Fərqli bir xüsusiyyət təyin etmək, yeniləmək və ya heç bir şey etmək üçün dəyəri dəyişdirə bilərsiniz.

Reaktivlik nümunəsi

Proxy dizayn nümunəsinin necə işlədiyindən əmin olduğunuz üçün, JavaScript çərçivəmizi yazmağın vaxtı gəldi.

Sadə etmək üçün AngularJS sintaksisini təqlid edəcəyik. Bir nəzarətçi elan etmək və şablon elementlərini nəzarətçi xüsusiyyətlərinə bağlamaq asandır.

Əvvəlcə xüsusiyyətləri olan bir nəzarətçi təyin edin. Sonra bir şablonda həmin nəzarətçidən istifadə edin. Nəhayət, element dəyəri ilə cüt əlaqəni təmin etmək üçün ng-bind atributundan istifadə edin.

Şablonu təhlil edin və nəzarətçini hazırlayın

Xüsusiyyətləri bağlamaq üçün bu xüsusiyyətləri elan etmək üçün bir yer (aka nəzarətçi) almalıyıq. Buna görə bir nəzarətçi təyin etmək və onu çərçivəmizə daxil etmək lazımdır.

Controller bəyanatı zamanı çərçivə ng-controller atributları olan elementləri axtarır.

Bu elan edilmiş nəzarətçilərdən birinə uyğun gəlsə, bu nəzarətçinin yeni bir nümunəsi yaradılır. Bu nəzarətçi nümunəsi yalnız şablonun müəyyən hissəsindən məsuldur.

Əl işi nəzarətçi dəyişkən bəyannaməsi belə görünür. Controller obyekti addController çağıraraq çərçivə daxilində elan edilmiş bütün nəzarətçiləri ehtiva edir.

Əl işi nəzarətçi tərifi

Hər bir nəzarət üçün bir zavod funksiyası qeyd olunur ki, zərurət yarandıqda yeni bir nəzarət qurula bilər. Çərçivə eyni zamanda şablonda istifadə olunan eyni nəzarətçinin yeni nümunələrinin hər birini saxlayır.

Bağlar axtarır

Bu nöqtədə, nəzarətçi nümunəsi və bu nümunəni istifadə edən bir şablonumuz var.

Növbəti addım, nəzarətçi xüsusiyyətlərindən istifadə edən bağlayıcı elementləri axtarmaqdır.

Çox sadə bir şəkildə, bir obyektin bütün bağlamalarını saxlayır (hash xəritəsi kimi istifadə olunur). Bu dəyişən cari dəyərə bağlanacaq bütün xüsusiyyətləri və bu xassəni bağlayan bütün DOM elementlərini ehtiva edir.

Əl işi ilə bağlı bir bəyanat

İkiqat istiqraz nəzarətçisinin xüsusiyyətləri

Artıq ilkin iş çərçivə tərəfindən edildiyindən maraqlı hissə gəlir: ikiqat bağlama.

Bu kod hər dəfə xüsusiyyət dəyərini yenilədikdə DOM-u yeniləmək üçün nəzarətçi xüsusiyyətini DOM elementlərinə bağlayır.

Ayrıca, DOM elementlərini nəzarətçi xüsusiyyətinə bağlamağı unutmayın. Bu şəkildə, istifadəçi giriş dəyərini dəyişdirdikdə, nəzarətçi xüsusiyyəti yenilənir. Sonra bu xassəyə bağlı olan bütün digər elementlər də yenilənir.

Bir proxy istifadə edərək koddan yeniləmələri aşkar edin

Yuxarıda izah edildiyi kimi, Vue əmlak dəyişikliklərinə cavab vermək üçün komponentləri bir vəkil təqdim edir. Eynisini proksi ilə tənzimləyicini yalnız nəzarətçi ilə əlaqəli xüsusiyyətlər üçün təyin edək.

Bir bağlı xüsusiyyət təyin edildikdə, proxy bu xassəyə bağlı olan bütün elementləri araşdırır. Sonra yeni dəyərlə yenilənirlər.

Bu nümunədə, yalnız dəyər elementi təyin olunduğu üçün yalnız giriş elementinin bağlanması dəstəklənir.

Üzv tədbirlərinə cavab verin

Ediləcək son şey istifadəçi qarşılıqlı təsirlərinə cavab verməkdir. DOM elementləri dəyər dəyişikliyini aşkar etdikdə hadisələri tetikler.

Bu hadisələri dinləyin və əlaqəli xassəni hadisədən yeni dəyərlə yeniləyin. Eyni xassəyə bağlı olan bütün digər elementlər vəkil sayəsində avtomatik olaraq yenilənir.

Hamısını bir yerə yığdıqdan sonra əl işi, ikiqat əlaqəli təqdimatlar əldə edəcəksiniz. Budur kodun hamısı olan işləyən bir demo.

Oxuduğunuz üçün təşəkkür edirəm. JavaScript çərçivələrinin necə işlədiyini müəyyənləşdirməyinizə kömək etdi.

Təbrik edirik! Xüsusi HTML element atributları, reaktivlik və ikiqat bağlama kimi populyar xüsusiyyətləri inkişaf etdirdilər.

Bu məqaləni faydalı hesab etdinizsə, başqalarının məqaləni tapması və dəstəyini göstərməsi üçün xahiş edirəm düyməsini bir neçə dəfə vurun!

Gələcək əşyalarım barədə məlumat almaq üçün məni izləməyi unutmayın

Digər yazılarımı yoxlayın

https://medium.com/@jbardon/latest

Begin Yeni başlayanlar üçün cavab verin

  • Necə cavab verəcəyinizi və virtual DOM-un necə işlədiyini öyrənmək üçün qısa bir təlimat
  • Reaktivliyi dövlətlərlə reaksiyaya necə gətirmək olar

➥ JavaScript

  • Vue.js. ilə işləyərkən qarşısını almaq üçün ümumi səhvlər.
  • Ağrılı JavaScript ayıklamasından çıxın və mənbə xəritəsi ilə Intellij istifadə edin
  • Bu şəkildə nəhəng JavaScript paketlərini asanlıqla azalda bilərsiniz