JS自定义HTML构建类instanceof检测异常 嵌套调用返回结果错误

核心问题清单 #

• br方法直接访问未定义的tags变量，运行时会抛出ReferenceError
• 嵌套判断逻辑存在缺陷：遍历元素参数时对nesting标识做覆盖赋值，仅能识别最后一个参数是否为Templater实例
• 内容转换逻辑未处理Templater实例参数：transform方法直接拼接参数，不会主动调用实例的toString方法获取内部结构
• 单实例共用导致内容冲突：嵌套场景下所有元素操作共用同一个Templater实例，内部元素的渲染结果会提前写入全局数组，导致内容丢失、顺序错误
• toString逻辑不合理：嵌套场景仅返回数组最后一项，直接丢失其余嵌套元素的内容

修复后完整代码 #

class Templater {
    constructor() {
        this.arr = []; 
    }
    transform(tags) {
        // 对每个参数做类型处理，Templater实例主动调用toString获取内容
        return tags.map(item => {
            if (item instanceof Templater) {
                return item.toString();
            }
            return item;
        }).join("");
    }

    div(...tags) {
        this.arr.push(`<div>${this.transform(tags)}</div>`) 
        return this;
    }

    span(...tags) {
        this.arr.push(`<span>${this.transform(tags)}</span>`);
        return this
    }
    br() {
        // br标签不允许嵌套内容，直接抛错
        if (arguments.length > 0) {
            throw new Error('Nested content is not allowed');
        }
        this.arr.push(`<br>`);
        return this; 
    }
    p(...tags) {
        this.arr.push(`<p>${this.transform(tags)}</p>`);
        return this
    }

    toString() {
        const res = this.arr.join('');
        // 输出后清空数组，避免实例复用残留内容
        this.arr = [];
        return res;
    }
}
const template = new Templater();

console.log(template.div(
    new Templater().p('Hello'),
    new Templater().p('World')
).toString());
// 输出：<div><p>Hello</p><p>World</p></div>

console.log(new Templater().div().toString());
// 输出：<div></div>
console.log(new Templater().div('Hello').p('fix').toString());
// 输出：<div>Hello</div><p>fix</p>

修复说明 #

1. 移除了冗余的nesting标识，直接在transform方法中统一处理Templater实例参数，主动调用toString获取嵌套内容
2. 修复br方法的变量引用错误，调整参数判断逻辑
3. 优化toString逻辑，统一返回所有元素拼接结果，输出后自动清空数组避免残留
4. 嵌套场景建议为每个子元素创建独立的Templater实例，从根源上避免内容相互干扰，符合职责分离的设计原则

内容的提问来源于stack exchange，提问作者Rurohi53