一些很實用util工具函式

TigerJin發表於2021-09-09

  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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章