本文详解如何在模板字符串中安全绑定并执行外部函数（如 page()），解决因作用域、执行时机或 html 字符串解析导致的 referenceerror: page is not defined 错误。
在使用模板字符串动态生成 html 并内联事件处理（如 onclick=”page(‘xxx’)”）时，一个常见误区是认为只要函数已声明就能被 HTML 属性中的字符串代码访问——但实际能否执行，取决于函数是否处于全局作用域，以及事件绑定时的执行上下文是否可访问该函数。
✅ 正确做法：确保 page() 是全局可访问函数
浏览器在解析 onclick=”page(‘123’)” 这类内联事件时，会将字符串作为全局作用域下的 javaScript 代码执行。因此，page 必须是一个挂载在 window 上的函数（即全局函数），否则就会抛出 Uncaught ReferenceError: page is not defined。
以下是最小可行示例：
// ✅ 正确：定义为全局函数（等价于 window.page = function(...) {...}） function page(folderNum) { console.log('Navigating to folder:', folderNum); const productDetails = database.ref(`/products/${folderNum}`); productDetails.on('value', (snapshot) => { const details = snapshot.val(); console.log('Product details:', details); }); } // 渲染函数保持不变（注意：确保 numberFolder 已正确定义） function render(img, name, price, numberFolder) { const row = ` @@##@@ ${name}
$${price}
立即学习“Java免费学习笔记（深入）
”； `; document.querySelector('#main').insertAdjacentHTML('beforeend', row); }⚠️ 注意：你原代码中 ${numberFolder} 未在参数列表中声明，需补全 render(img, name, price, numberFolder) 并传入有效值，否则仍会报错（如 undefined 被拼入字符串）。
❌ 常见错误与规避方案
| 错误原因 | 说明 | 修复建议 |
|---|---|---|
| page 在模块/闭包内定义 | 如用 const page = (…) => {…} 或在 IIFE 内声明，则无法被 onclick 访问 | 改为 function page() {…} 且不包裹在 const/let 或私有作用域中；或显式挂载：window.page = page; |
| 使用 ES 模块（.mjs）且未导出到全局 | 模块作用域默认隔离，onclick 无法穿透 | 避免内联事件，改用事件委托（推荐 ✅） |
| page 定义在 render() 调用之后 | 执行顺序问题导致 dom 点击时函数尚未声明 | 确保 |
✅ 更现代、更安全的替代方案：事件委托 + data-* 属性
为避免内联 JS、提升可维护性与安全性（防止 xss），推荐使用 事件委托：
// 1. 渲染时不绑定 onclick，仅添加 data 属性 function render(img, name, price, numberFolder) { const row = ` @@##@@ ${name}
$${price}
立即学习“Java免费学习笔记（深入）
”； `; document.querySelector('#main').insertAdjacentHTML('beforeend', row); } // 2. 统一监听（支持后续动态添加的元素） document.addEventListener('click', function(e) { if (e.target.matches('.js-product-link')) { e.preventDefault(); const folderNum = e.target.dataset.folder; page(folderNum); // ✅ 直接调用，作用域清晰 } });此方式完全规避了字符串拼接函数名的风险，逻辑解耦、调试友好，且天然兼容模块化开发。
总结
- ✅ 内联 onclick 可行，但要求 page 是全局函数（非 const/let 声明，不在模块私有作用域）；
- ✅ 务必检查 numberFolder 是否有效传递，避免拼出 page(‘undefined’)；
- ✅ 强烈推荐改用事件委托 + data-* 属性，兼顾安全性、可读性与可维护性；
- ❌ 避免在模板字符串中拼接复杂逻辑或未转义用户数据（存在 XSS 风险）。
只要函数可见、参数可靠、绑定方式合理，字符串中的函数调用就能稳定运行。