ข้อมูลจำเพาะ
นี่คือมาตรฐานการเขียนโค้ดที่ทีมพัฒนาส่วนหน้าปฏิบัติตามและตกลงกัน ซึ่งมีวัตถุประสงค์เพื่อปรับปรุงมาตรฐานและการบำรุงรักษาโค้ด
หลักการพื้นฐาน
สอดคล้องกับมาตรฐานเว็บ ความหมาย HTML การแยกโครงสร้าง ประสิทธิภาพและพฤติกรรม และความเข้ากันได้ดีเยี่ยม ในแง่ของประสิทธิภาพของหน้า โค้ดจะต้องกระชับ ชัดเจน และเป็นระเบียบ เพื่อลดภาระของเซิร์ฟเวอร์ให้มากที่สุดและรับประกันว่า ความเร็วการแยกวิเคราะห์ที่เร็วที่สุด
ข้อกำหนดทั่วไป
1. ละเว้น (ละเว้น) โปรโตคอล: เช่น พื้นหลัง: url(http://www.google.com/images/example); คุณควรเขียนพื้นหลัง: url(//www.google.com/images/example); อำนวยความสะดวกในการสลับ http ด้วยโปรโตคอล https เว้นแต่ต้องใช้โปรโตคอลบางอย่าง
2. ใช้ IDE เพื่อให้มีการเยื้องที่ชัดเจนเมื่อเขียน ปุ่มแท็บจะถูกแทนที่ด้วยช่องว่างสี่ช่อง
เนื่องจากเครื่องมือแก้ไขของระบบต่างๆ ตีความแท็บต่างกัน ปุ่มแท็บภายใต้ Windows จะใช้พื้นที่สี่ช่อง ในขณะที่สำหรับ Linux จะใช้พื้นที่แปดช่อง (เว้นแต่คุณจะตั้งค่าการใช้ปุ่มแท็บด้วยตนเอง ความยาวตำแหน่ง)
ตัวอย่างเช่น ข้อความประเสริฐ คุณสามารถตั้งค่าปุ่มแท็บในเครื่องมือนี้ได้
3. ใช้ตัวพิมพ์เล็กสำหรับแอตทริบิวต์ป้ายกำกับ
4. อย่าเว้นช่องว่างด้านท้ายเพื่อป้องกันความแตกต่าง
5. ใช้ UTF-8 (ไม่มี BOM) และเพิ่ม <meta charset="utf-8″> ลงในเอกสาร
6. ใช้ตัวพิมพ์เล็ก ".js" ในการตั้งชื่อไฟล์ และแนะนำ "-" แทน "_"
7.TODO(ติดต่อ) และ TODO: รายการการกระทำ ห้ามใช้ @@
ข้อกำหนดการปรับแต่ง HTML
1. ข้อกำหนดการใช้งาน html5 <!DOCTYPE html>
2. รูปแบบเริ่มต้นของแท็ก <img>: <img src="xxx.png" alt="ข้อความเริ่มต้น" /> เพื่อหลีกเลี่ยงปัญหา src=""
3. รูปแบบเริ่มต้นของแท็ก <a>: <a href="###" title="Link name">xxx</> หมายเหตุ: target="_blank" ถูกกำหนดตามความต้องการ
4. แท็ก <a> ขอสงวนตัวยึดลิงก์โดยใช้ ### โปรดดู: ปัญหาตัวยึดตำแหน่งแท็ก
5. เมื่อเขียนที่อยู่ลิงก์ คุณต้องหลีกเลี่ยงการเปลี่ยนเส้นทาง เช่น: href="http://itaolun.com/" กล่าวคือ คุณต้องเพิ่ม "/" หลังที่อยู่ URL
6. แท็กทั้งหมดจะต้องปิดตามมาตรฐาน XHTML
7. ใช้เครื่องหมายทับต่อท้ายแท็กด้วยรูปแบบการเขียนเดียวกันเสมอ: <br /> <hr /> ใส่ใจกับช่องว่างระหว่าง
8. หลีกเลี่ยงการใช้แท็กที่ล้าสมัย เช่น: <b> <u> <i> และแทนที่ด้วย <strong> <em> เป็นต้น
9. ใช้ data-xxx เพื่อเพิ่มข้อมูลที่กำหนดเอง เช่น: <input data-xxx="yyy"/>
10. หลีกเลี่ยงการใช้ style="xxx:xxx;" สัญลักษณ์พิเศษในสไตล์ชีตแบบอินไลน์ และใช้เอนทิตีสัญลักษณ์ HTML อ้างอิง
11. ต้องเพิ่มป้ายกำกับให้กับองค์ประกอบรูปแบบที่สื่อความหมาย (อินพุต, textarea) เช่น <p>ชื่อ: <input type="text" id="name" name="name" /></p> จะต้องเขียนเป็น : < p><label for=”name”>ชื่อ: </label><input type=”text” id=”name” /></p>
ข้อกำหนดการปรับแต่ง CSS
1. เพิ่ม ";" หลังแอตทริบิวต์แต่ละสไตล์
เครื่องมือบีบอัดที่สะดวก "การแบ่งส่วนประโยค"
2. การตั้งชื่อชั้นเรียน ใช้ "-" [ตัวเชื่อมต่อเครื่องหมายลบ] เพื่อแยกตัวอักษรในชั้นเรียน:
การแยกด้วย "-" จะชัดเจนกว่าการใช้กล่องอูฐ
สายผลิตภัณฑ์-ผลิตภัณฑ์-โมดูล-โมดูลย่อย คุณสามารถใช้วิธีนี้เมื่อตั้งชื่อได้
ID: ระบบการตั้งชื่อ CamelCase เช่น:
firstName topBoxList ส่วนท้ายลิขสิทธิ์
3. สำหรับการใช้ช่องว่างให้ใช้กฎต่อไปนี้:
.เนื้อหาโรงแรม {
น้ำหนักตัวอักษร: ตัวหนา;
- ต้องมีช่องว่างก่อนตัวเลือกและ { ชื่อแอตทริบิวต์ต้องมีช่องว่างหลัง: ชื่อแอตทริบิวต์ต้องมีช่องว่างหลัง: เหตุผลหนึ่งที่เพิ่มช่องว่างข้างหน้า (ต้องห้าม) คือความสวยงาม ประการที่สอง มีข้อบกพร่องใน IE 6 . กระตุ้นข้อผิดพลาด
4. (แนะนำ) ลำดับการเขียนของแอตทริบิวต์ เช่น:
.เนื้อหาโรงแรม {
/* ตำแหน่ง*/
จอแสดงผล: บล็อก;
ตำแหน่ง: แน่นอน;
ซ้าย: 0;
ด้านบน: 0;
/* รุ่นกล่อง */
ความกว้าง: 50px;
ความสูง: 50px;
ระยะขอบ: 10px;
เส้นขอบ: 1px สีดำทึบ;
/ *อื่น* /
สี: #efefef;
-ที่เกี่ยวข้องกับการวางตำแหน่ง สิ่งทั่วไป ได้แก่ ตำแหน่งการแสดงผล ลอยบนซ้าย ฯลฯ โมเดลที่เกี่ยวข้องกับกล่อง สิ่งทั่วไป ได้แก่ ความกว้าง ความสูง ระยะขอบ ช่องว่างภายใน เส้นขอบ และคุณลักษณะอื่น ๆ
การเขียนตามลำดับนี้สามารถปรับปรุงประสิทธิภาพของเบราว์เซอร์ในการแสดงผล DOM ได้ ตัวอย่างเช่น หากไม่ได้ตั้งค่าความกว้างและความสูงของรูปภาพบนหน้าเว็บ ก่อนที่รูปภาพจะถูกโหลด พื้นที่นั้นจะเป็น 0 แต่หลังจากโหลดแล้ว , , พื้นที่ของ 0 ถูกขยายออกอย่างกะทันหัน ซึ่งจะทำให้องค์ประกอบด้านล่างถูกจัดเรียงและเรนเดอร์ใหม่ ทำให้เกิดการทาสีใหม่และการจัดวางใหม่ เมื่อเราเขียน CSS เราจะวางตำแหน่งขององค์ประกอบก่อน อันดับแรก เราจะแจ้งให้เบราว์เซอร์ทราบว่าองค์ประกอบนั้นอยู่ภายในหรือภายนอกการไหลของข้อความ และตำแหน่งนั้นอยู่บนหน้า จากนั้น เราจะแจ้งให้เบราว์เซอร์ทราบความกว้าง ความสูง เส้นขอบ ฯลฯ คุณลักษณะเหล่านี้ที่ใช้พื้นที่และคุณลักษณะอื่น ๆ จะแสดงผลภายในพื้นที่คงที่นี้ นั่นคือสิ่งที่มันหมายถึง ~
บทความแนะนำ:
ผลการสำรวจ: คุณจะเรียงลำดับคุณสมบัติ CSS ของคุณได้อย่างไร?
http://www.mozilla.org/css/base/content.css
5. (แนะนำ) เมื่อเขียนสไตล์สำหรับโครงสร้าง HTML เฉพาะ ให้ใช้ชื่อองค์ประกอบ + ชื่อคลาส
/* navs ทั้งหมดเขียนขึ้นสำหรับ ul*/
ul.nav {
-
- ".a div" และ ".a div.b" ทำไมอันหลังถึงดีกว่า หากความต้องการเปลี่ยนแปลงและเพิ่ม div เพิ่มเติมภายใต้ ".a" สไตล์เริ่มต้นจะส่งผลต่อ div ที่ตามมาหรือไม่~
6. (ไม่แนะนำ) ใช้ตัวกรองใน เช่น (ห้าม) ใช้นิพจน์
ปัญหาหลักที่นี่คือประสิทธิภาพ คุณควรให้ความสนใจเป็นพิเศษและใช้สิ่งที่เผาผลาญ CPU ให้น้อยลง~
7. ความคิดเห็น CSS จะแสดงด้วย "/* */" เมื่อแสดงความคิดเห็นในบรรทัดเดียว วัตถุที่มีคำอธิบายประกอบและอักขระความคิดเห็นก่อนหน้าและถัดไปแต่ละรายการจะเว้นวรรคและครอบครองบรรทัดแยกกัน เมื่อแสดงความคิดเห็นในหลายบรรทัด อักขระและอักขระความคิดเห็นตอนจบจะมีหนึ่งบรรทัด ตัวอย่างเช่น:
/* ความคิดเห็น CSS */
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
-
-ข้อกำหนดการปรับแต่ง JS
1. ตัวแบ่งบรรทัด
โค้ดแต่ละบรรทัดควรมีความยาวน้อยกว่า 120 อักขระ หากเกินจำนวนนี้ ให้พิจารณาบรรทัดใหม่ เช่น "+" ไว้ท้ายบรรทัด ต้องเยื้องบรรทัดใหม่อีกหนึ่งระดับก่อนขึ้นบรรทัดใหม่
หากพารามิเตอร์ในฟังก์ชันหรือเมธอดมีความยาว ควรแบ่งพารามิเตอร์เหล่านั้นอย่างเหมาะสม
ห้ามแบ่งบรรทัดระหว่างคีย์เวิร์ด return และนิพจน์ที่จะส่งคืน ตัวอย่างเช่น:
// สิ่งที่ส่งคืนจริงไม่ได้กำหนด ไม่ใช่ 1
ทดสอบฟังก์ชัน() {
กลับ
1;
- 2. บรรทัดของโค้ด
ห้ามมิให้เขียนข้อความสั้น ๆ หลายรายการในบรรทัดเดียว กล่าวคือ เขียนเพียงข้อความเดียวในบรรทัดเดียว
คำสั่งเช่น if, for, do, while, switch, case, default, break และ Continue จะใช้บรรทัดของตัวเอง
เนื้อความของลูปและคำสั่งการดำเนินการของเนื้อความการตัดสิน เช่น if, for, do, while ฯลฯ จำเป็นต้องอยู่ใน "{}" และไม่อนุญาตให้ละเว้นเครื่องหมายปีกกา ตัวอย่างเช่น:
// ผิดถ้า (i < 5) i += 1;
// แก้ไขถ้า (i < 5) {
ฉัน += 1
- 3. การจัดตำแหน่ง <br />ตัวคั่น {} ของบล็อกโค้ด "{" ตามบรรทัดก่อนหน้าและคั่นด้วยช่องว่างด้านหน้า "}" ควรครอบครองบรรทัดพิเศษและอยู่ในคอลัมน์เดียวกัน ในขณะที่ จัดชิดซ้ายกับข้อความที่อ้างถึงพวกเขา
วิธีการเยื้องข้างต้นต้องใช้ที่จุดเริ่มต้นของเนื้อหาฟังก์ชัน คำจำกัดความของคลาส และโปรแกรมในคำสั่ง if, for, do, while, switch และ case
4. พื้นที่
จะต้องมีช่องว่างหลังคำหลักเพื่อเน้นคำหลัก
ไม่สามารถเว้นวรรคระหว่างชื่อฟังก์ชัน ชื่อเมธอด และวงเล็บเหลี่ยมซ้าย "(" ได้ เช่น:
// ฟังก์ชัน getInfo ผิด () {
// รหัส
-
// แก้ไขฟังก์ชัน getInfo() {
// รหัส
-เมื่อประกาศนิพจน์ฟังก์ชัน ห้ามเว้นช่องว่างระหว่างฟังก์ชันและวงเล็บเหลี่ยมซ้าย "(" เช่น:
// ผิด var user = function () {
// รหัส
-
// แก้ไข var user = function() {
// รหัส
- เพิ่มช่องว่างหลังเครื่องหมายจุลภาค
ตัวดำเนินการกำหนด ตัวดำเนินการเปรียบเทียบ ตัวดำเนินการทางคณิตศาสตร์ ตัวดำเนินการเชิงตรรกะ ตัวดำเนินการฟิลด์บิต เช่น "=", "+=" ">=", "<=", "+", "*", "%" ", " &&", "||" และตัวดำเนินการไบนารีอื่นๆ ควรนำหน้าและตามด้วยช่องว่าง
ไม่มีการเว้นวรรคก่อนและหลังตัวดำเนินการเอกภาค เช่น "!", "~", "++", "--" และ "&" (ตัวดำเนินการที่อยู่)
ไม่มีการเว้นวรรคก่อนและหลัง "." และ "[]"
5. บรรทัดว่าง
เพิ่มบรรทัดว่างหลังการประกาศคลาสแต่ละครั้งและที่ส่วนท้ายของคำจำกัดความฟังก์ชันแต่ละรายการ
ภายในเนื้อหาของฟังก์ชัน ข้อความที่เกี่ยวข้องอย่างใกล้ชิดทางตรรกะไม่ควรคั่นด้วยบรรทัดว่าง และที่อื่นๆ ควรคั่นด้วยบรรทัดว่าง
6. ใช้ตัวดำเนินการตามเงื่อนไขที่เข้มงวด ใช้ === แทน == และ !== แทน !=
7. หลีกเลี่ยงการใช้เครื่องหมายจุลภาคเพิ่มเติม ตัวอย่างเช่น: var arr = [1,2,3,]
8. ข้อความต้องลงท้ายด้วยเครื่องหมายอัฒภาค ยกเว้น function, if, switch, try และ while
9. วางเครื่องหมายปีกกาด้านซ้ายที่ท้ายบรรทัด และเครื่องหมายปีกกาด้านขวาที่จุดเริ่มต้นของบรรทัด
10. ไม่แนะนำให้ใช้ new เพื่อสร้างออบเจ็กต์ประเภทต่อไปนี้: หมายเลขใหม่, สตริงใหม่, บูลีนใหม่, ออบเจ็กต์ใหม่ (แทนที่ด้วย {}), อาร์เรย์ใหม่ (แทนที่ด้วย [])
11. จะต้องมีช่องว่างหลัง "," ระหว่างสมาชิกอาร์เรย์
12. ห้ามใช้การตั้งชื่อคีย์เวิร์ดที่สงวนไว้ด้วย JavaScript ใน js/json ซึ่งอาจทำให้เกิดข้อผิดพลาดได้ง่ายใน IE คำหลัก (ตัวแบ่ง, ตัวพิมพ์เล็ก, catch, ดำเนินการต่อ, ค่าเริ่มต้น, ลบ, ทำ, อย่างอื่น, ในที่สุด, สำหรับ, ฟังก์ชัน, ถ้า, ใน, instanceof, ใหม่, กลับ, สลับ, นี้, โยน, ลอง, typeof, var, void, while , ด้วย), คำหลัก (นามธรรม, บูลีน, ไบต์, ถ่าน, คลาส, Con st, ดีบักเกอร์, สองเท่า, enum, ส่งออก, ขยาย, fimal, float, goto, นำไปใช้, นำเข้า, int, อินเทอร์เฟซ, ยาว, mative, แพ็คเกจ, ส่วนตัว, มีการป้องกัน, สาธารณะ, สั้น, คงที่, ซุปเปอร์, ซิงโครไนซ์, พ่น, ชั่วคราว, ระเหย).
13. ขอแนะนำให้ใช้ "+" เป็นตัวเชื่อมต่อขึ้นบรรทัดใหม่แทน ""
14. ห้ามใช้คำอธิบายภาษาทั่วไปที่กระชับและชัดเจน เมื่อเห็นข้อมูล คุณสามารถค้นหาข้อผิดพลาดได้ทันที เช่น เมื่อแจ้งข้อมูลผู้ใช้ให้รายงานข้อผิดพลาด ให้ใช้ "ผู้ใช้รายนี้ไม่มีอยู่จริง" " แทน "ข้อมูลที่ส่งคืนโดยพื้นหลังไม่ถูกต้อง", " หมดเวลาเครือข่าย"