Bridge design pattern


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

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

Bridge – الجسر -هو نمط تصميم يستخدم لفصل ال abstraction – كيف يعمل الصنف – عن ال implementation  – البيئه التى يعمل بها – و بذلك يمكن تغيير الاثنين بدون اعتماد احداهما على الاخر.

Bridge design pattern decouple an abstraction from its implementation so that the two can vary independently .
WikiPedia

انظر الى المثال البسيط التالى حتى تتضح الفكره قليلا :

myElem.addEventListener("click",getClientById);

function getClientById(event){
    var id = this.id;
    ajaxRequest("GET","clients.php?id="+id , function(resp){
        console.log(resp.responseText);
    });
}

المثال السابق يفترض ان هناك عنصر من عناصر HTML له مرجع بإسم myElem ، تم تسجيل مستمع لحدث click لهذا العنصر ، عند حدوث هذا الحدث يتم استدعاء الوظيفه getClientById و يتم تمرير الكائن الذى يمثل الحدث event لها ،هذه الوظيفه تقوم بإرجاع client بناءا على id كما يتضح من اسمها ،  داخل هذه الوظيفه يتم الحصول على ال id من خلال this.id بفرض ان عنصر ال html هذا يحتوى على id attribute ، لأن this تشير الى العنصر الذى صدر منه الحدث ، ثم يتم الحصول على client من خلال طلب عن طريق ajax لصفحه clients.php مع تمرير ال id لها ، و عندما يأتى الرد يتم طبع هذا الرد داخل ال console بفرض ان هناك console مثل firebug console .

هذه الوظيفه ترجع client بناءا على id ، فليس من الطبيعى تمرير كائن event لها ، كما لا يمكن استخدامها الا كمستمع للحدث لأن this ستشير إلى ال global object اذا لم يتم استخدامها كمستمع للحدث ، كما ان نتيجه طلب ال ajax يتم طباعتها فقط فى console ، ماذا اذا كنا نريد عمل شىء اخر بنتيجه طلب ال ajax ، كما ترى هذا ال api غير مرن اطلاقا ، سيكون من الصعب عمل unit test لها ، و من الصعب ايضا استخدامها من command line .

يمكننا كتابه getClientById أفضل عن طريق تمرير لها id و callback ، و عمل bridge يقبل كائن الحدث event و لا يوثر على كيفيه عمل الوظيفه الاصليه كما يوضح المثال البسط التالى :

function getClientById(id,callback){
    ajaxRequest("GET","clients.php?id"+id,function(resp){
        callback(resp.responseText)
    });
}

يمكننا استخدام النسخه الجيديده من getClientById داخل ال bridge كالتالى :

myElem.addEventListener("click",getClientByIdBridge,false);
function getClientByIdBridge(event){
    getClientById(this.id,function(client){
        console.log("the client is : " + client );
    })
}

الوظيفه getClientById اصبحت الان تقبل id و هذا منطقى اكثر بدلا من event object و تقبل أيضا وظيفه تقوم بإستدعائها عند الحصول على ال client ، و بذلك getClientById لا تعتمد اطلاقا على ال implementation ، لأن ال bridge الذى يمثل الوظيفه getClientByIdBridge قام بتولى مسؤليه اى implementation و بذلك يمكن تغير الكود داخل ال bridge بدون التأثير على تخصص الوظيفه getClientById ، و بذلك ايضا يمكننا ادخال getClientById داخل unit test و استخدامها من command line لأنها لا تعتمد على احداث ، فقط تستقبل المدخلات id و callback و تنفذ المطلوب ، اما اى زياده او تغيير فيتولاه ال bridge .

كما ان الجسور فى الواقع تصل الاشياء ببعضها فإن ال bridge يستطيع ربط اى صنفين معا كما يوضح المثال البسيط التالى :

var Class1 = function(a,b){
    this.a = a;
    this.b = b;
}
var Class2 = function(c,d){
    this.c = c;
    this.d = d;
}

var BridgeClass = function(a,b,c,d){
    this.one = new Class1(a,b);
    this.two = new Class2(c,d);
}

يعتبر أيضا ال priviledged method التى تستخدم للإستعلام عن المتغيرات الخاصه بمثابه bridge لأنها تربط ال public code بال private implementation كما يوضح المثال التالى :

function Public(){
    var secret = "Iam not the one";
    this.privilegedGetter = function(){
        return secret;
    }
}

var o = new Public;
o.privilgedGetter(); // Iam not the one

فوائد استخدام النمط Bridge :
يقلل من اعتماد الكائنات على بعضها ، و يقلل من اعتماد عمل الكائن على البيئه التى يعمل بها ، و يسهل ال debugging لأن كل وظيفه متخصصه فى عمل شىء واحد فقط بناء على مدخلات محدده ، و تغيير البيئه التى يعمل فيها الكود لن يؤثر على طريقه عمل الكائنات او الوظائف التى تدرج النمط bridge .

عيوب النمط Bridge :
كل Bridge يتم كتابته يزيد ب function جديده كما وضحت بالأمثله السابقه ، و قد يؤثر ذلك على كفاءه التطبيق ، و قد يزيد من تعقيد الكود ، لذلك لابد من حساب الفائده التى تعود من استخدامه و ضريبه استخدامه .

هذا الموضوع هو تلخيص الفصل الثامن من كتاب APRESS: Pro JavaScript Design Patterns مع حذف مثال connection queue لأنه 8 صفحات كود ، يمكنك قرائته من الكتاب أذا كنت تريد المزيد ، تم  إضافه رابط لسلسله انماط تصميم جافاسكربت بالعمود الجانبى للمدونه .

الأوسمة: , ,

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

  1. almhajer Says:

    يتضمن هذا المفهوم التصاق الكائن مع خواصه وهو مفهوم برمجي بحت يدعى الاتصاق والمزاوجة ومدى قرب الكائنات من بعضها وهو مفهوم مرتكز على استقلالية الخواص عن بعضها بحيث تنجز كل خاصية مهمة منوطة بها دون التصاقها باحدى الخواص الا للضرورة ويتلخص هذا المفهوم بمدى قوة الكود على انجاز مهام مستقلة بحيث تشكل بلوكات اساسية للعمل
    وكما ذكرت والعادة جرة نربط الخاصية او المهمة مع معرف عنصر ونقيده احيانا بنوع حدث وغيرها وهذا عندما نريد عمل فعل ما باستخدام نفس الخاصية يشعرنا بالاحبا وانه يجب كتابة نفس الخاصية ولكن تغير معرف الكائن واخلافه
    مثال
    function chnagecolor(){
    ob[‘style’][‘backgroundColor’]=’#000′; // تغغير لون الخلفية
    }
    بينما
    function chnagecolor(ele){
    ele[‘style’][‘backgroundColor’]=’#000′; // تغغير لون الخلفية
    }
    او
    function chnagecolor(ele,$att,$val){
    ele[‘style’][$att||’backgroundColor’]=$val||’#000′; // تغغير لون الخلفية
    }

    هذا خلاصة مافهمت شاكرا لك مجهودك و سلمك الله وبالتوفيق والى الامام

  2. mostafa farghaly Says:

    خلاصه الموضوع انك تكتب الكود بدون ارتباطه بأى implementation ، اى تكتب كودك و تجعل الاخرين يستخدمونه من خلال interface بحيث يكون كودك متخصص جدا فيما يفعله بدون ارتباطه ببيئه معينه او اى كائن اخر ، و بذلك نحن نطبق قاعده ال OO الشهيره :
    Code to an interface no an implementation .
    و اذا كان هناك لا بد من تغيير الكود ، فيمكنك تغير الكود فى ال bridge الذى يحيط الكود تبعك ، بدون تغيير الكود الاصلى

  3. almhajer Says:

    لافظ فوك

أضف تعليقاً

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

WordPress.com Logo

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

صورة تويتر

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

Facebook photo

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

Google+ photo

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

Connecting to %s


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