لن يتجاهل الطلاب الذين يستخدمون البحث في BAIDU الفهرس المنسدلة لمربع الإدخال. إنه مريح للغاية. ومع ذلك ، فإن الظروف الفريدة تجعل هذه التكنولوجيا غير المتزامنة تواجه بعض الاختبارات. يحث طلب الخادم المتزامن للغاية على الحصار الأمامي أن يحثهم على تقليل عدد المرات التي يرسلون فيها AJAX قدر الإمكان. لا يبدو الأمر وكأنه مرتبط بهذه المقالة ، لكنه ليس كذلك. بادئ ذي بدء ، دعونا نقدم إعلانًا مجانيًا لبايدو. أدخل كلمة "الواجهة الأمامية" على صفحة Baidu الرئيسية ، واستخدم Chromebug لرؤية استجابة إرسالها بسهولة. النتائج كما يلي:
نسخة الكود كما يلي:
window.bdsug.sug ({Q: 'Front End' ؛ ، p: false ، s: ['' End End Development "،" End End Engineer "،" End End Bus "،" End Front End Engineer "،" Front End Framework "،" Front End Bus Wenergency "،" End End Front End "،" تحليل الواجهة الأمامية "،" أدوات تطوير الواجهة الأمامية "،" أدوات تنمية الواجهة الأمامية ") ؛
يحاول Baidu تقديم البيانات المنسدلة عن طريق إرجاع طريقة SUG باستخدام معلمة OBJ. عند إدخال "الواجهة الأمامية" مرة أخرى دون تحديث الصفحة ، لم تحدث طلبات مماثلة. هذا يعني أنه من المحتمل أن يكونوا قد وضعوا كائن ذاكرة التخزين المؤقت ، والذي يستخدم لتخزين الكائن المطلوب مؤقتًا. عندما يتم إدخال الكلمة نفسها لاحقًا ، سيتم استرداد مفتاح كائن ذاكرة التخزين المؤقت أولاً. بعد نجاح المباراة ، تتم قراءة قيمة الكائن مباشرة ولم تعد ترسل طلبًا إلى الخادم ، والذي يمكنه توفير التكاليف بشكل فعال.
دعنا نلقي الطوب ونحضر اليشم ، دعنا نتحدث عن الأبطال الحقيقي: طريقة HasownProperty.
أعتقد أن Jsers ليسوا على دراية بـ Hasownproperty ، وأنا فقط أبيع المياه بجوار النهر هنا.
إنه حصري للكائن ، المستخدم لتحديد ما إذا كانت خاصية موجودة في مفتاح الكائن ، وقيمة الإرجاع هي قيمة منطقية. هنا مثال:
نسخة الكود كما يلي:
var test0 = array.prototype.hasownproperty ('split') ؛ // خطأ ، لأن طريقة الانقسام غير موجودة في الصفيف
var test1 = string.prototype.hasownproperty ('split') ؛ // صحيح ، لأن الانقسام هو طريقة مدمجة لكائنات السلسلة
عندما تعرف هذا ، يبدو أنه لا يكفي رؤية قوة Hasownproperty. لذلك ، دعنا ببساطة ننتظر مثال Baidu المنسدلة:
نسخة الكود كما يلي:
var data = {} ، saveObj = function (val) {
إذا (data.hasownproperty (val)) {// إذا كانت القيمة المقدمة موجودة في كائن البيانات ، فلن يتم إرسال أي طلب
var len = data [val] .Length ؛
لـ (var i = 0 ؛ i <len ؛ i ++) {
console.log (Data [val] [i]) ؛
}
}آخر{
var url = 'http://suggestion.baidu.com/su؟wd=' + val ؛
$ .ajax ({// من أجل أمثلة واضحة ، هنا نستخدم jQuery's Ajax كمثال
url: url + '& p = 3 & cb = window.bdsug.sug & sid = 1421_1513_1541_1542_1582 & t = 1353756355137' ، // المعلمة الأخيرة t هي طابع زمني للوقت
نوع البيانات: 'JSONP' ،
النوع: "الحصول على" ،
النجاح: الوظيفة (الدقة) {
var msg = res.data ، len = msg.length ؛
msg == null && (msg = []) ؛
if (len> 0) {
البيانات [val] = msg ؛ // نتائج البحث المخبأة
لـ (var i = 0 ؛ i <len ؛ i ++) {
console.log (msg [i]) ؛ // اطبع نتيجة الطلب
}
}
} ، خطأ: function () {
تنبيه ('خطأ') ؛
}
}) ؛
}
} ؛
تساءل بعض الزملاء عن ذلك بهذه الطريقة ، ستصبح الذاكرة التي تشغلها بيانات كائن ذاكرة التخزين المؤقت أكبر وأكبر حيث يتم تخزين القيم الرئيسية. ثم أريد أن أقول إن هذا أمر لا مفر منه. لحفظ طلبات الخادم ، يجب التضحية الآخرين. في الواقع ، عادة ما تكون المساحة التي يشغلها كائن ذاكرة التخزين المؤقت ضئيلة لأنها ليست "ذاكرة مقيمة" وسيتم تدميرها بمجرد تحديث الصفحة. ومع ذلك ، يمكننا إعطاء حل آخر ، للموافقة على قيمة ذروة هذا الكائن ، على سبيل المثال ، يسمح فقط بتخزين 100 زوج من القيمة الرئيسية على الأكثر. عندما يتجاوز الرقم 100 ، يتم حذف المفاتيح العشرة الأولى المخزنة من خلال مشغل الحذف أو ببساطة غير مخزنة ، بحيث يمكن تجنب هذه المشكلة.
طريقة hasownproperty شائعة بشكل خاص في اكتشاف الكائنات. بالطبع ، يمكن للطلاب المهتمين أيضًا التعرف على طريقة propertyisenumerable. إنها نسخة معززة من HasownProperty. يمكنه اكتشاف خصائصه الخاصة وتعداد الخصائص. هذا المقال لن يشرح بالتفصيل.