prática Vue.js (2): rastreio função da tabela de busca, a triagem e a paginação multi-estado

E na semana passada a primeira mensagem hands-on tutoriais , como neste artigo, vou continuar de uma característica comum - começando forma, mostrando algumas das propriedades elegantes em Vue.js. Ao mesmo tempo, vai também funções de filtro atributos computados foram comparados, indicando que os seus cenários de aplicação, mas também para se preparar para a parte do filtro versão função vue2.0 a ser eliminado.

Análise de requisitos

Ou começar começo da demanda, pensar sobre o que possui para alcançar tal nota um, como o processo geral, que cenários de aplicação.

A tabela em si é um componente muito comum para um bom desempenho quando a mostrar alguns dados complexos.
Ao comparar os dados por um longo tempo, precisamos fornecer algumas condições de filtragem para permitir que o usuário liste suas preocupações de dados mais rápida.
Além do número predefinido de critérios de filtro, você também pode precisar de alguma função de pesquisa de entrada personalizado.
Para relacionamentos de sequências óbvias, como classificação, preço, etc, também precisam de forma rápida e fácil inverter os dados da função de ordenação.
Se a quantidade de dados é grande, paginada exibição da tabela.

Deve-se notar que a acima mencionada requisitos e na verdade a maioria das funções fornecidas pelo banco de dados é muito consistente, e porque o servidor de banco de dados tem otimizações e melhores índices de desempenho, mais adequado para lidar com essas necessidades. Mas agora popular em torno do fim da separação, espera-se para que o cliente dentro de um intervalo razoável, mais partilha de pressões do lado do servidor, de modo a encontrar um equilíbrio, o processamento de front-end precisa da quantidade certa da escolha certa.

Então nós tentar completar esses requisitos vue bar.

Table.vue completa

Porque tal um versátil formulário pode ser usado em vários projetos, tanto quanto possível sobre as ideias de design de tabela relacionados com o conteúdo em componentes Table.vue, reduzindo o acoplamento para fácil reutilização.

A obtenção de dados de teste

A fim de comparar melhor os prós e contras de front-end para alcançar os requisitos acima, precisamos de dados de teste maiores e mais complexas. Felizmente eu tinha um projeto, o desenho de uma API apenas para atender a essa demanda, os dados da API no ranking World of Warcraft Arena escada, este API está atualmente em um estado aberto, a interface ver introdução Myarena .

Semelhante ao tutorial anterior, ou criar uma nova pasta e uma api arena.js para o gerenciamento de interface API. Arena.js App.vue reintrodução nos dados adquiridos criado palco. Como uma demo, nós só temos região é CN, 3v3 dados laddar, mas enquanto os dois parâmetros v-modelo por ligação aos controles de formulário correspondentes, você pode facilmente alternar entre diferentes regiões para alcançar os dados.

componentes table.vue introduzidas

Como disse antes, a idéia que queremos reduzir a mesa da assembleia é acoplado com o ambiente externo, damos um conjunto Table.vue adereços linhas de atributos, para a aquisição de dados recuperados App.vue.
vTable na tabela de registro App.vue quando a formação é de notar, não pode usar a tabela de nome padrão, ele é registrado, capaz de usar tag <v-table> introduzido na mesa de montagem.

Até agora, a nossa App.vue completado todas as suas funções, como segue:

<template>
  <div class="container">
    <v-table
    :rows="rows"></v-table>
  </div>
</template>

<script>
import arena from './api/arena'
import vTable from './components/Table'

export default {
  components: { vTable },
  data () {
    return {
      region: 'CN',
      laddar: '3v3',
      rows: []
    }
  },
  methods: {
    getLaddar (region, laddar) {
      arena.getLaddar(region, laddar, (err, val) => {
        if (!err) {
          this.rows = val.rows
        }
      })
    }
  },
  created () {
    this.getLaddar(this.region, this.laddar)
  }
}
</script>

Há também um prático App.vue obter operação em tempo última atualização da API, bem como algumas definições css, considerar o espaço foi omitido aqui, que estão interessados no código completo pode ser o fim local do artigo repositório Github.

layout básico

Table.vue o molde em três partes principais, a saber, controlos de formulários para a pesquisa, de filtragem e de paginação, cabeçalhos para triagem thead mesa e tbody para a exibição de dados.

Primeiro a parte completa tbody, a idéia básica é a de percorrer com v-para dados, e, em seguida, preencher o modelo, é preciso prestar atenção aos seguintes pontos:

Os dados retornados podem não ser inteiramente satisfatória. Por exemplo, eu espero alcançar ao vencer o tipo, mas os dados contêm apenas alguns jogos vencedores, você precisa ser calculado uma vez. 2. Dados para o desempenho de jogadores profissionais classid esses dados atributo, mas o projeto real que eu quero mostrar a carreira com o ícone da ocupação, por isso implementou um classIdToIcon várias funções utilitárias em utils.js dentro para CLASSID mapeado para o fundo-do sprite posição na FIG.
O acima de dois pontos que melhor não atravessar os adereços linhas obtidos os dados originais. Portanto, um outro construído há computadorizada jogadores de propriedade, e na qual a conclusão do pré-tratamento, eu coloquei todos os pré-processamento no handleBefore no.
Devido a uma variedade de filtros que serão usados em operações mais complexas, foi console.log ( 'antes alça') em handlebefore para nos ajudar a verificar handlebefore em que fase é realizada.

Depois de completar o layout, o foco do código Table.vue atual é a seguinte:

<template>
  <tbody>
    <tr
    v-for="player of players
    :class="player.factionId? 'horde':'alliance'">
      <th>{{ player.ranking }}</th>
      <th>{{ player.rating }}</th>
      <th>
        <span
        class="class"
        :style="{ backgroundImage: 'url(http://7xs8rx.com1.z0.glb.clouddn.com/class.png)',
                  backgroundPosition: player.classIcon }"></span>
        {{ player.name }}
      </th>
      <th>{{ player.realmName }}</th>
      <th>
        <bar
        :win="player.weeklyWins"
        :loss="player.weeklyLosses"></bar>
      </th>
      <th>
        <bar
        :win="player.seasonWins"
        :loss="player.seasonLosses"></bar>
      </th>
    </tr>
  </tbody>
</template>

<script>
import Bar from './Bar'
import { classIdToIcon } from '../assets/utils'

export default {
  components: { Bar },
  props: {
    rows: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    players () {
      this.rows = this.handleBefore(this.rows)
      return this.rows
    }
  },
  methods: {
    handleBefore (arr) {
      console.log('before handle')
      if (this.rows[0]) {
        arr.forEach((item) => {
          if (item.weeklyWins === 0 && item.weeklyLosses === 0) {
            item.weeklyRate = -1
          } else {
            item.weeklyRate = item.weeklyWins / (item.weeklyWins + item.weeklyLosses)
          }
          if (item.seasonWins === 0 && item.seasonLosses === 0) {
            item.seasonRate = -1
          } else {
            item.seasonRate = item.seasonWins / (item.seasonWins + item.seasonLosses)
          }
          item.classIcon = classIdToIcon(item.classId)
        })
      }
      return arr
    }
  }
}
</script>

Você pode ver, eu também introduziu um representante componente Bar.vue de vencer, é porque quero que o efeito prático final é este:

Comecei diretamente na tag <th>, onde as probabilidades de várias operações, mas imagine fazer algumas condições de contorno de julgamento, haverá todos os tipos contendo player.weeklyWins, três player.weeklyLosses como variáveis desde que nomeadas yuan expressão.
Poderia ter sido considerada uma questão de conveniência, mas em vez disso levar a código difícil de manter. Assim, uma nova barra de um componente, o resultado da montagem de entrada, para alcançar um mais semântica barra de forma dentro de montagem, Bar.vue parte modelo do código como se segue:

<template>
  <div class="clear-fix">
    <span
    v-if="!hasGame || win / total > 0"
    :style="{ width: 100 * win / total + '%' }"
    :class="hasGame? '':'no-game'"
    class="win-bar">
      {{ hasGame? (100 * win / total).toFixed(1) + '%':'无场次' }}
    </span>
    <span
    v-if="loss / total > 0"
    :style="{ width: 100 * loss / total + '%' }"
    class="loss-bar">
      {{ win === 0? '0%':'' }}
    </span>
  </div>
</template>

Melhor entender e manter, não é?

Vue em uso no processo, deve-se notar que, no âmbito de uma série de métodos realmente dentro do final é a mesma coisa.

Por exemplo, podemos realizar alguma operação sobre os dados diretamente no elemento, como @ clique = "show =! Show", também pode ligar o mesmo método para o evento, e, em seguida, manipular os dados em um método, por exemplo, @ clique = "toggle" , toggle () {this.show =! this.show}. Por exemplo, nós também podemos conseguir um monte da mesma funcionalidade com propriedades e atributos computados assistir, o próximo será calculado usando filtros para obter a mesma funcionalidade.

flexibilidade de design vue para que tenhamos mais possibilidades, mas no momento da aprendizagem, deve entender completamente os prós e contras de diferentes maneiras em diferentes cenas, como o objetivo, a escolha do melhor de que tipo de aplicação prática.

requisitos de implementação com filtros

Em um exemplo, um 5000 jogadores realmente dados de matriz, quando nenhum tratamento, renderizar diretamente 5000 <tr>, por isso foi filtrada rapidamente para!

Para v-loop, VUE filtros fornecidos na matriz de filtro 3, respectivamente FiltrarPor, orderBy, limitBy, a função correspondente à pesquisa / filtro, triagem e paginação, são implementados usando Array.filter, Array.sort () , Array.slice ().

Estes três filtros no uso de muito conveniente, desde que o v-para uso posterior | separados e, em seguida, adicionar filtros correspondentes a estes três parâmetros específicos no filtro pode conferir a API oficial, não há muito a fazer repeti-los aqui.

Note-se que o processo efectivo é o primeiro iterado matriz (Jogadores exemplo) sequencialmente através do filtro, e em seguida, uma matriz de filtro final retornado pelo v-para operação.
Assim, a ordem de colocação dos filtros é a necessidade de se ajustar de acordo com a demanda, mas também porque a eficiência interna de cada filtro para atingir diferentes, não é evidente quando a demanda prioridade, prioridade deve ser eficiente.

Nota : o teste real e descobriu que não importa o quão arranjo de filtro, métodos handleBefore não são executados uma vez, que é uma matriz de jogadores não foi alterado.

Por exemplo, no meu caso, eu espero que você pode filtrar o nome ou o servidor que contém os jogadores que eu já entraram, e eles serão classificados, de alguma forma, os resultados finais por página mostram apenas 20.
Então, obviamente, cortar devem ser colocados em uma matriz é sempre o último passo, mas não há nenhuma separação evidente e filtragem requisitos prioritários. Mas na maioria dos casos, ser menor do que o tipo eficiência do filtro, então vamos continuar filtro, reduzir o comprimento da matriz, e em seguida, classificar.

Com esta idéia mais tarde, para o v-para <tr> torna-se:

<tr
v-for="player of players
| filterBy query in 'name' 'realmName'
| orderBy sort.key sort.val
| limitBy 20 (page-1)*20"
:class="player.factionId? 'horde':'alliance'">

Aqui directamente para cada variável dinâmica, re-v-modelo e cabeçalho thead ligação evento @Clique para alterar as condições rastreados por Table.vue de ligação de entrada, tem conseguido a maior parte da pesquisa, a filtragem, a função de fazer o paging.

I alterar o cabeçalho tipo de encomenda é alcançado pelo seguinte código, o caminho pode não ser bom, aqui listados:

<thead>
  <tr>
    <th
    @click="sort = {key: 'ranking', val: -sort.val}">排名</th>
    <th
    @click="sort = {key: 'rating', val: -sort.val}">分数</th>
    <th>资料</th>
    <th>服务器</th>
    <th
    @click="sort = {key: 'weeklyRate', val: -sort.val}">本周战绩</th>
    <th
    @click="sort = {key: 'seasonRate', val: -sort.val}">赛季战绩</th>
  </tr>
</thead>

Ele pode ser visto através dos filtros de função vue, você pode facilmente ter completado a maioria de nossas funções, quantidade mínima de código. Esta é também lançamento da Preview vue2.0, abandonado após os filtros de seção propostas apresentam muitas pessoas reagem mais fortemente razões.
Mas como diz o autor na descrição mudanças, filtros para iniciantes são difíceis de entender, e filtros de funções pode ser mais flexível com atributos computados para alcançar um melhor controle de. Complexo e em algumas condições, a pilha de filtros pode causar alguma complexidade e inconveniente adicional.

Então, o que é as condições complexas? Por exemplo, eu adicionei dois requisitos, a pessoa é rastreada por jogadores profissionais, mas triagem mais do que uma certa fração dos jogadores, então este não é muito bom com FiltrarPor alcançado.
Vamos precisar de marcar segmento de filtração foram colocados antes dos filtros, mas os jogadores tem que ter cuidado para não danificar a própria matriz. Em conclusão prática, você vai encontrar este processo bastante confusa.

Além disso, encontramos também uma guia a informação mais importante - que recebem menos do que o número total de páginas. Porque não vue uma cadeia de tubo na saída do filtro para a matriz final, é exposta v-para, por isso, não pode obter o comprimento real da matriz circular.

Quando essas necessidades corte real, é fácil encontrar um conflito com a ordem de execução de filtros, decidiu-se re-uso calculado propriedades para alcançar através de todas as funções, sem o auxílio de built-in filtros.

Claro que, na primeira metade deste período, sentimos evidente a partir da conveniência de filtros. Se você atender às necessidades dos filtros, usar filtros na versão 1.x ainda é muito sábio!

Completo com uma demanda de propriedade calculado

No repositório Github, eu armazenados algum código antes de usar filtros implementados com arquivos Table.vue.bak facilitar a comparação com a percepção de que levamos dentro.

Em primeiro lugar, resolver idéias usando atributos computados para alcançar:

Você deve primeiro perceber FiltrarPor, orderBy, limitBy três funções de filtro mencionado acima têm a sua implementação interna, de modo respectivamente Array.filter, Array.sort e Array.slice reescrita não é complicado.
Disse a ser computada atributos para conseguir, de fato, ainda apenas jogadores desta propriedade computadorizada, basta executar todos do interior ação de filtragem, nós realmente colocar uma variedade de filtros colocados na lógica de cada método.
não é recomendado para escrever cada método do filtro é muito abstrata, porque o built-in filtros é motivo altamente abstrato algumas necessidades especiais não pode ser alcançado, por isso poderia muito bem da maneira mais orientados: um método corresponde a um filtro.
Durante a execução de vários método de filtragem, os problemas ainda eficientes causadas pela ordem inicial mencionado. Desde vue de fato, afetar todo o corpo apresenta uma mudança de filtro qualquer momento, todo o método de filtragem será executado novamente, tão cedo quanto possível, com um filtro eficiente para encurtar o comprimento da matriz é mais importante.
Eu tentei chamar o método minimizado pela propriedade relógio, mas não conseguiu alcançar habilidade indefeso não é suficiente. Eu também acho que o front-end situação processamento de grandes quantidades de dados são raros, e pontos de dados Otimizar no quarto, a eficiência não é muito baixo, então não há necessidade de fazer muito enredado nesse sentido. Quando realmente gargalos de desempenho, buscar soluções a partir do servidor será mais fácil.

Nota: Ao implementar uma variedade de método de filtragem, para atingir o vue fonte de leitura recomendada em FiltrarPor, orderBy, limitBy três partes, que em si para a operação da matriz terão alguma otimização, vale a pena aprender. Em alguns casos especiais, tais como quando uma grande quantidade igual ao valor da matriz, função de classificação simplista conduzirá à implementação do aumento no número de etapas, vue algum processamento são para ser evitado.

De acordo com as necessidades do alvo, eu definir o seguinte método (que é a ordem de execução sequencial):

classFilter: jogadores profissionais de filtro, a julgar pela item.classId === this.class, this.class está vinculado a um controle de seleção.
QueryFilter: coincidir com o nome do jogador no campo, por item.name.indexOf (this.query) julgamento, this.query ligam a entrada de controle então.
ratingFilter: Seção de Triagem pontuação jogador, julgado por item.rating> = this.rating, this.rating ligado a uma entrada do tipo de faixa de controle, o intervalo é calculada usando uma gama de propriedade calculado.
SortTable: grande número de etapas, porque Array.sort realizada, de modo que a matriz é colocada após o método de três curtos processamento.
paginate: Depois de toda a operação de filtragem estiver completa, você pode agrupar-se. Antes de utilizar Array.slice (), o comprimento do primeiro conjunto passar this.total armazenados, para o cálculo do número total de páginas do separador.
Em adição ao método de filtração vários acima, no entanto, há também handleBefore matriz do método de pré-tratamento. No entanto, uma vez que os jogadores recalculadas de cada vez, por isso, a fim de pôr fim handleBefore é repetidamente executados com uma determinada condição determinação deve ser, por exemplo handleBefore adicionado atributo já existir e assim por diante.
Enquanto isso, também parte da necessidade de operação não ser realizada antes de filtração a partir de handleBefore para fora, por exemplo, por exemplo, a conversão CLASSID Ícone, os dados podem, em última análise ser exibida após filtração para reduzir o número do número de passos. Também é fornecido um handleAfter método para operações subsequentes após guia conclusão, é claro, possível repetir o handleAfter execução, a operação executada se uma grande tensão é recomendado para adicionar a mesma determinação, para evitar repetidas.

No código de exemplo, em todos os sentidos eu contei o número de etapas são executadas, os resultados reais mostram um conjunto razoável de ordem do filtro para evitar alguns problemas de desempenho com os seguintes resultados:

Inicialização Pode ser visto, em qualquer caso de nenhum filtro, quanto maior o número de passos da espécie. E uma vez que alguns dos filtros que você adicionou, filtro e classificação de pick pelo número de etapas será drasticamente reduzido.

DEMONSTRA Instituto Add

Porque o trabalho está ocupado, não há intenção no início do projeto de reconstrução show de MyArena, mas posso imaginar que seria um bom exemplo, fazendo aplicação única página vue, tutorial de acompanhamento poderia ser usado para fazer um exemplo.

Exemplos deste tutorial, com foco na própria tabela de exibição multi-função

DEMONSTRA ponto I endereço
repositório Github

Programa de escrita

A semana passada foi práticas de desenvolvimento Vue.js do primeiro artigo, a primeira vez que publicou um artigo em uma comunidade SF coluna pessoal, esperando para colocar alguns dos problemas normalmente encontrados e resolvidos para que todos possam compartilhar idéias, e ele carregava uma pente.

práticas de desenvolvimento desta série irá utilizar alguns pequenos exemplos, mostram algumas idéias para conseguir algo útil, funções comuns podem ser reutilizados. Plano, haverá uma série Vue.js combate e combate Sails.js série duas séries de artigos.
O projeto anterior de uma mais completa seleção de tecnologia de análise, vue-roteador e uso vuex de códigos compartilhados multiseriais, pós-manutenção e outros aspectos de uma série de considerações. O último é para tentar construir alguma experiência com a empresa backend Node.js Sails.js deste quadro, incluindo as vantagens e desvantagens do quadro, e os detalhes de contraste horizontal tateando como.
Ali também está preocupado com o progresso medido projetos de código aberto weex, o ideal do Estado é conseguir projeto weex no desenvolvimento de móveis final App, o real JS completos pilha completa, mas weex ainda não oficialmente aberta, ser esperar e ver, então, basta imaginar a tarde , ausente temporariamente no plano.

Atualmente, apenas feita no artigo sobre a coluna de SF, de forma que há opiniões e sugestões, por favor deixe uma mensagem na parte inferior do artigo. Ao mesmo tempo, devido ao acima indicado todo o trabalho é feito por uma pessoa responsável, a atualização do artigo pode ou velocidade mais lenta, e se esforçam para alcançar uma vez por semana.