Javascript揭示模块模式，公共属性 [英] Javascript revealing module pattern, public properties

问题描述

我试图让我的头脑在javascript中显露模块模式。我对以下代码片段的两个问题感到困惑。

  var Child = function（）{
 var totalPoints = 100; 
 addPoints = function（points）{
 totalPoints + = points; 
返回总积分; 
}; 
 getPoints = function（）{
 return totalPoints; 
}; 
 return {
 points：totalPoints，
 addPoints：addPoints 
}; 
}; 
 $（function（）{
 var george = Child（）; 
 console.log（george.points）; 
 console.log（george.addPoints（50））; 
 console.log（george.points）; 
}）; 
  

1. 这里写入控制台的三个值为100， 150，100.这告诉我，当我用一个值来调用addPoints时，totalPoints变量没有被更新。如果我检查中的totalPoints 的值，那么它的已经被正确地递增了。




2. 如果我使用控制台检查window.addPoints或window.getPoints，我可以看到，因为我避风港在已经添加到全局范围的函数声明前面使用var。

$ b $

解决方案

您正在传递一个数字：

  return {
 points：totalPoints，
 addPoints：addPoints 
}; 
  

这段代码与以下内容没有区别：

  return {
 points：100，
 addPoints：addPoints 
}; 
  

您正在传递值;不是引用 totalPoints （后者在JavaScript中是不可能的）。所以当 totalPoints 更改时，对象中的值不会。

---

使用函数

最简单的方法这是使用一个函数来获得最新的结果（如 getPoints ，您已经拥有）。 此JSFiddle 提供了一个完整的例子：

  return {
 points：function（x）{return totalPoints; }，//始终是最新的
 addPoints：addPoints 
}; 
  

缺点是呼叫者现在必须要求点作为函数调用：

  console.log（george.points（））; 
  

---

使用getters和setters

$另一个解决方案是使用 可以让您获取更新的值，只需 george.totalPoints ，虽然getter没有被广泛支持（还）。你可以这样实现一个getter：

  var obj = {}; 
 
 obj.points = addPoints; 
 
 //向对象添加一个特殊属性，而不是普通符号
 Object.defineProperty（obj，totalPoints，{
 get：function（）{//使用`.totalPoints'
返回totalPoints执行的功能; 
} 
}）; 
 
 return obj; 
  

---

其次，删除 var 使全局的功能是正确的，但不可取。您可以使用逗号生成一个 var 语句，如果这是你的意思：

  var totalPoints = 100，//扩展为三个`var`语句，所以没有
 addPoints = ...，//全局变量
 getPoints = ...; 
  

I'm trying to get my head round the revealing module pattern in javascript. I'm puzzled by two things about the following code snippet.

        var Child = function () {
            var totalPoints = 100;
            addPoints = function (points) {
                totalPoints += points;
                return totalPoints;
            };
            getPoints = function () {
                return totalPoints;
            };
            return {
                points: totalPoints,
                addPoints: addPoints
            };
        };
        $(function () {
            var george = Child();
            console.log(george.points);
            console.log(george.addPoints(50));
            console.log(george.points);
        });

1. The three values written to the console here are 100, 150, 100. That tells me that when I call "addPoints" with a value the totalPoints variable isn't updated. If I examine the value of totalPoints within the addPoints function it has been incremented properly. What's going on?

2. If I use the console to examine window.addPoints or window.getPoints I can see that because I haven't used "var" in front of the function declarations they've been added to the global scope. Isn't that wrong? Most of the examples I'm looking at seem to do this.

Any pointers gratefully received.

解决方案

You're passing a number here:

return {
    points: totalPoints,
    addPoints: addPoints
};

This piece of code is no different from:

return {
    points: 100,
    addPoints: addPoints
};

You're passing the value; not a reference to totalPoints (the latter is not possible in JavaScript). So when totalPoints changes, the value in the object does not.

---

Using a function

The simplest way to get around this is to use a function to get the most up-to-date result (like getPoints which you already have). This JSFiddle gives a complete example:

return {
    points: function(x) { return totalPoints; }, // always up-to-date
    addPoints: addPoints
};

The downside is that the caller must now ask for points as a function call:

console.log(george.points());

---

Using a getters and setters

Another solution is using getters which would enable you to get an updated value with just george.totalPoints, though getters are not widely supported (yet). You could implement a getter like this:

var obj = {};

obj.points = addPoints;

// add a "special" property to the object instead of normal notation
Object.defineProperty(obj, "totalPoints", {
    get: function() { // function that's executed when you use `.totalPoints`
        return totalPoints;
    }
});

return obj;

---

Secondly, dropping var makes the functions global which is correct but not advisable. You could make one var statement using commas, if that's what you mean:

var totalPoints = 100, // expands to three `var` statements, so no
    addPoints = ...,   // global variables
    getPoints = ...;

这篇关于Javascript揭示模块模式，公共属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！