자바스크립트에는 어떤 라이브러리가 있나요?-프런트엔드 Q&A-php.cn

Javascript 라이브러리에는 jQuery, React, "D3.js", Underscore, Lodash, Algolia Places, "Anime.js", Animate On Scroll, "Bideo.js", "Chart.js" 등이 포함됩니다.

자바스크립트에는 어떤 라이브러리가 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 라이브러리란 무엇인가요?

JavaScript 라이브러리에는 웹 페이지 또는 JS 기반 애플리케이션에서 실제 작업을 수행하는 다양한 함수, 메서드 또는 개체가 포함되어 있습니다. 이를 사용하여 WordPress 웹사이트를 구축할 수도 있습니다.

좋아하는 책을 다시 읽을 수 있는 도서관이라고 생각해보세요. 당신은 작가가 되어 다른 작가의 책을 즐기고, 새로운 관점이나 혁신을 얻고 이를 인생에서 사용할 수도 있습니다.

마찬가지로 JavaScript 라이브러리에는 개발자가 약간의 수정을 통해 재사용하고 사용할 수 있는 코드나 기능이 있습니다. 개발자는 JS 라이브러리 코드를 작성하고 다른 개발자는 슬라이드를 처음부터 작성하는 대신 동일한 코드를 재사용하여 슬라이드 준비와 같은 특정 작업을 수행합니다. 이렇게 하면 시간과 에너지가 많이 절약됩니다.

이는 JavaScript 라이브러리를 만드는 동기가 되므로 여러 사용 사례에서 수십 개를 찾을 수 있습니다. 시간을 절약할 뿐만 아니라 전체 개발 프로세스를 단순화합니다.

JavaScript 라이브러리 사용 방법

앱에서 JavaScript 라이브러리를 사용하려면 라이브러리 소스 경로 또는 URL을 참조하는 src 속성을 사용하여 요소에 추가하세요.

자세한 내용은 사용하려는 JavaScript 라이브러리의 설명서를 읽고 여기에 제공된 단계를 따르세요.

Javascript 라이브러리 공유

1. jQuery

jQuery는 빠르고 가벼우며 기능이 풍부한 클래식 JavaScript 라이브러리입니다. BarCamp NYC의 John Resig가 2006년에 건축했습니다. jQuery는 MIT에서 라이센스를 받은 무료 오픈 소스 소프트웨어입니다.

HTML 문서 조작 및 탐색, 애니메이션, 이벤트 처리 및 Ajax를 더 쉽게 만듭니다.

특징 및 장점:

사용하기 쉬운 간단한 API가 있습니다.
스타일 속성을 처리하고 요소를 찾을 때 CSS3 선택기를 사용합니다.
jQuery는 gzip 및 압축 크기가 30kb에 불과하고 경량이며 AMD 모듈을 지원합니다.
구문이 CSS와 매우 유사하기 때문에 초보자도 쉽게 배울 수 있습니다.
플러그인을 통해 확장 가능.
Chrome 및 Firefox를 포함한 여러 브라우저를 지원하는 API의 다양성.

사용 사례:

특정 조건을 사용하여 DOM에서 노드를 선택하는 CSS 선택기를 사용한 DOM 조작. 이러한 조건에는 요소 이름과 해당 속성(예: 클래스 및 ID)이 포함됩니다.
Sizzle(오픈 소스, 다중 브라우저 선택기 엔진)을 사용하여 DOM에서 요소를 선택하세요.
효과, 이벤트, 애니메이션을 만들어보세요.
JSON 구문 분석.
Ajax 애플리케이션 개발.
기능 감지.
Promise 및 Deferred 객체를 사용하여 비동기 처리를 제어하세요.

2. React.js

React.js(ReactJS 또는 React라고도 함)는 오픈 소스 프런트 엔드 JavaScript 라이브러리입니다. 페이스북의 소프트웨어 엔지니어였던 조던 워크(Jordan Walke)가 2013년에 설립했습니다.

이제는 MIT 라이센스를 따르지만 원래는 Apache 라이센스 2.0으로 출시되었습니다. React는 대화형 UI를 쉽게 만들 수 있도록 설계되었습니다.

앱의 각 상태에 대한 간단한 보기를 디자인하세요. 다음으로, 데이터 변경 사항에 따라 올바른 구성 요소를 효율적으로 렌더링하고 업데이트합니다.

기능 및 이점:

React 코드에는 React DOM 라이브러리의 도움으로 DOM의 특정 요소로 렌더링되어야 하는 구성 요소 또는 엔터티가 포함되어 있습니다.
데이터 구조에 메모리 내 캐시를 생성하고 차이를 계산한 후 브라우저에 표시된 DOM을 효율적으로 업데이트하여 가상 DOM을 사용합니다.
이러한 선택적 렌더링으로 인해 개발자가 페이지 레이아웃, CSS 스타일 및 전체 페이지 렌더링을 다시 계산하는 수고를 덜면서 애플리케이션 성능이 향상됩니다.
엔터티 수명주기의 특정 지점에서 코드 실행을 허용하기 위해 render 및 componentDidMount와 같은 수명주기 메서드를 사용합니다.
JS와 HTML을 결합한 JavaScript XML(JSX)을 지원합니다. 중첩된 요소, 속성, JS 표현식 및 조건문을 사용하여 구성 요소 렌더링을 용이하게 합니다.

사용 사례:

모바일 또는 단일 페이지 애플리케이션을 개발할 때 기반으로 사용됩니다.
상태를 DOM에 표시하고 관리합니다.
웹 애플리케이션과 대화형 사이트를 개발할 때 효과적인 사용자 인터페이스를 구축하세요.
디버깅과 테스트가 더 쉬워졌습니다.

우리 모두 알고 있듯이 Facebook, Instagram 및 Whatsapp은 모두 React를 사용합니다.

3、D3.js

데이터 기반 문서(줄여서 D3) 또는 D3.js는 개발자가 데이터 기반 문서 작업에 사용할 수 있는 또 다른 유명한 JS 라이브러리입니다. BSD 라이선스로 2011년에 출시되었습니다.

특징 및 이점:

웹 표준을 강조하고 하나의 프레임워크 대신 최신 브라우저 기능을 제공합니다.
D3.js는 강력한 데이터 시각화를 지원합니다.
HTML, CSS, SVG를 지원합니다.
은 데이터 기반 접근 방식을 취하고 이를 DOM 조작에 적용합니다.
D3.js는 빠르며 애니메이션과 상호 작용을 위한 여러 동적 동작과 데이터 세트를 지원합니다.
오버헤드를 줄여 높은 프레임 속도에서 그래픽 복잡성을 높일 수 있습니다.

사용 사례:

대화형 및 동적 데이터 시각화를 생성합니다.
데이터를 DOM에 바인딩하고 DOM에서 데이터 기반 변환을 수행합니다. 예를 들어 숫자 배열에서 HTML 테이블을 생성한 다음 D3.js를 사용하여 SVG 막대 차트 또는 3D 표면도를 생성할 수 있습니다.
기능 코드를 사용하면 많은 수의 모듈에서 재사용이 가능합니다.
D3는 선언적 접근 방식을 사용하여 스타일 또는 속성 변경, 노드 추가, 정렬 또는 제거, 텍스트 또는 HTML 콘텐츠 변경 등과 같은 노드 변경을 위한 여러 모드를 제공합니다.
애니메이션 전환을 만들려면 이벤트를 통해 복잡한 전환 순서를 지정하고 CSS3 전환 등을 수행하세요.

4. Underscore.js

Underscore는 일반적인 프로그래밍 작업에 다양한 기능을 제공하는 JavaScript 유틸리티 라이브러리입니다. 2009년 Jeremy Askenas에 의해 만들어졌으며 MIT 라이선스에 따라 라이선스가 부여됩니다. 이제 Lodash는 그것을 능가했습니다.

기능 및 이점:

Prototype.js(또 다른 인기 있는 유틸리티 라이브러리)와 유사하게 작동하지만 Underscore는 객체 프로토타입 확장 대신 기능적 프로그래밍 디자인을 가지고 있습니다.
작업하는 데이터 유형에 따라 4가지 유형의 100개 이상의 기능이 있습니다. 조작할 수 있는 기능은 다음과 같습니다.
- Objects
- Arrays
- Objects and Arrays
- 기타 기능
Underscore는 Chrome, Firefox, Edge 및 더.

사용 사례:

필터, 맵 등과 같은 기능 도우미는 물론 바인딩, 빠른 인덱싱, JavaScript 템플릿, 품질 테스트 등과 같은 특수 기능도 지원합니다.

5, Lodash

Lodash는 숫자, 배열, 문자열, 객체 등을 더 쉽게 작업할 수 있게 해주는 JS 유틸리티 라이브러리이기도 합니다. 2013년에 출시되었으며 Underscore.js와 같은 기능적 프로그래밍 디자인도 사용합니다.

기능 및 이점:

은 유지 관리가 가능하고 간결한 JavaScript 코드를 작성하는 데 도움이 됩니다.
수학 연산, 바인딩 이벤트, 함수 제한, 데코레이터, 제약 조건 제한, 디바운싱 등과 같은 일반적인 작업을 단순화했습니다.
트림, 낙타 대문자 사용, 대문자 사용과 같은 문자열 기능이 모두 더 간단해졌습니다.
배열을 생성, 수정, 압축 및 정렬합니다.
컬렉션, 개체 및 시퀀스에 대한 기타 작업.

사용 사례:

모듈형 접근 방식의 도움:

배열, 문자열 및 객체를 반복합니다.
복합 함수를 만듭니다.
작동 및 테스트 값.

6. Algolia Places

Algolia Places는 사이트에서 주소 자동 완성 기능을 사용하는 쉽고 분산된 방법을 제공하는 JavaScript 라이브러리입니다. 이는 사이트 사용자의 경험을 향상시키는 데 도움이 되는 매우 빠르고 정확한 도구입니다. Algolia Places는 OpenStreetMap의 인상적인 오픈 소스 데이터베이스를 활용하여 전 세계에 걸쳐 서비스를 제공합니다.

예를 들어 제품 페이지의 전환율을 높이는 데 사용할 수 있습니다.

특징 및 이점:

여러 입력을 동시에 채워 결제 프로세스를 단순화합니다.
국가 또는 도시 선택기를 쉽게 사용할 수 있습니다.
지도에 링크 추천이 실시간으로 표시되어 빠르게 결과를 확인할 수 있습니다.
Algolia Places는 입력 오류를 처리하고 그에 따라 결과를 표시할 수 있습니다.
모든 쿼리를 가장 가까운 서버로 자동 라우팅하여 밀리초 안에 결과를 제공합니다.

사용 사례:

지도를 병합하여 특정 위치를 표시할 수 있어 매우 유용합니다.
양식을 효율적으로 사용할 수 있게 해줍니다.

7. Anime.js

사이트나 애플리케이션에 애니메이션을 추가하고 싶다면 Anime.js는 찾을 수 있는 최고의 JavaScript 라이브러리 중 하나입니다. 2019년에 출시된 이 제품은 가볍고 강력하면서도 간단한 API를 갖추고 있습니다.

기능 및 이점:

Anime.js는 DOM 속성, CSS 속성, SVG, CSS 변환 및 JS 개체와 함께 작동합니다.
Chrome, Safari, Firefox, Opera 등 다양한 브라우저에서 작동합니다.
소스 코드를 쉽게 해독하여 사용할 수 있습니다.
겹침 및 시차를 두고 따르는 것과 같은 복잡한 애니메이션 방법이 더욱 쉬워졌습니다.

사용 사례:

Properties 및 시간에 Anime.js의 인터리빙 시스템을 사용할 수 있습니다.
하나의 HTML 요소에서 동시에 여러 타이밍을 사용하여 계층화된 CSS 전환을 만듭니다.
Anime.js 콜백 및 제어 기능을 사용하여 이벤트를 동기식으로 재생, 일시 중지, 트리거, 되감기 및 제어합니다.

8. Animate On Scroll(AOS)

Animate On Scroll은 단일 페이지 시차 웹사이트에 매우 적합합니다. 이 JS 라이브러리는 완전한 오픈 소스이며 위아래로 스크롤할 때 아름답게 보이는 멋진 애니메이션을 페이지에 추가하는 데 도움이 됩니다.

페이드 효과, 정적 앵커 위치 등을 추가하여 웹사이트 디자인을 개선하고 사용자 만족도를 높입니다.

기능 및 이점:

이 라이브러리는 요소 위치를 감지하고 뷰포트에 나타날 때 적절한 클래스를 추가할 수 있습니다.
애니메이션을 쉽게 추가할 수 있을 뿐만 아니라 뷰포트를 변경하는 데에도 도움이 됩니다.
휴대폰, 태블릿, 컴퓨터 등 다양한 기기에서 원활하게 실행됩니다.
순수한 JavaScript로 작성되었으므로 종속성이 없습니다.

사용 사례:

다른 요소의 위치를 기반으로 요소에 애니메이션을 적용합니다.
화면 위치에 따라 요소에 애니메이션을 적용합니다.
모바일에서 요소 애니메이션을 비활성화합니다.
페이드, 뒤집기, 슬라이드, 크기 조정, 앵커 배치 등과 같은 다양한 애니메이션을 만듭니다.

9. Bideo.js

웹사이트 배경에 전체 화면 비디오를 통합하고 싶나요? Bideo.js를 사용해 보세요.

특징 및 이점:

이 JavaScript 라이브러리를 사용하면 비디오 배경을 추가하는 것이 매우 쉽습니다.
이 기능은 보기에도 좋고 다양한 비율과 크기의 화면에서도 잘 작동합니다.
추가된 영상은 사용하는 브라우저에 따라 크기가 조정될 수 있습니다.
CSS/HTML을 사용하여 쉽게 구현할 수 있습니다.

사용 사례:

웹사이트에 반응형 전체 화면 배경 비디오를 추가하세요.

10. Chart.js

귀하의 웹사이트나 프로젝트가 데이터 분석 분야와 관련이 있나요?

통계를 많이 제공해야 하나요?

Chart.js는 뛰어난 JavaScript 라이브러리입니다.

Chart.js는 프로젝트에 아름다운 차트를 즉시 추가할 수 있는 디자이너와 개발자를 위한 유연하고 간단한 라이브러리입니다. 이 JS 라이브러리는 오픈 소스이며 MIT 라이센스와 함께 제공됩니다.

특징 및 장점:

우아하고 단순하며 기본 차트를 추가할 수 있습니다.
반응형 웹페이지를 생성하세요.
가벼워서 배우고 구현하기 쉽습니다.
8가지 유형의 차트.
초보자에게 매우 적합합니다.
애니메이션 기능은 페이지를 더욱 상호작용적으로 만듭니다.

사용 사례:

혼합 차트 유형을 사용하여 다양한 데이터 세트로 작업하면서 명확한 시각적 표현을 제공합니다.
로그, 날짜, 시간 또는 사용자 정의 척도로 희소하고 복잡한 데이터 세트를 플롯합니다.

11. Cleave.js

텍스트 콘텐츠의 형식을 지정하려는 경우 Cleave.js가 흥미로운 솔루션을 제공합니다. 입력된 데이터의 형식을 지정하여 입력 필드의 가독성을 향상시키는 더 쉬운 방법을 제공하기 위해 만들어졌습니다.

이렇게 하면 더 이상 패턴을 가리거나 텍스트 서식을 지정하기 위해 정규 표현식을 작성할 필요가 없습니다.

특징 및 이점:

양식을 통해 제출된 일관된 데이터로 사용자 경험을 개선합니다.
신용 카드 번호, 전화 번호, 날짜, 시간 및 숫자에 대해 다양한 형식 지정 유형을 수행할 수 있습니다.
사용자 정의 블록, 접두사 및 구분 기호 형식을 지정합니다.
ReactJS 구성 요소 등을 지원합니다.

사용 사례:

CSS 선택기를 사용하여 여러 DOM 요소에 cleave.js를 구현합니다.
특정 원래 값을 업데이트하세요.
텍스트 필드의 참조를 가져옵니다.
Vue.js, jQuery 및 Playground의 Redux 양식과 함께 작동합니다.

12. Choreographer.js

Chreographer.js를 사용하여 복잡한 CSS를 효율적으로 애니메이션화하세요. CSS가 아닌 애니메이션에 사용할 수 있는 사용자 정의 기능을 더 추가할 수도 있습니다.

이 JavaScript 라이브러리를 사용하려면 npm을 통해 패키지를 설치하거나 스크립트 파일을 추가하세요.

특징 및 장점:

애니메이션 클래스는 단일 애니메이션 데이터를 관리합니다.
animationConfig 객체는 각 애니메이션 인스턴스를 구성합니다.
2가지 내장 애니메이션 기능 "변경"과 "확대/축소"가 포함되어 있습니다.
"Scale"은 단계적으로 측정된 값을 노드의 스타일 속성에 매핑하는 데 사용됩니다.
"변경"은 스타일 속성을 제거하거나 추가합니다.

사용 사례:

즉시 스크롤 애니메이션을 수행합니다.
마우스 움직임을 기반으로 애니메이션을 만듭니다.

13, Glimmer

Glimmer는 가볍고 빠른 UI 구성 요소로 2017년에 출시되었습니다. 강력한 Ember CLI를 사용하며 EmberJS를 구성 요소로 사용할 수 있습니다.

특징 및 이점:

Glimmer는 렌더링 및 업데이트에 놀라운 성능을 제공하는 빠른 DOM 렌더링 엔진입니다.
다용도이며 코드를 다시 작성할 필요 없이 현재 기술 스택과 함께 사용할 수 있습니다.

사용 사례:

독립형 구성 요소로 사용하거나 기존 애플리케이션에 웹 구성 요소로 추가할 수 있습니다.
DOM 렌더링.
정적 콘텐츠와 동적 콘텐츠를 구별하는 데 도움이 됩니다.
Ember의 강력한 성능이 필요하지만 더 가벼운 패키지인 경우 Glimmer를 사용하세요.

14. Granim.js

Granim.js는 부드러운 대화형 그래디언트 애니메이션을 만드는 데 도움이 되는 JS 라이브러리입니다. 이렇게 하면 귀하의 웹사이트가 화려한 배경과 대비되어 눈에 띄게 만들 수 있습니다.

특징 및 이점:

그라디언트는 이미지를 덮고, 독립적으로 작업하고, 이미지 마스크 아래로 슬라이드하는 등의 작업을 할 수 있습니다.
백분율이나 픽셀 값을 사용하여 그라데이션 방향을 맞춤설정할 수 있습니다.
그라디언트 방향을 대각선, 위아래, 왼쪽 및 오른쪽, 방사형 또는 사용자 정의로 설정하세요.
상태 변경에 대한 애니메이션 기간을 밀리초(ms) 단위로 설정합니다.
그라디언트 색상과 위치를 맞춤설정하세요.
캔버스 위치, 소스, 크기 조정 등에 따른 이미지 사용자 정의
포함된 기타 옵션에는 콜백 설정, 이벤트 방출, 그라데이션 제어 방법 등이 포함됩니다.

사용 사례:

2가지 색상의 3가지 그라데이션을 사용하여 기본 그라데이션 애니메이션을 만듭니다.
3가지 색상의 2가지 그라디언트를 사용하는 복잡한 그라디언트 애니메이션.
하나의 배경 이미지, 두 가지 색상 및 혼합 모드를 사용하여 그라데이션에 애니메이션을 적용합니다.
이미지 마스크를 사용하여 특정 모양 아래에 그라데이션 애니메이션을 만듭니다.
이벤트에 반응하는 그라데이션 애니메이션을 만듭니다.

15, fullPage.js

오픈 소스 JS 라이브러리 fullPage.js를 사용하면 전체 화면 스크롤 웹 사이트나 단일 페이지 웹 사이트를 쉽게 만들 수 있습니다. 사용이 간편하며 사이트 섹션 내에 수평 슬라이더를 추가할 수도 있습니다.

특징 및 이점:

다양한 사용자 정의 및 구성 옵션을 제공합니다.
react-fullpage, angle-fullpage 및 vue-fullpage와 같은 JavaScript 프레임워크를 지원합니다.
수직 및 수평 스크롤을 활성화합니다.
다양한 화면 크기와 여러 브라우저에 적합한 적응형 디자인.
페이지가 로드되면 자동으로 스크롤됩니다.
비디오/이미지 지연 로딩.

사용 사례:

다양한 확장 기능을 사용하여 기본 기능을 개선하세요.
전체 화면 스크롤 사이트를 만드세요.
한 페이지로 구성된 웹사이트를 구축하세요.

16. Leaflet

Leaflet은 사이트에 대화형 지도를 포함할 수 있는 최고의 JavaScript 라이브러리 중 하나입니다. 오픈 소스이며 모바일 친화적이며 무게는 약 39kb입니다. WordPress용 MapPress 지도 플러그인은 Leaflet을 사용하여 대화형 지도를 강화합니다.

특징 및 이점: