ウィンドウのサイズ変更は、Web 開発では重要な作業のように思えるかもしれませんが、実際には JavaScript と Typescript のかなりの数の概念と結びついており、応答性が高くユーザーフレンドリーなデザインを確保する上で重要な役割を果たします。 動的な UI/UX のコンテキストでは、「ウィンドウのサイズ変更」機能が最も重要です。 日常的な例としては、ウィンドウのサイズを変更すると縮小してシームレスな閲覧スペースを提供するサイドバーや、歪みを防ぐために自動的に調整されるギャラリー画像などが挙げられます。 変更は、ウィンドウのサイズ変更イベントをリッスンすることで反応的に行われます。
現在の問題は、ウィンドウのサイズ変更に応じてアクションを実行することですが、これは Typescript と DOM の操作で非常に簡潔に管理できます。 Typescript の型チェックとスケーラビリティを活用してソリューションを整理します。
window.addEventListener('resize', () => {
幅 = window.innerWidth にします。
if(width <= 768){ // ウィンドウ サイズが 768px 以下の場合に実行されるアクション }else{ // ウィンドウ サイズが 768px を超える場合に実行されるアクション } }); [/コード]
コードを理解する
提供されたコードは、ウィンドウのサイズが変更されるたびに匿名関数を即座に呼び出すことによって機能します。 この匿名関数により、「サイズ変更」インシデントに関する貴重な情報が含まれるイベント オブジェクトにアクセスできるようになります。 関数内で 768 つの条件を定義します。 XNUMX つはウィンドウの内幅が XNUMX ピクセル以下の場合、もう XNUMX つはそれより大きい場合です。 この区分は通常、モバイル デバイスとデスクトップ デバイスを区別するために使用されます。
ウィンドウのサイズ変更の進化
ウィンドウのサイズ変更は、レスポンシブ Web デザインの進化した世界の産物です。 Web サイトが標準の画面サイズに合わせて構築されていた以前とは異なり、現在の需要は大きく変化しています。 さまざまな画面解像度を備えた幅広いデバイスが存在することは間違いなく、当社の設計が個々の表示プラットフォームに適応し、最適化された目に優しいレイアウトを提供することが重要です。
Javascript イベントと Typescript
ソリューションに戻りますが、ここで重要なのは、Typescript で JavaScript イベントを使用する方法を理解することです。 「サイズ変更」イベントは、Web ページ上のさまざまな状態やアクションを決定するために JavaScript が提供する多くのイベントの XNUMX つにすぎません。 「クリック」、「ホバー」、「マウスダウン」はいくつかの例です。 これらのイベントを組み合わせると、 活字付き 開発者は強力な機能を備えた、よりクリーンで保守しやすいコードを作成できます。 Typescriptのタイピング そしてJavaScriptの柔軟性。
効率化のためのデバウンス
最後に考慮すべき点は、ウィンドウがドラッグされている間、「サイズ変更」イベントが継続的に発生するということです。 イベント リスナー関数が重い場合、これはパフォーマンスに重大な影響を与える可能性があります。 これを軽減するために、「デバウンス」と呼ばれる概念を使用します。 JavaScript におけるデバウンスは、関数の呼び出し間の時間を制限するために使用される手法です。 サイズ変更関数をデバウンスする方法の例を次に示します。
debounceTimeout を許可します。
window.addEventListener('resize', () => {
クリアタイムアウト(デバウンスタイムアウト);
debounceTimeout = setTimeout(() => {
幅 = window.innerWidth にします。
if(width <= 768){ // ウィンドウ サイズが 768px 以下の場合に実行されるアクション }else{ // ウィンドウ サイズが 768px を超える場合に実行されるアクション } }, 100); }); [/code] 以上です。 説明が完了すると、JavaScript や Typescript を使用したウィンドウのサイズ変更などの機能を簡単に理解して実装できるようになります。 コーディングを楽しんでください!
