Should I use jQuery's getScript() or tons of <script> tags? [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 8 years ago.

Improve this question

I have developed a JavaScript system that's broken up into a bunch of files (somewhere around 20-25). Most of them are core files and need to be present in order for the system to function, but some act as plugins and can be omitted if the functionality isn't required.

My concern is that I have a bunch of HTML pages using this system with different combinations of plugins, all of them with this huge wall of <script> tags at the start of the page that needs to be carefully ordered so all dependencies of a file are loaded first. It feels like it's just a matter of time before I or someone else messes up the copy/pasting of these tags between the HTML files and stuff breaks.

So, I've been looking into jQuery's getScript() feature and thought about creating a setup file that takes a few parameters specifying the combination of plugins to use and then dynamically loads everything behind the scenes, reducing it all to a single <script> tag per file (not counting jQuery etc.)

Are there any important downsides to this? Presumably, loading would take longer due to jQuery initialization and so on, but is that likely to be significant? Additionally, is getScript potentially insecure for cross-file dependencies in the event that the dependent finishes downloading before its dependency? Are there perhaps browser compatibility issues to take into consideration too?

I really want to clean up this wall of tags, so if anyone with more experience can help me out here, it'd be greatly appreciated.

Answer 1

You should look at Require.js, or any other javascript module loader. This lib can help you load only that scripts, what you need on current page/part of your app. If you do not want to use any javascript loader <script> way is a faster a bit, but it's not so important.

Answer 2

I'm not jQuery expert, but I believe that getScript() is asynchronous while your script loads are not. This has pros and cons. Here's what getScript() actually does:

$.ajax({
  url: url,
  dataType: 'script',
  success: success
});

If you have a page that is highly dependent on this javascript then this would be a bad idea. If your page does not require the scripts to be loaded quickly, you should be fine using getScript(). Also, if you need scripts to load in a certain order, this simply won't work asynchronously (as the scripts could run in any order from getScript()).

It also is important to note that getScript() does not append script elements. Instead, it runs them in the global context. This shouldn't matter for most of your applications, but it does make a difference in some.

Also, I'd suggest checking out DurandalJS. It includes jQuery as well as Knockout (an awesome library that doesn't really apply to this post) and RequireJS, a library that helps with exactly what you're looking to do!

Answer 3

The grunt concatenation, optimization, and minification tasks are the ultimate desired behaviour. If you cannot use grunt, however, bear in mind that multiple $.getScript calls will complete in any order, which means if you had this originally:

<script a>
<script b depends on a>

then this $.getScript alternative may break.

$.getScript(a)
$.getScript(b)

A minimal fix to that is to create a function that does so sequentially.

getScripts = function (urls, callback) {
    var script = urls.shift();
    $.getScript(script, function () {
        if (urls.length + 1 <= 0) {
            if (typeof callback === 'function') {
                callback();
            }
        } else {
            getScripts(urls, callback);
        }
    });
};

But yes. Use RequireJS if you can.

Answer 4

Have you looked into Head.js? i had the same problem with my project and i came up with head.js . it is efficient and very fast. it can manage dependencies.

if you want to load file in orders and run a function after all files are loaded do this:

head.js("/js/porta.js","/htc/common.js","/userLoginCompObj.js", "/Definition.js", function(){
  // dom ready or any function
});