benb benb - 4 months ago 18
jQuery Question

javascript object literal pattern with multiple instances

I have developed a little javscript widget to turn some nested

<ul>
blocks into a windows explorer style browser. I have recently learnt about the object literal pattern and decided to give it a go, so the organisation of my code is something like this:

var myExplorer = {
init : function(settings) {
myExplorer.config = {
$wrapper : $('#explorerCategories'),
$contentHolder : $j('#categoryContent'),
loadingImg : '<img src="../images/standard/misc/ajax_loader.gif" alt="loading" class="loading" />'
}
// provide for custom configuration via init()
if (settings && typeof(settings) == 'object') {
$.extend(myExplorer.config, settings);
}

// some more code...
},

createExpanderLink : function() {
// more code
},

anotherMethod : function() {
// etc
}
}


Then in my page I set up my explorer with:

$j(function () {
myExplorer.init();
}


This all works fine by the way. The problem is when I want to have more then one of these explorer style widgets on the same page. I tried passing in the different settings:

$j(function () {
// first instance
myExplorer.init();

//second instance
var settings = {
$wrapper : $('#explorerCategories2'),
$contentHolder : $j('#categoryContent2')
}
myExplorer.init(settings);

}


But this simply overwrites the config vales for the first instance which effectively breaks it. I'm beginning to realise that the object literal pattern isn't the way to go here but I'm not sure what is. Can anyone offer any pointers?

Answer

Use a function instead on an object literal, so you can instantiate multiple objects of the widget using the new keyword.

function myExplorer(settings) {
    // init code here, this refers to the current object
    // we're not using a global object like myWindow anymore
    this.config = {
        $wrapper : $('#explorerCategories'),
        $contentHolder : $j('#categoryContent'),
        ..
    };

    // provide for custom configuration
    if (settings && typeof(settings) == 'object') {
        $.extend(this.config, settings);
    }

    this.someFunction = function() { 
        ..
    };

    this.otherFunction = function() {

    };
}

Instantate as many objects of this widget as needed using,

var foo = new myExplorer({ .. });
var bar = new myExplorer({ .. });
...
Comments