Your SlideShare is downloading. ×
0
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Maintainable JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Maintainable JavaScript

14,267

Published on

Explains how to write JavaScript in a way that creates the most value for your company, making it maintainable.

Explains how to write JavaScript in a way that creates the most value for your company, making it maintainable.

Published in: Technology
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,267
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
257
Comments
0
Likes
32
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Maintainable JavaS cript Nicholas C . Zakas S r. Frontend E ngineer, M y Yahoo!
  • 2. Why? Writing New Code Maintaining Code
  • 3. Who cares ? • Your employer • Your co-workers, present and future • D evelopment community
  • 4. What is maintainability? • Understandable • Intuitive • Adaptable • E xtendable • D ebuggable
  • 5. C ode C onventions M aintainable JavaS cript
  • 6. R eadable code • Indent your code • C omment your code – E ach method – Large sections of code – D ifficult-to-understand algorithms – Hacks
  • 7. 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
  • 8. Indicate variable type • Initialization var found = false; • Hungarian Notation var sName = quot;Nicholasquot;; • Type C omments var cost /*:float*/ = 5.23;
  • 9. Loos e C oupling M aintainable JavaS cript
  • 10. C lient-s ide Layers Behavior Presentation (JavaScript) (CSS) Structure (HTML)
  • 11. 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;;
  • 12. 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;;
  • 13. E vent handlers handle events function handleKeyPress(event){ if (event.keyCode == 13){ var value = 5 * parseInt(txt.value); div.innerHTML = value; alert(quot;Updatedquot;); } }
  • 14. E vent handlers handle events function handleKeyPress(event){ if (event.keyCode == 13){ performCalculation(); updateUI(); } }
  • 15. Prog ramming Practices M aintainable JavaS cript
  • 16. 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
  • 17. 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
  • 18. Don’t overus e popular techniques • C losures/nested functions – Use sparingly • O bject literals – S ingletons – P ass data
  • 19. Throw your own errors function add5(value) { if (arguments.length < 1) { throw new Error(quot;add5: Not enough argsquot;); } return value + 5; }
  • 20. Avoid null comparis ons function sortArray(value) { if (value != null) { value.sort(); } }
  • 21. Avoid null comparis ons function sortArray(value) { if (value instanceof Array) { value.sort(); } }
  • 22. 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;); } }
  • 23. 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;) {
  • 24. Us e C ons tants function validate(value) { if (!value) { alert(quot;Invalid valuequot;); location.href = quot;/errors/invalid.phpquot;; } }
  • 25. 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; } }
  • 26. Us e C ons tants • R epeated unique values • UI strings • UR Ls • Any value that may change in the future
  • 27. B uild Proces s M aintainable JavaS cript
  • 28. B uild Proces s Source Files Build
  • 29. 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
  • 30. S ummary M aintainable JavaS cript
  • 31. S ummary • C ode C onventions • Loose C oupling • P rogramming P ractices • B uild P rocess
  • 32. Ques tions and Ans wers M aintainable JavaS cript
  • 33. E tcetera • M y email: nzakas@ yahoo-inc.com • M y blog: www.nczonline.net

×