###### tags: `會議紀錄`
###### Thunder:
###### CodeReview: `效能改善 #防彈跳`
###### Announcement:
###### Attendee: 政儀、偉恩、政儒、宜臻
# 📌[R]2020/11/06前端會議
## 踩雷事件
### ⚡無踩雷事件

## 寫法交流
### ⛏效能改善 #防彈跳
行動版的搜尋，目前會打一下就馬上查詢，讓效能不是很優，銷貨單上有個客戶下拉窗，它的搜尋有做防彈跳(輸入後延遲搜尋)的程式，行動版的可能可以參考參考看看。

==search-limit.pipe.ts==

import { debounceTime, map, delay } from 'rxjs/operators';
import { Pipe, PipeTransform } from '@angular/core';
import { of, Observable } from 'rxjs';

@Pipe({
  name: 'searchLimit',
  pure: true
})
export class SearchLimitPipe implements PipeTransform {
  /** 限制筆數 當超過此筆數時 依搜尋字顯示 (可依需求變動) */readonly LIMIT = 500;

  /** 未查詢時最大筆數 */readonly NOWORD_LIMIT = 10;
  /** 查詢時最大回覆數 */readonly RESPONSE_LIMIT = 50;

  /**
   * @param v 搜尋資料
   * @param searchWord 關鍵字
   * @param searchKey 搜尋的資料欄位
   * @param limit 限制筆數 當超過此筆數時 依搜尋字顯示
   */
  transform(v: any[], searchWord: string, searchKey: string[], limit: number): Observable<any[]> {
    if (!v) { return of([]); }
    const LIMIT = limit || this.LIMIT;
    searchKey = searchKey || ['ID', 'Name'];
    searchWord = searchWord || '';
    const data: { [key: string]: any, getSearchKey: () => string[] }[] = v;


    // limit
    if (data.length > LIMIT && !searchWord) {
      return of(data.filter((x, i) => i < this.NOWORD_LIMIT));
    }

    if (!searchWord) { return of(data); }

    /**資料越多 延遲越長 */
    const delayTime = data.length > 10000 ? 1000 : 400;

    return of(null).pipe(
      delay(delayTime),
      map(() => {
        const searchData: any[] = [];
        data.forEach((i) => {
          const keyData = {};
          const keys = searchKey;
          keys.forEach((key) => { keyData[key] = i[key]; });
          searchData.push(keys.length ? keyData : i);
        });

        // searchWord = searchWord.toUpperCase();
        const matchDataIndex = searchData.map((el, i) => {
          const test = JSON.parse(JSON.stringify(el));
          let testString = JSON.stringify(test);
          // 去除key值
          Object.keys(test).forEach(k => {
            testString = testString.replace(k, '');
          });
          const matchData = testString.indexOf(searchWord) !== -1;
          return matchData;
        });
        return data.filter((x, i) => matchDataIndex[i]).filter((x, i) => i < this.RESPONSE_LIMIT);
      })
    );
  }

}

## 事情公告
### 📢無事情公告