const patch = (n1, n2) => {
    if(n1.tag !== n2.tag) {
      const n1ElParent = n1.el.parentElement;
      n1ElParent.removeChild(n1.el);
      mount(n2, n1ElParent)
    } else {
      // 取出 element 對象，并且在 n2 中進行保存
      const el = n1.el = n2.el
      // 為了獲取 value
      const oldProps = n1.props || []
      const newProps = n2.props || []
      // 遍歷新對象
      for(const key in newProps) {
        const oldValue = oldProps[key]
        const newValue = newProps[key]
        if(oldValue != newValue) {
          if(key.startsWith("on")) {
            el.addEventListener(key.slice(2).toLowerCase(), newValue);
          } else {
            el.setAttribute(key, newValue);
          }
        }
      }
      // 刪除舊的 props
      for(const key in oldProps) {
        if(key.startsWith("on")) {
          const value = oldProps[key];
          // removeEventListener(type, listener)
          // type ==> 一個字符串，表示需要移除的事件類型 ｜ listener ==> 需要從目標事件中移除的事件處理函數。
          el.removeEventListener(key.slice(2).toLowerCase(), value)
        } 
        if(!(key in newProps)) {
          el.removeAttribute(key)
        }
      }
      // 3. 處理children
      const oldChildren = n1.children || []
      const newChildren = n2.children || []
      // 如果新的 node 的 children 只是一個字符串，那直接覆蓋就可以了
      if (typeof newChildren === 'string') {
        // 如果舊的也是字符串，那就判斷一下是不是一樣的，然后覆蓋一下
        if (typeof oldChildren === 'string') {
          if (newChildren != oldChildren) {
            el.textContent = newChildren
          }
        } else {
          // 如果新的是很多很多東西，我直接覆蓋就可以了
          el.innerHTML = newChildren
        }
      } else {
        // 這種情況新的 node 并不是字符串，是數組啥的
        // 然后判斷一下舊的的情況
        // 如果是字符串
        if(typeof oldChildren === 'string') {
          el.innerHTML = ""
          newChildren.forEach((item) => {
            mount(item, el)
          })
        } else {
          // 如果都不是字符串的話
          // 拿到共同長度
          const commonLength = Math.min(oldChildren.length, newChildren.length)
          for(let i=0;i<commonLength;i++) {
            patch(oldChildren[i], newChildren[i])
          }
          // 如果新的節(jié)點的子節(jié)點多一些的話，那就全部掛載上去
          if(newChildren.length > oldChildren.length) {
            newChildren.slice(commonLength).forEach((item) => {
              mount(item, el)
            })
          }
          // 如果舊的節(jié)點的子節(jié)點多一些，那就一個個刪除！
          if(newChildren.length > oldChildren.length) {
            oldChildren.slice(commonLength).forEach((item) => {
              el.removeChild(item)
            })
          }
        }
      }
    }
  }

if (j < lastIndex) {
  // 進行 patch 操作
} else {
  lastIndex = i
}

function patchKeyedChildren(n1, n2, container) { 
    const newChildren = n2.children
    const oldChildren = n1.children
    // 更新相同的前置節(jié)點
    // 省略部分代碼
    // 更新相同的后置節(jié)點
    // 省略部分代碼
    if (j > oldEnd && j <= newEnd) { 
        // 省略部分代碼 
    } else if (j > newEnd && j <= oldEnd) { 
        // 省略部分代碼 
    } else {
        // 增加 else 分支來處理非理想情況
    }
}