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>
Lupa


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:

(function() {... kod ... })();

lub z parametrami

(function(p1, p2, ...) {
... kod ... })(a1, a2, ...);

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>
Lupa



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>
Lupa Otwórz Pobierz


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

Obiekty w JavaScript


Opis tworzenia obiektów w JavaScript. W języku JavaScript możemy tworzyć własne obiekty, przypisywać im właściwości oraz metody. W tym artykule zajmujemy się tym właśnie zagadnieniem.

Zdarzenia w JavaScript


Zdarzenia w JavaScript to pewne akcje, które są podejmowane w przeglądarce, w wyniku zaistnienia danej sytuacji, na przykład naciśnięcia klawisza na klawiaturze, myszce, najechanie kursorem na dany element strony, załadowanie strony internetowej.

Obsługa zdarzeń w JavaScript


Jak obsłużyć zdarzenia w JavaScript? W ostatnim artykule zostały omówione zdarzenia predefiniowane w JavaScript, czyli zdarzenia wbudowane w JavaScript. Czas, aby nauczyć się ich używać. Jest kilka sposobów obsługi zdarzeń.

Obsługa myszy w JavaScript


Jak obsłużyć zdarzenia myszy w JavaScript? W momencie naciśnięcia klawisza myszy wyzwalane jest zdarzenie MouseDown, w momencie puszczenia - MouseUp, a jeżeli dla obiektu silnik wykryje jedno zdarzenie Mousedown i MouseUp, wywołane zostanie zdarzenie Click.




© medianauka.pl, 2016-11-13, A-3292



©® Media Nauka 2008-2023 r.