-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
367 lines (335 loc) · 36 KB
/
Copy pathindex.html
File metadata and controls
367 lines (335 loc) · 36 KB
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
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.1.1" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.1.1" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="DiamondsMe-Craft">
<meta property="og:url" content="https://diamondsme.github.io/index.html">
<meta property="og:site_name" content="DiamondsMe-Craft">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="DiamondsMe">
<meta name="twitter:card" content="summary"><title>DiamondsMe-Craft</title><link ref="canonical" href="https://diamondsme.github.io/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.1.1"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 4.2.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">主世界</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">存档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags""></i></span><span class="header-nav-menu-item__text">标签</span></a></div></div><div class="header-nav-search"><span class="header-nav-search__icon"><i class="fas fa-search"></i></span><span class="header-nav-search__text">搜索</span></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">DiamondsMe-Craft</div><div class="header-banner-info__subtitle"></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content content-home" id="content"><section class="postlist"><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/e9431e4e/">localStorage、sessionStorage、Cookie的区别详解</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-22</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-22</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>localStorage、sessionStorage、Cookie共同点:</p>
<p>都保存在浏览器端，且是同源的（顺便解释一下同源：域名、协议、端口号相同）</p>
<p>localStorage、sessionStorage、Cookie不共同点:</p>
<ul>
<li>存储大小的不同：</li>
</ul>
<p>localStorage的大小一般为5M<br>sessionStorage的大小一般为5M<br>cookies的大小一般为4K</p>
<ul>
<li>有效期不同：</li>
</ul>
<p>localStorage的有效期为永久有效，除非你进行手动删除。<br>sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。<br>cookies在设置的有效之前有效，当超过有效期便会失效</p>
<ul>
<li>与服务器端的通信</li>
</ul>
<p>localStorage不参与服务器端的通信。<br>sessionStorage不参与服务器端的通信。<br>cookies参与服务器端通信，每次都会携带http的头信息中。（如果使用cookie保存过多数据会带来性能问题）</p>
<ul>
<li>localStorage和sessionStorage的作用域的区别详解</li>
</ul>
<p>不同浏览器无法共享localStorage或sessionStorage中的信息。<br>相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。</p>
<h2 id="参考文章" >
<a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h2>
<p><span class="exturl"><a class="exturl__link" href="https://blog.csdn.net/qq_26941173/article/details/88369543" target="_blank" rel="noopener" title="Markdown">localStorage、sessionStorage、Cookie的区别详解</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/1eced665/">箭头函数和普通函数的区别</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-19</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-19</span></span></div></header><div class="post-body"><div class="post-excerpt"><ul>
<li>箭头函数是匿名函数，不能作为构造函数，不能使用new;</li>
<li>箭头函数不绑定arguments，取而代之用rest参数…解决;</li>
<li>箭头函数不绑定this，会捕获其所在的<code>上下文</code>的this值，作为自己的this值;</li>
<li>箭头函数通过<code>call()</code>或<code>apply()</code>方法调用一个函数时，只传入了一个参数，对 this 并没有影响。;</li>
<li>箭头函数没有原型属性;</li>
<li>箭头函数不能当做Generator函数,不能使用yield关键字.</li>
</ul>
<h1 id="参考文章" >
<a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h1>
<p><span class="exturl"><a class="exturl__link" href="https://www.cnblogs.com/biubiuxixiya/p/8610594.html" target="_blank" rel="noopener" title="Markdown">箭头函数与普通函数的区别</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/de977e1e/">6个代码在线调试工具，实时可视化编辑</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-08</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt">
<h2 id="codepen" >
<a href="#codepen" class="heading-link"><i class="fas fa-link"></i></a>codepen</h2>
<p>最受欢迎的在线调试工具,案例可fork衍生出自己的版本,可以设置代码的预处理器,通过搜索等方式添加外部类库,代码分享社区完善.<br><span class="exturl"><a class="exturl__link" href="https://codepen.io/pen/" target="_blank" rel="noopener">https://codepen.io/pen/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<h2 id="jsfiddle" >
<a href="#jsfiddle" class="heading-link"><i class="fas fa-link"></i></a>jsfiddle</h2>
<p>最早的较出名的在线调试工具,支持使用react、jq等30多个框架和库可供选择,可fork,代码可预处理.国内打开较慢.<br><span class="exturl"><a class="exturl__link" href="http://jsfiddle.net/" target="_blank" rel="noopener">http://jsfiddle.net/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<h2 id="jsbin" >
<a href="#jsbin" class="heading-link"><i class="fas fa-link"></i></a>jsbin</h2>
<p>简单的在线调试工具,支持控制台功能,JS的预处理器较多,CSS较少<br><span class="exturl"><a class="exturl__link" href="https://jsbin.com" target="_blank" rel="noopener">https://jsbin.com</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<h2 id="jsrun" >
<a href="#jsrun" class="heading-link"><i class="fas fa-link"></i></a>jsrun</h2>
<p>中文,对国内开发者友好.UI风格简洁,功能丰富强大,更多功能VIP收费,代码分享社区完善<br><span class="exturl"><a class="exturl__link" href="http://jsrun.net/" target="_blank" rel="noopener">http://jsrun.net/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br>其他</p>
<h2 id="cssdeck" >
<a href="#cssdeck" class="heading-link"><i class="fas fa-link"></i></a>cssdeck</h2>
<p><span class="exturl"><a class="exturl__link" href="http://cssdeck.com/" target="_blank" rel="noopener">http://cssdeck.com/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<h2 id="Liveweave" >
<a href="#Liveweave" class="heading-link"><i class="fas fa-link"></i></a>Liveweave</h2>
<p>界面漂亮、支持协作功能</p>
<p><span class="exturl"><a class="exturl__link" href="https://liveweave.com/" target="_blank" rel="noopener">https://liveweave.com/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/5d5065d5/">css中BFC特性</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-08</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>BFC，即块格式化上下文。浏览器满足一定的条件时会形成一种叫块渲染区域,它会按照一定的规则进行渲染,它拥有以下特性:</p>
<ul>
<li>BFC的块不会和浮动块重叠;</li>
<li>计算BFC元素的高度时，会包括浮动元素;</li>
<li>在一个BFC下的块 margin 会发生重叠，不在同一个则不会;</li>
<li>BFC元素是一个独立的容器，使得里面的元素和外部元素隔离开，互补影响</div><div class="post-readmore"><a class="post-readmore__link" href="/post/5d5065d5/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/9d968128/">js运行时-eventLoop</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-08</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>JS引擎到底做了什么来解析代码之前，我们首先需要知道解析工作所发生的环境。<br>以V8引擎为例,V8引擎会根据需要将JS的解析工作放到一下四个容器里处理</p>
<ul>
<li>堆:用于存储函数变量和函数声明;</li>
<li>栈:根据函数之间调用与被调用的关系形成一个栈的数据结构,被调用的函数压入栈顶;根据先进先出的原则,先执行</li>
<li>栈顶函数,返回后弹出栈,直到栈空;</li>
<li>Web API容器:事件监听函数、HTTP／AJAX请求、或者是定时器函数等,一旦达到触发条件,将回调放至回调队列尾部;</li>
<li>回调队列:按照先进后出的原则,当主程序栈空时,会通知回调队列,将队列首部的回调函数放至执行栈执行;触发的事件回调会放在队列尾部;</li>
</ul></div><div class="post-readmore"><a class="post-readmore__link" href="/post/9d968128/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/a9c733cc/">如何使用多个git(github)账号</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-08</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>我在公司开发已经使用了公司的git,配置了时使用的git已经存在了git账号,都要支持ssh</p>
<h2 id="实现方案" >
<a href="#实现方案" class="heading-link"><i class="fas fa-link"></i></a>实现方案</h2>
<p>git对用户信息配置有一下几种等级: </p></div><div class="post-readmore"><a class="post-readmore__link" href="/post/a9c733cc/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/792c856b/">解决H5 键盘兼容性问题</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-08</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>ios和安卓设备在唤起和收起键盘时会展现不同的效果,利用Element.scrollIntoViewIfNeeded(),将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域,可以解决唤起键盘时输入框表单被挡等问题.</p>
<p>分析详见:<span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c6d1c8b6fb9a049de6df441" target="_blank" rel="noopener">https://juejin.im/post/5c6d1c8b6fb9a049de6df441</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/3d040cbc/">解决ios设备设备下页面滚动问题</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-07</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>如果你在safari浏览器和app内核浏览器中对需要滚动的元素设置如下样式时</p>
<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">overflow|overflow-x|overflow-y:scroll;</span><br></pre></td></tr></table></div></figure>
<p>你会发现滚动区域的表现极其差劲,滚动在手指抬起时立即停止,不产生惯性滚动.</p>
<p>这时可以在以上样式的基础上通过添加<code>-webkit-overflow-scrolling: touch;</code>属性来实现ios下的惯性滚动效果.</p>
<figure class="highlight plain"><div class="table-container"><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">overflow:scroll;</span><br><span class="line">-webkit-overflow-scrolling: touch;</span><br></pre></td></tr></table></div></figure>
<p>分析详见: <span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c6ebc8af265da2dec623d51" target="_blank" rel="noopener">https://juejin.im/post/5c6ebc8af265da2dec623d51</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/680dc6eb/">javascript实现数组去重</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-07</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><h1 id="数组去重" >
<a href="#数组去重" class="heading-link"><i class="fas fa-link"></i></a>数组去重</h1>
<h2 id="利用ES6-Set去重（ES6中最常用）" >
<a href="#利用ES6-Set去重（ES6中最常用）" class="heading-link"><i class="fas fa-link"></i></a>利用ES6 Set去重（ES6中最常用）</h2>
<figure class="highlight plain"><div class="table-container"><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">function unique (arr) {</span><br><span class="line"> return Array.from(new Set(arr))</span><br><span class="line">}</span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]</span><br></pre></td></tr></table></div></figure>
<p>不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。</p></div><div class="post-readmore"><a class="post-readmore__link" href="/post/680dc6eb/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/post/c9529d69/">如何避免出现“cannot read property of undefined”错误</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2020-07-07</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2020-07-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>开发时经常会出现某对象属性为undefined,而继续获取下一层属性时导致报错,有以下方案可以避免错误的发生</p>
<h2 id="使用方法库" >
<a href="#使用方法库" class="heading-link"><i class="fas fa-link"></i></a>使用方法库</h2>
<p>lodash中的_.get或者Ramda 里的 R.path方法;<br>但有时只是想单纯避免出现这个错误,而不想引入整合类库造成不必要的浪费.</p></div><div class="post-readmore"><a class="post-readmore__link" href="/post/c9529d69/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article></section><nav class="paginator"><div class="paginator-inner"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/"><i class="fas fa-angle-right"></i></a></div></nav></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="https://avatars1.githubusercontent.com/u/13076734" alt="avatar"></div><p class="sidebar-ov-author__text">努力成为别人的世界～</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="https://github.com/DiamondsMe" target="_blank" rel="noopener" data-popover="Github" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-github"></i></span></a></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">12</div><div class="sidebar-ov-state-item__name">存档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">3</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">6</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2020</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>DiamondsMe</span></div><div><span>由 <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v4.2.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.1.1</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><div class="search-mask"></div><div class="search-popup"><span class="search-close"></span><div class="search-input"><input placeholder="搜索文章（支持多关键词，请用空格分隔）"></div><div class="search-results"></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script>function initSearch() {
var isXML = true;
var search_path = 'search.xml';
if (!search_path) {
search_path = 'search.xml';
} else if (/json$/i.test(search_path)) {
isXML = false;
}
var path = '/' + search_path;
$.ajax({
url: path,
dataType: isXML ? 'xml' : 'json',
async: true,
success: function (res) {
var datas = isXML ? $('entry', res).map(function () {
// 将 XML 转为 JSON
return {
title: $('title', this).text(),
content: $('content', this).text(),
url: $('url', this).text()
};
}).get() : res;
var $input = $('.search-input input');
var $result = $('.search-results');
// 搜索对象（标题、内容）的权重，影响显示顺序
var WEIGHT = { title: 100, content: 1 };
var searchPost = function () {
var searchText = $input.val().toLowerCase().trim();
// 根据空白字符分隔关键字
var keywords = searchText.split(/[\s]+/);
// 搜索结果
var matchPosts = [];
// 有多个关键字时，将原文字整个保存下来
if (keywords.length > 1) {
keywords.push(searchText);
}
// 防止未输入字符时搜索
if (searchText.length > 0) {
datas.forEach(function (data) {
var isMatch = false;
// 没有标题的文章使用预设的 i18n 变量代替
var title = (data.title && data.title.trim()) || '[ 文章无标题 ]';
var titleLower = title && title.toLowerCase();
// 删除 HTML 标签 和 所有空白字符
var content = data.content && data.content.replace(/<[^>]+>/g, '');
var contentLower = content && content.toLowerCase();
// 删除重复的 /
var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/g, '/');
// 标题中匹配到的关键词
var titleHitSlice = [];
// 内容中匹配到的关键词
var contentHitSlice = [];
keywords.forEach(function (keyword) {
/**
* 获取匹配的关键词的索引
* @param {String} keyword 要匹配的关键字
* @param {String} text 原文字
* @param {Boolean} caseSensitive 是否区分大小写
* @param {Number} weight 匹配对象的权重。权重大的优先显示
* @return {Array}
*/
function getIndexByword (word, text, caseSensitive, weight) {
if (!word || !text) {
return [];
};
var startIndex = 0; // 每次匹配的开始索引
var index = -1; // 匹配到的索引值
var result = []; // 匹配结果
if (!caseSensitive) {
word = word.toLowerCase();
text = text.toLowerCase();
}
while((index = text.indexOf(word, startIndex)) !== -1) {
var hasMatch = false;
// 索引位置相同的关键词，保留长度较长的
titleHitSlice.forEach(function (hit) {
if (hit.index === index && hit.word.length < word.length) {
hit.word = word;
hasMatch = true;
}
});
startIndex = index + word.length;
!hasMatch && result.push({ index: index, word: word, weight: weight });
}
return result;
}
titleHitSlice = titleHitSlice.concat(getIndexByword(keyword, titleLower, false, WEIGHT.title));
contentHitSlice = contentHitSlice.concat(getIndexByword(keyword, contentLower, false, WEIGHT.content));
});
var hitTitle = titleHitSlice.length;
var hitContent = contentHitSlice.length;
if (hitTitle > 0 || hitContent > 0) {
isMatch = true;
}
if (isMatch) {
;[titleHitSlice, contentHitSlice].forEach(function (hit) {
// 按照匹配文字的索引的递增顺序排序
hit.sort(function (left, right) {
return left.index - right.index;
});
});
/**
* 给文本中匹配到的关键词添加标记，从而进行高亮显示
* @param {String} text 原文本
* @param {Array} hitSlice 匹配项的索引信息
* @param {Number} start 开始索引
* @param {Number} end 结束索引
* @return {String}
*/
function highlightKeyword (text, hitSlice, start, end) {
if (!text || !hitSlice || !hitSlice.length) {
return;
}
var result = '';
var startIndex = start;
var endIndex = end;
hitSlice.forEach(function (hit) {
if (hit.index < startIndex) {
return;
}
var hitWordEnd = hit.index + hit.word.length;
result += text.slice(startIndex, hit.index);
result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
startIndex = hitWordEnd;
});
result += text.slice(startIndex, endIndex);
return result;
}
var postData = {};
// 文章总的搜索权重
var postWeight = titleHitSlice.length * WEIGHT.title + contentHitSlice.length * WEIGHT.content;
// 标记匹配关键词后的标题
var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
// 标记匹配关键词后的内容
var postContent;
// 显示内容的长度
var SHOW_WORD_LENGTH = 200;
// 命中关键词前的字符显示长度
var SHOW_WORD_FRONT_LENGTH = 20;
var SHOW_WORD_END_LENGTH = SHOW_WORD_LENGTH - SHOW_WORD_FRONT_LENGTH;
// 截取匹配的第一个字符，前后共 200 个字符来显示
if (contentHitSlice.length > 0) {
var firstIndex = contentHitSlice[0].index;
var start = firstIndex > SHOW_WORD_FRONT_LENGTH ? firstIndex - SHOW_WORD_FRONT_LENGTH : 0;
var end = firstIndex + SHOW_WORD_END_LENGTH;
postContent = highlightKeyword(content, contentHitSlice, start, end);
} else { // 未匹配到内容，直接截取前 200 个字符来显示
postContent = content.slice(0, SHOW_WORD_LENGTH);
}
postData.title = postTitle;
postData.content = postContent;
postData.url = postURL;
postData.weight = postWeight;
matchPosts.push(postData);
}
});
}
var resultInnerHtml = '';
if (matchPosts.length) {
// 按权重递增的顺序排序，使权重大的优先显示
matchPosts.sort(function (left, right) {
return right.weight - left.weight;
});
resultInnerHtml += '<ul>';
matchPosts.forEach(function (post) {
resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
resultInnerHtml += post.title;
resultInnerHtml += '</a><div class="search-results-content">';
resultInnerHtml += post.content;
resultInnerHtml += '</div></li>';
});
resultInnerHtml += '</ul>';
} else {
resultInnerHtml += '<div class="search-results-none"><i class="far fa-meh"></i></div>';
}
$result.html(resultInnerHtml);
};
$input.on('input', searchPost);
$input.on('keyup', function (e) {
if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
searchPost();
}
});
}
});
}
function closeSearch () {
$('body').css({ overflow: 'auto' });
$('.search-popup').css({ display: 'none' });
$('.search-mask').css({ display: 'none' });
}
window.addEventListener('DOMContentLoaded', function () {
Stun.utils.pjaxReloadLocalSearch = function () {
$('.header-nav-search').on('click', function (e) {
e.stopPropagation();
$('body').css('overflow', 'hidden');
$('.search-popup')
.velocity('stop')
.velocity('transition.expandIn', {
duration: 300,
complete: function () {
$('.search-popup input').focus();
}
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeIn', {
duration: 300
});
initSearch();
});
$('.search-mask, .search-close').on('click', function () {
closeSearch();
});
$(document).on('keydown', function (e) {
// Escape <=> 27
if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
closeSearch();
}
});
};
Stun.utils.pjaxReloadLocalSearch();
}, false);</script><script src="/js/utils.js?v=2.1.1"></script><script src="/js/stun-boot.js?v=2.1.1"></script><script src="/js/scroll.js?v=2.1.1"></script><script src="/js/header.js?v=2.1.1"></script><script src="/js/sidebar.js?v=2.1.1"></script><script type="application/json" src="/search.xml"></script></body></html>