寫出高品質的程式碼--基礎：結構與樣式，行為的分離

實現高品質的程式碼需要我們在結構和樣式，行為的分離的基礎上做到：精簡，重複使用，有序。

精簡：盡量減少檔案的大小，提高頁面載入速度。

重用：提高程式碼的重用性，減少冗餘程式碼，提高開發速度。

有序：提高程式碼的結構性，組織好程式碼結構更有利於維護和應變特殊情況。

 

在我們的工作中你可能會遇到這樣的程式碼，或者說你可能寫出這樣的程式碼

<td width="100%" height="20" class="f9pt" align="center">
　　<font color="#346F0E">下载</font>
　　<input type="text" name="wd" size="40" onMouseOver="this.focus()" onFocus="this.select()" 
　　style="margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sans-serif,宋体;
　　padding-top:2px;padding-left:1px" maxlength="100">
</td>

多麼美麗的程式碼。 。 。 。

 

首先，不說程式碼的合理性，我們只討論程式碼的標準，這裡的程式碼沒有遵從最基礎的web標準-結構樣式和行為的分離。上面的程式碼是一段html，css，js駁雜在一起的程式碼。為了提高網頁效能和方便團隊開發，我們應該將結構、樣式和行為分別用單獨文件分離開，如下。

test.html 檔案：

<link rel=”stylesheet” type=”text/css” href=”test.css” />
<td class="f9pt myTd">
　　<span class=”myFont”>下载</span>
　　<input type=”text” name=”wd” size=”40” id=”myInput” maxlength=”100” />
</td>
<script type=”text/Javascript” src=”test.js”></script>

test.css 檔案：

.myTd{width:100%;height:20px;text-align:center;}
.myFont{color:#346F0E;}#myInput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,
sansserif,宋体;padding-top:2px;padding-left:1px}

test.js 文檔

var myInput = document.getElementById(“myInput”);
　　myInput.onmouseover = function(){
　　this.focus();
}
myInput.onfocus = function(){
　　this.select();
}

如下用上style和script標籤。

<style type=”text/CSS”>
　　.myTd{width:100%;height:20px;text-align:center;}
　　.myFont{color:#346F0E;}
　　#myInput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif,宋体;
　　padding-top:2px;padding-left:1px}
</style>


<td class="f9pt myTd">
　　<span class=”myFont”>下载</span>
　　<input type=”text” name=”wd” size=”40” id=”myInput” maxlength=”100” />
</td>
 
<script type=”text/Javascript”>
var myInput = document.getElementById(“myInput”);
　　myInput.onmouseover = function(){
this.focus();
}
myInput.onfocus = function(){
　　this.select();
}
</script>

以上就是寫高品質的程式碼--基礎：結構和樣式，行為的分離的內容，更多相關內容請關注PHP中文網（www.php.cn）！