جميع زملاء الويب الأماميين على دراية تامة بـ document.getElementById. أثناء عملية التطوير، غالبًا ما نحتاج إلى استخدامه للحصول على العنصر بمعرف الصفحة xx. منذ أن أصبح النموذج الأولي لمكتبة JS المخضرمة شائعًا، يحب الجميع اختصاره بهذه الطريقة.
انسخ رمز الكود كما يلي:
// الطريقة الأولى
الوظيفة $(id){ return document.getElementById(id);
هل تساءل أحد يومًا عن سبب كتابته بهذه الطريقة بدلاً من الطريقة التالية؟
انسخ رمز الكود كما يلي:
// الطريقة الثانية
var $ = document.getElementById;
تعد كتابة $ بهذه الطريقة أكثر إيجازًا ووضوحًا. قم بتعيين طريقة المستند getElementById للمتغير $، واستخدم $ للحصول على العنصر بمعرف الصفحة xx. في الواقع، الطريقة الثانية ممكنة في IE6/7/8 (هناك بعض التغييرات في IE9)، ولكن ليس في Firefox/Safari/Chrome/Opera. يرجى اختباره بنفسك أيضًا.
لماذا لا يمكن لـ Firefox/Safari/Chrome/Opera الحصول عليه في الطريقة الثانية؟ السبب هو أن التنفيذ الداخلي لأسلوب getElementById في هذه المتصفحات يحتاج إلى الاعتماد على هذا (المستند)، في حين أن IE لا يحتاج إلى ذلك. أو بمعنى آخر، تشير الطريقة الثانية إلى أن هذا مفقود عند استدعائه في Firefox/Safari/Chrome/Opera. وفيما يلي مثال بسيط.
انسخ رمز الكود كما يلي:
// تحديد عرض الوظيفة
عرض الوظيفة () {تنبيه (هذا. الاسم)؛}
// تحديد كائن p بسمة الاسم
var p = {name:'Jack'};
show.call(p); // -> "جاك"
عرض ()؛ // -> ''
show.call(null); ''<BR>
يمكنك أن ترى أن تنفيذ العرض يعتمد على هذا (ببساطة، يتم استخدامه في نص الطريقة)، لذلك إذا كانت البيئة (سياق التنفيذ) عند الاتصال لا تحتوي على سمة الاسم، فلن يتم الحصول على النتيجة المتوقعة.
بمعنى آخر، IE6/7/8 لا يستخدم هذا عند تنفيذ document.getElementById، لكن IE9/Firefox/Safari/Chrome/Opera يحتاج إلى استخدام هذا، حيث يكون هذا هو كائن المستند. عندما يتم استدعاء الطريقة الثانية مباشرة، يكون هذا هو كائن النافذة الداخلي، لذلك لا يمكن للطريقة الثانية الحصول على العنصر بشكل طبيعي بناءً على المعرف في Firefox/Safari/Chrome/Opera.
إذا قمت بتغيير بيئة تنفيذ document.getElementById إلى مستند بدلاً من window، فيمكنك استخدام $ بشكل طبيعي. على النحو التالي
انسخ رمز الكود كما يلي:
// إصلاح document.getElementById
document.getElementById = (function(fn){
وظيفة الإرجاع (){
إرجاع fn.apply(document,arguments);
};
})(document.getElementById);
// بعد الإصلاح، قم بتعيين القيمة إلى $، ويمكن استخدام $ بشكل طبيعي.
var $ = document.getElementById;
مرة أخرى، يمكن لطريقة الربط الجديدة للوظيفة في ECMAScript5 تحقيق نفس التأثير.
انسخ رمز الكود كما يلي:
// الطريقة الثالثة
var $ = document.getElementById.bind(document);
لكن الطريقة الثالثة حاليًا مدعومة فقط بواسطة IE9/Firefox/Chrome/.
بعد تحليل حالة getElementById، من السهل أن نفهم سبب اختلاف الطرق التالية في المتصفحات المختلفة.
انسخ رمز الكود كما يلي:
فار برينف = document.write;
prinf('<h3>اختبار prinf</h3>'); // يمكن تشغيل IE6/7/8، وتبلغ المتصفحات الأخرى عن الأخطاء
var prinfln = document.writeln;
prinfln('<h3>اختبار prinfln</h3>'); // يمكن تشغيل IE6/7/8، وستبلغ المتصفحات الأخرى عن خطأ
إعادة تحميل فار = location.reload;
reload(); // يمكن تشغيل IE6/7/8، وستبلغ المتصفحات الأخرى عن خطأ
فار جو = History.go;
go(-2); // IE6/7/8 يمكن تشغيله، وستبلغ المتصفحات الأخرى عن خطأ