Content
UI Guide: Javascript
2 of 3
1. CSS
2. Javascript
3. Language
Menu

Javascript

Suggestions for Javascript development practices

General Optional

General

Airbnb has compiled a wonderful list for a mostly reasonable approach to javascript. This is an excellent starting point for community consensus on javascript standards.

https://github.com/airbnb/javascript

Optional Considerations

Variable Alignment

Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called Alignment which can automatically manage this for you.

var dog = 'Poodle', cat = 'Cat', elephant = 'A long name' ;

Chaining

Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule

$element .find('.one') .doSomething() .end() .find('.two') .doSomethingElse() ;

Verbs

When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.

// this might require some more times with docs $element .widget('states.select.set') ; // reduce complexity to api $(element) .widget('activate', true) ;

Default Values

Using an OR value allows you to set defaults for any falsey value

(function(someBoolean, name) { var // this will have issues (false will evaluate same as undefined) someBoolean = someBoolean || true, // default name will be sally name = name || 'Sally' ; if(someBoolean) { alert(name); } }());

Grouping Variables

// ok var offsetX = 2, offsetY = 5 ; // nice var offset = { x: 2, y: 5 } ;