共计 2528 个字符,预计需要花费 7 分钟才能阅读完成。
前段时间开发了一个小插件,性能很简略,引入之后脚本会主动执行一些逻辑,所以在公布时将它打包成了 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"));
// fehub
console.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"));
// fehub
console.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"));
// fehub
console.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);
// fehub
console.log(script.dataset.param2);
// 18
关注我
好了,这就是明天分享的全部内容啦 ~
关注我,每天学一个乏味的小常识 😉