-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
2628 lines (1149 loc) · 68.4 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
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<!-- title -->
<!-- keywords -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="author" content="Jacleklm">
<meta name="renderer" content="webkit">
<meta name="copyright" content="Jacleklm">
<meta name="keywords" content="hexo,hexo-theme,hexo-blog">
<meta name="description" content="FullStack Engineer in Narwal. Focus on Frontend.">
<meta name="description" content="FullStack Engineer in Narwal. Focus on Frontend.">
<meta property="og:type" content="website">
<meta property="og:title" content="Jacleklm">
<meta property="og:url" content="http://jacleklm.github.io/index.html">
<meta property="og:site_name" content="Jacleklm">
<meta property="og:description" content="FullStack Engineer in Narwal. Focus on Frontend.">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Jacleklm">
<meta name="twitter:card" content="summary">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" href="/assets/favicon.ico">
<title>Jacleklm's Blog</title>
<!-- /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/ -->
<script>
(function (w) {
'use strict'
// rel=preload support test
if (!w.loadCSS) {
w.loadCSS = function () {}
}
// define on the loadCSS obj
var rp = (loadCSS.relpreload = {})
// rel=preload feature support test
// runs once and returns a function for compat purposes
rp.support = (function () {
var ret
try {
ret = w.document.createElement('link').relList.supports('preload')
} catch (e) {
ret = false
}
return function () {
return ret
}
})()
// if preload isn't supported, get an asynchronous load by using a non-matching media attribute
// then change that media back to its intended value on load
rp.bindMediaToggle = function (link) {
// remember existing media attr for ultimate state, or default to 'all'
var finalMedia = link.media || 'all'
function enableStylesheet() {
link.media = finalMedia
}
// bind load handlers to enable media
if (link.addEventListener) {
link.addEventListener('load', enableStylesheet)
} else if (link.attachEvent) {
link.attachEvent('onload', enableStylesheet)
}
// Set rel and non-applicable media type to start an async request
// note: timeout allows this to happen async to let rendering continue in IE
setTimeout(function () {
link.rel = 'stylesheet'
link.media = 'only x'
})
// also enable media after 3 seconds,
// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
setTimeout(enableStylesheet, 3000)
}
// loop through link elements in DOM
rp.poly = function () {
// double check this to prevent external calls from running
if (rp.support()) {
return
}
var links = w.document.getElementsByTagName('link')
for (var i = 0; i < links.length; i++) {
var link = links[i]
// qualify links to those with rel=preload and as=style attrs
if (
link.rel === 'preload' &&
link.getAttribute('as') === 'style' &&
!link.getAttribute('data-loadcss')
) {
// prevent rerunning on link
link.setAttribute('data-loadcss', true)
// bind listeners to toggle media back
rp.bindMediaToggle(link)
}
}
}
// if unsupported, run the polyfill
if (!rp.support()) {
// run once at least
rp.poly()
// rerun poly on an interval until onload
var run = w.setInterval(rp.poly, 500)
if (w.addEventListener) {
w.addEventListener('load', function () {
rp.poly()
w.clearInterval(run)
})
} else if (w.attachEvent) {
w.attachEvent('onload', function () {
rp.poly()
w.clearInterval(run)
})
}
}
// commonjs
if (typeof exports !== 'undefined') {
exports.loadCSS = loadCSS
} else {
w.loadCSS = loadCSS
}
})(typeof global !== 'undefined' ? global : this)
</script>
<style type="text/css">
@font-face {
font-family: 'Oswald-Regular';
src: url("/font/Oswald-Regular.ttf");
}
body {
margin: 0;
}
header,
footer,
.back-top,
.sidebar,
.container,
.site-intro-meta,
.toc-wrapper {
display: none;
}
.site-intro {
position: relative;
z-index: 3;
width: 100%;
/* height: 50vh; */
overflow: hidden;
}
.site-intro-placeholder {
position: absolute;
z-index: -2;
top: 0;
left: 0;
width: calc(100% + 300px);
height: 100%;
background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
background-position: center center;
transform: translate3d(-226px, 0, 0);
animation: gradient-move 2.5s ease-out 0s infinite;
}
@keyframes gradient-move {
0% {
transform: translate3d(-226px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
<link rel="preload" href="/css/style.css?v=20211217" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/dark.css?v=20211217" as="style">
<link rel="stylesheet" href="/css/dark.css">
<link rel="stylesheet" href="/css/mobile.css?v=20211217" media="(max-width: 960px)">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" as="script">
<link rel="preload" href="/scripts/main.js?v=20211217" as="script">
<link rel="preload" href="/scripts/dark.js?v=20211217" as="script">
<link rel="preload" href="/font/Oswald-Regular.ttf" as="font" crossorigin>
<link rel="preload" href="https://at.alicdn.com/t/font_327081_1dta1rlogw17zaor.woff" as="font" crossorigin>
<!-- algolia -->
<!-- 百度统计 -->
<!-- Google tag (gtag.js) -->
<meta name="generator" content="Hexo 6.3.0"></head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript">
if (typeof window.$ == undefined) {
console.warn('jquery load from jsdelivr failed, will load local script')
document.write('<script src="/lib/jquery.min.js" />')
}
</script>
<body class="home-body">
<!-- header -->
<header class="header header-mobile index-header">
<!-- top read progress line -->
<div class="header-element">
<div class="read-progress"></div>
</div>
<!-- sidebar menu button -->
<div class="header-element">
<div class="header-sidebar-menu">
<div style="padding-left: 1px;"></div>
</div>
</div>
<!-- header actions -->
<div class="header-actions">
<!-- theme mode switch button -->
<span class="header-theme-btn header-element">
<i class="fas fa-adjust"></i>
</span>
<!-- back to home page text -->
<span class="home-link header-element">
<a href=/>Jacleklm's Blog</a>
</span>
</div>
<!-- toggle banner for post layout -->
</header>
<!-- fixed footer -->
<footer class="footer-fixed index-footer-fixed">
<!-- back to top button -->
<div class="footer-fixed-element">
<div class="back-top back-top-hidden">
<div></div>
</div>
</div>
</footer>
<!-- wrapper -->
<div class="wrapper">
<div class="site-intro" style="
height:50vh;
">
<!-- 主页 -->
<!-- 文章页 -->
<div class="site-intro-placeholder"></div>
<div class="site-intro-img" style="background-image: url(/intro/index-bg.jpg)"></div>
<div class="site-intro-meta">
<!-- 标题 -->
<h1 class="intro-title">
<!-- 主页 -->
Jacleklm's Blog
<!-- 文章页 -->
</h1>
<!-- 副标题 -->
<p class="intro-subtitle">
<!-- 主页副标题 -->
<!-- 文章页 -->
</p>
<!-- 文章页 meta -->
</div>
</div>
<script>
// get user agent
function getBrowserVersions() {
var u = window.navigator.userAgent
return {
userAgent: u,
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
iPad: u.indexOf('iPad') > -1, //是否为iPad
webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') == -1, //是否为微信浏览器
uc: u.indexOf('UCBrowser') > -1, //是否为android下的UC浏览器
}
}
var browser = {
versions: getBrowserVersions(),
}
console.log('userAgent: ' + browser.versions.userAgent)
// callback
function fontLoaded() {
console.log('font loaded')
if (document.getElementsByClassName('site-intro-meta')) {
document
.getElementsByClassName('intro-title')[0]
.classList.add('intro-fade-in')
document
.getElementsByClassName('intro-subtitle')[0]
.classList.add('intro-fade-in')
var postIntros = document.getElementsByClassName('post-intros')[0]
if (postIntros) {
postIntros.classList.add('post-fade-in')
}
}
}
// UC不支持跨域，所以直接显示
function asyncCb() {
if (browser.versions.uc) {
console.log('UCBrowser')
fontLoaded()
} else {
WebFont.load({
custom: {
families: ['Oswald-Regular'],
},
loading: function () {
// 所有字体开始加载
// console.log('font loading');
},
active: function () {
// 所有字体已渲染
fontLoaded()
},
inactive: function () {
// 字体预加载失败，无效字体或浏览器不支持加载
console.log('inactive: timeout')
fontLoaded()
},
timeout: 5000, // Set the timeout to two seconds
})
}
}
function asyncErr() {
console.warn('script load from CDN failed, will load local script')
}
// load webfont-loader async, and add callback function
function async(u, cb, err) {
var d = document,
t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0]
o.src = u
if (cb) {
o.addEventListener(
'load',
function (e) {
cb(null, e)
},
false
)
}
if (err) {
o.addEventListener(
'error',
function (e) {
err(null, e)
},
false
)
}
s.parentNode.insertBefore(o, s)
}
var asyncLoadWithFallBack = function (arr, success, reject) {
var currReject = function () {
reject()
arr.shift()
if (arr.length) async(arr[0], success, currReject)
}
async(arr[0], success, currReject)
}
asyncLoadWithFallBack(
[
'https://cdn.jsdelivr.net/npm/[email protected]/webfontloader.min.js',
'https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js',
"/lib/webfontloader.min.js",
],
asyncCb,
asyncErr
)
</script>
<img class="loading" src="/assets/loading.svg" style="display: block; margin: 6rem auto 0 auto; width: 6rem; height: 6rem;" />
<div class="container container-unloaded">
<main class="main index-page">
<article class="index-post">
<a class="abstract-title" href="/2022/04/30/Python%20Basic/">
<span class="abstract-title-text">Python Basic Knowledge</span>
</a>
<div class="abstract-content">
概述基本来源于菜鸟教程
入门简介
Python 是一种解释型语言： 这意味着开发过程中没有了编译这个环节。类似于PHP和Perl语言。
Python 是交互式语言： 这意味着，您可以在一个 Python 提示符 >>> 后直接执行代码。
Python 是面向对象语言: 这意味着Python支持面向对象的风格或代码封装在对象的编程技术。
环境
需配置一些环境变量，暂不做 https://www.runoob.com/python3/python3-install.html
运行
python fileName.py运行
用vs code右键
数据类型
多行语句。Py...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2022/04/30</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="Python">Python</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2021/04/17/%E8%A7%A3%E5%86%B3hexo%20g%E7%94%9F%E6%88%90index.html%E4%B8%BA%E7%A9%BA%E7%9A%84%E9%97%AE%E9%A2%98/">
<span class="abstract-title-text">解决hexo g生成index.html为空的问题</span>
</a>
<div class="abstract-content">
背景最近一段时间博客通过域名访问的方式一直访问为空白页面，我以为是github的问题过段时间就好了，就没太管，后来一直没恢复，于是查了下是什么原因。刚开始以为是githubpage的问题，往这个方向折腾了好久没啥结果… 不过也知道到了 username.github.io 下可以通过路由的方式部署多个项目，问题没解决不过也没白折腾吧。
问题最终发现是之前没管的hexo的循环依赖问题：hexo -s预览博客的时候出现循环引用的报错：hexo (node:7801) Warning: Accessing non-existent property 'filename'...。...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2021/04/17</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="工具">工具</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/12/09/TypeScript%E4%B8%AD%E7%9A%84%E5%86%85%E7%BD%AE%E5%B7%A5%E5%85%B7%E7%B1%BB%E5%9E%8B%E5%8F%8A%E5%85%B6%E5%AE%9E%E7%8E%B0/">
<span class="abstract-title-text">TypeScript中的内置工具类型及其实现</span>
</a>
<div class="abstract-content">
先来看下基础实现 clone，把 T 里面的都拷贝一次：
123type cloneT<T> = { [K in keyof T]: T[K];};
Partial用法将类型定义的所有属性都修改为可选
12345678910type Foo = { name: string; age: number;}type Coord = Partial<Foo>// 等同于type Coord = { name?: string; age?: number;}
实现123type Partial<T...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/12/09</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="TypeScript">TypeScript</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/12/07/TypeScript%E4%B8%AD%E7%9A%84%E7%B1%BB%E5%9E%8B%E7%BC%96%E7%A8%8B/">
<span class="abstract-title-text">TypeScript中的类型编程</span>
</a>
<div class="abstract-content">
前言本篇文章是读了林不渡的TypeScript 的另一面：类型编程，码了一些 demo 并查了其他文档等最后留下的学习笔记。建议直接读原文，本文可读性较差
类型编程的特点/看法
它会带来代码量大大增多（可能接近甚至超过业务代码），编码耗时增长等问题，而带来的唯一好处就是类型安全，包括的类型提示，进一步减少可能存在的调用错误，以及降低维护成本。看起来似乎有得有失，但实际上，假设你花费 1 单位脑力使用基础的 TS 以及简单的类型编程，你就能够获得 5 个单位的回馈。但接下来，有可能你花费 10 个单位脑力，也只能再获得 2 个单位的回馈
另外一个类型编程不受重视的原因则是实际业务...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/12/07</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="TypeScript">TypeScript</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/11/03/hope%20statistics%20puppeteer%E5%B7%A5%E5%85%B7%E5%B0%8F%E7%BB%93/">
<span class="abstract-title-text">hope statistics puppeteer 工具小结</span>
</a>
<div class="abstract-content">
PuppeteerPuppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。Chrome 作为浏览器市场的领头羊，Chrome Headless 将成为 web 应用 自动化测试 的行业标杆
Headless浏览器是指没有窗口的浏览器
用处通过 Puppeteer 我们可以让浏览器帮我们自动完成很多事情, 例如 ：
生成页面的截图或者PDF
自动表单提交 (模拟登陆等)，UI测试，键盘输入
创建自动化测试环境
具体API见官方文档
hope statistics puppeteer一个基于 puppeteer 和 node 编写的...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/11/03</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="Node">Node</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/11/03/%E7%94%A8%20node.js%20%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BA%A4%E4%BA%92%E7%9A%84%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%BA%94%E7%94%A8/">
<span class="abstract-title-text">用 node.js 开发一个可交互的命令行应用</span>
</a>
<div class="abstract-content">
原生 node
用 process.argv 直接读取
process.stdin.on 劫持输入
readline 模块 进行逐行读取。该模块提供了一个接口，用于一次一行地读取可读流（例如 process.stdin）中的数据12345678910111213141516171819202122const app = require('./app')const readline = require('readline');const rl = readline.createInterface({ input: process.stdi...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/11/03</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="Node">Node</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/07/15/%E3%80%8A%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BANode.js%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">
<span class="abstract-title-text">《深入浅出Node.js》读书笔记</span>
</a>
<div class="abstract-content">
感受：这本书更偏向于讲 NodeJS 的大纲和原理。所以本笔记只讲原理和case，对于API不熟的请翻文档，或看小卡的笔记, 或看poetries的笔记
第一章 Node 简介Chrome 浏览器的组成和 Node 的组件组成
Node 的特点
异步 I/O。eg. Ajax, fs.readFile 等，Node 中绝大数的操作都以异步的方式进行调用
事件与回调函数。将前端中广泛成熟点时间机制引入后端，配合 IO 使用，eg. 监听 request 事件，然后执行回调函数
单线程。保留了 JS 在浏览器中单线程的特点
优点：不用在意状态的同步问题，没有死锁的存在，也没有上下...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/07/15</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="Nodejs">Nodejs</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/06/27/babel-plugin-import/">
<span class="abstract-title-text">按需加载 & 样式自动加载 —— babel-plugin-import</span>
</a>
<div class="abstract-content">
几乎完全转自 一篇文章搞定 babel-plugin-import 插件 ，可以理解为 读后 & 自己敲一遍 的笔记，建议直接读原文章
Background我们用 element-ui 或 antd 的时候，样式都支持全局引入和按需引入。按需引入需要安装一个 babel-plugin-import 的插件，将全局的写法变成按需引入的写法。其实也是用了AST语法树转换的原理，实现
1234import { Button } from 'antd'; ↓ ↓ ↓ ↓ ↓ ↓var _button = require('ant...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/06/27</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="webpack">webpack</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/06/25/AST%E8%AF%A6%E8%A7%A3/">
<span class="abstract-title-text">AST详解</span>
</a>
<div class="abstract-content">
TODO：还有这篇 字节分享几乎完全转自 AST 团队分享 ，可以理解为 读后 & 自己敲一遍 的笔记
What & Why
What: 抽象语法树（Abstract Syntax Tree，简称 AST）是源代码的抽象语法结构的树状表现形式
Why:
webpack、eslint 等很多工具库的核心都是通过抽象语法树来实现对代码的检查、分析等操作
浏览器就是通过将 js 代码转化为抽象语法树来进行下一步的分析等其他操作，所以将 js 转化为抽象语法树更利于程序的分析
一个简单的例子:
首先一段代码转换成的抽象语法树是一个对象，该对象会有一个顶级的 type 属性 P...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/06/25</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="webpack">webpack</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/05/27/%E6%B8%B2%E6%9F%93%E6%96%B9%E6%A1%88/">
<span class="abstract-title-text">渲染方案</span>
</a>
<div class="abstract-content">
长列表 / 无限下拉列表 渲染考虑到性能，我们不可能将一个长列表（甚至是一个无限下拉列表）的所有列表元素都进行渲染，应该是只渲染部分数据并随着下拉渲染新数据
方案一：Intersection Observer + padding该方案来自云音乐-一个简洁、有趣的无限下拉方案
Intersection Observer详见MDN，建议全都读完
一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事。传统的各种方案不但复杂，而且性能成本很高，比如需要监听滚动事件，然后查询 DOM , 获取元素高度、位置，计算距离视窗高度等等。
这就是 Intersection Obs...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/05/27</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="解决方案">解决方案</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/05/26/%E5%93%88%E5%B8%8C%E8%A1%A8%20&%20%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/">
<span class="abstract-title-text">哈希表 & 哈希算法</span>
</a>
<div class="abstract-content">
定义哈希表 (散列表)在线性表中，所有的数据都是顺序存储，当我们需要在线性表中查找某一数据时，当线性表过长，需要查找的数据排序比较靠后的话，就需要花费大量的时间，导致查找性能较差
所以我们可以把数据存在哈希表中，通过 key 去拿到数据。这个过程可以描述为：
拿到key(关键字) > 关键字通过散列函数(哈希函数)计算出来的值则称为散列值（哈希值、Hash 值） > 过散列值到**散列表（哈希表、Hash 表)**中就可以获取检索值
如下图：
所以我们需要存的信息有：key，散列函数，散列表信息。所以，散列表是一种空间换时间的存储结构，是在算法中提升效率的一种比较常用的方...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/05/26</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="Data structure">Data structure</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<article class="index-post">
<a class="abstract-title" href="/2020/05/23/React%20-%20Hook/">
<span class="abstract-title-text">React - Hook</span>
</a>
<div class="abstract-content">
本文大部分来自ConardLi 的 blog，建议直接看原博客
What & Why使用 Hooks，你可以在将含有 state 的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks 可以帮助你在不重写组件结构的情况下复用这些逻辑。所以，它也可以作为一种实现状态逻辑复用的方案解决了 HOC 嵌套地狱的问题，使得逻辑复用更加清晰
State HookuseState 是一个钩子，他可以为函数式组件增加一些状态，并且提供改变这些状态的函数，同时它接收一个参数，这个参数作为状态的默认值
Effect HookEffect Hook 可以让你在函数组件中执行一些具有 s...
</div>
<!-- read more -->
<div class="abstract-post-meta">
<!-- date -->
<div class="abstract-date" title="Last updated: 2023/09/17">
<span class="abstract-calander iconfont-archer"></span><span class="abstract-time">2020/05/23</span>
</div>
<!-- tags -->
<div class= abstract-tags >
<a class="post-tag" href="javascript:void(0);" data-tags="框架">框架</a>
</div>
</div>
</article>
<div class="index-post-divider"></div>
<!-- paginator -->
<nav class="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">…</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/2/">NEXT ></a>
</nav>
</main>
<!-- profile -->
<div class="profile">
<img class="profile-avatar" alt="avatar" src= /avatar/Misaka.jpg />
<div class="profile-name">Jacleklm</div>
<div class="profile-signature">
witness me
</div>
<div class="profile-social">
<a href="mailto:[email protected]" class="iconfont-archer email" title=email ></a>
<a href="//github.com/jacleklm" class="iconfont-archer github" target="_blank" title=github></a>
<span class="iconfont-archer wechat" title=wechat>
<img class="profile-qr" src="/assets/example_qr.png" />
</span>