Jak zmniejszyć ilość kodu i uniknąć jego powielania? Można użyć raz zdefiniowane opcje zapisując je w jednym miejscu i przypisać je potem wielokrotnie, nierzadko modyfikując większość z nich w zależności od potrzeb.
Mniej powielanego kodu = mniej błędów i mniej pracy!
Wielokrotnie się zdarzało, korzystając z pluginów JavaScript (Owl Carousel 2 czy Select2) lub funkcji jQuery (np. $.ajax()) po kilka razy wpisywałem te same dane w opcjach. Dla przykładu:
$("select#sesja_grupy").select2({ theme: "bootstrap-5", selectionCssClass: "select2--small", // For Select2 v4.1 dropdownCssClass: "select2--small", ajax: { url: 'https://akademia.gaum.prostykod.pl/wp-json/gaum/v1/select2/grupy/name=', data: function (params) { var query = { name: params.term, } // Query parameters will be ?search=[term]&page=[page] return query; } } }); $("select#sesja_trenerzy").select2({ theme: "bootstrap-5", selectionCssClass: "select2--small", // For Select2 v4.1 dropdownCssClass: "select2--small", ajax: { url: 'https://akademia.gaum.prostykod.pl/wp-json/gaum/v1/select2/nauczyciel/', data: function (params) { var query = { name: params.term, } // Query parameters will be ?search=[term]&page=[page] return query; } } });
Jak widać część kodu to kopia 1:1. Potem w przypadku zmiany, trzeba pamiętać by zmienić opcję we wszystkich miejscach.
Pogrzebałem w dokumentacji, bo dobrze wiem, że te opcje można zapisać w zmiennej i wykorzystać wielokrotnie. Potrzebowałem funkcję, która pobierze domyślne opcje i wymieni tylko te, które trzeba. Na Youtube znalazłem fajny kanał dcode, a tam film:
Object.assign() – łączenie obiektów
I wszystko fajnie, bo Object.assign() spełnie moje wymagania. Jedno tylko w tym filmie zostało pominięte. Mianowicie, że ta funkcja nie tworzy nowego, wspólnego obiektu, a nadpisuje pierwszy wskazany.
Definicja mówi
Metoda
Object.assign()
kopiuje wszystkie wartości wyliczalnych własnych właściwości z jednego lub więcej obiektów źródłowych do obiektu docelowego. Zwraca obiekt docelowy.Składnia
Object.assign(cel, …zrodla)
Właściwości w obiekcie docelowym zostaną nadpisane właściwościami obiektów źródłowych, jeśli właściwości te mają takie same nazwy. Właściwości obiektów źródłowych występujących później na liście argumentów, podobnie, nadpiszą właściwości obiektów występujących wcześniej.
// select2 const select2__defaults = { theme: "bootstrap-5", selectionCssClass: "select2--small", // For Select2 v4.1 dropdownCssClass: "select2--small", ajax: { url: 'https://akademia.gaum.prostykod.pl/wp-json/gaum/v1/select2/nauczyciel/', data: function (params) { var query = { name: params.term, } // Query parameters will be ?search=[term]&page=[page] return query; } } }; $(".modal select#termin_trenerzy").select2( Object.assign(select2__defaults, { dropdownParent: $('#addTrainersModal'), }) );
W ten sposób na stałe przypisałem opcję dropdownParent do select2__defaults, a przecież nie o to chodziło. Takie zastosowanie wprowadza złe dane w następnym użyciu, gdzie opcja dropdownParent jest niepotrzebna, a sam fakt jej istnienia powoduje błędne działanie aplikacji.
Na szczęście wystarczy tylko jedna modyfikacja by wszystko zaczęło działać jak należy.
$(".modal select#termin_trenerzy").select2( Object.assign({}, select2__defaults, { dropdownParent: $('#addTrainersModal'), }) );
Jako pierwszy argument i zarazem cel podajemy posty obiekt: {}. Do niego zostaje przypisany zbiór select2__defaults, a na końcu dopisujemy lub nadpisujemy opcje. Dzięki temu opcje domyślne zostaną zawsze te same, a my dopisujemy tylko to, co unikalne dla danej instancji.