工具函数Util.js

常用的工具函数。

Util.js 常用工具

Storage: 操作session或者local Cookie：操作cookie Tools：工具函数 Request：ajax封装

// 存储，兼容隐私模式，需要init
const Storage = {
  init: function () {
    let _this = this
    if (!this.methods.canIUse()) {
      alert('隐私/无痕模式会影响效果哦!请切换到正常模式')
      this.local = {
        set: function (name, value) {
          _this.methods.set('local', name, value)
        },
        get: function (name) {
          _this.methods.get('local', name)
        },
        remove: function (name) {
          _this.methods.remove('local', name)
        },
      }
      this.session = {
        set: function (name, value) {
          _this.methods.set('session', name, value)
        },
        get: function (name) {
          _this.methods.get('session', name)
        },
        remove: function (name) {
          _this.methods.remove('local', name)
        },
      }
    }
  },
  methods: {
    data: {
      local: {},
      session: {}
    },
    canIUse: function () {
      const testKey = 'test',
        _storage = window.localStorage
      try {
        _storage.setItem(testKey, 'test')
        _storage.removeItem(testKey)
        window.canIUseStorage = true
        return true
      } catch (err) {
        window.canIUseStorage = false
        return false
      }
    },
    set: function (type, name, value) {
      this.data[type][name] = escape(JSON.stringify(value))
    },
    get: function (type, name) {
      var _value = this.data[type][name];
      return _value && _value != '' ? JSON.parse(unescape(_value)) : null;
    },
    remove: function (type, name) {
      delete this.data[type][name]
    },
  },
  local: {
    set: function (name, value) {
      localStorage.setItem(name, escape(JSON.stringify(value)));
    },
    get: function (name) {
      var _value = localStorage.getItem(name);
      return _value && _value != '' ? JSON.parse(unescape(_value)) : null;
    },
    remove: function (name) {
      localStorage.removeItem(name);
    },
  },
  session: {
    set: function (name, value) {
      sessionStorage.setItem(name, escape(JSON.stringify(value)));
    },
    get: function (name) {
      var _value = sessionStorage.getItem(name);
      return _value && _value != '' ? JSON.parse(unescape(_value)) : null;
    },
    remove: function (name) {
      sessionStorage.removeItem(name);
    },
  }
}
// 操作cookie
const Cookie = {
  set: function (name, value, days) {
    var Days = days || 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(JSON.stringify(value)) + '; path=/' + "; expires=" + exp.toGMTString();
  },
  get: function (name) {
    var arr = document.cookie.split('; ');
    if (arr && arr.length > 0) {
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=');
        if (arr2 && arr2[0] && arr2[0] == name) {
          return JSON.parse(unescape(arr2[1]));
        }
      }
    }
    return null; //没找到就返回空
  },
  clear: function () {
    var _has = Cookie.get('CookieClear');
    if (_has && _has != '') {
      return;
    }
    var rs = document.cookie.match(new RegExp("([^ ;][^;]*)(?=(=[^;]*)(;|$))", "gi"));
    for (var i in rs) {
      document.cookie = rs[i] + "=;expires=Mon, 26 Jul 1997 05:00:00 GMT; path=/;";
    }
    Cookie.set('CookieClear', 'true', 90);
  }
}
// 方法
const Tools = {
  getURLParam: function (name) {
    // 获取链接中的参数
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return '';
  },
  jsonToParams: function (json, notNeed) {
    var parameStr = notNeed ? '' : '?';
    for (var i in json) {
      if (typeof json[i] == 'object') {
        parameStr += i + '=' + encodeURI(JSON.stringify(json[i])) + '&';
      } else {
        parameStr += i + '=' + encodeURI(json[i]) + '&';
      }
    }
    parameStr = parameStr.substring(0, parameStr.length - 1);
    return parameStr;
  },
  digitUppercase: function (n) {
    const fraction = ['角', '分'];
    const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    const unit = [
      ['元', '万', '亿'],
      ['', '拾', '佰', '仟'],
    ];
    let num = Math.abs(n);
    let s = '';
    fraction.forEach((item, index) => {
      s += (digit[Math.floor(num * 10 * 10 ** index) % 10] + item).replace(/零./, '');
    });
    s = s || '整';
    num = Math.floor(num);
    for (let i = 0; i < unit[0].length && num > 0; i += 1) {
      let p = '';
      for (let j = 0; j < unit[1].length && num > 0; j += 1) {
        p = digit[num % 10] + unit[1][j] + p;
        num = Math.floor(num / 10);
      }
      s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }

    return s
      .replace(/(零.)*零元/, '元')
      .replace(/(零.)+/g, '零')
      .replace(/^整$/, '零元整');
  },
  shuffle: function (arr) {
    // 数组乱序
    let len = arr.length;
    while (len) {
      let i = (Math.random() * len--) >> 0; // 交换位置
      let temp = arr[len];
      arr[len] = arr[i];
      arr[i] = temp;
    }
    return arr;
  },
  copy: function (text) {
    // 复制
    let element = document.createElement("textarea");
    element.value = text
    document.body.appendChild(element)
    element.select();
    document.execCommand("Copy");
    element.remove();
  },
  test: {
    // 常用正则
    link: function (val) { // 网址
      return /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(val)
    },
    chinese: function (val) { // 汉字
      return /^[\u4e00-\u9fa5]{0,}$/.test(val)
    },
    email: function (val) { // 邮箱
      return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val)
    },
    phone: function (city, val) { // 手机号码
      let _reg = null
      switch (city) {
        case 'CN':
          _reg = /^(\\+?0?86\\-?)?1[345789]\\d{9}$"/;
          break; // 中国
        case 'TW':
          _reg = /^(\\+?886\\-?|0)?9\\d{8}$"/;
          break; // 台湾
        case 'HK':
          _reg = /^(\\+?852\\-?)?[569]\\d{3}\\-?\\d{4}$"/;
          break; // 香港
        case 'MS':
          _reg = /^(\\+?6?01){1}(([145]{1}(\\-|\\s)?\\d{7,8})|([236789]{1}(\\s|\\-)?\\d{7}))$/;
          break; // 马来西亚
        case 'PH':
          _reg = /^(\\+?0?63\\-?)?\\d{10}$/;
          break; // 菲律宾
        case 'TH':
          _reg = /^(\\+?0?66\\-?)?\\d{10}$/;
          break; // 泰国
        case 'SG':
          _reg = /^(\\+?0?65\\-?)?\\d{10}$/;
          break; // 新加坡
        case 'DZ':
          _reg = /^(\\+?213|0)(5|6|7)\\d{8}$/;
          break; // 阿尔及利亚
        case 'SY':
          _reg = /^(!?(\\+?963)|0)?9\\d{8}$/;
          break; // 叙利亚
        case 'SA':
          _reg = /^(!?(\\+?966)|0)?5\\d{8}$/;
          break; // 沙特阿拉伯
        case 'US':
          _reg = /^(\\+?1)?[2-9]\\d{2}[2-9](?!11)\\d{6}$/;
          break; // 美国
        case 'CZ':
          _reg = /^(\\+?420)? ?[1-9][0-9]{2} ?[0-9]{3} ?[0-9]{3}$/;
          break; // 捷克共和国
        case 'DE':
          _reg = /^(\\+?49[ \\.\\-])?([\\(]{1}[0-9]{1,6}[\\)])?([0-9 \\.\\-\\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/;
          break; // 德国
        case 'DK':
          _reg = /^(\\+?45)?(\\d{8})$/;
          break; // 丹麦
        case 'GR':
          _reg = /^(\\+?30)?(69\\d{8})$/;
          break; // 希腊
        case 'AU':
          _reg = /^(\\+?61|0)4\\d{8}$/;
          break; // 澳大利亚
        case 'GB':
          _reg = /^(\\+?44|0)7\\d{9}$/;
          break; // 英国
        case 'CA':
          _reg = /^(\\+?1)?[2-9]\\d{2}[2-9](?!11)\\d{6}$/;
          break; // 加拿大
        case 'IN':
          _reg = /^(\\+?91|0)?[789]\\d{9}$/;
          break; // 印度
        case 'NZ':
          _reg = /^(\\+?64|0)2\\d{7,9}$/;
          break; // 新西兰
        case 'ZA':
          _reg = /^(\\+?27|0)\\d{9}$/;
          break; // 南非
        case 'ZM':
          _reg = /^(\\+?26)?09[567]\\d{7}$/;
          break; // 赞比亚
        case 'ES':
          _reg = /^(\\+?34)?(6\\d{1}|7[1234])\\d{7}$/;
          break; // 西班牙
        case 'FI':
          _reg = /^(\\+?358|0)\\s?(4(0|1|2|4|5)?|50)\\s?(\\d\\s?){4,8}\\d$/;
          break; // 芬兰
        case 'FR':
          _reg = /^(\\+?33|0)[67]\\d{8}$/;
          break; // 法国
        case 'IL':
          _reg = /^(\\+972|0)([23489]|5[0248]|77)[1-9]\\d{6}/;
          break; // 以色列
        case 'HU':
          _reg = /^(\\+?36)(20|30|70)\\d{7}$/;
          break; // 匈牙利
        case 'IT':
          _reg = /^(\\+?39)?\\s?3\\d{2} ?\\d{6,7}$/;
          break; // 意大利
        case 'JP':
          _reg = /^(\\+?81|0)\\d{1,4}[ \\-]?\\d{1,4}[ \\-]?\\d{4}$/;
          break; // 日本
        case 'NO':
          _reg = /^(\\+?47)?[49]\\d{7}$/;
          break; // 挪威
        case 'BE':
          _reg = /^(\\+?32|0)4?\\d{8}$/;
          break; // 比利时
        case 'PL':
          _reg = /^(\\+?48)? ?[5-8]\\d ?\\d{3} ?\\d{2} ?\\d{2}$/;
          break; // 波兰
        case 'BR':
          _reg = /^(\\+?55|0)\\-?[1-9]{2}\\-?[2-9]{1}\\d{3,4}\\-?\\d{4}$/;
          break; // 巴西
        case 'PT':
          _reg = /^(\\+?351)?9[1236]\\d{7}$/;
          break; // 葡萄牙
        case 'RU':
          _reg = /^(\\+?7|8)?9\\d{9}$/;
          break; // 俄罗斯
        case 'RS':
          _reg = /^(\\+3816|06)[- \\d]{5,9}$/;
          break; // 塞尔维亚
        case 'R':
          _reg = /^(\\+?90|0)?5\\d{9}$/;
          break; // 土耳其
        case 'VN':
          _reg = /^(\\+?84|0)?((1(2([0-9])|6([2-9])|88|99))|(9((?!5)[0-9])))([0-9]{7})$/;
          break; // 越南
        case 'BS':
          _reg = /^(00){0,1}(1242){1}\d{6,12}$/;
          break; // 爱尔兰
        case 'UY':
          _reg = /^(00){0,1}(598){1}\d{6,15}$/;
          break; // 印度尼西亚
        case 'KR':
          _reg = /^(00){0,1}(82){1}0{0,1}[7,1](?:\d{8}|\d{9})$/;
          break; // 韩国
        case 'GT':
          _reg = /^(00){0,1}(502){1}\d{6,15}$/;
          break; // 荷兰
      }
      return _reg.test(val)
    },
    IP: function (val) { // IP
      return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(val)
    },
    ID: function () { // 身份证号
      return /^\d{15}|\d{18}$/.test(val)
    }
  },
}
// 封装请求
let Request = function (option) {
  const defaultOpt = {
    timeout: 0, // 默认永不超时
    type: 'GET', // 默认类型，get
    dataType: "json", // 数据类型
  }
  const options = Object.assign(defaultOpt, option)
  options.type = options.type.toUpperCase()
  options.data = Tools.jsonToParams(options.data)
  const codeToMessage = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队（异步任务）。',
    204: '删除数据成功。',
    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限（令牌、用户名、密码错误）。',
    403: '用户得到授权，但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除，且不会再得到的。',
    422: '当创建一个对象时，发生一个验证错误。',
    500: '服务器发生错误，请检查服务器。',
    502: '网关错误。',
    503: '服务不可用，服务器暂时过载或维护。',
    504: '网关超时。',
  };
  let xhr; // 兼容
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveObject) { //兼容IE6以下版本
    xhr = new ActiveXobject('Microsoft.XMLHTTP');
  }
  return new Promise((resolve, reject) => {
    if (options.type == "GET") {
      xhr.open("GET", options.url + "?" + options.data, true);
      xhr.send(null);
    } else if (options.type == "POST") {
      xhr.open("post", options.url, true);
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhr.send(params);
    }
    // 超时且请求未完成截止请求
    options.timeout && setTimeout(function () {
      if (xhr.readyState !== 4) {
        xhr.abort();
      }
    }, options.timeout)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        var status = xhr.status;
        if (status >= 200 && status < 300 || status === 304) {
          var data = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText;
          resolve(data)
        } else {
          // TODO, 错误解析需要优化
          const errortext = codeToMessage[xhr.status] || xhr.statusText;
          reject(errortext)
        }
      }
    }
  })
}

(function () {
  Storage.init()
})()

export {
  Storage,
  Cookie,
  Tools,
  Request
}