이것은 지난주 JavaScript의 7 Killer One-Liners에 대한 확장 입니다. 아직 이 기사를 읽지 않았다면 읽어보는 것이 좋습니다.

1. 뷰포트에서 요소가 보이는지 확인

IntersectionObserver요소가 뷰포트에 표시 되는지 확인하는 좋은 방법 입니다.

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

2. 장치 감지

당신은 navigator.userAgent작은 통찰력을 얻고 응용 프로그램을 실행하는 장치를 감지하는 데 사용할 수 있습니다

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
console.log(detectDeviceType());

속성을 사용하여 요소 의 가시성을 토글 할 수 있으며 렌더 흐름에서 요소를 제거style.visibility 하려는 경우 속성 을 사용할 수 있습니다 .style.display

const hideElement = (element, removeFromFlow = false) => {
  removeFromFlow
    ? (element.style.display = "none")
    : (element.style.visibility = "hidden");
};

4. URL에서 매개변수 가져오기

JavaScript 는 객체 parameters를 사용하여 공원을 산책하는 모든 주소에서 가져오기 를 수행합니다.URL

const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);

문자열로 변환하고 다시deep copy 개체로 변환하여 모든 개체를 만들 수 있습니다 .

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

JavaScript 는 함수와 함께 setTimeout제공되지만 객체를 반환하지 않으므로 Promise에서 사용하기 어렵습니다 async functions. 그래서 우리는 우리 자신의 wait/ sleep함수를 작성해야 합니다.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
  await wait(1000);
  console.log("async");
};
asyncFunc();

기술 영역 에 대한 주간 새로운 정보 를 보려면 저를 팔로우하세요.

개발 문제를 해결하기 위해 최고 등급의 프론트엔드 개발 프리랜서 가 필요하십니까 ? Upwork 에서 저에게 연락하십시오

내가 작업하고 있는 것을 보고 싶으십니까? 내 개인 웹사이트 및 GitHub 확인

연결하시겠습니까? LinkedIn 에서 저에게 연락하세요

저는 2022년 중반에 디지털 노마드 로 시작하는 프리랜서입니다. 여행을 잡고 싶습니까? 인스타그램 팔로우