编写高质量代码笔记

最近老大给我们买来一些技术方面的书籍，其实很少搬着一本书好好的完整的看完过，每每看电子档的，也是打游击式的看看这章，瞅瞅那章，在那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）：弱化了标签的布局能力，将布局完全放到样式中去控制，而标签重新恢复了原来语义的作用。http://yaya.qqq23.com 它与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设置。

 

第四章:高质量的css

1)怪异模式和标准模式

在标准模式中，浏览器根据规范表现页面；而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作。

他们两者之间的差异比较典型的表现在IE对盒模型的解析：在标准模式中，网页元素的宽度=padding+border+width;而在怪异模式中，http://koukou.wan128.cn width本身就包括了padding和border。

在怪异模式中：设定width,然后margin:0 auto;是无法居中的。标准模式中可以正常工作。

于是我们尽量避免怪异模式，而选用标准模式，这样就出现了DTD(文档类型定义Document Type Definition)；

DTD(文档类型定义Document Type Definition)：是一种保证html文档格式正确的有效方法，一个DTD文档包含元素的定义规则、元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。

DTD声明：如果漏写DTD声明，FF仍然会按照标准模式来解析，但在IE中（6.7.8）就会触发怪异模式，现在一般可以直接手动设置为标准模式。

 

2)如何组织css

笔者按照职能分为三大类：base、common、page 这三者不是并列结构，而是层叠结构。

1：base层：最底层，基本层，一般放置粒度最小的通用类--原子类，这一层会被所有页面引用，力求精简，通用，有高度可移植性。

　　推荐代码：.fl{float:left;} .fr{float:right} .mt15{margin-top:15;} .mb15{margin-bottom:15;} .w50{width:50px;}  .cb{clear:both;} .cr{clear:right;}

　　　　　　　.pr20{padding-right:20;}

　　从上面的代码可以看出来，base层结构粒度非常小，非常实用于组合类的结构。

base层可分为两大部分:css reset 和 通用原子类

css reset：就是重定义标签的样式，覆盖掉浏览器提供的默认样式；如*{margin:0;padding:0;}，因为浏览器默认的边距是最影响css布局的。最好不要使用*,而是罗列出要覆盖的标签元素：如：ol li ul h1 dl dt .... 将冲突降至最低。

从笔者的经验来看，base层的类虽然粒度小，但它非常有用,设置大量这样的类有利于减少page层的代码量，也为css的模块化提供了帮助。

2：common层：中间层，高度重用的模块，视为组件（类似于网站内一个一个的同样式的板块）。

 模块化层面：将页面内的元素拆分成一小块一小块功能和样式相对独立的小模块。类比于 房子（网站），不同的门窗、门窗有不同的小元件（common），这一层最好由一个人负责统一管理。

 common层是网站级的,不同的网站有不同的common层，而同一个网站只有一个common层。

3：page层：页面级的样式，最高层。对重用性没要求.(就好像房间里的画，不同房间会挂不同的画。)

 

3）如何划分css模块

一句话概括:封装、多用组合少用继承的原则。

将相似部分提取出来，再进一步拆分成更小的模块。

原则：

1:模块和模块之间尽量不要包含相同的部分,如果有相同部分,应将他们提取出来,拆分成一个独立的模块.

2:模块应在保证数量尽可能少的原则下,做到尽可能简单,以提供重用性.

 

4)css命名

1：使用英语

2：骆驼命名法（从第二个单词开始首字母大写，如dropMenu,subNavMenu）

3：划线命名法（- 或_ 如drop-menu ,sub_nav_menu）

使用骆驼命名法和划线命名法可以清楚的将单词区分开来，提高可读性。推荐这两种方式组合使用。一般骆驼命名法用于区别不同单词，划线用于表明从属关系。

4：子选择符：滥用子选择符容易留下冲突隐患，为了降低风险，不推荐轻易使用子选择符。

总结:base层和common层是公共的，一般由一个人负责，不会出现冲突，page层多人合作使用，容易冲突，在命名css时，如果模块多次反复出现，应该将它归为common层，不用考虑冲突问题，出现次数少，则归为page层。

5：page层多人合作很容易引起命名冲突，为解决这一问题，一般每个人会分配一个标识符，然后给命名加上该前缀的方法来解决。

 

5)多用组合，少用继承

继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类。首先明确一个抽象的父类，父类有着几乎所有的方法和属性，子类继承父类，根据需求添加新的方法和属性，覆盖掉与父类有变化的方法和属性。

缺点:使用继承的话,任何一点小的变化也需要重新定义一个类,很容易引起类的爆炸式增长,产生一大堆有着细微不同的子类.

组合的思路是将一个复杂的类分成容易产生变化的部分和相对稳定的部分,将容易变化的部分拆分出去,每一种可能的变化设计成一个个单独的类,类之间没有继承关系,遵循了面向对象设计的"单一职责"原则.这些容易变化的类的实例赋值给主体类作为一个属性,实现了类的组合.

用组合的方式,可大大减少类的数量.
注:margin是一个有点特殊的样式，相邻的margin-left;margin-right不会重合，但是相邻的margin-top;margin-bottom会产生重合，所以相邻的标签不要混合使用，统一使用margin-top或margin-bottom。

 

6)低权重原则

标签权重是 1；class权重是 10；id 权重是100

当有冲突时，会选择权重高的样式，权重一样时，就近原则，最后定义的为最近，css权重应该尽可能的低。

 

7）css sprite---将网站的多张背景图片合并到一张大图片上。

　　可以解决划过状态时背景图片出现瞬间空白的问题。

　 每次图片加载会发出http请求，一张图片需要一条http请求，http请求数越多，访问服务器的次数越多，那server压力就越大，css sprite亦可以减小服务器的压力

1：只能用于作为背景的图片background-image

2：不能用于对于横向和纵向都平铺的图片。至于原因，自己去测试就知道了。

 

8）haslayout----是IE浏览器一个专有的属性，用于css的解析引擎。有时候网页会在ff下面运行正常，但到IE下就不正常，往往是因为hasLayout没有触发的原因。

可以通过设置width,height,position:relative来触发，但一个更好的解决办法是zoom:1可以触发hasLayout

 

9)块级元素和行内元素(可通过修改display属性来切换块级和行内)

块级元素：可设置宽高，margin padding 正常使用，独占一行

行内元素：不能设置宽高，margin padding 在水平方向会产生边距效果，竖直方向不会产生边距效果，在同一行内。

display:inline-block 行内块级元素；可设置宽高，可设置margin;padding;却不独占一行  （IE6/7不支持，可通过触发haslayout来解决）

 

10）relative,absolute和float

1：只有设置了position属性时，left top right bottom z-index属性才会激活，否则设置了也无效。

2：position设置为relative或absolute都可以改变元素在文档流中的位置。网页虽然看起来是二维结构，也是有z轴的，默认所以元素都在z-index:0这一层----这就是文档流。

3：不设置position，那么网站的默认position：static .

4：position设置为relative或absolute都会让元素“浮”起来，也就是z-index>0时，它会改变正常情况下的文档流。

     position:relative---会保留自己在z-index:0层的占位，属于占位上浮。

     position:absolute---会完全脱离文档流，不保留占位，这样就通常会覆盖掉下面的元素。

     他们的left,bottom,top.right四个值是相对于 自己最近设置了position的祖先元素，若都没有设置，则想对于body元素

5：float:左右浮动，它也能改变文档流，但是不会上浮，只会在z-index:0层改变正常的文档流排列，影响周围的元素。

 

11）水平居中的几种方式

1：文字、图片等行内元素的水平居中------text-align:center   这个属性能够解决在文字，图片，行内元素的水平居中。

2：确定宽度的块级元素水平居中-----margin:0 auto;

3：不确定宽度的会计元素水平居中

　　A:table 标签实现----table本身不是块级元素，不设定宽度的话，它的宽度由内部元素的宽度“撑起”，仅需设置margin:0 auto就可以居中（例：分页<table><tr><td><ul><li>）

　　　缺点：增加了无语义标签，加深了标签的嵌套层数。

　　B:将要居中的标签转换为行内元素，然后在父标签设置text-align:center;  缺点：因为转换成了行内元素，可能会带来一些限制。

      C:通过给父标签设置float,position:relative;left:50%,子标签设置position:relative;left:-50%;来实现

12）竖直居中

1：父标签不确定，子标签为文本，图片，块级元素的竖直居中------通过给父标签设置相同的上下边距来实现居中padding

2：父标签高度确定，单行文本竖直居中----------line-heiht来实现

3：父标签高度确定，多行文本，图片，块级元素竖直居中

　　A:vertical-align属性：当父元素为td或th是，改属性才会生效，后来查证，对inline-block等内联元素都有效。对于块级元素可设置display:table-cell来激活这个属性使之有效。

　　B:通过给父子两层元素分别设置top:50%，top:-50%来实现，也需要设置position：relative；position：absolute;

 

13)网格布局

一个页面经常会分为好几块，每次呈现给用户的最好先是主体内容，这样视觉效果会好些，感觉网速很快。

在设计的过程中，需要把主体内容的html标签要保证在其他内容之前加载，（就是将主体内容的html标签顺序靠前）

 

14）z-index

该属性在设置position后激发，z-index越大， 元素位置越靠上。也可设置为负数，这样，元素会在body之下。

 

转载于:https://my.oschina.net/u/1387270/blog/175443