文章/答案/技术大牛

发布

社区首页 >专栏 >【Vue原理】Vue源码阅读总结大会

【Vue原理】Vue源码阅读总结大会

原创

神仙朱

修改于 2019-08-05 03:34:58

8080

文章被收录于专栏：Vue源码 & 前端进阶体系Vue源码 & 前端进阶体系

专注 Vue 源码分享，为了方便大家理解，分为了白话版和源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和 Vue的美，喜欢我就关注我的公众号，好吧兄弟，不会让你失望的

阅读源码是需要很多的勇气的，特别是对这种 Vue 源码的框架，十分抽象，使用了好多设计模式，封装得十分精密。很难短时间内能看得明白。

而我显然也是做好了心里准备和知识准备啦

我老早就想攻破 Vue 源码这座城堡

但是显然我当时还没有做好准备，我认为自己不可以贸然去看，不然自己烦，自己累，还难以收获

本篇文章算是一个简单地吹水，就是跟大家谈谈我的感想，没有什么知识含量，其实也有的。

阅读源码准备了什么

1、掌握 Vue 所有API

我把 Vue 的所有 API 都详细研究使用过了一遍，而且尽量在项目中都有使用，让自己有深一点的体会

而且我对着官方文档，一个个做了详细的笔记，而且联想过了使用场景。

2、JavaScript 扎实基础

幸好自己之前花了大力气去给自己打基础，让自己现在的 JavaScript 基础还算不错。

逼着自己把很多本 JavaScript 书都看完了，并且做了详细笔记。像是【 JavaScript易维护】【JavaScript性能】，【JavaScript 高级程序设计】【巴菲特给股东的信】看了两遍，说不上精通，也算是还可以？

3、看完 JavaScript 设计模式

光是 JavaScript 设计模式这本书我就看了一年半，不能说自己把所有设计模式都掌握了，掌握了大部分吧，设计模式港真真的很有趣，不然我也不会决心学

在这里推荐张容铭的【JavaScript设计模式】，书讲得非常透彻和详细，我是从完全不懂开始看的

也经常使用一部分，我一直以设计模式为我的项目基构。就是能用设计模式的地方，我都尽量使用设计模式。

设计模式看起来就像是剑客的剑谱，有招有式，连人家武侠剧发功的时候都知道喊出招式的名字... 降龙十八掌！！！！

野路子难登大雅之堂，主要是不好看啊，代码为了好维护，易扩展

4、学会调试

我很大胆地说，如果你不会调试，你看 Vue 源码，或者你会想死，你会出现这个场景...

MMP，这个方法是怎么跳到那个方法的，那个方法和这个方法又是怎么联系起来的？

也许你可以慢慢使用函数名字去寻找，但是无疑你会多消耗几倍时间，而且你会更烦

使用调试真的方便，以前我也真的不喜欢调试，觉得好像很难？？？

更喜欢使用 console.log 去打印信息.....

是啊，我自己写项目的时候，我还是会使用 console.log 去调试.......

那是因为我自己代码，我知道怎么跑，你看别人的代码，还是超级抽象的框架，使用 console.log 的方式.....

放心，相信我，你会掉很多头发.........

这里，我使用的是 VSCode 去调试，真的简单又方便，我当时也真的很难去让自己又要学一个东西

但是我咬咬牙，我还是学了，感谢自己......

我可以保证，你从不懂到掌握，只要不到十分钟，简直就是现实版的十分钟精通到入门

好吧，下面开始说，Vue 的简单总结。

Vue 源码的简短的总结

1、封装了很多常用的函数！

为了复用且易维护

常用的类型判断、类型转换、数据格式转换（数组转对象）.....

举些例子

function isObject(obj) {    return obj !== null && typeof obj === 'object'}
function isUndef(v) {    return v === undefined || v === null}
function isDef(v) {    return v !== undefined && v !== null}
function toString(val) {    
    return val == null ?    '' :    
    typeof val === 'object' ?    
    JSON.stringify(val, null, 2) :    String(val)
}
function toObject(arr) {    
    var res = {};    
    for (var i = 0; i < arr.length; i++) {        
        if (arr[i]) {
            extend(res, arr[i]);
        }
    }    return res
}
....

你说说不定过了几年，判断是否是一个对象，不再是什么 typeof obj=="object"

如果没有封装，那岂不是所有代码涉及到的都要改一遍，且不说如果有很多个都变了.....那你就头大了

节点操作兼容函数

addClass ,removeClass，createElement，appendChild，removeChild

function addClass(el, cls) {    
    if (!cls || !(cls = cls.trim())) return
    if (el.classList) {        
        if (cls.indexOf(' ') > -1) {
            cls.split(/\s+/).forEach(function(c) { return el.classList.add(c); });
        } else {
            el.classList.add(cls);
        }

    } else {        
       var cur = " " + (el.getAttribute('class') || '') + " ";        
       if (cur.indexOf(' ' + cls + ' ') < 0) {
            el.setAttribute('class', (cur + cls).trim());
       }
    }
}
....

这些函数都很有用，所以我都记下来了，毕竟是框架封装的，肯定是最完善的

2、真的用了很多设计模式

就我看到的设计模式就有

观察者模式、状态模式、节流模式、参与者模式、备忘录模式、单例模式

装饰者模式、组合继承模式、链模式.........

我怀疑 Vue 把所有的设计模式都用完了.... 真的..... 如果你不懂设计模式

你真不会领悟到他这么写的精髓

我就选 Vue 常用的一个设计模式来讲

【参与者模式】

Vue 封装的很多函数都是用了参与者模式，也可以叫做柯里化

先来简单解释下参与者模式

1、保存第一次调用传入参数

2、返回定制函数，函数内使用参数

简单实现像这样

function add(a){    
    return function(b){ return a+b }
}
// 为了定制函数，把第一次调用时的参数闭包保存
add5 = add(5)var result  = add5(9)

看一下 Vue其中一个使用柯里化的封装函数

makeMap

创建对象 map，返回函数，用于后面查找某个东西是否存在 map 中

function makeMap( str,  expectsLowerCase ) {    
    var map = Object.create(null);   
    var list = str.split(',');    
    for (var i = 0; i < list.length; i++) {
        map[list[i]] = true;
    }    
    return expectsLowerCase ?        
        function(val) { return map[val.toLowerCase()]; } :        
        function(val) { return map[val]; }
}
        
// 应用
var isUnaryTag = makeMap(   
 'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +  
 'link,meta,param,source,track,wbr');
 
// 查找 area 标签是否存在 上面保存过的 字符串中
isUnaryTag('area')