[Powered by Google Translate] [Σεμινάριο] [Πλαίσια JavaScript: γιατί και πώς;] [Kevin Schmid] [Πανεπιστήμιο του Χάρβαρντ] [Αυτό είναι CS50.] [CS50.TV] 

Γεια σας. Καλώς ήρθατε στο σεμινάριο JavaScript Πλαίσια. Το όνομά μου είναι ο Kevin, και σήμερα είμαι πρόκειται να μιλάμε για JavaScript πλαισίων, και ο στόχος του σεμιναρίου αυτού είναι να μην φτάσετε στο, ας πούμε, κυριαρχήσει ένα συγκεκριμένο πλαίσιο per se αλλά για να σας δώσει μια γενική εισαγωγή σε ένα ζευγάρι των πλαισίων και να δείξει γιατί θα μπορούσε ποτέ να θέλετε να χρησιμοποιήσετε ένα πλαίσιο. 

Πριν το κάνω αυτό, θα παρέχει ένα μικρό ιστορικό σε JavaScript, και στη συνέχεια θα το πάρετε από εκεί. Εμείς πάμε για να ξεκινήσει με την εφαρμογή ενός-να κάνουμε λίστα. Εδώ είναι λίστα εργασιών μας για σήμερα. Είναι κάπως αστείο. Πρέπει να εφαρμόσει ένα-να κάνουμε λίστα στο JavaScript. Αυτό είναι ό, τι πρόκειται να μοιάσει, έτσι ώστε να είναι ο πρώτος μας στόχος. Εμείς δεν πρόκειται να χρησιμοποιήσετε ένα πλαίσιο για να το κάνουμε αυτό. Εμείς πάμε για να κώδικα JavaScript και να πάρει την-να κάνουμε λίστα για να εργαστούν. Στη συνέχεια, θα πάμε να βελτιώσει το σχεδιασμό χωρίς τη χρήση ενός πλαισίου. Εμείς πάμε για να συζητήσουμε διάφορα πράγματα που μπορούμε να κάνουμε μόνο με JavaScript και μόνο να κάνουν την δική μας-να κάνουμε λίστα λίγο πιο καλά σχεδιασμένη. Στη συνέχεια, θα πάμε να ρίξει σε κάποια jQuery, και στη συνέχεια θα πάμε να δούμε τον ίδιο-να κάνουμε λίστα, μόλις εφαρμοστεί σε διαφορετικά πλαίσια, και θα συζητήσουμε  τα υπέρ και τα κατά μήκος του τρόπου. 

Ας αρχίσει η εφαρμογή ότι για την-να κάνουμε λίστα. Ας πούμε ότι μας δίνεται αυτό το HTML. Πάω να κάνουν αυτό το λίγο μικρότερο. Όπως μπορείτε να δείτε, έχω μια μικρή επικεφαλίδα που λέει Todo και ένα μικρό κουτί, όπου μπορώ να εισάγετε μια περιγραφή ενός todo και στη συνέχεια ένα νέο κουμπί στοιχείο, οπότε ας προσπαθήσουμε να εισέλθει σε μια νέα todo σε αυτή τη λίστα. Δώστε ένα JavaScript σεμινάριο πλαίσια, και είμαι να χτυπήσει νέο στοιχείο. Παίρνω αυτή την ειδοποίηση JavaScript που λέει εφαρμόσει μου. Έχουμε να την εφαρμόσουν. Ας ελέγξτε τον κώδικα για αυτό, τόσο το HTML και το JavaScript. Εδώ είναι HTML μας. Όπως μπορείτε να δείτε εδώ, εδώ είναι λίγο header μας Todos. Αυτό ήταν τολμηρό πράγμα στην κορυφή, και στη συνέχεια να έχουμε το πλαίσιο εισόδου με το σύμβολο κράτησης θέσης, και στη συνέχεια να υπάρχει ένα ορισμένο χαρακτηριστικό αυτού του κουμπιού που καλεί αυτή addTodo λειτουργία. Θέλει κανείς να μαντέψει τι σε κλικ σημαίνει; [Φοιτητής ακούγεται απάντηση] Καλό, το με κλικ είναι το είδος του σαν ένα γεγονός, όπως κλικ με το ποντίκι είναι απλώς ένα γεγονός, και τι κάνουμε Είναι είμαστε δένοντας την περίπτωση κάνετε κλικ σε αυτό το κουμπί για να εκτελέσετε αυτή τη λειτουργία. AddTodo είναι αυτό το πρόγραμμα χειρισμού συμβάντων για να κάνουν κλικ σε αυτό το κουμπί. 

Όπως μπορείτε να δείτε, όταν κάνω κλικ στο νέο κουμπί στοιχείο η σε εκδήλωση κλικ παίρνει φωτιά, και αυτή η λειτουργία παίρνει ονομάζεται. Ας ρίξουμε μια ματιά σε λειτουργία. Όπως μπορείτε να δείτε, εδώ είναι του κώδικα JavaScript μου μέχρι τώρα. Αυτό που έχω στην κορυφή είναι μια παγκόσμια δομή δεδομένων για να κάνουμε λίστα μου. Μοιάζει με μια σειρά. Είναι απλά μια κενή σειρά. Και τότε έχω την addTodo λειτουργία που είδαμε νωρίτερα, και το μόνο γραμμή κώδικα εκεί είναι η ειδοποίηση. Είναι προειδοποιεί την εφαρμογή μου, και τότε έχω 2 εργασίες στο χέρι. Δεν έχω να προσθέσω το todo στη γενική αυτή δομή δεδομένων, και στη συνέχεια Θέλω να επιστήσω την-να κάνουμε λίστα. Τίποτα δεν υπερβολικά φανταχτερό ακριβώς ακόμα, αλλά JavaScript μπορεί να είναι εξοικειωμένοι με, έτσι είμαι πρόκειται να πάω αργά και να επανεξετάσει τις βασικές αρχές της JavaScript με αυτόν τον τρόπο. 

Ας δώσει σε αυτό έναν πυροβολισμό. Ας πούμε ότι ο χρήστης εισάγει κάτι σε αυτό το πλαίσιο. Έχω πληκτρολογήσει κάτι εδώ, το κείμενο. Πώς μπορώ να ταξινομήσω πρόσβασης που κειμένου μέσω JavaScript; Να θυμάστε ότι η JavaScript, ένα από τα θεμελιώδη χαρακτηριστικά του είναι ότι μας δίνει Αυτό προγραμματική πρόσβαση στο DOM. Μας επιτρέπει πρόσβαση στα στοιχεία και τις περιουσίες τους αυτής της πραγματικής HTML. Ο τρόπος που το κάνουμε αυτό με γυμνά κόκαλα JavaScript Είναι μπορούμε να χρησιμοποιήσουμε στην πραγματικότητα μια λειτουργία σε JavaScript που ονομάζεται getElementByID. Θέλω να αποθηκεύσετε το κείμενο που είναι δακτυλογραφημένες εκεί σε κάποια μεταβλητή, έτσι Πάω να πω μια νέα μεταβλητή που ονομάζεται new_todo, και είμαι πρόκειται να πάρει αυτό το στοιχείο. Αυτή είναι μια λειτουργία,. GetElementByID. Και τώρα είμαι πάρει ένα στοιχείο από την ταυτότητα, γι 'αυτό χρειάζεται το αναγνωριστικό αυτού του πλαισίου κειμένου, έτσι έχω δώσει το new_todo_description ID. Αυτό είναι το πώς είμαι πρόκειται να πάρει ένα στοιχείο. Αυτό είναι το επιχείρημά μου σε αυτή τη λειτουργία, για να καθορίσετε ποια ταυτότητα για να πάρει. Και έτσι αυτό είναι ένα στοιχείο HTML, και έχει ιδιότητες. Έχετε δει αυτά. Είναι χαρακτηριστικά. Το χαρακτηριστικό του στοιχείου κειμένου που αποθηκεύει την είσοδο του χρήστη ονομάζεται αξία. Έσωσα την αξία του εν λόγω πλαισίου κειμένου τώρα σε αυτή τη μεταβλητή που ονομάζεται new_todo. Τώρα έχω πρόσβαση μέσω προγραμματισμού σε αυτή τη μεταβλητή, η οποία είναι είδος δροσερό γιατί τώρα τι μπορώ να κάνω είναι να το προσθέσετε σε-να κάνουμε λίστα μου. 

Ο τρόπος που θα το κάνετε αυτό σε JavaScript και μην ανησυχείτε αν δεν είστε εξοικειωμένοι με αυτό, αλλά ακριβώς συμβαίνει μέσα από αυτό είναι todos.push γιατί αυτό είναι το όνομα της παγκόσμιας δομής δεδομένων μου εδώ, και Πάω να πιέσει new_todo. Αυτό είναι μεγάλη, διότι τώρα έχω προσθέσει στη JavaScript μου εκπροσώπηση του-να κάνουμε λίστα. Αλλά τώρα πώς μπορώ να το πάρει πίσω στο HTML; Πρέπει να βρούμε έναν τρόπο να ταξινομήσετε του σπρώξτε πίσω. Με άλλα λόγια, το είδος πρέπει να επιστήσει. Τι θα πάμε να κάνουμε είναι να πάμε να επιστήσει την to-do λίστα. Θα πρέπει να ενημερώσετε άλλους HTML σε αυτή τη σελίδα, και όπως μπορείτε να δείτε, έχω αφήσει αυτό το μικρό δοχείο εδώ, Αυτό το διαχωριστικό της σελίδας του οποίου ID είναι todos, και είμαι πρόκειται να θέσει την-να κάνουμε λίστα εκεί. Πρώτα θα πάω να το καθαρίσει έξω γιατί, ας πούμε, υπήρχε ένα παλιό-να κάνουμε λίστα εκεί. Παίρνω αυτό το στοιχείο από την ταυτότητα και πάλι, και είμαι πρόσβαση στο εσωτερικό HTML αυτού του στοιχείου, και θα πάω να καθαρίσει αυτό. Αν αφήσουμε αυτόν τον κώδικα όπως είναι, θα βλέπαμε ένα κενό τίποτα εκεί, και τώρα θέλω να ξεκινήσω καθιστώντας νέων-να κάνουμε λίστα μου. Είμαι βασικά πρόκειται να σκουπίσει έξω-να κάνουμε λίστα μου. 

Τώρα η εσωτερική HTML εσωτερικό του div todos είναι απολύτως σαφές, και τώρα πρέπει να αρχίσουμε να προσθέτουμε λίστα μου. Το πρώτο πράγμα που θέλω να προσθέσω είναι πίσω η unordered tag λίστα, το οποίο σημαίνει ουσιαστικά ότι αυτή είναι η αρχή μιας μη διατεταγμένη λίστα. Τώρα, για κάθε στοιχείο σε Todos σειρά μου θέλω να την εκτυπώσετε στο εσωτερικό της HTML. Θέλω να το προσθέσετε στο στο κάτω μέρος του καταλόγου αυτού. Ακριβώς όπως και στη C, μπορώ να χρησιμοποιήσω ένα for loop, και είμαι πρόκειται να ξεκινήσει στην αρχή της λίστας μου στο στοιχείο 0, και είμαι πρόκειται να πάει σε όλη τη διαδρομή προς το μήκος της λίστας. Μπορούμε πραγματικά να πάρετε το μήκος ενός πίνακα σε JavaScript χρησιμοποιώντας την ιδιότητα μήκους. Βασικά είμαι πρόκειται να κάνει κάτι παρόμοιο στο εσωτερικό της εδώ να εκτυπώσετε αυτό το στοιχείο. Θα μπορούν να έχουν πρόσβαση και πάλι το div todos, η εσωτερική HTML ιδιοκτησία του αυτό, και πάω να προσθέσω σε αυτό το νέο στοιχείο της λίστας, και ότι πρόκειται να περιβάλλονται από Αυτή η ετικέτα li, και Πάω να ενώσετε με τον φορέα εκμετάλλευσης +, και αυτό είναι το i-οστό στοιχείο της todos σειρά μου, και στη συνέχεια θα πάω να κλείσει την ετικέτα. Τώρα, για κάθε στοιχείο που θα προσθέσετε μια νέα καταχώριση στη λίστα. Και τότε το μόνο που πραγματικά χρειάζεται να κάνετε είναι να κλείσουμε την ετικέτα. Απλά πρέπει να κλείσει off που επιτυγχάνεται με την εντολή tag λίστα. 

Μήπως μπορείτε να πάρετε μια ιδέα για το πώς λειτουργεί; Αυτό ανοίγει ολόκληρη τη λίστα. Αυτό προσθέτει μεμονωμένα στοιχεία από τη λίστα todos στον κατάλογο, και στη συνέχεια, που κλείνει ολόκληρη τη λίστα, και αυτό είναι addTodo λειτουργία μου. Εγώ βασικά να ξεκινήσει από το να πάρει το todo από το πλαίσιο κειμένου. Ήθελα να προσθέσω ότι στην παράταξη todos, και στη συνέχεια εκ νέου καταστήσει την-να κάνουμε λίστα. Τώρα μπορώ να προσθέσω στοιχεία στην λίστα μου. Αυτό είναι το είδος της διέγερσης, διότι σε λίγες γραμμές κώδικα έχουμε κάνει ουσιαστικά ένα-να κάνουμε λίστα, όπου μπορούμε να προσθέσουμε στοιχεία. Great. Αυτό είναι το είδος της μια βασική εισαγωγή στις JavaScript. Μην ανησυχείτε πάρα πολύ για τη σύνταξη για τώρα, Αλλά σκεφτείτε για αυτό εννοιολογικά. Είχαμε κάποια HTML. Είχαμε ένα πλαίσιο κειμένου στη σελίδα που ουσιαστικά επέτρεψε στους χρήστες να εισάγετε ένα-να κάνουμε αντικείμενο για να προσθέσετε. Και στη συνέχεια θα χρησιμοποιηθούν JavaScript για να φέρω ότι todo από το πλαίσιο κειμένου. Εμείς αποθηκεύονται ότι μέσα σε μια συστοιχία JavaScript, τα οποία είναι βασικά όπως προγραμματική εκπροσώπησή μας από ότι για την-να κάνουμε λίστα, και στη συνέχεια θα το εκτυπώσει. Αυτό είναι todos.js. 

Αυτό είναι το είδος της δροσερό, αλλά πώς μπορούμε να πάρουμε αυτό το περισσότερο; Λοιπόν, όπως μπορείτε να δείτε, αυτό δεν είναι σαν ένα πλήρες-να κάνουμε λίστα. Για παράδειγμα, δεν μπορώ να επισημάνετε κάποιο από αυτά τα στοιχεία ως ελλιπής, όπως και αν ήθελα να reprioritize τα στοιχεία ή να διαγράψετε στοιχεία. Αυτό είναι εντάξει, αλλά μπορούμε να πάρουμε αυτό περαιτέρω. Είμαι δεν πρόκειται να μιλήσω πάρα πολύ για την προσθήκη επιπλέον χαρακτηριστικά, αλλά θα μπορούσαμε να πάρουμε ότι περαιτέρω. Ας μιλήσουμε για την προσθήκη ενός ακόμη χαρακτηριστικό σε αυτό-να κάνουμε λίστα, η οποία πρόκειται να είναι σε θέση να ελέγξει ένα άτομο-για να κάνουμε το στοιχείο και έχουν να διαγραφεί, οπότε ουσιαστικά λέγοντας ότι έχω κάνει αυτό. Ας δούμε λίγο κώδικα που θα μπορούσε να το επιτύχει αυτό. Ανακοίνωση για ό, τι έχω κάνει στην κορυφή είναι Έχω προσθέσει μια νέα παγκόσμια σειρά που ονομάζεται πλήρης. Είμαι χρησιμοποιώντας βασικά αυτό για να αποθηκεύσετε το αν τα στοιχεία σχετικά με την-να κάνουμε λίστα είναι πλήρεις ή όχι. Αυτός είναι ένας τρόπος για να γίνει αυτό. Αν κοιτάζω την εφαρμογή του παρόντος, η οθόνη, βασικά αν εισάγετε ένα todo και πατάω το κουμπί εναλλαγής διασχίζει έξω, έτσι ώστε κάθε στοιχείο στη λίστα αυτή έχει είτε ένα πλήρες ή ελλιπή κατάσταση, και είμαι χρησιμοποιώντας μια άλλη σειρά να εκπροσωπεί αυτό. 

Βασικά για κάθε todo στην εν λόγω διάταξη todos υπάρχει ένα στοιχείο στην πλήρη πίνακα που ουσιαστικά δείχνει αν αυτό είναι πλήρεις ή όχι. Είχα να κάνει πολύ ελάχιστες αλλαγές σε αυτόν τον κώδικα, τόσο εδώ είναι addTodo λειτουργία μας. Παρατηρήστε ότι εδώ είμαι να πιέζει επί της σειράς, και τότε είμαι πιέζει ένα 0 στην εν λόγω πλήρη σειρά, ουσιαστικά παράλληλα με την νέα ώθηση todo να πω Είμαι προσθέτοντας αυτό το στοιχείο, και, σε συνδυασμό με την τιμή αυτή, πράγμα που σημαίνει ότι είναι ατελής. Και τότε είμαι επαναχάραξη του-να κάνουμε λίστα. Τώρα, παρατηρούμε έχω προσθέσει αυτό το drawTodoList λειτουργία. Αυτό παίρνει πολλή κώδικα που είχαμε πριν, ουσιαστικά ανοίγει το κουτί και στη συνέχεια αντλεί το νέο-να κάνουμε λίστα. Αλλά παρατηρήσετε ότι μέσα σ 'αυτό για το βρόχο κάνουμε λίγο περισσότερο τώρα. Είμαστε ουσιαστικά ελέγχουν εάν το στοιχείο που αντιστοιχεί στον i todo εδώ είναι πλήρης, και είμαστε συμπεριφέρεται διαφορετικά σε αυτές τις 2 περιπτώσεις. Αν είναι πλήρης, είμαστε προσθέτοντας αυτήν την ετικέτα del, το οποίο είναι ουσιαστικά ο τρόπος που μπορείτε να πάρετε εκείνη την απεργία μέσω της επίδρασής διέλευση από την-να κάνουμε λίστα, εάν είναι πλήρης, και αν δεν είναι, δεν είμαστε αυτό, συμπεριλαμβανομένων. Και έτσι αυτό το είδος της φροντίζει για αυτό, 

και αυτός είναι ένας τρόπος για να επιτευχθεί αυτό. Και στη συνέχεια παρατηρήσετε όταν ο χρήστης κάνει κλικ σε ένα από αυτά θα αλλάξετε την κατάσταση ολοκλήρωσης του. Όταν ο χρήστης κάνει κλικ, θα αντιστραφεί αν είναι ήδη ολοκληρωθεί ή όχι, και στη συνέχεια θα το ανασχηματισμού. Αυτό το είδος των έργων. Έχουμε αυτές τις λειτουργίες που εκτελούν τα καθήκοντά τους, και αυτό είναι εντάξει. Υπάρχει κάτι που θα μπορούσαμε να κάνουμε καλύτερα για αυτό, αν υπάρχει; Ανακοίνωση έχουμε αυτά τα 2 παγκόσμια συστοιχίες. Αν αυτό ήταν C, και είχαμε 2 συστοιχίες ότι το είδος των εκπροσωπούμενων δεδομένα που είδος που σχετίζονται με κάποιο τρόπο τι θα χρησιμοποιήσετε σε C να συνδυάσει αυτά τα 2 πεδία σε κάτι που συμπυκνώνει δύο κομμάτια των πληροφοριών; Ο καθένας θέλει να κάνει μια πρόταση; [Φοιτητής ακούγεται απάντηση] 

Ακριβώς, έτσι θα μπορούσαμε να χρησιμοποιήσουμε κάποιο είδος struct, Και αν νομίζετε ότι πίσω, ας πούμε, το chipset 3, θυμάστε είχαμε λεξικό, και στη συνέχεια είχαμε το αν η λέξη στο λεξικό, και όλες οι πληροφορίες ήταν μαζί εσωτερικό του κάποια δομή δεδομένων. Ένα πράγμα που μπορώ να κάνω με αυτόν τον κωδικό για να αποφύγουν αυτά τα 2 διαφορετικές συστοιχίες για παρόμοια κομμάτια των πληροφοριών είναι μπορώ να τα συνδυάσετε σε ένα αντικείμενο JavaScript. Ας ρίξουμε μια ματιά σε αυτό. Ανακοίνωση Έχω μόνο μια συστοιχία στην κορυφή τώρα και τι έχω κάνει είναι-και αυτό είναι ακριβώς το JavaScript σύνταξη για το είδος της δημιουργώντας μια κυριολεκτική εκδοχή ενός αντικειμένου, και να παρατηρήσετε ότι υπάρχουν 2 ιδιότητες, έτσι έχουμε την todo, και αυτό είναι που φυλάσσεται μαζί με το αν είναι πλήρης ή ελλιπής. Αυτό είναι πολύ παρόμοιο κώδικα. Είμαστε χρησιμοποιώντας τα αντικείμενα JavaScript. Αυτό το είδος της βελτιώνει τα πράγματα. Όπως και τώρα, όλοι αυτοί οι τομείς των σχετικών πληροφοριών παραμένουν μαζί. Όταν πάμε να το εκτυπώσετε, μπορούμε να έχουμε πρόσβαση τα πεδία. 

Ανακοίνωση για το πώς κάνουμε todos [i]. Πλήρης αντί του ελέγχου της πλήρους συστοιχίας χωριστά, και να παρατηρήσετε όταν θέλουμε να πάρετε την-να κάνουμε εγχόρδων είμαστε πάρει την-να κάνουμε ιδιοκτησίας του εν λόγω todo, έτσι αυτό το είδος της νόημα, διότι κάθε στοιχείο έχει αυτές τις εγγενείς ιδιότητες γι 'αυτό. Έχει μια todo, και έχει αν είναι πλήρης ή όχι. Όχι πάρα πολλές αλλαγές υπάρχουν λειτουργικά, προστέθηκε μόλις λίγο περισσότερο στον κώδικα. Αυτό είναι μια βελτίωση σε κάποια μέτωπα, έτσι δεν είναι; Θέλω να πω, θα υπολογιστεί από το σχεδιασμό λίγο. Τώρα έχουμε τα αντικείμενα να ενσωματώσει ουσιαστικά αυτά τα δεδομένα. Υπάρχει κάτι περισσότερο που μπορούμε να κάνουμε από εδώ και από την άποψη της JavaScript εκεί; Όπως ειδοποίηση ότι αυτός ο κώδικας εδώ για να πάρει την εσωτερική HTML μιας div είναι ένα μικρό, υποθέτω, πολύ. Υπάρχει document.getElementById ("todos"). InnerHTML. Ένα πράγμα που μπορούμε να κάνουμε για να κάνει αυτός ο κώδικας δούμε λίγο πιο φιλικό γι 'αυτό δεν θα πρέπει να συνεχίσετε την κύλιση αριστερά και δεξιά, εμπρός και πίσω, είναι ότι θα μπορούσε να χρησιμοποιήσει μια βιβλιοθήκη όπως jQuery. 

Ας ελέγξει έξω Σεμινάριο 2, και αυτό είναι το ίδιο κώδικα, αλλά αυτό γίνεται με jQuery. Μπορεί να μην είναι πολύ εξοικειωμένοι με jQuery, αλλά απλά να ξέρετε ότι jQuery είναι ένα είδος βιβλιοθήκης για JavaScript που το καθιστά ευκολότερο να κάνουμε τα πράγματα όπως τα στοιχεία ατομική πρόσβαση του DOM. Εδώ αντί να λέει document.getElementById ("todos"). InnerHTML Μπορώ να χρησιμοποιήσω το πολύ δρόμο καθαρότερο jQuery, το οποίο είναι απλά να χρησιμοποιήσετε επιλογείς. Όπως μπορείτε να δείτε, αυτός ο κώδικας δεν πάρετε μια μικρή σκούπα, πολύ παρόμοια λειτουργικά, αλλά αυτή είναι η ιδέα. Έχουμε δει μια-δυο πράγματα μέχρι στιγμής, έτσι αρχίσαμε με μόλις πρώτες εφαρμογή JavaScript. Προσθέσαμε νέα χαρακτηριστικά και έδειξε πώς μπορούμε να τη βελτιώσουμε με ακριβώς αυτό που έχουμε στο JavaScript. 

Πιστεύει κανείς να δει τις δυσκολίες με αυτό το σχέδιο; Δηλαδή, υποθέτω-ή όχι κατ 'ανάγκη τις δυσκολίες, αλλά ας πούμε δεν είχαμε κάνει-να κάνουμε λίστα έργων, και αύριο θα αποφασιστεί θέλαμε να κάνουμε έναν κατάλογο παντοπωλείων ή ένα έργο λίστα με ψώνια. Πολλά από αυτά τα χαρακτηριστικά είναι πολύ παρόμοια. Πολλά από τα πράγματα που θέλουμε να βγούμε από JavaScript είναι πολύ συχνές, και αυτό υπογραμμίζει την ανάγκη για κάποιο είδος του τρόπου κάνει αυτό πιο εύκολο να κάνει. Έπρεπε να δημιουργήσει όλες αυτές τις HTML πρόσβασης, όλη αυτή η πρόσβαση DOM, σαν να είμαι πρόκειται να εκπροσωπήσει την-να κάνουμε λίστα με αυτό το μοντέλο. Και παρατηρήσετε είμαι υπεύθυνος, ως ο κύριος του έργου JavaScript για τη διατήρηση της HTML και JavaScript που έχω σε συγχρονισμό. Τίποτα δεν γίνονται αυτόματα ότι το JavaScript εκπροσώπηση ή την-να κάνουμε λίστα να βγει έξω για HTML. Τίποτα δεν επιβάλλεται ότι εκτός από μένα. Έπρεπε να γράψω την κλήρωση-να κάνουμε τη λειτουργία λίστας. Και αυτό δεν μπορεί να είναι-εννοώ, είναι λογικό να το κάνουμε αυτό, αλλά μπορεί να είναι κουραστικό μερικές φορές. Εάν έχετε ένα μεγαλύτερο έργο, που θα μπορούσε να είναι δύσκολη. 

Πλαίσια, ένας από τους σκοπούς των πλαισίων είναι να απλοποιήσει αυτή τη διαδικασία και το είδος παράγοντας από τους αυτά τα κοινά-Υποθέτω ότι θα μπορούσαμε να πούμε-το σχεδιασμό μοντέλων ότι οι άνθρωποι έχουν γενικά κάποιο είδος του τρόπου παρουσίασης δεδομένων, αν αυτό είναι μια λίστα φίλων, είτε αυτό είναι πληροφορίες χάρτη ή κάτι ή ένα-να κάνουμε λίστα. Μερικοί άνθρωποι έχουν γενικά έναν τρόπο παρουσίαση των πληροφοριών, και γενικά πρέπει να κρατήσει αυτό το είδος πληροφοριών σε συγχρονισμό ανάμεσα σε αυτό που βλέπει ο χρήστης σε κάποιο είδος του άποψη, μιλώντας από την άποψη της, όπως το ελεγκτή άποψη μοντέλο που είδατε στη διάλεξη, και στη συνέχεια το μοντέλο, το οποίο στην περίπτωση αυτή είναι αυτή η συστοιχία JavaScript. Πλαίσια μας δώσει έναν τρόπο να λύσει αυτό το πρόβλημα. Τώρα, ας ρίξουμε μια ματιά στην εφαρμογή του παρόντος-να κάνουμε λίστα σε ένα πλαίσιο που ονομάζεται angularjs. Αυτό είναι. Ανακοίνωση για να χωράει σε μια διαφάνεια. Δεν έχω να μετακινηθείτε προς τα αριστερά και δεξιά. Αυτό είναι πιθανόν να μην είναι ένας καλός λόγος για να συστήσει τη χρήση ενός πλαισίου, αλλά ειδοποίηση είμαι πρόσβαση ποτέ μεμονωμένα στοιχεία HTML εδώ; Είμαι πάντα πηγαίνει στο DOM; Πιστεύετε ότι θα υπάρξουν document.getElementById ή κάτι τέτοιο; Όχι, αυτό είναι φύγει. 

Γωνιακή μας βοηθά να κρατήσει το DOM και JavaScript εκπροσώπησή μας από κάτι το είδος της σε συγχρονισμό, οπότε αν δεν είναι στο αρχείο js, αν δεν υπάρχει τρόπος προγραμματισμού πάρει σε όλους ότι το περιεχόμενο HTML από το JavaScript πώς θα διατηρώντας αυτό σε συγχρονισμό; Αν δεν είναι στο αρχείο. Js, που πήρε να είναι σε μορφή HTML, έτσι δεν είναι; Αυτή είναι η νέα έκδοση του HTML αρχείου, και να παρατηρήσετε έχουμε προσθέσει πολλά εδώ. Παρατηρήσετε ότι υπάρχουν αυτά τα νέα χαρακτηριστικά που λένε ng-κλικ και ng-επαναλαμβάνω. Προσέγγιση Γωνιακή για την επίλυση αυτού του προβλήματος των δυσκολιών στο σχεδιασμό είναι ουσιαστικά κάνει HTML πολύ πιο ισχυρό. Γωνιακή είναι ένας τρόπος που σας επιτρέπει να κάνετε HTML κάπως πιο εκφραστική. Για παράδειγμα, μπορώ να πω ότι θα πάω να δέσει ή να δεσμεύσει αυτό το πλαίσιο κειμένου σε μια μεταβλητή μέσα σε γωνιακή κώδικα JavaScript μου. Αυτό ng-μοντέλο κάνει ακριβώς αυτό. Που ουσιαστικά λέει ότι το στοιχείο στο εσωτερικό της αυτό το πλαίσιο κειμένου, απλά συνδέουν αυτό με τη μεταβλητή new_todo_description στο πλαίσιο του κώδικα JavaScript. Αυτό είναι πολύ ισχυρό, γιατί δεν θα πρέπει ρητά να πάει στο το DOM για να πάρετε τις πληροφορίες. Δεν έχω να πω document.getElementById. Δεν χρειάζεται να χρησιμοποιήσετε jQueries όπως η πρόσβαση DOM. Μπορώ να το συνδέσει με μια μεταβλητή, και στη συνέχεια, όταν μπορώ να αλλάξω αυτή τη μεταβλητή εντός JavaScript είναι διατηρούνται σε συγχρονισμό με την HTML, έτσι ώστε να απλοποιεί τη διαδικασία να πρέπει να πάει μπροστά και πίσω μεταξύ των δύο. Μήπως αυτό έχει νόημα; 

Και παρατηρήσετε δεν υπάρχει HTML κωδικό πρόσβασης. Έχουμε μόλις έκανε HTML πιο ισχυρό, και τώρα, για παράδειγμα, μπορούμε να κάνουμε τα πράγματα όπως αυτό, όπως όταν κάνετε κλικ σε αυτό, καλέστε αυτή τη λειτουργία εντός του πεδίου εφαρμογής της todos.js, και θα μπορούσαμε να το κάνουμε αυτό πριν, αλλά υπάρχουν και άλλα πράγματα, όπως αυτό ng-μοντέλο, και να παρατηρήσετε αυτό ng-repeat. Τι νομίζεις ότι κάνει; Εδώ είναι μη διατεταγμένη λίστα μας από πριν. Έχουμε τις ul ετικέτες, αλλά είμαι καθιστώντας ποτέ τον εν λόγω κατάλογο στο εσωτερικό του κώδικα JavaScript; Δεν είμαι ποτέ καθιστά ρητά τον εν λόγω κατάλογο. Πώς λειτουργεί αυτό; Λοιπόν, η γωνιακή τρόπο επιτυγχάνει αυτό είναι αυτό ονομάζεται ένας επαναλήπτης. Βασικά, αυτό λέει ότι θέλω να εκτυπώσετε το HTML για κάθε εσωτερικό todo των Todos σειρά μου. Μέσα από todos.jr υπάρχει μια σειρά todos εδώ, και αυτό θα σας πει γωνιακή go μέσω αυτής της διάταξης, καθώς και για κάθε στοιχείο που βλέπετε Θέλω να εκτυπώσετε το HTML. Αυτό είναι το είδος της φοβερό, επειδή μπορώ ακριβώς να το κάνετε αυτό χωρίς να χρειάζεται να γράψετε ένα for loop, η οποία για ένα-να κάνουμε λίστα που ήταν μόνο 30 γραμμές κώδικα μπορεί να μην είναι το πιο ευεργετικό πράγμα, αλλά εάν έχετε ένα μεγάλο έργο, αυτό θα μπορούσε να πάρει πολύ βολικό. 

Αυτή είναι μία λύση στο πρόβλημα αυτό, καθιστώντας HTML πιο ισχυρό, και αυτό μας επιτρέπει να διατηρήσουμε JavaScript και HTML σε συγχρονισμό. Υπάρχουν και άλλοι πιθανοί τρόποι για να λυθεί αυτό το πρόβλημα, και όχι κάθε πλαίσιο το κάνει αυτό. Δεν είναι κάθε πλαίσιο εργάζεται προς αυτή την κατεύθυνση. Μερικά πλαίσια έχουν διαφορετικές προσεγγίσεις, και μπορείτε να διαπιστώσετε ότι μπορείτε να απολαύσετε την κωδικοποίηση σε ένα πλαίσιο πάνω στο άλλο. Ας δούμε ένα ακόμα. Αυτό είναι το-να κάνουμε λίστα κωδικοποιούνται σε ένα πλαίσιο που αποκαλείται Backbone. Πάω να περάσει μέσα από αυτό γρήγορα. Θα ξεκινήσω με την HTML, πριν πάμε εκεί. Ένα δευτερόλεπτο. Ξεκινώντας με την HTML, όπως θα παρατηρήσετε, HTML μας είναι πολύ παρόμοια σε ό, τι ήταν πριν, έτσι δεν είναι πάρα πολύ νέα σε αυτό το μέτωπο. Αλλά js αρχείο μας είναι λίγο διαφορετική. Είδος ραχοκοκαλιά της έχει αυτή την ιδέα, ή να βασίζεται στην ιδέα ότι πολλά από αυτά που κάνουμε, ας πούμε, τα έργα μας JavaScript είναι να σκεφτώ τα μοντέλα και τις συλλογές αυτών των μοντέλων. Αυτό θα μπορούσε να είναι, για παράδειγμα, μια φωτογραφία και συλλογές των φωτογραφιών, ή η ιδέα ενός φίλου και συλλογές φίλων. Και πολλές φορές όταν είμαστε προγραμματισμού JavaScript εφαρμογές θα ταξινομήσετε του αντιπροσωπεύει την ιδέα του να έχετε μια συλλογή των φίλων κατά κάποιο τρόπο σε JavaScript, και η σπονδυλική στήλη μας δίνει αυτό το στρώμα στην κορυφή των υφιστάμενων πινάκων και των αντικειμένων του JavaScript να κάνει πιο ισχυρά πράγματα με αυτό πιο εύκολα. 

Εδώ έχω ορίσει ένα to-do μοντέλο, και δεν έχετε να ανησυχείτε πάρα πολύ για τη σύνταξη, αλλά παρατηρήσετε ότι αυτό είναι μία από τις ιδιότητες του αυτό; Έχει ένα πεδίο ορισμού. Backbone μου επιτρέπει να καθορίσετε ήδη από το ρόπαλο κάθε νέο-να κάνουμε που έχω δημιουργήσει πρόκειται να έχει αυτές τις προεπιλογές. Τώρα μπορώ να προσαρμόσετε αυτό, αλλά να είναι σε θέση να καθορίσετε τις προεπιλογές είναι ωραίο, και αυτό είναι το είδος της βολικό, επειδή αυτό δεν είναι κάτι που είναι σαν συνυφασμένες με JavaScript, και τώρα δεν έχω ρητά λένε ότι οι Todos είναι ελλιπείς. Μπορώ να πω δεξιά από το ρόπαλο ότι todos πρόκειται να χαρακτηρίζεται ως ελλιπής. Ανακοίνωση τότε τι είναι αυτό; Τώρα έχω ένα-να κάνουμε λίστα, και αυτό είναι μια συλλογή. Ανακοίνωση για τον τομέα που σχετίζεται με την οποία λέει πως το μοντέλο todo. Αυτός είναι ο τρόπος μου να λέει Backbone ότι Πάω να σκεφτόμαστε μια συλλογή των εν λόγω ατομικών todos. Αυτή είναι ουσιαστικά η δομή του μοντέλου για το πρόγραμμά μου. Εδώ έχω αυτή την ιδέα της συλλογής, και ουσιαστικά τα στοιχεία που περιέχονται στην εν λόγω συλλογή είναι όλα πρόκειται να είναι αυτοί οι todos, και ότι είναι πολύ φυσικό σε αυτή την έννοια γιατί έχω todos, και τους έχω σε μια συλλογή. 

Ας δούμε λίγο περισσότερο από αυτό. Εδώ είναι μια άποψη Backbone. Το άλλο πράγμα που Backbone λέει είναι ότι πολλά από τα μοντέλα που σκέφτεστε ή ακόμα και συλλογές θα πρέπει να έχουν κάποιο τρόπο να εμφανίζεται. Πρέπει να το καθιστούν-να κάνουμε λίστα, και δεν θα ήταν ωραίο αν θα μπορούσε να προσφέρει για κάθε μοντέλο ή να συνδέσουν με κάθε μοντέλο αυτή την άποψη που μας επιτρέπει να υποθέτω τη σύνδεση των δύο μαζί; Ενώ πριν έπρεπε να χρησιμοποιήσουμε ένα for loop που θα τρέχει μέσα κάθε todo στη λίστα μας και στη συνέχεια να εκτυπώσετε εδώ μπορούμε να συνδέσουμε το ουσιαστικά με αυτό το μοντέλο. Αυτό είναι ένα-να κάνουμε προβολή. Αυτό συνδέεται με το Todo βρήκαμε νωρίτερα. Τώρα κάθε todo είναι εμφανίσιμα ή renderable από αυτό-να κάνουμε προβολή. Ανακοίνωση για ορισμένα από τα πεδία. Τι νομίζετε ότι αυτό tagName είναι, tagName: li? Θυμηθείτε από πριν, όταν θέλαμε να καταστήσει ένα todo θα πρέπει να αντιστοιχίσετε ρητά Todos μας με αυτήν την ετικέτα li. Τώρα λέμε ότι όπου αυτό todo πρόκειται να ζήσει πρόκειται να είναι μέσα από μια ετικέτα li. Και τώρα είμαστε συνδέει επίσης τα γεγονότα με todos μας. 

Κάθε todo έχει αυτό ένα γεγονός. Αν κάνετε κλικ σε μεγάλο βαθμό το κουμπί εναλλαγής, αυτό είναι ό, τι λέω εκεί, στη συνέχεια να επισημάνετε ουσιαστικά το todo ως το αντίθετο από αυτό που ήταν πριν και στη συνέχεια να καθιστούν την εφαρμογή. Αυτό είναι το είδος παρόμοιο με τον κώδικα πριν. Να θυμάστε, όταν θα το φέρουν, είτε το αντίθετο ή- και στη συνέχεια εκ νέου-rendered. Να σημειωθεί όμως τώρα αυτό το γεγονός χρησιμοποιείται για να είναι κάτι που ήταν στην HTML. Θα καθόταν εκεί. Το κουμπί είχε με κλικ. Όταν κάνετε κλικ στο κουμπί, αυτό το είδος της κάνει τα πράγματα να που έχει συσταθεί ότι todo είναι ελλιπής. Εδώ έχουμε συνδέονται εκείνο το γεγονός της κάνοντας κλικ στην αντίστοιχη κουμπί εναλλαγής και την αναστροφή είτε πρόκειται για εντός ή εκτός με την άποψη αυτή. 

Αυτό είναι ένας ωραίος τρόπος για τη δημιουργία αυτής της εκδήλωσης, έτσι ώστε να είναι πολύ στενά συνδεδεμένη την άποψη αυτή, και να παρατηρήσετε έτσι μία ακόμη. Έχω αυτή τη μέθοδο render, και εμείς δεν πρέπει να περάσουν από τις λεπτομέρειες. Είναι είδος παρόμοιο με αυτό που είχαμε πριν, αλλά παρατηρήσετε δεν είμαι looping μέσω τίποτα. Δεν είμαι εκτύπωση πως η UL tag που είναι είδος λέγοντας Πάω να εκτυπώσετε όλα τα στοιχεία. Είμαι παρέχει τη λειτουργικότητα για να καταστεί αυτό το ένα-να κάνουμε στοιχείο. Αυτή είναι μια πολύ ισχυρή ιδέα, διότι ουσιαστικά -να κάνουμε λίστα μας αποτελείται από όλα αυτά todos, και αν μπορούμε ουσιαστικά καθορίσετε ο τρόπος για να καταστήσει ένα από αυτά todos τότε μπορούμε να έχουμε ισχυρή ραχοκοκαλιά μας per se καθιστούν όλα τα todos καλώντας τη μέθοδο του Render για τα επιμέρους todos. Αυτή είναι μια έννοια που είναι χρήσιμο εδώ. Τώρα είναι μια καλή ερώτηση για να ρωτήσω είναι πώς είναι αυτή η εφαρμογή να βάλει μαζί; Επειδή έχουμε τη δυνατότητα να καταστήσει ένα todo, αλλά πώς θα πάρετε την ιδέα των πολλαπλών todos; 

Ας ρίξουμε μια ματιά σε αυτό. Αυτό είναι το τελευταίο μέρος. Ανακοίνωση έχουμε ένα-να κάνουμε προβολή λίστας εδώ, και να παρατηρήσετε ότι είναι επίσης μια άποψη. Και για να πάει πάνω από ένα δυο πράγματα, Αυτή η μέθοδος αρχικοποίησης θα καλείται όταν δημιουργούμε για πρώτη φορά αυτό-να κάνουμε λίστα. Όπως μπορείτε να δείτε, είναι σαν τη δημιουργία του-να κάνουμε λίστα και συνδέοντάς το με την άποψη αυτή. Και τότε προστίθενται οι λειτουργίες εδώ τόσο βασικά, όταν προσθέτετε ένα στοιχείο- Αυτό είναι παρόμοιο με τη μέθοδο addItem είδαμε προηγουμένως Πάω να δημιουργήσετε ένα νέο αντικείμενο todo, και να παρατηρήσετε είμαι πραγματικά καλώντας Αυτή η νέα μέθοδος todo, έτσι αυτό παρέχεται από Backbone, και μπορώ να περάσει σε ακίνητα μου εδώ. Και τώρα κάθε todo που έχω δημιουργήσει με αυτό θα πάρει τη λειτουργικότητα που είδαμε πριν. Ανακοίνωση Είμαι εκκαθάριση από το πλαίσιο κειμένου πριν-μια μικρή μικρή λεπτομέρεια- και στη συνέχεια είμαι προσθέτοντας αυτή τη συλλογή. 

Αυτό φαίνεται σχεδόν περίεργο γιατί πριν ακριβώς έπρεπε να το κάνουμε αυτό todos.push, και στη συνέχεια είχαμε κάνει, και αυτό μπορεί να φαίνεται πιο περίπλοκη για το συγκεκριμένο έργο, και μπορείτε να διαπιστώσετε ότι Backbone ή ακόμα και γωνιακή ή οποιοδήποτε άλλο πλαίσιο δεν ταιριάζει ιδιαίτερα το έργο σας, αλλά νομίζω ότι είναι σημαντικό να σκεφτούμε τι σημαίνει αυτό σε μεγαλύτερη κλίμακα για τα μεγάλα έργα, γιατί αν είχαμε ένα μεγαλύτερο έργο όπου ήμασταν εκπροσωπούν κάποια πραγματικά σύνθετη συλλογή, κάτι βαθύτερο από ακριβώς ένα-να κάνουμε λίστα, ας πούμε μια λίστα φίλων ή κάτι τέτοιο, αυτό θα μπορούσε να έρθει σε πρακτικό γιατί θα μπορούσαμε να διοργανώσουμε τον κωδικό μας σε ένα πολύ βολικό τρόπο, με τρόπο που θα καταστήσει ευκολότερο για κάποιον άλλο ο οποίος ήθελε να πάρει ένα σχέδιο για την περαιτέρω ανάπτυξη. Μπορείτε να δείτε ότι αυτό παρέχει πολλές δομής. Και τότε είμαι καλώντας καθιστούν αυτή την addItem. Render, όπως μπορείτε να δείτε, και δεν έχετε να κατανοήσουν αυτή την πλήρη σύνταξη, αλλά βασικά για κάθε μοντέλο πρόκειται να καλέσετε το άτομο μέθοδο render. Αυτό είναι το είδος της όπου αυτό προέρχεται. Ας καθορίσετε τον τρόπο να δώσει τα μεμονωμένα todos, και στη συνέχεια ας κόλλα μαζί ως σύνολο. Αλλά αυτό παρέχει έναν τρόπο αφαίρεσης, γιατί θα μπορούσε να αλλάξει τον τρόπο που έχω αποφασίσει να δώσει τα μεμονωμένα todos, και δεν θα πρέπει να αλλάξουν οποιαδήποτε αυτού του κώδικα. Αυτό είναι το είδος της δροσερό. 

Μήπως κάποιος έχει απορίες σχετικά με JavaScript πλαισίων; [Φοιτητής ακούγεται ερώτημα] Ω, σίγουρα, αυτό είναι ένα μεγάλο ερώτημα. Το ερώτημα ήταν πώς θα περιλαμβάνουν τα πλαίσια; Τα περισσότερα πλαίσια JavaScript είναι βασικά ακριβώς αρχεία js που μπορείτε να συμπεριλάβετε στην αρχή του κώδικα σας. Ανακοίνωση στο τμήμα της κεφαλής του HTML μου έχω όλα αυτά τα tags script, και η τελική ετικέτα σενάριο είναι ο κώδικας που έχω γράψει. Και τότε τα 3 κωδικοί πλαίσιο είναι απλά και ετικέτες script. Είμαι τους ακόμη και από αυτό που ονομάζεται CDN, που μου επιτρέπει να το πάρει από κάποιον άλλο σε αυτό το σημείο αλλά κάθε πλαίσιο έχει αυτό-μπορείτε λίγο πολύ να βρείτε το περιεχόμενο για μια συγκεκριμένη βιβλιοθήκη JavaScript διατίθεται σε κάποια CDN ή κάτι τέτοιο, και στη συνέχεια μπορείτε να συμπεριλάβετε αυτές τις ετικέτες script. Μήπως αυτό έχει νόημα; Cool. 

Αυτά είναι 2 διαφορετικές προσεγγίσεις. Αυτοί δεν είναι οι μόνες προσεγγίσεις για την επίλυση αυτού του προβλήματος. Υπάρχουν πολλά διαφορετικά πράγματα που κάποιος θα μπορούσε να κάνει, και υπάρχουν πολλά πλαίσια εκεί έξω. Γωνιακό και Backbone δεν λένε όλη την ιστορία. Καλή τύχη με τα τελικά έργα σας, και σας ευχαριστώ πολύ. [CS50.TV]