สารบัญ[ซ่อน][แสดง]
- 1. พัฒนาความรู้พื้นฐานของคุณ
- 2. ใช้ประโยชน์จากกลยุทธ์เชิงวัตถุ
- 3. ใช้ประโยชน์จากฟังก์ชั่นแม้ว่าจะมีขนาดเล็ก
- 4. แทนที่จะ == ให้ใช้ ===
- 5. ใช้ JSLint
- 6. ควรวางสคริปต์ไว้ที่ด้านล่างของหน้า
- 7. วิธีที่เร็วที่สุดในการสร้างสตริง
- 8. เพิ่มความคิดเห็นในรหัสของคุณ
- 9. ใช้ประโยชน์จาก Template Literals
- 10. ตัววนซ้ำและสำหรับ … ของลูป
- 11. ใช้ {} แทน new Object()
- 12. ลองใส่ let และ const ลงในโค้ดของคุณ
- 13. eval() ไม่ใช่ความคิดที่ดี
- 14. Spread Operator มีประโยชน์
- 15. รอและ async
- 16. ใช้เมธอด include() ใน Javascript
- 17. ลบรายการออกจากอาร์เรย์โดยใช้ Splice
- 18. ใช้ประโยชน์จากฟังก์ชันลูกศร
- 19. ด้วย Destructuring คุณสามารถกำหนดค่าตัวแปรได้อย่างรวดเร็ว
- 20. ทำหลายโครงการ
- สรุป
หากคุณเคยสนใจในการพัฒนาเว็บไซต์มาก่อน คุณอาจเคยเจอ JavaScript มาก่อน ภาษาโปรแกรมเชิงวัตถุคือ JavaScript นักพัฒนาใช้เพื่อสร้างหน้าเว็บฝั่งไคลเอ็นต์ (ส่วนหน้า) แบบไดนามิกและโต้ตอบ
นอกจากนี้ยังใช้เพื่อสร้างหน้าเว็บและเว็บแอปด้วย HTML และ CSS ทุกวันนี้ไม่มีหน้าเว็บบนอินเทอร์เน็ตที่ไม่มีโค้ด JavaScript มันกลายเป็นแง่มุมที่แยกไม่ออกของงานของนักพัฒนา
อันที่จริงก็เพิ่มขึ้นเรื่อยๆ แม้ว่า JavaScript จะเป็นที่รู้จักดีที่สุดในการจัดเตรียมฟังก์ชันการทำงานให้กับหน้าเว็บ แต่ก็ยังมีการใช้งานในสภาพแวดล้อมที่ไม่ใช่ JavaScript Node.js, Apache Couch-DB และ Adobe Acrobat เป็นตัวอย่างของเทคโนโลยีเหล่านี้ สำหรับการรัน JavaScript เว็บเบราว์เซอร์ที่ทันสมัยส่วนใหญ่มีเอ็นจิ้นการเรียกใช้ JavaScript ในตัว หากคุณต้องการเป็นนักพัฒนาเว็บที่ประสบความสำเร็จ คุณจะต้องจัดการกับ JavaScript
คุณต้องจัดการกับมันในวันนี้หรือพรุ่งนี้ ทำไมไม่เรียนรู้ JavaScript ล่วงหน้า เพื่อที่คุณจะได้พร้อมเมื่อถึงเวลา?
นี่คือสิ่งที่คุณจะได้เรียนรู้ในเซสชั่นนี้ มันอธิบายวิธีนำหน้านักพัฒนาเว็บเพื่อนคุณหนึ่งก้าวด้วยการขัดเกลา JavaScript ของคุณ
เอาล่ะ!
1. พัฒนาความรู้พื้นฐานของคุณ
ฉันจะเริ่มต้นด้วยความคิดและข้อความพื้นฐานที่คุณเคยได้ยินตั้งแต่ยังเป็นเด็ก เรียนรู้พื้นฐานและนำไปปฏิบัติ หลายครั้ง คุณจะใช้ตรรกะกับการเข้ารหัส แต่คุณจะลืมไปว่ามีฟังก์ชันในตัวอยู่แล้ว เช่น การแบ่งอาร์เรย์ เมื่อคุณเรียกใช้โค้ด JavaScript คุณอาจได้รับข้อผิดพลาด และด้วยเหตุนี้ คุณลักษณะเพิ่มเติมจำนวนมากจึงหยุดทำงาน
ซึ่งอาจเกิดจากเครื่องหมายทวิภาคหรือเครื่องหมายจุลภาคกลับด้าน สิ่งเหล่านี้เกิดขึ้นเนื่องจากขาดความเข้าใจในพื้นฐาน หลายครั้งในโปรแกรมเดียว ใช้ลูปพื้นฐานเช่น for ซึ่งหรือ do while ลูปเป็นหนึ่งในโครงสร้างการเขียนโปรแกรมพื้นฐานที่สุด
มันค่อนข้างยากในการเขียนโค้ดและมีโอกาสได้ทำงานในบริษัท หากคุณไม่คุ้นเคยกับการวนซ้ำและปัจจัยพื้นฐานอื่นๆ การปัดฝุ่นพื้นฐานของคุณเป็นสิ่งสำคัญ เนื่องจากสิ่งเหล่านี้เป็นรากฐานที่มั่นคงในการพัฒนาตรรกะและชื่อเสียงที่ซับซ้อนของโซลูชัน
2. ใช้ประโยชน์จากกลยุทธ์เชิงวัตถุ
วิธีการเชิงวัตถุเป็นวิธีการเขียนโปรแกรมที่รู้จักกันดีที่สุดในปัจจุบัน แนวทางเชิงวัตถุซึ่งเริ่มต้นด้วย C ++ ได้รับความนิยมอย่างมากตั้งแต่นั้นมา ปัจจุบันนี้ เฉพาะโปรแกรมเชิงวัตถุเท่านั้นที่ใช้เพื่อสร้างภาษาหลักทั้งหมด กลยุทธ์เชิงวัตถุคือกลยุทธ์ที่เน้นไปที่วัตถุเฉพาะ
ไอเท็มนั้นจะกลายเป็นเอนทิตีพื้นฐาน วัตถุนี้ถูกใช้เพื่อเพิ่มคุณสมบัติและฟังก์ชันให้กับเพจเป็นพื้นฐาน คุณยังสามารถใช้วิธีดั้งเดิมในการสร้างโค้ดจากบนลงล่างได้โดยไม่ต้องใช้ฟังก์ชันหรือวัตถุใดๆ เรื่องนี้กว้างเกินไปและไม่ควรพยายาม เมื่อพัฒนาโค้ด เราควรใช้วิธี functional และถ้าเราใช้ฟังก์ชัน เราควรใช้อ็อบเจ็กต์
ดังนั้น ในการเริ่มต้น ให้พยายามแปลงโค้ดที่ครอบคลุมของคุณเป็นโค้ดเชิงวัตถุ และเขียนโค้ดของคุณในรูปแบบเชิงวัตถุเสมอ เมื่อคุณศึกษาโค้ดของคนอื่น คุณจะดูเทคนิคเชิงวัตถุอยู่ตลอดเวลา หากคุณต้องการควบคุม JavaScript ให้เชี่ยวชาญ จะเป็นการดีที่สุดหากคุณลงมือทำ
3. ใช้ประโยชน์จากฟังก์ชั่นแม้ว่าจะมีขนาดเล็ก
การเขียนโปรแกรมด้วยวิธีการเชิงใช้งานได้เป็นวิธีที่ยอดเยี่ยม ทำไม โดยจะแยกซอฟต์แวร์ของคุณออกเป็นโมดูลที่ทำงานร่วมกันแต่ยังคงมีความแตกต่างกัน ผมขอยกตัวอย่างเพื่อช่วยให้คุณเข้าใจ
ค่า Root Mean Square ของจำนวนเต็มสามารถคำนวณได้โดยใช้ฟังก์ชัน ในการทำเช่นนั้น คุณต้องยกกำลังสองจำนวนเต็ม คำนวณค่าเฉลี่ย แล้วคำนวณรากที่สองของค่าเฉลี่ย มีสามขั้นตอนในกระบวนการ เป็นผลให้เราสามารถใช้สามฟังก์ชั่น แต่อย่างที่คุณเห็น ฟังก์ชันทั้งหมดเหล่านี้เชื่อมต่อถึงกัน ผลลัพธ์ของสิ่งหนึ่งถูกส่งไปยังอีกอันหนึ่ง และเราได้รับผลลัพธ์สุดท้าย
สมมุติว่าแทนที่จะใช้สามฟังก์ชัน คุณแค่ต้องการฟังก์ชันเดียวในการคำนวณ RMS ตามปัจจัยหลายตัว วิธีแก้ปัญหาสุดท้ายอย่างที่คุณเห็นนั้นไม่ถูกต้อง มันจะค่อนข้างยากสำหรับคุณที่จะตัดสินว่าอะไรผิดพลาดในเหตุการณ์ใหญ่เช่นนี้ ณ จุดนี้
ในทางกลับกัน การมีฟังก์ชันเล็กๆ สามอย่างจะช่วยให้คุณวิเคราะห์ได้อย่างรวดเร็ว ดังนั้น ถึงแม้ว่าฟังก์ชันจะพอประมาณ ให้ใช้ฟังก์ชันเหล่านี้เพื่อกำหนดโมดูลโค้ดที่แตกต่างกัน เทคนิคนี้จะช่วยให้คุณกลายเป็นผู้เชี่ยวชาญ JavaScript อย่างเวทมนตร์
ตอนนี้ มาดูเคล็ดลับการเข้ารหัส JavaScript กันบ้าง
4. แทนที่จะ == ให้ใช้ ===
ใน JavaScript มีโอเปอเรเตอร์ความเท่าเทียมกันสองประเภท: โอเปอเรเตอร์ความเท่าเทียมกันที่เข้มงวด === และ !== และโอเปอเรเตอร์ความเท่าเทียมกันแบบไม่เข้มงวด == และ != เมื่อเปรียบเทียบแล้ว ถือเป็นแนวทางปฏิบัติที่ดีที่สุดในการใช้ความเท่าเทียมกันอย่างแท้จริง เมื่อทำงานกับ == และ != คุณจะประสบปัญหาเมื่อต้องจัดการกับประเภทที่แตกต่างกัน
เมื่อประเภทของค่าที่คุณกำลังเปรียบเทียบแตกต่างกัน ตัวดำเนินการที่ไม่เข้มงวดจะพยายามบังคับค่าของพวกมัน ซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิด
5. ใช้ JSLint
Douglas Crockford ได้สร้าง JSLint ซึ่งเป็นดีบักเกอร์ เพียงใส่สคริปต์ของคุณลงในกล่อง มันก็จะสแกนหาจุดบกพร่องหรือจุดบกพร่องอย่างรวดเร็ว
JSLint ตรวจสอบซอร์สไฟล์ JavaScript หากพบปัญหา ระบบจะส่งข้อความพร้อมคำอธิบายปัญหาและตำแหน่งโดยประมาณภายในแหล่งที่มา ปัญหานี้ไม่ใช่ข้อผิดพลาดทางวากยสัมพันธ์เสมอไป แม้ว่ามักจะเป็นกรณีๆ ไป
JSLint ตรวจสอบทั้งบรรทัดฐานโวหารและปัญหาเชิงโครงสร้าง ไม่ได้หมายความว่าซอฟต์แวร์ของคุณมีความถูกต้อง เพียงเพิ่มดวงตาอีกคู่หนึ่งเพื่อช่วยในการตรวจจับปัญหา ก่อนที่คุณจะลงชื่อออกจากสคริปต์ ให้เรียกใช้ผ่าน JSLint เพื่อให้แน่ใจว่าคุณไม่ได้ทำผิดพลาดใดๆ
6. ควรวางสคริปต์ไว้ที่ด้านล่างของหน้า
เป้าหมายหลักของผู้ใช้คือการโหลดหน้าเว็บโดยเร็วที่สุด เบราว์เซอร์ไม่สามารถโหลดสคริปต์ต่อไปได้จนกว่าจะโหลดไฟล์ทั้งหมด ส่งผลให้ผู้ใช้ต้องรอนานขึ้นจึงจะเห็นความคืบหน้า
หากคุณมีไฟล์ JS ที่ใช้เพื่อให้การทำงานเท่านั้น (เช่น เมื่อกดปุ่ม) ให้วางไว้ที่ด้านล่างของหน้าก่อนแท็กปิดเนื้อหา นี่เป็นวิธีปฏิบัติที่ดีที่สุดอย่างไม่ต้องสงสัย
7. วิธีที่เร็วที่สุดในการสร้างสตริง
เมื่อคุณต้องการวนรอบอาร์เรย์หรืออ็อบเจ็กต์ อย่าใช้คำสั่ง trusty for loop เสมอไป ใช้จินตนาการของคุณเพื่อหาวิธีแก้ปัญหาที่รวดเร็วที่สุดสำหรับงานในมือ ฉันจะไม่นำตัวเลขมาให้คุณ คุณจะต้องเชื่อฉัน (หรือทดสอบด้วยตัวเอง)
นี่เป็นเทคนิคที่เร็วที่สุดเท่าที่เคยมีมา
8. เพิ่มความคิดเห็นในรหัสของคุณ
มันอาจจะดูไร้สาระในตอนแรก แต่เชื่อฉันเถอะ เมื่อฉันบอกว่าคุณควรแสดงความคิดเห็นเกี่ยวกับโค้ดของคุณให้บ่อยที่สุด จะเกิดอะไรขึ้นถ้าคุณกลับมาที่โครงการในเดือนต่อมาและจำกระบวนการคิดเดิมไม่ได้
จะเป็นอย่างไรถ้าเพื่อนร่วมงานของคุณต้องอัปเดตรหัส ควรแสดงความคิดเห็นในส่วนสำคัญของรหัสของคุณเสมอ
9. ใช้ประโยชน์จาก Template Literals
ข้อจำกัดของสตริงที่สร้างด้วยเครื่องหมายคำพูดคู่หรือเดี่ยวนั้นมีมากมาย เพื่อให้การทำงานง่ายขึ้น คุณอาจเลือกที่จะแทนที่สตริงบางรายการด้วยตัวอักษรเทมเพลต
อักขระ backtick (') ใช้เพื่อสร้างตัวอักษรเทมเพลต ซึ่งมีข้อดีหลายประการ คุณสามารถใช้เพื่อเก็บนิพจน์หรือสร้างสตริงหลายบรรทัด
อย่างที่คุณเห็น ต่างจากลิเทอรัลสตริงทั่วไปที่สร้างด้วยอัญประกาศเดี่ยวหรือคู่ เราไม่จำเป็นต้องเข้าและออกจากเทมเพลตลิเทอรัลของเราซ้ำๆ วิธีนี้ช่วยลดโอกาสในการพิมพ์ผิดพลาดและช่วยให้เราเขียนโค้ดที่สะอาดขึ้นได้
10. ตัววนซ้ำและสำหรับ … ของลูป
ตัววนซ้ำเป็นออบเจกต์ใน JavaScript ที่ใช้เมธอด next() เพื่อส่งคืนอ็อบเจ็กต์ที่เก็บค่าถัดไปในลำดับ รวมถึงค่าจริงหรือเท็จ ขึ้นอยู่กับว่ายังมีค่าเหลืออยู่หรือไม่ ซึ่งหมายความว่าหากคุณใช้โปรโตคอล iterator คุณสามารถสร้างอ็อบเจ็กต์ iterator ของคุณเองได้
มีตัววนซ้ำในตัวใน JavaScript เช่น String, Array, Map เป็นต้น คุณสามารถใช้สำหรับ … ของการวนซ้ำเพื่อวนซ้ำ เมื่อเปรียบเทียบกับลูปทั่วไป สิ่งนี้จะกระชับกว่าและมีโอกาสเกิดข้อผิดพลาดน้อยกว่า เราไม่จำเป็นต้องติดตามความยาวทั้งหมดของอาร์เรย์หรือดัชนีปัจจุบันโดยใช้ for...of loop เมื่อออกแบบการวนซ้ำแบบซ้อน การทำเช่นนี้อาจช่วยให้โค้ดง่ายขึ้น
11. ใช้ {} แทน new Object()
ใน JavaScript คุณสามารถสร้างวัตถุได้หลายวิธี การใช้ตัวสร้างใหม่ดังที่แสดงไว้เป็นวิธีที่ธรรมดากว่า ในทางกลับกัน กลยุทธ์นี้ถูกทำเครื่องหมายว่าเป็น "การปฏิบัติที่ไม่ดี"
มันไม่ได้ทำลายล้าง แต่มันใช้คำและเอกลักษณ์เล็กน้อย ฉันเสนอให้ใช้เทคนิคตามตัวอักษรแทน
12. ลองใส่ let และ const ลงในโค้ดของคุณ
เราสามารถใช้คีย์เวิร์ด let เพื่อสร้างตัวแปรโลคัลที่กำหนดขอบเขตให้กับบล็อกของตัวเอง เราสามารถใช้คีย์เวิร์ด const เพื่อสร้างตัวแปรขอบเขตบล็อกในพื้นที่ที่ไม่สามารถเปลี่ยนแปลงได้
เมื่อประกาศตัวแปร คุณควรพิจารณาใช้คีย์เวิร์ด let และ const เมื่อใช้ได้ โปรดจำไว้ว่าคีย์เวิร์ด const ปิดใช้งานเฉพาะการกำหนดใหม่เท่านั้น มันไม่ได้ทำให้ตัวแปรไม่เปลี่ยนแปลงเช่นกัน
13. eval() ไม่ใช่ความคิดที่ดี
วิธี eval() สำหรับผู้ที่ไม่รู้ตัว ทำให้เราสามารถเข้าถึงคอมไพเลอร์ของ JavaScript โดยพื้นฐานแล้ว เราสามารถใช้ eval เพื่อรันผลลัพธ์ของสตริงได้โดยการระบุให้เป็นอินพุต ()
สิ่งนี้ไม่เพียงทำให้สคริปต์ของคุณช้าลงอย่างมาก แต่ยังมีข้อกังวลด้านความปลอดภัยที่สำคัญเนื่องจากให้สิทธิ์ในการส่งผ่านข้อความมากเกินไป หลีกเลี่ยงในทุกกรณี!
14. Spread Operator มีประโยชน์
คุณเคยต้องการส่งข้อมูลทั้งหมดในอาร์เรย์เป็นองค์ประกอบเดี่ยวไปยังฟังก์ชันอื่น หรือคุณจำเป็นต้องใส่ค่าทั้งหมดจากอาร์เรย์หนึ่งไปยังอีกฟังก์ชันหนึ่งหรือไม่? นี่คือสิ่งที่ตัวดำเนินการสเปรด (…) ช่วยให้เราบรรลุผลสำเร็จ นี่คือภาพประกอบ
15. รอและ async
สร้างฟังก์ชันแบบอะซิงโครนัสโดยใช้คีย์เวิร์ด async ซึ่งส่งคืนสัญญาเสมอ ไม่ว่าจะโดยชัดแจ้งหรือโดยปริยาย
คีย์เวิร์ด await สามารถใช้ในฟังก์ชันแบบอะซิงโครนัสเพื่อหยุดการดำเนินการจนกว่าความละเอียดของการส่งคืนสัญญาจะเสร็จสิ้น นอกฟังก์ชัน async ของคุณ โค้ดจะยังคงทำงานตามปกติ
16. ใช้เมธอด include() ใน Javascript
ใน JavaScript ฟังก์ชัน include() กำหนดว่าสตริงมีอักขระที่ให้มาหรือว่าอาร์เรย์มีองค์ประกอบที่ระบุหรือไม่
เมธอดนี้คืนค่า จริง หากพบสตริงหรือองค์ประกอบ มิฉะนั้นจะส่งกลับค่าเท็จ เป็นมูลค่าการกล่าวขวัญว่า ฟังก์ชันมีสตริง () คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ หากคุณต้องการจับคู่สตริงโดยไม่คำนึงถึงตัวพิมพ์ ให้พิมพ์ตัวพิมพ์เล็กข้อความเป้าหมายก่อน
17. ลบรายการออกจากอาร์เรย์โดยใช้ Splice
ในการลบรายการออกจากอาร์เรย์ ฉันได้เห็นนักพัฒนาใช้ฟังก์ชันลบ นี่เป็นข้อผิดพลาดเพราะ แทนที่จะลบอ็อบเจ็กต์ วิธีการ delete จะแทนที่ด้วย undefined
วิธีที่ง่ายที่สุดในการลบองค์ประกอบออกจากอาร์เรย์โดยขึ้นอยู่กับค่าใน JavaScript คือการใช้ฟังก์ชัน indexOf() เพื่อรับหมายเลขดัชนีของค่านั้นในอาร์เรย์ จากนั้นลบค่าดัชนีนั้นด้วยเมธอด splice()
18. ใช้ประโยชน์จากฟังก์ชันลูกศร
ฟังก์ชัน Arrow เป็นคุณลักษณะสำคัญอีกประการหนึ่งที่เพิ่งเพิ่มลงใน JavaScript
พวกเขามีข้อได้เปรียบมากมาย ในการเริ่มต้น พวกเขาทำให้ส่วนการทำงานของ JavaScript ดึงดูดสายตาและเขียนได้ง่ายขึ้น อย่างไรก็ตาม การใช้ฟังก์ชันลูกศรทำให้อ่านเข้าใจง่ายและรัดกุมยิ่งขึ้น
19. ด้วย Destructuring คุณสามารถกำหนดค่าตัวแปรได้อย่างรวดเร็ว
ก่อนหน้านี้ในโพสต์นี้ เราได้เรียนรู้เกี่ยวกับตัวดำเนินการการแพร่กระจายใน JavaScript Destructuring นั้นคล้ายกับ Destructuring ตรงที่มันยังแตกข้อมูลที่อยู่ในอาร์เรย์ด้วย
ความแตกต่างคือสามารถกำหนดค่าที่คลายแพ็คเหล่านี้ให้กับตัวแปรที่แตกต่างกันได้ ไวยากรณ์เหมือนกับทางลัด [] เมื่อสร้างอาร์เรย์ อย่างไรก็ตาม วงเล็บจะวางไว้ทางด้านซ้ายของตัวดำเนินการมอบหมายในครั้งนี้ นี่คือภาพประกอบ
20. ทำหลายโครงการ
ความสามารถใดๆ ก็ตามต้องฝึกฝนอย่างสม่ำเสมอ ดังนั้นพยายามสร้างโครงการที่หลากหลายเพื่อฝึกฝนความสามารถของคุณ และรับความเชี่ยวชาญจากสถานการณ์การเขียนโปรแกรมที่หลากหลาย
ขณะทำงานในโครงการ คุณจะพบกับความท้าทายและข้อผิดพลาดหลายประการ ซึ่งจะมอบความเชี่ยวชาญที่จำเป็นให้กับคุณ ดังนั้นพยายามคิดโครงการขึ้นมา และมีแนวคิดและตัวอย่างมากมายบนอินเทอร์เน็ตที่จะช่วยคุณ พัฒนาโค้ดต่อไป ความสามารถของคุณจะดีขึ้น
สรุป
การเรียนรู้ภาษาคอมพิวเตอร์อย่าง JavaScript อาจเป็นเรื่องยาก หากคุณจริงจังกับการเป็นโปรแกรมเมอร์ที่ดีและได้งานแรกอย่างปลอดภัย กลยุทธ์การเรียนรู้ JavaScript เหล่านี้สามารถช่วยเร่งกระบวนการเรียนรู้ของคุณได้
ตรวจสอบให้แน่ใจว่าคุณฝึกเขียนโค้ดเป็นประจำ จดบันทึกอย่างละเอียดในขณะที่เรียนรู้แนวคิดใหม่ๆ และใช้เครื่องมือทั้งหมดที่คุณสามารถเข้าถึงได้ เหนือสิ่งอื่นใด ออกไปที่นั่นแล้วเริ่มเขียนโค้ดไปพร้อมกับความสนุกสนาน
เขียนความเห็น