Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Wzorzec modułu – nigdy nie zwracaj zmiennych!

4

Witam! Sezon ogórkowy w pełni ale w ja wbrew pozorom wcale nie zniknąłem i nie zarzuciłem na dobre prowadzenia bloga! Mam nadzieję, że wybaczycie mi tę dość długą przerwę we wpisach – postaram się nadrobić w nadchodzących miesiącach… (mam nadzieje, że będzie to pozytywny impuls bo mam zastój także na innych polach). Dziś wracam z wpisem, który być może i jest krótki ale traktuje o sprawie, która czasem może spędzić sen z powiek niejednemu programiście… Wzorzec modułu na pewno znacie, a jak nie to polecam poszukać w czeluściach „internetów” (sam też o tym pisałem ale trochę dawno i już mi się ten wpis nie podoba… może warto będzie jeszcze raz poruszyć ten temat?).

Wzorzec modułu – przykład

No ale do rzeczy… wyobraźmy sobie, że posiadamy taki oto prosty modulik:

module = (function(){
    var param = 0,
        changeParam = function() {
            param = 1;
        };

    return {
        param: param,
        changeParam: changeParam
    }
}());

Problem

Wszystko fajnie, prosto i czytelnie prawda? Schody jednak zaczynają się, kiedy spróbujemy dobrać się do publicznych atrybutów takiego modułu, na przykład w poniższy sposób:

console.log(module.param);  // 0
module.changeParam();       // zmieniamy wartość param
console.log(module.param);  // ciągle 0!!

W komentarzach podpowiadam co zwracają poszczególne linijki tak, abyście nie musieli sami tego testować – wakacje więc na pewno się Wam nie chce… 😛 Na pewno niektórym z Was, po przeanalizowaniu powyższego przykładu aż ciśnie się na usta:

„ale dlaczego w trzeciej linii nadal mamy wartość 0 mimo, że linijkę wcześniej zmieniliśmy jej wartość?”

Rozwiązanie

Już śpieszę z wyjaśnieniami! Kiedy moduł zwraca zmienną, oto co się dzieje:

return {
    param: param, // kopiowanie!!!!
    changeParam: changeParam
}

W związku z tym, kiedy wywołujemy funkcję changeParam to tak na prawdę zmieniamy wartość tej wewnętrznej zmiennej modułu, a nie tej zwracanej! Warto o tym pamiętać, bo czasem możemy spędzić sporo czasu na „rozkminieniu” dlaczego ta wartość się do ciężkiej cholery nie zmienia??!!

„Jak sobie z tym poradzić”

… na pewno zapytacie. No niestety, będzie trochę więcej pisania… z odsieczą bowiem przyjść nam mogą „gettery” i „settery”:

module = (function(){
    var param = 0,
        changeParam = function() {
            param = 1;
        },
        getParam = function() {
            return param;
        };

    return {
        getParam: getParam,
        changeParam: changeParam
    }
}());

console.log(module.getParam());  // 0
module.changeParam(); // zmieniamy wartość param
console.log(module.getParam());  // tym razem 1!!

Funkcja changeParam w zasadzie była już „setterem” więc nie trzeba było jej zmieniać, jednak zamiast zwracać sam parametr tym razem zwracam „gettera” czyli funkcję getParam (zaznaczona linia), która nie robi nic innego jak zwraca wartość parametru. Jak widać przy wywołaniu, tym razem wszystko działa jak należy!

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!