/    Sign up×
Community /Pin to ProfileBookmark

Common JS object for frequently used functions?

Copy linkTweet thisAlerts:
Nov 15.2011

Just curious which approach to take, or if there is a suggested best practice…

Usually I have various JavaScript functions for common functionality on my pages (i.e. select all, export, etc.). Typically I will create a common.js file and place these functions within it. Is there any advantage to create a client side object which encapsulates this functionality such that I’d use something like common.SelectAll() or something similar?

Not sure if there is a best practice peeps follow for this or not.

Thanks for any info!

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscNov 15.2011 — There is an advantage, although it is slight and may not be considered as an advantage in terms of best practices.

The pro is that you are only using a single global variable, instead of sticking a bunch of them in there - think jQuery.

You could have these functions

<i>
</i>function commonStuff() {

}

function moreSutff() {

}

function otherStuff() {

}


You've just created 3 global objects. If you are using all kinds of libraries and external scripts, one of them might be using a global that collides with one of your globals. By doing the following:

<i>
</i>var myCommonIncludes = {
commonStuff : function() {

},

moreStuff : function() {

},

otherStuff : function() {

}
}


You've only created a single global object that allows access to all your functions. Less chance of a collision.

The con to the second method is that it doesn't really make any sense if all of the functions do completely different things. Objects should be used for storing things like application state and methods - kind of like a class in another language, they should be used for grouping properties/methods that are related. It makes no sense to group unrelated entities, in my opinion.
Copy linkTweet thisAlerts:
@JunkMaleNov 15.2011 — Not being rude, what are you talking about?

You can create javascript on the server and custom make scripts if you need or have a static script thats delivered as it would normally be delivered.

What is it that your trying to do?
Copy linkTweet thisAlerts:
@Declan1991Nov 15.2011 — What I tend to do is use closures, and then if I need to, provide a public interface. So, I recently was playing around with an analogue clock, so I make a Timer object (call it what you like), and then provide a reset, start and stop function to the global interface (and a few others). I think that's nice and tidy, and I find a lot of things fall into that pattern

I don't really think that functions should be randomly thrown into namespaces though (closures maybe), I'm not really a fan of having a MyUserName "package" and randomly throwing all functions into it, that seems a bit pointless to me. There are certain things that should be just global, others that should be hidden (like the interval code for my timer), and stuff in the middle where it's not obvious.
Copy linkTweet thisAlerts:
@rnd_meNov 16.2011 — one MAJOR advantage of bundling methods and settings is that they are all together on an iterable object. this means you can more easily look up if that one method was capitalized or not... cleans up firebug and prevents conflicting globals while reducing closure overhead.

also, by keeping state in an object, you can store and restore your state easily using JSON.stringify(App.mySettings), whereas a bunch of vars are going to require tedious "mounting code" to serialize.

you can use [I]with(Object){[/I]to turn an object into a lexical scope if you hate typing the namespace every time, but i would use a local copy named "x" or something short...
×

Success!

Help @geek4Life spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...