编写高质量代码:Web前端开发修炼之道（一）

最近老大给我们买来一些技术方面的书籍，其实很少搬着一本书好好的完整的看完过，每每看电子档的，也是打游击式的看看这章，瞅瞅那章，在那5本书中挑了一本比较单薄的《编写高质量代码web前端开发修炼之道》，看完觉得不错，它从一个整体架构上来说明如何编写高质量代码，而细处也着重说明一些比较重要的技术点，给人一种从高处俯瞰web开发、很完整的感觉，在这感谢老大，谢谢他让我们不停的进步着。下面是我看书过程中的笔记。

第一章：从网站重构说起

没什么好说的，从一个糟糕的老网页实例说明需要将web的结构，样式和行为分离开来，既html文件，css文件，js文件。

总结：Html标签只负责承载内容，样式交给css，行为交给Javascript。做到“精简，重用，有序”。

【相对我以前做的项目，我经常会把一些click事件,mouseover事件直接写进html标签中，其实更好的做法应该是放到js中去，直接Document.getelementbyid("").onclick(){},或者用jquery的click事件关联】

第二章：团队合作

欲精一行，必先通十行

“经常听到做前端开发的朋友抱怨要学的东西太多，东学一点，西学一点，什么都会，但是都不精，于是有人认为‘通十行不如精一行’，而在前端领域，这句确行不通，对于前端来说，你不通十行，就无法精一行。” 看到作者的这句话，我总算有点成就感。O(∩_∩)O~

这章主要说明前端需要了解的语言，html， css要精通、及其重要，js,及架构div+css，RIA富媒体应用，jquery,YUI,ps,AI设计等等

团队之间的开发要注意：

1：增加代码可读性----注释

2：重用性---公共组件和私有组件的维护

3：冗余和精简的矛盾---选择集中还是选择分散   （合理的前端架构中css和js都会提取公共组件，如何组织需要权衡，完美的解决方案不存在，只能在冗余和精简中尽量找到最佳平衡点）

4：前期的构思很重要。

5：制定规范

6：团队合作最大难度不是技术，而是人

第三章：高质量的Html

总算来了点实际的用得着的技术，呵呵

1）标签的语义：大家都懂的。

2）标签布局

table布局网页的缺点：1：代码量大，结构混乱。2：标签语义不明确，对搜索引擎不友好

css布局（div+css）：弱化了标签的布局能力，将布局完全放到样式中去控制，而标签重新恢复了原来语义的作用。它与table布局相比具有代码量少，结构精简，语义清晰等优点。

总结：在布局的过程中，Html结构才是重点，css是用来修饰结构的，正确的做法是：先确定html,确定语义的标签，再来选用合适的css.

3）如何确定你的标签是否语义良好：

在做完一个页面后，去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

"css裸体日"这个日子的目的就是为了提醒大家选用合适的HTML标签的重要性。------------显然我是第一次听说哈。

4）标题和内容的实例

这个实例用的是Html中无语义的标签-----div分隔 和span范围 来架构的， 而正确的做法一般使用h2,p,a来架构

需要特别说明的是：当页面内标签无法满足设计需要时，才会适当添加div和span等无语义的标签来辅助实现。

5）表单和表格

表单

一般需要直接submit的内容需要放置在表单内，为了有清晰的语义，一般表单域要用fieldset标签包起来，并用legend标签说明表单的用途，若不想要它自带的默认样式，可将border:none;不想显示设置 display:none,以此来兼顾语义和设计两方面的需求。

每个input标签对应的说明文本都需要使用label标签，并通过为input设置id属性，在label中设置“for=someId”来将对应的label和input关联起来。

表格

虽然在css布局中table不推荐用来布局，但它在二维数据展示方面确实最好的选择。

一般用table，我常使用它的<table><tr><th><td>标签，在有需要的时候还可以用他的其他标签，表格标题用caption,表头用thead包围，主体部分tbody包围，尾部tfoot包围

总结：语义化标签应注意的一些问题

1：尽可能少地使用无语义标签div和span

2：语义不明显，既可用P也可用div的地方，建议尽量用p,因为有上下间距，可读性好。（还是视情况而定）

3：不要使用纯样式标签，如：b,font,u等 ，直接写进css设置。

转载请注明出处

原文地址:http://www.cnblogs.com/Joans/archive/2012/09/11/2679074.html