Learning JavaScript Design Patterns

199 Pages·2012·2.51 MB·English

by  Addy Osmani

www.it-ebooks.info
Learning JavaScript Design
Patterns
Addy Osmani
Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
www.it-ebooks.info
Learning JavaScript Design Patterns
by Addy Osmani
Copyright © 2012 Addy Osmani. All rights reserved.
Revision History for the :
2012-05-01 Early release revision 1
See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details.
ISBN: 978-1-449-33181-8
1335906805
www.it-ebooks.info
Table of Contents
Preface ..................................................................... ix
1. Introduction ........................................................... 1
2. What is a Pattern? ...................................................... 3
We already use patterns everyday 4
3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7
4. The Structure Of A Design Pattern ......................................... 9
5. Writing Design Patterns ................................................. 11
6. Anti-Patterns ......................................................... 13
7. Categories Of Design Pattern ............................................ 15
Creational Design Patterns 15
Structural Design Patterns 16
Behavioral Design Patterns 16
8. Design Pattern Categorization ........................................... 17
A brief note on classes 17
9. JavaScript Design Patterns .............................................. 21
The Creational Pattern 22
The Constructor Pattern 23
Basic Constructors 23
Constructors With Prototypes 24
The Singleton Pattern 24
The Module Pattern 27
iii
www.it-ebooks.info
Modules 27
Object Literals 27
The Module Pattern 29
The Revealing Module Pattern 36
The Observer Pattern 37
Advantages 38
Disadvantages 39
Implementations 39
The Mediator Pattern 49
Advantages & Disadvantages 50
Mediator Vs. Observer 51
Mediator Vs. Facade 51
The Prototype Pattern 52
The Command Pattern 54
The Facade Pattern 56
The Factory Pattern 58
When To Use The Factory Pattern 59
When Not To Use The Factory Pattern 59
The Mixin Pattern 60
The Decorator Pattern 61
Subclassing 61
Decorators 63
Example 1: Basic decoration of existing object constructors with new
functionality 63
Example 2: Simply decorate objects with multiple decorators 64
Pseudo-classical decorators 65
Interfaces 65
This variation of decorators and abstract decorators 66
Implementing decorators with jQuery 69
Pros and cons of the pattern 70
10. Flyweight ............................................................ 71
Flyweight and the data layer 72
Converting code to use the Flyweight pattern 72
A Basic Factory 74
Managing the extrinsic states 74
The Flyweight pattern and the DOM 76
Example 1: Centralized event handling 76
Example 2: Using the Flyweight for Performance Gains 77
11. MV* Patterns .......................................................... 79
MVC 79
Smalltalk-80 MVC 79
iv | Table of Contents
www.it-ebooks.info
MVC For JavaScript Developers 80
Models 81
Views 82
Controllers 85
Controllers in another library (Spine.js) vs Backbone.js 86
What does MVC give us? 87
Delving deeper 88
Summary 88
MVP 88
Models, Views & Presenters 89
MVP or MVC? 90
MVC, MVP and Backbone.js 90
MVVM 92
History 92
Model 93
View 94
ViewModel 96
Recap: The View and the ViewModel 98
Recap: The ViewModel and the Model 98
Pros and Cons 98
Advantages 98
Disadvantages 98
MVVM With Looser Data-Bindings 99
MVC Vs. MVP Vs. MVVM 103
Backbone.js Vs. KnockoutJS 103
Namespacing Patterns 104
What is namespacing? 104
Advanced namespacing patterns 105
Automating nested namespacing 105
Dependency declaration pattern 107
Deep object extension 108
Namespacing Fundamentals 110
1.Single global variables 111
2. Prefix namespacing 111
3. Object literal notation 112
4. Nested namespacing 114
5. Immediately-invoked Function Expressions (IIFE)s 115
6. Namespace injection 117
12. Design Patterns in jQuery Core .......................................... 121
Module Pattern 121
Lazy Initialization 122
The Composite Pattern 123
Table of Contents | v
www.it-ebooks.info
The Adapter Pattern 123
The Facade Pattern 124
The Observer Pattern 125
The Iterator Pattern 126
The Strategy Pattern 127
The Proxy Pattern 127
The Builder Pattern 128
The Prototype Pattern 128
13. Modern Modular JavaScript Design Patterns ............................... 131
The Importance Of Decoupling Your Application 131
A Note On Script Loaders 132
AMD 132
A Format For Writing Modular JavaScript In The Browser 132
Getting Started With Modules 133
AMD Modules With Dojo 137
AMD Module Design Patterns (Dojo) 138
AMD Modules With jQuery 139
AMD Conclusions 141
CommonJS 141
A Module Format Optimized For The Server 141
Getting Started 141
AMD && CommonJS Competing, But Equally Valid Standards 144
Basic AMD Hybrid Format (John Hann) 145
AMD/CommonJS Universal Module Definition (Variation 2, UMDjs) 145
Extensible UMD Plugins With (Variation by myself and Thomas Davis). 146
ES Harmony 148
Modules Of The Future 148
Modules With Imports And Exports 148
Modules Loaded From Remote Sources 149
Module Loader API 150
CommonJS-like Modules For The Server 150
Classes With Constructors, Getters & Setters 150
Conclusions And Further Reading A Review 152
14. Bonus: jQuery Plugin Design Patterns .................................... 153
Patterns 154
Note 154
A Lightweight Start 155
Further Reading 156
“Complete” Widget Factory 157
Further Reading 159
Namespacing And Nested Namespacing 159
vi | Table of Contents
www.it-ebooks.info
Further Reading 161
Custom Events For Pub/Sub (With The Widget factory) 161
Further Reading 162
Prototypal Inheritance With The DOM-To-Object Bridge Pattern 162
Further Reading 164
jQuery UI Widget Factory Bridge 164
Further Reading 166
jQuery Mobile Widgets With The Widget factory 167
RequireJS And The jQuery UI Widget Factory 169
Further Reading 172
Globally And Per-Call Overridable Options (Best Options Pattern) 172
Further Reading 174
A Highly Configurable And Mutable Plugin 174
Further Reading 176
UMD: AMD And CommonJS-Compatible Modules For Plugins 176
Further Reading 179
What Makes A Good Plugin Beyond Patterns? 179
15. Conclusions .......................................................... 183
16. References ........................................................... 185
Table of Contents | vii
www.it-ebooks.info
www.it-ebooks.info
Preface
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.
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.
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.
In this book we will explore applying both classical and modern design patterns to the
JavaScript programming language.
Target Audience
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 lan-
guage.
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.
If you would like to learn how to write beautiful, structured and organized code, I
believe this is the book for you.
Acknowledgments
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 re-
ix
www.it-ebooks.info