Maintainable JavaScript

Maintainable JavaS cript Nicholas C . Zakas S r. Frontend E ngineer, M y Yahoo!

Why? Writing New Code Maintaining Code

Who cares ? • Your employer • Your co-workers, present and future • D evelopment community

What is maintainability? • Understandable • Intuitive • Adaptable • E xtendable • D ebuggable

C ode C onventions M aintainable JavaS cript

R eadable code • Indent your code • C omment your code – E ach method – Large sections of code – D ifficult-to-understand algorithms – Hacks

Naming • Use logical names for variables and functions – D on’t worry about length • Variable names should be nouns (i.e., car) • Function names should begin with a verb (i.e., getName()) – For functions returning Boolean values, prefix with “is”, such as isValid() • Avoid useless names such as foo, bar, temp

Indicate variable type • Initialization var found = false; • Hungarian Notation var sName = quot;Nicholasquot;; • Type C omments var cost /*:float*/ = 5.23;

Loos e C oupling M aintainable JavaS cript

C lient-s ide Layers Behavior Presentation (JavaScript) (CSS) Structure (HTML)

S eparate HTML and JavaS cript • JavaS cript in HTM L <a onclick=quot;sayHi()quot;>text</a> • HTM L in JavaS cript element.innerHTML = quot;<div>quot; + quot;<a href=quot;/js/quot;>text</a></div>quot;;

S eparate C S S and JavaS cript • JavaS cript in C S S div.hd { width: expression(ref.offsetWidth+quot;pxquot;); } • C S S in JavaS cript element.style.color = quot;redquot;;

E vent handlers handle events function handleKeyPress(event){ if (event.keyCode == 13){ var value = 5 * parseInt(txt.value); div.innerHTML = value; alert(quot;Updatedquot;); } }

E vent handlers handle events function handleKeyPress(event){ if (event.keyCode == 13){ performCalculation(); updateUI(); } }

Prog ramming Practices M aintainable JavaS cript

Don’t Modify Objects You Don’t Own • D on’t add methods • D on’t override methods • You don’t own O bject, Array, R egE xp, S tring, Number, B oolean, D ate, Function

Avoid g lobals • All publicly-accessible functions/ variables should be attached to an object • Namespace your objects – D on’t go overboard – Three levels is enough YAHOO.Way.Too.Long.Namespace

Don’t overus e popular techniques • C losures/nested functions – Use sparingly • O bject literals – S ingletons – P ass data

Throw your own errors function add5(value) { if (arguments.length < 1) { throw new Error(quot;add5: Not enough argsquot;); } return value + 5; }

Avoid null comparis ons function sortArray(value) { if (value != null) { value.sort(); } }

Avoid null comparis ons function sortArray(value) { if (value instanceof Array) { value.sort(); } }

Avoid null comparis ons function sortArray(value) { if (value instanceof Array) { value.sort(); } else { throw new Error(quot;sortArray: argument must be an array.quot;); } }

Avoid null comparis ons • Use instanceof for specific types of objects if (value instanceof constructor){ • Use typeof to test for string, number, B oolean if (typeof value == quot;stringquot;) {

Us e C ons tants function validate(value) { if (!value) { alert(quot;Invalid valuequot;); location.href = quot;/errors/invalid.phpquot;; } }

Us e C ons tants var Constants = { INVALID_MSG : quot;Invalid valuequot;, INVALID_URL : quot;/errors/invalid.phpquot; }; function validate(value) { if (!value) { alert(Constants.INVALID_MSG); location.href = Constants.INVALID_URL; } }

Us e C ons tants • R epeated unique values • UI strings • UR Ls • Any value that may change in the future

B uild Proces s M aintainable JavaS cript

B uild Proces s Source Files Build

R ecommendations • O ne object or object definition per file – Indicate dependencies • Use a build step – C ombine files in appropriate order – S trip comments/ whitespace – Validate code

S ummary M aintainable JavaS cript

S ummary • C ode C onventions • Loose C oupling • P rogramming P ractices • B uild P rocess

Ques tions and Ans wers M aintainable JavaS cript

E tcetera • M y email: nzakas@ yahoo-inc.com • M y blog: www.nczonline.net

http://www.slideshare.net	47
http://skrumskii.blogspot.com	23
http://www.linkedin.com	5
http://onwebdev.blogspot.com	5
http://skrumskii.blogspot.de	3
http://paper.li	1
http://espig.blogspot.com	1
http://translate.yandex.net	1
http://kalevresyn.blogspot.de	1
http://kalevresyn.blogspot.com	1
http://onwebdev.blogspot.co.uk	1
http://blog.gabrieleromanato.com	1
http://espig.posterous.com	1

Maintainable JavaScript

by Nicholas Zakas

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 91

Statistics

Maintainable JavaScript Presentation Transcript