ข้อความต้นฉบับภาษาอังกฤษ: กฎเจ็ดข้อของ JavaScript ที่ไม่สร้างความรำคาญ
ที่อยู่เดิม: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
ผู้เขียนต้นฉบับ: คริส ไฮล์มันน์
ที่อยู่การแปล: http://www.zhuoqun.net/html/y2008/1103.html
เขียนไว้ข้างหน้า: ตอนที่ kejun ฝึก JavaScript ให้เราเมื่อไม่นานมานี้ เขาแนะนำบทความคลาสสิกหลายบทความในสไลด์ รวมถึงบทความ One นี้ด้วย อ่านแล้วรู้สึกดีมากแต่มักไม่เข้าใจบทความอย่างลึกซึ้งแต่บังเอิญไม่พบบทความที่เป็นภาษาจีนจึงเกิดความคิดที่จะแปลบทความนี้ ที่ฉันสามารถแบ่งปันและทำความเข้าใจให้ลึกซึ้งยิ่งขึ้น ผู้เขียนบทความนี้ Chris Heilmann เป็นวิศวกรชาวอังกฤษของ Yahoo! (บุคคล "เจ้าพ่อ" ตาม Kejun) และการแปลบทความนี้ก็ได้รับการอนุมัติจากเขาเช่นกัน
อีกประการหนึ่งคือเมื่อก่อนผมแปลไปหลายอย่างแล้ว แต่ ณ เวลานั้นผมแปลเพิ่มเติมเพื่อการแปลและไม่เข้าใจบทความทางเทคนิคมากนัก เลยยังเป็นนักแปลมาจนบัดนี้ ฉันจะแปลบทความบางบทความต่อไปในอนาคต แต่ควรแปลเฉพาะบทความคลาสสิกที่ต้องทำความเข้าใจให้ละเอียดเท่านั้น หากคุณมีเวลา คุณยังควรเขียนโค้ดเพิ่มเติม การฝึกฝนคือหนทางไป
การแปลคำศัพท์: เกี่ยวกับคำว่า "JavaScript ที่ไม่สร้างความรำคาญ" ฉันไม่สามารถนึกถึงคำแปลที่เหมาะสมเป็นพิเศษได้ หลังจากค้นหาบนอินเทอร์เน็ต ฉันพบว่าบางส่วนได้รับการแปลเป็น "JavaScript แบบคีย์ต่ำ" บางส่วนได้รับการแปลว่า "JavaScript ที่ไม่ล่วงล้ำ" และบางส่วนในไต้หวันได้รับการแปลว่า "ไม่มี JavaScript ที่ล่วงล้ำ"... หลังจากการค้นคว้ามากมาย ฉันตัดสินใจใช้ "ไม่มี JavaScript ที่ล่วงล้ำ" คำแปลนี้คือ "JavaScript ที่น่ารำคาญ" (แม้ว่าจะยังไม่เหมาะกับฉันก็ตาม) โปรดดูรายละเอียดในบทความนี้ จริงๆ แล้ว "Unobtrusive JavaScript" มีหลายความหมาย และเป็นการยากที่จะสรุปเป็นคำเดียว หากคุณสนใจ คุณสามารถดูคำอธิบายของ "Unobtrusive JavaScript" ได้ในวิกิพีเดีย นอกจากนี้ ฉันคิดว่าการแปลคือการแสดงความหมายของผู้เขียน และไม่จำเป็นต้องแปลทีละคำ ดังนั้น เพื่อให้ผู้อ่านเข้าใจได้ง่ายขึ้น ฉันจึงลบบางส่วนออกและเพิ่มบางส่วนในบทความ แต่สิ่งเหล่านี้กลับเป็นเช่นนั้น โดยไม่ทำลายความหมายของข้อความต้นฉบับ
มีอีกประเด็นหนึ่งที่ควรทราบ นั่นคือ ทักษะการแปลของฉันเป็นมือสมัครเล่นมาก ดังนั้นจึงต้องมีข้อผิดพลาดในการแปล ดังนั้นโปรดแก้ไขให้ฉันด้วย
หลังจากหลายปีของการพัฒนา การสอน และการเขียน JavaScript ที่ไม่สร้างความรำคาญ ฉันได้ค้นพบแนวทางต่อไปนี้ ฉันหวังว่าสิ่งเหล่านี้จะช่วยให้คุณเข้าใจสักเล็กน้อยว่าทำไมการออกแบบและรัน JavaScript ด้วยวิธีนี้จึงดีกว่า กฎเหล่านี้ช่วยให้ฉันจัดส่งผลิตภัณฑ์ได้เร็วขึ้น มีคุณภาพสูงขึ้น และดูแลรักษาได้ง่ายขึ้น
1. อย่าตั้งสมมติฐานใดๆ (JavaScript เป็นตัวช่วยที่ไม่น่าเชื่อถือ)
บางทีลักษณะที่สำคัญที่สุดของ JavaScript ที่ไม่สร้างความรำคาญก็คือคุณต้องหยุดตั้งสมมติฐานใดๆ:
อย่าคิดว่า JavaScript พร้อมใช้งาน คุณควรคิดว่าเป็นไปได้ ไม่พร้อมใช้งานแทนที่จะพึ่งพาโดยตรง
อย่าคิดว่าเบราว์เซอร์รองรับวิธีการและคุณสมบัติจนกว่าคุณจะทดสอบและยืนยันว่าใช้งานได้
อย่าคิดว่าโค้ด HTML นั้นถูกต้องอย่างที่คิด โปรดตรวจสอบทุกครั้ง และไม่ดำเนินการใดๆ หากไม่มี
ทำให้ฟังก์ชัน JavaScript เป็นอิสระจากอุปกรณ์อินพุต โปรดจำไว้ว่าสคริปต์อื่นอาจส่งผลต่อการทำงานของ JavaScript ของคุณ ดังนั้นตรวจสอบให้แน่ใจว่าสคริปต์ของคุณอยู่ในขอบเขตที่ปลอดภัยที่สุด
ก่อนที่จะเริ่มออกแบบสคริปต์ของคุณ สิ่งแรกที่ต้องพิจารณาคือการตรวจสอบโค้ด HTML ที่คุณจะใช้สคริปต์และดูว่ามีอะไรที่สามารถช่วยให้คุณบรรลุเป้าหมายได้หรือไม่
2. ค้นหาความสัมพันธ์ของ hooks และโหนด (HTML เป็นรากฐานสำคัญของการเขียนสคริปต์)
ก่อนที่คุณจะเริ่มเขียนสคริปต์ โปรดดู HTML ที่คุณต้องการเขียน JavaScript ให้ หาก HTML ไม่มีการจัดระเบียบหรือไม่รู้จัก แทบเป็นไปไม่ได้เลยที่จะมีโซลูชันการเขียนสคริปต์ที่ดี เป็นไปได้ว่าคุณจะสร้างมาร์กอัปใน JavaScript มากเกินไป หรือแอปพลิเคชันจะขึ้นอยู่กับ JavaScript มากเกินไป
มีบางสิ่งที่ต้องพิจารณาใน HTML และนั่นคือความสัมพันธ์ของ hooks และโหนด
<1>.HTML hook
ดั้งเดิมและสำคัญที่สุดของ HTML คือ ID และ ID สามารถเข้าถึงได้ผ่านวิธี DOM ที่เร็วที่สุด -getElementById หาก ID ทั้งหมดในเอกสาร HTML ที่ถูกต้องไม่ซ้ำกัน (มีข้อบกพร่องใน IE เกี่ยวกับชื่อและ ID แต่ไลบรารีที่ดีบางแห่งสามารถแก้ปัญหานี้ได้) การใช้ ID จะปลอดภัย เชื่อถือได้ และทดสอบได้ง่าย
hooks อื่นๆ บางส่วนเป็นองค์ประกอบ HTML และคลาส CSS องค์ประกอบ HTML สามารถเข้าถึงได้ผ่านวิธี getElementsByTagName แต่ไม่สามารถเข้าถึงคลาส CSS ผ่านวิธี DOM ดั้งเดิมในเบราว์เซอร์ส่วนใหญ่ อย่างไรก็ตาม มีไลบรารีคลาสภายนอกจำนวนมากที่ให้วิธีการที่สามารถเข้าถึงชื่อคลาส CSS (คล้ายกับ getElementsByClassName)
<2>.ความสัมพันธ์ของโหนด HTML
อีกจุดที่น่าสนใจเกี่ยวกับ HTML ก็คือความสัมพันธ์ระหว่างแท็ก ลองนึกถึงคำถามต่อไปนี้:
เราจะเข้าถึงโหนดเป้าหมายได้ง่ายที่สุดและมีจำนวนการแวะผ่าน DOM น้อยที่สุดได้อย่างไร
ด้วยการปรับเปลี่ยนเครื่องหมายใด เราจึงสามารถเข้าถึงโหนดลูกได้มากที่สุดเท่าที่จะเป็นไปได้ซึ่งจำเป็นต้องแก้ไข
องค์ประกอบที่กำหนดมีคุณลักษณะหรือข้อมูลใดบ้างที่สามารถใช้เพื่อเข้าถึงองค์ประกอบอื่นได้
การข้าม DOM ต้องใช้ทรัพยากรมากและช้า ซึ่งเป็นสาเหตุที่คุณควรลองใช้เทคนิคที่ใช้ในเบราว์เซอร์อยู่แล้ว
3. ปล่อยให้ผู้เชี่ยวชาญ (CSS, สำรวจ DOM เร็วขึ้น)
การเขียนสคริปต์ DOM และการใช้วิธีการหรือคุณสมบัติ (getElementsByTagName, nextSibling, PreviousSibling, parentNode และอื่นๆ) เพื่อสำรวจ DOM ดูเหมือนจะสร้างความสับสนให้กับผู้คนจำนวนมาก . น่าสนใจ. สิ่งที่น่าสนใจคือเราได้ทำสิ่งเหล่านี้ผ่านเทคโนโลยี CSS อื่นแล้ว
CSS เป็นเทคนิคที่ใช้ตัวเลือก CSS เพื่อเข้าถึงองค์ประกอบเป้าหมายและเปลี่ยนคุณสมบัติการมองเห็นโดยข้าม DOM ส่วนที่ซับซ้อนของ JavaScript ที่ใช้ DOM สามารถถูกแทนที่ด้วยตัวเลือก CSS:
var n = document.getElementById('nav');
ถ้า(n){
var as = n.getElementsByTagName('a');
ถ้า (ตามความยาว > 0){
สำหรับ(var i=0;as[i];i++){
เป็น[i].style.color = '#369′;
as[i].style.textDecoration = 'ไม่มี';
-
-
-
/* โค้ดต่อไปนี้มีฟังก์ชันเหมือนกับโค้ดด้านบน*/
#nav a{
สี:#369;
การตกแต่งข้อความ: ไม่มี;
-
นี่เป็นเทคนิคที่ทรงพลังมากที่สามารถนำไปใช้ให้เกิดประโยชน์ได้ คุณสามารถทำได้โดยการเพิ่มคลาสแบบไดนามิกให้กับองค์ประกอบระดับสูงใน DOM หรือเปลี่ยนรหัสองค์ประกอบ หากคุณใช้ DOM เพื่อเพิ่มคลาส CSS ให้กับเนื้อหาของเอกสาร ผู้ออกแบบจะสามารถกำหนดเวอร์ชันคงที่และไดนามิกของเอกสารได้อย่างง่ายดาย
จาวาสคริปต์:
var dynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + 'js' : 'js';
ซีเอสเอส:
/* เวอร์ชันคงที่*/
#nav {
-
-
/* เวอร์ชันไดนามิก*/
body.js #nav {
-
-
4. ทำความเข้าใจเบราว์เซอร์และผู้ใช้ (และสร้างสิ่งที่คุณต้องการตามรูปแบบการใช้งานที่มีอยู่)
JavaScript ส่วนใหญ่ที่ไม่สร้างความรำคาญคือการทำความเข้าใจวิธีการทำงานของเบราว์เซอร์ (โดยเฉพาะวิธีที่เบราว์เซอร์หยุดทำงาน) และสิ่งที่ผู้ใช้คาดหวัง คุณสามารถสร้างอินเทอร์เฟซที่แตกต่างอย่างสิ้นเชิงโดยใช้ JavaScript โดยไม่คำนึงถึงเบราว์เซอร์ อินเทอร์เฟซแบบลากและวาง พื้นที่พับ แถบเลื่อน และแถบเลื่อนทั้งหมดสามารถสร้างขึ้นได้โดยใช้ JavaScript แต่ปัญหานี้ไม่ใช่ปัญหาทางเทคนิคง่ายๆ คุณต้องคิดถึงคำถามต่อไปนี้:
อินเทอร์เฟซใหม่นี้สามารถเป็นอิสระจากอุปกรณ์อินพุตได้หรือไม่ ถ้าไม่เช่นนั้นคุณจะพึ่งพาอะไรได้บ้าง?
อินเทอร์เฟซใหม่ที่ฉันสร้างเป็นไปตามหลักเกณฑ์ของเบราว์เซอร์หรืออินเทอร์เฟซแบบสมบูรณ์อื่นๆ หรือไม่ (คุณสามารถสลับระหว่างเมนูหลายระดับด้วยเมาส์โดยตรงได้หรือไม่ หรือคุณจำเป็นต้องใช้ปุ่มแท็บหรือไม่)
ฉันต้องมีฟังก์ชันการทำงานใดบ้างที่ต้องอาศัย JavaScript
คำถามสุดท้ายไม่ใช่ปัญหาจริงๆ เพราะคุณสามารถใช้ DOM เพื่อสร้าง HTML โดยไม่ยุ่งยากได้หากจำเป็น ตัวอย่างนี้คือลิงก์ "พิมพ์" เนื่องจากเบราว์เซอร์ไม่มีฟังก์ชันที่ไม่ใช่ JavaScript ในการพิมพ์เอกสาร คุณจึงจำเป็นต้องใช้ DOM เพื่อสร้างลิงก์ดังกล่าว เช่นเดียวกับแถบหัวเรื่องที่คลิกได้ซึ่งใช้การขยายและยุบโมดูลเนื้อหา แป้นพิมพ์ไม่สามารถเปิดใช้งานแถบหัวเรื่องได้ แต่ลิงก์สามารถทำได้ ดังนั้นในการสร้างแถบหัวเรื่องที่คลิกได้ คุณจะต้องเพิ่มลิงก์โดยใช้ JavaScript จากนั้นผู้ใช้ทั้งหมดที่มีแป้นพิมพ์จะสามารถยุบและขยายโมดูลเนื้อหาได้
แหล่งข้อมูลที่ดีเยี่ยมสำหรับการแก้ปัญหาประเภทนี้คือ Design Pattern Library สำหรับการรู้ว่าสิ่งใดในเบราว์เซอร์ที่ไม่ขึ้นอยู่กับอุปกรณ์อินพุตนั้นขึ้นอยู่กับการสั่งสมประสบการณ์ สิ่งแรกที่คุณต้องเข้าใจคือกลไกการจัดการเหตุการณ์
5. ทำความเข้าใจเหตุการณ์ (การจัดการเหตุการณ์ทำให้เกิดการเปลี่ยนแปลง)
การจัดการเหตุการณ์เป็นขั้นตอนที่สองสู่ JavaScript ที่ไม่สร้างความรำคาญ ประเด็นไม่ได้อยู่ที่การทำให้ทุกสิ่งสามารถลาก คลิกได้ หรือเพิ่มการจัดการแบบอินไลน์ แต่เพื่อให้เข้าใจว่าการจัดการเหตุการณ์เป็นสิ่งที่สามารถแยกออกจากกันโดยสิ้นเชิง เราได้แยก HTML, CSS และ JavaScript ออกจากกัน แต่เราไม่ได้ไปไกลมากนักในการแยกการจัดการเหตุการณ์
ตัวจัดการเหตุการณ์จะติดตามการเปลี่ยนแปลงที่เกิดขึ้นกับองค์ประกอบในเอกสาร หากมีเหตุการณ์เกิดขึ้น ตัวจัดการจะค้นหาวัตถุที่ยอดเยี่ยม (โดยปกติจะเป็นพารามิเตอร์ชื่อ e) วัตถุนี้จะบอกองค์ประกอบว่าเกิดอะไรขึ้นและสิ่งที่สามารถทำได้กับมัน .
สิ่งที่น่าสนใจจริงๆ เกี่ยวกับการจัดการเหตุการณ์ส่วนใหญ่ก็คือ มันไม่ได้เกิดขึ้นเฉพาะกับองค์ประกอบที่คุณต้องการเข้าถึง แต่กับองค์ประกอบทั้งหมดที่สูงกว่าใน DOM (แต่ไม่ใช่ทุกเหตุการณ์จะเป็นเช่นนี้ โฟกัสและข้อยกเว้นคือเหตุการณ์เบลอ) . ตัวอย่างเช่น คุณสามารถใช้คุณลักษณะนี้เพื่อเพิ่มตัวจัดการเหตุการณ์เพียงตัวเดียวในรายการการนำทาง และใช้วิธีตัวจัดการเหตุการณ์เพื่อรับองค์ประกอบที่ทริกเกอร์เหตุการณ์จริง เทคนิคนี้เรียกว่าการมอบหมายเหตุการณ์ และมีข้อดีหลายประการ:
คุณเพียงแค่ต้องตรวจสอบว่ามีองค์ประกอบอยู่หรือไม่ แทนที่จะตรวจสอบแต่ละองค์ประกอบ คุณสามารถเพิ่มหรือลบโหนดย่อยแบบไดนามิกโดยไม่ต้องลบตัวจัดการเหตุการณ์ที่เกี่ยวข้องออก เมื่อตอบสนองต่อเหตุการณ์เดียวกันในองค์ประกอบที่แตกต่างกัน คุณสามารถหยุดเหตุการณ์ไม่ให้เผยแพร่ไปยังองค์ประกอบหลักได้ และคุณสามารถแทนที่พฤติกรรมเริ่มต้นขององค์ประกอบ HTML (เช่น ลิงก์) ได้ อย่างไรก็ตาม บางครั้งนี่ก็ไม่ใช่ความคิดที่ดี เนื่องจากเบราว์เซอร์ทำให้องค์ประกอบ HTML มีพฤติกรรมที่พวกเขาทำด้วยเหตุผลบางอย่าง ตัวอย่างเช่น ลิงก์อาจชี้ไปยังเป้าหมายภายในเพจ และการปล่อยให้ไม่มีการแก้ไขจะทำให้ผู้ใช้สามารถบุ๊กมาร์กสถานะสคริปต์ปัจจุบันของเพจได้
6. คิดถึงคนอื่นๆ (เนมสเปซ ขอบเขต และสคีมา)
โค้ดของคุณแทบจะไม่มีวันเป็นโค้ดสคริปต์เพียงตัวเดียวในเอกสารเลย ดังนั้นจึงเป็นสิ่งสำคัญอย่างยิ่งที่จะต้องแน่ใจว่าไม่มีฟังก์ชันโกลบอลหรือตัวแปรโกลบอลในโค้ดของคุณที่สคริปต์อื่นสามารถแทนที่ได้ มีหลายรูปแบบเพื่อหลีกเลี่ยงปัญหานี้ รูปแบบพื้นฐานที่สุดคือการใช้คีย์เวิร์ด var เพื่อเริ่มต้นตัวแปรทั้งหมด สมมติว่าเราเขียนสคริปต์ต่อไปนี้:
var nav = document.getElementById('nav');
ฟังก์ชั่น init(){
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นแสดง(){
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นรีเซ็ต () {
//ทำสิ่งต่างๆ
-
โค้ดด้านบนประกอบด้วยตัวแปรส่วนกลางที่เรียกว่า nav และฟังก์ชันสามฟังก์ชันชื่อ init แสดง และรีเซ็ต ฟังก์ชันเหล่านี้สามารถเข้าถึงตัวแปร nav และสามารถเข้าถึงได้ผ่านชื่อฟังก์ชัน:
var nav = document.getElementById('nav');
ฟังก์ชั่น init(){
แสดง();
ถ้า (nav.className === 'แสดง'){
รีเซ็ต();
-
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นแสดง(){
var c = nav.className;
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นรีเซ็ต () {
//ทำสิ่งต่างๆ
-
คุณสามารถหลีกเลี่ยงการเข้ารหัสสากลข้างต้นได้โดยการห่อหุ้มโค้ดลงในออบเจ็กต์ เพื่อให้สามารถเปลี่ยนฟังก์ชันเป็นวิธีการในออบเจ็กต์ได้ และตัวแปรโกลบอลสามารถเปลี่ยนเป็นคุณสมบัติในออบเจ็กต์ได้ คุณต้องใช้เมธอด "name + โคลอน" เพื่อกำหนดเมธอดและคุณสมบัติ และคุณต้องเพิ่มเครื่องหมายจุลภาคเป็นตัวคั่นหลังแต่ละคุณสมบัติหรือเมธอด
var myScript = {
nav:document.getElementById('nav'),
เริ่มต้น: ฟังก์ชั่น () {
//ทำสิ่งต่างๆ
-
แสดง: ฟังก์ชั่น () {
//ทำสิ่งต่างๆ
-
รีเซ็ต: ฟังก์ชั่น () {
//ทำสิ่งต่างๆ
-
-
วิธีการและคุณสมบัติทั้งหมดสามารถเข้าถึงได้ทั้งภายนอกและภายในโดยใช้ "ชื่อคลาส + ตัวดำเนินการจุด"
var myScript = {
nav:document.getElementById('nav'),
เริ่มต้น: ฟังก์ชั่น () {
myScript.show();
ถ้า (myScript.nav.className === 'แสดง'){
myScript.รีเซ็ต();
-
//ทำสิ่งต่างๆ
-
แสดง: ฟังก์ชั่น () {
var c = myScript.nav.className;
//ทำสิ่งต่างๆ
-
รีเซ็ต: ฟังก์ชั่น () {
//ทำสิ่งต่างๆ
-
-
ข้อเสียของโมเดลนี้คือทุกครั้งที่คุณเข้าถึงวิธีการหรือคุณสมบัติอื่นจากวิธีการหนึ่ง คุณต้องเพิ่มชื่อของอ็อบเจ็กต์ไว้ข้างหน้า และทุกสิ่งในออบเจ็กต์สามารถเข้าถึงได้จากภายนอก หากคุณต้องการให้โค้ดบางส่วนสามารถเข้าถึงได้โดยสคริปต์อื่นในเอกสาร ให้พิจารณารูปแบบโมดูลต่อไปนี้:
var myScript = ฟังก์ชั่น(){
//เหล่านี้เป็นวิธีการและคุณสมบัติส่วนตัว
var nav = document.getElementById('nav');
ฟังก์ชั่น init(){
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นแสดง(){
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นรีเซ็ต () {
//ทำสิ่งต่างๆ
-
//วิธีการและคุณสมบัติสาธารณะถูกรวมไว้ในคำสั่ง return โดยใช้ไวยากรณ์ของวัตถุ
กลับ {
สาธารณะ:ฟังก์ชั่น(){
},
ฟู:'บาร์'
-
-
คุณสามารถเข้าถึงคุณสมบัติสาธารณะและวิธีการส่งคืนได้ในลักษณะเดียวกับโค้ดก่อนหน้า ในกรณีนี้: myScript.public() และ myScript.foo แต่มีจุดที่น่าอึดอัดอีกประการหนึ่งที่นี่: เมื่อคุณต้องการเข้าถึงวิธีสาธารณะจากภายนอกหรือจากวิธีส่วนตัวภายใน คุณยังคงต้องเขียนชื่อที่ยาว (ชื่อของวัตถุอาจยาวมากได้) เพื่อหลีกเลี่ยงปัญหานี้ คุณจะต้องกำหนดให้เป็นส่วนตัวและส่งคืนเฉพาะนามแฝงในคำสั่ง return เท่านั้น:
var myScript = ฟังก์ชั่น(){
// นี่เป็นวิธีการและคุณสมบัติส่วนตัว
var nav = document.getElementById('nav');
ฟังก์ชั่น init(){
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นแสดง(){
//ทำสิ่งต่างๆ
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นรีเซ็ต () {
//ทำสิ่งต่างๆ
-
var foo = 'บาร์';
function public(){
}
//ส่งคืนเฉพาะพอยน์เตอร์ไปยังเมธอดส่วนตัวและคุณสมบัติที่คุณต้องการเข้าถึง
กลับ {
สาธารณะ:สาธารณะ,
ฟู:ฟู
-
-
สิ่งนี้ทำให้มั่นใจได้ถึงรูปแบบโค้ดที่สอดคล้องกันและช่วยให้คุณใช้นามแฝงที่สั้นกว่าเพื่อเข้าถึงวิธีการหรือคุณสมบัติ
หากคุณไม่ต้องการเปิดเผยวิธีการหรือคุณสมบัติใดๆ สู่โลกภายนอก คุณสามารถสรุปโค้ดทั้งหมดให้เป็นวิธีการที่ไม่ระบุชื่อ และดำเนินการทันทีหลังจากคำจำกัดความ:
(function(){
// ทั้งหมดนี้เป็นวิธีการและคุณสมบัติส่วนตัว
var nav = document.getElementById('nav');
ฟังก์ชั่น init(){
//ทำสิ่งต่างๆ
show(); // ไม่จำเป็นต้องมีคำนำหน้าชื่อคลาส
-
ฟังก์ชั่นแสดง(){
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นรีเซ็ต () {
//ทำสิ่งต่างๆ
-
-
รูปแบบนี้เหมาะสำหรับโมดูลโค้ดที่ดำเนินการเพียงครั้งเดียวและไม่ต้องพึ่งพาฟังก์ชันอื่นๆ
เมื่อปฏิบัติตามกฎข้างต้น โค้ดของคุณจะทำงานได้ดีขึ้นสำหรับผู้ใช้ และโค้ดของคุณจะทำงานได้ดีขึ้นบนเครื่องและเข้ากันได้ดีกับโค้ดของนักพัฒนารายอื่น อย่างไรก็ตาม มีกลุ่มหนึ่งที่ต้องคำนึงถึง
7. พิจารณา Developer ที่จะเข้ามาดูแล Code ของคุณ (ทำให้การบำรุงรักษาง่ายขึ้น)
ขั้นตอนสุดท้ายในการทำให้สคริปต์ของคุณไม่เกะกะคือการตรวจสอบอีกครั้งหลังจากที่คุณเขียนมัน และดูแล Developer ที่จะเข้ามาดูแล Code ของคุณทันที สคริปต์ถ่ายทอดสด ลองพิจารณาคำถามต่อไปนี้:
ชื่อตัวแปรและฟังก์ชันทั้งหมดสมเหตุสมผลและเข้าใจง่ายหรือไม่?
มีการจัดระเบียบโค้ดอย่างเหมาะสมหรือไม่? มันไหลลื่นตั้งแต่ต้นจนจบหรือไม่?
การพึ่งพาทั้งหมดชัดเจนหรือไม่?
มีการเพิ่มความคิดเห็นหากเป็นไปได้ซึ่งอาจทำให้เกิดความสับสนหรือไม่?
สิ่งสำคัญที่สุดที่ควรทราบคือ: โปรดทราบว่าโค้ด HTML และ CSS ในเอกสารมีแนวโน้มที่จะเปลี่ยนแปลงมากกว่า JavaScript (เนื่องจากมีหน้าที่รับผิดชอบต่อเอฟเฟกต์ภาพ) ดังนั้นอย่ารวมคลาสและ ID ใด ๆ ที่ผู้ใช้ปลายทางมองเห็นได้ในโค้ดสคริปต์ แต่แยกคลาสและ ID ออกเป็นออบเจ็กต์ที่เก็บข้อมูลการกำหนดค่า
myscript = ฟังก์ชั่น () {
การกำหนดค่า var = {
ID การนำทาง: 'nav',
มองเห็นได้คลาส: 'แสดง'
-
var nav = document.getElementById(config.navigationID);
ฟังก์ชั่น init(){
แสดง();
ถ้า (nav.className === config.visibleClass){
รีเซ็ต();
-
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นแสดง(){
var c = nav.className;
//ทำสิ่งต่างๆ
-
ฟังก์ชั่นรีเซ็ต () {
//ทำสิ่งต่างๆ
-
-
วิธีนี้ทำให้ผู้ดูแลรู้ว่าจะแก้ไขคุณสมบัติเหล่านี้ได้ที่ไหนโดยไม่ต้องเปลี่ยนโค้ดอื่น
ข้อมูลเพิ่มเติม
นี่คือแนวทางเจ็ดประการที่ฉันค้นพบ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับหัวข้อที่กล่าวถึงข้างต้น โปรดดูลิงก์ต่อไปนี้: