How to include javascript file only once

Question

I want to give clients an HTML block they can include in their site, and this HTML will contain some table and image, plus a javascript that will make manipulations over the HTML block. so I give them the 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>

in checkout.js I have included JQuery if no Jquery exists in document and do manipulation over the element $('a.block1') ... the problem is when someone puts this block of HTML more then once over the same page, I want that the client will not call "checkout.js" more then once,

I've tried declaring global var inside "checkout.js" and check if it's exists, it works good to stop doing the same manipulation more then once but I want to stop the call to JS al together .

Answer 1

Javascript runs after it loads, you can't stop the JS running, if it is referenced multiple times. It won't be loaded multiple times, so the overhead of it running again is basically nil.

To stop the behavior of the javascript happening again, just put the check at the top level of the file, put the rest of the file in the conditional, and write to a global variable to make sure you don't run again.

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

    // the rest of your javascript
}

that will mean nothing in the script runs. You can still define whatever you like in that if statement, though if you define functions and variables in there, you may have to explicitly put them on the window object, because they'll otherwise be local (but then, it is bad practice to have anything implicitly defined global anyway, so it shouldn't make any difference if your code is well structured).

Answer 2

Just deploy your code as a module.

Ie.

(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);