如何复用含多元素与函数的JS文件？兼容document.write调用

我有一个包含多个DOM元素和函数的.js文件，目前在index.js中通过document.write调用它。我希望能按需多次复用该文件，实现类似“new .js”的多实例效果。尝试许久未找到可行方法，考虑通过类来实现，但不清楚如何编写对应的类，也不知道如何在复用该类前兼容document.write的原有使用方式。示例代码如下：

var renderer = document.createElement('div');
var bG = document.createElement('div');
var icon = document.createElement('img');
var lock = document.createElement('img');
var deleteBtn = document.createElement('button'); // 注：delete是JS关键字，原代码会报错，此处改名
var txt = document.createElement('p');
var users = document.createElement('button');
var rIcon = document.createElement('img');

(function () {
    renderer.id = 'Renderer';
    bG.id = 'BG';
    icon.id = 'icon';
    lock.id = 'Lock';
    deleteBtn.id = 'Delete';
    txt.id = 'txt';
    users.id = 'Users';
    rIcon.id = 'rIcon';

    renderer.appendChild(bG),
    renderer.appendChild(users), renderer.appendChild(txt), renderer.appendChild(lock),
    renderer.appendChild(deleteBtn), renderer.appendChild(icon),renderer.appendChild(rIcon);

    document.body.appendChild(renderer);

    users.addEventListener('click', OnPress);
    users.addEventListener('mouseover', OnrollOver);
    users.addEventListener('mouseout', OnrollOut);
    deleteBtn.addEventListener('click', DeleteClick);

}());

1. 将组件封装为类 #

把全局变量和自执行逻辑改成类结构，让每个实例拥有独立的DOM元素与事件绑定，实现多实例复用：

class RendererComponent {
    constructor() {
        // 初始化实例专属DOM元素
        this.renderer = document.createElement('div');
        this.bG = document.createElement('div');
        this.icon = document.createElement('img');
        this.lock = document.createElement('img');
        this.deleteBtn = document.createElement('button');
        this.txt = document.createElement('p');
        this.users = document.createElement('button');
        this.rIcon = document.createElement('img');

        // 设置元素标识：多实例场景建议用class或动态唯一ID，避免ID重复
        // 示例动态ID：this.renderer.id = `Renderer-${Date.now()}-${Math.random().toString(36).slice(2)}`
        this.renderer.id = 'Renderer';
        this.bG.id = 'BG';
        this.icon.id = 'icon';
        this.lock.id = 'Lock';
        this.deleteBtn.id = 'Delete';
        this.txt.id = 'txt';
        this.users.id = 'Users';
        this.rIcon.id = 'rIcon';

        // 组装DOM结构
        this.renderer.appendChild(this.bG);
        this.renderer.appendChild(this.users);
        this.renderer.appendChild(this.txt);
        this.renderer.appendChild(this.lock);
        this.renderer.appendChild(this.deleteBtn);
        this.renderer.appendChild(this.icon);
        this.renderer.appendChild(this.rIcon);

        // 绑定事件
        this.bindEvents();
    }

    // 绑定事件处理函数，确保this指向当前实例
    bindEvents() {
        this.users.addEventListener('click', this.onPress.bind(this));
        this.users.addEventListener('mouseover', this.onRollOver.bind(this));
        this.users.addEventListener('mouseout', this.onRollOut.bind(this));
        this.deleteBtn.addEventListener('click', this.deleteClick.bind(this));
    }

    // 将组件挂载到指定容器，默认挂载到body
    mount(container = document.body) {
        container.appendChild(this.renderer);
    }

    // 迁移原全局事件函数为类方法
    onPress() {
        // 原OnPress逻辑，示例：
        console.log('用户按钮被点击');
    }

    onRollOver() {
        // 原OnrollOver逻辑，示例：
        console.log('鼠标移入用户按钮');
    }

    onRollOut() {
        // 原OnrollOut逻辑，示例：
        console.log('鼠标移出用户按钮');
    }

    deleteClick() {
        // 原DeleteClick逻辑，示例：
        console.log('删除按钮被点击');
        this.renderer.remove(); // 可直接移除当前实例DOM
    }
}

2. 兼容原有document.write调用方式 #

在类定义后添加兼容逻辑，保留原有调用习惯：

// 兼容document.write的原有调用：自动创建一个实例并挂载
if (typeof document !== 'undefined' && document.currentScript) {
    const defaultInstance = new RendererComponent();
    defaultInstance.mount();
}

3. 使用方式 #

• 原有调用（兼容）：继续用document.write('<script src="你的组件文件.js"></script>')，会自动创建一个实例挂载到body，和原有行为一致。
• 多实例复用：在其他脚本中直接实例化类：

// 创建第一个实例，挂载到body
const instance1 = new RendererComponent();
instance1.mount();

// 创建第二个实例，挂载到指定容器
const customContainer = document.getElementById('my-container');
const instance2 = new RendererComponent();
instance2.mount(customContainer);

关键注意事项 #

• ID唯一性：HTML中ID必须唯一，多实例场景下建议改用class类名，或动态生成唯一ID。
• this指向：事件绑定必须用bind(this)，确保事件函数中的this指向当前组件实例。
• 全局函数迁移：把原全局事件函数改成类方法，避免全局作用域污染，同时保证每个实例逻辑独立。

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