قال بيتر سيبل ، مؤلف كتاب "Lisp العملي" ، إنه إذا كنت بحاجة إلى نمط ، فيجب أن يكون هناك خطأ ما. تشير المشكلة التي ذكرها إلى الحاجة إلى البحث وتلخيص حل عام بسبب العيوب الكامنة للغة.
سواء كان ذلك نوعًا ضعيفًا أو قويًا ، أو لغة ثابتة أو ديناميكية ، أو لغة ضرورية أو وصفية ، فإن كل لغة لها مزاياها وعيوبها. يتمتع رياضي جامايكي ببعض المزايا في الركض وحتى الملاكمة ، لكنه يفتقر إلى بعضهم في ممارسة اليوغا.
يمكن أن يكون Warlocks and Shadow Cirvers بسهولة مساعدة ممتازة ، في حين أن سحر العدو الذي يطير مع ماكون على ظهره سيكون محرجًا بعض الشيء. للتبديل إلى البرنامج ، قد يتطلب الأمر الكثير من الجهد لتنفيذ الديكور باللغة الثابتة. نظرًا لأن JS يمكن أن يرمي طرقًا على الأشياء في أي وقت ، يصبح نمط الديكور عديم الفائدة في JS.
هناك عدد قليل من الكتب حول أنماط تصميم JavaScript. "أنماط تصميم Pro JavaScript" هو كتاب كلاسيكي ، لكن الأمثلة الموجودة فيه مطوئة تمامًا ، لذلك بناءً على الكود الذي كتبته في العمل ، سألخص فهمي. إذا كان فهمي متحيزًا ، فيرجى التأكد من تصحيحه.
1. وضع Singleton
يتمثل تعريف نمط Singleton في إنتاج مثيل فريد لفئة ، لكن JS نفسها هي لغة "غير طبيعية". العديد من المقالات التي تتحدث عن نمط تصميم JS تستخدم {} كفرد ومنعون. نظرًا لوجود العديد من الطرق لإنشاء كائنات من JS ، دعونا نلقي نظرة على المفرد الآخر أكثر جدوى.
هناك شرط شائع أنه عند النقر فوق زر ، تحتاج طبقة القناع إلى الظهور على الصفحة. على سبيل المثال ، عند النقر فوق web.qq.com لتسجيل الدخول.
هذا الرمز الذي يولد طبقة قناع خلفية رمادية يسهل الكتابة عليه.
نسخة الكود كما يلي:
var createMask = function () {
مستند الإرجاع ، body.appendChild (document.createElement (div)) ؛
}
$ ('button') .click (function () {
var mask = createMask () ؛
Mask.show () ؛
})
المشكلة هي أن طبقة القناع هذه فريدة من نوعها على مستوى العالم ، لذلك في كل مرة تتصل فيها CreateMask ، سيتم إنشاء Div جديد ، على الرغم من أنه يمكن إزالته أثناء إخفاء طبقة القناع. ومع ذلك ، من غير المعقول من الواضح أن تفعل ذلك.
دعونا نلقي نظرة على الحل الثاني ، أنشئ هذا div في بداية الصفحة. ثم الرجوع إليها مع متغير.
نسخة الكود كما يلي:
var mask = document.body.appendChild (document.CreateElement ("div ')) ؛
$ ("button ') .click (function () {
Mask.show () ؛
})
هذا لا يعني أنه سيتم إنشاء طبقة قناع Div فقط على الصفحة ، ولكن سيتم متابعة مشكلة أخرى. ربما لن نحتاج أبدًا إلى طبقة القناع هذه ، والتي ستضيع div ويجب أن تكون بخيل للغاية بشأن أي عملية لعقدة DOM.
إذا كنت تستطيع استخدام متغير ، فحدد ما إذا كان قد تم إنشاء DIV؟
نسخة الكود كما يلي:
قناع فار
var createMask = function () {
إذا (قناع) قناع العودة ؛
آخر{
قناع = وثيقة ، body.appendChild (document.createElement (div)) ؛
إرجاع قناع
}
}
يبدو الأمر جيدًا ، لكن هنا أكملت وظيفة تنشئ كائن عمود واحد. دعونا نلقي نظرة فاحصة على الخطأ في هذا الرمز.
بادئ ذي بدء ، هذه الوظيفة لها بعض الآثار الجانبية. تعمل الوظيفة على تغيير الإشارة إلى القناع المتغير الخارجي في جسم الوظيفة. في مشروع تعاون متعدد الأشخاص ، يعد CreateMask وظيفة غير آمنة. من ناحية أخرى ، فإن القناع المتغير العالمي ليس ضروريًا. دعونا نحسنه.
نسخة الكود كما يلي:
var createMask = function () {
قناع فار
وظيفة الإرجاع () {
إرجاع قناع || (Mask = document.body.appendchild (document.createElement ('div')))))
}
} ()
يتم استخدام إغلاق بسيط للف القناع المتغير ، على الأقل لوظيفة CreateMask ، يتم إغلاقه.
ربما عندما أرى هذا ، أعتقد أن نمط المفرد بسيط للغاية. في الواقع ، بعض أنماط التصميم بسيطة للغاية. حتى لو لم أكن قد اهتمت مطلقًا بمفهوم أنماط التصميم ، فقد استخدمت بعض أنماط التصميم في الكود اليومي الخاص بي دون معرفة ذلك. مثلما فهمت ماهية عربة الرجل العجوز ، فكرت في الأمر منذ عدة سنوات ، واتضح أن هذه عربة رجل عجوز.
أنماط التصميم 23 في GOF هي أيضًا أنماط موجودة واستخدمت بشكل متكرر في تطوير البرمجيات. إذا لم يدرك المبرمج بوضوح أنه استخدم أنماطًا معينة ، فقد يفوتك تصميمًا أكثر ملاءمة في المرة القادمة (يأتي هذا المقطع من "عالم البرمجة في Matsumoto".
دعنا نعود إلى الموضوع ، لا يزال لدى المفرد السابق عيوبه. لا يمكن استخدامه إلا لإنشاء طبقات قناع. ماذا لو كنت بحاجة إلى كتابة وظيفة لإنشاء كائن XHR فريد؟ هل يمكنني العثور على غلاف عام سينجلتون؟
الوظائف في JS هي النوع الأول ، مما يعني أنه يمكن أيضًا تمرير الوظائف كمعلمات. دعونا نلقي نظرة على الرمز النهائي.
نسخة الكود كما يلي:
var singleton = function (fn) {
نتيجة var
وظيفة الإرجاع () {
نتيجة العودة || (النتيجة = fn .apply (هذا ، الحجج)) ؛
}
}
var createMask = Singleton (function () {
return document.body.appendChild (document.createElement ('div')) ؛
})
استخدم متغيرًا لحفظ قيمة الإرجاع الأولى. إذا تم تعيينه ، فسيتم إرجاع المتغير أولاً في المكالمات اللاحقة. يتم تمرير الكود الذي ينشئ طبقة القناع حقًا إلى غلاف Singleton من خلال وظيفة رد الاتصال. تسمى هذه الطريقة في الواقع وضع الجسر. فيما يتعلق بوضع الجسر ، يتم وضعه لاحقًا.
ومع ذلك ، فإن وظيفة Singleton ليست مثالية ، فهي تتطلب دائمًا نتيجة متغيرة لتسجيل الإشارة إلى DIV. لسوء الحظ ، فإن الخصائص الوظيفية لـ JS ليست كافية للتخلص تمامًا من التصريحات والبيانات.