يحظر الاستنساخ غير المصرح به
1. معالجة الحسابات الباهظة الثمن
ربما يكون الجانب الأكثر تعقيدًا في تطوير تطبيقات Javascript المعقدة هو الطبيعة المفردة لواجهة المستخدم. أفضل موقف عندما تتعامل Javascript مع تفاعل المستخدم هو الاستجابة البطيئة، وأسوأ موقف هو عدم الاستجابة مما يؤدي إلى توقف المتصفح (عند تنفيذ Javascript، يتم تعليق جميع عمليات التحديث في الصفحة). ونتيجة لهذه الحقيقة، من الضروري تقليل جميع العمليات المعقدة (أي عملية حسابية أطول من 100 مللي ثانية) إلى مستوى يمكن التحكم فيه. بالإضافة إلى ذلك، إذا لم يتوقف البرنامج النصي بعد تشغيله لمدة 5 ثوانٍ على الأقل، فستقوم بعض المتصفحات (مثل Firefox وOpera) بإنشاء مربع مطالبة لتحذير المستخدم من عدم استجابة البرنامج النصي.
من الواضح أن هذا أمر غير مرغوب فيه، كما أن إنتاج واجهة غير مستجيبة ليس بالأمر الجيد. ومع ذلك، فمن المؤكد تقريبًا أن هذا هو الحال عندما تحتاج إلى معالجة كميات كبيرة من البيانات (مثل معالجة الآلاف من عناصر DOM).
في هذا الوقت، الموقت مفيد بشكل خاص. نظرًا لأن المؤقت يمكنه إيقاف تنفيذ كود Javascript بشكل فعال، فيمكنه أيضًا منع المتصفح من تعليق كود التنفيذ (طالما أن الكود الفردي لا يكفي لإيقاف المتصفح). مع أخذ ذلك في الاعتبار، يمكننا دمج الحسابات الحلقية العادية والمكثفة في الحسابات غير المحظورة، فلننظر إلى المثال التالي حيث يكون هذا النوع من الحسابات مطلوبًا.
مهمة طويلة الأمد:
<الجدول><tbody></tbody></الجدول>
// عملية عادية ومكثفة
جدول var = document.getElementsByTagName("tbody");
لـ ( فار i = 0; i < 2000; i++ ) {
var tr = document.createElement("tr");
لـ ( فار t = 0; t < 6; t++ ){
var td = document.createElement("td");
td.appendChild(document.createTextNode("" + t));
tr.appendChild(td);
}
table.appendChild(tr);
}
}
في هذا المثال، قمنا بإنشاء إجمالي 26000 عقدة DOM وقمنا بتعبئة الأرقام في جدول، وهذا مكلف للغاية ومن المرجح أن يؤدي إلى تعليق المتصفح ومنع التفاعل العادي للمستخدم. يمكننا إدخال الموقتات في هذا الأمر والحصول على نتائج مختلفة وربما أفضل.
استخدم الموقتات لتقسيم المهام طويلة الأمد:
<الجدول><tbody></tbody></الجدول>
جدول var = document.getElementsByTagName("tbody");
فار ط = 0، ماكس = 1999؛
setTimeout(وظيفة(){
لـ ( var step = i + 500; i < step; i++ ) {
var tr = document.createElement("tr");
لـ ( فار t = 0; t < 6; t++ ){
var td = document.createElement("td");
td.appendChild(document.createTextNode("" + t));
tr.appendChild(td);
}
}
table.appendChild(tr);
}
إذا (أنا <ماكس)
setTimeout(arguments.callee, 0);
}, 0);
في مثالنا المعدل، قمنا بتقسيم الحساب المكثف إلى أربعة أجزاء، كل منها يخلق 6500 عقدة. من غير المرجح أن تؤدي هذه الحسابات إلى مقاطعة التدفق الطبيعي للمتصفح. السيناريو الأسوأ هو أن هذه الأرقام يمكن تعديلها في أي وقت (على سبيل المثال، جعلها تتراوح بين 250-500، بحيث تولد كل خلية من خلايانا 3500 عقدة DOM). ولكن الأمر الأكثر إثارة للإعجاب هو كيف قمنا بتغيير الكود الخاص بنا للتكيف مع النظام غير المتزامن الجديد. نحن بحاجة إلى بذل المزيد من العمل لضمان إنشاء أرقام العناصر بشكل صحيح (لا تنتهي الحلقة إلى الأبد). الكود مشابه جدًا لرمزنا الأصلي. لاحظ أننا نستخدم عمليات الإغلاق للحفاظ على حالة التكرار بين أجزاء التعليمات البرمجية، وبدون عمليات الإغلاق، سيكون هذا الرمز أكثر تعقيدًا بلا شك.
هناك تغيير واضح في استخدام هذه التقنية مقارنة بالأصل. يتم استبدال عمليات تعليق المتصفح الطويلة بأربعة تحديثات مرئية للصفحة. على الرغم من أن المتصفح يحاول تنفيذ مقتطفات التعليمات البرمجية هذه في أسرع وقت ممكن، إلا أنه يعرض أيضًا تغييرات DOM (مثل التحديثات الضخمة) بعد كل خطوة من خطوات المؤقت. في معظم الحالات، لا يكون المستخدمون على علم بهذه الأنواع من التحديثات، ولكن من المهم أن تتذكر حدوثها.
هناك موقف واحد حيث ستعمل هذه التكنولوجيا خصيصًا بالنسبة لي - وهو تطبيق قمت بتصميمه لحساب جداول طلاب الجامعات. في البداية، كان التطبيق نموذجيًا بواسطة CGI (يتحدث العميل إلى الخادم، ويحسب الخادم الجدول الزمني ويعيده). لكنني غيرتها ووضعت جميع حسابات الجدول الزمني على العميل، وهذه هي طريقة عرض حسابات الجدول الزمني:
هذه الحسابات مكلفة للغاية (يجب اجتياز آلاف التباديل للعثور على الإجابة الصحيحة). تم حل هذه المشكلة عن طريق تقسيم حساب الجدول الزمني إلى وحدات فعلية (تحديث واجهة المستخدم بالجزء المكتمل). وفي النهاية، قدم المستخدمون واجهة مستخدم سريعة وسريعة الاستجابة وقابلة للاستخدام.
غالبًا ما يكون من المفاجئ مدى فائدة التكنولوجيا. ستجده غالبًا ما يستخدم في البرامج طويلة الأمد، مثل مربعات الاختبار (سنناقش هذا في نهاية هذا الفصل). والأهم من ذلك، أن هذه التقنية توضح لنا مدى سهولة التغلب على قيود بيئة المتصفح مع توفير تجربة غنية للمستخدمين أيضًا.