Moduły

Jak do tej pory nie przejmowaliśmy się organizacją kodu skryptu. Problem pojawia się wówczas, gdy do naszej witryny internetowej dodamy skrypt innego programisty (jakiś plugin) i wówczas mógłby nastąpić konflikt w obszarze nazewnictwa zmiennych. Nie jest trudno znaleźć dwa skrypty, w których zmienne nazywają się tak samo. W tym artykule pokażę, jak uniknąć takiej sytuacji - stworzymy moduł.

Zatem moduły w JavaScript to obowiązkowy element każdej większej aplikacji. Dzięki nim można utrzymać kod w należytym porządku. Moduły chronią przed błędami, które wynikają z przypadkowego nadpisywania wartości zmiennych.

Tworzenie modułu

Stworzymy sobie wzorzec modułu, który może być bezpiecznie stosowany w naszych skryptach. Nie będziemy w nim dotykać przestrzeni globalnych nazw zmiennych.

Najgorszym rozwiązaniem jest pisanie sekwencyjne kodu w JavaScript. Dążąc do zachowania modułowości skryptów należy zacząć od reprezentacji naszego kodu w postaci obiektu. Wystartujemy więc od zdefiniowania przykładowego obiektu, który zostanie zamieniony w moduł.

Listing 1 - Przykładowy obiekt jako punkt wyjścia do utworzenia modułu.

Skrypt jest banalny. Tworzymy tu obiekt z dwoma właściwościami imie i nazwisko oraz z jedną metodą wypisz, która wyświetla komunikat "Cześć [tu wartość zmiennej name]". Nasz skrypt pozwala odwoływać się z zewnątrz obiektu do właściwości (zmiennych) dzięki notacji kropkowej, co widać w ostatniej instrukcji skryptu: MODUL.wypiszImie(MODUL.imie);

<script>
var MODUL = {
imie: "Jon",
nazwisko: "Anderson",
  wypisz: function(name){
  alert("Cześć " + name);
  }
}

MODUL.wypiszImie(MODUL.imie);
</script>

Wykorzystanie mechanizmu samowywołujacej się funkcji

Przypomnę, że zmienne zadeklarowane w funkcji są zmiennymi lokalnymi, a więc nie mogą być widoczne na zewnątrz tej funkcji. A o to nam przecież chodzi! Skorzystamy ze wzorca samowywołującej się funkcji:

Jeżeli teraz nasz obiekt "włożymy" do takiej funkcji, to zabezpieczymy go przed środowiskiem zewnętrznym, ale nie będzie ona zbyt przydatna. Dlaczego? Bo nie mamy dostępu do żadnej jej części! Na ogół chcemy, aby na zewnątrz były widoczne niektóre właściwości i metody.

Przypomnę, że każda funkcja może zwrócić wartość przy użyciu słowa kluczowego return. Dlatego w tej sekcji umieszczamy to, co ma być dostępne na zewnętrze naszego modułu.

Listing 2 - Przykład modułu

Przerobimy nasz skrypt z listingu 1 na moduł (patrz poniżej).

<script>
var MOJ_MODUL = (function () {
var message = 'hello';
 
  return {
    setMsg: function (newMsg) {
      message = newMsg;
    },
    printMsg: function () {
	    alert(message);
    }
  };
})();

MOJ_MODUL.setMsg('Jon Anderson');
MOJ_MODUL.printMsg();
<script>

Zmienna message nie jest widoczna na zewnątrz, ale możemy ustawić jej wartość za pomocą metody setMsg(). Możemy tez korzystać z metody wyświetlającej komunikat printMsg().

W ten sposób powstał moduł, który ma w sobie prywatne pola, osiągalne tylko za pomocą publicznych metod. Nic nie trafia do globalnego zakresu nazw.

Szablon modułu

Zatem nasz szablon modułu wygląda następująco:

Listing 3 - Szablon modułu

<script>
 var MOJ_MODUL = (function () {
 var _ukrytaZmienna = 'Cześć, jestem ukrytą zmienną!';
 var _jawnaZmienna = 'Cześć, jestem jawną zmienną!';
  
 var _ukrytaMetoda = function() {
   return _ukrytaZmienna;
  } 
  
 var _jawnaMetoda = function() {
   alert(_ukrytaMetoda());
  }
 
 return {
   jawnaZmienna: _jawnaZmienna,
	  jawnaMetoda: _jawnaMetoda,
   jawnaMetoda1: function () {
     alert(_ukrytaMetoda());
    }
  };
})();

MOJ_MODUL.jawnaMetoda();
alert(MOJ_MODUL.jawnaZmienna);
MOJ_MODUL.jawnaMetoda1();
</script>

Mechanizm zależności

Do stworzonego modułu można przyłączać inne moduły. Oto wzorzec dla podłączenia modułu NOWY_MODUL który zostaje przyłączony poprzez wskaźnik do niego, podając go w argumencie samowywołującej się funkcji (w ostatnim nawiasie). Wewnątrz modułu NOWY_MODUL będzie rozpoznawany poprzez ALIAS.

Listing 4 - Schemat mechanizmu zależności miedzy modułami.

var MOJ_MODUL = (function (ALIAS) {
  var element = ALIAS( ... )
  
  return { ... }
  };
})(NOWY_MODUL);

Inne zagadnienia z tej lekcji

© medianauka.pl, 2016-11-13, A-3292
Data aktualizacji artykułu: 2024-06-26