Within my ASP.NET Masterpage, I am utilizing YepNope to asynchronously load jQuery (from the Google CDN, with a local fallback) along with other scripts used across all pages on the site. I have included a ContentPlaceHolder in the MasterPage before the closing body tag for individual page scripts. Since jQuery needs to be accessible on every page, it should not be loaded individually on pages where specific scripts require it.
The issue I face is that I cannot utilize the callback or complete functions in the YepNope script that loads jQuery because these functions are meant for individual page scripts added only when needed. I need a way to delay the execution of individual page scripts until YepNope has finished loading any dependencies such as jQuery.
I can see two possible solutions-
1- Convert the page script into an external file and load it using either of the syntaxes below:
yepnope('/url/to/your/script.js');
or
yepnope({ load: '/url/to/your/script.js' });
However, this option adds an extra HTTP request for just a few lines of javascript that will only be used on one page.
2- Load jQuery again in another YepNope test object block and wrap up the page scripts within the complete function. This method ensures that the scripts are executed once jQuery is fully loaded by YepNope.
In case you notice a file being requested twice but actually loading once, rest assured that YepNope 1.5+ prevents re-execution of already requested scripts upon a second request. This feature comes in handy when dealing with simpler server-side templating systems where having all dependencies available is more important than anything else.
This approach allows me to remove the dependency on jQuery from the MasterPage, but there's a risk of loading multiple versions if the version in the MasterPage changes without updating the page script accordingly. Considering maintenance issues, relying on different jQuery versions does not seem like a good idea, especially if another developer takes over the project.
Although not particularly elegant, this workaround may still be a viable solution. However, I am inclined towards the first option. I wonder if there's a better way to defer page scripts until asynchronous loading completes, aside from incorporating it into the YepNope test object itself.
How do fellow developers tackle this challenge?