1 | 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
示例 1:
输入: root = [3,5,1,6,2,0,8,null,null,7,4], p = 5, q = 1
输出: 3
解释: 节点 5 和节点 1 的最近公共祖先是节点 3。
示例 2:
输入: root = [3,5,1,6,2,0,8,null,null,7,4], p = 5, q = 4
输出: 5
解释: 节点 5 和节点 4 的最近公共祖先是节点 5。因为根据定义最近公共祖先节点可以为节点本身。
说明:
所有节点的值都是唯一的。
p、q 为不同节点且均存在于给定的二叉树中。
1 | 给你两个单词 word1 和 word2，请你计算出将 word1 转换成 word2 所使用的最少操作数 。 |
1 |
|
vue实现双向绑定原理，主要是利用Object.defineProperty 来给实例data的属性添加 setter和getter.
并通过发布订阅模式（一对多的依赖关系，当状态发生改变，它的所有依赖都将被通知）来实现响应。
这个环节中包含了三个部分
Observer 用来监听拦截data的属性为监察者。
Dep用来添加订阅者，为订阅器
Watcher 就是订阅者
监察者通过 Dep 向 Watcher发布更新消息
那么首先
如下我们就已经实现了一个简单的双向绑定了。
我们将data的value属性绑定上set和get，通过 _value 来进行操作。
1 | <!-- HTML部分 --> |
1 | <!-- JS部分 --> |
如果只是实现一个简单的双向绑定那么上面的代码就已经实现了。
首先我们将watcher抽出来 备用
1 | function watcher(params) { |
声明一个vm来模拟vue的实例,并初始化。
1 | var vm = { |
遍历其data上的属性 进行改造 这里我们还是只举一个例子
1 | // 利用 Object.defineProperty 定义一个属性 (eg：value) 描述符为存取描述符的属性 |
进行到这儿也已经实现了绑定，但是我们平时使用vue ，都是可以直接通过 this.xxx来获取和定义数据
那么我们还需要进行一步Proxy 代理
1 |
|
这样我们就把vm._data.value 代理到vm.value上了，可以通过其直接操作了。
那么按照官方的写法
1 |
|
以下为整个页面，可以直接运行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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定简单实现</title>
</head>
<body>
<input type="text" id="inp" oninput="inputFn(this.value)">
<br>
<input type="text" id="inp2" oninput="inputFn(this.value)">
<div id='div'></div>
<script>
var inp = document.getElementById('inp');
var inp2 = document.getElementById('inp2');
var div = document.getElementById('div');
function inputFn(value) {
div.innerText = vm.value = value;
}
function watcher(params) {
console.log(1)
div.innerText = inp.value = params; // 派发watcher
}
function watcher2(params) {
console.log(2)
div.innerText = inp2.value = params; // 派发watcher
}
function proxy (target, sourceKey, key) {
Object.defineProperty(target, key, {
enumerable: true,
configurable: true,
get() {
return this[sourceKey][key];
},
set(val) {
this[sourceKey][key] = val;
}
});
}
let handler = {
enumerable: true,
configurable: true,
set: function (newValue) {
vm.data.value = newValue;
vm.valueWatchers.map(fn => fn(newValue));
},
get: function () {
vm.valueWatchers = []; //防止重复添加,
vm.valueWatchers.push(watcher);
vm.valueWatchers.push(watcher2);
return vm.data.value;
}
}
var vm = {
data: {},
_data: {},
value: '',
valueWatchers: []
}
Object.defineProperty(vm._data, 'value', handler)
proxy(vm, '_data', 'value');
vm.value; //显示调用绑定
</script>
</body>
</html>
再多讲一点。实际上vue在初始化的时候是用解析器解析过程中将wathcer进行绑定的。
它会利用一个全局的Dep.target = watcher
然后在get收集中，只收集全局上Dep.target, 添加完毕后会重新初始化全局Dep.target = null;
类似如下操作1
2
3
4
Dep.target = watcher;
vm.value; // 触发get => Dep.target && valueWatchers.push(Dep.target);
Dep.target = null;
这样也会防止我们在调用时触发get重复去添加watcher。
而我们的例子中只是每次都初始化为[]. 实际订阅器也不只是一个watcher数组。
此例跟官方实现还是有很多差距，只是简单模拟。
在vue3.0中，使用proxy这个功能更加强大的函数，它可以定义对象的基本操作的自定义行为。对比defineProperty只能拦截对象的某一属性，proxy的功能更方便。所提供的可自定义的操作也更多。
上面，我用defineProperty实现了vue的双向绑定，接下来我们用proxy来实现。
首先我们可以先了解一下proxy的作用和用法
首先 defineProperty 的用法是Object.defineProperty(obj, prop, descriptor)
proxy的用法如下：1
const p = new Proxy(target, handler)
我们用proxy来实现一下双向绑定：
核心代码就像这样，在我们这个需求下分析
set函数中target 为所拦截的对象key 为属性名newValue为所赋予的值return true代表设置成功，返回flase在严格模式下报TypeError （代表该值与期望值类型不同）get函数中target 为所拦截的对象key 为属性名1 | let data = {value: 0} |
1 |
|
平时我们常见的错误类型分为ReferenceError，TypeError，SyntaxError 这三种。
1 | let b = 1; |
我们在全局定义了b，所以console.log(b)为1，但是我们没有定义a，所以我们在全局作用域下找不到a，就会报ReferenceError
如果是在函数中定义，则在函数中查找不到时，会去父作用域查找，一直到全局，都找不到，才会报ReferenceError
1 | let b = 1; |
b，其类型为Number，但是我们用()来执行它，把它当作了函数用，所以就会报TypeError1 | let b > 1;//SyntaxError |
SyntaxError