上周，我在浏览一期新闻简报时发现了一个有趣的 DOM API document.currentScript。我原本以为这只是一个我永远不会用到的浏览器 API。后来我发现它其实功能强大，可以解决那些“这个脚本到底从哪儿来的？”的问题。
让我们深入研究一下。
它是干什么的？ 此 API 返回
这会记录脚本的源 URL 或设置自定义属性。最酷的是，它支持所有现代浏览器。
让我们看另一个例子：
// external key: 123urmom // script is deferred! 注意模块和异步 这里需要记住的一点是，对于类型为 的脚本标签， 不可用document.currentScript。在module本例中，它被设置为null。
document.currentScript当您尝试在异步代码中访问时，可以注意到类似的行为。
比你想象的更常见的挑战 让我们以 CMS 平台为例。CMS 平台通常会限制您可以调整的内容。编辑者可能会调整一些标记，但
有时 CMS 平台加载的脚本使用需要自定义设置（例如配置值）的外部库。
针对这种情况的常见解决方案是使用属性传递配置值data。
数据属性可以将特定值从服务器清晰地传递到客户端。唯一的小麻烦是查询元素以获取其属性。
既然我们在讨论
这感觉很干净。没有专有黑客，也没有污染全局范围。
其他应用 让我们探索一下这个 API 的其他一些应用。
正确设置你的图书馆 假设您正在构建一个需要异步加载的 JavaScript 库。您可以使用 来确认它是否已正确加载document.currentScript。这是一种向开发人员提供清晰反馈的直接方法。
// script.js if (!document.currentScript.async) { throw new Error("此脚本必须异步加载。"); } // 其余库代码...
您还可以强制
const isFirstBodyChild = document.body.firstElementChild === document.currentScript; if (!isFirstBodyChild) { throw new Error( "这必须在打开 标签后立即加载。" ); }
这是一种指导开发人员的清晰方法，与良好的文档完美结合。
调试脚本来源 假设你需要在一个复杂的应用中追踪某个脚本的来源，可以使用以下 API 轻松实现：
// 记录脚本元数据以供调试 console.log( Script: {document.currentScript.id});
条件脚本执行 想要脚本根据其属性做出不同的行为吗？使用document.currentScript进行检查并采取行动。
最后的总结 今天我们研究了另一个很酷的 JavaScript DOM API，它允许对网页上加载的脚本进行更多的控制。
在您的项目中尝试它并在下面的评论中分享您的想法。
谢谢！让我们再次相聚，一起学习另一篇精彩的 JavaScript 指南。作者www.lglngy.com
