[Powered by Google Translate] [Семінары] [JavaScript Праграмныя каркасы: як і навошта]
[Кевін Schmid] [Гарвардскі універсітэт]
[Гэта CS50.] [CS50.TV]
>> Прывітанне, усім. Сардэчна запрашаем на семінар JavaScript рамкі.
Мяне клічуць Кевін, і сёння я буду казаць пра рамкі JavaScript,
і мэтай дадзенага семінара з'яўляецца не прымусіць вас, скажам, асвоіць канкрэтны каркас, як такой
але, каб даць вам больш шырокі падыход да пару рамкі
і паказаць, чаму мы ніколі не хачу выкарыстоўваць рамкі.
>> Перш чым зрабіць гэта, я прывяду невялікі фон у JavaScript,
а потым мы возьмем яго адтуль.
Мы збіраемся пачаць з рэалізацыі To-Do List.
Вось наш спіс задач на сённяшні дзень.
Гэта даволі пацешна. Мы павінны рэалізаваць спіс спраў у JavaScript.
Гэта тое, што гэта будзе выглядаць, так што гэта наша першая мэта.
Мы не збіраемся выкарыстоўваць рамкі, каб зрабіць гэта.
Мы збіраемся кода JavaScript і атрымаць спіс спраў на працу.
Затым мы збіраемся палепшыць дызайн без выкарыстання рамкі.
Мы збіраемся, каб абмеркаваць розныя рэчы, якія мы можам зрабіць толькі з JavaScript толькі
, Каб зрабіць наш спіс спраў трохі больш добра прадуманы.
Затым мы збіраемся кінуць у некаторых JQuery,
і тады мы будзем глядзець на тое ж спіс спраў,
проста рэалізаваны ў розныя структуры, і мы абмяркуем
плюсы і мінусы па шляху.
>> Давайце пачнем рэалізацыю, што спіс спраў.
Дапусцім, нам даюць гэта HTML.
Я збіраюся зрабіць гэта крыху менш.
Як бачыце, у мяне ёсць маленькі загаловак, у якім Todo
і невялікую скрынку, дзе я магу патрэбна апісанне TODO
, А затым кнопку Стварыць элемент, так што давайце паспрабуем ўвесці новы TODO ў гэты спіс.
Правесці семінар JavaScript рамкі,
і я ударыць новы элемент.
Я атрымліваю гэта папярэджанне JavaScript, які кажа мне рэалізацыі.
У нас ёсць для яго рэалізацыі.
Давайце праверым код гэтага, як HTML і JavaScript.
Вось наш HTML.
Як вы можаце бачыць тут, тут наш маленькі загаловак Todos.
Гэта было смелы, што рэч у верхняй часткі,
а то ў нас у поле ўводу з запаўняльнікам,
а затым ёсць пэўны атрыбут гэтай кнопцы, якая выклікае гэтую функцыю addTodo.
Хто-небудзь хоча паваражыць, што пстрычка азначала?
[Студэнцкія чуваць адказу]
Добра, па пстрычцы накшталт як падзея,
як кнопкі мышы проста падзея, і што мы робім
як мы звязваючы выпадку націску на гэтую кнопку, каб выканаць гэтую функцыю.
AddTodo гэта апрацоўшчык падзеі для націску гэтай кнопкі.
>> Як вы можаце бачыць, калі я націскаю на кнопку Стварыць элемент
на падзеі націску звальняюць, і гэтая функцыя выклікаецца.
Давайце паглядзім на функцыю.
Як вы можаце бачыць, вось мой код JavaScript да гэтага часу.
Тое, што я на самым версе глабальнай структурай дадзеных для майго спісу спраў.
Падобна на тое масіва. Гэта проста пусты масіў.
А то ў мяне addTodo функцыя, якую мы бачылі раней,
і адзіная радок кода ў гэтым ёсць папярэджанне.
Ён папярэджвае ажыццяўлення мяне, а потым у мяне ёсць 2 задач.
Я павінен дадаць, што трэба будзе зрабіць, каб, што глабальная структура дадзеных,
а затым я хачу, каб выцягнуць To-Do List.
Нішто таксама не ўяўляе сабе проста пакуль няма, але вы JavaScript могуць быць незнаёмыя з,
так што я збіраюся ісці павольна і перагледзець асновы JavaScript такім чынам.
>> Давайце дамо гэтаму стрэл.
Дапусьцім, карыстальнік ўводзіць нешта ў гэтай скрынцы.
Я толькі што ўвялі нешта ў гэтым тэксце.
Як адсартаваць доступу, тэкст праз JavaScript?
Памятаеце, што JavaScript, адна з яго асноўных рыс з'яўляецца тое, што яна дае нам
гэта праграмны доступ да DOM.
Гэта дазваляе нам атрымаць доступ да элементаў і іх уласцівасцях гэтай актуальнай HTML.
Як мы робім, што з голымі косткамі JavaScript
гэта мы сапраўды можам выкарыстоўваць функцыю JavaScript называецца GetElementById.
Я хачу захаваць тэкст, які набраў там у некаторую зменную,
так што я збіраюся сказаць, новую зменную па імя new_todo,
і я збіраюся атрымаць гэты элемент.
Гэта функцыя,. GetElementById.
І цяпер я атрымліваю элемента па ідэнтыфікатары, так што мне трэба ідэнтыфікатар, што тэкставае поле,
таму я даў яму ID new_todo_description.
Вось як я іду, каб атрымаць элемент.
Гэта мой аргумент гэтай функцыі, каб паказаць, якія ID атрымаць.
І такім чынам, гэта элемент HTML, і ён мае ўласцівасці.
Вы бачылі гэта. Яны атрыбуты.
Атрыбут элемента тэксту, які захоўвае уведзеныя карыстачом, называецца значэннем.
Я захаваў значэнне гэтага тэкставага поля цяпер у гэтай зменнай new_todo.
Цяпер у мяне ёсць праграмны доступ да гэтай зменнай, якая крута
таму што цяпер, што я магу зрабіць, гэта я магу дадаць яго ў свой спіс спраў.
>> Тое, як мы зрабілі б гэта ў JavaScript-і не хвалюйцеся, калі вы не знаёмыя з гэтым,
але проста перажывае гэта todos.push
, Таму што гэта імя майго глабальную структуру дадзеных тут,
і я збіраюся націснуць new_todo.
Гэта вельмі зручна, таму што цяпер я дадаў яго да маёй JavaScript
ўяўленне гэтага спісу спраў.
Але цяпер як я магу атрымаць яго назад у HTML?
Я павінен знайсці спосаб сартавання з устаўце яго назад.
Іншымі словамі, я, здаецца, мусяць звярнуць на гэта.
Тое, што мы збіраемся зрабіць, гэта мы збіраемся зрабіць спіс спраў.
Мне трэба абнавіць іншыя HTML на гэтай старонцы,
і як вы можаце бачыць, я пакінуў гэтую маленькую кантэйнер тут,
гэта дзельнік старонкі з ідэнтыфікатарам Todos,
і я збіраюся паставіць спіс спраў там.
Спачатку я іду, каб ачысціць яго, таму што, скажам, быў стары спіс спраў там.
Я атрымліваю гэты элемент па ID зноў,
і я доступ да унутраным HTML гэтага элемента,
і я збіраюся зразумець, што.
Калі мы пакінулі гэты код як ёсць, мы не ўбачылі б нічога, пустое,
і цяпер я хачу пачаць прадастаўленне мой новы спіс спраў.
Я ў асноўным збіраюцца знішчыць мой спіс спраў.
>> Цяпер ўнутраны HTML ўнутры гэтага DIV Todos зусім ясна,
і цяпер мне трэба, каб пачаць дадаваць маім спісе.
Першае, што я хачу дадаць спіна неўпарадкаваных спіс тэгаў,
які ў асноўным азначае, што гэта пачатак неўпарадкаваных спіс.
Зараз для кожнага элемента ў маім масіве Todos Я хачу надрукаваць яго ўнутры гэтага HTML.
Я хачу дадаць яго да ніжняй часткі гэтага спісу.
Гэтак жа, як у C, я магу выкарыстоўваць для завесы, і я збіраюся пачаць у пачатку майго спісу
на элемент 0, і я збіраюся прайсці ўвесь шлях да даўжыні спісу.
Мы можам рэальна атрымаць даўжыню масіва ў JavaScript па даўжыні уласнасці.
У асноўным, я збіраюся зрабіць нешта вельмі падобнае ўнутры тут
раздрукаваць гэты элемент.
Я магу зноў атрымае доступ да Todos DIV, унутраны HTML ўласцівасць, што,
і я збіраюся дадаць на гэтым новы элемент спісу, і што збіраецца быць у асяроддзі
гэты тэг Лі, і я збіраюся аб'яднаць пры дапамозе аператара +,
і гэта-й элемент масіва маёй Todos,
і тады я іду, каб закрыць гэты тэг.
Зараз для кожнага элемента мы дадамо новую запіс спісу.
І тады ўсё, што мы сапраўды павінны зрабіць, гэта зачыніць гэты тэг.
Мне проста трэба, каб закрыць, што неўпарадкаваных спіс тэгаў.
>> Вы адчуеце, як гэта працуе?
Гэта адкрывае ўвесь спіс.
Гэта дадае асобныя элементы з спісу Todos ў спіс,
а затым, што закрывае ўвесь спіс, і гэта мой addTodo функцыі.
Я ў асноўным Пачніце атрымліваць TODO з тэкставага поля.
Дадам, што ў масіў Todos, а потым я зноў зрабіць спіс спраў.
Цяпер я магу дадаць элементы ў маім спісе.
Гэта свайго роду захапляльным, таму што ўсяго некалькі радкоў кода
мы ў асноўным зроблены спіс спраў, дзе мы можам дадаць элементы.
Вялікі.
Гэта накшталт таго, увядзенне ў JavaScript.
Не турбуйцеся занадта шмат пра сінтаксісе на дадзены момант,
але думаць пра гэта канцэптуальна.
У нас былі некаторыя HTML.
У нас было тэкставае поле на старонцы, якая ў асноўным дазваляе карыстальнікам ўводзіць элемент спісу, каб дадаць.
А потым мы выкарыстоўвалі JavaScript атрымаць гэтую TODO ад тэкставага поля.
Мы захавалі, што ўсярэдзіне масіва JavaScript, якія ў асноўным, як
нашы праграмнае ўяўленне, што спіс спраў,
і тады мы распячатаў яго.
Гэта todos.js.
>> Гэта крута, але як мы можам прыняць гэта далей?
Ну, як вы можаце бачыць, гэта не як поўны спіс спраў.
Я, напрыклад, не можа адзначыць любы з гэтых элементаў як няпоўныя,
як калі б я хацеў змяніць прыярытэты пунктаў або выключаць пункты.
Гэта добра, але мы можам узяць гэтае пытанне.
Я не буду казаць занадта шмат пра даданні дадатковых функцый,
але мы маглі б лічыць, што далей.
Давайце пагаворым аб даданні яшчэ адна асаблівасць гэтай спіс спраў,
які будзе магчымасці праверыць індывідуальны элемент спісу
і гэта закрэсліць, таму ў асноўным кажуць, што я зрабіў гэта.
Давайце паглядзім на некаторыя код, які можа дамагчыся гэтага.
Звярніце ўвагу, што я зрабіў на самым версе я дадаў
новы глабальны масіў называецца поўным.
Я ў асноўным выкарыстоўваюць гэта, каб захоўваць Ці дэталі на To-Do List
поўныя ці не.
Гэта адзін са спосабаў зрабіць гэта.
Калі я гляджу на ажыццяўленне гэтага, дысплей,
У асноўным, калі я ўваходжу ў TODO і я націскаю гэтую кнопку-перамыкач
гэта перакрэслівае, таму кожны пункт у гэтым спісе альбо поўны
або незавершаным стане, і я выкарыстоўваю іншы масіў для прадстаўлення гэтага.
>> У асноўным, для кожнага TODO у гэтым масіве Todos
ёсць пункт у поўны масіў, які ў асноўным азначае,
няхай гэта будзе поўнае ці не.
У мяне было даволі, каб зрабіць мінімальныя змены ў гэты код,
так вось нашы addTodo функцыі.
Звярніце ўвагу, што тут я вылучаю на масіве,
а затым я вылучаю, што ад 0 да поўнага масіва,
у асноўным паралельна з гэтым новы штуршок TODO сказаць
Я дадаю гэты пункт, і гэта ў спалучэнні з гэтага значэння,
што азначае, што ён апынуўся няпоўным.
А потым я перамалёўкі To-Do List.
Зараз звернеце ўвагу, я дадаў гэтую drawTodoList функцыі.
Гэта займае шмат кода, што было раней,
у асноўным чысціць вокны, а затым малюе новае спіс спраў.
Але звярніце ўвагу, што ўнутры гэтага цыклу мы робім трохі больш цяпер.
Мы ў асноўным праверкі, ці з'яўляецца элемент, які адпавядае й TODO тут
завершана, і мы сябе па-рознаму ў гэтых 2 абставінаў.
Калі гэта поўнае, мы дадаем гэты тэг справе,
які з'яўляецца ў асноўным так, як вы можаце атрымаць, што праніжа эфект
вычеркивания спіс спраў, калі гэта поўнае,
і калі гэта не так, мы не уключаючы яго.
І так, каб збольшага клапоціцца пра гэта,
>> і гэта адзін са спосабаў для дасягнення гэтай мэты.
І звярніце ўвагу на тое, калі карыстальнік націскае адну з гэтых
мы перамыкаемся стан завяршэння яго.
Калі карыстач націскае кнопку, мы будзем зваротная Ці гэта былі завершаны ці не,
і тады мы будзем перамалёўваць яго.
Гэты выгляд прац.
У нас ёсць гэтыя функцыі, якія выконваюць свае ўласныя задачы,
і гэта добра.
Ці ёсць што-небудзь, што мы маглі зрабіць лепш пра гэта, праўда?
Звярніце ўвагу, у нас ёсць гэтыя 2 глабальных масіваў.
Калі б гэта быў C, і ў нас было 2 масіваў такой прадстаўлены
дадзеных, які быў свайго роду звязаны ў некаторым родзе
што б мы выкарыстоўваць у C, каб аб'яднаць гэтыя 2 поля
у тое, што Інкапсулюйце і частак інфармацыі?
Хто-небудзь хоча ўнесці прапанову?
[Студэнцкія чуваць адказу]
>> Менавіта так, каб мы маглі выкарыстоўваць нейкія структуры,
і калі вы ўспомніце, скажам, PSET 3,
памятаю, мы былі слоўніка, а затым у нас ці было слова
было ў слоўніку, і ўсё, што інфармацыя была сабраная
ўнутры некаторых структураў дадзеных.
Адна рэч, якую я магу зрабіць з гэтым кодам, каб пазбегнуць гэтых 2 розных масівах
для аналагічных частак інфармацыі я магу аб'яднаць іх у аб'ект JavaScript.
Давайце зірнем на гэта.
Звярніце ўвагу, у мяне толькі адзін масіў у верхняй зараз
і тое, што я зрабіў,-і гэта толькі сінтаксіс JavaScript для роду
стварэнне літаральным версію аб'екта,
і заўважыце, што ёсць 2 ўласцівасці, таму мы павінны TODO,
і ён захоўваецца разам з ці гэта поўным або няпоўным.
Гэта вельмі падобна кода.
Мы выкарыстоўваем JavaScript аб'ектаў.
Гэты выгляд паляпшае рэчаў.
Як і зараз, усе гэтыя поля адпаведнай інфармацыяй ўтрымліваюцца разам.
Калі мы ідзем у раздрукуйце яго, мы можам атрымаць доступ да палёў.
>> Звярніце ўвагу, як мы робім Todos [I]. Поўнай
замест праверкі поўным наборам паасобку,
і заўважыць, калі мы хочам атрымаць спіс спраў радок мы атрымліваем спіс спраў уласнасці
гэтага спісу задач, таму гэты выгляд мае сэнс, паколькі
Кожная рэч мае гэтыя ўнутраныя ўласцівасці пра гэта.
Ён мае спісу задач, і яна мае гэта поўнае ці не.
Ці не занадта шмат змен там функцыянальна, проста дадалі яшчэ некалькі, каб кода.
Гэта паляпшэнне на некаторых франтах, ці не так?
Я маю на ўвазе, мы факторизовали дызайн няшмат.
Цяпер у нас ёсць аб'екты, каб у асноўным гэта інкапсуляцыі дадзеных.
Ёсць што-небудзь больш мы маглі б зрабіць адсюль з пункту гледжання JavaScript?
Падабаецца Звярніце ўвагу, што гэты код прама тут
для атрымання ўнутранага HTML з DIV
Трохі, я думаю, доўга.
Там у document.getElementById ("Todos»). Innerhtml.
Адзінае, што мы маглі зрабіць, каб зрабіць гэты код выглядаць трохі больш добразычлівым
так што я не павінен трымаць пракруткі налева і направа, назад і наперад,
гэта я магу выкарыстоўваць бібліятэку як JQuery.
>> Давайце праверым Семінар 2,
і гэта той жа самы код, але гэта зроблена з JQuery.
Вы не можаце быць занадта добра знаёмыя з JQuery,
але проста ведаю, што JQuery з'яўляецца свайго роду бібліятэка для JavaScript
што робіць яго лягчэй рабіць такія рэчы доступу да асобных элементаў DOM.
Тут замест таго каб сказаць document.getElementById ("Todos»). Innerhtml
Я магу выкарыстоўваць значна спосабам прыбіральшчыцай у JQuery,
які знаходзіцца за ўсё выкарыстоўваць селектары.
Як вы можаце бачыць, гэты код сапраўды станавіўся трохі чысцей,
вельмі падобныя функцыянальна, але гэта ідэя.
Мы бачылі некалькі рэчаў, да гэтага часу,
таму мы пачалі толькі з сырам рэалізацыі JavaScript.
Мы дадалі новыя функцыі і паказаў, як мы можам палепшыць яго з
толькі тое, што мы маем у JavaScript.
>> Хто-небудзь бачыць цяжкасцяў з гэтым праектам?
А менавіта, я думаю, ці не абавязкова цяжкасці, але скажам,
Мы не рабілі спіс спраў праекта, а заўтра мы вырашылі
мы хацелі зрабіць спіс пакупак або праекта спіс пакупак.
Многія з гэтых функцый вельмі падобныя.
Многія рэчы, якія мы хочам выйсці з JavaScript вельмі распаўсюджаны,
і гэта падкрэслівае неабходнасць нейкі спосаб
робіць гэта лягчэй зрабіць.
Я павінен быў стварыць усё гэта HTML доступу, усё гэта доступ DOM,
як я збіраюся прадстаўляць To-Do List з гэтай мадэллю.
І заўважце, я адказваю як распрацоўшчык JavaScript
для захоўвання HTML і JavaScript, што ў мяне ў сінхранізацыі.
Нічога, што аўтаматычна становяцца JavaScript ўяўленне
ці спіс спраў атрымаць выцесненыя HTML.
Нішто не гвалтоўнае што акрамя мяне.
Я павінен быў напісаць нічыя спіс спраў функцыі.
І гэта можа быць не-Я маю на ўвазе, што гэта разумна, каб зрабіць гэта,
але гэта можа быць стомна часам.
Калі ў вас ёсць больш буйны праект, які можа быць абцяжараны.
>> Каркасы адной з мэтаў рамак
з'яўляецца спрашчэнне гэтага працэсу і як бы вынесці за дужкі
гэтыя агульныя-Я думаю, можна сказаць-шаблонаў праектавання
што людзі наогул ёсць нейкі спосаб прадстаўлення даных,
няхай гэта будзе спіс сяброў, няхай гэта будзе карты інфармацыі
або што-то ці спіс спраў.
Некаторыя людзі маюць у цэлым спосаб прадстаўлення інфармацыі
і яны ў цэлым павінны трымаць гэтую інфармацыю роду ў сінхранізацыі
паміж тым, што карыстальнік бачыць у нейкі гледжання,
Гаворачы з пункту гледжання, як мадэль кантролера меркаванне, што вы бачылі ў лекцыі,
і затым мадэль, якая ў дадзеным выпадку гэта масіў JavaScript.
Рамкі даць нам магчымасць вырашыць гэтую праблему.
Зараз давайце зірнем на ажыццяўленне гэтага спісу спраў
У рамках званыя angularjs.
Вось і ўсё. Звярніце ўвагу, ён падыходзіць на слайдзе.
Я не прыйдзецца пракручваць налева і направа.
Гэта, верагодна, не адна прычына, каб рэкамендаваць выкарыстанне асяроддзя,
Але звярніце ўвагу, я калі-небудзь доступ да асобных элементаў HTML тут?
Ці маю я калі-небудзь у DOM?
Ці бачыце вы document.getElementById ці нешта накшталт гэтага?
Не, гэта сышло.
>> Кутняе дапамагае нам трымаць DOM і JavaScript нашым уяўленні нешта
выгляд у сінхранізацыі, так што калі гэта не ў файле JS,
калі няма ніякай магчымасці праграмна каб дабрацца да ўсіх, што HTML зместу
ад JavaScript як мы Маючы гэта ў сінхранізацыі?
Калі гэта не ў. Выява JS, ён павінен быць у HTML, праўда?
Гэта новая версія HTML файла,
і, заўважце, мы дадалі шмат тут.
Заўважыце, што гэтыя новыя атрыбуты, якія кажуць, НГ-клік і NG-паўтор.
Кутняе падыход да вырашэння гэтай праблемы цяжкасцяў у дызайне
з'яўляецца ў асноўным робяць HTML значна больш магутным.
Кутняе гэта спосаб дазваляе зрабіць HTML некалькі больш выразным.
Напрыклад, я магу сказаць, што я збіраюся звязаць або звязваць гэта тэкставае поле
зменнай у маёй Кутняе кода JavaScript.
Гэта НГ-мадэль робіць менавіта гэта.
Гэта ў асноўным кажа, што элемент ўнутры гэтага тэкставага поля,
проста звязаць яго з зменнай new_todo_description
у кодзе JavaScript.
Гэта вельмі магутны, таму што ў мяне няма відавочнага пайсці
DOM, каб атрымаць гэтую інфармацыю.
Я не павінен сказаць document.getElementById.
Я не павінен выкарыстоўваць jQueries як доступ DOM.
Я магу звязаць яго з зменнай, а затым, калі я змяніць гэтую зменную
у JavaScript ён захоўваецца ў сінхранізацыі з HTML,
так, што спрашчае працэс таго, каб ісці наперад і таму паміж імі.
Ці мае гэта сэнс?
>> І заўважце, няма ніякага HTML код доступу.
Мы толькі што зрабілі HTML больш магутным,
і цяпер, напрыклад, мы можам рабіць такія рэчы,
падабаецца, калі вы націснеце на гэтую, выклікаць гэтую функцыю ў рамках todos.js,
і мы маглі б зрабіць гэта і раней, але ёсць і іншыя рэчы, як гэты НГ-мадэлі,
і заўважыць гэта НГ-паўтор.
Як вы думаеце, гэта робіць?
Вось наш неўпарадкаваных спіс, чым раней.
У нас ёсць уль тэгаў,
але я ніколі пазбаўлення гэтага спісу ўнутры кода JavaScript?
Я ніколі не відавочна аказанне гэтым спісе.
Як гэта працуе?
Ну, то, як выконвае гэта Кутняе гэта называецца рэтранслятар.
У асноўным, гэта кажа, што я хачу, каб раздрукаваць гэтую HTML
для кожнага ўнутры TODO майго масіва Todos.
Усярэдзіне todos.jr ёсць Todos масіве прама тут,
і гэта скажа Кутняе прайсці праз гэта масіў, і для кожнага элемента вы бачыце
Я хачу, каб раздрукаваць гэтую HTML.
Гэта свайго роду дзіўным, таму што я проста магу зрабіць гэта
без таго, каб напісаць цыкл,
які для спісу спраў, што складала толькі 30 радкоў кода
Не можа быць найбольш выгадны,
але калі ў вас ёсць вялікі праект, гэта магло стаць вельмі зручна.
>> Гэта адно рашэнне гэтай праблемы, у выніку чаго HTML больш магутнымі,
і што дазваляе нам трымаць JavaScript і HTML ў сінхранізацыі.
Існуюць і іншыя магчымыя спосабы вырашэння гэтай праблемы
і не кожны робіць гэта рамкі.
Не кожны рамках работы ў гэтым кірунку.
Некаторыя мадэлі маюць розныя падыходы,
і вы можаце выявіць, што вам падабаецца кадавання ў адной рамкі над іншым.
Давайце паглядзім на яшчэ адзін.
Гэта спіс спраў закадаваныя ў рамках званыя пазваночніка.
Я збіраюся прайсці праз гэта хутка.
Я пачну з HTML, перш чым ісці туды.
Адна секунда.
Пачынаючы з HTML, як вы заўважылі, наш HTML вельмі падобны
да таго, што было раней, так не занадта шмат новага на гэтым фронце.
Але наш JS файл трохі адрозніваецца.
Магістральная выгляд мае гэтая ідэя, ці будуецца на ідэі
, Што шмат чаго, што мы робім, скажам, з нашымі праектамі JavaScript
гэта думаць пра мадэлі калекцыі гэтых мадэляў.
Гэта можа быць, напрыклад, фатаграфію і калекцыі фатаграфій,
або ідэю сябра і калекцый сяброў.
І часта, калі мы праграмуем JavaScript прыкладанняў
мы накшталт ўяўляюць ідэя мець калекцыю сяброў
неяк у JavaScript, і Магістральная дае нам гэты пласт
-над існай масіваў JavaScript і аб'ектаў
рабіць больш магутныя рэчы, што больш лёгка.
>> Тут я вызначыў To-Do мадэлі,
і вы не павінны занадта турбавацца аб сінтаксісе,
не заўважыць, што тое, што адным з уласцівасцяў гэтага?
Яна мае поля па змаўчанні.
Магістральная дазваляе мне задаць ужо з месца ў кар'ер
любая Новая справа, што я ствараю будзе мець гэтыя значэнні па змаўчанні.
Цяпер я магу наладзіць гэта, але, будучы ў стане вызначыць значэнні па змаўчанні
гэта добра, і гэта свайго роду зручны, таму што гэта не тое, што як
уласцівых JavaScript, і зараз у мяне няма яўнага
сказаць, што Todos з'яўляюцца няпоўнымі.
Я магу сказаць, з месца ў кар'ер, што Todos будуць пазначаныя як няпоўная.
Звярніце ўвагу на тое, што гэта?
Цяпер у мяне ёсць спіс спраў, і гэта калекцыі.
Звярніце ўвагу на поле, звязанае з мадэллю, якая кажа TODO.
Гэта мой спосаб сказаць, што Магістральная
Я буду думаць аб калекцыі гэтых асобных Todos.
У асноўным гэта мадэлі структуры для маёй праграмы.
Тут у мяне ёсць гэтая ідэя калекцыі,
і ў асноўным элементы, якія змяшчаюцца ў гэтым зборніку ўсё будзе гэтых Todos,
і што вельмі натуральна ў гэтым сэнсе
таму што ў мяне ёсць Todos, і я іх у калекцыі.
>> Давайце паглядзім на трохі больш гэтага.
Вось пазваночніка гледжання.
Іншая рэч, якая кажа Магістральная з'яўляецца тое, што
шмат мадэляў, якія вы думаеце пра ці нават калекцыі
збіраюцца трэба мець нейкі спосаб адлюстроўваюцца.
Нам трэба, каб зрабіць, што спіс спраў,
і не было б нядрэнна, калі б мы змаглі забяспечыць для кожнай мадэлі
ці звязаць з кожнай мадэлі гэтага пункту гледжання
, Што дазваляе нам я думаю злучыў два разам?
Калі раней мы павінны былі выкарыстаць для цыклу, які будзе праходзіць праз
кожны TODO ў нашым спісе, а затым раздрукаваць яго тут
мы можам у асноўным звязваюць яго з гэтай мадэллю.
Гэта агляду спраў.
Гэта звязана з TODO мы выявілі раней.
Цяпер кожны TODO з'яўляецца адлюстроўваць або які адлюстроўваецца
гэтага агляду спраў.
Звярніце ўвагу, некаторыя поля.
Як вы думаеце, гэта тэг, имяТега: Лі?
Памятаеце з папярэдняга, калі мы хацелі аказаць TODO
мы павінны былі б відавочна пару нашых Todos з гэтым тэгам Лі.
Зараз мы кажам, што гэта TODO дзе будзе жыць
будзе ўсярэдзіне тэга Лі.
І зараз мы таксама звязваючы падзеі з нашымі Todos.
>> Кожны мае TODO гэтай падзеі.
Калі вы націснеце ў значнай ступені кнопкі-пераключальніка, гэта тое, што я кажу, там,
то ў асноўным адзначаюць TODO як супрацьлеглае таму, што было раней
, А затым зноў робіць прымяненне.
Гэта выгляд падобны на код раней.
Памятаеце, калі мы адзначалі яго альбо супрацьлеглага або-
і тады мы паўторна вынес гэта рашэнне.
Але звярніце ўвагу, цяпер гэта падзея мела звычай быць тое, што было ў HTML.
Ён сядзеў там.
Кнопка была на пстрычкай мышы.
Пры націску на кнопку, ён робіць выгляд матэрыялу, каб
створаны, што TODO быць няпоўным.
Тут мы звязаны, што падзеі націску кнопкі-пераключальніка, што
і звярнуць назад Ці гэта ці выключыць з гэтай пунктам гледжання.
>> Гэта добры спосаб стварэння гэтай падзеі, так што гэта вельмі цесна звязаны
гэтай кропцы гледжання, і так заўважыць гэта яшчэ адзін.
У мяне ёсць гэта метад візуалізацыі, і мы не павінны прайсці праз дэталі.
Гэта збольшага падобна на тое, што было раней,
не заўважыць, я не цыкл праз што заўгодна.
Я не друкуе, што уль тэг, які нібыта кажуць, што я збіраюся надрукаваць усе элементы.
Я забяспечваю функцыянальнасць для аказання гэтага элемента спісу.
Гэта вельмі магутная канцэпцыя, таму што ў асноўным
наш спіс спраў складаецца з усіх гэтых Todos, і калі мы можам паказаць у асноўным
спосаб зрабіць адным з тых Тодос
то мы можам мець наш магутным магістральных такі зрабіць усё Todos
шляхам выкліку метаду візуалізацыі ад індывідуальных Todos.
Гэта канцэпцыя, якая можа апынуцца вельмі дарэчы.
Цяпер добры пытанне, каб спытаць, як гэта дадатак збіраюцца разам?
Таму што ў нас ёсць магчымасць аказваць адзін TODO,
але як мы можам атрымаць уяўленне аб некалькіх Todos?
>> Давайце зірнем на гэта.
Гэта апошняя частка.
Звярніце ўвагу, у нас ёсць спіс спраў гледжання тут,
і заўважылі, што гэта таксама меркаванне.
І перайсці на некалькі рэчаў,
гэтага метаду ініцыялізацыі будзе выкліканы, калі мы спачатку ствараем гэтую To-Do List.
Як вы можаце бачыць, гэта як стварэнне спісу спраў і звязаўшы яго з гэтага пункту гледжання.
А потым я дадаў функцыі тут, так у асноўным, калі пры даданні тавару-
гэта падобна на метад айсНЬет мы бачылі раней-
Я збіраюся стварыць новы аб'ект TODO, і звярніце ўвагу на самай справе я выкліку
гэты новы метад TODO, так што гэта забяспечваецца пазваночніка,
і я магу перадаць у маіх уласцівасцях тут.
І цяпер кожны TODO, што я ствараю з дапамогай гэтага атрымаеце, што функцыянальныя магчымасці, якія мы бачылі раней.
Звярніце ўвагу, я ачыстка тэкставага поля да-невялікая дробязь-
а затым я дадаю гэтую калекцыю.
>> Гэта амаль здаецца дзіўным, таму што перш, чым мы проста павінен быў зрабіць, што todos.push,
а затым мы былі зробленыя, і гэта можа здацца больш складаным для гэтага канкрэтнага праекта,
і вы можаце выявіць, што Магістральная або нават вуглавога або любыя іншыя рамкі
не задавальняе вашага канкрэтнага праекта, але я думаю, што гэта важна думаць аб
што гэта азначае ў больш шырокім маштабе для больш буйных праектаў,
таму што калі б мы мелі больш буйны праект, дзе мы прадстаўлялі
некаторыя сапраўды складаны збор, нешта больш глыбокае, чым проста спіс спраў,
скажам, спіс сяброў, ці нешта накшталт гэтага, гэта можа спатрэбіцца
таму што мы маглі арганізаваць наш код у сапраўды зручны спосаб,
такім чынам, што будзе лягчэй для каго-небудзь яшчэ
, Які хацеў забраць праект абапірацца.
Вы можаце бачыць, што гэта дае шмат структуру.
І тады я тэлефаную аказваюць на гэтую айсНЬет.
Візуалізацыя, як вы можаце бачыць, і вам не прыйдзецца зразумець гэта поўны сінтаксіс,
але ў асноўным для кожнай мадэлі ён збіраецца выклікаць асобныя метад візуалізацыі.
Гэта свайго роду, дзе гэта адбываецца ад.
Давайце проста паказаць, як адлюстроўваць асобныя Todos,
а затым давайце склеіць іх разам у цэлым.
Але гэта дае магчымасць абстракцыі,
таму што я мог змяніць тое, як я вырашу зрабіць індывідуальны Todos,
і я б не стаў нічога мяняць у гэтага Кодэкса.
Гэта крута.
>> Хто-небудзь ёсць якія-небудзь пытанні аб рамках JavaScript?
[Неразборліва Студэнт пытанне]
О, вядома, гэта вялікае пытанне.
Пытанне было, як жа я ўключаць структур?
Большасць фреймворков JavaScript ў асноўным толькі JS файлы
, Якія можна ўключыць у верхняй частцы кода.
Заўважце, што ў галаўны частцы маёй HTML У мяне ёсць усе гэтыя тэгі сцэнара,
і канчатковы тэг скрыпт код, які мы напісалі.
А потым 3 коды рамкі з'яўляюцца як раз і тэгі сцэнара.
Я ў тым ліку іх ад таго, што называецца CDN,
які дазваляе мне атрымаць яго ад каго-то іншага ў гэтай кропцы
але кожны мае рамках гэтага-вы можаце вельмі шмат што знайсці змест
для канкрэтнай бібліятэкі JavaScript даступная на некаторых CDN ці нешта накшталт гэтага,
а затым вы можаце ўключыць гэтыя тэгі сцэнара.
Ці мае гэта сэнс?
Крута.
>> Тыя 2 розных падыходаў.
Гэта не толькі падыходы да вырашэння гэтай праблемы.
Ёсць шмат розных рэчаў, якія
хто-то можа зрабіць, і ёсць шмат межаў там.
Кутняе і хрыбетнік ніяк не расказаць усю гісторыю.
Удачы вам у вашых канчатковых праектаў, і вялікі дзякуй.
[CS50.TV]