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文件之外。我只是想知道是否有任何理由把它放在自己的文件中，而不是把它放在页面上。

唯一的要求是脚本位于名为＆＃34; olapic_specific_widget＆＃34;

的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

您可以考虑使用<script>元素作为一种远程函数调用。几个data属性是调用的参数，并且使用src URL指定的脚本本身可以根据这些参数执行各种操作。这为在网页中使用的JavaScript库的设计增加了更多灵活性。

Answer 2

从src网址加载的脚本可能会检查该网页，并在<script>内查找<div class="olapic_specific_widget">标记。

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

简而言之，此<script>标记在一个角色中扮演两个不同的角色：

导入远程脚本的机制（因为它具有src属性）
由data-属性指定的窗口小部件设置的集合。

远程脚本（由角色＃1中的<script>导入）读取<script>属性中设置的数据（角色＃2）。

JS文件中没有任何功能吗？

2 个答案: