编写高质量代码-web前端开发修炼之道--笔记

本篇简洁记录一下，有些值得学习的地方，方便日后记忆。

1.web标准--结构、样式、行为 的分离

• 结构标准（xml、xhtml、html）
• 样式标准（css）
• 行为标准（DOM、ECMAScript）

2.语义化标签意义在于

• 搜索引擎看到的只是代码只能通过标签来判断语义，来看当失去样式"css裸体日"（Web Developer可调试），网络结构是否组织良好有序/可读性

• 语义化标签应该注意：尽可能少地使用无语义标签div和span； 在语义不明显，既可以使用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；

3.组织CSS的方法

• base.css:与具体UI无关，力求精简和通用
• common.css:提供组件级的css类，尽可能将内部实现封装
• page.css:高度重用的模块有，每个页面都自己的page

4.CSS命名：

• 骆驼命名法: 区别不同单词，
• 划线: 表明从属关系,推荐组合命名

• 如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（如mt10，mb20）.模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom(上下margin会重合，左右不会)。

5.权重:

• HTML标签权重是1
• class的权重是10
• id的权重是100
• !important的权重是1000。
• 如果CSS选择符权重相同，那么样式会遵循就近原则(哪个选择符最后定义，就采用哪个选择符的样式)
• CSS选择符需保证权重尽可能低。少用自选择器，多添加class。

6.CSS sprite

• 图片翻转技术将多张图片合并为一张,不懂可看这里
  雪碧图 （耗时5分钟）

7.CSS hack

• IE条件注释；lt,gt,lte,gte
• 选择符前缀法；
• 样式属性前缀法。

8.解决超链接访问后hover样式不出现的问题

• love hate原则，即l（link）ov（visited）e h（hover）a（active）te。

9.haslayoutIE浏览器专有的属性

• 用于CSS的解析引擎，在IE下一些复杂的CSS设置解析起来会出现bug，
• 其原因可能与haslayout没有被自动触发有关；haslayout触发方法：设置width，height的值，设置position为relative，但是会有副作用；更好的解决方法：使用“zoom：1”.

10.块级元素和行内元素

• 块级元素（div,p,form,ul,ol,li）
• 行内元素（span,strong,em）设置width，height属性,竖直方向边距（内外）无效。

11.display：inline-block

• 行内的块级元素，拥有块级元素的特点，可以设置长宽，可以设置margin和padding的值，却不独占一行，宽度并不沾满父元素。
• IE6和IE7不支持，可以通过触发行内元素的halayout实现。

12.水平居中

• 行内元素的水平居中： text-align：center
• 确定宽度的块级元素的水平居中 ：margin-left：auto；margin-right：auto
• 不确定宽度的块级元素水平居中：
  1.将ul包含在table标签内，对table设置margin-left：auto和margin-right：auto；
  2.改变块级元素的display为inline类型，然后使用text-align：center；
  3.给父元素设置float，然后父元素设置position：relative 和left：50%，子元素设置position：relative和left：-50%。

13.垂直居中

• 父元素高度不确定的文本，图片，块级元素的竖直居中：通过给父容器设置相同上下边距实现。

• 父元素高度确定的单行文本的竖直居中：通过给父元素设置line-height来实现，line-height值和父元素的高度只相同。

• 父元素高度确定的多行文本，图片，块级元素的竖直居中
  1.当父元素为td或th时，可以设置vertical-align属性
  2.对支持display：table-cell的IE8H和Firefox用display：table-cell和vertical-align：middle来实现居中
  3.不支持的IE6和IE7，使用特定格式的hack。

14.合作控制全局变量

• 团队合作中，用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。

15.JavaScript分层

• base层：
  1.位于底端，封装不同浏览器下JavaScript的差异
  2.提供统一的接口，可以靠它来完成跨浏览器兼容的工作
  3.扩展JavaScript语言底层提供的接口，让它提供更多更为易用的接口。
• common层：
  1.中间层，依赖base层提供的接口
  2.common层提供可供复用的组件，和页面功能没有直接关系
• page层：位于顶端，和页面里的具体功能需求直接相关

16.获得DOM节点的三种方法

• getElementById，
• getElementsByTagName
• getElementsByClassName（这个原生js没有,类库有）

17.使用id的注意事项

• 同一个页面里id只能出现一次，所以如果你的程序需要被多处复用，就一定不能使用id作为JavaScript获得DOM节点的挂钩。

• 组件需要指定一个根节点，以保持每个组件之间的独立性。