当我使用 import 语句从 JS 文件导入方法时，会导致文件中的其余方法不被调用。两个文件都在同一目录中
这是我的 searchBar.js 文件，其中包含一个搜索栏组件和一个被调用来创建该组件的方法。但是，当我有 import 语句时，永远不会调用创建搜索栏方法。
从“./map.js”导入{addStops}；
function createSearchBar() {
console.log("method called")
const searchBar = document.createElement('input');
searchBar.setAttribute('id', 'lineSearchBar');
searchBar.setAttribute('type', 'text');
searchBar.setAttribute('name', 'search');
searchBar.setAttribute('placeholder', 'Search a Bus Line');
searchBar.style.fontFamily = 'Arial, sans-serif';
searchBar.style.fontSize = '16px';
searchBar.style.padding = '10px';
searchBar.style.border = '1px solid #ccc';
searchBar.style.borderRadius = '5px';
searchBar.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
searchBar.style.width = '25%';
searchBar.style.margin = '10px';
searchBar.style.boxSizing = 'border-box';
searchBar.style.position = 'relative'; // Set position to relative
document.body.appendChild(searchBar);
const suggestionsContainer = document.createElement('div');
suggestionsContainer.setAttribute('id', 'suggestionsContainer');
suggestionsContainer.style.position = 'absolute'; // Position suggestions container absolutely
suggestionsContainer.style.top = 'calc(100% + 5px)';
suggestionsContainer.style.left = '0';
suggestionsContainer.style.width = '100%';
suggestionsContainer.style.backgroundColor = '#fff';
suggestionsContainer.style.border = '1px solid #ccc';
suggestionsContainer.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
searchBar.parentNode.appendChild(suggestionsContainer); // Append suggestions container to searchBar's parent
searchBar.addEventListener('keyup', function(event) {
const searchTerm = event.target.value.trim().toLowerCase();
const suggestionsContainer = document.getElementById('suggestionsContainer');
suggestionsContainer.innerHTML = '';
const matchingRoutes = Object.keys(shortNameBusLines).filter(route => route.toLowerCase().includes(searchTerm));
matchingRoutes.forEach(route => {
const suggestion = document.createElement('div');
suggestion.textContent = route;
suggestion.style.cursor = 'pointer';
suggestion.style.padding = '5px';
suggestion.style.borderBottom = '1px solid #ccc';
suggestion.addEventListener('click', function() {
searchBar.value = route;
suggestionsContainer.innerHTML = '';
makeLineRequest(searchBar.value);
});
suggestionsContainer.appendChild(suggestion);
});
});
}
createSearchBar();
这是来自（map.js）的方法，它具有我正在导入的方法：
export default function addStops(stops) {
for (const key in stops) {
if (dict.hasOwnProperty(key)) {
const coords = dict[key];
const lat = parseFloat(coords[0]);
const lon = parseFloat(coords[1]);
const iconUrl = '8405421.png';
const iconSize = [10, 10];
const customIcon = L.icon({
iconUrl: iconUrl,
iconSize: iconSize
});
const marker = L.marker([lat, lon], { icon: customIcon }).addTo(map);
marker.bindPopup(key);
marker.on('click',function(){
displayInfo(key);
});
}
}
}
这是我的 html 文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="map.js"></script>
<script type="module" src="searchbar.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 900px; height: 580px; margin-top: 50px;"></div>
<button id="stopsButton">Show Stops</button>
</body>
</html>
我没有收到与这些方法相关的任何控制台错误。如果有人可以让我知道为什么导入导致该方法不被调用，那将是一个很大的帮助。
您的代码中有两个错误。
您加载文件
searchbar.jssearchBar.js当事情没有按预期工作时，您要做的第一件事就是检查控制台。你会看到这个错误：
Uncaught SyntaxError: The requested module './map.js' does not provide an export named 'addStops' (at searchBar.js:1:10)
这是因为当您在
import {addStops} from "./map.js";export default function addStops(stops)这是一个简单的修复。要么将该行更改为
export function addStops(stops)...或者您将导入更改为
import addStops from "./map.js";