JavaScript newbie diving into the revealing module pattern

Question

JavaScript newbie diving into the revealing module pattern

Currently diving into Addy Osmani's fantastic read on javascript design patterns, however, I'm facing a roadblock. Can someone help me identify the issue with my approach? (I'm experimenting with Raphael for fun):

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");  // Yes!

  return {
      firstCircle: c1
  };
}

// Later on, I want to execute the function...
myScene();

//  ...and even later, I wish to reference one of the circles
//  without having to create another global variable.

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

http://jsfiddle.net/aGCv8/

javascript module-pattern revealing-module-pattern

Answer 1

Answer №1

"There's a flaw in the method you're using," is that this does not follow the module pattern, whether revealing or not. If you intended to utilize it, do so, and ensure the function self-invokes:

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");  // yes!

  return {
      firstCircle: c1         // ← reference an actual variable
  };
}();                          // ← place parentheses here

You do not later call myScene like a function, as it is not a function, and that unnamed function has already been invoked. And behold, you still have access to that circle!

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

If you omit the parentheses (which triggers the unnamed function), you will see a notably different result, as you've discovered.

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

Answer 2

"There's a flaw in the method you're using," is that this does not follow the module pattern, whether revealing or not. If you intended to utilize it, do so, and ensure the function self-invokes:

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");  // yes!

  return {
      firstCircle: c1         // ← reference an actual variable
  };
}();                          // ← place parentheses here

You do not later call myScene like a function, as it is not a function, and that unnamed function has already been invoked. And behold, you still have access to that circle!

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

If you omit the parentheses (which triggers the unnamed function), you will see a notably different result, as you've discovered.

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

JavaScript newbie diving into the revealing module pattern

Answer №1

Similar questions

Ensure that the content-length header is properly set for each section of a multipart/form-data upload

Utilizing directive scope variables to generate dynamic templates

Efficiently convert Map keys into a Set in Javascript without the need to copy and rebuild the set

Numerous Axios GET calls made by various components

Keep track of open tabs and their content by utilizing sessions

React Native, state values are stagnant

The `getScript` function in jQuery is not working as expected, even though the path is accurate and the script was successfully downloaded

Display the JSON outcome with console.logging

My HTML file is not able to load my Javascript file

When the div tag exceeds its boundaries, apply a new class

Develop an asynchronous function that can fetch a result at a later time within an Express route

Is there a way to reposition a popup window to the center of the page after launching it?

Guide on Embedding a JavaScript Encapsulation Function within a Directive

An easy guide to dynamically assigning a property using jQuery

Tips for resolving Vue.js static asset URLs in a production environment

Ways to avoid route change triggered by an asynchronous function

Remove any JSON objects in JavaScript or AngularJS that match another JSON object

Analyzing the list of paths that are passed to the function

Is it possible to create a component with a button that triggers the rendering of a different component?

Incorporating a node module into my Angularjs application