重构onload以添加第二个函数？额外:一般情况下,如何向变量添加第二个函数？

Question

我按顺序有两个问题？

我有两组代码我正在重构.每个都有一个onload.

两者都将在一个站点上自行运行,但我不希望它们覆盖彼此的负载.

所以我有相同的:

window.onload=function(){ alert("foo")};

和

window.onload=function(){ alert("bar")};

在两个文件中.

为了避免一个人覆盖另一个的window.onload赋值,我将它们重构为:

window.onload+=function(){ alert("foo")};

和

window.onload+=function(){ alert("bar")};

但那时似乎既不会发生火灾.

而且因为它似乎有助于我了解情况并且通常只是一个不错的技能,我如何向函数变量添加其他函数？(它与onload相同,还是上传了一个特例？它让我感觉像是一个特殊情况.)

所以如果我有......

var Varrick = function(){ alert("Do the thing!");}

我有

var Zhu_li = function (){ alert("Did the thing."); }

什么会有效的命令

var Varrick = Varrick + Zhuli.

所以...

Varrick(); // Alerts "Do the thing!" then alerts "Did the thing."

注意:我想这样做而不依赖于jQuery.

Answer 1

这就是为什么分配on-属性通常不是一个好主意的一个原因- 如果以前存在于该属性上的任何内容,它将被覆盖,因此只有最新的处理程序才会触发.(并且不要试图相互作用+=)

尝试添加DOMContentLoaded侦听器:

function foo() {
  console.log('foo');
}
function bar() {
  console.log('bar');
}
document.addEventListener("DOMContentLoaded", foo);
document.addEventListener("DOMContentLoaded", bar);

如何向函数变量添加其他函数？

如果你有到只有一个听众,然后就调用监听器两种功能:

document.addEventListener("DOMContentLoaded", () => {
  foo();
  bar();
});

这就像

window.onload = function(){
  foo();
  bar();
};

(但通常更好用addEventListener)