[Powered by Google Translate] [Seminar] [Javascript Frameworks: hvorfor og hvordan?] [Kevin Schmid] [Harvard University] [Dette er CS50.] [CS50.TV] 

Hej, alle sammen. Velkommen til JavaScript Frameworks seminaret. Mit navn er Kevin, og i dag vil jeg tale om JavaScript rammer, og målet med dette seminar er ikke at få dig til at sige, beherske en bestemt ramme per se men for at give dig en bred introduktion til et par af rammer og vise, hvorfor vi nogensinde ville ønsker at bruge en ramme. 

Før jeg gør det, vil jeg give lidt baggrund i JavaScript, og så vil vi tage den derfra. Vi kommer til at starte ved at gennemføre en to-do liste. Her er vores opgaveliste for i dag. Det er lidt sjovt. Vi er nødt til at gennemføre en to-do liste i JavaScript. Dette er, hvad det kommer til at se ud, så det er vores første mål. Vi kommer ikke til at bruge en ramme at gøre det. Vi kommer til at kode JavaScript og få to-do liste for at arbejde. Så vi kommer til at forbedre design uden at bruge en ramme. Vi kommer til at diskutere forskellige ting, vi kan gøre med bare JavaScript alene at gøre vores to-do liste lidt mere godt designet. Så vi kommer til at smide nogle jQuery, og så vi kommer til at se på den samme to-do liste, netop gennemført i forskellige rammer, og vi vil diskutere  fordele og ulemper undervejs. 

Lad os begynde at gennemføre, at to-do liste. Lad os sige, vi er givet denne HTML. Jeg har tænkt mig at gøre dette til en lidt mindre. Som du kan se, jeg har en lille overskrift, der siger Todo og en lille boks, hvor jeg kan indtaste en beskrivelse af en todo og derefter et nyt element knap, så lad os prøve at indtaste en ny todo til denne liste. Giv en JavaScript rammer seminar, og jeg er at ramme nyt element. Jeg får denne JavaScript-advarsel, der siger gennemfører mig. Vi har fået at gennemføre det. Lad os se koden til dette, både HTML og JavaScript. Her er vores HTML. Som du kan se her, her er vores lille Todos header. Det var at fed ting på toppen, og så har vi input kassen med pladsholder, og så er der en vis egenskab ved denne knap, der kalder denne funktion addtodo. Er der nogen ønsker at gætte, hvad der på klik ensbetydende? [Student uhørlig respons] Godt, on click er lidt ligesom en begivenhed, Ligesom at klikke med musen er bare en begivenhed, og hvad vi laver er vi binde tilfælde af at klikke på denne knap for at udføre denne funktion. Addtodo er denne event handler for at klikke på denne knap. 

Som du kan se, når jeg klikker på knappen Nyt element on klik begivenheden bliver fyret, og denne funktion bliver kaldt. Lad os se på funktionen. Som du kan se, her er min JavaScript-kode hidtil. Hvad jeg har i toppen er en global datastruktur for min to-do liste. Det ligner et array. Det er bare en tom array. Og så har jeg den addtodo funktion, som vi så tidligere, og den eneste linje kode i der er denne alarm. Det advarer implementere mig, og så jeg har 2 opgaver på hånden. Jeg er nødt til at tilføje todo til, at den globale datastruktur, og så vil jeg trække ud to-do liste. Intet også lyst lige endnu, men JavaScript kan du være bekendt med, så jeg har tænkt mig at gå langsomt og gennemgå de grundlæggende elementer i JavaScript på den måde. 

Lad os give det en chance. Lad os sige at brugeren indtaster noget i dette felt. Jeg lige har skrevet noget herinde tekst. Hvordan sorterer jeg adgang teksten via JavaScript? Husk, at JavaScript, en af ​​dens grundlæggende funktioner er, at det giver os denne programmeringsmæssig adgang til DOM. Det giver os mulighed for at få adgang elementer og deres egenskaber i denne egentlige HTML. Den måde, vi gør det med skelettet JavaScript er, at vi rent faktisk kan bruge en funktion i JavaScript kaldte getElementByID. Jeg ønsker at gemme teksten, der er skrevet der på en eller anden variabel så jeg har tænkt mig at sige en ny variabel kaldet new_todo, og jeg har tænkt mig at få dette element. Dette er en funktion,. GetElementByID. Og nu får jeg et element af id, så jeg har brug for ID af denne tekstboks så jeg har givet det id new_todo_description. Det er sådan jeg har tænkt mig at få et element. Det er mit argument til denne funktion, for at angive, hvilke id for at få. Og så det er et element i HTML, og det har egenskaber. Du har set disse. De er attributter. Den egenskab af teksten element, der gemmer brugerens input kaldes værdi. Jeg gemte værdien af ​​dette tekstboksen nu i denne variabel kaldet new_todo. Nu har jeg programmeringsmæssig adgang til denne variabel, som er slags cool fordi nu, hvad jeg kan gøre, er jeg kan tilføje det til min to-do liste. 

Den måde, vi ville gøre dette i JavaScript-og ikke bekymre dig, hvis du er bekendt med dette, men bare at gå gennem det er todos.push fordi det er navnet på min globale datastruktur heroppe, og jeg har tænkt mig at skubbe new_todo. Det er fantastisk, fordi nu har jeg tilføjet det til min JavaScript repræsentation af denne to-do liste. Men nu, hvordan får jeg det tilbage til HTML? Jeg er nødt til at finde en måde at sortere i skubbe den tilbage. Med andre ord, slags jeg nødt til at trække dette. Hvad vi vil gøre, er at vi kommer til at tegne to-do liste. Jeg har brug for at opdatere andre HTML på den side, og som du kan se, har jeg forlod denne lille beholder her denne divider på siden, hvis id er todos, og jeg har tænkt mig at sætte to-do liste der. Først vil jeg klare det ud, fordi, siger, der var en gammel to-do liste der. Jeg får dette element ved id igen, og jeg adgang til inderste HTML af dette element, og jeg har tænkt mig at rydde den. Hvis vi forlod denne kode som er, ville vi se en tom intet der, og nu vil jeg begynde at gøre min nye to-do liste. Jeg dybest set kommer til at udslette min to-do liste. 

Nu indre HTML indersiden af ​​det todos div er fuldstændig klar, og nu har jeg brug for at begynde at tilføje min liste. Den første ting, jeg ønsker at tilføje tilbage er uordnet liste tag, som dybest set betegner, at dette er starten på en uordnet liste. Nu til hvert element i min todos vifte Jeg ønsker at printe den ud inde i denne HTML. Jeg vil føje den til bunden af ​​listen. Ligesom i C, kan jeg bruge en for-løkke, og jeg har tænkt mig at starte i begyndelsen af ​​min liste på elementet 0, og jeg har tænkt mig at gå hele vejen til længden af ​​listen. Vi kan faktisk få længden af ​​et array i JavaScript ved hjælp af længden ejendom. Dybest set jeg tænkt mig at gøre noget meget lignende inde i her at udskrive dette element. Jeg kan igen få adgang til todos div, den indre HTML egenskab af det, og jeg har tænkt mig at tilføje denne nye liste element, og der kommer til at være omgivet af denne li-tag, og jeg har tænkt mig at sammenkæde med + operatør, og det er den i'te element af min todos array, og så jeg har tænkt mig at lukke dette mærke. Nu til hvert element vil vi tilføje en ny post på listen. Og så har vi virkelig brug for at gøre, er at lukke det mærke. Jeg har bare brug for at lukke det uordnet liste tag. 

Får du en fornemmelse for, hvordan det virker? Dette åbner for hele listen. Dette tilføjer enkelte elementer fra todos listen til listen, og så der lukker hele listen, og dette er mit addtodo funktion. Jeg dybest set begynde med at få todo fra tekstfeltet. Jeg tilføje, at todos array, og så vil jeg igen gøre to-do liste. Nu kan jeg føje elementer til min liste. Det er lidt spændende, fordi på blot et par linjer kode vi dybest set lavet en to-do liste, hvor vi kan tilføje elementer. Store. Det er sådan en grundlæggende introduktion til JavaScript. Må ikke bekymre dig for meget om syntaksen for nu, men tænk over det konceptuelt. Vi havde nogle HTML. Vi havde en tekstboks på siden, der dybest set tillod brugerne at indtaste en huskeliste til at tilføje. Og så har vi brugt JavaScript til at hente denne todo fra tekstfeltet. Vi gemt at inde i en JavaScript-array, som er dybest set som vores programmatiske repræsentation af denne to-do liste, og så vi udskrives det. Dette er todos.js. 

Det er lidt cool, men hvordan kan vi tage dette yderligere? Nå, som du kan se, er dette ikke som en komplet to-do liste. For eksempel kan jeg ikke markere nogen af ​​disse elementer som ufuldstændige, gerne, hvis jeg ønskede at omprioritere de emner eller slette elementer. Det er okay, men vi kan tage dette yderligere. Jeg vil ikke tale for meget om at tilføje ekstra funktioner, men vi kunne tage det yderligere. Lad os tale om at tilføje endnu en feature til denne to-do liste, som vil være at være i stand til at kontrollere en person til gøremålspunkt og har det udstreges så dybest set siger jeg har gjort dette. Lad os se på nogle kode, der kunne opnå dette. Læg mærke til, hvad jeg har gjort i toppen er jeg har tilføjet en ny global matrix kaldes fuldstændig. Jeg dybest set bruger denne til at gemme, om punkterne på to-do liste er fuldstændige eller ej. Dette er én måde at gøre dette. Hvis jeg ser på gennemførelsen af ​​denne, viser, dybest set, hvis jeg indtaster en todo, og jeg trykker på denne knap den krydser ud, så hvert element på denne liste har enten en komplet eller ufuldstændige tilstand, og jeg bruger en anden matrix til at repræsentere det. 

Dybest set for hver todo i at todos matrix der er et element i den samlede vifte, der dybest set viser om det er fuldstændige eller ej. Jeg har måttet foretage temmelig minimale ændringer i denne kode, så her er vores addtodo funktion. Bemærk at her er jeg skubber det på array, og så er jeg skubber en 0 til at fuldstændig array, dybest set parallelt med nye todo skub til at sige Jeg tilføjer dette punkt, og det er kombineret med denne værdi, hvilket betyder, at det er ufuldstændig. Og så er jeg gentegning to-do liste. Nu opdager jeg har tilføjet denne drawTodoList funktion. Det tager en masse af koden vi havde før, dybest rydder ud af boksen, og derefter trækker den nye to-do liste. Men bemærk at der inde i denne for-løkke vi laver lidt mere nu. Vi dybest set at kontrollere, om det element, der svarer til den i'te todo her er færdig, og vi opfører forskelligt i disse 2 forhold. Hvis det er komplet, vi tilføjer denne del tag, som er dybest set den måde, du kan få det strejke gennem effekt krydser ud to-do liste, hvis det er færdig, og hvis det ikke er, er vi ikke inklusive det. Og så den slags tager sig af det, 

og det er en måde at opnå dette. Og så mærke til, når brugeren klikker på en af ​​disse vi skifte færdiggørelsen status af det. Når brugeren klikker, vil vi vende om det er afsluttet eller ej, og så vil vi gentegne det. Denne form for værker. Vi har disse funktioner, der udfører deres egne opgaver, og dette er okay. Er der noget vi kan gøre bedre om dette, selv? Bemærk vi har disse 2 globale arrays. Hvis dette var C, og vi havde 2 arrays den slags repræsenterede data, der blev slags relateret på en eller anden måde hvad ville vi bruger i C til at kombinere disse 2 områder ind i noget, der indkapsler begge stykker af oplysninger? Nogen ønsker at komme med et forslag? [Student uhørlig respons] 

Præcis, så vi kunne bruge nogle form for struct, og hvis du tænker tilbage på, siger, Pset 3, husker, at vi havde ordbog, og så havde vi om ordet var i ordbogen, og alle disse oplysninger blev sat sammen indersiden af ​​nogle datastruktur. En ting jeg kan gøre med denne kode for at undgå at disse 2 forskellige arrays for lignende stykker af information er jeg kan kombinere dem i en JavaScript objekt. Lad os tage et kig på det. Bemærk, at jeg kun har én række øverst nu og hvad jeg har gjort, er, og dette er blot JavaScript syntaks for slags skabe en bogstavelig version af et objekt, og læg mærke til der er 2 ejendomme, så vi har den todo, og det er holdt sammen med om det er fuldstændig eller ufuldstændig. Dette er meget lignende kode. Vi bruger JavaScript objekter. Denne form for forbedrer man ting. Ligesom nu, er alle disse områder relaterede oplysninger holdes sammen. Når vi går til printe den ud, kan vi få adgang til markerne. 

Læg mærke til hvordan vi laver todos [i]. Komplet stedet for at kontrollere den fuldstændige række separat, og læg mærke til, når vi ønsker at få den to-do strengen vi får to-do ejendom af denne todo, denne form for så giver mening, fordi hvert element har disse iboende egenskaber om det. Det har en todo, og det har, om det er fuldstændige eller ej. Ikke alt for mange forandringer der funktionelt, lige tilføjet nogle flere til koden. Dette er en forbedring på nogle fronter, right? Jeg mener, vi indregnet ud design lidt. Nu har vi objekter til stort set indkapsler disse data. Er der noget mere vi kunne gøre fra her i form af JavaScript? Ligesom varsel, at denne kode lige her for at få den indre HTML af en div er en lille, tror jeg, længe. Der er document.getElementById ("todos"). InnerHTML. Én ting, vi kunne gøre for at gøre denne kode ser lidt venligere så jeg ville ikke have at holde rulle til venstre og højre, og tilbage, er jeg kunne bruge et bibliotek som jQuery. 

Lad os se Seminar 2, og det er den samme kode, men det er gjort med jQuery. Du må ikke være alt for bekendt med jQuery, men bare vide, at jQuery er en slags bibliotek for JavaScript der gør det lettere at gøre ting som adgang enkelte elementer i DOM. Her i stedet for at sige document.getElementById ("todos"). InnerHTML Jeg kan bruge meget renere måde jQuery, som er lige til at bruge selektorer. Som du kan se, har denne kode få lidt renere, meget lignende funktionelt, men det er tanken. Vi har set et par ting hidtil, så vi startede med blot rå JavaScript implementering. Vi har tilføjet nye funktioner og viste hvordan vi kan forbedre det med netop hvad vi har i JavaScript. 

Er der nogen se nogen problemer med dette design? Nemlig, jeg gætte-eller ikke nødvendigvis vanskeligheder, men lad os sige vi ikke gør en to-do liste projektet og i morgen besluttede vi Vi ønskede at lave en indkøbsliste eller en indkøbsliste projekt. En masse af disse funktioner er meget ens. En masse af de ting, vi ønsker at komme ud af JavaScript er meget almindelige, og det understreger behovet for en slags måde gør det lettere at gøre. Jeg havde til at opbygge alt dette HTML adgang alt dette DOM adgang, som jeg har tænkt mig at repræsentere to-do liste med denne model. Og mærke jeg er ansvarlig for som JavaScript-udvikler for at holde HTML og JavaScript, som jeg har i sync. Intet automatisk lavet, at JavaScript repræsentation eller to-do liste bliver skubbet ud til HTML. Intet håndhæves, at bortset fra mig. Jeg havde til at skrive lodtrækningen to-do liste funktion. Og det kan ikke være, jeg mener, det er rimeligt at gøre det, men det kan være trættende til tider. Hvis du har et større projekt, kunne det være vanskeligt. 

Rammer, en af ​​formålene med rammer er at forenkle denne proces og sortering af faktor ud disse fælles-I gætte, du kunne sige-design mønstre at folk generelt har en form for måde at repræsentere data, uanset om det er en venneliste, uanset om det er kort information eller noget eller en to-do liste. Nogle mennesker har generelt en måde at repræsentere information, og de generelt har brug for at holde denne information slags i sync mellem hvad brugeren ser i en slags visning, taler i form af som model view controller, som du så i foredrag, og derefter den model, som i dette tilfælde er denne JavaScript array. Rammer giver os en måde at løse dette problem. Lad os nu tage et kig på gennemførelsen af ​​denne to-do liste i en ramme, der kaldes angularjs. Her er det. Bemærk det passer på et dias. Jeg behøver ikke at rulle til venstre og højre. Det er sandsynligvis ikke en stor grund til at anbefale at bruge en ramme, men varsel jeg nogensinde adgang individuelle HTML-elementer her? Er jeg nogensinde gå ind i DOM? Kan du se nogen document.getElementById eller sådan noget? Nej, det er gået. 

Kantet hjælper os med at holde DOM og vores JavaScript repræsentation af noget slags i sync, så hvis det ikke er i js filen, hvis der er nogen måde at programmatisk komme til alt, HTML-indhold fra JavaScript hvordan skal vi holde dette i sync? Hvis det ikke er i. Js filen, er det nødt til at være i HTML, right? Dette er den nye version af HTML-filen, og mærke har vi tilføjet en masse her. Bemærk at der er disse nye egenskaber, der siger ng-klik og ng-repeat. Kantet tilgang til at løse dette problem med vanskeligheder i design er at dybest set gør HTML meget mere kraftfuld. Kantet er en måde at tillade dig at gøre HTML noget mere udtryksfuld. For eksempel kan jeg sige, at jeg har tænkt mig at binde eller binde dette tekstfelt til en variabel i min Vinkel JavaScript-kode. Denne ng-model gør netop det. Der dybest set siger, at elementet inde i dette tekstfelt, bare forbinder det med den variable new_todo_description i JavaScript-kode. Det er meget kraftig, fordi jeg ikke behøver at eksplicit at gå til DOM for at få disse oplysninger. Jeg behøver ikke at sige document.getElementById. Jeg behøver ikke at bruge jQueries som DOM adgang. Jeg kan knytte det til en variabel, og så når jeg ændre denne variabel inden JavaScript det er holdt i sync med HTML, så der forenkler processen med at skulle gå frem og tilbage mellem de to. Giver det mening? 

Og mærke der er ingen HTML adgangskode. Vi har lige lavet HTML mere kraftfuld, og nu, for eksempel, kan vi gøre ting som dette, ligesom når du klikker på denne, kalder denne funktion inden for rammerne af todos.js, og vi kunne gøre det før, men der er andre ting, som denne ng-model, og bemærke dette ng-repeat. Hvad tror du det betyder? Her er vores uordnet liste fra før. Vi har de ul tags, men jeg nogensinde gør denne liste inde i JavaScript-koden? Jeg er ikke altid eksplicit gør denne liste. Hvordan fungerer det? Nå, den måde Kantet opnår dette er dette kaldes en repeater. Dybest set siger, at jeg ønsker at udskrive denne HTML for hver todo indersiden af ​​mine todos array. Inde i todos.jr der er en todos vifte lige her, og dette vil fortælle Kantet gå gennem denne array, og for hvert element, du ser Jeg vil have dig til at udskrive denne HTML. Det er lidt awesome, fordi jeg bare kan gøre dette uden at skulle skrive en for-løkke, som for en to-do liste, der var kun 30 linjer kode kan ikke være den mest gavnlige ting, men hvis du har et stort projekt, kan dette få meget praktisk. 

Dette er en løsning på dette problem, hvilket gør HTML mere kraftfuld, og det gør det muligt for os at holde JavaScript og HTML i sync. Der er andre mulige måder at løse dette problem, og ikke alle rammer gør dette. Ikke alle rammer arbejder langs disse linjer. Nogle rammer har forskellige tilgange, og du kan opleve, at du nyder at kodning i én ramme over den anden. Lad os se på en mere. Dette er den to-do liste kodet op i en ramme, der kaldes Backbone. Jeg har tænkt mig at gå gennem denne hurtigt. Jeg vil starte med HTML, før vi går der. Et sekund. Startende med HTML, som du bemærker, er vores HTML er meget ens til, hvad det var før, så ikke alt for meget nyt på den front. Men vores js fil er lidt anderledes. Backbone slags har denne idé, eller bygger på ideen at en masse af, hvad vi gør med, siger, vores JavaScript-projekter er tænker modeller og samlinger af disse modeller. Dette kunne for eksempel være, et foto og samlinger af fotos, eller tanken om en ven og samlinger venner. Og ofte når vi programmering JavaScript applikationer vi sortere i repræsenterer tanken om at have en samling af venner en eller anden måde i JavaScript, og Backbone giver os dette lag på toppen af ​​JavaScripts eksisterende arrays og objekter at gøre mere kraftfulde ting med, at mere nemt. 

Her har jeg defineret en to-do-modellen, og du behøver ikke at bekymre sig for meget om syntaks men bemærke, at hvad der er en af ​​de egenskaber af dette? Det har en standard felt. Backbone tillader mig at præcisere allerede off the bat enhver ny to-gøre, at jeg opretter vil have disse standarder. Nu kan jeg tilpasse dette, men at være i stand til at angive standardindstillingerne er rart, og det er lidt praktisk, fordi det ikke er noget, der er ligesom iboende i JavaScript, og nu har jeg ikke eksplicit sige, at todos er ufuldstændige. Jeg kan sige ret off the bat, at todos vil blive markeret som ufuldstændig. Bemærk så hvad er det? Nu har jeg en to-do liste, og det er en samling. Bemærk feltet er forbundet med, der siger model todo. Dette er min måde at fortælle Backbone, at Jeg har tænkt mig til at tænke på en samling af disse individuelle todos. Dette er dybest set den model for mit program. Her har jeg denne idé om en samling, og dybest set de elementer, der er indeholdt i denne samling er alle kommer til at være disse todos, og det er meget naturligt i denne forstand fordi jeg har todos, og jeg har dem i en samling. 

Lad os se på en lidt mere af dette. Her er en Backbone udsigt. Den anden ting, Backbone siger, er, at en masse af de modeller, som du tænker på eller endda samlinger vil få brug for at have en eller anden måde for at blive vist. Vi er nødt til at gøre, at to-do liste, og ville det ikke være rart, hvis vi kunne give for hver enkelt model eller forbinder med hver model dette synspunkt der tillader os at jeg gætte forbinde de to sammen? Mens før vi måtte bruge en for-løkke, der ville køre igennem hver todo på vores liste, og derefter printe det ud her Vi kan stort set forbinde det med denne model. Dette er en to-do visning. Dette er forbundet med todo vi fundet tidligere. Nu hver todo er Visbar eller renderable af dette gøremål visning. Bemærke nogle af felterne. Hvad tror du, det tagname er tagname: li? Husker fra før, når vi ønskede at gengive en todo vi skulle eksplicit parre vores todos med li-tag. Nu er vi siger, at hvor det todo kommer til at leve kommer til at være inde i en li-tag. Og nu skal vi også associere begivenheder med vores todos. 

Hver todo har denne ene begivenhed. Hvis du klikker på stort set den knap, det er hvad jeg siger der, så dybest set markere todo som det modsatte af, hvad den var før og derefter igen at anvendelsen. Det er slags ligner koden før. Husk, når vi markeret den som enten det modsatte eller- og så vi re-gjort det. Men bemærk nu denne begivenhed plejede at være noget, der var i HTML. Det sad der. Knappen havde en på klik. Når du klikker på knappen, den slags gør stuff oprettet, der todo at være ufuldstændig. Her har vi tilknyttet denne begivenhed for at klikke denne knap og vende om det er tændt eller slukket i dette synspunkt. 

Dette er en dejlig måde at opsætte denne begivenhed, så det er meget tæt bundet dette synspunkt, og derfor bemærke dette en mere. Jeg har denne render metode, og vi behøver ikke at gå gennem detaljerne. Det er slags ligner, hvad vi havde før, men bemærker jeg ikke looping gennem noget. Jeg udskriver ikke, at ul-tag, der er slags sige jeg har tænkt mig at udskrive alle elementerne. Jeg leverer den funktionalitet for at gøre denne ene to-do element. Dette er et meget stærkt koncept, fordi stort set vores to-do liste består af alle disse todos, og hvis vi dybest set kan angive den måde at gøre en af ​​dem todos så kan vi have vores stærke rygrad per se gør alle todos ved at kalde render metoden på de enkelte todos. Dette er et koncept, der er nyttig her. Nu er et godt spørgsmål at stille er, hvordan dette program bliver sat sammen? Fordi vi har evnen til at gengive en todo, men hvordan får vi idéen om flere todos? 

Lad os tage et kig på det. Dette er den sidste del. Bemærk vi har en to-do liste view her og mærke det er også en visning. Og at gå over et par ting, denne initialisering metode vil blive kaldt, når vi først skabe denne to-do liste. Som du kan se, er det som at skabe to-do liste, og forbinder det med dette synspunkt. Og så tilføjede jeg de funktioner her, så dybest set, når du tilføjer et emne- Dette svarer til den AddItem metode, vi så før- Jeg har tænkt mig at oprette et nyt todo objekt, og læg mærke til jeg er faktisk ringer denne nye todo metode, så dette er leveret af Backbone, og jeg kan passere i mine ejendomme her. Og nu hver todo, at jeg opretter ved hjælp dette vil få denne funktionalitet, som vi oplevede før. Bemærk, at jeg har tænkt rydde ud tekstfeltet før-en lille lille detalje- og så er jeg tilføje denne samling. 

Denne næsten synes mærkeligt fordi før havde vi blot at gøre det todos.push, og så blev vi gjort, og det kan virke mere kompliceret for dette projekt, og du kan opleve, at Backbone eller endda Kantet eller anden ramme ikke passer netop dit projekt, men jeg tror, ​​det er vigtigt at tænke over hvad det betyder på en større skala til større projekter, fordi hvis vi havde et større projekt, hvor vi repræsenterer nogle virkelig kompliceret indsamling, noget dybere end blot en to-do liste, lad os sige en venneliste eller sådan noget, kan det komme i handy fordi vi kunne organisere vores kode i en virkelig praktisk måde på en måde, der ville gøre det lettere for en anden der ønskede at afhente et projekt at bygge videre på. Du kan se, at dette giver en masse struktur. Og så jeg ringer gengive på denne AddItem. Render, som du kan se, og du behøver ikke at forstå denne fulde syntaks, men dybest set for hver model det kommer til at kalde den enkelte render metoden. Det er slags, hvor det kommer fra. Lad os bare angive, hvordan at gøre de enkelte todos, og lad os lime dem sammen som en helhed. Men dette giver mulighed for abstraktion, fordi jeg kunne ændre den måde, jeg beslutter at gøre de enkelte todos, og jeg ville ikke have at ændre nogle af denne kode. Det er lidt cool. 

Er der nogen har nogen spørgsmål om JavaScript rammer? [Student uhørlig spørgsmål] Åh, sikker, det er et godt spørgsmål. Spørgsmålet var, hvordan jeg omfatter rammer? De fleste JavaScript rammer er egentlig bare js-filer som du kan medtage i toppen af ​​din kode. Bemærk i hoveddelen af ​​min HTML jeg har alle disse scripttags, og den endelige script-tag er den kode, som vi har skrevet. Og så de 3 rammer koder er bare også scripttags. Jeg inklusive dem fra hvad der kaldes en CDN, som tillader mig at få det fra en anden på dette tidspunkt men hver ramme har det-kan du stort set finde det indhold for en bestemt JavaScript-bibliotek til rådighed på nogle CDN eller noget lignende, og derefter kan du inkludere disse scripttags. Giver det mening? Cool. 

Det er 2 forskellige tilgange. De er ikke de eneste metoder til at løse dette problem. Der er mange forskellige ting, nogen kunne gøre, og der er mange rammer derude. Kantet og Backbone fortæller ikke hele historien. Held og lykke med dine afgangsprojekter, og tak meget. [CS50.TV]