معنى - هل يقوم jQuery بأي نوع من تخزين "المحددات"؟




this hide jquery (10)

على سبيل المثال ، هل سيؤدي الجزء الأول من التعليمة البرمجية بحثًا كاملاً مرتين ، أم أنه ذكي بما فيه الكفاية لتخزين النتائج مؤقتًا في حالة عدم حدوث تغييرات في DOM؟

if ($("#navbar .heading").text() > "") {
  $("#navbar .heading").hide();
}

و

var $heading = $("#navbar .heading");

if ($heading.text() > "") {
  $heading.hide();
}

إذا كان المحدد أكثر تعقيدًا ، يمكنني أن أتخيل أنه ضربة غير تافهة.

https://code.i-harness.com


احرص دائمًا على تخزين اختياراتك!

من المبذر أن تتصل بـ $( selector ) باستمرار مراراً وتكراراً بنفس المحول.

أو دائمًا ... يجب أن تحتفظ بشكل عام بنسخة مخبأة من كائن jQuery في متغير محلي ، ما لم تتوقع أن يكون قد تم تغييره أو أنك تحتاج إليه مرة واحدة فقط.

var element = $("#someid");

element.click( function() {

  // no need to re-select #someid since we cached it
  element.hide(); 
});


أنا فقط فعلت طريقة لحل هذه المشكلة:

var cache = {};

function $$(s)
{
    if (cache.hasOwnProperty(s))
    {
        return $(cache[s]);
    }

    var e = $(s);

    if(e.length > 0)
    {
        return $(cache[s] = e);
    }

}

وهي تعمل على هذا النحو:

$$('div').each(function(){ ... });

النتائج دقيقة بقدر ما أستطيع أن أقول ، استنادا إلى هذا الاختيار البسيط:

console.log($$('#forms .col.r')[0] === $('#forms .col.r')[0]);

ملحوظة: سوف يكسر تطبيق MooTools الخاص بك أو أي مكتبة أخرى تستخدم تدوين $$ .


الأمر لا يتعلق بمسألة "هل هي؟" ، ولكن "هل يمكن ذلك؟" ، ولا ، لا يمكن ذلك - ربما تكون قد أضفت عناصر مطابقة إضافية إلى DOM منذ أن تم تشغيل آخر طلب بحث. سيؤدي ذلك إلى جعل النتيجة المخبأة قديمة ، ولن يكون لدى jQuery طريقة (معقولة) لمعرفة ما عدا تشغيل الاستعلام مرة أخرى.

فمثلا:

$('#someid .someclass').show();
$('#someid').append('<div class="someclass">New!</div>');
$('#someid .someclass').hide();

في هذا المثال ، لن يتم إخفاء العنصر الذي تمت إضافته مؤخرًا إذا كان هناك أي تخزين مؤقت للتخزين - فذلك سيخفي فقط العناصر التي تم الكشف عنها في وقت سابق.


على غرار نهج $$ الخاص بك ، قمت بإنشاء دالة (تحمل نفس الاسم) تستخدم نمط تحفيظ للحفاظ على المنظف العالمي وكذلك حسابات معلمة سياق ثانية ... مثل $$ (". class"، "#context" ). هذا مطلوب إذا كنت تستخدم find () الدالة المتسلسلة التي تحدث بعد إرجاع $$؛ وبالتالي لن يتم تخزينها مؤقتًا إلا إذا قمت بتخزين كائن السياق أولاً. أضفت أيضًا معلمة منطقية إلى النهاية (المعلمة الثانية أو الثالثة بناءً على ما إذا كنت تستخدم السياق) لإجبارها على العودة إلى DOM.

الشفرة:

function $$(a, b, c){
    var key;
    if(c){
        key = a + "," + b;
        if(!this.hasOwnProperty(key) || c){
            this[key] = $(a, b);
        }        
    }
    else if(b){
        if(typeof b == "boolean"){  
            key = a;  
            if(!this.hasOwnProperty(key) || b){
                this[key] = $(a);
            }
        }
        else{
            key = a + "," + b;
            this[key] = $(a, b);   
        }            
    }
    else{
        key = a;
        if(!this.hasOwnProperty(key)){
            this[key] = $(a);
        } 
    }
    return this[key]; 
}

الاستعمال:

<div class="test">a</div>
<div id="container">
    <div class="test">b</div>
</div>​

<script>
  $$(".test").append("1"); //default behavior
  $$(".test", "#container").append("2"); //contextual 
  $$(".test", "#container").append("3"); //uses cache
  $$(".test", "#container", true).append("4"); //forces back to the dome
​
</script>

لا jQuery ، ولكن هناك إمكانية تعيين المتغيرات داخل التعبير الخاص بك ثم استخدام إعادة استخدام تلك في تعبيرات لاحقة. لذا ، أدخِل ذاكرة التخزين المؤقت - ifying your example ...

if ((cached = $("#navbar .heading")).text() > "") {
  cached.hide();
}

الجانب السلبي هو يجعل الشفرة أقسى قليلاً ويصعب تخطيها.


لا أعتقد أنه (على الرغم من أنني لا أشعر بقراءة ثلاثة آلاف ونصف من خطوط جافا سكريبت في الوقت الحالي لمعرفة ذلك).

ومع ذلك ، فإن ما تفعله لا يحتاج إلى محددات متعددة - يجب أن يعمل ذلك:

$("#navbar .heading:not(:empty)").hide();

هذا $$ () يعمل بشكل جيد - يجب أن يقوم بإرجاع كائن jQuery صالح في أي حالة غير معرف.

كن حذرا مع ذلك! يجب / لا يمكن مع محددات قد تتغير ديناميكيا ، على سبيل المثال. عن طريق إلحاق العقد مطابقة المحدد أو استخدام pseudoclasses.

function $$(selector) {
  return cache.hasOwnProperty(selector) 
    ? cache[selector] 
    : cache[selector] = $(selector); 
};

و $$ يمكن أن يكون أي اسم funciton ، بالطبع.


يتحدث John Resig في مسرد Jquery Internals في jQuery Camp 2008 عن بعض المتصفحات التي تدعم الأحداث التي يتم تشغيلها عند تعديل DOM. في مثل هذه الحالات ، يمكن تخزين نتائج Selctor مؤقتًا.


يقوم jQuery Sizzle تلقائيًا بتخزين الوظائف الأخيرة التي تم إنشاؤها من قبل المحددات للعثور على عناصر DOM. ومع ذلك فإن العناصر نفسها لا يتم تخزينها مؤقتًا.

بالإضافة إلى ذلك ، تحتفظ Sizzle بمخبأ للوظائف التي تم تجميعها مؤخرًا. تحتوي ذاكرة التخزين المؤقت على الحد الأقصى للحجم (والذي يمكن ضبطه ولكن يحتوي على إعداد افتراضي) بحيث لا تتعرض لأخطاء خارج الذاكرة عند استخدام الكثير من المحددات المختلفة.





jquery-selectors