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

هذا الدرس سأشرح فيه عن كيفية إنشاء إضافة خاصة لمكتبة jQuery، ومقسم على جزئين سيكون الأول عن نمط كتابة الإضافة بشكل بسيط وسيكون الجزء الثاني عبارة عن مثال عملي لإنشاء إضافة jQuery بسهولة، ما يميز إضافات jQuery أنه يمكن تطبيق عدة أفكار فيمكن إنشاء محددات Selectors إضافية لتطبيق عمل محدد أو إنشاء خاصية Property لنفس الغرض أو لتطبيق أفكار أخرى.

كتابة شفرة إضافة jQuery

سأشرح أهم النقاط المطلوبة لإنشاء إضافة jQuery، علماً بأن طريقة كتابة الإضافة يمكن أن تكون مختلفة بين مطور وآخر أو نفسها إذ يجد المطور النمط الذي يراه مناسباً لكتابة الإضافة ولكن هناك نقاط أساسية يجد مراعاتها عند كتابة الإضافة وهذا ما سأشرحه في هذا الجزء.

تغطية الدالة بشكل خاص

البداية تكون بتغطية الدالة التي ستكون في بداية كتابتك للإضافة بإستخدام الأقواس ( ) ، مثل هذه:

(function() {
     // محتويات الدالة
})()

وسبب ذلك هو لتجنب تضارب أو تصادم المتغيرات أو الدوال الموجودة في مكتبة JQuery أو أي مكتبة أخرى مع المتغيرات والدوال التي ستكتبها بحيث إذا كان هناك متغير بإسم A في أحد المكتبات أو الإضافات أو في ملف javascript خاص تستطيع كتابة متغير خاص بك بنفس الإسم بشرط أن يكون مغطى بهذه الطريقة، وهناك تدوينة تجد فيها شرح حول self-invoking anonymous function.

إضافات jQuery الأخرى تستخدم هذه الطريقة، مع تغطية الدالة يجب تمييز إضافتك وتبين أنها تابعة لمكتبة jQuery، ستكون الدالة المغطاه بهذا الشكل:

(function($) {
     // محتويات الدالة
})(jQuery)

تسمية الإضافة

نأتي إلى تسمية الإضافة، يجب أن يكون للإضافة إسم تقوم بتحديده يمكنك تسمية الإضافة مباشرة عبر إمتداد ملف Javascript مثل pluginName.js وأيضاً إنشاء الدالة الخاصة بالإضافة تجمع كافة محتويات الإضافة، يتم كتابة الإسم وإنشاء الدالة التي ستبدأ بإدخال الإختيارات عن طريقها بهذه الطريقة:

$.fn.pluginName = function(options) {
     // محتويات الإضافة
}

يمكن الإكتفاء بدالة واحدة أو عدة دوال، وغالباً تحمل إسم الدالة إسم الإضافة نفسها.

كتابة المتغيرات

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

$.fn.pluginName = function(optionOne,optionTwo) {
     optionTwo = 0;
}

الشفرة السابقة تبين أن المتغير الأول مطلوب والثاني إختياري لأننا حددنا قيمة إفتراضية له داخل الدالة. الطريقة الثانية هي تأليف عدة قيم للمتغير ويكون المتغير ضمن الدالة ولكن جميع قيمه تكون إفتراضية وإختيارية ويتم دمج قيم المتغير كإختيارات عن طريق دالة $.extend الموجودة في مكتبة jQuery كما تبين هذه الشفرة:

$.fn.pluginName = function(optionOne, optionTwo, otherOptions) {
     var otherOptions = $.extend({
         propertyOne: 'none',
         propertyTwo: 0,
         propertyThree: 0
     }, otherOptions);
}

وعند كتابة المتغير ضمن محتوى الإضافة يكتب بإستدعاء المتغير الرئيسي الذي أصبح كائن بعد إضافة عدة قيم بإستخدام دالة extend فيه:

var options = $.extend({
     type: 'normal',
     duration: 0
}, options);

if(options.type == 'normal') {
     $(Element).show(options.duration);
}

في الشفرة السابقة كتبنا متغيرين type و duration ومتغير type الذي أستطيع أن أستخدمه في إنشاء أنواع من العروض او الإختيارات على سبيل المثال، والمتغير duration مدة الظهور أو مدة لأي خاصية أخرى أو إستخدام آخر، لكن يتم إستدعاء المتغيرات على هذا الشكل options.type و options.duration.

إذا أنشأنا متغيرات بإستخدام دالة extend يتم كتبتها عبر تطبيق خاصية الإضافة على أي عنصر من العناصر بهذه الطريقة:

$('#content').pluginName({ type: 'normal', duration: 1000 });

تحديد العنصر

في هذه الخطوة يجب أن تكون إضافتك تطبق على عنصر أو عدة عناصر محددة بإستخدام $(Element) إضافة إلى إمكانية عمل الربط بين الدوال والخصائص المتاحة في jQuery أو ما يسمى chainability بحيث يمكن أن تدرج خاصية إضافتك مع بقية الخصائص بهذا الشكل:

$(Element).children().yourPluginName(options).hide();

يمكن أن يكون لإضافتك أكثر من خاصية، وكما قلت في بداية التدوينة غالباً تعتمد أغلب الإضافات على خاصية واحدة وتكون إسم الخاصية هي إسم الإضافة، لضمان عدم تصادم عمل خصائص jQuery الأخرى أو أي خصائص لأي إضافة أخرى يجب إستخدام دالة each بهذه الطريقة وتكون ضمن محتوى الإضافة:

$.fn.pluginName = function(optionOne, optionTwo, otherOptions) {
     var otherOptions = $.extend({
         propertyOne: 'none',
         propertyTwo: 0,
         propertyThree: 0
     }, otherOptions);

return this.each(function(){
     // محتوى الإضافة
});

}

كتابة العمل الذي ستؤديه الإضافة

الآن بداخل دالة each يتم كتابة بقية أجزاء الإضافة، ما هي فكرة إضافتك التي حددتها مسبقاً؟ عند إختيار مستخدم إضافتك أحد الإختيارات التي حددتها له ما الذي سيؤديه ذلك الإختيار من تأثير على العنصر؟

العمل الذي ستؤديه الإضافة سيكون حسب المتغيرات التي إختارها المطور والتي بالغالب تمُر على إستخدام الدوال الشرطية مثل if و switch ودوال أخرى بشكل عام، هذا مثال على وضع عدة إختيارات لمتغير في الإضافة بإسم childrenSet:

var options = $.extend({
     type: 'show', // type القيمة الإفتراضية لمتغير
     duration: 0
});

this.each(function(){
    switch(options.type) {
        case 'show':
             $(this).show(options.duration);
        break;
        case 'hideToShow':
             $(this).show(options.duration).hide(options.duration / 2).show(options.duration);
        break;
        case 'hide':
             $(this).hide(options.duration);
        break;
    }
});

في الشفرة السابقة إستخدمت دالة switch الشرطية ونستطيع إستخدام غيرها مثل دالة if، لا تهتم إلى محتوى القيم المختارة للمتغير type فقط وضعتها كمثال، ولكن وضحت إمكانية عمل عدة قيم للمتغير type والقيم التي أنشأتها هي show و hideToShow و hide.

الشفرة كاملة

جميع الشفرات التي كتبتها في هذا الدرس غير عملية، ولكن سأضع الشفرة كاملة لجميع ما كتبته من الأساسيات من البداية حتى النهاية، مع شرح الأجزاء المهمة في الشفرة:

// تغطية مكونات الإضافة لتفادي تعارض متغيراتها مع متغيرات الإضافات الأخرى
(function($) {

    // إسم الإضافة أو إسم الخاصية الموجودة في الإضافة
    // pluginName إسم الحالي هو
    $.fn.pluginName = function(options) {

        // extend إنشاء عدة قيم للإختيارات بإستخدام دالة
         var options = $.extend({
             propertyOne: 'show',
             propertyTwo: 0,
             propertyThree: 0
         }, options);

         // تحديد العنصر أو العناصر الحالية وربط خاصية الإضافة مع بقية الإضافات والخصائص المتاحة
         // مثل $('#content).pluginName(options).hide().show(500).doSomething();
         this.each(function(){

             // إختيارات القيم
             switch(options.propertyOne) {
                    // show قيمة
                    case 'show':
                        $(this).show();
                    break;

                    // hideToShow قيمة
                    case 'hideToShow':
                        $(this).show(propertyTwo).hide(propertyTwo/2).show(propertyTwo);
                    break;

                    // hide قيمة
                    case 'hide':
                        $(this).hide(propertyTwo);
                    break;

                    // ShowToHide قيمة
                    case 'showToHide':
                        $(this).hide(propertyTwo).show(propertyTwo/2).hide(propertyTwo);
                    break;
             }

         });

    }
})(jQuery)

بعد كتابة الإضافة، يمكنك تطبيقها على أي عنصر من عناصر HTML وبإستخدام مكتبة jQuery بالطبع:

$('#content').pluginName(options);

ويمكن دمج أكثر من خاصية لتطبيقها مع الإضافة على العنصر أيضاً:

$('#content').pluginName(options).fadeOut(1000).show(1000);

هذا الجزء الأول من الدرس والذي وضحت فيه أساسيات عمل إضافة jQuery، إن شاء الله سيكون الجزء الثاني عبارة عن مثال عملي ومدرج بالإختيارات لتمثيل الأشياء التي شرحناها في الجزء الأول أكثر.