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

Writing high-quality code-basics: structure and style, separation of behavior, and high quality --
To implement high-quality code, we need to separate the structure, style, and behavior to simplify, reuse, and order. Streamline: Minimize the file size and increase the page loading speed. Reuse: Improves code reusability, reduces redundant code, and increases development speed. ORDERLY: Improve the code structure and organize the code structure to facilitate maintenance and adapt to special situations. In our work, you may encounter such code, or you may write such code.

<Td width = "100%" height = "20" class = "f9pt" align = "center"> <font color = "# 0000f0e"> download </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, padpadpad; ding-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 code standards. The code here does not follow the most basic web standard-the separation of structure style and behavior. The above code is a piece of html, css, and js Code. To improve web page performance and facilitate team development, we should separate the structure, style, and behavior with separate files, as shown below. Test.html file:

<Link rel = "stylesheet" type = "text/css" href1_1_test.css "/> <td class =" f9pt myTd "> <span class =" myFont "> download </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: # 0000f0e ;}# 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 must write it on an html page, you 'd better use the style and script labels as follows.

<Style type = "text/CSS">. myTd {width: 100%; height: 20px; text-align: center ;}. myFont {color: # 0000f0e ;}# 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"> download </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>