Javascript Custom Events

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
6/05/2013 από
infogeek

Ας υποθέσουμε ότι, έχουμε φτιάξει ένα αντικείμενο στο javascript, θεωρείστε το ως κλάση. Στο Javascript, ωστόσο, δεν υπάρχει το αντικείμενο της κλάσης, οπότε είναι απλά μία function! Και θέλουμε να πυροδοτούμε κάποιο γεγονός όταν κάποιος αλλάζει κάτι, ή κάτι έχει αλλάξει! Ώστε, να φορτώσει ας πούμε, την αντίστοιχή φόρμα!

 

Όλοι έχουμε δει ότι, ο browser έχει κάποια events στα αντικείμενα που μας δίνει πρόσβαση. Και όσοι έχετε ασχοληθεί με γλώσσες προγραμματισμού όπως η C#, VB, C++, Java, ξέρετε ότι υπάρχουν βιβλιοθήκες για να κάνετε ακριβώς το ίδιο πράγμα στις εφαρμογές σας, αν δεν θέλετε να βασιστείτε στις δικές σας ικανότητες να εφαρμόσετε το συγκεκριμένο pattern.

Εγώ παρότι, έχω πολλές γλώσσες διαθέσιμες στον εγκέφαλό μου, χρησιμοποιώ javascript για να κάνω δοκιμές και να δω αν δουλεύουν οι σκέψεις μου. Απλά γιατί μου είναι πολύ εύκολο να ανοίξω την κονσόλα του browser και να δοκιμάσω τον κώδικα μου. Μετά η μετατροπή είναι εύκολη, αρκεί να ξέρεις τους κανόνες της εκάστοτε γλώσσας και φυσικά να “ξέρουμε τι κάνουμε”!

Η λογική είναι να δημιουργήσουμε για κάθε  γεγονός, ένα πίνακα. Και εκεί να γράψουμε την λειτουργικότητα ώστε να μπορούμε να αποθηκεύουμε μεθόδους/συναρτήσεις εντός του.

 

Έχετε υπόψη ότι, αν σκοπεύετε να το δουλέψετε σε άλλες γλώσσες, πιο αυστηρής σύνταξης , ότι ο πίνακας πρέπει να έχει τον τύπο του αντικειμένου και ότι δε μπορείτε να αποθηκεύσετε τη μέθοδο χωρίς να ορίσετε instanse του, εντός του πίνακα! 

 

Και μετά να φροντίσουμε ότι ο EventHandler, θα εκτελείται στο σημείο που επιθυμούμε να εκτελείται. Αρχικά, ο κώδικας φαίνεται λίγο δυσνόητος και είναι λογικό να μην το καταλάβετε με τη πρώτη. Κανένας μας, δεν το έχει καταφέρει! Ο σκοπός είναι να το γράψετε, να το ξαναγράψετε, να το εφαρμόσετε μερικές φορές. Και τότε θα δείτε ότι απλά έχει περάσει από πολλές διορθώσεις και αναθεωρήσεις, ώστε να καθαρίσει σε αυτό το βαθμό. Επίσης, μη κάνετε το λάθος και θεωρήσετε ότι το καταλάβατε με τη πρώτη. Γιατί όταν θα προσπαθήσετε να το εφαρμόσετε χωρίς οδηγό, θα βρεθείτε προ εκπλήξεως. Είμαι κι εγώ αλαζόνας, και την πάτησα, οπότε σας το λέω από καθαρή εμπειρία. Τα patterns λογικής, είναι αποτέλεσμα βιώματος κι όχι μόνο διαβάσματος!

 

Στον κώδικα του παραδείγματος δημιουργώ ένα αντικείμενο προϊόντος και δημιουργώ handlers για την τιμή. Το παράδειγμα αυτό θα το βρείτε σε πολλές παραλλαγές. Και είναι πολύ χαρακτηριστικό, για αυτή τη δουλειά. Το pattern που χρησιμοποιώ, λέγεται Observables properties pattern. Και χρησιμεύει πρώτον στο να επιτρέπουμε την αλλαγή τιμής μόνο συγκεκριμένων ιδιοτήτων του αντικειμένου. Και φυσικά τον έλεγχο, να αποφασίσουμε αν θέλουμε να πραγματοποιηθεί η αλλαγή!

 

 

var Product = function(name,price){
    var priceChangeArray = [],
        priceChanged = [];
    this.name = function(){
        return name;
    },    
    this.price = function(val){        
        if(val !== undefined && val !== 0 && !isNaN(val)){
            for(var i=0; i<priceChangeArray.length; i++){
                if(!priceChangeArray[i](this,val)){
                    return price;
                }                
            }    
            price = val;
            for(var i=0; i<priceChanged.length; i++){
                priceChanged[i](this,val);
            }                        
        }
      return price;
    },    
    this.onpriceChanging = function(callback){
            priceChangeArray.push(callback);
    },
    this.onpriceChanged = function(callback){
        priceChanged.push(callback);
    };    
};

var book = new Product('Java Development', 29);

book.onpriceChanging(function(b, price){
    if(price>40){ console.log("too expensive!"); }
    else{ return price; }
});

book.onpriceChanged(function(b, price){
    console.log("the price has changed to "+price);
});

book.price(45);

 

 Εξήγηση

Θα προσέξατε ότι έχω δημιουργήσει δύο πίνακες, και θα δείτε ότι έχω φροντίσει, σε αυτή τη περίπτωση, να τυπώνει αποτέλεσμα στην κονσόλα, είτε ο ένας eventHandler, είτε ο άλλος, ώστε να έχω καθαρό feedback. H πρώτη μέθοδος, απλά επιστρέφει το όνομα.  Η δεύτερη, έχει την λογική που θα χρειαστούμε και τρίτη και τέταρτη είναι οι μέθοδοι που καταχωρούν τους eventHandlers.

 

Αυτό που αξίζει ανάλυση είναι η δεύτερη! Η οποία δέχεται μία παράμετρο, την τιμή. Αρχικά, θα τσεκάρουμε αν εμείς ή ο χρήστης του αντικειμένου που γράψαμε, εισάγει αριθμό, ή αρλούμπες για την τιμή. Αν εισάγει αρλουμπες, θα μπορούσαμε να βάλουμε ένα else με κάποιο μήνυμα σφάλματος ή να χρησιμοποιήσουμε την μέθοδο try. Ωστόσο, χάριν συντομίας, απλά επιστρέφω την παρούσα τιμή, χωρίς να την αλλάξω.

 

Μετά χρησιμοποιώ ένα for loop, συνθήκη επανάληψης, απλά για να τρέξω όλες τις μεθόδους που έχουν αποθηκευτεί στον πίνακα. Και μέσα, μία συνθήκη if! Εδώ είναι το trick! Γράφω !priceChangeArray[i](this, val), αυτό σημαίνει ότι, εκτελώ την κάθε συνάρτηση μέσα στη συνθήκη. Και περνάω ως παραμέτρους το ίδιο το αντικείμενο μέσω του this και τη νέα τιμή. Αν η συνάρτηση επιστρέψει τιμή, τότε η συνθήκη θα είναι ψευδής και θα συνεχίσει την εκτέλεση, αν δεν επιστρέψει, τότε η συνθήκη είναι αληθής και η εκτέλεση τερματίζεται με return σε εκείνο το σημείο.

 

Αν η συνάρτηση, δεν τερματιστεί, τότε καταχωρούμε τη νέα τιμή. Και εκτελούμε τον Handler για την αλλαγή της τιμής!

Ο παρακάτω κώδικας, από το αντικείμενο είναι καθαρά παράδειγμα λειτουργίας. Δημιουργείται ένα νέο αντικείμενο με το όνομα book με τίτλο Java Development και τιμή 29 (μούσμουλα!!!). Δημιουργώ ένα eventHandler για να ελέγξω ότι οι νέα τιμή δεν θα ξεπερνάει τα 39 μούσμουλα! Και αν τα ξεπερνάει εμφανίζω μήνυμα στη κονσόλα, επομένως η συνθήκη στο price είναι αληθής και τερματίζεται η εκτέλεση. Αν όχι, επιστρέφω την τιμή, και συνεχίζεται η εκτέλεση κανονικά. Τυπώνοντας στο τέλος την αλλαγή τιμής σε νέα!

Μπορείτε να δείτε το παράδειγμα μέσω jsFiddle! Και να παίξετε με τον κώδικα online! Καλό Coding 😉








Hide ↑

Το αντικείμενο των σπουδών μου είναι η Μηχανολογία! Ασχολούμαι με τον προγραμματισμός σχεδόν από τα 14. Η πρώτες μου γλώσσες ήταν η QBasic και η Turbo Pascal. Από τα 16 και έπειτα έμαθα να δουλεύω με Visual Basic. Και με την έναρξη της φοιτητικής ζωής, ξεκίνησε η δουλειά πάνω σε C#, Java, php και javascript scripting και όλο το πακέτο του web development. Εκτός από το κερδοσκοπικό κομμάτι της δουλειάς μου ως developer . Δουλεύω πάνω σε opensource εφαρμογές και παραδείγματα κώδικα για την ενίσχυση της κοινότητας του ελληνικού development. Για περισσότερα, επισκεφτείτε το infogeek.gr!

Follow Κωνσταντίνος Τσατσαρούνος on Twitter ,

Προσθέτοντας θέματα στο MP6

21 September 2013

Όσοι δεν ξέρετε το MP6, είναι ένα plugin που αλλάζει την εμφάνιση του wordpress backend, ή αλλιώς τις σελίδες διαχείρισης περιεχομένου του! Δίνει μία πολύ[…]

Read more...

Git ή SVN, επιλογή version control

09 September 2013

Είμαι πολύ καιρό χρήστης του SVN και δεν το μετανιώνω! Ωστόσο το subversion control, είναι καλό στον έλεγχο τον αλλαγών ενός project που ξέρεις από που ξεκινάει[…]

Read more...

Κεντράροντας δυναμικά html elements μόνο με CSS!

08 June 2013

Ένα πράγμα που πρέπει να αναλογιστεί κανείς, είναι πόσες ώρες σπαταλάμε την ημέρα για να πετύχουμε ομαλή και responsive συμπεριφορά σε ότι σχεδιάζουμε.[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.