إذا كنت مطوراً لمواقع الويب.. فلا بد أنك سمعت مسبقاً بهذه المكتبة, وإذا كنت جديداً في هذا العالم, فقد آن الأوان أن تتعرف على Prototype مكتبة جافا سكربت الشهيرة التي أنشأها سام ستيفنسون وضم فيها مجموعة كبيرة من التوابع المفيدة التي بإمكانها أن تختصر الكثير من الوقت وعناء كتابة الأكواد على مطوري الويب عموماً.

Prototype هي إحدى مكتبات جافا سكربت, التي جعلت الأكواد البرمجية أكثر وضوحاً وسرعة عند التعديل .. إذ يمكن لها أن تعالج نماذج Html و نموذج الكائن DOM أو الكائن XMLHttpRequest من خلال كلاسات Classes وتوابع Functionsوكائنات Objects معرفة مسبقاً ومعدة لتقوم بجميع أعمالك.

تتميز مكتبة Prototype بتوافقيتها مع تقنيات Web 2.0 عامة, مما يجعلها أكثر تفاعلية وقدرة على التعامل مع جميع المتصفحات, كما أنها تتضمن دعماً خاصاً لتقنية Ajax, وهناك شيء جميل آخر.. إذا كنت من معجبي لغة Ruby ومن مستخدميها ستلاحظ أيضاً الشبه الموجود بين Prototype و Ruby وتأثير منصة Ruby on Rails عليها. المكتبة – حتى تاريخ كتابة هذا المقال – في الإصدار, يمكنك تحميلها مباشرة من هنا. سأبدأ من خلال هذا المقال, الجزء الأول من 4 أجزاء نتحدث فيها عن مكتبة Prototype, ستفيدك هذه المقالات في التعرف على أهم توابع هذه المكتبة وبعض الأمثلة لاستخدامها (الجزء الأول), وعلى كائن Ajax في Prototype وما وفرته فيما يخص تطبيقات أجاكس (الجزء الثاني), وعلى الكلاسات التي تضمها المكتبة (الجزء الثالث), ثم الكائنات في Prototype (الجزء الرابع). إذاً.. لنتعرف أولاً على أهم التوابع التي تضمها مكتبة Prototype.. واستخداماتها.

تتضمن مكتبة Prototype العديد من التوابع – كما ذكرنا – مهمتها الأساسية هي اختصار كتابة الأكواد على المطور وتنظيمها وتأمين سهولة العودة والتعديل لاحقاً.. وهي:

التابع ()$ :

هذا التابع هو اختصار لما نسميه ()document.getElementById في DOM, وهو عبارة عن طريقة (تابعة للكائن document كما تلاحظ) تمكنك من إسناد قيمة معرف هو id (تدعم أكثر من id واحد أيضاً), كإشارة منك إلى أحد عناصر الصفحة مثلاً, ويرجع كذلك قيمة العنصر/ العناصر الذي تم تمريره له كوسيط id, لاحظ:

في السطر الأول, يرجع التابع ()$ قيمة العنصر anyElementID الذي تم تمريره كوسيط له, وتخزين هذه القيمة في المتحول myex. وفي السطر الثاني تم تمرير مجموعة من القيم كعناصر id ثم إرجاع مصفوفة القيم المرتبطة بتلك العناصر. مع ملاحظة أنه يمكنك بالطبع جمع أكثر من عنصر معاً ضمن Class, عندها تتحكم بجميع هذه العناصر بدلاً من التحكم بكل واحد على حدة, يفيدك ذلك في ضبط خصائص العرض المشتركة لمجموعة من العناصر.

لتوضيح آلية عمل التابع أكثر, لاحظ أيضاً هذا الكود البسيط:

ضمنّا المكتبة في السطر الرابع, وعملنا التابعين ()test1 و ()test2 ثم استدعيناهما من خلال عمل زر نموذج, الآن نفذ هذا الكود وشاهد عمل التابع ()$
التابع ()$$ :

هذا التابع عبارة عن أداة خاصة بالسيلكتور Selector في CSS, مهمته أن يعيد كل العناصر التي تتبع نفس الخصائص لسيلكتور Selector ما في CSS يمكنك الاطلاع أكثر هنا. مثلاً لو أردت أن تحصل على كل العناصر ذات الخاصية <a> في الكلاس المسمى myexample تكتب كالتالي:

سيعيد التابع $$() لنا كل العناصر التي تحوي السيلكتور <a>.

التابع ()F$ :

يعيد هذا التابع قيمة حقل ما ضمن نموذج Html مثل حقول النص أو القوائم المنسدلة, عن طريق تمرير عنصرid  كوسيط له, لاحظ الأمثلة:

يعيد التابع ()F$ هنا القيمة الموجودة في الحقل النصي .

يعيد التابع ()F$ هنا قيمة الخيار الحالي من ضمن قائمة الخيارات . حاول أن تجرب الأكواد السابقة بنفسك وشاهد النتيجة.

التابع ()A$ :

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

أعتقد أن عمله بسيط.. حاول تنفيذه وشاهد النتيجة.

التابع ()R$ :

مهمة هذا التابع هي إنشاء الكائن ObjectRange, حيث يمثل هذا الكائن سلسلة من القيم المتعاقبة, قد تكون عددية أو نصية أو قيم معدودة أخرى, وهو يأخذ نفس العوامل التي يأخذها التابع الباني الأصلي ويكون في Prototype بالشكل التالي:

التابع ()W$ :

هذا التابع يقوم بتقسيم السلسلة النصية إلى مصفوفة مؤلفة من الكلمات المكونة لهذه السلسلة, لاحظ المثال البسيط التالي وما القيم التي أعادها التابع:

التابع ()Try.these :

هذا التابع يفيدك عندما تريد استدعاء أكثر من تابع مختلف, إلى أن يعمل أحدها, عن طريق تمرير عدد من التوابع له كمعاملات واستدعائهم تباعاً إلى أن يتم تنفيذ واحد منهم- لنسميه التابع الناجح – بالتالي فهو يعيد نتيجة تنفيذ التابع الناجح . والسكربت التالي من موقع المكتبة يوضح كيفية تجريب تابعين يعمل كل منهما على متصفحات مختلفة, بحيث يعيد التابع Try.these() عند تنفيذه التابع الناجح بينهما.

التابعين xmlNode.text و xmlNode.textContent يعمل كل منهما على متصفحات مختلفة عن الآخر, وهنا سيتم اختيار التابع الذي سيعمل بشكل صحيح على المتصفح المستخدم بمساعدة التابع Try.these() .

يمكننا أيضاً الاستفادة من التابع Try.these() في استخدامات كثيرة مشابهة, ما رأيك لو اختصرت كتابة الأكواد الطويلة عند إنشاء نموذج عن الكائن XMLHttpRequest ؟ تعرفون أننا لإنشاء هذا الكائن بدون استخدام أي مكتبة نحتاج إلى اختباره على جميع المتصفحات أولاً لنعرف ما هو المتصفح المستخدم حالياً ثم ينشئ الكائن بناء على ذلك الاختيار, وهذا يحتاج لكتابة كود طويل نسبياً, ولكن الكود المختصر التالي سيجعلنا نختار – بنفس الطريقة الأولى – تابع واحد – بناء على نوع المتصفح طبعاً- لإنشاء نموذج عن هذا الكائن من بين مجموعة توابع تمرر إلى التابع Try.these() :

هذه أكثر التوابع شيوعاً في Prototype, في الجزء الثاني إن شاء الله, سنتحدث عن كائن Ajax وما قدمته مكتبة Prototype.js من كلاسات Classes وطرق Methods لتسهيل العمل معه ..

المصادر:

http://prototype.conio.net/

http://www.prototypejs.org