[Powered by Google Translate] [Seminarium] [Konstrukcje JavaScript: dlaczego i jak?] [Kevin Schmid] [Harvard University] [To jest CS50.] [CS50.TV] 

Cześć wszystkim. Zapraszamy na seminarium środowisk JavaScript. Nazywam się Kevin, a dziś mam zamiar mówić o ram JavaScript, i celem tego seminarium nie jest Ci do, powiedzmy, opanowania konkretnej ramy per se ale daje szerokie wprowadzenie do kilku ram i pokazać, dlaczego my zawsze chcemy korzystać z ramy. 

Zanim zrobisz, będę zapewnić trochę tła w JavaScript, i wtedy go stamtąd. Zamierzamy rozpocząć od wdrożenia listy rzeczy do zrobienia. Oto nasza lista zadań na dziś. To trochę śmieszne. Musimy wdrożyć lista rzeczy do zrobienia w JavaScript. To jest to, co to będzie wyglądać tak, że nasz pierwszy cel. Nie będziemy używać ramy to zrobić. Jedziemy do kodu JavaScript i dostać listy zadań do pracy. Następnie jedziemy do poprawy konstrukcji bez użycia ramy. Będziemy dyskutować na różne rzeczy możemy zrobić tylko z samym JavaScript , aby nasza lista rzeczy do zrobienia trochę więcej dobrze zaprojektowane. Wtedy będziemy rzucać w niektórych jQuery, i wtedy będziemy patrzeć na same listy rzeczy do zrobienia, właśnie wdrażane w różnych ramach, i omówimy  plusy i minusy po drodze. 

Zacznijmy wdrażaniu że lista rzeczy do zrobienia. Powiedzmy, że dostaniesz ten HTML. Mam zamiar zrobić to nieco mniejsze. Jak widać, mam mały nagłówek, który mówi Todo i małe pole, gdzie można wpisać opis todo a następnie przycisk Nowy element, więc spróbujmy wprowadzić nową todo do tej listy. Daj seminarium JavaScript ram, i jestem trafić nowy przedmiot. Mam ten alert JavaScript, który mówi wdrożyć mnie. Musimy wdrożyć. Sprawdźmy kod do tego, jak HTML i JavaScript. Oto nasz HTML. Jak widać tutaj, tu jest nasza mała header Todos. To było odważne rzeczy na górze, i wtedy mamy pole wprowadzania z zastępczego, i potem jest pewna cecha tego przycisku, który wywołuje tę addTodo funkcji. Czy ktoś chce się odgadnąć, co to na kliknięcie jest wyzwoleniem? [Student niesłyszalny odpowiedź] Dobra, na kliknięcie jest coś w rodzaju zdarzenia, jak kliknięcie myszką jest tylko impreza, i to, co robimy jest my wiążąc wydarzenie kliknięciu tego przycisku, aby wykonać tę funkcję. AddTodo to jest obsługi zdarzeń na naciśnięcie przycisku. 

Jak widać, po kliknięciu na przycisk Nowy element na zdarzenia click zostanie zwolniony, a ta funkcja jest wywoływana. Przyjrzyjmy się funkcji. Jak widać, tutaj jest mój kod JavaScript do tej pory. Co mam na górze jest globalną strukturę danych dla mojej liście rzeczy do zrobienia. To wygląda jak tablica. To jest po prostu pusta tablica. A potem mam addTodo funkcji, które widzieliśmy wcześniej, i tylko linii kodu tam jest ten alert. Ostrzega wdrożyć mnie, a potem mam 2 zadania pod ręką. Muszę dodać todo do tej globalnej struktury danych, i chcę zwrócić uwagę na liście rzeczy do zrobienia. Nic nadzwyczajnego jeszcze, ale JavaScript może być zaznajomiony z, więc zamierzam iść powoli i przeglądu podstaw JavaScript w ten sposób. 

Dajmy ten strzał. Załóżmy, że użytkownik wpisze coś w tym polu. I po prostu wpisane coś tutaj, tekstu. Jak sortować dostępu tego tekstu poprzez JavaScript? Pamiętaj, że JavaScript, jednym z jej podstawowych cech jest to, że daje nam to programowy dostęp do DOM. To pozwala nam na dostęp do elementów i ich właściwości tej rzeczywistej HTML. Sposób robimy z Bare Bones JavaScript jest rzeczywiście możemy użyć funkcji w JavaScript o nazwie getElementById. Chcę, aby przechowywać tekst, który jest wpisany w jakiś tam zmiennej, tak, mam zamiar powiedzieć, nową zmienną o nazwie new_todo, i mam zamiar się tego elementu. Jest to funkcja,. GetElementById. A teraz jestem coraz elementu przez ID, więc muszę identyfikator tego pola tekstowego, więc dałem mu new_todo_description ID. To jak mam zamiar uzyskać element. To jest mój argument tej funkcji, aby określić, które ID dostać. I tak to jest elementem HTML, i ma właściwości. Widziałeś tych. Oni są atrybuty. Atrybut elementu tekstowego, który przechowuje wejście użytkownika jest nazywany wartością. I zapisać wartość tego pola tekstowego, teraz w tej zmiennej o nazwie new_todo. Teraz mam programowy dostęp do tej zmiennej, która jest całkiem ciekawie bo teraz, co mogę zrobić, to mogę dodać go do mojej listy rzeczy do zrobienia. 

Sposób chcemy to zrobić w JavaScript i nie martw się, jeśli jesteś zaznajomiony z tym, ale po prostu się przez nią jest todos.push bo to jest nazwa mojej globalnej struktury danych tutaj, i zamierzam pchnąć new_todo. To jest dobre, bo teraz dodałem go do mojego JavaScript reprezentacja, że ​​lista rzeczy do zrobienia. Ale teraz, jak mogę dostać go z powrotem do HTML? Muszę znaleźć sposób, aby rodzaj przesunąć go z powrotem. Innymi słowy, I niby trzeba zwrócić na to. Co zamierzamy zrobić, to mamy zamiar zwrócić lista rzeczy do zrobienia. Muszę zaktualizować inne HTML na tej stronie, i jak widać, już opuścił ten mały pojemnik tutaj, ten dzielnik strony, której ID jest todos, i mam zamiar umieścić lista rzeczy do zrobienia tam. Po pierwsze mam zamiar go usunąć, bo, powiedzmy, był stary lista rzeczy do zrobienia tam. Dostaję tego elementu przez ID znowu i mam dostępu do wewnętrznej HTML tego elementu, i mam zamiar wyjaśnić, że. Jeśli zostawiliśmy ten kod jak jest, to widzimy puste nic nie ma, i teraz chcę rozpocząć świadczenie moją nową lista rzeczy do zrobienia. Jestem w zasadzie zamiar wymazać moje lista rzeczy do zrobienia. 

Teraz wewnętrzna HTML wewnątrz tego div Todos jest całkowicie jasne, i teraz muszę zacząć dodawać moją listę. Pierwszą rzeczą, którą chcesz dodać z powrotem jest nieuporządkowane tag list, która w zasadzie oznacza, że ​​jest to początek listę nieuporządkowaną. Teraz dla każdego elementu w mojej tablicy Todos Chcę wydrukować wewnątrz tego HTML. Chcę, aby dołączyć go do dołu tej listy. Podobnie jak w C, można używać pętli for, i mam zamiar rozpocząć na początku mojej liście w elemencie 0 i mam zamiar przejść całą drogę do długości listy. Możemy rzeczywiście się długość tablicy w JavaScript za pomocą właściwości length. Zasadniczo mam zamiar zrobić coś bardzo podobnego wewnątrz tutaj wydrukować ten element. Można ponownie uzyskać dostęp do div todos, wewnętrzna HTML własnością tego, i mam zamiar dodać do tego nowego elementu listy, i że będzie otoczony ten tag li, i mam zamiar łączyć z operatorem +, i to jest i-ty element mojej tablicy todos, i mam zamiar zamknąć ten znacznik. Teraz dla każdego elementu dodamy nową pozycję listy. I wtedy wszystko, co naprawdę trzeba zrobić, to zamknąć ten znacznik. I po prostu trzeba zamknąć, że nieuporządkowane tag liście. 

Lubisz poczuć jak to działa? To otwiera całą listę. To dodaje poszczególne elementy z listy todos do listy, , a następnie, że zamknięcie całej listy, a to jest mój addTodo funkcji. I w zasadzie zacząć od uzyskania todo z pola tekstowego. I dodać, że do tablicy todos, a potem ponownie renderować lista rzeczy do zrobienia. Teraz mogę dodać pozycje do listy. To jest rodzaj ekscytujące, ponieważ w ciągu zaledwie kilku linii kodu my w zasadzie dokonał lista rzeczy do zrobienia, gdzie możemy dodać elementy. Świetnie. To rodzaj podstawowego Wprowadzenie do JavaScript. Nie martw się zbytnio o składni teraz, ale o tym myśleć koncepcyjnie. Mieliśmy trochę HTML. Mieliśmy pole tekstowe na stronie, która w zasadzie pozwala użytkownikom na wejście do zrobienia element do dodania. A potem użyliśmy JavaScript, aby pobrać ten todo z tego pola tekstowego. Mamy zapisane, że wewnątrz tablicy JavaScript, która jest w zasadzie jak nasza reprezentacja, która programowo do listy zadań, a potem wydrukować go. To todos.js. 

To jest całkiem fajne, ale jak możemy to dalej? Cóż, jak widać, to nie jest jak pełna lista rzeczy do zrobienia. Na przykład, nie mogę zaznaczyć żadnej z tych pozycji, jak niekompletne, jak gdybym chciał reprioritize elementy lub usunąć elementy. To jest w porządku, ale możemy to dalej. Nie zamierzam mówić zbyt wiele o dodanie dodatkowych funkcji, ale możemy wziąć to dalej. Porozmawiajmy o dodanie jeszcze jednej funkcji, aby ta lista rzeczy do zrobienia, które ma być możliwość sprawdzenia osoby do zrobienia artykuł i go skreślić, więc w zasadzie mówiąc robiłem to. Spójrzmy na niektóre kodu, który może tego dokonać. Zauważ, co zrobiłem na górze jest Dodałem Nowa globalna tablica nazywa kompletny. Jestem w zasadzie przy tym do przechowywania, czy elementy na liście do zrobienia są kompletne, czy nie. To jeden ze sposobów, aby to zrobić. Jeśli patrzę na realizację tego, wyświetlania, w zasadzie, jeśli wprowadzić todo i nacisnąć ten przycisk przełącznika przecina się, więc każda pozycja na tej liście ma albo kompletne lub niekompletne państwo, i używam kolejną tablicę do reprezentowania tego. 

W zasadzie dla każdego todo w tej tablicy Todos jest pozycja w kompletnej tablicy wskazuje, że w zasadzie czy jest kompletny, czy nie. Miałem zrobić dość minimalne zmiany do tego kodu, tak oto nasz addTodo funkcji. Zauważ, że tutaj jestem popychając go na tablicy, i wtedy ja pcha 0 do tego kompletną tablicę, w zasadzie równolegle z tym nowym naciśnięciem todo do powiedzenia Dodaję ten przedmiot, a to w połączeniu z tej wartości, co oznacza, że ​​jest niepełne. I wtedy jestem odświeżanie listy rzeczy do zrobienia. Teraz zauważył Dodałem ten drawTodoList funkcji. To zajmuje dużo kodu mieliśmy wcześniej, zasadzie czyści pole, a następnie zwraca nowy lista rzeczy do zrobienia. Zauważmy jednak, że w środku tego dla pętli robimy trochę więcej teraz. Jesteśmy w zasadzie sprawdzania, czy pozycja odpowiadająca i-tego todo tutaj jest zakończona, a my zachowywać się inaczej w tych 2 przypadkach. Jeśli jest pełna, dodajemy ten tag del, która jest w zasadzie sposób można uzyskać efekt uderzenia przez wykreślenie lista rzeczy do zrobienia, jeśli jest pełna, a jeśli nie jest to, że nie jesteśmy w tym go. I tak, że niby dba o to, 

i to jest jeden sposób, aby to osiągnąć. I wtedy zauważył, kiedy użytkownik kliknie jeden z nich możemy zmienić status zakończenia go. Gdy użytkownik kliknie, to odwrócić, czy to zostało zakończone, czy też nie, i wtedy przerysować go. Ten rodzaj prac. Mamy te funkcje, które wykonują swoje zadania, i to jest w porządku. Czy jest coś nie mogliśmy zrobić lepiej o tym, chociaż? Zauważ, mamy te 2 globalnych tablic. Jeśli to był C, i mieliśmy 2 tablice, że rodzaj reprezentowanych dane, które były jakby w jakiś sposób związane z co będziemy używać w C połączyć te 2 pola w coś, co obejmuje zarówno fragmenty informacji? Czy ktoś chce coś zasugerować? [Student niesłyszalny odpowiedź] 

Dokładnie, więc możemy użyć jakiejś struktury, i jeśli uważasz, że powrót do, powiedzmy, Pset 3, pamiętam mieliśmy słownika, a następnie mieliśmy, czy słowo było w słowniku, a wszystko to razem wzięte informacje wewnątrz jakiejś struktury danych. Jedno, co mogę zrobić z tym kodem, aby uniknąć tych 2 różne tablice podobnych elementów informacji to można połączyć je w obiekt JavaScript. Rzućmy okiem na to. Zauważ, mam tylko jeden układ na górze teraz i to, co zrobiłem to i to jest po prostu JavaScript składnia rodzaju tworząc dosłowną wersję obiektu, i zawiadomienia są 2 właściwości, więc mamy todo, i to trzymane razem z tym, czy jest to kompletny lub niekompletny. To jest bardzo podobny kod. Używamy obiektów JavaScript. Ten rodzaj poprawia rzeczy. Podobnie jak teraz, wszystkie te obszary powiązane informacje są przechowywane razem. Kiedy idziemy do wydrukować, możemy uzyskać dostęp do pól. 

Zauważ, jak robimy todos [i]. Kompletne zamiast sprawdzania kompletny wachlarz oddzielnie, i zauważyć, gdy chcemy uzyskać ciąg do zrobienia mamy uzyskiwanie własności do zrobienia tego todo, więc tego rodzaju ma sens, ponieważ każdy element ma te swoiste właściwości temat. Ma todo, i ma, czy jest to pełna lub nie. Nie za wiele zmian nie funkcjonalnie, po prostu dodaje kilka do kodu. To jest poprawa na niektórych frontach, prawda? To znaczy, że zbitek projektowania trochę. Teraz mamy obiekty na zasadzie enkapsulacji danych. Czy jest coś więcej możemy zrobić, od tego w kategoriach JavaScript? Podobnie jak zawiadomienie, że ten kod tutaj na uzyskanie wewnętrznego kodu HTML div jest niewiele, myślę, długo. Jest document.getElementById ("todos"). InnerHTML. Jedną rzeczą, jaką możemy zrobić, aby kod ten wygląda trochę bardziej przyjazny więc nie zachować przewijanie w lewo i prawo, w przód iw tył, to może używać bibliotek takich jak jQuery. 

Sprawdźmy Seminarium 2, i jest to ten sam kod, ale to się robi z jQuery. Możesz nie być zbyt dobrze z jQuery, ale po prostu wiem, że jQuery jest rodzajem biblioteki JavaScriptu sprawia, że ​​łatwiej zrobić takie rzeczy jak dostęp do poszczególnych elementów w DOM. Tutaj zamiast mówić document.getElementById ("todos"). InnerHTML Można używać wiele sposób czystsze w jQuery, który jest po prostu używać selektorów. Jak widać, ten kod dostał trochę czystsze, bardzo podobne funkcjonalnie, ale to jest pomysł. Widzieliśmy kilka rzeczy do tej pory, więc zaczęliśmy się tylko surowego realizacji JavaScript. Dodaliśmy nowe funkcje i pokazał, jak możemy poprawić go tylko to, co mamy w JavaScript. 

Czy ktoś widzi trudności z tym wzorem? Mianowicie, myślę, czy nie koniecznie trudności, ale powiedzmy my nie robi projekt do zrobienia listy, a jutro zdecydowaliśmy chcieliśmy stworzyć listę zakupów lub projekt listy zakupów. Wiele z tych funkcji są bardzo podobne. Wiele rzeczy, które chcemy, aby wydostać się z JavaScriptu są bardzo powszechne, i to podkreśla potrzebę jakiejś drodze co to łatwiej zrobić. Musiałem zbudować cały ten HTML dostępu, cały ten dostęp DOM, jak idę do reprezentowania listy rzeczy do zrobienia z tym modelem. I zauważył, że jestem odpowiedzialny za autora JavaScript za prowadzenie HTML i JavaScript, które mam w synchronizacji. Nic automatycznie się, że reprezentacja JavaScript lub lista rzeczy do zrobienia się wypchnięty do HTML. Nic nie egzekwowane, że z wyjątkiem mnie. Miałem napisać remisu funkcji do zrobienia listy. A to nie może być, to znaczy, że to rozsądne, aby to zrobić, ale może to być uciążliwe czasem. Jeśli masz większy projekt, który może być trudne. 

Konstrukcje, jeden z celów ram jest uproszczenie tego procesu i rodzaju czynnika out Te wspólne-Chyba można powiedzieć-design patterns że ludzie na ogół mają jakiś sposób przedstawiania danych, czy to jest lista przyjaciół, czy to informacje map lub coś lub listy zadań. Niektórzy ludzie mają na ogół sposób przedstawiania informacji, i generalnie trzeba trzymać tego rodzaju informacje z zsynchronizowane pomiędzy tym, co użytkownik widzi w jakimś związku, Mówiąc w kategoriach takich jak kontroler widoku modelu, który widział w wykładzie a następnie model, który w tym przypadku jest to tablica JavaScript. Ramy daje nam sposób na rozwiązanie tego problemu. Teraz rzućmy okiem na realizację to lista rzeczy do zrobienia w ramach nazwie angularjs. To jest to. Zauważ, że pasuje na szkiełku. I nie trzeba przewijać w lewo i prawo. To prawdopodobnie nie jest to wielki powód do zalecamy używanie ramy jest ale zauważ, ja kiedykolwiek dostęp do poszczególnych elementów HTML tutaj? Czy ja kiedykolwiek do DOM? Czy widzisz document.getElementById czy coś takiego? Nie, nie ma. 

Kanciasty pomaga nam utrzymać DOM i naszą reprezentację JavaScript czegoś rodzaj zsynchronizowane, więc jeśli nie jest w pliku js, jeśli nie ma sposobu programowo się do całej tej treści HTML z JavaScriptu, jak my utrzymując to w synchronizacji? Jeśli nie jest w pliku. Js, to musi być w formacie HTML, prawda? To jest nowa wersja pliku HTML, i zauważyć dodaliśmy wiele tutaj. Zauważysz te nowe cechy, które mówią, ng-click i ng-repeat. Podejście do kątowa rozwiązać ten problem trudności w projektowaniu jest w zasadzie zrobić HTML znacznie bardziej wydajne. Angular to sposób pozwalający na dokonanie HTML nieco bardziej wyraziste. Na przykład, mogę powiedzieć, że mam zamiar związać lub powiązać to pole tekstowe do zmiennej w moim Kątowych kodu JavaScript. Ten ng model właśnie to robi. To w zasadzie mówi, że element w środku tego pola tekstowego, tylko kojarzy, że ze zmienną new_todo_description w kodzie JavaScript. To jest bardzo silny, bo nie mam jawnie przejść do DOM, aby uzyskać te informacje. Nie mam do powiedzenia document.getElementById. I nie trzeba używać jQueries jak dostęp DOM. Mogę skojarzyć go ze zmienną, a następnie przy zmianie zmienna poziomu JavaScriptu to zsynchronizowany z HTML, tak, że upraszcza proces konieczności tam iz powrotem między nimi. Czy to ma sens? 

I zauważyć, że nie ma HTML kod dostępu. Właśnie się HTML mocniejszy, i teraz, na przykład, można zrobić takie rzeczy, jak po kliknięciu na to, wywołać tę funkcję w zakresie todos.js, i możemy to zrobić wcześniej, ale są jeszcze inne rzeczy, jak ten ng-model, i zauważyć tego NG-repeat. Co sądzisz to robi? Oto nasza lista nieuporządkowana z przed. Mamy ul tagów ale ja nigdy nie czyni tej listy wewnątrz kodu JavaScript? Ja nie zawsze wyraźnie czyni tę listę. Jak to działa? Cóż, kanciasty sposób realizuje to nazywa repeater. Zasadniczo mówi, że chcę, aby wydrukować ten HTML dla każdego wnętrza todo mojej tablicy todos. Wewnątrz todos.jr istnieje tablica todos tutaj, i to powie kątowe przejść tej tablicy, a dla każdego elementu można zobaczyć Chcę drukować ten HTML. Jest to rodzaj niesamowite, bo po prostu może to zrobić bez pisania dla pętli, co do listy rzeczy do zrobienia, że ​​było tylko 30 linii kodu może nie być najbardziej korzystne rzeczą, ale jeśli masz duży projekt, to może się bardzo wygodne. 

Jest to jedno z rozwiązań tego problemu, co HTML silniejsze, i pozwala nam zachować JavaScript i HTML w synchronizacji. Możliwe są inne sposoby rozwiązania tego problemu, i nie każdy framework to robi. Nie każdy framework działa w tym kierunku. Niektóre ramy mają różne podejścia, i może się okazać, że lubisz kodowania w jednym ramach nad drugą. Spójrzmy na jeszcze jeden. Oto lista rzeczy do zrobienia kodowane w ramach nazwie Backbone. Mam zamiar przejść przez to szybko. Zacznę HTML zanim pójdziemy tam. Jedna sekunda. Począwszy HTML, jak można zauważyć, nasza HTML jest bardzo podobny do tego, co było wcześniej, więc nie za bardzo nowy na tym froncie. Ale nasz js jest trochę inny. Rodzaj trzon ma ten pomysł, czy opiera się na idei że wiele z tego, co robimy z, powiedzmy, nasze projekty JavaScript jest myśleć o modelach i zbiorów tych modeli. Może to być, na przykład, zdjęcie i kolekcje zdjęć, lub pomysł znajomego i zbiorów przyjaciół. I często, kiedy jesteśmy programowania aplikacji JavaScript będziemy sortować z reprezentowania pomysł o kolekcję przyjaciół jakoś w JavaScript i Backbone daje nam tę warstwę na górze tablic istniejących JavaScript i jego obiektów zrobić mocniejsze rzeczy, z tym łatwiej. 

Tutaj mam zdefiniowane do zrobienia modelu, i nie trzeba się zbytnio martwić o składni, nie zauważyć, że to, co jest jedną z właściwości tego? Ma pole domyślnej. Backbone pozwala mi określić już przy bat wszelkie nowe zadanie, które tworzę będzie miał te domyślne. Teraz można dostosować, ale jest w stanie określić wartości domyślne jest ładny, a to niby wygodne, ponieważ nie jest to coś, co jest jak nieodłączne w JavaScript, a teraz nie mam jawnie powiedzieć, że todos są niekompletne. Mogę powiedzieć, tuż nietoperza, że ​​todos będą oznaczone jako niepełne. Zawiadomienie to co to jest? Mam teraz lista rzeczy do zrobienia, i to jest kolekcja. Zawiadomienie w dziedzinie związanej z tym mówi modelu todo. To jest mój sposób mówienia szkieletowy Idę myśleć o kolekcji tych indywidualnych todos. Jest to w zasadzie konstrukcja model mojego programu. Tutaj mam ten pomysł zbierania, iw zasadzie elementy zawarte w tej kolekcji są wszystko będzie te todos, i to jest bardzo naturalne w tym sensie bo mam todos, a ja mam ich w kolekcji. 

Przyjrzyjmy się nieco więcej o tym. Oto widok Backbone. Inną rzeczą, która mówi, że Backbone Wiele modeli, które myślisz o lub nawet kolekcje zamiar trzeba mieć jakiś sposób był wyświetlany. Musimy spowodować, że lista rzeczy do zrobienia, i nie byłoby miło, gdybyśmy mogli zapewnić dla każdego modelu lub skojarzyć z każdego modelu tego widoku która pozwala nam chyba połączyć je razem? Podczas gdy przed musieliśmy użyć pętli for, które przepływają przez każdy todo na naszej liście, a następnie wydrukować go tutaj możemy w zasadzie połączyć go z tym modelem. To jest do zrobienia view. Jest to związane z tym, że liście zadań wykrycia wcześniej. Teraz każdy todo jest wyświetlanych lub renderowane przez to do zrobienia widok. Wskazówka niektórych pól. Co sądzisz tej zmiennej jest TagName: li? Zapamiętaj sprzed kiedy chcieliśmy się przedstawić todo musielibyśmy jednoznacznie powiązać nasze todos z tego znacznika li. Teraz mówimy, że jeżeli to todo będzie żył ma być wewnątrz znacznika li. A teraz mamy również powiązania zdarzeń z naszych todos. 

Każdy todo ma tego jednego zdarzenia. Jeśli klikniesz prawie przycisk przełączania, to, co mówię nie, to w zasadzie oznaczać todo jako przeciwieństwo tego, co było przed , a następnie ponownie na niestosowanie. Jest to rodzaj podobny do kodu przed. Pamiętaj, gdy oznaczone jako albo odwrotnie lub- a potem ponownie renderowane go. Zauważmy jednak, teraz to wydarzenie kiedyś coś, co było w kodzie HTML. To tam siedział. Button miał na kliknięcie. Po kliknięciu na przycisk, to niby ma do rzeczy założyć, że todo się niekompletne. Tutaj mamy wiąże to zdarzenie z kliknięciu tego przycisku przełączania i cofania czy to on lub off z tym poglądem. 

To jest dobry sposób tworzenia tego zdarzenia tak, że to jest bardzo mocno związany do tego celu, a więc zauważysz ten jeden więcej. Mam tej metody renderingu, a nie mamy przejść przez szczegóły. To trochę podobne do tego, co mieliśmy wcześniej, nie zauważyć, nie jestem przelotowego nic. Nie jestem wydrukowaniem ul znacznik, który jest jakby mówiąc mam zamiar wydrukować wszystkie elementy. Jestem zapewniając funkcjonalność czyni ten jeden punkt do zrobienia. To jest bardzo silny, bo w zasadzie koncepcja nasza lista rzeczy do zrobienia składa się z wszystkich tych todos, i czy możemy w zasadzie określić sposób, aby uczynić jedną z tych todos wtedy mamy potężny szkielet per se czynią wszystkie todos przez wywołanie metody render na poszczególnych todos. Jest to koncepcja, że ​​jest przydatny w tym zakresie. Teraz dobre pytanie brzmi jak to jest z wnioskiem złożyć? Ponieważ mamy możliwość wyświetlania jednego todo, ale jak mamy pomysł wielu todos? 

Rzućmy okiem na to. Jest to ostatnia część. Zauważ, że mamy do czynienia widok listy tutaj, i zauważyć, jest to również widok. I iść na kilka rzeczy, ta metoda initialize zostanie wywołana, gdy najpierw tworzymy tę listę rzeczy do zrobienia. Jak widać, to jak tworzenie listy rzeczy do zrobienia i skojarzenie go z tego widoku. A potem dodałem funkcje tu więc w zasadzie po dodaniu elementu- ta jest podobna do metody widzieliśmy addItem przed- Zamierzam utworzyć nowy obiekt todo, a zauważysz, jestem naprawdę nazywając Ta nowa metoda todo, więc jest to przewidziane przez kręgosłup, i mogę przekazać w moich nieruchomości tutaj. A teraz co todo że tworzę przy użyciu tego będzie, że funkcje, które widzieliśmy wcześniej. Wskazówka Jestem oczyszczaniu pole tekstowe przed-small mały szczegół- a następnie Dodaję tę kolekcję. 

To wydaje się dziwne, ponieważ niemal przed po prostu musieliśmy to zrobić todos.push, , a potem przeprowadzono, i może to wydawać się bardziej skomplikowane dla tego konkretnego projektu, i może się okazać, że Backbone lub nawet kątowe lub inne ramy nie własnych konkretnego projektu, ale myślę, że ważne jest, aby myśleć o co to znaczy na większą skalę dla większych projektów, bo gdybyśmy mieli większy projekt, w którym byliśmy, reprezentujący naprawdę złożony zbiór, coś głębszego niż tylko lista rzeczy do zrobienia, powiedzmy, listę znajomych, czy coś w tym stylu, to może się przydać bo mogliśmy zorganizować nasz kod w sposób bardzo wygodny, w taki sposób, by ułatwić dla kogoś innego , który chciał odebrać projekt budowy na. Widać, że ta zapewnia wiele konstrukcji. A potem dzwonię uczynić na tej addItem. Render, jak widać, i nie trzeba, aby zrozumieć tę pełną składnię, ale w zasadzie dla każdego modelu to się nazywają poszczególne metody render. To jest rodzaj, gdzie to pochodzi. Miejmy tylko określić sposób renderowania poszczególnych todos, i pozwól klej do mocowania ich ze sobą w całość. Ale ten to sposób abstrakcji, bo mogę zmienić sposób zadecydować o poszczególnych todos, i nie będę musiała zmieniać żadnych tego kodu. To niby chłodny. 

Czy ktoś ma jakieś pytania dotyczące ram JavaScript? [Student niesłyszalne pytanie] Jasne, że to wielkie pytanie. Pytanie było jak ja to te strategie? Większość ram JavaScript są w zasadzie tylko js że można to na górze kodu. Zawiadomienie w głowicy mojego HTML I te wszystkie znaczniki SCRIPT, i końcowy tag script jest kod, który napisaliśmy. A potem 3 kody ramowe są po prostu także znaczniki skryptów. Jestem w tym ich od tego, co się nazywa CDN, która pozwala mi dostać od kogoś innego w tym momencie ale każdy framework ma to-można bardzo dużo znaleźć treści dla konkretnej biblioteki JavaScript dostępnych na niektórych CDN czy coś takiego, a następnie można włączyć te znaczniki SCRIPT. Czy to ma sens? Spoko. 

To są 2 różne podejścia. To nie są tylko podejścia do rozwiązania tego problemu. Istnieje wiele różnych rzeczy, które ktoś może zrobić, i istnieje wiele ram tam. Kanciaste i Backbone nie mówią całej prawdy. Powodzenia ostatecznych projektów i bardzo dziękuję. [CS50.TV]