mutationobserver 예제

MutationObserver API가 정말 편리할 수 있는 경우는 꽤 많습니다. 예를 들어 WYSIWYG 편집기에서 실행 취소/다시 실행 기능을 구현하려고 할 수 있습니다. MutationObserver API를 활용하면 어떤 시점에서 변경된 사항이 있는지 알 수 있으므로 쉽게 취소할 수 있습니다. 또는 웹 앱 방문자에게 현재 페이지에 약간의 변경이 발생했다고 가정해 보겠습니다. 또 다른 예 : DOM이 어떻게 변경되는지에 따라 동적으로 자바 스크립트 모듈을로드하는 새로운 멋진 자바 스크립트 프레임 워크에서 작업하고 있습니다. 다음은 돌연변이 관찰자가 어떻게 도움이 될 수 있는지에 대한 몇 가지 예에 불과합니다. 좋아, 나는 죄송합니다, 전에 구글을 aslked해야합니다. [불가능함](https://stackoverflow.com/questions/53656494/how-to-get-the-function-a-dom-돌연변이-돌연변이 관찰자)를 밝혀낸다. 웹은 MutationObserver의 데모와 자습서로 가득하지만 실제로 실제로 사용되는 예제를 찾기는 매우 어렵습니다. Github의 검색조차도 거의 모든 라이브러리 및 테스트 사례입니다. 우리는 그러나 Eager에서 그것을 사용하는 몇 가지 기회가 있었는데, 지금은 공유 할 수있는 기회가 있습니다.

다음은 돌연변이 관찰자가 어떻게 도움이 될 수 있는지에 대한 몇 가지 예에 불과합니다. 또한 우리는 우리의 사이트에 자바 스크립트 강조 표시 라이브러리를 사용합니다, 예를 들어, 프리즘.js. Prism.highlightElem(사전)에 대한 호출은 이러한 사전 요소의 내용을 검사하고 이 페이지의 예제에서 볼 수 있는 것과 유사하게 컬러 구문 강조 표시를 위한 특수 태그 및 스타일을 추가합니다. MDN 페이지는 현재 MutationObserver 구성에서 사용할 수 있는 옵션의 세부 정보를 생략합니다. 이것은 https://dom.spec.whatwg.org/#mutationobserver 사양에 자세히 설명되어 있습니다. 먼저 구문을 보고 실제 사용 사례를 살펴보겠습니다. 복잡성이 증가함에 따라 웹 앱의 수명 주기 동안 지정된 모든 순간에 UI의 정확한 상태를 알기가 더 어려워집니다. 키프레임을 만들면 듣고 싶은 요소에 애니메이션을 적용해야 합니다.

브라우저에서 애니메이션 발자국을 완화하는 작은 기간에 유의하십시오: 따라서 이 기사에서는 돌연변이 관찰자를 사용하는 이유와 방법을 살펴보았습니다. 나는 이것이 도움이되었기를 바라며 이제이 API를 더 잘 이해할 수 있기를 바랍니다. 이 작업은 또한 childList의 형식을 보여 주지만 이제 removeNodes에는 제거 된 노드가있는 NodeList[1]가 있습니다. 다음은 돌연변이가 관찰될 때 실행하려는 기능입니다. 나는 창의적으로 이것을 불렀다Mutate : 첫째, 우리는 콜백 기능을 가진 관찰자를 만듭니다 : 그 방법을 언제 실행해야합니까? DOMContentLoaded 이벤트 또는 페이지 하단에서 수행할 수 있습니다. 그 순간 우리는 DOM 준비, 사전 요소를 검색 할 수 있습니다 [클래스 *=”언어”] 그들에 Prism.highlightElem 을 호출 : 나처럼, 당신은 이전에 그들을 밖으로 시도하지 않은 경우, 나는 그들에게 소용돌이를 제공하는 것이 좋습니다. 구성 개체의 모양은 모든 속성과 같습니다. 또한 API는 곧 접두사 해제됩니다. 돌연변이 이벤트를 제거하려면 돌연변이 이벤트를 사용하면 오류 콘솔에서 `더 이상 사용되지 않는` 경고가 발생합니다. 한 가지 는 나를 버그 : 왜 속성이 입력 필드에서 “확인”을 변경하지 않습니다 추적되지 않습니다? 믿거나 말거나, 브라우저가 로드하기 시작하기 전에 img 태그의 src를 교환하는 것이 실제로 가능하다. 페이지의 HTML 소스를 변경하지 않고 이미지를 최적화하는 데 사용할 수 있습니다. 이 코드는 FireSize 서비스를 사용하여 실제 최적화를 처리합니다.

이것은 클래스 특성을 제거하여 발생하는 돌연변이입니다. 예를 들어, 텍스트 자식 요소가 있는 일종의 div 요소가 있다고 가정해 보겠습니다.

Comments are closed