javascript - 没有函数的 JS 文件有什么意义吗？

Question

我面前有 Olapic 的 API，它看起来像这样:

<script src="https://olapic_source.net"
        data-olapic="olapic_specific_widget"
        data-instance="213598612346580671235"
        data-apikey="081274081760283650812734612"
        data-tags="product_ID"
        async="async">
</script>

我完全赞成尽可能将 JS 排除在 HTML 文件之外。我只是想知道是否有任何理由将其放入自己的文件中，而不是将其放在页面上。

唯一的要求是脚本位于名为“olapic_specific_widget”的 div 类内部

本质上是这样

<div class="olapic_specific_widget">
    <script src="path/to/external/file.js" type="text/javascript">
    </script>
</div>

哪个比

更整洁

<div class="olapic_specific_widget">
    <script src="https://olapic_source.net"
        data-olapic="olapic_specific_widget"
        data-instance="213598612346580671235"
        data-apikey="081274081760283650812734612"
        data-tags="product_ID"
        async="async">
    </script>
</div>

再说一遍，这有什么意义吗，还是我应该把所有这些东西留在那里？如果有道理的话，我知道你应该从外部文件中取出脚本标签。那么，我的外部文件看起来像这样吗？

src="https://olapic_source.net"
data-olapic="olapic_specific_widget"
data-instance="213598612346580671235"
data-apikey="081274081760283650812734612"
data-tags="product_ID"
async="async"

感谢您的宝贵时间!

Answer 1

从 src 加载的脚本URL 可能会检查页面并查找 <script> <div class="olapic_specific_widget"> 内的标签.

您无法移动 data- 中的任何一个<script> 中的属性标签，因为脚本是从 src 加载的预计 <script>包含这些 data- 的 DOM 元素属性。这些设置是 HTML 属性，而不是 JavaScript。

简而言之，这个<script>标签同时扮演两个不同的 Angular 色:

1. 导入远程脚本的机制(因为它有 src 属性)

2. 小部件设置的集合，由 data- 指定属性。

远程脚本(由 Angular 色 #1 中的 <script> 导入)读取 <script> 中设置的数据。的属性( Angular 色#2)。