[Powered by Google Translate] [Seminar] [JavaScript Framework:? Bakit at Paano] [Kevin Schmid] [Harvard University] [Ito ay CS50.] [CS50.TV] 

Hi, lahat ng tao. Maligayang pagdating sa seminar Framework JavaScript. Ang pangalan ko ay Kevin, at ngayon pupuntahan ko ay pakikipag-usap tungkol sa JavaScript Framework, at ang layunin ng seminar na ito ay hindi upang makakuha ng sa iyo sa, sabihin nating, master isang partikular na balangkas per se ngunit upang bigyan ka ng malawak na panimula sa isang pares ng mga Framework at ipakita kung bakit nais namin kailanman nais na gumamit ng isang framework. 

Bago mo gawin ko na, makikita ko magbigay ng isang maliit na background sa JavaScript, at pagkatapos ay gagamitin namin dalhin ito mula doon. Kami ay pagpunta sa magsimula sa pamamagitan ng pagpapatupad ng isang sa-do list. Narito ang aming listahan ng gawain para sa araw na ito. Ito ay uri ng nakakatawa. Mayroon kaming upang ipatupad ang to-do list sa JavaScript. Ito ay kung ano ang pagpunta sa hitsura, sa gayon na ang aming unang layunin. Hindi namin pagpunta sa gumamit ng isang framework upang gawin iyon. Kami ay pagpunta sa code ng JavaScript at makuha ang to-do list upang gumana. Pagkatapos kami ay pagpunta upang mapabuti ang disenyo nang hindi gumagamit ng framework. Kami ay pagpunta upang talakayin ang iba't-ibang mga bagay na maaari naming gawin sa pamamagitan lamang ng JavaScript mag-isa upang gumawa ng aming to-do ilista ang kaunti pa rin dinisenyo. Pagkatapos kami ay pagpunta upang ihagis sa ilang mga jQuery, at pagkatapos ay kami ay pagpunta upang tumingin sa parehong sa-do list, lamang ipinapatupad sa magkakaibang Framework, at kami ay talakayin  mga kalamangan at kahinaan sa kahabaan ng paraan. 

Natin simulan ang pagpapatupad ng na to-do list. Sabihin nating kami naibigay na HTML na ito. Pupunta ako sa gumawa ito ng kaunti mas maliit. Tulad ng iyong nakikita, mayroon akong isang maliit na header na nagsasabing TODO at isang maliit na kahon kung saan maaari kong ipasok ang isang paglalarawan ng isang todo at pagkatapos ng isang bagong pindutan na item, kaya natin subukang magpasok ng isang bagong todo sa listahang ito. Magbigay ng isang seminar JavaScript Framework, at ako ay upang pindutin ang bagong item. Nakukuha ko ito JavaScript alerto na nagsasabing ipatupad sa akin. Mayroon kaming upang ipatupad ito. Ating tingnan ang code para sa mga ito, ang parehong HTML at mga JavaScript. Narito ang aming HTML. Tulad ng iyong nakikita dito, narito ang aming maliit Todos header. Iyon ay matapang na bagay sa itaas, at pagkatapos kami ay may sa input na kahon na may placeholder, at pagkatapos ay mayroong isang tiyak na katangian ng pindutang ito na tawag sa function na ito addTodo. Kahit sino ba ang nais na hulaan kung ano ang na-click sa ay signifying? [Mag-aaral hindi marinig tugon] Magandang, ang sa click ay uri ng tulad ng isang kaganapan, tulad ng pag-click sa mouse lamang ang isang kaganapan, at kung ano ang ginagawa namin ay kami ay tinali ang kaganapan ng pag-click ang pindutang ito upang isakatuparan na function. AddTodo ay ang kaganapang ito handler para sa pag-click na pindutan. 

Tulad ng iyong nakikita, kapag ako ay i-click ang pindutan ng bagong item mga kaganapan sa pag-click ay makakakuha ng fired, at pag-andar na ito ay makakakuha ng tinatawag na. Tignan natin ang function. Tulad ng iyong nakikita, narito ang aking code ng JavaScript sa ngayon. Ano Mayroon akong sa tuktok ay isang pandaigdigang kaayusan ng data para sa aking to-do list. Mukhang isang array. Ito ay lamang ng isang walang laman na array. At pagkatapos ay mayroon akong mga addTodo function na nakita natin mas maaga, at ang tanging linya ng code sa doon ay ang alertong ito. Ito inaalertuhan ipatupad sa akin, at pagkatapos Mayroon akong 2 mga gawain sa kamay. Mayroon akong upang magdagdag ng todo sa global na istraktura ng data, at pagkatapos ay gusto kong maglabas ang sa listahan ng gagawin. Wala masyadong Fancy pa lang, ngunit JavaScript maaari kang maging pamilyar sa, kaya pupuntahan ko pumunta mabagal at suriin ang mga batayan ng JavaScript sa na paraan. 

Sabihin bigyan ito ng isang shot. Ipagpalagay natin na ang gumagamit ay nagpasok ng isang bagay sa kahon na ito. Ko lang ang nai-type ng isang bagay in dito, teksto. Paano ko-uri-uriin ng pag-access na teksto sa pamamagitan ng JavaScript? Tandaan na ang JavaScript, isa sa mga pangunahing tampok ay na ito ay nagbibigay sa amin ito program access sa DOM. Ito ay nagbibigay-daan sa amin upang ma-access ang mga elemento at ang kanilang mga katangian na ito ng aktwal na HTML. Ang paraang ginagawa namin na may hubad buto JavaScript ay maaari naming talagang gamitin ang isang pagpapaandar na JavaScript sa tinatawag getElementByID. Gusto kong mag-imbak ang teksto na nai-type doon sa ilang mga variable, kaya ako pagpunta sa sabihin ng isang bagong variable na tinatawag na new_todo, at ako pagpunta upang makakuha ng na elemento. Ito ay isang function,. GetElementByID. At ngayon ako nakakakuha ng isang elemento sa pamamagitan ng ID, kaya kailangan ko ang mga ID ng na kahon ng teksto, kaya Ibinigay ko ito ang ID new_todo_description. Iyon ay kung paano ako pupunta upang makakuha ng isang elemento. Iyan ang aking argumento sa function na ito, upang tukuyin kung aling mga ID upang makakuha ng. At kaya na ang isang elemento sa HTML, at ito ay may katangian. Nakita mo ang mga ito. Ang mga ito ay mga katangian. Ang mga katangian ng mga elemento ng teksto na nag-iimbak ng pag-input ng user ay tinatawag na halaga. I-save ang halaga ng na text box sa ngayon ito na variable na tinatawag na new_todo. Ngayon Mayroon akong program access sa variable na ito, na kung saan ay uri ng cool na dahil ngayon kung ano ang maaari kong gawin ay maaari kong idagdag ito sa aking to-do list. 

Ang paraan nais naming gawin ito sa JavaScript-at huwag mag-alala kung hindi ka pamilyar sa ito, ngunit lamang ng pagpunta sa pamamagitan nito ay todos.push dahil iyon ang pangalan ng aking global data istraktura up dito, at ako pagpunta sa itulak new_todo. Ito ay mahalaga dahil ngayon ko idinagdag ito sa aking JavaScript representasyon ng na upang listahan ng gagawin. Ngunit ngayon kung paano ako makakakuha ng ito pabalik sa HTML? Mayroon akong upang makahanap ng isang paraan upang ayusin ng itulak ito pabalik. Sa ibang salita, ako uri ng mayroon upang gumuhit ito. Ano kami ay pagpunta sa gawin ay kami ay pagpunta sa gumuhit ang to-do list. Kailangan kong i-update ang iba pang mga HTML sa pahinang iyon, at bilang maaari mong makita, ko na umalis sa maliit na lalagyan dito, ito divider ng pahina kung saan ang ID ay todos, at ako pagpunta sa ilagay ang to-do list doon. Unang pupuntahan ko i-clear out ito dahil, sabihin nating, nagkaroon ng lumang to-listahan ng gagawin doon. Nakakakuha ako ng that elemento sa pamamagitan ng ID muli, at ako sa pag-access ng panloob na HTML na iyon elemento, at pupuntahan ko i-clear iyon. Kung iniwanan namin ang code na ito bilang ay, gusto namin makita ang isang blangko wala doon, at ngayon ay nais ko upang simulan ang pag-render ng aking bagong to-do list. Isa lamang ako ng pagpunta sa lipulin ang aking to-do list. 

Ngayon ang panloob na HTML sa loob ng naturang div todos ay lubos na malinaw, at ngayon ay kailangan ko upang magsimulang magdagdag ng aking listahan. Ang unang bagay na gusto kong idagdag pabalik ay ang unordered tag listahan, kung saan talaga Nagpapahiwatig na ito ay ang simula ng isang unordered listahan. Ngayon para sa bawat elemento sa aking todos array gusto kong i-print ito sa loob ng naturang HTML. Gusto kong isama ito sa ibaba ng listahang ito. Tulad ng sa C, ang maaari kong gamitin para sa isang loop, at ako pagpunta sa magsimula sa simula ng aking listahan elemento sa 0, at ako pagpunta sa pumunta sa lahat ng mga paraan upang ang haba ng listahan. Maaari naming talagang makakuha ang haba ng isang array sa JavaScript gamit ang haba ng ari-arian. Isa lamang ako ng pagpunta sa gawin ang isang bagay na halos kapareho sa loob ng dito upang i-print out that elemento. Maaari ko bang i-access muli ang todos div, ang panloob na HTML ari-arian ng iyon, at pupuntahan ko idagdag ito sa mga bagong item sa listahan, at na pupuntahan ay napapalibutan ng ito li tag, at ako pagpunta sa may pagdugtungin ang + operator, at iyon ang ith elemento ng aking todos array, at pagkatapos ay ako pagpunta upang isara ang tag na iyon. Ngayon para sa bawat elemento magdaragdag kami ng bagong entry listahan. At pagkatapos ay ang lahat ng namin talagang kailangan lang gawin ay isara off sa tag na iyon. Ko lang ang kailangan upang isara off na unordered listahan tag. 

Huwag kang makakuha ng isang pakiramdam para sa kung paano na gumagana? Binubuksan nito ang buong listahan. Ito ay nagdadagdag ng mga indibidwal na mga elemento mula sa todos listahan sa listahan, at pagkatapos that isinasara ang buong listahan, at ito ay ang aking addTodo function. Ko talaga magsimula sa pamamagitan ng pagkuha ng todo mula sa kahon ng teksto. Idagdag ko na sa array todos, at pagkatapos kong muling i-render ang to-do list. Ngayon ay maaari ba akong magdagdag ng mga item sa aking listahan. Ito ay uri ng kapana-panabik dahil sa loob lamang ng ilang linya ng code talaga gumawa kami ng isang to-do list kung saan maaari kaming magdagdag ng mga item. Mahusay. Iyon uri ng isang pangunahing panimula sa JavaScript. Huwag mag-alala masyadong maraming tungkol sa syntax para sa ngayon, ngunit isipin ang tungkol ito conceptually. Nagkaroon kami ng ilang mga HTML. Nagkaroon kami ng isang kahon ng teksto sa pahina na talaga pinapayagan ang mga user sa input ng isang to-do item upang idagdag. At pagkatapos ay aming ginamit ang JavaScript upang makuha that todo mula sa kahon ng teksto. Kami that nakaimbak sa loob ng isang array JavaScript, na kung saan ay isa lamang tulad ng ang aming program na representasyon ng naturang to-listahan ng gagawin, at pagkatapos namin ang naka-print na ito. Ito ay todos.js. 

Ito ay uri ng cool na, ngunit kung paano namin maaaring tumagal ito nang higit pa? Well, bilang maaari mong makita, ito ay hindi tulad ng isang kumpletong i-do list. Halimbawa, hindi ko maaaring magmarka ng anumang ng mga item na ito bilang hindi kumpleto, kung gusto Nais kong reprioritize ang mga item o magtanggal ng mga item. Ito ay okay, ngunit maaari naming tumagal ito nang higit pa. Hindi ako pagpunta sa makipag-usap ng masyadong maraming tungkol sa pagdaragdag ng dagdag na mga tampok, ngunit maaari kaming magsagawa ng karagdagang that. Tayo'y makipag-usap tungkol sa pagdagdag ng isa pang tampok na ito upang i-do list, na kung saan ay pagpunta sa ma-ma-check sa isang indibidwal na gawin item at ito ay tumawid out, kaya talaga sinasabi ko nagawa mo na ito. Tingnan natin ang ilang mga code na maaaring tuparin iyon. Pansinin kung ano ko na tapos sa tuktok ay Idinagdag ko na isang bagong pandaigdigang array na tinatawag na kumpleto. Talaga gumagamit ako ng ito upang mag-imbak kung ang mga item sa sa-do list ay kumpleto o hindi. Ito ay isang paraan upang gawin ito. Kung tumingin ako sa pagpapatupad ng mga ito, ang display, talaga kung ipasok ko ng todo at pindutin ko ito toggle pindutan ito tumatawid out, nang sa gayon ang bawat item sa listahan na ito ay alinman sa isang kumpletong o hindi kumpletong estado, at gumagamit ako ng isa pang array na kumakatawan na. 

Talaga para sa bawat todo sa ganoong array todos mayroong isang item sa kumpletong array that talaga ay nagpapahiwatig kung iyon ay kumpleto o hindi. Nagkaroon na ako gumawa medyo minimal na mga pagbabago sa code na ito, kaya narito ang aming addTodo function. Pansinin na dito ako itulak ito papunta sa array, at pagkatapos ay ako itulak ang isang 0 na iyon kumpletong array, talaga sa may parallel na ang mga bagong push todo na sabihing Ako pagdaragdag ng item na ito, at ito ay isinama sa mga halagang ito, na nangangahulugan na ito ay hindi kumpleto. At pagkatapos ay ako ang redrawing sa-do list. Ngayon, mapapansin Idinagdag ko na ito drawTodoList function. Ito ay tumatagal ng maraming mga code nagkaroon kami dati, talaga nililimas ang mga kahon at pagkatapos ay humahatak sa bagong to-do list. Ngunit mapapansin na nasa loob ng mga ito para sa loop ang ginagawa namin ng kaunti pa sa ngayon. Talaga namin ang pagsuri kung ang item naaayon sa ith todo dito Kumpleto na, at kami ay kumikilos naiiba sa mga pangyayari 2. Kung ito ay kumpleto, kami ay idinadagdag ang del tag, na kung saan ay isa lamang sa mga paraan na maaari mong makuha na strike sa pamamagitan ng epekto tumatawid out ang to-do list kung ito ay kumpleto, at kung hindi, hindi kami kasama nito. At upang ang uri ng tumatagal ng pag-aalaga ng mga iyon, 

at iyan ay isang paraan upang makamit ito. At pagkatapos ay mapapansin kapag ang gumagamit-click ang isa sa mga magpalipat-lipat namin ang pagkumpleto ng katayuan nito. Kapag nag-click ang gumagamit, kami baligtarin kung ito ay nakumpleto o hindi, at pagkatapos ay gagamitin namin redraw ito. Ang ganitong uri ng mga gawa. Mayroon kaming mga function na isakatuparan ang kanilang sariling mga gawain, at ito ay okay. Mayroon bang anumang bagay na maaari naming gawin mas mahusay na tungkol dito, bagaman? Pansinin mayroon kaming mga 2 global array. Kung ito ay C, at nagkaroon kami 2 array na uri ng kinatawan data na na uri ng mga may kaugnayan sa ilang mga paraan kung ano ang gusto naming gamitin sa C upang pagsamahin ang mga patlang 2 sa isang bagay na pinapalooban ang parehong piraso ng impormasyon? Kahit Sino gustong gumawa ng suhestiyon? [Mag-aaral hindi marinig tugon] 

Mismong, kaya maaari kaming gumamit ng ilang mga uri ng struct, at kung sa tingin mo pabalik sa, sabihin nating, pset 3, matandaan nagkaroon kami ng diksyunaryo, at pagkatapos ay nagkaroon kami kung ang mga salita noon ay sa diksyunaryo, at lahat ng impormasyon na magkasama sa loob ng ilang mga istraktura ng data. Ang isang bagay na maaari kong gawin sa ang code na ito upang maiwasan ang pagkakaroon ng mga 2 magkaibang array para sa mga katulad na piraso ng impormasyon ay maaari kong pagsamahin ang mga ito sa isang bagay na JavaScript. Magpahinga ng pagtingin sa na. Pansinin ko lamang magkaroon ng isang array sa tuktok ngayon at kung ano ako ay tapos-at ito lamang ang JavaScript syntax para sa uri ng paglikha ng isang literal na bersyon ng isang bagay na, at mapansin may 2 ari-arian, kaya kami ay may mga todo, at ito ay iningatan kasama ng mga ito man kumpleto o hindi kumpleto. Ito ay halos katulad na code. Ginagamit namin ang mga bagay JavaScript. Ang ganitong uri ng bagay na nagpapabuti. Tulad ngayon, ang lahat ng mga patlang na ito ng mga kaugnay na impormasyon ay pinananatiling magkasama. Kapag pumunta kami upang i-print ito, maaari naming ma-access ang mga patlang. 

Pansinin kung paano ang ginagawa namin todos [i]. Kumpletong sa halip na pagtingin sa kumpletong array nang hiwalay, at mapansin kapag gusto naming makuha ang to-do string namin nakukuha ang to-do-arian na ng todo, kaya ang ganitong uri ng saysay dahil bawat item ay may mga katangian ng tunay tungkol dito. Mayroon itong todo, at mayroon itong mga ito man kumpleto o hindi. Hindi masyadong maraming mga pagbabago doon pagtakbo, idinagdag lamang ng ilang higit sa code. Ito ay isang pagpapabuti sa ilang mga fronts, tama? Ibig kong sabihin, isinasali namin ang disenyo ng kaunti. Ngayon kami ay may mga bagay na talaga encapsulate ang data na ito. Mayroon bang anumang mas maaari naming gawin mula dito sa mga tuntunin ng JavaScript? I notice na ang code na ito dito mismo para sa pagkuha ng mga panloob na HTML ng isang div ay isang maliit, hulaan ko, ang haba. Mayroong document.getElementByID ("todos"). InnerHTML. Ang isang bagay na maaari naming gawin upang gumawa ng code na ito hitsura ng kaunti friendlier kaya hindi ako ay magkakaroon upang mapanatili ang pag-scroll pakaliwa at pakanan, papunta at pabalik, ay kaya kong gumamit ng isang library tulad ng jQuery. 

Ating tingnan ang Seminar 2, at ito ang parehong code, ngunit ito ay tapos na may jQuery. Hindi ka maaaring masyadong pamilyar sa jQuery, ngunit lamang malaman na ang jQuery ay isang uri ng isang library para sa JavaScript na ginagawang mas madali upang gumawa ng mga bagay tulad ng mga elemento ng mga indibidwal na pag-access ng DOM. Narito sa halip na sinasabi document.getElementByID ("todos"). InnerHTML Maaari ko bang gamitin ang magkano ang mas malinis na paraan sa jQuery, na kung saan ay lamang na gamitin ang tagapili. Tulad ng iyong nakikita, ang code na ito ay makakuha ng isang maliit na mas malinis, halos katulad na pagtakbo, ngunit iyon ang ideya. Nakakita kami ng dalawang mga bagay na sa ngayon, kaya namin magsimula sa pamamagitan lamang ng raw JavaScript pagpapatupad. Nagdagdag kami ng mga bagong tampok at nagpakita kung paano namin mapapabuti ito sa lamang kung ano ang mayroon kami sa JavaScript. 

Kahit sino ba nakakakita ng anumang kahirapan sa disenyo na ito? Lalo, hulaan-o ko hindi kinakailangang paghihirap ngunit sabihin nating hindi namin ay paggawa ng isang to-do list proyekto, at bukas kami nagpasya gusto naming gumawa ng isang listahan ng grocery o ng isang shopping listahan proyekto. Ang isang pulutong ng mga tampok na ito ay halos katulad na. Ang isang pulutong ng mga bagay na gusto naming upang makakuha ng out ng JavaScript ay laganap, at ito underscore ang pangangailangan para sa ilang mga uri ng paraan ng paggawa ng mas madali ito gawin. Ako ay nagkaroon na bumuo ng up ang lahat ng ito HTML access, ang lahat ng mga ito DOM access, tulad ng pupuntahan ko ay kumakatawan sa sa-do list sa modelong ito. At mapansin ako responsable bilang mga developer ng JavaScript para sa pagpapanatili ng HTML at JavaScript na mayroon akong sa pag-sync. Wala awtomatikong ginawa na JavaScript na representasyon o ang to-do list makapag hunhon out sa HTML. Wala ipinapatupad na maliban sa akin. Mayroon akong upang isulat ang mabubunot to-do list function. At na maaaring hindi-ko ibig sabihin, ito ay makatwirang upang gawin iyon, ngunit maaari itong maging nakakapagod minsan. Kung mayroon kang isang mas malaking proyekto, na maaaring maging mahirap. 

Framework, ang isa sa mga layunin ng Framework ay upang gawing simple na proseso at uri ng mga kadahilanan out ang mga karaniwang-ako hulaan maaari mong sabihin-disenyo pattern na ang mga tao sa pangkalahatan ay may ilang mga uri ng paraan ng kumakatawan sa data, kung iyon ang isang listahan ng mga kaibigan, kung iyon ang mapa impormasyon o isang bagay o sa isang listahan ng gagawin. Ang ilang mga tao ay may isang pangkalahatang paraan ng kumakatawan sa impormasyon, at sila sa pangkalahatan ay kailangan upang mapanatili ang impormasyon na uri ng mga naka-sync sa pagitan ng kung ano ang nakikita ng gumagamit sa ilang mga uri ng view, makipag-usap sa mga tuntunin ng tulad ng controller view ng modelo na iyong nakita sa lecture, at pagkatapos ay ang modelo, na sa kasong ito ay ito JavaScript array. Framework bigyan kami ng isang paraan upang malutas na ang problema. Ngayon sabihin tumingin sa ang pagpapatupad ng ito to-do list sa isang framework na tinatawag angularjs. Ito ay ito. Pansinin ito umaangkop sa isang slide. Hindi ko kailangang mag-scroll sa kaliwa at kanan. Iyon ay marahil hindi isang magandang dahilan upang inirerekomenda ang paggamit ng isang framework, pero notice ako kailanman-access indibidwal na mga elemento ng HTML dito? Ba ako kailanman pagpunta sa DOM? Nakikita mo ba ang anumang document.getElementByID o isang bagay tulad na? Hindi, iyan ay nawala. 

Anggular ay tumutulong sa amin panatilihin ang DOM at ang aming JavaScript na representasyon ng isang bagay uri ng in-sync, kaya kung ito ay hindi sa file js, kung walang paraan ng pagkuha ng programming sa lahat na HTML nilalaman mula sa JavaScript ay kung paano namin ang pagpapanatiling ito sa pag-sync? Kung ito ay wala sa. Js file, ito ay nakuha na maging sa HTML, tama? Ito ay ang bagong bersyon ng file na HTML, at mapansin nagdagdag kami ng maraming dito. Pansinin mayroong mga bagong katangian na sinasabi Ng-click at Ng-umuulit. Anggular diskarte sa paglutas sa problemang ito ng paghihirap sa disenyo ay ang isa lamang gumawa HTML magkano ang mas malakas. Anggular ay isang paraan ng nagpapahintulot sa iyo na gumawa ng HTML medyo mas makahulugan. Halimbawa, maaari kong sabihin na pupuntahan ko itali o isailalim ang text box sa isang variable sa loob ng aking angular JavaScript code. Ito Ng-modelo ginagawa lamang na. Iyon talaga sabi na ang item sa loob ng text box na ito, lamang iugnay na may mga variable new_todo_description sa loob ng code ng JavaScript. Iyon ay lubhang makapangyarihan dahil hindi ko na kailangang tahasang pumunta sa ang DOM upang makakuha ng impormasyon na iyon. Hindi ko na kailangang sabihin document.getElementByID. Hindi ko na kailangang gumamit ng jQueries tulad ng DOM access. Maaari ko bang iugnay ito sa isang variable, at pagkatapos ay kapag ko babaguhin na variable sa loob ng JavaScript na ito ay pinananatiling sa sync kasama ang HTML, kaya na pinapasimple ang proseso ng pagkakaroon upang bumalik-balik sa pagitan ng dalawang. Ba na magkaroon ng kahulugan? 

At mapansin walang HTML code access. Lamang Nagsagawa kami ng HTML mas malakas, at ngayon, halimbawa, maaari naming gawin ang mga bagay na tulad nito, gusto kapag nag-click sa ito, tinatawag ito ng pag-andar sa loob ng saklaw ng todos.js, at maaari naming gawin na bago, ngunit may mga iba pang mga bagay, tulad ng ito Ng-modelo, at mapapansin ang ganitong Ng-umuulit. Ano sa tingin ninyo ito ginagawa? Narito ang aming unordered listahan mula sa bago. Mayroon kaming mga ul tag, ngunit ako kailanman nagre-render na listahan sa loob ng code ng JavaScript? Hindi ako kailanman tahasang pag-render na listahan. Paano ito gumagana? Well, ang paraan ng anggular accomplishes ito ay ito ay tinatawag na isang repeater. Talaga ito sabi na gusto kong i-print ang HTML para sa bawat todo sa loob ng aking todos array. Sa Loob ng todos.jr mayroong isang todos array dito mismo, at ito ay magsasabi sa anggular go through na array, at para sa bawat elemento makita mo Gusto ko mong i-print ang HTML. Ito ay uri ng kahanga-hangang dahil lamang ko maaaring gawin ito nang hindi na kinakailangang upang magsulat ng isang para sa loop, na para sa isang to-do list na noon ay lamang ng 30 mga linya ng code ay maaaring hindi ang pinaka-kapaki-pakinabang na bagay, ngunit kung mayroon kang isang malaking proyekto ito, maaaring makakuha ng napaka-maginhawang. 

Ito ay isang solusyon sa problemang ito, sa paggawa ng HTML mas malakas, at na nagbibigay-daan sa amin upang panatilihin ang JavaScript at HTML sa pag-sync. May mga iba pang posibleng paraan upang malutas ang problemang ito, at hindi framework tuwing ginagawa ito. Hindi framework bawat gumagana kasama ang mga linyang ito. Ang ilang mga Framework ay may iba't ibang approach na ito, at maaari mong makita na masiyahan ka sa coding sa isang balangkas sa ibabaw ng iba pang mga. Tingnan natin ang isa pa. Ito ang to-do list ma-code up sa isang framework na tinatawag gulugod. Pupunta ako upang pumunta sa pamamagitan ng ito mabilis. Kukunin ko magsimula sa HTML bago kami pumunta doon. Isang segundo. Simula sa HTML, pati na mapansin mo, ang aming HTML ay katulad na katulad sa kung ano ito ay bago, kaya hindi masyadong maraming bagong na sa harap. Ngunit ang aming js file ay isang maliit na naiiba. Gulugod uri ng may ideyang ito, o nagbubuo mula sa ideya na ng maraming kung ano ang ginagawa namin sa, sabihin nating, ang aming JavaScript proyekto ay isipin ang tungkol sa modelo at mga koleksyon ng mga modelo na ito. Ito ay maaaring, halimbawa, isang larawan at mga koleksyon ng mga larawan, o ang ideya ng isang kaibigan at mga koleksyon ng mga kaibigan. At malimit kapag kami ay mga programa application ng JavaScript magpapadala kami ng uri-uriin ay kumakatawan sa mga ideya ng pagkakaroon ng isang koleksyon ng mga kaibigan sa paanuman sa JavaScript, at gulugod ay nagbibigay sa amin ang layer na ito sa tuktok ng JavaScript sa mga umiiral na array at object upang gawin mas malakas na mga bagay na may mas madali. 

Dito ko na ang isang tinukoy na-do modelo, at hindi mo na kailangang mag-alala masyadong maraming tungkol sa syntax, ngunit mapapansin na kung ano ang isa sa mga katangian ng mga ito? Ito ay may isang default na patlang. Gulugod ay nagbibigay-daan sa akin upang tukuyin ang naka-off ang bat anumang bagong mga to-do na lumikha ako ay pagpunta sa may mga default. Ngayon ay maaari ko bang i-customize ito, ngunit nagagawang tukuyin ang mga default maganda, at ito ay uri ng maginhawang dahil ito ay hindi isang bagay na tulad ng likas na taglay ng JavaScript, at ngayon hindi ko na kailangang tahasan sabihin na ang todos ay hindi kumpleto. Maaari ko bang sabihin karapatan off ang bat na todos ay pagpunta sa markahan bilang hindi kumpleto. Pansinin pagkatapos ay kung ano ito? Ngayon Mayroon akong to-do list, at iyan ay isang koleksyon. Pansinin ang patlang na nauugnay sa na nagsasabing modelo todo. Ito ang aking paraan ng pagsasabi sa katigasan ng loob na Pupunta ako sa maisip ng mga isang koleksyon ng mga indibidwal na todos. Ito ay isa lamang sa modelo istraktura para sa aking programa. Narito Mayroon akong na ito ideya ng isang koleksyon, at isa lamang ang mga item na nilalaman sa na koleksyon ay lahat ng pagpunta sa maging ang mga todos, at iyon ay napaka-natural sa puntong ito dahil gawin ba akong magkaroon todos, at mayroon akong mga ito sa isang koleksyon. 

Tingnan natin ang isang kaunti pa ng ito. Narito ang isang gulugod view. Ang iba pang mga bagay na gulugod sabi ay na ng maraming mga modelo na iyong iniisip tungkol sa o kahit na mga koleksyon ay pagpunta sa kailangan upang magkaroon ng ilang mga paraan ng na ipinapakita. Kailangan naming i-render na to-do list, at hindi magiging maganda kung kami maaaring magbigay ng para sa bawat modelo o iugnay sa bawat modelo sa pagtingin na ito na nagbibigay-daan sa amin upang hulaan ko ikonekta ang dalawang magkasama? Sapagkat bago nagkaroon kami upang gamitin para sa isang loop na tumakbo sa pamamagitan ng bawat todo sa aming listahan at pagkatapos ay i-print ito dito maaari naming ikonekta talaga ito sa modelong ito. Ito ay isang na-do view. Ito ay kaugnay ng todo natagpuan namin nang mas maaga. Ngayon todo bawat ay displayable o renderable sa pamamagitan ng ito upang gawin-view. Pansinin ang ilan sa mga patlang. Ano sa tingin ninyo tagName ito, tagName: li? Tandaan mula sa bago kapag gusto naming mag-render ng todo Gusto naming magkaroon upang tahasang ipares ang aming todos na may ganitong tag li. Ngayon kami ay nagsasabi na kung saan ito ay todo pagpunta sa mabuhay ay pagpunta sa maging sa loob ng isang li tag. At ngayon din kami uugnay ng mga kaganapan sa aming todos. 

Todo ang bawat isang ito ng kaganapan. Kung nag-click ka medyo magkano ang toggle pindutan, na kung ano ang ako sinasabi doon, pagkatapos ay isa lamang markahan ang todo bilang ng kabaligtaran ng kung ano ito ay bago at pagkatapos ay muling i-render ang application. Ito ay uri ng katulad sa code bago. Tandaan kapag kami minarkahan mo ito bilang alinman sa tapat o- at pagkatapos naming muli render na ito. Ngunit ngayon mapansin ang kaganapang ito na ginamit upang maging isang bagay na noon ay sa HTML. Ito ay pag-upo doon. Ang pindutan ay nagkaroon ng on-click. Kapag nag-click ang pindutan, ito uri ng gumagana ang mga bagay sa set up na todo sa hindi kumpleto. Narito kami nauugnay na kaganapan ng pag-click na toggle pindutan at pagtaliwas ito man on o off sa view na ito. 

Ito ay isang magaling na paraan ng pagse-set up ang kaganapang ito nang sa gayon ay masyadong matatag na itinali sa view na ito, at kaya mapapansin ang isang ito nang higit pa. Mayroon akong na ito render pamamaraan, at hindi namin na kailangang pumunta sa pamamagitan ng mga detalye. Ito ay uri ng katulad ng kung ano nagkaroon kami dati, ngunit napansin hindi ako looping sa pamamagitan ng kahit ano. Hindi ako nagpi-print na ul tag na uri ng mga sinasabi ng mga pupuntahan ko i-print ang lahat ng mga elemento. Ako ay nagbibigay ng pag-andar para sa pag-render ng isang ito to-do item. Ito ay isang napaka-malakas na konsepto dahil talaga ang aming to-do list ay binubuo ng lahat ng mga todos, at kung maaari naming tukuyin talaga ang mga paraan upang i-render ang isa sa mga todos pagkatapos ay maaari naming magkaroon ang aming makapangyarihang gulugod per se-render ang lahat ng mga todos pamamagitan ng pagtawag ng render pamamaraan sa indibidwal na todos. Ito ay isang konsepto na ay kapaki-pakinabang dito. Ngayon ay isang magandang tanong na magtanong ay kung paano ang application na ito na magkasama? Dahil kami ay may mga kakayahan upang i-render ang isa todo, ngunit paano namin makuha ang ideya ng maramihang todos? 

Magpahinga ng pagtingin sa na. Ito ang huling bahagi. Pansinin mayroon kaming upang gawin-view ng listahan dito, at napansin ito ay din ng isang view. At upang pumunta sa paglipas ng ilang mga bagay, ito initialize pamamaraan ay tinatawag na kapag una naming lumikha ng ito sa listahan ng gagawin. Tulad ng iyong nakikita, ito ay tulad ng paglikha ng mga to-do list at uugnay ito sa view na ito. At pagkatapos ay ako ay nagdagdag ng mga function dito kaya talaga kapag nagdagdag ka ng isang item- ito ay katulad sa paraan addItem nakita natin bago- Pupunta ako sa lumikha ng isang bagong bagay todo, at mapapansin talaga ako sa pagtawag ang bagong paraan ng todo, kaya ito ay ibinigay sa pamamagitan ng katigasan ng loob, at ang maaari kong pumasa sa aking mga katangiang dito. At ngayon bawat todo na aking nilikha mo gamit na ito ay makakakuha ng na-andar na nakita natin dati. Pansinin ako ng pag-clear ang mga kahon ng teksto bago-isang maliit na maliit na detalye- at pagkatapos ay ako pagdaragdag ng koleksyon na ito. 

Ito halos tila kakaiba dahil bago pa lang namin ay nagkaroon na gawin na todos.push, at pagkatapos kami ay tapos na, at ito ay maaaring mukhang mas komplikado para sa partikular na proyekto, at maaari mong makita na gulugod o kahit na angular o anumang iba pang mga balangkas ay hindi angkop sa iyong partikular na proyekto, ngunit sa tingin ko mahalagang isipin ang tungkol kung ano ang ibig sabihin nito sa isang mas malaking sukat para sa mas malaking proyekto, dahil kung kami ay may isang mas malaking proyekto kung saan tayo ay kumakatawan ang ilang mga talagang complex koleksyon, isang bagay na mas malalim pa sa isang to-do list, sabihin nating ang isang listahan ng mga kaibigan o isang bagay tulad na ito, maaaring dumating sa madaling-magamit na dahil maaari naming ayusin ang aming code sa isang tunay na maginhawang paraan, sa isang paraan na gagawing mas madali para sa ibang tao sino ang gusto upang kunin ang isang proyekto upang bumuo sa. Maaari mong makita na ito ay nagbibigay ng maraming mga istraktura. At pagkatapos ay ako sa pagtawag sa render ito addItem. I-render, bilang maaari mong makita, at hindi mo na kailangang mag-hawakang mahigpit na ito buong syntax, ngunit isa lamang para sa bawat modelo ito ng pagpunta sa tumawag sa indibidwal na mga pamamaraan sa pag-render. Iyon uri ng kung saan ito ay nagmumula sa. Sabihin lamang tukuyin kung paano mag-render ang mga indibidwal na todos, at pagkatapos ay sabihin kola iyon nang magkakasama bilang isang buo. Ngunit ito ay nagbibigay ng isang paraan ng abstraction, dahil maaari kong baguhin ang paraan magpasya ko upang i-render ang mga indibidwal na todos, at hindi ko kailangang baguhin ang anuman sa ang code na ito. Iyan ay uri ng cool. 

Ba ang sinuman may anumang mga katanungan tungkol sa JavaScript Framework? [Mag-aaral hindi marinig tanong] Oh, ba, na isang mahusay na tanong. Ang tanong ay kung paano isinama ko ang Framework? Karamihan sa JavaScript Framework ay talaga lamang js file na maaari mong isama sa tuktok ng iyong code. Pansinin sa head bahagi ng aking HTML Mayroon akong lahat ng mga script tag, at ang pangwakas na tag na script ay ang code na namin ang nakasulat. At pagkatapos ay ang framework 3 mga code lang din ang script tag. Ako kasama ang mga ito mula sa kung ano ang tinatawag na isang CDN, na nagbibigay-daan sa akin upang makakuha ng mga ito mula sa ibang tao sa puntong ito ngunit framework bawat ay may ito-maaari kang medyo magkano mahanap ang nilalaman para sa isang partikular na library JavaScript magagamit sa ilang mga CDN o isang bagay tulad na, at pagkatapos ay maaari mong isama ang mga script tag. Ba na magkaroon ng kahulugan? Cool. 

Iyon ang 2 magkaibang approach. Iyon ang mga hindi lamang ang approach sa paglutas ng problemang ito. Mayroong maraming iba't ibang mga bagay na isang tao ay maaaring gawin, at mayroong maraming Framework out doon. Anggular at gulugod huwag sabihin ang buong kuwento. Good luck sa iyong huling proyekto, at salamat sa inyo. [CS50.TV]