Created
April 28, 2011 16:26
-
-
Save cowboy/946689 to your computer and use it in GitHub Desktop.
JavaScript var indenting thoughts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// I don't have answers yet, just questions. Keep in mind that I prefer code | |
// that is easiest to maintain. | |
// Example from http://www.nczonline.net/blog/2010/10/26/wanted-dynamic-execution-contexts-in-javascript/ | |
// Consider: | |
// Let's say you start with this, but need to (in a later commit) add a few | |
// additional vars. | |
var myglobal = { | |
add: function(num1, num2){ | |
return num1 + num2; | |
} | |
}; | |
// Ok, now add those additional vars. | |
// Option 1: Not-a-lotta-indents. | |
var myglobal = { // Everything existing stays the same... | |
add: function(num1, num2){ | |
return num1 + num2; | |
} | |
}, | |
context = new ExecutionContext(myglobal), // Does it feel weird that these lines | |
result = context.eval("add(2, 2)"); // aren't indented at all? | |
// Option 2: Lots-o-indents. | |
var myglobal = { // This line stays the same as before. | |
add: function(num1, num2){ // This line and the following three lines | |
return num1 + num2; // have to be re-indented, even though they | |
} // didn't really change. Which sucks because | |
}, // it's extra extra effort / commit noise. | |
context = new ExecutionContext(myglobal), // Added (legitimately) | |
result = context.eval("add(2, 2)"); // Added (legitimately) | |
// Option 3: Lots-o-var-statements. | |
var myglobal = { // Everything existing stays the same... | |
add: function(num1, num2){ | |
return num1 + num2; | |
} | |
}; | |
var context = new ExecutionContext(myglobal); // These can be added w/o touching | |
var result = context.eval("add(2, 2)"); // any other var statements. | |
// Ideally, your build process would convert all of those to this, making | |
// style completely up to you. | |
var myglobal={add:function(num1,num2){return num1+num2}},context=new ExecutionContext(myglobal),result=context.eval("add(2, 2)") | |
// Also consider indentation, in general. Given this starting point, let's add | |
// another var. Pretend you're adding enough vars so that they won't all fit on | |
// a single line (not that you'd do that anyways, it's unreadable). | |
var foo = 1; | |
// With 2-space soft indents, things don't line up. It looks awkward. | |
var foo = 1, | |
bar = 2; | |
// With hard-tab indents, things don't line up either, unless you happen to be | |
// using a text editor where hard-tabs are set to render at 4-chars wide. Which | |
// you probably have explicitly disabled, unless you use hard-tabs. So while | |
// this looks great for hard-tab users, it ONLY looks great for them. While, at | |
// the same time, soft-tab indents always appear consistent, universally, | |
// whether the viewer prefers soft- or hard-tabs. Just take a good look at | |
// http://bit.ly/jqsource in a browser. Anyways, that's a whole separate issue. | |
var foo = 1, | |
bar = 2; | |
// 2-space soft indent users could decide to make an exception, and indent | |
// subsequent vars with 4 spaces. This looks better. | |
var foo = 1, | |
bar = 2; | |
// Of course, these both line up perfectly, no matter what. Although you might | |
// find the extra "var" words repetitive, non-DRY or visually distracting. | |
var foo = 1; | |
var bar = 2; | |
// Now consider re-organizing code. | |
// Given this original... | |
var foo = 1, | |
bar = 2; | |
// Let's reverse the two declarations. In addition to shuffling the lines | |
// around, five characters in each affected line had to be rewritten to make | |
// this work. | |
var bar = 2, | |
foo = 1; | |
// Now, given this original... | |
var foo = 1; | |
var bar = 2; | |
// Let's reverse the two declarations. Ok, cut, paste, lines shuffled, done. | |
var bar = 2; | |
var foo = 1; | |
// Consider typos. This isn't a problem for you though, because you JSLint all | |
// your code, right? RIGHT? Yeah, right. | |
function test() { | |
var foo = 1 | |
bar = 2; | |
} | |
test(); | |
bar // 2 - What, did somebody forget a comma? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment