CODEWITHSUNDEEP
javascriptoop
Saif Bechan
Saif Bechan

Reputation: 17121

How to create a well formed global javascript object containing special functions

I am creating a small project that heavily relies on JavaScript. I come from php/mysql and now stepping into node.js/javascript/mongodb, and I hve to say it's quite a mindswitch.

I want to create a simple object that has some special function that I can use in the page. I have been looking at some tutorial, and looking at the libraries such as jquery and backbone, but I need some final advice on my decision.

I only need some small functions, and no cross-browser support, that's why I don't choose something like backbone. Maybe ill change to that later when I have a better crasp on JavaScript programming.

What is confusing me is whether to use the new, or maybe wrapping the code into a self-invoking function.

I see jquery creates an object inside the window and than exposes that, but I have no idea how that works.

Enough intro, now to the point. I have created something like this:

var $s = Object.create({

    page: Object.create({

        title: 'pagetitle',
        html: '',
        data: {},

        render: function(){
            // Basic render function
        }

    }),

    socket: Object.create({
        // My websocket connection
    }),

    store: function(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },

    retrieve: function(key) {
        var value = localStorage.getItem(key);
        return value && JSON.parse(value);
    },

    slugify: function(slug){
        return slug.replace(/[^a-zA-Z 0-9-]+/g,'').toLowerCase().replace(/ /g,'-');
    }

});

This are just a few random functions I put in.

I haven't tested this yet, it is a draft, I want to know if this is any good.

Now I was thinking i can do some stuff like this:

$s.page.html = 'somehtml';
$s.page.render();

// Maybe
$s.store( $s.page.title, $s.page.html );

I do use jQuery and jQuery templating, so something like this could be possible:

$.tmpl( $s.page.html, $s.page.data ).appendTo( "#content" );

Upvotes: 4

Views: 3492

Answers (1)

jfriend00
jfriend00

Reputation: 707308

Nothing fancy is needed here. You can create a global javascript object with a method like this:

var myGlobalObject = {};
myGlobalObject.testFunction = function() {
    // put your code here
};

You can then call that like this:

myGlobalObject.testFunction();

One slightly more flexible design pattern you will often seen used is this:

var myGlobalObject = myGlobalObject || {};

myGlobalObject.testFunction = function() {
    // put your code here
};

This is used when there might be lots of different pieces of code contributing to myGlobalObject and they all want to make sure that it's properly declared before adding properties to it. This way of doing it, creates it if it doesn't already exist and if it does already exist, leaves the methods and properties on it that might already be there. This allows multiple modules to each contribute initialization to myGlobalObject without regards for the order they load.

Upvotes: 7

Related Questions