Ας το παραδεχτούμε, το JavaScript δεν έχει πάντα την καλύτερη φήμη μεταξύ των προγραμματιστών και από την ίδρυση του CoffeeScript το 2009 αυτή η μικρή γλώσσα έχει πάρει τον κόσμο των προγραμματιστών JavaScript από την καταιγίδα. κυρίως επειδή υπερνικά αυτό που μπορεί να πει κανείς είναι η χειρότερη πτυχή της JavaScript: η σύνταξη του κώδικα της.
Ακόμα κι αν αυτή είναι μια νέα γλώσσα, θα την πάρετε πραγματικά γρήγορα, κυρίως επειδή αναδιαμορφώνεται το JavaScript. είναι ουσιαστικά πιο όμορφο, απλούστερο JavaScript.
Κατά τη συγγραφή του CoffeeScript, μην ξεχνάτε ότι γράφετε κώδικα που προτού αναπτυχθεί πρόκειται να μετατραπεί σε JavaScript που ακολουθεί τις βέλτιστες πρακτικές και περάσει τη δοκιμή JSLint, γι 'αυτό είναι ένα λιγότερο πράγμα που πρέπει να ανησυχείτε. Η έξοδος θα εξακολουθεί να είναι έγκυρη JavaScript που το πρόγραμμα περιήγησης δεν θα έχει πρόβλημα στην ανάγνωση. Το CoffeeScript είναι σε JavaScript τι είναι το SASS στο CSS: ένας τρόπος να γράψεις απλούστερους και παραγωγικότερους κώδικες.
Το CoffeeScript είναι ένα βοηθητικό πρόγραμμα node.js έτσι ώστε να το εγκαταστήσετε πρέπει να έχετε εγκαταστήσει το node.js καθώς και τον διαχειριστή πακέτων κόμβων. Υποθέτοντας ότι έχετε εγκαταστήσει αυτά τα δύο πακέτα, το μόνο που χρειάζεται να κάνετε είναι να μεταβείτε στο τερματικό σας και να εγκαταστήσετε το CoffeeScript με τον διαχειριστή πακέτων χρησιμοποιώντας τον κώδικα:
npm install -g coffee-scriptΑκριβώς με αυτό έχετε εγκαταστήσει το CoffeeScript στο μηχάνημά σας. Για να μεταγλωττίσετε ένα αρχείο .coffee σε ένα αρχείο JavaScript, πρέπει να πληκτρολογήσετε:
coffee --compile script.coffeeΑυτό θα μεταγλωττίσει το αρχείο script.coffee στο script.js στον ίδιο κατάλογο αλλά θα το κάνει μόνο όταν εκτελέσετε την εντολή, αν θέλετε να μεταγλωττίσει σε κάθε αλλαγή που κάνετε στο αρχείο καφέ που χρειάζεστε για να προσθέσετε το -watch πριν η σύνταξη:
coffee --watch --compile script.coffeeΜε αυτό προστίθεται το JavaScript σας θα συντάσσεται κάθε φορά που κάνετε μια αλλαγή στο αρχείο .coffee σας.
Κατά τη σύνταξη μιας μεταβλητής JavaScript πρέπει να προσθέσουμε την λέξη-κλειδί var, ενώ με το CoffeeScript η λέξη-κλειδί έχει φύγει και μπορείτε απλά να πληκτρολογήσετε τη μεταβλητή και να την αντιστοιχίσετε σε κάτι. Ένα άλλο πράγμα που πρέπει να προσέξουμε είναι ότι το CoffeeScript χρησιμοποιεί πολλές μεθόδους εσοχής για να αποφύγει τα ημικυκλικά και για να καταλάβει η γλώσσα ότι η μεταβλητή δήλωση είναι πλήρης, πρέπει απλά να μετακινηθείτε σε μια νέα γραμμή:
age = 21country = "Portugal"Στο JavaScript θα πρέπει να πληκτρολογήσετε κάτι σαν:
var age = 21;var country = "Portugal";Είναι ένα μικρό παράδειγμα, αλλά μπορείτε να αρχίσετε να βλέπετε πόσο ισχυρό είναι το CoffeeScript όταν πρόκειται να απλοποιήσετε τον κώδικα σας.
Θυμηθείτε όλος ο χρόνος που αφιερώσατε στην απομνημόνευση των χειριστών JavaScript Θυμηθείτε να αναρωτιέστε γιατί θα έπρεπε να χρησιμοποιήσετε === αντί να χρησιμοποιήσετε μόνο; Λοιπόν, το CoffeeScript φροντίζει και αυτό. Προσφέρει μερικά ωραία ψευδώνυμα για τους φορείς εκμετάλλευσης:
Ένα άλλο πράγμα που η CoffeeScript ξεφορτώνεται είναι τα σγουράκια. Χρησιμοποιεί τη μέθοδο εσοχής για να δηλώσει όταν βρίσκεστε μέσα σε μια δήλωση, αν οι δηλώσεις λειτουργούν όπως το JavaScript, αλλά δεν χρειάζεστε τα σγουρά ή την παρένθεση. απλά πατήστε τον κώδικα που θέλετε να εκτελέσετε όταν ισχύει η δήλωση:
if work > 24 and sleep < 8vacations()elsework()θα μετατραπεί σε JavaScript ως εξής:
if (work > 24 && sleep < 8) {vacations();} else {work();}Ελπίζω ότι αρχίζετε να βλέπετε τα οφέλη του CoffeeScript μόνο με αυτές τις απλές επιδείξεις για το πόσο καθαρό μπορεί να κάνει τον κώδικα σας και ότι ο καθαρότερος κώδικας σημαίνει πιο διατηρήσιμο κώδικα.
Το βρόχο μέσω των συστοιχιών είναι ένα από τα πράγματα που πρέπει να κάνετε σε κάθε εφαρμογή JavaScript που γράφετε και η σύνταξη για την επαναφορά του μέσα από το JavaScript δεν είναι η απλούστερη ή η καθαρότερη, νομίζω ότι αυτό είναι όπου η CoffeeScript λάμπει πραγματικά. Για να βγούμε μέσω ενός πίνακα χρησιμοποιούμε ένα βρόχο for..in, όπως π.χ.:
tasks = ['Design','Code','Groceries']for task in tasksalert taskΌλο αυτό το κομμάτι του κώδικα θα κάνει να διαβάσει όλα τα πράγματα στον πίνακα και στη συνέχεια να προειδοποιήσει έπειτα ένα προς ένα, μόνο και μόνο για να κάνουν τα πράγματα ακόμη πιο απλά μπορείτε να γράψετε ακόμη και για το ... σε βρόχο σε μια γραμμή, όπως έτσι:
tasks = ['Design','Code','Groceries']alert task for task in tasksΕίναι απλά πολύ πιο ευανάγνωστο και συντηρητικό από το JavaScript της βανίλιας, μιλώντας για το οποίο ο κώδικας που παράγεται από την CoffeeScript για τις δύο αυτές γραμμές είναι:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Ενώ οι βρόχοι είναι επίσης πολύ χρήσιμοι κατά την κατασκευή της εφαρμογής JavaScript και το CoffeeScript δεν αποτυγχάνει να το κάνει ευκολότερο να διαβάζει και να γράφει επίσης, για παράδειγμα:
while sleep < 8sleep()Ή μπορείτε να γράψετε όλα σε μια γραμμή, αν προτιμάτε:
while sleep < 8 then sleep()Ή:
sleep() until sleep > 8Σε καθαρό JavaScript αυτό θα μεταφράζεται σε:
//thenwhile (sleep < 8) {sleep();}Ή:
//untilwhile (!(sleep > 8)) {sleep();}Οι λειτουργίες είναι επίσης ένα άλλο ζωτικό μέρος οποιασδήποτε γλώσσας προγραμματισμού και παρόλο που οι λειτουργίες στο JavaScript δεν είναι τόσο ακατάστατες όπως κάποια άλλα μέρη, το CoffeeScript απλοποιεί αυτό το μέγιστο, μια απλή λειτουργία που παίρνει το όνομα κάποιου και έπειτα προειδοποιεί ότι μπορεί να γραφτεί έτσι :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Το μόνο που κάνετε είναι να ονομάσετε τη συνάρτηση, στην περίπτωση αυτή οι λειτουργίες ονομάζονται sayHi, και στη συνέχεια μετά το ίση σημάδι πρέπει να καθορίσετε τις παραμέτρους. Εδώ το όνομα είναι η μεμονωμένη παράμετρος, αφού καθοριστεί η βάση της συνάρτησης μας, πρέπει να πληκτρολογήσουμε -> που ακολουθείται στην επόμενη γραμμή από αυτό που θέλουμε να κάνει η συνάρτηση έτσι ώστε η CoffeeScript να γνωρίζει ότι είμαστε μέσα στη λειτουργία. Σε αυτή την περίπτωση το μόνο που θέλω να κάνουμε είναι να επιστρέψω "Hello" και μετά το όνομα του ατόμου και τελικά χρησιμοποιώ μια απλή ειδοποίηση για να καλέσω τη λειτουργία με το όνομα. Μπορούμε επίσης να γράψουμε αυτό σε μια γραμμή, εξαλείφοντας την είσοδο και την εσοχή απλά γράφοντας τι θα κάνει η λειτουργία μετά το ->:
sayHi = (name) -> return "Hello " + nameΑυτό το μικρό απόσπασμα κώδικα θα μεταγλωττιστεί στο ακόλουθο JavaScript:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Φυσικά αυτό ήταν μια πολύ απλή συνάρτηση, αλλά όπως μπορείτε να δείτε αυτό μας έσωσε 3 γραμμές κώδικα και φυσικά στο JavaScript θα μπορούσαμε να ονομάσουμε μόνο τη μεταβλητή καθώς δηλώνουμε τη λειτουργία όπως έτσι:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Τα παραδείγματα που έχω δώσει εδώ είναι αυτά που καταρτίζει η CoffeeScript και παρόλο που στις περισσότερες περιπτώσεις υπάρχουν ευκολότεροι τρόποι να πληκτρολογήσετε κάτι έξω, όλα τα compiled JavaScript είναι έγκυρα και σημασιολογικά.
Αυτό είναι μόνο η αρχή του τι μπορεί να σας δώσει η CoffeeScript, όταν τα πράγματα αρχίσουν να γίνονται πιο περίπλοκα, αυτή η μικρή γλώσσα θα σας δώσει πολλή μόχλευση σε σύγκριση με το JavaScript, λιγότερο κώδικα που πρέπει να γράψετε, πιο ανθρώπινο αναγνώσιμο κώδικα και πιο διατηρήσιμο , ώστε να μπορείτε να επιστρέψετε σε έναν ιστότοπο ένα χρόνο αργότερα και να ξέρετε τι συμβαίνει σε αυτό το JavaScript.
Μείνετε συντονισμένοι για το δεύτερο μέρος αυτής της σειράς όπου θα σας δείξω πώς να συνδυάσετε το CoffeeScript με το jQuery και το LocalStorage για να δημιουργήσετε μια απλή εφαρμογή λίστας επαφών.
Χρησιμοποιήσατε το CoffeeScript για να απλοποιήσετε το JavaScript; Ποια μέρη του CoffeeScript προτιμάτε να Javascript; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα καφέ μέσω Shutterstock.