前端經常使用的工具類函數, 持續更新中
在開發項目的時候，有一些場景用到次數頻繁的函數，就封裝在了本身的工具類裏，在這裏和你們分享一下vue
1. 經過value獲取到數據列表中對應顯示的字段
常常作平臺類的項目，容易碰到這樣的場景，增刪改查頁面，添加完以後，表格要顯示某個類型，可是接口返回數據是類型ID，就能夠經過這個方法獲得對應要顯示的字段了。後端
用法示例：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找到在列表中對應的名字
* @param {Object} obj
* @param obj.dataList 數據列表
* @param obj.value 數據的值對應的字段名稱 例如 'value'
* @param obj.label 數據的說明對應的字段名稱 例如 'label'
* @param obj.data 當前傳入的數據值
* @return name 返回當前傳入值在數組中對應的名字
*/
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. 對請求失敗的HTTP狀態碼作處理
說多了都是淚，以前公司接口返回數據，一開始沒有作異常處理，而後在使用的時候一旦出現什麼問題頁面上就是一大堆的英文，很長很長一串，或者是出現問題了不返回錯誤緣由，而後說影響用戶體驗，可是後端又不作異常處理，因而就寫了一個關於http狀態碼的處理。根據返回的狀態碼頁面上顯示對應的提示內容，不過感受稍微正常的流程都用不上這個，哈哈數組
/**
* 對請求失敗的HTTP狀態嗎作處理
* @param {Number} code HTTP狀態碼
* @param {String} message 錯誤提示
* @return message 返回處理過的提示信息
*/
requestError: (code, message) => {
let statusCode = (code + '').replace(/[^0-9]+/g, '') - 0
switch (statusCode) {
case 400:
return 'Bad Request (錯誤的請求)'
case 401:
return 'Unauthorized (請求要求身份驗證)'
case 403:
return 'Forbidden (服務器拒絕請求)'
case 404:
return 'NOT Found (服務器找不到請求的資源)'
case 405:
return 'Bad Request (禁用請求中指定的方法)'
case 406:
return 'Not Acceptable (沒法使用請求的內容特性響應請求的網頁)'
case 407:
return 'Proxy Authentication Required (須要代理受權)'
case 408:
return 'Request Timed-Out (服務器等候請求時發生超時)'
case 409:
return 'Conflict (服務器在完成請求時發生衝突。服務器必須在響應中包含有關衝突的信息)'
case 410:
return 'Gone (請求的資源已被永久刪除)'
case 411:
return 'Length Required (服務器不接受不含有效內容長度標頭字段的請求)'
case 412:
return 'Precondition Failed (未知足前提條件)'
case 413:
return 'Request Entity Too Large (請求實體過大)'
case 414:
return 'Request, URI Too Large (請求的 URI 過長)'
case 415:
return 'Unsupported Media Type (不支持的媒體類型)'
case 429:
return '您的操做過於頻繁,請稍後重試'
case 500:
return 'Internal Server Error (服務器內部錯誤)'
case 501:
return 'Not Implemented (還沒有實施)'
case 502:
return 'Bad Gateway (錯誤網關)'
case 503:
return 'Server Unavailable (服務不可用)'
case 504:
return 'Gateway Timed-Out (網關超時)'
case 505:
return 'HTTP Version not supported (HTTP 版本不受支持)'
default:
return message
}
},
3. 傳入時間戳，轉換指定的時間格式
這個是本人用的很是多的一個函數，平時常常須要對時間處理，就只須要傳入時間戳或者時間格式的字符串，而後指定要轉換的時間格式，就能夠了，很方便瀏覽器
用法示例：switchTime(new Date()) // 傳入當前時間，默認返回當時時間，格式爲 YYYY-MM-DD hh:mm:ss
switchTime('2018-11-10', 'YYYY.MM.DD') // 2018.11.10
/**
* 傳入時間戳（或者時間格式的數據），轉換指定的時間格式
* @param {Number} val 時間戳（或者時間格式的數據）
* @param {String} dateType 要獲得的時間格式 例如 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') => {
// 將字符串轉換成數字
let timeStamp, dateStr, str
timeStamp = +new Date(val)
// 若是轉換成數字出錯
if (!timeStamp) {
return val
}
// 獲得時間字符串
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. 瀏覽器打開新窗口
在平時開發中，必定會有這樣的需求，打開新窗口。可是用window.open的方式每每會碰到被瀏覽器攔截的問題，因此能夠用a標籤經過超連接的方式打開新窗口。
每每在下載文件的時候也會用到這個方法。不過下載文件分爲幾種狀況，一種是直接訪問一個地址，瀏覽器會自動解析而且下載，還有一種狀況就是後端返回的是一個文件，這個時候須要先在響應類型中加上blob處理以後，再去處理。這種狀況下訪問解析後的地址，每每是打開一個新窗口並訪問，並不會自動下載，而須要下載的話須要給a標籤再加上一個download屬性。服務器
用法示例：openWindow('https://www.baidu.com') // 默認打開方式爲新窗口, id爲open
/**
* a模擬window.open，不會被瀏覽器攔截
* @param {String} url a標籤打開的地址
* @param {String} id a標籤的ID
* @param {String} targetType a標籤點擊打開的方式（當前頁面打開仍是新窗口打開）
*/
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. 將有層級關係的列表轉換成樹狀數據
不知道你們碰到樹狀結構的狀況，可是本人開發的時候，由於開發的平臺類的項目較多，因此常常碰到樹狀的數據結構。
之前都是叫後端直接返回樹狀數據的，可是後端好像也不喜歡處理這樣的數據，就本身寫了一個方法。
傳入有層級關係的列表數據，而後根據定義的參數，處理成樹狀的數據結構。數據結構
用法示例：let arr = [{id: 1, pid: 0, name: '一級'}, {id: 2, pid: 1, name: '二級'}],
arr1 = getTreeArr({key: 'id', pKey: 'pid', rootPValue: 0, data: arr})
獲得的數據爲:
arr1 = [
{id: 1, pid: 0, name: '一級', children: [{id: 2, pid: 1, name: '二級', children: []}]
}
]
/**
* 將一級的數據結構處理成樹狀數據結構
* @param {Object} obj {key, pKey, data}
* @param obj.key 字段名稱 好比id
* @param obj.pKey 父字段名稱 好比 pid
* @param obj.rootPValue 根節點的父字段的值
* @param obj.data 須要處理的數據
* @return {Array} arr
*/
getTreeArr: (obj) => {
if (!Array.isArray(obj.data)) {
console.log('getTreeArr=>請傳入數組')
return []
}
let arr = obj.data, arr1 = []
// 將數據處理成數狀結構
arr.forEach(item => {
let index = 0
item.children = []
arr.forEach(item1 => {
// 獲得樹結構關係
if (item[obj.key] === item1[obj.pKey]) {
item.children.push(item1)
}
// 判斷根節點
if (item1.id !== item.pid) {
index++
}
// 傳入根節點，根據傳入的根節點組成樹結構
if (rootPValue in obj && item[obj.pKey] === obj.rootPValue) {
arr1.push(item)
}
})
// 沒傳入根節點，根據當前數據結構獲得根節點
if (!(rootPValue in obj) && index === arr.length) {
arr1.push(item)
}
})
return arr1
}
6. 佔位顯示
寫vue組件的時候，老是習慣用對象去作參數，由於以爲把參數變成對象的形式維護起來會很是方便，每次增長參數的時候只須要在對象中加上屬性，接受的地方對屬性作處理就行了。
可是vue組件的話，Object是不能設置默認值的，沒有默認值的話，讀取對象的屬性即是一個錯誤的語法，因此就寫了一個佔位顯示的方法，好比app
用法示例：showData(obj, 'name', '名字') // 當obj未傳入的時候顯示 ‘名字’, 傳入後顯示爲 obj.name
/**
* 用來判斷對象不存在是，顯示的字段數據
* @param {Object} obj 對象
* @param {String} key 要顯示的屬性
* @param {String} staticName 屬性不存在時顯示的值
*/
showData (obj, key, staticName) {
if (!obj) {
obj = {}
}
if (obj && obj[key]) {
return obj[key]
} else {
return staticName
}
}
7. 數組(對象數組去重)
- 使用和參數說明
用法示例：handleRepeatArr({data: [1 , 1 ,1]}) // [1]
handleRepeatArr({data: [{name: 1}, {name: 1}], key: 'name'}) // [{name: 1}]
/**
- 數組去重
- @param {Array} data 要去重的數組
- @param {String} key 做爲去重依據的字段 (處理對象數組時須要傳入)
- @return arr 返回處理後的數據
*/
- 1.遞歸去重(數據沒法保持以前的排序)
handleRepeatArr ({data, key}) {
if (!Array.isArray(data)) {
console.log('請傳入數組')
return
}
// 先對數據作排序處理
data = data.sort((item, item1) => {
if (key) {
return item[key] - item1[key]
}
return item - item1
})
// 遞歸去重
function getData (index) {
if (index >= 1) {
// 判斷當前數據和下一條數據是否相等
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.根據對象的屬性不一樣去重 (推薦使用)
handleRepeatArr ({data, key}) {
if (!Array.isArray(data)) {
console.log('請傳入數組')
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 (適合處理數組，不適合處理對象數組)
handleRepeatArr ({data, key}) {
if (!Array.isArray(data)) {
console.log('請傳入數組')
return
}
let arr = []
data.forEach((item, index) => {
// 若是當前元素在以後沒有出現過(後面出現的數據會保留)
// let result = data.indexOf(item, index + 1)
// 若是當前元素在以前沒有出現過(前面出現的數據會保留)
let result = index === 0 ? -1 : data.lastIndexOf(item, index - 1)
if (result === -1) {
arr.push(item)
}
})
return arr
}
- 4.雙層循環去重 （佔用內存高）
handleRepeatArr ({data, key}) {
if (!Array.isArray(data)) {
console.log('請傳入數組')
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
}
相關文章
- 1. 前端經常使用的 59 個工具類【持續更新】
- 2. Java經常使用工具類--持續更新中
- 3. 經常使用sql（持續更新中......）
- 4. Java基礎——經常使用方法函數（持續更新中）
- 5. 總結 js 業務中經常使用函數（持續更新。。。）
- 6. 經常使用js函數收集（持續更新中----）
- 7. Oracle經常使用函數——持續更新中
- 8. 經常使用的工具類網站推薦-持續更新中...
- 9. SQL Server 經常使用函數使用方法(持續更新)
- 10. 碼農經常使用/好用工具【持續更新】
- 更多相關文章...
- • ADO 更新記錄 - ADO 教程
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • PHP開發工具
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
