milo
1.0.0
Navegador/NodeJS Programação reativa e manipulação de DOM acionada por dados com componentes modulares.
Documentação: http://milojs.github.io/milo/
npm install milojs
ou
bower install milo
npm install
npm install -g grunt-cli
grunt test
Para executar todos os testes, incluindo testes de 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 o módulo de verificação ( milo.util.check - bifurcado no pacote de verificação da estrutura meteora) para verificação de tempo de execução dos tipos de parâmetros. É altamente recomendável desligar este check -in em produção usando: milo.config({ check: false }) .
Dependendo do seu aplicativo, ele pode melhorar o desempenho mais que duas vezes.
Introdução à ligação
Introdução à faceta de dados
Introdução aos mensageiros
Introdução aos modelos
Introdução ao Minder
Introdução às listas
Artigo sobre a criação de Milo rolando sua própria estrutura sobre tuts+
A amostra mais avançada é o aplicativo TODOS na pasta 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 fileAlém disso, você pode configurar o Grunt em seu projeto para reconstruí -lo sempre que o pacote Milo mudar.
Certifique -se de executar grunt tests antes de cometer (não apenas grunt test executado pelo Travisci automaticamente) - ele executará todos os testes, incluindo testes do navegador.
Embora Milo seja embalado como um pacote, ele tem uma estrutura muito modular. Consiste em vários módulos independentes que podem ser usados juntos ou separadamente e projetados para simplificar tarefas comuns de aplicativos, em vez de criar qualquer estrutura de aplicativo específica.
Alguns módulos em Milo podem ser usados apenas no navegador (componente, componentefacet, Milo.binder), alguns no navegador e no NodeJS (Messenger e suas classes relacionadas, modelo, conector, Milo.minder).
O próprio Milo usa o BrowSerify para embalar o pacote, mas qualquer sistema de módulos pode ser usado em um aplicativo que usa Milo - Milo não sugere nenhuma estrutura de aplicativo.
O componente foi projetado para simplificar o gerenciamento do DOM. O componente é anexado a um certo elemento DOM. Anexar vários componentes ao mesmo elemento DOM é geralmente um erro de design de aplicativos (ou MILO); portanto, se isso acontecer, um erro será registrado no console.
Os componentes permitem a criação muito fácil de subclasses definidas como uma coleção de "facetas" configuradas. Por exemplo, consulte a definição do componente da interface do usuário MLSelect.
Existe um modelo de componente para simplificar a criação de seus próprios componentes.
Consulte a documentação do componente.
ComponentFacet é uma classe base, subclasses de quais métodos de grupo relacionados a comportamentos de componentes.
Você raramente precisaria instanciar uma faceta - quando um componente é criado, ele cria todas as suas facetas
Existem as seguintes facetas definidas em Milo :
Existe um modelo de faceta componente para simplificar a criação de suas próprias facetas. Todas as facetas dos componentes devem ser subclasses do componentefacet.
Instâncias de seus componentes geralmente são criadas automaticamente quando você chama Milo.binder com base em informações sobre aulas de componentes, facetas e nome do componente no atributo ml-bind (pode ser alterado via milo.config).
Para disponibilizar seus componentes para Milo, suas aulas devem ser registradas no Registro de Componentes (Milo.registry.comPonents). Se você definir novas facetas, suas classes também devem ser registradas (em Milo.registry.facets).
Como o registro das classes de componentes e facetas geralmente ocorre no mesmo módulo (arquivo) que define a classe, você deve executar este módulo. Se você usa o Broserify para gerenciamento de módulos, é suficiente usar:
require('my_component');
em qualquer outro módulo que seja executado ou necessário.
Milo fornece aulas de mensagens internas que também podem ser usadas para as necessidades de aplicativos. Todas as facetas em Milo têm uma instância de mensageiro anexado a elas que define a API de mensagens específica à faceta, na maioria dos casos que se conecta a alguma fonte externa (geralmente eventos DOM).
As instâncias do Messenger usam instâncias de subclasses MessageSource para conectar -se a fontes e instâncias externas de subclasses MessengerAPI para criar mensagens internas de nível mais alto e transformar dados de mensagens. Essa arquitetura permite criar uma funcionalidade avançada em apenas algumas linhas de código.
Veja documentação do Messenger.
MILO define o modelo para permitir acesso seguro aos dados sem a necessidade de se preocupar se os dados foram definidos (ele nunca joga quando você acessa dados quando você obtém propriedades de objetos indefinidos) e permitir a possibilidade de assinar alterações de dados semelhantes a qual objeto experimental.
O uso do modelo não requer essas APIs e, diferentemente dessas APIs, permite assinar alterações nas propriedades de seus modelos em qualquer profundidade.
Consulte a demonstração do modelo e a documentação do modelo.
Milo define esta classe para gerenciar a conexão reativa entre objetos que implementam a API de mensagens de dados. Ambas as instâncias da faceta de dados e do modelo são esses objetos.
Você pode criar conexões de uma ou duas vias, definir a profundidade de suas estruturas de dados que deseja observar, desativar essas conexões, por exemplo, quando deseja fazer muitas alterações no modelo sem causar atualizações de dom.
Essas conexões não têm sobrecarga de comparação de dados no loop, como angularjs , e não causam degradação de desempenho quando existem muitos objetos conectados.
Muito em breve, as instâncias do conector suportarão a tradução da estrutura, permitindo a criação de conexões reativas entre modelos com estruturas fixas e árvores DOM com estruturas flexíveis.
Uma ou várias conexões reativas podem ser criadas com Milo.Minder.
Consulte a documentação do conector.
domready e simplifica o roteamento de mensagens entre iframes (consulte a faceta do quadro).O nome de Milo foi escolhido por causa de Milo Minderbinder, um lucro de guerra de Catch 22. Tendo começado com o gerenciamento de operações de bagunça, ele as expandiu para uma empresa comercial lucrativa, que conectou todo mundo a tudo e, naquele Milo e todo mundo "tem uma parte".
MILO A estrutura possui o aglutinante do módulo, que liga os elementos DOM aos componentes (por meio de atributo especial ML-Bind), e o módulo que permite estabelecer conexões reativas ao vivo entre diferentes fontes de dados (modelo e faceta de dados dos componentes são essas fontes de dados).
Coincidentemente, Milo pode ser lido como um acrônimo de Mail Online .
Todas as estruturas em que poderíamos colocar em mãos foram muito primitivas, deixando -nos escrever muito código próprio (jQuery, backbone) ou limitadores demais, com magia suficiente para criar um aplicativo simples muito rápido, mas com controle limitado sobre o funcionamento preciso da estrutura (Angular, ext).
O que sempre desejamos foi uma estrutura que permitiria
Não conseguimos encontrar essa estrutura, então começamos a desenvolver Milo em paralelo com o aplicativo que o usa.
### Protótipo baseado em herança
Milo conta com protótipos JavaScript para criar blocos de estrutura.
JavaScript é uma linguagem muito dinâmica. Permite gravar funções que criam classes ( Component.createComponentClass ), que permitiram implementar um padrão de composição em que cada classe de componente é criada como coleta de blocos predefinidos (facetas) com a configuração de uma faceta que é específica para uma classe construída (tem alguma semelhança com os componentes, embora não sejam criados a partir de blocos).
O JavaScript também permite criar funções de construtor que criam funções possibilitando uma sintaxe muito expressiva para objetos de modelo e também a "compilação" de tempo de execução dos caminhos de acesso ao modelo em funções.
A classe de componentes é baseada em uma classe abstrata FacetedObject que pode ser aplicada a qualquer domínio em que os objetos possam ser representados por meio da coleção de facetas (uma faceta é um objeto de uma determinada classe, ele mantém sua própria configuração, dados e métodos).
De certa forma, o padrão de facetas é uma inversão do padrão do adaptador - enquanto o último permite encontrar uma classe/métodos com funcionalidade específica, o objeto facetado é simplesmente construído para ter essas funcionalidades. Dessa forma, é possível criar um número praticamente ilimitado de classes de componentes com um número muito limitado de blocos de construção sem ter uma hierarquia alta de classes - a maioria dos componentes herdam diretamente da classe de componentes.
Ao mesmo tempo, Milo suporta o mecanismo de herança quando a subclasse pode adicionar facetas àqueles que já estão na superclasse e para redefinir a configuração de facetas herdadas.
Também usamos o padrão Mixin, mas o Mixin em Milo é implementado como um objeto separado que é armazenado na propriedade do objeto host e pode criar métodos de proxy no objeto host, se necessário. Classes Messenger, MessageRce e DataSource são subclasses da classe abstrata de Mixin.
Componentes e facetas se registram em registros que permitem evitar exigi -los de um módulo. Impede dependências circulares entre os módulos.
As dependências do MILO são Proto , uma biblioteca e ponto de manipulação de objetos, um motor de modelos (ambos estão incluídos no Milo Bundle).
Não usamos nenhuma biblioteca DOM Traversal porque:
Em vez disso, os componentes MILO podem ter o DOM Facet que inclui várias funções de conveniência para manipular elementos DOM e existe milo.util.dom - Uma coleção semelhante de funções que podem ser usadas sem componentes.
Milo usa a Biblioteca Proto que possui uma coleção de funções de utilidade para a manipulação de objetos, protótipos, matrizes, funções e cordas. Consulte seu repositório para documentações e razões por trás da decisão de não usar bibliotecas de terceiros.
É incluído com Milo e todas as suas funções estão disponíveis como propriedades do objeto _ , você não precisa carregá -lo separadamente.
http://opensource.org/license/bsd-2-clause
Veja lançamentos
