《编写高质量代码－－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 来解决。

为了实现E六、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()方法。