目录
避免在HTML文档中使用JavaScript
结构与行为的分离程度越大越好.
四个原则:
平稳退化
分离JavaScript
向后兼容
性能考虑
Windows加载时,共享onload事件。
错误的方式
//这样不行,只有最后一个函数会被执行
window.onload=firstFunction;
window.onload=SecondFunction;
建立匿名函数
//在函数较少时,这是最好的方法
window.onload function(){
firstFunction;
SecondFunction;
}
使用addLoadEvent
function addLoadEvent(func){
var oldonload=window.onload;//把现有window.onload时间处理函数的值存入oldonload
if(typeof window.onload!='function'){//如果这个事件处理函数还没有绑定任何函数,就把新函数添加给它
window.onload=func;
}
else{//如果这个时间处理函数已经绑定了一些函数,就把新函数添加到现有指令末尾
window.onload=function(){
oldonload();
func();
}
}
}
//需要添加的时候,只需要使用addLoadEvent()
addLoadEvent(函数);
平稳退化的一些..
选择正确的判断方法来检查:
//某些介绍文字元素形式,使用if()
if()
{
}
//某些图片形式,保证正常加载,使用if(! )保证图片能以原始形式:新窗口打开图片形式加载
if(! )
{
}
改变Onclick的返回值
插个链接:关于undefined
//这种形式会造成找不到元素时,返回false无法用原始弹窗打开图片
links[i].onclick=function()
{
showPic(this);
return false;
}
//使用这种形式可以解决以上问题,但要记得在原函数设置返回值
links[i].onclick=function()
{
return !showPic(this);
}
//也可以使用三元操作符
links[i].onclick=function()
{
return showPic(this)?false:true;
}
其他优化
进行DOM访问时,如果差找不到相应的属性,则把相关文本设为空字符串.这是个好习惯.
if(whichpic.getAttribute("href"))
{
var text=whichpic.getAttribute("href");
}
else
{
var text="";
}
键盘访问(别用)
//为视力残疾用户添加键盘访问选项
//但是onkeypress很容易出问题,最好别用
//onclick完全够用了,他支持键盘访问
links[i].onclick=function()//鼠标访问
{
return showPic(this)?false:true;
}
links[i].onkeypress=function()//键盘访问
{
return showPic(this)?false:true;
}