//這段糟糕的代碼會在每次進入循環的時候都計算一次數組的長度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}

//這樣的話，就只會計算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}

//這樣就更加簡短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}

//這段代碼的糟糕之處在于，它把變量聲明放在循環體內了，每次循環都會創建變量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}

//在循環體外聲明變量，變量只會創建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}

//對于條件判斷只有兩次的，這是一種冗長的寫法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}

//更好的代碼
var direction = (x > 100) ? 1 : -1;

//判斷一個 變量是否定義，如果否，就賦予一個值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}

//更好的代碼
var x = v || 10;

//重復了變量名很多次
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';

//更好的寫法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};

//重復了很多次數組名
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';

//更好的代碼
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys',
'Flogging Molly',
'Red Hot Chili Peppers',
'Pornophonique'
];

//html
<img src="picture.gif" />

//JavaScript
<script type="text/javascript">
document.write('<p>');
</script>

//一段混用的jQuery代碼
$('h1').after('<div id="content"><h2>目錄</h2><ol></ol></div>');

//一段混合了其他技術的代碼會這樣做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].style.borderColor = '#f00';
inputs[i].style.borderStyle = 'solid';
inputs[i].style.borderWidth = '1px';
}
}

//一段良好的代碼會這么做：將風格化的事情交給CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].className += ' error';
}
}