Javascript 通用函数

虽然是通用函数,但可能并不常用,或者有很多替代方案,以此记录致敬《JavaScript Dom编程艺术》一书

1.addLoadEvent(func)

以上方法相当于一个容器,存放页面加载完成后需要执行的方法,只需将需要执行的方法的方法名作为参数调用此方法即可

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

2.addClass(element, value)

给元素添加class的方法

element:要添加新class的元素

value:新的class的名称

function addClass(element, value) {
  if (!element.className) {
    element.className = value;
  } else {
    let newClassName = element.className;
    newClassName += " ";
    newClassName += value;
    element.className = newClassName;
  }
}

3.获取url参数

法一:

    // 获取url参数
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }

法二:

    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return r[2];
      return null;
    }

4.向元素后插入节点

在JavaScript中,是没有提供向某元素的后面插入元素的方法的!(但有提供向元素前插入insertBefore的方法)

function insertAfter(newElement, targetElement) {
  let parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement, targetElement.nextSibling);
  }
}

5.检测浏览器是否支持某种类型的输入控件

这是一个兼容性测试函数,因为存在一些浏览器可能不支持input的h5新类型,可用此函数进行检测

function inputSupportsType(type) {
  if (!document.createElement) return false;
  let input = document.createElement('input');
  input.setAttribute('type', type);
  if (input.type == 'text' && type != 'text') {
    return false;
  } else {
    return true;
  }
}

 

posted @ 2021-05-07 00:20  JonnyOu1012  阅读(40)  评论(0编辑  收藏  举报