同一个页面上出现多个window.onload方法，如何规避方法被覆盖

在前端开发中，window.onload 是一个非常重要的事件。它会在页面加载完成后触发，这意味着我们可以在这个事件处理程序中执行一些必要的初始化操作，比如绑定事件、初始化插件等等。但是，在某些情况下，可能会出现一个页面出现两个 window.onload 的情况，这会导致其中一个事件处理程序被覆盖，从而导致一些意外的问题。

例如，以下代码：

window.onload = function() {
  console.log("第一个 onload");
};

window.onload = function() {
  console.log("第二个 onload");
};

在上面的代码中，只有 "第二个 onload" 会在页面加载完成时被打印到控制台。因为第二个 window.onload 覆盖了第一个。

那么，如何规避一个页面两个 window.onload 呢？以下是一些方法：

1. 使用 addEventListener 方法

addEventListener 是一种更加灵活和优雅的添加事件处理程序的方式。相比于直接给 window.onload 赋值一个函数，使用 addEventListener 可以添加多个事件处理程序，并且不会相互覆盖。例如：

window.addEventListener('load', function() {
  // 第一个事件处理程序
});

window.addEventListener('load', function() {
  // 第二个事件处理程序
});

这样，无论你添加多少个事件处理程序，它们都会依次执行，而不会相互覆盖。

2. 使用 jQuery 的 $(document).ready() 方法

如果你使用 jQuery，可以使用 $(document).ready() 方法来代替 window.onload。这个方法也会在页面加载完成后触发，但是它的执行速度更快，因为它会在 DOM 加载完成后就触发，而不需要等待所有资源都加载完成。

$(document).ready(function() {
  // 事件处理程序
});

3. 将多个事件处理程序合并成一个

如果你无法使用以上两种方法，可以将多个事件处理程序合并成一个。例如：

window.onload = function() {
  // 第一个事件处理程序

  // 第二个事件处理程序
};

4. 使用第三方库

一些第三方库，比如 React、Vue 等，提供了自己的初始化方式，可以避免直接使用 window.onload 导致的问题。如果你使用这些库，可以查阅它们的文档，了解它们提供的初始化方式。

总之，避免一个页面出现两个 window.onload 的问题非常重要，因为它可能会导致一些意外的问题。使用上述方法可以有效地规避这个问题，让你的代码更加健壮和可靠。

对于有用请点个赞赞，我会非常开心的，加油！（快下班啦，写完就下班）。