最近老大给我们买来一些技术方面的书籍，其实很少搬着一本书好好的完整的看完过，
每每看电子档的，也是打游击式的看看这章，瞅瞅那章，在那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，我常使用它的标签，
在有需要的时候还可以用他的其他标签，表格标题用caption,表头用thead包围，主体部
分tbody包围，尾部tfoot包围
总结：语义化标签应注意的一些问题
1：尽可能少地使用无语义标签div和span
2：语义不明显，既可用P也可用div的地方，建议尽量用p,因为有上下间距，可读性好。
（还是视情况而定）
3：不要使用纯样式标签，如：b,font,u等，直接写进css设置。
第四章:高质量的css
1)怪异模式和标准模式
在标准模式中，浏览器根据规范表现页面；而怪异模式通常模拟老式浏览器的行为以防止老
站点无法工作。
他们两者之间的差异比较典型的表现在IE对盒模型的解析：在标准模式中，网页元素的宽
度=padding+border+width;而在怪异模式中，width本身就包括了padding和border。
在怪异模式中：设定width,然后margin:0auto;是无法居中的。标准模式中可以正常工
作。
于是我们尽量避免怪异模式，而选用标准模式，这样就出现了DTD(文档类型定义
DocumentTypeDefinition)；
DTD(文档类型定义DocumentTypeDefinition)：是一种保证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-bott
om: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---将网站的多张背景图片合并到一张大图片上。
可以解决划过状态时背景图片出现瞬间空白的问题。
