자신의 가상 DOM 쓰기 (3)

DOM 변 화 를 어떻게 감지 합 니까?
이제 가상 DOM 하 나 를 진실 한 DOM 으로 만 들 수 있 으 니 두 개의 가상 DOM 을 어떻게 비교 하 는 지 생각해 볼 때 가 되 었 다.우 리 는 두 개의 가상 DOM 트 리 를 비교 한 다음 에 수요 에 따라 신 구 를 실제 DOM 에 반영 하 는 알고리즘 이 필요 하 다.

먼저 해 야 할 일 은 하나의 changed 함 수 를 써 서 두 node 가 같은 지 (변화 가 있 는 지) 를 검사 하고 변화 가 있 으 면 true 로 돌아 가 며 변화 가 없 으 면 false 로 돌아 가 는 것 이다.

function changed(node1,node2){
    return typeof node1 !== typeof node2 || typeof node1 ==='string' && node1!==node2 || node1.type !==node2.type;
}

만약 에 이런 두 개의 가상 DOM 이 있다 고 가정 하면:

const a = (
  

    
item 1
    
item 2
  
);

const b =(
  

    
item 1
    click me
  
)

이 두 가상 DOM 이 changed() 방법 으로 판단 한다 면 분명 다 를 것 이다. 그렇다면 현재 의 목 표 는 어디 가 다른 지 찾 는 것 이다.
위의 두 가상 DOM 을 대조 하여 먼저 두뇌 의 사 고 를 정리 합 니 다.
a. 먼저 얼 노드 를 비교 하고 두 노드 가 같다.b. children 요 소 를 비교 하면 첫 번 째 children 요 소 는 li 요소 c 입 니 다. 이 li 요 소 를 비교 하면 li 요소 의 요소 유형 이 같 습 니 다.e. 얼 의 children 두 번 째 요 소 를 비교 한 결과 a 는 li 이 고 b 는 button 이 며 다른 것 을 발견 했다.
이것 은 두뇌 의 사고 이다. 만약 에 이 절 차 를 프로그램 코드 로 바 꾸 면 분명 하고 재 귀적 인 사상 이 필요 하 다.그러나 다른 것 을 찾 는 것 은 첫 번 째 단계 이 고, 두 번 째 단 계 는 다른 것 을 찾 은 후에 다른 점 을 상응하는 변 화 를 주 는 것 이다.
그래서 저 는 updateElement() 방법 을 썼 습 니 다. 이 방법 은 두 개의 가상 DOM 을 가지 고 처리 할 것 입 니 다. 먼저 두 개의 가상 DOM 이 다른 곳 을 찾 은 다음 에 위 치 를 정 하고 실제 DOM 의 생 성과 교 체 를 할 것 입 니 다.

function updateElement($parent,newNode,oldNode,index=0){
    if(changed(newNode,oldNode)){//    node       ，      
        $parent.replaceChild(createElement(newNode),$parent.childNodes[index]);
    }else if(newNode.type){//           type  ，    ，   textNode，    
        for(let i=0;i

위의 이 코드 는 논리 적 으로 이해 하기 어렵 습 니 다. 가능 하 다 면 여러분 스스로 깊이 생각해 보 세 요. 이 코드 는 제 가 한 시간 넘 게 써 서 쓴 것 입 니 다.
지금 은 순조롭게 운행 할 수 있 습 니 다. 비록 결함 이 있 지만 가장 간단 한 가상 DOM 원 리 는 조금 알 수 있 습 니 다. 제 온라인 코드 를 보 세 요.
총결산
이 절차 에서 가장 배 울 점 은 가상 DOM 의 실질 과 전체적인 사고 입 니 다. 여러분 들 이 이런 느낌 을 받 을 수 있 을 지 모 르 겠 지만 사실은 가상 DOM 은 전형 적 인 데이터 구조 + 알고리즘 의 실현 입 니 다.저도 최근 에 깊 은 감명 을 받 았 습 니 다. 사실은 현재 의 전단 구조 로 볼 때 성숙 한 데이터 구조 + 알고리즘 의 실현 이 고 소프트웨어 공학 도 추가 되 었 습 니 다.이것 도 제 가 최근 에 겪 은 병목 이기 때문에 데이터 구조 와 알고리즘 을 열심히 배 울 생각 입 니 다.토론 을 환영 합 니 다.