ห้าเคล็ดลับในการเขียน JavaScript ดีหรือไม่ [ปิด]

เห็นได้ชัดว่า JavaScript เป็นสิ่งที่ขาดไม่ได้เลยทีเดียว อย่างไรก็ตามฉันยังใหม่กับมันและฉันพบว่ามันยากที่จะต่อสู้กับความรู้สึกที่ดูเหมือนเป็นระเบียบและฉันไม่ต้องการที่จะจัดการกับมันในขณะนี้ ฉันเข้าใจภาษาอื่น ๆ มากกว่าฉันด้วย JavaScript เพราะฉันดูเหมือนจะไม่สามารถรับมือกับความกลัวนี้ได้ ฉันรู้สึกว่าเมื่อฉันเขียน JavaScript ฉันพยายามวาดรูปสุนัข Weimaraner

มันมักจะช่วยให้ฉันเก็บคำสั่งที่สำคัญที่สุดไว้ในใจว่าฉันสามารถถามตัวเองสำหรับการย้ายแต่ละครั้งที่ฉันทำ (สำหรับความคิดของฉันกำมือหนึ่งห้าหรือน้อยกว่า)

คุณสามารถระบุคำถามเฉพาะ (หรือน้อยกว่า) ห้าคำถามสำหรับ JavaScript ที่ฉันควรถามตัวเองในแต่ละการเคลื่อนไหวที่ฉันทำเมื่อฉันเข้ารหัส JavaScript หรือไม่ พวกเขาจะเป็นอะไร?

อัปเดต: เพื่อให้ชัดเจนฉันไม่ได้ขอห้าสิ่งที่ควรคำนึงถึงเมื่อเรียนรู้ JavaScript; ฉันถามคำถามห้าข้อถามตัวเองเสมอว่าทุกคนควรถาม คำถามระดับสูงเช่น: "ฉันมีแนวโน้มที่จะทำซ้ำที่อื่นได้หรือไม่" หรือ "เป็นชื่อตัวแปร / ฟังก์ชั่นที่เฉพาะเจาะจงมากพอ (หรือเฉพาะเจาะจงมากเกินไป)" <== ยกเว้นคำถามตัวอย่างเหล่านี้จะไม่แปลกกับ JavaScript ฉันกำลังมองหาคำสั่งที่แปลกประหลาดกับ JavaScript

ฉันจะตอบคำถามนี้ในสองส่วน หนึ่งคือ "ห้าหรือน้อยกว่าเคล็ดลับในการเรียนรู้ที่จะเขียน JavaScript ที่ดี" "เคล็ดลับห้าประการหรือน้อยกว่าในการเขียน JavaScript ที่ดี"

การเรียนรู้:

1. ถามคำถาม
2. ฟัง
3. อ่าน
4. ทำสิ่งต่างๆ

การทำ:

1. หลีกเลี่ยงการกลม (เป็นโมดูล)
2. ทำสิ่งที่ยากนอกลูป (การเลือก DOM การประกาศฟังก์ชัน ฯลฯ )
3. เรียนรู้วิธีการทำงานของขอบเขต
4. เรียนรู้เวลาและวิธีใช้การปิด
5. เรียนรู้วิธีการทำงานของ Object Oriented JS

แก้ไข (เพิ่มคำถามเพื่อให้สอดคล้องกับ OP):

ฉันกำลังอ้างอิงขอบเขตใด

สิ่งนี้จะช่วยในเรื่องการรั่วไหลของตัวจัดการเหตุการณ์และเวลาที่จะใช้การปิด

ฉันกำลังทำซ้ำตัวเอง?

นามธรรมที่เหมาะสมและการใช้เทคนิค OO เป็นสิ่งสำคัญ ใช้พวกเขาอย่างชาญฉลาด

รหัสของฉันซ้ำตัวเองหรือไม่

เป็นเรื่องง่ายมากที่จะพบว่าคุณใส่ DOM ในวงหรือสร้างฟังก์ชั่น (ไม่ระบุชื่อหรืออย่างอื่น) ในลูป โปรดทราบว่านี่อาจเป็นจริงของรหัสที่ใช้setTimeoutหรือsetIntervalเช่นเดียวกับลูปแบบดั้งเดิม

นี่หมายถึงสิ่งที่ฉันคิดว่ามันหมายถึงอะไร?

ค่าความจริงและเท็จใน JS อาจเป็นเรื่องยุ่งยากเล็กน้อยโดยเฉพาะเมื่อใช้การเปรียบเทียบที่ไม่เข้มงวด ( ==ตรงข้ามกับ===) การพิมพ์แบบไดนามิกพิมพ์การบังคับขู่เข็ญและไม่ว่าคุณจะอ้างถึงวัตถุหรือตัวอักษรก็สามารถเกี่ยวข้องได้เช่นกัน

ก่อนอื่นให้รู้ว่าเทคโนโลยีเบื้องหลังมันทำงานอย่างไร

คุณจำเป็นต้องรู้สิ่งนี้เพราะความรู้ที่อยู่เบื้องหลังวิธีการทำงานเพราะคุณจะพบปัญหาเครือข่ายหรือในขณะที่ฉันได้เห็นครั้งนับไม่ถ้วนคนทุกคนมีความเข้าใจอย่างแท้จริงเกี่ยวกับสิ่งที่ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์คืออะไร หนึ่งในคำถาม newb ที่พบบ่อยที่สุดที่ฉันเห็นคือ"ฉันจะทำให้ JS เปลี่ยนตัวแปรในรหัส ASP ของฉันได้อย่างไร!"

• คุณเข้าใจ ethernet / wifi และ TCP / IP เพื่อให้ทราบถึงสิ่งที่เกิดขึ้นหรือไม่?
• คุณรู้ HTTP จริงแค่ไหน?
• คุณได้รับ HTML จริงหรือ แน่นอนคุณอาจรู้ว่าแท็กทำงานและซ้อนข้อมูลได้อย่างไร แต่คุณเข้าใจโหมด doctype และ quirks จริงหรือไม่ คุณเข้าใจหรือไม่ว่าคุณไม่ควรใส่แท็กวรรครอบองค์ประกอบรายการ
• คิดค้น JavaScript (และอธิบายว่าสามารถเรียกใช้ฝั่งเซิร์ฟเวอร์) ecmascript, lifcript, mocascript, jsscript, โหนด ...
• เรียนรู้ Window API เรียนรู้ DOM API และเรียนรู้ XHR API หากคุณไม่ทราบสามสิ่งนี้คุณไม่มีรหัสการเขียนเชิงธุรกิจสำหรับเบราว์เซอร์

เข้าใจว่าโค้ดของคุณใหญ่กว่าคุณหรือสถานการณ์เฉพาะของคุณ

• แน่นอนว่าคุณเขียนอะไรบางอย่าง แต่ทุกคนสามารถเห็นได้ มันคือแหล่ง "เปิด" ทั้งหมด แน่นอนว่าคุณสามารถทำให้งงงวยมัน minifiy อะไรก็ตาม ... ในตอนท้ายของวันถ้าฉันต้องการที่จะเห็นรหัสคุณมันเล็กน้อยสำหรับฉันที่จะเอาชนะวิธีการที่คุณวางไว้
• คุณต้องเข้าใจความแตกต่างของเบราว์เซอร์หลายตัว กำหนดเป้าหมายคนที่ได้รับความนิยมสูงสุดหรือกลุ่มประชากรที่ตลาดของคุณมี ตัวอย่างเช่น ie6 จะไม่แสดงองค์ประกอบของเซลล์ตาราง DOM หากคุณผนวกภาคผนวกแทนที่จะเป็นวิธี DOM API สำหรับตารางโดยเฉพาะ มีตัวอย่างเพิ่มเติมอยู่คุณต้องเรียนรู้
• คุณต้องเข้าใจวิธีการเขียนโค้ดเกี่ยวกับปัญหาเหล่านี้ในเบราว์เซอร์ไม่ใช่เบราว์เซอร์เฉพาะของคุณ คุณจะได้เรียนรู้สิ่งต่าง ๆ ที่ใช้งานได้ดีในเบราว์เซอร์หนึ่งอย่างรวดเร็ว คุณจะต้องเข้าใจว่าเบราว์เซอร์ทำงานอย่างไรและทำไมจึงแตกต่างกัน
• สำหรับความรักที่มีต่อเคราของโอดินอย่าเขียนโค้ดที่อนุญาตให้ฉันทำการโจมตีข้ามสคริปต์ไซต์บนโค้ดของคุณ หากคุณทำการโทร ajax ไปยังเซลล์และทำสิ่งที่ชอบcell.innerHTML = "<script>alert("xss")</script>"และช่องการแจ้งเตือนปรากฏขึ้นแสดงว่าคุณทำผิด
• อยู่ในนรกเลือดห่างจาก DynamicDrive, w3Schools และเว็บไซต์ที่ให้คำแนะนำที่ไม่ดี คุณต้องหาชุมชนที่ให้คำแนะนำที่ดี ที่ Stack Overflow เรามีห้องแชท JavaScript และ Node.JS และเราพยายามอย่างดีที่สุดที่จะผลักดันขีด จำกัด ของสิ่งที่ "ดีกว่า" โดยที่เว็บไซต์อย่าง w3s เก็บข้อมูลที่ล้าสมัยและไม่เคยใส่ใจ คุณควรยึดติดกับไซต์ spec ทางการเช่นW3C , Mozilla Developer Network (MDN) ขอให้เพื่อนทบทวนรหัสของคุณ เมื่อคุณรู้สึกว่าคุณกำลังทำอะไรที่เจ็บปวดกับรหัสของคุณเมื่อคุณตัด + paste + tweak ด้วยรหัสของคุณเป็นจำนวนมากคุณควรมาที่ห้องแชททันทีและขอคำแนะนำในการเขียนโค้ดที่ดีขึ้น
• เมื่อคุณมาเพื่อขอคำแนะนำหรือต้องการแบ่งปันสิ่งที่เจ๋ง ๆ ที่คุณทำ ... ได้โปรดได้โปรด กรุณาตรวจสอบให้แน่ใจว่าคุณได้บันทึกไว้ตรวจสอบให้แน่ใจว่าชื่อตัวแปรของคุณสมเหตุสมผลแล้ว คุณต้องเขียนโค้ดสะอาด ถ้าคุณมีกองขยะมีไม่เพียง แต่คุณล้มเหลวไม่มีใครที่รู้วิธีที่จะช่วยให้คุณจะต้องการที่จะ ช่วยเราช่วยคุณ
• คุณต้องการที่จะเขียน JavaScript-- มันยอดเยี่ยมเคารพว่าไม่ใช่ทุกคนที่สนับสนุน JavaScript สองเหตุผลสำหรับสิ่งนี้ - 1) อินเทอร์เน็ตที่เร็วกว่าสำหรับทุกคน (แทนที่จะ "อาแจ็กซ์ทุกสิ่ง" ซึ่งนำไปสู่ประสบการณ์ที่ช้ากว่า) 2) ผู้คนในเบราว์เซอร์ที่ใช้คอนโซลสามารถเข้าถึงเว็บได้มากขึ้นคนที่ไม่ใช้สคริปต์โทรศัพท์มือถือ สิ่งที่ฉันพยายามจะบอกคือไซต์ของคุณควรลดระดับลงอย่างงดงามหากมีคนไม่มี JavaScript และอย่างน้อยที่สุดให้ใช้<noscript>แท็กเพื่อแจ้งเตือนพวกเขา
• เนื่องจากต้นแบบต้นแบบของ JavaScript คุณสามารถเปลี่ยนแปลงวิธีการใช้งานภาษา - ซึ่งเป็นสิ่งที่ดีจริงๆ คุณจะเห็นว่าจาวาสคริปต์กำลังพัฒนาเรากำลังดึง "ECMA Script 3" ซึ่งเป็นรุ่นเก่าของ JS และเป็น "ECMA Script 5" (aka es5) เนื่องจากต้นแบบเราสามารถแก้ไขภาษา es3 ในฟิลด์ให้ทำงานเหมือน es5 นั่นหมายความว่า ie6 เบราว์เซอร์อายุ 10 ปีได้รับคุณสมบัติภาษาที่ออกมาเมื่อปีที่แล้ว ใช้ es5-shims ทุกที่ที่คุณทำได้พวกมันเจ๋งจริง ๆ และคุณต้องมองเข้าไป
• โลกตะวันตกของเด็กผิวขาวที่พูดภาษาอังกฤษไม่ใช่ผู้ใช้อินเทอร์เน็ต รหัสตาม ซึ่งหมายความว่าคุณต้องเข้าใจความเป็นสากลและเขียนโค้ดที่เกี่ยวข้องกับความต้องการที่สูงขึ้น 10 ปีที่แล้วมีผู้คนออนไลน์น้อยกว่า 500 ล้านคนในวันนี้ประมาณ 2 พันล้านคนและในอีก 10 ปี? อาจใกล้เคียงกับทุกคนบนโลกใบนี้ที่จะมีการเข้าถึงอินเทอร์เน็ตซึ่งหมายความว่าคุณต้องสนับสนุนชื่อที่ไม่เหมาะกับ regex /[a-z ']/iแต่รวมถึงภาษาฮินดี, อาหรับ, สำเนียง (นี่เป็นปัญหาที่มีอยู่จากนักพัฒนาสายตาสั้น), จีน , และคนอื่น ๆ. ทำความเข้าใจกับชุดอักขระ Unicode และ UTF-8

คุณเป็นโปรแกรมเมอร์ไม่ใช่โรงงานพาสต้า หยุดเขียนปาเก็ตตี้

• ตั้งชื่อตัวแปรของคุณตามสิ่งที่สมเหตุสมผล
• เอกสารรหัสของคุณ ฉันไม่สนใจว่าคุณกำลังใช้ JSDoc ขับเคลื่อนโดยแรดหรือคุณมีขีดเขียนมากมาย เขียนเอกสารที่ช่วยให้คนที่จะใช้รหัสของคุณ เขียนเอกสารสำหรับคนที่ต้องการปรับปรุงหรือรักษารหัสของคุณ รวมความคิดเห็นที่เป็นประโยชน์ ความเห็นที่ชอบ"This fizzes the bizz"หรือคนที่ครึ่งภาษาอังกฤษแบบครึ่งภาษาฝรั่งเศสไม่เป็นประโยชน์ อธิบายสิ่งที่ฟังก์ชั่นทำ อธิบายส่วนที่ซับซ้อนของรหัส
• หาวิธี จำกัด การทำซ้ำรหัส มองหาการออกแบบแบบแยกส่วนหรือรูปแบบการทำงาน ดูสิ่งที่คุณสามารถสรุปได้ คุณไม่ควรตัด + วาง + ปรับแต่งโค้ดส่วนใหญ่เพื่อทำสิ่งเดียวกัน
• คุณต้องเข้าใจ DOM API การจัดเตรียม DOM และหน้าต่างวัตถุสำหรับสิ่งที่ดี ฟังดูเหมือนทำงานมาก แต่นั่นเป็นเพราะมันเป็นตัวย่อที่น่ากลัวมาก จำนวนมากของคุณ JavaScript <a href="javascript:alert("foo")">นินจาเหมือนเขียนโค้ดเช่น FFS ไม่ทำเช่นนั้น รอให้โหลดเอกสารเต็มให้แยกโค้ด JavaScript ออกจากเอกสาร html นี่เป็นวิธีปฏิบัติพื้นฐาน OOP 101 เพียง แต่อย่ารวม JS หรือ CSS ไว้ในเอกสาร html ของคุณ คิดวิธีการทำอย่างถูกต้องหรือหาคนที่รู้วิธีแสดงวิธีการทำ ถามคำถามอีกครั้ง
• Javascript:foo("buz")เป็น psudeo โปรโตคอลก็ไม่ได้รับการสนับสนุนอย่างเต็มที่และถ้าคุณทำไม่ได้อยู่ในสายจาวาสคริปต์ที่คุณจะไม่ใช้มันในสถานที่แรก ฉันสัญญากับคุณจากก้นบึ้งของหัวใจของฉันไม่มีเหตุผลอะไรเลยที่จะเกิดขึ้นบนโลกนี้หรือที่ใดก็ตามในจักรวาลที่คุณต้องวางจาวาสคริปต์ไว้ในองค์ประกอบ HTML เคย ดังนั้นอย่าทำ ฉันจะไม่ได้ช่วยให้ผู้คนที่ทำอย่างนั้นอีกต่อไปเลยก็ว่าไม่ดี

คิดออกว่าจะเขียนโค้ดอย่างไรในลักษณะที่มันไม่ได้หยุดอยู่ตลอดเวลา

• ตัวแปรทั่วโลกเป็นหนึ่งในปัญหาที่ใหญ่ที่สุด กำหนดวิธีการทำงานของโปรแกรมมิงในจาวาสคริปต์ คิดออกว่า hoisting คืออะไร หาวิธีหลีกเลี่ยงตัวแปรโกลบอล
• ใช้เครื่องมือวิเคราะห์รหัสคงที่สิ่งเหล่านี้จะเตือนคุณทันที "โอ๊ะ" ตัวเล็ก ๆ ที่คุณทำเมื่อคุณเขียนรหัส ลืมอัฒภาคที่ไหนสักแห่ง? โอ้ใช่แล้ว มีทั่วโลกที่ไหนสักแห่ง? โอ้ใช่แล้ว รหัสที่อาจทำให้เกิดข้อผิดพลาดลึกลับเมื่อคุณพยายามเรียกใช้หรือไม่ OH! พวกเขาอยู่นั่น! ไม่มีการคาดคั้นอีกแล้วมองเข้าไปในกองรหัสเป็นเวลาหลายชั่วโมงเพื่อหาสิ่งที่เป็นข้อผิดพลาดทางไวยากรณ์ (เอาล่ะแทบจะไม่คุณอาจทำอะไรที่จับไม่ได้ แต่โดยทั่วไปมันก็ยอดเยี่ยม)
• การทดสอบหน่วย ไม่มีเหตุผลที่จะไม่เป็น มีเครื่องมือทดสอบหน่วยอยู่มากมาย โดยพื้นฐานแล้วการทดสอบหน่วยคือ "นี่คือฟังก์ชั่นของฉัน" และ "ฉันต้องการให้มันออก Y" "นี่คืออินพุตทดสอบบางส่วน" และการทดสอบคือ "พวกเขาใช้งานได้หรือไม่" มีเฟรมเวิร์กการทดสอบ JS จำนวนมากเช่น QUnit ยอดนิยม ทัวร์ชมผ่านเครื่องมือค้นหาที่คุณชื่นชอบและดูว่าอะไรที่ทำให้คุณคลั่งไคล้ แต่ใช้พวกเขา
• การจัดการการควบคุมแหล่งที่มาหรือที่เรียกว่าการควบคุมเวอร์ชัน Git ได้รับความนิยมและมีเหตุผลที่ดี ดังนั้น SVN และอีกสองสามคน สิ่งที่คุณต้องหยุดทำในทันทีคือการแก้ไขรหัสการผลิต คุณต้องหยุดการเปลี่ยนชื่อไฟล์main_backup_20110911.js.bak.1เสียสิ่งต่างๆไดเรกทอรีของคุณยุ่งเหยิงคุณไม่สามารถ "ย้อนกลับ" ไปยังจุดก่อนหน้าได้อย่างง่ายดาย คุณไม่สามารถเห็นสิ่งที่เกิดขึ้นคุณไม่สามารถสร้างแพทช์รหัส ดังนั้นเพียงแค่เริ่มเรียนรู้ GIT มันจะใช้เวลาหนึ่งชั่วโมงและคุณจะไม่กลับไป
• รีวิวเพื่อน คุณไม่ได้ว่าดีไม่พ่ะย่ะค่ะฉันได้รับที่ดีขึ้นโดยขอความคิดเห็นมากที่สุดเท่าที่จะทำได้ นั่นคือวิธีที่คุณควรทำเช่นกัน

เขียน JavaScript ที่ผู้คนชื่นชอบ

• ลองคิดดูว่าทำไมรหัสของคุณถึงช้า ใช้jsprefและสร้างการทดสอบ
• หยุดการผูกกิจกรรมกับองค์ประกอบ DOM หนึ่งรายการมันช้าและสร้างปัญหาการทำฟองสบู่เหตุการณ์ร้ายแรงซึ่งจะทำให้คุณเสียเวลามาก วิจัย "การมอบหมายกิจกรรม" ใน JavaScript
• STOP ใช้ InnerHTML เพื่อแก้ไข DOM สิ่งนี้จะกลับไปเรียนรู้ว่า HTML คืออะไรและเรียนรู้ว่า DOM คืออะไร HTML คือข้อมูลที่ส่งจากเซิร์ฟเวอร์ที่เอนจิ้นการแสดงผลของเบราว์เซอร์ของคุณใช้เพื่อสร้างวัตถุการเขียนโปรแกรมที่เป็นวัตถุเอกสาร เมื่อคุณใช้ innerHTML คุณจะต้องให้เบราว์เซอร์ของคุณแสดงผลอีกครั้ง โชคดีที่เมื่อประมาณ 10 ปีที่แล้วเราได้สร้าง DOM API ขึ้นมาและช่วยให้คุณ "ผนวกลูก" หรือ "สร้างโหนดข้อความ" โดยไม่ต้องอัปเดตสิ่งทั้งหมด innHTML เป็นความอัปยศที่ Microsoft ประดิษฐ์ขึ้นมา - หากคุณใช้คุณจะเสียสิทธิ์ทั้งหมดในการบ่นเกี่ยวกับ IE6 ที่น่ากลัวเพราะคุณกำลังช่วยให้มันติดอยู่ตลอดไป เรียนรู้ DOM
• มันต้องทำงานทุกที่ที่ทำได้ หากสิ่งที่ไม่ได้รับการสนับสนุนจะต้องลดระดับลงอย่างงดงามเพื่อประสบการณ์ที่จะไม่ดูด - คุณไม่สามารถตบผู้ใช้ของคุณในการเผชิญหน้าและพังได้
• ลิขสิทธิ์และใบอนุญาตมีความสำคัญ อย่าฉ้อฉลทำงานหนักของคนอื่น หากมีคนพูดว่า "ไม่ใช่เพื่อการขายต่อ" คุณจะไม่สามารถขายได้ อย่ากระตุกหรือเราจะเกลียดโค้ดของคุณเพราะการทำงานหนักของคนทำงานหนัก
• JS คือต้นแบบไม่ใช่คลาส หยุดทำอย่างนั้น. หากคุณไม่เข้าใจว่าต้นแบบทำงานอย่างไรคุณต้องทำ Google มัน จาวาสคริปต์ไม่ได้อ้างอิงกับคลาสหยุดพยายามทำคลาส แต่ก็ไม่ค่อยได้ผล ผู้คนพยายามที่จะเขียนโค้ดคลาสสิกในภาษาต้นแบบและใช้เป็นกรณีสำหรับ "ทำไมภาษาถึง sucks" ฉันสามารถสร้างเคสตัวเดียวกันสำหรับ Ruby ที่ไม่สามารถรองรับต้นแบบได้ เรียนรู้สิ่งใหม่และหยุดทำผิด

มุ่งเน้นไปที่พื้นฐานเสมอ

• คุณผิดและมันเยี่ยมมากเพราะคุณรู้อะไรบางอย่างตอนนี้ ไม่มีอะไรจะเลวร้ายไปกว่าใครบางคนที่ไม่ยอมรับว่าทำผิดและทำให้โค้ดไม่ดีออกมาเหมือนว่าพวกเขาเป็นนินจาซูเปอร์ฮีโร่ร็อคสตาร์คนทรยศ พวกเขาเป็นเพียงคนโง่ ยอมรับว่าคุณผิดพลาดยอมรับว่าคุณผิดขอความช่วยเหลือ
• คุณไม่จำเป็นต้องใช้ jQuery เสมอไป jQuery สร้างโค้ดช้าจำนวนมากและช่วยเหลือผู้ที่ไม่รู้จัก JS ให้เขียน JS นี่เป็นปัญหาเพิ่มเติมเนื่องจาก JS ไม่ต้องการให้คุณรู้ว่า JS ต้องเขียน JS ไปคิด เมื่อคุณเข้าใจบางสิ่งที่ฉันกล่าวถึงข้างต้นเช่นกิจกรรมการเรียนรู้การเรียนรู้ DOM เรียนรู้เกี่ยวกับ innerHTML คุณจะเห็นว่าทำไม jQuery อาจเป็นอันตรายต่อรหัสของคุณ มันสามารถนำมาใช้อย่างถูกต้องในหลายสถานที่ แต่บ่อยครั้งที่คุณสามารถใช้ห้องสมุดขนาดเล็กหรือแม้กระทั่งอ้าปากค้างมาตรฐาน JavaScript ที่มาพร้อมกับเบราว์เซอร์ของคุณเพื่อบรรลุสิ่งที่ คุณไม่จำเป็นต้องทำ jQuery ทำมันง่ายกว่าที่จะเขียนโค้ดที่น่าสนใจถ้าคุณกำลังเรียนรู้ แต่คุณต้องเริ่มทำดีขึ้นและเรียนรู้มากขึ้น - เมื่อคุณรู้มากขึ้นคุณจะรู้วิธี เขียนโค้ดที่ดีขึ้นใน jQuery ต่อไปลองดูห้องสมุด JavaScript อื่น ๆและหยุดรับฟัง
• คุณไม่จำเป็นต้องตัด + วาง + ปรับแต่งสร้างรหัส DRY ฉันเคยพูดถึงเรื่องนี้มาก่อน แต่มันสำคัญที่นี่เช่นกัน คุณไม่สามารถเขียนรหัสคุณภาพหากรหัสของคุณเป็นฐานความอัปยศ
• อย่าใช้อาร์เรย์หรือวัตถุที่แตกต่างเรียนรู้วิธีวนซ้ำ เรียนรู้สาเหตุที่คุณใช้for (;;)และเหตุผลที่คุณใช้การfor( in )วนซ้ำ เมื่อใดจึงจะใช้ลูป while หยุดการซ้อน IFs เมื่อคุณสามารถใช้ตัวเรือนสวิตช์ได้ วัตถุไม่รักษาลำดับดังนั้นอย่าใช้มันเป็นอาร์เรย์ Opera / FF เก่า, MISE เก่าบางครั้ง Flash จะไม่เคารพคำสั่งของคุณ ใช้อาร์เรย์ถ้าคุณต้องการเก็บลำดับของสิ่งใช้วัตถุถ้าคุณต้องการวัตถุ (สิ่งที่ไม่มีลำดับขององค์ประกอบ)
• โครงสร้างการตัดสินใจสามารถใช้เพื่อประโยชน์ของคุณได้อย่างไรเพิ่มความซับซ้อนให้กับโค้ดของคุณ หยุดการซ้อน IFs แล้วพิจารณาว่าตัวดำเนินการทางตรรกะบูลีนทำงานอย่างไร ลองคิดดูว่าตัวเรือนสวิตช์ทำงานอย่างไร
• RTFM สถานที่ที่ดีที่สุดในการเรียนรู้เกี่ยวกับโค้ดที่ดีกว่าคือการอ่านข้อมูลจำเพาะจริง อ่านข้อมูลจำเพาะของ RFC ในส่วนของรหัสที่คุณพยายามใช้ อ่านเอกสาร ECMAScript อ่านข้อมูลจำเพาะ W3C DOM อ่านข้อมูลจำเพาะ W3C XHTML / HTML / HTML5 อ่านรายละเอียดพวกมันทำได้ดี

มุ่งเน้นไปที่เกมที่ยาวนานไม่กะพริบอย่างรวดเร็วและตาย

• คุณควรช่วยชุมชนคุณควรเขียนโค้ดที่จะอยู่เป็นเวลานาน มีความหลงใหลในรหัสและชุมชนของคุณ หากคุณทิ้งความรู้ที่ไม่ดีไปที่อื่นให้ไปที่นรกและแก้ไข ข้อมูลที่ไม่ดีนั้นยากที่จะกำจัดและเกาะติดอยู่ตลอดเวลา ทำส่วนของคุณ อย่าช่วย w3schools ทำให้เว็บแย่ลง
• อย่ากระโดดลงมาจากที่ใดเลยและพูดว่า "เฮ้ฉันมีความคิดที่ดีเกี่ยวกับวิธีการใช้งานwhich" วางโค้ดจำนวนหนึ่งซึ่งไม่มีใครสามารถใช้และหายไปได้ คุณไม่ได้ช่วยอะไรเลย อย่าใช้ตัวแปรเหมือนและachezburger
• เรียนรู้ที่จะหารหัสที่ไม่ดีและรหัสที่ดีพบในรหัสของคุณเองทำให้รหัสที่ไม่ดีของคุณเป็นรหัสที่ดี
• สร้างบางสิ่งเรียนรู้บางสิ่งสอนบางสิ่งบางอย่าง
• ขยายขอบเขตของคุณ. คุณไม่สามารถเขียน JavaScript ตลอดไป - จดจ่อเป็นอย่างอื่นที่คุณสนใจกลับมาแชร์สิ่งที่คุณเรียนรู้และดูว่าคุณสามารถหาสถานที่ในชุมชนได้หรือไม่ พยายามแสดงให้โลกเห็นว่า JavaScript มีคุณค่าเช่นกันในขณะที่คุณอยู่ที่นั่น
• คุณยังคงผิดแม้ว่าคุณจะรู้ทุกสิ่ง ใช้หลักฐานที่ถูกต้องไม่ใช่สถานะ / ผู้มีอำนาจของคุณ คุณไม่มีทางที่จะถูก แต่หลักฐานของคุณถูกต้องเสมอ อย่าเข้าสู่การแข่งขันที่ฉี่ยากเท่าที่ควรหลีกเลี่ยง อาจมีข้อพิสูจน์หรือไม่มี เปลวไฟไม่ช่วยใครเลย

สำหรับผู้ที่สนใจฉันได้รับประโยชน์ส่วนใหญ่จากบันทึกส่วนตัวในการกวดวิชาฉันไม่ได้เขียนเลย

1. อ่านดักลาส Crockford ของJavascript: ส่วนดี นั่นเป็นเคล็ดลับ แต่จริงๆแล้วมันเป็นคำแนะนำที่ดีที่สุดที่ฉันเคยได้ยินสำหรับการเขียนจาวาสคริปต์ที่ดี

2. อ่านบทความของ Douglas Crockford บน Javascriptได้ที่เกี่ยวข้อง

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

ต่อไปนี้เป็นคำถามที่ควรให้คุณดำเนินการกับ JavaScript

1. JSON ทำงานอย่างไรและมันดีอย่างไร?

2. ทำไมฟังก์ชั่นวัตถุใน Javascript?

3. ทำไมฉันไม่ควรใช้การประเมินผล?

4. ฉันจะสร้างกิจกรรมใน javascript ได้อย่างไร

5. ฉันจะตรวจจับคุณสมบัติในจาวาสคริปต์ได้อย่างไร

ค่อนข้างครอบคลุมสิ่งที่คุณต้องทำใน Javascript

1. ใช้เครื่องหมายอัฒภาคเสมอ อัฒภาคโดยนัย (ใน JS) เป็นความคิดที่น่ากลัวโดยเฉพาะอย่างยิ่งกับไวยากรณ์ที่น่าสนใจบางส่วนที่ลอยอยู่ในการใช้งานทั่วไป พวกเขายังต้องการโดยทั่วไปโดย minifier JS ใด ๆ
2. หลีกเลี่ยงการ EVAL () นี่เป็นสาเหตุของปัญหาทุกประเภทและเป็นวิธีที่รวดเร็วในการชะลอการสมัครของคุณ การใช้งานส่วนใหญ่เป็นการใช้ในทางที่ผิด ทุกครั้งที่คุณคิดว่าคุณจำเป็นต้องใช้eval()ให้ตรวจสอบสองครั้งและสามครั้งสำหรับวิธีอื่น มีวิธีที่สะอาดกว่าและเป็นวิธีที่ง่ายกว่ายกเว้นว่าคุณพยายามเรียกใช้ JavaScript ทั้งหมด
3. (function() {/* stuff */})()เป็นวิธีที่ดีในการเข้ารหัสชุดของรหัสและสร้างขอบเขตภายในสำหรับมัน การใช้วัตถุเป็นอีกวิธีที่ดีกว่า วัตถุมีความคล้ายคลึงกับเนมสเปซในภาษาอื่นเมื่อใช้วิธีนี้ thisเพียงแค่ดูออก ไม่เหมือนกับภาษาอื่น ๆ ส่วนใหญ่thisไม่ได้อ้างอิงถึงสิ่งที่คุณคิดโดยสัญชาตญาณ นอกจากนี้โปรดจำไว้ว่าหากไม่ได้ระบุตัวแปร JS ทั้งหมดฟังก์ชั่นและวัตถุอื่น ๆ จะเป็นแบบโกลบอลแม้แต่ข้ามหลาย.jsไฟล์
4. ค้นหาและเรียนรู้ / ใช้ไลบรารี JS ที่ดี jQueryเป็นหนึ่งในเกมยอดนิยม สิ่งเหล่านี้จะเป็นการยกระดับอย่างมากสำหรับคุณรวมถึงสิ่งต่าง ๆ เช่นการตรวจจับคุณสมบัติและการแยกการจัดการ DOM และสิ่งต่าง ๆ ได้ถูกนำไปใช้ในเบราว์เซอร์ที่แตกต่างกัน
5. ใช้เครื่องหมายอัฒภาคเสมอ อย่างจริงจัง. รับ IDE ที่เตือนคุณเมื่อคุณลืม ฉันไม่ต้องการที่จะฟังดูกระหึ่ม แต่มีอยู่สองสามครั้งที่มีการนำข้อบกพร่องมาใช้เพราะไม่มีเครื่องหมายอัฒภาคและเบราว์เซอร์จะไม่เตือนคุณเกี่ยวกับสิ่งเหล่านี้

ฉันเชื่อว่าคลาสเป็นเครื่องมือที่มีประสิทธิภาพมากในการสร้างรหัส มีกฎที่ไม่เชื่อเรื่องภาษาจำนวนมากเกี่ยวกับวิธีการออกแบบระบบที่ใช้คลาสและหลักการ OO บางอย่างนั้นมีการใช้งานอย่างชัดเจนมากขึ้นเมื่อใช้คลาส
ดังนั้นผมจึงขอแนะนำให้คุณมีลักษณะที่CoffeeScript

จากนั้นผมขอแนะนำให้คุณเพียงแค่พยายามที่จะรวบรวมข้อมูลเกี่ยวกับวิธีการใช้SOLID , แห้ง , เข้าใจ , KISSและYAGNIและที่สำคัญกว่าวิธีการที่จะไปเกี่ยวกับสถานการณ์ที่พวกเขาดูเหมือนจะขัดแย้ง (พวกเขาไม่เคยทำเพียงความเข้าใจของพวกเขาหรือ ปัญหาที่เกิดขึ้น) มันค่อนข้างหาง่ายแม้ใน stackexchange

โปรดทราบว่าหลักการเหล่านี้นำไปใช้กับการพัฒนา JavaScript "ดิบ" ได้มาก อย่างไรก็ตามเนื้อหาจำนวนมากที่คุณจะพบในพวกเขาจะแสดงให้เห็นพวกเขาโดยใช้ภาษาตามระดับและดังนั้นจึงอาจใช้ในการเขียนโปรแกรมในภาษาที่มีค่าใช้จ่ายไม่มากที่เกี่ยวข้องในการทำความเข้าใจพวกเขา
โดยส่วนตัวแล้วฉันคิดว่า JavaScript เป็นภาษาที่ทรงพลังอย่างยิ่ง แต่จริงๆแล้วคุณจะต้องเข้าใจภาษาอื่นเป็นอย่างมากก่อนเพื่อชื่นชมความจริงข้อนี้

ฉันตั้งสมมติฐานว่าคุณกำลังใช้ JavaScript สำหรับการพัฒนา UI ฝั่งไคลเอ็นต์ในเว็บแอปพลิเคชัน

1) นี่ควรเป็นฝั่งไคลเอ็นต์หรือควรเป็นฝั่งเซิร์ฟเวอร์ ฉันรู้ว่าฉันได้ไปและเขียนโค้ดที่ร้ายแรงที่สมควรได้รับที่ด้านเซิร์ฟเวอร์และในทางกลับกัน หลายครั้งที่ฉันจะมุ่งหน้าไปที่การโทร AJAX สำหรับสิ่งที่จบลงด้วยการวางไว้ในรหัสเซิร์ฟเวอร์ที่จะรวมอยู่ในทางที่ดีกว่า โดยเฉพาะอย่างยิ่งสิ่งที่คงที่ในธรรมชาติ แต่เปลี่ยนอย่างสม่ำเสมอ (รายการหมวดหมู่เช่น)

2) มีปลั๊กอินที่ทำสิ่งนี้อยู่แล้ว? ฉันใช้ JQuery เป็นจำนวนมากและคำตอบก็คือใช่เสมอ! ฉันมักจะใช้รหัสปลั๊กอินที่มีคนเขียนและปรับให้เข้ากับความต้องการของฉัน (มักจะเพิ่มคลาสพิเศษให้กับสิ่งต่าง ๆ ฯลฯ ) แต่ฉันมักจะต้องเริ่มจากศูนย์

3) Javascript นั้นถูกที่แล้วหรือ? บางครั้งฉันจะจับตัวเองเพิ่มการจัดแต่งทรงผมแบบไดนามิกจำนวนมากให้กับบางสิ่งผ่าน Javascript เมื่อมันเหมาะสมกว่าที่จะใช้ CSS อัจฉริยะ

4) ฉันควรใช้เครื่องมืออื่นหรือไม่? นี่คือสิ่งที่ฉันต่อสู้กับเมื่อเร็ว ๆ นี้ มีทางเลือกจาวาสคริปต์เช่นสคริปต์กาแฟที่ได้รับการจัดการอย่างดีในสแต็คของฉัน (Rails 3.1) และฉันได้รับการพิจารณาว่าจะย้ายรหัสของฉันไปที่นั่นหรือไม่

5) รหัส Javascript นี้เป็นรหัสที่ดีหรือไม่ Javascript เป็นรหัสเหมือนรหัสอื่น ๆ รหัสนี้ดีเท่ากับรหัสที่เหลือของฉันหรือไม่ ถ้าไม่ทำไมล่ะ มันคือการโยนทิ้งหรือไม่? ฉันขี้เกียจเหรอ?