moment.jsの実装例を詳しく解説

零下一度
リリース: 2017-06-23 10:42:28
オリジナル
2409 人が閲覧しました

時刻と日付の処理メソッドはプロジェクト内で使用されますが、サードパーティのライブラリ (moment.js) を導入しないように、プロジェクトで使用されるメソッドはここにカプセル化されています。

次の機能を実現するには:

new Moment()
// 返回当前的时间对象

new Moment().unix()
// 返回当前时间的秒数Moment.unix(timestamp)
// 传入秒数,返回传入秒数的时间对象

new Moment().format('YYYY-MM-DD dd HH:mm:ss')
// 返回值 2017-06-22 四 19:46:14Moment.unix(1498132062000).format('YYYY-MM-DD dd HH:mm:ss')
// 返回值 2017-06-22 四 19:46:14
ログイン後にコピー

1. 基本コード:

1 class Moment {
2     constructor(arg = new Date().getTime()) {
3         this.date = new Date(arg)
4     }
5 }
ログイン後にコピー

arg = new Date().getTime(): ここでは、構造化を使用してデフォルト値を arg に追加します。

2. unix メソッドを実装します

 1 class Moment {
 2     constructor(arg = new Date().getTime()) {
 3         this.date = new Date(arg)
 4     }
 5 
 6     // getTime()返回的是毫秒数,需要转成秒数并取整
 7     unix() {
 8         return Math.round(this.date.getTime() / 1000)
 9     }
10 }
ログイン後にコピー

unix メソッド: 現在時刻の秒数を返します

getTime() メソッドは、1000 を四捨五入する必要があるミリ秒数を返します

3. 静的 unix メソッドを実装します

1 class Moment {
2     constructor(arg = new Date().getTime()) {
3         this.date = new Date(arg)
4     }
5 
6     static unix(timestamp) {
7         return new Moment(timestamp * 1000)
8     }
9 }
ログイン後にコピー

静的 unix メソッド: パラメーターのタイムスタンプ ミリ秒は Date オブジェクトを返します

new Date() はミリ秒のパラメーターのみを受け入れることができ、1000 を掛ける必要があります

IV. formatメソッドの実装

 1 class Moment {
 2     constructor(arg = new Date().getTime()) {
 3         this.date = new Date(arg)
 4     }
 5 
 6     format(formatStr) {
 7         const date = this.date
 8         const year = date.getFullYear()
 9         const month = date.getMonth() + 1
10         const day = date.getDate()
11         const week = date.getDay()
12         const hour = date.getHours()
13         const minute = date.getMinutes()
14         const second = date.getSeconds()
15 
16         return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}/g, (match) => {
17             switch (match) {
18             case 'YY':
19                 return String(year).slice(-2)
20             case 'YYY':
21             case 'YYYY':
22                 return String(year)
23             case 'M':
24                 return String(month)
25             case 'MM':
26                 return String(month).padStart(2, '0')
27             case 'D':
28                 return String(day)
29             case 'DD':
30                 return String(day).padStart(2, '0')
31             case 'd':
32                 return String(week)
33             case 'dd':
34                 return weeks[week]
35             case 'ddd':
36                 return '周' + weeks[week]
37             case 'dddd':
38                 return '星期' + weeks[week]
39             case 'H':
40                 return String(hour)
41             case 'HH':
42                 return String(hour).padStart(2, '0')
43             case 'm':
44                 return String(minute)
45             case 'mm':
46                 return String(minute).padStart(2, '0')
47             case 's':
48                 return String(second)
49             case 'ss':
50                 return String(second).padStart(2, '0')
51             default:
52                 return match
53             }
54         })
55     }
56 }
ログイン後にコピー

format メソッド:希望する形式に応じて「YYY-MM-DD HH:mm:ss」、「YYY-MM-DD」などを渡します。 get (詳しくはmoment.jsのformatメソッドを参照してください)

padStart( )メソッドは月や日付の前に0を追加するメソッドです

この時点でunix、static unix、他の日付と時刻の処理メソッドを実装する必要がある場合は、github を確認して後で改善して追加してください。

以上がmoment.jsの実装例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート