Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JQuery i $.extend błędnie działa
Forum PHP.pl > Forum > Po stronie przeglądarki
Valantir
Witam. Ostatnio piszę sobie pewien plugin pod jquery (nie jestem jakimś wymiataczem) i natknąłem się na pewien problem, a mianowicie chciałem aby user miał możliwość nadpisywania opcji pluginu. Aby to zrobić używam $.extend. Niestety cała operacja zwraca mi wynik, którego się nie spodziewałem. Posłużę się screenami.
Oto bazowy obiekt:



Obiekt przekazywany przez użytkownika to:



Natomiast obiekt jaki otrzymuję to:



Moje pytanie brzmi tak: dlaczego jako wynik funkcji:
  1. var extended = $.extend(true, {}, this.options, options);

otrzymuję to co jest na trzecim obrazku? Oczekiwałem, że będzie tam opcja menu, tab i templateEngine ale w menu poza opcją position ustawioną na left będą także pozostałe opcje z pierwszego screenu czyli template oraz templateEngine... Co robię nie tak?
SmokAnalog
Dzieje się tak, bo głębokie `jQuery.extend()` nie łączy ze sobą prototypowanych obiektów i ich właściwości. Zobacz:

[JAVASCRIPT] pobierz, plaintext
  1. class Kot {
  2. constructor(imie) {
  3. this.imie = imie
  4. }
  5. }
[JAVASCRIPT] pobierz, plaintext


Mamy klasę Kot i do jej konstruktora przekazujemy imię kota.

[JAVASCRIPT] pobierz, plaintext
  1. let kot = new Kot("Czaruś");
  2. let czlowiek = {
  3. imie: "Grzegorz",
  4. numerButa: 46
  5. }
[JAVASCRIPT] pobierz, plaintext


Teraz mamy i kota, i jego właściciela. Ten ostatni jest w postaci zwykłego obiektu. Spróbujmy pobawić się jQuery.extend():

[JAVASCRIPT] pobierz, plaintext
  1. let przyjazn = jQuery.extend(
  2. true,
  3. {},
  4. {zwierzak: kot, wlasciciel: czlowiek},
  5. {zwierzak: {imie: "Klakier"}, wlasciciel: {imie: "Rafał"}}
  6. );
[JAVASCRIPT] pobierz, plaintext


Jaki będzie tego efekt? Taki:

[JAVASCRIPT] pobierz, plaintext
  1. {
  2. zwierzak: {
  3. imie: "Klakier"
  4. },
  5. wlasciciel: {
  6. imie: "Rafał",
  7. numerButa: 46
  8. }
  9. }
[JAVASCRIPT] pobierz, plaintext


Jak widać, jQuery.extend nadpisuje całkowicie właściwości o różnych typach, a nie bawi się w łączenie ich właściwości. Jeżeli odwrócimy kolejność nakładania:

[JAVASCRIPT] pobierz, plaintext
  1. let przyjazn = jQuery.extend(
  2. true,
  3. {},
  4. {zwierzak: {imie: "Klakier"}, wlasciciel: {imie: "Rafał"}},
  5. {zwierzak: kot, wlasciciel: czlowiek}
  6. );
[JAVASCRIPT] pobierz, plaintext


To zostaniemy z takim czymś:

[JAVASCRIPT] pobierz, plaintext
  1. {
  2. zwierzak: Kot({imie: "Czaruś"}),
  3. wlasciciel: {
  4. imie: "Grzegorz",
  5. numerButa: 46
  6. }
  7. }
[JAVASCRIPT] pobierz, plaintext
viking
Za to możesz się pobawić tym https://derickbailey.com/2017/06/06/3-featu...d-be-using-now/
Czytaj Object Rest / Spread Properties
W webpacku trzeba sobie oczywiście włączyć wcześniej.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.