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

Hei, alle sammen. Velkommen til JavaScript Frameworks seminar. Mitt navn er Kevin, og i dag skal jeg snakke om JavaScript-rammeverk, og målet med dette seminaret er ikke å få deg til, si, mestre en bestemt ramme per se men å gi deg en bred innføring i et par rammer og vise hvorfor vi ville ønske å bruke et rammeverk. 

Før jeg gjør det, vil jeg gi litt bakgrunn i JavaScript, og så får vi ta det derfra. Vi kommer til å starte med å gjennomføre en to-do liste. Her er vår oppgave liste for i dag. Det er litt morsomt. Vi må gjennomføre en to-do liste i JavaScript. Dette er hva det kommer til å se ut, så det er vår første målet. Vi kommer ikke til å bruke et rammeverk for å gjøre det. Vi kommer til å kode JavaScript og få to-do liste for å fungere. Så vi kommer til å forbedre design uten å bruke et rammeverk. Vi kommer til å diskutere ulike ting vi kan gjøre med akkurat JavaScript alene å gjøre vår liste over gjøremål litt mer godt utformet. Så vi kommer til å kaste i noen jQuery, og da skal vi se på det samme to-do liste, bare implementert i ulike rammer, og vi vil diskutere  fordeler og ulemper underveis. 

La oss begynne å implementere at to-do liste. La oss si at vi fikk denne HTML. Jeg kommer til å gjøre dette til en litt mindre. Som du ser, har jeg en liten header som sier Todo og en liten boks hvor jeg kan skrive inn en beskrivelse av en todo og deretter et nytt element knapp, så la oss prøve å angi en ny todo til denne listen. Gi en JavaScript rammeverk seminar, og jeg er å treffe nytt element. Jeg får denne JavaScript advarsel som sier implementere meg. Vi er nødt til å gjennomføre det. La oss sjekke ut koden for dette, både HTML og JavaScript. Her er vår HTML. Som du kan se her, her er vår lille Todos spissen. Det var at fet ting på toppen, og så har vi boksen med plassholder, og så er det en viss egenskap av denne knappen som kaller denne funksjonen addTodo. Vil noen å gjette hva som på klikk er betegner? [Student hørbar respons] Bra, er det på klikk liksom som en hendelse, som å klikke på musen er bare en hendelse, og hva vi gjør er vi knytte Ved å klikke på denne knappen for å utføre denne funksjonen. AddTodo er denne hendelsen behandleren for å klikke på den knappen. 

Som du ser, når jeg klikker det nye elementet knappen den på klikkhendelsen får sparken, og denne funksjonen blir kalt. La oss se på funksjonen. Som du kan se, her er min JavaScript-kode så langt. Hva jeg har på toppen er en global datastruktur for min to-do liste. Det ser ut som en matrise. Det er bare en tom array. Og så har jeg addTodo funksjon som vi så tidligere, og den eneste linje med kode i det er dette varselet. Det varsler implementere meg, og da har jeg to oppgavene. Jeg må legge til todo til at den globale data struktur, og da vil jeg trekke ut to-do liste. Ingenting fancy ennå, men JavaScript du kan bli kjent med, så jeg kommer til å gå sakte og gjennomgå det grunnleggende av JavaScript i den måten. 

La oss gi dette en sjanse. La oss si at brukeren skriver inn noe i denne boksen. Jeg bare skrev noe her, teksten. Hvordan sorterer jeg tilgang som tekst via JavaScript? Husk at JavaScript er en av de grunnleggende funksjonene som det gir oss dette programmatisk tilgang til DOM. Det tillater oss å få tilgang til elementene og deres egenskaper i denne selve HTML. Måten vi gjør det med bare bones JavaScript er vi faktisk kan bruke en funksjon i JavaScript kalt getElementByID. Jeg ønsker å lagre teksten som er skrevet der i noen variable, så jeg kommer til å si en ny variabel kalt new_todo, og jeg kommer til å få det elementet. Dette er en funksjon. GetElementByID. Og nå har jeg fått et element av ID, så jeg trenger IDen til at tekstboksen så jeg har gitt det den ID new_todo_description. Det er slik jeg kommer til å få et element. Det er mitt argument til denne funksjonen til å angi hvilke ID for å få. Og så det er et element i HTML, og det har egenskaper. Du har sett disse. De er attributter. Den egenskap av teksten element som lagrer brukerens input kalles verdi. Jeg reddet verdien av at tekstboksen nå i denne variabelen kalt new_todo. Nå har jeg programmatisk tilgang til denne variabelen, som er litt kult fordi nå hva jeg kan gjøre er at jeg kan legge det til min to-do liste. 

Måten vi vil gjøre dette i JavaScript-og ikke bekymre deg hvis du ikke er kjent med dette, men bare gå gjennom det er todos.push fordi det er navnet mitt global datastruktur opp her, og jeg kommer til å presse new_todo. Dette er flott, fordi nå har jeg lagt det til JavaScript min representasjon av at to-do liste. Men nå hvordan får jeg den tilbake til HTML? Jeg må finne en måte å sortere av presse den tilbake. Med andre ord, jeg slags nødt til å trekke dette. Hva vi skal gjøre er at vi kommer til å trekke to-do liste. Jeg trenger å oppdatere andre HTML på den siden, og som du kan se, har jeg igjen denne lille beholderen her, dette skillet på siden som har IDen todos, og jeg kommer til å sette to-do liste der. Først skal jeg fjerne det fordi, si, det var en gammel to-do liste der. Jeg får det elementet av ID igjen, og jeg tilgang til det indre HTML av dette elementet, og jeg kommer til å klare det. Hvis vi forlot denne koden som er, vil vi se en tom ingenting der, og nå vil jeg begynne å gjengi min nye to-do liste. Jeg er i utgangspunktet kommer til å tørke ut min liste over gjøremål. 

Nå indre HTML innsiden av at todos div er helt klart, og nå må jeg begynne å legge min liste. Det første jeg ønsker å legge tilbake er sorterte liste tag, som betegner i utgangspunktet at dette er starten på en ikke-sorterte liste. Nå for hvert element i min todos rekke ønsker jeg å skrive det ut på innsiden av at HTML. Jeg vil føye til det videre til bunnen av denne listen. Akkurat som i C, kan jeg bruke en for løkke, og jeg kommer til å starte på begynnelsen av listen min på element 0, og jeg kommer til å gå hele veien til lengden på listen. Vi kan faktisk få lengden på en array i JavaScript bruke lengden eiendommen. I utgangspunktet skal jeg gjøre noe lignende på innsiden av her å skrive ut dette elementet. Jeg kan igjen få tilgang til todos div, den indre HTML eiendommen til det, og jeg kommer til å legge på dette nytt element, og det kommer til å være omgitt av denne li tag, og jeg kommer til å sette sammen med operatoren +, og det er den ed element av min todos array, og da jeg kommer til å lukke den koden. Nå for hvert element vil vi legge til en ny oppføring i listen. Og så alt vi virkelig trenger å gjøre er å stenge denne koden. Jeg trenger bare å stenge av det sorterte liste tag. 

Får du en følelse for hvordan det fungerer? Dette åpner hele listen. Dette legger enkeltelementer fra todos liste til liste, og deretter som lukker hele listen, og dette er min addTodo funksjon. I utgangspunktet begynne ved å få todo fra tekstboksen. Jeg tilføyer at til todos array, og da jeg re-gjengi to-do liste. Nå kan jeg legge til elementer i listen min. Dette er slags spennende fordi i bare noen få linjer med kode vi har i utgangspunktet laget en to-do liste der vi kan legge til elementer. Stor. Det er litt av en grunnleggende innføring i JavaScript. Ikke bekymre deg for mye om syntaksen for nå, men tenk om dette konseptuelt. Vi hadde noen HTML. Vi hadde en tekstboks på siden som i utgangspunktet tillot brukere å legge inn en to-do element for å legge til. Og da vi brukte JavaScript for å hente den todo fra at tekstboksen. Vi har lagret den inne i et JavaScript array, som er utgangspunktet som vår programmatisk representasjon av at to-do liste, og da vi skrev den ut. Dette er todos.js. 

Dette er litt kult, men hvordan kan vi ta dette videre? Vel, som du kan se, er dette ikke som en komplett liste over gjøremål. For eksempel kan jeg ikke merke noen av disse elementene som ufullstendig, som om jeg ønsket å omprioritere elementene eller slette elementer. Dette er greit, men vi kan ta dette videre. Jeg kommer ikke til å snakke for mye om å legge til ekstra funksjoner, men vi kan ta det videre. La oss snakke om å legge enda en funksjon til denne to-do liste, som kommer til å være å kunne sjekke en person å-gjøre-element og har det krysses ut, så i utgangspunktet si at jeg har gjort dette. La oss se på noen kode som kan oppnå det. Legg merke til hva jeg har gjort på toppen er jeg har lagt en ny global matrise kalles komplett. Jeg er i utgangspunktet å bruke dette til å lagre hvorvidt elementene på to-do liste er fullstendig eller ikke. Dette er én måte å gjøre dette. Hvis jeg ser på gjennomføringen av denne, displayet, utgangspunktet hvis jeg legger inn en todo og jeg trykker på denne bytteknappen den krysser ut, så hvert element på denne listen har enten et komplett eller ufullstendig tilstand, og jeg bruker et annet utvalg for å representere det. 

Utgangspunktet for hver todo i at todos matrise det er et element i den komplette utvalg som i utgangspunktet indikerer enten det er fullført eller ikke. Jeg har måttet gjøre ganske minimale endringer i denne koden, så her er vår addTodo funksjon. Legg merke til at her jeg presser den på array, og da jeg presser en 0 til at fullstendig array, utgangspunktet parallelt med at nye todo push for å si Jeg legger dette elementet, og det er kombinert med denne verdien, noe som betyr at det er ufullstendig. Og da er jeg redrawing den to-do liste. Nå merker jeg har lagt dette drawTodoList funksjon. Dette tar mye av koden vi hadde før, utgangspunktet tømmer ut boksen og deretter trekker den nye to-do liste. Men legg merke til at innsiden av dette for loop vi gjør litt mer nå. Vi er i utgangspunktet sjekke om elementet tilsvarer ed todo her er fullført, og vi oppfører forskjellig i disse to forholdene. Hvis det er komplett, legger vi til denne del tag, som er utgangspunktet måten du kan få det streik gjennom effekt krysset ut to-do liste hvis det er ferdig, og hvis det ikke, vi er ikke inkludert det. Og så den slags tar seg av det, 

og det er en måte å oppnå dette. Og så legger merke til når brukeren klikker på en av disse vi veksle ferdigstillelse status av det. Når brukeren klikker, vil vi reversere om det er blitt gjennomført eller ikke, og så får vi tegne den. Denne typen arbeid. Vi har disse funksjonene som utfører sine egne oppgaver, og dette er greit. Er det noe vi kan gjøre bedre om dette, da? Legg merke til at vi har disse to globale arrays. Hvis dette var C, og vi hadde to arrays den slags representert data som ble liksom relatert på noen måte hva ville vi bruke i C for å kombinere disse to feltene til noe som omslutter begge delene informasjon? Noen som vil komme med et forslag? [Student hørbar respons] 

Akkurat, slik at vi kunne bruke noen form for struct, og hvis du tenker tilbake til, si, PSett 3, husker vi hadde ordbok, og da vi hadde om ordet var i ordboken, og all denne informasjonen ble satt sammen innsiden av noen datastruktur. En ting jeg kan gjøre med denne koden for å unngå at disse to ulike matriser for lignende stykker av informasjon er at jeg kan kombinere dem i en JavaScript-objekt. La oss ta en titt på det. Merker jeg bare har ett array på toppen nå og hva jeg har gjort er, og dette er bare den JavaScript syntaks for slags skape en bokstavelig versjon av et objekt, og merke det er to egenskaper, så vi har todo, og det er holdt sammen med om det er fullstendig eller ufullstendig. Dette er svært lik koden. Vi bruker JavaScript-stedene. Denne typen bedrer ting. Som nå, er alle disse områdene relatert informasjon holdes sammen. Når vi går å skrive den ut, kan vi få tilgang feltene. 

Legg merke til hvordan vi gjør todos [i]. Komplett stedet for å sjekke den komplette utvalg separat, og legge merke til når vi ønsker å få to-do strengen vi får to-do eiendom av at todo, så denne typen er fornuftig fordi hvert element har disse iboende egenskaper om det. Den har en todo, og det har enten det er ferdig eller ikke. Ikke for mange endringer det funksjonelt, nettopp lagt litt mer til koden. Dette er en forbedring på noen fronter, ikke sant? Jeg mener, vi priset ut utformingen litt. Nå har vi gjenstander til utgangspunktet kapsle disse dataene. Er det noe mer vi kan gjøre herfra i form av JavaScript? Som merke til at denne koden her for å få den indre HTML av en div er en liten, antar jeg, lenge. Det er document.getElementById ("todos"). InnerHTML. En ting vi kan gjøre for å gjøre denne koden ser litt vennligere så jeg skulle slippe å holde bla til venstre og høyre, frem og tilbake, er jeg kunne bruke et bibliotek som jQuery. 

La oss sjekke ut Seminar 2, og dette er den samme koden, men det er gjort med jQuery. Du kan ikke være altfor kjent med jQuery, men bare vet at jQuery er liksom et bibliotek for JavaScript som gjør det lettere å gjøre ting som tilgang enkelte elementene i DOM. Her i stedet for å si document.getElementById ("todos"). InnerHTML Jeg kan bruke mye renere måte i jQuery, som er bare å bruke velgere. Som du kan se, gjorde denne koden får litt renere, svært like funksjonelt, men det er tanken. Vi har sett et par ting så langt, så vi startet med bare rå JavaScript gjennomføring. Vi har lagt til nye funksjoner og viste hvordan vi kan forbedre det med akkurat hva vi har i JavaScript. 

Ser noen noen problemer med dette motivet? Nemlig gjette-eller jeg ikke nødvendigvis vanskeligheter, men la oss si vi ikke gjør en to-do liste prosjektet, og i morgen vi besluttet Vi ønsket å lage en handleliste eller en handleliste prosjekt. Mange av disse funksjonene er svært like. Mange av de tingene vi ønsker å komme ut av JavaScript er svært vanlig, og dette understreker behovet for en slags måte noe som gjør det enklere å gjøre. Jeg måtte bygge opp alt dette HTML-tilgang, alt dette DOM tilgang, som jeg kommer til å representere to-do liste med denne modellen. Og legg merke til jeg er ansvarlig som JavaScript utvikleren for å holde HTML og JavaScript som jeg har i sync. Ingenting automatisk gjort at JavaScript representasjon eller to-do liste bli skjøvet ut til HTML. Ingenting håndheves at bortsett fra for meg. Jeg måtte skrive trekningen to-do liste funksjon. Og det kan ikke være-Jeg mener, det er rimelig å gjøre det, men det kan være kjedelig noen ganger. Hvis du har et større prosjekt, som kan være vanskelig. 

Rammeverk, en av hensiktene med rammer er å forenkle denne prosessen og liksom faktor ut disse felles-Jeg antar du kan si-design patterns at folk generelt har en slags måte å representere data, enten det er en venneliste, enten det er kartinformasjon eller noe, eller en to-do liste. Noen mennesker har generelt en måte å representere informasjon, og de vanligvis trenger for å holde denne informasjonen slags synkronisert mellom hva brukeren ser på en eller annen form for visning, snakker i form av like modellen vise kontrolleren som du så i forelesning, og deretter den modell, som i dette tilfellet er denne JavaScript matrise. Rammer gir oss en måte å løse det problemet. La oss nå ta en titt på gjennomføringen av denne to-do liste i et rammeverk som heter angularjs. Dette er det. Legg merke til det passer på et lysbilde. Jeg trenger ikke å bla til venstre og høyre. Det er trolig ikke en god grunn til å anbefale å bruke et rammeverk, men varsel jeg noen gang få tilgang enkelte HTML-elementer her? Jeg noensinne kommer inn i DOM? Ser du noen document.getElementById eller noe sånt? Nei, det er borte. 

Kantete hjelper oss å holde DOM og vår JavaScript representasjon av noe slags synkronisert, så hvis det ikke er i JS-fil, hvis det er ingen måte å programmatisk få til alt som HTML-innhold fra JavaScript hvordan skal vi holde dette i sync? Hvis det ikke er i. JS-fil, er det nødt til å være i HTML, ikke sant? Dette er den nye versjonen av HTML-filen, og legge merke til vi har lagt mye her. Merker det er disse nye attributter som sier ng-klikk og ng-repeat. Kantete tilnærming til å løse dette problemet med vanskeligheter i utforming er å i utgangspunktet gjøre HTML mye kraftigere. Kantete er en måte slik at du kan lage HTML noe mer uttrykksfulle. For eksempel kan jeg si at jeg kommer til å knytte eller binde denne tekstboks til en variabel innenfor mitt Kantet JavaScript-kode. Dette ng-modellen gjør nettopp det. Det sier i utgangspunktet at elementet inne i denne tekstboksen, bare forbinder det med den variable new_todo_description i JavaScript-kode. Det er svært kraftig, fordi jeg ikke trenger å eksplisitt gå til DOM for å få denne informasjonen. Jeg trenger ikke å si document.getElementById. Jeg trenger ikke å bruke jQueries som DOM tilgang. Jeg kan assosiere det med en variabel, og deretter når jeg endrer den variabelen innenfor JavaScript det er holdt i sync med HTML, slik som forenkler prosessen med å måtte gå frem og tilbake mellom de to. Betyr det fornuftig? 

Og legg merke til er det ingen HTML tilgangskode. Vi har bare gjort HTML kraftigere, og nå, for eksempel, kan vi gjøre ting som dette, som når du klikker på dette, kaller denne funksjonen innenfor rammen av todos.js, og vi kunne gjøre det før, men det er andre ting, som dette ng-modellen, og legge merke til dette ng-repeat. Hva tror du dette betyr? Her er vår sorterte liste fra før. Vi har de ul kodene, men jeg noensinne gjengi den listen innsiden av JavaScript-kode? Jeg er ikke alltid eksplisitt gjengi den listen. Hvordan fungerer dette? Vel, oppnår den måten Kantet dette er dette som kalles en repeater. I utgangspunktet er dette sier at jeg bør skrive ut denne HTML for hver todo innsiden av min todos array. Innsiden av todos.jr det er en todos matrise akkurat her, og dette vil fortelle Hjørne gå gjennom denne matrisen, og for hvert element ser du Jeg vil du skal skrive ut denne HTML. Dette er ganske kult fordi jeg bare kan gjøre dette uten å måtte skrive en for loop, som for en to-do liste som var bare 30 linjer med kode kanskje ikke den mest fordelaktige ting, men hvis du har et stort prosjekt, kan dette bli veldig praktisk. 

Dette er en løsning på dette problemet, noe som gjør HTML kraftigere, og som tillater oss å holde JavaScript og HTML i sync. Det finnes andre mulige måter å løse dette problemet, og ikke hver rammeverk gjør dette. Ikke hver rammeverket fungerer langs disse linjene. Noen rammer har ulike tilnærminger, og du finner kanskje ut at du liker koding i en ramme over den andre. La oss se på en mer. Dette er to-do liste kodet opp i et rammeverk som heter Backbone. Jeg kommer til å gå gjennom dette raskt. Jeg skal begynne med HTML før vi drar dit. Ett sekund. Starter med HTML, som du legger merke til, er vår HTML svært lik til hva det var før, så ikke så mye nytt på den fronten. Men vår JS-fil er litt annerledes. Backbone slags har denne ideen, eller bygger på ideen at mye av det vi gjør med for eksempel våre JavaScript-prosjekter er å tenke på modeller og samlinger av disse modellene. Dette kan for eksempel være et fotografi, og samlinger av bilder, eller ideen om en venn og samlinger av venner. Og ofte når vi programmerer JavaScript-programmer vi vil liksom representere ideen om å ha en samling av venner en eller annen måte i JavaScript, gir og Backbone oss dette laget på toppen av JavaScript i eksisterende arrays og objekter å gjøre mer kraftfulle ting med det lettere. 

Her har jeg definert en to-do-modellen, og du trenger ikke å bekymre deg for mye om syntaksen, men merker at det er en av egenskapene til dette? Den har en standard-feltet. Backbone tillater meg å spesifisere allerede utenfor balltre noen ny to-do at jeg lager kommer til å ha disse standardene. Nå kan jeg tilpasse dette, men å være i stand til å angi standardverdiene er fin, og det er slags praktisk fordi dette er ikke noe som er som iboende i JavaScript, og nå har jeg ikke trenger å eksplisitt si at de todos er ufullstendige. Jeg kan si rett utenfor balltre at todos kommer til å bli merket som ufullstendig. Legg merke til så hva er dette? Nå har jeg en to-do liste, og det er en samling. Legg merke feltet forbundet med det, sier modell todo. Dette er min måte å fortelle Backbone som Jeg kommer til å tenke på en samling av disse individuelle todos. Dette er i utgangspunktet modell struktur for programmet mitt. Her har jeg denne ideen om en samling, og i utgangspunktet de elementene som inngår i denne samlingen er alle kommer til å være disse todos, og det er veldig naturlig i denne forstand fordi jeg har todos, og jeg har dem i en samling. 

La oss se på litt mer av dette. Her er en Backbone visning. Den andre tingen som Backbone sier er at mye av modellene som du tenker om eller samlinger kommer til å trenge å ha noen måte å bli vist. Vi trenger å gjengi det to-do liste, og ville det ikke vært fint om vi kunne gi for hver modell eller omgås hver modell dette synet som tillater oss å antar jeg koble de to sammen? Mens før vi måtte bruke en for løkke som ville kjøre gjennom hver todo i vår liste, og deretter skrive det ut her Vi kan i utgangspunktet koble det med denne modellen. Dette er en to-do visning. Dette er knyttet til todo vi fant tidligere. Nå hver todo er visbart eller renderable av denne to-do visning. Legg merke til noen av feltene. Hva tror du dette TagNavn er, TagNavn: li? Husker fra før da vi ønsket å gjengi en todo vi måtte eksplisitt pare våre todos med denne li tag. Nå sier vi at der dette todo kommer til å leve kommer til å være inne i en li tag. Og nå er vi også knytte hendelser med våre todos. 

Hver todo har denne ene hendelsen. Hvis du klikker ganske mye veksle knappen, det er det jeg sier det, så i utgangspunktet markere todo som det motsatte av hva det var før og deretter gjengi programmet. Dette er ganske lik koden før. Husker du da vi merket det som enten motsatt eller- og da vi re-rendret det. Men legg merke til nå denne hendelsen pleide å være noe som var i HTML. Det ble sittende der. Knappen hadde en på klikk. Når du klikker på knappen, den slags gjør ting for å sette opp at todo å være ufullstendig. Her har vi tilknyttet det ved å klikke på den bytteknappen og reversere enten det er på eller av med denne visningen. 

Dette er en fin måte å sette opp denne hendelsen slik at det er svært tett bundet dette synet, og så legge merke til dette en mer. Jeg har denne render metoden, og vi trenger ikke å gå gjennom detaljene. Det er på en måte som ligner på det vi hadde før, men merker jeg ikke looping gjennom alt. Jeg er ikke ut som ul tag det er liksom si jeg kommer til å skrive ut alle elementene. Jeg gir funksjonalitet for å gjengi dette en to-do element. Dette er en svært kraftig konsept fordi utgangspunktet vår liste over gjøremål består av alle disse todos, og hvis vi kan i utgangspunktet spesifisere måten å gjengi en av de todos så kan vi ha vår kraftige ryggraden per se gjengi alle todos ved å ringe render metoden på de enkelte todos. Dette er et konsept som er nyttig her. Nå er et godt spørsmål å stille er hvordan er dette programmet blir satt sammen? Fordi vi har muligheten til å gjengi en todo, men hvordan får vi ideen om flere todos? 

La oss ta en titt på det. Dette er den siste del. Legg merke til vi har en to-do liste visning her, og merker det er også en visning. Og for å gå over et par ting, dette initialize metoden vil bli kalt når vi først lage denne to-do liste. Som du kan se, er det som å lage to-do liste og assosiere det med denne visningen. Og da jeg lagt funksjonene her så i utgangspunktet når du legger til et element- Dette ligner på AddItem metoden vi så før- Jeg kommer til å opprette en ny todo objekt, og merker at jeg faktisk ringer denne nye todo metoden, så dette er levert av Backbone, og jeg kan passere i mine eiendommer her. Og nå hver todo at jeg create bruker dette vil få den funksjonaliteten som vi har sett før. Legg merke jeg rydde ut tekstboksen før-en liten liten detalj- og da jeg legger denne samlingen. 

Dette nesten virker rart fordi før vi bare måtte gjøre det todos.push, og da vi var ferdig, og dette kan virke mer komplisert for dette prosjektet, og du kan finne at Backbone eller kantete eller andre rammeverk ikke passer din bestemt prosjekt, men jeg tror det er viktig å tenke på hva dette betyr i større skala for større prosjekter, fordi hvis vi hadde et større prosjekt der vi representerer noen virkelig kompleks samling, noe dypere enn bare en to-do liste, la oss si en venneliste eller noe sånt, kan dette komme til nytte fordi vi kunne organisere vår kode i en veldig praktisk måte, på en måte som vil gjøre det lettere for noen andre som ønsket å plukke opp et prosjekt for å bygge videre på. Du kan se at dette gir mye struktur. Og da jeg ringer gjengi på denne AddItem. Gjengi, som du kan se, og du trenger ikke å forstå dette fullt syntaks, men i utgangspunktet for hver modell kommer det til å ringe den enkelte render metoden. Det er liksom hvor dette kommer fra. La oss bare spesifisere hvordan å gjengi de enkelte todos, og så la oss lim dem sammen som en helhet. Men dette er en måte for abstraksjon, fordi jeg kunne endre måten jeg velger å gjengi de enkelte todos, og jeg ikke ville ha til å endre noen av denne koden. Det er litt kult. 

Does noen har noen spørsmål om JavaScript-rammeverk? [Student uhørlig spørsmål] Javisst, det er et stort spørsmål. Spørsmålet var hvordan jeg inkluderer de rammer? De fleste JavaScript-rammeverk er i utgangspunktet bare JS-filer som du kan inkludere på toppen av koden din. Merke i hodet delen av HTML mitt jeg har alle disse skriptkodene, og det endelige manuset koden er den koden som vi har skrevet. Og da de tre ramme-koder er bare også skriptkodene. Jeg er inkludert dem fra det som kalles en CDN, som tillater meg å få det fra noen andre på dette punktet men hver rammeverk har dette-kan du stort sett finne innhold for en bestemt JavaScript-bibliotek tilgjengelig på noen CDN eller noe sånt, og deretter kan du inkludere disse skriptkodene. Betyr det fornuftig? Cool. 

De er to ulike tilnærminger. De er ikke de eneste tilnærminger til å løse dette problemet. Det er mange forskjellige ting som noen kunne gjøre, og det er mange rammeverk der ute. Kantete og Backbone ikke fortelle hele historien. Lykke til med dine siste prosjekter, og tusen takk. [CS50.TV]