`
kylines
  • 浏览: 86010 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

    博客分类:
  • 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函数实现的。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics