移動端中踩過的關於日曆&時間的坑

① 情景-在移動端日曆中，選擇日期並轉成時間戳，在iOS端莫名失效

日曆相信是你們都作過的小玩意，它有多是HTML5自帶的也多是本身作的，同時取到的時間格式也是千奇百怪的。不廢話了，咱們直接上代碼。

let a = Date.parse('2017-1-1');
console.log(a);
let b = Date.parse('2017-01-1');
console.log(b);
let c = Date.parse('2017-01-01');
console.log(c);

let a1 = Date.parse('2017/1/1');
console.log(a1);
let b1 = Date.parse('2017/01/1');
console.log(b1);
let c1 = Date.parse('2017/01/01');
console.log(c1);
複製代碼

這些都是咱們常見的時間格式，不管是從後端取得仍是咱們前端轉換而來的。那麼你們知道每一個console的結果是什麼嗎？

let a = Date.parse('2017-1-1');
console.log(a);
//chrome瀏覽器--1483200000000
//Android微信端(類Android內置瀏覽器)--1483200000000
//iOS微信端(類Safari瀏覽器)--NAN
let b = Date.parse('2017-01-1');
console.log(b);
//chrome瀏覽器--1483200000000
//Android微信端(類Android內置瀏覽器)--1483200000000
//iOS微信端(類Safari瀏覽器)--NAN
let c = Date.parse('2017-01-01');
console.log(c);
//chrome瀏覽器--1483228800000
//Android微信端(類Android內置瀏覽器)--1483228800000
//iOS微信端(類Safari瀏覽器)--1483228800000

let a1 = Date.parse('2017/1/1');
console.log(a1);
//chrome瀏覽器--1483200000000
//Android微信端(類Android內置瀏覽器)--1483200000000
//iOS微信端(類Safari瀏覽器)--1483200000000
let b1 = Date.parse('2017/01/1');
console.log(b1);
//chrome瀏覽器--1483200000000
//Android微信端(類Android內置瀏覽器)--1483200000000
//iOS微信端(類Safari瀏覽器)--1483200000000
let c1 = Date.parse('2017/01/01');
console.log(c1);
//chrome瀏覽器--1483200000000
//Android微信端(類Android內置瀏覽器)--1483200000000
//iOS微信端(類Safari瀏覽器)--1483200000000
複製代碼

驚不驚喜！神不神奇！iOS的瀏覽器是沒法解析2017-1-1和2017-01-1(2017-1-01)這兩類格式的日期。因此若是用童鞋們在寫日曆組件的時候發現安卓和iOS行爲不一致的時候不妨看看日期格式那邊是否存在問題。

總的來講，在移動端中使用'/'做爲日期分割是最保險的，可是這通常與前端展現的指望不一，這時候就改取捨一下，是用多的代碼量來提升項目容錯率仍是嚴格控制本身的日期格式...

②項目引入了"完美時間插件moment.js"可是它又粗又大...

也許有些童鞋還不太瞭解moment，能夠點擊傳送門看看它的文檔。

不得不說它的功能確實很強大，基本能夠知足大部分項目對時間顯示或轉換的各類需求，它甚至還內置了語言包，只能說功能很強大而且用途很普遍，看看GitHub上的star就大概能感覺到它的地位了。

它這麼好用，用起來簡單粗暴，又粗又大又有什麼所謂呢？

其實否則，由於你沒有在項目打包以後總體的分析項目bundle的佔比。若是你是用webpack構建項目的話能夠選擇使用webpack-bundle-analyzer來分析一下你的包體結構，若是在項目中引入了moment，你會發現它真的很大...

不管是站在項目角度仍是用戶角度，我的認爲都不該該草率的使用如此巨大的依賴包。而且，只要咱們靜下來仔細分析一下咱們的項目，會發現，其實咱們對日期時間方面的需求並無想象中的那麼繁雜。

下面我會貼一個本身正在使用的工具類--

//用法--TimeStream(1500614243, 'CN-YMD')
function TimeStream(timestamp, type) {
    let date = new Date(timestamp * 1000);
    let Y = date.getFullYear();
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    let s = date.getSeconds();

    switch (type) {
        case 'YMD': //年-月-日
            return Y + '-' + M + '-' + D;
        case 'MD': //月-日
            return M + '-' + D;
        case 'MD_HM': //月-日
            return M + '-' + D + ' ' + h + ':' + m;
        case 'YMD_HMS': // 月-日 時：分：秒
            return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
        case 'CN_YMD': //x年x月x日
            return Y + '年' + M + '月' + D + '日';
        case 'CN_YMD_HM': //x年x月x日
            return Y + '年' + M + '月' + D + '日' + ' ' + h + ':' + m;
        case 'hm': // 時:分
            return h + ':' + m;
        case '-D': //天數差
            return Math.floor(((timestamp * 1000) - Date.parse(new Date())) / 1000 / 3600 / 24);
        case '-H': //小時差
            return Math.ceil((timestamp * 1000 - Date.parse(new Date())) / 1000 / 3600);
        default: //年-月-日 時:分
            return Y + '-' + M + '-' + D + ' ' + h + ':' + m;
    }
}
複製代碼

這是我正在使用的本身寫的有關時間的工具類，固然它與咱們的項目是密切結合的（其實就咱們的項目而言也只須要這幾種類型的轉換），而且它能夠靈活的根據需求的變化而變化，用法也並不算很麻煩，只要稍做註釋，任何同事均可以隨心使用。

以上工具類確定還有不少別的更優寫法，我只是想借助這個解釋一下爲何我不提倡盲目使用moment(可代入任何又粗又大的依賴)，要知道，在這幾十行代碼誕生以前，咱們用着的是一個Gzip事後還有幾十K的依賴。