编写高质量代码: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

上一篇:jdk命令行工具:jstat与jmap


下一篇:编写高质量代码:Web前端开发修炼之道(四)