又在「杂乱的工作台上」完成文章……

没错又错过一个非常好的机会。与其说是因为时间不够做不完,还不如说是因为陷入斐波那契思考导致做不完。

不留遗憾,把它搞完。题源就不说了。

1. 现有 /a, /b, /c, /d 四个接口,找出最快的那个。异步用 setTimeout 模拟

1
2
3
4
5
6
7
8
9
10
const requests: Promise<string>[]
= ['/a', '/b', '/c', '/d']
.map(v => new Promise(resolve => {
const time = Math.floor(Math.random()*1000)
setTimeout(() => {
resolve(`${v} spent ${time}`)
}, time);
}))

Promise.race(requests).then(console.log)

2. 使用你擅长的方式实现 Dialog

这个一直在暗示可以使用 vue 或者 react,但是我有些紧张,一时半会只能想到只能用原生的方式

最后只能说是搬石头砸自己的脚,没写过一时没思路,导致写不完

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<body>
<div>
<button id="dialog">直视我!栽种!</button>
</div>
<style>
.dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
box-shadow: 1px 2px 8px 0 #c0c0c0;
color: #666;
}

.mask {
z-index: 1;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
filter: blur(80%);
}

.dialog-header {
width: 100%;
height: 45px;
margin: 8px 16px;
}

.isShow {
display: block;
}

.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
margin: 0 16px;
}

.cancel-btn {
outline: 0;
border: 2px solid #ccc;
color: #999;
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
border-radius: 8px;
}
</style>
<script>
class TheDialog {
constructor(id) {
this.btn = document.querySelector('#dialog')
this.width = 500
this.height = 300

this.template()
this.listener()

document.body.appendChild(this.container)
}

template() {
const container = document.createElement('div')
container.style.width = this.width + 'px'
container.style.height = this.height + 'px'
container.classList.add('dialog')
container.appendChild(this.headerTem())
container.appendChild(this.bodyTem())
container.appendChild(this.footerTem())

this.container = container
}

bodyTem() {
const body = document.createElement('div')
body.innerHTML = 'Hello World'
body.style.margin = '16px'
body.style.color = '#333'
body.style.fontSize = '24px'

return body
}

headerTem() {
const header = document.createElement('div')
header.classList.add('dialog-header')
const title = document.createElement('div')
title.innerHTML = 'Dialog'
header.appendChild(title)

return header
}

footerTem() {
const footer = document.createElement('div')
const btn = document.createElement('button')
footer.classList.add('footer')
btn.classList.add('cancel-btn')
btn.innerHTML = 'CANCEL'
btn.addEventListener('click', e => {
e.stopPropagation()
this.close()
})

footer.appendChild(btn)

return footer
}

listener() {
this.btn.addEventListener('click', e => {
e.stopPropagation()
this.toggle()
})
}

toggle() {
const isShow = this.container.classList.contains('isShow')
if (isShow) {
this.close()
} else {
this.container.classList.add('isShow')
document.body.classList.add('mask')
}
}

close() {
this.container.classList.remove('isShow')
document.body.classList.remove('mask')
}
}

(() => {
const theDialog = new TheDialog()
window.dialog = theDialog
})()
</script>
</body>

这样凑合能用