ความหมายการเขียนและแนวทางปฏิบัติที่ดีที่สุดของลิงค์ก

เชื่อมโยงความหมายการเขียนและแนวทางปฏิบัติที่ดีที่สุดของ A

การเห็นหัวข้อนี้ใน Javaeye การสนทนาค่อนข้างน่าสนใจและฉันอดไม่ได้ที่จะเข้ามามีส่วนร่วม การคิดเชิงความหมาย

ก่อนอื่นปุ่มลิงค์ A และปุ่มนั้นมีความหมายและไม่สามารถเปลี่ยนได้เนื่องจากความสะดวกในการใช้งาน A คือตัวย่อของจุดยึดจุดยึดที่ใช้ในการนำทางหรือค้นหา การใช้งานทั่วไปคือ:

<a href = http: //www.w3c.org/> เว็บไซต์ w3c </a> <a name = anchor-one> นี่คือตำแหน่งของ Anchor One </a> <a href =#anchor-one> ลิงก์ไปยัง Anchor One </a>

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

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

ภาพด้านบนเป็นลิงค์บางส่วนแม้ว่ามันจะดูเหมือนปุ่ม แต่ก็เป็นความหมาย

ปุ่มจอแสดงผลและเรียงลำดับในรูปด้านบนเป็นแบบฟอร์มการทำงาน ความหมายมีความเหมาะสมมากกว่าที่จะใช้ปุ่มหรืออินพุต (หมายเหตุ: หน้าผลการค้นหา Taobao ปัจจุบันใช้ A ซึ่งเป็นเพื่อการปรับปรุงค่อยๆและจะกล่าวถึงด้านล่าง)

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

โลกไม่เคยเรียบง่ายขนาดนั้น ใน JavaScript Web World วันนี้ลิงค์ A มักใช้เพื่อกระตุ้นกิจกรรม JS:

<a href = onclick = บางสิ่งบางอย่าง ()> ทดสอบ 1 </a> <a href =# onclick = บางสิ่งบางอย่าง (); ส่งคืนเท็จ >> ทดสอบ 2 </a> <a href = javaScript: void (0) onClick = บางสิ่งบางอย่าง () >> ทดสอบ 3 </a> <a href = JavaScript

ก่อนอื่นมีปัญหาเกี่ยวกับวิธีการเขียนครั้งแรกเนื่องจาก HREF จะเสร็จสมบูรณ์โดยอัตโนมัติภายใต้ IE

วิธีที่สองในการเขียนโดยตรงป้องกันเหตุการณ์เริ่มต้นในเหตุการณ์ onClick ดังนั้น # ใน href = # อาจเป็นค่าใด ๆ การใช้ # คือการพิจารณาว่าเมื่อไม่มี JS มันจะอยู่ในหน้านี้หลังจากคลิก (หมายเหตุ: เมื่อ A อยู่ด้านล่างหนึ่งหน้าจอวิธีการเขียนนี้จะทำให้หน้ากลับไปด้านบน)

วิธีที่สามของการเขียนคือค่า HREF คือ JavaScript Pseudo-Protocol และ Void เป็นตัวดำเนินการที่ไม่ได้รับของ JavaScript (เช่น!, typeof) ฟังก์ชั่นของตัวดำเนินการโมฆะคือการดำเนินการเฉพาะนิพจน์ต่อไปนี้และไม่ส่งคืนค่าใด ๆ ดูเหมือนว่าเป็นโมฆะ (0) บล็อกเหตุการณ์เริ่มต้น แต่ในความเป็นจริงวิธีการเขียนต่อไปนี้ไม่เป็นไร:

<a href = JavaScript: void (1) onclick = บางสิ่งบางอย่าง () >> ทดสอบ 3 </a> <a href = JavaScript :; onclick = บางอย่าง () >> ทดสอบ 3 </a> <a href = JavaScript: onClick = บางอย่าง () >> ทดสอบ 3 </a> <a href = JavaScript: ส่งคืน true onClick = Something () >> ทดสอบ 3 </a>

เนื่องจากการดำเนินการเริ่มต้นของ A คือเนื้อหาของ JavaScript Pseudo-Protocol การเพิ่มโมฆะหรือไม่จะทำให้เกิดเหตุการณ์อื่น ๆ (หมายเหตุ: ภายใต้โอเปร่าเมื่อมีค่าส่งคืนใน pseudo-protocol, HREF จะเปลี่ยนไปดังนั้นเรามักจะเขียนโมฆะ (0) หรือข้อความว่าง)

หลังจากทำความเข้าใจวิธีการเขียนครั้งที่สามคุณจะเข้าใจวิธีการเขียนที่สี่: href = JavaScript: โมฆะบางสิ่งบางอย่าง () ข้อดีอย่างหนึ่งของวิธีนี้คือเมื่อเมาส์ถูกระงับผู้ใช้สามารถเห็นฟังก์ชั่นที่จะดำเนินการผ่านแถบสถานะ นี่อาจเป็นประโยชน์สำหรับนักพัฒนา แต่สำหรับผู้ใช้ทั่วไปสิ่งนี้จะเพิ่มความไว้วางใจได้หรือไม่? หรือว่าเป็นความกลัว? หากไม่มีข้อมูลคุณไม่สามารถสรุปได้

นอกเหนือจากวิธีการเขียนด้านบนแล้วยังมีวิธีการเขียนที่แนะนำอีกวิธีหนึ่งซึ่งคือการเพิ่มตะขอให้กับคลาสหรือ ID จากนั้นเพิ่มเหตุการณ์ผ่าน hook ใน JS การสะท้อนกลับ

ฉันไม่ต้องการที่จะพูดคุยเกี่ยวกับรูปแบบการเขียนข้างต้นใดที่ดีที่สุด ลองนึกถึงคำถามต้นกำเนิด: ทำไมเราถึงใช้ A เพื่อกระตุ้นกิจกรรม JS? เหตุผลที่ฉันคิดได้คือ:

สิ่งนี้จะมีสไตล์การระงับเมาส์โดยอัตโนมัติ ทุกคนไม่สามารถนึกถึงเหตุผลใด ๆ ในการเขียนด้วยวิธีนี้ นี่ไม่ใช่เรื่องธรรมชาติมากนัก เพราะ IE6 รองรับ: โฮเวอร์กับสไตล์ CSS เท่านั้นและ HREF ไม่สามารถว่างเปล่าได้

จะเห็นได้ว่านอกเหนือจากสไตล์การลอยตัวไม่มีเหตุผลมากมาย ลองกันปัญหาสไตล์ในขณะนี้และดูตัวอย่าง:

ด้านบนเป็นแถบการดำเนินการของ Google Reader หากคุณสนใจคุณก็อาจ Firebug ได้เช่นกัน แท็กที่ใช้คือ:

สไตล์ที่ถูกระงับของเมาส์ไม่ใช่ปัญหาเลย:

ใน CSS เพียงเพิ่มเคอร์เซอร์: ตัวชี้

จากตัวอย่างข้างต้นเราสามารถสรุปข้อสรุป: หากคุณเพียงแค่เรียกการกระทำ JS โดยไม่ต้องใช้การนำทางหรือความหมายตำแหน่งใด ๆ คุณสามารถใช้ช่วงหรือแท็กที่เหมาะสมอื่น ๆ และไม่จำเป็นต้องใช้อย่างไม่ถูกต้อง

แน่นอนว่าถ้ามันเป็นลิงค์ของตัวเองคุณเพียงต้องการเพิ่มแอปพลิเคชั่นการเรียงลำดับ JS หรือแบบฟอร์มการเรียงลำดับก่อนนำทางโดยพิจารณาจากมุมมองการเพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไปแนวทางปฏิบัติที่ดีที่สุดคือการเขียนค่า HREF ทั้งหมดเพื่อให้เบราว์เซอร์ที่ไม่รองรับ JS สามารถรับประกันการใช้งานได้ แนวทางปฏิบัติที่ดีที่สุด

มันไม่ได้เป็นบทสรุปไม่ใช่การสรุปครั้งเดียว แนวปฏิบัติที่ดีที่สุดเป็นเพียงชุดของหลักการ จำเป็นต้องคิดก่อนที่จะเขียนโค้ด:

ใช้ปุ่มลิงค์ A หรือปุ่ม ขึ้นอยู่กับสถานการณ์การใช้งานเฉพาะปุ่มเกี่ยวข้องกับแบบฟอร์ม อย่าใช้ในทางที่ผิด เมื่อคุณไม่สามารถเข้าใจได้ว่าค่า HREF คืออะไร (อย่าแสดง JavaScript Pseudo-Protocol อย่าเหงา#) โปรดเลือกแท็กอื่น ๆ และเพิ่มกิจกรรมใน JS ผ่าน Hooks หากเป็นลิงค์และมีเหตุการณ์ onclick โปรดคิดเกี่ยวกับการปรับปรุงค่อยๆเพื่อให้แน่ใจว่ามีความสมบูรณ์ของค่า HREF

รหัสมีชีวิตแท็กอาณาจักรเป็นสวนสัตว์คุ้นเคยกับพวกเขาทุกอย่างน่ารัก