JS - fluent interface

Uczymy się „return this” czyli pisania metod, które można chainować. Na przykładzie z poprzedniej lekcji. Do dzieła.

Poprzednia klasa:

class Helper {
    constructor(selector) {
        this.item = document.getElementById(selector);
      }
    
    toUpper(){
        
        let txt = this.item.textContent;
        
        if(this.item.firstChild.nodeType === Node.TEXT_NODE){
            this.item.textContent = txt.toUpperCase();
        }else {
            this.item.firstChild.textContent = txt.toUpperCase();
        }
    }

    toBold(){
        let txt = this.item.textContent;
        this.item.innerHTML = "<b>" + txt + "</b>";
    }

}


window.addEventListener("DOMContentLoaded", function(){

    let para = new Helper('para');

    console.log(para.item.innerHTML);
    //bla bla bla

    para.toBold();
    para.toUpper();
    
    console.log(para.item.innerHTML);
    //<b>BLA BLA BLA</b>
   
});

Dodamy jeszcze jedną metodę:

class Helper {
    
    //(...)

    incrementFS(unit='px', by=1){

        let computed = getComputedStyle(this.item);
        let fs = computed.getPropertyValue('font-size');

        let fsNumber = parseInt(fs);
        let newSize = `${fsNumber+by}${unit}`;

        this.item.style.fontSize = newSize;
    }
}

Teraz dodamy „return this” do tych metod, które chcemy chainować:

class Helper {
    constructor(selector) {
        this.item = document.getElementById(selector);
      }
    
    toUpper(){
        
        //(...)
        return this;
    }

    toBold(){
        //(...)
        return this;
    }

    incrementFS(unit='px', by=1){
        //(...)
        return this;
    }
}

Mała uwaga – konstruktor zawsze zwraca this i to bez naszego określania typu zwrotnego. Aczkolwiek robi to w połączeniu ze słówkiem kluczowym new.

Ok, testujemy:

window.addEventListener("DOMContentLoaded", function(){

    let para = new Helper('para');
    
    para.toBold()
    .toUpper()
    .incrementFS()
    .incrementFS()
    .incrementFS();
   
});

Działa jak należy – metody można chainować.

JS – fluent interface