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

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

 

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

 

table布局缺点:
  • 代码量大,结构混乱;
  • 标签语义不明确,对搜索引擎不友好。

 

css布局:div+css,或者(x)html+css。
代码量少、结构精简、语义清新。
代码量少,浏览器端下载时间就会更短;
语义清晰就会对搜索引擎更友好。

 

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

 

浏览器会根据标签的语义给定一个默认定样式。
判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
测试下DevTool中有没有禁用网页中的CSS设置?测试下w3c官网去掉样式后的效果。

 

<h>标签,搜索引擎对其比较敏感,尤其是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方式通常是 选择符前缀法 和 样式属性前缀法。

 

<a>标签的四种状态定义顺序,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更适合来调用初始化函数。
  • 在页面的最后,即</body>标签之前再调用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()方法。
posted @ 2015-02-01 17:23 阿郎博客 阅读(...) 评论(...) 编辑 收藏