[Assignment 1回顧録]ホワイトマインド-無限スクロールリスト

钳机能实装コード

🔗 Github

🔗 链接的配置

🔗 信息会议唱片的发送

課題完了後の回顧内容

🔰 メンテナンスのために定数管理をしっかりと行います!

Infinity scroll機能では、定数とは何かを考慮する必要があります.

API_URL|当然定数で管理すべきと考えられるが、他のlimit, page|のような変数は考えられなかった.コードとメンテナンスのシンプル化に最善を尽くします.

export const BASE_URL = `https://jsonplaceholder.typicode.com`;
export const ERROR_MESSAGE = 'Failed to fetch data';
export const LIMIT = 10;
export const DEFAULT_PAGE = 1;

🔰 DeboringとThrottleを適用!

イベントハンドラが大量の演算(イベントハンドラの回数が多すぎる)を実行する場合、イベント発生を制御可能なレベルに制限する技術.Debounce最後の(または最初の)関数のみを呼び出す技術.Throttleイベントを特定のサイクルで発生させるテクノロジー
e最後の関数が呼び出されてからしばらくの間、再度呼び出されないことを確認する

volume eventが画面に適用される場合、DebounceおよびThrottleが適用されるのは当然である.

しかし、ライブラリlodashをインストールして適用することに慣れているかもしれませんが、コードで直接実装するには、数行のコードだけでいいです.おなじみのものを忘れてしまった気が…!🙄

復習しながらコードを書き直す.

//* decounce 함수
export const debounce = (func, delay) => {
  let timeoutId = null;
  // do something
  return (...arg) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func.bind(null, ...arg), delay);
  };
};


//* throttle 함수
export const throttle = (func, delay) => {
    let timeout = null;
    return function (...args) {
      if (!timeout) {
        timeout = setTimeout(() => {
          func.call(this, ...args);
          timeout = null;
        }, delay);
      }
    };
  };

(添付)ThrottleおよびDebounce使用例

ユーザーがウィンドウサイズの調整を停止するのを待って、サイズ変更イベント

を使用します.

ユーザがキーボード(例えば検索ウィンドウ)の入力を停止するまでajaxイベントの発生を防止

ページのスクロール位置を測定し、50ミリ秒ごとに最大1回応答する場合

アプリケーションから要素をドラッグしたときのパフォーマンスを確保するため

🔰 Intersection Observerとして開発されたら考えるべき事項!

ブラウザ固有のサポートをサポートしているかどうかを確認する必要があります.(使用>can i use)

交差点observerはIEのサポートを受けません.
eこの場合は|ʢ4|を用いて解決すべきである.IEユーザーは想像以上に多かった.
➡ >ラベル・ログを作成してマルチセグメント・フィルを適用します(Cross Browsingの下部)<

🔰 GITについての理解

Live Share
私は初めて「リアルタイムshare」機能を使いましたが、チームメンバーのどの部分がすぐに分かるので不思議で面白いです.
ϷVS codeでは、次のメッセージとともにコミットされると、コラボレーションコミットとしてスタックされます.

'Co-authored-by: Daeun <[email protected]>'

Git Issue
新たな追加可能なもの、改善が必要なもの、エラーなどは、ホットスポットと見なすことができます!
すべてのアクティビティ履歴にホットスポットを登録し、そのホットスポットに従って操作します.

Commit Convention
これは|それとも...よくわからないときはpolyfillですか?いろいろ考えました.😨
私が探したトス/バミン/カカギットの会議をよく見て勉強します.

👀 残念と解決策

無限スクロールが最後になると、つまり、データのロードがないことを考慮して、不要なAPI呼び出しを阻止すべきである.(INSも最後に下がると、ユーザーにロードできるものは何もないことを伝えます)

10個の情報をインポートするデータが10個未満の場合は、次の呼び出しを適用できます.