一些很實用util工具函式
1、生成UUID。
儘管前端已有Symbol,但這更多是在於確保物件的屬性唯一,不過有時候也會用到關於生成ID的場景。
const createUUID = () => new Date().getTime().toString(32) + Math.floor(Math.random() * 999999).toString(32);
2、手動實現一個jsonp。
在當下的情況中,解決跨域問題越來越趨向於代理,實際上jsonp也是另一種解決辦法,僅僅將XHR請求變成非XHR請求(即script)。
class dorseyJsonp {
constructor (url, callback) {
let id = this.createRandomId();
window[id] = function (result) {
if(callback){
callback(result);
}
let scriptID = document.querySelector('#' + id);
scriptID.parentNode.removeChild(scriptID);
window[scriptID] = null;
}
let script = document.createElement('script');
script.src = url;
script.id = id;
script.type = 'text/javascript';
document.body.appendChild(script);
}
createRandomId () {
return 'query' + Math.floor(Math.random() * 10000).toString(32) + new Date().getTime().toString(32);
}
}
3、將URL的引數轉化成一個物件。
如:
如輸入:http://www.baidu.com/item.html#hello?pageNo=1&pageSize=30&keyword=hello
輸出:{
pageNo: '1',
pageSize: '30',
keyword: 'hello'
}
看看工具函式:
const getUrlParams = url => {
let arr = url.match(/(?<=[?&]).*?(?=(&|$))/g),
res = {};
arr && arr.length && arr.map(item => res[item.split('=')[0]] = item.split('=')[1]);
return res;
}
console.log(getUrlParams(''));
console.log(getUrlParams(''));
4、日期格式化。
在實際應用的過程中,可能最常見的日期格式就是’2019-11-30 09:00:00’這樣的格式了,但JavaScript中似乎沒有,所以需要我們自己實現。
const fill = num => num >= 10 ? num : ('0' + num);
const format = (date, formatStr) => {
return formatStr.replace('yyyy', date.getFullYear())
.replace('MM', fill(date.getMonth() + 1))
.replace('dd', fill(date.getDate()))
.replace('HH', fill(date.getHours()))
.replace('mm', fill(date.getMinutes()))
.replace('ss', fill(date.getSeconds()));
}
console.log(format(new Date(), 'yyyy年MM月dd日 HH時mm分ss秒'));
return format(new Date(), 'yyyy-MM-dd HH:mm:ss');
5、圖片字首替換
實際應用中,無論是網站,app也好,大型複雜系統也罷,圖片資源一般都儲存在專門最佳化過的ftp伺服器,而資料庫中儲存的實際上僅僅是一串URL,在業務的變遷過程中,有時候會涉及到資源遷移,這樣一般情況下,資料庫的圖片不會儲存IP跟埠或域名,有些設計之初儲存了,則需要我們自行替換。
const changeIPAndPort = pic => pic.replace(/*:d+//g, 'https:172.22.20.25:8080')
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2144/viewspace-2824363/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 前端簡潔並實用的工具類函式封裝前端函式封裝
- gookit/goutil - Go一些常用的工具函式實現、增強、收集和整理Go函式
- jdbc Util 工具類JDBC
- TypeScript魔法堂:函式型別宣告其實很複雜TypeScript函式型別
- 實用函式式 Java (PFJ)簡介函式Java
- php的一些函式PHP函式
- 用匯編實現add函式函式
- Flutter Flame教程11 -- Util 工具Flutter
- [譯] 編寫函式式的 JavaScript 實用指南函式JavaScript
- 介紹幾個程式碼實際開發中很實用的工具
- JDK幾個很實用的工具 jps、jinfo、jstat、jstack、jmap、jconsoleJDKJS
- 用Map+函式式介面來實現策略模式函式模式
- pycuda-一些計算函式函式
- 專案裡的一些小函式函式
- JavaScript 工具函式大全(新)JavaScript函式
- MySQL 日期函式、時間函式在實際場景中的應用MySql函式
- 鴻蒙HarmonyOS實戰-Web元件(前端函式和應用側函式相互呼叫)鴻蒙Web元件前端函式
- 不會用“函式選項模式”的朋友看過來,這麼寫很優雅函式模式
- 一些功能性函式使用整理函式
- 函式實操函式
- 函式柯里化和偏函式應用函式
- 常用啟用函式函式
- 用雲函式快速實現圖片爬蟲函式爬蟲
- 幾個簡單又實用的PHP函式PHP函式
- 用函式正規化實現戰略模式函式模式
- SQL從零到迅速精通【實用函式(2)】SQL函式
- 用listagg函式分組實現列轉行函式
- 函式計算實踐——一個應用案例函式
- 別再說SUM函式很簡單,進來看看吧!函式
- 總結一些常用的陣列函式陣列函式
- 關於虛擬函式的一些理解函式
- 關於 Math.random 的一些函式random函式
- Java 函式式介面 lamada 應用Java函式
- Vue函式式元件的應用Vue函式元件
- 《基於MVC的javascript web富應用開發》中的一些函式MVCJavaScriptWeb函式
- 人工智慧---神經網路啟用函式恆等函式、sigmoid函式、softmax函式詳解人工智慧神經網路函式Sigmoid
- Python - 函式實戰Python函式
- Zepto 原始碼分析 3 - qsa 實現與工具函式設計原始碼函式