Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

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

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());

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.