[Powered by Google Translate] [Seminar] [JavaScript Frameworks:? Warum und Wie]
[Kevin Schmid] [Harvard University]
[Dies ist CS50.] [CS50.TV]
>> Hallo, alle. Willkommen auf der JavaScript Frameworks Seminar.
Mein Name ist Kevin, und heute habe ich werde über JavaScript-Frameworks werden reden,
und das Ziel der dieses Seminars ist es nicht auf Sie bekommen, um, sagen wir, meistern eine bestimmte Rahmen per se
aber, um Ihnen eine breite Einführung, um ein paar von Frameworks
und zeigen, warum wir würden jemals wollen, um einen Rahmen zu verwenden.
>> Bevor ich, dass zu tun, werde ich bereitzustellen ein wenig Hintergrund-in JavaScript,
und dann werden wir es von dort zu nehmen.
Wir gehst, um durch die Implementierung eines, um-do Liste zu starten.
Hier ist unsere Task-Liste für heute.
Es ist Art von lustig. Wir haben, um eine to-do-Liste in JavaScript zu implementieren.
Dies ist, was es geht um aussehen wird, so dass das, unser erstes Ziel.
Wir wirst doch nicht um einen Rahmen zu verwenden, um, dass zu tun.
Wir sind, um Code JavaScript gehen und bekommen Sie ein to-do-Liste um zu arbeiten.
Dann haben wir gehst, um das Design ohne Verwendung von einen Rahmen zu verbessern.
Wir gehst, um verschiedenen Dinge, die wir mit nur JavaScript allein zu tun diskutieren können
, um unsere machen, um-do aufzulisten, ein wenig mehr gut gestaltet.
Dann haben wir gehst, um in einem gewissen jQuery zu werfen,
und dann werden wir gehst, um an der gleichen schauen, um-do-Liste,
just in verschiedenen Frameworks implementiert, und werden wir diskutieren,
die Vor-und cons entlang dem Weg.
>> Lassen Sie uns Beginn mit der Umsetzung, dass to-do-Liste.
Lassen Sie uns sagen wir Sie dieses HTML bist gegeben.
Ich werde, um machen dies zu einem wenig kleiner.
Wie Sie sehen können, haben ich ein wenig-Header, der Todo sagt
und ein wenig box, wo ich eine Beschreibung eines todo eingeben können
und dann ein neues Element Schaltfläche, also lasst uns versuchen, eine neue todo zu dieser Liste geben Sie.
Gib ein JavaScript-Frameworks Seminar,
und ich bin, um neue Artikel getroffen zu werden.
Ich bekomme diese JavaScript Warnung, die zu implementieren mir sagt:.
Wir haben bekam, um es zu zu implementieren.
Lassen Sie uns prüfen out den Code für dies, sowohl die HTML und die JavaScript aktivierst.
Hier ist unsere HTML.
Wie Sie hier sehen können, ist hier, unsere kleine Todos-Header.
Das war, dass bold Sache, an der Spitze,
und dann haben wir die-Eingang box mit dem Platzhalter,
und dann es gibt eine gewisse-Attribut des diese Schaltfläche, die diese Funktion addTodo aufruft.
Does anybody wollen zu erraten, was, dass on click wird was bedeutet,?
[Stud. unhörbar Reaktion]
Gut, ist die on click sort von wie ein Ereignis,
wie Anklicken mit der Maus ist nur ein Ereignis, und was wir tust
wird wir binden das Ereignis der Klicken dieses-Taste, um, dass die Funktion auszuführen.
AddTodo ist dieser Event-Handler für das Klicken, dass die-Taste.
>> Wie Sie sehen können,, wenn ich klicken Sie auf die neues Element Schaltfläche
die on click Ereignis wird ausgelöst,, und diese Funktion aufgerufen wird.
Lassen Sie uns bei Funktion aussehen.
Wie Sie sehen können, dann ist Sie hier, meine JavaScript-Code so weit.
Was ich habe, an der Spitze ist a globale Datenstruktur für meine to-do-Liste.
Es sieht aus wie einem Array. Es ist nur eine leeres Array zurück.
Und dann habe ich haben die addTodo Funktion, dass wir früher sah,
und die einzige Zeile des Codes in gibt es diese alert.
Es alarmiert zu implementieren mir, und dann Ich habe 2 Aufgaben bei der Hand.
I haben, um die todo zu diesem globale Datenstruktur hinzufügen möchten,
und dann habe ich zeichnen möchten out die, um-do Liste.
Nichts allzu Besonderes, einfach nur noch nicht, aber JavaScript Sie möglicherweise in der nicht vertraut mit,
so Ich werde, langsam zu gehen und überprüfen Sie die Grundlagen der JavaScript in diese Weise.
>> Lassen Sie uns geben dies ein Schuss.
Lassen Sie uns sagen der Benutzer eingibt etwas in dieser Box auf.
I nur etwas, was in Sie hier,, text typisiert.
Wie kann ich des Zugangs, dass der Text durch JavaScript sortieren?
Denken Sie daran,, dass die JavaScript, ist einer der seiner fundamentalen Funktionen, die es gibt uns
dies programmgesteuerten Zugriff auf das DOM.
Es ermöglicht uns, Elemente und ihre Eigenschaften von diesem tatsächlichen HTML zuzugreifen.
Die Art und Weise wir tun,, dass mit bloßen Knochen JavaScript
ist, wir können tatsächlich nutzen eine Funktion in JavaScript genannt getElementById.
Ich möchte, um den Text, die dort sucht in einem gewissen variable typisiert speichern, zu
so Ich werde, um eine neue Variable namens new_todo sagen,,
und ich werde, dieses Element zu zu bekommen.
Dies ist eine Funktion,. GetElementById.
Und jetzt bin ich immer ein Element durch ID, so dass ich, benötigen Sie die ID von diesem Text box,
so Ich habe gegeben es die ID new_todo_description.
Das ist, wie Ich werde, um ein Element zu bekommen.
Das ist mein Argument an diese Funktion, um anzugeben, welche ID zu bekommen.
Und so dass das, ein Element in HTML, und es verfügt über Eigenschaften,.
Du hast diese gesehen. Sie sind Attribute.
Das Attribut des Textes Element, das die Eingabe des Benutzers speichert, wird genannt Wert.
Ich gerettet den Wert dieser Text box jetzt in diesem Variable namens new_todo.
Now I den programmgesteuerten Zugriff auf diesem variable haben, ist welche Art von kühlen
, weil jetzt, was ich tun können, ist Ich kann es zu meinem to-do-Liste hinzuzufügen.
>> Die Art und Weise wir dies in tun würde, JavaScript-and mach dir keine Sorgen wenn Sie nicht vertraut mit dies bist,
aber gerade gehen durch es ist todos.push
, weil, die der Name meiner globale Datenstruktur ist in der up Sie hier,,
und ich bin gehen, um new_todo zu schieben.
Dies ist groß, weil jetzt habe ich es zu meinem JavaScript hinzugefügt haben
Darstellung von, dass to-do-Liste.
Aber jetzt wie bekomme ich es zurück zu dem HTML?
I haben, einen Weg zu von schieben Sie es zurück zu sortieren zu finden.
In anderen Worten, I Art von haben, dies zu zu zeichnen.
Was wir gehst, um zu tun ist, dass wir gehst, um die to-do-Liste zu zeichnen.
Ich brauche zu anderen HTML-auf diesem Seite zu aktualisieren,
und wie Sie sehen können, habe ich dieses kleine Behälter Sie hier links ab,
dieser Teiler des Seite, deren ID ist todos,
und ich werde, um die to-do-Liste dort zu setzen.
Zuerst werde ich um es zu deaktivieren out, weil, sagen wir, dort war ein alter to-do-Liste dort.
I bin bekommen, dass Element durch ID wieder,
und ich bin den Zugriff auf das innere HTML-von diesem Element,
und ich bin gehen, um, dass zu löschen.
Wenn wir diesen Code verließ, wie ist, würden wir sehen einen leeren dort nichts,
und jetzt will ich zu starten Rendern meine neue to-do-Liste.
I bin im Grunde gehen, um wischen Sie out my to-do-Liste.
>> Nun ist die innere HTML-Innenseite des diesem todos div ist völlig klar,
und jetzt habe ich brauchen, um zu starten Zugabe von meiner Liste.
Der erste Sache, die ich wollen, um wieder hinzuzufügen, ist die ungeordnete Liste tag,
was im Grunde bezeichnet dass dies der Beginn von einer ungeordnete Liste ist.
Now für jedes Element in meine todos Array Ich möchte um es zu drucken out Innenseite des diesem HTML.
I wollen, um es anhängen on an der Unterseite des dieser Liste.
Genau wie in C, kann ich eine for-Schleife zu verwenden, und ich bin gehen, um am Anfang des meiner Liste zu starten
bei Element 0, und ich bin gehen, um alle die Art und Weise auf die Länge des der Liste zu gehen.
Wir können tatsächlich bekommen die Länge des einem Array in JavaScript unter Verwendung des length-Eigenschaft.
Grundsätzlich bin ich gehen, um etwas sehr ähnlich Innenseite des hier zu tun
zu druckenden hin, dass die Element.
Ich kann wieder Zugriff auf die todos div, die innere HTML-Eigenschaft des, dass,
und ich bin gehen, um on dieser neuen Liste Element Anlagen hinzufügen, und, dass ist los, um durch umgeben sein
dies li tag, und ich werde, um mit dem +-Operator verketten,
und das ist die i-te Element von meine todos Array,
und dann habe ich bin gehen, um, dass die tag zu schließen.
Now für jeden Element, das wir werde hinzufügen, eine neue Liste Eintrag.
Und dann alles, was wir wirklich brauchen, um tun ist, zu schließen off, dass die tag.
Ich brauche nur, um zu schließen off, dass ungeordnete Liste tag.
>> Kennen Sie bekommen ein Gefühl für how, dass funktioniert es?
Dies öffnet die gesamte Liste.
Dies fügt einzelnen Elemente aus dem todos Liste, um der Liste aus,
und dann, die geschlossen wird die gesamte Liste, und dies ist mein addTodo-Funktion.
Habe ich im Grunde durch Abrufen der todo aus dem Text box zu beginnen.
Ich hinzufügen, dass, um der todos Array, und dann habe ich erneut rendern die to-do-Liste.
Jetzt kann ich die Produkte aus, meiner Liste hinzuzufügen.
Dies ist eine Art von spannend, weil in nur ein paar Zeilen von Code-
wir habe im Grunde eine to-do-Liste, wo wir Einzelteile hinzufügen können gemacht.
Große.
Das ist Art von einer grundlegenden Einführung, um JavaScript aktivierst.
Sie nicht Sorgen zu viel über der Syntax für jetzt,
aber über dieses konzeptionell zu denken.
Wir hatten einige HTML.
Wir hatten eine Text box man auf der Seite, dass im Grunde erlaubt Benutzer zur Eingabe von eine to-do-Artikel zum hinzuzufügen.
Und dann haben wir verwendet Sie JavaScript, um, dass die todo aus diesem Text box zu holen.
Wir gespeichert, dass im Inneren eines JavaScript-Arrays, was im Grunde ist wie
unsere programmatischer Repräsentation an von, dass to-do-Liste,
und dann werden wir gedruckt it out.
Dies ist todos.js.
>> Dies ist eine Art von cool, aber wie können wir nehmen Sie dieses weiteren?
Nun, wie Sie sehen können, ist dies nicht wie ein kompletter to-do-Liste.
Zum Beispiel, kann ich nicht zu markieren einem der diesen Einzelteilen als unvollständig,
mögen, wenn I, um die Elemente reprioritize oder Löschen von Elementen wollte.
Das ist okay, aber wir können Sie dieses weiter zu gehen.
Ich werde nicht zu viel zu reden über das Hinzufügen von Extra-Features,
aber wir konnten nehmen, dass eine weitere.
Let 's talk über das Hinzufügen von eine weitere Funktion, dies zu to-do-Liste,
, welche wird vorhaben, werden in der Lage zu eine individuelle to-do-Einzelteil zu überprüfen
und haben es werden durchgestrichen, so im Grunde sagen, I habe dies getan.
Lassen Sie uns an einem gewissen Code, der, dass vollbringen aussehen könnte.
Beachten Sie, was Ich habe an der Spitze getan ist, ich habe hinzugefügt
a neuen globalen Array namens komplette.
I bin im Grunde unter Verwendung dies zu speichern, ob die Elemente auf dem, um-do Liste
sind komplette oder nicht.
Dies ist eine Möglichkeit, dies zu tun.
Wenn Ich schaue auf die Umsetzung der dies, das Display,
im Grunde, wenn ich eine todo und geben Sie I drücken Sie diese Toggle-Button
es kreuzt out, so jedes Einzelteil auf dieser Liste verfügt entweder über einen komplette
oder unvollständigen Zustand, und ich bin mit ein weiteres Array, um, dass repräsentieren.
>> Grundsätzlich für jeden todo in diesem todos Array
es gibt ein Element in der komplette-Array, das im Grunde zeigt an,
, ob, dass eine vollständige ist oder nicht.
Ich habe hatte, um ziemlich minimal Änderungen an diesem Code zu machen,
so hier ist unsere addTodo-Funktion.
Beachten Sie, dass Sie hier, I bin pushing es auf das Array,
und dann habe ich bin schiebt einen 0 bis dieses vollständigen Array,
im Grunde in parallel mit dem betreffenden neuen todo Push-to-sagen,
I bin Zugabe von diesen Titel, und es ist mit diesem Wert gekoppelt ist,
was bedeutet, dass es unvollständig ist in der.
Und dann habe ich bin Neuzeichnen der, um-do Liste.
Now, merke ich, habe dieses drawTodoList-Funktion hinzugefügt.
Dies dauert eine Menge von der Code, den wir hatte, bevor,
im Grunde löscht out Sie den Karton und zieht dann die neue to-do-Liste.
Aber feststellen, dass innerhalb von dies for-Schleife wir tust ein wenig mehr jetzt.
Wir bist im Grunde Überprüfung, ob das Einzelteil, das entsprechenden, um der i-ten todo Sie hier,
abgeschlossen ist, und wir sind anders benehmen in diesen 2 Umstände.
Wenn es fertig ist, wir sind das Hinzufügen dieses del tag,
welches ist im Grunde die Art und Weise Sie, dass die Streik Through-Effekt bekommen können
Überquerung out die to-do-Liste, wenn es fertig ist,
und wenn es nicht ist in der, wir sind nicht einschließlich es.
Und so, dass Art von kümmert sich um von, dass,
>> und das ist, ein Weg, um dies zu erreichen.
Und dann bemerken, wenn der Benutzer klickt auf eins von diesen
wir umzuschalten die Fertigstellung Status der es.
Wenn die Benutzer klickt, wir leiten umzukehren, ob es gewesen ist abgeschlossen oder nicht,
und dann werden wir neu zu zeichnen es.
Diese Art von Werken.
Wir haben diese Funktionen, die out tragen ihre eigenen Aufgaben,
und dies ist ganz okay.
Gibt es alles, was wir besser tun konnte über diese, obwohl?
Beachten Sie, haben wir diese 2 globalen-Arrays.
Wenn dies war C, und wir hatten 2-Arrays, dass Art von vertreten
Daten, die sort von in irgendeiner Weise verwandt war
was würden wir in C verwenden, um diese 2 Felder kombinieren
in etwas, das beide Stücke von Informationen kapselt?
Anybody wollen, um einen Vorschlag machen?
[Stud. unhörbar Reaktion]
>> Genau, so wir nutzen könnten irgendeine Art von struct,
und wenn Sie denken Sie zurück an, sagen wir, pset 3,
erinnere mich, wir hatte Wörterbuch, und dann hatten wir, ob das Wort
war in das Wörterbuch aufzunehmen, und all, dass die Informationen wurde setzen zusammen
Innenseite des einem gewissen Datenstruktur.
One Sache, die ich mit diesem Code tun können, um vermeiden, dass diese 2 verschiedenen Arrays
für ähnliche Stücke von Informationen ist, kann ich ihnen in eine JavaScript-Objekt zu kombinieren.
Lassen Sie uns werfen Sie einen Blick bei, dass.
Beachten Sie, ich haben nur eine Array an der Spitze jetzt
und was ich getan habe, ist-und dies ist nur die JavaScript-Syntax für sort von
die Schaffung eines literal Version eines Objektes,
und feststellen, es gibt 2 Eigenschaften, so wir die todo haben,
und es ist zusammen mit, ob es ist vollständige oder unvollständige gehalten.
Dies ist sehr ähnlich-Code.
Wir sind unter Verwendung der JavaScript-Objekte.
Diese Art von verbessert die Dinge.
Gefällt Ihnen jetzt, werden alle diese Felder von verwandten Informationen zusammen gehalten.
Wenn wir um es zu drucken out gehen, können wir zugreifen Sie die Felder.
>> Beachten Sie, wie wir tust todos [i]. Komplette
anstatt der Prüfung des komplette Array separat,
und bemerken, wenn wir, um die to-do-String, den wir immer die to-do-Eigenschaft bist erhalten möchten
von diesem todo, so diese Art von macht Sinn, weil
jedes Einzelteil verfügt über diese intrinsischen Eigenschaften über sie.
Es hat eine todo, und es hat, ob es komplette ist oder nicht.
Nicht allzu viele Änderungen dort funktionell, addierten gerade einige mehr zu dem Code.
Dies ist eine Verbesserung auf einigen Fronten, nicht wahr?
Ich meine, wir faktorisiert out der Entwurf, der einen Bit-.
Jetzt haben wir Objekte, um im Grunde einzukapseln diese Daten.
Gibt es irgendetwas, mehr wir von hier aus in Begriffe von JavaScript tun konnte,?
Mag vorherige Ankündigung, dass dieser Code rechts Sie hier,
für das Erhalten der inneren HTML-Code einer div
ist ein wenig, Ich schätze,, lang.
Es gibt document.getElementById ("todos"). InnerHTML.
Eine Sache, wir tun, um machen dieses Code aussehen ein wenig freundlicher könnte
so würde ich nicht haben zu halten Scrolling-links und rechts, hin und her,
ist Ich konnte eine Bibliothek wie jQuery zu verwenden.
>> Lassen Sie uns prüfen out Seminar 2,
und dies ist die gleichen Code, aber es ist mit jQuery getan.
Sie sind möglicherweise nicht allzu vertraut mit jQuery,
aber weiß nur, dass jQuery sort von einer Bibliothek für JavaScript ist
das macht es einfacher, um Dinge wie Zugang einzelnen Elemente der DOM zu tun.
Hier anstatt zu sagen, document.getElementById ("todos"). InnerHTML
I können die viel sauberer Art und Weise in jQuery zu verwenden,
welches ist, nur um Selektoren zu verwenden.
Wie Sie sehen können, kam es zu dieser Code zu erhalten ein wenig cleaner,
sehr ähnlich funktionell, aber, dass ist die Idee.
Wir haben ein paar der Dinge gesehen, so weit,
so wir begann mit nur raw JavaScript-Implementierung.
Wir neue Features hinzugefügt und zeigte, wie können wir es mit zu verbessern
genau das, was wir haben in JavaScript aktivierst.
>> Does anybody sehen irgendwelche Schwierigkeiten mit dieses Design?
Nämlich, guess-oder I nicht notwendigerweise Schwierigkeiten, aber lassen Sie uns sagen
wir wurden nicht tun eine to-do-Liste Projekt, und morgen haben wir uns entschlossen
wir wollten, um eine grocery list oder eine Shopping-Liste Projekt zu machen.
A Menge von diesen Features sind sehr ähnlich.
A Menge von den Dinge, die wir wollen raus aus von JavaScript sind sehr häufig,
und dies unterstreicht die Notwendigkeit für irgendeine Art von Art und Weise von
so dass dies leichter zu tun.
Ich hatte zu bauen up all von diesem HTML-Zugang, all Sie dieses DOM-Zugang,
wie ich bin gehen, um die, um-do Liste mit diesem Modell repräsentieren.
Und bemerken, Ich bin verantwortlich als der JavaScript-Entwickler
für die Aufbewahrung Sie den HTML-und JavaScript-, dass ich haben in sync.
Nothing automatisch gemacht, dass JavaScript-Darstellung
oder die to-do-Liste out, um HTML geschoben bekommen.
Nothing, dass mit Ausnahme für mich durchgesetzt werden.
Ich hatte, um die draw to-do-Liste Funktion schreiben zu können.
Und sich möglicherweise als nicht sein-I meine, es ist zumutbar wäre,, dass zu tun,
aber es kann sehr mühsam sein manchmal.
Wenn Sie ein größeres Projekt haben, Könnte sein, dass schwierig.
>> Frameworks, einer der Zwecke von Frameworks
ist, um diesen Prozess und sort von Faktor zu vereinfachen out
diese common-Ich vermute, Sie könnte sagen,-design Mustern
, dass die Menschen haben in der Regel irgendeine Art von Art und Weise von die Daten repräsentieren,
, ob das ist ein Freunde Liste,, ob, dass MAP Informationen ist in der
oder etwas oder a to-do-Liste.
Einige Leute haben im Allgemeinen einen Weg von Darstellung von Informationen,
und sie in der Regel brauchen, um, dass die Informationen sort von zu halten in sync
zwischen dem, was der Benutzer sieht in irgendeiner Art von view,
Sprechen in Begriffe von wie das Modell Ansicht-Controller, dass Sie in Vortrag sah,
und dann wird die-Modell, das in diesem Fall ist dies JavaScript-Array.
Frameworks geben Sie uns eine Weg, um, dass die Problem zu lösen.
Now lasst uns werfen Sie einen Blick an der Umsetzung der dies to-do-Liste
in einem Framework namens angularjs.
Das ist es. Beachten Sie, es passt auf einer Folie.
Ich glaube nicht, haben, um zu der linken und rechten zu blättern.
Das wahrscheinlich ist nicht ein großer Grund zu empfehlen die Verwendung von einen Rahmen,
aber vorherige Ankündigung bin, die ich je den Zugriff auf einzelne HTML-Elemente hier?
Bin ich jemals gehen in die DOM?
Siehst du eine beliebige document.getElementById oder so etwas wie, dass?
Nein, das ist gegangen.
>> Angular hilft uns halten Sie die DOM und unsere JavaScript Repräsentation von etwas
Art von in sync, so dass, wenn es ist nicht in der js-Datei,
, wenn es gibt keinen Weg von programmgesteuert bekommen, um alle diesem HTML-Inhalt
aus dem JavaScript wie sollen wir die Geheimhaltung dieses in sync?
Wenn es nicht in der. Js-Datei, ist es bekam, um in HTML sein, nicht wahr?
Dies ist die neue Version von der HTML-Datei,
und bemerken wir, hinzugefügt haben eine Menge Sie hier,.
Beachten Sie, es gibt diese neuen Attribute, die ng-Klick und ng-repeat sagen,.
Angular Der Ansatz zur Lösung dieses Problems von Schwierigkeiten in Design
ist es, im Grunde machen HTML viel mehr mächtig.
Angular ist ein Weg, von so dass Sie zu machen HTML etwas mehr expressive.
Zum Beispiel, kann ich sagen, dass ich werde zu binden oder zu binden Sie dieses Textfeld,
auf eine Variable innerhalb meine Angular JavaScript-Code.
Dieses ng-model genau das tut.
, Dass im Grunde sagt, dass das Einzelteil, das Innenseite des diesem Text box,
gerade assoziieren, dass mit der variable new_todo_description
innerhalb des JavaScript-Code.
Das ist sehr mächtig, weil I nicht haben, um explizit zu gehen
die DOM zu bekommen, dass Informationen.
I nicht haben, um document.getElementById sagen,.
I nicht haben, um jQueries wie DOM Zugang zu verwenden.
I können es mit einem variable assoziieren, und dann, wenn ich, dass Variable zu ändern
innerhalb JavaScript es ist in sync mit dem HTML-gehalten,
, so dass vereinfacht den Prozess des Habens, um zurück und her gehen zwischen den beiden.
Macht das Sinn?
>> Und bemerken, es gibt keinen HTML-Zugriff-Code.
Wir haben gerade gemacht HTML mehr mächtig,
und jetzt, zum Beispiel, können wir Dinge wie dies zu tun,
mögen, wann Sie klicken Sie auf diese, rufen Sie dieses Funktion innerhalb den Anwendungsbereich der todos.js,
und wir konnten, dass, bevor zu tun, aber es gibt andere Dinge, wie dieser ng-model,
und bemerken, Sie dieses ng-repeat.
Was wissen Sie denken, daß diese tut?
Hier ist unsere ungeordnete Liste aus der Zeit vor.
Wir haben die ul-Tags,
, bin aber, die ich je Rendern diese Liste Innenseite des JavaScript-Code?
Ich bin nicht jemals explizit Rendern, dass die Liste.
Wie funktioniert das?
Nun, vollbringt die Art und Weise Angular dies ist dies aufgerufen wird ein Repeater.
Im Grunde ist dies sagt, dass ich, um dieses HTML ausdrucken möchten
für jeden todo Innenseite meiner todos-Array.
Inside of todos.jr gibt es a todos Array rechts Sie hier,,
, und dies wird Angular go durch diesem Array zu erzählen, und für jedes Element Sie sehen,
I möchten, dass Sie, um dieses HTML zu drucken.
Dies ist eine Art von awesome, weil ich gerade können dies tun,
, ohne dass, um eine for-Schleife zu schreiben,
, welche für ein In den-do-Liste, die nur 30 Zeilen von Code war
ist vielleicht nicht die die meisten von Vorteil Sache sein,
aber wenn Sie ein großes Projekt haben, könnte dies zu bekommen sehr bequem.
>> Dies ist einer Lösung für dieses Problem, so dass HTML mehr mächtig,
und das ermöglicht es uns, JavaScript-und HTML-in sync zu halten.
Es gibt andere mögliche Möglichkeiten, um dieses Problem zu lösen,
und nicht jeder Rahmen tut dies.
Nicht jeder Rahmen arbeitet entlang diesen Linien.
Einige Frameworks haben unterschiedliche Ansätze,
und Sie können feststellen, dass Ihnen spass bei in ein Gerüstkohlenstoffatom über den anderen Codierung.
Lassen Sie uns an einem mehr zu suchen.
Dies ist die to-do-Liste up in einem Framework namens Backbone codiert.
I bin gehen, um durch dies schnell zu gehen.
Ich werde mit dem HTML zu starten, bevor wir dorthin zu gehen.
One Sekunde.
Beginnend mit dem HTML,, wie Sie bemerken, die ist unser HTML sehr ähnlich
zu dem, was es war, bevor, so nicht zu viel neue an dieser Front.
Aber unsere js-Datei ist ein wenig anders.
Backbone Art hat diese Idee, oder baut auf der Idee
, dass eine Menge von dem, was wir tun, mit, sagen wir, unsere JavaScript Projekte
wird über Modelle und Sammlungen dieser Modelle denken.
Dies könnte zum Beispiel ein Foto und Sammlungen von Fotos,
oder die Idee eines Freundes und Sammlungen von Freunden.
Und oft, wenn wir die Programmierung von JavaScript-Anwendungen
wir Art stellen die Idee, eine Sammlung von Freunden
irgendwie in JavaScript gibt und Backbone uns diese Schicht
auf der Oberseite des bestehenden Arrays von JavaScript und Objekte
mehr mächtige Dinge mit, dass mehr einfach tun.
>> Hier habe ich eine To-Do-Modell definiert,
und Sie müssen nicht zu viel Sorgen über die Syntax,
aber feststellen, dass das, was man von den Eigenschaften ist das?
Es verfügt über eine Standard-Bereich.
Backbone ermöglicht mir schon geben der Fledermaus
jede neue zu tun, dass ich schaffen wird, diese Standards zu haben.
Jetzt kann ich anpassen, aber in der Lage, die Vorgaben festlegen
ist schön, und es ist irgendwie praktisch, weil das ist nicht etwas, das wie ist
innewohnenden JavaScript und jetzt weiß ich nicht explizit
sagen, dass die todos unvollständig sind.
Ich kann auf Anhieb sagen, dass todos gehen als unvollständig markiert.
Beachten Sie dann, was ist das?
Jetzt habe ich eine To-do-Liste, und das ist eine Sammlung.
Beachten Sie das Feld mit, das Modell todo sagt verbunden.
Das ist meine Art zu sagen, Backbone, dass
Ich werde über eine Sammlung von diesen einzelnen todos denken.
Dies ist im Grunde die Modellstruktur für mein Programm.
Hier habe ich diese Idee aus einer Sammlung,
und im Grunde die Einzelteile, in dieser Sammlung enthalten sind, all gehen, um diese todos sein,
und das ist sehr natürlich in diesem Sinne
weil ich habe todos, und ich habe sie in einer Sammlung.
>> Lassen Sie uns ein wenig mehr von so aussehen.
Hier ist ein Backbone Aussicht.
Die andere Sache, die Backbone sagt, ist, dass
a lot der Modelle, dass du denkst etwa oder sogar Sammlungen
gehen zu müssen, um etwas über die angezeigt haben.
Wir müssen machen, dass To-do-Liste,
und wäre es nicht schön, wenn wir für jedes Modell könnte
oder mit jedem Modell assoziieren diese view
Das erlaubt uns, ich denke, verbinden die beiden zusammen?
Während wir vorher musste eine for-Schleife, die durchlaufen verwenden würde
jeden todo in unserer Liste und drucken Sie dann it out Sie hier,
können wir im Grunde verbinden Sie es mit diesem Modell.
Dies ist eine To-do-Ansicht.
Dies wird mit der todo fanden wir früher verbunden.
Jetzt kann jeder todo wird anzeigbar oder renderbare
durch diese To-do-Ansicht.
Beachten Sie einige der Felder.
Was denken Sie, diese tagName ist, tagName: li?
Denken Sie daran, aus der Zeit vor, als wollten wir eine todo machen
müssten wir explizit koppeln unsere todos mit diesem li-Tag.
Jetzt werden wir sagen, dass, wenn dies todo wird leben
wird sich in einer li-Tag sein.
Und jetzt sind wir auch das Verknüpfen von Ereignissen mit unseren todos.
>> Jeden todo verfügt über this one-Ereignis aus.
Wenn Sie auf so ziemlich das Toggle-Button, das ist, was ich da sagen,
dann im Grunde markieren die todo als das Gegenteil von dem, was es vorher war
und dann wieder machen die Anwendung.
Dies ist eine Art ähnlich dem Code vor.
Denken Sie daran, wenn wir es markiert als entweder die entgegengesetzte oder-
und dann werden wir neu gerendert es.
Aber jetzt bemerken dieses Ereignis verwendet, um etwas, das in der HTML war sein.
Es saß.
Der Button hatte einen auf Klick.
Wenn Sie auf die Schaltfläche klicken, es ist irgendwie tut das Zeug zu
einzurichten, dass todo unvollständig zu sein.
Hier haben wir habe dieses Ereignis des Anklickens, dass die Toggle-Button assoziiert
und umgekehrt, ob es ein-oder ausgeschaltet ist mit dieser Ansicht.
>> Dies ist eine schöne Möglichkeit für die Einrichtung dieses Ereignis so, dass es sehr fest gebunden ist
zu dieser Ansicht, und so bemerken diese einen mehr.
Ich habe dieses render Methode, und wir müssen nicht durch die Details gehen.
Es ist eine Art ähnlich dem, was wir vorher hatten,
aber feststellen, ich bin nicht Durchschleifen nichts.
Ich bin nicht gedruckt, dass ul-Tag, die Art zu sagen: Ich werde alle Elemente zu drucken ist.
Ich bin die Bereitstellung der Funktionalität zum Rendern dieses eine To-do-Artikel.
Dies ist ein sehr leistungsfähiges Konzept, weil im Grunde
unserer to-do-Liste besteht aus all diesen todos, und wenn wir im Grunde angeben
der Weg zu einer jener todos machen
dann können wir unsere leistungsstarken Backbone per se machen alle todos
durch den Aufruf der render-Methode auf den einzelnen todos.
Dies ist ein Konzept, das nützlich ist hier.
Jetzt eine gute Frage ist, wie wird diese Anwendung ist zusammen?
Denn wir haben die Möglichkeit, eine todo machen,
aber wie bekommen wir die Idee, mehrere todos?
>> Lassen Sie uns werfen Sie einen Blick bei, dass.
Dies ist der letzte Teil.
Beachten wir haben eine To-do-Liste Ansicht hier
und bemerken, dass es auch eine Ansicht.
Und über ein paar Dinge,
diese initialize Methode wird aufgerufen, wenn wir schaffen zum ersten Mal diese to-do-Liste.
Wie Sie sehen können, ist es wie die Schaffung der to-do-Liste und assoziieren sie mit dieser Ansicht.
Und dann habe ich die Funktionen hier also im Grunde, wenn Sie ein Add item-
Dies ist ähnlich dem addItem Methode sahen wir vor-
Ich werde eine neue todo-Objekt erstellen, und ich merke, bin eigentlich Aufruf
diese neue todo Verfahren, so wird dies durch Backbone zur Verfügung gestellt,
und ich kann in meinem Immobilien hier passieren.
Und jetzt jeden todo dass ich create mit diesen erhalten, dass die Funktionalität, die wir zuvor gesehen.
Beachten Sie, ich bin Entrümpelung das Textfeld vor-eine kleine kleine Detail-
und dann bin ich das Hinzufügen dieser Sammlung.
>> Dies scheint fast komisch, weil, bevor wir gerade, dass todos.push tun,
und dann wurden wir getan, und dies mag komplizierter für dieses Projekt,
und Sie können feststellen, dass die Backbone oder auch eckig oder anderen Rahmen
nicht Ihren bestimmtes Projekt, aber ich denke es ist wichtig, darüber nachzudenken,
was bedeutet dies in einem größeren Maßstab für größere Projekte,
denn wenn wir ein größeres Projekt, wo wir vertreten
einige wirklich komplexe Sammlung, etwas tiefer als nur eine To-do-Liste,
sagen wir mal eine Liste mit Freunden oder so ähnlich, könnte dies nützlich sein
weil wir unseren Code in einem wirklich bequem zu organisieren,
in einer Weise, dass es einfacher für jemand anderes würde
wer abholen wollte ein Projekt, um darauf zu bauen.
Sie können sehen, dass dies ein viel Struktur bietet.
Und dann rufe ich machen auf dieser addItem.
Render, wie Sie sehen können, und Sie müssen nicht dieses vollständige Syntax zu erfassen,
aber im Grunde für jedes Modell es geht um die individuelle render-Methode aufrufen.
Das ist eine Art, wo diese herkommt.
Lasst uns einfach festlegen, wie die einzelnen todos machen,
und dann lass uns kleben sie zusammen als Ganzes.
Aber dies stellt einen Weg der Abstraktion,
weil ich die Art, wie ich entscheiden, um die einzelnen todos machen zu ändern,
und ich würde nicht zu einem dieser Code zu ändern.
Das ist irgendwie cool.
>> Hat jemand irgendwelche Fragen über JavaScript-Frameworks?
[Schüler unhörbar Frage]
Oh, sicher, das ist eine große Frage.
Die Frage war, wie habe ich die Rahmenbedingungen enthalten?
Die meisten JavaScript-Frameworks sind im Grunde nur js Dateien
dass Sie an der Spitze des Codes enthalten.
Beachten Sie in dem Kopfteil meines HTML Ich habe all diese Script-Tags,
und das endgültige Skript-Tag ist der Code, den wir geschrieben haben.
Und dann die 3 Rahmen-Codes sind eben auch Skript-Tags.
Ich bin auch davon ab, was heißt ein CDN,
das ermöglicht es mir, es von jemand anderem erhalten an dieser Stelle
aber jeder Rahmen hat dies-man kann so ziemlich finden Sie den Inhalt
für einen bestimmten JavaScript-Bibliothek auf einigen CDN oder so etwas,
und dann können Sie zählen diese Skript-Tags.
Macht das Sinn?
Kühle.
>> Das sind 2 unterschiedliche Ansätze.
Das sind nicht die einzigen Ansätze zur Lösung dieses Problems.
Es gibt viele verschiedene Dinge, die
jemand tun könnte, und es gibt viele Frameworks gibt.
Schräg und Backbone nicht die ganze Geschichte erzählen.
Viel Glück mit Ihrem letzten Projekte, und ich danke Ihnen sehr.
[CS50.TV]