前提:
这个版本的源码生啃的解析的主要动力来源,是因为我在掘金上面看到,有个大哥在一年前发布的一篇源码的生啃技术贴,直呼666啊。太给力了,活生生的就啃完了。
想着,既然有人拥有这样的毅力,那为什么,我不能尼?所以就开始了这样的进程
这里,我是跟着大佬的脚步进行的源码解析。
在这里,我发现,大佬在给我们的源码的链接中,版本号是2.6.14
,大佬说的是自己生啃的源码的版本是2.6.11
,但是在我对两个版本进行对比之后,发现,大佬其实讲的版本是2.6.14
,所以,接下来我们就开始吧。冲冲冲》》》
相关链接
首先更新的内容是git上面的,再是我们的博客上面的内容。会码云的可以直接拉取代码,进行学习哦。里面的 《vue.js(2.6.14)版本源码解析》跟本文是同一篇文章哈。
✒️ 我的git资源链接:
里面包含原版vue(v2.6.14)源码、注释过的代码和本文的md文档等资源
正文
第1~10行(6-10)
前面的是注释内容,
讲解一些代码的版本号等问题,
所以我们直接从第6行这里开始我们的源码学习
源码:
//init
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
/*
此部分省略核心代码
下面的添加的括号是为了保持代码的前后括号的完整性
*/
}
)
);
我们这里的function里面的内容,运用的是三元表达式,可以变形为以下代码:
if(typeof exports === 'object' && typeof moudle!=='undefined'){//检查CommonJS
moudle.exports=factory()
}else{
if(typeof define==='function'&&define.amd){//AMD异步模块定义,检查JavaScript依赖管理库
define(factory)
}else{
(global=global||self,global.Vue=factory());
}
等价于以下代码:
/*factory()是个匿名函数,
该函数并没有自执行
设计参数window,并传入window对象,不会污染全局变量,也不会被别的代码污染
*/
window.Vue.factory()
第11~14行(14行)
其他的部分是空行,只有单独的14行是有用的
//工具代码
//冻结的对象无法再更改
var emptyObject = Object.freeze({});
相关知识点引用链接:Object.freeze()方法
- 官网demo:
<script>
const obj={
prop:42
};
Object.freeze(obj);
obj.prop=33;//在严格模式下抛出错误
/*
Object.freeze() 方法可以冻结一个对象。
一个被冻结的对象再也不能被修改;
冻结了一个对象则不能向这个对象添加新的属性,
不能删除已有属性,
不能修改该对象已有属性的可枚举性、可配置性、可写性,
以及不能修改已有属性的值。
此外,冻结一个对象后该对象的原型也不能被修改。
freeze() 返回和传入的参数相同的对象。
*/
console.log(obj.prop);//预计输出: 42
</script>
- 语法:
Object.freeze(obj)
- 参数
obj要被冻结的对象
- 返回值
被冻结的对象