-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
690 lines (597 loc) · 71 KB
/
index.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>希亚的西红柿のBlog - 分享学习与生活</title><meta name="author" content="希亚的西红柿"><meta name="copyright" content="希亚的西红柿"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="个人博客">
<meta property="og:type" content="website">
<meta property="og:title" content="希亚的西红柿のBlog">
<meta property="og:url" content="http://blog.refrain.site/index.html">
<meta property="og:site_name" content="希亚的西红柿のBlog">
<meta property="og:description" content="个人博客">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://npm.elemecdn.com/nova1751-sources/blogImg/noa.png">
<meta property="article:author" content="希亚的西红柿">
<meta property="article:tag" content="博客, 教程, 分享">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://npm.elemecdn.com/nova1751-sources/blogImg/noa.png"><link rel="shortcut icon" href="/"><link rel="canonical" href="http://blog.refrain.site/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/pwa/manifest.json"/><link rel="apple-touch-icon" sizes="180x180" href="/pwa/images/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/pwa/images/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/pwa/images/16.png"/><link rel="mask-icon" href="/pwa/images/safari-pinned-tab.svg" color="#5bbad5"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nova1751/sources/scripts/index.css"><link rel="stylesheet" href="https://npm.elemecdn.com/@fortawesome/fontawesome-free@latest/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/@fancyapps/ui@latest/dist/fancybox/fancybox.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: {"defaultEncoding":1,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
noticeOutdate: {"limitDay":365,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
highlight: undefined,
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://npm.elemecdn.com/flickr-justified-gallery@latest/dist/fjGallery.min.js',
css: 'https://npm.elemecdn.com/flickr-justified-gallery@latest/dist/fjGallery.css'
}
},
isPhotoFigcaption: true,
islazyload: true,
isAnchor: true,
percent: {
toc: true,
rightside: true,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '希亚的西红柿のBlog',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2024-08-18 14:35:12'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" /><link rel="stylesheet" href="/css/custom.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/prism-themes/1.9.0/prism-one-dark.min.css" /><!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nova1751/hexo-shiki-plugin@latest/lib/codeblock.min.css">
<style>:root{--hl-color:#abb2bf;--hl-bg:#282c34;--hltools-bg:#21252b;--hltools-color:#bbbbbc;--hlnumber-bg:#282c34;--hlnumber-color:#495162;--hlscrollbar-bg:#373c47;--hlexpand-bg:linear-gradient(180deg,rgba(40,44,52,0.1),rgba(40,44,52,0.9))}</style>
<style>
.code-expand-btn:not(.expand-done) ~ div.codeblock,
.code-expand-btn:not(.expand-done) ~ * div.codeblock {
overflow: hidden;
height: 360px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-clock-nova1751@latest/lib/clock.min.css" /><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.2"><link rel="alternate" href="/atom.xml" title="希亚的西红柿のBlog" type="application/atom+xml">
</head><body><script>window.paceOptions = {
restartOnPushState: false
}
document.addEventListener('pjax:send', () => {
Pace.restart()
})
</script><link rel="stylesheet" href="https://npm.elemecdn.com/pace-js@latest/themes/blue/pace-theme-minimal.css"/><script src="https://npm.elemecdn.com/pace-js@latest/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://npm.elemecdn.com/nova1751-sources/blogImg/noa.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">31</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">39</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">11</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-list"></i><span> 菜单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/drive/"><i class="fa-fw fas fa-cloud"></i><span> 网盘</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-comment-dots"></i><span> 留言板</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="希亚的西红柿のBlog"><img class="site-icon" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://npm.elemecdn.com/nova1751-sources/blogImg/icon.png"/><span class="site-name">希亚的西红柿のBlog</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-list"></i><span> 菜单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/drive/"><i class="fa-fw fas fa-cloud"></i><span> 网盘</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-comment-dots"></i><span> 留言板</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/posts/300a8ca5/" title="虚拟列表"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/08/07/PguCDbyn4RSfzqA.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="虚拟列表"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/300a8ca5/" title="虚拟列表">虚拟列表</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-08-06T16:12:26.000Z" title="发表于 2024-08-07 00:12:26">2024-08-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/React/">React</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/React/">React</a></span></div><div class="content">唔～，好久没有更新博文了，一年前的这个时候用 Vue 实现过一版虚拟列表，不过现在已经忘光光了，故写一篇博文帮忙回忆与巩固一下虚拟列表的知识。
前言本文对虚拟列表出现的原因与解决的问题不再介绍，着重讲解虚拟列表实现的思路以及原理。
技术栈
React
Vite
TS
预览链接
Demo预览链接：react-virtual-list
Github仓库地址：react-virtual-list-demo
卡片快速预览：
问题分析基本思路
虚拟列表的基本结构：
容器层(container)：整个虚拟列表的包裹层，滚动事件是在这个包裹层出发的。
幻影层(phantom)：容器层的子元素，用于撑开整个容器，获得原生的滚动条展示，不渲染内容。
内容层(content)：容器层的子元素，用于渲染列表内容，列表元素动态变化。
虚拟列表的滚动效果实现：首先我们知道，虚拟列表的视口的渲染元素是动态增减的，那么其平滑的滚动效果是如何出现的？这里有一个误区需要注意，虚拟列表的滚动效果就是原生的滚动效果，虚拟列表并不参与scrollTop属性的设置，而是通过CSS的transform属性 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/ffb66302/" title="LeetCode 算法笔记 Part3"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/02/25/SGcqKat5L3peFsE.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="LeetCode 算法笔记 Part3"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/ffb66302/" title="LeetCode 算法笔记 Part3">LeetCode 算法笔记 Part3</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-03-03T04:29:06.000Z" title="发表于 2024-03-03 12:29:06">2024-03-03</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/LeetCode/">LeetCode</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/%E7%AE%97%E6%B3%95/">算法</a></span></div><div class="content">本文主要记录了博主的 Leetcode 算法刷题记录，方便以后查询复习。
图论岛屿数量LeetCode 原题链接：200. 岛屿数量
深度优先遍历，基本思路为，遇到一个岛就把这个岛给沉没掉，然后统计数加 1。
12345678910111213141516171819202122232425262728/**
* @param {character[][]} grid
* @return {number}
*/
const numIslands = (grid) => {
const m = grid.length,
n = grid[0].length;
const dfs = (i, j) => {
if (i < 0 || i > m - 1 || j < 0 || j > n - 1 || grid[i][j] === "0") {
return;
}
grid[i][j] = "0";
dfs(i + 1, j);
dfs( ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/b672a0f6/" title="LeetCode 算法笔记 Part2"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/02/25/SGcqKat5L3peFsE.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="LeetCode 算法笔记 Part2"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/b672a0f6/" title="LeetCode 算法笔记 Part2">LeetCode 算法笔记 Part2</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-02-26T04:29:06.000Z" title="发表于 2024-02-26 12:29:06">2024-02-26</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/LeetCode/">LeetCode</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/%E7%AE%97%E6%B3%95/">算法</a></span></div><div class="content">本文主要记录了博主的 Leetcode 算法刷题记录，方便以后查询复习。
链表相交链表LeetCode 原题链接：160. 相交链表
哈希表存储遍历的节点，然后进行操作。第二种方法技巧性比较强，利用路径长度相同会回到相交的点的做法来求解。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485/**
* Definition for singly-linked list.
* function ListNode(val) {
* this.val = val;
* this.next = null;
* }
*/
/**
* @param {ListNode} headA
* @param {ListNode} headB
* @return {ListNode}
*/
const ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/1be7bb2b/" title="LeetCode 算法笔记 Part1"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/02/25/SGcqKat5L3peFsE.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="LeetCode 算法笔记 Part1"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/1be7bb2b/" title="LeetCode 算法笔记 Part1">LeetCode 算法笔记 Part1</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-02-25T04:29:06.000Z" title="发表于 2024-02-25 12:29:06">2024-02-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/LeetCode/">LeetCode</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/%E7%AE%97%E6%B3%95/">算法</a></span></div><div class="content">本文主要记录了博主的 Leetcode 算法刷题记录，方便以后查询复习。
哈希表两数之和LeetCode 原题链接：1. 两数之和
这道题首先考虑的是通过两层for循环遍历查询，但这样有很多无意义的查找。因此我们可以采用哈希表来减少查找的时间复杂度，此时查找顺序是往后而不是往前。注意使用Map对象来减少查询之前数据的时间复杂度，这里不能使用WeakMap，因为WeakMap只能使用对象作为键。
12345678910111213141516171819202122232425262728293031323334/**
* @param {number[]} nums
* @param {number} target
* @return {number[]}
*/
const twoSum = (nums, target) => {
for (let i = 0; i < nums.length; i++) {
for (let j = i + 1; j < nums.length; j++) {
if (nums[i] + nums ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/aac5e919/" title="JS手写题大汇总"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/01/02/iZE5AlbUXChmN2t.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS手写题大汇总"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/aac5e919/" title="JS手写题大汇总">JS手写题大汇总</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-02T15:34:30.000Z" title="发表于 2024-01-02 23:34:30">2024-01-02</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a></span></div><div class="content">本文主要记录了关于前端面试常考的手写代码题，常看常复习。
JS 基础篇深入了解 JS 这门语言的运行逻辑与机制，尝试实现其内部的方法。
ES5 实现继承使用 ES5 的语法实现继承，有几个注意点：
使用Object.create方法，构造以父类的prototype为原型的新对象，防止对子类原型对象的修改影响到父类的原型对象。
注意静态方法的继承，使用Object.setPrototypeOf将父类设置为子类的原型。
123456789101112131415161718192021function Person(name, age) {
this.name = name;
this.age = age;
}
Person.say = () => {
console.log("I'm a person!");
};
function Man(name, age, address) {
Person.call(this, name, age);
this.address = address;
}
Man.speak = () = ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/1afd9955/" title="TypeSript笔记"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/01/01/bvZiKsM2zYBIf7H.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeSript笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/1afd9955/" title="TypeSript笔记">TypeSript笔记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-01T09:12:26.000Z" title="发表于 2024-01-01 17:12:26">2024-01-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/FrontEnd/">FrontEnd</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/FrontEnd/">FrontEnd</a></span></div><div class="content">之前 TS 笔记由于放在长文章后面阅读体验不太好，故单独抽离出来一篇文章。
本文主要记录了 TS 的学习知识与笔记。
基本类型TS 有以下几种数据类型：
基础类型：包括boolean（布尔值）、number（数字）、string（字符串）、null（空值）、undefined（未定义值）、bigint（大整型）和symbol（符号）等。这些类型和 JavaScript 的基本类型基本一致，只是 TS 在编译时会检查变量的类型是否匹配。例如：
1234567let isDone: boolean = false; // 声明一个布尔类型的变量
let age: number = 18; // 声明一个数字类型的变量
let name: string = "Alice"; // 声明一个字符串类型的变量
let x: null = null; // 声明一个空值类型的变量
let y: undefined = undefined; // 声明一个未定义值类型的变量
let a: bigint = 2172141653n; // 定义一个大整型变量
let z: s ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/2afbd983/" title="Intersection Observer"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/12/31/jE29xmnMQvqT8oF.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Intersection Observer"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/2afbd983/" title="Intersection Observer">Intersection Observer</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-31T10:31:39.000Z" title="发表于 2023-12-31 18:31:39">2023-12-31</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/WebAPI/">WebAPI</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Front-End/">Front End</a></span></div><div class="content">早就想好好总结一下 Intersection Observer 这个 API，苦于一直没有时间，今天就来好好总结一下这个 API。
本篇文章将介绍现代 WebAPI Intersection Observer(元素交集观察器)。
背景交叉观察器 API（Intersection Observer API）提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法。过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：
在页面滚动时“懒加载”图像或其他内容。
实现“无限滚动”网站，在滚动过程中加载和显示越来越多的内容，这样用户就不必翻页了。
报告广告的可见度，以便计算广告收入。
根据用户是否能看到结果来决定是否执行任务或动画进程。
交叉观察器 API 可令代码注册一个回调函数，当特定元素进入或退出与另一元素（或视口）的交集时，或者当两个元素之间的交集发生指定变化时，该函数就会被执行。这样，网站就不再需要在主线程上做任何事情来监视这种元素交集，浏览器也可以 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/acc0017d/" title="数据结构与算法笔记"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/12/11/ZmVdnztJ6MRrq7w.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="数据结构与算法笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/acc0017d/" title="数据结构与算法笔记">数据结构与算法笔记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-11T09:36:58.000Z" title="发表于 2023-12-11 17:36:58">2023-12-11</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/FrontEnd/">FrontEnd</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/%E7%AE%97%E6%B3%95/">算法</a></span></div><div class="content">本篇文章将介绍数据结构与算法的基本概念（前端版）。
去年这个时间我在写数据结构与算法的博文，今年还在写，令人感叹。
基础算法的基本概念算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制也就是说，能够对一定规范的输入，在有限时间内获得所要求的输出算法的五大特性：
有限性（Finiteness）：一个算法必须保证执行有限步之后结束
确切性（Definiteness）： 一个算法的每一步骤必须有确切的定义
输入（Input）：一个算法有零个或多个输入，以刻画运算对象的初始情况，所谓零个输入是指算法本身给定了初始条件
输出（Output）：一个算法有一个或多个输出。没有输出的算法毫无意义
可行性（Effectiveness）：算法中执行的任何计算步骤都是可以被分解为基本的可执行的操作步骤，即每个计算步骤都可以在有限时间内完成（也称之为有效性
算法的复杂度时间复杂度是指执行一个算法所需要的计算工作量，它反映了算法的执行效率和数据规模的关系。我们通常用大 O 符号来表示时间复杂度，例如$O(n)、O(logn) ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/a1605017/" title="React笔记"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/12/04/SxYNCPRkihQHXLn.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="React笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/a1605017/" title="React笔记">React笔记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-04T12:11:44.000Z" title="发表于 2023-12-04 20:11:44">2023-12-04</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/React/">React</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Front-End/">Front End</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Framework/">Framework</a></span></div><div class="content">基础语法基础与规范
JSX注意事项。
JSX必须有一个根节点，如果没有，可以用幽灵节点<></>代替。
所有标签必须闭合，成对闭合或者自闭和都可以。
JSX采用小驼峰命名法，对于class要转化成className，for需要转化成htmlFor，以防止js关键字冲突。
JSX支持换行，如果需要换行需要加上()，防止bug出现。
注释在模板中的书写方式：{/* 苏苏苏 */}。1234567891011import "./app.css";
const showTitle = true;
function App() {
return (
<div className="App">
{/* 苏苏苏 */}
<div className={showTitle ? "title" : ""}>this is a div</div>
</div>
);
}
export d ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/3c94855e/" title="Vue3笔记"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/11/25/Tec3u9LNntZhsx6.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/3c94855e/" title="Vue3笔记">Vue3笔记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-11-25T09:57:47.000Z" title="发表于 2023-11-25 17:57:47">2023-11-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Front-End/">Front End</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Framework/">Framework</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">本文主要记录了关于 Vue3 的相关笔记，主要记录 Vue3 及其生态的使用与技巧，不定时更新。
基础创建一个 app 实例并挂载1234567891011import { createApp } from "vue";
// 从一个单文件组件中导入根组件
import App from "./App.vue";
const app = createApp(App);
//
app.config.errorHandler = (err) => {
/* 处理错误 */
};
// 挂在到跟组件 #app 容器里面
app.mount("#app");
应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。这几个方法的返回值都是应用实例本身，也就是通过 createApp() 方法创建的对象。这样可以方便地链式调用这些方法，而不需要每次都写 app. ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/posts/adf5c49/" title="Vue2笔记"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/11/24/DdC1QyeWBFzhfGA.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue2笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/adf5c49/" title="Vue2笔记">Vue2笔记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-11-24T15:35:21.000Z" title="发表于 2023-11-24 23:35:21">2023-11-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Front-End/">Front End</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Framework/">Framework</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">本文主要记录了关于 Vue2 的相关笔记，主要记录 Vue2 的一些基础概念与知识，帮助理解 Vue3。
Vue 的核心特性数据驱动(MVVM)数据驱动(MVVM)：MVVM表示的是Model-View-ViewModel
MVVM 模型由以下三个部分组成：
View：表示当前页面所渲染的 DOM 结构，负责将数据模型转化为 UI 展现出来。View 层通常是由 HTML 和 CSS 来编写的，也可以使用模板语言或组件化的方式来构建。
Model：表示当前页面渲染时所依赖的数据源，可以在 Model 层中定义数据修改和操作的业务逻辑。Model 层通常是由 Javascript 对象或数组来表示的，也可以使用 Vuex 等状态管理工具来管理。
ViewModel：表示 Vue 的实例，它是 MVVM 的核心。ViewModel 负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。ViewModel 层通常是由 Vue 的选项和方法来定义的，也可以使用组合式 API 等新特性来增强。
MVVM 模型的工作原理是这样的：
当用户在 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/posts/fccf75e5/" title="前端知识笔记"><img class="post-bg" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/11/19/JY2upqjVM341rZm.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="前端知识笔记"></a></div><div class="recent-post-info"><a class="article-title" href="/posts/fccf75e5/" title="前端知识笔记">前端知识笔记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-11-19T03:57:06.000Z" title="发表于 2023-11-19 11:57:06">2023-11-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Front-End/">Front End</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Front-End/">Front End</a></span></div><div class="content">本文主要记录了关于前端面试常考与常问的知识笔记，内容较多，不间断更新。
CSS
CSS中盒模型有传统的content-box与border-box，二者区别在于前者的width与height设置的是content-box，而后者设置的是border-box，注意背景图之类的属性显示依然相同，默认的background-origin属性就是padding-box，即背景图从padding-box开始显示，注意这个属性不要与background-color混淆，background-color默认全部显示。
CSS优先级
ID选择器的个数。
类选择器，属性选择器，伪类选择器的个数。
标签选择器，伪元素选择器的个数。
使用rem的移动端适配方案
核心思路为：
设置网页元素的width属性为rem单位。
通过js获取客户viewport宽度，并除以初始设置宽度，得到放大比例scale。
修改html元素的font-size，达到等比例适配效果。
1234567891011121314151617181920212223242526272829303132333435363738 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><a class="page-number" href="/page/3/#content-inner">3</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://npm.elemecdn.com/nova1751-sources/blogImg/noa.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">希亚的西红柿</div><div class="author-info__description">个人博客</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">31</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">39</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">11</div></a></div><a id="card-info-btn" target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/nova1751"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="mailto:[email protected]" rel="external nofollow noreferrer" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://space.bilibili.com/325854600" rel="external nofollow noreferrer" target="_blank" title="Bilibili"><i class="fab fa-bilibili"></i></a><a class="social-icon" href="https://t.me/nova1751" rel="external nofollow noreferrer" target="_blank" title="Telegram"><i class="fab fa-telegram"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">本网站评论系统使用的是 <span class="hl-label" style="background: rgb(73, 177, 245);border-radius: 6px">Twikoo</span>,若头像没有正常显示，请自行前往 <a class="hl-label" target="_blank" rel="noopener external nofollow noreferrer" href="https://cravatar.cn">Cravatar</a>绑定邮箱配置。</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/acc0017d/" title="数据结构与算法笔记"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/12/11/ZmVdnztJ6MRrq7w.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="数据结构与算法笔记"/></a><div class="content"><a class="title" href="/posts/acc0017d/" title="数据结构与算法笔记">数据结构与算法笔记</a><time datetime="2024-08-18T06:34:16.000Z" title="更新于 2024-08-18 14:34:16">2024-08-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/300a8ca5/" title="虚拟列表"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/08/07/PguCDbyn4RSfzqA.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="虚拟列表"/></a><div class="content"><a class="title" href="/posts/300a8ca5/" title="虚拟列表">虚拟列表</a><time datetime="2024-08-07T14:00:05.000Z" title="更新于 2024-08-07 22:00:05">2024-08-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/aac5e919/" title="JS手写题大汇总"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/01/02/iZE5AlbUXChmN2t.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS手写题大汇总"/></a><div class="content"><a class="title" href="/posts/aac5e919/" title="JS手写题大汇总">JS手写题大汇总</a><time datetime="2024-05-30T02:19:03.000Z" title="更新于 2024-05-30 10:19:03">2024-05-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/adf5c49/" title="Vue2笔记"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2023/11/24/DdC1QyeWBFzhfGA.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue2笔记"/></a><div class="content"><a class="title" href="/posts/adf5c49/" title="Vue2笔记">Vue2笔记</a><time datetime="2024-05-10T10:01:20.000Z" title="更新于 2024-05-10 18:01:20">2024-05-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b672a0f6/" title="LeetCode 算法笔记 Part2"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s2.loli.net/2024/02/25/SGcqKat5L3peFsE.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="LeetCode 算法笔记 Part2"/></a><div class="content"><a class="title" href="/posts/b672a0f6/" title="LeetCode 算法笔记 Part2">LeetCode 算法笔记 Part2</a><time datetime="2024-04-15T16:17:32.000Z" title="更新于 2024-04-16 00:17:32">2024-04-16</time></div></div></div></div><div class="card-widget" id="card-newest-comments"><div class="item-headline"><i class="fas fa-comment-dots"></i><span>最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>分类</span>
<a class="card-more-btn" href="/categories/" title="查看更多">
<i class="fas fa-angle-right"></i></a>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/DNS/"><span class="card-category-list-name">DNS</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Front-End/"><span class="card-category-list-name">Front End</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/FrontEnd/"><span class="card-category-list-name">FrontEnd</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Java/"><span class="card-category-list-name">Java</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">7</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/LeetCode/"><span class="card-category-list-name">LeetCode</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/React/"><span class="card-category-list-name">React</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue/"><span class="card-category-list-name">Vue</span><span class="card-category-list-count">2</span></a></li>
</ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/JavaScript/" style="font-size: 1.45em; color: rgb(26, 98, 182)">JavaScript</a><a href="/tags/WebAPI/" style="font-size: 1.15em; color: rgb(13, 50, 124)">WebAPI</a><a href="/tags/Front-End/" style="font-size: 1.4em; color: rgb(16, 197, 74)">Front End</a><a href="/tags/React/" style="font-size: 1.2em; color: rgb(16, 156, 75)">React</a><a href="/tags/Framework/" style="font-size: 1.25em; color: rgb(179, 133, 79)">Framework</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(17, 51, 71)">TypeScript</a><a href="/tags/FrontEnd/" style="font-size: 1.2em; color: rgb(170, 186, 27)">FrontEnd</a><a href="/tags/Vue/" style="font-size: 1.2em; color: rgb(124, 158, 78)">Vue</a><a href="/tags/JS-Basic/" style="font-size: 1.25em; color: rgb(72, 17, 128)">JS Basic</a><a href="/tags/Regex/" style="font-size: 1.15em; color: rgb(173, 141, 53)">Regex</a><a href="/tags/Vite/" style="font-size: 1.15em; color: rgb(10, 135, 102)">Vite</a><a href="/tags/Build-Tool/" style="font-size: 1.15em; color: rgb(82, 136, 114)">Build Tool</a><a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 1.35em; color: rgb(10, 177, 9)">数据结构</a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 1.3em; color: rgb(149, 159, 179)">算法</a><a href="/tags/cloudflare/" style="font-size: 1.15em; color: rgb(157, 49, 150)">cloudflare</a><a href="/tags/%E5%9F%9F%E5%90%8D/" style="font-size: 1.15em; color: rgb(133, 31, 183)">域名</a><a href="/tags/Git/" style="font-size: 1.15em; color: rgb(30, 126, 140)">Git</a><a href="/tags/GitHub/" style="font-size: 1.15em; color: rgb(132, 91, 43)">GitHub</a><a href="/tags/%E5%88%86%E5%B8%83%E5%BC%8F%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/" style="font-size: 1.15em; color: rgb(109, 91, 159)">分布式管理系统</a><a href="/tags/Windows/" style="font-size: 1.2em; color: rgb(92, 28, 33)">Windows</a><a href="/tags/%E4%BB%BB%E5%8A%A1%E6%A0%8F/" style="font-size: 1.15em; color: rgb(63, 28, 140)">任务栏</a><a href="/tags/%E7%BE%8E%E5%8C%96/" style="font-size: 1.15em; color: rgb(107, 35, 13)">美化</a><a href="/tags/Ubuntu/" style="font-size: 1.15em; color: rgb(156, 164, 160)">Ubuntu</a><a href="/tags/%E8%99%9A%E6%8B%9F%E6%9C%BA/" style="font-size: 1.15em; color: rgb(157, 129, 19)">虚拟机</a><a href="/tags/%E7%BA%BF%E6%80%A7%E8%A1%A8/" style="font-size: 1.15em; color: rgb(46, 4, 41)">线性表</a><a href="/tags/%E6%A0%88/" style="font-size: 1.15em; color: rgb(153, 95, 46)">栈</a><a href="/tags/%E9%98%9F%E5%88%97/" style="font-size: 1.15em; color: rgb(48, 183, 163)">队列</a><a href="/tags/%E7%BB%AA%E8%AE%BA/" style="font-size: 1.15em; color: rgb(41, 83, 112)">绪论</a><a href="/tags/Java/" style="font-size: 1.15em; color: rgb(142, 131, 143)">Java</a><a href="/tags/%E7%BC%96%E7%A8%8B%E5%AD%A6%E4%B9%A0/" style="font-size: 1.15em; color: rgb(192, 53, 14)">编程学习</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
<i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/08/"><span class="card-archive-list-date">八月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">三月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/02/"><span class="card-archive-list-date">二月 2024</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">十二月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">6</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/03/"><span class="card-archive-list-date">三月 2023</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">31</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2022-05-01T00:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">178k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-08-18T06:35:10.936Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background: transparent"><div id="footer-wrap"><div class="copyright">©2022 - 2024 By 希亚的西红柿</div><div class="footer_custom_text"><p class="para"><a target="_blank"style="display: inline-block; margin-inline: 5px"href="https://hexo.io/" rel="external nofollow noreferrer"title="博客框架为Hexo_v5.4.2"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo"/></a><a target="_blank"style="display: inline-block; margin-inline: 5px"href="https://butterfly.js.org/" rel="external nofollow noreferrer"title="主题版本Butterfly_v4.9.0"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender"/></a><a target="_blank"style="display: inline-block; margin-inline: 5px"href="https://github.com/" rel="external nofollow noreferrer"title="本站项目由Github托管"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub"/></a><a target="_blank"style="display: inline-block; margin-inline: 5px"href="https://www.jsdelivr.com/" rel="external nofollow noreferrer"title="本站使用JsDelivr为静态资源提供CDN加速"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr"/></a><a target="_blank"style="display: inline-block; margin-inline: 5px"href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer"title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris"/></a><a target="_blank"style="display: inline-block; margin-inline: 5px"href="https://icp.gov.moe/?keyword=20231751" rel="external nofollow noreferrer"title="萌ICP备20231751号"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/%E8%90%8CICP%E5%A4%87-20231751-fe1384?style-flat&logo=data:image/png;base64,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"/></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://npm.elemecdn.com/@fancyapps/ui@latest/dist/fancybox/fancybox.umd.js"></script><script src="https://npm.elemecdn.com/instant.page@latest/instantpage.js" type="module"></script><script src="https://npm.elemecdn.com/vanilla-lazyload@latest/dist/lazyload.iife.min.js"></script><div class="js-pjax"></div><script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: 'https://twikoo.refrain.site/',
region: '',
pageSize: 5,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.id,
'date': new Date(e.created).toISOString()
}
})
saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10/(60*24))
generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.textContent= "无法获取评论，请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn.jsdelivr.net/npm/twikoo@latest/dist/twikoo.all.min.js').then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script><div id="my-aplayer" class="aplayer no-destroy" data-id="705468337" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="false" data-order="random" data-volume="0.55" data-theme="#80c8f8" data-preload="none"></div><script src="/js/hideLrc.js" async></script><script src="https://npm.elemecdn.com/butterfly-extsrc@latest/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@latest/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://npm.elemecdn.com/aplayer@latest/dist/APlayer.min.js"></script><script src="https://npm.elemecdn.com/butterfly-extsrc@latest/metingjs/dist/Meting.min.js"></script><script src="https://npm.elemecdn.com/pjax@latest/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
var pjax = new Pjax({
elements: 'a:not([target="_blank"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
})
document.addEventListener('pjax:send', function () {
// removeEventListener scroll
window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
if (!window.aplayers[i].options.fixed) {
window.aplayers[i].destroy()
}
}
}
typeof typed === 'object' && typed.destroy()
//reset readmode
const $bodyClassList = document.body.classList
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
typeof disqusjs === 'object' && disqusjs.destroy()
})
document.addEventListener('pjax:complete', function () {
window.refreshFn()
document.querySelectorAll('script[data-pjax]').forEach(item => {
const newScript = document.createElement('script')
const content = item.text || item.textContent || item.innerHTML || ""
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
newScript.appendChild(document.createTextNode(content))
item.parentNode.replaceChild(newScript, item)
})
GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
typeof panguInit === 'function' && panguInit()
// google analytics
typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});
// baidu analytics
typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/><script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script><script>(() => {
function getRelativePath(url) {
const { pathname, hash } = new URL(url, location.origin);
return pathname.replace(/index\.html$/, true ? "" : ".html") + hash;
}
docsearch(
Object.assign(
{
appId: "RKUHH8C2A1",
apiKey: "8bf4436c1bda6de9adf486bbbbe5daec",
indexName: "refrain",
container: "#docsearch",
},
{
placeholder: "搜索文档",
translations: {
button: { buttonText: "搜索", buttonAriaLabel: "搜索" },
modal: {
searchBox: {
resetButtonTitle: "清除查询条件",
resetButtonAriaLabel: "清除查询条件",
cancelButtonText: "取消",
cancelButtonAriaLabel: "取消",
},
startScreen: {
recentSearchesTitle: "搜索历史",
noRecentSearchesText: "没有搜索历史",
saveRecentSearchButtonTitle: "保存到搜索历史",
removeRecentSearchButtonTitle: "从搜索历史中移除",
favoriteSearchesTitle: "收藏",
removeFavoriteSearchButtonTitle: "从收藏中移除",
},
errorScreen: {
titleText: "无法获取结果",
helpText: "你可能需要检查你的网络连接",
},
footer: {
selectText: "选择",
selectKeyAriaLabel: "Enter key",
navigateText: "切换",
navigateUpKeyAriaLabel: "Arrow up",
navigateDownKeyAriaLabel: "Arrow down",
closeText: "关闭",
closeKeyAriaLabel: "Escape key",
searchByText: "搜索供应商",
},
noResultsScreen: {
noResultsText: "无法找到相关结果",
suggestedQueryText: "你可以尝试查询",
reportMissingResultsText: "你认为这个查询应该有结果？",
reportMissingResultsLinkText: "向我们反馈",
},
},
},
transformItems(items) {
return items.map((item) => {
return Object.assign({}, item, {
url: getRelativePath(item.url),
});
});
},
navigator: {
navigate({ itemUrl }) {
pjax.loadUrl(itemUrl);
},
},
hitComponent({ hit, children }) {
return {
__v: null,
type: "a",
ref: undefined,
constructor: undefined,
key: undefined,
props: {
href: hit.url,
children,
onClick: (e) => {
e.preventDefault();
pjax.loadUrl(hit.url);
},
},
};
},
}
)
);
const searchClickFn = () => {
document
.querySelector("#search-button > .search")
.addEventListener("click", () => {
document.querySelector(".DocSearch-Button").click();
});
};
searchClickFn();
window.addEventListener("pjax:complete", searchClickFn);
})();</script></div></div><!-- hexo injector body_end start -->
<script src="https://cdn.jsdelivr.net/gh/nova1751/hexo-shiki-plugin@latest/lib/codeblock.min.js"></script>
<script>
const CODE_CONFIG = {
beautify: true,
highlightCopy: true,
highlightLang: true,
highlightHeightLimit: 360,
isHighlightShrink: false,
copy: {
success: '复制成功',
error: '复制失败',
noSupport: '浏览器不支持',
}
};
console.log(
`%c hexo-shiki-plugin %c v1.0.25 %c https://github.com/nova1751/hexo-shiki-plugin`,
"color: #fff; background: #5f5f5f",
"color: #fff; background: #80c8f8",
""
);
</script>
<script data-pjax>
function butterfly_clock_injector_config(){
var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://cdn.jsdelivr.net/npm/hexo-butterfly-clock-nova1751@latest/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
if(parent_div_git) {
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
}
}
var elist = 'null'.split(',');
var cpage = location.pathname;
var epage = 'all';
var qweather_key = 'ec43383f3cf34cf5980da257996d16db';
var gaud_map_key = '42b66694cf0de3cdd1627f1b09aa977d';
var baidu_ak_key = 'undefined';
var flag = 0;
var clock_rectangle = '112.982279,28.19409';
var clock_default_rectangle_enable = 'false';
for (var i=0;i<elist.length;i++){
if (cpage.includes(elist[i])){
flag++;
}
}
if ((epage ==='all')&&(flag == 0)){
butterfly_clock_injector_config();
}
else if (epage === cpage){
butterfly_clock_injector_config();
}
</script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.jsdelivr.net/npm/hexo-butterfly-clock-nova1751@latest/lib/clock.min.js"></script><script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script><!-- hexo injector body_end end --></body></html>