[Powered by Google Translate] [Seminari] [marcs de JavaScript: Per què i com]
[Kevin Schmid] [Universitat de Harvard]
[Aquest és CS50.] [CS50.TV]
>> Hola a tots. Benvingut al seminari Frameworks JavaScript.
El meu nom és Kevin, i avui parlaré de marcs de JavaScript,
i l'objectiu d'aquest seminari no és per arribar a, per exemple, dominar un marc particular, per se
però per donar-li una àmplia introducció a un parell de marcs
i demostrar per què voldrà fer servir un framework.
>> Abans de fer-ho, vaig a donar una mica d'història en JavaScript,
i després anem a prendre des d'allà.
Anem a començar per l'aplicació d'una llista de tasques pendents.
Aquí està la nostra llista de tasques per avui.
És una mica graciós. Hem d'aplicar una llista de coses per fer en JavaScript.
Això és el que serà similar, pel que és el nostre primer objectiu.
No utilitzarem un marc per fer això.
Anem a codi JavaScript i obtenir la llista de coses per fer que funcioni.
A continuació, anem a millorar el disseny sense necessitat d'utilitzar un marc.
Anem a parlar de diverses coses que podem fer amb només sols JavaScript
per fer la nostra llista de tasques una mica més ben dissenyat.
A continuació, anem a tirar una mica de jQuery,
i després anem a veure la mateixa llista de tasques pendents,
només implementat en diferents marcs, i discutirem
els pros i els contres en el camí.
>> Anem a començar l'aplicació d'aquesta llista de coses per fer.
Diguem que se'ns ha donat aquest HTML.
Vaig a fer això una mica més petit.
Com pots veure, tinc una mica de capçalera que diu Tot
i una petita caixa on pugui entrar en la descripció d'un TOT
i després un botó nou tema, així que tractarem d'entrar en una nova del tot a aquesta llista.
Dóna-li un seminari marcs JavaScript
i estic de colpejar element nou.
Tinc aquesta alerta de JavaScript que em diu implementar.
Hem de posar-ho en pràctica.
Anem a veure el codi per això, tant el codi HTML i JavaScript.
Aquí està el nostre HTML.
Com es pot veure aquí, aquí està el nostre petit encapçalat Tots.
Això va ser tot el negreta a la part superior,
i després tenim el quadre d'entrada amb el marcador de posició,
i després hi ha un cert atribut d'aquest botó que crida a aquesta funció addTodo.
Algú vol endevinar el que en fer clic es significant?
[Estudiant resposta inaudible]
Bé, el clic al és com un esdeveniment,
com fer clic amb el ratolí és només un esdeveniment, i el que estem fent
és que estem lligant el cas de fer clic en aquest botó per executar aquesta funció.
AddTodo és aquest controlador d'esdeveniments per fer clic en aquest botó.
>> Com es pot veure, en fer clic al botó Nou element
l'esdeveniment clic en acomiaden, i aquesta funció es diu.
Fem una ullada a la funció.
Com podeu veure, aquí està el meu codi de JavaScript fins ara.
El que tinc a la part superior és una estructura de dades global per a la meva llista de coses per fer.
S'assembla a una matriu. És només una matriu buida.
I després tinc la funció addTodo que hem vist abans,
i l'única línia de codi no aquesta alerta.
S'avisa em implementar, i després tinc 2 tasques.
He d'afegir el del tot a l'estructura de dades global,
i després vull cridar la llista de tasques pendents.
Res massa elaborat encara, però JavaScript que pot no estar familiaritzat amb,
així que vaig a anar poc a poc i revisar els fonaments de JavaScript en aquest camí.
>> Anem a donar-li una oportunitat a això.
Diguem que l'usuari introdueix alguna cosa en aquest quadre.
M'acaba d'escriure alguna cosa aquí, text.
Com puc ordenar l'accés que el text a través de JavaScript?
Recordeu que JavaScript, una de les característiques fonamentals és que ens dóna
aquest accés mitjançant programació a la DOM.
Això ens permet accedir als elements i les seves propietats d'aquest HTML real.
La forma en què fem amb els ossos al descobert JavaScript
és en realitat podem utilitzar una funció de JavaScript anomenada getElementById.
Vull guardar el text que està escrit allà, en alguna variable,
així que vaig a dir una nova variable anomenada new_todo,
i jo vaig a aconseguir aquest element.
Aquesta és una funció,. GetElementById.
I ara m'estic posant un element d'identificació, pel que necessitarà l'ID d'aquest quadre de text,
així que m'he donat la new_todo_description ID.
Així és com em vaig a posar un element.
Aquest és el meu argument per a aquesta funció per especificar els ID d'aconseguir.
I això és un element d'HTML, i no té propietats.
Vostè ha vist aquests. Són atributs.
L'atribut de l'element de text que emmagatzema l'entrada de l'usuari es denomina valor.
Em va salvar el valor del quadre de text que ara en aquesta variable anomenada new_todo.
Ara tinc accés mitjançant programació a aquesta variable, que és una mena de fresc
perquè ara el que puc fer és que puc afegir a la meva llista de coses per fer.
>> La forma en què anàvem a fer això en JavaScript i no es preocupi si no està familiaritzat amb aquest,
però només a través d'ell és todos.push
perquè aquest és el nom de la meva estructura de dades mundial aquí,
i jo vaig a empènyer new_todo.
Això és molt bo perquè ara he afegit a la meva JavaScript
representació de la llista de tasques pendents.
Però ara, com puc obtenir de nou a l'HTML?
He de trobar una manera d'ordenar d'empenta cap enrere.
En altres paraules, com que he de treure això.
El que farem és que anem a elaborar la llista de tasques pendents.
Necessito actualitzar un altre HTML en aquesta pàgina,
i com es pot veure, he deixat aquest petit contenidor aquí,
aquest divisor de la pàgina amb identificador de Tots,
i jo vaig a posar la llista de coses per fer.
Primer vaig a aclarir que a causa, per exemple, hi havia una vella llista de coses per fer.
M'estic posant aquest element per ID nou,
i estic accedint al codi HTML intern d'aquest element,
i jo vaig a netejar això.
Si deixem aquest codi com és, ens agradaria veure una res en blanc allà,
i ara vull començar fent la meva nova llista de tasques.
Estic bàsicament, acabarà amb la meva llista de coses per fer.
>> Ara l'interior HTML intern Tots div està del tot clar,
i ara he de començar a afegir a la cistella.
La primera cosa que vull afegir de nou és l'etiqueta llista desordenada,
fet que denota que, bàsicament, aquest és el començament d'una llista no ordenada.
Ara per a tots els elements en el meu array Tots vull imprimir dins d'aquest HTML.
Vull afegir que a la part inferior de la llista.
Igual que a C, puc utilitzar un bucle for, i vaig a començar pel principi de la cistella
en l'element 0, i em vaig a anar fins al final a la longitud de la llista.
De fet, podem obtenir la longitud d'un array en JavaScript utilitzant la propietat length.
Bàsicament, vaig a fer alguna cosa molt similar a l'interior d'aquí
per imprimir aquest element.
Puc tenir accés de nou la div Tots, la propietat HTML intern que,
i jo vaig a afegir en aquest nou element de la llista, i que estarà envoltat d'
aquesta etiqueta li, i jo vaig a concatenar amb l'operador +,
i aquest és l'element i de la meva Tots matriu,
i després em vaig a tancar aquesta etiqueta.
Ara per a tots els elements anem a afegir una nova entrada a la llista.
I llavors tot el que realment hem de fer és tancar aquesta etiqueta.
Només he de tancar aquesta desordenada tag llista.
>> Li dóna una idea de com funciona això?
Això obre la llista completa.
Això afegeix elements individuals de la llista de Tots a la llista,
i després que es tanca la llista completa, i aquest és la meva funció addTodo.
Jo, bàsicament, començar per aconseguir el tot en el quadre de text.
Afegeixo que en la matriu de Tots, i després tornar a fer la llista de coses per fer.
Ara puc afegir elements a la llista.
Això és molt emocionant, perquè en tan sols unes poques línies de codi
bàsicament hem fet una llista de coses per fer, on podem afegir elements.
Gran.
Això és una cosa d'una introducció bàsica a JavaScript.
No es preocupi massa sobre la sintaxi, per ara,
però pensar en això conceptualment.
Teníem una mica d'HTML.
Vam tenir un quadre de text a la pàgina que bàsicament permeten als usuaris introduir un element de tasques pendents per afegir.
I després utilitzem estigui habilitat per portar que tasques pendents d'aquest quadre de text.
Ens van guardar que dins d'una matriu de JavaScript, que és bàsicament com
nostra representació programàtica d'aquesta llista de coses per fer,
i després imprimir.
Aquesta és todos.js.
>> Es tracta d'una mena de fresc, però com podem anar més lluny?
Bé, com poden veure, això no és com una completa llista de tasques pendents.
Per exemple, no puc marcar qualsevol d'aquests elements com incompleta,
com si volgués canviar la prioritat dels elements o eliminar elements.
Això està bé, però podem anar més lluny.
No parlaré molt sobre l'addició de característiques addicionals,
però podríem prendre aquest més enllà.
Anem a parlar sobre com afegir una característica més a aquesta llista de coses per fer,
que es podrà comprovar que un individu tasca pendent
i han de ser titllat, així que bàsicament dient que he fet això.
Anem a veure una mica de codi que podria aconseguir-ho.
Noti el que he fet a la part superior és que he afegit
un nou array global anomenat complet.
Bàsicament estic utilitzant això per emmagatzemar tant els elements de la llista de tasques pendents
estan complets o no.
Aquesta és una manera de fer això.
Si miro l'execució d'aquest, a la pantalla,
bàsicament, si entro en un TOT i premi el botó d'activació
creua cap a fora, de manera que cada element en aquesta llista té ja sigui un complet
o l'estat incomplet, i estic fent servir una altra matriu per representar això.
>> Bàsicament per a cada tasques pendents en aquesta Tots array
hi ha un element de la matriu completa que indica bàsicament
si que és completa o no.
He hagut de fer canvis molt mínims en aquest codi,
així que aquí està la nostra funció addTodo.
Tingueu en compte que aquí m'estic empenyent a la matriu,
i estic empenyent un 0 a la gamma completa,
bàsicament en paral · lel amb aquest nova embranzida del tot que dir
Estic afegir aquest article, i està unida a aquest valor,
el que significa que és incompleta.
I llavors em redibuixar la llista de tasques pendents.
Ara, noto que he afegit aquesta funció drawTodoList.
Això pren molt del codi que teníem abans,
bàsicament esborra la caixa i després assenyala a la nova llista de tasques pendents.
Però es va adonar que dins d'aquest bucle for estem fent una mica més ara.
Bàsicament estem comprovant si l'element corresponent a Tot ITH aquí
és completa, i estem actuant de manera diferent en aquestes 2 circumstàncies.
Si està complet, estem afegint aquesta etiqueta del,
que és bàsicament la manera d'aconseguir que la vaga a través de l'efecte
ratllant la llista de coses per fer si és completa,
i si no és així, no anem a incloure-ho.
I perquè tipus de s'encarrega d'això,
>> i aquesta és una manera d'aconseguir això.
I després adonar-se quan l'usuari fa clic a un d'aquests
d'alternar l'estat de finalització de la mateixa.
Quan l'usuari fa clic, invertirem si ha estat completada o no,
i després tornarem a dibuixar.
Aquest tipus d'obres.
Tenim les funcions que duen a terme les seves pròpies tasques,
i això està bé.
Hi ha alguna cosa que podem fer millor en això, però?
Observi que tenim aquestes 2 sèries mundials.
Si això era C, i teníem 2 arrays aquest tipus de representats
dades que van ser una mena de relacionats d'alguna manera
el faríem servir en C de combinar aquests 2 camps
en alguna cosa que encapsula les dues peces d'informació?
Algú vol fer un suggeriment?
[Estudiant resposta inaudible]
>> Exactament, així que podríem utilitzar algun tipus d'estructura,
i si penses en, diguem, PSET 3,
Recordo que vam tenir diccionari, i després vam haver si la paraula
Va ser en el diccionari, i tota aquesta informació es va elaborar
dins d'alguna estructura de dades.
Una de les coses que puc fer amb aquest codi per evitar que aquests 2 conjunts diferents
per peces similars d'informació és el que puc combinar-los en un objecte de JavaScript.
Anem a fer una ullada a això.
Observeu que només tinc una matriu al cim ara
i el que he fet és-i això és només la sintaxi de JavaScript per a la classe de
la creació d'una versió literal d'un objecte,
i nota que hi ha 2 propietats, per la qual cosa tenim el TOT,
i està obert, així com si és completa o incompleta.
Aquest codi és molt similar.
Estem usant els objectes JavaScript.
Aquest tipus de coses millori.
Com ara, tots aquests camps d'informació relacionada es mantenen junts.
Quan anem a imprimir, podem accedir als camps.
>> Noteu com ho estem fent de Tots [i]. Completa
en lloc de revisar la matriu completa separada,
i notem quan volem obtenir la cadena de tasques que estem rebent la propietat de tasques
que TOT, pel que aquest tipus de té sentit perquè
cada element té aquestes propietats intrínseques al respecte.
Té un TOT, i té ja sigui completa o no.
No hi ha molts canvis no funcionalment, acaba d'afegir una mica més per el codi.
Es tracta d'una millora en alguns fronts, oi?
Em refereixo a que un factor fos el disseny una mica.
Ara tenim objectes per encapsular bàsicament aquestes dades.
Hi ha alguna cosa més que podem fer d'aquí en termes de JavaScript?
Com avís que el codi aquí
per obtenir el codi HTML intern d'un div
és una mica, suposo, molt de temps.
Hi ha document.getElementById ("tots"). InnerHTML.
Una de les coses que podríem fer perquè aquest codi es veuen una mica més amigable
per no haver de seguir desplaçant cap a l'esquerra i dreta, amunt i avall,
és que podria utilitzar una biblioteca com jQuery.
>> Anem a veure el Seminari 2,
i aquest és el mateix codi, però s'ha fet amb jQuery.
Potser no és molt familiaritzat amb jQuery,
però només sé que jQuery és una espècie d'una biblioteca de JavaScript
això fa que sigui més fàcil fer coses com accés als diferents elements del DOM.
Aquí en comptes de dir document.getElementById ("tots"). InnerHTML
Puc utilitzar la forma més neta tant en jQuery,
que és només per utilitzar selectors.
Com podeu veure, aquest codi es va fer una mica més net,
molt similar funcionalment, però aquesta és la idea.
Hem vist un parell de coses fins al moment,
així que vam començar amb la implementació de JavaScript només prima.
Hem afegit noves característiques i mostrem com podem millorar amb
just el que tenim en JavaScript.
>> Algú veu cap dificultat amb aquest disseny?
És a dir, suposo, o no necessàriament dificultats, però direm
no estàvem fent un projecte de llista de coses per fer, i demà ens decidim
hem volgut fer una llista de compres o d'un projecte de llista de la compra.
Moltes d'aquestes característiques són molt similars.
Moltes de les coses que volem sortir de JavaScript són molt comuns,
i això subratlla la necessitat d'algun tipus de forma d'
fer això més fàcil de fer.
Vaig haver de construir tot aquest accés HTML, tot aquest accés DOM,
que vaig a representar la llista de tasques amb aquest model.
I noto que sóc responsable com el desenvolupador de JavaScript
per mantenir el codi HTML i JavaScript que tinc en sincronia.
Res del fet automàticament que la representació JavaScript
o la llista de tasques pendents d'ells acaben fora d'HTML.
Res fa complir que a excepció de mi.
Vaig haver de escriure el sorteig de tasques funció de llista.
I això no pot ser, vull dir, que és raonable fer-ho,
però de vegades pot ser tediós.
Si vostè té un projecte més ampli, que podria ser difícil.
>> Marc, un dels propòsits de marcs
és simplificar el procés i tipus de factor de sortida
aquests common-Suposo que es podria dir que els patrons de disseny
que les persones solen tenir algun tipus de forma de representar les dades,
ja sigui una llista d'amics, si aquesta és la informació del mapa
o alguna cosa així, o una llista de tasques pendents.
Algunes persones tenen en general una forma de representació de la informació,
i en general han de mantenir aquest tipus d'informació en sincronia
entre el que l'usuari veu en algun tipus de vista,
parlant en termes de com el controlador de vista de model que vas veure a la conferència,
i llavors el model, que en aquest cas és aquesta matriu de JavaScript.
Marc ens donen una manera de resoldre aquest problema.
Ara donem una ullada a l'aplicació d'aquesta llista de tasques
en un marc anomenat angularjs.
Això és tot. Observi que encaixa en una diapositiva.
Jo no he de desplaçar-se a l'esquerra ia la dreta.
Això probablement no és una gran raó per recomanar l'ús d'un marc,
però noti que estic sempre accés als elements HTML individuals aquí?
Estic cada vegada va en el DOM?
¿Veu vostè alguna document.getElementById o alguna cosa així?
No, això va ser.
>> Angular ens ajuda a mantenir el DOM i JavaScript nostra representació d'alguna cosa
tipus de sincronitzats, pel que si no està a l'arxiu js,
si no hi ha forma de programació per arribar a tot aquest contingut HTML
Del JavaScript com estem tenint això en sincronització?
Si no està a l'arxiu js., Ha d'estar en HTML, oi?
Aquesta és la nova versió de l'arxiu HTML,
i notem que hem afegit molt aquí.
Observeu que hi ha aquests nous atributs que diuen ng-clic i ng-repeat.
L'enfocament d'angular a la solució d'aquest problema de les dificultats en el disseny
és fer bàsicament HTML molt més potent.
Angular és una forma de permetre que vostè faci HTML una mica més expressiu.
Per exemple, jo puc dir que em vaig a lligar o enllaçar aquest quadre de text
a una variable dins del meu codi JavaScript Angular.
Aquest ng-model fa precisament això.
Que bàsicament diu que l'element dins d'aquesta caixa de text,
simplement associar això amb el new_todo_description variables
dins del codi JavaScript.
Això és molt poderós perquè no m'he d'anar expressament a
el DOM per obtenir aquesta informació.
No he de dir document.getElementById.
Jo no he de fer servir jQueries com accés DOM.
Puc associar-lo a una variable, i després quan canvi la variable
dins de JavaScript es tracta de mantenir-se en sintonia amb el codi HTML,
el que simplifica el procés d'haver d'anar i venir entre els dos.
Això té sentit?
>> I fixin-se que no hi ha codi d'accés HTML.
Hem aconseguit fer HTML més potent,
i ara, per exemple, podem fer coses com aquesta,
com quan fa clic a aquest, cridar a aquesta funció en l'àmbit de todos.js,
i podríem fer això abans, però hi ha altres coses, com aquest ng-model,
i observar aquest ng-repeat.
Què pensa vostè que això fa?
Aquí està la nostra llista desordenada d'abans.
Tenim les etiquetes ul,
però sento que he renderitzat aquesta llista dins del codi JavaScript?
No estic sempre fent explícita aquesta llista.
Com funciona això?
Bé, la forma angular aconsegueix això és el que s'anomena un repetidor.
Bàsicament diu que vull imprimir aquest HTML
per a totes les tasques pendents en l'interior del meu Tots matriu.
Dins todos.jr hi ha una varietat de Tots aquí,
i això li dirà anar angular a través de la matriu, i per cada element que es veu
Vull imprimir aquest HTML.
Això és una mica impressionant, ja que només pot fer això
sense haver d'escriure un bucle,
que per obtenir una llista de tasques que tenia només 30 línies de codi
pot no ser el més beneficiós,
però si vostè té un projecte gran, això podria ser molt convenient.
>> Aquesta és una solució a aquest problema, fent més potent HTML,
i que ens permet seguir amb JavaScript i HTML en sincronia.
Hi ha altres maneres possibles per resoldre aquest problema,
i no cada marc ho fa.
No tot marc treballa en aquesta línia.
Alguns marcs tenen diferents enfocaments,
i és possible que vostè gaudeixi de codificació en un marc sobre l'altre.
Fem una ullada a un més.
Aquesta és la llista de coses per fer codificat en un marc anomenat Backbone.
Vaig a passar per això ràpidament.
Vaig a començar amb el codi HTML abans d'anar-hi.
Un segon.
Començant amb l'HTML, com s'observa, l'HTML és molt similar
al que era abans, així que no hi ha molt de nou en aquest front.
Però la nostra js és una mica diferent.
Backbone tipus de té aquesta idea, o es basa en la idea
que molt del que fem amb, per exemple, els projectes de JavaScript
és pensar en models i col · leccions d'aquests models.
Això podria ser, per exemple, una foto i col · leccions de fotografies,
o la idea d'un amic i col · leccions d'amics.
I sovint, quan estem programant aplicacions JavaScript
anem a resoldre de representar la idea de tenir un grup d'amics
d'alguna manera en JavaScript, i Backbone ens dóna aquesta capa
a la part superior de les matrius i els objectes existents de JavaScript
per fer les coses més poderoses amb que més fàcilment.
>> Aquí he definit un model per-do,
i vostè no ha de preocupar massa sobre la sintaxi,
però es va adonar que el que és una de les propietats d'aquesta?
Ofereix un camp predeterminat.
Backbone em permet especificar ja del pal
tot nou a fer això crec que va a tenir aquests valors predeterminats.
Ara puc personalitzar això, però ser capaç d'especificar els valors predeterminats
és agradable, i és una mica convenient perquè això no és una cosa que és com
inherent a JavaScript, i ara no tinc que explícitament
Tots diuen que els estan incomplets.
El que puc dir de bones a primeres que Tots seran marcats com incompleta.
Cal notar llavors, què és això?
Ara tinc una llista de coses per fer, i això és una col · lecció.
Observeu el camp associat amb el model diu del tot.
Aquesta és la meva manera de dir que la columna vertebral
Jo estaré pensant en una col · lecció d'aquests Tots individuals.
Aquesta és bàsicament l'estructura del model per al meu programa.
Aquí tinc aquesta idea d'una col · lecció,
i, bàsicament, els elements continguts en aquesta col · lecció de tots van a ser aquestes de Tots,
i que és molt natural en aquest sentit
perquè jo sí que tinc Tots, i els tinc en una col · lecció.
>> Anem a veure una mica més d'això.
Aquí és una vista Backbone.
L'altra cosa que Backbone diu és que
molts dels models que vostè està pensant, o fins i tot col · leccions
hauran de tenir alguna manera de què es mostra.
Hem de fer que la llista de coses per fer,
i ¿no seria bo si poguéssim proveir per a cada model
o associar a cada model d'aquest punt de vista
que ens permet Suposo que connectar els dos junts?
Mentre que abans havíem de fer servir un bucle que s'executi a través de
totes les tasques pendents en la llista i després imprimir aquí
que bàsicament podem connectar-lo amb aquest model.
Aquesta és una vista de tasques pendents.
Això s'associa amb el TOT hem constatat abans.
Ara cada TOT és mostrable o renderizable
per aquest punt de vista de tasques pendents.
Observeu alguns dels camps.
Què creus que és això tagName, tagName: li?
Recordeu que des d'abans, quan volíem fer un TOT
caldria vincular explícitament Tots els nostres amb aquesta etiqueta li.
Ara estem dient que quan això del tot es va a viure
va a estar dins d'una etiqueta li.
I ara també estem associant esdeveniments amb els nostres Tots.
>> Cada TOT té aquest esdeveniment.
Si fa clic a més o menys el botó de canvi, això és el que estic dient no,
llavors bàsicament marcar el del tot com el contrari del que era abans
i després tornar a fer la sol · licitud.
Això és una mica similar al codi anterior.
Recordeu que quan vam marcar com aviat el contrari o-
i llavors tornen a representar ell.
Però noti ara aquest esdeveniment que solia ser una cosa que estava en el codi HTML.
Estava assegut allà.
El botó tenia un clic.
En fer clic al botó, és com que fa les coses a
establir que TOT sigui incompleta.
Aquí ens hem associat l'esdeveniment de fer clic en aquest botó d'activació
i invertir ja sigui dins o fora d'aquesta opinió.
>> Aquesta és una bona manera de crear aquest esdeveniment perquè sigui molt estretament units
aquest punt de vista, pel que conta d'això una vegada més.
Tinc aquest mètode render, i no hem de passar pels detalls.
És una cosa semblant al que teníem abans,
però noto que no estic recorrent res.
No vaig a imprimir aquesta etiqueta ul que és una espècie de dir que vaig a imprimir tots els elements.
Estic proporcionant la funcionalitat per a la prestació d'aquest element de tasca.
Aquest és un concepte molt poderós perquè en el fons
la nostra llista de tasques consisteix en totes aquestes Tots, i si podem especificar bàsicament
la manera de fer que un dels Tots
llavors podem tenir la nostra poderosa xarxa troncal per se rendeixi tot el Tots
cridant al mètode render a Tots els individuals.
Aquest és un concepte que és útil aquí.
Ara, una bona pregunta és com es aquesta aplicació està posant junts?
Com que tenim la capacitat de fer un TOT,
però com fem perquè la idea de múltiples Tots?
>> Anem a fer una ullada a això.
Aquesta és l'última part.
Observeu que tenim una vista de la llista de coses per fer aquí,
i compta també és un punt de vista.
I per anar més d'un parell de coses,
aquest mètode initialize serà cridat quan vam crear primer aquesta llista de coses per fer.
Com es pot veure, és com la creació de la llista de tasques pendents i associar-lo amb aquesta opinió.
I després he afegit les funcions aquí, així que bàsicament quan s'agrega un element-
això és similar al mètode addItem vam veure abans-
Vaig a crear un objecte nou del tot, i noti realment estic trucant
aquest nou mètode del tot, de manera que aquest és proporcionat per Backbone,
i puc passar les meves propietats aquí.
I ara cada TOT que crec amb això aconseguir que la funcionalitat que hem vist abans.
Noti que estic netejant el quadre de text abans d'un petit petit detall-
i estic afegint aquesta col · lecció.
>> Això gairebé sembla estrany perquè abans només havíem de fer això todos.push,
i després vam acabar, i això pot semblar més complicat per a aquest projecte en particular,
i és possible que Backbone o fins i tot angular o qualsevol altre marc
no s'adapta al seu projecte particular, però crec que és important pensar en
el que això significa en una escala més gran per a projectes de més envergadura,
perquè si tinguéssim un projecte més ampli en el que representàvem
alguna col · lecció realment complex, una mica més profund que una simple llista de coses per fer,
diguem que una llista d'amics o alguna cosa així, això podria ser útil
perquè podríem organitzar el nostre codi d'una manera molt convenient,
d'una manera que faria més fàcil per a algú més
que volia recollir a un projecte per construir.
Es pot veure que això proporciona una gran quantitat d'estructura.
I després et dic fer en aquest addItem.
Render, com es pot veure, i vostè no ha d'aprofitar aquesta sintaxi,
però en el fons de cada model que va a cridar al mètode render individual.
Això és una espècie d'on ve.
Anem a especificar com representar els Tots individuals,
i després anem a enganxar-les en el seu conjunt.
No obstant això, això proporciona una forma d'abstracció,
perquè podria canviar la forma en què decideixo fer de Tots individuals,
i jo no hauria de canviar alguna d'aquest codi.
Això és una mena de fresc.
>> Algú té alguna pregunta sobre els marcs de JavaScript?
[Pregunta inaudible Estudiant]
Sí, és clar, això és una gran pregunta.
La pregunta era com m'incloc els marcs?
La majoria dels frameworks de JavaScript són bàsicament js
que es poden incloure en la part superior del seu codi.
Observeu que a la part de cap de la meva HTML tinc totes aquestes etiquetes de script,
i l'etiqueta de final de l'escriptura és el codi que hem escrit.
I llavors els codis de marc 3 són també etiquetes de script.
Estic inclusió del que s'anomena un CDN,
que em permet entenc d'una altra persona en aquest moment
però cada marc té aquesta-es pot gairebé trobar el contingut
per a una biblioteca de JavaScript en particular disponible en alguns CDN o alguna cosa així,
i llavors vostè pot incloure les següents etiquetes de script.
Això té sentit?
Genial.
>> Aquests son 2 enfocaments diferents.
Aquests no són els únics enfocaments per resoldre aquest problema.
Hi ha moltes coses diferents que
algú podria fer, i hi ha molts marcs per aquí.
Angulars i Backbone no compten tota la història.
Bona sort amb els seus projectes finals, i moltes gràcies.
[CS50.TV]