質問の問合せ-util関数とテストユニットの作成

12593 ワード
テキストリンク
2番目の項目では,宿泊プラットフォーム上で宿泊場所を検索/フィルタリングする機能を実現するために,クエリー文字列を用いる必要がある.
Nav Barボタンをクリックして表示されるモードウィンドウで、領域と期間を選択すると、選択した期間が適用され、検索されたリストページに移動します.クエリーも使用できます.

選択した時間は検索ページに移動し、urlからクエリーリストに移動します.

すなわち,クエリはutil関数の重要な構成部分である.
プロジェクトが終わった今、このutil関数を再考します.
前回の配置を参照して、以前に考慮したクエリー・リスト関数について説明してください.
[2番目のプロジェクト][宿泊プラットフォーム]Query Stringへの悩み(1)-クエリー、どのように管理しますか?
昔はただ?&=データムとして、文字列をオブジェクトに切り取るか、クエリー・リストに結合して使用します.
しかし、プロジェクト終了後に再梱包を行う場合は、積極的にURLSearchParamsを使って再作成してみてはいかがでしょうか.という考えが生まれた.
理由は.
  • URLSearchparamsは、パラメータのキー、値を効率的に管理できます.
  • は多様な方法でパラメータを管理し、拡張性が良い.
    • 考えがあったからです.
    const paramsString = "q=URLUtils.searchParams&topic=api&topic='wow'";
const searchParams = new URLSearchParams(paramsString);

const parseQueryIntoObject = (querystring) => {
  const params = new URLSearchParams(querystring);
  const obj = {};

  for (const key of params.keys()) {
    if (params.getAll(key).length > 1) {
      obj[key] = params.getAll(key);
    } else {
      obj[key] = params.get(key);
    }
  }

  return obj;
};

const makeQueryStringFromObject = (object) => {
  const result = [];
  for (let [k, v] of Object.entries(object)) {
    if (Array.isArray(v)) {
      result.push(...v.map((el) => `${k}=${el}`));
    } else {
      result.push(`${k}=${v}`);
    }
  }
  return '?' + result.join('&');
};
    可用性は次のとおりです.小分隊テストも行った.
    

describe('utils.js 파일', () => {
  describe('parseQueryIntoObject 함수 테스트', () => {
    test('파라미터가 check_in=2022-02-13&check_out=2022-02-23이면 { check_in: 2022-02-13, check_out: 2022-02-23 }', () => {
      expect(parseQueryIntoObject("?check_in=2022-02-13&check_out=2022-02-23")).toEqual({ check_in: '2022-02-13', check_out: '2022-02-23' })
    })
  })
  describe('makeQueryStringFromObject 함수 테스트', () => {
    test('인자가 { check_in: 2022-02-13, check_out: 2022-02-23 }라면 check_in=2022-02-13&check_out=2022-02-23 반환', () => {
      expect(makeQueryStringFromObject({ check_in: '2022-02-13', check_out: '2022-02-23' })).toBe('?check_in=2022-02-13&check_out=2022-02-23')
    })
  })
})
    次の展開.githubページへのJSアプリ
    Java Flight Recorderでトラブルシューティング