TutorialGenius.com: Javascript: Namespaces and O-O examples...

I'm not sure how common practise this is, but where I currently work we have a standard whereby we placed common JavaScript functionality in separate files and what could be called classes. I'm sure most developers out there do group common functions in files and import them when needed. This is fine, but it doesn't promote certain O-O practises like information hiding and the feel of objects, methods and properties. This is what this post aims to achieve.

I have attached a sample project file which declares a JavaScript name space in a separate file, declares a Messages 'class' in another and a sample HTML page which invokes various methods and properties against it. Sample can be found at the end of this post.

Namespace declaration - Must be imported first

/******************************

** BANTY Namespace definition

******************************/

var BANTY = BANTY || {};

BANTY = (function() {

    return {

        helloWorld : function() {

            return "Helllo World!";

}());

Class definition

/******************************

** Define Messages class

*******************************/

if (!BANTY.Messages) BANTY.Messages = {};

BANTY.Messages = (function() {

    // private declarations here

    var pi_Message;

    var pi_ChangeMessage = function (newMsg) {

        pi_Message = newMsg;

};

    // public declarations here

    return {

        publicProperty : "This is a public property",

        init : function (Args) {

            pi_Message = "Message initialised.";

},

        showMessage : function () {

            return "The value of the message is: " + pi_Message;

},

        changeMessage : function (msg) {

            pi_ChangeMessage(msg);

},

};

}());

Example HTML Page

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

    <title>Javascript O-O Example</title>

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

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

</head>

<body style="font-family: verdana; font-size: 8pt">

    <div id="tagged"></div>

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

    <script type="text/javascript">

    $('#tagged').append('<br /><div><font color="0000FF"><b>Information hiding principles...</b></font></div>');

    $('#tagged').append('<div>Can I see BANTY?:<b> '+ (BANTY ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<div>Can I see BANTY.helloWorld?:<b> '+ (BANTY ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<div>Can I see BANTY.Messages?:<b> '+ (BANTY.Messages ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<div>Can I see BANTY.Messages.publicProperty?:<b> '+ (BANTY.Messages.publicProperty ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<div>Can I see BANTY.Messages.showMessage?:<b> '+ (BANTY.Messages.showMessage ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<div>Can I see BANTY.Messages.pi_Message?:<b> '+ (BANTY.Messages.pi_Message ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<div>Can I see BANTY.Messages.pi_ChangeMessage?:<b> '+ (BANTY.Messages.pi_ChangeMessage ? 'Yes' : 'No') +'</b></div>');

    $('#tagged').append('<br /><div><font color="0000FF"><b>Show and Change Messages...</b></font></div>');

    $('#tagged').append('<div><b> BANTY.helloWorld:</b> '+ BANTY.helloWorld() +'</div>');

    $('#tagged').append('<div><b> BANTY.Messages.report():</b> '+ BANTY.Messages.showMessage() +'</div>');

    $('#tagged').append('<div><b> BANTY.Messages.init():</b> '+ BANTY.Messages.init() +'</div>');

    $('#tagged').append('<div><b> BANTY.Messages.report():</b> '+ BANTY.Messages.showMessage() +'</div>');

    $('#tagged').append('<div><b> BANTY.Messages.changeMessage(newmsg):</b> '+ BANTY.Messages.changeMessage("newmsg") +'</div>');

    $('#tagged').append('<div><b> BANTY.Messages.report():</b> '+ BANTY.Messages.showMessage() +'</div>');

    </script>

</body>

</html>

Example Output

Information hiding principles...

Can I see BANTY?: Yes

Can I see BANTY.helloWorld?: Yes

Can I see BANTY.Messages?: Yes

Can I see BANTY.Messages.publicProperty?: Yes

Can I see BANTY.Messages.showMessage?: Yes

Can I see BANTY.Messages.pi_Message?: No

Can I see BANTY.Messages.pi_ChangeMessage?: No

Show and Change Messages...

BANTY.helloWorld: Helllo World!

BANTY.Messages.report(): The value of the message is: undefined

BANTY.Messages.init(): undefined

BANTY.Messages.report(): The value of the message is: Message initialised.

BANTY.Messages.changeMessage(newmsg): undefined

BANTY.Messages.report(): The value of the message is: newmsg

Download Sample Files Here

Thanks go out to my company for putting this standard in place.

TutorialGenius.com

Wednesday 29 September 2010

Javascript: Namespaces and O-O examples...

No comments: