專案中常用到的一些方法整理

kristy1993發表於2018-10-26

1、判斷當前瀏覽器型別

function isBrower(){
   var ua = navigator.userAgent.toLowerCase();
   var isMiscro = ua.indexOf("micromessenger")>-1;//微信瀏覽器
    var isChrome = ua.indexOf(`chrome`)>-1 && ua.indexOf(`safari`)>-1; //谷歌瀏覽器
    var isSafari = ua.indexOf(`safari`)>-1 && ua.indexOf(`chrome`)==-1; //safari瀏覽器
    var isFirefox = ua.indexOf(`firefox`)> -1; //火狐瀏覽器
    var isOpera = ua.indexOf(`opera`)> -1; //Opera瀏覽器
    var isIE = ua.indexOf("compatible") > -1 && ua.indexOf("msie") > -1 && !ua.indexOf("opera") > -1; //IE瀏覽器
}

2、判斷字串中是否包含中文

function isHasChinese(str){
     var reg = new RegExp("[\u4e00-\u9FFF]","g");
     return reg.test(str);
}

3、判定物件是否為空

function isNull(data){
     return ( (data == "" || data == "undefined" || data ==         undefined) ? true :false);
}

4、將陣列中的id組成字串，用@連線

strIds =  item.data.map(function(ditem){
    return  ditem.tableId
}).join("@");

5、使用el-tooltip元件

<span class="text2" @mouseenter="showTooltip($event)"
@mouseleave="hiddenTooltip($event)">{{item.frequency1}}</span>

<el-tooltip ref="textTooltip" effect="light" :content="textTooltipContent" placement="top-start"></el-tooltip>
showTooltip: function (event) {
  var ev = event || window.event;
  var eventName = ev.target.className;
  if (eventName.indexOf(`text`) != -1) {
    if (ev.target.offsetWidth < ev.target.scrollWidth) {
      var tooltip = this.$refs.textTooltip;
      this.textTooltipContent = ev.target.innerText;
      tooltip.referenceElm = ev.target;
      tooltip.$refs.popper.style.display = `none`;
      tooltip.doDestroy();
      tooltip.setExpectedState(true);
      tooltip.handleShowPopper();
    }
  }
},
hiddenTooltip: function () {
  const tooltip = this.$refs.textTooltip;
  if (tooltip) {
    tooltip.setExpectedState(false);
    tooltip.handleClosePopper();
  }
}

6、滾動條定位在有顏色顯示的位置

getTableBody: function (tab) {
  if (!tab || tab.name != `nav1` && tab.name != `nav3`) {
    var _this = this;
    setTimeout(function () {
      _this.curTopHeight.forEach(function (e, index) {
        var elTable = document.getElementsByClassName(`el-table__body-wrapper`)[index];
        if (elTable) {
          var td = elTable.getElementsByClassName(`cell`)[0];
          var tdWindth = parseInt(td.style.width) * e.left;
          document.getElementsByClassName(`el-table__body-wrapper`)[index].scrollTop = e.height;
          document.getElementsByClassName(`el-table__body-wrapper`)[index].scrollLeft = tdWindth;
        }
      })
    }, 1200);
  }
}

//找到表格中帶有顏色的資料

findColorText: function (data) {
  var height = 24;
  var left = 0;
  var _this = this;
  if (data && data.length) {
    var stop = true;
    data.forEach(function (item, index) {
      if (stop) {
        var _index = index;
        for (var i in item) {
          if (item[i].indexOf(`color`) != -1) {
            height = _index * height;
            left = i.replace(`column_key`, ``);
            _this.curTopHeight.push({
              `height`: height,
              `left`: left
            });
            stop = false;
            break;
          }
        }
      }
    })
  }
},

7、動態設定el-loading-mask的高度

getException:function(){
    var oDiv = $(`#exceptionDiv`)[0];
    var pDiv = $(`#el-exception-pane`)[0];
    var divHeight = pDiv.offsetHeight > oDiv.offsetHeight ? pDiv.offsetHeight : oDiv.offsetHeight;
    setTimeout(function(){
        var mDiv = pDiv.children[1];
        mDiv.style.height = divHeight +`px`;
    },1000);
}

8、判斷字串的型別

isString: function (str) {
  return `String` == utils.getDataType(str);
},
isArray: function (str) {
  return `Array` == utils.getDataType(str);
},
isObject: function (str) {
  return `Object` == utils.getDataType(str);
},
isFunction: function (str) {
  return `Function` == utils.getDataType(str);
},
isNumber: function (str) {
  return `null` !== str + `` && str !== `` && !isNaN(str);  //`Number` == utils.getDataType(str);
},
isDate: function (str) {
  return `Date` == utils.getDataType(str);
},
isDateStr: function (str) {
  return utils.dateStrCheck(str);
  //return  `Object` == utils.isObject(str) && str instanceof Date;
},
getDataType: function (str) {
  type = Object.prototype.toString.call(str).slice(8, -1);
  return type;
},

slice(8,-1)意思是從第8位開始（包含第8位）到最後一位之前（-1的意思就是最後一位，不包含最後一位）；
Object.prototype.toString.call(boj)這個是用來判斷資料型別，
如果boj是數字，得出的結果是[object Number]，從零開始數，第8位就是N，最後一位的前一位就是r，所以取得Number；
如果boj是字串，得出結果是[object String]，第8位S,最後一位的前一位g，取得String

9、刪除左右兩端的空格

trim: function (str) { //刪除左右兩端的空格
  return str.replace(/(^s*)|(s*$)/g, "");
}

10、轉換成 瀏覽器相容的時間格式物件

tranferCompatibleDate: function (vDate) {
  //var vDate = (typeof vDate == `string` ? vDate.split(`.`)[0] : vDate);
  if (utils.isString(vDate) && utils.isDateStr(vDate)) {
    vDate = vDate.replace(new RegExp(/-/gm), `/`); //將所有的`-`轉為`/`即可 解決IE、firefox瀏覽器下JS的new Date()的值為Invalid Date、NaN-NaN的問題
    return new Date(vDate);
  } else if (utils.isString(vDate)) { //針對這種資料先如此處理 "2017-04-15T10:56:31.958Z"
    return new Date(vDate);
  } else if (utils.isDate(vDate)) { //標準日期格式  Sat Apr 15 2017 13:54:50 GMT+0800 (中國標準時間)
    return new Date(vDate);
  } else if (utils.isNumber(vDate) || utils.isObject(vDate)) {
    try {
      return new Date(vDate);
    } catch (e) {
      console.error(`傳入的物件=` + vDate + `轉換成日期物件異常！`);
      return vDate;
    }
  } else {
    console.error(`傳入的date=` + vDate + `不是正確的日期格式！`);
    return;
  }
}

11、查詢兩個日期間隔天數

dateDayGap: function (dateStrBegin, dateStrEnd) { 
  if (!dateStrBegin || !dateStrEnd) return 0;
  var date1 = utils.tranferCompatibleDate(dateStrBegin);
  var date2 = utils.tranferCompatibleDate(dateStrEnd);
  var s1 = date1.getTime(),
    s2 = date2.getTime();
  var total = (s2 - s1) / 1000;
  var day = parseInt(total / (24 * 60 * 60)); //計算整數天數
  return day;
},

12、陣列去重

 uniqueArr:function(array) {
          var result = [];
          var obj = {};
          for(var i =0; i<array.length; i++){
             if(!obj[array[i].ddKey]){
                result.push(array[i]);
                obj[array[i].ddKey] = true;
             }
          }
          return result;
 },

13、獲取瀏覽器URL中查詢字串中的引數

 function getParam(name){
            var subUrl = ``;
            var curUrl = location.href;
            var url = {};
            if(curUrl.indexOf(`?`)>-1){
                //substring() 方法用於提取字串中介於兩個指定下標之間的字元
                subUrl = curUrl.substring(curUrl.indexOf(`?`),curUrl.length);
                //substr() 方法可在字串中抽取從 start 下標開始的指定數目的字元。
                var arr = subUrl.substr(1).split(`&`);
                for(var i = 0; i < arr.length; i ++) {
                    url[arr[i].split("=")[0]] = decodeURI(arr[i].split("=")[1]);
                }
            }
            return  url[name];
        }

14、新增url引數

 addParam: function (url, paramKey, paramVal) {
    var andStr = "?";
    var beforeparam = url.indexOf("?");
    if (beforeparam != -1) {
      andStr = "&";
    }
    return url + andStr + paramKey + "=" + encodeURIComponent(paramVal);
  }

15、刪除url引數

 delParam: function (url, paramKey) {
    var urlParam = url.substr(url.indexOf("?") + 1);
    var beforeUrl = url.substr(0, url.indexOf("?"));
    var nextUrl = "";

    var arr = new Array();
    if (urlParam != "") {
      var urlParamArr = urlParam.split("&");

      for (var i = 0; i < urlParamArr.length; i++) {
        var paramArr = urlParamArr[i].split("=");
        if (paramArr[0] != paramKey) {
          arr.push(urlParamArr[i]);
        }
      }
    }

    if (arr.length > 0) {
      nextUrl = "?" + arr.join("&");
    }
    url = beforeUrl + nextUrl;
    return url;
  }

16、獲取元素絕對位置

function getAbsPosition(element) {
  var abs = {
    x: 0,
    y: 0
  } 
 //如果瀏覽器相容此方法
  if (document.documentElement.getBoundingClientRect) {
    //注意，getBoundingClientRect()是jQuery物件的方法
    //如果不用jQuery物件，可以使用else分支。
    abs.x = element.getBoundingClientRect().left;
    abs.y = element.getBoundingClientRect().top;
    /*
            abs.x += window.screenLeft +
                (document.documentElement.scrollLeft || document.body.scrollLeft) -
                (document.documentElement.clientLeft || document.body.clientLeft);
            abs.y += window.screenTop +
                (document.body.scrollTop || document.documentElement.scrollTop) -
                (document.documentElement.clientTop || document.body.clientLeft);*/
    //去掉screenLeft與screenTop先
    abs.x += 0 + (document.documentElement.scrollLeft || document.body.scrollLeft) - (document.documentElement.clientLeft || document.body.clientLeft);
    abs.y += 0 + (document.body.scrollTop || document.documentElement.scrollTop) - (document.documentElement.clientTop || document.body.clientLeft);
  } //如果瀏覽器不相容此方法
  else {
    while (element != document.body) {
      abs.x += element.offsetLeft;
      abs.y += element.offsetTop;
      element = element.offsetParent;
    } 
   //計算想對位置
    abs.x += window.screenLeft + document.body.clientLeft - document.body.scrollLeft;
    abs.y += window.screenTop + document.body.clientTop - document.body.scrollTop;
  }
  return abs;
}

17、時間字元處理，把時間後面的時和分去掉

utils.timeHandle = function (str, type) {
  function speace() {
    var index = str.indexOf(` `);
    if (index > -1 && str.length > 0) {
      return str.split(` `)[0];
    }
  }
  function font() {
    var index = str.indexOf(`-`);
    if (index > -1 && str.length > 0) {
      str = str.split(`-`);
      return str[1] + `月` + str[2] + `日`;
    }
  }
  if (type == 1) {
    return speace();
  } else if (type == 2) {
    str = speace();
    return font();
  }
};

18、設定title

utils.setTitle = function (title) {
  document.getElementsByTagName(`title`)[0].innerText = title;
};

19、顯示隱藏分享給微信好友、微信朋友圈按鈕；要隱藏的選單項，只能隱藏“傳播類”和“保護類”按鈕，所有menu項見附錄3

utils.showShareBtn = function(show){
  window.wx.ready(function() {
    if(!show){
      wx.hideMenuItems({
        menuList: [
          "menuItem:share:timeline",  //分享到朋友圈
          "menuItem:share:appMessage", //傳送給朋友
          "menuItem:share:qq", //分享到QQ
          "menuItem:favorite",  //收藏
          "menuItem:share:QZone",  //分享到QQ空間
          "menuItem:openWithQQBrowser", //在QQ瀏覽器中開啟
          "menuItem:openWithSafari",   //在Safari瀏覽器中開啟
          "menuItem:copyUrl",//複製連結
          "menuItem:share:email"
        ],
      });
    }else {
      wx.showMenuItems({
        menuList: [
          "menuItem:share:timeline",  //分享到朋友圈
          "menuItem:share:appMessage", //傳送給朋友
          "menuItem:share:qq", //分享到QQ
          "menuItem:favorite",  //收藏
          "menuItem:share:QZone",  //分享到QQ空間
          "menuItem:openWithQQBrowser", //在QQ瀏覽器中開啟
          "menuItem:openWithSafari",   //在Safari瀏覽器中開啟
          "menuItem:copyUrl",//複製連結
          "menuItem:share:email"
        ],
      });
    }
  });
};

20、pc端增加禁止滑鼠右鍵選單功能，以防止儲存或分享圖片

document.oncontextmenu = function(event){
      var curtargrt =  event.srcElement ? event.srcElement : event.target;
      if(curtargrt.tagName == `IMG`){
        return false;
      }
    }

相關文章