高品質のコードを書く - 基本: 構造とスタイル、動作の分離

高品質のコードを実現するには、構造、スタイル、動作の分離、つまり簡素化、再利用、秩序性に基づいてこれを行う必要があります。

合理化: ファイルサイズを最小限に抑え、ページの読み込み速度を向上させます。

再利用: コードの再利用性を向上させ、冗長なコードを削減し、開発速度を向上させます。

秩序ある: コードの構造を改善し、メンテナンスを容易にし、特殊な状況に対応できるようにコード構造を整理します。

私たちの仕事でそのようなコードに遭遇するかもしれませんし、そのようなコードを書くかもしれません

<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>

なんて美しいコードでしょう。 。 。 。

まず、コードの合理性については触れません。ここでは、コードの標準、つまり構造スタイルと動作の分離についてのみ説明します。上記のコードは、html、css、js を組み合わせたコードです。 Web ページのパフォーマンスを向上させ、チーム開発を促進するには、次のように構造、スタイル、動作を別のファイルに分割する必要があります。

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();
}

または、快適に感じるために本当に 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>

上記は、高品質のコードを書くための基本、つまり構造とスタイルの分離、および動作です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。