[读书笔记] Web 前端开发修炼之道

原创地址：http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处

今天我们要读的书是Web 前端开发修炼之道

第1章 从网站重构说起

1.1 糟糕的实现，头疼的维护

曾经, 网页代码很乱.

1.2 Web 标准，结构，样式和行为的分离

分离了.

1.3 前端的现状

人员参差不齐.

小结:

本章相当于引论。

第2章 团队合作

小结:

团队和沟通这个永远是个凑字数的好话题。

---

第3章 高质量的HTML

3.1 标签的语义

标签是有语义的。

HTML 标签的设计是有语义的。

标签名	语义	翻译
div	divisiton	分隔
span	span	范围
ol	ordered list	排序
ul	unordered list	不排序列表
li	list item	列表项目
h1 ~ h6	header 1 to header6	标题1 到 标题6
p	paragraph	段落

实际上，div 和p 的语义其实是没有的。那为什么还需要这两个东西呢？

3.2 为什么要使用语义化标签

html + css 布局取代了传统的table 布局，使得结构和样式得到了彻底分离。结构是最重要的，标签的语义化就是让结构更加清楚的有效手段。

3.3 语义良好的评判标准

去掉样式，看网页结构是否组织良好，是否任然有很好的可读性。

3.4 实例

• 尽可能的少用div 和span
• p 和div 优先选择p
• 不用纯样式标签，例如b,font,u 等，改用CSS 设置。

---

第4章 高质量的CSS

4.1 怪异模式和DTD

DTD(Data Type Definition), 如果没有声明DTD 类型，IE 会按照怪异模式去解析。

在标准模式中，浏览器根据规范表现页面，而怪异模式模拟老式的浏览器以兼容很老很老的站点。具体表现的差别这里不特别展开，一般情况下我们都应该避免触发怪异模式，选用标准模式。

4.2 如何组织CSS

• base.css + common.css + page.css
• 通用+项目+灵活

base 层提供CSS reset 和原子类。base 层是稳定的，一般不需要任何的修改。

common 层提供组件级的Css 类，一般由单人维护。

page 层提供各种灵活的样式定义，由各开发人员维护。

4.3 推荐的base.css

这个不错,值得推荐

4.4 模块化CSS

4.4.1 如何划分模块

4.4.2 CSS 的命名

借鉴类和属性的方式命名class。

采用划线分割外加骆驼命名法，使用划线表明层级关系。

4.4.3 多用组合，少用继承

说白了就是挂多个class

4.4.4 margin 问题

不要混用mt mb

4.5 低权重原则

不要滥用子选择器。CSS 样式是可以有重叠的，冲突的时候采用权重高的。

HTML 标签的权重是1，class 是10, id 是100，如果权重相同，就取就近原则。

除非样式很稳定，否则建议多添加class, 少用子选择器。

需要将很重要3个字变绿色，一般来说有两个方案如下：

很多人采用方案1，因为这个方案更加的简洁，但是当有新的需求出现的时候，比如说将小心处理这几个字设置成绿色。

子选择器影响来将来要添加的代码。因为子选择器的权重比较高，而越高的权重对以后的样式越有可能带来影响，因此少用子选择器会更加有利于维护。

4.6 CSS sprite

用不用是个问题

4.7 CSS 的常见问题

4.7.1 多行式和单行式

单行

4.7.2 id 还是class

从css 的角度来说，推荐多用class

• id 只能出现一次，不可重复，class 可以任意多次。
• id 权重为100， class 权重为10.

按照低权重原则，我们优先使用class.

---

第5章 高质量的JavaScript

5.1 良好的编程习惯

5.1.1 避免JS冲突

使用(function(){})()

使用var Global={} 来作全局变量

使用var Global.Chat={} 来作命名空间

5.1.2 统一的入口

5.1.3 CSS 放页头，JavaScript 放页尾

5.1.4 文件压缩

5.2 JavaScript 分层

5.3 技巧

5.4 面向对象编程

JavaScript 是基于原型的语言，new 实例化出来的对象，属性和行为来自于构造函数和原形。当我们声明一个类的时候，同时也生成了一个对应的原型。这个其实和.NET/JAVA 中的类型对象是一致的。

优先级是构造函数优于原型。

原型是个hash 对象。一般来说，把属性放在构造函数中，方便接受参数。一般来说，不介意把所有方法都写在构造函数中，因为每个实例对象只会指向同一个原型，但是每个实例对象都会复制构造函数里的所有方法。比较费内存。当然还有一些比如说私有属性，get set 之类的东西，这里略过。

5.5 其他问题