โหมดโรงงานรูปแบบการออกแบบ JavaScript และโหมดตัวสร้าง

รูปแบบคืออะไร

ฉันกำลังเตรียมตัวสำหรับการสอบครั้งสุดท้ายเมื่อไม่นานมานี้ แต่มันก็เป็นคนที่มีความพยายามและฉันก็ยุ่งมาก ฉันไม่มีเวลาอัปเดตบทความ วันนี้ฉันจะบอกคุณเกี่ยวกับรูปแบบการออกแบบใน JavaScript

ก่อนอื่นสิ่งที่เราต้องรู้คือรูปแบบนั้นเป็นวิธีแก้ปัญหาที่นำกลับมาใช้ใหม่ได้ในขณะที่การต่อต้านรูปแบบเป็นวิธีแก้ปัญหาที่ไม่ดีสำหรับปัญหาบางอย่าง

ตัวอย่างทั่วไปของการต่อต้านรูปทรงของ JS

1. ผ่านสตริงไปยัง settimeout และ setInterval ไม่ใช่ฟังก์ชั่นซึ่งทำให้เกิดการใช้งานภายในของ eval ()

2. กำหนดตัวแปรจำนวนมากในบริบทระดับโลกเพื่อสร้างมลพิษทางเนมสเปซทั่วโลก

3. แก้ไขต้นแบบของคลาสวัตถุ

4. ใช้ JS Inline และรหัส JS ที่ฝังอยู่ในไฟล์ HTML ไม่สามารถรวมอยู่ในเครื่องมือทดสอบหน่วยภายนอก

5. Document.write หากคุณเรียกใช้งาน Document.write หลังจากโหลดหน้าเว็บแล้วมันจะเขียนหน้าเว็บที่เราเข้ามาอีกครั้งหากคุณสามารถใช้ document.createlement แทนพยายามอย่าใช้ document.write

หมวดหมู่ของรูปแบบการออกแบบ

การสร้างรูปแบบการออกแบบ

รูปแบบการออกแบบที่สร้างสรรค์มุ่งเน้นไปที่การจัดการกลไกการสร้างวัตถุเพื่อสร้างวัตถุในลักษณะที่เหมาะสมกับสถานการณ์ที่กำหนด คุณลักษณะที่อยู่ในหมวดหมู่นี้รวมถึง:

คอนสตรัคเตอร์คอนสตรัคเตอร์, โรงงานโรงงาน, นามธรรมนามธรรม, ต้นแบบต้นแบบ, Singleton Singleton และตัวสร้างเครื่องกำเนิดไฟฟ้า

รูปแบบการออกแบบโครงสร้าง

รูปแบบโครงสร้างเกี่ยวข้องกับการรวมกันของวัตถุและมักจะใช้เพื่อค้นหาวิธีง่ายๆในการสร้างความสัมพันธ์ระหว่างวัตถุที่แตกต่างกัน

รูปแบบที่อยู่ในหมวดหมู่นี้รวมถึง:

มัณฑนากรมัณฑนากร, รูปลักษณ์ด้านหน้า, สารานุกรมฟลายเวท, อะแดปเตอร์อะแดปเตอร์และพร็อกซีพร็อกซี

รูปแบบการออกแบบพฤติกรรม

รูปแบบพฤติกรรมมุ่งเน้นไปที่การปรับปรุงหรือทำให้การสื่อสารง่ายขึ้นระหว่างวัตถุต่าง ๆ ในระบบ

รูปแบบพฤติกรรมรวมถึง:

Iterator Iterator, Mediator Mediator, Observer Observer และผู้เยี่ยมชมผู้เยี่ยมชม

โหมดโรงงาน

เพื่อแก้ปัญหาของการประกาศวัตถุที่คล้ายกันหลายครั้งเราสามารถใช้วิธีการที่เรียกว่ารูปแบบโรงงานซึ่งคือการแก้ปัญหาของวัตถุอินสแตนซ์ที่มีการทำซ้ำจำนวนมาก

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่น createObject (ชื่อ, อายุ, อาชีพ) {// ฟังก์ชั่นอินสแตนซ์กลาง {//

var obj = วัตถุใหม่ ();

obj.name = ชื่อ;

obj.age = อายุ;

obj.profession = อาชีพ;

obj.move = function () {

ส่งคืนสิ่งนี้ name + 'at' + this.age + 'มีส่วนร่วมใน' + this.profession;

-

คืน OBJ;

-

var test1 = createObject ('trigkit4', 22, 'โปรแกรมเมอร์'); // อินสแตนซ์แรก

var test2 = createObject ('mike', 25, 'วิศวกร'); // อินสแตนซ์ที่สอง

การแจ้งเตือน (test1.move ());

การแจ้งเตือน (test2.move ());

</script>

หมวดหมู่ของแบบจำลองโรงงาน

รูปแบบโรงงานแบ่งออกเป็นโรงงานง่าย ๆ โรงงานนามธรรมและโรงงานอัจฉริยะ รูปแบบจากโรงงานต้องการการใช้ตัวสร้างโดยไม่แสดง

รูปแบบโรงงานง่าย ๆ : ใช้คลาส (โดยปกติจะเป็นโมโนเมอร์) เพื่อสร้างอินสแตนซ์

รูปแบบโรงงานที่ซับซ้อน: ใช้คลาสย่อยเพื่อกำหนดว่าอินสแตนซ์คลาสเฉพาะของตัวแปรสมาชิกควรเป็น

ประโยชน์ของแบบจำลองโรงงาน

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

ข้อเสียของแบบจำลองโรงงาน

คลาสส่วนใหญ่ใช้กับคำหลักและตัวสร้างใหม่ที่ดีที่สุดซึ่งสามารถทำให้รหัสอ่านง่ายขึ้น แทนที่จะตรวจสอบวิธีการโรงงานที่จะรู้

รูปแบบของโรงงานแก้ปัญหาของการสร้างอินสแตนซ์ซ้ำ ๆ แต่มีปัญหาอื่นนั่นคือการระบุปัญหาเพราะมันเป็นไปไม่ได้ที่จะทราบว่าอินสแตนซ์ของวัตถุที่พวกเขาเป็น

การคัดลอกรหัสมีดังนี้:

การแจ้งเตือน (typeof test1); //วัตถุ

การแจ้งเตือน (test1 อินสแตนซ์ของวัตถุ); //จริง

เมื่อใดควรใช้โหมดโรงงาน?

โหมดโรงงานส่วนใหญ่จะใช้ในสถานการณ์ต่อไปนี้:

1. เมื่อวัตถุหรือส่วนประกอบเกี่ยวข้องกับความซับซ้อนสูง

2. เมื่อจำเป็นต้องสร้างอินสแตนซ์ของวัตถุที่แตกต่างกันอย่างง่ายดายตามสภาพแวดล้อมที่แตกต่างกัน

3. เมื่อจัดการกับวัตถุหรือส่วนประกอบขนาดเล็กจำนวนมากที่ใช้คุณลักษณะเดียวกัน

โหมดตัวสร้าง

ใน eCmascript ตัวสร้าง (ตัวสร้าง) สามารถใช้เพื่อสร้างวัตถุเฉพาะ โหมดนี้สามารถแก้ปัญหาที่โหมดโรงงานข้างต้นไม่สามารถจดจำอินสแตนซ์ของวัตถุได้

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

Function Car (รุ่น, ปี, ไมล์) {// โหมดคอนสตรัคเตอร์

this.model = model;

this.year = ปี;

this.miles = ไมล์;

this.run = function () {

ส่งคืนสิ่งนี้โมเดล + "ได้ทำไปแล้ว" + this.miles + "ไมล์";

-

-

var benz = รถใหม่ ('Benz', 2014,20000);

var bmw = รถใหม่ ("BMW", 2013,12000);

การแจ้งเตือน (เบนซ์อินสแตนซ์ของรถยนต์); // ฉันระบุอย่างชัดเจนว่าเป็นผู้ใต้บังคับบัญชาของรถยนต์จริง

console.log (benz.run ());

console.log (bmw.run ());

</script>

การใช้วิธีตัวสร้างจะช่วยแก้ปัญหาของการสร้างอินสแตนซ์ซ้ำและปัญหาการจดจำวัตถุ ความแตกต่างระหว่างรูปแบบนี้และรูปแบบโรงงานคือ:

1. สร้างวัตถุ (วัตถุใหม่ ()) ที่ไม่ได้แสดงโดยวิธีตัวสร้าง;

2. กำหนดแอตทริบิวต์และวิธีการโดยตรงให้กับวัตถุนี้

3. ไม่มีคำสั่งคืน

มีข้อกำหนดบางประการสำหรับวิธีการสร้าง:

1. ชื่อฟังก์ชั่นและตัวสร้างอินสแตนซ์นั้นเหมือนกันและเป็นตัวพิมพ์ใหญ่ (PS: ไม่บังคับ แต่การเขียนสิ่งนี้จะช่วยแยกความแตกต่างระหว่างตัวสร้างและฟังก์ชั่นทั่วไป);

2. ในการสร้างวัตถุผ่านตัวสร้างจะต้องใช้ตัวดำเนินการใหม่

เนื่องจากวัตถุสามารถสร้างผ่านตัวสร้างวัตถุนี้มาจากไหนและมีการดำเนินการวัตถุใหม่ () ที่ไหน? กระบวนการดำเนินการมีดังนี้:

1. เมื่อใช้ตัวสร้างและใช้ตัวสร้างใหม่ () จากนั้นวัตถุใหม่ () จะถูกดำเนินการในพื้นหลัง

2. ขอบเขตตัวสร้างเป็นวัตถุใหม่ (นั่นคือวัตถุที่สร้างโดยวัตถุใหม่ ()) และสิ่งนี้ในร่างกายฟังก์ชั่นแสดงถึงวัตถุที่ผลิตโดยวัตถุใหม่ ()

3. เรียกใช้รหัสภายในตัวสร้าง

4. ส่งคืนวัตถุใหม่ (ส่งคืนโดยตรงในพื้นหลัง)

ตัวสร้างที่มีต้นแบบ (ตัวสร้าง)

มีคุณสมบัติที่เรียกว่าต้นแบบใน JS หลังจากเรียกตัวสร้าง JS เพื่อสร้างวัตถุวัตถุใหม่จะมีคุณสมบัติทั้งหมดของต้นแบบตัวสร้าง ด้วยวิธีนี้สามารถสร้างวัตถุรถยนต์หลายคันและสามารถเข้าถึงต้นแบบเดียวกันได้

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

Function Car (รุ่น, ปี, ไมล์) {

this.model = model;

this.year = ปี;

this.miles = ไมล์;

-

car.prototype.run = function () {

ส่งคืนสิ่งนี้โมเดล + "ได้ทำไปแล้ว" + this.miles + "ไมล์";

-

var benz = รถใหม่ ('S350', 2010,20000);

var ford = รถใหม่ ('Ford', 2012,12000);

console.log (benz.run ()); // "S350 ทำไปแล้ว 20000 ไมล์"

console.log (ford.run ());

</script>

ตอนนี้สามารถแชร์อินสแตนซ์เดียว () เดียวระหว่างวัตถุรถยนต์ทั้งหมด