บทความ IT เจ๋งๆ
3 JavaScript Libraries ที่มีขนาดเล็กแต่ประสิทธิภาพสูง
01-ก.ค.-20
คัมภีร์เทพ IT
บทความนี้จะมาแนะนำ 3 JavaScript Libraries ที่มีขนาดเล็กแต่ประสิทธิภาพสูง ที่หลายคนอาจยังไม่รู้จัก อีกทั้งมันจะทำให้ชีวิตของคุณ (และของลูกค้าของคุณ) ง่ายขึ้นด้วยการทำให้ Web App มีน้ำหนักเบา
1. ตรวจสอบข้อมูลที่เชื่อถือได้ด้วย xtype.js
คุณเคยเจอปัญหาแบบนี้บ้างหรือไม่ เช่น เมื่อคุณต้องการตรวจสอบ Type ใน JavaScript แต่ Type ของ Function ของ Vanilla JS กลับให้ผลลัพธ์ที่ไม่น่าเชื่อถือ
หากคุณยังไม่ทราบหรือไม่แน่ใจว่าหมายถึงอะไร อยากให้ลองดูที่ด้านล่างนี้
แต่ xtype.js จะช่วยแก้ปัญหาให้คุณได้ โดยคุณสามารถ Install มันผ่าน NPM เพื่อใช้งานกับ React หรือ Node.js เป็นต้น
หรือจะใช้งานใน Browser เมื่อคุณ Download พวกมันมาก็ได้
แต่ก่อนอื่น มาดูกันว่าเราจะแก้ปัญหาข้างต้นได้อย่างไร:
คุณเห็นผลลัพธ์แล้วใช่ไหม ในกรณีที่ไม่ใช้ Type Function แต่กลับมีการส่งผ่าน Value ไปโดยตรง เราจะสามารถได้รายละเอียดเพิ่มเติมเกี่ยวกับ Value ของเรา ดังที่เห็นด้านล่างนี้
มันยอดเยี่ยมมากเลยใช่ไหม และด้วยขนาดเพียง 3kB แถมยังใช้งานได้ทั้งใน Browser และใช้กับ Node.js ได้อีกด้วย
ยังมีอะไรอีกมากมายให้คุณได้ค้นพบใน official documentation
2. จัดการกับ Keyboard Shortcuts ใน Browser ด้วย Mousetrap.js
กรณีที่คุณสร้าง UI ที่มีความซับซ้อนมาก มันจะมีประโยชน์หรืออาจจำเป็นอย่างยิ่งในการมี Keyboard Shortcuts ให้ User ได้ใช้งาน ซึ่งแน่นอนว่า Mousetrap ที่มีเพียง 2.2kB จะเป็นตัวช่วยสำคัญของคุณ
ให้คุณใช้ตัวอย่าง Code ต่อไปนี้จาก CDN: https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js?a4098
แล้ว Import มันลงไปใน <head> ของ Website ของคุณ
หรือ
npm install mousetrap
import Mousetrap from ‘mousetrap’
เราลองมาดูตัวอย่างการ Bind Single Key กัน
หมายเหตุ: สำหรับ Mousetrap มันจะถือว่ามีความแตกต่างระหว่างการใช้ ตัวพิมพ์ใหญ่ หรือ ตัวพิมพ์เล็ก เช่น x จะไม่เท่ากับ X
การ Bind Single Key:
ตัวอย่างนี้ เป็นการตรวจสอบว่า มีการกดหรือปล่อยปุ่มใด ๆ จากแป้นพิมพ์ (เนื่องจากมีการตั้งค่า Keyup)
ตัวอย่างนี้ เป็นการตรวจสอบการกดปุ่ม เมื่อมีการกดปุ่ม a, b และ c ตามลำดับ
นี่เป็นตัวอย่างการสร้าง Key Combination
กรณีสร้าง Key Combination หลาย ๆ ชุด (ซึ่งควรจะสามารถตอบสนองได้ด้วยวิธีการเดียวกัน) จะสามารถส่งผ่านได้ด้วยการใช้ Array
คุณสามารถดูข้อมูลเพิ่มเติมได้ที่ official documentation
3. วิเคราะห์ User Input ด้วย Countable.js
ด้วย Countable.js คุณจะสามารถนับสิ่งที่ User ของคุณ Input ลงใน Text Field แบบ Real Time ไม่ว่ามันจะเป็นการนับ Characters, Words หรือ Paragraphs ก็ตาม
คุณสามารถดูตัวอย่างที่เป็น Live Demo ได้ แต่ทางที่ดี เรามาสร้างมันด้วยตัวเองกันดีกว่า
ให้คุณ Download Library จาก https://github.com/RadLikeWhoa/Countable/archive/master.zip
หรือ Install ผ่าน npm:
npm install countable
ณ ตอนนี้ คุณควรจะเห็น:
ด้วย Countable.count Function เราจะได้เห็นสถานะปัจจุบันของ Text Field ของเรา แต่ถ้าตอนนี้เราทำการเปลี่ยนแปลงอะไรก็ตาม Function ก็จะไม่ถูกเรียกใช้อีกครั้ง
การทำ Trigger ทุก ๆ การเปลี่ยนแปลง Content ใน Text Field จะสามารถทำได้โดย Countable.on Function
คราวนี้ เมื่อใดก็ตามที่เราเปลี่ยนแปลงสิ่งที่เรา Input มันจะมี console.log ใหม่เกิดขึ้น
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด