In-depth Analysis of Global Scope and Import/Export Syntax in JavaScript Modular Development

Differences Between Module Scope and Global Scope

In traditional JavaScript development, variables and functions defined in script files imported via <script> tags are automatically added to the global scope (typically the window object). However, when using <script type="module">, the situation changes fundamentally. Code within modules executes in an independent module scope, meaning that variables and functions defined there are not automatically exposed to the global scope.

In the provided case, the showImportedMessage function is defined in the showImport.js module, but due to module scope restrictions, this function cannot be directly accessed by the onclick event handler in the HTML. This is why the browser throws the "Uncaught ReferenceError: showImportedMessage is not defined" error.

Correct Import/Export Syntax

JavaScript's ES6 module system provides two main export methods: named exports and default exports. Understanding the distinction between these two approaches is crucial for proper module usage.

In the original code, the show.js file contains both default and named exports:

export default "Why do I need this?";

export function showMessage() {
    alert("Hello!");
}

However, the import statement in showImport.js uses incorrect syntax:

import showMessage from '/show.js';

When using the import x from 'module' syntax, JavaScript expects to import the module's default export. Since the showMessage function is exported as a named export, the correct import approach should be:

import { showMessage } from '/show.js';

If a default export is indeed needed, the export statement should be modified to:

export default function showMessage() {
    alert("Hello!");
}

Complete Solution

Based on the above analysis, the complete solution to the original problem is as follows:

First, correct the show.js file by removing the unnecessary default export:

export function showMessage() {
    alert("Hello!");
}

Then, update the showImport.js file:

import { showMessage } from './show.js';

window.showImportedMessage = function showImportedMessage() {
    showMessage();
}

There are two key modifications here:

1. Using the correct named import syntax import { showMessage }
2. Explicitly attaching the showImportedMessage function to the window object to make it available in the global scope

With these changes, the button click event in the HTML can correctly invoke the showImportedMessage function.

Best Practices in Modular Development

In practical modular development, it is recommended to follow these best practices:

1. Explicit Scope Management: Always be aware that module code executes in an independent scope and requires explicit exposure of necessary interfaces to the global scope
2. Consistent Export Style: Within a module, it is advisable to consistently use either named exports or default exports to avoid confusion from mixed usage
3. Relative Path Imports: Use relative paths (e.g., './show.js') rather than absolute paths to enhance code portability
4. Minimize Global Pollution: Only expose essential functions or variables to the global scope to reduce the risk of naming conflicts

By understanding how module scope works and mastering correct import/export syntax, developers can fully leverage the advantages of JavaScript modularization to write clearer, more maintainable code.