那些年我封装的 JS 函数

不知名网友发布于2019-08-23 13:52 / 371人阅读

摘要：但我也说了，这些我积累的函数都是兼容性极佳的方式，也就是说，不管是的多低版本，也是没多大问题的，而且这些自己实现的功能确实对初学者帮助不少。

给标签增加或移出类名

肯定有人会说，添加类名可以用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;
  }

};


未完待续 ， 有时间就更新

混合云专线服务封装的js文件冲突l 封装函数函数封装封装异步函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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