1. ความคล่องแคล่วของอินเทอร์เฟซ
อินเทอร์เฟซที่ดีนั้นราบรื่นและเข้าใจง่ายและส่วนใหญ่สะท้อนถึงแง่มุมดังต่อไปนี้:
1. เรียบง่าย
ในการใช้งานแอตทริบิวต์ CSS ขององค์ประกอบบางอย่างต่อไปนี้เป็นวิธีการดั้งเดิม:
Document.QuerySelectorall ('#id'). style.color = 'red';หลังบรรจุภัณฑ์
ฟังก์ชั่น A (ตัวเลือก, สี) {document.QuerySelectorAll (ตัวเลือก) []. style.color = color} a ('#a', 'สีแดง');จากสายยาวที่มีตัวอักษรหลายสิบตัวไปจนถึงการเรียกใช้ฟังก์ชั่นง่าย ๆ API นั้นง่ายและใช้งานง่าย
2. ความสามารถในการอ่าน
A ('#A', 'Red') เป็นฟังก์ชั่นที่ดีที่ช่วยให้เราเปลี่ยนองค์ประกอบอย่างง่ายและในทางปฏิบัติ แต่ปัญหาคือถ้าคุณใช้การเปลี่ยนแปลงฟังก์ชั่นเป็นครั้งแรกมันจะสับสนมากขึ้น ไม่มีใครจะบอกเขาว่าฟังก์ชั่น A คืออะไร มีความจำเป็นที่จะต้องรู้สิ่งหนึ่งเกี่ยวกับการพัฒนาอินเทอร์เฟซ: ผู้คนขี้เกียจ จากมุมมองของฟังก์ชั่นการกำหนดสีแม้ว่าจะเขียนโค้ดน้อยลง แต่ก็เพิ่มต้นทุนหน่วยความจำ ทุกครั้งที่คุณทำสิ่งนี้คุณจะต้องมีความสัมพันธ์ในการทำแผนที่ A ----> สี ถ้ามันเป็นเรื่องง่าย ๆ ไม่กี่อย่างมันไม่สำคัญ แต่โดยปกติแล้วชุดเฟรมเวิร์กมี API หลายสิบหรือหลายร้อย APIs และค่าใช้จ่ายในการทำแผนที่ที่เพิ่มขึ้นจะทำให้โปรแกรมเมอร์ยุบ สิ่งที่เราต้องการคือทำให้อินเทอร์เฟซมีความหมาย มาเขียนฟังก์ชั่นใหม่กันเถอะ:
ฟังก์ชั่น LetSomeElementChangeColor (ตัวเลือก, สี) {document.QuerySelectorAll (ตัวเลือก, สี);}LetsomeElementChangeColor ได้รับความหมายทางภาษาที่สัมพันธ์กับ A และทุกคนจะรู้ความหมายของมัน
3. ลดต้นทุนหน่วยความจำ
ฟังก์ชั่นที่เราเพิ่งจะเป็นเช่นนี้เช่นกัน มันยาวเกินไป แม้ว่า LetsomeElementChangeColor จะลดต้นทุนการทำแผนที่ แต่ก็เพิ่มต้นทุนหน่วยความจำ คุณควรรู้ว่าไม่มีใครรวมถึงอาจารย์ด้านวิชาการชอบที่จะพูดด้วยวาจา APIs ที่ได้รับ DOM นั้นมีเอกสารปัญหานี้ getElementsByClassName; document.getElementsByName; Document.querySelectorall; API เหล่านี้ให้ความรู้สึกว่าคำพูดนั้นยาวเกินไป แม้ว่าความหมายที่พวกเขาให้นั้นชัดเจนมาก แต่วิธีการนี้ขึ้นอยู่กับการเสียสละความเรียบง่าย ดังนั้นเราจึงเขียนฟังก์ชั่นก่อนหน้านี้อีกครั้ง
ฟังก์ชั่น setColor (ตัวเลือก, สี) {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxลดชื่อฟังก์ชั่นโดยไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ ทำให้ง่ายต่อการอ่านจดจำและใช้งาน
4. ขยาย
ส่วนขยายที่เรียกว่าหมายความว่าการใช้ฟังก์ชั่นจะดำเนินการตามลำดับการเขียนเช่นน้ำไหลเพื่อสร้างห่วงโซ่การดำเนินการ:
document.getElementById ('id'). style.color = 'red'; document.getElementById ('id'). style.fontsize = 'px'; document.getElementById ('id'). style.backGourdColor = 'Pink';วิธีก่อนหน้านี้ที่เราใช้คือการห่อหุ้มทั้งสองฟังก์ชั่น setFontSize, FetBackgroundColor อีกครั้ง; จากนั้นเรียกใช้งาน setcolor ('id', 'สีแดง'); SetFontsiez ('id', '12px'); SetbackgroundColor ('id', 'Pink'); เห็นได้ชัดว่าวิธีการนี้ไม่ขี้เกียจที่จะไปไกลกว่าดินแดน; องค์ประกอบ ID จะต้องได้รับการจัดหาใหม่ทุกครั้งส่งผลกระทบต่อประสิทธิภาพและความล้มเหลว ทุกครั้งที่จำเป็นต้องเพิ่มวิธีการใหม่ความล้มเหลววิธีการเหล่านี้ยังคงเรียกว่าทุกครั้งหรือล้มเหลว ด้านล่างเราเขียนมันลงในฟังก์ชั่นเพิ่มเติม ขั้นแรกให้ห่อหุ้มวิธีการที่ได้รับ ID ลงในวัตถุจากนั้นส่งคืนวัตถุนี้ในแต่ละวิธีของวัตถุ:
ฟังก์ชั่น GetElement (ตัวเลือก) {this.style = document.QuerySeleCotrall (ตัวเลือก) .style;} getElement.prototype.color = ฟังก์ชั่น (สี) {this.style.color = color; return;} getElement.prototype.background this;} getElement.prototype.fontsize = function (ขนาด) {this.style.fontsize = size; return this;} // เรียก var el = new getElement ('#id') El.Color ('สีแดง') พื้นหลัง ('สีชมพู')เรียบง่ายเรียบเนียนและอ่านง่ายในภายหลังเราจะพูดคุยเกี่ยวกับวิธีการปรับให้เหมาะสมในพารามิเตอร์ต่อไป ดังนั้นทุกคนชอบที่จะใช้ jQuery API แม้ว่าสัญลักษณ์ $ ไม่ได้แสดงถึงความสำคัญในทางปฏิบัติใด ๆ แต่สัญลักษณ์ง่าย ๆ นั้นเป็นประโยชน์ต่อการใช้งานของเรา มันรวบรวมหลักการข้างต้น: ง่าย, อ่านง่าย, ง่ายต่อการจดจำ, การเขียนโซ่และการประมวลผลหลายพารามิเตอร์
Nightware:
document.getElementById ('id'). style.color = 'red'; document.getElementById ('id'). style.fontsize = 'px'; document.getElementById ('id'). style.backGourdColor = 'Pink';ฝัน:
$ ('id'). css ({color: 'red', fontsize: '12px', backgroundColor: 'Pink'})2. ความสอดคล้อง
1. ความสอดคล้องของอินเทอร์เฟซ
อินเทอร์เฟซที่เกี่ยวข้องรักษาสไตล์ที่สอดคล้องกัน ชุด API ที่สมบูรณ์จะลดความสามารถในการปรับตัวของนักพัฒนาซอฟต์แวร์ให้เข้ากับเครื่องมือใหม่ได้อย่างมากหากสื่อความรู้สึกคุ้นเคยและสะดวกสบาย การตั้งชื่อสิ่งนี้: ทั้งสั้นและอธิบายตนเองและที่สำคัญที่สุดคือรักษาความสอดคล้อง "มีเพียงสองอาการปวดหัวในชุมชนวิทยาศาสตร์คอมพิวเตอร์: ความล้มเหลวของแคชและปัญหาการตั้งชื่อ" - Phil Karlton เลือกคำที่คุณชอบและใช้อย่างต่อเนื่อง เลือกสไตล์แล้วเก็บไว้
Nightware:
SetColor
ดินแดน
ChangeFontSize
Makedisplay
ฝัน:
SetColor;
Fetbackground;
setFontSize
ชุด.........
พยายามรักษาสไตล์รหัสและรูปแบบการตั้งชื่อเพื่อให้ผู้คนสามารถอ่านรหัสของคุณราวกับว่าพวกเขากำลังอ่านบทความที่เขียนโดยบุคคลเดียวกัน
3. การประมวลผลพารามิเตอร์
1. ประเภทของพารามิเตอร์
กำหนดประเภทของพารามิเตอร์เพื่อให้การรับประกันที่มั่นคงสำหรับโปรแกรมของคุณ
// เรากำหนดว่าสียอมรับฟังก์ชั่นประเภทสตริง setColor (สี) {ถ้า (typeof color! == 'String') return; dosomething}2. ใช้ JSON เพื่อผ่านพารามิเตอร์
มีประโยชน์มากมายในการส่งผ่านค่าใน JSON สามารถตั้งชื่อพารามิเตอร์ละเว้นตำแหน่งเฉพาะของพารามิเตอร์ให้ค่าเริ่มต้น ฯลฯ ตัวอย่างเช่นสถานการณ์ที่ไม่ดีต่อไปนี้:
ฟังก์ชั่น FN (param1, param2 ............ paramn)
คุณต้องผ่านแต่ละพารามิเตอร์ตามลำดับไม่เช่นนั้นวิธีการของคุณจะถูกดำเนินการในวิธีที่แตกต่างจากที่คุณคาดไว้ วิธีที่ถูกต้องมีดังต่อไปนี้
ฟังก์ชั่น FN (JSON) {// ตั้งค่าเริ่มต้นสำหรับพารามิเตอร์ที่ต้องการ var default = Extend ({param: 'default', param: 'default' ...... }, json)}รหัสฟังก์ชั่นนี้คาดว่าจะทำงานแม้ว่าคุณจะไม่ผ่านพารามิเตอร์ใด ๆ ก็ตาม เพราะเมื่อประกาศคุณจะตัดสินใจค่าเริ่มต้นของพารามิเตอร์ตามธุรกิจเฉพาะ
4. ความสามารถในการปรับขนาด
หนึ่งในหลักการที่สำคัญที่สุดของการออกแบบซอฟต์แวร์: อย่าแก้ไขอินเทอร์เฟซมันหมายถึงการขยาย! ความสามารถในการปรับขนาดยังต้องการความรับผิดชอบเพียงครั้งเดียวสำหรับอินเทอร์เฟซและอินเทอร์เฟซความรับผิดชอบหลายอย่างนั้นยากที่จะขยาย ใช้เกาลัด:
// ตัวอักษรและพื้นหลังขององค์ประกอบจะต้องมีการเปลี่ยนแปลงในเวลาเดียวกัน // nightware: ชุดฟังก์ชัน (ตัวเลือก, สี) {document.querysechlectroall (ตัวเลือก) .style.color = color; document.queryselectroall (ตัวเลือก) หากคุณต้องการเปลี่ยนขนาดตัวอักษรอีกครั้งคุณสามารถปรับเปลี่ยนฟังก์ชั่นนี้และกรอกรหัสเพื่อเปลี่ยนขนาดตัวอักษรหลังจากฟังก์ชั่น // dreamfunction set (ตัวเลือก, สี) {var el = document.queryselectroall (ตัวเลือก); el.style.color = สี; px) {var el = set (ตัวเลือก, สี) el.style.fontsize = px; return el;}ข้างต้นเป็นเพียงการเพิ่มสีที่เรียบง่าย ธุรกิจมีความซับซ้อนและรหัสไม่ใช่เมื่อคุณเขียน คุณต้องอ่านรหัสก่อนหน้าและแก้ไข เห็นได้ชัดว่ามันไม่สอดคล้องกับหลักการเปิดปิด ฟังก์ชั่นที่แก้ไขจะส่งคืนวัตถุองค์ประกอบเพื่อให้ในครั้งต่อไปที่คุณต้องเปลี่ยนคุณจะได้รับค่าคืนกลับอีกครั้งสำหรับการประมวลผล
2. การใช้งานนี้
ความสามารถในการปรับขนาดยังรวมถึงการใช้วิธีนี้อย่างยืดหยุ่นโทรและใช้วิธีการ:
ฟังก์ชั่น saybonjour () {แจ้งเตือน (this.a)} obj.a =; obj.say = saybonjour; obj.say (); /// orsaybonjour.call || ใช้ (obj); //5. การจัดการข้อผิดพลาด
1. ข้อผิดพลาดที่คาดการณ์ไว้
คุณสามารถใช้ typeof หรือลอง ... จับเพื่อตรวจจับ typeof บังคับให้วัตถุตรวจจับไม่โยนข้อผิดพลาดและมีประโยชน์อย่างยิ่งสำหรับตัวแปรที่ไม่ได้กำหนด
2. โยนข้อผิดพลาด
นักพัฒนาส่วนใหญ่ไม่ต้องการทำผิดพลาดและจำเป็นต้องค้นหารหัสที่เกี่ยวข้องด้วยตนเอง วิธีที่ดีที่สุดคือการส่งออกโดยตรงในคอนโซลเพื่อบอกผู้ใช้ว่าเกิดอะไรขึ้น เราสามารถใช้ API เอาต์พุตของเบราว์เซอร์: console.log/warn/error นอกจากนี้คุณยังสามารถออกจากโปรแกรมของคุณ: ลอง ... จับได้
ข้อผิดพลาดของฟังก์ชั่น (a) {ถ้า (typeof a! == 'string') {console.error ('param a ต้องเป็นประเภทของสตริง')}} ข้อผิดพลาดของฟังก์ชัน () {ลอง {// รหัส excucete ที่นี่6. การมองการณ์ไกล
อินเทอร์เฟซโปรแกรมกลิ่นที่คาดการณ์ได้ให้ความแข็งแกร่งและเพื่อให้แน่ใจว่าการดำเนินการรหัสของคุณราบรื่นจะต้องคำนึงถึงความคาดหวังที่ผิดปกติ มาดูความแตกต่างระหว่างรหัสที่ไม่คาดฝันและรหัสที่คาดการณ์ได้โดยใช้ SetColor ก่อนหน้า
// nighwarefunction set (ตัวเลือก, สี) {document.getElementById (ตัวเลือก) .style.color = color;} // dreamzepto.init = ฟังก์ชั่น (ตัวเลือก, บริบท) {var dom // ถ้าไม่มีอะไรให้กลับ zepto collection selector.trim () // ถ้าเป็นชิ้นส่วน html ให้สร้างโหนดจากมัน // หมายเหตุ: ทั้งใน Chrome และ Firefox, Dom Error // ถูกโยนทิ้งหากชิ้นส่วนไม่เริ่มต้นด้วย <ถ้า (selector [] == '<' && fragmentre.test (selector)) dom = zepto.fragment บริบทก่อนและเลือก // โหนดจากนั้นถ้า (บริบท! == ไม่ได้กำหนด) ส่งคืน $ (บริบท) .find (ตัวเลือก) // ถ้าเป็นตัวเลือก CSS ให้ใช้เพื่อเลือกโหนด. else dom = zepto.qsa คอลเลกชัน Zepto ได้รับเพียงส่งคืน iTelse ถ้า (zepto.isz (ตัวเลือก)) ส่งคืน selectorelse {// อาร์เรย์ปกติถ้าอาร์เรย์ของโหนดได้รับ (isarray (selector)) dom = กะทัดรัด (ตัวเลือก) // wrap dom nodes (fragmentre.test (ตัวเลือก)) dom = zepto.fragment (selector.trim (), regexp. $, บริบท), ตัวเลือก = null // ถ้ามีบริบทให้สร้างคอลเลกชันในบริบทนั้นก่อน nodes.else dom = zepto.qsa (เอกสาร, ตัวเลือก)} // สร้างคอลเลกชัน Zepto ใหม่จากโหนด FoundReturn zepto.z (dom, selector)}ด้านบนเป็นซอร์สโค้ดของ Zepto คุณจะเห็นว่าผู้เขียนได้ทำการประมวลผลจำนวนมากเมื่อคาดการณ์พารามิเตอร์ที่เข้ามา ในความเป็นจริงการคาดการณ์ให้ทางเข้าหลายรายการสำหรับโปรแกรมไม่มีอะไรมากไปกว่าการตัดสินเชิงตรรกะ Zepto ใช้การตัดสินที่ถูกและผิดจำนวนมากที่นี่ซึ่งนำไปสู่ความยาวของรหัสและไม่เหมาะสำหรับการอ่าน ในระยะสั้นความสามารถในการคาดการณ์ต้องการให้คุณเขียนพารามิเตอร์เพิ่มเติมสำหรับวัตถุทางกายภาพในตำแหน่ง เปลี่ยนการตรวจจับภายนอกเป็นการตรวจจับภายใน ใช่คนที่ใช้มันสะดวกสบายและมีความสุขที่ได้ใช้งาน ตอนนี้! สิ่งที่สำคัญที่สุดในชีวิตคือ Heisen
7. ความคิดเห็นและเอกสารการอ่าน
อินเทอร์เฟซที่ดีที่สุดคือเราจะใช้มันโดยไม่มีเอกสาร แต่บ่อยครั้งเมื่อจำนวนอินเทอร์เฟซมีมากขึ้นและธุรกิจเพิ่มขึ้นมันจะใช้งานยากเล็กน้อย ดังนั้นเอกสารและความคิดเห็นของอินเทอร์เฟซจะต้องมีการเขียนอย่างรอบคอบ ความคิดเห็นเป็นไปตามหลักการของความเรียบง่ายและกระชับและสำหรับผู้ที่มาหลายปีต่อมาเพื่อแสดงให้พวกเขาเห็น:
// อินเทอร์เฟซคำอธิบายประกอบเพื่อแสดง PPT ใช้ฟังก์ชั่นความเห็น () {// ถ้าคุณกำหนดตัวแปรที่ไม่มีความหมายตามตัวอักษรมันเป็นการดีที่สุดที่จะเขียนความคิดเห็นสำหรับมัน: A: ตัวแปรที่ไร้ประโยชน์คุณสามารถลบ var a; // เขียนความคิดเห็นในคีย์และความคลุมเครือ return go.navigate ('hash', function () {data.clear ();});}ในที่สุด
ขอแนะนำให้ Markdown การเขียนเอกสาร API และ GitHub Royal Document Writing Syntax ง่ายและรวดเร็วรหัสถูกเน้นและคุณไม่ได้พูดอะไรมาก
ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของหลักการออกแบบ JavaScript API ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!