1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Szeminárium] [JavaScript keretrendszerek: Miért és hogyan?]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Harvard Egyetem]

3
00:00:04,000 --> 00:00:06,960
[Ez a CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Sziasztok. Üdvözöljük a JavaScript keretrendszerek szemináriumon.

5
00:00:10,630 --> 00:00:14,910
A nevem Kevin, és ma én leszek beszélni JavaScript keretrendszerek,

6
00:00:14,910 --> 00:00:20,400
és a cél ennek a szeminárium, hogy nem kap, hogy, mondjuk, a mester egy adott keretet önmagában

7
00:00:20,400 --> 00:00:23,810
de kapsz egy széles körű bevezetés néhány keretek

8
00:00:23,810 --> 00:00:27,150
és meg kell mutatni, hogy miért lenne valaha is használni a keretet.

9
00:00:27,150 --> 00:00:31,060
>> Mielőtt ezt, én majd az egy kis háttér JavaScript,

10
00:00:31,060 --> 00:00:33,750
aztán elvisszük onnan.

11
00:00:33,750 --> 00:00:36,270
Fogunk kezdeni végrehajtása to-do listát.

12
00:00:36,270 --> 00:00:39,330
Itt a feladatok listáját a mai.

13
00:00:39,330 --> 00:00:41,990
Elég vicces. Van, hogy végre egy to-do lista a JavaScript.

14
00:00:41,990 --> 00:00:45,110
Ez az, amit ez fog kinézni, hogy ez az első cél.

15
00:00:45,110 --> 00:00:47,160
Nem fogunk használni a keretet erre.

16
00:00:47,160 --> 00:00:51,930
Elmegyünk kód JavaScript és kap a to-do lista dolgozni.

17
00:00:51,930 --> 00:00:54,370
Aztán megyünk, hogy javítsa a tervezés nélkül a keretet.

18
00:00:54,370 --> 00:00:57,190
Fogunk beszélni különböző dolog, amit tehetünk, hogy csak egyedül JavaScript

19
00:00:57,190 --> 00:01:00,650
hogy a to-do lista egy kicsit jól megtervezett.

20
00:01:00,650 --> 00:01:02,490
Ezután fogunk dobni néhány jQuery,

21
00:01:02,490 --> 00:01:05,030
majd fogunk nézni ugyanazt a to-do lista,

22
00:01:05,030 --> 00:01:07,170
csak végre a különböző keretek, és megbeszéljük

23
00:01:07,170 --> 00:01:09,280
 az érvek és ellenérvek az út mentén.

24
00:01:09,280 --> 00:01:12,040
>> Kezdjük végrehajtó to-do listát.

25
00:01:12,040 --> 00:01:14,270
Tegyük fel, hogy most megkapja ezt a HTML.

26
00:01:14,270 --> 00:01:16,620
Fogom, hogy ez egy kicsit kisebb.

27
00:01:16,620 --> 00:01:19,300
Mint látható, van egy kis fejlécet, amely azt mondja Todo

28
00:01:19,300 --> 00:01:21,740
és egy kis dobozt, ahol megadhatja a leírást a todo

29
00:01:21,740 --> 00:01:26,990
, majd egy új elem gomb, úgyhogy próbáljuk meg egy új todo erre a listára.

30
00:01:26,990 --> 00:01:31,000
Küldj JavaScript keretrendszerek szeminárium

31
00:01:31,000 --> 00:01:33,090
és én, hogy elérje az új elemet.

32
00:01:33,090 --> 00:01:35,730
Értem ezt JavaScript alert azt mondja végre engem.

33
00:01:35,730 --> 00:01:37,560
Van annak végrehajtására.

34
00:01:37,560 --> 00:01:41,490
Nézzük meg a kód, mind a HTML és a JavaScript.

35
00:01:41,490 --> 00:01:43,260
Itt a HTML.

36
00:01:43,260 --> 00:01:45,500
Mint látható, itt van a mi kis Todos fejléc.

37
00:01:45,500 --> 00:01:47,620
Ez volt az, hogy merész dolog a tetején,

38
00:01:47,620 --> 00:01:50,690
és akkor mi van a beviteli mezőbe a helyőrző,

39
00:01:50,690 --> 00:01:59,460
és akkor ott van egy bizonyos tulajdonsága ez a gomb, hogy hívja ezt a funkciót addTodo.

40
00:01:59,460 --> 00:02:05,460
Van bárki is kitalálni, hogy mi a kattintás jelezve?

41
00:02:05,460 --> 00:02:07,390
[Student hallható válasz]

42
00:02:07,390 --> 00:02:09,289
Jó, a kattintásra van valami, mint egy esemény,

43
00:02:09,289 --> 00:02:12,120
mint kattintson az egér csak egy esemény, és mit csinálunk

44
00:02:12,120 --> 00:02:16,890
A mi árukapcsolás esetén erre a gombra kattint, hogy végre ezt a funkciót.

45
00:02:16,890 --> 00:02:21,700
AddTodo ez eseménykezelőt kattintson a gombra.

46
00:02:21,700 --> 00:02:25,010
>> Mint látható, amikor rákattintok az új elem gomb

47
00:02:25,010 --> 00:02:29,940
A kattintásra esemény kirúgják, és ez a funkció hívódik.

48
00:02:29,940 --> 00:02:33,170
Nézzük meg működését.

49
00:02:33,170 --> 00:02:36,260
Mint látható, itt a JavaScript kód eddig.

50
00:02:36,260 --> 00:02:41,280
Amit a tetején egy globális adatszerkezetet a to-do listát.

51
00:02:41,280 --> 00:02:44,060
Úgy néz ki, mint egy tömb. Ez csak egy üres tömböt.

52
00:02:44,060 --> 00:02:47,100
És akkor már a addTodo függvény korábban láttuk,

53
00:02:47,100 --> 00:02:50,740
és az egyetlen kódsort itt van ez a figyelmeztetés.

54
00:02:50,740 --> 00:02:55,730
Ez figyelmezteti végre engem, és akkor már 2 feladat kéznél.

55
00:02:55,730 --> 00:02:58,790
Hozzá kell tennem, hogy a teendők, hogy a globális adatszerkezetet,

56
00:02:58,790 --> 00:03:01,860
és akkor szeretném, hogy dolgozzon ki a to-do listát.

57
00:03:01,860 --> 00:03:06,360
Semmi sem túl divatos csak még, de lehet, hogy a JavaScript ismerik,

58
00:03:06,360 --> 00:03:12,370
úgyhogy megyek lassan és felülvizsgálja az alapjait a JavaScript ilyen módon.

59
00:03:12,370 --> 00:03:15,490
>> Nézzük ad ez egy lövés.

60
00:03:15,490 --> 00:03:21,130
Tegyük fel, hogy a felhasználó belép valami a dobozban.

61
00:03:21,130 --> 00:03:23,360
Én csak gépelt valamit itt, a szöveg.

62
00:03:23,360 --> 00:03:27,620
Hogyan rendezheti a hozzáférés, hogy a szöveg a JavaScript?

63
00:03:27,620 --> 00:03:32,500
Ne feledje, hogy a JavaScript, az egyik alapvető tulajdonsága, hogy ad nekünk

64
00:03:32,500 --> 00:03:34,670
a programozott hozzáférést a DOM.

65
00:03:34,670 --> 00:03:40,670
Ez lehetővé teszi számunkra, hogy hozzáférést elemek és azok tulajdonságait tényleges HTML.

66
00:03:40,670 --> 00:03:43,430
Az, hogy mi, hogy a csupasz csont JavaScript

67
00:03:43,430 --> 00:03:51,360
az, amit ténylegesen használni a funkciót JavaScript nevű getElementById.

68
00:03:51,360 --> 00:03:55,140
Azt akarom, hogy tárolja a szöveget, ami beírt van néhány változó,

69
00:03:55,140 --> 00:03:58,350
így fogok mondani, egy új változót, new_todo,

70
00:03:58,350 --> 00:04:01,980
és megyek, hogy ezt az elemet.

71
00:04:01,980 --> 00:04:06,330
Ez a funkció. GetElementById.

72
00:04:06,330 --> 00:04:11,580
És most kapok egy elem azonosító, ezért kell az azonosító, hogy a szövegdoboz,

73
00:04:11,580 --> 00:04:15,860
úgyhogy adtam, hogy az azonosító new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Így fogok kapni egy elemet.

75
00:04:18,399 --> 00:04:23,880
Ez az én érvelés ezt a funkciót, hogy meghatározza, hogy milyen ID kap.

76
00:04:23,880 --> 00:04:28,110
És ez az elem a HTML-ben, és azt tulajdonságokkal.

77
00:04:28,110 --> 00:04:30,650
Már láttam ezeket. Ők attribútumokat.

78
00:04:30,650 --> 00:04:37,090
Az attribútum a szöveg elem, amely tárolja a felhasználó által megadott értéket nevezzük.

79
00:04:37,090 --> 00:04:40,860
Megmentettem az értékét, hogy a szövegmező most ebben a változó nevű new_todo.

80
00:04:40,860 --> 00:04:45,040
Most már programozott hozzáférést a változó, ami elég jó

81
00:04:45,040 --> 00:04:49,200
mert most, mit tehetek, hogy én is hozzá, hogy az én to-do listát.

82
00:04:49,200 --> 00:04:52,870
>> Az, hogy mi lenne ennek a JavaScript és ne aggódj, ha nem ismeri ezt,

83
00:04:52,870 --> 00:04:57,010
de csak megy keresztül ez todos.push

84
00:04:57,010 --> 00:05:00,130
mert ez a neve a globális adatszerkezetet itt,

85
00:05:00,130 --> 00:05:04,450
és én fogom nyomni new_todo.

86
00:05:04,450 --> 00:05:09,120
Ez nagyszerű, mert most már van hozzá, hogy az én JavaScript

87
00:05:09,120 --> 00:05:11,280
képviselete, hogy a to-do listát.

88
00:05:11,280 --> 00:05:15,170
De most hogyan jutok vissza a HTML-t?

89
00:05:15,170 --> 00:05:18,560
Meg kell találni a módját, hogy valahogy tolja vissza.

90
00:05:18,560 --> 00:05:21,830
Más szóval, valahogy meg kell hívni ezt.

91
00:05:21,830 --> 00:05:26,060
Mit fogunk csinálni az fogjuk felhívni a to-do listát.

92
00:05:26,060 --> 00:05:29,270
Meg kell frissíteni más HTML az oldalon,

93
00:05:29,270 --> 00:05:32,040
és mint látható, hagytam ezt a kis tartályban itt,

94
00:05:32,040 --> 00:05:36,840
ez az elválasztó lapot, amelynek azonosító todos,

95
00:05:36,840 --> 00:05:40,870
és megyek, hogy a to-do lista is.

96
00:05:40,870 --> 00:05:47,240
Először fogom egyértelmű, hogy ki, mert, mondjuk, volt egy öreg teendők is.

97
00:05:47,240 --> 00:05:49,560
Kezdek az elem azonosító ismét

98
00:05:49,560 --> 00:05:54,530
és én hozzáférés a belső HTML adott elem,

99
00:05:54,530 --> 00:05:58,010
és megyek, hogy egyértelmű, hogy az.

100
00:05:58,010 --> 00:06:05,510
Ha elhagyta ezt a kódot, ahogy van, mi lenne egy üres semmi,

101
00:06:05,510 --> 00:06:10,410
és most szeretném kezdeni teszi az új teendők.

102
00:06:10,410 --> 00:06:12,870
Én alapvetően fogja kiirtani a to-do listát.

103
00:06:12,870 --> 00:06:18,180
>> Most a belső HTML aztán az todos div teljesen tiszta,

104
00:06:18,180 --> 00:06:20,060
és most el kell kezdeni hozzá listámon.

105
00:06:20,060 --> 00:06:23,890
Az első dolog, amit szeretnék, hogy adjunk hát a rendezetlen lista tag,

106
00:06:23,890 --> 00:06:33,890
ami alapvetően azt jelzi, hogy ez a kezdete egy rendezetlen listát.

107
00:06:33,890 --> 00:06:39,770
Most minden eleme az én todos tömbben akarom nyomtassa ki benne, hogy a HTML.

108
00:06:39,770 --> 00:06:43,710
Szeretném hozzáfűzni azt, hogy az alján a lista.

109
00:06:43,710 --> 00:06:49,040
Csakúgy, mint a C, tudom használni a for ciklus, és megyek, hogy az elején a listámon

110
00:06:49,040 --> 00:06:54,140
A 0. elem, és én megyek végig, hogy a hossza a listán.

111
00:06:54,140 --> 00:07:01,100
Mi valóban kap hosszú tömb JavaScript segítségével a length tulajdonság.

112
00:07:01,100 --> 00:07:03,420
Alapvetően fogok csinálni valamit nagyon hasonló belső innen

113
00:07:03,420 --> 00:07:05,600
kinyomtatni, hogy az elem.

114
00:07:05,600 --> 00:07:12,970
Én ismét elérni a todos div, a belső HTML tulajdonság az, hogy

115
00:07:12,970 --> 00:07:17,560
és én fogom adni ezt az új lista elem, és ez lesz körülvéve

116
00:07:17,560 --> 00:07:25,390
a li tag, és megyek összekapcsol a + operátor,

117
00:07:25,390 --> 00:07:28,040
és ez az i-edik elem a todos tömb

118
00:07:28,040 --> 00:07:32,380
aztán fogom zárni, hogy a tag.

119
00:07:32,380 --> 00:07:36,240
Most minden eleme akkor egy új lista bejegyzés.

120
00:07:36,240 --> 00:07:48,700
És akkor valóban meg kell tennie, hogy zárja ki, hogy a tag.

121
00:07:48,700 --> 00:07:52,820
Csak kell, hogy zárja le, hogy a rendezetlen lista tag.

122
00:07:52,820 --> 00:07:55,490
>> Kapsz egy érzed, hogy ami működik?

123
00:07:55,490 --> 00:07:57,700
Ez megnyitja a teljes lista.

124
00:07:57,700 --> 00:08:01,080
Ez növeli az egyes elemeket a todos listából a listán,

125
00:08:01,080 --> 00:08:05,470
majd, hogy bezárja a teljes lista, és ez az én addTodo funkciót.

126
00:08:05,470 --> 00:08:09,590
Én alapvetően kezdem hogy a teendők a szövegmezőbe.

127
00:08:09,590 --> 00:08:18,950
Hozzáteszem, hogy a todos tömb, aztán újra teszi a to-do listát.

128
00:08:18,950 --> 00:08:21,520
Most már hozzá elemeket listámon.

129
00:08:21,520 --> 00:08:24,620
Ez a fajta izgalmas, mert néhány sornyi kódot

130
00:08:24,620 --> 00:08:28,240
már alapvetően arról a to-do lista, ahol lehet hozzá elemeket.

131
00:08:28,240 --> 00:08:30,050
Remek.

132
00:08:30,050 --> 00:08:34,480
Ez a fajta egy alapvető bevezetés a JavaScript.

133
00:08:34,480 --> 00:08:36,179
Ne aggódj túl sokat a szintaxis most,

134
00:08:36,179 --> 00:08:38,130
de gondolni ezt fogalmilag.

135
00:08:38,130 --> 00:08:40,539
Volt néhány HTML.

136
00:08:40,539 --> 00:08:45,310
Volt egy szövegmezőt az oldalon, hogy alapvetően lehetővé tette a felhasználók számára felszámított a to-do felvenni kívánt elemet.

137
00:08:45,310 --> 00:08:49,210
Aztán használt JavaScript letölteni, hogy abból a todo mezőbe.

138
00:08:49,210 --> 00:08:52,830
Azt, hogy a tárolt belsejében a JavaScript tömb, amely alapvetően, mint

139
00:08:52,830 --> 00:08:56,010
a programszerű képviselete, hogy a teendők,

140
00:08:56,010 --> 00:08:59,060
és aztán kinyomtatta.

141
00:08:59,060 --> 00:09:02,690
Ez todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Ez elég jó, de hogyan tudjuk ezt tovább?

143
00:09:07,620 --> 00:09:11,350
Nos, mint látható, ez nem olyan, mint egy komplett to-do listát.

144
00:09:11,350 --> 00:09:15,100
Például, nem lehet kijelölni a felsoroltak közül bármelyik hiányos,

145
00:09:15,100 --> 00:09:19,920
mint ha akartam reprioritize tételek és törlését.

146
00:09:19,920 --> 00:09:23,150
Ez rendben van, de mi ezt tovább.

147
00:09:23,150 --> 00:09:29,280
Én nem fogok túl sokat beszélni hozzá extra funkciók,

148
00:09:29,280 --> 00:09:32,800
de venni, hogy tovább.

149
00:09:32,800 --> 00:09:35,970
Beszéljünk hozzá még egy vonás, hogy a to-do lista,

150
00:09:35,970 --> 00:09:40,370
ami lesz képes ellenőrizni az egyes to-do tétel

151
00:09:40,370 --> 00:09:44,780
, és azt át kell húzni, így gyakorlatilag azt csináltam ezt.

152
00:09:44,780 --> 00:09:50,240
Nézzünk meg egy kódot, amely véghez ezt.

153
00:09:50,240 --> 00:09:52,740
Figyeljük meg, hogy mit tettem a tetején van, amit ki

154
00:09:52,740 --> 00:09:57,620
egy új, globális nevű tömböt teljes.

155
00:09:57,620 --> 00:10:02,890
Én alapvetően ezzel tárolni, hogy az elemeket a to-do lista

156
00:10:02,890 --> 00:10:06,560
a teljes vagy nem.

157
00:10:06,560 --> 00:10:08,470
Ez az egyik módja ennek.

158
00:10:08,470 --> 00:10:13,750
Ha megnézzük a végrehajtásában, a kijelző,

159
00:10:13,750 --> 00:10:21,120
alapvetően, ha belépek egy teendők és nyomja meg ezt a váltógomb

160
00:10:21,120 --> 00:10:25,040
átmegy ki, így minden pont ezen a listán van vagy teljes

161
00:10:25,040 --> 00:10:31,050
vagy hiányos állapot, és én egy másik tömböt képviselni.

162
00:10:31,050 --> 00:10:33,730
>> Alapvetően minden todo abban todos array

163
00:10:33,730 --> 00:10:37,110
van egy elem a teljes tömb alapvetően azt jelzi,

164
00:10:37,110 --> 00:10:39,060
hogy ez-e a teljes vagy sem.

165
00:10:39,060 --> 00:10:41,640
Elegem van, hogy nagyon minimális változtatásokat ezt a kódot,

166
00:10:41,640 --> 00:10:44,470
így itt a mi addTodo funkciót.

167
00:10:44,470 --> 00:10:48,530
Figyeljük meg, hogy itt vagyok nyomja rá a sor,

168
00:10:48,530 --> 00:10:51,300
aztán Elmegyek egy 0-tól, hogy a teljes tömb

169
00:10:51,300 --> 00:10:57,090
alapvetően párhuzamosan, hogy az új todo nyomja mondani

170
00:10:57,090 --> 00:11:00,430
Én hozzá ez a tétel, és ez párosul ez az érték,

171
00:11:00,430 --> 00:11:02,810
ami azt jelenti, hogy ez nem teljes.

172
00:11:02,810 --> 00:11:04,970
És akkor én újrarajzolás a to-do listát.

173
00:11:04,970 --> 00:11:09,220
Most észre adtam ezt drawTodoList funkciót.

174
00:11:09,220 --> 00:11:11,760
Ez veszi el a legtöbb a kód a miénk volt,

175
00:11:11,760 --> 00:11:15,320
alapvetően törli ki a dobozt, és felhívja az új teendők.

176
00:11:15,320 --> 00:11:19,620
De észre, hogy belül ez a for ciklus csinálunk egy kicsit most.

177
00:11:19,620 --> 00:11:25,000
Mi alapvetően annak ellenőrzése, hogy a tételnek az i-edik todo itt

178
00:11:25,000 --> 00:11:30,220
teljes, és mi viselkednek eltérően a 2 esetben.

179
00:11:30,220 --> 00:11:32,790
Ha ez kész, mi ezt hozzá del tag,

180
00:11:32,790 --> 00:11:35,360
amely alapvetően így lehet kapni, hogy a sztrájk hatása

181
00:11:35,360 --> 00:11:38,190
áthúzva a to-do listát, ha ez kész,

182
00:11:38,190 --> 00:11:42,200
és ha nem, mi nem, beleértve azt.

183
00:11:42,200 --> 00:11:45,030
És ez a fajta gondoskodik róla,

184
00:11:45,030 --> 00:11:49,140
>> és ez az egyik módja annak, hogy ennek az elvégzéséhez.

185
00:11:49,140 --> 00:11:53,420
Aztán észre, ha a felhasználó rákattint egy ilyen

186
00:11:53,420 --> 00:11:56,780
mi válthat befejezése állapotát is.

187
00:11:56,780 --> 00:12:02,170
Amikor a felhasználó rákattint, akkor fordított, hogy ez megtörtént-e vagy sem,

188
00:12:02,170 --> 00:12:04,540
és aztán majd dolgozza át azt.

189
00:12:04,540 --> 00:12:06,190
Ez a fajta munka.

190
00:12:06,190 --> 00:12:09,860
Jelenleg ezeket a feladatokat végző saját feladatait,

191
00:12:09,860 --> 00:12:11,730
és ez rendben van.

192
00:12:11,730 --> 00:12:14,110
Van valami, amit tehetne jobban erről, igaz?

193
00:12:14,110 --> 00:12:18,700
Figyeljük meg van ez a 2 globális tömbök.

194
00:12:18,700 --> 00:12:23,550
Ha ez volt a C, és volt 2 tömbök ennyi képviselt

195
00:12:23,550 --> 00:12:25,800
adatokat, amelyeket a fajta bizonyos szempontból kapcsolatban

196
00:12:25,800 --> 00:12:30,140
mit használunk a C, hogy összekapcsolják ezeket 2 mező

197
00:12:30,140 --> 00:12:35,420
valami, hogy magában foglalja mind az információkat?

198
00:12:35,420 --> 00:12:37,600
Akar valaki egy javaslatot?

199
00:12:37,600 --> 00:12:39,450
[Student hallható válasz]

200
00:12:39,450 --> 00:12:42,340
>> Pontosan, így jönne valamilyen struktúra,

201
00:12:42,340 --> 00:12:44,960
és ha úgy gondolja, vissza, mondjuk, Pset 3,

202
00:12:44,960 --> 00:12:47,350
emlékszem, mi volt szótárt, és akkor volt, hogy a szó

203
00:12:47,350 --> 00:12:50,230
volt a szótárban, és minden információt össze

204
00:12:50,230 --> 00:12:52,420
belül bizonyos adatok szerkezetét.

205
00:12:52,420 --> 00:12:56,390
Egy dolgot tudok csinálni ezt a kódot, hogy ne kelljen a 2 különböző tömbök

206
00:12:56,390 --> 00:13:01,760
hasonló információkat, hogy én is össze őket egy JavaScript objektumot.

207
00:13:01,760 --> 00:13:07,150
Vessünk egy pillantást.

208
00:13:07,150 --> 00:13:11,740
Figyeljük Csak egy tömb tetején már

209
00:13:11,740 --> 00:13:17,650
és mit csináltam jelentése, és ez csak a JavaScript szintaxist fajta

210
00:13:17,650 --> 00:13:21,350
ami egy szó szerinti változata egy tárgy,

211
00:13:21,350 --> 00:13:24,670
és Közlemény 2 tulajdonságok, így már a todo,

212
00:13:24,670 --> 00:13:29,660
és ez együtt tartják, hogy ez a teljes vagy hiányos.

213
00:13:29,660 --> 00:13:31,000
Ez nagyon hasonló kódot.

214
00:13:31,000 --> 00:13:35,310
Mi a JavaScript tárgyakat.

215
00:13:35,310 --> 00:13:38,600
Ez a fajta javul dolgokat.

216
00:13:38,600 --> 00:13:43,850
Mint most, mindezeken a területeken a kapcsolódó információk tart össze.

217
00:13:43,850 --> 00:13:46,410
Amikor megyünk nyomtassa ki, akkor érheti el a mezőket.

218
00:13:46,410 --> 00:13:49,060
>> Figyeljük meg, hogy csinálunk todos [i]. Komplett

219
00:13:49,060 --> 00:13:52,880
ahelyett, hogy ellenőrzi a teljes tömb külön

220
00:13:52,880 --> 00:13:56,560
és észrevenni, ha azt akarjuk, hogy a to-do húr mi megy a to-do tulajdon

221
00:13:56,560 --> 00:13:58,750
, hogy a todo, így ez a fajta van értelme, mert

222
00:13:58,750 --> 00:14:01,660
minden egyes elem ezek a belső tulajdonságait is.

223
00:14:01,660 --> 00:14:05,650
Ez egy teendők, és azt, hogy ez a teljes-e vagy sem.

224
00:14:05,650 --> 00:14:11,540
Nem túl sok változás van funkcionálisan, csak hozzá egy kicsit, hogy a kódot.

225
00:14:11,540 --> 00:14:13,430
Ez a javulás néhány fronton, igaz?

226
00:14:13,430 --> 00:14:16,030
Úgy értem, hogy a tervezési tényezőt ki egy kicsit.

227
00:14:16,030 --> 00:14:20,350
Most tárgyak alapvetően magukba az adatokat.

228
00:14:20,350 --> 00:14:27,130
Van még valami, amit tehetne innen tekintve JavaScript?

229
00:14:27,130 --> 00:14:31,810
Tetszik észre, hogy ez a kód itt

230
00:14:31,810 --> 00:14:34,760
szerzés a belső HTML egy div

231
00:14:34,760 --> 00:14:40,520
egy kicsit, azt hiszem, sokáig.

232
00:14:40,520 --> 00:14:45,100
Van document.getElementById ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Az egyik dolog, amit tehetünk, hogy ezt a kódot meg egy kicsit barátságosabb

234
00:14:48,400 --> 00:14:51,450
így nem kell tartani görgetés jobbra és balra, előre-hátra,

235
00:14:51,450 --> 00:14:58,480
, hogy én is használja a könyvtárat, mint a jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Nézzük meg szeminárium 2.

237
00:15:02,710 --> 00:15:05,880
és ez ugyanazt a kódot, de ez történik jQuery.

238
00:15:05,880 --> 00:15:08,790
Lehet, hogy nem is ismeri a jQuery,

239
00:15:08,790 --> 00:15:11,510
de csak tudom, hogy jQuery egyfajta könyvtár JavaScript

240
00:15:11,510 --> 00:15:15,910
amely megkönnyíti a dolgokat, mint a való egyes elemei a DOM.

241
00:15:15,910 --> 00:15:21,280
Itt ahelyett, hogy document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Tudom használni a sokkal tisztább módon jQuery,

243
00:15:25,210 --> 00:15:28,490
ami csak használni választók.

244
00:15:28,490 --> 00:15:31,300
Mint látható, ez a kód nem kap egy kicsit tisztább,

245
00:15:31,300 --> 00:15:35,770
funkcionálisan nagyon hasonló, de ez az ötlet.

246
00:15:35,770 --> 00:15:37,980
Láttuk egy-két dolgot eddig,

247
00:15:37,980 --> 00:15:42,010
így kezdődött, csak nyers JavaScript végrehajtására.

248
00:15:42,010 --> 00:15:45,370
Mi hozzáadott új funkciók, és megmutatta, hogyan lehet javítani azt

249
00:15:45,370 --> 00:15:49,090
csak mi van a JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Van valakinek lát nehézséget a design?

251
00:15:53,300 --> 00:16:01,090
Vagyis azt hiszem, vagy nem feltétlenül nehéz, hanem mondjuk

252
00:16:01,090 --> 00:16:04,830
Nem csináltunk a to-do lista projektet, és holnap úgy döntöttünk,

253
00:16:04,830 --> 00:16:10,320
azt akarta, hogy egy élelmiszerbolt lista, vagy egy bevásárló listát projektet.

254
00:16:10,320 --> 00:16:14,150
Sok ezek közül nagyon hasonló.

255
00:16:14,150 --> 00:16:19,080
Sok dolog, amit szeretnénk, hogy ki a JavaScript nagyon gyakori,

256
00:16:19,080 --> 00:16:23,820
és ez kiemeli annak szükségességét, hogy valamilyen módon

257
00:16:23,820 --> 00:16:25,670
hogy ezt könnyebb megtenni.

258
00:16:25,670 --> 00:16:30,400
Kellett felépíteni mindezt HTML hozzáférés mindez DOM hozzáférést,

259
00:16:30,400 --> 00:16:35,530
mint fogom képviselni a to-do lista ezzel a modellel.

260
00:16:35,530 --> 00:16:39,130
És észre én vagyok a felelős, mint a JavaScript fejlesztő

261
00:16:39,130 --> 00:16:42,890
tartja a HTML és a JavaScript, hogy van szinkronban.

262
00:16:42,890 --> 00:16:48,040
Semmi sem automatikusan, hogy a JavaScript képviselet

263
00:16:48,040 --> 00:16:51,590
vagy a to-do lista kap tolta ki a HTML.

264
00:16:51,590 --> 00:16:54,000
Semmi végre, hogy csak nekem.

265
00:16:54,000 --> 00:16:56,880
Kellett írni a sorsolás to-do lista funkciót.

266
00:16:56,880 --> 00:17:01,650
És ez lehet, hogy nem úgy értem, hogy ésszerű megtenni,

267
00:17:01,650 --> 00:17:03,670
de lehet, hogy unalmas néha.

268
00:17:03,670 --> 00:17:08,190
Ha van egy nagyobb projekt, lehet, hogy nehéz.

269
00:17:08,190 --> 00:17:10,720
>> Keretek, egyik célja a keretek

270
00:17:10,720 --> 00:17:14,060
célja, hogy egyszerűsítse a folyamatot, és a fajta tényező ki

271
00:17:14,060 --> 00:17:16,950
ezek a közös-Azt hiszem, mondhatjuk-tervezési minták

272
00:17:16,950 --> 00:17:20,700
, hogy az emberek általában valamilyen módon képviselni adatok

273
00:17:20,700 --> 00:17:25,599
hogy ez a barát-e ez térképi információk

274
00:17:25,599 --> 00:17:27,280
vagy valamit, vagy a to-do listát.

275
00:17:27,280 --> 00:17:30,660
Vannak, akik általában módon képviselni információk

276
00:17:30,660 --> 00:17:33,650
és általában meg kell tartani, hogy az információ a fajta szinkronban

277
00:17:33,650 --> 00:17:36,520
között, amit a felhasználó lát valamilyen nézetet,

278
00:17:36,520 --> 00:17:39,850
beszélő szempontjából, mint az MVC, amit látott előadás,

279
00:17:39,850 --> 00:17:45,400
majd a modell, amely ebben az esetben ez a JavaScript tömb.

280
00:17:45,400 --> 00:17:49,020
Keretek nekünk egy utat, hogy megoldja ezt a problémát.

281
00:17:49,020 --> 00:17:53,080
Most vessünk egy pillantást a végrehajtásában teendők

282
00:17:53,080 --> 00:18:02,360
A keret nevű angularjs.

283
00:18:02,360 --> 00:18:04,650
Ez az. Figyeld meg, hogy elfér a dián.

284
00:18:04,650 --> 00:18:07,330
Nem kell, hogy lépjen a bal és a jobb.

285
00:18:07,330 --> 00:18:10,460
Ez valószínűleg nem egy jó ok, hogy javasoljuk a keret,

286
00:18:10,460 --> 00:18:20,120
de észre fogok valaha elérése egyes HTML elemek itt?

287
00:18:20,120 --> 00:18:22,400
Fogok valaha is a DOM?

288
00:18:22,400 --> 00:18:26,120
Lát document.getElementById, vagy valami ilyesmi?

289
00:18:26,120 --> 00:18:29,870
Nem, ez elment.

290
00:18:29,870 --> 00:18:35,590
>> Szögletes segít megőrizni a DOM és a JavaScript képviselete valamit

291
00:18:35,590 --> 00:18:40,430
fajta szinkronban, így ha ez nem a js fájlban,

292
00:18:40,430 --> 00:18:46,790
Ha nincs mód a programból hogy az összes, hogy a HTML tartalmat

293
00:18:46,790 --> 00:18:51,800
A JavaScript hogyan fogjuk tartani ezt szinkronban?

294
00:18:51,800 --> 00:18:58,160
Ha nem az. Js fájlt, akkor van, hogy a HTML, igaz?

295
00:18:58,160 --> 00:19:01,910
Ez az új verzió a HTML fájlt,

296
00:19:01,910 --> 00:19:04,660
és észre mi már hozzá egy csomó itt.

297
00:19:04,660 --> 00:19:11,110
Figyeljük meg van az új tulajdonságok, amelyek azt mondják, ng-click és ng-repeat.

298
00:19:11,110 --> 00:19:15,650
Szögletes megközelítése probléma megoldása a nehézségek tervezés

299
00:19:15,650 --> 00:19:19,130
az, hogy a HTML alapvetően sokkal erősebb.

300
00:19:19,130 --> 00:19:24,420
Szögletes egy módja, amely lehetővé teszi, hogy a HTML valamivel kifejezőbb.

301
00:19:24,420 --> 00:19:30,520
Például, azt mondhatom, hogy én fogok kötni, vagy kötelező a szövegdobozba

302
00:19:30,520 --> 00:19:35,080
változó az én Szögletes JavaScript kódot.

303
00:19:35,080 --> 00:19:37,030
Ez az ng-modell nem csak ezt.

304
00:19:37,030 --> 00:19:41,550
Ez lényegében azt jelenti, hogy az elem belsejében a szöveg doboz,

305
00:19:41,550 --> 00:19:45,000
csak társítani, hogy a változó new_todo_description

306
00:19:45,000 --> 00:19:47,870
a JavaScript kódot.

307
00:19:47,870 --> 00:19:51,600
Ez nagyon erős, mert nem kell külön menni

308
00:19:51,600 --> 00:19:53,310
A DOM, hogy ezt az információt.

309
00:19:53,310 --> 00:19:56,250
Nem kell mondanom document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Nem kell használni, mint a jQueries DOM hozzáférést.

311
00:19:58,750 --> 00:20:03,280
Tudom társítani azt a változót, majd amikor változtatni változó

312
00:20:03,280 --> 00:20:07,400
a JavaScript ez szinkronban tartani a HTML,

313
00:20:07,400 --> 00:20:11,640
így leegyszerűsíti a folyamatot, amelynek során az oda-vissza a kettő között.

314
00:20:11,640 --> 00:20:18,260
Van ennek értelme?

315
00:20:18,260 --> 00:20:22,060
>> És észre nincs HTML kódot.

316
00:20:22,060 --> 00:20:27,760
Már most készül HTML erősebb,

317
00:20:27,760 --> 00:20:32,070
és most, például, a dolgok, mint ez,

318
00:20:32,070 --> 00:20:38,610
mint ha rákattint erre, ezt a funkciót körében todos.js,

319
00:20:38,610 --> 00:20:43,410
és mi is csinálni korábban, de vannak más dolgok, mint ez ng-modell

320
00:20:43,410 --> 00:20:47,020
és észre ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Mit gondolsz, ez nem?

322
00:20:51,520 --> 00:20:54,390
Itt a rendezetlen listát előtti.

323
00:20:54,390 --> 00:20:56,470
Megvan a ul címkéket,

324
00:20:56,470 --> 00:21:03,710
de én valaha is teszi a lista belsejében a JavaScript kódot?

325
00:21:03,710 --> 00:21:09,280
Én soha nem kifejezetten teszi ezt a listát.

326
00:21:09,280 --> 00:21:11,580
Hogyan is működik ez?

327
00:21:11,580 --> 00:21:16,410
Nos, ahogy Szögletes véghez ezt ez az úgynevezett ismétlő.

328
00:21:16,410 --> 00:21:22,760
Alapvetően ez azt mondja, hogy a nyomtatni kívánt a HTML

329
00:21:22,760 --> 00:21:26,240
minden todo belső én todos tömb.

330
00:21:26,240 --> 00:21:31,850
Belsejében todos.jr van todos tömb itt,

331
00:21:31,850 --> 00:21:37,910
és ez mond Szögletes megy keresztül tömb, és minden elem látod

332
00:21:37,910 --> 00:21:41,390
Azt akarom, hogy nyomtassa ki ezt a HTML.

333
00:21:41,390 --> 00:21:44,620
Ez a fajta félelmetes, mert én is csak ezt

334
00:21:44,620 --> 00:21:47,760
anélkül, hogy írjon egy for ciklus,

335
00:21:47,760 --> 00:21:52,250
amely a to-do lista, amely csak 30 sornyi kódot

336
00:21:52,250 --> 00:21:54,700
nem lehet a legkedvezőbb dolog,

337
00:21:54,700 --> 00:22:01,240
de ha van egy nagy projekt, ez kap nagyon kényelmes.

338
00:22:01,240 --> 00:22:06,100
>> Ez az egyik megoldás erre a problémára, így a HTML nagyobb teljesítményű,

339
00:22:06,100 --> 00:22:10,820
és amely lehetővé teszi számunkra, hogy a JavaScript és a HTML szinkronban.

340
00:22:10,820 --> 00:22:13,220
Vannak más módon lehet megoldani ezt a problémát,

341
00:22:13,220 --> 00:22:15,320
és nem minden keretet jelent ez.

342
00:22:15,320 --> 00:22:17,720
Nem minden keretében működik az irányban.

343
00:22:17,720 --> 00:22:19,490
Egyes keretek különböző megközelítések

344
00:22:19,490 --> 00:22:23,310
és előfordulhat, hogy örömmel kódolás az egyik keretében a másikkal szemben.

345
00:22:23,310 --> 00:22:26,160
Nézzük meg még egy.

346
00:22:26,160 --> 00:22:30,060
Ez a to-do lista kódolt fel a keretet, az úgynevezett gerinc.

347
00:22:30,060 --> 00:22:33,250
Én megyek át ilyen gyorsan.

348
00:22:33,250 --> 00:22:38,300
Kezdjük a HTML mielőtt ott.

349
00:22:38,300 --> 00:22:40,290
Egy pillanat.

350
00:22:40,290 --> 00:22:43,950
Kezdve a HTML, azt veszi észre, mi HTML nagyon hasonló

351
00:22:43,950 --> 00:22:50,000
hogy mi volt korábban, így nem túl sok új, hogy a front.

352
00:22:50,000 --> 00:22:55,410
De a js fájl egy kicsit más.

353
00:22:55,410 --> 00:23:00,360
Backbone fajta van ez a gondolat, vagy arra az elgondolásra épül

354
00:23:00,360 --> 00:23:04,750
hogy sok, amit csinálunk, mondjuk, a JavaScript projektek

355
00:23:04,750 --> 00:23:09,110
hogy gondolni modellek gyűjteménye ezeket a modelleket.

356
00:23:09,110 --> 00:23:12,510
Ez lehet például egy fényképet és gyűjtemények fotó,

357
00:23:12,510 --> 00:23:16,230
vagy az ötlet egy barátja és gyűjteménye barátok.

358
00:23:16,230 --> 00:23:20,700
És sokszor, amikor mi programozás JavaScript alkalmazások

359
00:23:20,700 --> 00:23:25,340
akkor egyfajta jelentik a gondolat, a gyűjtemény baráti

360
00:23:25,340 --> 00:23:29,500
valahogy a JavaScript és a Backbone ad nekünk ez a réteg

361
00:23:29,500 --> 00:23:33,040
tetején JavaScript meglévő tömbök és objektumok

362
00:23:33,040 --> 00:23:38,300
csinálni erősebb dolgokat, hogy könnyebben.

363
00:23:38,300 --> 00:23:41,870
>> Itt már meg a to-do modell

364
00:23:41,870 --> 00:23:44,630
és nem kell aggódnod túlságosan a szintaxis,

365
00:23:44,630 --> 00:23:48,730
de észrevettem, hogy mi az egyik tulajdonságait?

366
00:23:48,730 --> 00:23:53,190
Ez egy alapértelmezett területen.

367
00:23:53,190 --> 00:23:56,640
Backbone lehetővé teszi számomra, hogy meghatározza már kapásból

368
00:23:56,640 --> 00:24:00,190
az új teendők, hogy hozzon létre megy, hogy ezeket az alapértékeket.

369
00:24:00,190 --> 00:24:04,100
Most már tudom szabni, de hogy képes megadni az alapértelmezett

370
00:24:04,100 --> 00:24:07,220
szép, és ez a fajta kényelmes, mert ez nem olyan dolog, mint

371
00:24:07,220 --> 00:24:10,430
rejlő JavaScript, és most már nem kell kifejezetten

372
00:24:10,430 --> 00:24:12,430
azt mondják, hogy a todos hiányosak.

373
00:24:12,430 --> 00:24:19,190
Azt lehet mondani, rögtön a denevér, hogy todos fognak megjelölni hiányos.

374
00:24:19,190 --> 00:24:21,300
Figyeljük meg, akkor mi ez?

375
00:24:21,300 --> 00:24:25,520
Most van egy to-do lista, és ez a gyűjtemény.

376
00:24:25,520 --> 00:24:30,960
Figyeljük meg a mezőt társított mondja modell todo.

377
00:24:30,960 --> 00:24:33,390
Ez az én lehet megmondani, hogy a gerinc

378
00:24:33,390 --> 00:24:37,350
Fogok gondolni gyűjteménye ezeknek az egyedi todos.

379
00:24:37,350 --> 00:24:42,140
Ez alapvetően a szerkezeti modell a programom.

380
00:24:42,140 --> 00:24:44,980
Itt van ez a gondolat a gyűjtemény,

381
00:24:44,980 --> 00:24:48,960
és alapvetően az elemeket tartalmazza, hogy a behajtási mind lesz ezeknek todos,

382
00:24:48,960 --> 00:24:51,910
és ez nagyon természetes ebben az értelemben

383
00:24:51,910 --> 00:24:59,890
mert nekem van todos, és én azokat a gyűjtemény.

384
00:24:59,890 --> 00:25:02,940
>> Nézzük meg egy kicsit erre.

385
00:25:02,940 --> 00:25:05,900
Itt van egy gerinc kilátás.

386
00:25:05,900 --> 00:25:08,890
A másik dolog, ami azt mondja, hogy a gerinc

387
00:25:08,890 --> 00:25:14,660
sok a modell, amit te gondolsz, vagy akár gyűjtemények

388
00:25:14,660 --> 00:25:19,150
lesz szüksége, hogy valamilyen módon jelenik meg.

389
00:25:19,150 --> 00:25:21,900
Meg kell, hogy tegyék, hogy a to-do lista,

390
00:25:21,900 --> 00:25:25,460
és nem lenne jó, ha tudnánk biztosítani az egyes típusokra

391
00:25:25,460 --> 00:25:28,390
vagy társult minden modell ezt a nézetet

392
00:25:28,390 --> 00:25:34,020
, amely lehetővé teszi számunkra, hogy azt hiszem, csatlakoztatni a kettő együtt?

393
00:25:34,020 --> 00:25:38,320
Míg korábban kellett használni a ciklus, amely végigmenni

394
00:25:38,320 --> 00:25:41,130
minden a mi todo listában, majd nyomtassa ki itt

395
00:25:41,130 --> 00:25:44,650
akkor alapvetően csatlakoztatni ezzel a modellel.

396
00:25:44,650 --> 00:25:47,550
Ez a to-do view.

397
00:25:47,550 --> 00:25:50,550
Ez együtt jár a teendők találtunk korábban.

398
00:25:50,550 --> 00:25:54,940
Most minden todo nem megjeleníthető vagy renderelhetünk

399
00:25:54,940 --> 00:25:56,960
ez a to-do view.

400
00:25:56,960 --> 00:25:59,440
Figyeljük meg néhány területen.

401
00:25:59,440 --> 00:26:05,880
Mit gondolsz, ez tagName is, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Emlékszel a korábban, amikor akartunk teszi a todo

403
00:26:09,790 --> 00:26:16,700
mi lett volna kifejezetten párosítani a todos ezzel li tag.

404
00:26:16,700 --> 00:26:21,080
Most azt mondja, hogy ha ez a todo fog élni

405
00:26:21,080 --> 00:26:25,250
lesz benne egy li tag.

406
00:26:25,250 --> 00:26:31,440
És most is tömörítő események a todos.

407
00:26:31,440 --> 00:26:34,320
>> Minden todo ez az egy esemény.

408
00:26:34,320 --> 00:26:38,480
Ha rákattint nagyjából váltógombot, ez az, amit mondok ott,

409
00:26:38,480 --> 00:26:43,080
akkor alapvetően jelölje a teendők, mint az ellenkezője annak, amit előtte volt

410
00:26:43,080 --> 00:26:45,890
majd újra tehetik az alkalmazást.

411
00:26:45,890 --> 00:26:47,810
Ez a fajta hasonlít a kód előtt.

412
00:26:47,810 --> 00:26:50,730
Emlékszel, amikor megjelölt, mint akár a másik, vagy-

413
00:26:50,730 --> 00:26:52,410
és aztán újra tették.

414
00:26:52,410 --> 00:26:57,750
De észre már ezt az eseményt használják, hogy legyen valami, ami a HTML.

415
00:26:57,750 --> 00:26:59,640
Úgy ült ott.

416
00:26:59,640 --> 00:27:01,410
A gomb volt a kattintással.

417
00:27:01,410 --> 00:27:05,310
Ha rákattint a gombra, ez a fajta nem a dolog, hogy

418
00:27:05,310 --> 00:27:07,210
létre, hogy a teendők, hogy nem teljes.

419
00:27:07,210 --> 00:27:11,180
Itt már jár az esetben az, hogy a kattintás váltógomb

420
00:27:11,180 --> 00:27:15,830
és visszafordítása hogy ez be vagy ki ezzel az állásponttal.

421
00:27:15,830 --> 00:27:20,480
>> Ez egy jó módja létrehozásának ez az esemény, hogy ez nagyon szorosan kötődik

422
00:27:20,480 --> 00:27:26,980
hogy ezt a nézetet, és így észre még egy.

423
00:27:26,980 --> 00:27:31,050
Én ezt a render módszert, és nem kell, hogy menjen át a részleteket.

424
00:27:31,050 --> 00:27:33,650
Elég hasonló ahhoz, amit korábban,

425
00:27:33,650 --> 00:27:36,070
de észre én nem átkötése semmit.

426
00:27:36,070 --> 00:27:40,700
Én nem nyomtat, hogy ul tag ez a fajta azt fogom kinyomtatni az összes elemet.

427
00:27:40,700 --> 00:27:46,610
Én biztosító funkciókat teszi ezt, hogy a teendő elemhez.

428
00:27:46,610 --> 00:27:49,400
Ez egy nagyon erős koncepció, mert alapvetően

429
00:27:49,400 --> 00:27:53,600
a to-do lista áll, ezek todos, és ha akkor alapvetően meg

430
00:27:53,600 --> 00:27:56,890
az utat, hogy az egyik ilyen tehetik todos

431
00:27:56,890 --> 00:28:04,230
akkor mi lehet az erős gerinc önmagában teszi minden todos

432
00:28:04,230 --> 00:28:07,760
hívja a Render módszert az egyes todos.

433
00:28:07,760 --> 00:28:14,180
Ez egy olyan fogalom, amely hasznos itt.

434
00:28:14,180 --> 00:28:18,160
Most egy jó kérdés, hogy hogyan van ez az alkalmazás is össze?

435
00:28:18,160 --> 00:28:21,200
Mivel megvan a képessége, hogy tegyék egy todo,

436
00:28:21,200 --> 00:28:23,860
de hogyan az ötlet több todos?

437
00:28:23,860 --> 00:28:25,100
>> Vessünk egy pillantást.

438
00:28:25,100 --> 00:28:27,100
Ez az utolsó rész.

439
00:28:27,100 --> 00:28:29,740
Figyeljük meg, hogy van egy to-do lista view itt,

440
00:28:29,740 --> 00:28:34,440
és észre ez is egy nézet.

441
00:28:34,440 --> 00:28:36,970
És, hogy menjen át egy-két dolgot,

442
00:28:36,970 --> 00:28:45,280
ez initialize módszer kerül meghívásra, amikor először hozza létre ezt a to-do listát.

443
00:28:45,280 --> 00:28:52,630
Mint látható, ez olyan, mint ami a to-do listát, és társítja azt ezzel az állásponttal.

444
00:28:52,630 --> 00:28:57,860
Aztán hozzátette, a funkciók itt, így tulajdonképpen, ha hozzá egy elemet,

445
00:28:57,860 --> 00:29:01,440
ez hasonló a AddItem módszerrel láttuk korábban,

446
00:29:01,440 --> 00:29:07,430
Megyek, hogy hozzon létre egy új objektumot teendők, és vegyük észre, én tényleg hívás

447
00:29:07,430 --> 00:29:13,080
Az új todo módszer, így ez biztosítja Backbone,

448
00:29:13,080 --> 00:29:16,010
és én is átadni az ingatlanok itt.

449
00:29:16,010 --> 00:29:23,710
És most minden todo hogy tudok létrehozni ezzel lesz az a funkció, amit korábban láttunk.

450
00:29:23,710 --> 00:29:28,140
Figyeljük Én elszámolási ki a szöveg doboz előtt-a kis apró részlet,

451
00:29:28,140 --> 00:29:32,900
majd én hozzá ebben a gyűjteményben.

452
00:29:32,900 --> 00:29:37,630
>> Ez szinte fura, mert mielőtt még csak meg kellett csinálni todos.push,

453
00:29:37,630 --> 00:29:43,310
aztán végeztünk, és ez úgy tűnik, sokkal bonyolultabb, mert az adott projekt

454
00:29:43,310 --> 00:29:46,980
és előfordulhat, hogy gerinc vagy szögletes, vagy más keretek

455
00:29:46,980 --> 00:29:50,790
nem elégíti ki adott projekt, de azt hiszem, fontos, hogy gondolkodni

456
00:29:50,790 --> 00:29:54,100
hogy ez mit jelent a nagyobb méretű a nagyobb projektek,

457
00:29:54,100 --> 00:29:56,610
mert ha volt egy nagyobb projekt, ahol képviselte

458
00:29:56,610 --> 00:30:00,860
néhány igazán komplex gyűjtemény, valami mélyebb, mint a to-do lista,

459
00:30:00,860 --> 00:30:04,490
mondjuk a barátok listájából vagy valami ilyesmi, ez is jól jöhet

460
00:30:04,490 --> 00:30:09,620
mert tudta szervezni a kódot nagyon kényelmesen,

461
00:30:09,620 --> 00:30:12,550
oly módon, hogy lehetővé tenné, hogy valaki más

462
00:30:12,550 --> 00:30:16,820
aki akarta, hogy vegye fel a projektet építeni.

463
00:30:16,820 --> 00:30:21,450
Láthatjuk, hogy ez ad egy csomó struktúra.

464
00:30:21,450 --> 00:30:26,580
Aztán hívom teszik ezt AddItem.

465
00:30:26,580 --> 00:30:31,050
Render, mint látod, és nem kell megragadni ezt a teljes szintaxis,

466
00:30:31,050 --> 00:30:37,790
de alapvetően minden modell fogja hívni az egyes render módszer.

467
00:30:37,790 --> 00:30:41,500
Ez az a fajta, ahol ez származik.

468
00:30:41,500 --> 00:30:44,140
Nézzük csak meg, hogy hogyan teszi az egyes todos,

469
00:30:44,140 --> 00:30:47,310
és akkor hadd ragasztó őket az egész.

470
00:30:47,310 --> 00:30:49,810
De ez egy módja annak, absztrakció,

471
00:30:49,810 --> 00:30:55,470
mert nem tudtam változtatni, ahogy én úgy dönt, hogy tegye az egyes todos,

472
00:30:55,470 --> 00:30:57,940
és én nem kell változtatni sem a kódot.

473
00:30:57,940 --> 00:31:00,700
Ez elég jó.

474
00:31:00,700 --> 00:31:08,540
>> Van valakinek bármilyen kérdése van a JavaScript keretrendszerek?

475
00:31:08,540 --> 00:31:14,310
[Student hallható kérdés]

476
00:31:14,310 --> 00:31:16,050
Persze, ez egy jó kérdés.

477
00:31:16,050 --> 00:31:19,080
A kérdés az volt, hogyan tettem közé a keretek?

478
00:31:19,080 --> 00:31:22,970
A legtöbb JavaScript keretrendszerek alapvetően csak js fájlokat

479
00:31:22,970 --> 00:31:25,740
hogy akkor is a tetején a kód.

480
00:31:25,740 --> 00:31:29,830
Figyeljük meg a fejét része a HTML már ezeket a script tag-ek,

481
00:31:29,830 --> 00:31:34,250
és a végső script tag az a kód, amit írtam.

482
00:31:34,250 --> 00:31:38,820
És akkor a 3 keret kódok csak is script címkéket.

483
00:31:38,820 --> 00:31:42,110
Én többek között azokat az úgynevezett a CDN,

484
00:31:42,110 --> 00:31:46,200
amely lehetővé teszi számomra, hogy ez a valaki ezen a ponton

485
00:31:46,200 --> 00:31:57,930
de minden keretrendszer this-akkor nagyjából megtalálják a tartalmat

486
00:31:57,930 --> 00:32:03,540
egy adott JavaScript könyvtár csak egyes CDN, vagy valami ilyesmi,

487
00:32:03,540 --> 00:32:05,570
és akkor ezeket a script tag-ek.

488
00:32:05,570 --> 00:32:07,600
Van ennek értelme?

489
00:32:07,600 --> 00:32:09,500
Cool.

490
00:32:09,500 --> 00:32:11,730
>> Ezek 2 különböző megközelítéseket.

491
00:32:11,730 --> 00:32:14,640
Ezek nem csak a megközelítések a probléma megoldására.

492
00:32:14,640 --> 00:32:17,080
Sok különböző dolog, hogy

493
00:32:17,080 --> 00:32:19,490
valaki meg tudja tenni, és a sok keretek odakinn.

494
00:32:19,490 --> 00:32:23,300
Szögletes, Backbone nem mondják el a teljes történetet.

495
00:32:23,300 --> 00:32:26,370
Sok sikert az utolsó projekteket, és köszönöm szépen.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]