js 經常使用代碼片斷

時間 2019-12-08

原文原文鏈接

一、10 個短小實用的代碼片斷： https://www.jianshu.com/p/3ef822ec5a63html

二、js經常使用函數： http://www.javashuo.com/article/p-hizmepqe-r.html （原生實現）es6

/**
 * 導入文件內方法
 */
import Promise from './es6-promise.min.js';
import CONSTANTS from '../constants/constants.js';

/**
 * 操做dom類
 */
let dom = {
  // 判斷是否有該 class
  hasClass(el, className) {
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
    return reg.test(el.className)
  },

  // 添加 class
  addClass(el, className) {
    if (this.hasClass(el, className)) {
      return
    }
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
  },

  // 刪除類名
  removeClass(el, className) {
    if (this.hasClass(el, className)) {
      var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
      el.className = el.className.replace(reg, '')
    }
  },
  // 替換類名
  replaceClass(obj, newName, oldName) {
    this.removeClass(obj, oldName)
    this.addClass(obj, newName)
  },

  /**
   * 獲取/設置 自定義屬性 data-${name}=val
   * 若是傳入了 val 就設置自定義屬性 `data-${name}` 的值爲 val
   * 若是沒有傳入了 val 就獲取自定義屬性 `data-${name}` 的值
   */
  customAttribute(el, name, val) {
    if (val) {
      return el.setAttribute(`data-${name}`, val)
    } else {
      return el.getAttribute(`data-${name}`)
    }
  },

  /**
   * 獲取元素相對屏幕的位置
   * let one = document.getElementById('one')
   * console.log(getPos(one)) -> {top: 8, left: 8}
   */
  getPos(elem) {
    if (!elem) return { left: 0, top: 0 }

    let top = 0
    let left = 0

    top = elem.getBoundingClientRect().top
    left = elem.getBoundingClientRect().left

    return { top, left }
  }
}

/***
* 操做數組類
*/
let arr = {
  // 克隆數組
  cloneArr(arr) {
    // 從第一個字符就開始 copy
    // slice(start,end) 方法可從已有的數組中返回選定的元素。
    return arr.slice(0)
  },

  /**
   * 洗牌函數
   * @param  {Array} arr 原數組
   * @param  {boolean} flag 是否改變原數組，默認不改變
   * @return {Array}     新數組
   */
  shuffle(arr, flag = false) {
    let newArr = []
    if (flag) {
      newArr = arr
    } else {
      newArr = arr.slice(0)
    }

    for (let i = 0; i < newArr.length; i++) {
      let j = utils.num.getRandom(0, i)
      let temp = newArr[i]
      newArr[i] = newArr[j]
      newArr[j] = temp
    }
    return newArr
  },

  // 隨機獲取數組的一個成員
  randomOne(arr) {
    return arr[Math.floor(Math.random() * arr.length)]
  },

  // 數組去重
  removeRepeat(arr) {
    return Array.from(new Set(arr))
  },
  // [1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
  //     return index===array.indexOf(ele)
  // })

  // 數組最大值
  maxArr(arr) {
    return Math.max.apply(null, arr)

    // var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
    // var maxInNumbers = Math.max.apply(Math, numbers);
    // var minInNumbers = Math.min.apply(Math, numbers);
  },

  // 數組最小值
  minArr(arr) {
    return Math.min.apply(null, arr)
  },

  // 數組數字總和 (必須保證數組每一個元素都是 Number)
  sumArr(arr) {
    let sum = 0

    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }

    return sum
  },

  // 數組數字平均值，小數點可能會有不少位，這裏不作處理，處理了使用就不靈活了！
  averageArr(arr) {
    let average = this.sumArr(arr) / arr.length
    return average
  },

  /**
   * 一個元素出現的次數
   * getEleCount('asd56+asdasdwqe', 'a') -> 3
   * getEleCount([1, 2, 3, 4, 2], 3) -> 1
   * @param  {[type]} obj 能夠是對象或者數組
   * @param  {[type]} ele [description]
   * @return {[type]}     [description]
   */
  getEleCount(obj, ele) {
    let num = 0

    for (let i = 0; i < obj.length; i++) {
      if (ele === obj[i]) {
        num++
      }
    }

    return num
  }
}

/**
 * 操做字符串類
 */
let str = {
  /**
  * 正則驗證(可擴展)
  * @param  {String} str  須要檢測的字符串
  * @param  {String} type 檢測類型
  * @return {Boolean}     返回布爾值
  */
  testReg(str, type) {
    switch (type) {
      case 'email':
        return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
      case 'phone':
        return /^1[3|4|5|7|8][0-9]{9}$/.test(str)
      case 'tel':
        return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)
      case 'number':
        return /^[0-9]$/.test(str)
      case 'english':
        return /^[a-zA-Z]+$/.test(str)
      case 'chinese':
        return /^[\u4E00-\u9FA5]+$/.test(str)
      case 'lower':
        return /^[a-z]+$/.test(str)
      case 'upper':
        return /^[A-Z]+$/.test(str)
      default:
        return true
    }
  },

  /**
   * 去掉先後空格
   * 1:先後空格(默認)  2:全部空格  3:前空格 4:後空格
   * @param  {[type]} str  [description]
   * @param  {Number} type [description]
   * @return {[type]}      [description]
   */
  trim(str, type = 1) {
    switch (type) {
      case 1:
        return str.replace(/(^\s*)|(\s*$)/g, '')
      case 2:
        return str.replace(/\s+/g, '')
      case 3:
        return str.replace(/(^\s*)/g, '')
      case 4:
        return str.replace(/(\s*$)/g, '')
      default:
        return str
    }
  },

  /**
  * 大小寫轉換
  * 1:首字母大寫 2:首頁母小寫 3:大小寫轉換 4:所有大寫 5:所有小寫
  */
  changeCase(str, type) {
    function ToggleCase(str) {
      var itemText = ''
      str.split('').forEach(
        function (item) {
          if (/^([a-z]+)/.test(item)) {
            itemText += item.toUpperCase()
          } else if (/^([A-Z]+)/.test(item)) {
            itemText += item.toLowerCase()
          } else {
            itemText += item
          }
        })
      return itemText
    }

    switch (type) {
      case 1:
        return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
          return v1.toUpperCase() + v2.toLowerCase()
        })
      case 2:
        return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
          return v1.toLowerCase() + v2.toUpperCase()
        })
      case 3:
        return ToggleCase(str)
      case 4:
        return str.toUpperCase()
      case 5:
        return str.toLowerCase()
      default:
        return str
    }
  },

  /**
   * 如何優雅的實現金錢格式化
   * 1234567890 --> 1,234,567,890
   * @return {[type]}       [description]
   */
  formatMoney(str = '1234567890') {
    return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',') // 1,234,567,890
  },

  /**
   * 實現標準JSON的深拷貝
   * 不考慮IE的狀況下，標準JSON格式的對象蠻實用，不過對於undefined和function的會忽略掉。
   * @param  {[type]} a [description]
   * @return {[type]}   [description]
   */
  deepCopy(a) {
    return JSON.parse(JSON.stringify(a))
  }
}

/**
 * 操做時間類
 */
let time = {

  /**
   * 獲取當前時間
   * 2017-08-11 22:52:13 星期六
   * @param  {Boolean} hasDay  是否須要年月日
   * @param  {Boolean} hasHour 是否須要十分秒
   * @param  {Boolean} hasWeek 是否須要星期
   * @param  {String} sign1 分隔符
   * @param  {String} sign2 分隔符
   */
  getNowDate(hasDay = true, hasHour = true, hasWeek = true, sign1 = '/', sign2 = ':') {
    let date = new Date()
    let year = date.getFullYear()
    let month = (date.getMonth() + 1).toString().padStart(2, '0')
    let day = (date.getDate()).toString().padStart(2, '0')
    let hour = (date.getHours()).toString().padStart(2, '0')
    let minutes = (date.getMinutes()).toString().padStart(2, '0')
    let seconds = (date.getSeconds()).toString().padStart(2, '0')
    let weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
    let week = weekArr[date.getDay()]

    let time1 = hasDay ? `${year}${sign1}${month}${sign1}${day}` : ''
    let time2 = hasHour ? `${hour}${sign2}${minutes}${sign2}${seconds}` : ''
    let time3 = hasWeek ? `${week}` : ''

    return `${time1} ${time2} ${time3}`.replace(/(^\s*)|(\s*$)/g, '')
  },

  /**
   * 格式化時間戳 (分:秒)
   * 61 -> 01:01
   * @param  {Number} timestamp 時間戳
   * @param  {String} sign      分隔符，默認 :
   * @return {[type]}           [description]
   */
  format(timestamp, sign = ':') {
    timestamp = Math.floor(timestamp)

    let minute = (Math.floor(timestamp / 60)).toString().padStart(2, '0')
    let second = (timestamp % 60).toString().padStart(2, '0')
    return `${minute}${sign}${second}`
  },

  /**
  * 倒計時
  * countDown('2017-8-11 24:0:0') -> 剩餘0天0小時54分鐘41秒
  * @param  {Date} endTime 結束時間
  * @return {[type]}         [description]
  */
  countDown(endTime) {
    let start = new Date()
    let end = new Date(endTime)
    let dif = end.getTime() - start.getTime()

    let d = 0
    let h = 0
    let m = 0
    let s = 0

    if (dif >= 0) {
      d = Math.floor(dif / 1000 / 3600 / 24)
      h = Math.floor(dif / 1000 / 60 / 60 % 24)
      m = Math.floor(dif / 1000 / 60 % 60)
      s = Math.floor(dif / 1000 % 60)
    }

    return `僅剩${d}天${h}小時${m}分鐘${s}秒`
  }
}

/**
 * 請求接口類
 */
let ajax = {
  
  /**
   * 請求接口方法
   * @param{url}請求url
   * @param{method} 請求方式
   * @param{data} 請求參數
   */
  brmRequest(url, method, data) {
    let token = wx.getStorageSync('AuthToken');
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        method,
        data,
        header: {
          'Cookie': 'XDEBUG_SESSION=PHPSTORM',
          'Content-Type': 'application/json',
          'Authorization': token
        },
        success: function (res) {
          if (res.header.Authorization && token != res.header.Authorization) {
            wx.setStorageSync('AuthToken', res.header.Authorization)
          }
          resolve(res.data);
        },
        fail: function (err) {
          reject(err);
        }
      });
    })
  }

}

//導出方法類
module.exports = {
  dom: dom,
  arr: arr,
  str: str,
  time: time,
  ajax: ajax,
}

View Code

三、有過緩存（瀏覽器存儲）的封裝： ajax

四、將 js 對象，拼接成請求參數顯示。原生的ajax請求參數都是 key1=value1&key2=value2 這種顯示的。因此須要這樣一個方法就像處理函數。參考連接json

  // 格式化參數
  function formatParams (data) {
    var arr = []
    for (var item in data) {
      arr.push(item + '=' + data[item])
    }
    return arr.join('&')
  }