1. Introdução
Recentemente, estou fazendo a otimização do front-end de um grande projeto bancário on-line. Eu preciso usar uma otimização do cliente de gordura. A idéia geral é que o front-end use a solicitação AJAX para obter dados do back-end, retornar no formato Jason e exibi-los na página. Como esse sistema é muito grande, a solução FAT Client exige inevitavelmente a gravação de muito código JS no cliente. Eu acho que é muito inconveniente para qualquer equipe manter uma grande quantidade de código não estruturado. Então a espinha dorsal veio à minha vista.
Ele fornece uma maneira de estruturar seu código JS, permitindo que você organize seu código JS front-end de uma maneira orientada a objetos. É como se apliquemos o design acionado por domínio no front -end. Podemos dividir um projeto muito grande por módulo. Cada módulo pode ser dividido em vista, modelo e roteador de acordo com os requisitos da espinha dorsal.
Com a espinha dorsal, você pode tratar seus dados como modelos. Com os modelos, você pode criar dados, verificar dados, destruí -los ou salvá -los no servidor. Quando as operações na interface causam mudanças nas propriedades do modelo, o modelo acionará o evento de alteração; Essas visualizações usadas para exibir o status do modelo receberão a mensagem de que o modelo aciona a alteração e, em seguida, emitirá a resposta correspondente e renderá novos dados para a interface. Em um aplicativo completo de backbone, você não precisa escrever código de cola para obter nós por meio de IDs especiais do DOM ou atualizar manualmente as páginas HTML, porque quando o modelo muda, as visualizações serão atualizadas facilmente.
2. Recursos
O backbone é uma estrutura de front-end leve usada para estruturar o gerenciamento de um grande número de JS nas páginas, estabelecer uma conexão perfeita com servidores e visualizações e fornecer uma estrutura básica para a criação de aplicativos complexos.
Deixe -me explicar brevemente os principais recursos e características da espinha dorsal:
2.1 Luz
O código -fonte da Backbone é de apenas cerca de 1000 linhas (após o descommentamento e as linhas em branco), o tamanho do arquivo é de apenas 16kb e o sublinhado da biblioteca de dependência é de apenas 29kb.
Você só precisa gastar um pouco de tempo para entender facilmente a implementação interna da espinha dorsal; ou escreva uma pequena quantidade de código para sobrecarregar alguns dos mecanismos da espinha dorsal; Se você deseja fazer o desenvolvimento secundário com base na espinha dorsal, não é uma coisa complicada.
2.2 estruturado
A espinha dorsal pode desacoplar facilmente os dados, a lógica e as visualizações na página e organizar a estrutura do código de acordo com a espinha dorsal. Você pode atribuir a interação de dados, a lógica de negócios, a interface do usuário e outros trabalhos no projeto a vários colegas para se desenvolver simultaneamente e organizá -los juntos de maneira ordenada. Ao mesmo tempo, isso é muito útil para manutenção e desenvolvimento de projetos grandes e complexos.
2.3 Mecanismo de herança
Na espinha dorsal, os módulos podem ser herdados. Você pode organizar os modelos de dados, coleções e visualizações em seu aplicativo de maneira orientada a objetos para tornar toda a arquitetura mais clara; Você também pode sobrecarregar e estender facilmente os métodos personalizados.
2.4 Estabeleça uma conexão perfeita com o servidor
O backbone possui um conjunto interno de regras de interação com os dados do servidor (se você entender a arquitetura REST, poderá entendê-los facilmente) e a sincronização de dados será executada automaticamente no modelo. Os desenvolvedores do front-end precisam apenas operar nos dados do cliente, e o backbone sincronizará automaticamente os dados operacionais com o servidor.
Isso é uma coisa muito interessante, porque a interface de dados do servidor é transparente para os desenvolvedores de front-end e eles não precisam mais se preocupar em como interagir com o servidor.
No entanto, a interface de dados fornecida pelo servidor também precisa ser compatível com as regras da backbone. Para um novo projeto, podemos tentar usar esse conjunto de regras para criar a interface. Mas se você já possui um conjunto estável de interfaces em seu projeto, pode estar preocupado com o risco de modificação da interface.
Não importa, podemos nos adaptar à interface de dados existente sobrecarregando o método backbone.sync. Para diferentes ambientes de clientes, também podemos implementar diferentes métodos de interação de dados. Por exemplo: quando um usuário usa um serviço através de um navegador de PC, os dados serão sincronizados com o servidor em tempo real; Quando um usuário usa um serviço através de um terminal móvel, considerando os problemas do ambiente de rede, podemos primeiro sincronizar os dados com o banco de dados local e depois sincronizá -los com o servidor quando apropriado. E estes podem ser alcançados apenas sobrecarregando um método.
2.5 Gerenciamento de eventos de interface
No MVC, esperamos separar completamente a apresentação da interface e a lógica de negócios, mas para eventos interativos gerados pelos usuários (como eventos de clique), geralmente os obtemos e vinculamos através de métodos de ligação semelhantes aos do jQuery.
A visão no backbone nos ajuda a organizar eventos de usuário e métodos de execução de maneira ordenada, o que apenas exige que declaremos uma expressão simples, como:
Eventos: {// Ao clicar em um elemento com ID "Salvar", execute o método ADD do View 'Click #Save': 'Add', 'Mousedown .Button': 'Show', 'MouseOver .Button': 'Hide'}Em uma expressão, o nome do evento pode ser qualquer evento DOM (como clique, mouseover, keypress etc.), e o elemento pode ser qualquer seletor suportado pelo jQuery (como seletor de tags, seletor de identificação, seletor de classe etc.).
A visualização vinculará automaticamente os eventos na expressão ao elemento seletor. Quando o evento do elemento é acionado, a exibição chama automaticamente os métodos ligados na expressão.
2.6 Análise de modelo leve
A análise de modelos é um método fornecido em sublinhado. Por que apresento o método no sublinhado ao introduzir recursos de backbone? Como esse método pode nos ajudar a separar melhor a estrutura e a lógica, e o sublinhado é uma biblioteca na qual a Backbone deve confiar.
Os métodos de análise de modelos nos permitem misturar e incorporar código JS em estruturas HTML, assim como o código Java incorporado nas páginas JSP:
<ul> <%para (var i = 0; i <len; i ++) {%> <li> <%= data [i] .title %> </li> <%}%> </li>Através da análise de modelos, não precisamos unir strings ao gerar dinamicamente estruturas HTML. Mais importante, podemos gerenciar a estrutura HTML na exibição de forma independente (por exemplo: estados diferentes podem exibir diferentes estruturas HTML, podemos definir vários arquivos de modelo separados, carregar e renderizar conforme necessário).
2.7 Gerenciamento de eventos personalizado
Na espinha dorsal, você pode usar o método On ou Off para vincular e remover eventos personalizados. Em qualquer lugar, você pode usar o método de gatilho para acionar esses eventos vinculados e todos os métodos que vincularem o evento serão executados, como:
var modelo = new Backbone.model (); // vincula duas funções ao evento de evento personalizado no modelo Model Object Model.On ('Custom', Function (P1, P2) {// TODO}); Model.on ('Custom', function (P1, P2) {// TODO}); // aciona o evento personalizado, e as duas funções vinculadas acima serão chamadas de model.Trigger ('Custom', 'value1', 'value2'); // remove todos os métodos vinculados no modelo de evento personalizado.off ('personalizado'); // aciona o evento personalizado, mas nenhuma função será executada. As funções no evento foram removidas no modelo de etapa anterior.Trigger ('Custom');Se você estiver familiarizado com o jQuery, descobrirá que eles são muito semelhantes aos métodos de ligação, desbaste e acionar no jQuery.
Além disso, a espinha dorsal suporta um evento especial "All". Quando um evento chamado "All" está vinculado a um objeto, o método vinculado no evento "All" também será acionado quando qualquer evento for acionado. Às vezes, esse método pode ser muito útil, por exemplo, podemos ouvir alterações no estado do objeto através do evento "All".
3. Roteador
Em um aplicativo de página única, controlamos a comutação e a apresentação da interface através do JavaScript e obtemos dados do servidor através do AJAX.
O problema que pode surgir é que, quando o usuário deseja retornar à operação anterior, ele pode usar habitualmente os botões "Back" e "para a frente" do navegador, mas o resultado é que a página inteira é alterada porque o usuário não sabe que ele está na mesma página.
Para esse problema, geralmente usamos um hash (ponto de ancoragem) para gravar as ações atuais do usuário e ouvir as ações "avançadas" e "retornar" do usuário através do evento OnhashChange, mas descobrimos que algumas versões mais baixas dos navegadores (como o IE6) não suportam o evento OnhashChange.
Backbone fornece função de controle de roteamento. Através do roteador fornecido pela Backbone, podemos vincular o endereço de roteamento e a função de evento através de uma expressão simples, por exemplo:
var CustomRouter = Backbone.Router.extend({ routes : { '' : 'index', // Execute index method when URL Hash is in the root directory: url# 'list' : 'getList', // Execute getList method when URL Hash is in the list node: url#list 'detail/:id' : 'query', // Execute query method when URL Hash is in the detail Node e passe os dados detalhados como parâmetros para consultar o método: URL#LIST/1001 '*Erro': 'SHOWRROR' // Executa o método de erro quando o hash de URL não corresponde às regras acima, index: function () {alert ('Índice'); }, chuveiro: function (erro) {alert ('erro de erro:' + erro); var custom = new CustomRouter (); Backbone.history.start ();Tente copiar este código para sua página e acessar o seguinte endereço por sua vez (onde o URL indica o endereço da página):
Urlurl#listurl#detalhe/1001url#hash1url#hash2
Tente usar os botões "Back" e "avançado" do navegador para alternar para o endereço que você acabou de inserir.
Você pode ver que, quando o hash do URL mudar, o método ligado será executado. Quando um hash indefinido é encontrado, o método do chuveiro será executado e o hash indefinido é passado para o método.
O backbone registrará as alterações de endereço através do hash por padrão. Para navegadores de versão inferior que não suportam o OnhashChange, as alterações de hash serão monitoradas através do batimento cardíaco do setInterval, para que você não precise se preocupar com problemas de compatibilidade do navegador.
Para os navegadores que suportam o recurso HTML5 PushState, o Backbone também permite criar URLs personalizados através do PushState, mas isso requer alguma adaptação do seu servidor da Web.
3. Aplicabilidade da espinha dorsal
O backbone não é tão aplicável quanto o jQuery e, se você planeja criar um aplicativo web de uma página única grande ou complexa, o backbone é mais adequado.
Se você deseja aplicar o backbone na página do seu site e não há lógica e estrutura complexas na página, isso apenas tornará sua página mais pesada e difícil de manter.
Se o seu projeto não for complicado, mas você gosta profundamente de um determinado recurso (pode ser um modelo de dados, visualizar gerenciamento ou roteador), pode extrair essa parte do código -fonte do backbone porque, no backbone, as dependências entre os módulos não são muito fortes e você pode facilmente obter e usar um deles.
4. Biblioteca de dependência
Você não pode usar a espinha dorsal de forma independente, porque suas funções básicas, operações DOM e Ajax dependem de bibliotecas de terceiros.
4.1 sublinhado
(Obrigatório)
O sublinhado é uma biblioteca de funções básicas para melhorar a eficiência do desenvolvimento. Ele encapsula operações comuns em conjuntos, matrizes, objetos e funções. Assim como o jQuery encapsula os objetos DOM, você pode acessar e manipular facilmente objetos internos do JavaScript através do sublinhado.
A subldescore também fornece alguns métodos de função muito prática, como estrangulamento de funções, análise de modelos etc.
Entrarei em detalhes sobre alguns dos principais métodos em sublinhamento no próximo capítulo, mas antes disso você precisa entender: o sublinhado é uma biblioteca na qual a Backbone deve confiar, porque muitas implementações no backbone são baseadas no sublinhado.
4.2 JQuery e Zepto
(Opcional)
Eu acredito que você definitivamente estará familiarizado com o JQuery, é uma estrutura de navegador cruzada e Ajax.
Para o Zepto, você pode entendê -lo como "versão móvel do jQuery", porque é menor, mais rápido e mais adequado para executar em navegadores de dispositivos móveis, é a mesma sintaxe que o jQuery, para que você possa usá -lo como faria com o jQuery.
Atualmente, o Zepto suporta apenas navegadores com o kernel do Webkit, por isso é compatível com a maioria dos sistemas móveis como iOS, adnroid, symbian, BlackBerry e Meego, enquanto para o Windows Phone ou o Firefox OS, ainda não é suportado.
Como a sintaxe do jQuery e Zepto são iguais, para o backbone, você não tem problemas em usar jQuery ou zepto (é claro, você não pode usar os dois ao mesmo tempo).
Na espinha dorsal, o seletor DOM, o evento DOM e o Ajax usam o método jQuery. A razão pela qual eles são opcionais aqui é que você não usa a função de sincronização de dados e AJAX no backbone, então não precisa importá -los.
Se você não deseja usar jQuery ou Zepto, mas use outras bibliotecas ou personalizadas, desde que sua biblioteca implemente o mesmo seletor de DOM, gerenciamento de eventos e métodos AJAX que a sintaxe do jQuery, não haverá problema.
Backbone permite configurar dinamicamente as bibliotecas de terceiros que você precisa usar através do método Setdomlibrary, que é frequentemente usado para:
Embora sua biblioteca personalizada contenha métodos com a mesma sintaxe que o jQuery, a variável global não é $ e você deseja manter o nome existente. No momento, você pode defini -lo como o objeto referenciado internamente pelo método setDomlibrary.
Você deseja verificar o ambiente do usuário para decidir qual biblioteca é mais adequada para uso. Por exemplo: se o usuário acessar o uso de um navegador de PC, carregue jQuery e se o usuário acessar através de um terminal móvel, carregue Zepto.