What is the danger in including the same JavaScript library twice?

问题

One of the webapps I'm working in is made up of many partial HTML files. If the partial requires a JavaScript library such as YUI, the YUI library is included in the partial.

When the partials are combined at runtime, the resulting HTML often includes the YUI library several times.

<html>
... 
<script type="text/javascript" src="/js/yahoo/yahoo-min.js"></script>
... 
<script type="text/javascript" src="/js/yahoo/yahoo-min.js"></script>
... 
<script type="text/javascript" src="/js/yahoo/yahoo-min.js"></script>
...
</html>

I've seen strange behavior from including jQuery several times, especially when using AJAX. Why, specifically, is including the same JavaScript library more than once a bad idea? Why does it only sometimes cause problems?

回答1:

Depending on the library, including it more than once could have undesired effects.

Think of it like this, if you have a script that binds a click event to a button, and you include that script twice, those actions will be ran twice when the button is clicked.

You could write a simple function that you call to load a script and have it keep track of files that have already been loaded. Or, I'm sure you could probably use a pre-existing JS loader such as LabJS and modify it.

回答2:

You should take an approach I learned examining the source of HTML5 Boilerplate:

<script>
    !window.YAHOO && document.write(
        unescape('%3Cscript src="/js/yahoo/yahoo-min.js"%3E%3C/script%3E')
    );
</script>

I don't use YUI, so replace !window.YAHOO with whatever global YUI uses.

This approach will only load the library if it does not yet exist in the global scope.

回答3:

The browser will cache the file, downloading it only once. It will be executed more than once however. So the performance impact is negligible, but the correctness impact might not be.

回答4:

It gets executed each time. Dependending on the file, this may be undesirable. For instance, if the file contains alert("hello"), it will display the alert box for every time the file is referenced, and you may have intended for it to be only displayed once.

Writing safe libraries:

Here's how you work around it if you only want a one-time execution. Let's say you're writing a library foobar.js, which exports one global, foobar:

function foobar() {
 // ...
}

You could make sure that any repeat executions of the file become no-ops, using code like this:

window.foobar = window.foobar || function foobar() {
  // ...
};

Using unsafe libraries:

If you can't modify the source code of the library, and you've determined it's unsafe, here's one way to work around it to load the library only once. Create a global and use it each time to check if the script has already been loaded. You'll have to set the global to true yourself.

<script>(function() {
  if (! window.foobar) {
    var script = document.createElement('script');
    script.async = true; // remove this if you don't want the script to be async
    script.src = 'foobar.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    window.foobar = true;
 }
}();</script>

来源：https://stackoverflow.com/questions/4891278/what-is-the-danger-in-including-the-same-javascript-library-twice

标签

javascript

javascript-framework