[Powered by Google Translate] [Seminario] [frameworks JavaScript: Por que e como] [Kevin Schmid] [Harvard University] [É dicir CS50.] [CS50.TV] 

Ola, persoal. Benvido ao seminario Frameworks Javascript. O meu nome é Kevin, e hoxe eu vou estar falando de frameworks JavaScript, eo obxectivo deste seminario é non leva-lo a, digamos, dominar un marco especial, por si só pero para darlle unha ampla introdución a un par de cadros e amosar por que ía querer empregar un framework. 

Antes de facelo, eu vou dar un pouco de fondo en JavaScript, e despois imos levalo de alí. Imos comezar por aplicar unha lista de cousas a facer. Aquí está a nosa lista de tarefas para hoxe. É medio divertido. Temos que implementar unha lista de cousas a facer en JavaScript. Isto é o que vai parecer, para que o noso primeiro obxectivo. Non estamos indo a usar unha estrutura para facelo. Imos ao código JavaScript e obter a lista de cousas a facer para o traballo. Entón imos mellorar o deseño sen usar un framework. Nós imos discutir moitas cousas que podemos facer só só con JavaScript para facer a nosa lista de tarefas algo máis ben deseñado. Entón imos xogar nalgún jQuery, e logo, imos ollar para a mesma lista de cousas a facer, só aplicada en diferentes contextos, e nós imos discutir  os pros e contras ao longo do camiño. 

Imos comezar a aplicar esta lista de cousas a facer. Digamos que estamos dando este HTML. Vou facelo un pouco menor. Como verás, eu teño un pouco de cabeceira que di Todo e unha pequena caixa onde eu poida entrar unha descrición dun TODO e logo, un novo botón de punto, entón imos tentar entrar nun novo TODO a esta lista. Bótalle un seminario de cadros JavaScript, e eu son a bater novo elemento. Recibe este aviso JavaScript que se aplicar min. Temos que implementar lo. Imos comprobar o código para iso, tanto o HTML e JavaScript. Aquí está o noso HTML. Como podes ver aquí, aquí é o noso pequeno cabeceira Todos. Que era aquela cousa negra na parte superior, e logo, temos a bandexa de entrada co espazo reservado, e logo, hai un certo atributo deste botón que chama esa función addtodo. Alguén quere adiviñar que é o que significa o click? [Student resposta inaudível] Bo, sobre o clic é como unha especie de evento, como premer o rato é só un evento, eo que estamos facendo E nós estamos amarre o evento de premer este botón para realizar esta función. Addtodo é este manipulador de eventos para premer nese botón. 

Como verás, cando clic no botón novo elemento o evento click on é despedido, e esta función é chamada. Vexamos función. Como verás, aquí está o meu código JavaScript ata agora. O que eu teño na parte superior é unha estrutura de datos global para a miña lista de cousas a facer. Parece un array. É só un conxunto baleiro. E entón eu teño a función addtodo que vimos anteriormente, ea única liña de código no que hai esta alerta. El alerta aplicar min, e entón eu teño dúas tarefas na man. Teño que engadir o TODO para que a estrutura de datos global, e entón eu quero chamar a lista de cousas a facer. Nada moi extravagante aínda, pero JavaScript pode estar familiarizado con, entón eu vou ir a modo e revisar os fundamentos de JavaScript dese xeito. 

Imos dar a este un tiro. Digamos que o usuario escribe algo na caixa. Eu escriba algo aquí, texto. Como podo clasificar de acceso que o texto mediante JavaScript? Lembre-se de que o JavaScript, unha das súas características fundamentais é que nos dá este acceso programático ao DOM. Ela nos permite acceder aos elementos e as súas propiedades desta HTML real. A forma de facelo co bare ósos JavaScript é que podemos realmente usar unha función JavaScript chamada GetElementById. Quero gardar o texto que está escrito alí nalgunha variable, entón eu vou dicir unha nova variable chamada new_todo, e eu vou incorporarse este elemento. Esta é unha función,. GetElementById. E agora eu estou a recibir un elemento por ID, entón eu teño do ID de que a caixa de texto, entón eu dei-lle o new_todo_description ID. É así que eu estou indo a obter un elemento. Ese é o meu argumento para esta función, para especificar cal ID de conseguir. E iso é un elemento HTML, e ten propiedades. Xa viu iso. Son atributos. O atributo do elemento de texto que almacena a entrada do usuario chámase valor. Salvei o valor da caixa de texto que agora nesta variable chamada new_todo. Agora eu teño acceso programático a esta variable, o que é legal porque agora o que podo facer é que podo engadir lo á miña lista de cousas a facer. 

A forma na que fariamos isto en JavaScript e non se preocupe se non está familiarizado con iso, pero só pasando por iso é todos.push porque ese é o nome da miña estrutura de datos global, aquí enriba, e eu estou indo a empurrar new_todo. Isto é óptimo, porque agora eu engade ao meu JavaScript representación da lista de cousas a facer. Pero agora, como fago para obtelo de volta ao HTML? Eu teño que atopar unha forma de clasificar de empurra-lo de volta. Noutras palabras, eu medio que teño que aproveitar iso. O que imos facer é que imos deseñar a lista de cousas a facer. Necesito actualizar outro HTML na páxina, e como podes ver, eu deixei a barra pouco aquí, este divisor de páxina cuxo ID é de todos, e eu vou poñer a lista de cousas a facer alí. Primeiro vou limpa-lo, porque, por exemplo, había unha vella lista de cousas a facer alí. Estou recibindo este elemento por ID de novo, e eu estou accedendo HTML interior dese elemento, e eu vou limpar isto. Se deixamos este código como está, nos veriamos un nada en branco alí, e agora quero comezar a prestar a miña nova lista de cousas a facer. Estou basicamente vai acabar coa miña lista de cousas a facer. 

Agora o interior HTML interno que todos div está totalmente clara, e agora eu teño para comezar a engadir á miña lista. O primeiro que quero é volver a engadir a etiqueta de lista non ordenada, que basicamente indica que este é o principio dunha lista ordenada. Agora, para cada elemento da miña matriz Todos Quero imprimir lo dentro dese HTML. Quero engadir que ao final da lista. Así como en C, podo usar un loop for, e eu vou comezar a principios da miña lista no elemento 0, e eu estou indo a ir todo o camiño ata a lonxitude da lista. Podemos realmente obter a lonxitude dunha matriz en JavaScript usando a propiedade length. Basicamente, eu vou facer algo moi parecido aquí dentro para imprimir este elemento. Podo acceder de novo o div Todos, a propiedade HTML interior que, e eu estou indo a engadir este novo elemento da lista, e que estará rodeado por esta etiqueta li, e eu estou indo a concatenar co operador +, e ese é o elemento i do meu abano de Todos, e entón eu vou pechar esta etiqueta. Agora, para cada elemento, imos engadir unha nova entrada na lista. E entón todo o que realmente cómpre facer é pechar esa marca. Eu só teño pechar este tag desordenadas lista. 

Ter unha idea de como funciona isto? Isto abre a lista enteira. Isto engade elementos individuais da lista Todos da lista, e logo, que pecha a lista enteira, e esta é a miña función addtodo. Eu basicamente comezar por conseguir o TODO do cadro de texto. Debo engadir que, para a matriz de Todos, e entón eu re-analizar a lista de cousas a facer. Agora podo engadir elementos a miña lista. Iso é moi emocionante porque en só algunhas liñas de código temos, basicamente, fixo unha lista de cousas a facer, onde podemos engadir elementos. Grande. Este é un tipo de unha introdución básica á Javascript. Non te preocupes moito coa sintaxe, de momento, pero pensar sobre iso conceptualmente. Tivemos un pouco de HTML. Tivemos unha caixa de texto na páxina que basicamente permitiu que os usuarios introducir un elemento para-facer para engadir. E entón usan JavaScript para buscar que todo de que a caixa de texto. Nós almacenado que dentro dunha matriz JavaScript, que é basicamente como nosa representación programática desta lista de cousas a facer, e, entón, imprimiu. É dicir todos.js. 

Iso é legal, pero como podemos levar isto adiante? Ben, como podes ver, isto non é como unha completa lista de cousas a facer. Por exemplo, eu non podo anotar calquera destes elementos como incompleta, como se eu quería priorizar os elementos ou eliminar elementos. Isto é bo, pero podemos levar isto adiante. Non vou falar moito sobre a adición de recursos extra, pero podemos levar isto adiante. Imos falar sobre a adición de máis un recurso para esta lista de cousas a facer, que será poder comprobar un individuo a facer punto e telo ser untado, entón, basicamente dicindo que eu fixen iso. Imos dar un ollo a un código que pode conseguir isto. Teña en conta o que fixen na parte superior é que eu engade unha nova matriz global chamado completa. Estou basicamente usar isto para almacenar os elementos da lista de cousas a facer están completos ou non. Esta é unha forma de facelo. Se eu ollar para a posta en marcha deste, o display, basicamente, se eu escribir un todo e eu premer este botón de alternancia cruza a fóra, de xeito que cada elemento desta lista ten ou unha completa ou estado incompleto, e eu estou usando outro array para representar isto. 

Basicamente, a todos os quefaceres do array Todos hai un elemento na matriz completa que basicamente indica se é completo ou non. Tiven que facer cambios moi mínimas a este código, iso aquí é a nosa función addtodo. Lembra que aquí estou empurrando-o para a matriz, e entón eu estou empurrando a 0 para esa matriz completa, basicamente, en paralelo co novo impulso TODO dicir Estou engadindo este elemento, e é xunto con este valor, o que significa que é incompleto. E entón eu estou redeseñado a lista de cousas a facer. Agora noten que eu engade esa función drawTodoList. Iso leva unha morea de código que tiñamos antes, basicamente limpa o cadro e, a continuación, chama a nova lista de cousas a facer. Pero teña en conta que dentro deste loop que estamos facendo un pouco máis agora. Estamos basicamente comprobar se o elemento correspondente ao TODO om aquí está completa, e nós estamos comportando de xeito diferente neses dous casos. Se é completa, estamos engadindo este comando del, que é basicamente a forma que pode comezar a folga a través de efecto riscando na lista de cousas a facer, se é completa, e se non é, non imos inclui-la. E así, este tipo de coida diso, 

e esa é unha maneira de conseguir isto. E, a continuación, entender cando o usuario fai clic nun deses que cambiar o estado de conclusión do mesmo. Cando o usuario fai clic, imos inverter se foi concluído ou non, e despois imos redesenhá lo. Este tipo de obras. Temos estas funcións que exercen as súas propias tarefas, e iso é bo. ¿Hai algunha cousa que podería facer mellor sobre iso, entón? Teña en conta que temos estas dúas matrices globais. Se este era C, e tivemos dúas matrices que tipo de representadas datos que foi unha especie de relacionados dalgunha forma o que usamos en C para combinar eses dous campos en algo que encapsulado os dous anacos de información? Alguén quere facer unha suxestión? [Student resposta inaudível] 

Exactamente, polo que podería usar algún tipo de estrutura, e se pensas que volta a, digamos, pset 3, lembro que había dicionario, e despois tivemos a palabra Foi no dicionario, e toda a información que foi colocado xunto dentro dunha estrutura de datos. Unha cousa que podo facer con ese código para evitar que estas dúas matrices diferentes para pezas similares de información é que podo combina-los nun obxecto JavaScript. Imos dar un ollo niso. Repare que eu só teño unha matriz na parte superior agora eo que eu teño feito é, e isto é só a sintaxe JavaScript para tipo de a creación dunha versión literal dun obxecto, e ter en conta que hai dúas propiedades, polo que temos o conxunto, e el é mantido en conxunto con si é completo ou incompleto. Este código é moi semellante. Estamos a usar os obxectos Javascript. Este tipo de cousas mellores. Como agora, todos eses campos de información relacionadas son mantidos xuntos. Cando imos para imprimir lo, podemos acceder aos campos. 

Observe como estamos facendo Todos [i]. Completo no canto de comprobar o conxunto completo separado e entender cando queremos obter a secuencia de tarefas que estamos recibindo a propiedade de cousas a facer dese total, de xeito que este tipo de ten sentido, xa que cada elemento ten estas propiedades intrínsecas sobre o tema. Ten un todo, e ten se é completa ou non. Non hai moitos cambios funcionalmente, acaba de engadir un pouco máis para o código. Esta é unha mellora nalgunhas frontes, non? Quero dicir, nós consignado o deseño un pouco. Agora temos obxectos para encapsular basicamente eses datos. Hai algo máis que podemos facer de aquí en termos de JavaScript? Como aviso de que este código aquí para obter o HTML interior dunha div é un pouco, creo, por moito tempo. Hai document.getElementById ("todos"). InnerHTML. Unha cousa que podería facer para facer este código mirar un pouco máis agradable entón eu non tería que manter o desprazamento esquerda e dereita, adiante e cara atrás, é que eu podería usar unha biblioteca como jQuery. 

Imos comprobar Seminario 2, e este é o mesmo código, mais é feito con jQuery. Pode non estar moi familiarizado con jQuery, pero só sei que jQuery é unha especie de biblioteca de JavaScript que fai máis doado facer cousas como acceder os elementos individuais do DOM. Aquí, en vez de dicir document.getElementById ("todos"). InnerHTML Podo usar a forma máis limpa en jQuery, que é só para usar selectores. Como verás, este código fixo un pouco máis limpo, moi similar funcionalmente, pero esa é a idea. Nós vimos un par de cousas, ata agora, entón comezamos coa implementación JavaScript só cru. Nós engadimos novas funcionalidades e mostrou como podemos melloralo lo só o que temos en JavaScript. 

Alguén ve algunha dificultade con este proxecto? É dicir, eu creo ou non, necesariamente, dificultades, pero imos dicir non estabamos facendo un proxecto de lista de cousas a facer, e mañá decidimos queriamos facer unha lista da compra ou un proxecto de lista da compra. Moitas destas características son moi semellantes. Unha morea de cousas que queremos saír de JavaScript son moi comúns, e isto reforza a necesidade de calquera tipo de medio de facer isto máis doado de facer. Tiven que construír todo isto acceso HTML, todo isto de acceso DOM, como eu vou para representar a lista de cousas a facer con este modelo. E repare que eu son responsable como o creador JavaScript para manter o código HTML e JavaScript que eu teño en sincronía. Nada feito automaticamente esa representación JavaScript ou a lista de cousas a facer son empurrados para HTML. Nada forzado que, excepto para min. Eu tiña que escribir o sorteo de cousas a facer a función de lista. E iso non pode ser, quero dicir, é razoable facelo, pero pode ser tedioso ás veces. Se tes un proxecto maior, que podería ser difícil. 

Frameworks, un dos propósitos de frameworks é simplificar este proceso e tipo de factor fóra estes common-Creo que podería dicir-patróns de deseño que a xente xeralmente teñen algún tipo de forma de representación de datos, se isto é unha lista de amigos, se isto é información do mapa ou algo así ou unha lista de cousas a facer. Algunhas persoas teñen xeralmente unha forma de representación da información, e eles xeralmente teñen que manter este tipo de información en sincronía entre o que o usuario ve nalgún tipo de punto de vista, falando en termos de como o controlador de vista do modelo que viu na aula, e logo, o modelo, o que, neste caso, esta matriz é JavaScript. Frameworks darnos unha forma de resolver este problema. Agora imos dar un ollo na implantación da lista de cousas a facer nun cadro chamado angularjs. É iso. Teña en conta que encaixa nunha foto. Non teño a rodar cara á esquerda e á dereita. Iso probablemente non é un gran motivo para recomendar o uso dun cadro, pero aviso que estou sempre accedendo elementos HTML individuais aquí? Estou sempre indo ao DOM? Ve algunha document.getElementById ou algo así? Non, iso é pasado. 

Angular nos axuda a manter o DOM e Javascript nosa representación de algo tipo de sincronizada, por iso, se non é o ficheiro js, se non hai ningunha forma de programación empezando a todo o contido HTML do JavaScript como imos manter isto en sincronía? Se non está no ficheiro js., El ten que ser en HTML, non? Esta é a nova versión do ficheiro HTML, e ter en conta que nós engadimos unha morea aquí. Teña en conta que hai eses novos atributos que din NG-click e ng-repeat. O enfoque da Angular para solucionar este problema de dificultades no deseño é, basicamente, facer HTML moito máis poderoso. Angular é unha forma de permitir que faga HTML algo máis expresivo. Por exemplo, eu podo dicir que eu vou amarre ou conectar esta caixa de texto para unha variable dentro do meu código JavaScript Angular. Este modelo NG fai exactamente iso. Que basicamente di que o interior deste cadro de texto do elemento, só asociar iso co new_todo_description variable dentro do código JavaScript. Isto é moi poderoso, porque eu non teño que ir explicitamente o DOM para obter esta información. Non teño que dicir document.getElementById. Non teño de utilizar jQueries como acceso á DOM. Podo asocia-lo a unha variable, e entón cando eu cambiar esa variable dentro Javascript é mantido en sincronía co HTML, para que simplifica o proceso de ter que ir e volver entre os dous. Será que isto ten sentido? 

E noten que non hai código de acceso HTML. Acaba fixo HTML máis poderoso, e agora, por exemplo, podemos facer cousas como esta, como cando fai clic sobre isto, chamar esa función no ámbito da todos.js, e nós poderiamos facelo antes, pero hai outras cousas, como esta NG-modelo, e entender iso NG-repeat. ¿Que pensas que iso fai? Aquí está a nosa lista non ordenada de antes. Temos as etiquetas ul, pero estou sempre prestando esta lista dentro do código JavaScript? Non estou sempre prestando explícitamente esta lista. Como funciona isto? Ben, a forma angular fai iso por iso chámase repetidor. Basicamente, este di que quero imprimir este HTML para todas as tarefas dentro do meu abano de Todos. Dentro todos.jr existe unha matriz Todos aquí, e iso vai contar go Angular través desa matriz e para cada elemento que ve Eu quero que imprimir este HTML. Este é o tipo de incrible, porque eu só podo facelo sen ter que escribir un loop for, que para unha lista de cousas a facer que era de só 30 liñas de código Pode non ser o máis vantaxoso, pero se ten un proxecto grande, iso pode ser moi cómodo. 

Esta é unha solución a este problema, facendo HTML máis poderoso, e que nos permite manter JavaScript e HTML en sincronía. Hai outras formas posibles para solucionar este problema, e non cada framework fai iso. Non todo o cadro funciona ao longo destas liñas. Algúns cadros teñen enfoques distintos, e pode considerar que desexa codificación nun cadro sobre o outro. Vexamos un máis. Esta é a lista de cousas a facer codificado nun cadro chamado Backbone. Vou pasar por iso rapidamente. Vou comezar co HTML antes de irmos para alí. Un segundo. Comezando co HTML, como entende, o noso HTML é moi semellante ao que era antes, así que non é moi novo nesa fronte. Pero o noso arquivo js é un pouco diferente. Backbone medio que ten esa idea, ou se basea na idea que moito do que facemos con, digamos, os nosos proxectos de JavaScript é pensar sobre os modelos e coleccións destes modelos. Isto podería ser, por exemplo, unha foto e coleccións de fotos ou a idea de correo e coleccións de amigos. E moitas veces cando estamos programando aplicacións JavaScript nós imos resolver de representar a idea de ter unha colección de amigos de algunha maneira en JavaScript, e Backbone dános esa capa encima de matrices e obxectos existentes do JavaScript para facer cousas máis poderosas que máis facilmente. 

Aquí define un modelo de tarefas, e non ten que se preocupar moito coa sintaxe, de ter en conta que o que é unha das propiedades deste? Ten un campo estándar. Backbone permíteme xa para especificar fóra do pau calquera novo para-facer que crear terá eses patróns. Agora podo personalizar iso, pero ser capaz de especificar as normas é bo, e é unha especie de cómodo, porque iso non é algo que é como inherente JavaScript, e agora eu non teño que explicitamente dicir que os Todos están incompletos. Podo dicir pronto de cara que todos van ser marcadas como incompletas. Observe entón o que é iso? Agora eu teño unha lista de cousas a facer, e iso é unha colección. Teña en conta o campo asociado que di que modelo do todo. Esta é a miña forma de dicir que Backbone Eu vou estar a pensar en unha colección deses Todos individuais. Esta é basicamente a estrutura do modelo para o meu programa. Aquí eu teño esa idea dunha colección, e, basicamente, os elementos contidos nesta colección son todos os que van ser estes Todos, e que é moi natural, neste sentido porque eu teño todos, e eu te-los nunha colección. 

Imos mirar un pouco máis diso. Aquí está unha visión Backbone. A outra cousa que di é que Backbone unha gran cantidade de modelos que está a pensar sobre coleccións ou mesmo van ter que ter algunha forma de ser exhibido. Necesitamos facer esa lista de cousas a facer, e non sería bo se puidésemos proporcionar para cada modelo ou asociarse con cada modelo este punto de vista que nos permite Creo que conectar os dous xuntos? Considerando que, antes tivemos que usar un loop for que atravesaría as tarefas na nosa lista e, a continuación, imprimir-lo aquí podemos basicamente conecta-lo con este modelo. Esta é unha visión de cousas a facer. Isto está asociado co TODO atopamos anteriormente. Agora, as tarefas é exibível ou renderizável por este punto de vista a facer. Teña en conta algúns dos campos. ¿Que pensas que iso é tagName, tagName: li? Lembre-se de antes cando queriamos facer un TODO teriamos que vincular explicitamente nosos Todos con esta etiqueta li. Agora estamos dicindo que onde esta TODO vai vivir estará dentro dunha etiqueta li. E agora tamén estamos asociando eventos con nosos Todos. 

Cada TODO ten este evento. Se fai clic practicamente o botón de alternancia, que é o que eu estou dicindo que, entón basicamente marcar o todo como o contrario do que era antes e entón re-facer a aplicación. Esta é unha especie de similar ao código antes. Lembra-se cando marcou como quere o contrario, ou- e, entón, re-procesado-lo. Pero teña en conta agora este evento adoitaba ser unha cousa que estaba no HTML. Estaba sentado alí. O botón tiña un clic. Cando fai clic no botón, fai o tipo de material para configurar que todo ser incompleto. Aquí temos asociado o evento de premer o botón de alternancia e reversión sexa activado ou desactivado con esa visión. 

Esta é unha boa forma de crear este evento para que sexa moi ben grazas este punto de vista, e así entender iso máis. Teño a rede renderse, e non temos para pasar os detalles. É medio parecido co que tiñamos antes, mais repare que eu non estou Looping través de calquera cousa. Non estou a impresión de que etiqueta UL que é unha especie de dicir que vou imprimir os elementos. Eu estou ofrecendo a funcionalidade para facer este un elemento de tarefa. Este é un concepto moi poderoso, porque, basicamente, nosa lista de cousas a facer consta de todos estes Todos, e se podemos basicamente especificar o modo para procesar un deses Todos entón podemos ter a nosa poderosa backbone per facer toda Todos chamando o método render nas Todos individuais. Este é un concepto que é útil aquí. Agora, unha boa pregunta é como é que esta aplicación a ser colocados xuntos? Porque temos a posibilidade de facer un todo, pero como é que imos estar coa idea de múltiples Todos? 

Imos dar un ollo niso. Esta é a última parte. Teña en conta que temos unha visión de lista de cousas a facer aquí, e teña en conta tamén é un punto de vista. E para pasar por riba de algunhas cousas, este método initialize chamarase cando nos crear esta lista de cousas a facer. Como verás, é como crear a lista de cousas a facer e asocia-lo con esa visión. E entón eu engade as funcións aquí, entón, basicamente, cando engadir un elemento- Isto é semellante ao método addItem se viu antes, Vou crear un novo obxecto todo, e ter en conta que eu realmente estou chamando este novo método todo, de forma que este é fornecido pola Backbone, e podo pasar miñas propiedades aquí. E agora as tarefas que se crea mediante este vai ter esa función que xa vimos antes. Repare que eu estou limpando o cadro de texto antes dun pequeno detalle pequeno- e entón eu estou engadindo esta colección. 

Isto case parece raro, porque antes nós só tivemos que facelo todos.push, e despois de que se fixeron, e isto pode parecer máis complicado para este proxecto específico, e pode considerar que Backbone ou mesmo angular ou calquera outra estrutura non axeitado ao seu proxecto particular, pero eu creo que é importante pensar sobre o que iso significa en maior escala para proxectos máis grandes, porque se tivésemos un proxecto grande onde estabamos representando unha colección realmente complexo, algo máis profundo que unha lista de cousas a facer, digamos que unha lista de amigos, ou algo así, isto podería vir a cadra porque poderiamos organizar noso código dun xeito moi cómodo, dun xeito que sería máis doado para alguén que quería coller un proxecto para construír encima. Podes ver que este ofrece unha gran cantidade de estrutura. E entón eu estou chamando facer este addItem. Render, como pode ver, e non ten que coller esta sintaxe completa, pero, basicamente, para cada modelo que vai chamar o método render individual. Isto é unha especie de onde isto vén. Imos só especificar como renderizar Todos os individuais, e logo, imos cola-los en conxunto, coma un todo. Pero iso proporciona unha forma de abstracción, por que eu podería cambiar a forma que eu decidir facer Todos os individuais, e eu non tería que cambiar un código. Iso é legal. 

Alguén ten algunha dúbida sobre frameworks JavaScript? [Student pregunta inaudível] Ah, con certeza, esta é unha boa pregunta. A cuestión era como se eu incluír os cadros? A maioría dos frameworks JavaScript son basicamente só js que pode incluír na parte superior do seu código. Observe na parte da cabeza do meu HTML teño todas estas etiquetas de script, ea marca final de script é o código que escribiu. E entón os tres códigos de marco son só tamén etiquetas de script. Estou incluíndo los de que se chama CDN, o que me permite facelo de outra persoa neste momento pero cada cadro ten esa, pode moi ben atopar o contido para unha biblioteca JavaScript especial dispoñible nalgúns CDN ou algo parecido, e entón pode incluír estas etiquetas de script. Será que isto ten sentido? Legal. 

Esas son dous enfoques distintos. Estas non son as únicas propostas para solucionar este problema. Hai moitas cousas distintas que alguén podería facer, e hai moitos cadros por aí. Angular e Backbone non contan toda a historia. Boa sorte con proxectos finais, e moitas grazas. [CS50.TV]