获取本地 JSON 文件
在 javascript 中，可以使用 fetch 函数来从本地文件系统读取 json 文件。fetch 函数发起一个网络请求，并返回一个 promise，该 promise resolve 为该请求的 response。为了读取本地文件，需要提供正确的 url。
URL 解析错误
常见的错误是 TypeError: Failed to parse URL from inputForHw3.json。 这通常是由于 fetch 函数无法正确解析相对路径导致的。
解决方案
要解决此问题，请确保提供相对于当前 JavaScript 文件的正确路径。通常，在文件名之前添加 ./ 可以解决此问题，它明确地告诉 fetch 函数该文件位于同一目录中。
立即学习“Java免费学习笔记（深入）”；
fetch('./inputForHw3.json')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.error('Error fetching JSON:', error));在这个例子中，./inputForHw3.json 指示 fetch 函数在当前 JavaScript 文件所在的目录中查找 inputForHw3.json 文件。
注意事项
- 确保 JSON 文件存在于指定的路径中。
- 检查文件权限，确保 JavaScript 代码有权读取该文件。
使用 ES 模块 (export/import)
ES 模块是 JavaScript 中组织和共享代码的一种方式。通过使用 export 和 import 语句，可以将代码分割成独立的模块，并在不同的文件中重用它们。
配置 package.json
要启用 ES 模块，需要在 package.json 文件中添加 "type": "module"。
网站功能资讯模块资料模块会员模块产品展示模块产品订购模块购物车模块留言模块在线加盟模块多级后台管理系统网站环境本系统为 asp.net开发donet版本为1.1框架数据库为acdess2000授权方式为免费，本版本本地可直接运行（使用http://localhost或http://127.0.0.1访问）如需放到外网通过域名访问，则需通过qq联系我免费索取钥匙文件，将钥匙文件放到网站空间根目录即可
{
"name": "my-project",
"version": "1.0.0",
"type": "module"
}使用 export 和 import
-
导出模块: 使用 export 关键字将变量、函数或类从模块中导出。
// moduleA.js export const myVariable = 123; export function myFunction() { console.log('Hello from moduleA!'); } -
导入模块: 使用 import 关键字将模块导入到其他文件中。
// main.js import { myVariable, myFunction } from './moduleA.js'; console.log(myVariable); // 输出: 123 myFunction(); // 输出: Hello from moduleA!
多个 JavaScript 文件
启用 ES 模块后，每个 JavaScript 文件都被视为一个独立的模块。 这意味着可以在多个 .js 文件中使用 export 和 import 语法。
运行多个模块
如果你有多个 .js 文件，并且希望它们分别运行，你可能需要一个构建工具（例如 webpack, Parcel, Rollup）来将它们打包成一个或多个可在浏览器或 Node.js 环境中运行的文件。 或者，你可以创建一个入口文件，例如 index.html，并在其中使用 <script type="module"> 标签导入所有其他模块。</script>
<!DOCTYPE html> <html> <head> <title>My Project</title> </head> <body> <script type="module" src="./main.js"></script> <script type="module" src="./anotherModule.js"></script> </body> </html>
注意事项
- 确保文件扩展名为 .js 或 .mjs。
- 使用相对路径或绝对路径来指定模块的位置。
- 如果遇到模块加载错误，请检查路径是否正确，以及 package.json 文件中的 "type": "module" 是否已正确设置。
总结
通过正确使用 fetch 函数和 ES 模块，可以轻松地从本地加载 JSON 文件并在 JavaScript 项目中实现代码的模块化和复用。 确保提供正确的 URL 路径，并在 package.json 文件中配置 "type": "module" 以启用 ES 模块功能。
