adapter design patterns


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

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

نمط التصميم Adapter يمكنك من إستخدام -او تبنى- Interface موجود مع اصناف اخرى غير متوافقه مع هذا ال Interface .

The Adapter pattern allows you to adapt existing interface to classes the would otherwise be incompatible .

ال Adapters يضاف للكود الموجود حتى يوفق بين ال Interfaces الغير متوافقه .
بالرغم من ال Adapters و ال Facade يتشابهوا فى انهم يقوموا بإحاطه الكائنات و تغيير ال Interface الذى يمثلهم للعالم الخارجى ، عليك ملاحظه ان ال Adapter يحول ال Interface التى تستخدم للوصول لصنف ما إلى Interface اخر ، بعكس ال Facade الذى يستخدم لعمل Interface أسهل للعمليات المعقده .
يمكنك اعتبار اتنين Interfaces غير متوافقين مثل فيشه كبيره اوى و كبس كهربائى ذات فتحات صغيره ، فى هذه الحاله لا يمكن ادخال الفيشه فى الكبس ، لكن يمكنك إستخدام Adapter -فى المحلات الكهربائيه تقريبا إسمه محول- يقبل فتحه الفيشه الكبيره من ناحيه و يخرج فيشه صغيره من الناحيه الاخرى ، هذا هو طريقه عمل ال Adapter .

لنفرض أن هناك وظيفه بإسم interfaceMethod فى صنف ما تقبل ثلاث عبارات من نوع String كما يوضح الكود البسيط التالى :

function interfaceMethod(str1, str2, str3){
    /*...code...*/
}

ماذا إذا اردت فى اى وقت فى المستقبل لأى من الاسباب أن يمرر لها object literal بدلا من 3 عبارت من نوع String ، تغير الكود الداخلى ل interfaceMethod حل غير عملى اطلاقا (لماذا) ، الافضل من ذلك عمل Adpater يحيط الوظيفه interfaceMethod بحيث يقبل ال object literal بالنيابه عنها ، ثم يمرر لها 3 عبارات String كما يحدث فى الوضع الطبيعى .

var obj = {
    string1:"foo",
    string2:"bar",
    string3:"baz",
}
function interfaceMethodAdapter(o){
    interfaceMethod(o.string1, o.string2, o.string3);
};

هذا المثال مجرد تطبيق بسيط جدا لل Adapter ، فى الواقع بعض أطر العمل تقوم بعمل Adapters لاطر العمل الاخرى ، بمعنى بفرض انك تستخدم اطار عمل Prototype منذ 3 اعوام و تريد الانتقال إلى YUI بدون تغير طريقه كتابتك للكود ، ولا تغير أى سطر كتبته من قبل ، بمنتهى البساطه يمكنك استخدام ال Adapter التى تقدمه لك YUI لإستخدام المكتبه بنفس ال Interface المستخدم فى jQuery ، هههههههه هذه ميزه اكثر من رائعه ، اذا كيف يبدو ال Adapter فى اطر العمل العملاقه ؟ لنفرض ان الوظيفه YAHOO.util.DOM.get تقبل عباره واحده ، قد تكون نص او HTMLElement او مصفوفه من نصوص او HTMLElements ، اما الوظيفه $ فى اطار عمل prototype تقبل اى عدد من العبارات من نوع نص او HTMLElement كما يوضح الكود البسيط التالى :

// prototype $ function
function $(){
    var elements = new Array();
    for(var i=0; i<arguments.length; i++){
        var element = arguments[i];
        if(typeof element == "string")
            element = document.getElementById(element);
        if(arguments.length == 1)
            return element;
        elements.push(element);
    }
    return elements;
};

// YUI get method
YAHOO.util.Dom.get = function(el){
    if(YAHOO.lang.isString(el)){
        return document.getElementById(el);
    }
    if(YAHOO.lang.isArray(el)){
        var c = [];
        for(var i=0, len=el.length; i<len; i+=1){
            c[c.length]=Y.Dom.get(el[i]);
        }
        return c;
    }
    if(el){
        return el;
    }
};

لنفرض انك فى المستقبل اردت الانتقال من prototype إلى YUI لأنها أسرع و اكثر امانا و مجتمع المطورين الذى يستخدمها كبير جدا و جوده التوثيق بكل صغيره و كبيره متعلقه بالمكتبه و لوفره ال cheat sheets و لأن ياهو تستخدمها فى تطبيقاتها … الخ ، ستلاحظ تغير كبير فى ال Interface بين prototype و YUI ، و اذا نظرنا إلى الوظيفه get فى YUI سنجد انها لا تقبل إلا عباره واحده فقط كما ان $ فى prototype لا تقبل عبارات من نوع Array ، هذا بالإضافه إلى التغير فى ال Interface بين الوظائف التى تتناول الاحداث و ال Ajax … الخ ، الحل فى إستخدام Adapter بدلا من اعاده كتابه الكود بواسطه YUI ، كما يوضح الكود البسيط التالى :

function $toGetAdapter(){
    return YAHOO.util.Dom.get(arguments);
}

function getTo$Adapter(el){
    return $.apply(window,el);
    // $.apply fix prototype array problem
}

إذا كنت تكتب prototype و تريد الانتقال إلى YUI بدون تغيير ما كتبته يمكنك استخدام ال Adapter المناسب كما يوضح الكود التالى :

$ = $toGetAdapter;

و إذا كنت تكتب YUI و تريد الانتقال إلى prototype بدون تغيير ما كتبته يمكنك إستخدام ال Adapter المناسب كما يوضح الكود التالى :

YAHOO.util.Dom.get = getTo$Adapter;

فى الواقع ال Adapter يوازى كل الخصائص و الوظائف فى الاطارين ،  ليس لوظيفه واحده كما يوضح المثال السابق ، لكن ايه رأيك ؟ رائع جدا نمط التصميم هذا ، يوفر عليك اعاده كتابه تطبيقات كاملا عند الانتقال إلى اطار عمل اخر ، بحيث تستخدم الاتنين بالتبادل بدون تغير اى كود كتبته من قبل بإحداهما .

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

خارج النص : قمت بوضع لينكات للسكرين كاست التى أشاهدها فى العمود الجانبى للمدونه ، و سوف انوه عن اى حلقه ذات اهميه قصوى فى موضوع منفصل كما تعودت ، لما كان عندك 12 سنه كنت بتعمل ايه ؟؟؟ ياترى كنت بتحضر مؤتمرات و تتكلم عن jQuery ذى Dmitri Gaskin شوف بنفسك ، اووووووووف .

الأوسمة: , , , , ,

3 تعليقات to “adapter design patterns”

  1. almhajer Says:

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

  2. mostafa farghaly Says:

    الشروط و السويتش لن تفلح فى توفيق 100 وظيفه مع بعض ، و ستصبح نكسه على أداء التطبيق ، اما استخدام Apdater و تغيير المرجع أفضل على الكفاءه و اداء التطبيق ، و افضل بحيث اننا لن نغير اى كود كتبناه من قبل

  3. almhajer Says:

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

أضف تعليقاً

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

WordPress.com Logo

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

صورة تويتر

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

Facebook photo

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

Google+ photo

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

Connecting to %s


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