第一部分：安全高效地获取本地JSON文件
在web开发中，通过javascript获取本地资源是常见的需求，尤其是json配置文件或数据文件。fetch api是现代web浏览器中用于进行网络请求的强大工具。然而，在使用fetch获取与脚本位于同一目录下的json文件时，开发者有时会遇到typeerror: failed to parse url的错误。
理解错误原因
当您使用fetch('inputForHw3.json')这样的路径时，浏览器或运行时环境可能无法正确解析这个URL。这是因为fetch API期望一个明确的URL，即使是相对路径也需要清晰的指示。在许多情况下，仅仅文件名不足以明确告诉fetch该文件位于当前工作目录。
解决方案：使用明确的相对路径
为了解决这个问题，您需要提供一个明确的相对路径，最常见且推荐的方式是使用./前缀来表示“当前目录”。
示例代码：
fetch('./inputForHw3.json') // 使用 './' 明确指示当前目录
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((json) => console.log('成功获取并解析JSON:', json))
.catch((error) => console.error('获取或解析JSON失败:', error));通过在文件名前加上./，您明确地告诉fetch去查找与当前执行脚本位于同一目录下的inputForHw3.json文件。
立即学习“Java免费学习笔记（深入）”；
注意事项：同源策略与本地文件
需要注意的是，在浏览器环境中，出于安全考虑，fetch API受到同源策略（Same-Origin Policy）的限制。这意味着，直接通过file://协议打开的HTML文件，其内部的fetch请求可能无法访问本地文件系统中的其他文件，即使它们在同一目录。
最佳实践：
为了在开发过程中顺利获取本地JSON文件，强烈建议使用本地HTTP服务器来运行您的Web应用。例如，您可以使用：
- Node.js的http-server包： npm install -g http-server，然后在项目根目录运行 http-server。
- Python的简单HTTP服务器： 在项目根目录运行 python -m http.server (Python 3) 或 python -m SimpleHTTPServer (Python 2)。
- VS Code的Live Server插件： 提供快速启动本地开发服务器的功能。
通过HTTP服务器访问您的页面（例如http://localhost:8080/index.html），fetch请求将不再受限于file://协议的限制，从而能够正确地获取本地JSON文件。
第二部分：理解与应用JavaScript ES模块 (import/export)
JavaScript ES模块（ECMAScript Modules）是现代JavaScript中组织和复用代码的标准方式。它通过export和import语句提供了一种结构化的方法来管理模块间的依赖关系。
ES模块的核心概念
- 封装性： 每个模块都有自己的作用域，变量和函数默认不会污染全局空间。
- 依赖管理： 通过import明确声明模块所需的依赖，通过export明确暴露模块提供的功能。
- 静态分析： 模块的导入和导出在代码执行前就可以确定，这有利于工具进行优化。
在浏览器环境中使用ES模块
在浏览器中，您可以通过在
示例：
假设您有以下文件结构：
. ├── index.html ├── main.js └── utils.js
utils.js (导出模块):
// utils.js
export const capitalize = (str) => {
if (!str) return '';
return str.charAt(0).toUpperCase() + str.slice(1);
};
export const PI = 3.14159;
export default function greet(name) {
return `Hello, ${capitalize(name)}!`;
}main.js (导入并使用模块):
// main.js
import greet, { capitalize, PI } from './utils.js'; // 注意文件扩展名
console.log(greet('world')); // 输出: Hello, World!
console.log(capitalize('javascript')); // 输出: Javascript
console.log(`圆周率: ${PI}`); // 输出: 圆周率: 3.14159index.html (加载主模块):
ES Module Demo
ES Module 示例
关键点：
- type="module" 告诉浏览器这是一个ES模块，而不是传统的脚本。
- 在import语句中，需要指定完整的文件路径，包括文件扩展名（如.js）。
- 模块内的import和export语句是静态的，必须位于模块的顶层。
- 一个HTML页面可以加载多个type="module"的脚本，它们各自作为独立的模块图的入口点，但通常会有一个主模块来协调其他模块。
在Node.js环境中使用ES模块
Node.js支持两种模块系统：CommonJS（默认）和ES模块。要在Node.js中使用ES模块，您需要进行一些配置。
方法一：使用package.json中的"type": "module"
这是推荐的方法。在您的项目根目录的package.json文件中添加或修改"type": "module"字段。
package.json:
{
"name": "my-module-app",
"version": "1.0.0",
"description": "A Node.js app using ES Modules",
"main": "app.js",
"type": "module", // 关键配置
"scripts": {
"start": "node app.js"
}
}当"type": "module"被设置后，Node.js会将所有.js文件（以及未指定type的包）默认视为ES模块。
示例：
假设您有以下文件结构：
.
├── package.json
├── app.js
└── services
└── dataService.jsservices/dataService.js:
// services/dataService.js
export function fetchData() {
console.log('Fetching data from a mock source...');
return { id: 1, name: 'Sample Item' };
}
export const API_URL = 'https://api.example.com';app.js (主入口文件):
// app.js
import { fetchData, API_URL } from './services/dataService.js'; // 同样需要文件扩展名
console.log('应用启动...');
const data = fetchData();
console.log('获取到的数据:', data);
console.log('API URL:', API_URL);运行：
在终端中，进入项目根目录并执行：
node app.js # 或者如果配置了 scripts npm start
方法二：使用.mjs文件扩展名
如果您不想将整个项目设置为ES模块（例如，项目中同时存在CommonJS和ES模块），您可以将ES模块文件命名为.mjs。Node.js会自动将.mjs文件视为ES模块，而.js文件则仍被视为CommonJS模块。
关于“运行多个JS文件”的误解
原始问题中提到“当type: module设置后，它只运行主.js文件，我有多个.js文件。我如何使用export/import在多个.js文件中，但又让它们单独运行？”
这里可能存在一个对模块化概念的误解。ES模块（export/import）的目的是为了构建一个相互依赖的、结构化的应用程序，而不是为了“单独运行”多个不相关的脚本。
- 如果您的多个.js文件是应用程序的不同组成部分： 那么它们应该通过import/export相互连接，并由一个主入口文件（如main.js或app.js）启动整个应用程序。这个主入口文件会导入并协调其他模块。
-
如果您的多个.js文件是完全独立的脚本，您希望分别执行它们：
- 在Node.js中： 您可以简单地通过 node script1.js 和 node script2.js 分别运行它们。即使设置了"type": "module"，您仍然可以这样运行。每个脚本都会作为一个独立的进程启动。如果脚本之间没有import关系，它们就是独立的。
- 在浏览器中： 您可以在HTML文件中包含多个标签。每个标签都会加载并执行一个独立的模块脚本。它们各自拥有自己的模块作用域，但可以通过全局对象（不推荐）或共享的库（通过导入）进行交互。
总结： type: module的主要作用是告诉运行时环境如何解析import/export语句。它并不阻止您运行多个独立的JavaScript文件。如果您希望多个文件通过模块系统协同工作，那么一个主入口文件导入其他模块是标准做法。如果您希望它们独立运行，只需分别执行它们即可，ES模块的特性并不会妨碍此操作。
总结
本文详细探讨了在JavaScript中获取本地JSON文件和使用ES模块的两个核心问题。在获取本地JSON时，务必使用明确的相对路径（如./filename.json），并在开发环境中使用本地HTTP服务器来规避同源策略的限制。对于ES模块，理解其在浏览器和Node.js环境中的配置和使用至关重要。通过type="module"属性或package.json中的"type": "module"配置，您可以有效地组织和管理代码。重要的是要明确模块化是为了构建相互协作的应用程序，而不是为了阻碍独立脚本的运行。正确地运用这些技术，将有助于您编写更健壮、更易维护的JavaScript代码。
