JavaScript Patterns : Build Better Applications with Coding and Design Patterns

Whats the best approach for developing an application with j#097;vascript? This book helps you answer that question with numerous j#097;vascript coding patterns and best practices. If youre an experienced developer looking to solve problems related to objects, functions, inheritance, and other language-specific categories, the abstractions and code templates in this guide are ideal -- whether youre writing a client-side, server-side, or desktop application with j#097;vascript.Written by j#097;vascript expert Stoyan Stefanov -- Senior Yahoo! Technical and architect of YSlow 2.0, the web page performance optimization tool -- j#097;vascript Copyright......Page 6 Table of Contents......Page 9 Conventions Used in This Book......Page 15 Safari® Books Online......Page 16 Acknowledgments......Page 17 Reading......Page 18 Patterns......Page 19 Object-Oriented......Page 21 Prototypes......Page 22 ECMAScript 5......Page 23 The Console......Page 24 Writing Maintainable Code......Page 27 Minimizing Globals......Page 28 The Problem with Globals......Page 29 Side Effects When Forgetting var......Page 30 Single var Pattern......Page 31 Hoisting: A Problem with Scattered vars......Page 32 for Loops......Page 33 for-in Loops......Page 35 (Not) Augmenting Built-in Prototypes......Page 37 switch Pattern......Page 38 Avoiding eval()......Page 39 Coding Conventions......Page 41 Curly Braces......Page 42 Opening Brace Location......Page 43 White Space......Page 44 Separating Words......Page 46 Other Naming Patterns......Page 47 Writing API Docs......Page 48 YUIDoc Example......Page 49 Writing to Be Read......Page 52 Peer Reviews......Page 53 Minify...In Production......Page 54 Summary......Page 55 Object Literal......Page 57 The Object Literal Syntax......Page 58 Object Constructor Catch......Page 59 Custom Constructor Functions......Page 60 Constructor’s Return Values......Page 61 Patterns for Enforcing new......Page 62 Using that......Page 63 Array Literal......Page 64 Array Constructor Curiousness......Page 65 Check for Array-ness......Page 66 Working with JSON......Page 67 Regular Expression Literal......Page 68 Regular Expression Literal Syntax......Page 69 Primitive Wrappers......Page 70 Error Objects......Page 71 Summary......Page 72 Background......Page 75 Disambiguation of Terminology......Page 76 Declarations Versus Expressions: Names and Hoisting......Page 77 Function’s name Property......Page 78 Function Hoisting......Page 79 Callback Pattern......Page 80 A Callback Example......Page 81 Callbacks and Scope......Page 82 Timeouts......Page 84 Returning Functions......Page 85 Self-Defining Functions......Page 86 Immediate Functions......Page 87 Parameters of an Immediate Function......Page 88 Returned Values from Immediate Functions......Page 89 Benefits and Usage......Page 90 Immediate Object Initialization......Page 91 Init-Time Branching......Page 92 Function Properties—A Memoization Pattern......Page 94 Configuration Objects......Page 95 Function Application......Page 97 Partial Application......Page 98 Currying......Page 99 When to Use Currying......Page 101 Summary......Page 102 Namespace Pattern......Page 105 General Purpose Namespace Function......Page 107 Declaring Dependencies......Page 108 Private Members......Page 110 Privacy Failures......Page 111 Object Literals and Privacy......Page 112 Prototypes and Privacy......Page 113 Revealing Private Functions As Public Methods......Page 114 Module Pattern......Page 115 Revealing Module Pattern......Page 117 Modules That Create Constructors......Page 118 A Global Constructor......Page 119 Adding Modules......Page 121 Implementing the Constructor......Page 122 Public Static Members......Page 123 Private Static Members......Page 125 Object Constants......Page 127 Chaining Pattern......Page 128 Pros and Cons of the Chaining Pattern......Page 129 method() Method......Page 130 Summary......Page 131 Classical Versus Modern Inheritance Patterns......Page 133 Expected Outcome When Using Classical Inheritance......Page 134 Following the Prototype Chain......Page 135 Drawbacks When Using Pattern #1......Page 137 Classical Pattern #2—Rent-a-Constructor......Page 138 The Prototype Chain......Page 139 Multiple Inheritance by Borrowing Constructors......Page 140 Classical Pattern #3—Rent and Set Prototype......Page 141 Classical Pattern #4—Share the Prototype......Page 142 Classical Pattern #5—A Temporary Constructor......Page 143 Storing the Superclass......Page 144 Resetting the Constructor Pointer......Page 145 Klass......Page 146 Prototypal Inheritance......Page 148 Addition to ECMAScript 5......Page 150 Inheritance by Copying Properties......Page 151 Mix-ins......Page 153 Borrowing Methods......Page 154 Borrow and Bind......Page 155 Function.prototype.bind()......Page 156 Summary......Page 157 Singleton......Page 159 Using new......Page 160 Instance in a Static Property......Page 161 Instance in a Closure......Page 162 Factory......Page 164 Built-in Object Factory......Page 166 Iterator......Page 167 Implementation......Page 169 Implementation Using a List......Page 172 Strategy......Page 173 Data Validation Example......Page 174 Façade......Page 176 Proxy......Page 177 A video expando......Page 178 Without a proxy......Page 179 Event handlers......Page 180 videos object......Page 181 http object......Page 182 Enter the proxy......Page 183 Mediator......Page 185 Mediator Example......Page 186 Example #1: Magazine Subscriptions......Page 189 Example #2: The Keypress Game......Page 193 Summary......Page 196 Separation of Concerns......Page 199 DOM Access......Page 201 DOM Manipulation......Page 202 Events......Page 203 Event Handling......Page 204 Event Delegation......Page 206 setTimeout()......Page 207 Remote Scripting......Page 208 XMLHttpRequest......Page 209 JSONP......Page 210 JSONP example: Tic-tac-toe......Page 211 Frames and Image Beacons......Page 213 Combining Scripts......Page 214 Using a CDN......Page 215 Loading Strategies......Page 216 The Place of the Element......Page 217 HTTP Chunking......Page 218 Dynamic Element for Nonblocking Downloads......Page 219 Appending the element......Page 220 Loading on Demand......Page 221 Preloading JavaScript......Page 223 Summary......Page 224 Index......Page 227 Copyright 6 Table of Contents 9 Preface 15 Target Audience 15 Conventions Used in This Book 15 Using Code Examples 16 Safari® Books Online 16 How to Contact Us 17 Acknowledgments 17 Credits 18 Reading 18 Chapter 1. Introduction 19 Patterns 19 Concepts 21 Object-Oriented 21 No Classes 22 Prototypes 22 Environment 23 ECMAScript 5 23 JSLint 24 The Console 24 Chapter 2. Essentials 27 Writing Maintainable Code 27 Minimizing Globals 28 The Problem with Globals 29 Side Effects When Forgetting var 30 Access to the Global Object 31 Single var Pattern 31 Hoisting: A Problem with Scattered vars 32 for Loops 33 for-in Loops 35 (Not) Augmenting Built-in Prototypes 37 switch Pattern 38 Avoiding Implied Typecasting 39 Avoiding eval() 39 Number Conversions with parseInt() 41 Coding Conventions 41 Indentation 42 Curly Braces 42 Opening Brace Location 43 White Space 44 Naming Conventions 46 Capitalizing Constructors 46 Separating Words 46 Other Naming Patterns 47 Writing Comments 48 Writing API Docs 48 YUIDoc Example 49 Writing to Be Read 52 Peer Reviews 53 Minify...In Production 54 Run JSLint 55 Summary 55 Chapter 3. Literals and Constructors 57 Object Literal 57 The Object Literal Syntax 58 Objects from a Constructor 59 Object Constructor Catch 59 Custom Constructor Functions 60 Constructor’s Return Values 61 Patterns for Enforcing new 62 Naming Convention 63 Using that 63 Self-Invoking Constructor 64 Array Literal 64 Array Literal Syntax 65 Array Constructor Curiousness 65 Check for Array-ness 66 JSON 67 Working with JSON 67 Regular Expression Literal 68 Regular Expression Literal Syntax 69 Primitive Wrappers 70 Error Objects 71 Summary 72 Chapter 4. Functions 75 Background 75 Disambiguation of Terminology 76 Declarations Versus Expressions: Names and Hoisting 77 Function’s name Property 78 Function Hoisting 79 Callback Pattern 80 A Callback Example 81 Callbacks and Scope 82 Asynchronous Event Listeners 84 Timeouts 84 Callbacks in Libraries 85 Returning Functions 85 Self-Defining Functions 86 Immediate Functions 87 Parameters of an Immediate Function 88 Returned Values from Immediate Functions 89 Benefits and Usage 90 Immediate Object Initialization 91 Init-Time Branching 92 Function Properties—A Memoization Pattern 94 Configuration Objects 95 Curry 97 Function Application 97 Partial Application 98 Currying 99 When to Use Currying 101 Summary 102 Chapter 5. Object Creation Patterns 105 Namespace Pattern 105 General Purpose Namespace Function 107 Declaring Dependencies 108 Private Properties and Methods 110 Private Members 110 Privileged Methods 111 Privacy Failures 111 Object Literals and Privacy 112 Prototypes and Privacy 113 Revealing Private Functions As Public Methods 114 Module Pattern 115 Revealing Module Pattern 117 Modules That Create Constructors 118 Importing Globals into a Module 119 Sandbox Pattern 119 A Global Constructor 119 Adding Modules 121 Implementing the Constructor 122 Static Members 123 Public Static Members 123 Private Static Members 125 Object Constants 127 Chaining Pattern 128 Pros and Cons of the Chaining Pattern 129 method() Method 130 Summary 131 Chapter 6. Code Reuse Patterns 133 Classical Versus Modern Inheritance Patterns 133 Expected Outcome When Using Classical Inheritance 134 Classical Pattern #1—The Default Pattern 135 Following the Prototype Chain 135 Drawbacks When Using Pattern #1 137 Classical Pattern #2—Rent-a-Constructor 138 The Prototype Chain 139 Multiple Inheritance by Borrowing Constructors 140 Pros and Cons of the Borrowing Constructor Pattern 141 Classical Pattern #3—Rent and Set Prototype 141 Classical Pattern #4—Share the Prototype 142 Classical Pattern #5—A Temporary Constructor 143 Storing the Superclass 144 Resetting the Constructor Pointer 145 Klass 146 Prototypal Inheritance 148 Discussion 150 Addition to ECMAScript 5 150 Inheritance by Copying Properties 151 Mix-ins 153 Borrowing Methods 154 Example: Borrow from Array 155 Borrow and Bind 155 Function.prototype.bind() 156 Summary 157 Chapter 7. Design Patterns 159 Singleton 159 Using new 160 Instance in a Static Property 161 Instance in a Closure 162 Factory 164 Built-in Object Factory 166 Iterator 167 Decorator 169 Usage 169 Implementation 169 Implementation Using a List 172 Strategy 173 Data Validation Example 174 Façade 176 Proxy 177 An Example 178 A video expando 178 Without a proxy 179 HTML 180 Event handlers 180 videos object 181 http object 182 Enter the proxy 183 Proxy As a Cache 185 Mediator 185 Mediator Example 186 Observer 189 Example #1: Magazine Subscriptions 189 Example #2: The Keypress Game 193 Summary 196 Chapter 8. DOM and Browser Patterns 199 Separation of Concerns 199 DOM Scripting 201 DOM Access 201 DOM Manipulation 202 Events 203 Event Handling 204 Event Delegation 206 Long-Running Scripts 207 setTimeout() 207 Web Workers 208 Remote Scripting 208 XMLHttpRequest 209 JSONP 210 JSONP example: Tic-tac-toe 211 Frames and Image Beacons 213 Deploying JavaScript 214 Combining Scripts 214 Minifying and Compressing 215 Expires Header 215 Using a CDN 215 Loading Strategies 216 The Place of the Element 217 HTTP Chunking 218 Dynamic Element for Nonblocking Downloads 219 Appending the element 220 Lazy-Loading 221 Loading on Demand 221 Preloading JavaScript 223 Summary 224 Index 227 What's the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you're an experienced developer looking to solve problems related to objects, functions, inheritance, and other language-specific categories, the abstractions and code templates in this guide are ideal—whether you're using JavaScript to write a client-side, server-side, or desktop application.Written by JavaScript expert Stoyan Stefanov—Senior Yahoo! Technical and architect of YSlow 2.0, the web page performance optimization tool—JavaScript Patterns includes practical advice for implementing each pattern discussed, along with several hands-on examples. You'll also learn about anti-patterns: common programming approaches that cause more problems than they solve.Explore useful habits for writing high-quality JavaScript code, such as avoiding globals, using single var declarations, and moreLearn why literal notation patterns are simpler alternatives to constructor functionsDiscover different ways to define a function in JavaScriptCreate objects that go beyond the basic patterns of using object literals and constructor functionsLearn the options available for code reuse and inheritance in JavaScriptStudy sample JavaScript approaches to common design patterns such as Singleton, Factory, Decorator, and moreExamine patterns that apply specifically to the client-side browser environment What's the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you're an experienced developer looking to solve problems related to objects, functions, inheritance, and other language-specific categories, the abstractions and code templates in this guide are ideal--whether you're using JavaScript to write a client-side, server-side, or desktop application. Written by JavaScript expert Stoyan Stefanov--Senior Yahoo! Technical and architect of YSlow 2.0, the web page performance optimization tool-- JavaScript Patterns includes practical advice for implementing each pattern discussed, along with several hands-on examples. You'll also learn about anti-patterns: common programming approaches that cause more problems than they solve. Explore useful habits for writing high-quality JavaScript code, such as avoiding globals, using single var declarations, and more Learn why literal notation patterns are simpler alternatives to constructor functions Discover different ways to define a function in JavaScript Create objects that go beyond the basic patterns of using object literals and constructor functions Learn the options available for code reuse and inheritance in JavaScript Study sample JavaScript approaches to common design patterns such as Singleton, Factory, Decorator, and more Examine patterns that apply specifically to the client-side browser environment What's the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you're an experienced developer looking to solve problems related to objects, functions, inheritance, and other language-specific categories, the abstractions and code templates in this guide are ideal -- whether you're writing a client-side, server-side, or desktop application with JavaScript. Written by JavaScript expert Stoyan Stefanov -- Senior Yahoo! Technical and architect of YSlow 2.0, the web page performance opt