皮皮网

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 处理。

       主要是大漠插件破解源码通过 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 标识并且标明了不同的仿站长源码模板分块类型。

       这些 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内部状态的转换过程，以帮助读者掌握其核心工作原理。