编写高质量的代码--基础：结构和样式，行为的分离
生活随笔
收集整理的這篇文章主要介紹了
编写高质量的代码--基础：结构和样式，行为的分离
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現高質量的代碼需要我們在結構和樣式，行為的分離的基礎上做到：精簡，重用，有序。
精簡：盡量減小文件的大小，提高頁面加載速度。
重用：提高代碼的重用性，減少冗余代碼，提高開發速度。
有序：提高代碼的結構性，組織好代碼結構更利于維護和應變特殊情況。
在我們的工作中你可能會遇到這樣的代碼，或者說你可能寫出這樣的代碼 <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();
}
<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>
更多專業前端知識，請上 【猿2048】www.mk2048.com
?
或者你如果實在必須寫在html頁面內才舒服，那么最好也要用如下用上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>
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的编写高质量的代码--基础：结构和样式，行为的分离的全部內容，希望文章能夠幫你解決所遇到的問題。
