Πρακτική Εφαρμογή

Ας υποθέσουμε ότι έχουμε δύο div με αριθμούς:

<div id="div1">10</div>
<div id="div2">10</div>

Ας κάνουμε έτσι ώστε με κλικ στο πρώτο div η τιμή του να υψώνεται στο τετράγωνο, και με κλικ στο δεύτερο div - στον κύβο.

Θα οργανώσουμε τον κώδικά μας σε δύο μονάδες:

;(function() {
	let elem = document.querySelector('#div1'); // πρώτο div
	
	function func(num) {
		return num * num; // υψώνουμε στο τετράγωνο
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // δεύτερο div
	
	function func(num) {
		return num * num * num; // υψώνουμε στον κύβο
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Τώρα σε κάθε μία από τις μονάδες μπορούμε να χρησιμοποιήσουμε οποιεσδήποτε μεταβλητές και συναρτήσεις, χωρίς να φοβόμαστε ότι θα έρθουν σε σύγκρουση με άλλες μεταβλητές και συναρτήσεις του script μας.

Για παράδειγμα, και τα δύο στοιχεία τα αποθηκεύουμε στη μεταβλητή elem - το καθένα στη δική του μεταβλητή της δικής του μονάδας. Αν δεν υπήρχαν μονάδες εδώ, θα έπρεπε να εισαγάγουμε διαφορετικές μεταβλητές για την αποθήκευση των στοιχείων μας. Και με τις μονάδες μπορούμε να χρησιμοποιήσουμε ήρεμα τη μεταβλητή μας, χωρίς να φοβόμαστε ότι κάποιος άλλος θα θέλει επίσης να χρησιμοποιήσει αυτή τη μεταβλητή.