相信很多人都试图去看过源码,绝大多数是看不下去,没有及时获得正向反馈是一个原因,或者说毫无章法的读源码使你并不清楚自己错过了什么
最直接的一点,你能够看到很多优秀的写法,其次,从整体性上,你能够摸清架构,了解本质。
这篇文章将会通过对jQuery和Vue的源码解读,清晰的告诉你阅读源码能够带给你的益处。
01
细节上,学习优秀的写法

以jQuery中的extends方法为例,对于extends方法有如下需求:

  • 传入一个参数时,把该参数对象合并入jQuery实例,如$.extends({a:2}),会把该对象并入jQuery
  • 传入两个参数时,则会合并两个参数,并返回,如$.extends({a:2},{b:3})会返回一个对象{a:2,b:3}.

这里先不谈深浅拷贝,面对这两个需求很多人会直接判断参数数量,然后做对应处理,像下面这样:

优秀前端源码解读技巧:以jQuery和Vue源码为例插图

这样确实能实现效果,但是我们要写两段相同的拷贝代码,写了两段极其相似的for in循环,有代码的赘余。而且如果要引入深拷贝,那么得修改if部分和else部分两个部分。
我们来看看jQuery里是怎么处理的。
我进行了一些代码简化,主要是把思想表达清楚:

优秀前端源码解读技巧:以jQuery和Vue源码为例插图1

这里其实是一个享元模式,即把私有的方法,数据做为一个可变的享元。
对于jq而言,target是复制目标时私有的,而复制操作的操作是公共的,把可变的target独立出来。而留下一个公共的拷贝操作,这样有效的减少了重复代码,而且如果要加入深拷贝,就不用去改两部分了。
这个技巧,还可以用到很多地方,工作中有一些if-else判断里面的内容,进行的操作有很多重复。通过这么一小段,我们就知道如何去优化这样的代码了。
看源码其实也是在和这背后的人对话,从对方的处理技巧中,能够得到很多启发。
02
整体上,看懂事情的本质
以Vue为例子,在npm run dev之后,Vue都做了哪些工作呢?
看下面的代码:

优秀前端源码解读技巧:以jQuery和Vue源码为例插图2

其实很简单,Vue类里面其实就是调用了一个_init方法,这一段代码调用了五个方法,并传入了Vue类。
  • initMixin,它的作用是给vue的原型链里加入Vue类里调用的_init方法

优秀前端源码解读技巧:以jQuery和Vue源码为例插图3

  • stateMixin也和前面的initMixin类似,其实就是往Vue的原型里注入了$data,$props属性,以及$set、$delete 以及 $watch方法。
  • eventMixin就是往vue原型链里注入了事件的监听与触发,即我们常用的$emit,$on。
  • lifecycleMixin,就是注入了一些生命周期函数。
  • renderMixin就和后面的具体编译有关。
这里只对我们npm run dev之后Vue做的工作做一个简单描述,相信看懂的人,会有种瞬间觉得心里透亮的感觉,从懵懵懂懂会用,到了解大概工作内容,有种擦干净一层玻璃的感觉
再去审视自己的npm run dev有没有觉得不一样了呢?这里只是讲解一些开头,如果你深入其中,你会更加的透彻。
03
让自己学会看源码
 
以上两个小例子,不管你是去细抠还是通读,阅读源码源码都有可以学到的东西。
对于工作两三年左右的人来说,也是提升自己很好的方式。
1. 一些优秀框架的源码,其中的写法,思路,运用到的设计模式都是对于我们有借鉴意义的。
2. 从使用到理解,会用一个框架容易,但只有当你深入到这个框架的源码,你才是真正的透彻了这个框架。更何况现在面试的时候都爱问源码。

发表评论

后才能评论