InfoQ
·
所有现代浏览器均可在JavaScript中导入JSON模块，CSS模块将随后支持
内容提要
谷歌开发者托马斯·斯坦纳宣布，所有现代浏览器已支持JSON模块脚本，开发者可在JavaScript中直接导入JSON模块。该功能基于导入属性提案，旨在加载非JS模块。虽然CSS模块导入尚未完全支持，但Chrome已有实现。JSON模块不支持命名导出，因其被视为“单一事物”。开发者可在MDN查看兼容性。
关键要点
-
谷歌开发者托马斯·斯坦纳宣布所有现代浏览器已支持JSON模块脚本。
-
开发者可以在JavaScript中直接导入JSON模块，基于导入属性提案。
-
导入属性用于告知运行时如何加载特定模块，主要用于加载非JS模块。
-
JSON模块不支持命名导出，因为它被视为“单一事物”。
-
开发者可以在MDN查看导入属性语法、CSS模块导入和JSON模块导入的浏览器兼容性。
-
在网页中，每个导入语句会导致一个HTTP请求，响应会被准备成JavaScript值。
-
CSS模块导入尚未完全支持，但Chrome已有实现，可能在下一个Interop中加入。
-
JSON模块的提案选择不允许命名导出，因为并非所有JSON文档都是对象。
延伸解读
JSON模块的导入优势
JSON模块的直接导入简化了开发流程，开发者无需再进行额外的JSON解析。这意味着在处理数据时，开发者可以更专注于业务逻辑，而不是数据格式的转换，提升了开发效率。
CSS模块的未来展望
虽然CSS模块的导入尚未在所有浏览器中完全支持，但Chrome已经实现了这一功能。开发者应关注未来的Interop更新，以便及时利用CSS模块的优势，尤其是在构建现代Web组件时。
命名导出的限制
JSON模块不支持命名导出，这一设计选择反映了JSON文档的特性。开发者在使用JSON模块时需注意这一点，以避免在代码中产生误解或错误，确保数据的正确处理。
延伸问答
现代浏览器如何支持JSON模块脚本？
所有现代浏览器现在都支持JSON模块脚本，开发者可以直接在JavaScript中导入JSON模块。
JSON模块导入的语法是什么？
JSON模块导入的语法示例为：import astronomyPictureOfTheDay from './apod.json' with { type: 'json' };
为什么JSON模块不支持命名导出？
JSON模块不支持命名导出，因为并非所有JSON文档都是对象，提案认为JSON文档应被视为“单一事物”。
CSS模块导入的支持情况如何？
CSS模块导入尚未完全支持，但Chrome已有实现，可能在下一个Interop中加入。
如何查看导入属性的浏览器兼容性？
开发者可以在MDN上查看导入属性语法、CSS模块导入和JSON模块导入的浏览器兼容性。
导入JSON模块时会发生什么？
每个导入语句会导致一个HTTP请求，响应会被准备成JavaScript值并提供给程序。
