자바스크립트 유용한 기능

원래 예정된 날짜인 2020년 4월 19일 스위스에서 COVID-19 검역이 종료될 때까지 공유합니다. 이 첫 번째 이정표까지 7일 남았습니다. 앞으로 더 나은 날들이 있기를 바랍니다.


DeckDeckGo 의 여러 애플리케이션과 웹 구성 요소에서 몇 가지 JavaScript 기능을 사용하고 있습니다.

어쩌면 이것들이 당신의 프로젝트에도 유용할 수 있습니까?

마우스 및 터치 이벤트 통합

마우스나 터치 장치를 통한 사용자 상호 작용과 관련된 기능을 구현하는 경우 결과가 동일하다는 좋은 변화가 있습니다.

예를 들어 발표자는 remote control 을 사용하여 프레젠테이션을 그릴 수 있습니다. 이러한 목적을 위해 우리는 캔버스를 사용하고 다음과 같은 이벤트를 첨부합니다:

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', this.startEvent);
canvas.addEventListener('touchstart', this.startEvent);

알 수 있듯이 mouse 및 touch 이벤트는 모두 동일한 기능으로 처리되며 이는 좋지만 불행히도 예를 들어 위치 정보에 액세스하려는 경우 약간의 논리 없이는 해결할 수 없습니다. clientX 또는 clientY .

실제로 touch 위치 지정은 개체의 루트에서 사용할 수 없고 오히려 배열에서 사용할 수 있습니다changedTouches.

function startEvent($event) {
  // MouseEvent
  console.log($event.clientX);

  // TouchEvent
  console.log($event.changedTouches[0].clientX);
}

그래서 우리는 unifyEvents라고 하는 함수를 사용하여 기기와 상관없이 위치를 알아내고 있습니다.

export function unifyEvent($event) {
  return $event.changedTouches ? $event.changedTouches[0] : $event;
}

다음과 같이 사용할 수 있습니다.

function startEvent($event) {
  // TouchEvent and MouseEvent unified
  console.log(unifyEvent($event).clientX);
}

디바운싱

에서 JavaScript를 사용한 디바운싱 주제를 다루었지만 종속성 없이 이러한 기능을 애플리케이션에 추가하려는 경우 이를 수행할 수 있는 함수가 있습니다.

export function debounce(func, timeout?) {
  let timer;

  return (...args) => {
    const next = () => func(...args);

    if (timer) {
      clearTimeout(timer);
    }

    timer = 
      setTimeout(next, timeout && timeout > 0 ? timeout : 300);
  };
}

사용자 에이전트

올해 초 Google은 Chrome 브라우저에서 User-Agent 문자열에 대한 지원을 중단하기로 결정했다고 발표했습니다( article/GitHub ).

따라서 다음 방법은 나중에 교체해야 함을 알고 현명하게 사용해야 합니다.

즉, 다음은 브라우저 또는 장치 유형에 대한 정보를 감지하는 데 도움이 되는 몇 가지 편리한 기능입니다.

isMobile

Detect Mobile Browsers은 내비게이터를 테스트하여 사용자가 모바일 장치에서 애플리케이션을 탐색하거나 사용하는지 여부를 감지하는 데 사용할 수 있는 모바일 장치의 오픈 소스 목록을 제공합니다.

export function isMobile() {
  if (!window || !navigator) {
    return false;
  }

  const a = 
        navigator.userAgent || navigator.vendor || 
        (window as any).opera;
  // Regex Source -> http://detectmobilebrowsers.com
  return (
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
      a
    ) ||
    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
      a.substr(0, 4)
    )
  );
}

isIOS

사용자가 Apple 모바일 장치를 사용하고 있는지 감지하기 위해 키워드iPad|iPhone|iPod에 대해 내비게이터를 테스트할 수 있습니다.

export function isIOS() {
  if (!window || !navigator) {
    return false;
  }

  const a = 
        navigator.userAgent || navigator.vendor || 
        (window as any).opera;

  return /iPad|iPhone|iPod/i.test(a);
}

아이패드

마찬가지로 쿼리를 iPad로 줄여 사용자가 iPad를 사용 중인지 추측할 수만 있습니다.

export function isIPad() {
  if (!window || !navigator) {
    return false;
  }

  const a = 
        navigator.userAgent || navigator.vendor || 
        (window as any).opera;

  return /iPad/i.test(a);
}

isFirefox

마찬가지로 클라이언트가 최종 예제 Firefox와 같이 특정 브라우저를 사용하고 있는지 감지할 수 있습니다.

export function isFirefox() {
  if (!window || !navigator) {
    return false;
  }

  const a = 
        navigator.userAgent || navigator.vendor || 
        (window as any).opera;

  return /firefox/i.test(a);
}

전체 화면

프리젠테이션은 독립 실행형 또는 전체 화면 모드에서 편집하고 탐색할 수 있으므로 이러한 상태를 감지해야 합니다. 이러한 목적을 위해 window.innerHeight 와 screen.height 를 비교합니다. 두 값이 같으면 브라우저가 전체 화면 모드에 있는 것입니다.

export function isFullscreen() {
  if (!window || !screen) {
    return false;
  }

  return window.innerHeight == screen.height;
}

HTML 문자열에서 속성 제거

DOM에 JavaScript를 사용하여 string 구문 분석하려는 요소가 포함되어 있다고 가정해 보겠습니다.

<div contentEditable="true" style="color: #ff0000">Red</div>

const div = document.querySelector('div').outerHTML;

어떤 이유로 DOM 요소를 만지거나 복제할 수 없지만 어쨌든 string 값에서 속성을 제거하는 데 관심이 있을 수 있습니다.

각각 다음과 같은 결과에 관심이 있을 것입니다.

<div style="color: #ff0000">Red</div>

문자열에서 속성을 정리하거나 제거하려면 다음과 같은 편리한 RegExp를 사용할 수 있습니다.

const result = div
      .replace(/(<.*?)(contentEditable=""
                       |contentEditable="true"
                       |contentEditable="false"
                       |contentEditable)
                (.*?>)/gi, '$1$3');

기본적으로 모든 속성 가능성을 검색하고 선택 전후에 있는 내용을 포함하는 새string를 만듭니다.

이 모든 것 중 내가 가장 좋아하는 트릭 😉.

요약

DeckDeckGo은 오픈 소스입니다. 위의 기능은 GitHub repo 또는 관련 npm packages에서 찾을 수 있습니다.

집에 있어, 안전해!

데이비드

표지 사진 by Sam Moqadam on Unsplash