美文网首页
一个vue的小工具库

一个vue的小工具库

作者: 白羊座的黄同学 | 来源:发表于2018-11-21 15:56 被阅读0次

    最近使用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组件库,当然只需要其他部分直接截取就好啦

    相关文章

      网友评论

          本文标题:一个vue的小工具库

          本文链接:https://www.haomeiwen.com/subject/aoecqqtx.html