Using multiple jQuery plugins on multiple pages?

Question

I have site which is using a few JavaScript/jQuery plugins, I then have a default.js file which uses the plugin functionality for each of the different pages.

E.g. some plugins I have include:

a custom scrollbar plugin
a slideshow plugin
a cookie plugin
etc.

Then in the default.js file, I'll do something as follows (pseudocode):

var scrolling = findScrollbarDiv;
scrolling.ScrollFunction({ options });

(and then the same for the slideshow + other plugins I have)

However, if there is a plage where findScrollbarDiv returns null, I get an error something like the following:

ScrollFunction is not a function

This is not because the elements are returning null, but because I haven't included the plugin file for this page. My reasoning behind this is that I don't want to include every file on every page (even if it's not needed) as this could cause unnecessary HTTP requests (especially on the homepage, which only needs one plugin)

This error in turn messes up the rest of the JavaScript.

What is the best way to overcome this? Should I just include every plugin file on every page regardless of whether it is needed or not? Or is there some JavaScript like the following that I can use:

var scrolling = findScrollbarDiv;
if(scrolling != null) {
    scrolling.ScrollFunction({ options });
}

(this feels a bit clunky to me, but if this is the best solution let me know)

Or is using one default js file to launch all plugins a bad idea?

You say you don't want to include it where it's not required. It's clearly required in this case so include it. If scrolling isn't meant to be assigned on this page then checking for null is fine. — webnoob
– webnoob, Commented Dec 18, 2012 at 11:07
If your only worry is the needed HTTP requests, you could easily combine all the plugins/jQuery itself to one single file (which you can GZIP and compress). This way, you'll get one single HTTP request for everything. — MarcoK
– MarcoK, Commented Dec 18, 2012 at 11:10
I've thought about the one file solution, but I'd rather keep them separate for maintainability. My other worry is that even with combining/compressing/gzipping the file would still be pretty big + any change in the file would invalidate the use cache (as opposed to just invalidating the cache for one file) — Sean
– Sean, Commented Dec 18, 2012 at 11:15
You're probably right though, that may be the best solution speed wise — Sean
– Sean, Commented Dec 18, 2012 at 11:16
have a look at http://requirejs.org/ it will do all the magic in the background and load all the requierd modules for you without adding them to the header — Nerdroid
– Nerdroid, Commented Dec 18, 2012 at 11:16

CharliePrynn · Accepted Answer · 2012-12-18 11:09:15Z

1

If you're using the same header file and you don't mind having the file included, you can always check if the element exists before attaching an event to it.

Heres an example:

if(jQuery('#someElement').length > 0){
    jQuery('#someElement').ScrollFunction({ options });
}

Either that, or have a JavaScript file for each function.

So you'd have one for the gallery and one for the cookies etc.. And include only the ones necessary for each page.

answered Dec 18, 2012 at 11:09

CharliePrynn

3,0805 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Over a year ago

I was hoping to avoid this, but on reflection it appears the best solution. Thanks

Lior · Accepted Answer · 2012-12-18 11:17:34Z

1

You can just do it as a conditional statement and avoid the clunky if:

scrolling && scrolling.ScrollFunction({ options });

This works great for any method you want to call and want to check if the parent object exists before you do. You can go further (if you need to) and check if the method itself exists before execution:

scrolling && scrolling.ScrollFunction && scrolling.ScrollFunction({ options });

if scrolling is a collection, just check it's length (if length == 0 the statement will fail):

scrolling.length && scrolling.ScrollFunction({ options });

answered Dec 18, 2012 at 11:17

Lior

1,61817 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using multiple jQuery plugins on multiple pages?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related