في رمز JavaScript ، نظرًا للاختلافات في السلوك بين المتصفحات ، غالبًا ما ندرج عددًا كبيرًا من العبارات في الوظيفة للتحقق من خصائص المتصفح وحل مشاكل التوافق في المتصفحات المختلفة. على سبيل المثال ، وظيفتنا الأكثر شيوعًا لإضافة أحداث إلى عقدة DOM:
نسخة الكود كما يلي:
وظيفة addEvent (النوع ، العنصر ، المرح) {
if (element.addeventListener) {
element.addeventListener (النوع ، المرح ، خطأ) ؛
}
آخر إذا (element.attachevent) {
element.attachevent ('on' + type ، fun) ؛
}
آخر{
عنصر ['on' + type] = متعة ؛
}
}
في كل مرة يتم فيها استدعاء وظيفة addevent ، تحتاج إلى التحقق من القدرات التي يدعمها المتصفح. أولاً ، تحقق مما إذا كانت طريقة AddEventListener مدعومة. إذا لم يكن مدعومًا ، تحقق مما إذا كانت طريقة المرفق مدعومة. إذا لم يكن مدعومًا ، فاستخدم طريقة DOM Level 0 لإضافة الأحداث. يجب أن تتم هذه العملية في كل مرة تسمى وظيفة addevent. في الواقع ، إذا كان المتصفح يدعم إحدى الطرق ، فسيدعمها دائمًا ، وليس هناك حاجة لاكتشاف الفروع الأخرى. بمعنى آخر ، إذا كان لا يجب تنفيذ البيانات في كل مرة ، ويمكن أن يعمل الرمز بشكل أسرع.
الحل هو تقنية تسمى lazy التحميل.
يعني ما يسمى التحميل البطيء أنه سيتم تنفيذ فرع الوظيفة مرة واحدة فقط ، ثم عند استدعاء الوظيفة ، ستدخل مباشرة رمز الفرع المدعوم. هناك طريقتان لتنفيذ التحميل كسول. أول شيء هو أنه عندما يتم استدعاء الوظيفة لأول مرة ، ستتم معالجة الوظيفة نفسها من الناحية التربيعية. سيتم كتابة الوظيفة كدالة تلبي شروط الفرع ، بحيث لن تضطر المكالمة إلى الوظيفة الأصلية إلى الذهاب إلى الفرع المنفذ. يمكننا استخدام التحميل الكسول للكتابة فوق addevent () بالطريقة التالية.
نسخة الكود كما يلي:
وظيفة addEvent (النوع ، العنصر ، المرح) {
if (element.addeventListener) {
addEvent = function (type ، element ، fun) {
element.addeventListener (النوع ، المرح ، خطأ) ؛
}
}
آخر إذا (element.attachevent) {
addEvent = function (type ، element ، fun) {
element.attachevent ('on' + type ، fun) ؛
}
}
آخر{
addEvent = function (type ، element ، fun) {
عنصر ['on' + type] = متعة ؛
}
}
إرجاع addevent (النوع ، العنصر ، المرح) ؛
}
في هذا addEvent المحمّل البطيء () ، سيقوم كل فرع من البيان IF بتعيين قيمة لمتغير AddEvent ، وهو الكتابة فوق الوظيفة الأصلية بشكل فعال. الخطوة الأخيرة هي استدعاء وظيفة المهمة الجديدة. في المرة التالية التي تتصل فيها AddEvent () ، سيتم استدعاء الوظيفة المعينة حديثًا مباشرة ، بحيث لم تعد بحاجة إلى تنفيذها إذا كانت البيانات.
الطريقة الثانية لتنفيذ التحميل البطيء هي تحديد الوظيفة المناسبة عند إعلان الوظيفة. وبهذه الطريقة ، لن يتم فقد الأداء عندما تسمى الوظيفة في المرة الأولى ، وسيتم فقدان القليل فقط من الأداء عند تحميل الكود. هنا هو addevent () إعادة كتابة وفقا لهذه الفكرة.
نسخة الكود كما يلي:
var addevent = (function () {
if (document.adDeventListener) {
وظيفة الإرجاع (النوع ، العنصر ، المرح) {
element.addeventListener (النوع ، المرح ، خطأ) ؛
}
}
آخر إذا (document.attachevent) {
وظيفة الإرجاع (النوع ، العنصر ، المرح) {
element.attachevent ('on' + type ، fun) ؛
}
}
آخر {
وظيفة الإرجاع (النوع ، العنصر ، المرح) {
عنصر ['on' + type] = متعة ؛
}
}
}) () ؛
تتمثل الخدعة المستخدمة في هذا المثال في إنشاء وظيفة تنفيذ ذاتية مجهولة المصدر ، واستخدام فروع مختلفة لتحديد الوظيفة التي يجب تنفيذها. المنطق الفعلي هو نفسه. الفرق هو أنه يتم استخدام تعبير الوظيفة (يتم تعريف الوظيفة بواسطة VAR) ويتم إضافة وظيفة مجهولة. بالإضافة إلى ذلك ، يقوم كل فرع بإرجاع وظيفة صحيحة ويعينها على الفور إلى Addevent المتغير.
تتمثل ميزة وظائف التحميل البطيئة في أنه إذا تم تنفيذ الفروع مرة واحدة فقط ، فتجنب تنفيذ الوظيفة إذا كانت الفروع والرمز غير الضروري في كل مرة يتم تنفيذها ، وبالتالي تحسين أداء الرمز. بالنسبة إلى الطريقة التي تكون أكثر ملاءمة ، فإنها تعتمد على احتياجاتك.