[Powered by Google Translate] [Семинар] [JavaScript Рамки: Зошто и Како] [Кевин Шмид] [Универзитетот Харвард] [Ова е CS50.] [CS50.TV] 

Здраво, сите. Добредојдовте на вклучите Javascript-Рамки семинарот. Моето име е Кевин, а денес јас ќе одам да се зборува за вклучите Javascript-рамка, а целта на овој семинар е да не можеш да, да речеме, господар на одредена рамка по себе но да ви даде широк вовед во неколку рамки и да покаже зошто ние некогаш ќе сакате да го користите рамка. 

Пред да го направите тоа, јас ќе обезбеди малку позадина во JavaScript, а потоа ние ќе го земам од таму. Ние ќе треба да почне со спроведување на to-do листа. Тука е нашата задача листа за денес. Тоа е вид на смешно. Ние мора да се спроведе to-do листа во JavaScript. Тоа е она што се случува да изгледа, па тоа е нашата прва цел. Ние нема да се користи рамка за да го направите тоа. Ние ќе JavaScript код, и да добијат to-do листа да работат. Тогаш ние ќе треба да се подобри дизајнот, без користење на рамка. Ние ќе се дискутира на различни работи можеме да направиме со само го вклучите Javascript-сам да ја направиме нашата to-do листа малку повеќе добро дизајниран. Тогаш ние ќе треба да се фрли во некои jQuery, а потоа ние ќе треба да погледне во истата to-do листа, само имплементирани во различни рамки, и ние ќе разговараме  добрите и лошите страни на патот. 

Ајде да почнеме спроведување на таа to-do листа. Да речеме дека ние се дадени на овој HTML код. Одам да се направи ова малку помали. Како што можете да видите, имам малку насловот што вели Todo и малку кутија каде што можете да внесете опис на довршување а потоа се додава нова точка копче, па ајде пробајте да внесете нова довршување на оваа листа. Испрати го вклучите Javascript-рамка семинар, и јас сум да ја погоди нова точка. Јас го добивате ова алармирање JavaScript за кои вели спроведување мене. Ние мора да се имплементира. Ајде проверете го кодот за ова, и HTML и JavaScript. Тука е нашата HTML. Како што можете да ја видите тука, тука е нашата мала Todos заглавието. Тоа беше тоа храбар нешто на врвот, и потоа имаме влез кутија со случаеви, и потоа, тука е одреден атрибут на ова копче кој повикува оваа функција addTodo. Дали некој сакате да се погоди она што на клик е означувајќи? [Студентите нечујни одговор] Добро, за клик е вид на како настан, како кликнување на глувчето е само еден настан, и она што го правиме е ние сме врзување случај на кликнување на ова копче за да го изврши таа функција. AddTodo е овој настан управувачот за кликање дека копче. 

Како што можете да видите, кога ќе кликнете на нова содржина копчето на on кликнете настан добива отпуштен, и оваа функција добива се нарекува. Ајде да погледнеме во функција. Како што можете да видите, овде е мојата JavaScript код досега. Она што го имам на врвот е глобална структура на податоци за мојот to-do листа. Тоа изгледа како низа. Тоа е само празна низа. А потоа имам addTodo функција што сме го виделе порано, и само линија код во таму е ова алармирање. Тоа предупредува спроведување мене, а потоа имам 2 задачите во рака. Морам да додадете довршување на таа глобална структура на податоци, и тогаш сакам да го извлече to-do листа. Ништо не е премногу фенси само уште, но го вклучите Javascript-може да биде запознаен со, па ќе одам да се движи бавно и преглед на основите на JavaScript на тој начин. 

Ајде да им даде на овој шут. Да речеме, на корисникот ќе влезе нешто во ова поле. Јас само ја внеле нешто овде, текст. Како можам да се најде на пристап дека текстот преку JavaScript? Се сеќавам дека го вклучите Javascript-, една од неговите основни карактеристики е дека тоа ни дава овој програмски пристап до ДОМ. Таа ни овозможува да пристапите елементи и нивни својства на оваа вистинската HTML. Начинот на кој ние го правам тоа со голи коски вклучите Javascript- е ние, всушност, се користи некоја функција во вклучите Javascript-се нарекува getElementByID. Сакам да ја зачувате текстот што е напишан таму во некои променлива, па ќе одам да се каже нова променлива наречена new_todo, и јас одам да се добие тој елемент. Ова е функција,. GetElementByID. И сега јас сум добивање на елемент од страна на проект, па ми треба проект на тоа поле за текст, па јас сум го дал на проект new_todo_description. Тоа е како јас одам да се добие елемент. Тоа е мојот аргумент на оваа функција, да се наведе кој проект да се добие. И така тоа е еден елемент во HTML, и има својства. Сте виделе овие. Тие се атрибути. Атрибутот на текстот елемент кој ги зачувува влез на корисникот е наречен вредност. Чував вредноста на тој текст кутија сега во оваа променлива наречена new_todo. Сега имам програмски пристап до оваа променлива, што е вид на ладно бидејќи сега она што можам да направите е да можам да го додадете во мојата to-do листа. 

Начинот на кој ние би го направил тоа во вклучите Javascript-и не грижете се ако не сте запознаени со ова, но само одат преку неа е todos.push затоа што тоа е името на мојата глобалната структура на податоци до тука, и јас одам да им помогнам на new_todo. Ова е голема, бидејќи сега имам тоа додаден во мојата вклучите Javascript- застапеност на кои to-do листа. Но сега како можам да го добие назад на HTML? Морам да се најде начин да се најде на турнете го назад. Со други зборови, јас вид на мора да се подготви ова. Она што ние ќе треба да направите е ние ќе треба да се подготви на to-do листа. Јас треба да се ажурира други HTML на таа страница, и како што можете да видите, јас го напуштив оваа мала сад тука, овој делител на страница чиј проект е Todos, и јас одам да се стави на to-do листа таму. Прво, ќе одам да го исчистите од, бидејќи, да речеме, имаше еден стар to-do листа таму. Јас сум добивање на тој елемент од проект повторно, и јас сум пристапуваат на внатрешниот HTML на тој елемент, и јас одам да се расчисти тоа. Ако го напуштивме овој код како што е, ние би видите празни ништо таму, и сега сакам да започне рендерирање мојот нов to-do листа. Јас сум во основа ќе ги избрише од мојот to-do листа. 

Сега внатрешниот HTML внатре во тоа Todos div е сосема јасна, и сега јас треба да започне додавајќи мојата листа. Првото нешто што сакате да го додадете назад е неподреден список ознака, што во основа означува дека ова е почеток на неподреден список. Сега за секој елемент во мојата Todos низа Сакам да го испечатите внатрешноста на кои HTML. Сакам да ја додадете на до дното на оваа листа. Исто како и во C, можам да го користите за телефонска линија, а јас ќе одам да започне во почетокот на мојата листа на елемент 0, а јас ќе одам да одат сите на патот на должината на листата. Ние всушност може да се добие на должината на низата во JavaScript користење на должината имот. Во суштина јас ќе одам да направите нешто многу слично внатрешноста на тука за печатење на тој елемент. Јас повторно да пристапите на Todos div, внатрешниот HTML сопственост на тоа, и јас одам да го додадете на овој нов елемент во листата, и дека се случува да биде опкружен со овој таг Ли, и јас одам да concatenate со + оператор, и тоа е ith елемент на мојот Todos низа, а потоа јас ќе одам да се затвори таа ознака. Сега за секој елемент ние ќе додадете нова листа влез. И тогаш сите ние навистина треба да направите е да затворам дека таг. Јас само треба да се затвори што неподреден список таг. 

Дали ви се добие чувство за како тоа функционира? Ова го отвора целата листа. Ова додава поединечни елементи од Todos листа на листата, а потоа дека затвора целата листа, и ова е мојот addTodo функција. Јас во основа да започне со добивање на довршување од полето за текст. Јас додаваат дека на Todos низа, а потоа јас повторно ја даде на to-do листа. Сега можам да додадете елементи на мојата листа. Ова е вид на возбудлив, бидејќи во само неколку линии на код ние сме во основа направени на to-do листа, каде што можеме да додадете објекти. Одлично. Тоа е вид на основен вовед во вклучите Javascript-. Не грижете се премногу за синтаксата за сега, но се размислува за ова концептуално. Имавме некои HTML. Имавме полето за текст на страница, која во основа е дозволено на корисниците да внесувате to-do елемент, за да ја додадете. А потоа ние се користи JavaScript за да пренесам дека довршување од тој текст полето. Ние чуваат дека во внатрешноста на низа го вклучите Javascript-, кој е во основа како нашите програмски застапеност на кои to-do листа, и тогаш ние го испечати. Ова е todos.js. 

Ова е вид на ладно, но како можеме да ја искористам оваа понатаму? Добро, како што можете да видите, ова не е како комплетен to-do листа. На пример, не можам да се одбележи некој од овие елементи како неуредна, како ако сакав да ги реприоретизираат предмети или избришете ставки. Ова е во ред, но можеме да ја искористам оваа понатаму. Јас не одам да се зборува премногу за додавање на дополнителни функции, но ние би можеле да се земе дека понатаму. Ајде да зборуваме за додавање на уште една карактеристика на оваа to-do листа, кој се случува да се биде во можност да се провери на поединецот to-do содржина и таа да биде прецртан, значи, во основа велејќи дека јас го направив тоа. Да ги погледнеме некои код кој може да се постигне тоа. Забележи она што го направив, на врвот е додадов нова глобална низа наречен завршена. Јас сум во основа со користење на овој за да ја запази дали точките на to-do листа се комплетни или не. Ова е еден начин да го направите тоа. Ако гледам во спроведувањето на овој, на екранот, во основа, ако јас внесете довршување и го притискам ова вклучите копчето тој преминува надвор, па секоја ставка на оваа листа има или целосна или нецелосни држава, и јас сум со користење на друг низа да се претставуваат дека. 

Основа за секој довршување во таа Todos низа има една ставка во комплетен спектар, која во основа покажува без разлика дали тоа е завршена или не. Јас сум имал да се направи прилично минимална промени на овој законик, па тука е нашата addTodo функција. Забележите дека овде сум го туркав излез на низа, и тогаш јас сум притискање на 0 до кои комплетно низа, во основа паралелно со таа нова довршување натера да каже Јас сум додавајќи оваа точка, и тоа е во комбинација со оваа вредност, што значи дека тоа е нецелосен. И тогаш јас сум прецртуваат на to-do листа. Сега, забележиш јас додадов оваа drawTodoList функција. Ова се многу од кодот имавме порано, во основа го поплочува од кутијата, а потоа привлекува нови to-do листа. Но забележите дека внатрешноста на овој за јамка ние сме прави малку повеќе сега. Ние сме во основа проверка дали ставка што одговара на ith довршување овде е завршена, а ние се однесуваат различно во овие 2 околности. Ако тоа е завршена, ние сме додавање на оваа ознака Дел, која е основа на начинот на кој можете да добиете дека штрајкот преку ефектот премин надвор на to-do листа, ако тоа е комплетна, и ако тоа не е, ние не сме тоа, вклучувајќи и. И така тој вид на се грижи за тоа, 

и тоа е еден начин да се оствари ова. А потоа забележите кога корисникот ќе кликне на еден од овие ние промена на проектот статус од неа. Кога корисникот ќе кликне, ние ќе се јават без разлика дали е завршена или не, а потоа ние ќе го прецрта. Овој вид на работи. Имаме овие функции кои ги извршуваат своите сопствени задачи, и ова е во ред. Дали има нешто што можеме да направиме подобро за ова, иако? Забележете ги имаме овие 2 глобалниот постројки. Ако ова беше C, и имавме 2 низи тој вид на претставен податоци, која беше вид на поврзани на некој начин она што ние би го користите во C да се комбинираат овие 2 области во нешто што encapsulates двете парчиња на информации? Секој сакате да се направи предлог? [Студентите нечујни одговор] 

Точно, па ние би можеле да користат некој вид на struct, и ако мислите назад, да речеме, pset 3, се сеќавам имавме речник, а потоа моравме дали зборот беше во речникот, а сите тие информации беше ставен заедно во внатрешноста на некои податоци структура. Едно нешто можам да направам со овој код за да се избегне да се има овие 2 различни низи за слични парчиња на информации е можам да ги комбинираат во објектот вклучите Javascript-. Ајде да ги разгледаме во тоа. Забележиш јас имаат само една низа на врвот сега и она што го направив е и ова е само вклучите Javascript синтакса за вид на создавање на буквална верзија на објектот, и ќе забележите постојат 2 својства, па ние имаме довршување, и тоа е се чуваат заедно со дали тоа е целосна или нецелосни. Ова е многу слично код. Ние сме со користење на JavaScript објекти. Овој вид на подобрува работи. Како сега, сите овие полиња на поврзани информации се чуваат заедно. Кога одиме да го испечатите, ние може да пристапите до полиња. 

Забележи како што го правиме Todos [i]. Комплетни Наместо проверка на комплетен спектар одделно, и ќе забележите кога ќе сакате да го добиете to-do низа ние сме добивање на to-do сопственост на тоа довршување, па овој вид на прави смисла, бидејќи секој елемент има овие суштински својства за тоа. Таа има за довршување, а тоа е дали тоа е завршена или не. Не премногу промени има функционално, само додаде уште некои на кодот. Ова е подобрување на некои фронтови, нели? Мислам, ние констатирано и од дизајнот малку. Сега имаме објекти за да во основа капсулирало овие податоци. Дали има нешто повеќе можеме да направиме од тука, во смисла на JavaScript? Како најава дека овој код токму тука за добивање на внатрешниот HTML кодот на div е малку, претпоставувам, долго. Има document.getElementByID ("Todos"). InnerHTML. Едно нешто што може да направите за да се направи овој код се погледне малку поповолна па јас не ќе мора да се задржи лизгање лево и десно, напред и назад, е јас да го користите библиотека како jQuery. 

Ајде проверете Семинар 2, и ова е истиот код, но тоа е направено со jQuery. Можете може да не биде премногу запознаен со jQuery, но само знам дека jQuery е еден вид на библиотека за JavaScript што го прави полесно да се прават работите како пристап одделните елементи на ДОМ. Тука наместо да се каже document.getElementByID ("Todos"). InnerHTML Може ли да користам многу почисти начин на jQuery, што е само за употреба селектори. Како што можете да видите, овој код се добие малку почиста, многу слични функционално, но тоа е идејата. Видовме неколку работи досега, па почнавме со само сурови JavaScript имплементација. Додадовме нови опции и покажа како можеме да ја подобриме со само она што го имаме во JavaScript. 

Дали некој се види било тешкотии со овој дизајн? Имено, претпоставувам-или не мора да значи тешкотии, но ајде да речеме ние не се прави to-do листа проект, и утре решивме сакавме да се направи намирници листа или шопинг листа проект. Многу од овие карактеристики се многу слични. Многу од работите што сакате да се излезе од вклучите Javascript-се многу чести, и ова ја нагласува потребата за некој вид на начин на правејќи го овој полесно да се направи. Морав да се изгради до сите на овој HTML пристап, сето ова пристап ДОМ, како јас ќе одам да ги претставуваат to-do листа со овој модел. И ќе забележите јас сум одговорен како развивач го вклучите Javascript- за чување на HTML и JavaScript дека имам во синхронизација. Ништо автоматски се дека го вклучите Javascript-застапеност или to-do листа се турка надвор во HTML. Ништо не спроведува дека освен за мене. Морав да напишам нерешено to-do листа функција. И дека не може да биде-Мислам, тоа е разумно да го направат тоа, но тоа може да се досадни понекогаш. Ако имате поголем проект, кои би можеле да биде тешко. 

Рамки, една од целите на рамки е да се поедностави овој процес и вид на фактор на овие општи-Претпоставувам дека може да се каже-шеми на дизајн дека луѓето обично имаат некој вид на начин на претставување на податоци, дали тоа е листа на пријатели, без разлика дали тоа е информација за мапата или нешто или на to-do листа. Некои луѓе имаат генерално начин на претставување на информации, и тие генерално треба да се задржи таа информација вид на во синхронизација помеѓу она што корисникот го гледа во некој вид на гледање, говорејќи во однос на како модел погледнете контролорот што го виде во предавање, а потоа модел, кој во овој случај е оваа низа го вклучите Javascript-. Рамки ни даде начин да се реши тој проблем. Сега ајде да ги разгледаме во спроведувањето на овој to-do листа во рамка наречена angularjs. Тоа е тоа. Забележите тоа се вклопува на слајд. Јас не мора да дојдете до лево и десно. Тоа веројатно не е голема причина да се препорача користење на рамка, но известување сум јас некогаш пристап до индивидуални HTML елементи тука? Сум јас некогаш одат во ДОМ? Гледате ли било document.getElementByID или нешто слично? Не, тоа е нема. 

Аголна ни помага да се задржи на ДОМ и нашата JavaScript застапеност на нешто вид на во синхронизација, па ако тоа не е во датотеката ЈС, ако не постои начин на програмски добивање на сите дека HTML содржина од JavaScript колку сме ние имајќи го ова во синхронизирана? Ако тоа не е во. Js фајл, тоа е мора да биде во HTML, нели? Ова е нова верзија на HTML датотека, и ќе забележите додадовме многу тука. Забележите има овие нови атрибути кои велат нг-клик и нг-повторуваат. Аголна на пристап кон решавање на овој проблем на тешкотии во дизајн е да се основа се направи HTML многу помоќен. Аголна е начин на што ќе ви овозможи да се направи HTML нешто повеќе експресивен. На пример, можам да кажам дека јас ќе одам да се врзуваат или се поврзе ова поле за текст на променлива во рамките на мојот аголна JavaScript код. Ова нг-модел не само тоа. Која во основа вели дека оваа точка во внатрешноста на оваа поле за текст, само дружат дека со променлива new_todo_description во рамките на JavaScript код. Тоа е многу моќна, бидејќи јас не мора експлицитно да одат на на ДОМ да се добие таа информација. Јас не мора да се каже document.getElementByID. Јас не мора да ја користи jQueries како ДОМ пристап. Можам да се дружат со променлива, а потоа кога ќе се промени таа променлива во рамките на вклучите Javascript-тоа е се чуваат во синхронизација со HTML, така што го поедноставува процесот на морале да се вратиш назад и напред меѓу двете. Дали тоа има смисла? 

И ќе забележите дека нема HTML код за пристап. Ние само направи HTML помоќен, и сега, на пример, ние може да ги правите нештата како ова, како кога ќе кликнете на ова, јавете се на оваа функција во рамките на todos.js, и ние би можеле да го направат тоа пред, но постојат и други нешта, како овој нг-модел, и ќе забележите оваа нг-повторуваат. Што мислите ова го прави? Тука е нашата неподреден список од порано. Имаме ул тагови, но сум јас некогаш рендерирање таа листа во внатрешноста на JavaScript код? Јас не сум некогаш експлицитно рендерирање таа листа. Како го прави ова дело? Добро, начинот на аголна постигнува ова е тоа се нарекува повторувач. Во суштина ова вели дека сакам да се печати овој HTML за секој внатре довршување на моите Todos низа. Внатрешноста на todos.jr постои Todos низа токму тука, и ова ќе кажам аголна движење низ таа низа, и за секој елемент ќе видите Сакам да печати ја оваа HTML. Ова е вид на страшно, бидејќи јас само да го направите тоа без да се напише за телефонска линија, која за на to-do листа, која беше само 30 линии на код не може да биде најмногу корист нешто, но ако имате голем проект, тоа би можеле да добијат многу поудобно. 

Ова е едно решение за овој проблем, што го прави HTML помоќен, и кој ни овозможува да се задржи JavaScript и HTML во синхронизација. Постојат и други можни начини да се реши овој проблем, и не секој рамка го прави ова. Не секој рамка работи по овие линии. Некои рамки имаат различни пристапи, и може да најдете дека ќе уживате во кодирање во една рамка во однос на другите. Ајде да погледнеме во уште еден. Ова е to-do листа кодирани во една рамка наречена 'рбетот. Одам да одат преку овој брзо. Ќе почнам со HTML, пред да одиме таму. Една секунда. Почнувајќи со HTML, како што ќе забележите, нашите HTML е многу слична на она што беше порано, па не премногу нови на тој фронт. Но нашите js фајл е малку различен. 'Рбетот вид на ја има оваа идеја, или лежи на идејата дека многу од она што го правиме со, да речеме, нашиот JavaScript проекти се размислува за модели и колекции на овие модели. Ова би можело да биде, на пример, слика и колекции на слики, или идејата на еден пријател и збирки на пријатели. И честопати кога сме програмирање вклучите Javascript-апликации ние ќе ти се претставуваат идејата да се има збирка на пријатели некако во JavaScript, и 'рбетот ни дава овој слој на врвот на постоечките низи го вклучите Javascript-и предмети да се направи повеќе моќни нешта со кои полесно. 

Тука сум дефинирани to-do модел, а вие не мора да се грижите премногу за синтаксата, но забележите дека она што е една од особините на ова? Таа има стандардно област. 'Рбетот ми дозволува да наведете веќе надвор од лилјак секој нов to-do дека јас се создаде ќе имаат овие стандардни. Сега можам да се прилагодите ова, но се во состојба да ги одредите стандардно е убаво, и тоа е вид на удобен, бидејќи ова не е нешто што е како својствени во JavaScript, и сега не мора експлицитно да велат дека Todos се нецелосни. Можам да кажам право исклучување на лилјакот дека Todos се случува да бидат означени како некомплетно. Забележи тогаш што е ова? Сега имам to-do листа, и тоа е една збирка. Забележите областа поврзани со кој се вели дека модел за довршување. Ова е мојот начин на раскажување backbone што Одам да се размислува за собирање на овие индивидуални Todos. Ова е во основа на моделот структура за мојата програма. Тука имам оваа идеја на собирање, и во основа на ставките содржани во таа збирка се сите ќе биде овие Todos, и дека е многу природно во таа смисла бидејќи имам Todos, и јас ги имаат во колекцијата. 

Ајде да погледнеме малку повеќе од ова. Тука е столбот поглед. Од друга работа што 'рбетот вели дека е тоа многу од моделите кои сте размислување за или дури и колекции се случува да треба да имаат на некој начин да бидат прикажани. Ние треба да се направи што to-do листа, и не би било убаво ако ние може да обезбеди за секој модел или се дружат со секој модел ова гледиште која ни овозможува да претпоставувам се поврзете двете заедно? А пред моравме да се користи за телефонска линија која ќе поминува низ секој довршување во нашата листа, а потоа го испечатите овде ние во основа може да се поврзе со овој модел. Ова е to-do поглед. Ова е поврзано со довршување го најдовме порано. Сега секој довршување е прикажано или renderable со тоа и да го приказот за задачи. Забележите дека некои од полињата. Што мислите оваа tagName е, tagName: Li? Се сеќавам од пред кога сакавме да го направи довршување ние ќе мора експлицитно да го спарите нашите Todos со овој таг Ли. Сега ние велиме дека таму каде што тоа довршување се случува да се живее ќе биде во внатрешноста на таг Ли. А сега ние сме, исто така, асоцирањето настани со нашите Todos. 

Секој довршување има овој настан. Ако кликнете доста вклучите копче, тоа е она што сакам да кажам дека таму, тогаш во основа се одбележи довршување како спротивност на она што беше пред и потоа повторно да ја даде на апликација. Ова е вид на слични на кодот пред тоа. Се сеќавам кога ние се означени како било спротивното или- и тогаш ние го ре-изречена. Но забележите сега овој настан се користи за да биде нешто што беше во HTML. Таа седеше таму. Го копчето имаше за клик. Кога ќе кликнете на копчето, тој вид на прави нешта да поставите тој довршување да биде некомплетно. Тука сме поврзани тој настан на кликнување дека го вклучите копчето и обратен дали тоа е или исклучите со овој став. 

Ова е убав начин на поставување на овој настан, така што тоа е многу цврсто врзани ова гледиште, и така забележите ова уште еден. Имам оваа Рендерирање метод, и ние не треба да се оди преку деталите. Тоа е вид на слични на она што го имавме порано, но забележиш јас не сум looping преку нешто. Јас не сум печатите таа ул таг тоа е вид на велејќи дека јас ќе одам да се печати од сите елементи. Јас сум обезбедување на функционалност за рендерирање овој to-do точка. Ова е многу моќен концепт бидејќи во основа нашите to-do листа се состои од сите овие Todos, и ако ние во основа може да се определи начин да се направи една од оние Todos тогаш можеме да имаме моќни 'рбетот по себе ги дадат сите на Todos со повикување на методот на Рендерирање на поединецот Todos. Ова е концепт кој е корисен. Сега е добро прашање да побарате е колку е оваа апликација се стави заедно? Бидејќи ние имаме способност да направат еден довршување, но како да се добие идеја на повеќе Todos? 

Ајде да ги разгледаме во тоа. Ова е последниот дел. Забележите имаме to-do листа овде, и ќе забележите тоа е исто така поглед. И да се оди во текот на неколку работи, овој иницијализира метод ќе биде повикан кога првпат ја креирате оваа to-do листа. Како што можете да видите, тоа е како создавање на to-do листа и асоцирањето со овој став. И тогаш јас додаде функции тука значи, во основа, кога ќе додадете елемент- ова е слично на AddItem метод го видовме пред- Одам да се создаде нов довршување објект, и ќе забележите Јас сум, всушност, повикувајќи оваа нова довршување метод, па ова е предвидено со 'рбетот, и јас може да помине во мојот имот овде. И сега секој довршување што ја создавам користење на овој ќе добиете дека функционалност што сме го виделе порано. Забележиш јас сум ги расчистуваа полето за текст пред-мала ситница- и тогаш јас сум додавајќи оваа збирка. 

Ова Речиси се чини чудно, бидејќи пред ние едноставно мораше да го направи тоа todos.push, а потоа бевме направи, а тоа може да изгледа покомплицирано за овој проект, и може да најдете дека 'рбетот, па дури и аголна или било која друга рамка не одговараат на вашите проекти, но јас мислам дека е важно да се размислува за што тоа значи на поголем обем за поголеми проекти, затоа што ако имавме поголем проект каде што бевме претставуваат некои многу сложени собирање, нешто подлабоко од само to-do листа, да речеме листа на пријатели или нешто слично, тоа би можело да дојде во рака затоа што би можеле да организираат нашиот код во едно навистина лесен начин, на начин кој ќе овозможи полесно за некој друг кои сакаа да ги собереш еден проект да се гради врз. Можете да видите дека ова дава многу структура. И тогаш јас сум повикувајќи ја даде на овој AddItem. Го направи, како што можете да видите, а вие не мора да ја сфати оваа целосна синтакса, но во основа за секој модел тоа се случува да се јавите на поединецот Рендерирање метод. Тоа е вид на местото каде што ова доаѓа од. Ајде да одредите како да направат индивидуални Todos, и тогаш ајде лепак нив заедно како целина. Но тоа обезбедува начин на апстракција, затоа што може да се промени начинот на кој јас да одлучи да ја даде на поединечните Todos, и јас не би треба да се смени ниту на овој код. Тоа е вид на ладно. 

Дали некој има било какви прашања во врска со вклучите Javascript-рамки? [Студентите нечујни прашање] О, да, тоа е големо прашање. Прашањето беше како не сум го вклучуваат рамки? Повеќето го вклучите Javascript-рамка се во основа, само js датотеки дека можете да го вклучите на врвот на вашиот код. Известување во главата дел од мојот HTML имам сите овие скрипта тагови, а конечниот скрипта таг е код кој ние сум напишал. А потоа на 3-рамка кодови се само така скрипта тагови. Јас сум ги вклучувајќи и од она што се нарекува CDN, што ми дозволува да ја земете од некој друг во овој момент но секој рамка има ова-прилично многу може да се најдат на содржината за одредена JavaScript библиотека на располагање на некои CDN или нешто слично, а потоа можете да ги вклучат и овие скрипта тагови. Дали тоа има смисла? Кул. 

Тие се 2 различни пристапи. Оние кои не се единствените пристапи кон решавање на овој проблем. Постојат многу различни работи кои некој може да се направи, и постојат многу рамки таму. Аголна и 'рбетот не ја кажува целата приказна. Среќно со вашата конечна проекти, и многу ти благодарам. [CS50.TV]