DOM의 차이 만 바꾸기

Question

DOM에 뷰를 렌더링하는 데이터 모델과 많은 렌더링 메소드가 있습니다. 현재 데이터가 변경되면 해당 메소드로 DOM을 다시 렌더링합니다. 그것은 잘 작동합니다. 이제 내가 원하는 것은 전체 DOM을 다시 렌더링하지 않고 현재 DOM을 렌더링 메서드의 출력과 비교하고 차이점 만 바꾸는 것입니다. 왜 내가 그걸 필요로하니? 애니메이션을 부드럽게 만들어 전체 DOM을 바꿀 수는 없지만 차이 만 바꾸려면 CSS 전환을 원합니다.

특정 변경 사항을 확인하지 않고이 작업을 진행할 때까지 기다릴 수 없습니다. 나는 그것을 추상적으로 만들고 싶다.

Answer 1

좋아, 내가 힘들었지 만 ... 누군가가 좀 더 우아한 해결책을 가지고 있다면, 그가 그것을 공유한다면 기쁠 것입니다! :-)

function applyChanges(source, destination) { 

    var srcAttributes = source[0].attributes; 
    var dstAttributes = destination[0].attributes; 

    for (var i = 0; i < dstAttributes.length; i++) { 
     if (typeof srcAttributes[dstAttributes[i].nodeName] === "undefined") { 
      destination.removeAttr(dstAttributes[i].nodeName); 
     } 
    } 

    for (var i = 0; i < srcAttributes.length; i++) { 
     if (typeof dstAttributes[srcAttributes[i].nodeName] === "undefined" || srcAttributes[srcAttributes[i].nodeName].nodeValue != dstAttributes[srcAttributes[i].nodeName].nodeValue) { 
      $(destination).attr(srcAttributes[i].nodeName, srcAttributes[i].nodeValue); 
     } 
    } 

    if (destination[0].children.length != source[0].children.length) { 
     destination.html(source.html()); 
     return; 
    } 

    for (var i = 0; i < source[0].children.length; i++) { 
     var srcChild = source[0].children[i]; 
     var dstChild = destination[0].children[i]; 

     if ($(srcChild).outerHtml() != $(dstChild).outerHtml()) { 
      applyChanges($(srcChild), $(dstChild)); 
     } 
    } 

    if (destination.html() != source.html()) { 
     destination.html(source.html()); 
    } 
}