国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端常用的工具類函數(shù), 持續(xù)更新中

wyk1184 / 610人閱讀

摘要:在開發(fā)項(xiàng)目的時(shí)候,有一些場(chǎng)景用到次數(shù)頻繁的函數(shù),就封裝在了自己的工具類里,在這里和大家分享一下通過獲取到數(shù)據(jù)列表中對(duì)應(yīng)顯示的字段經(jīng)常做平臺(tái)類的項(xiàng)目,容易碰到這樣的場(chǎng)景,增刪改查頁(yè)面,添加完之后,表格要顯示某個(gè)類型,但是接口返回?cái)?shù)據(jù)是類型,就

在開發(fā)項(xiàng)目的時(shí)候,有一些場(chǎng)景用到次數(shù)頻繁的函數(shù),就封裝在了自己的工具類里,在這里和大家分享一下

1. 通過value獲取到數(shù)據(jù)列表中對(duì)應(yīng)顯示的字段

經(jīng)常做平臺(tái)類的項(xiàng)目,容易碰到這樣的場(chǎng)景,增刪改查頁(yè)面,添加完之后,表格要顯示某個(gè)類型,但是接口返回?cái)?shù)據(jù)是類型ID,就可以通過這個(gè)方法得到對(duì)應(yīng)要顯示的字段了。

 用法示例:let list = [{id: 1, name: "深圳"}, {id: 2, name: "廣州"}]
          getDataName({dataList: arr, value: "id", label: "name", data: 1}) // 深圳
          getDataName({dataList: arr, value: "id", label: "name", data: 2}) // 廣州

 /**
   * 通過value找到在列表中對(duì)應(yīng)的名字
   * @param {Object} obj
   *  @param obj.dataList 數(shù)據(jù)列表
   *  @param obj.value    數(shù)據(jù)的值對(duì)應(yīng)的字段名稱   例如 "value"
   *  @param obj.label    數(shù)據(jù)的說明對(duì)應(yīng)的字段名稱 例如 "label"
   *  @param obj.data     當(dāng)前傳入的數(shù)據(jù)值
   * @return name        返回當(dāng)前傳入值在數(shù)組中對(duì)應(yīng)的名字
   */
  getDataName: (obj) => {
    let name = obj.data
    if (Array.isArray(obj.dataList) && obj.dataList.length > 0) {
      for (let i = 0; i < obj.dataList.length; i++) {
        if (obj.dataList[i][obj.value] == obj.data) {
          name = obj.dataList[i][obj.label]
        }
      }
    }
    return name
  }
2. 對(duì)請(qǐng)求失敗的HTTP狀態(tài)碼做處理

說多了都是淚,之前公司接口返回?cái)?shù)據(jù),一開始沒有做異常處理,然后在使用的時(shí)候一旦出現(xiàn)什么問題頁(yè)面上就是一大堆的英文,很長(zhǎng)很長(zhǎng)一串,或者是出現(xiàn)問題了不返回錯(cuò)誤原因,然后說影響用戶體驗(yàn),但是后端又不做異常處理,于是就寫了一個(gè)關(guān)于http狀態(tài)碼的處理。根據(jù)返回的狀態(tài)碼頁(yè)面上顯示對(duì)應(yīng)的提示內(nèi)容,不過感覺稍微正常的流程都用不上這個(gè),哈哈

/**
   * 對(duì)請(qǐng)求失敗的HTTP狀態(tài)嗎做處理
   * @param {Number} code     HTTP狀態(tài)碼
   * @param {String} message  錯(cuò)誤提示
   * @return message 返回處理過的提示信息
   */
  requestError: (code, message) => {
    let statusCode = (code + "").replace(/[^0-9]+/g, "") - 0

    switch (statusCode) {
      case 400:
        return "Bad Request (錯(cuò)誤的請(qǐng)求)"
      case 401:
        return "Unauthorized (請(qǐng)求要求身份驗(yàn)證)"
      case 403:
        return "Forbidden (服務(wù)器拒絕請(qǐng)求)"
      case 404:
        return "NOT Found (服務(wù)器找不到請(qǐng)求的資源)"
      case 405:
        return "Bad Request (禁用請(qǐng)求中指定的方法)"
      case 406:
        return "Not Acceptable (無(wú)法使用請(qǐng)求的內(nèi)容特性響應(yīng)請(qǐng)求的網(wǎng)頁(yè))"
      case 407:
        return "Proxy Authentication Required (需要代理授權(quán))"
      case 408:
        return "Request Timed-Out (服務(wù)器等候請(qǐng)求時(shí)發(fā)生超時(shí))"
      case 409:
        return "Conflict (服務(wù)器在完成請(qǐng)求時(shí)發(fā)生沖突。服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息)"
      case 410:
        return "Gone (請(qǐng)求的資源已被永久刪除)"
      case 411:
        return "Length Required (服務(wù)器不接受不含有效內(nèi)容長(zhǎng)度標(biāo)頭字段的請(qǐng)求)"
      case 412:
        return "Precondition Failed (未滿足前提條件)"
      case 413:
        return "Request Entity Too Large (請(qǐng)求實(shí)體過大)"
      case 414:
        return "Request, URI Too Large (請(qǐng)求的 URI 過長(zhǎng))"
      case 415:
        return "Unsupported Media Type (不支持的媒體類型)"
      case 429:
        return "您的操作過于頻繁,請(qǐng)稍后重試"
      case 500:
        return "Internal Server Error (服務(wù)器內(nèi)部錯(cuò)誤)"
      case 501:
        return "Not Implemented (尚未實(shí)施)"
      case 502:
        return "Bad Gateway (錯(cuò)誤網(wǎng)關(guān))"
      case 503:
        return "Server Unavailable (服務(wù)不可用)"
      case 504:
        return "Gateway Timed-Out (網(wǎng)關(guān)超時(shí))"
      case 505:
        return "HTTP Version not supported (HTTP 版本不受支持)"
      default:
        return message
    }
  },
3. 傳入時(shí)間戳,轉(zhuǎn)換指定的時(shí)間格式

這個(gè)是本人用的非常多的一個(gè)函數(shù),平時(shí)經(jīng)常需要對(duì)時(shí)間處理,就只需要傳入時(shí)間戳或者時(shí)間格式的字符串,然后指定要轉(zhuǎn)換的時(shí)間格式,就可以了,很方便

 用法示例:switchTime(new Date()) // 傳入當(dāng)前時(shí)間,默認(rèn)返回當(dāng)時(shí)時(shí)間,格式為 YYYY-MM-DD hh:mm:ss
          switchTime("2018-11-10", "YYYY.MM.DD") // 2018.11.10

 /**
   * 傳入時(shí)間戳(或者時(shí)間格式的數(shù)據(jù)),轉(zhuǎn)換指定的時(shí)間格式
   * @param {Number} val      時(shí)間戳(或者時(shí)間格式的數(shù)據(jù))
   * @param {String} dateType 要得到的時(shí)間格式 例如 YYYY-MM-DD hh:mm:ss
   * @return dataStr 例如 YYYY-MM-DD hh:mm:ss
   */
  switchTime: (val = +new Date(), dateType = "YYYY-MM-DD hh:mm:ss") => {
    // 將字符串轉(zhuǎn)換成數(shù)字
    let timeStamp, dateStr, str
    timeStamp = +new Date(val)

    // 如果轉(zhuǎn)換成數(shù)字出錯(cuò)
    if (!timeStamp) {
      return val
    }

    // 得到時(shí)間字符串
    dateStr = new Date(timeStamp)
    str = dateType.replace("YYYY", dateStr.getFullYear())
    str = str.replace("MM", (dateStr.getMonth() + 1 < 10 ? "0" : "") + (dateStr.getMonth() + 1))
    str = str.replace("DD", (dateStr.getDate() < 10 ? "0" : "") + dateStr.getDate())
    str = str.replace("hh", (dateStr.getHours() < 10 ? "0" : "") + dateStr.getHours())
    str = str.replace("mm", (dateStr.getMinutes() < 10 ? "0" : "") + dateStr.getMinutes())
    str = str.replace("ss", (dateStr.getSeconds() < 10 ? "0" : "") + dateStr.getSeconds())

    return str
  }
4. 瀏覽器打開新窗口

在平時(shí)開發(fā)中,一定會(huì)有這樣的需求,打開新窗口。但是用window.open的方式往往會(huì)碰到被瀏覽器攔截的問題,所以可以用a標(biāo)簽通過超鏈接的方式打開新窗口。
往往在下載文件的時(shí)候也會(huì)用到這個(gè)方法。不過下載文件分為幾種情況,一種是直接訪問一個(gè)地址,瀏覽器會(huì)自動(dòng)解析并且下載,還有一種情況就是后端返回的是一個(gè)文件,這個(gè)時(shí)候需要先在響應(yīng)類型中加上blob處理之后,再去處理。這種情況下訪問解析后的地址,往往是打開一個(gè)新窗口并訪問,并不會(huì)自動(dòng)下載,而需要下載的話需要給a標(biāo)簽再加上一個(gè)download屬性。

  用法示例:openWindow("https://www.baidu.com") // 默認(rèn)打開方式為新窗口, id為open

  /**
   * a模擬window.open,不會(huì)被瀏覽器攔截
   * @param {String} url        a標(biāo)簽打開的地址
   * @param {String} id         a標(biāo)簽的ID
   * @param {String} targetType a標(biāo)簽點(diǎn)擊打開的方式(當(dāng)前頁(yè)面打開還是新窗口打開)
   */
  openWindow: (url, targetType = "_blank", id = "open") => {
    // 如果存在則刪除
    if (document.getElementById(id)) {
      document.body.removeChild(document.getElementById(id))
    }
    let a = document.createElement("a")
    a.setAttribute("href", url)
    a.setAttribute("download", url)
    a.setAttribute("target", targetType)
    a.setAttribute("id", id)
    document.body.appendChild(a)
    a.click()
  },
5. 將有層級(jí)關(guān)系的列表轉(zhuǎn)換成樹狀數(shù)據(jù)

不知道大家碰到樹狀結(jié)構(gòu)的情況,但是本人開發(fā)的時(shí)候,因?yàn)殚_發(fā)的平臺(tái)類的項(xiàng)目較多,所以經(jīng)常碰到樹狀的數(shù)據(jù)結(jié)構(gòu)。
以前都是叫后端直接返回樹狀數(shù)據(jù)的,但是后端好像也不喜歡處理這樣的數(shù)據(jù),就自己寫了一個(gè)方法。
傳入有層級(jí)關(guān)系的列表數(shù)據(jù),然后根據(jù)定義的參數(shù),處理成樹狀的數(shù)據(jù)結(jié)構(gòu)。

  用法示例:let arr = [{id: 1, pid: 0, name: "一級(jí)"}, {id: 2, pid: 1, name: "二級(jí)"}],
               arr1 = getTreeArr({key: "id", pKey: "pid", rootPValue: 0, data: arr})
  得到的數(shù)據(jù)為:
           arr1 = [
               {id: 1, pid: 0, name: "一級(jí)", children: [{id: 2, pid: 1, name: "二級(jí)", children: []}]
               }
           ]

  /**
   * 將一級(jí)的數(shù)據(jù)結(jié)構(gòu)處理成樹狀數(shù)據(jù)結(jié)構(gòu)
   * @param {Object} obj {key, pKey, data}
   *  @param obj.key  字段名稱 比如id
   *  @param obj.pKey 父字段名稱 比如 pid
   *  @param obj.rootPValue 根節(jié)點(diǎn)的父字段的值
   *  @param obj.data 需要處理的數(shù)據(jù)
   * @return {Array} arr
   */
  getTreeArr: (obj) => {
    if (!Array.isArray(obj.data)) {
      console.log("getTreeArr=>請(qǐng)傳入數(shù)組")
      return []
    }
    let arr = obj.data, arr1 = []
    // 將數(shù)據(jù)處理成數(shù)狀結(jié)構(gòu)
    arr.forEach(item => {
      let index = 0
      item.children = []
      arr.forEach(item1 => {
        // 得到樹結(jié)構(gòu)關(guān)系
        if (item[obj.key] === item1[obj.pKey]) {
          item.children.push(item1)
        }
        // 判斷根節(jié)點(diǎn)
        if (item1.id !== item.pid) {
          index++
        }
        // 傳入根節(jié)點(diǎn),根據(jù)傳入的根節(jié)點(diǎn)組成樹結(jié)構(gòu)
        if (rootPValue in obj && item[obj.pKey] === obj.rootPValue) {
          arr1.push(item)
        }
      })
      // 沒傳入根節(jié)點(diǎn),根據(jù)當(dāng)前數(shù)據(jù)結(jié)構(gòu)得到根節(jié)點(diǎn)
      if (!(rootPValue in obj) && index === arr.length) {
        arr1.push(item)
      }
    })
    return arr1
  }
6. 占位顯示

寫vue組件的時(shí)候,總是習(xí)慣用對(duì)象去做參數(shù),因?yàn)橛X得把參數(shù)變成對(duì)象的形式維護(hù)起來會(huì)非常方便,每次增加參數(shù)的時(shí)候只需要在對(duì)象中加上屬性,接受的地方對(duì)屬性做處理就好了。
但是vue組件的話,Object是不能設(shè)置默認(rèn)值的,沒有默認(rèn)值的話,讀取對(duì)象的屬性便是一個(gè)錯(cuò)誤的語(yǔ)法,所以就寫了一個(gè)占位顯示的方法,比如

  用法示例:showData(obj, "name", "名字") // 當(dāng)obj未傳入的時(shí)候顯示 ‘名字’, 傳入后顯示為 obj.name

  /**
 * 用來判斷對(duì)象不存在是,顯示的字段數(shù)據(jù)
 * @param {Object} obj 對(duì)象
 * @param {String} key 要顯示的屬性
 * @param {String} staticName 屬性不存在時(shí)顯示的值
   */
  showData (obj, key, staticName) {
    if (!obj) {
      obj = {}
    }
    if (obj && obj[key]) {
      return obj[key]
    } else {
      return staticName
    }
  }
7. 數(shù)組(對(duì)象數(shù)組去重)

使用和參數(shù)說明

用法示例:handleRepeatArr({data: [1 , 1 ,1]}) // [1]
         handleRepeatArr({data: [{name: 1}, {name: 1}], key: "name"}) // [{name: 1}]
    
  /**
 - 數(shù)組去重
 - @param {Array} data 要去重的數(shù)組
 - @param {String} key 作為去重依據(jù)的字段 (處理對(duì)象數(shù)組時(shí)需要傳入)
 - @return arr 返回處理后的數(shù)據(jù)
   */

1.遞歸去重(數(shù)據(jù)無(wú)法保持之前的排序)

  handleRepeatArr ({data, key}) {
    if (!Array.isArray(data)) {
      console.log("請(qǐng)傳入數(shù)組")
      return
    }
    // 先對(duì)數(shù)據(jù)做排序處理
    data = data.sort((item, item1) => {
      if (key) {
        return item[key] - item1[key]
      }
      return item - item1
    })
    // 遞歸去重
    function getData (index) {
      if (index >= 1) {
        // 判斷當(dāng)前數(shù)據(jù)和下一條數(shù)據(jù)是否相等
        let result = key ? data[index][key] === data[index - 1][key] : data[index] === data[index - 1]
        if (result) {
          data.splice(index, 1)
        }
        getData(index - 1)
      }
    }
    getData(data.length - 1)
    return data
  }

2.根據(jù)對(duì)象的屬性不同去重 (推薦使用)

  handleRepeatArr ({data, key}) {
    if (!Array.isArray(data)) {
      console.log("請(qǐng)傳入數(shù)組")
      return
    }
    let arr = [], obj = {}
    data.forEach((item, index) => {
      let attr = key ? item[key] : item
      if (!obj[attr]) {
        obj[attr] = index + 1
        arr.push(item)
      }
    })
    return arr
  }

3.利用indexOf以及forEach (適合處理數(shù)組,不適合處理對(duì)象數(shù)組)

  handleRepeatArr ({data, key}) {
    if (!Array.isArray(data)) {
      console.log("請(qǐng)傳入數(shù)組")
      return
    }
    let arr = []
    data.forEach((item, index) => {
      // 如果當(dāng)前元素在之后沒有出現(xiàn)過(后面出現(xiàn)的數(shù)據(jù)會(huì)保留)
      // let result = data.indexOf(item, index + 1)
      // 如果當(dāng)前元素在之前沒有出現(xiàn)過(前面出現(xiàn)的數(shù)據(jù)會(huì)保留)
      let result = index === 0 ? -1 : data.lastIndexOf(item, index - 1)
      if (result === -1) {
        arr.push(item)
      }
    })
    return arr
 }

4.雙層循環(huán)去重 (占用內(nèi)存高)

  handleRepeatArr ({data, key}) {
    if (!Array.isArray(data)) {
      console.log("請(qǐng)傳入數(shù)組")
      return
    }
    for (let i = 0, len = data.length; i < len; i++) {
      for (let j = i + 1; j < len; j++) {
        let result = key ? data[i][key] === data[j][key] : data[i] === data[j]
        if (result) {
          data.splice(j, 1)
          len--
          j--
        }
      }
    }
    return data
 }

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/100439.html

相關(guān)文章

  • 阿里云前端周刊 - 第 18 期

    摘要:然鵝在過去的兩個(gè)月里,對(duì)的理解發(fā)生了一波三折的變化。發(fā)布自版本發(fā)布之后,一直致力于提升版本迭代速度,盡可能地通過小的更新來修復(fù)存在的問題。 推薦 1. 深入淺出 React 高階組件 https://zhuanlan.zhihu.com/p/... 由高階函數(shù)引申高階組件,高階組件是接受 React 組件作為輸入,輸出一個(gè)新的 React 組件的組件,本文介紹了在 React 工程中如...

    luck 評(píng)論0 收藏0
  • 前端】Util.js-ES6實(shí)現(xiàn)常用100多個(gè)javaScript簡(jiǎn)短函數(shù)封裝合集(持續(xù)更新

    摘要:在數(shù)組中循環(huán)使用將數(shù)組的第一個(gè)元素除去直到函數(shù)的返回值為。使用匿名內(nèi)部函數(shù)范圍來聲明未定義的內(nèi)存空間使用閉包來存儲(chǔ)返回值。返回頂部從數(shù)組中移除給定函數(shù)返回的元素使用查找返回值的數(shù)組元素和以使用刪除元素。使用執(zhí)行從右向左的函數(shù)組合。 showImg(https://segmentfault.com/img/bV0PXR?w=400&h=80); Util.js (持續(xù)更新中...) ...

    ivyzhang 評(píng)論0 收藏0
  • 前端面試題收集,持續(xù)更新

    摘要:對(duì)于所訪問的每個(gè)元素,函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語(yǔ)義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些? 常見的瀏覽器內(nèi)核有哪些? 介紹一下你對(duì)瀏覽器內(nèi)核的理解?...

    kgbook 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wyk1184

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<