[Powered by Google Translate] [Seminar] [JavaScript Altyapıları: niyə və necə] [Kevin Schmid] [Harvard Universiteti] [Bu CS50 edir.] [CS50.TV] 

Hi, everybody. JavaScript Altyapıları seminar xoş gəlmisiniz. , My name Kevin və mən bu gün JavaScript çərçivəsində söhbət arkasýndayým və bu seminarın məqsədi, siz almaq demək, özlüyündə müəyyən bir çərçivə master deyil lakin çərçivəsində bir neçə üçün bir geniş tətbiqi vermək və biz heç bir çərçivə istifadə etmək istəyirəm ki, niyə göstərir. 

Bunu əvvəl, mən JavaScript bir az fon təmin edəcəyik , sonra oradan almaq lazımdır. Biz siyahısı həyata başlamaq olacaq. Burada bu gün bizim vəzifəmiz siyahısı var. Bu funny növü var. Biz JavaScript bir siyahısı həyata lazımdır. Bu ki, bizim ilk qolu, bu kimi baxmaq nə edir. Bunu etmək üçün bir çərçivə istifadə etmək niyyətində deyilik. Biz kodu JavaScript gedən və Ediləcək işlər siyahısına çalışması üçün edirik. Sonra bir çərçivə istifadə etmədən dizayn yaxşılaşdırılması olacaq. Biz yalnız JavaScript tək nə edə bilər müxtəlif şeyi müzakirə olacaq bizim etmək üçün işlər bir az daha yaxşı dizayn siyahısı. Sonra, bəzi jQuery atmaq olacaq və sonra biz siyahısı eyni baxmaq olacaq yalnız müxtəlif çərçivəsində həyata keçirilən və biz müzakirə edəcəyik  yol boyunca lehte ve eksiklikleri. 

Nin siyahısı ki, həyata başlamaq edək. Gəlin biz bu HTML sunulur deyirlər. Mən bu bir az daha kiçik etmək gedirəm. Gördüyünüz kimi, mən Todo deyir ki, bir az mövzu var Mən todo təsviri daxil edə bilər və bir az qutusu və sonra, belə ki, bu siyahıya yeni todo daxil cəhd yeni bir maddə düyməsini bildirin. Bir JavaScript çərçivəsində seminar ver və mən yeni bir maddə hit edirəm. Mən həyata deyir ki, bu JavaScript uyarı almaq. Biz bunu həyata keçirmək üçün var. HTML və JavaScript həm də bu üçün kod kontrol edək. Burada bizim HTML var. Burada göründüyü kimi, burada kiçik Bütün başlığı var. Ki, üst edən Cəsur şey idi və sonra biz tutucu ilə giriş qutusuna var və sonra bu funksiya addTodo edir ki, bu düyməni müəyyən bir atributu var. Heç kimə signifying yerləşir basın nə tapmaq istəyir? [Tələbə işitilemez cavab] Yaxşı, ki, basın, bir hadisə kimi sort edir siçan tıklayarak yalnız bir hadisə və nə biz bunu edirik olduğu kimi ki, funksiyası yerinə bu 'düyməsinə tıklayarak halda tying edirik edir. AddTodo ki, 'düyməsinə tıklayarak bu olay işleyicisi edir. 

Gördüyünüz kimi, mən yeni bir maddə düyməsini basın zaman haqqında klik hadisə atəş olur, və bu funksiya adlı olur. Funksiyası baxaq. Gördüyünüz kimi, burada indiyə qədər mənim JavaScript kodu var. Mən üst mənim siyahısı üçün qlobal data strukturu. Bu bir sıra kimi görünür. Bu, sadəcə boş sıra var. Və sonra, biz əvvəllər gördüm ki, addTodo funksiyası var və orada kod yalnız xətti bu siqnalı edir. Bu, mənim həyata siqnallar, sonra mən tərəfdən 2 vəzifələr var. Mən ki, qlobal data structure üçün todo əlavə etmək sonra da bir-do siyahısı çəkmək istəyirəm. Heç də yalnız hələ Bəzəkli, lakin JavaScript siz tanış ola bilər mən yavaş getmək və yol JavaScript əsasları nəzərdən keçirmək üçün gedirəm. 

Bu bir shot verim. Gəlin istifadəçi bu qutusuna bir şey olur deyirlər. Mən yalnız burada, mətn bir şey yazılmış. Necə JavaScript vasitəsilə giriş, mətn sıralarım? Ki JavaScript saxla, onun fundamental xüsusiyyətlərindən biri, bu, bizə verir ki, DOM bu programmatic çıxış. Bu, bizim bu faktiki HTML elementləri və onların xassələri daxil olmaq üçün imkan verir. Biz çılpaq bones JavaScript bunu yolu Biz, həqiqətən, getElementByID adlı JavaScript funksiyası istifadə edə bilərsiniz edir. Mən bəzi dəyişən orada tipli olan mətn saxlamaq istəyirəm Mən new_todo adlı yeni dəyişən demək gidiyorum və mən element almaq üçün gedirəm. Bu, bir funksiyası var. GetElementByID. İndi, mən ID tərəfindən element alıram, mən ki, mətn qutusu ID ehtiyac mən şəxsiyyət new_todo_description təqdim etdik. Mən bir element almaq üçün gedirəm bilərsiniz. Bu almaq üçün hansı ID müəyyən etmək, bu funksiyanı mənim dəlil var. Və belə ki, HTML bir element var və bu xassələri vardır. Bu gördüm. Onlar atributları istəyirik. Istifadəçi girişi saxlayan mətn element xüsusiyyətini dəyəri adlanır. I new_todo adlı dəyişən indi mətn qutusuna dəyəri qurtardı. İndi bu dəyişən üçün programmatic imkanına malik olan cür sərin edir İndi mən nə edə bilərsiniz, çünki mən siyahısı əlavə bilər. 

Biz bu edəcəyini yolu JavaScript və bu tanış değilseniz narahat olmayın, ancaq onun vasitəsilə davam todos.push edir up burada qlobal data structure adı var ki, və I new_todo təkan gedirəm. Indi mən JavaScript onu əlavə, çünki bu böyük ki, işlər siyahısı nümayəndəliyi. Amma indi mən necə HTML geri alıram? Mən bunu geri itələmək və düzmək üçün bir yol tapmaq lazımdır. Başqa sözlə, mən növ bu çəkmək lazımdır. Biz nə olacaq biz Ediləcək işlər siyahısına çəkmək olacaq edir. Mən bu sayfada digər HTML güncellemeniz lazımdır Gördüyünüz kimi, mən burada, bu kiçik konteyner tərk etdik kimin ID todos edir Bu səhifə divider, və mən orada Ediləcək işlər siyahısına qoymaq üçün gedirəm. Əvvəl siyahısı köhnə orada idi, demək, çünki onu təmizləmək üçün gedirəm. Mən yenə ID ki element alıram və mən ki, element daxili HTML daxil olmaq alıram mən ki, təmizləmək üçün gedirəm. Olduğu kimi, biz bu kodu tərk, biz, bir boş bir şey görmək istədiyiniz və indi mənim yeni siyahısı göstərilməsi başlamaq istəyirəm. Mən əsasən mənim siyahısı silmək üçün gedirəm. 

İndi todos div daxili HTML daxilində, tamamilə aydındır və indi mən siyahısına əlavə başlamaq lazımdır. Mən əlavə etmək istədiyiniz ilk şey, unordered siyahısı tag edir olan əsasən bu unordered siyahı start olduğunu bildirir. İndi mənim todos array hər element üçün edirəm ki, HTML daxili çap etmək istəyirəm. Mən bu siyahı altına onu əlavə etmək istəyirəm. Just C kimi, mən loop üçün istifadə edə bilərsiniz, və mən siyahısının başında gidiyorum element, 0, mən siyahısı uzunluğu bütün yol getmək üçün gedirəm. Biz əslində uzunluğu əmlakdan istifadə JavaScript bir sıra uzunluğu əldə edə bilərsiniz. Əsasən Burada daxilində çox oxşar bir şey etmək gidiyorum ki element çap. Mən todos div ki, daxili HTML əmlak, gedə bilərsiniz və mən bu yeni siyahısı maddə əlavə etmək üçün gedirəm, və əhatə olacaq Bu li tag, və mən + operatoru ilə concatenate gidiyorum ki, mənim todos serialın Ith element var və sonra edirəm ki, tag yaxın gedirəm. İndi hər bir element üçün biz yeni siyahısını giriş əlavə edəcəyik. Və sonra biz həqiqətən etmək lazımdır ki, bütün etiket off yaxındır. Mən yalnız siyahısı tag unordered off bağlamaq lazımdır. 

Ki, işləri necə bir hiss almaq edirsiniz? Bu, bütün siyahısı açılır. Bu, todos siyahıdan siyahısına fərdi elementlər əlavə edir və sonra bütün siyahısı bağlayır və bu, mənim addTodo funksiyanın. Mən əsasən mətn qutusuna gələn todo əldə başlayır. Mən todos sıra ki, əlavə, sonra mən Ediləcək işlər siyahısına yenidən göstərir. İndi mənim siyahısına maddələr əlavə edə bilərsiniz. Bu cür maraqlı, çünki kodu yalnız bir neçə xətləri ilə biz əsasən biz maddələr əlavə edə bilərsiniz bir siyahısı etdik. Böyük. Bu JavaScript bir əsas tətbiqi növü var. , Indi üçün sintaksis haqqında çox narahat olmayın lakin bu konseptual haqqında düşünürəm. Biz bəzi HTML idi. Biz daxil işlər bəndinə əsasən icazə users əlavə etmək sayfada mətn qutusu idi. Və sonra ki, mətn qutusuna ki todo almaq JavaScript istifadə. Biz JavaScript array daxilində, bu kimi əsasən olduğunu saxlanılır ki, bizim proqram nümayəndəliyi siyahısı, və sonra biz onu çap. Bu todos.js edir. 

Bu sərin növü deyil, amma necə biz bu da edə bilər? Gördüyünüz kimi Bəli, bu siyahısı tam kimi deyil. Məsələn, mən, natamam kimi bu maddələrin hər hansı qeyd edə bilməz Mən maddələr reprioritize və ya silə istəyirdi istəyirəm. Bu tamam, ancaq bu daha bilər. Mən əlavə funksiyalar əlavə haqqında çox çox danışmaq fikrində deyiləm lakin biz daha da bilər. Siyahısı üçün bu daha bir xüsusiyyət əlavə söhbət edək, fərdi işlər maddə kontrol edə olacaq olan və belə əsasən mən bu etdiyiniz deyərək, pozdurulmaq var. Ki, yerinə yetirmək bilər ki, bəzi kodu baxaq. Nə üst etdik mən ekledik fark yeni qlobal array tam çağırıb. Mən əsasən saxlamaq üçün bu istifadə alıram olub to-do siyahısı maddələr tam və ya deyil. Bu etmək üçün bir yoldur. Mən bu həyata, görüntü, baxsaq Mən todo daxil edin və əgər əsasən mən bu keçid düyməsini basın həyata keçir, bu siyahıda hər bir maddə və ya tam var və ya natamam dövlət, və mən təmsil etmək üçün bir sıra istifadə edirəm. 

Əsasən ki todos array hər todo üçün bir maddə əsasən göstərir ki, tam sıra var ki, tam və ya olub-olmadığını. Mən bu kodu olduqca minimal dəyişiklik etmək bulana Belə ki, burada bizim addTodo funksiyası var. Burada serialın üzərinə basaraq alıram Qeyd edək ki, və sonra mən tam array üçün 0 pushing alıram əsasən demək ki, yeni todo təkan ilə paralel Mən bu maddə əlavə alıram və bu dəyər ilə coupled oldu bu natamam var deməkdir. Və sonra mən to-do siyahısı yenidən çəkilməsi alıram. İndi bu drawTodoList funksiyası əlavə etdik bilərsiniz. Bu, əvvəl idi kodu alır əsasən qutusu həyata təmizləyir və sonra yeni işlər siyahısı çəkir. Amma bu daxilində loop üçün daha çox indi bir az edirik ki, qeyd. Biz əsasən Ith todo üçün maddə müvafiq olub burada kontrol edirik tam və biz bu 2 şəraitdə fərqli davranır edirik. Tam varsa, biz bu del tag ekliyorsanız olan əsasən təsiri vasitəsilə tətil əldə edə bilərsiniz yolu tam varsa İşlər siyahısını kəsişməsi, bu deyil, əgər, biz o cümlədən deyilik. Və belə belə ki, qayğı 

və bunu həyata keçirmək üçün bir yoldur. Istifadəçi bu bir tıkladığında Və sonra qeyd biz bunu başa vəziyyəti dəyişə. Istifadəçi klik, biz bunu başa və ya olub-olmamasına geri olacaq zaman, və sonra biz onu yenidən lazımdır. Işlərin bu cür. Biz öz vəzifələri həyata keçirmək ki, bu funksiyaları və bu tamam. Biz baxmayaraq, bu barədə daha yaxşı nə ola bir şey var mı? Biz bu 2 qlobal seriallarda var bildirək. Bu C idi və biz növ təmsil ki, 2 seriallarda olsaydı növ bir şəkildə bağlı olmuşdur ki, məlumat biz bu 2 sahələri birləşdirmək C nə istifadə edir informasiya iki ədəd kapsüller ki, bir şey? Kimsə Yoxmu təklif etmək istəyirsiniz? [Tələbə işitilemez cavab] 

Məhz, belə ki, biz struct bir növ istifadə edə bilər və pset 3, demək, geri hesab edirəm ki, əgər biz lüğət idi, sonra biz idi xatırlayıram olub sözü Lüğətə idi, və bütün məlumatlar bir araya verilmişdir bəzi struktur daxilində. Mən bu kodu ilə edə bilərsiniz Bir şey bu 2 fərqli serialların qarşısını almaq üçün informasiyaların oxşar ədəd bir JavaScript object onları birləşdirmək bilər. Ki, nəzər salaq. Mən yalnız indi üst bir sıra var Xəbər və nə mən etdiyiniz edir və bu yalnız növ üçün JavaScript sintaksis deyil obyektin bir hərfi versiyasını yaratmaq, və biz todo var, 2 xassələri var fark və onu tam və ya natamam olub ilə birlikdə saxlanılır. Bu, çox oxşar kodudur. Biz JavaScript obyektlərin istifadə edirik. Yaxşılaşdırır şeyi Bu cür. Indi kimi, əlaqəli məlumatların bütün bu sahələrdə birlikdə saxlanılır. Biz bunu çap getmək zaman, biz sahələrində əldə edə bilərsiniz. 

Biz todos [i] edirik necə hiss. Tam əvəzinə ayrı-ayrılıqda tam array yoxlanılması, və biz İşlər əmlak əldə etdiyiniz İşlər string almaq istədiyiniz zaman bildiriş ki todo ki, bu cür əhəmiyyət kəsb edir, çünki hər bir maddə bu barədə bu məxsusi xassələri vardır. Bu todo var və bu, tam və ya yox olub var. Çox çox dəyişikliklər funksional, yalnız kod bəzi əlavə. Bu hüquq, bəzi istiqamətlər üzrə inkişaf edir? Mən bir az dizayn həyata biz factored deməkdir. İndi biz əsasən Bu data içine obyektlərin var. Biz JavaScript baxımından burada nə ola bilər çox bir şey var mı? Kimi bildiriş ki, burada bu kodu bir div daxili HTML alınması üçün bir az, mən tapmaq, uzun. Document.getElementByID ("göstər") var. InnerHTML. Biz bu kodu bir az friendlier baxmaq üçün nə edə bilər bir şey Mən geri və irəli, scrolling sol və sağ saxlamaq olmazdı Mən jQuery kimi bir kitabxana istifadə bilər. 

Nin, Seminar 2-kontrol edək və bu eyni kodu, lakin jQuery ilə həyata. Siz jQuery ilə də tanış ola bilər ancaq jQuery JavaScript üçün kitabxana növ bilirik ki, ki, asan DOM çıxış fərdi elementləri kimi şeylər edir. Burada yerinə document.getElementByID deyərək ("göstər"). InnerHTML Mən jQuery-ci ildə çox təmiz şəkildə istifadə edə bilərsiniz olan yalnız selectors istifadə etməkdir. Gördüyünüz kimi, bu kodu, bir az təmiz almaq idi çox funksional, oxşar, lakin fikirdir. Biz bu günə qədər şeyi bir neçə gördüm belə ki, biz yalnız xam JavaScript həyata keçirilməsi ilə başlamışdır. Biz yeni funksiyalar əlavə və biz onun təkmilləşdirilməsi necə göstərdi yalnız biz JavaScript var. 

Heç kimə bu dizayn ilə heç bir çətinlik görür? Məhz, mən yalan danışarlar və ya çətinliklər Mütləq deyil demək edək biz to-do siyahısı bunu deyil, və sabah biz qərar biz bir baqqal siyahısı və ya bir alış-veriş siyahısı etmək istədi. Bu funksiyalar bir çox çox oxşardır. Biz JavaScript çıxmaq istəyirəm şeyi bir çox, çox ümumi və bu yolu bir növ ehtiyac vurğulayır etmək üçün bu asan edir. Mən, bu HTML çıxışı bütün qurmaq üçün bütün bu DOM çıxışı var Mən bu model ilə to-do siyahısı təmsil gedirəm kimi. Mən JavaScript geliştiricisi olaraq məsul deyiləm qeyd Mən sync var ki, HTML və JavaScript saxlanılması üçün. Avtomatik olaraq heç bir şey ki, JavaScript nümayəndəliyi və ya to-do siyahısı HTML həyata sövq almaq. Heç bir şey mənə başqa etdilər. I siyahısı funksiyası etmək bərabərə yazmaq idi. Və demək I-ola, o, bunu ağlabatan deyil bilər ki, amma bəzən yorucu ola bilər. Daha böyük bir layihə varsa, çətin ola bilər. 

Çərçivələr, çərçivəsində məqsədləri biri amil ki, proses və sort həyata asanlaşdırmaq üçün bu ümumi-Sizi bilər deyə-dizayn nümunələri tapmaq ki, insanlar ümumiyyətlə, data təmsil yolu bir növ ki Xəritə məlumat olsun, dostlar siyahısı olub və ya bir şey və ya to-do siyahısı. Bəzi insanlar, ümumiyyətlə, informasiya təmsil bir yol var və ümumiyyətlə senkronize ki, informasiya növ saxlamaq lazımdır istifadəçi baxımından bir növ görür nə arasında, Siz mühazirə gördüm ki, model görünüşü nəzarətçi kimi baxımından danışan və bu halda bu JavaScript array olan model. Çərçivəsində bizə problem həll etmək üçün bir yol verir. İndi siyahısı bu həyata nəzər bildirin angularjs adlı çərçivəsində. Bu deyil. Bir Slayd üzərində uyğun bilərsiniz. Mən sol və sağ hərəkət etmək yoxdur. Ki, yəqin ki, bir çərçivə istifadə edərək gəlir böyük bir səbəbi deyil lakin bildiriş Mən heç burada fərdi HTML elementləri daxil olmaq alıram? Mən heç DOM daxil gedirəm? Bu kimi hər hansı bir document.getElementByID və ya bir şey görürsünüzmü? Xeyr, o getdi. 

Bucaq bizə DOM və bir şey bizim JavaScript nümayəndəliyi davam edir senkronize növü, o, JS faylı deyil əgər program bütün HTML content almaq yolu yoxdur, əgər JavaScript nə biz sync bu saxlanılır? Bu. Js faylı deyilsə, sağ, HTML olmaq var? Bu, HTML fayl yeni versiyası və biz burada bir çox ekledik bilərsiniz. Ng basın və ng-təkrar deyirlər ki, bu yeni atributları var bildirək. Dizayn çətinliklər bu problemin həllinə Bucaq yanaşması əsasən HTML çox daha güclü etməkdir. Bucaq HTML qədər daha ifadəli etmək üçün imkan bir yoldur. Məsələn, mən bu mətn qutusuna bağlamaq və ya lər ​​gedirəm deyə bilərəm ki, mənim Bucaq JavaScript kodu çərçivəsində dəyişən üçün. Bu ng-model yalnız ki, yoxdur. Əsasən deyir ki, obyekt bu mətn qutusuna daxilində ki, yalnız dəyişən new_todo_description ilə şərik JavaScript kodu daxilində. Mən açıq-aydın getmək yoxdur, çünki çox güclü DOM ki, məlumat almaq üçün. Mən document.getElementByID demək yoxdur. Mən DOM çıxış kimi jQueries istifadə etmək yoxdur. Hesab edirəm ki, dəyişən dəyişdirmək zaman Mən sonra dəyişən ilə birləşmək olar JavaScript ərzində, HTML ile senkronize saxlanılır belə ki, iki arasında geri və irəli getmək üçün olan prosesi asanlaşdırır. Bu mənada edirmi? 

Və heç HTML çıxış kodu var bilərsiniz. Biz yalnız, HTML daha güclü etdik və indi, məsələn, biz bu kimi şeylər edə bilər Bu basın zaman, todos.js çərçivəsində bu funksiyanın zəng kimi, və bu ng-model kimi, biz əvvəl bunu edə bilər, lakin digər şeylər var və bu ng-repeat bilərsiniz. Bu, nə düşünürsünüz? Burada əvvəl bizim unordered siyahısı var. Biz ul yazıları amma mən heç JavaScript kodu içərisində O siyahıda göstərilməsi edirəm? Mən heç açıq şəkildə siyahı göstərilməsi deyiləm. Bu nasıl çalışır? Yaxşı, yol Bucaq bu bir repeater adlanır deyil həyata keçirir. Əsasən Mən bu HTML çap etmək istəyirəm ki, deyir mənim todos array hər todo daxilində üçün. Todos.jr daxilində todos array, sağ burada və bu ki, array vasitəsilə Bucaq go izah edəcəyəm və hər bir element üçün Gördüyünüz Mən sizə bu HTML çap etmək istəyirik. Mən bunu yalnız bilər, çünki bu zəhmli növü loop üçün yazmaq olmadan, olan kodu yalnız 30 xətləri idi ki, bir siyahısı üçün ən faydalı şey ola bilər, böyük bir layihə var, lakin əgər, bu çox rahat əldə edə bilər. 

Bu HTML daha güclü edilməsi, bu problemin bir həll deyil, və bizə senkronize JavaScript və HTML saxlamağa imkan verir. Bu problemi həll etmək üçün digər mümkün yolları var hər çərçivəsində bu deyil. Hər çərçivəsində bu xətt işləyir. Bəzi çərçivələr, müxtəlif yanaşmalar var və siz digər üzərində bir çərçivəsində kodlaşdırma zövq ki, tapa bilərsiniz. Daha bir baxaq. Bu Backbone adlı çərçivəsində kodlu İşlər siyahısı. Mən tez bu yolu getmək üçün gedirəm. Biz orada getmək əvvəl Mən HTML ilə başlamaq lazımdır. Bir ikinci. Fark kimi, HTML başlayaraq, bizim HTML çox oxşardır ki, qarşısında əvvəl belə çox yeni idi nə. Amma bizim js fayl bir az fərqlidir. Və Backbone cür bu fikri var, və ya fikir əsaslanır biz nə çox, demək ki, bizim JavaScript layihələr modellər və bu modellərin kolleksiyaları haqqında düşünür. Bu, misal üçün, şəkil bir şəkil və kolleksiyaları ola bilər və ya dostlar bir dost və kolleksiyaları fikir. Və oftentimes JavaScript applications proqramlaşdırma etdiyiniz zaman dostlar bir toplama fikri təmsil biz düzmək lazımdır elə JavaScript və Backbone bizə bu qat verir JavaScript mövcud Diziler və obyektlərin üst daha asan ki, daha güclü şeylər. 

Burada, bir to-do model müəyyən etdik və siz sintaksis haqqında çox çox narahat yoxdur lakin nə bu xüsusiyyətləri biri fark? Bu default yatağı var. Backbone mənə yarasa off artıq müəyyən etmək üçün imkan verir Mən yaratmaq ki, işlər hər hansı yeni bu u mənim üçün gedir. İndi bu özelleştirmek, lakin u mənim müəyyən etmək üçün olan edə bilərsiniz gözəl və bu kimi bir şey deyil, çünki rahat növü var JavaScript xas olan, indi aydın yoxdur ki, todos natamam olduğunu bildirirlər. Mən todos natamam kimi qeyd edir ki, hüququ yarasa off deyə bilərəm. Sonra Azadlıqlar bu nədir? İndi bir siyahısı var, və bir toplama edir. Model todo deyir ki, ilə bağlı sahədə bilərsiniz. Bu Backbone izah mənim yoludur Mən bu fərdi todos toplusu haqqında düşünür ola gedirəm. Bu əsasən mənim proqramı üçün model strukturu. Burada bir toplama bu fikir var və əsasən toplanması olan bütün öğeleri, bu todos olacaq və bu mənada çox təbii Mən çünki todos var və mən bir toplama onları var. 

Bu bir az daha baxaq. Burada Backbone rəyidir. Backbone deyir ki, digər odur ki, siz və ya hətta kolleksiyaları düşüncə etdiyiniz modellərin bir çox nümayiş etdirilir bəzi yol lazımdır edir. Biz siyahısı ki, göstərmək lazımdır Biz hər bir model üçün təmin edə bilər, əgər bu gözəl ola bilməz və ya hər modeli ilə bu fikri şərik bizə imkan verir ki, iki birlikdə əlaqə tahmin? Əvvəl Halbuki biz axır ki, loop üçün istifadə etmək məcburiyyətində hər bizim siyahısına todo və sonra burada çap biz əsasən bu model ilə qoşula bilərlər. Bu işlər rəyidir. Bu əvvəllər aşkar todo ilə bağlıdır. İndi hər todo görüntülenebilir və ya renderable edir bu nöqteyi-do. Bəzi yataqlarda bilərsiniz. Əgər bu tagName edir tagName nə düşünürsünüz: Li? Bir todo göstərmək üçün biz istəyərkən əvvəl saxla biz aydın şəkildə bu li etiketi ilə todos qoşmaq lazımdır. İndi biz bu todo yaşamağa davam yerləşir söyləyərək edirik bir li tag daxilində olacaq. İndi biz də todos tədbirlər şərik edirik. 

Hər todo bu bir hadisə var. Siz olduqca çox keçid düyməsini basın varsa, ki, mən orada dedi alıram nə var sonra əsasən əvvəl nə qarşı kimi todo qeyd və sonra tətbiq yenidən göstərir. Bu önce kodu oxşar növ edir. Biz də qarşı və ya kimi qeyd zaman saxla sonra biz yenidən göstərmişdir. Amma indi HTML idi ki, bir şey üçün istifadə bu hadisə bildiriş. Orada oturmuşdu. Düyməsini bir klik idi. 'Düyməsinə basın, o cür üçün stuff edir todo natamam olması qurmaq. Burada ki, keçid düyməsini tıklayarak ki, hadisə bağlı etdik və bu görünüşü ilə və ya söndürmək olub geri. 

Çox sıx bağlı olan bu bu hadisə yaradılması bir gözəl yoludur Bu baxımdan və daha çox bu bilərsiniz. Mən bu render metodu var və biz detalları ilə getmək yoxdur. Bu, biz əvvəl nə oxşar növ var amma bir şey vasitəsilə loop deyiləm bilərsiniz. Mən bütün öğeleri çap gedirəm deyərək növ var ki, ul etiket çap deyiləm. Mən bu bir-do maddə göstərilməsi üçün işlevsellik təmin alıram. Bu, əsasən bir çox güclü anlayışdır Bizim siyahısı bütün bu todos ibarətdir və biz əsasən müəyyən edə bilər, əgər o todos biri göstərməyə yolu sonra biz özlüyündə bizim güclü backbone ola bilər todos bütün göstərmək fərdi todos üzrə render üsulu axtararaq. Burada faydalı bir anlayışdır. İndi soruşmaq yaxşı sual bu proqram necə bir araya olunur var? Biz bir todo göstərmək imkanı var, çünki lakin biz çox göstər ideyası alıram? 

Ki, nəzər salaq. Bu son hissəsidir. Biz burada siyahısı görünüşü var bildiriş və bu da bir görünüşü var bilərsiniz. Və hər şeyi bir neçə üzərində getmək, biz ilk bu-do siyahısı yaratmaq zaman bu initialize üsulu adlanacaq. Gördüyünüz kimi, bu Ediləcək işlər siyahısına yaradılması və bu fikri ilə şərik kimi. Əgər əlavə və sonra mən əsasən burada funksiyaları əlavə maddə- bu addItem metodu oxşar biz əvvəl gördüm Mən yeni todo obyekt yaratmaq, və mən, həqiqətən, zəng alıram qeyd gidiyorum Bu yeni todo üsul, bu Backbone tərəfindən təmin edilir, və mən burada mənim xassələri keçə bilər. Və indi bu istifadə yaradır ki, hər bir todo biz əvvəl gördüm ki, funksionallıq olacaq. Mən mətn qutusuna həyata klirinq alıram əvvəl kiçik bir az ətraflı-Xəbər və sonra bu toplanması əlavə alıram. 

Bu demək olar ki, qəribə görünür biz yalnız todos.push bunu əvvəl, çünki və sonra biz görülmüş, və bu layihə üçün daha çətin görünə bilər və bu Backbone və ya hətta Bucaq ya hər hansı digər çərçivəsində ola bilər xüsusi layihə uyğun, lakin mən bu barədə düşünmək üçün vacib hesab etmir nə bu daha böyük layihələr üçün böyük miqyasda deməkdir ki, Çünki biz təmsil olunduğu böyük layihə olsa bəzi həqiqətən kompleks toplanması, yalnız bir siyahısı daha dərin bir şey, Bir dost siyahısını və ya bu kimi bir şey demək istəyirəm, bu yararlı ola bilər Çünki biz, həqiqətən rahat şəkildə kodu təşkil edə bilər başqası üçün daha asan edəcək bir şəkildə kim ilə qurmaq bir layihə ala istədi. Bu quruluş bir çox təmin olduğunu görə bilərsiniz. Və sonra mən bu addItem haqqında göstərməyə zəng alıram. Gördüyünüz kimi, göstərir və bu tam syntax tutmaq yoxdur, lakin əsasən hər bir model üçün fərdi render metodu zəng olacaq. Bu gəlir harada növ var. Yalnız fərdi todos göstərməyə necə müəyyən edək, və sonra bütövlükdə bitişdirmək onlara bildirin. Amma bu abstraksiya bir yol təqdim edir Mən fərdi todos göstərməyə qərar yol dəyişə bilər, çünki, və bu kodu hər hansı bir dəyişiklik olmazdı. Belə sərin var. 

Heç kimə JavaScript çərçivəsində haqqında hər hansı bir sualınız varmı? [Tələbə işitilemez sual] Oh, əmin ki, böyük bir sual. Sualına necə çərçivəsində daxil idi? Ən JavaScript çərçivəsində əsasən yalnız js faylları Siz kodu üst əlavə edə bilərsiniz ki. Mən bütün bu script tags mənim HTML rəhbəri hissəsi bildiriş, və yekun script tag biz yazdıq ki, kodudur. Və sonra 3 çərçivəsində kodları yalnız da script tags var. Mən CDN deyirlər nə onlara, o cümlədən alıram mənə bu nöqtədə başqası onu almaq üçün imkan verir lakin hər çərçivəsində bu olduqca çox məzmun tapa bilərsiniz kimi bəzi CDN və ya bir şey mövcud xüsusi JavaScript kitabxana üçün, və sonra bu script tags əlavə edə bilərsiniz. Bu mənada edirmi? Sərin. 

Həmin 2 müxtəlif yanaşmalar var. Bu problemin həlli üçün yeganə yanaşma deyil. Bir çox farklı şey var ki, kimsə edə bilər, və bir çox çərçivəsində orada var. Bucaq və Backbone bütün hekayə demək deyil. Son layihələri ilə Uğurlar, çox təşəkkür edirəm. [CS50.TV]