《编写高质量代码－－Web前端开发修炼之道》读书笔记_html/css_WEB-ITnose

前言

这两周参加公司的新项目，采用封闭式开发 (项目成员在会议室里开发)，晚上加班到很晚，所以没时间和精力写原创博客了，今天就分享下这篇《编写高质量代码－－Web前端开发修炼之道》读书笔记吧。

正文

欲精一行，必先通十行。

在前端开发这个领域，一专多能更是非常必要的。

table布局缺点：

代码量大，结构混乱；

标签语义不明确，对搜索引擎不友好。

css布局：div+css，或者(x)html+css。

代码量少、结构精简、语义清新。

代码量少，浏览器端下载时间就会更短；

语义清晰就会对搜索引擎更友好。

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

浏览器会根据标签的语义给定一个默认定样式。

判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

测试下DevTool中有没有禁用网页中的CSS设置？测试下w3c官网去掉样式后的效果。

标签，搜索引擎对其比较敏感，尤其是h1和h2。

当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。

table布局适合展示二维数据。

语义化标签应注意的一些其他问题：

尽可能少地使用无语义标签div和span。

在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利。

不是用纯样式标签，例如b、font和u等，改用css设置。语义上需要强调的文本可以包含在strong或em标签里。

对于文件过于分散和集中的问题并没有完美的解决方案，我们需要根据实际情况做些适当的折中。

css rest：

不推荐 * { margin:0; padding: 0 }，推荐显示罗列出来。也不建议写成：{margin:0; padding:0; color:#000; font-size:12px;}，因为这样会破坏css的继承性。

.fl { float: left; display: inline } 其中display: inline是为了解决IE6的双外边距Bug。

.zoom { zoom: 1 } 是IE的专有属性，为了触发IE的hasLayout。当zoom无效时，可以设置“position: relative”来触发hasLayout。

补充：

reset浏览器默认样式，推荐： https://github.com/necolas/normalize.css

拆分模块：

模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将它们提取出来，拆分成一个独立的模块。

模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

驼峰法用于区别单词，划线用于表明从属关系。例如：.timeList-lastItem。

学习这种风格的命名：

.fr { float: right; }

.w25 { width: 25%; }

多用组合，少用继承。

当样式设置有冲突时，会采用权重高的样式。

html标签的权重：1，class的权重：10，ID的权重：100.

当权重相同时，会采用最近定义原则。

为了保证样式容易被覆盖，提高可为维护性，css选择符的权重尽可能低。

css的hack方式通常是 选择符前缀法 和 样式属性前缀法。

标签的四种状态定义顺序，l( link )ov( visited )e h( hover )a( acitive )te，即love hate原则。

块级元素和行内元素：

块级元素可以设置width、height属性，行内元素设置width、height属性无效。

块级元素可以设置margin和padding属性。行内元素设置margin和padding的水平方向，即-left和-right有效，垂直方向的-top和-bottom无效。

通过修改display属性来切换块级元素和行内元素。

hasLayout：

是IE浏览器为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性。

display：inline-block

行内的块级元素，它有块级元素的特点：可设置宽高、margin和padding值，也有行内元素的特点：不独占一行。

会触发hasLayout。垂直方向的对齐，可设置形如 *vertical-align: -10px 来解决。

为了实现E6、IE7和其他浏览器都兼容display: inline-block，也存在一定问题：

它只能对行内元素实现 display: inline-block；不可以是块级元素。

*vertical-align是针对IE对hack，这也是不友好的，能不用hack就尽量不要使用hack。

虽然IE6和IE7不支持CSS设置为display: inline-block，但事实上IE6和IE7的CSS解析引擎还是有display: inline-block的，比如说img标签和button标签都具有display: inline-block的特性，可以设置宽高但却不独占一行。

float

会改变正常的文档流排列，影响到周围元素。

position: absolute 和 float: left或float: right 会隐式地改变display类型，不论之前是什么类型的元素(display: none除外)，都会让元素以display: inline-block方式显示：可以设置宽高，默认宽带并不占满父元素。

居中

水平居中
(1) 文本、图片等行内元素的水平居中：给父元素设置 text-align: center
(2) 确定宽度的块级元素的水平居中：给元素设置 margin-left: auto 和 margin-right: auto
(3) 不确定宽度的块级元素的水平居中：
I. 使用table包裹，并给table设置margin: 0 auto; 优点：做法巧妙。缺点：增加了无语义标签，加深了标签的嵌套层数
II. 使用display: inline/inline-block; 优点：简单明了，结构清晰。缺点：使用inline后变成了行内元素，缺少了某些特性，如：width, hieght…
III. 使用position: relative，给父元素设置float、position:relative和left:50%，子元素设置position:relative和left:-50%。 优点：结构清晰。缺点：position:relative会带来一些副作用。

垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中：给父容器设置相同的上下内边距实现。
(2) 父元素高度确定的单行文本的垂直居中：line-height: 父元素高度。
(3) 父元素高度确定的多行文本、图片、块级元素垂直居中：
I. 使用table包裹，缺点：添加了无语义标签，增加了嵌套层数。
II. 对支持 display: table-cell 的IE8 和 firefox 用 display: table-cell 和 vertical-align: middle 来实现居中，对不支持的IE6-7，使用特定格式的hack：给父子两层元素分别设置{ *position: absolute; *top: 50% }和{ *position: relative; *top: -50% }来实现居中。缺点：使用来hack不利于维护，设置position: relative; position: absolute; 带来一些副作用。

网格布局

无论sidebar和main在样式上谁左谁右，在html标签上要保证main的标签在sidebar之前被加载。

只在最外层的容器给定具体宽度，所有其他容器的宽度均用百分比设置 ?? 网格布局。

z-index

z 轴在元素设置position为absolute或relative后被激活。

设置负边距可以让相邻元素的位置产生重叠，谁浮在上面，取决于html标签出现的先后，后出现的标签浮于先出现的标签之上。

IE6下的select遮挡问题，可使用同样大小的iframe遮住select。

为避免组件的上下外边距重合问题和IE的hasLaout引发的Bug，各模块除特殊需求，一律采用margin-top设置上下外边距。

Javascript

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

让JS不产生冲突，需要避免全局变量的泛滥，合理利用命名空间以及为代码添加必要的注视。

DOMReady比window.onload更适合来调用初始化函数。

在页面的最后，即标签之前再调用init函数，此时页面内的DOM节点不一定都“加载完成”了，但一定都“生成”了，从而模拟DOMReady的效果。

将CSS放在页头，在载入html元素之前，先载入它们的样式，这样可以避免html出现无样式状态；将javascript放在页尾，先将网页呈现给用户，再来加载页面内的脚本，避免javascript阻塞网页的呈现，减少页面空白的时间。

base层和common层都是属于框架级的，page层是属于应用级的，它可以调用base层的接口和common层的组件。

如果一个函数内某个因素很不稳定，我们可以将它从函数内部分离出来，以参数的形式传入，从而将不稳定因素和函数解耦。

高品质的组件特点：

跨浏览器兼容

组件易用

组件可重用

组件可扩展

代码组织有序，高内聚低耦合。

面向过程存在三方面问题：

数据和处理函数没有直接的关联，在执行操作的时候，我们不但要选择相应的处理函数，还要自己准备处理函数需要的数据，也就是说，在执行操作时，我们需要同时关注处理函数和数据。

数据和处理函数都暴露在同一个作用域内，没有私有和公有的概念，整个程序中所有的数据和处理函数都可以互相访问。到了开发后期和维护阶段，容易牵一发而动全身，从而加大了修改难度。

面向过程的思维方式是典型的计算机思维方式??输入数据给处理器，处理器内部执行运算，处理器返回结果。

面向对象：

在程序中我们管“物件”叫做“对象”，对象由两部分组成：“属性”和“行为”，对应客观世界中物件的“状态”和“动作”。

属性本质其实是个变量，也就是面向过程中的数据，而行为的本质其实是函数，也就是面向过程中的处理函数。不同的是，面向过程中，数据和处理函数并没有关联起来，共同属于某个物件。而面向对象将数据和处理函数定义到了一个对象的内部，作为这个对象的属性和行为存在。

内聚：

指对象或类对外提供的接口非常简单易懂，复杂的底层操作都封装在对象或类的接口内部，对用户透明。

用户不用关心过多的底层细节，只需知道类提供了哪些接口，用户知道的底层细节越少，对象的聚合程度就越高。

耦合：

指的是类与类之间关联和依赖的程度，低耦合就是指类与类之间依赖的程度低，类与类通信需要关联的接口越少，耦合程度越低。

从大局上决定程序品质的，不是OOP，而是OOA和OOD。

OOA和OOD与具体语言无关，而OOP则直接跟语言相关。

Javascript是基于原型的语言，通过new 实例化出来的对象，其属性和行为来自于两部分，一部分来自于构造函数，另一部分来自于原型。

this关键字无论出现在构造函数中，还是出现在原型中，指向的都是实例对象，通过this关键字，可以让属性和方法在构造函数和原型间通信。

在javascript中公有还是私有是通过作用域实现的。

用this.XXX定义的属性是公有的，而用 var XXX定义的属性是私有的。

私有属性的作用域只在类的构造函数中。

将所有属性和行为，无论公有还是私有全部写在构造函数里，不推荐这么做。因为在内存中一个类的原型只有一个，写在原型中的行为，可以被所有实例所共享，实例化的时候，并不会在实例的内存中再复制一份，而写在类里的行为，实例化的时候会在每个实例里复制一份。

把行为写在原型里可以减少内存消耗，没有特殊原因，推荐尽量把行为写在原型里。

写在原型中的行为一定是公有的，而且无法访问私有属性。

在原型中定义私有行为，但通过给属性和行为的名称前面加上“_”来约定它是私有的，这是一种命名约定，它并不能真正实现行为的私有，但它能够让工程师知道它是设计成私有的，从而注意避开像公有行为那样调用它。

如果使用set方法来设置属性，那么我们就有了监听属性valueChange的入口。

Javascript中继承是要分别继承构造函数和原型中的属性和行为的。

Javascript中function的两种用法：

作为函数存在，直接使用“()”进行调用，例如“function test() {}; test();”，test被用做函数，直接被“()”符号调用。其this指向window对象。

作为类的构造函数存在，使用new调用，例如“function test() {}; new test();”，test作为类的构造函数，通过new进行test类的实例化。其this指向的是实例对象。

可以通过function对象上的call或者apply函数来修改函数的上下文this。

传值和传址：

如果是数值型、布尔型、字符型等基本数据类型，在进行赋值时会将数据复制一份，将复制的数据进行赋值，也就是通常所说的传值。

如果时数组、hash对象等复杂数据类型，在进行赋值时会直接用内存地址赋值，而不是将数据复制一份，也就是通常所说的传址。

prototype本质上也是个hash对象，所以直接用它赋值时会进行传址。

Bird.prototype = new Animal(); // Bird.prototype.constructor指向了Animal

Bird.prototype.constructor = Bird; // Bird.prototype.constructor重新指向了Bird

只要是类就会有原型，不管它是自定义类还是javascript的内置类。

内置类的方法可以重写，但属性却不能重写。

代替直接修改内置类原型的做法，定义一个自定义类，将内置类的实例作为参数传给构造函数，在自定义类里定义扩展方法。这种做法的思路是将内置类再封装一层，以此保护内置类的原型不被污染。

定义在html标签中的属性，在javascript中有两种获取方式：

通过DOM节点对象的getAttribute方法。

通过DOM节点对象的属性(兼容性更好)。

从兼容性考虑，建议对于常规属性，统一使用 node.XXX的方式读取，对于自定义属性，统一使用 node.getAttribute(“XXX”)读取。

将复杂类型的数据转化成字符串，称为数据的序列化，其逆操作叫做数据的反序列化。

字符串的反序列化是通过eval函数实现的。

event对象在IE和Firefox下的表现是不同的。

在IE下，event是window对象的一个属性，是在全局作用域下的，

而在Firefox里，event对象作为事件的参数存在。

在祖先节点上监听事件(利用冒泡机制)，可有效减小内存开销。比如，jquery的 delegate()方法。