Facade design pattern


السلام عليكم و رحمه الله تعالى و بركاته

هذا الموضوع يعتمد على ماتم شرحه فى سلسله جافاسكربت الموجهه بالكائنات .

نمط التصميم Facade – ينطق فصاد – يستخدم لعمل Interface بسيط للصنف Class الذى يقوم بالكثير من العمليات المعقده أو الكثيره المتكرره ، و يزيل العلاقه بين الصنف و الكود الذى يستخدمه و يجعلهم loosely coupled ، كما ان نمط التصميم Facade هو لب كل اطر عمل الجافاسكربت ، حيث يقوم اطار العمل بفحص الفروق بين المتصفحات و فحص الاخطاء و عمل تفرع فى الكود و فى النهايه يعطى لك Interface للتعامل معه ، خذ عندك مثلا وظيفه $ فى اطار عمل jQuery ماهى إلا عباره عن Facade كبير جدا يجلب لك عناصر ال DOM عن طريق CSS3 selectors بالرغم من ان المتصفح – مثل IE و النسخ القديمه من Firefox و Safari و Opera- لا يفهم هذه ال selectors ، كل ماعليك هو معرفه كيف يكتب ال selector اما طريقه عمل jQuery ليس من اختصاصك ، حيث يقوم الكود داخل jQuery بإعراب ال selector الذى قمت بإدخاله و تصنيفه و جلب عناصر ال DOM من خلال الكثير من ال loops و المقارنات ووضع و جلب من ال cache بدون علمك ، الذى تطلبه ستجده ، اما تفاصيل عمل الكود الداخلى فسيتغير من نسخه للأخرى بدون ان يؤثر على عملك لأنك تتعامل مع Interface ثابت لن يتغير ، و مثال اخر لل Facade الذى يقوم بالعمليات المكرره ايقونه الاختصار فى انظمه التشغيل ، حيث تمكنك من الوصول لملف او اخر عن طريق الضغط عليها بدلا من الدخول لمسار داخل مسار داخل مسار داخل مسار داخل مسار فى كل مره تحاول الوصول لهذا الملف ، مثال اخر لل Facade الذى يقوم بفحص الفروق و القيام بالعمليات المكرر الوظيفه addEvent ، حيث أن اضافه حدث داخل تطبيق جافاسكربت يعمل فى بيئه المتصفح يتغير من متصفح لاخر ، فى المتصفحات التى لا تطبق قواعد W3C مثل متصفح IE يمكنك إضافه الحدث عن طريق الوظيفه attachEvent لعنصر ال DOM ، اما فى المتصفحات التى تطبق قواعد W3C مثل Firefox و Safari و Opera يمكنك غضافه الحدث لعنصر ال DOMعن طريق addEventListenr ، اما المتصفحات القديمه فيمكنك إضافه حدث عن طريق onEvent حيث Event هو الحدث ، تقوم الوظيفه البسيطه addEvent بتقديم Interface بسيط ثابت فى كل المتصفحات و تزيل عنك الفحص المتكرر فى كل مره تتعامل فيها مع الاحداث ، كما يوضح الكود البسيط التالى :

function addEvent(elem,type,fn){
    // W3C browsers way
    if(window.addEventListener){
        elem.addEventListener(type, fn, false);
    }
    // IE way
    else if(window.attachEvent){
        elem.attachEvent("on"+type, fn);
    }
    // old browsers way
    else{
        elem["on"+type] = fn;
    }
}

و يمكننا إستخدامها كالتالى فى اى متصفح :

addEvent(document,"click",clickHandler);
addEvent(document.body,"move",function(){
    /* ...code... */
});

أفضل ميزات نمط التصميم Facaed انك غير مقيد بكيفيه عمل الصنف ، مثلا google maps تستخدم canvas فى متصفحات W3C و تتسخدم VML فى متصفح IE ، فى اى وقت فى المستقبل ممكن ان تستخدم XAML فى متصفح IE ، او تستخدم SVG فى متصفحات W3C بدون علم مستخدمين Google maps api لأنهم يتعاملون مع Interface ثابت ، اما كيفيه عمله و ال  implementation ليس من شأنهم ، كما ان من مميزات ال Facade انه organizational pattern أى نمط تنظيمى يقوم بوضع الكود الذى يختلف فى مكان واحد و يعطى لهذا الكود Interface بسيط للإستخدام .

هذا الموضوع تلخيص للفصل العاشر بكتاب Apress: Pro JavaScript design patterns إرجع للكتاب اذا كنت تريد المزيد ، باقى الفصل يحتوى على مثالان لعمل مكتبه بسيطه للتعامل مع الاحداث و الستايل .

الأوسمة: , , ,

3 تعليقات to “Facade design pattern”

  1. almhajer Says:

    بارك الله فيك على المعومات القيمة وجزاك الله الف خير على الجهد المتواصل راجين من الله ان يكون في ميزان حسناتك

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

  2. عبدالله Says:

    السلام عليكم ,
    بارك الله فيك , لدي سؤال :
    ألا يبدو هذا النمط شبيه بالـFactory , لاأرى فرق بينهم ؟!

    • mostafa farghaly Says:

      @عبدالله ال factory يقوم بفصل امكانيه إنشاء الكائنات إلى مكان منفصل قد يكون داخل Singleton ، اما ال Facade يقوم بتوفير interface سهل لأداء مهام معينه ، بدلا من الخوض فى if و else و else if اكثر من مره لأداء تلك المهمه بعينها و للتوفيق بين ال interfaces المختلفه مثل تسجيل الاحداث فى المتصفحات الجديده و القديمه و IE كما يوضح المثال فى الموضوع addEvent ، اطار عمل مثل jQuery ماهو إلى facade كبير جدا يقوم بتوفير interface سهله و بسيطه لتوفير interface سهل يقوم بأداء المهمه عينها فى كل المتصفحات بدون تغيير الكود و فى نفس الوقت يعطى امكانيات لمتصفحات هذه الامكانيات غير موجوده فيها ، غالبا مواضيع انماط التصميم صعبه فى هضمها قليللا ، بالنسبه لى شخصيا قرأت الكتاب JavaScript design pattersns اكثر من مره فى البيت و فى المواصلات و فى الكليه حتى هضمته 100% و الحمد لله .

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: