-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
349 lines (276 loc) · 39.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>ayozooZ - ayozooZ的blog</title><meta name="author" content="ayozooZ"><meta name="copyright" content="ayozooZ"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="ayozooZ">
<meta property="og:url" content="https://ayozoo.github.io/index.html">
<meta property="og:site_name" content="ayozooZ">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ayozoo.github.io/img/avatar.jpg">
<meta property="article:author" content="ayozooZ">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ayozoo.github.io/img/avatar.jpg"><link rel="shortcut icon" href="/img/favicon.svg"><link rel="canonical" href="https://ayozoo.github.io/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: '',
enable_page_level_ads: 'true'
});</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"简","msgToSimplifiedChinese":"简"},
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: true,
post: true
},
runtime: '天',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: ayozooZ","link":"链接: ","source":"来源: ayozooZ","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
lightbox: 'fancybox',
Snackbar: undefined,
infinitegrid: {
js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: true,
islazyload: false,
isAnchor: false,
percent: {
toc: true,
rightside: true,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'ayozooZ',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2024-03-13 19:07:45'
}</script><script>(win=>{
win.saveToLocal = {
set: (key, value, ttl) => {
if (ttl === 0) return
const now = Date.now()
const expiry = now + ttl * 86400000
const item = {
value,
expiry
}
localStorage.setItem(key, JSON.stringify(item))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = Date.now()
if (now > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
Object.keys(attr).forEach(key => {
script.setAttribute(key, attr[key])
})
document.head.appendChild(script)
})
win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="/css/iconfont.css"><meta name="generator" content="Hexo 6.3.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; } .github-emoji > span { position: relative; z-index: 10; } .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; } .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
<link rel="alternate" href="/atom.xml" title="ayozooZ" type="application/atom+xml">
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">9</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">3</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page fixed" id="page-header" style="background-image: url('/img/wallhaven.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="ayozooZ"><img class="site-icon" src="/img/avatar.jpg"/><span class="site-name">ayozooZ</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">ayozooZ</h1><div id="site_social_icons"><a class="social-icon" href="https://github.com/ayozoo" target="_blank" title="Github"><i class="iconfont icon-github" style="color: #24292e;"></i></a><a class="social-icon" href="https://blog.csdn.net/Nikon_?type=blog" target="_blank" title="csdn"><i class="iconfont icon-csdn"></i></a><a class="social-icon" href="https://juejin.cn/user/1869629711195757" target="_blank" title="juejin"><i class="iconfont icon-shigongdaka"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/03/12/%20%E4%BB%80%E4%B9%88%E6%98%AFssr/" title="什么是ssr">什么是ssr</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-03-12T13:30:03.000Z" title="发表于 2024-03-12 21:30:03">2024-03-12</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-03-12T13:58:56.017Z" title="更新于 2024-03-12 21:58:56">2024-03-12</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/SSR/">SSR</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/SSR/">SSR</a></span></div><div class="content">概念服务器端渲染(Server-Side Rendering，SSR)指的是在服务器上完成网页渲染并将将其发送给客户端的过程。
为什么需要SSR?SSR 发送给客户端的是包含了完整内容的网页，这样用户可以先看到网页的内容，而不需要等待“网页加载>执行JS>加载数据>渲染到网页”，从而提升用户体验。另一方面，因为网页内已经包含了具体内容，对搜索引擎也更加友好。
SSR的优势SSR 能改善用户体验。与传统服务器语言的对比很久之前，我们用 PHP 之类的语言输出 HTML，但是我们并不称其为”服务器端渲染”，因为现在的SSR 有更多的优化:
语言同构化:开发难度降低。
数据传递与状态管理:虽然还是 JSON，但框架尽量帮我们做好了。
渲染函数由边缘计算负责:更快的速度、
页面切换时不会重新加载-
与传统服务器语言的对比很久之前，我们用PHP之类的语言输出HTML，但是我们并不称其为”服务器端渲染”，因为现在的服务器端渲染有更多的优:
语言同构化:开发难度降低。
数据传递与状态管理:虽然还是 JSON，但框架尽量帮我们做好了。
渲染函数由边缘计算负责:更快的速度、
页面 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/03/12/%20nuxt-%E5%B0%9D%E9%B2%9C/" title="nuxt-尝鲜">nuxt-尝鲜</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-03-12T13:15:33.000Z" title="发表于 2024-03-12 21:15:33">2024-03-12</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-03-12T13:37:46.213Z" title="更新于 2024-03-12 21:37:46">2024-03-12</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/SSR/">SSR</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/SSR/">SSR</a></span></div><div class="content">runtimeConfig与app.confg回看app.config.ts与nuxt.config.ts,俩者都是向应用程序的其余部分公开变量
runtimeConfig：使用环境变量构建后需要指定的私有或公共令牌。 app.config：在构建时确定的公共令牌、网站配置（如主题变体、标题和任何不敏感的项目配置）。
以下有使用准则，请参考以下标准:
特征比较
特征
runtimeConfig
app.config
客户端
水合
捆绑
环境变量
✅是的
不
反应性
✅是的
✅是的
类型支持
✅部分
✅是的
每个请求的配置
✅不
✅是的
热模块更换
✅不
✅是的
非原始 JS 类型
✅不
✅是的
样式本地样式表 本地样式表存在assets/目录
组件内导入 通过@import导入
1234567891011<script>// Use a static import for server-side compatibilityimport '~/assets/css/first.css'// Caution: Dynamic i ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/11/20/%20React-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/" title="React-状态管理">React-状态管理</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-11-20T15:03:43.000Z" title="发表于 2023-11-20 23:03:43">2023-11-20</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-21T15:09:00.757Z" title="更新于 2023-11-21 23:09:00">2023-11-21</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">react之状态管理随着应用的不断加大，我们应该更有意识的的去关注我们的应用状态如何去组织，以及数据如何在组件中流动。我们应该去避免冗余或重复的状态，这样可以避免一些缺陷的产生。这时候，如何组织好状态，如何保持状态更新逻辑的可维护性，以及如何跨组件共享状态就变得尤为重要。
使用状态响应输入在使用React时，我们不需要直接代码层面去修改UI。我们可以直接通过组件的不同状态去展现的UI，然后根据用户输入触发状态修改。
声明式UI与命令式UI的比较当设计UI交互时，会思考UI如何根据用户的操作而响应变化。想象一个允许用户提交一个答案的表单：
当表单输入的时候，“提交”按钮会变成可用状态
点击“提交”后，表单和提交按钮都会随之变成不可用状态
如果网络请求成功，表单会随之隐藏，同时会出现“提交成功”提示
如果网络请求失败，会出现错误提示信息，表单又变为可用状态
命令式编程中，我们需要根据具体的场景去设计如何实现交互。我们必须根据可能会发生的事情去写一些明确的命令去操作UI。也就是我们需要“命令”每个元素（操作dom），告诉计算机应该如何去更新UI的编程方式被称为命令式编程。
对于独立系统来 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/11/08/%20React%E4%B9%8Bhook%E7%AF%87/" title="React之Hook篇">React之Hook篇</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-11-08T15:21:48.000Z" title="发表于 2023-11-08 23:21:48">2023-11-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-13T14:52:38.345Z" title="更新于 2023-11-13 22:52:38">2023-11-13</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">React之Hook篇useState什么是state？在react中，数据不称为data，而称为state
data = > state（状态）
React，其实是一个view library （view库—只关注视图）
view => update => 视图的具体状态
state <=> view
state和视图是相关联的。
视图是某一个状态发生了变化，所以视图要进行相应的更新。
useState()=> state setState
这个可以解释为，视图需要state状态。通过useState()创建了一个状态和设置状态的方法。
react设计理念
react设计理念：一切操作函数化。
在react中，贯彻js—–“函数是一等公民”的理念。
react提供的东西都是朴素的，简单的。
react大部分都是运行时；vue都是编译时的行为。
使用姿势根据状态变更，有以下俩种：
setXxx(xxx) 简单情况
setXxx((x)=>{ return 表达式}) 复杂情况
常用写法一：s ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/11/02/%20React-%E6%B7%BB%E5%8A%A0%E4%BA%A4%E4%BA%92/" title="React入门之添加交互">React入门之添加交互</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-11-02T15:21:22.000Z" title="发表于 2023-11-02 23:21:22">2023-11-02</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-08T15:31:43.168Z" title="更新于 2023-11-08 23:31:43">2023-11-08</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">
React入门之添加交互界面上的控件对随着用户的输入而更新。例如点击按钮切换轮播图的展示。在React中，随着时间变化的数据称为状态（state）。可以向任何组件添加状态，按需去进行更新。
响应事件什么是响应事件React允许我们在JSX中添加时间处理程序。事件处理程序是我们自己定义的函数。比如我们界面交互时：点击、悬停、焦点聚焦等交互事件。
我们在自己的组件中可以定义我们自己的事件处理程序。做法是往我们的组件时间处理程序props指定特定应用的名称。
1234567891011121314151617181920212223242526272829303132333435// 定义button组件 通过props接收onclick事件// {children} 作为插槽接收function Button({ onClick, children }) { return ( <button onClick={onClick}> {children} </button> );}// 定义Toolbar 通过props接收onPlay ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/10/31/%20React-%E6%8F%8F%E8%BF%B0UI/" title="React入门之描述UI">React入门之描述UI</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-10-31T15:50:22.000Z" title="发表于 2023-10-31 23:50:22">2023-10-31</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-08T15:30:05.380Z" title="更新于 2023-11-08 23:30:05">2023-11-08</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">
ReactReact应用就是被组件的独立UI片段构建，React组件本质就是可以添加任意标签的JavaScript函数。
React组件的基本要素
基本的组件js文件存在要素：1、可以return出存在任意标签的JavaScript函数2、函数中需要存在return(xxx) html结构3、最终需要将渲染的组件export出去
1234567891011121314151617181920function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> );}export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profi ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/08/27/%20websocket/" title="http vs websocket">http vs websocket</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-08-27T13:22:45.000Z" title="发表于 2023-08-27 21:22:45">2023-08-27</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-26T15:17:06.157Z" title="更新于 2023-09-26 23:17:06">2023-09-26</time></span></div><div class="content">通信串行通信中，数据通常是在俩个终端之间进行传送，根据数据流的传输方向分为以下三种基本传送方式：单工、半双工和全双工。
基本区别为：
单工：单工通信只有一根数据线，通信只在一个方向上进行，这种方式的应用实例有：监视器、打印机、电视机等。
半双工：半双工通信也只有一根数据线，它也单工的区别是这根数据线既可作发送又可作发接收，虽然数据可在两个方向上传送，但通信双方不能同时收发数据。http协议采用的就是这个通信方式
全双工： 数据的发送和接收用两根不同的数据线，通信双方在同一时刻都能进行发送和接收，这一工作方式称为全双工通信。在这种方式下，通信双方都有发送器和接收器，发送和接收可同时进行，没有时间延迟。websocket采用的就是这个通信方式
http
http协议主要关注的是 客户端——>服务器（获取资源）
特点：无状态协议； 每个请求都是独立的； 请求应答模式，服务器无法主动给客户端推送消息（单工，半双工，全双工） http受浏览器同源策略的影响
websocket双向通信（全双工协议）每次不需要重新建立连接，可以一直相互通信
不使用webso ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2022/10/19/%20webpack%E3%80%81vite%E7%9A%84%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%8C%85%E7%9A%84-%E7%88%B1%E6%81%A8%E6%83%85%E4%BB%87/" title="webpack、vite的自动导包的"爱恨情仇"">webpack、vite的自动导包的"爱恨情仇"</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-10-19T13:21:48.000Z" title="发表于 2022-10-19 21:21:48">2022-10-19</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-26T15:14:58.020Z" title="更新于 2023-09-26 23:14:58">2023-09-26</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7/">前端构建工具</a></span></div><div class="content">webpack、vite的自动导包的”爱恨情仇”前言最近在开发Vue3+Vite的统一基座工程，遇到了模块自动导入的不同构建工具的引入方式，特此记录。
在项目中，为了避免频繁导入。大家都会在对应，例如项目使用Webpack 打包工具的。在其项目store文件下其中的index.js 文件中使用webpack提供的apirequire.context的方法实现自动导入。
ES 模块规范在实现自动导入模块前，我们先了解下ES 模块规范。
所谓的ES模块规范,即 JavaScript 的标准模块系统，它允许您使用 import 和 export 关键字来导入和导出模块。这是现代 JavaScript 中推荐使用的模块化方式。
在ES模块规范中，提供了import.meta.glob功能。它允许在项目运行中动态匹配特定模式的模块。例如以下代码就可以动态匹配到module模块下的所有js文件。
1import.meta.glob('./module/*.js')
话不多说，上干货例如，你的项目sotre文件目录为
12345678- store - module - module ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2022/07/18/%20vue3-vite%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E8%B8%A9%E9%9B%B7/" title="vue3+vite环境变量踩雷">vue3+vite环境变量踩雷</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-07-18T12:12:44.000Z" title="发表于 2022-07-18 20:12:44">2022-07-18</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-26T15:14:44.580Z" title="更新于 2023-09-26 23:14:44">2023-09-26</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7/">前端构建工具</a></span></div><div class="content">vue3 + vite 环境变量踩坑前言众所周知，项目搭建过程中，存在环境的区分。一般项目中都会存在env的俩个配置环境变量的配置文件。…
例如以下生产环境、开发环境的环境变量文件：
1234567891011121314//.env.development 生产环境变量文件# 开发环境配置ENV = 'development'# 开发环境VUE_APP_BASE_API = '/dev-api'// .env.production# 生产环境配置ENV = 'production'# 生产环境VUE_APP_BASE_API = '/web-api'
然后在package.json中配置对应环境启动命令用以启动不同环境
1234"scripts": { "dev": "vue-cli-service --mode development", "build": "vue-cli-service build --mode production", },
什么是环境变量？根据代码运行环境变化而变化的变量就是所谓的环境变量。
在生产环境和开发环境中最多用以区分接口公共BA ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">ayozooZ</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">9</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">3</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/ayozoo"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/ayozoo" target="_blank" title="Github"><i class="iconfont icon-github" style="color: #24292e;"></i></a><a class="social-icon" href="https://blog.csdn.net/Nikon_?type=blog" target="_blank" title="csdn"><i class="iconfont icon-csdn"></i></a><a class="social-icon" href="https://juejin.cn/user/1869629711195757" target="_blank" title="juejin"><i class="iconfont icon-shigongdaka"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">懒惰不是不努力的借口</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/03/12/%20%E4%BB%80%E4%B9%88%E6%98%AFssr/" title="什么是ssr">什么是ssr</a><time datetime="2024-03-12T13:30:03.000Z" title="发表于 2024-03-12 21:30:03">2024-03-12</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/03/12/%20nuxt-%E5%B0%9D%E9%B2%9C/" title="nuxt-尝鲜">nuxt-尝鲜</a><time datetime="2024-03-12T13:15:33.000Z" title="发表于 2024-03-12 21:15:33">2024-03-12</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/11/20/%20React-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/" title="React-状态管理">React-状态管理</a><time datetime="2023-11-20T15:03:43.000Z" title="发表于 2023-11-20 23:03:43">2023-11-20</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/11/08/%20React%E4%B9%8Bhook%E7%AF%87/" title="React之Hook篇">React之Hook篇</a><time datetime="2023-11-08T15:21:48.000Z" title="发表于 2023-11-08 23:21:48">2023-11-08</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/11/02/%20React-%E6%B7%BB%E5%8A%A0%E4%BA%A4%E4%BA%92/" title="React入门之添加交互">React入门之添加交互</a><time datetime="2023-11-02T15:21:22.000Z" title="发表于 2023-11-02 23:21:22">2023-11-02</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>分类</span>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/SSR/"><span class="card-category-list-name">SSR</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/"><span class="card-category-list-name">前端框架</span><span class="card-category-list-count">4</span></a></li>
</ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7/" style="font-size: 1.1em; color: #999">前端构建工具</a> <a href="/tags/react/" style="font-size: 1.5em; color: #99a9bf">react</a> <a href="/tags/SSR/" style="font-size: 1.1em; color: #999">SSR</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">三月 2024</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/10/"><span class="card-archive-list-date">十月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/07/"><span class="card-archive-list-date">七月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">9</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2024-03-13T11:07:45.372Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">52k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-03-13T11:07:45.384Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 - 2024 By ayozooZ</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Hi, welcome to my blog</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat-btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><script>(() => {
const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
if ($mermaid.length === 0) return
const runMermaid = () => {
window.loadMermaid = true
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'
Array.from($mermaid).forEach((item, index) => {
const mermaidSrc = item.firstElementChild
const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
const mermaidID = 'mermaid-' + index
const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
const renderFn = mermaid.render(mermaidID, mermaidDefinition)
const renderV10 = () => {
renderFn.then(({svg}) => {
mermaidSrc.insertAdjacentHTML('afterend', svg)
})
}
const renderV9 = svg => {
mermaidSrc.insertAdjacentHTML('afterend', svg)
}
typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
})
}
const loadMermaid = () => {
window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
}
btf.addGlobalFn('themeChange', runMermaid, 'mermaid')
window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
})()</script></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/fireworks.min.js"></script><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div></body></html>