乐趣区

关于javascript:尤雨溪的5KB-petitevue源码解析

写在结尾

  • 近期尤雨溪公布了 5kb 的 petite-vue, 好奇的我,clone 了他的源码,给大家解析一波。
  • 最近因为工作事件多,所以放缓了原创的脚步!大家体谅
  • 想看我往期手写源码 + 各种源码解析的能够关注我公众号看我的GitHub, 基本上前端的框架源码都有解析过

正式开始

  • petite-vue是只有 5kb 的 vue, 咱们先找到仓库,克隆下来

    https://github.com/vuejs/petite-vue
  • 克隆下来后发现,用的是 vite + petite-vue + 多页面模式启动的
  • 启动命令:

    git clone https://github.com/vuejs/petite-vue
    cd /petite-vue
    npm i 
    npm run dev
    
  • 而后关上 http://localhost:3000/ 即可看到页面:


保姆式教学

  • 我的项目曾经启动了,接下来咱们先解析下我的项目入口, 因为应用的构建工具是 vite, 从根目录下的index.html 人口找起:

    <h2>Examples</h2>
    <ul>
    <li><a href="/examples/todomvc.html">TodoMVC</a></li>
    <li><a href="/examples/commits.html">Commits</a></li>
    <li><a href="/examples/grid.html">Grid</a></li>
    <li><a href="/examples/markdown.html">Markdown</a></li>
    <li><a href="/examples/svg.html">SVG</a></li>
    <li><a href="/examples/tree.html">Tree</a></li>
    </ul>
    
    <h2>Tests</h2>
    <ul>
    <li><a href="/tests/scope.html">v-scope</a></li>
    <li><a href="/tests/effect.html">v-effect</a></li>
    <li><a href="/tests/bind.html">v-bind</a></li>
    <li><a href="/tests/on.html">v-on</a></li>
    <li><a href="/tests/if.html">v-if</a></li>
    <li><a href="/tests/for.html">v-for</a></li>
    <li><a href="/tests/model.html">v-model</a></li>
    <li><a href="/tests/once.html">v-once</a></li>
    <li><a href="/tests/multi-mount.html">Multi mount</a></li>
    </ul>
    
    <style>
    a {font-size: 18px;}
    </style>
  • 这就是多页面模式 +vue+vite 的一个演示我的项目,咱们找到一个简略的演示页commits:

    <script type="module">
    import {createApp, reactive} from '../src'
    
    const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
    
    createApp({branches: ['master', 'v2-compat'],
      currentBranch: 'master',
      commits: null,
    
      truncate(v) {const newline = v.indexOf('\n')
        return newline > 0 ? v.slice(0, newline) : v
      },
    
      formatDate(v) {return v.replace(/T|Z/g, ' ')
      },
    
      fetchData() {fetch(`${API_URL}${this.currentBranch}`)
          .then((res) => res.json())
          .then((data) => {this.commits = data})
      }
    }).mount()
    </script>
    
    <div v-scope v-effect="fetchData()">
    <h1>Latest Vue.js Commits</h1>
    <template v-for="branch in branches">
      <input
        type="radio"
        :id="branch"
        :value="branch"
        name="branch"
        v-model="currentBranch"
      />
      <label :for="branch">{{branch}}</label>
    </template>
    <p>vuejs/vue@{{currentBranch}}</p>
    <ul>
      <li v-for="{html_url, sha, author, commit} in commits">
        <a :href="html_url" target="_blank" class="commit"
          >{{sha.slice(0, 7) }}</a
        >
        - <span class="message">{{truncate(commit.message) }}</span><br />
        by
        <span class="author"
          ><a :href="author.html_url" target="_blank"
            >{{commit.author.name}}</a
          ></span
        >
        at <span class="date">{{formatDate(commit.author.date) }}</span>
      </li>
    </ul>
    </div>
    
    <style>
    body {font-family: 'Helvetica', Arial, sans-serif;}
    a {
      text-decoration: none;
      color: #f66;
    }
    li {
      line-height: 1.5em;
      margin-bottom: 20px;
    }
    .author, .date {font-weight: bold;}
    </style>
    
  • 能够看到页面顶部引入了

    import {createApp, reactive} from '../src'

    开始从源码启动函数动手

  • 启动函数为createApp, 找到源码:

    //index.ts
    export {createApp} from './app'
    ...
    import {createApp} from './app'
    
    let s
    if ((s = document.currentScript) && s.hasAttribute('init')) {createApp().mount()}
    

    Document.currentScript 属性返回以后正在运行的脚本所属的 <script> 元素。调用此属性的脚本不能是 JavaScript 模块,模块该当应用 import.meta 对象。

  • 下面这段代码意思是,创立 s 变量记录以后运行的脚本元素,如果存在制订属性init,那么就调用 createApp 和 mount 办法.
  • 然而这里我的项目外面是被动调用了裸露的 createApp 办法,咱们去看看 createApp 这个办法的源码,有大略 80 行代码
import {reactive} from '@vue/reactivity'
import {Block} from './block'
import {Directive} from './directives'
import {createContext} from './context'
import {toDisplayString} from './directives/text'
import {nextTick} from './scheduler'

export default function createApp(initialData?: any){...}
  • createApp 办法接管一个初始数据,能够是任意类型,也能够不传。这个办法是入口函数,依赖的函数也比拟多,咱们要静下心来。这个函数进来就搞了一堆货色

    createApp(initialData?: any){
     // root context
    const ctx = createContext()
    if (initialData) {ctx.scope = reactive(initialData)
    }
    
    // global internal helpers
    ctx.scope.$s = toDisplayString
    ctx.scope.$nextTick = nextTick
    ctx.scope.$refs = Object.create(null)
    
    let rootBlocks: Block[]}
  • 下面这段代码,是创立了一个 ctx 上下文对象,并且给它下面赋予了很多属性和办法。而后提供给 createApp 返回的对象应用
  • createContext创立上下文:

    export const createContext = (parent?: Context): Context => {
    const ctx: Context = {
      ...parent,
      scope: parent ? parent.scope : reactive({}),
      dirs: parent ? parent.dirs : {},
      effects: [],
      blocks: [],
      cleanups: [],
      effect: (fn) => {if (inOnce) {queueJob(fn)
          return fn as any
        }
        const e: ReactiveEffect = rawEffect(fn, {scheduler: () => queueJob(e)
        })
        ctx.effects.push(e)
        return e
      }
    }
    return ctx
    }
    
  • 依据传入的父对象,做一个简略的继承,而后返回一个新的 ctx 对象。

我一开始差点掉进误区,我写这篇文章,是想让大家明确简略的 vue 原理,像上次我写的掘金编辑器源码解析,写得太细,太累了。这次简化下,让大家都能懂,下面这些货色不重要。这个 createApp 函数返回了一个对象:

return {directive(name: string, def?: Directive) {if (def) {ctx.dirs[name] = def
        return this
      } else {return ctx.dirs[name]
      }
    },
mount(el?: string | Element | null){}...,
unmount(){}...
}
  • 对象上有三个办法,例如 directive 指令就会用到 ctx 的属性和办法。所以下面一开始搞一大堆货色挂载到 ctx 上,是为了给上面的办法应用
  • 重点看 mount 办法:

       mount(el?: string | Element | null) {if (typeof el === 'string') {el = document.querySelector(el)
          if (!el) {
            import.meta.env.DEV &&
              console.error(`selector ${el} has no matching element.`)
            return
          }
        }
       ...
      
       }
  • 首先会判断如果传入的是 string, 那么就回去找这个节点,否则就会找document

    el = el || document.documentElement
    • 定义roots, 一个节点数组

      let roots: Element[]
      if (el.hasAttribute('v-scope')) {roots = [el]
      } else {roots = [...el.querySelectorAll(`[v-scope]`)].filter((root) => !root.matches(`[v-scope] [v-scope]`)
        )
      }
      if (!roots.length) {roots = [el]
      }
  • 如果有 v-scope 这个属性,就把 el 存入数组中,赋值给 roots, 否则就要去这个el 上面找到所以的带 v-scope 属性的节点,而后筛选出这些带 v-scope 属性上面的不带 v-scope 属性的节点, 塞入 roots 数组

    此时如果 roots 还是为空,那么就把 el 放进去。
    这里在开发模式下有个正告:Mounting on documentElement - this is non-optimal as petite-vue , 意思是用 document 不是最佳抉择。

  • 在把 roots 处理完毕后,开始口头。

    rootBlocks = roots.map((el) => new Block(el, ctx, true))
        // remove all v-cloak after mount
        ;[el, ...el.querySelectorAll(`[v-cloak]`)].forEach((el) =>
          el.removeAttribute('v-cloak')
        )
  • 这个 Block 构造函数是重点,将节点和上下文传入当前,里面就只是去除掉 ’v-cloak’ 属性,这个 mount 函数就调用完结了,那么怎么原理就暗藏在 Block 外面。

这里带着一个问题,咱们目前仅仅拿到了 el 这个 dom 节点,然而 vue 外面都是模板语法,那些模板语法是怎么转化成真的 dom 呢?

  • Block 原来不是一个函数,而是一个 class.

  • 在 constructor 构造函数中能够看到

    constructor(template: Element, parentCtx: Context, isRoot = false) {
      this.isFragment = template instanceof HTMLTemplateElement
    
      if (isRoot) {this.template = template} else if (this.isFragment) {this.template = (template as HTMLTemplateElement).content.cloneNode(true) as DocumentFragment
      } else {this.template = template.cloneNode(true) as Element
      }
    
      if (isRoot) {this.ctx = parentCtx} else {
        // create child context
        this.parentCtx = parentCtx
        parentCtx.blocks.push(this)
        this.ctx = createContext(parentCtx)
      }
    
      walk(this.template, this.ctx)
    }
  • 以上代码能够分为三个逻辑

    • 创立模板 template(应用 clone 节点的形式,因为dom 节点获取到当前是一个对象,所以做了一层 clone)
    • 如果不是根节点就递归式的继承 ctx 上下文
    • 在解决完 ctx 和 Template 后,调用 walk 函数
  • walk函数解析:

  • 会先依据 nodetype 进行判断,而后做不同的解决
  • 如果是一个 element 节点, 就要解决不同的指令,例如v-if

  • 这里有一个工具函数要先看看

    export const checkAttr = (el: Element, name: string): string | null => {const val = el.getAttribute(name)
    if (val != null) el.removeAttribute(name)
    return val
    }
  • 这个函数意思是检测下这个节点是否蕴含 v-xx 的属性,而后返回这个后果并且删除这个属性
  • v-if 举例,当判断这个节点有 v-if 属性后,那么就去调用办法解决它,并且删除掉这个属性(作为标识曾经解决过了)

    这里本了我想 12 点前睡觉的,他人通知我只有 5kb, 我想着找个最简略的指令解析下,后果每个指令代码都有一百多行,今晚加班到九点多,刚把微前端革新的上了生产,还是想着保持下给大家写完吧。当初曾经凌晨了

  • v-if处理函数大略 60 行

    export const _if = (el: Element, exp: string, ctx: Context) => {...}
  • 首先_if 函数先拿到 el 节点和 exp 这个 v -if 的值,以及 ctx 上下文对象

    if (import.meta.env.DEV && !exp.trim()) {console.warn(`v-if expression cannot be empty.`)
    }
    
  • 如果为空的话报出正告
  • 而后拿到 el 节点的父节点,并且依据这个 exp 的值创立一个 comment 正文节点(暂存)并且插入到 el 之前,同时创立一个 branches 数组,贮存 exp 和 el

     const parent = el.parentElement!
    const anchor = new Comment('v-if')
    parent.insertBefore(anchor, el)
    
    const branches: Branch[] = [
      {
        exp,
        el
      }
    ]
    
    // locate else branch
    let elseEl: Element | null
    let elseExp: string | null

    Comment 接口代表标签(markup)之间的文本符号(textual notations)。只管它通常不会显示进去,然而在查看源码时能够看到它们。在 HTML 和 XML 里,正文(Comments)为 '<!--' 和 '-->' 之间的内容。在 XML 里,正文中不能呈现字符序列 ‘–‘。

  • 接着创立 elseElelseExp的变量,并且循环遍历收集了所有的 else 分支,并且存储在了 branches 外面

    while ((elseEl = el.nextElementSibling)) {
      elseExp = null
      if (checkAttr(elseEl, 'v-else') === '' ||
        (elseExp = checkAttr(elseEl, 'v-else-if'))
      ) {parent.removeChild(elseEl)
        branches.push({exp: elseExp, el: elseEl})
      } else {break}
    }

    这样 Branches 外面就有了 v -if 所有的分支啦, 这里能够看成是一个树的遍历(广度优先搜寻)

  • 接下来依据副作用函数的触发,每次都去 branches 外面遍历寻找到须要激活的那个分支,将节点插入到 parentNode 中,并且返回 nextNode 即可实现 v-if 的成果

    这里因为都是 html, 给咱们省去了虚构 dom 这些货色, 可是下面仅仅是解决单个节点,如果是深层级的 dom 节点,就要用到前面的深度优先搜寻了

     // process children first before self attrs
      walkChildren(el, ctx)
    
    
    const walkChildren = (node: Element | DocumentFragment, ctx: Context) => {
    let child = node.firstChild
    while (child) {child = walk(child, ctx) || child.nextSibling
    }
    }
    
  • 当节点上没有 v-if 之类的属性时,这个时候就去取他们的第一个子节点去做上述的动作,匹配每个 v-if v-for 之类的指令
如果是文本节点
else if (type === 3) {
    // Text
    const data = (node as Text).data
    if (data.includes('{{')) {let segments: string[] = []
      let lastIndex = 0
      let match
      while ((match = interpolationRE.exec(data))) {const leading = data.slice(lastIndex, match.index)
        if (leading) segments.push(JSON.stringify(leading))
        segments.push(`$s(${match[1]})`)
        lastIndex = match.index + match[0].length
      }
      if (lastIndex < data.length) {segments.push(JSON.stringify(data.slice(lastIndex)))
      }
      applyDirective(node, text, segments.join('+'), ctx)
    }

这个中央很经典,是通过正则匹配,而后一系列操作匹配,最终返回了一个文本字符串。这个代码是挺精华的,然而因为工夫关系这里不细讲了

  • applyDirective函数

    const applyDirective = (
    el: Node,
    dir: Directive<any>,
    exp: string,
    ctx: Context,
    arg?: string,
    modifiers?: Record<string, true>
    ) => {const get = (e = exp) => evaluate(ctx.scope, e, el)
    const cleanup = dir({
      el,
      get,
      effect: ctx.effect,
      ctx,
      exp,
      arg,
      modifiers
    })
    if (cleanup) {ctx.cleanups.push(cleanup)
    }
    }
  • 接下来 nodeType 是 11 意味着是一个 Fragment 节点,那么间接从它的第一个子节点开始即可

    } else if (type === 11) {walkChildren(node as DocumentFragment, ctx)
    }
nodeType 说 明
此属性只读且传回一个数值。无效的数值合乎以下的型别:1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION

梳理总结

  • 拉取代码
  • 启动我的项目
  • 找到入口 createApp 函数
  • 定义 ctx 以及层层继承
  • 发现 block 办法
  • 依据节点是 element 还是 text 离开做解决
  • 如果是 text 就去通过正则匹配,拿到数据返回字符串
  • 如果是 element 就去做一个递归解决,解析所有的 v-if 等模板语法,返回实在的节点

    这里所有的 dom 节点扭转,都是间接通过 js 操作 dom

乏味的源码补充

  • 这里的 nextTick 实现,是间接通过promise.then

    const p = Promise.resolve()
    
    export const nextTick = (fn: () => void) => p.then(fn)
    

    写在最初

  • 有点晚了,写到 1 点多人不知; 鬼不觉,如果感觉写得不错,帮我点波再看 / 关注 / 赞吧
  • 如果你想看往期的源码剖析文章能够关注我的 gitHub – 公众号: 前端巅峰
退出移动版