-
Notifications
You must be signed in to change notification settings - Fork 791
/
index.html
9005 lines (6682 loc) · 440 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Learning JavaScript Design Patterns</title>
<meta name="description" content="An open-source book on JavaScript Design Patterns">
<meta name="author" content="Addy Osmani">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/codecode/codecode.css" />
<!-- endbower -->
<link rel="stylesheet" href="styles/style.css" >
<link rel="stylesheet" href="styles/shCore.css">
<link rel="stylesheet" href="styles/shThemeRDark.css">
<link rel="stylesheet" href="styles/sausage.css">
<link rel="stylesheet" href="styles/base.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container inner wrap">
<header>
<p>
<h1 class="booktitle title">Learning JavaScript Design Patterns</h1>
<h3 class="booktitle author">
A book by <a href="http://twitter.com/addyosmani">Addy Osmani</a>
</h3>
<h2 class="booktitle edition">Volume 1.5.4</h2>
<p class="booktitle"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.com/resources/essentialjsdesignpatterns/book/" data-count="horizontal" data-via="addyosmani">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
<p class="copyright">
Copyright © Addy Osmani 2014.
</p>
<p class="copyright"><em>Learning JavaScript Design Patterns</em> is released under a <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Creative Commons Attribution-Noncommercial-No Derivative Works 3.0</a> unported license. It is available for purchase via <a href="http://shop.oreilly.com/product/0636920025832.do">O'Reilly</a> Media but will remain available for both free online and as a physical (or eBook) purchase for readers wishing to support the project.</p>
<p><img src="../cover/cover.jpg" width="300px" alt="Book cover for Learning JavaScript Design Patterns"></p>
<p class="copyright"> </p>
<a id="reviews" href="http://shop.oreilly.com/product/0636920025832/ReviewSubmit.do?sortby=publicationDate?pageId=0636920025832.IP"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://addyosmani.github.com/backbone-fundamentals/img/helpful.png" alt="Was this helpful? We'd love you to write a review."></a>
</header>
<div class="content">
<h1>Preface</h1>
<p>Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language.</p>
<p>One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve.</p>
<p>Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others.</p>
<p>In this book we will explore applying both classical and modern design patterns to the JavaScript programming language.</p>
<p> </p>
<h2>Target Audience</h2>
<p>This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language.</p>
<p>Some of the concepts covered (closures, prototypal inheritance) will assume a level of basic prior knowledge and understanding. If you find yourself needing to read further about these topics, a list of suggested titles is provided for convenience.</p>
<p>If you would like to learn how to write beautiful, structured and organized code, I believe this is the book for you.</p>
<h2>Acknowledgments</h2>
<p>I will always be grateful for the talented technical reviewers who helped review and improve this book, including those from the community at large. The knowledge and enthusiasm they brought to the project was simply amazing. The official technical reviewers tweets and blogs are also a regular source of both ideas and inspiration and I wholeheartedly recommend checking them out.</p>
<p>
<ul>
<li>Nicholas Zakas (<a href="http://nczonline.net/">http://nczonline.net</a>, <a href="http://twitter.com/slicknet">@slicknet</a>)</li>
<li>Andrée Hansson (<a href="http://andreehansson.se/">http://andreehansson.se</a>, <a href="http://twitter.com/peolanha">@peolanha</a>)</li>
<li>Luke Smith (<a href="http://lucassmith.name">http://lucassmith.name</a>, <a href="http://twitter.com/ls_n">@ls_n</a>)</li>
<li>Eric Ferraiuolo (<a href="http://ericf.me/">http://ericf.me/</a>, <a href="https://twitter.com/ericf">@ericf</a>)</li>
<li>Peter Michaux (<a href="http://michaux.ca">http://michaux.ca</a>, <a href="http://twitter.com/petermichaux">@petermichaux</a>)</li>
<li>Alex Sexton (<a href="http://alexsexton.com">http://alexsexton.com</a>, <a href="http://twitter.com/slexaxton">@slexaxton</a>)</li>
</ul>
</p>
<p>I would also like to thank Rebecca Murphey (<a href="http://rebeccamurphey.com">http://rebeccamurphey.com</a>, <a href="http://twitter.com/rmurphey">@rmurphey</a>) for providing the inspiration to write this book and more importantly, continue to make it both available on GitHub and via O'Reilly.</p>
<p>Finally, I would like to thank my wonderful wife Ellie, for all of her support while I was putting together this publication.</p>
<h2>Credits</h2>
<p>Whilst some of the patterns covered in this book were implemented based on personal experience, many of them have been previously identified by the JavaScript community. This work is as such the production of the combined experience of a number of developers. Similar to Stoyan Stefanov's logical approach to preventing interruption of the narrative with credits (in <em>JavaScript Patterns</em>), I have listed credits and suggested reading for any content covered in the references section.</p>
<p>If any articles or links have been missed in the list of references, please accept my heartfelt apologies. If you contact me I'll be sure to update them to include you on the list.</p>
<h2>Reading</h2>
<p>
Whilst this book is targeted at both beginners and intermediate developers, a basic understanding of JavaScript fundamentals is assumed. Should you wish to learn more about the language, I am happy to recommend the following titles:</p>
<ul>
<li><em>JavaScript: The Definitive Guide</em> by David Flanagan</li>
<li><em>Eloquent JavaScript</em> by Marijn Haverbeke</li>
<li><em>JavaScript Patterns</em> by Stoyan Stefanov</li>
<li><em>Writing Maintainable JavaScript</em> by Nicholas Zakas</li>
<li><em>JavaScript: The Good Parts</em> by Douglas Crockford</li>
</ul>
<p> </p>
<h1><em>Table Of Contents</em></h1>
<div id="contents-list">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#whatisapattern">What is a Pattern?</a></li>
<li><a href="#patternity">"Pattern"-ity Testing, Proto-Patterns & The Rule Of Three</a></li>
<li><a href="#designpatternstructure">The Structure Of A Design Pattern</a></li>
<li><a href="#writingdesignpatterns">Writing Design Patterns</a></li>
<li><a href="#antipatterns">Anti-Patterns</a></li>
<li><a href="#categoriesofdesignpatterns">Categories Of Design Pattern</a></li>
<li><a href="#summarytabledesignpatterns">Summary Table Of Design Pattern Categorization</a></li>
<li><a href="#designpatternsjavascript">JavaScript Design Patterns
</a>
<ul>
<li class="subitem"><a href="#constructorpatternjavascript">Constructor Pattern</a></li>
<li class="subitem"><a href="#modulepatternjavascript">Module Pattern</a></li>
<li class="subitem"><a href="#revealingmodulepatternjavascript">Revealing Module Pattern</a></li>
<li class="subitem"><a href="#singletonpatternjavascript">Singleton Pattern</a></li>
<li class="subitem"><a href="#observerpatternjavascript">Observer Pattern</a></li>
<li class="subitem"><a href="#mediatorpatternjavascript">Mediator Pattern</a></li>
<li class="subitem"><a href="#prototypepatternjavascript">Prototype Pattern</a></li>
<li class="subitem"><a href="#commandpatternjavascript">Command Pattern</a></li>
<li class="subitem"><a href="#facadepatternjavascript">Facade Pattern</a></li>
<li class="subitem"><a href="#factorypatternjavascript">Factory Pattern</a></li>
<li class="subitem"><a href="#mixinpatternjavascript">Mixin Pattern</a>
<li class="subitem"><a href="#decoratorpatternjavascript">Decorator Pattern</a></li>
<li class="subitem"><a href="#detailflyweight">Flyweight Pattern</a>
</ul>
</li>
<li><a href="#detailmvcmvp">JavaScript MV* Patterns</a>
<ul>
<li class="subitem"><a href="#detailmvc">MVC Pattern</a>
<li class="subitem"><a href="#detailmvp">MVP Pattern</a>
<li class="subitem"><a href="#detailmvvm">MVVM Pattern</a>
</ul>
</li>
<li><a href="#modularjavascript">Modern Modular JavaScript Design Patterns</a>
<ul>
<li class="subitem"><a href="#detailamd">AMD</a>
<li class="subitem"><a href="#detailcommonjs">CommonJS</a>
<li class="subitem"><a href="#detailharmony">ES Harmony</a>
</ul>
</li>
<li><a href="#designpatternsjquery">Design Patterns In jQuery</a>
<ul>
<li class="subitem"><a href="#compositepatternjquery">Composite Pattern</a></li>
<li class="subitem"><a href="#wrapperpatternjquery">Adapter Pattern</a></li>
<li class="subitem"><a href="#facadepatternjquery">Facade Pattern</a></li>
<li class="subitem"><a href="#observerpatternjquery">Observer Pattern</a></li>
<li class="subitem"><a href="#iteratorpatternjquery">Iterator Pattern</a></li>
<li class="subitem"><a href="#lazyinitialisationjquery">Lazy Initialization Pattern</a></li>
<li class="subitem"><a href="#proxypatternjquery">Proxy Pattern</a></li>
<li class="subitem"><a href="#builderpatternjquery">Builder Pattern</a></li>
</ul>
</li>
<li><a href="#jquerypluginpatterns">jQuery Plugin Design Patterns</a></li>
<li><a href="#detailnamespacing">JavaScript Namespacing Patterns</a></li>
<li><a href="#conclusions">Conclusions</a></li>
<li><a href="#references">References</a></li>
</ul>
</div>
</p>
<p> </p>
<h1 id="introduction">
<a href="#introduction" class="subhead-link">#</a>
Introduction
</h1>
<p>One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.</p>
<p>In the first part of this book, we will explore the history and importance of design patterns which can really be applied to any programming language. If you're already sold on or are familiar with this history, feel free to skip to the chapter "<a href="#whatisapattern">What is a Pattern?</a>" to continue reading.</p>
<p>Design patterns can be traced back to the early work of an architect named <a href="http://en.wikipedia.org/wiki/Christopher_Alexander">Christopher Alexander</a>. He would often write publications about his experience in solving design issues and how they related to buildings and towns. One day, it occurred to Alexander that when used time and time again, certain design constructs lead to a desired optimal effect. </p>
<p>In collaboration with Sara Ishikawa and Murray Silverstein, Alexander produced a pattern language that would help empower anyone wishing to design and build at any scale. This was published back in 1977 in a paper titled "A Pattern Language", which was later released as a complete hardcover <a href="http://www.amazon.co.uk/Pattern-Language-Buildings-Construction-Environmental/dp/0195019199/ref=sr_1_1?s=books&ie=UTF8&qid=1329440685&sr=1-1">book</a>. </p>
<p>Some 30 years ago, software engineers began to incorporate the principles Alexander had written about into the first documentation about design patterns, which was to be a guide for novice developers looking to improve their coding skills. It's important to note that the concepts behind design patterns have actually been around in the programming industry since its inception, albeit in a less formalized form. </p>
<p>One of the first and arguably most iconic formal works published on design patterns in software engineering was a book in 1995 called <em>Design Patterns: Elements Of Reusable Object-Oriented Software</em>. This was written by <a href="http://en.wikipedia.org/wiki/Erich_Gamma">Erich Gamma</a>,<a href="http://en.wikipedia.org/w/index.php?title=Richard_Helm&action=edit&redlink=1"> Richard Helm</a>,<a href="http://en.wikipedia.org/wiki/Ralph_Johnson"> Ralph Johnson</a> and<a href="http://en.wikipedia.org/wiki/John_Vlissides"> John Vlissides</a> - a group that became known as the Gang of Four (or GoF for short). </p>
<p>The GoF's publication is considered quite instrumental to pushing the concept of design patterns further in our field as it describes a number of development techniques and pitfalls as well as providing twenty-three core Object-Oriented design patterns frequently used around the world today. We will be covering these patterns in more detail in the section "Categories of Design Patterns".</p>
<p>In this book, we will take a look at a number of popular JavaScript design patterns and explore why certain patterns may be more suitable for your projects than others. Remember that patterns can be applied not just to vanilla JavaScript (i.e standard JavaScript code), but also to abstracted libraries such as <a href="http://jquery.com">jQuery</a> or <a href="http://dojotoolkit.org">dojo</a> as well. Before we begin, let’s look at the exact definition of a "pattern" in software design.</p>
<p> </p>
<p> </p>
<h1 id="whatisapattern">What is a Pattern?</h1>
<p>A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript web applications. Another way of looking at patterns are as templates for how we solve problems - ones which can be used in quite a few different situations.</p>
<p>So, why is it important to understand patterns and be familiar with them? Design patterns have three main benefits: </p>
<ol start="1" type="1">
<ol>
<ol>
<li><strong>Patterns are proven solutions:</strong> They provide solid approaches to solving issues in software development using proven techniques that reflect the experience and insights the developers that helped define them bring to the pattern.</li>
<li><strong>Patterns can be easily reused: </strong>A pattern usually reflects an out of the box solution that can be adapted to suit our own needs. This feature makes them quite robust.</li>
<li><strong>Patterns can be expressive: </strong>When we look at a pattern there’s generally a set structure and <em>vocabulary</em> to the solution presented that can help express rather large solutions quite elegantly.</li>
</ol>
</ol>
</ol>
<p>Patterns are <strong>not</strong> an exact solution. It’s important that we remember the role of a pattern is merely to provide us with a solution scheme. Patterns don’t solve all design problems nor do they replace good software designers, however, they <strong>do</strong> support them. Next we’ll take a look at some of the other advantages patterns have to offer. </p>
<ul>
<li><strong>Reusing patterns assists in preventing minor issues that can cause major problems in the application development process. </strong>What this means is when code is built on proven patterns, we can afford to spend less time worrying about the structure of our code and more time focusing on the quality of our overall solution. This is because patterns can encourage us to code in a more structured and organized fashion avoiding the need to refactor it for cleanliness purposes in the future.</li>
</ul>
<ul>
<li><strong>Patterns can provide generalized solutions which are documented in a fashion that doesn't require them to be tied to a specific problem.</strong> This generalized approach means that regardless of the application (and in many cases the programming language) we are working with, design patterns can be applied to improve the structure of our code.</li>
<li><strong>Certain patterns can actually decrease the overall file-size footprint of our code by avoiding repetition. </strong>By encouraging developers to look more closely at their solutions for areas where instant reductions in <span id="internal-source-marker_0.982673292361492">repetition</span> can be made, e.g. reducing the number of functions performing similar processes in favor of a single generalized function, the overall size of our codebase can be decreased. This is also known as making code more <em>DRY</em>.</li>
<li><strong>Patterns add to a developer's vocabulary, which makes communication faster.</strong></li>
<li><strong>Patterns that are frequently used can be improved over time by harnessing the collective experiences other developers using those patterns contribute back to the design pattern community.</strong> In some cases this leads to the creation of entirely new design patterns whilst in others it can lead to the provision of improved guidelines on how specific patterns can be best used. This can ensure that pattern-based solutions continue to become more robust than ad-hoc solutions may be.</li>
</ul>
<p> </p>
<h3>We already use patterns everyday</h3>
<p>
To understand how useful patterns can be, let's review a very simple element selection problem that the jQuery library solves for us. </p>
<p>
Imagine that we have a script where for each DOM element found on a page with class "foo" we wish to increment a counter. What's the most efficient way to query for this collection of elements? Well, there are a few different ways this problem could be tackled:</p>
<p>
<ol>
<li>Select all of the elements in the page and then store references to them. Next, filter this collection and use regular expressions (or another means) to only store those with the class "foo".</li>
<li>
Use a modern native browser feature such as <code>querySelectorAll()</code> to select all of the elements with the class "foo".</li>
<li>Use a native feature such as <code>getElementsByClassName()</code> to similarly get back the desired collection. </li>
</ol>
</p>
<p>
So, which of these options is the fastest? It's actually option 3. by a factor of 8-10 times the <a href="http://jsperf.com/getelementsbyclassname-vs-queryselectorall/5">alternatives</a>. In a real-world application however, 3. will not work in versions of Internet Explorer below 9 and thus it's necessary to use 1. where both 2. and 3. aren't supported.</p>
<p>
Developers using jQuery don't have to worry about this problem however, as it's luckily abstracted away for us using the <em>Facade</em> pattern. As we'll review in more detail later, this pattern provides a simple set of abstracted interfaces (e.g <code>$el.css()</code>, <code>$el.animate()</code>) to several more complex underlying bodies of code. As we've seen, this means less time having to be concerned about implementation level details.</p>
<p>Behind the scenes, the library simply opts for the most optimal approach to selecting elements depending on what our current browser supports and we just consume the abstraction layer.</p>
<p>We're probably all also familiar with jQuery's <code>$("selector")</code>. This is significantly more easy to use for selecting HTML elements on a page versus having to manually opt for <code>getElementById()</code>, <code>getElementsByClassName()</code>, <code>getElementByTagName</code> and so on.</p>
<p>Although we know that <code>querySelectorAll()</code> attempts to solve this problem, compare the effort involved in using jQuery's Facade interfaces vs. selecting the most optimal selection paths ourselves. There's no contest! Abstractions using patterns can offer real-world value.</p>
<p>
We'll be looking at this and more design patterns later on in the book.</p>
<p> </p>
<h1 id="patternity">"Pattern"-ity Testing, Proto-Patterns & The Rule Of Three</h1>
<p>
Remember that not every algorithm, best practice or solution represents what might be considered a complete pattern. There may be a few key ingredients here that are missing and the pattern community is generally wary of something claiming to be one unless it has been heavily vetted. Even if something is presented to us which <strong>appears</strong> to meet the criteria for a pattern, it should not be considered one until it has undergone suitable periods of scrutiny and testing by others.</p>
<p>
Looking back upon the work by Alexander once more, he claims that a pattern should both be a process and a "thing". This definition is obtuse on purpose as he follows by saying that it is the process which should create the "thing". This is a reason why patterns generally focus on addressing a visually identifiable structure i.e we should be able to visually depict (or draw) a picture representing the structure that placing the pattern into practice results in. </p>
<p>
In studying design patterns, it's not irregular to come across the term "proto-pattern". What is this? Well, a pattern that has not yet been known to pass the "pattern"-ity tests is usually referred to as a proto-pattern. Proto-patterns may result from the work of someone that has established a particular solution that is worthy of sharing with the community, but may not have yet had the opportunity to have been vetted heavily due to its very young age.</p>
<p>
Alternatively, the individual(s) sharing the pattern may not have the time or interest of going through the "pattern"-ity process and might release a short description of their proto-pattern instead. Brief descriptions or snippets of this type of pattern are known as patlets.</p>
<p>
The work involved in fully documenting a qualified pattern can be quite daunting. Looking back at some of the earliest work in the field of design patterns, a pattern may be considered "good" if it does the following: </p>
<ul type="disc">
<li><strong>Solves a particular problem</strong>: Patterns are not supposed to just capture principles or strategies. They need to capture solutions. This is one of the most essential ingredients for a good pattern.</li>
<li><strong>The solution to this problem cannot be obvious</strong>: We can find that problem-solving techniques often attempt to derive from well-known first principles. The best design patterns usually provide solutions to problems indirectly - this is considered a necessary approach for the most challenging problems related to design.</li>
<li><strong>The concept described must have been proven</strong>: Design patterns require proof that they function as described and without this proof the design cannot be seriously considered. If a pattern is highly speculative in nature, only the brave may attempt to use it.</li>
<li><strong>It must describe a relationship</strong>: In some cases it may appear that a pattern describes a type of module. Although an implementation may appear this way, the official description of the pattern must describe much deeper system structures and mechanisms that explain its relationship to code.</li>
</ul>
<p>
We would be forgiven for thinking that a proto-pattern which fails to meet guidelines isn't worth learning from, however, this is far from the truth. Many proto-patterns are actually quite good. I’m not saying that all proto-patterns are worth looking at, but there are quite a few useful ones in the wild that could assist us with future projects. Use best judgment with the above list in mind and you’ll be fine in your selection process. </p>
<p>
One of the additional requirements for a pattern to be valid is that they display some recurring phenomenon. This is often something that can be qualified in at least three key areas, referred to as the <em>rule of three</em>. To show recurrence using this rule, one must demonstrate: </p>
<ol start="1" type="1">
<li><strong>Fitness of purpose</strong> - how is the pattern considered successful?</li>
<li><strong>Usefulness</strong> - why is the pattern considered successful?</li>
<li><strong>Applicability</strong> - is the design worthy of being a pattern because it has wider applicability? If so, this needs to be explained. When reviewing or defining a pattern, it is important to keep the above in mind.</li>
</ol>
<p> </p>
<h1 id="designpatternstructure">
<a href="#designpatternstructure" class="subhead-link">#</a>
The Structure Of A Design Pattern
</h1>
<p>You may be curious about how a pattern author might approach outlining structure, implementation and purpose of a new pattern. A pattern is initially presented in the form of a <strong>rule</strong> that establishes a relationship between:</p>
<p>
<ul>
<li>A <strong>context</strong></li>
<li>A system of <strong>forces</strong> that arises in that context and</li>
<li>A <strong>configuration</strong> that allows these forces to resolve themselves in context</li>
</ul>
<p>With this in mind, let’s now take a look at a summary of the component elements for a design pattern. A design pattern should have a:</p>
<ul>
<li><strong>Pattern name</strong> and a <strong>description </strong></li>
<li><strong>Context outline</strong> – the contexts in which the pattern is effective in responding to the users needs. </li>
<li><strong>Problem statement</strong> – a statement of the problem being addressed so we can understand the intent of the pattern. </li>
<li><strong>Solution</strong> – a description of how the user’s problem is being solved in an understandable list of steps and perceptions. </li>
<li><strong>Design</strong> – a description of the pattern’s design and in particular, the user’s behavior in interacting with it </li>
<li><strong>Implementation </strong>– a guide to how the pattern would be implemented </li>
<li><strong>Illustrations</strong> – a visual representation of classes in the pattern (e.g. a diagram)) </li>
<li><strong>Examples</strong> – an implementation of the pattern in a minimal form </li>
<li><strong>Co-requisites</strong> – what other patterns may be needed to support use of the pattern being described? </li>
<li><strong>Relations</strong> – what patterns does this pattern resemble? does it closely mimic any others? </li>
<li><strong>Known usage</strong> – is the pattern being used in the <em>wild</em>? If so, where and how? </li>
<li><strong>Discussions</strong> – the team or author’s thoughts on the exciting benefits of the pattern </li>
</ul>
<p>Design patterns are quite a powerful approach to getting all of the developers in an organization or team on the same page when creating or maintaining solutions. If considering working on a pattern of your own, remember that although they may have a heavy initial cost in the planning and write-up phases, the value returned from that investment can be quite worth it. Always research thoroughly before working on new patterns however, as you may find it more beneficial to use or build on top of existing proven patterns than starting afresh.</p>
<p> </p>
<h1 id="writingdesignpatterns">
<a href="#writingdesignpatterns" class="subhead-link">#</a>
Writing Design Patterns
</h1>
<p>Although this book is aimed at those new to design patterns, a fundamental understanding of how a design pattern is written can offer a number of useful benefits. For starters, we can gain a deeper appreciation for the reasoning behind why a pattern is needed. We can also learn how to tell if a pattern (or proto-pattern) is up to scratch when reviewing it for our own needs.</p>
<p>
Writing good patterns is a challenging task. Patterns not only need to (ideally) provide a substantial quantity of reference material for end-users, but they also need to be able to defend why they are necessary.
</p>
<p>Having read the previous section on <em>what</em> a pattern is, we may think that this in itself is enough to help us identify patterns we see in the wild. This is actually not completely true. It's not always clear if a piece of code we're looking at is following a set pattern or just accidentally happens to appear like it does.</p>
<p>
When we're looking at a body of code we think may be using a pattern, we should consider writing down some of the aspects of the code that we believe falls under a particular existing pattern or set of patterns.</p>
<p>In many cases of pattern-analysis we can find that we're just looking at code that follows good principles and design practices that could happen to overlap with the rules for a pattern by accident. Remember - solutions in which neither interactions nor defined rules appear are <em>not</em> patterns. </p>
<p>
If interested in venturing down the path of writing your own design patterns I recommend learning from others who have already been through the process and done it well. Spend time absorbing the information from a number of different design pattern descriptions and take in what’s meaningful to you.</p>
<p>Explore structure and semantics - this can be done by examining the interactions and context of the patterns you are interested in so you can identify the principles that assist in organizing those patterns together in useful configurations.</p>
<p>
Once we've exposed ourselves to a wealth of information on pattern literature, we may wish to begin writing our pattern using an <em>existing</em> format and see if we can brainstorm new ideas for improving it or integrating our ideas in there.</p>
<p>An example of a developer that did this is in recent years is Christian Heilmann, who took the existing <em>Module</em> pattern and made some fundamentally useful changes to it to create the <em>Revealing Module</em> pattern (this is one of the patterns covered later in this book). </p>
<p>
The following are tips I would suggest if interested in creating a new design pattern:</p>
<ul type="disc">
<li><strong>How practical is the pattern?</strong>: Ensure the pattern describes proven solutions to recurring problems rather than just speculative solutions which haven’t been qualified.</li>
<li><strong>Keep best practices in mind:</strong> The design decisions we make should be based on principles we derive from an understanding of best practices. </li>
<li><strong>Our design patterns should be transparent to the user</strong>: Design patterns should be entirely transparent to any type of user-experience. They are primarily there to serve the developers using them and should not force changes to behavior in the user-experience that would not be incurred without the use of a pattern.</li>
<li><strong>Remember that originality is <em>not</em> key in pattern design</strong>: When writing a pattern, we do not need to be the original discoverer of the solutions being documented nor do you have to worry about our design overlapping with minor pieces of other patterns. If the approach is strong enough to have broad useful applicability, it has a chance of being recognized as a valid pattern.</li>
<li><strong>Pattern need a strong set of examples:</strong> A good pattern description needs to be followed by an equally strong set of examples demonstrating the successful application of our pattern. To show broad usage, examples that exhibit good design principles are ideal.</li>
</ul>
<p>
Pattern writing is a careful balance between creating a design that is general, specific and above all, useful. Try to ensure that if writing a pattern you cover the widest possible areas of application and you should be fine. I hope that this brief introduction to writing patterns has given you some insights that will assist your learning process for the next sections of this book. </p>
<p> </p>
<h1 id="antipatterns">
<a href="#antipatterns" class="subhead-link">#</a>
Anti-Patterns
</h1>
<p>If we consider that a pattern represents a best practice, an anti-pattern represents a lesson that has been learned. The term anti-patterns was coined in 1995 by Andrew Koenig in the November C++ Report that year, inspired by the GoF's book <em>Design Patterns</em>. In Koenig’s report, there are two notions of anti-patterns that are presented. Anti-Patterns: </p>
<ul type="disc">
<li>Describe a<em> bad</em> solution to a particular problem which resulted in a bad situation occurring </li>
<li>Describe <em>how</em> to get out of said situation and how to go from there to a good solution </li>
</ul>
<p>
<p>On this topic, Alexander writes about the difficulties in achieving a good balance between good design structure and good context:</p>
<p><em>“These notes are about the process of design; the process of inventing physical things which display a new physical order, organization, form, in response to function.…every design problem begins with an effort to achieve fitness between two entities: the form in question and its context. The form is the solution to the problem; the context defines the problem”.</em></p>
<p>
While it’s quite important to be aware of design patterns, it can be equally important to understand anti-patterns. Let us qualify the reason behind this. When creating an application, a project’s life-cycle begins with construction however once you’ve got the initial release done, it needs to be maintained. The quality of a final solution will either be <em>good</em> or <em>bad</em>, depending on the level of skill and time the team have invested in it. Here <em>good</em> and <em>bad</em> are considered in context - a ‘perfect’ design may qualify as an anti-pattern if applied in the wrong context. </p>
<p>
The bigger challenges happen after an application has hit production and is ready to go into maintenance mode. A developer working on such a system who hasn’t worked on the application before may introduce a <em>bad</em> design into the project by accident. If said <em>bad</em> practices are created as anti-patterns, they allow developers a means to recognize these in advance so that they can avoid common mistakes that can occur - this is parallel to the way in which design patterns provide us with a way to recognize common techniques that are <em>useful.</em></p>
<p>
To summarize, an anti-pattern is a bad design that is worthy of documenting. Examples of anti-patterns in JavaScript are the following: </p>
<ul type="disc">
<li>Polluting the global namespace by defining a large number of variables in the global context</li>
<li>Passing strings rather than functions to either setTimeout or setInterval as this triggers the use of <code>eval()</code> internally.</li>
<li>Modifying the <code>Object</code> class prototype (this is a particularly bad anti-pattern)</li>
<li>Using JavaScript in an inline form as this is inflexible </li>
<li>The use of document.write where native DOM alternatives such as document.createElement are more appropriate. document.write has been grossly misused over the years and has quite a few disadvantages including that if it's executed after the page has been loaded it can actually overwrite the page we're on, whilst document.createElement does not. We can see <a href="http://jsfiddle.net/addyosmani/6T9vX/">here</a> for a live example of this in action. It also doesn't work with XHTML which is another reason opting for more DOM-friendly methods such as document.createElement is favorable.</li>
</ul>
<p>
Knowledge of anti-patterns is critical for success. Once we are able to recognize such anti-patterns, we're able to refactor our code to negate them so that the overall quality of our solutions improves instantly. </p>
<p> </p>
<h1 id="categoriesofdesignpatterns">
<a href="#categoriesofdesignpatterns" class="subhead-link">#</a>
Categories Of Design Pattern
</h1>
<p> </p>
<p>A glossary from the well-known design book, <em>Domain-Driven Terms, </em>rightly states that:</p>
<p><i>“A design pattern names, abstracts, and identifies the key aspects of a common design structure that make it useful for creating a reusable object-oriented design. The design pattern identifies the participating classes and their instances, their roles and collaborations, and the distribution of responsibilities. </i></p>
<p><i>Each design pattern focuses on a particular object-oriented design problem or issue. It describes when it applies, whether or not it can be applied in view of other design constraints, and the consequences and trade-offs of its use. Since we must eventually implement our designs, a design pattern also provides sample ... code to illustrate an implementation. </i></p>
<p><i>Although design patterns describe object-oriented designs, they are based on practical solutions that have been implemented in mainstream object-oriented programming languages ....”</i></p>
<p>Design patterns can be broken down into a number of different categories. In this section we’ll review three of these categories and briefly mention a few examples of the patterns that fall into these categories before exploring specific ones in more detail.
</p>
<p> </p>
<h2>Creational Design Patterns</h2>
<p>
<p>Creational design patterns focus on handling object creation mechanisms where objects are created in a manner suitable for the situation we're working in. The basic approach to object creation might otherwise lead to added complexity in a project whilst these patterns aim to solve this problem by <em>controlling</em> the creation process.</p>
<p>Some of the patterns that fall under this category are: Constructor, Factory, Abstract, Prototype, Singleton and Builder.</p>
<h2>Structural Design Patterns</h2>
<p>Structural patterns are concerned with object composition and typically identify simple ways to realize relationships between different objects. They help ensure that when one part of a system changes, the entire structure of the system doesn't need to do the same. They also assist in recasting parts of the system which don't fit a particular purpose into those that do. </p>
<p>Patterns that fall under this category include: Decorator, Facade, Flyweight, Adapter and Proxy.</p>
<h2>Behavioral Design Patterns</h2>
<p>Behavioral patterns focus on improving or streamlining the communication between disparate objects in a system.</p>
<p>Some behavioral patterns include: Iterator, Mediator, Observer and Visitor.</p>
<p> </p>
<h1 id="summarytabledesignpatterns">
<a href="#summarytabledesignpatterns" class="subhead-link">#</a>
Design Pattern Categorization
</h1>
<p>In my early experiences of learning about design patterns, I personally found the following table a very useful reminder of what a number of patterns has to offer - it covers the 23 Design Patterns mentioned by the GoF. The original table was summarized by Elyse Nielsen back in 2004
and I've modified it where necessary to suit our discussion in this section of the book.
<p>I recommend using this table as reference, but do remember that there are a number of additional patterns that are not mentioned here but will be discussed later in the book.</p>
<h3>A brief note on classes</h3>
<p>Keep in mind that there will be patterns in this table that reference the concept of "classes". JavaScript is a class-less language, however classes can be simulated using functions.</p>
<p>The most common approach to achieving this is by defining a JavaScript function where we then create an object using the <code>new</code> keyword. <code>this</code> can be used to help define new properties and methods for the object as follows:</p>
<pre class="brush: js">
// A car "class"
function Car( model ) {
this.model = model;
this.color = "silver";
this.year = "2012";
this.getInfo = function () {
return this.model + " " + this.year;
};
}
</pre>
<p>We can then instantiate the object using the Car constructor we defined above like this:</p>
<pre class="brush: js" >
var myCar = new Car("ford");
myCar.year = "2010";
console.log( myCar.getInfo() );
</pre>
<p>For more ways to define "classes" using JavaScript, see Stoyan Stefanov's useful <a href="http://www.phpied.com/3-ways-to-define-a-javascript-class/">post</a> on them.</p>
<p>Let us now proceed to review the table.
<p>
<p>
<table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="white">
<tbody><tr bgcolor="#fff">
<td colspan="4"><strong> <b>Creational </b></strong></td>
<td colspan="4"> Based on the concept of creating an object.</td>
</tr>
<tr bgcolor="#DBDBDB">
<td colspan="8"><em><strong> Class </strong></em></td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Factory Method </em></td>
<td colspan="3">This makes an instance of several derived classes based on interfaced data or events.</td>
</tr>
<tr bgcolor="#DBDBDB">
<td colspan="8"><em><strong> Object</strong></em></td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Abstract Factory </em></td>
<td colspan="3">Creates an instance of several families of classes without detailing concrete classes. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Builder</em></td>
<td colspan="3">Separates object construction from its representation, always creates the same type of object. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Prototype</em></td>
<td colspan="3">A fully initialized instance used for copying or cloning. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Singleton</em></td>
<td colspan="3">A class with only a single instance with global access points. </td>
</tr>
<tr>
<td height="20" width="6"> </td>
<td width="6"> </td>
<td width="6"> </td>
<td width="139"> </td>
<td width="1"> </td>
<td width="18"> </td>
<td width="18"> </td>
<td width="681"> </td>
</tr>
<tr bgcolor="#fff">
<td colspan="4"><strong> <b>Structural </b> </strong></td>
<td colspan="4"> Based on the idea of building blocks of objects </td>
</tr>
<tr bgcolor="#DBDBDB">
<td colspan="8"><em><strong> Class </strong></em></td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Adapter</em></td>
<td colspan="3"> Match interfaces of different classes therefore classes can work together despite incompatible interfaces </td>
</tr>
<tr bgcolor="#DBDBDB">
<td colspan="8"><em><strong> Object</strong></em></td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Adapter</em></td>
<td colspan="3"> Match interfaces of different classes therefore classes can work together despite incompatible interfaces </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Bridge</em></td>
<td colspan="3">Separates an object's interface from its implementation so the two can vary independently</td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Composite</em></td>
<td colspan="3"> A structure of simple and composite objects which makes the total object more than just the sum of its parts.</td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Decorator</em></td>
<td colspan="3"> Dynamically add alternate processing to objects.</td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Facade</em></td>
<td colspan="3"> A single class that hides the complexity of an entire subsystem.</td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Flyweight</em></td>
<td colspan="3"> A fine-grained instance used for efficient sharing of information that is contained elsewhere. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Proxy</em></td>
<td colspan="3"> A place holder object representing the true object </td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
<tr bgcolor="#fff">
<td colspan="4"><strong> <b>Behavioral </b></strong></td>
<td colspan="4"> Based on the way objects play and work together.</td>
</tr>
<tr bgcolor="#DBDBDB">
<td colspan="8"><em><strong> Class </strong></em></td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Interpreter</em></td>
<td colspan="3"> A way to include language elements in an application to match the grammar of the intended language. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Template <br> Method </em></td>
<td colspan="3">Creates the shell of an algorithm in a method, then defer the exact steps to a subclass.</td>
</tr>
<tr bgcolor="#DBDBDB">
<td colspan="8"><em><strong> Object</strong></em></td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Chain of <br> Responsibility </em></td>
<td colspan="3"> A way of passing a request between a chain of objects to find the object that can handle the request. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Command</em></td>
<td colspan="3"> Encapsulate a command request as an object to enable, logging and/or queuing of requests, and provides error-handling for unhandled requests. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Iterator</em></td>
<td colspan="3"> Sequentially access the elements of a collection without knowing the inner workings of the collection.</td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Mediator</em></td>
<td colspan="3"> Defines simplified communication between classes to prevent a group of classes from referring explicitly to each other. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Memento</em></td>
<td colspan="3"> Capture an object's internal state to be able to restore it later. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Observer</em></td>
<td colspan="3"> A way of notifying change to a number of classes to ensure consistency between the classes. </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> State</em></td>
<td colspan="3"> Alter an object's behavior when its state changes </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Strategy</em></td>
<td colspan="3"> Encapsulates an algorithm inside a class separating the selection from the implementation </td>
</tr>
<tr bgcolor="#F9F9F9">
<td colspan="5"><em> Visitor</em></td>
<td colspan="3"> Adds a new operation to a class without changing the class </td>
</tr>
</tbody></table></p>
<p> </p>
<p> </p>
<h1 id="designpatternsjavascript">
<a href="#designpatternsjavascript" class="subhead-link">#</a>
JavaScript Design Patterns
</h1>
<p> </p>
<p>In this section, we will explore JavaScript implementations of a number of both classic and modern design patterns.</p>
<p>Developers commonly wonder whether there is an <em>ideal</em> pattern or set of patterns they should be using in their workflow. There isn't a true single answer to this question; each script and web application we work on is likely to have its own individual needs and we need to think about where we feel a pattern can offer real value to an implementation.</p>
<p>For example, some projects may benefit from the decoupling benefits offered by the Observer pattern (which reduces how dependent parts of an application are on one another) whilst others may simply be too small for decoupling to be a concern at all.</p>
<p>That said, once we have a firm grasp of design patterns and the specific problems they are best suited to, it becomes much easier to integrate them into our application architectures.</p>
<p> </p>
<p><strong>The patterns we will be exploring in this section are the:</strong></p>
<ul>
<li class="subitem"><a href="#constructorpatternjavascript">Constructor Pattern</a></li>
<li class="subitem"><a href="#modulepatternjavascript">Module Pattern</a></li>
<li class="subitem"><a href="#revealingmodulepatternjavascript">Revealing Module Pattern</a></li>
<li class="subitem"><a href="#singletonpatternjavascript">Singleton Pattern</a></li>
<li class="subitem"><a href="#observerpatternjavascript">Observer Pattern</a></li>
<li class="subitem"><a href="#mediatorpatternjavascript">Mediator Pattern</a></li>
<li class="subitem"><a href="#prototypepatternjavascript">Prototype Pattern</a></li>
<li class="subitem"><a href="#commandpatternjavascript">Command Pattern</a></li>
<li class="subitem"><a href="#facadepatternjavascript">Facade Pattern</a></li>
<li class="subitem"><a href="#factorypatternjavascript">Factory Pattern</a></li>
<li class="subitem"><a href="#mixinpatternjavascript">Mixin Pattern</a>
<li class="subitem"><a href="#decoratorpatternjavascript">Decorator Pattern</a></li>
<li class="subitem"><a href="#">Flyweight Pattern</a></li>
</ul>
<p> </p>
<h2 id="constructorpatternjavascript">
<a href="#constructorpatternjavascript" class="subhead-link">#</a>
The Constructor Pattern
</h2>
<p>In classical object-oriented programming languages, a constructor is a special method used to initialize a newly created object once memory has been allocated for it. In JavaScript, as almost everything is an object, we're most often interested in <em>object</em> constructors.</p>
<p>Object constructors are used to create specific types of objects - both preparing the object for use and accepting arguments which a constructor can use to set the values of member properties and methods when the object is first created. </p>
<h3>Object Creation</h3>
<p>The three common ways to create new objects in JavaScript are as follows:</p>
<p><pre class="brush: js">
// Each of the following options will create a new empty object:
var newObject = {};
// or
var newObject = Object.create( Object.prototype );
// or
var newObject = new Object();
</pre></p>
<p>Where the "Object" constructor in the final example creates an object wrapper for a specific value, or where no value is passed, it will create an empty object and return it.</p>
<p>There are then four ways in which keys and values can then be assigned to an object:</p>
<p><pre class="brush: js">
// ECMAScript 3 compatible approaches
// 1. Dot syntax
// Set properties
newObject.someKey = "Hello World";
// Get properties
var value = newObject.someKey;
// 2. Square bracket syntax
// Set properties
newObject["someKey"] = "Hello World";
// Get properties
var value = newObject["someKey"];
// ECMAScript 5 only compatible approaches
// For more information see: http://kangax.github.com/es5-compat-table/
// 3. Object.defineProperty
// Set properties
Object.defineProperty( newObject, "someKey", {
value: "for more control of the property's behavior",
writable: true,
enumerable: true,
configurable: true
});
// If the above feels a little difficult to read, a short-hand could
// be written as follows:
var defineProp = function ( obj, key, value ){
var config = {
value: value,
writable: true,
enumerable: true,
configurable: true
};
Object.defineProperty( obj, key, config );
};
// To use, we then create a new empty "person" object
var person = Object.create( Object.prototype );
// Populate the object with properties
defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
console.log(person);
// Outputs: Object {car: "Delorean", dateOfBirth: "1981", hasBeard: false}
// 4. Object.defineProperties
// Set properties
Object.defineProperties( newObject, {
"someKey": {
value: "Hello World",
writable: true
},
"anotherKey": {
value: "Foo bar",
writable: false
}
});
// Getting properties for 3. and 4. can be done using any of the
// options in 1. and 2.
</pre></p>
<p>As we will see a little later in the book, these methods can even be used for inheritance, as follows:</p>
<p><pre class="brush: js">
// Usage:
// Create a race car driver that inherits from the person object
var driver = Object.create( person );
// Set some properties for the driver
defineProp(driver, "topSpeed", "100mph");
// Get an inherited property (1981)
console.log( driver.dateOfBirth );
// Get the property we set (100mph)
console.log( driver.topSpeed );
</pre></p>
<h3>Basic Constructors</h3>
<p>As we saw earlier, JavaScript doesn't support the concept of classes but it does support special constructor functions that work with objects. By simply prefixing a call to a constructor function with the keyword "new", we can tell JavaScript we would like the function to behave like a constructor and instantiate a new object with the members defined by that function.</p>
<p>Inside a constructor, the keyword <em>this</em> references the new object that's being created. Revisiting object creation, a basic constructor may look as follows:</p>
<p><pre class="brush: js">
function Car( model, year, miles ) {
this.model = model;
this.year = year;
this.miles = miles;
this.toString = function () {
return this.model + " has done " + this.miles + " miles";
};
}
// Usage:
// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// and then open our browser console to view the
// output of the toString() method being called on
// these objects
console.log( civic.toString() );
console.log( mondeo.toString() );
</pre></p>
<p>The above is a simple version of the constructor pattern but it does suffer from some problems. One is that it makes inheritance difficult and the other is that functions such as <code>toString()</code> are redefined for each of the new objects created using the Car constructor. This isn't very optimal as the function should ideally be shared between all of the instances of the Car type.</p>
<p>Thankfully as there are a number of both ES3 and ES5-compatible alternatives to constructing objects, it's trivial to work around this limitation.</p>
<p> </p>
<h3>Constructors With Prototypes</h3>
<p>Functions, like almost all objects in JavaScript, contain a "prototype" object. When we call a JavaScript constructor to create an object, all the properties of the constructor's prototype are then made available to the new object. In this fashion, multiple Car objects can be created which access the same prototype. We can thus extend the original example as follows:
</p>
<p><pre class="brush: js">
function Car( model, year, miles ) {
this.model = model;
this.year = year;
this.miles = miles;
}
// Note here that we are using Object.prototype.newMethod rather than
// Object.prototype so as to avoid redefining the prototype object
Car.prototype.toString = function () {
return this.model + " has done " + this.miles + " miles";
};
// Usage:
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
console.log( mondeo.toString() );
</pre></p>
<p>Above, a single instance of toString() will now be shared between all of the Car objects.</p>
<p> </p>
<h2 id="modulepatternjavascript">
<a href="#modulepatternjavascript" class="subhead-link">#</a>
The Module Pattern
</h2>
<h2 id="detailmodule">Modules</h2>
<p>
Modules are an integral piece of any robust application's architecture and typically help in keeping the units of code for a project both cleanly separated and organized.</p>
<p>In JavaScript, there are several options for implementing modules. These include:</p>
<ul>
<li>The Module pattern</li>
<li>Object literal notation</li>
<li>AMD modules</li>
<li>CommonJS modules</li>
<li>ECMAScript Harmony modules</li>
</ul>
<p>We will be exploring the latter three of these options later on in the book in the section <em>Modern Modular JavaScript Design Patterns</em>.</p>
<p>The Module pattern is based in part on object literals and so it makes sense to refresh our knowledge of them first.</p>
<h3>Object Literals</h3>
<p>In object literal notation, an object is described as a set of comma-separated name/value pairs enclosed in curly braces (<code>{}</code>). Names inside the object may be either strings or identifiers that are followed by a colon. There should be no comma used after the final name/value pair in the object as this may result in errors.</p>
<p>
<pre class="brush: js">
var myObjectLiteral = {
variableKey: variableValue,
functionKey: function () {
// ...
}
};
</pre>
<p>
Object literals don't require instantiation using the <code>new</code> operator but shouldn't be used at the start of a statement as the opening <code>{</code> may be interpreted as the beginning of a block. Outside of an object, new members may be added to it using assignment as follows <code>myModule.property = "someValue";</code>
</p>
<p>Below we can see a more complete example of a module defined using object literal notation:</p>
<p>
<pre class="brush: js">
var myModule = {
myProperty: "someValue",
// object literals can contain properties and methods.
// e.g we can define a further object for module configuration:
myConfig: {
useCaching: true,
language: "en"
},
// a very basic method
saySomething: function () {
console.log( "Where in the world is Paul Irish today?" );
},
// output a value based on the current configuration
reportMyConfig: function () {
console.log( "Caching is: " + ( this.myConfig.useCaching ? "enabled" : "disabled") );
},
// override the current configuration
updateMyConfig: function( newConfig ) {
if ( typeof newConfig === "object" ) {
this.myConfig = newConfig;
console.log( this.myConfig.language );
}
}
};
// Outputs: Where in the world is Paul Irish today?
myModule.saySomething();
// Outputs: Caching is: enabled
myModule.reportMyConfig();
// Outputs: fr
myModule.updateMyConfig({
language: "fr",
useCaching: false
});
// Outputs: Caching is: disabled
myModule.reportMyConfig();
</pre>
</p>
<p>Using object literals can assist in encapsulating and organizing your code and Rebecca Murphey has previously written about this topic in <a href="http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/">depth</a> should you wish to read into object literals further.</p>
<p>That said, if we're opting for this technique, we may be equally as interested in the Module pattern. It still uses object literals but only as the return value from a scoping function. </p>
<h3>The Module Pattern</h3>
<p>The Module pattern was originally defined as a way to provide both private and public encapsulation for classes in conventional software engineering.</p>
<p>
In JavaScript, the Module pattern is used to further <em>emulate</em> the concept of classes in such a way that we're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. What this results in is a reduction in the likelihood of our function names conflicting with other functions defined in additional scripts on the page.</p>
<h4>Privacy</h4>
<p>
The Module pattern encapsulates "privacy", state and organization using closures. It provides a way of wrapping a mix of public and private methods and variables, protecting pieces from leaking into the global scope and accidentally colliding with another developer's interface. With this pattern, only a public API is returned, keeping everything else within the closure private. </p>
<p>
This gives us a clean solution for shielding logic doing the heavy lifting whilst only exposing an interface we wish other parts of our application to use. The pattern is quite similar to an immediately-invoked functional expression (<a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/">IIFE</a> - see the section on namespacing patterns for more on this) except that an object is returned rather than a function. </p>
<p>
It should be noted that there isn't really an explicitly true sense of "privacy" inside JavaScript because unlike some traditional languages, it doesn't have access modifiers. Variables can't technically be declared as being public nor private and so we use function scope to simulate this concept. Within the Module pattern, variables or methods declared are only available inside the module itself thanks to closure. Variables or methods defined within the returning object however are available to everyone.
</p>
<h4>History</h4>
<p>
From a historical perspective, the Module pattern was originally developed by a number of people including <a href="http://groups.google.com/group/comp.lang.javascript/msg/9f58bd11bd67d937">Richard Cornford</a> in 2003. It was later popularized by Douglas Crockford in his lectures. Another piece of trivia is that if you've ever played with Yahoo's YUI library, some of its features may appear quite familiar and the reason for this is that the Module pattern was a strong influence for YUI when creating their components.
</p>
<h4>Examples</h4>
<p> Let's begin looking at an implementation of the Module pattern by creating a module which is self-contained.</p>
<p>
<pre class="brush: js">
var testModule = (function () {
var counter = 0;
return {
incrementCounter: function () {
return counter++;
},
resetCounter: function () {
console.log( "counter value prior to reset: " + counter );
counter = 0;
}
};
})();
// Usage:
// Increment our counter
testModule.incrementCounter();
// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.resetCounter();
</pre>
</p>
<p>Here, other parts of the code are unable to directly read the value of our <code>incrementCounter()</code> or <code>resetCounter()</code>. The counter variable is actually fully shielded from our global scope so it acts just like a private variable would - its existence is limited to within the module's closure so that the only code able to access its scope are our two functions. Our methods are effectively namespaced so in the test section of our code, we need to prefix any calls with the name of the module (e.g. "testModule").
</p>
<p>When working with the Module pattern, we may find it useful to define a simple template that we use for getting started with it. Here's one that covers namespacing, public and private variables:
</p>