الدلالات والكتابة وأفضل ممارسات الرابط أ

رابط دلالات ، الكتابة وأفضل الممارسات.

عند رؤية هذا الموضوع في Javaeye ، كانت المناقشة مثيرة للاهتمام للغاية ، ولم أستطع إلا أن أشارك. التفكير الدلالي

بادئ ذي بدء ، فإن زر الرابط A وزر الزر دلالي ولا يمكن استبداله بسبب الراحة في الاستخدام. A هو اختصار المرساة ، نقطة مرساة تستخدم للتنقل أو تحديد موقعها. الاستخدام النموذجي هو:

<a href = http: //www.w3c.org/> w3c موقع الويب </a> <a name = Anchor-One> هذا هو موقع المرساة.

يمكنك أيضًا تحديد سمات الاسم و HREF في نفس الوقت. هذه هي المعرفة الأساسية. إذا كان لديك أي أسئلة ، فيرجى الرجوع إلى مواصفات HTML 4.01.

دعنا نتحدث عن الأزرار (بما في ذلك الزر و <إدخال نوع = زر /إرسال />). من الناحية الدلالية ، الزر هو جزء من النموذج ، ويرتبط الإجراء المشغل بالنموذج. إذا لم يكن هناك عملية نموذج على الإطلاق ، يجب ألا تستخدم الأزرار. أعط بعض الأمثلة:

الصورة أعلاه هي بعض الروابط ، على الرغم من أنها تبدو كزر ، فهي دلالة.

أزرار العرض والفرز في الشكل أعلاه هي نموذج التشغيل. من الناحية الدلالية ، من الأنسب لاستخدام زر أو إدخال. (ملاحظة: تستخدم صفحة نتائج بحث Taobao حاليًا A ، وهي من أجل التحسين التدريجي ، وسيتم ذكرها أدناه)

باختصار ، تحتوي الروابط والأزرار على سيناريوهات الدلالات والاستخدام الخاصة بها ولا يمكن استبدالها حسب الرغبة. تحليل الكتابة

العالم ليس بهذه البساطة. في JavaScript Web World اليوم ، غالبًا ما يتم استخدام الرابط A لإطلاق أحداث JS:

<a href = onClick = some ()> test 1 </a> <a href =# onClick = some () ؛ return false >> اختبار 2 </a> <a href = javaScript: void (0) onClick = some () >> اختبار 3 </a> <a href = javaScript: void شيء ()> اختبار 4 </a>

بادئ ذي بدء ، هناك مشكلة في طريقة الكتابة الأولى ، لأنه سيتم إكمال HREF تلقائيًا بموجب IE.

تمنع الطريقة الثانية لكتابته مباشرة الحدث الافتراضي في حدث OnClick ، ​​لذلك يمكن أن يكون # في HREF = # أي قيمة. إن استخدام # هو النظر في أنه عندما لا يكون هناك JS ، فسيبقى على هذه الصفحة بعد النقر (ملاحظة: عندما تكون A أسفل شاشة واحدة ، فإن طريقة الكتابة هذه ستتسبب في إعادة الصفحة إلى الأعلى).

الطريقة الثالثة للكتابة هي أن قيمة HREF هي جافا سكريبت pseudo-protocol ، والباطرة هي عامل غير محدود لـ JavaScript (مثل! ، typeof). وظيفة مشغل الفراغ هي تنفيذ التعبير التالي فقط وعدم إرجاع أي قيمة. يبدو أن الفراغ (0) يمنع الحدث الافتراضي ، ولكن في الواقع ، فإن أساليب الكتابة التالية جيدة:

<a href = javaScript: void (1) onClick = some () >> test 3 </a> <a href = javaScript: ؛ OnClick = some () >> اختبار 3 </a> <a href = javaScript: onClick = some () >> اختبار 3 </a> <a href = javaScript: return true onclick = something () >> test 3 </a>

نظرًا لأن التشغيل الافتراضي لـ A هو محتوى JavaScript Pseudo-Protocol ، فإن إضافة باطل أو لا سيؤدي إلى تشغيل أحداث أخرى. (ملاحظة: تحت الأوبرا ، عندما تكون هناك قيمة إرجاع في البروتوكول الزائف ، سيتم تغيير HREF ، لذلك عادة ما نكتب باطلة (0) أو بيانات فارغة)

بعد فهم الطريقة الثالثة للكتابة ، ستفهم الطريقة الرابعة للكتابة: HREF = JavaScript: void something (). تتمثل إحدى ميزة بهذه الطريقة في أنه عند تعليق الماوس ، يمكن للمستخدم رؤية الوظيفة التي سيتم تنفيذها من خلال شريط الحالة. قد تكون هذه فائدة للمطورين ، ولكن للمستخدمين العاديين ، هل سيزيد هذا الثقة حقًا؟ أم أنه شعور بالخوف؟ بدون بيانات ، لا يمكنك استخلاص الاستنتاجات.

بالإضافة إلى طريقة الكتابة أعلاه ، هناك طريقة أخرى موصى بها للكتابة ، وهي إضافة خطاف إلى فئة أو معرف ، ثم إضافة الأحداث من خلال الخطاف في JS. انعكاس

لا أريد مناقشة أي من أنماط الكتابة أعلاه هي الأفضل. دعونا نفكر في سؤال الأصل: لماذا نستخدم A لتشغيل أحداث JS؟ الأسباب التي يمكن أن أفكر فيها هي:

هذا سيحصل تلقائيًا على النمط المعلق للماوس. لا يمكن للجميع التفكير في أي سبب للكتابة بهذه الطريقة. هذا ليس طبيعيا جدا. لأن IE6 يدعم فقط A: تحوم بأسلوب CSS ، ولا يمكن أن يكون HREF فارغًا

يمكن ملاحظة أنه بصرف النظر عن الأسلوب العائم ، لا يوجد سبب كبير. دعنا نضع جانبا مشكلة الأسلوب في الوقت الحالي ونلقي نظرة على مثال:

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

لا يمثل نمط الماوس المعلق مشكلة على الإطلاق:

في CSS ، فقط أضف المؤشر: مؤشر.

من المثال أعلاه ، يمكننا استنتاج استنتاج: إذا قمت فقط بإجراء إجراء JS دون أي دلالات التنقل أو تحديد المواقع ، فيمكنك استخدام Span أو علامات أخرى مناسبة ، وليس هناك حاجة لاستخدامها بشكل غير صحيح (باستخدام A Will Will Trouble: أولاً ، تحتاج إلى إزالة الحدث الافتراضي ، والثاني ، المعلومات الواردة في شريط الحالة يربك أو حتى مستخدمي الخوف العادي).

بالطبع ، إذا كان ذلك رابطًا بحد ذاته ، فأنت تريد فقط إضافة بعض تطبيقات فرز JS أو تشكيلها قبل التنقل ، مع الأخذ في الاعتبار من منظور تعزيز تدريجي ، فإن أفضل الممارسات هي كتابة جميع قيم HREF بحيث لا يمكن ضمان قابلية الاستخدام في المتصفحات التي لا تدعم JS. أفضل الممارسات

إنه ليس ملخصًا ، فهو ليس إنهاء لمرة واحدة. أفضل الممارسات هي مجرد سلسلة من المبادئ. من الضروري التفكير في الأمر قبل كتابة الكود:

استخدم زر الرابط A أو زر. اعتمادًا على سيناريو الاستخدام المحدد ، يرتبط الزر بالنموذج. لا تسيء إلى. عندما لا يمكنك حتى فهم قيمة HREF (لا تُظهر JavaScript Pseudo-Protocol ، لا تكون وحيدًا#) ، يرجى تحديد علامات أخرى وإضافة أحداث في JS عبر الخطافات. إذا كان ذلك بالفعل رابطًا وكان هناك حدث onclick ، ​​فيرجى التفكير في التحسين التدريجي لضمان سلامة قيمة HREF.

الرموز لها حياة ، Tag Kingdom هي حديقة حيوان ، على دراية بها ، كل شيء جميل.