使用单个 DOM Content Loaded 调用

Question

在多个函数上使用单个 DOMContentLoaded 调用的正确方法是什么，如下所示：

这是我所拥有的：

function rtd3Transaction() {
        if (rtd3tchanged.checked || rtd3dchanged.checked) {
            formWrapperCertainSelection.style.display = '';
            formWrapperConfirm.required = true;
        } else {
            formWrapperCertainSelection.style.display = 'none'
            formWrapperConfirm.required = false;
        }
}
rtd3tchanged.addEventListener('change', rtd3Transaction);
document.addEventListener('DOMContentLoaded', rtd3Transaction);
rtd3Transaction();

function rtd3Device() {
        if (rtd3tchanged.checked || rtd3dchanged.checked) {
            formWrapperCertainSelection.style.display = '';
            formWrapperConfirm.required = true;
        } else {
            formWrapperCertainSelection.style.display = 'none'
            formWrapperConfirm.required = false;
        }
}
rtd3dchanged.addEventListener('change', rtd3Device);
document.addEventListener('DOMContentLoaded', rtd3Device);
rtd3Device();

Answer 1

按照你现在的方式来做这件事很好。 您可以将多个处理程序附加到事件，它们都会被调用。

但是，如果你想改变它，你可以像其他任何时候一样，在一个地方一次做多件事：你把操作放在一个函数中，然后安排该函数被调用：

document.addEventListener('DOMContentLoaded', function() {
    rtd3Transaction();
    rtd3Device();
});

Answer 2

我更喜欢创建一个数组，我可以将新的初始化例程推送到定义它们的任何地方，然后在内容加载事件触发后初始化每个。

const initRoutines = []

function example1() {}
initRoutines.push(example1)

function example2() {}
initRoutines.push(example2)

document.addEventListener("DOMContentLoaded", () => {
  initRoutines.forEach(routine => routine())
})