背景

昨天小组里面一个前端突然找我,说用vue两年多了,但是好多原理性的都还不懂,我就回了他一句,自己去撸源码呗。结果他居然给我回了两个字“不会”,***what???***然后我紧接着就问了其他几个前端,平时看框架源码,都是怎么看的,通过什么方式呢?结果基本的回答都是:看别人的文章,网上的帖子。我说那不是别人的理解嘛,你看别人的文章又能吸收多少呢,为什么不自己去看看源码,然后自己总结呢,别人的东西能借鉴,但是不能全搬吧?然后他们异口同声的回答:“不会看,不知道怎么看”,汗颜。

前言

在我个人来说,想要理解一个框架的设计思想,肯定得自己深入框架内部去一点点熟悉,然后整体串起来理解,这才是高效,快捷,准确的方法(ps:个人理解,不喜勿喷),但是目前得到组员的反馈都是去看别人的帖子和文章,首先别人可能理解的也是一知半解,或者说人家已经彻底理解了,但是每个人的思想都是不一样的,表达也不一样,那你又能从人家那理解多少呢,而且你能说你理解的就是人家想要表达的正确的思想吗?也不是吧,毕竟同一句话两个人看就是两种意思(ps:中华文化博大精深),所以还得自己真的去框架内部看,只有这样才能更深入更彻底的学习框架的设计思想,而且自己去研究的话印象也比较深刻。

正文

好了,废话不多说,直接上干货(ps:本文只针对目前想了解框架源码,但是又不知道怎么去做的同学,如有说的不对的地方,也欢迎各路大神在评论区及时指正,我会及时修改的,避免影响大家误入歧途)。下面我就以vue框架为例,说一下怎么去看源码。

第一步:下载源码

打开想要下载源码的地址,然后选一个自己想要下载版本,点击code下载zip包(ps:如果想要查看git相关的内容的话可以clone,但是只是查看代码的建议直接下载zip包,快捷,方便) 

第二步:打开源码

把zip包解压,用趁手的IDE打开,npm install下载一下项目依赖包,然后框架的文件夹结构就如下图所示,这些文件夹前期只需要关心examples和src就行。 

第三步:找到入口文件或者核心模块

接下来打开src目录,框架的代码都在这个文件夹里面,可以从图中看出,一共有六个模块,一般框架src下面都会有一个index文件,然后在index文件里面可以有哪些核心模块。然而vue框架不是这样的,但是有个很明显的文件夹core,核心文件夹。  打开core文件夹之后,我们会发现,这里面有一个index.js文件,这时候我们可以打开index.js看看里面是什么内容  根据index.js文件的内容可以看出,这个文件就是vue的入口文件,同样也会看到,Vue对象是instance/index这个文件抛出的。  这时候打开instance文件夹下面的index.js文件,就会发现这是一个初始化方法的入口,然后就可以在这里打debugger,跟着debugger去一步步往下看了。 

第四步:启动项目

既然debugger已经打好了,那就可以npm run dev启动项目在dev-tools里面去调试了。

第五步:通过示例代码去调试

  • 这时候就用到了前面提到的examples文件夹里面的东西了,一般这个文件夹里面都会放一些框架的使用示例,框架开发人员也会用这些示例去测试基本功能的实现程度,我们选其中一个去浏览器里面去运行就可以(ps:这里有一个需要注意的点是:示例里面引用的是vue.min.js,咱们需要改成vue.js,原因两点:1.压缩后的代码debugger会被删掉,2.压缩后的代码不方便查看
  • 运行tree文件夹下面的index.html后,在浏览器端会发现进入了咱们刚才打的debugger那里,这时候就可以愉快的跟着断点去一步步往下走了,想看其它模块的话如法炮制,想看哪里debugger打哪里。

结语

怎么研究一个框架源码的方法,我把我个人的总结和理解通过图文的形式详细的尽可能表达出来了,还是想让那些想看框架源码但是又无从下手的同学不再迷惑,不再通过别人的文章去一知半解的学习了,自己动手丰衣足食,如果有哪些还有疑惑的地方,欢迎在评论区留言,多多交流,众人拾柴火焰高嘛,加油吧,奥利给。

Logo

前往低代码交流专区

更多推荐