확인해 볼 가치가 있는 프런트엔드 코드 조각

일상적인 개발 과정에서 일반적으로 사용되는 코드 조각을 축적해 다양한 프로젝트에 직접 복사하여 붙여넣어 사용할 수 있어 매우 편리합니다. 다른 사람의 프로젝트를 인수한 경우 일부 프로젝트에 동일한 도구와 방법이 존재한다는 것을 알 수 있습니다. 이는 이전 개발자가 축적한 공통 코드 조각입니다.

이제 프런트 엔드 커뮤니티가 성숙해졌으므로 lodash 및 dayjs와 같은 우수한 라이브러리가 배열, 날짜 등을 처리하기 위한 요구 사항을 충족할 수 있습니다. 이 기사에서는 이러한 일반적인 조각을 반복하지 않습니다.

1. 요소 외부 클릭 감지

팝업 상자를 숨기거나 드롭다운 메뉴를 접을 때 레이어별로 확인하는 대신 포함 메소드를 사용하세요.

<code class="language-javascript">// 代码示例 (此处省略)</code>

2. 공식 홈페이지 빨리 오픈

타사 라이브러리의 홈페이지나 코드 저장소를 보려면 다음 npm 명령을 사용할 수 있습니다.

홈페이지 열기

npm 홈 PACKAGE_NAME

예를 들어 React의 경우

npm 홈 리액트

코드 저장소 열기

npm 저장소 PACKAGE_NAME

예를 들어 React의 경우

npm 저장소 반응

3. 일회성 이벤트 리스너

이벤트 함수에서 리스너를 제거하는 것 외에도 한 번 매개변수를 사용할 수도 있습니다.

<code class="language-javascript">// 代码示例 (此处省略)</code>

4. 초 형식을 HH:mm:ss로 지정

오디오/비디오 지속 시간 표시와 같은 시나리오에서는 다음과 같이 초 형식을 지정할 수 있습니다.

<code class="language-javascript">const formatSeconds = (s) =>
  [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(":").replace(/\b(\d)\b/g, "0");
const seconds = 3661;
console.log(formatSeconds(seconds));</code>

"방금 지금"과 같은 상대 시간을 표시하려면 timeago.js 라이브러리를 사용해 보세요.

5. URL 매개변수를 개체로 변환

쿼리 문자열 라이브러리를 사용할 필요 없이 URLSearchParams API를 직접 사용하세요.

<code class="language-javascript">const getUrlParams = (query) =>
  Array.from(new URLSearchParams(query)).reduce(
    (p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),
    {}
  );
const query = "?a=1&b=2&a=3";
console.log(getUrlParams(query));</code>

6. 새 탭 열기

외부 링크를 열 때 보안 위험을 방지하려면 rel="noopener noreferrer"를 설정하세요.

<code class="language-html"><a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a></code>

<code class="language-javascript">function openNewTab() {
  window.open("https://example.com", "newTab", "noopener,noreferrer");
}</code>

7. 업로드된 이미지 보기

업로드된 이미지를 표시하려면 FileReader API의 readAsDataURL 메소드를 사용하세요.

<code class="language-javascript">// 代码示例 (此处省略)</code>

8. 파일 다운로드

태그의 다운로드 속성을 사용하면 다운로드가 실행될 수 있지만 몇 가지 제한 사항이 있습니다.

<code class="language-html"><a download="" href="https://www.php.cn/link/8b89afaf8e00e0a46ea4d76ac473b1a2">下载</a></code>

<code class="language-javascript">function download(url) {
  const link = document.createElement("a");
  link.download = "file name";
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}</code>

서버 측이나 Blob 및 createObjectURL을 사용하여 브라우저 측에서 응답 헤더를 설정할 수도 있습니다.

<code class="language-javascript">const data = JSON.stringify({ message: "Hello" });
const blob = new Blob([data], { type: "application/json" });
const url = window.URL.createObjectURL(blob);
download(url);
window.URL.revokeObjectURL(url);</code>

9. 캐시된 결과

복잡한 계산을 위한 캐시 함수 결과입니다.

<code class="language-javascript">const memoize = (fn) =>
  (
    (cache = Object.create(null)) =>
    (arg) =>
      cache[arg] || (cache[arg] = fn(arg))
  )();
// 代码示例 (此处省略)</code>

10. 여러 줄 줄임표

CSS를 사용하여 단일 또는 여러 줄의 텍스트를 타원으로 자릅니다.

<code class="language-css">.truncate-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}</code>

11. 마지막 몇 가지 요소 선택

특정 요소를 타겟팅하려면 CSS 선택기를 사용하세요.

<code class="language-css">li:nth-child(-n + 3) {
  text-decoration: underline;
}
// 代码示例 (此处省略)</code>

12. 스크롤바 스타일

CSS나 better-scroll과 같은 타사 라이브러리를 사용하여 스크롤 막대 스타일을 맞춤설정하세요.

<code class="language-javascript">// 代码示例 (此处省略)</code>

13. 백분율 계산-최대 나머지 방법

최대 나머지 방법을 사용하여 백분율의 합이 1이 되도록 합니다.

<code class="language-javascript">// 代码示例 (此处省略)</code>

14. 동시성 제한

요청 수가 많은 경우 동시 요청 수를 제한하세요.

<code class="language-javascript">const formatSeconds = (s) =>
  [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(":").replace(/\b(\d)\b/g, "0");
const seconds = 3661;
console.log(formatSeconds(seconds));</code>

15. UUID 생성

이 코드를 사용하여 고유 식별자를 생성하세요.

<code class="language-javascript">const getUrlParams = (query) =>
  Array.from(new URLSearchParams(query)).reduce(
    (p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),
    {}
  );
const query = "?a=1&b=2&a=3";
console.log(getUrlParams(query));</code>

16. 모달 열기 및 본문 스크롤 방지

모달을 열 때 본문 스크롤을 방지합니다.

<code class="language-html"><a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a></code>

원본 링크: https://www.php.cn/link/d9d838896ca0a5e16e7efa2439943fbd

위 내용은 확인해 볼 가치가 있는 프런트엔드 코드 조각의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!