外部JS模块的loadData函数在select的onchange调用时报语法错误

问题场景 #

通过<script type="module" src="/js/geojson.js"></script>引入JS模块，模块中导出了loadData函数。在select元素的内联onchange事件中调用该函数时，浏览器抛出错误：

Uncaught SyntaxError: missing ) after argument list

相关代码如下：
select元素代码：

<select id="name1" th:field="*{mapProjection2.name}" th:name="name"
        class="form-control" onchange="loadData(geojsonGrid01, 
 geojsonProj01, geojsonCap01, ${'map02'},${'#grid2'},${'#coast2'},${'#cap2'});">

JS模块代码：

import * as MapContainer from './leaflet/leaflet.js';

export function loadData(geojsonGrid, geojsonProj, geojsonCap, map, grid, coast, cap) {
    // 功能代码省略
}

核心原因 #

1. 模块作用域隔离：ES模块中的导出函数默认不会暴露到全局作用域，内联onchange运行在全局上下文，无法直接访问loadData。
2. Thymeleaf参数语法错误：${'map02'}这类表达式生成的内容未被正确包裹为字符串，加上代码换行导致参数列表解析失败，触发语法错误。

解决方案 #

方案一：将函数挂载到全局（快速临时解决）

修改JS模块，把loadData挂载到window对象，使其在全局可访问：

import * as MapContainer from './leaflet/leaflet.js';

export function loadData(geojsonGrid, geojsonProj, geojsonCap, map, grid, coast, cap) {
    // 功能代码省略
}

// 挂载到全局
window.loadData = loadData;

方案二：使用事件监听器替代内联onchange（推荐）

这是符合现代JS开发规范的做法，避免全局作用域污染和语法问题。

1. 移除select的内联onchange属性：

<select id="name1" th:field="*{mapProjection2.name}" th:name="name"
        class="form-control">

2. 在JS模块中添加事件监听器，通过data属性传递Thymeleaf变量：
   先给select添加data属性存储参数：

<select id="name1" th:field="*{mapProjection2.name}" th:name="name"
        class="form-control"
        data-map="map02"
        data-grid="#grid2"
        data-coast="#coast2"
        data-cap="#cap2">

然后在模块中绑定事件：

import * as MapContainer from './leaflet/leaflet.js';

export function loadData(geojsonGrid, geojsonProj, geojsonCap, map, grid, coast, cap) {
    // 功能代码省略
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const selectEl = document.getElementById('name1');
    selectEl.addEventListener('change', () => {
        // 从data属性读取参数
        const map = selectEl.dataset.map;
        const grid = selectEl.dataset.grid;
        const coast = selectEl.dataset.coast;
        const cap = selectEl.dataset.cap;
        // 调用函数
        loadData(geojsonGrid01, geojsonProj01, geojsonCap01, map, grid, coast, cap);
    });
});

方案三：修复内联onchange的语法问题（若坚持使用内联）

先按方案一将函数挂载到全局，再修正Thymeleaf表达式和参数格式：

<select id="name1" th:field="*{mapProjection2.name}" th:name="name"
        class="form-control" onchange="loadData(geojsonGrid01, geojsonProj01, geojsonCap01, '[[${'map02'}]]', '[[${'#grid2'}]]', '[[${'#coast2'}]]', '[[${'#cap2'}]]');">

使用Thymeleaf的[[...]]表达式生成带引号的字符串，同时去掉多余换行，确保参数列表语法正确。

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