التحميل الزائد لدوال جافاسكربت JavaScript Functions Oveloading

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه.

نقدم لكم اليوم مرورا سريعا على موضوع التحميل الزائد في دوال جافاسكربت JavaScript Functions/Methods Overloading ونعني بذلك إمكانية أن تقبل الدالة عدداً من المتغيرات كـ Parameters بعدد مساوي أو أقل من الـ Parameters المحدد عند إنشائها، وقد يشمل المفهوم أيضاً أن تكون أنواع هذه المتغيرات مختلفة ( Number, Float, Double ،String, Object , Array … وغيرها) .

هذا المفهوم هو مفهوم برمجي عام ويوجد في لغات برمجة أخرى مثل ( Ada, C++, C#, D, and Java ) .

نلاحظ المثال التالي حيث لدينا الدالة welcome تستقبل اسم الشخص واسم المدينة وتقوم بعرض رسالة ترحيب.
هذه هي الدالة :

function welcome (PersonName,CityName) {

// سنقوم هنا باختبار صلاحية ما استقبلته الدالة
// PersonName و CityName
    PersonNameIsValid=(PersonName!=undefined)&&(PersonName!='');//returns true or false
    CityNameIsValid=(CityName!=undefined)&&(CityName!='');//returns true or false

//اسم الشخص والمدينة
    if(PersonNameIsValid&&CityNameIsValid)
        alert('Welcome '+ PersonName +' to '+CityName+'!');
//اسم الشخص فقط
    else if(PersonNameIsValid)
        alert('Welcome '+ PersonName +'!');
//اسم المدينة فقط
    else if(CityNameIsValid)
        alert('Welcome to '+CityName+'!');

//Parameters  بدون 
    else alert('Welcome!!!');
}//end welcome func

//******* tests الاختبارات ********
// welcome('ali','khartoum');//  welcome ali to khartoum!

// welcome('ali');//  welcome ali!
// welcome('ali','');//  welcome ali!

// welcome('','khartoum');  welcome to khartoum!
// welcome(khartoum');  welcome khartoum! نلاحظ هنا اعتبر ان الخرطوم هو اسم الشخص لأنه تم إمراره على أنه المتغير الأول

// welcome('','');//  welcome!
// welcome();//  welcome!

ما فائدة Overload ؟
هذه الخاصية تتيح لك استخدام نفس الدالة لمهام عديدة ، وتوفر مجهود إنشاء دوال أخرى.

يمكن إجراء اختبار النوع باستخدام الدالة typeof حيث تقوم بكشف نوع المتغير الذي تم إمراره كـParameter .

لتجربة الدالة قوموا بفتح أدوات المطور في قوقل كروم وافتحوا ال console ثم قوموا بنسخ الدالة welcome ولصقها في ال console ثم مفتاح Enter.
الآن قومو بكتابة welcome() في الــ Console ثم غيروا ال parameters .

console

عموما كانت هذه نبذة سريعة عن التحميل الزائد في دوال جافاسكربت..أتمنى أن تكونوا استفدتم.. 🙂

———————————-
المصادر:
John Resig – JavaScript Method Overloading
http://stackoverflow.com – Function overloading in Javascript – Best practices
مصدر الصورة

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه وسلم – والحمدلله رب العالمين
#

أدوات المطوّر في قوقل كروم – Developer Tools ؟ (الجزء 1)

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم-

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

  • Firebug و يعمل في Firefox
  • DragonFly يعمل في متصفح Opera
    تحديث في 17.7.2013 : Opera الآن يعمل بمحرك Blink (مبني على Webkit) أي أنه صار مثل الكروم 28+ ويتوقف العمل بالـ DragonFly في الإصدارة الحالية Opera 15 مع احتمال عودته مجدداً في الإصدارات القادمة.
  • Developer Tools ويعمل في IE8 فما فوق.
  • وأخيراً Webkit Dev Tools يعمل في Google Chrome و Apple Safari .. و Opera 15+

على الرغن من أنه تم عمل إصدارة Firebug خصيصاً لـ Google Chrome ، إلا أنها ليست بنفس فعالية الإصدارة الأصلية في Firefox .

المتصفحّات وأدوات التطوير

حديثنا في هذه السلسلة سيكون حول أدوات تطوير في قوقل كروم Chrome Developer Tools وكيفية استخدامها لمساعدة المصمم والمطور في تسهيل وتسريع وتصميم تطوير مواقع الويب، ربما نتطرق إلى بقية الأدوات لباقي المتصفحات في وقت لاحق.

واجهة أدوات التطوير

بداية نستخدم F12 أو Ctrl+Shift+i لإظهار أدوات التطوير، تتكون الواجهة من ألسنة Tabs تحتوي أيقونات الوصول للأدوات المختلفة وهي :

1. Elements : غالب العمل سيكون في هذا الجزء الذي يقوم بإظهار عناصر الصفحة في الجهة اليسرى من الشاشة وتفاصيل كل عنصر في الجهة اليمنى.

1-elements

 

2. Resources : وتحتوي هذه النافذة على جميع محتويات الصفحة ، مثل frames والصور وملفات الجافاسكربت والخطوط وملفات الستايل والـ Cookies في الجهة اليسرى وتفاصيل كل جزء في الجهة اليمنى.

2-resources

 

3. Network : تقوم هذه النافذه بإظهار الطلبات Requests الخارجة من هذه الصفحة وتفاصيل كل طلب.3-network

 

 

4. Sources : من هذه النافذة يمكن عرض وتحرير ملفات CSS و JavaScript مباشرة في المتصفح، كما يمكن متابعة وفحص وتحليل عمل الـ JavaScript في الصفحة .

4-source

5. و 6. Timeline, Profiles : كما في نافذة Network ، تعطيك هذه النوافذ معلومات دقيقة حول الأشياء التي تحدث في الصفحة مثلا من سرعة التحميل ، تفاصيل تنفيذ دوال جافاسكربت، حركة مؤشر الماوس، تقريباً جميع الأحداث Events التي تحدث في الصفحة يتم تسجيلها بصورة متسلسة ومتزامنة ، لا أذكر أني استخدمت هذه النوافذ من قبل! ولكن سنتحدّث عنها في وقت لاحق إن شاء الله.

 

7. Audits : تقوم هذه الأداة بتحليل صفحتك من ناحية استخدام الـ CSS والـ Cookies و تفاصيل عن الـ Caching وتقوم إعطاءك معلومات ونصائح حول ما يجب عليك عمله لتحسين أداء الصفحة.

5-audit

 

 

8. Console : يمكن تصنيفه كـ Command Line Tool للمتصفح ، يمكن من خلاله التفاعل مباشرة مع الصفحة من خلال الجافاسكربت .

مثال :

إذا قمنا بكتابة document.title فسيعرض عنوان الصفحة الحالية.

مثال آخر

  window.scrollTo(0,900)

سيقوم بعمل  scroll على بعد 900 بكسل من أعلى الصفحة

الصورة التالية فيها بعض الأمثلة :

6-console

كانت هذه مقدمّة سريعة عن أدوات التطوير في قوقل كروم.
يتبع إن شاء الله في أجزاء أخرى.
دمتم بود

وصلى الله وسلم وبارك على سيدنا محمد والحمد لله رب العالمين.

#