如何只包含一次javascript文件

Question

我想给客户一个HTML块，他们可以将其包括在他们的站点中，并且此HTML将包含一些表和图像，以及一个将对HTML块进行操作的JavaScript。 所以我给他们HTML：

<a data-theme="1" data-srv="http://localhost:50987/" class="block1" href="http://myserver/payment/Details">outer information</a><script type="text/javascript" src="http://myserver/Scripts/checkout.js"></script>

在checkout.js中，如果文档中不存在Jquery，并且包含对$（'a.block1'）元素的操作，我已经包含了JQuery ...问题是，当有人在同一页上再放置此HTML块一次时，我希望客户端不会再调用一次“ checkout.js”，

我试过在“ checkout.js”中声明全局变量，并检查是否存在，最好停止一次以上的相同操作，但是我想一起停止对JS al的调用。

Answer 1

Javascript加载后运行，如果多次引用，则无法停止JS的运行。 它不会多次加载，因此再次运行的开销基本上为零。

要停止再次发生javascript行为，只需将检查放在文件的顶层，将文件的其余部分放在有条件的文件中，然后写入全局变量以确保您不会再次运行。

if (window._your_unique_id === undefined) {
    window._your_unique_id = true;

    // the rest of your javascript
}

这将意味着脚本不会运行。 您仍然可以在if语句中定义所需的内容，尽管如果在其中定义函数和变量，则可能必须将它们明确地放在window对象上，因为否则它们将是局部的（但是，这样做是不明智的做法）无论如何都具有全局隐式定义的内容，因此，如果您的代码结构合理，则应该没有任何区别）。

Answer 2

只需将代码部署为模块即可。

就是

(function(window){
  if(window.CheckoutModule) return;
  // now you're certain there's no global module loaded
  var CheckoutModule = window.CheckoutModule = {};
  // you can, ie, add a jQuery check here.
  if('undefined' != typeof jQuery) {
    // do your jQuery thing here.
  }
  return ;
})(window, jQuery);