dayjsソース解析(五)(dayjsプラグイン詳細)

前言
前のdayjsソース解析(四)(Dayjsクラス)は、dayjsのソースディレクトリ構造を紹介しました.続いて、本編では、デイジーjsのプラグインの機能の使い方、ソースコード、および自分のデイジーjsプラグインの編集方法を分析します.
dayjsプラグインの使い方
dayjsのプラグインは、dayjs関数の下にマウントされたexted関数によってロードされ、次に使用されます.

import plugin //     
dayjs.extend(plugin) //     
dayjs.extend(plugin, options) //          ，          

例:公式のIsLeapeYearプラグインを使用します.

import isLeapYear from 'dayjs/plugin/isLeapYear'

dayjs.extend(isLeapYear)

dayjs('2000-01-01').isLeapYear() // true

これがdayjsプラグインの使い方です.
dayjsプラグインのソースコード(つまり、dayjs.exted()メソッド)

//        
// plugin：    
// option：     
dayjs.extend = (plugin, option) => {
  //           
  // 1.     2.Dayjs   3.dayjs   
  //            Dayjs         （Dayjs.prototype）。
  plugin(option, Dayjs, dayjs)
  return dayjs
}

dayjs.exted()メソッドは、2つのパラメータ、すなわちプラグイン(関数)とプラグインのオプションを受け取ります.
dayjs.exted()方法では、導入されたプラグイン(関数)を直接呼び出し、dayjs.exted(メソッドのoption、Dayjs類およびdayjs関数に入る3つのパラメータが導入される.
最後に、dayjs関数を返します.
それから、私たちは公式のISLeaphYearプラグインのソースコードを見にきました.どう書きましたか?

export default (o, c) => {
  const proto = c.prototype
  proto.isLeapYear = function () {
    return ((this.$y % 4 === 0) && (this.$y % 100 !== 0)) || (this.$y % 400 === 0)
  }
}

isLeapiYearプラグインのソースコードの中で、関数は2つのパラメータ(つまり、dayjs.exted()メソッドのoptionとDayjsクラス)を受け取り、次いで、isLeaphYear関数をDayjsクラスのプロトタイプのオブジェクトにマウントします.したがって、Dayjsの各インスタンスは、isLeaphYear方法を使用することができる.
自分のdayjsプラグインを作成します.
プラグインのソースコードを読むことで、プラグインの方法が分かりました.Dayjs類、Dayjs類の原型とdayjs関数の対象にマウントできます.また、プラグインオプションにより、プラグインを設定することができます.公式文書もプラグイン開発のテンプレートを提供しています.

export default (option, dayjsClass, dayjsFactory) => {
  //    dayjs()   
  //  ：   dayjs().isSameOrBefore()     
  dayjsClass.prototype.isSameOrBefore = function (arguments) {}

  //    dayjs  
  //  ：   dayjs.utc()    
  dayjsFactory.utc = (arguments) => {}

  //        API
  //  ：   dayjs().format()   
  const oldFormat = dayjsClass.prototype.format
  dayjsClass.prototype.format = function (arguments) {
    //   format  
    const result = oldFormat(arguments)
    //        
  }
}

プラグインを通じて、私たちの具体的なビジネスニーズをより良いサービスを提供するために、dayjsライブラリの方法の拡張を容易に行うことができます.
dayjsソースの解析が完了しました.この5つの文章は、dayjsのソースコードの主要な関数、方法、およびカテゴリを解析しただけでなく、他のapiの方法は自分一人で見に行く必要があります.☺
締め括りをつける
ソースはどう読みますか?

ライブラリのアプリから始めます.

の使い方を見てください.

ソースの入り口関数やカテゴリを見て、ソースの全体的な構造を理解する

最後に、apiのソースコード

を参照してください.