common通过js方法

获取元素对象下标方法

//方法一
function getElementIdx (item) {
  var elements = item.parentNode.children;
  for (var i = 0, len = elements.length; i < len; i++) {
    if (item === elements[i]) {
      return i;
    }
  }
}
console.log(getElementIdx(aLi, oActive));

//方法二
console.log([].indexOf.call(aLi, oActive))

封装获取元素的方法

function $ (ele) {
  return document.querySelector(ele);
}

function $$ (ele) {
  return document.querySelectorAll(ele);
}

获取元素的实际样式

function getStyle (obj, attr) {
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}

设置元素样式

//设置元素样式
function setStyle (dom, css) {
  for (var key in css) {
    dom['style'][key] = css[key];
  }
}

设置任意的标签中间的任意文本内容

function setInnerText (element, text) {
  var key = element.textContent == "undefined" ? 'innerText' : 'textContent';
  element[key] = text;
}

事件监听兼容

/**
 * @description: 函数的功效
 * @param {Object} element 需要监听的DOM对象
 * @param {String} type 事件类型 click mouseenter
 * @param {Function} fn 监听绑定的回调函数
 * @param {Boolean} capture true 捕获阶段监听 false 冒泡阶段监听 
 * @return {JSON} "remove":Function 返回一个用于解除监听的函数
 * @Date: 2020-08-10 22:45:25
 */
function eventListener (element, type, fn, capture) {
  capture = capture || false; //处理capture的默认值为 false
  if (element.addEventListener) {
    //标准浏览器写法
    element.addEventListener(type, fn, capture);
  } else {
    //IE兼容写法
    element.attachEvent("on" + type, fn);
  }

  return {
    'remove': function () {
      if (element.removeEventListener) {
        element.removeEventListener(type, fn, false);
      } else {
        element.detachEvent("on" + type, fn);
      }
    }
  }
}

计算元素的位置

元素距离左边和右边的距离

function getPostion(element) {
  var pos = {
    left: 0,
    top: 0
  }
  while (element.offsetParent) {
    pos.left += element.offsetLeft;
    pos.top += element.offsetTop;
    element = element.offsetParent;
    //如果有边框要计算入父级边框 
    pos.left += element.clientLeft;
    pos.top += element.clientTop;
  }
  return pos;
}

鼠标滚轮滚动封装

function mousewheel (obj, fn) {

  obj.onmousewheel === null ? obj.onmousewheel = fun : obj.addEventListener('DOMMouseScroll', fun, false);

  function fun (e) {
    var e = e || event,
      num = 0;

    if (e.wheelDelta) {
      num = e.wheelDelta > 0 ? 1 : -1;
    } else {
      num = e.detail < 0 ? 1 : -1;
    }
    fn(num);

    if (e.preventDefault) e.preventDefault();
    return false;
  }
}

//调用
var oDiv=document.getElementById('div');

mousewheel(oDiv,function(dir){
    if(dir>0) alert('向上滚动');
    if(dir<0) alert('往下滚动');
});

通道函数

    //调用pipe 根据参数顺序 组装返回一个新的函数 
    function pipe(...funcs) {
      return function (input) {
        return funcs.reduce(function (acc, curr) {
          return curr(acc);
        }, input);
      }
    }

    //通道函数用箭头函数简化
    const pipe = (...funcs) => input => funcs.reduce((acc, curr) => curr(acc), input);

全屏功能

// 开启全屏
function openFullScreen (ele = document) {
  const requestFullScreens = ['requestFullscreen', 'webkitRequestFullScreen', 'mozRequestFullScreen', 'msRequestFullscreen'];
  for (let i = 0; i < requestFullScreens.length; i++) {
    let key = requestFullScreens[i];
    if (ele[key]) {
      ele[key]();
      return false;
    }
  }
}

// 退出全屏
function closeFullScreen () {
  const exitFullScreens = ['exitFullscreen', 'webkitCancelFullScreen', 'mozCancelFullScreen', 'msExitFullscreen'];
  for (let i = 0; i < exitFullScreens.length; i++) {
    let key = exitFullScreens[i];
    if (document[key]) {
      document[key]();
      return false;
    }
  }
}

// 是否是全屏状态
function isFullScreen () {
  return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
}

Storage

(function (w) {
  class Storage {
    constructor(type = "local") {
      this.storage = w[`${type}Storage`]
      this.history = {}
    }


    //设置存储项
    setStorage (...args) {
      const len = args.length;
      if (len === 0) {
        //如果无参数 return false终止后续
        return false;
      }
      if (len === 2) {
        //如果两个参数 并且两个参数都不是对象或者数组 以字符串形式setItem
        if (args.every(item => typeof item !== 'object')) {
          this.history[args[0]] = args[1];
          this.storage.setItem(String(args[0]), String(args[1]));
        }
        //反馈设置项目 提供check
        return {
          [args[0]]: args[1]
        }
      }

      if (len === 1) {
        //如果1个参数 并且是对象 合并到this.history中并且 迭代设置每一项
        if (Object.prototype.toString.call(args[0]) === "[object Object]") {
          let obj = args[0];
          Object.assign(this.history, obj);
          //返回给调用者一个 Array 方便check存储项目
          return Object.entries(obj).map(([key, value]) => {
            this.storage.setItem(key, value);
            return key;
          })
        }
      }
      //返回所有设置历史 供check
      return this.history;
    }


    //获取存储项目
    getStorage (...args) {
      const len = args.length;
      if (len === 0) {
        //如果不传参数 返回所有的存储项目
        return this.history;
      }
      if (len === 1 && Object.prototype.toString.call(args[0]) === "[object Array]" && args[0].length) {
        //如果只有一个参数并且参数维数组并且数组长度不为0
        let arr = args[0].slice();
        //循环数组获取数组每一项对应的值 返回一个json key(数组每一项):value(数组项对应值)
        return arr.reduce((acc, curr) => {
          acc[curr] = this.storage.getItem(curr);
          return acc;
        }, {});
      }
      if (len === 1 && Object.prototype.toString.call(args[0]) === "[object String]" && args[0].length) {
        //如果参数只有一个 并且类型是字符串 并且字符串长度不为0 获取对应项的值
        //如果不传参数 返回所有的存储项目
        return this.storage.getItem(args[0]);
      }

    }

    //参数可以是字符串 数组
    removeStorage (...args) {
      //降维args参数数组 扁平化处理
      args = args.flat(Infinity);
      //循环删除每一项
      args.forEach(item => {
        if (typeof item !== 'object') {
          if (this.history[item]) {
            delete this.history[item]
          }
          this.setStorage.removeItem(String(item));
        }
      })
    }

    //清空所有的storage 并且清空history
    clearStorage () {
      this.history = {};
      this.storage.clear();
    }

  }

  w.Storage = Storage;
})(window);

随机数

    /*
     *@func:  random
     *@description: 返回数组随机项或者随机区间数字
     *@param: {Array | Number} min Array随机数组源 Numer 区间最小值
     *@param: { Number} max Numer 区间最小大值
     *@return: {type} 返回随机数或者随机数组项目
     *@author: 
    */

    function random(min, max) {
      if (Array.isArray(min)) {
        return min[~~(Math.random() * min.length)]
      }
      return min + ~~(Math.random() * (max - min));
    }