รวม Code Error Windows ไว้ทั้งหมด ครบ จบ เจอ Error เช็คโค้ดเลย

ใน
0

รวม JS Library ช่วยชีวิตชาว Dev!

ใน

รวม Javascript Library


jQuery

jQuery สำหรับสายเว็บคงไม่มีใครไม่รู้จัก เป็นไลบรารี่ที่ใช้งานง่ายมาก และช่วยให้การทำงานระหว่างหลังบ้าน และหน้าบ้าน ง่ายสุดๆ เหมาะสำหรับงานเร็วๆ ไม่ซับซ้อนมากนัก

jQuery เป็นไลบรารี JavaScript แบบคลาสสิกที่รวดเร็ว น้ำหนักเบา และเต็มไปด้วยฟีเจอร์ต่างๆ สร้างขึ้นในปี 2549 โดย John Resig ที่ BarCamp NYC jQuery เป็นซอฟต์แวร์โอเพ่นซอร์สฟรีพร้อมใบอนุญาตจาก MIT

มันทำให้สิ่งต่าง ๆ ง่ายขึ้นสำหรับการจัดการและการแวะผ่านเอกสาร HTML, แอนิเมชั่น, การจัดการเหตุการณ์ และ Ajax

จากข้อมูลของW3Techs พบ ว่า 77.6% ของเว็บไซต์ทั้งหมดใช้ jQuery (ณ วันที่ 23 กุมภาพันธ์ 2021)

คุณสมบัติและประโยชน์:

  • มี API ที่เรียบง่ายและใช้งานง่าย
  • ใช้ตัวเลือก CSS3 ในการจัดการคุณสมบัติสไตล์และการค้นหาองค์ประกอบ
  • jQuery มีขนาดเล็ก ใช้พื้นที่เพียง 30 kb ในgzipและย่อขนาด และรองรับโมดูล AMD
  • เนื่องจากไวยากรณ์ของมันค่อนข้างคล้ายกับ CSS จึงเป็นเรื่องง่ายสำหรับผู้เริ่มต้นในการเรียนรู้
  • มีปลั๊กอินเสริมเยอะมาก
  • ความคล่องตัวด้วย API ที่รองรับเบราว์เซอร์หลายตัว รวมถึง Chrome และ Firefox

กรณีการใช้งาน:

  • การจัดการ DOM ด้วยตัวเลือก CSS ที่ใช้เกณฑ์บางอย่างในการเลือกโหนดใน DOM เกณฑ์เหล่านี้ประกอบด้วยชื่อองค์ประกอบและคุณลักษณะ (เช่น คลาสและรหัส)
  • การเลือกองค์ประกอบใน DOM โดยใช้ Sizzle (เอ็นจิ้นโอเพ่นซอร์สและตัวเลือกหลายเบราว์เซอร์)
  • การสร้างเอฟเฟกต์ เหตุการณ์ และภาพเคลื่อนไหว
  • การแยกวิเคราะห์ JSON
  • การพัฒนาแอพพลิเคชั่นอาแจ็กซ์
  • การตรวจจับคุณสมบัติ
  • การควบคุมการประมวลผลแบบอะซิงโครนัสด้วยอ็อบเจ็กต์ Promise และ Deferred




React.js (หรือเรียกอีกอย่างว่า ReactJS หรือ React) เป็นไลบรารี JavaScript แบบโอเพ่นซอร์ส มันถูกสร้างขึ้นในปี 2013 โดย Jordan Walke ซึ่งทำงานที่ Facebook ในตำแหน่งวิศวกรซอฟต์แวร์

ขณะนี้มีใบอนุญาต MIT แต่เริ่มแรกเปิดตัวภายใต้ Apache License 2.0 React ได้รับการออกแบบมาเพื่อให้การสร้าง UI แบบโต้ตอบไม่ยุ่งยาก

เพียงออกแบบมุมมองที่เรียบง่ายสำหรับแต่ละรัฐในแอปของคุณ จากนั้นจะเรนเดอร์และอัปเดตส่วนประกอบที่เหมาะสมอย่างมีประสิทธิภาพเมื่อมีการเปลี่ยนแปลงข้อมูล


คุณสมบัติและประโยชน์:

  • โค้ด React ประกอบด้วยส่วนประกอบหรือเอนทิตีที่ต้องการเรนเดอร์ให้กับองค์ประกอบเฉพาะใน DOM ด้วยความช่วยเหลือของไลบรารี React DOM
  • โดยจะใช้ DOM เสมือนโดยการสร้างแคชในหน่วยความจำในโครงสร้างข้อมูล คำนวณความแตกต่าง และอัปเดต DOM การแสดงผลในเบราว์เซอร์อย่างมีประสิทธิภาพ
  • เนื่องจากการเรนเดอร์แบบเลือกนี้ ประสิทธิภาพของแอปจึงเพิ่มขึ้นในขณะที่ประหยัดความพยายามของนักพัฒนาในการคำนวณเค้าโครงหน้ารูปแบบ CSSและการแสดงผลแบบเต็มหน้าใหม่
  • โดยใช้วิธีการวงจรการใช้งาน เช่น การเรนเดอร์และcomponentDidMount เพื่ออนุญาตการเรียกใช้โค้ด ณ จุดใดจุดหนึ่งตลอดอายุการใช้งานของเอนทิตี
  • รองรับ JavaScript XML (JSX) ที่รวมทั้ง JS และ HTML ช่วยในการเรนเดอร์ส่วนประกอบด้วยองค์ประกอบที่ซ้อนกัน, คุณลักษณะ, นิพจน์JS และคำสั่งแบบมีเงื่อนไข
กรณีการใช้งาน:

  • ทำหน้าที่เป็นฐานในการพัฒนาแอปพลิเคชันบนมือถือหรือหน้าเดียว
  • แสดงผลสถานะให้กับ DOM และจัดการมัน
  • การสร้างอินเทอร์เฟซผู้ใช้ที่มีประสิทธิภาพพร้อมทั้งพัฒนาแอปพลิเคชันเว็บและไซต์เชิงโต้ตอบ
  • การดีบักและการทดสอบทำได้ง่ายขึ้น
คะแนนโบนัส: Facebook , Instagram และ Whatsapp ทั้งหมดใช้ React







D3.js



Data-Driven Documents (D3) หรือD3.jsเป็นอีกหนึ่งไลบรารี JS ที่มีชื่อเสียงซึ่งนักพัฒนาใช้เพื่อจัดทำเอกสารการจัดการตามข้อมูล เปิดตัวในปี 2554 ภายใต้ใบอนุญาต BSD

คุณสมบัติและประโยชน์:

โดยเน้นมาตรฐานเว็บและให้ความสามารถเบราว์เซอร์สมัยใหม่แก่คุณ โดยไม่จำกัดเพียงเฟรมเวิร์กเดียว
D3.js ช่วยให้แสดงข้อมูลเป็นภาพได้อย่างมีประสิทธิภาพ
รองรับ HTML, CSS และ SVG
ใช้แนวทางที่ขับเคลื่อนด้วยข้อมูลและนำไปใช้เพื่อจัดการ DOM
D3.js ทำงานรวดเร็วและรองรับพฤติกรรมและชุดข้อมูลแบบไดนามิกจำนวนมากสำหรับภาพเคลื่อนไหวและการโต้ตอบ
ลดค่าใช้จ่าย ทำให้ความซับซ้อนของกราฟิกกว้างขึ้นภายในอัตราเฟรมที่สูง


กรณีการใช้งาน:

เพื่อสร้างการแสดงภาพข้อมูลเชิงโต้ตอบและไดนามิก
เพื่อผูกข้อมูลเข้ากับ DOM และทำการเปลี่ยนแปลงที่ขับเคลื่อนด้วยข้อมูล ตัวอย่างเช่น คุณสามารถสร้างตาราง HTML จากอาร์เรย์ตัวเลข จากนั้นสร้างแผนภูมิแท่ง SVG หรือพล็อตพื้นผิว 3 มิติโดยใช้ D3.js
รหัสการทำงานของมันทำให้สามารถนำกลับมาใช้ใหม่ได้ด้วยโมดูลจำนวนมาก
D3 มีโหมดต่างๆ ในการกลายพันธุ์โหนด เช่น การเปลี่ยนสไตล์หรือคุณลักษณะโดยใช้แนวทางการประกาศ การเพิ่ม การเรียงลำดับ หรือการลบโหนด การเปลี่ยนข้อความหรือเนื้อหา HTML เป็นต้น
เพื่อสร้างทรานซิชั่นแบบเคลื่อนไหว, เรียงลำดับทรานซิชั่นที่ซับซ้อนผ่านเหตุการณ์, ดำเนินการทรานซิชั่น CSS3 เป็นต้น



Underscore.js

ขีดล่างคือไลบรารียูทิลิตี้ JavaScript ที่มีฟังก์ชันต่างๆ สำหรับงานการเขียนโปรแกรมทั่วไป สร้างขึ้นในปี 2009 โดย Jeremy Askenas และเผยแพร่พร้อมใบอนุญาต MIT ตอนนี้ Lodash แซงหน้าไปแล้ว


คุณสมบัติและประโยชน์:

  • คุณลักษณะของมันคล้ายกับ Prototype.js (ไลบรารียูทิลิตี้ยอดนิยมอีกแห่ง) แต่ Underscore มีการออกแบบการเขียนโปรแกรมเชิงฟังก์ชันมากกว่าส่วนขยายต้นแบบวัตถุ
  • มีฟังก์ชันมากกว่า 100 ฟังก์ชันใน 4 ประเภทที่แตกต่างกันตามประเภทข้อมูลที่พวกเขาจัดการ เหล่านี้เป็นฟังก์ชันที่ต้องจัดการ:

  • Objects
  • Arrays
  • Both objects and arrays
  • Other functions
  • ขีดล่างเข้ากันได้กับChrome, Firefox, Edge และอื่นๆ


กรณีการใช้งาน:

รองรับตัวช่วยด้านการทำงาน เช่น ตัวกรอง แผนที่ ฯลฯ พร้อมด้วยฟังก์ชันพิเศษ เช่น การผูก การจัดทำดัชนีอย่างรวดเร็ว การสร้างเทมเพลต JavaScript การทดสอบคุณภาพ ฯลฯ



animejs.com

หากคุณต้องการเพิ่มภาพเคลื่อนไหวลงในไซต์หรือแอปพลิเคชันของคุณAnime.jsเป็นหนึ่งในไลบรารี JavaScript ที่ดีที่สุดที่คุณสามารถหาได้ เปิดตัวในปี 2019 และมีน้ำหนักเบาพร้อม API ที่ทรงพลังแต่เรียบง่าย


คุณสมบัติและประโยชน์:

  • Anime.js ทำงานด้วยแอตทริบิวต์ DOM, คุณสมบัติ CSS, SVG , การแปลง CSS และวัตถุ JS
  • ใช้งานได้กับเบราว์เซอร์ที่หลากหลาย เช่น Chrome, Safari, Firefox, Opera เป็นต้น
  • ซอร์สโค้ดของมันนั้นง่ายต่อการถอดรหัสและใช้งาน
  • วิธีการสร้างภาพเคลื่อนไหวที่ซับซ้อน เช่น การทับซ้อนกันและการติดตามผลแบบสลับซับซ้อนจะง่ายขึ้น

กรณีการใช้งาน:

  • คุณสามารถใช้ระบบอันน่าทึ่งของ Anime.js กับคุณสมบัติและเวลาได้
  • สร้างการแปลง CSS แบบเลเยอร์ที่มีการกำหนดเวลาหลายรายการพร้อมกันบนองค์ประกอบ HTML เดียว
  • เล่น หยุดชั่วคราว ทริกเกอร์ ย้อนกลับ และควบคุมเหตุการณ์ในลักษณะซิงโครไนซ์โดยใช้ฟังก์ชั่นการโทรกลับและการควบคุมของ Anime.js




Animate On Scroll ใช้งานได้ดีกับเว็บไซต์พารัลแลกซ์หน้าเดียว ไลบรารี JS นี้เป็นโอเพ่นซอร์สโดยสมบูรณ์และช่วยให้คุณเพิ่มภาพเคลื่อนไหวที่เหมาะสมบนหน้าเว็บของคุณที่ดูไพเราะเมื่อคุณเลื่อนลงหรือขึ้น



มันทำให้การออกแบบเว็บไซต์ของคุณสนุกสนานโดยการเพิ่มเอฟเฟกต์จาง ตำแหน่งจุดยึดคงที่ และอื่นๆ เพื่อสร้างความพึงพอใจให้กับผู้ใช้

คุณสมบัติและประโยชน์:
  • ไลบรารีสามารถตรวจจับตำแหน่งองค์ประกอบและเพิ่มคลาสที่เหมาะสมในขณะที่ปรากฏในวิวพอร์ต
  • นอกจากการเพิ่มภาพเคลื่อนไหวได้อย่างง่ายดายแล้ว ยังช่วยให้คุณเปลี่ยนภาพเคลื่อนไหวบนวิวพอร์ตได้อีกด้วย
  • มันทำงานได้อย่างราบรื่นบนอุปกรณ์ต่าง ๆ ไม่ว่าจะเป็นโทรศัพท์มือถือ แท็บเล็ต หรือคอมพิวเตอร์
  • เนื่องจากเขียนด้วย JavaScript ล้วนๆ จึงไม่มีการขึ้นต่อกัน
กรณีการใช้งาน:
  • ทำให้องค์ประกอบเคลื่อนไหวตามตำแหน่งขององค์ประกอบอื่น
  • ทำให้องค์ประกอบเคลื่อนไหวตามตำแหน่งหน้าจอ
  • ปิดการใช้งานภาพเคลื่อนไหวองค์ประกอบบนมือถือ
  • สร้างภาพเคลื่อนไหวที่แตกต่างกัน เช่น จาง พลิก สไลด์ ซูม ตำแหน่งจุดยึด ฯลฯ

ความคิดเห็น

แสดงความคิดเห็น