Javascript 技巧

 

一些JavaScript运用的小技巧，方法，函数等等

1、共享 onload 事件（非常好用）

function addLoadEvent(func)
{
    let oldOnload = window.onload;
    if(typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else {
        window.onload = function()
        {
            oldOnload();
            func();
        }
    }
}

 

2、少访问 DOM 和尽量减少标记

繁冗的表示

if(document.getElementsByTagName('a').length > 0)
{
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++)
    {
        // 对每个链接进行处理
    }
}

虽然这段代码可以运行，但是不能保证最佳性能

最佳表示

// 将第一次搜索的结果保存在一次变量之中，减少时空开销
var links = document.getElementsByTagName("a");
if (links.length > 0)
{
    ......
}

 

3、在现有方法后插入一个元素

function insertAfter(newElement, targetElement)
{
    // 把目标元素的parentNode属性保存在变量 parent 里
    let parent = targetElement.parentNode;
    // 检查元素是否 parent 的最后一个元素
    if(parent.lastChild == targetElement)
    {
        // 如果是，则直接追加
        parent.appendChild(newElement);
    }
    // 如果不是，插入目标元素和目标元素下一个元素之间
    else {
       parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

 

4、返回所有元素

如果把通配符 "*" 作为参数传给 getElementByTagName 方法，就会把所有的元素，不管标签名是什么，一 一 返回

getElementsByTagName("*")

 

5、最佳 DOM 方法选择

• 在需要对文档的 现有信息 进行检索时，以下 DOM 方法最实用
  • getElementById
  • getElementByTagName
  • getAttribute
• 在需要把信息添加到文档里面去，以下DOM方法最有用
  • createElement
  • createTextNode
  • appendChild
  • insertBefore
  • setAttribute

6、修改 className，通过JavaScript  快捷函数

function addClass(element, value)
{
    // 检查 className 的属性的值是否是 null
    if(!element.className)
    {
        // 如果是，把新的 class 设置值直接赋值给className属性
        element.className = value;
    }
    else{
        // 如果不是，把一个空格和新的class设置值追加到 className 属性上去
        newClassName = element.className;
        newClassName += " ";
       newClassName += value;
       element.className = newClassName;
    }
}

 

7、对函数进行抽象

　　把具体的值转换成为一个函数的参数，就可以把它成为一个更通用的函数