แนะนำ
นักตกแต่งเสนอทางเลือกที่ยืดหยุ่นมากกว่าการสืบทอด นักตกแต่งใช้วัตถุที่ใช้ในการห่ออินเทอร์เฟซเดียวกันซึ่งไม่เพียง แต่ช่วยให้คุณสามารถเพิ่มพฤติกรรมลงในวิธีการ แต่ยังตั้งวิธีการเรียกวัตถุต้นฉบับ (เช่นคอนสตรัคเตอร์ของมัณฑนากร)
นักตกแต่งจะใช้เพื่อเพิ่มฟังก์ชั่นใหม่ผ่านรูปแบบของวิธีการมากเกินไป โหมดนี้สามารถเพิ่มพฤติกรรมของตัวเองก่อนหรือหลังมัณฑนากรเพื่อบรรลุวัตถุประสงค์เฉพาะ
ข้อความ
ดังนั้นประโยชน์ของโหมดมัณฑนากรคืออะไร? ดังที่ได้กล่าวไว้ก่อนหน้านี้มัณฑนากรเป็นทางเลือกในการบรรลุมรดก เมื่อสคริปต์กำลังทำงานการเพิ่มพฤติกรรมลงในคลาสย่อยจะส่งผลกระทบต่อทุกกรณีของคลาสดั้งเดิม แต่มัณฑนากรไม่ได้ แต่สามารถเพิ่มพฤติกรรมใหม่ให้กับวัตถุที่แตกต่างกัน รหัสต่อไปนี้ดูเหมือนว่า:
การคัดลอกรหัสมีดังนี้:
// คลาส (ฟังก์ชั่น) ที่ต้องการการตกแต่ง (ฟังก์ชั่น)
ฟังก์ชั่น macbook () {
this.cost = function () {
กลับ 1,000;
-
-
หน่วยความจำฟังก์ชัน (MacBook) {
this.cost = function () {
ส่งคืน macbook.cost () + 75;
-
-
ฟังก์ชั่น BlurayDrive (MacBook) {
this.cost = function () {
ส่งคืน macbook.cost () + 300;
-
-
ฟังก์ชั่นประกันภัย (MacBook) {
this.cost = function () {
ส่งคืน macbook.cost () + 250;
-
-
// การใช้งาน
var mymacbook = ประกันใหม่ (ใหม่ BluRayDrive (หน่วยความจำใหม่ (MacBook ใหม่ ())));
console.log (mymacbook.cost ());
ด้านล่างเป็นอีกตัวอย่างหนึ่ง เมื่อเราเรียก PerformAtSk บนวัตถุมัณฑนากรมันไม่เพียง แต่มีพฤติกรรมของมัณฑนากร แต่ยังเรียกฟังก์ชั่น performTask ของวัตถุที่ต่ำกว่า
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นคอนกรีตเทคคลาส () {
this.performTask = function () {
this.pretask ();
console.log ('ทำอะไรบางอย่าง');
this.posttask ();
-
-
ฟังก์ชั่น AbstractDecorator (ตกแต่ง) {
this.performTask = function () {
decorated.performtask ();
-
-
ฟังก์ชั่น ConcretEdecoratorClass (ตกแต่ง) {
this.base = AbstractDecorator;
this.base (ตกแต่ง);
decorated.pretask = function () {
console.log ('การโทรล่วงหน้า .. ');
-
decorated.postTask = function () {
console.log ('หลังการโทร .. ');
-
-
var concrete = concreteclass ใหม่ ();
Var Decorator1 = ใหม่ ConcretedecoratorClass (คอนกรีต);
var decorator2 = ใหม่คอนกรีตไดเซอร์เตอร์คลาส (Decorator1);
Decorator2.PerformTask ();
มาลองอีกตัวอย่างหนึ่ง:
การคัดลอกรหัสมีดังนี้:
tree var = {};
tree.decorate = function () {
console.log ('ตรวจสอบให้แน่ใจว่าต้นไม้ชนะ/' T Fall ');
-
tree.getDecorator = function (deco) {
ต้นไม้ [deco] .prototype = this;
คืนต้นไม้ใหม่ [deco];
-
tree.redballs = function () {
this.decorate = function () {
this.redballs.prototype.decorate (); // ขั้นตอนที่ 7: วิธีการแรกดำเนินการต้นแบบ (นี่คือเทวดา) วิธีการตกแต่ง
console.log ('ใส่ลูกบอลสีแดง'); // ขั้นตอนที่ 8 เอาต์พุตสีแดง
// ใช้ 2 ขั้นตอนเหล่านี้เป็นวิธีการตกแต่งของ redballs
-
-
tree.blueballs = function () {
this.decorate = function () {
this.blueballs.prototype.decorate (); // ขั้นตอนที่ 1: ใช้วิธีการตกแต่งของต้นแบบก่อนนั่นคือ tree.decorate ()
console.log ('เพิ่มลูกบอลสีน้ำเงิน'); // ขั้นตอนที่ 2 เอาต์พุตสีน้ำเงิน
// ใช้ 2 ขั้นตอนเหล่านี้เป็นวิธีการตกแต่ง BlueBalls
-
-
tree.angel = function () {
this.decorate = function () {
this.angel.prototype.decorate (); // ขั้นตอนที่ 4: ใช้วิธีการตกแต่งต้นแบบ (นี่คือ blueballs) วิธีการตกแต่ง
console.log ('Angel on the Top'); // ขั้นตอนที่ 5 Output Angel
// ใช้ 2 ขั้นตอนเหล่านี้เป็นวิธีการตกแต่งของ Angel
-
-
tree = tree.getDecorator ('blueballs'); // ขั้นตอนที่ 3: กำหนดวัตถุ Blueballs ให้กับต้นไม้และ getDecorator ในต้นแบบแม่ยังคงมีอยู่
tree = tree.getDecorator ('Angel'); // ขั้นตอนที่ 6: กำหนดวัตถุเทวดาให้กับต้นไม้ ในเวลานี้ GetDecorator ในต้นแบบหลักของต้นแบบแม่ยังคงมีอยู่
tree = tree.getDecorator ('redballs'); // ขั้นตอนที่ 9: กำหนดวัตถุ Redballs ให้กับต้นไม้
Tree.Decorate (); // ขั้นตอนที่ 10: ดำเนินการวิธีการตกแต่งของวัตถุ redballs
สรุป
รูปแบบของมัณฑนากรเป็นวิธีการเพิ่มฟังก์ชั่นเพิ่มเติมให้กับฟังก์ชั่นที่มีอยู่แบบไดนามิก แต่ละฟังก์ชั่นที่จะตกแต่งจะถูกวางไว้ในฟังก์ชั่นแยกต่างหากจากนั้นใช้ฟังก์ชั่นนี้เพื่อห่อวัตถุฟังก์ชั่นที่มีอยู่ที่จะตกแต่ง ดังนั้นเมื่อต้องดำเนินการพฤติกรรมพิเศษรหัสการโทรสามารถเลือกและใช้ฟังก์ชั่นการตกแต่งเพื่อห่อวัตถุได้ตามต้องการ ข้อได้เปรียบคือมันแยกความรับผิดชอบหลักของคลาส (ฟังก์ชั่น) จากฟังก์ชั่นการตกแต่ง