โหมด Xiangyuan นั้นแตกต่างจากโหมดการออกแบบทั่วไป ส่วนใหญ่จะใช้เพื่อเพิ่มประสิทธิภาพประสิทธิภาพของโปรแกรม เป็นการดีที่สุดที่จะแก้ปัญหาประสิทธิภาพที่เกิดจากวัตถุที่คล้ายกันจำนวนมาก รูปแบบสารานุกรมลดจำนวนวัตถุและปรับปรุงประสิทธิภาพของแอปพลิเคชันโดยการวิเคราะห์วัตถุของแอปพลิเคชันและแยกวิเคราะห์พวกเขาลงในข้อมูลที่แท้จริงและภายนอก
ความรู้พื้นฐาน
โหมดสารานุกรมลดจำนวนวัตถุโดยการแบ่งปันวัตถุที่มีเนื้อละเอียดจำนวนมากซึ่งจะช่วยลดหน่วยความจำของวัตถุและปรับปรุงประสิทธิภาพของแอปพลิเคชัน แนวคิดพื้นฐานคือการย่อยสลายองค์ประกอบของวัตถุที่คล้ายกันที่มีอยู่และขยายเป็นข้อมูลภายในที่ใช้ร่วมกันและข้อมูลภายนอกที่ไม่แชร์กัน เราเรียกวัตถุของข้อมูลภายในเป็นวัตถุเมตา โดยปกติจะต้องมีคลาสโรงงานเพื่อรักษาข้อมูลที่แท้จริง
ใน JS โหมดสารานุกรมส่วนใหญ่ประกอบด้วยอักขระต่อไปนี้:
(1) ไคลเอนต์: คลาสที่ใช้เรียกโรงงาน Xiangyuan เพื่อรับข้อมูลที่แท้จริงซึ่งมักจะเป็นวัตถุที่ต้องการโดยแอปพลิเคชัน
(2) โรงงาน Xiangyuan: ชั้นเรียนที่ใช้ในการรักษาข้อมูล Xiangyuan
(3) เพลิดเพลินกับคลาสหยวน: คลาสที่เก็บรักษาข้อมูลภายใน
การใช้งานและการประยุกต์ใช้โหมด Xiangyuan
การดำเนินการทั่วไป
มายกตัวอย่างเพื่ออธิบาย: iPhone ผลิตมวลแอปเปิ้ล ข้อมูลส่วนใหญ่เช่นแบบจำลองและหน้าจอเหมือนกันและข้อมูลบางส่วนเช่นหน่วยความจำแบ่งออกเป็น 16G, 32G ฯลฯ ก่อนที่จะใช้โหมดสารานุกรมเราเขียนรหัสดังนี้:
ฟังก์ชั่น iPhone (รุ่น, หน้าจอ, หน่วยความจำ, sn) {สิ่งนี้ โมเดล = โมเดล; this.screen = หน้าจอ; this.memory = หน่วยความจำ; this.sn = sn;} var phones = []; สำหรับ (var i = 0; i <1000000; i ++) {var memory = i % 2 == 0? 16: 32; phones.push (iPhone ใหม่ ("iPhone6s", 5.0, หน่วยความจำ, i));}ในรหัสนี้มีการสร้าง iPhone หนึ่งล้านเครื่องและ iPhone แต่ละตัวจะใช้กับหน่วยความจำหนึ่งตัวอย่างอิสระ แต่เมื่อเรามองอย่างใกล้ชิดเราจะเห็นว่า iPhone ส่วนใหญ่คล้ายกันยกเว้นว่าหน่วยความจำและหมายเลขซีเรียลนั้นแตกต่างกัน หากเป็นโปรแกรมที่มีความต้องการประสิทธิภาพสูงเราต้องพิจารณาเพิ่มประสิทธิภาพ
สำหรับโปรแกรมจำนวนมากที่มีวัตถุคล้ายกันเราสามารถพิจารณาใช้โหมด Xiangyuan เพื่อปรับให้เหมาะสม เราวิเคราะห์ว่า iPhone รุ่นหน้าจอและหน่วยความจำส่วนใหญ่เหมือนกันดังนั้นส่วนนี้ของข้อมูลสามารถใช้เพื่อวัตถุประสงค์สาธารณะซึ่งเป็นข้อมูลภายในในโหมด Xiangyuan คำจำกัดความของคลาส Xiangyuan มีดังนี้:
ฟังก์ชั่น iphoneflyweight (รุ่น, หน้าจอ, หน่วยความจำ) {this.model = model; this.screen = หน้าจอ; this.memory = หน่วยความจำ;}เรากำหนดความเพลิดเพลินคลาสของ iPhone ซึ่งมีสามข้อมูล: รุ่นหน้าจอและหน่วยความจำ นอกจากนี้เรายังต้องการโรงงาน Xiangyuan เพื่อรักษาข้อมูลนี้:
var flyweightFactory = (function () {var iPhones = {}; return {get: function (โมเดล, หน้าจอ, หน่วยความจำ) {var key = model + screen + หน่วยความจำถ้า (! iPhones [key]) {iPhones [key] = ใหม่ iPhoneflyweight (รุ่น, หน้าจอ, หน่วยความจำ);ในโรงงานนี้เรากำหนดพจนานุกรมเพื่อบันทึกวัตถุเสียสละจัดเตรียมวิธีการที่จะได้รับวัตถุเสียสละตามพารามิเตอร์และหากมีการเสียสละมันจะถูกส่งคืนโดยตรงและหากไม่มีการเสียสละมันจะถูกสร้างขึ้น
ต่อไปเราสร้างคลาสไคลเอนต์ซึ่งแก้ไขจากคลาส iPhone:
ฟังก์ชั่น iPhone (รุ่น, หน้าจอ, หน่วยความจำ, sn) {this.flyweight = flyweightfactory.get (รุ่น, หน้าจอ, หน่วยความจำ); this.sn = sn;}จากนั้นเรายังคงสร้าง iPhone หลายตัวเช่นกัน
var phones = []; สำหรับ (var i = 0; i <1000000; i ++) {var memory = i % 2 == 0? 16: 32; phones.push (iPhone ใหม่ ("iPhone6s", 5.0, หน่วยความจำ, i));} console.log (โทรศัพท์);กุญแจสำคัญนี่คือสิ่งนี้ flyweight = flyweightfactory.get (รุ่น, หน้าจอ, หน่วยความจำ) ในตัวสร้าง iPhone รหัสนี้ได้รับข้อมูล Xiangyuan ผ่านโรงงาน Xiangyuan ในโรงงาน Xiangyuan หากวัตถุที่มีข้อมูลเดียวกันมีอยู่แล้วมันจะส่งคืนวัตถุโดยตรง วัตถุ iPhone หลายชิ้นแบ่งปันส่วนนี้ของข้อมูลเดียวกันดังนั้นข้อมูลที่คล้ายกันดั้งเดิมจึงลดลงอย่างมากลดการใช้หน่วยความจำ
การประยุกต์ใช้ความเพลิดเพลินในโหมดหยวนใน DOM
แอปพลิเคชั่นทั่วไปของโหมด Xiangyuan คือการทำงานของ DOM และกลไกเหตุการณ์ DOM จะถูกแบ่งออกเป็นฟองเหตุการณ์และการจับเหตุการณ์ มาแนะนำสองอย่างนี้:
Event Bubble: เหตุการณ์ที่ถูกผูกไว้เริ่มต้นจากองค์ประกอบด้านในสุดจากนั้นฟองไปที่ชั้นนอกสุดสุด
การจับเหตุการณ์: เหตุการณ์ที่ถูกผูกไว้เริ่มต้นจากองค์ประกอบด้านนอกสุดจากนั้นส่งผ่านไปยังชั้นด้านในสุด
สมมติว่าเรามีรายการเมนูใน HTML
<ul> <li> ตัวเลือก 1 </li> <li> ตัวเลือก 2 </li> <li> ตัวเลือก 3 </li> <li> ตัวเลือก 4 </li> <li> ตัวเลือก 5 </li> <li> ตัวเลือก 6 </li></ul>
คลิกรายการเมนูเพื่อดำเนินการที่เกี่ยวข้อง เราผูกเหตุการณ์ผ่าน jQuery ซึ่งมักจะทำ:
$ (". item"). on ("คลิก", function () {console.log ($ (this) .text ());})ผูกกิจกรรมสำหรับแต่ละรายการและคลิกเพื่อส่งออกข้อความที่เกี่ยวข้อง ไม่มีปัญหาในเวลานี้ แต่ถ้าเป็นรายการที่ยาวมากโดยเฉพาะอย่างยิ่งถ้าเป็นโทรศัพท์มือถือที่มีรายการยาวเป็นพิเศษจะมีปัญหาด้านประสิทธิภาพเนื่องจากแต่ละรายการจะถูกผูกไว้กับเหตุการณ์และใช้หน่วยความจำ แต่ตัวจัดการเหตุการณ์เหล่านี้มีความคล้ายคลึงกันมากดังนั้นเราจึงต้องปรับให้เหมาะสม
$ (". menu"). on ("คลิก", ".item", function () {console.log ($ (this) .text ());})ด้วยวิธีนี้จำนวนตัวจัดการเหตุการณ์สามารถลดลงได้ วิธีนี้เรียกว่าการมอบหมายกิจกรรมซึ่งใช้หลักการของโมเดล Xiangyuan ตัวจัดการเหตุการณ์เป็นส่วนภายในทั่วไปและข้อความของแต่ละรายการเมนูเป็นส่วนภายนอก มาพูดคุยสั้น ๆ เกี่ยวกับหลักการของการมอบหมายงาน: คลิกที่รายการเมนูและเหตุการณ์จะฟองจากองค์ประกอบ LI ไปยังองค์ประกอบ UL เมื่อเราผูกเหตุการณ์กับ UL เราจะผูกเหตุการณ์จริงแล้วใช้เป้าหมายในเหตุการณ์พารามิเตอร์เหตุการณ์เพื่อกำหนดองค์ประกอบที่คลิกคือ ตัวอย่างเช่นองค์ประกอบ LI แรกในระดับต่ำ Event.target คือ li ด้วยวิธีนี้เราสามารถรับองค์ประกอบการคลิกที่เฉพาะเจาะจงและเราสามารถจัดการแตกต่างกันตามองค์ประกอบที่แตกต่างกัน
สรุป
โหมดสารานุกรมเป็นวิธีการเพิ่มประสิทธิภาพของโปรแกรมและเพื่อลดจำนวนวัตถุโดยการแบ่งปันข้อมูลสาธารณะเพื่อให้ได้โปรแกรมการเพิ่มประสิทธิภาพ โหมดสารานุกรมเหมาะสำหรับสถานการณ์ที่มีวัตถุและข้อกำหนดด้านประสิทธิภาพที่คล้ายกันจำนวนมาก เนื่องจากโหมด Xiangyuan จำเป็นต้องแยกข้อมูลภายในและภายนอกจึงเพิ่มความซับซ้อนเชิงตรรกะของโปรแกรมจึงแนะนำให้ใช้โหมด Xiangyuan เฉพาะเมื่อมีข้อกำหนดด้านประสิทธิภาพ
ประโยชน์ของการเพลิดเพลินกับรุ่นหยวน:
การปฏิบัติตามทรัพยากรของหน้าเว็บสามารถลดลงได้ตามคำสั่งของขนาด แม้ว่าการประยุกต์ใช้โหมด Xiangyuan ไม่สามารถลดจำนวนอินสแตนซ์เป็นหนึ่งได้ แต่คุณก็ยังสามารถได้รับประโยชน์มากมายจากมัน
การออมนี้ไม่จำเป็นต้องมีการปรับเปลี่ยนรหัสต้นฉบับจำนวนมาก หลังจากสร้างผู้จัดการโรงงานและ Xiangyuan การปรับเปลี่ยนรหัสนั้นไม่มีอะไรมากไปกว่าการเปลี่ยนแปลงจากการสร้างอินสแตนซ์คลาสเป้าหมายโดยตรงเพื่อเรียกวิธีการของวัตถุผู้จัดการ
ข้อเสียของการเพลิดเพลินกับโหมดหยวน:
หากใช้ในสถานที่ที่ไม่จำเป็นผลลัพธ์จะทำให้ประสิทธิภาพการทำงานของรหัสเสียหาย รูปแบบนี้ปรับรหัสให้เหมาะสมในขณะเดียวกันก็เพิ่มความซับซ้อนซึ่งอาจทำให้เกิดปัญหาในการดีบักและการบำรุงรักษา
มันเป็นอุปสรรคต่อการดีบักเพราะตอนนี้มีข้อผิดพลาดที่เป็นไปได้สามประการ: ผู้จัดการ, โรงงานและ Xiangyuan
การเพิ่มประสิทธิภาพนี้ยังสามารถทำให้การบำรุงรักษายากขึ้น ตอนนี้คุณไม่ได้เผชิญกับสถาปัตยกรรมที่ชัดเจนซึ่งประกอบด้วยวัตถุที่ห่อหุ้มข้อมูล แต่เป็นสิ่งที่ยุ่งเหยิง ข้อมูลในนั้นถูกบันทึกไว้อย่างน้อยสองแห่ง เป็นการดีที่สุดที่จะแสดงความคิดเห็นเกี่ยวกับข้อมูลภายในและข้อมูลภายนอก
การเพิ่มประสิทธิภาพนี้ควรทำเมื่อจำเป็นเท่านั้น การแลกเปลี่ยนจะต้องทำระหว่างประสิทธิภาพการดำเนินงานและการบำรุงรักษา หากคุณไม่แน่ใจว่าคุณจำเป็นต้องใช้โหมดสารานุกรมหรือไม่คุณมักจะไม่ต้องการ โหมด Xiangyuan เหมาะสำหรับโอกาสต่าง ๆ เช่นทรัพยากรระบบถูกนำมาใช้เกือบและจำเป็นต้องมีการเพิ่มประสิทธิภาพบางอย่างอย่างเห็นได้ชัด
รูปแบบนี้มีประโยชน์อย่างยิ่งสำหรับโปรแกรมเมอร์ JavaScript เพราะสามารถใช้เพื่อลดจำนวนองค์ประกอบ DOM ที่จะใช้บนหน้าเว็บโดยรู้ว่าองค์ประกอบเหล่านี้ใช้หน่วยความจำจำนวนมาก การใช้รูปแบบนี้และประเภทขององค์กรเช่นรูปแบบการรวมกันสามารถพัฒนาระบบเว็บแอปพลิเคชันที่ซับซ้อนมากมายซึ่งสามารถทำงานได้อย่างราบรื่นในสภาพแวดล้อม JavaScript ที่ทันสมัย
โอกาสที่เกี่ยวข้องสำหรับโหมด Xiangyuan:
ต้องใช้วัตถุที่ใช้ทรัพยากรจำนวนมากในหน้าเว็บ หากมีการใช้วัตถุเหล่านี้เพียงไม่กี่ชิ้นการปรับให้เหมาะสมแบบนี้จะไม่คุ้มค่า
อย่างน้อยส่วนหนึ่งของข้อมูลที่เก็บไว้ในวัตถุสามารถแปลงเป็นข้อมูลภายนอกได้ นอกจากนี้การจัดเก็บข้อมูลนี้นอกวัตถุควรใช้ทรัพยากรที่ค่อนข้างน้อยมิฉะนั้นวิธีการนี้ไม่มีความหมายสำหรับคำแนะนำประสิทธิภาพ ประเภทของวัตถุที่มีรหัสพื้นฐานจำนวนมากและเนื้อหา HTML อาจเหมาะสมกว่าสำหรับการเพิ่มประสิทธิภาพประเภทนี้
หลังจากแยกข้อมูลภายนอกจำนวนวัตถุที่ไม่ซ้ำกันค่อนข้างเล็ก