StackBlitz项目中如何在HTML模板中调用JavaScript函数

在StackBlitz这样的在线开发环境中，很多开发者会遇到一个常见问题：明明在JavaScript文件中定义了函数，但在HTML模板中使用onclick事件调用时却提示函数未定义。这个问题看似简单，但背后涉及到现代前端开发中模块化的重要概念。

问题现象

开发者通常会这样尝试：

1. 在JavaScript文件中定义一个函数
2. 在HTML文件中通过onclick属性直接调用该函数
3. 运行时却收到"函数未定义"的错误

根本原因

这种现象的根本原因是StackBlitz（以及现代前端工具链如Vite、Create React App等）默认会对JavaScript文件进行编译和模块化处理。这种处理有几个重要特点：

1. 模块作用域隔离：默认情况下，JavaScript文件中定义的变量和函数不会自动暴露到全局作用域(window对象)
2. 防止命名冲突：这种设计可以避免不同文件中的同名函数互相覆盖
3. 支持现代语法：允许使用import/export等ES模块语法

解决方案

要让函数在HTML模板中可访问，有以下几种方法：

方法一：显式挂载到window对象

function myFunction() {
  alert('函数被调用');
}

// 将函数显式挂载到全局window对象
window.myFunction = myFunction;

方法二：使用事件监听器

更推荐的做法是避免使用HTML中的onclick属性，改为在JavaScript中添加事件监听器：

document.getElementById('myButton').addEventListener('click', function() {
  alert('按钮被点击');
});

方法三：使用模块导出

如果项目支持ES模块，可以使用export导出函数，然后在HTML中通过type="module"引入：

<script type="module" src="index.js"></script>

然后在JavaScript中：

export function myFunction() {
  // 函数实现
}

最佳实践建议

1. 避免污染全局作用域：尽量减少直接挂载到window对象的做法，只在必要时使用
2. 统一事件管理：推荐将所有事件监听集中在JavaScript文件中管理，而不是分散在HTML属性中
3. 利用模块化：充分利用ES模块的import/export功能来组织代码
4. 考虑框架用法：如果使用React/Vue等框架，遵循框架推荐的事件处理方式

总结

理解StackBlitz等现代开发环境的模块化处理机制，能够帮助开发者更好地组织代码结构，避免常见的"函数未定义"问题。关键在于认识到现代前端工具链默认采用模块化设计，与传统的全局脚本引入方式有所不同。掌握这些概念后，开发者就能更自如地在各种环境中编写可维护的前端代码。