javascript經常使用工具函數總結(不按期補充)未指定標題的文章

前言

• 如下代碼來自：本身寫的、工做項目框架上用到的、其餘框架源碼上的、網上看到的。

• 主要是做爲工具函數，服務於框架業務，自身不依賴於其餘框架類庫，部分使用到es6/es7的語法使用時要注意轉碼

• 雖然儘可能在函數中作了錯誤狀況的處理，仍有可能出現報錯的狀況(不按期完善)

1. 獲取url上的參數

/**
   *獲取url上的參數
   * @return {object}
   * @example
   * getRequest()  getRequest().paramA
   */
function getRequest() {
    var searchString = window.location.search.substring(1),
        params = searchString.split("&"),
        hash = {};
    if (searchString == "") return {};
    for (var i = 0; i < params.length; i++) {
        var pos = params[i].indexOf('=');
        if (pos == -1) { continue; }
        var paraName = params[i].substring(0, pos),
            paraValue = params[i].substring(pos + 1);
        hash[paraName] = paraValue;
    }
    return hash;
}

 返回一個對象，將url上的參數以鍵值對的形式存儲在返回結果中，若是url上沒參數，則返回空對象

2. 計算兩個日期的時間差

/**
   * 計算兩個日期時間的時間差
   * @param {Date, Date}  date1 date2
   * @return {object | null} 
   * @example
   * getDiff(new Date('2017-09-08'), new Date())
   */
function getDiff(date1, date2) {
     if (!date1.getTime || !date2.getTime) return null
     var ms = (date1.getTime() - date2.getTime());
     var day1 = Math.round(ms / 24 / 3600 / 1000),
         hh1 = Math.round((ms / 3600 / 1000) % 24),
         mm1 = Math.round((ms / 1000 / 60) % 60),
         ss1 = Math.round((ms / 1000) % 60);
     return {
         day: day1,
         hour: hh1,
         minute: mm1,
         second: ss1
      };
}

 傳入兩個Date日期對象，返回一個對象，其屬性值day、hour、minute、second分別表示相差天數、小時、分鐘、秒。結果以Math.round()取整，若是結果爲負，則表示第一個日期在第二個日期前面

3. 將canvas轉化爲image圖片格式

/**
   * 將canvas轉化爲image格式
   * @param {string}  cId
   * @return {object HTMLImageElement} 
   * @example
   * canvasToImg('canvas')  canvasToImg('#canvarsId')
   */
function canvasToImg(cId){
    let canvas = document.querySelector(cId)
    if (!canvas || !canvas.toDataURL) return new Image()
    let imgData = canvas.toDataURL('image/png'),
        imgs= new Image();
        imgs.src=imgData;
    return imgs
}

 傳入一個css選擇器，函數根據選擇器查詢canvas節點，而後返回該canvas的image格式節點，若是查找不到則返回一個空的image。原理是將canvas轉化爲base64編碼，toDataURL方法貌似是canvas節點獨有的，而後新建一個src是這個base64編碼的圖片。
 ps:什麼狀況下須要作這種轉換呢？目前我知道的一個就是canvas在移動端沒法長按保存到手機。

4. 生成隨機guid

/**
   * 生成一個惟一的guid
   * @return {string}
   * @example
   * // 7f603b20-17ff-4f47-aeb9-e7996de04939
   * util.guid();
   * @see http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
   */
  function guid () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
      return v.toString(16);
    });
  }

 這個方法用於生成一個隨機guid，能夠將生成的guid視爲全局惟一的(生成兩個相同id的狀況不多)。guid彷佛在前端用的比較少，目前項目用到就是在每次請求後端接口時調用此方法，生成一個guid傳過去。

5. 獲取一個月份的天數

function isLeapYear (year) {
    if (year % 100 === 0) {
      if (year % 400 === 0) {
        return true;
      }
    } else if (year % 4 === 0) {
      return true;
    }
    return false;
  }
  /**
   * 獲取某個月份有多少天
   * @return {number}
   * @param {string | number}  year month
   * @example
   * getDaysInMonth(2017, 9)
   */
  function getDaysInMonth (year, month) {
    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  }

 傳入一個年份和月份，返回該月有多少天，其中也包含了一個isLeapYear方法來判斷是不是閏年，應該在實現日曆或者日期選擇組件時用的到

結語

 暫時就寫這麼多了，後面不按期補充。