HTML中使用JS模块报错greet未定义，如何避免全局函数解决？

ES模块拥有独立的作用域，模块内的函数默认不会暴露到全局环境中。HTML里的onclick属性属于全局作用域，自然找不到模块内的greet函数，因此抛出ReferenceError。

不需要将greet挂载到window上，可通过以下几种方式实现：

方案1：模块内直接绑定事件监听器 #

修改module.js，在模块内获取按钮元素并绑定点击事件，让事件处理逻辑留在模块作用域中：

export function greet(name) {
  console.log("Hello, " + name + "!");
}

// 等待DOM加载完成后获取按钮
document.addEventListener('DOMContentLoaded', () => {
  const greetButton = document.querySelector('button');
  greetButton.addEventListener('click', () => greet('John'));
});

同时删除HTML按钮上的onclick属性：

<button>Click Me</button>

方案2：使用事件委托 #

如果按钮是动态生成的，或者不想直接获取元素，可通过事件委托在模块内监听全局点击事件，判断目标元素后执行函数：

export function greet(name) {
  console.log("Hello, " + name + "!");
}

document.addEventListener('click', (event) => {
  // 给按钮添加类名，精准判断目标元素
  if (event.target.classList.contains('greet-btn')) {
    greet('John');
  }
});

HTML按钮添加类名：

<button class="greet-btn">Click Me</button>

方案3：通过自定义属性传递参数并绑定事件 #

给按钮添加自定义属性，模块内通过属性选择器获取元素，还能灵活传递参数：
HTML修改按钮：

<button data-greet-name="John">Click Me</button>

module.js代码：

export function greet(name) {
  console.log("Hello, " + name + "!");
}

document.addEventListener('DOMContentLoaded', () => {
  const greetButton = document.querySelector('[data-greet-name]');
  greetButton.addEventListener('click', () => {
    const name = greetButton.dataset.greetName;
    greet(name);
  });
});

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