Una introducción completa a Backbone.Marionette (Parte 1)

 

 

 

  • ¡Registro!
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. El objeto de aplicación central
    2. Inicializadores
    3. Agregador de eventos
    4. Regiones
      1. Selector
      2. Tipo de región personalizada
      3. Tipo de región personalizada con selector
    5. Conclusión
      1. Otras lecturas

    Backbone.js se está convirtiendo rápidamente en el marco más popular para crear aplicaciones JavaScript modulares del lado del cliente. Para ayudarle a aprovechar todo el potencial de Marionette, Joseph Zimmerman preparó un libro electrónico completo lleno de ejemplos prácticos útiles.

     

    Para ayudarle a aprovechar todo el potencial de Marionette, hemos preparado un libro electrónico completo lleno de ejemplos prácticos útiles que también está disponible en Smashing Library . —Ed.

    Backbone.js se está convirtiendo rápidamente en el marco más popular para crear aplicaciones JavaScript modulares del lado del cliente. Esto se debe en gran medida a su baja barrera de entrada; empezar a utilizarlo es súper sencillo. Sin embargo, a diferencia de Ember.js, Backbone, al ser tan mínimo, también deja mucho que resolver al desarrollador.

    Entonces, una vez que comienzas a acceder a aplicaciones más avanzadas, ya no es tan simple. Backbone.Marionette fue creado para aliviar muchos de los dolores de crecimiento del desarrollo de Backbone . Backbone.Marionette “hace que tus aplicaciones Backbone.js bailen con una arquitectura de aplicación compuesta”, según su autor.

    Esta arquitectura "compuesta" se refiere principalmente a los numerosos tipos de vistas que se han proporcionado para ayudar con la gestión de subvistas. No discutiremos esas vistas hoy (aunque tocaremos las regiones, que son una pequeña parte de la administración de subvistas que ofrece Marionette), pero puede encontrar documentación para este proyecto en el repositorio de GitHub . Ofrece numerosos componentes que amplían Backbone y que le permiten escribir menos textos repetitivos y hacer más cosas con poca o ninguna molestia, especialmente cuando se trata de vistas.

    El objeto de aplicación central

    La mayoría de las veces, cuando alguien crea una aplicación Backbone, crea un objeto central al que se adjunta todo, al que a menudo se hace referencia como Appo Application. Backbone no ofrece nada para crear este objeto, por lo que la mayoría de las personas simplemente crean un enrutador principal y lo convierten en el objeto de la aplicación. Si bien es fantástico que las personas adjunten cosas a un objeto central para que el espacio de nombres global no sea tan complicado, el enrutador no fue diseñado para manejar esta tarea.

    Derick Bailey, el creador de Marionette, tuvo una idea mejor. Creó una “clase” de la que se puede crear una instancia de un objeto que está diseñada específicamente para manejar las responsabilidades de ser el objeto raíz de toda la aplicación. Creas una nueva aplicación con var App = new Backbone.Marionette.Application()y luego, cuando todo está configurado, inicias la aplicación con App.start(options). Discutiré el optionsargumento pronto. Por ahora, recuerda que es opcional.

    Inicializadores

    Una de las cosas más interesantes de Marionette Applicationson los inicializadores. Cuando su código es modular, será necesario inicializar varias piezas cuando se inicie la aplicación. En lugar de llenar un main.jsarchivo con una gran cantidad de código para inicializar todos estos objetos, puede simplemente configurar los módulos para su inicialización dentro del código del módulo. Esto lo haces usando addInitializer. Por ejemplo:

    var SomeModule = function(o){ // Constructor for SomeModule};App.addInitializer(function(options) { App.someModule = new SomeModule(options);});

    Todos los inicializadores agregados de esta manera se ejecutarán cuando App.startse llame. Observe el optionsargumento que se pasa al inicializador. Este es el mismo objeto que se pasa cuando llamas App.start(options). Esto es excelente para permitir que se pase una configuración para que todos los módulos puedan usarla.

    También se activan algunos eventos cuando se ejecutan estos inicializadores:

    • initialize:beforeSe dispara justo antes de que se ejecuten los inicializadores.
    • initialize:afterSe dispara justo después de que todos los inicializadores hayan finalizado.
    • startIncendios después initialize:after.

    Puede escuchar estos eventos y ejercer aún más control. Escuche estos eventos como este:

    App.on('initialize:before', function(options) { options.anotherThing = true; // Add more data to your options});App.on('initialize:after', function(options) { console.log('Initialization Finished');});App.on('start', function(options) { Backbone.history.start(); // Great time to do this});

    Bastante simple y le brinda mucha flexibilidad a la hora de iniciar sus aplicaciones.

     

    Agregador de eventos

    El Applicationobjeto ofrece aún más posibilidades para desacoplar una aplicación Backbone mediante el uso de un agregador de eventos. Hace un tiempo escribí una publicación sobre aplicaciones JavaScript escalables , en la que mencioné que los módulos de un sistema deben ignorarse por completo entre sí y que la única forma en que deberían poder comunicarse entre sí es a través de eventos en toda la aplicación . De esta manera, cada módulo interesado puede escuchar los cambios y eventos que necesita para poder reaccionar ante ellos sin que nada más en el sistema se dé cuenta de que existe. Partyflauta: Partituras para flauta dulce

    Marionette hace que este tipo de desacoplamiento sea posible en gran medida a través del agregador de eventos que se adjunta automáticamente al objeto de la aplicación. Si bien este es sólo uno de los mecanismos sobre los que escribí en ese artículo, es un comienzo y puede resultar muy útil en aplicaciones incluso más pequeñas.

    El agregador de eventos está disponible a través de una propiedad en la aplicación llamada vent. Puedes suscribirte y cancelar la suscripción a eventos simplemente mediante los métodos ony off, respectivamente (o bindy unbind, si lo prefieres). Estas funciones pueden resultar familiares, y eso se debe a que el agregador de eventos es simplemente una extensión del objeto de BackboneEvent . Realmente, lo único nuevo aquí por lo que debes preocuparte es que estamos usando los eventos en un objeto al que debería ser accesible desde cualquier lugar dentro de tu aplicación, para que cada parte de tu aplicación pueda comunicarse a través de él. El agregador de eventos también está disponible como su propio módulo, por lo que puede agregarlo a cualquier objeto que desee, como el de Backbone Event.

    Regiones

    Regiones otro módulo para Marionette que le permite adjuntar fácilmente vistas a diferentes regiones de un documento HTML. No entraré en detalles sobre cómo funcionan las regiones aquí (ese es un tema para otro día), pero lo cubriré brevemente y explicaré cómo usarlas con Application.

    Una región es un objeto (generalmente creado con new Backbone.Marionette.Region({ el: ‘selector’})) que administra un área donde se adjunta una vista. Agregaría una vista y la renderizaría automáticamente usando show. Luego puede cerrar esa vista (lo que significa que la eliminará del DOM y, si está usando una de las vistas Marionette, deshacer cualquier vinculación realizada por la vista) y generar una vista diferente simplemente llamando shownuevamente, o puede simplemente cierre la vista llamando close. Las regiones pueden hacer más que eso, pero el hecho de que manejan la representación y el cierre con una sola llamada de función las hace extremadamente útiles. Aquí hay un ejemplo de código para aquellos que hablan en código en lugar de inglés:

    // Create a region. It will control what's in the #container element.var region = new Backbone.Marionette.Region({ el: "#container"});// Add a view to the region. It will automatically render immediately.region.show(new MyView());// Close out the view that's currently there and render a different view.region.show(new MyOtherView());// Close out the view and display nothing in #container.region.close();

    Si desea un Regionobjeto directamente en su aplicación (por ejemplo App.someRegion), hay una forma sencilla de agregar uno rápidamente: addRegions. Hay tres formas de utilizarlo addRegions. En todos los casos, pasaría un objeto cuyos nombres de propiedades se agregarán a la aplicación como regiones, pero el valor de cada una de ellas puede ser diferente según la forma en que desee lograrlo.

     

    Selector

    Simplemente proporcione un selector y se creará una región estándar que utiliza ese selector como elpropiedad.

    App.addRegions({ container: "#container", footer: "#footer"});// This is equivalent toApp.container = new Backbone.Marionette.Region({el:"#container"});App.footer = new Backbone.Marionette.Region({el:"#footer"});

    Tipo de región personalizada

    Puede ampliar Regionpara crear sus propios tipos de regiones. Si desea utilizar su propio tipo de región, puede utilizar la sintaxis siguiente. Tenga en cuenta que, con esta sintaxis, elya debe estar definido dentro de su tipo de región.

    var ContainerRegion = Backbone.Marionette.Region.extend({ el: "#container", // Must be defined for this syntax // Whatever other custom stuff you want});var FooterRegion = Backbone.Marionette.Region.extend({ el: "#footer", // Must be defined for this syntax // Whatever other custom stuff you want});// Use these new Region types on App.App.addRegions({ container: ContainerRegion, footer: FooterRegion});// This is equivalent to:App.container = new ContainerRegion();App.footer = new FooterRegion();

    Tipo de región personalizada con selector

    Si no define el(o desea anularlo) en su tipo de región personalizada, puede usar esta sintaxis:

    var ContainerRegion = Backbone.Marionette.Region.extend({});var FooterRegion = Backbone.Marionette.Region.extend({});// Use these new Region types on App.App.addRegions({ container: { regionType: ContainerRegion, selector: "#container" }, footer: { regionType: FooterRegion, selector: "#footer" }});// This is equivalent to:App.container = new ContainerRegion({el:"#container"});App.footer = new FooterRegion({el:"#footer"});

    Como puede ver, agregar regiones para toda la aplicación es muy simple (especialmente si está usando el Regiontipo normal) y agregan muchas funciones útiles.

    Conclusión

    Como ya puede ver, Marionette agrega un montón de características excelentes para simplificar el desarrollo de Backbone, y hemos cubierto solo uno de los muchos módulos que proporciona (además, hemos tocado un par de otros módulos que él mismo Applicationusa, pero hay mucho más que aprender sobre ellos). Espero que esto atraiga un poco a los programadores de Backbone y los haga ansiosos por leer el resto de esta serie , cuando cubriré más módulos.

    Créditos de la imagen en la página de inicio: Dmitry Baranovskiy .

    Otras lecturas

    • Una introducción completa a Backbone.Marionette (Parte 2)
    • Una introducción completa a Backbone.Marionette (Parte 3)
    • Consejos y patrones de Backbone.js
    • Una introducción a JavaScript de pila completa

    (al, señor)Explora más en

    • Codificación
    • Marcos
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una introducción completa a Backbone.Marionette (Parte 1)

    Una introducción completa a Backbone.Marionette (Parte 1)

    ¡Registro! Implemente rápidamente. Implementar inteligentemente Índice El objeto de aplicación central

    programar

    es

    https://aprendeprogramando.es/static/images/programar-una-introduccion-completa-a-backbone-811-0.jpg

    2024-05-20

     

    Una introducción completa a Backbone.Marionette (Parte 1)
    Una introducción completa a Backbone.Marionette (Parte 1)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20