Skip to content

Commit ae3c096

Browse files
subjectmathsubjectmath
committed
push
1 parent 8e5fa9b commit ae3c096

File tree

40 files changed

+1256
-0
lines changed

40 files changed

+1256
-0
lines changed

‎.gitignore

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.DS_Store
2+
node_modules/
3+
/dist/
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Editor directories and files
9+
.idea
10+
.vscode
11+
*.suo
12+
*.ntvs*
13+
*.njsproj
14+
*.sln

‎1-reactivity/1.1-getter-setter/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!-- index.html -->
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="./index.js"></script>
8+
</head>
9+
<body>
10+
<script>
11+
const obj = { foo: 123 };
12+
convert(obj);
13+
</script>
14+
</body>
15+
</html>

‎1-reactivity/1.1-getter-setter/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// index.js
2+
var convert = (obj) => {
3+
Object.keys(obj).forEach(key => {
4+
var val = obj[key];
5+
Object.defineProperty(obj, key, {
6+
// 对于一些原先没有的属性没有监听到
7+
set(newV) {
8+
val = newV;
9+
console.log(`setting key "${key}" to ${newV}`)
10+
},
11+
get() {
12+
console.log(`getting key "${key}": ${val}`)
13+
return val;
14+
}
15+
})
16+
})
17+
}

‎1-reactivity/1.2-dependency-tracking/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!-- index.html -->
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="./index.js"></script>
8+
</head>
9+
<body>
10+
<script>
11+
//依赖
12+
const dep = new Dep();
13+
14+
autorun(() => {
15+
// 依赖是会不断添加的
16+
dep.depend();
17+
console.log('update');
18+
})
19+
//should log: "updated"
20+
21+
//调用这个方法，autorun会再次执行？
22+
dep.notify();
23+
//should log: "updated"
24+
</script>
25+
</body>
26+
</html>

‎1-reactivity/1.2-dependency-tracking/index.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// index.js
2+
window.Dep = class Dep {
3+
constructor() {
4+
this.subscribers = new Set();
5+
}
6+
depend() {
7+
if (activeUpdate) {
8+
//注册目前激活的更新作为订阅者
9+
this.subscribers.add(activeUpdate);
10+
console.log(this.subscribers)
11+
}
12+
}
13+
notify() {
14+
//执行订阅函数
15+
this.subscribers.forEach(sub => sub());
16+
}
17+
}
18+
19+
let activeUpdate;
20+
21+
function autorun(update) {
22+
function wrappedUpdate() {
23+
activeUpdate = wrappedUpdate;
24+
update();
25+
activeUpdate = null;
26+
}
27+
wrappedUpdate();
28+
}

‎1-reactivity/1.3-mini-observer/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!-- index.html -->
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="./index.js"></script>
8+
</head>
9+
<body>
10+
<script>
11+
const state = {
12+
count: 0
13+
}
14+
15+
observe(state);
16+
17+
autorun(() => {
18+
console.log(state.count)
19+
})
20+
21+
state.count++;
22+
</script>
23+
</body>
24+
25+
</html>

‎1-reactivity/1.3-mini-observer/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// index.js
2+
function observer(obj) {
3+
4+
}
5+
6+
function autorun(update) {
7+
8+
}

‎2-plugin/2.1-simple-plugin/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="../../node_modules/vue/dist/vue.js"></script>
8+
<script src="./index.js"></script>
9+
</head>
10+
11+
<body>
12+
<script>
13+
// Vue包裹的整个对象是vm.$options
14+
const vm = new Vue({
15+
data: { foo: 10 },
16+
rules: {
17+
foo: {
18+
validate: value => value > 1,
19+
message: 'foo must be greater than one'
20+
}
21+
}
22+
})
23+
vm.foo = 0
24+
//should log: "foo must be greater than one"
25+
</script>
26+
</body>
27+
28+
</html>

‎2-plugin/2.1-simple-plugin/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const RulesPlugin = {
2+
install(Vue) {
3+
Vue.mixin({
4+
created() {
5+
if (this.$options.rules) {
6+
Object.keys(this.$options.rules).forEach(key => {
7+
const rule = this.$options.rules[key]
8+
this.$watch(key, newValue => {
9+
const result = rule.validate(newValue)
10+
if (!result) {
11+
console.log(rule.message)
12+
}
13+
})
14+
})
15+
}
16+
}
17+
})
18+
}
19+
}
20+
21+
Vue.use(RulesPlugin)

‎3-render-function/3.1-render-tags/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script src="../../node_modules/vue/dist/vue.js"></script>
9+
<script src="./index1.js"></script>
10+
</head>
11+
<body>
12+
<div id="app">
13+
<example :tags="['h1','h2','h3']"></example>
14+
</div>
15+
<script src="./index2.js"></script>
16+
</body>
17+
</html>

‎3-render-function/3.1-render-tags/index1.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Vue.component('example', {
2+
props: ['tags'],
3+
render(h) {
4+
return h('div', this.tags.map((tag, index) => h(tag, index)))
5+
}
6+
})

‎3-render-function/3.1-render-tags/index2.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
new Vue({ el: '#app' })

‎3-render-function/3.2-render-components/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<script src="../../node_modules/vue/dist/vue.js"></script>
10+
<script src="./index1.js"></script>
11+
</head>
12+
13+
<body>
14+
<div id="app">
15+
<example :ok="ok"></example>
16+
<button @click="ok = !ok">toggle</button>
17+
</div>
18+
<script src="./index2.js"></script>
19+
</body>
20+
</html>

‎3-render-function/3.2-render-components/index1.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const Foo = {
2+
render:h => h('div','foo')
3+
}
4+
5+
const Bar = {
6+
render:h => h('div','bar')
7+
}
8+
9+
//只有Vue component的render才带有h函数
10+
Vue.component('example', {
11+
props:['ok'],
12+
render(h){
13+
return this.ok?h(Foo):h(Bar);
14+
}
15+
})

‎3-render-function/3.2-render-components/index2.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
new Vue({ el: '#app', data: { ok: true } })
2+

‎3-render-function/3.3-higher-order-component/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<script src="../../node_modules/vue/dist/vue.js"></script>
10+
<script src="./index1.js"></script>
11+
</head>
12+
13+
<body>
14+
<div id="app">
15+
<smart-avatar username="vue.js" id="foo">
16+
</smart-avatar>
17+
</div>
18+
<script src="./index2.js"></script>
19+
</body>
20+
</html>

‎3-render-function/3.3-higher-order-component/index1.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
function fetchUrl(username,cb){
2+
setTimeout(() => {
3+
cb('https://raw.githubusercontent.com/AddJunZ/Front-End-Interview/master/img/pay.jpg')
4+
}, 1000);
5+
}
6+
7+
// 作为h函数的第二个参数
8+
const Avatar = {
9+
props:['src'],
10+
template:`<img :src="src" alt=""/>`
11+
}
12+
13+
function withAvatarURL(InnerComponent){
14+
return {
15+
props:['username'],
16+
data(){
17+
return {
18+
url:`https://raw.githubusercontent.com/AddJunZ/Front-End-Interview/master/img/author.jpg`
19+
}
20+
},
21+
created(){
22+
fetchUrl(this.username,url=>{
23+
this.url = url
24+
})
25+
},
26+
render(h){
27+
return h(InnerComponent,{
28+
props:{
29+
src:this.url,
30+
attrs:this.$attrs
31+
}
32+
},this.$slots.default)
33+
}
34+
}
35+
}
36+
37+
const SmartAvatar = withAvatarURL(Avatar)

‎3-render-function/3.3-higher-order-component/index2.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
new Vue({ el: '#app', components: { SmartAvatar } })

‎4-state-manage/4.1-passing-props/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script src="../../node_modules/vue/dist/vue.js"></script>
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<counter :count="count"></counter>
13+
<counter :count="count"></counter>
14+
<counter :count="count"></counter>
15+
<button @click="count++">increment</button>
16+
</div>
17+
<script src="./index.js"></script>
18+
</body>
19+
</html>

‎4-state-manage/4.1-passing-props/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
new Vue({
2+
el: '#app',
3+
data: { count: 0 },
4+
components: {
5+
Counter: {
6+
props: ['count'],
7+
template: `<div>{{ count }}</div>`
8+
}
9+
}
10+
})

‎4-state-manage/4.2-shared-object/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script src="../../node_modules/vue/dist/vue.js"></script>
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<counter :count="count"></counter>
13+
<counter :count="count"></counter>
14+
<counter :count="count"></counter>
15+
<button @click="inc">increment</button>
16+
</div>
17+
<script src="./index.js"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)