多JS文件方法调用问题：同名方法调用与跨文件调用报错排查

Alright, let's tackle your two JavaScript issues step by step:

1. How to call func1 from js_002.js? #

First, a quick note: in traditional global-scope script loading, later scripts overwrite earlier global functions with the same name. Since you're loading js_001.js first then js_002.js, the global func1 is already replaced by the version in js_002.js—so calling func1() directly will run the js_002.js version by default.

But to avoid naming conflicts and make your code more maintainable, it's better to isolate functions using namespaces or ES modules:

• Option 1: Use namespaces
  Wrap each script's code in an object to create a dedicated scope:
  In js_001.js:

  const JsModule1 = {
    func1: function() {
      // Logic for js_001's func1
    }
  };
  

  In js_002.js:

  const JsModule2 = {
    func1: function() {
      // Logic for js_002's func1
    }
  };
  

  Now you can explicitly call the js_002.js version with: JsModule2.func1()

• Option 2: Use ES Modules (recommended for modern projects)
  Convert your scripts to ES modules by adding type="module" to your script tags:

  <head>
    <script type="module" src="js_001.js"></script>
    <script type="module" src="js_002.js"></script>
  </head>
  

  Export func1 from js_002.js:

  export function func1() {
    // Logic for js_002's func1
  }
  

  Then import and call it wherever you need (e.g., in another module or a module script in your HTML):

  import { func1 } from './js_002.js';
  func1();
  

2. Why does calling func2 throw an error saying it doesn't exist in js_001.js, and how to fix it? #

Common causes:

• js_002.js failed to load: Double-check the src path—if the file is missing, has a typo, or is in a different directory (e.g., js/js_002.js instead of js_002.js), the browser won't load it. The error might incorrectly point to js_001.js due to execution context quirks.
• func2 is not a global function: If func2 is defined inside a local scope (like an IIFE or another function), it won't be accessible globally. For example:

  (function() {
    // This func2 is trapped in the local scope
    function func2() { /* ... */ }
  })();
  

• Timing issue: If you call func2 before js_002.js finishes loading (e.g., calling it in a script that runs before js_002.js executes), the function won't exist yet.

Fixes:

1. Verify the script path: Open your browser's DevTools > Network tab, refresh the page, and check if js_002.js loads with a 200 status. If it's a 404, correct the src attribute in your HTML.
2. Make func2 globally accessible: Either define it as a top-level function, or attach it to the global window object if it's in a local scope:

   // Option 1: Top-level global function
   function func2() { /* ... */ }
   
   // Option 2: Attach to window from a local scope
   (function() {
     function func2() { /* ... */ }
     window.func2 = func2;
   })();
   

3. Ensure proper execution timing: Use the defer attribute on your script tags to ensure they load in order and execute after the DOM is parsed, or place your call to func2 at the end of the <body> (after the script tags):

   <head>
     <script type="text/javascript" src="js_001.js" defer></script>
     <script type="text/javascript" src="js_002.js" defer></script>
   </head>
   <body>
     <script>
       // Safe to call func2 here because defer ensures scripts are loaded
       func2();
     </script>
   </body>
   

内容的提问来源于stack exchange，提问作者Yanshof