Stub out the global namespace to enable for lazy script loading

Question

I am using jQuery UI and a few other JS libs which in total make for quite a chunk of JS (even minified and combined). My idea is to not include a script tag in the page but to stub out all functions that I defined as well as the $ sign for jQuery so that my inline JS on the page can still call them but will hit the stub. The stub will then load the .js file and actually call the function. The question now is:

How can I redirect all function calls on the window object/global object to a custom function of mine?

I am not used to dynamic languages so a little advice on how to do this in JS will be appreciated.

Answer 1

As stated previously ... this is likely an exercise in futility. Unless you are a researcher and are being paid to do this (and only this), I'd spend my time just working on my actual product and/or refactoring so that the page requires fewer disparate JS libs (for example. use jquery only, rather than jquery + yui)

edit, though, I suppose in the interest of actually answering the question. You can easily replace any function by simply setting it in javascript. For example ...

$ = function(searchString) {
    // if this method is called
    // and jquery hasn't been loaded yet
    // load jquery (which will overwrite all of your local jquery functions with its own
};

The method to lazy load .js files is well documented throughout the web, for example here:
http://ajaxpatterns.org/On-Demand_Javascript

Answer 2

Well the root of your problem is the usage of library dependent in-line JS. We had an old legacy site that had a bunch of in-line JS in the Smarty templates. I ended up modding Smarty so that I could capture the JS calls and then output them all in the footer. Looked something like this

<!-- mySubContent.inc.html -->
<div id="theTabs">
  <ul><li><!--
    ...
  --></li></ul>
  <div id="tab1"><!--
    ...
  --></div>
</div>
{capture_js}
  $("#theTabs").tabs();
{/capture_js}

<!-- footer.inc.html -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
    {render_captured_js}
  </script>
</body>
</html>

Anyway, maybe that'll give you some idea about how to tackle your in-line JS problem if you can't refactor the codebase right now. Oh, and read this - http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html .