Cash ทางเลือกแทน jQuery ขนาดเล็กสำหรับเบราว์เซอร์สมัยใหม่

 (github.com/fabiospampinato)
4 คะแนน โดย GN⁺ 2024-11-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

แนะนำ CashCash

  • CashCash เป็นทางเลือกแทน jQuery ขนาดเล็กมากสำหรับเบราว์เซอร์สมัยใหม่ (IE11+) โดยมีไวยากรณ์สไตล์ jQuery สำหรับการจัดการ DOM
  • ใช้ความสามารถของเบราว์เซอร์สมัยใหม่เพื่อลดขนาดโค้ดเบสให้เล็กที่สุด และมีเมธอดแบบ chainable คล้าย 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
    • มีผลในการลดขนาดลง 76.6% เมื่อเทียบกับ jQuery Slim

  • เปรียบเทียบฟีเจอร์

    • รองรับเบราว์เซอร์รุ่นเก่า: Cash ❌, Zepto ❌, jQuery Slim ✔
    • รองรับเบราว์เซอร์สมัยใหม่: Cash ✔, Zepto ✔, jQuery Slim ✔
    • บำรุงรักษาอย่างต่อเนื่อง: Cash ✔, Zepto ❌, jQuery Slim ✔
    • อีเวนต์แบบ namespace: Cash ✔, Zepto ❌, jQuery Slim ✔
    • โค้ดเบส TypeScript: Cash ✔, Zepto ❌, jQuery Slim ❌
    • TypeScript types: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • รองรับ partial build: 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 มี query selector, collection methods และเมธอดของไลบรารีบางส่วนให้ใช้งาน
  • สามารถอ้างอิง API ของ jQuery ได้ และ Cash ก็รองรับฟังก์ชันส่วนใหญ่ที่เข้ากันได้กับ jQuery
  • Cash สามารถขยายเพิ่มได้ด้วยเมธอดที่ผู้ใช้กำหนดเอง

การมีส่วนร่วม

  • หากพบปัญหาหรือต้องการขอฟีเจอร์ ควรเปิด issue
  • หากต้องการส่ง pull request ให้ทำตามขั้นตอนต่อไปนี้:
    1. โคลนรีโพซิทอรี: git clone https://github.com/fabiospampinato/cash.git
    2. ย้ายเข้าไปยังรีโพซิทอรีที่โคลนมา: cd cash
    3. ติดตั้ง dependencies: npm install
    4. คอมไพล์ Cash ใหม่อัตโนมัติเมื่อมีการเปลี่ยนแปลง: npm run dev
    5. เปิด test suite: npm run test
    6. อัปเดต README หากจำเป็น

คำขอบคุณ

  • ขอขอบคุณผู้มีส่วนร่วมทุกคนที่ช่วยพัฒนา Cash
  • ขอขอบคุณ @hisk ที่ออกแบบโลโก้

ไลเซนส์

  • MIT © Fabio Spampinato

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-11-04
ความคิดเห็นจาก Hacker News

  • เบราว์เซอร์ช่วยให้การจัดการ DOM ง่ายขึ้น จึงทำงานได้ด้วยโค้ดเพียงสองบรรทัด

    • ใช้การ bind document.querySelector และ document.querySelectorAll
    • นำเข้าทั้งสองฟังก์ชันจากโมดูลมาใช้งาน
    • ลิงก์ GitHub

  • ข้อดีของ jQuery คือการจัดการลิสต์แบบอัตโนมัติและความสามารถในการ query ไปยัง parent

    • ปัญหาคือมันล้มเหลวแบบเงียบ ๆ เมื่อเป็นลิสต์ว่าง
    • ถ้าจะสร้าง jQuery ขึ้นใหม่ จะให้เกิดข้อผิดพลาดเมื่อเป็นเซ็ตว่าง และให้ล้มเหลวแบบเงียบ ๆ เฉพาะเมื่อจำเป็นเท่านั้น
    • เกี่ยวข้องกับข้อถกเถียงเก่าแก่ระหว่างไลบรารีกับเฟรมเวิร์ก

  • เนื่องจากเว็บไซต์กระแสหลักใช้ JavaScript จำนวนมาก การเขียนไลบรารีทั้งหมดขึ้นใหม่จึงไม่มีประสิทธิภาพ

  • แนะนำไลบรารีที่ทำขึ้นเองเป็นทางเลือกของ jQuery

    • แอนิเมชันทำด้วย CSS
    • ใช้งานได้อย่างโปร่งใสทั้งกับองค์ประกอบเดี่ยวหรือรายการ
    • ให้ความสำคัญกับ Vanilla JavaScript, ไม่มี dependency, มีไฟล์เดียว, ไม่เกิน 340 บรรทัด
    • ลิงก์ GitHub

  • ได้ทราบถึงความแตกต่างระหว่าง jQuery กับ Cash

  • เคยมีประสบการณ์ลดขนาด JS โดยใช้ Shoestring

    • Cash ก็มีความสามารถคล้ายกัน แต่ถูกซ่อนไว้ในเอกสาร
    • การใช้ความสามารถพื้นฐานของเบราว์เซอร์เป็นทางเลือกที่ดีกว่า
    • ทางเลือกแทน jQuery มีขนาด 6kB ขณะที่ Preact มีขนาดเพียงครึ่งเดียว

  • เป้าหมายคือใช้ template string ของ TypeScript เพื่ออนุมานชนิดของ element

    • ตัวอย่างเช่น $('div#name') จะถูกอนุมานเป็น HTMLDivElement

  • jQuery 4 คือทางเลือกสำหรับเบราว์เซอร์สมัยใหม่

  • เคยใช้ jQuery ในส่วนขยายเบราว์เซอร์ แต่เปลี่ยนไปใช้ไลบรารี JSX

    • jQuery ทำให้โค้ดกลายเป็นโค้ดที่ซับซ้อนได้ง่าย
    • การเลือกใช้เครื่องมือที่เหมาะสมเป็นสิ่งสำคัญ
    • ลิงก์ไลบรารีส่วนตัว

  • ชอบไลบรารีและเฟรมเวิร์กขนาดเล็ก แต่ในความเป็นจริงกลับต้องใช้ไลบรารีขนาดใหญ่

    • เฟรมเวิร์ก: 50KB
    • เวอร์ชันเล็ก: 5KB
    • ไลบรารีที่แทนไม่ได้: 1MB