-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
547 lines (374 loc) · 40.1 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>sanks的博客</title>
<subtitle>知识付诸行动才有转换为能力的效果</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://www.sanks-blog.com/"/>
<updated>2022-01-03T15:09:23.381Z</updated>
<id>https://www.sanks-blog.com/</id>
<author>
<name>sanks</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>树形表格组件</title>
<link href="https://www.sanks-blog.com/tree-table-component/"/>
<id>https://www.sanks-blog.com/tree-table-component/</id>
<published>2021-12-15T15:25:41.000Z</published>
<updated>2022-01-03T15:09:23.381Z</updated>
<summary type="html">
<div class="note info"><h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2></div>
<blockquote><p>距离上一篇博客有一月有余了吧，对于写博客的目的而言，我其实就是为了抒发自己无处宣泄的技术主张，在编写组件的过程中，很多同事嘲笑我“沉迷于组件”，也有的人让我“拿来主义”，并逼迫产品修改设计的重要显示和功能，但是我认为一个合格的程序员真的不应该是当这样的程序员，我何尝不知道工期紧，任务重，虽说我是修改别人的组件实现的最终效果吧，但是我这起码是当躲不开“造轮子”环节的时候，依然迎难而上。</p>
</blockquote>
</summary>
<category term="Vue" scheme="https://www.sanks-blog.com/categories/Vue/"/>
<category term="Vue" scheme="https://www.sanks-blog.com/tags/Vue/"/>
</entry>
<entry>
<title>requestAnimationFrame解决传统定时器的BUG</title>
<link href="https://www.sanks-blog.com/requestAnimationFrame/"/>
<id>https://www.sanks-blog.com/requestAnimationFrame/</id>
<published>2021-11-07T03:05:45.000Z</published>
<updated>2022-01-03T15:09:23.378Z</updated>
<summary type="html">
<div class="note info"><h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2></div>
<blockquote><p>当你写一个倒计时组件时，可能会出现的解决方案是应用 setInterval来做的。<br>我摘取网上的setInterval的实例代码，测试一下这个倒计时的误差。</p>
</blockquote>
<blockquote><p><span class="sanks-keywords">读者的疑问：一个倒计时组件，需要做的这么精准吗？</span><br>我的回答：这要看你对性能的要求是否是精益求精了，本着对计时精度的严格要求，尽量缩小倒计时误差，减小手机浏览器的内存消耗等很有必要；最重要的是，为以后的购物“秒杀”做准备，此组件扩展成“秒杀组件”是很简单的事。</p>
</blockquote>
</summary>
<category term="React" scheme="https://www.sanks-blog.com/categories/React/"/>
<category term="React" scheme="https://www.sanks-blog.com/tags/React/"/>
</entry>
<entry>
<title>程序员的自我修养</title>
<link href="https://www.sanks-blog.com/The-interview-experience/"/>
<id>https://www.sanks-blog.com/The-interview-experience/</id>
<published>2020-12-27T13:41:55.000Z</published>
<updated>2021-12-26T09:13:13.627Z</updated>
<summary type="html">
Welcome to my blog, enter password to read.
</summary>
<category term="随笔" scheme="https://www.sanks-blog.com/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="随笔" scheme="https://www.sanks-blog.com/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>如何使js进入休眠或等待</title>
<link href="https://www.sanks-blog.com/javascript-go-sleep-to-wait-next-execute/"/>
<id>https://www.sanks-blog.com/javascript-go-sleep-to-wait-next-execute/</id>
<published>2020-08-22T01:32:38.000Z</published>
<updated>2020-08-22T02:08:38.751Z</updated>
<summary type="html">
<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><blockquote><p>在做react的转场动画时，偶然想得一个解决方案中，需要拦截 React-router4 中 Prompt 的操作时，想让进程休眠，来执行转场动画，遗憾的是没有成功，但是意外获得了新技能 - javascript的休眠方法</p>
</blockquote>
<h2 id="如何编写sleep函数"><a href="#如何编写sleep函数" class="headerlink" title="如何编写sleep函数"></a>如何编写sleep函数</h2><blockquote><p>不卖关子了，直接上代码，不过需要你自己去验证，<span class="sanks-keywords">正所谓授之以鱼不如授之以渔</span></p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://www.sanks-blog.com/categories/JavaScript/"/>
<category term="ES6" scheme="https://www.sanks-blog.com/categories/JavaScript/ES6/"/>
<category term="ES6" scheme="https://www.sanks-blog.com/tags/ES6/"/>
<category term="JavaScript" scheme="https://www.sanks-blog.com/tags/JavaScript/"/>
</entry>
<entry>
<title>前端框架设计及技术预研</title>
<link href="https://www.sanks-blog.com/front-end-framework/"/>
<id>https://www.sanks-blog.com/front-end-framework/</id>
<published>2020-06-25T11:38:37.000Z</published>
<updated>2021-12-26T10:17:06.541Z</updated>
<summary type="html">
<div class="note info"><h2 id="权限拓展"><a href="#权限拓展" class="headerlink" title="权限拓展"></a>权限拓展</h2></div>
<blockquote><p>针对以往的权限控制职能到达页面及按钮级别，结合nodeJS中间件（路由代理），做出了延伸到接口的权限控制，概要图如下所示：</p>
<p><img src="/front-end-framework/permission.jpg" alt="permission structure chart" title="权限控制结构图"><br></p></blockquote>
</summary>
<category term="Framework" scheme="https://www.sanks-blog.com/categories/Framework/"/>
<category term="Framework" scheme="https://www.sanks-blog.com/tags/Framework/"/>
</entry>
<entry>
<title>通过例子解释防抖动和节流</title>
<link href="https://www.sanks-blog.com/debounce-and-throttle/"/>
<id>https://www.sanks-blog.com/debounce-and-throttle/</id>
<published>2020-05-20T15:40:45.000Z</published>
<updated>2020-07-29T11:46:25.270Z</updated>
<summary type="html">
<h2 id="译文说明"><a href="#译文说明" class="headerlink" title="译文说明"></a>译文说明</h2><blockquote><p>作者：David Corbacho<br>原文链接：<a href="https://css-tricks.com/debouncing-throttling-explained-examples/" rel="external nofollow noopener noreferrer" target="_blank">https://css-tricks.com/debouncing-throttling-explained-examples/</a></p>
</blockquote>
<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><blockquote><p><span style="font-style: italic">以下是伦敦前端工程师 <a href="https://twitter.com/dcorbacho" rel="external nofollow noopener noreferrer" target="_blank">David Corbacho</a> 的客座文章。我们已经<a href="https://css-tricks.com/the-difference-between-throttling-and-debouncing/" rel="external nofollow noopener noreferrer" target="_blank">之前讨论过这个主题</a>，但是这次，David将通过交互式演示来讲解这些概念，使事情变得非常清楚。</span></p>
</blockquote>
<blockquote><p><span style="font-weight: bolder">Debounce</span> 和 <span style="font-weight: bolder">throttle</span> 是两种类似(但不同的!)的技术，用于控制我们允许一个函数在一段时间内执行多少次。</p>
</blockquote>
<blockquote><p>在将函数附加到DOM事件时，具有函数的防抖动或节流的版本尤其有用。为什么呢?因为我们在事件和函数的执行之间给了自己一个控制层。请记住，我们不控制这些DOM事件的发出频率。它可以变化。</p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://www.sanks-blog.com/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.sanks-blog.com/tags/JavaScript/"/>
</entry>
<entry>
<title>connected React Router</title>
<link href="https://www.sanks-blog.com/connected-React-Router/"/>
<id>https://www.sanks-blog.com/connected-React-Router/</id>
<published>2020-05-06T02:16:42.000Z</published>
<updated>2020-07-29T13:43:17.861Z</updated>
<summary type="html">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote><p>最近在使用 Connnected React Router 发现神奇的问题，居然没办法正常控制路由，身为专业的工程师，我们发挥福尔摩斯的精神，抽丝剥茧的找出问题出在哪。</p>
</blockquote>
<h2 id="什么是-Connected-React-Router"><a href="#什么是-Connected-React-Router" class="headerlink" title="什么是 Connected React Router"></a>什么是 Connected React Router</h2><blockquote><p>如果你使用Redux，那么在 Redux 中使用 Side Effect Handler（像是 Redux Thunk、Redux Observable 或是 Redux Saga）做「流程管理」的时候，那么你一定会有一种情境是</p>
<div class="note primary"><p>如果你做完某件事，把目前页面跳转到另一个页面</p></div>
<p>如果你也使用 React Router，那么 Connected React Router 就是帮你在 Redux 的流程中也可以使用 Router 的功能，（像是 push、 goBack … etc 之类的 Api 帮助你管理路由）</p>
</blockquote>
<blockquote><p>也就是说，Connected React Router 是帮助同步「Router」与「Redux」的状态，帮助你可以使用 Redux 管理 React Router 的工具！</p>
</blockquote>
</summary>
<category term="Redux" scheme="https://www.sanks-blog.com/categories/Redux/"/>
<category term="Redux" scheme="https://www.sanks-blog.com/tags/Redux/"/>
</entry>
<entry>
<title>前端感悟</title>
<link href="https://www.sanks-blog.com/front-end-comprehension/"/>
<id>https://www.sanks-blog.com/front-end-comprehension/</id>
<published>2020-04-16T12:11:40.000Z</published>
<updated>2022-01-03T14:47:09.772Z</updated>
<summary type="html">
Welcome to my blog, enter password to read.
</summary>
<category term="随笔" scheme="https://www.sanks-blog.com/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="随笔" scheme="https://www.sanks-blog.com/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>http request timeout</title>
<link href="https://www.sanks-blog.com/http-request-timeout/"/>
<id>https://www.sanks-blog.com/http-request-timeout/</id>
<published>2020-04-13T01:24:58.000Z</published>
<updated>2020-07-12T09:30:58.713Z</updated>
<summary type="html">
<h2 id="引语"><a href="#引语" class="headerlink" title="引语"></a>引语</h2><blockquote><p>鉴于之前axios版本升级，去掉了baseUrl配置的问题，前端对于axios库的升级未做版本固定，导致项目启动报错；除了写成固定版本，还可以自己写一套请求响应机制。</p>
</blockquote>
</summary>
<category term="axios" scheme="https://www.sanks-blog.com/categories/axios/"/>
<category term="request" scheme="https://www.sanks-blog.com/tags/request/"/>
</entry>
<entry>
<title>NodeJS Middleware</title>
<link href="https://www.sanks-blog.com/NodeJS-Middleware/"/>
<id>https://www.sanks-blog.com/NodeJS-Middleware/</id>
<published>2020-02-03T06:59:38.000Z</published>
<updated>2020-07-12T09:30:58.623Z</updated>
<summary type="html">
<h2 id="Nodejs-作为中间层能做的事"><a href="#Nodejs-作为中间层能做的事" class="headerlink" title="Nodejs 作为中间层能做的事"></a>Nodejs 作为中间层能做的事</h2><blockquote><p>nodejs中间层能减少开发过程中的一些实际问题，比如跨域，也能分担后台开发人员的工作，比如文件上传服务器，也能做简单的即时消息聊天功能，都是基于nodejs的特性。</p>
</blockquote>
<h3 id="反向代理和跨域"><a href="#反向代理和跨域" class="headerlink" title="反向代理和跨域"></a>反向代理和跨域</h3><blockquote><p>同源策略（SOP）是为了防止CSRF（跨域请求伪造）的攻击，浏览器引入的策略。<br><img src="/NodeJS-Middleware/sop.png" alt="同源策略" title="同源策略"></p>
</blockquote>
</summary>
<category term="Nodejs" scheme="https://www.sanks-blog.com/categories/Nodejs/"/>
<category term="Nodejs" scheme="https://www.sanks-blog.com/tags/Nodejs/"/>
</entry>
<entry>
<title>Flutter</title>
<link href="https://www.sanks-blog.com/Flutter/"/>
<id>https://www.sanks-blog.com/Flutter/</id>
<published>2020-02-01T07:53:14.000Z</published>
<updated>2020-07-29T13:43:17.859Z</updated>
<summary type="html">
<h2 id="引语"><a href="#引语" class="headerlink" title="引语"></a>引语</h2><blockquote><p>Flutter 是 Google 研发的 移动 UI 框架，可以快速在iOS和Android上构建高质量的原生用户界面。</p>
</blockquote>
<h2 id="Dart"><a href="#Dart" class="headerlink" title="Dart"></a>Dart</h2><blockquote><p>Dart 是 Flutter 的开发语言， 如同 IOS开发用 swift 一样, </p>
</blockquote>
<h2 id="Flutter-SDK"><a href="#Flutter-SDK" class="headerlink" title="Flutter SDK"></a>Flutter SDK</h2><blockquote><h3 id="Flutter-SDK里面有什么？"><a href="#Flutter-SDK里面有什么？" class="headerlink" title="Flutter SDK里面有什么？"></a>Flutter SDK里面有什么？</h3><ul>
<li>深度优化了的、移动优先的2D渲染引擎</li>
<li>现代、响应式框架</li>
<li>丰富的Android和iOS套件</li>
<li>单元和集成测试的API</li>
<li>连接到系统和第三方SDK的Interop和插件API</li>
<li>无头的测试运行器，用于在Windows、Linux和Mac上运行测试</li>
<li>用于创建、构建、测试和编译应用程序的命令行工具</li>
</ul>
</blockquote>
</summary>
<category term="Flutter" scheme="https://www.sanks-blog.com/categories/Flutter/"/>
<category term="Flutter" scheme="https://www.sanks-blog.com/tags/Flutter/"/>
</entry>
<entry>
<title>Mutiple SSH keys for diffrent github accounts</title>
<link href="https://www.sanks-blog.com/Mutiple-SSH-keys-for-diffrent-github-accounts/"/>
<id>https://www.sanks-blog.com/Mutiple-SSH-keys-for-diffrent-github-accounts/</id>
<published>2020-01-05T12:01:31.000Z</published>
<updated>2022-03-14T16:06:49.809Z</updated>
<summary type="html">
<h2 id="create-different-public-key"><a href="#create-different-public-key" class="headerlink" title="create different public key"></a>create different public key</h2><blockquote><p><span style="color: #fe2c23">Note: blog’s git configuration is global, others is in your project</span></p>
</blockquote>
<h3 id="create-different-ssh-key-according-to-your-need"><a href="#create-different-ssh-key-according-to-your-need" class="headerlink" title="create different ssh key according to your need"></a>create different ssh key according to your need</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -f ~/.ssh/id_rsa_activehacker -C &quot;[email protected]&quot;</span><br><span class="line">$ ssh-keygen -t rsa -f ~/.ssh/id_rsa_jexchan -C &quot;[email protected]&quot;</span><br></pre></td></tr></table></figure>
<blockquote><p>If your command line has no arguments “-f ~/.ssh/id_rsa_activehacker”, as following</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C &quot;<a href="mailto:[email protected]" rel="external nofollow noopener noreferrer" target="_blank">[email protected]</a>&quot;</span><br><span class="line">$ ssh-keygen -t rsa -C &quot;<a href="mailto:[email protected]" rel="external nofollow noopener noreferrer" target="_blank">[email protected]</a>&quot;</span><br></pre></td></tr></table></figure>
<p>运行上面那条命令后会让输入一个文件名，用于保存刚才生成的 SSH key 代码，此时需要输入完整的绝对路径，或者只输入文件名，在当前目录生成，生成后移动到指定的.ssh文件夹内，如：</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Generating public/private rsa key pair.</span><br><span class="line">Enter file in which to save the key (/c/Users/SKS/.ssh/id_rsa): /c/Users/SKS/.ssh/id_rsa_activehacker</span><br></pre></td></tr></table></figure>
</summary>
<category term="Git" scheme="https://www.sanks-blog.com/categories/Git/"/>
<category term="Git" scheme="https://www.sanks-blog.com/tags/Git/"/>
</entry>
<entry>
<title>ES6 的新特性</title>
<link href="https://www.sanks-blog.com/ECMAScript6-New-Features/"/>
<id>https://www.sanks-blog.com/ECMAScript6-New-Features/</id>
<published>2019-05-18T10:26:14.000Z</published>
<updated>2020-07-12T09:30:58.613Z</updated>
<summary type="html">
<blockquote><p>写这篇文章的目的就是告诉前端的同学们，ES6 已经是前端程序员必不可少的技能之一，后期再追加 Typescript 的新语法</p>
</blockquote>
<h3 id="关键字-async-await-的应用"><a href="#关键字-async-await-的应用" class="headerlink" title="关键字 async/await 的应用"></a>关键字 async/await 的应用</h3><blockquote><ol>
<li>async function 是 Promise 的语法糖封装</li>
<li>异步编程的终极方案 - 以同步的方式写异步<ul>
<li>await 关键字可以 “暂停” async function 的执行</li>
<li>await 关键字可以以同步的写法获取 Promise 的执行结果</li>
<li>try-catch 可以获取 await 所得到的错误</li>
</ul>
</li>
<li>一个穿越事件循环存在的 function</li>
</ol>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://www.sanks-blog.com/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.sanks-blog.com/tags/JavaScript/"/>
</entry>
<entry>
<title>在 react 项目的基础上增加一些配置（typescript支持，webpack别名等）</title>
<link href="https://www.sanks-blog.com/create-react-app-complex/"/>
<id>https://www.sanks-blog.com/create-react-app-complex/</id>
<published>2019-03-12T01:47:05.000Z</published>
<updated>2020-07-12T09:30:58.663Z</updated>
<summary type="html">
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><blockquote><p>react脚手架并不能直接运用到项目中去，需要改造，自己进行了进一步探索，总结创建项目的心酸历程</p>
</blockquote>
<h3 id="创建项目的流程"><a href="#创建项目的流程" class="headerlink" title="创建项目的流程"></a>创建项目的流程</h3><blockquote><ul>
<li>npx create-react-app jelly3<br> 备注：你的环境没有全局安装npx，放心，它会自动安装上并执行创建项目的命令</li>
<li>cd jelly3 切换到自己创建项目根目录下</li>
<li>yarn eject</li>
<li>yarn start 启动项目</li>
</ul>
</blockquote>
</summary>
<category term="React" scheme="https://www.sanks-blog.com/categories/React/"/>
<category term="React" scheme="https://www.sanks-blog.com/tags/React/"/>
<category term="TypeScript" scheme="https://www.sanks-blog.com/tags/TypeScript/"/>
</entry>
<entry>
<title>react的基础之上进行引入webpack、eslint、babel的框架搭建</title>
<link href="https://www.sanks-blog.com/create-react-app-simple/"/>
<id>https://www.sanks-blog.com/create-react-app-simple/</id>
<published>2019-03-04T07:13:00.000Z</published>
<updated>2020-07-12T09:30:58.673Z</updated>
<summary type="html">
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><blockquote><p>开始深入研究reactjs，弥补之前的浅尝辄止；一开始自己用官方的项目生成器生成了一个简单的架构，自己从这个简化版逐步加入babel, webpack, eslint 等相关的配置，有兴趣的朋友可以移步 <a href="https://github.com/SKSSSX/jelly2" rel="external nofollow noopener noreferrer" target="_blank">react的基础之上进行引入webpack、eslint、babel的框架搭建</a>, 但是你仔细阅读react项目下的 <span style="color: #fe2c23">READEME.md</span>, 你就会发现我绕了远路，其实react提供了 yarn eject 来注入webpack, eslint, label 等相关依赖和配置，可能这就是react给大家提供的 <span style="color: #fe2c23">脚手架</span> 吧</p>
<div class="note danger"><p>需要注意的是：这个命令只能执行一次，而且不可逆转。</p></div>
<p>虽说自己饶了远路，但是还是学到些东西的，也温习了一些 webpack，babel 的配置和原理等，想亲自动手，亲自实践的朋友按照如下步骤进行就行，我已经为你们绕过了一些坑<br>比如：babel 升级 6.x 到 7.x, 请参阅 <a href="https://www.jianshu.com/p/e21d19875fbb" rel="external nofollow noopener noreferrer" target="_blank">babel 7.x 和 webpack 4.x 配置vue项目</a>, 如果以下步骤有什么不妥之处，欢迎大家给我评论，我会及时修正并回复大家的问题。</p>
</blockquote>
</summary>
<category term="React" scheme="https://www.sanks-blog.com/categories/React/"/>
<category term="React" scheme="https://www.sanks-blog.com/tags/React/"/>
</entry>
<entry>
<title>JS 的深拷贝与浅拷贝</title>
<link href="https://www.sanks-blog.com/deep-copy-and-shallow-copy-for-JavaScript/"/>
<id>https://www.sanks-blog.com/deep-copy-and-shallow-copy-for-JavaScript/</id>
<published>2019-02-24T01:21:09.000Z</published>
<updated>2020-07-12T09:30:58.700Z</updated>
<summary type="html">
<blockquote><h3 id="原文链接"><a href="#原文链接" class="headerlink" title="原文链接"></a>原文链接</h3><p>作者：ziwei3749<br><a href="https://segmentfault.com/a/1190000012828382" rel="external nofollow noopener noreferrer" target="_blank">https://segmentfault.com/a/1190000012828382</a></p>
</blockquote>
<blockquote><h3 id="这篇文章的受众"><a href="#这篇文章的受众" class="headerlink" title="这篇文章的受众"></a>这篇文章的受众</h3><ul>
<li>第一类,业务需要,急需知道如何深拷贝JS对象的开发者。</li>
<li>第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者。</li>
</ul>
<h3 id="写给第一类读者"><a href="#写给第一类读者" class="headerlink" title="写给第一类读者"></a>写给第一类读者</h3><p>你只需要一行黑科技代码就可以实现深拷贝</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var copyObj = &#123;</span><br><span class="line"> name: &apos;ziwei&apos;,</span><br><span class="line"> arr : [1,2,3]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var targetObj = JSON.parse(JSON.stringify(copyObj))</span><br></pre></td></tr></table></figure>
<blockquote><p>此时 copyObj.arr !== targetObj.arr 已经实现了深拷贝</p>
<div class="note warning"><p>别着急走,利用window.JSON的方法做深拷贝存在2个缺点:</p></div>
<ul>
<li>如果你的对象里有函数,函数无法被拷贝下来</li>
<li>无法拷贝copyObj对象原型链上的属性和方法</li>
</ul>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://www.sanks-blog.com/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.sanks-blog.com/tags/JavaScript/"/>
</entry>
<entry>
<title>前端工程师成长的痛，你占几条？</title>
<link href="https://www.sanks-blog.com/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88%E6%88%90%E9%95%BF%E7%9A%84%E7%97%9B%EF%BC%8C%E4%BD%A0%E5%8D%A0%E5%87%A0%E6%9D%A1%EF%BC%9F/"/>
<id>https://www.sanks-blog.com/前端工程师成长的痛，你占几条？/</id>
<published>2019-02-23T01:48:01.000Z</published>
<updated>2020-07-12T09:30:58.731Z</updated>
<summary type="html">
<h3 id="原文链接"><a href="#原文链接" class="headerlink" title="原文链接"></a>原文链接</h3><blockquote><p>作者：真传X<br><a href="https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651555898&amp;idx=1&amp;sn=1a523de9728c65c03bc851620a06240e" rel="external nofollow noopener noreferrer" target="_blank">https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651555898&amp;idx=1&amp;sn=1a523de9728c65c03bc851620a06240e</a></p>
</blockquote>
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><blockquote><p>对于很多前端工程师，很容易进入<span style="color: #fe2c23">工作的舒适区</span>，该熟悉的业务已熟悉了，然后就是重复用轮子，这样很容易让自己的成长处于<span style="color: #fe2c23">原地打转</span>以及<span style="color: #fe2c23">低水平重复</span>的状态。</p>
<p>去年11月，我们累计交流了203人（1-3年的前端工程师，遇到职业瓶颈），有的是<span style="color: #fe2c23">主观原因</span>造成的 ，有的是<span style="color: #fe2c23">客观原因</span>造成的，本文从客观跟主观两方面进行了总结，帮助大家 <span style="color: #fe2c23">自检</span> 。</p>
<p><img src="/前端工程师成长的痛，你占几条？/pie.png" alt="前端工程师专业分布" title="前端工程师专业分布"></p></blockquote>
</summary>
<category term="随笔" scheme="https://www.sanks-blog.com/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="随笔" scheme="https://www.sanks-blog.com/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>Hexo-主题文件夹上传不到自己的github上</title>
<link href="https://www.sanks-blog.com/Hexo-%E4%B8%BB%E9%A2%98%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8A%E4%BC%A0%E4%B8%8D%E5%88%B0%E8%87%AA%E5%B7%B1%E7%9A%84github%E4%B8%8A/"/>
<id>https://www.sanks-blog.com/Hexo-主题文件夹上传不到自己的github上/</id>
<published>2019-02-10T06:44:49.000Z</published>
<updated>2020-07-12T09:30:58.617Z</updated>
<summary type="html">
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><blockquote><p>好多人都已经用Hexo博客框架搭建了自己的博客，而且也部署到了自己的github上（或者是自己的云服务器上），再简单购买一个域名，让别人也可浏览自己的博客。<br>但是搭建过程中遇到了好多坑，自己的博客代码上传至自己的github上，但是发现<strong>除了主题文件夹下的文件，其他都 <code>push</code> 上去了</strong></p>
</blockquote>
<p><img src="/Hexo-主题文件夹上传不到自己的github上/github.png" alt="主题文件夹是空的" title="主题文件夹是空的"></p>
<blockquote><p>而自己本地的主题文件夹是有文件的</p>
</blockquote>
<p><img src="/Hexo-主题文件夹上传不到自己的github上/local.png" alt="本地主题" title="本地主题"></p>
<h3 id="探索"><a href="#探索" class="headerlink" title="探索"></a>探索</h3><blockquote><p>大家可能想到是因为.gitignore里面忽略了这两个文件夹下的所有文件，但是经过自己的检查，发现并不是这儿的问题，自己的项目的.gitignore内容如下：</p>
</blockquote>
<p><img src="/Hexo-主题文件夹上传不到自己的github上/gitignore.png" alt=".gitignore内容" title=".gitignore内容"><br></p>
</summary>
<category term="Hexo" scheme="https://www.sanks-blog.com/categories/Hexo/"/>
<category term="hexo" scheme="https://www.sanks-blog.com/tags/hexo/"/>
</entry>
<entry>
<title>Hexo 插入图片</title>
<link href="https://www.sanks-blog.com/Hexo-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87/"/>
<id>https://www.sanks-blog.com/Hexo-插入图片/</id>
<published>2019-02-09T06:13:18.000Z</published>
<updated>2021-12-26T09:13:13.615Z</updated>
<summary type="html">
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><blockquote><p>图片资源放在本地 source/ 文件夹后，本地服务器浏览时图片正常显示，但部署到 github 上会找不到图片。</p>
</blockquote>
<blockquote><p>究其原因，是图片路径出现问题。开始时自己在 source/ 文件夹下建了 assets 文件夹，专门用于存放文章相关的图片：</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">source</span><br><span class="line"> |- _posts</span><br><span class="line"> |- assets</span><br><span class="line"> |- images</span><br><span class="line"> |- image-1.png</span><br></pre></td></tr></table></figure>
<blockquote><p>使用 markdown 引用图片的方式为</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>
<blockquote><p>查看结构，发现部署以后，图片会自动添加日期相关的文件结构目录：</p>
</blockquote>
<blockquote><p><img src="/Hexo-插入图片/hexo-1.png" alt="This is an example image" title="This is an example image"></p>
</blockquote>
<blockquote><p>而实际存放的目录是 <a href="http://www.sanks-blog.com/assets/images/image-1.png">http://www.sanks-blog.com/assets/images/image-1.png</a> ，导致图片资源访问不到。</p>
</blockquote>
<blockquote><p>为了解决这个问题查了很多资料，才知道原来除了本地存放图片，还可以使用图床。</p>
</blockquote>
</summary>
<category term="Hexo" scheme="https://www.sanks-blog.com/categories/Hexo/"/>
<category term="hexo" scheme="https://www.sanks-blog.com/tags/hexo/"/>
</entry>
<entry>
<title>vue指令中寻找元素parentNode为null的问题（指令中钩子函数的运用）</title>
<link href="https://www.sanks-blog.com/vue%E6%8C%87%E4%BB%A4%E4%B8%AD%E5%AF%BB%E6%89%BE%E5%85%83%E7%B4%A0parentNode%E4%B8%BAnull%E7%9A%84%E9%97%AE%E9%A2%98%EF%BC%88%E6%8C%87%E4%BB%A4%E4%B8%AD%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E7%9A%84%E8%BF%90%E7%94%A8%EF%BC%89/"/>
<id>https://www.sanks-blog.com/vue指令中寻找元素parentNode为null的问题（指令中钩子函数的运用）/</id>
<published>2019-01-23T04:20:59.000Z</published>
<updated>2020-07-12T09:30:58.724Z</updated>
<summary type="html">
<h2 id="引语"><a href="#引语" class="headerlink" title="引语"></a>引语</h2><blockquote><p>在VUE中运用 VUE 指令，发现之前的写法存在问题，刷新页面后报错，先贴代码， 再看报错</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 权限指令</span></span><br><span class="line">Vue.directive(<span class="string">'has'</span>, &#123;</span><br><span class="line"> bind: <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">if</span> (el.parentNode &amp;&amp; !Vue.prototype.$_has(binding.value)) &#123;</span><br><span class="line"> el.parentNode.removeChild(el)</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<blockquote><p>只要刷新页面会出现如下问题：<br><img src="/vue指令中寻找元素parentNode为null的问题（指令中钩子函数的运用）/null-error.png" alt="刷新页面报错展示" title="刷新页面报错"></p>
</blockquote>
</summary>
<category term="Vue" scheme="https://www.sanks-blog.com/categories/Vue/"/>
<category term="vue" scheme="https://www.sanks-blog.com/tags/vue/"/>
</entry>
</feed>