Object.append() – nadpisywanie domyślnych opcji konfiguracji

Jak zmniej­szyć ilość kodu i uniknąć jego powie­la­nia? Można użyć raz zdefi­nio­wa­ne opcje zapisu­jąc je w jednym miejscu i przypi­sać je potem wielo­krot­nie, nierzad­ko modyfi­ku­jąc większość z nich w zależ­no­ści od potrzeb.

Mniej powielanego kodu = mniej błędów i mniej pracy!

Wielo­krot­nie się zdarza­ło, korzy­sta­jąc z plugi­nów JavaScript (Owl Carousel 2 czy Select2) lub funkcji jQuery (np. $.ajax()) po kilka razy wpisy­wa­ł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 przypad­ku zmiany, trzeba pamię­tać by zmienić opcję we wszyst­kich miejscach.

Pogrze­ba­łem w dokumen­ta­cji, bo dobrze wiem, że te opcje można zapisać w zmien­nej i wykorzy­stać wielo­krot­nie. Potrze­bo­wa­łem funkcję, która pobie­rze domyśl­ne opcje i wymie­ni tylko te, które trzeba. Na Youtu­be znala­złem fajny kanał dcode, a tam film:

Object.assign() – łączenie obiektów

I wszyst­ko fajnie, bo Object.assign() spełnie moje wymaga­nia. Jedno tylko w tym filmie zosta­ło pominię­te. Miano­wi­cie, że ta funkcja nie tworzy nowego, wspól­ne­go obiek­tu, a nadpi­su­je pierw­szy wskazany.

Definicja mówi

// 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 przypi­sa­łem opcję dropdown­Pa­rent do select2_​_​defaults, a przecież nie o to chodzi­ło. Takie zasto­so­wa­nie wprowa­dza złe dane w następ­nym użyciu, gdzie opcja dropdown­Pa­rent jest niepo­trzeb­na, a sam fakt jej istnie­nia powodu­je błędne działa­nie aplikacji.

Na szczę­ście wystar­czy tylko jedna modyfi­ka­cja by wszyst­ko zaczę­ło działać jak należy.

$(".modal select#termin_trenerzy").select2(
  Object.assign({}, select2__defaults, {

    dropdownParent: $('#addTrainersModal'),

  })
);

Jako pierw­szy argument i zarazem cel podaje­my posty obiekt: {}. Do niego zosta­je przypi­sa­ny zbiór select2_​_​defaults, a na końcu dopisu­je­my lub nadpi­su­je­my opcje. Dzięki temu opcje domyśl­ne zosta­ną zawsze te same, a my dopisu­je­my tylko to, co unikal­ne dla danej instancji.