基于JavaScript優(yōu)雅的實現(xiàn)一個時間處理插件

更新時間：2025年10月29日 08:29:43 作者：會聯(lián)營的陸遜

這篇文章主要介紹了如何優(yōu)雅地實現(xiàn)一個時間處理插件,包括UMD模式、單例模式的實現(xiàn),以及插件的初始化、方法（如getDate、setDate、format、parse）的定義和使用,文章還涵蓋了格式化標記、解析流程、常見場景和性能優(yōu)化建議,需要的朋友可以參考下

1. UMD 模式解析

1.1 立即執(zhí)行函數(shù) (IIFE)

外層是一個立即執(zhí)行函數(shù)，接收 global 和 factory 兩個參數(shù)。

global 參數(shù)說明：

typeof window !== "undefined" ? window : this;

根據(jù)不同的運行環(huán)境，global 參數(shù)會指向：

瀏覽器環(huán)境：window 對象
Node.js 環(huán)境：global 對象
其他環(huán)境：當前上下文 this

1.2 UMD 模塊定義

通過條件判斷支持多種模塊系統(tǒng)：

if (typeof define === "function" && define.amd) {
  // AMD 模式 (RequireJS)
  define(function () {
    return factory();
  });
} else if (typeof module === "object" && module.exports) {
  // CommonJS 模式 (Node.js)
  module.exports = factory();
} else {
  // 瀏覽器全局變量模式
  global.SurveyTimezone = factory();
}

支持的模塊系統(tǒng)：

AMD：用于 RequireJS 等加載器
CommonJS：用于 Node.js 環(huán)境
全局變量：用于直接在瀏覽器中使用

1.3 工廠函數(shù)解析

工廠函數(shù) factory 返回插件的構造函數(shù)：

function () {
    'use strict';

    // 構造函數(shù)定義
    function SurveyTimezone(options) {
    }

    // 原型方法定義
    SurveyTimezone.prototype = {
        constructor: SurveyTimezone, // 修復 constructor 指向
        version: '1.0.0',
        _init: function () {
        }
    }

    // 返回構造函數(shù)
    return SurveyTimezone;
}

核心組成部分：

嚴格模式：使用 'use strict' 確保代碼質量
構造函數(shù)：定義 SurveyTimezone 類
原型方法：通過原型鏈添加共享方法
返回值：導出構造函數(shù)供外部使用

1.4 執(zhí)行流程

UMD 模塊的加載和執(zhí)行流程：

立即執(zhí)行：代碼加載后立即執(zhí)行 IIFE
環(huán)境檢測：檢測當前支持的模塊系統(tǒng)（AMD / CommonJS / 全局變量）
工廠調用：執(zhí)行 factory() 函數(shù)，返回 SurveyTimezone 構造函數(shù)
模塊導出：根據(jù)環(huán)境將構造函數(shù)導出到相應位置

(function (global, factory) {
    // 環(huán)境檢測和模塊導出邏輯
}(typeof window !== "undefined" ? window : this, function () {
    // 工廠函數(shù)：創(chuàng)建并返回構造函數(shù)
}));

2. 單例模式實現(xiàn)

2.1 為什么使用單例模式？

在時區(qū)處理插件中，我們通常只需要一個全局實例來管理配置和狀態(tài)：

避免重復實例：防止多次實例化造成的內存浪費
全局狀態(tài)管理：統(tǒng)一管理時區(qū)配置、數(shù)據(jù)映射表等
配置一致性：確保整個應用使用相同的時區(qū)設置

2.2 單例模式實現(xiàn)

2.2.1 私有實例存儲

// 閉包中的私有變量，存儲單例實例
var instance = null;

2.2.2 構造函數(shù)實現(xiàn)

function SurveyTimezone(options) {
    // 1. 如果已存在實例，直接返回
    if (instance) {
        return instance;
    }
    
    // 2. 確保通過 new 調用
    if (!(this instanceof SurveyTimezone)) {
        return new SurveyTimezone(options);
    }
    
    // 3. 初始化配置
    this.options = options || {};
    
    // 4. 保存單例實例
    instance = this;
    
    // 5. 執(zhí)行初始化
    this._init();
    
    return instance;
}

實現(xiàn)要點：

實例檢查：首次檢查是否已存在實例，有則直接返回
new 檢查：確保即使不用 new 關鍵字也能正常工作
配置初始化：保存?zhèn)魅氲呐渲眠x項
實例保存：將當前實例保存到閉包變量中
初始化執(zhí)行：調用內部初始化方法

2.2.3 靜態(tài)方法

/**
 * 獲取單例實例
 */
SurveyTimezone.getInstance = function (options) {
    if (!instance) {
        instance = new SurveyTimezone(options);
    }
    return instance;
}

/**
 * 重置單例（用于測試）
 */
SurveyTimezone.resetInstance = function () {
    instance = null;
}

2.3 使用方式

方式一：使用 new 關鍵字

const instance1 = new SurveyTimezone({ timezone: 'Asia/Shanghai' });
const instance2 = new SurveyTimezone({ timezone: 'America/New_York' });

console.log(instance1 === instance2); // true（返回同一個實例）

方式二：使用 getInstance 靜態(tài)方法

const instance = SurveyTimezone.getInstance({ timezone: 'Asia/Shanghai' });

方式三：不使用 new（自動轉換）

const instance = SurveyTimezone({ timezone: 'Asia/Shanghai' });

2.4 單例模式的優(yōu)勢

優(yōu)勢	說明
內存優(yōu)化	只創(chuàng)建一個實例，減少內存占用
狀態(tài)一致	全局共享同一個實例，避免狀態(tài)不一致
易于管理	集中管理配置和數(shù)據(jù)
防止沖突	避免多個實例之間的配置沖突

2.5 完整示例

// 第一次創(chuàng)建實例
const timezone1 = new SurveyTimezone({ 
    timezone: 'Asia/Shanghai',
    locale: 'zh-CN'
});

// 第二次嘗試創(chuàng)建（返回第一次的實例）
const timezone2 = new SurveyTimezone({ 
    timezone: 'America/New_York'  // 這個配置會被忽略
});

console.log(timezone1 === timezone2);        // true
console.log(timezone1.options.timezone);     // 'Asia/Shanghai'

// 重置單例后可以創(chuàng)建新實例
SurveyTimezone.resetInstance();
const timezone3 = new SurveyTimezone({ 
    timezone: 'Europe/London'
});

console.log(timezone1 === timezone3);        // false
console.log(timezone3.options.timezone);     // 'Europe/London'

2.6 初始化時傳入日期時間

從 v1.0.0 開始，SurveyTimezone 支持在初始化時傳入日期時間字符串或時間戳，使其更加靈活實用。

2.6.1 初始化方式

構造函數(shù)簽名：

new SurveyTimezone(input, format)

參數(shù)說明：

參數(shù)	類型	必填	說明
`input`	`string\|number\|Date\|Object`	?	日期時間字符串、時間戳、Date對象或配置對象
`format`	`string`	?	日期格式（當 input 為字符串時使用）

2.6.2 初始化示例

方式1：傳入日期字符串

const tz = new SurveyTimezone('2025-10-28 14:30:45');
console.log(tz.getDate());      // Date 對象
console.log(tz.format());       // '2025-10-28 14:30:45'

方式2：傳入時間戳

const tz = new SurveyTimezone(1698484245000);
console.log(tz.getDate());      // Date 對象
console.log(tz.format());       // 對應的日期時間字符串

方式3：傳入日期字符串和格式

const tz = new SurveyTimezone('28/10/2025', 'DD/MM/YYYY');
console.log(tz.format('YYYY-MM-DD'));  // '2025-10-28'

方式4：傳入 Date 對象

const tz = new SurveyTimezone(new Date());
console.log(tz.format());       // 當前時間

方式5：傳入配置對象

const tz = new SurveyTimezone({
    date: '2025-10-28 14:30:45',
    timezone: 'Asia/Shanghai',
    locale: 'zh-CN'
});
console.log(tz.getDate());      // Date 對象
console.log(tz.options);        // { date: '...', timezone: '...', locale: '...' }

方式6：不傳參數(shù)（默認當前時間）

const tz = new SurveyTimezone();
console.log(tz.format());       // 當前時間

2.6.3 新增實例方法

getDate() - 獲取日期對象

const tz = new SurveyTimezone('2025-10-28 14:30:45');
const date = tz.getDate();
console.log(date);  // Date 對象

setDate() - 設置日期（支持鏈式調用）

const tz = new SurveyTimezone();

// 設置新日期
tz.setDate('2025-12-25 00:00:00');
console.log(tz.format());  // '2025-12-25 00:00:00'

// 鏈式調用
const result = tz.setDate('2026-01-01').format('YYYY/MM/DD');
console.log(result);  // '2026/01/01'

2.6.4 format 方法增強

現(xiàn)在 format 方法可以在不傳參數(shù)時格式化實例的日期：

const tz = new SurveyTimezone('2025-10-28 14:30:45');

// 格式化實例日期（無參數(shù)）
tz.format();                    // '2025-10-28 14:30:45'（默認格式）

// 格式化實例日期（指定格式）
tz.format('YYYY年MM月DD日');    // '2025年10月28日'

// 格式化指定日期
tz.format(new Date(), 'YYYY-MM-DD');  // 格式化其他日期

2.6.5 完整工作流示例

// 場景：接收用戶輸入 → 解析 → 處理 → 格式化輸出

// 1. 用戶輸入歐洲格式日期
const userInput = '28/10/2025';

// 2. 創(chuàng)建實例并解析
const tz = new SurveyTimezone(userInput, 'DD/MM/YYYY');

// 3. 驗證解析結果
console.log(tz.getDate());  // Date 對象

// 4. 格式化為不同格式輸出
console.log(tz.format('YYYY-MM-DD'));      // '2025-10-28'（ISO格式）
console.log(tz.format('YYYY年MM月DD日'));  // '2025年10月28日'（中文）
console.log(tz.format('MMM DD, yyyy'));    // 'Oct 28, 2025'（英文）

// 5. 修改日期并重新格式化
tz.setDate('2025-12-25');
console.log(tz.format('YYYY年MM月DD日'));  // '2025年12月25日'

2.6.6 與單例模式的配合

由于采用單例模式，第一次初始化時傳入的日期會被保存，后續(xù)創(chuàng)建實例會返回同一個實例：

// 第一次創(chuàng)建，指定日期
const tz1 = new SurveyTimezone('2025-10-28 14:30:45');
console.log(tz1.format());  // '2025-10-28 14:30:45'

// 第二次創(chuàng)建，嘗試傳入不同日期（但返回的是同一個實例）
const tz2 = new SurveyTimezone('2026-01-01 00:00:00');
console.log(tz2.format());  // '2025-10-28 14:30:45'（仍然是第一次的日期）
console.log(tz1 === tz2);   // true（同一個實例）

// 如果需要新的日期，可以使用 setDate 方法
tz2.setDate('2026-01-01 00:00:00');
console.log(tz2.format());  // '2026-01-01 00:00:00'
console.log(tz1.format());  // '2026-01-01 00:00:00'（tz1 也變了，因為是同一個實例）

// 或者先重置單例
SurveyTimezone.resetInstance();
const tz3 = new SurveyTimezone('2026-01-01 00:00:00');
console.log(tz3.format());  // '2026-01-01 00:00:00'（新實例，新日期）

2.6.7 錯誤處理

當傳入無效日期時，會自動使用當前時間：

// 無效日期字符串
const tz1 = new SurveyTimezone('invalid date');
console.log(tz1.getDate());  // 當前時間的 Date 對象

// 重置單例
SurveyTimezone.resetInstance();

// 無效時間戳
const tz2 = new SurveyTimezone(NaN);
console.log(tz2.getDate());  // 當前時間的 Date 對象

2.6.8 方法對比表

方法	類型	參數(shù)	返回值	說明
`new SurveyTimezone(input, format)`	構造函數(shù)	日期輸入	實例	創(chuàng)建實例并初始化日期
`getDate()`	實例方法	-	Date	獲取實例的日期對象
`setDate(input, format)`	實例方法	日期輸入	this	設置實例日期，支持鏈式調用
`format(date, format)`	實例方法	可選	string	格式化日期（無參數(shù)時格式化實例日期）
`parse(dateString, format)`	實例方法	必填	Date\|null	解析日期字符串

3. format 方法詳解

3.1 方法說明

format 方法用于格式化日期對象，兼容 dayjs 和 laydate 兩種流行的日期格式化風格。

方法簽名：

// 原型方法
instance.format(date, format)

// 靜態(tài)方法（向后兼容）
SurveyTimezone.format(date, format)

參數(shù)：

參數(shù)	類型	必填	默認值	說明
`date`	`Date`	?	-	要格式化的 JavaScript Date 對象
`format`	`string`	?	`'YYYY-MM-DD HH:mm:ss'`	格式化模板字符串

返回值：

類型：string
說明：格式化后的日期字符串，無效日期返回空字符串 ''

3.2 支持的格式化標記

3.2.1 年份標記

標記	說明	示例輸出	兼容性
`YYYY`	四位年份	2025	dayjs
`yyyy`	四位年份	2025	laydate
`YY`	兩位年份	25	dayjs
`y`	兩位年份	25	laydate

3.2.2 月份標記

標記	說明	示例輸出	兼容性
`MMM`	英文月份縮寫	Jan, Feb, Mar...	通用
`MM`	兩位月份（補零）	01, 02... 12	通用
`M`	月份（不補零）	1, 2... 12	通用

3.2.3 日期標記

標記	說明	示例輸出	兼容性
`DD`	兩位日期（補零）	01, 02... 31	dayjs
`dd`	兩位日期（補零）	01, 02... 31	laydate
`D`	日期（不補零）	1, 2... 31	dayjs
`d`	日期（不補零）	1, 2... 31	laydate

3.2.4 時間標記

標記	說明	示例輸出	兼容性
`HH`	24小時制小時（補零）	00, 01... 23	通用
`H`	24小時制小時（不補零）	0, 1... 23	通用
`mm`	分鐘（補零）	00, 01... 59	通用
`m`	分鐘（不補零）	0, 1... 59	通用
`ss`	秒（補零）	00, 01... 59	通用
`s`	秒（不補零）	0, 1... 59	通用

3.2.5 毫秒標記

標記	說明	示例輸出	兼容性
`SSS`	三位毫秒	000, 001... 999	dayjs

3.3 使用示例

3.3.1 基礎用法

const tz = new SurveyTimezone();
const now = new Date('2025-10-28 14:30:45.123');

// 默認格式
tz.format(now);  // '2025-10-28 14:30:45'

// 自定義格式
tz.format(now, 'YYYY/MM/DD');  // '2025/10/28'
tz.format(now, 'HH:mm:ss');    // '14:30:45'

3.3.2 dayjs 風格格式

const tz = new SurveyTimezone();
const now = new Date('2025-10-28 14:30:45.123');

tz.format(now, 'YYYY-MM-DD HH:mm:ss');      // '2025-10-28 14:30:45'
tz.format(now, 'YYYY-MM-DD HH:mm:ss.SSS');  // '2025-10-28 14:30:45.123'
tz.format(now, 'YY/M/D H:m:s');             // '25/10/28 14:30:45'
tz.format(now, 'MMM DD, YYYY');             // 'Oct 28, 2025'

3.3.3 laydate 風格格式

const tz = new SurveyTimezone();
const now = new Date('2025-10-28 14:30:45');

tz.format(now, 'yyyy-MM-dd HH:mm:ss');  // '2025-10-28 14:30:45'
tz.format(now, 'yyyy年MM月dd日');        // '2025年10月28日'
tz.format(now, 'y-M-d H:m:s');          // '25-10-28 14:30:45'
tz.format(now, 'dd/MM/yyyy');           // '28/10/2025'

3.3.4 中文日期格式

const tz = new SurveyTimezone();
const now = new Date('2025-10-28 14:30:45');

tz.format(now, 'YYYY年MM月DD日');               // '2025年10月28日'
tz.format(now, 'YYYY年MM月DD日 HH時mm分ss秒');   // '2025年10月28日 14時30分45秒'
tz.format(now, 'yyyy年MM月dd日 HH:mm');         // '2025年10月28日 14:30'

3.3.5 靜態(tài)方法調用（無需實例化）

const now = new Date('2025-10-28 14:30:45');

// 直接使用靜態(tài)方法
SurveyTimezone.format(now, 'YYYY-MM-DD');      // '2025-10-28'
SurveyTimezone.format(now, 'yyyy年MM月dd日');  // '2025年10月28日'
SurveyTimezone.format(now, 'MMM DD, yyyy');    // 'Oct 28, 2025'

3.4 常用格式模板

格式模板	輸出示例	使用場景
`YYYY-MM-DD`	2025-10-28	標準日期格式
`YYYY-MM-DD HH:mm:ss`	2025-10-28 14:30:45	完整日期時間
`yyyy年MM月dd日`	2025年10月28日	中文日期
`MMM DD, yyyy`	Oct 28, 2025	英文日期
`YYYY/MM/DD HH:mm`	2025/10/28 14:30	簡短日期時間
`HH:mm:ss`	14:30:45	僅時間
`YY-M-D`	25-10-28	簡短日期
`YYYY-MM-DD HH:mm:ss.SSS`	2025-10-28 14:30:45.123	帶毫秒

3.5 錯誤處理

const tz = new SurveyTimezone();

// 無效日期返回空字符串
tz.format(null);                    // ''
tz.format(undefined);               // ''
tz.format(new Date('invalid'));     // ''
tz.format('2025-10-28');            // ''（字符串不是 Date 對象）

// 有效日期
tz.format(new Date());              // '2025-10-28 14:30:45'（當前時間）

3.6 實現(xiàn)原理

format 方法采用正則替換策略實現(xiàn)格式化：

標記解析：將格式字符串中的標記（如 YYYY、MM）識別出來
長度優(yōu)先：按標記長度從長到短處理，避免 YYYY 被 YY 誤替換
順序處理：依次替換每個標記為對應的日期值
類型轉換：使用 JavaScript Date 對象的原生方法獲取年、月、日等值

關鍵代碼邏輯：

// 標記處理順序（長的在前，短的在后）
var tokens = ['YYYY', 'yyyy', 'MMM', 'SSS', 'MM', 'DD', 'dd', 'HH', 'mm', 'ss', 'YY', 'M', 'D', 'd', 'H', 'm', 's', 'y'];

// 依次替換每個標記
for (var i = 0; i < tokens.length; i++) {
    var token = tokens[i];
    if (result.indexOf(token) !== -1) {
        result = result.replace(new RegExp(token, 'g'), matches[token]());
    }
}

3.7 原型方法 vs 靜態(tài)方法

特性	原型方法	靜態(tài)方法
調用方式	`instance.format()`	`SurveyTimezone.format()`
是否需要實例化	? 需要	? 不需要
訪問實例屬性	? 可以	? 不可以
推薦使用場景	面向對象編程	工具函數(shù)調用
性能	略優(yōu)	略低（多一層調用）

關系說明：

靜態(tài)方法內部調用原型方法實現(xiàn)
兩種方式返回結果完全一致
靜態(tài)方法保證向后兼容性

// 靜態(tài)方法實現(xiàn)（調用原型方法）
SurveyTimezone.format = function (date, format) {
    return SurveyTimezone.prototype.format.call(null, date, format);
}

4. parse 方法詳解

4.1 方法說明

parse 方法用于將日期時間字符串解析為 JavaScript Date 對象，支持多種常見格式的自動識別。

方法簽名：

// 原型方法
instance.parse(dateString, format)

// 靜態(tài)方法（向后兼容）
SurveyTimezone.parse(dateString, format)

參數(shù)：

參數(shù)	類型	必填	默認值	說明
`dateString`	`string\|number`	?	-	日期時間字符串或時間戳
`format`	`string`	?	-	可選的格式模板，用于指定解析格式

返回值：

類型：Date | null
說明：解析成功返回 Date 對象，失敗返回 null

4.2 支持的日期格式

4.2.1 自動識別格式（無需指定 format）

格式	示例	說明
ISO 8601	`2025-10-28T14:30:45.123Z`	JavaScript 原生支持
標準格式（帶時分秒毫秒）	`2025-10-28 14:30:45.123`	常用格式
標準格式（帶時分秒）	`2025-10-28 14:30:45`	常用格式
標準格式（帶時分）	`2025-10-28 14:30`	常用格式
標準日期	`2025-10-28`	僅日期
斜杠格式（帶時間）	`2025/10/28 14:30:45`	常用格式
斜杠格式（日期）	`2025/10/28`	常用格式
中文格式（帶時間）	`2025年10月28日 14時30分45秒`	中文日期時間
中文格式（日期）	`2025年10月28日`	中文日期
歐洲格式	`28/10/2025`	DD/MM/YYYY
美式格式	`10-28-2025`	MM-DD-YYYY
時間戳	`1698484245000`	毫秒時間戳

4.2.2 指定格式解析

當自動識別失敗時，可以指定 format 參數(shù)明確告知解析格式：

const tz = new SurveyTimezone();

// 指定格式解析
tz.parse('28-10-2025', 'DD-MM-YYYY');
tz.parse('10/28/2025', 'MM/DD/YYYY');
tz.parse('25/10/28 14:30', 'YY/MM/DD HH:mm');

支持的格式標記：

YYYY / yyyy - 四位年份
YY / yy - 兩位年份（00-49 → 2000-2049，50-99 → 1950-1999）
MM - 月份
DD / dd - 日期
HH - 小時
mm - 分鐘
ss - 秒
SSS - 毫秒

4.3 使用示例

4.3.1 基礎用法（自動識別）

const tz = new SurveyTimezone();

// 標準格式
tz.parse('2025-10-28 14:30:45');           // Date 對象
tz.parse('2025-10-28');                    // Date 對象

// 斜杠格式
tz.parse('2025/10/28 14:30:45');           // Date 對象
tz.parse('2025/10/28');                    // Date 對象

// 中文格式
tz.parse('2025年10月28日');                 // Date 對象
tz.parse('2025年10月28日 14時30分45秒');    // Date 對象

// 時間戳
tz.parse(1698484245000);                   // Date 對象

// 帶毫秒
tz.parse('2025-10-28 14:30:45.123');       // Date 對象

4.3.2 指定格式解析

const tz = new SurveyTimezone();

// 歐洲日期格式（DD/MM/YYYY）
tz.parse('28/10/2025', 'DD/MM/YYYY');

// 美式日期格式（MM/DD/YYYY）
tz.parse('10/28/2025', 'MM/DD/YYYY');

// 短年份格式
tz.parse('25/10/28', 'YY/MM/DD');          // 2025-10-28

// 自定義格式
tz.parse('28-10-2025 14:30', 'DD-MM-YYYY HH:mm');

4.3.3 錯誤處理

const tz = new SurveyTimezone();

// 無效輸入返回 null
tz.parse(null);                            // null
tz.parse(undefined);                       // null
tz.parse('');                              // null
tz.parse('invalid date');                  // null
tz.parse('2025-13-40');                    // null（無效日期）

// 類型檢查
const result = tz.parse('2025-10-28');
if (result) {
    console.log('解析成功:', result);
} else {
    console.log('解析失敗');
}

4.3.4 靜態(tài)方法調用

// 直接使用靜態(tài)方法，無需實例化
const date1 = SurveyTimezone.parse('2025-10-28');
const date2 = SurveyTimezone.parse('2025/10/28');
const date3 = SurveyTimezone.parse('2025年10月28日');
const date4 = SurveyTimezone.parse('28-10-2025', 'DD-MM-YYYY');

4.3.5 parse + format 組合使用

const tz = new SurveyTimezone();

// 解析后格式化輸出
const parsedDate = tz.parse('2025-10-28 14:30:45');
if (parsedDate) {
    console.log(tz.format(parsedDate, 'YYYY年MM月DD日'));        // '2025年10月28日'
    console.log(tz.format(parsedDate, 'MMM DD, yyyy'));         // 'Oct 28, 2025'
    console.log(tz.format(parsedDate, 'HH:mm:ss'));             // '14:30:45'
}

// 格式轉換
const input = '28/10/2025';
const date = tz.parse(input, 'DD/MM/YYYY');
const output = tz.format(date, 'YYYY-MM-DD');
console.log(output);  // '2025-10-28'

4.4 解析流程

parse 方法采用多層次解析策略：

輸入值
  ↓
┌─────────────────────────────────┐
│ 1. 類型檢查                      │
│    - null/undefined → null       │
│    - Date 對象 → 驗證后返回      │
│    - 數(shù)字 → 時間戳解析           │
└─────────────────────────────────┘
  ↓
┌─────────────────────────────────┐
│ 2. 格式化參數(shù)檢查                │
│    - 有 format → 使用格式模板解析 │
│    - 無 format → 自動識別         │
└─────────────────────────────────┘
  ↓
┌─────────────────────────────────┐
│ 3. 原生解析嘗試                  │
│    - new Date(dateString)        │
│    - 成功 → 返回                 │
│    - 失敗 → 繼續(xù)                 │
└─────────────────────────────────┘
  ↓
┌─────────────────────────────────┐
│ 4. 正則匹配解析                  │
│    - 遍歷預定義格式列表          │
│    - 匹配成功 → 返回             │
│    - 全部失敗 → 返回 null        │
└─────────────────────────────────┘

4.5 常見場景示例

場景1：表單日期輸入

const tz = new SurveyTimezone();

// 用戶輸入的日期字符串
const userInput = document.getElementById('dateInput').value;  // '2025-10-28'
const date = tz.parse(userInput);

if (date) {
    // 轉換為顯示格式
    const displayText = tz.format(date, 'YYYY年MM月DD日');
    console.log(displayText);  // '2025年10月28日'
}

場景2：API 數(shù)據(jù)轉換

const tz = new SurveyTimezone();

// API 返回的日期字符串
const apiData = {
    createdAt: '2025-10-28T14:30:45.123Z',
    updatedAt: '2025/10/28 14:30:45'
};

// 解析并格式化
const createdDate = tz.parse(apiData.createdAt);
const updatedDate = tz.parse(apiData.updatedAt);

console.log(tz.format(createdDate, 'YYYY-MM-DD HH:mm:ss'));
console.log(tz.format(updatedDate, 'YYYY-MM-DD HH:mm:ss'));

場景3：日期格式統(tǒng)一化

const tz = new SurveyTimezone();

// 不同格式的日期數(shù)組
const dates = [
    '2025-10-28',
    '2025/10/28',
    '2025年10月28日',
    '28/10/2025'  // 需要指定格式
];

// 統(tǒng)一轉換為標準格式
const normalized = dates.map((dateStr, index) => {
    const format = index === 3 ? 'DD/MM/YYYY' : undefined;
    const date = tz.parse(dateStr, format);
    return date ? tz.format(date, 'YYYY-MM-DD') : null;
});

console.log(normalized);  // ['2025-10-28', '2025-10-28', '2025-10-28', '2025-10-28']

4.6 性能考慮

最佳實踐：

優(yōu)先使用標準格式：ISO 8601 格式解析最快
指定格式模板：已知格式時指定 format 參數(shù)可跳過自動識別
緩存解析結果：避免重復解析相同字符串
提前驗證：在解析前進行基本格式驗證

const tz = new SurveyTimezone();

// ? 不推薦：每次都自動識別
for (let i = 0; i < 1000; i++) {
    tz.parse('28/10/2025');
}

// ? 推薦：指定格式
for (let i = 0; i < 1000; i++) {
    tz.parse('28/10/2025', 'DD/MM/YYYY');
}

4.7 與 format 方法的配合

parse 和 format 是互補的兩個方法：

方法	輸入	輸出	用途
`parse`	字符串 → Date	將日期字符串轉換為 Date 對象	數(shù)據(jù)輸入、解析
`format`	Date → 字符串	將 Date 對象轉換為格式化字符串	數(shù)據(jù)顯示、輸出

完整的數(shù)據(jù)流：

const tz = new SurveyTimezone();

// 數(shù)據(jù)輸入 → 處理 → 輸出
const input = '28/10/2025';                          // 用戶輸入
const date = tz.parse(input, 'DD/MM/YYYY');          // 解析為 Date 對象
const output = tz.format(date, 'YYYY年MM月DD日');    // 格式化為顯示文本

console.log(output);  // '2025年10月28日'

4.8 原型方法 vs 靜態(tài)方法

特性	原型方法	靜態(tài)方法
調用方式	`instance.parse()`	`SurveyTimezone.parse()`
是否需要實例化	? 需要	? 不需要
訪問實例屬性	? 可以	? 不可以
推薦使用場景	面向對象編程	工具函數(shù)調用