Latest Announcemnent
New thread

Javascript Namespaces Examples

Status
Not open for further replies.
L

litewarez

Active Member
1,367
2008
1
0
Heya all, ive just recently started to get to grips with Javascript NamesSpaces and id thought id share what i know so far with you :)

No the bes think about Names Spaces is that you can keep your function/objects organized and clean.

So for exampel if i just set up a website called FaceBox... and within this site i will be using a lot of javascript. what i would do is create a global namespace for all my functions. Example Below

PHP: 
/*Core Javascript File*/
FaceBox = {} /*This is my core namespace*/

Ok so we have a core name space but i want to add split sections to my NS so its organized.. we can do summat like the following

PHP: 
/*Core Javascript File*/
FaceBox = {} /*This is my core namespace*/

FaceBox.Tools = {}
FaceBox.GUI = {}

Ok so we have no define several namespaces but your prob wondering how to add functions etc... well lets create a few functions

PHP: 
/*Wroking on FaceBox.Tools*/

/*We can define functions within the namespace like so */

FaceBox.Tools = {
	Alert : function(message){
		alert(message);
	}
	Redirect : function(loc){
		document.location = loc;
	}
	AlertBeforeRedirect(message,location){
		FaceBox.Tools.Alert(message);
		FaceBox.Tools.Redirect(loc);
		/*Note here you can access the other NS'es like so*/
		FaceBox.GUI.ShowDialog('LiteBox');
	}
}
/*No we can call the following like so*/
FaceBox.Tools.Alert('Hello World!');

/*Or*/
<a href="#" onclick="javascript:FaceBox.Tools.AlertBeforeRedirect('Your are about to be redirected to the logout page!','logout.php')">Logout</a>

Now i hope you can understand why using namespaces is such a good idea.. as you can constantly develope your code by having functions etc...

Also if you are using Dreamweaver Theres a tool installed that helps you write Name Spaces with ease as it shows you all the possible functions within a Namespace :)

Peace
 
6 comments
yea im not 100% with javascript but im a clean freak when it comes to code and i think this this method is amazingly simple in comparison the natural type of javascript coding :) thanks for the input, least i know there actually "Objects" Now :)

peace
 
Heres an example of what im working on at the minute for my own personal framework :)

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	CORE = {
		INIT : function(){
			google.load("jquery"	,"1");
			google.load("jqueryui"	,"1");
			/*Load the JQuery Startup*/
			google.setOnLoadCallback(
				CORE.CONSTRUCT_FRAMWORKS
			);
		},
		CONSTRUCT_FRAMWORKS : function(){
			CORE.FRAMEWORKS.INIT();
		}
	}
	CORE.FRAMEWORKS = {
		INIT : function(){
			CORE.FRAMEWORKS.JQ(); // Load JQuery
			CORE.FRAMEWORKS.JQUI(); // Load JQuery
		},
		/*
			*
			* Each Framwork has its own position in the objects and you can cunstruct your code within each 
			* Framwork, where it will be run on Document Ready.
			*
		*/
		JQ : function(){
			$("#draggable-div").draggable({"handle": "div"});
		},
		JQUI : function(){
		}
	}
	CORE.INIT();
</script>
</head>
<body>
	<div id="draggable-div" style="width:100px;border:1px solid #999;">
		<div style="background-color:#999">dragme</div>
		content
	</div>
</body>
</html>
 
Status
Not open for further replies.
Back
Top