إطار عمل جافا سكريبت النموذجي

الموسوعة الحرة

إطار عمل Prototype JavaScript هو إطار عمل جافا سكريبت أنشأه سام ستيفنسون في فبراير 2005 كجزء من دعم Ajax في Ruby on Rails . يُنفذ كملف واحد من كود جافا سكريبت، يُسمى عادةً . يُوزع Prototype بشكل مستقل، وأيضًا كجزء من مشاريع أكبر، مثل Ruby on Rails وscript.aculo.us وRico. اعتبارًا من مارس 2021prototype.jsبحسب موقع w3techs، يستخدم برنامج Prototype من قبل 0.6% من جميع مواقع الويب. [ 1 ]

سمات

يوفر Prototype وظائف متنوعة لتطوير تطبيقات JavaScript. تتراوح الميزات من اختصارات البرمجة إلى الوظائف الرئيسية للتعامل مع XMLHttpRequest .

يوفر Prototype أيضًا وظائف مكتبية لدعم الأصناف والكائنات القائمة على الأصناف. [ 2 ] في جافا سكريبت، يعتمد إنشاء الكائنات على النموذج الأولي : يمكن أن تحتوي دالة إنشاء الكائن على prototypeخاصية، وأي كائن يُسند إلى تلك الخاصية سيُستخدم كنموذج أولي للكائنات التي تم إنشاؤها بواسطة تلك الدالة. يجب عدم الخلط بين إطار عمل Prototype وهذه الميزة اللغوية.

دوال مساعدة نموذجية

دالة $()

يمكن استخدام دالة الدولار ، $()، كاختصار لدالة getElementById . للإشارة إلى عنصر في نموذج كائن المستند (DOM) لصفحة HTML ، فإن الدالة المعتادة لتحديد العنصر هي:

document.getElementById ( " id_of_element" ) . style.color = " #ffffff " ;

تُختزل الدالة $() الكود إلى:

$ ( "id_of_element" ). setStyle ({ color : '#ffffff' });

يمكن للدالة $() أيضًا أن تستقبل عنصرًا كمعامل وستعيد، كما في المثال السابق، كائنًا موسعًا من النموذج الأولي.

var domElement = document.getElementById ( "id_of_element" ); // مرجع الكائن المعتاد المُعاد var prototypeEnhancedDomElement = $ ( domElement ) ; // مرجع الكائن الموسع للنموذج الأولي
ملاحظة : مثل الشرطة السفلية ( __)، $يُعدّ هذا الحرف "حرفًا صحيحًا" في مُعرّفات جافا سكريبت، وليس له أي دلالة أخرى في اللغة. أُضيف إلى اللغة بالتزامن مع دعم التعابير النمطية ، وذلك لمحاكاة متغيرات المطابقة الشبيهة بلغة بيرل$` ، مثل ` _` و`_` $'.

الدالة $F()

استكمالاً للوظيفة $(): $F()تُعيد هذه الوظيفة قيمة عنصر النموذج المطلوب. بالنسبة لحقل إدخال نصي، تُعيد الوظيفة البيانات الموجودة في العنصر. أما بالنسبة لحقل اختيار، فتُعيد الوظيفة القيمة المُحددة حاليًا.

$F ( "id_of_input_element" )

الدالة $$()

دالة `$$$` هي محرك مُحدِّدات CSS الخاص بـ Prototype . تُعيد هذه الدالة جميع العناصر المطابقة، مُتبعةً نفس قواعد المُحدِّد في ورقة أنماط CSS. على سبيل المثال، إذا أردتَ الحصول على جميع العناصر التي تحمل الفئة "pulsate"، فستستخدم ما يلي:<a>

$$ ( "a.pulsate" )

يُعيد هذا مجموعة من العناصر. إذا كنت تستخدم إضافة script.aculo.us لمكتبة Prototype الأساسية، فيمكنك تطبيق تأثير "النبض" (الوميض) كما يلي:

$$ ( "a.نبض" ). كل ( تأثير . نبض )؛

كائن Ajax

في محاولة لتقليل حجم التعليمات البرمجية اللازمة لتشغيل XMLHttpRequestدالة متوافقة مع مختلف المتصفحات، يوفر Prototype Ajaxكائنًا لتجريد المتصفحات المختلفة. يحتوي هذا الكائن على طريقتين رئيسيتين: ` Ajax.Request()and` و` Ajax.Updater(). يوجد شكلان للكائن Ajax: `and` Ajax.Requestتُعيد مُخرجات XML الخام من استدعاء AJAX، بينما `and` Ajax.Updaterتُدرج المُخرجات داخل كائن DOM مُحدد. Ajax.Requestيُحدد الكود أدناه القيم الحالية لعنصرين من عناصر إدخال نموذج HTML، ويُرسل طلب HTTP POST إلى الخادم مع أزواج اسم/قيمة هذين العنصرين، ويُشغل دالة مُخصصة (مُشار إليها showResponseأدناه) عند استلام استجابة HTTP من الخادم.

new Ajax.Request ( "http://localhost/server_script" , { parameters : { value1 : $F ( " form_element_id_1") ), value2 : $F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError }) ;

البرمجة الكائنية التوجه

يُضيف النموذج الأولي أيضًا دعمًا للبرمجة الكائنية التقليدية. Class.create()تُستخدم هذه الطريقة لإنشاء فئة جديدة، ثم تُسند إليها خاصية prototypeتُشكل مخططًا لإنشاء مثيلات من تلك الفئة.

var FirstClass = Class.create ( { // تعمل دالة التهيئة كدالة إنشاء initialize : function () { this.data = " Hello World" ; } } );

توسيع فئة أخرى:

Ajax.Request = Class.create ( Ajax.Base , { // تجاوز دالة التهيئة initialize : function ( url , options ) { this.transport = Ajax.getTransport ( ); this.setOptions ( options ) ; this.request ( url ) ; } , // ... إضافة المزيد من الدوال ... } ) ;

تأخذ دالة الإطار Object.extend(dest, src)كائنين كمعاملات، وتنسخ خصائص الكائن الثاني إلى الأول لمحاكاة الوراثة. كما تُعيد الدالة الكائن المُدمج كنتيجة. وكما في المثال السابق، يُنشئ المعامل الأول عادةً الكائن الأساسي، بينما يكون المعامل الثاني كائنًا مجهولًا يُستخدم فقط لتعريف خصائص إضافية. ويتم تعريف الفئة الفرعية بالكامل داخل أقواس استدعاء الدالة.

مشاكل

على عكس مكتبات جافا سكريبت الأخرى مثل jQuery ، فإن Prototype توسع DOM. وهناك خطط لتغيير ذلك في الإصدار الرئيسي القادم من المكتبة. [ 3 ]

في أبريل 2010، وصف المدون يوري "كانغاكس" زايتسيف (من بروتوتايب كور) بالتفصيل المشاكل التي قد تنجم عن تعديل خصائص وأساليب الكائنات المُعرَّفة بواسطة نموذج كائن المستند (DOM) الخاص باتحاد شبكة الويب العالمية (W3C). [ 3 ] وتتردد هذه الأفكار في أذهان مطور ياهو! نيكولاس سي. زاكاس، الذي نُشر في مارس 2010. [ 4 ] وقد لُخِّصت هذه الأفكار على النحو التالي . [ 5 ]

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

بحلول عام ٢٠٠٨، كانت المشكلات المحددة المتعلقة باستخدام أساليب امتداد DOM في الإصدارات القديمة من Prototype، بالإضافة إلى الإصدارات الأحدث من المتصفحات الحالية، موثقة بالفعل. [ ٦ ] بدلاً من إضافة أساليب وخصائص جديدة إلى كائنات DOM "المضيفة" الموجودة مسبقًا Element، مثل element.hide()، يكمن الحل لهذه المشكلات في توفير كائنات تغليف حول هذه الكائنات المضيفة وتنفيذ الأساليب الجديدة عليها. jQueryيُعدّ كائن التغليف هذا موجودًا في المكتبة التي تحمل الاسم نفسه. [ ٣ ]

انظر أيضاً

مراجع

  1. ↑ "إحصائيات الاستخدام والحصة السوقية لمكتبات جافا سكريبت للمواقع الإلكترونية، مارس 2021" . w3techs.com . تم الاطلاع عليه بتاريخ 27 مارس 2021 .
  2. ↑ "إطار عمل جافا سكريبت للنماذج الأولية | تعريف الفئات والوراثة" . prototypejs.org . تم الاطلاع عليه بتاريخ 5 يونيو 2020 .
  3. 1 2 3 kangax (5 أبريل 2010). "ما الخطأ في توسيع DOM؟" . تم الاسترجاع في 6 أبريل 2010 .
  4. ↑ زاكاس، نيكولاس سي. (2 مارس 2010). "جافا سكريبت قابلة للصيانة: لا تقم بتعديل الكائنات التي لا تملكها" . تم الاسترجاع في 6 أبريل 2010 .
  5. ↑ ألماير، ديون (6 أبريل 2010). "لن يقوم النموذج الأولي 2.0 بتوسيع DOM" . تم الاسترجاع في 6 أبريل 2010 .
  6. ↑ ريسيج، جون (26 مارس 2008). "getElementsByClassName pre Prototype 1.6" . تم الاطلاع عليه في 6 أبريل 2010 .

فهرس