www.it-ebooks.info www.it-ebooks.info Maintainable JavaScript Nicholas C Zakas Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo www.it-ebooks.info Maintainable JavaScript by Nicholas C Zakas Copyright © 2012 Nicholas Zakas All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://my.safaribooksonline.com) For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com Editor: Mary Treseler Production Editor: Holly Bauer Copyeditor: Nancy Kotary Proofreader: Linley Dolby May 2012: Indexer: Lucie Haskins Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Rebecca Demarest First Edition Revision History for the First Edition: 2012-05-09 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449327682 for release details Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc Maintainable JavaScript, the image of a Greek tortoise, and related trade dress are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein ISBN: 978-1-449-32768-2 [LSI] 1336581452 www.it-ebooks.info Table of Contents Introduction ix Preface xiii Part I Style Guidelines Basic Formatting Indentation Levels Statement Termination Line Length Line Breaking Blank Lines Naming Variables and Functions Constants Constructors Literal Values Strings Numbers Null Undefined Object Literals Array Literals 10 11 11 13 13 14 14 15 16 17 18 19 Comments 21 Single-Line Comments Multiline Comments Using Comments Difficult-to-Understand Code Potential Author Errors 21 23 24 25 25 iii www.it-ebooks.info Browser-Specific Hacks Documentation Comments 26 27 Statements and Expressions 29 Brace Alignment Block Statement Spacing The switch Statement Indentation Falling Through default The with Statement The for Loop The for-in Loop 30 31 31 32 33 34 35 35 37 Variables, Functions, and Operators 39 Variable Declarations Function Declarations Function Call Spacing Immediate Function Invocation Strict Mode Equality eval() Primitive Wrapper Types 39 41 42 43 44 45 47 48 Part II Programming Practices Loose Coupling of UI Layers 53 What Is Loose Coupling? Keep JavaScript Out of CSS Keep CSS Out of JavaScript Keep JavaScript Out of HTML Keep HTML Out of JavaScript Alternative #1: Load from the Server Alternative #2: Simple Client-Side Templates Alternative #3: Complex Client-Side Templates 54 55 56 57 59 60 61 63 Avoid Globals 67 The Problems with Globals Naming Collisions Code Fragility Difficulty Testing Accidental Globals iv | Table of Contents www.it-ebooks.info 67 68 68 69 69 Avoiding Accidental Globals The One-Global Approach Namespaces Modules The Zero-Global Approach 70 71 72 74 76 Event Handling 79 Classic Usage Rule #1: Separate Application Logic Rule #2: Don’t Pass the Event Object Around 79 80 81 Avoid Null Comparisons 83 Detecting Primitive Values Detecting Reference Values Detecting Functions Detecting Arrays Detecting Properties 83 85 87 88 89 Separate Configuration Data from Code 91 What Is Configuration Data? Externalizing Configuration Data Storing Configuration Data 91 92 93 10 Throw Your Own Errors 95 The Nature of Errors Throwing Errors in JavaScript Advantages of Throwing Errors When to Throw Errors The try-catch Statement Throw or try-catch? Error Types 95 96 97 97 99 100 100 11 Don’t Modify Objects You Don’t Own 103 What Do You Own? The Rules Don’t Override Methods Don’t Add New Methods Don’t Remove Methods Better Approaches Object-Based Inheritance Type-Based Inheritance The Facade Pattern A Note on Polyfills 103 104 104 105 107 108 108 109 110 111 Table of Contents | v www.it-ebooks.info Preventing Modification 112 12 Browser Detection 115 User-Agent Detection Feature Detection Avoid Feature Inference Avoid Browser Inference What Should You Use? 115 117 119 120 122 Part III Automation 13 File and Directory Structure 127 Best Practices Basic Layout 127 128 14 Ant 133 Installation The Build File Running the Build Target Dependencies Properties Buildr 133 133 134 135 136 137 15 Validation 139 Finding Files The Task Improving the Target Other Improvements Buildr Task 139 140 141 142 143 16 Concatenation and Baking 145 The Task Line Endings Headers and Footers Baking Files 145 146 147 148 17 Minification and Compression 151 Minification Minifying with YUI Compressor Minifying with Closure Compiler Minifying with UglifyJS Compression vi | Table of Contents www.it-ebooks.info 151 152 154 156 157 Runtime Compression Build-Time Compression 157 158 18 Documentation 161 JSDoc Toolkit YUI Doc 161 163 19 Automated Testing 167 YUI Test Selenium Driver Setting Up a Selenium Server Setting Up YUI Test Selenium Driver Using the YUI Test Selenium Driver The Ant Target Yeti PhantomJS Installation and Usage The Ant Target JsTestDriver Installation and Usage The Ant Target 167 168 168 168 170 171 172 172 173 173 174 174 20 Putting It Together 177 Missing Pieces Planning the Build The Development Build The Integration Build The Release Build Using a CI System Jenkins Other CI Systems 177 178 179 180 180 181 181 184 A JavaScript Style Guide 185 B JavaScript Tools 205 Index 209 Table of Contents | vii www.it-ebooks.info www.it-ebooks.info ...www.it-ebooks.info Maintainable JavaScript Nicholas C Zakas Beijing • Cambridge • Farnham • Kưln • Sebastopol • Tokyo www.it-ebooks.info Maintainable JavaScript by Nicholas C Zakas... 53 What Is Loose Coupling? Keep JavaScript Out of CSS Keep CSS Out of JavaScript Keep JavaScript Out of HTML Keep HTML Out of JavaScript Alternative #1: Load from the Server Alternative... Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc Maintainable JavaScript, the image of a Greek tortoise, and related trade dress are trademarks of O’Reilly