Sökərək bəstələyərək mürəkkəb problemləri necə asanlaşdırmaq olar

Discover Funksional JavaScript, BookAuthority tərəfindən funksional proqramlaşdırma üzrə ən yaxşı yeni kitablardan biri kimi tanındı!

Unplash-da rawpixel tərəfindən hazırlanmış foto

Mürəkkəbliklə məşğul olmağın təbii üsulumuz onu daha kiçik parçalara ayırmaq və sonra hər şeyi yenidən bir yerə yığmaqdır.

Bu iki addımlıq bir prosesdir:

  • Problemi daha kiçik hissələrə ayırın
  • Problemi həll etmək üçün kiçik parçaları bir yerə yığın

Anlamaq və həyata keçirmək daha asan olduğundan kiçik hissələrə ayırırıq. Kiçik hissələr paralel olaraq inkişaf etdirilə bilər.

Ayrışma, məsuliyyətlərin təyin edilməsi və adların verilməsidir. Bu, danışmağı və düşünməyi asanlaşdırır. Bir məsuliyyəti müəyyən etdikdən sonra yenidən istifadə edə bilərik.

Kompozisiya, kiçik parçaları bir araya gətirmək və aralarında bir əlaqə yaratmaqdır. Bu hissələrin necə əlaqə qurduğuna, işləmə qaydasına və aralarındakı məlumatların necə axdığına qərar veririk.

Bir sistem daha kiçik hissələrə bölünsə belə, bu hissələr arasında çox sayda əlaqə olduğu zaman bir sistemi anlamaqda çətinlik çəkirik. Bir sistemi daha anlaşıqlı etmək üçün hissələri arasında mümkün əlaqə sayını minimuma endirməliyik.

Obyektin sökülməsi

Obyektlər vəziyyət və davranışın qarşılıqlı təsirindən daha çoxdur. Obyektlər məsuliyyət daşıyan şeylərdir.

Çürümək

React istifadə edərək üç pilləli bir tətbiqetmə necə yaradılsın, işlər siyahısı tətbiqetməsi götürürəm və vəzifələri aşağıdakı obyektlər arasında bölürəm:

  • TodoDataService: serverin Todo API ilə əlaqə qurmaqdan məsuldur
  • UserDataService: Server istifadəçi API ilə əlaqə üçün cavabdehdir.
  • TodoStore: Tapşırıqları idarə etmək üçün domen mağazası. Tapşırıqlarla bağlı yeganə həqiqət mənbəyidir.
  • UserStore: İstifadəçiləri idarə etmək üçün domen mağazası.
  • TodoListContainer: Tapşırıqların siyahısını əks etdirən kök konteyner komponenti.

Gördüyünüz kimi, sökülmə zamanı məsuliyyət və adlar təyin edirəm.

Bəstələyin

Sonra onları tək bir funksiyada birləşdirirəm. Bütün obyektlər burada yaradılır və asılılıqlar daxil edilir. Buna Kompozisiya Kökü deyilir.

"reaksiya" verərək reaksiya verən idxal; ReactDOM-u 'react-dom' -dan idxal edin; TodoDataService-i "./dataaccess/TodoDataService" -dən idxal edin; UserDataService-i "./dataaccess/UserDataService" -dən idxal edin; TodoStore'u "./stores/TodoStore" dan idxal edin; UserStore-u "./stores/UserStore" -dan idxal et; TodoContainer'ı "./components/TodoContainer.jsx" saytından idxal edin; (Function startApplication () {let userDataService = UserDataService (); let todoDataService = TodoDataService (); let userStore = UserStore (userDataService); let todoStore = TodoStore (todoDataService, userStore); let mağazalar = {todoDataStore) ) {return Promise.all ([userStore.fetch ()]);} function mountPage () {ReactDOM.render ( , document.getElementById ('kök')); } loadStaticData (). sonra (mountPage); }) ();

Metodun pozulması

Mənasız bir kompozisiya sizi daha yaxşı işləyən bir proqramçı halına gətirən əsərində daha böyük bir vəzifə götürürəm və daha kiçik hissələrə ayırıram.

İki növ metod müəyyən edirəm:

  • Bir tapşırıq üçün metodlar. Bunu kiçik, təmiz funksiyalar kimi etməyə çalışıram.
  • Kiçik funksiyaların əlaqələndirilməsi metodları.

Çürümək

Tələbi oxuyaq və problemi daha kiçik tapşırıqlara ayıraq:

Texnologiya başlıqlarını kitabların siyahısında tapmaq, kitab məlumatlarını izləmək üçün bütün məlumatlarla hazırlamaq və kitabları müəllifin adına görə sıralamalıyıq.
  • İsTechnology () predikat bir texnoloji kitab olub olmadığını yoxlayır
  • toViewBook ​​() görünüşü üçün bütün məlumatlarla bir obyekt yaratmaq
  • asByAuthorname (), iki kitabı müəllifin adına görə artan sırada sıralamaq
  • bütün bu kiçik funksiyaları bir araya gətirmək üçün getBooks ()
İşlev isTechnology (kitab) {return book.type === "T"; }
ToBookView funksiyası (kitab) {return Object.freeze ({title: book.title, müəllif: müəlliflər [book.authorID] .name}); } Function ascByAuthor (book1, book2) {if (book1.author) kitab2. müəllif) qayıt 1; qayıt 0; }

Burada da hər kiçik hissənin adı və məsuliyyəti var.

Bəstələyin

GetBooks (), hamısını birlikdə yaradan koordinator metodudur. Kiçik tapşırıqlara qoşulmaq üçün nöqtəsiz funksional üslubdan istifadə edirəm.

GetBooks () funksiyası {return books.filter (isTechnology) .map (toBookView) .sort (ascByAuthor); }

Komponentlərlə parçalanma

Ayrışma, istifadəçi interfeysi tətbiqində ümumi bir mövzudur.

Çürümək

Görüləsi işlər siyahısını saxlayan axan tətbiqi nəzərdən keçirin.

Komponentlər arasında necə əlaqə qurursunuz, səhifəni axan komponentlərə ayırıram:

  • TodoAddForm: Yeni tapşırıq əlavə etmək üçün forma
  • TodoSearchForm: Tapşırığı axtarmaq üçün istifadə olunan forma
  • TodoList: Tapşırıqları göstərmək üçün siyahı
  • TodoListItem: Siyahıdan tək işlər
  • FormInput: mətn sahəsi
  • FormButton: bir düymə

Səhifəni sökdükdə, komponentləri adlandırıram və məsuliyyətləri təyin edirəm.

Bəstələyin

Sonra komponentləri yenidən bir ağac quruluşuna birləşdirdim.

Komponentlərin ağac quruluşu

Sıfırlamaq üçün HTML etiketlərindən istifadə edirəm. TodoContainer-dən axan kodu nəzərdən keçirin:

// Vue Komponent Şablonu
// komponent reaksiya qaytarma sinfi TodoContainer genişləndirir React.Component {render () {return ; }}

Bu vəziyyətdə daha böyük problem komponentlər arasındakı ünsiyyətdir.

Dekorativlər ilə sökülür

Zavod Fonksiyonlarıyla Dekoratörler Nasıl Kullanılır, bir metodun əsas və ikincil tərəfləri parçalanır.

Bu kodu nəzərdən keçirin:

TodoStore funksiyası (currentUser) {let todos = []; Function add (todo) {let start = Date.now (); əgər (currentUser.isAuthenticated ()) {todos.push (todo); } else {"Bu əməliyyatı həyata keçirmək üçün icazə verilməyib"; } icazə müddəti = Date.now () - başlanğıc; console.log ("add () müddəti:" + müddəti); } return Object.freeze ({add}); }

Add () metodunun əsas vəzifəsi bir tapşırıq və istifadəçiyə icazə vermək və icra vaxtının qeyd edilməsinə dair iki ikinci vəzifə əlavə etməkdir.

Çürümək

İkincil vəzifələri iki dekorativə bölə bilərik və onlara qəsdən ad verə bilərik: Authorize () və logDuration ()

Funksiya əlavə et (todo) {todos.push (todo); }
Funksiya logDuration (fn) {function decorator (...) {let start = Date.now (); nəticə = fn.apply edək (bu, args); icazə müddəti = Date.now () - başlanğıc; console.log (fn.name + "() müddəti:" + müddəti); Nəticə qayıt; } Qayıt dekorativ; }
Function createAuthorizeDecorator (currentUser) {function authorize (fn) {function decorator (...) {if (currentUser.isAuthenticated ()) {return fn.apply (this, args); } başqa {at "İcazəli deyil" + fn.name + "()"; }} Qayıdan dekorativ; } Qayıtmağa icazə verin; }
let authorize = createAuthorizeDecorator (currentUser);

Bəstələyin

Sonra orijinal funksiyanı yaratmaq üçün hər şeyi bir yerə yığırıq.

originalAdd = bəstələyin (logDuration, authorize) (add);

Compose () funksiyası underscore.js kimi kitabxanalarda tapılmışdır.

Nəticə

Ayrışma, mürəkkəbliklə məşğul olmağın əsas metodudur.

Adlandırma vacib rol oynayır. Qəsdən adların yazılması kodun oxunmasını asanlaşdıracaq.

Hər şeyi bir-birindən ayırdığımızda, onu bir araya gətirmək üçün alətlərə də ehtiyacımız var. Problemi hissələrə ayırmaq üçün yaxşı bir nümunəyə sahib olmaq kifayət deyil - hamısını bir araya gətirmək üçün yaxşı yollara ehtiyacımız var.

Discover Funksional JavaScript, BookAuthority tərəfindən funksional proqramlaşdırma üzrə ən yaxşı yeni kitablardan biri kimi tanındı!

React-da funksional proqramlaşdırma üsullarının tətbiqi barədə daha çox məlumat üçün İşlevsel Reakt-a baxın.

Vue və Vuex haqqında daha çox məlumat üçün Vue.j komponentləri haqqında qısa bir təqdimata baxın.

Dizayn nümunələrinin prinsiplərini necə tətbiq edəcəyinizi öyrənin.

Məni Twitter-də də tapa bilərsiniz.