el.js
1.0.0
Uma estrutura de microaplicativo razoável com capacidade de reutilização prática.
el.js é uma estrutura construída sobre modelos Riot.js para construção de microaplicativos.
As estruturas da Web exigem que os desenvolvedores construam a maioria, senão todas as suas páginas da Web, para serem aplicativos da Web dinâmicos. Isso permite que os desenvolvedores garantam que tudo em sua página da Web obedeça a um único fluxo de renderização consistente e previsível, sobre o qual eles possam raciocinar. No entanto, também existem muitas desvantagens em comparação com sites estáticos tradicionais, incluindo esquemas de cache mais complexos, tempos de carregamento mais longos e problemas de SEO. Microapps oferecem uma solução poderosa para essas desvantagens. Em vez de construir aplicativos web gigantescos e monolíticos, crie pequenos aplicativos e incorpore-os em suas páginas estáticas.
Um microaplicativo executa uma funcionalidade pequena e com escopo muito restrito que pode ser reutilizada continuamente. Os microaplicativos não diferem muito da ideia de widgets incorporáveis antes dos frameworks se tornarem o padrão, mas diferem na execução, enfatizando a dependência de frameworks razoáveis e a reutilização prática.
HTML: index.html
< html >
< head >
<!-- Head Content -->
< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
</ head >
< body >
< my-form >
< div >
< label > Type Your Name </ label >
<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
< my-input bind =' name ' />
</ div >
< div >
< span > Your Name Is </ span >
< span > { data.name } </ span >
</ div
</ my-form >
<!-- el.js Library -->
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
< script src =" my-script.js " > </ script >
</ body >
</ html >JS: meu-script.js
// window.El is the global value
// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
constuctor ( ) {
// data contains your state
this . data = {
name : '?' ,
}
// your custom tag name
this . tag = 'my-form'
super ( )
}
}
Form . register ( )
// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
constructor ( ) {
// your custom tag name
this . tag = 'my-input'
// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
this . html = '<input onkeydown="{ change }" />'
super ( )
}
}
Input . register ( )
El . mount ( '*' ) Adicione esta tag na parte inferior antes de seus scripts e dependências personalizados e faça referência a window.El.
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >Instalar via NPM
npm install el . js -- saveSuporta CommonJS
var El = require ' el.js 'ou importações ES6
import El from ' el.js 'Este tipo é referenciado por El.Form para armazenar as informações utilizadas para validar o campo associado ao name .
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| configuração | MiddlewareFunction ou [ MiddlewareFunction ] | indefinido | Este tipo armazena o MiddlewareFunction ou MiddlewareFunctions original usado para criar valid() |
| nome | corda | '' | Este é o nome de um campo na propriedade de dados de El.Form ao qual o restante deste tipo faz referência. |
| referência | Árvore Referencial | indefinido | Este é um link para a árvore de dados mutáveis que pode recuperar o valor do nome chamando this.ref.get( name ) |
| Nome | Tipo | Descrição |
|---|---|---|
| validar | (Árvore Referencial, string) => Promessa | Este método chama todos os MiddlwareFunctions em série usando promessas. |
Este tipo é usado para definir middleware para El.Form . Faça validação e higienização de entrada com estas funções como:
function isRequired ( value ) {
value = value . trim ( )
if ( value && value != '' ) {
return value
}
throw new Error ( 'Required' )
} Este tipo é usado internamente em locais para facilitar o retorno de promessas por referência.
Esta é a classe base para todas as classes El. Cada El.View corresponde a uma tag personalizada. Estenda esta classe para criar suas próprias tags personalizadas.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| css | corda | '' | Esta é uma string que representa o CSS da tag. Ele é injetado uma vez por classe na parte inferior da tag quando montada. |
| dados | Árvore Referencial | indefinido | Esta propriedade armazena o estado da tag. |
| HTML | corda | '' | Esta é uma string que representa o html interno da tag. |
| raiz | Elemento HTML | indefinido | Esta propriedade armazena uma referência à tag na sua página da Web à qual a visualização montada está vinculada. |
| marcação | corda | '' | Este é o nome da tag personalizada. |
| Nome | Tipo | Descrição |
|---|---|---|
| antesInit | () => | O código aqui é executado antes da tag ser inicializada. |
| iniciar | () => | O código aqui é executado quando a tag é inicializada, mas antes de ser montada. Recomendado - Se você precisar vincular ao ciclo de vida da tag, faça isso aqui. |
| agendar atualização | () => Promessa | Este método agenda uma chamada de atualização assíncrona. Ele atualiza chamadas em lote na visualização superior se houver visualizações aninhadas. Ele retorna uma promessa para quando a atualização for executada |
| atualizar | () => | Este método atualiza a tag. Isso é chamado implicitamente após eventos acionados na página da web. Consulte onkeydown em Um 'Exemplo de formulário simples' para tal caso. Chame manualmente esse método para atualizar a tag. Recomendado - Recomenda-se chamar manualmente scheduleUpdate() para evitar cascatas de atualização síncronas. |
Cada El.View é um emissor de eventos. Consulte riot.observable para obter mais documentação, http://riotjs.com/api/observable/
| Nome | Tipo | Descrição |
|---|---|---|
| El.View.register | () => | Isso registra a tag personalizada atual no mecanismo de renderização. Chame-o depois de definir uma tag |
Esta classe é usada para representar formulários, bem como microaplicativos orientados por IO mais complexos. Esta classe fornece validação de formulário comum e lógica de envio de formulário.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| configurações | Objeto | indefinido | Forneça um mapa de nomes para MiddlewareFunction ou array de MiddlewareFunctions . Consulte MiddlewareFunction para obter mais informações. |
| entradas | Objeto | nulo | Cada elemento em configs é convertido em um elemento em inputs . Modificar isso diretamente não é recomendado. |
| Nome | Tipo | Descrição |
|---|---|---|
| iniciar | () => | O código aqui é executado quando a tag é inicializada, mas antes de ser montada. Chama initInputs() então chame isso manualmente - ou chame super() no ES6. Recomendado - Se você precisar vincular ao ciclo de vida da tag, faça isso aqui. |
| entradas de inicialização | () => | Compile as configurações e atribua a estrutura emitida às entradas . entradas como configurações contêm referências ao campo nomeado em data . |
| enviar | (Evento) => Promessa | Este método aciona a validação para cada campo nos dados conforme definido em configs . Este método deve ser chamado como um manipulador/ouvinte de eventos. Ele chama submit() se a validação for bem-sucedida, retorna uma promessa para quando a validação for bem-sucedida/falha |
| _enviar | () => | O código aqui é executado quando o formulário é validado durante a chamada submit() |
Esta é a classe base para construir entradas de formulário e controles IO.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| vincular | corda | '' | Esta propriedade determina a qual campo dos dados do formulário pai isso será vinculado. |
| pesquisa | corda | '' | O mesmo que bind , obsoleto . |
| mensagem de erro | corda | '' | Esta propriedade é definida como a primeira mensagem de erro que a promessa retornada de this.input.validate captura. |
| entrada | Tipo de entrada | nulo | Esta propriedade é obtida da propriedade inputs do formulário pai com base no que a ligação do campo dos dados pai especifica. |
| válido | bool | falso | Esta propriedade é usada para determinar o estado de validação em que a entrada se encontra. Ela é definida quando this.input.validate é chamada, só é definida como true se a promessa retornada de this.input.validate for executada completamente. |
| Nome | Tipo | Descrição |
|---|---|---|
| mudar | (Evento) => | Este método atualiza a entrada e depois a valida. Este método deve ser chamado por um manipulador/ouvinte de eventos. |
| mudado | () => | Este método é chamado quando a promessa retornada de this.input.validate é executada completamente. |
| limparErro | () => | Este método define errorMessage como '' e é chamado antes da validação. |
| erro | (Erro) => | Este método define errorMessage e é chamado quando a validação falha. |
| obterValor | (Evento) => qualquer | Este método obtém o valor da entrada. Por padrão, este método retorna o target.value do Event . |
| validar | (PromiseReference?) => Promessa | Este método valida a entrada, retorna uma promessa representando o sucesso e a falha da validação tanto por referência (necessária internamente) quanto por valor. |
| Nome | Tipo | Descrição |
|---|---|---|
| El.scheduleUpdate | () => | Agende a atualização para todos os microaplicativos da página. |
As funções de ciclo de vida de el.js são herdadas de Riot.js.
el.js usa árvores referenciais para armazenar seus dados de formulário.
Implemente os métodos get, set, on, once, off do referencial em torno de sua própria estrutura de dados e coloque-os como propriedade de dados.
Um contêiner é uma tag personalizada que fornece métodos para usar em seu modelo interno e cujo conteúdo pode ser totalmente substituído (contém conteúdo apenas em uma ou mais tags). Um controle é um componente que interage com o usuário com o objetivo de exibir informações de uma forma interessante ou obter informações como entrada, seleção ou incorporação do GoogleMaps.
Em vez de construir widgets de maneira fortemente acoplada, decomponha o widget em contêineres e controles para maximizar a reutilização. Estruture o HTML interno da maneira que fizer mais sentido. Em seguida, libere seu widget, contêiner e controles completos para seus usuários para que eles possam personalizar o widget de acordo com seus diversos requisitos.
Ao abstrair os elementos da interface do usuário dessa forma, é muito mais fácil para outra pessoa reutilizar e personalizar seu código. Consulte shop.js para uma implementação.
É melhor usar um único armazenamento de estado de alto nível para simplificar o salvamento e a restauração do estado de sua página da web ou de todo o site.
Isso pode ser conseguido fornecendo a todos os contêineres de nível superior da página o mesmo campo de dados . através da chamada de montagem inicial
var data = {
state0 : 0 ,
state1 : 1 ,
}
El . mount ( '*' , { data : data } )Ao contrário da renderização normal da Riot, el.js permite o acesso implícito de valores em this.parent e this.parent...parent por meio da herança prototípica do contexto de renderização. Isso é feito para evitar a transmissão repetida dos mesmos dados por meio de contêineres aninhados, pois são propensos a erros e excessivamente detalhados. Isso também facilita a construção de contêineres e controles.
Passando explicitamente a variável de dados:
< my-container-1 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value1 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value3 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )É equivalente a referenciar implicitamente a variável de dados.
< my-container-1 >
< my-container-2 >
< my-container-3 >
value: { data.value1 }
</ my-container-3 >
< my-container-3 >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 >
< my-container-3 >
value: { data.value3 }
</ my-container-3 >
< my-container-3 >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) BSD
