Usuario:ManuelRomero/JavaScript1 - Historial de revisiones

ManuelRomero: /* Cambio de contexto en vue */

2024-07-02T06:37:22Z

‎Cambio de contexto en vue

ManuelRomero: /* Cambio de contexto en vue */

2023-07-08T13:05:14Z

‎Cambio de contexto en vue

ManuelRomero: /* Cambio de contexto en vue */

2023-07-08T08:47:52Z

‎Cambio de contexto en vue

ManuelRomero: /* Cambio de contexto en vue */

2023-07-08T08:43:05Z

‎Cambio de contexto en vue

ManuelRomero: /* Cuestiones para tener en cuenta */

2023-07-08T07:58:37Z

‎Cuestiones para tener en cuenta

ManuelRomero en 07:56 8 jul 2023

2023-07-08T07:56:33Z

ManuelRomero en 07:36 17 nov 2022

2022-11-17T07:36:13Z

ManuelRomero en 22:25 10 dic 2021

2021-12-10T22:25:14Z

ManuelRomero en 19:19 20 oct 2021

2021-10-20T19:19:39Z

ManuelRomero en 13:02 30 jun 2016

2016-06-30T13:02:11Z

@@ Línea 44: / Línea 44: @@
                        return  String(b[campo]).localeCompare(String(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
+*Y es porque 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>

@@ Línea 21: / Línea 21: @@
 ===Cambio de contexto en vue===
 *Usando vue, tengo accesible this en toda la sección.
-*Se puede perder el contesto cuando se intenta accedere a él en un método de  otra función
+*Se puede perder el contexto cuando se intenta accedere a él en un método de  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 reproduce esta situación

@@ Línea 32: / Línea 32: @@
               this.filas.data.sort((a, b)=>
                           this.ascendente[campo]?
-                         String(a[campo].localeCompare(b[campo])):
+                          String(a[campo]).localeCompare(String(b[campo])) :
-                         String(b[campo].localeCompare(a[campo])));
+                          String(b[campo]).localeCompare(String(a[campo]))
 </source>
@@ Línea 40: / Línea 40: @@
              this.filas.data.sort(function (a, b){
                  if (this.ascendente[campo]===true)
-                     return  String(a[campo].localeCompare(b[campo]));
+                     return  String(a[campo]).localeCompare(String(b[campo]));
                  else
-                       return  String(b[campo].localeCompare(a[campo]))});
+                       return  String(b[campo]).localeCompare(String(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
@@ Línea 50: / Línea 50: @@
              this.filas.data.sort(function (a, b){
                  if (self.ascendente[campo]===true)
-                    return  String(a[campo].localeCompare(b[campo]));
+                   return  String(a[campo]).localeCompare(String(b[campo]));
                  else
-                       return  String(b[campo].localeCompare(a[campo]))});
+                       return  String(b[campo]).localeCompare(String(a[campo]))});
 </source>

@@ Línea 25: / Línea 25: @@
 *Esta es una sección de código donde se puede reproduce esta situación
 <source lang=javascript>
-//ascendente es una variable booleana que me indica como quiero ordenar (ascendente o descendente)
+//ascendente es una variable booleana que me indica cómo quiero ordenar (ascendente o descendente)
              // además se usa con una directiva  v-if para mostar un svg (flecha arriba o abajo) en el botón de cada campo
              //campo indica el nombre del campo por el que quiero  ordenar

@@ Línea 19: / Línea 19: @@
 https://www.youtube.com/watch?v=RqQ1d1qEWlE
 ==Cuestiones para tener en cuenta==
-===Cambio de contexto===
+===Cambio de contexto en vue===
 *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
+*Se puede perder el contesto cuando se intenta accedere a él en un método de  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
+*Esta es una sección de código donde se puede reproduce esta situación
 <source lang=javascript>
-//ascendente es una variable booleana que me indica como quiero ordenra
+//ascendente es una variable booleana que me indica como quiero ordenar (ascendente o descendente)
-             // además se usa con un v.if para mostar un svg (flecha arriba o abajo)
+             // además se usa con una directiva  v-if para mostar un svg (flecha arriba o abajo) en el botón de cada campo
-             //campo indica por qué quiero ordenar
+             //campo indica el nombre del campo por el que quiero  ordenar
-             //Este código funciona bien
+             //Este código funciona bien (con función flecha no pierdo el contexto de this)
               this.ascendente[campo] = !this.ascendente[campo];
               this.filas.data.sort((a, b)=>

← Revisión anterior		Revisión de 07:56 8 jul 2023
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>

@@ Línea 12: / Línea 12: @@
 #[[Usuario:ManuelRomero/JavaScript/formularios|Formularios]]
 #[[Usuario:ManuelRomero/JavaScript/jquery|JQuery]]
 }}
 ;Librerías de javascript para gráficos

← Revisión anterior		Revisión de 22:25 10 dic 2021
Línea 16:		Línea 16:
	https://ourcodeworld.co/articulos/leer/159/top-5-las-mejores-bibliotecas-de-javascript-de-diagramas-gratuitos		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://ingenieriadesoftware.es/10-librerias-javascript-dibujar-diagramas/
		+	https://www.youtube.com/watch?v=RqQ1d1qEWlE

← Revisión anterior		Revisión de 19:19 20 oct 2021
Línea 13:		Línea 13:
	#[[Usuario:ManuelRomero/JavaScript/jquery\|JQuery]]		#[[Usuario:ManuelRomero/JavaScript/jquery\|JQuery]]
	}}		}}
		+	;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/

@@ Línea 5: / Línea 5: @@
 |Listado=#[[Usuario:ManuelRomero/JavaScript/Inicio|Introducción a la programación]]
 #[[Usuario:ManuelRomero/JavaScript/lenguajeJS|Conceptos generales de javaScript.]]
-#[[Usuario:ManuelRomero/JavaScript/sintaxis|Sintaxis básica del lenguaje.]
+#[[Usuario:ManuelRomero/JavaScript/sintaxis|Sintaxis básica del lenguaje.]]
 #[[Usuario:ManuelRomero/JavaScript/programación|Ejemplos de programación]]
 #[[Usuario:ManuelRomero/JavaScript/dom|El DOM]]