《编写高质量代码-web前端开发修炼之道》摘要

Web标准：结构、样式和行为

网页源代码：.html文件、.css文件、.js文件

页面模块划分原则：
模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应该将它们提取出来，拆分成一个独立的模块。
模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

低权重原则：
当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。权重的规则是这样的：html标签的权重是1，class的权重是10，id的权重是100。如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

CSS hack
1、IE条件注释法

1）ie6.css
		.test{width:60px;}
	2）ie7.css
		.test{width:60px;}
	3）ie8.css
		.test{width:60px;}
<!—[if IE 6]>
<link type=”text/CSS” href=”ie6.css” rel=”stylesheet”/>
<![endif]-->
<!—[if gt IE 7]>
<link type=”text/CSS” href=”ie7.css” rel=”stylesheet”/>
<![endif]-->
<!—[if IE 6]>
<link type=”text/CSS” href=”ie6.css” rel=”stylesheet”/>
<![endif]-->

2、选择符前缀法
原理：在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只对特定浏览器生效。例如”*html”前缀只对IE 6生效,”*+html”前缀只对IE7生效。

<style type=”text/CSS”>
.test{width:80px;}
* html .test{width:60px;}
*+html .test{width:70px}
</style>

3、样式属性前缀法
原理：在样式的属性名前加前缀，这些前缀只在特定浏览器下才生效。例如”_”只在IE6下生效,”*”在IE6和IE7下生效。

<style style=”text/CSS”>
.test{width:80px;*width:70px;_width:60px;}
</style>

最流行的hack方式是选择前缀法和样式属性前缀法（利于开发和维护）

用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。”(function(){})()”,先定义一个匿名的function，然后立即执行它。包在这个匿名function里的变量，作用域不再是window，而是局限在函数内部。

<script>
(function(){
Var a=123,b=”hello world!”;
……
})()
</script>	

CSS放在页头，JavaScript放在页尾。

监听多个事件:
可以使用attachEvent和addEventListener方法来代替on.***监听事件。其中attachEvent是IE支持的方法，而addEventListener方法支持监听处理函数的叠加。

<script>
Var btn=document.getElementById(“btn”);
If(document.all){
Btn.attachEvent(“onclick”,function(){})
}
Else{
Btn.addEventLisetener(“click”,function(){},false)
}
</script>

将复杂类型的数据转化成字符串，称为数据的序列化，其逆操作叫做数据的反序列。字符串的反序列化是通过eval函数实现的。