[Powered by Google Translate] [Seminaar] [JavaScript raamwerke: Hoekom en Hoe]
[Kevin Schmid] [Harvard Universiteit]
[Hierdie is CS50.] [CS50.TV]
>> Hi, almal. Welkom by die JavaScript raamwerke seminaar.
My naam is Kevin, en vandag ek gaan om te praat oor JavaScript raamwerke,
en die doel van hierdie seminaar is nie om jou te kry om te sê, 'n bepaalde raamwerk per se knie
maar om te gee jou 'n breë inleiding tot 'n paar van die raamwerke
en wys waarom ons ooit sal wil hê om 'n raamwerk te gebruik.
>> Voordat ek dit doen, sal ek 'n bietjie agtergrond in JavaScript,
en dan sal ons dit van daar af.
Ons gaan om te begin met die implementering van 'n to-do list.
Hier is ons taak lys vir vandag.
Dit is soort van snaaks. Ons het 'n to-do list in JavaScript te implementeer.
Dit is wat dit gaan lyk, so dit is ons eerste doelwit.
Ons gaan nie 'n raamwerk te gebruik om dit te doen.
Ons gaan om te kode JavaScript en kry die te-doen-lys te werk.
Dan gaan ons die ontwerp te verbeter sonder die gebruik van 'n raamwerk.
Ons gaan die verskillende dinge wat ons kan doen met net JavaScript alleen te bespreek
ons te maak lys te-doen 'n bietjie meer goed ontwerp.
Toe het ons gaan om te gooi in 'n paar jQuery,
en dan gaan ons kyk na die dieselfde lys te-doen,
net geïmplementeer word in verskillende raamwerke, en ons sal bespreek
die voor-en nadele langs die pad.
>> Kom ons begin met die implementering daardie lys te-doen.
Kom ons sê dat ons hierdie HTML is gegee.
Ek gaan om te maak dit 'n bietjie kleiner.
Soos jy kan sien, ek het 'n bietjie kop wat sê Todo
en 'n bietjie box waar ek kan 'n beskrywing van 'n taak gee
en dan 'n nuwe item knoppie, so laat ons probeer om 'n nuwe taak te tree by die lys.
Gee 'n JavaScript raamwerke seminaar,
en ek is nuwe item te tref.
Ek kry hierdie JavaScript waarskuwing wat sê implementeer me.
Ons het dit te implementeer.
Kom ons kyk na die kode vir hierdie, beide die HTML en JavaScript.
Hier is ons HTML.
Soos jy hier kan sien, hier is ons klein Todos kop.
Dit was dat dapper ding op die top,
en dan het ons die insette boks met die plekhouer,
en dan is daar 'n sekere eienskap van hierdie knoppie wat noem hierdie funksie Addtodo.
Het enige iemand wil hê om te raai wat dit op die kliek is wat dui op?
[Studente onhoorbaar reaksie]
Goed, die op kliek is soort van soos 'n gebeurtenis,
soos op die muis is net 'n gebeurtenis, en wat ons doen
is ons vasmaak die geval van te kliek hierdie knoppie daardie funksie uit te voer.
Addtodo is hierdie gebeurtenis hanteerder vir die druk dat die knoppie.
>> Soos jy kan sien, wanneer ek op die nuwe item knoppie
die op kliek gebeurtenis kry afgedank, en hierdie funksie kry genoem.
Kom ons kyk na funksie.
Soos jy kan sien, hier is my JavaScript-kode so ver.
Wat ek het op die top is 'n globale data struktuur vir my te-doen-lys.
Dit lyk soos 'n skikking. Dit is net 'n leë skikking.
En dan het ek die Addtodo funksie wat ons vroeër gesien het,
en die enigste reël van die kode in daar is hierdie waarskuwing.
Dit waarskuwings implementeer my, en dan het ek 2 take op hande.
Ek het die taak te voeg by dat die globale data struktuur,
en dan het ek wil trek uit die te-doen-lys.
Niks fancy ook net nog nie, maar JavaScript jy dalk nie vertroud met,
so ek gaan om te gaan stadig en die beginsels van JavaScript op dié manier hersien.
>> Kom ons gee dit 'n skoot.
Kom ons sê die gebruiker iets in hierdie boks.
Ek het net getik iets in hier, teks.
Hoe sorteer ek van toegang wat teks deur JavaScript?
Onthou dat JavaScript, een van die fundamentele kenmerke is dat dit gee ons
hierdie programmatiese toegang tot die DOM.
Dit stel ons in staat elemente en hul eienskappe van hierdie werklike HTML om toegang te verkry.
Die manier waarop ons dit doen met kaal bene JavaScript
is ons eintlik kan gebruik om 'n funksie in JavaScript genoem getElementByID.
Ek wil die teks wat daar getik in 'n veranderlike te slaan,
so ek gaan 'n nuwe veranderlike genoem new_todo om te sê,
en ek gaan dat die element te kry.
Dit is 'n funksie. GetElementByID.
En nou is ek kry 'n element van ID, so ek nodig het om die ID van die teks boks,
so ek het dit gegee om die ID new_todo_description.
Dit is hoe ek gaan 'n element te kry.
Dit is my argument na hierdie funksie, om te spesifiseer watter ID te kry.
En so het dit is 'n element in HTML, en dit het eienskappe.
Jy het gesien dat hierdie. Hulle is eienskappe.
Die kenmerk van die teks element wat slaan die gebruiker se insette word genoem waarde.
EK het die waarde van die teks boks nou in hierdie veranderlike genoem new_todo.
Nou het ek programmatiese toegang tot hierdie veranderlike, wat is 'n soort van die koel
want nou wat ek kan doen, is ek dit kan byvoeg by my te-doen-lys.
>> Die manier waarop ons dit sou doen in JavaScript-en moenie bekommerd wees as jy bekend is met hierdie,
maar net gaan deur dit todos.push
want dit is die naam van my globale data struktuur hier,
en ek gaan new_todo te stoot.
Dit is groot, want nou het Ek dit saam met my JavaScript
voorstelling van die te-doen-lys.
Maar nou hoe kry ek dit terug na die HTML?
Ek het 'n manier om uit te sorteer druk dit terug te kry.
Met ander woorde, ek soort van hierdie te trek.
Wat ons gaan doen, is ons gaan die te-doen lys te trek.
Ek moet ander HTML te werk op die blad,
en soos jy kan sien, het ek het hierdie klein houer hier,
hierdie deler van die bladsy wie se ID is todos,
en ek gaan die te-doen lys daar te vestig.
Eerste Ek gaan om dit te duidelik uit, want, sê, was daar 'n ou te-doen lys daar.
Ek kry daardie element deur ID weer
en ek is die toegang tot die innerlike HTML van daardie element,
en ek gaan dit skoon te maak.
As ons verlaat hierdie kode soos dit is, sal ons sien 'n leë niks daar nie,
en nou wil ek om te begin die lewering van my nuwe lys te-doen.
Ek is basies gaan om uit te wis my te-doen-lys.
>> Nou is die innerlike HTML binnekant van daardie Besigtig div is heeltemal duidelik nie,
en nou het ek nodig het om te begin met die toevoeging my lys.
Die eerste ding wat ek wil om terug te voeg is die on-geordende lys tag,
wat dui basies dat dit is die begin van 'n geordende lys.
Nou vir elke element in my Besigtig verskeidenheid Ek wil dit uit te druk binnekant van wat HTML.
Ek wil dit by te voeg aan die onderkant van die lys.
Net soos in C, ek kan gebruik om 'n lus vir die, en ek gaan om te begin by die begin van my lys
by element 0, en ek gaan al die pad na die lengte van die lys te gaan.
Ons kan eintlik kry die lengte van 'n skikking in JavaScript deur die lengte eiendom.
Basies Ek gaan iets baie soortgelyks te doen binnekant van hier
om uit te druk wat element.
Ek kan weer toegang tot die Besigtig div, die innerlike HTML eiendom van daardie,
en ek gaan om te voeg op hierdie nuwe lys-item, en wat gaan word omring deur
hierdie li tag, en ek gaan om te koppel met die +-operateur,
en dit is die i element van my Besigtig skikking,
en dan gaan ek daardie merker te sluit.
Nou vir elke element ons sal 'n nuwe lys inskrywing.
En dan is al wat ons regtig nodig het om te doen, is om af te sluit wat tag.
Ek het net nodig om te sluit af dat die on-geordende lys tag.
>> Kry jy 'n gevoel vir hoe dit werk?
Dit maak die hele lys.
Dit voeg individuele elemente van die Besigtig lys na die lys,
en dan sluit die hele lys, en dit is my Addtodo funksie.
Ek het basies begin deur om die taak uit die teks boks.
Voeg ek dit by die Besigtig skikking, en dan het ek weer lewer die te-doen-lys.
Nou kan ek voeg 'n item aan my lys.
Dit is 'n soort van opwindend, want in net 'n paar reëls van die kode
Ons het basies 'n lys te-doen waar ons kan voeg items.
Groot.
Dit is soort van 'n basiese inleiding tot JavaScript.
Moet nie te veel bekommerd wees oor die sintaksis vir nou,
maar dink oor hierdie konseptueel.
Ons het 'n paar HTML.
Ons het 'n tekskassie op die bladsy wat basies gebruikers toegelaat om insette 'n moet-doen-item by te voeg.
En dan moet ons gebruik JavaScript van die taak te haal dat die teks boks.
Ons gestoor wat binne-in 'n JavaScript skikking, wat basies is soos
ons programmatiese voorstelling van die te-doen lys,
en dan sal ons gedrukte dit uit.
Dit is todos.js.
>> Dit is gaaf, maar hoe kan ons dit verder?
Wel, as jy kan sien, is dit nie soos 'n volledige lys te-doen.
Byvoorbeeld, kan ek nie sien enige van hierdie items as onvolledig,
graag as ek wou die items te reprioritize of items verwyder.
Dit is okay, maar ons kan dit verder.
Ek gaan nie te veel om te praat oor die byvoeging van ekstra funksies,
maar ons kon neem dat verdere.
Kom ons praat oor die toevoeging van een meer funksie om hierdie lys te-doen,
wat gaan word in staat is om 'n individu te-doen-item om te kyk
en het dit gekruis word, so basies sê ek dit gedoen het.
Kom ons kyk na die kode wat kon bereik nie.
Let op wat ek gedoen het op die top is Ek het bygevoeg
'n nuwe globale skikking met die naam voltooi.
Ek is basies die gebruik van hierdie op te slaan of die items op die lys te-doen
voltooi is of nie.
Dit is een manier om dit te doen nie.
As ek kyk na die implementering van hierdie, die vertoning,
basies as ek in 'n taak en ek druk hierdie swikknoppie
dit deur uit, so elke item op die lys het nie 'n volledige
of onvolledige staat, en ek gebruik 'n ander skikking wat te verteenwoordig.
>> Basies vir elke taak in daardie Besigtig verskeidenheid
daar is 'n item in die volledige skikking wat basies dui
of wat voltooi is of nie.
Ek het mooi minimale veranderinge aan te bring aan hierdie kode,
so hier is ons Addtodo funksie.
Let daarop dat hier ek dit is besig om op die skikking,
en dan is ek besig om 'n 0 tot dat volledige verskeidenheid,
basies in parallel met die nuwe taak druk om te sê
Ek is toevoeging van hierdie item, en dit tesame met die waarde,
wat beteken dat dit is onvolledig.
En dan is ek die herindeling van die te-doen-lys.
Nou, sien ek hierdie drawTodoList funksie het bygevoeg.
Dit neem 'n baie van die kode wat ons gehad het voordat,
basies klaar uit die boks en dan trek die nuwe lys te-doen.
Maar let op dat die binnekant van die lus vir ons 'n bietjie doen meer nou.
Ons is basies seker te maak of die item wat ooreenstem met die i todo hier
voltooi is, en ons is verskillend optree in hierdie 2 omstandighede.
As dit is 'n volledige, ons voeg hierdie del tag,
Dit is basies die manier kan jy die staking kry deur middel van krag
kruising uit die lys te-doen as dit voltooi is,
en as dit is nie, is ons nie soos dit.
En so dat die soort van sorg dat
>> en dit is een manier om dit te bewerkstellig.
En dan sien wanneer die gebruiker een van hierdie
Ons skakel die voltooiing status van dit.
Wanneer die gebruiker, sal ons keer of dit voltooi is of nie,
en dan sal ons dit teken.
Hierdie soort van werk.
Ons het hierdie funksies uit te voer wat hul eie take,
en dit is okay.
Is daar enigiets wat ons kan beter doen oor hierdie, al is?
Kennisgewing ons hierdie 2 globale skikkings.
As dit was C, en ons moes 2 skikkings daardie soort verteenwoordig
data wat soort van die verband in een of ander manier
Wat sou ons gebruik in C hierdie 2 velde te kombineer
in iets wat omvat twee stukke van inligting?
Enigiemand wat wil 'n voorstel te maak?
[Studente onhoorbaar reaksie]
>> Presies, so ons kan gebruik om 'n soort van struct,
en as jy dink terug aan, sê, pset 3,
onthou ons moes woordeboek, en dan het ons die vraag of die woord
was in die woordeboek, en al die inligting is saamgestel
binnekant van 'n data struktuur.
Een ding wat ek kan doen met hierdie kode om te verhoed dat hierdie 2 verskillende skikkings
vir soortgelyke stukke van die inligting is Ek hulle kan kombineer in 'n JavaScript voorwerp.
Kom ons neem 'n blik op dit.
Let Ek het net een opgestel by die top nou
en wat ek gedoen het, is-en dit is net die JavaScript syntax vir die soort
die skep van 'n letterlike weergawe van 'n voorwerp,
en sien daar is 2 eienskappe, so ons het die taak,
en dit is gehou saam met die vraag of dit volledig of onvolledig.
Dit is baie soortgelyk kode.
Ons gebruik die JavaScript voorwerpe.
Hierdie soort van dinge verbeter.
Soos nou, is al hierdie velde van verwante inligting bymekaar gehou.
Wanneer ons gaan dit om uit te druk, kan ons toegang tot die velde.
>> Let op hoe ons Besigtig [i] doen. Volledige
in plaas van die beheer van die volledige reeks afsonderlik,
en sien wanneer ons wil die te-doen-string is ons om die te-doen-eiendom te kry
van die taak, sodat hierdie soort van sin maak, want
elke item het hierdie intrinsieke eienskappe daaroor.
Dit het 'n taak, en dit het of dit voltooi is of nie.
Nie te veel veranderinge daar funksioneel, net bygevoeg nog 'n paar van die kode.
Dit is 'n verbetering op sommige gebiede, reg?
Ek bedoel, ons faktor uit die ontwerp van 'n bietjie.
Nou het ons voorwerpe basies te omsluit hierdie data.
Is daar enigiets meer wat ons kan doen van hier af in terme van JavaScript?
Graag kennis dat hierdie kode hier
vir die kry van die binneste HTML van 'n div
is 'n bietjie, dink ek, lank.
Daar is document.getElementById ("Besigtig"). InnerHTML.
Een ding wat ons kan doen om hierdie kode kyk 'n bietjie vriendeliker
so ek wil nie hê om te hou blaai links en regs, heen en weer,
is ek kon 'n biblioteek soos jQuery gebruik.
>> Kom ons kyk na Seminaar 2,
en dit is dieselfde kode, maar dit is gedoen met jQuery.
Jy kan nie te vertroud is met jQuery,
maar net weet dat jQuery is 'n soort van 'n biblioteek vir JavaScript
wat maak dit makliker om dinge soos toegang individuele elemente van die DOM te doen.
Hier in plaas van om te sê document.getElementById ("Besigtig"). InnerHTML
Ek kan die baie skoner manier gebruik in jQuery,
wat net keurders te gebruik.
Soos jy kan sien, het hierdie kode kry 'n bietjie skoner,
baie soortgelyk funksioneel, maar dit is die idee.
Ons het gesien hoe 'n paar van die dinge wat so ver,
so het ons begin met net rou JavaScript implementering.
Ons het bygevoeg nuwe funksies en gewys hoe ons dit kan verbeter met
net dit wat ons het in JavaScript.
>> Het enige iemand sien nie enige probleme met hierdie ontwerp?
Naamlik, ek dink-of nie noodwendig probleme, maar kom ons sê
ons is nie besig met 'n lys te-doen-projek, en môre het ons besluit
Ons wou 'n inkopielys of 'n inkopielys projek te maak.
Daar is baie van hierdie eienskappe is baie soortgelyk.
Daar is baie van die dinge wat ons wil uit te kry van JavaScript is baie algemeen,
en dit onderstreep die behoefte aan 'n soort van manier
die maak van hierdie makliker om te doen.
Ek het om op te bou al van hierdie HTML, het al hierdie DOM toegang,
soos ek gaan die te-doen lys voor te stel met hierdie model.
En let Ek is verantwoordelik as die JavaScript ontwikkelaar
vir die behoud van die HTML en JavaScript dat ek in sync.
Niks outomaties gemaak dat JavaScript verteenwoordiging
of die te-doen lys gestoot kry om te HTML.
Niks afgedwing dat, behalwe vir my.
Ek moes die trekking te-doen lys funksie te skryf.
En dit kan nie wees-Ek bedoel, is dit redelik om dit te doen,
maar dit kan soms vervelig.
As jy 'n groter projek, wat kan moeilik wees.
>> Raamwerke, een van die doeleindes van raamwerke
is dat die proses en die soort van faktor te vereenvoudig uit
hierdie gemeenskaplike-ek dink jy kan sê-ontwerp van patrone
dat mense oor die algemeen het 'n soort van manier is om data,
of dit is 'n lys met vriende, of dit is die kaart inligting
of iets of 'n to-do list.
Sommige mense het oor die algemeen 'n manier is om inligting,
en hulle oor die algemeen nodig het om daardie inligting soort van hou in sync
tussen wat die gebruiker sien in 'n soort van die oog,
praat in terme van soos die model oog kontroleerder wat jy gesien het in lesing,
en dan die model, wat in hierdie geval is dit JavaScript skikking.
Raamwerke gee ons 'n manier om die probleem op te los.
Nou kom ons neem 'n blik op die implementering van hierdie te-doen lys
in 'n raamwerk genoem angularjs.
Dit is dit. Let daarop dat dit pas op 'n skyfie.
Ek het nie te skuif na links en regs.
Dit is waarskynlik nie 'n groot rede om te raai die gebruik van 'n raamwerk,
Maar let ek ooit toegang tot individuele HTML elemente hier?
Is ek ooit gaan in die DOM?
Sien jy enige document.getElementById of iets soos dit?
Nee, dis verby.
>> Hoekige help ons om die DOM en ons JavaScript voorstelling van iets
soort in pas nie, so as dit nie in die JS lêer,
As daar is geen manier om programmaties om alles wat HTML inhoud
uit die JavaScript hoe is ons hou dit in harmonie?
As dit nie in die JS lêer., Dit het om te wees in HTML, reg?
Dit is die nuwe weergawe van die HTML-lêer,
en sien ons 'n baie hier het bygevoeg.
Let daarop dat daar is hierdie nuwe eienskappe wat sê ng-kliek en ng-repeat.
Hoekige se benadering tot die oplossing van die probleem van die probleme in die ontwerp
is basies te maak HTML veel meer kragtig.
Hoekig is 'n manier sodat jy om te maak HTML ietwat meer uitdrukkingsvolle.
Byvoorbeeld, kan ek sê dat ek gaan om te bind of bind hierdie teks boks
na 'n veranderlike binne my Hoek JavaScript-kode.
Dit ng-model nie net dat.
Dit sê basies dat die item binnekant van hierdie teks boks,
net assosieer wat met die veranderlike new_todo_description
binne die JavaScript-kode.
Dit is baie sterk, want ek het nie uitdruklik na
die DOM dat die inligting te kry.
Ek het nie document.getElementById te sê.
Ek het nie jQueries soos DOM toegang te gebruik.
Ek kan assosieer dit met 'n veranderlike, en dan wanneer ek verander veranderlike
binne JavaScript dit gehou in harmonie met die HTML,
sodat vergemaklik die proses van om te heen en weer tussen die twee.
Maak dit sin?
>> En sien daar is geen HTML-kode toegang.
Ons het nou net gemaak HTML meer kragtige,
en nou, byvoorbeeld, kan ons dinge doen soos hierdie,
soos wanneer jy kliek op hierdie, noem hierdie funksie binne die bestek van todos.js,
en ons kon dit doen voor, maar daar is ander dinge, soos hierdie ng-model,
en let op hierdie ng-repeat.
Wat dink jy dit doen?
Hier is ons geordende lys voor.
Ons het die ul tags,
maar ek ooit die lewering van die lys binnekant van die JavaScript-kode?
Ek is nooit uitdruklik die lewering van daardie lys.
Hoe werk dit?
Wel, die manier waarop Hoek accomplishes dit is dit is bekend as 'n herhaler.
Basies dit sê wat ek wil hierdie HTML te druk
vir elke taak binnekant van my Besigtig skikking.
Binnekant van todos.jr daar is 'n verskeidenheid Besigtig reg hier,
en dit sal Hoek go vertel deur daardie skikking, en vir elke element wat jy sien
Ek wil hê dat jy hierdie HTML te druk.
Dit is 'n soort van die awesome want ek kan net doen dit
sonder om 'n te skryf vir die lus,
wat vir 'n to-do list dit was net 30 reëls van die kode
dalk nie die mees voordelige ding,
maar as jy 'n groot projek, kan dit kry baie handig.
>> Dit is 'n oplossing vir hierdie probleem, die maak van HTML meer kragtige,
en wat ons toelaat om te hou JavaScript en HTML in sync.
Daar is ander moontlike maniere om hierdie probleem op te los,
en nie elke raamwerk doen dit.
Nie elke raamwerk werk langs hierdie lyne.
Sommige raamwerke het verskillende benaderings,
en jy mag vind dat jy dit geniet kodering in een raamwerk oor die ander.
Kom ons kyk na 'n meer.
Dit is die te-doen lys gekodeer in 'n raamwerk genoem ruggraat.
Ek gaan om te gaan deur middel van hierdie vinnig.
Ek sal begin met die HTML voor ons gaan daar.
Een sekonde.
Begin met die HTML, as jy sien, ons HTML is baie soortgelyk
na wat dit was voor, so nie te veel nuwe op daardie front.
Maar ons JS lêer is 'n bietjie anders.
Ruggraat soort het hierdie idee, of bou voort op die idee
dat baie van wat ons doen met, sê, ons JavaScript projekte
is te dink oor modelle en versamelings van hierdie modelle.
Dit kan wees, byvoorbeeld, 'n foto en versamelings van foto's,
of die idee van 'n vriend en versamelings van vriende.
En dikwels wanneer ons programmering JavaScript aansoeke
Ons sal sorteer verteenwoordig die idee van 'n versameling van vriende
een of ander manier in JavaScript, en ruggraat gee ons hierdie laag
op die top van JavaScript se bestaande skikkings en voorwerpe
meer kragtige dinge te doen met dat meer maklik.
>> Hier het ek omskryf 'n to-do model,
en jy hoef nie te veel bekommerd wees oor die sintaksis,
Maar let op dat wat is een van die eienskappe van hierdie?
Dit het 'n verstek.
Ruggraat laat my toe reeds spesifiseer van die kolf af
enige nuwe te-doen wat ek skep gaan hierdie standaard te hê.
Nou kan ek pas nie, maar in staat is om die gebreke reg te spesifiseer
is mooi, en dit is 'n soort van gerieflik, want dit is nie iets wat soos
inherent in JavaScript, en nou het ek nie uitdruklik
sê dat die Besigtig is onvolledig.
Ek kan sê reg uit die kolf dat Besigtig gaan word gemerk as onvolledig.
Let op wat is hierdie?
Nou het ek 'n lys te-doen, en dit is 'n versameling.
Let op die veld wat verband hou met wat sê model todo.
Dit is my manier van vertel ruggraat wat
Ek gaan om te besin oor 'n versameling van die individuele Besigtig.
Dit is basies die model struktuur vir my program.
Hier het ek die idee van 'n versameling,
en basies die items in die versameling is almal gaan wees om hierdie todos,
en dit is baie natuurlike in hierdie sin
want ek het todos, en ek het hulle in 'n versameling.
>> Kom ons kyk na 'n bietjie meer van hierdie.
Hier is 'n ruggraat oog.
Die ander ding wat Backbone sê, is dat
'n baie van die modelle wat jy oor of selfs versamelings dink
gaan moet 'n manier om vertoon te hê.
Ons moet lewer dat die lys te-doen,
en dit sou nie lekker wees as ons kan gee vir elke model
of assosieer met elke model hierdie siening
wat ons toelaat om te dink ek verbind die twee saam?
Terwyl voordat ons 'n te gebruik vir die lus wat sou loop deur
elke taak in die lys en druk dan is dit hier
ons kan basies verbind dit met hierdie model.
Dit is 'n moet-doen-oog.
Dit is wat verband hou met die taak wat ons vroeër gevind.
Nou elke taak word weer te gee of renderable
deur dit te doen-oog.
Let op 'n paar van die velde.
Wat dink jy hierdie tagName is, tagName: li?
Onthou voor wanneer ons wou 'n taak te verrig
ons sal moet uitdruklik paar ons Besigtig met hierdie li tag.
Nou kan ons sê dat waar hierdie taak gaan om te lewe
gaan wees binnekant van 'n li tag.
En nou is ons ook assosieer gebeure met ons Besigtig.
>> Elke taak het hierdie een gebeurtenis.
As jy pretty much kliek op die skakel knoppie, dit is wat ek daar gesê:
dan basies merk die taak as die teenoorgestelde van wat dit was voor
en dan weer maak die aansoek.
Dit is 'n soort van soortgelyk aan die kode voor.
Onthou wanneer ons gemerk het as óf die teenoorgestelde of-
en dan sal ons weer gelewer het.
Maar nou sien hierdie geleentheid gebruik om iets wat was in die HTML wees.
Dit het daar gesit.
Die knoppie het 'n op klik.
Wanneer jy kliek op die knoppie, is dit nie soort van die dinge te
opstel van die taak te wees onvolledig.
Hier het ons geassosieer so 'n geval van te kliek wat swikknoppie
en omkeer of dit nou op of af met hierdie siening.
>> Dit is 'n goeie manier om van die opstel van hierdie gebeurtenis, sodat dit is baie styf gebind
hierdie siening, en so sien hierdie een meer.
Ek het hierdie metode lewer, en ons hoef nie te gaan deur middel van die besonderhede.
Dit is soort van soortgelyk aan wat ons gehad het voordat,
maar agter ek is nie herhaling deur enigiets.
Ek is nie die druk wat ul tag dit is soort van te sê ek gaan al die elemente te druk.
Ek is die verskaffing van die funksie vir die lewering van hierdie een te-doen-item.
Dit is 'n baie kragtige konsep, want basies
ons te-doen lys bestaan ​​van al hierdie todos, en as ons kan basies spesifiseer
die manier waarop een van daardie todos te lewer
dan kan ons ons kragtige ruggraat per se het maak al die Besigtig
deur die roeping van die lewer metode op die individu Besigtig.
Dit is 'n konsep wat nuttig is hier.
Nou is 'n goeie vraag om te vra is hoe word hierdie aansoek saam te stel?
Want ons het die vermoë om 'n taak te verrig,
Maar hoe kry ons die idee van veelvuldige Besigtig?
>> Kom ons neem 'n blik op dit.
Dit is die laaste deel.
Kennisgewing ons 'n to-do list view hier,
en sien dit is ook 'n oog.
En om te gaan oor 'n paar dinge,
hierdie inisialiseer metode sal genoem word wanneer ons die eerste om dit te-doen-lys skep.
Soos jy kan sien, is dit soos die skep van die te-doen lys en assosieer dit met hierdie siening.
En dan het ek bygevoeg die funksies hier so basies wanneer jy voeg 'n item-
Dit is soortgelyk aan die addItem metode wat ons gesien het voor-
Ek gaan 'n nuwe taak voorwerp te skep, en sien ek eintlik is roeping
hierdie nuwe taak metode, so dit is wat deur ruggraat
en ek kan slaag in my eiendomme hier.
En nou is elke taak wat ek hiervan Skep gebruik sal kry dat die funksies wat ons gesien het voor.
Let Ek is die skoonmaak van uit die teks boks voor-'n klein detail-
en dan is ek toevoeging van hierdie versameling.
>> Dit lyk byna vreemd, want voordat ons moes net dat todos.push te doen,
en dan is ons gedoen het, en dit mag lyk meer ingewikkeld vir hierdie spesifieke projek,
en jy mag vind dat ruggraat of selfs Hoek of enige ander raamwerk
nie pas by jou spesifieke projek, maar ek dink dit is belangrik om te dink oor
wat dit beteken nie op 'n groter skaal vir groter projekte,
want as ons 'n groter projek waar ons was verteenwoordig
'n paar baie komplekse versameling, iets dieper as net 'n lys te-doen,
kom ons sê 'n lys met vriende of iets soos dit is, kan dit handig te pas kom
want ons kan ons kode te organiseer in 'n baie maklike manier,
in 'n manier dat dit makliker sal maak vir iemand anders
wat wou om af te haal 'n projek om op te bou.
Jy kan sien dat dit bied 'n baie van die struktuur.
En dan is ek 'n beroep lewer op hierdie addItem.
Lewer, soos jy kan sien, en jy het nie hierdie volle sintaksis te begryp,
Maar basies vir elke model dit gaan die individu lewer metode te roep.
Dit is soort van waar dit vandaan kom.
Laat ons net bepaal hoe die individu todos te lewer,
en dan laat se gom hulle saam as 'n geheel.
Maar dit bied 'n manier van onttrekking,
want ek kon die manier waarop ek besluit om die individuele todos te lewer verander,
en ek wil nie hê dat enige van hierdie kode te verander.
Dit is soort van cool.
>> Het enige iemand enige vrae oor JavaScript raamwerke?
[Studente onhoorbare vraag]
Ag, seker nie, dit is 'n groot vraag.
Die vraag is hoe het ek sluit die raamwerke?
Die meeste JavaScript raamwerke is basies net JS-lêers
wat jy kan sluit by die top van die kode.
Kennisgewing in die kop gedeelte van my HTML Ek het al hierdie script etikette,
en die finale scripttag is die kode wat ons geskryf.
En dan is die 3 raamwerk kodes is ook net script tags.
Ek sluit hulle van wat genoem word 'n CDN,
wat my in staat stel om dit te kry van iemand anders op hierdie punt
maar elke raamwerk het dit-jy kan pretty much vind die inhoud
vir 'n spesifieke JavaScript-biblioteek beskikbaar is op 'n paar CDN of iets soos dit,
en dan kan jy sluit hierdie script tags.
Maak dit sin?
Cool.
>> Dit is 2 verskillende benaderings.
Dit is nie die enigste benaderings tot die oplossing van die probleem.
Daar is baie verskillende dinge wat
iemand kon doen nie, en daar is baie raamwerke daar buite.
Hoekig en ruggraat vertel nie die hele storie.
Sterkte met jou finale projekte, en baie dankie.
[CS50.TV]