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);
}

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com