【读书笔记】编写高质量的代码Web前端开发修炼之道——曹刘阳

一：从网页重构说起

1. web标准： 机构标准，样式标准，行为标准

2.样式和行为应该从标签中分离

精简，重用，有序

好的代码，注释要占1/3

前期构思，先慢后快

先确定Html，确定语义的标签，再来选用合适的CSS

去掉样式后，网页还是组织良好有序，并具有很好的可读性

必要的h1,h2标签对搜索引擎有用

当页面内标签无法满足设计时，才适当添加div和span无语义标签

3. 原生js，js类库和Ajax（是利用js和XMLHttpRequest对象在客户端和服务器端传输数据的技术）

4.了解后台语言：了解页面如何输出，以编写出他们套脚本的模板

                            在写ajax时可以自己模拟服务器端输出

5.语义化注意点：

       少用div ，span，能用p则用p,

       不要用纯样式标签，b改用strong

四：高质量的CSS

1要用DTD检验 (漏写DTD声明,firefox会标准模式解析，ie则怪诞模式)

2 组织CSS:

       CSS的API(如何用css控制页面样式)

       css的框架（如何对css进行组织）

              base.css为最低层，被所有也引用

              common.css为中间层，模块中的重复视为一个组件（实现封装，对经常变化的部分提供灵活的接口）

              page.css 位于最高层，提供页面级样式

CSS reset       (取消默认样式)

base.css

1.避免用*通用选择符，而是改为所有标签，{margin:0; padding:0}

2.通用原子类（文字，定位，长度，边距）

       .fl{float:left;} .fr{float:right}还应设display：inline防止ie6双边距bug

       .bc{margin-left:auto;margin-right:auto }使块级元素居中，还应该设置宽度

       .clearfix{clear:both}

              三种方法让浮动的父元素能根据浮动元素的高度自动适用高度

                            1.父元素也浮动

                            2.添加清除空标签

                            3.直接从父容器清除浮动元素的浮动（好方法）

 

 

       .zoom{zoom:1}触发ie的hasLayout

3.模块化css（让代码高度重用）

封装，多用组合少有继承原则

模块和模块之间尽量不要包含相同内容，相同部分应该提取出来，单独建立模块

拆分模块时应该在“数量少”和“结构简单”提高重用性

4.css命名

使用英文

避免滥用子选择器

运用骆驼命名法和划线命名法

5.继承的缺点：任何一个小的变化也需重新设定一个类，很容易引起类的暴涨，产生大量细微不同的类

多用组合，少用继承

margin问题：

1. 在不确定模块上下margin不是很稳定的时候，最好不要将margin写在类里，而是单独挂用边距的原子类（mt10,mt20）

2. 不要混合上下margin-top和margin-bottom ，要单独使用，防止重叠

 

低权重原则——避免滥用子选择器

6. 权重相同，采用最后定义的选择器

7.为了样式容易覆盖，采用权重低的选择器

少用子选择器，多添加类

8. css sprite：就是一张图片然后position定位，减少http请求数

       缺点：降低开发效率，增大维护难度（只适应于流量大的网站）

9.使用一行式的编辑风格

10.尽量使用class，少用id

11.css hack

       1) ie 条件注释法

              <!- -[if IE]> 或者（特定）<!- -[if IE 6]>或者(大于) <!- - [if gt IE6]>

              <link rel=”stylesheet” href=”name.css” type=”text/css” />

              <![endif]- ->

       lte(小于等于) lt(小于) gte（大于等于）gt（大于）！（不等于）

       缺点：虽然向后兼容性是最好的，但是都是集中在各自的文件中，加大维护成本

       2）选择器前缀法

              .test{} /*IE6 ,IE7,IE8*/

              *html .test{} /*only for ie6*/

              *+html .test{} /*only for ie7*/

       缺点：不能保证ie9 ie10 不识别这些，像后兼容存在问题

       3）样式属性前缀法

12. 链接样式的:link :visited :hover :active顺序不要弄错

13.hasLayout[用于块级元素] 设置border时有时候会断开,滚动条滚动又会出现

       需要出发hasLayout （以前用height:1%, 现在用zoom:1）

       zoom无法触发时则需要使用position:relative;

15块级元素和行内元素

       1）行内元素设置margin和padding，左右有作用，上下不起作用（padding的背景有反应，但是上下间距没有作用）

2）display的属性：block， inline，none，

inline-block（用于行内元素触发hasLayout，才有效）（还有list-item和 table-cell     IE6和IE7不支持）

16. inline-block（ie6和ie7不支持） 和hasLayout

       触发行内的hasLayout可以使行内元素具有块级属性并在同一行，或者也可用zoom：1

       文字对齐的时候ie8和firefox是顶对齐，使用*vertical-align

       缺点：只能触发行内的hasLayout，还有css hack应尽量少用

17. relative ，absolute 和float

文档流 position:relative表示z-index:0; left top right bottom相对各自在z-index:0的位置

脱离文档流 position:absolute

float会仍然在z-index:0的文档流中，会改变文档排列

注意：absolute和float会隐式的改变display: inline-block

(可设长宽，还有双边距bug使用display：inline解决)

18.水平居中

1）文本和图片的行内居中用text-align：center

2）确定宽度的块级元素居中用 margin-left:auto; margin-right:auto

3)不确定宽度的块级元素（如分页）居中

　　　　  方法一：用table包围ul(table的宽随内容变化，直接margin两边auto就可居中， ul 间接可居中)

                            缺点：无意义标签

              方法二：将display：inline，再用text-align：center

                            缺点：不能设宽高

              方法三：给父元素设float，然后父元素设置position：relative和left：50%

                            子元素position：relative；left：-50%

                                          缺点：给子元素设了position：relative不好

19.竖直居中

              1）父元素高度不确定的文本，图片，块级元素

                     可给父元素设置相同上下边距实现

              2）父元素高度确定的单行文本

                     可用line-height: 父高 实现

              3）父元素高度确定的多行文本，图片，块级元素

                     方法一：在td和th时，vertical-align可实现（div，p这些不支持）

                                   但是在ie8和firefox中可以用display：table-cell来模拟表格（ie6和ie7不支持，只能直接用表格）

                     方法二：对ie6和ie8使用css hack 设置父和子元素的position为absolute和relative，在分别设置top：50%；top：-50%

 

20. 网格布局

       两栏式布局

       1.main比sidebar更重要，所以代码中main一定要提前sidebar

       2.多用组合原则（有些类经常变化就单独放，如把float抽离，添加组合类.fr 和.fl）

              缺点：仍然不能灵活修改

       3.利用子选择器 .content-xx-xxxx .main衍生类提供布局样式，.main则其他小样式

                                          xx为lr或rl， xxxx中分别是main 和sidebar的宽度

              缺点：不易于扩展，不轻便（但是main和sidebar的宽度有限制，所以可以）

              注意：宽度用100%，可以嵌套使用，提高重用性

21.   position：relative和absolute和float都将触发z-index事件

z-index （越大越靠前，值相同，后定义的将在上边）

       z-index：-1 在最低层（但在body下面，无法触发点击事件）

       注意：负边距也能发生位置重叠（后出现的在上面）

22. flash和select问题

       flash默认为窗口模式，会在前面（属性wmode设置的window, opaque和transparent）

              注意：flash在ie和firefox里是以不同方式嵌入的（object和embed）

       select在IE6下是以窗口模式显示的，永远在第一层 IE6 bug

                     解决方法用<iframe></iframe>设置在要提前元素的后面层来遮住select

23 IE6不支持透明图png

       方法：用ie6专用滤镜配合js解决

       缺点：加载完前仍然有色，执行效率不高，当png为背景时，滤镜不支持background-position和background-repeat

 

五：高质量的javascript

1.避免JS冲突（设计者有同名的全局变量定义在window下）

      方法：用匿名函数包围（function（）{}）（）；

2. 两个匿名函数之间有通讯（功能C需要功能A中的b变量值）

       严格控制js的全局变量

       方法1：在全局变量中设var str；在A功能中将 var b=str(需要更多通信就设立更多变量，这样不好)

       方法2：用全局对象类型的变量GLOBAL{}

       方法3：为了防止通信之间还受影响(a和b都命名了str，c调用a的，d调用b的，会被覆盖)，需要使用命名空间来解决

                     var 变量名=GLOBAL.A.str(指定空间名A的str)

                     也可生成二级命名空间

       进一步将命名空间定义为一个函数

      

       给GLOBAL对象添加方法namespace，然后在需要空间的匿名函数中调用（先调用，再设值）

 

3.添加各自的注释（功能，负责人，联系方式，时间）

4.js从功能上分为 框架部分（组织作用，全局变量，定义命名空间）和应用部分（功能逻辑）

       将应用部分的代码组织起来function init（）{}

       方法1：再在文档加载完后调用 window.onload=init; （但是window的onload要全部包括图片在内的全部下载完）

       方法2：可以用JQuery中的监听DOMReady的$(dicument).ready(init) （但是复杂且浏览器不同将不同）

       方法3：在页面的最后调用init 模拟DOMReady

5. 一般网页的头尾中会单独放置三个文件

       头部：框架部分

       尾部：调用init（当中部没有init时则会报错）

                     可以用if(init){ init()}

       中部：为应用部分

6. CSS放头部，JS放尾部

7.JS文件压缩（删空格，删注释，变量名简单化，所以要保留原文件）

8. JS 分层（与css一样 base， common， page）

              base层：作用1（封装不同浏览器下的JS差异，提供统一接口）

                            作用2（扩展JS底层提供的接口）

                            即给common和page层提供接口

              common层：给page层提供组件

              page层：具体功能

9.base层：封装（即ie与firefox的差异）

                     1）firefox的节点包括空格，换行，等文本信息P180-P184

                     2）event对象作为window的属性作用于全局作用域的，在firefox中event作为事件参数存在