dupontES6: octobre 2016

test fonction fléchée (pas de fonction flechée dans class)

En action

Nous allons étudier différents codes ! Coller les différentes version de js

HTML

CSS

body, html
{
width: 100%; height: 100%;
overflow : hidden;
}

img{
padding: 10px;
width : 100px;
}

.overlay{
opacity : 0.8;
color : red;
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0px;
left: 0px;
right: 0px;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #000;
overflow: hidden;

}
.overlayimg
{
width: 60%;
margin: auto;
text-align: center;
position: fixed;
z-index: 3;
top: 0;
bottom: 0px;
left: 0px;
right: 0px;
padding: 0px 10px 10px;

}

JS

class imgHandler {

constructor(el) { // like array img
this.el= el;
}

init = () => {
for(let img of this.el) {
img.addEventListener('click',() => this._action(img));
}
}

_action = (photo) => {

let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");
// el
img.src = photo.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',this._restore);
document.body.appendChild(img);

}

_restore = () => {
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

version ES6

class imgHandler {

constructor(el) { // array like

this.el= el;

}

init = () => {

Array.from(this.el, (img) => img.addEventListener('click',() => this._action(img))); //es6 array like

}

_action = (el) => {

let overlay = document.createElement("div");

overlay.setAttribute("id","overlay");

overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");

// console.log(el)

img.src = el.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',this._restore(img));

document.body.appendChild(img);

}

_restore = (photo) => {

return function(){

console.log("stop");

document.body.removeChild(document.getElementById("overlay"));

document.body.removeChild(document.getElementById("img"));

}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

version : For of

class imgHandler {

constructor(el) { // like array img
this.el= el;
}

init = () => {
let self = this; // this=self=objet imgHandler
for(let img of this.el) {
img.addEventListener('click', () => {
console.log(self === this); // oui
self._action(img);
})
}
}

_action = (el) => {

let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");
// el
img.src = el.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',this._restore);
document.body.appendChild(img);

}

_restore = () => {
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

Autre version :

class imgHandler {

constructor(el) { // array like

this.el= el;

}

init = () => {

Array.from(this.el, (img) => img.addEventListener('click',this._action(img))); //es6 array like

}

_action = (el) => {

self = this;

return function(){

let overlay = document.createElement("div");

overlay.setAttribute("id","overlay");

overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");

// console.log(el)

img.src = el.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',self._restore(img));

document.body.appendChild(img);

}

_restore = (photo) => {

return function(){

console.log("stop");

document.body.removeChild(document.getElementById("overlay"));

document.body.removeChild(document.getElementById("img"));

}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

Autre version

class imgHandler {

constructor(el) { // pas de fx arrow

this.el= el;

}

init = () => {

let self = this;

for(let img of this.el) {

img.addEventListener('click', function(){

console.log(self === this); //false

self._action(img);
//self._action(this);
//self = Object imghandler et this = img courante

})

}

_action = (el) => {

console.log("click");

let overlay = document.createElement("div");

overlay.setAttribute("id","overlay");

overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");

// console.log(el)

img.src = el.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',this._restore(img));

document.body.appendChild(img);

}

_restore = (photo) => {

return function(){

console.log("stop");

document.body.removeChild(document.getElementById("overlay"));

document.body.removeChild(document.getElementById("img"));

}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

autre version : closure

class imgHandler {

constructor(el) { // pas de fx arrow

this.el= el;

}

init = () => {

for(let i=0; i<this.el.length ; i++) {

this.el[i].addEventListener('click',this._action(this.el[i]))

}

_action = (el) => {

let self = this;

return function(){

console.log( this); // img
console.log(self); // imgHandler

let overlay = document.createElement("div");

overlay.setAttribute("id","overlay");

overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");

// console.log(el)

img.src = el.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',self._restore(img));

document.body.appendChild(img);

}

_restore = (photo) => {

return function(){

console.log("stop");

document.body.removeChild(document.getElementById("overlay"));

document.body.removeChild(document.getElementById("img"));

}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

version !

class imgHandler {

constructor(el) { // pas de fx arrow
this.el= el;
}

init = () => {

for(let i=0; i<this.el.length ; i++) {
this.el[i].addEventListener('click',this._action())
}

}

_action = () => {

let self = this;

return function(){

console.log(this); // img
console.log(self); // imgHandler

let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");

document.body.appendChild(overlay);

let img = document.createElement("img");

img.setAttribute("id","img");

// console.log(this)
img.src = this.dataset.larger;

img.classList.add("overlayimg");

img.addEventListener('click',self._restore(img));
document.body.appendChild(img);

}

}

_restore = (photo) => {
return function(){
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
}

};

var imgs = new imgHandler(document.querySelectorAll('img'));

imgs.init();

itérateurs sur un objet !

class Log{
constructor(){
this.messages = [];
}
add(message){
this.messages.push({message, timestamp : new Date()});
}
[Symbol.iterator]() {
//return this.messages.values();
let i=0;
const messages = this.messages;
return {
next() {
if ( i >= messages.length)
return { value : undefined, done: true};
return { value: `N°${i} : ${messages[i].message} @ ${messages[i++].timestamp}`, done: false};
}
}
}
}

const log = new Log();
log.add("premier");
log.add("second");

console.log([...log]);

code source

JS Bin on jsbin.com

Itérateurs

let elements = document.querySelectorAll("div"),
callback = (el) => { console.log(el.name); };

elements[Symbol.iterator] = function () {
let i = 0;
const Max = 2;

return {
next () {
if ( i > Max )
return { value : undefined, done: true };
return { value : `\nLe ${elements[i].nodeName} N°${i} \t a pour texte ${elements[i++].textContent}`, done: false};
}
};
};

console.log([...elements]);

JS Bin on jsbin.com

itérations sur les nodeList

let elements = document.querySelectorAll("div"),
callback = (el) => { console.log(el.name); };

// Spread operator
[...elements].forEach(callback);

// Array.from()
Array.from(elements).forEach(callback);

// for...of statement
for (let div of elements) callback(div);

fichier code

JS Bin on jsbin.com

//itérator
elements[Symbol.iterator]();
elements.forEach(callback)

console.log("-----");
elements[Symbol.iterator] = function* () {
yield "un nd";
yield 2;
yield "fin";
};

console.log([...elements]);

var dans les boucles !

let tab = ["a","b","c"];

var printI = function(){

console.log(tab[i]);

};

for (var i=0; i<tab.length;i++){

setInterval(printI, 1000*(i+1));

}

let tab = ["a","b","c"];

var i; // i sera égal à 3 lors des appels

var printI = function(){

console.log(tab[i]);

};

for (i=0; i<tab.length;i++){

setInterval(printI, 1000*(i+1));

}

for (var i=0; i<tab.length;i++){
setTimeout(function(){
console.log("in call back " + i);
}, 3000*(i+1));
}

Correction avec closure

"use strict";

var _loop = function _loop(i) {
setTimeout(function () {
console.log("in call back " + tab[i]);
}, 1000 * (i + 1));
};

for (var i = 0; i < tab.length; i++) {
_loop(i);
}

Correction :

for (let i=0; i<tab.length;i++){
setTimeout(function(){
console.log("in call back " + tab[i]);
}, 1000*(i+1));
}

nous sommes editables

C'est moi le plus grand !

Ecrivez ici des mots

... en action

Voici un élégant moyen de remplacer concat.

const T1 = ["Dupont", "Whells", "toto"];

const T2 = ["Dupond", "Whells", "titi"];

console.log(T1);
console.log(...T1);
console.log( [...T1 , ...T2] );

const promos = [
{ promo: "L3miage", etudiants: ["Dupont", "Whells", "Toto"]},
{ promo: "L2miage", etudiants: ["Dupond", "Pathé"]},
{ promo: "M1miage", etudiants: ["Audu", "Baby"]},
]

const tousEtudiants = promos.reduce(function(prev, curr) {
return [...prev, ...curr.etudiants];
},[]);

console.log(tousEtudiants.sort());

transposé !

const A = [
[1,3,5],
[2,4,6]
];

let At = A[0].map( (_,col) => A.map( (lig,_) =>lig[col]));

console.log(`|${A.join("|\n|")}| `) ;

console.log(`|${At.join("|\n|")}| `) ;

Création d'un objet

class elHandler {

constructor(el) { // pas de fx arrow
this.el= el;

this.init();
}

init = () => {
this.el.addEventListener("click",
event => this._action(event.type,this.el), false);
return this;
}

_action = (type,el) => {
console.log(` Handling + ${type} for ${el.id} `);
el.classList.toggle("red");
return this;
}

};

let objDiv = new elHandler(document.getElementById("para1"));





Remarque : 


Examiner le code pour


class elHandler {

     constructor(el) { // pas de fx arrow
          this.el= el;
          
          this.init();
     }

    init(){
      this.el.addEventListener("click",
                event => this._action(event.type,this.el), false);
      return this;
     }
    
    _action = (type,el) => {
       console.log(` Handling + ${type} for ${el.id} `);
       el.classList.toggle("red");
       return this;
    }

};


var objDiv = new elHandler(document.getElementById("para1"));

Et finalement

class elHandler {

  constructor(el) { // pas de fx arrow
    this.el = el;

    this.init();
  }

  init() {
    this.el.addEventListener("click", function(event) {
      document.body.insertAdjacentHTML('beforeend', `<div id="two">this.ed = ${this.el}</div>`);
      this._action(event.type, this.el)
    }, false);
    return this;
  }

  _action = (type, el) => {
    el.classList.toggle("red");
    return this;
  }

};