那些年我封裝的 JS 函式

天才櫻木花道發表於2019-02-16
封裝JS函式
  1. 給標籤增加或移出類名

肯定有人會說，新增類名可以用obj.classList.add呀，是的，這沒有錯。但我也說了，這些我積累的函式都是相容性極佳的方式，也就是說，不管是 ie 的多低版本，也是沒多大問題的，而且這些自己實現的功能確實對初學者幫助不少。

function addClass(ele, className){
    var reg = new RegExp("\b"+className+"\b");
    if(!reg.test(ele.className)){
        /* 如果元素 ele 不包含 className */
        ele.className += " "+className;
    };
};

function removeClass(ele, className){
    if(ele.className){
        var reg = new RegExp("\b"+className+"\b");
        var classes = ele.className;
        ele.className = classes.replace(reg, "");
        if(/^s*$/g.test(ele.className)){
            ele.removeAttribute("class");
        };
    }else{
        ele.removeAttribute("class");
    }
};

2.滾輪事件

滾輪事件也是 PC 端主流網站必須實現的功能，通常我們會配合我們自己寫的滾動條禁止掉系統的滾動條來使用。但是，滾輪事件跟我們想象的略有不同，它是 firefox 一種繫結，反而 ie 和 chrome 是一樣的。

window.onload = function () {

  //ie/chrome
  document.onmousewheel = function(event){
      scrollMove(event,callback)
  }
  //firefox
  if(document.addEventListener){
    document.addEventListener(`DOMMouseScroll`,function(event){
        scrollMove(event,callback)
    });
  }

  function scrollMove(event,callback) {
    event = event || window.event;
    var flag = ``;
    if(event.wheelDelta){
      //ie/chrome
      if(event.wheelDelta > 0){
        //上
        flag = `up`;
      }else {
        //下
        flag = `down`
      }
    }else if(event.detail){
      //firefox
      if(event.detail < 0){
        //上
        flag = `up`;
      }else {
        //下
        flag = `down`
      }
    }

    switch (flag){
      case `up`:
        if (callback && callback[`wheelUp`] == `function`) {
            callback.wheelUp()
        }          
        break;
      case `down`:
        
        break;
    }

    //取消預設行為
    event.preventDefault && event.preventDefault();
    return false;
  }

};


未完待續 ， 有時間就更新

相關文章