Maintainable JavaS cript

Nicholas C. ZakasS r. Frontend Engineer, My

Yahoo!

Why?

Writing New Code

Maintaining Code

Who cares?

• Your employer• Your co-workers, present and future• Development community

What is maintainability?

• Understandable• Intuitive• Adaptable• Extendable• Debuggable

Code ConventionsMaintainable JavaS cript

Readable code

• Indent your code• Comment your code

– Each method– Large sections of code– Difficult-to-understand algorithms– Hacks

Naming• Use logical names for variables and

functions– Don’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

• Initializationvar found = false;

• Hungarian Notationvar sName = "Nicholas";

• Type Commentsvar cost /*:float*/ = 5.23;

Loose CouplingMaintainable JavaS cript

Client-s ide Layers

Behavior(JavaScript)

Presentation(CSS)

Structure(HTML)

S eparate HTML and JavaS cript

• JavaS cript in HTML<a onclick="sayHi()">text</a>

• HTML in JavaS criptelement.innerHTML = "<div>"

+ "<a href="/js/">text</a></div>";

S eparate CS S and JavaS cript

• JavaS cript in CS Sdiv.hd {

width: expression(ref.offsetWidth+"px"); }

• CS S in JavaS criptelement.style.color = "red";

Event handlers handle events

function handleKeyPress(event){ if (event.keyCode == 13){ var value = 5 * parseInt(txt.value); div.innerHTML = value; alert("Updated"); }}

Event handlers handle events

function handleKeyPress(event){ if (event.keyCode == 13){ performCalculation(); updateUI(); }}

Programming PracticesMaintainable JavaS cript

Don’t Modify Objects You Don’t Own

• Don’t add methods• Don’t override methods

• You don’t own Object, Array, RegExp, S tring, Number, Boolean, Date, Function

Avoid globals

• All publicly-accessible functions/variables should be attached to an object

• Namespace your objects– Don’t go overboard– Three levels is enough

YAHOO.Way.Too.Long.Namespace

Don’t overuse popular techniques

• Closures/nested functions– Use sparingly

• Object literals– S ingletons– Pass data

Throw your own errors

function add5(value) { if (arguments.length < 1) { throw new Error("add5: Not enough args"); }

return value + 5;}

Avoid null comparisons

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

Avoid null comparisons

function sortArray(value) { if (value instanceof Array) { value.sort(); }}

Avoid null comparisons

function sortArray(value) { if (value instanceof Array) { value.sort(); } else { throw new Error("sortArray: argument must be an array.");

}}

Avoid null comparisons

• Use instanceof for specific types of objectsif (value instanceof constructor){

• Use typeof to test for string, number, Booleanif (typeof value == "string") {

Use Constants

function validate(value) { if (!value) { alert("Invalid value"); location.href = "/errors/invalid.php"; }}

Use Constants

var Constants = { INVALID_MSG : "Invalid value", INVALID_URL : "/errors/invalid.php"};function validate(value) { if (!value) { alert(Constants.INVALID_MSG); location.href = Constants.INVALID_URL; }}

Use Constants

• Repeated unique values• UI strings• URLs• Any value that may change in the future

Build ProcessMaintainable JavaS cript

Build

Build Process

Source Files

Recommendations

• One object or object definition per file– Indicate dependencies

• Use a build step– Combine files in appropriate order– S trip comments/whitespace– Validate code

S ummaryMaintainable JavaS cript

S ummary

• Code Conventions• Loose Coupling• Programming Practices• Build Process

Questions and AnswersMaintainable JavaS cript

Etcetera

• My email: nzakas@ yahoo-inc.com• My blog: www.nczonline.net