遵循几个原则让前端代码更整洁

2013-05-16 23:01:30 遵循几个原则让前端代码更整洁

在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的。

片段一

<html> 
<head> 
<title>A & B & C</title> 
<style type="text/css"> 
body {background:pink;} 
</style> 
</head> 
<body> 
<a href="http://www.baidu.com"><h1>Go to Baidu web site.</h1></a> 
<div id="topNav"> 
<ul id="bigBarNavigation"> 
<li><a href="/">HOME</a></li> 
<li><a href="/">HELPER</a></li> 
<li><a href="/">ABOUT US</a></li> 
</ul> 
</div> 
</body> 
</html>

片段二

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>A &amp; B &amp; C</title> 
    <link rel="stylesheet" type="text/css" href="test.css"/> 
  </head> 
  <body> 
    <h1><a href="http://www.baidu.com">Go to Baidu web site.</a></h1> 
    <ul id="bigBarNavigation"> 
      <li><a href="/">home</a></li> 
      <li><a href="/">helper</a></li> 
      <li><a href="/">about us</a></li> 
    </ul> 
  </body> 
 </html>

片段二是对片段一的改进，下面就改进点进行详细的讲解。

1. DOCTYPE的声明

片段二的第 1 行，添加了代码 <!DOCTYPE html>

编写HTML代码时，首先要使用"DOCTYPE"进行html声明，这就像给你的代码以身份，HTML4.0.1或者XHTML1.0或者HTML5都有严格版本或者过度版本，这些都能很好的支持我们写的代码。我建议大家直接使用<!DOCTYPE html>，原因一方面是现在的布局基本舍弃了table布局，那么我们也就可以不考虑使用过渡型而使用严格型的"DOCTYPE"，另一方面考虑到向后兼容，我们可以直接使用HTML5的声明模式，即 <!DOCTYPE html>

2. 给页面设置字符集和编码字符

片段二中的第 4 行，添加了代码 <meta charset="utf-8">

片段二中的第 5 行，将片段一中的第 3 行中的 "&" 改为 "&"

在每个页面的开始中，我们都应该在 <head> 中设置了字符集，代码中我们一些特殊字符我们应该用字符编码来实现，大家可以在下面的网页进行查询//www.html8.com.cn/css/325.shtml。

3. 正确的代码缩进

片段二中相对于片段一使用了代码缩进，这可以极大的增强代码的可读性。标准程序的缩进应该是一个制表符或几个空格，这里我推荐使用几个空格。

4. 使用外链的方式带入CSS样式和JavaScript

片段二中相对于片段一，将css样式封装到test.css文件中，然后使用<link> 导入。

对于JavaScript，我们同样需要使用外链的方式。

6. 使用标签嵌套要正确

片段二中的第 9 行，<h1><a href="http://www.baidu.com">Go to Baidu web site.</a></h1>, 相对于片段一，我讲<h1>标签从<a>标签内部移至<a>标签外部。

<h1>是块元素，<a>是行内(inline)元素。我们不能将块元素放在行内(inline)元素

7. 删除不必要的标签

片段二中的第 10 ~ 14 行，相对于片段一中，将 <div id="topNav"><div> 删除。

div 和 ul 列表都是块元素，使用 div 来包裹 ul 根本没有起任何作用。虽然 div标签的出现给我们制作 web 页面带来了极大的好处，但是我们没有必要到处乱用。

8. 尽量使用CSS控制样式

片段二中的第 11 ~ 13 行，相比较片段一中都并非直接使用大写字母，而是在test.css中定义样式

ul li a { 
text-transform: uppercase; 
 }

当然还有很多原则，希望大家多多交流。

http://www.cnblogs.com/youngC/archive/2012/10/14/2723456.html