一塊兒Polyfill系列：讓Date識別ISO 8601日期時間格式

時間  2019-11-11
標籤 一塊兒 polyfill 系列 date 識別 iso 8601日 時間 格式 欄目 數據壓縮 简体版
原文   原文鏈接

1、什麼是ISO 8601日期時間格式javascript

  ISO 8601是國際標準化組織制定的日期時間表示規範，全稱是《數據存儲和交換形式·信息交換·日期和時間的表示方法》。html

  示例：java

  1. 2014-12-12T00:00:00.000Zapp

  2. 2014-12-12T00:00:00.000+08函數

  3. 2014-12-12T00:00:00.000+0800this

  4. 2014-12-12T00:00:00.000+08:00url

  5. 2004-W17-3es5

  6. 0001-165spa

詳細說明請參考度娘：http://baike.baidu.com/link?url=Qr7NLClAyUHihOCl1DK6DQL_gMw5rk3euXdiz3zt6M9ORGFS2XBy7LHmcO2ID-izprototype

 

2、Javascript中實現的ISO 8601日期時間格式

  度娘後你們應該對ISO 8061有必定的瞭解了吧。ISO 8601的內容十分豐富，惋惜Javascript僅僅實現一小部分而已，不過這一部分就夠咱們用了。

  javascript支持的ISO 8061格式以下：

   1. 2014-12-12T00:00:00.000Z

　2. 2014-12-12T00:00:00.000+0800

   3. 2014-12-12T00:00:00.000+08:00

 

2、ES5中涉及ISO 8061日期時間格式的方法

　1.  Date.parse({String} datetime) ：接收ISO 8061和GMT的日期時間格式字符串（根據格式內容被識別爲0時區或其餘時區的日期時間），返回入參所表示的0時區日期時間距離1970年1月1日的毫秒數。

   2.  Date.prototype.toISOString() ：返回當前Date類型對象0時區的ISO 8061日期時間格式字符串。形如：2014-12-12T00:00:00.000Z

   3.  new Date({String} datetime) ：構造函數的入參在ES5中新增接收ISO 8061格式字符串，其實內部就是調用 Date.parse({String} datetime) 進行轉換。

   4.  Date.prototype.toJSON() ：返回當前Date類型對象0時區的ISO 8061日期時間格式字符串。形如：2014-12-12T00:00:00.000Z。

 

3、認識ES3下的Date類型

   1. 做爲構造函數使用

/**
  * 第一種入參模式：無入參，實例化當前日期時間的Date對象
  */
var date1 = new Date();
 
/**
  * 第二種入參模式：短日期格式字符串入參，實例化當前時區日期時間的Date對象
  */
var date2 = new Date('2014/12/3');
 
/**
  * 第三種入參模式：長日期格式字符串入參，實例化當前時區日期時間的Date對象
  */
var date3 = new Date('Aug 3, 2014');

/**
  * 第四種入參模式：GMT日期格式字符串入參，實例化指定時區日期時間的Date對象
  */
var date4 = new Date('Tue May 25 2014 00:00:00 GMT +0800');

/**
  * 第五種入參模式：GMT日期格式字符串入參，實例化0時區日期時間的Date對象
  */
var date5 = new Date('Tue May 25 2014 00:00:00 GMT');

/**
  * 第六種入參模式：入參依次爲年、月、日、時、分、秒和毫秒的數值（其中僅年和月爲必填項，日默認值爲1，其餘默認值爲0），實例化當前時區日期時間的Date對象
  */
var date6 = new Date(2014,12,2,1,1,1,1);

   2. 做爲函數使用

// 不管入參是什麼，總返回當前時區的GMT日期時間格式的字符串
var dateStr = Date();

   3. 類成員

     3.1.  Date.parse({String} datetime) ：接收GMT的日期時間格式字符串（根據GMT格式內容被識別爲0時區或其餘時區的日期時間），返回入參所表示的0時區日期時間距離1970年1月1日的毫秒數

     3.2.  Date.UTC(Y,M,d,H,m,s,ms) ：設置0時區的日期時間，返回入參所表示的0時區日期時間距離1970年1月1日的毫秒數

   4. 部分實例成員

　　4.1.  Date.prototype.toGMTString() ：返回當前Date對象的GMT日期時間格式字符串（僅爲了向後兼容而已）

　　4.2.  Date.prototype.toUTCString() ：返回當前Date對象的GMT日期時間格式字符串（建議使用該方法）

 

4、一塊兒Polyfill

    if (!Date.prototype.toISOString){
        var isLeapYear = function(year){
            return (year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0);
        };
        var operHoursAndMinutes = {}; 
        operHoursAndMinutes['+'] = function(minusHours, minusMinutes, year, month, date, hours, minutes, seconds, milliseconds){
            var ret = {};
            minutes -= minusMinutes;
            hours -= minusHours;
            if (minutes < 0){
                hours -= 1;
                minutes += 60;
            }
            if (hours < 0 ){
                --date;
                hours += 24;
                if (date < 0){
                    --month;
                    if (month < 0){
                        --year;
                        month = 11;
                    }
                    if (month % 2 === 0){
                        date += 31;    
                    }
                    else if (month === 1)
                    {
                        date += isLeapYear(year) ? 29 : 28;
                    }
                    else{
                        date += 30;
                    }

                    if (month < 0){
                        --year;
                        month += 12;
                    }
                }
            }

            ret.year = year;
            ret.month = month;
            ret.date = date;
            ret.hours = hours;
            ret.minutes = minutes;
            ret.seconds = seconds;
            ret.milliseconds = milliseconds;

            return ret;
        };
        operHoursAndMinutes['-'] = function(addHours, addMinutes, year, month, date, hours, minutes, seconds, milliseconds){
            var ret = {};

            minutes += addMinutes;
            hours += addHours;
            if (minutes >= 60){
                hours += 1;
                minutes -= 60;
            }
            if (hours >=24){
                ++date;
                hours -= 24;
                var dateOfCurrMonth = month % 2 === 0 ? 31 : (month === 1 ? (isLeapYear(year) ? 29 : 28) : 30);
                if (date >= dateOfCurrMonth){
                    ++month;
                    date -= dateOfCurrMonth;

                    if (month >= 12){
                        ++year;
                        month -= 12;
                    }
                }
            }

            ret.year = year;
            ret.month = month;
            ret.date = date;
            ret.hours = hours;
            ret.minutes = minutes;
            ret.seconds = seconds;
            ret.milliseconds = milliseconds;

            return ret;
        };
        var regExp = new RegExp('^(\\d{4,4})'
                + '-((?:0[123456789]|1[012]))'
                + '-((?:0[123456789]|[12]\\d|3[01]))'
                + 'T'
                + '((?:[01]\\d|2[0123]))'
                + ':([012345]\\d)'
                + ':([012345]\\d)'
                + '(?:.(\\d{3}))?'
                + '(Z|[+-](?:[01]\\d|2[0123]):?[012345]\\d)$');
        var parseISOString2UTC = function(ISOString){
            var ret = {};
            var year = Number(RegExp.$1)
                , month = Number(RegExp.$2) - 1
                , date = Number(RegExp.$3)
                , hours = Number(RegExp.$4)
                , minutes = Number(RegExp.$5)
                , seconds = Number(RegExp.$6)
                , offset = RegExp.$8
                , milliseconds;
            milliseconds = (milliseconds = Number(RegExp.$7), !isNaN(milliseconds) && milliseconds || 0);

            if (offset === 'Z'){     
                ret.year = year;
                ret.month = month;
                ret.date = date;
                ret.hours = hours;
                ret.minutes = minutes;
                ret.seconds = seconds;
                ret.milliseconds = milliseconds;
            } 
            else if (typeof offset !== 'undefined'){     
                var symbol = offset.charAt(0);
                var offsetHours = Number(offset.substring(1,3));     
                var offsetMinutes = Number(offset.substring(offset.length > 5 ? 4 : 3));

                ret = operHoursAndMinutes[symbol](offsetHours, offsetMinutes, year, month, date, hours, minutes, seconds, milliseconds);
            }

            return ret;
        };
        
        var _nativeDate = Date;
        Date = function(Y,M,D,H,m,s,ms){
            var ret, len = arguments.length;
            if (!(this instanceof Date)){
                ret = _nativeDate.apply(null, arguments);
            }
            else if (len === 1 && typeof arguments[0] === 'string' && regExp.test(arguments[0])){
                var tmpRet;
                try{
                    tmpRet = parseISOString2UTC();
                }
                catch(e){
                    console && console.log('Invalid Date');
                    return void 0;
                }

                ret = new _nativeDate(_nativeDate.UTC(tmpRet.year, tmpRet.month, tmpRet.date, tmpRet.hours, tmpRet.minutes, tmpRet.seconds, tmpRet.milliseconds));
            }
            else if (typeof arguments[0] === 'string'){
                ret = new _nativeDate(arguments[0]);
            }
            else{
                ret = len >= 7 ? new _nativeDate(Y, M, D, H, m, s, ms)
                    : len >= 6 ? new _nativeDate(Y, M, D, H, m, s)
                    : len >= 5 ? new _nativeDate(Y, M, D, H, m)
                    : len >= 4 ? new _nativeDate(Y, M, D, H)
                    : len >= 3 ? new _nativeDate(Y, M, D)
                    : len >= 2 ? new _nativeDate(Y, M)
                    : len >= 1 ? new _nativeDate(Y)
                    : new _nativeDate();
            }

            return ret;
        };
        Date.prototype = _nativeDate.prototype;
        Date.prototype.constructor = Date;

        var _pad = function(num){
            if (num < 10){
                return '0' + num;
            }
            return num;
        };
        var _padMillisecond = function(num){
            if (num < 10){
                return '00' + num;
            }
            else if (num < 100){
                return '0' + num;
            }
            return num;
        };
        Date.prototype.toISOString = function(){
                return [this.getUTCFullYear(), '-', _pad(this.getUTCMonth() + 1), '-', _pad(this.getUTCDate()), 'T'
                    , _pad(this.getUTCHours()), ':', _pad(this.getUTCMinutes()), ':', _pad(this.getUTCSeconds()), '.', _padMillisecond(this.getUTCMilliseconds()), 'Z'].join('');    
            };

        // 複製可枚舉的類成員
        for (var clsProp in _nativeDate){
            if (_nativeDate.hasOwnProperty(clsProp)){
                Date[clsProp] = _nativeDate[clsProp];
            }
        }
        // 複製不可枚舉的類成員
        var innumerableMems = ['UTC'];
        for (var i = 0, clsProp; clsProp = innumerableMems[i++];){
            Date[clsProp] = _nativeDate[clsProp];
        }

        Date.parse = function(str){
            if (['string', 'number'].indexOf(typeof str) === -1) return NaN;
            
            var isMatch = regExp.test(str), milliseconds = 0;
            if (!isMatch) return _nativeDate.parse(str);

            var tmpRet = parseISOString2UTC();

            return _nativeDate.UTC(tmpRet.year, tmpRet.month, tmpRet.date, tmpRet.hours, tmpRet.minutes, tmpRet.seconds, tmpRet.milliseconds);
        };
        Date.now = Date.now 
            || function(){
                return +new this();
            };
    }

 

5、總結

  上述實現相對es5-shim來說考慮的地方仍有欠缺，這源於我對日期時間格式的理解不夠完整，所以請你們多多見諒。

 

原創文章，轉載請註明來自^_^肥仔John[http://fsjohnhuang.cnblogs.com]

本文地址：http://www.cnblogs.com/fsjohnhuang/p/3731251.html （本篇完）

若是您以爲本文的內容有趣就掃一下吧！捐贈互勉！
  

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程