[Powered by Google Translate] [Seminarium] [JavaScript-ramverk: Varför och hur] [Kevin Schmid] [Harvard University] [Detta är CS50.] [CS50.TV] 

Hej, allihopa. Välkommen till JavaScript Frameworks seminariet. Mitt namn är Kevin, och idag ska jag tala om JavaScript-ramverk, och målet med detta seminarium är inte att få dig till, säg, behärska en viss ram i sig men för att ge dig en bred introduktion till ett par ramar och visa varför vi någonsin skulle vilja använda en ram. 

Innan jag gör det ska jag ge en liten bakgrund i JavaScript, och sedan ska vi ta det därifrån. Vi kommer att börja med att genomföra en att göra-lista. Här är vår uppgift lista för idag. Det är ganska roligt. Vi måste genomföra en att göra-lista i JavaScript. Detta är vad det kommer att se ut, så det är vårt första mål. Vi kommer inte att använda en ram för att göra det. Vi kommer att koda JavaScript och få till-göra-lista att arbeta. Sen ska vi förbättra designen utan att använda en ram. Vi kommer att diskutera olika saker vi kan göra med bara JavaScript ensam att göra vår att göra-lista lite mer väl utformade. Sen ska vi kasta i vissa jQuery, och sedan ska vi titta på samma att göra-lista, bara genomföras i olika ramverk, och vi kommer att diskutera  för-och nackdelar på vägen. 

Låt oss börja genomföra som att göra-lista. Låt oss säga att vi gett denna HTML. Jag kommer att göra detta till en lite mindre. Som ni kan se, har jag en liten rubrik som säger Todo och en liten låda där jag kan skriva in en beskrivning av en todo och sedan en ny punkt-knapp, så låt oss försöka att skriva in en ny todo till denna lista. Ge ett JavaScript ramverk seminarium, och jag är för att träffa nya objekt. Jag får detta JavaScript varning som säger genomför mig. Vi har fått för att genomföra det. Låt oss ta en titt på koden för detta, både HTML och JavaScript. Här är vår HTML. Som ni kan se här, är här vår lilla Todos header. Det var att fet sak i toppen, och sedan har vi inmatningsrutan med platshållare, och sedan finns det en viss egenskap hos denna knapp som anropar denna funktion addTodo. Önskar någon att gissa vad som på klick betyda? [Student ohörbart svar] Bra, är det på klick ungefär som en händelse, som att klicka med musen är bara en händelse, och vad vi gör är vi knyta händelsen att klicka på denna knapp för att utföra denna funktion. AddTodo är denna händelsehanterare för att klicka på den knappen. 

Som ni kan se, när jag klickar på knappen Nytt objekt den på klickhändelsen får sparken, och denna funktion anropas. Låt oss titta på funktion. Som ni kan se, här är min JavaScript-kod hittills. Vad jag har på toppen är en global datastruktur för min att göra-lista. Det ser ut som en array. Det är bara en tom array. Och så har jag addTodo funktion som vi såg tidigare, och den enda rad kod i det här varningen. Det varnar genomföra mig, och då har jag 2 uppgifter till hands. Jag måste lägga till todo till att global datastruktur, och då vill jag dra ut att göra-lista. Inget alltför fint ännu, men Javascript du kan vara obekant med, så jag kommer att gå långsamt och granska grunderna i JavaScript på det sättet. 

Låt oss ge det ett skott. Låt oss säga att användaren skriver in något i den här rutan. Jag skrev bara något i här, text. Hur sorterar jag tillträde som text via JavaScript? Kom ihåg att JavaScript är ett av dess grundläggande funktioner som det ger oss detta programmatisk åtkomst till DOM. Det ger oss möjlighet att komma åt element och deras egenskaper av denna faktiska HTML. Det sätt vi gör det med nakna ben JavaScript är att vi faktiskt kan använda en funktion i JavaScript kallas getElementById. Jag vill lagra text som har skrivit det i någon variabel, så jag kommer att säga en ny variabel som heter new_todo, och jag kommer att få det elementet. Detta är en funktion. GetElementById. Och nu får jag ett element med ID, så jag behöver ID för den textruta, så jag har gett det ID new_todo_description. Det är hur jag ska få ett element. Det är mitt argument till denna funktion, för att ange vilka ID för att få. Och så det är ett element i HTML, och det har egenskaper. Du har sett dem. De är attribut. Attributet av textelement som lagrar användarens input kallas värde. Jag sparade värdet av denna textruta nu i denna variabel kallas new_todo. Nu har jag programmatisk åtkomst till denna variabel är vilken typ av kyla för nu vad jag kan göra är att jag kan lägga det till min att göra-lista. 

Det sätt vi skulle göra detta i JavaScript-och oroa dig inte om du är obekant med detta, men bara att gå igenom det är todos.push eftersom det är namnet på min global datastruktur upp här, och jag kommer att driva new_todo. Detta är bra eftersom nu har jag lagt den till min JavaScript representation av det att göra-lista. Men nu hur får jag tillbaka den till HTML? Jag måste hitta ett sätt att sortera om den skjuts upp. Med andra ord, jag har typ av att dra denna. Vad vi ska göra är att vi kommer att dra till-göra-lista. Jag behöver uppdatera andra HTML på denna sida, och som ni kan se, har jag lämnat denna lilla container här, denna delare av sidan vars ID är todos, och jag kommer att sätta till-göra-lista där. Först ska jag rensa ut det eftersom, säger, det var en gammal att göra-lista där. Jag får det elementet med ID igen, och jag åt den inre HTML för det elementet, och jag kommer att klara det. Om vi ​​lämnade denna kod som är, skulle vi se en tom ingenting där, och nu vill jag börja göra min nya att göra-lista. Jag i princip gå att utplåna min att göra-lista. 

Nu det inre HTML insidan av att todos div är helt klar, och nu måste jag börja lägga min lista. Det första jag vill lägga tillbaka är oordnad lista taggen, vilket betecknar i grunden att detta är början på en oordnad lista. Nu för varje element i mina todos array jag vill skriva ut inuti denna HTML. Jag vill lägga det på botten av denna lista. Precis som i C, kan jag använda en for-slinga, och jag kommer att starta i början av min lista vid elementet 0, och jag kommer att gå hela vägen till längden på listan. Vi kan faktiskt få längden på en array i JavaScript med egenskapen length. I grunden ska jag göra något liknande inne i här att skriva ut det elementet. Jag kan återigen komma åt todos div, den inre HTML egenskap för det, och jag kommer att lägga till den här nya listobjekt, och det kommer att vara omgiven av denna li-taggen, och jag kommer att sammanfoga med + operatör, och det är den i: te elementet i mitt todos array, och sedan kommer jag att avsluta den taggen. Nu för varje element vi ska lägga till en ny post i listan. Och så allt vi egentligen behöver göra är att stänga den taggen. Jag behöver bara stänga det oordnad lista taggen. 

Får du en känsla för hur det fungerar? Detta öppnar hela listan. Detta lägger enskilda element från todos listan till listan, och då stänger hela listan, och detta är min addTodo funktion. Jag börjar i grunden genom att få todo från textrutan. Jag vill tillägga att den todos arrayen, och då jag åter göra att göra-lista. Nu kan jag lägga till produkter i min lista. Det är lite spännande eftersom bara några få rader kod Vi har i princip gjort en att-göra-lista där vi kan lägga till objekt. Bra. Det är lite av en grundläggande introduktion till JavaScript. Oroa dig inte för mycket om syntaxen för nu, men tycker om detta konceptuellt. Vi hade några HTML. Vi hade en textruta på sidan som i princip tillät användare att mata in en Att göra-uppgift för att lägga till. Och då vi använde JavaScript för att hämta den todo från denna textruta. Vi lagras det i en JavaScript array, vilket är i princip som vår programmatiska representation av det att göra-lista, och då vi skrivit ut. Detta är todos.js. 

Det är ganska häftigt, men hur kan vi gå vidare med detta? Tja, som ni kan se, är det inte som en komplett att göra-lista. Till exempel kan jag inte markera någon av dessa poster som ofullständig, som om jag ville omprioritera objekt eller ta bort objekt. Det är okej, men vi kan gå vidare med detta. Jag tänker inte prata för mycket om att lägga till extra funktioner, men vi kunde ta det längre. Låt oss tala om att lägga till ytterligare en funktion för att detta att göra-lista, som kommer att kunna kontrollera en individ att göra-uppgift och har att det överstruket, så i princip säga att jag har gjort detta. Låt oss titta på några kod som skulle kunna utföra det. Lägg märke till vad jag har gjort i toppen är jag har lagt en ny global array kallas komplett. Jag princip använder denna för att lagra huruvida punkterna på att-göra-lista är kompletta eller inte. Detta är ett sätt att göra detta. Om jag ser på genomförandet av detta, i displayen, i grunden om jag anger en todo och jag trycker här växlingsknapp den passerar ut, så varje punkt på denna lista har antingen ett komplett eller ofullständiga, och jag använder en annan array för att representera det. 

I grunden för varje todo i att todos array det finns ett objekt i komplett utbud som i grunden visar oavsett om det är komplett eller inte. Jag har haft att göra ganska minimala ändringar till denna kod, så här är vårt addTodo funktion. Lägg märke till att här jag skjuta det på arrayen, och då jag driver en 0 till att fullständig array, i princip parallellt med att nya todo push för att säga Jag lägger denna punkt, och det är kopplat till detta värde, vilket innebär att det är ofullständig. Och sen ska jag rita att göra-lista. Nu märker jag lagt denna drawTodoList funktion. Det tar en hel del av koden som vi hade tidigare, princip rensar ut lådan och sedan drar den nya att göra-lista. Men märker att insidan av detta för slinga vi gör lite mer nu. Vi är i princip kontrollera om posten som motsvarar den i: te todo här är klar, och vi beter annorlunda i dessa två fall. Om det är komplett, vi lägger denna del tagg, vilket är i stort sett hur du kan få det genomslag effekt stryks att göra-lista om det är komplett, och om det inte, vi även inte det. Och så den typen av tar hand om det, 

och det är ett sätt att åstadkomma detta. Och sedan märker när användaren klickar på en av dessa vi växla färdigställande status det. När användaren klickar på, kommer vi vända om det har slutförts eller inte, och sedan ska vi rita om den. Denna typ av arbeten. Vi har dessa funktioner som utför sina egna uppgifter, och det är okej. Finns det något vi kan göra bättre om det här, men? Lägg märke till att vi har dessa två globala arrayer. Om detta var C, och vi hade 2 arrayer den sortens representerade uppgifter som var typ av anknytning på något sätt vad skulle vi använder i C för att kombinera dessa två områden till något som kapslar in båda bitar av information? Någon vill göra ett förslag? [Student ohörbart svar] 

Exakt, så vi kunde använda någon form av struct, och om du tänker tillbaka till, säg, pset 3, minns att vi hade ordbok, och då hade vi huruvida ordet var i ordlistan, och all denna information togs fram insidan av något datastruktur. En sak jag kan göra med den här koden för att undvika att dessa två olika matriser för liknande bitar av information är jag kan kombinera dem till ett JavaScript-objekt. Låt oss ta en titt på det. Meddelande Jag har bara en uppsättning på toppen nu och vad jag har gjort är-och det här är bara JavaScript syntax för slags skapa en bokstavlig version av ett objekt, och märker att det finns två fastigheter, så vi har todo, och den hålls ihop med om det är fullständigt eller ofullständigt. Detta är mycket liknande kod. Vi använder JavaScript-objekt. Denna typ av förbättrar saker. Precis nu, är alla dessa områden av information hålls samman. När vi går att skriva ut det, kan vi komma åt fälten. 

Lägg märke till hur vi gör todos [i]. Komplett istället för att kontrollera hela arrayen separat, och märker när vi vill få den att göra-sträng vi får att göra-fastighet av denna todo, så denna typ av vettigt eftersom varje objekt har dessa inneboende egenskaper om det. Den har en todo, och den har om det är fullständig eller ej. Inte alltför många förändringar det funktionellt, bara lagt lite mer till koden. Detta är en förbättring på vissa fronter, rätt? Jag menar, vi räknade ut designen lite. Nu har vi invänder mot i princip kapsla dessa data. Finns det något mer vi kan göra härifrån i termer av JavaScript? Liksom märker att denna kod här för att få den inre HTML i en div är en liten, antar jag, länge. Det finns document.getElementById ("todos"). InnerHTML. En sak vi kan göra för att göra den här koden ser lite vänligare så jag inte skulle behöva fortsätta rulla åt vänster och höger, fram och tillbaka, är jag kunde använda ett bibliotek som jQuery. 

Låt oss kolla in Seminarium 2, och det är samma kod, men det är gjort med jQuery. Du kanske inte vara alltför bekant med jQuery, men vet bara att jQuery är en slags bibliotek för Javascript som gör det lättare att göra saker som element åt enskilda i DOM. Här istället för att säga document.getElementById ("todos"). InnerHTML Jag kan använda mycket renare sätt jQuery, vilket är bara att använda väljarna. Som ni kan se, har den här koden får en lite renare, mycket liknande funktionellt, men det är tanken. Vi har sett ett par saker hittills, så vi började med bara rå JavaScript genomförande. Vi lagt till nya funktioner och visade hur vi kan förbättra den med precis vad vi har i JavaScript. 

Ser någon några svårigheter med detta motiv? Nämligen, gissa-eller jag inte nödvändigtvis svårigheter men låt oss säga vi inte gör en att göra-lista projektet, och i morgon vi beslutade Vi ville göra en inköpslista eller en inköpslista projekt. Många av dessa funktioner är mycket lika. En hel del av de saker vi vill få ut av JavaScript är mycket vanliga, och detta understryker behovet av någon slags form av vilket gör det lättare att göra. Jag var tvungen att bygga upp allt detta HTML tillträde, allt detta DOM-access, som jag kommer att representera att göra-lista med denna modell. Och märker jag ansvarig eftersom JavaScript utvecklare för att hålla HTML och JavaScript som jag har i synk. Ingenting blir automatiskt att JavaScript representation eller att göra-lista få skjuts ut till HTML. Ingenting verkställas som förutom mig. Jag var tvungen att skriva dragningen att göra-lista funktionen. Och det kanske inte, jag menar, det är rimligt att göra det, men det kan vara jobbigt ibland. Om du har ett större projekt, kan det vara svårt. 

Ramar, ett av syftena med ramar är att förenkla denna process och typ av faktor ut dessa gemensamma-Jag antar att man kan säga-designmönster att människor i allmänhet har något slags sätt att representera data oavsett om det är en vänlista, oavsett om det är kartinformation eller något eller en att göra-lista. Vissa människor har i allmänhet ett sätt att återge information, och de behöver i allmänhet att hålla informationen slags synkroniserad mellan vad användaren ser i någon form av uppfattning, tala i termer av likhet med Model View Controller som du såg i föreläsningen, och sedan den modell, som i detta fall är denna JavaScript array. Ramverk ger oss ett sätt att lösa det problemet. Låt oss nu ta en titt på genomförandet av detta att göra-lista i ett ramverk kallat angularjs. Detta är det. Märker det passar på en bild. Jag behöver inte rulla åt vänster och höger. Det är förmodligen inte en stor anledning att rekommendera att använda en ram, men märker jag åt någonsin enskilda HTML-element här? Kommer jag någonsin in i DOM? Ser du någon document.getElementById eller nåt sånt? Nej, det är borta. 

Kantiga hjälper oss att hålla DOM och vår JavaScript representation av något typ av i synk, så om det inte är i js-filen, om det finns något sätt att programmatiskt komma till allt som HTML-innehåll från JavaScript hur ska vi hålla detta i synk? Om det inte är i den. Js-filen, det har fått vara i HTML, eller hur? Detta är den nya versionen av HTML-filen, och märker att vi har lagt till en hel del här. Lägg märke till att det finns dessa nya attribut som säger ng-klick och ng-repeat. Kantiga s metod för att lösa detta problem med svårigheter i utformningen är att i princip göra HTML mycket mer kraftfull. Kantiga är ett sätt att låta dig göra HTML något mer uttrycksfull. Till exempel kan jag säga att jag kommer att knyta eller binda denna textruta till en variabel i min Kantiga JavaScript-kod. Denna ng-modellen gör just det. Som i princip säger att posten insidan av denna textruta, bara förknippar den med den rörliga new_todo_description inom JavaScript-kod. Det är mycket kraftfullt eftersom jag inte behöver uttryckligen gå till DOM för att få denna information. Jag behöver inte säga document.getElementById. Jag behöver inte använda jQueries som DOM-access. Jag kan associera det med en variabel, och sedan när jag ändrar den variabeln inom JavaScript den hålls i synk med HTML, så som förenklar processen för att behöva gå fram och tillbaka mellan de två. Låter det vettigt? 

Och märker det finns ingen HTML kod. Vi har precis gjort HTML mer kraftfull, och nu, till exempel, kan vi göra saker som detta, gillar när du klickar på den här, kalla denna funktion inom ramen för todos.js, och vi kunde göra det innan, men det finns andra saker, som den här ng-modellen, och märker detta ng-repeat. Vad tror du det betyder? Här är vår oordnad lista från tidigare. Vi har de ul-taggar, men jag gör någonsin att lista insidan av JavaScript-kod? Jag aldrig uttryckligen gör den listan. Hur fungerar det här? Tja, åstadkommer vägen Kantiga detta är detta kallas en repeater. I grund och botten detta säger att jag vill skriva ut den här HTML för varje todo insidan av min todos array. Inuti todos.jr finns en todos array just här, och detta kommer att berätta Kantiga gå igenom den arrayen, och för varje element du ser Jag vill att du ska skriva ut HTML. Detta är typ av awesome eftersom jag bara kan göra detta utan att behöva skriva en for-loop, som för en att göra-lista som var endast 30 rader kod kanske inte den mest fördelaktiga sak, men om du har ett stort projekt, kan detta få mycket bekvämt. 

Detta är en lösning på detta problem, vilket gör HTML mer kraftfull, och som tillåter oss att hålla JavaScript och HTML i synk. Det finns andra möjliga sätt att lösa detta problem, och inte varje ram gör detta. Inte varje ram fungerar längs dessa linjer. Vissa ramar har olika infallsvinklar, och du kanske upptäcker att du gillar att kodning i en ram över den andra. Låt oss titta på en mer. Detta är att göra-lista kodad i ett ramverk kallat Backbone. Jag ska gå igenom det här snabbt. Jag ska börja med HTML innan vi åker dit. En sekund. Från och med den HTML, som du märker, är vår HTML mycket lik till vad det var innan, så inte alltför mycket nytt på den fronten. Men vår js-filen är lite annorlunda. Backbone slags har denna idé, eller bygger på idén att mycket av det vi gör med, säg, vår JavaScript-projekt är att tänka på modeller och samlingar av dessa modeller. Detta kan vara, till exempel, ett foto och samlingar av bilder, eller idén om en vän och samlingar av vänner. Och ofta när vi programmerar JavaScript-program Vi reder av representerar tanken på att ha en samling av vänner något sätt i JavaScript, ger och Backbone oss detta skikt på toppen av JavaScript befintliga arrayer och objekt att göra mer kraftfulla saker med det lättare. 

Här har jag definierat en att göra-modellen, och du behöver inte oroa sig alltför mycket om syntaxen, men märker att det är en av de egenskaper detta? Den har en standard fält. Backbone tillåter mig att specificera redan utanför bat någon ny att göra att jag skapar kommer att ha dessa standardvärden. Nu jag kan skräddarsy detta, men att kunna specificera de förvalda är trevligt, och det är ganska bekvämt eftersom detta inte är något som är som inneboende i JavaScript, och nu jag behöver inte explicit säga att de todos är ofullständiga. Jag kan säga just off the bat att todos kommer att markeras som ofullständig. Lägg märke till vad är då detta? Nu har jag en att göra-lista, och det är en samling. Lägg märke till det område i samband med det, säger modellen todo. Detta är mitt sätt att tala om Backbone som Jag kommer att tänka på en samling av dessa individuella todos. Detta är i grunden den modell för mitt program. Här har jag den här idén om en samling, och i princip de artiklar som ingår i denna samling är alla kommer att vara dessa todos, och det är mycket naturligt i denna mening eftersom jag har Todos, och jag har dem i en samling. 

Låt oss titta på lite mer om detta. Här är en Backbone vy. Den andra saken som Backbone säger är att en hel del av de modeller som du funderar på eller ens samlingar kommer att behöva ha något sätt att visas. Vi måste göra det för att-göra-lista, och skulle det inte vara trevligt om vi kunde erbjuda för varje modell eller umgås med varje modell denna uppfattning som tillåter oss att antar jag ansluta två tillsammans? Medan innan vi var tvungna att använda en for-loop som skulle gå igenom varje todo i vår lista och sedan skriva ut den här Vi kan i princip ansluta den med denna modell. Detta är en att göra-vy. Detta är förenat med att göra-vi funnit tidigare. Nu varje todo är visningsbart eller renderable med detta att göra-vy. Märka något av fälten. Vad tror du att detta tagnamn är, tagname: li? Minns från tidigare när vi ville göra en todo vi skulle behöva explicit ihop våra todos med denna li-taggen. Nu vi säger att när denna todo kommer att leva kommer att vara inne i en li-taggen. Och nu är vi också associera händelser med våra todos. 

Varje todo har denna händelse. Om du klickar på ganska mycket hävarmsknappen, det är vad jag säger det, då i princip markera todo som motsatsen till vad den var innan och sedan åter medför att ansökan. Detta är typ av liknar koden innan. Kommer du ihåg när vi märkt det som antingen motsatta eller- och då vi åter gjort det. Men märker nu denna händelse brukade vara något som var i HTML. Den satt där. Knappen hade en på klick. När du klickar på knappen, det slags gör grejer till inrättas som todo vara ofullständig. Här har vi associerat denna händelse för att klicka som växlingsknapp och vända om det är på eller av med denna uppfattning. 

Detta är ett trevligt sätt att sätta upp denna händelse så att det är mycket hårt bundna till denna uppfattning, och så märker detta mer. Jag har här framför metod, och vi behöver inte gå igenom detaljerna. Det är lite liknar det vi hade tidigare, men märker jag inte loopa igenom någonting. Jag tänker inte skriva att ul tagg som är typ att säga jag ska skriva ut alla element. Jag ger funktionalitet för att göra detta en Att göra-uppgift. Detta är ett mycket kraftfullt koncept eftersom i princip vår att göra-lista består av alla dessa todos, och om vi kan i princip ange vägen för att göra en av dessa todos då kan vi ha våra kraftfulla backbone i sig göra alla de todos genom att anropa render metoden på enskilda todos. Detta är ett koncept som är användbart här. Nu en bra fråga att ställa är hur detta program sätts ihop? Eftersom vi har möjlighet att göra en todo, men hur får vi idén om flera todos? 

Låt oss ta en titt på det. Detta är den sista delen. Kallelse har vi en att göra-lista vy här, och märker att det är också en tanke. Och att gå över ett par saker, denna initialize metod kommer att kallas när vi först skapa denna att göra-lista. Som ni ser, det är som att skapa att-göra-listan och associera den med den här vyn. Och sedan jag lagt funktionerna här så i princip när du lägger till en post- detta liknar addItem metod som vi såg före- Jag ska skapa en ny todo objekt, och märker jag faktiskt ringer denna nya todo metod, så detta tillhandahålls av ryggraden, och jag kan passera i mina fastigheter här. Och nu varje todo som jag skapar med detta kommer att få den funktionalitet som vi såg tidigare. Märker jag rensa ut textrutan innan-en liten liten detalj- och sen ska jag lägga den här samlingen. 

Det verkar nästan konstigt eftersom innan vi just haft att göra det todos.push, och sedan vi hade gjort, och detta kan verka mer komplicerat för detta specifika projekt, och du kanske upptäcker att Backbone eller ens Kantiga eller någon annan ram passar inte just ditt projekt, men jag tror det är viktigt att tänka på vad detta innebär på en större skala för större projekt, eftersom om vi hade ett större projekt där vi representerar några riktigt komplex samling, något djupare än bara en att-göra-lista, låt oss säga en vänner lista eller något liknande, kan detta komma till hands eftersom vi skulle kunna organisera vår kod i ett riktigt bekvämt sätt, på ett sätt som skulle göra det lättare för någon annan som ville plocka upp ett projekt för att bygga vidare på. Du kan se att detta ger en hel del struktur. Och då jag ringer framföra på denna addItem. Render, som ni kan se, och du behöver inte förstå detta fullt syntax, men i grunden för varje modell det kommer att kalla den enskilde render metoden. Det blir liksom var detta kommer ifrån. Låt oss bara ange hur att göra de individuella todos, och sedan ska vi limma ihop dem som en helhet. Men detta är ett sätt av abstraktion, eftersom jag kunde ändra hur jag väljer att göra de individuella todos, och jag skulle inte behöva ändra någon av denna kod. Det är ganska coolt. 

Har någon några frågor om JavaScript-ramverk? [Student ohörbart fråga] Visst, det är en bra fråga. Frågan var hur jag inkluderar de ramar? De flesta JavaScript-ramverk finns i princip bara JS-filer som du kan inkludera på toppen av din kod. Tillkännagivande i huvudet delen av min HTML jag har alla dessa skripttaggarna, och den slutliga skripttagg är den kod som vi har skrivit. Och sedan de 3 ramarna koderna är bara också script-taggar. Jag inklusive dem från vad som kallas ett CDN, vilket gör att jag kan få det från någon annan på denna punkt men varje ram har här-du kan ganska mycket hitta innehållet för en viss JavaScript-bibliotek som finns på vissa CDN eller något liknande, och sedan kan du inkludera dessa skripttaggarna. Låter det vettigt? Cool. 

De är två olika metoder. De är inte de enda strategier för att lösa detta problem. Det finns många olika saker som någon kan göra, och det finns många ramar där ute. Kantiga och Backbone inte berätta hela historien. Lycka till med din slutliga projekt, och tack så mycket. [CS50.TV]