jPortal.pl, to serwis dla miłośników JavaScript. Znajdziesz tutaj ciekawe porady oraz tutoriale, czyli porady "za rączkę", aby zrobić fajne efekty. Dowiesz się też jak tworzyć dobrej jakości kod.
Skoro J ("dżej" - ten gość po lewej) umie, to Ty też podołasz temu wyzwaniu :).

Namespace w JS

Opublikowany: 05.02.2011 19:07:15 | Komentarzy 0

Porządek to ta jedna z niewielu cech dobrych programistów. Bez niego ciężko ogarnąć (z czasem) swój kod - nie wspominając już o czyimś. A że JavaScript jest dość wyjątkowym językiem, to pokażę Wam w jaki sposób można trochę uporządkować kod - czyli jak tworzyć czytelny kod. Fachowo nazywa to się: namespace czyli przestrzeń nazw.

Aby zrozumieć ideę tworzenia przestrzeni nazw w JavaScript posłużę się prostym przykładem, który zobrazuje problem i będzie zrozumiały dla wszystkich (mam taką nadzieję :).

Przykład

Załóżmy, że mamy formularz i chcemy sprawdzać w nim poprawność wpisywanych danych przez użytkownika. Na większości stron znajdziemy czyste funkcje odpowiedzialne za każde pole. Czyli mamy coś takiego:

function sprawdzEmail( mail ) {
   //cialo funkcji
}
function sprawdzLogin( login ) {
   //cialo funkcji
}

I tak dalej. Zdarza się, że funkcje odpowiedzialne za sprawdzanie pól są w pliku .js. Czasem też jest tak, że funkcje są zahardcodowane w kodzie HTML. O ile w przypadku umieszczenie funkcji w oddzielnym pliku jest prawie OK, to z umieszczaniem w kodzie HTML jest już złe. A co jeśli kod HTML będzie duży, lub kod JS będzie wykorzystywany w kilku miejscach, a co gdy ktoś inny będzie musiał po nas coś poprawić czy zmodyfikować?

Jeżeli chcemy aby nasz kod był czytelny i profesjonalny to powinniśmy zainteresować się przestrzeniami nazw (namespace). Można to zrobić na dwa sposoby:

  1. Tworzymy obiekt w którym przechowujemy wszystkie funkcje do walidowania formularza, lub
  2. Tworzymy obiekt dla całej strony, gdzie przechowujemy różne "moduły" np. walidacje formularza.

W praktyce wyglądać to będzie następująco.

Wariant 1

var formularz = {
   sprawdzEmail : function ( mail ) {
      //cialo funkcji
   },
   sprawdzLogin : function ( login ) {
      //cialo funkcji
   }
}

Wtedy sprawdzamy pozycje w następująco: formularz.sprawdzEmail()

Wariant 2

var nazwaStrony = {
   formularz: {
      sprawdzEmail : function ( mail ) {
         //cialo funkcji
      },
      sprawdzLogin : function ( login ) {
         //cialo funkcji
      }
   }
}


Teraz gdy chcemy odwołać się do konkretnej metody robimy to w taki sposób: nazwaStrony.formularz.sprawdzLogin()

Dzięki takiemu nazewnictwu (przestrzeni nazw) zyskujemy bardzo wiele. Po za czytelnością kodu (co jest oczywistą oczywistością), następne osoby nie będą miały problemu z modyfikacją kodu czy też z dodawaniem nowych funkcji.

Tagi: obiekt przestrzeń nazw namesprace

Komentarze

Dodaj komentarz