15가지 흥미로운 JavaScript 및 CSS 라이브러리

<p>

<p>11월의 프런트엔드 기술 목록에는 새로운 CSS 프레임워크, node.js 패키지 관리자, 아이콘용 Pure CSS 솔루션 구현을 위한 도구가 포함된 몇 가지 놀라운 GitHub 프로젝트가 포함되어 있습니다. 로딩 효과 및 툴팁.

<p>그럼 살펴보겠습니다. 재미있게 보내세요!

1. Wing

<p>

<p>Wing은 12열 반응형 웹 그리드와 기본 스타일을 제공하는 마이크로(압축 후 4KB) 반응형 CSS 프레임워크입니다. 구성 요소 세트는 웹 사이트 구축 작업을 위한 견고한 기반을 마련할 수 있습니다. 물론 이 프로젝트의 멋진 점은 HTML 요소의 대부분이 추가 클래스 없이도 자동으로 스타일이 지정된다는 것입니다. 당신이 그것을 좋아하길 바랍니다!

<p>여기: 윙 프로젝트 주소

2. 면도

<p>

<p> 최대 높이를 기준으로 설정된 html 요소에 맞게 여러 줄의 텍스트를 자르고 텍스트의 숨겨진 <span> 요소에 원본 텍스트 문자열을 저장하는 종속성이 없는 경량 JavaScript 플러그인은 페이지에 그대로 유지될 수 있습니다. Shave는 어떤 라이브러리에도 의존하지 않으며 jQuery에서 플러그인의 독립형 버전을 제공합니다.

<p>여기: Shave 프로젝트 주소

3. Cerebral

<p>

<p>JavaScript MVC 애플리케이션 상태 관리자이며 독립형 디버거가 있습니다. Cerebral에서 애플리케이션 상태는 모든 서버 측 및 클라이언트 측 상태를 관리하는 단일 트리 모델에 저장됩니다.

<p>디버거에는 모델, 컨트롤러, 뷰에 대한 실시간 관리 권한이 있습니다.

<p>여기: 대뇌 프로젝트 주소

4. Wenk

<p>

<p>Wenk는 순수 CSS로 작성된 가벼운 텍스트 도구 설명 라이브러리입니다. 압축된 버전은 700바이트에 불과하지만 여전히 관리가 가능하며 일부 사용자 정의 옵션을 제공합니다. 다양한 툴팁의 크기, 위치, 텍스트 정렬 등.

<p>여기: Wenk 프로젝트 주소

5. CSS 로더

<p>

<p>CSS 로더 매우 유용한 로더입니다. 이를 통해 개발자는 순수 CSS 파일과 빈 <p> 요소를 사용하여 로딩 표시기를 빠르게 만들 수 있습니다.

<p>여기: CSS Loader 프로젝트 주소

6. Yarn

<p>

<p>믿습니다. 곧 일어날 것입니다. Facebook에서 출시한 오픈 소스 Node.js 패키지 관리자인 Yarn에 대해 누구나 들어보셨을 것입니다. 패키지 설치 시간을 크게 줄일 수 있는 강력한 캐싱 시스템을 갖추고 있으며, 프로젝트에 참여하는 모든 사용자에 대해 동일한 노드 모듈(node_modules) 디렉터리 구조를 유지할 수 있어 추적하기 어려운 버그를 줄이고 여러 시스템에 복제하는 데 도움이 됩니다.

<p>NPM과 배경은 다르지만 Yarn을 사용하는 것은 NPM을 사용하는 것과 거의 동일하므로 개발자는 이를 더 빨리 이해해야 합니다!

<p>여기: Yarn 프로젝트 주소

7. 캔버스 게이지

<p>

<p>캔버스 게이지 순수 JavaScript 및 HTML5 Canvas를 사용하여 제작된 완전히 사용자 정의 가능한 도구로, 이를 사용하여 차량 속도계 및 온도계와 같은 측정 장치를 만들 수 있습니다.

<p>코드 크기가 작고 의존성이 없기 때문에 IoT 기기에도 적합합니다. 홈페이지 예시를 통해 이해하실 수 있습니다.

<p>여기: Canvas Gauges 프로젝트 주소

8. CSS 아이콘

<p>

<p>CSS Icon은 500개 이상의 순수 CSS 코드 구현을 함께 제공하는 아이콘 컬렉션 웹사이트입니다. 사용법도 매우 간단합니다. 아이콘을 클릭하면 해당 아이콘에 해당하는 HTML과 CSS 코드가 팝업되는 동시에 CSS 코드가 어떤 부분인지, 아이콘의 요소가 무엇인지 직관적으로 이해할 수 있습니다. 구현되었습니다.

<p>이렇게 훌륭한 프로젝트인데 만점을 받을 만할까요? 와서 즐겨보세요!

<p>여기: CSS 아이콘 프로젝트 주소

9. CurrentFormatter.jsCurrencyFormatter.js는 간단하고 실용적인 순수 JS 형식화 통화 라이브러리입니다. 155개 국가의 통화 형식을 지원하고 700개 이상의 언어로 현지화 설정을 지원합니다.

<p>또한 사용하지 않는 일부 통화 형식도 처리할 수 있어 매우 강력합니다.

<p>여기: MoneyFormatter.js 프로젝트 주소

10. KUTE.js

<p>

<p>고성능 네이티브 JavaScript 애니메이션 엔진: KUTE.js의 핵심 라이브러리는 모든 기본 애니메이션 방법을 제공합니다. KUTE의 기능을 풍부하게 하기 위해 많은 플러그인을 추가하세요. 동시에 jQuery, SVG, CSS 속성 등을 동시에 사용할 수 있는 별도의 확장 기능도 있습니다.

<p>여기: KUTE.js 프로젝트 주소

11. Vue Material

<p>

<p> Vue Material은 Material Design 사양에 따라 구축된 경량 Vue.js 프레임워크입니다. Vue2.0을 통해 최신 웹 브라우저를 지원하여 애플리케이션을 구축할 수 있도록 재사용 가능한 고품질 구성 요소 집합과 일련의 UI 요소를 제공하는 것을 목표로 합니다.

<p>라이브러리도 구현하기 쉽고 Vue.js 외에는 종속성이 없습니다.

<p>여기: Vue Material 프로젝트 주소

12. 테스트 카페

<p>

<p>테스트 Cafe는 순수 Node.js로 작성된 웹 애플리케이션을 테스트하기 위한 엔드투엔드 솔루션입니다. Node.js를 기반으로 하며 NPM 패키지 이외의 다른 설치가 필요하지 않습니다. 브라우저 플러그인이나 컴파일러가 필요하지 않습니다.

<p>테스트를 작성한 후 Test Cafe를 실행하면 브라우저 테스트를 수행하고 결과를 수집하며 보고서가 생성됩니다.

<p>여기: 테스트 카페 프로젝트 주소

13. Core.css

<p>

<p> Core.css는 반응형 웹사이트를 구축하기 위한 경량 프레임워크입니다. 압축률은 1.3kb에 불과하며 사전 설정된 요소나 내장 애니메이션이 없습니다. 따라서 소규모 웹 프로젝트를 구축하는 데 적합합니다.

<p>여기: Core.css 프로젝트 주소

14. Flv.js

<p>

<p>Bilibili의 모든 사람들이 이에 대해 잘 알고 있을 것이라고 믿습니다. Flv.js는 bilibili 웹 사이트에서 개발된 오픈 소스 HTML5 Flash 비디오(FLV) 플레이어로 순수하게 기본 JavaScript(ECMAScript 6로 작성)로 개발되었으며 사용하지 않습니다. 플래시.

<p> 작동 원리는 Flv.js가 JavaScript로 flv 파일 스트림을 구문 분석하고 이를 실시간으로 fmp4로 캡슐화한 후 미디어 소스 확장을 통해 브라우저에 공급하여 FLV 형식 비디오의 재생을 실현한다는 것입니다.

<p>여기: Flv.js 프로젝트 주소

15. Next.js

<p>

<p>Next.js는 React를 기반으로 한 범용 JavaScript 프레임워크입니다. 새로운 JavaScript 웹 애플리케이션을 생성하는 편리한 방법을 제공합니다. 개발자는 더 이상 Webpack 또는 Babel 구성을 설정하는 데 너무 많은 시간을 소비할 필요가 없습니다.

<p>여기: Next.js 프로젝트 주소

<p>번역자 메모: Next.js에 대한 자세한 소개는 다음을 참조하세요. 여기를 참조하세요.

<p>위 내용은 모두 이 글에 공유되어 있습니다. 귀하의 프로젝트에 적합한 프런트엔드 라이브러리를 찾으시기 바랍니다.

<p> 위 내용은 흥미로운 JavaScript 및 CSS 라이브러리 15개에 대한 자세한 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!

<p>