那些年我封裝的 JS 函數

不知名網友發布于2019-08-23 13:52 / 464人閱讀

摘要：但我也說了，這些我積累的函數都是兼容性極佳的方式，也就是說，不管是的多低版本，也是沒多大問題的，而且這些自己實現的功能確實對初學者幫助不少。

給標簽增加或移出類名

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

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

function removeClass(ele, className){
    if(ele.className){
        var reg = new RegExp(""+className+"");
        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;
  }

};


未完待續 ， 有時間就更新

云服務器 GPU云服務器封裝的js文件沖突l 封裝函數函數封裝封裝異步函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99708.html

那些年我遇到過的兼容性問題

摘要：每次面試時常被問到兼容問題的解決，有時自己遇到過的問題竟然也忘記了是怎么解決的，索性今天把它們記錄下來。的實現原理是在檢測到事件的時候，會通過自定義事件立即出發模擬一個事件，并把瀏覽器在之后的事件阻止掉。每次面試時常被問到兼容問題的解決，有時自己遇到過的問題竟然也忘記了是怎么解決的，索性今天把它們記錄下來。 1、chrome瀏覽器下不支持字體小于12像素通過transform:sc...

iamyoung001 2019-08-20 14:08 評論0 收藏0
【福利】那些年我總結的Web開發者成長路線

摘要：從實習后的那些年里，我就開始經常總結一下自己的學習路線，成長路線等等。成長路線圖最開始的時間，我并沒有想到這張大圖可以如此的受歡迎。它是一款專注于開發者成長的應用，涵蓋開發的流程及技術棧，開發的學習路線成長衡量等各方面。從實習后的那些年里，我就開始經常總結一下自己的學習路線，成長路線等等。今天，就重新把這些資料再放出來啦啦。當然，這些資料也都是在我的GitHub上有的啦。 Deve...

Terry_Tai 2019-08-21 10:54 評論0 收藏0
【福利】那些年我總結的Web開發者成長路線

摘要：從實習后的那些年里，我就開始經常總結一下自己的學習路線，成長路線等等。成長路線圖最開始的時間，我并沒有想到這張大圖可以如此的受歡迎。它是一款專注于開發者成長的應用，涵蓋開發的流程及技術棧，開發的學習路線成長衡量等各方面。從實習后的那些年里，我就開始經常總結一下自己的學習路線，成長路線等等。今天，就重新把這些資料再放出來啦啦。當然，這些資料也都是在我的GitHub上有的啦。 Deve...

I_Am 2019-07-24 10:32 評論0 收藏0