Any way to do conditional including in javascript?

Question

We're developing a portal with lots of portlets (independent application within the page/portal). Each portlets have to be independent : They have to be able to run on stand-alone page from within the portal.

We've been ask not to add tons of javascript files to the portal base-page (the one that calls everything). It also comes with dojo (but no one uses it).

Are there any way to load javascript files (including jQuery aka, it can't be the solution) if they are not loaded yet? The answer can use dojo

Right now we though of

if (!window.jQuery) {            
        document.write('<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"><' + '/script>');
}
if (!window.jQuery.ui) {
        document.write('<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></scr' + 'ipt>');
}
[...] other includes

The problem with this is that jquery isn't loaded when the jQuery.ui test is done, so an error is thrown and the 2nd file is not loaded.

Edit

Re-writing the issue : The problem is that we could have 4 portlets, each requiring jQuery + jQuery-ui + differents others plugins/files. So they need to all include code to load all those files independantly. But we don't want to load jQuery and jQuery-ui 4 times either.

score 3 · Answer 1 · answered Aug 26 '11 at 19:44

The solution to this seems to be to use separate script blocks. Apparently the document.write will not effect the loading of the scripts, until the script block closes. That is, try this:

<script>
    if (!window.jQuery) {
        document.write('<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"><' + '/script>');
    }
</script>
<script>
    if (!window.jQuery.ui) {
        document.write('<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></scr' + 'ipt>');
    } 
</script>

Works for me. Tested in IE and Firefox.

Joseph Marikle · Answer 2 · 2011-08-01T19:35:52.457

0

I've always injected js files via js DOM manipulation

if (typeof jQuery == 'undefined') {
    var DOMHead = document.getElementsByTagName("head")[0];
    var DOMScript = document.createElement("script");
    DOMScript.type = "text/javascript";
    DOMScript.src = "http://code.jquery.com/jquery.min.js";
    DOMHead.appendChild(DOMScript);
}

but it's a bit picky and may not work in all situations

edited Aug 01 '11 at 19:35

answered Aug 01 '11 at 19:19

Joseph Marikle

76,418
17
112
129

This doesn't fix the issue with the conditionnal including (do not include what is already in). Although it's a better way to add the script, instead of document.write... – Kraz Aug 01 '11 at 19:29

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

Misread the question slightly (can and can't look very similar).

If you're willing to use another library to handle it, there are some good answers here.

loading js files and other dependent js files asynchronously

edited May 23 '17 at 11:55

Community

1
1

answered Aug 01 '11 at 19:21

James Montagne

77,516
14
110
130

This part "_Are there any way to load javascript files (including jQuery aka, it can't be the solution)_" is important too! – Kraz Aug 01 '11 at 19:27

Stephen Chung · Answer 4 · 2011-08-02T04:05:14.087

Just write your own modules (in Dojo format, which since version 1.6 has now switched to the standard AMD async-load format) and dojo.require (or require) them whenver a portlet is loaded.

The good thing about this is that a module will always only load once (even when a portlet type is loaded multiple times), and only at the first instance it is needed -- dojo.require (or require) always first checks if a module is already loaded and will do nothing if it is. In additional, Dojo makes sure that all dependencies are also automatically loaded and executed before the module. You can have a very complex dependency tree and let Dojo do everything for you without you lifting a finger.

This is very standard Dojo infrastructure. Then entire Dojo toolkit is built on top of it, and you can use it to build your own modules as well. In fact, Dojo encourages you to break your app down into manageable chunks (my opinion is the smaller the better) and dynamically load them when necessary. Also, leverage class hierachies and mixins support. There are a lot of Dojo intrastructure provided to enable you to do just that.

You should also organize your classes/modules by namespaces for maximal manageability. In my opinion, this type of huge enterprise-level web apps is where Dojo truely shines with respect to other libraries like jQuery. You don't usually need such infrastructure for a few quick-and-dirty web pages with some animations, but you really appreciate it when you're building complicated and huge apps.

For example, pre-1.6 style:

portletA.js:

dojo.provide("myNameSpace.portletA.class1");
dojo.declare("myNameSpace.portletA.class1", myNameSpace.portletBase.baseClass, function() { ...
});

main.js:

dojo.require("myNameSpace.portletA.class1");
var myClass1 = new myNameSpace.portletA.class1(/* Arguments */);

Post-1.6 style:

portletA.js:

define("myNameSpace/portletA/class1", "myNameSpace/portletBase/baseClass", function(baseClass) { ...
    return dojo.declare(baseClass, function() {
    });
});

main.js:

var class1 = require("myNameSpace/portletA/class1");
var myClass1 = new class1(/* Arguments */);

i8abug · Answer 5 · 2011-08-16T17:11:24.260

Pyramid is a dependency library that can handle this situation well. Basically, you can define you dependencies(in this case, javascript libraries) in a dependencyLoader.js file and then use Pyramid to load the appropriate dependencies. Note that it only loads the dependencies once (so you don't have to worry about duplicates). You can maintain your dependencies in a single file and then load them dynamically as required. Here is some example code.

File: dependencyLoader.js

//Set up file dependencies
Pyramid.newDependency({
    name: 'standard',
    files: [
    'standardResources/jquery.1.6.1.min.js'
     //other standard libraries
    ]
});

Pyramid.newDependency({
name:'core',
files: [
    'styles.css',
    'customStyles.css',
    'applyStyles.js',
    'core.js'
    ],
   dependencies: ['standard']
});


Pyramid.newDependency({
name:'portal1',
files: [
    'portal1.js',
    'portal1.css'
    ],
    dependencies: ['core']
});

Pyramid.newDependency({ name:'portal2', files: [ 'portal2.js', 'portal2.css' ], dependencies: ['core'] }); Html Files

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
</head>

...
    <script type="text/javascript">
        Pyramid.load('portal1');
    </script>
...
    <script type="text/javascript">
        Pyramid.load('portal2');
    </script>

So shared files only get loaded once. And you can choose how you load your dependencies. You can also just define a further dependency group such as

Pyramid.newDependency({
name:'loadAll',
    dependencies: ['portal1','portal2']
});

And in your html, just load the dependencies all at once.

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
    <script type="text/javascript">
        Pyramid.load('loadAll');
    </script>
</head>

Some other features that might also help is that it can handle other file types (like css) and also can combine your separate development files into a single file when ready for a release. Check out the details here - Pyramid Docs

note: I am biased since I worked on Pyramid.

Any way to do conditional including in javascript?

Edit

5 Answers5