Javascript Namespaces Examples

**litewarez** · 8th Oct 2009, 08:52 PM

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 Code:


/*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 Code:


/*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 Code:


/*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

litewarez Reviewed by litewarez on 8th Oct 2009. Javascript Namespaces Examples 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 /*Core Javascript File*/ FaceBox = {} /*This is my Rating: 5

**Hyperz** · 8th Oct 2009, 09:03 PM

To be exact they are objects but this method allows them to behave as a namespace

. Good info nonetheless

.

**litewarez** · 8th Oct 2009, 10:37 PM

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

**Dman** · 8th Oct 2009, 11:15 PM

Javascript actually has try and catch. Nice to know litewarez.

**Exel** · 8th Oct 2009, 11:36 PM

Thanks for the info.

**litewarez** · 9th Oct 2009, 01:02 AM

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

PHP Code:


<!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>

**snowmanrene** · 9th Oct 2009, 01:17 AM

COOL.....now get your bamseeclat on msn...

Javascript Namespaces Examples

Thread Tools

Display

Hybrid View

Javascript Namespaces Examples

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

25 Breathtaking Examples of Nature Photography

JavaScript Kit

javascript help

Help About JavaScript

help with some javascript

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaCreator - create posts from...

themaManager - edit and manage...

themaLeecher - leech and manage...

themaPoster - post to forums and...