Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript1»
De WikiEducator
| Línea 18: | Línea 18: | ||
https://ingenieriadesoftware.es/10-librerias-javascript-dibujar-diagramas/ | https://ingenieriadesoftware.es/10-librerias-javascript-dibujar-diagramas/ | ||
https://www.youtube.com/watch?v=RqQ1d1qEWlE | https://www.youtube.com/watch?v=RqQ1d1qEWlE | ||
| + | ==Cuestiones para tener en cuenta== | ||
| + | ===Cambio de contexto=== | ||
| + | *Usando vue, tengo accesible this en toda la sección. | ||
| + | *Ocurre que a veces se pierde el contesto cuando en un método uso otra función | ||
| + | *Si esa función es una función flecha el contexto se mantiene. | ||
| + | *Esta es una sección de código donde se puede observar el siguiente caso | ||
| + | <source lang=javascript> | ||
| + | //ascendente es una variable booleana que me indica como quiero ordenra | ||
| + | // además se usa con un v.if para mostar un svg (flecha arriba o abajo) | ||
| + | //campo indica por qué quiero ordenar | ||
| + | //Este código funciona bien | ||
| + | this.ascendente[campo] = !this.ascendente[campo]; | ||
| + | this.filas.data.sort((a, b)=> | ||
| + | this.ascendente[campo]? | ||
| + | String(a[campo].localeCompare(b[campo])): | ||
| + | String(b[campo].localeCompare(a[campo]))); | ||
| + | |||
| + | </source> | ||
| + | *Sin embargo si no uso función flecha no funcionaría | ||
| + | <source lang=javascript> | ||
| + | this.filas.data.sort(function (a, b){ | ||
| + | if (this.ascendente[campo]===true) | ||
| + | return String(a[campo].localeCompare(b[campo])); | ||
| + | else | ||
| + | return String(b[campo].localeCompare(a[campo]))}); | ||
| + | </source> | ||
| + | *Y es por que se pierde el contexto de this dentro del método sort, para conseguir el objetivo, tendría que perservar dicho contexto en otra variable | ||
| + | *Sin embargo si no uso función flecha no funcionaría | ||
| + | <source lang=javascript> | ||
| + | const self = this; | ||
| + | this.filas.data.sort(function (a, b){ | ||
| + | if (self.ascendente[campo]===true) | ||
| + | return String(a[campo].localeCompare(b[campo])); | ||
| + | else | ||
| + | return String(b[campo].localeCompare(a[campo]))}); | ||
| + | |||
| + | </source> | ||
Revisión de 07:56 8 jul 2023
|
|
- Librerías de javascript para gráficos
https://ourcodeworld.co/articulos/leer/159/top-5-las-mejores-bibliotecas-de-javascript-de-diagramas-gratuitos https://ingenieriadesoftware.es/10-librerias-javascript-dibujar-diagramas/
https://www.youtube.com/watch?v=RqQ1d1qEWlE
Cuestiones para tener en cuenta
Cambio de contexto
- Usando vue, tengo accesible this en toda la sección.
- Ocurre que a veces se pierde el contesto cuando en un método uso otra función
- Si esa función es una función flecha el contexto se mantiene.
- Esta es una sección de código donde se puede observar el siguiente caso
//ascendente es una variable booleana que me indica como quiero ordenra // además se usa con un v.if para mostar un svg (flecha arriba o abajo) //campo indica por qué quiero ordenar //Este código funciona bien this.ascendente[campo] = !this.ascendente[campo]; this.filas.data.sort((a, b)=> this.ascendente[campo]? String(a[campo].localeCompare(b[campo])): String(b[campo].localeCompare(a[campo])));
- Sin embargo si no uso función flecha no funcionaría
this.filas.data.sort(function (a, b){ if (this.ascendente[campo]===true) return String(a[campo].localeCompare(b[campo])); else return String(b[campo].localeCompare(a[campo]))});
- Y es por que se pierde el contexto de this dentro del método sort, para conseguir el objetivo, tendría que perservar dicho contexto en otra variable
- Sin embargo si no uso función flecha no funcionaría
const self = this; this.filas.data.sort(function (a, b){ if (self.ascendente[campo]===true) return String(a[campo].localeCompare(b[campo])); else return String(b[campo].localeCompare(a[campo]))});
