The King is dead! RIP 2006-2012

Ένα μεγάλο ευχαριστώ σε όλη την παρέα
Περισσότερα στο lexx.gr

Unobtrusive Javascript

30 Sep 2008 by PanosJee

Ακούγεται εξωτικό και περιέργο έτσι; Unobtrusive; Πώς θα το μεταφράζατε; Μη-διεισδιτικό ίσως; Χμμμ, και εμένα που πήρα αρκετό καιρό να το καταλάβω. Για να κάνουμε μια ανάλυση όμως, εν έτη 2008 έχουμε τα εξής:

  • HTML/xHTML, τι είναι ένα κειμένο
  • CSS, πώς και που πρέπει να εμφανίζεται
  • Javascript, πώς πρέπει να συμπεριφέρεται

Ενδιαφέρον, πλέον το Javascript προγραμματίζει το DOM μας αλλά και προσθέτει αρκετό UI candy. Όμως πολλές φορές πλέκεται μέσα στα πόδια της HTML μας καθιστόντας τη όχι και τόσο καθαρή και δύσκολη στη συντήρηση. Ας μιλήσουμε για τις περιπτώσεις που μπορεί να υποστηρίζεται Javascript, σπάνια μεν αλλά κυρίως browsers κινητών συσκευών δε τα πάνε καλά με το Javascript  με αποτέλεσμα να σπάει η εφαρμογή.

Πλέον γίνεται πολύς ντόρος για το μοντέλο MVC και ενώ το view πρέπει να ειναι χαζό, χωρίς λογική όπως γλαφυρά φαίνεται στο επόμενο video

η χρήση Javascript μπορεί πολλές φορές να προσθέτει αρκετή λογική στο view παραβιάζοντας έτσι την αρχή του MVC.

Ποια η λύση σε αυτό το φαίνομενο; Το μη-δυεισδητικό javascript ή καλύτερα unobtrusive. Η τεχνική δεν είναι καινούρια αλλά με τη χρήση των javascript frameworks όπως Prototype, jQuery, Mootools η λύση είναι καλύτερη από ποτέ. Ας πάμε όμως στο ζουμί. Πολλές φορές σε κάποιο element προσθέταμε ένα event με τη χρήση των attributes onclick, onmouseover, onmouse κλπ και στη συνέχεια είτε εκτελούσαμε κάποιον κώδικα inline είτε καλούσαμε κάποια συνάρτηση που είχαμε ορίσει σε κάποιο αρχείο είτε στο header.

π.χ. <a href="#" id="test" onclick="javascript:do_something">

Πλέον απλά γράφουμε - κατά προτίμηση σε ένα αρχείο .js το εξής: Event.observe($('test'), "click", do_something);

Μην ξεχνάμε
  • HTML/xHTML, τι είναι ένα κειμένο
  • CSS, πώς και που πρέπει να εμφανίζεται
  • Javascript, πώς πρέπει να συμπεριφέρεται

Το μοντέλο MVC πλέον γίνεται MVC+J με όλες τις συμπεριφορές των elements να καταγράφονται συνοπτικά και αναλυτικά σε ένα μόνο μέρος. Φιλίκοτερα για τον προγραμματιστή αφού πλέον σε ένα μέρος ορίζει τις συμπεριφορές για όλη την εφαρμογή του αλλά και καταλήγει σε πιο καθαρό κώδικα και πιο semantically correct.