Secrets of the JavaScript Ninja JOHN RESIG BEAR BIBEAULT MANNING SHELTER ISLAND For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: [email protected] ©2013 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editors: Jeff Bleiel, Sebastian Stirling 20 Baldwin Road Technical editor: Valentin Crettaz PO Box 261 Copyeditor: Andy Carroll Shelter Island, NY 11964 Proofreader: Melody Dolab Typesetter: Dennis Dalinnik Cover designer: Leslie Haimes ISBN: 978-1-933988-69-6 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 18 17 16 15 14 13 12 brief contents PART 1 PREPARING FOR TRAINING. ...........................................1 1 ■ Enter the ninja 3 2 ■ Arming with testing and debugging 13 PART 2 APPRENTICE TRAINING ................................................29 3 ■ Functions are fundamental 31 4 ■ Wielding functions 61 5 ■ Closing in on closures 89 6 ■ Object-orientation with prototypes 119 7 ■ Wrangling regular expressions 151 8 ■ Taming threads and timers 175 PART 3 NINJA TRAINING........................................................191 9 ■ Ninja alchemy: runtime code evaluation 193 10 ■ With statements 215 11 ■ Developing cross-browser strategies 229 12 ■ Cutting through attributes, properties, and CSS 253 iii iv BRIEF CONTENTS PART 4 MASTER TRAINING.....................................................287 13 ■ Surviving events 289 14 ■ Manipulating the DOM 329 15 ■ CSS selector engines 345 contents preface xi acknowledgments xiii about this book xv about the authors xx PART 1 PREPARING FOR TRAINING . ...............................1 Enter the ninja 3 1 1.1 The JavaScript libraries we’ll be tapping 4 1.2 Understanding the JavaScript language 5 1.3 Cross-browser considerations 6 1.4 Current best practices 9 Current best practice: testing 9 ■ Current best practice: performance analysis 10 1.5 Summary 11 Arming with testing and debugging 13 2 2.1 Debugging code 14 Logging 14 ■ Breakpoints 16 v vi CONTENTS 2.2 Test generation 17 2.3 Testing frameworks 19 QUnit 21 ■ YUI Test 22 ■ JsUnit 22 Newer unit-testing frameworks 22 2.4 The fundamentals of a test suite 22 The assertion 23 ■ Test groups 24 ■ Asynchronous testing 25 2.5 Summary 27 PART 2 APPRENTICE TRAINING.....................................29 Functions are fundamental 31 3 3.1 What’s with the functional difference? 32 Why is JavaScript’s functional nature important? 33 Sorting with a comparator 37 3.2 Declarations 40 Scoping and functions 43 3.3 Invocations 46 From arguments to function parameters 47 ■ Invocation as a function 49 ■ Invocation as a method 50 ■ Invocation as a constructor 52 ■ Invocation with the apply() and call() methods 54 3.4 Summary 58 Wielding functions 61 4 4.1 Anonymous functions 62 4.2 Recursion 64 Recursion in named functions 64 ■ Recursion with methods 65 The pilfered reference problem 66 ■ Inline named functions 68 The callee property 70 4.3 Fun with function as objects 71 Storing functions 72 ■ Self-memoizing functions 73 Faking array methods 76 4.4 Variable-length argument lists 77 Using apply() to supply variable arguments 77 Function overloading 79 4.5 Checking for functions 86 4.6 Summary 88 CONTENTS vii Closing in on closures 89 5 5.1 How closures work 90 5.2 Putting closures to work 94 Private variables 94 ■ Callbacks and timers 96 5.3 Binding function contexts 99 5.4 Partially applying functions 103 5.5 Overriding function behavior 106 Memoization 106 ■ Function wrapping 109 5.6 Immediate functions 111 Temporary scope and private variables 112 ■ Loops 115 Library wrapping 117 5.7 Summary 118 Object-orientation with prototypes 119 6 6.1 Instantiation and prototypes 120 Object instantiation 120 ■ Object typing via constructors 127 Inheritance and the prototype chain 128 HTML DOM prototypes 133 6.2 The gotchas! 135 Extending Object 135 ■ Extending Number 136 Subclassing native objects 137 ■ Instantiation issues 139 6.3 Writing class-like code 143 Checking for function serializability 146 ■ Initialization of subclasses 147 ■ Preserving super-methods 148 6.4 Summary 150 Wrangling regular expressions 151 7 7.1 Why regular expressions rock 152 7.2 A regular expression refresher 153 Regular expressions explained 153 ■ Terms and operators 154 7.3 Compiling regular expressions 158 7.4 Capturing matching segments 161 Performing simple captures 161 ■ Matching using global expressions 162 ■ Referencing captures 163 Non-capturing groups 165 7.5 Replacing using functions 166 viii CONTENTS 7.6 Solving common problems with regular expressions 168 Trimming a string 168 ■ Matching newlines 170 Unicode 171 ■ Escaped characters 172 7.7 Summary 172 Taming threads and timers 175 8 8.1 How timers and threading work 176 Setting and clearing timers 176 ■ Timer execution within the execution thread 177 ■ Differences between timeouts and intervals 179 8.2 Minimum timer delay and reliability 180 8.3 Dealing with computationally expensive processing 183 8.4 Central timer control 186 8.5 Asynchronous testing 189 8.6 Summary 190 PART 3 NINJA TRAINING ............................................191 Ninja alchemy: runtime code evaluation 193 9 9.1 Code evaluation mechanisms 194 Evaluation with the eval() method 194 ■ Evaluation via the Function constructor 197 ■ Evaluation with timers 197 Evaluation in the global scope 198 ■ Safe code evaluation 199 9.2 Function “decompilation” 201 9.3 Code evaluation in action 204 Converting JSON 204 ■ Importing namespaced code 205 JavaScript compression and obfuscation 206 ■ Dynamic code rewriting 208 ■ Aspect-oriented script tags 209 Metalanguages and DSLs 210 9.4 Summary 213 With statements 215 10 10.1 What’s with “with”? 216 Referencing properties within a with scope 216 ■ Assignments within a with scope 218 ■ Performance considerations 219 10.2 Real-world examples 221 10.3 Importing namespaced code 223 CONTENTS ix 10.4 Testing 223 10.5 Templating with “with” 224 10.6 Summary 227 Developing cross-browser strategies 229 11 11.1 Choosing which browsers to support 230 11.2 The five major development concerns 231 Browser bugs and differences 232 ■ Browser bug fixes 233 Living with external code and markup 234 Missing features 239 ■ Regressions 240 11.3 Implementation strategies 242 Safe cross-browser fixes 242 ■ Object detection 243 Feature simulation 245 ■ Untestable browser issues 247 11.4 Reducing assumptions 249 11.5 Summary 251 Cutting through attributes, properties, and CSS 253 12 12.1 DOM attributes and properties 255 Cross-browser naming 256 ■ Naming restrictions 257 Differences between XML and HTML 257 ■ Behavior of custom attributes 258 ■ Performance considerations 258 12.2 Cross-browser attribute issues 262 DOM id/name expansion 262 ■ URL normalization 264 The style attribute 265 ■ The type attribute 265 The tab index problem 266 ■ Node names 267 12.3 Styling attribute headaches 267 Where are my styles? 268 ■ Style property naming 270 The float style property 271 ■ Conversion of pixel values 271 Measuring heights and widths 272 ■ Seeing through opacity 276 ■ Riding the color wheel 279 12.4 Fetching computed styles 282 12.5 Summary 285 PART 4 MASTER TRAINING .........................................287 Surviving events 289 13 13.1 Binding and unbinding event handlers 290 13.2 The Event object 294 x CONTENTS 13.3 Handler management 297 Centrally storing associated information 298 Managing event handlers 300 13.4 Triggering events 309 Custom events 310 13.5 Bubbling and delegation 315 Delegating events to an ancestor 315 ■ Working around browser deficiencies 316 13.6 The document ready event 324 13.7 Summary 326 Manipulating the DOM 329 14 14.1 Injecting HTML into the DOM 330 Converting HTML to DOM 331 ■ Inserting into the document 334 ■ Script execution 336 14.2 Cloning elements 338 14.3 Removing elements 340 14.4 Text contents 341 Setting text 342 ■ Getting text 343 14.5 Summary 344 CSS selector engines 345 15 15.1 The W3C Selectors API 347 15.2 Using XPath to find elements 349 15.3 The pure-DOM implementation 351 Parsing the selector 353 ■ Finding the elements 354 Filtering the set 355 ■ Recursing and merging 356 Bottom-up selector engine 357 15.4 Summary 359 index 361 preface When I started writing Secrets of the JavaScript Ninja years ago, in early 2008, I saw a real need: there were no books providing in-depth coverage of the most important parts of the JavaScript language (functions, closures, and prototypes), nor were there any books that covered the writing of cross-browser code. Unfortunately, the situation has not improved much, which is surprising. More and more development energy is being put into new technologies, such as the ones coming out of HTML5 or the new versions of ECMAScript. But there isn’t any point to diving into new technologies, or using the hottest libraries, if you don’t have a proper understanding of the fundamental characteristics of the JavaScript language.