如何解决2个冲突的JavaScript文件？

Question

如何在不使用JQuery或任何其他外部库或资源的情况下解决2个冲突的，单独的，链接的JavaScript文件？

Answer 1

Based on the conversation we had in the comments, I think I understand what you're asking here and what you mean by "conflicting."

To create a simple example, you have two js files that both use window.onload . The purpose of window.onload is to run the function you assign to it when the window is loaded.

Say you have two JS files:

A.js

window.onload = function(){
  console.log("File A")
}

and B.js

window.onload = function(){
  console.log("File B")
}

The problem is that window.onload can only have one function assigned to it a time. If you run the following code snippet you'll see that only the string "File B" gets logged to the console.

 <script> window.onload = function(){ console.log("File A") } </script> <script> window.onload = function(){ console.log("File B") } </script> 

Note that the order here IS important. Scripts are loaded and executed from top to bottom in your HTML whether they're linked or written inline. Where it gets confusing is because of Javascript's asynchronous behavior but that's something you'll get an intuition for as you learn.

You'll usually want to use addEventListener , on in this case window.addEventListener which will let you add multiple events to the same target (the window being the target in this case, but targets can include almost any element on the page).

Note how the below example now logs both strings.

 <script> window.addEventListener('load', function(){ console.log("File A") }) </script> <script> window.addEventListener('load', function(){ console.log("File B") }) </script> 

However, you potentially do not need to use the load event at all. It was historically used as a way to create a scope for modules/libraries/tools so that 3rd party code wouldn't have global variables that conflict just because they use the same name. This is sort of an advanced topic, so I won't go into detail, but using the window.onload event or the addEventListener variant have for the most part been replaced with using an Immediately Invoked Function Expressions