[jquery] 추가하기 전에 클래스가 이미 할당되었는지 확인하십시오.

Program / 글쓴이

jQuery에서 해당 클래스를 추가하기 전에 클래스가 이미 요소에 할당되었는지 확인하는 것이 좋습니다. 전혀 효과가 없을까요?

예를 들면 :

<label class='foo'>bar</label>

클래스 baz가 이미에 할당되었는지 확실하지 않은 경우 label이것이 가장 좋은 방법일까요?

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

아니면 이것으로 충분할까요?

$('label').addClass('baz');

답변

전화 만하세요 addClass(). jQuery가 검사를 수행합니다. 직접 확인하면 jQuery가 여전히 확인을 실행 하므로 작업이 두 배로 늘어납니다 .

답변

콘솔에서 간단하게 확인 addClass하면 동일한 클래스로 여러 번 호출 하는 것이 안전하다는 것을 알 수 있습니다.

특히 소스 에서 수표를 찾을 수 있습니다.

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

답변

이 질문은이 질문 의 중복으로 표시된 다른 질문에 이어 내 관심을 끌었습니다 .

이 답변은 약간의 추가 세부 사항과 함께 수락 된 답변을 요약합니다.

불필요한 검사를 피하여 최적화하려고합니다. 이와 관련하여 알아야 할 요소는 다음과 같습니다.

  1. 자바 스크립트를 통해 DOM 요소를 조작하여 클래스 속성에 중복 된 클래스 이름을 가질 수 없습니다. 당신이있는 경우 class="collapse"귀하의 HTML에, 전화는 Element.classList.add("collapse");별도의 추가하지 않습니다 붕괴 클래스를. 기본 구현은 모르지만 충분해야한다고 생각합니다.
  2. JQuery는 그 addClass와 removeClass구현 에서 몇 가지 필요한 검사를 수행합니다 (나는 소스 코드를 확인했습니다 ). 의 경우 addClass몇 가지 확인 후 클래스가 존재하면 JQuery가 다시 추가하려고하지 않습니다. 마찬가지로 removeClassJQuery는 cur.replace( " " + clazz + " ", " " );클래스가 존재하는 경우에만 클래스를 제거하는 작업을 수행합니다.

주목할만한 점은 JQuery가 removeClass무의미한 재 렌더링을 피하기 위해 구현에서 일부 최적화를 수행한다는 것입니다. 이렇게 간다

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

따라서 수행 할 수 있는 최상의 마이크로 최적화는 함수 호출 오버 헤드 및 관련 구현 검사를 피하는 것입니다.

당신은 클래스 이름을 전환하고 싶은 말은 collapse당신이 완전히 클래스가 추가되거나 제거 될 때의 제어에있는 경우, 그리고 경우 collapse클래스가 처음 결석 다음과 같이, 당신은 최적화 할 수 있습니다 :

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

한편, 스크롤 위치의 변경으로 인해 클래스를 토글하는 경우 스크롤 이벤트 처리 를 제한 하는 것이 좋습니다 .

답변

$("label")
  .not(".foo")
  .addClass("foo");

답변