• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Maintainable JavaScript
 

Maintainable JavaScript

on

  • 14,911 views

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.

Statistics

Views

Total Views
14,911
Views on SlideShare
14,797
Embed Views
114

Actions

Likes
32
Downloads
251
Comments
0

16 Embeds 114

http://www.slideshare.net 47
http://skrumskii.blogspot.com 23
http://www.linkedin.com 16
https://www.linkedin.com 9
http://onwebdev.blogspot.com 6
http://skrumskii.blogspot.de 3
http://www.scoop.it 1
http://espig.blogspot.com.ar 1
http://blog.gabrieleromanato.com 1
http://onwebdev.blogspot.co.uk 1
http://kalevresyn.blogspot.com 1
http://kalevresyn.blogspot.de 1
http://translate.yandex.net 1
http://paper.li 1
http://espig.blogspot.com 1
http://espig.posterous.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Maintainable JavaScript Maintainable JavaScript Presentation Transcript

    • 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