가 jQuery 행의 모든 종류의 캐싱"선택"?

StackOverflow https://stackoverflow.com/questions/291841

  •  08-07-2019
  •  | 
  •  

문제

예를 들어,첫 번째 부분의 코드가 수행하는 전 검색에 두 번,또는 스마트 결과를 캐싱하기에 충분하지 않은 경우 DOM 변화가 발생했다?

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

고 

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

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

는 경우에 선택은 더 복잡한 나는 그것을 상상할 수 있는 아닌 사소한다.

도움이 되었습니까?

해결책

jQuery는 그렇지 않지만 표현식 내의 변수에 할당 한 다음 후속 표현식에서 재사용 할 가능성이 있습니다. 따라서 예제를 캐시화합니다 ...

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

단점은 코드를 약간 더 멍청이하고 맥주하기가 어렵다는 것입니다.

다른 팁

항상 선택을 캐시하십시오!

끊임없이 전화하는 것은 낭비입니다 $( selector ) 동일한 선택기로 반복해서 반복합니다.

또는 거의 항상 ... 일반적으로 jQuery 객체의 캐시 된 사본을 로컬 변수에 보관해야합니다.

var element = $("#someid");

element.click( function() {

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

그것은 '그것을 할 수 있습니까?'의 문제는 아니지만 '할 수 있습니까?', 아니요, 쿼리가 마지막으로 실행되기 때문에 DOM에 추가 일치 요소를 추가했을 수 있습니다. 이로 인해 캐시 된 결과가 오래 걸리게되며 jQuery는 쿼리를 다시 실행하는 것 외에 다른 말을 할 수있는 방법이 없습니다.

예를 들어:

$('#someid .someclass').show();
$('#someid').append('<div class="someclass">New!</div>');
$('#someid .someclass').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]);

NB, Mootools 구현 또는 사용하는 기타 라이브러리를 중단합니다. $$ 표기법.

나는 그것이 그렇게 생각하지 않습니다.

그러나 당신이하고있는 일은 여러 선택기가 필요하지 않습니다. 이것은 작동해야합니다.

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

비슷한$$접근,내가 만든 기능(동일한 이름)을 사용하는 암기 패턴을 유지하는 세계기도정을 위한 두 번째 콘텍스트 매개 변수...다음과 같$$(".클래스","#컨텍스트").이것은 필요한 경우 사용 체인 기능을 찾을 수 있습니다()일어나는 후$$반환;따라서 그것을 캐쉬에 저장하지 않는 혼자하지 않는 한 당신이 캐시텍스트 객체가 처음.또한 추가 boolean 매개변수를 엔드(2 또는 3 매개 변수에 따라 사용하는 경우 컨텍스트)을 강제로 돌아가실 수 있습니다.

코드:

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가 선택기의 캐싱을 수행하는 대신 XPath/JavaScript에 의존하여 그것을 처리한다고 생각하지 않습니다. 즉, 선택기에 활용할 수있는 많은 최적화가 있습니다. 다음은 몇 가지 기본 사항을 다루는 몇 가지 기사입니다.

이 $$ ()는 잘 작동합니다. 어쨌든 정의되지 않은 경우 유효한 jQuery 객체를 반환해야합니다.

조심하세요! 동적으로 변할 수있는 셀렉터를 사용하면/할 수 없습니다. 선택기와 일치하거나 의사 클래스를 사용하는 노드를 추가함으로써.

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

그리고 $$는 물론 어떤 funciton 이름 일 수 있습니다.

Juphery Camp 2008에서 jQuery Internals Talk에서 John Resig는 DOM이 수정 될 때 해고되는 이벤트를 지원하는 일부 브라우저에 대해 언급합니다. 이러한 경우 SELCTOR 결과를 캐시 할 수 있습니다.

멋진 플러그인이 있습니다 jqache 그것은 정확히 그렇게합니다. 플러그인을 설치 한 후에는 일반적으로 다음을 수행합니다.

var $$ = $ .q;

그리고 그냥

$$ ( "#navbar .heading"). hide ();

이 모든 것의 가장 중요한 부분은 예를 들어 동적 작업을 수행하는 경우 필요할 때 캐시를 플러시 할 수도 있다는 것입니다.

$$ ( "#navbar .heading", true) .hide (); // 캐시를 플러시하고 새 (새로 발견 된) #Navbar .Heading을 숨 깁니다.

그리고

$$. clear (); // 캐시를 완전히 지 웁니다

JSPERF는 오늘 다운되었습니다 이 기사 jQuery Selector를 캐싱하는 성능은 최소화 될 것이라고 제안합니다.

enter image description here

이것은 단순히 브라우저 캐싱으로 내려갈 수 있습니다. 테스트 된 선택기는 단일 ID 일뿐입니다. 보다 복잡한 선택기와 다른 페이지 구조에 대한 더 많은 테스트가 수행되어야합니다 ...

jQuery Sizzle DOM 요소를 찾기 위해 선택기에서 생성 된 최근 기능을 자동으로 캐시합니다. 그러나 요소 자체는 캐시되지 않습니다.

또한 Sizzle은 가장 최근에 컴파일 된 기능의 캐시를 유지합니다. 캐시의 크기는 최대 크기 (조정될 수 있지만 기본값이 있음)를 가지므로 많은 다른 선택기를 사용할 때 메모리가 아닌 오류가 발생하지 않습니다.

$ .SelectorCache ()가 유용합니다.

https://gist.github.com/jduhls/ceb7c5fdf2ae1fd2d613e1bab160e296

Gist Imbed :

<script src="https://gist.github.com/jduhls/ceb7c5fdf2ae1fd2d613e1bab160e296.js"></script>

도움이되는지 확인하십시오 https://plugins.jquery.com/cache/

정기적 인 프로젝트의 일환으로 이것을 발견했습니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top