ES模块模式下实时搜索/筛选功能失效问题排查

问题原因 #

当你把JS代码改成ES模块（添加type="module"）后，模块内部的变量和函数默认不会暴露到全局作用域。而HTML里的内联事件处理器（比如oninput="updateResult(this.value)"）只能访问全局作用域中的函数，所以会抛出Uncaught ReferenceError: updateResult is not defined的错误。之前去掉type="module"能正常运行，是因为普通脚本会把函数挂载到全局window对象上，内联事件能直接找到。

解决方案 #

方案1：手动将函数挂载到全局window对象 #

在功能模块的updateResult函数定义后，手动把它添加到window对象，让全局作用域能访问到：

import { playersArray as _playersArray } from './array.js';
let playersArray = _playersArray;

let resultList = document.querySelector(".result");

function updateResult(query) {
  if (query.length == 0) {
    resultList.innerHTML = "";
    return;
  }
  
  query = query.toLowerCase();

  let player = playersArray.filter(el => 
    el.name.toLowerCase().indexOf(query) != -1
    || el.number.toString().indexOf(query) != -1
    || el.age.toString().indexOf(query) != -1
    || el.position.toLowerCase().indexOf(query) != -1
    || el.image.toLowerCase().indexOf(query) != -1
  );
  resultList.innerHTML = "";
  player.forEach((data) => {
    resultList.innerHTML += `
      <div class="card list-group-item" style="width: 18rem;">
      <img class="card-img-top" src="images/${ data.image }" alt="Illustrasjon. Bildet av spiller.">
      <h4>${ data.name }</h4>
      <h5>Number: ${ data.number }</h5>
      <h5>Age: ${ data.age }</h5>
      <p>Position: ${ data.position }</p>
  </div>`;
  })
}

// 手动挂载到全局window对象
window.updateResult = updateResult;

updateResult("")

方案2：使用事件监听替代内联事件（推荐） #

这种方式更符合模块化开发的最佳实践，避免依赖全局作用域：

1. 修改HTML，移除input标签的oninput属性：

<input type="search" class="form-control" placeholder="Search..." />

2. 在功能模块中添加事件监听：

import { playersArray as _playersArray } from './array.js';
let playersArray = _playersArray;

let resultList = document.querySelector(".result");
// 获取input元素
const searchInput = document.querySelector('input[type="search"]');

function updateResult(query) {
  if (query.length == 0) {
    resultList.innerHTML = "";
    return;
  }
  
  query = query.toLowerCase();

  let player = playersArray.filter(el => 
    el.name.toLowerCase().indexOf(query) != -1
    || el.number.toString().indexOf(query) != -1
    || el.age.toString().indexOf(query) != -1
    || el.position.toLowerCase().indexOf(query) != -1
    || el.image.toLowerCase().indexOf(query) != -1
  );
  resultList.innerHTML = "";
  player.forEach((data) => {
    resultList.innerHTML += `
      <div class="card list-group-item" style="width: 18rem;">
      <img class="card-img-top" src="images/${ data.image }" alt="Illustrasjon. Bildet av spiller.">
      <h4>${ data.name }</h4>
      <h5>Number: ${ data.number }</h5>
      <h5>Age: ${ data.age }</h5>
      <p>Position: ${ data.position }</p>
  </div>`;
  })
}

// 添加input事件监听
searchInput.addEventListener('input', function() {
  updateResult(this.value);
});

updateResult("")

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