vue源码学习之旅-day1

前言

已经用vue框架一段时间了，一直想去拜读下源码。但是每次看到那一万多行的代码都退缩了。最近开发需求正好比较少，争取每天抽出一部分时间，看看源码，学习一下相关技巧。

vue源码版本：v2.5.16

part1: vue工具函数的学习

  1. 获取复杂数据类型的方式
1
2
Object.prototype.toString.call(target).slice(8,-1)
// slice(8,-1) 亮眼，想想自己的项目里的各种切割处理方式，真是一堆辣鸡代码
  1. makeMap 工具函数
    目的： 定义一系列注册值缓存起来，方便后续使用，返回true/undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function makeMap(str,expectsLowerCase){
	var map = Object.create(null), // 创建一个没有原型的空对象
		list = str.split(","); // 约定，按照逗号间隔传入注册值。或者传入数组join转化一下
	for(var i=0;i<list.length;i++){
		// 注册值作为key添加到map对象中，且对应的value为true。
		map[list[i]] = true 
	}
	// 是否要转小写
	return expectsLowerCase?function (val){return map[val.toLowerCase()]}
			: function (val){ return map[val] }
}

// 使用示例
var isZS = makeMap("zs,16,boy,175");
console.log(isZS("17")) // undefined
console.log(isZS("boy")) // true
  • 知识点记录
1
2
3
4
5
6
7
8
1. Object.create(null)：传入null时，返回一个没有原型(_proto_)的对象！
	控制台执行下面代码，自行体会区别
	var obj1 = Object.create(null),
		obj2 = {};
	console.dir(obj1)
	console.dir(obj1)
2.策略者模式
3.闭包及函数柯里化
  1. JSON.stringify（target,null,2） 的三个参数
1
2
3
4
5
// 才知道JSON.stringify有三个参数，一直都只会用一个参数。。。惭愧
1. 第2个参数接受一个函数或者数组；
传入函数时，按照函数处理每一项，返回指定的值
传入数组时，只处理数组中定义的key
2. 第三个参数，指定缩进
  1. hasOwnProperty 方法的封装
  • 目的： 判断对象是否包含指定的“自身属性”，非继承
1
2
3
4
5
function hasOwn(obj,key){
	return ({}).hasOwnProperty.call(obj,key)
}

hasOwn({"zs":14},"zs") // true
  1. cached 方法
  • 目的： 创建纯函数的缓存对象。我们知道纯函数的返回结果只和输入有关，因此如果用对象的key来描述输入，value来描述输出。那么这个对象就是一个完美的缓存，因为对象的key是唯一的。
  • 第一次调用时，缓存结果，第二次及后续调用，则读取缓存，避免重复计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function cached(fn){
	var cache = Object.create(null); // 既然要缓存结果，那肯定要创建对象来存储
	return (function (val){// 柯里化返回函数，每次传入不同的纯函数时，都能有一个相对应的缓存对象
		// 看对象里是否有存储过对应的值,第一次则创建缓存，后续直接读取缓存
		var hit = cache[val] 
		console.log("查看当前缓存:",cache)
		return hit || (cache[val] = fn(val))
	})
}

// 使用示例
function sayHello(a){
	return 'hello '+a
}

function sayHi(b){
	return 'hi '+b
}

var hello = cached(sayHello),
	hi = cached(sayHi);

hello("zhangsan")
hello("lisi")
hello("zhangsan")
hello("lisi")

hi("tom")
hi("jerry")
hi("tom")
hi("jerry")