Javascript揭示模塊模式Noob

Question

我正在開始關於JavaScript設計模式的 Addy Osmani 令人驚嘆的書，但似乎起步並不順利。 誰能告訴我我的方法有什么問題（我使用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

“您的方法有什么問題”是， 這不是模塊模式 （顯示或以其他方式顯示）。 如果您打算使用它，請使用它並使該函數自動調用：

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/