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

21/12/2015
4 JavaScript Design Patterns You Should Know (+ Scotchmas Day 2) | Scotch
(https://scotch.io/)
(https://scotch.io/bar-talk/4-javascriptdesign-patterns-you-should-know#)
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 (https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-
know#disqus_thread)
Bar Talk (https://scotch.io/category/bar-talk)
javascript
(https://scotch.io/tag/javascript)
911
shares
0
911
(https://scotch.io/bar(https://scotch.io
talk/4- talk/4javascriptjavascriptdesign- designfile:///home/drupalio/Escritorio/4%20JavaScript%20Design%20Patterns%20You%20Should%20Know%20(+%20Scotchmas%20Day
1/44
21/12/2015
patterns-patternsyou-
you-
should- should-
ttps://scotch.io/bar-
know#) know#)
avascript-design-
-you-should-know#)
ps://scotch.io/bar-
avascript-design-
-you-should-know#)
AD
Design Pattern
The Scotchmas Day 2

giveaway
(https://scotch.io/bar-talk/4-
(https://www.fa
(https://tw
(http
javascript-design-patternsyou-shouldknow#scotchmas-day-2giveaway) can be found at

the end of this article.
Every developer strives to
write maintainable,
readable, and reusable code.
Scroll to Code
Top (https://scotch.io/bar-talk/4-javascript-design-patterns-youstructuring becomes
more
should-know#)
important as
applications become larger.

Design patterns prove
(https://scotch.io/boo
your-first-node-js-
Subscribe and get our
eBook: Build Your First N

App
(https://scotch.io/books
your-first-node-js-a
file:///home/drupalio/Escritorio/4%20JavaScript%20Design%20Patterns%20You%20Should%20Know%20(+%20Scotchmas%20Day
2/44
21/12/2015
crucial to solving this
Email Address
challenge providing an
Subscribe
organization structure for

common issues in a
particular circumstance.
JavaScript web developers

frequently interact with
design patterns, even
POPULAR ON SCOT
unknowingly, when creating
Creating Deskto
applications.
Applications Wi
AngularJS and G
Although there is a diverse

list of design patterns used
in certain circumstances,
Electron
(https://scotch.io/tutorials/cr
desktop-applications-with-an
and-github-electron)
JavaScript developers tend to
Create a MEAN
Google Map Ap
use some patterns

customarily more than
others.
(https://scotch.io/tutorials/m
mean-apps-with-google-map
Containerized T
Node Applicatio
In this post, I want to discuss

these common patterns to
expose ways to improve
your programming
Dockunit
(https://scotch.io/tutorials/co
testing-for-node-applications
dockunit)
repertoire and dive deeper
Aesthetic Sass 3
into the JavaScript internals.
Typography and
Rhythm
3/44
21/12/2015
The design patterns in
(https://scotch.io/tutorials/ae
question include the
sass-3-typography-and-vertic
following:
rhythm)
Create a Custom
Player Element
Module
Polymer
Prototype
Observer
custom-audio-player-elemen
Singleton
polymer)
Create a Real-T
Shoutbox with L
Events
Each pattern consists of

many properties. However, I
will emphasize the following
real-time-shoutbox-with-lara
key points:
events)
Simbla: A Next
Generation Res
Website Builder
1. Context: Where/under
what circumstances is
(https://scotch.io/tutorials/sim
the pattern used?
next-generation-responsive-
2. Problem: What are we
builder)
trying to solve?
3. Solution: How does
using this pattern solve
our proposed problem?
4. Implementation: What
does the
implementation look
LEARN NODE AND ANG

WITH OUR EBOO
like?
Module Design
4/44
21/12/2015
Module Design
Pattern
(https://scotch.io/bartalk/4-javascriptdesign-patternsyou-shouldknow#moduledesign-pattern)
JavaScript modules are the
most prevalently used
design patterns for keeping
particular pieces of code
independent of other
components. This provides
(http://bit.ly/1FxJ3
A VAGRANT LAMP ST
THAT JUST WORK
loose coupling to 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.
(http://bit.ly/1PY0
5/44
21/12/2015
The module pattern allows

for public and private (plus
DEAD SIMPLE
OFF-CANVAS PANE
the 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 return an
object instead of a function).
This is what it looks like:
(http://bit.ly/1QJLL
SCOTCH.IO STICKER
(function() {
// declare private variables and/or functions
return {
// declare public variables and/or functions
}
})();
6/44
21/12/2015
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:
(http://shop.scotch
7/44
21/12/2015
var HTMLChanger = (function() {

var contents = 'contents'
var changeHTML = function() {
var element = document.getElementById
element.innerHTML = contents;
}
THE NEWSLETTER
Subscribe and get our free

Build Your First Node
return {
callChangeHTML: function() {
changeHTML();
(https://scotch.io/books/bu
first-node-js-app)
Email Address
console.log(contents);
}
};
})();
GIVE THE GIFT OF CODE
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
(http://synd.co/1Oj5DiJ)
(https://www.facebook
(https://twitter.co
(https://feed
8/44
21/12/2015
Revealing Module
Pattern
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:
9/44
21/12/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 e
Exposer.second();
// Output: Inside a private method!
Exposer.methodToExpose; // undefined
Although this looks much

cleaner, an obvious
disadvantage is unable to
reference the private
file:///home/drupalio/Escritorio/4%20JavaScript%20Design%20Patterns%20You%20Should%20Know%20(+%20Scotchmas%20Da
10/44
21/12/2015
methods. This can pose unit

testing challenges. Similarly,
the public behaviors are
non-overridable.
Prototype Design
Pattern
(https://scotch.io/bartalk/4-javascriptdesign-patternsyou-shouldknow#prototypedesign-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.or
g/enUS/docs/Web/JavaScript/Inh
11/44
21/12/2015
eritance_and_the_prototype_
chain). The prototype model
is used mainly for creating
objects in performanceintensive situations.
The objects created are
clones (shallow clones) of
the original object that are
passed around. One use
case of the prototype
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.
12/44
21/12/2015

in terface
Client
Prototype
imp o rt
o p eratio n ()
clo n e()
Ob jectp =p ro to ty p e.clo n e()
ConcretePrototype1
ConcretePrototype2
clo n e()
clo n e()
retu rn co p y o fself
retu rn co p y o fself
Prototype Design Pattern on
Wikipedia (./4 JavaScript

Design Patterns You Should
Know (+ Scotchmas Day 2) _
Scotch_files/Prototype_UML.
svg)
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:
13/44
21/12/2015
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
}
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
14/44
21/12/2015
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
Pattern
Similar to Module pattern,
the Prototype pattern also
has a revealing variation. The
Revealing Prototype Pattern
provides encapsulation with
15/44
21/12/2015
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:
16/44
21/12/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
17/44
21/12/2015
prototypical inheritance,
there is no need to rewrite
underlying features.
Observer Design
Pattern
(https://scotch.io/bartalk/4-javascriptdesign-patternsyou-shouldknow#observerdesign-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.
18/44
21/12/2015
Another prime example is

the model-view-controller
(MVC) architecture; The view
updates when the model
changes. One benefit is
decoupling the view from
the model to reduce
dependencies.
Observer Design Pattern on
Wikipedia (./4 JavaScript

Design Patterns You Should
Know (+ Scotchmas Day 2) _
Scotch_files/1000pxObserver.svg.png)
As shown in the UML
diagram, the necessary
objects are the subject,
observer, and concrete
objects. The subject contains

19/44
21/12/2015
references to the concrete

observers to notify for any
changes. The Observer
object is an abstract class
that allows 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:
};
20/44
21/12/2015
With the observer pattern, it

is important to distinguish
the independent object or
the subject.
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
21/44
21/12/2015
is implemented:
22/44
21/12/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();
23/44
21/12/2015
var observer1 = new Observer();

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
24/44
21/12/2015
application-specific events
that can pass custom
arguments containing values
needed 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
25/44
21/12/2015
observers are notified by

implementing a handler
similar to the subject.
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
(https://scotch.io/bartalk/4-javascriptdesign-patternsyou-shouldknow#singleton)
A Singleton only allows for a
single instantiation, but
many instances of the same
object. The Singleton
restricts clients from
creating multiple objects,
26/44
21/12/2015
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 share
one printer (instance). By
sharing one printer, they
share the same resources.
27/44
21/12/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();
}
};
28/44
21/12/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
29/44
21/12/2015
two instances defeats the

point of a shared
service/factory/provider.
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
(https://scotch.io/bartalk/4-javascriptdesign-patterns-
30/44
21/12/2015
design-patternsyou-shouldknow#conclusion)
Design patterns are
frequently used in larger
applications, though to
understand where one
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
31/44
21/12/2015
Scotchmas Day 2
Giveaway
(https://scotch.io/bartalk/4-javascriptdesign-patternsyou-shouldknow#scotchmasday-2-giveaway)
IT'S
OVER!
2,137
0/11
Scotchmug
Thiscontestisnolongeracceptingentries.
32/44
21/12/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
33/44
21/12/2015
check out the projects I work on at

my Github
(https://github.com/devanp92)!
View My Articles (https://scotch.io/author/devan)
READ NEXT
(https://scotch.io/tutorials/building(https://scotch.io/baryour-own-
talk/s-o-l-i-d-
javascript-
the-first-five-
modal-plugin)
principles-ofobject-
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/bar-
34/44
21/12/2015
(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
MATERIAL(HTTPS://SCOTCH.IO/BARVSTALK/CHANGESMATERIALANDDESIGN-LITE)
REASONSBEHIND-THENEWSCOTCH-IO)
(https://scotch.io/bar(https://scotch.io/tutorials/googletalk/scotchmas-
material-
day-5-
design-input-
chromecast-
boxes-in-css3)
jedi-bathSCOTCHMAS
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-5CHROMECASTJEDI-BATHfile:///home/drupalio/Escritorio/4%20JavaScript%20Design%20Patterns%20You%20Should%20Know%20(+%20Scotchmas%20Da
35/44
21/12/2015
JEDI-BATHROBES-ANDSTAR-WARSCODEPENS)
INPUTBOXES-INCSS3)
(https://leanpub.com/meanmachine)
scotch.io books presents:
MEAN MACHINE
Learn Node, Angular, Express, and
MongoDB from scratch.
No experience necessary.
Learn About the Book (https://leanpub.com/mean-machine)
36/44
21/12/2015
SUBSCRIBE
FOLLOW LIKE
+1
(HTTPS://SCOTCH.IO/FEED)
(HTTP://TWITTER.COM/SCOTCH_IO)
(HTTP://WWW.FACEBOOK.COM/SCOTCHDEVELOPM
(HTTP://PLUS.GOOGLE.COM/B/113854128
Get valuable tips, articles, and

resources straight to your inbox. Every
Tuesday.
Email Address
Subscribe
Comments
Community
Recommend 5
Share
Login
SortbyBest
Jointhediscussion
skube 4daysago
Inyourveryfirstexampleyouhave:
return : {
// declare public variables and/or functions
}
37/44
21/12/2015
Shouldn'ttherebenocolon?
2
Reply Share
DevanPatel>skube 6hoursago
HiSkube,
Firstoff,thanksforreadingthearticle.
Youarecorrectthereshouldnotbea
colon.Iwillreeditthepost.
Thankyou!
Reply Share
skube>DevanPatel
6hoursago
Np.Obviously,youknowwhat
youaredoinganditwasa
simpletypo.Ijustpointitoutfor
peoplelikemewhoeasilyget
confused.
Reply Share
SergeyVoloshin 4daysago
JavaScript!It'llruntheworld!
1
Reply Share
gocreating 20hoursago
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
38/44
21/12/2015
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
"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("scotchmasday2
giveaway").innerHTML="JAVASCRIPT"
39/44
21/12/2015
Reply Share
EltonVincent 4daysago
JSFTW!
Reply Share
RodrigoMoreno 4daysago
JavascriptFTW!
Reply Share
chadlefort 4daysago
JavaScript!
Reply Share
JD 4daysago
Javascript!!
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
Howistheprototypepatternevenrelevantwith
everythingES6gaveus?
Reply Share
morsaPT 4daysago
40/44
21/12/2015
morsaPT 4daysago
HeyDevan.Awesomearticle!
YouhaveanissueontheSingletonpattern
example.Youareusing`instance`on
getInstancemethodandthesameonSingleton
functionwhenIguessyoushouldbeusing
`printerInstance`.Canyoucheck?
Keepupwriting!:)
Reply Share
DevanPatel>morsaPT
6hoursago
HimorsaPT,
Thanksforthekindwords!
Kudostoyouforpointingitout!Itshould
be'printerInstance'andnot'instance'.
Reply Share
riozagreb 4daysago
jsftw
Reply Share
Nick 4daysago
Javascriptforthewin!
Reply Share
DavorB. 4daysago
javascript
Reply Share
DjordjeAndzic 4daysago
Myfavoriteprogramminglanguageisjavascript.
Reply Share
NickGraz 4daysago
MyfavoritelanguageisPHP
Reply Share
SotirisKatsaniotis 4daysago
MyfavoriteprogramminglanguageisPHP
Reply Share
RizqyHidayat 4daysago
justgettingdeeperonjavascript.thanks!
41/44
21/12/2015
justgettingdeeperonjavascript.thanks!
Reply Share
Dill 4daysago
DefinitelyJavaScript
Reply Share
FleetNavTech 4daysago
AngularJS.
Reply Share
JonathanObino 4daysago
JSFTW!
Reply Share
NicoleLambon 4daysago
JavaScript,HTML,andCSSFTW!
Reply Share
AmirTugendhaft 4daysago
Python,theloveofmylife
Reply Share
JairoJurado 4daysago
JavaScriptismyfavoritelanguage.Talkabout
FrontandBackEnddevelopmentwithone
language!
Reply Share
JustinSane 4daysago
ChooseJavascriptforsomuchWIN!
Reply Share
Cody 4daysago
JavaScriptiswhatIusemostbutIhavetosayI
amenjoyingRubythemost.
Reply Share
4daysago
JS!
Reply Share
JohnH 4daysago
PHPismylanguageofchoice.
Reply Share
42/44
21/12/2015
Reply Share
MarioGmez 4daysago
Myfavoriteprogramminglanguageis
JavaScript!
Reply Share
KostasKapenekakis 4daysago
Thanks!
Reply Share
RenanBorges 4daysago
nice
Reply Share
Loadmorecomments
WHAT'STHIS?
ALSOONSCOTCH
LearnWebRTC:Build
aRealTimeTicTac
Toe(
21comments4daysago
MakingMEANApps
withGoogleMaps(Part
II)
3comments2monthsago
JulieKnowlesI'd
AlexeyZakharov
lovetoteachmyson
Thanksforthe
(https://www.facebook.com/scotchdevelopment)
(https://twitter.com/scotch_io)
(https://plus.google.com/+ScotchIo/posts)
(http://feeds.feedblitz.com/scotch_io)
License (https://scotch.io/license)
Advertise with Us (https://scotch.io/advertise)
About (https://scotch.io/about)
Join Us on Slack (https://scotch-slack.herokuapp.com/)
Store (http://shop.scotch.io/)
Write for Us (https://scotch.io/write-for-us)
43/44
21/12/2015
Contact Us (https://scotch.io/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)
44/44

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

21/12/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

javascript-design-patternsyou-shouldknow#scotchmas-day-2giveaway) can be found at

applications become larger.

Subscribe and get our

eBook: Build Your First N

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

crucial to solving this

organization structure for

JavaScript web developers

unknowingly, when creating

Although there is a diverse

JavaScript developers tend to

use some patterns

In this post, I want to discuss

repertoire and dive deeper

into the JavaScript internals.

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

The design patterns in

question include the

Each pattern consists of

will emphasize the following

the pattern used?

2. Problem: What are we

LEARN NODE AND ANG

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

loose coupling to support

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

The module pattern allows

the lesser-know protected

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

Here we instantiate the

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

var HTMLChanger = (function() {

Subscribe and get our free

GIVE THE GIFT OF CODE

the returned object and can

However, when outside the

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

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

methods. This can pose unit

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

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

Ob jectp =p ro to ty p e.clo n e()

Prototype Design Pattern on

Wikipedia (./4 JavaScript

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

var TeslaModelS = function() {

The constructor allows the

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

way to extend functions on

var TeslaModelS = function() {

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

public and private members

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

var TeslaModelS = function() {

Note how the functions stop