前端技术经验总结

工具说明

前端开发过程中，经常会使用到工具类，比如对cookie的操作，url参数的获取，通用网络请求，为空判断等等；
这些都是一些小的功能点，平时也回封装一些简单的组件。以下整理了平时工作当中，经常会遇到的工具类合集

cookie 操作

为空判断

    /**
     * @param {String} param 根据传入值判断是否为空（无效）
     * @return {String} 判断值状态 空（无效）返回true
     */
    isEmpty: (text) => {
      if (typeof text === 'object') { // 判断是否为空对象
        for (const x in text) {
          return false;
        }

        return true;
      }
      if (text == null || text == undefined || text == 'undefined' || text == '' || text == 'null') {
        return true;
      }

      return false;
    }

给模板url链接追加参数

 /**
   *   result 目标url
   *   key 需要替换的参数名称
   *   value 替换后的参数的值
   *   return result 参数替换后的url
   */
  addParam:function(url,key,value) {
    var pattern=key+'=([^&]*)';
    var replaceText=key+'='+value;
    var result;
    if(url.match(pattern)){
      var tmp='/('+ key+'=)([^&]*)/gi';
      tmp=url.replace(eval(tmp),replaceText);
      result=tmp;
    }else{
      if(url.match('[\?]')){
        result =url+'&'+replaceText;
      }else{
        result= url+'?'+replaceText;
      }
    }
    return result;
  }

获取地址栏携带的参数

   /**
    * 获取地址栏携带的参数
    * @param name
    * @param url
    * @returns {*}
    */
   getUrlParam (name) {
     let reg = new RegExp('(^|&)' + name + '=([^&|^#]*)(#|&|$)', 'i');
     let r = window.location.href.match(reg);
     if (r != null) return decodeURIComponent(r[2]).replace("#",''); return null
   },

获取设备类型

   /**
     * 获得设备类型 1：安卓 ; 2：IOS
    */
  getDevicesType: function() {
    var devicesType = 0;
    var u = navigator.userAgent;
      // app = navigator.appVersion;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      devicesType = 1;
    } else if (isiOS) {
      devicesType = 2;
    }
    return devicesType;
  }

获取ios 系统信息

  /**
    * @return {Object} 获取系统信息
    */
   getVersion: () => {
     const str = navigator.userAgent.toLowerCase();
     const ver = str.match(/cpu iphone os (.*?) like mac os/);
 
     return ver && ver.length > 1 ? ver[1].replace(/_/g, '.') : '';
   }

判断是否是ipx

  /**
   * @return {Boolean} 获得设备是否iPhone X
   */
  isIpx: () => {
    // iPhone X
    const isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
    // iPhone XS Max
    const isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
    // iPhone XR
    const isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;

    return tools.devicesType() === 2 && (isIPhoneX || isIPhoneXSMax || isIPhoneXR);
  }

获取日期的时间戳

  /**
   * 根据指定日期，获取时间戳，解决IOS转换大坑
   */
  getDate: (dateStr) => {
    
    return new Date(item.dateStr.replace(/\-/g, "/")).getTime();
  }

判断指定字符串中的域名信息

    /**
     *  域名校验
     * @param str
     * @returns {string}
     */
    checkHost: function (str) {
      var result='';
      var reg = new RegExp('^((http://)|(https://))?([a-zA-Z0-9]([a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9])?\\.)+[a-zA-Z]{2,6}(/?)');
      var r = str.match(reg);
      if (r != null) {
        console.log(JSON.stringify(r))
        if(r[0].indexOf('xxx.com')!=-1 ){
          result=r[0]
        }else{
          result=""
        }
      }
      return result;
    },