ในภาษาที่มุ่งเน้นวัตถุแบบดั้งเดิมการเพิ่มฟังก์ชั่นลงในวัตถุมักใช้การสืบทอด แต่วิธีการสืบทอดสามารถนำปัญหามาใช้: เมื่อคลาสแม่เปลี่ยนแปลงคลาสย่อยทั้งหมดจะเปลี่ยนไปตามลำดับ
เมื่อสคริปต์ JavaScript กำลังทำงานการเพิ่มพฤติกรรมในวัตถุ (หรือบนต้นแบบ) จะส่งผลกระทบต่ออินสแตนซ์ทั้งหมดของวัตถุนั้น
มัณฑนากรเป็นทางเลือกในการใช้มรดกซึ่งเพิ่มคุณสมบัติใหม่ผ่านรูปแบบของวิธีการมากเกินไป รูปแบบนี้สามารถเพิ่มพฤติกรรมของตัวเองก่อนหรือหลังมัณฑนากรเพื่อบรรลุวัตถุประสงค์เฉพาะ
รูปแบบของมัณฑนากรเป็นวิธีการเพิ่มฟังก์ชั่นเพิ่มเติมให้กับฟังก์ชั่นที่มีอยู่แบบไดนามิก แต่ละฟังก์ชั่นที่จะตกแต่งจะถูกวางไว้ในฟังก์ชั่นแยกต่างหากจากนั้นใช้ฟังก์ชั่นนี้เพื่อห่อวัตถุฟังก์ชั่นที่มีอยู่ที่จะตกแต่ง ดังนั้นเมื่อต้องดำเนินการพฤติกรรมพิเศษรหัสการโทรสามารถเลือกและใช้ฟังก์ชั่นการตกแต่งเพื่อห่อวัตถุได้ตามต้องการ ข้อได้เปรียบคือมันแยกความรับผิดชอบหลักของคลาส (ฟังก์ชั่น) จากฟังก์ชั่นการตกแต่ง
เราสามารถกำหนดฟังก์ชั่นเครื่องมือดังนี้:
function.prototype.before = ฟังก์ชั่น (ก่อนหน้า) {var self = this; // บันทึกการอ้างอิงของฟังก์ชั่นการส่งคืนฟังก์ชั่นดั้งเดิม () {// ส่งคืนฟังก์ชันพร็อกซีที่มีฟังก์ชั่นใหม่และฟังก์ชั่นดั้งเดิมก่อนหน้านี้ (นี้อาร์กิวเมนต์); // ดำเนินการฟังก์ชั่นใหม่และตรวจสอบให้แน่ใจว่านี่ไม่ใช่การกลับมาที่ Self.apply (นี่, อาร์กิวเมนต์); // ดำเนินการฟังก์ชั่นดั้งเดิมและส่งคืนผลลัพธ์การดำเนินการของฟังก์ชั่นดั้งเดิมและตรวจสอบให้แน่ใจว่านี่ไม่ได้ถูกแย่งชิง}}; function.prototype.after = function (afterfn) {var self = this; return function () {var ret = self.apply (สิ่งนี้, อาร์กิวเมนต์); Afterfn.apply (ข้อโต้แย้งนี้); ผลตอบแทนผลตอบแทน; -พารามิเตอร์ก่อนหน้าและ AfterFn นี่คือฟังก์ชั่นใหม่ (เพิ่มการตกแต่ง) เพื่อขยายฟังก์ชั่นใหม่สำหรับฟังก์ชั่นดั้งเดิม ความแตกต่างเพียงอย่างเดียวระหว่างพวกเขาคือลำดับการดำเนินการที่แตกต่างกัน หากคุณไม่ต้องการปนเปื้อนต้นแบบของฟังก์ชั่นคุณสามารถใช้วิธีการต่อไปนี้:
var ก่อน = function (fn, ก่อนหน้า) {return function () {ก่อนหน้า. Apply (สิ่งนี้, อาร์กิวเมนต์); ส่งคืน fn.apply (ข้อโต้แย้งนี้); }}; var after = function (fn, afterfn) {return function () {var ret = fn.apply (สิ่งนี้, อาร์กิวเมนต์); Afterfn.apply (ข้อโต้แย้งนี้); return ret; -ตัวอย่าง: ใส่พารามิเตอร์ในคำขอ HTTP เพื่อป้องกันการโจมตี CSRF
var ajax = function (ประเภท, url, param) {console.log (param); // ส่งรหัสคำขอ ajax เล็กน้อย ... }; var ก่อนหน้า = ฟังก์ชัน (ประเภท, url, param) {param.token = 'โทเค็น';}; ajax = ajax.before (ก่อนหน้า); ajax ('get', 'http: //...com/userinfo' 'โทเค็น'}โดยการตกแต่งพารามิเตอร์โทเค็นแบบไดนามิกไปยังฟังก์ชั่น AJAX แทนที่จะแก้ไขพารามิเตอร์โดยตรงในฟังก์ชันดั้งเดิมฟังก์ชั่น AJAX ยังคงเป็นฟังก์ชั่นที่บริสุทธิ์ปรับปรุงความสามารถในการนำกลับมาใช้ใหม่และสามารถใช้โดยตรงในโครงการอื่น ๆ โดยไม่มีการดัดแปลงใด ๆ
ตัวอย่าง: การตรวจสอบแบบฟอร์ม (แยกอินพุตการตรวจสอบออกจากรหัสที่ส่งมาจากนั้นตกแต่งฟังก์ชันอินพุตการตรวจสอบก่อนที่จะส่งแบบฟอร์มด้วยวิธีนี้เราสามารถเขียนส่วนอินพุตการตรวจสอบลงในแบบฟอร์มปลั๊กอินสำหรับใช้ในโครงการที่แตกต่างกัน)
// ตรวจสอบฟังก์ชั่นอินพุต var validata = function () {ถ้า (username.value === '') {การแจ้งเตือน ('ชื่อผู้ใช้ไม่สามารถว่างเปล่า'); กลับเท็จ; } if (password.value === '') {แจ้งเตือน ('รหัสผ่านไม่สามารถว่างเปล่า'); กลับเท็จ; }}; // ฟังก์ชั่นการส่งแบบฟอร์ม var formsubmit = function () {var param = {ชื่อผู้ใช้: ชื่อผู้ใช้รหัสรหัสผ่าน: password.value}; ajax ('http://xxx.com/login', param);}; formsubmit = formsubmit.before (validata); submentbtn.onclick = function () {formsubmit ();};ข้อมูลอ้างอิง: "JavaScript Pattern" "JavaScript Design Pattern and Development Practice"
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น