A espinha dorsal deve confiar no subscore.js a ser usado. Ele deve usar funções no sublinhado para concluir as operações básicas de acesso a elementos da página e elementos de processamento.
NOTA: O backbone funciona bem com outras bibliotecas JS, por isso é uma biblioteca, não uma estrutura.
O sublinhado não estende o objeto nativo, mas chama o método _ () para encapsular. Depois que o encapsulamento é concluído, o objeto JS se torna um objeto sublinhado. Você também pode obter os dados no objeto JS nativo através do método value () do objeto sublinhado. (JQuery obtém objeto jQuery através do método $ ())
O sublinhado possui mais de 60 funções no total. De acordo com os diferentes objetos de processamento, ele pode ser dividido em cinco módulos principais: classe de coleta, classe de matriz, classe de função funcional, classe de objeto e classe de função da ferramenta.
Subscore modelo () Função Descrição:
Esta função contém três modelos:
(1) < %>: contém código lógico e não será exibido após a renderização.
(2) < %= %>: Tipo de dados, exiba dados após a renderização.
(3) < %- %>: Converta tags HTML em strings comuns para evitar ataques de código.
Formato de chamada:
_.template (TemplateString, [Data], [Configuração])
Nenhuma ligação de dados bidirecional é implementada.
1. Encapsulamento de objeto sublinhado
O sublinhado não se estende no protótipo de objeto JavaScript nativo, mas encapsula dados em um objeto personalizado como o jQuery (a seguir referido como "objeto sublinhado").
Você pode obter dados nativos de JavaScript chamando o método value () de um objeto sublinhado, por exemplo:
// Defina um objeto embutido JavaScript var jsdata = {name: 'data'} // Crie o objeto como um objeto sublinhado através do método _ () // O protótipo do objeto subdedata contém todos os métodos definidos no sublinhamento. Você pode usar o VAR subdordataata = _ (jsdata); // Obtenha dados nativos através do método do valor, ou seja, jsdata subdoredata.value ();2. Chamada prioritária para JavaScript 1.6 Métodos internos
Existem muitos métodos em sublinhamento que foram incluídos na especificação no JavaScript 1.6. Portanto, dentro do objeto sublinhado, métodos internos fornecidos pelo ambiente do host (se o ambiente do host tiver implementado esses métodos) será chamado primeiro para melhorar a eficiência da execução da função.
Para ambientes de host que não suportam o JavaScript 1.6, o sublinhado os implementará à sua maneira e, para os desenvolvedores, eles são completamente transparentes.
O ambiente do host mencionado aqui pode ser o ambiente de execução do Node.js ou o navegador do cliente.
3. Altere o espaço para nome
O subscore usa _ (sublinhado) por padrão para acessar e criar objetos, mas esse nome pode não cumprir nossas especificações de nomenclatura ou pode causar facilmente conflitos de nomeação.
Podemos alterar o nome de sublinhado através do método noconflict () e restaurar o valor antes da variável _ (sublinheira), por exemplo:
<script type = "text/javascript"> var _ = 'variável personalizada'; </script> <script type = "text/javascript" src = "subscore/subscore-min.js"> </script> <script type = "text/javascript"> // subscore objeto console.dir (_); // Renomeie o objeto sublinhado para nós e, em seguida, acesse e crie o objeto sublinhado através de nós var US = _.noconflict (); // saída "variável personalizada" console.dir (_); </script>
4. Operação em cadeia
Lembre -se de como vinculamos as operações no jQuery? Por exemplo:
$ ('a') .css ('posição', 'relativo') .attr ('href', '#') .show ();O sublinhado também suporta operações da cadeia, mas você precisa chamar o método Chain () para declarar:
var arr = [10, 20, 30]; _ (arr) .chain () .map (function (item) {return item ++;}) .first () .Value ();Se o método Chain () for chamado, o sublinhado encapsulará o método chamado em um fechamento, encapsulará o valor de retorno em um objeto sublinhado e retornará:
// Esta é uma função chave no sublinhamento para implementar operações da cadeia. Ele encapsula o valor de retorno em um novo objeto sublinhado e chama o método Chain () novamente para fornecer suporte para a próxima função na cadeia de métodos. var resultado = função (obj, cadeia) {cadeia de retorno? _ (obj) .chain (): obj; }5. Expanda sublinhado
Podemos estender facilmente métodos personalizados para sublinhar via método Mixin (), por exemplo:
_.Mixin ({Method1: function (object) {// TODO}, Method2: function (arr) {// TODO}, Method3: function (fn) {// TODO}});Esses métodos são anexados ao objeto protótipo sublinhado, que pode ser usado por todos os objetos sublinhados criados e desfrutam do mesmo ambiente que outros métodos.
6. Travesse a coleção
Cada () e Map () métodos são os dois métodos mais usados. Eles são usados para iterar sobre uma coleção (matriz ou objeto) e processar cada elemento da coleção, por sua vez, por exemplo:
var arr = [1, 2, 3]; _ (arr) .map (function (item, i) {arr [i] = item + 1;}); var obj = {primeiro: 1, segundo: 2} _ (obj) .Each (function (value, chave) {return obj [key] = value + 1;});O método map () tem a mesma função e parâmetros que cada () método, mas registra o resultado retornado por cada função de iteração a uma nova matriz e retorna.
7. Trenação da função
A limitação da função refere -se ao controle da frequência ou intervalo de execução de uma função (assim como o portão que controla o fluxo de água). O subscore fornece dois métodos: debounce () e acelerador () para estrangulamento de funções.
Para descrever esses dois métodos com mais clareza, suponha que precisamos implementar dois requisitos:
Requisito 1: Quando o usuário insere os critérios de pesquisa na caixa de texto, as palavras -chave correspondentes são consultadas e solicitadas automaticamente ao usuário (assim como ao inserir a palavra -chave de pesquisa em tmall)
Primeiro, analise o primeiro requisito. Podemos vincular o evento KeyPress da caixa de texto. Quando o conteúdo da caixa de entrada mudar, consulte a palavra -chave correspondente e exiba -a. Suponha que eu queira consultar o "Windows Phone", que contém 13 caracteres, e levou apenas 1 segundo para eu concluir a entrada (parece um pouco rápido, é o que significa); em seguida, dentro deste 1 segundo, o método de consulta foi chamado 13 vezes. Isso é uma coisa muito assustadora, e se o TMALL for implementado assim, estou preocupado que ele morra antes do dia dos singles (é claro, não é tão frágil, mas definitivamente não é a melhor solução)
Uma abordagem melhor é consultar a palavra -chave correspondente quando o usuário terminar a entrada ou está aguardando um prompt (talvez ele esteja com preguiça de inserir o seguinte conteúdo).
Finalmente, descobrimos que, em ambos os casos, esperávamos, o usuário interromperá temporariamente a entrada, por isso decidimos consultar depois que o usuário faz uma pausa na entrada de 200 milissegundos (se o usuário estiver constantemente digitando conteúdo, achamos que ele pode ser muito claro sobre a palavra -chave que deseja, então espere e solicite novamente)
Neste momento, usando a função DeBounce () no sublinhamento, podemos implementar facilmente esse requisito:
<input type = "text" id = "search" name = "search" /> <script type = "text /javascript"> var query = _ (function () {// operação de consulta aqui}). Debounce (200); $ ('#pesquisa'). bind ('keypress', consulta); </script>Você pode ver que nosso código é muito conciso e o controle de estrangulamento foi implementado no método DeBounce (). Dizemos apenas que, se a função de consulta não tiver sido chamada em 200 milissegundos, executaremos nossa operação de consulta e, em seguida, vincularemos a função de consulta ao evento KeyPress na caixa de entrada.
Como surgiu a função de consulta? Quando chamamos o método DeBounce (), passaremos uma função que executa a operação de consulta e uma hora (milissegundos). O método DeBounce () acelerará a função com base no tempo em que passamos e retornará uma nova função (ou seja, a função de consulta). Podemos chamar a função de consulta com confiança e ousadia, e o método DeBounce () nos ajudará a controlá -lo conforme necessário.
Requisito 2: Quando o usuário arrasta a barra de rolagem do navegador, ligue para a interface do servidor para verificar se existe um novo conteúdo
Vamos analisar o segundo requisito. Podemos vincular o método de consulta ao evento da janela.
Podemos usar o método DeBounce () acima para executar o controle de limitação? Quando o usuário terminar de arrastar a barra de rolagem, consulte o novo conteúdo? Mas isso é inconsistente com os requisitos, e os usuários esperam ver alterações no novo conteúdo durante o processo de arrastar.
Por isso, decidimos fazer isso: quando o usuário arrasta, o intervalo entre cada duas consultas não é inferior a 500 milissegundos, se o usuário arrastar por 1 segundo, isso poderá desencadear 200 eventos do OnCroll, mas fazemos apenas 2 consultas no máximo.
Usando o método do acelerador () no sublinhado, também podemos implementar facilmente esse requisito:
<script type = "text/javascript"> var query = _ (function () {// operação de consulta aqui}). acelerador (500); $ (janela) .bind ('roll', consulta); </script>O código ainda é muito conciso, porque dentro do método do acelerador (), todos os controles que implementamos já estão.
Você deve ter descoberto que os dois métodos de debounce () e acelerador () são muito semelhantes (incluindo o método de chamada e o valor de retorno), mas suas funções são diferentes.
Todos eles são usados para limitar a função e as funções de controle não são chamadas com frequência, salvando recursos de clientes e servidores.
O método DeBounce () concentra -se no intervalo entre a execução da função, ou seja, o tempo de chamada da função duas vezes não pode ser menor que o tempo especificado.
O método do acelerador () se concentra mais na frequência de execução da função, ou seja, a função será chamada apenas uma vez dentro da frequência especificada.
8. Análise de modelo
O subscore fornece uma função de análise de modelo leve que nos ajuda a organizar efetivamente a estrutura e a lógica da página.
Vou apresentá -lo com um exemplo:
<!-usado para exibir tags renderizadas-> <ul id = "elemento"> </ul> <!-Defina um modelo e coloque o conteúdo do modelo em uma tag de script-> <script type = "text/modelo" id = "tpl"> <%para (var i = 0; <%= item.lastName%> </span> <pan> <%-item.city%> </span> </li> <%}%> </sCript> <script type = "text/javascript" src = "subdércore/subscore-min.js"> </script> <script = "text/javro $ ('#elemento'), tpl = $ ('#tpl'). html (); // Crie dados, que podem ser os dados Var que você obtém do servidor = {list: [{FirstName: '<a href = "#"> zhang </a>', lastName: 'San', cidade: 'shanghai'}, {FirstName: 'li', "Doustname: 'Si', '»}, " 'Wang', lastName: 'wu', cidade: 'guangzhou'}, {primeiro nome: 'zhao', sounname: 'liU', cidade: 'shenzhen'}]} // analisar o modelo, retornar o conteúdo analisado var html = _.template (TPL, dados); // preenche o conteúdo analisado no elemento de renderização.html (html); </script>Neste exemplo, colocamos o conteúdo do modelo em uma tag <cript>, você deve ter notado que o tipo da tag é texto/modelo em vez de texto/javascript, porque não pode ser executado diretamente como um script JavaScript.
Eu também recomendo que você coloque o conteúdo do modelo em <Script> porque, se você os escrever em um <div> ou em outras tags, elas poderão ser adicionadas à árvore Dom para análise (mesmo que você oculte esta tag, ela não será evitada).
_.Template Função do modelo pode analisar apenas 3 tipos de tags de modelo (isso é muito mais simples que o Smarty e o JSTL):
< %>: Usado para conter código JavaScript que será executado quando os dados forem renderizados.
< %= %>: Usado para produzir dados, pode ser uma variável, atributo de um objeto ou uma chamada de função (para produzir o valor de retorno da função).
< %- %>: Usado para produzir dados e converter caracteres HTML contidos nos dados em formulários de entidade (por exemplo, ele converte cotações duplas a se formar), para evitar ataques XSS.
Quando queremos exibir HTML nos dados como texto, geralmente usamos a tag < %- %>.
O subscore também permite modificar essas 3 formas de tags. Se quisermos usar { % %}, { %= %}, { %- %} como tags, podemos fazê-lo modificando modificações, assim: assim:
_.templateSettings = {avaliação: // {%([/s/s]+?)/%/}/g, interpolate: // {%= ([/s/s]+?)/%/}/g, escape: // {([/s/s]+?)Neste exemplo, passamos o conteúdo e os dados do modelo a serem preenchidos no método do modelo, que será processado na seguinte ordem:
(1) Analisando o conteúdo do modelo em JavaScript executável (tags de modelo Parse)
(2) Modifique o escopo JavaScript analisado para o objeto de dados que passamos com a instrução, que nos permite acessar diretamente as propriedades do objeto de dados por meio de variáveis no modelo.
(3) Executar JavaScript analisado (preenchendo dados em modelo)
(4) retornar o resultado após a execução
Frequentemente, encontramos uma situação em que o método de modelo é chamado várias vezes para renderizar os dados ao mesmo modelo.
Suponha que tenhamos uma lista de paginação e cada peça de dados da lista seja renderizada através de um modelo. Quando o usuário inserir a próxima página, obteremos os dados da próxima página e renderizamos novamente. De fato, o modelo é o mesmo toda vez que for renderizado, mas todos os processos de processamento do modelo descritos agora sempre serão executados.
De fato, o método de sublinhamento de modelo fornece uma maneira mais eficiente de chamar. Modificamos as duas últimas frases no código acima para:
// analisar o modelo, retornar o conteúdo analisado var render = _.template (tpl); var html = render (dados); // preenche o conteúdo analisado no elemento de renderização.html (html);
Você encontrará uma diferença sutil: quando chamarmos o método do modelo, passamos apenas o conteúdo do modelo, mas não os dados. No momento, o método do modelo analisará o conteúdo do modelo, gerará o código JavaScript executável analisado e retornará uma função, e o corpo da função é o JavaScript analisado. Portanto, quando chamamos essa função para renderizar dados, omitimos a ação de análise do modelo.
Você deve armazenar a função retornada (assim como eu o armazenar na variável renderizar) e, em seguida, renderizar os dados chamando a função, especialmente se o mesmo modelo puder ser renderizado várias vezes. Isso pode melhorar a eficiência da execução (a melhoria específica deve depender da duração e da complexidade do seu modelo, mas é um bom hábito de qualquer maneira).