Cash, lựa chọn thay thế jQuery nhỏ gọn cho trình duyệt hiện đại

Giới thiệu về CashCash

• CashCash là một lựa chọn thay thế jQuery rất nhỏ gọn dành cho các trình duyệt hiện đại (IE11+), cung cấp cú pháp kiểu jQuery để thao tác DOM.
• Thư viện tận dụng các tính năng của trình duyệt hiện đại để giữ codebase ở mức tối thiểu, đồng thời cung cấp các phương thức có thể chain tương tự jQuery với kích thước tệp nhỏ hơn nhiều.
• Dù không hướng tới mức tương thích tính năng 100% với jQuery, nó vẫn bao phủ phần lớn các trường hợp sử dụng hằng ngày.

So sánh

• So sánh kích thước

  • 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
  • Giảm 76.6% kích thước so với jQuery Slim.

• So sánh tính năng

  • Hỗ trợ trình duyệt cũ: Cash ❌, Zepto ❌, jQuery Slim ✔
  • Hỗ trợ trình duyệt hiện đại: Cash ✔, Zepto ✔, jQuery Slim ✔
  • Được bảo trì tích cực: Cash ✔, Zepto ❌, jQuery Slim ✔
  • Sự kiện có namespace: Cash ✔, Zepto ❌, jQuery Slim ✔
  • Codebase TypeScript: Cash ✔, Zepto ❌, jQuery Slim ❌
  • Kiểu TypeScript: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
  • Hỗ trợ build từng phần: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Cách dùng

• Cash có thể dùng qua jsDelivr như sau:

  <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
  <script>
    $(function () {
      $('html').addClass('dom-loaded');
      $('<footer>Appended with Cash</footer>').appendTo(document.body);
    });
  </script>
  

• Cũng có thể dùng qua npm với gói cash-dom:

  import $ from "cash-dom";
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
  

Tài liệu

• Cash cung cấp query selector, các phương thức cho collection và một số phương thức thư viện.
• Có thể tham khảo API của jQuery, và Cash triển khai phần lớn các tính năng tương thích với jQuery.
• Cash có thể được mở rộng bằng các phương thức tùy chỉnh.

Đóng góp

• Nếu phát hiện vấn đề hoặc muốn yêu cầu tính năng, hãy mở issue.
• Để gửi pull request, làm theo các bước sau:
  1. Clone repository: git clone https://github.com/fabiospampinato/cash.git
  2. Di chuyển vào repository đã clone: cd cash
  3. Cài đặt dependencies: npm install
  4. Tự động biên dịch lại Cash khi có thay đổi: npm run dev
  5. Mở bộ test: npm run test
  6. Cập nhật README nếu cần

Lời cảm ơn

• Cảm ơn tất cả những người đã đóng góp cho quá trình phát triển Cash.
• Cảm ơn @hisk đã thiết kế logo.

Giấy phép

• MIT © Fabio Spampinato

[GN⁺]

Ý kiến trên Hacker News

• Trình duyệt giúp thao tác DOM trở nên đơn giản, nên chỉ cần hai dòng code là đủ để làm việc

  • Dùng bằng cách bind document.querySelector và document.querySelectorAll
  • Import hai hàm từ module để sử dụng
  • Liên kết GitHub

• Ưu điểm của jQuery là xử lý danh sách tự động và khả năng truy vấn phần tử cha

  • Vấn đề là nó âm thầm thất bại với danh sách rỗng
  • Nếu triển khai lại jQuery, tôi sẽ cho phát sinh lỗi với tập rỗng và chỉ âm thầm thất bại khi thực sự cần
  • Điều này liên quan đến cuộc tranh luận lâu đời giữa library và framework

• Vì các website mainstream dùng rất nhiều JavaScript, nên việc viết lại toàn bộ library là không hiệu quả

• Giới thiệu một library do cá nhân tự tạo như một lựa chọn thay thế jQuery

  • Animation được triển khai bằng CSS
  • Xử lý linh hoạt cả một phần tử đơn lẻ lẫn danh sách
  • Ưu tiên Vanilla JavaScript, không phụ thuộc, 1 file, dưới 340 dòng
  • Liên kết GitHub

• Biết thêm về sự khác biệt giữa jQuery và Cash

  • Liên kết hướng dẫn migration

• Từng có kinh nghiệm giảm lượng JS bằng Shoestring

  • Cash cũng cung cấp chức năng tương tự nhưng bị ẩn trong tài liệu
  • Dùng các tính năng mặc định của trình duyệt là lựa chọn tốt hơn
  • Trong khi lựa chọn thay thế jQuery là 6kB thì Preact chỉ bằng một nửa kích thước đó

• Mục tiêu là dùng template string của TypeScript để suy luận kiểu của phần tử

  • Ví dụ, $('div#name') được suy luận thành HTMLDivElement

• jQuery 4 là một lựa chọn thay thế dành cho trình duyệt hiện đại

• Đã từng dùng jQuery trong extension trình duyệt, nhưng sau đó chuyển sang library JSX

  • jQuery dễ biến thành code phức tạp
  • Điều quan trọng là dùng đúng công cụ
  • Liên kết library cá nhân

• Thích các library và framework nhỏ, nhưng trên thực tế lại dùng library lớn

  • Framework: 50KB
  • Bản nhỏ: 5KB
  • Library không thể thay thế: 1MB