Learning JavaScript design patterns : [a JavaScript and jQuery developer's guide

With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you. Explore many popular design patterns, including Modules, Observers, Facades, and Mediators. Learn how modern architectural patterns—such as MVC, MVP, and MVVM—are useful from the perspective of a modern web application developer. This book also walks you through modern module formats, how to namespace code effectively, and other essential topics. "This book should be in every JavaScript developer’s hands. It’s the go-to book on JavaScript patterns that will be read and referenced many times in the future."—Andrée Hansson, Lead Front-End Developer, presis! Table of Contents 5 Preface 11 Target Audience 11 Credits 11 Reading 12 Conventions Used in This Book 12 Using Code Examples 13 Safari® Books Online 13 How to Contact Us 13 Acknowledgments 14 Chapter 1. Introduction 15 Chapter 2. What Is a Pattern? 17 We Already Use Patterns Every Day 18 Chapter 3. “Pattern”-ity Testing, Proto-Patterns, and the Rule of Three 21 Chapter 4. The Structure of a Design Pattern 23 Chapter 5. Writing Design Patterns 25 Chapter 6. Anti-Patterns 27 Chapter 7. Categories of Design Patterns 29 Creational Design Patterns 29 Structural Design Patterns 30 Behavioral Design Patterns 30 Chapter 8. Design Pattern Categorization 31 A Brief Note on Classes 31 Chapter 9. JavaScript Design Patterns 35 The Constructor Pattern 36 Object Creation 36 Basic Constructors 38 Constructors with Prototypes 39 The Module Pattern 40 Object Literals 40 The Module Pattern 41 Privacy 42 History 42 Examples 43 Module Pattern Variations 46 Import mixins 46 Exports 46 Toolkit and framework-specific module pattern implementations 47 Dojo 47 ExtJS 48 YUI 49 jQuery 49 Advantages 50 Disadvantages 50 The Revealing Module Pattern 51 Advantages 52 Disadvantages 52 The Singleton Pattern 53 The Observer Pattern 57 Differences Between the Observer and Publish/Subscribe Pattern 61 Advantages 63 Disadvantages 64 Publish/Subscribe Implementations 64 A Publish/Subscribe implementation 66 Using our implementation 67 User-interface notifications 68 Decoupling applications using Ben Alman’s Pub/Sub implementation 69 Decoupling an Ajax-based jQuery application 71 The Mediator Pattern 74 Basic Implementation 75 Advanced Implementation 76 Example 81 Advantages and Disadvantages 83 Mediator Versus Observer 83 Mediator Versus Facade 83 The Prototype Pattern 84 The Command Pattern 87 The Facade Pattern 89 Notes on Abstraction 91 The Factory Pattern 92 When to Use the Factory Pattern 94 When Not to Use the Factory Pattern 95 Abstract Factories 95 The Mixin Pattern 96 Subclassing 96 Mixins 97 Advantages and Disadvantages 101 The Decorator Pattern 101 Pseudoclassical Decorators 105 Interfaces 105 Abstract Decorators 106 Decorators with jQuery 109 Advantages and Disadvantages 111 Flyweight 111 Using Flyweights 112 Flyweights and Sharing Data 112 Implementing Classical Flyweights 113 Duck punching “implements” 113 Converting Code to Use the Flyweight Pattern 116 A Basic Factory 118 Managing the Extrinsic States 119 The Flyweight Pattern and the DOM 120 Chapter 10. JavaScript MV* Patterns 125 MVC 125 Smalltalk-80 MVC 125 MVC for JavaScript Developers 126 Models 127 Views 129 Templating 130 Controllers 131 Controllers in Another Library (Spine.js) Versus Backbone.js 132 Spine.js 132 Backbone.js 133 What Does MVC Give Us? 134 Smalltalk-80 MVC in JavaScript 134 Delving Deeper 135 Summary 135 MVP 135 Models, Views, and Presenters 136 MVP or MVC? 137 MVC, MVP, and Backbone.js 137 MVVM 139 History 140 Model 140 View 141 ViewModel 143 Recap: The View and the ViewModel 145 Recap: The ViewModel and the Model 146 Pros and Cons 146 Advantages 146 Disadvantages 146 MVVM with Looser Data Bindings 147 MVC Versus MVP Versus MVVM 151 Backbone.js Versus KnockoutJS 152 Chapter 11. Modern Modular JavaScript Design Patterns 153 A Note on Script Loaders 153 AMD 154 Getting Started with Modules 155 AMD Modules with Dojo 158 AMD Module Design Patterns (Dojo) 159 AMD Modules with jQuery 160 Registering jQuery as an Async-compatible module 161 Why AMD is a better choice for writing modular JavaScript 161 Related reading 162 Script loaders and frameworks that support AMD 162 AMD Conclusions 163 CommonJS 163 Getting Started 163 Consuming Multiple Dependencies 164 Loaders and Frameworks that Support CommonJS 165 Is CommonJS Suitable for the Browser? 165 Related Reading 166 AMD and CommonJS: Competing, but Equally Valid Standards 166 UMD: AMD and CommonJS-Compatible Modules for Plug-ins 166 Basic AMD hybrid format 167 Using CommonJS, AMD, or browser globals to create a module 167 jQuery plug-ins that function in all environments 168 Further reading 171 ES Harmony 171 Modules with Imports and Exports 172 Modules Loaded from Remote Sources 173 Module Loader API 173 CommonJS-like Modules for the Server 173 Classes with Constructors, Getters, and Setters 174 ES Harmony Conclusions 175 Related Reading 175 Conclusions 175 Chapter 12. Design Patterns in jQuery 177 The Composite Pattern 177 The Adapter Pattern 178 The Facade Pattern 180 The Observer Pattern 182 The Iterator Pattern 185 Lazy Initialization 186 The Proxy Pattern 187 The Builder Pattern 189 Chapter 13. jQuery Plug-in Design Patterns 191 Patterns 192 A Lightweight Start Pattern 193 Further Reading 194 Complete Widget Factory Pattern 195 Further Reading 197 Nested Namespacing Plug-in Pattern 197 Further Reading 198 Custom Events Plug-in Pattern (with the Widget Factory) 199 Further Reading 200 Prototypal Inheritance with the DOM-to-Object Bridge Pattern 200 Further Reading 202 jQuery UI Widget Factory Bridge Pattern 202 Further Reading 204 jQuery Mobile Widgets with the Widget Factory 204 RequireJS and the jQuery UI Widget Factory 207 Usage 210 Further Reading 210 Globally and Per-Call Overridable Options (Best Options Pattern) 210 Further Reading 212 A Highly Configurable and Mutable Plug-in Pattern 212 Further Reading 214 What Makes a Good Plug-in Beyond Patterns? 214 Quality 214 Code Style 214 Compatibility 214 Reliability 215 Performance 215 Documentation 215 Likelihood of maintenance 215 Conclusions 215 Namespacing Patterns 216 Namespacing Fundamentals 216 Single Global Variables 217 Prefix Namespacing 217 Object Literal Notation 217 Nested Namespacing 221 Immediately Invoked Function Expressions (IIFE)s 222 Namespace Injection 224 Advanced Namespacing Patterns 226 Automating Nested Namespacing 226 Dependency Declaration Pattern 228 Deep Object Extension 229 Recommendation 232 Chapter 14. Conclusions 233 Appendix. References 235 Index 237 Table of Contents......Page 5 Credits......Page 11 Conventions Used in This Book......Page 12 How to Contact Us......Page 13 Acknowledgments......Page 14 Chapter 1. Introduction......Page 15 Chapter 2. What Is a Pattern?......Page 17 We Already Use Patterns Every Day......Page 18 Chapter 3. “Pattern”-ity Testing, Proto-Patterns, and the Rule of Three......Page 21 Chapter 4. The Structure of a Design Pattern......Page 23 Chapter 5. Writing Design Patterns......Page 25 Chapter 6. Anti-Patterns......Page 27 Creational Design Patterns......Page 29 Behavioral Design Patterns......Page 30 A Brief Note on Classes......Page 31 Chapter 9. JavaScript Design Patterns......Page 35 Object Creation......Page 36 Basic Constructors......Page 38 Constructors with Prototypes......Page 39 Object Literals......Page 40 The Module Pattern......Page 41 History......Page 42 Examples......Page 43 Exports......Page 46 Dojo......Page 47 ExtJS......Page 48 jQuery......Page 49 Disadvantages......Page 50 The Revealing Module Pattern......Page 51 Disadvantages......Page 52 The Singleton Pattern......Page 53 The Observer Pattern......Page 57 Differences Between the Observer and Publish/Subscribe Pattern......Page 61 Advantages......Page 63 Publish/Subscribe Implementations......Page 64 A Publish/Subscribe implementation......Page 66 Using our implementation......Page 67 User-interface notifications......Page 68 Decoupling applications using Ben Alman’s Pub/Sub implementation......Page 69 Decoupling an Ajax-based jQuery application......Page 71 The Mediator Pattern......Page 74 Basic Implementation......Page 75 Advanced Implementation......Page 76 Example......Page 81 Mediator Versus Facade......Page 83 The Prototype Pattern......Page 84 The Command Pattern......Page 87 The Facade Pattern......Page 89 Notes on Abstraction......Page 91 The Factory Pattern......Page 92 When to Use the Factory Pattern......Page 94 Abstract Factories......Page 95 Subclassing......Page 96 Mixins......Page 97 The Decorator Pattern......Page 101 Interfaces......Page 105 Abstract Decorators......Page 106 Decorators with jQuery......Page 109 Flyweight......Page 111 Flyweights and Sharing Data......Page 112 Duck punching “implements”......Page 113 Converting Code to Use the Flyweight Pattern......Page 116 A Basic Factory......Page 118 Managing the Extrinsic States......Page 119 The Flyweight Pattern and the DOM......Page 120 Smalltalk-80 MVC......Page 125 MVC for JavaScript Developers......Page 126 Models......Page 127 Views......Page 129 Templating......Page 130 Controllers......Page 131 Spine.js......Page 132 Backbone.js......Page 133 Smalltalk-80 MVC in JavaScript......Page 134 MVP......Page 135 Models, Views, and Presenters......Page 136 MVC, MVP, and Backbone.js......Page 137 MVVM......Page 139 Model......Page 140 View......Page 141 ViewModel......Page 143 Recap: The View and the ViewModel......Page 145 Disadvantages......Page 146 MVVM with Looser Data Bindings......Page 147 MVC Versus MVP Versus MVVM......Page 151 Backbone.js Versus KnockoutJS......Page 152 A Note on Script Loaders......Page 153 AMD......Page 154 Getting Started with Modules......Page 155 AMD Modules with Dojo......Page 158 AMD Module Design Patterns (Dojo)......Page 159 AMD Modules with jQuery......Page 160 Why AMD is a better choice for writing modular JavaScript......Page 161 Script loaders and frameworks that support AMD......Page 162 Getting Started......Page 163 Consuming Multiple Dependencies......Page 164 Is CommonJS Suitable for the Browser?......Page 165 UMD: AMD and CommonJS-Compatible Modules for Plug-ins......Page 166 Using CommonJS, AMD, or browser globals to create a module......Page 167 jQuery plug-ins that function in all environments......Page 168 ES Harmony......Page 171 Modules with Imports and Exports......Page 172 CommonJS-like Modules for the Server......Page 173 Classes with Constructors, Getters, and Setters......Page 174 Conclusions......Page 175 The Composite Pattern......Page 177 The Adapter Pattern......Page 178 The Facade Pattern......Page 180 The Observer Pattern......Page 182 The Iterator Pattern......Page 185 Lazy Initialization......Page 186 The Proxy Pattern......Page 187 The Builder Pattern......Page 189 Chapter 13. jQuery Plug-in Design Patterns......Page 191 Patterns......Page 192 A Lightweight Start Pattern......Page 193 Further Reading......Page 194 Complete Widget Factory Pattern......Page 195 Nested Namespacing Plug-in Pattern......Page 197 Further Reading......Page 198 Custom Events Plug-in Pattern (with the Widget Factory)......Page 199 Prototypal Inheritance with the DOM-to-Object Bridge Pattern......Page 200 jQuery UI Widget Factory Bridge Pattern......Page 202 jQuery Mobile Widgets with the Widget Factory......Page 204 RequireJS and the jQuery UI Widget Factory......Page 207 Globally and Per-Call Overridable Options (Best Options Pattern)......Page 210 A Highly Configurable and Mutable Plug-in Pattern......Page 212 Compatibility......Page 214 Conclusions......Page 215 Namespacing Fundamentals......Page 216 Object Literal Notation......Page 217 Nested Namespacing......Page 221 Immediately Invoked Function Expressions (IIFE)s......Page 222 Namespace Injection......Page 224 Automating Nested Namespacing......Page 226 Dependency Declaration Pattern......Page 228 Deep Object Extension......Page 229 Recommendation......Page 232 Chapter 14. Conclusions......Page 233 Appendix. References......Page 235 Index......Page 237 With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.Explore many popular design patterns, including Modules, Observers, Facades, and Mediators. Learn how modern architectural patterns—such as MVC, MVP, and MVVM—are useful from the perspective of a modern web application developer. This book also walks experienced JavaScript developers through modern module formats, how to namespace code effectively, and other essential topics.Learn the structure of design patterns and how they are writtenUnderstand different pattern categories, including creational, structural, and behavioralWalk through more than 20 classical and modern design patterns in JavaScriptUse several options for writing modular code—including the Module pattern, Asyncronous Module Definition (AMD), and CommonJSDiscover design patterns implemented in the jQuery libraryLearn popular design patterns for writing maintainable jQuery plug-ins'This book should be in every JavaScript developer’s hands. It’s the go-to book on JavaScript patterns that will be read and referenced many times in the future.'—Andrée Hansson, Lead Front-End Developer, presis! With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.Explore many popular design patterns, including Modules, Observers, Facades, and Mediators. Learn how modern architectural patterns—such as MVC, MVP, and MVVM—are useful from the perspective of a modern web application developer. This book also walks experienced JavaScript developers through modern module formats, how to namespace code effectively, and other essential topics.Learn the structure of design patterns and how they are writtenUnderstand different pattern categories, including creational, structural, and behavioralWalk through more than 20 classical and modern design patterns in JavaScriptUse several options for writing modular code—including the Module pattern, Asyncronous Module Definition (AMD), and CommonJSDiscover design patterns implemented in the jQuery libraryLearn popular design patterns for writing maintainable jQuery plug-ins'This book should be in every JavaScript developer's hands. It's the go-to book on JavaScript patterns that will be read and referenced many times in the future.'—Andrée Hansson, Lead Front-End Developer, presis! "Explore many popular design patterns, including Modules, Observers, Facades, and Mediators. Learn how modern architectural patterns--such as MVC, MVP, and MVVM--are useful from the perspective of a modern web application developer. This book also walks you through modern module formats, how to namespace code effectively, and other essential topics: Learn the structure of design patterns and how they are written; Understand different pattern categories, including creational, structural, and behavioral; Walk through more than 20 classical and modern design patterns in JavaScript; Use several options for writing modular code--including the Module pattern, Asyncronous Module Definition (AMD), and CommonJS; Discover design patterns implemented in the jQuery library; Learn popular design patterns for writing maintainable jQuery plug-ins."--Publisher description If you want to write beautiful, structured, and maintainable JavaScript code, this guide shows you how to apply both classical and modern design patterns to the language. You'll explore several popular design patterns in plain JavaScript as well as jQuery and other abstracted libraries.