Writing high-quality code - the basics: structure and style, separation of behavior

Achieving high-quality code requires us to do this based on the separation of structure, style, and behavior: simplification, reuse, and orderliness.

Streamlining: Minimize file size and increase page loading speed.

Reuse: Improve code reusability, reduce redundant code, and increase development speed.

Orderly: Improve the structure of the code and organize the code structure to facilitate maintenance and respond to special situations.

You may encounter such code in our work, or you may write such code

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

What a beautiful code. . . .

First of all, let’s not talk about the rationality of the code. We only discuss the standards of the code. The code here does not follow the most basic web standards - the separation of structural style and behavior. The above code is a piece of code that is a mixture of html, css, and js. In order to improve web page performance and facilitate team development, we should separate the structure, style and behavior into separate files, as follows.

test.html file:

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

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

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

Or if you really have to write it in an html page to feel comfortable, then it’s best to use it too Use style and script tags as follows.

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

The above is the basics of writing high-quality code: the separation of structure and style, and behavior. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!