PageSourceSearch

https://hanochma.github.io/blogs/

html hanochma.github.io collected 2026-10-03 09:16:29 UTC 36,473 bytes, 25 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>HanochMa | HanochMa</title>
7    <meta name="description" content="hello world">
8    <link rel="preload stylesheet" href="/assets/style.f22508d6.css" as="style">
9    
9<script type="module" src="/assets/app.acf98444.js"></script>
9
10    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
11  <link rel="modulepreload" href="/assets/chunks/framework.ab6d8354.js">
12  <link rel="modulepreload" href="/assets/chunks/theme.fddeda96.js">
13  <link rel="modulepreload" href="/assets/chunks/dayjs.min.5d37bafc.js">
14  <link rel="modulepreload" href="/assets/blogs_index.md.c57408de.lean.js">
15  <link rel="icon" type="image/png" href="logo.png">
16  <meta name="baidu-site-verification" content="codeva-kpyolTmPBl">
17  
17<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
17
18  </head>
19  <body>
20    <div id="app"><div class="Layout" data-v-70375e67><!--[--><!--]--><!--[--><span tabindex="-1" data-v-2e6c1792></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-2e6c1792> Skip to content </a><!--]--><!----><header class="VPNav" data-v-70375e67 data-v-b2d71e50><div class="VPNavBar has-sidebar" data-v-b2d71e50 data-v-f5c01f8d><div class="container" data-v-f5c01f8d><div class="title" data-v-f5c01f8d><div class="VPNavBarTitle has-sidebar" data-v-f5c01f8d data-v-6969d90d><a class="title" href="/" data-v-6969d90d><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-67bf16a9><!--]--><!--[-->HanochMa<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-f5c01f8d><div class="curtain" data-v-f5c01f8d></div><div class="content-body" data-v-f5c01f8d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-f5c01f8d><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-f5c01f8d data-v-18e08ef6><span id="main-nav-aria-label" class="visually-hidden" data-v-18e08ef6>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-18e08ef6 data-v-186c086c data-v-b303702d><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/daily/" tabindex="0" data-v-18e08ef6 data-v-186c086c data-v-b303702d><!--[-->我的笔记<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/blogs/" tabindex="0" data-v-18e08ef6 data-v-186c086c data-v-b303702d><!--[-->博客文章<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://juejin.cn/user/4406498337237182" target="_blank" rel="noreferrer" tabindex="0" data-v-18e08ef6 data-v-186c086c data-v-b303702d><!--[-->我的掘金<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-b303702d><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/me/" tabindex="0" data-v-18e08ef6 data-v-186c086c data-v-b303702d><!--[-->关于我<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-f5c01f8d data-v-a2379b6b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-a2379b6b data-v-5be2ff4a data-v-bb70fabd><span class="check" data-v-bb70fabd><span class="icon" data-v-bb70fabd><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-5be2ff4a><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-5be2ff4a><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-f5c01f8d data-v-b141d515 data-v-84d67287><!--[--><a class="VPSocialLink" href="https://github.com/HanochMa" aria-label="github" target="_blank" rel="noopener" data-v-84d67287 data-v-92f428f1><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
20<!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-f5c01f8d data-v-c0329918 data-v-add6b163><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-add6b163><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-add6b163><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-add6b163><div class="VPMenu" data-v-add6b163 data-v-708825e6><!----><!--[--><!--[--><!----><div class="group" data-v-c0329918><div class="item appearance" data-v-c0329918><p class="label" data-v-c0329918>Appearance</p><div class="appearance-action" data-v-c0329918><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-c0329918 data-v-5be2ff4a data-v-bb70fabd><span class="check" data-v-bb70fabd><span class="icon" data-v-bb70fabd><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-5be2ff4a><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-5be2ff4a><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-c0329918><div class="item social-links" data-v-c0329918><div class="VPSocialLinks social-links-list" data-v-c0329918 data-v-84d67287><!--[--><a class="VPSocialLink" href="https://github.com/HanochMa" aria-label="github" target="_blank" rel="noopener" data-v-84d67287 data-v-92f428f1><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-f5c01f8d data-v-cf0b5a11><span class="container" data-v-cf0b5a11><span class="top" data-v-cf0b5a11></span><span class="middle" data-v-cf0b5a11></span><span class="bottom" data-v-cf0b5a11></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-70375e67 data-v-e422f248><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-e422f248><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-e422f248>
20<path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-e422f248>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-e422f248 data-v-b3ccf219><button data-v-b3ccf219>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-70375e67 data-v-3b273ea8><div class="curtain" data-v-3b273ea8></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b273ea8><span class="visually-hidden" id="sidebar-aria-label" data-v-3b273ea8> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-3b273ea8><section class="VPSidebarItem level-0" data-v-3b273ea8 data-v-4509d7af><div class="item" role="button" tabindex="0" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><h2 class="text" data-v-4509d7af>前端基础篇</h2><!----></div><div class="items" data-v-4509d7af><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2022-05-15-guifan" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>开发规范</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2022-05-20-typescript" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Typescript定义</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2022-05-21-npm" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>NPM命令</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-04-24-vscode" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>VsCode插件和快捷键</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-04-25-cssbox" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>CSS盒模型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-05-05-frontend-history" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>前端工程化的演变</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-05-05-IOC" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>控制反转(IOC)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-05-11-pnpm" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>深入浅出PNPM</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-05-16-talk-this1" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>浅谈“this”(上)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-05-16-talk-this2" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>浅谈“this”(下)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/front-base/2023-05-16-js-prototype" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>JS之prototype</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-3b273ea8><section class="VPSidebarItem level-0" data-v-3b273ea8 data-v-4509d7af><div class="item" role="button" tabindex="0" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><h2 class="text" data-v-4509d7af>Web应用篇</h2><!----></div><div class="items" data-v-4509d7af><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-04-25-jsbridge" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>一文让你彻底理解JSbridge</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-04-25-echartsclick" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Echarts隐藏api之精细化监听click</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-04-25-vue3dialog" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>教你用Vue3实现移动端Dialog</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-04-26-newvue-process" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>New Vue之后到底发生了什么</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-04-26-webpack-opt" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Webpack优化思路</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-05-04-vite-hmr" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Vite的HMR</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-05-05-vite-code-splitting" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Vite的拆包策略</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-05-05-image-handle" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>现代图片性能优化及体验优化方案</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-05-05-vscode-opt" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>VSCode是如何优化性能的</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/web-apply/2023-05-05-vscode-plugin" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>深入浅出vscode插件</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-3b273ea8><section class="VPSidebarItem level-0" data-v-3b273ea8 data-v-4509d7af><div class="item" role="button" tabindex="0" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><h2 class="text" data-v-4509d7af>网络篇</h2><!----></div><div class="items" data-v-4509d7af><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/network/2023-05-09-http2" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>HTTP2.0是如何优化传输性能的</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/network/2023-05-15-tcp-handshake" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>聊聊TCP握手</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/network/2023-05-18-http-history" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>HTTP的前世今生</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-3b273ea8><section class="VPSidebarItem level-0" data-v-3b273ea8 data-v-4509d7af><div class="item" role="button" tabindex="0" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><h2 class="text" data-v-4509d7af>通用能力篇</h2><!----></div><div class="items" data-v-4509d7af><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2021-12-31-md-icon" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Markdown Icon汇总</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2022-05-07-git" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Git常用命令</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2023-04-23-md-write" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Markdown语法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2023-05-15-tech-share" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>如何做一个有质量的技术分享</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2023-05-15-think-method" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>使用简单的逻辑方法进行独立思考</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2023-05-23-typora-picbed" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>Typora+PicGo+Github无缝上传图片</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2023-05-26-github-workflow" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>自动打包部署Github Pages</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4509d7af data-v-4509d7af><div class="item" data-v-4509d7af><div class="indicator" data-v-4509d7af></div><a class="VPLink link link" href="/blogs/common-skill/2023-07-12-web-gpt" data-v-4509d7af data-v-b303702d><!--[--><p class="text" data-v-4509d7af>十分钟搭建自己的ChatGPT应用</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-70375e67 data-v-d2cd9f86><div class="VPDoc has-sidebar has-aside" data-v-d2cd9f86 data-v-2476f2ca><!--[--><!--]--><div class="container" data-v-2476f2ca><div class="aside" data-v-2476f2ca><div class="aside-curtain" data-v-2476f2ca></div><div class="aside-container" data-v-2476f2ca><div class="aside-content" data-v-2476f2ca><div class="VPDocAside" data-v-2476f2ca data-v-c4546a7a><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-c4546a7a data-v-95692e2a><div class="content" data-v-95692e2a><div class="outline-marker" data-v-95692e2a></div><div class="outline-title" data-v-95692e2a>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-95692e2a><span class="visually-hidden" id="doc-outline-aria-label" data-v-95692e2a> Table of Contents for current page </span><ul class="root" data-v-95692e2a data-v-078efaac><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-c4546a7a></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-2476f2ca><div class="content-container" data-v-2476f2ca><!--[--><!--]--><!----><main class="main" data-v-2476f2ca><div style="position:relative;" class="vp-doc _blogs_index" data-v-2476f2ca><div><h2 id="我为什么要写博客" tabindex="-1">我为什么要写博客 <a class="header-anchor" href="#我为什么要写博客" aria-label="Permalink to &quot;我为什么要写博客&quot;">​</a></h2><p>2020å¹´6月大学毕业入行前端,2021年年初的时候就想着,之前几个月遇到的好多问题,或者看过的挺多很好的文章都找不到了,遇到相同或者类似的问题又需要重新找解决方案,其实是一件挺痛苦的事情,浪费了自己的时间,很多知识也没有系统的去复习回顾,挺可惜的。</p><p>于是我就在github上新建了一个仓库,然后开始书写Markdown记录笔记了。以前都是在公司wiki或者语雀上记录,一个是离职以å
20Žä¸å¥½è¿ç§»ï¼Œå†å°±æ˜¯è¯­é›€ä¹Ÿè¶Šæ¥è¶Šåå‘于会员化,于是想着搞个自己的博客托管在github上</p><p>刚开始还有一些犹豫一直想使用vuepress,毕竟之前有用过vuepress搭建公司的组件库,但是又想尝试新鲜的vitepress,在我正在犹豫的时候我看到一个非常亮眼的优点:可以在md文档里面混合使用vue3的组件,于是果断使用vitepress。</p><div class="gitalk-container"><div id="gitalk-container"></div></div></div></div></main><footer class="VPDocFooter" data-v-2476f2ca data-v-5bee95e2><!--[--><!--]--><div class="edit-info" data-v-5bee95e2><!----><div class="last-updated" data-v-5bee95e2><p class="VPLastUpdated" data-v-5bee95e2 data-v-fc4aa0c3>上次更新: <time datetime="2023-05-25T07:08:21.000Z" data-v-fc4aa0c3></time></p></div></div><div class="prev-next" data-v-5bee95e2><div class="pager" data-v-5bee95e2><!----></div><div class="pager" data-v-5bee95e2><a class="pager-link next" href="/blogs/front-base/2022-05-15-guifan" data-v-5bee95e2><span class="desc" data-v-5bee95e2>Next page</span><span class="title" data-v-5bee95e2>开发规范</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-70375e67 data-v-f0bb9091><div class="container" data-v-f0bb9091><p class="message" data-v-f0bb9091>Released under the MIT License.</p><p class="copyright" data-v-f0bb9091>Copyright © 2023-04-23~present HanochMa</p></div></footer><!--[--><!--]--></div></div>
21    
21<script>__VP_HASH_MAP__ = JSON.parse("{\"blogs_network_2023-05-09-http2.md\":\"1f6ffac5\",\"blogs_common-skill_2022-05-07-git.md\":\"474ed06f\",\"blogs_common-skill_2023-05-23-typora-picbed.md\":\"470ce9b1\",\"blogs_common-skill_2023-07-12-web-gpt.md\":\"946c5a9b\",\"blogs_front-base_2022-05-20-typescript.md\":\"6430393f\",\"blogs_front-base_2023-04-24-vscode.md\":\"4f23d861\",\"blogs_common-skill_2023-04-23-md-write.md\":\"1fb22ebb\",\"blogs_front-base_2022-05-21-npm.md\":\"aeaeecef\",\"blogs_front-base_2023-04-25-cssbox.md\":\"d8cedfe2\",\"blogs_front-base_2023-05-16-talk-this1.md\":\"ccc8e0e0\",\"blogs_front-base_2023-05-11-pnpm.md\":\"28201845\",\"blogs_front-base_2023-05-16-js-prototype.md\":\"5441c2dd\",\"blogs_front-base_2023-05-16-talk-this2.md\":\"dd58174c\",\"blogs_front-base_2023-05-05-frontend-history.md\":\"1e802bfc\",\"blogs_web-apply_2023-04-25-jsbridge.md\":\"161538a8\",\"blogs_common-skill_2023-05-15-tech-share.md\":\"d5b7c6d3\",\"blogs_front-base_2022-05-15-guifan.md\":\"16813d05\",\"blogs_network_2023-05-18-http-history.md\":\"88cff060\",\"blogs_common-skill_2023-05-15-think-method.md\":\"98a910bd\",\"blogs_network_2023-05-15-tcp-handshake.md\":\"3ea84d34\",\"blogs_common-skill_2023-05-26-github-workflow.md\":\"32ae67e4\",\"blogs_web-apply_2023-04-25-echartsclick.md\":\"413d5a44\",\"daily_index.md\":\"f4336d90\",\"blogs_web-apply_2023-05-05-vite-code-splitting.md\":\"4b8c1fce\",\"blogs_web-apply_2023-04-26-newvue-process.md\":\"52025209\",\"daily_2023-05.md\":\"8dd3581c\",\"blogs_web-apply_2023-05-05-image-handle.md\":\"ead7cce6\",\"blogs_web-apply_2023-04-26-webpack-opt.md\":\"2bf8b63e\",\"blogs_common-skill_2021-12-31-md-icon.md\":\"f93c403c\",\"blogs_web-apply_2023-05-05-vscode-plugin.md\":\"295cd2c6\",\"blogs_web-apply_2023-04-25-vue3dialog.md\":\"e8af3da9\",\"blogs_web-apply_2023-05-05-vscode-opt.md\":\"923c9458\",\"blogs_web-apply_2023-05-04-vite-hmr.md\":\"ec1ea209\",\"daily_2021-sum.md\":\"bac3279a\",\"daily_2023-04.md\":\"c2e1c2ae\",\"blogs_front-base_2023-05-05-ioc.md\":\"aea32936\",\"blogs_index.md\":\"c57408de\",\"me_index.md\":\"795aeaed\",\"index.md\":\"b04fbbda\"}")
22__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"HanochMa\",\"description\":\"hello world\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outlineTitle\":\"本页目录\",\"lastUpdatedText\":\"上次更新\",\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的笔记\",\"link\":\"/daily/\"},{\"text\":\"博客文章\",\"link\":\"/blogs/\"},{\"text\":\"我的掘金\",\"link\":\"https://juejin.cn/user/4406498337237182\"},{\"text\":\"关于我\",\"link\":\"/me/\"}],\"sidebar\":{\"/blogs/\":[{\"text\":\"前端基础篇\",\"items\":[{\"text\":\"开发规范\",\"link\":\"/blogs/front-base/2022-05-15-guifan\"},{\"text\":\"Typescript定义\",\"link\":\"/blogs/front-base/2022-05-20-typescript\"},{\"text\":\"NPM命令\",\"link\":\"/blogs/front-base/2022-05-21-npm\"},{\"text\":\"VsCode插件和快捷键\",\"link\":\"/blogs/front-base/2023-04-24-vscode\"},{\"text\":\"CSS盒模型\",\"link\":\"/blogs/front-base/2023-04-25-cssbox\"},{\"text\":\"前端工程化的演变\",\"link\":\"/blogs/front-base/2023-05-05-frontend-history\"},{\"text\":\"控制反转(IOC)\",\"link\":\"/blogs/front-base/2023-05-05-IOC\"},{\"text\":\"深入浅出PNPM\",\"link\":\"/blogs/front-base/2023-05-11-pnpm\"},{\"text\":\"浅谈“this”(上)\",\"link\":\"/blogs/front-base/2023-05-16-talk-this1\"},{\"text\":\"浅谈“this”(下)\",\"link\":\"/blogs/front-base/2023-05-16-talk-this2\"},{\"text\":\"JS之prototype\",\"link\":\"/blogs/front-base/2023-05-16-js-prototype\"}]},{\"text\":\"Web应用篇\",\"items\":[{\"text\":\"一文让你彻底理解JSbridge\",\"link\":\"/blogs/web-apply/2023-04-25-jsbridge\"},{\"text\":\"Echarts隐藏api之精细化监听click\",\"link\":\"/blogs/web-apply/2023-04-25-echartsclick\"},{\"text\":\"教你用Vue3实现移动端Dialog\",\"link\":\"/blogs/web-apply/2023-04-25-vue3dialog\"},{\"text\":\"New Vue之后到底发生了什么\",\"link\":\"/blogs/web-apply/2023-04-26-newvue-process\"},{\"text\":\"Webpack优化思路\",\"link\":\"/blogs/web-apply/2023-04-26-webpack-opt\"},{\"text\":\"Vite的HMR\",\"link\":\"/blogs/web-apply/2023-05-04-vite-hmr\"},{\"text\":\"Vite的拆包策略\",\"link\":\"/blogs/web-apply/2023-05-05-vite-code-splitting\"},{\"text\":\"现代图片性能优化及体验优化方案\",\"link\":\"/blogs/web-apply/2023-05-05-image-handle\"},{\"text\":\"VSCode是如何优化性能的\",\"link\":\"/blogs/web-apply/2023-05-05-vscode-opt\"},{\"text\":\"深入浅出vscode插件\",\"link\":\"/blogs/web-apply/2023-05-05-vscode-plugin\"}]},{\"text\":\"网络篇\",\"items\":[{\"text\":\"HTTP2.0是如何优化传输性能的\",\"link\":\"/blogs/network/2023-05-09-http2\"},{\"text\":\"聊聊TCP握手\",\"link\":\"/blogs/network/2023-05-15-tcp-handshake\"},{\"text\":\"HTTP的前世今生\",\"link\":\"/blogs/network/2023-05-18-http-history\"}]},{\"text\":\"通用能力篇\",\"items\":[{\"text\":\"Markdown Icon汇总\",\"link\":\"/blogs/common-skill/2021-12-31-md-icon\"},{\"text\":\"Git常用命令\",\"link\":\"/blogs/common-skill/2022-05-07-git\"},{\"text\":\"Markdown语法\",\"link\":\"/blogs/common-skill/2023-04-23-md-write\"},{\"text\":\"如何做一个有质量的技术分享\",\"link\":\"/blogs/common-skill/2023-05-15-tech-share\"},{\"text\":\"使用简单的逻辑方法进行独立思考\",\"link\":\"/blogs/common-skill/2023-05-15-think-method\"},{\"text\":\"Typora+PicGo+Github无缝上传图片\",\"link\":\"/blogs/common-skill/2023-05-23-typora-picbed\"},{\"text\":\"自动打包部署Github Pages\",\"link\":\"/blogs/common-skill/2023-05-26-github-workflow\"},{\"text\":\"十分钟搭建自己的ChatGPT应用\",\"link\":\"/blogs/common-skill/2023-07-12-web-gpt\"}]}
22],\"/daily/\":[{\"text\":\"2023年每日笔记\",\"items\":[{\"text\":\"2023-04\",\"link\":\"/daily/2023-04\"},{\"text\":\"2023-05\",\"link\":\"/daily/2023-05\"}]},{\"text\":\"一些想说的\",\"items\":[{\"text\":\"2021年终总结\",\"link\":\"/daily/2021-sum\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/HanochMa\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-04-23~present HanochMa\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
22
23    
24  </body>
25</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.