如何为按钮绑定模块中声明的JavaScript函数？

问题根源 #

用type="module"引入的JS文件会启用模块作用域，内部的函数、变量默认不会挂载到浏览器的window全局对象上，所以页面元素的onclick属性、浏览器控制台都无法直接访问这些函数。

可行解决方案 #

方案1：将函数挂载到window全局（最直接） #

在main.js里，把需要外部调用的函数赋值给window对象，让它成为全局可访问的函数：

import * as THREE from 'three';

// ThreeJS场景初始化代码
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// 需要触发的函数
function rotateCube() {
  cube.rotation.y += 0.05;
}

// 关键：把函数挂载到window全局
window.rotateCube = rotateCube;

HTML按钮直接调用：

<button onclick="rotateCube()">旋转立方体</button>

注意：为避免全局变量冲突，建议给函数名加项目前缀，比如window.myAppRotateCube = rotateCube;，对应onclick="myAppRotateCube()"。

方案2：用自定义事件（避免全局污染） #

如果不想污染全局作用域，可通过自定义事件实现：

1. HTML按钮的onclick触发自定义事件：

<button onclick="document.dispatchEvent(new CustomEvent('rotateCubeEvent'))">旋转立方体</button>

2. 在main.js里监听这个自定义事件：

// ...（ThreeJS初始化代码不变）

function rotateCube() {
  cube.rotation.y += 0.05;
}

// 模块内部监听自定义事件
document.addEventListener('rotateCubeEvent', rotateCube);

这个方案里，模块内的函数保持私有，仅通过事件机制触发，页面onclick只负责发送事件，无需直接访问模块内函数。

为什么export没用？ #

模块的export仅支持其他模块通过import引用，但浏览器的onclick属性运行在全局作用域，无法执行import语句，因此直接export函数对onclick无效。

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