javascript - 基本的javascript代码布局

Question

我有一个我认为相当简单的问题，但我找不到答案。我有一个我创建的对象文字，它对函数进行分组，我想知道如何创建一个位于对象文字内部的变量，并且该对象文字中的所有函数都可以编辑/访问。目前我知道如何做到这一点的唯一方法是创建一个全局变量，但我想停止以这种方式填充全局变量。为了更好地描述我正在寻找的小提琴

http://jsfiddle.net/aT3J6/

谢谢你的帮助。

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(); 

Answer 1

创建一个立即调用并返回对象的函数，函数内部包含私有变量，如下所示：

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/

这是在函数式编程中拥有私有变量的方式。

Answer 2

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

另一种选择是伪古典风格：

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

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

var obj = new Constructor();

不要忘记使用 'new' 关键字，否则您将在全局范围内。

您翻译成这种风格的代码将是：

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();

Answer 3

您可以按照Cokegod所说的那样创建一个闭包，或者您可以简单地将变量添加到对象并使用它访问它this

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

hideShowFn.init();

这不起作用，因为 Musa 说范围addToCount将是单击的 dom 节点。

但是请参阅Cokegod的回答。