CODEWITHSUNDEEP
javascriptjquery
scottmwilliams
scottmwilliams

Reputation: 168

Basic javascript code layout

I have what I think is a fairly simply question but it's one that I can not find the answer to. I have a objects literal that I have created that groups functions, I want to know how I can create a variable that is inside the objects literal and editable/accessable by all the functions within that objects literal. At the moment the only way I know how to do this is create a global variable but I want to stop populating the global in this way. To better describe what I'm looking fiddle

http://jsfiddle.net/aT3J6/

Thanks, for any help.

var clickCount = 0;

/* I would like to place clickCount inside hideShowFn Object but all function inside need access to it, so global within hideShowFn */

hideShowFn = {
    init:function(){  
     $('.clickMe').click(this.addToCount);                
    },

addToCount:function(){
    clickCount++;
    $('<p>'+ clickCount + '</p>').appendTo('body');
    }
}

hideShowFn.init();

Upvotes: 3

Views: 1163

Answers (3)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

http://jsfiddle.net/mattblancarte/aT3J6/10/

Another option would be the pseudo-classical style:

function Constructor(){
  var private = 'private';
  this.public = 'public';

  this.methods = {
    //your methods here...
  };
}

var obj = new Constructor();

Don't forget to use the 'new' keyword, or else you are going to be globally scoped.

Your code translated to this style would be:

function Test(){
  var that = this,
      clickCount = 0;

  this.init = function(){
    $('.clickMe').click(this.addToCount);
  };

  this.addToCount = function(){
    clickCount++;
    $('<p>'+ clickCount + '</p>').appendTo('body');
  };
}

var test = new Test();
test.init();

Upvotes: 2

Andreas Louv
Andreas Louv

Reputation: 47127

You can make a closure as Cokegod says or you can simply add the variable to the object and access it using this

hideShowFn = {
    clickCount: 0,
    init:function(){  
        $('.clickMe').click(this.addToCount);                
    },
    addToCount:function(){
        this.clickCount++;
        $('<p>'+ this.clickCount + '</p>').appendTo('body');
    }
}

hideShowFn.init();

This dosn't work as Musa says the scope in addToCount will be the dom node clicked.

But see Cokegod's answer.

Upvotes: 1

Cokegod
Cokegod

Reputation: 8434

Create a function which is invoked immediately and returns the object, with the private variable inside the function, like this:

var obj = (function () {
    var privateStuff = 'private';
    return {
        func1: function () { 
            //do stuff with private variable
        },
        func2: function () {
            //do stuff with private variable
        }
    };
}());

http://jsfiddle.net/BE3WZ/

This is the way to have private variables in Functional Programming.

Upvotes: 2

Related Questions