Question

0

45

Views

Order of executing JS functions / rebuilding JS Class logic

I need output to be:

<p>123<span>321</span></p>

But now that's:

<span>321</span><p>123<span>321</span></p>

What is the best option to start execute p() and then span() inside it?

class Templater {
    constructor() {
        this.output = '';
    }


    span(...tags) {
        const transform = tags => tags.join('');
        this.output += `<span>${transform(tags)}</span>`
        return this;
    }
   
    p(...tags) {
        const transform = tags => tags.join('');
        this.output += `<p>${transform(tags)}</p>`
        return this;
    }
    toString() {
        return this.output;
    }
}

const template = new Templater(); 

console.log(template.p('123', template.span('321')).toString());

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T11:45:34.247Z

The easiest is to just skip the whole this.output thing altogether and just trust the call stack.

class Templater {
    _transform(tags) {
        return tags.join("");
    }
    span(...tags) {
        return `<span>${this._transform(tags)}</span>`;
    }
   
    p(...tags) {
        return `<p>${this._transform(tags)}</p>`;
    }
}

const template = new Templater(); 
console.log(template.p('123', template.span('321')).toString());

Another option is to construct a tree of objects that know how to render themselves into a string:

class Tag {
     constructor(tag, children) {
         this.tag = tag;
         this.children = children;
     }
     toString() {
         const children = this.children.map(c => c.toString()).join("");
         return `<${this.tag}>${children}</${this.tag}>`;
     }
}

class Templater {
    span(...children) {
        return new Tag('span', children);
    }
   
    p(...children) {
        return new Tag('p', children);
    }
}

const template = new Templater(); 
console.log(template.p('123', template.span('321')).toString());