为了方便调试，最近想把项目中的代码加一下sourceMap，所以就去研究了一下，在研究的过程中发现sourceMap使用了一种叫base64-vlq的编码方式，那么这篇文章我们就先来聊一聊这种编码方式的原理，看看它和base64有什么样的关系？

如果你还不了解base64编码的原理，可以先看一下我之前的一篇文章详解base64和latin1的编码原理

base64-vlq的简介

编码的目的大多数是为了安全或者压缩传输大小，这种编码方式就是借用Base64的字符表去表示各种数值！

base64-vlq的原理

我们直接看一个例子，这样比总结方式更加直观。

现在把1024用base64-vql编码方式表示！

1、首先我们把1024转化为二进制——1 00000 00000，一共11位；

图1

2、在最右边补充符号位，因为1024是正数，所以最右边补充一个0——10 00000 00000，此时一共12位；

3、现在从最右边向左边每隔5位划分为一组，不足五位的左边补充0——00010 00000 00000，一共15位；

4、将组的位置顺序颠倒一下——00000 00000 00010；

5、在最左边为每组补充一位，如果这组是这个数值的最后一组，那么就补充0，前面的组都补充1——100000 100000 000010（32 32 2），一共18位；

好了，现在就可以把它转化为base64了，我们把base64字符表再贴上来，如下：

图2

6、对应一下图2中base64字符表，最后转为ggC。

接下来我们再看一个负数的例子，把-168用这种编码方式表示！

1、先把168转化为二进制——10101000；

图3

2、在最右边补充符号位，现在是负数，所以要补充1——1010 10001，一共9位；

3、分组并且把不足五位的补充0——01010 10001，一共10位；

4、组的位置颠倒顺序——10001 01010；

5、在最左边补充连续位——110001 001010（49 10），一共12位；

6、对照base64字母表，最后编码为xK。

如果你看完上面两个例子，我相信你稍微加以思考就能掌握原理了。如果在实际转换中不确定结果是否正确，可以在http://murzwin.com/base64vlq.html这个工具上加以验证！

总结

在研究sourceMap原理的过程中发现原来还有这样的编码，不过编码方式还是非常容易掌握的，后面我会继续研究sourceMap的原理并且输出相关知识点！

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！