-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
422 lines (337 loc) · 51.8 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
<!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, maximum-scale=1.0, user-scalable=no"><title>CrazyKong</title><meta name="keywords" content="Hexo, Java, JavaScript, Vue"><meta name="author" content="10wen"><meta name="copyright" content="10wen"><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="CrazyKong">
<meta property="og:url" content="https://10wen.github.io/index.html">
<meta property="og:site_name" content="CrazyKong">
<meta property="og:description" content="只有我才能使自己停下来。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s2.loli.net/2022/08/09/i8YbsBdeM3ADuVW.jpg">
<meta property="article:author" content="10wen">
<meta property="article:tag" content="Hexo, Java, JavaScript, Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s2.loli.net/2022/08/09/i8YbsBdeM3ADuVW.jpg"><link rel="shortcut icon" href="/img/logo.jpg"><link rel="canonical" href="https://10wen.github.io/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/pwa/manifest.json"/><link rel="apple-touch-icon" sizes="180x180" href="/pwa/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/pwa/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/pwa/16.png"/><link rel="mask-icon" href="/pwa/safari-pinned-tab.svg" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?8af17c14032e1fc5280f2814e29199d8";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":false,"highlightHeightLimit":200},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":100,"languages":{"author":"作者: 10wen","link":"链接: ","source":"来源: CrazyKong","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
lightbox: 'fancybox',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#ff9933","bgDark":"#1f1f1f","position":"top-center"},
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'CrazyKong',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2022-12-16 14:36:01'
}</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.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')
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
else if (t === 'light') activateLightMode()
else activateDarkMode()
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><meta name="generator" content="Hexo 6.2.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><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="https://s2.loli.net/2022/08/09/i8YbsBdeM3ADuVW.jpg" 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">25</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">44</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><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);"><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="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" target="_blank" rel="noopener" href="https://github.com/10wen/blog/new/master/source/_posts"><i class="fa-fw fa fa-pencil"></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_name"><a id="site-name" href="/">CrazyKong</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><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);"><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="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" target="_blank" rel="noopener" href="https://github.com/10wen/blog/new/master/source/_posts"><i class="fa-fw fa fa-pencil"></i><span> </span></a></div></div><div id="toggle-menu"><a class="site-page"><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="recent-post-info no-cover"><a class="article-title" href="/posts/1GTDN28.html" title="Ajax与Fetch请求以及跨域请求">Ajax与Fetch请求以及跨域请求</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 class="post-meta-date-created" datetime="2022-12-16T06:35:29.292Z" title="发表于 2022-12-16 14:35:29">2022-12-16</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%89%8D%E7%AB%AF/">前端</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/ajax/">ajax</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/jquery/">jquery</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/axios/">axios</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/fetch/">fetch</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/cors/">cors</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/jsonp/">jsonp</a></span></div><div class="content">Ajax-XMLHttpRequest/JQuery/Axios/Fetch请求，以及JSONP/CORS跨域请求XMLHttpRequestGET12345678910111213141516171819202122232425262728btn.onclick = function(){ // 1. 创建对象 const xhr = new XMLHttpRequest(); // 2. 初始化 设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/server') // 3. 发送 xhr.send(); // 4. 事件绑定 处理服务端返回的结果 xhr.onreadystatechange = function(){ // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4 //判断 (服务端返回了所有的结果) i ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/1ETAZZ4.html" title="搞懂 JavaScript 如何实现图片懒加载">搞懂 JavaScript 如何实现图片懒加载</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 class="post-meta-date-created" datetime="2022-12-16T06:35:29.292Z" title="发表于 2022-12-16 14:35:29">2022-12-16</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%89%8D%E7%AB%AF/">前端</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/vue/">vue</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Java/">Java</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">
原文地址 www.jb51.net
图片懒加载，往往作为减少首页白屏时间的一个解决方案而出现。直观的来说，就是不要直接加载所有图片，而是满足一定条件后才加载，也就是” 惰性加载 “。实现图片懒加载的方式有很多，如果要简单点那就直接使用第三方插件：vue-lazyload，如果想探究一下别人的插件是怎么实现图片懒加载的，那么可以看看本文是如何实现的。
实现思路实现图片懒加载我们需要先明白具体的场景，一般来说，我们会在首屏先加载几张图片，其他的图片则先不加载，在页面滚动时，图片快出现在视窗中的时候才来加载图片。为什么要这么实现呢，因为对于图片很多的场景，如果一次性加载出所有的图片，可能会导致页面白屏时间比较长，特别是图片比较大的时候。
实现过程：
使用data-*自定义数据属性给img标签新增一个data-src属性
全局监听滚动事件，使用节流处理回调函数
在回调函数中，判断图片是否已经出现在可视区域，如果已经出现在可视区域，则加载该图片
页面初始化的时候执行一下回调函数，保证首屏有图片显示
在这个实现过程中，涉及一些知识点，我们来快速回顾一下：
准备知识data-*data-*是 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/1NN2Q2S.html" title="ES6-ES11特性">ES6-ES11特性</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 class="post-meta-date-created" datetime="2022-12-16T06:35:29.292Z" title="发表于 2022-12-16 14:35:29">2022-12-16</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%89%8D%E7%AB%AF/">前端</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/es6/">es6</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Java/">Java</a></span></div><div class="content">ES6-11特性ES6特性let
不能重复声明变量
块级作用域12345for (let i = 0; i<length; i++) { btns[i].onclick = function () { console.log("hello" + i); }}
不存在变量提升
不影响作用域链
const
常量需要赋初值
常量的值不能修改
块级作用域
数组、对象的值可以修改，因为引用地址不变
变量的解构赋值123let [a, b, c] = anotherArray;let {name, age, func} = anotherObj;
模板字符串1234567let str = `<ul> <li>hello</li> </ul>`let name = "kong";let name = `name: ${name}`;
对象的简化 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/29NB4FK.html" title="自动化构建工具 Webpack">自动化构建工具 Webpack</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 class="post-meta-date-created" datetime="2022-12-15T05:14:24.000Z" title="发表于 2022-12-15 13:14:24">2022-12-15</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%89%8D%E7%AB%AF/">前端</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/vue/">vue</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Webpack/">Webpack</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Java/">Java</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">Webpack 自动化打包构建Webpack 是一个模块打包器，它可以将许多模块打包成一个或多个静态资源文件。它通常用于构建前端应用程序，但是也可以用于构建后端应用程序。使用 Webpack 进行自动化构建通常包括以下步骤：
安装 Webpack：使用 npm 命令 npm install webpack 安装 Webpack。
配置 Webpack：创建一个 webpack.config.js 文件，并在其中配置 Webpack。这包括设置入口文件、出口文件、加载器等。
运行 Webpack：使用命令 npx webpack 运行 Webpack。这将执行构建流程，并生成打包后的文件。
使用插件和工具：可以使用各种插件和工具来增强 Webpack 的功能，例如压缩文件、创建 source maps 等。
项目目录结构12345678910111213├── webpack-test (项目根目录) ├── config (Webpack配置文件目录) │ ├── webpack.dev.js(开发模式配置文件) │ └── webpack.prod. ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/2HE32QR.html" title="Nodejs基础">Nodejs基础</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 class="post-meta-date-created" datetime="2022-10-15T14:00:00.000Z" title="发表于 2022-10-15 22:00:00">2022-10-15</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%90%8E%E7%AB%AF/">后端</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/nodejs/">nodejs</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/commonjs/">commonjs</a></span></div><div class="content">Nodejs基础Buffer 缓冲区
Buffer 是专门存储二进数制数据，显示时以 16 进制的形式显示的据结构
每一个元素占用一个字节内存
Buffer 是对底层内存的直接操作，因此大小一旦确定就不能修改
常用方法1234let buf = Buffer.from("hello"); // buf.toString() 转换回来let buf1 = Buffer.alloc(10); // 创建10字节大小let buf2 = Buffer.allocUnsafe(10); // 10字节数据，并取出内存未清除敏感的数据
fs 文件系统模块
同步文件系统会阻塞程序的执行
异步文件系统不会阻塞程序的执行，通过回调函数返回结果
操作模式：
模式
说明
r
读取文件，文件不存在抛异常
r+
读写文件，文件不存在抛异常
rs
同步模式下打开文件用于读取
rs+
同步模式下打开文件用于读写
w
写文件，不存在则创建，存在则覆盖原有内容
wx
写文件，文件存在打开失败
w+
读写文件，不存在创建，存在截断
wx+
读写， ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/38S1216.html" title="基于Nodejs的Web服务端框架Express">基于Nodejs的Web服务端框架Express</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 class="post-meta-date-created" datetime="2022-10-15T14:00:00.000Z" title="发表于 2022-10-15 22:00:00">2022-10-15</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%90%8E%E7%AB%AF/">后端</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/cors/">cors</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/blog/">blog</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/nodejs/">nodejs</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/express/">express</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/mysql/">mysql</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/session/">session</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/jwt/">jwt</a></span></div><div class="content">Express官网传送门(opens new window)
基于 Node.js 平台，快速、开放、极简的 Web 开发框架
Express 是用于快速创建服务器的第三方模块。
Express 初体验基本使用创建服务器，监听客户端请求，并返回内容：
12345678910111213141516171819202122232425262728const express = require('express')// 创建 web 服务器const app = express()// 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容app.get('/user', (req, res) => { res.send({ name: 'zs', age: 20, gender: '男' })})app.post('/user', (req, res) => { res.send('请求成功 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/SK8RGB.html" title="Docker项目部署初体验">Docker项目部署初体验</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 class="post-meta-date-created" datetime="2022-10-15T05:00:00.000Z" title="发表于 2022-10-15 13:00:00">2022-10-15</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%90%8E%E7%AB%AF/">后端</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/Docker/">Docker</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Java/">Java</a></span></div><div class="content">Docker Springboot项目部署① jar包同级目录创建Dockerfile文件
② 编辑Dockerfile
123456789101112# 拉取基础镜像FROM java:8# 设置作者信息MAINTAINER 10wen# 把pet_rescue-0.0.1-SNAPSHOT.jar添加到容器里，并重命名为app.jar# 因为pet_rescue-0.0.1-SNAPSHOT.jar和Dockerfile在同一个目录下，所以只写文件名即可ADD pet_rescue-0.0.1-SNAPSHOT.jar app.jar# 设置端口号，此处只开放一个端口2000EXPOSE 2000# 执行命令，此处运行app.jarRUN bash -c 'touch /app.jar'ENTRYPOINT ["java","-jar","app.jar"]
③ 制作镜像：编辑好Dockerfile文件保存后，在当前文件夹输入命令
1docker build -f Dockerfile -t pet_ ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/DQ51JH.html" title="Git&Github 工作流">Git&Github 工作流</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 class="post-meta-date-created" datetime="2022-10-14T12:00:00.000Z" title="发表于 2022-10-14 20:00:00">2022-10-14</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%85%B6%E4%BB%96/">其他</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/Git/">Git</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Github/">Github</a></span></div><div class="content">Git&Github 工作流git clone git@…
克隆项目到本地
git checkout -b my-feature
新建本地分支my-feature
git add .git commit -m’update’
更新本地分支my-feature
git push origin my-feature
远端新建分支my-feature
此时若远端有了新的 commit，本地 main/my-feature 并不是最新，而my-feature又有了更新
git checkout main
切换到本地主分支main
git pull origin master
更新本地主分支main与远端master一致
git checkout my-feature
切换到本地工作分支my-feature
git rebase main
在本地main最新的基础之上更新我的修改，有可能出现 rebase conflict，手动选择代码解决冲突
git pull -f origin my-feature
将本地my-feature强行推到远端 my-feat ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/A5MQTA.html" title="JWT认证原理">JWT认证原理</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 class="post-meta-date-created" datetime="2022-10-12T07:00:00.000Z" title="发表于 2022-10-12 15:00:00">2022-10-12</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%90%8E%E7%AB%AF/">后端</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/springboot/">springboot</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/JWT/">JWT</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/token/">token</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/%E8%B7%A8%E5%9F%9F/">跨域</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Java/">Java</a></span></div><div class="content">JSON Web TokenJWT 由（.）分隔的三个部分组成 Header.Payload.Signature
Header（头部）描述 JWT 的元数据,由Base64URL算法转成字符串
1234{"alg": "HS256", // 签名的算法（algorithm）"typ": "JWT" // 令牌（token）的类型}
Payload（负载）用来存放实际需要传递的数据,由Base64URL算法转成字符串
iss (issuer)：签发人
exp (expiration time)：过期时间
sub (subject)：主题
aud (audience)：受众
nbf (Not Before)：生效时间
iat (Issued At)：签发时间
jti (JWT ID)：编号
Signature（签名）对前两部分的签名,防止数据篡改,使用 Header 里面指定的签名算法产生签名
12345HMACSHA256( base64UrlEncode(header) + &q ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/posts/3892EX6.html" title="Vue组件通信方式">Vue组件通信方式</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 class="post-meta-date-created" datetime="2022-09-29T04:48:29.000Z" title="发表于 2022-09-29 12:48:29">2022-09-29</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-16T06:35:29.292Z" title="更新于 2022-12-16 14:35:29">2022-12-16</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/%E5%89%8D%E7%AB%AF/">前端</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/vue/">vue</a><span class="article-meta-link">•</span><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">六种通信方式一、Props
父与子组件通信1234567891011121314<Child :name='name' :func='func' /> // 三种子组件接收形式props: ['name']props:{ name:String}props:{ name:{ type:String, required:true, default:'name' }}
路由Props12345678910111213141516{ name:'home', path:'/home', componenet: Home, // 三种形式 props:true, props:{key:'value'}, props:($route)= ...</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="https://s2.loli.net/2022/08/09/i8YbsBdeM3ADuVW.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">10wen</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">25</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">44</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/10wen"><i class="fab fa-github"></i><span>关注我 Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/10wen" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/kdwen" target="_blank" title="Gitee"><i class="fab fa-gitee"></i></a><a class="social-icon" href="mailto:844834411@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></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">邮箱：844834411@qq.com</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/1GTDN28.html" title="Ajax与Fetch请求以及跨域请求"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Ajax与Fetch请求以及跨域请求"/></a><div class="content"><a class="title" href="/posts/1GTDN28.html" title="Ajax与Fetch请求以及跨域请求">Ajax与Fetch请求以及跨域请求</a><time datetime="2022-12-16T06:35:29.292Z" title="发表于 2022-12-16 14:35:29">2022-12-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/1ETAZZ4.html" title="搞懂 JavaScript 如何实现图片懒加载"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="搞懂 JavaScript 如何实现图片懒加载"/></a><div class="content"><a class="title" href="/posts/1ETAZZ4.html" title="搞懂 JavaScript 如何实现图片懒加载">搞懂 JavaScript 如何实现图片懒加载</a><time datetime="2022-12-16T06:35:29.292Z" title="发表于 2022-12-16 14:35:29">2022-12-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/1NN2Q2S.html" title="ES6-ES11特性"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="ES6-ES11特性"/></a><div class="content"><a class="title" href="/posts/1NN2Q2S.html" title="ES6-ES11特性">ES6-ES11特性</a><time datetime="2022-12-16T06:35:29.292Z" title="发表于 2022-12-16 14:35:29">2022-12-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/29NB4FK.html" title="自动化构建工具 Webpack"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自动化构建工具 Webpack"/></a><div class="content"><a class="title" href="/posts/29NB4FK.html" title="自动化构建工具 Webpack">自动化构建工具 Webpack</a><time datetime="2022-12-15T05:14:24.000Z" title="发表于 2022-12-15 13:14:24">2022-12-15</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/2HE32QR.html" title="Nodejs基础"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nodejs基础"/></a><div class="content"><a class="title" href="/posts/2HE32QR.html" title="Nodejs基础">Nodejs基础</a><time datetime="2022-10-15T14:00:00.000Z" title="发表于 2022-10-15 22:00:00">2022-10-15</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>分类</span>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%85%B6%E4%BB%96/"><span class="card-category-list-name">其他</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/%E5%89%8D%E7%AB%AF/"><span class="card-category-list-name">前端</span><span class="card-category-list-count">14</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/leetcode/"><span class="card-category-list-name">leetcode</span><span class="card-category-list-count">2</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/"><span class="card-category-list-name">博客</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/%E5%90%8E%E7%AB%AF/"><span class="card-category-list-name">后端</span><span class="card-category-list-count">5</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E8%BD%AC%E8%BD%BD/"><span class="card-category-list-name">转载</span><span class="card-category-list-count">2</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E8%BD%AC%E8%BD%BD/%E5%B7%B2%E5%8F%91%E5%B8%83/"><span class="card-category-list-name">已发布</span><span class="card-category-list-count">2</span></a></li></ul></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/Git/" style="font-size: 1.15em; color: rgb(37, 164, 30)">Git</a><a href="/tags/Github/" style="font-size: 1.22em; color: rgb(136, 31, 78)">Github</a><a href="/tags/markdown/" style="font-size: 1.15em; color: rgb(51, 120, 182)">markdown</a><a href="/tags/ajax/" style="font-size: 1.15em; color: rgb(120, 76, 64)">ajax</a><a href="/tags/jquery/" style="font-size: 1.15em; color: rgb(107, 73, 92)">jquery</a><a href="/tags/axios/" style="font-size: 1.15em; color: rgb(149, 57, 89)">axios</a><a href="/tags/fetch/" style="font-size: 1.15em; color: rgb(76, 15, 85)">fetch</a><a href="/tags/cors/" style="font-size: 1.22em; color: rgb(20, 179, 51)">cors</a><a href="/tags/jsonp/" style="font-size: 1.15em; color: rgb(175, 40, 138)">jsonp</a><a href="/tags/css/" style="font-size: 1.22em; color: rgb(102, 8, 182)">css</a><a href="/tags/css3/" style="font-size: 1.15em; color: rgb(181, 50, 147)">css3</a><a href="/tags/JavaScript-DOM/" style="font-size: 1.15em; color: rgb(132, 53, 80)">JavaScript DOM</a><a href="/tags/JavaScript/" style="font-size: 1.45em; color: rgb(34, 122, 38)">JavaScript</a><a href="/tags/vue/" style="font-size: 1.3em; color: rgb(60, 114, 101)">vue</a><a href="/tags/less/" style="font-size: 1.15em; color: rgb(85, 61, 56)">less</a><a href="/tags/gulp/" style="font-size: 1.15em; color: rgb(58, 116, 115)">gulp</a><a href="/tags/blog/" style="font-size: 1.38em; color: rgb(154, 182, 69)">blog</a><a href="/tags/%E5%9B%BE%E5%BA%8A/" style="font-size: 1.15em; color: rgb(66, 15, 192)">图床</a><a href="/tags/CDN/" style="font-size: 1.15em; color: rgb(181, 137, 133)">CDN</a><a href="/tags/hexo/" style="font-size: 1.15em; color: rgb(56, 125, 88)">hexo</a><a href="/tags/github/" style="font-size: 1.15em; color: rgb(88, 64, 175)">github</a><a href="/tags/Docker/" style="font-size: 1.15em; color: rgb(14, 147, 135)">Docker</a><a href="/tags/springboot/" style="font-size: 1.15em; color: rgb(44, 174, 192)">springboot</a><a href="/tags/JWT/" style="font-size: 1.15em; color: rgb(73, 100, 69)">JWT</a><a href="/tags/token/" style="font-size: 1.15em; color: rgb(54, 135, 181)">token</a><a href="/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 1.15em; color: rgb(54, 57, 140)">跨域</a><a href="/tags/mongodb/" style="font-size: 1.15em; color: rgb(74, 89, 161)">mongodb</a><a href="/tags/mongoose/" style="font-size: 1.15em; color: rgb(38, 112, 117)">mongoose</a><a href="/tags/nodejs/" style="font-size: 1.22em; color: rgb(87, 67, 51)">nodejs</a><a href="/tags/commonjs/" style="font-size: 1.15em; color: rgb(90, 110, 168)">commonjs</a><a href="/tags/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/" style="font-size: 1.15em; color: rgb(102, 32, 10)">二分查找</a><a href="/tags/leetcode/" style="font-size: 1.22em; color: rgb(172, 161, 192)">leetcode</a><a href="/tags/JavaScript%E6%95%B0%E7%BB%84/" style="font-size: 1.15em; color: rgb(196, 139, 123)">JavaScript数组</a><a href="/tags/%E9%98%85%E8%AF%BB%E7%AC%94%E8%AE%B0/" style="font-size: 1.15em; color: rgb(145, 189, 46)">阅读笔记</a><a href="/tags/es6/" style="font-size: 1.15em; color: rgb(150, 195, 180)">es6</a><a href="/tags/express/" style="font-size: 1.15em; color: rgb(142, 56, 69)">express</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(109, 26, 155)">mysql</a><a href="/tags/session/" style="font-size: 1.15em; color: rgb(102, 30, 155)">session</a><a href="/tags/jwt/" style="font-size: 1.15em; color: rgb(196, 49, 200)">jwt</a><a href="/tags/JavaScript%E9%93%BE%E8%A1%A8/" style="font-size: 1.15em; color: rgb(46, 46, 63)">JavaScript链表</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/10/"><span class="card-archive-list-date">十月 2022</span><span class="card-archive-list-count">5</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/09/"><span class="card-archive-list-date">九月 2022</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/2022/08/"><span class="card-archive-list-date">八月 2022</span><span class="card-archive-list-count">8</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/07/"><span class="card-archive-list-date">七月 2022</span><span class="card-archive-list-count">2</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">25</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2022-07-27T09: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">48.2k</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="2022-12-16T06:36:00.984Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2022 By 10wen</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></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="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></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://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
if (typeof pangu === 'object') pangu.autoSpacingPage()
else {
getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
.then(() => {
pangu.autoSpacingPage()
})
}
}
function panguInit () {
if (false){
GLOBAL_CONFIG_SITE.isPost && panguFn()
} else {
panguFn()
}
}
document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><script>var preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"></div><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script src="//code.tidio.co/mxlkhkj03s70ir7kroa4saqlnoagc5cl.js" async="async"></script><script>function chatBtnHide () {
if (window.tidioChatApi) {
//- window.tidioChatApi.hide();
document.getElementById('tidio-chat').style.display= 'none'
}
}
function chatBtnShow () {
if (window.tidioChatApi) {
//- window.tidioChatApi.show();
document.getElementById('tidio-chat').style.display= 'block'
}
}</script><script src="https://cdn.jsdelivr.net/npm/pjax/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)
typeof preloader === 'object' && preloader.initLoading()
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 chatBtnFn === 'function' && chatBtnFn()
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()
typeof preloader === 'object' && preloader.endLoading()
})
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><script>"use strict";if("serviceWorker"in navigator){navigator.serviceWorker.register("service-worker.js").then((function(reg){reg.onupdatefound=function(){var installingWorker=reg.installing;installingWorker.onstatechange=function(){switch(installingWorker.state){case"installed":if(navigator.serviceWorker.controller){console.log("New or updated content is available.")}else{console.log("Content is now available offline!")}break;case"redundant":console.error("The installing service worker became redundant.");break}}}}))["catch"]((function(e){console.error("Error during service worker registration:",e)}))}</script></body></html>