JavaScript封装工具函数

// 求一组数中的最大值

function maxNumber(m) {

  var m = arguments[0];

  for (var i = 1; i < arguments.length; i++){

    if (arguments[i] > m) {

      m = arguments[i];

    } 

  }

  return m;

}

// 求一组数中的最小值

function minNumber(m) {

  var m = arguments[0];

  for (var i = 1; i < arguments.length; i++){

    if (arguments[i] < m) {

      m = arguments[i];

   }

  }

  return m;

}

// 求某一组数1-n的阶乘之和arr=[]

function sumFactorial() {

  var sum = 0;

  for (var i = 0; i < arguments.length; i++){

    var res = 1;

    for (var j = 1; j <= i; j++){

      res = res * i;

    }

    sum += res;

  }

  return sum;

}

/*

作用：任意两个数之间的随机数

参数：n1,n2

返回值：随机数

*/

function randomNum(n1,n2) {

  var max = n1 > n2 ? n1 : n2;

  var min = n1 > n2 ? n2 : n1;

  var res = parseInt(Math.random() * (max - min + 1) + min);

  return res;

}

/*

作用：求任意两个时间对象的时间差

参数：两个时间对象 date1  date2

返回值：把求得的时间差天数、小时、分钟、秒数以对象的形式当成返回值返回  

*/

function timeDifference(date1, date2) {

  var time1 = date1.getTime();

  var time2 = date2.getTime();

  var timer = Math.abs(time1 - time2);

  var d = parseInt(timer / 1000 /60/ 60/24); //求天数

  var h = parseInt((timer / 1000 /60 /60) % 24);//求不足1天的小时数

  var m = parseInt((timer / 1000/60) % 60);//求不足1小时的分钟数

  var s = parseInt((timer /1000) % 60);//求不足1分钟的秒数

  return {

    day: d<10?'0'+d:d,

    hours: h<10?'0'+h:h,

    minutes: m<10?'0'+m:m,

    seconds: s<10?'0'+s:s

  }

}

/*

    作用：对默认时间对象进行格式化

    参数：

        一个时间对象

        时间格式的 类型

    返回值：

        格式化的时间对象

*/

function formatTime(date, type) {

  var y = date.getFullYear();

  var m = date.getMonth() + 1;

  m = m < 10 ? '0' + m : m

  var d = date.getDate();

  d = d < 10 ? '0' + d : d

  var h = date.getHours();

  h = h < 10 ? '0' + h : h

  var f = date.getMinutes();

  f = f < 10 ? '0' + f : f

  var s = date.getSeconds();

  s = s < 10 ? '0' + s : s

  var day = date.getDay();

  var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

  if (type == 'cn') {

      return `${y}年${m}月${d}日 ${h}:${f}:${s} ${week[day]}`

  }

  return `${y}${type}${m}${type}${d} ${h}:${f}:${s} ${week[day]}`

}

/*

作用：获取元素的css属性

参数：ele：dom元素：

     attr：要获取样式的属性

          css属性是可变

返回值：value 把获取到的属性返回

*/

function getStyle(ele, attr) {

  if (window.getComputedStyle) {

    var value = window.getComputedStyle(ele)[attr];

  } else {

    var value = ele.currentStyle[attr];

  }

  return value;

}

/*

作用：给元素添加css样式

参数：

ele:需要添加样式的元素

obj: 给元素添加样式的属性和属性值的对象

     let obj={attr:value,attr:value}

     attr:添加样式的属性

     value:添加样式的属性值

*/

function setStyle(ele, obj) {

  for (let key in obj) {

      ele.style[key] = obj[key];

  }

}

/*

作用：实现事件监听的兼容写法

参数：

    ele 事件源：每次绑定事件的事件源都不一样

    type 事件类型

    callback 事件处理函数：每次触发事件之后执行代码都不一样，所以事件处理函数中代码不嫩写死

    返回值：触发事件之后 实现某一个功能而已，不需要返回值

*/

function addEvent(ele,type,callback) {

  if (window.addEventListener) {

    ele.addEventListener(type,callback)

  } else {

    ele.attachEvent('on'+type, callback)

  }

}

 /*

  作用：把url地址中参数装换为对象并且返回

  参数：一个url地址，每次提取的参数可能不一样

  返回值：把参数装换为对象之后，再返回

      */

  function strToObj(url) {

    let arr = url.substr(url.indexOf('?') + 1).split('&');

    let obj = {};

    arr.forEach(function (item) {

      obj[item.split('=')[0]] = item.split('=')[1]

    })

    return obj;

}

/*

作用：把对象转换为字符串

参数：需要转换的对象

返回值：转换好的字符串

      属性和属性值之间用=号连接

      需要得到对象中每一个属性和属性值 遍历对象

        */

 function objToStr(obj) {

   let arr = [];

   for (let key in obj) {

    arr.push(key + '=' + obj[key]);  

  }

   let res = arr.join('&')

    return res

}

/*

作用：任何一个元素同时实现多个属性的动画

参数：

    ele:参与动画的元素

    option:对象   attr:参与动画的属性  target:参与动画属性的最终值（目标是）

                 可以把参与动画的属性 和 目标值 以对象的形式进行传递

                    如 {width:400,height:400}

    callback：回调函数,

        */

function animation(ele, option, callback) {

    let moveIndex = 0;

    for (let key in option) {

        moveIndex++;

        let move = function () {

            let style = parseInt(getStyle(ele, key));

            let speed = (option[key] - style) / 10;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            style += speed;

            ele.style[key] = style + 'px';

            if (style == option[key]) {

              moveIndex--;

              if (moveIndex == 0) callback && callback();

              cancelAnimationFrame(ele[key + 'timer']);

              return

              }

             ele[key + 'timer'] = requestAnimationFrame(move)

         }

       cancelAnimationFrame(ele[key + 'timer']);

      ele[key + 'timer'] = requestAnimationFrame(move);

  }

}

/* 设置cookie  setCookie()

      作用：往cookie存储空间中添加cookie值

      参数：

         key 必填

         value 必填

         expires 选填， 过期时间

      返回值：不需要返回值 实现cookie的存储而已 */

function setCookie(key, value, expires) {

  if (!expires) {

    document.cookie = `${key}=${value};`;

    return

  }

   let date = new Date();

   // 以分钟为单位的过期时间

   let time = date.getTime() - 8 * 60 * 60 * 1000 + expires * 60 * 1000;

   // 设置当前日期的对象值

   date.setTime(time);

   document.cookie = `${key}=${value};expires=${date}`;

}

/* deleteCookie()  删除cookie

          作用：把指定的cookie从cookie的存储空间中删除  deleteCookie()

          参数：

               key 把需要删除的那条cookie */

function deleteCookie(key) {

  let date = new Date();

  let time = date.getTime() - 8 * 60 * 60 * 1000 - 1;

  date.setTime(time);

  document.cookie = `${key}='';expires=${date}`;

}

/* getCookie()    获取cookie

     作用：获取指定key 的那个cookie值

      参数：

         key(选填) 可传递 可不传递

      返回值：

           如果有参数：那么就把这个参数对应key的值返回

           如果没有传递值：把所有的cookie 处理成对象之后 返回这个对象 */

function getCookie(key) {

  let cookie = document.cookie;

  let res = cookie.split('; ');

  let obj = {};

  res.forEach(item => {

      let s = item.split('=');

      obj[s[0]] = s[1];

  })

  if (key) {

      return obj[key]

  }

  return obj;

}

 /*

 ajax

作用：方便请求数据

参数：把以下的参数以 对象 的形式统一传递

    url：请求的地址  *必填* 必须是字符串类型

    type:请求方式  'get|post' 选填，默认值 为 'get'   必须是字符串  值只能为 'get' 或者 'post'

    async：请求是否异步  选填，默认异步 true 必须是布尔数据类型

    data：请求需要携带的参数  选填  默认为''数据类型必须是字符串

    success：请求成功的回调函数  获取异步代码执行的结果 *必填* 数据类型必须是函数

返回值：没有返回值

            */

function ajax(option) {

  let defauldOption = {

      type: 'get',

      async: true,

      data: ''

  }

  let params = Object.assign(defauldOption, option);

  if (!params.url) {

      throw Error('url参数是必填')

  }

  if (Object.prototype.toString.call(params.url) != '[object String]') {

      throw Error('url参数的值 必须是string类型')

  }

  if (!params.success) {

      throw Error('success 回调函数是必填参数');

  }

  if (Object.prototype.toString.call(params.success) != '[object Function]') {

      throw Error('success的值必须是一个函数')

  }

  if (Object.prototype.toString.call(params.type) != '[object String]') {

      throw Error('type 属性的属性值必须是字符串')

  }

  if (!/(get|post)/gi.test(params.type)) {

      throw Error('type 属性只能为 get 或者 post')

  }

  if (Object.prototype.toString.call(params.async) != '[object Boolean]') {

      throw Error('async 属性的值必须为布尔值')

  }

  let dataType = Object.prototype.toString.call(params.data)

  if (dataType != '[object String]' && dataType != '[object Object]') {

      throw Error('data 属性的值必须是string或者Object类型')

  }

  if (dataType == '[object Object]') {

      let arr = []

      for (let key in params.data) {

          arr.push(key + '=' + params.data[key])

      }

      params.data = arr.join('&');

  }

  // ajax请求的步骤

  let xhr = new XMLHttpRequest();

  if (params.type == 'get') {

      if (params.data.indexOf('{') != -1) {

          let data = JSON.parse(params.data);

          let arr = []

          for (let key in data) {

              arr.push(key + '=' + data[key])

          }

          params.data = arr.join('&');

      }

      let url = params.data ? params.url + '?' + params.data : params.url;

      xhr.open(params.type, url, params.async);

      xhr.send()

  } else {

      xhr.open(params.type, params.url, params.async);

      let type = params.data.indexOf('=') != -1 ? 'application/x-www-form-urlencoded' : 'application/json';

      xhr.setRequestHeader('Content-Type', type)

      xhr.send(params.data)

  }

  if (params.async == false) {

      params.success(JSON.parse(xhr.responseText))

      return

  }

  xhr.onload = function () {

      params.success(JSON.parse(xhr.responseText))

  }

}

/*

作用：移除元素的类名

参数：name 类名

返回值：没有返回值

*/

NodeList.prototype.removeClass = function (name) {

  this.forEach(item => {

    item.classList.remove(name)

  })

}

/*

作用：给数组的原型对象中添加一个方法，用于对数组去重

参数：无

返回值：一个去重好的数组

*/

Array.prototype.norepeat = function () {

  let s = new Set(this);

  return [...s]

  // 设置为不可遍历

  Object.defineProperty(Array.prototype, 'norepeat', {

    enumerable: false

  })

}

/*

作用：给数组中的对象去重 arrNoRepeat(res,id)

参数：res 数组；id 数组中对象的唯一不同值

返回值：

*/

// 第一种方法

function arrNoRepeat(res,id) {

  let m = new Map();

  for (let key of res) {

    m.set(key[id],key)

  }

  let arr = m.values();

  res = [...arr];

}

// 第二种方法

// function arrNoRepeat(res,id) {

//   let newArr = [];

//   for (let i = 0; i < res.length; i++){

//     if (newArr.indexOf(res[i][id]) == -1) {

//       newArr.push(res[i][id])

//     } else {

//       res.splice(i, 1);

//       i--;

//     }

//   }

// }