การออกแบบส่วนหน้าเว็บ: โครงสร้างหน้าดีและรหัสที่สวยงาม

บทความบทนำของ wulin.com (www.vevb.com): น้ำในหน้าส่วนหน้าลึกแค่ไหน?

ทุกคนที่ทำงานบนอินเทอร์เน็ตโดยทั่วไปจะเขียน HTML สองสามบรรทัด ผู้ที่ใช้คำพูดสามารถสร้างหน้าปกติกับ Dreamweaver ได้ดังนั้นคนส่วนใหญ่จะคิดว่าการพัฒนาหน้าไม่มีเนื้อหาทางเทคนิคมากนักและเป็นเรื่องง่ายมาก ไม่เพียง แต่ความเข้าใจร่วมกันนี้ แต่ยังมีข้อสงสัยมากมายสำหรับผู้ปฏิบัติงาน: ไม่มีปัญหาในการใช้หน้าส่วนหน้า ความเข้ากันได้กรณีเล็ก ๆ ; การรวมรูปภาพและมันถูกใช้ตลอดเวลา ... สามารถพบปัญหาอื่น ๆ ได้บ้าง? คอขวดเพดานการเปลี่ยนแปลงและวิธีการออกไปพูดคุยกันอย่างกว้างขวางในหมู่ผู้ปฏิบัติงาน ไม่มีปัญหาจริงเหรอ? ศูนย์เทคโนโลยีส่วนหน้าของ NetEase อีเมลได้รับการจัดตั้งขึ้นมาหลายปีแล้วและดูเหมือนว่ามีหัวข้อที่ไม่มีที่สิ้นสุดที่จะพูดคุยและมักจะมีแนวคิดใหม่ที่จะให้กำลังใจทุกคน ดังนั้นข้อกำหนดสำหรับการพัฒนาหน้าคืออะไรและสิ่งอื่นที่ต้องทำและน้ำลึกแค่ไหนที่นี่เรามาตักมันกัน

การรับรู้ของส่วนหน้าของหน้าดูเหมือนจะแตกต่างกันในเวลาที่ต่างกัน ในช่วงแรก ๆ ของอินเทอร์เน็ตรถยนต์ขนาดเล็กยังคงมีราคาแพงกว่าบ้านและเค้กงาและ Vermicelli ถูกใช้กินเท่านั้นและดอกเบญจมาศถูกใช้เพื่อทำชาเท่านั้น ในเวลานั้นสไตล์การออกแบบหน้าค่อนข้างเดี่ยวและข้อกำหนดของหน้าเว็บที่สอดคล้องกันนั้นค่อนข้างง่าย เบราว์เซอร์ในเวลานั้นเป็นโลกของ IE6 JavaScript มีความหมายเหมือนกันกับเอฟเฟกต์พิเศษของหน้าเว็บ หน้า HTML นั้นไม่ได้ดึงดูดความสนใจมากนัก ดูเหมือนว่าตราบใดที่คุณสามารถใช้ DIV หรือแม้แต่ตารางเพื่อเพิ่ม CSS ในการวางตำแหน่งเสริมของภาพมันก็โอเคที่จะจองเนื้อหาหน้าเว็บและแนวคิดนี้มีอยู่เป็นเวลานาน ด้วยการเพิ่มคุณค่าของเนื้อหาหน้าเว็บการพัฒนาสไตล์การออกแบบการเพิ่มความซับซ้อนของการโต้ตอบการประยุกต์ใช้ AJAX และการอัปเดตของเบราว์เซอร์ทำให้ทุกคนให้ความสนใจกับหน้าพื้นฐานที่สุดอีกครั้ง ถ้าอย่างนั้นสิ่งที่กล่าวถึงอย่างถึงพริกกันคือความเข้ากันได้ของเบราว์เซอร์ เมื่อพบปัญหาสิ่งที่หลงใหลที่สุดคือการค้นหาแฮ็กบนอินเทอร์เน็ตจากนั้นดุ IE6 และ 7 ... หลังจากทำสิ่งเหล่านี้ทั้งหมดดูเหมือนว่าฉันได้พบคอขวดอีกครั้งและเริ่มหาทางออก เริ่มต้นด้วยขั้นตอนนี้กันเถอะ

การใช้การเรนเดอร์เป็นงานพื้นฐานที่สุด

ร่างภาพจะแสดงผ่านรหัสหน้าซึ่งรวมถึงความต้องการพื้นฐานสองประการ: 1. มันสามารถสะท้อนร่างภาพได้อย่างแท้จริง 2. สามารถเข้ากันได้ผ่านเบราว์เซอร์ เพื่อให้บรรลุข้อเรียกร้องทั้งสองนี้เราจำเป็นต้องมีทัศนคติรายละเอียดและทักษะหน้าเว็บในระดับหนึ่ง หากเราสามารถกรอกเนื้อหาทั้งสองนี้ได้เราสามารถเข้าสู่กลุ่มผู้ปฏิบัติงานที่ส่วนหน้าของหน้า แต่นั่นหมายความว่าเราสามารถมีความสามารถในการพัฒนาหน้าเว็บได้หรือไม่? ไม่มันเพิ่งเริ่มต้น!

การสื่อสารกับนักออกแบบและการมีส่วนร่วมของโครงการ

การสื่อสารเป็นสิ่งสำคัญ ให้ฉันถามคำถามสองสามข้อก่อน: เราได้พูดคุยกับนักออกแบบว่าเอฟเฟกต์บางอย่างมีผลกระทบมากขึ้นต่อประสิทธิภาพการแสดงผลของเบราว์เซอร์ต่ำสุดหรือไม่? คุณเคยพูดถึงผลกระทบบางอย่างที่สามารถนำไปใช้ใน CSS3 เพื่อทำให้โครงสร้างกระชับและชัดเจนยิ่งขึ้นหรือไม่? คุณเคยติดตามความสมดุลในรหัสและวิสัยทัศน์หรือไม่? การพัฒนาส่วนหน้าของหน้านี้ใช้สำหรับผู้ใช้ขั้นพื้นฐานและรหัสที่เขียนยังถูกนำไปใช้โดยตรงกับเบราว์เซอร์ เราจำเป็นต้องรับผิดชอบต่อความมั่นคงและประสิทธิภาพการแสดงผลของหน้า นอกจากนี้เรายังพบการออกแบบโครงการภายใต้แรงกดดันโดยรวมและการออกแบบจะดำเนินการพร้อมกันกับการพัฒนาส่วนหน้าของหน้า ในเวลานี้จำเป็นต้องได้รับข้อมูลโครงการให้มากที่สุดและเข้าใจสิ่งที่เราต้องทำ สิ่งเหล่านี้สามารถช่วยให้เราพิจารณาการขยายการใช้ซ้ำและการขยายกรอบได้อย่างเต็มที่

โครงสร้างหน้าดี

การเขียนโครงสร้างหน้าเป็นเหมือนการสร้างรากฐานอาคาร คุณภาพของรหัส CSS การพัฒนา JS การพัฒนาพื้นหลังและการขยายหน้าในอนาคตการทำซ้ำและการปรับหน้า หลังจากที่คุณได้รับร่างภาพอย่ายุ่งเริ่มต้นสังเกตและคิดเพิ่มเติม ก่อนอื่นวิเคราะห์เลย์เอาต์แบ่งกรอบงานแล้ววางแผนโครงสร้างและเขียนรหัส โดยเฉพาะอย่างยิ่งในโครงการขนาดใหญ่การใช้อย่างมีเหตุผลของการพัฒนาแบบแยกส่วนมีประโยชน์อย่างมากไม่ว่าจะดำเนินการในการบำรุงรักษาโดยรวมหรือขยาย

เกี่ยวกับการแฮ็ก

นักเรียนหลายคนค้นหาแฮ็คออนไลน์มากที่สุดเมื่อพัฒนาหน้าเว็บ ไม่ว่าเราจะพึ่งพาแฮ็กทั้งหมดเพื่อให้ได้มาซึ่งความเข้ากันได้ของหน้าเว็บคำตอบก็คือไม่ ผู้คนมักจะอธิบาย IE6 ว่าเราได้บอกเราว่าโกหก แต่เราต้องบอกอีกร้อยคำโกหกเพื่อเติมเต็มคำโกหกนี้ ไม่ปฏิเสธว่า IE6 มักจะทำให้เราอาเจียนเลือดในปากของเรา แต่ก็ไม่ได้หมายความว่าเราสามารถรู้สึกสบายใจโดยใช้การโกหกมากขึ้นเพื่อชดเชยมัน ในกรณีส่วนใหญ่คุณสามารถปรับโครงสร้าง HTML โดยการเปลี่ยนความคิดของคุณหรือใช้ CSS บางอย่างที่ไม่ได้อธิบาย แต่ค่อนข้างปลอดภัยในการฆ่าแฮ็ก ไม่มีใครสามารถทำนายได้ว่าเมื่อใช้แฮ็คจะทำให้เราตกอยู่ในการระเบิดครั้งใหญ่ ตัวอย่างเช่นการเรียกเค้าโครงหรือตำแหน่ง: ญาติสามารถช่วยแก้ปัญหา IE6 ได้หลายอย่าง

รหัสที่สวยงาม

ทุกวันนี้โครงการเว็บจำนวนมากมีฟังก์ชั่นที่ซับซ้อนและมาตราส่วนรหัสของพวกเขาจะกลายเป็นขนาดใหญ่ วิธีการพัฒนาและบำรุงรักษาร่วมกันเป็นปัญหาที่เราเผชิญ เราจำเป็นต้องพิจารณาปรับปรุงการวางแผนแบบครบวงจรและเราต้องพัฒนานิสัยการพัฒนารหัสที่ดีเพื่อให้สบายเมื่อเผชิญกับสถานการณ์ต่าง ๆ เมื่อมองผ่านรหัสหน้าดูการใช้ฉลากที่สมเหตุสมผลคำอธิบายประกอบที่ดีโครงสร้างรหัสที่ชัดเจนและ CS ที่ถูกต้องไม่เพียง แต่ชื่นชมงานศิลปะ แต่ยังลดค่าใช้จ่ายในการสื่อสารสำหรับการพัฒนาดาวน์สตรีมและการพัฒนาความร่วมมือ เหตุผลอะไรที่เราไม่ต้องทำเช่นนี้? เพื่อให้ตัวอย่างเชิงลบ: การละเมิด DIV เป็นปัญหาทั่วไปในขณะนี้ นับเพื่อดูว่าคุณใช้แท็กกี่แท็ก? ความหมายที่แตกต่างกันควรใช้รหัสแท็กที่สอดคล้องกันโดยเฉพาะ HTML5 ให้แท็กความหมายที่สมบูรณ์ยิ่งขึ้น พวกเขาทั้งหมดกำลังรอการเรียกเก็บเงินในสนามรบ ให้เราปลดปล่อยพวกเขา!

การพัฒนาหน้าเว็บที่เข้าถึงได้

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

สร้างความมั่นใจให้มีประสิทธิภาพ

ในฐานะที่เป็นส่วนหนึ่งของการพัฒนาโครงการที่ค่อนข้างจะต้องเสร็จสิ้นโดยเร็วที่สุดเท่าที่จะเป็นไปได้เพื่อให้ได้เวลาสำหรับโครงการซึ่งทำให้เราต้องปรับปรุงประสิทธิภาพให้มากที่สุด หากคุณต้องการทำมันให้ดีคุณต้องลับเครื่องมือของคุณก่อน นอกเหนือจากการก่อตัวของประสบการณ์การปฏิบัติและนิสัยการใช้รหัสที่สามารถช่วยเราปรับปรุงประสิทธิภาพหากคุณต้องการปรับปรุงความสามารถในการควบคุมความคืบหน้าของการพัฒนาของคุณเองมีเครื่องมือเสริมมากมายที่สามารถช่วยเราพัฒนาหน้าเว็บ ตัวอย่างเช่นการใช้น้อยลงหรือ SASS สามารถช่วยให้เราขยายและจัดระเบียบ CSS ปรับปรุงประสิทธิภาพการเขียนของ CSS และเพิ่มความสามารถในการบำรุงรักษาอย่างมาก ตัวอย่างเช่นคุณสามารถใช้การกรอกข้อมูลอัตโนมัติและบล็อกรหัสที่กำหนดเองของ Zen Coding เพื่อให้คุณชี้ดาบของคุณราวกับว่าคุณกำลังบินอยู่ ฉันเคยเห็นคำหลักบล็อกโค้ดที่ปรับปรุงความเร็วในการพัฒนาผ่านวิธีการป้อนข้อมูลแบบกำหนดเอง หากคุณสำรวจมากขึ้นคุณจะพบเครื่องมือที่เหมาะสมที่สุดสำหรับตัวคุณเอง

การเพิ่มประสิทธิภาพสำหรับเซิร์ฟเวอร์

การพัฒนาหน้ายังต้องการการทำความเข้าใจการเพิ่มประสิทธิภาพเซิร์ฟเวอร์และลดภาระบนเซิร์ฟเวอร์ให้น้อยที่สุด ตัวอย่างเช่น CSS Sprite เป็นตัวอย่างทั่วไปของการลดจำนวนคำขอเซิร์ฟเวอร์ ในการพัฒนาส่วนหน้าของหน้าอีเมล NetEase เรากำลังทำการปรับให้เหมาะสมอย่างต่อเนื่องเช่นการหาสมดุลระหว่างขนาดไฟล์และหมายเลขคำขอเซิร์ฟเวอร์อย่างต่อเนื่อง เพื่อปรับปรุงการใช้แคชให้มากที่สุดเท่าที่จะเป็นไปได้ ชื่อคลาสได้รับการทำให้งงและบีบอัดเพื่อหลีกเลี่ยงการตั้งชื่อที่ยาวเกินไป Base64 ถูกใช้เพื่อลดจำนวนคำขอและมาตรการอื่น ๆ นี่คือผลลัพธ์ของการแลกเปลี่ยนที่ครอบคลุมและการเพิ่มประสิทธิภาพโดยรวมจะต้องได้รับการพิจารณาในทุกด้าน เพราะเมื่อจำนวนการเข้าชมหน้าถึงลำดับความสำคัญบางอย่างแม้แต่การเพิ่มประสิทธิภาพที่เล็กที่สุดก็จะได้ผลลัพธ์ที่สำคัญและแม้แต่ปัญหาที่เล็กที่สุดก็อาจก่อให้เกิดภัยพิบัติครั้งใหญ่

กอด HTML5

นี่คือยุคที่เต็มไปด้วยโอกาส การถือกำเนิดของยุค HTML5 ได้สร้างโอกาสที่มากขึ้นด้วยการเพิ่มขึ้นของอินเทอร์เน็ตบนมือถือและมีหลายสิ่งหลายอย่างที่ควรค่าแก่การเรียนรู้และการค้นพบ HTML5 ให้อินเทอร์เฟซ JS API ที่หลากหลายซึ่งเราต้องศึกษา ความงดงามของ CSS3 ได้รับความสนใจมากพอซึ่งเราต้องศึกษา วิธีการพัฒนาหน้าเว็บที่ปรับตัวได้มากขึ้นบนอุปกรณ์มือถือต้องการให้เราศึกษา ...

อยู่หิว

ยิ่งฉันตักน้ำมากเท่าไหร่ฉันก็พบว่าด้านล่างยังคงลึกและด้านล่างไม่ได้มีจุดต่ำสุด ยิ่งฉันศึกษาเนื้อหาข้างต้นมากเท่าไหร่ฉันก็ยิ่งพบว่าภูเขาและแม่น้ำต้องปีนขึ้นไป อยู่หิวใช้ตาของคุณเพื่อค้นพบและค้นพบและเสริมสร้างทักษะของคุณอย่างต่อเนื่องเพื่อค้นหาตำแหน่งและฝ่าคอขวด เมื่อคำพูดดำเนินไปโดยการสร้างบ้านระดับสูงเท่านั้นที่คุณจะได้ผลลัพธ์ที่เป็นธรรมชาติ บทความนี้ถูกสร้างขึ้นเพราะฉันพูดถึงปัญหาคอขวดกับเพื่อนร่วมงานของฉันมาก่อน ฉันต้องการหาตำแหน่งสำหรับตัวเองและนักเรียนที่ส่วนหน้าของหน้าเพื่อแยกแยะความคิดของฉัน รับประโยคจากคำพูดของ CEO ของ Apple ที่ Stanford อยู่หิวและโง่และแบ่งปันกับทุกคน