Verificar si una variable esta inicializada
if (typeof a !== "undefined")Console
console.log() -> representacion en string de algo
console.dir() -> devuelve un arbol de lo que realmente "es" lo que se pasa como parametro
e.currentTarget -> retorna el elemento original al que se le attach el evento. Esto es por ejemplo cuando dentro de un link ponemos texto y una imagen. Si utilizamos e.target nos va a deolver span o img como elemnto.
e.currentTarget = $(this) de Jquery
Event bubbling
-
- Cuando hacemos click en un elemento HTML. Causamos un evento Click.
- Supongamos que el click lo hacemos en un elemento de este tipo
<a href="#"> <span>LINK</span> </a> - Al hacerle click en realidad estamos haciendo click en el elemento SPAN. Entonces:
- Si existe algun listener de un evento click adjuntado a ese elemento se ejecuta.
- Luego el navegador sube un nivel, en este caso se encuentra con un tag A. Entonces realiza la misma acción: Si existe algun listener de un evento click adjuntado a ese elemento se ejecuta.
- El paso 2 se repite hasta llegar al elemento BODY
e.preventDefault() y e.stopPropagation()
Otra cosa que podemos hacer es modificar el comportamiento del navegador ante un evento
$table.find('.some-class').on('click', function (e) {
e.preventDefault(); // no realizar el comportamiento por defecto del navegador
e.stopPropagation(); // no "bubble" el evento a elementos superiores
//la siguiente linea realiza las mismas acciones que las 2 anteriores
//return false;
});
e.target()
Es una propiedad del evento que apunta al elemento que fue clickeado.
Es un objeto del tipo DOM Element
e.target() vs e.currentTarget()
<a class="link" href="#">
<span><img src="image.png" /> LINK</span>
</a>
Cuando hacemos click en la imagen e.target sera igual al elemento img, y cuando hacemos click en el text link, e.target será igual al elemento span. Pero si utilizamos e.currentTarget nos devolverá el elemento al cual le adjuntamos el evento que esn este caso es el elemento A
$table.find('.some-class').on('click', function (e) {
//nos muestra el elemento clickleado
console.log(e.target);
//nos muestra el elemento al cual se le adjunto el evento sin importar a cual de sus elementos
//se les hizo click
console.log(e.currentTarget);
});
Node
Instalar nvm
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
$ export NVM_DIR="$HOME/.nvm"
$ [ -s "$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh"
$ [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
$ nvm --version
//instalar versión
nvm install 8.16.0
//Cambiar versión
$ nvm use 8.16.0
Yarn
Instalar Yarn
//falta
$ yarn init //inicializa un package.json
//Babel convierte solo las nuevas construcciones y sintaxis de los nuevos lenguajes de JS a versiones anteriores
//Si hay nuevas funciones u objetos necesitamos Polifill
$ yarn add babel-cli --dev
$ yarn add babel-preset-env --dev
$ touch .babelrc
//agrega lo sigueinte
{
presets: ["env"]
}
$./node_modules/bin/babel filte/path/to/transpile -o filte/path/transpiled
ES6
Arrow Functions
//before
function(data) {};
//ES6
(data) => {};
data => {};
Si la funcion solo un solo return, se puede usar de las siguientes maneras
() => {
return 'hola';
};
() => 'hola';
Importante:
Arrow functions anónimas preservan el valor de this, dentro de ellas
En Jquery con Arrow functions
() => {
$row.fadeOut('normal', () => {
//Antes
$(this).fadeOut();
//ES6
$row.fadeOut();
})
}
() => {
//Antes
$row.find('div').each(function() {
$(this).val(2);
});
//ES6
$row.find('div').each((index, element) => {
$(element).val(2);
})
}
var, let y const
var: permite reasignar el valor de la variable, tiene scope de funcion, hace variable "hoisting"
let: permite reasignar el valor de la variable, tiene scope de bloque (if por ejemplo), no hace variable "hoisting"
const: no permite reasignar el valor de la variable.
Ejemplo:
const myVar = 1;
myVar = 2; //nos devuelve un error
const myObj = { name: 'Joe'};
myObj.name = 'Doe' //esta permitido
Object literals y Optional Args
cont url = 'http://mydomain.com';
const myObj = { url: url};
const myObj = { url }; //Si la key y el value son iguales se puede usar solo una vez
//Métodos dentro de objetos
const obj = {
//Antes
updateRow: function() {
//update
}
//ES6
updateRow() {
//update
}
//Ademas se pueden establecer parametros opcionales
updateRow(max = 400) {
//update
}
}
Clases
class Helper {
constructor(maxValue) {
this.maxValue = maxValue;
//code
}
//La nueva sintaxis get nos permite definir esta especie de propiedad
// que luego la podemos llamar como Helper._rows
// tambien existe "set"
get _rows() {
//return rows
}
//Si esta "propiedad" no usa this adentro, la podemos declarar como estática
static get _someConst() {
//return a const value
}
//Y la llamamos como Helper._someConst
static _utility() {
//return a calculation
}
//Y la llamamos como Helper._utility
//metodo comun
getDetails() {
//code
}
}
//Herencia
class CustomHelper extends Helper {
//sobreescribir
getDetails() {
//new code
}
//llamar al metodo de la clase padre
getParentDetails() {
super.getDetails()
}
//sobre escribir el constructor
constructor(maxValue, otherValue) {
super(maxValue);
this.otherValue = otherValue;
}
}
const custom = new CustomHelper(100);
Destructuring
const obj = {name: 'Joe', lastName: 'Doe', age: '28'};
//crea tres variables con los valores de obj
let {name, lastName, age} = obj;
//admás se pueden agregar keys que no existan y ponerles valores por defecto
let {name, lastName, age, citizenship = 'spain'} = obj;
//con Arrays: es por posición
const carsArray = ['audi', 'vw', 'ferrari'];
let [car1, car2] = carsArray;
Spread Operator
//con Arrays
const carsArray = ['audi', 'vw', 'ferrari'];
let printCars = (car1, car2, car3) => {
console.log(car1, car2, car3);
}
//Funciona como si completaran 1 a 1 los argumentos
printCars(...carsArray);
// tambien sirve para array merge
let newCarsArray = ['fiat', 'opel', ...carsArray];
//tambien sirve para copiar un array y agregar nuevos valores solo a la copia
let copyOfCarsArray = newCarsArray;
copyOfCarsArray.push('porshe');
//esto nos da como resultado que copyOfCarsArray y newCarsArray poseen porshe
//Por que los arrays se pasan por referencia
let copyOfCarsArray = [...newCarsArray];
copyOfCarsArray.push('porshe');
//esto nos da como resultado que copyOfCarsArray solamente contiene a porshe
Template Strings
//Antes
var nombre = 'Joe';
var mensaje = "Hola mi nombre es: "+ nombre;
//ES6
var nombre = 'Joe';
var mensaje = `Hola mi nombre es: ${nombre}`;
//Además permite tener string con line breaks
var mensaje =
`Hola mi nombre es:
Joe Doe
`;
For Loop
//for para colecciones menos objetos
for (let names of data.names) {
}
//for para objetos
for (let names in data.names) {
}Funciones
// look up the name
// of the item based on the "id" argument.
const { name } = this.props.items.find(i => i.id === id);
this.props.items.map(({ id, name }) => (
{name}
))}