关于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-vuecd /petite-vuenpm 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.tsexport { createApp } from './app'...import { createApp } from './app'let sif ((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 contextconst ctx = createContext()if (initialData) {  ctx.scope = reactive(initialData)}// global internal helpersctx.scope.$s = toDisplayStringctx.scope.$nextTick = nextTickctx.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 branchlet elseEl: Element | nulllet elseExp: string | null
```
Comment 接口代表标签（markup）之间的文本符号（textual notations）。只管它通常不会显示进去，然而在查看源码时能够看到它们。在 HTML 和 XML 里，正文（Comments）为 '' 之间的内容。在 XML 里，正文中不能呈现字符序列 '--'。

接着创立elseEl和elseExp的变量，并且循环遍历收集了所有的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.firstChildwhile (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-ELEMENT2-ATTRIBUTE3-TEXT4-CDATA5-ENTITY REFERENCE6-ENTITY7-PI (processing instruction)8-COMMENT9-DOCUMENT10-DOCUMENT TYPE11-DOCUMENT FRAGMENT12-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 - 公众号：前端巅峰