Pro JavaScript Development Coding, Capabilities, and Tooling Den Odell Apress"
Contents J About the Author About the Technical Reviewers Acknowledgments Introduction xv xvii xix xxi Chapter 1: Object-Oriented JavaScript.. 1 Objects in JavaScript 1 Custom Objects 1 Classes 2 Coding Conventions And Naming 23 Rule 1: Use descriptive names 24 Rule 2: Begin with a lowercase letter 24 Rule 3: Use camel-case to represent word divisions 25 Rule 4: Use ail uppercase characters to represent universal constants 25 Rule 5: Group together variable declarations in one statement at the top of every function block 26 ECMAScript 5 28 JSON Data Format Parsing 28 Strict Mode 29 Function binding 30 Array Methods 31 Object Methods 33 Summary 36 vii
Markdown M CONTENTS Chapter 2: Documenting JavaScript 37 Inline and Block Comments 37 Structured JavaScript Documentation 38 The YUlDoc Documentation Format 38 Documenting "Classes", Constructors, Properties and Methods 39 Documenting Events 47 Documenting Code Examples 48 Other YUlDoc Documentation Tags 48 Expressive Documentation Formatting - 48 Grouping Content Under Headings 49 Breaking Lines And Creating Paragraphs 49 Creating Lists 50 Emphasizing Text 53 Displaying Code 54 Adding Quotes 54 Linking To URLs 55 Inserting Images 56 Creating Horizontal Rules 56 Using Backslash To Insert Reserved Characters 57 For Everything Else, There's HTML 57 Creating a Documentation Website Using YUlDoc 58 Taking It Further 63 Summary 63 Chapter 3: Writing High-Quality JavaScript 65 Performing Static Code Analysis 65 JSLint 65 JSHint 69 Google Closure Compiler and Linter 70 Choosing a Static Code Analysis Tool 71 viii
m CONTENTS Unit Testing In JavaScript 71 Unit Testing Frameworks For JavaScript 72 Using Jasmine For JavaScript Unit Testing 72 Handling Runtime Errors 79 JavaScript's Native Error Types 79 Wrap Code That May Error In A try-catch Statement 80 Detecting The Type Of Error Thrown 81 Creating Custom Error Types 82 Measuring Code Quality 83 Unit Test Code Coverage 83 Measuring Code Complexity 86 Summary 89 Chapter 4: Boosting JavaScript Performance 91 Improving Page Loading Time 91 HTML Tag Order Matters 91 GZip Encode Delivery Of Your JavaScript Files 91 Minification, Obfuscation, and Compilation 92 Lazy Loading JavaScript Files On Demand 97 Optimize Document Object Manipulation 98 Minimise Access to Page Elements 98 Close Existing Elements Where Possible 99 Utilise The Offline DOM 100 Use CSS To Manipulate Page Styles Rather Than JavaScript 100 Improving DOM Event Performance 101 Delegate Events To Parent Elements 101 Handle Rapid-Fire Events With Framing 103 Improving Function Performance 104 Storing Previous Function Return Values With Memoization 104 ix
«CONTENTS Faster String Manipulation With Regular Expressions 106 Faster Use Of Arrays 110 Fast Array Creation 110 Fast Array Looping 110 Offload Intensive Tasks To Web Workers 113 Using a Web Worker to Process Image Data 114 Basic Performance Measurements 117 Summary 118 Chapter 5: Design Patterns: Creational 119 What Are Design Patterns? 119 Creational Design Patterns 120 The Factory Pattern 120 The Abstract Factory Pattern 122 The Builder Pattern 127 The Prototype Pattern 129 The Singleton Pattern 132 Summary 135 Chapter 6: Design Patterns: Structural 137 The Adapter Pattern 137 The Composite Pattern 140 The Decorator Pattern 141 The Fagade Pattern 143 The Flyweight Pattern 145 The Mixin Pattern 152 The Module Pattern 155 The Proxy Pattern 159 Summary 161 X
CONTENTS Chapter 7: Design Patterns: Behavioral 163 The Chain of Responsibility Pattern 163 The Command Pattern 166 The Iterator Pattern 169 The Observer Pattern 172 The Mediator Pattern 177 The Memento Pattern 181 The Promises Pattern 183 The Strategy Pattern 194 Summary 198 Chapter 8: Design Patterns: Architectural 199 The Model-View-Controller (MVC) Pattern 199 The Model-View-Presenter (MVP) Pattern 209 The Model-View-ViewModel (MWM) Pattern 214 Architectural Pattern Frameworks 220 Summary 221 Chapter 9: Managing Code File Dependencies 223 Using RequireJS to Manage Code File Dependencies 223 Loading and Initializing RequireJS 228 Using Aliases For Module Names 230 Content Delivery Networks and Fallbacks 230 Creating Modules 231 Loading Additional Scripts On Demand 232 The RequireJS Code Optimizer Tool 234 Additional Plugins for RequireJS 234 Alternatives To RequireJS 235 Summary 235 xi
CONTENTS Chapter 10: Mobile JavaScript Development 237 The Constraints of Mobile Web Development 237 Battery Life 237 Network Bandwidth Speeds And Latency 238 On-Board Memory Size 238 Operating System Responsiveness 239 Accessing Mobile Device Sensors with JavaScript 239 Accessing The Geolocation Sensor 240 Accessing The Touch Sensor 243 Accessing The Orientation and Direction Sensors 245 Accessing The Motion Sensor 248 The Missing Sensors 249 Event Framing For Sensor Data 250 Taking Sensor Data Further 250 Network Connection Failures And Offline States 251 Detecting Online and Offline States 251 Persisting Data With The Web Storage API 253 The HTML5 Application Cache 256 JavaScript For Responsive Design 258 Summary 259 Chapter 11: Building Games with Canvas API 261 Basic Drawing Operations in Canvas 261 High-Definition Canvas Elements 264 Building Games Using Canvas 265 Drawing Images onto a Canvas 265 Animation in Canvas 267 Game Control 268 Collision Detection 269 The Game Loop 270 Layering Canvases for Better Performance 272 xii
SS CONTENTS Building a "Frogger" Game in Canvas 272 Summary 319 Chapter 12: Using WebRTC for Video Chat 321 The WebRTC Specification 321 Accessing the Webcam and Microphone 322 Creating a Simple Video Chat Web Application 325 Connection and Signalling 325 Building the Video Chat Client 328 Summary 339 Chapter 13: Using Client-Side Templates 341 Dynamically Updating Page Content 341 Loading HTML Dynamically Via Ajax 342 Client-Side Templating 343 Client-Side Templating without a Library 344 Client-Side Templating with Mustache.js 345 Client-Side Templating with Handlebars.js 353 Alternative Client-Side Templating Libraries 364 Consider Progressive Enhancement 367 Summary 368 Chapter 14: The Node.js Application Platform 369 Installing Node.js 369 Writing Node.js Applications 370 The Console 371 Loading Modules 372 Node.js Packages 374 Splitting a Node.js Application across Multiple Files 380 Node.js Frameworks for Web Applications 382 Express 382 Socket.10 384 xiii
? CONTENTS Node.js Hosting 389 Summary 390 Chapter 15: Build Tools and Automation 391 Build Tools 391 Grunt The JavaScript Task Runner 392 Gulp.js The Streaming Build System 400 Using Build Tools to Automate Common Tasks 404 Managing Third-Party Libraries and Frameworks 419 Project Setup and Scaffolding 420 Summary 422 Chapter 16: Browser Developer Tools 423 Locating the Hidden Browser Developer Tools 423 The JavaScript Console 425 Outputting Messages to the Console Window 425 Using the Console for Performance Measurement 427 Remove Code References to the Console Object for Release 428 Debugging Running JavaScript Code 428 Working with Minified Code 428 Pause and Observe Running JavaScript Code 430 Profiling JavaScript Code 432 Locating Memory Leaks 432 Identifying Performance Bottlenecks 435 Summary 437 Index 439 xiv