一个vue的小工具库

最近使用vue进行开发,于是动手封装了一个vue的小型工具库,期待能够继续完善

/**
 * 工具模块,不依赖第三方代码
 */
var ak = {};

ak.Base_URL = 'http://10.0.2.210/';

/**
 * 工具模块,不依赖第三方代码
 * 包含:类型判断
 */
ak.Utils = {
  /**
   * 是否为JSON字符串
   * @param {String}
   * @return {Boolean}
   */
  isJSON(str) {
    if (typeof str == 'string') {
      try {
        if (str.indexOf('{') > -1) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
    return false;
  },
  /**
   * 去除字符串首尾两端空格
   * @param {String} str
   * @return {String}
   */
  trim(str) {
    if (str) {
      return str.replace(/(^\s*)|(\s*$)/g, '');
    } else {
      return '';
    }
  },
  /**
   * 脱敏
   * @param {String} value 脱敏的对象
   * @return {String}
   */
  desensitization: function(value) {
    if (value) {
      var valueNew = '';
      const length = value.length;
      // 脱敏:从倒数第五位开始向前四位脱敏
      valueNew = value.split('').map((number, index) => {
        const indexMin = length - 8;
        const indexMax = length - 5;
        if (index >= indexMin && index <= indexMax) {
          return '*';
        } else {
          return number;
        }
      }).join('');
      return valueNew;
    } else {
      return '';
    }
  },

  /**
   * 判断是否Array对象
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isArray: function(value) {
    return toString.call(value) === '[object Array]';
  },

  /**
   * 判断是否日期对象
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isDate: function(value) {
    return toString.call(value) === '[object Date]';
  },

  /**
   * 判断是否Object对象
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isObject: function(value) {
    return toString.call(value) === '[object Object]';
  },

  /**
   * 判断是否为空
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isEmpty: function(value) {
    return value === null || value === undefined || value === '' || (this.isArray(value) && value.length === 0);
  },

  /**
   * 判断是否移动电话
   * @param {Number} value 判断的值
   * @return {Boolean}
   */
  isMobilePhone: function(value) {
    value = Number.parseInt(value);
    // 1)是否非数字
    if (Number.isNaN(value)) {
      return false;
    }

    // 2)时候移动电话
    return /^1[3|4|5|7|8|9|6][0-9]\d{4,8}$/.test(value);
  },

  /**
   * 判断是否为邮箱
   * @param {String} value 判断的值
   * @return {Boolean}
   */
  isEmail: function(value) {
    return /^[a-zA-Z\-_0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+$/.test(value);
  },

  /**
   * 转换服务器请求的对象为Js的对象:包含首字母转换为小写;属性格式转换为Js支持的格式
   * @param {Object} en 服务器的获取的数据对象
   */
  transWebServerObj: function(en) {
    if (toString.call(en) == '[object Array]') {
      for (var i = 0, len = en.length; i < len; i++) {
        ak.Utils.transWebServerObj(en[i]);
      }
    } else {
      for (var propertyName in en) {
        /*
         // 1.创建一个小写的首字母属性并赋值:ABC => aBC
         var newPropertyName = propertyName.charAt(0).toLowerCase() + propertyName.substr(1);
         en[newPropertyName] = en[propertyName];
         */
        var tmpName = propertyName;
        // 2.判断此属性是否为数组,若是就执行递归
        if (toString.call(en[tmpName]) == '[object Array]') {
          for (var k = 0, leng = en[tmpName].length; k < leng; k++) {
            ak.Utils.transWebServerObj(en[tmpName][k]); // 数组里的每个对象再依次进行转换
          }
        } else if (toString.call(en[tmpName]) == '[object Object]') {
          ak.Utils.transWebServerObj(en[tmpName]); // 若属性的值是一个对象,也要进行转换
        } else {
          // 3.若不是其他类型,把此属性的值转换为Js的数据格式
          // 3.1)日期格式:后台为2015-12-08T09:23:23.917 => 2015-12-08 09:23:23
          if (new RegExp(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/).test(en[propertyName])) {
            //  en[propertyName] = new RegExp(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/).exec(en[propertyName])[0].replace('T', ' ');

            //  若为0001年,表示时间为空,就返回''空字符串
            if (en[propertyName].indexOf('0001') >= 0) {
              en[propertyName] = '';
            }
          } else if (toString.call(en[propertyName]) == '[object Number]' && new RegExp(/\d+[.]\d{3}/).test(en[propertyName])) {
            // 3.2)溢出的float格式:1.33333 = > 1.33
            en[propertyName] = en[propertyName].toFixed(2);
          } else if (en[propertyName] == null) {
            // 3.3)null值返回空
            en[propertyName] = '';
          } else if (
            ['imgPath', 'loopImgPath', 'clubIcon', 'headImgPath'].indexOf(propertyName) >= 0 &&
            en[propertyName] &&
            en[propertyName].length > 0
          ) {
            en[propertyName] = ak.Base_URL + en[propertyName].replace('..', '');
          }
        }
      }
    }
    return en;
  },

  /**
   *设置SessionStorage的值
   * @param key:要存的键
   * @param value :要存的值
   */
  setSessionStorage: function(key, value) {
    if (this.isObject(value) || this.isArray(value)) {
      value = this.toJsonStr(value);
    }
    sessionStorage[key] = value;
  },

  /**
   *获取SessionStorage的值
   * @param key:存的键
   */
  getSessionStorage: function(key) {
    var rs = sessionStorage[key];
    try {
      if (rs != undefined) {
        var obj = this.toJson(rs);
        rs = obj;
      }
    } catch (error) {}
    return rs;
  },

  /**
   * 清除SessionStorage的值
   * @param key:存的键
   */
  removeSessionStorage: function(key) {
    return sessionStorage.removeItem(key);
  },

  /**
   *设置LocalStorage的值
   * @param key:要存的键
   * @param value :要存的值
   */
  setLocalStorage: function(key, value) {
    if (this.isObject(value) || this.isArray(value)) {
      value = this.toJsonStr(value);
    }
    localStorage[key] = value;
  },

  /**
   *获取LocalStorage的值
   * @param key:存的键
   */
  getLocalStorage: function(key) {
    var rs = localStorage[key];
    try {
      if (rs != undefined) {
        var obj = this.toJson(rs);
        rs = obj;
      }
    } catch (error) {}
    return rs;
  },

  /**
   * 清除LocalStorage的值
   * @param key:存的键
   */
  removeLocalStorage: function(key) {
    return localStorage.removeItem(key);
  },

  /**
   * 对传入的时间值进行格式化。后台传入前台的时间有两种个是:Sql时间和.Net时间
   * @param {String|Date} sValue 传入的时间字符串
   * @param {dateFormat | bool} dateFormat  日期格式,日期格式:eg:'Y-m-d H:i:s'
   * @return {String} 2014-03-01 这种格式
   * @example
   * 1) Sql时间格式:2015-02-24T00:00:00
   * 2) .Net时间格式:/Date(1410744626000)/
   */
  getDateTimeStr: function(sValue, dateFormat) {
    if (dateFormat == undefined) {
      dateFormat = 'Y-m-d'; // 默认显示年月日
    }

    var dt;
    // 1.先解析传入的时间对象,
    if (sValue) {
      if (toString.call(sValue) !== '[object Date]') {
        // 不为Date格式,就转换为DateTime类型
        sValue = sValue + '';
        var timestr;
        if (sValue.indexOf('T') > 0) {
          // 1)格式:2015-02-24T00:00:00
          timestr = sValue.replace('T', ' ').replace(/-/g, '/'); // => 2015/02/24 00:00:00
          dt = new Date(timestr);
        } else if (sValue.indexOf('Date') >= 0) {
          // 2).Net格式:/Date(1410744626000)/
          // Convert date type that .NET can bind to DateTime
          // var date = new Date(parseInt(sValue.substr(6)));
          timestr = sValue.toString().replace(/\/Date\((\d+)\)\//gi, '$1');
          dt = new Date(Math.abs(timestr));
        } else {
          dt = new Date(sValue);
        }
      } else {
        dt = sValue;
      }
    }

    // 2.转换
    // 1)转换成对象 'Y-m-d H:i:s'
    var obj = {}; // 返回的对象,包含了 year(年)、month(月)、day(日)
    obj.Y = dt.getFullYear(); // 年
    obj.m = dt.getMonth() + 1; // 月
    obj.d = dt.getDate(); // 日期
    obj.H = dt.getHours();
    obj.i = dt.getMinutes();
    obj.s = dt.getSeconds();
    // 2.2单位的月、日都转换成双位
    if (obj.m < 10) {
      obj.m = '0' + obj.m;
    }
    if (obj.d < 10) {
      obj.d = '0' + obj.d;
    }
    if (obj.H < 10) {
      obj.H = '0' + obj.H;
    }
    if (obj.i < 10) {
      obj.i = '0' + obj.i;
    }
    if (obj.s < 10) {
      obj.s = '0' + obj.s;
    }
    // 3.解析
    var rs = dateFormat
      .replace('Y', obj.Y)
      .replace('m', obj.m)
      .replace('d', obj.d)
      .replace('H', obj.H)
      .replace('i', obj.i)
      .replace('s', obj.s);

    return rs;
  },

  /**
   * 把总秒数转换为时分秒
   */
  getSFM: function(seconds, dateFormat) {
    if (dateFormat == undefined) {
      dateFormat = 'H:i:s'; // 默认格式
    }
    var obj = {};
    obj.H = Number.parseInt(seconds / 3600);
    obj.i = Number.parseInt((seconds - obj.H * 3600) / 60);
    obj.s = Number.parseInt(seconds - obj.H * 3600 - obj.i * 60);
    if (obj.H < 10) {
      obj.H = '0' + obj.H;
    }
    if (obj.i < 10) {
      obj.i = '0' + obj.i;
    }
    if (obj.s < 10) {
      obj.s = '0' + obj.s;
    }

    // 3.解析
    var rs = dateFormat
      .replace('H', obj.H)
      .replace('i', obj.i)
      .replace('s', obj.s);
    return rs;
  },

  /**
   * 获取倒计时字符串
   * @param {Date} sValue 具体时间
   */
  getCountdownStr: function(sValue) {
    var dt = new Date();
    var rs = '';
    // 1.同一天
    if (this.isSomeDay(sValue, dt)) {
      var minutes = (dt.getTime() - sValue.getTime()) / 1000 / 60;
      if (minutes == 0) {
        rs = '刚刚';
      } else if (minutes < 60) {
        rs = Number.parseInt(minutes) + '分钟前';
      } else {
        rs = Number.parseInt(minutes / 60) + '小时前';
      }
    } else if (dt.getFullYear() == sValue.getFullYear() && dt.getMonth() == sValue.getMonth() && dt.getDate() - 1 == sValue.getDate()) {
      // 2.昨天
      rs = '昨天' + this.getDateTimeStr(sValue, 'H:i');
    } else {
      // 3.其他
      rs = this.getDateTimeStr(sValue, 'Y-m-d H:i');
    }
    return rs;
  },

  /**
   * 是否同一天
   */
  isSomeDay: function(dt1, dt2) {
    if (dt1.getFullYear() == dt2.getFullYear() && dt1.getMonth() == dt2.getMonth() && dt1.getDate() == dt2.getDate()) {
      return true;
    }
    return false;
  },

  /**
   * 对象转换为json字符串
   * @param  {jsonObj} jsonObj Json对象
   * @return {jsonStr} Json字符串
   */
  toJsonStr: function(jsonObj) {
    return JSON.stringify(jsonObj);
  },

  /**
   * 讲json字符串转换为json对象
   * @param {String} jsonStr Json对象字符串
   * @return {jsonObj} Json对象
   */
  toJson: function(jsonStr) {
    return JSON.parse(jsonStr);
  },

  /**
   * @private
   */
  getCookieVal: function(offset) {
    var endstr = document.cookie.indexOf(';', offset);
    if (endstr == -1) {
      endstr = document.cookie.length;
    }
    return unescape(document.cookie.substring(offset, endstr));
  },

  /**
   * 获取指定key的cookie
   * @param {String} key cookie的key
   */
  getCookie: function(key) {
    var arg = key + '=';
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    var j = 0;

    while (i < clen) {
      j = i + alen;
      if (document.cookie.substring(i, j) == arg) {
        return this.getCookieVal(j);
      }
      i = document.cookie.indexOf(' ', i) + 1;
      if (i === 0) {
        break;
      }
    }
    return null;
  },

  /**
   * 设置cookie
   * @param {String} key cookie的key
   * @param {String} value cookie的value
   */
  setCookie: function(key, value) {
    var argv = arguments;
    var argc = arguments.length;
    var expires = argc > 2 ? argv[2] : null;
    var path = argc > 3 ? argv[3] : '/';
    var domain = argc > 4 ? argv[4] : null;
    var secure = argc > 5 ? argv[5] : false;

    document.cookie =
      key +
      '=' +
      escape(value) +
      (expires === null ? '' : '; expires=' + expires.toGMTString()) +
      (path === null ? '' : '; path=' + path) +
      (domain === null ? '' : '; domain=' + domain) +
      (secure === true ? '; secure' : '');
  },

  /**
   * 是否含有特殊字符
   * @param  {String} value 传入的值
   * @return {Boolean} true 含有特殊符号;false 不含有特殊符号
   */
  isHaveSpecialChar: function(value) {
    var oldLength = value.length;
    var newLength = value.replace(/[`~!@#$%^&*_+=\\{}:"<>?\[\];',.\/~!@#¥%……&*——+『』:“”《》?【】;‘’,。? \[\]()()]/g, '').length;
    if (newLength < oldLength) {
      return true;
    }
    return false;
  },
  /*
  * 是否含有中文
  * @param  {String} temp 传入的值
  * @return {Boolean} true 含有中文符号;false 不含有中文符号
  * */
  isChinese: function(temp) {
    if (escape(temp).indexOf( "%u" ) < 0) {
      return false;
    } else {
      return true;
    }
  },

  /**
   * 合并数组内成员的某个对象
   * @param {Array} arr 需要合并的数组
   * @param {String} fieldName 数组成员内的指定字段
   * @param {String} split 分隔符,默认为','
   * @example
   * var arr = [{name:'tom',age:13},{name:'jack',age:13}] => (arr, 'name') => tom,jack
   */
  joinArray: function(arr, fieldName, split) {
    split = split == undefined ? ',' : split;
    var rs = arr.map((item) => {
      return item[fieldName];
    }).join(split);
    return rs;
  },
  /**
   * 去重数组内成员的某个对象
   * @param {Array} arr 需要合并的数组
   * @param {String} fieldName 数组成员内的指定字段
   * @param {String} split 分隔符,默认为','
   * @example
   * var arr = [{name:'tom',age:13},{name:'jack',age:13}] => (arr, 'name') => tom,jack
   */
  uniqueArray: function(arr, key) {
    var result = [arr[0]];
    for (var i = 1; i < arr.length; i++) {
      var item = arr[i];
      var repeat = false;
      for (var j = 0; j < result.length; j++) {
        if (item[key] == result[j][key]) {
          repeat = true;
          break;
        }
      }
      if (!repeat) {
        result.push(item);
      }
    }
    return result;
  }
};

/**
 * 消息模块
 * 包含:确认框、信息提示框
 */
ak.Msg = {
  /**
   * 提示框
   * msg {string} :信息内容
   */
  alert: function(msg) {
    window.utryVue.$messagebox('提示', msg);
  },

  /**
   * 确认框
   * msg {string} :信息内容
   * callback {function} :点击'确定'时的回调函数。
   */
  confirm: function(msg, callback) {
    window.utryVue
      .$messagebox({
        title: '提示',
        message: msg,
        showCancelButton: true
      })
      .then((action) => {
        if (action == 'confirm') {
          callback && callback();
        }
      });
  },

  /**
   * 显示正在加载
   * @param {String} title 显示的title
   */
  showLoading: function(title) {
    window.utryVue.$loading.close();
    title = title == undefined ? '加载中...' : title;
    window.utryVue.$loading({
      lock: true,
      text: title,
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  },

  /**
   * 关闭正在加载
   */
  hideLoading: function() {
    window.utryVue.$loading.close();
  },

  /**
   * 自动消失的提示框
   * @param {String} msg 信息内容
   */
  toast: function(msg) {
    window.utryVue.$message({
      message: msg,
      type: 'error'
    });
  }
};

/**
 * 业务相关逻辑
 */
ak.BLL = {};

export default ak;

使用ES6导入就好了,不过部分依赖element组件库,当然只需要其他部分直接截取就好啦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • 前言: 这段时间项目做了一个账单查询的页面使用到了饼状图,支付宝账单那个饼状图,就简单的封装了一个给大家看看,使用...
    退役程序猿阅读 2,557评论 12 13
  • 团结束了,5天时间。做到最好的自己,承现的结果也没有什么接受不了。带团很磨人,也很锻炼人。原来不懂得,现在已知晓,...
    飞扬的心灵阅读 194评论 0 0