JS关于DOM的优化

最新推荐文章于 2022-10-27 16:36:48 发布

DF11G_0001

最新推荐文章于 2022-10-27 16:36:48 发布

阅读量162

点赞数

分类专栏： JavaScript DOM笔记

本文链接：https://blog.csdn.net/DF11G_0001/article/details/106796838

版权

JavaScript DOM笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

避免在HTML文档中使用JavaScript

四个原则:

Windows加载时，共享onload事件。

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