Drukowana wersja tematu

Napisany przez: Valantir 3.10.2017, 15:25:46

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:

[HTML] pobierz, plaintext 
var extended = $.extend(true, {}, this.options, options);
[HTML] pobierz, plaintext 

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?

Napisany przez: SmokAnalog 7.12.2017, 13:15:05

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 
class Kot {
    constructor(imie) {
        this.imie = imie
    }
}
[JAVASCRIPT] pobierz, plaintext 

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

[JAVASCRIPT] pobierz, plaintext 
let kot = new Kot("Czaruś");
let czlowiek = {
    imie: "Grzegorz",
    numerButa: 46
}
[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 
let przyjazn = jQuery.extend(
    true,
    {},
    {zwierzak: kot, wlasciciel: czlowiek},
    {zwierzak: {imie: "Klakier"}, wlasciciel: {imie: "Rafał"}}
);
[JAVASCRIPT] pobierz, plaintext 

Jaki będzie tego efekt? Taki:

[JAVASCRIPT] pobierz, plaintext 
{
    zwierzak: {
        imie: "Klakier"
    },
    wlasciciel: {
        imie: "Rafał",
        numerButa: 46
    }
}
[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 
let przyjazn = jQuery.extend(
    true,
    {},
    {zwierzak: {imie: "Klakier"}, wlasciciel: {imie: "Rafał"}},
    {zwierzak: kot, wlasciciel: czlowiek}
);
[JAVASCRIPT] pobierz, plaintext 

To zostaniemy z takim czymś:

[JAVASCRIPT] pobierz, plaintext 
{
    zwierzak: Kot({imie: "Czaruś"}),
    wlasciciel: {
        imie: "Grzegorz",
        numerButa: 46
    }
}
[JAVASCRIPT] pobierz, plaintext 

Napisany przez: viking 7.12.2017, 13:22:03

Za to możesz się pobawić tym https://derickbailey.com/2017/06/06/3-features-of-es7-and-beyond-that-you-should-be-using-now/
Czytaj Object Rest / Spread Properties
W webpacku trzeba sobie oczywiście włączyć wcześniej.