1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [Seminarium] [Konstrukcje JavaScript: dlaczego i jak?] 2 00:00:02,000 --> 00:00:04,000 [Kevin Schmid] [Harvard University] 3 00:00:04,000 --> 00:00:06,960 [To jest CS50.] [CS50.TV] 4 00:00:06,960 --> 00:00:10,630 >> Cześć wszystkim. Zapraszamy na seminarium środowisk JavaScript. 5 00:00:10,630 --> 00:00:14,910 Nazywam się Kevin, a dziś mam zamiar mówić o ram JavaScript, 6 00:00:14,910 --> 00:00:20,400 i celem tego seminarium nie jest Ci do, powiedzmy, opanowania konkretnej ramy per se 7 00:00:20,400 --> 00:00:23,810 ale daje szerokie wprowadzenie do kilku ram 8 00:00:23,810 --> 00:00:27,150 i pokazać, dlaczego my zawsze chcemy korzystać z ramy. 9 00:00:27,150 --> 00:00:31,060 >> Zanim zrobisz, będę zapewnić trochę tła w JavaScript, 10 00:00:31,060 --> 00:00:33,750 i wtedy go stamtąd. 11 00:00:33,750 --> 00:00:36,270 Zamierzamy rozpocząć od wdrożenia listy rzeczy do zrobienia. 12 00:00:36,270 --> 00:00:39,330 Oto nasza lista zadań na dziś. 13 00:00:39,330 --> 00:00:41,990 To trochę śmieszne. Musimy wdrożyć lista rzeczy do zrobienia w JavaScript. 14 00:00:41,990 --> 00:00:45,110 To jest to, co to będzie wyglądać tak, że nasz pierwszy cel. 15 00:00:45,110 --> 00:00:47,160 Nie będziemy używać ramy to zrobić. 16 00:00:47,160 --> 00:00:51,930 Jedziemy do kodu JavaScript i dostać listy zadań do pracy. 17 00:00:51,930 --> 00:00:54,370 Następnie jedziemy do poprawy konstrukcji bez użycia ramy. 18 00:00:54,370 --> 00:00:57,190 Będziemy dyskutować na różne rzeczy możemy zrobić tylko z samym JavaScript 19 00:00:57,190 --> 00:01:00,650 , aby nasza lista rzeczy do zrobienia trochę więcej dobrze zaprojektowane. 20 00:01:00,650 --> 00:01:02,490 Wtedy będziemy rzucać w niektórych jQuery, 21 00:01:02,490 --> 00:01:05,030 i wtedy będziemy patrzeć na same listy rzeczy do zrobienia, 22 00:01:05,030 --> 00:01:07,170 właśnie wdrażane w różnych ramach, i omówimy 23 00:01:07,170 --> 00:01:09,280  plusy i minusy po drodze. 24 00:01:09,280 --> 00:01:12,040 >> Zacznijmy wdrażaniu że lista rzeczy do zrobienia. 25 00:01:12,040 --> 00:01:14,270 Powiedzmy, że dostaniesz ten HTML. 26 00:01:14,270 --> 00:01:16,620 Mam zamiar zrobić to nieco mniejsze. 27 00:01:16,620 --> 00:01:19,300 Jak widać, mam mały nagłówek, który mówi Todo 28 00:01:19,300 --> 00:01:21,740 i małe pole, gdzie można wpisać opis todo 29 00:01:21,740 --> 00:01:26,990 a następnie przycisk Nowy element, więc spróbujmy wprowadzić nową todo do tej listy. 30 00:01:26,990 --> 00:01:31,000 Daj seminarium JavaScript ram, 31 00:01:31,000 --> 00:01:33,090 i jestem trafić nowy przedmiot. 32 00:01:33,090 --> 00:01:35,730 Mam ten alert JavaScript, który mówi wdrożyć mnie. 33 00:01:35,730 --> 00:01:37,560 Musimy wdrożyć. 34 00:01:37,560 --> 00:01:41,490 Sprawdźmy kod do tego, jak HTML i JavaScript. 35 00:01:41,490 --> 00:01:43,260 Oto nasz HTML. 36 00:01:43,260 --> 00:01:45,500 Jak widać tutaj, tu jest nasza mała header Todos. 37 00:01:45,500 --> 00:01:47,620 To było odważne rzeczy na górze, 38 00:01:47,620 --> 00:01:50,690 i wtedy mamy pole wprowadzania z zastępczego, 39 00:01:50,690 --> 00:01:59,460 i potem jest pewna cecha tego przycisku, który wywołuje tę addTodo funkcji. 40 00:01:59,460 --> 00:02:05,460 Czy ktoś chce się odgadnąć, co to na kliknięcie jest wyzwoleniem? 41 00:02:05,460 --> 00:02:07,390 [Student niesłyszalny odpowiedź] 42 00:02:07,390 --> 00:02:09,289 Dobra, na kliknięcie jest coś w rodzaju zdarzenia, 43 00:02:09,289 --> 00:02:12,120 jak kliknięcie myszką jest tylko impreza, i to, co robimy 44 00:02:12,120 --> 00:02:16,890 jest my wiążąc wydarzenie kliknięciu tego przycisku, aby wykonać tę funkcję. 45 00:02:16,890 --> 00:02:21,700 AddTodo to jest obsługi zdarzeń na naciśnięcie przycisku. 46 00:02:21,700 --> 00:02:25,010 >> Jak widać, po kliknięciu na przycisk Nowy element 47 00:02:25,010 --> 00:02:29,940 na zdarzenia click zostanie zwolniony, a ta funkcja jest wywoływana. 48 00:02:29,940 --> 00:02:33,170 Przyjrzyjmy się funkcji. 49 00:02:33,170 --> 00:02:36,260 Jak widać, tutaj jest mój kod JavaScript do tej pory. 50 00:02:36,260 --> 00:02:41,280 Co mam na górze jest globalną strukturę danych dla mojej liście rzeczy do zrobienia. 51 00:02:41,280 --> 00:02:44,060 To wygląda jak tablica. To jest po prostu pusta tablica. 52 00:02:44,060 --> 00:02:47,100 A potem mam addTodo funkcji, które widzieliśmy wcześniej, 53 00:02:47,100 --> 00:02:50,740 i tylko linii kodu tam jest ten alert. 54 00:02:50,740 --> 00:02:55,730 Ostrzega wdrożyć mnie, a potem mam 2 zadania pod ręką. 55 00:02:55,730 --> 00:02:58,790 Muszę dodać todo do tej globalnej struktury danych, 56 00:02:58,790 --> 00:03:01,860 i chcę zwrócić uwagę na liście rzeczy do zrobienia. 57 00:03:01,860 --> 00:03:06,360 Nic nadzwyczajnego jeszcze, ale JavaScript może być zaznajomiony z, 58 00:03:06,360 --> 00:03:12,370 więc zamierzam iść powoli i przeglądu podstaw JavaScript w ten sposób. 59 00:03:12,370 --> 00:03:15,490 >> Dajmy ten strzał. 60 00:03:15,490 --> 00:03:21,130 Załóżmy, że użytkownik wpisze coś w tym polu. 61 00:03:21,130 --> 00:03:23,360 I po prostu wpisane coś tutaj, tekstu. 62 00:03:23,360 --> 00:03:27,620 Jak sortować dostępu tego tekstu poprzez JavaScript? 63 00:03:27,620 --> 00:03:32,500 Pamiętaj, że JavaScript, jednym z jej podstawowych cech jest to, że daje nam 64 00:03:32,500 --> 00:03:34,670 to programowy dostęp do DOM. 65 00:03:34,670 --> 00:03:40,670 To pozwala nam na dostęp do elementów i ich właściwości tej rzeczywistej HTML. 66 00:03:40,670 --> 00:03:43,430 Sposób robimy z Bare Bones JavaScript 67 00:03:43,430 --> 00:03:51,360 jest rzeczywiście możemy użyć funkcji w JavaScript o nazwie getElementById. 68 00:03:51,360 --> 00:03:55,140 Chcę, aby przechowywać tekst, który jest wpisany w jakiś tam zmiennej, 69 00:03:55,140 --> 00:03:58,350 tak, mam zamiar powiedzieć, nową zmienną o nazwie new_todo, 70 00:03:58,350 --> 00:04:01,980 i mam zamiar się tego elementu. 71 00:04:01,980 --> 00:04:06,330 Jest to funkcja,. GetElementById. 72 00:04:06,330 --> 00:04:11,580 A teraz jestem coraz elementu przez ID, więc muszę identyfikator tego pola tekstowego, 73 00:04:11,580 --> 00:04:15,860 więc dałem mu new_todo_description ID. 74 00:04:15,860 --> 00:04:18,399 To jak mam zamiar uzyskać element. 75 00:04:18,399 --> 00:04:23,880 To jest mój argument tej funkcji, aby określić, które ID dostać. 76 00:04:23,880 --> 00:04:28,110 I tak to jest elementem HTML, i ma właściwości. 77 00:04:28,110 --> 00:04:30,650 Widziałeś tych. Oni są atrybuty. 78 00:04:30,650 --> 00:04:37,090 Atrybut elementu tekstowego, który przechowuje wejście użytkownika jest nazywany wartością. 79 00:04:37,090 --> 00:04:40,860 I zapisać wartość tego pola tekstowego, teraz w tej zmiennej o nazwie new_todo. 80 00:04:40,860 --> 00:04:45,040 Teraz mam programowy dostęp do tej zmiennej, która jest całkiem ciekawie 81 00:04:45,040 --> 00:04:49,200 bo teraz, co mogę zrobić, to mogę dodać go do mojej listy rzeczy do zrobienia. 82 00:04:49,200 --> 00:04:52,870 >> Sposób chcemy to zrobić w JavaScript i nie martw się, jeśli jesteś zaznajomiony z tym, 83 00:04:52,870 --> 00:04:57,010 ale po prostu się przez nią jest todos.push 84 00:04:57,010 --> 00:05:00,130 bo to jest nazwa mojej globalnej struktury danych tutaj, 85 00:05:00,130 --> 00:05:04,450 i zamierzam pchnąć new_todo. 86 00:05:04,450 --> 00:05:09,120 To jest dobre, bo teraz dodałem go do mojego JavaScript 87 00:05:09,120 --> 00:05:11,280 reprezentacja, że ​​lista rzeczy do zrobienia. 88 00:05:11,280 --> 00:05:15,170 Ale teraz, jak mogę dostać go z powrotem do HTML? 89 00:05:15,170 --> 00:05:18,560 Muszę znaleźć sposób, aby rodzaj przesunąć go z powrotem. 90 00:05:18,560 --> 00:05:21,830 Innymi słowy, I niby trzeba zwrócić na to. 91 00:05:21,830 --> 00:05:26,060 Co zamierzamy zrobić, to mamy zamiar zwrócić lista rzeczy do zrobienia. 92 00:05:26,060 --> 00:05:29,270 Muszę zaktualizować inne HTML na tej stronie, 93 00:05:29,270 --> 00:05:32,040 i jak widać, już opuścił ten mały pojemnik tutaj, 94 00:05:32,040 --> 00:05:36,840 ten dzielnik strony, której ID jest todos, 95 00:05:36,840 --> 00:05:40,870 i mam zamiar umieścić lista rzeczy do zrobienia tam. 96 00:05:40,870 --> 00:05:47,240 Po pierwsze mam zamiar go usunąć, bo, powiedzmy, był stary lista rzeczy do zrobienia tam. 97 00:05:47,240 --> 00:05:49,560 Dostaję tego elementu przez ID znowu 98 00:05:49,560 --> 00:05:54,530 i mam dostępu do wewnętrznej HTML tego elementu, 99 00:05:54,530 --> 00:05:58,010 i mam zamiar wyjaśnić, że. 100 00:05:58,010 --> 00:06:05,510 Jeśli zostawiliśmy ten kod jak jest, to widzimy puste nic nie ma, 101 00:06:05,510 --> 00:06:10,410 i teraz chcę rozpocząć świadczenie moją nową lista rzeczy do zrobienia. 102 00:06:10,410 --> 00:06:12,870 Jestem w zasadzie zamiar wymazać moje lista rzeczy do zrobienia. 103 00:06:12,870 --> 00:06:18,180 >> Teraz wewnętrzna HTML wewnątrz tego div Todos jest całkowicie jasne, 104 00:06:18,180 --> 00:06:20,060 i teraz muszę zacząć dodawać moją listę. 105 00:06:20,060 --> 00:06:23,890 Pierwszą rzeczą, którą chcesz dodać z powrotem jest nieuporządkowane tag list, 106 00:06:23,890 --> 00:06:33,890 która w zasadzie oznacza, że ​​jest to początek listę nieuporządkowaną. 107 00:06:33,890 --> 00:06:39,770 Teraz dla każdego elementu w mojej tablicy Todos Chcę wydrukować wewnątrz tego HTML. 108 00:06:39,770 --> 00:06:43,710 Chcę, aby dołączyć go do dołu tej listy. 109 00:06:43,710 --> 00:06:49,040 Podobnie jak w C, można używać pętli for, i mam zamiar rozpocząć na początku mojej liście 110 00:06:49,040 --> 00:06:54,140 w elemencie 0 i mam zamiar przejść całą drogę do długości listy. 111 00:06:54,140 --> 00:07:01,100 Możemy rzeczywiście się długość tablicy w JavaScript za pomocą właściwości length. 112 00:07:01,100 --> 00:07:03,420 Zasadniczo mam zamiar zrobić coś bardzo podobnego wewnątrz tutaj 113 00:07:03,420 --> 00:07:05,600 wydrukować ten element. 114 00:07:05,600 --> 00:07:12,970 Można ponownie uzyskać dostęp do div todos, wewnętrzna HTML własnością tego, 115 00:07:12,970 --> 00:07:17,560 i mam zamiar dodać do tego nowego elementu listy, i że będzie otoczony 116 00:07:17,560 --> 00:07:25,390 ten tag li, i mam zamiar łączyć z operatorem +, 117 00:07:25,390 --> 00:07:28,040 i to jest i-ty element mojej tablicy todos, 118 00:07:28,040 --> 00:07:32,380 i mam zamiar zamknąć ten znacznik. 119 00:07:32,380 --> 00:07:36,240 Teraz dla każdego elementu dodamy nową pozycję listy. 120 00:07:36,240 --> 00:07:48,700 I wtedy wszystko, co naprawdę trzeba zrobić, to zamknąć ten znacznik. 121 00:07:48,700 --> 00:07:52,820 I po prostu trzeba zamknąć, że nieuporządkowane tag liście. 122 00:07:52,820 --> 00:07:55,490 >> Lubisz poczuć jak to działa? 123 00:07:55,490 --> 00:07:57,700 To otwiera całą listę. 124 00:07:57,700 --> 00:08:01,080 To dodaje poszczególne elementy z listy todos do listy, 125 00:08:01,080 --> 00:08:05,470 , a następnie, że zamknięcie całej listy, a to jest mój addTodo funkcji. 126 00:08:05,470 --> 00:08:09,590 I w zasadzie zacząć od uzyskania todo z pola tekstowego. 127 00:08:09,590 --> 00:08:18,950 I dodać, że do tablicy todos, a potem ponownie renderować lista rzeczy do zrobienia. 128 00:08:18,950 --> 00:08:21,520 Teraz mogę dodać pozycje do listy. 129 00:08:21,520 --> 00:08:24,620 To jest rodzaj ekscytujące, ponieważ w ciągu zaledwie kilku linii kodu 130 00:08:24,620 --> 00:08:28,240 my w zasadzie dokonał lista rzeczy do zrobienia, gdzie możemy dodać elementy. 131 00:08:28,240 --> 00:08:30,050 Świetnie. 132 00:08:30,050 --> 00:08:34,480 To rodzaj podstawowego Wprowadzenie do JavaScript. 133 00:08:34,480 --> 00:08:36,179 Nie martw się zbytnio o składni teraz, 134 00:08:36,179 --> 00:08:38,130 ale o tym myśleć koncepcyjnie. 135 00:08:38,130 --> 00:08:40,539 Mieliśmy trochę HTML. 136 00:08:40,539 --> 00:08:45,310 Mieliśmy pole tekstowe na stronie, która w zasadzie pozwala użytkownikom na wejście do zrobienia element do dodania. 137 00:08:45,310 --> 00:08:49,210 A potem użyliśmy JavaScript, aby pobrać ten todo z tego pola tekstowego. 138 00:08:49,210 --> 00:08:52,830 Mamy zapisane, że wewnątrz tablicy JavaScript, która jest w zasadzie jak 139 00:08:52,830 --> 00:08:56,010 nasza reprezentacja, która programowo do listy zadań, 140 00:08:56,010 --> 00:08:59,060 a potem wydrukować go. 141 00:08:59,060 --> 00:09:02,690 To todos.js. 142 00:09:02,690 --> 00:09:07,620 >> To jest całkiem fajne, ale jak możemy to dalej? 143 00:09:07,620 --> 00:09:11,350 Cóż, jak widać, to nie jest jak pełna lista rzeczy do zrobienia. 144 00:09:11,350 --> 00:09:15,100 Na przykład, nie mogę zaznaczyć żadnej z tych pozycji, jak niekompletne, 145 00:09:15,100 --> 00:09:19,920 jak gdybym chciał reprioritize elementy lub usunąć elementy. 146 00:09:19,920 --> 00:09:23,150 To jest w porządku, ale możemy to dalej. 147 00:09:23,150 --> 00:09:29,280 Nie zamierzam mówić zbyt wiele o dodanie dodatkowych funkcji, 148 00:09:29,280 --> 00:09:32,800 ale możemy wziąć to dalej. 149 00:09:32,800 --> 00:09:35,970 Porozmawiajmy o dodanie jeszcze jednej funkcji, aby ta lista rzeczy do zrobienia, 150 00:09:35,970 --> 00:09:40,370 które ma być możliwość sprawdzenia osoby do zrobienia artykuł 151 00:09:40,370 --> 00:09:44,780 i go skreślić, więc w zasadzie mówiąc robiłem to. 152 00:09:44,780 --> 00:09:50,240 Spójrzmy na niektóre kodu, który może tego dokonać. 153 00:09:50,240 --> 00:09:52,740 Zauważ, co zrobiłem na górze jest Dodałem 154 00:09:52,740 --> 00:09:57,620 Nowa globalna tablica nazywa kompletny. 155 00:09:57,620 --> 00:10:02,890 Jestem w zasadzie przy tym do przechowywania, czy elementy na liście do zrobienia 156 00:10:02,890 --> 00:10:06,560 są kompletne, czy nie. 157 00:10:06,560 --> 00:10:08,470 To jeden ze sposobów, aby to zrobić. 158 00:10:08,470 --> 00:10:13,750 Jeśli patrzę na realizację tego, wyświetlania, 159 00:10:13,750 --> 00:10:21,120 w zasadzie, jeśli wprowadzić todo i nacisnąć ten przycisk przełącznika 160 00:10:21,120 --> 00:10:25,040 przecina się, więc każda pozycja na tej liście ma albo kompletne 161 00:10:25,040 --> 00:10:31,050 lub niekompletne państwo, i używam kolejną tablicę do reprezentowania tego. 162 00:10:31,050 --> 00:10:33,730 >> W zasadzie dla każdego todo w tej tablicy Todos 163 00:10:33,730 --> 00:10:37,110 jest pozycja w kompletnej tablicy wskazuje, że w zasadzie 164 00:10:37,110 --> 00:10:39,060 czy jest kompletny, czy nie. 165 00:10:39,060 --> 00:10:41,640 Miałem zrobić dość minimalne zmiany do tego kodu, 166 00:10:41,640 --> 00:10:44,470 tak oto nasz addTodo funkcji. 167 00:10:44,470 --> 00:10:48,530 Zauważ, że tutaj jestem popychając go na tablicy, 168 00:10:48,530 --> 00:10:51,300 i wtedy ja pcha 0 do tego kompletną tablicę, 169 00:10:51,300 --> 00:10:57,090 w zasadzie równolegle z tym nowym naciśnięciem todo do powiedzenia 170 00:10:57,090 --> 00:11:00,430 Dodaję ten przedmiot, a to w połączeniu z tej wartości, 171 00:11:00,430 --> 00:11:02,810 co oznacza, że ​​jest niepełne. 172 00:11:02,810 --> 00:11:04,970 I wtedy jestem odświeżanie listy rzeczy do zrobienia. 173 00:11:04,970 --> 00:11:09,220 Teraz zauważył Dodałem ten drawTodoList funkcji. 174 00:11:09,220 --> 00:11:11,760 To zajmuje dużo kodu mieliśmy wcześniej, 175 00:11:11,760 --> 00:11:15,320 zasadzie czyści pole, a następnie zwraca nowy lista rzeczy do zrobienia. 176 00:11:15,320 --> 00:11:19,620 Zauważmy jednak, że w środku tego dla pętli robimy trochę więcej teraz. 177 00:11:19,620 --> 00:11:25,000 Jesteśmy w zasadzie sprawdzania, czy pozycja odpowiadająca i-tego todo tutaj 178 00:11:25,000 --> 00:11:30,220 jest zakończona, a my zachowywać się inaczej w tych 2 przypadkach. 179 00:11:30,220 --> 00:11:32,790 Jeśli jest pełna, dodajemy ten tag del, 180 00:11:32,790 --> 00:11:35,360 która jest w zasadzie sposób można uzyskać efekt uderzenia przez 181 00:11:35,360 --> 00:11:38,190 wykreślenie lista rzeczy do zrobienia, jeśli jest pełna, 182 00:11:38,190 --> 00:11:42,200 a jeśli nie jest to, że nie jesteśmy w tym go. 183 00:11:42,200 --> 00:11:45,030 I tak, że niby dba o to, 184 00:11:45,030 --> 00:11:49,140 >> i to jest jeden sposób, aby to osiągnąć. 185 00:11:49,140 --> 00:11:53,420 I wtedy zauważył, kiedy użytkownik kliknie jeden z nich 186 00:11:53,420 --> 00:11:56,780 możemy zmienić status zakończenia go. 187 00:11:56,780 --> 00:12:02,170 Gdy użytkownik kliknie, to odwrócić, czy to zostało zakończone, czy też nie, 188 00:12:02,170 --> 00:12:04,540 i wtedy przerysować go. 189 00:12:04,540 --> 00:12:06,190 Ten rodzaj prac. 190 00:12:06,190 --> 00:12:09,860 Mamy te funkcje, które wykonują swoje zadania, 191 00:12:09,860 --> 00:12:11,730 i to jest w porządku. 192 00:12:11,730 --> 00:12:14,110 Czy jest coś nie mogliśmy zrobić lepiej o tym, chociaż? 193 00:12:14,110 --> 00:12:18,700 Zauważ, mamy te 2 globalnych tablic. 194 00:12:18,700 --> 00:12:23,550 Jeśli to był C, i mieliśmy 2 tablice, że rodzaj reprezentowanych 195 00:12:23,550 --> 00:12:25,800 dane, które były jakby w jakiś sposób związane z 196 00:12:25,800 --> 00:12:30,140 co będziemy używać w C połączyć te 2 pola 197 00:12:30,140 --> 00:12:35,420 w coś, co obejmuje zarówno fragmenty informacji? 198 00:12:35,420 --> 00:12:37,600 Czy ktoś chce coś zasugerować? 199 00:12:37,600 --> 00:12:39,450 [Student niesłyszalny odpowiedź] 200 00:12:39,450 --> 00:12:42,340 >> Dokładnie, więc możemy użyć jakiejś struktury, 201 00:12:42,340 --> 00:12:44,960 i jeśli uważasz, że powrót do, powiedzmy, Pset 3, 202 00:12:44,960 --> 00:12:47,350 pamiętam mieliśmy słownika, a następnie mieliśmy, czy słowo 203 00:12:47,350 --> 00:12:50,230 było w słowniku, a wszystko to razem wzięte informacje 204 00:12:50,230 --> 00:12:52,420 wewnątrz jakiejś struktury danych. 205 00:12:52,420 --> 00:12:56,390 Jedno, co mogę zrobić z tym kodem, aby uniknąć tych 2 różne tablice 206 00:12:56,390 --> 00:13:01,760 podobnych elementów informacji to można połączyć je w obiekt JavaScript. 207 00:13:01,760 --> 00:13:07,150 Rzućmy okiem na to. 208 00:13:07,150 --> 00:13:11,740 Zauważ, mam tylko jeden układ na górze teraz 209 00:13:11,740 --> 00:13:17,650 i to, co zrobiłem to i to jest po prostu JavaScript składnia rodzaju 210 00:13:17,650 --> 00:13:21,350 tworząc dosłowną wersję obiektu, 211 00:13:21,350 --> 00:13:24,670 i zawiadomienia są 2 właściwości, więc mamy todo, 212 00:13:24,670 --> 00:13:29,660 i to trzymane razem z tym, czy jest to kompletny lub niekompletny. 213 00:13:29,660 --> 00:13:31,000 To jest bardzo podobny kod. 214 00:13:31,000 --> 00:13:35,310 Używamy obiektów JavaScript. 215 00:13:35,310 --> 00:13:38,600 Ten rodzaj poprawia rzeczy. 216 00:13:38,600 --> 00:13:43,850 Podobnie jak teraz, wszystkie te obszary powiązane informacje są przechowywane razem. 217 00:13:43,850 --> 00:13:46,410 Kiedy idziemy do wydrukować, możemy uzyskać dostęp do pól. 218 00:13:46,410 --> 00:13:49,060 >> Zauważ, jak robimy todos [i]. Kompletne 219 00:13:49,060 --> 00:13:52,880 zamiast sprawdzania kompletny wachlarz oddzielnie, 220 00:13:52,880 --> 00:13:56,560 i zauważyć, gdy chcemy uzyskać ciąg do zrobienia mamy uzyskiwanie własności do zrobienia 221 00:13:56,560 --> 00:13:58,750 tego todo, więc tego rodzaju ma sens, ponieważ 222 00:13:58,750 --> 00:14:01,660 każdy element ma te swoiste właściwości temat. 223 00:14:01,660 --> 00:14:05,650 Ma todo, i ma, czy jest to pełna lub nie. 224 00:14:05,650 --> 00:14:11,540 Nie za wiele zmian nie funkcjonalnie, po prostu dodaje kilka do kodu. 225 00:14:11,540 --> 00:14:13,430 To jest poprawa na niektórych frontach, prawda? 226 00:14:13,430 --> 00:14:16,030 To znaczy, że zbitek projektowania trochę. 227 00:14:16,030 --> 00:14:20,350 Teraz mamy obiekty na zasadzie enkapsulacji danych. 228 00:14:20,350 --> 00:14:27,130 Czy jest coś więcej możemy zrobić, od tego w kategoriach JavaScript? 229 00:14:27,130 --> 00:14:31,810 Podobnie jak zawiadomienie, że ten kod tutaj 230 00:14:31,810 --> 00:14:34,760 na uzyskanie wewnętrznego kodu HTML div 231 00:14:34,760 --> 00:14:40,520 jest niewiele, myślę, długo. 232 00:14:40,520 --> 00:14:45,100 Jest document.getElementById ("todos"). InnerHTML. 233 00:14:45,100 --> 00:14:48,400 Jedną rzeczą, jaką możemy zrobić, aby kod ten wygląda trochę bardziej przyjazny 234 00:14:48,400 --> 00:14:51,450 więc nie zachować przewijanie w lewo i prawo, w przód iw tył, 235 00:14:51,450 --> 00:14:58,480 to może używać bibliotek takich jak jQuery. 236 00:14:58,480 --> 00:15:02,710 >> Sprawdźmy Seminarium 2, 237 00:15:02,710 --> 00:15:05,880 i jest to ten sam kod, ale to się robi z jQuery. 238 00:15:05,880 --> 00:15:08,790 Możesz nie być zbyt dobrze z jQuery, 239 00:15:08,790 --> 00:15:11,510 ale po prostu wiem, że jQuery jest rodzajem biblioteki JavaScriptu 240 00:15:11,510 --> 00:15:15,910 sprawia, że ​​łatwiej zrobić takie rzeczy jak dostęp do poszczególnych elementów w DOM. 241 00:15:15,910 --> 00:15:21,280 Tutaj zamiast mówić document.getElementById ("todos"). InnerHTML 242 00:15:21,280 --> 00:15:25,210 Można używać wiele sposób czystsze w jQuery, 243 00:15:25,210 --> 00:15:28,490 który jest po prostu używać selektorów. 244 00:15:28,490 --> 00:15:31,300 Jak widać, ten kod dostał trochę czystsze, 245 00:15:31,300 --> 00:15:35,770 bardzo podobne funkcjonalnie, ale to jest pomysł. 246 00:15:35,770 --> 00:15:37,980 Widzieliśmy kilka rzeczy do tej pory, 247 00:15:37,980 --> 00:15:42,010 więc zaczęliśmy się tylko surowego realizacji JavaScript. 248 00:15:42,010 --> 00:15:45,370 Dodaliśmy nowe funkcje i pokazał, jak możemy poprawić go 249 00:15:45,370 --> 00:15:49,090 tylko to, co mamy w JavaScript. 250 00:15:49,090 --> 00:15:53,300 >> Czy ktoś widzi trudności z tym wzorem? 251 00:15:53,300 --> 00:16:01,090 Mianowicie, myślę, czy nie koniecznie trudności, ale powiedzmy 252 00:16:01,090 --> 00:16:04,830 my nie robi projekt do zrobienia listy, a jutro zdecydowaliśmy 253 00:16:04,830 --> 00:16:10,320 chcieliśmy stworzyć listę zakupów lub projekt listy zakupów. 254 00:16:10,320 --> 00:16:14,150 Wiele z tych funkcji są bardzo podobne. 255 00:16:14,150 --> 00:16:19,080 Wiele rzeczy, które chcemy, aby wydostać się z JavaScriptu są bardzo powszechne, 256 00:16:19,080 --> 00:16:23,820 i to podkreśla potrzebę jakiejś drodze 257 00:16:23,820 --> 00:16:25,670 co to łatwiej zrobić. 258 00:16:25,670 --> 00:16:30,400 Musiałem zbudować cały ten HTML dostępu, cały ten dostęp DOM, 259 00:16:30,400 --> 00:16:35,530 jak idę do reprezentowania listy rzeczy do zrobienia z tym modelem. 260 00:16:35,530 --> 00:16:39,130 I zauważył, że jestem odpowiedzialny za autora JavaScript 261 00:16:39,130 --> 00:16:42,890 za prowadzenie HTML i JavaScript, które mam w synchronizacji. 262 00:16:42,890 --> 00:16:48,040 Nic automatycznie się, że reprezentacja JavaScript 263 00:16:48,040 --> 00:16:51,590 lub lista rzeczy do zrobienia się wypchnięty do HTML. 264 00:16:51,590 --> 00:16:54,000 Nic nie egzekwowane, że z wyjątkiem mnie. 265 00:16:54,000 --> 00:16:56,880 Miałem napisać remisu funkcji do zrobienia listy. 266 00:16:56,880 --> 00:17:01,650 A to nie może być, to znaczy, że to rozsądne, aby to zrobić, 267 00:17:01,650 --> 00:17:03,670 ale może to być uciążliwe czasem. 268 00:17:03,670 --> 00:17:08,190 Jeśli masz większy projekt, który może być trudne. 269 00:17:08,190 --> 00:17:10,720 >> Konstrukcje, jeden z celów ram 270 00:17:10,720 --> 00:17:14,060 jest uproszczenie tego procesu i rodzaju czynnika out 271 00:17:14,060 --> 00:17:16,950 Te wspólne-Chyba można powiedzieć-design patterns 272 00:17:16,950 --> 00:17:20,700 że ludzie na ogół mają jakiś sposób przedstawiania danych, 273 00:17:20,700 --> 00:17:25,599 czy to jest lista przyjaciół, czy to informacje map 274 00:17:25,599 --> 00:17:27,280 lub coś lub listy zadań. 275 00:17:27,280 --> 00:17:30,660 Niektórzy ludzie mają na ogół sposób przedstawiania informacji, 276 00:17:30,660 --> 00:17:33,650 i generalnie trzeba trzymać tego rodzaju informacje z zsynchronizowane 277 00:17:33,650 --> 00:17:36,520 pomiędzy tym, co użytkownik widzi w jakimś związku, 278 00:17:36,520 --> 00:17:39,850 Mówiąc w kategoriach takich jak kontroler widoku modelu, który widział w wykładzie 279 00:17:39,850 --> 00:17:45,400 a następnie model, który w tym przypadku jest to tablica JavaScript. 280 00:17:45,400 --> 00:17:49,020 Ramy daje nam sposób na rozwiązanie tego problemu. 281 00:17:49,020 --> 00:17:53,080 Teraz rzućmy okiem na realizację to lista rzeczy do zrobienia 282 00:17:53,080 --> 00:18:02,360 w ramach nazwie angularjs. 283 00:18:02,360 --> 00:18:04,650 To jest to. Zauważ, że pasuje na szkiełku. 284 00:18:04,650 --> 00:18:07,330 I nie trzeba przewijać w lewo i prawo. 285 00:18:07,330 --> 00:18:10,460 To prawdopodobnie nie jest to wielki powód do zalecamy używanie ramy jest 286 00:18:10,460 --> 00:18:20,120 ale zauważ, ja kiedykolwiek dostęp do poszczególnych elementów HTML tutaj? 287 00:18:20,120 --> 00:18:22,400 Czy ja kiedykolwiek do DOM? 288 00:18:22,400 --> 00:18:26,120 Czy widzisz document.getElementById czy coś takiego? 289 00:18:26,120 --> 00:18:29,870 Nie, nie ma. 290 00:18:29,870 --> 00:18:35,590 >> Kanciasty pomaga nam utrzymać DOM i naszą reprezentację JavaScript czegoś 291 00:18:35,590 --> 00:18:40,430 rodzaj zsynchronizowane, więc jeśli nie jest w pliku js, 292 00:18:40,430 --> 00:18:46,790 jeśli nie ma sposobu programowo się do całej tej treści HTML 293 00:18:46,790 --> 00:18:51,800 z JavaScriptu, jak my utrzymując to w synchronizacji? 294 00:18:51,800 --> 00:18:58,160 Jeśli nie jest w pliku. Js, to musi być w formacie HTML, prawda? 295 00:18:58,160 --> 00:19:01,910 To jest nowa wersja pliku HTML, 296 00:19:01,910 --> 00:19:04,660 i zauważyć dodaliśmy wiele tutaj. 297 00:19:04,660 --> 00:19:11,110 Zauważysz te nowe cechy, które mówią, ng-click i ng-repeat. 298 00:19:11,110 --> 00:19:15,650 Podejście do kątowa rozwiązać ten problem trudności w projektowaniu 299 00:19:15,650 --> 00:19:19,130 jest w zasadzie zrobić HTML znacznie bardziej wydajne. 300 00:19:19,130 --> 00:19:24,420 Angular to sposób pozwalający na dokonanie HTML nieco bardziej wyraziste. 301 00:19:24,420 --> 00:19:30,520 Na przykład, mogę powiedzieć, że mam zamiar związać lub powiązać to pole tekstowe 302 00:19:30,520 --> 00:19:35,080 do zmiennej w moim Kątowych kodu JavaScript. 303 00:19:35,080 --> 00:19:37,030 Ten ng model właśnie to robi. 304 00:19:37,030 --> 00:19:41,550 To w zasadzie mówi, że element w środku tego pola tekstowego, 305 00:19:41,550 --> 00:19:45,000 tylko kojarzy, że ze zmienną new_todo_description 306 00:19:45,000 --> 00:19:47,870 w kodzie JavaScript. 307 00:19:47,870 --> 00:19:51,600 To jest bardzo silny, bo nie mam jawnie przejść do 308 00:19:51,600 --> 00:19:53,310 DOM, aby uzyskać te informacje. 309 00:19:53,310 --> 00:19:56,250 Nie mam do powiedzenia document.getElementById. 310 00:19:56,250 --> 00:19:58,750 I nie trzeba używać jQueries jak dostęp DOM. 311 00:19:58,750 --> 00:20:03,280 Mogę skojarzyć go ze zmienną, a następnie przy zmianie zmienna 312 00:20:03,280 --> 00:20:07,400 poziomu JavaScriptu to zsynchronizowany z HTML, 313 00:20:07,400 --> 00:20:11,640 tak, że upraszcza proces konieczności tam iz powrotem między nimi. 314 00:20:11,640 --> 00:20:18,260 Czy to ma sens? 315 00:20:18,260 --> 00:20:22,060 >> I zauważyć, że nie ma HTML kod dostępu. 316 00:20:22,060 --> 00:20:27,760 Właśnie się HTML mocniejszy, 317 00:20:27,760 --> 00:20:32,070 i teraz, na przykład, można zrobić takie rzeczy, 318 00:20:32,070 --> 00:20:38,610 jak po kliknięciu na to, wywołać tę funkcję w zakresie todos.js, 319 00:20:38,610 --> 00:20:43,410 i możemy to zrobić wcześniej, ale są jeszcze inne rzeczy, jak ten ng-model, 320 00:20:43,410 --> 00:20:47,020 i zauważyć tego NG-repeat. 321 00:20:47,020 --> 00:20:51,520 Co sądzisz to robi? 322 00:20:51,520 --> 00:20:54,390 Oto nasza lista nieuporządkowana z przed. 323 00:20:54,390 --> 00:20:56,470 Mamy ul tagów 324 00:20:56,470 --> 00:21:03,710 ale ja nigdy nie czyni tej listy wewnątrz kodu JavaScript? 325 00:21:03,710 --> 00:21:09,280 Ja nie zawsze wyraźnie czyni tę listę. 326 00:21:09,280 --> 00:21:11,580 Jak to działa? 327 00:21:11,580 --> 00:21:16,410 Cóż, kanciasty sposób realizuje to nazywa repeater. 328 00:21:16,410 --> 00:21:22,760 Zasadniczo mówi, że chcę, aby wydrukować ten HTML 329 00:21:22,760 --> 00:21:26,240 dla każdego wnętrza todo mojej tablicy todos. 330 00:21:26,240 --> 00:21:31,850 Wewnątrz todos.jr istnieje tablica todos tutaj, 331 00:21:31,850 --> 00:21:37,910 i to powie kątowe przejść tej tablicy, a dla każdego elementu można zobaczyć 332 00:21:37,910 --> 00:21:41,390 Chcę drukować ten HTML. 333 00:21:41,390 --> 00:21:44,620 Jest to rodzaj niesamowite, bo po prostu może to zrobić 334 00:21:44,620 --> 00:21:47,760 bez pisania dla pętli, 335 00:21:47,760 --> 00:21:52,250 co do listy rzeczy do zrobienia, że ​​było tylko 30 linii kodu 336 00:21:52,250 --> 00:21:54,700 może nie być najbardziej korzystne rzeczą, 337 00:21:54,700 --> 00:22:01,240 ale jeśli masz duży projekt, to może się bardzo wygodne. 338 00:22:01,240 --> 00:22:06,100 >> Jest to jedno z rozwiązań tego problemu, co HTML silniejsze, 339 00:22:06,100 --> 00:22:10,820 i pozwala nam zachować JavaScript i HTML w synchronizacji. 340 00:22:10,820 --> 00:22:13,220 Możliwe są inne sposoby rozwiązania tego problemu, 341 00:22:13,220 --> 00:22:15,320 i nie każdy framework to robi. 342 00:22:15,320 --> 00:22:17,720 Nie każdy framework działa w tym kierunku. 343 00:22:17,720 --> 00:22:19,490 Niektóre ramy mają różne podejścia, 344 00:22:19,490 --> 00:22:23,310 i może się okazać, że lubisz kodowania w jednym ramach nad drugą. 345 00:22:23,310 --> 00:22:26,160 Spójrzmy na jeszcze jeden. 346 00:22:26,160 --> 00:22:30,060 Oto lista rzeczy do zrobienia kodowane w ramach nazwie Backbone. 347 00:22:30,060 --> 00:22:33,250 Mam zamiar przejść przez to szybko. 348 00:22:33,250 --> 00:22:38,300 Zacznę HTML zanim pójdziemy tam. 349 00:22:38,300 --> 00:22:40,290 Jedna sekunda. 350 00:22:40,290 --> 00:22:43,950 Począwszy HTML, jak można zauważyć, nasza HTML jest bardzo podobny 351 00:22:43,950 --> 00:22:50,000 do tego, co było wcześniej, więc nie za bardzo nowy na tym froncie. 352 00:22:50,000 --> 00:22:55,410 Ale nasz js jest trochę inny. 353 00:22:55,410 --> 00:23:00,360 Rodzaj trzon ma ten pomysł, czy opiera się na idei 354 00:23:00,360 --> 00:23:04,750 że wiele z tego, co robimy z, powiedzmy, nasze projekty JavaScript 355 00:23:04,750 --> 00:23:09,110 jest myśleć o modelach i zbiorów tych modeli. 356 00:23:09,110 --> 00:23:12,510 Może to być, na przykład, zdjęcie i kolekcje zdjęć, 357 00:23:12,510 --> 00:23:16,230 lub pomysł znajomego i zbiorów przyjaciół. 358 00:23:16,230 --> 00:23:20,700 I często, kiedy jesteśmy programowania aplikacji JavaScript 359 00:23:20,700 --> 00:23:25,340 będziemy sortować z reprezentowania pomysł o kolekcję przyjaciół 360 00:23:25,340 --> 00:23:29,500 jakoś w JavaScript i Backbone daje nam tę warstwę 361 00:23:29,500 --> 00:23:33,040 na górze tablic istniejących JavaScript i jego obiektów 362 00:23:33,040 --> 00:23:38,300 zrobić mocniejsze rzeczy, z tym łatwiej. 363 00:23:38,300 --> 00:23:41,870 >> Tutaj mam zdefiniowane do zrobienia modelu, 364 00:23:41,870 --> 00:23:44,630 i nie trzeba się zbytnio martwić o składni, 365 00:23:44,630 --> 00:23:48,730 nie zauważyć, że to, co jest jedną z właściwości tego? 366 00:23:48,730 --> 00:23:53,190 Ma pole domyślnej. 367 00:23:53,190 --> 00:23:56,640 Backbone pozwala mi określić już przy bat 368 00:23:56,640 --> 00:24:00,190 wszelkie nowe zadanie, które tworzę będzie miał te domyślne. 369 00:24:00,190 --> 00:24:04,100 Teraz można dostosować, ale jest w stanie określić wartości domyślne 370 00:24:04,100 --> 00:24:07,220 jest ładny, a to niby wygodne, ponieważ nie jest to coś, co jest jak 371 00:24:07,220 --> 00:24:10,430 nieodłączne w JavaScript, a teraz nie mam jawnie 372 00:24:10,430 --> 00:24:12,430 powiedzieć, że todos są niekompletne. 373 00:24:12,430 --> 00:24:19,190 Mogę powiedzieć, tuż nietoperza, że ​​todos będą oznaczone jako niepełne. 374 00:24:19,190 --> 00:24:21,300 Zawiadomienie to co to jest? 375 00:24:21,300 --> 00:24:25,520 Mam teraz lista rzeczy do zrobienia, i to jest kolekcja. 376 00:24:25,520 --> 00:24:30,960 Zawiadomienie w dziedzinie związanej z tym mówi modelu todo. 377 00:24:30,960 --> 00:24:33,390 To jest mój sposób mówienia szkieletowy 378 00:24:33,390 --> 00:24:37,350 Idę myśleć o kolekcji tych indywidualnych todos. 379 00:24:37,350 --> 00:24:42,140 Jest to w zasadzie konstrukcja model mojego programu. 380 00:24:42,140 --> 00:24:44,980 Tutaj mam ten pomysł zbierania, 381 00:24:44,980 --> 00:24:48,960 iw zasadzie elementy zawarte w tej kolekcji są wszystko będzie te todos, 382 00:24:48,960 --> 00:24:51,910 i to jest bardzo naturalne w tym sensie 383 00:24:51,910 --> 00:24:59,890 bo mam todos, a ja mam ich w kolekcji. 384 00:24:59,890 --> 00:25:02,940 >> Przyjrzyjmy się nieco więcej o tym. 385 00:25:02,940 --> 00:25:05,900 Oto widok Backbone. 386 00:25:05,900 --> 00:25:08,890 Inną rzeczą, która mówi, że Backbone 387 00:25:08,890 --> 00:25:14,660 Wiele modeli, które myślisz o lub nawet kolekcje 388 00:25:14,660 --> 00:25:19,150 zamiar trzeba mieć jakiś sposób był wyświetlany. 389 00:25:19,150 --> 00:25:21,900 Musimy spowodować, że lista rzeczy do zrobienia, 390 00:25:21,900 --> 00:25:25,460 i nie byłoby miło, gdybyśmy mogli zapewnić dla każdego modelu 391 00:25:25,460 --> 00:25:28,390 lub skojarzyć z każdego modelu tego widoku 392 00:25:28,390 --> 00:25:34,020 która pozwala nam chyba połączyć je razem? 393 00:25:34,020 --> 00:25:38,320 Podczas gdy przed musieliśmy użyć pętli for, które przepływają przez 394 00:25:38,320 --> 00:25:41,130 każdy todo na naszej liście, a następnie wydrukować go tutaj 395 00:25:41,130 --> 00:25:44,650 możemy w zasadzie połączyć go z tym modelem. 396 00:25:44,650 --> 00:25:47,550 To jest do zrobienia view. 397 00:25:47,550 --> 00:25:50,550 Jest to związane z tym, że liście zadań wykrycia wcześniej. 398 00:25:50,550 --> 00:25:54,940 Teraz każdy todo jest wyświetlanych lub renderowane 399 00:25:54,940 --> 00:25:56,960 przez to do zrobienia widok. 400 00:25:56,960 --> 00:25:59,440 Wskazówka niektórych pól. 401 00:25:59,440 --> 00:26:05,880 Co sądzisz tej zmiennej jest TagName: li? 402 00:26:05,880 --> 00:26:09,790 Zapamiętaj sprzed kiedy chcieliśmy się przedstawić todo 403 00:26:09,790 --> 00:26:16,700 musielibyśmy jednoznacznie powiązać nasze todos z tego znacznika li. 404 00:26:16,700 --> 00:26:21,080 Teraz mówimy, że jeżeli to todo będzie żył 405 00:26:21,080 --> 00:26:25,250 ma być wewnątrz znacznika li. 406 00:26:25,250 --> 00:26:31,440 A teraz mamy również powiązania zdarzeń z naszych todos. 407 00:26:31,440 --> 00:26:34,320 >> Każdy todo ma tego jednego zdarzenia. 408 00:26:34,320 --> 00:26:38,480 Jeśli klikniesz prawie przycisk przełączania, to, co mówię nie, 409 00:26:38,480 --> 00:26:43,080 to w zasadzie oznaczać todo jako przeciwieństwo tego, co było przed 410 00:26:43,080 --> 00:26:45,890 , a następnie ponownie na niestosowanie. 411 00:26:45,890 --> 00:26:47,810 Jest to rodzaj podobny do kodu przed. 412 00:26:47,810 --> 00:26:50,730 Pamiętaj, gdy oznaczone jako albo odwrotnie lub- 413 00:26:50,730 --> 00:26:52,410 a potem ponownie renderowane go. 414 00:26:52,410 --> 00:26:57,750 Zauważmy jednak, teraz to wydarzenie kiedyś coś, co było w kodzie HTML. 415 00:26:57,750 --> 00:26:59,640 To tam siedział. 416 00:26:59,640 --> 00:27:01,410 Button miał na kliknięcie. 417 00:27:01,410 --> 00:27:05,310 Po kliknięciu na przycisk, to niby ma do rzeczy 418 00:27:05,310 --> 00:27:07,210 założyć, że todo się niekompletne. 419 00:27:07,210 --> 00:27:11,180 Tutaj mamy wiąże to zdarzenie z kliknięciu tego przycisku przełączania 420 00:27:11,180 --> 00:27:15,830 i cofania czy to on lub off z tym poglądem. 421 00:27:15,830 --> 00:27:20,480 >> To jest dobry sposób tworzenia tego zdarzenia tak, że to jest bardzo mocno związany 422 00:27:20,480 --> 00:27:26,980 do tego celu, a więc zauważysz ten jeden więcej. 423 00:27:26,980 --> 00:27:31,050 Mam tej metody renderingu, a nie mamy przejść przez szczegóły. 424 00:27:31,050 --> 00:27:33,650 To trochę podobne do tego, co mieliśmy wcześniej, 425 00:27:33,650 --> 00:27:36,070 nie zauważyć, nie jestem przelotowego nic. 426 00:27:36,070 --> 00:27:40,700 Nie jestem wydrukowaniem ul znacznik, który jest jakby mówiąc mam zamiar wydrukować wszystkie elementy. 427 00:27:40,700 --> 00:27:46,610 Jestem zapewniając funkcjonalność czyni ten jeden punkt do zrobienia. 428 00:27:46,610 --> 00:27:49,400 To jest bardzo silny, bo w zasadzie koncepcja 429 00:27:49,400 --> 00:27:53,600 nasza lista rzeczy do zrobienia składa się z wszystkich tych todos, i czy możemy w zasadzie określić 430 00:27:53,600 --> 00:27:56,890 sposób, aby uczynić jedną z tych todos 431 00:27:56,890 --> 00:28:04,230 wtedy mamy potężny szkielet per se czynią wszystkie todos 432 00:28:04,230 --> 00:28:07,760 przez wywołanie metody render na poszczególnych todos. 433 00:28:07,760 --> 00:28:14,180 Jest to koncepcja, że ​​jest przydatny w tym zakresie. 434 00:28:14,180 --> 00:28:18,160 Teraz dobre pytanie brzmi jak to jest z wnioskiem złożyć? 435 00:28:18,160 --> 00:28:21,200 Ponieważ mamy możliwość wyświetlania jednego todo, 436 00:28:21,200 --> 00:28:23,860 ale jak mamy pomysł wielu todos? 437 00:28:23,860 --> 00:28:25,100 >> Rzućmy okiem na to. 438 00:28:25,100 --> 00:28:27,100 Jest to ostatnia część. 439 00:28:27,100 --> 00:28:29,740 Zauważ, że mamy do czynienia widok listy tutaj, 440 00:28:29,740 --> 00:28:34,440 i zauważyć, jest to również widok. 441 00:28:34,440 --> 00:28:36,970 I iść na kilka rzeczy, 442 00:28:36,970 --> 00:28:45,280 ta metoda initialize zostanie wywołana, gdy najpierw tworzymy tę listę rzeczy do zrobienia. 443 00:28:45,280 --> 00:28:52,630 Jak widać, to jak tworzenie listy rzeczy do zrobienia i skojarzenie go z tego widoku. 444 00:28:52,630 --> 00:28:57,860 A potem dodałem funkcje tu więc w zasadzie po dodaniu elementu- 445 00:28:57,860 --> 00:29:01,440 ta jest podobna do metody widzieliśmy addItem przed- 446 00:29:01,440 --> 00:29:07,430 Zamierzam utworzyć nowy obiekt todo, a zauważysz, jestem naprawdę nazywając 447 00:29:07,430 --> 00:29:13,080 Ta nowa metoda todo, więc jest to przewidziane przez kręgosłup, 448 00:29:13,080 --> 00:29:16,010 i mogę przekazać w moich nieruchomości tutaj. 449 00:29:16,010 --> 00:29:23,710 A teraz co todo że tworzę przy użyciu tego będzie, że funkcje, które widzieliśmy wcześniej. 450 00:29:23,710 --> 00:29:28,140 Wskazówka Jestem oczyszczaniu pole tekstowe przed-small mały szczegół- 451 00:29:28,140 --> 00:29:32,900 a następnie Dodaję tę kolekcję. 452 00:29:32,900 --> 00:29:37,630 >> To wydaje się dziwne, ponieważ niemal przed po prostu musieliśmy to zrobić todos.push, 453 00:29:37,630 --> 00:29:43,310 , a potem przeprowadzono, i może to wydawać się bardziej skomplikowane dla tego konkretnego projektu, 454 00:29:43,310 --> 00:29:46,980 i może się okazać, że Backbone lub nawet kątowe lub inne ramy 455 00:29:46,980 --> 00:29:50,790 nie własnych konkretnego projektu, ale myślę, że ważne jest, aby myśleć o 456 00:29:50,790 --> 00:29:54,100 co to znaczy na większą skalę dla większych projektów, 457 00:29:54,100 --> 00:29:56,610 bo gdybyśmy mieli większy projekt, w którym byliśmy, reprezentujący 458 00:29:56,610 --> 00:30:00,860 naprawdę złożony zbiór, coś głębszego niż tylko lista rzeczy do zrobienia, 459 00:30:00,860 --> 00:30:04,490 powiedzmy, listę znajomych, czy coś w tym stylu, to może się przydać 460 00:30:04,490 --> 00:30:09,620 bo mogliśmy zorganizować nasz kod w sposób bardzo wygodny, 461 00:30:09,620 --> 00:30:12,550 w taki sposób, by ułatwić dla kogoś innego 462 00:30:12,550 --> 00:30:16,820 , który chciał odebrać projekt budowy na. 463 00:30:16,820 --> 00:30:21,450 Widać, że ta zapewnia wiele konstrukcji. 464 00:30:21,450 --> 00:30:26,580 A potem dzwonię uczynić na tej addItem. 465 00:30:26,580 --> 00:30:31,050 Render, jak widać, i nie trzeba, aby zrozumieć tę pełną składnię, 466 00:30:31,050 --> 00:30:37,790 ale w zasadzie dla każdego modelu to się nazywają poszczególne metody render. 467 00:30:37,790 --> 00:30:41,500 To jest rodzaj, gdzie to pochodzi. 468 00:30:41,500 --> 00:30:44,140 Miejmy tylko określić sposób renderowania poszczególnych todos, 469 00:30:44,140 --> 00:30:47,310 i pozwól klej do mocowania ich ze sobą w całość. 470 00:30:47,310 --> 00:30:49,810 Ale ten to sposób abstrakcji, 471 00:30:49,810 --> 00:30:55,470 bo mogę zmienić sposób zadecydować o poszczególnych todos, 472 00:30:55,470 --> 00:30:57,940 i nie będę musiała zmieniać żadnych tego kodu. 473 00:30:57,940 --> 00:31:00,700 To niby chłodny. 474 00:31:00,700 --> 00:31:08,540 >> Czy ktoś ma jakieś pytania dotyczące ram JavaScript? 475 00:31:08,540 --> 00:31:14,310 [Student niesłyszalne pytanie] 476 00:31:14,310 --> 00:31:16,050 Jasne, że to wielkie pytanie. 477 00:31:16,050 --> 00:31:19,080 Pytanie było jak ja to te strategie? 478 00:31:19,080 --> 00:31:22,970 Większość ram JavaScript są w zasadzie tylko js 479 00:31:22,970 --> 00:31:25,740 że można to na górze kodu. 480 00:31:25,740 --> 00:31:29,830 Zawiadomienie w głowicy mojego HTML I te wszystkie znaczniki SCRIPT, 481 00:31:29,830 --> 00:31:34,250 i końcowy tag script jest kod, który napisaliśmy. 482 00:31:34,250 --> 00:31:38,820 A potem 3 kody ramowe są po prostu także znaczniki skryptów. 483 00:31:38,820 --> 00:31:42,110 Jestem w tym ich od tego, co się nazywa CDN, 484 00:31:42,110 --> 00:31:46,200 która pozwala mi dostać od kogoś innego w tym momencie 485 00:31:46,200 --> 00:31:57,930 ale każdy framework ma to-można bardzo dużo znaleźć treści 486 00:31:57,930 --> 00:32:03,540 dla konkretnej biblioteki JavaScript dostępnych na niektórych CDN czy coś takiego, 487 00:32:03,540 --> 00:32:05,570 a następnie można włączyć te znaczniki SCRIPT. 488 00:32:05,570 --> 00:32:07,600 Czy to ma sens? 489 00:32:07,600 --> 00:32:09,500 Spoko. 490 00:32:09,500 --> 00:32:11,730 >> To są 2 różne podejścia. 491 00:32:11,730 --> 00:32:14,640 To nie są tylko podejścia do rozwiązania tego problemu. 492 00:32:14,640 --> 00:32:17,080 Istnieje wiele różnych rzeczy, które 493 00:32:17,080 --> 00:32:19,490 ktoś może zrobić, i istnieje wiele ram tam. 494 00:32:19,490 --> 00:32:23,300 Kanciaste i Backbone nie mówią całej prawdy. 495 00:32:23,300 --> 00:32:26,370 Powodzenia ostatecznych projektów i bardzo dziękuję. 496 00:32:31,960 --> 00:32:35,000 [CS50.TV]