You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.8 KiB
97 lines
2.8 KiB
---
|
|
layout : 'default'
|
|
css : 'javascript'
|
|
|
|
title : 'Javascript'
|
|
description : 'Suggestions for Javascript development practices'
|
|
type : 'UI Guide'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">General</a>
|
|
<a class="item">Optional</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">General</h2>
|
|
|
|
<p>Airbnb has compiled a wonderful list for a <em>mostly reasonable</em> approach to javascript. This is an excellent starting point for community consensus on javascript standards.</p>
|
|
|
|
<p><a href="https://github.com/airbnb/javascript">https://github.com/airbnb/javascript</a></p>
|
|
|
|
<h2 class="ui dividing header">Optional Considerations</h2>
|
|
|
|
<h3 class="ui header">Variable Alignment</h4>
|
|
<p>Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called <a href="http://wbond.net/sublime_packages/alignment">Alignment</a> which can automatically manage this for you.</p>
|
|
<div class="code" data-type="javascript">
|
|
var
|
|
dog = 'Poodle',
|
|
cat = 'Cat',
|
|
elephant = 'A long name'
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Chaining</h4>
|
|
<p>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</p>
|
|
<div class="code" data-type="javascript">
|
|
$element
|
|
.find('.one')
|
|
.doSomething()
|
|
.end()
|
|
.find('.two')
|
|
.doSomethingElse()
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Verbs</h4>
|
|
<p>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.</p>
|
|
<div class="code" data-type="javascript">
|
|
|
|
// this might require some more times with docs
|
|
$element
|
|
.widget('states.select.set')
|
|
;
|
|
|
|
// reduce complexity to api
|
|
$(element)
|
|
.widget('activate', true)
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Default Values</h4>
|
|
<p>Using an OR value allows you to set defaults for any falsey value</p>
|
|
<div class="code" data-type="javascript">
|
|
(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);
|
|
}
|
|
}());
|
|
</div>
|
|
|
|
<h3 class="ui header">Grouping Variables</h4>
|
|
<div class="code" data-type="javascript">
|
|
// ok
|
|
var
|
|
offsetX = 2,
|
|
offsetY = 5
|
|
;
|
|
// nice
|
|
var
|
|
offset = {
|
|
x: 2,
|
|
y: 5
|
|
}
|
|
;
|
|
</div>
|
|
|
|
</div>
|