تعليق: عندما تتحدث عن "HTML5" في الحشد ، قد تشعر وكأنك راقصة غريبة أو وحيد القرن قادم إلى منتصف المنزل مع معنى واضح من "أنا رائع ، أعرف ذلك"
لا يمكن القول أن نحن دون جدوى. لم تتطور واجهة برمجة تطبيقات HTML الأساسية في السنوات القليلة الماضية ، بحيث عندما تظهر ميزة جديدة صغيرة جديدة ، مثل العنصر النائب ، فإنها ستمنحنا مظهرًا جديدًا. على الرغم من أن العديد من ميزات HTML5 يتم تنفيذها في متصفحات جديدة ، إلا أن معظم المبرمجين لا يزالون لا يعرفون أو لم يسمعوا أبدًا بوجود واجهات برمجة التطبيقات الصغيرة والمفيدة للغاية. في هذه المقالة ، سأقدم بعض واجهات برمجة التطبيقات هذه وأرحب بالجميع لاكتشاف المزيد من واجهات برمجة التطبيقات HTML5 غير معروفة!
element.classlist
يوفر API ClassList API وظيفة أساسية للتحكم في CSS التي قمنا بتنفيذها على مر السنين باستخدام مكتبة أدوات JavaScript:
// إضافة فئة CSS
myElement.ClassList.add ("NewClass") ؛
// حذف فئة CSS
myElement.ClassList.Remove ("NerventClass") ؛
// تحقق مما إذا كان لديك فئة CSS
mylement.classlist.contains ("OneClass") ؛
// عكس وجود فئة CSS
mylement.classlist.toggle ("otherclass") ؛
القيمة الرئيسية لهذا واجهة برمجة التطبيقات الناشئة حديثًا هي: بسيطة وعملية.
ContextMenu API
تعد واجهة برمجة تطبيقات ContextMenu الجديدة مفيدة للغاية: لا تحل محل القائمة الأصلية النقر بزر الماوس الأيمن ، ولكنها تضيف قائمة النقر بزر الماوس الأيمن إلى قائمة النقر بزر الماوس الأيمن في المتصفح:
<section contextMenu = "mymenu">
<!-إضافة قائمة->
<type menu = "context">
<menuitem label = "refresh post" icon = "/images/refresh-icon.png"> </menuitem>
<menu label = "share on ..." icon = "/images/share_icon.gif">
<menuitem label = "twitter" icon = "/images/twitter_icon.gif"> </menuitem>
<menuitem label = "facebook" icon = "/images/facebook_icon16x16.gif"> </menuitem>
</menu>
</menu>
</القسم>
تجدر الإشارة إلى أنه من الأفضل استخدام JavaScript لإنشاء رموز القائمة هذه بشكل ديناميكي ، لأن حدث القائمة سيتصل في النهاية بـ JavaScript لتنفيذ المهام. إذا حظر المستخدم JavaScript ، فلن يتم إنشاء قائمة النقر بزر الماوس الأيمن ، ولن يرى القائمة في نفس الوقت.
element.dataset
باستخدام واجهة برمجة تطبيقات مجموعة البيانات ، يمكن للمبرمجين بسهولة الحصول على أو تعيين خصائص مخصصة-خصائص مخصصة:
/* الرمز التالي مثال
<div data-name = "mydiv" data-id = "myid" data-my-custom-key = "هذه هي القيمة"> </div>
*/
// الحصول على عناصر
var element = document.getElementById ("mydiv") ؛
// احصل على معرف
var id = element.dataset.id ؛
// اقرأ قيمة "Data-My-Custom-Key"
var customKey = element.dataset.myCustomKey ؛
// تعديل إلى القيم الأخرى
element.dataset.mycustomKey = "بعض القيمة الأخرى" ؛
// تحول:
// <div data-name = "mydiv" data-id = "myid" data-my-custom-key = "بعض القيمة الأخرى"> </div>
وغني عن القول ، إنها بسيطة وعملية مثل قائمة الفصل
Window.PostMessage API
حتى IE8 قد دعمت واجهة برمجة تطبيقات ما بعد الطبقات لسنوات عديدة. تتمثل وظيفة واجهة برمجة تطبيقات postmessage في أنها تتيح لك تمرير بيانات المعلومات بين نوافذ المتصفح أو الإطارات:
// من نافذة أو iframe على المجال A ، أرسل رسالة إلى نافذة أو إطلاع في المجال B.
var iframewindow = document.getElementById ("iframe"). contentWindow ؛
iframewindow.postmessage ("تحيات من النافذة الأولى!") ؛ </p> <p> // استلام الرسائل في نافذة أو iframe في مجال مختلف آخر مختلف
Window.AdDeventListener ("Message" ، Function (event) {
// اختبر شرعية المجال
if (event.origin == "http://www.vevb.com") {
// معلومات سجل الإخراج
console.log (event.data) ؛
// رسالة ردود الفعل
event.source.postmessage ("كيف حالك بخير!") ؛
}
]) ؛
يمكن أن يكون هيئة الرسائل مجرد سلسلة ، ولكن يمكنك استخدام json.stringify و json.parse لتحويل الرسائل إلى أجسام بيانات أكثر أهمية!
سمة التركيز التلقائي
يمكن أن تصبح سمة التركيز التلقائي على زر أو إدخال أو عناصر النص تلقائيًا محور الصفحة عند تحميل الصفحة:
<الإدخال AutoFocus = "Autofocus" />
<button autofocus = "AutoFocus"> HI! </utron>
<textarea autofocus = "Autofocus"> </sextarea>
في أماكن مثل صفحات بحث Google ذات الأنماط الثابتة ، فإن خاصية ضبط تلقائي للصورة هي الميزة المثالية.
يدعم المتصفح كل واجهة برمجة تطبيقات بشكل مختلف قليلاً ، لذا تحقق من دعم هذه الميزات قبل استخدامها. خذ بعض الوقت لقراءة الوصف التفصيلي لكل واجهة برمجة تطبيقات ، وأعتقد أنك ستجد المزيد.