编写高质量代码-Web前端开发经验

编写高质量代码-Web前端开发经验

1. Web标准由一些列标准组合而成，其核心理念就是将网页的结构、样式和行为分离开来，所以它可以分为三大部分：结构标准、样式标准和行为标准。结构标准包括XML标准、XHTML标准、HTML标准；样式标准主要指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。

2. 所谓高质量的代码，在Web标准的思想指导下，在实现结构、样式和行为分离的基础上，还要做到三点：精简、重用、有序。

3. 要是用语义化标签进行 布局，搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义。浏览器会根据标签的语义给定一个默认的样式，用语义化标签布局即使去掉样式，网页结构依然组织良好有序，仍然有很好的可读性。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，按照h1、h2、h3、h4这样依次排列下来，不要出现类似h1、h3、h4，漏掉h2的情况。

4. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途。每个input标签对应的文本说明都需要使用label标签，并且通过为input设置id属性，在label中设置“for=someId”来让说明文本和相应的input关联起来。

5. 表格标题要用caption，表头要用thead包围，主题部分要用tbody包围，尾部要用tfoot包围，表同和一般单元格要分开，表头用th，一般单元格用td。

6. 尽可能少的使用无语义标签div和span；在语义不明显，既可以用p和可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后可读性更好，对兼容特殊终端有利；不要使用纯样式标签，例如b、font和u等，改用css设置。语义上要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。

7. 为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式两种方法来解析网页。怪异模式模拟老式浏览器（比如ie4和Netscape Navigator 4）的行为以防止老站点无法工作。在怪异模式中，width本身就包括了padding和border的宽度。标准模式下利用margin-left:auto、margin-right:auto居中块级元素的方法在怪异模式中无法正常工作。

8. 怪异模式的触发与DTD有关，DTD全称Document Type Definition，即文档类型定义。按照W3C的标准，我们需要在HTML的最开始声明文件的DTD类型，如果漏写，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE 6、IE 7、 IE 8）就会触发怪异模式。

9. 组织css的方法：base.css+common.css+page.css。将网站的所有样式按照职能分成三大类：base、common和page。base位于最底层，提供CSS reset功能和粒度最小的通用类——原子类。common层位于中间，通过组件级的CSS类。我们可以将网页内的元素拆分成一小块一小块功能和样式相对独立的小“模块”，并将大量重复的“模块”视为一个组件提取出来放到common层里。page层存放非高度重用的组件，提供页面级的样式。《CSS命名规范》

10. CSS reset推荐使用雅虎的前端框架YUI，详见：http://developer.yahoo.com/yui/，这段代码很成熟，推荐使用这段代码进行CSS reset。《ThinkCSS初始化模板》

11. 模块化CSS，从视觉上进行划分，样式和功能相对独立且稳定的一部分可视为模块。模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将它们提取出来，拆分成一个独立的模块。模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

12. 分层可以让代码的组织条理更清晰，减少冗余，提高代码重用率。和CSS一样，Javascript也分成三层，从下往上依次是base层、common层和page层。

base层有两个职责，一是封装不同浏览器下JavaScript的差异，提供统一的接口，我们依靠它来完成跨浏览器兼容的工作。职责二是扩展JavaScript语言底层提供的接口，让它提供更多更为易用的接口。
common层依赖base层提供的接口，提供可供复用的组件，它是典型MVC模式中的m，和页面内的具体功能没有直接关系。common层的功能是给page层提供组件。
page层和页面里的具体功能需求直接相关，是mvc模式中的c。page层依赖于base层和common层。
13. 很多开源的JavaScript库可以为我们提供强大的base层和common层。最常见的JavaScript库有Prototype、Dojo、Mootools、Ext JS、jQuery和YUI等，各有优劣，可以根据喜好选择一个或者结合其中几个一起使用。

14. 编程中有DRY原则，DRY- dont repeat yourself，强调在程序中不要将相同的代码重复编写多次，更好的做法是只写一次，然后在多出引用。

15. 项目的可维护性第一。我们并不是一个人做事，项目的维护和二次开发可能是直接或间接的团队合作。好的可维护性可以从四个方面获得：

代码的松耦合，高度模块化，将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码，从HTML、CSS、JavaScript三个层面考虑模块化。

良好的注释《html注释》、《CSS注释》。

注意代码的弹性，在性能和弹性的选择上，一般情况下优先考虑弹性条件，在保证弹性的基础上，适当优化性能。严格按照规范编写代码。