Délégation d'événement

<ul id="menu">
  <li data-action="save">Save
  <li  data-action="load">Load
  <li  data-action="search">Search
</ul>

JS
 class Menu {
    constructor(elem) {
      this._elem = elem;

     elem.onclick = _ => this.onClick(event)
    }

    save() {
      //action
    }

    load() {
      //
    }

    search() {
      //action
    }


    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    }
  }

  new Menu(menu);

WEB component

Création d'un objet pour compter les éléments d'un paragraphe

En action

↺ old fashioned

code

// Create a class for the element
class WordCount {
  constructor(element) {
 
    this.elt = element;
    this.parent = this.elt.parentNode;
 
    // Update count when element content changes
     setInterval( _=>this.append(),2000); 
  }


    countWords(node){
      const text = node.innerText || node.textContent;
      return text.trim().split(/\s+/g).length;
    }
 
    append(){   
       this.elt.innerHTML="";   
   
    // Create text node and add word count to it
        const text = document.createElement('span');
        text.textContent = `Words: ${this.countWords(this.parent)}`;

    // Append to the dom
        this.elt.appendChild(text);   
    }

}

let t = new WordCount(document.getElementById("t"));

Aujourd'hui : Lit-html

https://lit-html.polymer-project.org/

Easy get and set

class Counter{
  
  constructor(){
    this.counterValue = 0;
  }
  
  get counter() {
    return this.counterValue;
  }
  
  set counter(val){
    this.counterValue = val;    
  }
}

let c = new Counter();

console.log(c.counter);
c.counter = 4;
console.log(c.counter);


code

Décomposttion

Voici un exemple de décomposition

Code