Question

I know that, once a script has loaded, you can remove the <script> element from the page and the variables/functions will still be there.

Let’s say I have two versions of a function, dealing with UI and which the user can choose between based on preference.

The whole page is heavily AJAX-based. Ideally, it should never reload unless explicitly done by the user, so calling location.reload() is simply out of the question.

The idea I have is this:

<script type="text/javascript" src="ui1.js" id="uiscript"></script>

Then simply change:

document.getElementById('uiscript').src = ...;

Both files are of the form:

var ui = function(...) {
    ...
};

So my question is, would toggling between two sources change the function reliably? Even if the script is cached? Would I be better adding a cachebusting query string? Or should I abandon this idea altogether and go for something else, such as rewriting the function in a callback rather than changing a script’s source?

Any other suggestions on something like this?

Answer 1

Why don’t you use a reference to the function? Some pseudo code here:

function func1() { /* Do stuff one way */}
function func2() { /* Do stuff the other way */}
var ui = func1;

ui(some_param);

function myCallback() {
  // overwrite ui
  ui = func2;
  ui(some_param); // now calls func2
}

This is just a simple example. In the real world you’d use Objects to group your functions together.

Maybe you can use a dependency injection framework for JavaScript like inject