【影迷联萌源码】【美食分享源码】【beansdb源码分析】15源码
1.Loader源码分析-Vue Loader v15
2.vue-router源码三、源码理解Vue-router中的源码Matcher
3.FREE SOLO - 自己动手实现Raft - 15 - leveldb源码分析与调试-1
Loader源码分析-Vue Loader v15
vue-loader 是什么
简单来说,vue-loader 的源码作用是将 .Vue 文件编译成 .js 文件,这样就可以在浏览器中运行,源码同时也可以在 node 环境中使用 vue-server-render 进行运行。源码
vue-loader 的源码影迷联萌源码改动
相较于之前的版本,vue-loader 进行了许多重要的源码改动,具体细节可以参考官方的源码迁移指南。
vue-loader 的源码编译过程
vue-loader 的处理流程可以大致分为以下几个部分:
vue-loader 入口函数
vue-loader 的入口代码并不多,我将入口函数的源码流程绘制了一个简单的 UML 图,通过这个图可以快速对流程有一个初步的源码了解。
vue-loader 入口函数主要做了以下几件事:
通过上面的源码 UML 图可以看出,.vue 文件初次编译时会走生成 code 的源码流程,那么生成的源码 code 究竟是什么呢?
通过调试 vue-loader,将 code 打印出来,源码仔细观察图中红色框中的美食分享源码部分。
可以发现在几句 import 中,都是从 source.vue 获取对象,并且路径上携带了参数,这些参数就是 resourceQuery,type 有三种不同类型,分别是 template | script | styles。
这些 import 会继续触发新一轮的 vue-loader 执行,于是接下来就到了途中 resourceQuery 有 type 的情况。
下面是进行了适当删减后的源码,保留了上述涉及到的代码,对代码本身感兴趣的可以浏览。
parse .vue 组件解析
parse 方法内部处理了 vue SFC 文件,前面提到过,编译的方法默认是通过 vue-template-compiler 处理。
主要是beansdb源码分析通过 compiler.parseComponent 函数对 .vue 文件进行编译。
那么 vue-template-compiler 究竟是什么呢?
在了解 vue-template-compiler 之前,我对 vue 的编译过程有些了解,既然它们都是处理 vue SFC 文件,那么它们会不会是同一份代码呢?抱着疑问的态度,我们先看看 vue-template-compiler 的 readme.md。
This package is auto-generated. For pull requests please see src/platforms/web/entry-compiler.js.
在 readme.md 中可以看到官方对它的说明,实际上 vue-template-compiler 是一份自动生成的代码,它本质就是 vue 中的 sfc/parse。
但今天的主角并不是 vue-template-compiler,也不是 sfc/parse,我会在后面的篇章中对 vue build 的过程做一个详细的解读。
parse 流程 vue-loader 推导策略
在 vue-loader 入口函数分析中已经可以了解到,入口函数最终会生成一个 code,这个 code 包含了几个 import 语句,import 语句都含有 vue 标识并且标明了不同的9贝壳 源码分块类型。
这些 import 语句会被 VueLoaderPlugin 捕捉并做推导策略处理。
VueLoaderPlugin
老规矩,先来看 VueLoaderPlugin 的代码。
代码删减后及其简单,就一件事:注入 pitcher-loader,用于处理 vue 分块 loader 推导。
pitcher-loader
VueLoaderPlugin 的主要作用就是注入 pitcher-loader,由此可知,实际处理推导过程的是 pitcher-loader,VueLoaderPlugin 只不过是一个 loader 的注入器。
那么 pitcher-loader 是怎么做 loader 推导的呢?
前面提到入口函数生成的 code,code 中包含 import 语句。
这些 import 语句会触发 pitcher-loader,pitcher 根据 resourceQuery 来区分不同块,并生成不同的网店 交易 源码 loader request。
loader 推导流程总结
把上述过程汇聚成一张 UML 图,通过这张图可以对整个流程有一个清晰的认识。
vue-loader 的整体过程可以划分为以下几个部分:
vue-router源码三、理解Vue-router中的Matcher
在深入探究vue-router的内部机制时,我们关注的重点是Matcher的实现。这个系列文章基于vue-router v4.0.的源码,如果你尚未熟悉vue-router的基本用法,建议先通过官网学习。
Matcher在vue-router中的角色至关重要,它是每个定义路由的转换器,负责路由的创建、修改和删除。createRouter函数通过createRouterMatcher生成Matcher,它接收路由表routes和全局选项globalOptions作为输入。
在createRouterMatcher中,首先创建matchers和matcherMap来存储处理后的RouteRecordMatcher。遍历routes,调用addRoute方法对每个路由进行处理。addRoute处理新路由时,会标准化路由信息,如果新路由是别名,则将其关联到原始记录的aliasOf属性。
addRoute还会处理路由的别名,生成新的matcher,并递归处理子路由。最后,它返回一个删除原始matcher的方法。createRouteRecordMatcher是addRoute的重要部分,它根据token数组(如/:id(\\d+)new)生成正则表达式和解析器。
token是解析路径的关键,它定义了路径的结构,包括静态部分和动态参数。tokenizePath函数通过有限状态机将路径转换成token数组。tokensToParser则根据token构建正则表达式和处理函数,用于解析和生成路径。
createRouteRecordMatcher利用上述工具,构建最终的matcher,包含了路径信息、动态参数处理、权重计算等功能。Matcher的存储机制也值得注意,matchers数组按照权重排序,而matcherMap则只保存原始路由的记录,便于按名称查询。
总的来说,Matcher是vue-router实现路由匹配和管理的核心组件,它通过token数组和相关函数,实现了路由的高效管理和解析。
FREE SOLO - 自己动手实现Raft - - leveldb源码分析与调试-1
leveldb 是由 Google 基础架构工程师 Jeff Dean 所设计的,是一种高效、可靠的键值对存储系统。它基于LSM(Log-Structured Merge)存储引擎,代码简洁精炼,非常适合深入学习与理解。leveldb 不仅可以作为一个简单的键值对引擎使用,而且内部组件如LRU Cache也具有独立的实用性,还能在此基础上封装出其他操作接口,例如vraft中的raftlog和metadata等。
通过理解leveldb,能够对后续学习如rocksdb等更高级的数据库引擎提供坚实基础。本文旨在从状态机的角度解析leveldb,帮助读者深入理解其内部工作原理。
在leveldb中,关键状态包括但不限于内存、磁盘状态以及LRU Cache状态。内存数据与磁盘数据的交互是leveldb的核心,用户的键值对数据通过日志写入到memtable,然后通过immutable memtable最终到达磁盘上的sorted table文件,这些文件按照级别(level)从0到6逐级存储。通过在关键时刻添加ToJson函数,可以记录这些状态的变化,便于分析。
LRU Cache在leveldb中的实现同样值得深入研究。它作为一种缓存机制,有助于优化数据访问效率。通过在LRU Cache中添加ToJson函数并打印状态,可以直观地观察其内部结构和状态的动态变化。
为了更好地理解leveldb,本文将重点分析关键数据结构,并通过观察不同动作导致的状态变化,来深入探究leveldb的内部机制。在后续文章中,将详细展示leveldb内部状态的转换过程,以帮助读者掌握其核心工作原理。