Λειτουργία Class vs Factory: εξερεύνηση της πορείας προς τα εμπρός

Το Discover Functional JavaScript ονομάστηκε ένα από τα καλύτερα νέα βιβλία λειτουργικού προγραμματισμού από το BookAuthority !

Το ECMAScript 2015 (γνωστό και ως ES6) συνοδεύεται από τη classσύνταξη, οπότε τώρα έχουμε δύο ανταγωνιστικά μοτίβα για τη δημιουργία αντικειμένων. Για να τα συγκρίνω, θα δημιουργήσω τον ίδιο ορισμό αντικειμένου (TodoModel) με μια τάξη,και στη συνέχεια ως εργοστασιακή λειτουργία.

Το TodoModel ως τάξη

class TodoModel { constructor(){ this.todos = []; this.lastChange = null; } addToPrivateList(){ console.log("addToPrivateList"); } add() { console.log("add"); } reload(){} }

Το TodoModel ως εργοστασιακή λειτουργία

function TodoModel(){ var todos = []; var lastChange = null; function addToPrivateList(){ console.log("addToPrivateList"); } function add() { console.log("add"); } function reload(){} return Object.freeze({ add, reload }); }

Ενθυλάκωση

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

var todoModel = new TodoModel(); console.log(todoModel.todos); //[] console.log(todoModel.lastChange) //null todoModel.addToPrivateList(); //addToPrivateList

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

Όταν χρησιμοποιείτε την εργοστασιακή λειτουργία, μόνο οι μέθοδοι που εκθέτουμε είναι δημόσιες, όλα τα υπόλοιπα είναι ενθυλακωμένα.

var todoModel = TodoModel(); console.log(todoModel.todos); //undefined console.log(todoModel.lastChange) //undefined todoModel.addToPrivateList(); //taskModel.addToPrivateList is not a function

Αυτό

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

class TodoModel { constructor(){ this.todos = []; } reload(){ setTimeout(function log() { console.log(this.todos); //undefined }, 0); } } todoModel.reload(); //undefined

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

$("#btn").click(todoModel.reload); //undefined

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

function TodoModel(){ var todos = []; function reload(){ setTimeout(function log() { console.log(todos); //[] }, 0); } } todoModel.reload(); //[] $("#btn").click(todoModel.reload); //[]

αυτή και η λειτουργία βέλους

Η λειτουργία βέλους επιλύει εν μέρει τα thisχαμένα θέματα περιβάλλοντος σε τάξεις, αλλά ταυτόχρονα δημιουργεί ένα νέο πρόβλημα:

  • this δεν χάνει πλέον το περιβάλλον σε ένθετες συναρτήσεις
  • this χάνει το περιβάλλον όταν η μέθοδος χρησιμοποιείται ως επιστροφή κλήσης
  • Η λειτουργία βέλους προωθεί τη χρήση ανώνυμων συναρτήσεων

Επέστρεψα τη TodoModelχρήση της λειτουργίας βέλους. Είναι σημαντικό να σημειωθεί ότι κατά τη διαδικασία επαναπροσδιορισμού στη λειτουργία βέλους μπορούμε να χάσουμε κάτι πολύ σημαντικό για την αναγνωσιμότητα, το όνομα της συνάρτησης. Κοιτάξτε για παράδειγμα στο:

//using function name to express intent setTimeout(function renderTodosForReview() { /* code */ }, 0); //versus using an anonymous function setTimeout(() => { /* code */ }, 0);

Το Discover Functional JavaScript ονομάστηκε ένα από τακαλύτερα νέα βιβλία λειτουργικού προγραμματισμού από το BookAuthority !

Για περισσότερα σχετικά με την εφαρμογή τεχνικών λειτουργικού προγραμματισμού στο React ρίξτε μια ματιά στο Functional React .

Μάθετε λειτουργικό React , με βάση ένα έργο, με τη λειτουργική αρχιτεκτονική με το React και το Redux .

Ακολουθήστε στο Twitter