JS关于DOM的优化

目录

避免在HTML文档中使用JavaScript

四个原则:

Windows加载时,共享onload事件。

错误的方式

建立匿名函数

使用addLoadEvent

平稳退化的一些..

其他优化

键盘访问(别用)


避免在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;
        }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值