防止使用JS加载JS

Question

现在我已经在Shopify上建立了一个商店，我正在使用一个安装在我们商店上的应用程序。此应用程序调用脚本，如下所示：

if(!add_to_order_tag)
$('.product_rp_div.p{{ product.id }}').append('<script async class="add_to_order" src="https://ro.boldapps.net/recurring_settings/add_to_order?&shop_url={{ shop.permanent_domain }}&group_id='+group_id+'&customer_id={{ customer.id }}&product_id='+prodId+'&variant_id='+myVariant+'"></'+''+'script>');

这个脚本包含一个对bootstrap.modal.min.js的调用，这个函数已经通过普通的bootstrap.min.js加载到我的商店中，它给我带来了麻烦，因为我所有的模态都打开和关闭得非常快。由于此脚本对应用程序的工作具有重要功能，但它只是重复加载我已有的脚本，因此我想知道是否有方法可以阻止使用JS加载第二个boostrap.modal.min.js？或者是否有好的解决办法来防止模式关闭。

下面是我调用的bootstrap版本：

//cdn.shopify.com/s/files/1/0154/0015/t/12/assets/bootstrap.min.css?7437598206705920800

下面是他们正在调用的bootstrap模型：

https://ro.boldapps.net/app_assets/js/bootstrap-modal.min.js

提前感谢你的帮助:D

Answer 1

避免这种令人厌烦的行为的一种方法是，在加载库时简单地重新分配相关模块，然后再将其放回原处。它不是很漂亮，但它通常是有效的：

var bootstrap-temp = Bootstrap.Modal;
loadIrritatingLibrary();
Bootstrap.Modal = bootstrap-temp;

这至少会让它在调用结束时恢复到正确的状态。

不幸的是，Bootstrap将自己绑定到jQuery模块中，因此很难分离出来--实际的jQuery模态函数存储在jQuery.fn.modal中，但考虑到大部分模块是隐藏的，您可能需要在加载其他脚本后加载Bootstrap。

这两种方法都是有效的，因为JavaScript看到的代码版本是加载的最后一个版本，所以如果您重复分配相同的变量，它将记住最后一个变量，并且函数可以像对待对象一样被视为变量。

在可能的情况下，更好的解决方案是使用像RequireJS这样的模块加载器，它应该确保所有内容只加载一次，但在这种情况下并不总是可用的。

这也取决于重新加载的Modal版本的问题，而不是脚本中影响模态绘制方式的东西，根据您的描述，这也可能是问题所在。应该可以检查应用程序加载的版本，以确认是否存在与此相关的问题。