重构 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是一样的吗，还是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);

how do I add additional functions to a function variable?

如果您只有一个监听器，那么只需调用监听器中的两个函数即可：

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

这就像

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

（但是，通常使用 addEventListener 更好）

重构 onload 以添加第二个功能？奖励：通常向变量添加第二个函数怎么样？

Refactoring onload to add a second function? Bonus: what about adding second functions to variables in general?

javascript

function

onload