고품질 코드 작성 - 기본: 구조와 스타일, 동작 분리

고품질 코드를 얻으려면 구조, 스타일, 동작의 분리(단순화, 재사용, 질서)를 기반으로 이를 수행해야 합니다.

단순화: 파일 크기를 최소화하고 페이지 로딩 속도를 높입니다.

재사용: 코드 재사용성을 향상하고, 중복 코드를 줄이고, 개발 속도를 높입니다.

순서적: 코드 구조를 개선하고, 코드 구조를 정리하는 것이 유지 관리 및 특수 상황 대응에 더 도움이 됩니다.

우리 작업에서 이런 코드를 접할 수도 있고, 이런 코드를 작성할 수도 있습니다.

<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가 혼합된 코드입니다. 웹 페이지 성능을 향상시키고 팀 개발을 촉진하려면 다음과 같이 구조, 스타일 및 동작을 별도의 파일로 분리해야 합니다.

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 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)를 참고해주세요. )!