4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) - Scotch

12/20/2015
4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch
(/)
4 JavaScript Design
Patterns You Should
Know (+ Scotchmas
Day 2)
Devan Patel ( (https://scotch.io/author/devan)@devanp92 (https://twitter.com/devanp92))
December 15, 2015
54
Bar Talk (https://scotch.io/category/bar-talk)
javascript
(https://scotch.io/tag/javascript)
https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know
shares
1/40
12/20/2015
The Scotchmas Day 2
giveaway can be found at

the end of this article.
POPULAR ON SCOT
Every developer strives to
Creating Deskto
write maintainable,
Applications Wi
readable, and reusable
Electron
AngularJS and G
code. Code structuring
(https://scotch.io/tutorials/cr
becomes more important
desktop-applications-with-an
as applications become
and-github-electron)
Create a MEAN
larger. Design patterns
Google Map Ap
prove crucial to solving

this challenge providing
(https://scotch.io/tutorials/m
an organization structure
mean-apps-with-google-map
Containerized T
for common issues in a
Node Applicatio
Dockunit
particular circumstance.
(https://scotch.io/tutorials/co
JavaScript web developers
testing-for-node-applications
frequently interact with
dockunit)
design patterns, even

unknowingly, when
creating applications.
Aesthetic Sass 3
Typography and
Rhythm
(https://scotch.io/tutorials/ae
sass-3-typography-and-vertic
2/40
12/20/2015
Although there is a diverse
Create a Custom
list of design patterns used
Polymer
Player Element
in certain circumstances,
JavaScript developers tend
custom-audio-player-elemen
to use some patterns
polymer)
Create a Real-T
customarily more than
Shoutbox with
others.
Events
In this post, I want to
real-time-shoutbox-with-lara
Simbla: A Next
discuss these common
Responsive We
patterns to expose ways to
Builder
improve your
(https://scotch.io/tutorials/sim
programming repertoire
next-generation-responsive-w
and dive deeper into the
builder)
JavaScript internals.
The design patterns in
question include the
following:
LEARN NODE AND AN

WITH OUR EBOO
Module
Prototype
Observer
Singleton
Each pattern consists of
many properties.
However, I will emphasize
3/40
12/20/2015
the following key points:

1. Context:
Where/under what
circumstances is the
pattern used?
2. Problem: What are we
trying to solve?
3. Solution: How does
using this pattern
solve our proposed
problem?
4. Implementation:
What does the
implementation look
(http://bit.ly/1FxJ
A VAGRANT LAMP S
THAT JUST WORK
like?
Module Design
Pattern
JavaScript modules are the
most prevalently used
design patterns for
keeping particular pieces
of code independent of
other components. This
(http://bit.ly/1PY0
DEAD SIMPLE
4/40PAN
OFF-CANVAS
12/20/2015
provides loose coupling to
OFF-CANVAS PAN
support well-structured
code.
For those that are familiar
with object-oriented
languages, modules are
JavaScript classes. One of
the many advantages of
classes is encapsulation
protecting states and
behaviors from being
accessed from other
classes. The module
pattern allows for public
and private (plus the
(http://bit.ly/1QJL
SCOTCH.IO STICKE
lesser-know protected and

privileged) access levels.
Modules should be
Immediately-InvokedFunction-Expressions (IIFE)
to allow for private scopes
that is, a closure that
protect variables and
methods (however, it will
(http://shop.scotc
5/40
12/20/2015
return an object instead of

a function). This is what it
looks like:
(function() {
// declare private variables and/or functions
return {
// declare public variables and/or functions
}
})();
Here we instantiate the

private variables and/or
functions before returning
our object that we want to
return. Code outside of
our closure is unable to
access these private
variables since it is not in
the same scope. Lets take
a more concrete
implementation:
6/40
12/20/2015
var HTMLChanger = (function() {

var contents = 'contents'
var changeHTML = function() {
var element = document.getElementById
element.innerHTML = contents;
}
return {
callChangeHTML: function() {
changeHTML();
console.log(contents);
}
};
})();
HTMLChanger.callChangeHTML();
// Outputs: 'contents'
console.log(HTMLChanger.contents); // undefined
Notice that
callChangeHTML binds to
the returned object and

can be referenced within
the HTMLChanger
namespace. However,
when outside the module,
contents are unable to be
referenced.
Revealing Module
Pattern
7/40
12/20/2015
A variation of the module

pattern is called the
Revealing Module
Pattern. The purpose is to
maintain privacy for all
variables and methods
only finally revealed in the
returned object literal. The
direct implementation
looks like this:
8/40
12/20/2015
var Exposer = (function() {

var privateVariable = 10;
var privateMethod = function() {
console.log('Inside a private method!'
privateVariable++;
}
var methodToExpose = function() {
console.log('This is a method I want to expose!'
}
var otherMethodIWantToExpose = function
privateMethod();
}
return {
first: methodToExpose,
second: otherMethodIWantToExpose
};
})();
Exposer.first();
// Output: This is a method I want to ex
Exposer.second();
// Output: Inside a private method!
Exposer.methodToExpose; // undefined
Although this looks much

cleaner, an obvious
disadvantage is unable to
reference the private
methods. This can pose
unit testing challenges.
9/40
12/20/2015
Similarly, the public

behaviors are nonoverridable.
Prototype
Design Pattern
Any JavaScript developer
has either seen the
keyword prototype,
confused by the
prototypical inheritance or
implemented prototypes
in their code. The
Prototype design pattern
relies on the JavaScript
prototypical inheritance
(https://developer.mozilla.
org/enUS/docs/Web/JavaScript/In
heritance_and_the_prototy
pe_chain). The prototype
model is used mainly for
creating objects in
performance-intensive
situations.
10/40
12/20/2015
The objects created are

clones (shallow clones) of
the original object that are
passed around. One use
OUTLINE
case of the prototype

Observer Design Pattern
pattern is performing an
extensive database
operation to create an
object used for other parts
of the application. If
another process needs to
use this object, instead of
having to perform this
substantial database
operation, it would be
advantageous to clone the
previously created object.
interface
Client
Prototype
import
operation()
clone()
Objectp=prototype.clone()
ConcretePrototype1
ConcretePrototype2
clone()
clone()
returncopyofself
returncopyofself
Prototype Design Pattern

on Wikipedia
(https://upload.wikimedia.
org/wikipedia/commons/1
Scroll /14/Prototype_UML.svg)
to Top
11/40
12/20/2015
This UML describes how a

prototype interface is used
to clone concrete
implementations.
To clone an object, a
constructor must exist to
instantiate the first object.
Next, by using the keyword
prototype variables and
methods bind to the
objects structure. Lets
look at a basic example:
var TeslaModelS = function() {

this.numWheels
= 4;
this.manufacturer = 'Tesla';
this.make
= 'Model S';
}
TeslaModelS.prototype.go = function()
// Rotate wheels
}
TeslaModelS.prototype.stop = function(
// Apply brake pads
}
12/40
12/20/2015
The constructor allows the

creation of a single
TeslaModelS object. When
a creating new
TeslaModelS object, it will
retain the states initialized
in the constructor.
Additionally, maintaining
the function go and stop is
easy since we declared
them with prototype. A
synonymous way to
extend functions on the
prototype as described
below:

this.numWheels
= 4;
this.make
= 'Model S';
}
TeslaModelS.prototype = {
go: function() {
// Rotate wheels
},
stop: function() {
// Apply brake pads
}
}
Revealing Prototype
13/40
12/20/2015
Revealing Prototype
Pattern
Similar to Module pattern,
the Prototype pattern also
has a revealing variation.
The Revealing Prototype
Pattern provides
encapsulation with public
and private members
since it returns an object
literal.
Since we are returning an
object, we will prefix the
prototype object with a
function. By extending
our example above, we
can choose what we want
to expose in the current
prototype to preserve
their access levels:
14/40
12/20/2015

this.numWheels
= 4;
this.make
= 'Model S';
}
TeslaModelS.prototype = function() {
var go = function() {
// Rotate wheels
};
var stop = function() {
// Apply brake pads
};
return {
pressBrakePedal: stop,
pressGasPedal: go
}
}();
Note how the functions

stop and go will be
shielded from the
returning object due to
being outside of returned
objects scope. Since
JavaScript natively
supports prototypical
15/40
12/20/2015
inheritance, there is no
need to rewrite underlying
features.
Observer Design
Pattern
There are many times
when one part of the
application changes, other
parts needs to be updated.
In AngularJS, if the $scope
object updates, an event
can be triggered to notify
another component. The
observer pattern
incorporates just that if
an object is modified it
broadcasts to dependent
objects that a change has
occurred.
Another prime example is
the model-view-controller
(MVC) architecture; The
view updates when the
model changes. One
16/40
12/20/2015
benefit is decoupling the

view from the model to
reduce dependencies.
Observer Design Pattern

on Wikipedia
(https://upload.wikimedia.
org/wikipedia/commons/t
humb/8/8d/Observer.svg/
1000px-Observer.svg.png)
As shown in the UML
diagram, the necessary
objects are the subject,
observer, and concrete
objects. The subject

contains references to the
concrete observers to
notify for any changes. The
Observer object is an
abstract class that allows
17/40
12/20/2015
for the concrete observers

to implements the notify
method.
Lets take a look at an
AngularJS example that
encompasses the observer
pattern through event
management.
// Controller 1
$scope.$on('nameChanged', function(event
$scope.name = args.name;
});
...
// Controller 2
$scope.userNameChanged = function(name
$scope.$emit('nameChanged', {name:
};
With the observer pattern,

it is important to
distinguish the
independent object or the
subject.
18/40
12/20/2015
It is important to note that

although the observer
pattern does offer many
advantages, one of the
disadvantages is a
significant drop in
performance as the
number of observers
increased. One of the most
notorious observers is
watchers. In AngularJS, we
can watch variables,
functions, and objects. The
$$digest cycle runs and
notifies each of the
watchers with the new
values whenever a scope
object is modified.
We can create our own
Subjects and Observers in
JavaScript. Lets see how
this is implemented:
19/40
12/20/2015
var Subject = function() {

this.observers = [];
return {
subscribeObserver: function(observer
this.observers.push(observer);
},
unsubscribeObserver: function(observer
var index = this.observers.indexOf
if(index > -1) {
this.observers.splice(index, 1
}
},
notifyObserver: function(observer)
var index = this.observers.indexOf
if(index > -1) {
this.observers[index].notify(index
}
},
notifyAllObservers: function() {
for(var i = 0; i < this.observers
this.observers[i].notify(i);
};
}
};
};
var Observer = function() {
return {
notify: function(index) {
console.log("Observer " + index
}
}
}
var subject = new Subject();
var observer1 = new Observer();
20/40
12/20/2015

subject.subscribeObserver(observer1);
subject.notifyObserver(observer2); // Observer 2 is notified!
subject.notifyAllObservers();
// Observer 1 is notified!
Publish/Subscribe
The Publish/Subscribe
pattern, however, uses a
topic/event channel that
sits between the objects
wishing to receive
notifications (subscribers)
and the object firing the
event (the publisher). This
event system allows code
to define applicationspecific events that can
pass custom arguments
containing values needed
21/40
12/20/2015
by the subscriber. The idea

here is to avoid
dependencies between the
subscriber and publisher.
This differs from the
Observer pattern since any
subscriber implementing
an appropriate event
handler to register for and
receive topic notifications
broadcast by the
publisher.
Many developers choose
to aggregate the
publish/subscribe design
pattern with the observer
though there is a
distinction. Subscribers in
the publish/subscribe
pattern are notified
through some messaging
medium, but observers
are notified by
implementing a handler
similar to the subject.
22/40
12/20/2015
In AngularJS, a subscriber
subscribes to an event
using $on(event, callback),
and a publisher publishes
an event using
$emit(event, args) or
$broadcast(event, args).
Singleton
A Singleton only allows for
a single instantiation, but
many instances of the
same object. The Singleton
restricts clients from
creating multiple objects,
after the first object
created, it will return
instances of itself.
Finding use cases for
Singletons is difficult for
most who have not yet
used it prior. One example
is using an office printer. If
there are ten people in an
office, and they all use one
printer, ten computers
23/40
12/20/2015
share one printer

(instance). By sharing one
printer, they share the
same resources.
24/40
12/20/2015
var printer = (function () {

var printerInstance;
function create () {
function print() {
// underlying printer mechanics
}
function turnOn() {
// warm up
// check for paper
}
return {
// public + private states and behaviors
print: print,
turnOn: turnOn
};
}
return {
getInstance: function() {
if(!instance) {
instance = create();
}
return instance;
}
};
function Singleton () {
if(!instance) {
instance = intialize();
}
};
})();
25/40
12/20/2015
The create method is

private because we do not
want the client to access
this, however, notice that
the getInstance method is
public. Each officer worker
can generate a printer
instance by interacting
with the getInstance
method, like so:
var officePrinter = printer.getInstance
In AngularJS, Singletons
are prevalent, the most
notable being services,
factories, and providers.
Since they maintain state
and provides resource
accessing, creating two
instances defeats the point
of a shared
service/factory/provider.
26/40
12/20/2015
Race conditions occur in

multi-threaded
applications when more
than one thread tries to
access the same resource.
Singletons are susceptible
to race conditions, such
that if no instance were
initialized first, two threads
could then create two
objects instead of
returning and instance.
This defeats the purpose
of a singleton. Therefore,
developers must be privy
to synchronization when
implementing singletons
in multithreaded
applications.
Conclusion
Design patterns are
frequently used in larger
applications, though to
understand where one
27/40
12/20/2015
might be advantageous
over another, comes with
practice.
Before building any
application, you should
thoroughly think about
each actor and how they
interact with one another.
After reviewing the
Module, Prototype,
Observer, and Singleton
design patterns, you

should be able to identify
these patterns and use
them in the wild.
Scotchmas Day 2
Giveaway
28/40
12/20/2015
IT'S
OVER!
2,137
0/11
Scotchmug
Thiscontestisnolongeracceptingentries.
29/40
12/20/2015
(https://scotch.io/author/devan)
DEVAN PATEL
(HTTPS://SCOTCH.IO/AUTHOR/DEVAN)
(@DEVANP92
(HTTPS://TWITTER.COM/DEVANP92))
I'm an avid Javascript developer
which I write about here
(http://www.devanpatel.me). Feel
free to reach out to me on my
Twitter
(https://twitter.com/devanp92) or
check out the projects I work on
at my Github
(https://github.com/devanp92)!
View My Articles (https://scotch.io/author/devan)
30/40
12/20/2015
READ NEXT
(https://scotch.io/tutorials/building(https://scotch.io/baryour-own-
talk/s-o-l-i-d-
javascript-
the-first-five-
modal-
principles-of-
plugin)
object-
BUILDING
S.O.L.I.D:
YOUR OWN
THE FIRST 5
JAVASCRIPT
PRINCIPLES
MODAL
OF OBJECT
PLUGIN
ORIENTED
(HTTPS://SCOTCH.IO/TUTORIALS/BUILDINGDESIGN
YOUR-OWN(HTTPS://SCOTCH.IO/BARJAVASCRIPTTALK/S-O-LMODALI-D-THEPLUGIN)
FIRST-FIVEPRINCIPLESOF-OBJECTORIENTEDDESIGN)
(https://scotch.io/bar(https://scotch.io/bartalk/angular-
talk/changes-
material-vs-
and-reasons-
material-
behind-the-
design-lite)
new-scotch-
ANGULAR
CHANGES
MATERIAL
AND
VS.
REASONS
MATERIAL
BEHIND THE
DESIGN LITE
NEW
(HTTPS://SCOTCH.IO/BARSCOTCH.IO
TALK/ANGULARDESIGN
31/40
12/20/2015
MATERIALVSMATERIALDESIGNLITE)
(HTTPS://SCOTCH.IO/BARTALK/CHANGESANDREASONSBEHINDTHE-NEWSCOTCH-IO)
(https://scotch.io/bar(https://scotch.io/tutorials/googletalk/scotchmas-
material-
day-5-
design-input-
chromecast-
boxes-in-
jedi-bath-
css3)
SCOTCHMAS
GOOGLE
DAY 5
MATERIAL
CHROMECAST,
DESIGN
JEDI BATH
INPUT
ROBES, AND
BOXES IN
STAR WARS
CSS3
CODEPENS
(HTTPS://SCOTCH.IO/TUTORIALS/GOOGLE(HTTPS://SCOTCH.IO/BARMATERIALTALK/SCOTCHMASDESIGNDAY-5INPUTCHROMECASTBOXES-INJEDI-BATHCSS3)
ROBES-ANDSTAR-WARSCODEPENS)
scotch.io books presents:
MEAN MACHINE
32/40
12/20/2015
(https://leanpub.com/meanmachine)
Learn Node, Angular, Express,
and MongoDB from scratch.
No experience necessary.
Learn About the Book (https://leanpub.com/mean-machine)
SUBSCRIBE
FOLLOW LIKE
+1
(HTTPS://SCOTCH.IO/FEED)
(HTTP://TWITTER.COM/SCOTCH_IO)
(HTTP://WWW.FACEBOOK.COM/SCOTCHDEVELOP
(HTTP://PLUS.GOOGLE.COM/B/11385412
33/40
12/20/2015
Get valuable tips, articles, and

resources straight to your inbox.
Every Tuesday.
Email Address
Subscribe
Comments
Community
Recommend 5
Share
Login
SortbyBest
Jointhediscussion
skube 5daysago
Inyourveryfirstexampleyouhave:
return : {
// declare public variables and/or
}
Shouldn'ttherebenocolon?
2
Reply Share
DevanPatel>skube
8hoursago
HiSkube,
Firstoff,thanksforreadingthe
article.
Youarecorrectthereshouldnot
beacolon.Iwillreeditthepost.
Thankyou!
Reply Share
skube>DevanPatel
8hoursago
Np.Obviously,youknow
whatyouaredoingandit
wasasimpletypo.Ijustpoint
itoutforpeoplelikemewho
34/40
12/20/2015
itoutforpeoplelikemewho
easilygetconfused.
Reply Share
SergeyVoloshin 4daysago
JavaScript!It'llruntheworld!
1
Reply Share
gocreating adayago
Javascriptawesome!!
Reply Share
LeonidKolomiytsev 3daysago
Thanks,helpfulinformation)
Reply Share
TarunGarg 4daysago
Javascriptitsthenextbigthing...:D...
varmyFavLanguage="javascript"
Itwillruletheworld...x)
Reply Share
ChrisMathews 4daysago
Javascript,Python&R
Reply Share
Hisham 4daysago
Java&JS:))
Reply Share
Artsiom 4daysago
JavaScriptrulezzz!:))
Reply Share
AnastasiaSmirnova 4daysago
JSofcourse:)
Reply Share
M.Onurelik 4daysago
Javascript
Reply Share
MiguelLeite 4daysago
JavaScript:)
Reply Share
SerzN1 4daysago
35/40
12/20/2015
SerzN1 4daysago
"RevealingPrototypePattern"wrongcode
block!
Reply Share
MarcoGuglielmelli 4daysago
JavaScript!:)
Reply Share
YvesSchleich 4daysago
Agooddayhastostartwithscotch!
Reply Share
Mafisz 4daysago
PHP
Reply Share
Sarah 4daysago
AlwaysbetonJS)
Reply Share
mkdudeja 4daysago
document.getElementById("scotchmas
day2giveaway").innerHTML=
"JAVASCRIPT"
Reply Share
EltonVincent 4daysago
JSFTW!
Reply Share
RodrigoMoreno 4daysago
JavascriptFTW!
Reply Share
chadlefort 4daysago
JavaScript!
Reply Share
JD 4daysago
Javascript!!
Reply Share
36/40
12/20/2015
Reply Share
Rhadow 4daysago
JavaScript!
Reply Share
Yomi 4daysago
Javascriptbaby!
Reply Share
Matt 4daysago
Javascript!
Reply Share
TiagoWinehouse 4daysago
JS..NICE!!
Reply Share
ThibaultMaekelbergh 4daysago
Howistheprototypepatternevenrelevant
witheverythingES6gaveus?
Reply Share
morsaPT 4daysago
HeyDevan.Awesomearticle!
YouhaveanissueontheSingletonpattern
example.Youareusing`instance`on
getInstancemethodandthesameon
SingletonfunctionwhenIguessyoushould
beusing`printerInstance`.Canyoucheck?
Keepupwriting!:)
Reply Share
DevanPatel>morsaPT
8hoursago
HimorsaPT,
Thanksforthekindwords!
Kudostoyouforpointingitout!It
shouldbe'printerInstance'andnot
'instance'.
Reply Share
riozagreb 4daysago
jsftw
Reply Share
37/40
12/20/2015
Nick 4daysago
Javascriptforthewin!
Reply Share
DavorB. 4daysago
javascript
Reply Share
DjordjeAndzic 4daysago
Myfavoriteprogramminglanguageis
javascript.
Reply Share
NickGraz 4daysago
MyfavoritelanguageisPHP
Reply Share
SotirisKatsaniotis 5daysago
MyfavoriteprogramminglanguageisPHP
Reply Share
RizqyHidayat 5daysago
justgettingdeeperonjavascript.thanks!
Reply Share
Dill 5daysago
DefinitelyJavaScript
Reply Share
FleetNavTech 5daysago
AngularJS.
Reply Share
JonathanObino 5daysago
JSFTW!
Reply Share
NicoleLambon 5daysago
JavaScript,HTML,andCSSFTW!
Reply Share
AmirTugendhaft 5daysago
Python,theloveofmylife
Reply Share
38/40
12/20/2015
JairoJurado 5daysago
JavaScriptismyfavoritelanguage.Talk
aboutFrontandBackEnddevelopment
withonelanguage!
Reply Share
JustinSane 5daysago
ChooseJavascriptforsomuchWIN!
Reply Share
Cody 5daysago
JavaScriptiswhatIusemostbutIhaveto
sayIamenjoyingRubythemost.
Reply Share
5daysago
JS!
Reply Share
JohnH 5daysago
PHPismylanguageofchoice.
Reply Share
MarioGmez 5daysago
Myfavoriteprogramminglanguageis
JavaScript!
Reply Share
KostasKapenekakis 5daysago
Thanks!
Reply Share
RenanBorges 5daysago
License (/license)
Advertise with Us (/advertise)
About (/about)
Join Us on Slack (https://scotch-slack.herokuapp.com/)
39/40
12/20/2015
Store (http://shop.scotch.io)
Write for Us (/write-for-us)
Contact Us (/contact-us)
JOIN THE NEWSLETTER
Web design/development tutorials and news from around the web.
Email Address
Subscribe
Hire Us (http://bit.ly/18ib8jR)
(https://leanpub.com/mean-machine)
LEARN NODE AND ANGULAR

Scotch's new JavaScript eBook. Learn the full JavaScript stack.
Get the Book (https://leanpub.com/mean-machine)
Web design and development tutorials for the masses.

Scotch.io | Proudly hosted by Digital Ocean (https://www.digitalocean.com/?
refcode=eaf67777e85b)
40/40

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) - Scotch

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) - Scotch

Diunggah oleh

Hak Cipta:

Format Tersedia

12/20/2015

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

Bar Talk (https://scotch.io/category/bar-talk)

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

The Scotchmas Day 2

giveaway can be found at

Every developer strives to

readable, and reusable

code. Code structuring

becomes more important

larger. Design patterns

prove crucial to solving

for common issues in a

JavaScript web developers

frequently interact with

design patterns, even

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

Although there is a diverse

list of design patterns used

JavaScript developers tend

to use some patterns

customarily more than

In this post, I want to

discuss these common

patterns to expose ways to

and dive deeper into the

LEARN NODE AND AN

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

the following key points:

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

provides loose coupling to

lesser-know protected and

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

return an object instead of

Here we instantiate the

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

var HTMLChanger = (function() {

the returned object and

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

A variation of the module

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

var Exposer = (function() {

Although this looks much

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

Similarly, the public

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

The objects created are

case of the prototype

Prototype Design Pattern

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

This UML describes how a

var TeslaModelS = function() {

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

The constructor allows the

var TeslaModelS = function() {

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

var TeslaModelS = function() {

Note how the functions

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch

benefit is decoupling the

Observer Design Pattern