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

Posted 2021-04-08 Android编程精选

作者丨芝士

来源丨芝士来了

相信很多人都试图去看过源码，绝大多数是看不下去，没有及时获得正向反馈是一个原因，或者说，毫无章法的读源码使你并不清楚自己错过了什么？

最直接的一点，你能够看到很多优秀的写法，其次，从整体性上，你能够摸清架构，了解本质。

这篇文章将会通过对jQuery和Vue的源码解读，清晰的告诉你阅读源码能够带给你的益处。

01

细节上，学习优秀的写法

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

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

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

这样确实能实现效果，但是我们要写两段相同的拷贝代码，写了两段极其相似的for in循环，有代码的赘余。而且如果要引入深拷贝，那么得修改if部分和else部分两个部分。

我们来看看jQuery里是怎么处理的。

我进行了一些代码简化，主要是把思想表达清楚：

这里其实是一个享元模式，即把私有的方法，数据做为一个可变的享元。

对于jq而言，target是复制目标时私有的，而复制操作的操作是公共的，把可变的target独立出来。而留下一个公共的拷贝操作，这样有效的减少了重复代码，而且如果要加入深拷贝，就不用去改两部分了。

这个技巧，还可以用到很多地方，工作中有一些if-else判断里面的内容，进行的操作有很多重复。通过这么一小段，我们就知道如何去优化这样的代码了。

看源码其实也是在和这背后的人对话，从对方的处理技巧中，能够得到很多启发。

02

整体上，看懂事情的本质

以Vue为例子，在npm run dev之后，Vue都做了哪些工作呢？

看下面的代码：

其实很简单，Vue类里面其实就是调用了一个_init方法，这一段代码调用了五个方法，并传入了Vue类。

• initMixin，它的作用是给vue的原型链里加入Vue类里调用的_init方法

 

• stateMixin也和前面的initMixin类似，其实就是往Vue的原型里注入了$data,$props属性，以及$set、$delete 以及 $watch方法。

• eventMixin就是往vue原型链里注入了事件的监听与触发，即我们常用的$emit，$on。

• lifecycleMixin，就是注入了一些生命周期函数。

• renderMixin就和后面的具体编译有关。

这里只对我们npm run dev之后Vue做的工作做一个简单描述，相信看懂的人，会有种瞬间觉得心里透亮的感觉，从懵懵懂懂会用，到了解大概工作内容，有种擦干净一层玻璃的感觉。

再去审视自己的npm run dev有没有觉得不一样了呢？这里只是讲解一些开头，如果你深入其中，你会更加的透彻。

03

让自己学会看源码

以上两个小例子，不管你是去细抠还是通读，阅读源码源码都有可以学到的东西。

对于工作两三年左右的人来说，也是提升自己很好的方式。

1. 一些优秀框架的源码，其中的写法，思路，运用到的设计模式都是对于我们有借鉴意义的。

2. 从使用到理解，会用一个框架容易，但只有当你深入到这个框架的源码，你才是真正的透彻了这个框架。更何况现在面试的时候都爱问源码。

近期精彩内容推荐：  

 

 

 

 

在看点这里好文分享给更多人↓↓