I'm trying to solve a perceived problem with JavaScript and its use on our site(s). I don't think I'm the only one who perceives this problem. I'm not sure how to describe it in a title (or a search term, so, although I've done a bit of searching for information about this), so I thought I'd talk about it with the knowledgeable folks here.
Firstly, we're not a "JavaScript" site. Our Pages are loaded from the server and generated by PHP; they are not large one-page-apps.
However, like all of us, we need functionality within the browser, and the ability to run widgets provided by people like Google, FaceBook, etc. We all know that we can't ignore JavaScript.
My problem revolves around making sure the small amount of available manhours in our IT department can keep up with JS development on our site(s) without breaking currently implemented JS; as things continue and we continually add JS code to pages, my nervousness about this grows; there are so many things in the global scope. So many dependencies on scripts from other locations. So many unknowns in the end-user's browser.
I hatched a plan to create a global object that would envelop a large number of these various methods and properties, pulling in dependencies, etc...
And the real value to us: One_File_To_Rule_Them_All.js which is well-organized, well-known to staff, studied, documented, etc.
A bit of work has ensued to create this; I'm preparing to test it on our site.
But we have chicken-and-egg problems. So many dependencies on jQuery ... how can it be wrapped? Ditto the google object, Scriptaculous (legacy code) and so on.
The problem really seems to be that there are, as we all know, things that expect to be placed in the document <head> and things that are better left until later, specifically until the DOM is loaded.
We had hoped to simply include "ourfile.js" in the HEAD of every page on the site and remove all other script tags except calls to our objects methods:
<head><title>My Nice Site</title>
<script src = "/js/onefile.js"></script>
<script>
OneFile.GoogleAnalytics();
</script>
</head>
<body>
<div id = "google_translate_element">
<script>
OneFile.GoogleTranslateAddElement();
OneFile.GoogleTranslateElementInit();
</script>
</div>
</body>
</html>
But we're having the chicken/egg issues I've mentioned, and I'm now not sure this was even a good idea.
I hope you at least understand what I'm trying to do. Has anyone tried this sort of thing? Is it Not_A_Problem(tm), or just something you've not bothered to worry about? Is it something you've solved?
And, if so, how did you solve it?
Thanks in advance for what I'm quite sure will be an enlightening discussion! Have a great day.