WEB前端开发修炼之道 笔记

一、网站重构：

1.Web标准：结构、样式和行为分离

二、高质量的HTML：

1.语义化标签

2.尽可能减少无语义标签span和div

3.在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好

4.不要使用纯样式标签，例如b、font等

5.标签名、属性名全部小写，属性前加引号，单标签需闭合

三、高质量的CSS：

1.CSS的分层

①：base.css：base层是高度重用的基础层，提供CSS reset功能和粒度最小的通用类——原子类。

②：common.css：提供组件级CSS。将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”，将重复的模块提取出来

③：page.css：网站非高度重用的模块可以提取出来放在page层，page层提供页面级的样式，每个页面都有自己的page层CSS

2.多用组合，少用继承

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

4.CSS sprite

5.CSS hack：①IE条件注释； ②样式属性前缀法

6.尽量使用class，少用id

7.haslayout

8.display:inline-block

9.水平居中和垂直居中

四、高质量的JavaScript

1.团队合作——如何避免JS冲突：和里使用命名空间以及为代码添加必要的注释

var GLOBAL = {};
GLOBAL.namespace = function(str) {
	var arr = str.split("."), o = GLOBAL;
	for (i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++) {
		o[arr[i]] = o[arr[i]] || {};
		o = o[arr[i]];
	}
}
// 为A程序员提供一个命名空间，GLOBAL.A
GLOBAL.namespace("A");

2.给程序一个统一的入口——window.onload和DOMReady

3.CSS放在页头，JavaScript放在页尾

4.文件压缩：减小网页的大小，缩短网页的下载时间：Packer：http://dean.edwards.name/packer/ 和YUI Compressor

5.JavaScript分层概念：

①：base层：职责一是封装不同浏览器下JavaScript的差异，提供统一的接口，实现跨浏览器兼容的工作；职责二扩展JavaScript语言底层提供的接口，让它提供更多更为易用的接口

②：common层：common层提供可供重用的组件，例如cookie,原生JavaScript对设置和读取的cookie方法显得非常的笨拙

③：page层：和页面具体功能需求直接相关，完成 相关页面的功能，依赖于base层和common层

6.JavaScript库