Y la semana pasada con manos primer mensaje tutoriales , como en este artículo, voy a seguir de una característica común - a partir de la forma, que muestra algunas de las propiedades elegantes en Vue.js. Al mismo tiempo se fueron comparados también funciones de filtro atributos calculadas, lo que indica que sus escenarios de aplicación, sino también para preparar la parte de la versión de función vue2.0 filtro a eliminar.
Análisis de requerimientos
O iniciar una solicitud de inicio, pensar en lo que cuenta para lograr tal una nota, cómo el proceso general, que los escenarios de aplicación.
La mesa en sí es un componente muy común para un buen rendimiento cuando para mostrar algunos datos complejos.
Al comparar los datos durante mucho tiempo, tenemos que proporcionar algunas condiciones de filtrado para permitir al usuario a la lista de sus preocupaciones datos más rápido.
Además del número predeterminado de criterios de filtro, es posible que tenga alguna función de búsqueda de entrada personalizado.
Para las relaciones de datos de secuencias obvias, tales como la clasificación, el precio, etc., también es necesario de forma rápida y fácil invertir los datos de la función de clasificación.
Si la cantidad de datos es grande, paginado presentación de las tablas.
Cabe señalar que la mencionada anteriormente requisitos y, de hecho, la mayor parte de las funciones proporcionadas por la base de datos es muy consistente, y debido a que el servidor de base de datos tiene optimizaciones y mejores índices de rendimiento, más adecuado para manejar estas necesidades. Pero ahora popular en todo el final de la separación, se espera tener el cliente dentro de un rango razonable, un mayor intercambio de presiones por el lado del servidor, con el fin de encontrar un equilibrio, el procesamiento de front-end necesita la cantidad correcta de la decisión correcta.
Entonces tratamos de completar estos requisitos vue bar.
Table.vue completa
Debido a que tal una forma versátil podría ser utilizado en múltiples proyectos, en la medida de lo posible en las ideas de diseño de mesa relacionados con el contenido de los componentes Table.vue, reduciendo el acoplamiento para una fácil reutilización.
La obtención de datos de prueba
Con el fin de comparar mejor los pros y los contras de front-end para alcanzar los requisitos anteriores, necesitamos un conjunto de datos de prueba más grandes y complejos. Por suerte tenía un proyecto, el diseño de una API sólo para satisfacer esta demanda, los datos de la API ranking mundial de Warcraft Arena escalera, esta API se encuentra actualmente en un estado abierto, ver la interfaz de introducción Myarena .
Al igual que en el tutorial anterior, o crear una nueva carpeta y una API arena.js para la gestión de la interfaz API. Arena.js App.vue reintroducción en los datos adquiridos creado etapa. Como demostración, sólo tenemos región es CN, laddar 3c3 datos, pero siempre y cuando los dos parámetros V-modelo de unión a los correspondientes controles de formulario, puede cambiar fácilmente entre diferentes regiones para conseguir los datos.
table.vue componentes introducidos
Como se dijo antes, la idea queremos reducir la mesa de montaje se acopla con el ambiente externo, damos un conjunto de atributos Table.vue apoyos filas, para la adquisición de datos recuperados App.vue.
vtable En la tabla de registro App.vue cuando la formación de observarse, no puede utilizar la tabla nombre predeterminado, se registra, capaz de utilizar la etiqueta <v-table> introduce en la mesa de montaje.
Hasta ahora, nuestra App.vue completado todas sus funciones, de la siguiente manera:
<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>También hay una práctica App.vue llegar operación de tiempo de la última actualización de la API, así como algunos ajustes css, tenga en cuenta el espacio se ha omitido aquí, que están interesados en el código completo puede ser el final sede del artículo repositorio de Github.
disposición básica
Table.vue la plantilla en tres partes principales, a saber, controles de formulario de búsqueda, filtrado y paginación, los encabezados para ordenar la culata en T mesa y tbody para la visualización de datos.
Primero en completa tbody parte, la idea básica es que atravesar con v-para los datos, y luego rellenar la plantilla, hay que prestar atención a los siguientes puntos:
Los datos devueltos pueden no ser totalmente satisfactoria. Por ejemplo, espero lograr al ganar el tipo, pero los datos contienen sólo unos pocos juegos ganadores, tiene que ser calculada una vez. 2. Los datos para el rendimiento de los jugadores profesionales CLASSID estos datos de atributos, pero el proyecto real Quiero mostrar carrera con el icono de la ocupación, por lo que puso en marcha un classIdToIcon diversas funciones de utilidad en utils.js por classId asigna a la posición de fondo de sprite en la figura.
Lo anterior dos puntos que es mejor que no atraviesa los puntales filas obtenidos los datos originales. Por lo tanto, otro construido una propiedad jugadores calculados, y en el que la realización del pre-tratamiento, puse todos los pre-procesamiento en el handleBefore en.
Debido a una variedad de filtros que se utilizan en las operaciones más complejas, que era console.log ( 'antes de mango') en handlebefore para ayudarnos a verificar handlebefore en qué etapa se lleva a cabo.
Después de completar el diseño, el enfoque del código actual Table.vue es el siguiente:
<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>Se puede ver, también introduje un componente Bar.vue representante de ganar, es porque quiero que el último efecto práctico es la siguiente:
Empecé directamente en el <th> etiqueta, donde las probabilidades de varias operaciones, pero imaginar haciendo algunas condiciones de contorno de juicio, habrá todo tipo que contengan player.weeklyWins, tres player.weeklyLosses como variables siempre y cuando el nombre expresión de yuanes.
Podría haber sido considerado como una cuestión de conveniencia, sino conducir a código difícil de mantener. Así, una nueva barra de un componente, el resultado del conjunto de entrada, para lograr una barra más semántica manera dentro de montaje, Bar.vue parte de molde del código como sigue:
<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>A entender mejor y mantener, no es así?
Vue en uso en el proceso, hay que señalar que en el marco de una serie de métodos en realidad dentro de la final es la misma cosa.
Por ejemplo, podemos realizar alguna operación sobre los datos directamente en el elemento, por ejemplo @ clic = "mostrar =! Show", podemos también se unen el mismo método para el evento, y luego manipular los datos en un método, por ejemplo, @ clic = "cambiar" , de palanca () {this.show =! this.show}. Por ejemplo, también podemos lograr una gran cantidad de la misma funcionalidad con propiedades y atributos computados ver, la próxima será calculado utilizando filtros para conseguir la misma funcionalidad.
vue flexibilidad de diseño por lo que tenemos más posibilidades, pero en el momento de aprendizaje, debemos entender a fondo los pros y los contras de diferentes maneras en diferentes escenarios como el objetivo, la elección de la mejor de qué tipo de aplicación práctica.
Requisitos para la aplicación con filtros
En un ejemplo, un 5000 jugadores en realidad datos de la matriz, cuando no hay tratamiento, render directamente 5000 <tr>, por lo que se filtró rápidamente a!
Para v-bucle, VUE filtros que se proporcionan en la matriz de filtro 3, respectivamente filterBy, orderBy, limitby, la función correspondiente a la búsqueda / filtro, la clasificación y la paginación, se implementan utilizando Array.filter, Array.sort () , Array.slice ().
Estos tres filtros en el uso de muy conveniente, siempre y cuando la v-para su uso posterior | separados y luego agregar los filtros correspondientes a estos tres parámetros específicos en el filtro puede comprobar fuera de la API oficial, no hay mucho que hacer repetirlas aquí.
Tenga en cuenta que el proceso real es la primera matriz (ejemplo Jugadores) iterada secuencialmente a través del filtro, y luego una matriz de filtro final devuelto por el v-para la operación.
Por lo tanto, el orden de colocación de los filtros es la necesidad de ajustar según la demanda, sino también porque la eficiencia interna de cada filtro para lograr diferentes, no es obvio cuando la prioridad de la demanda, prioridad debe ser eficiente.
Nota : la prueba real y se encontró que no importa cómo la red de filtros, métodos handleBefore no se ejecuta de nuevo, que es un conjunto de jugadores que no ha sido alterado.
Por ejemplo, en mi caso, espero que puedan filtrar el nombre o el servidor que contiene los jugadores que he entrado, y se ordenarán de alguna manera, los resultados finales por página mostrar sólo el 20.
Entonces, evidentemente corte debe ser colocado en una matriz es siempre el último paso, pero no hay ninguna clasificación y filtrado obvia las necesidades prioritarias. Pero en la mayoría de los casos, ser inferior al tipo de la eficiencia del filtro, así que vamos a realizar en el filtro, reducir la longitud de la matriz, y luego especie.
Con esta idea más adelante, para el v-para <tr> se convierte en:
<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'">Aquí directamente a cada variable dinámica, re-v-modelo y la cabecera thead evento @Haga clic en unión a cambiar las condiciones examinadas por Table.vue de unión a la entrada, se ha logrado la mayoría de la búsqueda, el filtrado, la función de paginación.
Puedo cambiar la cabecera de tipo de pedidos se logra mediante el siguiente código, el camino no puede ser bueno, por la presente la lista:
<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>Se puede ver a través de los filtros función de vue, usted puede fácilmente haber completado la mayor parte de nuestras funciones, cantidad mínima de código. Este es también vue2.0 versión preliminar, abandonado después de los filtros de sección propuestos cuentan con muchas personas reaccionan más fuertemente razones.
Pero, como dice el autor en los cambios de descripción, filtros para los principiantes son difíciles de entender, y las funciones de filtros pueden ser más flexibles con los atributos calculados para lograr un mejor control de. Complex y en algunas condiciones, la pila de filtro puede causar cierta complejidad e inconveniencia adicional.
Entonces, ¿qué es las condiciones complejas? Por ejemplo, añadí dos requisitos, uno se proyectarán por los jugadores profesionales, pero el cribado a cabo más de una cierta fracción de los jugadores, a continuación, este último no es muy buena, con filterBy logra.
Tendremos que anotar segmento de filtración fueron colocados antes de los filtros, pero los jugadores tienen que tener cuidado de no dañar la propia matriz. En conclusión práctica, se encuentra este proceso bastante enredado.
Además, también encontramos una pestaña de la información más importante - tenemos menos que el número total de páginas. Debido vue no es una cadena de la tubería en la salida del filtro para la matriz última se expone-para v, de modo que no podemos conseguir la longitud real de la matriz circular.
Cuando estas necesidades truco real, es fácil encontrar un conflicto con el orden de ejecución de los filtros, se decidió volver a utilizar computarizada propiedades lograr a través de todas las funciones, sin la ayuda de una función de filtros.
Por supuesto, en la primera mitad de este período, nos parece obvio a partir de la conveniencia de filtros. Si cumple con las necesidades de los filtros, filtros de uso en la versión 1.x sigue siendo muy sabia!
Completa con una demanda de propiedad computarizada
En repositorio de Github, guardé algo de código antes de usar filtros implementados con archivos Table.vue.bak facilitar la comparación con la realización que llevamos dentro.
En primer lugar, ordenar ideas utilizando atributos calculados para lograr:
primero hay que darse cuenta filterBy, orderBy, limitby tres funciones de filtro mencionados anteriormente tienen su aplicación interna, por lo Array.filter respectivamente, Array.sort y reescritura Array.slice no es complicado.
Se dice que es calculada atributos para lograr, de hecho, todavía sólo jugadores esta propiedad calculada, sólo hay que ejecutar la totalidad de la acción de filtrado en el interior, que en realidad ponen una variedad de filtros colocados en la lógica de cada método.
No se recomienda para escribir cada método de filtro es demasiado abstracto, ya que el incorporado en los filtros es causa muy abstracta algunas necesidades especiales no se pueden conseguir, por lo que puede ser que también de la manera más específica: un método corresponde a un filtro.
Si bien la realización de diversas método de filtrado, los problemas todavía eficientes causadas por la orden inicial mencionan. Desde vue de hecho afecta a todo el cuerpo dispone de un cambio de filtro en cualquier momento, todo el método de filtrado se ejecutará de nuevo, tan pronto como sea posible con un filtro eficaz para acortar la longitud de la matriz es más importante.
Traté de llamar al método minimizado por la propiedad reloj, pero no pudo alcanzar la habilidad indefensa no es suficiente. También creo que la situación front-end de procesamiento de grandes cantidades de datos son raros, y los puntos de datos Optimizar en el cuarto, la eficiencia no es demasiado bajo, por lo que no hay necesidad de hacer demasiado enredado en este sentido. Cuando realmente los cuellos de botella de rendimiento, buscan soluciones desde el servidor será más fácil.
Nota: Cuando se implementa una variedad de filtrado de método, para lograr el vue fuente recomienda la lectura en filterBy, orderBy, limitby tres partes, que a su vez para la operación de la matriz tendrán alguna optimización, bien vale la pena el aprendizaje. En algunos casos especiales, tales como cuando una gran cantidad igual al valor de la matriz, función de clasificación simplista dará lugar a la aplicación de la aumento en el número de pasos, vue algún procesamiento son que debe evitarse.
De acuerdo con las necesidades de la diana, puse el siguiente método (que es orden de ejecución secuencial):
classFilter: jugadores profesionales de filtro, a juzgar por item.classId === this.class, this.class está enlazado a un control de selección.
QueryFilter: coincide con el nombre del jugador en el campo, por item.name.indexOf (this.query) juicio, this.query se unen una entrada de control a continuación.
ratingFilter: sección de partituras jugador Screening, juzgada por item.rating> = this.rating, this.rating unido a una entrada de control del tipo de gama, el rango se calcula usando una propiedad computado gama.
sortTable: gran número de etapas porque Array.sort realiza, de modo que la matriz se coloca después del método de tres más corto de procesamiento.
paginate: Después de toda la operación de filtrado se ha completado, se puede clasificar para arriba. Antes de usar Array.slice (), la longitud de la primera matriz pasar this.total almacenados, para calcular el número total de páginas en la pestaña.
Además del método de filtración de varios anteriormente, sin embargo también hay handleBefore variedad de método de pre-tratamiento. Sin embargo, ya que los jugadores vuelven a calcular cada vez, por lo que con el fin de poner fin handleBefore se ejecuta repetidamente con una cierta condición de determinación debe ser, por ejemplo handleBefore añadió atributo ya existe y así sucesivamente.
Mientras tanto, también algunos de la necesidad de operación no puede realizar antes de la filtración de handleBefore cabo, por ejemplo, por ejemplo la conversión classId Icon, los datos pueden en última instancia, se mostrará después de la filtración para reducir el número del número de pasos. También se proporciona un método para handleAfter operaciones posteriores después de la implementación del tabulador, por supuesto, posible repetir la handleAfter ejecución, la operación realizada si se recomienda una gran tensión para agregar la misma determinación, para evitar repetir.
En el código de ejemplo, en todos los sentidos Conté se llevan a cabo el número de pasos, los resultados reales muestran un conjunto razonable de orden del filtro para evitar algunos problemas de rendimiento con los siguientes resultados:
Inicialización Se puede observar, en todo caso, de ningún filtro, cuanto mayor sea el número de pasos por el estilo. Y una vez que algunos de los filtros que ha añadido, filtro y tipo de elección por el número de pasos que se reducirá drásticamente.
DEMO Instituto Agregar
Porque el trabajo está ocupado, no hay intención en el comienzo del proyecto de reconstrucción espectáculo MyArena, pero puede imaginar que sería un buen ejemplo al hacer uso de una sola página vue, tutorial de seguimiento podría ser utilizado para hacer un ejemplo.
Los ejemplos de este tutorial, centrándose en la mesa de pantalla multi-función en sí
Programa de escritura
La semana pasada fue Vue.js prácticas de desarrollo del primer artículo, la primera vez que publicó un artículo en una comunidad SF columna de personal, con la esperanza de poner algunos de los problemas que habitualmente se encuentran resueltos y para todo el mundo a compartir ideas, y llevaba una peine.
prácticas de desarrollo de esta serie va a utilizar algunos ejemplos pequeños, mostrar algunas ideas para lograr algo útil, funciones comunes pueden ser reutilizados. Plan, habrá un combate y combate Vue.js serie Sails.js serie de dos series de artículos.
El anterior proyecto de una selección más completa tecnología de análisis, vue-router y el uso de códigos compartidos vuex multipuerto, post-mantenimiento y otros aspectos de una serie de consideraciones. Este último es para tratar de construir una cierta experiencia con la empresa backend Node.js Sails.js este marco, incluyendo las ventajas y desventajas de la trama, y los detalles de contraste horizontal tientas similares.
Ali también se ocupa actualmente sobre el progreso medido proyectos de código abierto weex, el estado ideal es lograr proyectos weex en el desarrollo de la telefonía móvil Apé, el verdadero JS completos pila completa, pero weex aún no oficialmente abierta, sean de esperar y ver, por lo que sólo imaginar la tarde , en ausencia de forma temporal en el plan.
Actualmente sólo se realizan en el artículo sobre la columna de SF, por lo que hay opiniones y sugerencias, por favor deje un mensaje en la parte inferior del artículo. Al mismo tiempo, debido a la mencionada todo el trabajo es realizado por una persona a cargo, la actualización del artículo puede o menor velocidad, y esforzarse por lograr una vez por semana.