Traté de entender la utilidad de backbone.js desde su sitio http://documentcloud.github.com/backbone, pero todavía no pude averiguar mucho.

¿Alguien puede ayudarme explicando cómo funciona y cómo podría ser de ayuda en la escritura de mejor JavaScript?

  • Es un marco de MVC. Se alienta a resumen de sus datos a los modelos y su manipulación del árbol DOM en las vistas y se unen los dos juntos, el uso de eventos.
  • ¿Cómo puede un «ver» la gestión de eventos en el contexto de la MVC? Esto es lo que backbonejs.org las reclamaciones en su introducción.
  • Vale la pena aprender. Tuve un tiempo difícil empezar, pero después de conseguir más de un par de jorobas en la curva de aprendizaje es realmente no es demasiado duro. Empezar con la Bodega de demostración.
  • En el contexto de la columna vertebral, a la vista de tipo de duplica como un controlador. Se escucha de eventos DOM y las arrojan a los modelos según corresponda. También está a la escucha de los cambios a sus modelos y colecciones y se regenera el DOM adecuadamente. Columna vertebral es un MV patrón, pero la C es implícita. Si la columna vertebral se Rieles, la plantilla podría ser la vista, y la vista sería el controlador.
  • Pensé que es un framework MVVM como no, de hecho, proporcionan controladores.
  • Y la pregunta de seguimiento, lo que le ocurrió a la columna vertebral? Por qué no se caliente más? Es más fácil que Angulares, para asegurarse de

15 Comentarios

  1. 392

    Backbone.js es básicamente un uber-la luz de un marco que permite a la estructura de su código Javascript en un MVC (Modelo, Vista, Controlador) de la moda donde…

    Modelo es parte de su código que recupera y rellena los datos,

    Ver es la representación de HTML de este modelo (puntos de vista cambian como los modelos de cambio, etc.)

    y opcional Controlador de que en este caso permite guardar el estado de la aplicación de Javascript a través de un hashbang URL, por ejemplo: http://twitter.com/#search?q=backbone.js

    Algunas de las ventajas que he descubierto con la columna vertebral:

    • No más de Javascript Espaguetis: código está organizado y dividido en semánticamente significativas .js archivos que luego se combinan utilizando JAMMIT

    • No más jQuery.data(bla, bla): no hay necesidad de almacenar datos en DOM, almacén de datos en los modelos en vez

    • evento de enlace sólo funciona

    • extremadamente útil Subrayar la utilidad de la biblioteca

    • backbone.js el código está bien documentado y una gran lectura. Abrió mis ojos a un número de código JS técnicas.

    Contras:

    • Me tomó un tiempo para envolver mi cabeza alrededor de ella y averiguar cómo aplicarlo a mi código, pero yo soy un Javascript novato.

    Aquí es un conjunto de gran tutoriales sobre el uso de la columna vertebral con Rieles como el back-end:

    CloudEdit: Un Backbone.js Tutorial con Rails:

    http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

    http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

    p.s. También existe este maravilloso Colección clase que le permite lidiar con las colecciones de modelos y de imitar modelos anidados, pero no quiero confundir a usted desde el principio.

    • otra útil tutorial : coenraets.org/blog/2012/01/…
    • Esta respuesta es errónea. Columna vertebral no es un marco de MVC. Es un MV* marco. La comprensión de los principales componentes es importante. Y no tiene los Controladores. La buena suerte.
    • Sólo para reiterar, la columna vertebral de la biblioteca en sí no tiene los controladores, a pesar de que Jeremy Ashkenas ha dicho que los objetos de Vista del tipo de tomar su lugar, ya que son objetos de JavaScript que propios modelos y shuffle de datos a y desde el front-end. Por supuesto hay nada que te detenga, a partir de la implementación de un Controlador, un Servicio, incluso una Perspective, si lo desean, es sólo de JavaScript.
    • Lo JAMMIT? ɯnɯıuıɯ ʇunoɔ ɹǝʇɔɐɹɐɥɔ
    • RE: «jQuery.de datos(bla, bla): no hay necesidad de almacenar datos en DOM» si mal no recuerdo, jQuery almacena en la memoria de todos modos. es decir, no establece data- atributos a los elementos del DOM. (Así que si tu HTML tenido data- atributos cuando se carga la página, y se cambian, el DOM y la representación en la memoria sería OOS – pero usted debería trabajar con el en-mem datos de todos modos)
  2. 250

    Si usted va a construir interfaces de usuario complejas en el navegador, a continuación, usted probablemente se encontrará finalmente la invención de la mayoría de las piezas que conforman los marcos como Backbone.js y Sammy.js. Así que la pregunta es, estás construyendo algo bastante complicada en el navegador para que el mérito de usarlo (por lo que no inventa lo mismo a ti mismo).

    Si lo que va a construir es algo donde la interfaz de usuario con regularidad de los cambios de cómo se muestra pero no va el servidor para obtener toda la nuevas páginas entonces usted probablemente necesite algo como Backbone.js o Sammy.js. El cardenal ejemplo de algo que parece que es GMail de Google. Si has utilizado alguna vez te aviso que descarga una gran fragmento de HTML, CSS, JavaScript y al primer inicio de sesión y, a continuación, después de que todo lo que sucede en el fondo. Se puede mover entre la lectura de un correo electrónico y procesamiento de la bandeja de entrada y de búsqueda y de vuelta a través de todos ellos, de nuevo sin pedir una nueva página entera a ser prestados.

    Es que un tipo de aplicación que estos marcos de excel a hacer más fácil desarrollar. Sin ellos, ya sea que usted termina glomming junto a un conjunto diverso de bibliotecas individuales para obtener partes de la funcionalidad (por ejemplo, jQuery BARBACOA para la historia de la gestión, Events.js para eventos, etc.) o vas a terminar la construcción de todo usted mismo y tener que mantener y probar todo lo que usted así. En contraste con algo como Backbone.js que tiene miles de personas viendo en Github, cientos de forks donde las personas pueden estar trabajando en ello, y cientos de preguntas ya formuladas y contestadas aquí en Stack Overflow.

    Pero nada de eso es de ninguna importancia si lo que va a construir no es lo suficientemente complicado como para ser digno de la curva de aprendizaje asociada con un marco. Si todavía estás construyendo PHP, Java, o algo más sitios donde el servidor back-end se sigue haciendo todo el trabajo pesado de la construcción de las páginas web a petición del usuario y JavaScript/jQuery es sólo la guinda a ese proceso, que no se va a necesitar o que aún no están listos para Backbone.js.

    • Gracias por la comparación con la de Gmail. Que fue una manera fácil para mí para averiguar yo no tengo que buscar más en esto, para el sitio que estoy desarrollando.
    • +1 para mencionar que vas a terminar de escribir algo como backbone.js a sí mismo, de todos modos si el proyecto se lo suficientemente grande: re Greenspan 10 de la Regla
    • Si estás usando PHP o algo similar sólo como un punto final para un servicio web, entonces usted no está utilizando el 80 o 90% de la tradicional petición/respuesta de la web con estilo de marco de desarrollo. Así que hay una gran diferencia en cómo este tipo de aplicación termina siendo construido frente a la más tradicional de la aplicación web.
    • Gracias Juan Por Tu Respuesta realmente su Alumbramiento
    • El Gmail de referencia realmente me abrió los ojos. Gracias!
    • muchas gracias y creo que en la mayoría de los casos, lo que la gente necesita es común el desarrollo de los sentidos, como PHP/Rails o algo! Aplicar la columna vertebral en un camino áspero es sólo hacer las cosas más difíciles y complicadas

  3. 95

    Columna vertebral es…

    …una muy pequeña biblioteca de componentes que se pueden utilizar para ayudar a organizar el código. Se trata de empaquetar en un único archivo JavaScript. Excluyendo los comentarios, tiene menos de 1000 líneas de real JavaScript. Es sensatez escrito y puedes leer toda la cosa en un par de horas.

    Es un front-end de la biblioteca, la incluye en su página web con una etiqueta de secuencia de comandos. Sólo afecta el navegador, y dice muy poco acerca de su servidor, excepto que idealmente debe exponer una API restful.

    Si usted tiene una API, columna vertebral tiene un par de características útiles que le ayudarán a hablar con él, pero puede utilizar la columna vertebral para agregar interactividad a cualquier página HTML estática.

    Columna vertebral es para…

    …para añadir estructura a JavaScript.

    Debido a que JavaScript no cumplir alguna patrones particulares, aplicaciones JavaScript puede llegar a ser muy complicado muy rápidamente. Cualquiera que haya construido algo más allá de trivial en JavaScript se han topado con preguntas tales como:

    1. Donde puedo almacenar mis datos?
    2. Donde voy a poner mis funciones?
    3. ¿Cómo puedo alambre de mis funciones, por lo que se les llama de una manera sensible y no convertir a los espaguetis?
    4. ¿Cómo puedo hacer que este código mantenible por diferentes desarrolladores?

    Columna vertebral, trata de responder a estas preguntas, dándole:

    • Modelos y Colecciones para ayudarle a representar los datos y colecciones de datos.
    • Puntos de vista, para ayudarle a actualizar su DOM cuando cambian los datos.
    • Un evento del sistema, de modo que los componentes pueden escuchar a los demás. Esto evita que los componentes de acoplados y evita spaghettification.
    • Un conjunto mínimo de sensato convenios, para que los desarrolladores puedan trabajar juntos en la misma base de código.

    Llamamos a esto una MV* patrón. Modelos, Vistas y los extras opcionales.

    Columna vertebral es la luz

    A pesar de las apariencias iniciales, columna vertebral es increíblemente ligero, apenas hace nada en absoluto. Lo que sí hacemos es muy útil.

    Se le da un conjunto de objetos que puede crear, y que puede emitir eventos y escuchar el uno al otro. Usted puede crear un poco de objeto para representar un comentario, por ejemplo, y luego un poco de commentView objeto para representar a la pantalla de los comentarios en un lugar particular en el navegador.

    Usted puede decirle a la commentView para escuchar el comentario y dibujarse cuando los cambios de comentario. Incluso si usted tiene el mismo comentario que aparece en varios lugares en su página de todos estos puntos de vista puede escuchar el mismo comentario de modelo y de permanecer en sincronización.

    Esta manera de componer de código ayuda a evitar que usted se enrede aún si el código fuente es muy grande con muchas interacciones.

    Modelos

    Al comenzar, es común para almacenar los datos en una variable global, o en el DOM como atributos de datos. Ambos tienen problemas. Las variables globales pueden entrar en conflicto unos con otros, y son generalmente de mala forma. Los datos de los atributos almacenados en el DOM sólo pueden ser cadenas, se tendrá que analizar en y sale de nuevo. Es difícil para almacenar cosas como las matrices, las fechas o los objetos, y para analizar los datos de una forma estructurada.

    De datos de atributos de aspecto:

    <p data-username="derek" data-age="42"></p>

    Columna vertebral resuelve esto proporciona un Modelo de objetos para representar los datos y los métodos asociados. Supongamos que tenemos una lista de tareas, se tendría un modelo que representa cada elemento de la lista.

    Cuando el modelo se actualiza, se activa un evento. Usted puede tener una vista atado a ese objeto en particular. La vista de escucha para el modelo de eventos de cambio y re-representa a sí mismo.

    Vistas

    Columna vertebral proporciona con la Vista los objetos que hablar con el DOM. Todas las funciones que manipular el DOM o escuche los eventos DOM, vaya aquí.

    Una Vista normalmente implementa un render de la función que vuelve a recordar toda la vista, o, posiblemente, parte de la vista. No hay obligación de implementar un render de la función, pero es una convención común.

    Cada vista está vinculado a una determinada parte de la DOM, por lo que podría tener un searchFormView, que solo escucha el formulario de búsqueda, y un shoppingCartView, que sólo muestra el carrito de la compra.

    Vistas son también típicamente vinculado a Modelos específicos o Colecciones. Cuando el Modelo se actualiza, se desencadena un evento donde la vista se escucha. La vista podría llame a prestar a dibujarse.

    Del mismo modo, cuando se escribe en un formulario, su punto de vista puede actualizar un modelo de objeto. Cada otro punto de vista escuchando a ese modelo, a continuación, llamar a su propio procesamiento de la función.

    Esto nos da una separación clara de las preocupaciones que mantiene nuestro código limpio y ordenado.

    El render función

    Puede implementar la función de procesamiento en cualquier forma que estimen conveniente. Usted podría poner algo de jQuery en aquí para actualizar el DOM manualmente.

    También podría compilar una plantilla y utilizarla. Una plantilla es simplemente una cadena de caracteres con los puntos de inserción. Pasar una compilación de la función junto con un objeto JSON y obtener un compilado de cadena que se puede insertar en su DOM.

    Colecciones

    Usted también tiene acceso a las colecciones de almacenar listas de modelos, por lo que un todoCollection sería una lista de todo los modelos. Cuando una colección gana o pierde un modelo, los cambios de orden, o un modelo en una colección de actualizaciones, toda la colección activa un evento.

    Una vista puede escuchar una recopilación y actualización de sí mismo cada vez que las actualizaciones de la colección.

    Podría agregar ordenar y filtrar los métodos para su colección, y hacer que se resolverá de forma automática, por ejemplo.

    Y Eventos para Atar Todo Junto

    Tanto como sea posible, los componentes de la aplicación se separan el uno del otro. Se comunican a través de eventos, por lo que un shoppingCartView podría listenTo un shoppingCart colección, y dibujarse cuando el carro está añadido.

    shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

    De curso, otros objetos, pueden también estar a la escucha de la shoppingCart así, y podría hacer otras cosas como la actualización de un total, o guardar el estado en el almacenamiento local.

    • Vistas escuchar a los Modelos y render cuando los cambios en el modelo.
    • Vistas escuchar a las colecciones y hacer una lista (o en una cuadrícula, o un mapa, etc.) cuando un elemento en la colección de los cambios.
    • Modelos de escuchar puntos de vista para que puedan cambiar de estado, tal vez cuando un formulario está editado.

    La disociación de sus objetos como este y comunicándose a través de eventos significa que usted nunca conseguirá ramificados en los nudos, y la adición de nuevos componentes y el comportamiento es fácil. Sus componentes nuevos, solo tienen que escuchar a los otros objetos que ya están en el sistema.

    Convenios

    Código escrito para la columna vertebral sigue un vago conjunto de convenciones. El código de DOM pertenece en una Vista. Colección de código pertenece a una Colección. La lógica de negocio va en un modelo. Otro desarrollador recoger su código será capaz de golpear el suelo corriendo.

    Para resumir

    Columna vertebral es un ligero biblioteca que refuerza la estructura de su código. Los componentes se separan y se comunican a través de los eventos para que no acabe en un desastre. Puede ampliar su base de código fácilmente, simplemente mediante la creación de un nuevo objeto y tener que escuchar sus objetos existentes de forma adecuada. El código es más limpio, más bonito y más fácil de mantener.

    Mi pequeño libro

    Me gustó la columna vertebral tanto que escribí una pequeña intro libro sobre él. Puedes leerlo online aquí: http://nicholasjohnson.com/backbone-book/

    También me rompió el material en un curso corto, que se puede encontrar aquí: http://www.forwardadvance.com/course/backbone. Puede completar el curso en un día.

    • Gracias pandit. Son muy amables.
    • No el punto de Vista técnicamente renderizar una Plantilla, en realidad no ‘sí’? Parece que para jugar en el ‘Presentador’ o ‘Perspective’ papel.
    • Buen punto, aunque la vista puede hacer cualquier cosa que pidan. Esto podría ser una plantilla, algunos arbitraria de jQuery, o incluso algo pequeño como un valor en una forma, o un número en una tarjeta de identificación.
    • Eso es cierto, sobre todo porque es de javascript, los límites son sorta de humo y espejos – si usted desea cruzar de manera inapropiada puede. Cuando la primera vez que supe de la troncal procedentes de más estrictos idiomas & MV(c/*) marcos, que fue uno de los mayores obstáculos al aprendizaje, por ejemplo.
    • Sí, decir que su punto de vista es una forma, y los campos son potencialmente sucia, que en realidad podría ser una opción adecuada para establecer los valores de ciertos campos, en su opinión, sólo usando jQuery. Columna vertebral, siendo pequeño se adaptan a un micro de la solución. Yo personalmente no un código similar a este, pero es posible.
    • realmente ayuda!!
    • Gracias @Antoops, que se complace en ser capaz de ayudar.
    • Impresionante explicación!
    • Estoy muy contento de ser capaz de ayudar a @TastyCode
    • El libro es muy útil. Gracias por escribirlo.
    • gran explicación thums up
    • la mejor explicación que he visto en este sitio . muchas gracias 🙂 🙂
    • Gracias @Mahi, Que bueno que decir!

  4. 14

    Backbone.js es un framework JavaScript que te ayuda a organizar tu código. Es, literalmente, una columna vertebral sobre la cual construir su aplicación. No proporciona widgets (como la interfaz de usuario jQuery o Dojo).

    Que le da un aire moderno conjunto de clases base que se puede ampliar para crear un código JavaScript que las interfaces con Descanso los extremos en su servidor.

    • Yo uso de jQuery y mootools y general javascript fuertemente en mi proyecto. Cómo learing backbone.js me va a ayudar, y lo que es extremo Restful.Lo siento si mi pregunta no tiene sentido.
    • jQuery es principalmente para la Manipulación del árbol DOM, donde como columna vertebral es muy utilizado como un evento impulsado marco, así como también ser utilizado para el modelado de datos.
  5. 14

    JQuery y Mootools son sólo una caja de herramientas con gran cantidad de herramientas de tu proyecto. Columna vertebral actúa como una arquitectura o una columna vertebral para el proyecto en el cual se puede construir una aplicación que utiliza JQuery o Mootools.

    • sí, en realidad es fácil suponer que el nombre es sólo un nombre, por ejemplo ‘jquery’ presumiblemente significa ‘javascript consulta’ que realmente no significan mucho por sí mismo. Pero en este caso, literalmente, significa columna vertebral 🙂
  6. 11

    Tengo que admitir que todas las «ventajas» de la MVC nunca he hecho mi trabajo más fácil, más rápido o mejor. Simplemente hace que todo codeing experiencia más abstracto y consume mucho tiempo. El mantenimiento es una pesadilla cuando se trata de depurar a alguien vigilara de la concepción de lo que la separación de los medios. No sé cuántos de ustedes alguna vez ha tratado de actualizar un FLEX sitio que utiliza Cairngorm como el modelo MVC, pero lo que debería tomar 30 segundos para actualizar a menudo puede llevar más de 2 horas (caza/seguimiento/depuración de simplemente encontrar un solo caso). MVC fue y todavía es, para mí, una «ventaja» que puede material.

    • Honestamente cualquier marco de la estructura puede ser mutilado y deformado por ignorantes a los programadores o programadores que a los que no les importa. Una vez trabajé en una CodeIgniter sitio que debería haber sido muy sencillo y simple de construir. Pero el idiota que he trabajado, está tan acostumbrado a hacer las cosas de los 90 de la manera que él lo cambió a partir de una limpia programación orientada a objetos a un enfoque deformado enfoque del procedimiento dentro de la programación orientada a objetos.
    • También he visto que alguien escriba un sitio desde cero y escribir a la perfección sin necesidad de utilizar cualquier marcos. En una ocasión, esto fue hecho por un relativamente nuevo/verde programador de PHP. Él acaba de pasar a tener una mente racional que funcionó muy adecuada para implementar cosas. El uso de un buen marco sólo va a llegar tan lejos. Mientras que el uso de una excelente programación de las prácticas se llevará a años luz en el futuro.
    • Lo que básicamente significa que el tener una sola clase que maneja los datos de la lógica, la lógica de representación, y la comunicación entre la capa de presentación widgets y almacenamiento de datos/recuperación de código es más fácil de mantener que tener cada uno de estos asuntos manejados por separado clases/objetos. Que es difícil de creer. A menos que pudiera demostrar una aplicación no trivial escrito dos veces, una vez con MVC y una vez sin que su no-MVC versión es más fácil de mantener, etc.
    • Cualquier uso más allá de lo trivial, lo ideal necesidades de un patrón, y el MVC es un modelo excelente cuando usted está tratando con la presentación de los datos. Suena como que has tenido una mala experiencia, pero eso no es culpa del patrón.
    • la documentación será siempre la falta de la piedra de rosetta, independientemente de los patrones de & prácticas utilizadas, debido a los cambios a lo largo del tiempo. la belleza de patrones MVC es que una vez que usted entienda la plomería, usted nunca tiene que perder el tiempo escribiendo plomería cada vez que se agrega una nueva característica o actualización de una vieja. Así que sí, hasta que entienda la tubería, será un ejercicio de futilidad. La única manera de garantizar la adecuada comprensión de futuro desconocido devs es seguir suficientemente razonables como las normas Y TAMBIÉN el documento bien. El mantenimiento y la comprensión de alguien spagettified desorden no es más rápido o más fácil..
  7. 3

    backbone.js es Modelo-Vista-Controlador (MVC) con JavaScript
    pero Extjs mejor que la columna vertebral para el Patrón MVC con java script

    Con la columna vertebral en la que obtuvo su libertad para hacer casi cualquier cosa que usted desea. En lugar de tratar de horquilla a través de la api y personalizar usaría Backbonejs por su simplicidad y facilidad de implementación. De nuevo es difícil decir lo que usted requiere de los dos, uno es una biblioteca de otro componente

  8. 3

    Columna vertebral fue creado por Jeremy Ashkenas, quien también escribió CoffeeScript. Como JavaScript-aplicación pesada, lo que ahora conocemos como columna vertebral fue el responsable de la estructuración de la aplicación en una base de código. Underscore.js, columna vertebral única dependencia, también fue parte de la DocumentCloud aplicación.

    Columna vertebral ayuda a los programadores a manejar un modelo de datos en su web del lado del cliente de la aplicación con tanto disciplina y estructura que puede obtener en el servidor tradicional de la lógica de la aplicación.

    Beneficios adicionales del uso de Backbone.js

    1. Ver columna vertebral como una biblioteca, no como un marco
    2. Javascript está organizado de una manera estructurada, la (MVVM) Modelo
    3. Gran comunidad de usuarios
  9. 2

    También agrega la ruta usando los controladores y vistas con KVO. Usted será capaz de desarrollar «AJAXy» aplicaciones con él.

    Ven como un ligero Sproutcore o Capuchino marco.

  10. 1

    Es un patrón de diseño MVC del lado del cliente, créeme.. Se va a ahorrar un montón de código, por no hablar de una forma más limpia y clara de código más fácil de mantener el código.
    Podría ser un poco difícil al principio, pero créanme que es una gran biblioteca.

  11. 0

    Tantas buenas respuestas ya. Backbone js ayuda a mantener el código organizado. Cambiar el modelo/de la colección se ocupa de la representación de vista automaticallty que reduce mucho el desarrollo de la sobrecarga.

    Aunque proporciona la máxima flexibilidad para el desarrollo, los desarrolladores deben tener cuidado para destruir a los modelos y eliminar los puntos de vista de manera adecuada. De lo contrario, puede haber pérdida de memoria en la aplicación.

  12. -3

    Una aplicación web que involucran gran cantidad de interacción del usuario con muchas peticiones AJAX, que necesita ser cambiado de vez en cuando, y que se ejecuta en tiempo real (como Facebook o StackOverflow) debe utilizar un marco de MVC como Backbone.js. Es la mejor manera de construir un buen código.

    Si la solicitud es pequeño, aunque, a continuación, Backbone.js es una exageración, especialmente para los usuarios de primera vez.

    Columna vertebral le da MVC del lado del cliente, y todas las ventajas que conlleva este.

    • «deben» utilizar la columna vertebral? Yo no puedo ver a stackoverflow o facebook, los dos ejemplos, el uso de columna vertebral o de subrayado en absoluto. ¿Usted tiene un de referencia para que la reclamación?
    • Por supuesto, hay muchos otros MV* las bibliotecas, la columna vertebral es uno de ellos. Generalmente sin embargo, MVC ayuda a mantener las cosas en limpio y ordenado, cuando el desarrollo de grandes piezas de código.

Dejar respuesta

Please enter your comment!
Please enter your name here