Prefácio
O uso do nó para separar o modelo de desenvolvimento frontal e traseiro traz algumas vantagens do processo de desempenho e desenvolvimento, mas também enfrenta muitos desafios. Sob a complexa arquitetura técnica e complexa da Taobao, o back-end deve confiar no Java para construir a infraestrutura e fornecer interfaces comerciais relevantes para o front-end. Uma das tarefas mais importantes do nó em todo o ambiente é procurar essas interfaces de negócios para facilitar a integração de dados no front-end (lateral do nó e lado do navegador) para renderização de páginas. Como fazer um bom trabalho no trabalho da agência, para que, após o desenvolvimento da frente e de trás, ainda possa ser conectado perfeitamente no processo, seja um problema que precisamos considerar. Este artigo discutirá essa questão e proporá soluções.
Como o back-end fornece uma variedade de interfaces, os desenvolvedores também podem ter várias maneiras de escrever código do lado do nó para acessar essas interfaces. Se não executarmos o processamento de arquitetura unificada em métodos e uso de acesso à interface, isso trará os seguintes problemas:
1. Cada desenvolvedor usa seu próprio estilo de código para escrever código de acesso à interface, causando confusão no diretório do projeto e no estilo de codificação, o que torna relativamente difícil manter.
2. Todo desenvolvedor escreve seu próprio método de dados simulados. Após a conclusão do desenvolvimento, ele precisa modificar manualmente o código para remover a simulação.
3. Para realizar a troca de diferentes ambientes da interface (diariamente, pré-emissão, online), cada desenvolvedor pode manter alguns arquivos de configuração.
4. O método de chamada de interface de dados não pode ser facilmente reutilizado por vários modelos de negócios.
5. O contrato de descrição para a interface de dados está disperso em todos os cantos do código, que podem ser inconsistentes com os documentos da interface acordados pelo pessoal de back -end.
6. Depois que todo o projeto é distribuído, o custo de conexão de interfaces ou regressão de teste ainda é muito alto e precisa envolver cada provedor de interface e usuário.
Portanto, esperamos ter essa estrutura que use o mecanismo fornecido por essa estrutura para descrever todas as interfaces externas dependentes nos projetos de engenharia, gerenciá-los de maneira unificada e fornecer métodos flexíveis de modelagem e chamada de interface, além de métodos convenientes de ambiente on-line e de troca de ambiente on-line para combinar o desenvolvimento de front-end e traseiro e traseiro. O ModelProxy é uma estrutura leve que atende a esses requisitos. É um dos componentes principais da estrutura do meio do caminho e também pode ser usado sozinho. O uso do ModelProxy pode trazer as seguintes vantagens:
1. Diferentes desenvolvedores possuem métodos de escrita de código de acesso à interface unificados, significado claro e reduzem a dificuldade de manutenção.
2. A estrutura adota o modo de fábrica + singleton para realizar múltiplas multiplexação da configuração da interface ao mesmo tempo. E os desenvolvedores podem personalizar e montar seus próprios modelos de negócios (injeção de dependência).
3. Pode alternar facilmente ambientes on-line, diário e pré-emissão.
4. Motores simulados embutidos, como rio-mock e mockjs, fornecer dados simulados é muito conveniente.
5. Use arquivos de configuração da interface para gerenciar as descrições de dependência da interface uniformemente para evitar ser espalhadas em vários códigos.
6. Suporta o compartilhamento de modelos no lado do navegador, que pode ser usado para renderizar dados front-end. Todo o processo de proxy é transparente para o navegador.
7. O próprio arquivo de configuração da interface é um documento de descrição estruturado e o documento pode ser gerado automaticamente usando a coleção de ferramentas do rio. Também pode ser usado para testes de interface de automação relacionados para formar um loop fechado em todo o processo de desenvolvimento.
Diagrama de princípios de trabalho do ModelProxy e Diagrama de Processo de Desenvolvimento Relacionado
Na figura acima, o desenvolvedor precisa primeiro descrever todas as dependências da interface de back -end no projeto e escrevê -lo no arquivo de configuração do interface.json de acordo com o formato JSON especificado. Se necessário, um arquivo de regra precisa ser gravado para cada interface, ou seja, a interface rege parte da figura. Este arquivo de regra é usado para zombar de dados durante o estágio de desenvolvimento ou para usar o conjunto de ferramentas do rio para verificar a interface durante o estágio de depuração conjunta. O conteúdo do arquivo de regra depende do que o motor simulado é usado (como MockJs, River-Mock etc.). Após a conclusão da configuração, você pode criar seu próprio modelo de negócios no código de acordo com suas necessidades.
Aqui está um exemplo simples:
【Exemplo 1】
A primeira etapa é criar o arquivo de configuração da interface interface.json no diretório do projeto e adicionar a definição JSON da interface de pesquisa principal.
A cópia do código é a seguinte:
{
"Title": "Pad Taobao Project Data Interface Collection Definition",
"versão": "1.0.0",
"Engine": "MockJs",
"regraBase": "./interfacerules/",
"status": "online",
"Interfaces": [{
"Nome": "Interface de pesquisa principal",
"id": "search.getItems",
"URLS": {
"Online": "http://smtaobao.com/client/search.do"
}
}]
}
Etapa 2 Criar e usar o modelo no código
A cópia do código é a seguinte:
// Introduzir módulo
var modeloproxy = requer ('modelproxy');
// A inicialização global apresenta arquivos de configuração de interface (Nota: O trabalho de inicialização apenas uma vez)
ModelProxy.init ('./interface.json');
// Para mais modo de criação, consulte o artigo a seguir
var searchModel = new ModelProxy ({
SearchItems: 'Search.getItems' // Nome do método personalizado: o ID da interface definido no arquivo de configuração
});
// Use Model, Nota: Os parâmetros necessários para chamar o método são os parâmetros necessários para a interface real.
SearchModel.searchItems ({q: 'iPhone6'})
//! Observe que você deve chamar o método feito para especificar a função de retorno de chamada para obter os dados obtidos chamando o SearchItems de forma assíncrona acima!
.done (função (dados) {
console.log (dados);
})
.Error (função (err) {
console.log (err);
});
A riqueza de recursos do ModelProxy é que ele suporta várias formas de perfis para criar modelos de negócios que exigem negócios:
Crie um objeto usando ID da interface> levará a palavra após a última ''. ' número de identificação como o nome do método
A cópia do código é a seguinte:
ModelProxy.Create ('Search.getItem');
Use o valor do valor da chave JSON Object> Nome do método personalizado: ID da interface
A cópia do código é a seguinte:
ModelProxy.create ({
getName: 'session.getUsername',
getMyCarts: 'Cart.getcarts'
});
Use o formulário da matriz> Pegue a palavra após o último. Número como o nome do método
Os nomes de chamadas de método gerados no exemplo a seguir são: Cart_getItem, getItem, sugestão, GetName
A cópia do código é a seguinte:
ModelProxy.create (['Cart.getItem', 'Search.getItem', 'Search.Suggest', 'Session.User.getName']);
Formulário de prefixo> Todos os IDs de interface que satisfazem o prefixo serão introduzidos no objeto e a última parte é tomada como o nome do método
A cópia do código é a seguinte:
ModelProxy.Create ('Search.*');
Ao mesmo tempo, usando esses modelos, você pode implementar facilmente solicitações de mesclagem ou solicitações de dependência e renderizar modelos relacionados
[Exemplo 2] Solicitação de mesclagem
A cópia do código é a seguinte:
var modelo = new ModelProxy ('pesquisa.*');
// Solicitação de mesclagem (o método do modelo chamado abaixo é especificado ao configurar o ID da interface, exceto para feito)
Model.Suggest ({q: 'feminino'})
.List ({Keyword: 'iPhone6'})
.getNav ({Key: 'Popular Clothing'})
.DONE (função (Data1, Data2, Data3) {
// A ordem dos parâmetros é consistente com a ordem das chamadas de método
console.log (data1, data2, data3);
});
[Exemplo 3] Solicitação de dependência
A cópia do código é a seguinte:
var modelo = novo ModelProxy ({
getUser: 'session.getUser',
getMyorderList: 'Order.getOrder'
});
// Obtenha o ID do usuário primeiro e depois obtenha a lista de pedidos com base no número de identificação
Model.getUser ({sid: 'fdkaldjfgsakls0322yf8'})
.done (função (dados) {
var uid = data.uid;
// Solicitação de dados secundários depende do primeiro número de identificação obtido
this.getMyorderList ({id: uid})
.done (função (dados) {
console.log (dados);
});
});
Além disso, o ModelProxy pode ser usado não apenas no lado do nó, mas também no lado do navegador. Basta apresentar o ModelProxy-client.js fornecido pelo pacote oficial na página.
[Exemplo 4] Usando o ModelProxy no lado do navegador
A cópia do código é a seguinte:
<!-Introduziu o módulo ModelProxy, que é um módulo padrão encapsulado por Kissy->
<script src = "ModelProxy-client.js"> </script>
<script type = "text/javascript">
Kissy.use ("ModelProxy", função (S, ModelProxy) {
//! Configure o caminho básico, que é consistente com o caminho de interceptação configurado na segunda etapa!
// e há uma configuração global e apenas uma vez!
ModelProxy.configBase ('/Model/');
// Crie um modelo
var searchModel = ModelProxy.Create ('Search.*');
SearchModel
.List ({q: 'ihpone6'})
.List ({q: 'Shangchao'})
.SUGGEST ({q: 'i'})
.getnav ({q: 'skateboard'})
.Done (função (Data1, Data2, Data3, Data4) {
console.log ({
"list_ihpone6": data1,
"list_shocksuit": data2,
"sugest_i": data3,
"getNav_Skateboard": Data4
});
});
});
</script>
Ao mesmo tempo, o ModelProxy pode ser usado com o Midway-XTPL, outro componente central do Midway, para realizar o compartilhamento completo de dados, modelos e processos de renderização relacionados no navegador e no lado do servidor. Para tutoriais detalhados e documentação sobre ModelProxy, mude para https://github.com/purejs/modelproxy
Resumir
O ModelProxy existe como uma estrutura leve configurada, fornecendo métodos de montagem e uso de modelos de interface amigáveis e, ao mesmo tempo, resolve o problema de especificação de uso da interface na separação dos modos de desenvolvimento front-end e back-end. Durante todo o processo de desenvolvimento do projeto, a interface sempre precisa ser definida e descrita uma vez, e os desenvolvedores do front-end podem fazer referência a ele. Ao mesmo tempo, a ferramenta do rio é usada para gerar automaticamente documentos, formar um contrato com os desenvolvedores de back-end e conduzir testes automatizados relacionados, otimizando bastante todo o processo de desenvolvimento de engenharia de software.
【Nota】 O rio é um termo geral para as especificações da interface unificada do front-end e as ferramentas relacionadas desenvolvidas pelo grupo Alibaba e desenvolvidas pelo grupo Alibaba.