Entradas con la etiqueta ‘js’

Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript | No hay comentarios »

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

JS – Internet Explorer Shim

Publicado por Iván Gajate el 26 de abril de 2014 en JavaScript | Los comentarios están cerrados.

Si nuestro código falla inexplicablemente en Internet Explorer 8 seguramente sea porque estamos llamando a alguna función que no existía por aquel entonces, como trim, indexOf, forEach
Para solucionarlo podemos incluir este js en nuestra página y todo volverá a funcionar como debería 🙂

https://github.com/es-shims/es5-shim/blob/master/es5-shim.js

JS – Comparar dos Objetos en JavaScript

Publicado por Iván Gajate el 29 de noviembre de 2013 en JavaScript | 1 comentario »

Los Object en JavaScript se comparan por referencia, es decir, que aunque sean dos objetos idénticos, cada uno apunta a un espacio de memoria diferente. Así:

var a = {nombre:'Ivan'};
var b = {nombre:'Ivan'};
 
alert(a == b); // false

Una forma rápida y sencilla de comparar dos objetos es convertirlos a una cadena de texto con JSON.stringify

var a = {nombre:'Ivan'};
var b = {nombre:'Ivan'};
 
// Compare two objects
function compareObjects(obj1, obj2) {
	return JSON.stringify(obj1) === JSON.stringify(obj2);
}
 
alert( compareObjects(a, b) ); // true
Si tratamos de usarlo con un objeto jQuery nos dará un error porque tiene referencias circulares.

Sublime Text – Sublime Linter

Publicado por Iván Gajate el 13 de mayo de 2013 en css, Desarrollo Web, JavaScript | Los comentarios están cerrados.

Otra de plugins imprescindibles 🙂

Esta vez es el Sublime Linter, un plugin que nos marca los errores en CSS y JavaScript. Muy útil para evitar perder horas hasta que te das cuenta de ese paréntesis que se te ha olvidado o de esa propiedad CSS que no está bien escrita. Un ejemplo de JavaScript:

Y estas son mis preferencias del plugin (Preferences > Package Settings > Sublime Linter > Settings User), para que no me marque demasiados errores que yo se que no lo son o no me interesan (como algunas reglas CSS para Internet Explorer 6 por ejemplo):

{
	"sublimelinter_delay": 0.5,
	"sublimelinter_gutter_marks_theme": "bright",
	"jshint_options":
	{
		"evil": true,
		"regexdash": true,
		"browser": true,
		"wsh": true,
		"trailing": false,
		"sub": true,
		"eqnull": true,
		"unused": true,
    		"undef": true,
    		"devel": true,
    		"boss": true,
    		"smarttabs": true,
    		"jquery": true
	},
	"csslint_options":
	{
		"adjoining-classes": false,
		"box-model": false,
		"box-sizing": "warning",
		"compatible-vendor-prefixes": "warning",
		"display-property-grouping": true,
		"duplicate-background-images": false,
		"duplicate-properties": true,
		"empty-rules": true,
		"errors": true,
		"fallback-colors": "warning",
		"floats": "warning",
		"font-faces": "warning",
		"font-sizes": "warning",
		"gradients": "warning",
		"ids": false,
		"import": "warning",
		"important": false,
		"known-properties": true,
		"outline-none": "warning",
		"overqualified-elements": "warning",
		"qualified-headings": "warning",
		"regex-selectors": "warning",
		"rules-count": "warning",
		"shorthand": "warning",
		"star-property-hack": "warning",
		"text-indent": "warning",
		"underscore-property-hack": "warning",
		"unique-headings": "warning",
		"universal-selector": "warning",
		"vendor-prefix": true,
		"zero-units": "warning"
	}
}

Para instalarlo como cualquier otro plugin de Sublime, abrimos la paleta Command

Abrimos el paquete instalador

E instalamos el Sublime Linter: