为了方便调试，最近想把项目中的代码加一下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的原理并且输出相关知识点！
喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
