首页 > 资讯 > 前端开发 > JavaScript >vue diff算法全解析

312

分享到

vue diff算法全解析

2024-04-02 19:04:59 312人浏览薄情痞子

摘要

目录前言 Vue 更新视图 patch sameVnode patchVnodeupdateChildren 前言我们知道 Vue 使用的是虚拟 DOM 去减少对真实 DOM 的

前言

我们知道 Vue 使用的是虚拟 DOM 去减少对真实 DOM 的操作次数，来提升页面运行的效率。今天我们来看看当页面的数据改变的时候，Vue 是如何来更新 DOM 的。Vue和React在更新dom时，使用的算法基本相同，都是基于 snabbdom。当页面上的数据发生变化时，Vue 不会立即渲染。而是经过 diff 算法，判断出哪些是不需要变化的，哪些是需要变化更新的，只需要更新那些需要更新的 DOM 就可以了，这样就减少了很多不必要的 DOM 操作，大大提升了性能。 Vue就使用了这样的抽象节点VNode，它是对真实DOM的一层抽象，而不依赖某个平台，它可以是浏览器平台，也可以是weex，甚至是node平台也可以对这样一棵抽象DOM树进行创建删除修改等操作，这也为前后端同构提供了可能。

Vue 更新视图

我们知道在 Vue 1.x 中，每一个数据都对应一个 Watcher；而在 Vue 2.x 中，一个组件对应一个 Watcher，这样当我们的数据改变的时候，在 set 函数中会触发 Dep 的 notify 函数去通知 Watcher 去执行 vm._update(vm._render(), hydrating) 方法去更新视图，下面我们来看看 _update 方法


Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const restoreActiveInstance = setActiveInstance(vm)
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  
  if (!prevVnode) {
    // initial render
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false )
  } else {
    // updates
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  restoreActiveInstance()
  // update __vue__ reference
  
  if (prevEl) {
    prevEl.__vue__ = null
  }
  if (vm.$el) {
    vm.$el.__vue__ = vm
  }
  // if parent is an HOC, update its $el as well
  if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
    vm.$parent.$el = vm.$el
  }
  // updated hook is called by the scheduler to ensure that children are
  // updated in a parent's updated hook.
}

很明显，我们能看到 _update 方法会将传入的 Vnode 将老的 Vnode 进行 patch 操作。下面我们再来看看在 patch 函数中都发生了什么。

patch

patch 函数将新老两个节点进行比较，然后判断出哪些是需要修改的节点，只需要修改这些节点即可，这样可以比较高效地更新 DOM，我们先来看一下代码


return function patch (oldVnode, vnode, hydrating, removeOnly) {
  
  if (isUndef(vnode)) {
    if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    return
  }

  let isInitialPatch = false
  const insertedVnodeQueue = []

  
  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  } else {
    
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // patch existing root node
      
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      if (isRealElement) {
        // mounting to a real element
        // check if this is server-rendered content and if we can perfORM
        // a successful hydration.
        if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
          
          oldVnode.removeAttribute(SSR_ATTR)
          hydrating = true
        }
        if (isTrue(hydrating)) {
          
          if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
            
            invokeInsertHook(vnode, insertedVnodeQueue, true)
            return oldVnode
          } else if (process.env.NODE_ENV !== 'production') {
            warn(
              'The client-side rendered virtual DOM tree is not matching ' +
              'server-rendered content. This is likely caused by incorrect ' +
              'html markup, for example nesting block-level elements inside ' +
              '<p>, or missing <tbody>. Bailing hydration and performing ' +
              'full client-side render.'
            )
          }
        }
        // either not server-rendered, or hydration failed.
        // create an empty node and replace it
        
        oldVnode = emptyNodeAt(oldVnode)
      }

      // replacing existing element
      
      const oldElm = oldVnode.elm
      const parentElm = nodeOps.parentNode(oldElm)

      // create new node
      createElm(
        vnode,
        insertedVnodeQueue,
        // extremely rare edge case: do not insert if old element is in a
        // leaving transition. Only happens when combining transition +
        // keep-alive + HOCs. (#4590)
        oldElm._leaveCb ? null : parentElm,
        nodeOps.nextSibling(oldElm)
      )

      // update parent placeholder node element, recursively
      if (isDef(vnode.parent)) {
        
        let ancestor = vnode.parent
        const patchable = isPatchable(vnode)
        while (ancestor) {
          for (let i = 0; i < cbs.destroy.length; ++i) {
            cbs.destroy[i](ancestor)
          }
          ancestor.elm = vnode.elm
          if (patchable) {
            
            for (let i = 0; i < cbs.create.length; ++i) {
              cbs.create[i](emptyNode, ancestor)
            }
            // #6513
            // invoke insert hooks that may have been merged by create hooks.
            // e.g. for directives that uses the "inserted" hook.
            const insert = ancestor.data.hook.insert
            if (insert.merged) {
              // start at index 1 to avoid re-invoking component mounted hook
              for (let i = 1; i < insert.fns.length; i++) {
                insert.fns[i]()
              }
            }
          } else {
            reGISterRef(ancestor)
          }
          ancestor = ancestor.parent
        }
      }

      // destroy old node
      if (isDef(parentElm)) {
        
        removeVnodes([oldVnode], 0, 0)
      } else if (isDef(oldVnode.tag)) {
        
        invokeDestroyHook(oldVnode)
      }
    }
  }

  
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  return vnode.elm
}

Vue 的 diff 算法是将同层的节点进行比较，所以它的时间复杂度只有 O(n)，它的算法非常的高效。从代码中我们也能看出，patch 中会用 sameVnode 判断老节点和新节点是否是同一个节点，如果是的话才会进行进一步的 patchVnode，否则就会创建新的 DOM，移除旧的 DOM。

sameVnode

下面我们再来看看 sameVnode 中是如何来判定两个节点是同一个节点的。



function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

// Some browsers do not support dynamically changing type for <input>
// so they need to be treated as different nodes

function sameInputType (a, b) {
  if (a.tag !== 'input') return true
  let i
  const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
  const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
  return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}

sameVnode 通过比较两个节点的 key、tag、注释节点、数据信息是否相等来判断两个 Node 节点是否是相同节点，对 input 标签做了一个单独的判断，为了兼容不同浏览器。

patchVnode


 // diff算法 比较节点
function patchVnode (
  oldVnode,
  vnode,
  insertedVnodeQueue,
  ownerArray,
  index,
  removeOnly
) {
  
  if (oldVnode === vnode) {
    return
  }

  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // clone reused vnode
    vnode = ownerArray[index] = cloneVNode(vnode)
  }

  const elm = vnode.elm = oldVnode.elm

  if (isTrue(oldVnode.isAsyncPlaceholder)) {
    if (isDef(vnode.asyncFactory.resolved)) {
      hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
    } else {
      vnode.isAsyncPlaceholder = true
    }
    return
  }

  // reuse element for static trees.
  // note we only do this if the vnode is cloned -
  // if the new node is not cloned it means the render functions have been
  // reset by the hot-reload-api and we need to do a proper re-render.
  
  if (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
    vnode.componentInstance = oldVnode.componentInstance
    return
  }

  // 执行一些组件钩子
  
  let i
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    
    i(oldVnode, vnode)
  }

  // 查找新旧节点是否存在孩子
  const oldCh = oldVnode.children
  const ch = vnode.children

  // 属性更新
  if (isDef(data) && isPatchable(vnode)) {
    // cbs中关于属性更新的数组拿出来[attrFn, classFn, ...]
    
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }

  // 判断是否元素
  if (isUndef(vnode.text)) { 
    // 双方都有孩子
    if (isDef(oldCh) && isDef(ch)) {
      
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(ch)
      }
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      
      removeVnodes(oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    
    nodeOps.setTextContent(elm, vnode.text)
  }
  
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
}

patchVnode 的过程是这样的：

如果 oldVnode 和 Vnode 是同一个对象，那么久直接返回，不需要再更新
如果新旧VNode都是静态的，同时它们的key相同（代表同一节点），并且新的VNode是clone或者是标记了once（标记v-once属性，只渲染一次），那么只需要替换elm以及componentInstance即可。
如果vnode.text不是文本节点，新老节点均有children子节点，且新老节点的子节点不相同的时候，则对子节点进行diff操作，调用updateChildren，这个updateChildren也是diff的核心。
如果老节点没有子节点而新节点存在子节点，先清空老节点DOM的文本内容，然后为当前DOM节点加入子节点
当新节点没有子节点而老节点有子节点的时候，则移除该DOM节点的所有子节点。
当新老节点都无子节点的时候，只是文本的替换。

updateChildren

我们页面的dom是一个树状结构，上面所讲的patchVnode方法，是复用同一个dom元素，而如果新旧两个VNnode对象都有子元素，我们应该怎么去比较复用元素呢？这就是我们updateChildren方法所要做的事儿



function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  // removeOnly is a special flag used only by <transition-group>
  // to ensure removed elements stay in correct relative positions
  // during leaving transitions
  const canMove = !removeOnly

  if (process.env.NODE_ENV !== 'production') {
    checkDuplicateKeys(newCh)
  }

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

      
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          
          oldCh[idxInOld] = undefined
          
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  if (oldStartIdx > oldEndIdx) {
    
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  }
}

下面是复制其他博主的文章，觉得写的挺好的原文地址：GitHub.com/liutao/vue2…

乍一看这一块代码，可能有点儿懵。具体内容其实不复杂，我们先大体看一下整个判断流程，之后通过几个例子来详细过一下。

oldStartIdx、newStartIdx、oldEndIdx、newEndIdx都是指针，具体每一个指什么，相信大家都很明了，我们整个比较的过程，会不断的移动指针。

oldStartVnode、newStartVnode、oldEndVnode、newEndVnode与上面的指针一一对应，是它们所指向的VNode结点。

while循环在oldCh或newCh遍历结束后停止，否则会不断的执行循环流程。整个流程分为以下几种情况：

1、如果oldStartVnode未定义，则oldCh数组遍历的起始指针后移一位。


  if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
  }

注：见第七种情况，key值相同可能会置为undefined

2、如果oldEndVnode未定义，则oldCh数组遍历的起始指针前移一位。


  else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
  }

注：见第七种情况，key值相同可能会置为undefined

3、sameVnode(oldStartVnode, newStartVnode)，这里判断两个数组起始指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，然后oldCh和newCh的起始指针分别后移一位。


  else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx]
    newStartVnode = newCh[++newStartIdx]
  }

4、sameVnode(oldEndVnode, newEndVnode)，这里判断两个数组结束指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，然后oldCh和newCh的结束指针分别前移一位。


  else if (sameVnode(oldEndVnode, newEndVnode)) {
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
  }

5、sameVnode(oldStartVnode, newEndVnode)，这里判断oldCh起始指针指向的对象和newCh结束指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，因为复用的元素在newCh中是结束指针所指的元素，所以把它插入到oldEndVnode.elm的前面。最后oldCh的起始指针后移一位，newCh的起始指针分别前移一位。


  else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
  }

6、sameVnode(oldEndVnode, newStartVnode)，这里判断oldCh结束指针指向的对象和newCh起始指针所指向的对象是否可以复用。如果返回真，则先调用patchVnode方法复用dom元素并递归比较子元素，因为复用的元素在newCh中是起始指针所指的元素，所以把它插入到oldStartVnode.elm的前面。最后oldCh的结束指针前移一位，newCh的起始指针分别后移一位。


  else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
    oldEndVnode = oldCh[--oldEndIdx]
    newStartVnode = newCh[++newStartIdx]
  }

7、如果上述六种情况都不满足，则走到这里。前面的比较都是头尾组合的比较，这里的情况，稍微更加复杂一些，其实主要就是根据key值来复用元素。

① 遍历oldCh数组，找出其中有key的对象，并以key为键，索引值为value，生成新的对象oldKeyToIdx。


if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

② 查询newStartVnode是否有key值，并查找oldKeyToIdx是否有相同的key。


  idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null

③ 如果newStartVnode没有key或oldKeyToIdx没有相同的key，则调用createElm方法创建新元素，newCh的起始索引后移一位。


  if (isUndef(idxInOld)) { // New element
    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
    newStartVnode = newCh[++newStartIdx]
  }

④ elmToMove保存的是要移动的元素，如果sameVnode(elmToMove, newStartVnode)返回真，说明可以复用，这时先调用patchVnode方法复用dom元素并递归比较子元素，重置oldCh中相对于的元素为undefined，然后把当前元素插入到oldStartVnode.elm前面，newCh的起始索引后移一位。如果sameVnode(elmToMove, newStartVnode)返回假，例如tag名不同，则调用createElm方法创建新元素，newCh的起始索引后移一位。


  elmToMove = oldCh[idxInOld]
  if (sameVnode(elmToMove, newStartVnode)) {
    patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
    oldCh[idxInOld] = undefined
    canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
    newStartVnode = newCh[++newStartIdx]
  } else {
    // same key but different element. treat as new element
    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
    newStartVnode = newCh[++newStartIdx]
  }

以上就是vue diff算法的使用的详细内容，更多关于vue diff算法的资料请关注编程网其它相关文章！

--结束END--

本文标题: vue diff算法全解析

本文链接: https://lsjlt.com/news/123341.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

vue diff算法全解析

目录

前言

Vue 更新视图

patch

sameVnode

patchVnode

updateChildren

vue diff算法全解析

react diff算法源码解析

vue怎么实现diff算法

一文详解Vue 的双端 diff 算法

vue.js diff算法原理详细解析

Vue中的虚拟DOM和Diff算法实例分析

Vue的虚拟DOM和diff算法你了解吗

Vue的diff算法原理你真的了解吗

怎么深入解析Vue3中的diff 算法

简单谈谈Vue中的diff算法

Vue的diff算法原理是什么

深入浅析React中diff算法

Vue3diff算法之双端diff算法详解

react diff 算法实现思路及原理解析

vue中diff算法知识点有哪些

Vue的双端diff算法怎么实现

深入浅析Vue2中的Diff算法

react跟vue的diff算法有哪些区别

Vue 2.5中怎么实现一个Diff算法

Vue中的双端diff算法怎么应用

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式