Best way to perform JavaScript code on specific pages/body class?

Question

I know there are libraries made for this, such as require.js, but I don't want anything complicated. I just want to run JS code that runs when there is a specific class on the body.

My try at this was to create functions for each page code, and a function to check if the body has the class name to execute code, then run it.

   var body = $('body');

   initPageOnClass('.home', initFrontPage());

   function initPageOnClass(className, func) {
    if (body.hasClass(className)) {
        return func;
    }
   }

   function initFrontPage(){ 
    // some code for the frontpage
   }

Which works, but I fear this may be bad practice. Is it? I know the more pages there is, there will be more functions:

   initPageOnClass('.home', initAboutPage());

   initPageOnClass('.subscriptions', initSubscriptionPage());

   initPageOnClass('.team', initTeamPage());

But I'm not sure if this would be a big no, or what. I want to do this properly.

What is the correct or best way to perform this task?

http://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js — SerCrAsH, Jun 17 '15 at 22:58
@SerCrAsH yes, I don't want this to complicated, at this moment. I'd like for the code to be in one single file, as the website is not huge or anything. I'm just taking this time to learn a few new things. — devs, Jun 17 '15 at 23:00
The code as written seems brown, don't you want to have a function reference instead of calling it? You could also store the fibrosis in a hash with the class names as keys. I don't see anything wrong with the idea for small sites. — Dave Newton, Jun 17 '15 at 23:08
I wouldn't do this using functions unless it was for a VERY small site. Coding more than one page in one html document tends to get messy quickly. You could, perhaps, try using an XMLHttpRequest if you want to load different content when an event like clicking an element occurs — zfrisch, Jun 17 '15 at 23:13

c-smile · Answer 1 · 2015-06-17T23:26:28.043

Id rather use some attribute in this case and map of functions. Your markup will have role attribute defined:

<body role=home>...</body>

And the script may look like:

var initMap = {
    'home':initAboutPage,
    'subscriptions': initSubscriptionPage,
    'team': initTeamPage };

// getting initializer function by content of 'role' attribute 
var initializer = initMap[ $('body').attr('role') ] || initAboutPage;

initializer();

And yet check my spapp - it's quite simple (60 LOC)

jfriend00 · Answer 2 · 2015-06-17T23:19:09.003

I think you're on the right path, but not quite executing properly and if you're going to have a bunch of different classes/functions that you check for, then I'd suggest a table driven approach, so you can maintain it by just adding/removing/modifying items in the table rather than writing new code:

var bodyClassList = {
    "home": initFrontPage,
    "subscriptions": initSubscriptionPage,
    "team": initTeamPage
};

function runBodyInit() {
    var body = $(document.body);
    $.each(bodyClassList, function(cls, fn) {
        if (body.hasClass(cls) {
            // if class found, execute corresponding function
            fn();
        }
    });
}

runBodyInit();

Or, if you're doing this on document.ready, then you might do this:

$(document).ready(function() {
    var bodyClassList = {
        "home": initFrontPage,
        "subscriptions": initSubscriptionPage,
        "team": initTeamPage
    };
    var body = $(document.body);
    $.each(bodyClassList, function(cls, fn) {
        if (body.hasClass(cls) {
            // if class found, execute corresponding function
            fn();
        }
    });
});

I see the functions do not have (), where in mine I had to. Any reason for that? Or would I have to use anonymous functions? — devs, Jun 17 '15 at 23:19
@devs - when you put `()` it executes the functions immediately. What you want here is to put function references in the table (not execute them now) so the function pointers are in the table and can then be called later. This was one of the flaws in your code. — jfriend00, Jun 17 '15 at 23:20

Best way to perform JavaScript code on specific pages/body class?

2 Answers2