javascript原生包装函数

一、addLoadEvent()：在文档加载之后加载函数

在window.onload中，每一次新赋予一个函数并不会令之前的函数也达到加载执行目的，而是会覆盖之前的代码，使得只在文档加载之后，加载执行当前新赋予的函数。

思路：

1.首先将window.onload中可能存在的函数，赋给一个局部变量。

2.然后利用typeof操作符判断window.onload中是否已赋值，如果已赋值的是函数对象，那么typeof操作符返回的是function字符串。

3.根据判断结果，如果返回的是function字符串，那么把oldonload和func新的函数与旧的函数一起给予window.onload。否则，直接将新函数赋给window.onload即可

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

二、insertAfter()：在目标元素之后插入

js dom提供的方法中，只有insertBefore()方法，所以insertAfter(),则需要我们自己来编写

思路：

1.利用parentNode属性获取目标元素的父节点

2.判断该父节点的最后一个子节点是不是我们的目标元素

3根据判断结果，如果是，则利用appendChild直接将新节点添加到目标元素的后面，否则，利用insertBefore()方法以及nextSibling属性，把新节点插入到目标节点的下一个兄弟节点的前面。

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

三、addClass()：添加类

思路：

1.先判断目标节点是否已经具有类

2.若目标节点没有类，则直接将类名赋给目标元素的className属性

3.若目标节点有类，则先保存目标节点原有类，然后通过+=语法，通过空格把两个新旧类名连接起来，再重新赋给目标函数的className属性

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

四、moveElement()：移动元素

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

 

转载于:https://www.cnblogs.com/runhua/p/7161972.html