ของมันต้องมี สำหรับคนทำงานฝั่งหน้าบ้าน
ถ้าพูดถึงภาษา JavaScript แล้ว ผมคิดว่าสมัยนี้ frontend developer น่าจะต้องเขียนได้ และเป็นอีกข้อนึงที่ควรจะมีในเรซูเม่เพื่อยืนพื้น ถึงแม้ว่าจะมาทางสายดีไซน์เนอร์มาก่อน จะจับ HTML, CSS มามากแค่ไหนก็ตาม แต่ในเว็บไซต์สมัยใหม่ รวมไปถึง cross-mobile platform ต่างๆ ก็ต้องใช้ JavaScript ในการหากินกันทั้งนั้น ผมคิดว่าในชั่วโมงนี้แทบจะไม่ต้องเขียนถึงเรื่องของ jQuery กันอีกแล้วมั้ง เพราะมันเป็นเรื่องเก่าที่หาอ่านจากที่ไหนก็ได้ แล้วก็คิดว่าคนส่วนใหญ่ที่ทำงานสายนี้น่าจะต้องใช้เป็นกันเกือบหมดแล้วสำหรับการใช้ selector ประเภทต่างๆ
สำหรับมือเก่า หรือมือใหม่ที่เขียน JavaScript มาพอสมควร บางทีการใช้ jQuery อย่างเดียวก็อาจจะไม่สะดวก ในการจัดการพวกค่าใน array, object หรือ string มากนัก ลองนึกภาพถึงเรากำลังทำเว็บไซต์ขนาดกลาง ถึงใหญ่ที่มีการใช้งานดึงข้อมูลมาจากไหนสักแห่ง แล้วต้องจัดการข้อมูลนั้นในฝั่งหน้าบ้าน อาจจะแสดงผลที่หน้าข้อมูลผู้ใช้, ลิสต์รายการสินค้าหลายประเภท หรือการจัดการการแสดงผลของ element สิ่งเหล่านี้อาจจะเขียนกันเองได้ แต่อาจจะต้องแลกมาด้วยระยะเวลาในการทำงานที่มากขึ้น.. แล้วถ้าหากสมมติมี library สักตัวที่เป็นเหมือน swiss army knife ช่วยในเรื่องการจัดการจิปาถะอย่าง กรองข้อมูล, เรียงลำดับ, หาค่ามาก ค่าน้อย, หา item จาก array หรือ object, เอาเฉพาะค่าแรก ค่าสุดท้าย ฯลฯ ให้ก็จะช่วยทุนเวลาไปได้มากเลยใช่ไหมล่ะครับ
ผมกำลังพูดถึง Lodash ซึ่งเป็น swiss army knife หรือที่เรียกว่า utility library อย่างที่กล่าวมานั่นแหละ ตรงนี้ใครที่เคยได้ยินชื่อ underscore.js มาบ้าง ก็ให้รู้เลยว่ามันทำหน้าที่คล้ายกัน อาจจะมีบางฟังก์ชั่นที่เรียกไม่เหมือนกันแค่นั้น เขียนเล่าไปมันก็ไม่เห็นภาพ งั้นมาลองสร้างไฟล์ตัวอย่างทดสอบการทำงานกันง่ายๆ พร้อมกันดีกว่า
เราจะใช้ CDN จาก unpkg และเริ่มตรงที่เขียนว่า code here.. ได้เลย
Lodash (_) มันดียังไง มันช่วยอะไรคนเขียน JavaScript บ้าง?
มากมายเหลือล้น อย่างน้อยคือมันก็ช่วยทุ่นเวลาในการเขียนฟังก์ชั่นบางฟังก์ชั่นโดยที่เราไม่ต้องไปเสียเวลา stackoverflow หาข้อมูลว่าฟังก์ชั่นแบบนี้เขียนยังไง ประหยัดพื้นที่ในไฟล์ js ของคุณไปได้หลายสิบ บางทีอาจจะร้อยบรรทัดเลยก็ได้ ยกตัวอย่างเช่น เราเรียก api มาตัวนึงจาก Instagram แล้วได้รูปทั้งหมดมา 3 รูป อยู่ในรูปแบบ object (หรือ array of object ก็ได้ถ้ามันทำให้เห็นภาพมากขึ้น)
แล้วเกิดอยากรู้ หรือต้องการแสดงผลให้ผู้ใช้เห็นว่ารูปที่มียอด likes เกิน 20 นั้นมีกี่รูปอะไรบ้าง
แทนที่จะไปเขียน loop ทุกตัวเพื่อเช็คยอด like แล้วเก็บค่าใน array ใหม่ แล้วค่อยเอาค่าใน array ใหม่มาแสดง (แค่คิดก็ไม่อยากนึกละ ว่าจะต้องเขียนกี่บรรทัด) ก็ใช้คำสั่ง filter ของ lodash หาจากใน array of object นั้นเลยด้วยคำสั่งแบบนี้
เพียงเท่านี้เราก็จะได้เฉพาะ object ที่มีคนกด like มากกว่า 20 คนแล้ว หรือเวลาที่มีรูปภาพเยอะๆ ต้องการจะสุ่มนำมาแสดงให้ผู้ใช้เห็นแบบไม่ต้องเรียงลำดับก่อนหลัง ก็สามารถทำได้ง่ายๆ ด้วยคำสั่ง _.shuffle เช่น
มากกว่านั้นมันยังช่วยในการทำงานเกี่ยวกับพวกตัวเลขเช่น หาค่าสูง ต่ำ เปรียบเทียบ หรือปัดเศษเยอะแยะมากมายได้เหมือนกับการเขียน JavaScript ปรกติ แต่ให้อยู่ในรูปไวยกรณ์ที่อ่านง่ายกว่ามาก รวมไปถึงฟังก์ชั่นช่วยเหลืออื่นๆ อีกเยอะจนเก็บมาเขียนไม่หวาดไม่ไหว สามารถไปหาอ่านคู่มือการใช้งานเมธอดอื่นๆ เพิ่มเติมได้ที่นี่ Documentation
จริงๆ ผมเองก็ไม่คิดหรอกว่าจะต้องเก็บมาเขียนเป็นบทความๆ นึงเลย แต่ในอนาคตมีแพลนที่อยากจะเขียนเทคนิคอื่นที่ต้องใช้ library นี้เป็นส่วนหนึ่งด้วย เลยกะว่าจะเขียนปูทางเอาไว้ก่อนค่อยย้อนมาทำ internal link ภายในเว็บไซต์ตัวเองเผื่อช่วยเรื่อง SEO กับเขาบ้าง สำหรับมือใหม่ที่ลองแล้วยังไม่เห็นภาพ เพราะไม่รู้ว่าจะนำไปใช้งานจริงกับเว็บไซต์ที่ดึงข้อมูลได้มาแล้วยังไงต่อ จำเป็นต้องใช้ Lodash ในการจัดการข้อมูลด้วยหรือ เดี๋ยวบทความหน้าจะมาเสนอตัวอย่างกับเว็บไซต์ที่เปิด API ให้ลองเรียกเล่นกันครับ
ขอบคุณครับ
ขอบคุณค่ะ
ขอบคุณครับ