Best Practices

Hey all,

I’ve been coding in JavaScript for a long while but lately I’m starting to notice how sloppy and unreusable much of my code is plus alot could generate global conflicts due to not understanding exactly how to avoid globals.

So I read a few articles and the first one suggested namespaces (this is familiar from C#)

[CODE]
var myNamespace = {
doSomething: function(){
return “doSomething”;
},
otherThing: function(){
return “otherThing”;
}
}
myNamespace.doSomething();
[/CODE]

While it seems clean it still doesn’t avoid the concept of using global. If anything it encourages it as everything you wrote all variables and all functions are now globally accessible via the namespace.

This led me to reading about anonymous function wrappers and then just returning an interface. So to try and put the idea in my head I made this code:

[CODE]
(function(){
var Interface = {
Run: function(func){
switch(func){
case 0: helloWorld(); break;
case 1: byeWorld(); break;
case 2: otherWorld(); break;
};
}
};
function helloWorld(){
$(“body”).append(“hello world”);
}
function byeWorld(){
$(“body”).append(“bye world”);
}
function otherWorld(){
$(“body”).append(“other world”);
}
return Interface;
}());
[/CODE]

Now this loaded error free, but obviously still doesn’t do anything. Even if I tried to call [B]Interface.Run(1);[/B] from another script. So I misinterpreted thinking that it returned only an interface to global it seemed if I didn’t assign a variable to my anonymous function only the code in it would be executed and nothing would be returned. Now this isn’t bad if say it was just a one time run script and good to go. But what if it was an active library that I wanted to call from multiple different scripts? So I finally got it to work by doing.

[CODE]var x = (function(){
var Interface = {
Run: function(func){
switch(func){
case 0: helloWorld(); break;
case 1: byeWorld(); break;
case 2: otherWorld(); break;
};
}
};
function helloWorld(){
$(“body”).append(“hello world”);
}
function byeWorld(){
$(“body”).append(“bye world”);
}
function otherWorld(){
$(“body”).append(“other world”);
}
return Interface;
}());
x.Run(2);
[/CODE]

Now this works to hide my functions that I don’t want externals to see, but I’m still left with a global x making it look very similar to a namespace, but it is just hiding any information from other scripts that is NOT available in the interface. Now this is good in the sense that I can now check to see if X exhists and then assign it if it does not avoiding any potential global conflicts. Also the interface is NOT dependant on the “class” that uses it having the same functionality so I can grow this class as needed and as long as the interface remains the same then ANY external can use this without changing or breaking its contents.

This still leaves me at the mercy of other programmers though (hoping they check to see if my global variable exhists before overwriting it.) Obviously I wouldn’t want to use the var X, but more something bland was an example of how easy it would be for the next script loaded after mine to assign a variable X and overwrite mine making any other scripts dependant on my global namespace crash and burn.

Is there a smarter way to do this that avoids globals, keeps modularity, and leaves you scratch free if other programmers are running around hacking with swords?
Thanks for your time. I am aware this may be a matter of opinion and I don’t mind that. I am interested in just learning the perspectives of some more experienced JavaScript poets than I.

Also in #JavaScript _↴