Question

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

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/

Javascript揭示模块模式Noob

1 个答案: