Javascript 揭示模块模式 Noob

Question

我正在启动 Addy Osmani 的 amazing book on javascript design patterns，但似乎无法启动。谁能告诉我我的方法有什么问题（我正在使用 Raphael，只是为了好玩。）：

var myPaper = Raphael('container', '800', '600');

var myScene = function() {
  var c1 = myPaper.circle(50, 50, 40);
  var c2 = myPaper.circle(50, 150, 40);
  var c3 = myPaper.circle(50, 250, 40);

  c2.attr("fill", "red");  // yep!

  return {
      firstCircle: c1
  };
}

// at some point later i want to call the function...
myScene();

//  ...then even later I want to refer to one of the circles
//  but without creating another global variable.

myScene.firstCircle.attr("fill", "red");  // nope!
console.log(myScene.firstCircle); //  undefined!

http://jsfiddle.net/aGCv8/

Answer 1

“你的方法有什么问题”是this isn't the module pattern，无论是揭示还是其他。如果您打算使用它，使用它， 并使该函数自调用：

var myScene = function() {
  var c1 = myPaper.circle(50, 50, 40);
  var c2 = myPaper.circle(50, 150, 40);
  var c3 = myPaper.circle(50, 250, 40);

  c2.attr("fill", "red");  // yep!

  return {
      firstCircle: c1         // ← refer to a variable which is actually defined
  };
}();                          // ← parens go here

您以后不要将myScene 作为函数调用，因为它不是函数，并且该匿名函数已被调用。看，你仍然可以访问那个圈子！

console.log(myScene.firstCircle); // z {0: circle.[object SVGAnimatedString], node: circle.[object SVGAnimatedString], id: 0, matrix: cb, realPath: null, paper: j…}

如您所见，省略括号（调用匿名函数）会导致非常不同的结果。

http://jsfiddle.net/mattball/qR4Fj/