-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
388 lines (186 loc) · 259 KB
/
search.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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript</title>
<link href="/article/17962290.html"/>
<url>/article/17962290.html</url>
<content type="html"><![CDATA[<h1 id="vane"><a href="#vane" class="headerlink" title="vane"></a>vane</h1><p>写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱, 后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级清晰的反映出接口之间的关系, 于是就有了这个项目, 能够节省很大一部分时间, 也能够让接口更加清晰, 也能够让接口更加清晰, 也能够让接口更加清晰, 重要的事情说三遍。<br>节省下来的时间用来休息和摸鱼多好(不是让你接着内卷的)。<br>如果真的帮到了你的话,觉得这个项目还不错的话, 可以给我一个star, 也可以给我一个star, 也可以给我一个star, 重要的事情说三遍。</p><p><a href="https://github.com/Big0range/vane">github传送门</a></p><p><a href="https://gitee.com/li_mei_chao/vane">gitee传送门</a></p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/daa93a221e164edcacc6c0bb04a99b3d~tplv-k3u1fbpfcp-watermark.image" alt="Snipaste_2023-06-26_18-06-59.png"></p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/377d7e743b2b438cb4d5c16a3e070b1a~tplv-k3u1fbpfcp-watermark.image" alt="Snipaste_2023-06-26_18-07-28.png"></p><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><p>web<br><code>Vue3</code>, <code>TypeScript</code>, <code>Vite</code> <code>node</code><br>server<br><code>node</code>, <code>TypeScript</code>, <code>express</code>, <code>sequelize</code>, <code>mysql</code>, <code>redis</code><br>server进阶<br><code>docker</code>, <code>docker-componse</code>, <code>pm2</code></p><p>node版本: <code>^18</code><br>pnpm版本: <code>^8</code></p><h2 id="服务端"><a href="#服务端" class="headerlink" title="服务端"></a>服务端</h2><h3 id="配置hosts"><a href="#配置hosts" class="headerlink" title="配置hosts"></a>配置hosts</h3><p>如果是windows的话,请在<code>C:\Windows\System32\drivers\etc\hosts</code>文件中添加以下内容</p><p>请替换为自己真实的mysql以及redis数据库ip地址, 192.168.31.202仅为示例</p><figure class="highlight shell"><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></pre></td><td class="code"><pre><span class="line">192.168.31.202 vane-redis-master</span><br><span class="line">192.168.31.202 vane-mysql-master</span><br><span class="line">192.168.31.202 vane-mysql-node1</span><br><span class="line">192.168.31.202 vane-mysql-node2</span><br></pre></td></tr></table></figure><h3 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h3><p><code>npm install -g pnpm</code> (也可以指定版本安装pnpm <code>npm install -g pnpm@8</code>)<br><code>pnpm install</code></p><p>请勿使用淘宝镜像源,会导致依赖安装失败<br>还原设置: <code>pnpm config set registry https://registry.npmjs.org/</code></p><h3 id="启动命令"><a href="#启动命令" class="headerlink" title="启动命令"></a>启动命令</h3><h4 id="开发环境"><a href="#开发环境" class="headerlink" title="开发环境"></a>开发环境</h4><p>启动服务端: <code>pnpm dev:server</code><br>启动web端: <code>pnpm dev:client</code><br>全部启动: <code>pnpm dev</code>\</p><h4 id="正式环境-Centos"><a href="#正式环境-Centos" class="headerlink" title="正式环境(Centos)"></a>正式环境(<code>Centos</code>)</h4><p>启动服务端</p><ol><li>原生docker部署(<code>不推荐</code>), 会根据Dockerfile文件中配置启动 会执行一个<code>run.sh</code>脚本,可按需求修改</li><li>非docker部署(<code>极不推荐,需要服务器支持node18,并且较为繁琐</code>),可以运行<code>pnpm start:server</code>(请先执行打包命令),<strong>需要自己启动以及配置数据库,并且node>=18并不支持Centos7,极力推荐使用docker进行部署</strong></li><li>docker-componse部署(<code>推荐</code>), 一键脚本 <code>sh docker_start.sh all/server/db</code> (参数按需选择all或者server或者db,不传入的话默认为server)<ol><li>db: 启动mysql以及redis数据库 如果你是第一次启动的话需要下载<a href="https://github.com/Big0range/vane">GitHub</a>中releases符合自己本地代码版本的数据库文件(版本可在根目录下package.json中查看),并解压到<code>/home/docker-volumes</code>目录下,正确的目录应该是<code>/home/docker-volumes/vane</code>,也可以自己修改<code>db/docker-compose.yml</code>文件中的相关配置,自己配置数据库</li><li>server: 启动node服务端和nginx,默认端口映射为80,如果你想修改的话,请自行修改<code>server/docker-compose.yml</code>文件中的相关配置</li><li>all: 数据库以及服务端全部启动</li><li>建议: 数据库如无修改,启动一次即可</li></ol></li></ol><h4 id="docker-镜像下载问题"><a href="#docker-镜像下载问题" class="headerlink" title="docker 镜像下载问题"></a>docker 镜像下载问题</h4><ol><li>如果你的服务器无法下载docker镜像,请尝试修改docker镜像源,具体操作请自行查询(帖子太多了,没必要写在这里…..)</li><li>如果你尝试修改docker镜像源后,仍然无法下载,在网盘中下载对应的压缩包,docker导入镜像,云盘内有使用说明,按照操作即可<br><a href="https://pan.baidu.com/s/1_WyuCMNGFTUkniuDia7P_g">网盘地址</a> 提取码: <code>8gyc</code></li></ol><h4 id="单独打包"><a href="#单独打包" class="headerlink" title="单独打包"></a>单独打包</h4><p>如果你有其他的需求,可以单独打包,打包后的文件在<code>dist</code>文件夹下</p><ol><li>打包服务端 <code>pnpm build:server</code></li><li>打包web端 <code>pnpm build:client</code></li></ol><h3 id="环境配置"><a href="#环境配置" class="headerlink" title="环境配置"></a>环境配置</h3><h4 id="开发环境配置"><a href="#开发环境配置" class="headerlink" title="开发环境配置"></a>开发环境配置</h4><p><code>node>=18</code>, <code>pnpm>=8</code>, <code>mysql:5.7</code>, <code>redis:6.2</code></p><h4 id="正式环境"><a href="#正式环境" class="headerlink" title="正式环境"></a>正式环境</h4><p><code>node>=16.14.0</code>(如果可以安装18版本的最好,16版本只是能保证基本的安装依赖), <code>mysql</code>, <code>redis</code>, <code>pnpm>=8,docker(可选)</code>, <code>docker-componse(可选)</code></p><h4 id="配置env文件"><a href="#配置env文件" class="headerlink" title="配置env文件"></a>配置env文件</h4><p>在<code>server</code>文件夹下创建<code>.env</code>文件,并按照<code>.env.example</code>文件中的格式进行配置</p><h3 id="添加接口路由"><a href="#添加接口路由" class="headerlink" title="添加接口路由"></a>添加接口路由</h3><h4 id="路由添加"><a href="#路由添加" class="headerlink" title="路由添加"></a>路由添加</h4><p>在<code>server/src/routes</code>文件夹中添加.ts文件即可,路由会根据所在位置以及文件名自动加载,无需显示引入</p><h4 id="文件名示例"><a href="#文件名示例" class="headerlink" title="文件名示例"></a>文件名示例</h4><p><code>routes/user/list.ts</code> => <code>http://localhost:9999/user/list</code>(get请求)<br><code>routes/user/index.ts</code> => <code>http://localhost:9999/user</code>(get请求)<br><code>routes/user/list.post.ts</code> => <code>http://localhost:9999/user/list</code>(post请求)<br><code>routes/user/list[a,b].post.ts</code> => <code>http://localhost:9999/user/list</code>(post请求,并req.params中带有a和b两个参数)</p><h4 id="文件内容示例"><a href="#文件内容示例" class="headerlink" title="文件内容示例"></a>文件内容示例</h4><figure class="highlight typescript"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Request</span>, <span class="title class_">Response</span> } <span class="keyword">from</span> <span class="string">'@/routes/types'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">async</span> <span class="keyword">function</span> (<span class="params">req: Request, res: Response</span>) {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 某些操作</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> res.<span class="title function_">ok</span>({</span><br><span class="line"> <span class="attr">message</span>: <span class="string">'操作成功'</span>,</span><br><span class="line"> <span class="attr">data</span>: data.<span class="property">Location</span>.<span class="title function_">split</span>(<span class="string">'/images/'</span>)[<span class="number">1</span>],</span><br><span class="line"> });</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 失败之后的操作</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> res.<span class="title function_">fail</span>(error);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 中间件 非必填</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> middleware = [<span class="function">()=></span>{}];</span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="接口白名单-不需要登录鉴权"><a href="#接口白名单-不需要登录鉴权" class="headerlink" title="接口白名单(不需要登录鉴权)"></a>接口白名单(不需要登录鉴权)</h3><h4 id="系统固定白名单-不可修改"><a href="#系统固定白名单-不可修改" class="headerlink" title="系统固定白名单(不可修改)"></a>系统固定白名单(不可修改)</h4><p>修改<code>server\src\serve\sys\routes.serve.ts</code>中的<code>constantRouteWhiteList</code>数组, 修改之后需要清空mysql中的<code>sys_routes</code>表和redis中的<code>routeWhitelist</code>缓存,否则无法生效</p><h4 id="自定义白名单-可修改"><a href="#自定义白名单-可修改" class="headerlink" title="自定义白名单(可修改)"></a>自定义白名单(可修改)</h4><p>启动前端服务,在<a href="http://localhost:4000/vane/system/white-api">http://localhost:4000/vane/system/white-api</a>中进行配置,无需修改mysql和redis</p><h3 id="日志记录"><a href="#日志记录" class="headerlink" title="日志记录"></a>日志记录</h3><h4 id="api日志"><a href="#api日志" class="headerlink" title="api日志"></a>api日志</h4><p>接口日志会自动记录在<code>server/logs/api</code>文件夹下,文件名为<code>access-${日期}.log</code></p><h4 id="sql日志"><a href="#sql日志" class="headerlink" title="sql日志"></a>sql日志</h4><p>sql日志会自动记录在<code>server/logs/sql</code>文件夹下,文件名为<code>sql-${日期}.log</code></p><h3 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h3><p>本项目使用了腾讯云对象存储,如果您没有腾讯云对象存储的话,请自行修改<code>server/src/server/routes/upload.ts</code>文件中的上传逻辑,并修改<code>client/src/utils/config.ts</code>文件中的<code>CDNURL</code> 远程资源地址</p><h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><ol><li><p>mysql使用了一主多从集群模式,如果您仅仅使用一个mysql的话,请修改<code>server/.env</code>文件中的<code>mysql</code>配置,以及<code>server/src/serve/db.ts</code>文件中<code>sequelize</code>的实例初始化代码</p></li><li><p>开发环境下, 默认不启动数据库集群模式,如果需要启动集群模式,请修改<code>server</code>文件夹下的<code>nodemon.json</code>中的NODE_ENV为production</p></li><li><p>虽然使用了pnpm的workspace的模式,但是由于某些原因服务端在打包后,不能正确解析工作区间内的包名,所以禁止在服务端代码内使用工作区间内的包,但是web端可以使用服务端的</p></li></ol><h2 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h2><p>如果你用过vue2版本的vue-admin的话,上手应该会非常快,因为本项目的前端是模仿vue-admin的vue3版本,并且使用了typescript,所以如果你不熟悉vue3的话,建议先学习一下vue3的基础知识</p><p>目录结构</p><figure class="highlight plaintext"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line">|-- 🗂️client</span><br><span class="line"> |-- 🗂️.vscode</span><br><span class="line"> |-- 📄settings.json</span><br><span class="line"> |-- 🗂️deploy (一键上传脚本,去掉deploy.config copy.json中的copy,并修改配置)</span><br><span class="line"> |-- 📄deploy.config copy.json</span><br><span class="line"> |-- 📄deploy.config.json</span><br><span class="line"> |-- 📄index.js</span><br><span class="line"> |-- 📄sysInfo.js</span><br><span class="line"> |-- 🗂️public</span><br><span class="line"> |-- 📄favicon.ico</span><br><span class="line"> |-- 📄logo.png</span><br><span class="line"> |-- 🗂️src</span><br><span class="line"> |-- 🗂️api (接口存放目录)</span><br><span class="line"> |-- 🗂️assets (静态资源存放目录)</span><br><span class="line"> |-- 🗂️components (公共组件存放目录)</span><br><span class="line"> |-- 🗂️Breadcrumb</span><br><span class="line"> |-- 🗂️CountTo</span><br><span class="line"> |-- 🗂️Cropper</span><br><span class="line"> |-- 🗂️GithubCorner</span><br><span class="line"> |-- 🗂️Hamburger</span><br><span class="line"> |-- 🗂️IconSelect</span><br><span class="line"> |-- 🗂️LangSelect</span><br><span class="line"> |-- 🗂️Notice</span><br><span class="line"> |-- 🗂️Page</span><br><span class="line"> |-- 🗂️Pagination</span><br><span class="line"> |-- 🗂️RightPanel</span><br><span class="line"> |-- 🗂️Screenfull</span><br><span class="line"> |-- 🗂️ScreenLock</span><br><span class="line"> |-- 🗂️SizeSelect</span><br><span class="line"> |-- 🗂️SvgIcon</span><br><span class="line"> |-- 🗂️UploadFile</span><br><span class="line"> |-- 🗂️WangEditor</span><br><span class="line"> |-- 🗂️directive (自定义属性)</span><br><span class="line"> |-- 🗂️permission</span><br><span class="line"> |-- 📄index.ts</span><br><span class="line"> |-- 🗂️hooks (自定义hooks)</span><br><span class="line"> |-- 📄useForm.ts</span><br><span class="line"> |-- 🗂️lang (i18,目前还有一些小问题,不影响使用)</span><br><span class="line"> |-- 📄en.ts</span><br><span class="line"> |-- 📄index.ts</span><br><span class="line"> |-- 📄zh-cn.ts</span><br><span class="line"> |-- 🗂️layout (页面布局组件)</span><br><span class="line"> |-- 🗂️components</span><br><span class="line"> |-- 📄index.vue</span><br><span class="line"> |-- 🗂️router (路由)</span><br><span class="line"> |-- 📄index.ts</span><br><span class="line"> |-- 🗂️store (pinia)</span><br><span class="line"> |-- 🗂️modules</span><br><span class="line"> |-- 📄index.ts</span><br><span class="line"> |-- 🗂️styles (公共class样式)</span><br><span class="line"> |-- 📄element-plus.scss</span><br><span class="line"> |-- 📄index.scss</span><br><span class="line"> |-- 📄mixin.scss</span><br><span class="line"> |-- 📄sidebar.scss</span><br><span class="line"> |-- 📄tailwind.css</span><br><span class="line"> |-- 📄variables.module.scss</span><br><span class="line"> |-- 🗂️theme (主题配色)</span><br><span class="line"> |-- 📄blue_black.ts</span><br><span class="line"> |-- 📄default.ts</span><br><span class="line"> |-- 📄green_black.ts</span><br><span class="line"> |-- 📄green_white.ts</span><br><span class="line"> |-- 📄index.ts</span><br><span class="line"> |-- 📄purple_white.ts</span><br><span class="line"> |-- 📄red_black.ts</span><br><span class="line"> |-- 📄red_white.ts</span><br><span class="line"> |-- 📄violet_dark.ts</span><br><span class="line"> |-- 🗂️utils (工具方法)</span><br><span class="line"> |-- 📄addWaterMark.ts</span><br><span class="line"> |-- 📄config.ts</span><br><span class="line"> |-- 📄downloadFile.ts</span><br><span class="line"> |-- 📄encryption.ts</span><br><span class="line"> |-- 📄filter.ts</span><br><span class="line"> |-- 📄hospitalOptions.ts</span><br><span class="line"> |-- 📄i18n.ts</span><br><span class="line"> |-- 📄index.ts</span><br><span class="line"> |-- 📄mitter.ts</span><br><span class="line"> |-- 📄request.ts</span><br><span class="line"> |-- 📄resize.ts</span><br><span class="line"> |-- 📄scroll-to.ts</span><br><span class="line"> |-- 📄storage.ts</span><br><span class="line"> |-- 📄validate.ts</span><br><span class="line"> |-- 🗂️views (页面组件存放处)</span><br><span class="line"> |-- 🗂️component</span><br><span class="line"> |-- 🗂️dashboard</span><br><span class="line"> |-- 🗂️demo</span><br><span class="line"> |-- 🗂️dept</span><br><span class="line"> |-- 🗂️error-page</span><br><span class="line"> |-- 🗂️login</span><br><span class="line"> |-- 🗂️redirect</span><br><span class="line"> |-- 🗂️shop</span><br><span class="line"> |-- 🗂️system</span><br><span class="line"> |-- 📄App.vue</span><br><span class="line"> |-- 📄components.d.ts</span><br><span class="line"> |-- 📄env.d.ts</span><br><span class="line"> |-- 📄main.ts</span><br><span class="line"> |-- 📄permission.ts (路由鉴权)</span><br><span class="line"> |-- 📄settings.ts (页面配置)</span><br><span class="line"> |-- 📄.editorconfig</span><br><span class="line"> |-- 📄.env (公共的env)</span><br><span class="line"> |-- 📄.env.development (开发模式独有的env)</span><br><span class="line"> |-- 📄.env.production (生产模式独有的env)</span><br><span class="line"> |-- 📄.env.staging (.....)</span><br><span class="line"> |-- 📄.eslintignore</span><br><span class="line"> |-- 📄.eslintrc.js</span><br><span class="line"> |-- 📄.gitignore</span><br><span class="line"> |-- 📄.prettierignore</span><br><span class="line"> |-- 📄.prettierrc.js</span><br><span class="line"> |-- 📄commitlint.config.js</span><br><span class="line"> |-- 📄components.d.ts</span><br><span class="line"> |-- 📄global.d.ts (全局ts声明,请不要import引入其他,否则会失效)</span><br><span class="line"> |-- 📄index.html (模板html)</span><br><span class="line"> |-- 📄package.json</span><br><span class="line"> |-- 📄postcss.config.js</span><br><span class="line"> |-- 📄tailwind.config.js (tailwind 配置文件)</span><br><span class="line"> |-- 📄tsconfig.json</span><br><span class="line"> |-- 📄tsconfig.node.json</span><br><span class="line"> |-- 📄vite.config.ts (vite 配置文件)</span><br></pre></td></tr></table></figure><h3 id="添加路由"><a href="#添加路由" class="headerlink" title="添加路由"></a>添加路由</h3><ol><li>在<code>src/router/index.ts</code>中添加路由,并且在<code>src/views</code>中添加页面组件</li><li>在<code>src/views</code>中添加页面组件, <code>系统管理=>菜单管理</code>中添加菜单地址, 并在 <code>系统管理=>角色管理</code>为角色分配菜单权限</li></ol><h2 id="代码提交"><a href="#代码提交" class="headerlink" title="代码提交"></a>代码提交</h2><p>根目录下执行以下命令<br><code>git add .</code><br><code>pnpm commit</code><br><code>git push</code></p>]]></content>
<categories>
<category> ts </category>
</categories>
<tags>
<tag> ts js Vue3 TypeScript Node </tag>
</tags>
</entry>
<entry>
<title>获取数组元素的类型 普通函数的返回类型 Promise的返回类型 ()=>Promise的返回类型</title>
<link href="/article/a3e83579.html"/>
<url>/article/a3e83579.html</url>
<content type="html"><![CDATA[<h1 id="获取数组元素的类型-普通函数的返回类型-Promise的返回类型-Promise的返回类型"><a href="#获取数组元素的类型-普通函数的返回类型-Promise的返回类型-Promise的返回类型" class="headerlink" title="获取数组元素的类型 普通函数的返回类型 Promise的返回类型 ()=>Promise的返回类型"></a>获取数组元素的类型 普通函数的返回类型 Promise的返回类型 ()=>Promise的返回类型</h1><h2 id="获取数组元素的类型"><a href="#获取数组元素的类型" class="headerlink" title="获取数组元素的类型"></a>获取数组元素的类型</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Unpacked</span><T> = T <span class="keyword">extends</span> (infer U)[] ? U : T;</span><br><span class="line"><span class="comment">// type A = string</span></span><br><span class="line"><span class="keyword">type</span> A = <span class="title class_">Unpacked</span><<span class="built_in">string</span>[]></span><br></pre></td></tr></table></figure><p>这段代码的意思是 判断T是不是数组类型 如果是则返回该数组元素的类型 否则返回T</p><h2 id="普通函数的返回类型"><a href="#普通函数的返回类型" class="headerlink" title="普通函数的返回类型"></a>普通函数的返回类型</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Unpacked</span><T> = T <span class="keyword">extends</span> (...<span class="attr">args</span>: <span class="built_in">any</span>[]) => infer U ? U : T;</span><br><span class="line"><span class="comment">// type B = number</span></span><br><span class="line"><span class="keyword">type</span> B = <span class="title class_">Unpacked</span><<span class="function">() =></span> <span class="built_in">number</span>></span><br></pre></td></tr></table></figure><p>这段代码的意思是 判断T是不是Function类型 如果是则返回Function return的类型 否则返回T</p><h2 id="Promise的返回类型"><a href="#Promise的返回类型" class="headerlink" title="Promise的返回类型"></a>Promise的返回类型</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Unpacked</span><T> = T <span class="keyword">extends</span> <span class="title class_">Promise</span><infer U> ? U : T;</span><br><span class="line"><span class="comment">// type C = number</span></span><br><span class="line"><span class="keyword">type</span> C = <span class="title class_">Unpacked</span><<span class="title class_">Promise</span><<span class="built_in">number</span>>></span><br></pre></td></tr></table></figure><p>这段代码的意思是 判断T是不是Promise类型 如果是则返回Promise resolve的类型 否则返回T</p><h2 id="Promise的返回类型-1"><a href="#Promise的返回类型-1" class="headerlink" title="()=> Promise的返回类型"></a>()=> Promise的返回类型</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Unpacked</span><T> = T <span class="keyword">extends</span> (...<span class="attr">args</span>: <span class="built_in">any</span>[]) => <span class="title class_">Promise</span><infer U> ? U : T;</span><br><span class="line"><span class="comment">// type D = number</span></span><br><span class="line"><span class="keyword">type</span> D = <span class="title class_">Unpacked</span><<span class="title class_">Promise</span><<span class="built_in">number</span>>></span><br></pre></td></tr></table></figure><p>这段代码的意思是 判断T是不是() => Promise类型 如果是则返回Promise resolve的类型 否则返回T</p><h2 id="封装为一个通用工具类型"><a href="#封装为一个通用工具类型" class="headerlink" title="封装为一个通用工具类型"></a>封装为一个通用工具类型</h2><figure class="highlight typescript"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Unpacked</span><T> = T <span class="keyword">extends</span> <span class="literal">null</span> | <span class="literal">undefined</span></span><br><span class="line"> ? T</span><br><span class="line"> : T <span class="keyword">extends</span> (...<span class="attr">args</span>: <span class="built_in">any</span>[]) => <span class="title class_">Promise</span><infer U></span><br><span class="line"> ? U</span><br><span class="line"> : T <span class="keyword">extends</span> (infer U)[]</span><br><span class="line"> ? U</span><br><span class="line"> : T <span class="keyword">extends</span> <span class="title class_">Promise</span><infer U></span><br><span class="line"> ? U</span><br><span class="line"> : T <span class="keyword">extends</span> (...<span class="attr">args</span>: <span class="built_in">any</span>[]) => infer U</span><br><span class="line"> ? U</span><br><span class="line"> : T;</span><br><span class="line"></span><br><span class="line"><span class="comment">// type A = string</span></span><br><span class="line"><span class="keyword">type</span> A = <span class="title class_">Unpacked</span><<span class="built_in">string</span>[]></span><br><span class="line"></span><br><span class="line"><span class="comment">// type B = number</span></span><br><span class="line"><span class="keyword">type</span> B = <span class="title class_">Unpacked</span><<span class="function">() =></span> <span class="built_in">number</span>></span><br><span class="line"></span><br><span class="line"><span class="comment">// type C = number</span></span><br><span class="line"><span class="keyword">type</span> C = <span class="title class_">Unpacked</span><<span class="title class_">Promise</span><<span class="built_in">number</span>>></span><br><span class="line"></span><br><span class="line"><span class="comment">// type D = number</span></span><br><span class="line"><span class="keyword">type</span> D = <span class="title class_">Unpacked</span><<span class="title class_">Promise</span><<span class="built_in">number</span>>></span><br></pre></td></tr></table></figure><h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h2><p>封装时一定要注意判断顺序 <strong>()=> Promise , Promise 都属于Function 所以要先判断 ()=> Promise 然后是 Promise,再然后是普通 Function</strong></p>]]></content>
<categories>
<category> ts </category>
</categories>
<tags>
<tag> ts </tag>
</tags>
</entry>
<entry>
<title>为什么null==0为false</title>
<link href="/article/3151c6f1.html"/>
<url>/article/3151c6f1.html</url>
<content type="html"><![CDATA[<h2 id="为什么-null-0-为false"><a href="#为什么-null-0-为false" class="headerlink" title="为什么 null == 0 为false"></a>为什么 null == 0 为false</h2><p> 以下为文档截图 附上链接 <a href="https://tc39.es/ecma262/#sec-islooselyequal">https://tc39.es/ecma262/#sec-islooselyequal</a></p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/269a4ba673d949689831770e1fac7b9c~tplv-k3u1fbpfcp-watermark.image" alt="微信截图_20220208095546.png"></p><ol><li><p>x,y如果类型相同 则比较转化为字符串之后的值</p></li><li><p>x是null y是undefined 返回true<br>……</p></li><li><p>如果没有符合以上类型的 则返回false</p></li></ol><p>大家都知道 null 是Object类型, 0是Number类型<br>x是Object y是Number<br>js在根据比较规则一一对应时 发现并没有匹配的 也就不知道该怎么比较 只能按第14条规则来<code>return false</code></p><p>真是离了个大普</p><p>并且由于ES6 采用了一种策略叫One JavaScript<br>即:</p><ol><li>新版本始终完全向后兼容（但偶尔可能会有轻微、不明显的清理） </li><li>旧特性不删除也不修复，而是引入更好的版本，比如let就是var的改进版 </li><li>如果语言的某些方面有变化，只在新的语法结构内生效，即隐式选用，例如，yield只在generator中才是关键字、模块和类中的所有代码都默认开启严格模式</li></ol><p>所以这个问题很大概率不会修复 最多会引入新的比较方式</p>]]></content>
<categories>
<category> js </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title>Nuxt 中的store数据持久化存储(防止Vuex数据刷新丢失)</title>
<link href="/article/562d4505.html"/>
<url>/article/562d4505.html</url>
<content type="html"><![CDATA[<h1 id="Nuxt-中的store数据持久化存储-防止Vuex数据刷新丢失"><a href="#Nuxt-中的store数据持久化存储-防止Vuex数据刷新丢失" class="headerlink" title="Nuxt 中的store数据持久化存储(防止Vuex数据刷新丢失)"></a>Nuxt 中的store数据持久化存储(防止Vuex数据刷新丢失)</h1><h2 id="第一步"><a href="#第一步" class="headerlink" title="第一步"></a>第一步</h2><p>在根目录plugins文件夹下新建一个<code>store.js</code>(没有plugins的话就自己新建一个)</p><h2 id="第二步"><a href="#第二步" class="headerlink" title="第二步"></a>第二步</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> ({ app }) => {</span><br><span class="line"> <span class="comment">// 获取到store</span></span><br><span class="line"> <span class="keyword">const</span> store = app.<span class="property">store</span></span><br><span class="line"> <span class="comment">// 获取到session中store数据 有就存入</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">sessionStorage</span>.<span class="title function_">getItem</span>(<span class="string">'store'</span>)) {</span><br><span class="line"> store.<span class="title function_">replaceState</span>(<span class="title class_">Object</span>.<span class="title function_">assign</span>({}, store.<span class="property">state</span>, <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">sessionStorage</span>.<span class="title function_">getItem</span>(<span class="string">'store'</span>))))</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 在页面刷新时将vuex里的信息保存到sessionStorage里</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'beforeunload'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">sessionStorage</span>.<span class="title function_">setItem</span>(<span class="string">'store'</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(store.<span class="property">state</span>))</span><br><span class="line"> })</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'pagehide'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">sessionStorage</span>.<span class="title function_">setItem</span>(<span class="string">'store'</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(store.<span class="property">state</span>))</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="第三步"><a href="#第三步" class="headerlink" title="第三步"></a>第三步</h2><p>在根目录下===><code>nuxt.config.js</code>中===>plugins的数组内添加一项<code>{ src: '~/plugins/store.js', ssr: false }</code></p><p><code>ssr:false</code>的意思是禁止服务端渲染 因为服务端中是没有window的</p><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></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins</span>: [</span><br><span class="line"> { <span class="attr">src</span>: <span class="string">'~/plugins/store.js'</span>, <span class="attr">ssr</span>: <span class="literal">false</span> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h3 id="OK"><a href="#OK" class="headerlink" title="OK"></a>OK</h3>]]></content>
<categories>
<category> js </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title>前端项目搭建规范</title>
<link href="/article/325b2ef6.html"/>
<url>/article/325b2ef6.html</url>
<content type="html"><![CDATA[<h1 id="项目搭建规范"><a href="#项目搭建规范" class="headerlink" title="项目搭建规范"></a>项目搭建规范</h1><h2 id="一-代码规范"><a href="#一-代码规范" class="headerlink" title="一 代码规范"></a>一 代码规范</h2><h3 id="1-1-集成editorconfig配置"><a href="#1-1-集成editorconfig配置" class="headerlink" title="1.1. 集成editorconfig配置"></a>1.1. 集成editorconfig配置</h3><p>EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。</p><figure class="highlight yaml"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># http://editorconfig.org</span></span><br><span class="line"></span><br><span class="line"><span class="string">root</span> <span class="string">=</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">[<span class="string">*</span>] <span class="comment"># 表示所有文件适用</span></span><br><span class="line"><span class="string">charset</span> <span class="string">=</span> <span class="string">utf-8</span> <span class="comment"># 设置文件字符集为 utf-8</span></span><br><span class="line"><span class="string">indent_style</span> <span class="string">=</span> <span class="string">space</span> <span class="comment"># 缩进风格（tab | space）</span></span><br><span class="line"><span class="string">indent_size</span> <span class="string">=</span> <span class="number">2</span> <span class="comment"># 缩进大小</span></span><br><span class="line"><span class="string">end_of_line</span> <span class="string">=</span> <span class="string">lf</span> <span class="comment"># 控制换行类型(lf | cr | crlf)</span></span><br><span class="line"><span class="string">trim_trailing_whitespace</span> <span class="string">=</span> <span class="literal">true</span> <span class="comment"># 去除行首的任意空白字符</span></span><br><span class="line"><span class="string">insert_final_newline</span> <span class="string">=</span> <span class="literal">true</span> <span class="comment"># 始终在文件末尾插入一个新行</span></span><br><span class="line"></span><br><span class="line">[<span class="string">*.md</span>] <span class="comment"># 表示仅 md 文件适用以下规则</span></span><br><span class="line"><span class="string">max_line_length</span> <span class="string">=</span> <span class="string">off</span></span><br><span class="line"><span class="string">trim_trailing_whitespace</span> <span class="string">=</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>VSCode需要安装一个插件：EditorConfig for VS Code</p><h3 id="1-2-使用prettier工具"><a href="#1-2-使用prettier工具" class="headerlink" title="1.2. 使用prettier工具"></a>1.2. 使用prettier工具</h3><p>Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。</p><p>1.安装prettier</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add prettier -D</span><br></pre></td></tr></table></figure><p>2.配置.prettierrc文件：</p><ul><li>useTabs：使用tab缩进还是空格缩进，选择false；</li><li>tabWidth：tab是空格的情况下，是几个空格，选择2个；</li><li>printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；</li><li>singleQuote：使用单引号还是双引号，选择true，使用单引号；</li><li>trailingComma：在多行输入的尾逗号是否添加，设置为 <code>none</code>；</li><li>semi：语句末尾是否要加分号，默认值true，选择false表示不加；</li></ul><figure class="highlight json"><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="punctuation">{</span></span><br><span class="line"> <span class="attr">"useTabs"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"tabWidth"</span><span class="punctuation">:</span> <span class="number">2</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"printWidth"</span><span class="punctuation">:</span> <span class="number">80</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"singleQuote"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"trailingComma"</span><span class="punctuation">:</span> <span class="string">"none"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"semi"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p>3.创建.prettierignore忽略文件</p><figure class="highlight plaintext"><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">/dist/*</span><br><span class="line">.local</span><br><span class="line">.output.js</span><br><span class="line">/node_modules/**</span><br><span class="line"></span><br><span class="line">**/*.svg</span><br><span class="line">**/*.sh</span><br><span class="line"></span><br><span class="line">/public/*</span><br></pre></td></tr></table></figure><p>4.VSCode需要安装prettier的插件</p><p>5.测试prettier是否生效</p><ul><li>测试一：在代码中保存代码；</li><li>测试二：配置一次性修改的命令；</li></ul><p>在package.json中配置一个scripts：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">"prettier"</span><span class="punctuation">:</span> <span class="string">"prettier --write ."</span></span><br></pre></td></tr></table></figure><h3 id="1-3-使用ESLint检测"><a href="#1-3-使用ESLint检测" class="headerlink" title="1.3. 使用ESLint检测"></a>1.3. 使用ESLint检测</h3><p>1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。</p><p>2.VSCode需要安装ESLint插件：</p><p>3.解决eslint和prettier冲突的问题：</p><p>安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add eslint-plugin-prettier eslint-config-prettier -D</span><br></pre></td></tr></table></figure><p>添加prettier插件：</p><figure class="highlight json"><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">extends<span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="string">"plugin:vue/vue3-essential"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"eslint:recommended"</span><span class="punctuation">,</span> </span><br><span class="line"> <span class="string">"@vue/typescript/recommended"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"@vue/prettier"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"@vue/prettier/@typescript-eslint"</span><span class="punctuation">,</span></span><br><span class="line"> 'plugin<span class="punctuation">:</span>prettier/recommended'</span><br><span class="line"><span class="punctuation">]</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure><h3 id="1-4-git-Husky和eslint"><a href="#1-4-git-Husky和eslint" class="headerlink" title="1.4. git Husky和eslint"></a>1.4. git Husky和eslint</h3><p>虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：</p><ul><li><p>也就是我们希望保证代码仓库中的代码都是符合eslint规范的；</p></li><li><p>那么我们需要在组员执行 <code>git commit </code> 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；</p></li></ul><p>那么如何做到这一点呢？可以通过Husky工具：</p><ul><li>husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push</li></ul><p>如何使用husky呢？</p><p>这里我们可以使用自动配置命令：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx husky-init && npm install</span><br></pre></td></tr></table></figure><p>这里会做三件事：</p><p>1.安装husky相关的依赖：</p><p>2.在项目目录下创建 <code>.husky</code> 文件夹：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx huksy install</span><br></pre></td></tr></table></figure><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq16zo75j307703mt8m.jpg" alt="image-20210723112719634"></p><p>3.在package.json中添加一个脚本：</p><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq26phpxj30dj06fgm3.jpg" alt="image-20210723112817691"></p><p>接下来，我们需要去完成一个操作：在进行commit时，执行lint脚本：</p><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq3hn229j30nf04z74q.jpg" alt="image-20210723112932943"></p><p>这个时候我们执行git commit的时候会自动对代码进行lint校验。</p><h3 id="1-5-git-commit规范"><a href="#1-5-git-commit规范" class="headerlink" title="1.5. git commit规范"></a>1.5. git commit规范</h3><h4 id="1-5-1-代码提交风格"><a href="#1-5-1-代码提交风格" class="headerlink" title="1.5.1. 代码提交风格"></a>1.5.1. 代码提交风格</h4><p>通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。</p><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw17gaqjj30to0cj3zp.jpg"></p><p>但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen</p><ul><li>Commitizen 是一个帮助我们编写规范 commit message 的工具；</li></ul><p>1.安装Commitizen</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add commitizen -D</span><br></pre></td></tr></table></figure><p>2.安装git-cz：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add git-cz -D</span><br></pre></td></tr></table></figure><p>并且在package.json中添加scripts：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">"commit"</span><span class="punctuation">:</span> <span class="string">"git cz"</span></span><br></pre></td></tr></table></figure><p>这个时候我们提交代码需要使用 <code>yarn commit</code>：</p><ul><li>第一步是选择type，本次更新的类型</li></ul><table><thead><tr><th>Type</th><th>作用</th></tr></thead><tbody><tr><td>feat</td><td>新增特性 (feature)</td></tr><tr><td>fix</td><td>修复 Bug(bug fix)</td></tr><tr><td>docs</td><td>修改文档 (documentation)</td></tr><tr><td>style</td><td>代码格式修改(white-space, formatting, missing semi colons, etc)</td></tr><tr><td>refactor</td><td>代码重构(refactor)</td></tr><tr><td>perf</td><td>改善性能(A code change that improves performance)</td></tr><tr><td>test</td><td>测试(when adding missing tests)</td></tr><tr><td>build</td><td>变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）</td></tr><tr><td>ci</td><td>更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等</td></tr><tr><td>chore</td><td>变更构建流程或辅助工具(比如更改测试环境)</td></tr><tr><td>revert</td><td>代码回退</td></tr></tbody></table><ul><li>第二步选择本次修改的范围（作用域）</li></ul><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw8ca15oj30r600wmx4.jpg" alt="image-20210723150147510"></p><ul><li>第三步选择提交的信息</li></ul><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw8mq3zlj60ni01hmx402.jpg" alt="image-20210723150204780"></p><ul><li>第四步提交详细的描述信息</li></ul><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw8y05bjj30kt01fjrb.jpg" alt="image-20210723150223287"></p><ul><li>第五步是否是一次重大的更改</li></ul><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw9z5vbij30bm00q744.jpg" alt="image-20210723150322122"></p><ul><li>第六步是否影响某个open issue</li></ul><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqwar8xp1j30fq00ya9x.jpg" alt="image-20210723150407822"></p><p>我们也可以在scripts中构建一个命令来执行 cz：</p><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqwc4gtkxj30e207174t.jpg" alt="image-20210723150526211"></p><h4 id="1-5-2-自己配置-提交规则"><a href="#1-5-2-自己配置-提交规则" class="headerlink" title="1.5.2. 自己配置 提交规则"></a>1.5.2. 自己配置 提交规则</h4><p>新建一个changelog.config.js 格式如下</p><figure class="highlight js"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">disableEmoji</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">list</span>: [</span><br><span class="line"> <span class="string">'test'</span>,</span><br><span class="line"> <span class="string">'feat'</span>,</span><br><span class="line"> <span class="string">'fix'</span>,</span><br><span class="line"> <span class="string">'chore'</span>,</span><br><span class="line"> <span class="string">'api'</span>,</span><br><span class="line"> <span class="string">'docs'</span>,</span><br><span class="line"> <span class="string">'refactor'</span>,</span><br><span class="line"> <span class="string">'style'</span>,</span><br><span class="line"> <span class="string">'ci'</span>,</span><br><span class="line"> <span class="string">'perf'</span>,</span><br><span class="line"> <span class="string">'merge'</span></span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">maxMessageLength</span>: <span class="number">64</span>,</span><br><span class="line"> <span class="attr">minMessageLength</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">questions</span>: [</span><br><span class="line"> <span class="string">'type'</span>,</span><br><span class="line"> <span class="string">'scope'</span>,</span><br><span class="line"> <span class="string">'subject'</span>,</span><br><span class="line"> <span class="string">'body'</span>,</span><br><span class="line"> <span class="string">'breaking'</span>,</span><br><span class="line"> <span class="string">'issues'</span>,</span><br><span class="line"> <span class="string">'lerna'</span></span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">scopes</span>: [],</span><br><span class="line"> <span class="attr">types</span>: {</span><br><span class="line"> <span class="attr">api</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'api 接口对接'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'🅰️'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'api'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">merge</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'分支合并'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'🙏'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'merge'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">chore</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'构建过程或辅助工具更改'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'🤖'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'chore'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">ci</span>: {</span><br><span class="line"> <span class="attr">description</span>:</span><br><span class="line"> <span class="string">'更改持续集成软件的配置文件和package中的scripts命令，例如scopes: Travis, Circle等'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'🎡'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'ci'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">docs</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'文档变更'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'✏️'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'docs'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">feat</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'新增一个功能'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'🎸'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'feat'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">fix</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'修复一个Bug'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'🐛'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'fix'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">perf</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'优化性能'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'⚡️'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'perf'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">refactor</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'代码重构'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'💡'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'refactor'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">style</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'代码格式（不影响功能，例如空格、分号等格式修正）'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'💄'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'style'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">test</span>: {</span><br><span class="line"> <span class="attr">description</span>: <span class="string">'测试'</span>,</span><br><span class="line"> <span class="attr">emoji</span>: <span class="string">'💍'</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">'test'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><h4 id="1-5-3-代码提交验证"><a href="#1-5-3-代码提交验证" class="headerlink" title="1.5.3. 代码提交验证"></a>1.5.3. 代码提交验证</h4><p>如果我们按照cz来规范了提交风格，但是依然有同事通过 <code>git commit</code> 按照不规范的格式提交应该怎么办呢？</p><ul><li>我们可以通过commitlint来限制提交；</li></ul><p>1.安装 @commitlint/config-conventional 和 @commitlint/cli</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i @commitlint/config-conventional @commitlint/cli -D</span><br></pre></td></tr></table></figure><p>2.在根目录创建commitlint.config.js文件，配置commitlint</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">extends</span>: [<span class="string">'@commitlint/config-conventional'</span>]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>3.使用husky生成commit-msg文件，验证提交信息：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"</span><br></pre></td></tr></table></figure><h2 id="二-第三方库集成"><a href="#二-第三方库集成" class="headerlink" title="二 第三方库集成"></a>二 第三方库集成</h2><h3 id="2-1-vue-config-js配置"><a href="#2-1-vue-config-js配置" class="headerlink" title="2.1. vue.config.js配置"></a>2.1. vue.config.js配置</h3><p>vue.config.js有三种配置方式：</p><ul><li>方式一：直接通过CLI提供给我们的选项来配置：<ul><li>比如publicPath：配置应用程序部署的子目录（默认是 <code>/</code>，相当于部署在 <code>https://www.my-app.com/</code>）；</li><li>比如outputDir：修改输出的文件夹；</li></ul></li><li>方式二：通过configureWebpack修改webpack的配置：<ul><li>可以是一个对象，直接会被合并；</li><li>可以是一个函数，会接收一个config，可以通过config来修改配置；</li></ul></li><li>方式三：通过chainWebpack修改webpack的配置：<ul><li>是一个函数，会接收一个基于 <a href="https://github.com/mozilla-neutrino/webpack-chain">webpack-chain</a> 的config对象，可以对配置进行修改；</li></ul></li></ul><figure class="highlight js"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">outputDir</span>: <span class="string">'./build'</span>,</span><br><span class="line"> <span class="comment">// configureWebpack: {</span></span><br><span class="line"> <span class="comment">// resolve: {</span></span><br><span class="line"> <span class="comment">// alias: {</span></span><br><span class="line"> <span class="comment">// views: '@/views'</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> <span class="comment">// configureWebpack: (config) => {</span></span><br><span class="line"> <span class="comment">// config.resolve.alias = {</span></span><br><span class="line"> <span class="comment">// '@': path.resolve(__dirname, 'src'),</span></span><br><span class="line"> <span class="comment">// views: '@/views'</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> <span class="comment">// },</span></span><br><span class="line"> <span class="attr">chainWebpack</span>: <span class="function">(<span class="params">config</span>) =></span> {</span><br><span class="line"> config.<span class="property">resolve</span>.<span class="property">alias</span>.<span class="title function_">set</span>(<span class="string">'@'</span>, path.<span class="title function_">resolve</span>(__dirname, <span class="string">'src'</span>)).<span class="title function_">set</span>(<span class="string">'views'</span>, <span class="string">'@/views'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="2-2-vue-router集成"><a href="#2-2-vue-router集成" class="headerlink" title="2.2. vue-router集成"></a>2.2. vue-router集成</h3><p>安装vue-router的最新版本：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-router@next</span><br></pre></td></tr></table></figure><p>创建router对象：</p><figure class="highlight ts"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { createRouter, createWebHashHistory } <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">RouteRecordRaw</span> } <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">RouteRecordRaw</span>[] = [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">'/'</span>,</span><br><span class="line"> <span class="attr">redirect</span>: <span class="string">'/main'</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">'/main'</span>,</span><br><span class="line"> <span class="attr">component</span>: <span class="function">() =></span> <span class="keyword">import</span>(<span class="string">'../views/main/main.vue'</span>)</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">'/login'</span>,</span><br><span class="line"> <span class="attr">component</span>: <span class="function">() =></span> <span class="keyword">import</span>(<span class="string">'../views/login/login.vue'</span>)</span><br><span class="line"> }</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>({</span><br><span class="line"> routes,</span><br><span class="line"> <span class="attr">history</span>: <span class="title function_">createWebHashHistory</span>()</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure><p>安装router：</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./router'</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(router).<span class="title function_">mount</span>(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure><p>在App.vue中配置跳转：</p><figure class="highlight html"><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>></span>登录<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/main"</span>></span>首页<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br></pre></td></tr></table></figure><h3 id="2-3-vuex集成"><a href="#2-3-vuex集成" class="headerlink" title="2.3. vuex集成"></a>2.3. vuex集成</h3><p>安装vuex：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vuex@next</span><br></pre></td></tr></table></figure><p>创建store对象：</p><figure class="highlight ts"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { createStore } <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="title function_">createStore</span>({</span><br><span class="line"> <span class="title function_">state</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'coderwhy'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br></pre></td></tr></table></figure><p>安装store：</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(router).<span class="title function_">use</span>(store).<span class="title function_">mount</span>(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure><p>在App.vue中使用：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h2</span>></span>{{ $store.state.name }}<span class="tag"></<span class="name">h2</span>></span></span><br></pre></td></tr></table></figure><h3 id="2-4-element-plus集成"><a href="#2-4-element-plus集成" class="headerlink" title="2.4. element-plus集成"></a>2.4. element-plus集成</h3><p>Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：</p><ul><li>相信很多同学在Vue2中都使用过element-ui，而element-plus正是element-ui针对于vue3开发的一个UI组件库；</li><li>它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；</li></ul><p>安装element-plus</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install element-plus</span><br></pre></td></tr></table></figure><h4 id="2-4-1-全局引入"><a href="#2-4-1-全局引入" class="headerlink" title="2.4.1. 全局引入"></a>2.4.1. 全局引入</h4><p>一种引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">ElementPlus</span> <span class="keyword">from</span> <span class="string">'element-plus'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'element-plus/lib/theme-chalk/index.css'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./router'</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./store'</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(router).<span class="title function_">use</span>(store).<span class="title function_">use</span>(<span class="title class_">ElementPlus</span>).<span class="title function_">mount</span>(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure><h4 id="2-4-2-局部引入"><a href="#2-4-2-局部引入" class="headerlink" title="2.4.2. 局部引入"></a>2.4.2. 局部引入</h4><p>也就是在开发中用到某个组件对某个组件进行引入：</p><figure class="highlight plaintext"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <div id="app"></span><br><span class="line"> <router-link to="/login">登录</router-link></span><br><span class="line"> <router-link to="/main">首页</router-link></span><br><span class="line"> <router-view></router-view></span><br><span class="line"></span><br><span class="line"> <h2>{{ $store.state.name }}</h2></span><br><span class="line"></span><br><span class="line"> <el-button>默认按钮</el-button></span><br><span class="line"> <el-button type="primary">主要按钮</el-button></span><br><span class="line"> <el-button type="success">成功按钮</el-button></span><br><span class="line"> <el-button type="info">信息按钮</el-button></span><br><span class="line"> <el-button type="warning">警告按钮</el-button></span><br><span class="line"> <el-button type="danger">危险按钮</el-button></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><script lang="ts"></span><br><span class="line">import { defineComponent } from 'vue'</span><br><span class="line"></span><br><span class="line">import { ElButton } from 'element-plus'</span><br><span class="line"></span><br><span class="line">export default defineComponent({</span><br><span class="line"> name: 'App',</span><br><span class="line"> components: {</span><br><span class="line"> ElButton</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><style lang="less"></span><br><span class="line"></style></span><br></pre></td></tr></table></figure><p>但是我们会发现是没有对应的样式的，引入样式有两种方式：</p><ul><li>全局引用样式（像之前做的那样）；</li><li>局部引用样式（通过babel的插件）；</li></ul><p>1.安装babel的插件：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-plugin-import -D</span><br></pre></td></tr></table></figure><p>2.配置babel.config.js</p><figure class="highlight js"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> [</span><br><span class="line"> <span class="string">'import'</span>,</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">libraryName</span>: <span class="string">'element-plus'</span>,</span><br><span class="line"> <span class="attr">customStyleName</span>: <span class="function">(<span class="params">name</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`element-plus/lib/theme-chalk/<span class="subst">${name}</span>.css`</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">presets</span>: [<span class="string">'@vue/cli-plugin-babel/preset'</span>]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>但是这里依然有个弊端：</p><ul><li>这些组件我们在多个页面或者组件中使用的时候，都需要导入并且在components中进行注册；</li><li>所以我们可以将它们在全局注册一次；</li></ul><figure class="highlight ts"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> {</span><br><span class="line"> <span class="title class_">ElButton</span>,</span><br><span class="line"> <span class="title class_">ElTable</span>,</span><br><span class="line"> <span class="title class_">ElAlert</span>,</span><br><span class="line"> <span class="title class_">ElAside</span>,</span><br><span class="line"> <span class="title class_">ElAutocomplete</span>,</span><br><span class="line"> <span class="title class_">ElAvatar</span>,</span><br><span class="line"> <span class="title class_">ElBacktop</span>,</span><br><span class="line"> <span class="title class_">ElBadge</span>,</span><br><span class="line">} <span class="keyword">from</span> <span class="string">'element-plus'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line"> <span class="title class_">ElButton</span>,</span><br><span class="line"> <span class="title class_">ElTable</span>,</span><br><span class="line"> <span class="title class_">ElAlert</span>,</span><br><span class="line"> <span class="title class_">ElAside</span>,</span><br><span class="line"> <span class="title class_">ElAutocomplete</span>,</span><br><span class="line"> <span class="title class_">ElAvatar</span>,</span><br><span class="line"> <span class="title class_">ElBacktop</span>,</span><br><span class="line"> <span class="title class_">ElBadge</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> cpn <span class="keyword">of</span> components) {</span><br><span class="line"> app.<span class="title function_">component</span>(cpn.<span class="property">name</span>, cpn)</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="2-5-axios集成"><a href="#2-5-axios集成" class="headerlink" title="2.5. axios集成"></a>2.5. axios集成</h3><p>安装axios：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install axios</span><br></pre></td></tr></table></figure><p>简单封装axios：</p><figure class="highlight ts"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> { <span class="title class_">AxiosRequestConfig</span> } <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> { <span class="variable constant_">BASE_URL</span>, <span class="variable constant_">TIME_OUT</span> } <span class="keyword">from</span> <span class="string">'./config'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> instance = axios.<span class="title function_">create</span>({</span><br><span class="line"> <span class="attr">baseURL</span>: <span class="variable constant_">BASE_URL</span>,</span><br><span class="line"> <span class="attr">timeout</span>: <span class="variable constant_">TIME_OUT</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">instance.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line"> <span class="function">(<span class="params">config</span>) =></span> {</span><br><span class="line"> <span class="comment">// 1.发送网络请求时, 在界面的中间位置显示Loading的组件</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 加token</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">'CS_TOKEN'</span>)</span><br><span class="line"> ? (config.<span class="property">headers</span>.<span class="property">token</span> = <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">'CS_TOKEN'</span>))</span><br><span class="line"> : <span class="string">''</span></span><br><span class="line"> <span class="keyword">return</span> config</span><br><span class="line"> },</span><br><span class="line"> <span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'request error:'</span>, err)</span><br><span class="line"> }</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">instance.<span class="property">interceptors</span>.<span class="property">response</span>.<span class="title function_">use</span>(</span><br><span class="line"> <span class="comment">// 响应成功处理方式</span></span><br><span class="line"> <span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> res.<span class="property">data</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 响应失败处理方式</span></span><br><span class="line"> <span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(err.<span class="property">message</span>)</span><br><span class="line"> }</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> request<T>(<span class="attr">config</span>: <span class="title class_">AxiosRequestConfig</span>): <span class="title class_">Promise</span><T> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="title function_">instance</span>(config)</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="title function_">resolve</span>(res.<span class="property">data</span>)</span><br><span class="line"> })</span><br><span class="line"> .<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="title function_">reject</span>(err)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><h4 id="2-5-1-使用方法"><a href="#2-5-1-使用方法" class="headerlink" title="2.5.1 使用方法"></a>2.5.1 使用方法</h4><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { request } <span class="keyword">from</span> <span class="string">'@/utils//request'</span></span><br><span class="line"></span><br><span class="line">interface <span class="title class_">LoginDataType</span> {</span><br><span class="line"> <span class="attr">code</span>: string,</span><br><span class="line"> <span class="attr">message</span>: string,</span><br><span class="line"> <span class="attr">data</span>: any | []</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">login</span>(<span class="params"></span>): <span class="title class_">Promise</span><<span class="title class_">LoginDataType</span>> {</span><br><span class="line"> <span class="keyword">return</span> request<<span class="title class_">LoginDataType</span>>({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">'/home/multidata'</span>,</span><br><span class="line"> <span class="attr">method</span>: <span class="string">'GET'</span></span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { login } <span class="keyword">from</span> <span class="string">'@/api/login'</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">login</span>()</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line"> })</span><br><span class="line"> .<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> js </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title>手摸手带你用Hexo撸博客(三)之添加评论系统</title>
<link href="/article/7885e224.html"/>
<url>/article/7885e224.html</url>
<content type="html"><![CDATA[<p>注: 笔者采用的是butterfly主题, 主题内置集成评论系统</p><h2 id="butterfly主题开启评论"><a href="#butterfly主题开启评论" class="headerlink" title="butterfly主题开启评论"></a>butterfly主题开启评论</h2><p>开启评论需要在comments-use中填写你需要的评论。</p><p>以Valine为例</p><figure class="highlight yaml"><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">comments:</span></span><br><span class="line"> <span class="attr">use:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">Valine</span></span><br><span class="line"> <span class="comment"># 是否显示服务商</span></span><br><span class="line"> <span class="attr">text:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># 懒加载 开启之后无法计数</span></span><br><span class="line"> <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># 评论计数</span></span><br><span class="line"> <span class="attr">count:</span> <span class="literal">true</span> </span><br></pre></td></tr></table></figure><h2 id="配置你的-LeanCloud-应用"><a href="#配置你的-LeanCloud-应用" class="headerlink" title="配置你的 LeanCloud 应用"></a>配置你的 LeanCloud 应用</h2><p>遵循 <a href="https://valine.js.org/">Valine</a>的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。</p><figure class="highlight yaml"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">valine:</span></span><br><span class="line"> <span class="attr">appId:</span> <span class="comment"># 先空着 先空着 先空着 (leancloud application app id)</span></span><br><span class="line"> <span class="attr">appKey:</span> <span class="comment"># 先空着 先空着 先空着 (leancloud application app key)</span></span><br><span class="line"> <span class="attr">pageSize:</span> <span class="number">10</span> <span class="comment"># comment list page size</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">monsterid</span> <span class="comment"># gravatar style https://valine.js.org/#/avatar</span></span><br><span class="line"> <span class="attr">lang:</span> <span class="string">zh-CN</span> <span class="comment"># i18n: zh-CN/zh-TW/en/ja</span></span><br><span class="line"> <span class="attr">placeholder:</span> <span class="string">记得留下你的昵称和邮箱....可以快速收到回复(头像设置请参考https://valine.js.org/avatar.html)</span></span><br><span class="line"> <span class="attr">guest_info:</span> <span class="string">nick,mail,link</span> <span class="comment">#valine comment header info (nick/mail/link)</span></span><br><span class="line"> <span class="attr">recordIP:</span> <span class="literal">false</span> <span class="comment"># Record reviewer IP</span></span><br><span class="line"> <span class="attr">serverURLs:</span> <span class="comment"># This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line"> <span class="attr">bg:</span> <span class="string">/image/comment_bg.png</span> <span class="comment"># valine background</span></span><br><span class="line"> <span class="attr">emojiCDN:</span> <span class="comment"># emoji CDN</span></span><br><span class="line"> <span class="attr">enableQQ:</span> <span class="literal">false</span> <span class="comment"># enable the Nickname box to automatically get QQ Nickname and QQ Avatar</span></span><br><span class="line"> <span class="attr">requiredFields:</span> <span class="string">nick,mail</span> <span class="comment"># required fields (nick/mail)</span></span><br><span class="line"> <span class="attr">option:</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="注册LeanCloud账号"><a href="#注册LeanCloud账号" class="headerlink" title="注册LeanCloud账号"></a>注册LeanCloud账号</h2><p><strong><a href="https://console.leancloud.cn/register">注册地址</a></strong></p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc51ac98dc4.png"></p><h2 id="创建应用"><a href="#创建应用" class="headerlink" title="创建应用"></a>创建应用</h2><p>一般选择开发版就可以了, 土豪请选择商用版, 优点是系统不会休眠</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc51d40fa58.png"></p><p>选择应用进入设置页面</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc51eb0f1fb.png"></p><p>把这里的AppId 和AppKey 添加到之前的配置中</p><p>建议设置域名白名单, 防止他人利用接口滥用</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc521175235.png"></p><h2 id="lean评论管理平台的域名绑定"><a href="#lean评论管理平台的域名绑定" class="headerlink" title="lean评论管理平台的域名绑定"></a>lean评论管理平台的域名绑定</h2><p>设置=>域名绑定=>绑定新域名</p><p><strong>需配置DNS节点</strong></p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc523f917cd.png"></p><p>如果遇到已备案域名显示无法查询到备案信息</p><p>请前往官方社区 发帖反映问题</p><p><a href="https://forum.leancloud.cn/t/topic/23752">传送门</a></p><h2 id="lean部署"><a href="#lean部署" class="headerlink" title="lean部署"></a>lean部署</h2><p>云引擎=>部署</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc5256ae26d.png"></p><p>部署地址: <a href="https://github.com/zhaojun1998/Valine-Admin">https://github.com/zhaojun1998/Valine-Admin</a></p><p>分支: master</p><p>此外，你需要设置云引擎的环境变量以提供必要的信息，点击云引擎的设置页，设置如下信息： </p><ol><li><strong>必选参数</strong></li></ol><ul><li><code>SITE_NAME</code> : 网站名称。</li><li><code>SITE_URL</code> : 网站地址, <strong>最后不要加 <code>/</code> 。</strong></li><li><code>SMTP_USER</code> : SMTP 服务用户名，一般为邮箱地址。</li><li><code>SMTP_PASS</code> : SMTP 密码，一般为授权码，而不是邮箱的登陆密码，请自行查询对应邮件服务商的获取方式</li><li><code>SMTP_SERVICE</code> : 邮件服务提供商，支持 <code>QQ</code>、<code>163</code>、<code>126</code>、<code>Gmail</code>、<code>"Yahoo"</code>、<code>......</code> ，全部支持请参考 : <a href="https://nodemailer.com/smtp/well-known/#supported-services">Nodemailer Supported services</a>。 — <em>如这里没有你使用的邮件提供商，请查看<a href="https://github.com/zhaojun1998/Valine-Admin/blob/master/%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE.md#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%82%AE%E4%BB%B6%E6%9C%8D%E5%8A%A1%E5%99%A8">自定义邮件服务器</a></em></li><li><code>SENDER_NAME</code> : 寄件人名称。</li></ul><p> <strong>例如:</strong></p><p> <img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc5286279f5.png"></p><ol start="2"><li><p>设置完环境变量，必须<strong>重新部署</strong>，邮件提醒功能才会生效 </p></li><li><p>添加用户</p><p> <strong>存储</strong> —— <strong>用户</strong> —— <strong>添加用户</strong> </p><p>可能会有一点延迟, 耐心等待一会</p></li><li><p>leanCloud自动唤醒</p><ol><li><p>由于leanCloud的休眠策略, 评论可能没有邮件通知(毕竟是白嫖)</p></li><li><p>首先需要添加环境变量，<code>ADMIN_URL : 云引擎域名</code>，如：<a href="https://jackma.avosapps.us(重启生效)/">https://jackma.avosapps.us（重启生效）</a></p></li><li><p>然后点击【云引擎】【定时任务】【创建定时任务】，按照图片上填写：<code>0 0/20 7-23 * * ?</code></p></li></ol><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc529f816c7.png"></p></li><li><p>登录之前的管理平台地址即可管理评论 lean.limeichao.cn 这个东东</p><p> <img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc52b4257d6.png"></p></li></ol><h2 id="自动唤醒失败问题"><a href="#自动唤醒失败问题" class="headerlink" title="自动唤醒失败问题"></a>自动唤醒失败问题</h2><p>免费版的 LeanCloud 容器，是有强制性休眠策略的，不能 24 小时运行：</p><ul><li>每天必须休眠 6 个小时</li><li>30 分钟内没有外部请求，则休眠。</li><li>休眠后如果有新的外部请求实例则马上启动（但激活时此次发送邮件会失败）</li><li>Valine-admin由于Leancloud流控原因，自动唤醒任务可能会失败, 所以这里介绍一个使用第三方计划任务网站进行定时唤醒 Valine-admin 的方法。</li></ul><h3 id="注册-cron-job-帐号"><a href="#注册-cron-job-帐号" class="headerlink" title="注册 cron-job 帐号"></a>注册 cron-job 帐号</h3><p>注册地址：<a href="https://cron-job.org/en/signup/">https://cron-job.org/en/signup/</a></p><blockquote><p>注册时的时区请选择 <code>Asia/Shanghai</code></p></blockquote><h3 id="添加一个计划任务"><a href="#添加一个计划任务" class="headerlink" title="添加一个计划任务"></a>添加一个计划任务</h3><ol><li><p>登陆之后依次点击 <code>Members</code>，<code>cronjobs</code>，<code>Create cronjob</code></p></li><li><p>Title, Address</p><ul><li>Title 可以随便填一个</li><li>Address 填写你的云引擎环境变量的 ADMIN_URL，也就是Leancloud的Web 主机域名。</li></ul></li><li><p>Schedule</p><p>选择 User-defined 进行自定义设置（按住 Ctrl 可多选）</p><ul><li>Days of month: 全选</li><li>Days of week: 全选</li><li>Months: 全选</li><li>Hours: 你需要在哪个时间段唤醒就选择什么</li><li>Minutes: 选择 0 , 20 , 40</li></ul></li><li><p>Notifications</p><p>可以不用修改，也可以根据自己的需要修改</p></li><li><p>Common</p><p>勾选Save responses, 保存唤醒日志</p></li><li><p>点击Create cronjob</p></li></ol><p><strong>有不懂的地方请评论区留言哦</strong></p>]]></content>
<categories>
<category> 博客搭建 </category>
</categories>
<tags>
<tag> 博客搭建 </tag>
</tags>
</entry>
<entry>
<title>手摸手带你用Hexo撸博客(二)之配置主题</title>
<link href="/article/fdc79fa4.html"/>
<url>/article/fdc79fa4.html</url>
<content type="html"><![CDATA[<p>在上一篇博客<a href="7f28fa45.html">手摸手带你用Hexo撸博客(一)</a>中主要介绍了博客的初步搭建<br>今天我们继续讲如何在Hexo搭建的博客中应用主题</p><h2 id="官网选择自己喜欢的主题"><a href="#官网选择自己喜欢的主题" class="headerlink" title="官网选择自己喜欢的主题"></a>官网选择自己喜欢的主题</h2><p>点击这里<a href="https://hexo.io/themes">Hexo主题</a>进入官网主题页面<br>然后选择自己喜欢的一个<br>我这里选择的是<a href="https://butterfly.js.org/posts/21cfbf15/">Butterfly</a>主题,也是我目前仍在使用的</p><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>目前有三种安装方式<strong>Gitee、GitHub、npm</strong></p><p>Gitee安装</p><p><code>git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</code></p><p>Github安装</p><p><code>git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly</code></p><p>NPM安装</p><p><code>npm i hexo-theme-butterfly</code></p><p>我个人建议Gitee安装 速度较快</p><p><em><strong>划重点 划重点 划重点</strong></em></p><p>在根目录下clone</p><p>在根目录下clone</p><p>在根目录下clone</p><p>重要的事情说三遍</p><p>在这里<img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc3523c9581.png" alt="安装路径"></p><p>右键点击 Git bash, 运行git工具</p><p>自己从gitee或github安装方式中选择一个</p><p>我用的是gitee<img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc353bf3263.png" alt="gitee安装"></p><h2 id="应用主题"><a href="#应用主题" class="headerlink" title="应用主题"></a>应用主题</h2><p>在根目录下<code>_config.yml</code>文件中将theme属性的值替换为 <em><strong>butterfly</strong></em> </p><p>安装插件<br>如果你沒有 pug 以及 stylus 的渲染器，请下载安装：</p><p><code>npm install hexo-renderer-pug hexo-renderer-stylus --save</code></p><p>把主题文件夹中的<code> _config.yml</code> 复制到 Hexo 根目录里，同时重新命名为<code> _config.butterfly.yml</code>。</p><p>以后只需要在<code> _config.butterfly.yml</code>进行配置就行。</p><p>Hexo会自动合併主题中的<code>_config.yml</code>和 <code>_config.butterfly.yml</code>里的配置，如果存在同名配置，会使用<code>_config.butterfly.yml</code>的配置，其优先度较高。</p><p><em><strong>此时的博客是没有背景以及头像等等的, 不要怀疑自己配置错了, 需要单独去主题配置文件 <code>_config.butterfly.yml</code>里配置</strong></em></p><h2 id="配置主题"><a href="#配置主题" class="headerlink" title="配置主题"></a>配置主题</h2><p>在申明一次所有主题相关的配置都在<code>_config.butterfly.yml</code>中</p><p>推荐大家安装一款谷歌插件**即刻图床 ** 把图片托管到百度阿里等服务器上(而且是免费的),不占用自己博客项目的体积</p><p>先简单的配置一下</p><ol><li>社交图标</li></ol><figure class="highlight yaml"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line"> <span class="attr">fab fa-github:</span> <span class="string">https://gitee.com/li_mei_chao</span> <span class="string">||</span> <span class="string">Gitee(不是Github)</span></span><br><span class="line"> <span class="attr">fas fa-envelope:</span> <span class="string">mailto:[email protected]</span> <span class="string">||</span> <span class="string">Email(邮箱)</span></span><br><span class="line"> <span class="attr">fab fa-npm:</span> <span class="string">https://www.npmjs.com/~li_mei_chao</span> <span class="string">||</span> <span class="string">NPM</span></span><br></pre></td></tr></table></figure><p>效果:<img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc357a8ce27.png" alt="效果"></p><ol start="2"><li><p>头像</p><figure class="highlight yaml"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line"> <span class="attr">img:</span> <span class="string">https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608612723751&di=fd7705efd8b083269714c05170fb556a&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F09%2F20180209120154_oycpr.jpg</span></span><br><span class="line"> <span class="attr">effect:</span> <span class="literal">false</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>效果:<img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc359442faf.png" alt="效果"></p></li><li><p>主页背景大图</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_img:</span> <span class="string">https://pic.rmb.bdstatic.com/bjh/e9cacddaab0a63026e7c73ea9957c39c.jpg</span></span><br></pre></td></tr></table></figure><img src="https://pic.rmb.bdstatic.com/bjh/0968a360d14352ffc72bf4d8fd2db16c.png" style="zoom:33%;" /></li><li><p>开启背景动态</p><figure class="highlight yaml"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># canvas_ribbon (靜止彩帶背景)</span></span><br><span class="line"><span class="comment"># See: https://github.com/hustcc/ribbon.js</span></span><br><span class="line"><span class="attr">canvas_ribbon:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">size:</span> <span class="number">150</span></span><br><span class="line"> <span class="attr">alpha:</span> <span class="number">0.6</span></span><br><span class="line"> <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">click_to_change:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Fluttering Ribbon (動態彩帶)</span></span><br><span class="line"><span class="attr">canvas_fluttering_ribbon:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># canvas_nest</span></span><br><span class="line"><span class="comment"># https://github.com/hustcc/canvas-nest.js</span></span><br><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">color:</span> <span class="string">'0,255,0'</span> <span class="comment">#color of lines, default: '0,0,0'; RGB values: (R,G,B).(<span class="doctag">note:</span> use ',' to separate.)</span></span><br><span class="line"> <span class="attr">opacity:</span> <span class="number">1</span> <span class="comment"># the opacity of line (0~1), default: 0.5.</span></span><br><span class="line"> <span class="attr">zIndex:</span> <span class="number">-1</span> <span class="comment"># z-index property of the background, default: -1.</span></span><br><span class="line"> <span class="attr">count:</span> <span class="number">99</span> <span class="comment"># the number of lines, default: 99.</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>效果:</p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc36f9ba02c.png" style="zoom:33%;" /></li><li><p>更多配置<br> 配置大部分都很简单, 建议大家参考一下<a href="https://butterfly.js.org/posts/4aa8abbe/">butterfly官方文档</a>, 功能很多, 按照自己的喜好进行配置</p></li></ol><p> 添加评论功能会稍微复杂点, 如果大家有需要的话, 我下期再讲</p>]]></content>
<categories>
<category> 博客搭建 </category>
</categories>
<tags>
<tag> 博客搭建 </tag>
</tags>
</entry>
<entry>
<title>css实现瀑布流布局</title>
<link href="/article/ec28b177.html"/>
<url>/article/ec28b177.html</url>
<content type="html"><![CDATA[<h2 id="实现思路"><a href="#实现思路" class="headerlink" title="实现思路"></a>实现思路</h2><p>依赖column便可实现最简单实用的瀑布流布局</p><h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><p>我这里前端框架用的是Vue, 用其他的也一样</p><h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><figure class="highlight html"><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"waterfall"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in 20"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:style</span>=<span class="string">"{height:heights[Math.floor(Math.random()*4)] + 'px',background:colors[Math.floor(Math.random()*12)]}"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:key</span>=<span class="string">"index"</span>></span></span><br><span class="line"> {{item}}</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="Script"><a href="#Script" class="headerlink" title="Script"></a>Script</h3><figure class="highlight html"><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//模拟随机高度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">list</span>: [<span class="number">200</span>, <span class="number">250</span>, <span class="number">150</span>, <span class="number">300</span>],</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//颜色尽量随机,区别每个模块</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">colors</span>: [<span class="string">'#eccf2c'</span>, <span class="string">'#b8232c'</span>, <span class="string">'#125d9e'</span>, <span class="string">'#367945'</span>, <span class="string">'#fca91b'</span>, <span class="string">'#26ada7'</span>, <span class="string">'#77bfbf'</span>, <span class="string">'#ff5c87'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="string">'#f40'</span>, <span class="string">'#ee2061'</span>, <span class="string">'#feee39'</span>, <span class="string">'#f5a79a'</span>, <span class="string">'#ec70d0'</span>, <span class="string">'#b4a1cf'</span>]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="Css"><a href="#Css" class="headerlink" title="Css"></a>Css</h3><figure class="highlight html"><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="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.waterfall</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">400px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">column-count</span>: <span class="number">3</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">column-gap</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><code>column-count: 3;</code>内容均分三份</p><p><code>column-gap: 10px;</code> 列之间的间距</p><p>效果:</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc349d88758.png" alt="1.png"></p><h3 id="此时你会发现-8-和15分头行动了-此时还需要给子元素加一个属性"><a href="#此时你会发现-8-和15分头行动了-此时还需要给子元素加一个属性" class="headerlink" title="此时你会发现 8 和15分头行动了,此时还需要给子元素加一个属性"></a>此时你会发现 8 和15分头行动了,此时还需要给子元素加一个属性</h3><p><code>break-inside: avoid;</code></p><p>这样就不会被分割了</p><p>如下:</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc34c37dac0.png" alt="2.png"></p><p>具体需要什么效果看自己需求取舍就行</p><h2 id="兼容问题"><a href="#兼容问题" class="headerlink" title="兼容问题"></a>兼容问题</h2><p>肯定会有小伙伴说你这兼容性不行啊, ie 10以下怎么办</p><p>解决办法也不是没有</p><p>那就是:</p><p>以后面试的时候先问好需不需要兼容ie, 如果需要, 赶紧撤乎, 从根本上解决问题, 还能省几根头发</p>]]></content>
<categories>
<category> css </category>
</categories>
<tags>
<tag> css </tag>
<tag> 布局 </tag>
</tags>
</entry>
<entry>
<title>手摸手带你用Hexo撸博客(一)</title>
<link href="/article/7f28fa45.html"/>
<url>/article/7f28fa45.html</url>
<content type="html"><![CDATA[<h1 id="手摸手带你撸博客-一"><a href="#手摸手带你撸博客-一" class="headerlink" title="手摸手带你撸博客(一)"></a>手摸手带你撸博客(一)</h1><h2 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h2><h3 id="安装-node"><a href="#安装-node" class="headerlink" title="安装 node"></a>安装 <a href="http://nodejs.cn/">node</a></h3><p>狂点下一步</p><p>命令行输入此条命令 如果能看到版本号则安装成功</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure><h3 id="安装Git"><a href="#安装Git" class="headerlink" title="安装Git"></a>安装<a href="https://git-scm.com/">Git</a></h3><p>(同上) 实在不会的小伙伴百度一下,教程很多,不细说了</p><p>命令行输入此条命令 如果能看到版本号则安装成功</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git version</span><br></pre></td></tr></table></figure><h3 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h3><p>博客的搭建工具有很多,这里我选用的是Hexo,原因嘛,因为我只会这一个,相同功能的轮子会一个就够了,而且也确实好用</p><p><strong>全局安装Hexo</strong></p><p>打开 CMD</p><p><code>npm install -g hexo-cli</code></p><p>安装完成后，就可以通过Hexo搭建博客了 。</p><p>进入要创建项目的目录, 执行以下命令</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init my-blog</span><br></pre></td></tr></table></figure><p>新建完成后，指定文件夹的目录如下：</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">├── _config.yml 博客主题的大部分参数配置(不包括主题)</span><br><span class="line">├── package.json 这就不用说了吧</span><br><span class="line">├── scaffolds (模板文件夹 新建文件时根据模板创建)</span><br><span class="line">├── source </span><br><span class="line">| ├── _drafts(博客草稿文件,需要自己新建) </span><br><span class="line">| └── _posts (博客的MD文件,你所写的文章一般都放在这里)</span><br><span class="line">└── themes (主题文件)</span><br></pre></td></tr></table></figure><p>根目录下命令行输入</p><p><code>npm run server</code></p><p>一个普通的不能再普通的博客主题就搭建好了</p><p>浏览器打开<code>http://localhost:4000 </code>进行本地访问</p><p>如果端口号被占用你可以自定义端口号</p><p>例如</p><p><code>npm run server --port 5000</code></p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc32c0220e5.png" alt="1.png"></p><h2 id="部署到Git-Page"><a href="#部署到Git-Page" class="headerlink" title="部署到Git Page"></a>部署到Git Page</h2><h3 id="随意新建一个仓库"><a href="#随意新建一个仓库" class="headerlink" title="随意新建一个仓库"></a>随意新建一个仓库</h3><p>名字随便起, 能保证上传下载就行</p><h3 id="启动pages"><a href="#启动pages" class="headerlink" title="启动pages"></a>启动pages</h3><ol><li><p>点击仓库内的Setting</p></li><li><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc33123856d.png" alt="2.png"></p></li><li><p>往下滑,找到这一个选项</p></li></ol><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc3341e3d79.png" alt="3.png"></p><ol start="4"><li><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc33629bcbb.png" alt="4.png"></p></li><li><p>之后页面会刷新一下,再找到这个选项</p></li></ol><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc3383c1596.png" alt="5.png"><br> 点击上面的页面访问路径就可以查看了,不过现在还什么都没有,进去肯定是404</p><h3 id="配置自己的项目"><a href="#配置自己的项目" class="headerlink" title="配置自己的项目"></a>配置自己的项目</h3><p>去根目录下找到<code>_config.yml</code>这个文件</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc33cd83b6a.png" alt="6.png"></p><h3 id="接着使用-Git-配置下-SSH-Key。设置你的用户名和邮箱："><a href="#接着使用-Git-配置下-SSH-Key。设置你的用户名和邮箱：" class="headerlink" title="接着使用 Git 配置下 SSH Key。设置你的用户名和邮箱："></a>接着使用 Git 配置下 SSH Key。设置你的用户名和邮箱：</h3><figure class="highlight csharp"><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">git config --<span class="keyword">global</span> user.name <span class="string">"你的用户名"</span></span><br><span class="line">git config --<span class="keyword">global</span> user.email <span class="string">"你的Github邮箱地址"</span></span><br></pre></td></tr></table></figure><p>生成密钥：<br> <code>ssh-keygen -t rsa -C "你的Github邮箱地址"</code></p><p>查看密钥并复制：<br> <code>cat ~/.ssh/id_rsa.pub</code></p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc33f636d81.png" alt="7.png"></p><h3 id="Github-添加-SSH-Key"><a href="#Github-添加-SSH-Key" class="headerlink" title="Github 添加 SSH Key"></a>Github 添加 SSH Key</h3><p>然后在 Github 上添加刚刚生成的 SSH Key。</p><p>打开 Github –> Settings –> SSH and GPG keys –> SSH keys –> New SSH key，复制之前生成的密钥粘贴就行了。</p><p>此时打开 Git，输入命令 <code>ssh -T [email protected]</code> 验证一下，如果出现 Hi XXX! You’ve successfully authenticated, but GitHub does not provide shell access. 说明 SSH key 添加成功了。如果出现问题，很有可能是之前的用户名、邮箱设置错误，检查一下。常见错误可以参考：<br> <a href="https://links.jianshu.com/go?to=https://www.cnblogs.com/ldq2016/p/7418206.html">git-ssh 配置和使用</a><br> <a href="https://links.jianshu.com/go?to=https://help.github.com/en/github/authenticating-to-github/error-permission-denied-publickey">GitHub Help - Error Permission denied (publickey)</a></p><h3 id="项目配置一键部署github"><a href="#项目配置一键部署github" class="headerlink" title="项目配置一键部署github"></a>项目配置一键部署github</h3><p>需要先安装一个插件</p><p><code>npm install hexo-deployer-git --save</code></p><p>在配置文件的最底部有这几条</p><p><img src="https://www.limeichao.cn:7792/i/2024/02/26/65dc3432f1328.png" alt="8.png"></p><p>然后命令行执行命令(需按顺序)</p><p><code>npm run clean</code> <em><strong>清除缓存</strong></em></p><p><code>npm run build</code><em><strong>项目打包</strong></em></p><p><code>npm run deploy</code><em><strong>上传git仓库</strong></em></p><h2 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h2><p>在访问自己的博客地址就可以访问了, 不会有404了</p><p>下期教大家怎么应用主题 </p><p>毕竟博客这么丑</p><p>怎么好意思拿出来见人啊</p>]]></content>
<categories>
<category> 博客搭建 </category>
</categories>
<tags>
<tag> 博客搭建 </tag>
</tags>
</entry>
<entry>
<title>js常用API整理</title>
<link href="/article/9796ce43.html"/>
<url>/article/9796ce43.html</url>
<content type="html"><![CDATA[<h2 id="js常用API整理"><a href="#js常用API整理" class="headerlink" title="js常用API整理"></a>js常用API整理</h2><h3 id="Array"><a href="#Array" class="headerlink" title="Array"></a>Array</h3><h4 id="new-Set（）"><a href="#new-Set（）" class="headerlink" title="new Set（）"></a>new Set（）</h4><p>数组去重</p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr)); <span class="comment">// {3,4,5,6,7}</span></span><br><span class="line"><span class="keyword">const</span> a = <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr)) <span class="comment">// [3, 4, 5, 6, 7]</span></span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="keyword">const</span> a = [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)]<span class="comment">//推荐</span></span><br></pre></td></tr></table></figure><h4 id="sort（）"><a href="#sort（）" class="headerlink" title="sort（）"></a>sort（）</h4><p> 对数组元素进行排序（改变原数组）。 </p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a,b</span>)=></span>a-b)) <span class="comment">// [1,2,3,4,5,6] 大小正序</span></span><br><span class="line">cosole.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a,b</span>)=></span>b-a))<span class="comment">// [6,5,4,3,2,1] 大小倒序</span></span><br><span class="line"><span class="comment">//不可以进行运算的则比较编码大小 'b' > 'a' => true</span></span><br></pre></td></tr></table></figure><h4 id="reverse（）"><a href="#reverse（）" class="headerlink" title="reverse（）"></a>reverse（）</h4><p> 反转数组中的元素（改变原数组）。 </p><figure class="highlight javascript"><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"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line">conosle.<span class="title function_">log</span>(arr.<span class="title function_">reverse</span>()); <span class="comment">// [7, 6, 5, 5, 4, 4, 4, 3]</span></span><br></pre></td></tr></table></figure><h4 id="delete"><a href="#delete" class="headerlink" title="delete"></a>delete</h4><p> 删除一个数组成员，会形成空位，并不会影响length属性（改变原数组）,同样适用于对象。 </p><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>];</span><br><span class="line"><span class="keyword">delete</span> arr[<span class="number">1</span>];</span><br><span class="line">conosle.<span class="title function_">log</span>(arr); <span class="comment">// [0, empty, 2]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//对象</span></span><br><span class="line"><span class="keyword">const</span> obj = {<span class="attr">name</span>: <span class="string">'谢大脚'</span>,<span class="attr">age</span>: <span class="string">'18'</span>,<span class="attr">sex</span>: <span class="string">'女'</span>};</span><br><span class="line"><span class="keyword">delete</span> obj.<span class="property">sex</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj); <span class="comment">// {name: "谢大脚", age: "18"}</span></span><br></pre></td></tr></table></figure><h4 id="shift（）"><a href="#shift（）" class="headerlink" title="shift（）"></a>shift（）</h4><p> 把数组的第一个元素从其中删除，并返回第一个元素的值（改变原数组）。 </p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">shift</span>(); <span class="comment">// 0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// [1, 2]</span></span><br></pre></td></tr></table></figure><h4 id="unshift（）"><a href="#unshift（）" class="headerlink" title="unshift（）"></a>unshift（）</h4><p> 向数组的起始处添加一个或多个元素,并返回新的长度（改变原数组）。 </p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">unshift</span>(<span class="number">8</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 9(a为返回的数组的新长度)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// [8, 3, 4, 4, 5, 4, 6, 5, 7]</span></span><br></pre></td></tr></table></figure><h4 id="push（）"><a href="#push（）" class="headerlink" title="push（）"></a>push（）</h4><p> 在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度（改变原数组）。 </p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">push</span>(<span class="number">8</span>,<span class="number">9</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 10(a为返回的数组的新长度)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// [3, 4, 4, 5, 4, 6, 5, 7, 8, 9]</span></span><br></pre></td></tr></table></figure><h4 id="toString（）"><a href="#toString（）" class="headerlink" title="toString（）"></a>toString（）</h4><p> 可把值转换成字符串。 </p><figure class="highlight javascript"><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"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">toString</span>()); <span class="comment">// 3,4,4,5,4,6,5,7</span></span><br></pre></td></tr></table></figure><h4 id="concat（）"><a href="#concat（）" class="headerlink" title="concat（）"></a>concat（）</h4><p> 在原始数据尾部添加另外数据组成新数据（字符串也适用）。 </p><p>不过一般没什么人用了 不考虑ie的话 直接用扩展运算…就可以了</p><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组</span></span><br><span class="line"><span class="keyword">const</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">const</span> b = [<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">const</span> c = a.<span class="title function_">concat</span>(b); <span class="comment">// [1, 2, 3, 4, 5]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//字符串</span></span><br><span class="line"><span class="keyword">const</span> x = <span class="string">'abc'</span>;</span><br><span class="line"><span class="keyword">const</span> y = <span class="string">'def'</span>;</span><br><span class="line"><span class="keyword">const</span> z = x.<span class="title function_">concat</span>(y); <span class="comment">// abcdef</span></span><br></pre></td></tr></table></figure><h4 id="join（）"><a href="#join（）" class="headerlink" title="join（）"></a>join（）</h4><p> 以参数作为分隔符，将所有参数组成一个字符串返回（默认逗号分隔）。 </p><figure class="highlight javascript"><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"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">join</span>(<span class="string">'-'</span>)); <span class="comment">// 3-4-4-5-4-6-5-7</span></span><br></pre></td></tr></table></figure><h4 id="slice（start-end）"><a href="#slice（start-end）" class="headerlink" title="slice（start, end）"></a>slice（start, end）</h4><p> 用于提取原来数组的一部分，会返回一个提取的新数组，原数组不变（字符串适用,不包括end)。 </p><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">slice</span>(<span class="number">2</span>, <span class="number">5</span>); <span class="comment">// [4, 5, 4]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//字符串</span></span><br><span class="line"><span class="keyword">const</span> x = <span class="string">'abcdefgh'</span>;</span><br><span class="line"><span class="keyword">const</span> y = x.<span class="title function_">slice</span>(<span class="number">3</span>, <span class="number">6</span>); <span class="comment">// def</span></span><br></pre></td></tr></table></figure><h4 id="splice（）"><a href="#splice（）" class="headerlink" title="splice（）"></a>splice（）</h4><p>用于删除原数组的一部分，并且可以在删除的位置添加新的数组成员，返回值是被删除的数组元素。（改变原数组）</p><p>splice（t, v, s）t:被删除元素的起始位置；v：被删除元素个数；s:s以及后面的元素为被插入的新元素。</p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">splice</span>(<span class="number">3</span>, <span class="number">2</span>, <span class="number">12</span>); <span class="comment">// [5, 4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// [3, 4, 4, 12, 6, 5, 7]</span></span><br></pre></td></tr></table></figure><h4 id="map（）"><a href="#map（）" class="headerlink" title="map（）"></a>map（）</h4><p>依次遍历数组成员，根据遍历结果返回一个新数组。（不会改变原始数组）。</p><figure class="highlight javascript"><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"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =></span> item*<span class="number">2</span>;) <span class="comment">// [6, 8, 8, 10, 8, 12, 10, 14]</span></span><br></pre></td></tr></table></figure><h4 id="forEach（）"><a href="#forEach（）" class="headerlink" title="forEach（）"></a>forEach（）</h4><p>跟map方法类似，遍历数组，区别是无返回值。</p><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><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>){<span class="variable language_">console</span>.<span class="title function_">log</span>(value)}))</span><br><span class="line"> <span class="number">3</span></span><br><span class="line"> <span class="number">4</span></span><br><span class="line"> <span class="number">4</span></span><br><span class="line"> <span class="number">5</span></span><br><span class="line"> <span class="number">4</span></span><br><span class="line"> <span class="number">6</span></span><br><span class="line"> <span class="number">5</span></span><br><span class="line"> <span class="number">7</span></span><br></pre></td></tr></table></figure><h4 id="for-in（）"><a href="#for-in（）" class="headerlink" title="for in（）"></a>for in（）</h4><p>跟<code>map</code>方法类似，遍历对象或者数组。</p><p>但值得注意的是<code>for in </code>循环返回的值都是数据结构的<code>键值名</code>。 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对象</span></span><br><span class="line"><span class="keyword">const</span> obj = {<span class="attr">a</span>: <span class="number">123</span>, <span class="attr">b</span>: <span class="number">12</span>, <span class="attr">c</span>: <span class="number">2</span> };</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> a <span class="keyword">in</span> obj) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// a</span></span><br><span class="line"> b</span><br><span class="line"> c </span><br><span class="line"><span class="comment">//数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> a <span class="keyword">in</span> arr) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"> <span class="number">1</span></span><br><span class="line"> <span class="number">2</span></span><br><span class="line"> <span class="number">3</span></span><br></pre></td></tr></table></figure><h4 id="filter（）"><a href="#filter（）" class="headerlink" title="filter（）"></a>filter（）</h4><p>一个过滤方法，参数是一个函数，所有的数组成员依次执行该函数，返回结果为<code>true</code>的成员组成一个新数组返回。（不会改变原始数组）。</p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">const</span> a = arr.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =></span> item % <span class="number">3</span> > <span class="number">1</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// [5, 5]</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h4 id="some（）-every（）"><a href="#some（）-every（）" class="headerlink" title="some（）& every（）"></a>some（）& every（）</h4><p>这两个方法类似于“断言”（<code>assert</code>），用来判断数组成员是否符合某种条件。</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( arr.<span class="title function_">some</span>( <span class="keyword">function</span>(<span class="params"> item, index, array </span>){ </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="string">'item='</span> + item + <span class="string">',index='</span>+index+<span class="string">',array='</span>+array ); </span><br><span class="line"> <span class="keyword">return</span> item > <span class="number">3</span>; </span><br><span class="line">}));</span><br><span class="line"><span class="comment">// item=3,index=0,array=3,4,4,5,4,6,5,7</span></span><br><span class="line"><span class="comment">// item=4,index=1,array=3,4,4,5,4,6,5,7</span></span><br><span class="line"><span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( arr.<span class="title function_">every</span>( <span class="keyword">function</span>(<span class="params"> item, index, array </span>){ </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="string">'item='</span> + item + <span class="string">',index='</span>+index+<span class="string">',array='</span>+array ); </span><br><span class="line"> <span class="keyword">return</span> item > <span class="number">3</span>; </span><br><span class="line">}));</span><br><span class="line"><span class="comment">// item=3,index=0,array=3,4,4,5,4,6,5,7</span></span><br><span class="line"><span class="comment">//false</span></span><br></pre></td></tr></table></figure><h5 id="some"><a href="#some" class="headerlink" title="some"></a>some</h5><p>some方法是只要有一个数组成员的返回值为true，则返回true，否则false；</p><h5 id="every"><a href="#every" class="headerlink" title="every"></a>every</h5><p>every方法是需要每一个返回值为true，才能返回true，否则为false;</p><h4 id="reduce（）"><a href="#reduce（）" class="headerlink" title="reduce（）"></a>reduce（）</h4><p>依次处理数组的每个成员，最终累计成一个值。</p><p>格式：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">reduce（() => (pre, cur, curIndex, arr), initialValue）</span><br></pre></td></tr></table></figure><p>pre:必填，累计变量；cur：必填，当前变量；curIndex: 可选，当前位置； arr:可选，原数组; initialValue: 传递给函数的初始值。 </p><h4 id="indexOf（）"><a href="#indexOf（）" class="headerlink" title="indexOf（）"></a>indexOf（）</h4><p>返回给定元素在数组中的第一次出现的位置，如果没有则返回-1(同样适用于字符串)。</p><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"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">indexOf</span>(<span class="number">4</span>)) <span class="comment">// 1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">indexOf</span>(<span class="string">'4'</span>)) <span class="comment">// -1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//字符串</span></span><br><span class="line"><span class="keyword">const</span> string = <span class="string">'asdfghj'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(string.<span class="title function_">indexOf</span>(<span class="string">'a'</span>)) <span class="comment">// 0</span></span><br></pre></td></tr></table></figure><h4 id="lastIndexOf（）"><a href="#lastIndexOf（）" class="headerlink" title="lastIndexOf（）"></a>lastIndexOf（）</h4><p>返回给定元素在数组中最后一次出现的位置，没有返回-1(同样适用于字符串)。</p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">lastIndexOf</span>(<span class="number">4</span>)) </span><br><span class="line"><span class="comment">// 4(从左到右数最后出现的位置，字符串同理)</span></span><br></pre></td></tr></table></figure><h4 id="flatten（）"><a href="#flatten（）" class="headerlink" title="flatten（）"></a>flatten（）</h4><p>简写为flat（），接收一个数组，无论这个数组里嵌套了多少个数组，flatten最后都会把其变成一个一维数组(扁平化)。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const arr = [[1,2,3],[4,5,[6,7]]];</span><br><span class="line">const a = arr.flatten(3);</span><br><span class="line">console.log(a); // [1, 2, 3, 4, 5, 6, 7]</span><br></pre></td></tr></table></figure><h4 id="Array-isArray（）"><a href="#Array-isArray（）" class="headerlink" title="Array.isArray（）"></a>Array.isArray（）</h4><p>用来判断是不是数据是不是一个数组，返回值为true或false。</p><figure class="highlight plaintext"><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">const arr = [3,4,4,5,4,6,5,7];</span><br><span class="line">console.log(Array.isArray(arr)) // true</span><br></pre></td></tr></table></figure><h4 id="find（）"><a href="#find（）" class="headerlink" title="find（）"></a>find（）</h4><p>返回符合传入测试（函数）条件的数组元素。</p><figure class="highlight plaintext"><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">const arr = [3,4,4,5,4,6,5,7];</span><br><span class="line">const a = test.find(item => item > 3);</span><br><span class="line">console.log(a); //4(find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。)</span><br><span class="line"></span><br><span class="line">const b = test.find(item => item == 0);</span><br><span class="line">console.log(b); //undefined(如果没有符合条件的元素返回 undefined)</span><br></pre></td></tr></table></figure><hr><h3 id="String"><a href="#String" class="headerlink" title="String"></a>String</h3><h4 id="charAt（）"><a href="#charAt（）" class="headerlink" title="charAt（）"></a>charAt（）</h4><p>用于返回指定位置的字符。</p><figure class="highlight plaintext"><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">const str = 'hello guys';</span><br><span class="line">console.log(str.charAt(3)) // l</span><br></pre></td></tr></table></figure><h4 id="charCodeAt（）"><a href="#charCodeAt（）" class="headerlink" title="charCodeAt（）"></a>charCodeAt（）</h4><p>用于返回指定位置的字符的Unicode编码。</p><figure class="highlight plaintext"><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">const str = 'hello guys';</span><br><span class="line">console.log(str.charCodeAt(3)) // 111</span><br></pre></td></tr></table></figure><h4 id="match（）"><a href="#match（）" class="headerlink" title="match（）"></a>match（）</h4><p>用于在字符串内检索指定的值或找到一个或多个正则表达式的匹配，返回的是值而不是值的位置。</p><figure class="highlight plaintext"><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">const str = 'hello guys';</span><br><span class="line">console.log(str.match('guys')) // ["guys"]</span><br><span class="line"></span><br><span class="line">// 使用正则匹配字符串</span><br><span class="line">const strs = '1.hello guys, 2.are you ok?';</span><br><span class="line">console.log(strs.match(/\d+/g)) // ["1", "2"]</span><br></pre></td></tr></table></figure><h4 id="replace（）"><a href="#replace（）" class="headerlink" title="replace（）"></a>replace（）</h4><p>替换匹配的字符串。</p><figure class="highlight plaintext"><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">const str = 'hello guys';</span><br><span class="line">console.log(str.replace('guys', 'man')) // hello man</span><br></pre></td></tr></table></figure><p>抽出字符串中的某一项指定字符。</p><figure class="highlight plaintext"><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">const str = 'AA_BB_CC.bin';</span><br><span class="line">console.log(str.replace(/[^\_]/g),'') // __(两个下划线)</span><br></pre></td></tr></table></figure><h4 id="search（）"><a href="#search（）" class="headerlink" title="search（）"></a>search（）</h4><p>用于检索与字符串匹配的子串，返回的是地址,与<code>indexOf()</code>的区别是 <code>search</code> 是强制正则的，而 <code>indexOf </code>只是按字符串匹配的。</p><figure class="highlight plaintext"><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const str = 'hello guys';</span><br><span class="line">console.log(str.search('guys')) // 6</span><br><span class="line">console.log(str.indexOf('guys')) // 6</span><br><span class="line"></span><br><span class="line">// 区别</span><br><span class="line"></span><br><span class="line">const string = 'abcdefg.1234';</span><br><span class="line">console.log(string.search(/\./)) // 7（转译之后可以匹配到 . 的位置）</span><br><span class="line">console.log(string.indexOf(/\./)) // -1 （相当于匹配/\./，找不到则返回-1,只能匹配字符串）</span><br></pre></td></tr></table></figure><h4 id="split（）"><a href="#split（）" class="headerlink" title="split（）"></a>split（）</h4><p>将字符串切割成数组。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const str = 'hello guys';</span><br><span class="line">console.log(str.split('')) // ["h", "e", "l", "l", "o", " ", "g", "u", "y", "s"] </span><br><span class="line">console.log(str.split('', 3)) // ["h", "e", "l"]</span><br></pre></td></tr></table></figure><h4 id="toLocaleLowerCase（）-toLowerCase（）"><a href="#toLocaleLowerCase（）-toLowerCase（）" class="headerlink" title="toLocaleLowerCase（）& toLowerCase（）"></a>toLocaleLowerCase（）& toLowerCase（）</h4><p>将字符串转换成小写。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const str = 'hello guys';</span><br><span class="line">console.log(str.toLocaleLowerCase()) // hello guys</span><br><span class="line">console.log(str.toLowerCase()) // hello guys</span><br></pre></td></tr></table></figure><h4 id="toLocaleUpperCase（）-toUpperCase（）"><a href="#toLocaleUpperCase（）-toUpperCase（）" class="headerlink" title="toLocaleUpperCase（） & toUpperCase（）"></a>toLocaleUpperCase（） & toUpperCase（）</h4><p>将字符串转换成大写。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const str = 'hello guys';</span><br><span class="line">console.log(str.toLocaleUpperCase()) // HELLO GUYS</span><br><span class="line">console.log(str.toUpperCase()) // HELLO GUYS</span><br></pre></td></tr></table></figure><h4 id="substr（）"><a href="#substr（）" class="headerlink" title="substr（）"></a>substr（）</h4><p>用于从起始索引号提取字符串中指定数目的字符。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const str = 'hello guys';</span><br><span class="line">console.log(str.substr(2)) // llo guys</span><br><span class="line">console.log(str.substr(2, 7)) // llo guy</span><br></pre></td></tr></table></figure><h4 id="substring（）"><a href="#substring（）" class="headerlink" title="substring（）"></a>substring（）</h4><p>用于提取字符串中两个指定索引号之间的字符。(与 <code>slice()</code> 和 <code>substr()</code> 方法不同的是，<code>substring()</code> 不接受负的参数。)</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const str = 'hello guys';</span><br><span class="line">console.log(str.substring(2)) // llo guys</span><br><span class="line">console.log(str.substring(2, 7)) // llo g</span><br></pre></td></tr></table></figure><h4 id="trim（）"><a href="#trim（）" class="headerlink" title=".trim（）"></a>.trim（）</h4><p>去掉字符串两端的空格。</p><figure class="highlight plaintext"><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">const str = ' hello guys ';</span><br><span class="line">console.log(str.trim()) // hello guys(不会改变原数组)</span><br></pre></td></tr></table></figure><h3 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h3><h4 id="JSON-parse（）"><a href="#JSON-parse（）" class="headerlink" title="JSON.parse（）"></a>JSON.parse（）</h4><p>用于把字符串转化为对象。</p><figure class="highlight javascript"><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"><span class="keyword">const</span> str = <span class="string">'{"name": "phoebe", "age": 20}'</span>;</span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(str) <span class="comment">// {name: "phoebe", age: 20}（object类型）</span></span><br></pre></td></tr></table></figure><h4 id="JSON-stringify（）"><a href="#JSON-stringify（）" class="headerlink" title="JSON.stringify（）"></a>JSON.stringify（）</h4><p>用于把对象转化为字符串。</p><figure class="highlight javascript"><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"><span class="keyword">const</span> obj = {<span class="string">"name"</span>: <span class="string">"Tins"</span>, <span class="string">"age"</span>: <span class="number">22</span>};</span><br><span class="line"><span class="keyword">const</span> str = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj) <span class="comment">// {"name":"Tins","age":22}(string类型)</span></span><br></pre></td></tr></table></figure><hr><h3 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h3><h4 id="Object-Prototype-valueOf（）"><a href="#Object-Prototype-valueOf（）" class="headerlink" title="Object.Prototype.valueOf（）"></a>Object.Prototype.valueOf（）</h4><p>返回当前对象对应的值。（<code>Object.valueOf（）</code>相当于<code>Object.Prototype.ValueOf（）</code>）</p><p>我们创建一个取代<code>valueOf()</code>方法的函数，但是需要注意的是方法必须不能传入参数 。 假设我们有个对象叫<code>ObjectrType</code>而我想为它创建一个<code>valueOf()</code>方法。下面的代码为<code>valueOf()</code>方法赋予了一个自定义函数:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">ObjectrType</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">valueOf</span> = <span class="keyword">function</span>(<span class="params"></span>) { <span class="keyword">return</span> customValue; };</span><br></pre></td></tr></table></figure><p>有了这样的一个方法，下一次每当<code>ObjectrType</code>要被转换为原始类型值时，<code>JavaScript</code>在此之前会自动调用自定义的<code>valueOf()</code>方法。 <code>valueOf()</code>方法一般都会被<code>JavaScript</code>自动调用，但我们也可以像下面代码那样自己调用：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">ObjectrType</span>.<span class="title function_">valueOf</span>()</span><br></pre></td></tr></table></figure><p><code>valueOf</code>同样适用于<code>string</code>，<code>number</code>， <code>symbol</code>，<code>boolean</code>，<code>date</code>。</p><h4 id="Object-Prototype-toString（）"><a href="#Object-Prototype-toString（）" class="headerlink" title="Object.Prototype.toString（）"></a>Object.Prototype.toString（）</h4><p>返回当前对象对应的字符串形式。</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Dog</span>(<span class="params">name</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> dog1 = <span class="keyword">new</span> <span class="title class_">Dog</span>(<span class="string">'Gabby'</span>);</span><br><span class="line"></span><br><span class="line"><span class="title class_">Dog</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span> = <span class="keyword">function</span> <span class="title function_">dogToString</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">''</span> + <span class="variable language_">this</span>.<span class="property">name</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(dog1.<span class="title function_">toString</span>()); <span class="comment">// Gabby</span></span><br></pre></td></tr></table></figure><h4 id="Object-Prototype-toLocaleString（）"><a href="#Object-Prototype-toLocaleString（）" class="headerlink" title="Object.Prototype.toLocaleString（）"></a>Object.Prototype.toLocaleString（）</h4><p>返回当前对象对应的模块字符串。</p><p>语法：<code>obj.toLocaleString();</code></p><figure class="highlight javascript"><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"><span class="keyword">let</span> foo = {};</span><br><span class="line">foo.<span class="title function_">toLocaleString</span>(); <span class="comment">// "[object Object]"</span></span><br></pre></td></tr></table></figure><h4 id="Object-Prototype-isPrototypeOf（）"><a href="#Object-Prototype-isPrototypeOf（）" class="headerlink" title="Object.Prototype.isPrototypeOf（）"></a>Object.Prototype.isPrototypeOf（）</h4><p>判断当前对象是否为另一个对象的原型。 语法：<code>Object.prototype.isPrototypeOf(targetObj)</code></p><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="keyword">const</span> arr = [];</span><br><span class="line"></span><br><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">isPrototypeOf</span>(arr); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 修改obj的原型</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>(arr, <span class="title class_">String</span>.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">isPrototypeOf</span>(arr); <span class="comment">// false</span></span><br><span class="line"><span class="title class_">String</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">isPrototypeOf</span>(arr); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h4 id="Object-Prototype-hasOwnProperty（）"><a href="#Object-Prototype-hasOwnProperty（）" class="headerlink" title="Object.Prototype.hasOwnProperty（）"></a>Object.Prototype.hasOwnProperty（）</h4><p>判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性,并返回一个布尔值。</p><p>语法： <code>Object.prototype.hasOwnProperty(prop)</code></p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {};<span class="comment">// 定义一个object实例</span></span><br><span class="line"></span><br><span class="line">obj.<span class="property">prop1</span> = <span class="string">'value1'</span>; <span class="comment">// prop1是一个自有属性</span></span><br><span class="line">obj.<span class="property">constructor</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">prop2</span> = <span class="string">'value2'</span>; <span class="comment">// prop2是一个原型链属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 无论自有属性还是原型链属性，我们都可以访问到</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">info</span>(obj.<span class="property">prop1</span>); <span class="comment">// value1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">info</span>(obj.<span class="property">prop2</span>); <span class="comment">// value2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用`hasOwnProperty()`方法判断属性是否为自有属性</span></span><br><span class="line">obj.<span class="title function_">hasOwnProperty</span>(<span class="string">'prop1'</span>); <span class="comment">// true</span></span><br><span class="line">obj.<span class="title function_">hasOwnProperty</span>(<span class="string">'prop2'</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure><h4 id="Object-Prototype-PropertyIsEnumerable（）"><a href="#Object-Prototype-PropertyIsEnumerable（）" class="headerlink" title="Object.Prototype.PropertyIsEnumerable（）"></a>Object.Prototype.PropertyIsEnumerable（）</h4><p>判断某个属性是否可枚举。</p><p>语法： <code>Object.prototype.propertyIsEnumerable(prop)</code></p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = { <span class="attr">name</span>: <span class="string">'ecmaer'</span>};</span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">getOwnPropertyDescriptor</span>(obj, <span class="string">'name'</span>).<span class="property">enumerable</span>; <span class="comment">// true</span></span><br><span class="line">obj.<span class="title function_">propertyIsEnumerable</span>(<span class="string">'name'</span>); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 将属性name设置成不可枚举</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj, <span class="string">'name'</span>, {<span class="attr">enumerable</span>: <span class="literal">false</span>});</span><br><span class="line">obj.<span class="title function_">propertyIsEnumerable</span>(<span class="string">'name'</span>); <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">in</span> obj){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">info</span>(obj[i]); <span class="comment">// 没有遍历出'ecmaer'</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="判断一个值的类型的办法"><a href="#判断一个值的类型的办法" class="headerlink" title="判断一个值的类型的办法"></a>判断一个值的类型的办法</h3><h4 id="typeOf（）"><a href="#typeOf（）" class="headerlink" title="typeOf（）"></a>typeOf（）</h4><p><code>typeof</code>可用来检测数据类型: 需要注意的是<code>typeof</code>无法区分<code>null</code>、<code>Array</code>和 通常意义上的<code>object</code>。</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="number">123</span> <span class="comment">//number</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="string">'123'</span> <span class="comment">//string</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">true</span> <span class="comment">// boolean</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">false</span> <span class="comment">//boolean</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">undefined</span> <span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Math</span>.<span class="property">abs</span> <span class="comment">// function</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">function</span> (<span class="params"></span>) {} <span class="comment">// function</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当遇上`null`、`Array`和通常意义上的`object`,都会返回 object</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span> <span class="comment">// object</span></span><br><span class="line"><span class="keyword">typeof</span> [] <span class="comment">// object（所以判断数组时可以使用Array.isArray(arr)）</span></span><br><span class="line"><span class="keyword">typeof</span> {} <span class="comment">// object</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当数据使用了new关键字和包装对象以后，数据都会变成Object类型，不加new关键字时会被当作普通的函数处理。</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="number">123</span>); <span class="comment">//'object'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Number</span>(<span class="number">123</span>); <span class="comment">// 'number'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">Boolean</span>(<span class="literal">true</span>); <span class="comment">//'object'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Boolean</span>(<span class="literal">true</span>); <span class="comment">// 'boolean'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">String</span>(<span class="number">123</span>); <span class="comment">// 'object'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">String</span>(<span class="number">123</span>); <span class="comment">// 'string'</span></span><br></pre></td></tr></table></figure><h4 id="instanceOf（）"><a href="#instanceOf（）" class="headerlink" title="instanceOf（）"></a>instanceOf（）</h4><p><code>instanceOf（）</code>运算符用于检测构造函数的 <code>prototype</code> 属性是否出现在某个实例对象的原型链</p><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><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Car</span>(<span class="params">make, model, year</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">make</span> = make;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">model</span> = model;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">year</span> = year;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> auto = <span class="keyword">new</span> <span class="title class_">Car</span>(<span class="string">'Honda'</span>, <span class="string">'Accord'</span>, <span class="number">1998</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(auto <span class="keyword">instanceof</span> <span class="title class_">Car</span>); <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(auto <span class="keyword">instanceof</span> <span class="title class_">Object</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h4 id="Object-Prototype-toString（）（推荐）"><a href="#Object-Prototype-toString（）（推荐）" class="headerlink" title="Object.Prototype.toString（）（推荐）"></a>Object.Prototype.toString（）（推荐）</h4><p>可以精准的判断对象类型。</p><p>对于<code>array</code>、<code>null</code>、<code>object</code>来说，其关系错综复杂，使用 <code>typeof</code>都会统一返回 <code>object</code> 字符串,要想区别对象、数组、函数单纯使用<code>typeof</code>是不行的,想要准确的判断对象类型，推荐使用<code>Object.Prototype.toString（）</code>,它可以判断某个对象值属于哪种内置类型。</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">const arrs = [1,2,3];</span><br><span class="line">console.log(typeof arrs) // object</span><br><span class="line">console.log(Object.Prototype.toString.call(arrs)) // [object Array]</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure><hr><h4 id="call，apply以及bind的用法，区别及相似住处"><a href="#call，apply以及bind的用法，区别及相似住处" class="headerlink" title="call，apply以及bind的用法，区别及相似住处"></a>call，apply以及bind的用法，区别及相似住处</h4><h5 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h5><ul><li><p>call</p><p>直接调用该执行函数，在执行的时候，将函数内部的作用域绑定到指定的作用域。（<code>call()</code>方法接受若干个参数的列表）</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">const arr = [2,5,4,7,6]</span><br><span class="line">const a = Function.prototype.apply.call(Math.max, null,arr)</span><br><span class="line">console.log(a) // 7</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure></li><li><p>apply</p><p>直接调用该执行函数，在执行的时候，将函数内部的作用域绑定到指定的作用域。</p><p><code>call()</code>是<code>apply()</code>的一颗语法糖，作用和<code>apply()</code>一样，同样可实现继承，唯一的区别就在于<code>call()</code>接收的是参数列表，而<code>apply()</code>则接收参数数组。</p><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">2</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">7</span>,<span class="number">6</span>]</span><br><span class="line"><span class="keyword">const</span> a = <span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">call</span>.<span class="title function_">apply</span>(<span class="title class_">Math</span>.<span class="property">max</span>, arr)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a) <span class="comment">// 7</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//如果apply的第二个参数是个null，会返回-Infinity</span></span><br><span class="line"><span class="keyword">const</span> b = <span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">call</span>.<span class="title function_">apply</span>(<span class="title class_">Math</span>.<span class="property">max</span>, <span class="literal">null</span>, arr)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b) <span class="comment">// -Infinity</span></span><br></pre></td></tr></table></figure></li><li><p>bind</p><p>创建一个新的函数的引用，并绑定到一个作用域特定作用域上，同时支持传参。</p><p><code>bind</code>则和<code>call</code>的用法差不多，唯一区别是，<code>call</code>和<code>apply</code>会立刻调用函数，<code>bind</code>只是绑定<code>this</code></p><p>格式为： <code>bind</code>(作用域参数，参数1，参数2)</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fruits = {</span><br><span class="line"> <span class="string">"name"</span>: <span class="string">"apple"</span>,</span><br><span class="line"> <span class="attr">getOtherFriut</span>: <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> color = {</span><br><span class="line"> <span class="string">"name"</span>: <span class="string">" is red"</span> </span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> fruitColor = fruits.<span class="property">getOtherFriut</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>, color)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">fruitColor</span>()) <span class="comment">//is red</span></span><br></pre></td></tr></table></figure></li></ul><h5 id="相似之处"><a href="#相似之处" class="headerlink" title="相似之处"></a>相似之处</h5><ul><li>都是用来改变函数的<code>this</code>对象；</li><li>第一个参数都是<code>this</code>要指向的对象；</li><li>都可利用后继参数传参；</li></ul><h5 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h5><ul><li>都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 <code>thisObj</code> 指定的新对象。</li><li><code>bind()</code>是返回一个新函数，供以后调用，而<code>apply()</code>和<code>call()</code>是立即调用。</li><li><code>call()</code>和<code>apply()</code>唯一区别是参数不一样，<code>call()</code>是<code>apply()</code>的语法糖；</li></ul><h5 id="选择使用"><a href="#选择使用" class="headerlink" title="选择使用"></a>选择使用</h5><ul><li>如果不需要关心具体有多少参数被传入函数，选用<code>apply()</code>；</li><li>如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用<code>call()</code>；</li><li>如果想要将来再调用方法，不需立即得到函数返回结果，则使用<code>bind()</code>;</li></ul><hr><h3 id="Date对象的用法"><a href="#Date对象的用法" class="headerlink" title="Date对象的用法"></a>Date对象的用法</h3><p>首先需要定义一个变量：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> date = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br></pre></td></tr></table></figure><p>接下来就可以直接使用常见的Date对象方法。</p><ul><li>Date(): 返回当日的日期和时间；</li><li>getDate(): 从Date对象返回一个月中的某一天（1～31）<code>console.log(date.getDate())</code>；</li><li>getDay():从Date对象返回一周中的某一天（0～6）；</li><li>getMonth(): 从Date对象返回月份（0～11）；</li><li>getFullYear(): 从Date对象以四位数字返回年份；</li><li>getYear()：可以使用getFullYear()代替；</li><li>getHours(): 返回Date()对象的小时（0～23）;</li><li>getMinutes(): 返回Date()对象的分钟（0～59）;</li><li>getSeconds(): 返回Date()对象的分钟（0～59）;</li><li>getMillseconds(): 返回Date()对象的毫秒（0～999）;</li><li>getTime(): 返回1970年1月1日至今的时间；</li><li>getTimezoneOffset(): 返回本地时间与格林威治标准时间（GMT）的分钟差；</li><li>getUTCDate(): 根据世界时从Date对象返回月中的一天（1～31）；</li><li>getUTCDay(): 根据世界时从Date对象返回周中的一天（1～6）；</li><li>getUTCMonth(): 根据世界时从Date对象返回月份（0～11）；</li><li>getUTCFullYear(): 根据世界时从Date对象返回四位数的年份；</li><li>getUTCHours(): 根据世界时从Date对象返回对象的小时（0～23）；</li><li>getUTCMinutes(): 根据世界时从Date对象返回对象的分钟（0～59）；</li><li>getUTCSeconds(): 根据世界时从Date对象返回对象的秒钟（0～59）；</li><li>getUTCMillseconds(): 根据世界时从Date对象返回对象的毫秒（0～999）；</li><li>parse(): 返回1970年1月1日午夜到指定日期（字符串）的毫秒数；</li><li>setDate(): 设置Date对象中月的某一天（1～31）；</li><li>setMonth(): 设置Date对象中月份（0～11）；</li><li>setFullYear(): 设置Date对象中的年份（四位数字）；</li></ul><hr><h3 id="Math-xx开头的方法"><a href="#Math-xx开头的方法" class="headerlink" title="Math.xx开头的方法"></a>Math.xx开头的方法</h3><ul><li>Math.ceil(): 对数进行上舍入（天花板函数）</li></ul><p>大于等于 x，并且与它最接近的整数。</p><ul><li>Math.floor(): 对数进行下舍入（地板函数）。</li><li>Math.max(x,y):返回x,y中的最大值。</li><li>Math.min(x,y):返回x,y中的最小值。</li><li>Math.pow(x,y): 返回x的y次方。</li><li>Math.random() : 返回0-1之间的随机数。</li><li>Math.round(x): 四舍五入。</li><li>Math.abs(x):返回数的绝对值。</li><li>Math.acos(x):返回数的反余弦值。</li><li>Math.asin(x): 返回数的反正弦值。</li><li>Math.atan(x):返回数的反正切值。</li><li>Math.atan2(y,x):返回由x轴到点（x，y）的角度（以弧度为单位）。</li><li>Math.cos(x): 返回数的余弦值。</li><li>Math.exp(e): 返回e的指数。</li><li>Math.log(x):返回数的自然对数（以e为底数）。</li><li>Math.sin(x):返回数的正弦值。</li><li>Math.sqrt(x):返回数的平方根。</li><li>Math.tan(x): 返回角的正切值。</li><li>Math.toSource():返回该对象的源代码。</li><li>Math.valueOf(): 返回Math对象的原始值。</li></ul>]]></content>
<categories>
<category> js </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title>vue3.x中的生命周期</title>
<link href="/article/d5cc2619.html"/>
<url>/article/d5cc2619.html</url>
<content type="html"><![CDATA[<h2 id="vue3和vue2生命周期的对比"><a href="#vue3和vue2生命周期的对比" class="headerlink" title="vue3和vue2生命周期的对比"></a>vue3和vue2生命周期的对比</h2><p>Vue3 的生命周期比较多。</p><ol><li>setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method</li><li>onBeforeMount() : 组件挂载到节点上之前执行的函数。</li><li>onMounted() : 组件挂载完成后执行的函数。</li><li>onBeforeUpdate(): 组件更新之前执行的函数。</li><li>onUpdated(): 组件更新完成之后执行的函数。</li><li>onBeforeUnmount(): 组件卸载之前执行的函数。</li><li>onUnmounted(): 组件卸载完成后执行的函数。</li><li>onActivated(): 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。</li><li>onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。</li><li>onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。</li></ol><p>注：使用<span style="color:red"><keep-alive></span> 组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用<keep-alive>组件解决。<br> vue3使用生命周期需要单独从vue中引用,并且只能在setup函数内调用</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue2</span>--------------vue3</span><br><span class="line">beforeCreate -> <span class="title function_">setup</span>()</span><br><span class="line">created -> <span class="title function_">setup</span>()</span><br><span class="line">beforeMount -> onBeforeMount</span><br><span class="line">mounted -> onMounted</span><br><span class="line">beforeUpdate -> onBeforeUpdate</span><br><span class="line">updated -> onUpdated</span><br><span class="line">beforeDestroy -> onBeforeUnmount</span><br><span class="line">destroyed -> onUnmounted</span><br><span class="line">activated -> onActivated</span><br><span class="line">deactivated -> onDeactivated</span><br><span class="line">errorCaptured -> onErrorCaptured</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> vue </category>
<category> vue3 </category>
</categories>
<tags>
<tag> vue </tag>
<tag> vue3 </tag>
<tag> vue3生命周期 </tag>
</tags>
</entry>
<entry>
<title>如何根据key合并数组中的对象</title>
<link href="/article/c8c26781.html"/>
<url>/article/c8c26781.html</url>
<content type="html"><![CDATA[<h2 id="如何根据key合并数组中的对象-已同步到npm-lm-public-js-中"><a href="#如何根据key合并数组中的对象-已同步到npm-lm-public-js-中" class="headerlink" title="如何根据key合并数组中的对象(已同步到npm lm-public-js 中)"></a>如何根据key合并数组中的对象(已同步到npm lm-public-js 中)</h2><span id="more"></span><p>项目中经常会遇到,array内包含object这个格式的json 需要我们根据一个key去合并其中的对象,一般是 id<br>效率最低的方法是 循环套循环,找到一致id的,然后添加到其中一个array内<br>比较好的方法 是把这个id对应的object 暂存一个obj内,比如 obj[item.id] = {…item,…item2}<br>最后根据 Object.values() 方法 重新转化为数组</p><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">mergeArrAndObj</span>(<span class="params">data1 = [],data2 = [],key</span>){</span><br><span class="line"> <span class="keyword">if</span>(!(data1 <span class="keyword">instanceof</span> <span class="title class_">Array</span> || data1 <span class="keyword">instanceof</span> <span class="title class_">Object</span>)) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'第一个参数格式不对'</span>)</span><br><span class="line"> <span class="keyword">if</span>(!(data2 <span class="keyword">instanceof</span> <span class="title class_">Array</span> || data2 <span class="keyword">instanceof</span> <span class="title class_">Object</span>)) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'第二个参数格式不对'</span>)</span><br><span class="line"> <span class="keyword">if</span>(!((data1 <span class="keyword">instanceof</span> <span class="title class_">Array</span> && data2 <span class="keyword">instanceof</span> <span class="title class_">Array</span>) || (data1 <span class="keyword">instanceof</span> <span class="title class_">Object</span> && data2 <span class="keyword">instanceof</span> <span class="title class_">Object</span>))) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'数据类型不一致'</span>)</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//都为数组的情况</span></span><br><span class="line"> <span class="keyword">if</span>( data1 <span class="keyword">instanceof</span> <span class="title class_">Array</span>){</span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> key !== <span class="string">'string'</span>) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'第三个参数 key 应为字符串'</span>)</span><br><span class="line"> <span class="keyword">if</span>(!key.<span class="property">length</span>) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'第三个参数 key 长度不应为空'</span>)</span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> key === <span class="string">'undefined'</span>) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'请传入第三个参数 key'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="comment">//找出最长的数组</span></span><br><span class="line"> <span class="keyword">let</span> maxArr = data1.<span class="property">length</span> > data2.<span class="property">length</span> ? <span class="attr">data1</span>:data2</span><br><span class="line"> <span class="comment">//找出最长的数组</span></span><br><span class="line"> <span class="keyword">let</span> minArr = data1.<span class="property">length</span> < data2.<span class="property">length</span> ? <span class="attr">data1</span>:data2</span><br><span class="line"> <span class="comment">//临时存放数据的数组</span></span><br><span class="line"> <span class="keyword">let</span> sumArr = []</span><br><span class="line"> <span class="comment">//临时存放数据的对象 </span></span><br><span class="line"> <span class="keyword">let</span> obj = {}</span><br><span class="line"></span><br><span class="line"> maxArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item,index</span>)=></span>{</span><br><span class="line"> <span class="comment">//此时短的那一个数组已经循环完了</span></span><br><span class="line"> <span class="keyword">if</span>(minArr[index] === <span class="literal">undefined</span>){</span><br><span class="line"> <span class="comment">//只需要处理较长的那个数组</span></span><br><span class="line"> <span class="keyword">return</span> obj[item[key]] = {...maxArr[index]}</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">//这里是短的那一个数组还没循环完的情况</span></span><br><span class="line"> obj[item[key]] = {...maxArr[index],...minArr[index]}</span><br><span class="line"> })</span><br><span class="line"> sumArr = <span class="title class_">Object</span>.<span class="title function_">values</span>(obj)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> sumArr</span><br><span class="line"> </span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//都为对象</span></span><br><span class="line"> <span class="comment">//此处为浅合并 key一致会被替换</span></span><br><span class="line"> <span class="keyword">return</span> {...data1,...data2}</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><p>简单测试一下</p><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></pre></td><td class="code"><pre><span class="line"><span class="title function_">mergeArrAndObj</span>([{<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">c</span>:<span class="number">2</span>}],[{<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">a</span>:<span class="number">2</span>},{<span class="attr">id</span>:<span class="number">3</span>,<span class="attr">a</span>:<span class="number">3</span>}],<span class="string">'id'</span>)</span><br><span class="line"></span><br><span class="line">[</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">c</span>:<span class="number">2</span>,<span class="attr">a</span>:<span class="number">2</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">3</span>,<span class="attr">a</span>:<span class="number">3</span>}</span><br><span class="line">]</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> js </category>
<category> 算法 </category>
</categories>
<tags>
<tag> js </tag>
<tag> 算法 </tag>
</tags>
</entry>
<entry>
<title>使用require.context实现前端工程自动化</title>
<link href="/article/ada757d6.html"/>
<url>/article/ada757d6.html</url>
<content type="html"><![CDATA[<h1 id="使用require-context实现前端工程自动化"><a href="#使用require-context实现前端工程自动化" class="headerlink" title="使用require.context实现前端工程自动化"></a>使用require.context实现前端工程自动化</h1><h2 id="require-context是什么"><a href="#require-context是什么" class="headerlink" title="require.context是什么"></a>require.context是什么</h2><p>一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块</p><span id="more"></span><h2 id="什么时候需要用到require-context"><a href="#什么时候需要用到require-context" class="headerlink" title="什么时候需要用到require.context"></a>什么时候需要用到require.context</h2><p>在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,随着项目越来越大,结构越来越复杂,每次都得手动import就很是令人烦躁<br>这个时候我们可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中</p><h2 id="require-context参数说明"><a href="#require-context参数说明" class="headerlink" title="require.context参数说明"></a>require.context参数说明</h2><p>require.context函数接受三个参数</p><ol><li>directory {String} -读取文件的路径</li><li>useSubdirectories {Boolean} -是否遍历文件的子目录</li><li>regExp {RegExp} -匹配文件的正则</li></ol><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//例如</span></span><br><span class="line"><span class="built_in">require</span>.<span class="title function_">context</span>(<span class="string">'./modules'</span>, <span class="literal">false</span>, <span class="regexp">/.test.js$/</span>)</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">上面的代码遍历当前目录下的modules文件夹的所有.js结尾的文件,不遍历子目录</span></span><br><span class="line"><span class="comment">就像这样</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">router <span class="comment">// 路由文件夹</span></span><br><span class="line"> |__index.<span class="property">js</span> <span class="comment">// 总入口,这里做一些自动化处理</span></span><br><span class="line"> |__common.<span class="property">js</span> <span class="comment">// 通用路由：声明通用路由</span></span><br><span class="line"> |__modules <span class="comment">// 业务逻辑模块：所以的业务逻辑模块</span></span><br><span class="line"> |__b.<span class="property">js</span> <span class="comment">// 业务模块b</span></span><br><span class="line"> |__home.<span class="property">js</span> <span class="comment">// 业务模块home：业务模块</span></span><br><span class="line"> |__a.<span class="property">js</span> <span class="comment">// 业务模块a</span></span><br><span class="line"> </span><br><span class="line"></span><br></pre></td></tr></table></figure><p> 在index.js中调用 **require.context(‘./modules’, false, /.js$/);**会得到modules文件下3个文件的执行环境 </p><p> 值得注意的是require.context函数执行后返回的是<strong>一个函数,并且这个函数有3个属性</strong> </p><ol><li>resolve {Function} -接受一个参数request,request为<strong>modules</strong>文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径 </li><li>keys {Function} -返回匹配成功模块的名字组成的数组</li><li>id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?</li></ol><p> 这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性) </p><h2 id="废话不多说-直接上代码-看看怎么用"><a href="#废话不多说-直接上代码-看看怎么用" class="headerlink" title="废话不多说 直接上代码,看看怎么用"></a>废话不多说 直接上代码,看看怎么用</h2><h3 id="index-js自动化文件中这么写"><a href="#index-js自动化文件中这么写" class="headerlink" title="index.js自动化文件中这么写"></a>index.js自动化文件中这么写</h3><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> files = <span class="built_in">require</span>.<span class="title function_">context</span>(<span class="string">'./modules'</span>, <span class="literal">false</span>, <span class="regexp">/\.js$/</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(files.<span class="title function_">keys</span>()) <span class="comment">// ["./home.js"] 返回一个数组</span></span><br><span class="line"><span class="keyword">let</span> configRouters = []</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* inject routers</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">files.<span class="title function_">keys</span>().<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =></span> {</span><br><span class="line"> configRouters = configRouters.<span class="title function_">concat</span>(<span class="title function_">files</span>(key).<span class="property">default</span>) <span class="comment">// 读取出文件中的default模块</span></span><br><span class="line">})</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> configRouters <span class="comment">// 抛出一个Vue-router期待的结构的数组</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="业务模块中这样写"><a href="#业务模块中这样写" class="headerlink" title="业务模块中这样写"></a>业务模块中这样写</h3><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Frame</span> <span class="keyword">from</span> <span class="string">'@/views/frame/Frame'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">'@/views/index/index'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> [</span><br><span class="line"> <span class="comment">// 首页</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">'/index'</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'首页'</span>,</span><br><span class="line"> <span class="attr">redirect</span>: <span class="string">'/index'</span>,</span><br><span class="line"> <span class="attr">component</span>: <span class="title class_">Frame</span>, </span><br><span class="line"> <span class="attr">children</span>: [ <span class="comment">// 嵌套路由</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">''</span>,</span><br><span class="line"> <span class="attr">component</span>: <span class="title class_">Home</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">]</span><br><span class="line"></span><br></pre></td></tr></table></figure><p><strong>大功告成</strong>!!!!</p>]]></content>
<categories>
<category> webpack </category>
</categories>
<tags>
<tag> webpack </tag>
</tags>
</entry>
<entry>
<title>js常用方法封装</title>
<link href="/article/6cb2e742.html"/>
<url>/article/6cb2e742.html</url>
<content type="html"><![CDATA[<h1 id="NPM地址-使用方法相同"><a href="#NPM地址-使用方法相同" class="headerlink" title="NPM地址 使用方法相同"></a><a href="https://www.npmjs.com/package/lm-public-js">NPM地址</a> 使用方法相同</h1><h2 id="url参数提取"><a href="#url参数提取" class="headerlink" title="url参数提取"></a>url参数提取</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//提取url中的参数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">query</span>(<span class="params">url</span>) {</span><br><span class="line"><span class="keyword">if</span>(!(url <span class="keyword">instanceof</span> <span class="title class_">String</span> )) <span class="keyword">return</span> {}</span><br><span class="line">url = url.<span class="title function_">split</span>(<span class="string">'?'</span>)[<span class="number">1</span>] <span class="comment">//提取url问号?之后的字符串</span></span><br><span class="line"><span class="keyword">if</span>(!url){</span><br><span class="line"><span class="keyword">return</span> {}</span><br><span class="line">}</span><br><span class="line">url = url.<span class="title function_">split</span>(<span class="string">'&'</span>) <span class="comment">//分离&之间的字符串参数</span></span><br><span class="line"><span class="keyword">if</span>(!url){</span><br><span class="line"><span class="keyword">return</span> {}</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> params = {}</span><br><span class="line">url.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =></span> {</span><br><span class="line">item = item.<span class="title function_">toString</span>().<span class="title function_">split</span>(<span class="string">'='</span>)</span><br><span class="line"><span class="keyword">let</span> key = item[<span class="number">0</span>]</span><br><span class="line"><span class="keyword">let</span> value = item[<span class="number">1</span>]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">params[key]= value</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">})</span><br><span class="line"><span class="keyword">return</span> params</span><br><span class="line">}</span><br><span class="line"><span class="comment">//返回值为{key:value}</span></span><br></pre></td></tr></table></figure><h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">cloneLoop</span>(<span class="params">x</span>) {</span><br><span class="line"> <span class="comment">//如果不是对象或者数组 直接返回</span></span><br><span class="line"> <span class="keyword">if</span>(!(x <span class="keyword">instanceof</span> <span class="title class_">Object</span>) || !(x <span class="keyword">instanceof</span> <span class="title class_">Array</span>) ) <span class="keyword">return</span> x</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 栈</span></span><br><span class="line"> <span class="keyword">const</span> loopList = [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">parent</span>: root,</span><br><span class="line"> <span class="attr">key</span>: <span class="literal">undefined</span>,</span><br><span class="line"> <span class="attr">data</span>: x,</span><br><span class="line"> }</span><br><span class="line"> ];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span>(loopList.<span class="property">length</span>) {</span><br><span class="line"> <span class="comment">// 深度优先</span></span><br><span class="line"> <span class="keyword">const</span> node = loopList.<span class="title function_">pop</span>();</span><br><span class="line"> <span class="keyword">const</span> parent = node.<span class="property">parent</span>;</span><br><span class="line"> <span class="keyword">const</span> key = node.<span class="property">key</span>;</span><br><span class="line"> <span class="keyword">const</span> data = node.<span class="property">data</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素</span></span><br><span class="line"> <span class="keyword">let</span> res = parent;</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> key !== <span class="string">'undefined'</span>) {</span><br><span class="line"> res = parent[key] = {};</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> k <span class="keyword">in</span> data) {</span><br><span class="line"> <span class="keyword">if</span> (data.<span class="title function_">hasOwnProperty</span>(k)) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> data[k] === <span class="string">'object'</span>) {</span><br><span class="line"> <span class="comment">// 下一次循环</span></span><br><span class="line"> loopList.<span class="title function_">push</span>({</span><br><span class="line"> <span class="attr">parent</span>: res,</span><br><span class="line"> <span class="attr">key</span>: k,</span><br><span class="line"> <span class="attr">data</span>: data[k],</span><br><span class="line"> });</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> res[k] = data[k];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> root;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="时间格式处理"><a href="#时间格式处理" class="headerlink" title="时间格式处理"></a>时间格式处理</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//主要用于处理相隔多少天的日期查询</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">dateFormat</span> (subtract, isStart) { <span class="comment">//时间差(天) // 是开始时间还是结束时间</span></span><br><span class="line"> <span class="keyword">let</span> nowDate = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>() <span class="comment">//今天的时间 1970 年 1 月 1 日至今的毫秒数</span></span><br><span class="line"> <span class="keyword">let</span> subDate = subtract * <span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span> * <span class="number">1000</span> <span class="comment">//计算减去所设置的时间</span></span><br><span class="line"> <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="title class_">Date</span>(nowDate - subDate) <span class="comment">//减去之后的时间</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> year = newDate.<span class="title function_">getFullYear</span>() <span class="comment">//年</span></span><br><span class="line"> <span class="keyword">let</span> month = newDate.<span class="title function_">getMonth</span>() + <span class="number">1</span> <span class="comment">//月 之所以+1 是因为月份是0-11</span></span><br><span class="line"> <span class="keyword">if</span> (month < <span class="number">10</span>) {</span><br><span class="line"> month = <span class="string">'0'</span> + month</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> day = newDate.<span class="title function_">getDate</span>() <span class="comment">//日 </span></span><br><span class="line"> <span class="keyword">if</span> (day < <span class="number">10</span>) {</span><br><span class="line"> day = <span class="string">'0'</span> + day</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> <span class="variable constant_">HMS</span> <span class="comment">//小时分钟秒</span></span><br><span class="line"> <span class="keyword">if</span> (isStart) { <span class="comment">//开始时间</span></span><br><span class="line"> <span class="variable constant_">HMS</span> = <span class="string">' 00:00:00'</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="variable constant_">HMS</span> = <span class="string">' 23:59:59'</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> date = year + <span class="string">'-'</span> + month + <span class="string">'-'</span> + day + <span class="variable constant_">HMS</span></span><br><span class="line"> <span class="keyword">return</span> date</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="sessionStorage的存取"><a href="#sessionStorage的存取" class="headerlink" title="sessionStorage的存取"></a>sessionStorage的存取</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Session</span> {</span><br><span class="line"> <span class="title function_">setSession</span>(<span class="params">key, value</span>) {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">sessionStorage</span>.<span class="title function_">setItem</span>(key, value)</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getSession</span>(<span class="params">key</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> key === <span class="string">'string'</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">window</span>.<span class="property">sessionStorage</span>.<span class="title function_">getItem</span>(key) || <span class="string">''</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (key <span class="keyword">instanceof</span> <span class="title class_">Array</span>) {</span><br><span class="line"> <span class="keyword">const</span> setKey = [...<span class="keyword">new</span> <span class="title class_">Set</span>(key)]</span><br><span class="line"> <span class="keyword">let</span> newObj = {}</span><br><span class="line"> setKey.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> value = <span class="variable language_">window</span>.<span class="property">sessionStorage</span>.<span class="title function_">getItem</span>(item) || <span class="string">''</span></span><br><span class="line"> <span class="keyword">if</span> (value) {</span><br><span class="line"> newObj[item] = value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> newObj</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//get方法支持数组格式 如['key1','key2'] 返回值为{key1:key1,key2:key2}</span></span><br></pre></td></tr></table></figure><h2 id="localStorage"><a href="#localStorage" class="headerlink" title="localStorage"></a>localStorage</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Storage</span> {</span><br><span class="line"> <span class="title function_">setStorage</span>(<span class="params">key, value</span>) {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">setItem</span>(key, value)</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getStorage</span>(<span class="params">key</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> key === <span class="string">'string'</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">getItem</span>(key) || <span class="string">''</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (key <span class="keyword">instanceof</span> <span class="title class_">Array</span>) {</span><br><span class="line"> <span class="keyword">const</span> setKey = [...<span class="keyword">new</span> <span class="title class_">Set</span>(key)]</span><br><span class="line"> <span class="keyword">let</span> newObj = {}</span><br><span class="line"> setKey.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> value = <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">getItem</span>(item) || <span class="string">''</span></span><br><span class="line"> <span class="keyword">if</span> (value) {</span><br><span class="line"> newObj[item] = value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> newObj</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//get方法支持字符串和数组</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Storage</span>()</span><br></pre></td></tr></table></figure><h2 id="快排"><a href="#快排" class="headerlink" title="快排"></a>快排</h2><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><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sort</span>(<span class="params">arr</span>) {</span><br><span class="line"><span class="keyword">if</span> (arr.<span class="property">length</span> <= <span class="number">1</span>) {</span><br><span class="line"><span class="keyword">return</span> arr</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> pivot = arr.<span class="title function_">splice</span>(<span class="number">0</span>, <span class="number">1</span>)[<span class="number">0</span>]</span><br><span class="line"><span class="keyword">const</span> left = [],</span><br><span class="line">right = []</span><br><span class="line"></span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =></span> {</span><br><span class="line"><span class="keyword">if</span> (item < pivot) {</span><br><span class="line">left.<span class="title function_">push</span>(item)</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line">right.<span class="title function_">push</span>(item)</span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line"><span class="comment">// return arrSort(left).concat(pivot,arrSort(right))</span></span><br><span class="line"><span class="keyword">return</span> [...<span class="title function_">sort</span>(left), pivot, ...<span class="title function_">sort</span>(right)]</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 写着玩的 没啥用 理解原理就行</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> js </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/article/4a17b156.html"/>
<url>/article/4a17b156.html</url>
<content type="html"><![CDATA[<h2 id="我是Big0range-不是-BigOrange"><a href="#我是Big0range-不是-BigOrange" class="headerlink" title="我是Big0range 不是 BigOrange"></a>我是Big0range 不是 BigOrange</h2><p>因为O这个单词,太胖了,不好看</p> <style> .dot{ width: 8px; height: 8px; border-radius: 50%; background: #635854; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .boxs { font-size: 0; width: 220px; height: 220px; animation:circleRoate 2s infinite; animation-timing-function:linear; margin: auto; margin-top: 100px; z-index: 99; position: relative; } @keyframes circleRoate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .box { width: 110px; height: 40px; border-radius: 50% / 100% 100% 0 0; background: blue; transition: background 1s; } .box:nth-child(1) { transform: translate(75px, 35px) rotate(90deg); } .box:nth-child(2) { transform: translate(0px, 30px) rotate(0deg); } .box:nth-child(3) { transform: translate(110px, 30px) rotate(180deg); } .box:nth-child(4) { transform: translate(35px, 25px) rotate(270deg); } .stick{ width: 0; height: 200px; border: 2px solid darkred; margin: auto; transform:translate(0px,-110px); position: relative; } * { margin: 0; padding: 0; box-sizing: border-box; } </style></head><div> <div class="boxs" > <!-- <div class="box" v-for="(item,index) in 4" :key="index" :style="{background:colors[index]}"></div>--> <!-- <div class="dot"></div>--> <div class="box" style="background: #eccf2c;"></div> <div class="box" style="background: #b8232c;"></div> <div class="box" style="background: #367945;"></div> <div class="box" style="background: #b4a1cf;"></div> <div class="dot"></div> </div> <div class="stick"></div></div>]]></content>
<categories>
<category> 搭建成功 </category>
</categories>
</entry>
</search>