关于javascript:如何获取-script-标签上自定义参数的值

前段时间开发了一个小插件，性能很简略，引入之后脚本会主动执行一些逻辑，所以在公布时将它打包成了 IIFE 模式的 js 包。

在我的项目中接入时，间接通过 script 标签引入即可，就像这样：

<script src="https://xxxcdn.com/fehub-plugin.js"></script>

然而在插件的后续应用中，发现有几个参数，如果可能反对自定义的话，应用起来会更加不便。

那么咱们就降级一下，让他反对自定义~

为了防止改变过大，所以第一工夫想到的就是通过 script 标签的属性来传递参数，就像这样：

<script src="xxx" param1="fehub" param2="18"></script>

如何获取到参数的值？

好了，参数是设置好了，然而怎样才能取到这个参数呢？

个别状况下，如果咱们想要获取某个元素上的属性，能够先通过 querySelector 选择器找到对应的元素，而后再通过 getAttribute 办法获取，就像这样：

<!-- HTML --><div id="demo" name="fehub">Hello  ~</div><!-- JavaScript -->const demoEle = document.querySelector("#demo");console.log(demoEle.getAttribute("name"));// fehub

所以，能够让用户在接入此脚本的时候，设置一个约定好的固定 id，而后在脚本内通过 querySelector 获取到此 script 标签，就像这样：

<!-- HTML --><script src="https://xxxcdn.com/fehub-plugin.js" id="fehub-plugin" param1="fehub" param2="18"></script><!-- JavaScript -->const script = document.querySelector("#fehub-plugin");console.log(script);// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>console.log(script.getAttribute("param1"));// fehubconsole.log(script.getAttribute("param2"));// 18

然而，这种办法不太可控，如果插件的 id 没有设置，那么就无奈达到想要的成果。

原生 API

不过好消息是document 上有一个 currentScript 对象，示意的就是以后正在运行的脚本所属的 script 元素，用起来非常简单，就像这样：

<!-- HTML --><script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script><!-- JavaScript -->const script = document.currentScript;console.log(script);// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>console.log(script.getAttribute("param1"));// fehubconsole.log(script.getAttribute("param2"));// 18

当初就好多了，间接通过原生 API 即可，而且兼容性也很好：

然而须要留神的是：如果你是以 module 的模式加载的 JavaScript（也就是设置了 type="module" 这个属性），那么 currentScript 这个属性是有效的。

这种状况能够通过 import.meta 的 url 属性配合 querySelector 来获取以后 script 标签元素，就像这样：

<!-- HTML --><script type="module" src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script><!-- JavaScript -->const script = document.querySelector(`script[src="${import.meta.url}"]`);console.log(script);// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>console.log(script.getAttribute("param1"));// fehubconsole.log(script.getAttribute("param2"));// 18

另外，如果想要通过增加自定义属性来传递参数，那么倡议应用 data-* 语法设置参数，而后通过 dataset 取值。

能够防止和已有属性呈现抵触，也更合乎官网规范，就像这样：

<!-- HTML --><script src="https://xxxcdn.com/fehub-plugin.js" data-param1="fehub" data-param2="18"></script><!-- JavaScript -->const script = document.currentScript;console.log(script);// <script src="https://xxxcdn.com/fehub-plugin.js" data-param1="fehub" data-param2="18"></script>console.log(script.dataset.param1);// fehubconsole.log(script.dataset.param2);// 18

关注我

好了，这就是明天分享的全部内容啦 ~

关注我，每天学一个乏味的小常识