A question about referencing functions in Javascript

Question

The problem: I have a jQuery heavy page that has a built in admin interface. The admin functions only trigger when an admin variable is set. These functions require a second library to work properly and the second file is only included if the user is an admin when the page is first created. The functions will never trigger for normal users and normal users do not get the include for the second library.

Is it bad to reference a function does not exist in the files currently included even if that function can never be called? (does that make sense :)

Pseudocode:

header: (notice that admin.js is not included)

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="user.js"></script>

script.js: (admin functions referenced but can't be executed)

admin = false; // Assume this

$(".something").dblclick(function(){
 if(admin)
  adminstuff(); // Implemented in admin.js (not included)
 else
  userstuff();
});

Ideas: I suppose two separate files for users and admins could be used but I feel that would be an overly complicated solution (don't want to maintain two large files with only a few lines of difference). The only reason I include a reference to the admin function in this file is I need to attach it to page elements that get refreshed as a part of the script. When jQuery refreshes the page I need to reattach function to interactive elements.

The Question: I want to keep things very simple and not have to include file I don't have to if they will not be used by the user. Is this a good way to do this or should I be going another route?

Answer 1

I don't think it matters. If it makes you feel better, you can make an empty stub function.

Answer 2

I don't think there's a dogmatic answer to this in my opinion. What you're doing is...creative. If you're not comfortable with it, that could be a sign to consider other options. But if you're even less comfortable with those then that could be a sign this is the right thing (or maybe the least wrong thing) to do. Ultimately you could mitigate the confusion by commenting the heck out of that line. I wouldn't let yourself get religious over best practices. Just be willing to stand by your choice. You've justified it to me, anyway.

Answer 3

Good question. It shouldn't cause any JavaScript problems.

Other things to consider: you are potentially exposing your admin capabilities to the world when you do this, which might be useful to hackers. That's probably not much of a concern, but it is something to be aware of.

See also:

Why can I use a function before it’s defined in Javascript?

Answer 4

The code should operate without error, since the admin functions without implementation will not be called. The only thing that is really being wasted is bandwidth to transmit the admin code that is not used.

However, let me caution against security through obscurity. If the user were to view this code and see that there are admin functions that they cannot access, they might get curious and try to download the "admin.js" file and see what these functions do. If your only block to keeping admin functions from being performed is to stop including the file, then some crafty user will probably quickly find a way to call the admin functions when they should not be able to.

If you already do server side authentication/permissions checking for the admin function calls just ignore my previous paragraph :-)

Answer 5

Personally, I would bind (or re-bind) the event in admin.js:

$(function() {

$(".something").dblclick(function(){
  adminstuff();
});

});

function adminstuff()
{
  // ...
}

That way, the adminstuff() call and the function will not be visible to "normal" users.

Answer 6

Javascript is dynamic - it shouldn't care if the functions aren't defined.

If you put your admin functions in a namespace object (probably a good practice anyway), you have a couple of options.

1. Check for the existence of the function in the admin object
2. Check for the existence of the admin object (possibly replacing your flag)
3. Have an operations object instead, where the admin file replaces select functions when it loads. (Even better, use prototypical inheritance to hide them.)

Answer 7

I think you should be wary that you are setting yourself up for massive security issues. It is pretty trivial in firebug to change a variable such as admin to "true", and seeing as admin.js is publically accessible, its not enough to simple not include it on the page, as it is also simple to add another script tag to the page with firebug. A moderately knowledgeable user could easily give themselves admin rights in this scenario. I don't think you should ever rely on a purely client side security model.