JavaScript面向物件程式設計和麵向過程程式設計
JavaScript程式設計中多數情況是面向過程程式設計，但有時候為了更好地封裝重用。面向物件思想來程式設計更為有用。
雖然現前端都開始流行MVC思想的js框架，但並不是說js沒用了，學好js對於學習js前端框架，jquery,等都是非常有幫助的。
好了，閒話不說，下面用一個例子，兩種寫法，來說明面向物件和麵向過程程式設計。
效果如上，一個簡簡單單的選項卡的例子。
面向過程程式設計程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1.active{
background-color: red;
}
#div1 div{
background: gray;
width: 200px;
height: 200px;
display: none;
border: solid black 1px;
}
#div1{background: yellow;}
</style>
<script type="text/javascript">
var oBtns;
var oDivs;
window.onload=function(){
var oDiv1 = document.getElementById('div1');
oBtns = oDiv1.getElementsByTagName('input');
oDivs = oDiv1.getElementsByTagName('div');
for(var i = 0;i<oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j = 0;j<oBtns.length;j++){
oBtns[j].className='';
oDivs[j].style.display='none';
}
this.className='active';
oDivs[this.index].style.display='block';
};
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="xxx" />
<input type="button" value="qqq" />
<input type="button" value="aaa" />
<div style="display: block;">
111
</div>
<div >
222
</div>
<div >
333
</div>
</div>
</body>
</html>
總結：面向過程編碼，程式碼較為簡潔，過程清楚明瞭，較容易理解。
面向物件程式設計程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 input.active{
background-color: red;
}
#div1 div{
background: gray;
width: 200px;
height: 200px;
display: none;
border: solid black 1px;
}
#div1 input{background: yellow;}
</style>
<script type="text/javascript">
window.onload = function(){
new TabSwitch('div1');
}
function TabSwitch(id){
var _this = this;
var oDiv = document.getElementById(id);
this.aBtn = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');
for(var i = 0;i<this.aBtn.length;i++){
this.aBtn[i].index = i;
this.aBtn[i].onclick = function(){
_this.fnClick(this);
};
}
}
TabSwitch.prototype.fnClick = function(obtn){
for(var j = 0;j<this.aBtn.length;j++){
this.aBtn[j].className='';
this.aDiv[j].style.display='none';
}
obtn.className='active';
this.aDiv[obtn.index].style.display='block';
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="xxx" />
<input type="button" value="qqq" />
<input type="button" value="aaa" />
<div style="display: block;">
111
</div>
<div >
222
</div>
<div >
333
</div>
</div>
</body>
</html>
總結：面向物件程式設計較不容易理解，其中this用法容易用錯。但是面向物件程式設計重用性更好，封裝更徹底。以後想使用選項卡這個功能，直接引入js檔案妥妥的。