感情移入による開発

「再利用可能」、「再利用可能な構成要素」.前に聞いたことがある.
私は、一つの責任原則について話しました.さて、私たちがこの考えをとって、それを「再利用可能な構成要素」または「再利用可能性」に適用するならば、それは全く意味をなします.しかし、再利用可能なコンポーネントを除いて、他の方法は我々のコードをよりモジュラーで再利用できるか?
以下のコードのコンテキストに入れましょう.
インデックス.HTML

<script src="date.js" type="text/javascript"></script>
<form>
    <input type="date" id="date1" name="date1">
    <input type='date" id="date2" name="date2">
    <button>Submit</button>
</form>

日付.js

document.addEventListener('submit', () => {
    let date1 = document.getElementById('date1').valueAsDate
    let date2 = document.getElementById('date2').valueAsDate

    console.log(Math.abs(parseInt(date1 / 60 * 60 * 1000 * 24) - parseInt(date2 / 60 * 60 * 1000 * 24)))
})

これは非常に初歩的な例ですが、私はフロントエンドエンジニアとしての私の経験では、コードを書くとき、時には計算された/抽象的な何か別の場所に使用されると考えられていない多くのを発見した.
どのように、我々は上記のコードをもう少し抽象的にしますか?または、どのように我々は他の場所で使用することができるいくつかの機能性を破るかもしれませんか?
次のコード例を変更します.
日付.js

document.addEventListener('submit', () => {
    let date1 = document.getElementById('date1').valueAsDate
    let date2 = document.getElementById('date2').valueAsDate

    console.log(calculateDaysBetween(date1, date2))
});

function calculateDaysBetween(date1: Date, date2: Date): number {
    const toDays = 60 * 60 * 1000 * 24;
    return Math.abs(parseInt(date1 / toDays) - parseInt(date2 / toDays));
}

上記は、第1のスクリプトブロックからconsole.log()のビットを読むのを難しくして、それを読みやすくして、我々がそれをどこでも呼ぶことができるようにします.
非常に読みやすい方法でコードを書くことはあなたの仲間の開発者の世話です、そして、それはあなたが数ヵ月後に戻って来て、あなたの髪を抜かないことをより簡単にします!
ハッピー抽象!