سهولة إتقان نمط ديكور جافا سكريبت

في اللغات التقليدية الموجهة للكائنات ، غالبًا ما تستخدم إضافة وظائف إلى الكائنات الميراث ، ولكن طريقة الميراث يمكن أن تجلب المشكلات: عندما تتغير فئة الأصل ، ستتغير جميع فئاتها الفرعية وفقًا لذلك.

عند تشغيل البرنامج النصي JavaScript ، فإن إضافة سلوك في كائن (أو على النموذج الأولي) يؤثر على جميع مثيلات هذا الكائن.

يعتبر Decorator بديلاً لتنفيذ الميراث ، والذي يضيف ميزات جديدة من خلال شكل أساليب محملة. يمكن أن يضيف هذا النمط سلوكه الخاص قبل أو بعد الديكور لتحقيق غرض محدد.

نمط الديكور هو وسيلة لإضافة المزيد من الوظائف ديناميكيًا إلى الوظائف الموجودة. يتم وضع كل وظيفة يتم تزيينها في وظيفة منفصلة ، ثم استخدم هذه الوظيفة لالتفاف كائن الوظيفة الحالي ليتم تزيينه. لذلك ، عندما يحتاج السلوك الخاص إلى تنفيذ ، يمكن أن يستخدم رمز الاتصال بشكل انتقائي وتتابع وظيفة التزيين لالتفاف الكائن حسب الحاجة. الميزة هي أنه يميز المسؤوليات الأساسية للفئة (الوظيفة) عن الوظيفة الزخرفية.

يمكننا تحديد وظائف الأدوات على النحو التالي:

 function.prototype.before = function (eStfn) {var self = this ؛ . // تنفيذ الوظيفة الجديدة والتأكد من عدم اختطاف عودة self.apply (هذا ، الحجج) ؛ // تنفيذ الوظيفة الأصلية وإرجاع نتيجة التنفيذ للوظيفة الأصلية والتأكد من عدم اختطاف ذلك}} ؛ function.prototype.after = function (afterfn) {var self = this ؛ Return Function () {var ret = self.apply (هذا ، الوسائط) ؛ efterfn.apply (هذا ، الحجج) ؛ العودة }} ؛

المعلمات قبل FevN و AfterFN فيما يلي وظائف جديدة (إضافة الديكور) لتوسيع وظائف جديدة للوظيفة الأصلية. الفرق الوحيد بينهما هو أمر التنفيذ مختلف. إذا كنت لا ترغب في تلوث النموذج الأولي للوظيفة ، فيمكنك استخدام الطريقة التالية:

 var قبل = function (fn ، intfn) {return function () {extfn.apply (هذا ، الوسائط) ؛ إرجاع fn.apply (هذا ، الحجج) ؛ }} ؛ var بعد = function (fn ، afterfn) {return function () {var ret = fn.apply (this ، mations) ؛ efterfn.apply (هذا ، الحجج) ؛ العودة ret. }} ؛

مثال: ضع معلمة في طلب HTTP لمنع هجمات CSRF

 var ajax = function (type ، url ، param) {console.log (param) ؛ // أرسل رمز طلب AJAX قليلاً ...} ؛ var exerfn = function (type ، url ، param) {param.token = 'token' ؛} ؛ ajax = ajax.be -before (sufa) ؛ ajax ('get' ، 'http: //...com/userinfo' ، {name: 'sufa'}) ؛ }

من خلال تزيين المعلمات الرمزية ديناميكيًا إلى وظيفة AJAX ، بدلاً من تعديل المعلمات مباشرة على الوظيفة الأصلية ، لا تزال وظيفة AJAX وظيفة خالصة ، وتحسين قابلية إعادة الاستخدام ، ويمكن استخدامها مباشرة في مشاريع أخرى دون أي تعديلات.

مثال: التحقق من النموذج (افصل إدخال التحقق من النموذج المقدم من رمز ، ثم قم بتزيين وظيفة إدخال التحقق ديناميكيًا قبل إرسال النموذج. وبهذه الطريقة ، يمكننا كتابة جزء إدخال التحقق في نموذج إضافي للاستخدام في مشاريع مختلفة)

 // تحقق من وظيفة الإدخال var validata = function () {if (username.value === '' ') {Alert (' username لا يمكن أن يكون فارغًا ') ؛ العودة كاذبة } if (password.value === '') {Alert ('لا يمكن أن تكون كلمة المرور فارغة') ؛ العودة كاذبة }} ؛ // form function function varysubmit = function () {var param = {username: username.value ، password: password.value} ؛ ajax ('http://xxx.com/login' ، param) ؛} ؛ formsubmit = formsubmit.before (validata) ؛ submitbtn.onclick = function () {formpmit () ؛} ؛

المراجع: "نمط جافا سكريبت" "نمط تصميم جافا سكريبت وممارسة التطوير"

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.