The Factory Pattern for Javascript Modules
Javascript modules are a great way to isolate your code, but they are not very re-usable. If we implement the factory pattern inside of one of our modules we get code re-use without losing the encapsulation benefits of a javascript module.
[00:01] To get some code reuse out of your JavaScript modules, I'm going to show you how to implement the factory pattern. We've got our working calculator here doing some basic arithmetic. Over on this side, we've got some html layout for the calculator.
[00:15] In the calc.js file, we are doing jquery call to find our calculator element. We're using our calculator module created in JavaScript and interacting with it by pushing values and handling button clicks.
[00:27] In the calcModule.js file is the calculator module itself. We're using the IIFE, or JavaScript module pattern here to hide most of the functionality, and only expose the things we want our consumers to interact with.
[00:44] We're going to start off by copying our calculator and pasting it below. Then, we're going to add the number two to this ID and to this class.
[00:54] Next, we're going to go back to our bridge and copy and paste all of our module code down below. Then, we're going to add a bunch of twos onto the end of all of these names. This will give us a duplicate set of functions and properties.
[01:10] If we go ahead and refresh the page, we will see that we now have two calculators. As we interact with the buttons on the screen, we will see that all of the buttons are only manipulating the results of the bottom text box.
[01:23] Our top calculator is non-functional. That's because both our calculator element group and our calculator two element group here are calling set listener and input on the exact same calculator module.
[01:38] To fix this, we're going to go into our calculator module and make one small little change. We're going to start out by creating a variable called "innerFactory." It's going to be a function, and it's going to take a parameter onResultUpdated.
[01:54] This is the exact same name as our variable right here. Then, we're going to make our innerFactory wrap the rest of our code. We're going to return our innerFactory as a result of the module.
[02:08] The last thing that we need to do is delete our implementation of the set listener function and our declaration of the onResultUpdated variable. We're going to use the onResultUpdated argument that's passed in through our factory to communicate back out to consumers of our module.
[02:28] To implement these changes, all we need to do is remove our call to the set listener function, and then, invoke our calculator directly. We're going to store the value in a variable calc 1, and do the same thing below, except we'll call this variable "calc 2."
[02:46] We're not going to invoke the listener function. The last thing that we need to do is use our new variables instead of accessing the module. Now, if we refresh the page, we will see that each calculator works independently of the other.
[02:59] With a little bit of wired up code like what we have here in calc.js, we could reuse our calculator as many times as we want, without having to worry about one calculator affecting the values in another calculator.