milo
1.0.0
Programmation réactive du navigateur / Nodejs et manipulation DOM pilotée par les données avec des composants modulaires.
Documentation: http://milojs.github.io/milo/
npm install milojs
ou
bower install milo
npm install
npm install -g grunt-cli
grunt test
Pour exécuter tous les tests, y compris les tests de navigateur:
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 utilise le module de vérification ( milo.util.check - Fiche à partir du package de chèques de Meteor Framework) pour la vérification d'exécution des types de paramètres. Il est fortement recommandé d'éteindre ces vérifications en production en utilisant: milo.config({ check: false }) .
Selon votre application, il peut améliorer les performances de plus de deux fois.
Introduction à la liaison
Introduction à la facette de données
Introduction aux messagers
Introduction aux modèles
Introduction à Minder
Introduction aux listes
Article sur la création de Milo Rolling Your Own Framework sur TUTS +
L'échantillon le plus avancé est l'application Todos dans le dossier 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 fileDe plus, vous pouvez configurer un grognement dans votre projet pour le reconstruire chaque fois que Milo Bundle change.
Veuillez vous assurer d'exécuter grunt tests avant de s'engager (pas seulement grunt test exécutés automatiquement par Travisci) - il exécutera tous les tests, y compris les tests de navigateur.
Bien que Milo soit emballé comme un paquet, il a une structure très modulaire. Il se compose de plusieurs modules indépendants qui peuvent être utilisés ensemble ou séparément et qui sont conçus pour simplifier les tâches d'application courantes plutôt que pour créer une structure d'application particulière.
Certains modules de MILO ne peuvent être utilisés que dans le navigateur (composant, composant Facet, Milo.Binder), certains à la fois dans le navigateur et dans les nodejs (Messenger et ses classes connexes, modèle, connecteur, milo.minder).
MILO lui-même utilise Browserify pour package Bundle, mais tout système de modules peut être utilisé dans une application qui utilise Milo - Milo ne suggère aucune structure d'application.
Le composant est conçu pour simplifier la gestion de Dom. Le composant est attaché à un certain élément DOM. La connexion de plusieurs composants au même élément DOM est généralement une erreur de conception d'application (ou milo), donc si cela se produit, une erreur sera enregistrée à la console.
Les composants permettent une création très facile de sous-classes qui sont définies comme une collection de "facettes" configurées. Par exemple, voir la définition du composant d'interface utilisateur MlSelect.
Il existe un modèle de composant pour simplifier la création de vos propres composants.
Voir la documentation des composants.
ComponentFacet est une classe de base, sous-classes des méthodes de groupe liées aux comportements des composants.
Vous auriez rarement besoin d'instancier une facette - lorsqu'un composant est créé, il crée toutes ses facettes
Il y a les facettes suivantes définies à Milo :
Il existe un modèle de facette de composant pour simplifier la création de vos propres facettes. Toutes les facettes des composants doivent être des sous-classes de composant Facet.
Les instances de vos composants sont généralement créées automatiquement lorsque vous appelez milo.binder en fonction des informations sur les classes de composants, les facettes et le nom des composants dans l'attribut ml-bind (peut être modifié via milo.config).
Pour mettre vos composants à la disposition de MILO, leurs cours devraient être enregistrés dans le registre des composants (Milo.Registry.comPonents). Si vous définissez de nouvelles facettes, leurs classes doivent également être enregistrées (dans Milo.Registry.facets).
Comme l'enregistrement des composants et des classes de facettes se produit généralement dans le même module (fichier) qui définit la classe, vous devez exécuter ce module. Si vous utilisez BroSerify pour la gestion des modules, il suffit à utiliser:
require('my_component');
dans tout autre module exécuté ou requis.
MILO fournit des cours de messagerie interne qui peuvent également être utilisés pour les besoins d'application. Toutes les facettes de MILO ont une instance de Messenger qui leur est attachée qui définit l'API de messagerie spécifique à la facette, dans la plupart des cas, se connectant à une source externe (généralement des événements DOM).
Instances Messenger Utilisez des instances de sous-classes MessageSource pour se connecter à des sources externes et des instances de sous-classes MessengerAPI pour créer des messages internes de niveau supérieur et transformer les données de message. Cette architecture permet de créer une fonctionnalité avancée en quelques lignes de code.
Voir Documentation Messenger.
MILO définit le modèle pour permettre un accès sûr aux données sans avoir à vous soucier de savoir si les données ont été définies (elles ne lancent jamais lorsque vous accédez aux données lorsque vous obtenez des propriétés d'objets non définis) et pour permettre à la possibilité de vous abonner à des changements de données similaires à quel objet expérimental.
L'utilisation du modèle ne nécessite pas ces API, et contrairement à ces API, il permet à l'abonnement à des modifications des propriétés de vos modèles à n'importe quelle profondeur.
Voir la démo du modèle et la documentation du modèle.
MILO définit cette classe pour gérer la connexion réactive entre les objets qui implémentent l'API de messagerie de données. Les deux instances de facette de données et du modèle sont de tels objets.
Vous pouvez créer des connexions unidirectionnelles, définir la profondeur de vos structures de données que vous souhaitez observer, éteignez ces connexions, par exemple lorsque vous souhaitez apporter de nombreuses modifications du modèle sans provoquer des mises à jour DOM.
Ces connexions n'ont pas la surcharge de comparaison de données dans la boucle comme le fait angularjs et ne provoque aucune dégradation des performances lorsque de nombreux objets connectés existent.
Très bientôt, les instances de connecteur prendront en charge la traduction de la structure permettant de créer des connexions réactives entre les modèles avec des structures fixes et des arbres DOM avec des structures flexibles.
Une ou plusieurs connexions réactives peuvent être créées avec milo.minder.
Voir la documentation du connecteur.
domready et simplifie le routage des messages entre les iframes (voir Facet de trame).Le nom de Milo a été choisi à cause de Milo Minderbinder, un profiteur de guerre de Catch 22. Après avoir commencé à gérer les opérations de mess, il les a étendus en une entreprise commerciale rentable, qui a connecté tout le monde à tout, et dans ce Milo et tout le monde "ont une part".
MILO Le cadre a le liant du module, qui lie les éléments DOM aux composants (via l'attribut spécial ML-Bind), et le Minder Minder qui permet d'établir des connexions réactives en direct entre différentes sources de données (le modèle et les facettes de données des composants sont de telles sources de données).
Par coïncidence, Milo peut être lu comme acronyme de Mail Online .
Tous les cadres sur lesquels nous pourrions mettre les mains étaient soit trop primitifs, nous laissant écrire trop de code de notre propre code (jQuery, épine dorsale) ou trop limitant, avec suffisamment de magie pour créer une application simple très rapidement mais avec un contrôle limité sur un fonctionnement précis du cadre (Angular, EXT).
Ce que nous avons toujours voulu, c'était un cadre qui permettrait
Nous n'avons pas pu trouver un tel cadre, nous avons donc commencé à développer MILO en parallèle avec l'application qui l'utilise.
### Prototype basé sur l'héritage
MILO s'appuie sur les prototypes JavaScript pour construire des blocs de framework.
JavaScript est un langage très dynamique. Il permet des fonctions d'écriture qui créent des classes ( Component.createComponentClass ) qui ont permis d'implémenter un modèle de composition où chaque classe de composants est créée en tant que collection de blocs prédéfinis (facettes) avec la configuration d'une facette spécifique à une classe construite (il a une certaine similitude avec les composants EXT, bien qu'ils ne soient pas créés à partir de blocs).
JavaScript permet également de créer des fonctions de constructeur qui créent des fonctions, ce qui rend possible une syntaxe très expressive pour les objets du modèle et également la "compilation" d'exécution des chemins d'accès du modèle en fonctions.
La classe de composants est basée sur une classe FacetedObject abstraite qui peut être appliquée à n'importe quel domaine où les objets peuvent être représentés via la collecte de facettes (une facette est un objet d'une certaine classe, il détient sa propre configuration, données et méthodes).
D'une certaine manière, le modèle des facettes est une inversion du modèle d'adaptateur - alors que ce dernier permet de trouver une classe / méthodes qui a une fonctionnalité spécifique, l'objet à facettes est simplement construit pour avoir ces fonctionnalités. De cette façon, il est possible de créer un nombre pratiquement illimité de classes de composants avec un nombre très limité de blocs de construction sans avoir une grande hiérarchie de classes - la plupart des composants héritent directement de la classe de composants.
Dans le même temps, MILO prend en charge le mécanisme d'héritage lorsque la sous-classe peut ajouter des facettes à celles qui sont déjà en superclasse et pour redéfinir la configuration des facettes héréditaires.
Nous utilisons également Mixin Pattern, mais Mixin dans MILO est implémenté comme un objet séparé qui est stocké sur la propriété de l'objet hôte et peut créer des méthodes proxy sur l'objet hôte si nécessaire. Les classes Messenger, MessageSource et DataSource sont des sous-classes de Mixin Abstract Class.
Les composants et les facettes s'inscrivent dans des registres qui permettent d'éviter de les exiger à partir d'un module. Il empêche les dépendances circulaires entre les modules.
Les dépendances de MILO sont Proto , une bibliothèque de manipulation d'objets et un point , un moteur de modèles (les deux sont inclus dans le bundle Milo).
Nous n'utilisons aucune bibliothèque de traversée DOM parce que:
Au lieu de cela, les composants MILO peuvent avoir une facette DOM qui comprend plusieurs fonctions de commodité pour manipuler les éléments DOM et il existe milo.util.dom - une collection similaire de fonctions qui peuvent être utilisées sans composants.
Milo utilise la bibliothèque Proto qui a une collection Grownig de fonctions utilitaires pour la manipulation d'objets, prototypes, tableaux, fonctions et chaînes. Veuillez consulter son référentiel pour les documents et les raisons de la décision de ne pas utiliser de bibliothèques tierces.
Il est regroupé avec MILO et toutes ses fonctions sont disponibles en tant que propriétés de l'objet _ , vous n'avez pas besoin de le charger séparément.
http://opensource.org/licenses/bsd-2-clause
Voir les versions
