Appearance
本文作为Vue3源码系列的开篇词,以问答形式来诠释为什么程序员要学习源码 https://vue3js.cn/
1. 为什么要学习源码
阅读优秀的代码的目的是让我们能够写出优秀的代码
其实就跟我们写作文一样,你看的高分作文越多,写出高分作文的概率就越大
大部分程序员都只会写代码(改,抄,stackoverflow
工程师,代名词: 搬砖),会阅读代码的很少,为什么呢?因为国内所有的教育,网课,培训都没有教你怎么去看代码,只教你怎么去写代码
再者基于现在的程序员工作模式(模块化开发,只需要拿到需求做自己的部分),别说看源码,甚至就连项目里的代码都懒的去看,我认识的很多程序员就是这样的,一个项目摸了两三年,你要问他项目中webpack
都干了哪些事情,他的回答是不知道,反而趾高气扬的告诉你,那些他从来都用不上,看了也没什么用,也看不懂,这里省略内心千字脏文
阅读代码其实就咱们跟阅读一本小说一样,看过玄幻小说才能说出来修仙,看过都市的才能讲出来穿越
阅读主要目的是为了帮助我们积累素材,不要书到用时方恨少,看到美女我们应该能有一万种词语去形容,如气若幽兰,美艳不可方物,一笑倾城,再笑倾国,世间尤物,而不是简短的几个字,我艹,美女!
- 那么为什么非要看源码呢?
前面有提到优秀的高分作文看多了你才能写出来高分作文,你天天看着0分作文,那么写出来的大概率也自然是0分作文,什么样的作文算是高分呢?这个很好区分,前期从众就好
不给自己设限,不要让你周围人的技术上限成为你的上限
很多时候,人会潜意识给自己设限
井底之蛙是大家应该都熟悉的故事,大多数时候我们会给自己画一个圈,将同事的技术跟自己的技术做对比,或者将TL
的技术跟自己做对比,经常有人向我吐槽说,同事的技术不如他为什么工资比他高,TL
的技术也不怎么样,为什么能成为TL
,现在给你的回答是,"因为你以为的并不是你以为的"
我们完全没有必要把时间花费在这种毫无意义的事情上面,改变不了环境就改变自己,学会破圈,为什么总有人说北上广深适合创业,因为北上广深的风水爆炸还是空气新鲜?显然都不是,在北上广深无非就是让你的人脉更优质一些,上限更高一点,你的圈有多大,未来的想象空间才有可能更大
- 你一直将自己跟同事对比,那么你同事的上限就是你的上限
- 你拿尤大跟自己对比,那么尤大的上限就是你的上限
功利性的阅读源码
功利性即指有目的性的,明确知道自己干完某一件事后能得到什么样的回报,所以首先你要知道你想得到什么?
看每一本书都有明确的目的,想学会理财,就得看理财相关的书,想学点技术,就得看点技术相关的书
看源码也是一样,你对vue.use
之后发生了什么比较好奇,或者是你觉得现在面试都需要会看点源码,这都很好,至少你有明确的诉求
凡事只要有了功利属性,才更容易走的下去,否则就是真香警告
2.源码应该怎么阅读
单点突破
这种情况一般在是自己写需求遇到问题了,或者突然一时兴起想看看内脏的同学,可以直接粗暴的找到源码的仓库,直接在该仓库搜索关键字,然后根据模糊搜索的结果再结合自己的理解选择合适的结果,以下以Vue.use
为例,如下图
我们可以看到第一个结果就是.spec
(Standard Performance Evaluation Corporation,标准性能评估机构bai) 可以理解为代码的试金石,优秀开源代码的标配,直接代表着代码的稳健性
点进去我们看到的代码如下,从图中我们就能大致的猜到Vue.use
的一些使用场景及边界值
从结果的第四个点进去,我们就能直接看到源码了,是不是很easy ?
系统阅读
即指以项目为维度的源码阅读,这种方式比上面的单点突破价值就要大很多,读完之后,不仅可以知道执行一个Api时具体发生了什么,更重要的是能学习到项目整体的设计思想和架构理念
当然,阅读难度也会有相应提高,这里给你四个建议
- 决心(事事把决心放第一)
- 对你所阅读的代码框架要有基本的了解(不然你读个啥)
- 设定一个计划并自我复盘总结
- 循序渐进,任何事情需要一个过程,由易到难,由浅入深
具体方案
- 选择合适的工具让代码先跑起来
- 理清楚代码组织关系及用途
- 利用好单元测试
- 利弊权衡(该跳就跳,长期处于蒙的状态很容易走进死胡同,可以标记回头再看)
- 利用搜索引擎(可以结合网上的源码分析资料理解)
- 多跟自己交互(带问题阅读)
3.本地怎么调试源码
科普一下SourceMap
这个东西吧,分开念Source
Map
,一句话理解就是一段维护了前后代码映射关系的json
描述文件,具体故事可以泡杯茶慢慢讲了,这里不过多描述,感兴趣的自行查阅相关文档
有了sourcemap
文件后,你想debugger
还是console
,就可以随意了
在vue3的example
中的我们看到示例引用的都是dist
文件
只需要将sourcemap
配置开启,然后就能随意的debugger
了
最后
接下来让我们一起遨游在源码的海洋里吧!