▲

GN⁺: 현대 브라우저용 소형 jQuery 대안 Cash

 (github.com/fabiospampinato)
4P by neo 24일전 | favorite | 댓글 1개

CashCash 소개

  • CashCash는 현대 브라우저(IE11+)를 위한 매우 작은 jQuery 대안으로, DOM 조작을 위한 jQuery 스타일의 문법을 제공함.
  • 코드베이스를 최소화하기 위해 현대 브라우저 기능을 활용하며, jQuery와 유사한 체인 가능한 메서드를 훨씬 작은 파일 크기로 제공함.
  • jQuery와 100% 기능 일치를 목표로 하지는 않지만, 일상적인 사용 사례 대부분을 커버함.

비교

  • 크기 비교

    • Unminified: Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
    • Minified: Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
    • Minified & Gzipped: Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
    • jQuery Slim 대비 76.6% 크기 감소 효과 있음.

  • 기능 비교

    • 구형 브라우저 지원: Cash ❌, Zepto ❌, jQuery Slim ✔
    • 현대 브라우저 지원: Cash ✔, Zepto ✔, jQuery Slim ✔
    • 적극적인 유지보수: Cash ✔, Zepto ❌, jQuery Slim ✔
    • 네임스페이스 이벤트: Cash ✔, Zepto ❌, jQuery Slim ✔
    • 타입스크립트 코드베이스: Cash ✔, Zepto ❌, jQuery Slim ❌
    • 타입스크립트 타입: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • 부분 빌드 지원: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

사용법

  • Cash는 jsDelivr에서 사용할 수 있으며, 다음과 같이 사용 가능함: 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • npm을 통해 cash-dom 패키지로도 사용 가능함: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

문서

  • Cash는 쿼리 선택자, 컬렉션 메서드 및 일부 라이브러리 메서드를 제공함.
  • jQuery의 API를 참고할 수 있으며, Cash는 jQuery와 호환되는 대부분의 기능을 구현함.
  • Cash는 사용자 정의 메서드로 확장 가능함.

기여

  • 문제를 발견하거나 기능 요청이 있을 경우 이슈를 열어야 함.
  • 풀 리퀘스트를 하려면 다음 단계를 따름:
    1. 저장소 클론: git clone https://github.com/fabiospampinato/cash.git
    2. 클론한 저장소로 이동: cd cash
    3. 의존성 설치: npm install
    4. 변경 시 자동으로 Cash 재컴파일: npm run dev
    5. 테스트 스위트 열기: npm run test
    6. 필요 시 README 업데이트

감사

  • Cash 개발에 기여한 모든 기여자들에게 감사함.
  • 로고 디자인을 담당한 @hisk에게 감사함.

라이선스

  • MIT © Fabio Spampinato
▲
neo 24일전  [-]
Hacker News 의견

  • 브라우저가 DOM 조작을 간단하게 해주어, 두 줄의 코드만으로 충분히 작업할 수 있음

    • document.querySelector와 document.querySelectorAll을 바인딩하여 사용함
    • 모듈에서 두 함수를 가져와 사용함
    • GitHub 링크

  • jQuery의 장점은 자동 리스트 처리와 부모 쿼리 기능임

    • 빈 리스트에서 조용히 실패하는 점이 문제임
    • jQuery를 다시 구현한다면, 빈 셋에서 오류를 발생시키고 필요할 때만 조용히 실패하도록 할 것임
    • 라이브러리와 프레임워크의 오래된 논쟁과 관련됨

  • 메인스트림 웹사이트가 많은 JavaScript를 사용하기 때문에, 전체 라이브러리를 다시 작성하는 것은 비효율적임

  • jQuery 대안으로 개인적으로 만든 라이브러리 소개

    • 애니메이션은 CSS로 구현
    • 하나의 요소나 리스트를 투명하게 사용
    • Vanilla JavaScript 우선, 의존성 없음, 1개의 파일, 340줄 이하
    • GitHub 링크

  • jQuery와 Cash의 차이점에 대해 알게 됨

  • Shoestring을 사용하여 JS를 줄였던 경험

    • Cash도 유사한 기능을 제공하지만 문서에서 숨겨져 있음
    • 브라우저의 기본 기능을 사용하는 것이 더 나은 선택임
    • jQuery 대안이 6kB인데 반해 Preact는 절반 크기임

  • TypeScript 템플릿 문자열을 사용하여 요소의 타입을 추론하는 목표

    • 예를 들어, $(&#x27;div#name&#x27;)가 HTMLDivElement로 추론됨

  • jQuery 4는 현대 브라우저를 위한 대안임

  • 브라우저 확장 프로그램에서 jQuery를 사용했으나, JSX 라이브러리로 전환함

  • 작은 라이브러리와 프레임워크를 좋아하지만, 실제로는 큰 라이브러리를 사용하게 됨

    • 프레임워크: 50KB
    • 작은 버전: 5KB
    • 대체할 수 없는 라이브러리: 1MB
답변달기