[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]