jquery.initialize

작성자의 메모(pie6k) 나는 몇 년 전에 이 라이브러리를 만들었고 그 당시에는 좋았습니다. 이제 그런 용도로 jQuery를 사용하지 말고 React나 이와 유사한 것을 사용하면 안 됩니다. 감사합니다. — 2018-11-21

버그 신고는 계속 접수됩니다.

jQuery.초기화

jQuery.initialize 플러그인은 페이지에서 동적으로 생성된 요소를 유지하는 데 도움이 되도록 만들어졌습니다.

개요

jQuery.initialize는 선택기와 일치하는 각 요소를 반복하고 콜백 함수를 적용합니다. 그런 다음 문서 개체 모델에 대한 변경 사항을 수신하고 원래 선택기와 일치하는 문서에 삽입된 새 요소에 콜백 함수를 적용합니다.

 $.initialize([selector], [callback]);

이를 통해 개발자는 선택기와 일치하는 새 요소가 DOM에 삽입될 때마다 적용되는 초기화 콜백을 정의할 수 있습니다. AJAX를 통해 로드된 요소에도 작동합니다.

간단한 데모 - 여기를 클릭하세요

사용예

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
});

그러나 이제 .some-element 선택기와 일치하는 새 요소가 페이지에 나타나면 즉시 초기화됩니다. 새 항목이 추가되는 방식은 중요하지 않으며 콜백 등에 대해 신경 쓸 필요가 없습니다.

 $("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!

관찰하지 않음

문서 관찰을 중지하려면 반환된 MutationObserver 인스턴스에서 disconnect() 호출하여 관찰자의 연결을 끊을 수 있습니다. 그러면 observe() 다시 호출될 때까지 추가 알림 수신이 중지됩니다. . 예:

 var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();

옵션

target

기본적으로 전체 문서에서 변경 사항이 관찰됩니다. 이로 인해 성능이 저하될 수 있습니다. DOM의 특정 노드는 대상을 지정하여 관찰할 수 있습니다.

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });

그렇지 않으면 대상의 기본값은 document.documentElement 입니다.

observer

사용자 정의 MutationObserverInit 제공될 수 있습니다. 제공되지 않으면 기본적으로 내부 구성이 사용됩니다.

브라우저 호환성

플러그인은 MutationObserver 기반으로 합니다. IE9+( 아래 참고 사항 참조 ) 및 모든 최신 브라우저에서 작동합니다.

참고: IE9 및 IE10에서 작동하게 하려면 MutationObserver 폴리필을 추가해야 합니다. 여기에 있는 것과 같습니다: https://github.com/webcomComponents/webcomComponentsjs

---

성능 테스트( @bezborodow 및 @liuhongbo 덕분에)

토도

• bower 와 npm 호환되게 만들고, 고급 성능 테스트를 추가하세요.

기여자

• 아담 피에트라시아크
• 다미엔 베즈보로도프
• 마이클 헐스