milo
1.0.0
Programación reactiva del navegador/NodeJS y manipulación DOM impulsada por datos con componentes modulares.
Documentación: http://milojs.github.io/milo/
npm install milojs
o
bower install milo
npm install
npm install -g grunt-cli
grunt test
Para ejecutar todas las pruebas, incluidas las pruebas del navegador:
grunt tests
index.html
< html >
< head >
< title > Binding example </ title >
< script src =" milo.bundle.js " > </ script >
< script src =" index.js " > </ script >
</ head >
< body >
< input type =" text " ml-bind =" [Data]:myField " >
< div ml-bind =" [Data]:myCurrentValue " > </ div >
< button ml-bind =" [Events]:myTestButton " >
Test
</ button >
< div >
< span ml-bind =" :myTestValue " > </ span >
</ div >
< div >
< h2 > I am connected: </ h2 >
< span ml-bind =" [Data]:myTestValue2 " > </ span >
</ div >
</ body >
</ html >index.js
// run when DOM is ready
milo ( function ( ) {
// create and bind components with milo.binder
var scope = milo . binder ( ) ;
// attach subscriber to data change event via data facet
// of myField component
scope . myField . data . on ( '' , function ( msg , data ) {
scope . myCurrentValue . data . set ( data . newValue ) ;
// alternatively:
// scope.myCurrentValue.el.innerHTML = data.newValue;
} ) ;
// attach subscriber to click event via events facet
// of myTestButton component
scope . myTestButton . events . on ( 'click' , function ( msg , event ) {
scope . myTestValue . el . innerHTML = scope . myField . data . value ( ) ;
} ) ;
// connect two components directly via their data facets
// using milo.minder
milo . minder ( scope . myField . data , '->' , scope . myTestValue2 . data ) ;
} ) ; Milo usa el módulo de cheque ( milo.util.check - bifurcado desde el paquete de cheque del marco de meteoros) para la verificación de tiempo de ejecución de los tipos de parámetros. Se recomienda apagar esta comprobación en producción usando: milo.config({ check: false }) .
Dependiendo de su aplicación, puede mejorar el rendimiento más de dos veces.
Introducción a la encuadernación
Introducción a la faceta de datos
Introducción a los mensajeros
Introducción a los modelos
Introducción al cuente
Introducción a las listas
Artículo sobre la creación de Milo rodando su propio marco en Tuts+
La muestra más avanzada es la aplicación TODOS en la carpeta ToDomVC.
cd $MILO_FOLDER
npm link
cd $MY_PROJECT
rm -R -f -d node_modules/milojs
npm link milojs # link milo to your current project to use with browserify
cd $MILO_FOLDER
grunt # rebuild milo bundle every time you change any .js fileAdemás, puede configurar Grunt en su proyecto para reconstruirlo cada vez que Milo Bundle cambie.
Asegúrese de ejecutar grunt tests antes de comprometerse (no solo grunt test que se ejecuta automáticamente por Travisci): ejecutará todas las pruebas, incluidas las pruebas de navegador.
Aunque Milo está empaquetado como un paquete, tiene una estructura muy modular. Consiste en varios módulos independientes que se pueden usar juntos o por separado y que están diseñados para simplificar las tareas de aplicaciones comunes en lugar de crear cualquier estructura de aplicación en particular.
Algunos módulos en Milo solo se pueden usar en el navegador (Component, ComponentFacet, Milo.Binder), algunos tanto en el navegador como en NodeJ (mensajero y sus clases relacionadas, modelo, conector, milo.minder).
MILO utiliza Browserify para paquete de paquete, pero cualquier sistema de módulos se puede usar en una aplicación que usa Milo - Milo no sugiere ninguna estructura de aplicación.
El componente está diseñado para simplificar la gestión de DOM. El componente está conectado a un determinado elemento DOM. Adjuntar varios componentes al mismo elemento DOM suele ser un error de diseño de aplicación (o MILO), por lo que si sucede, un error se registrará en la consola.
Los componentes permiten una creación muy fácil de subclases que se definen como una colección de "facetas" configuradas. Por ejemplo, consulte la definición del componente de UI MLSelect.
Hay una plantilla de componentes para simplificar la creación de sus propios componentes.
Ver documentación del componente.
ComponentFacet es una clase base, subclases de las cuales los métodos de grupo relacionados con los comportamientos de los componentes.
Rara vez necesitaría instanciar una faceta: cuando se crea un componente, crea todas sus facetas
Hay las siguientes facetas definidas en Milo :
Hay una plantilla de faceta de componentes para simplificar la creación de sus propias facetas. Todas las facetas de los componentes deben ser subclases de ComponentFacet.
Las instancias de sus componentes generalmente se crean automáticamente cuando llama a Milo.Binder en función de la información sobre las clases de componentes, las facetas y el nombre de los componentes en el atributo ml-bind (se puede cambiar a través de milo.config).
Para que sus componentes estén disponibles para MILO, sus clases deben registrarse en el Registro de Componentes (Milo.registry.components). Si define nuevas facetas, sus clases también deben estar registradas (en Milo.registry.Facets).
Como el registro de componentes y clases de facetas generalmente ocurre en el mismo módulo (archivo) que define la clase, debe ejecutar este módulo. Si usa Broserify para la gestión del módulo, es suficiente usar:
require('my_component');
en cualquier otro módulo que se ejecute o sea necesario.
Milo suministra clases de mensajería internas que también se pueden usar para las necesidades de aplicación. Todas las facetas en Milo tienen una instancia de mensajero adjunta que define la API de mensajería específica para la faceta, en la mayoría de los casos que se conectan a alguna fuente externa (generalmente eventos DOM).
Las instancias de Messenger usan instancias de subclases MessageSource para conectarse a fuentes externas e instancias de subclases de MessengerAPI para crear mensajes internos de nivel superior y transformar los datos de mensajes. Esta arquitectura permite crear una funcionalidad avanzada en solo unas pocas líneas de código.
Ver documentación del mensajero.
Milo define el modelo para permitir un acceso seguro a los datos sin la necesidad de preocuparse si los datos se establecieron (nunca se lanza cuando accede a los datos cuando obtiene propiedades de objetos indefinidos) y para permitir la posibilidad de suscribirse a cambios de datos similares a los objetos experimentales.
El uso del modelo no requiere estas API, y a diferencia de estas API permite suscribirse a los cambios en las propiedades de sus modelos a cualquier profundidad.
Consulte la demostración del modelo y la documentación del modelo.
Milo define esta clase para administrar la conexión reactiva entre objetos que implementan la API de mensajería de datos. Ambas instancias de la faceta de datos y del modelo son tales objetos.
Puede crear conexiones de una o dos vías, definir la profundidad de sus estructuras de datos que desea observar, apagar estas conexiones, por ejemplo, cuando desee hacer muchos cambios en el modelo sin causar actualizaciones de DOM.
Estas conexiones no tienen sobrecarga de comparar datos en el bucle como angularjs y no causan ninguna degradación del rendimiento cuando existen muchos objetos conectados.
Muy pronto, las instancias del conector admitirán la traducción de la estructura que permite la creación de conexiones reactivas entre modelos con estructuras fijas y árboles DOM con estructuras flexibles.
Se pueden crear una o múltiples conexiones reactivas con Milo.minder.
Ver documentación del conector.
domready y simplifica el enrutamiento de los mensajes entre iFrames (ver Frame Facet).El nombre de Milo fue elegido debido a Milo Minderbinder, un ganador de guerra de Catch 22. Habiendo comenzado al administrar las operaciones de desorden, los expandió a una empresa comercial rentable, que conectó a todos con todo, y en ese Milo y todos los demás "tienen una parte".
MILO El marco tiene el aglutinante del módulo, que une los elementos DOM a los componentes (a través del atributo especial de unión a ML), y el módulo cuderador que permite establecer conexiones reactivas en vivo entre diferentes fuentes de datos (el modelo y la faceta de datos de los componentes son tales fuentes de datos).
Casualmente, Milo puede leerse como un acrónimo de Mail Online .
Todos los marcos en los que podríamos poner en nuestras manos fueron demasiado primitivos, dejándonos para escribir demasiado código propio (jQuery, columna vertebral) o demasiado limitante, con suficiente magia para construir una aplicación simple realmente rápida pero con un control limitado sobre el funcionamiento preciso del marco (angular, ext).
Lo que siempre quisimos era un marco que permitiría
No pudimos encontrar dicho marco, por lo que comenzamos a desarrollar Milo en paralelo con la aplicación que lo usa.
### herencia basada en prototipo
Milo se basa en los prototipos de JavaScript para construir bloques de marco.
JavaScript es un lenguaje muy dinámico. Permite las funciones de escritura que crean clases ( Component.createComponentClass ) que permiten implementar un patrón de composición donde cada clase de componentes se crea como colección de bloques predefinidos (facetas) con la configuración de una faceta que es específica para una clase construida (tiene cierta similitud a los componentes EXT, aunque no se crean a partir de bloques).
JavaScript también permite crear funciones de constructor que creen funciones que hacen posible una sintaxis muy expresiva para los objetos modelo y también "compilación" de tiempo de ejecución de rutas de acceso al modelo en funciones.
La clase de componentes se basa en una clase abstracta FacetedObject que se puede aplicar a cualquier dominio donde los objetos se puedan representar a través de la recopilación de facetas (una faceta es un objeto de una determinada clase, posee su propia configuración, datos y métodos).
En cierto modo, el patrón de facetas es una inversión del patrón de adaptador, mientras que este último permite encontrar una clase/métodos que tenga funcionalidad específica, el objeto facetado simplemente se construye para tener estas funcionalidades. De esta manera, es posible crear un número prácticamente ilimitado de clases de componentes con un número muy limitado de bloques de construcción sin tener una jerarquía alta de clases, la mayoría de los componentes heredan directamente de la clase de componentes.
Al mismo tiempo, Milo admite el mecanismo de herencia cuando la subclase puede agregar facetas a las que ya están en superclase y para redefinir la configuración de facetas heredadas.
También usamos el patrón de mezcla, pero la mezcla en milo se implementa como un objeto separado que se almacena en la propiedad del objeto host y puede crear métodos proxy en el objeto host si es necesario. Las clases Messenger, Messagesurce y DataSource son subclases de la clase de abstracto Mixin.
Los componentes y facetas se registran en registros que permiten evitar requerirlos de un módulo. Previene dependencias circulares entre módulos.
Las dependencias de Milo son Proto , una biblioteca de manipulación de objetos y un punto , un motor de plantilla (ambos se incluyen en Milo Bundle).
No usamos ninguna biblioteca de transversal DOM porque:
En cambio, los componentes de Milo pueden tener FACOM DOM que incluye varias funciones de conveniencia para manipular elementos DOM y está milo.util.dom , una colección similar de funciones que se pueden usar sin componentes.
Milo utiliza la biblioteca Proto que tiene una colección de funciones de utilidad para la manipulación de objetos, prototipos, matrices, funciones y cadenas. Consulte su repositorio de documentos y razones detrás de la decisión de no usar bibliotecas de terceros.
Está incluido junto con Milo y todas sus funciones están disponibles como propiedades de _ objeto, no necesita cargarlo por separado.
http://opensource.org/licenses/bsd-2 cláusula
Ver lanzamientos
