In questo articolo vedremo come usare jQuery e le funzionalità object-oriented di JavaScript dal punto di vista del pattern MVC per la manipolazione del DOM. Vedremo come creare i nostri oggetti per adattarli alle View, ossia a ciò che l'utente vede sul sito.
Considerare le View come oggetti, non come pagine
Le nostre View, che nella fattispecie sono elementi HTML, devono essere considerati dal punto di vista OOP (Object-Oriented Programming), ossia come oggetti. Per esempio, data la seguente marcatura:
<div id="header">
<h1>...</h1>
</div>
L'elemento header può essere visto come un oggetto avente come proprietà l'intestazione di primo livello:
var Header = function(title) {
this.title = title;
}
Ecco alcune regole pratiche:
- Ogni View che deriva da un'azione su un controller dovrebbe avere un suo oggetto JavaScript.
- Ogni View parziale caricata all'interno di una View dovrebbe avere un suo oggetto JavaScript.
- Usate lo stesso nome per le vostre View e i vostri oggetti.
- Usate la notazione camel-case per i vostri oggetti.
- Le costanti degli oggetti vanno all'interno dei costruttori.
- Tutti i metodi dei vostri oggetti dovranno essere definiti tramite
prototype. - I gestori di eventi dovranno avere i loro metodi definiti sull'oggetto
prototype.
Esempi
Creiamo un oggetto e richiamiamo subito i suoi eventi:
var About = function(pageTitle) {
this.pageTitle = pageTitle;
this.bindEvents();
};
Il metodo bindEvents() va definito sull'oggetto prototype:
About.prototype.bindEvents = function() {
$('ul.menu').on('click', 'li.search', $.proxy(this.toggleSearch, this));
};
About.prototype.toggleSearch = function(e) {
//...
};
L'oggetto andrebbe istanziato solo quando richiesto:
<script type="text/javascript" src="js/views/about.js"></script>
<script type="text/javascript">
new About('Info');
</script>
Conclusioni
L'approccio MVC ci consente di avere un codice non solo più leggibile e organizzato, ma anche più gestibile a lungo termine. Si tratta sicuramente di un approccio da raccomandare per progetti di una certa complessità.