diff --git a/404.html b/404.html index d2df5391..69903868 100644 --- a/404.html +++ b/404.html @@ -11,8 +11,8 @@ - - + +
跳到主要内容

找不到页面

我们找不到您要找的页面。

请联系原始链接来源网站的所有者，并告知他们链接已损坏。

diff --git a/assets/js/009da649.52b036db.js b/assets/js/009da649.52b036db.js new file mode 100644 index 00000000..47f34ed2 --- /dev/null +++ b/assets/js/009da649.52b036db.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunknote_book=self.webpackChunknote_book||[]).push([[91808],{96909:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>o,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>r});const s=JSON.parse('{"id":"Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/\u5e94\u7528\u5b9e\u4f8b-\u7ec4\u4ef6\u5b9e\u4f8b\u4e0e\u6839\u7ec4\u4ef6\u5b9e\u4f8b","title":"\u5e94\u7528\u5b9e\u4f8b","description":"createApp \u521b\u5efa APP \u5e76\u8fd4\u56de\u4e00\u4e2a\u5e94\u7528\u5b9e\u4f8b\u3002","source":"@site/docs/Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/30.\u5e94\u7528\u5b9e\u4f8b-\u7ec4\u4ef6\u5b9e\u4f8b\u4e0e\u6839\u7ec4\u4ef6\u5b9e\u4f8b.md","sourceDirName":"Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027","slug":"/Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/\u5e94\u7528\u5b9e\u4f8b-\u7ec4\u4ef6\u5b9e\u4f8b\u4e0e\u6839\u7ec4\u4ef6\u5b9e\u4f8b","permalink":"/docs-hub/docs/Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/\u5e94\u7528\u5b9e\u4f8b-\u7ec4\u4ef6\u5b9e\u4f8b\u4e0e\u6839\u7ec4\u4ef6\u5b9e\u4f8b","draft":false,"unlisted":false,"editUrl":"https://github.com/sumingcheng/docs-hub/edit/main/docs/Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/30.\u5e94\u7528\u5b9e\u4f8b-\u7ec4\u4ef6\u5b9e\u4f8b\u4e0e\u6839\u7ec4\u4ef6\u5b9e\u4f8b.md","tags":[],"version":"current","lastUpdatedBy":"sumingcheng","lastUpdatedAt":1733823170000,"sidebarPosition":30,"frontMatter":{},"sidebar":"vueSidebar","previous":{"title":"\u4ec0\u4e48\u662f\u7ec4\u4ef6\u5316","permalink":"/docs-hub/docs/Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/\u7ec4\u4ef6\u5316\u6784\u5efa"},"next":{"title":"\u5b9e\u73b0 Vue2.0 \u6570\u636e\u52ab\u6301","permalink":"/docs-hub/docs/Frontend/Vue/Vue\u8fdb\u9636\u7279\u6027/\u6570\u636e\u52ab\u6301\u6e90\u7801"}}');var c=t(74848),d=t(28453);const i={},l="\u5e94\u7528\u5b9e\u4f8b",o={},r=[{value:"\u5b9e\u4f8b\u4e0a\u66b4\u9732\u4e86\u5f88\u591a\u65b9\u6cd5",id:"\u5b9e\u4f8b\u4e0a\u66b4\u9732\u4e86\u5f88\u591a\u65b9\u6cd5",level:2},{value:"\u94fe\u5f0f\u8c03\u7528",id:"\u94fe\u5f0f\u8c03\u7528",level:2},{value:"mount",id:"mount",level:2},{value:"vm \u547d\u540d",id:"vm-\u547d\u540d",level:2},{value:"\u521d\u59cb\u5316\u7684\u6574\u4e2a\u8fc7\u7a0b",id:"\u521d\u59cb\u5316\u7684\u6574\u4e2a\u8fc7\u7a0b",level:2},{value:"\u865a\u62df\u8282\u70b9",id:"\u865a\u62df\u8282\u70b9",level:2},{value:"\u793a\u4f8b\u4ee3\u7801",id:"\u793a\u4f8b\u4ee3\u7801",level:2},{value:"index.html",id:"indexhtml",level:3},{value:"index.js",id:"indexjs",level:3}];function a(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.R)(),...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.header,{children:(0,c.jsx)(e.h1,{id:"\u5e94\u7528\u5b9e\u4f8b",children:"\u5e94\u7528\u5b9e\u4f8b"})}),"\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"createApp"})," \u521b\u5efa ",(0,c.jsx)(e.code,{children:"APP"})," \u5e76\u8fd4\u56de\u4e00\u4e2a\u5e94\u7528\u5b9e\u4f8b\u3002"]}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-javascript",children:"const app = Vue.createApp({});\nconsole.log(app);\n"})}),"\n",(0,c.jsxs)(e.p,{children:["\u5e94\u7528\u5b9e\u4f8b\u63d0\u4f9b\u4e86\u8bb8\u591a\u53ef\u7528\u7684\u65b9\u6cd5\u3002\u8fd9\u4e9b\u65b9\u6cd5\u5927\u591a\u6570\u90fd\u4f1a\u8fd4\u56de\u901a\u8fc7 ",(0,c.jsx)(e.code,{children:"createApp"})," \u521b\u5efa\u7684\u5e94\u7528\u5b9e\u4f8b\uff0c\u4fbf\u4e8e\u8fdb\u884c\u94fe\u5f0f\u64cd\u4f5c\u3002"]}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-javascript",children:"const app = Vue.createApp({});\nconst appInstance = app.component('MyTitle', {\n data() {\n return {\n title: 'HTML',\n };\n },\n template: `

{{ title }}

`,\n});\nconsole.log(app === appInstance); // true\n\napp.mount('#app');\n"})}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{src:t(90769).A+"",width:"1195",height:"784"})}),"\n",(0,c.jsx)(e.h2,{id:"\u5b9e\u4f8b\u4e0a\u66b4\u9732\u4e86\u5f88\u591a\u65b9\u6cd5",children:"\u5b9e\u4f8b\u4e0a\u66b4\u9732\u4e86\u5f88\u591a\u65b9\u6cd5"}),"\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"createApp"})," \u521b\u5efa\u7684\u5e94\u7528\u5b9e\u4f8b\u63d0\u4f9b\u4e86\u591a\u79cd\u65b9\u6cd5\uff1a"]}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:"component"})," \u6ce8\u518c\u7ec4\u4ef6"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:"directive"})," \u6ce8\u518c\u6307\u4ee4"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:"filter"})," \u6ce8\u518c\u8fc7\u6ee4\u5668"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:"use"})," \u4f7f\u7528\u63d2\u4ef6"]}),"\n"]}),"\n",(0,c.jsx)(e.p,{children:"\u8fd9\u4e9b\u65b9\u6cd5\u5927\u591a\u6570\u90fd\u4f1a\u8fd4\u56de\u5e94\u7528\u5b9e\u4f8b\u672c\u8eab\uff0c\u652f\u6301\u94fe\u5f0f\u8c03\u7528\u3002"}),"\n",(0,c.jsx)(e.h2,{id:"\u94fe\u5f0f\u8c03\u7528",children:"\u94fe\u5f0f\u8c03\u7528"}),"\n",(0,c.jsx)(e.p,{children:"\u901a\u8fc7\u94fe\u5f0f\u8c03\u7528\uff0c\u53ef\u4ee5\u7b80\u5316\u5e94\u7528\u5b9e\u4f8b\u7684\u914d\u7f6e\u3002\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u4ee3\u7801\u5c55\u793a\u4e86\u5982\u4f55\u6ce8\u518c\u7ec4\u4ef6\u548c\u6307\u4ee4\uff0c\u5e76\u6302\u8f7d\u5e94\u7528\uff1a"}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-javascript",children:"const app = Vue.createApp({});\nconst appInstance = app\n .component('MyTitle', {\n data() {\n return {\n title: 'HTML',\n };\n },\n template: `

{{ title }}

`,\n })\n .directive('toLowerCase', {\n mounted(el) {\n el.addEventListener(\n 'click',\n function () {\n this.innerText = this.innerText.toLowerCase();\n },\n false\n );\n },\n })\n .mount('#app');\n"})}),"\n",(0,c.jsx)(e.h1,{id:"\u6839\u7ec4\u4ef6vm",children:"\u6839\u7ec4\u4ef6\uff08VM\uff09"}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"\u6839\u7ec4\u4ef6\u7684\u672c\u8d28\u662f\u4e00\u4e2a\u5bf9\u8c61"})}),"\n",(0,c.jsxs)(e.p,{children:["\u6839\u7ec4\u4ef6\u662f Vue \u6e32\u67d3\u7684\u8d77\u70b9\uff0c\u901a\u8fc7 ",(0,c.jsx)(e.code,{children:"createApp({})"})," \u521b\u5efa\u65f6\u9700\u8981\u4f20\u5165\u4e00\u4e2a\u5bf9\u8c61\u3002\u6839\u7ec4\u4ef6\u662f Vue \u5e94\u7528\u6b63\u5e38\u6e32\u67d3\u7684\u57fa\u7840\u3002"]}),"\n",(0,c.jsx)(e.h2,{id:"mount",children:"mount"}),"\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"mount"})," \u65b9\u6cd5\u8fd4\u56de\u7684\u662f\u6839\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u800c\u4e0d\u662f\u5e94\u7528\u5b9e\u4f8b\u3002"]}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-javascript",children:"// \u8fd4\u56de\u7684\u662f\u6839\u7ec4\u4ef6\u5b9e\u4f8b\nconst vm = app.mount('#app');\n// \u5982\u679c HTML \u4e2d\u4f7f\u7528\u7684\u662f class\uff0c\u4e5f\u53ef\u4ee5\u8fd9\u6837\u6302\u8f7d\nconst vm = app.mount('.app');\n"})}),"\n",(0,c.jsx)(e.h2,{id:"vm-\u547d\u540d",children:"vm \u547d\u540d"}),"\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"Vue"})," \u5e76\u4e0d\u5b8c\u5168\u7b26\u5408 ",(0,c.jsx)(e.code,{children:"mvvm"})," \u6a21\u578b\uff0c\u4ec5\u53c2\u8003\u4e86\u5176\u4e2d\u7684 ",(0,c.jsx)(e.code,{children:"vm"}),"\uff08viewmodel\uff09\u90e8\u5206\u3002"]}),"\n",(0,c.jsx)(e.h1,{id:"\u6839\u5143\u7d20",children:"\u6839\u5143\u7d20"}),"\n",(0,c.jsxs)(e.p,{children:["\u6839\u5143\u7d20\u662f\u4e00\u4e2a ",(0,c.jsx)(e.code,{children:"HTML"})," \u5143\u7d20\u3002\u5f53\u6267\u884c ",(0,c.jsx)(e.code,{children:"createApp"})," \u521b\u5efa Vue \u5b9e\u4f8b\u65f6\uff0c\u9700\u8981\u6307\u5b9a\u4e00\u4e2a\u6839\u5143\u7d20\u3002\u56e0\u6b64\uff0c\u9700\u8981\u5728 HTML \u4e2d\u5305\u542b\u4e00\u4e2a\u7c7b\u4f3c ",(0,c.jsx)(e.code,{children:'
'})," \u7684\u5143\u7d20\u6765\u4f5c\u4e3a\u6839\u5143\u7d20\u3002"]}),"\n",(0,c.jsx)(e.h1,{id:"\u7ec4\u4ef6\u5b9e\u4f8b",children:"\u7ec4\u4ef6\u5b9e\u4f8b"}),"\n",(0,c.jsx)(e.p,{children:"\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u6709\u81ea\u5df1\u7684\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u4e00\u4e2a\u5e94\u7528\u4e2d\u7684\u6240\u6709\u7ec4\u4ef6\u5171\u4eab\u4e00\u4e2a\u5e94\u7528\u5b9e\u4f8b\u3002\u65e0\u8bba\u662f\u6839\u7ec4\u4ef6\u8fd8\u662f\u5176\u4ed6\u7ec4\u4ef6\uff0c\u914d\u7f6e\u9009\u9879\u548c\u7ec4\u4ef6\u884c\u4e3a\u90fd\u662f\u4e00\u81f4\u7684\u3002"}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-javascript",children:"const MyTitle = {\n template: `\n

\n \n

\n `,\n mounted() {\n console.log(this);\n },\n};\n\nconst MyAuthor = {\n template: `\n

\n Author:\n

\n `,\n};\nconst MyContent = {\n template: `\n

\n \n

\n `,\n};\n\nconst App = {\n components: {\n MyTitle,\n MyAuthor,\n MyContent,\n },\n data() {\n return {\n title: '\u6807\u9898',\n author: '\u4f5c\u8005',\n content: '\u8fd9\u662f\u5185\u5bb9',\n };\n },\n template: `\n
\n {{ title }}\n {{ author }}\n {{ content }}\n
\n `,\n};\n\nconst app = Vue.createApp(App);\n\nconst vm = app.mount('#app');\nconsole.log(vm);\n"})}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.img,{src:t(33254).A+"",width:"1560",height:"1228"})}),"\n",(0,c.jsxs)(e.p,{children:["\u7ec4\u4ef6\u5b9e\u4f8b\u53ef\u4ee5\u6dfb\u52a0\u81ea\u5b9a\u4e49\u5c5e\u6027\uff0c\u4f8b\u5982 ",(0,c.jsx)(e.code,{children:"property"}),"\u3002Vue \u4e3a\u7ec4\u4ef6\u5b9e\u4f8b\u81ea\u5b9a\u4e49\u6dfb\u52a0\u4e86\u4e00\u4e9b\u5c5e\u6027\uff0c\u5982 ",(0,c.jsx)(e.code,{children:"data"}),"\u3001",(0,c.jsx)(e.code,{children:"props"}),"\u3001",(0,c.jsx)(e.code,{children:"components"}),"\u3001",(0,c.jsx)(e.code,{children:"methods"})," \u7b49\u3002\u540c\u65f6\uff0c\u7ec4\u4ef6\u5b9e\u4f8b\u8fd8\u5305\u542b\u5185\u7f6e\u65b9\u6cd5\u5982 ",(0,c.jsx)(e.code,{children:"this.$attrs"})," \u548c ",(0,c.jsx)(e.code,{children:"this.$emit"}),"\u3002"]}),"\n",(0,c.jsx)(e.h1,{id:"\u751f\u547d\u5468\u671f\u51fd\u6570",children:"\u751f\u547d\u5468\u671f\u51fd\u6570"}),"\n",(0,c.jsxs)(e.p,{children:["\u7ec4\u4ef6\u5728\u521d\u59cb\u5316\u8fc7\u7a0b\u4e2d\u4f1a\u7ecf\u5386\u591a\u4e2a\u9636\u6bb5\uff0c",(0,c.jsx)(e.code,{children:"Vue"})," \u63d0\u4f9b\u4e86\u76f8\u5e94\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\uff0c\u8fd9\u4e9b\u51fd\u6570\u4f1a\u5728\u5bf9\u5e94\u7684\u521d\u59cb\u5316\u9636\u6bb5\u81ea\u52a8\u6267\u884c\u3002"]}),"\n",(0,c.jsx)(e.h2,{id:"\u521d\u59cb\u5316\u7684\u6574\u4e2a\u8fc7\u7a0b",children:"\u521d\u59cb\u5316\u7684\u6574\u4e2a\u8fc7\u7a0b"}),"\n",(0,c.jsxs)(e.p,{children:["\u8be6\u7ec6\u5185\u5bb9\u53ef\u53c2\u8003 ",(0,c.jsx)(e.a,{href:"https://staging-cn.vuejs.org/guide/essentials/lifecycle.html",children:"\u751f\u547d\u5468\u671f\u94a9\u5b50 | Vue.js"})]}),"\n",(0,c.jsx)(e.h2,{id:"\u865a\u62df\u8282\u70b9",children:"\u865a\u62df\u8282\u70b9"}),"\n",(0,c.jsx)(e.p,{children:"\u865a\u62df\u8282\u70b9\u7684\u5b58\u5728\u662f\u4e3a\u4e86\u4f18\u5316 DOM \u64cd\u4f5c\uff0c\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\u3002\u4f8b\u5982\uff1a"}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-javascript",children:"123;\nspan.innerText = 123;\n\n// \u76f4\u63a5\u64cd\u4f5c DOM \u4f1a\u5bfc\u81f4\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\n// \u4f7f\u7528\u865a\u62df DOM \u53ef\u4ee5\u907f\u514d\u8fd9\u79cd\u60c5\u51b5\n"})}),"\n",(0,c.jsx)(e.p,{children:"\u865a\u62df DOM \u901a\u8fc7\u5728\u5185\u5b58\u4e2d\u7ef4\u62a4\u4e00\u4e2a\u865a\u62df\u8282\u70b9\u6811\uff0c\u53ea\u6709\u5728\u5fc5\u8981\u65f6\u624d\u4f1a\u66f4\u65b0\u5b9e\u9645\u7684 DOM \u8282\u70b9\uff0c\u4ece\u800c\u63d0\u9ad8\u6027\u80fd\u3002"}),"\n",(0,c.jsx)(e.h2,{id:"\u793a\u4f8b\u4ee3\u7801",children:"\u793a\u4f8b\u4ee3\u7801"}),"\n",(0,c.jsx)(e.h3,{id:"indexhtml",children:(0,c.jsx)(e.code,{children:"index.html"})}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-html",children:'\n\n \n \n \n \n Vue \u5e94\u7528\u793a\u4f8b\n \x3c!-- - - + +
跳到主要内容

历史博文

历史博文

2021​

2019​

diff --git a/blog/authors/all-sebastien-lorber-articles/index.html b/blog/authors/all-sebastien-lorber-articles/index.html index de5a97f0..4f1e88a6 100644 --- a/blog/authors/all-sebastien-lorber-articles/index.html +++ b/blog/authors/all-sebastien-lorber-articles/index.html @@ -11,8 +11,8 @@ - - + +
跳到主要内容
Sébastien Lorber

Sébastien Lorber

Docusaurus maintainer
View All Authors

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git a/blog/authors/index.html b/blog/authors/index.html index f6e145d6..7dc3b327 100644 --- a/blog/authors/index.html +++ b/blog/authors/index.html @@ -11,8 +11,8 @@ - - + +

Authors

diff --git a/blog/authors/yangshun/index.html b/blog/authors/yangshun/index.html index e394ad6f..9b965847 100644 --- a/blog/authors/yangshun/index.html +++ b/blog/authors/yangshun/index.html @@ -11,8 +11,8 @@ - - + +
Yangshun Tay

Yangshun Tay

Front End Engineer @ Facebook
View All Authors

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 4fc400eb..5380622a 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -11,8 +11,8 @@ - - + +

First Blog Post

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Lorem ipsum dolor sit amet...

diff --git a/blog/index.html b/blog/index.html index 7b1e858b..bf86b31d 100644 --- a/blog/index.html +++ b/blog/index.html @@ -11,8 +11,8 @@ - - + +

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 98fac317..fdaeac9e 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -11,8 +11,8 @@ - - + +

Long Blog Post

· 阅读需 2 分钟
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

This is the summary of a very long blog post,

diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 24a1402b..0a767103 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -11,8 +11,8 @@ - - + +

MDX Blog Post

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer

Blog posts support Docusaurus Markdown features, such as MDX.

diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index e4bb3125..fd824e15 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -11,8 +11,8 @@ - - + +

4 篇博文 含有标签「Docusaurus」

Docusaurus tag description

查看所有标签

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index 88324c2b..f4315ee4 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -11,8 +11,8 @@ - - + +

1 篇博文 含有标签「Facebook」

Facebook tag description

查看所有标签

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 7e80ee38..e9def78e 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -11,8 +11,8 @@ - - + +

2 篇博文 含有标签「Hello」

Hello tag description

查看所有标签

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index 8dfdb053..de1c069a 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -11,8 +11,8 @@ - - + +

1 篇博文 含有标签「Hola」

Hola tag description

查看所有标签
diff --git a/blog/tags/index.html b/blog/tags/index.html index 486b7847..fed892ac 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -11,8 +11,8 @@ - - + +

标签

diff --git a/blog/welcome/index.html b/blog/welcome/index.html index adc9c420..df77c346 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -11,8 +11,8 @@ - - + +

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Yangshun Tay
Front End Engineer @ Facebook

Docusaurus blogging features are powered by the blog plugin.

diff --git "a/docs/Backend/Docker/Docker-\345\237\272\347\241\200\345\221\275\344\273\244/index.html" "b/docs/Backend/Docker/Docker-\345\237\272\347\241\200\345\221\275\344\273\244/index.html" index 6d97ab5b..bb64fba8 100644 --- "a/docs/Backend/Docker/Docker-\345\237\272\347\241\200\345\221\275\344\273\244/index.html" +++ "b/docs/Backend/Docker/Docker-\345\237\272\347\241\200\345\221\275\344\273\244/index.html" @@ -11,8 +11,8 @@ - - + +

Docker 常用命令详解

@@ -101,6 +101,6 @@

常 
docker load -i my-nginx-image.tar

将导出的镜像文件加载到本地，快速恢复或部署镜像。

最佳实践

-

定期检查和清理未使用的 Docker 资源，防止磁盘空间不足。使用自动化脚本管理镜像和容器，提升运维效率。

编辑此页
最后由 sumingcheng 于 更新
+

定期检查和清理未使用的 Docker 资源，防止磁盘空间不足。使用自动化脚本管理镜像和容器，提升运维效率。

编辑此页
最后由 sumingcheng 于 更新
\ No newline at end of file diff --git "a/docs/Backend/Docker/Docker-\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" "b/docs/Backend/Docker/Docker-\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" index 10caaff2..a62c4514 100644 --- "a/docs/Backend/Docker/Docker-\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" +++ "b/docs/Backend/Docker/Docker-\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +

Docker 和相关工具的安装与使用

@@ -166,6 +166,6 @@

启动 Jenkins 容器​

docker run -d \
  --hostname jenkins \
  -p 20006:8080 -p 50000:50000 \
  --name jenkins \
  --restart always \
  -v /srv/jenkins:/var/jenkins_home \
  jenkins/jenkins

最佳实践

-

为 Jenkins 配置持久化存储卷，确保构建数据和配置的持久性。限制 Jenkins 的资源使用，避免占用过多系统资源影响其他服务。

编辑此页
最后由 sumingcheng 于 更新
+

为 Jenkins 配置持久化存储卷，确保构建数据和配置的持久性。限制 Jenkins 的资源使用，避免占用过多系统资源影响其他服务。

编辑此页
最后由 sumingcheng 于 更新
\ No newline at end of file diff --git "a/docs/Backend/ElasticSearch/ElasticSearch-\345\256\211\350\243\205\344\275\277\347\224\250/index.html" "b/docs/Backend/ElasticSearch/ElasticSearch-\345\256\211\350\243\205\344\275\277\347\224\250/index.html" index 9536179a..57aef176 100644 --- "a/docs/Backend/ElasticSearch/ElasticSearch-\345\256\211\350\243\205\344\275\277\347\224\250/index.html" +++ "b/docs/Backend/ElasticSearch/ElasticSearch-\345\256\211\350\243\205\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +

ElasticSearch-安装使用

@@ -75,6 +75,6 @@

编辑此页
最后由 sumingcheng 于 更新

+
编辑此页
最后由 sumingcheng 于 更新
\ No newline at end of file diff --git "a/docs/Backend/Git/Git-\346\217\220\344\272\244\350\247\204\350\214\203/index.html" "b/docs/Backend/Git/Git-\346\217\220\344\272\244\350\247\204\350\214\203/index.html" index 10f26885..76c30d4a 100644 --- "a/docs/Backend/Git/Git-\346\217\220\344\272\244\350\247\204\350\214\203/index.html" +++ "b/docs/Backend/Git/Git-\346\217\220\344\272\244\350\247\204\350\214\203/index.html" @@ -11,8 +11,8 @@ - - + +

Git-提交规范

类型类别说明
featproduction新增功能
fixproductionbug 修复
perfproduction提高代码性能变更
styledevelopment代码格式变更
refactorproduction其他代码类变更，例如简化代码、重命名、删除
testdevelopment新增测试用例，或是现有的测试用例
cidevelopmentCI/CD 修改
docsdevelopment文档类的更新，包括修改用户文档或者开发文档
choredevelopment其他类型，依赖管理、辅助工具变动等
@@ -22,6 +22,6 @@

非开

开源项目​

-

编辑此页
最后由 sumingcheng 于 更新
+

编辑此页
最后由 sumingcheng 于 更新
\ No newline at end of file diff --git "a/docs/Backend/Git/\350\247\243\345\206\263 husky8.0 \351\222\251\345\255\220\344\270\215\350\247\246\345\217\221/index.html" "b/docs/Backend/Git/\350\247\243\345\206\263 husky8.0 \351\222\251\345\255\220\344\270\215\350\247\246\345\217\221/index.html" index 988526b3..8d979185 100644 --- "a/docs/Backend/Git/\350\247\243\345\206\263 husky8.0 \351\222\251\345\255\220\344\270\215\350\247\246\345\217\221/index.html" +++ "b/docs/Backend/Git/\350\247\243\345\206\263 husky8.0 \351\222\251\345\255\220\344\270\215\350\247\246\345\217\221/index.html" @@ -11,8 +11,8 @@ - - + +

解决 husky8.0 钩子不触发

@@ -51,6 +51,6 @@

  • 查看其他可能的冲突： 如果您的项目中使用了其他的Git钩子工具，如pre-commit或commitizen，确保它们与husky没有冲突。

    • -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Backend/Go/Gin/Gin\346\241\206\346\236\266/index.html" "b/docs/Backend/Go/Gin/Gin\346\241\206\346\236\266/index.html" index 331c6bf1..d4be10a4 100644 --- "a/docs/Backend/Go/Gin/Gin\346\241\206\346\236\266/index.html" +++ "b/docs/Backend/Go/Gin/Gin\346\241\206\346\236\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用 Gin 框架构建 Go 应用程序

    @@ -82,6 +82,6 @@

    可以添加更多的路由来处理不同的请求。例如，添加一个 /hello 路由：

    router.GET("/hello", func(c *gin.Context) {
    	c.JSON(http.StatusOK, gin.H{
    		"message": "Hello, sumingcheng!",
    	})
    })

    总结​

    -

    通过以上步骤，我们成功地使用 Gin 框架构建了一个简单的 Go 应用程序，并了解了日志中的常见提示信息。记得在生产环境中调整配置，提高应用程序的性能和安全性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过以上步骤，我们成功地使用 Gin 框架构建了一个简单的 Go 应用程序，并了解了日志中的常见提示信息。记得在生产环境中调整配置，提高应用程序的性能和安全性。

    \ No newline at end of file diff --git a/docs/Backend/Go/Gin/PureJSON-Protobuf/index.html b/docs/Backend/Go/Gin/PureJSON-Protobuf/index.html index 50bf7fe9..17aad58f 100644 --- a/docs/Backend/Go/Gin/PureJSON-Protobuf/index.html +++ b/docs/Backend/Go/Gin/PureJSON-Protobuf/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JSON、PureJSON 和 Protobuf 的比较与实践

    @@ -55,6 +55,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/Gin/Validator\345\244\232\350\257\255\350\250\200\347\277\273\350\257\221/index.html" "b/docs/Backend/Go/Gin/Validator\345\244\232\350\257\255\350\250\200\347\277\273\350\257\221/index.html" index 376a5b2c..eca8e10d 100644 --- "a/docs/Backend/Go/Gin/Validator\345\244\232\350\257\255\350\250\200\347\277\273\350\257\221/index.html" +++ "b/docs/Backend/Go/Gin/Validator\345\244\232\350\257\255\350\250\200\347\277\273\350\257\221/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    go-playground/validator Translations 示例

    \ No newline at end of file diff --git "a/docs/Backend/Go/Gin/Web\345\256\211\345\205\250\344\270\216\350\257\267\346\261\202/index.html" "b/docs/Backend/Go/Gin/Web\345\256\211\345\205\250\344\270\216\350\257\267\346\261\202/index.html" index d7b8b2a3..060a4bd9 100644 --- "a/docs/Backend/Go/Gin/Web\345\256\211\345\205\250\344\270\216\350\257\267\346\261\202/index.html" +++ "b/docs/Backend/Go/Gin/Web\345\256\211\345\205\250\344\270\216\350\257\267\346\261\202/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Web 安全中的复杂请求和攻击防范

    @@ -41,6 +41,6 @@

    避

    双重提交 Cookie

    使用 Cookie 中的值与表单中的值进行比较，来验证请求的来源。

    自定义请求头

    -

    在 AJAX 请求中添加一个自定义请求头，并在服务器端验证这个头。由于非简单请求（即跨域请求）会触发预检请求，这可以防止恶意站点发起伪造的请求。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在 AJAX 请求中添加一个自定义请求头，并在服务器端验证这个头。由于非简单请求（即跨域请求）会触发预检请求，这可以防止恶意站点发起伪造的请求。

    \ No newline at end of file diff --git "a/docs/Backend/Go/Gin/\344\270\255\351\227\264\344\273\266\345\222\214\350\267\257\347\224\261\345\210\206\347\273\204/index.html" "b/docs/Backend/Go/Gin/\344\270\255\351\227\264\344\273\266\345\222\214\350\267\257\347\224\261\345\210\206\347\273\204/index.html" index ac005e74..aeba53c0 100644 --- "a/docs/Backend/Go/Gin/\344\270\255\351\227\264\344\273\266\345\222\214\350\267\257\347\224\261\345\210\206\347\273\204/index.html" +++ "b/docs/Backend/Go/Gin/\344\270\255\351\227\264\344\273\266\345\222\214\350\267\257\347\224\261\345\210\206\347\273\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Gin 框架中的中间件和路由分组

    @@ -40,6 +40,6 @@

    最佳实
  • 合理使用中间件，将通用功能抽象出来，提升代码复用性。
  • 对功能相似的路由进行分组，清晰明了。
  • 变量名应易于理解，提升代码可读性。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/Gin/\346\225\260\346\215\256\347\273\221\345\256\232\346\226\271\346\263\225/index.html" "b/docs/Backend/Go/Gin/\346\225\260\346\215\256\347\273\221\345\256\232\346\226\271\346\263\225/index.html" index 42bd6265..99f23a88 100644 --- "a/docs/Backend/Go/Gin/\346\225\260\346\215\256\347\273\221\345\256\232\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Go/Gin/\346\225\260\346\215\256\347\273\221\345\256\232\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Gin 框架中的数据绑定方法详解

    @@ -44,6 +44,6 @@

    Gin 框架还支持对请求头进行绑定和校验，使用 ShouldBindHeader 方法。下面是一个示例：

    package main

    import (
        "github.com/gin-gonic/gin"
        "github.com/go-playground/validator/v10"
        "net/http"
    )

    // 创建验证器实例
    var validate = validator.New()

    type HeaderInfo struct {
        ContentType string `header:"Content-Type" validate:"required"` // 必须是 JSON 类型
        UserAgent   string `header:"User-Agent" validate:"required"`
    }

    func main() {
        router := gin.Default()

        router.GET("/test", func(c *gin.Context) {
            var headerInfo HeaderInfo
            if err := c.ShouldBindHeader(&headerInfo); err != nil {
                c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
                return
            }

            // 验证请求头
            if err := validate.Struct(headerInfo); err != nil {
                c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
                return
            }

            c.JSON(http.StatusOK, gin.H{
                "Content-Type": headerInfo.ContentType,
                "User-Agent":   headerInfo.UserAgent,
            })
        })

        router.Run(":8888")
    }

    在这个示例中，我创建了一个 HeaderInfo 结构体，用于绑定和校验请求头中的 Content-Type 和 User-Agent。使用 ShouldBindHeader 方法将请求头绑定到结构体实例，然后使用 validator 对结构体进行校验。如果校验通过，返回请求头的信息给客户端。

    -

    注意，在使用 validator 时，要确保字段上正确设置了 validate 标签，并根据需要定义校验规则。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    注意，在使用 validator 时，要确保字段上正确设置了 validate 标签，并根据需要定义校验规则。

    \ No newline at end of file diff --git "a/docs/Backend/Go/Gin/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html" "b/docs/Backend/Go/Gin/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html" index d0c01fcc..8a7996e2 100644 --- "a/docs/Backend/Go/Gin/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html" +++ "b/docs/Backend/Go/Gin/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言中的路径处理与重定向

    @@ -55,6 +55,6 @@

    注意事
  • 302 临时重定向：适用于资源临时移动，浏览器不会缓存，方便后续修改重定向路径。
  • 禁止缓存：在使用 301 重定向时，如需防止缓存，需手动添加 Cache-Control 响应头。
    • -

    通过合理使用重定向状态码和响应头，可以更好地控制资源的访问和导航。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过合理使用重定向状态码和响应头，可以更好地控制资源的访问和导航。

    \ No newline at end of file diff --git "a/docs/Backend/Go/Protobuf/Protobuf-\347\274\226\347\240\201\345\216\237\347\220\206/index.html" "b/docs/Backend/Go/Protobuf/Protobuf-\347\274\226\347\240\201\345\216\237\347\220\206/index.html" index ef147d03..33b48b51 100644 --- "a/docs/Backend/Go/Protobuf/Protobuf-\347\274\226\347\240\201\345\216\237\347\220\206/index.html" +++ "b/docs/Backend/Go/Protobuf/Protobuf-\347\274\226\347\240\201\345\216\237\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Protobuf 原理与编码方法

    @@ -101,6 +101,6 @@

    数

    解码过程​

    接收方解析步骤如下。首先，读取 0x01，确定数据类型为整数。接着，读取 0x01，确定值长度为 1 字节。然后，读取 0x1C，得到年龄 28。接下来，读取 0x02，确定数据类型为字符串。随后，读取 0x05，确定值长度为 5 字节。最后，读取接下来的 5 个字节，得到姓名 "Alice"。

    通过类型和长度字段，接收方能够正确解析数据，即使不知道具体的数据项内容。

    -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/Protobuf/ProtocolBuffers\345\222\214gRPC\347\224\237\346\210\220\344\273\243\347\240\201/index.html" "b/docs/Backend/Go/Protobuf/ProtocolBuffers\345\222\214gRPC\347\224\237\346\210\220\344\273\243\347\240\201/index.html" index 5f1ac5c0..bd3a3bc8 100644 --- "a/docs/Backend/Go/Protobuf/ProtocolBuffers\345\222\214gRPC\347\224\237\346\210\220\344\273\243\347\240\201/index.html" +++ "b/docs/Backend/Go/Protobuf/ProtocolBuffers\345\222\214gRPC\347\224\237\346\210\220\344\273\243\347\240\201/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/Protobuf/gRPC-\345\256\236\347\216\260\346\265\201\347\250\213/index.html" "b/docs/Backend/Go/Protobuf/gRPC-\345\256\236\347\216\260\346\265\201\347\250\213/index.html" index f9270122..b2bde3db 100644 --- "a/docs/Backend/Go/Protobuf/gRPC-\345\256\236\347\216\260\346\265\201\347\250\213/index.html" +++ "b/docs/Backend/Go/Protobuf/gRPC-\345\256\236\347\216\260\346\265\201\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/Protobuf/grpc-\346\225\260\347\273\204\345\222\214-map/index.html" "b/docs/Backend/Go/Protobuf/grpc-\346\225\260\347\273\204\345\222\214-map/index.html" index 35bc58a5..b09690f6 100644 --- "a/docs/Backend/Go/Protobuf/grpc-\346\225\260\347\273\204\345\222\214-map/index.html" +++ "b/docs/Backend/Go/Protobuf/grpc-\346\225\260\347\273\204\345\222\214-map/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用 Protocol Buffers 和 gRPC 构建课程服务

    @@ -43,6 +43,6 @@

    注意事
  • 代码优化：使用易读的变量名，如将 Course 改为 CourseService，提高代码可读性。
  • 版本管理：使用 Go Modules 管理依赖，确保包版本的稳定性。
  • 协议编译：建议将编译命令写入脚本或 Makefile，方便后续维护。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/Protobuf/\345\265\214\345\245\227\347\232\204-message/index.html" "b/docs/Backend/Go/Protobuf/\345\265\214\345\245\227\347\232\204-message/index.html" index d8ad05f4..e797fdcf 100644 --- "a/docs/Backend/Go/Protobuf/\345\265\214\345\245\227\347\232\204-message/index.html" +++ "b/docs/Backend/Go/Protobuf/\345\265\214\345\245\227\347\232\204-message/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用 Protocol Buffers 定义和访问嵌套消息

    @@ -48,6 +48,6 @@

    注意事
  • 导入路径：在使用生成的 Go 代码时，需要确保导入路径正确，替换为实际的包路径。
  • 代码生成：修改 .proto 文件后，需要重新生成对应的 Go 代码，以确保代码与定义同步。
  • 版本兼容性：在使用第三方库时，要注意版本的兼容性，避免由于版本差异导致的问题。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/gRPC/GRPC\345\256\236\347\216\260TodoList/index.html" "b/docs/Backend/Go/gRPC/GRPC\345\256\236\347\216\260TodoList/index.html" index a3f97de2..6acccd16 100644 --- "a/docs/Backend/Go/gRPC/GRPC\345\256\236\347\216\260TodoList/index.html" +++ "b/docs/Backend/Go/gRPC/GRPC\345\256\236\347\216\260TodoList/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    编辑此页
    最后由 sumingcheng 于 更新
    +
    2023/10/10 12:00:00 Todo ID 1 内容 测试代办事项
    \ No newline at end of file diff --git "a/docs/Backend/Go/gRPC/gRPC-\345\237\272\347\241\200\347\237\245\350\257\206/index.html" "b/docs/Backend/Go/gRPC/gRPC-\345\237\272\347\241\200\347\237\245\350\257\206/index.html" index be4e0f60..fd5a8ba2 100644 --- "a/docs/Backend/Go/gRPC/gRPC-\345\237\272\347\241\200\347\237\245\350\257\206/index.html" +++ "b/docs/Backend/Go/gRPC/gRPC-\345\237\272\347\241\200\347\237\245\350\257\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    深入理解 HTTP、gRPC 与数据格式

    @@ -27,6 +27,6 @@

    支持语

    Protocol Buffers (Protobuf) 和 JSON 对比​

    在数据序列化方面，我比较了 Protocol Buffers（Protobuf）和 JSON，发现两者在多个方面有明显的区别：

    -
    特性ProtobufJSON
    格式二进制文本
    大小较小，二进制格式较大，尤其在数据结构复杂时
    可读性需要解析器和 .proto 文件人类可读，易于理解
    序列化速度快，二进制格式慢，文本格式
    解析速度快，解析过程简化慢，需要解析文本
    语言支持多种语言，需 .proto 文件生成代码几乎所有语言都有原生支持
    数据定义严格，需先定义 .proto 文件灵活，无严格结构要求
    兼容性考虑向后和向前兼容性兼容性取决于实现
    网络传输效率高效，数据更小低效，尤其在带宽受限时
    易于调试需要工具查看二进制数据，复杂直接可读，易于调试
    扩展性易于更新和扩展，不破坏现有代码扩展可能需要重构
    编辑此页
    最后由 sumingcheng 于 更新
    +
    特性ProtobufJSON
    格式二进制文本
    大小较小，二进制格式较大，尤其在数据结构复杂时
    可读性需要解析器和 .proto 文件人类可读，易于理解
    序列化速度快，二进制格式慢，文本格式
    解析速度快，解析过程简化慢，需要解析文本
    语言支持多种语言，需 .proto 文件生成代码几乎所有语言都有原生支持
    数据定义严格，需先定义 .proto 文件灵活，无严格结构要求
    兼容性考虑向后和向前兼容性兼容性取决于实现
    网络传输效率高效，数据更小低效，尤其在带宽受限时
    易于调试需要工具查看二进制数据，复杂直接可读，易于调试
    扩展性易于更新和扩展，不破坏现有代码扩展可能需要重构
    \ No newline at end of file diff --git "a/docs/Backend/Go/gRPC/gRPC\345\272\224\347\224\250/index.html" "b/docs/Backend/Go/gRPC/gRPC\345\272\224\347\224\250/index.html" index 667df6f0..98d74e65 100644 --- "a/docs/Backend/Go/gRPC/gRPC\345\272\224\347\224\250/index.html" +++ "b/docs/Backend/Go/gRPC/gRPC\345\272\224\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    在 Windows 上使用 Go 语言开发 gRPC 应用

    @@ -64,6 +64,6 @@

    注意事

    如果遇到任何问题，可以参考官方文档或社区资源进行排查。

    -

    💡 使用易于理解的变量名和清晰的代码结构，可以提高代码的可读性和维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    💡 使用易于理解的变量名和清晰的代码结构，可以提高代码的可读性和维护性。

    \ No newline at end of file diff --git "a/docs/Backend/Go/gRPC\351\253\230\347\272\247/Go-metadata/index.html" "b/docs/Backend/Go/gRPC\351\253\230\347\272\247/Go-metadata/index.html" index 6da20992..d77bd7fa 100644 --- "a/docs/Backend/Go/gRPC\351\253\230\347\272\247/Go-metadata/index.html" +++ "b/docs/Backend/Go/gRPC\351\253\230\347\272\247/Go-metadata/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言中的 Metadata 应用详解

    @@ -42,6 +42,6 @@

    使用 Go 操作 Kubernetes Metadata​

    import (
        "context"
        metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
        "k8s.io/client-go/kubernetes"
        "k8s.io/client-go/tools/clientcmd"
    )

    config, err := clientcmd.BuildConfigFromFlags("", "path/to/kubeconfig")
    clientset, err := kubernetes.NewForConfig(config)

    pod := &v1.Pod{
        ObjectMeta: metav1.ObjectMeta{
            Name: "my-app-pod",
            Labels: map[string]string{
                "app":  "my-app",
                "tier": "frontend",
            },
        },
        Spec: v1.PodSpec{
            Containers: []v1.Container{
                {
                    Name:  "app-container",
                    Image: "my-app-image",
                },
            },
        },
    }

    clientset.CoreV1().Pods("default").Create(context.TODO(), pod, metav1.CreateOptions{})
    -

    通过为 Kubernetes 资源添加标签与注解我可以在后续运维中基于标签选择特定资源进行扩缩容、更新和故障排查。命名与标记规范能降低管理难度并提升集群可维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过为 Kubernetes 资源添加标签与注解我可以在后续运维中基于标签选择特定资源进行扩缩容、更新和故障排查。命名与标记规范能降低管理难度并提升集群可维护性。

    \ No newline at end of file diff --git "a/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\345\256\242\346\210\267\347\253\257\346\213\246\346\210\252\345\231\250/index.html" "b/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\345\256\242\346\210\267\347\253\257\346\213\246\346\210\252\345\231\250/index.html" index 0e78355c..59550c41 100644 --- "a/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\345\256\242\346\210\267\347\253\257\346\213\246\346\210\252\345\231\250/index.html" +++ "b/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\345\256\242\346\210\267\347\253\257\346\213\246\346\210\252\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    gRPC 客户端拦截器实现请求超时控制

    @@ -29,6 +29,6 @@ 

    func ensureTimeout(ctx context.Context, timeout time.Duration) (context.Context, context.CancelFunc) {
        if _, ok := ctx.Deadline(); !ok {
            return context.WithTimeout(ctx, timeout)
        }
        return ctx, nil
    }

    gRPC 拦截器的应用​

    通过在 gRPC 客户端中实现超时控制拦截器，可以确保服务的健壮性和响应性。这种模式特别适用于构建分布式系统，网络延迟和服务不可用可能导致客户端请求长时间挂起，影响用户体验。

    -

    此外，gRPC 拦截器的灵活性使得开发者能够轻松地插入自定义逻辑，例如认证、日志记录和监控等，进一步提高了服务的可维护性和可扩展性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    此外，gRPC 拦截器的灵活性使得开发者能够轻松地插入自定义逻辑，例如认证、日志记录和监控等，进一步提高了服务的可维护性和可扩展性。

    \ No newline at end of file diff --git "a/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\346\234\215\345\212\241\347\253\257\346\213\246\346\210\252\345\231\250/index.html" "b/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\346\234\215\345\212\241\347\253\257\346\213\246\346\210\252\345\231\250/index.html" index 5403f677..176b75e9 100644 --- "a/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\346\234\215\345\212\241\347\253\257\346\213\246\346\210\252\345\231\250/index.html" +++ "b/docs/Backend/Go/gRPC\351\253\230\347\272\247/gRPC\346\234\215\345\212\241\347\253\257\346\213\246\346\210\252\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 中实现 gRPC 服务端拦截器

    @@ -45,6 +45,6 @@

    如何确保拦截器的高质量实现​

    我在编写拦截器时要避免在其中写入阻塞性逻辑或耗时过长的操作，以免影响请求处理效率。日志和认证检查通常是快速执行的操作，可使用缓存或预解析策略提升性能。对于错误处理，建议将服务端错误统一转换为 gRPC 状态码，并在拦截器中实现标准化的错误返回。对于日志拦截器，可结合结构化日志工具记录详细信息，以便后续追踪请求调用链路和分析问题。

    在实际生产环境中，如果我需要动态启用或禁用某些拦截逻辑，可在拦截器中添加可配置参数或全局控制变量，从而灵活控制其行为。
    -同样在验证令牌时可结合外部认证系统，以微服务方式独立实现权限模块，再在拦截器中调用该认证服务，从而实现更高的灵活性和扩展性。

    编辑此页
    最后由 sumingcheng 于 更新
    +同样在验证令牌时可结合外部认证系统，以微服务方式独立实现权限模块，再在拦截器中调用该认证服务，从而实现更高的灵活性和扩展性。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\207\275\346\225\260/\345\207\275\346\225\260\347\232\204\345\237\272\347\241\200/index.html" "b/docs/Backend/Go/\345\207\275\346\225\260/\345\207\275\346\225\260\347\232\204\345\237\272\347\241\200/index.html" index 9b42f8ce..0335dc0d 100644 --- "a/docs/Backend/Go/\345\207\275\346\225\260/\345\207\275\346\225\260\347\232\204\345\237\272\347\241\200/index.html" +++ "b/docs/Backend/Go/\345\207\275\346\225\260/\345\207\275\346\225\260\347\232\204\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 函数的基础

    @@ -70,6 +70,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\207\275\346\225\260/\345\244\215\346\235\202\345\207\275\346\225\260\347\261\273\345\236\213\343\200\201\351\227\255\345\214\205\344\270\216\351\200\203\351\200\270\345\210\206\346\236\220/index.html" "b/docs/Backend/Go/\345\207\275\346\225\260/\345\244\215\346\235\202\345\207\275\346\225\260\347\261\273\345\236\213\343\200\201\351\227\255\345\214\205\344\270\216\351\200\203\351\200\270\345\210\206\346\236\220/index.html" index 01971019..30d4e8b1 100644 --- "a/docs/Backend/Go/\345\207\275\346\225\260/\345\244\215\346\235\202\345\207\275\346\225\260\347\261\273\345\236\213\343\200\201\351\227\255\345\214\205\344\270\216\351\200\203\351\200\270\345\210\206\346\236\220/index.html" +++ "b/docs/Backend/Go/\345\207\275\346\225\260/\345\244\215\346\235\202\345\207\275\346\225\260\347\261\273\345\236\213\343\200\201\351\227\255\345\214\205\344\270\216\351\200\203\351\200\270\345\210\206\346\236\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 复杂函数类型、闭包与逃逸分析

    @@ -67,6 +67,6 @@

    注意事
  • 在使用闭包时，注意变量的作用域和生命周期，避免出现意外的变量修改。
  • 使用逃逸分析工具，可以帮助优化程序的内存使用，提高性能。
  • 在定义复杂函数类型时，优化变量名和函数名，提高代码的可读性。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\207\275\346\225\260/\347\261\273\345\236\213\345\222\214\346\263\233\345\236\213/index.html" "b/docs/Backend/Go/\345\207\275\346\225\260/\347\261\273\345\236\213\345\222\214\346\263\233\345\236\213/index.html" index 747f0abe..3a469766 100644 --- "a/docs/Backend/Go/\345\207\275\346\225\260/\347\261\273\345\236\213\345\222\214\346\263\233\345\236\213/index.html" +++ "b/docs/Backend/Go/\345\207\275\346\225\260/\347\261\273\345\236\213\345\222\214\346\263\233\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 泛型、方法和自定义类型

    @@ -58,6 +58,6 @@

    注意事
  • 在使用泛型时，确保类型约束合理，避免不必要的类型转换。
  • 定义方法时，注意接收者类型是否为指针，指针接收者可以修改接收者的值。
  • 在并发情况下使用闭包，需要注意数据的同步，必要时使用互斥锁等同步机制。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\207\275\346\225\260/\351\224\231\350\257\257\345\244\204\347\220\206/index.html" "b/docs/Backend/Go/\345\207\275\346\225\260/\351\224\231\350\257\257\345\244\204\347\220\206/index.html" index 10bd300f..c0fa933a 100644 --- "a/docs/Backend/Go/\345\207\275\346\225\260/\351\224\231\350\257\257\345\244\204\347\220\206/index.html" +++ "b/docs/Backend/Go/\345\207\275\346\225\260/\351\224\231\350\257\257\345\244\204\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言的错误处理

    @@ -52,6 +52,6 @@

    注意事
  • 合理使用 panic 和 recover：仅在不可恢复的错误情况下使用 panic，避免滥用。
  • 资源释放：使用 defer 确保文件、数据库连接等资源被正确释放。
  • 错误信息清晰：返回错误时，添加有意义的上下文信息，方便排查问题。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/GoLang\350\257\255\350\250\200\347\232\204\345\217\221\345\261\225\344\270\216\347\211\271\347\202\271/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/GoLang\350\257\255\350\250\200\347\232\204\345\217\221\345\261\225\344\270\216\347\211\271\347\202\271/index.html" index 01cd62bf..e296f9a3 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/GoLang\350\257\255\350\250\200\347\232\204\345\217\221\345\261\225\344\270\216\347\211\271\347\202\271/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/GoLang\350\257\255\350\250\200\347\232\204\345\217\221\345\261\225\344\270\216\347\211\271\347\202\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言的发展与特点

    @@ -58,6 +58,6 @@

    编

    应用领域​

    Go 在云计算、微服务、网络编程和数据科学等领域得到了广泛应用。许多知名项目，如 Docker、Kubernetes 和 Terraform，都是用 Go 编写的。

    注意事项​

    -

    在使用 Go 语言时，应注意充分利用其并发特性，编写高效的程序。同时，遵循 Go 的最佳实践和代码风格指南，确保代码的可读性和可维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在使用 Go 语言时，应注意充分利用其并发特性，编写高效的程序。同时，遵循 Go 的最佳实践和代码风格指南，确保代码的可读性和可维护性。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\217\230\351\207\217/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\217\230\351\207\217/index.html" index 1ea6a381..cdc9b976 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\217\230\351\207\217/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\217\230\351\207\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 变量

    @@ -39,6 +39,6 @@

    指针可见性通过命名控制​

    Go 通过标识符的命名来控制可见性。首字母大写的变量或函数在外部包中可见（公有的），首字母小写的则仅在包内可见（私有的）。这一规则简单明了，避免了额外的关键字。

    不支持自动全局变量​

    -

    在 Go 中，所有变量都必须显式声明，未声明直接使用会导致编译错误。这与 JavaScript 不同，在 JavaScript 中，如果忘记了 var、let 或 const，变量会自动成为全局变量。Go 的这种设计提高了代码的安全性，避免了意外的全局变量。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在 Go 中，所有变量都必须显式声明，未声明直接使用会导致编译错误。这与 JavaScript 不同，在 JavaScript 中，如果忘记了 var、let 或 const，变量会自动成为全局变量。Go 的这种设计提高了代码的安全性，避免了意外的全局变量。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\270\270\351\207\217/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\270\270\351\207\217/index.html" index 1b294657..112ac7bb 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\270\270\351\207\217/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/Go\350\257\255\350\250\200\347\232\204\345\270\270\351\207\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 常量

    @@ -39,6 +39,6 @@ 

    const (
    	x = 10
    	y         // y == 10
    	z = 20
    	w         // w == 20
    )

    在这个例子中，y 将与 x 相同，w 将与 z 相同。

    -

    在使用常量时，我会注意以上这些特点，确保代码的正确性和可读性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在使用常量时，我会注意以上这些特点，确保代码的正确性和可读性。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/for-range\345\222\214goto/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/for-range\345\222\214goto/index.html" index ec748995..37602457 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/for-range\345\222\214goto/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/for-range\345\222\214goto/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go for range 和 goto

    @@ -31,6 +31,6 @@

    goto
    编辑此页
    最后由 sumingcheng 于 更新

    +

    在遍历映射时，需要注意映射的遍历顺序是不确定的。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/package\345\222\214import/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/package\345\222\214import/index.html" index 18f79325..9e2116f6 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/package\345\222\214import/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/package\345\222\214import/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go package 和 import

    @@ -75,6 +75,6 @@ 

    .
    ├── proto
    │   ├── user.proto
    │   └── order.proto
    └── main.go

    可以使用以下命令编译所有 .proto 文件。

    protoc -I . ./proto/*.proto --go_out=plugins=grpc:./pb/
    -

    这样，所有的生成文件都会放在 pb 目录下，方便在代码中导入和使用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这样，所有的生成文件都会放在 pb 目录下，方便在代码中导入和使用。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/rune\347\261\273\345\236\213/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/rune\347\261\273\345\236\213/index.html" index fe7ba29f..c879e25d 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/rune\347\261\273\345\236\213/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/rune\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go rune 类型

    @@ -40,6 +40,6 @@

    字符处

    类型安全​

    通过 rune 类型，代码更清晰地表达了正在处理字符而非整数值，增强了类型安全性。

    标准库集成​

    -

    Go 的标准库提供了许多针对 rune 类型的函数和方法，使字符处理更加容易和高效。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Go 的标准库提供了许多针对 rune 类型的函数和方法，使字符处理更加容易和高效。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\345\210\244\346\226\255\350\257\255\345\217\245/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\345\210\244\346\226\255\350\257\255\345\217\245/index.html" index 87bfd424..4ab95f81 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\345\210\244\346\226\255\350\257\255\345\217\245/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\345\210\244\346\226\255\350\257\255\345\217\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 条件判断

    @@ -41,6 +41,6 @@

    多重匹 
    func main() {
        checkScore(90)
        checkScore(80)
        checkScore(70)
    }

    func checkScore(score int) {
        switch {
        case score >= 90, score >= 80, score >= 70:
            fmt.Println("A级")
        default:
            fmt.Println("D级")
        }
    }

    在这个示例中，case 条件包含了多个表达式，任何一个表达式为 true，都会执行对应的代码块。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\345\221\275\344\273\244\344\270\216\345\207\275\346\225\260\344\275\277\347\224\250/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\345\221\275\344\273\244\344\270\216\345\207\275\346\225\260\344\275\277\347\224\250/index.html" index cc81b46f..81ff7e93 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\345\221\275\344\273\244\344\270\216\345\207\275\346\225\260\344\275\277\347\224\250/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\345\221\275\344\273\244\344\270\216\345\207\275\346\225\260\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 命令与函数使用

    @@ -68,6 +68,6 @@

    使用函

    在打印信息时，我通常使用 fmt.Println，因为它的行为明确且一致，适合生产环境。

    println 主要用于调试阶段，我不推荐在生产代码中使用它，因为其实现可能因系统和 Go 版本而异。

    下面是我演示如何使用前面定义的 calculator 包中的函数：

    -
    package main

    import (
    	"Go-Learning/calculator"
    	"fmt"
    )

    func main() {
    	fmt.Println("计算器")
    	var result int = calculator.Plus(1, 2)
    	fmt.Println(result)

    	// println 和 fmt.Println 有区别
    	var result2 int = calculator.Multiply(1, 2)
    	println(result2) // println 不推荐在生产环境中使用

    	// 类型推断会推断出 result3 的类型，所以不用定义类型
    	result3 := calculator.Divide(1, 2)
    	fmt.Println(result3)

    	// sumingcheng
    }

    编辑此页
    最后由 sumingcheng 于 更新
    +
    package main

    import (
    	"Go-Learning/calculator"
    	"fmt"
    )

    func main() {
    	fmt.Println("计算器")
    	var result int = calculator.Plus(1, 2)
    	fmt.Println(result)

    	// println 和 fmt.Println 有区别
    	var result2 int = calculator.Multiply(1, 2)
    	println(result2) // println 不推荐在生产环境中使用

    	// 类型推断会推断出 result3 的类型，所以不用定义类型
    	result3 := calculator.Divide(1, 2)
    	fmt.Println(result3)

    	// sumingcheng
    }
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\345\244\204\347\220\206/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\345\244\204\347\220\206/index.html" index 38fa4e4d..cf388cad 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\345\244\204\347\220\206/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\345\244\204\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 字符串处理

    @@ -35,6 +35,6 @@

    转义字

    在 Go 语言中，字符串可以使用转义字符来表示特殊字符。常用的转义字符如下：

    转义序列含义示例
    \n换行符fmt.Println("Hello\nWorld")
    \r回车符fmt.Println("Hello\rWorld")
    \t制表符（水平）fmt.Println("Hello\tWorld")
    \'单引号fmt.Println('\'Hello\'')
    \"双引号fmt.Println("\"Hello\"")
    \\反斜杠本身fmt.Println("Hello\\World")
    \a报警铃声fmt.Println("Hello\aWorld")
    \b退格键fmt.Println("Hello\bWorld")
    \f换页符fmt.Println("Hello\fWorld")
    \v垂直制表符fmt.Println("Hello\vWorld")
    \0空字符fmt.Println("Hello\0World")
    \xhh以两位十六进制数表示的字符fmt.Println("Hello\x0AWorld")
    \uhhhh以四位十六进制数表示的 Unicode 字符fmt.Println("Hello\u00A9World")
    \Uhhhhhhhh以八位十六进制数表示的 Unicode 字符fmt.Println("Hello\U0001F601World")

    使用反引号定义的原生字符串时，不会处理转义字符。

    -
    fmt.Println("他说:\"穷是原罪\"") // 输出: 他说:"穷是原罪"

    fmt.Println(`他说:"穷是原罪"`)   // 输出: 他说:"穷是原罪"

    编辑此页
    最后由 sumingcheng 于 更新
    +
    fmt.Println("他说:\"穷是原罪\"") // 输出: 他说:"穷是原罪"

    fmt.Println(`他说:"穷是原罪"`)   // 输出: 他说:"穷是原罪"
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\346\223\215\344\275\234\345\222\214\346\240\274\345\274\217\345\214\226/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\346\223\215\344\275\234\345\222\214\346\240\274\345\274\217\345\214\226/index.html" index 11cb3a1a..bd8395ea 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\346\223\215\344\275\234\345\222\214\346\240\274\345\274\217\345\214\226/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\345\255\227\347\254\246\344\270\262\346\223\215\344\275\234\345\222\214\346\240\274\345\274\217\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 字符串操作和格式化

    @@ -57,6 +57,6 @@ 

    fmt.Println(strings.Trim("!!!Hello, Gophers!!!", "!"))      // 输出：Hello, Gophers
    fmt.Println(strings.TrimLeft("!!!Hello, Gophers!!!", "!"))  // 输出：Hello, Gophers!!!
    fmt.Println(strings.TrimRight("!!!Hello, Gophers!!!", "!")) // 输出：!!!Hello, Gophers

    占位符表​

    -
    占位符说明示例
    %v值的默认格式表示42, Hello, true
    %+v当打印结构体时，会添加字段名{Field1:42 Field2:Hello}
    %#v值的 Go 语法表示main.User{Name:"Alice", Age:25}
    %T值的类型的 Go 语法表示int, string, bool
    %t布尔值 true 或 falsetrue, false
    %b整数的二进制表示101010, 11110000
    %c相应 Unicode 码点所表示的字符U+0042 ('B'), U+03B2 ('β')
    %d整数的十进制表示42, -42
    %o整数的八进制表示52, -52
    %q单引号围绕的字符字面值，由 Go 语法安全地转义'a', '\''
    %x整数的十六进制表示，字母形式为小写 a-f2a, ff
    %X整数的十六进制表示，字母形式为大写 A-F2A, FF
    %UUnicode 格式U+0042, U+03B2
    %e科学计数法1.234456e+78
    %E科学计数法（大写）1.234456E+78
    %f有小数点而无指数123.456
    %F等同于 %f123.456
    %g根据情况选择 %e 或 %f，以产生更紧凑的（无末尾的 0）输出1.234456e+78, 123.456
    %G根据情况选择 %E 或 %F，以产生更紧凑的（无末尾的 0）输出1.234456E+78, 123.456
    %s字符串表示Hello World
    %q双引号围绕的字符串，由 Go 语法安全地转义"Hello World"
    %x字符串的十六进制表示，小写字母，每字节两个字符68656c6c6f
    %X字符串的十六进制表示，大写字母，每字节两个字符68656C6C6F
    %p指针的十六进制表示，前缀为 0x0x4218f0
    编辑此页
    最后由 sumingcheng 于 更新
    +
    占位符说明示例
    %v值的默认格式表示42, Hello, true
    %+v当打印结构体时，会添加字段名{Field1:42 Field2:Hello}
    %#v值的 Go 语法表示main.User{Name:"Alice", Age:25}
    %T值的类型的 Go 语法表示int, string, bool
    %t布尔值 true 或 falsetrue, false
    %b整数的二进制表示101010, 11110000
    %c相应 Unicode 码点所表示的字符U+0042 ('B'), U+03B2 ('β')
    %d整数的十进制表示42, -42
    %o整数的八进制表示52, -52
    %q单引号围绕的字符字面值，由 Go 语法安全地转义'a', '\''
    %x整数的十六进制表示，字母形式为小写 a-f2a, ff
    %X整数的十六进制表示，字母形式为大写 A-F2A, FF
    %UUnicode 格式U+0042, U+03B2
    %e科学计数法1.234456e+78
    %E科学计数法（大写）1.234456E+78
    %f有小数点而无指数123.456
    %F等同于 %f123.456
    %g根据情况选择 %e 或 %f，以产生更紧凑的（无末尾的 0）输出1.234456e+78, 123.456
    %G根据情况选择 %E 或 %F，以产生更紧凑的（无末尾的 0）输出1.234456E+78, 123.456
    %s字符串表示Hello World
    %q双引号围绕的字符串，由 Go 语法安全地转义"Hello World"
    %x字符串的十六进制表示，小写字母，每字节两个字符68656c6c6f
    %X字符串的十六进制表示，大写字母，每字节两个字符68656C6C6F
    %p指针的十六进制表示，前缀为 0x0x4218f0
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\345\256\211\350\243\205\344\270\216\350\276\223\345\207\272/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\345\256\211\350\243\205\344\270\216\350\276\223\345\207\272/index.html" index d84b9192..f1d49512 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\345\256\211\350\243\205\344\270\216\350\276\223\345\207\272/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\345\256\211\350\243\205\344\270\216\350\276\223\345\207\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 安装与输出

    @@ -72,6 +72,6 @@

    注意事

    确保 Go 的安装路径和环境变量设置正确，特别是 GOROOT 和 GOPATH。

    每次修改环境变量后，需要重启命令行工具使其生效。

    编写 Go 程序时，文件名通常以 .go 结尾，主程序必须包含 main 包和 main 函数。

    -

    在设置环境变量时，注意路径中不要包含中文或空格，以免引起不必要的问题。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在设置环境变量时，注意路径中不要包含中文或空格，以免引起不必要的问题。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\345\276\252\347\216\257\345\222\214\346\216\247\345\210\266\347\273\223\346\236\204/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\345\276\252\347\216\257\345\222\214\346\216\247\345\210\266\347\273\223\346\236\204/index.html" index 5a6ae365..50c85aa6 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\345\276\252\347\216\257\345\222\214\346\216\247\345\210\266\347\273\223\346\236\204/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\345\276\252\347\216\257\345\222\214\346\216\247\345\210\266\347\273\223\346\236\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 循环和控制结构

    @@ -44,6 +44,6 @@

    注意事
  • 在使用无限循环时，一定要确保有合适的退出条件，以防止程序陷入死循环。
  • 使用 range 遍历时，如果不需要索引或键，使用 _ 忽略可以提高代码可读性。
  • 变量名应具备描述性，便于理解代码的作用。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\206\205\345\255\230\345\210\206\351\205\215/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\206\205\345\255\230\345\210\206\351\205\215/index.html" index 0c8f9f98..604100f5 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\206\205\345\255\230\345\210\206\351\205\215/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\206\205\345\255\230\345\210\206\351\205\215/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 数据类型

    @@ -45,6 +45,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242/index.html" index 76eb4542..20c796a0 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 类型转换

    @@ -47,6 +47,6 @@

    获取变量的类型​

    在 Go 中，可以使用 reflect 包来获取变量的类型信息。

    import (
        "fmt"
        "reflect"
    )

    a := true
    aType := reflect.TypeOf(a)
    fmt.Println(aType)  // 输出 bool

    b := 1
    bType := reflect.ValueOf(b).Kind()
    fmt.Println(bType)  // 输出 int
    -

    在开发中，我经常使用 reflect 包来进行类型检查，特别是在处理接口和未知类型时。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在开发中，我经常使用 reflect 包来进行类型检查，特别是在处理接口和未知类型时。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\346\225\264\346\225\260\345\222\214\346\265\256\347\202\271\346\225\260\347\261\273\345\236\213/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\346\225\264\346\225\260\345\222\214\346\265\256\347\202\271\346\225\260\347\261\273\345\236\213/index.html" index 171a1998..d1b28125 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\346\225\264\346\225\260\345\222\214\346\265\256\347\202\271\346\225\260\347\261\273\345\236\213/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\346\225\264\346\225\260\345\222\214\346\265\256\347\202\271\346\225\260\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 整数和浮点数类型

    @@ -69,6 +69,6 @@

    位运算

    示例：

    package main

    import (
        "fmt"
    )

    func main() {
        var a uint = 60  // 0011 1100
        var b uint = 13  // 0000 1101

        fmt.Println("a & b =", a&b)   // 0000 1100
        fmt.Println("a | b =", a|b)   // 0011 1101
        fmt.Println("a ^ b =", a^b)   // 0011 0001
        fmt.Println("a << 2 =", a<<2) // 1111 0000
        fmt.Println("a >> 2 =", a>>2) // 0000 1111
    }
    -

    位运算在性能优化、权限控制等底层编程中非常有用 😊。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    位运算在性能优化、权限控制等底层编程中非常有用 😊。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246\345\222\214\345\221\275\345\220\215\350\247\204\350\214\203/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246\345\222\214\345\221\275\345\220\215\350\247\204\350\214\203/index.html" index 9a483d3d..478a4efb 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246\345\222\214\345\221\275\345\220\215\350\247\204\350\214\203/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246\345\222\214\345\221\275\345\220\215\350\247\204\350\214\203/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 标识符和命名规范

    @@ -54,6 +54,6 @@

    特殊
  • init, main

    • 命名规范​

    -
    元素命名规范例子说明
    项目名简短、小写，清晰、有意义myapp，goserver避免使用下划线或混合大小写
    包名小写，单个单词，不使用下划线或混合大小写fmt，http，sql包名应简洁，反映功能
    文件名小写，可包含下划线或短划线main.go，user_test.go不要使用空格，尽量简短描述文件内容
    变量名驼峰命名法，首字母大小写取决于可见性userName，localVar公有变量首字母大写，私有变量首字母小写
    常量名驼峰命名法，首字母大写MaxSize，URLProtocol常量名通常使用驼峰式，避免全大写加下划线
    函数名驼峰命名法，首字母大小写取决于可见性CalculateTotal，main函数名应清晰描述功能，使用动词加名词形式
    方法名驼峰命名法，首字母大小写取决于可见性user.PrintName方法名应与接收者类型紧密相关
    接口名驼峰命名法，通常以 "er" 结尾，首字母大写Reader，Writer接口名应描述其行为，例如 io.Reader 表示读取功能
    结构体名驼峰命名法，首字母大写AppConfig，UserInfo结构体名通常是名词，清晰描述所代表的事物
    编辑此页
    最后由 sumingcheng 于 更新
    +
    元素命名规范例子说明
    项目名简短、小写，清晰、有意义myapp，goserver避免使用下划线或混合大小写
    包名小写，单个单词，不使用下划线或混合大小写fmt，http，sql包名应简洁，反映功能
    文件名小写，可包含下划线或短划线main.go，user_test.go不要使用空格，尽量简短描述文件内容
    变量名驼峰命名法，首字母大小写取决于可见性userName，localVar公有变量首字母大写，私有变量首字母小写
    常量名驼峰命名法，首字母大写MaxSize，URLProtocol常量名通常使用驼峰式，避免全大写加下划线
    函数名驼峰命名法，首字母大小写取决于可见性CalculateTotal，main函数名应清晰描述功能，使用动词加名词形式
    方法名驼峰命名法，首字母大小写取决于可见性user.PrintName方法名应与接收者类型紧密相关
    接口名驼峰命名法，通常以 "er" 结尾，首字母大写Reader，Writer接口名应描述其行为，例如 io.Reader 表示读取功能
    结构体名驼峰命名法，首字母大写AppConfig，UserInfo结构体名通常是名词，清晰描述所代表的事物
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\347\261\273\345\236\213\350\275\254\346\215\242\345\222\214\350\277\220\347\256\227\347\254\246/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\347\261\273\345\236\213\350\275\254\346\215\242\345\222\214\350\277\220\347\256\227\347\254\246/index.html" index ebb3c90d..2ea4fe1a 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\347\261\273\345\236\213\350\275\254\346\215\242\345\222\214\350\277\220\347\256\227\347\254\246/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\347\261\273\345\236\213\350\275\254\346\215\242\345\222\214\350\277\220\347\256\227\347\254\246/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 类型转换和运算符

    @@ -38,6 +38,6 @@

    Go 
    // 编译器根据赋值自动推断变量类型
    var a = 1

    // 使用简短声明方式，类型由编译器推断
    b := 2

    fmt.Println(a, b)

    位逻辑清零赋值​

    在 Go 语言中，位逻辑清零赋值是通过 &^= 运算符来完成的。该运算符会将左操作数中对应右操作数为 1 的位清零，如果右操作数的位为 0，则左操作数的位保持不变。

    -
    var valueA int = 60  // 二进制为 111100
    var valueB int = 13  // 二进制为 001101

    valueA &^= valueB    // 执行位逻辑清零赋值操作

    fmt.Printf("结果是 %d\n", valueA)  // 输出结果是 48，二进制为 110000
    编辑此页
    最后由 sumingcheng 于 更新
    +
    var valueA int = 60  // 二进制为 111100
    var valueB int = 13  // 二进制为 001101

    valueA &^= valueB    // 执行位逻辑清零赋值操作

    fmt.Printf("结果是 %d\n", valueA)  // 输出结果是 48，二进制为 110000
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\237\272\347\241\200/\351\241\271\347\233\256\345\210\235\345\247\213\345\214\226\345\222\214\346\236\204\345\273\272\346\214\207\345\215\227/index.html" "b/docs/Backend/Go/\345\237\272\347\241\200/\351\241\271\347\233\256\345\210\235\345\247\213\345\214\226\345\222\214\346\236\204\345\273\272\346\214\207\345\215\227/index.html" index 5e71f419..a03e221e 100644 --- "a/docs/Backend/Go/\345\237\272\347\241\200/\351\241\271\347\233\256\345\210\235\345\247\213\345\214\226\345\222\214\346\236\204\345\273\272\346\214\207\345\215\227/index.html" +++ "b/docs/Backend/Go/\345\237\272\347\241\200/\351\241\271\347\233\256\345\210\235\345\247\213\345\214\226\345\222\214\346\236\204\345\273\272\346\214\207\345\215\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\271\266\345\217\221/Channel/index.html" "b/docs/Backend/Go/\345\271\266\345\217\221/Channel/index.html" index 072c4710..4684e6c7 100644 --- "a/docs/Backend/Go/\345\271\266\345\217\221/Channel/index.html" +++ "b/docs/Backend/Go/\345\271\266\345\217\221/Channel/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 通道（Channel）阻塞详解

    @@ -90,6 +90,6 @@

    注意事

  • 向已关闭的通道发送数据会导致 panic，应避免这种情况。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\271\266\345\217\221/Context/index.html" "b/docs/Backend/Go/\345\271\266\345\217\221/Context/index.html" index 37261086..1b895c1a 100644 --- "a/docs/Backend/Go/\345\271\266\345\217\221/Context/index.html" +++ "b/docs/Backend/Go/\345\271\266\345\217\221/Context/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 上下文（context）详解

    @@ -50,6 +50,6 @@

    Done 信号如何传递​

    Done 方法返回一个类型为 <-chan struct{} 的通道，当上下文被取消或截止时间到达时，该通道会被关闭。子上下文会继承父上下文的 Done 通道，当父上下文被取消时，所有子上下文的 Done 通道也会关闭，实现取消信号在 goroutine 树中的传递。

    package main

    import (
        "context"
        "fmt"
        "time"
    )

    func worker(ctx context.Context, id int) {
        for {
            select {
            case <-ctx.Done():
                // 当上下文被取消时，Done 通道会关闭
                fmt.Printf("Worker %d 接收到停止信号\n", id)
                return
            default:
                // 模拟工作
                fmt.Printf("Worker %d 正在工作...\n", id)
                time.Sleep(1 * time.Second)
            }
        }
    }

    func main() {
        // 创建根上下文和取消函数
        ctx, cancel := context.WithCancel(context.Background())

        // 启动第一个 worker
        go worker(ctx, 1)

        // 启动第二个 worker
        go worker(ctx, 2)

        // 模拟一段时间后取消操作
        time.Sleep(5 * time.Second)
        fmt.Println("主程序发送取消信号")
        cancel() // 取消所有使用 ctx 的 goroutine

        // 等待 goroutine 完成清理
        time.Sleep(2 * time.Second)
    }
    -

    提示 使用上下文传递取消信号，可以优雅地管理 goroutine 的生命周期，避免资源泄漏。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    提示 使用上下文传递取消信号，可以优雅地管理 goroutine 的生命周期，避免资源泄漏。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\345\271\266\345\217\221/\350\257\273\345\206\231\351\224\201/index.html" "b/docs/Backend/Go/\345\271\266\345\217\221/\350\257\273\345\206\231\351\224\201/index.html" index e0ed0cb4..c0d8e2ab 100644 --- "a/docs/Backend/Go/\345\271\266\345\217\221/\350\257\273\345\206\231\351\224\201/index.html" +++ "b/docs/Backend/Go/\345\271\266\345\217\221/\350\257\273\345\206\231\351\224\201/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 读写锁（sync.RWMutex）详解

    @@ -57,6 +57,6 @@

    示例改 
    func main() {
        for i := 0; i < 5; i++ {
            waitGroup.Add(1)
            go func() {
                defer waitGroup.Done()
                readData()
            }()
        }

        for i := 0; i < 2; i++ {
            waitGroup.Add(1)
            go func(value int) {
                defer waitGroup.Done()
                writeData(value)
            }(i * 10)
        }

        waitGroup.Wait()
        fmt.Println("所有 goroutine 执行完毕")
    }

    输出示例​

    写入的数值为 0
    读取的数值为 0
    读取的数值为 0
    读取的数值为 0
    写入的数值为 10
    读取的数值为 10
    读取的数值为 10
    所有 goroutine 执行完毕
    -

    提示 读写锁在需要高并发读、低并发写的场景下可以显著提高性能。正确地使用读写锁，可以让程序既保证数据的安全性，又提高并发执行效率。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    提示 读写锁在需要高并发读、低并发写的场景下可以显著提高性能。正确地使用读写锁，可以让程序既保证数据的安全性，又提高并发执行效率。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\346\214\207\351\222\210/nil\345\222\214\347\273\223\346\236\204\344\275\223/index.html" "b/docs/Backend/Go/\346\214\207\351\222\210/nil\345\222\214\347\273\223\346\236\204\344\275\223/index.html" index f9709ab4..0acbc3c0 100644 --- "a/docs/Backend/Go/\346\214\207\351\222\210/nil\345\222\214\347\273\223\346\236\204\344\275\223/index.html" +++ "b/docs/Backend/Go/\346\214\207\351\222\210/nil\345\222\214\347\273\223\346\236\204\344\275\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言中的 nil 和结构体比较

    @@ -84,6 +84,6 @@

    注意
  • 性能考虑：使用反射或第三方库可能会降低性能，在高性能场景下应谨慎使用。
  • 字段顺序：对于切片等有序集合，比较时需要考虑元素的顺序是否重要。
  • 空值处理：在比较时需要考虑字段可能为 nil 的情况，避免运行时错误。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\346\214\207\351\222\210/\346\214\207\351\222\210/index.html" "b/docs/Backend/Go/\346\214\207\351\222\210/\346\214\207\351\222\210/index.html" index 5913df85..736e14d2 100644 --- "a/docs/Backend/Go/\346\214\207\351\222\210/\346\214\207\351\222\210/index.html" +++ "b/docs/Backend/Go/\346\214\207\351\222\210/\346\214\207\351\222\210/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    C 语言与 Go 语言中的指针比较

    @@ -99,6 +99,6 @@

    注意事
    • 在 Go 中，尽量避免使用指针来传递切片和映射，因为它们本身就是引用类型。
    • 使用指针时，要确保指针已初始化，避免出现 nil 指针解引用的错误。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\346\216\245\345\217\243/Node-gRPC\351\200\232\344\277\241/index.html" "b/docs/Backend/Go/\346\216\245\345\217\243/Node-gRPC\351\200\232\344\277\241/index.html" index 306cc55b..4794601a 100644 --- "a/docs/Backend/Go/\346\216\245\345\217\243/Node-gRPC\351\200\232\344\277\241/index.html" +++ "b/docs/Backend/Go/\346\216\245\345\217\243/Node-gRPC\351\200\232\344\277\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    gRPC 在 Node.js 客户端和 Go 服务端通信

    @@ -50,6 +50,6 @@

    注意事

  • 代码块标注：所有代码块均标明了语言类型，便于阅读和语法高亮。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\346\216\245\345\217\243/\347\261\273\345\236\213\346\226\255\350\250\200/index.html" "b/docs/Backend/Go/\346\216\245\345\217\243/\347\261\273\345\236\213\346\226\255\350\250\200/index.html" index b9333b3b..6db7e064 100644 --- "a/docs/Backend/Go/\346\216\245\345\217\243/\347\261\273\345\236\213\346\226\255\350\250\200/index.html" +++ "b/docs/Backend/Go/\346\216\245\345\217\243/\347\261\273\345\236\213\346\226\255\350\250\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言中的接口与类型断言

    @@ -53,6 +53,6 @@

    注意事

  • 类型选择 (type switch) 可以优雅地处理多种类型情况。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\346\216\245\345\217\243/\351\270\255\345\255\220\347\261\273\345\236\213/index.html" "b/docs/Backend/Go/\346\216\245\345\217\243/\351\270\255\345\255\220\347\261\273\345\236\213/index.html" index f43d9c66..b31300cb 100644 --- "a/docs/Backend/Go/\346\216\245\345\217\243/\351\270\255\345\255\220\347\261\273\345\236\213/index.html" +++ "b/docs/Backend/Go/\346\216\245\345\217\243/\351\270\255\345\255\220\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 鸭子类型和类型约束

    @@ -59,6 +59,6 @@

    注意事

    接口的嵌套：可以通过接口嵌套来组合多个接口，使得新接口包含所有嵌套接口的方法。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\214\207\351\222\210\344\274\230\345\214\226\345\222\214\345\206\205\345\255\230\347\256\241\347\220\206/index.html" "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\214\207\351\222\210\344\274\230\345\214\226\345\222\214\345\206\205\345\255\230\347\256\241\347\220\206/index.html" index b6d0b0f1..8baaa067 100644 --- "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\214\207\351\222\210\344\274\230\345\214\226\345\222\214\345\206\205\345\255\230\347\256\241\347\220\206/index.html" +++ "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\214\207\351\222\210\344\274\230\345\214\226\345\222\214\345\206\205\345\255\230\347\256\241\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 指针优化和内存管理

    @@ -53,6 +53,6 @@

    注意事
  • 变量命名：应使用易读的变量名，提升代码可读性。
  • 指针使用：在需要修改原始数据时，使用指针作为方法的接收者。
  • 内存管理：利用 Go 的垃圾回收机制，避免手动管理内存。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\263\233\345\236\213\347\273\223\346\236\204\344\275\223/index.html" "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\263\233\345\236\213\347\273\223\346\236\204\344\275\223/index.html" index 72c1d10b..b6102ed4 100644 --- "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\263\233\345\236\213\347\273\223\346\236\204\344\275\223/index.html" +++ "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\346\263\233\345\236\213\347\273\223\346\236\204\344\275\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 泛型结构体

    @@ -47,6 +47,6 @@

    注意事

  • 合理利用泛型可以提高代码的可读性和维护性，但过度使用可能增加代码复杂度。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\261\273\345\236\213\345\210\253\345\220\215\345\222\214\350\207\252\345\256\232\344\271\211\347\261\273\345\236\213/index.html" "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\261\273\345\236\213\345\210\253\345\220\215\345\222\214\350\207\252\345\256\232\344\271\211\347\261\273\345\236\213/index.html" index b9374a02..5148e4f5 100644 --- "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\261\273\345\236\213\345\210\253\345\220\215\345\222\214\350\207\252\345\256\232\344\271\211\347\261\273\345\236\213/index.html" +++ "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\261\273\345\236\213\345\210\253\345\220\215\345\222\214\350\207\252\345\256\232\344\271\211\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 类型别名和自定义类型

    @@ -55,6 +55,6 @@

    组 
    type Engine struct {
        Power int
    }

    type Car struct {
        Engine
        Brand string
    }

    func (e *Engine) Start() {
        // 启动引擎的逻辑
    }

    func main() {
        myCar := Car{
            Engine: Engine{Power: 150},
            Brand:  "Toyota",
        }

        myCar.Start() // 可以直接调用嵌入的 Engine 的方法
    }

    在这个例子中，Car 结构体嵌入了 Engine 结构体，这样 Car 就拥有了 Engine 的所有字段和方法，实现了代码的复用。

    注意事项​

    -

    在编写 Go 语言代码时，理解类型别名和自定义类型的区别，以及在使用结构体时的各种注意事项，有助于写出更清晰、高效的代码。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在编写 Go 语言代码时，理解类型别名和自定义类型的区别，以及在使用结构体时的各种注意事项，有助于写出更清晰、高效的代码。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\206\205\345\255\230\345\270\203\345\261\200\345\222\214\345\265\214\345\245\227/index.html" "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\206\205\345\255\230\345\270\203\345\261\200\345\222\214\345\265\214\345\245\227/index.html" index 0fc0a026..9d6aa739 100644 --- "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\206\205\345\255\230\345\270\203\345\261\200\345\222\214\345\265\214\345\245\227/index.html" +++ "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\206\205\345\255\230\345\270\203\345\261\200\345\222\214\345\265\214\345\245\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 结构体内存布局和嵌套

    @@ -61,6 +61,6 @@

    注意事

  • 使用 unsafe.Sizeof 函数可以检测结构体的实际内存大小，有助于优化内存布局。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\237\272\347\241\200/index.html" "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\237\272\347\241\200/index.html" index 500152d3..747eb5ef 100644 --- "a/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\237\272\347\241\200/index.html" +++ "b/docs/Backend/Go/\347\273\223\346\236\204\344\275\223/\347\273\223\346\236\204\344\275\223\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 结构体

    @@ -48,6 +48,6 @@

    注意事
  • 定义结构体时，字段名称应清晰明了，遵循命名规范。
  • 初始化结构体时，根据需求选择合适的方式。
  • 使用指针时，要注意指针的解引用，避免出现 nil 指针错误。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\351\233\206\345\220\210/map-\347\261\273\345\236\213/index.html" "b/docs/Backend/Go/\351\233\206\345\220\210/map-\347\261\273\345\236\213/index.html" index 5aa8b776..0825ad5a 100644 --- "a/docs/Backend/Go/\351\233\206\345\220\210/map-\347\261\273\345\236\213/index.html" +++ "b/docs/Backend/Go/\351\233\206\345\220\210/map-\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go map 类型详解

    @@ -73,6 +73,6 @@

    删除键值对​

    package main

    import "fmt"

    func main() {
    	personInfo := make(map[string]string, 3)
    	personInfo["name"] = "sumingcheng"
    	personInfo["site"] = "example.com"
    	personInfo["price"] = "free"

    	// 删除键为 "price" 的键值对
    	delete(personInfo, "price")
    	fmt.Println(personInfo)

    	// 删除不存在的键，不会报错
    	delete(personInfo, "nonexistent")
    }
    -

    提示 删除不存在的键不会引发错误。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    提示 删除不存在的键不会引发错误。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\351\233\206\345\220\210/\345\200\274\344\274\240\351\200\222\345\222\214\345\274\225\347\224\250\344\274\240\351\200\222/index.html" "b/docs/Backend/Go/\351\233\206\345\220\210/\345\200\274\344\274\240\351\200\222\345\222\214\345\274\225\347\224\250\344\274\240\351\200\222/index.html" index 8afdff29..703b086e 100644 --- "a/docs/Backend/Go/\351\233\206\345\220\210/\345\200\274\344\274\240\351\200\222\345\222\214\345\274\225\347\224\250\344\274\240\351\200\222/index.html" +++ "b/docs/Backend/Go/\351\233\206\345\220\210/\345\200\274\344\274\240\351\200\222\345\222\214\345\274\225\347\224\250\344\274\240\351\200\222/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 值传递、引用传递与切片详解

    @@ -39,6 +39,6 @@ 

    package main

    import "fmt"

    func main() {
    	// 创建一个初始容量为 3 的 slice
    	numbers := make([]int, 3)
    	numbers[0] = 1
    	numbers[1] = 2
    	numbers[2] = 3

    	fmt.Println(numbers)      // 输出 [1 2 3]
    	fmt.Println(len(numbers)) // 输出 3
    	fmt.Println(cap(numbers)) // 输出 3

    	// 追加元素，超过容量，触发扩容
    	numbers = append(numbers, 4)

    	fmt.Println(numbers)      // 输出 [1 2 3 4]
    	fmt.Println(len(numbers)) // 输出 4
    	fmt.Println(cap(numbers)) // 输出 6 或更大，取决于扩容策略
    }

    -

    提示：合理地设置 slice 的容量，可以减少扩容次数，提升性能。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    提示：合理地设置 slice 的容量，可以减少扩容次数，提升性能。

    \ No newline at end of file diff --git "a/docs/Backend/Go/\351\233\206\345\220\210/\345\210\207\347\211\207/index.html" "b/docs/Backend/Go/\351\233\206\345\220\210/\345\210\207\347\211\207/index.html" index 5e175876..fa37de5d 100644 --- "a/docs/Backend/Go/\351\233\206\345\220\210/\345\210\207\347\211\207/index.html" +++ "b/docs/Backend/Go/\351\233\206\345\220\210/\345\210\207\347\211\207/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 切片（Slice）

    @@ -89,6 +89,6 @@

    最佳实
  • 当需要避免底层数组的副作用时，可以使用 copy 创建切片的副本。
  • 遍历切片时，使用 for range 循环更加简洁。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\351\233\206\345\220\210/\346\225\260\347\273\204/index.html" "b/docs/Backend/Go/\351\233\206\345\220\210/\346\225\260\347\273\204/index.html" index e4bbd5b8..53697ed8 100644 --- "a/docs/Backend/Go/\351\233\206\345\220\210/\346\225\260\347\273\204/index.html" +++ "b/docs/Backend/Go/\351\233\206\345\220\210/\346\225\260\347\273\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 数组

    @@ -75,6 +75,6 @@

    注意事
  • 在需要固定长度的情况下，使用数组可以获得性能上的优势。
  • 当需要灵活处理元素数量时，应优先考虑使用切片。
  • 理解数组是值类型，有助于避免在函数传参时出现意外的副本。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Go/\351\233\206\345\220\210/\351\223\276\350\241\250/index.html" "b/docs/Backend/Go/\351\233\206\345\220\210/\351\223\276\350\241\250/index.html" index 563e7060..025434bd 100644 --- "a/docs/Backend/Go/\351\233\206\345\220\210/\351\223\276\350\241\250/index.html" +++ "b/docs/Backend/Go/\351\233\206\345\220\210/\351\223\276\350\241\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 链表详解

    @@ -47,6 +47,6 @@

    链表

    链表的反转​

    以下函数可以实现链表的反转。

    func reverseList(ll *list.List) *list.List {
    	reversed := list.New()
    	for element := ll.Front(); element != nil; {
    		next := element.Next()              // 保存下一个元素的引用
    		ll.Remove(element)                  // 从原链表中移除当前元素
    		reversed.PushFront(element.Value)   // 将元素添加到新链表的前端
    		element = next
    	}
    	return reversed
    }
    -

    注意 📝 当操作链表时，务必注意元素的引用和链表的结构，以避免意外的错误。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    注意 📝 当操作链表时，务必注意元素的引用和链表的结构，以避免意外的错误。

    \ No newline at end of file diff --git "a/docs/Backend/Java/Maven/Maven-\344\276\235\350\265\226\351\241\271\350\247\243\350\257\273/index.html" "b/docs/Backend/Java/Maven/Maven-\344\276\235\350\265\226\351\241\271\350\247\243\350\257\273/index.html" index ef56b962..5c5b117c 100644 --- "a/docs/Backend/Java/Maven/Maven-\344\276\235\350\265\226\351\241\271\350\247\243\350\257\273/index.html" +++ "b/docs/Backend/Java/Maven/Maven-\344\276\235\350\265\226\351\241\271\350\247\243\350\257\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/Maven/Maven-\346\217\222\344\273\266/index.html" "b/docs/Backend/Java/Maven/Maven-\346\217\222\344\273\266/index.html" index f039435c..090e305d 100644 --- "a/docs/Backend/Java/Maven/Maven-\346\217\222\344\273\266/index.html" +++ "b/docs/Backend/Java/Maven/Maven-\346\217\222\344\273\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/Maven/Maven-\347\224\237\345\221\275\345\221\250\346\234\237/index.html" "b/docs/Backend/Java/Maven/Maven-\347\224\237\345\221\275\345\221\250\346\234\237/index.html" index 6da80476..fe6ff0a4 100644 --- "a/docs/Backend/Java/Maven/Maven-\347\224\237\345\221\275\345\221\250\346\234\237/index.html" +++ "b/docs/Backend/Java/Maven/Maven-\347\224\237\345\221\275\345\221\250\346\234\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Maven 生命周期

    @@ -112,6 +112,6 @@

    最佳实践

    利用 Profiles 管理不同的构建环境配置。
    在自定义阶段绑定插件目标时，确保清晰的职责分离。

    参考资料​

    -

    Maven 官方文档

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Maven 官方文档

    \ No newline at end of file diff --git "a/docs/Backend/Java/Maven/pom.xml-\346\226\207\344\273\266\344\270\273\350\246\201\345\206\205\345\256\271/index.html" "b/docs/Backend/Java/Maven/pom.xml-\346\226\207\344\273\266\344\270\273\350\246\201\345\206\205\345\256\271/index.html" index 98249669..132a95e9 100644 --- "a/docs/Backend/Java/Maven/pom.xml-\346\226\207\344\273\266\344\270\273\350\246\201\345\206\205\345\256\271/index.html" +++ "b/docs/Backend/Java/Maven/pom.xml-\346\226\207\344\273\266\344\270\273\350\246\201\345\206\205\345\256\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    pom.xml 文件主要内容

    @@ -67,6 +67,6 @@ 

    <developers>
        <developer>
            <id>jdoe</id>
            <name>John Doe</name>
            <email>jdoe@example.com</email>
        </developer>
    </developers>
    <contributors>
        <contributor>
            <name>Jane Smith</name>
            <email>jsmith@example.com</email>
        </contributor>
    </contributors>

    许可证​

    licenses 元素描述了项目的许可证信息，明确项目的使用和分发条款。例如：

    -
    <licenses>
        <license>
            <name>Apache License, Version 2.0</name>
            <url>http://www.apache.org/licenses/LICENSE-2.0.txt</url>
            <distribution>repo</distribution>
        </license>
    </licenses>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <licenses>
        <license>
            <name>Apache License, Version 2.0</name>
            <url>http://www.apache.org/licenses/LICENSE-2.0.txt</url>
            <distribution>repo</distribution>
        </license>
    </licenses>
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\216\237\347\224\237\346\263\250\350\247\243/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\216\237\347\224\237\346\263\250\350\247\243/index.html" index b0265065..48ca49ec 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\216\237\347\224\237\346\263\250\350\247\243/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\216\237\347\224\237\346\263\250\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 注解详解

    @@ -38,6 +38,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    需要注意的是，这些关键字不是注解，而是 Java 模块系统的语法元素。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\271\263\345\217\260\344\270\216\350\257\255\350\250\200-MacOS\347\216\257\345\242\203\346\220\255\345\273\272/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\271\263\345\217\260\344\270\216\350\257\255\350\250\200-MacOS\347\216\257\345\242\203\346\220\255\345\273\272/index.html" index d4858910..a28458c2 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\271\263\345\217\260\344\270\216\350\257\255\350\250\200-MacOS\347\216\257\345\242\203\346\220\255\345\273\272/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/Java-\345\271\263\345\217\260\344\270\216\350\257\255\350\250\200-MacOS\347\216\257\345\242\203\346\220\255\345\273\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    由于Java程序被编译成与平台无关的字节码，因此只需编译一次，即可在任何安装了JVM的设备上运行。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/Java-\347\232\204\345\211\215\344\270\226\344\273\212\347\224\237---\345\217\221\345\261\225\345\217\262\346\246\202\350\277\260/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/Java-\347\232\204\345\211\215\344\270\226\344\273\212\347\224\237---\345\217\221\345\261\225\345\217\262\346\246\202\350\277\260/index.html" index f960d05f..f218be67 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/Java-\347\232\204\345\211\215\344\270\226\344\273\212\347\224\237---\345\217\221\345\261\225\345\217\262\346\246\202\350\277\260/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/Java-\347\232\204\345\211\215\344\270\226\344\273\212\347\224\237---\345\217\221\345\261\225\345\217\262\346\246\202\350\277\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 的发展历程

    @@ -298,6 +298,6 @@

    结语
    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\345\276\252\347\216\257\344\270\216\346\216\247\345\210\266\347\273\223\346\236\204/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\345\276\252\347\216\257\344\270\216\346\216\247\345\210\266\347\273\223\346\236\204/index.html" index 2e512085..7d015010 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\345\276\252\347\216\257\344\270\216\346\216\247\345\210\266\347\273\223\346\236\204/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\345\276\252\347\216\257\344\270\216\346\216\247\345\210\266\347\273\223\346\236\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 循环与控制结构

    @@ -64,6 +64,6 @@

    九九

    我使用双重循环打印九九乘法表：

    for (int i = 1; i <= 9; i++) {
        for (int j = 1; j <= i; j++) {
            System.out.print(i + "x" + j + "=" + i * j + " ");
        }
        System.out.println();
    }

    运行结果如下：

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213/index.html" index a6d7c0d6..41be5145 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 中的数据类型

    @@ -80,6 +80,6 @@

    其

    提示

    在 Java 编程中，了解数据类型和类型转换对于编写高质量的代码至关重要。务必注意类型转换可能带来的精度丢失和溢出问题。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204/index.html" index cfaa2c53..3f5dc368 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 数组详解

    @@ -82,6 +82,6 @@

    数组的最佳实践

  • 初始化数组：在使用数组前，确保已经正确初始化，避免 NullPointerException。
  • 数组复制：使用 System.arraycopy 或 Arrays.copyOf 来复制数组，可以提高效率。
  • 数组长度：数组的长度是固定的，如需动态调整，考虑使用 ArrayList 等集合类。
    • -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204\346\226\271\346\263\225\345\222\214\345\274\225\347\224\250/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204\346\226\271\346\263\225\345\222\214\345\274\225\347\224\250/index.html" index b1ad7b34..7f99dd9c 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204\346\226\271\346\263\225\345\222\214\345\274\225\347\224\250/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\346\225\260\347\273\204\346\226\271\346\263\225\345\222\214\345\274\225\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 中的数组与排序算法

    @@ -65,6 +65,6 @@

    注意事
    • 进行数组操作时，要注意索引范围，防止 ArrayIndexOutOfBoundsException 异常。
    • 对于需要大量插入和删除操作的场景，数组可能不是最佳选择，可以考虑使用 ArrayList 等集合类。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\346\226\271\346\263\225/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\346\226\271\346\263\225/index.html" index 01fba71e..149092eb 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 方法与函数

    @@ -54,6 +54,6 @@

    斐
  • 在使用递归时，必须确保存在终止条件，以防止栈溢出。
  • 方法的参数和返回值应设计合理，提升代码的可读性和维护性。
  • 在进行算术运算时，应注意除数不能为零等特殊情况。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\346\235\241\344\273\266\350\257\255\345\217\245/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\346\235\241\344\273\266\350\257\255\345\217\245/index.html" index c07fd933..413b611c 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\346\235\241\344\273\266\350\257\255\345\217\245/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\346\235\241\344\273\266\350\257\255\345\217\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 条件语句：if-else 和 switch

    @@ -65,6 +65,6 @@

    注意事
  • 使用switch语句时，应注意版本兼容性，某些特性可能只在较新的 Java 版本中支持。
  • 对于不支持的类型，如long、float、double和boolean，建议使用if-else语句。
  • 始终为switch语句提供default分支，处理未被列举的情况，提高代码的健壮性。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246-\345\217\230\351\207\217-\345\270\270\351\207\217/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246-\345\217\230\351\207\217-\345\270\270\351\207\217/index.html" index 998490cc..74667b3a 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246-\345\217\230\351\207\217-\345\270\270\351\207\217/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\346\240\207\350\257\206\347\254\246-\345\217\230\351\207\217-\345\270\270\351\207\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 基础：变量、常量和标识符

    @@ -88,6 +88,6 @@

    常量
    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\347\256\227\346\234\257\350\277\220\347\256\227\344\270\216\346\265\256\347\202\271\346\225\260\347\262\276\345\272\246/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\347\256\227\346\234\257\350\277\220\347\256\227\344\270\216\346\265\256\347\202\271\346\225\260\347\262\276\345\272\246/index.html" index 2c32a5b1..596dddad 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\347\256\227\346\234\257\350\277\220\347\256\227\344\270\216\346\265\256\347\202\271\346\225\260\347\262\276\345\272\246/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\347\256\227\346\234\257\350\277\220\347\256\227\344\270\216\346\265\256\347\202\271\346\225\260\347\262\276\345\272\246/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 中的算术运算与浮点数精度

    @@ -58,6 +58,6 @@

    精度丢 
    System.out.println(3.3f - 1.4f); // 输出 1.9000001

    这是因为浮点数在二进制表示时，有些小数无法精确表示，导致运算结果存在微小误差。

    注意事项​

    -

    浮点数运算可能存在精度问题，尤其是在金融计算等对精度要求高的场合，建议使用BigDecimal类进行精确计算。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    浮点数运算可能存在精度问题，尤其是在金融计算等对精度要求高的场合，建议使用BigDecimal类进行精确计算。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\347\263\273\347\273\237\347\232\204\350\276\223\345\205\245\345\222\214\350\276\223\345\207\272/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\347\263\273\347\273\237\347\232\204\350\276\223\345\205\245\345\222\214\350\276\223\345\207\272/index.html" index 38f8cdcd..551f2d7e 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\347\263\273\347\273\237\347\232\204\350\276\223\345\205\245\345\222\214\350\276\223\345\207\272/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\347\263\273\347\273\237\347\232\204\350\276\223\345\205\245\345\222\214\350\276\223\345\207\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 的数据类型和输入输出

    @@ -120,6 +120,6 @@

    注意事
    • 使用BigDecimal的构造函数时，建议传入String类型参数，避免精度问题。
    • 在进行除法运算时，需要指定精度和舍入模式。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\350\265\213\345\200\274\350\277\220\347\256\227\344\270\216\345\205\263\347\263\273\350\277\220\347\256\227/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\350\265\213\345\200\274\350\277\220\347\256\227\344\270\216\345\205\263\347\263\273\350\277\220\347\256\227/index.html" index 5c59656e..b2f64317 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\350\265\213\345\200\274\350\277\220\347\256\227\344\270\216\345\205\263\347\263\273\350\277\220\347\256\227/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\350\265\213\345\200\274\350\277\220\347\256\227\344\270\216\345\205\263\347\263\273\350\277\220\347\256\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    一元与二元运算

    @@ -52,6 +52,6 @@

    与、
  • 逻辑或：||
  • 逻辑非：!
    • -

    这些运算符常用于控制流语句中，根据条件执行不同的代码块。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这些运算符常用于控制流语句中，根据条件执行不同的代码块。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\237\272\347\241\200/\350\277\233\345\210\266\350\275\254\346\215\242/index.html" "b/docs/Backend/Java/\345\237\272\347\241\200/\350\277\233\345\210\266\350\275\254\346\215\242/index.html" index d1d2b1d0..296beac9 100644 --- "a/docs/Backend/Java/\345\237\272\347\241\200/\350\277\233\345\210\266\350\275\254\346\215\242/index.html" +++ "b/docs/Backend/Java/\345\237\272\347\241\200/\350\277\233\345\210\266\350\275\254\346\215\242/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    进制与位运算详解

    @@ -137,6 +137,6 @@

    注意事
    • 位运算只能用于整数类型，如 byte、short、int、long 和 char。
    • 在处理有符号数的位移时，需要注意符号位的影响。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\344\270\216\345\274\202\345\270\270\345\244\204\347\220\206/index.html" "b/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\344\270\216\345\274\202\345\270\270\345\244\204\347\220\206/index.html" index a14e783b..fb608aac 100644 --- "a/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\344\270\216\345\274\202\345\270\270\345\244\204\347\220\206/index.html" +++ "b/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\344\270\216\345\274\202\345\270\270\345\244\204\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 异常处理指南

    @@ -52,6 +52,6 @@

    ClassCastException​

    当试图将对象强制转换为不兼容的类时，将抛出 ClassCastException。这种异常通常由错误的类型转换操作引起。

    Object obj = new String("hello");
    try {
        // 尝试将 obj（一个 String 对象）强制转换为 Integer。
        // 由于 String 不能被转换为 Integer，所以这会引发 ClassCastException。
        Integer number = (Integer) obj;
    } catch (ClassCastException e) {
        e.printStackTrace();
    }
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\345\244\204\347\220\206/index.html" "b/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\345\244\204\347\220\206/index.html" index f609c21f..0d3d1f7d 100644 --- "a/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\345\244\204\347\220\206/index.html" +++ "b/docs/Backend/Java/\345\274\202\345\270\270/\345\274\202\345\270\270\345\244\204\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    异常处理

    @@ -63,6 +63,6 @@

    ge 
    try {
        // 可能引发异常的代码
    } catch (Exception e) {
        String localizedMessage = e.getLocalizedMessage();
        System.out.println("Localized error message: " + localizedMessage);
    }

    fillInStackTrace()​

    当需要重新抛出一个异常，并保留当前调用堆栈信息时，可以使用 fillInStackTrace() 方法。

    -
    try {
        // 可能引发异常的代码
    } catch (Exception e) {
        Throwable t = e.fillInStackTrace();
        throw t; // 重新抛出异常，包含当前堆栈信息
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    try {
        // 可能引发异常的代码
    } catch (Exception e) {
        Throwable t = e.fillInStackTrace();
        throw t; // 重新抛出异常，包含当前堆栈信息
    }
    \ No newline at end of file diff --git "a/docs/Backend/Java/\345\274\202\345\270\270/\350\207\252\345\256\232\344\271\211\345\274\202\345\270\270\344\270\216\344\275\277\347\224\250/index.html" "b/docs/Backend/Java/\345\274\202\345\270\270/\350\207\252\345\256\232\344\271\211\345\274\202\345\270\270\344\270\216\344\275\277\347\224\250/index.html" index 4c331215..92c3d405 100644 --- "a/docs/Backend/Java/\345\274\202\345\270\270/\350\207\252\345\256\232\344\271\211\345\274\202\345\270\270\344\270\216\344\275\277\347\224\250/index.html" +++ "b/docs/Backend/Java/\345\274\202\345\270\270/\350\207\252\345\256\232\344\271\211\345\274\202\345\270\270\344\270\216\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    自定义异常与使用

    @@ -35,6 +35,6 @@

    受检异

    非受检异常​

    非受检异常如同隐藏的陷阱，通常由编程错误引起，如空指针访问或数组越界。编译器不会强制处理这些异常，但良好的编程习惯要求预防这类错误。这类异常包括RuntimeException的所有子类和Error，后者通常表示严重问题，如系统资源耗尽，应用程序一般不处理。

    如何判断异常类型​

    -

    如果异常是java.lang.RuntimeException的子类，或是java.lang.Error，则属于非受检异常。如果异常是java.lang.Exception的子类，但不是RuntimeException的子类，则属于受检异常。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    如果异常是java.lang.RuntimeException的子类，或是java.lang.Error，则属于非受检异常。如果异常是java.lang.Exception的子类，但不是RuntimeException的子类，则属于受检异常。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\346\226\271\346\263\225\344\270\216\351\200\232\351\205\215\347\254\246\350\257\246\350\247\243/index.html" "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\346\226\271\346\263\225\344\270\216\351\200\232\351\205\215\347\254\246\350\257\246\350\247\243/index.html" index d4eea2ba..4f1a2a83 100644 --- "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\346\226\271\346\263\225\344\270\216\351\200\232\351\205\215\347\254\246\350\257\246\350\247\243/index.html" +++ "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\346\226\271\346\263\225\344\270\216\351\200\232\351\205\215\347\254\246\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 泛型方法与通配符详解

    @@ -62,6 +62,6 @@

    下限
  • 在泛型方法中，泛型标识需要与形参列表对应，确保代码的完整性和可读性。
  • 使用通配符时，要根据实际需求选择合适的上限或下限通配符，以确保方法的正确性和安全性。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\232\204\347\261\273\345\236\213\346\223\246\351\231\244\344\270\216\346\241\245\346\216\245\346\226\271\346\263\225/index.html" "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\232\204\347\261\273\345\236\213\346\223\246\351\231\244\344\270\216\346\241\245\346\216\245\346\226\271\346\263\225/index.html" index c0b1f363..95fd5643 100644 --- "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\232\204\347\261\273\345\236\213\346\223\246\351\231\244\344\270\216\346\241\245\346\216\245\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\232\204\347\261\273\345\236\213\346\223\246\351\231\244\344\270\216\346\241\245\346\216\245\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 泛型的类型擦除与桥接方法

    @@ -53,6 +53,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\273\247\346\211\277\344\270\216\346\263\233\345\236\213\346\216\245\345\217\243/index.html" "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\273\247\346\211\277\344\270\216\346\263\233\345\236\213\346\216\245\345\217\243/index.html" index 7b27a377..6bf53fc5 100644 --- "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\273\247\346\211\277\344\270\216\346\263\233\345\236\213\346\216\245\345\217\243/index.html" +++ "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\347\273\247\346\211\277\344\270\216\346\263\233\345\236\213\346\216\245\345\217\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 泛型中的继承与通配符

    @@ -40,6 +40,6 @@

    注意事
  • 在继承泛型类时，务必明确指定类型参数，避免类型擦除导致的运行时错误。
  • 使用泛型接口时，可以实现更灵活的代码，适用于多种类型的数据处理。
  • 在使用通配符时，super 定义下界，extends 定义上界，根据需求选择合适的关键字。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\350\257\246\350\247\243/index.html" "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\350\257\246\350\247\243/index.html" index c4938932..0a4e8a52 100644 --- "a/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\350\257\246\350\247\243/index.html" +++ "b/docs/Backend/Java/\346\263\233\345\236\213/\346\263\233\345\236\213\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 泛型详解

    @@ -39,6 +39,6 @@

    注意事
  • 泛型只能使用引用类型，不能使用基本类型。
  • 在使用泛型时，类型参数在编译期会进行类型擦除，因此在运行时无法获取实际的泛型类型。
  • 为了避免类型转换异常，应尽量在实例化泛型类时指定具体的类型参数。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\215\225\344\276\213\346\250\241\345\274\217/index.html" "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\215\225\344\276\213\346\250\241\345\274\217/index.html" index 8c47ae2b..ab37b836 100644 --- "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\215\225\344\276\213\346\250\241\345\274\217/index.html" +++ "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\215\225\344\276\213\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    设计模式

    @@ -35,6 +35,6 @@

    静态 
    package com.DesignPattern;

    public class StaticSingleton {
        private StaticSingleton () {
        }

        public static void sumingcheng () {
            System.out.println("staticSingleton");
        }
    }

    为什么需要单例模式​

    -

    设计工具类时，没有必要创建多个实例，因为工具类通常只有类的方法而没有属性。单例模式可以减少对象创建时的内存消耗，并提高访问效率。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    设计工具类时，没有必要创建多个实例，因为工具类通常只有类的方法而没有属性。单例模式可以减少对象创建时的内存消耗，并提高访问效率。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\267\245\345\216\202\346\250\241\345\274\217/index.html" "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\267\245\345\216\202\346\250\241\345\274\217/index.html" index 04adf8f3..8ca56e8f 100644 --- "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\267\245\345\216\202\346\250\241\345\274\217/index.html" +++ "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\345\267\245\345\216\202\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    工厂模式

    @@ -20,6 +20,6 @@ 
    public abstract class Animal {
        public abstract String makeSound();
    }

    public class Dog extends Animal {
        @Override
        public String makeSound() {
            return "Bark";
        }
    }

    public class Cat extends Animal {
        @Override
        public String makeSound() {
            return "Meow";
        }
    }

    public class AnimalFactory {
        public Animal createAnimal(String type) {
            if ("Dog".equalsIgnoreCase(type)) {
                return new Dog();
            } else if ("Cat".equalsIgnoreCase(type)) {
                return new Cat();
            }
            throw new IllegalArgumentException("Invalid animal type");
        }
    }

    public class Main {
        public static void main(String[] args) {
            AnimalFactory animalFactory = new AnimalFactory();

            Animal animal1 = animalFactory.createAnimal("Dog");
            System.out.println("Animal 1: " + animal1.makeSound());

            Animal animal2 = animalFactory.createAnimal("Cat");
            System.out.println("Animal 2: " + animal2.makeSound());
        }
    }

    实现​

    您可以在以下链接中找到完整的实现代码：

    -

    https://github.com/sumingcheng/Java-Learning/tree/main/src/com/DesignPattern/factory

    编辑此页
    最后由 sumingcheng 于 更新
    +

    https://github.com/sumingcheng/Java-Learning/tree/main/src/com/DesignPattern/factory

    \ No newline at end of file diff --git "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\346\250\241\346\235\277\346\226\271\346\263\225\346\250\241\345\274\217\344\270\216\346\212\275\350\261\241\347\261\273/index.html" "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\346\250\241\346\235\277\346\226\271\346\263\225\346\250\241\345\274\217\344\270\216\346\212\275\350\261\241\347\261\273/index.html" index 7ae36c12..2f664d14 100644 --- "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\346\250\241\346\235\277\346\226\271\346\263\225\346\250\241\345\274\217\344\270\216\346\212\275\350\261\241\347\261\273/index.html" +++ "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\346\250\241\346\235\277\346\226\271\346\263\225\346\250\241\345\274\217\344\270\216\346\212\275\350\261\241\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    模板方法模式示例

    @@ -32,6 +32,6 @@

    使

    在主类中，笔者展示了如何通过AdminController调用不同的 API 方法，统一管理登录过程。

    package com.DesignPattern.template_method;

    public class Main {
        public static void main(String[] args) {
            AdminController adminController = new AdminController();

            adminController.accessAPI("getUserInfo");
            adminController.accessAPI("getUserLikes");
            adminController.accessAPI("getUserFollowing");
        }
    }

    代码仓库​

    -

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/template_method at main · sumingcheng/Java-Learning

    编辑此页
    最后由 sumingcheng 于 更新
    +

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/template_method at main · sumingcheng/Java-Learning

    \ No newline at end of file diff --git "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\347\255\226\347\225\245\346\250\241\345\274\217\344\270\216\346\216\245\345\217\243\346\212\275\350\261\241\347\261\273/index.html" "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\347\255\226\347\225\245\346\250\241\345\274\217\344\270\216\346\216\245\345\217\243\346\212\275\350\261\241\347\261\273/index.html" index 11538c33..2d5d8223 100644 --- "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\347\255\226\347\225\245\346\250\241\345\274\217\344\270\216\346\216\245\345\217\243\346\212\275\350\261\241\347\261\273/index.html" +++ "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\347\255\226\347\225\245\346\250\241\345\274\217\344\270\216\346\216\245\345\217\243\346\212\275\350\261\241\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    策略模式示例

    @@ -41,6 +41,6 @@

    使

    输出示例​

    书籍 已添加到购物车.
    笔记本 已添加到购物车.
    使用信用卡支付 $150.0
    支付完成. 购物车已清空.
    耳机 已添加到购物车.
    使用PayPal支付 $75.0
    支付完成. 购物车已清空.
    手机 已添加到购物车.
    使用比特币支付 $300.0
    支付完成. 购物车已清空.

    代码仓库​

    -

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/strategy_2 at main · sumingcheng/Java-Learning

    编辑此页
    最后由 sumingcheng 于 更新
    +

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/strategy_2 at main · sumingcheng/Java-Learning

    \ No newline at end of file diff --git "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\200\202\351\205\215\345\231\250\346\250\241\345\274\217/index.html" "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\200\202\351\205\215\345\231\250\346\250\241\345\274\217/index.html" index a46df129..921def30 100644 --- "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\200\202\351\205\215\345\231\250\346\250\241\345\274\217/index.html" +++ "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\200\202\351\205\215\345\231\250\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    适配器模式示例

    @@ -32,6 +32,6 @@

    最后，笔者在 Main 类中演示了如何使用适配器对象。通过适配器对象调用 request 方法，客户端能够使用 Adaptee 对象的方法，而无需直接依赖其不兼容的接口。

    public class Main {
        public static void main(String[] args) {
            Adaptee adaptee = new Adaptee();
            Target target = new Adapter(adaptee);

            target.request();
        }
    }

    代码仓库​

    -

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/adapter at main · sumingcheng/Java-Learning

    编辑此页
    最后由 sumingcheng 于 更新
    +

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/adapter at main · sumingcheng/Java-Learning

    \ No newline at end of file diff --git "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\235\231\346\200\201\344\273\243\347\220\206\346\250\241\345\274\217/index.html" "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\235\231\346\200\201\344\273\243\347\220\206\346\250\241\345\274\217/index.html" index fc0ff4c1..09d53896 100644 --- "a/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\235\231\346\200\201\344\273\243\347\220\206\346\250\241\345\274\217/index.html" +++ "b/docs/Backend/Java/\350\256\276\350\256\241\346\250\241\345\274\217/\351\235\231\346\200\201\344\273\243\347\220\206\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    静态代理模式示例

    @@ -31,6 +31,6 @@

    使

    代码仓库​

    完整代码可访问以下链接：Java-Learning/src/com/DesignPattern/static_proxy at main · sumingcheng/Java-Learning

    注意事项​

    -

    在使用静态代理模式时，确保代理类和真实类实现相同的接口，这样代理对象才能透明地替代真实对象。此外，代理类可以在不修改真实类代码的情况下，灵活地添加额外的功能，如日志记录、权限检查等。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在使用静态代理模式时，确保代理类和真实类实现相同的接口，这样代理对象才能透明地替代真实对象。此外，代理类可以在不修改真实类代码的情况下，灵活地添加额外的功能，如日志记录、权限检查等。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-this\345\205\263\351\224\256\345\255\227\344\270\216\347\261\273\347\232\204\345\205\263\347\263\273/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-this\345\205\263\351\224\256\345\255\227\344\270\216\347\261\273\347\232\204\345\205\263\347\263\273/index.html" index fb6c611f..9fd85a3c 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-this\345\205\263\351\224\256\345\255\227\344\270\216\347\261\273\347\232\204\345\205\263\347\263\273/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-this\345\205\263\351\224\256\345\255\227\344\270\216\347\261\273\347\232\204\345\205\263\347\263\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    this 关键字与类的关系

    @@ -55,6 +55,6 @@

    注意事
  • 在构造方法中，当参数名称与成员变量相同时，使用 this 关键字可以清晰地区分它们，提升代码的可读性和可维护性。
  • 比较字符串内容时，应使用 equals 方法，而不是 ==，以确保内容的正确比较。
  • 优化变量名称，例如将 javaClass 改为 javaStudents，使变量的含义更加明确。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-\345\214\205\350\243\205\347\261\273/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-\345\214\205\350\243\205\347\261\273/index.html" index a95fd80a..11defb58 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-\345\214\205\350\243\205\347\261\273/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Java-\345\214\205\350\243\205\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 中的包装类

    @@ -32,6 +32,6 @@

    注意事

    缓存机制：Java 对某些数值范围的包装类对象进行了缓存，例如Integer类缓存了-128 到 127 之间的整数。这意味着在这个范围内，自动装箱的对象引用相同，==比较为true。超出这个范围时，每次装箱都会创建新的对象。

    性能考虑：虽然包装类提供了丰富的功能，但频繁使用装箱和拆箱可能会影响性能。在性能敏感的场景下，尽量使用基本数据类型。

    不可变性：包装类是不可变的，一旦创建，其值不可更改。这有助于提高线程安全性，但需要注意在需要可变数据类型时的选择。

    -

    空指针异常：包装类对象可以为null，在进行拆箱操作时，如果对象为null，会抛出NullPointerException。因此，在使用包装类时应确保对象不为null。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    空指针异常：包装类对象可以为null，在进行拆箱操作时，如果对象为null，会抛出NullPointerException。因此，在使用包装类时应确保对象不为null。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Object-\347\261\273\344\270\216\347\261\273\346\226\271\346\263\225/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Object-\347\261\273\344\270\216\347\261\273\346\226\271\346\263\225/index.html" index 2fb91d64..7c76a709 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Object-\347\261\273\344\270\216\347\261\273\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/Object-\347\261\273\344\270\216\347\261\273\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    通用方法

    @@ -93,6 +93,6 @@

    Person 类<
    • 垃圾回收机制是周期性的，并非在调用 System.gc() 后立即回收对象。
    • 不应依赖垃圾回收来释放关键资源，建议使用显式的资源管理策略。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/String-\345\256\236\344\276\213\346\226\271\346\263\225/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/String-\345\256\236\344\276\213\346\226\271\346\263\225/index.html" index 46b2b05d..58c33b58 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/String-\345\256\236\344\276\213\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/String-\345\256\236\344\276\213\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    String-实例方法的实战

    @@ -70,6 +70,6 @@

    字符运

    计算字符之间的差值，结果为整数。常用于字符的数值计算，如字母表位置计算。确保操作意图清晰，避免代码可读性下降。

    注意事项与提示​

    String类的不可变性使其在多线程环境中天然安全，但频繁的字符串修改操作会导致大量临时对象的创建，影响性能。推荐在需要频繁修改字符串的场景下使用StringBuilder或StringBuffer。在处理国际化应用时，进行大小写转换等操作时，务必考虑区域性（Locale）参数，以确保正确性。使用字符串方法时，注意可能抛出的异常，进行适当的异常处理或输入验证。理解正则表达式的语法和行为，避免在使用split、replace等方法时出现意外结果。

    -
    // 使用StringBuilder进行高效的字符串拼接
    StringBuilder stringBuilder = new StringBuilder(greeting);
    stringBuilder.append("!!!");
    System.out.println(stringBuilder.toString()); // Hello World!!!
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 使用StringBuilder进行高效的字符串拼接
    StringBuilder stringBuilder = new StringBuilder(greeting);
    stringBuilder.append("!!!");
    System.out.println(stringBuilder.toString()); // Hello World!!!
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\344\273\243\347\240\201\345\235\227\344\270\216\345\212\250\346\200\201\346\225\260\347\273\204/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\344\273\243\347\240\201\345\235\227\344\270\216\345\212\250\346\200\201\346\225\260\347\273\204/index.html" index 94c042a1..a894079f 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\344\273\243\347\240\201\345\235\227\344\270\216\345\212\250\346\200\201\346\225\260\347\273\204/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\344\273\243\347\240\201\345\235\227\344\270\216\345\212\250\346\200\201\346\225\260\347\273\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    代码块与动态数组

    代码块​

    @@ -125,6 +125,6 @@

    注意

    注意事项​

    -

    在使用代码块和动态数组时，应根据具体的应用场景和需求选择合适的实现方式。合理组织代码块可以提高代码的可读性和维护性，而动态数组的使用则可以在需要灵活数据存储时提供便利。确保理解每种代码块的执行顺序和作用范围，有助于编写高效、健壮的Java程序。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在使用代码块和动态数组时，应根据具体的应用场景和需求选择合适的实现方式。合理组织代码块可以提高代码的可读性和维护性，而动态数组的使用则可以在需要灵活数据存储时提供便利。确保理解每种代码块的执行顺序和作用范围，有助于编写高效、健壮的Java程序。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\200\274\344\274\240\351\200\222\344\270\216\345\274\225\347\224\250\344\274\240\351\200\222\347\232\204\345\216\237\347\220\206/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\200\274\344\274\240\351\200\222\344\270\216\345\274\225\347\224\250\344\274\240\351\200\222\347\232\204\345\216\237\347\220\206/index.html" index 0a961784..47465fbe 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\200\274\344\274\240\351\200\222\344\270\216\345\274\225\347\224\250\344\274\240\351\200\222\347\232\204\345\216\237\347\220\206/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\200\274\344\274\240\351\200\222\344\270\216\345\274\225\347\224\250\344\274\240\351\200\222\347\232\204\345\216\237\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    参数传递机制

    @@ -34,6 +34,6 @@

    返回

    对象内部拷贝​

    另一种方法是在传递对象之前创建其内部的拷贝。这种方式可以在方法内部安全地修改拷贝，而不影响原始对象。

    class Person {
        private String name;

        public Person(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public Person copy() {
            return new Person(this.name);
        }
    }

    public class Main {
        public static void main(String[] args) {
            Person originalPerson = new Person("John Doe");
            Person copiedPerson = originalPerson.copy();
            copiedPerson.setName("Jane Doe");
            System.out.println(originalPerson.getName()); // 输出 "John Doe"
            System.out.println(copiedPerson.getName()); // 输出 "Jane Doe"
        }
    }
    -

    在这个示例中，copy 方法创建了 Person 对象的一个新实例。修改 copiedPerson 的属性不会影响 originalPerson，确保了数据的独立性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个示例中，copy 方法创建了 Person 对象的一个新实例。修改 copiedPerson 的属性不会影响 originalPerson，确保了数据的独立性。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\232\346\200\201\347\232\204\344\270\211\345\244\247\347\211\271\346\200\247/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\232\346\200\201\347\232\204\344\270\211\345\244\247\347\211\271\346\200\247/index.html" index 61d2a249..d112401d 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\232\346\200\201\347\232\204\344\270\211\345\244\247\347\211\271\346\200\247/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\232\346\200\201\347\232\204\344\270\211\345\244\247\347\211\271\346\200\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    多态性

    @@ -28,6 +28,6 @@ 

    public class Main {
        public static void main(String[] args) {
            Animal myDog = new Dog();
            Animal myCat = new Cat();

            myDog.makeSound();
            myCat.makeSound();
        }
    }

    在上述示例中，myDog 和 myCat 虽然是 Animal 类型的引用，但其实际对象类型分别是 Dog 和 Cat。当调用 makeSound 方法时，会根据对象实际类型选择相应的子类实现，从而实现多态性。

    定义类规则​

    -

    具体类应尽量继承抽象类，从而统一子类的类型并易于后续扩展。若不需要父类中全部公共方法或属性，则可通过实现接口的方式定义所需行为。在类中定义方法时尽量使用接口或抽象类的抽象方法，以减少强制类型转换并确保代码更具扩展性与可维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    具体类应尽量继承抽象类，从而统一子类的类型并易于后续扩展。若不需要父类中全部公共方法或属性，则可通过实现接口的方式定义所需行为。在类中定义方法时尽量使用接口或抽象类的抽象方法，以减少强制类型转换并确保代码更具扩展性与可维护性。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\247\346\225\260\345\200\274\347\224\250\346\263\225/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\247\346\225\260\345\200\274\347\224\250\346\263\225/index.html" index db095ffc..6ea1aee7 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\247\346\225\260\345\200\274\347\224\250\346\263\225/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\244\247\346\225\260\345\200\274\347\224\250\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    BigInteger 和 BigDecimal 的实战指南

    @@ -94,6 +94,6 @@

    注意事项​

    BigInteger 和 BigDecimal 都是不可变的类，这使得它们在多线程环境中天然安全。然而，频繁的对象创建会影响性能，尤其是在需要大量计算时。推荐在需要频繁修改数值的场景下使用 StringBuilder 或其他优化方法。

    在处理国际化应用时，进行数值格式化等操作时，务必考虑区域性（Locale）参数，以确保正确性。使用字符串方法时，注意可能抛出的异常，进行适当的异常处理或输入验证。理解这些类的内部结构和方法的工作原理，有助于编写高效、可靠的 Java 代码。

    -
    // 使用StringBuilder进行高效的字符串拼接
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.append("The sum is: ").append(sum);
    System.out.println(stringBuilder.toString()); // The sum is: 12345678901234567990
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 使用StringBuilder进行高效的字符串拼接
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.append("The sum is: ").append(sum);
    System.out.println(stringBuilder.toString()); // The sum is: 12345678901234567990
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\257\271\350\261\241\345\257\271\345\272\224\345\205\263\347\263\273\347\232\204\346\246\202\345\277\265\344\270\216\345\210\233\345\273\272/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\257\271\350\261\241\345\257\271\345\272\224\345\205\263\347\263\273\347\232\204\346\246\202\345\277\265\344\270\216\345\210\233\345\273\272/index.html" index 5407ecc5..d4e886d3 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\257\271\350\261\241\345\257\271\345\272\224\345\205\263\347\263\273\347\232\204\346\246\202\345\277\265\344\270\216\345\210\233\345\273\272/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\257\271\350\261\241\345\257\271\345\272\224\345\205\263\347\263\273\347\232\204\346\246\202\345\277\265\344\270\216\345\210\233\345\273\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    对象的一对一关系创建

    @@ -66,6 +66,6 @@

    注意事

    注意事项​

    -

    在设计对象关系时，应根据实际需求选择合适的关系类型。一对一关系适用于紧密相关的对象，但在某些情况下，一对多或多对多关系可能更为合适。合理的对象关系设计可以显著提升系统的灵活性和可维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在设计对象关系时，应根据实际需求选择合适的关系类型。一对一关系适用于紧密相关的对象，但在某些情况下，一对多或多对多关系可能更为合适。合理的对象关系设计可以显著提升系统的灵活性和可维护性。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\270\270\351\207\217-\346\234\200\347\273\210\346\226\271\346\263\225\344\270\216\345\270\270\351\207\217\347\261\273/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\270\270\351\207\217-\346\234\200\347\273\210\346\226\271\346\263\225\344\270\216\345\270\270\351\207\217\347\261\273/index.html" index c038cc99..10eddeed 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\270\270\351\207\217-\346\234\200\347\273\210\346\226\271\346\263\225\344\270\216\345\270\270\351\207\217\347\261\273/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\345\270\270\351\207\217-\346\234\200\347\273\210\346\226\271\346\263\225\344\270\216\345\270\270\351\207\217\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    常量

    @@ -28,6 +28,6 @@

    常量类
    public final class Constants {

        private Constants() {
            // 防止实例化
        }

        public static final String BASE_URL = "https://www.example.com";
        public static final int MAX_CONNECTIONS = 100;

        // 更多常量
    }

    注意事项​

    final 类可以被实例化，但不能被继承。

    -

    使用 final 关键字可以防止类被继承，这在某些情况下非常有用。例如，当设计一个类具有重要功能且不希望其被更改时，可以将其声明为 final 类。同样，如果设计的类中的所有方法都不应被覆盖，可以将类声明为 final，这样类中的所有方法自动成为 final。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    使用 final 关键字可以防止类被继承，这在某些情况下非常有用。例如，当设计一个类具有重要功能且不希望其被更改时，可以将其声明为 final 类。同样，如果设计的类中的所有方法都不应被覆盖，可以将类声明为 final，这样类中的所有方法自动成为 final。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\210\220\345\221\230\345\206\205\351\203\250\347\261\273\344\270\216\346\226\271\346\263\225\345\206\205\351\203\250\347\261\273/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\210\220\345\221\230\345\206\205\351\203\250\347\261\273\344\270\216\346\226\271\346\263\225\345\206\205\351\203\250\347\261\273/index.html" index 10f3e8bd..bbae1608 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\210\220\345\221\230\345\206\205\351\203\250\347\261\273\344\270\216\346\226\271\346\263\225\345\206\205\351\203\250\347\261\273/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\210\220\345\221\230\345\206\205\351\203\250\347\261\273\344\270\216\346\226\271\346\263\225\345\206\205\351\203\250\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    成员内部类与方法内部类

    @@ -60,6 +60,6 @@

    参数匿名内部类​

    当需要将一个类的实例作为方法参数传递，而这个类可能在其他地方不会被使用时，可以使用参数匿名内部类。

    public class Main {
        public static void main(String[] args) {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    System.out.println("New thread created");
                }
            }).start();
        }
    }
    -

    在这个例子中，Runnable 接口通过匿名内部类得到了实现，并作为参数传递给 Thread 的构造方法。这种方式使得代码更加简洁，且无需为 Runnable 接口创建一个单独的实现类。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个例子中，Runnable 接口通过匿名内部类得到了实现，并作为参数传递给 Thread 的构造方法。这种方式使得代码更加简洁，且无需为 Runnable 接口创建一个单独的实现类。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\344\270\216\346\216\245\345\217\243\347\232\204\346\246\202\345\277\265\344\270\216\345\214\272\345\210\253/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\344\270\216\346\216\245\345\217\243\347\232\204\346\246\202\345\277\265\344\270\216\345\214\272\345\210\253/index.html" index 1274b704..2ff55c49 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\344\270\216\346\216\245\345\217\243\347\232\204\346\246\202\345\277\265\344\270\216\345\214\272\345\210\253/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\344\270\216\346\216\245\345\217\243\347\232\204\346\246\202\345\277\265\344\270\216\345\214\272\345\210\253/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用抽象类构建电源适配结构

    @@ -26,6 +26,6 @@

    代码示 
    package com.oop_4;

    public class BritishPowerSupply extends PowerSupply {
        public BritishPowerSupply() {
        }

        public BritishPowerSupply(String category) {
            super(category);
        }

        public void insert() {
            System.out.println("用方形插头插入英式插座");
        }

        public void extract() {
            System.out.println("从英式插座中拔出");
        }

        public void britishToChinese() {
            System.out.println("将英式插头转化为适合中国插座的适配形态");
        }
    }
    package com.oop_4;

    public class Test {
        public static void main(String[] args) {
            ChinesePowerSupply cps = new ChinesePowerSupply("sumingcheng");
            BritishPowerSupply bps = new BritishPowerSupply("sumingcheng");

            System.out.println(cps.getCategory());
            cps.insert();
            cps.extract();

            System.out.println("--------------");

            System.out.println(bps.getCategory());
            bps.insert();
            bps.extract();
            bps.britishToChinese();
        }
    }

    注意事项​

    -

    笔者建议在构建抽象类时仔细考虑抽象方法的设计，确保方法名和参数名具备良好的可读性和可理解性。此外，尽量将通用逻辑放入抽象父类，并让子类只关注本地化细节。通过这种方式可以减少重复代码，为后续扩展提供便利。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    笔者建议在构建抽象类时仔细考虑抽象方法的设计，确保方法名和参数名具备良好的可读性和可理解性。此外，尽量将通用逻辑放入抽象父类，并让子类只关注本地化细节。通过这种方式可以减少重复代码，为后续扩展提供便利。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\347\232\204\346\246\202\345\277\265\344\270\216\347\211\271\347\202\271/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\347\232\204\346\246\202\345\277\265\344\270\216\347\211\271\347\202\271/index.html" index ef6ae0b9..0586bb5d 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\347\232\204\346\246\202\345\277\265\344\270\216\347\211\271\347\202\271/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\212\275\350\261\241\347\261\273\347\232\204\346\246\202\345\277\265\344\270\216\347\211\271\347\202\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    抽象类 Abstract class

    @@ -29,6 +29,6 @@

    示例代码​

    public abstract class DBManager {
        protected abstract void registerDatabase();

        protected abstract void connectDatabase();

        protected void operateDatabase() {
            registerDatabase();
            connectDatabase();
        }
    }
    -
    public class MySQLManager extends DBManager {
        public MySQLManager() {
        }

        public void registerDatabase() {
            System.out.println("MySQLManager registering MySQL driver...");
        }

        public void connectDatabase() {
            System.out.println("MySQLManager connecting to MySQL database...");
        }
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    public class MySQLManager extends DBManager {
        public MySQLManager() {
        }

        public void registerDatabase() {
            System.out.println("MySQLManager registering MySQL driver...");
        }

        public void connectDatabase() {
            System.out.println("MySQLManager connecting to MySQL database...");
        }
    }
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\216\245\345\217\243\347\232\204\344\275\277\347\224\250\350\247\204\350\214\203/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\216\245\345\217\243\347\232\204\344\275\277\347\224\250\350\247\204\350\214\203/index.html" index 05406f89..777c575e 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\216\245\345\217\243\347\232\204\344\275\277\347\224\250\350\247\204\350\214\203/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\216\245\345\217\243\347\232\204\344\275\277\347\224\250\350\247\204\350\214\203/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    接口的基础与使用

    @@ -37,6 +37,6 @@

    静态方法与默认方法的区别​

    笔者在使用接口时关注到静态方法与默认方法是截然不同的概念。静态方法属于接口本身，可通过接口名直接调用，与类实例无关。默认方法则是为了给接口添加新功能时不影响已有实现类而设计的，默认方法在实现类中可直接使用，也可被覆盖。默认方法实现的是面向扩展的设计思路，静态方法则多用于提供通用工具逻辑。

    注意事项​

    -

    笔者建议在设计接口时确保接口方法的命名清晰易懂，参数与返回值定义明确。同时要保持接口方法的数量在合理范围内，避免接口过于冗杂。默认方法在扩展既有接口时非常实用，但应审慎使用，确保其存在确有必要。通过合理使用接口与抽象类，可以有效提升代码结构的清晰度与扩展性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    笔者建议在设计接口时确保接口方法的命名清晰易懂，参数与返回值定义明确。同时要保持接口方法的数量在合理范围内，避免接口过于冗杂。默认方法在扩展既有接口时非常实用，但应审慎使用，确保其存在确有必要。通过合理使用接口与抽象类，可以有效提升代码结构的清晰度与扩展性。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\347\261\273\347\232\204\350\256\276\350\256\241/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\347\261\273\347\232\204\350\256\276\350\256\241/index.html" index 6516fb7e..677c1828 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\347\261\273\347\232\204\350\256\276\350\256\241/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\347\261\273\347\232\204\350\256\276\350\256\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java的数据类型与类的设计

    @@ -67,6 +67,6 @@

    局部变

    在上述代码中，message 和 count 是局部变量，分别作为方法参数和在方法内部定义。

    注意事项​

    在设计类和选择数据类型时，应根据具体需求和项目规模进行合理选择。合理使用封装、访问修饰符和内部类等特性，可以大幅提升代码的可维护性和扩展性。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\227\245\346\234\237\344\270\216\346\227\245\345\216\206\345\244\204\347\220\206/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\227\245\346\234\237\344\270\216\346\227\245\345\216\206\345\244\204\347\220\206/index.html" index 578a0b58..f478131e 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\227\245\346\234\237\344\270\216\346\227\245\345\216\206\345\244\204\347\220\206/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\227\245\346\234\237\344\270\216\346\227\245\345\216\206\345\244\204\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    日期与日历处理

    @@ -26,6 +26,6 @@

    静态常

    日历实现​

    package com.data_calendar_learning;

    import java.util.Calendar;

    public class CalendarTest {

        public static void displayCurrentDate(Calendar calendar) {
            int year = calendar.get(Calendar.YEAR);
            int month = calendar.get(Calendar.MONTH) + 1; // 月份从0开始
            int day = calendar.get(Calendar.DAY_OF_MONTH);

            System.out.println("当前日期: " + year + "-" + month + "-" + day);
        }

        public static void main(String[] args) {
            Calendar calendar = Calendar.getInstance();

            calendar.set(Calendar.DAY_OF_MONTH, 1);
            int firstWeekday = calendar.get(Calendar.DAY_OF_WEEK);

            // 获取当月一共多少天
            calendar.add(Calendar.MONTH, 1);
            calendar.add(Calendar.DAY_OF_MONTH, -1);
            int daysInCurrentMonth = calendar.get(Calendar.DAY_OF_MONTH);
            int lastWeekday = calendar.get(Calendar.DAY_OF_WEEK);

            // 获取上个月一共多少天
            calendar.add(Calendar.MONTH, -1);
            int daysInLastMonth = calendar.get(Calendar.DAY_OF_MONTH);

            String[] weekdays = {"SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"};
            int[] calendarDays = new int[35];
            int index = 0;

            // 填充上个月在当前月日历中显示的天数
            for (int i = daysInLastMonth - firstWeekday + 2; i <= daysInLastMonth; i++) {
                calendarDays[index++] = i;
            }

            // 填充本月的天数
            for (int i = 1; i <= daysInCurrentMonth; i++) {
                calendarDays[index++] = i;
            }

            // 填充下个月在当前月日历中显示的天数
            for (int i = 1; i < 7 - lastWeekday; i++) {
                calendarDays[index++] = i;
            }

            // 星期视图
            for (String day : weekdays) {
                System.out.print(day + "\t");
            }
            System.out.println();

            // 日期视图
            for (int i = 0; i < calendarDays.length; i++) {
                System.out.print(calendarDays[i] + "\t");
                if ((i + 1) % 7 == 0) {
                    System.out.println();
                }
            }

            displayCurrentDate(calendar);
        }
    }

    提示

    -

    在处理日期和时间时，注意时区的影响，必要时使用TimeZone类进行设置，以确保时间的准确性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在处理日期和时间时，注意时区的影响，必要时使用TimeZone类进行设置，以确保时间的准确性。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\204\351\200\240\346\226\271\346\263\225\347\232\204\347\211\271\347\202\271/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\204\351\200\240\346\226\271\346\263\225\347\232\204\347\211\271\347\202\271/index.html" index b70a91db..b6f3cafb 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\204\351\200\240\346\226\271\346\263\225\347\232\204\347\211\271\347\202\271/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\204\351\200\240\346\226\271\346\263\225\347\232\204\347\211\271\347\202\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    构造方法的特点

    构造方法​

    @@ -25,6 +25,6 @@

    构

    无参构造方法为对象提供了默认的属性值。当不需要特定初始化时，可以使用这种构造方法快速创建对象。

    通过使用 this 关键字，可以在构造方法中引用当前对象的属性。这有助于区分成员变量和参数变量，确保属性被正确赋值。

    注意事项​

    -

    在定义构造方法时，应确保参数列表的唯一性，以支持构造方法的重载。同时，合理使用无参构造方法和带参数构造方法，可以提升代码的灵活性和可维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在定义构造方法时，应确保参数列表的唯一性，以支持构造方法的重载。同时，合理使用无参构造方法和带参数构造方法，可以提升代码的灵活性和可维护性。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\232\344\270\276\347\232\204\345\216\237\347\220\206/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\232\344\270\276\347\232\204\345\216\237\347\220\206/index.html" index 98d948d1..e0f7418f 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\232\344\270\276\347\232\204\345\216\237\347\220\206/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\346\236\232\344\270\276\347\232\204\345\216\237\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +在处理复杂状态码或需要附加信息的场景中，使用枚举封装状态码是一种优雅且高效的解决方案。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\347\261\273\347\232\204\346\264\276\347\224\237/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\347\261\273\347\232\204\346\264\276\347\224\237/index.html" index d8e55dff..5cce8bf2 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\347\261\273\347\232\204\346\264\276\347\224\237/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\347\261\273\347\232\204\346\264\276\347\224\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\231\346\200\201\345\261\236\346\200\247\345\222\214\346\226\271\346\263\225/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\231\346\200\201\345\261\236\346\200\247\345\222\214\346\226\271\346\263\225/index.html" index 419b88eb..72167a3a 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\231\346\200\201\345\261\236\346\200\247\345\222\214\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\231\346\200\201\345\261\236\346\200\247\345\222\214\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    静态属性和方法

    @@ -53,6 +53,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\344\270\216\351\235\242\345\220\221\350\277\207\347\250\213/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\344\270\216\351\235\242\345\220\221\350\277\207\347\250\213/index.html" index 0b8d75cf..e9996eb9 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\344\270\216\351\235\242\345\220\221\350\277\207\347\250\213/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\344\270\216\351\235\242\345\220\221\350\277\207\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    面向过程与面向对象

    @@ -31,6 +31,6 @@

    面向对

    面向对象具有多方面的优势：

    低耦合性使得系统各部分相对独立，便于复用和维护。扩展性强，可以方便地添加新功能。管理起来也更加方便，特别是在大型项目中表现尤为明显。

    注意事项​

    -

    在选择面向过程还是面向对象时，应根据项目的具体需求和规模进行权衡。对于简单且性能要求高的任务，面向过程可能更为适合。而对于复杂且需要良好维护性的项目，面向对象则是更好的选择。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在选择面向过程还是面向对象时，应根据项目的具体需求和规模进行权衡。对于简单且性能要求高的任务，面向过程可能更为适合。而对于复杂且需要良好维护性的项目，面向对象则是更好的选择。

    \ No newline at end of file diff --git "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213\347\244\272\344\276\213/index.html" "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213\347\244\272\344\276\213/index.html" index e18628dd..43220a10 100644 --- "a/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213\347\244\272\344\276\213/index.html" +++ "b/docs/Backend/Java/\351\235\242\345\220\221\345\257\271\350\261\241/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213\347\244\272\344\276\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Java 面向对象编程示例

    @@ -37,6 +37,6 @@

    JavaSt
  • 确保 getStudent 方法输出的字符串格式规范，便于阅读和调试。

    • 注意事项​

    -

    在使用这些类时，确保正确处理可能的 null 值，特别是在调用 find 方法后，返回值可能为 null。在实际应用中，建议增加更多的错误处理和输入验证，以提高程序的健壮性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在使用这些类时，确保正确处理可能的 null 值，特别是在调用 find 方法后，返回值可能为 null。在实际应用中，建议增加更多的错误处理和输入验证，以提高程序的健壮性。

    \ No newline at end of file diff --git "a/docs/Backend/MQ/Go-Kafka\345\256\211\350\243\205\344\275\277\347\224\250\346\214\207\345\215\227.md/index.html" "b/docs/Backend/MQ/Go-Kafka\345\256\211\350\243\205\344\275\277\347\224\250\346\214\207\345\215\227.md/index.html" index b6a03eb3..4a931712 100644 --- "a/docs/Backend/MQ/Go-Kafka\345\256\211\350\243\205\344\275\277\347\224\250\346\214\207\345\215\227.md/index.html" +++ "b/docs/Backend/MQ/Go-Kafka\345\256\211\350\243\205\344\275\277\347\224\250\346\214\207\345\215\227.md/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Go 语言中使用 Kafka 的安装和使用指南

    @@ -58,6 +58,6 @@

    运行代 
    go run consumer.go

    测试 Kafka​

    发送消息后，消费者终端应显示：

    -
    收到消息：Hello Kafka from Go!
    编辑此页
    最后由 sumingcheng 于 更新
    +
    收到消息：Hello Kafka from Go!
    \ No newline at end of file diff --git "a/docs/Backend/MongoDB/MongoDB\345\256\211\345\205\250\344\270\216\346\235\203\351\231\220/index.html" "b/docs/Backend/MongoDB/MongoDB\345\256\211\345\205\250\344\270\216\346\235\203\351\231\220/index.html" index 8a5ba15c..d5817ae2 100644 --- "a/docs/Backend/MongoDB/MongoDB\345\256\211\345\205\250\344\270\216\346\235\203\351\231\220/index.html" +++ "b/docs/Backend/MongoDB/MongoDB\345\256\211\345\205\250\344\270\216\346\235\203\351\231\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MongoDB 安全与权限管理

    @@ -50,6 +50,6 @@

    静态加 
    security:
      enableEncryption: true
      encryptionKeyFile: /path/to/key.file

    字段级加密​

    对于敏感字段，笔者实施了字段级加密：

    -
    db.createCollection('users', {
      validator: {
        $jsonSchema: {
          properties: {
            ssn: {
              encrypt: {
                keyId: [UUID('key1')],
                algorithm: 'AEAD_AES_256_CBC_HMAC_SHA_512_Random',
              },
            },
          },
        },
      },
    });
    编辑此页
    最后由 sumingcheng 于 更新
    +
    db.createCollection('users', {
      validator: {
        $jsonSchema: {
          properties: {
            ssn: {
              encrypt: {
                keyId: [UUID('key1')],
                algorithm: 'AEAD_AES_256_CBC_HMAC_SHA_512_Random',
              },
            },
          },
        },
      },
    });
    \ No newline at end of file diff --git "a/docs/Backend/MongoDB/MongoDB\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" "b/docs/Backend/MongoDB/MongoDB\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" index 6302ce45..43739445 100644 --- "a/docs/Backend/MongoDB/MongoDB\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" +++ "b/docs/Backend/MongoDB/MongoDB\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MongoDB 安装与使用指南

    @@ -64,6 +64,6 @@

    安全配

    启用用户认证机制，创建具有不同权限的用户，确保数据库安全。

    性能优化​

    为常用的查询字段建立索引，提高查询效率：

    -
    db.users.createIndex({ email: 1 });
    编辑此页
    最后由 sumingcheng 于 更新
    +
    db.users.createIndex({ email: 1 });
    \ No newline at end of file diff --git "a/docs/Backend/MongoDB/MongoDB\347\264\242\345\274\225\344\270\216\346\237\245\350\257\242/index.html" "b/docs/Backend/MongoDB/MongoDB\347\264\242\345\274\225\344\270\216\346\237\245\350\257\242/index.html" index b7186c23..98404662 100644 --- "a/docs/Backend/MongoDB/MongoDB\347\264\242\345\274\225\344\270\216\346\237\245\350\257\242/index.html" +++ "b/docs/Backend/MongoDB/MongoDB\347\264\242\345\274\225\344\270\216\346\237\245\350\257\242/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MongoDB 索引与查询优化

    @@ -54,6 +54,6 @@

    资 
    // 查看索引大小
    db.users.stats().indexSizes;

    // 查看数据库内存使用
    db.serverStatus().mem;

    了解资源使用情况有助于做出合理的性能优化决策。

    注意事项​

    -

    创建索引时需考虑其对写操作的影响，避免过多索引导致写入性能下降。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    创建索引时需考虑其对写操作的影响，避免过多索引导致写入性能下降。

    \ No newline at end of file diff --git "a/docs/Backend/MongoDB/MongoDB\350\201\232\345\220\210\344\270\216\345\273\272\346\250\241/index.html" "b/docs/Backend/MongoDB/MongoDB\350\201\232\345\220\210\344\270\216\345\273\272\346\250\241/index.html" index 9352bfe1..fbdff181 100644 --- "a/docs/Backend/MongoDB/MongoDB\350\201\232\345\220\210\344\270\216\345\273\272\346\250\241/index.html" +++ "b/docs/Backend/MongoDB/MongoDB\350\201\232\345\220\210\344\270\216\345\273\272\346\250\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MongoDB 聚合操作与数据建模

    @@ -53,6 +53,6 @@

    数据压 
    db.createCollection('logs', {
      storageEngine: {
        wiredTiger: {
          configString: 'block_compressor=zlib',
        },
      },
    });

    使用数据压缩不仅节省了存储空间，还在一定程度上提高了 I/O 性能。

    注意事项​

    -

    在设计聚合管道和数据模型时，需权衡查询性能与数据冗余，合理选择嵌入式或引用式模型以满足业务需求。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在设计聚合管道和数据模型时，需权衡查询性能与数据冗余，合理选择嵌入式或引用式模型以满足业务需求。

    \ No newline at end of file diff --git "a/docs/Backend/MySQL/MySQL\344\270\273\344\273\216\345\244\215\345\210\266\344\270\216\350\257\273\345\206\231\345\210\206\347\246\273/index.html" "b/docs/Backend/MySQL/MySQL\344\270\273\344\273\216\345\244\215\345\210\266\344\270\216\350\257\273\345\206\231\345\210\206\347\246\273/index.html" index be60ac61..442babb1 100644 --- "a/docs/Backend/MySQL/MySQL\344\270\273\344\273\216\345\244\215\345\210\266\344\270\216\350\257\273\345\206\231\345\210\206\347\246\273/index.html" +++ "b/docs/Backend/MySQL/MySQL\344\270\273\344\273\216\345\244\215\345\210\266\344\270\216\350\257\273\345\206\231\345\210\206\347\246\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 主从复制与读写分离

    @@ -50,6 +50,6 @@

    最佳实

    在主服务器上定期备份数据，这样在主服务器出现故障并需要从从服务器切换时，手头有完整备份可以快速恢复。

    监控复制延迟情况，如果延迟过高，我会考虑增加从服务器数量、优化查询结构或者使用更高性能的硬件。

    在复杂查询多的环境中，为减少复制延迟，我会尽量将写操作集中在必要的关键操作上，减少长事务。

    -

    官方文档

    编辑此页
    最后由 sumingcheng 于 更新
    +

    官方文档

    \ No newline at end of file diff --git "a/docs/Backend/MySQL/MySQL\344\272\213\345\212\241\344\270\216\351\224\201\346\234\272\345\210\266/index.html" "b/docs/Backend/MySQL/MySQL\344\272\213\345\212\241\344\270\216\351\224\201\346\234\272\345\210\266/index.html" index 2aa11f7f..81756af0 100644 --- "a/docs/Backend/MySQL/MySQL\344\272\213\345\212\241\344\270\216\351\224\201\346\234\272\345\210\266/index.html" +++ "b/docs/Backend/MySQL/MySQL\344\272\213\345\212\241\344\270\216\351\224\201\346\234\272\345\210\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 事务与锁机制

    @@ -62,6 +62,6 @@

    最佳实 使用行级锁以提升并发性能
    避免长时间持有锁减少死锁风险
    定期监控和分析锁等待优化数据库设计
    -确保事务尽量简短减少资源占用

    编辑此页
    最后由 sumingcheng 于 更新
    +确保事务尽量简短减少资源占用

    \ No newline at end of file diff --git "a/docs/Backend/MySQL/MySQL\345\255\230\345\202\250\345\274\225\346\223\216\350\257\246\350\247\243/index.html" "b/docs/Backend/MySQL/MySQL\345\255\230\345\202\250\345\274\225\346\223\216\350\257\246\350\247\243/index.html" index bab80511..08c055e8 100644 --- "a/docs/Backend/MySQL/MySQL\345\255\230\345\202\250\345\274\225\346\223\216\350\257\246\350\247\243/index.html" +++ "b/docs/Backend/MySQL/MySQL\345\255\230\345\202\250\345\274\225\346\223\216\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 存储引擎详解

    @@ -83,6 +83,6 @@

    相关工

    日常运维中可使用 Percona Toolkit 进行慢查询分析与数据校验，加速故障定位与性能优化。MySQL Workbench 可视化管理工具方便查看结构、执行查询并修改配置。phpMyAdmin 基于 Web 界面，适合中小型系统日常维护。

    例如在业务高峰前通过 Percona Toolkit 分析慢查询日志，发现某条订单统计查询过慢后及时添加索引，保证晚间促销时用户仍能流畅下单。

    存储引擎特性对比表​

    -
    引擎名称事务支持锁类型全文索引内存存储水平扩展数据压缩使用场景
    InnoDB是行级锁是 (5.6+)否否是金融与强一致性系统
    MyISAM否表级锁是否否否内容检索与读多写少场景
    MEMORY否行级锁否是否否临时缓存与快速读写
    NDB是行级锁否部分(内存+磁盘)是否分布式集群与高可用环境
    ARCHIVE否行级锁否否否是历史日志归档与长期存储
    编辑此页
    最后由 sumingcheng 于 更新
    +
    引擎名称事务支持锁类型全文索引内存存储水平扩展数据压缩使用场景
    InnoDB是行级锁是 (5.6+)否否是金融与强一致性系统
    MyISAM否表级锁是否否否内容检索与读多写少场景
    MEMORY否行级锁否是否否临时缓存与快速读写
    NDB是行级锁否部分(内存+磁盘)是否分布式集群与高可用环境
    ARCHIVE否行级锁否否否是历史日志归档与长期存储
    \ No newline at end of file diff --git "a/docs/Backend/MySQL/MySQL\346\200\247\350\203\275\344\274\230\345\214\226\345\256\236\350\267\265/index.html" "b/docs/Backend/MySQL/MySQL\346\200\247\350\203\275\344\274\230\345\214\226\345\256\236\350\267\265/index.html" index e8b7ced7..6177990a 100644 --- "a/docs/Backend/MySQL/MySQL\346\200\247\350\203\275\344\274\230\345\214\226\345\256\236\350\267\265/index.html" +++ "b/docs/Backend/MySQL/MySQL\346\200\247\350\203\275\344\274\230\345\214\226\345\256\236\350\267\265/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 性能优化实践

    @@ -95,6 +95,6 @@

    Percona Toolkit​

    Percona Toolkit 提供丰富的管理与分析工具，协助进行数据同步校验、查询分析与表结构优化。在频繁变动的数据环境中可通过该工具监控指标与性能变化，快速定位异常查询。

    MySQL Workbench​

    -

    MySQL Workbench 提供可视化界面，易于查看结构、执行查询和监控性能。通过该工具可在数据量激增前提前发现潜在瓶颈，并在问题显现前完成优化。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    MySQL Workbench 提供可视化界面，易于查看结构、执行查询和监控性能。通过该工具可在数据量激增前提前发现潜在瓶颈，并在问题显现前完成优化。

    \ No newline at end of file diff --git "a/docs/Backend/MySQL/MySQL\346\225\260\346\215\256\345\272\223\350\214\203\345\274\217/index.html" "b/docs/Backend/MySQL/MySQL\346\225\260\346\215\256\345\272\223\350\214\203\345\274\217/index.html" index 0d218089..24d676b9 100644 --- "a/docs/Backend/MySQL/MySQL\346\225\260\346\215\256\345\272\223\350\214\203\345\274\217/index.html" +++ "b/docs/Backend/MySQL/MySQL\346\225\260\346\215\256\345\272\223\350\214\203\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 数据库范式

    @@ -78,6 +78,6 @@

    规范

    最佳实践​

    在设计数据库时，按照范式逐步规范化，确保数据的完整性和一致性。

    定期审查和优化数据库结构，必要时进行反规范化以提升查询性能。

    -

    使用外键约束维护表之间的关系，确保数据的参照完整性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    使用外键约束维护表之间的关系，确保数据的参照完整性。

    \ No newline at end of file diff --git "a/docs/Backend/MySQL/MySQL\347\264\242\345\274\225\345\216\237\347\220\206\344\270\216\344\274\230\345\214\226/index.html" "b/docs/Backend/MySQL/MySQL\347\264\242\345\274\225\345\216\237\347\220\206\344\270\216\344\274\230\345\214\226/index.html" index 14012b00..89e07b77 100644 --- "a/docs/Backend/MySQL/MySQL\347\264\242\345\274\225\345\216\237\347\220\206\344\270\216\344\274\230\345\214\226/index.html" +++ "b/docs/Backend/MySQL/MySQL\347\264\242\345\274\225\345\216\237\347\220\206\344\270\216\344\274\230\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 索引原理与优化

    @@ -61,6 +61,6 @@

    实战检索与优化​

    我在优化索引时常用 EXPLAIN 分析 SQL 执行计划，通过查看 type、key、rows 等字段了解索引使用情况。如果发现查询未使用预期的索引，我会考虑是否存在函数调用、查询条件顺序、索引列区分度不足等问题。

    EXPLAIN SELECT * FROM orders WHERE user_id = 6789 AND order_date > '2024-01-01';
    -

    通过这种方式，我能快速定位索引问题并有针对性地进行优化。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这种方式，我能快速定位索引问题并有针对性地进行优化。

    \ No newline at end of file diff --git "a/docs/Backend/MySQL/\345\270\270\347\224\250SQL\350\257\255\345\217\245/index.html" "b/docs/Backend/MySQL/\345\270\270\347\224\250SQL\350\257\255\345\217\245/index.html" index 0f154f59..2f0b2d7e 100644 --- "a/docs/Backend/MySQL/\345\270\270\347\224\250SQL\350\257\255\345\217\245/index.html" +++ "b/docs/Backend/MySQL/\345\270\270\347\224\250SQL\350\257\255\345\217\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MySQL 常用 SQL 语句分类

    @@ -85,6 +85,6 @@

    综合示
  • 在进行批量更新或删除操作时，使用事务确保操作的完整性和一致性。
    • -

    通过以上分类和示例，希望能帮助您更好地理解和使用 MySQL 常用的 SQL 语句。在实际应用中，多加练习和参考官方文档，将进一步提升您的数据库操作能力。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过以上分类和示例，希望能帮助您更好地理解和使用 MySQL 常用的 SQL 语句。在实际应用中，多加练习和参考官方文档，将进一步提升您的数据库操作能力。

    \ No newline at end of file diff --git "a/docs/Backend/Nginx/Nginx\345\237\272\347\241\200\345\205\245\351\227\250/index.html" "b/docs/Backend/Nginx/Nginx\345\237\272\347\241\200\345\205\245\351\227\250/index.html" index 309a02c8..7cd36e9e 100644 --- "a/docs/Backend/Nginx/Nginx\345\237\272\347\241\200\345\205\245\351\227\250/index.html" +++ "b/docs/Backend/Nginx/Nginx\345\237\272\347\241\200\345\205\245\351\227\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    注意：在进行配置修改后，务必使用nginx -t命令检查配置文件的正确性。

    \ No newline at end of file diff --git "a/docs/Backend/Nginx/Nginx\345\256\211\345\205\250\344\270\216\346\200\247\350\203\275\344\274\230\345\214\226/index.html" "b/docs/Backend/Nginx/Nginx\345\256\211\345\205\250\344\270\216\346\200\247\350\203\275\344\274\230\345\214\226/index.html" index f280334b..ebc63ee7 100644 --- "a/docs/Backend/Nginx/Nginx\345\256\211\345\205\250\344\270\216\346\200\247\350\203\275\344\274\230\345\214\226/index.html" +++ "b/docs/Backend/Nginx/Nginx\345\256\211\345\205\250\344\270\216\346\200\247\350\203\275\344\274\230\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Nginx 安全与性能优化

    @@ -73,6 +73,6 @@

    优化静态文件服务​

    配置 Nginx 高效地提供静态文件，减少服务器负载：

    server {
        listen 80;
        server_name static.example.com;

        root /var/www/static;
        index index.html;

        location / {
            try_files $uri $uri/ =404;
            expires 30d;
            add_header Cache-Control "public, no-transform";
        }
    }
    -

    expires指令设置浏览器缓存时间，Cache-Control优化缓存策略。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    expires指令设置浏览器缓存时间，Cache-Control优化缓存策略。

    \ No newline at end of file diff --git "a/docs/Backend/Nginx/Nginx\350\264\237\350\275\275\345\235\207\350\241\241\351\205\215\347\275\256/index.html" "b/docs/Backend/Nginx/Nginx\350\264\237\350\275\275\345\235\207\350\241\241\351\205\215\347\275\256/index.html" index 3e99ab97..33dd9baa 100644 --- "a/docs/Backend/Nginx/Nginx\350\264\237\350\275\275\345\235\207\350\241\241\351\205\215\347\275\256/index.html" +++ "b/docs/Backend/Nginx/Nginx\350\264\237\350\275\275\345\235\207\350\241\241\351\205\215\347\275\256/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Nginx 负载均衡配置

    @@ -62,6 +62,6 @@

    启用缓

    启用 Gzip 压缩​

    启用 Gzip 压缩可以减少传输的数据量，提高加载速度。

    http {
        gzip on;
        gzip_types text/plain application/json application/javascript text/css;
        gzip_min_length 256;
    }
    -

    在http块中添加 Gzip 配置，以压缩特定类型的文件。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在http块中添加 Gzip 配置，以压缩特定类型的文件。

    \ No newline at end of file diff --git "a/docs/Backend/Nginx/Nginx\351\253\230\345\217\257\347\224\250\351\203\250\347\275\262/index.html" "b/docs/Backend/Nginx/Nginx\351\253\230\345\217\257\347\224\250\351\203\250\347\275\262/index.html" index 494dc4ae..791d9baa 100644 --- "a/docs/Backend/Nginx/Nginx\351\253\230\345\217\257\347\224\250\351\203\250\347\275\262/index.html" +++ "b/docs/Backend/Nginx/Nginx\351\253\230\345\217\257\347\224\250\351\203\250\347\275\262/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Nginx 高可用部署

    @@ -38,6 +38,6 @@

    使用云服务的负载均衡器​

    利用云提供商的负载均衡器，如 AWS ELB 或 Azure Load Balancer，可以简化高可用性部署，并集成自动扩展和健康监控功能。

    监控和维护​

    -

    定期监控 Nginx 服务器的性能和健康状态，使用工具如 Prometheus 和 Grafana 进行实时监控。及时更新和维护配置，确保高可用架构的稳定运行。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    定期监控 Nginx 服务器的性能和健康状态，使用工具如 Prometheus 和 Grafana 进行实时监控。及时更新和维护配置，确保高可用架构的稳定运行。

    \ No newline at end of file diff --git "a/docs/Backend/Nginx/\351\205\215\347\275\256\344\270\216\344\274\230\345\214\226/index.html" "b/docs/Backend/Nginx/\351\205\215\347\275\256\344\270\216\344\274\230\345\214\226/index.html" index 612aef37..85932fae 100644 --- "a/docs/Backend/Nginx/\351\205\215\347\275\256\344\270\216\344\274\230\345\214\226/index.html" +++ "b/docs/Backend/Nginx/\351\205\215\347\275\256\344\270\216\344\274\230\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Nginx 配置与优化

    @@ -37,6 +37,6 @@

    注意事

    修改配置文件后，使用以下命令检查语法是否正确：

    sudo nginx -t

    如果 Nginx 无法启动或配置未生效，请查看 /var/log/nginx/error.log 获取更多信息。

    -

    定期更新 Nginx 和相关组件，及时应用安全补丁。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    定期更新 Nginx 和相关组件，及时应用安全补丁。

    \ No newline at end of file diff --git "a/docs/Backend/Python/stable-diffusion/AI-\345\267\245\345\205\267/index.html" "b/docs/Backend/Python/stable-diffusion/AI-\345\267\245\345\205\267/index.html" index f68dafe0..4f0f45b8 100644 --- "a/docs/Backend/Python/stable-diffusion/AI-\345\267\245\345\205\267/index.html" +++ "b/docs/Backend/Python/stable-diffusion/AI-\345\267\245\345\205\267/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    外网未导入学生信息

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/Better-Prompt/index.html b/docs/Backend/Python/stable-diffusion/Better-Prompt/index.html index ff24e276..01a59b82 100644 --- a/docs/Backend/Python/stable-diffusion/Better-Prompt/index.html +++ b/docs/Backend/Python/stable-diffusion/Better-Prompt/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    提示词网站

    @@ -22,6 +22,6 @@

    https://arthub.ai/community

    使用 ChatGPT 生成 prompt​

    success

    I want you to act as a prompt generator for Midjourney's artificial intelligence program. Your job is to provide detailed and creative descriptions that will inspire unique and interesting images from the AI. Keep in mind that the AI is capable of understanding a wide range of language and can interpret abstract concepts, so feel free to be as imaginative and descriptive as possible. For example, you could describe a scene from a futuristic city, or a surreal landscape filled with strange creatures. The more detailed and imaginative your description, the more interesting the resulting image will be.

    Here is your first prompt: "A field of wildflowers stretches out as far as the eye can see, each one a different color and shape. In the distance, a massive tree towers over the landscape, its branches reaching up to the sky like tentacles."

    -
    success

    译：我希望你充当 Midjourney 人工智能程序的提示生成器。你的工作是提供详细且富有创意的描述，从而激发人工智能创作出独特且有趣的图像。请记住，人工智能能够理解多种语言，并且可以解释抽象概念，因此请尽可能发挥想象力和描述性。例如，您可以描述未来城市的场景，或充满奇怪生物的超现实景观。您的描述越详细、越富有想象力，生成的图像就会越有趣。

    这是你的第一个提示：“一片野花一望无际，每一朵都有不同的颜色和形状。远处，一棵巨大的树高耸在风景之上，它的树枝像触手一样伸向天空”。

    编辑此页
    最后由 sumingcheng 于 更新
    +
    success

    译：我希望你充当 Midjourney 人工智能程序的提示生成器。你的工作是提供详细且富有创意的描述，从而激发人工智能创作出独特且有趣的图像。请记住，人工智能能够理解多种语言，并且可以解释抽象概念，因此请尽可能发挥想象力和描述性。例如，您可以描述未来城市的场景，或充满奇怪生物的超现实景观。您的描述越详细、越富有想象力，生成的图像就会越有趣。

    这是你的第一个提示：“一片野花一望无际，每一朵都有不同的颜色和形状。远处，一棵巨大的树高耸在风景之上，它的树枝像触手一样伸向天空”。

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/GET-loar/index.html b/docs/Backend/Python/stable-diffusion/GET-loar/index.html index 40b0732f..a59795e2 100644 --- a/docs/Backend/Python/stable-diffusion/GET-loar/index.html +++ b/docs/Backend/Python/stable-diffusion/GET-loar/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    GET-loar

    获取 loar 模型​

    @@ -30,6 +30,6 @@

    成功响

    状态码：200 OK

    响应示例：响应返回所有 loar 模型

    :::

    -
    [
      {
        "name": "interior02_SDLife_Chiasedamme_v2.0",
        "alias": "interior02_SDLife_Chiasedamme_v2.0",
        "path": "D:\\Desktop\\stable-diffusion\\stable-diffusion-webui-windows\\models\\Lora\\interior02_SDLife_Chiasedamme_v2.0.safetensors",
        "metadata": {
          "ss_sd_model_name": "architecture_Interior_SDlife_Chiasedamme_V8.0.safetensors",
          "ss_resolution": "(768, 768)",
          "ss_clip_skip": "None",
          "ss_num_train_images": "2160",
          "ss_tag_frequency": {
            "48_interior02 architecture": {
              "interior02 architecture": 45
            }
          },
          "ss_learning_rate": "0.0001",
          "ss_num_epochs": "12",
          "ss_network_alpha": "16.0",
          "ss_max_token_length": "None",
          "modelspec.resolution": "768x768",
          "ss_v2": "False",
          "ss_shuffle_caption": "False",
          "ss_sd_model_hash": "f0e4fa9a",
          "ss_reg_dataset_dirs": {},
          "ss_optimizer": "bitsandbytes.optim.adamw.AdamW8bit",
          "ss_num_batches_per_epoch": "540",
          "ss_training_started_at": "1695006725.11778",
          "ss_random_crop": "False",
          "modelspec.date": "2023-09-18T11:27:17",
          "ss_training_finished_at": "1695011237.89221",
          "sshs_legacy_hash": "c6bd8f94",
          "modelspec.sai_model_spec": "1.0.0",
          "ss_session_id": "1836462696",
          "ss_multires_noise_iterations": "None",
          "ss_zero_terminal_snr": "False",
          "ss_max_grad_norm": "1.0",
          "ss_caption_dropout_rate": "0.0",
          "ss_min_snr_gamma": "None",
          "ss_text_encoder_lr": "5e-05",
          "ss_color_aug": "False",
          "ss_unet_lr": "0.0001",
          "ss_dataset_dirs": {
            "48_interior02 architecture": {
              "n_repeats": 48,
              "img_count": 45
            }
          },
          "ss_new_sd_model_hash": "cd28826de2db604dc984309c5b229208f7d2cde182f6b5f7f214d03e53c969cb",
          "ss_gradient_accumulation_steps": "1",
          "ss_prior_loss_weight": "1.0",
          "ss_caption_tag_dropout_rate": "0.0",
          "ss_gradient_checkpointing": "False",
          "ss_epoch": "12",
          "ss_lr_scheduler": "cosine",
          "ss_mixed_precision": "fp16",
          "ss_cache_latents": "True",
          "ss_face_crop_aug_range": "None",
          "ss_batch_size_per_device": "4",
          "ss_seed": "1397213995",
          "ss_min_bucket_reso": "256",
          "ss_keep_tokens": "0",
          "ss_network_dim": "128",
          "modelspec.implementation": "diffusers",
          "modelspec.prediction_type": "epsilon",
          "ss_max_bucket_reso": "2048",
          "modelspec.architecture": "stable-diffusion-v1/lora",
          "ss_lr_warmup_steps": "648",
          "ss_lowram": "False",
          "ss_multires_noise_discount": "0.3",
          "sshs_model_hash": "a06590955343b7ae811b27534cc099e158746b305aa843cf79174974e356a4cc",
          "ss_noise_offset": "0.0",
          "ss_training_comment": "https://stablediffusion.life",
          "ss_output_name": "interior02_SDLife_Chiasedamme_v2.0",
          "ss_bucket_info": {
            "buckets": {
              "0": {
                "resolution": [512, 960],
                "count": 96
              },
              "1": {
                "resolution": [576, 1024],
                "count": 48
              },
              "2": {
                "resolution": [704, 640],
                "count": 144
              },
              "3": {
                "resolution": [768, 640],
                "count": 48
              },
              "4": {
                "resolution": [832, 704],
                "count": 48
              },
              "5": {
                "resolution": [896, 512],
                "count": 1584
              },
              "6": {
                "resolution": [960, 576],
                "count": 48
              },
              "7": {
                "resolution": [1024, 576],
                "count": 144
              }
            },
            "mean_img_ar_error": 0.04149464646381378
          },
          "ss_steps": "6480",
          "ss_num_reg_images": "0",
          "ss_max_train_steps": "6480",
          "modelspec.title": "interior02_SDLife_Chiasedamme_v2.0",
          "ss_network_dropout": "None",
          "ss_network_module": "networks.lora",
          "ss_sd_scripts_commit_hash": "(unknown)",
          "ss_bucket_no_upscale": "True",
          "ss_flip_aug": "False",
          "ss_full_fp16": "False",
          "ss_total_batch_size": "4",
          "ss_scale_weight_norms": "None",
          "ss_base_model_version": "sd_v1",
          "ss_adaptive_noise_scale": "None",
          "ss_caption_dropout_every_n_epochs": "0",
          "ss_enable_bucket": "True"
        }
      },
      {
        "name": "yjcf_yoga10-000039",
        "alias": "yjcf_yoga10",
        "path": "D:\\Desktop\\stable-diffusion\\stable-diffusion-webui-windows\\models\\Lora\\yjcf_yoga10-000039.safetensors",
        "metadata": {
          "ss_sd_model_name": "chilloutmix_NiPrunedFp32Fix.safetensors",
          "ss_resolution": "(768, 512)",
          "ss_clip_skip": "1",
          "ss_num_train_images": "690",
          "ss_tag_frequency": {
            "10_yoga10": {
              "yjcf_yujia": 33,
              "no humans": 28,
              "white mat": 30,
              "mirror": 30,
              "curtains": 16,
              "window": 19,
              "potted plant": 33,
              "wooden floor": 29,
              "pillar": 1,
              "logo": 7,
              "pillow": 48,
              "ball": 26,
              "black mat": 16,
              "shelf": 24,
              "towel": 14,
              "moon": 2,
              "sky": 6,
              "draw": 5,
              "door": 11,
              "water pipe": 1,
              "chinese text": 8,
              "dumbbell": 3,
              "kettlebell": 6,
              "jar": 1,
              "lamp": 2,
              "ceiling light": 6,
              "cylinder": 9,
              "light bar": 2,
              "english text": 3,
              "night sky": 1,
              "sculpture": 1,
              "cup": 3,
              "dumbbell，cylinder": 1,
              "kettlebell，cylinder": 2,
              "model decoration": 1,
              "chair": 1
            }
          },
          "ss_batch_size_per_device": "8",
          "ss_bucket_info": {
            "buckets": {
              "0": {
                "resolution": [512, 768],
                "count": 160
              },
              "1": {
                "resolution": [768, 512],
                "count": 530
              }
            },
            "mean_img_ar_error": 0.0002518045996306877
          },
          "ss_bucket_no_upscale": "False",
          "ss_cache_latents": "True",
          "ss_caption_dropout_every_n_epochs": "0",
          "ss_caption_dropout_rate": "0.0",
          "ss_caption_tag_dropout_rate": "0.0",
          "ss_color_aug": "False",
          "ss_dataset_dirs": {
            "10_yoga10": {
              "n_repeats": 10,
              "img_count": 69
            }
          },
          "ss_enable_bucket": "True",
          "ss_epoch": "39",
          "ss_face_crop_aug_range": "None",
          "ss_flip_aug": "False",
          "ss_full_fp16": "False",
          "ss_gradient_accumulation_steps": "1",
          "ss_gradient_checkpointing": "False",
          "ss_keep_tokens": "0",
          "ss_learning_rate": "5.625e-05",
          "ss_lowram": "False",
          "ss_lr_scheduler": "cosine_with_restarts",
          "ss_lr_warmup_steps": "0",
          "ss_max_bucket_reso": "1024",
          "ss_max_grad_norm": "1.0",
          "ss_max_token_length": "225",
          "ss_max_train_steps": "3480",
          "ss_min_bucket_reso": "256",
          "ss_min_snr_gamma": "None",
          "ss_mixed_precision": "fp16",
          "ss_network_alpha": "64.0",
          "ss_network_dim": "128",
          "ss_network_module": "networks.lora",
          "ss_new_sd_model_hash": "fc2511737a54c5e80b89ab03e0ab4b98d051ab187f92860f3cd664dc9d08b271",
          "ss_noise_offset": "None",
          "ss_num_batches_per_epoch": "87",
          "ss_num_epochs": "40",
          "ss_num_reg_images": "0",
          "ss_optimizer": "lion_pytorch.lion_pytorch.Lion",
          "ss_output_name": "yjcf_yoga10",
          "ss_prior_loss_weight": "1.0",
          "ss_random_crop": "False",
          "ss_reg_dataset_dirs": {},
          "ss_sd_model_hash": "95f8d0a7",
          "ss_sd_scripts_commit_hash": "6d5f847edc7eaf858aa6fe060c68875b8da7392a",
          "ss_seed": "1337",
          "ss_session_id": "1095897239",
          "ss_shuffle_caption": "True",
          "ss_text_encoder_lr": "5.625e-06",
          "ss_total_batch_size": "8",
          "ss_training_comment": "None",
          "ss_training_finished_at": "1685085451.2485723",
          "ss_training_started_at": "1685081359.770927",
          "ss_unet_lr": "5.625e-05",
          "ss_v2": "False",
          "sshs_legacy_hash": "fcd0d53b",
          "sshs_model_hash": "afb0a36ecf96ab666d5097f017a1cfbefe9d637c45181e007529b9765c17b9d7"
        }
      }
    ]

    编辑此页
    最后由 sumingcheng 于 更新
    +
    [
      {
        "name": "interior02_SDLife_Chiasedamme_v2.0",
        "alias": "interior02_SDLife_Chiasedamme_v2.0",
        "path": "D:\\Desktop\\stable-diffusion\\stable-diffusion-webui-windows\\models\\Lora\\interior02_SDLife_Chiasedamme_v2.0.safetensors",
        "metadata": {
          "ss_sd_model_name": "architecture_Interior_SDlife_Chiasedamme_V8.0.safetensors",
          "ss_resolution": "(768, 768)",
          "ss_clip_skip": "None",
          "ss_num_train_images": "2160",
          "ss_tag_frequency": {
            "48_interior02 architecture": {
              "interior02 architecture": 45
            }
          },
          "ss_learning_rate": "0.0001",
          "ss_num_epochs": "12",
          "ss_network_alpha": "16.0",
          "ss_max_token_length": "None",
          "modelspec.resolution": "768x768",
          "ss_v2": "False",
          "ss_shuffle_caption": "False",
          "ss_sd_model_hash": "f0e4fa9a",
          "ss_reg_dataset_dirs": {},
          "ss_optimizer": "bitsandbytes.optim.adamw.AdamW8bit",
          "ss_num_batches_per_epoch": "540",
          "ss_training_started_at": "1695006725.11778",
          "ss_random_crop": "False",
          "modelspec.date": "2023-09-18T11:27:17",
          "ss_training_finished_at": "1695011237.89221",
          "sshs_legacy_hash": "c6bd8f94",
          "modelspec.sai_model_spec": "1.0.0",
          "ss_session_id": "1836462696",
          "ss_multires_noise_iterations": "None",
          "ss_zero_terminal_snr": "False",
          "ss_max_grad_norm": "1.0",
          "ss_caption_dropout_rate": "0.0",
          "ss_min_snr_gamma": "None",
          "ss_text_encoder_lr": "5e-05",
          "ss_color_aug": "False",
          "ss_unet_lr": "0.0001",
          "ss_dataset_dirs": {
            "48_interior02 architecture": {
              "n_repeats": 48,
              "img_count": 45
            }
          },
          "ss_new_sd_model_hash": "cd28826de2db604dc984309c5b229208f7d2cde182f6b5f7f214d03e53c969cb",
          "ss_gradient_accumulation_steps": "1",
          "ss_prior_loss_weight": "1.0",
          "ss_caption_tag_dropout_rate": "0.0",
          "ss_gradient_checkpointing": "False",
          "ss_epoch": "12",
          "ss_lr_scheduler": "cosine",
          "ss_mixed_precision": "fp16",
          "ss_cache_latents": "True",
          "ss_face_crop_aug_range": "None",
          "ss_batch_size_per_device": "4",
          "ss_seed": "1397213995",
          "ss_min_bucket_reso": "256",
          "ss_keep_tokens": "0",
          "ss_network_dim": "128",
          "modelspec.implementation": "diffusers",
          "modelspec.prediction_type": "epsilon",
          "ss_max_bucket_reso": "2048",
          "modelspec.architecture": "stable-diffusion-v1/lora",
          "ss_lr_warmup_steps": "648",
          "ss_lowram": "False",
          "ss_multires_noise_discount": "0.3",
          "sshs_model_hash": "a06590955343b7ae811b27534cc099e158746b305aa843cf79174974e356a4cc",
          "ss_noise_offset": "0.0",
          "ss_training_comment": "https://stablediffusion.life",
          "ss_output_name": "interior02_SDLife_Chiasedamme_v2.0",
          "ss_bucket_info": {
            "buckets": {
              "0": {
                "resolution": [512, 960],
                "count": 96
              },
              "1": {
                "resolution": [576, 1024],
                "count": 48
              },
              "2": {
                "resolution": [704, 640],
                "count": 144
              },
              "3": {
                "resolution": [768, 640],
                "count": 48
              },
              "4": {
                "resolution": [832, 704],
                "count": 48
              },
              "5": {
                "resolution": [896, 512],
                "count": 1584
              },
              "6": {
                "resolution": [960, 576],
                "count": 48
              },
              "7": {
                "resolution": [1024, 576],
                "count": 144
              }
            },
            "mean_img_ar_error": 0.04149464646381378
          },
          "ss_steps": "6480",
          "ss_num_reg_images": "0",
          "ss_max_train_steps": "6480",
          "modelspec.title": "interior02_SDLife_Chiasedamme_v2.0",
          "ss_network_dropout": "None",
          "ss_network_module": "networks.lora",
          "ss_sd_scripts_commit_hash": "(unknown)",
          "ss_bucket_no_upscale": "True",
          "ss_flip_aug": "False",
          "ss_full_fp16": "False",
          "ss_total_batch_size": "4",
          "ss_scale_weight_norms": "None",
          "ss_base_model_version": "sd_v1",
          "ss_adaptive_noise_scale": "None",
          "ss_caption_dropout_every_n_epochs": "0",
          "ss_enable_bucket": "True"
        }
      },
      {
        "name": "yjcf_yoga10-000039",
        "alias": "yjcf_yoga10",
        "path": "D:\\Desktop\\stable-diffusion\\stable-diffusion-webui-windows\\models\\Lora\\yjcf_yoga10-000039.safetensors",
        "metadata": {
          "ss_sd_model_name": "chilloutmix_NiPrunedFp32Fix.safetensors",
          "ss_resolution": "(768, 512)",
          "ss_clip_skip": "1",
          "ss_num_train_images": "690",
          "ss_tag_frequency": {
            "10_yoga10": {
              "yjcf_yujia": 33,
              "no humans": 28,
              "white mat": 30,
              "mirror": 30,
              "curtains": 16,
              "window": 19,
              "potted plant": 33,
              "wooden floor": 29,
              "pillar": 1,
              "logo": 7,
              "pillow": 48,
              "ball": 26,
              "black mat": 16,
              "shelf": 24,
              "towel": 14,
              "moon": 2,
              "sky": 6,
              "draw": 5,
              "door": 11,
              "water pipe": 1,
              "chinese text": 8,
              "dumbbell": 3,
              "kettlebell": 6,
              "jar": 1,
              "lamp": 2,
              "ceiling light": 6,
              "cylinder": 9,
              "light bar": 2,
              "english text": 3,
              "night sky": 1,
              "sculpture": 1,
              "cup": 3,
              "dumbbell，cylinder": 1,
              "kettlebell，cylinder": 2,
              "model decoration": 1,
              "chair": 1
            }
          },
          "ss_batch_size_per_device": "8",
          "ss_bucket_info": {
            "buckets": {
              "0": {
                "resolution": [512, 768],
                "count": 160
              },
              "1": {
                "resolution": [768, 512],
                "count": 530
              }
            },
            "mean_img_ar_error": 0.0002518045996306877
          },
          "ss_bucket_no_upscale": "False",
          "ss_cache_latents": "True",
          "ss_caption_dropout_every_n_epochs": "0",
          "ss_caption_dropout_rate": "0.0",
          "ss_caption_tag_dropout_rate": "0.0",
          "ss_color_aug": "False",
          "ss_dataset_dirs": {
            "10_yoga10": {
              "n_repeats": 10,
              "img_count": 69
            }
          },
          "ss_enable_bucket": "True",
          "ss_epoch": "39",
          "ss_face_crop_aug_range": "None",
          "ss_flip_aug": "False",
          "ss_full_fp16": "False",
          "ss_gradient_accumulation_steps": "1",
          "ss_gradient_checkpointing": "False",
          "ss_keep_tokens": "0",
          "ss_learning_rate": "5.625e-05",
          "ss_lowram": "False",
          "ss_lr_scheduler": "cosine_with_restarts",
          "ss_lr_warmup_steps": "0",
          "ss_max_bucket_reso": "1024",
          "ss_max_grad_norm": "1.0",
          "ss_max_token_length": "225",
          "ss_max_train_steps": "3480",
          "ss_min_bucket_reso": "256",
          "ss_min_snr_gamma": "None",
          "ss_mixed_precision": "fp16",
          "ss_network_alpha": "64.0",
          "ss_network_dim": "128",
          "ss_network_module": "networks.lora",
          "ss_new_sd_model_hash": "fc2511737a54c5e80b89ab03e0ab4b98d051ab187f92860f3cd664dc9d08b271",
          "ss_noise_offset": "None",
          "ss_num_batches_per_epoch": "87",
          "ss_num_epochs": "40",
          "ss_num_reg_images": "0",
          "ss_optimizer": "lion_pytorch.lion_pytorch.Lion",
          "ss_output_name": "yjcf_yoga10",
          "ss_prior_loss_weight": "1.0",
          "ss_random_crop": "False",
          "ss_reg_dataset_dirs": {},
          "ss_sd_model_hash": "95f8d0a7",
          "ss_sd_scripts_commit_hash": "6d5f847edc7eaf858aa6fe060c68875b8da7392a",
          "ss_seed": "1337",
          "ss_session_id": "1095897239",
          "ss_shuffle_caption": "True",
          "ss_text_encoder_lr": "5.625e-06",
          "ss_total_batch_size": "8",
          "ss_training_comment": "None",
          "ss_training_finished_at": "1685085451.2485723",
          "ss_training_started_at": "1685081359.770927",
          "ss_unet_lr": "5.625e-05",
          "ss_v2": "False",
          "sshs_legacy_hash": "fcd0d53b",
          "sshs_model_hash": "afb0a36ecf96ab666d5097f017a1cfbefe9d637c45181e007529b9765c17b9d7"
        }
      }
    ]
    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/GET-progress/index.html b/docs/Backend/Python/stable-diffusion/GET-progress/index.html index 88ec56c0..50176ac0 100644 --- a/docs/Backend/Python/stable-diffusion/GET-progress/index.html +++ b/docs/Backend/Python/stable-diffusion/GET-progress/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    GET-progress

    获取生成进度​

    @@ -39,6 +39,6 @@

    错误响
    success

    条件：请求数据非法，例如 没有正确传递参数

    状态码：422 Unprocessable Entity

    响应示例 value could not be parsed to a boolean

    {
      "detail": [
        {
          "loc": ["query", "skip_current_image"],
          "msg": "value could not be parsed to a boolean",
          "type": "type_error.bool"
        }
      ]
    }

    注意事项​

    -
    信息

    💡 该接口可以获取目前渲染到哪一步了，让前端用户可以更方便的得知进度。但是，频繁获取会增加图片渲染的时长~

    编辑此页
    最后由 sumingcheng 于 更新
    +
    信息

    💡 该接口可以获取目前渲染到哪一步了，让前端用户可以更方便的得知进度。但是，频繁获取会增加图片渲染的时长~

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/GET-sd-models/index.html b/docs/Backend/Python/stable-diffusion/GET-sd-models/index.html index e8bb5532..b83e64db 100644 --- a/docs/Backend/Python/stable-diffusion/GET-sd-models/index.html +++ b/docs/Backend/Python/stable-diffusion/GET-sd-models/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    GET-sd-models

    获取当前 sd 模型​

    @@ -28,6 +28,6 @@

    请求参
    success

    成功响应​

    条件：请求参数合法，并且用户身份校验通过。

    状态码：200 OK

    响应示例：响应会将修改后的用户信息数据返回，一个id为 1234 的用户设置他们的姓名后将会返回：

    [
      {
        "title": "raemumix_v51.safetensors [407b21f878]",
        "model_name": "raemumix_v51",
        "hash": "407b21f878",
        "sha256": "407b21f878bbdd4932314bd853f92e6e2c4c26f0e56c18e36948659942e95b20",
        "filename": "D:\\Desktop\\stable-diffusion\\stable-diffusion-webui-windows\\models\\Stable-diffusion\\raemumix_v51.safetensors",
        "config": null
      },
      {
        "title": "v1-5-pruned-emaonly.safetensors [6ce0161689]",
        "model_name": "v1-5-pruned-emaonly",
        "hash": "6ce0161689",
        "sha256": "6ce0161689b3853acaa03779ec93eafe75a02f4ced659bee03f50797806fa2fa",
        "filename": "D:\\Desktop\\stable-diffusion\\stable-diffusion-webui-windows\\models\\Stable-diffusion\\v1-5-pruned-emaonly.safetensors",
        "config": null
      }
    ]

    错误响应​

    -
    success

    条件：没有模型或者模型加载存在错误

    状态码：400

    响应示例

    编辑此页
    最后由 sumingcheng 于 更新
    +
    success

    条件：没有模型或者模型加载存在错误

    状态码：400

    响应示例

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/Loar-train/index.html b/docs/Backend/Python/stable-diffusion/Loar-train/index.html index 968c00f9..e1e09fc0 100644 --- a/docs/Backend/Python/stable-diffusion/Loar-train/index.html +++ b/docs/Backend/Python/stable-diffusion/Loar-train/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/Overview-of-SD/index.html b/docs/Backend/Python/stable-diffusion/Overview-of-SD/index.html index f517b1ed..6a910661 100644 --- a/docs/Backend/Python/stable-diffusion/Overview-of-SD/index.html +++ b/docs/Backend/Python/stable-diffusion/Overview-of-SD/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    stable-diffusion

    @@ -290,6 +290,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    高清修复是图像增强/Extras 的一部分

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/POST-PNG-Info/index.html b/docs/Backend/Python/stable-diffusion/POST-PNG-Info/index.html index e57a4ada..8cadbdc1 100644 --- a/docs/Backend/Python/stable-diffusion/POST-PNG-Info/index.html +++ b/docs/Backend/Python/stable-diffusion/POST-PNG-Info/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    POST-PNG-Info

    更新用户信息​

    @@ -35,6 +35,6 @@

    错误响
    success

    条件：没有传递图片，或者图片有问题

    状态码：500

    响应示例 ValidationError

    {
      "error": "ValidationError",
      "detail": "",
      "body": "",
      "errors": "1 validation error for PNGInfoResponse\nitems\n  field required (type=value_error.missing)"
    }

    注意事项​

    -
    信息

    💡 如果用户的用户信息不存在，将会使用请求的数据创建一个新的用户信息。

    编辑此页
    最后由 sumingcheng 于 更新
    +
    信息

    💡 如果用户的用户信息不存在，将会使用请求的数据创建一个新的用户信息。

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/POST-img2img/index.html b/docs/Backend/Python/stable-diffusion/POST-img2img/index.html index fcb840b7..6e317c2c 100644 --- a/docs/Backend/Python/stable-diffusion/POST-img2img/index.html +++ b/docs/Backend/Python/stable-diffusion/POST-img2img/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    POST-img2img

    图生图​

    @@ -44,6 +44,6 @@

    错误响 
    {
      "error": "HTTPException",
      "detail": "Init image not found",
      "body": "",
      "errors": ""
    }

    注意事项​

    success

    💡 图生图是可以传递多张图的，但我的机器带不动，请不要传递多张图片和超过 512 大小的图片

    -

    默认参数

    编辑此页
    最后由 sumingcheng 于 更新
    +

    默认参数

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/POST-interrupt/index.html b/docs/Backend/Python/stable-diffusion/POST-interrupt/index.html index 372b899d..88629f1c 100644 --- a/docs/Backend/Python/stable-diffusion/POST-interrupt/index.html +++ b/docs/Backend/Python/stable-diffusion/POST-interrupt/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    POST-interrupt

    interrupt​

    @@ -30,6 +30,6 @@

    成功响
    success

    条件：静态 token 校验通过

    状态码：200 OK

    响应示例：执行中断后会返回 success

    {
      "mag": "success"
    }

    错误响应​

    -
    success

    无

    编辑此页
    最后由 sumingcheng 于 更新
    +
    success

    无

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/POST-options/index.html b/docs/Backend/Python/stable-diffusion/POST-options/index.html index d7fdea5a..5f023377 100644 --- a/docs/Backend/Python/stable-diffusion/POST-options/index.html +++ b/docs/Backend/Python/stable-diffusion/POST-options/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    POST-options

    options​

    @@ -35,6 +35,6 @@

    错误响
    success

    条件：没有对应模型

    状态码：500

    响应示例: model xxxxx not found

    {
      "error": "RuntimeError",
      "detail": "",
      "body": "",
      "errors": "model 'v1-5-pruned-emaony' not found"
    }

    注意事项​

    -
    success

    💡 大模型切换需要时间，最好有个简单的等待效果

    编辑此页
    最后由 sumingcheng 于 更新
    +
    success

    💡 大模型切换需要时间，最好有个简单的等待效果

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/POST-text2img/index.html b/docs/Backend/Python/stable-diffusion/POST-text2img/index.html index 5b1cfcc0..75c55157 100644 --- a/docs/Backend/Python/stable-diffusion/POST-text2img/index.html +++ b/docs/Backend/Python/stable-diffusion/POST-text2img/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    编辑此页
    最后由 sumingcheng 于 更新
    +
    {
      "images": ["<base64 encoded image data>"],
      "parameters": {
        "prompt": "一只可爱的猫",
        "steps": 20,
        "cfg_scale": 7
      }
    }
    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/SD-BASE_API/index.html b/docs/Backend/Python/stable-diffusion/SD-BASE_API/index.html index c14ba90f..51648b94 100644 --- a/docs/Backend/Python/stable-diffusion/SD-BASE_API/index.html +++ b/docs/Backend/Python/stable-diffusion/SD-BASE_API/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    中间层

    @@ -81,6 +81,6 @@

    图生图<
  • 上传图片，图片不可低于 512*512
  • 图片尺寸同上传图片，但不能超过 3074
  • 其他同上
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/SD-Plugin/index.html b/docs/Backend/Python/stable-diffusion/SD-Plugin/index.html index d10e083b..5dfaf7da 100644 --- a/docs/Backend/Python/stable-diffusion/SD-Plugin/index.html +++ b/docs/Backend/Python/stable-diffusion/SD-Plugin/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    http://www.114514123.xyz/WebUI/Tag/a1111-sd-webui-tagcomplete.zip

    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/Ubuntu-install-SD/index.html b/docs/Backend/Python/stable-diffusion/Ubuntu-install-SD/index.html index 6d662e69..a71cd9a6 100644 --- a/docs/Backend/Python/stable-diffusion/Ubuntu-install-SD/index.html +++ b/docs/Backend/Python/stable-diffusion/Ubuntu-install-SD/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Ubuntu-install-SD

    安装 Python​

    @@ -20,6 +20,6 @@

    创建虚拟环境​

    # 创建
    python3.10.6 -m venv venv

    # 删除
    rm -rf venv

    # 离开
    deactivate

    # 激活
    source venv/bin/activate

    # 重装依赖
    pip install -r requirements.txt

    # 进入虚拟环境
    source env/bin/activate

    配置 SD 服务​

    -
    # 安装并创建虚拟环境
    sudo apt install wget git python3.10 python3.10-venv libgl1 libglib2.0-0
    # 安装依赖
    wget -q https://raw.githubusercontent.com/AUTOMATIC1111/stable-diffusion-webui/master/webui.sh
    # 安装其他依赖
    bash webui.sh
    # 检查
    bash webui-user.sh
    编辑此页
    最后由 sumingcheng 于 更新
    +
    # 安装并创建虚拟环境
    sudo apt install wget git python3.10 python3.10-venv libgl1 libglib2.0-0
    # 安装依赖
    wget -q https://raw.githubusercontent.com/AUTOMATIC1111/stable-diffusion-webui/master/webui.sh
    # 安装其他依赖
    bash webui.sh
    # 检查
    bash webui-user.sh
    \ No newline at end of file diff --git a/docs/Backend/Python/stable-diffusion/Win-install-SD/index.html b/docs/Backend/Python/stable-diffusion/Win-install-SD/index.html index f0bb9c39..80bf39d8 100644 --- a/docs/Backend/Python/stable-diffusion/Win-install-SD/index.html +++ b/docs/Backend/Python/stable-diffusion/Win-install-SD/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    基础环境

    @@ -52,6 +52,6 @@

    解决 xformers 模块找不到

    修改COMMANDLINE_ARGS代码，如果你启动后是 0.0.0.0就去掉--listen

    COMMANDLINE_ARGS = --xformers --opt-sdp-no-mem-attention --listen --enable-insecure-extension-access

    重新启动

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Backend/Python/stable-diffusion/\351\230\277\351\207\214\344\272\221-ECS-OSS-CDN/index.html" "b/docs/Backend/Python/stable-diffusion/\351\230\277\351\207\214\344\272\221-ECS-OSS-CDN/index.html" index 611dcdab..fc5a636e 100644 --- "a/docs/Backend/Python/stable-diffusion/\351\230\277\351\207\214\344\272\221-ECS-OSS-CDN/index.html" +++ "b/docs/Backend/Python/stable-diffusion/\351\230\277\351\207\214\344\272\221-ECS-OSS-CDN/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    如何使用 ECS 和 OSS 搭建在线教育视频课程分享网站-阿里云帮助中心

    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/List\343\200\201Array\343\200\201Tuple\343\200\201Set/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/List\343\200\201Array\343\200\201Tuple\343\200\201Set/index.html" index 6755a4d6..f28e1a12 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/List\343\200\201Array\343\200\201Tuple\343\200\201Set/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/List\343\200\201Array\343\200\201Tuple\343\200\201Set/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 中的 List、Array、Tuple 和 Set

    @@ -94,6 +94,6 @@

    定义集

    在实际开发中可用集合快速判断元素存在性
    在处理需要去重的数据时可将列表转为集合再处理

    数据结构区别​

    -
    特性/数据结构Tuple（元组）Set（集合）Array（数组）List（列表）
    定义() 或 set()array.array()[]
    有序性有序无序有序有序
    可变性不可变可变可变可变
    重复元素允许不允许允许允许
    索引访问允许不允许允许允许
    数据类型任意任意必须一致任意
    优点不可变 安全性高去重 快速成员检查存储紧凑 数值运算高效通用灵活 使用简单
    缺点不可变 操作受限无序 无法索引数据类型受限存储效率低于数组
    使用场景固定数据集 函数多返回值去重 集合运算 集合判断数值运算 批量处理同类型数据通用数据处理与存储
    编辑此页
    最后由 sumingcheng 于 更新
    +
    特性/数据结构Tuple（元组）Set（集合）Array（数组）List（列表）
    定义() 或 set()array.array()[]
    有序性有序无序有序有序
    可变性不可变可变可变可变
    重复元素允许不允许允许允许
    索引访问允许不允许允许允许
    数据类型任意任意必须一致任意
    优点不可变 安全性高去重 快速成员检查存储紧凑 数值运算高效通用灵活 使用简单
    缺点不可变 操作受限无序 无法索引数据类型受限存储效率低于数组
    使用场景固定数据集 函数多返回值去重 集合运算 集合判断数值运算 批量处理同类型数据通用数据处理与存储
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/Python\344\271\213\347\246\205\347\232\204\350\247\243\350\257\273/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/Python\344\271\213\347\246\205\347\232\204\350\247\243\350\257\273/index.html" index a8831d36..4ae0e910 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/Python\344\271\213\347\246\205\347\232\204\350\247\243\350\257\273/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/Python\344\271\213\347\246\205\347\232\204\350\247\243\350\257\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 之禅

    @@ -65,6 +65,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    Guido van Rossum 创建 Python 时，并没有预料到它会变得如此流行和广泛使用。他希望提供一种比当时流行的语言更易用、更高效的工具，解决实际编程中的问题。

    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\207\275\346\225\260\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\350\257\246\350\247\243/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\207\275\346\225\260\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\350\257\246\350\247\243/index.html" index 3a8c86cf..a99a4f23 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\207\275\346\225\260\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\350\257\246\350\247\243/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\207\275\346\225\260\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 函数定义与参数详解

    @@ -38,6 +38,6 @@

    参 
    def complex_func(a, b=10, *args, **kwargs):
        print(f"a={a}, b={b}")
        print(f"args={args}")
        print(f"kwargs={kwargs}")

    complex_func(1, 2, 3, 4, x=10, y=20)

    强制位置参数​

    在 Python 3.8 及以上版本中，我可以使用斜杠/来标记必须以位置形式传入的参数。这种特性在我需要明确区分参数传递方式时十分有用，能更好地控制函数接口的使用方式。

    -
    def calc(x, y, /, z):
        return x + y + z

    print(calc(1, 2, z=3))   # 符合要求
    # print(calc(x=1, y=2, z=3))  不符合要求 因为x和y必须以位置参数传入
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def calc(x, y, /, z):
        return x + y + z

    print(calc(1, 2, z=3))   # 符合要求
    # print(calc(x=1, y=2, z=3))  不符合要求 因为x和y必须以位置参数传入
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\210\207\347\211\207\346\223\215\344\275\234/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\210\207\347\211\207\346\223\215\344\275\234/index.html" index 6f7ba384..b6cd3170 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\210\207\347\211\207\346\223\215\344\275\234/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\210\207\347\211\207\346\223\215\344\275\234/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    字符串的切片语法

    @@ -46,6 +46,6 @@

    数组 (a 
    from array import array
    number_array = array('i', [1, 2, 3, 4, 5, 6])
    print(number_array[1:4])  # 输出 array('i', [2, 3, 4])

    注意，其他数据类型如集合 (set) 和字典 (dict) 不支持切片操作，因为它们没有索引或顺序。

    规律

    -

    只有具有明确顺序或索引的数据结构（如字符串、列表、元组、字节数组等）支持切片操作。集合和字典没有索引，无法使用切片。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    只有具有明确顺序或索引的数据结构（如字符串、列表、元组、字节数组等）支持切片操作。集合和字典没有索引，无法使用切片。

    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\221\275\345\220\215\347\251\272\351\227\264\345\222\214\344\275\234\347\224\250\345\237\237/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\221\275\345\220\215\347\251\272\351\227\264\345\222\214\344\275\234\347\224\250\345\237\237/index.html" index 0cc1b05f..62ab53f8 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\221\275\345\220\215\347\251\272\351\227\264\345\222\214\344\275\234\347\224\250\345\237\237/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\221\275\345\220\215\347\251\272\351\227\264\345\222\214\344\275\234\347\224\250\345\237\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 命名空间与作用域详解

    @@ -46,6 +46,6 @@

    最

    函数应减少对全局变量的依赖，通过参数传递和返回值进行数据交换。

    def good_practice(input_value):
        result = input_value * 2
        return result

    def bad_practice():
        global some_variable
        some_variable *= 2

    在闭包中谨慎使用可变对象，避免意外的副作用。

    -
    def create_counter():
        count = 0
        def increment():
            nonlocal count
            count += 1
            return count
        return increment

    编辑此页
    最后由 sumingcheng 于 更新
    +
    def create_counter():
        count = 0
        def increment():
            nonlocal count
            count += 1
            return count
        return increment
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\255\227\345\205\270/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\255\227\345\205\270/index.html" index 4bc14e1d..5a8b45fb 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\255\227\345\205\270/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\255\227\345\205\270/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Dictionary（字典）

    @@ -63,6 +63,6 @@

    网络通

    与其他语言的接口​

    当调用 C 库或其他语言的函数时，这些函数可能需要二进制数据作为参数或返回值，此时我会使用 bytes。

    加密和哈希​

    -

    许多加密和哈希算法使用 bytes 来表示原始数据和加密或哈希后的输出。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    许多加密和哈希算法使用 bytes 来表示原始数据和加密或哈希后的输出。

    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\270\270\347\224\250\346\240\207\345\207\206\345\272\223/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\270\270\347\224\250\346\240\207\345\207\206\345\272\223/index.html" index e7d04423..89798106 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\270\270\347\224\250\346\240\207\345\207\206\345\272\223/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\270\270\347\224\250\346\240\207\345\207\206\345\272\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 常用标准库指南

    @@ -36,6 +36,6 @@

    命令 
    import argparse

    def setup_argument_parser():
        parser = argparse.ArgumentParser(
            description="处理命令行参数示例"
        )

        parser.add_argument(
            "--input",
            required=True,
            help="输入文件路径"
        )

        parser.add_argument(
            "--output",
            default="output.txt",
            help="输出文件路径"
        )

        return parser

    日志记录​

    使用 logging 记录程序日志。

    -
    import logging

    def setup_logger():
        logging.basicConfig(
            filename="app.log",
            level=logging.INFO,
            format="%(asctime)s [%(levelname)s] %(message)s",
            datefmt="%Y-%m-%d %H:%M:%S"
        )

        logger = logging.getLogger(__name__)
        return logger
    编辑此页
    最后由 sumingcheng 于 更新
    +
    import logging

    def setup_logger():
        logging.basicConfig(
            filename="app.log",
            level=logging.INFO,
            format="%(asctime)s [%(levelname)s] %(message)s",
            datefmt="%Y-%m-%d %H:%M:%S"
        )

        logger = logging.getLogger(__name__)
        return logger
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\272\217\345\210\227\351\201\215\345\216\206/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\272\217\345\210\227\351\201\215\345\216\206/index.html" index f5983037..16759369 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\272\217\345\210\227\351\201\215\345\216\206/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\272\217\345\210\227\351\201\215\345\216\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 序列遍历与推导式

    @@ -39,6 +39,6 @@

    矩阵操 
    def transpose_matrix(matrix):
        return [[row[i] for row in matrix]
                for i in range(len(matrix[0]))]

    def matrix_operation(matrix):
        rows = len(matrix)
        cols = len(matrix[0])

        result = [[0 for _ in range(cols)]
                  for _ in range(rows)]

        for i in range(rows):
            for j in range(cols):
                result[i][j] = matrix[i][j] * 2

        return result

    生成器表达式​

    使用生成器处理大型序列。

    -
    def process_large_dataset(data):
        processed = (item * 2 for item in data)
        return sum(processed)

    def chunk_processor(items, size):
        return (items[i:i + size]
                for i in range(0, len(items), size))
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def process_large_dataset(data):
        processed = (item * 2 for item in data)
        return sum(processed)

    def chunk_processor(items, size):
        return (items[i:i + size]
                for i in range(0, len(items), size))
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\345\274\202\345\270\270\345\244\204\347\220\206\346\234\272\345\210\266/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\345\274\202\345\270\270\345\244\204\347\220\206\346\234\272\345\210\266/index.html" index 419f731c..5d8e0deb 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\345\274\202\345\270\270\345\244\204\347\220\206\346\234\272\345\210\266/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\345\274\202\345\270\270\345\244\204\347\220\206\346\234\272\345\210\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 异常处理机制详解

    @@ -36,6 +36,6 @@

    上下 
    class DatabaseConnection:
        def __init__(self, connection_string):
            self.connection_string = connection_string

        def __enter__(self):
            print("连接数据库")
            return self

        def __exit__(self, exc_type, exc_val, exc_tb):
            print("关闭数据库连接")

    with DatabaseConnection("mysql://localhost:3306") as db:
        print("执行数据库操作")

    调试辅助​

    使用 assert 语句进行调试。

    -
    def calculate_discount(price, rate):
        assert 0 <= rate <= 1, "折扣率必须在0到1之间"
        assert price > 0, "价格必须大于0"
        return price * (1 - rate)
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def calculate_discount(price, rate):
        assert 0 <= rate <= 1, "折扣率必须在0到1之间"
        assert price > 0, "价格必须大于0"
        return price * (1 - rate)
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\346\216\250\345\257\274\345\274\217/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\346\216\250\345\257\274\345\274\217/index.html" index 0f9d6c78..99bb59bd 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\346\216\250\345\257\274\345\274\217/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\346\216\250\345\257\274\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 推导式深入理解

    @@ -34,6 +34,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    推导方式使用场景特点
    列表推导式快速创建列表与简单过滤简洁直观适合中小数据量
    字典推导式创建键值映射灵活构建复杂映射结构
    集合推导式去重与快速计算独立元素自动去重便于统计分析
    生成器表达式惰性求值处理海量数据内存高效适合流式数据处理
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\345\255\246\345\207\275\346\225\260/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\345\255\246\345\207\275\346\225\260/index.html" index 04164ce9..c519ba2f 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\345\255\246\345\207\275\346\225\260/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\345\255\246\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 数学计算模块详解

    @@ -36,6 +36,6 @@

    数 
    def handle_precision(value, precision=2):
        rounded = round(value, precision)
        formatted = format(value, f".{precision}f")

        return {
            "rounded": rounded,
            "formatted": formatted,
            "is_close": math.isclose(value, rounded,
                                   rel_tol=1e-9)
        }

    特殊函数​

    特殊数学函数计算。

    -
    def special_functions(x):
        gamma_value = math.gamma(x)
        erf_value = math.erf(x)

        return {
            "gamma": gamma_value,
            "error_function": erf_value
        }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def special_functions(x):
        gamma_value = math.gamma(x)
        erf_value = math.erf(x)

        return {
            "gamma": gamma_value,
            "error_function": erf_value
        }
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\257\246\350\247\243/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\257\246\350\247\243/index.html" index 8eeee44c..6a7a4d77 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\257\246\350\247\243/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\261\273\345\236\213\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 数据类型详解

    @@ -57,6 +57,6 @@ 

    x, y, z = 5, 10, 15
    print(x, y, z)

    values = (5, 10, 15)
    a, b, c = values
    print(a, b, c)

    x, y = 5, 10
    x, y = y, x
    print(x, y)  # 10, 5

    使用星号 * 可以收集多余的值，这在函数返回值为可变长度或数据处理场景中非常有用。

    -
    x, *middleValues, z = 1, 2, 3, 4, 5
    print(x, middleValues, z)  # 1 [2, 3, 4] 5
    编辑此页
    最后由 sumingcheng 于 更新
    +
    x, *middleValues, z = 1, 2, 3, 4, 5
    print(x, middleValues, z)  # 1 [2, 3, 4] 5
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\273\223\346\236\204\345\256\236\347\216\260/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\273\223\346\236\204\345\256\236\347\216\260/index.html" index b962be24..346e4d5e 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\273\223\346\236\204\345\256\236\347\216\260/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\346\225\260\346\215\256\347\273\223\346\236\204\345\256\236\347\216\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 数据结构实现指南

    @@ -32,6 +32,6 @@

    实

    使用栈实现括号匹配。

    def is_balanced(expression):
        stack = Stack()
        brackets = {")": "(", "]": "[", "}": "{"}

        for char in expression:
            if char in "({[":
                stack.push(char)
            elif char in ")}]":
                if stack.is_empty():
                    return False
                if stack.pop() != brackets[char]:
                    return False

        return stack.is_empty()

    使用队列实现任务调度。

    -
    class TaskScheduler:
        def __init__(self):
            self.tasks = Queue()

        def add_task(self, task):
            self.tasks.enqueue(task)

        def execute_tasks(self):
            while not self.tasks.is_empty():
                task = self.tasks.dequeue()
                print(f"执行任务 {task}")

    编辑此页
    最后由 sumingcheng 于 更新
    +
    class TaskScheduler:
        def __init__(self):
            self.tasks = Queue()

        def add_task(self, task):
            self.tasks.enqueue(task)

        def execute_tasks(self):
            while not self.tasks.is_empty():
                task = self.tasks.dequeue()
                print(f"执行任务 {task}")
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\346\226\207\344\273\266\346\223\215\344\275\234/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\346\226\207\344\273\266\346\223\215\344\275\234/index.html" index 5843b499..4debcea8 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\346\226\207\344\273\266\346\223\215\344\275\234/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\346\226\207\344\273\266\346\223\215\344\275\234/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 文件操作指南

    @@ -39,6 +39,6 @@

    文件监 
    import time

    def monitor_file_changes(filename, interval=1):
        last_mtime = os.path.getmtime(filename)

        while True:
            current_mtime = os.path.getmtime(filename)
            if current_mtime != last_mtime:
                yield "File modified"
                last_mtime = current_mtime
            time.sleep(interval)

    安全文件操作​

    处理文件操作中的异常情况。

    -
    def safe_file_operation(filename, operation):
        try:
            with open(filename, encoding='utf-8') as file:
                return operation(file)
        except FileNotFoundError:
            return "文件不存在"
        except PermissionError:
            return "没有操作权限"
        except Exception as error:
            return f"操作失败{str(error)}"
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def safe_file_operation(filename, operation):
        try:
            with open(filename, encoding='utf-8') as file:
                return operation(file)
        except FileNotFoundError:
            return "文件不存在"
        except PermissionError:
            return "没有操作权限"
        except Exception as error:
            return f"操作失败{str(error)}"
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html" index b943e73a..caa46992 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 正则表达式实践指南

    @@ -33,6 +33,6 @@

    模式编 
    class TextValidator:
        def __init__(self):
            self.email_pattern = re.compile(r'^[\w\.-]+@[\w\.-]+\.\w+$')
            self.phone_pattern = re.compile(r'\d{3}[-.]?\d{3}[-.]?\d{4}')
            self.url_pattern = re.compile(
                r'https?://(?:[-\w.]|(?:%[\da-fA-F]{2}))+')

        def validate_email(self, email):
            return bool(self.email_pattern.match(email))

        def validate_phone(self, phone):
            return bool(self.phone_pattern.match(phone))

        def validate_url(self, url):
            return bool(self.url_pattern.match(url))

    高级匹配​

    复杂模式匹配与提取。

    -
    def extract_html_tags(html):
        pattern = r'<(\w+)[^>]*>(.*?)</\1>'
        return re.findall(pattern, html, re.DOTALL)

    def find_words_context(text, word, context_words=5):
        pattern = fr'\b\w+\b(?:[^\w\n]+\w+\b){0,{context_words}}'
        pattern += fr'{word}\b(?:[^\w\n]+\w+\b){0,{context_words}}'
        return re.findall(pattern, text, re.IGNORECASE)
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def extract_html_tags(html):
        pattern = r'<(\w+)[^>]*>(.*?)</\1>'
        return re.findall(pattern, html, re.DOTALL)

    def find_words_context(text, word, context_words=5):
        pattern = fr'\b\w+\b(?:[^\w\n]+\w+\b){0,{context_words}}'
        pattern += fr'{word}\b(?:[^\w\n]+\w+\b){0,{context_words}}'
        return re.findall(pattern, text, re.IGNORECASE)
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\347\274\226\347\240\201\345\222\214\345\255\227\347\254\246\351\233\206/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\347\274\226\347\240\201\345\222\214\345\255\227\347\254\246\351\233\206/index.html" index c5f529a4..2e72c4a1 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\347\274\226\347\240\201\345\222\214\345\255\227\347\254\246\351\233\206/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\347\274\226\347\240\201\345\222\214\345\255\227\347\254\246\351\233\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    编码和字符集

    @@ -82,6 +82,6 @@

    代码块​

    Python 使用缩进表示代码块，从而减少额外的标记符号。当我在 for 或 if 等结构中书写代码时，我会保持 4 个空格的统一缩进，以便让代码结构一目了然。

    for index in range(5):
        print(index)
        print("Inside the for loop")
    print("Outside of the for loop")
    -

    代码块示例

    编辑此页
    最后由 sumingcheng 于 更新
    +

    代码块示例

    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\350\277\220\347\256\227\347\254\246/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\350\277\220\347\256\227\347\254\246/index.html" index d183da2a..d118861e 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\350\277\220\347\256\227\347\254\246/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\350\277\220\347\256\227\347\254\246/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 运算符深入理解

    @@ -33,6 +33,6 @@

    地 
    dividend = 17
    divisor = 4
    result = dividend // divisor
    print(result)  # 4，17/4=4.25向下取整为4

    注意事项​

    使用身份运算符时需注意 Python 的对象驻留机制，某些情况下小整数和短字符串可能会得到意外结果。建议使用 == 比较值是否相等，使用 is 严格判断对象身份。

    -

    按位运算要注意负数的补码表示，可能得到意外结果。对于负数的移位操作要特别小心。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    按位运算要注意负数的补码表示，可能得到意外结果。对于负数的移位操作要特别小心。

    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\350\277\255\344\273\243\345\231\250\344\270\216\347\224\237\346\210\220\345\231\250/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\350\277\255\344\273\243\345\231\250\344\270\216\347\224\237\346\210\220\345\231\250/index.html" index d60be110..5f586bf5 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\350\277\255\344\273\243\345\231\250\344\270\216\347\224\237\346\210\220\345\231\250/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\350\277\255\344\273\243\345\231\250\344\270\216\347\224\237\346\210\220\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 迭代器与生成器详解

    @@ -36,6 +36,6 @@ 

    def number_generator():
        while True:
            received = yield
            yield received * 2

    gen = number_generator()
    next(gen)
    print(gen.send(10))
    next(gen)

    迭代器链式操作​

    通过迭代器实现数据处理管道。

    -
    def generate_numbers():
        for i in range(5):
            yield i

    def square_numbers(numbers):
        for num in numbers:
            yield num * num

    def filter_even(numbers):
        for num in numbers:
            if num % 2 == 0:
                yield num

    numbers = generate_numbers()
    squared = square_numbers(numbers)
    result = filter_even(squared)

    for num in result:
        print(num)
    编辑此页
    最后由 sumingcheng 于 更新
    +
    def generate_numbers():
        for i in range(5):
            yield i

    def square_numbers(numbers):
        for num in numbers:
            yield num * num

    def filter_even(numbers):
        for num in numbers:
            if num % 2 == 0:
                yield num

    numbers = generate_numbers()
    squared = square_numbers(numbers)
    result = filter_even(squared)

    for num in result:
        print(num)
    \ No newline at end of file diff --git "a/docs/Backend/Python/\345\237\272\347\241\200/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" "b/docs/Backend/Python/\345\237\272\347\241\200/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" index c2281872..645880fc 100644 --- "a/docs/Backend/Python/\345\237\272\347\241\200/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" +++ "b/docs/Backend/Python/\345\237\272\347\241\200/\351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 面向对象编程基础

    @@ -36,6 +36,6 @@

    特殊方 
    class Book:
        def __init__(self, title, price):
            self.title = title
            self.price = price

        def __str__(self):
            return f"《{self.title}》 价格{self.price}元"

        def __eq__(self, other):
            if not isinstance(other, Book):
                return False
            return self.title == other.title

    book = Book("Python编程", 99)
    print(book)

    属性装饰器​

    使用@property装饰器可以将方法转换为属性。

    -
    class Temperature:
        def __init__(self, celsius):
            self._celsius = celsius

        @property
        def fahrenheit(self):
            return self._celsius * 9/5 + 32

        @property
        def celsius(self):
            return self._celsius

        @celsius.setter
        def celsius(self, value):
            self._celsius = value

    temp = Temperature(25)
    print(temp.fahrenheit)
    temp.celsius = 30
    print(temp.fahrenheit)
    编辑此页
    最后由 sumingcheng 于 更新
    +
    class Temperature:
        def __init__(self, celsius):
            self._celsius = celsius

        @property
        def fahrenheit(self):
            return self._celsius * 9/5 + 32

        @property
        def celsius(self):
            return self._celsius

        @celsius.setter
        def celsius(self, value):
            self._celsius = value

    temp = Temperature(25)
    print(temp.fahrenheit)
    temp.celsius = 30
    print(temp.fahrenheit)
    \ No newline at end of file diff --git "a/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/Python\350\247\243\351\207\212\345\231\250/index.html" "b/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/Python\350\247\243\351\207\212\345\231\250/index.html" index 9562c07f..361c2915 100644 --- "a/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/Python\350\247\243\351\207\212\345\231\250/index.html" +++ "b/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/Python\350\247\243\351\207\212\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 解释器原理剖析

    @@ -30,6 +30,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    需要注意的是，提到 Python 解释器时，通常指的就是 CPython 解释器。其他解释器实现各有特色，可以根据实际需求选择最合适的解释器。

    \ No newline at end of file diff --git "a/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/\345\221\275\344\273\244\350\241\214\345\217\202\346\225\260/index.html" "b/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/\345\221\275\344\273\244\350\241\214\345\217\202\346\225\260/index.html" index c4ba2171..aebf120f 100644 --- "a/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/\345\221\275\344\273\244\350\241\214\345\217\202\346\225\260/index.html" +++ "b/docs/Backend/Python/\350\247\243\351\207\212\345\231\250/\345\221\275\344\273\244\350\241\214\345\217\202\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Python 命令行参数详解

    @@ -55,6 +55,6 @@

    -h 显示所有可用命令行参数信息 有助于快速查找需要的选项
    -V 和 --version 显示 Python 版本信息 确保使用正确的版本

    常用参数对照表​

    -
    参数功能示例
    -m通过模块方式执行python -m unittest test_example.py
    -c执行指定命令字符串python -c "print('Hello')"
    -O启用优化模式python -O script.py
    -B禁止生成字节码缓存文件python -B script.py
    -E忽略环境变量python -E script.py
    -I启用隔离模式python -I script.py
    -s跳过 site-packages 加载python -s script.py
    编辑此页
    最后由 sumingcheng 于 更新
    +
    参数功能示例
    -m通过模块方式执行python -m unittest test_example.py
    -c执行指定命令字符串python -c "print('Hello')"
    -O启用优化模式python -O script.py
    -B禁止生成字节码缓存文件python -B script.py
    -E忽略环境变量python -E script.py
    -I启用隔离模式python -I script.py
    -s跳过 site-packages 加载python -s script.py
    \ No newline at end of file diff --git "a/docs/Backend/Redis/Redis-\345\237\272\347\241\200\344\275\277\347\224\250/index.html" "b/docs/Backend/Redis/Redis-\345\237\272\347\241\200\344\275\277\347\224\250/index.html" index cf716772..c4ac310e 100644 --- "a/docs/Backend/Redis/Redis-\345\237\272\347\241\200\344\275\277\347\224\250/index.html" +++ "b/docs/Backend/Redis/Redis-\345\237\272\347\241\200\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Redis 使用指南

    @@ -74,6 +74,6 @@

    分片

    数据模型限制​

    虽然 Redis 支持多种数据结构，但不支持像关系型数据库那样的复杂查询和关联。可能需要在应用层处理数据关系和查询逻辑。

    安全​

    -

    默认情况下，Redis 的安全设置较为宽松，如不需要认证。如果配置不当，Redis 实例可能面临未授权访问风险。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    默认情况下，Redis 的安全设置较为宽松，如不需要认证。如果配置不当，Redis 实例可能面临未授权访问风险。

    \ No newline at end of file diff --git "a/docs/Backend/Redis/Redis\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\350\277\220\347\273\264/index.html" "b/docs/Backend/Redis/Redis\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\350\277\220\347\273\264/index.html" index 731d82d2..e3cdd202 100644 --- "a/docs/Backend/Redis/Redis\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\350\277\220\347\273\264/index.html" +++ "b/docs/Backend/Redis/Redis\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\350\277\220\347\273\264/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Redis 性能优化与运维

    @@ -146,6 +146,6 @@

    注意事
  • 在高负载环境下，避免使用阻塞命令，如 BLPOP，它可能会导致 Redis 响应缓慢。
  • 定期检查 Redis 的内存使用情况，并设置合适的 maxmemory-policy。
  • 使用 redis-cli 工具进行监控和故障排查，及时发现性能瓶颈。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Redis/Redis\346\214\201\344\271\205\345\214\226\344\270\216\345\244\207\344\273\275/index.html" "b/docs/Backend/Redis/Redis\346\214\201\344\271\205\345\214\226\344\270\216\345\244\207\344\273\275/index.html" index e51d29c1..1a142603 100644 --- "a/docs/Backend/Redis/Redis\346\214\201\344\271\205\345\214\226\344\270\216\345\244\207\344\273\275/index.html" +++ "b/docs/Backend/Redis/Redis\346\214\201\344\271\205\345\214\226\344\270\216\345\244\207\344\273\275/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Redis 持久化与备份

    @@ -79,6 +79,6 @@

    恢复数
    • RDB 恢复：如果 Redis 配置使用 RDB 持久化，那么启动时 Redis 会自动加载 .rdb 文件。
    • AOF 恢复：如果 Redis 配置使用 AOF 持久化，Redis 启动时会加载 .aof 文件，并逐条执行文件中的命令。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Backend/Redis/Redis\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\221\275\344\273\244/index.html" "b/docs/Backend/Redis/Redis\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\221\275\344\273\244/index.html" index 5145e63e..c4bb4d3f 100644 --- "a/docs/Backend/Redis/Redis\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\221\275\344\273\244/index.html" +++ "b/docs/Backend/Redis/Redis\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\345\221\275\344\273\244/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Redis 数据类型与命令

    @@ -61,6 +61,6 @@

    常用 
    EVAL "return redis.call('GET', KEYS[1])" 1 user:1

    数据类型特性对比表​

    下表概括了常用数据类型的特点与适用场景，便于我在实际运维中快速选择合适的数据结构

    -
    数据类型有序性重复允许典型应用场景
    String无支持重复值简单键值对缓存、计数器
    Hash基于字段组织字段唯一存储对象数据、用户信息
    List有序支持重复值队列、消息列表
    Set无序元素唯一去重、快速成员判断
    Sorted Set有序(由分数决定)元素唯一排行榜、延迟队列
    编辑此页
    最后由 sumingcheng 于 更新
    +
    数据类型有序性重复允许典型应用场景
    String无支持重复值简单键值对缓存、计数器
    Hash基于字段组织字段唯一存储对象数据、用户信息
    List有序支持重复值队列、消息列表
    Set无序元素唯一去重、快速成员判断
    Sorted Set有序(由分数决定)元素唯一排行榜、延迟队列
    \ No newline at end of file diff --git "a/docs/Backend/Redis/Redis\351\233\206\347\276\244\344\270\216\345\210\206\347\211\207/index.html" "b/docs/Backend/Redis/Redis\351\233\206\347\276\244\344\270\216\345\210\206\347\211\207/index.html" index 95656bf5..fab05559 100644 --- "a/docs/Backend/Redis/Redis\351\233\206\347\276\244\344\270\216\345\210\206\347\211\207/index.html" +++ "b/docs/Backend/Redis/Redis\351\233\206\347\276\244\344\270\216\345\210\206\347\211\207/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Redis 集群与分片

    @@ -38,6 +38,6 @@

    监控 
    # 检查集群状态
    redis-cli -c -h 192.168.0.10 -p 7000 cluster info
    redis-cli -c -h 192.168.0.10 -p 7000 cluster nodes

    最佳实践示例表格​

    下表列出我在实际生产环境中总结的 Redis 集群最佳实践，以便在部署和维护时快速参考

    -
    实践内容好处
    使用等量槽分配策略初始化时为主节点平均分配槽数据分布均衡减少热点
    为每个主节点提供从节点确保故障转移快速进行减少服务中断时间
    使用支持集群的客户端驱动客户端自动重定向请求避免路由错误与额外逻辑
    定期检查集群状态使用 cluster info 监控运行情况及时发现故障与延迟问题
    扩容时平稳迁移槽使用 reshard 在低峰期进行减少业务影响
    编辑此页
    最后由 sumingcheng 于 更新
    +
    实践内容好处
    使用等量槽分配策略初始化时为主节点平均分配槽数据分布均衡减少热点
    为每个主节点提供从节点确保故障转移快速进行减少服务中断时间
    使用支持集群的客户端驱动客户端自动重定向请求避免路由错误与额外逻辑
    定期检查集群状态使用 cluster info 监控运行情况及时发现故障与延迟问题
    扩容时平稳迁移槽使用 reshard 在低峰期进行减少业务影响
    \ No newline at end of file diff --git "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\210\233\345\273\272\346\226\271\345\274\217/index.html" "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\210\233\345\273\272\346\226\271\345\274\217/index.html" index 3430faa7..5baf06f1 100644 --- "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\210\233\345\273\272\346\226\271\345\274\217/index.html" +++ "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\210\233\345\273\272\346\226\271\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    正则表达式的创建方式

    @@ -35,6 +35,6 @@

    构

    选择符​

    有时我们希望正则表达式可以匹配多个模式中的一个,这时可以使用选择符|。例如:

    console.log(/aa|b/g.test(str));
    console.log(/aa&b/g.test(str));
    -

    第一个正则表达式/aa|b/g表示匹配'aa'或'b',第二个正则表达式/aa&b/g表示匹配'aa&b'这个整体。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    第一个正则表达式/aa|b/g表示匹配'aa'或'b',第二个正则表达式/aa&b/g表示匹配'aa&b'这个整体。

    \ No newline at end of file diff --git "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\237\272\347\241\200/index.html" "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\237\272\347\241\200/index.html" index b7b1a405..98af60cd 100644 --- "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\237\272\347\241\200/index.html" +++ "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    编辑此页
    最后由 sumingcheng 于 更新
    +

    [\w\W]匹配了a,[\d\D]匹配了b,[\s\S]匹配了c,而d没有被匹配。

    \ No newline at end of file diff --git "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\350\277\233\351\230\266\346\212\200\345\267\247/index.html" "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\350\277\233\351\230\266\346\212\200\345\267\247/index.html" index 5472f8e1..af51b0e3 100644 --- "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\350\277\233\351\230\266\346\212\200\345\267\247/index.html" +++ "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\350\277\233\351\230\266\346\212\200\345\267\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    正则表达式进阶技巧

    @@ -72,6 +72,6 @@

    双大括号替换​

    var str = "My name is {{name}}. I'm {{age}} years old";
    var reg = /{{(.*?)}}/g;
    var str1 = str.replace(reg, function (match, key) {
      return {
        name: 'John',
        age: 30,
      }[key];
    });
    console.log(str1); // My name is John. I'm 30 years old

    制作简单的 HTML 模板引擎​

    -
    <div class="article">
      <script type="text/html" id="tpl">
        <div class="wrap">
          <h1>{{title}}</h1>
          <p>{{content}}</p>
          <div>作者: {{author}}</div>
        </div>
      </script>
    </div>

    <script>
      var tpl = document.getElementById('tpl').innerHTML;
      var data = {
        title: '标题',
        content: '内容',
        author: '作者',
      };
      var reg = /{{(.*?)}}/g;
      var html = tpl.replace(reg, function (match, key) {
        return data[key];
      });
      document.querySelector('.article').innerHTML = html;
    </script>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <div class="article">
      <script type="text/html" id="tpl">
        <div class="wrap">
          <h1>{{title}}</h1>
          <p>{{content}}</p>
          <div>作者: {{author}}</div>
        </div>
      </script>
    </div>

    <script>
      var tpl = document.getElementById('tpl').innerHTML;
      var data = {
        title: '标题',
        content: '内容',
        author: '作者',
      };
      var reg = /{{(.*?)}}/g;
      var html = tpl.replace(reg, function (match, key) {
        return data[key];
      });
      document.querySelector('.article').innerHTML = html;
    </script>
    \ No newline at end of file diff --git "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\351\207\217\350\257\215\344\270\216\346\226\271\346\263\225/index.html" "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\351\207\217\350\257\215\344\270\216\346\226\271\346\263\225/index.html" index 5699f2f8..60ed3311 100644 --- "a/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\351\207\217\350\257\215\344\270\216\346\226\271\346\263\225/index.html" +++ "b/docs/Backend/Regular/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\351\207\217\350\257\215\344\270\216\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    正则表达式的量词与方法

    @@ -79,6 +79,6 @@

    匹

    匹配 HTML 标签​

    假设我们要匹配 HTML 中的标签,可以使用以下正则表达式:

    var reg = /<(\w+).*?>.*?<\/\1>/g;
    var str = '<div>Hello</div><p>World</p>';
    console.log(str.match(reg)); // 输出: ['<div>Hello</div>', '<p>World</p>']
    -

    在这个正则表达式中,<(\w+).*?>表示匹配以<开头,后面跟着一个或多个字母、数字或下划线字符,再跟着任意字符(非贪婪匹配),最后以>结尾的字符串,并将标签名捕获到第一个子表达式中。.*?表示匹配任意字符(非贪婪匹配)。<\/\1>表示匹配以</开头,后面跟着第一个子表达式捕获的标签名,最后以>结尾的字符串。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个正则表达式中,<(\w+).*?>表示匹配以<开头,后面跟着一个或多个字母、数字或下划线字符,再跟着任意字符(非贪婪匹配),最后以>结尾的字符串,并将标签名捕获到第一个子表达式中。.*?表示匹配任意字符(非贪婪匹配)。<\/\1>表示匹配以</开头,后面跟着第一个子表达式捕获的标签名,最后以>结尾的字符串。

    \ No newline at end of file diff --git "a/docs/Frontend/BOM/Navigator\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" "b/docs/Frontend/BOM/Navigator\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" index 281ef2ca..1a81521b 100644 --- "a/docs/Frontend/BOM/Navigator\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/BOM/Navigator\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Navigator 的属性与方法

    @@ -37,6 +37,6 @@ 

    function getNetworkType() {
      var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
      var type = connection.effectiveType;

      switch (type) {
        case 'slow-2g':
          return '2G-';
        case '2g':
          return '2G';
        case '3g':
          return '3G';
        case '4g':
          return '4G';
        default:
          return 'Unknown network';
      }
    }

    console.log(getNetworkType()); // 输出当前的网络类型

    在上面的代码中，首先通过 navigator.connection、navigator.mozConnection 或 navigator.webkitConnection 获取网络连接对象，然后通过 effectiveType 属性获取当前的网络类型。根据不同的网络类型返回相应的字符串表示。

    需要注意的是，navigator.connection 属性在某些浏览器中可能不被支持，因此需要进行兼容性处理。

    -

    通过判断网络类型，可以根据不同的网络状况采取不同的策略，例如在低速网络下减少数据请求、降低图片质量等，以提升用户体验。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过判断网络类型，可以根据不同的网络状况采取不同的策略，例如在低速网络下减少数据请求、降低图片质量等，以提升用户体验。

    \ No newline at end of file diff --git "a/docs/Frontend/BOM/sreen\344\270\216location\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" "b/docs/Frontend/BOM/sreen\344\270\216location\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" index bb525c7d..13e76090 100644 --- "a/docs/Frontend/BOM/sreen\344\270\216location\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/BOM/sreen\344\270\216location\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    screen 与 location 对象的属性与方法

    @@ -27,6 +27,6 @@

    locati

    在单页应用(SPA)的开发中,location.hash经常被用来实现页面的无刷新跳转。通过改变hash值,可以在不重新加载页面的情况下,动态地更新页面内容,提升用户体验。

    例如,可以在页面加载完成后,根据location.hash的值来决定显示哪个组件:

    window.addEventListener('hashchange', function () {
      switch (location.hash) {
        case '#home':
          showHomePage();
          break;
        case '#about':
          showAboutPage();
          break;
        case '#contact':
          showContactPage();
          break;
        default:
          showHomePage();
      }
    });
    -

    JavaScript-practise/BOM/hash at main · sumingcheng/JavaScript-practise

    编辑此页
    最后由 sumingcheng 于 更新
    +

    JavaScript-practise/BOM/hash at main · sumingcheng/JavaScript-practise

    \ No newline at end of file diff --git "a/docs/Frontend/BOM/window\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" "b/docs/Frontend/BOM/window\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" index 993ca143..395f0ca7 100644 --- "a/docs/Frontend/BOM/window\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/BOM/window\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247\344\270\216\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    window 对象的属性与方法

    @@ -69,6 +69,6 @@

    弹出框

    使用示例如下:

    <body>
      <button onclick="openAlert()">打开alert</button>
      <button onclick="openConfirm()">打开confirm</button>
      <button onclick="openPrompt()">打开prompt</button>
      <script>
        function openAlert() {
          alert('你吃饭了吗');
        }

        function openConfirm() {
          const result = confirm('您是女性吗？');
          document.write(result ? '我是女性' : '我是男性');
        }

        function openPrompt() {
          const num1 = Number(prompt('请填写第一个数字'));
          const num2 = Number(prompt('请填写第二个数字'));
          console.log(num1 + num2);
        }
      </script>
    </body>
    -

    在实际开发中,原生的弹出框由于不够美观,通常会被自定义的弹框组件所取代。但在一些简单的交互场景下,使用内置弹框可以快速地与用户沟通。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在实际开发中,原生的弹出框由于不够美观,通常会被自定义的弹框组件所取代。但在一些简单的交互场景下,使用内置弹框可以快速地与用户沟通。

    \ No newline at end of file diff --git "a/docs/Frontend/BOM/\346\267\261\345\205\245\347\220\206\350\247\243BOM/index.html" "b/docs/Frontend/BOM/\346\267\261\345\205\245\347\220\206\350\247\243BOM/index.html" index 35968bf2..d251ecc2 100644 --- "a/docs/Frontend/BOM/\346\267\261\345\205\245\347\220\206\350\247\243BOM/index.html" +++ "b/docs/Frontend/BOM/\346\267\261\345\205\245\347\220\206\350\247\243BOM/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    深入理解 BOM

    @@ -39,6 +39,6 @@

    frames 页面中所有框架的相关信息

    多层嵌套 iframe 的访问​

    -

    对于存在多层嵌套的<iframe>标签，子<iframe>可以访问其所有父级<iframe>的内容。这是因为子<iframe>的window对象的parent属性指向了父<iframe>的window对象，通过这种链式引用，子<iframe>可以逐级向上访问父<iframe>的window对象及其内容。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    对于存在多层嵌套的<iframe>标签，子<iframe>可以访问其所有父级<iframe>的内容。这是因为子<iframe>的window对象的parent属性指向了父<iframe>的window对象，通过这种链式引用，子<iframe>可以逐级向上访问父<iframe>的window对象及其内容。

    \ No newline at end of file diff --git "a/docs/Frontend/BOM/\346\270\262\346\237\223\345\274\225\346\223\216-\345\243\260\346\230\216HTML-\346\270\262\346\237\223\346\250\241\345\274\217/index.html" "b/docs/Frontend/BOM/\346\270\262\346\237\223\345\274\225\346\223\216-\345\243\260\346\230\216HTML-\346\270\262\346\237\223\346\250\241\345\274\217/index.html" index 0367ae16..75043029 100644 --- "a/docs/Frontend/BOM/\346\270\262\346\237\223\345\274\225\346\223\216-\345\243\260\346\230\216HTML-\346\270\262\346\237\223\346\250\241\345\274\217/index.html" +++ "b/docs/Frontend/BOM/\346\270\262\346\237\223\345\274\225\346\223\216-\345\243\260\346\230\216HTML-\346\270\262\346\237\223\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器渲染引擎与渲染模式

    @@ -80,6 +80,6 @@

  • 过渡版本（Transitional）：包含展示性和弃用的元素，适用于从旧版本 HTML 过渡到新版本。
  • 框架版本（Frameset）：支持使用框架将页面分割成多个部分。
    • -

    在现代 Web 开发中，我们通常使用 HTML5 的简化 DOCTYPE 声明<!DOCTYPE html>来触发标准模式。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在现代 Web 开发中，我们通常使用 HTML5 的简化 DOCTYPE 声明<!DOCTYPE html>来触发标准模式。

    \ No newline at end of file diff --git "a/docs/Frontend/BOM/\347\247\273\345\212\250\347\253\257\344\272\213\344\273\266-touch/index.html" "b/docs/Frontend/BOM/\347\247\273\345\212\250\347\253\257\344\272\213\344\273\266-touch/index.html" index 7216cc4c..80ebe314 100644 --- "a/docs/Frontend/BOM/\347\247\273\345\212\250\347\253\257\344\272\213\344\273\266-touch/index.html" +++ "b/docs/Frontend/BOM/\347\247\273\345\212\250\347\253\257\344\272\213\344\273\266-touch/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    移动端事件之 touch

    @@ -52,6 +52,6 @@
    中间层
    <!DOCTYPE html>
    <html lang="en">
      <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" />
      </head>
      <style>
        .mask {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          z-index: 2;
        }

        .opacity-mask {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }

        button,
        input {
          width: 100px;
          height: 60px;
          border: 1px solid #ccc;
        }
      </style>
      <body>
        <div class="mask"></div>
        <div class="opacity-mask"></div>
        <button id="btn">btn</button><br />
        <a href="https://www.baidu.com/" id="link">link</a><br />
        <input type="text" />

        <script>
          var btn = document.getElementById('btn');
          var mask = document.querySelector('.mask');
          var opacityMask = document.querySelector('.opacity-mask');

          mask.addEventListener('touchstart', function () {
            var self = this;
            this.style.display = 'none';
            setTimeout(function () {
              opacityMask.style.display = 'none';
            }, 300);
          });

          btn.onclick = function () {
            console.log('button clicked');
          };
        </script>
      </body>
    </html>
    fastclick.js​

    fastclick是一个专门用于解决移动端click事件 300ms 延迟问题的库。使用方法如下

    -
    <!-- 引入fastclick.js -->
    <script src="./fastclick.js"></script>
    <script>
      // 使用FastClick
      FastClick.attach(document.body);

      var btn = document.getElementById('btn');
      var mask = document.querySelector('.mask');

      // 将touchstart改为click
      mask.addEventListener('click', function () {
        this.style.display = 'none';
      });

      btn.onclick = function () {
        console.log('button clicked');
      };
    </script>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <!-- 引入fastclick.js -->
    <script src="./fastclick.js"></script>
    <script>
      // 使用FastClick
      FastClick.attach(document.body);

      var btn = document.getElementById('btn');
      var mask = document.querySelector('.mask');

      // 将touchstart改为click
      mask.addEventListener('click', function () {
        this.style.display = 'none';
      });

      btn.onclick = function () {
        console.log('button clicked');
      };
    </script>
    \ No newline at end of file diff --git "a/docs/Frontend/BOM/\350\216\267\345\217\226\344\275\215\347\275\256-\350\256\276\345\244\207\351\200\237\345\272\246-\350\256\276\345\244\207\346\226\271\345\220\221/index.html" "b/docs/Frontend/BOM/\350\216\267\345\217\226\344\275\215\347\275\256-\350\256\276\345\244\207\351\200\237\345\272\246-\350\256\276\345\244\207\346\226\271\345\220\221/index.html" index 46c9bfa2..07fcba1e 100644 --- "a/docs/Frontend/BOM/\350\216\267\345\217\226\344\275\215\347\275\256-\350\256\276\345\244\207\351\200\237\345\272\246-\350\256\276\345\244\207\346\226\271\345\220\221/index.html" +++ "b/docs/Frontend/BOM/\350\216\267\345\217\226\344\275\215\347\275\256-\350\256\276\345\244\207\351\200\237\345\272\246-\350\256\276\345\244\207\346\226\271\345\220\221/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    获取位置、设备速度和设备方向

    @@ -31,6 +31,6 @@

    获

    获取设备方向​

    除了加速度,我们还可以获取设备的方向信息。在移动端,我们可以通过监听 deviceorientation 事件来获取设备的 alpha、beta 和 gamma 值,分别表示设备在 X、Y、Z 轴上的旋转角度。

    var geo = document.getElementById('geography');

    window.addEventListener('deviceorientation', function (e) {
      geo.innerHTML = `<p>orientation.alpha: ${e.alpha}</p>
                       <p>orientation.beta: ${e.beta}</p>
                       <p>orientation.gamma: ${e.gamma}</p>`;
    });
    -

    需要注意的是,在 iOS 设备上,我们需要使用 webkitCompassHeading 属性来获取罗盘方向。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    需要注意的是,在 iOS 设备上,我们需要使用 webkitCompassHeading 属性来获取罗盘方向。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\345\256\275\351\253\230-\345\255\227\344\275\223-\351\242\234\350\211\262-\350\276\271\346\241\206/index.html" "b/docs/Frontend/CSS/CSS-\345\256\275\351\253\230-\345\255\227\344\275\223-\351\242\234\350\211\262-\350\276\271\346\241\206/index.html" index 7f2a521e..be6747c0 100644 --- "a/docs/Frontend/CSS/CSS-\345\256\275\351\253\230-\345\255\227\344\275\223-\351\242\234\350\211\262-\350\276\271\346\241\206/index.html" +++ "b/docs/Frontend/CSS/CSS-\345\256\275\351\253\230-\345\255\227\344\275\223-\351\242\234\350\211\262-\350\276\271\346\241\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS3 属性指南

    @@ -83,6 +83,6 @@

    border-im 
    div {
        border-image: url("path_to_border_image.png") 30 round;
    }

    确保边框图片适配不同尺寸和比例，以保持边框的一致性和美观。

    链接资源​

    -

    更多关于 CSS3 属性的信息，请访问 MDN Web 文档。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    更多关于 CSS3 属性的信息，请访问 MDN Web 文档。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\346\226\207\345\255\227\345\233\276\346\240\207-\347\237\242\351\207\217\345\233\276\346\240\207/index.html" "b/docs/Frontend/CSS/CSS-\346\226\207\345\255\227\345\233\276\346\240\207-\347\237\242\351\207\217\345\233\276\346\240\207/index.html" index 8aca271e..a2c45b63 100644 --- "a/docs/Frontend/CSS/CSS-\346\226\207\345\255\227\345\233\276\346\240\207-\347\237\242\351\207\217\345\233\276\346\240\207/index.html" +++ "b/docs/Frontend/CSS/CSS-\346\226\207\345\255\227\345\233\276\346\240\207-\347\237\242\351\207\217\345\233\276\346\240\207/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    编辑此页
    最后由 sumingcheng 于 更新
    +

    更多关于图标和矢量图像的信息，请访问 MDN Web 文档。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\346\226\207\346\234\254-\345\205\211\346\240\207-\344\274\252\347\261\273/index.html" "b/docs/Frontend/CSS/CSS-\346\226\207\346\234\254-\345\205\211\346\240\207-\344\274\252\347\261\273/index.html" index e964f1a1..bf7b8b3e 100644 --- "a/docs/Frontend/CSS/CSS-\346\226\207\346\234\254-\345\205\211\346\240\207-\344\274\252\347\261\273/index.html" +++ "b/docs/Frontend/CSS/CSS-\346\226\207\346\234\254-\345\205\211\346\240\207-\344\274\252\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS-文本-光标-伪类

    文本​

    @@ -72,6 +72,6 @@

    befor 
    p::before {
        content: "Note: ";
        font-weight: bold;
    }

    通过 ::before 和 ::after 伪元素，可以添加图标、装饰线或其他视觉元素，增强内容的表达力。

    链接资源​

    -

    更多关于 CSS3 属性的信息，请访问 MDN Web 文档。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    更多关于 CSS3 属性的信息，请访问 MDN Web 文档。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\346\265\217\350\247\210\345\231\250/index.html" "b/docs/Frontend/CSS/CSS-\346\265\217\350\247\210\345\231\250/index.html" index 1942246e..eb7057ae 100644 --- "a/docs/Frontend/CSS/CSS-\346\265\217\350\247\210\345\231\250/index.html" +++ "b/docs/Frontend/CSS/CSS-\346\265\217\350\247\210\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 与浏览器的交互

    @@ -40,6 +40,6 @@

    总结​

    -

    CSS 与浏览器的交互是一个复杂的过程,涉及到下载、解析、渲染等多个步骤。由于不同浏览器在处理 CSS 时可能存在一些差异,我们需要了解 CSS 渲染模型,并采取一些策略来保证网站的跨浏览器兼容性。通过深入理解 CSS 与浏览器的互动原理,我们可以更好地掌控网页的最终呈现效果,提升用户的视觉体验。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    CSS 与浏览器的交互是一个复杂的过程,涉及到下载、解析、渲染等多个步骤。由于不同浏览器在处理 CSS 时可能存在一些差异,我们需要了解 CSS 渲染模型,并采取一些策略来保证网站的跨浏览器兼容性。通过深入理解 CSS 与浏览器的互动原理,我们可以更好地掌控网页的最终呈现效果,提升用户的视觉体验。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\346\265\256\345\212\250-\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250/index.html" "b/docs/Frontend/CSS/CSS-\346\265\256\345\212\250-\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250/index.html" index e98e0ff7..9c9c1b92 100644 --- "a/docs/Frontend/CSS/CSS-\346\265\256\345\212\250-\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250/index.html" +++ "b/docs/Frontend/CSS/CSS-\346\265\256\345\212\250-\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 浮动与伪元素选择器

    @@ -60,6 +60,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    总之,浮动和伪元素是 CSS 中两个强大的工具,合理运用它们可以实现丰富多样的布局和视觉效果。在使用时要注意浮动清除、伪元素的浏览器兼容性等问题,确保页面能够在不同环境下正常显示。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\346\270\205\351\231\244\346\265\256\345\212\250-\350\276\271\346\241\206-\350\203\214\346\231\257/index.html" "b/docs/Frontend/CSS/CSS-\346\270\205\351\231\244\346\265\256\345\212\250-\350\276\271\346\241\206-\350\203\214\346\231\257/index.html" index 42a5b583..4f79a0ff 100644 --- "a/docs/Frontend/CSS/CSS-\346\270\205\351\231\244\346\265\256\345\212\250-\350\276\271\346\241\206-\350\203\214\346\231\257/index.html" +++ "b/docs/Frontend/CSS/CSS-\346\270\205\351\231\244\346\265\256\345\212\250-\350\276\271\346\241\206-\350\203\214\346\231\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 清除浮动、边框和背景

    @@ -81,6 +81,6 @@

    复合属 fixed 代表 background-attachment center center 代表 background-position / cover 代表 background-size

    -

    使用复合属性可以更简洁地编写背景样式,但也可能降低可读性。在实践中,可以根据具体情况选择使用单独的属性或复合属性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    使用复合属性可以更简洁地编写背景样式,但也可能降低可读性。在实践中,可以根据具体情况选择使用单独的属性或复合属性。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\346\273\244\351\225\234\345\261\236\346\200\247/index.html" "b/docs/Frontend/CSS/CSS-\346\273\244\351\225\234\345\261\236\346\200\247/index.html" index 77e77676..7eafaf09 100644 --- "a/docs/Frontend/CSS/CSS-\346\273\244\351\225\234\345\261\236\346\200\247/index.html" +++ "b/docs/Frontend/CSS/CSS-\346\273\244\351\225\234\345\261\236\346\200\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用滤镜实现页面整体灰度效果

    @@ -20,6 +20,6 @@

    在实战中可直接在 html 元素上添加 filter 属性将 grayscale 值设置为所需的比例即可也可通过兼容性前缀实现更广泛的浏览器支持以下代码为页面应用约 95%的灰度效果

    filter - CSS（层叠样式表） | MDN

    html {
      filter: grayscale(95%);
      -webkit-filter: grayscale(95%);
      -moz-filter: grayscale(95%);
      -ms-filter: grayscale(95%);
      -o-filter: grayscale(95%);
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95);
    }
    -

    在真实项目中可根据实际需求动态调整灰度比例通过 JavaScript 或后端逻辑来决定是否应用该样式例如在特殊日期自动启用灰度滤镜使页面整体颜色变淡以达到纪念或突出特定主题的效果

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在真实项目中可根据实际需求动态调整灰度比例通过 JavaScript 或后端逻辑来决定是否应用该样式例如在特殊日期自动启用灰度滤镜使页面整体颜色变淡以达到纪念或突出特定主题的效果

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\347\233\222\345\255\220\346\250\241\345\236\213-\345\256\232\344\275\215/index.html" "b/docs/Frontend/CSS/CSS-\347\233\222\345\255\220\346\250\241\345\236\213-\345\256\232\344\275\215/index.html" index dc3c6963..28e2f18a 100644 --- "a/docs/Frontend/CSS/CSS-\347\233\222\345\255\220\346\250\241\345\236\213-\345\256\232\344\275\215/index.html" +++ "b/docs/Frontend/CSS/CSS-\347\233\222\345\255\220\346\250\241\345\236\213-\345\256\232\344\275\215/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 盒子模型与定位

    @@ -47,6 +47,6 @@

    固定定

    粘性定位​

    粘性定位是一种混合的定位类型，元素根据用户的滚动位置在相对定位和固定定位之间切换。当元素滚动到指定位置时，会固定在视口中。

    div {
      position: sticky;
      top: 10px;
    }
    -

    使用定位属性时，top、right、bottom 和 left 属性将确定元素的确切位置。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    使用定位属性时，top、right、bottom 和 left 属性将确定元素的确切位置。

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\350\241\250\346\240\274-BFC-\344\271\246\345\206\231-\345\221\275\345\220\215/index.html" "b/docs/Frontend/CSS/CSS-\350\241\250\346\240\274-BFC-\344\271\246\345\206\231-\345\221\275\345\220\215/index.html" index fa0fa178..973abb89 100644 --- "a/docs/Frontend/CSS/CSS-\350\241\250\346\240\274-BFC-\344\271\246\345\206\231-\345\221\275\345\220\215/index.html" +++ "b/docs/Frontend/CSS/CSS-\350\241\250\346\240\274-BFC-\344\271\246\345\206\231-\345\221\275\345\220\215/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 可视化布局与 BFC

    @@ -31,6 +31,6 @@

    书写规

    在实战中统一的书写规范可让团队成员快速理解代码结构避免因编码风格不一致引发的沟通和维护成本问题

    命名​

    为 CSS 类和 ID 选择有意义且描述性强的名称提升可读性和可维护性尽量使用简短而有意义的词语使用连字符替代下划线或驼峰避免使用 left top 等位置相关词汇可参考 BEM SMACSS 或 OOCSS 等命名规范将样式结构化模块化

    -

    在实战中为导航菜单使用.nav-menu 的命名比.top-red-bar 更易于理解和维护在修改样式或添加新功能时也能更快速定位相关代码

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在实战中为导航菜单使用.nav-menu 的命名比.top-red-bar 更易于理解和维护在修改样式或添加新功能时也能更快速定位相关代码

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/CSS-\351\200\211\346\213\251\345\231\250-\346\235\203\351\207\215-\345\214\271\351\205\215\350\247\204\345\210\231/index.html" "b/docs/Frontend/CSS/CSS-\351\200\211\346\213\251\345\231\250-\346\235\203\351\207\215-\345\214\271\351\205\215\350\247\204\345\210\231/index.html" index d74a17be..6e81152a 100644 --- "a/docs/Frontend/CSS/CSS-\351\200\211\346\213\251\345\231\250-\346\235\203\351\207\215-\345\214\271\351\205\215\350\247\204\345\210\231/index.html" +++ "b/docs/Frontend/CSS/CSS-\351\200\211\346\213\251\345\231\250-\346\235\203\351\207\215-\345\214\271\351\205\215\350\247\204\345\210\231/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 选择器、权重和匹配规则

    @@ -44,6 +44,6 @@

    CSS 权重<
  • 权重 如上所述,更高的权重会覆盖更低的权重。
  • 特定性 如果权重相同,那么选择器的特定性会决定。例如,#id .class会覆盖.class。
  • 源顺序 如果权重和特定性都相同,那么后定义的规则会覆盖先定义的规则。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/CSS/\345\237\272\346\234\254\347\224\250\346\263\225-\347\273\230\345\210\266\345\233\276\345\275\242-\346\267\273\345\212\240\346\240\267\345\274\217\345\222\214\351\242\234\350\211\262-\345\217\230\345\275\242/index.html" "b/docs/Frontend/CSS/\345\237\272\346\234\254\347\224\250\346\263\225-\347\273\230\345\210\266\345\233\276\345\275\242-\346\267\273\345\212\240\346\240\267\345\274\217\345\222\214\351\242\234\350\211\262-\345\217\230\345\275\242/index.html" index 0e57d2ec..affb6d94 100644 --- "a/docs/Frontend/CSS/\345\237\272\346\234\254\347\224\250\346\263\225-\347\273\230\345\210\266\345\233\276\345\275\242-\346\267\273\345\212\240\346\240\267\345\274\217\345\222\214\351\242\234\350\211\262-\345\217\230\345\275\242/index.html" +++ "b/docs/Frontend/CSS/\345\237\272\346\234\254\347\224\250\346\263\225-\347\273\230\345\210\266\345\233\276\345\275\242-\346\267\273\345\212\240\346\240\267\345\274\217\345\222\214\351\242\234\350\211\262-\345\217\230\345\275\242/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    获取 2D 接口

    @@ -64,6 +64,6 @@

    旋转变换​

    transform 方法允许我直接对坐标系进行复杂变换，包括倾斜、缩放和旋转的综合效果。通过合理使用 transform 方法，我能够实现复杂场景中的自定义变换。

    ctx.transform(1, 1, 0, 1, 0, 0);
    ctx.fillRect(0, 0, 50, 50);
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/\345\270\203\345\261\200\344\270\216\345\206\205\345\256\271\350\207\252\351\200\202\345\272\224/index.html" "b/docs/Frontend/CSS/\345\270\203\345\261\200\344\270\216\345\206\205\345\256\271\350\207\252\351\200\202\345\272\224/index.html" index a7ab2e00..caf5533e 100644 --- "a/docs/Frontend/CSS/\345\270\203\345\261\200\344\270\216\345\206\205\345\256\271\350\207\252\351\200\202\345\272\224/index.html" +++ "b/docs/Frontend/CSS/\345\270\203\345\261\200\344\270\216\345\206\205\345\256\271\350\207\252\351\200\202\345\272\224/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    布局与内容自适应

    @@ -22,6 +22,6 @@

    布

    此布局在实际项目中应用广泛。例如后台管理系统的整体框架中，上方是固定工具栏，下方为固定版权信息，中间为可变内容区。无论内容区文字多少，都可以在窗口自动撑开，确保用户体验舒适。

    代码示例​

    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
          }
          body::-webkit-scrollbar {
            display: none;
          }

          .layout-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
          }

          .layout-container .header {
            height: 80px;
            background: pink;
          }

          .layout-container .content {
            background-color: skyblue;
            flex: 1;
          }

          .layout-container .footer {
            height: 60px;
            background-color: black;
          }
        </style>
      </head>

      <body>
        <div class="layout-container">
          <div class="header"></div>
          <div class="content">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
          </div>
          <div class="footer"></div>
        </div>
      </body>
    </html>
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/CSS/\345\274\271\346\200\247\347\233\222\346\250\241\345\236\213/index.html" "b/docs/Frontend/CSS/\345\274\271\346\200\247\347\233\222\346\250\241\345\236\213/index.html" index b7e7be4d..f1aeaac2 100644 --- "a/docs/Frontend/CSS/\345\274\271\346\200\247\347\233\222\346\250\241\345\236\213/index.html" +++ "b/docs/Frontend/CSS/\345\274\271\346\200\247\347\233\222\346\250\241\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    弹性盒模型

    @@ -125,6 +125,6 @@

    多

    移动端固定定位​

    在移动端开发中，我有时需要让底部菜单固定在屏幕底部。这可以通过 position 属性实现。

    -
    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <title>固定定位示例</title>
        <style>
          .content {
            width: 100%;
            height: 1000px;
            background-color: black;
          }

          .fixed-menu {
            position: fixed;
            width: 100%;
            height: 100px;
            left: 0;
            bottom: 0;
            background-color: antiquewhite;
          }

          li {
            color: #fff;
            font-size: 16px;
            line-height: 30px;
          }
        </style>
      </head>
      <body>
        <div class="content"></div>
        <div class="fixed-menu">
          <h1>菜单栏</h1>
        </div>
      </body>
    </html>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <title>固定定位示例</title>
        <style>
          .content {
            width: 100%;
            height: 1000px;
            background-color: black;
          }

          .fixed-menu {
            position: fixed;
            width: 100%;
            height: 100px;
            left: 0;
            bottom: 0;
            background-color: antiquewhite;
          }

          li {
            color: #fff;
            font-size: 16px;
            line-height: 30px;
          }
        </style>
      </head>
      <body>
        <div class="content"></div>
        <div class="fixed-menu">
          <h1>菜单栏</h1>
        </div>
      </body>
    </html>
    \ No newline at end of file diff --git "a/docs/Frontend/CSS/\346\260\264\345\271\263\345\261\205\344\270\255\345\205\274\345\256\271\346\200\247/index.html" "b/docs/Frontend/CSS/\346\260\264\345\271\263\345\261\205\344\270\255\345\205\274\345\256\271\346\200\247/index.html" index d8839393..9fec6acc 100644 --- "a/docs/Frontend/CSS/\346\260\264\345\271\263\345\261\205\344\270\255\345\205\274\345\256\271\346\200\247/index.html" +++ "b/docs/Frontend/CSS/\346\260\264\345\271\263\345\261\205\344\270\255\345\205\274\345\256\271\346\200\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    水平居中兼容性

    @@ -47,6 +47,6 @@ 

    .absolute-element {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    编辑此页
    最后由 sumingcheng 于 更新
    +
    .absolute-element {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/DOM\345\210\235\350\257\206-JS\345\257\271\350\261\241-XML-\345\271\273\347\201\257\347\211\207\346\241\210\344\276\213\345\261\225\347\244\272/index.html" "b/docs/Frontend/DOM/DOM\345\210\235\350\257\206-JS\345\257\271\350\261\241-XML-\345\271\273\347\201\257\347\211\207\346\241\210\344\276\213\345\261\225\347\244\272/index.html" index 79111b34..25920d96 100644 --- "a/docs/Frontend/DOM/DOM\345\210\235\350\257\206-JS\345\257\271\350\261\241-XML-\345\271\273\347\201\257\347\211\207\346\241\210\344\276\213\345\261\225\347\244\272/index.html" +++ "b/docs/Frontend/DOM/DOM\345\210\235\350\257\206-JS\345\257\271\350\261\241-XML-\345\271\273\347\201\257\347\211\207\346\241\210\344\276\213\345\261\225\347\244\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    ECMAScript 3 种对象

    @@ -54,6 +54,6 @@

    案例插件开发​

    为了更好地组织代码和实现复用性，我通常将功能封装成插件。在下面的示例中，我通过构造函数和原型方法将幻灯片逻辑打包成可复用的模块。这样在后续项目中，我只需要传入特定类名即可快速初始化并使用。实际开发中，我还会考虑将这些插件进行参数扩展和方法增强，以满足更多的场景需求。

    (function () {
      var Slider = function (opt) {
        this.sliderItem = document.getElementsByClassName(opt.sliderItem);
        this.thumbsItem = document.getElementsByClassName(opt.thumbsItem);
        this.bindClick();
      };

      Slider.prototype = {
        bindClick: function () {
          var slider = this.sliderItem;
          var thumbs = this.thumbsItem;

          for (var i = 0; i < thumbs.length; i++) {
            (function (j) {
              thumbs[j].onclick = function () {
                for (var k = 0; k < thumbs.length; k++) {
                  thumbs[k].className = 'thumbs-itme';
                  slider[k].className = 'slider-item';
                }
                this.className += ' cur';
                slider[j].className += ' active';
              };
            })(i);
          }
        },
      };

      window.Slider = Slider;
    })();

    var slider = new Slider({
      sliderItem: 'slider-item',
      thumbsItem: 'thumbs-itme',
    });
    -

    JavaScript-practise/DOM at main · sumingcheng/JavaScript-practise

    编辑此页
    最后由 sumingcheng 于 更新
    +

    JavaScript-practise/DOM at main · sumingcheng/JavaScript-practise

    \ No newline at end of file diff --git "a/docs/Frontend/DOM/document\345\257\271\350\261\241-\350\216\267\345\217\226\345\205\203\347\264\240-\350\212\202\347\202\271-\351\201\215\345\216\206\346\240\221/index.html" "b/docs/Frontend/DOM/document\345\257\271\350\261\241-\350\216\267\345\217\226\345\205\203\347\264\240-\350\212\202\347\202\271-\351\201\215\345\216\206\346\240\221/index.html" index bb7c2f4b..2593e052 100644 --- "a/docs/Frontend/DOM/document\345\257\271\350\261\241-\350\216\267\345\217\226\345\205\203\347\264\240-\350\212\202\347\202\271-\351\201\215\345\216\206\346\240\221/index.html" +++ "b/docs/Frontend/DOM/document\345\257\271\350\261\241-\350\216\267\345\217\226\345\205\203\347\264\240-\350\212\202\347\202\271-\351\201\215\345\216\206\346\240\221/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    document 对象与 DOM 操作

    @@ -129,6 +129,6 @@ 

    var p = document.querySelector('p');
    var prev = p.previousElementSibling;
    var next = p.nextElementSibling;
    console.log(prev); // <a href="">超链接</a>
    console.log(next); // <h1>标题</h1>

    -

    注意 IE 9 及以下不支持

    编辑此页
    最后由 sumingcheng 于 更新
    +

    注意 IE 9 及以下不支持

    \ No newline at end of file diff --git "a/docs/Frontend/DOM/domTree-\350\247\243\346\236\220\344\270\216\345\212\240\350\275\275-\345\233\236\346\265\201\344\270\216\351\207\215\347\273\230/index.html" "b/docs/Frontend/DOM/domTree-\350\247\243\346\236\220\344\270\216\345\212\240\350\275\275-\345\233\236\346\265\201\344\270\216\351\207\215\347\273\230/index.html" index 1d663804..eebc2a16 100644 --- "a/docs/Frontend/DOM/domTree-\350\247\243\346\236\220\344\270\216\345\212\240\350\275\275-\345\233\236\346\265\201\344\270\216\351\207\215\347\273\230/index.html" +++ "b/docs/Frontend/DOM/domTree-\350\247\243\346\236\220\344\270\216\345\212\240\350\275\275-\345\233\236\346\265\201\344\270\216\351\207\215\347\273\230/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    domTree 解析

    @@ -100,6 +100,6 @@

    缓

    动画元素绝对定位​

    动画的元素一定要绝对定位，去脱离文档普通流，所有的动画和重绘都不影响到父级。

    table 布局​

    -

    table回流和重绘的代价相当大，table内部本身有很多自己的设置，对回流的影响相当的大。可以使用dl``ul代替。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    table回流和重绘的代价相当大，table内部本身有很多自己的设置，对回流的影响相当的大。可以使用dl``ul代替。

    \ No newline at end of file diff --git a/docs/Frontend/DOM/innerHTML/index.html b/docs/Frontend/DOM/innerHTML/index.html index ef03fdd8..00495cee 100644 --- a/docs/Frontend/DOM/innerHTML/index.html +++ b/docs/Frontend/DOM/innerHTML/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    深入理解 element.innerHTML

    @@ -62,6 +62,6 @@

    H

    与 textContent 的区别​

    textContent 获取元素的所有文本内容，包括 <script>、<style> 等特殊标签中的内容。

    innerText 仅获取用户可见的内容，受 CSS 样式影响。此外，读取 innerText 时，浏览器需重新计算渲染结果，性能较差。

    -
    <div class="wrapper">
      <h1>标题</h1>
      <p class="content">
        <style>
          .content {
            color: orange;
          }
        </style>
        可见内容
        <br />
        可见内容
        <span style="display: none;">不可见内容</span>
      </p>
    </div>

    <script>
      const wrapper = document.querySelector('.wrapper');
      console.log(wrapper.innerText);
      // 输出:
      // 标题
      // 可见内容
      // 可见内容

      console.log(wrapper.textContent);
      // 输出:
      // 标题
      //
      //   .content { color: orange; }
      //
      //   可见内容
      //
      //   可见内容
      //   不可见内容
    </script>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <div class="wrapper">
      <h1>标题</h1>
      <p class="content">
        <style>
          .content {
            color: orange;
          }
        </style>
        可见内容
        <br />
        可见内容
        <span style="display: none;">不可见内容</span>
      </p>
    </div>

    <script>
      const wrapper = document.querySelector('.wrapper');
      console.log(wrapper.innerText);
      // 输出:
      // 标题
      // 可见内容
      // 可见内容

      console.log(wrapper.textContent);
      // 输出:
      // 标题
      //
      //   .content { color: orange; }
      //
      //   可见内容
      //
      //   可见内容
      //   不可见内容
    </script>
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260-\345\206\222\346\263\241\346\215\225\350\216\267-\351\230\273\346\255\242\345\206\222\346\263\241\351\273\230\350\256\244\344\272\213\344\273\266/index.html" "b/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260-\345\206\222\346\263\241\346\215\225\350\216\267-\351\230\273\346\255\242\345\206\222\346\263\241\351\273\230\350\256\244\344\272\213\344\273\266/index.html" index f82cc89d..f9046fa3 100644 --- "a/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260-\345\206\222\346\263\241\346\215\225\350\216\267-\351\230\273\346\255\242\345\206\222\346\263\241\351\273\230\350\256\244\344\272\213\344\273\266/index.html" +++ "b/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260-\345\206\222\346\263\241\346\215\225\350\216\267-\351\230\273\346\255\242\345\206\222\346\263\241\351\273\230\350\256\244\344\272\213\344\273\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    事件处理函数

    @@ -140,6 +140,6 @@

    点击图标查看详情

    <!DOCTYPE html>
    <html lang="en">
      <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" />
      </head>
      <style>
        .link {
          display: block;
          width: 100px;
          height: 100px;
          background-color: orange;
        }
      </style>

      <body>
        <a href="http://www.baidu.com" class="link" target="_blank">
          <div class="inner">点击DIV</div>
        </a>
        <script>
          var inner = document.getElementsByClassName('inner')[0];
          inner.onclick = function (e) {
            var event = e || window.event;
            event.preventDefault();
            console.log('我点击了');
          };
        </script>
      </body>
    </html>

    阻止表单提交

    取消页面跳转的提交现象，阻止默认行为后，可以进行异步提交。

    -
    <!DOCTYPE html>
    <html lang="en">
      <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" />
      </head>

      <body>
        <form action="">
          <input type="text" name="content" />
          <input type="submit" value="提交" id="submit" />
        </form>
        <script>
          var submitButton = document.getElementById('submit');
          submitButton.onclick = function (e) {
            var event = e || window.event;
            event.preventDefault();
            console.log('提交了');
          };
        </script>
      </body>
    </html>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <!DOCTYPE html>
    <html lang="en">
      <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" />
      </head>

      <body>
        <form action="">
          <input type="text" name="content" />
          <input type="submit" value="提交" id="submit" />
        </form>
        <script>
          var submitButton = document.getElementById('submit');
          submitButton.onclick = function (e) {
            var event = e || window.event;
            event.preventDefault();
            console.log('提交了');
          };
        </script>
      </body>
    </html>
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\232\204\347\273\221\345\256\232/index.html" "b/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\232\204\347\273\221\345\256\232/index.html" index 30f2424b..6cdca025 100644 --- "a/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\232\204\347\273\221\345\256\232/index.html" +++ "b/docs/Frontend/DOM/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\232\204\347\273\221\345\256\232/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    事件处理函数的绑定

    @@ -48,6 +48,6 @@

    绑定多个事件处理函数​

    const App = { data() { return { count: 0, log: [] }; }, template: `
    <div>
          <h1>{{ count }}</h1>
          <button @click="handleIncrease(2)">增加</button>
          <button @click="handleDecrease(1)">减少</button>
        </div>
    `, methods: { handleIncrease(amount) { this.count += amount; this.addLog('增加', amount); }, handleDecrease(amount) { this.count -= amount; this.addLog('减少', amount); },
    addLog(action, amount) { this.log.push({ action, amount, timestamp: new Date() }); } } } Vue.createApp(App).mount('#app');

    在这个示例中，我通过方法handleIncrease和handleDecrease分别处理增加和减少的逻辑，并调用addLog方法记录操作日志。这种方式避免了在模板中直接调用多个函数，提高了代码的清晰度和可维护性。

    -

    如果需要在一个事件中执行多个操作，可以在单一的方法中依次调用相关的函数，而不是在模板中使用逗号分隔。这有助于保持模板的简洁性，并集中管理逻辑。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    如果需要在一个事件中执行多个操作，可以在单一的方法中依次调用相关的函数，而不是在模板中使用逗号分隔。这有助于保持模板的简洁性，并集中管理逻辑。

    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\345\206\222\346\263\241\346\215\225\350\216\267\346\265\201-\344\272\213\344\273\266\344\270\216\344\272\213\344\273\266\346\272\220\345\257\271\350\261\241-\344\272\213\344\273\266\345\247\224\346\211\230/index.html" "b/docs/Frontend/DOM/\345\206\222\346\263\241\346\215\225\350\216\267\346\265\201-\344\272\213\344\273\266\344\270\216\344\272\213\344\273\266\346\272\220\345\257\271\350\261\241-\344\272\213\344\273\266\345\247\224\346\211\230/index.html" index ba9af883..d997f93b 100644 --- "a/docs/Frontend/DOM/\345\206\222\346\263\241\346\215\225\350\216\267\346\265\201-\344\272\213\344\273\266\344\270\216\344\272\213\344\273\266\346\272\220\345\257\271\350\261\241-\344\272\213\344\273\266\345\247\224\346\211\230/index.html" +++ "b/docs/Frontend/DOM/\345\206\222\346\263\241\346\215\225\350\216\267\346\265\201-\344\272\213\344\273\266\344\270\216\344\272\213\344\273\266\346\272\220\345\257\271\350\261\241-\344\272\213\344\273\266\345\247\224\346\211\230/index.html" @@ -11,10 +11,10 @@ - - + + -
    跳到主要内容

    冒泡捕获流-事件与事件源对象-事件委托

    # DOM事件流与事件委托

    ## 事件流
    事件流描述了页面接收事件的顺序。主要有两种事件流模型：
    1. `IE`提出的事件冒泡流`Event Bubbling`
    2. `Netscape`提出的事件捕获流`Event Capturing`

    ## 事件流阶段
    DOM事件流分为三个阶段：
    1. 事件捕获阶段：事件从文档的根节点流向目标节点，途中经过各个层次的DOM节点，在各节点上触发捕获事件。
    2. 目标阶段：事件到达目标节点，触发目标节点的事件处理程序。如果一个节点绑定了多个事件处理程序，则按照它们定义的先后顺序依次执行。
    3. 事件冒泡阶段：事件从目标节点流向文档的根节点，途中经过各个层次的DOM节点，在各节点上触发冒泡事件。

    ## DOM事件模型
    1. `DOM0`级事件模型：通过`on`前缀的属性注册事件处理程序，如`onclick`、`onmouseover`等。
    2. `DOM1`级事件模型：没有定义事件相关的内容。
    3. `DOM2`级事件模型：定义了`addEventListener()`和`removeEventListener()`方法来添加和删除事件处理程序。这是W3C的标准规范。

    ## 事件对象
    当事件被触发时，浏览器会创建一个事件对象，作为参数传递给事件处理程序，其中包含了与事件相关的详细信息。

    ```javascript
    // 浏览器会把事件对象包装成形参传递过来
    wrapper.onclick = function (e) {
      var e = e || window.event;
      console.log(e);
    }
    ```

    ![](../../assets/c5db92a20ed70b4ab70688ae30e99874.png)

    ## 事件源对象
    事件源对象指的是触发事件的DOM元素。不同浏览器对事件源对象的属性支持有所不同：
    1. 火狐只支持`target`属性
    2. `IE`只支持`srcElement`属性
    3. 谷歌两个属性都支持

    ![](../../assets/d7866e536156d864ff2261809af39c0b.png)

    ## 事件委托
    事件委托是一种利用事件冒泡机制来简化事件处理的技术。它将事件处理程序注册到一个父级元素上，当子元素触发事件时，事件会冒泡到父级元素，从而被父级元素的事件处理程序捕获并处理。这样可以避免给每个子元素都注册事件处理程序，提高性能。

    下面是一个事件委托的示例：

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <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">
    </head>
    <body>
      <button>增加li</button>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
      <script>
        var list = document.getElementsByTagName('ul')[0],
          items = list.getElementsByTagName('li'),
          addBtn = document.getElementsByTagName('button')[0];

        list.onclick = function (e) {
          var e = e || window.event,
            target = e.target || e.srcElement;
          console.log(target.innerText);
        }

        addBtn.onclick = function () {
          var li = document.createElement('li');
          li.innerText = items.length + 1;
          list.appendChild(li);
        }
      </script>
    </body>
    </html>
    ```

    在这个例子中，我们给`<ul>`元素注册了一个`onclick`事件处理程序。当用户点击列表项`<li>`时，点击事件会冒泡到`<ul>`元素上，被其事件处理程序捕获。通过`event.target`可以获取到实际被点击的`<li>`元素。这样无论列表项有多少个，都只需给`<ul>`注册一个事件处理程序即可。

    ### 获取元素列表的下标
    有时我们需要获取被点击的列表项在列表中的下标位置，有两种常见的实现方式：

    #### 方法1：循环比较
    通过循环遍历列表，比较每一项与被点击元素是否相等，从而得到下标。

    ```javascript
    list.onclick = function (e) {
      var e = e || window.event,
        target = e.target || e.srcElement;

      for (var i = 0; i < items.length; i++) {
        if (target === items[i]) {
          console.log(i);
          break;
        }
      }
    }
    ```

    #### 方法2：使用indexOf
    将`NodeList`转换为数组，然后调用数组的`indexOf()`方法查找下标。

    ```javascript
    list.onclick = function (e) {
      var e = e || window.event,
        target = e.target || e.srcElement;

      var index = Array.prototype.indexOf.call(items, target);
      console.log(index);
    }
    ```

    使用`indexOf()`的方式更加简洁，但是要注意`NodeList`并非真正的数组，需要通过`call()`来借用数组的方法。

    编辑此页
    最后由 sumingcheng 于 更新
    +
    跳到主要内容

    冒泡捕获流-事件与事件源对象-事件委托

    # DOM事件流与事件委托

    ## 事件流
    事件流描述了页面接收事件的顺序。主要有两种事件流模型：
    1. `IE`提出的事件冒泡流`Event Bubbling`
    2. `Netscape`提出的事件捕获流`Event Capturing`

    ## 事件流阶段
    DOM事件流分为三个阶段：
    1. 事件捕获阶段：事件从文档的根节点流向目标节点，途中经过各个层次的DOM节点，在各节点上触发捕获事件。
    2. 目标阶段：事件到达目标节点，触发目标节点的事件处理程序。如果一个节点绑定了多个事件处理程序，则按照它们定义的先后顺序依次执行。
    3. 事件冒泡阶段：事件从目标节点流向文档的根节点，途中经过各个层次的DOM节点，在各节点上触发冒泡事件。

    ## DOM事件模型
    1. `DOM0`级事件模型：通过`on`前缀的属性注册事件处理程序，如`onclick`、`onmouseover`等。
    2. `DOM1`级事件模型：没有定义事件相关的内容。
    3. `DOM2`级事件模型：定义了`addEventListener()`和`removeEventListener()`方法来添加和删除事件处理程序。这是W3C的标准规范。

    ## 事件对象
    当事件被触发时，浏览器会创建一个事件对象，作为参数传递给事件处理程序，其中包含了与事件相关的详细信息。

    ```javascript
    // 浏览器会把事件对象包装成形参传递过来
    wrapper.onclick = function (e) {
      var e = e || window.event;
      console.log(e);
    }
    ```

    ![](../../assets/c5db92a20ed70b4ab70688ae30e99874.png)

    ## 事件源对象
    事件源对象指的是触发事件的DOM元素。不同浏览器对事件源对象的属性支持有所不同：
    1. 火狐只支持`target`属性
    2. `IE`只支持`srcElement`属性
    3. 谷歌两个属性都支持

    ![](../../assets/d7866e536156d864ff2261809af39c0b.png)

    ## 事件委托
    事件委托是一种利用事件冒泡机制来简化事件处理的技术。它将事件处理程序注册到一个父级元素上，当子元素触发事件时，事件会冒泡到父级元素，从而被父级元素的事件处理程序捕获并处理。这样可以避免给每个子元素都注册事件处理程序，提高性能。

    下面是一个事件委托的示例：

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <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">
    </head>
    <body>
      <button>增加li</button>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
      <script>
        var list = document.getElementsByTagName('ul')[0],
          items = list.getElementsByTagName('li'),
          addBtn = document.getElementsByTagName('button')[0];

        list.onclick = function (e) {
          var e = e || window.event,
            target = e.target || e.srcElement;
          console.log(target.innerText);
        }

        addBtn.onclick = function () {
          var li = document.createElement('li');
          li.innerText = items.length + 1;
          list.appendChild(li);
        }
      </script>
    </body>
    </html>
    ```

    在这个例子中，我们给`<ul>`元素注册了一个`onclick`事件处理程序。当用户点击列表项`<li>`时，点击事件会冒泡到`<ul>`元素上，被其事件处理程序捕获。通过`event.target`可以获取到实际被点击的`<li>`元素。这样无论列表项有多少个，都只需给`<ul>`注册一个事件处理程序即可。

    ### 获取元素列表的下标
    有时我们需要获取被点击的列表项在列表中的下标位置，有两种常见的实现方式：

    #### 方法1：循环比较
    通过循环遍历列表，比较每一项与被点击元素是否相等，从而得到下标。

    ```javascript
    list.onclick = function (e) {
      var e = e || window.event,
        target = e.target || e.srcElement;

      for (var i = 0; i < items.length; i++) {
        if (target === items[i]) {
          console.log(i);
          break;
        }
      }
    }
    ```

    #### 方法2：使用indexOf
    将`NodeList`转换为数组，然后调用数组的`indexOf()`方法查找下标。

    ```javascript
    list.onclick = function (e) {
      var e = e || window.event,
        target = e.target || e.srcElement;

      var index = Array.prototype.indexOf.call(items, target);
      console.log(index);
    }
    ```

    使用`indexOf()`的方式更加简洁，但是要注意`NodeList`并非真正的数组，需要通过`call()`来借用数组的方法。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\346\227\266\351\227\264\347\272\277-\350\247\243\346\236\220\344\270\216\346\270\262\346\237\223-\345\260\201\350\243\205\346\226\207\346\241\243\350\247\243\346\236\220\345\256\214\346\257\225\345\207\275\346\225\260/index.html" "b/docs/Frontend/DOM/\346\227\266\351\227\264\347\272\277-\350\247\243\346\236\220\344\270\216\346\270\262\346\237\223-\345\260\201\350\243\205\346\226\207\346\241\243\350\247\243\346\236\220\345\256\214\346\257\225\345\207\275\346\225\260/index.html" index 119066db..ef0f0959 100644 --- "a/docs/Frontend/DOM/\346\227\266\351\227\264\347\272\277-\350\247\243\346\236\220\344\270\216\346\270\262\346\237\223-\345\260\201\350\243\205\346\226\207\346\241\243\350\247\243\346\236\220\345\256\214\346\257\225\345\207\275\346\225\260/index.html" +++ "b/docs/Frontend/DOM/\346\227\266\351\227\264\347\272\277-\350\247\243\346\236\220\344\270\216\346\270\262\346\237\223-\345\260\201\350\243\205\346\226\207\346\241\243\350\247\243\346\236\220\345\256\214\346\257\225\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器时间线 - 解析与渲染过程详解

    @@ -81,6 +81,6 @@

    事件捕

    useCapture默认为false,表示使用冒泡传递。当设置为true时,则使用捕获传递。例如:

    document.getElementById('myDiv').addEventListener('click', handleClick, true);

    这样,名为myDiv的元素在捕获阶段就会触发handleClick函数。

    -

    理解事件传递机制有助于我们正确处理事件,避免可能出现的问题。在实际开发中,大部分情况下使用事件冒泡就足够了。只有在特定场景下,我们才需要使用事件捕获。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    理解事件传递机制有助于我们正确处理事件,避免可能出现的问题。在实际开发中,大部分情况下使用事件冒泡就足够了。只有在特定场景下,我们才需要使用事件捕获。

    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\346\273\232\345\212\250\350\267\235\347\246\273\344\270\216\351\253\230\345\272\246-\345\205\274\345\256\271\346\250\241\345\274\217-\345\217\257\350\247\206\345\260\272\345\257\270/index.html" "b/docs/Frontend/DOM/\346\273\232\345\212\250\350\267\235\347\246\273\344\270\216\351\253\230\345\272\246-\345\205\274\345\256\271\346\250\241\345\274\217-\345\217\257\350\247\206\345\260\272\345\257\270/index.html" index 9cd98337..05fd3bf4 100644 --- "a/docs/Frontend/DOM/\346\273\232\345\212\250\350\267\235\347\246\273\344\270\216\351\253\230\345\272\246-\345\205\274\345\256\271\346\250\241\345\274\217-\345\217\257\350\247\206\345\260\272\345\257\270/index.html" +++ "b/docs/Frontend/DOM/\346\273\232\345\212\250\350\267\235\347\246\273\344\270\216\351\253\230\345\272\246-\345\205\274\345\256\271\346\250\241\345\274\217-\345\217\257\350\247\206\345\260\272\345\257\270/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    滚动条操作指南

    @@ -56,6 +56,6 @@

    操作滚动条

    // 滚动到指定的X/Y轴距离，默认返回undefined
    window.scroll(x, y);
    window.scrollTo(x, y);
    // 每次执行都会在当前基础上滚动指定的距离
    window.scrollBy(x, y);

    完整代码示例

    以下是一个完整的示例，展示如何获取滚动条距离、浏览器可视区域以及操作滚动条。

    -
    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <style>
          body {
            height: 2000px;
            padding: 20px;
          }
          .button {
            position: fixed;
            top: 20px;
            right: 20px;
          }
        </style>
        <title>滚动条操作示例</title>
      </head>

      <body>
        <button class="button" onclick="scrollToTop()">滚动到顶部</button>
        <button class="button" onclick="scrollToBottom()">滚动到底部</button>

        <script>
          function scrollToTop() {
            window.scrollTo({
              top: 0,
              behavior: 'smooth',
            });
          }

          function scrollToBottom() {
            window.scrollTo({
              top: document.body.scrollHeight,
              behavior: 'smooth',
            });
          }

          // 获取当前滚动位置
          console.log(getScrollOffset());

          // 获取可视区域尺寸
          console.log(getViewPortSize());

          // 获取整个页面尺寸
          console.log(getScrollSize());
        </script>
      </body>
    </html>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <style>
          body {
            height: 2000px;
            padding: 20px;
          }
          .button {
            position: fixed;
            top: 20px;
            right: 20px;
          }
        </style>
        <title>滚动条操作示例</title>
      </head>

      <body>
        <button class="button" onclick="scrollToTop()">滚动到顶部</button>
        <button class="button" onclick="scrollToBottom()">滚动到底部</button>

        <script>
          function scrollToTop() {
            window.scrollTo({
              top: 0,
              behavior: 'smooth',
            });
          }

          function scrollToBottom() {
            window.scrollTo({
              top: document.body.scrollHeight,
              behavior: 'smooth',
            });
          }

          // 获取当前滚动位置
          console.log(getScrollOffset());

          // 获取可视区域尺寸
          console.log(getViewPortSize());

          // 获取整个页面尺寸
          console.log(getScrollSize());
        </script>
      </body>
    </html>
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\350\212\202\347\202\271\345\261\236\346\200\247-\346\226\271\346\263\225-\345\260\201\350\243\205\346\226\271\346\263\225-DOM\347\273\223\346\236\204/index.html" "b/docs/Frontend/DOM/\350\212\202\347\202\271\345\261\236\346\200\247-\346\226\271\346\263\225-\345\260\201\350\243\205\346\226\271\346\263\225-DOM\347\273\223\346\236\204/index.html" index 2ade4c6a..a93d589e 100644 --- "a/docs/Frontend/DOM/\350\212\202\347\202\271\345\261\236\346\200\247-\346\226\271\346\263\225-\345\260\201\350\243\205\346\226\271\346\263\225-DOM\347\273\223\346\236\204/index.html" +++ "b/docs/Frontend/DOM/\350\212\202\347\202\271\345\261\236\346\200\247-\346\226\271\346\263\225-\345\260\201\350\243\205\346\226\271\346\263\225-DOM\347\273\223\346\236\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    DOM 节点属性与方法

    @@ -96,6 +96,6 @@

    案例一
    Element.prototype.getChildElements = function (index) {
      var childElements = [];
      var children = this.childNodes;

      // 遍历所有子节点
      for (var i = 0; i < children.length; i++) {
        // 只收集元素节点
        if (children[i].nodeType === 1) {
          childElements.push(children[i]);
        }
      }

      // 如果传入了索引,返回对应位置的元素
      if (typeof index === 'number') {
        return childElements[index];
      }

      // 否则返回所有元素节点集合
      return childElements;
    };

    // 使用示例
    var div = document.querySelector('div');

    // 获取所有子元素节点
    var allChildren = div.getChildElements();

    // 获取第一个子元素节点
    var firstChild = div.getChildElements(0);

    案例二​

    在原型上编程，找出一个元素的第 N 层父级元素。

    -
    Element.prototype.getNthParentElement = function (n) {
      // 参数校验
      if (typeof n !== 'number' || n < 1) {
        return null;
      }

      var currentElement = this;
      var count = 0;

      // 循环向上查找父元素
      while (currentElement && count < n) {
        currentElement = currentElement.parentElement;
        count++;
      }

      return currentElement;
    };

    // 使用示例
    var p = document.querySelector('p');

    // 获取第一层父元素
    var parent1 = p.getNthParentElement(1);

    // 获取第二层父元素
    var parent2 = p.getNthParentElement(2);

    // 获取第三层父元素
    var parent3 = p.getNthParentElement(3);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    Element.prototype.getNthParentElement = function (n) {
      // 参数校验
      if (typeof n !== 'number' || n < 1) {
        return null;
      }

      var currentElement = this;
      var count = 0;

      // 循环向上查找父元素
      while (currentElement && count < n) {
        currentElement = currentElement.parentElement;
        count++;
      }

      return currentElement;
    };

    // 使用示例
    var p = document.querySelector('p');

    // 获取第一层父元素
    var parent1 = p.getNthParentElement(1);

    // 获取第二层父元素
    var parent2 = p.getNthParentElement(2);

    // 获取第三层父元素
    var parent3 = p.getNthParentElement(3);
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\350\257\273\345\206\231\346\240\267\345\274\217\345\261\236\346\200\247-\346\223\215\344\275\234\344\274\252\345\205\203\347\264\240-\345\205\203\347\264\240\350\277\220\345\212\250\345\210\235\346\216\242/index.html" "b/docs/Frontend/DOM/\350\257\273\345\206\231\346\240\267\345\274\217\345\261\236\346\200\247-\346\223\215\344\275\234\344\274\252\345\205\203\347\264\240-\345\205\203\347\264\240\350\277\220\345\212\250\345\210\235\346\216\242/index.html" index 619d570a..949820f7 100644 --- "a/docs/Frontend/DOM/\350\257\273\345\206\231\346\240\267\345\274\217\345\261\236\346\200\247-\346\223\215\344\275\234\344\274\252\345\205\203\347\264\240-\345\205\203\347\264\240\350\277\220\345\212\250\345\210\235\346\216\242/index.html" +++ "b/docs/Frontend/DOM/\350\257\273\345\206\231\346\240\267\345\274\217\345\261\236\346\200\247-\346\223\215\344\275\234\344\274\252\345\205\203\347\264\240-\345\205\203\347\264\240\350\277\220\345\212\250\345\210\235\346\216\242/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    DOM 操作 CSS 样式与伪元素

    @@ -63,6 +63,6 @@ 

    <style type="text/css">
      .box {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
      }

      .box.active {
        width: 200px;
        height: 200px;
        border: 1px #000 solid;
        background-color: burlywood;
        border-radius: 50%;
      }
    </style>

    <div class="box"></div>

    <script type="text/javascript">
      var div = document.getElementsByTagName('div')[0];
      div.onclick = function () {
        this.className += ' active';
      };
    </script>

    实战案例：防抖菜单​

    下面是一个实际的应用案例，实现了一个具有防抖功能的菜单效果：

    -

    https://github.com/sumingcheng/JavaScript-practise/blob/main/DOM/%E9%98%B2%E6%8A%96%E8%8F%9C%E5%8D%95.html

    编辑此页
    最后由 sumingcheng 于 更新
    +

    https://github.com/sumingcheng/JavaScript-practise/blob/main/DOM/%E9%98%B2%E6%8A%96%E8%8F%9C%E5%8D%95.html

    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\351\274\240\346\240\207\344\272\213\344\273\266\346\267\261\345\205\245-\347\202\271\345\207\273\344\270\216\346\213\226\346\213\275\345\210\206\347\246\273-\345\217\214\345\207\273\344\272\213\344\273\266/index.html" "b/docs/Frontend/DOM/\351\274\240\346\240\207\344\272\213\344\273\266\346\267\261\345\205\245-\347\202\271\345\207\273\344\270\216\346\213\226\346\213\275\345\210\206\347\246\273-\345\217\214\345\207\273\344\272\213\344\273\266/index.html" index b286232a..6a666993 100644 --- "a/docs/Frontend/DOM/\351\274\240\346\240\207\344\272\213\344\273\266\346\267\261\345\205\245-\347\202\271\345\207\273\344\270\216\346\213\226\346\213\275\345\210\206\347\246\273-\345\217\214\345\207\273\344\272\213\344\273\266/index.html" +++ "b/docs/Frontend/DOM/\351\274\240\346\240\207\344\272\213\344\273\266\346\267\261\345\205\245-\347\202\271\345\207\273\344\270\216\346\213\226\346\213\275\345\210\206\347\246\273-\345\217\214\345\207\273\344\272\213\344\273\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    鼠标事件与元素拖拽

    @@ -29,6 +29,6 @@

    鼠标

    鼠标的三个按键分别对应 0、1 和 2。开发右键相关功能时，需确保浏览器版本在 IE10 以上。

    document.onmousedown = function (e) {
      console.log(e.button);
    };

    鼠标右键菜单​

    -
    document.addEventListener('contextmenu', function (e) {
      e.preventDefault();
      console.log('右键菜单被触发');
      // 在此处添加自定义右键菜单逻辑
    });
    编辑此页
    最后由 sumingcheng 于 更新
    +
    document.addEventListener('contextmenu', function (e) {
      e.preventDefault();
      console.log('右键菜单被触发');
      // 在此处添加自定义右键菜单逻辑
    });
    \ No newline at end of file diff --git "a/docs/Frontend/DOM/\351\274\240\346\240\207\350\241\214\344\270\272-pageXY\345\260\201\350\243\205-\346\213\226\346\213\275\345\207\275\346\225\260\345\260\201\350\243\205/index.html" "b/docs/Frontend/DOM/\351\274\240\346\240\207\350\241\214\344\270\272-pageXY\345\260\201\350\243\205-\346\213\226\346\213\275\345\207\275\346\225\260\345\260\201\350\243\205/index.html" index 3e6668a3..20987fb0 100644 --- "a/docs/Frontend/DOM/\351\274\240\346\240\207\350\241\214\344\270\272-pageXY\345\260\201\350\243\205-\346\213\226\346\213\275\345\207\275\346\225\260\345\260\201\350\243\205/index.html" +++ "b/docs/Frontend/DOM/\351\274\240\346\240\207\350\241\214\344\270\272-pageXY\345\260\201\350\243\205-\346\213\226\346\213\275\345\207\275\346\225\260\345\260\201\350\243\205/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    好的,我已经阅读了你提供的文档内容,接下来我将按照你的要求对文档进行修改和润色。

    @@ -49,6 +49,6 @@

    封

    elemDrag函数接收一个 DOM 元素作为参数,为该元素添加拖拽功能。它的实现与前面的示例代码类似,只是使用了更语义化的变量名。

    此外,在mousedown事件最后,我们调用了stopPropagation和preventDefault方法,阻止事件冒泡和默认行为,避免拖拽过程中触发其他不相关的事件。

    使用封装好的elemDrag函数,我们可以方便地为任意元素添加拖拽功能:

    -
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    elemDrag(box1);
    elemDrag(box2);

    编辑此页
    最后由 sumingcheng 于 更新
    +
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    elemDrag(box1);
    elemDrag(box2);
    \ No newline at end of file diff --git "a/docs/Frontend/Electron/\345\210\235\350\257\206-\345\237\272\347\241\200/index.html" "b/docs/Frontend/Electron/\345\210\235\350\257\206-\345\237\272\347\241\200/index.html" index bfb8e226..6455bf79 100644 --- "a/docs/Frontend/Electron/\345\210\235\350\257\206-\345\237\272\347\241\200/index.html" +++ "b/docs/Frontend/Electron/\345\210\235\350\257\206-\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Electron 初识与基础

    @@ -44,6 +44,6 @@

    总结​

    -

    如果项目对性能和体验要求不是极致,而是希望快速开发和迭代,降低跨平台开发成本,那么 Electron 是一个不错的选择。它允许开发者使用熟悉的 web 技术如 HTML/CSS/JavaScript 来构建功能丰富的桌面应用,同时支持 Windows、macOS、Linux 等主流操作系统。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    如果项目对性能和体验要求不是极致,而是希望快速开发和迭代,降低跨平台开发成本,那么 Electron 是一个不错的选择。它允许开发者使用熟悉的 web 技术如 HTML/CSS/JavaScript 来构建功能丰富的桌面应用,同时支持 Windows、macOS、Linux 等主流操作系统。

    \ No newline at end of file diff --git "a/docs/Frontend/Electron/\345\220\257\345\212\250\344\272\213\344\273\266\347\233\221\345\220\254/index.html" "b/docs/Frontend/Electron/\345\220\257\345\212\250\344\272\213\344\273\266\347\233\221\345\220\254/index.html" index 92e248b0..c9271f3d 100644 --- "a/docs/Frontend/Electron/\345\220\257\345\212\250\344\272\213\344\273\266\347\233\221\345\220\254/index.html" +++ "b/docs/Frontend/Electron/\345\220\257\345\212\250\344\272\213\344\273\266\347\233\221\345\220\254/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Electron 应用启动事件监听

    @@ -40,6 +40,6 @@

    User-Agent 拦截网络请求,实现自定义协议等

    示例代码

    -
    const { session } = require('electron');

    app.on('session-created', (session) => {
      // 设置 cookie
      session.cookies.set({
        url: 'https://example.com',
        name: 'dummy_name',
        value: 'dummy',
      });

      // 注入预置脚本
      session.setPreloads([path.resolve(app.getAppPath(), 'preload.js')]);
    });

    编辑此页
    最后由 sumingcheng 于 更新
    +
    const { session } = require('electron');

    app.on('session-created', (session) => {
      // 设置 cookie
      session.cookies.set({
        url: 'https://example.com',
        name: 'dummy_name',
        value: 'dummy',
      });

      // 注入预置脚本
      session.setPreloads([path.resolve(app.getAppPath(), 'preload.js')]);
    });
    \ No newline at end of file diff --git "a/docs/Frontend/Electron/\346\226\207\344\273\266URL\344\272\213\344\273\266\347\233\221\345\220\254/index.html" "b/docs/Frontend/Electron/\346\226\207\344\273\266URL\344\272\213\344\273\266\347\233\221\345\220\254/index.html" index 26b59a7c..f8239b9e 100644 --- "a/docs/Frontend/Electron/\346\226\207\344\273\266URL\344\272\213\344\273\266\347\233\221\345\220\254/index.html" +++ "b/docs/Frontend/Electron/\346\226\207\344\273\266URL\344\272\213\344\273\266\347\233\221\345\220\254/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Electron 文件和 URL 处理事件监听

    @@ -49,6 +49,6 @@

    安全考
  • 对传入的文件路径和 URL 进行安全校验和过滤，防止注入攻击
  • 如果涉及敏感数据，考虑对 URL query 参数进行加密传输，不要明文暴露
  • 谨慎处理来自外部的文件和 URL 请求，防止对应用造成破坏
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/Electron/\347\224\237\345\221\275\345\221\250\346\234\237/index.html" "b/docs/Frontend/Electron/\347\224\237\345\221\275\345\221\250\346\234\237/index.html" index d94b2292..b2b40caa 100644 --- "a/docs/Frontend/Electron/\347\224\237\345\221\275\345\221\250\346\234\237/index.html" +++ "b/docs/Frontend/Electron/\347\224\237\345\221\275\345\221\250\346\234\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Electron 应用生命周期详解

    @@ -80,6 +80,6 @@

    最佳实
  • 定期检查更新：在应用启动时检查是否有新版本，提示用户更新。

    • 以下是一个在主进程中检查应用更新的示例：

    -
    const { autoUpdater } = require('electron-updater');

    app.on('ready', () => {
      autoUpdater.checkForUpdatesAndNotify();
    });

    编辑此页
    最后由 sumingcheng 于 更新
    +
    const { autoUpdater } = require('electron-updater');

    app.on('ready', () => {
      autoUpdater.checkForUpdatesAndNotify();
    });
    \ No newline at end of file diff --git "a/docs/Frontend/Electron/\347\252\227\345\217\243\344\272\213\344\273\266\347\233\221\345\220\254/index.html" "b/docs/Frontend/Electron/\347\252\227\345\217\243\344\272\213\344\273\266\347\233\221\345\220\254/index.html" index 53037440..68142945 100644 --- "a/docs/Frontend/Electron/\347\252\227\345\217\243\344\272\213\344\273\266\347\233\221\345\220\254/index.html" +++ "b/docs/Frontend/Electron/\347\252\227\345\217\243\344\272\213\344\273\266\347\233\221\345\220\254/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Electron 窗口相关事件监听

    @@ -26,6 +26,6 @@ 

    const { app } = require('electron');

    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        // 在 macOS 上，除非用户通过 Cmd + Q 显式退出，否则应用程序和它们的菜单栏会一直处于活动状态
        app.quit();
      }
    });

    编辑此页
    最后由 sumingcheng 于 更新
    +
    const { app } = require('electron');

    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        // 在 macOS 上，除非用户通过 Cmd + Q 显式退出，否则应用程序和它们的菜单栏会一直处于活动状态
        app.quit();
      }
    });
    \ No newline at end of file diff --git "a/docs/Frontend/Electron/\351\200\200\345\207\272\344\272\213\344\273\266\347\233\221\345\220\254/index.html" "b/docs/Frontend/Electron/\351\200\200\345\207\272\344\272\213\344\273\266\347\233\221\345\220\254/index.html" index 54632cfc..10043e52 100644 --- "a/docs/Frontend/Electron/\351\200\200\345\207\272\344\272\213\344\273\266\347\233\221\345\220\254/index.html" +++ "b/docs/Frontend/Electron/\351\200\200\345\207\272\344\272\213\344\273\266\347\233\221\345\220\254/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Electron 退出相关事件监听

    @@ -36,6 +36,6 @@ 

    app.on('gpu-process-crashed', (event, killed) => {
      console.log('GPU进程崩溃,是否被杀死?', killed);

      // 执行异常处理
      handleGPUCrash();

      // 尝试恢复
      tryToRecover();
    });

    -

    当 GPU 进程崩溃时,可能会导致应用界面卡死或黑屏。我们要设法恢复应用状态,例如重新创建渲染进程等。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    当 GPU 进程崩溃时,可能会导致应用界面卡死或黑屏。我们要设法恢复应用状态,例如重新创建渲染进程等。

    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/Angular-Vue-React-\345\257\271\346\257\224/index.html" "b/docs/Frontend/Engineering/Angular-Vue-React-\345\257\271\346\257\224/index.html" index b4d562d3..6cae70bf 100644 --- "a/docs/Frontend/Engineering/Angular-Vue-React-\345\257\271\346\257\224/index.html" +++ "b/docs/Frontend/Engineering/Angular-Vue-React-\345\257\271\346\257\224/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Angular、Vue 和 React 框架对比

    @@ -45,6 +45,6 @@

    数 只有父组件 state 变更才能引起子组件 props 的变更

    不可变和可变的值​

    props 是不可变的值(immutable value) -state/data 是可变的值(mutable value)

    编辑此页
    最后由 sumingcheng 于 更新
    +state/data 是可变的值(mutable value)

    \ No newline at end of file diff --git a/docs/Frontend/Engineering/MVC-MVVM/index.html b/docs/Frontend/Engineering/MVC-MVVM/index.html index a2758b76..a4609683 100644 --- a/docs/Frontend/Engineering/MVC-MVVM/index.html +++ b/docs/Frontend/Engineering/MVC-MVVM/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    MVC 与 MVVM 模式详解

    @@ -68,6 +68,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    虽然这只是一个简单的示例,但它展示了 MVVM 的核心原理数据的响应式和双向绑定。现代的 MVVM 框架如 Vue.js,就是在这个基础上进行了大量的扩展和优化,提供了更加完善和高效的解决方案。

    \ No newline at end of file diff --git a/docs/Frontend/Engineering/PM2-Linux/index.html b/docs/Frontend/Engineering/PM2-Linux/index.html index 12d91e98..42850f85 100644 --- a/docs/Frontend/Engineering/PM2-Linux/index.html +++ b/docs/Frontend/Engineering/PM2-Linux/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    PM2 在 Linux 上的使用

    @@ -36,6 +36,6 @@

    快速开始 | PM2 中文网

    查看监控信息​

    应用启动后,我们可以通过以下命令实时监控应用的 CPU、内存占用等信息:

    -
    pm2 monit
    编辑此页
    最后由 sumingcheng 于 更新
    +
    pm2 monit
    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/Webpack--\345\237\272\347\241\200/index.html" "b/docs/Frontend/Engineering/Webpack--\345\237\272\347\241\200/index.html" index 13d9c9d8..2c1d50aa 100644 --- "a/docs/Frontend/Engineering/Webpack--\345\237\272\347\241\200/index.html" +++ "b/docs/Frontend/Engineering/Webpack--\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    @@ -56,6 +56,6 @@ 

    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <title>Webpack</title>
        <link rel="stylesheet" href="./index.css" />
      </head>
      <body>
        <h1>这是一个网页</h1>
        <div id="app"></div>
        <!-- 只需引入 Webpack 打包后的文件 -->
        <script src="./dist/main.js"></script>
      </body>
    </html>

    // content.js
    function Content() {
      const app = document.getElementById('app');
      const content = document.createElement('div');
      content.innerText = 'content';
      app.appendChild(content);
    }

    export default Content;

    header.js 和 footer.js 的改造与 content.js 类似,就不再赘述。

    -

    这样一来,无论项目中有多少个模块,我们只需要引入 Webpack 打包后的一个 JS 文件即可。Webpack 会帮助我们管理和打包这些模块,让我们可以专注于编写业务代码。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这样一来,无论项目中有多少个模块,我们只需要引入 Webpack 打包后的一个 JS 文件即可。Webpack 会帮助我们管理和打包这些模块,让我们可以专注于编写业务代码。

    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/Webpack-\345\270\270\347\224\250\351\205\215\347\275\256\351\241\271/index.html" "b/docs/Frontend/Engineering/Webpack-\345\270\270\347\224\250\351\205\215\347\275\256\351\241\271/index.html" index b92252ca..08a11fad 100644 --- "a/docs/Frontend/Engineering/Webpack-\345\270\270\347\224\250\351\205\215\347\275\256\351\241\271/index.html" +++ "b/docs/Frontend/Engineering/Webpack-\345\270\270\347\224\250\351\205\215\347\275\256\351\241\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Webpack 常用配置项

    @@ -130,6 +130,6 @@

    W
  • Webpack 4 需要配合一些插件才能实现完整的 Tree Shaking

    • 总的来说,Webpack 5 的默认配置更加优化,开箱即用,上手更加方便。

    -

    以上就是我对 Webpack 常用配置项的一些理解和总结。Webpack 功能十分强大,还有很多高级用法,需要在实践中不断积累和学习。希望这篇文章对你有所帮助。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    以上就是我对 Webpack 常用配置项的一些理解和总结。Webpack 功能十分强大,还有很多高级用法,需要在实践中不断积累和学习。希望这篇文章对你有所帮助。

    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/Webpack-\346\200\247\350\203\275\344\274\230\345\214\226/index.html" "b/docs/Frontend/Engineering/Webpack-\346\200\247\350\203\275\344\274\230\345\214\226/index.html" index 8c389fc6..8d20cc12 100644 --- "a/docs/Frontend/Engineering/Webpack-\346\200\247\350\203\275\344\274\230\345\214\226/index.html" +++ "b/docs/Frontend/Engineering/Webpack-\346\200\247\350\203\275\344\274\230\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Webpack 性能优化实战指南

    @@ -70,6 +70,6 @@ 

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|svg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                },
              },
              {
                loader: 'image-webpack-loader',
                options: {
                  mozjpeg: {
                    progressive: true,
                    quality: 65,
                  },
                },
              },
            ],
          },
          {
            test: /\.(woff2?|eot|ttf|otf)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                },
              },
            ],
          },
        ],
      },
    };

    去除无用的 CSS​

    使用 PurgeCSS 插件可以自动检测并删除没有被使用的 CSS 代码,大大减小 CSS 文件的体积。

    -
    const PurgecssPlugin = require('purgecss-webpack-plugin');
    const glob = require('glob');
    module.exports = {
      plugins: [
        new PurgecssPlugin({
          paths: glob.sync(`${path.resolve(__dirname, 'src')}/**/*`, { nodir: true }),
        }),
      ],
    };
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const PurgecssPlugin = require('purgecss-webpack-plugin');
    const glob = require('glob');
    module.exports = {
      plugins: [
        new PurgecssPlugin({
          paths: glob.sync(`${path.resolve(__dirname, 'src')}/**/*`, { nodir: true }),
        }),
      ],
    };
    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203/index.html" "b/docs/Frontend/Engineering/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203/index.html" index 619df0e0..b8627b61 100644 --- "a/docs/Frontend/Engineering/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203/index.html" +++ "b/docs/Frontend/Engineering/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203/index.html" @@ -11,12 +11,12 @@ - - + +
    跳到主要内容
    +

    风格指南 — Vue.js

    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" "b/docs/Frontend/Engineering/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" index ae43e991..a4aa6c78 100644 --- "a/docs/Frontend/Engineering/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" +++ "b/docs/Frontend/Engineering/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    前端开发技术指南

    @@ -57,6 +57,6 @@

    状态管

    路由管理​

    React Router、Vue Router 和 Angular Router 是前端路由管理库，能够实现页面间的导航和参数传递。通过路由管理，应用能够支持单页应用的导航逻辑，提升用户体验和应用的响应速度。

    错误监控和分析​

    -

    Sentry 和 LogRocket 是用于错误监控和分析的工具，能够实时捕捉和记录应用中的错误，帮助开发者快速定位和修复问题。通过集成这些工具，团队能够提高应用的稳定性和用户满意度，减少因错误导致的用户流失。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Sentry 和 LogRocket 是用于错误监控和分析的工具，能够实时捕捉和记录应用中的错误，帮助开发者快速定位和修复问题。通过集成这些工具，团队能够提高应用的稳定性和用户满意度，减少因错误导致的用户流失。

    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/\346\240\270\345\277\203-Web-\346\214\207\346\240\207/index.html" "b/docs/Frontend/Engineering/\346\240\270\345\277\203-Web-\346\214\207\346\240\207/index.html" index 181f7c56..3405a1ad 100644 --- "a/docs/Frontend/Engineering/\346\240\270\345\277\203-Web-\346\214\207\346\240\207/index.html" +++ "b/docs/Frontend/Engineering/\346\240\270\345\277\203-Web-\346\214\207\346\240\207/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    核心 Web 指标——衡量网站性能和用户体验的关键

    @@ -41,6 +41,6 @@

    Defining the Core Web Vitals metrics thresholds

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Defining the Core Web Vitals metrics thresholds

    \ No newline at end of file diff --git "a/docs/Frontend/Engineering/\351\241\271\347\233\256\346\236\204\345\273\272\347\232\204\346\226\271\345\274\217/index.html" "b/docs/Frontend/Engineering/\351\241\271\347\233\256\346\236\204\345\273\272\347\232\204\346\226\271\345\274\217/index.html" index 9bc42fd8..6d1daa27 100644 --- "a/docs/Frontend/Engineering/\351\241\271\347\233\256\346\236\204\345\273\272\347\232\204\346\226\271\345\274\217/index.html" +++ "b/docs/Frontend/Engineering/\351\241\271\347\233\256\346\236\204\345\273\272\347\232\204\346\226\271\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    项目构建方式

    @@ -54,6 +54,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git a/docs/Frontend/HTML/DOCTYPE/index.html b/docs/Frontend/HTML/DOCTYPE/index.html index 93bd653e..77c1c4e9 100644 --- a/docs/Frontend/HTML/DOCTYPE/index.html +++ b/docs/Frontend/HTML/DOCTYPE/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTML 文档类型声明

    @@ -42,6 +42,6 @@

    最佳实

    实战案例​

    下面是一个完整的 HTML5 文档示例,展示了 DOCTYPE 在实际开发中的应用:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My Web Page</title>
      </head>
      <body>
        <h1>Welcome to my website!</h1>
        <p>This is a sample HTML5 document.</p>
      </body>
    </html>
    -

    可以看到,<!DOCTYPE html>位于文档的最顶端,紧跟着<html>标签。这确保了浏览器能够正确识别文档类型,并以标准模式渲染页面。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    可以看到,<!DOCTYPE html>位于文档的最顶端,紧跟着<html>标签。这确保了浏览器能够正确识别文档类型,并以标准模式渲染页面。

    \ No newline at end of file diff --git "a/docs/Frontend/HTML/audio\346\240\207\347\255\276\344\270\216video\346\240\207\347\255\276\345\217\212\345\237\272\346\234\254\345\272\224\347\224\250/index.html" "b/docs/Frontend/HTML/audio\346\240\207\347\255\276\344\270\216video\346\240\207\347\255\276\345\217\212\345\237\272\346\234\254\345\272\224\347\224\250/index.html" index baa6bdba..2c896195 100644 --- "a/docs/Frontend/HTML/audio\346\240\207\347\255\276\344\270\216video\346\240\207\347\255\276\345\217\212\345\237\272\346\234\254\345\272\224\347\224\250/index.html" +++ "b/docs/Frontend/HTML/audio\346\240\207\347\255\276\344\270\216video\346\240\207\347\255\276\345\217\212\345\237\272\346\234\254\345\272\224\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    音视频标签 audio 和 video

    @@ -53,6 +53,6 @@ 

    <video controls>
      <source src="video.mp4" type="video/mp4" />
      <source src="video.ogg" type="video/ogg" />
    </video>

    video 的常用属性和方法​

    除了上面介绍的通用属性外,<video> 标签还有一些独有的属性和方法,可以用于控制视频的播放。下面是一个简单的示例

    -
    <video id="myVideo" src="video.mp4" controls></video>

    <div>
      <button id="reloadBtn">重载</button>
      <button id="playBtn">播放</button>
      <button id="pauseBtn">暂停</button>
      <button id="currentTimeBtn">获取当前时间</button>
      <button id="durationBtn">获取总时长</button>
      <button id="statusBtn">获取播放状态</button>
      <button id="muteBtn">静音切换</button>
      <button id="volumeBtn">设置音量</button>
      <button id="rateBtn">设置倍速</button>
    </div>

    <script>
      const video = document.getElementById('myVideo');

      // 重载视频
      reloadBtn.addEventListener('click', () => {
        video.load();
      });

      // 播放视频
      playBtn.addEventListener('click', () => {
        video.play();
      });

      // 暂停视频
      pauseBtn.addEventListener('click', () => {
        video.pause();
      });

      // 获取当前播放时间
      currentTimeBtn.addEventListener('click', () => {
        console.log(video.currentTime);
      });

      // 获取视频总时长
      durationBtn.addEventListener('click', () => {
        console.log(video.duration);
      });

      // 获取播放状态
      statusBtn.addEventListener('click', () => {
        console.log(video.paused ? '暂停中' : '播放中');
      });

      // 静音切换
      muteBtn.addEventListener('click', () => {
        video.muted = !video.muted;
      });

      // 设置音量(0~1)
      volumeBtn.addEventListener('click', () => {
        video.volume = 0.5;
      });

      // 设置播放速率(建议使用0.5/1.0/1.25/1.5/2.0这几个值)
      rateBtn.addEventListener('click', () => {
        video.playbackRate = 1.5;
      });

      // 监听是否可以播放
      video.addEventListener('canplay', () => {
        console.log('可以播放了');
      });

      // 监听播放结束
      video.addEventListener('ended', () => {
        console.log('播放结束');
      });

      // 监听播放错误
      video.addEventListener('error', () => {
        console.log('播放出错');
      });

      // 监听播放开始
      video.addEventListener('play', () => {
        console.log('开始播放');
      });

      // 监听缓冲进度
      video.addEventListener('progress', () => {
        console.log(`已缓冲 ${video.buffered.end(0)} / ${video.duration} 秒`);
      });

      // 监听进度条拖动
      video.addEventListener('seeked', () => {
        console.log('进度条被拖动');
      });

      // 监听播放速率变化
      video.addEventListener('ratechange', () => {
        console.log(`当前倍速 ${video.playbackRate}`);
      });

      // 监听音量变化
      video.addEventListener('volumechange', () => {
        console.log(`当前音量 ${video.volume}`);
      });

      // 监听缓冲等待
      video.addEventListener('waiting', () => {
        console.log('视频缓冲中,等待数据');
      });
    </script>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <video id="myVideo" src="video.mp4" controls></video>

    <div>
      <button id="reloadBtn">重载</button>
      <button id="playBtn">播放</button>
      <button id="pauseBtn">暂停</button>
      <button id="currentTimeBtn">获取当前时间</button>
      <button id="durationBtn">获取总时长</button>
      <button id="statusBtn">获取播放状态</button>
      <button id="muteBtn">静音切换</button>
      <button id="volumeBtn">设置音量</button>
      <button id="rateBtn">设置倍速</button>
    </div>

    <script>
      const video = document.getElementById('myVideo');

      // 重载视频
      reloadBtn.addEventListener('click', () => {
        video.load();
      });

      // 播放视频
      playBtn.addEventListener('click', () => {
        video.play();
      });

      // 暂停视频
      pauseBtn.addEventListener('click', () => {
        video.pause();
      });

      // 获取当前播放时间
      currentTimeBtn.addEventListener('click', () => {
        console.log(video.currentTime);
      });

      // 获取视频总时长
      durationBtn.addEventListener('click', () => {
        console.log(video.duration);
      });

      // 获取播放状态
      statusBtn.addEventListener('click', () => {
        console.log(video.paused ? '暂停中' : '播放中');
      });

      // 静音切换
      muteBtn.addEventListener('click', () => {
        video.muted = !video.muted;
      });

      // 设置音量(0~1)
      volumeBtn.addEventListener('click', () => {
        video.volume = 0.5;
      });

      // 设置播放速率(建议使用0.5/1.0/1.25/1.5/2.0这几个值)
      rateBtn.addEventListener('click', () => {
        video.playbackRate = 1.5;
      });

      // 监听是否可以播放
      video.addEventListener('canplay', () => {
        console.log('可以播放了');
      });

      // 监听播放结束
      video.addEventListener('ended', () => {
        console.log('播放结束');
      });

      // 监听播放错误
      video.addEventListener('error', () => {
        console.log('播放出错');
      });

      // 监听播放开始
      video.addEventListener('play', () => {
        console.log('开始播放');
      });

      // 监听缓冲进度
      video.addEventListener('progress', () => {
        console.log(`已缓冲 ${video.buffered.end(0)} / ${video.duration} 秒`);
      });

      // 监听进度条拖动
      video.addEventListener('seeked', () => {
        console.log('进度条被拖动');
      });

      // 监听播放速率变化
      video.addEventListener('ratechange', () => {
        console.log(`当前倍速 ${video.playbackRate}`);
      });

      // 监听音量变化
      video.addEventListener('volumechange', () => {
        console.log(`当前音量 ${video.volume}`);
      });

      // 监听缓冲等待
      video.addEventListener('waiting', () => {
        console.log('视频缓冲中,等待数据');
      });
    </script>
    \ No newline at end of file diff --git a/docs/Frontend/HTML/history-worker/index.html b/docs/Frontend/HTML/history-worker/index.html index 054b3a87..55347911 100644 --- a/docs/Frontend/HTML/history-worker/index.html +++ b/docs/Frontend/HTML/history-worker/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    History 对象与 Web Worker

    @@ -56,6 +56,6 @@

    多个 W 
    importScripts('worker1.js', 'worker2.js');

    可以使用terminate()方法终止一个 Worker 的执行:

    // 终止当前 worker
    self.close();

    // 终止其他 worker
    worker.terminate();
    -

    在实际开发中,我们可以利用 Web Worker 实现一些耗时的计算或者数据处理,从而避免阻塞主线程,提高页面性能。但也要注意 Worker 的兼容性问题,目前主流浏览器都已经支持 Web Worker,但在使用时还是要做好降级处理。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在实际开发中,我们可以利用 Web Worker 实现一些耗时的计算或者数据处理,从而避免阻塞主线程,提高页面性能。但也要注意 Worker 的兼容性问题,目前主流浏览器都已经支持 Web Worker,但在使用时还是要做好降级处理。

    \ No newline at end of file diff --git a/docs/Frontend/HTML/localStorage-sessionStorage-cookies/index.html b/docs/Frontend/HTML/localStorage-sessionStorage-cookies/index.html index 67c1f498..1e59b182 100644 --- a/docs/Frontend/HTML/localStorage-sessionStorage-cookies/index.html +++ b/docs/Frontend/HTML/localStorage-sessionStorage-cookies/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器本地存储方式对比

    @@ -53,6 +53,6 @@

    URL 参数<

    可以在 URL 中附加一些参数来标识和跟踪用户,比如uid=xxx。这种方式简单但容易被篡改。

    服务器可以在响应头中下发 Cookie,浏览器会存储并在后续请求中携带,服务器就可以识别用户。这是目前最常用的用户跟踪方式。

    -

    以上就是我对浏览器本地存储方式的详细对比和使用示例。在实际开发中,要根据具体需求选择合适的存储方式。localStorage 适合存储不太敏感且需要长期保存的数据,sessionStorage 适合存储会话级别的临时数据,Cookies 适合需要与服务器通信的场景。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    以上就是我对浏览器本地存储方式的详细对比和使用示例。在实际开发中,要根据具体需求选择合适的存储方式。localStorage 适合存储不太敏感且需要长期保存的数据,sessionStorage 适合存储会话级别的临时数据,Cookies 适合需要与服务器通信的场景。

    \ No newline at end of file diff --git "a/docs/Frontend/HTML/meta-\346\240\207\347\255\276/index.html" "b/docs/Frontend/HTML/meta-\346\240\207\347\255\276/index.html" index 536e167f..aa7a3578 100644 --- "a/docs/Frontend/HTML/meta-\346\240\207\347\255\276/index.html" +++ "b/docs/Frontend/HTML/meta-\346\240\207\347\255\276/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Meta 标签

    @@ -81,6 +81,6 @@

    指定文档的兼容模式:

  • 描述: 指定 Internet Explorer 使用哪个版本的渲染引擎。
  • 示例
    • -
    `<meta http-equiv="X-UA-Compatible" content="IE=edge" />`
    编辑此页
    最后由 sumingcheng 于 更新
    +
    `<meta http-equiv="X-UA-Compatible" content="IE=edge" />`
    \ No newline at end of file diff --git "a/docs/Frontend/HTML/\346\240\207\350\256\260\346\263\225-\346\226\260\345\242\236\346\240\207\347\255\276\345\222\214\345\261\236\346\200\247-\346\213\226\346\213\275/index.html" "b/docs/Frontend/HTML/\346\240\207\350\256\260\346\263\225-\346\226\260\345\242\236\346\240\207\347\255\276\345\222\214\345\261\236\346\200\247-\346\213\226\346\213\275/index.html" index 255541a8..e3a4fc28 100644 --- "a/docs/Frontend/HTML/\346\240\207\350\256\260\346\263\225-\346\226\260\345\242\236\346\240\207\347\255\276\345\222\214\345\261\236\346\200\247-\346\213\226\346\213\275/index.html" +++ "b/docs/Frontend/HTML/\346\240\207\350\256\260\346\263\225-\346\226\260\345\242\236\346\240\207\347\255\276\345\222\214\345\261\236\346\200\247-\346\213\226\346\213\275/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTML5 新增标签与属性

    @@ -45,6 +45,6 @@

    拖

    下面是一个完整的拖放示例,实现了在不同区域之间拖动元素:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>拖放示例</title>
        <style>
          #box {
            width: 200px;
            height: 200px;
            background-color: orange;
          }

          .dragzone {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 10px;
          }
        </style>
      </head>
      <body>
        <div class="dragzone">
          <div draggable="true" id="box"></div>
        </div>
        <div class="dragzone"></div>
        <div class="dragzone"></div>

        <script>
          let dragged;

          document.addEventListener('dragstart', function (event) {
            // 保存被拖动元素的引用
            dragged = event.target;
          });

          document.addEventListener('dragenter', function (event) {
            // 拖动进入目标区域时改变背景色
            if (event.target.className === 'dragzone') {
              event.target.style.backgroundColor = 'lightblue';
            }
          });

          document.addEventListener('dragleave', function (event) {
            // 拖动离开目标区域时恢复背景色
            if (event.target.className === 'dragzone') {
              event.target.style.backgroundColor = 'pink';
            }
          });

          document.addEventListener('dragover', function (event) {
            // 阻止默认行为,允许释放
            event.preventDefault();
          });

          document.addEventListener('drop', function (event) {
            event.preventDefault();
            if (event.target.className === 'dragzone') {
              // 恢复背景色
              event.target.style.backgroundColor = 'pink';
              // 将被拖元素移动到目标区域
              dragged.parentNode.removeChild(dragged);
              event.target.appendChild(dragged);
            }
          });
        </script>
      </body>
    </html>

    更多拖放 API 的信息可以参考 MDN 文档: -DataTransfer - Web API 接口参考 | MDN

    编辑此页
    最后由 sumingcheng 于 更新
    +DataTransfer - Web API 接口参考 | MDN

    \ No newline at end of file diff --git "a/docs/Frontend/HTML/\350\257\255\344\271\211\345\214\226/index.html" "b/docs/Frontend/HTML/\350\257\255\344\271\211\345\214\226/index.html" index 98c97690..481d105d 100644 --- "a/docs/Frontend/HTML/\350\257\255\344\271\211\345\214\226/index.html" +++ "b/docs/Frontend/HTML/\350\257\255\344\271\211\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTML5 语义化标签与最佳实践

    @@ -59,6 +59,6 @@ 

    <form action="www.baidu.com" method="post" onsubmit="return false"></form>

    或者,为提交按钮绑定click事件,调用event.preventDefault()方法阻止默认行为

    -
    <button type="submit" id="submitBtn">提交</button>

    <script>
      const submitBtn = document.getElementById('submitBtn');

      submitBtn.addEventListener('click', function (event) {
        event.preventDefault();
        // 表单验证等逻辑...
      });
    </script>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <button type="submit" id="submitBtn">提交</button>

    <script>
      const submitBtn = document.getElementById('submitBtn');

      submitBtn.addEventListener('click', function (event) {
        event.preventDefault();
        // 表单验证等逻辑...
      });
    </script>
    \ No newline at end of file diff --git "a/docs/Frontend/HTML/\350\257\273\345\217\226\346\226\207\344\273\266-\345\210\206\345\211\262\346\226\207\344\273\266-\347\233\221\346\216\247\350\277\233\345\272\246/index.html" "b/docs/Frontend/HTML/\350\257\273\345\217\226\346\226\207\344\273\266-\345\210\206\345\211\262\346\226\207\344\273\266-\347\233\221\346\216\247\350\277\233\345\272\246/index.html" index b46048d8..558ae877 100644 --- "a/docs/Frontend/HTML/\350\257\273\345\217\226\346\226\207\344\273\266-\345\210\206\345\211\262\346\226\207\344\273\266-\347\233\221\346\216\247\350\277\233\345\272\246/index.html" +++ "b/docs/Frontend/HTML/\350\257\273\345\217\226\346\226\207\344\273\266-\345\210\206\345\211\262\346\226\207\344\273\266-\347\233\221\346\216\247\350\277\233\345\272\246/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    文件读取、分割与进度监控

    @@ -48,6 +48,6 @@

    监 
    <input type="file" id="files" />
    <button onclick="abortRead()">终止读取</button>
    <div id="progressBar">
      <div class="percent">0%</div>
    </div>

    <script>
      let reader;

      const fileInput = document.getElementById('files');
      const progressBar = document.getElementById('progressBar');
      const percent = progressBar.querySelector('.percent');

      fileInput.addEventListener('change', handleFileSelect);

      function handleFileSelect(e) {
        reader = new FileReader();

        reader.onprogress = updateProgress;
        reader.onload = function (e) {
          percent.style.width = '100%';
          percent.textContent = '100%';
        };
        reader.onerror = handleError;

        reader.readAsDataURL(e.target.files[0]);
      }

      function updateProgress(e) {
        if (e.lengthComputable) {
          const percentLoaded = Math.round((e.loaded / e.total) * 100);
          percent.style.width = percentLoaded + '%';
          percent.textContent = percentLoaded + '%';
        }
      }

      function abortRead() {
        reader.abort();
        console.log('读取已取消');
      }

      function handleError(e) {
        switch (e.target.error.code) {
          case e.target.error.NOT_FOUND_ERR:
            console.log('文件未找到');
            break;
          case e.target.error.NOT_READABLE_ERR:
            console.log('文件不可读');
            break;
          case e.target.error.ABORT_ERR:
            console.log('读取已取消');
            break;
          default:
            console.log('读取文件时发生错误');
        }
      }
    </script>

    在handleFileSelect函数中,监听FileReader的onprogress事件。每当读取进度发生变化时,就会触发该事件,我们可以在updateProgress函数中更新进度条的宽度和百分比文本。

    此外,还可以监听onload事件,在文件读取完成后将进度设置为 100%。以及监听onerror事件,处理可能发生的错误。

    -

    通过reader.abort()方法,可以手动终止文件读取操作。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过reader.abort()方法,可以手动终止文件读取操作。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\344\270\211\347\233\256\350\277\220\347\256\227-\345\257\271\350\261\241\345\205\213\351\232\206-\346\265\205\346\213\267\350\264\235-\346\267\261\346\213\267\350\264\235/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\344\270\211\347\233\256\350\277\220\347\256\227-\345\257\271\350\261\241\345\205\213\351\232\206-\346\265\205\346\213\267\350\264\235-\346\267\261\346\213\267\350\264\235/index.html" index 883ccee8..745ffc4d 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\344\270\211\347\233\256\350\277\220\347\256\227-\345\257\271\350\261\241\345\205\213\351\232\206-\346\265\205\346\213\267\350\264\235-\346\267\261\346\213\267\350\264\235/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\344\270\211\347\233\256\350\277\220\347\256\227-\345\257\271\350\261\241\345\205\213\351\232\206-\346\265\205\346\213\267\350\264\235-\346\267\261\346\213\267\350\264\235/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    常见概念与实践

    @@ -67,6 +67,6 @@

    闭包​

    const bar = {
      a: '1',
    };

    function test() {
      bar.a = 'a';
      Object.prototype.b = 'b';
      return function inner() {
        console.log(bar.a);
        console.log(bar.b);
      };
    }
    test()();

    // 作用域链示意图
    // test 函数内部修改了全局对象 bar 的属性

    闭包示意图

    -
    function Foo() {
      getName = function () {
        console.log(1);
      };
      return this;
    }

    Foo.getName = function () {
      console.log(2);
    };

    Foo.prototype.getName = function () {
      console.log(3);
    };

    let getName = function () {
      console.log(4);
    };

    function getName() {
      console.log(5);
    }

    Foo.getName(); // 输出: 2
    getName(); // 输出: 4
    Foo().getName(); // 输出: 1
    new Foo.getName(); // 输出: 2
    new Foo().getName(); // 输出: 3
    new new Foo().getName(); // 输出: 3
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function Foo() {
      getName = function () {
        console.log(1);
      };
      return this;
    }

    Foo.getName = function () {
      console.log(2);
    };

    Foo.prototype.getName = function () {
      console.log(3);
    };

    let getName = function () {
      console.log(4);
    };

    function getName() {
      console.log(5);
    }

    Foo.getName(); // 输出: 2
    getName(); // 输出: 4
    Foo().getName(); // 输出: 1
    new Foo.getName(); // 输出: 2
    new Foo().getName(); // 输出: 3
    new new Foo().getName(); // 输出: 3
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\344\270\245\346\240\274\346\250\241\345\274\217/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\344\270\245\346\240\274\346\250\241\345\274\217/index.html" index 88dfce44..c03cfe08 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\344\270\245\346\240\274\346\250\241\345\274\217/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\344\270\245\346\240\274\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    ES5 严格模式

    @@ -83,6 +83,6 @@

    eval 函数

    在严格模式下，eval 拥有独立的作用域，无法向外部作用域添加变量。

    'use strict';
    eval('var a = 1; console.log(a);');
    console.log(a);

    上述代码在严格模式下，a 不会被定义在全局作用域，第二个 console.log(a) 会导致错误。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\344\275\234\347\224\250\345\237\237-\344\275\234\347\224\250\345\237\237\351\223\276-\351\242\204\347\274\226\350\257\221-\351\227\255\345\214\205\345\237\272\347\241\200/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\344\275\234\347\224\250\345\237\237-\344\275\234\347\224\250\345\237\237\351\223\276-\351\242\204\347\274\226\350\257\221-\351\227\255\345\214\205\345\237\272\347\241\200/index.html" index bd3332ae..2de0d051 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\344\275\234\347\224\250\345\237\237-\344\275\234\347\224\250\345\237\237\351\223\276-\351\242\204\347\274\226\350\257\221-\351\227\255\345\214\205\345\237\272\347\241\200/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\344\275\234\347\224\250\345\237\237-\344\275\234\347\224\250\345\237\237\351\223\276-\351\242\204\347\274\226\350\257\221-\351\227\255\345\214\205\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    判断 AO

    @@ -377,6 +377,6 @@

    练习

    var b = false == 1;
    console.log(b);
    // 比较运算输出布尔值类型，结果为 false
    // 字符串的 undefined 是 true，-true = -1，+undefined = NaN
    if (typeof a && -true + +undefined + '') {
      console.log('通过');
    } else {
      console.log('未通过');
    }
    console.log(typeof a);
    // 字符串 '3' 隐式转换成 number
    if (1 + 5 * '3' === 16) {
      console.log('通过了');
    } else {
      console.log('未通过');
    }
    -
    // 1 + 0 - 0 = 1，不往后执行
    console.log(!!' ' + !!'' - !!false || '未通过');
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 1 + 0 - 0 = 1，不往后执行
    console.log(!!' ' + !!'' - !!false || '未通过');
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\207\275\346\225\260\345\237\272\347\241\200\344\270\216\347\247\215\347\261\273-\345\275\242\345\256\236\345\217\202\345\217\212\346\230\240\345\260\204-\345\217\230\351\207\217\347\261\273\345\236\213/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\207\275\346\225\260\345\237\272\347\241\200\344\270\216\347\247\215\347\261\273-\345\275\242\345\256\236\345\217\202\345\217\212\346\230\240\345\260\204-\345\217\230\351\207\217\347\261\273\345\236\213/index.html" index 08e4b288..17a0be28 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\207\275\346\225\260\345\237\272\347\241\200\344\270\216\347\247\215\347\261\273-\345\275\242\345\256\236\345\217\202\345\217\212\346\230\240\345\260\204-\345\217\230\351\207\217\347\261\273\345\236\213/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\207\275\346\225\260\345\237\272\347\241\200\344\270\216\347\247\215\347\261\273-\345\275\242\345\256\236\345\217\202\345\217\212\346\230\240\345\260\204-\345\217\230\351\207\217\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数

    @@ -77,6 +77,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\215\225\347\272\277\347\250\213\345\222\214\345\244\232\347\272\277\347\250\213\345\257\271\346\257\224/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\215\225\347\272\277\347\250\213\345\222\214\345\244\232\347\272\277\347\250\213\345\257\271\346\257\224/index.html" index 53c4fb82..ea604210 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\215\225\347\272\277\347\250\213\345\222\214\345\244\232\347\272\277\347\250\213\345\257\271\346\257\224/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\215\225\347\272\277\347\250\213\345\222\214\345\244\232\347\272\277\347\250\213\345\257\271\346\257\224/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JS 为什么是单线程？

    @@ -57,6 +57,6 @@

    最佳实 通过消息传递进行线程间通信，避免共享状态
    处理好线程生命周期，确保资源正确释放
    合理分配任务，避免线程间负载不均衡

    -

    通过合理利用 Web Workers 和 Worker Threads，可以显著提升 JavaScript 应用的性能和响应性，尤其在处理复杂计算或高并发任务时。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过合理利用 Web Workers 和 Worker Threads，可以显著提升 JavaScript 应用的性能和响应性，尤其在处理复杂计算或高并发任务时。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\344\275\234\347\224\250\345\237\237/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\344\275\234\347\224\250\345\237\237/index.html" index fa9cfd75..a56b07f7 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\344\275\234\347\224\250\345\237\237/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\344\275\234\347\224\250\345\237\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    原型与作用域深入解析

    @@ -84,6 +84,6 @@

    练习

    构造函数接收数字类型的参数，完成数字相加和相乘的功能

    function Compute() {
      var result = 0;
      this.plus = function () {
        result = 0;
        result = loop(arguments, 'add', result);
      };
      this.times = function () {
        result = 1;
        result = loop(arguments, 'mul', result);
      };

      function loop(args, method, res) {
        for (var i = 0; i < args.length; i++) {
          var item = args[i];
          if (method === 'add') {
            res += item;
          } else if (method === 'mul') {
            res *= item;
          }
        }

        console.log(res);
        return res;
      }
    }

    var compute = new Compute();
    compute.plus(1, 2, 3); // 输出 6
    compute.times(1, 2, 4); // 输出 8
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\347\273\247\346\211\277/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\347\273\247\346\211\277/index.html" index 979ed350..72fe3ca3 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\347\273\247\346\211\277/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\216\237\345\236\213\344\270\216\347\273\247\346\211\277/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    原型与继承

    @@ -97,6 +97,6 @@

    练习

    计算任意字符串的字节长度​

    function getByteLength(str) {
      var byteLength = 0;

      for (var i = 0; i < str.length; i++) {
        var charCode = str.charCodeAt(i);
        if (charCode <= 255) {
          byteLength++;
        } else {
          byteLength += 2;
        }
      }
      return byteLength;
    }
    console.log(getByteLength('你好，世界! HelloWorld!'));
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\217\202\346\225\260\351\273\230\350\256\244\345\200\274-\351\200\222\345\275\222-\351\242\204\347\274\226\350\257\221-\345\205\250\345\261\200\345\217\230\351\207\217/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\217\202\346\225\260\351\273\230\350\256\244\345\200\274-\351\200\222\345\275\222-\351\242\204\347\274\226\350\257\221-\345\205\250\345\261\200\345\217\230\351\207\217/index.html" index e5e2552a..d416ee38 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\217\202\346\225\260\351\273\230\350\256\244\345\200\274-\351\200\222\345\275\222-\351\242\204\347\274\226\350\257\221-\345\205\250\345\261\200\345\217\230\351\207\217/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\217\202\346\225\260\351\273\230\350\256\244\345\200\274-\351\200\222\345\275\222-\351\242\204\347\274\226\350\257\221-\345\205\250\345\261\200\345\217\230\351\207\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    初始化参数

    @@ -111,6 +111,6 @@

    练习

    var b = false == 1;
    console.log(b);
    // 比较运算输出布尔值类型，结果为 false
    // 字符串的 undefined 是 true，-true = -1，+undefined = NaN
    if (typeof a && -true + +undefined + '') {
      console.log('通过');
    } else {
      console.log('未通过');
    }
    console.log(typeof a);
    // 字符串 '3' 隐式转换成 number
    if (1 + 5 * '3' === 16) {
      console.log('通过了');
    } else {
      console.log('未通过');
    }
    -
    // 1 + 0 - 0 = 1，不往后执行
    console.log(!!' ' + !!'' - !!false || '未通过');
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 1 + 0 - 0 = 1，不往后执行
    console.log(!!' ' + !!'' - !!false || '未通过');
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\236\203\345\234\276\345\233\236\346\224\266\346\234\272\345\210\266/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\236\203\345\234\276\345\233\236\346\224\266\346\234\272\345\210\266/index.html" index becd3c55..2844181c 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\236\203\345\234\276\345\233\236\346\224\266\346\234\272\345\210\266/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\236\203\345\234\276\345\233\236\346\224\266\346\234\272\345\210\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    什么是垃圾回收机制

    @@ -59,6 +59,6 @@

    实战示例

    在实际开发中，理解垃圾回收机制可以帮助我们编写更高效的代码。以下是一个实战示例，展示如何通过闭包管理计数器，同时避免内存泄漏。

    function createSafeCounter() {
      var count = 0;

      function increment() {
        count++;
        console.log(count);
      }

      function reset() {
        count = 0;
        console.log('Counter reset');
      }

      return {
        increment: increment,
        reset: reset,
      };
    }

    var counter = createSafeCounter();
    counter.increment(); // 输出 1
    counter.increment(); // 输出 2
    counter.reset(); // 输出 "Counter reset"
    counter = null; // 解除引用，允许垃圾回收

    在这个示例中，通过返回一个包含 increment 和 reset 方法的对象，可以有效管理 count 变量。同时，通过将 counter 设为 null，可以解除闭包对 count 的引用，确保内存被释放。

    -

    JavaScript 垃圾回收详解

    编辑此页
    最后由 sumingcheng 于 更新
    +

    JavaScript 垃圾回收详解

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\257\271\350\261\241\345\261\236\346\200\247\351\201\215\345\216\206-this-caller_callee/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\257\271\350\261\241\345\261\236\346\200\247\351\201\215\345\216\206-this-caller_callee/index.html" index 87280865..af258ca0 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\257\271\350\261\241\345\261\236\346\200\247\351\201\215\345\216\206-this-caller_callee/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\257\271\350\261\241\345\261\236\346\200\247\351\201\215\345\216\206-this-caller_callee/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    对象属性遍历

    @@ -97,6 +97,6 @@

    空对象比较​

    console.log({} == {}); // false

    const obj = {};
    const obj1 = obj;
    console.log(obj1 === obj); // true

    全局和局部作用域​

    -
    var a = '1';

    function test() {
      var a = '2';
      this.a = 3;
      console.log(a);
    }
    test(); // 输出 '2'
    new test(); // 输出 '2'
    console.log(a); // 输出 '3'

    var b = '5';

    function testScope() {
      var b = '0';
      console.log(b); // 0
      console.log(this.b); // 5
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    var a = '1';

    function test() {
      var a = '2';
      this.a = 3;
      console.log(a);
    }
    test(); // 输出 '2'
    new test(); // 输出 '2'
    console.log(a); // 输出 '3'

    var b = '5';

    function testScope() {
      var b = '0';
      console.log(b); // 0
      console.log(this.b); // 5
    }
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\345\276\252\347\216\257-\345\274\225\347\224\250\345\200\274\345\210\235\350\257\206-\346\230\276\347\244\272\345\217\212\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\345\276\252\347\216\257-\345\274\225\347\224\250\345\200\274\345\210\235\350\257\206-\346\230\276\347\244\272\345\217\212\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242/index.html" index 3698a2d3..d968fe2e 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\345\276\252\347\216\257-\345\274\225\347\224\250\345\200\274\345\210\235\350\257\206-\346\230\276\347\244\272\345\217\212\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\345\276\252\347\216\257-\345\274\225\347\224\250\345\200\274\345\210\235\350\257\206-\346\230\276\347\244\272\345\217\212\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    循环

    @@ -169,6 +169,6 @@

    常用模
  • \d：匹配数字。
  • \w：匹配字母、数字或下划线。
  • \s：匹配空白字符。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\345\237\272\347\241\200-\346\225\260\347\273\204\346\226\271\346\263\225-\346\225\260\347\273\204\346\216\222\345\272\217/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\345\237\272\347\241\200-\346\225\260\347\273\204\346\226\271\346\263\225-\346\225\260\347\273\204\346\216\222\345\272\217/index.html" index 5e1e3c7d..b95a2b35 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\345\237\272\347\241\200-\346\225\260\347\273\204\346\226\271\346\263\225-\346\225\260\347\273\204\346\216\222\345\272\217/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\345\237\272\347\241\200-\346\225\260\347\273\204\346\226\271\346\263\225-\346\225\260\347\273\204\346\216\222\345\272\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组

    @@ -97,6 +97,6 @@

    随机排

    对象排序​

    let people = [
      { name: 'JJ', age: 18 },
      { name: 'GG', age: 12 },
      { name: 'AA', age: 3 },
      { name: 'WW', age: 1 },
      { name: 'QQ', age: 20 },
    ];
    people.sort((a, b) => a.age - b.age);
    console.log(people);

    按长度排序​

    -
    let strings = ['123', '123213', '213213', '1'];
    strings.sort((a, b) => a.length - b.length);
    console.log(strings);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    let strings = ['123', '123213', '213213', '1'];
    strings.sort((a, b) => a.length - b.length);
    console.log(strings);
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\346\226\271\346\263\225-\347\261\273\346\225\260\347\273\204/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\346\226\271\346\263\225-\347\261\273\346\225\260\347\273\204/index.html" index 24b46647..1f7de361 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\346\226\271\346\263\225-\347\261\273\346\225\260\347\273\204/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\346\225\260\347\273\204\346\226\271\346\263\225-\347\261\273\346\225\260\347\273\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    新建数组上的方法

    @@ -91,6 +91,6 @@

    注意事
  • 在重写原生方法时，应谨慎操作，以避免引入不可预见的问题。

    • 完整代码示例

    -
    // 合并数组示例
    let array1 = ['a', 'b', 'c'];
    let array2 = ['d', 'e', 'f'];
    let mergedArray = array1.concat(array2);
    console.log('合并后的数组:', mergedArray);

    // 克隆和截取数组示例
    let originalArray = ['a', 'b', 'c', 'd', 'e'];
    let clonedArray = originalArray.slice();
    let slicedArray = originalArray.slice(1, 3);
    console.log('克隆的数组:', clonedArray);
    console.log('截取的数组:', slicedArray);

    // 类数组使用 push 方法示例
    let arrayLikeObject = {
      0: '张1',
      1: '张2',
      2: '张3',
      length: 3,
      splice: Array.prototype.splice,
      push: Array.prototype.push,
    };

    arrayLikeObject.push('张4');
    console.log('更新后的类数组对象:', arrayLikeObject);

    // 判断闰年示例
    let inputYear = prompt('请输入年份');
    console.log(checkLeapYear(inputYear));

    function checkLeapYear(year) {
      year = Number(year);
      return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? '闰年' : '不是闰年';
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 合并数组示例
    let array1 = ['a', 'b', 'c'];
    let array2 = ['d', 'e', 'f'];
    let mergedArray = array1.concat(array2);
    console.log('合并后的数组:', mergedArray);

    // 克隆和截取数组示例
    let originalArray = ['a', 'b', 'c', 'd', 'e'];
    let clonedArray = originalArray.slice();
    let slicedArray = originalArray.slice(1, 3);
    console.log('克隆的数组:', clonedArray);
    console.log('截取的数组:', slicedArray);

    // 类数组使用 push 方法示例
    let arrayLikeObject = {
      0: '张1',
      1: '张2',
      2: '张3',
      length: 3,
      splice: Array.prototype.splice,
      push: Array.prototype.push,
    };

    arrayLikeObject.push('张4');
    console.log('更新后的类数组对象:', arrayLikeObject);

    // 判断闰年示例
    let inputYear = prompt('请输入年份');
    console.log(checkLeapYear(inputYear));

    function checkLeapYear(year) {
      year = Number(year);
      return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? '闰年' : '不是闰年';
    }
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\346\236\204\351\200\240\345\207\275\346\225\260\345\217\212\345\256\236\344\276\213\345\214\226\345\216\237\347\220\206-\345\214\205\350\243\205\347\261\273/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\346\236\204\351\200\240\345\207\275\346\225\260\345\217\212\345\256\236\344\276\213\345\214\226\345\216\237\347\220\206-\345\214\205\350\243\205\347\261\273/index.html" index 1c6dc9c2..2add2ec9 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\346\236\204\351\200\240\345\207\275\346\225\260\345\217\212\345\256\236\344\276\213\345\214\226\345\216\237\347\220\206-\345\214\205\350\243\205\347\261\273/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\346\236\204\351\200\240\345\207\275\346\225\260\345\217\212\345\256\236\344\276\213\345\214\226\345\216\237\347\220\206-\345\214\205\350\243\205\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    构造函数与包装类

    @@ -107,6 +107,6 @@

    最佳实践

    实战案例

    创建一个简单的用户管理系统​

    class UserManager {
      constructor() {
        this.users = [];
      }

      addUser(name) {
        this.users.push(name);
        console.log(`${name} has been added.`);
      }

      removeUser(name) {
        const index = this.users.indexOf(name);
        if (index !== -1) {
          this.users.splice(index, 1);
          console.log(`${name} has been removed.`);
        } else {
          console.log(`${name} not found.`);
        }
      }

      listUsers() {
        console.log('Current Users:', this.users);
      }
    }

    const manager = new UserManager();
    manager.addUser('Alice');
    manager.addUser('Bob');
    manager.listUsers();
    manager.removeUser('Alice');
    manager.listUsers();
    -

    该案例展示了如何使用类来管理用户，包含添加、移除和列出用户的功能。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    该案例展示了如何使用类来管理用户，包含添加、移除和列出用户的功能。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\346\274\224\350\277\233\344\270\216\346\265\217\350\247\210\345\231\250\345\217\221\345\261\225\345\217\262/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\346\274\224\350\277\233\344\270\216\346\265\217\350\247\210\345\231\250\345\217\221\345\261\225\345\217\262/index.html" index 8248ddb5..9024a150 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\346\274\224\350\277\233\344\270\216\346\265\217\350\247\210\345\231\250\345\217\221\345\261\225\345\217\262/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\346\274\224\350\277\233\344\270\216\346\265\217\350\247\210\345\231\250\345\217\221\345\261\225\345\217\262/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    回顾历史

    @@ -87,6 +87,6 @@

    栈和指针

    重新赋值

    链接

    请参考相关资料了解更多信息：MDN Web 文档

    -

    掌握前端历史和计算机的基础知识，是学好前端的先决条件，要尊重历史，常怀感恩之心，才能走得更远。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    掌握前端历史和计算机的基础知识，是学好前端的先决条件，要尊重历史，常怀感恩之心，才能走得更远。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260-\351\227\255\345\214\205\346\267\261\345\205\245-\351\200\227\345\217\267\350\277\220\347\256\227\347\254\246/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260-\351\227\255\345\214\205\346\267\261\345\205\245-\351\200\227\345\217\267\350\277\220\347\256\227\347\254\246/index.html" index dd923ccf..f1f3b815 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260-\351\227\255\345\214\205\346\267\261\345\205\245-\351\200\227\345\217\267\350\277\220\347\256\227\347\254\246/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260-\351\227\255\345\214\205\346\267\261\345\205\245-\351\200\227\345\217\267\350\277\220\347\256\227\347\254\246/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    立即执行函数

    @@ -56,6 +56,6 @@ 

    const fn = (function test1() {
      return 1;
    },
    function test2() {
      return '2';
    })();

    console.log(typeof fn); // "function"
    console.log(fn); // ƒ test2()
    console.log(fn()); // "2"

    被忽略的函数名​

    -
    let a = 10;
    // function b() {} 返回 undefined，而 undefined 是字符串
    if (function b() {}) {
      // (function b() {}) 是表达式，忽略名字，所以 typeof b = undefined
      a += typeof b;
    }
    console.log(a); // "10undefined"
    编辑此页
    最后由 sumingcheng 于 更新
    +
    let a = 10;
    // function b() {} 返回 undefined，而 undefined 是字符串
    if (function b() {}) {
      // (function b() {}) 是表达式，忽略名字，所以 typeof b = undefined
      a += typeof b;
    }
    console.log(a); // "10undefined"
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\350\207\252\345\256\232\344\271\211\345\216\237\345\236\213\346\226\271\346\263\225-\345\216\273\351\207\215-\345\260\201\350\243\205typeof/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\350\207\252\345\256\232\344\271\211\345\216\237\345\236\213\346\226\271\346\263\225-\345\216\273\351\207\215-\345\260\201\350\243\205typeof/index.html" index 6453867c..37eb394c 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\350\207\252\345\256\232\344\271\211\345\216\237\345\236\213\346\226\271\346\263\225-\345\216\273\351\207\215-\345\260\201\350\243\205typeof/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\350\207\252\345\256\232\344\271\211\345\216\237\345\236\213\346\226\271\346\263\225-\345\216\273\351\207\215-\345\260\201\350\243\205typeof/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JavaScript 实用技巧

    @@ -57,6 +57,6 @@

    函数

    优化 switch 语句​

    通过数组替代 switch 语句来简化代码。

    function printWeekday(day) {
      const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
      const weekday = weekdays[day - 1];
      if (weekday) {
        console.log(weekday);
      } else {
        console.log("I don't know");
      }
    }

    printWeekday(3); // Wed
    -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\350\257\255\346\263\225-\350\247\204\350\214\203-\351\224\231\350\257\257-\350\277\220\347\256\227\347\254\246-\345\210\244\346\226\255-\346\263\250\351\207\212/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\350\257\255\346\263\225-\350\247\204\350\214\203-\351\224\231\350\257\257-\350\277\220\347\256\227\347\254\246-\345\210\244\346\226\255-\346\263\250\351\207\212/index.html" index f241e856..56c6716b 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\350\257\255\346\263\225-\350\247\204\350\214\203-\351\224\231\350\257\257-\350\277\220\347\256\227\347\254\246-\345\210\244\346\226\255-\346\263\250\351\207\212/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\350\257\255\346\263\225-\350\247\204\350\214\203-\351\224\231\350\257\257-\350\277\220\347\256\227\347\254\246-\345\210\244\346\226\255-\346\263\250\351\207\212/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    语句与运算符指南

    @@ -134,6 +134,6 @@

    逻辑非运算符 !

    常用于取反操作。

    var a = true;
    a = !a; // a 现在为 false

    注释

    -
    // 行注释

    /*
     * 推荐写法
     * 块注释
     */

    /**
     * 自动生成的注释
     */

    /*
        不推荐的写法
    */
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 行注释

    /*
     * 推荐写法
     * 块注释
     */

    /**
     * 自动生成的注释
     */

    /*
        不推荐的写法
    */
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\351\224\231\350\257\257\344\277\241\346\201\257-try_catch/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\351\224\231\350\257\257\344\277\241\346\201\257-try_catch/index.html" index 77695c74..d5ccea2d 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\351\224\231\350\257\257\344\277\241\346\201\257-try_catch/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\351\224\231\350\257\257\344\277\241\346\201\257-try_catch/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JS 错误信息类型

    @@ -185,6 +185,6 @@

    最佳实践

    捕获特定错误：在 catch 块中，根据错误类型采取不同的处理措施，提高错误处理的精确性。

    try {
      // 代码块
    } catch (error) {
      if (error instanceof TypeError) {
        console.error('类型错误:', error.message);
      } else if (error instanceof ReferenceError) {
        console.error('引用错误:', error.message);
      } else {
        console.error('未知错误:', error.message);
      }
    }
    -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES3~ES5/\351\227\255\345\214\205\351\253\230\347\272\247-\345\257\271\350\261\241-\346\236\204\351\200\240\345\207\275\346\225\260-\345\256\236\344\276\213\345\214\226/index.html" "b/docs/Frontend/JavaScript/ES3~ES5/\351\227\255\345\214\205\351\253\230\347\272\247-\345\257\271\350\261\241-\346\236\204\351\200\240\345\207\275\346\225\260-\345\256\236\344\276\213\345\214\226/index.html" index f3f6d01f..28103ffa 100644 --- "a/docs/Frontend/JavaScript/ES3~ES5/\351\227\255\345\214\205\351\253\230\347\272\247-\345\257\271\350\261\241-\346\236\204\351\200\240\345\207\275\346\225\260-\345\256\236\344\276\213\345\214\226/index.html" +++ "b/docs/Frontend/JavaScript/ES3~ES5/\351\227\255\345\214\205\351\253\230\347\272\247-\345\257\271\350\261\241-\346\236\204\351\200\240\345\207\275\346\225\260-\345\256\236\344\276\213\345\214\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    对象管理

    @@ -58,6 +58,6 @@

    构

    使用对象作为参数​

    function Teacher(options) {
      this.name = options.name;
      this.sex = options.sex;
      this.weight = options.weight;
      this.course = options.course;
      this.smoke = function () {
        this.weight++;
        console.log(this.weight);
      };
      this.eat = function () {
        this.weight--;
        console.log(this.weight);
      };
    }
    var teacher1 = new Teacher({
      name: '张三',
      sex: 'male',
      weight: 145,
      course: 'JS',
    });

    console.log(teacher1);

    Vue 也是采用这种方式。Vue 实际上是一个复杂的构造函数，通过实例化 Vue 和使用插件，我们在使用 Vue 时实际上是在调用这个构造函数的方法。这也是为什么在使用 Vue 时需要先创建一个实例的原因。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/HTML\344\270\216ECMAScript\347\232\204\345\217\221\345\261\225/index.html" "b/docs/Frontend/JavaScript/ES6+/HTML\344\270\216ECMAScript\347\232\204\345\217\221\345\261\225/index.html" index 0411a13b..898658a6 100644 --- "a/docs/Frontend/JavaScript/ES6+/HTML\344\270\216ECMAScript\347\232\204\345\217\221\345\261\225/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/HTML\344\270\216ECMAScript\347\232\204\345\217\221\345\261\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTML 与 ECMAScript 的发展

    @@ -37,6 +37,6 @@

    使用示

    在 HTML 中使用 Babel​

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Babel Demo</title>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      </head>
      <body>
        <script type="text/babel">
          const sum = (a, b) => a + b;
          console.log(sum(1, 2));
        </script>
      </body>
    </html>

    Node.js 对 ES6 特性的支持​

    -

    可以通过 node.green 查看不同 Node.js 版本对 ES6+ 特性的支持情况。Node.js 已全面支持 ES6 的大部分特性，包括箭头函数、模板字符串、解构赋值、类和模块等。对于某些实验性特性，可以使用 --harmony 标志启用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    可以通过 node.green 查看不同 Node.js 版本对 ES6+ 特性的支持情况。Node.js 已全面支持 ES6 的大部分特性，包括箭头函数、模板字符串、解构赋值、类和模块等。对于某些实验性特性，可以使用 --harmony 标志启用。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/this\346\214\207\345\220\221-\347\256\255\345\244\264\345\207\275\346\225\260\345\237\272\346\234\254\345\275\242\345\274\217-rest\350\277\220\347\256\227\347\254\246/index.html" "b/docs/Frontend/JavaScript/ES6+/this\346\214\207\345\220\221-\347\256\255\345\244\264\345\207\275\346\225\260\345\237\272\346\234\254\345\275\242\345\274\217-rest\350\277\220\347\256\227\347\254\246/index.html" index c4d99287..1c24c6cc 100644 --- "a/docs/Frontend/JavaScript/ES6+/this\346\214\207\345\220\221-\347\256\255\345\244\264\345\207\275\346\225\260\345\237\272\346\234\254\345\275\242\345\274\217-rest\350\277\220\347\256\227\347\254\246/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/this\346\214\207\345\220\221-\347\256\255\345\244\264\345\207\275\346\225\260\345\237\272\346\234\254\345\275\242\345\274\217-rest\350\277\220\347\256\227\347\254\246/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数与箭头函数

    @@ -64,6 +64,6 @@

    收集实

    扩展运算符必须是最后一个参数，否则后面的参数将无法接收实参。

    let fn = (a, b, ...c) => {
      console.log(a, b, c);
    };
    // 收集后面的所有实参
    fn(1, 2, 3, 4, 5, 6, 7); // 输出 1 2 [3, 4, 5, 6, 7]

    排序​

    -
    const sortNumbers = (...args) => args.sort((a, b) => a - b);
    console.log(sortNumbers(1, 3123, 213, 2134, 412, 4215, 125, 12, 321));
    // 输出 [1, 12, 125, 213, 321, 412, 2134, 3123, 4215]
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const sortNumbers = (...args) => args.sort((a, b) => a - b);
    console.log(sortNumbers(1, 3123, 213, 2134, 412, 4215, 125, 12, 321));
    // 输出 [1, 12, 125, 213, 321, 412, 2134, 3123, 4215]
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/\344\275\234\347\224\250\345\237\237\344\270\216\345\217\230\351\207\217\345\243\260\346\230\216\350\257\246\350\247\243/index.html" "b/docs/Frontend/JavaScript/ES6+/\344\275\234\347\224\250\345\237\237\344\270\216\345\217\230\351\207\217\345\243\260\346\230\216\350\257\246\350\247\243/index.html" index f93a798f..55b8556c 100644 --- "a/docs/Frontend/JavaScript/ES6+/\344\275\234\347\224\250\345\237\237\344\270\216\345\217\230\351\207\217\345\243\260\346\230\216\350\257\246\350\247\243/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/\344\275\234\347\224\250\345\237\237\344\270\216\345\217\230\351\207\217\345\243\260\346\230\216\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    作用域与变量声明详解

    @@ -70,6 +70,6 @@ 

    if (1) {
      let abc = function a() {
        // 不建议在块级作用域中声明函数
      };
    }

    块级作用域没有返回值​

    虽然草案中有提出，但目前浏览器对这种写法的支持不一致。

    -
    do {
      return '块';
    } while (false);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    do {
      return '块';
    } while (false);
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/\345\217\230\351\207\217\345\243\260\346\230\216\344\270\216\345\257\271\350\261\241\347\256\241\347\220\206/index.html" "b/docs/Frontend/JavaScript/ES6+/\345\217\230\351\207\217\345\243\260\346\230\216\344\270\216\345\257\271\350\261\241\347\256\241\347\220\206/index.html" index 269ad194..cd5c705b 100644 --- "a/docs/Frontend/JavaScript/ES6+/\345\217\230\351\207\217\345\243\260\346\230\216\344\270\216\345\257\271\350\261\241\347\256\241\347\220\206/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/\345\217\230\351\207\217\345\243\260\346\230\216\344\270\216\345\257\271\350\261\241\347\256\241\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JavaScript 中的变量声明与对象管理

    @@ -69,6 +69,6 @@

    在实际开发中的最佳实践

    通过遵循这些实践，可以编写出更加健壮和易于维护的 JavaScript 代码。

    知识扩展

    了解顶层对象的行为有助于避免全局变量带来的问题。例如，在浏览器环境中，window 对象是全局对象，所有全局变量和函数都是其属性。因此，避免在全局作用域中声明变量是维护代码质量的重要步骤。

    -

    此外，理解 const 的工作机制对于编写不可变数据结构至关重要。在函数式编程中，不可变性可以减少副作用，提高代码的可预测性和可测试性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    此外，理解 const 的工作机制对于编写不可变数据结构至关重要。在函数式编程中，不可变性可以减少副作用，提高代码的可预测性和可测试性。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/\346\217\222\344\273\266\345\214\226\345\274\200\345\217\221\347\232\204\346\234\200\344\275\263\345\256\236\350\267\265/index.html" "b/docs/Frontend/JavaScript/ES6+/\346\217\222\344\273\266\345\214\226\345\274\200\345\217\221\347\232\204\346\234\200\344\275\263\345\256\236\350\267\265/index.html" index c1a21010..a4911a35 100644 --- "a/docs/Frontend/JavaScript/ES6+/\346\217\222\344\273\266\345\214\226\345\274\200\345\217\221\347\232\204\346\234\200\344\275\263\345\256\236\350\267\265/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/\346\217\222\344\273\266\345\214\226\345\274\200\345\217\221\347\232\204\346\234\200\344\275\263\345\256\236\350\267\265/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    插件化开发的最佳实践

    插件化开发的最佳实践​

    @@ -73,6 +73,6 @@

    综合示
  • 模块化开发：UserModule封装了与用户相关的 API 调用，利用 Axios 进行数据获取。
  • 组件化开发：UserProfile组件通过props接收用户 ID，使用UserModule获取用户数据，并通过$log记录日志。
    • -

    这种结构使得各个部分职责明确，易于维护和扩展。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这种结构使得各个部分职责明确，易于维护和扩展。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\345\256\236\350\264\250-\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\344\275\277\347\224\250\345\234\272\346\231\257/index.html" "b/docs/Frontend/JavaScript/ES6+/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\345\256\236\350\264\250-\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\344\275\277\347\224\250\345\234\272\346\231\257/index.html" index ff87cf1c..2f8c1058 100644 --- "a/docs/Frontend/JavaScript/ES6+/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\345\256\236\350\264\250-\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\344\275\277\347\224\250\345\234\272\346\231\257/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\345\256\236\350\264\250-\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204\344\275\277\347\224\250\345\234\272\346\231\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    箭头函数中的 this 绑定

    @@ -60,6 +60,6 @@

    代码优化示例

    实战示例

    在实际开发中，箭头函数常用于处理异步操作中的this绑定。例如，在 React 组件中使用箭头函数处理事件：

    class Button extends React.Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }

      handleClick = () => {
        this.setState((prevState) => ({ count: prevState.count + 1 }));
      };

      render() {
        return <button onClick={this.handleClick}>Click me: {this.state.count}</button>;
      }
    }
    -

    使用箭头函数确保handleClick中的this始终指向组件实例，避免了手动绑定的麻烦。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    使用箭头函数确保handleClick中的this始终指向组件实例，避免了手动绑定的麻烦。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/\350\247\243\346\236\204\350\265\213\345\200\274-\345\207\275\346\225\260\351\273\230\350\256\244\345\200\274-\346\225\260\347\273\204\350\247\243\346\236\204-\345\257\271\350\261\241\350\247\243\346\236\204/index.html" "b/docs/Frontend/JavaScript/ES6+/\350\247\243\346\236\204\350\265\213\345\200\274-\345\207\275\346\225\260\351\273\230\350\256\244\345\200\274-\346\225\260\347\273\204\350\247\243\346\236\204-\345\257\271\350\261\241\350\247\243\346\236\204/index.html" index d652ae7a..84b6eff4 100644 --- "a/docs/Frontend/JavaScript/ES6+/\350\247\243\346\236\204\350\265\213\345\200\274-\345\207\275\346\225\260\351\273\230\350\256\244\345\200\274-\346\225\260\347\273\204\350\247\243\346\236\204-\345\257\271\350\261\241\350\247\243\346\236\204/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/\350\247\243\346\236\204\350\265\213\345\200\274-\345\207\275\346\225\260\351\273\230\350\256\244\345\200\274-\346\225\260\347\273\204\350\247\243\346\236\204-\345\257\271\350\261\241\350\247\243\346\236\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    暂时性死区、解构赋值

    @@ -78,6 +78,6 @@

    多层级对象的解构：

    var person = {
      name: 'zhangshan',
      age: 50,
      son: {
        name: 'lisi',
        age: 30,
        son: {
          name: 'wangwu',
          age: 12,
        },
      },
    };

    let {
      son: { son: son2 },
    } = person;
    console.log(son2); // { name: 'wangwu', age: 12 }
    -

    以上内容涵盖了 ES6 中关于暂时性死区、函数参数默认值以及解构赋值的关键概念和实践示例，帮助理解和应用这些特性以编写更简洁和高效的 JavaScript 代码。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    以上内容涵盖了 ES6 中关于暂时性死区、函数参数默认值以及解构赋值的关键概念和实践示例，帮助理解和应用这些特性以编写更简洁和高效的 JavaScript 代码。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6+/\351\232\220\345\274\217\350\275\254\346\215\242-\345\207\275\346\225\260\345\217\202\346\225\260\350\247\243\346\236\204-\350\247\243\346\236\204\346\234\254\350\264\250---\347\224\250\346\263\225/index.html" "b/docs/Frontend/JavaScript/ES6+/\351\232\220\345\274\217\350\275\254\346\215\242-\345\207\275\346\225\260\345\217\202\346\225\260\350\247\243\346\236\204-\350\247\243\346\236\204\346\234\254\350\264\250---\347\224\250\346\263\225/index.html" index 4b8c2b9c..035cf4c8 100644 --- "a/docs/Frontend/JavaScript/ES6+/\351\232\220\345\274\217\350\275\254\346\215\242-\345\207\275\346\225\260\345\217\202\346\225\260\350\247\243\346\236\204-\350\247\243\346\236\204\346\234\254\350\264\250---\347\224\250\346\263\225/index.html" +++ "b/docs/Frontend/JavaScript/ES6+/\351\232\220\345\274\217\350\275\254\346\215\242-\345\207\275\346\225\260\345\217\202\346\225\260\350\247\243\346\236\204-\350\247\243\346\236\204\346\234\254\350\264\250---\347\224\250\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组和对象匹配

    @@ -53,6 +53,6 @@

    toStri

    基本类型的值在解构时可以访问其原型方法。

    let { toString: s } = 123;
    console.log(s === Number.prototype.toString); // true

    变量的解构本质

    -

    变量的解构本质上是对变量的赋值操作。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    变量的解构本质上是对变量的赋值操作。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6-API/Array-\346\225\260\345\200\274\346\213\223\345\261\225-ArrayOf-ArrayFrom/index.html" "b/docs/Frontend/JavaScript/ES6-API/Array-\346\225\260\345\200\274\346\213\223\345\261\225-ArrayOf-ArrayFrom/index.html" index 62e4f259..26275a06 100644 --- "a/docs/Frontend/JavaScript/ES6-API/Array-\346\225\260\345\200\274\346\213\223\345\261\225-ArrayOf-ArrayFrom/index.html" +++ "b/docs/Frontend/JavaScript/ES6-API/Array-\346\225\260\345\200\274\346\213\223\345\261\225-ArrayOf-ArrayFrom/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组的创建方法 Array.of() 和 Array.from()

    @@ -90,6 +90,6 @@

    安全整

    JavaScript 中的安全整数范围在 -(2^53 - 1) 到 2^53 - 1 之间。超过这个范围的整数可能无法精确表示。

    console.log(Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1); // true
    console.log(Number.MIN_SAFE_INTEGER === -(Math.pow(2, 53) - 1)); // true

    安全整数范围

    -

    确保在处理大整数时不超过安全整数范围，以避免精度丢失的问题。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    确保在处理大整数时不超过安全整数范围，以避免精度丢失的问题。

    \ No newline at end of file diff --git a/docs/Frontend/JavaScript/ES6-API/Symbol-iterator-forOf-typeArray/index.html b/docs/Frontend/JavaScript/ES6-API/Symbol-iterator-forOf-typeArray/index.html index 909f5db5..560e197d 100644 --- a/docs/Frontend/JavaScript/ES6-API/Symbol-iterator-forOf-typeArray/index.html +++ b/docs/Frontend/JavaScript/ES6-API/Symbol-iterator-forOf-typeArray/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    迭代器、Symbol 和类型数组

    @@ -46,6 +46,6 @@

    for...infor...in 循环用于遍历对象的可枚举属性，或数组的索引。

    const array = [1, 2, 3, 4];

    for (const index in array) {
      console.log(index); // 0 1 2 3
    }
    const object = {
      a: 1,
      b: 2,
      c: 3,
    };

    for (const key in object) {
      console.log(key); // a b c
    }
    -

    需要注意的是，for...in 循环会遍历对象及其原型链上的可枚举属性，因此在使用时应结合 hasOwnProperty 方法进行过滤，以避免遍历到不必要的属性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    需要注意的是，for...in 循环会遍历对象及其原型链上的可枚举属性，因此在使用时应结合 hasOwnProperty 方法进行过滤，以避免遍历到不必要的属性。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6-API/Unicode\350\241\250\347\244\272\346\263\225-\345\255\227\347\254\246\344\270\262\346\226\271\346\263\225-\346\250\241\346\235\277\345\255\227\347\254\246\344\270\262/index.html" "b/docs/Frontend/JavaScript/ES6-API/Unicode\350\241\250\347\244\272\346\263\225-\345\255\227\347\254\246\344\270\262\346\226\271\346\263\225-\346\250\241\346\235\277\345\255\227\347\254\246\344\270\262/index.html" index 96a2a242..7ec2e28f 100644 --- "a/docs/Frontend/JavaScript/ES6-API/Unicode\350\241\250\347\244\272\346\263\225-\345\255\227\347\254\246\344\270\262\346\226\271\346\263\225-\346\250\241\346\235\277\345\255\227\347\254\246\344\270\262/index.html" +++ "b/docs/Frontend/JavaScript/ES6-API/Unicode\350\241\250\347\244\272\346\263\225-\345\255\227\347\254\246\344\270\262\346\226\271\346\263\225-\346\250\241\346\235\277\345\255\227\347\254\246\344\270\262/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Unicode 表示法

    @@ -73,6 +73,6 @@

    标签模

    过滤注入的标签​

    通过过滤<和>来防止注入攻击。

    -
    function saferHTML(templateStrings, ...values) {
      let result = templateStrings[0];
      values.forEach((value, index) => {
        const sanitizedValue = String(value).replace(/</g, '&lt').replace(/>/g, '&gt');
        result += sanitizedValue + templateStrings[index + 1];
      });
      return result;
    }

    const sender = `<script>alert("abc")</script>`;

    const safeMessage = saferHTML`<p> ${sender} has sent you a message</p>`;
    console.log(safeMessage); // <p> &lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message</p>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function saferHTML(templateStrings, ...values) {
      let result = templateStrings[0];
      values.forEach((value, index) => {
        const sanitizedValue = String(value).replace(/</g, '&lt').replace(/>/g, '&gt');
        result += sanitizedValue + templateStrings[index + 1];
      });
      return result;
    }

    const sender = `<script>alert("abc")</script>`;

    const safeMessage = saferHTML`<p> ${sender} has sent you a message</p>`;
    console.log(safeMessage); // <p> &lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message</p>
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6-API/super-\351\201\215\345\216\206-\345\216\237\345\236\213/index.html" "b/docs/Frontend/JavaScript/ES6-API/super-\351\201\215\345\216\206-\345\216\237\345\236\213/index.html" index 6cf33561..38b81793 100644 --- "a/docs/Frontend/JavaScript/ES6-API/super-\351\201\215\345\216\206-\345\216\237\345\236\213/index.html" +++ "b/docs/Frontend/JavaScript/ES6-API/super-\351\201\215\345\216\206-\345\216\237\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    原型、原型访问方式、原型操作方法

    @@ -85,6 +85,6 @@ 

    const obj = {};
    const symA = Symbol('a');
    const symB = Symbol('b');
    obj[symA] = 'hello1';
    obj[symB] = 'hello2';
    obj.c = 1;

    const symbols = Object.getOwnPropertySymbols(obj);
    console.log(symbols); // [ Symbol(a), Symbol(b) ]

    例子

    -
    const obj = {
      c: 1,
      d: 2,
    };
    const symA = Symbol('a');
    const symB = Symbol('b');
    const sym_a = Symbol('_a');
    const sym_b = Symbol('_b');

    obj[symA] = 'hello1';
    obj[symB] = 'hello2';

    Object.defineProperties(obj, {
      e: {
        value: 5,
        enumerable: true,
      },
      f: {
        value: 6,
        enumerable: false,
      },
      [sym_a]: {
        value: -1,
        enumerable: true,
      },
      [sym_b]: {
        value: -2,
        enumerable: false,
      },
    });

    const symH = Symbol('h');
    const symI = Symbol('i');
    const symJ = Symbol('j');

    const obj1 = {
      g: 7,
      [symH]: 8,
    };

    Object.defineProperties(obj1, {
      [symI]: {
        value: 9,
        enumerable: true,
      },
      [symJ]: {
        value: 10,
      },
      k: {
        value: 11,
      },
    });

    // 设置原型
    Object.setPrototypeOf(obj, obj1);
    console.log(obj);

    // for...in 遍历自身和继承的可枚举属性，不包含 Symbol 类型的值
    for (const key in obj) {
      console.log(key); // 'c', 'd', 'e', 'g', 'k'
    }

    // Object.keys 只遍历自身且不包含 Symbol 类型的值
    console.log(Object.keys(obj)); // ['c', 'd', 'e']

    // 获取自身的 Symbol 类型的属性
    console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(a), Symbol(b), Symbol(_a), Symbol(_b) ]
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const obj = {
      c: 1,
      d: 2,
    };
    const symA = Symbol('a');
    const symB = Symbol('b');
    const sym_a = Symbol('_a');
    const sym_b = Symbol('_b');

    obj[symA] = 'hello1';
    obj[symB] = 'hello2';

    Object.defineProperties(obj, {
      e: {
        value: 5,
        enumerable: true,
      },
      f: {
        value: 6,
        enumerable: false,
      },
      [sym_a]: {
        value: -1,
        enumerable: true,
      },
      [sym_b]: {
        value: -2,
        enumerable: false,
      },
    });

    const symH = Symbol('h');
    const symI = Symbol('i');
    const symJ = Symbol('j');

    const obj1 = {
      g: 7,
      [symH]: 8,
    };

    Object.defineProperties(obj1, {
      [symI]: {
        value: 9,
        enumerable: true,
      },
      [symJ]: {
        value: 10,
      },
      k: {
        value: 11,
      },
    });

    // 设置原型
    Object.setPrototypeOf(obj, obj1);
    console.log(obj);

    // for...in 遍历自身和继承的可枚举属性，不包含 Symbol 类型的值
    for (const key in obj) {
      console.log(key); // 'c', 'd', 'e', 'g', 'k'
    }

    // Object.keys 只遍历自身且不包含 Symbol 类型的值
    console.log(Object.keys(obj)); // ['c', 'd', 'e']

    // 获取自身的 Symbol 类型的属性
    console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(a), Symbol(b), Symbol(_a), Symbol(_b) ]
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6-API/\345\207\275\346\225\260\345\220\215-\345\257\271\350\261\241\346\213\223\345\261\225-\346\217\217\350\277\260\347\254\246-getter-setter/index.html" "b/docs/Frontend/JavaScript/ES6-API/\345\207\275\346\225\260\345\220\215-\345\257\271\350\261\241\346\213\223\345\261\225-\346\217\217\350\277\260\347\254\246-getter-setter/index.html" index 31c4a376..3d6d5f06 100644 --- "a/docs/Frontend/JavaScript/ES6-API/\345\207\275\346\225\260\345\220\215-\345\257\271\350\261\241\346\213\223\345\261\225-\346\217\217\350\277\260\347\254\246-getter-setter/index.html" +++ "b/docs/Frontend/JavaScript/ES6-API/\345\207\275\346\225\260\345\220\215-\345\257\271\350\261\241\346\213\223\345\261\225-\346\217\217\350\277\260\347\254\246-getter-setter/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数和对象特性

    @@ -95,6 +95,6 @@

    Symbol
    const symA = Symbol('a');
    const symB = Symbol('a');

    console.log(symA === symB); // false

    符号属性可以被迭代和复制，但需要注意它们不会被 Object.keys 或 for...in 遍历到。

    -
    const obj = Object.assign(
      {
        a: 'b',
      },
      {
        [Symbol('c')]: 'd',
      }
    );

    console.log(obj); // { a: 'b', [Symbol(c)]: 'd' }

    // 通过 Reflect.ownKeys 可以获取所有属性，包括符号属性
    console.log(Reflect.ownKeys(obj)); // [ 'a', Symbol(c) ]
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const obj = Object.assign(
      {
        a: 'b',
      },
      {
        [Symbol('c')]: 'd',
      }
    );

    console.log(obj); // { a: 'b', [Symbol(c)]: 'd' }

    // 通过 Reflect.ownKeys 可以获取所有属性，包括符号属性
    console.log(Reflect.ownKeys(obj)); // [ 'a', Symbol(c) ]
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6-API/\345\257\271\350\261\241\345\257\206\345\260\2014\347\247\215\346\226\271\345\274\217-assign-\345\217\226\345\200\274\345\207\275\346\225\260\347\232\204\346\213\267\350\264\235/index.html" "b/docs/Frontend/JavaScript/ES6-API/\345\257\271\350\261\241\345\257\206\345\260\2014\347\247\215\346\226\271\345\274\217-assign-\345\217\226\345\200\274\345\207\275\346\225\260\347\232\204\346\213\267\350\264\235/index.html" index 8d9fa52f..2741edd3 100644 --- "a/docs/Frontend/JavaScript/ES6-API/\345\257\271\350\261\241\345\257\206\345\260\2014\347\247\215\346\226\271\345\274\217-assign-\345\217\226\345\200\274\345\207\275\346\225\260\347\232\204\346\213\267\350\264\235/index.html" +++ "b/docs/Frontend/JavaScript/ES6-API/\345\257\271\350\261\241\345\257\206\345\260\2014\347\247\215\346\226\271\345\274\217-assign-\345\217\226\345\200\274\345\207\275\346\225\260\347\232\204\346\213\267\350\264\235/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    获取属性名称

    @@ -92,6 +92,6 @@

    Symbol()

    一个不重复的原始类型，永远不会重复的字符串

    var a = Symbol('a');
    var b = Symbol('a');

    console.log(a === b); //false

    可以被迭代可以被复制

    -
    var test = Object.assign(
      {
        a: 'b',
      },
      {
        [Symbol('c')]: 'd',
      }
    );

    console.log(test);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    var test = Object.assign(
      {
        a: 'b',
      },
      {
        [Symbol('c')]: 'd',
      }
    );

    console.log(test);
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/ES6-API/\346\255\243\345\210\231\346\226\271\346\263\225-\344\277\256\351\245\260\347\254\246yus-UTF_16\347\274\226\347\240\201\346\226\271\345\274\217/index.html" "b/docs/Frontend/JavaScript/ES6-API/\346\255\243\345\210\231\346\226\271\346\263\225-\344\277\256\351\245\260\347\254\246yus-UTF_16\347\274\226\347\240\201\346\226\271\345\274\217/index.html" index 50e5bfd9..ad65ae10 100644 --- "a/docs/Frontend/JavaScript/ES6-API/\346\255\243\345\210\231\346\226\271\346\263\225-\344\277\256\351\245\260\347\254\246yus-UTF_16\347\274\226\347\240\201\346\226\271\345\274\217/index.html" +++ "b/docs/Frontend/JavaScript/ES6-API/\346\255\243\345\210\231\346\226\271\346\263\225-\344\277\256\351\245\260\347\254\246yus-UTF_16\347\274\226\347\240\201\346\226\271\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    正则表达式

    @@ -69,6 +69,6 @@

    使用 u 修饰符处理 Emoji 字符​

    var emoji = '😊';
    var regex = /\u{1F60A}/u;

    console.log(regex.test(emoji)); // true

    使用 s 修饰符匹配多行字符串​

    -
    var multiLine = `Hello
    World`;
    var regex = /Hello.World/s;

    console.log(regex.test(multiLine)); // true
    编辑此页
    最后由 sumingcheng 于 更新
    +
    var multiLine = `Hello
    World`;
    var regex = /Hello.World/s;

    console.log(regex.test(multiLine)); // true
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.from/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.from/index.html" index acdeabe1..8b156a94 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.from/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.from/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.from()

    @@ -65,6 +65,6 @@

    合并

    结合 Array.from() 和 Set 可以实现数组的合并与去重。

    const arr = [1, 2, 3, 4, 5, 1, 2];

    function combine() {
      const combined = Array.prototype.concat.apply([], arguments);
      return Array.from(new Set(combined));
    }

    console.log(combine(arr));

    实现 Array.from()

    -
    function myArrayFrom(arrayLike, mapFn, thisArg) {
      // 检查 arrayLike 是否为 null 或 undefined
      if (arrayLike == null) {
        throw new TypeError('Array.from requires an array-like object');
      }

      // 获取迭代器方法
      let iteratorMethod = arrayLike[Symbol.iterator];
      let items = [];

      if (typeof iteratorMethod === 'function') {
        // 如果是可迭代对象,使用迭代器获取值
        let iterator = iteratorMethod.call(arrayLike);
        let next = iterator.next();
        while (!next.done) {
          items.push(next.value);
          next = iterator.next();
        }
      } else {
        // 处理类数组对象
        let len = arrayLike.length >>> 0;
        for (let i = 0; i < len; i++) {
          if (i in arrayLike) {
            items[i] = arrayLike[i];
          }
        }
      }

      // 如果提供了 mapFn,对每个元素进行映射
      if (typeof mapFn === 'function') {
        items = items.map((item, index) => {
          return mapFn.call(thisArg, item, index);
        });
      }

      return items;
    }

    // 测试
    const obj = {
      0: 1,
      1: 2,
      2: 3,
      length: 3,
    };

    console.log(myArrayFrom(obj)); // [1, 2, 3]
    console.log(myArrayFrom(obj, (x) => x * 2)); // [2, 4, 6]
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function myArrayFrom(arrayLike, mapFn, thisArg) {
      // 检查 arrayLike 是否为 null 或 undefined
      if (arrayLike == null) {
        throw new TypeError('Array.from requires an array-like object');
      }

      // 获取迭代器方法
      let iteratorMethod = arrayLike[Symbol.iterator];
      let items = [];

      if (typeof iteratorMethod === 'function') {
        // 如果是可迭代对象,使用迭代器获取值
        let iterator = iteratorMethod.call(arrayLike);
        let next = iterator.next();
        while (!next.done) {
          items.push(next.value);
          next = iterator.next();
        }
      } else {
        // 处理类数组对象
        let len = arrayLike.length >>> 0;
        for (let i = 0; i < len; i++) {
          if (i in arrayLike) {
            items[i] = arrayLike[i];
          }
        }
      }

      // 如果提供了 mapFn,对每个元素进行映射
      if (typeof mapFn === 'function') {
        items = items.map((item, index) => {
          return mapFn.call(thisArg, item, index);
        });
      }

      return items;
    }

    // 测试
    const obj = {
      0: 1,
      1: 2,
      2: 3,
      length: 3,
    };

    console.log(myArrayFrom(obj)); // [1, 2, 3]
    console.log(myArrayFrom(obj, (x) => x * 2)); // [2, 4, 6]
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.copyWithin/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.copyWithin/index.html" index b86f289e..6fbe5c3b 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.copyWithin/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.copyWithin/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    了解更多信息，请访问 Array.prototype.copyWithin() - JavaScript | MDN。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.entries/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.entries/index.html" index 85d65a5d..e5a6bf7b 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.entries/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.entries/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    遍历方法对比 for-of 和 for-in

    @@ -78,6 +78,6 @@

    注意事项

  • Array.prototype.entries() 方法在需要同时访问数组的索引和值时非常有用。

    • 链接

    -

    了解更多内容，请访问 Array.prototype.entries() - JavaScript | MDN。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    了解更多内容，请访问 Array.prototype.entries() - JavaScript | MDN。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.fill/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.fill/index.html" index 38cf0f4f..8748fc27 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.fill/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.fill/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.prototype.fill

    @@ -38,6 +38,6 @@

    实现 fil

    为了更好地理解 fill 方法的工作原理，以下是一个自定义实现 fill 方法的示例：

    Array.prototype.myFill = function (value, start, end) {
      // 设置填充值，如果未提供则为 undefined
      const fillValue = typeof value !== 'undefined' ? value : undefined;

      // 转换 this 对象为数组
      if (this == null) {
        throw new TypeError('Cannot convert undefined or null to object');
      }

      const obj = Object(this);
      const len = obj.length >>> 0;

      // 计算开始索引
      let startIndex = typeof start === 'undefined' ? 0 : Number(start);
      startIndex = isNaN(startIndex) ? 0 : startIndex < 0 ? Math.max(len + startIndex, 0) : Math.min(startIndex, len);

      // 计算结束索引
      let endIndex = typeof end === 'undefined' ? len : Number(end);
      endIndex = isNaN(endIndex) ? len : endIndex < 0 ? Math.max(len + endIndex, 0) : Math.min(endIndex, len);

      // 填充数组
      for (let i = startIndex; i < endIndex; i++) {
        obj[i] = fillValue;
      }

      return obj;
    };

    const arr = [1, 2, 3, 4, 5];
    const newArr = arr.myFill('a', 2, 4);
    console.log(newArr); // [1, 2, 'a', 'a', 5]

    在这个实现中，我扩展了 Array.prototype 添加了一个 myFill 方法。该方法首先验证 this 是否为有效的数组对象，然后计算开始和结束索引，最后在指定范围内填充值。

    -

    通过这个示例，可以更深入地理解 fill 方法的内部工作机制，并了解如何在实际开发中自定义数组方法。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这个示例，可以更深入地理解 fill 方法的内部工作机制，并了解如何在实际开发中自定义数组方法。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.find/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.find/index.html" index 95e70939..56e3e95f 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.find/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.find/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.prototype.find

    @@ -70,6 +70,6 @@

    实现 fil 
    Array.prototype.myFill = function (value, start, end) {
      const fillValue = typeof value !== 'undefined' ? value : undefined;

      if (this == null) {
        throw new TypeError('无法将 null 或 undefined 转换为对象');
      }

      const obj = Object(this);
      const len = obj.length >>> 0;

      let startIndex = typeof start === 'undefined' ? 0 : Number(start);
      startIndex = isNaN(startIndex) ? 0 : startIndex < 0 ? Math.max(len + startIndex, 0) : Math.min(startIndex, len);

      let endIndex = typeof end === 'undefined' ? len : Number(end);
      endIndex = isNaN(endIndex) ? len : endIndex < 0 ? Math.max(len + endIndex, 0) : Math.min(endIndex, len);

      for (let i = startIndex; i < endIndex; i++) {
        obj[i] = fillValue;
      }

      return obj;
    };

    // 测试
    const array = [1, 2, 3, 4, 5];
    const filledArray = array.myFill('a', 2, 4);
    console.log(filledArray); // 输出: [1, 2, 'a', 'a', 5]

    fill 方法示意图

    在这个实现中，我扩展了 Array.prototype 添加了一个 myFill 方法。该方法首先验证 this 是否为有效的数组对象，然后计算开始和结束索引，最后在指定范围内填充值。

    -

    通过这个示例，可以更深入地理解 fill 方法的内部工作机制，并了解如何在实际开发中自定义数组方法。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这个示例，可以更深入地理解 fill 方法的内部工作机制，并了解如何在实际开发中自定义数组方法。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.findIndex/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.findIndex/index.html" index af628c96..835c632e 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.findIndex/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.findIndex/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.prototype.findIndex

    @@ -50,6 +50,6 @@

    第二

    以下是一个自定义实现 findIndex 方法的示例，命名为 myFindIndex。通过这个示例，可以更深入地理解 findIndex 方法的内部工作机制。

    Array.prototype.myFindIndex = function (callback, thisArg) {
      // 检查 this 是否为 null 或 undefined
      if (this == null) {
        throw new TypeError("'this' 为 null 或未定义");
      }

      // 检查回调函数是否为函数
      if (typeof callback !== 'function') {
        throw new TypeError('回调函数必须是函数类型');
      }

      const array = Object(this);
      const length = array.length >>> 0;
      const context = thisArg;

      for (let index = 0; index < length; index++) {
        const currentValue = array[index];
        if (callback.call(context, currentValue, index, array)) {
          return index;
        }
      }

      return -1;
    };

    // 测试
    const numbers = [1, 2, 4, 5];
    const index = numbers.myFindIndex(
      function (item, index, array) {
        console.log(this);
      },
      { a: 1 }
    );
    console.log(index); // 输出: -1

    在这个实现中，我扩展了 Array.prototype 添加了一个 myFindIndex 方法。该方法首先验证 this 是否为有效的数组对象，然后迭代数组中的元素，调用回调函数并返回第一个满足条件的元素的下标。如果没有满足条件的元素，返回 -1。

    -

    通过这个示例，可以更好地理解 findIndex 方法的工作原理，并在实际开发中根据需要自定义数组方法。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这个示例，可以更好地理解 findIndex 方法的工作原理，并在实际开发中根据需要自定义数组方法。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flat/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flat/index.html" index a98cf0f8..87270333 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flat/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flat/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.prototype.flat()

    @@ -65,6 +65,6 @@ 

    Array.prototype.deepFlat = function () {
      var arr = this,
        deep = arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity,
        res = [];

      (function _(arr, deep) {
        for (var item of arr) {
          if (Array.isArray(item) && deep > 0) {
            _(item, deep - 1);
          } else {
            item !== void 0 && res.push(item); // 剔除空位
          }
        }
      })(arr, deep);

      return res;
    };

    使用栈（stack）+ pop + push​

    通过栈的方式，逐步展开数组。

    -
    Array.prototype.deepFlat = function () {
      var arr = this,
        stack = [...arr],
        res = [];

      while (stack.length) {
        const popItem = stack.pop();

        if (Array.isArray(popItem)) {
          stack.push(...popItem);
        } else {
          if (popItem != undefined) {
            res.push(popItem);
          }
        }
      }

      return res.reverse();
    };

    const arr1
    编辑此页
    最后由 sumingcheng 于 更新
    +
    Array.prototype.deepFlat = function () {
      var arr = this,
        stack = [...arr],
        res = [];

      while (stack.length) {
        const popItem = stack.pop();

        if (Array.isArray(popItem)) {
          stack.push(...popItem);
        } else {
          if (popItem != undefined) {
            res.push(popItem);
          }
        }
      }

      return res.reverse();
    };

    const arr1
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flatMap/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flatMap/index.html" index 43e92bab..d933f9d9 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flatMap/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.flatMap/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.prototype.flatMap

    @@ -37,6 +37,6 @@

    遍

    flatMap 方法实现

    如果你希望自己实现类似 flatMap 的功能，可以按照以下步骤：

    -
    const arr = ['123', '456', '678'];

    Array.prototype.myFlatMap = function (cb) {
      // 判断回调函数是否有效
      if (typeof cb !== 'function') {
        throw new TypeError('Callback must be a function');
      }

      // 保存当前数组和传入的 this 值
      var arr = this,
        arg2 = arguments[1],
        res = [],
        item;

      for (var i = 0; i < arr.length; i++) {
        // 回调函数会使用 apply 方法绑定 this
        item = cb.apply(arg2, [arr[i], i, arr]);

        // 如果返回值为真，加入结果数组
        if (item) {
          res.push(item);
        }
      }

      // 使用 flat 方法进行数组平铺
      return res.flat();
    };

    const newArr = arr.myFlatMap(function (item) {
      return item.split(''); // 将每个字符串拆分为字符数组
    });

    console.log(newArr);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const arr = ['123', '456', '678'];

    Array.prototype.myFlatMap = function (cb) {
      // 判断回调函数是否有效
      if (typeof cb !== 'function') {
        throw new TypeError('Callback must be a function');
      }

      // 保存当前数组和传入的 this 值
      var arr = this,
        arg2 = arguments[1],
        res = [],
        item;

      for (var i = 0; i < arr.length; i++) {
        // 回调函数会使用 apply 方法绑定 this
        item = cb.apply(arg2, [arr[i], i, arr]);

        // 如果返回值为真，加入结果数组
        if (item) {
          res.push(item);
        }
      }

      // 使用 flat 方法进行数组平铺
      return res.flat();
    };

    const newArr = arr.myFlatMap(function (item) {
      return item.split(''); // 将每个字符串拆分为字符数组
    });

    console.log(newArr);
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.includes/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.includes/index.html" index cf19bd73..41329ef1 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.includes/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.includes/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    includes

    @@ -62,6 +62,6 @@

    关
  • fromIndex 确保我们从一个有效的索引位置开始查找，如果提供了负值，它会从数组的末尾开始计算。
  • 通过 Math.max 确保开始查找的索引不小于 0。
  • 遍历数组并比较每个元素，找到匹配项时返回 true，否则继续查找。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.sort/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.sort/index.html" index d35166f7..85b70d39 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.sort/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Array.prototype.sort/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Array.prototype.sort

    @@ -60,6 +60,6 @@

    最佳实
  • 避免在比较函数中引入副作用：比较函数应保持纯粹，只进行比较操作，不应修改外部状态。
  • 优化变量命名：使用具有描述性的变量名，提高代码的可读性。
  • 处理不同数据类型：在排序前，确保数组中的元素类型一致，或在比较函数中处理不同类型的转换。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Generator\344\270\216Iterator/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Generator\344\270\216Iterator/index.html" index 24f167c2..46d9308c 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Generator\344\270\216Iterator/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Generator\344\270\216Iterator/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组遍历与迭代

    @@ -54,6 +54,6 @@

    迭代器迭代器是生成器函数执行后返回的对象，具有next方法。每次调用next方法都会执行生成器函数中的下一条yield语句，直到函数执行完毕。

    实现生成器函数​

    除了使用function*语法，迭代器还可以手动实现，通过返回一个包含next方法的对象来控制迭代过程。

    -
    const userInfo = ['姓名，素明诚', '年龄: 26', '爱好: 旅游'];

    function createIterator(arr) {
      let nextIndex = 0;
      return {
        next: function () {
          if (nextIndex < arr.length) {
            return { value: arr[nextIndex++], done: false };
          } else {
            return { value: '喜欢JavaScript', done: true };
          }
        },
      };
    }

    const iterator = createIterator(userInfo);
    console.log(iterator.next()); // { value: '姓名，素明诚', done: false }
    console.log(iterator.next()); // { value: '年龄: 26', done: false }
    console.log(iterator.next()); // { value: '爱好: 旅游', done: false }
    console.log(iterator.next()); // { value: '喜欢JavaScript', done: true }

    编辑此页
    最后由 sumingcheng 于 更新
    +
    const userInfo = ['姓名，素明诚', '年龄: 26', '爱好: 旅游'];

    function createIterator(arr) {
      let nextIndex = 0;
      return {
        next: function () {
          if (nextIndex < arr.length) {
            return { value: arr[nextIndex++], done: false };
          } else {
            return { value: '喜欢JavaScript', done: true };
          }
        },
      };
    }

    const iterator = createIterator(userInfo);
    console.log(iterator.next()); // { value: '姓名，素明诚', done: false }
    console.log(iterator.next()); // { value: '年龄: 26', done: false }
    console.log(iterator.next()); // { value: '爱好: 旅游', done: false }
    console.log(iterator.next()); // { value: '喜欢JavaScript', done: true }
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/ObjectDefineProperty/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/ObjectDefineProperty/index.html" index c27db77a..65a341f4 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/ObjectDefineProperty/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/ObjectDefineProperty/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Object.defineProperty 使用指南

    @@ -36,6 +36,6 @@

    set
    function defineProperty() {
      var obj = {};
      var internalA = 1;

      Object.defineProperties(obj, {
        a: {
          // 访问器
          get() {
            return `当前值：${internalA}`;
          },
          // 设置器
          set(newVal) {
            internalA = newVal;
            var paragraph = document.getElementsByTagName('p')[0];
            if (paragraph) {
              paragraph.innerHTML = internalA;
            }
          },
        },
        b: {
          value: 2,
        },
      });

      return obj;
    }

    var obj = defineProperty();
    obj.a = 2;
    console.log(obj.a);

    定义数组​

    通过 Object.defineProperty，我可以定义一个数组，并在设置值时自动记录变化。

    -
    function DataArray() {
      var value = null;
      var history = [];

      Object.defineProperty(this, 'val', {
        get: function () {
          return value;
        },
        set: function (newVal) {
          value = newVal;
          history.push({ val: value });
          console.log('值已更新');
        },
      });

      this.getHistory = function () {
        return history;
      };
    }

    var dataArray = new DataArray();

    dataArray.val = 123;
    dataArray.val = 234;

    console.log(dataArray.getHistory());
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function DataArray() {
      var value = null;
      var history = [];

      Object.defineProperty(this, 'val', {
        get: function () {
          return value;
        },
        set: function (newVal) {
          value = newVal;
          history.push({ val: value });
          console.log('值已更新');
        },
      });

      this.getHistory = function () {
        return history;
      };
    }

    var dataArray = new DataArray();

    dataArray.val = 123;
    dataArray.val = 234;

    console.log(dataArray.getHistory());
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Proxy\344\270\216ES-14\347\247\215\345\257\271\350\261\241\346\223\215\344\275\234\346\226\271\346\263\225/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Proxy\344\270\216ES-14\347\247\215\345\257\271\350\261\241\346\223\215\344\275\234\346\226\271\346\263\225/index.html" index 3f887ce2..34a53c58 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Proxy\344\270\216ES-14\347\247\215\345\257\271\350\261\241\346\223\215\344\275\234\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/Proxy\344\270\216ES-14\347\247\215\345\257\271\350\261\241\346\223\215\344\275\234\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    14 种操作对象方法

    @@ -113,6 +113,6 @@ 

    const target = {
      a: 1,
      b: 2,
    };

    const handler = {
      get(target, prop, receiver) {
        console.log(`获取属性 ${prop}`);
        return Reflect.get(target, prop, receiver);
      },
      set(target, prop, value, receiver) {
        console.log(`设置属性 ${prop} 为 ${value}`);
        return Reflect.set(target, prop, value, receiver);
      },
      deleteProperty(target, prop) {
        console.log(`删除属性 ${prop}`);
        return Reflect.deleteProperty(target, prop);
      },
    };

    const proxy = new Proxy(target, handler);

    console.log(proxy.a); // 获取属性 a \n 1
    proxy.b = 3; // 设置属性 b 为 3
    delete proxy.a; // 删除属性 a
    console.log(target); // { b: 3 }

    -

    通过上述示例，笔者展示了如何利用 Proxy 和 Reflect 来拦截和控制对象的基本操作，从而实现更复杂的功能，如日志记录、数据验证等。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过上述示例，笔者展示了如何利用 Proxy 和 Reflect 来拦截和控制对象的基本操作，从而实现更复杂的功能，如日志记录、数据验证等。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/\347\233\270\347\255\211\346\200\247\345\210\244\346\226\255\344\270\216Object.is\346\226\271\346\263\225/index.html" "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/\347\233\270\347\255\211\346\200\247\345\210\244\346\226\255\344\270\216Object.is\346\226\271\346\263\225/index.html" index 5c39ff95..7167a8b7 100644 --- "a/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/\347\233\270\347\255\211\346\200\247\345\210\244\346\226\255\344\270\216Object.is\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/JavaScript/JS-\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/\347\233\270\347\255\211\346\200\247\345\210\244\346\226\255\344\270\216Object.is\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    四种判断相等性的方法

    @@ -69,6 +69,6 @@ 

    Object.myIs = function (a, b) {
      if (a === b) {
        // 处理 +0 和 -0
        return a !== 0 || 1 / a === 1 / b;
      }
      // 处理 NaN
      return a !== a && b !== b;
    };

    console.log(Object.myIs(NaN, NaN)); // true
    console.log(Object.myIs(+0, -0)); // false
    console.log(Object.myIs(5, 5)); // true
    console.log(Object.myIs('test', 'test')); // true
    console.log(Object.myIs({}, {})); // false

    -

    这种实现方式确保了 Object.myIs 在比较时能正确处理 NaN 和 +0 与 -0 的特殊情况。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这种实现方式确保了 Object.myIs 在比较时能正确处理 NaN 和 +0 与 -0 的特殊情况。

    \ No newline at end of file diff --git a/docs/Frontend/JavaScript/Promise/Generator/index.html b/docs/Frontend/JavaScript/Promise/Generator/index.html index af3f8430..62c1f0b3 100644 --- a/docs/Frontend/JavaScript/Promise/Generator/index.html +++ b/docs/Frontend/JavaScript/Promise/Generator/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Generator 生成器

    @@ -54,6 +54,6 @@

    总结<
  • 在 async/await 出现之前，生成器与 co 库被广泛用于处理异步操作，使异步代码更具可读性。
  • async/await 作为语法糖，简化了生成器和 co 处理异步操作的复杂性。
    • -

    通过理解生成器函数的原理和使用方法，可以更深入地掌握 JavaScript 中的异步编程模式，为编写高效、可维护的代码打下坚实的基础。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过理解生成器函数的原理和使用方法，可以更深入地掌握 JavaScript 中的异步编程模式，为编写高效、可维护的代码打下坚实的基础。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/Promise-\347\273\203\344\271\240\351\242\230/index.html" "b/docs/Frontend/JavaScript/Promise/Promise-\347\273\203\344\271\240\351\242\230/index.html" index c222e2ab..f47812b2 100644 --- "a/docs/Frontend/JavaScript/Promise/Promise-\347\273\203\344\271\240\351\242\230/index.html" +++ "b/docs/Frontend/JavaScript/Promise/Promise-\347\273\203\344\271\240\351\242\230/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Promise 练习题

    @@ -123,6 +123,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/Promise-\351\242\230\351\233\206/index.html" "b/docs/Frontend/JavaScript/Promise/Promise-\351\242\230\351\233\206/index.html" index 83f5a745..c0269baa 100644 --- "a/docs/Frontend/JavaScript/Promise/Promise-\351\242\230\351\233\206/index.html" +++ "b/docs/Frontend/JavaScript/Promise/Promise-\351\242\230\351\233\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/Promise\344\275\277\347\224\250/index.html" "b/docs/Frontend/JavaScript/Promise/Promise\344\275\277\347\224\250/index.html" index 666d8f39..d79a6da5 100644 --- "a/docs/Frontend/JavaScript/Promise/Promise\344\275\277\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/Promise/Promise\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器的常驻线程

    @@ -89,6 +89,6 @@

    Promise.allSettled()

    当有多个彼此不依赖的异步任务完成时，或者需要知道每个Promise的结果，通常使用Promise.allSettled。

    const promise1 = Promise.resolve(3);
    const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));

    Promise.allSettled([promise1, promise2]).then((results) => results.forEach((result) => console.log(result.status)));

    Node 读取文件的 Promise 示例

    -
    const fs = require('fs');

    function readFile(pathname) {
      return new Promise((resolve, reject) => {
        fs.readFile(pathname, 'utf-8', (err, data) => {
          if (err) {
            reject(err);
            return;
          }
          resolve(data);
        });
      });
    }

    readFile('./name.txt')
      .then((res) => readFile(res))
      .then((res) => readFile(res))
      .then((res) => console.log(res)); // 输出: 100
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const fs = require('fs');

    function readFile(pathname) {
      return new Promise((resolve, reject) => {
        fs.readFile(pathname, 'utf-8', (err, data) => {
          if (err) {
            reject(err);
            return;
          }
          resolve(data);
        });
      });
    }

    readFile('./name.txt')
      .then((res) => readFile(res))
      .then((res) => readFile(res))
      .then((res) => console.log(res)); // 输出: 100
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/Promise\345\211\215\347\275\256\347\237\245\350\257\206/index.html" "b/docs/Frontend/JavaScript/Promise/Promise\345\211\215\347\275\256\347\237\245\350\257\206/index.html" index 8569dbe3..2bd6324a 100644 --- "a/docs/Frontend/JavaScript/Promise/Promise\345\211\215\347\275\256\347\237\245\350\257\206/index.html" +++ "b/docs/Frontend/JavaScript/Promise/Promise\345\211\215\347\275\256\347\237\245\350\257\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    异步编程与 Promise

    @@ -62,6 +62,6 @@ 

    const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 100, 'foo');
    });

    Promise.all([promise1, promise2, promise3]).then((values) => {
      console.log(values); // 输出: [3, 42, "foo"]
    });

    -

    通过合理使用 Promise，可以编写出更清晰、可维护的异步代码，提高代码的健壮性和可读性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过合理使用 Promise，可以编写出更清晰、可维护的异步代码，提高代码的健壮性和可读性。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/Promise\346\241\210\344\276\213/index.html" "b/docs/Frontend/JavaScript/Promise/Promise\346\241\210\344\276\213/index.html" index fa7fecb1..09c6a643 100644 --- "a/docs/Frontend/JavaScript/Promise/Promise\346\241\210\344\276\213/index.html" +++ "b/docs/Frontend/JavaScript/Promise/Promise\346\241\210\344\276\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    异步编程实践

    @@ -43,6 +43,6 @@

    使用 reduce 实现 Promise 队列​

    reduce方法提供了一种更简洁的方式来实现 Promise 队列。以下是一个示例：

    function executeQueue(tasks) {
      tasks.reduce((promiseChain, currentTask) => {
        return promiseChain.then(() => {
          return new Promise((resolve) => {
            setTimeout(() => {
              console.log(currentTask);
              resolve();
            }, 1000);
          });
        });
      }, Promise.resolve());
    }

    executeQueue([1, 2, 3, 4, 5]);
    -

    通过reduce，每个任务在前一个任务完成后执行，确保任务按顺序执行。这种方法简洁且易于理解。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过reduce，每个任务在前一个任务完成后执行，确保任务按顺序执行。这种方法简洁且易于理解。

    \ No newline at end of file diff --git a/docs/Frontend/JavaScript/Promise/async-await/index.html b/docs/Frontend/JavaScript/Promise/async-await/index.html index a967bd65..0ae4ecbc 100644 --- a/docs/Frontend/JavaScript/Promise/async-await/index.html +++ b/docs/Frontend/JavaScript/Promise/async-await/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    async/await 与 Promise 的对比

    @@ -58,6 +58,6 @@

    总结
    编辑此页
    最后由 sumingcheng 于 更新

    +

    在实际开发中,我们应该根据具体的需求选择使用 Promise 还是 async/await。对于一些简单的异步操作,使用 Promise 可能更加方便。而对于一些复杂的异步操作,使用 async/await 可以让代码更加清晰和易于阅读。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/\345\244\204\347\220\206Promise\344\270\255\347\232\204\345\274\202\346\255\245\345\222\214\351\223\276\345\274\217\350\260\203\347\224\250/index.html" "b/docs/Frontend/JavaScript/Promise/\345\244\204\347\220\206Promise\344\270\255\347\232\204\345\274\202\346\255\245\345\222\214\351\223\276\345\274\217\350\260\203\347\224\250/index.html" index 44b16896..a646f53e 100644 --- "a/docs/Frontend/JavaScript/Promise/\345\244\204\347\220\206Promise\344\270\255\347\232\204\345\274\202\346\255\245\345\222\214\351\223\276\345\274\217\350\260\203\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/Promise/\345\244\204\347\220\206Promise\344\270\255\347\232\204\345\274\202\346\255\245\345\222\214\351\223\276\345\274\217\350\260\203\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Promise 实现与链式调用

    @@ -31,6 +31,6 @@

    失败

    实现链式调用​

    为了实现链式调用，需要在then方法中返回this或返回一个新的Promise实例。以下是实现链式调用的示例：

    then(onFulfilled, onRejected) {
      return new MyPromise((resolve, reject) => {
        if (this.status === FULFILLED) {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }
        if (this.status === REJECTED) {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }
        if (this.status === PENDING) {
          this.onFulfilledCallbacks.push(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          });
          this.onRejectedCallbacks.push(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          });
        }
      });
    }
    -

    通过返回一个新的Promise实例，可以在then方法后继续调用其他then方法，实现链式调用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过返回一个新的Promise实例，可以在then方法后继续调用其他then方法，实现链式调用。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/\345\256\236\347\216\260Promise\345\221\250\350\276\271\346\226\271\346\263\225/index.html" "b/docs/Frontend/JavaScript/Promise/\345\256\236\347\216\260Promise\345\221\250\350\276\271\346\226\271\346\263\225/index.html" index 8730c093..93c75d64 100644 --- "a/docs/Frontend/JavaScript/Promise/\345\256\236\347\216\260Promise\345\221\250\350\276\271\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/JavaScript/Promise/\345\256\236\347\216\260Promise\345\221\250\350\276\271\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用 promises-aplus-tests 进行 Promise 实现测试

    @@ -44,6 +44,6 @@

    链式调

    错误处理​

    在执行 executor 函数时，捕获任何异常并调用 reject，确保错误能够被正确传递和处理。

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
    -

    通过遵循这些最佳实践，你可以构建一个健壮且符合规范的 Promise 实现。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过遵循这些最佳实践，你可以构建一个健壮且符合规范的 Promise 实现。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/\347\220\206\350\247\243Promises-A-\350\247\204\350\214\203/index.html" "b/docs/Frontend/JavaScript/Promise/\347\220\206\350\247\243Promises-A-\350\247\204\350\214\203/index.html" index 833920e1..59d1b8b8 100644 --- "a/docs/Frontend/JavaScript/Promise/\347\220\206\350\247\243Promises-A-\350\247\204\350\214\203/index.html" +++ "b/docs/Frontend/JavaScript/Promise/\347\220\206\350\247\243Promises-A-\350\247\204\350\214\203/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    实现简单的 Promise

    @@ -50,6 +50,6 @@

    注意事

  • 状态不可逆转: 一旦 Promise 的状态从 PENDING 转变为 FULFILLED 或 REJECTED，就不能再次改变状态。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/Promise/\350\277\255\344\273\243\345\231\250-\347\224\237\346\210\220\345\231\250/index.html" "b/docs/Frontend/JavaScript/Promise/\350\277\255\344\273\243\345\231\250-\347\224\237\346\210\220\345\231\250/index.html" index 798533ce..14df2d2a 100644 --- "a/docs/Frontend/JavaScript/Promise/\350\277\255\344\273\243\345\231\250-\347\224\237\346\210\220\345\231\250/index.html" +++ "b/docs/Frontend/JavaScript/Promise/\350\277\255\344\273\243\345\231\250-\347\224\237\346\210\220\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    生成器与迭代器

    @@ -44,6 +44,6 @@

    next 赋

    对象的迭代​

    使用生成器函数可以简化对象的迭代器实现，无需显式地返回值。

    -
    const obj = {
      a: 1,
      b: 2,
      c: 3,
      *[Symbol.iterator]() {
        const entries = Object.entries(this);
        for (const entry of entries) {
          yield entry;
        }
      },
    };

    for (const entry of obj) {
      console.log(entry);
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const obj = {
      a: 1,
      b: 2,
      c: 3,
      *[Symbol.iterator]() {
        const entries = Object.entries(this);
        for (const entry of entries) {
          yield entry;
        }
      },
    };

    for (const entry of obj) {
      console.log(entry);
    }
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Blob\345\257\271\350\261\241/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Blob\345\257\271\350\261\241/index.html" index ada846a6..f2cb3268 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Blob\345\257\271\350\261\241/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Blob\345\257\271\350\261\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Blob 对象

    @@ -41,6 +41,6 @@

    大文件分割

    在这个示例中，我们定义了一个splitFile()函数，用于将文件分割成指定大小的块。函数接收两个参数：要分割的文件对象和每个块的大小（以字节为单位）。函数内部使用file.slice()方法对文件进行分割，并将分割后的块存储在一个数组中返回。

    在使用示例中，我们监听文件选择器的change事件，获取用户选择的文件对象，然后调用splitFile()函数将文件分割成每个大小为 1MB 的块，最后将分割后的块数组打印到控制台。

    通过将大文件分割成小块，我们可以逐个读取或上传这些块，避免一次性处理大文件导致的性能问题。

    -

    Blob 对象为前端操作文件提供了强大的支持。通过使用 Blob 对象，我们可以实现文件的下载、上传、分割等功能，并与其他 Web API（如 FileReader、URL.createObjectURL()等）配合使用，以满足各种文件操作的需求。合理利用 Blob 对象可以提升 Web 应用程序的文件处理能力和用户体验。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Blob 对象为前端操作文件提供了强大的支持。通过使用 Blob 对象，我们可以实现文件的下载、上传、分割等功能，并与其他 Web API（如 FileReader、URL.createObjectURL()等）配合使用，以满足各种文件操作的需求。合理利用 Blob 对象可以提升 Web 应用程序的文件处理能力和用户体验。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class/index.html" index dcfc8542..5a67c4ee 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    原型

    @@ -53,6 +53,6 @@

    super

    在子类的构造函数中，必须先调用super()方法才能使用this关键字。super()方法会执行父类的构造函数，并将参数传递给父类的构造函数。

    // 父类
    class Parent {
      constructor(name = 'zs') {
        this.name = name;
      }
    }

    // 子类
    class Child extends Parent {
      constructor(name = 'ls', age) {
        // 调用父类的构造函数
        super(name);
        this.age = age;
        this.type = '儿子';
      }
    }

    console.log(new Child()); // Child { name: 'ls', age: undefined, type: '儿子' }

    在这个示例中，Child类的构造函数中通过super(name)调用了父类Parent的构造函数，并传递了name参数。这样，Child类的实例就会继承父类的name属性，并且可以添加自己的age和type属性。

    -

    super关键字还可以用于调用父类的方法。在子类中，可以通过super.method()来调用父类的方法。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    super关键字还可以用于调用父类的方法。在子类中，可以通过super.method()来调用父类的方法。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class\347\232\204\344\275\277\347\224\250/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class\347\232\204\344\275\277\347\224\250/index.html" index 2aebcd91..a869d12c 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class\347\232\204\344\275\277\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Class\347\232\204\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Class super 关键字

    @@ -51,6 +51,6 @@

    类的成员

    在这个示例中，我们定义了一个MyClass类，它包含了实例属性instanceProperty、静态属性staticProperty和私有属性#privateProperty。

    我们还定义了实例方法instanceMethod()、静态方法staticMethod()和私有方法#privateMethod()。

    此外，我们还使用访问器属性accessorProperty来访问和修改私有属性#privateProperty的值。

    -

    通过创建MyClass的实例对象myInstance，我们可以访问实例属性和方法。静态属性和方法可以直接通过类名MyClass来访问。私有属性和方法只能在类的内部访问，外部无法直接访问，但可以通过访问器属性来间接访问和修改。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过创建MyClass的实例对象myInstance，我们可以访问实例属性和方法。静态属性和方法可以直接通过类名MyClass来访问。私有属性和方法只能在类的内部访问，外部无法直接访问，但可以通过访问器属性来间接访问和修改。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/ESModule/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/ESModule/index.html" index e2db32d5..02f4a946 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/ESModule/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/ESModule/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    ESModule 模块化

    @@ -43,6 +43,6 @@

    HTMLapp.js​

    import math from './math';
    const { add, minus, multiply, divide } = math;

    (() => {
      const num1Input = document.querySelector('#num1');
      const num2Input = document.querySelector('#num2');
      const buttonGroup = document.querySelector('.button-group');
      const resultText = document.querySelector('#result');

      const init = () => {
        bindEvents();
      };

      function bindEvents() {
        buttonGroup.addEventListener('click', handleButtonClick, false);
      }

      function handleButtonClick(e) {
        const target = e.target;
        const tagName = target.tagName.toLowerCase();
        if (tagName === 'button') {
          const operator = target.innerText;
          resultText.innerText = calculate(operator);
        }
      }

      function calculate(operator) {
        const num1 = Number(num1Input.value);
        const num2 = Number(num2Input.value);

        switch (operator) {
          case '+':
            return add(num1, num2);
          case '-':
            return minus(num1, num2);
          case '*':
            return multiply(num1, num2);
          case '/':
            return divide(num1, num2);
          default:
            return '';
        }
      }

      init();
    })();

    在上面的代码中,我们将数学运算函数单独放在math模块中,并在app.js中导入使用。当点击计算器的运算符按钮时,会动态计算两个输入框的值,并将结果显示在resultText元素上。

    -

    这个案例虽然简单,但很好地展示了如何使用 ESModule 进行模块化开发。将不同功能的代码划分到独立的模块中,可以提高代码的可维护性和可重用性。在实际项目中,我们可以将复杂的业务逻辑、通用工具函数等封装成模块,在需要的地方导入使用,使代码结构更加清晰。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这个案例虽然简单,但很好地展示了如何使用 ESModule 进行模块化开发。将不同功能的代码划分到独立的模块中,可以提高代码的可维护性和可重用性。在实际项目中,我们可以将复杂的业务逻辑、通用工具函数等封装成模块,在需要的地方导入使用,使代码结构更加清晰。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/JavaScript\347\232\204\346\211\247\350\241\214\346\234\272\345\210\266/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/JavaScript\347\232\204\346\211\247\350\241\214\346\234\272\345\210\266/index.html" index 4ce26d44..5ae73ff1 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/JavaScript\347\232\204\346\211\247\350\241\214\346\234\272\345\210\266/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/JavaScript\347\232\204\346\211\247\350\241\214\346\234\272\345\210\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JavaScript 执行机制详解

    @@ -97,6 +97,6 @@ 

    console.log(1);
    setTimeout(() => {
      console.log(2);
    }, 0);
    console.log(3);

    -

    实际执行顺序是 1 -> 3 -> 2,因为同步代码总是优先执行。setTimeout 的回调函数被放入下一轮的宏任务队列,要等到本轮的同步代码和微任务都执行完才会执行。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    实际执行顺序是 1 -> 3 -> 2,因为同步代码总是优先执行。setTimeout 的回调函数被放入下一轮的宏任务队列,要等到本轮的同步代码和微任务都执行完才会执行。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Object/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Object/index.html" index aec1da42..f6748713 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Object/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/Object/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Object 对象

    @@ -112,6 +112,6 @@

    对象 
    const v1 = 'abc';
    const v2 = true;
    const v3 = 123;
    const v4 = Symbol('foo');
    const obj = Object.assign({}, v1, v2, v3, v4);
    console.log(obj);
    // { '0': 'a', '1': 'b', '2': 'c', [Symbol(foo)]: true }

    Object.assign() 执行的是浅拷贝,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

    const source = { a: { b: 1 } };
    const target = {};
    Object.assign(target, source);

    source.a.b = 2;
    console.log(target.a.b); // 2
    -

    所以在实际项目中使用 Object.assign() 进行对象合并时,一定要注意是否有嵌套的对象存在,以免出现意料之外的修改。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    所以在实际项目中使用 Object.assign() 进行对象合并时,一定要注意是否有嵌套的对象存在,以免出现意料之外的修改。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/WeakMap\344\270\216WeakSet-proxy\344\270\216reflect/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/WeakMap\344\270\216WeakSet-proxy\344\270\216reflect/index.html" index ca080979..1ad1de58 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/WeakMap\344\270\216WeakSet-proxy\344\270\216reflect/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/WeakMap\344\270\216WeakSet-proxy\344\270\216reflect/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    WeakMap 与 WeakSet、Proxy 与 Reflect

    @@ -44,6 +44,6 @@

    Prox

    下面是一个使用 Reflect 实现观察者模式的例子:

    const queuedObservers = new Set();

    const observe = (fn) => queuedObservers.add(fn);
    const observable = (obj) => new Proxy(obj, { set });

    function set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      queuedObservers.forEach((observer) => observer());
      return result;
    }

    const person = observable({
      name: '张三',
      age: 20,
    });

    function print() {
      console.log(`${person.name}, ${person.age}`);
    }

    observe(print);
    person.name = '李四';
    // 输出
    // 李四, 20

    上面代码中,数据对象 person 是观察目标,函数 print 是观察者。一旦数据对象发生变化,print 就会自动执行。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/arguments/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/arguments/index.html" index 37926447..db19d360 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/arguments/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/arguments/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Arguments

    @@ -42,6 +42,6 @@

    严格模式下的 arguments​

    在严格模式下，arguments对象和形参不再存在同步关系，修改一个不会影响另一个。

    function test(a, b, c) {
      'use strict';
      (a = 10), (b = 20), (c = 30);
      console.log(a, b, c); // 10 20 30
      console.log(arguments); // [1, 2, 3]
    }

    test(1, 2, 3);
    -

    arguments对象是 JavaScript 函数中一个独特的存在，它提供了一种访问函数实参的方式。合理使用arguments对象可以使函数更加灵活和通用，但也要注意避免滥用导致性能问题。在现代 JavaScript 中，越来越多地使用 rest 参数和解构赋值来处理函数参数，减少了对arguments对象的依赖。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    arguments对象是 JavaScript 函数中一个独特的存在，它提供了一种访问函数实参的方式。合理使用arguments对象可以使函数更加灵活和通用，但也要注意避免滥用导致性能问题。在现代 JavaScript 中，越来越多地使用 rest 参数和解构赋值来处理函数参数，减少了对arguments对象的依赖。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/if-\344\270\255\347\232\204\345\207\275\346\225\260\345\243\260\346\230\216/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/if-\344\270\255\347\232\204\345\207\275\346\225\260\345\243\260\346\230\216/index.html" index 7d88fdee..6e6acdda 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/if-\344\270\255\347\232\204\345\207\275\346\225\260\345\243\260\346\230\216/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/if-\344\270\255\347\232\204\345\207\275\346\225\260\345\243\260\346\230\216/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    if 中的函数声明与存储混乱问题

    @@ -55,6 +55,6 @@ 

    if (true) {
      var a = function () {};
    }

    编辑此页
    最后由 sumingcheng 于 更新
    +
    if (true) {
      var a = function () {};
    }
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/parseInt/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/parseInt/index.html" index 3abd02c0..57f7be56 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/parseInt/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/parseInt/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    parseInt 函数详解

    @@ -48,6 +48,6 @@

    严

    使用^和$限定字符串的开头和结尾,只允许出现整数字符。 允许出现+和-符号,但必须在开头。 使用\d+匹配一或多个数字,同时也允许出现 Infinity。 -最后用 Number 将字符串转换为数字类型。

    编辑此页
    最后由 sumingcheng 于 更新
    +最后用 Number 将字符串转换为数字类型。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\344\270\213\350\275\275\346\226\207\344\273\266\347\261\273\345\236\213/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\344\270\213\350\275\275\346\226\207\344\273\266\347\261\273\345\236\213/index.html" index 38af2ead..807c2e84 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\344\270\213\350\275\275\346\226\207\344\273\266\347\261\273\345\236\213/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\344\270\213\350\275\275\346\226\207\344\273\266\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    常见文件类型及其 MIME 类型

    @@ -28,6 +28,6 @@

    最佳实

    尽可能使用压缩格式的文件，如 JPEG、PNG、WebP 等，以减小文件大小和加快加载速度。

    对于文本类型的文件，如 CSS、JavaScript、JSON 等，可以启用 Gzip 压缩以进一步减小传输大小。

    正确设置文件的 MIME 类型，以确保浏览器能够正确处理文件。

    -

    对于不常更新的静态文件，可以设置较长的缓存时间，以减少不必要的网络请求。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    对于不常更新的静态文件，可以设置较长的缓存时间，以减少不必要的网络请求。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\216\237\345\236\213\351\223\276-\347\273\247\346\211\277-\347\261\273/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\216\237\345\236\213\351\223\276-\347\273\247\346\211\277-\347\261\273/index.html" index 99f5f9b5..1cedd4fe 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\216\237\345\236\213\351\223\276-\347\273\247\346\211\277-\347\261\273/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\216\237\345\236\213\351\223\276-\347\273\247\346\211\277-\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    原型、继承与类

    @@ -58,6 +58,6 @@

    class
    class Super {
      constructor() {
        this.a = [1, 2, 3];
      }
      foo() {
        console.log('foo');
      }
    }

    class Sub extends Super {
      constructor() {
        super();
      }
    }

    const sub1 = new Sub();
    const sub2 = new Sub();
    sub1.a.push(4);
    console.log(sub1.a); // [1, 2, 3, 4]
    console.log(sub2.a); // [1, 2, 3]
    sub1.foo(); // foo

    -

    虽然 class 为 JavaScript 的面向对象编程提供了更友好的语法,但我们仍需深入理解其背后的原型和继承机制。只有这样,才能在复杂场景下灵活运用、游刃有余。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    虽然 class 为 JavaScript 的面向对象编程提供了更友好的语法,但我们仍需深入理解其背后的原型和继承机制。只有这样,才能在复杂场景下灵活运用、游刃有余。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245-\351\230\273\345\241\236\344\270\216\351\235\236\351\230\273\345\241\236/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245-\351\230\273\345\241\236\344\270\216\351\235\236\351\230\273\345\241\236/index.html" index fc702e64..a57e68ff 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245-\351\230\273\345\241\236\344\270\216\351\235\236\351\230\273\345\241\236/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245-\351\230\273\345\241\236\344\270\216\351\235\236\351\230\273\345\241\236/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    同步异步与阻塞非阻塞

    @@ -37,6 +37,6 @@

    异步

    异步非阻塞是最高效的组合方式。调用方发起调用后可以继续执行其他任务,被调用方通过事件通知或回调等机制来通知调用方。

    至于另外两种组合方式

    同步非阻塞: 调用方等待结果返回,但不阻塞后续代码执行。这在实际编程中很难实现,因为如果不阻塞,调用方很可能就拿不到需要的结果了。

    -

    异步阻塞: 调用方发起调用后,一直等待结果返回,但实际上执行顺序和代码顺序无关。这也是一种非常罕见的情况,没有太多实际意义。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    异步阻塞: 调用方发起调用后,一直等待结果返回,但实际上执行顺序和代码顺序无关。这也是一种非常罕见的情况,没有太多实际意义。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\345\212\240\350\275\275-\344\274\201\344\270\232\347\272\247\345\274\202\346\255\245\345\212\240\350\275\275/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\345\212\240\350\275\275-\344\274\201\344\270\232\347\272\247\345\274\202\346\255\245\345\212\240\350\275\275/index.html" index 39db5cd9..73c39b67 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\345\212\240\350\275\275-\344\274\201\344\270\232\347\272\247\345\274\202\346\255\245\345\212\240\350\275\275/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\345\212\240\350\275\275-\344\274\201\344\270\232\347\272\247\345\274\202\346\255\245\345\212\240\350\275\275/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    异步加载最佳实践

    @@ -49,6 +49,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    总之,异步加载 JavaScript 是提升网页性能的重要手段。我们应根据实际情况,选择合适的异步加载方式,让用户尽快看到页面主要内容。同时也要注意异步脚本的执行顺序和依赖关系,确保网页功能正常运作。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\223\215\344\275\234\345\257\271\350\261\241/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\223\215\344\275\234\345\257\271\350\261\241/index.html" index b3018c8e..9ecbd993 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\223\215\344\275\234\345\257\271\350\261\241/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\223\215\344\275\234\345\257\271\350\261\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    对象操作

    @@ -82,6 +82,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    通过Object.defineProperty或Object.defineProperties方法可以定义这些属性特性。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\224\276\345\244\247\351\225\234\346\225\210\346\236\234/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\224\276\345\244\247\351\225\234\346\225\210\346\236\234/index.html" index 55a24923..b9831bfb 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\224\276\345\244\247\351\225\234\346\225\210\346\236\234/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\224\276\345\244\247\351\225\234\346\225\210\346\236\234/index.html" @@ -11,13 +11,13 @@ - - + +
    跳到主要内容
    +

    JavaScript-practise/DOM/放大镜效果 at main · sumingcheng/JavaScript-practise

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\346\215\256\347\274\223\345\255\230-\345\211\215\347\253\257\347\274\223\345\255\230\346\261\240/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\346\215\256\347\274\223\345\255\230-\345\211\215\347\253\257\347\274\223\345\255\230\346\261\240/index.html" index 26263889..cb6f1b83 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\346\215\256\347\274\223\345\255\230-\345\211\215\347\253\257\347\274\223\345\255\230\346\261\240/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\346\215\256\347\274\223\345\255\230-\345\211\215\347\253\257\347\274\223\345\255\230\346\261\240/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    前端数据缓存池技术

    @@ -45,6 +45,6 @@ 

    var dataDiv = document.getElementById('dataDiv').innerHTML;
    var tplDiv = document.getElementById('tpl').innerHTML;
    var contentDiv = document.getElementsByClassName('content')[0];
    var data = JSON.parse(dataDiv);

    function render() {
      var html = '';
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        html += renderItem(item);
      }
      contentDiv.innerHTML = html;
    }

    function renderItem(item) {
      return tplDiv.replace(/{{(.*?)}}/gim, function (match, key) {
        return item[key];
      });
    }

    render();

    -

    以上就是两种在前端实现数据缓存池的常用技术。合理使用数据缓存,可以减少不必要的网络请求,提升页面性能和用户体验。在实际项目中,还要注意数据更新的问题,必要时需要重新向服务器请求最新数据。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    以上就是两种在前端实现数据缓存池的常用技术。合理使用数据缓存,可以减少不必要的网络请求,提升页面性能和用户体验。在实际项目中,还要注意数据更新的问题,必要时需要重新向服务器请求最新数据。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\216\273\351\207\215\350\213\245\345\271\262\346\226\271\346\263\225/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\216\273\351\207\215\350\213\245\345\271\262\346\226\271\346\263\225/index.html" index 8da75b38..f669a2b6 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\216\273\351\207\215\350\213\245\345\271\262\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\216\273\351\207\215\350\213\245\345\271\262\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组去重的几种方法

    @@ -48,6 +48,6 @@

    Objec

    利用 Object 的键值对特性也可以实现数组去重。将数组元素作为 Object 的键,值设为任意。由于 Object 的键不能重复,所以最终得到的就是一个去重后的对象。

    function uniqueArray(arr) {
      let obj = {};

      arr.forEach((item) => {
        obj[item] = 0;
      });

      return Object.keys(obj);
    }

    let arr = [1, 1, 2, 3, 4, 5, 6, 6, 6, 7, 8, 8, 8, 9, 9, 0, 0];
    console.log(uniqueArray(arr));

    遍历数组,将元素作为键放入对象中。最后通过 Object.keys 取出对象的键即可得到去重后的数组。

    -

    这种方法的时间复杂度为 O(n),但结果数组为字符串数组。如果需要转换为数字数组,还需要进行一次类型转换。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这种方法的时间复杂度为 O(n),但结果数组为字符串数组。如果需要转换为数字数组,还需要进行一次类型转换。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\217\230\346\233\264\346\243\200\346\265\213\346\226\271\346\241\210\345\210\206\346\236\220/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\217\230\346\233\264\346\243\200\346\265\213\346\226\271\346\241\210\345\210\206\346\236\220/index.html" index 0f22a660..55d46bda 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\217\230\346\233\264\346\243\200\346\265\213\346\226\271\346\241\210\345\210\206\346\236\220/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\225\260\347\273\204\345\217\230\346\233\264\346\243\200\346\265\213\346\226\271\346\241\210\345\210\206\346\236\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue2 中数组的变更检测

    @@ -37,6 +37,6 @@ 

    const App = {
      data() {
        return {
          list: [1, 2, 3, 4, 5],
        };
      },
      template: `
        <div>
          <span v-for="n in list" :key="n">{{ n }}</span>
          <button @click="operateList">Operate List</button>
        </div>
      `,
      methods: {
        operateList() {
          this.list = this.list.concat(this.list[this.list.length - 1] + 1);
          this.list = this.list.slice(2, 4);
          this.list = this.list.map((item) => item + 1);
        },
      },
    };

    在点击按钮后，list数组经历了一系列的替换操作，但 Vue 会智能地分析新旧list的差异，尽可能地复用已有的 DOM 节点。所以整体的性能开销并不会很大。

    -

    当然，频繁地替换一个巨大的数组，还是会对性能产生一定影响。应该根据实际场景权衡，尽量避免不必要的整体替换。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    当然，频繁地替换一个巨大的数组，还是会对性能产生一定影响。应该根据实际场景权衡，尽量避免不必要的整体替换。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\250\241\345\235\227\345\214\226\345\274\200\345\217\221Todolist/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\250\241\345\235\227\345\214\226\345\274\200\345\217\221Todolist/index.html" index 651cdd37..e2f10c76 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\250\241\345\235\227\345\214\226\345\274\200\345\217\221Todolist/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\250\241\345\235\227\345\214\226\345\274\200\345\217\221Todolist/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    模块化开发 TodoList 应用

    @@ -41,6 +41,6 @@

    面向对象开发 TodoList​

    下面是使用面向对象的思想开发 TodoList 应用的示例代码

    -
    // 待办事项模型
    function TodoItem(options) {
      this.content = options.content;
      this.completed = false;
    }

    TodoItem.prototype = {
      // 切换完成状态
      toggle: function () {
        this.completed = !this.completed;
      },
    };

    // 待办事项列表视图
    function TodoListView(options) {
      this.$el = $(options.el);
      this.todos = options.todos;

      this.initEvents();
      this.render();
    }

    TodoListView.prototype = {
      // 初始化事件
      initEvents: function () {
        this.$el.on('click', '.toggle', this.toggle.bind(this));
        this.$el.on('click', '.remove', this.remove.bind(this));
      },

      // 渲染列表
      render: function () {
        var html = this.todos
          .map(function (todo) {
            return `
            <li>
              <div class="view">
                <input class="toggle" type="checkbox" ${todo.completed ? 'checked' : ''}>
                <label>${todo.content}</label>
                <button class="remove"></button>
              </div>
            </li>
          `;
          })
          .join('');

        this.$el.html(html);
      },

      // 切换完成状态
      toggle: function (e) {
        var index = $(e.target).closest('li').index();
        this.todos[index].toggle();
        this.render();
      },

      // 删除任务
      remove: function (e) {
        var index = $(e.target).closest('li').index();
        this.todos.splice(index, 1);
        this.render();
      },
    };

    // 创建待办事项列表
    var todos = [new TodoItem({ content: '学习 JavaScript' }), new TodoItem({ content: '学习 Vue' }), new TodoItem({ content: '整个牛项目' })];

    // 创建视图实例
    var todoListView = new TodoListView({
      el: '#todoapp',
      todos: todos,
    });
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 待办事项模型
    function TodoItem(options) {
      this.content = options.content;
      this.completed = false;
    }

    TodoItem.prototype = {
      // 切换完成状态
      toggle: function () {
        this.completed = !this.completed;
      },
    };

    // 待办事项列表视图
    function TodoListView(options) {
      this.$el = $(options.el);
      this.todos = options.todos;

      this.initEvents();
      this.render();
    }

    TodoListView.prototype = {
      // 初始化事件
      initEvents: function () {
        this.$el.on('click', '.toggle', this.toggle.bind(this));
        this.$el.on('click', '.remove', this.remove.bind(this));
      },

      // 渲染列表
      render: function () {
        var html = this.todos
          .map(function (todo) {
            return `
            <li>
              <div class="view">
                <input class="toggle" type="checkbox" ${todo.completed ? 'checked' : ''}>
                <label>${todo.content}</label>
                <button class="remove"></button>
              </div>
            </li>
          `;
          })
          .join('');

        this.$el.html(html);
      },

      // 切换完成状态
      toggle: function (e) {
        var index = $(e.target).closest('li').index();
        this.todos[index].toggle();
        this.render();
      },

      // 删除任务
      remove: function (e) {
        var index = $(e.target).closest('li').index();
        this.todos.splice(index, 1);
        this.render();
      },
    };

    // 创建待办事项列表
    var todos = [new TodoItem({ content: '学习 JavaScript' }), new TodoItem({ content: '学习 Vue' }), new TodoItem({ content: '整个牛项目' })];

    // 创建视图实例
    var todoListView = new TodoListView({
      el: '#todoapp',
      todos: todos,
    });
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\267\261\346\213\267\350\264\235\346\212\200\345\267\247\344\270\216WeakMap\347\232\204\344\275\277\347\224\250/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\267\261\346\213\267\350\264\235\346\212\200\345\267\247\344\270\216WeakMap\347\232\204\344\275\277\347\224\250/index.html" index a3f86233..96f9b521 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\267\261\346\213\267\350\264\235\346\212\200\345\267\247\344\270\216WeakMap\347\232\204\344\275\277\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\346\267\261\346\213\267\350\264\235\346\212\200\345\267\247\344\270\216WeakMap\347\232\204\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    深拷贝技巧与 WeakMap 的使用

    @@ -42,6 +42,6 @@ 

    const btn = document.querySelector('#btn');
    btn.addEventListener('click', handleBtnClick, false);

    function handleBtnClick() {}

    // 移除DOM元素时,需要手动解绑事件
    btn.remove();
    handleBtnClick = null;

    利用 WeakMap,我们可以自动清理这些事件监听器:

    -
    const btn = document.querySelector('#btn');
    const listenerMap = new WeakMap();

    listenerMap.set(btn, handleBtnClick);
    btn.addEventListener('click', listenerMap.get(btn), false);

    function handleBtnClick() {}

    // 移除DOM元素时,WeakMap中对应的键值会自动被垃圾回收
    btn.remove();
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const btn = document.querySelector('#btn');
    const listenerMap = new WeakMap();

    listenerMap.set(btn, handleBtnClick);
    btn.addEventListener('click', listenerMap.get(btn), false);

    function handleBtnClick() {}

    // 移除DOM元素时,WeakMap中对应的键值会自动被垃圾回收
    btn.remove();
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\247\206\351\242\221\346\223\215\344\275\234\347\233\270\345\205\263\346\265\201\347\250\213/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\247\206\351\242\221\346\223\215\344\275\234\347\233\270\345\205\263\346\265\201\347\250\213/index.html" index b2de77a3..d9875620 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\247\206\351\242\221\346\223\215\344\275\234\347\233\270\345\205\263\346\265\201\347\250\213/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\247\206\351\242\221\346\223\215\344\275\234\347\233\270\345\205\263\346\265\201\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    视频上传与播放流程

    @@ -58,6 +58,6 @@

    前端播

    大文件切片的意义​

    视频文件通常较大,如果整个文件一次性上传,很容易出现超时失败的情况。而且上传是无状态的,只有文件全部上传完才能知道是否上传成功。

    切片上传可以把大文件分成多个小的文件块,每一块单独上传。这样即使某个切片上传失败,也只需重新上传这一个切片,而不是整个文件重传。同时还可以并发上传多个切片,提高上传速度。

    -

    切片上传为大文件的上传提供了可恢复、可断点续传的能力,是上传大文件的最佳实践之一。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    切片上传为大文件的上传提供了可恢复、可断点续传的能力,是上传大文件的最佳实践之一。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\264\252\345\220\203\350\233\207/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\264\252\345\220\203\350\233\207/index.html" index 2bfecef4..e92871d0 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\264\252\345\220\203\350\233\207/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\264\252\345\220\203\350\233\207/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    键盘事件与贪吃蛇游戏实现

    @@ -42,6 +42,6 @@

    实

    使用文档碎片优化 DOM 操作​

    当我们需要循环创建大量 DOM 元素时,频繁地操作 DOM 会导致性能问题。这时可以使用文档碎片DocumentFragment来优化。示例代码如下:

    var list = document.getElementsByTagName('ul')[0],
      frag = document.createDocumentFragment();

    for (var i = 0; i < 10; i++) {
      var li = document.createElement('li');
      li.innerHTML = 'list item';
      frag.appendChild(li);
    }

    list.appendChild(frag);
    -

    使用文档碎片的好处是,我们可以将需要添加的所有子元素先添加到文档碎片中,最后再一次性将文档碎片添加到实际的 DOM 树,这样就大大减少了 DOM 操作的次数,从而提升性能。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    使用文档碎片的好处是,我们可以将需要添加的所有子元素先添加到文档碎片中,最后再一次性将文档碎片添加到实际的 DOM 树,这样就大大减少了 DOM 操作的次数,从而提升性能。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\276\223\345\205\245\345\217\212\347\212\266\346\200\201\346\224\271\345\217\230\344\272\213\344\273\266/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\276\223\345\205\245\345\217\212\347\212\266\346\200\201\346\224\271\345\217\230\344\272\213\344\273\266/index.html" index 279b3229..4cffe852 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\276\223\345\205\245\345\217\212\347\212\266\346\200\201\346\224\271\345\217\230\344\272\213\344\273\266/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\350\276\223\345\205\245\345\217\212\347\212\266\346\200\201\346\224\271\345\217\230\344\272\213\344\273\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    用户输入事件及状态改变

    @@ -39,6 +39,6 @@ 

    var Test = (function () {
      function Test() {
        // ...
      }
      return Test;
    })();

    -

    将插件的定义放在一个立即执行函数中,最后将插件构造函数作为返回值赋给一个全局变量,这样外部就可以通过这个变量来使用插件了。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    将插件的定义放在一个立即执行函数中,最后将插件构造函数作为返回值赋给一个全局变量,这样外部就可以通过这个变量来使用插件了。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\345\210\222\345\205\245\345\210\222\345\207\272/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\345\210\222\345\205\245\345\210\222\345\207\272/index.html" index 57622231..5411beda 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\345\210\222\345\205\245\345\210\222\345\207\272/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\345\210\222\345\205\245\345\210\222\345\207\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    鼠标滑入滑出、事件代理与 DOM 事件流

    @@ -48,6 +48,6 @@

    DOM 事
  • true:在捕获阶段触发
  • false(默认):在冒泡阶段触发
    • -
    window.addEventListener(
      'click',
      function () {
        console.log('window 捕获');
      },
      true
    );

    document.addEventListener(
      'click',
      function () {
        console.log('document 捕获');
      },
      true
    );

    document.documentElement.addEventListener(
      'click',
      function () {
        console.log('html 捕获');
      },
      true
    );

    document.body.addEventListener(
      'click',
      function () {
        console.log('body 捕获');
      },
      true
    );

    box1.addEventListener(
      'click',
      function () {
        console.log('box1 捕获');
      },
      true
    );

    box2.addEventListener(
      'click',
      function () {
        console.log('box2 捕获');
      },
      true
    );

    box2.addEventListener(
      'click',
      function () {
        console.log('box2 冒泡');
      },
      false
    );

    box1.addEventListener(
      'click',
      function () {
        console.log('box1 冒泡');
      },
      false
    );

    document.body.addEventListener(
      'click',
      function () {
        console.log('body 冒泡');
      },
      false
    );

    document.documentElement.addEventListener(
      'click',
      function () {
        console.log('html 冒泡');
      },
      false
    );

    document.addEventListener(
      'click',
      function () {
        console.log('document 冒泡');
      },
      false
    );

    window.addEventListener(
      'click',
      function () {
        console.log('window 冒泡');
      },
      false
    );

    编辑此页
    最后由 sumingcheng 于 更新
    +
    window.addEventListener(
      'click',
      function () {
        console.log('window 捕获');
      },
      true
    );

    document.addEventListener(
      'click',
      function () {
        console.log('document 捕获');
      },
      true
    );

    document.documentElement.addEventListener(
      'click',
      function () {
        console.log('html 捕获');
      },
      true
    );

    document.body.addEventListener(
      'click',
      function () {
        console.log('body 捕获');
      },
      true
    );

    box1.addEventListener(
      'click',
      function () {
        console.log('box1 捕获');
      },
      true
    );

    box2.addEventListener(
      'click',
      function () {
        console.log('box2 捕获');
      },
      true
    );

    box2.addEventListener(
      'click',
      function () {
        console.log('box2 冒泡');
      },
      false
    );

    box1.addEventListener(
      'click',
      function () {
        console.log('box1 冒泡');
      },
      false
    );

    document.body.addEventListener(
      'click',
      function () {
        console.log('body 冒泡');
      },
      false
    );

    document.documentElement.addEventListener(
      'click',
      function () {
        console.log('html 冒泡');
      },
      false
    );

    document.addEventListener(
      'click',
      function () {
        console.log('document 冒泡');
      },
      false
    );

    window.addEventListener(
      'click',
      function () {
        console.log('window 冒泡');
      },
      false
    );
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\350\241\214\344\270\272\351\242\204\346\265\213\346\212\200\346\234\257/index.html" "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\350\241\214\344\270\272\351\242\204\346\265\213\346\212\200\346\234\257/index.html" index 1d608c9a..39786ce0 100644 --- "a/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\350\241\214\344\270\272\351\242\204\346\265\213\346\212\200\346\234\257/index.html" +++ "b/docs/Frontend/JavaScript/\344\270\223\351\242\230\345\206\205\345\256\271/\351\274\240\346\240\207\350\241\214\344\270\272\351\242\204\346\265\213\346\212\200\346\234\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    鼠标行为预测技术

    @@ -30,6 +30,6 @@

    事件代 
    function Father() {
      this.firstName = '张三';
    }

    Father.prototype.lastName = '法外狂徒';

    function Son() {
      this.firstName = '李四';
    }

    // 直接继承会导致问题
    Son.prototype = Father.prototype;

    Son.prototype.lastName = '守法青年';

    var father = new Father();
    var son = new Son();
    console.log(father.lastName); // 守法青年

    为了解决这个问题,我们可以引入一个中间函数,利用这个函数的 prototype 来过渡。这就是著名的圣杯模式。示例代码

    -
    function Father() {
      this.firstName = '张三';
    }

    Father.prototype.lastName = '法外狂徒';

    function Son() {
      this.firstName = '李四';
    }

    // 引入中间函数作为过渡
    function Bridge() {}
    Bridge.prototype = Father.prototype;
    Son.prototype = new Bridge();

    Son.prototype.lastName = '守法青年';

    var father = new Father();
    var son = new Son();
    console.log(father.lastName); // 法外狂徒
    console.log(son.lastName); // 守法青年

    编辑此页
    最后由 sumingcheng 于 更新
    +
    function Father() {
      this.firstName = '张三';
    }

    Father.prototype.lastName = '法外狂徒';

    function Son() {
      this.firstName = '李四';
    }

    // 引入中间函数作为过渡
    function Bridge() {}
    Bridge.prototype = Father.prototype;
    Son.prototype = new Bridge();

    Son.prototype.lastName = '守法青年';

    var father = new Father();
    var son = new Son();
    console.log(father.lastName); // 法外狂徒
    console.log(son.lastName); // 守法青年
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\344\272\213\344\273\266\347\216\257\347\232\204\350\277\220\350\241\214\346\265\201\347\250\213/index.html" "b/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\344\272\213\344\273\266\347\216\257\347\232\204\350\277\220\350\241\214\346\265\201\347\250\213/index.html" index 2d8d8ac8..aff27536 100644 --- "a/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\344\272\213\344\273\266\347\216\257\347\232\204\350\277\220\350\241\214\346\265\201\347\250\213/index.html" +++ "b/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\344\272\213\344\273\266\347\216\257\347\232\204\350\277\220\350\241\214\346\265\201\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\345\256\217\344\273\273\345\212\241\344\270\216\345\276\256\344\273\273\345\212\241/index.html" "b/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\345\256\217\344\273\273\345\212\241\344\270\216\345\276\256\344\273\273\345\212\241/index.html" index 8d4cb8ff..62daf4c2 100644 --- "a/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\345\256\217\344\273\273\345\212\241\344\270\216\345\276\256\344\273\273\345\212\241/index.html" +++ "b/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\345\256\217\344\273\273\345\212\241\344\270\216\345\276\256\344\273\273\345\212\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    宏任务与微任务

    @@ -67,6 +67,6 @@ 

    Promise.resolve().then(() => console.log('Promise'));

    setTimeout(() => console.log('setTimeout'), 0);

    process.nextTick(() => console.log('nextTick'));

    // 输出顺序:
    // nextTick
    // Promise
    // setTimeout

    编辑此页
    最后由 sumingcheng 于 更新
    +
    Promise.resolve().then(() => console.log('Promise'));

    setTimeout(() => console.log('setTimeout'), 0);

    process.nextTick(() => console.log('nextTick'));

    // 输出顺序:
    // nextTick
    // Promise
    // setTimeout
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\346\265\217\350\247\210\345\231\250\347\232\204\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213/index.html" "b/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\346\265\217\350\247\210\345\231\250\347\232\204\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213/index.html" index 47aec106..e7bed1eb 100644 --- "a/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\346\265\217\350\247\210\345\231\250\347\232\204\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213/index.html" +++ "b/docs/Frontend/JavaScript/\344\272\213\344\273\266\347\216\257/\346\265\217\350\247\210\345\231\250\347\232\204\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器的进程与线程

    @@ -50,6 +50,6 @@

    宏任务一般是由宿主（如浏览器）提供的异步 API 和任务,如整体代码 script、setTimeout、setInterval、UI 渲染等。 微任务通常是由 JavaScript 语言本身提供的 API 产生,如 Promise 的 then 回调、MutationObserver 等。

    在每个宏任务执行完毕后,引擎会检查并执行所有的微任务队列,然后再进入下一个宏任务。这种宏-微的执行模式,保证了微任务的优先级高于宏任务。

    -

    了解浏览器的多进程和多线程架构,有助于我们深入理解页面渲染、JavaScript 执行与事件处理的原理,从而写出更加高效、可靠的 Web 应用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    了解浏览器的多进程和多线程架构,有助于我们深入理解页面渲染、JavaScript 执行与事件处理的原理,从而写出更加高效、可靠的 Web 应用。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\201\217\345\207\275\346\225\260-\345\201\217\345\207\275\346\225\260\344\270\216\346\237\257\351\207\214\345\207\275\346\225\260\347\232\204\345\214\272\345\210\253-\346\203\260\346\200\247\345\207\275\346\225\260/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\201\217\345\207\275\346\225\260-\345\201\217\345\207\275\346\225\260\344\270\216\346\237\257\351\207\214\345\207\275\346\225\260\347\232\204\345\214\272\345\210\253-\346\203\260\346\200\247\345\207\275\346\225\260/index.html" index f5e42f8a..58025b90 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\201\217\345\207\275\346\225\260-\345\201\217\345\207\275\346\225\260\344\270\216\346\237\257\351\207\214\345\207\275\346\225\260\347\232\204\345\214\272\345\210\253-\346\203\260\346\200\247\345\207\275\346\225\260/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\201\217\345\207\275\346\225\260-\345\201\217\345\207\275\346\225\260\344\270\216\346\237\257\351\207\214\345\207\275\346\225\260\347\232\204\345\214\272\345\210\253-\346\203\260\346\200\247\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数的元与偏函数应用

    @@ -62,6 +62,6 @@ 

    function test(type) {
      switch (type) {
        case 1:
          test = function () {
            console.log('Function 1');
          };
          break;
        case 2:
          test = function () {
            console.log('Function 2');
          };
          break;
        case 3:
          test = function () {
            console.log('Function 3');
          };
          break;
        default:
          throw new Error('Invalid type');
      }

      return test();
    }

    test(1); // 输出: Function 1
    test(2); // 输出: Function 2
    test(3); // 输出: Function 3

    在这个示例中,test函数根据传入的type参数选择对应的函数实现,并将自身重新赋值为选择后的函数。这样在之后的调用中就可以直接执行选择后的函数,无需再次进行判断。

    -

    以上就是关于函数元、偏函数以及惰性函数的一些概念和应用示例。它们都是函数式编程中常用的技巧,可以帮助我们更好地组织和优化代码。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    以上就是关于函数元、偏函数以及惰性函数的一些概念和应用示例。它们都是函数式编程中常用的技巧,可以帮助我们更好地组织和优化代码。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213-\347\272\257\345\207\275\346\225\260/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213-\347\272\257\345\207\275\346\225\260/index.html" index e5479f75..b20a772b 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213-\347\272\257\345\207\275\346\225\260/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213-\347\272\257\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数式编程的优点

    @@ -34,6 +34,6 @@

    纯函数
    var arr1 = ['a', 'b', 'b', 'd', 'e'];
    var spArr = arr1.splice(0, 3);

    console.log('arr1:' + arr1); // arr1:d,e
    console.log('spArr:' + spArr); // spArr:a,b,b

    而slice会返回一个新的数组,包含原数组指定位置的元素。它并不会改变原数组,而是创建了一个独立的副本。因此slice是一个纯函数。

    var arr2 = ['a', 'b', 'c', 'd', 'e'];
    var slArr = arr2.slice(0, 3);

    console.log('arr2:' + arr2); // arr2:a,b,c,d,e
    console.log('slArr:' + slArr); // slArr:a,b,c
    -

    在实际编码中,我们应该尽量使用纯函数,减少副作用的产生。对于不可避免的副作用,要有意识地进行控制和管理,将其影响降到最低。只有这样,才能充分发挥函数式编程的优势,提高代码的可读性、可维护性和可测试性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在实际编码中,我们应该尽量使用纯函数,减少副作用的产生。对于不可避免的副作用,要有意识地进行控制和管理,将其影响降到最低。只有这样,才能充分发挥函数式编程的优势,提高代码的可读性、可维护性和可测试性。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\232\204\345\211\257\344\275\234\347\224\250/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\232\204\345\211\257\344\275\234\347\224\250/index.html" index e9b21b37..02863de1 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\232\204\345\211\257\344\275\234\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\232\204\345\211\257\344\275\234\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    副作用

    @@ -68,6 +68,6 @@

    为了消除局部副作用,我们可以将变量限制在函数内部:

    function sumRange(n) {
      let result = 0;
      for (let i = 1; i <= n; i++) {
        result += i;
      }
      return result;
    }

    console.log(sumRange(3)); // 6
    console.log(sumRange(3)); // 6

    现在的sumRange函数已经是纯函数了。每次调用都会返回相同的结果,不再影响外部环境。

    -

    综上所述,副作用是函数式编程中需要重点关注的问题。我们应该尽量写纯函数,减少副作用,提高代码的可测试性和可维护性。对于不可避免的副作用,也要有意识地进行管理和控制,将其影响降到最低。只有这样,才能充分发挥函数式编程的优势,提高代码质量。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    综上所述,副作用是函数式编程中需要重点关注的问题。我们应该尽量写纯函数,减少副作用,提高代码的可测试性和可维护性。对于不可避免的副作用,也要有意识地进行管理和控制,将其影响降到最低。只有这样,才能充分发挥函数式编程的优势,提高代码质量。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\273\204\345\220\210-\347\273\223\345\220\210\345\276\213-pointfree/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\273\204\345\220\210-\347\273\223\345\220\210\345\276\213-pointfree/index.html" index b1dc9fb6..5aa65450 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\273\204\345\220\210-\347\273\223\345\220\210\345\276\213-pointfree/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\347\273\204\345\220\210-\347\273\223\345\220\210\345\276\213-pointfree/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数组合与结合律

    @@ -44,6 +44,6 @@

    Point

    不提及数据:Pointfree 风格意味着永远不必说你的数据(never having to say your data)。

    -

    Pointfree 风格可以使代码更加简洁、可读性更强,并且更容易进行组合和复用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Pointfree 风格可以使代码更加简洁、可读性更强,并且更容易进行组合和复用。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\350\256\260\345\277\206\345\272\224\347\224\250/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\350\256\260\345\277\206\345\272\224\347\224\250/index.html" index 45e19ae3..1496ee82 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\350\256\260\345\277\206\345\272\224\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\350\256\260\345\277\206\345\272\224\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数记忆

    @@ -44,6 +44,6 @@

    应用场

    频繁调用的函数：对于频繁调用的函数，如果计算结果不会改变，使用函数记忆可以缓存计算结果，避免重复计算，提高函数的执行效率。

    -

    函数记忆是一种常见的优化技术，它通过缓存函数的计算结果，避免重复计算，提高函数的执行效率。在实际开发中，我们可以根据具体的场景和需求，选择适当的方式来实现函数记忆，以提高程序的性能和响应速度。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    函数记忆是一种常见的优化技术，它通过缓存函数的计算结果，避免重复计算，提高函数的执行效率。在实际开发中，我们可以根据具体的场景和需求，选择适当的方式来实现函数记忆，以提高程序的性能和响应速度。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\351\230\262\346\212\226-\345\207\275\346\225\260\350\212\202\346\265\201-\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201\347\232\204\345\272\224\347\224\250/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\351\230\262\346\212\226-\345\207\275\346\225\260\350\212\202\346\265\201-\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201\347\232\204\345\272\224\347\224\250/index.html" index 57ebfbc0..d6db2f9b 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\351\230\262\346\212\226-\345\207\275\346\225\260\350\212\202\346\265\201-\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201\347\232\204\345\272\224\347\224\250/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\207\275\346\225\260\351\230\262\346\212\226-\345\207\275\346\225\260\350\212\202\346\265\201-\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201\347\232\204\345\272\224\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    防抖与节流的区别与应用

    @@ -57,6 +57,6 @@

    实现 
    function throttle(func, wait) {
      var context,
        args,
        timeout,
        previous = 0;

      var later = function () {
        previous = Date.now();
        timeout = null;
        func.apply(context, args);
      };

      return function () {
        var now = Date.now();
        var remaining = wait - (now - previous);

        context = this;
        args = arguments;

        if (remaining <= 0 || remaining > wait) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          func.apply(context, args);
        } else if (!timeout) {
          timeout = setTimeout(later, remaining);
        }
      };
    }

    使用示例

    <div id="scroll" style="height: 200px; overflow: auto;">
      <!-- 大量内容 -->
    </div>

    <script>
      var scroll = document.getElementById('scroll');

      var handleScroll = throttle(function () {
        if (scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight) {
          console.log('Reached bottom');
        }
      }, 300);

      scroll.addEventListener('scroll', handleScroll);
    </script>
    -

    在这个示例中,我们为一个滚动容器绑定了scroll事件,每当用户滚动时都会触发handleScroll函数。但是由于使用了节流,handleScroll函数在 300 毫秒内只会执行一次,避免了频繁触发。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个示例中,我们为一个滚动容器绑定了scroll事件,每当用户滚动时都会触发handleScroll函数。但是由于使用了节流,handleScroll函数在 300 毫秒内只会执行一次,避免了频繁触发。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\275\222\347\261\273\345\207\275\346\225\260\345\260\201\350\243\205-\346\241\210\344\276\213/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\275\222\347\261\273\345\207\275\346\225\260\345\260\201\350\243\205-\346\241\210\344\276\213/index.html" index c4b79f4d..13d7029e 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\275\222\347\261\273\345\207\275\346\225\260\345\260\201\350\243\205-\346\241\210\344\276\213/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\345\275\222\347\261\273\345\207\275\346\225\260\345\260\201\350\243\205-\346\241\210\344\276\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数据归类技术

    @@ -44,6 +44,6 @@

    封

    接下来，函数遍历data数组，对于每个数据项，根据classifyType的值进行单一归类或复合归类。单一归类直接判断外键值是否等于当前类别的 ID，复合归类则将外键值按逗号分割成数组，判断当前类别的 ID 是否在数组中。

    最后，函数返回归类后的数据对象classifiedData。

    使用封装后的classifyData函数，我们可以方便地对不同的数据进行归类。上面的代码示例演示了如何使用classifyData函数对人员数据按爱好进行复合归类。

    -

    通过封装归类函数，我们提高了代码的复用性和可维护性。无论是单一归类还是复合归类，都可以使用同一个函数来完成，只需传入不同的参数即可。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过封装归类函数，我们提高了代码的复用性和可维护性。无论是单一归类还是复合归类，都可以使用同一个函数来完成，只需传入不同的参数即可。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\351\253\230\351\230\266\345\207\275\346\225\260-\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226-\345\260\201\350\243\205\346\237\257\351\207\214\345\214\226\345\207\275\346\225\260/index.html" "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\351\253\230\351\230\266\345\207\275\346\225\260-\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226-\345\260\201\350\243\205\346\237\257\351\207\214\345\214\226\345\207\275\346\225\260/index.html" index 39c02d0c..446c9213 100644 --- "a/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\351\253\230\351\230\266\345\207\275\346\225\260-\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226-\345\260\201\350\243\205\346\237\257\351\207\214\345\214\226\345\207\275\346\225\260/index.html" +++ "b/docs/Frontend/JavaScript/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/\351\253\230\351\230\266\345\207\275\346\225\260-\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226-\345\260\201\350\243\205\346\237\257\351\207\214\345\214\226\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    高阶函数

    @@ -74,6 +74,6 @@

    应

    我们可以利用柯里化的思想来封装不同浏览器环境下的事件处理:

    var addEvent = (function () {
      if (window.addEventListener) {
        return function (el, type, fn, capture) {
          el.addEventListener(type, fn, capture);
        };
      } else if (window.attachEvent) {
        return function (el, type, fn) {
          el.attachEvent('on' + type, function () {
            fn.call(el);
          });
        };
      } else {
        return function (el, type, fn) {
          el['on' + type] = fn;
        };
      }
    })();

    var btn = document.getElementById('button');
    addEvent(btn, 'click', function () {
      console.log('Button clicked');
    });

    这里的addEvent函数根据不同的环境,返回不同的事件处理函数。这些函数都接受相同的参数,但内部的实现不同。这样我们就可以统一不同浏览器下的事件处理方式,提高代码的兼容性。

    -

    柯里化是函数式编程中一个非常有用的技巧。通过将多参数函数转换为一系列单参数函数,我们可以更加灵活地组合和复用函数,写出更加简洁和模块化的代码。在实际开发中,合理运用柯里化可以使我们的代码更加优雅和富有表现力。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    柯里化是函数式编程中一个非常有用的技巧。通过将多参数函数转换为一系列单参数函数,我们可以更加灵活地组合和复用函数,写出更加简洁和模块化的代码。在实际开发中,合理运用柯里化可以使我们的代码更加优雅和富有表现力。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-1/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-1/index.html" index 495d5689..2c978e25 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-1/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-1/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JS 中的隐式类型转换1

    @@ -51,6 +51,6 @@ 

    console.log(NaN == NaN); // false
    console.log(true == 1); // true
    console.log(true == '2'); // false, 先把 true 变成 1,而不是把 '2' 变成 true
    console.log(true == ['1']); // true, 先把 true 变成 1, ['1']拆箱成 '1', 再参考规则3
    console.log(true == ['2']); // false, 同上
    console.log(undefined == false); // false, 首先 false 变成 0,然后参考规则4
    console.log(null == false); // false,同上
    console.log(123 == '123'); // true, '123' 会先变成 123
    console.log('' == 0); // true, '' 会首先变成 0
    console.log(null == undefined); // true
    console.log([] == ![]); // true
    // 第一步 ![] 变成 false
    // 第二步 规则2 []==0
    // 第三步 规则5 [].valueOf是0, 0==0 true
    console.log([undefined] == false); // true
    // 规则5 [undefined] toString 变成 '' ''=false
    // 规则2 ''==0
    // 规则3 0==0 true

    JavaScript 类型转换速查表​

    -

    掌握 JavaScript 中的隐式类型转换规则,可以帮助我们理解一些看似"诡异"的代码行为,写出更加严谨和健壮的 JavaScript 程序。在比较两个值时,尽量使用===严格相等运算符,可以避免不必要的类型转换。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    掌握 JavaScript 中的隐式类型转换规则,可以帮助我们理解一些看似"诡异"的代码行为,写出更加严谨和健壮的 JavaScript 程序。在比较两个值时,尽量使用===严格相等运算符,可以避免不必要的类型转换。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-2/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-2/index.html" index cc444a7c..f57947a0 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-2/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-2/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JS 中的隐式类型转换2

    @@ -61,6 +61,6 @@

    undefined 和 null 没有对应的包装类型​

    undefined 和 null 比较特殊,它们没有对应的包装类型,因此不能调用 toString 等方法,否则会抛出错误:

    undefined.toString(); // TypeError: Cannot read property 'toString' of undefined
    null.toString(); // TypeError: Cannot read property 'toString' of null
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-3/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-3/index.html" index 50fa59b5..a906a302 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-3/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS-\351\232\220\345\274\217\347\261\273\345\236\213\350\275\254\346\215\242-3/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JS 中的隐式类型转换 3

    @@ -80,6 +80,6 @@

    引 
    console.log(![]); // false
    console.log(Number([])); // 0
    console.log([] == ![]); // true

    对于空数组 [],![] 的结果为 false。将 [] 转换为数字时,结果为 0。因此,[] == ![] 的结果为 true。

    console.log(Number({})); // NaN
    console.log(!{}); // false
    console.log({} == !{}); // false
    -

    对于空对象 ,Number() 的结果为 NaN,! 的结果为 false。因此, == ! 的结果为 false。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    对于空对象 ,Number() 的结果为 NaN,! 的结果为 false。因此, == ! 的结果为 false。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\275\254\346\215\242\351\227\256\351\242\230/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\275\254\346\215\242\351\227\256\351\242\230/index.html" index e03c417a..b916d6bf 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\275\254\346\215\242\351\227\256\351\242\230/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\275\254\346\215\242\351\227\256\351\242\230/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JavaScript 类型转换问题

    @@ -50,6 +50,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    JavaScript 的类型转换规则有时会让人感到意外和困惑。理解这些特殊情况有助于我们写出更可靠的代码,避免潜在的错误。在比较值时要特别小心,必要时使用 === 进行严格相等比较而不是 ==。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\277\220\347\256\227\347\254\246\344\274\230\345\205\210\347\272\247\350\241\250/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\277\220\347\256\227\347\254\246\344\274\230\345\205\210\347\272\247\350\241\250/index.html" index a871603b..c389f0fe 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\277\220\347\256\227\347\254\246\344\274\230\345\205\210\347\272\247\350\241\250/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/JS\350\277\220\347\256\227\347\254\246\344\274\230\345\205\210\347\272\247\350\241\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JavaScript 运算符优先级详解

    @@ -59,6 +59,6 @@ 

    let sum = a + b;
    let diff = c - d;
    let result = sum * diff;

    3. 注意赋值运算符的优先级​

    赋值运算符的优先级较低,在复合语句中可能会导致意料之外的结果。为了避免混淆,建议将赋值操作单独放在一行。

    -
    let x = y + z;
    x *= 2;
    编辑此页
    最后由 sumingcheng 于 更新
    +
    let x = y + z;
    x *= 2;
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/TortoiseSVN\345\277\275\347\225\245node_modules/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/TortoiseSVN\345\277\275\347\225\245node_modules/index.html" index 219bc151..3b5eb258 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/TortoiseSVN\345\277\275\347\225\245node_modules/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/TortoiseSVN\345\277\275\347\225\245node_modules/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TortoiseSVN忽略node_modules

    @@ -25,6 +25,6 @@

    如果 
    global-ignores = .project .git

    设置

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/new\345\256\236\344\276\213\345\214\226\347\232\204\351\207\215\345\206\231/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/new\345\256\236\344\276\213\345\214\226\347\232\204\351\207\215\345\206\231/index.html" index 63b104ed..42c79f89 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/new\345\256\236\344\276\213\345\214\226\347\232\204\351\207\215\345\206\231/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/new\345\256\236\344\276\213\345\214\226\347\232\204\351\207\215\345\206\231/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    new 实例化的重写

    @@ -35,6 +35,6 @@

    这样我们就实现了new操作符的内部逻辑。下面我们来测试一下:

    -
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    Person.prototype.say = function () {
      console.log('hello');
    };

    var p = Person.new('zhangsan', 18);
    console.log(p); // Person {name: "zhangsan", age: 18}
    p.say(); // hello
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    Person.prototype.say = function () {
      console.log('hello');
    };

    var p = Person.new('zhangsan', 18);
    console.log(p); // Person {name: "zhangsan", age: 18}
    p.say(); // hello
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/prototype\344\270\216constructor/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/prototype\344\270\216constructor/index.html" index 8456ba77..c2af388f 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/prototype\344\270\216constructor/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/prototype\344\270\216constructor/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    prototype proto 和 constructor

    @@ -64,6 +64,6 @@ 

    function Person() {
      this.name = 'Tom';
    }
    Person.prototype = {
      age: 20,
      sayHi: function () {
        console.log('Hi');
      },
      constructor: Person,
    };
    var person = new Person();
    console.log(person);

    -

    这样修改后,Person.prototype.constructor又重新指向了Person构造函数。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这样修改后,Person.prototype.constructor又重新指向了Person构造函数。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/this\346\214\207\345\220\221\347\232\204\346\200\273\347\273\223/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/this\346\214\207\345\220\221\347\232\204\346\200\273\347\273\223/index.html" index 930fd188..f498f5ee 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/this\346\214\207\345\220\221\347\232\204\346\200\273\347\273\223/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/this\346\214\207\345\220\221\347\232\204\346\200\273\347\273\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    this 指向总结

    @@ -71,6 +71,6 @@

    Node.js 
    console.log(this === global); // true

    Worker 环境​

    在 Web Worker 环境中,全局对象是self。

    -
    console.log(this === self); // true
    编辑此页
    最后由 sumingcheng 于 更新
    +
    console.log(this === self); // true
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\344\273\200\344\271\210\346\230\257\350\257\255\346\263\225\347\263\226/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\344\273\200\344\271\210\346\230\257\350\257\255\346\263\225\347\263\226/index.html" index 59f4119f..dd798bb2 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\344\273\200\344\271\210\346\230\257\350\257\255\346\263\225\347\263\226/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\344\273\200\344\271\210\346\230\257\350\257\255\346\263\225\347\263\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    什么是语法糖

    @@ -42,6 +42,6 @@ 

    Integer x = 1; // 自动装箱
    int y = x;     // 自动拆箱

    这其实是编译器自动为我们完成了Integer x = Integer.valueOf(1)和int y = x.intValue()。自动装箱拆箱让基本类型和对象类型的使用更加统一方便。

    总结​

    -

    综上,语法糖是一种方便程序员使用、增强可读性的语法,它不会影响语言的功能,只是换了更便捷的写法,把简化代码的任务交给了编译器。合理使用语法糖可以大大提升编码效率和代码质量。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    综上,语法糖是一种方便程序员使用、增强可读性的语法,它不会影响语言的功能,只是换了更便捷的写法,把简化代码的任务交给了编译器。合理使用语法糖可以大大提升编码效率和代码质量。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204this-this\347\232\204\344\274\230\345\205\210\347\272\247/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204this-this\347\232\204\344\274\230\345\205\210\347\272\247/index.html" index 88046a41..ca0ba3cb 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204this-this\347\232\204\344\274\230\345\205\210\347\272\247/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\347\256\255\345\244\264\345\207\275\346\225\260\347\232\204this-this\347\232\204\344\274\230\345\205\210\347\272\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    箭头函数中的 this 绑定

    @@ -48,6 +48,6 @@

    练习 2: 综合练习​

    function Foo() {
      getName = function () {
        console.log(1);
      };
      return this;
    }
    Foo.getName = function () {
      console.log(2);
    };
    Foo.prototype.getName = function () {
      console.log(3);
    };
    var getName = function () {
      console.log(4);
    };

    function getName() {
      console.log(5);
    }

    Foo.getName(); // 2 (构造函数的静态方法)
    getName(); // 4 (全局的getName函数表达式)
    Foo().getName(); // 1 (Foo()返回this,即window,执行window.getName,输出1)
    getName(); // 1 (window.getName已被Foo内部的getName覆盖)

    new Foo.getName(); // 2 (Foo.getName作为构造函数调用)
    new Foo().getName(); // 3 (Foo实例上的原型方法getName)
    new new Foo().getName(); // 3 (等价于new (new Foo()).getName())
    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\351\227\255\345\214\205\344\270\216\345\233\236\350\260\203/index.html" "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\351\227\255\345\214\205\344\270\216\345\233\236\350\260\203/index.html" index 84975ab1..0611333c 100644 --- "a/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\351\227\255\345\214\205\344\270\216\345\233\236\350\260\203/index.html" +++ "b/docs/Frontend/JavaScript/\345\270\270\350\247\201\351\227\256\351\242\230/\351\227\255\345\214\205\344\270\216\345\233\236\350\260\203/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JavaScript 中的闭包与回调

    @@ -46,6 +46,6 @@

    回调函数经常与闭包一起使用,看下面的例子:

    function compute() {
      let baseNum = 100;
      return function (a, b, type) {
        let result = 0;
        switch (type) {
          case '+':
            result = baseNum + a + b;
            break;
          case '-':
            result = baseNum - a - b;
            break;
          default:
            break;
        }
        console.log(`${a} ${type} ${b} = ${result}`);
      };
    }

    const fn = compute();
    fn(1, 2, '+'); // 输出: 1 + 2 = 103
    fn(1, 2, '-'); // 输出: 1 - 2 = 97

    上面代码中,compute函数返回一个匿名函数,匿名函数形成了闭包,可以访问compute函数的baseNum变量。我们将匿名函数赋值给fn变量,然后调用fn并传入参数。匿名函数根据传入的type参数执行不同的计算,并输出结果。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/every-some-reduce-reduceRight\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/every-some-reduce-reduceRight\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" index 00734b71..b7cbc4ea 100644 --- "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/every-some-reduce-reduceRight\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" +++ "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/every-some-reduce-reduceRight\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    every、some、reduce 和 reduceRight

    @@ -40,6 +40,6 @@

    重

    搜索功能​

    以下是一个实现课程搜索功能的示例：

    <input type="text" id="J_search" placeholder="搜索课程" />
    <ul class="J_list">
      <span>- 暂无数据 -</span>
    </ul>
    <div id="J_data"></div>
    -
    (function (document) {
      const searchInput = document.getElementById('J_search');
      const listElement = document.getElementsByClassName('J_list')[0];

      const initialize = function () {
        bindEvents();
      };

      function bindEvents() {
        searchInput.addEventListener('input', searchCourse, false);
      }

      function searchCourse() {
        const query = this.value.trim();
        if (query.length > 0) {
          const filteredData = filterData(data, query);
          const listHTML = createList(filteredData);
          listElement.innerHTML = listHTML || `<span>暂无数据</span>`;
        } else {
          listElement.innerHTML = `<span>暂无数据</span>`;
        }
      }

      function filterData(data, keyword) {
        return data.reduce(function (accumulator, current) {
          if (current.course.includes(keyword)) {
            accumulator.push(current);
          }
          return accumulator;
        }, []);
      }

      function createList(data) {
        if (!data || data.length === 0) {
          return '';
        }

        return data
          .map(function (item) {
            return `<li>${item.course}</li>`;
          })
          .join('');
      }

      initialize();
    })(document);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    (function (document) {
      const searchInput = document.getElementById('J_search');
      const listElement = document.getElementsByClassName('J_list')[0];

      const initialize = function () {
        bindEvents();
      };

      function bindEvents() {
        searchInput.addEventListener('input', searchCourse, false);
      }

      function searchCourse() {
        const query = this.value.trim();
        if (query.length > 0) {
          const filteredData = filterData(data, query);
          const listHTML = createList(filteredData);
          listElement.innerHTML = listHTML || `<span>暂无数据</span>`;
        } else {
          listElement.innerHTML = `<span>暂无数据</span>`;
        }
      }

      function filterData(data, keyword) {
        return data.reduce(function (accumulator, current) {
          if (current.course.includes(keyword)) {
            accumulator.push(current);
          }
          return accumulator;
        }, []);
      }

      function createList(data) {
        if (!data || data.length === 0) {
          return '';
        }

        return data
          .map(function (item) {
            return `<li>${item.course}</li>`;
          })
          .join('');
      }

      initialize();
    })(document);
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/forEach-filter-map\347\232\204\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/forEach-filter-map\347\232\204\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" index 49792929..502ed289 100644 --- "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/forEach-filter-map\347\232\204\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" +++ "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/forEach-filter-map\347\232\204\344\275\277\347\224\250\344\270\216\351\207\215\345\206\231/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    forEach、filter 和 map

    @@ -62,6 +62,6 @@

    Arra
    • 使用 map 进行不可变操作，避免直接修改原数组。
    • 返回新的对象或值，以保持数据的纯粹性。
      • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226\344\270\216\345\216\273\351\207\215\345\256\236\347\216\260/index.html" "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226\344\270\216\345\216\273\351\207\215\345\256\236\347\216\260/index.html" index cc2c06b2..27b37406 100644 --- "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226\344\270\216\345\216\273\351\207\215\345\256\236\347\216\260/index.html" +++ "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226\344\270\216\345\216\273\351\207\215\345\256\236\347\216\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组扁平化与去重实现

    @@ -44,6 +44,6 @@

    最佳实
  • 利用 Set 进行去重：Set 提供了高效的去重机制，代码简洁。
  • 箭头函数优化排序：使用箭头函数使代码更简洁易读。
    • -

    通过结合这几种方法，可以高效地实现数组的扁平化、去重和排序操作。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过结合这几种方法，可以高效地实现数组的扁平化、去重和排序操作。

    \ No newline at end of file diff --git "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" index 89bdd9c9..ec01e751 100644 --- "a/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" +++ "b/docs/Frontend/JavaScript/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组扩展方法

    数组扩展方法​

    @@ -71,6 +71,6 @@

    最佳实
  • 避免扩展原型：尽量避免扩展原生对象的原型，以防止潜在的命名冲突和性能问题。可以将 flatten 方法作为独立的工具函数实现。
    • function flatten(array) {
      const toString = Object.prototype.toString;

      if (toString.call(array) !== '[object Array]') {
        throw new Error('只有数组可以使用该方法');
      }

      return array.reduce(function (accumulator, elem) {
        if (toString.call(elem) === '[object Array]') {
          return accumulator.concat(flatten(elem));
        } else {
          return accumulator.concat(elem);
        }
      }, []);
    }

    const arr = [1, , 2, [3, , 4, [5, 6], 7], 8, 9];
    const flattenedArr = flatten(arr);
    console.log(flattenedArr);
    -

    通过这种方式，可以避免修改原生对象，同时保持代码的灵活性和可维护性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这种方式，可以避免修改原生对象，同时保持代码的灵活性和可维护性。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/NodeJS\345\237\272\346\234\254\350\256\244\347\237\245/index.html" "b/docs/Frontend/Node/NodeJS\345\237\272\346\234\254\350\256\244\347\237\245/index.html" index 460006ff..29544da3 100644 --- "a/docs/Frontend/Node/NodeJS\345\237\272\346\234\254\350\256\244\347\237\245/index.html" +++ "b/docs/Frontend/Node/NodeJS\345\237\272\346\234\254\350\256\244\347\237\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    NodeJS 基本认知

    @@ -88,6 +88,6 @@

    应用场

    4. 前端工程化

    NodeJS 在前端工程化中扮演着重要的角色。前端项目通常需要进行模块打包、代码转换、资源压缩等工作,这些任务都可以通过 NodeJS 实现。例如,使用 Webpack 进行模块打包,使用 Babel 进行 ES6 代码转换,使用 UglifyJS 进行代码压缩等。

    5. 微服务

    -

    NodeJS 轻量级、可扩展的特点,使其非常适合构建微服务架构。每个微服务可以独立开发、部署和扩展,通过 API 进行通信。NodeJS 的高并发能力和快速启动速度,使得微服务可以快速响应请求,提供高可用的服务。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    NodeJS 轻量级、可扩展的特点,使其非常适合构建微服务架构。每个微服务可以独立开发、部署和扩展,通过 API 进行通信。NodeJS 的高并发能力和快速启动速度,使得微服务可以快速响应请求,提供高可用的服务。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/Node\344\272\213\344\273\266\347\216\257/index.html" "b/docs/Frontend/Node/Node\344\272\213\344\273\266\347\216\257/index.html" index c4a9c218..b6a7b946 100644 --- "a/docs/Frontend/Node/Node\344\272\213\344\273\266\347\216\257/index.html" +++ "b/docs/Frontend/Node/Node\344\272\213\344\273\266\347\216\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Node 事件循环机制

    @@ -49,6 +49,6 @@

    不同 Node.js 版本的差异​

    在 Node.js v10 及更早版本中,微任务的清空时机是在事件循环的阶段切换时。

    而从 Node.js v11 开始,与浏览器的事件循环机制趋于一致,每执行一个宏任务就会清空微任务队列。

    -

    这种差异可能会导致同样的代码在不同版本的 Node.js 中出现不同的执行结果,需要特别注意。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这种差异可能会导致同样的代码在不同版本的 Node.js 中出现不同的执行结果,需要特别注意。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/WebSocket-\344\270\216HTTP\347\232\204\344\270\215\345\220\214-\350\201\212\345\244\251\345\256\244/index.html" "b/docs/Frontend/Node/WebSocket-\344\270\216HTTP\347\232\204\344\270\215\345\220\214-\350\201\212\345\244\251\345\256\244/index.html" index fe9bdb29..b50309ec 100644 --- "a/docs/Frontend/Node/WebSocket-\344\270\216HTTP\347\232\204\344\270\215\345\220\214-\350\201\212\345\244\251\345\256\244/index.html" +++ "b/docs/Frontend/Node/WebSocket-\344\270\216HTTP\347\232\204\344\270\215\345\220\214-\350\201\212\345\244\251\345\256\244/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    GitHub - sumingcheng/NodeChat: NodeChat

    \ No newline at end of file diff --git a/docs/Frontend/Node/commonJS/index.html b/docs/Frontend/Node/commonJS/index.html index f8fd1082..d3226027 100644 --- a/docs/Frontend/Node/commonJS/index.html +++ b/docs/Frontend/Node/commonJS/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CommonJS 模块规范

    @@ -68,6 +68,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Frontend/Node/express-\346\220\255\345\273\272\347\256\200\345\215\225-Web-\346\234\215\345\212\241/index.html" "b/docs/Frontend/Node/express-\346\220\255\345\273\272\347\256\200\345\215\225-Web-\346\234\215\345\212\241/index.html" index 2ed24251..fe9dd9d3 100644 --- "a/docs/Frontend/Node/express-\346\220\255\345\273\272\347\256\200\345\215\225-Web-\346\234\215\345\212\241/index.html" +++ "b/docs/Frontend/Node/express-\346\220\255\345\273\272\347\256\200\345\215\225-Web-\346\234\215\345\212\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Express 搭建简单 Web 服务

    @@ -40,6 +40,6 @@

    配

    现在可以通过 npm start 命令启动应用了。

    测试接口​

    启动应用后,打开浏览器访问 http://localhost:3000/api/list,可以看到返回的 JSON 数据:

    -
    [
      {
        "id": 1,
        "name": "张三",
        "age": 18
      },
      {
        "id": 2,
        "name": "李四",
        "age": 20
      }
    ]
    编辑此页
    最后由 sumingcheng 于 更新
    +
    [
      {
        "id": 1,
        "name": "张三",
        "age": 18
      },
      {
        "id": 2,
        "name": "李四",
        "age": 20
      }
    ]
    \ No newline at end of file diff --git "a/docs/Frontend/Node/node\345\222\214node-sass\347\211\210\346\234\254/index.html" "b/docs/Frontend/Node/node\345\222\214node-sass\347\211\210\346\234\254/index.html" index 15afe443..55d01361 100644 --- "a/docs/Frontend/Node/node\345\222\214node-sass\347\211\210\346\234\254/index.html" +++ "b/docs/Frontend/Node/node\345\222\214node-sass\347\211\210\346\234\254/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Node 与 node-sass 版本对应关系

    @@ -47,6 +47,6 @@

    在开发过程中，如果遇到 Node.js 与 node-sass 版本不兼容的问题，可以采取以下几种解决方案：

    升级或降级 Node.js 版本以匹配所需的 node-sass 版本。
    切换到替代的 Sass 编译器，如 sass 或 dart-sass，它们通常具有更好的兼容性和更新的功能。
    -调整 node-sass 的版本，选择一个与当前 Node.js 版本兼容的版本。

    编辑此页
    最后由 sumingcheng 于 更新
    +调整 node-sass 的版本，选择一个与当前 Node.js 版本兼容的版本。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/npm-E404\351\224\231\350\257\257/index.html" "b/docs/Frontend/Node/npm-E404\351\224\231\350\257\257/index.html" index 2da302de..f4dae1cd 100644 --- "a/docs/Frontend/Node/npm-E404\351\224\231\350\257\257/index.html" +++ "b/docs/Frontend/Node/npm-E404\351\224\231\350\257\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Nodejs 与 NPM 环境清理与重装实践

    @@ -27,6 +27,6 @@

    npmrc 
    prefix = D:\Soft\nodejs\node_global
    cache = D:\Soft\nodejs\node_cache
    registry = "http://registry.npm.taobao.org"

    在此之前，我会确保电脑内不存在其他重复版本的 nodejs，并检查环境变量是否设置正确。完成这些操作后，项目即可正常启动。

    我出现的问题根源​

    -

    我电脑在新安装固态硬盘后仍保留了旧硬盘中的 nodejs，这导致本地存在多份 npmrc 文件。当我搜索整个电脑后，发现 yarn vscode 旧 npm visioStudio 中都存有 npmrc 文件，这些旧残留的配置文件是问题的根源。我删除旧版本的 npm 和 nodejs 并再次仔细检查环境变量，然后重新安装，问题便不再出现。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    我电脑在新安装固态硬盘后仍保留了旧硬盘中的 nodejs，这导致本地存在多份 npmrc 文件。当我搜索整个电脑后，发现 yarn vscode 旧 npm visioStudio 中都存有 npmrc 文件，这些旧残留的配置文件是问题的根源。我删除旧版本的 npm 和 nodejs 并再次仔细检查环境变量，然后重新安装，问题便不再出现。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/npm-yarn-\346\233\264\346\215\242\346\272\220/index.html" "b/docs/Frontend/Node/npm-yarn-\346\233\264\346\215\242\346\272\220/index.html" index 44af7582..39cb891e 100644 --- "a/docs/Frontend/Node/npm-yarn-\346\233\264\346\215\242\346\272\220/index.html" +++ "b/docs/Frontend/Node/npm-yarn-\346\233\264\346\215\242\346\272\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    npm 和 yarn 更换源

    @@ -45,6 +45,6 @@ 

    nrm ls

    切换 npm 源:

    -
    nrm use taobao
    编辑此页
    最后由 sumingcheng 于 更新
    +
    nrm use taobao
    \ No newline at end of file diff --git "a/docs/Frontend/Node/npm-\345\270\270\347\224\250\347\256\200\345\206\231/index.html" "b/docs/Frontend/Node/npm-\345\270\270\347\224\250\347\256\200\345\206\231/index.html" index 9aa360da..d210324c 100644 --- "a/docs/Frontend/Node/npm-\345\270\270\347\224\250\347\256\200\345\206\231/index.html" +++ "b/docs/Frontend/Node/npm-\345\270\270\347\224\250\347\256\200\345\206\231/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    NPM 常用简写命令

    @@ -63,6 +63,6 @@

    如何更新项目依赖​

    在更新项目依赖时，如果遇到某些依赖的 peer dependencies 版本冲突，可以使用以下命令：

    npm install --legacy-peer-deps
    -

    这个命令会忽略 peer dependencies 的版本检查，强制安装依赖。但需要注意，这可能会导致某些依赖出现兼容性问题，因此在更新后务必进行充分的测试。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这个命令会忽略 peer dependencies 的版本检查，强制安装依赖。但需要注意，这可能会导致某些依赖出现兼容性问题，因此在更新后务必进行充分的测试。

    \ No newline at end of file diff --git a/docs/Frontend/Node/package.json/index.html b/docs/Frontend/Node/package.json/index.html index 7ccd71f4..68a3aec3 100644 --- a/docs/Frontend/Node/package.json/index.html +++ b/docs/Frontend/Node/package.json/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    package.json 文件配置详解

    @@ -140,6 +140,6 @@

    最佳实
  • 维护仓库信息：确保 repository 字段正确指向代码仓库，方便协作和问题追踪。
  • 设置私有包：对于私有项目，设置 private 为 true，防止意外发布到公共仓库。
    • -

    通过遵循这些最佳实践，可以确保 package.json 文件的清晰性和项目的稳定性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过遵循这些最佳实践，可以确保 package.json 文件的清晰性和项目的稳定性。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/\345\210\233\345\273\272\345\255\220\350\277\233\347\250\213/index.html" "b/docs/Frontend/Node/\345\210\233\345\273\272\345\255\220\350\277\233\347\250\213/index.html" index a646353c..5fd590fa 100644 --- "a/docs/Frontend/Node/\345\210\233\345\273\272\345\255\220\350\277\233\347\250\213/index.html" +++ "b/docs/Frontend/Node/\345\210\233\345\273\272\345\255\220\350\277\233\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Node.js 创建子进程的几种方式

    @@ -85,6 +85,6 @@

  • 需要执行一个可执行文件而不是一个命令时。

    • 示例

    -
    const { execFile } = require('child_process');

    execFile('/usr/bin/node', ['--version'], (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error: ${error}`);
        return;
      }
      console.log(`stdout: ${stdout}`);
      console.error(`stderr: ${stderr}`);
    });

    编辑此页
    最后由 sumingcheng 于 更新
    +
    const { execFile } = require('child_process');

    execFile('/usr/bin/node', ['--version'], (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error: ${error}`);
        return;
      }
      console.log(`stdout: ${stdout}`);
      console.error(`stderr: ${stderr}`);
    });
    \ No newline at end of file diff --git "a/docs/Frontend/Node/\347\256\241\347\220\206\346\272\220\345\267\245\345\205\267-nrm/index.html" "b/docs/Frontend/Node/\347\256\241\347\220\206\346\272\220\345\267\245\345\205\267-nrm/index.html" index 09bac531..84195bb2 100644 --- "a/docs/Frontend/Node/\347\256\241\347\220\206\346\272\220\345\267\245\345\205\267-nrm/index.html" +++ "b/docs/Frontend/Node/\347\256\241\347\220\206\346\272\220\345\267\245\345\205\267-nrm/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    nrm 命令使用指南

    @@ -37,6 +37,6 @@

    添加 
    nrm del <registry>

    例如，删除名为custom的源：

    nrm del custom
    -

    通过合理管理 npm 源，可以优化包的下载速度，提高开发效率。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过合理管理 npm 源，可以优化包的下载速度，提高开发效率。

    \ No newline at end of file diff --git "a/docs/Frontend/Node/\347\274\226\350\257\221\350\277\207\347\250\213-IO\346\223\215\344\275\234-node\345\272\224\347\224\250\345\234\272\346\231\257/index.html" "b/docs/Frontend/Node/\347\274\226\350\257\221\350\277\207\347\250\213-IO\346\223\215\344\275\234-node\345\272\224\347\224\250\345\234\272\346\231\257/index.html" index 92f17ba7..37498fee 100644 --- "a/docs/Frontend/Node/\347\274\226\350\257\221\350\277\207\347\250\213-IO\346\223\215\344\275\234-node\345\272\224\347\224\250\345\234\272\346\231\257/index.html" +++ "b/docs/Frontend/Node/\347\274\226\350\257\221\350\277\207\347\250\213-IO\346\223\215\344\275\234-node\345\272\224\347\224\250\345\234\272\346\231\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    NodeJS 执行环境与编译过程

    @@ -50,6 +50,6 @@

    No 数据流处理

    而对于 CPU 密集型的场景,如大量复杂运算的场景,则更适合使用其他语言如 C++来实现,当然也可以通过 NodeJS 调用 C++模块来处理。

    NodeJS 架构​

    -

    画板

    编辑此页
    最后由 sumingcheng 于 更新
    +

    画板

    \ No newline at end of file diff --git "a/docs/Frontend/Node/\351\241\271\347\233\256\346\220\255\345\273\272/index.html" "b/docs/Frontend/Node/\351\241\271\347\233\256\346\220\255\345\273\272/index.html" index e249ed83..3ce7eff0 100644 --- "a/docs/Frontend/Node/\351\241\271\347\233\256\346\220\255\345\273\272/index.html" +++ "b/docs/Frontend/Node/\351\241\271\347\233\256\346\220\255\345\273\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +
    \ No newline at end of file diff --git "a/docs/Frontend/Quasar/Quasar\351\241\271\347\233\256\346\220\255\345\273\272/index.html" "b/docs/Frontend/Quasar/Quasar\351\241\271\347\233\256\346\220\255\345\273\272/index.html" index 6748b5a0..174f8909 100644 --- "a/docs/Frontend/Quasar/Quasar\351\241\271\347\233\256\346\220\255\345\273\272/index.html" +++ "b/docs/Frontend/Quasar/Quasar\351\241\271\347\233\256\346\220\255\345\273\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Quasar CLI

    @@ -27,6 +27,6 @@

    启动项目

    npx quasar dev

    构建生产版本资源

    -
    # 构建生产版本
     quasar build

    # SSR
     quasar build -m ssr

    # PWA
     quasar build -m pwa

    # 手机应用
    quasar build -m [android|ios]

    # 将额外的参数和/或选项传递给
    # 底层“cordova”或“electron”可执行文件：
     quasar build -m ios -- some params --and options --here

    # Electron应用
     quasar build -m electron
    编辑此页
    最后由 sumingcheng 于 更新
    +
    # 构建生产版本
     quasar build

    # SSR
     quasar build -m ssr

    # PWA
     quasar build -m pwa

    # 手机应用
    quasar build -m [android|ios]

    # 将额外的参数和/或选项传递给
    # 底层“cordova”或“electron”可执行文件：
     quasar build -m ios -- some params --and options --here

    # Electron应用
     quasar build -m electron
    \ No newline at end of file diff --git a/docs/Frontend/React/React-props-setState/index.html b/docs/Frontend/React/React-props-setState/index.html index bc0c185b..fd0dae02 100644 --- a/docs/Frontend/React/React-props-setState/index.html +++ b/docs/Frontend/React/React-props-setState/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 组件渲染和更新原理

    @@ -84,6 +84,6 @@ 

    class Welcome extends Component {
      render() {
        const { count, onIncrement } = this.props;
        return (
          <div>
            <p>Count: {count}</p>
            <button onClick={onIncrement}>+1</button>
          </div>
        );
      }
    }

    class App extends Component {
      state = {
        count: 0,
      };

      handleIncrement = () => {
        this.setState((prevState) => ({
          count: prevState.count + 1,
        }));
      };

      render() {
        return <Welcome count={this.state.count} onIncrement={this.handleIncrement} />;
      }
    }

    -

    在这个例子中,子组件 Welcome 通过 props 接收到父组件的 state 和事件处理函数,在内部触发 onIncrement 函数后,就可以修改父组件的 state,从而触发父组件及子组件的重新渲染。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个例子中,子组件 Welcome 通过 props 接收到父组件的 state 和事件处理函数,在内部触发 onIncrement 函数后,就可以修改父组件的 state,从而触发父组件及子组件的重新渲染。

    \ No newline at end of file diff --git "a/docs/Frontend/React/React-\347\220\206\345\277\265/index.html" "b/docs/Frontend/React/React-\347\220\206\345\277\265/index.html" index 6fccdd55..5a178646 100644 --- "a/docs/Frontend/React/React-\347\220\206\345\277\265/index.html" +++ "b/docs/Frontend/React/React-\347\220\206\345\277\265/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 设计理念与核心架构

    @@ -36,6 +36,6 @@

    双缓存传统的 DOM 更新方式是直接在当前屏幕上进行,可能会导致页面闪烁。React 使用双缓存技术,在内存中构建并直接替换 DOM 树,然后再与浏览器刷新调度流程配合,减少页面闪烁,提高渲染性能。

    -

    值得注意的是,在首屏渲染时并不会触发 diff 算法,因为此时 DOM 树还未构建。只有在后续的更新过程中,才会通过 diff 算法找出需要变更的部分,再把变更应用到真实 DOM 上。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    值得注意的是,在首屏渲染时并不会触发 diff 算法,因为此时 DOM 树还未构建。只有在后续的更新过程中,才会通过 diff 算法找出需要变更的部分,再把变更应用到真实 DOM 上。

    \ No newline at end of file diff --git "a/docs/Frontend/React/React\347\224\237\345\221\275\345\221\250\346\234\237/index.html" "b/docs/Frontend/React/React\347\224\237\345\221\275\345\221\250\346\234\237/index.html" index a3645d4e..52a71fce 100644 --- "a/docs/Frontend/React/React\347\224\237\345\221\275\345\221\250\346\234\237/index.html" +++ "b/docs/Frontend/React/React\347\224\237\345\221\275\345\221\250\346\234\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 组件生命周期

    @@ -54,6 +54,6 @@

    componentWillUnmount()​

    componentWillUnmount() 在组件卸载和销毁之前立即调用。可以在此方法中执行任何必要的清理操作,例如清除计时器、取消网络请求或清除在 componentDidMount() 中创建的任何订阅。这个方法适用于避免内存泄漏。

    componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize);
    }
    -

    通过深入理解 React 组件的生命周期,我们可以更好地控制组件的行为,优化性能,并避免常见的陷阱。在开发 React 应用时,要根据具体需求合理地使用这些生命周期方法,充分利用它们提供的功能和特性,打造出高质量、高性能的应用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过深入理解 React 组件的生命周期,我们可以更好地控制组件的行为,优化性能,并避免常见的陷阱。在开发 React 应用时,要根据具体需求合理地使用这些生命周期方法,充分利用它们提供的功能和特性,打造出高质量、高性能的应用。

    \ No newline at end of file diff --git "a/docs/Frontend/React/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\273\221\345\256\232\344\270\216\344\272\213\344\273\266\345\257\271\350\261\241/index.html" "b/docs/Frontend/React/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\273\221\345\256\232\344\270\216\344\272\213\344\273\266\345\257\271\350\261\241/index.html" index 48f598e2..a0e0a2e5 100644 --- "a/docs/Frontend/React/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\273\221\345\256\232\344\270\216\344\272\213\344\273\266\345\257\271\350\261\241/index.html" +++ "b/docs/Frontend/React/\344\272\213\344\273\266\345\244\204\347\220\206\345\207\275\346\225\260\347\273\221\345\256\232\344\270\216\344\272\213\344\273\266\345\257\271\350\261\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 事件处理函数绑定与事件对象

    @@ -40,6 +40,6 @@ 

    class App extends React.Component {
      // 事件对象都是在最后一个参数
      // 回调函数显式传入事件对象
      doSth(p1, p2, p3, p4, e) {
        console.log(p1, p2, p3, p4, e);
      }

      // bind隐式传入事件对象
      doSth2(p1, p2, p3, p4, e) {
        console.log(p1, p2, p3, p4, e);
      }

      render() {
        return (
          <div>
            {/* 两种方式是一致的 */}
            <button onClick={(e) => this.doSth(1, 2, 3, 4, e)}>click</button>
            <button onClick={this.doSth2.bind(this, 1, 2, 3, 4)}>click</button>
          </div>
        );
      }
    }

    -

    总之在 React 中处理事件时,要注意this指向问题,推荐使用bind或class fields语法来绑定this。获取事件对象可以通过回调函数显式传入或bind隐式传入的方式。合理使用这些技巧,可以让我们在 React 中优雅地处理各种事件。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    总之在 React 中处理事件时,要注意this指向问题,推荐使用bind或class fields语法来绑定this。获取事件对象可以通过回调函数显式传入或bind隐式传入的方式。合理使用这些技巧,可以让我们在 React 中优雅地处理各种事件。

    \ No newline at end of file diff --git "a/docs/Frontend/React/\344\273\243\347\240\201\345\210\206\345\211\262\344\270\216\351\235\231\345\212\250\346\200\201\345\257\274\345\205\245/index.html" "b/docs/Frontend/React/\344\273\243\347\240\201\345\210\206\345\211\262\344\270\216\351\235\231\345\212\250\346\200\201\345\257\274\345\205\245/index.html" index 608ac8f7..ad088910 100644 --- "a/docs/Frontend/React/\344\273\243\347\240\201\345\210\206\345\211\262\344\270\216\351\235\231\345\212\250\346\200\201\345\257\274\345\205\245/index.html" +++ "b/docs/Frontend/React/\344\273\243\347\240\201\345\210\206\345\211\262\344\270\216\351\235\231\345\212\250\346\200\201\345\257\274\345\205\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    代码分割与静动态导入

    @@ -38,6 +38,6 @@

    动态导 
    import('./path/to/module').then((module) => {
      // 使用加载的模块
    });

    import() 函数还支持动态拼接路径:

    const modulePath = `./path/to/${moduleName}`
    import(modulePath).then(...)
    -

    这在静态导入中是不允许的。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这在静态导入中是不允许的。

    \ No newline at end of file diff --git "a/docs/Frontend/React/\345\210\235\350\257\206React/index.html" "b/docs/Frontend/React/\345\210\235\350\257\206React/index.html" index 5276a007..b0d3c699 100644 --- "a/docs/Frontend/React/\345\210\235\350\257\206React/index.html" +++ "b/docs/Frontend/React/\345\210\235\350\257\206React/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 入门指南

    @@ -67,6 +67,6 @@

    JSX 的
  • 即使存在这种耦合,React 也能很好地实现关注点分离

    • JSX 语法示例​

    -
    import ReactDOM from 'react-dom';
    import React from 'react';

    function App() {
      return (
        // 使用JSX语法,需要引入React
        <div className="root">
          <ul className="list">
            <li>1</li>
            <li>2</li>
          </ul>
        </div>
      );
    }

    // 将组件挂载到DOM元素上
    ReactDOM.render(<App />, document.getElementById('root'));
    编辑此页
    最后由 sumingcheng 于 更新
    +
    import ReactDOM from 'react-dom';
    import React from 'react';

    function App() {
      return (
        // 使用JSX语法,需要引入React
        <div className="root">
          <ul className="list">
            <li>1</li>
            <li>2</li>
          </ul>
        </div>
      );
    }

    // 将组件挂载到DOM元素上
    ReactDOM.render(<App />, document.getElementById('root'));
    \ No newline at end of file diff --git "a/docs/Frontend/React/\345\217\227\346\216\247-\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266/index.html" "b/docs/Frontend/React/\345\217\227\346\216\247-\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266/index.html" index 64456d61..3ecea4d2 100644 --- "a/docs/Frontend/React/\345\217\227\346\216\247-\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266/index.html" +++ "b/docs/Frontend/React/\345\217\227\346\216\247-\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 中的受控组件与非受控组件

    @@ -46,6 +46,6 @@

    非受
    1. 表单数据和 UI 可能不同步,需要手动同步。
    2. 对表单数据的校验和处理相对麻烦。
      3. -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/React/\346\235\241\344\273\266-\345\210\227\350\241\250\346\270\262\346\237\223/index.html" "b/docs/Frontend/React/\346\235\241\344\273\266-\345\210\227\350\241\250\346\270\262\346\237\223/index.html" index 5b2c8efb..ded9d01a 100644 --- "a/docs/Frontend/React/\346\235\241\344\273\266-\345\210\227\350\241\250\346\270\262\346\237\223/index.html" +++ "b/docs/Frontend/React/\346\235\241\344\273\266-\345\210\227\350\241\250\346\270\262\346\237\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 条件渲染与列表渲染

    @@ -44,6 +44,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    总之,在进行条件渲染和列表渲染时,要注意render函数的返回值、逻辑运算符的使用以及key的设置,这样才能正确高效地渲染动态的 UI 界面。

    \ No newline at end of file diff --git "a/docs/Frontend/React/\347\210\266\345\255\220\347\273\204\344\273\266\346\225\260\346\215\256\345\205\263\347\263\273\344\270\216\347\212\266\346\200\201\346\217\220\345\215\207/index.html" "b/docs/Frontend/React/\347\210\266\345\255\220\347\273\204\344\273\266\346\225\260\346\215\256\345\205\263\347\263\273\344\270\216\347\212\266\346\200\201\346\217\220\345\215\207/index.html" index d12d1c47..de07eb12 100644 --- "a/docs/Frontend/React/\347\210\266\345\255\220\347\273\204\344\273\266\346\225\260\346\215\256\345\205\263\347\263\273\344\270\216\347\212\266\346\200\201\346\217\220\345\215\207/index.html" +++ "b/docs/Frontend/React/\347\210\266\345\255\220\347\273\204\344\273\266\346\225\260\346\215\256\345\205\263\347\263\273\344\270\216\347\212\266\346\200\201\346\217\220\345\215\207/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    父子组件数据关系与状态提升

    @@ -48,6 +48,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    通过遵循这些最佳实践,我们可以更好地组织和管理组件之间的数据流,提高代码的可读性和可维护性。

    \ No newline at end of file diff --git "a/docs/Frontend/React/\347\273\204\345\220\210\344\270\216\347\273\247\346\211\277-CSS-Module/index.html" "b/docs/Frontend/React/\347\273\204\345\220\210\344\270\216\347\273\247\346\211\277-CSS-Module/index.html" index 7ee81e37..beb63ac2 100644 --- "a/docs/Frontend/React/\347\273\204\345\220\210\344\270\216\347\273\247\346\211\277-CSS-Module/index.html" +++ "b/docs/Frontend/React/\347\273\204\345\220\210\344\270\216\347\273\247\346\211\277-CSS-Module/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    React 组合与 CSS Module 使用指南

    @@ -46,6 +46,6 @@

    组件继

    通过 children prop 或者传递 React 元素,我们已经可以很好地实现组件的嵌套组合,满足大部分场景需求 对于可复用的逻辑,我们可以抽取到单独的 JavaScript 模块中,通过导入使用,而不需要继承

    当然,如果你确实需要继承一些基础的组件逻辑,完全可以使用 ES6 的 class 继承特性。但我的经验是,这种需求是比较少见的。组合优于继承,这也是 React 的设计理念之一。

    -

    以上就是我对 React 组合和 CSS Module 的一些见解和使用指南,希望对你有所帮助。在实际项目中多加练习,就能够熟练掌握这些技巧,编写出可维护、高复用的 React 组件。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    以上就是我对 React 组合和 CSS Module 的一些见解和使用指南,希望对你有所帮助。在实际项目中多加练习,就能够熟练掌握这些技巧,编写出可维护、高复用的 React 组件。

    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/TypeScript\347\256\200\344\273\213/index.html" "b/docs/Frontend/TypeScript/TypeScript\347\256\200\344\273\213/index.html" index 7a9752ba..089e44b8 100644 --- "a/docs/Frontend/TypeScript/TypeScript\347\256\200\344\273\213/index.html" +++ "b/docs/Frontend/TypeScript/TypeScript\347\256\200\344\273\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 简介

    @@ -72,6 +72,6 @@ 

    let count = 0; // 推断为number类型
    const name = 'TypeScript'; // 推断为string类型

    但如果变量的类型不明确,例如一个变量的值可能是多种类型,就需要使用联合类型(Union Types):

    -
    let value: string | number;
    value = 'hello';
    value = 123;
    编辑此页
    最后由 sumingcheng 于 更新
    +
    let value: string | number;
    value = 'hello';
    value = 123;
    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\345\207\275\346\225\260/index.html" "b/docs/Frontend/TypeScript/\345\207\275\346\225\260/index.html" index 28c88413..25db06bf 100644 --- "a/docs/Frontend/TypeScript/\345\207\275\346\225\260/index.html" +++ "b/docs/Frontend/TypeScript/\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 函数

    @@ -50,6 +50,6 @@

    最佳实 
    const add = (a: number, b: number) => a + b;

    对于复杂的函数,考虑使用 JSDoc 注释来描述函数的目的、参数和返回值。

    /**
     * Calculates the average of an array of numbers.
     * @param numbers - The array of numbers.
     * @returns The average of the numbers.
     */
    function calculateAverage(numbers: number[]): number {
      // ...
    }
    -

    函数应该专注于做一件事,并做好。如果一个函数变得太复杂,考虑将其拆分为多个更小、更集中的函数。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    函数应该专注于做一件事,并做好。如果一个函数变得太复杂,考虑将其拆分为多个更小、更集中的函数。

    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\345\237\272\346\234\254\347\261\273\345\236\213/index.html" "b/docs/Frontend/TypeScript/\345\237\272\346\234\254\347\261\273\345\236\213/index.html" index d5ddba8e..751e869e 100644 --- "a/docs/Frontend/TypeScript/\345\237\272\346\234\254\347\261\273\345\236\213/index.html" +++ "b/docs/Frontend/TypeScript/\345\237\272\346\234\254\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 基本类型

    @@ -42,6 +42,6 @@

    特殊类 
    let value: unknown;
    value = true; // OK
    value = 42; // OK
    value = 'Hello World'; // OK

    let value1: unknown = value; // OK
    let value2: any = value; // OK
    let value3: boolean = value; // Error
    let value4: number = value; // Error
    let value5: string = value; // Error

    void 表示没有任何类型,当一个函数没有返回值时,通常会见到其返回值类型是 void。声明一个 void 类型的变量没有什么大用,因为你只能为它赋予 undefined 和 null。

    never 表示永不存在的值的类型。例如 never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

    -
    // 返回never的函数必须存在无法达到的终点
    function error(message: string): never {
      throw new Error(message);
    }

    // 推断的返回值类型为never
    function fail() {
      return error('Something failed');
    }

    // 返回never的函数必须存在无法达到的终点
    function infiniteLoop(): never {
      while (true) {}
    }

    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 返回never的函数必须存在无法达到的终点
    function error(message: string): never {
      throw new Error(message);
    }

    // 推断的返回值类型为never
    function fail() {
      return error('Something failed');
    }

    // 返回never的函数必须存在无法达到的终点
    function infiniteLoop(): never {
      while (true) {}
    }
    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/index.html" "b/docs/Frontend/TypeScript/\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/index.html" index e6ae54ee..7ee6abf6 100644 --- "a/docs/Frontend/TypeScript/\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/index.html" +++ "b/docs/Frontend/TypeScript/\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 安装与配置

    @@ -66,6 +66,6 @@

    开
  • tsc <file>: 编译指定的 TypeScript 文件。
  • tsc --init: 生成默认的tsconfig.json文件。
  • tsc --watch: 监视文件变化并自动编译。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\346\216\245\345\217\243/index.html" "b/docs/Frontend/TypeScript/\346\216\245\345\217\243/index.html" index 3e430461..339e96ee 100644 --- "a/docs/Frontend/TypeScript/\346\216\245\345\217\243/index.html" +++ "b/docs/Frontend/TypeScript/\346\216\245\345\217\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 接口

    @@ -51,6 +51,6 @@

    索引签

    继承接口​

    接口可以通过extends关键字继承其他接口。这允许我们在已有接口的基础上扩展新的属性和方法。例如:

    interface Shape {
      color: string;
    }

    interface Square extends Shape {
      sideLength: number;
    }

    const square: Square = {
      color: 'blue',
      sideLength: 10,
    };
    -

    上面的代码中,Square接口继承了Shape接口,因此它具有color属性,并且还添加了sideLength属性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    上面的代码中,Square接口继承了Shape接口,因此它具有color属性,并且还添加了sideLength属性。

    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\346\250\241\345\235\227\344\270\216\345\221\275\345\220\215\347\251\272\351\227\264/index.html" "b/docs/Frontend/TypeScript/\346\250\241\345\235\227\344\270\216\345\221\275\345\220\215\347\251\272\351\227\264/index.html" index aff669c4..079b001f 100644 --- "a/docs/Frontend/TypeScript/\346\250\241\345\235\227\344\270\216\345\221\275\345\220\215\347\251\272\351\227\264/index.html" +++ "b/docs/Frontend/TypeScript/\346\250\241\345\235\227\344\270\216\345\221\275\345\220\215\347\251\272\351\227\264/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 中的模块与命名空间

    @@ -47,6 +47,6 @@

    别名​

    为了避免每次使用命名空间成员时都需要输入完整的命名空间路径,我们可以使用import关键字为命名空间创建别名。

    import inner = OuterNamespace.InnerNamespace;

    inner.bar(); // 输出: Hello from InnerNamespace!
    -

    在实际项目中,我通常根据代码的复杂度和组织需求来选择使用模块还是命名空间。对于需要在多个文件之间共享的代码,我倾向于使用模块;而对于在单个文件内部进行逻辑分组的代码,使用命名空间会更加方便。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在实际项目中,我通常根据代码的复杂度和组织需求来选择使用模块还是命名空间。对于需要在多个文件之间共享的代码,我倾向于使用模块;而对于在单个文件内部进行逻辑分组的代码,使用命名空间会更加方便。

    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\346\263\233\345\236\213/index.html" "b/docs/Frontend/TypeScript/\346\263\233\345\236\213/index.html" index 412b3f6c..408edd8c 100644 --- "a/docs/Frontend/TypeScript/\346\263\233\345\236\213/index.html" +++ "b/docs/Frontend/TypeScript/\346\263\233\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 泛型详解

    @@ -41,6 +41,6 @@

    keyof
    interface Person {
      name: string;
      age: number;
    }

    type K1 = keyof Person; // "name" | "age"
    type K2 = keyof Person[]; // number | "length" | "push" | "concat" | ...
    type K3 = keyof { [x: string]: Person }; // string | number

    keyof经常与extends一起使用,用于限制泛型类型必须是另一个类型的键:

    function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
      return obj[key];
    }

    let x = { a: 1, b: 2, c: 3, d: 4 };

    getProperty(x, 'a');
    getProperty(x, 'm'); // error: Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'.
    -

    上面的getProperty函数要求第二个参数key必须是第一个参数obj的键。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    上面的getProperty函数要求第二个参数key必须是第一个参数obj的键。

    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\347\261\273/index.html" "b/docs/Frontend/TypeScript/\347\261\273/index.html" index 9f5cd2aa..eaea411f 100644 --- "a/docs/Frontend/TypeScript/\347\261\273/index.html" +++ "b/docs/Frontend/TypeScript/\347\261\273/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 类

    @@ -37,6 +37,6 @@

    继承
    class Animal {
      protected name: string;

      constructor(name: string) {
        this.name = name;
      }

      move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
      }
    }

    class Dog extends Animal {
      bark() {
        console.log('Woof! Woof!');
      }

      move(distance = 5) {
        console.log('Running...');
        super.move(distance);
      }
    }

    在这个例子中,Dog类继承了Animal类,并添加了自己的bark方法。它还覆盖了父类的move方法,在调用父类方法前添加了自己的逻辑。

    除了使用extends实现继承,TypeScript 还支持使用implements关键字实现接口。一个类可以实现多个接口,用逗号分隔。

    -
    interface Printable {
      print(): void;
    }

    class Report implements Printable {
      print() {
        console.log('Printing report...');
      }
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    interface Printable {
      print(): void;
    }

    class Report implements Printable {
      print() {
        console.log('Printing report...');
      }
    }
    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204/index.html" "b/docs/Frontend/TypeScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204/index.html" index fd72d96f..390ef880 100644 --- "a/docs/Frontend/TypeScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204/index.html" +++ "b/docs/Frontend/TypeScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 类型化数组与元组

    @@ -95,6 +95,6 @@ 

    class Person {
      name: string;

      constructor(name: string) {
        this.name = name;
      }
    }

    const person = new Person('Tom');
    console.log(person.name); // 输出: Tom

    构造函数 constructor 接受一个 name 参数,并将其赋值给实例的 name 属性。创建 Person 实例时,我们需要传入一个字符串作为名字。

    TypeScript 还支持在构造函数的参数上添加修饰符,可以简化属性的定义:

    -
    class Person {
      constructor(public name: string) {}
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    class Person {
      constructor(public name: string) {}
    }
    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\350\243\205\351\245\260\345\231\250/index.html" "b/docs/Frontend/TypeScript/\350\243\205\351\245\260\345\231\250/index.html" index 7d97d795..3b7d3592 100644 --- "a/docs/Frontend/TypeScript/\350\243\205\351\245\260\345\231\250/index.html" +++ "b/docs/Frontend/TypeScript/\350\243\205\351\245\260\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 装饰器

    @@ -36,6 +36,6 @@

    属性

    上面代码中,@format装饰器修改了greeting属性的行为,使得它在获取和设置时都会进行格式化。

    参数装饰器​

    参数装饰器声明在一个参数声明之前。参数装饰器应用于类构造函数或方法声明。

    -
    function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
      throw new Error(`Argument ${parameterIndex} of ${propertyKey.toString()} is required`);
    }

    class Greeter {
      greeting: string;

      constructor(message: string) {
        this.greeting = message;
      }

      greet(@required name: string) {
        return 'Hello ' + name + ', ' + this.greeting;
      }
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
      throw new Error(`Argument ${parameterIndex} of ${propertyKey.toString()} is required`);
    }

    class Greeter {
      greeting: string;

      constructor(message: string) {
        this.greeting = message;
      }

      greet(@required name: string) {
        return 'Hello ' + name + ', ' + this.greeting;
      }
    }
    \ No newline at end of file diff --git "a/docs/Frontend/TypeScript/\351\253\230\347\272\247\347\261\273\345\236\213/index.html" "b/docs/Frontend/TypeScript/\351\253\230\347\272\247\347\261\273\345\236\213/index.html" index 80b8b9df..cd66e72c 100644 --- "a/docs/Frontend/TypeScript/\351\253\230\347\272\247\347\261\273\345\236\213/index.html" +++ "b/docs/Frontend/TypeScript/\351\253\230\347\272\247\347\261\273\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    TypeScript 高级类型

    @@ -50,6 +50,6 @@

    in 类型保护​

    in操作符可以安全地检查一个对象上是否存在一个属性,它通常也被作为类型保护使用:

    interface A {
      x: number;
    }

    interface B {
      y: string;
    }

    function doStuff(q: A | B) {
      if ('x' in q) {
        // q: A
      } else {
        // q: B
      }
    }
    -

    上面的例子中,'x' in q可以判断q是否为A类型。在if分支中,TypeScript 会将q的类型收窄为A,这样我们就可以放心地使用它的x属性了。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    上面的例子中,'x' in q可以判断q是否为A类型。在if分支中,TypeScript 会将q的类型收窄为A,这样我们就可以放心地使用它的x属性了。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\344\275\277\347\224\250/index.html" "b/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\344\275\277\347\224\250/index.html" index 60f833f2..0de6d6be 100644 --- "a/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\344\275\277\347\224\250/index.html" +++ "b/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    常用配置项

    @@ -41,6 +41,6 @@

    取数据

    可以使用xAxisIndex和yAxisIndex，来指定到底使用拿列或者是拿行的数据为该图表的数据

     dataset: {
            // 二维数组管理数据
            source: [
              ['quarter', 'v1', 'v2', 'kind', 'v3'],
              ['第一季度', 55, 30, '种类1', 60],
              ['第二季度', 50, 35, '种类2', 80],
              ['第三季度', 53, 40, '种类3', 70],
              ['第四季度', 55, 24, '种类4', 90],
            ]
          },

    X轴文字换行

    -
    					axisLabel: {
                  show: true,
                  color: '#7D8CBD',
                  interval: 0,
                  formatter: function (value) {
                    var ret = ""; //拼接加\n返回的类目项  
                    var maxLength = 1; //每项显示文字个数  
                    var valLength = value.length; //X轴类目项的文字个数  
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                    if (rowN > 1) //如果类目项的文字大于5,  
                    {
                      for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串  
                        var start = i * maxLength; //开始截取的位置  
                        var end = start + maxLength; //结束截取的位置  
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串  
                      }
                      return ret;
                    } else {
                      return value;
                    }
                  }
                },
    编辑此页
    最后由 sumingcheng 于 更新
    +
    					axisLabel: {
                  show: true,
                  color: '#7D8CBD',
                  interval: 0,
                  formatter: function (value) {
                    var ret = ""; //拼接加\n返回的类目项  
                    var maxLength = 1; //每项显示文字个数  
                    var valLength = value.length; //X轴类目项的文字个数  
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                    if (rowN > 1) //如果类目项的文字大于5,  
                    {
                      for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串  
                        var start = i * maxLength; //开始截取的位置  
                        var end = start + maxLength; //结束截取的位置  
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串  
                      }
                      return ret;
                    } else {
                      return value;
                    }
                  }
                },
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\345\210\235\350\257\206/index.html" "b/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\345\210\235\350\257\206/index.html" index 9cd1f16b..9815e9fe 100644 --- "a/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\345\210\235\350\257\206/index.html" +++ "b/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/ECharts-\345\210\235\350\257\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    基本的使用

    @@ -37,6 +37,6 @@

    series的配置

          series: [{
              type: 'pie', //饼图
              radius: 35, //半径
              center: [120, 100], //位置 可以是像素 也可以是百分比
              data: [{
                name: '分类1', //饼图的饼名
                value: 60 //值
              }, {
                name: '分类2',
                value: 80
              }, {
                name: '分类3',
                value: 10
              }, {
                name: '分类4',
                value: 70
              }]
            },
            {
              type: 'line',
              data: [30, 25, 35, 40]
            }, {
              type: 'bar',
              data: [30, 25, 35, 40]
            }
          ]

    dataset

    4.0版本推出的属性，用来管理数据，复用数据。

    -
    const option = {
          // 数据集合是一个
          dataset: {
            // 二维数组管理数据
            source: [
              ['quarter', 'v1', 'v2', 'kind', 'v3'],
              ['第一季度', 55, 30, '种类1', 60],
              ['第二季度', 50, 35, '种类2', 80],
              ['第三季度', 53, 40, '种类3', 70],
              ['第四季度', 55, 24, '种类4', 90],
            ]
          },
          title: {
            text: "ECharts 使用"
          },
          // 声明一个 X 轴，类目轴（category）。
      		// 默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          // 系列,一个系列是一个图表类型
          series: [{
              type: 'pie', //饼图
              radius: 10, //半径
              center: [200, 50], //位置 可以是像素 也可以是百分比
              // 使用dataset的数据
              encode: {
                itemName: 'kind',
                value: 'v3'
              }
            },
            {
              type: 'line',
              // 使用dataset的数据
              encode: {
                x: 'quarter',
                y: 'v1'
              }
            }, {
              type: 'bar',
              encode: {
                x: 'quarter',
                y: 'v2'
              }
            }
          ]
        };
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const option = {
          // 数据集合是一个
          dataset: {
            // 二维数组管理数据
            source: [
              ['quarter', 'v1', 'v2', 'kind', 'v3'],
              ['第一季度', 55, 30, '种类1', 60],
              ['第二季度', 50, 35, '种类2', 80],
              ['第三季度', 53, 40, '种类3', 70],
              ['第四季度', 55, 24, '种类4', 90],
            ]
          },
          title: {
            text: "ECharts 使用"
          },
          // 声明一个 X 轴，类目轴（category）。
      		// 默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          // 系列,一个系列是一个图表类型
          series: [{
              type: 'pie', //饼图
              radius: 10, //半径
              center: [200, 50], //位置 可以是像素 也可以是百分比
              // 使用dataset的数据
              encode: {
                itemName: 'kind',
                value: 'v3'
              }
            },
            {
              type: 'line',
              // 使用dataset的数据
              encode: {
                x: 'quarter',
                y: 'v1'
              }
            }, {
              type: 'bar',
              encode: {
                x: 'quarter',
                y: 'v2'
              }
            }
          ]
        };
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/Vue-ECharts-1/index.html" "b/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/Vue-ECharts-1/index.html" index 242c8412..e86c6288 100644 --- "a/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/Vue-ECharts-1/index.html" +++ "b/docs/Frontend/Vue/ECharts\347\233\270\345\205\263/Vue-ECharts-1/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    构建项目

    @@ -31,6 +31,6 @@

    画三角形

    原理，border

    -
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
    		// 控制上下左右的颜色来控制
        border-color: green transparent transparent transparent;
    编辑此页
    最后由 sumingcheng 于 更新
    +
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
    		// 控制上下左右的颜色来控制
        border-color: green transparent transparent transparent;
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/Mustache-Vue\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/Mustache-Vue\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" index a4ec3189..382eea24 100644 --- "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/Mustache-Vue\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" +++ "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/Mustache-Vue\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    mustache-Vue编译

    @@ -80,6 +80,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    通过本文的介绍，您已经了解了 Vue 的模板语法、指令、组件通信、计算属性与侦听器以及生命周期钩子等核心概念。这些知识点是构建高效、可维护 Vue 应用的基础。建议在实际项目中多加练习和应用，以深入掌握 Vue 的强大功能。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\206\205\347\275\256\346\214\207\344\273\244/index.html" "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\206\205\347\275\256\346\214\207\344\273\244/index.html" index 1fb6a4d2..4d89db2c 100644 --- "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\206\205\347\275\256\346\214\207\344\273\244/index.html" +++ "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\206\205\347\275\256\346\214\207\344\273\244/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue.js 条件渲染详解

    @@ -32,6 +32,6 @@

    插值表达式访问的问题​

    自己定义的全局变量，插值表达式是访问不到的

    插值表达式有一个受限列表，可以点击查看

    -

    Vuejs/vue-next

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Vuejs/vue-next

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\237\272\346\234\254\347\224\250\346\263\225/index.html" "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\237\272\346\234\254\347\224\250\346\263\225/index.html" index 12412b2c..e8b6a36c 100644 --- "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\237\272\346\234\254\347\224\250\346\263\225/index.html" +++ "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\237\272\346\234\254\347\224\250\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue 基础入门

    @@ -58,6 +58,6 @@

    测试代

    main.js:

    const { createApp } = Vue;

    const app = createApp({
      data() {
        return {
          title: 'Vue 常用指令示例',
          author: '峰华',
          dateTime: '2023年4月18日',
          content: '这是一篇介绍 Vue 常用指令的文章',
          likeCount: 0,
          isLogin: true,
          isFollowed: false,
          comment: '',
          commentList: [],
        };
      },
      methods: {
        likeArticle() {
          this.likeCount++;
        },
        toggleFollow() {
          this.isFollowed = !this.isFollowed;
        },
        submitComment() {
          if (this.comment.trim()) {
            this.commentList.unshift({
              id: Date.now(),
              content: this.comment,
              dateTime: new Date().toLocaleString(),
            });
            this.comment = '';
          }
        },
      },
    });

    app.mount('#app');

    以上是一个使用 Vue 3 常用指令的示例。它包含了文章标题、作者、发布时间、点赞、关注、评论等功能。

    -

    通过这个例子,我们可以看到v-if、v-else、v-bind、v-on、v-for、v-model等指令的实际运用。这些指令可以帮助我们方便地进行条件渲染、事件绑定、列表渲染、表单输入绑定等常见操作。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这个例子,我们可以看到v-if、v-else、v-bind、v-on、v-for、v-model等指令的实际运用。这些指令可以帮助我们方便地进行条件渲染、事件绑定、列表渲染、表单输入绑定等常见操作。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\261\236\346\200\247-\350\241\250\350\276\276\345\274\217/index.html" "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\261\236\346\200\247-\350\241\250\350\276\276\345\274\217/index.html" index b23f2b74..04e30ab8 100644 --- "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\261\236\346\200\247-\350\241\250\350\276\276\345\274\217/index.html" +++ "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\345\261\236\346\200\247-\350\241\250\350\276\276\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue.js 属性与插值详解

    @@ -64,6 +64,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\217\222\345\200\274-\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\217\222\345\200\274-\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" index 70135108..1620ea70 100644 --- "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\217\222\345\200\274-\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" +++ "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\217\222\345\200\274-\347\274\226\350\257\221-\345\206\205\347\275\256\346\214\207\344\273\244/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    插值表达式-内置制定

    @@ -111,6 +111,6 @@

  • 尽量避免在处理用户输入时使用 v-html，以确保网站的安全性。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\220\255\345\273\272Vue2-3-\345\274\200\345\217\221\347\216\257\345\242\203/index.html" "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\220\255\345\273\272Vue2-3-\345\274\200\345\217\221\347\216\257\345\242\203/index.html" index 88e1683c..69e431b7 100644 --- "a/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\220\255\345\273\272Vue2-3-\345\274\200\345\217\221\347\216\257\345\242\203/index.html" +++ "b/docs/Frontend/Vue/Vue\345\237\272\347\241\200\345\205\245\351\227\250/\346\220\255\345\273\272Vue2-3-\345\274\200\345\217\221\347\216\257\345\242\203/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue2 构建

    @@ -67,6 +67,6 @@

    安装并运行​

    我安装了适用于 Vue3 的编译器和 vue-loader，然后启动开发服务器。

    npm install -D @vue/compiler-sfc
    yarn add vue-loader@next -D
    npm run dev
    -

    对于大型项目，我建议使用脚手架工具或 Vite 来搭建项目环境，以提高开发效率。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    对于大型项目，我建议使用脚手架工具或 Vite 来搭建项目环境，以提高开发效率。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue-\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" "b/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue-\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" index d1977ec4..2b8af57c 100644 --- "a/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue-\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" +++ "b/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue-\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    永远不要过早优化代码

    @@ -66,6 +66,6 @@

    注意

    参考链接

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\244\247\345\261\217\347\273\204\344\273\266\345\246\202\344\275\225\350\256\276\350\256\241/index.html" "b/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\244\247\345\261\217\347\273\204\344\273\266\345\246\202\344\275\225\350\256\276\350\256\241/index.html" index 9411f608..323023b0 100644 --- "a/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\244\247\345\261\217\347\273\204\344\273\266\345\246\202\344\275\225\350\256\276\350\256\241/index.html" +++ "b/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\244\247\345\261\217\347\273\204\344\273\266\345\246\202\344\275\225\350\256\276\350\256\241/index.html" @@ -11,10 +11,10 @@ - - + + -
    跳到主要内容

    Vue大屏组件如何设计

    利用插槽，插入各个模块的大屏组件​

    编辑此页
    最后由 sumingcheng 于 更新
    +
    跳到主要内容

    Vue大屏组件如何设计

    利用插槽，插入各个模块的大屏组件​

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" "b/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" index d231b0d4..a5c794a9 100644 --- "a/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" +++ "b/docs/Frontend/Vue/Vue\346\200\247\350\203\275\344\274\230\345\214\226\344\270\216\345\256\236\350\267\265/Vue\345\270\270\350\247\201\344\274\230\345\214\226\346\211\213\346\256\265/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue 常见优化手段

    @@ -71,6 +71,6 @@

    Vue 优化组件加载​

    在渲染大量组件时，通过延迟加载可以提升性能。

    export default function (maxFrameCount) {
      return {
        data() {
          return {
            frameCount: 0, // 当前帧计数
          };
        },

        mounted() {
          const updateFrameCount = () => {
            requestAnimationFrame(() => {
              this.frameCount++;

              if (this.frameCount < maxFrameCount) {
                updateFrameCount();
              }
            });
          };

          updateFrameCount();
        },

        methods: {
          defer(showInFrameCount) {
            return this.frameCount >= showInFrameCount;
          },
        },
      };
    }
    -

    该函数通过 requestAnimationFrame 更新帧计数，控制内容的延迟显示或渲染，适用于需要分帧加载大量组件的场景。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    该函数通过 requestAnimationFrame 更新帧计数，控制内容的延迟显示或渲染，适用于需要分帧加载大量组件的场景。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/computed\344\270\216watch\345\272\224\347\224\250\345\210\206\346\236\220/index.html" "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/computed\344\270\216watch\345\272\224\347\224\250\345\210\206\346\236\220/index.html" index 4ef1e52a..78859a45 100644 --- "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/computed\344\270\216watch\345\272\224\347\224\250\345\210\206\346\236\220/index.html" +++ "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/computed\344\270\216watch\345\272\224\347\224\250\345\210\206\346\236\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245methods\345\261\236\346\200\247\344\273\245\345\217\212\345\256\236\344\276\213\346\226\271\346\263\225\346\214\202\350\275\275\345\256\236\347\216\260/index.html" "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245methods\345\261\236\346\200\247\344\273\245\345\217\212\345\256\236\344\276\213\346\226\271\346\263\225\346\214\202\350\275\275\345\256\236\347\216\260/index.html" index 9b8c9b52..9abe393e 100644 --- "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245methods\345\261\236\346\200\247\344\273\245\345\217\212\345\256\236\344\276\213\346\226\271\346\263\225\346\214\202\350\275\275\345\256\236\347\216\260/index.html" +++ "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245methods\345\261\236\346\200\247\344\273\245\345\217\212\345\256\236\344\276\213\346\226\271\346\263\225\346\214\202\350\275\275\345\256\236\347\216\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Methods

    @@ -35,6 +35,6 @@

    使用方

    实现 methods

    下面是一个简单的 Vue 实现，展示了如何初始化数据和方法：

    var Vue = (function () {
      function Vue(options) {
        this.$data = options.data();
        this._methods = options.methods;

        this._init(this);
      }

      Vue.prototype._init = function (vm) {
        initializeData(vm);
        initializeMethods(vm);
      };

      function initializeData(vm) {
        for (var key in vm.$data) {
          (function (key) {
            Object.defineProperty(vm, key, {
              get: function () {
                return vm.$data[key];
              },
              set: function (newValue) {
                vm.$data[key] = newValue;
              },
            });
          })(key);
        }
      }

      function initializeMethods(vm) {
        for (var key in vm._methods) {
          vm[key] = vm._methods[key].bind(vm);
        }
      }

      return Vue;
    })();

    var vm = new Vue({
      data() {
        return {
          countA: 1,
          countB: 2,
        };
      },
      methods: {
        incrementA(amount) {
          this.countA += amount;
        },
        incrementB(amount) {
          this.countB += amount;
        },
        calculateTotal() {
          console.log(this.countA + this.countB);
        },
      },
    });

    console.log(vm);

    vm.incrementA(1);
    vm.incrementA(1);
    vm.incrementA(1);
    vm.incrementA(1);
    // countA 5

    vm.incrementB(2);
    vm.incrementB(2);
    vm.incrementB(2);
    vm.incrementB(2);
    // countB 10

    vm.calculateTotal(); //  15
    -

    在这个实现中，initializeData 函数通过 Object.defineProperty 将数据属性代理到实例上，使得可以直接通过 vm.countA 访问和修改数据。同时，initializeMethods 函数绑定了所有方法到实例，确保 this 指向正确的组件实例。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个实现中，initializeData 函数通过 Object.defineProperty 将数据属性代理到实例上，使得可以直接通过 vm.countA 访问和修改数据。同时，initializeMethods 函数绑定了所有方法到实例，确保 this 指向正确的组件实例。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266data\345\261\236\346\200\247\344\273\245\345\217\212\346\225\260\346\215\256\345\223\215\345\272\224\345\274\217\345\256\236\347\216\260/index.html" "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266data\345\261\236\346\200\247\344\273\245\345\217\212\346\225\260\346\215\256\345\223\215\345\272\224\345\274\217\345\256\236\347\216\260/index.html" index 441bcff7..55001d4a 100644 --- "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266data\345\261\236\346\200\247\344\273\245\345\217\212\346\225\260\346\215\256\345\223\215\345\272\224\345\274\217\345\256\236\347\216\260/index.html" +++ "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266data\345\261\236\346\200\247\344\273\245\345\217\212\346\225\260\346\215\256\345\223\215\345\272\224\345\274\217\345\256\236\347\216\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Data

    @@ -61,6 +61,6 @@

    最佳实

    初始化所有属性：在 data 中初始化所有需要的属性，即使它们暂时没有值。这有助于避免在后续开发中出现未定义的属性错误。

    -

    通过合理地设计和管理 data，可以确保 Vue 应用的稳定性和可扩展性。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过合理地设计和管理 data，可以确保 Vue 应用的稳定性和可扩展性。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266\350\256\241\347\256\227\345\261\236\346\200\247\344\273\245\345\217\212\345\272\224\347\224\250\345\234\272\346\231\257\345\210\206\346\236\220/index.html" "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266\350\256\241\347\256\227\345\261\236\346\200\247\344\273\245\345\217\212\345\272\224\347\224\250\345\234\272\346\231\257\345\210\206\346\236\220/index.html" index 9793e9a3..9ba030c6 100644 --- "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266\350\256\241\347\256\227\345\261\236\346\200\247\344\273\245\345\217\212\345\272\224\347\224\250\345\234\272\346\231\257\345\210\206\346\236\220/index.html" +++ "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\346\267\261\345\205\245\347\240\224\347\251\266\350\256\241\347\256\227\345\261\236\346\200\247\344\273\245\345\217\212\345\272\224\347\224\250\345\234\272\346\231\257\345\210\206\346\236\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    计算属性

    @@ -21,6 +21,6 @@

    在模板中嵌入方法时，每次计算的结果都会形成一个对象，以便保存和管理数据。这种方式有助于避免不必要的重复计算，确保数据的一致性和高效性。

    实现依赖收集​

    var Vue = (function () {
      var templateVariableRegex = /\{\{(.+?)\}\}/g,
        computedData = {},
        dataPool = {};

      /**
       * computedData 结构:
       * {
       *   total: {
       *     value: 函数执行返回的结果,
       *     get: 获取值的函数,
       *     dependencies: ['a', 'b']
       *   }
       * }
       */

      var Vue = function (options) {
        this.$el = document.querySelector(options.el);
        this.$data = options.data();

        this._init(this, options.computed, options.template);
      };

      Vue.prototype._init = function (vm, computed, template) {
        makeDataReactive(vm);
        setupComputedProperties(vm, computed);
        renderTemplate(vm, template);
      };

      function renderTemplate(vm, template) {
        var container = document.createElement('div'),
          rootElement = vm.$el;

        container.innerHTML = template;

        var compiledDom = compileTemplate(vm, container);

        rootElement.appendChild(compiledDom);
      }

      function updateView(vm, key) {
        dataPool[key].textContent = vm[key];
      }

      function compileTemplate(vm, container) {
        var allNodes = container.getElementsByTagName('*'),
          currentNode = null;

        for (var i = 0; i < allNodes.length; i++) {
          currentNode = allNodes[i];

          var matches = currentNode.textContent.match(templateVariableRegex);

          if (matches) {
            currentNode.textContent = currentNode.textContent.replace(templateVariableRegex, function (node, key) {
              dataPool[key.trim()] = currentNode;
              return vm[key.trim()];
            });
          }
        }

        return container;
      }

      function makeDataReactive(vm) {
        var data = vm.$data;

        for (var key in data) {
          (function (key) {
            Object.defineProperty(vm, key, {
              get() {
                return data[key];
              },
              set(newValue) {
                data[key] = newValue;
                updateView(vm, key);
                updateComputedProperties(vm, key, function (computedKey) {
                  updateView(vm, computedKey);
                });
              },
            });
          })(key);
        }
      }

      function setupComputedProperties(vm, computed) {
        initializeComputedData(vm, computed);

        for (var key in computedData) {
          (function (key) {
            Object.defineProperty(vm, key, {
              get() {
                return computedData[key].value;
              },
              set(newValue) {
                computedData[key].value = newValue;
              },
            });
          })(key);
        }
      }

      function initializeComputedData(vm, computed) {
        for (var key in computed) {
          var descriptor = Object.getOwnPropertyDescriptor(computed, key),
            computeFn = descriptor.value.get ? descriptor.value.get : descriptor.value;

          /**
           * computedData 结构:
           * {
           *   total: {
           *     value: 函数执行返回的结果,
           *     get: 获取值的函数,
           *     dependencies: ['a', 'b']
           *   }
           * }
           */

          computedData[key] = {};
          computedData[key].value = computeFn.call(vm);
          computedData[key].get = computeFn.bind(vm);
          computedData[key].dependencies = collectDependencies(computeFn);
        }
      }

      function collectDependencies(fn) {
        var dependencies = fn.toString().match(/this\.(\w+)/g);

        if (dependencies) {
          dependencies = dependencies.map((dep) => dep.split('.')[1]);
        } else {
          dependencies = [];
        }

        return dependencies;
      }

      function updateComputedProperties(vm, changedKey, callback) {
        for (var key in computedData) {
          var deps = computedData[key].dependencies;

          if (deps.includes(changedKey)) {
            vm[key] = computedData[key].get();
            callback(key);
          }
        }
      }

      return Vue;
    })();

    export default Vue;
    -

    计算属性的实现涉及到依赖收集和数据响应式处理。通过正则表达式识别模板中的变量，并在数据变化时自动更新相关的视图。此外，计算属性通过缓存机制避免了不必要的重复计算，提高了应用的性能。在实际开发中，合理使用计算属性能够显著简化模板逻辑，提升代码的可维护性和效率。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    计算属性的实现涉及到依赖收集和数据响应式处理。通过正则表达式识别模板中的变量，并在数据变化时自动更新相关的视图。此外，计算属性通过缓存机制避免了不必要的重复计算，提高了应用的性能。在实际开发中，合理使用计算属性能够显著简化模板逻辑，提升代码的可维护性和效率。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247/index.html" "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247/index.html" index 967409bf..640d11b4 100644 --- "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247/index.html" +++ "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    计算属性的作用与优化实践

    @@ -46,6 +46,6 @@

    最佳实
  • 复用计算结果：在需要多次使用同一计算结果的场景下，计算属性能够有效减少不必要的计算开销。
  • 合理命名变量：使用易读的变量名，提升代码的可维护性和可读性。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250/index.html" "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250/index.html" index f94ebf21..26ed29e8 100644 --- "a/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250/index.html" +++ "b/docs/Frontend/Vue/Vue\346\240\270\345\277\203\347\211\271\346\200\247/\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    computed和watch比较

    @@ -25,6 +25,6 @@

    完整代码​

    Vue 计算属性

    执行效果​

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/DOM-Diff-\344\270\223\351\242\230/index.html" "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/DOM-Diff-\344\270\223\351\242\230/index.html" index b6f269d3..b65a1624 100644 --- "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/DOM-Diff-\344\270\223\351\242\230/index.html" +++ "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/DOM-Diff-\344\270\223\351\242\230/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    虚拟 DOM 概述

    @@ -30,6 +30,6 @@

    最佳实

    示例代码​

    以下示例展示了如何使用createElement创建一个简单的虚拟节点：

    const vnode = createElement('div', { className: 'container' }, [createElement('h1', null, 'Hello, Virtual DOM'), createElement('p', null, 'This is a simple example.')]);
    -

    在这个示例中，我们创建了一个包含标题和段落的div元素。通过这种方式，虚拟 DOM 能够高效地管理和更新 UI。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在这个示例中，我们创建了一个包含标题和段落的div元素。通过这种方式，虚拟 DOM 能够高效地管理和更新 UI。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/class-style\347\273\221\345\256\232\346\226\271\346\263\225\346\241\210\344\276\213\345\210\206\346\236\220/index.html" "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/class-style\347\273\221\345\256\232\346\226\271\346\263\225\346\241\210\344\276\213\345\210\206\346\236\220/index.html" index da92bf78..2a2cea5f 100644 --- "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/class-style\347\273\221\345\256\232\346\226\271\346\263\225\346\241\210\344\276\213\345\210\206\346\236\220/index.html" +++ "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/class-style\347\273\221\345\256\232\346\226\271\346\263\225\346\241\210\344\276\213\345\210\206\346\236\220/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Vue.js 视图绑定指南

    @@ -49,6 +49,6 @@

    数组 
    <template>
      <div :style="[btnStyle, commonBtnStyle]"></div>
    </template>

    <script>
    export default {
      data() {
        return {
          btnStyle: {
            color: '#fff',
            backgroundColor: 'red'
          },
          commonBtnStyle: {
            borderRadius: '17px'
          }
        }
      }
    }
    </script>

    样式多值​

    Vue会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带前缀的值，则渲染不带前缀的值。需要注意，这种检测是在代码运行时进行的，而不是在编译时。

    -
    <template>
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    </template>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <template>
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    </template>
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\345\272\224\347\224\250\345\256\236\344\276\213-\347\273\204\344\273\266\345\256\236\344\276\213\344\270\216\346\240\271\347\273\204\344\273\266\345\256\236\344\276\213/index.html" "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\345\272\224\347\224\250\345\256\236\344\276\213-\347\273\204\344\273\266\345\256\236\344\276\213\344\270\216\346\240\271\347\273\204\344\273\266\345\256\236\344\276\213/index.html" index b33f7544..1f31fc8c 100644 --- "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\345\272\224\347\224\250\345\256\236\344\276\213-\347\273\204\344\273\266\345\256\236\344\276\213\344\270\216\346\240\271\347\273\204\344\273\266\345\256\236\344\276\213/index.html" +++ "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\345\272\224\347\224\250\345\256\236\344\276\213-\347\273\204\344\273\266\345\256\236\344\276\213\344\270\216\346\240\271\347\273\204\344\273\266\345\256\236\344\276\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    应用实例

    @@ -60,6 +60,6 @@

    示例代

    index.html​

    <!DOCTYPE html>
    <html lang="en">
      <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" />
        <title>Vue 应用示例</title>
        <!-- <script src="./src/main.js"></script> -->
      </head>
      <body>
        <div id="app">
          <!-- 组件使用时采用 kebab-case 命名法 -->
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@3.1.2/dist/vue.global.js"></script>
      </body>
    </html>

    index.js​

    -
    const MyTitle = {
      template: `
            <h1>
                <slot></slot>
            </h1>
        `,
      mounted() {
        console.log(this);
      },
    };

    const MyAuthor = {
      template: `
            <p>
                Author: <slot></slot>
            </p>
        `,
    };

    const MyContent = {
      template: `
            <p>
                <slot></slot>
            </p>
        `,
    };

    const App = {
      components: {
        // 组件定义时采用 PascalCase 命名法
        MyTitle,
        MyAuthor,
        MyContent,
      },
      data() {
        return {
          title: '这是一个标题',
          author: '小叶',
          content: '这是内容',
        };
      },
      template: `
            <div>
                <my-title>{{ title }}</my-title>
                <my-author>{{ author }}</my-author>
                <my-content>{{ content }}</my-content>
            </div>
        `,
    };

    const app = Vue.createApp(App);
    const vm = app.mount('#app');
    console.log('这里打印 Vue ↓');
    console.log(Vue);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const MyTitle = {
      template: `
            <h1>
                <slot></slot>
            </h1>
        `,
      mounted() {
        console.log(this);
      },
    };

    const MyAuthor = {
      template: `
            <p>
                Author: <slot></slot>
            </p>
        `,
    };

    const MyContent = {
      template: `
            <p>
                <slot></slot>
            </p>
        `,
    };

    const App = {
      components: {
        // 组件定义时采用 PascalCase 命名法
        MyTitle,
        MyAuthor,
        MyContent,
      },
      data() {
        return {
          title: '这是一个标题',
          author: '小叶',
          content: '这是内容',
        };
      },
      template: `
            <div>
                <my-title>{{ title }}</my-title>
                <my-author>{{ author }}</my-author>
                <my-content>{{ content }}</my-content>
            </div>
        `,
    };

    const app = Vue.createApp(App);
    const vm = app.mount('#app');
    console.log('这里打印 Vue ↓');
    console.log(Vue);
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\346\225\260\346\215\256\345\212\253\346\214\201\346\272\220\347\240\201/index.html" "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\346\225\260\346\215\256\345\212\253\346\214\201\346\272\220\347\240\201/index.html" index 5761bf3b..2878fd47 100644 --- "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\346\225\260\346\215\256\345\212\253\346\214\201\346\272\220\347\240\201/index.html" +++ "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\346\225\260\346\215\256\345\212\253\346\214\201\346\272\220\347\240\201/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    实现 Vue2.0 数据劫持

    @@ -34,6 +34,6 @@

    array.jsconfig.js​

    const ARR_METHODS = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];

    observeArr.js​

    -
    // 引入observe观察的方法
    import observe from './observe';

    function observeArr(arr) {
      for (let i = 0; i < arr.length; i++) {
        observe(arr[i]);
      }
    }

    export default observeArr;
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 引入observe观察的方法
    import observe from './observe';

    function observeArr(arr) {
      for (let i = 0; i < arr.length; i++) {
        observe(arr[i]);
      }
    }

    export default observeArr;
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272/index.html" "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272/index.html" index 5b911dcc..c7bd575d 100644 --- "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272/index.html" +++ "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    什么是组件化

    @@ -27,6 +27,6 @@

    代码main.js​

    const { createApp } = Vue;

    const TodoList = {
      data() {
        return {
          todoList: [
            {
              id: 1,
              content: '123',
              completed: false,
            },
            {
              id: 2,
              content: '234',
              completed: false,
            },
            {
              id: 3,
              content: '345',
              completed: false,
            },
          ],
        };
      },
      methods: {
        removeTodo(id) {
          this.todoList = this.todoList.filter((item) => item.id !== id);
        },
        addTodo(value) {
          this.todoList.push({
            id: new Date().getTime(),
            content: value,
            completed: false,
          });
        },
        toggleCompleted(id) {
          this.todoList = this.todoList.map((item) => {
            if (item.id === id) {
              item.completed = !item.completed;
            }
            return item;
          });
        },
      },
    };

    const app = createApp(TodoList);

    app.component('todo-form', {
      data() {
        return {
          inputValue: '',
        };
      },
      template: `
            <div>
                <input type="text" placeholder="请输入" v-model="inputValue"/>
                <button @click="addTodo">增加</button>
            </div>
        `,
      methods: {
        addTodo() {
          this.$emit('add-todo', this.inputValue);
          this.inputValue = '';
        },
      },
    });

    app.component('todo-item', {
      props: ['todo'],
      template: `
            <li>
                <input
                    type="checkbox"
                    :checked="todo.completed"
                    @click="toggleCompleted(todo.id)"
                />
                <span 
                    :style="{
                        textDecoration: todo.completed ? 'line-through' : 'none'
                    }"
                >
                    {{ todo.content }}
                </span>
                <button @click="removeTodo(todo.id)">删除</button>
            </li>
        `,
      methods: {
        toggleCompleted(id) {
          this.$emit('toggle-completed', id);
        },
        removeTodo(id) {
          this.$emit('remove-todo', id);
        },
      },
    });

    app.mount('#app');

    index.js​

    -
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TodoList</title>
      </head>
      <body>
        <div id="app">
          <div class="todo-list">
            <div>
              <todo-form @add-todo="addTodo"></todo-form>
            </div>
            <div>
              <ul>
                <todo-item v-for="item in todoList" :key="item.id" :todo="item" @toggle-completed="toggleCompleted" @remove-todo="removeTodo"></todo-item>
              </ul>
            </div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@3.1.2/dist/vue.global.js"></script>
        <script src="main.js"></script>
      </body>
    </html>
    编辑此页
    最后由 sumingcheng 于 更新
    +
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TodoList</title>
      </head>
      <body>
        <div id="app">
          <div class="todo-list">
            <div>
              <todo-form @add-todo="addTodo"></todo-form>
            </div>
            <div>
              <ul>
                <todo-item v-for="item in todoList" :key="item.id" :todo="item" @toggle-completed="toggleCompleted" @remove-todo="removeTodo"></todo-item>
              </ul>
            </div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@3.1.2/dist/vue.global.js"></script>
        <script src="main.js"></script>
      </body>
    </html>
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\350\247\202\345\257\237\350\200\205\345\222\214\345\217\221\345\270\203\350\256\242\351\230\205/index.html" "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\350\247\202\345\257\237\350\200\205\345\222\214\345\217\221\345\270\203\350\256\242\351\230\205/index.html" index 82fdf70b..055ca3c9 100644 --- "a/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\350\247\202\345\257\237\350\200\205\345\222\214\345\217\221\345\270\203\350\256\242\351\230\205/index.html" +++ "b/docs/Frontend/Vue/Vue\350\277\233\351\230\266\347\211\271\346\200\247/\350\247\202\345\257\237\350\200\205\345\222\214\345\217\221\345\270\203\350\256\242\351\230\205/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    观察者模式

    @@ -33,6 +33,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\345\270\270\350\247\201\351\227\256\351\242\230\350\247\243\345\206\263/vue-cli--v-\346\227\240\346\263\225\345\212\240\350\275\275\346\226\207\344\273\266-\347\246\201\346\255\242\350\277\220\350\241\214\350\204\232\346\234\254/index.html" "b/docs/Frontend/Vue/\345\270\270\350\247\201\351\227\256\351\242\230\350\247\243\345\206\263/vue-cli--v-\346\227\240\346\263\225\345\212\240\350\275\275\346\226\207\344\273\266-\347\246\201\346\255\242\350\277\220\350\241\214\350\204\232\346\234\254/index.html" index f195ec1c..31dad867 100644 --- "a/docs/Frontend/Vue/\345\270\270\350\247\201\351\227\256\351\242\230\350\247\243\345\206\263/vue-cli--v-\346\227\240\346\263\225\345\212\240\350\275\275\346\226\207\344\273\266-\347\246\201\346\255\242\350\277\220\350\241\214\350\204\232\346\234\254/index.html" +++ "b/docs/Frontend/Vue/\345\270\270\350\247\201\351\227\256\351\242\230\350\247\243\345\206\263/vue-cli--v-\346\227\240\346\263\225\345\212\240\350\275\275\346\226\207\344\273\266-\347\246\201\346\255\242\350\277\220\350\241\214\350\204\232\346\234\254/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    PowerShell 执行策略设置

    @@ -22,6 +22,6 @@

    错误内

    我电脑是刚买的，系统是 Windows 家庭版，就出现了这种问题。

    解决方法

    -
    运行命令：set-ExecutionPolicy RemoteSigned 后出现下面截图 选: Y 即可
    编辑此页
    最后由 sumingcheng 于 更新
    +
    运行命令：set-ExecutionPolicy RemoteSigned 后出现下面截图 选: Y 即可
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-for\345\222\214v-if-\350\201\224\345\220\210\344\275\277\347\224\250\346\214\207\345\215\227/index.html" "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-for\345\222\214v-if-\350\201\224\345\220\210\344\275\277\347\224\250\346\214\207\345\215\227/index.html" index a4f448ba..d5c79e48 100644 --- "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-for\345\222\214v-if-\350\201\224\345\220\210\344\275\277\347\224\250\346\214\207\345\215\227/index.html" +++ "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-for\345\222\214v-if-\350\201\224\345\220\210\344\275\277\347\224\250\346\214\207\345\215\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    v-for 和 v-if 联合使用指南

    @@ -36,6 +36,6 @@

    为什么 Vue2 中 v-for 的优先级高于 v-if？

    从逻辑层级来看​

    if 决定是否渲染，for 决定如何渲染。

    if 优先于 for，首先决定是否渲染，再决定渲染的方式。

    -

    从性能角度，先决定是否渲染，避免不必要的渲染判断，提高性能。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    从性能角度，先决定是否渲染，避免不必要的渲染判断，提高性能。

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-if-v-show/index.html" "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-if-v-show/index.html" index a6a6cb48..9b67c3c2 100644 --- "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-if-v-show/index.html" +++ "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/v-if-v-show/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    v-if 和 v-show 比较

    @@ -31,6 +31,6 @@

    总结

  • v-show 通过 display 来控制显示和隐藏。
  • v-if 将组建进行真正的渲染和销毁，不是控制显示和隐藏。
  • 频繁切换使用v-show，不频繁使用v-if。
    • -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\344\273\216Webpack\345\210\260v-show-v-if/index.html" "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\344\273\216Webpack\345\210\260v-show-v-if/index.html" index 0358a990..de51979f 100644 --- "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\344\273\216Webpack\345\210\260v-show-v-if/index.html" +++ "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\344\273\216Webpack\345\210\260v-show-v-if/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    GitHub - sumingcheng/From-webpack-to-vue-loader: 利用HtmlWebpackPlugin实现vue-loader的功能

    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\210\227\350\241\250\346\270\262\346\237\223/index.html" "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\210\227\350\241\250\346\270\262\346\237\223/index.html" index 82a4dc2d..24c7d047 100644 --- "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\210\227\350\241\250\346\270\262\346\237\223/index.html" +++ "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\210\227\350\241\250\346\270\262\346\237\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    v-for 列表渲染

    @@ -86,6 +86,6 @@

    :item=&
  • 避免v-for与组件功能和数据产生耦合
  • 保证组件有合理的配置性
  • 达到最好的复用效果
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\260\261\345\234\260\346\233\264\346\226\260\345\222\214v-for\347\232\204key\345\261\236\346\200\247/index.html" "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\260\261\345\234\260\346\233\264\346\226\260\345\222\214v-for\347\232\204key\345\261\236\346\200\247/index.html" index 2c23786f..91bcca38 100644 --- "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\260\261\345\234\260\346\233\264\346\226\260\345\222\214v-for\347\232\204key\345\261\236\346\200\247/index.html" +++ "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\345\260\261\345\234\260\346\233\264\346\226\260\345\222\214v-for\347\232\204key\345\261\236\346\200\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    就地更新和 v-for 的 key 属性

    @@ -45,6 +45,6 @@

    代码演示

    import Vue from 'vue';

    const App = {
      data() {
        return {
          items: [
            { id: 1, name: 'item-1' },
            { id: 2, name: 'item-2' },
            { id: 3, name: 'item-3' },
          ],
        };
      },
      template: `
        <div>
          <ul>
            <li v-for="item in items" :key="item.id">
              <span>{{ item.name }}</span>
              <button @click="removeItemById(item.id)">DELETE</button>
            </li>
          </ul>
        </div>
      `,
      methods: {
        removeItemById(id) {
          this.items = this.items.filter((item) => item.id !== id);
        },
      },
    };

    new Vue({
      render: (h) => h(App),
    }).$mount('#app');

    执行上述代码后，删除任意项都不会影响其他项的内容，确保渲染的正确性。

    图片示例

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\346\235\241\344\273\266\346\270\262\346\237\223/index.html" "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\346\235\241\344\273\266\346\270\262\346\237\223/index.html" index 2f77b21c..510a74d9 100644 --- "a/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\346\235\241\344\273\266\346\270\262\346\237\223/index.html" +++ "b/docs/Frontend/Vue/\346\235\241\344\273\266\346\270\262\346\237\223\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223/\346\235\241\344\273\266\346\270\262\346\237\223/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    v-if v-else-if v-else

    @@ -36,6 +36,6 @@

    四、使用场景

    1. 切换频繁用v-show
    2. 切换少，操作不频繁，加载时不需要视图，可以用v-if
      3. -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Backend/\345\215\240\344\275\215/index.html" "b/docs/Interview/Backend/\345\215\240\344\275\215/index.html" index 52a0c01c..e81f75ed 100644 --- "a/docs/Interview/Backend/\345\215\240\344\275\215/index.html" +++ "b/docs/Interview/Backend/\345\215\240\344\275\215/index.html" @@ -11,10 +11,10 @@ - - + + -
    跳到主要内容

    占位

    占位

    编辑此页
    最后由 sumingcheng 于 更新
    +
    跳到主要内容

    占位

    占位

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/CSS-\345\261\236\346\200\247\350\256\241\347\256\227\350\277\207\347\250\213/index.html" "b/docs/Interview/Frontend/CSS-\345\261\236\346\200\247\350\256\241\347\256\227\350\277\207\347\250\213/index.html" index 104f022d..2a12f765 100644 --- "a/docs/Interview/Frontend/CSS-\345\261\236\346\200\247\350\256\241\347\256\227\350\277\207\347\250\213/index.html" +++ "b/docs/Interview/Frontend/CSS-\345\261\236\346\200\247\350\256\241\347\256\227\350\277\207\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    CSS 属性计算过程

    @@ -88,6 +88,6 @@

    面试题
    div {
      color: red;
    }

    大家能说出为什么会呈现这样的结果吗？

    解答如下：

    -

    实际上原因很简单，因为 a 元素在用户代理样式表中已经设置了 color 属性的值，因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表，都没有对此属性进行声明，然而由于 color 属性是可以继承的，因此 p 元素的 color 属性值通过继承来自于父元素。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    实际上原因很简单，因为 a 元素在用户代理样式表中已经设置了 color 属性的值，因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表，都没有对此属性进行声明，然而由于 color 属性是可以继承的，因此 p 元素的 color 属性值通过继承来自于父元素。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git a/docs/Interview/Frontend/await-async/index.html b/docs/Interview/Frontend/await-async/index.html index a3cbf4f4..26ce247e 100644 --- a/docs/Interview/Frontend/await-async/index.html +++ b/docs/Interview/Frontend/await-async/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Async/Await

    @@ -78,6 +78,6 @@ 

    async function* asyncGenerator() {
      yield '数据1';
      yield '数据2';
      yield '数据3';
    }

    (async () => {
      for await (const data of asyncGenerator()) {
        console.log(data);
      }
    })();

    了解其他与 async/await 相关的 ES 提议，如顶级 await。​

    顶级 await 是一个提议，允许在模块的顶层作用域中使用 await，而无需将代码封装在 async 函数中。这简化了模块初始化时的异步操作。

    -
    // 顶级 await 示例
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
    编辑此页
    最后由 sumingcheng 于 更新
    +
    // 顶级 await 示例
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\344\273\216\350\276\223\345\205\245-URL-\345\210\260\351\241\265\351\235\242\345\261\225\347\244\272\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210/index.html" "b/docs/Interview/Frontend/\344\273\216\350\276\223\345\205\245-URL-\345\210\260\351\241\265\351\235\242\345\261\225\347\244\272\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210/index.html" index 0e3e48dd..83e8c360 100644 --- "a/docs/Interview/Frontend/\344\273\216\350\276\223\345\205\245-URL-\345\210\260\351\241\265\351\235\242\345\261\225\347\244\272\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210/index.html" +++ "b/docs/Interview/Frontend/\344\273\216\350\276\223\345\205\245-URL-\345\210\260\351\241\265\351\235\242\345\261\225\347\244\272\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    在浏览器里，从输入 URL 到页面展示，这中间发生了什么？

    @@ -226,6 +226,6 @@

    2
  • 合理使用 will-change 属性，提示浏览器提前创建独立图层
  • 控制图层数量，避免过多图层导致内存占用过大
  • 使用 requestAnimationFrame 来执行动画，保证动画流畅
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\345\256\214\347\276\216\347\232\204\346\267\261\346\213\267\350\264\235\345\272\224\350\257\245\346\200\216\344\271\210\345\206\231/index.html" "b/docs/Interview/Frontend/\345\256\214\347\276\216\347\232\204\346\267\261\346\213\267\350\264\235\345\272\224\350\257\245\346\200\216\344\271\210\345\206\231/index.html" index c882c25c..9825029f 100644 --- "a/docs/Interview/Frontend/\345\256\214\347\276\216\347\232\204\346\267\261\346\213\267\350\264\235\345\272\224\350\257\245\346\200\216\344\271\210\345\206\231/index.html" +++ "b/docs/Interview/Frontend/\345\256\214\347\276\216\347\232\204\346\267\261\346\213\267\350\264\235\345\272\224\350\257\245\346\200\216\344\271\210\345\206\231/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    深度拷贝技术点

    @@ -36,6 +36,6 @@

    Date, RegExp, 和 Error​

    这些对象类型有特殊的构造函数，我利用它们的构造函数来复制它们的值。例如，使用 new Date(originalDate) 来复制日期对象，确保其内部状态保持一致。

    -
    function deepClone(obj) {
      const visited = new WeakMap();

      function createClonedObject(currentObj) {
        const type = Object.prototype.toString.call(currentObj);
        switch (type) {
          case '[object Array]':
            return [];
          case '[object Date]':
            return new Date(currentObj);
          case '[object RegExp]':
            return new RegExp(currentObj);
          case '[object Set]':
            return new Set();
          case '[object Map]':
            return new Map();
          case '[object Function]':
            return function () {
              return currentObj.apply(this, arguments);
            };
          case '[object Error]':
            return new Error(currentObj.message);
          default:
            return Object.create(Object.getPrototypeOf(currentObj));
        }
      }

      function cloneRecursive(currentObj) {
        if (currentObj === null || typeof currentObj !== 'object') return currentObj;

        if (visited.has(currentObj)) return visited.get(currentObj);

        const clonedObj = createClonedObject(currentObj);

        visited.set(currentObj, clonedObj);

        if (currentObj instanceof Set) {
          for (let value of currentObj) {
            clonedObj.add(cloneRecursive(value));
          }
        } else if (currentObj instanceof Map) {
          for (let [key, value] of currentObj) {
            clonedObj.set(cloneRecursive(key), cloneRecursive(value));
          }
        } else {
          copyProperties(currentObj, clonedObj);
        }

        return clonedObj;
      }

      function copyProperties(source, target) {
        const allKeys = [...Object.getOwnPropertyNames(source), ...Object.getOwnPropertySymbols(source)];
        for (let key of allKeys) {
          let descriptor = Object.getOwnPropertyDescriptor(source, key);
          if (descriptor.enumerable && !descriptor.get && !descriptor.set) {
            target[key] = cloneRecursive(source[key]);
          } else {
            if (descriptor.value) descriptor.value = cloneRecursive(descriptor.value);
            Object.defineProperty(target, key, descriptor);
          }
        }
      }

      return cloneRecursive(obj);
    }

    // 使用示例
    const originalObject = {
      number: 123,
      string: 'Hello World',
      bool: true,
      nullValue: null,
      undefinedValue: undefined,
      date: new Date(),
      regexp: /test/g,
      array: [1, 2, 3],
      map: new Map([['key', 'value']]),
      set: new Set([1, 2, 3]),
      symbol: Symbol('test'),
      nestedObject: {
        number: 456,
        string: 'Nested Hello World',
      },
      func: function () {
        return "I'm a function";
      },
      arrowFunction: () => "I'm an arrow function",
    };

    // 创建循环引用
    originalObject.self = originalObject;
    originalObject.nestedObject.parent = originalObject;

    const clonedObject = deepClone(originalObject);

    // 一些测试断言
    console.log(clonedObject !== originalObject); // true
    console.log(clonedObject.self !== originalObject.self); // true
    console.log(clonedObject.nestedObject.parent !== originalObject.nestedObject.parent); // true
    console.log(clonedObject.array !== originalObject.array); // true
    console.log(clonedObject.func() === originalObject.func()); // true
    console.log(clonedObject.arrowFunction() === originalObject.arrowFunction()); // true
    console.log(clonedObject.date.getTime() === originalObject.date.getTime()); // true
    console.log(clonedObject.regexp.source === originalObject.regexp.source); // true
    编辑此页
    最后由 sumingcheng 于 更新
    +
    function deepClone(obj) {
      const visited = new WeakMap();

      function createClonedObject(currentObj) {
        const type = Object.prototype.toString.call(currentObj);
        switch (type) {
          case '[object Array]':
            return [];
          case '[object Date]':
            return new Date(currentObj);
          case '[object RegExp]':
            return new RegExp(currentObj);
          case '[object Set]':
            return new Set();
          case '[object Map]':
            return new Map();
          case '[object Function]':
            return function () {
              return currentObj.apply(this, arguments);
            };
          case '[object Error]':
            return new Error(currentObj.message);
          default:
            return Object.create(Object.getPrototypeOf(currentObj));
        }
      }

      function cloneRecursive(currentObj) {
        if (currentObj === null || typeof currentObj !== 'object') return currentObj;

        if (visited.has(currentObj)) return visited.get(currentObj);

        const clonedObj = createClonedObject(currentObj);

        visited.set(currentObj, clonedObj);

        if (currentObj instanceof Set) {
          for (let value of currentObj) {
            clonedObj.add(cloneRecursive(value));
          }
        } else if (currentObj instanceof Map) {
          for (let [key, value] of currentObj) {
            clonedObj.set(cloneRecursive(key), cloneRecursive(value));
          }
        } else {
          copyProperties(currentObj, clonedObj);
        }

        return clonedObj;
      }

      function copyProperties(source, target) {
        const allKeys = [...Object.getOwnPropertyNames(source), ...Object.getOwnPropertySymbols(source)];
        for (let key of allKeys) {
          let descriptor = Object.getOwnPropertyDescriptor(source, key);
          if (descriptor.enumerable && !descriptor.get && !descriptor.set) {
            target[key] = cloneRecursive(source[key]);
          } else {
            if (descriptor.value) descriptor.value = cloneRecursive(descriptor.value);
            Object.defineProperty(target, key, descriptor);
          }
        }
      }

      return cloneRecursive(obj);
    }

    // 使用示例
    const originalObject = {
      number: 123,
      string: 'Hello World',
      bool: true,
      nullValue: null,
      undefinedValue: undefined,
      date: new Date(),
      regexp: /test/g,
      array: [1, 2, 3],
      map: new Map([['key', 'value']]),
      set: new Set([1, 2, 3]),
      symbol: Symbol('test'),
      nestedObject: {
        number: 456,
        string: 'Nested Hello World',
      },
      func: function () {
        return "I'm a function";
      },
      arrowFunction: () => "I'm an arrow function",
    };

    // 创建循环引用
    originalObject.self = originalObject;
    originalObject.nestedObject.parent = originalObject;

    const clonedObject = deepClone(originalObject);

    // 一些测试断言
    console.log(clonedObject !== originalObject); // true
    console.log(clonedObject.self !== originalObject.self); // true
    console.log(clonedObject.nestedObject.parent !== originalObject.nestedObject.parent); // true
    console.log(clonedObject.array !== originalObject.array); // true
    console.log(clonedObject.func() === originalObject.func()); // true
    console.log(clonedObject.arrowFunction() === originalObject.arrowFunction()); // true
    console.log(clonedObject.date.getTime() === originalObject.date.getTime()); // true
    console.log(clonedObject.regexp.source === originalObject.regexp.source); // true
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\345\256\236\347\216\260-EventHub/index.html" "b/docs/Interview/Frontend/\345\256\236\347\216\260-EventHub/index.html" index d6384208..9f901a0e 100644 --- "a/docs/Interview/Frontend/\345\256\236\347\216\260-EventHub/index.html" +++ "b/docs/Interview/Frontend/\345\256\236\347\216\260-EventHub/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    实现 EventHub 的面试要点与实践

    @@ -27,6 +27,6 @@

    实现步

    EventHub 实例​

    /*
     * on 方法：注册事件监听器，本质上是向数组中添加回调函数
     * emit 方法：发射事件，本质上是遍历数组并执行回调函数
     * off 方法：移除事件监听器，本质上是从数组中移除回调函数
     * once 方法：注册只触发一次的事件监听器，本质上是在回调函数执行后移除该回调函数
     * bind 方法：在指定上下文中注册事件监听器，本质上是利用 on 方法注册回调函数时，使用 bind 方法绑定上下文
     * 链式调用：所有方法都返回 this，从而支持链式调用
     */

    class EventHub {
      constructor() {
        // 存储所有的事件及其对应的回调
        this.events = {};
      }

      // 注册事件监听器
      on(event, callback) {
        if (!this.events[event]) {
          this.events[event] = [];
        }
        this.events[event].push(callback);
        return this; // 支持链式调用
      }

      // 发射事件
      emit(event, ...args) {
        if (this.hasListener(event)) {
          new Promise((resolve, reject) => {
            const listeners = [...this.events[event]];
            for (let callback of listeners) {
              try {
                callback(...args);
              } catch (error) {
                // 如果 error 事件的监听器也出错，直接拒绝 Promise
                if (event === 'error') {
                  reject(error);
                  return;
                } else {
                  this.emit('error', error);
                }
              }
            }
            resolve();
          }).catch((error) => {
            console.error('emit 方法中的错误:', error);
          });
        }
        return this;
      }

      // 移除事件监听器
      off(event, callback) {
        if (this.hasListener(event)) {
          this.events[event] = this.events[event].filter((cb) => cb !== callback);
        }
        return this;
      }

      // 注册只触发一次的事件监听器
      once(event, callback) {
        const wrappedCallback = (...args) => {
          callback(...args);
          this.off(event, wrappedCallback);
        };
        return this.on(event, wrappedCallback); // 利用 on 方法进行注册
      }

      // 在指定上下文中注册事件监听器
      bind(event, callback, context) {
        return this.on(event, callback.bind(context));
      }

      // 检查指定事件是否有监听器
      hasListener(event) {
        return this.events[event] && this.events[event].length > 0;
      }

      // 获取所有已注册的事件类型
      getEventTypes() {
        return Object.keys(this.events);
      }
    }

    // 使用示例
    // 获取 EventHub 的实例
    const eventHub = new EventHub();

    // 注册事件监听器
    eventHub.on('data', (data) => {
      console.log(data);
      throw new Error('数据监听器中的示例错误');
    });

    eventHub.once('data', (data) => {
      console.log(`一次性监听: ${data}`);
    });

    const errorCallback = (error) => {
      console.log(`错误: ${error.message}`);
    };
    eventHub.on('error', errorCallback);

    const user = {
      name: 'Alice',
      showName() {
        console.log(`你好，我的名字是 ${this.name}`);
      },
    };
    eventHub.bind('showName', user.showName, user);

    // 发射事件
    console.log('发射事件前');
    eventHub.emit('data', '一些数据');
    eventHub.emit('showName');
    console.log('发射事件后');

    // 移除事件监听器
    eventHub.off('error', errorCallback);

    // 检查是否有监听器
    console.log('是否有 data 监听器:', eventHub.hasListener('data')); // true
    console.log('是否有 error 监听器:', eventHub.hasListener('error')); // false

    // 获取所有的事件类型
    console.log('事件类型:', eventHub.getEventTypes()); // ['data', 'error', 'showName']

    使用 Jest 测试 EventHub​

    -
    const EventHub = require('./EventHub'); // 调整路径以匹配你的 EventHub 文件位置

    describe('EventHub', () => {
      let eventHub;

      beforeEach(() => {
        eventHub = new EventHub();
      });

      test('应能注册并触发事件', () => {
        const callback = jest.fn();
        eventHub.on('testEvent', callback);

        eventHub.emit('testEvent', '测试负载');

        expect(callback).toHaveBeenCalledWith('测试负载');
      });

      test('应能注册并仅触发一次事件', () => {
        const callback = jest.fn();
        eventHub.once('testEvent', callback);

        eventHub.emit('testEvent', '测试负载');
        eventHub.emit('testEvent', '测试负载');

        expect(callback).toHaveBeenCalledTimes(1);
      });

      test('应能注销事件', () => {
        const callback = jest.fn();
        eventHub.on('testEvent', callback);
        eventHub.off('testEvent', callback);

        eventHub.emit('testEvent', '测试负载');

        expect(callback).not.toHaveBeenCalled();
      });
    });
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const EventHub = require('./EventHub'); // 调整路径以匹配你的 EventHub 文件位置

    describe('EventHub', () => {
      let eventHub;

      beforeEach(() => {
        eventHub = new EventHub();
      });

      test('应能注册并触发事件', () => {
        const callback = jest.fn();
        eventHub.on('testEvent', callback);

        eventHub.emit('testEvent', '测试负载');

        expect(callback).toHaveBeenCalledWith('测试负载');
      });

      test('应能注册并仅触发一次事件', () => {
        const callback = jest.fn();
        eventHub.once('testEvent', callback);

        eventHub.emit('testEvent', '测试负载');
        eventHub.emit('testEvent', '测试负载');

        expect(callback).toHaveBeenCalledTimes(1);
      });

      test('应能注销事件', () => {
        const callback = jest.fn();
        eventHub.on('testEvent', callback);
        eventHub.off('testEvent', callback);

        eventHub.emit('testEvent', '测试负载');

        expect(callback).not.toHaveBeenCalled();
      });
    });
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\345\256\236\347\216\260\345\255\227\347\254\246\344\270\262\345\244\247\346\225\260\347\233\270\345\212\240/index.html" "b/docs/Interview/Frontend/\345\256\236\347\216\260\345\255\227\347\254\246\344\270\262\345\244\247\346\225\260\347\233\270\345\212\240/index.html" index 3d3784d0..cf7c28b5 100644 --- "a/docs/Interview/Frontend/\345\256\236\347\216\260\345\255\227\347\254\246\344\270\262\345\244\247\346\225\260\347\233\270\345\212\240/index.html" +++ "b/docs/Interview/Frontend/\345\256\236\347\216\260\345\255\227\347\254\246\344\270\262\345\244\247\346\225\260\347\233\270\345\212\240/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    大数相加

    @@ -69,6 +69,6 @@

    最佳实

  • 性能优化：对于非常长的数字，可以考虑使用更高效的数据结构或算法来优化性能。

    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\346\211\213\345\206\231-Promise-\345\221\250\350\276\271\346\226\271\346\263\225/index.html" "b/docs/Interview/Frontend/\346\211\213\345\206\231-Promise-\345\221\250\350\276\271\346\226\271\346\263\225/index.html" index ab3c44e2..852c3567 100644 --- "a/docs/Interview/Frontend/\346\211\213\345\206\231-Promise-\345\221\250\350\276\271\346\226\271\346\263\225/index.html" +++ "b/docs/Interview/Frontend/\346\211\213\345\206\231-Promise-\345\221\250\350\276\271\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Promise 深入解析与手写实现

    @@ -252,6 +252,6 @@

    错

    多重错误处理​

    在链式调用中，错误可以在任意位置被捕获。以下示例展示了多个 catch 的用法。

    new Promise((resolve, reject) => {
      resolve('任务1');
    })
      .then((value) => {
        console.log(value); // 输出: "任务1"
        return '任务2';
      })
      .then((value) => {
        console.log(value); // 输出: "任务2"
        throw new Error('任务3 出错');
      })
      .catch((error) => {
        console.error('捕获错误:', error.message); // 输出: "捕获错误: 任务3 出错"
        return '错误处理后继续';
      })
      .then((value) => {
        console.log(value); // 输出: "错误处理后继续"
      })
      .catch((error) => {
        console.error(error);
      });
    -

    在此示例中，第一个 catch 捕获了第三个任务的错误，并通过返回一个值继续了链式调用。第二个 catch 只会捕获后续链中的错误。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在此示例中，第一个 catch 捕获了第三个任务的错误，并通过返回一个值继续了链式调用。第二个 catch 只会捕获后续链中的错误。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\346\211\213\345\206\231\351\233\206\345\220\210\346\226\271\346\263\225/index.html" "b/docs/Interview/Frontend/\346\211\213\345\206\231\351\233\206\345\220\210\346\226\271\346\263\225/index.html" index 2caa9949..64234ce5 100644 --- "a/docs/Interview/Frontend/\346\211\213\345\206\231\351\233\206\345\220\210\346\226\271\346\263\225/index.html" +++ "b/docs/Interview/Frontend/\346\211\213\345\206\231\351\233\206\345\220\210\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    手写实现常见的 JavaScript 函数和概念

    @@ -511,6 +511,6 @@

    优化
  • 性能优化：对于非常大的数，可以优化字符串操作，减少性能开销。

    • 示例​

    -
    const a = '9999999999999999999999999999';
    const b = '1';
    console.log(addBigNumbers(a, b)); // 输出: '10000000000000000000000000000'
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const a = '9999999999999999999999999999';
    const b = '1';
    console.log(addBigNumbers(a, b)); // 输出: '10000000000000000000000000000'
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\346\237\257\351\207\214\345\214\226-\351\253\230\351\230\266\345\207\275\346\225\260/index.html" "b/docs/Interview/Frontend/\346\237\257\351\207\214\345\214\226-\351\253\230\351\230\266\345\207\275\346\225\260/index.html" index 7e3fc7bf..50e148c6 100644 --- "a/docs/Interview/Frontend/\346\237\257\351\207\214\345\214\226-\351\253\230\351\230\266\345\207\275\346\225\260/index.html" +++ "b/docs/Interview/Frontend/\346\237\257\351\207\214\345\214\226-\351\253\230\351\230\266\345\207\275\346\225\260/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    柯里化与高阶函数

    @@ -38,6 +38,6 @@

    高阶函

    接受一个或多个函数作为参数
    返回一个函数作为结果

    在 JavaScript 中，高阶函数常用于处理数组和集合。例如，Array.prototype.map 方法接受一个函数作为参数，并将其应用到数组的每个元素上。

    -
    const numbers = [1, 2, 3, 4, 5];
    const doubled = numbers.map(function (number) {
      return number * 2;
    });
    console.log(doubled); // 输出 [2, 4, 6, 8, 10]

    编辑此页
    最后由 sumingcheng 于 更新
    +
    const numbers = [1, 2, 3, 4, 5];
    const doubled = numbers.map(function (number) {
      return number * 2;
    });
    console.log(doubled); // 输出 [2, 4, 6, 8, 10]
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\346\265\217\350\247\210\345\231\250\346\230\257\345\246\202\344\275\225\346\270\262\346\237\223\351\241\265\351\235\242\347\232\204/index.html" "b/docs/Interview/Frontend/\346\265\217\350\247\210\345\231\250\346\230\257\345\246\202\344\275\225\346\270\262\346\237\223\351\241\265\351\235\242\347\232\204/index.html" index d31c410d..b88ee737 100644 --- "a/docs/Interview/Frontend/\346\265\217\350\247\210\345\231\250\346\230\257\345\246\202\344\275\225\346\270\262\346\237\223\351\241\265\351\235\242\347\232\204/index.html" +++ "b/docs/Interview/Frontend/\346\265\217\350\247\210\345\231\250\346\230\257\345\246\202\344\275\225\346\270\262\346\237\223\351\241\265\351\235\242\347\232\204/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器是如何渲染页面的？

    @@ -88,6 +88,6 @@

    编辑此页
    最后由 sumingcheng 于 更新

    +

    使用 transform 进行元素的位移、缩放、旋转等操作，可以充分利用 GPU 加速，提升渲染性能和动画流畅度。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\350\212\202\346\265\201-\351\230\262\346\212\226/index.html" "b/docs/Interview/Frontend/\350\212\202\346\265\201-\351\230\262\346\212\226/index.html" index 84ea7cde..b5208522 100644 --- "a/docs/Interview/Frontend/\350\212\202\346\265\201-\351\230\262\346\212\226/index.html" +++ "b/docs/Interview/Frontend/\350\212\202\346\265\201-\351\230\262\346\212\226/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    防抖与节流详解

    @@ -29,6 +29,6 @@

    节流

    其他注意事项​

    在实现防抖和节流时，确保处理函数在正确的上下文中执行，并传递正确的参数是至关重要的。这不仅关系到函数的正常运行，还影响到应用的整体稳定性。在组件卸载或对象销毁时，务必清除所有未完成的定时器，以防止内存泄漏和潜在的错误。

    在复杂的应用程序中，进行充分的测试以确保防抖和节流功能按预期工作是必要的。这包括验证处理函数的执行频率和触发时机是否符合设计要求。此外，应避免过度使用防抖和节流，只有在确定事件处理函数因高频率触发可能导致性能问题时，才应采用这些优化策略。

    -

    通过合理应用防抖和节流，可以显著提升应用的性能和用户体验，但前提是要根据具体需求进行谨慎的设计和实现。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过合理应用防抖和节流，可以显著提升应用的性能和用户体验，但前提是要根据具体需求进行谨慎的设计和实现。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Interview/Frontend/\351\200\222\345\275\222\344\270\255\347\232\204-Memorize/index.html" "b/docs/Interview/Frontend/\351\200\222\345\275\222\344\270\255\347\232\204-Memorize/index.html" index aabc797f..c5e4f9f5 100644 --- "a/docs/Interview/Frontend/\351\200\222\345\275\222\344\270\255\347\232\204-Memorize/index.html" +++ "b/docs/Interview/Frontend/\351\200\222\345\275\222\344\270\255\347\232\204-Memorize/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    递归中的记忆化应用

    @@ -29,6 +29,6 @@ 

    function fibonacciWithMemo(n, memo = []) {
      if (memo[n] !== undefined) return memo[n];

      if (n <= 1) return n;

      memo[n] = fibonacciWithMemo(n - 1, memo) + fibonacciWithMemo(n - 2, memo);

      return memo[n];
    }

    在这个版本中，memo 数组用于存储每个计算过的斐波那契数。当 fibonacciWithMemo 被调用时，它首先检查 memo 中是否已有 n 对应的值。如果有，则直接返回该值。如果没有，则递归计算，并将结果存储在 memo 中。

    这种方法不仅提高了算法的效率，还减少了递归调用的深度，从而降低了栈溢出的风险。

    -

    在面试中，遇到相关问题时，可以直接手写这个版本的代码。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在面试中，遇到相关问题时，可以直接手写这个版本的代码。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/AJAX\347\211\210\346\234\254-\345\223\215\345\272\224\347\212\266\346\200\201-\350\266\205\346\227\266\350\256\276\347\275\256-\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245/index.html" "b/docs/Network/AJAX/AJAX\347\211\210\346\234\254-\345\223\215\345\272\224\347\212\266\346\200\201-\350\266\205\346\227\266\350\256\276\347\275\256-\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245/index.html" index 14692bbb..ac6575fd 100644 --- "a/docs/Network/AJAX/AJAX\347\211\210\346\234\254-\345\223\215\345\272\224\347\212\266\346\200\201-\350\266\205\346\227\266\350\256\276\347\275\256-\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245/index.html" +++ "b/docs/Network/AJAX/AJAX\347\211\210\346\234\254-\345\223\215\345\272\224\347\212\266\346\200\201-\350\266\205\346\227\266\350\256\276\347\275\256-\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    AJAX 的版本与特性

    @@ -83,6 +83,6 @@

    原生 AJAX 的使用场景

  • 一些对性能要求比较高的场景,例如游戏开发,也会选择使用原生 AJAX 以获得更好的性能。

    • -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/Axios\345\237\272\347\241\200\344\275\277\347\224\250/index.html" "b/docs/Network/AJAX/Axios\345\237\272\347\241\200\344\275\277\347\224\250/index.html" index 40c44a51..7e14ac3f 100644 --- "a/docs/Network/AJAX/Axios\345\237\272\347\241\200\344\275\277\347\224\250/index.html" +++ "b/docs/Network/AJAX/Axios\345\237\272\347\241\200\344\275\277\347\224\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Axios 基础使用

    @@ -38,6 +38,6 @@

    GET 请求< 
    /api/invoice.js
    export function invoiceExport(data) {
      return request({
        url: '/invoice/issueinfo/export',
        method: 'get',
        params: data
      })
    }

    对于 GET 请求,我们直接将请求数据放在params参数中即可。

    POST 请求​

    -
    /api/invoice.js
    import qs from 'qs'

    export function queryInvoiceInformation(data) {
      return request({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        url: '/invoice/issueinfo/manage',
        method: 'post',
        data: qs.stringify(data)
      })
    }
    编辑此页
    最后由 sumingcheng 于 更新
    +
    /api/invoice.js
    import qs from 'qs'

    export function queryInvoiceInformation(data) {
      return request({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        url: '/invoice/issueinfo/manage',
        method: 'post',
        data: qs.stringify(data)
      })
    }
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/JSONP\350\267\250\345\237\237/index.html" "b/docs/Network/AJAX/JSONP\350\267\250\345\237\237/index.html" index 84a48111..6689dcdf 100644 --- "a/docs/Network/AJAX/JSONP\350\267\250\345\237\237/index.html" +++ "b/docs/Network/AJAX/JSONP\350\267\250\345\237\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +https://github.com/sumingcheng/JavaScript-practise/tree/main/AJAX/baidu_search

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/JSON\345\237\272\347\241\200\344\270\216\346\225\260\346\215\256\350\247\243\346\236\220-JSON\346\226\271\346\263\225-AJAX\345\210\235\350\257\206/index.html" "b/docs/Network/AJAX/JSON\345\237\272\347\241\200\344\270\216\346\225\260\346\215\256\350\247\243\346\236\220-JSON\346\226\271\346\263\225-AJAX\345\210\235\350\257\206/index.html" index cf72be7b..28421778 100644 --- "a/docs/Network/AJAX/JSON\345\237\272\347\241\200\344\270\216\346\225\260\346\215\256\350\247\243\346\236\220-JSON\346\226\271\346\263\225-AJAX\345\210\235\350\257\206/index.html" +++ "b/docs/Network/AJAX/JSON\345\237\272\347\241\200\344\270\216\346\225\260\346\215\256\350\247\243\346\236\220-JSON\346\226\271\346\263\225-AJAX\345\210\235\350\257\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    JSON 基础与数据解析

    @@ -55,6 +55,6 @@

    AJAX 初

    AJAX 全称 Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页内容的技术。它的出现大大提高了 Web 应用的性能和用户体验。

    在 AJAX 中,JSON 通常作为数据响应的格式。当我们发送一个 AJAX 请求时,服务器返回的就是一段 JSON 字符串,然后我们再通过JSON.parse()方法将其解析为 JavaScript 对象,从而实现数据的展示和交互。

    下面是一个使用 jQuery 发送 AJAX 请求并处理 JSON 响应的简单示例

    -
    $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function (res) {
        console.log(res.data);
      },
      error: function (err) {
        console.error(err);
      },
    });

    编辑此页
    最后由 sumingcheng 于 更新
    +
    $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function (res) {
        console.log(res.data);
      },
      error: function (err) {
        console.error(err);
      },
    });
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/cookie\345\242\236\345\210\240\346\224\271\346\237\245-\347\224\250\346\210\267\350\277\275\350\270\252/index.html" "b/docs/Network/AJAX/cookie\345\242\236\345\210\240\346\224\271\346\237\245-\347\224\250\346\210\267\350\277\275\350\270\252/index.html" index 21d44475..5f9a07f3 100644 --- "a/docs/Network/AJAX/cookie\345\242\236\345\210\240\346\224\271\346\237\245-\347\224\250\346\210\267\350\277\275\350\270\252/index.html" +++ "b/docs/Network/AJAX/cookie\345\242\236\345\210\240\346\224\271\346\237\245-\347\224\250\346\210\267\350\277\275\350\270\252/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Cookie 增删改查与用户追踪

    @@ -67,6 +67,6 @@

    单点
  • 将 ident_code 和 token 拼接为 auth,存入 Cookie

    • -

    用户在其他站点访问时,会带上 auth Cookie,SSO 服务器验证其中的 ident_code 和 token,确认是已登录用户,并返回相应的用户信息。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    用户在其他站点访问时,会带上 auth Cookie,SSO 服务器验证其中的 ident_code 和 token,确认是已登录用户,并返回相应的用户信息。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/iframe\347\275\221\351\241\265\345\257\274\350\210\252-\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250/index.html" "b/docs/Network/AJAX/iframe\347\275\221\351\241\265\345\257\274\350\210\252-\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250/index.html" index 991ff7be..5ee42806 100644 --- "a/docs/Network/AJAX/iframe\347\275\221\351\241\265\345\257\274\350\210\252-\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250/index.html" +++ "b/docs/Network/AJAX/iframe\347\275\221\351\241\265\345\257\274\350\210\252-\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    iframe 网页导航与代码编辑器应用

    @@ -39,6 +39,6 @@

    导航操

    代码编辑器应用​

    下面利用 iframe 实现一个简单的代码编辑器页面。

    <!-- 代码编辑器页面 -->
    <div class="code-editor">
      <textarea id="code">
        <!-- 代码编辑区 -->
      </textarea>

      <iframe id="preview"></iframe>
    </div>

    <script>
      // 监听编辑区文本变化
      document.getElementById('code').addEventListener('input', function () {
        updatePreview();
      });

      function updatePreview() {
        var code = document.getElementById('code').value;
        var iframe = document.getElementById('preview');

        // 更新预览iframe的内容
        iframe.contentDocument.body.innerHTML = code;
      }
    </script>

    <style>
      .code-editor {
        display: flex;
      }

      #code {
        width: 50%;
        height: 400px;
      }

      #preview {
        width: 50%;
        height: 400px;
        border: none;
      }
    </style>
    -

    这个例子创建了一个代码编辑区 <textarea> 和预览 <iframe>。当编辑区的内容发生变化时,会触发 updatePreview 函数,更新 iframe 里的内容。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    这个例子创建了一个代码编辑区 <textarea> 和预览 <iframe>。当编辑区的内容发生变化时,会触发 updatePreview 函数,更新 iframe 里的内容。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/\345\256\236\346\210\230-AJAX\344\271\213-\345\244\247\351\231\204\344\273\266\346\226\207\344\273\266\344\270\212\344\274\240\345\212\237\350\203\275-/index.html" "b/docs/Network/AJAX/\345\256\236\346\210\230-AJAX\344\271\213-\345\244\247\351\231\204\344\273\266\346\226\207\344\273\266\344\270\212\344\274\240\345\212\237\350\203\275-/index.html" index bd433502..3d81273a 100644 --- "a/docs/Network/AJAX/\345\256\236\346\210\230-AJAX\344\271\213-\345\244\247\351\231\204\344\273\266\346\226\207\344\273\266\344\270\212\344\274\240\345\212\237\350\203\275-/index.html" +++ "b/docs/Network/AJAX/\345\256\236\346\210\230-AJAX\344\271\213-\345\244\247\351\231\204\344\273\266\346\226\207\344\273\266\344\270\212\344\274\240\345\212\237\350\203\275-/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    AJAX 实战文件上传功能

    @@ -32,6 +32,6 @@ 

    <body>
      <input type="text" id="username" value="张三" />
      <input type="text" id="password" value="123" />
      <input type="submit" value="提交" id="submitBtn" />

      <script>
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const submitButton = document.getElementById('submitBtn');

        const formData = new FormData();

        submitButton.addEventListener('click', function () {
          formData.append('username', usernameInput.value);
          formData.append('password', passwordInput.value);
          console.log(formData); // 输出: FormData {}

          console.log('username: ' + formData.get('username')); // 获取数据

          formData.set('password', '123123123'); // 设置数据
          console.log(formData.get('password'));

          console.log(formData.has('username')); // 判断是否存在

          formData.delete('password'); // 删除数据
        });
      </script>
    </body>

    下面是使用 FormData 实现异步文件上传的示例

    -
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadBtn');

    uploadButton.addEventListener('click', function () {
      const file = fileInput.files[0]; // 获取文件对象

      const formData = new FormData();
      formData.append('file', file);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');

      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log('上传成功!');
        } else {
          console.error('上传失败!');
        }
      };

      xhr.send(formData); // 发送FormData对象
    });
    编辑此页
    最后由 sumingcheng 于 更新
    +
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadBtn');

    uploadButton.addEventListener('click', function () {
      const file = fileInput.files[0]; // 获取文件对象

      const formData = new FormData();
      formData.append('file', file);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');

      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log('上传成功!');
        } else {
          console.error('上传失败!');
        }
      };

      xhr.send(formData); // 发送FormData对象
    });
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/\350\257\267\346\261\202-AJAX-\345\216\237\347\224\237AJAX\345\260\201\350\243\205/index.html" "b/docs/Network/AJAX/\350\257\267\346\261\202-AJAX-\345\216\237\347\224\237AJAX\345\260\201\350\243\205/index.html" index 93b1b45c..58adabdd 100644 --- "a/docs/Network/AJAX/\350\257\267\346\261\202-AJAX-\345\216\237\347\224\237AJAX\345\260\201\350\243\205/index.html" +++ "b/docs/Network/AJAX/\350\257\267\346\261\202-AJAX-\345\216\237\347\224\237AJAX\345\260\201\350\243\205/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    AJAX 原生封装

    @@ -63,6 +63,6 @@

    封装 AJA 格式化请求参数 根据请求类型,调用xhr.send()方法发送请求

    这样,我们就可以方便地使用封装好的ajax函数来发送异步请求了:

    -
    ajax({
      url: '/api/getData',
      type: 'POST',
      data: { id: 123 },
      success: function (res) {
        console.log(res);
      },
    });

    编辑此页
    最后由 sumingcheng 于 更新
    +
    ajax({
      url: '/api/getData',
      type: 'POST',
      data: { id: 123 },
      success: function (res) {
        console.log(res);
      },
    });
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/AJAX/\350\267\250\345\237\237\346\226\271\346\263\225\347\232\204\345\205\255\347\247\215\346\226\271\346\263\225/index.html" "b/docs/Network/AJAX/\350\267\250\345\237\237\346\226\271\346\263\225\347\232\204\345\205\255\347\247\215\346\226\271\346\263\225/index.html" index 69c8681d..81f8ca49 100644 --- "a/docs/Network/AJAX/\350\267\250\345\237\237\346\226\271\346\263\225\347\232\204\345\205\255\347\247\215\346\226\271\346\263\225/index.html" +++ "b/docs/Network/AJAX/\350\267\250\345\237\237\346\226\271\346\263\225\347\232\204\345\205\255\347\247\215\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    跨域 HTTP 请求的六种方法

    @@ -63,6 +63,6 @@

    documen

    location.hash​

    location.hash可以用来传递少量的数据，传输方式是将数据写入 URL 的 hash 部分。

    -

    由于数据是明文传输的，所以只适合传输一些非敏感的小数据。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    由于数据是明文传输的，所以只适合传输一些非敏感的小数据。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/DNS-TCP-UDP-HTTP-HTTPS-\344\270\211\346\254\241\346\217\241\346\211\213/index.html" "b/docs/Network/HTTP/DNS-TCP-UDP-HTTP-HTTPS-\344\270\211\346\254\241\346\217\241\346\211\213/index.html" index a425f98a..30cd662a 100644 --- "a/docs/Network/HTTP/DNS-TCP-UDP-HTTP-HTTPS-\344\270\211\346\254\241\346\217\241\346\211\213/index.html" +++ "b/docs/Network/HTTP/DNS-TCP-UDP-HTTP-HTTPS-\344\270\211\346\254\241\346\217\241\346\211\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    网络基础知识

    @@ -87,6 +87,6 @@

    过程说

    客户端向服务器发送带有 SYN 标志位的连接请求，进入 SYN_SEND 状态，等待服务器确认。
    服务器收到 SYN 请求后，发送带有 ACK 和 SYN 标志位的响应，进入 SYN_RECV 状态。
    客户端收到响应后，发送带有 ACK 标志位的确认信息，进入 ESTABLISHED 状态，完成连接建立。
    -服务器收到 ACK 后，也进入 ESTABLISHED 状态，连接正式建立，数据开始传输。

    编辑此页
    最后由 sumingcheng 于 更新
    +服务器收到 ACK 后，也进入 ESTABLISHED 状态，连接正式建立，数据开始传输。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/HTTP1-2-\345\233\233\346\254\241\346\214\245\346\211\213-\345\220\214\346\272\220\347\255\226\347\225\245/index.html" "b/docs/Network/HTTP/HTTP1-2-\345\233\233\346\254\241\346\214\245\346\211\213-\345\220\214\346\272\220\347\255\226\347\225\245/index.html" index d512b3c7..f5818c21 100644 --- "a/docs/Network/HTTP/HTTP1-2-\345\233\233\346\254\241\346\214\245\346\211\213-\345\220\214\346\272\220\347\255\226\347\225\245/index.html" +++ "b/docs/Network/HTTP/HTTP1-2-\345\233\233\346\254\241\346\214\245\346\211\213-\345\220\214\346\272\220\347\255\226\347\225\245/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTTP 协议版本

    @@ -113,6 +113,6 @@

    关闭 TCP 连接的前奏

  • TIME-WAIT: 确保远程 TCP 收到断开请求的确认。
  • CLOSED: 无任何连接状态。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/HTTP\344\270\215\345\220\214\347\211\210\346\234\254\347\232\204\345\214\272\345\210\253/index.html" "b/docs/Network/HTTP/HTTP\344\270\215\345\220\214\347\211\210\346\234\254\347\232\204\345\214\272\345\210\253/index.html" index 269b87bf..e91d8658 100644 --- "a/docs/Network/HTTP/HTTP\344\270\215\345\220\214\347\211\210\346\234\254\347\232\204\345\214\272\345\210\253/index.html" +++ "b/docs/Network/HTTP/HTTP\344\270\215\345\220\214\347\211\210\346\234\254\347\232\204\345\214\272\345\210\253/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTTP 协议版本演进及其特性

    @@ -32,6 +32,6 @@

    Keep

    如果没有持久连接，每个 HTTP 请求都需要建立独立的 TCP 连接，这会使服务器需要分配更多的资源用于连接管理和请求响应，并且客户端需要等待更长的时间，从而导致 HTTP 性能下降。持久连接技术通过减少 TCP 连接数量和延迟，提高了 HTTP 的效率和性能。

    HTTP/2 - 2015

    HTTP/2 采用二进制格式传输数据，支持头部压缩和服务器推送等功能。这使得多个连续的请求可以在一个 TCP 连接中并行完成，显著改善了性能，并且具备更好的兼容性。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/HTTP\346\212\245\346\226\207-\350\257\267\346\261\202\346\226\271\345\274\217-GET\344\270\216POST/index.html" "b/docs/Network/HTTP/HTTP\346\212\245\346\226\207-\350\257\267\346\261\202\346\226\271\345\274\217-GET\344\270\216POST/index.html" index 64d9923a..75701a3c 100644 --- "a/docs/Network/HTTP/HTTP\346\212\245\346\226\207-\350\257\267\346\261\202\346\226\271\345\274\217-GET\344\270\216POST/index.html" +++ "b/docs/Network/HTTP/HTTP\346\212\245\346\226\207-\350\257\267\346\261\202\346\226\271\345\274\217-GET\344\270\216POST/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTTP 报文与请求方式

    @@ -145,6 +145,6 @@

    在网络传输中,可能会发生请求丢失或者请求重复的情况。如果使用的是非幂等请求,就可能会造成资源状态的不一致。

    比如,我们要删除一个资源,结果请求丢失了,客户端以为删除成功而服务端并没有删除资源,这就造成了状态不一致。如果我们多次发送删除请求,服务端可能就会把资源删除多次,这也是状态不一致。

    而如果我们使用的是幂等请求,比如 DELETE 请求,即使请求有丢失或者重复,最后资源状态都是一致的。要么资源被删除,要么资源保持原样,不会出现资源被删除多次的情况。

    -

    所以,在网络应用中,特别是涉及到资源状态变更的情况下,我们应该尽量使用幂等请求,比如 PUT 和 DELETE,避免使用非幂等请求。这样可以提高系统的健壮性,避免请求丢失或重复导致的状态不一致问题。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    所以,在网络应用中,特别是涉及到资源状态变更的情况下,我们应该尽量使用幂等请求,比如 PUT 和 DELETE,避免使用非幂等请求。这样可以提高系统的健壮性,避免请求丢失或重复导致的状态不一致问题。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/HTTP\347\212\266\346\200\201\347\240\201-accept-Content-Type/index.html" "b/docs/Network/HTTP/HTTP\347\212\266\346\200\201\347\240\201-accept-Content-Type/index.html" index e0b2932b..e7d7429f 100644 --- "a/docs/Network/HTTP/HTTP\347\212\266\346\200\201\347\240\201-accept-Content-Type/index.html" +++ "b/docs/Network/HTTP/HTTP\347\212\266\346\200\201\347\240\201-accept-Content-Type/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    状态码

    @@ -95,6 +95,6 @@

    Con

    Content-Language

    Content-Encoding​

    Content-Encoding响应头指示返回内容使用的编码方式，如gzip、deflate等，帮助客户端正确解码和显示内容。

    -

    Content-Encoding

    编辑此页
    最后由 sumingcheng 于 更新
    +

    Content-Encoding

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/Request-Headers\350\257\246\350\247\243/index.html" "b/docs/Network/HTTP/Request-Headers\350\257\246\350\247\243/index.html" index e77abba8..692d34f5 100644 --- "a/docs/Network/HTTP/Request-Headers\350\257\246\350\247\243/index.html" +++ "b/docs/Network/HTTP/Request-Headers\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTTP 请求头详解

    @@ -111,6 +111,6 @@

    Sec-Fet

    User-Agent​

    表示请求客户端的浏览器、渲染引擎及操作系统信息。

    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
    -

    该示例表示请求来自运行在 Windows 10 64 位版本上的 Chrome 112.0.0.0 浏览器，使用 WebKit 渲染引擎。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    该示例表示请求来自运行在 Windows 10 64 位版本上的 Chrome 112.0.0.0 浏览器，使用 WebKit 渲染引擎。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/Response-Headers\350\257\246\350\247\243/index.html" "b/docs/Network/HTTP/Response-Headers\350\257\246\350\247\243/index.html" index 33121054..6bdba4a8 100644 --- "a/docs/Network/HTTP/Response-Headers\350\257\246\350\247\243/index.html" +++ "b/docs/Network/HTTP/Response-Headers\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    HTTP 响应头详解

    @@ -67,6 +67,6 @@

    VaryX-Application-Context​

    X-Application-Context 是一个自定义的 HTTP 响应头，常用于追踪和诊断应用程序的运行状态。

    X-Application-Context: mip-framework-web:60003
    -

    在此示例中，X-Application-Context 包含了应用程序的上下文信息，包括应用程序名称 mip-framework-web 和端口号 60003。这有助于在多实例或分布式环境中识别具体的应用实例。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在此示例中，X-Application-Context 包含了应用程序的上下文信息，包括应用程序名称 mip-framework-web 和端口号 60003。这有助于在多实例或分布式环境中识别具体的应用实例。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/URL-\345\256\242\346\210\267\347\253\257-\346\234\215\345\212\241\347\253\257-\345\237\237\345\220\215\346\223\215\344\275\234/index.html" "b/docs/Network/HTTP/URL-\345\256\242\346\210\267\347\253\257-\346\234\215\345\212\241\347\253\257-\345\237\237\345\220\215\346\223\215\344\275\234/index.html" index dc28765a..2601a871 100644 --- "a/docs/Network/HTTP/URL-\345\256\242\346\210\267\347\253\257-\346\234\215\345\212\241\347\253\257-\345\237\237\345\220\215\346\223\215\344\275\234/index.html" +++ "b/docs/Network/HTTP/URL-\345\256\242\346\210\267\347\253\257-\346\234\215\345\212\241\347\253\257-\345\237\237\345\220\215\346\223\215\344\275\234/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器请求一个网页的流程

    @@ -82,6 +82,6 @@

    根

    根域名服务器负责全球互联网域名根域名服务器、域名体系和 IP 地址的管理。主根域名服务器位于美国，辅根域名服务器共有 12 个，其中美国有 9 个，英国、瑞典、日本各有一个。管理结构由国际互联网名称与数字地址分配机构 ICANN 负责，前管理机构是商务部下属的国家通信与信息管理局（NTIA），现由 ICANN 外包管理。

    雪人计划​

    雪人计划旨在建设自己的主根服务器和 3 个辅根服务器。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/keep-alive\346\234\272\345\210\266/index.html" "b/docs/Network/HTTP/keep-alive\346\234\272\345\210\266/index.html" index d88ab858..5ceb3bdc 100644 --- "a/docs/Network/HTTP/keep-alive\346\234\272\345\210\266/index.html" +++ "b/docs/Network/HTTP/keep-alive\346\234\272\345\210\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    动态异步组件

    @@ -51,6 +51,6 @@

    常见问

    异步组件无法使用include属性，虽然被缓存但无法正确显示。对于异步组件，建议使用exclude属性。

    <keep-alive exclude="AsyncComponent">
      <component :is="currentComponent"></component>
    </keep-alive>

    keep-alive 实现

    -
    import Comp1 from './components/Comp1';
    import Comp2 from './components/Comp2';
    import Comp3 from './components/Comp3';

    const buttons = document.getElementById('buttons');
    const wrapper = document.getElementById('wrapper');

    const App = {
      components: {
        Comp1,
        Comp2,
        Comp3,
      },
      cache: {},
      init() {
        this.bindEvents();
      },
      mounted(callback) {
        callback && callback();
      },
      activated(callback) {
        callback && callback();
      },
      bindEvents() {
        buttons.addEventListener('click', this.handleButtonClick.bind(this), false);
      },
      handleButtonClick(event) {
        const target = event.target;
        const tag = target.tagName.toLowerCase();

        if (tag === 'span') {
          const key = target.dataset.key;
          let vNode = this.cache[key];

          if (!vNode) {
            vNode = this.createVNode(this.components[key]);
            if (this.isKeepAlive(wrapper)) {
              this.cache[key] = vNode;
            }
          }

          const realNode = this.createRealNode(vNode);
          wrapper.innerHTML = '';
          wrapper.appendChild(realNode);

          if (this.isKeepAlive(wrapper)) {
            this.activated(() => {
              console.log(`${key} activated`);
            });
          } else {
            this.mounted(() => {
              console.log(`${key} mounted`);
            });
          }
        }
      },
      createVNode(component) {
        const { template, name } = component;
        const tag = template.match(/<(.+?)>/)[1];
        const content = template.match(/>(.+?)</)[1];

        return {
          tag,
          children: content,
          mark: name,
        };
      },
      createRealNode(vNode) {
        const node = document.createElement(vNode.tag);
        node.innerText = vNode.children;
        return node;
      },
      isKeepAlive(wrapper) {
        const parentTag = wrapper.parentNode.tagName.toLowerCase();
        return parentTag === 'keep-alive';
      },
    };

    App.init();
    编辑此页
    最后由 sumingcheng 于 更新
    +
    import Comp1 from './components/Comp1';
    import Comp2 from './components/Comp2';
    import Comp3 from './components/Comp3';

    const buttons = document.getElementById('buttons');
    const wrapper = document.getElementById('wrapper');

    const App = {
      components: {
        Comp1,
        Comp2,
        Comp3,
      },
      cache: {},
      init() {
        this.bindEvents();
      },
      mounted(callback) {
        callback && callback();
      },
      activated(callback) {
        callback && callback();
      },
      bindEvents() {
        buttons.addEventListener('click', this.handleButtonClick.bind(this), false);
      },
      handleButtonClick(event) {
        const target = event.target;
        const tag = target.tagName.toLowerCase();

        if (tag === 'span') {
          const key = target.dataset.key;
          let vNode = this.cache[key];

          if (!vNode) {
            vNode = this.createVNode(this.components[key]);
            if (this.isKeepAlive(wrapper)) {
              this.cache[key] = vNode;
            }
          }

          const realNode = this.createRealNode(vNode);
          wrapper.innerHTML = '';
          wrapper.appendChild(realNode);

          if (this.isKeepAlive(wrapper)) {
            this.activated(() => {
              console.log(`${key} activated`);
            });
          } else {
            this.mounted(() => {
              console.log(`${key} mounted`);
            });
          }
        }
      },
      createVNode(component) {
        const { template, name } = component;
        const tag = template.match(/<(.+?)>/)[1];
        const content = template.match(/>(.+?)</)[1];

        return {
          tag,
          children: content,
          mark: name,
        };
      },
      createRealNode(vNode) {
        const node = document.createElement(vNode.tag);
        node.innerText = vNode.children;
        return node;
      },
      isKeepAlive(wrapper) {
        const parentTag = wrapper.parentNode.tagName.toLowerCase();
        return parentTag === 'keep-alive';
      },
    };

    App.init();
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/\345\207\217\345\260\221HTTP\350\257\267\346\261\202\347\232\204\346\226\271\346\263\225/index.html" "b/docs/Network/HTTP/\345\207\217\345\260\221HTTP\350\257\267\346\261\202\347\232\204\346\226\271\346\263\225/index.html" index e0a36a58..5e7fd395 100644 --- "a/docs/Network/HTTP/\345\207\217\345\260\221HTTP\350\257\267\346\261\202\347\232\204\346\226\271\346\263\225/index.html" +++ "b/docs/Network/HTTP/\345\207\217\345\260\221HTTP\350\257\267\346\261\202\347\232\204\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器请求流程与优化策略

    @@ -40,6 +40,6 @@

    懒加载（Lazy Loading）是一种按需加载资源的技术，尤其适用于图片和视频等多媒体内容。通过懒加载，只有在用户滚动到视图区域时，相关资源才会被加载。这不仅减少了初始加载时的请求数量，还提升了页面的渲染速度和用户体验。

    优化服务器响应时间​

    服务器的响应速度直接影响请求时间。通过优化服务器配置、使用高效的后端代码和数据库查询、以及实施负载均衡等措施，可以显著提升服务器的响应能力。此外，使用 HTTP/2 协议可以利用其多路复用和头部压缩等特性，进一步优化传输效率。

    -

    通过综合应用以上优化策略，可以有效减少请求时间，提升网页的加载速度和用户体验。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过综合应用以上优化策略，可以有效减少请求时间，提升网页的加载速度和用户体验。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/\347\274\223\345\255\230-\351\225\277\347\237\255\350\277\236\346\216\245-Content-Length-referrer/index.html" "b/docs/Network/HTTP/\347\274\223\345\255\230-\351\225\277\347\237\255\350\277\236\346\216\245-Content-Length-referrer/index.html" index 83b0effe..a1f280e8 100644 --- "a/docs/Network/HTTP/\347\274\223\345\255\230-\351\225\277\347\237\255\350\277\236\346\216\245-Content-Length-referrer/index.html" +++ "b/docs/Network/HTTP/\347\274\223\345\255\230-\351\225\277\347\237\255\350\277\236\346\216\245-Content-Length-referrer/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    浏览器缓存

    @@ -79,6 +79,6 @@

    防止资源盗链​

    服务器在拉取资源前判断Referer是否为自己的域名或 IP，如果不是则拦截；如果是，则允许拉取。

    防盗链有时会导致网站访问资源出现问题。

    -

    编辑此页
    最后由 sumingcheng 于 更新
    +

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/\347\274\226\347\240\201\344\270\216\344\271\261\347\240\201\345\244\204\347\220\206/index.html" "b/docs/Network/HTTP/\347\274\226\347\240\201\344\270\216\344\271\261\347\240\201\345\244\204\347\220\206/index.html" index 9753038e..b7c089b5 100644 --- "a/docs/Network/HTTP/\347\274\226\347\240\201\344\270\216\344\271\261\347\240\201\345\244\204\347\220\206/index.html" +++ "b/docs/Network/HTTP/\347\274\226\347\240\201\344\270\216\344\271\261\347\240\201\345\244\204\347\220\206/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    字符编码与乱码处理指南

    @@ -82,6 +82,6 @@

    编 
    String s = "你好";
    // UTF-8转GBK
    byte[] gbk = s.getBytes("GBK");
    // GBK转UTF-8
    String utf8 = new String(gbk, "UTF-8");

    Python:

    s = "你好"
    # UTF-8转GBK
    gbk = s.encode("GBK")
    # GBK转UTF-8
    utf8 = gbk.decode("GBK").encode("UTF-8")
    -

    在一些文本编辑器中,也提供了编码转换功能,可以方便地将文件在不同编码之间转换。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在一些文本编辑器中,也提供了编码转换功能,可以方便地将文件在不同编码之间转换。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Network/HTTP/\347\275\221\347\273\234\345\245\227\346\216\245\345\255\227/index.html" "b/docs/Network/HTTP/\347\275\221\347\273\234\345\245\227\346\216\245\345\255\227/index.html" index 8c4e27b6..9ff6f7b4 100644 --- "a/docs/Network/HTTP/\347\275\221\347\273\234\345\245\227\346\216\245\345\255\227/index.html" +++ "b/docs/Network/HTTP/\347\275\221\347\273\234\345\245\227\346\216\245\345\255\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    网络通信基础

    @@ -30,6 +30,6 @@

    API在 Python 中，我可以使用 socket 模块来创建和操作套接字。以下是创建一个 TCP 客户端套接字，连接到服务器，发送和接收数据的示例：

    import socket

    # 创建一个 TCP 套接字
    client_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    # 连接到服务器
    client_socket.connect(('192.168.1.1', 80))

    # 发送数据
    request = b'GET / HTTP/1.1\r\nHost: example.com\r\n\r\n'
    client_socket.sendall(request)

    # 接收数据
    response = client_socket.recv(1024)

    # 关闭套接字
    client_socket.close()

    服务器和客户端​

    -

    在一个简单的 HTTP 服务器中，服务器套接字会监听端口 80，等待客户端的连接。当有客户端连接时，服务器会创建一个新的套接字用于与该客户端通信，处理 HTTP 请求，然后发送 HTTP 响应。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    在一个简单的 HTTP 服务器中，服务器套接字会监听端口 80，等待客户端的连接。当有客户端连接时，服务器会创建一个新的套接字用于与该客户端通信，处理 HTTP 请求，然后发送 HTTP 响应。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\346\237\240\346\252\254\351\205\270\350\276\243\346\227\240\351\252\250\351\270\241\347\210\252/index.html" "b/docs/Other/CookBook/\346\237\240\346\252\254\351\205\270\350\276\243\346\227\240\351\252\250\351\270\241\347\210\252/index.html" index 0053854a..a03ffb10 100644 --- "a/docs/Other/CookBook/\346\237\240\346\252\254\351\205\270\350\276\243\346\227\240\351\252\250\351\270\241\347\210\252/index.html" +++ "b/docs/Other/CookBook/\346\237\240\346\252\254\351\205\270\350\276\243\346\227\240\351\252\250\351\270\241\347\210\252/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    柠檬酸辣无骨鸡爪

    @@ -56,6 +56,6 @@

    储存建 食用前可适量补充蒜末、柠檬汁或芥末油提味

    注意事项 盐用调料盒小盐勺计量 -其他调味料用普通食用勺计量

    编辑此页
    最后由 sumingcheng 于 更新
    +其他调味料用普通食用勺计量

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\346\270\205\347\202\222\344\270\235\347\223\234/index.html" "b/docs/Other/CookBook/\346\270\205\347\202\222\344\270\235\347\223\234/index.html" index c4103c3a..e88ec514 100644 --- "a/docs/Other/CookBook/\346\270\205\347\202\222\344\270\235\347\223\234/index.html" +++ "b/docs/Other/CookBook/\346\270\205\347\202\222\344\270\235\347\223\234/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    清炒丝瓜

    @@ -40,6 +40,6 @@

    烹饪步

    烹饪要点​

    调味应以清淡为主，保持丝瓜本味 -切片后要及时烹饪避免氧化变色

    编辑此页
    最后由 sumingcheng 于 更新
    +切片后要及时烹饪避免氧化变色

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\347\202\226\347\211\233\350\202\211/index.html" "b/docs/Other/CookBook/\347\202\226\347\211\233\350\202\211/index.html" index ded7079f..dc478b8d 100644 --- "a/docs/Other/CookBook/\347\202\226\347\211\233\350\202\211/index.html" +++ "b/docs/Other/CookBook/\347\202\226\347\211\233\350\202\211/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    炖牛肉

    @@ -45,6 +45,6 @@

    烹饪步

    储存建议​

    分装储存，按食用量分装冷冻保存

    -

    可搭配手擀面、黄瓜丝食用，方便快捷又美味

    编辑此页
    最后由 sumingcheng 于 更新
    +

    可搭配手擀面、黄瓜丝食用，方便快捷又美味

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\347\203\247\350\214\204\345\255\220-\351\235\222-\347\264\253\350\214\204\345\255\220-/index.html" "b/docs/Other/CookBook/\347\203\247\350\214\204\345\255\220-\351\235\222-\347\264\253\350\214\204\345\255\220-/index.html" index 36e73030..ab6d8ae8 100644 --- "a/docs/Other/CookBook/\347\203\247\350\214\204\345\255\220-\351\235\222-\347\264\253\350\214\204\345\255\220-/index.html" +++ "b/docs/Other/CookBook/\347\203\247\350\214\204\345\255\220-\351\235\222-\347\264\253\350\214\204\345\255\220-/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    烧茄子

    @@ -40,6 +40,6 @@

    烹饪步
  • 最后撒上葱花点缀

    • 食用建议​

    -

    可搭配米饭食用，茄子的汤汁拌饭非常美味

    编辑此页
    最后由 sumingcheng 于 更新
    +

    可搭配米饭食用，茄子的汤汁拌饭非常美味

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\347\272\242\347\203\247\350\202\211/index.html" "b/docs/Other/CookBook/\347\272\242\347\203\247\350\202\211/index.html" index cbb7fa00..5f474a5b 100644 --- "a/docs/Other/CookBook/\347\272\242\347\203\247\350\202\211/index.html" +++ "b/docs/Other/CookBook/\347\272\242\347\203\247\350\202\211/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    红烧肉

    @@ -67,6 +67,6 @@

    烹饪步

    烹饪要点​

    全程避免肉类受凉，以保持口感 如遇糖色过糊，可用另一锅重新炖煮 -加入大葱可去除糊味

    编辑此页
    最后由 sumingcheng 于 更新
    +加入大葱可去除糊味

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\350\245\277\347\272\242\346\237\277\347\202\222\351\270\241\350\233\213/index.html" "b/docs/Other/CookBook/\350\245\277\347\272\242\346\237\277\347\202\222\351\270\241\350\233\213/index.html" index a8d04d40..018c44de 100644 --- "a/docs/Other/CookBook/\350\245\277\347\272\242\346\237\277\347\202\222\351\270\241\350\233\213/index.html" +++ "b/docs/Other/CookBook/\350\245\277\347\272\242\346\237\277\347\202\222\351\270\241\350\233\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    西红柿炒鸡蛋

    @@ -49,6 +49,6 @@

    烹饪步

    烹饪要点​

    鸡蛋要用小火炒制保持嫩滑 -加水焖煮可使口感更好

    编辑此页
    最后由 sumingcheng 于 更新
    +加水焖煮可使口感更好

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/CookBook/\351\200\211\350\245\277\347\223\234/index.html" "b/docs/Other/CookBook/\351\200\211\350\245\277\347\223\234/index.html" index 8e98937c..8d994056 100644 --- "a/docs/Other/CookBook/\351\200\211\350\245\277\347\223\234/index.html" +++ "b/docs/Other/CookBook/\351\200\211\350\245\277\347\223\234/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    挑选西瓜技巧

    @@ -55,6 +55,6 @@

    成熟
    1. 干燥的茎部表示西瓜在藤上充分成熟
    2. 湿润或绿色的茎部可能采摘过早
      3. -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git a/docs/Other/Notes/Algolia/index.html b/docs/Other/Notes/Algolia/index.html index 6f000ce5..c08550ee 100644 --- a/docs/Other/Notes/Algolia/index.html +++ b/docs/Other/Notes/Algolia/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容
    +

    配置成功后你的导航栏会出现搜索框，例如https://sumingcheng.github.io/NoteBook/

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/Notes/frp\351\205\215\347\275\256\344\275\277\347\224\250\346\214\207\345\215\227/index.html" "b/docs/Other/Notes/frp\351\205\215\347\275\256\344\275\277\347\224\250\346\214\207\345\215\227/index.html" index 44ad1000..e90e7cc0 100644 --- "a/docs/Other/Notes/frp\351\205\215\347\275\256\344\275\277\347\224\250\346\214\207\345\215\227/index.html" +++ "b/docs/Other/Notes/frp\351\205\215\347\275\256\344\275\277\347\224\250\346\214\207\345\215\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    frp 配置使用指南

    @@ -115,6 +115,6 @@

    客
  • 点击“下一步”，然后在最后一屏点击“完成”。
    • -

    现在，每次计算机启动或您登录时，这个任务就会运行，从而自动启动您的 FRP 客户端。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    现在，每次计算机启动或您登录时，这个任务就会运行，从而自动启动您的 FRP 客户端。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/Notes/\344\275\277\347\224\250\346\214\207\345\215\227/index.html" "b/docs/Other/Notes/\344\275\277\347\224\250\346\214\207\345\215\227/index.html" index 40776d46..a825ae0d 100644 --- "a/docs/Other/Notes/\344\275\277\347\224\250\346\214\207\345\215\227/index.html" +++ "b/docs/Other/Notes/\344\275\277\347\224\250\346\214\207\345\215\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    使用指南

    @@ -46,6 +46,6 @@

    配置导

    sidebars.js

    /**
     * 创建一个侧边栏允许你：
     * 创建一个有序的文档组
     * 为该组的每一个文档渲染一个侧边栏
     * 提供下一步/上一步的导航
     * 侧边栏可以从文件系统生成，或者在这里显式地定义。
     * 根据需要创建尽可能多的侧边栏。
     */

    const sidebars = {
      // 默认情况下，Docusaurus 从 docs 文件夹结构中生成一个侧边栏
      // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
      learnSidebar: [{ type: 'autogenerated', dirName: 'learning' }],
      thoughtsSidebar: [{ type: 'autogenerated', dirName: 'thoughts' }],
      translationsSidebar: [{ type: 'autogenerated', dirName: 'translations' }],
      resourceSidebar: [{ type: 'autogenerated', dirName: 'resource' }],
    };

    module.exports = sidebars; // 导出侧边栏的配置

    docusaurus.config.js

    -
        navbar: {
          title: 'SMC docs', // 导航栏标题
          logo: {
            alt: '素明诚', // logo的替代文本
            src: 'img/mini.ico' // logo的路径
          },
          items: [
            // {to: '/blog', label: 'Blog', position: 'right'},
            {
              type: 'docSidebar',
              sidebarId: 'learnSidebar',
              position: 'right',
              label: '学习资料'
            },
            {
              type: 'docSidebar',
              sidebarId: 'thoughtsSidebar',
              position: 'right',
              label: '思考碎片'
            },
            {
              type: 'docSidebar',
              sidebarId: 'translationsSidebar',
              position: 'right',
              label: '译文集'
            },
            {
              type: 'docSidebar',
              sidebarId: 'resourceSidebar',
              position: 'right',
              label: '资源'
            },
            {
              href: 'https://github.com/sumingcheng',
              'aria-label': 'GitHub repository',
              position: 'right',
              className: 'github-icon'
            }
          ]
        }

    编辑此页
    最后由 sumingcheng 于 更新
    +
        navbar: {
          title: 'SMC docs', // 导航栏标题
          logo: {
            alt: '素明诚', // logo的替代文本
            src: 'img/mini.ico' // logo的路径
          },
          items: [
            // {to: '/blog', label: 'Blog', position: 'right'},
            {
              type: 'docSidebar',
              sidebarId: 'learnSidebar',
              position: 'right',
              label: '学习资料'
            },
            {
              type: 'docSidebar',
              sidebarId: 'thoughtsSidebar',
              position: 'right',
              label: '思考碎片'
            },
            {
              type: 'docSidebar',
              sidebarId: 'translationsSidebar',
              position: 'right',
              label: '译文集'
            },
            {
              type: 'docSidebar',
              sidebarId: 'resourceSidebar',
              position: 'right',
              label: '资源'
            },
            {
              href: 'https://github.com/sumingcheng',
              'aria-label': 'GitHub repository',
              position: 'right',
              className: 'github-icon'
            }
          ]
        }
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/Notes/\345\246\202\344\275\225\346\212\242\347\201\253\350\275\246\347\245\250/index.html" "b/docs/Other/Notes/\345\246\202\344\275\225\346\212\242\347\201\253\350\275\246\347\245\250/index.html" index a2346c7b..d42f8deb 100644 --- "a/docs/Other/Notes/\345\246\202\344\275\225\346\212\242\347\201\253\350\275\246\347\245\250/index.html" +++ "b/docs/Other/Notes/\345\246\202\344\275\225\346\212\242\347\201\253\350\275\246\347\245\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    如何抢12306火车票

    @@ -37,6 +37,6 @@

    抢票姿
    1. 提前选好你中意的车次，进入该车次前一天或者是前几天有票的时间段，选好乘车人和你的座位。
    2. 在开售时间的XX分59秒的时候，通过日历选择到开售那天，只要刷出来了，马上购票。
      3. -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Other/Notes/\345\246\202\344\275\225\347\274\226\345\206\231\346\212\200\346\234\257\346\226\207\347\253\240/index.html" "b/docs/Other/Notes/\345\246\202\344\275\225\347\274\226\345\206\231\346\212\200\346\234\257\346\226\207\347\253\240/index.html" index 963d9fde..8096e7e0 100644 --- "a/docs/Other/Notes/\345\246\202\344\275\225\347\274\226\345\206\231\346\212\200\346\234\257\346\226\207\347\253\240/index.html" +++ "b/docs/Other/Notes/\345\246\202\344\275\225\347\274\226\345\206\231\346\212\200\346\234\257\346\226\207\347\253\240/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    如何写技术文章

    @@ -66,6 +66,6 @@

    写文章技巧

  • 适当的计入一些图片/图形
  • 拆分步骤、分条列出
  • 结束语，可以是总结和想法，个人感情也可以
    • -
    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Resource/Soft/Windows\350\243\205\346\234\272\350\275\257\344\273\266/index.html" "b/docs/Resource/Soft/Windows\350\243\205\346\234\272\350\275\257\344\273\266/index.html" index a27f33e8..aa2734dd 100644 --- "a/docs/Resource/Soft/Windows\350\243\205\346\234\272\350\275\257\344\273\266/index.html" +++ "b/docs/Resource/Soft/Windows\350\243\205\346\234\272\350\275\257\344\273\266/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Windows 装机软件

    @@ -64,6 +64,6 @@

    KMS镜像站​

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Resource/Soft/\346\216\250\350\215\220\346\212\200\346\234\257\347\253\231\347\202\271/index.html" "b/docs/Resource/Soft/\346\216\250\350\215\220\346\212\200\346\234\257\347\253\231\347\202\271/index.html" index 6f69b5aa..06132d71 100644 --- "a/docs/Resource/Soft/\346\216\250\350\215\220\346\212\200\346\234\257\347\253\231\347\202\271/index.html" +++ "b/docs/Resource/Soft/\346\216\250\350\215\220\346\212\200\346\234\257\347\253\231\347\202\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    推荐技术站点

    技术博客和网站​

    @@ -60,6 +60,6 @@

    技术
  • Packt Publishing - 出版最新的技术书籍和视频。
  • Manning Publications - 计算机书籍出版，涵盖各种编程语言和技术。
  • Apress - 为开发者和IT专业人员提供技术书籍。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/IPFS/IPFS-Desktop-\350\277\220\350\241\214\346\214\207\345\215\227/index.html" "b/docs/Web3/IPFS/IPFS-Desktop-\350\277\220\350\241\214\346\214\207\345\215\227/index.html" index 5ebe8c6f..88486089 100644 --- "a/docs/Web3/IPFS/IPFS-Desktop-\350\277\220\350\241\214\346\214\207\345\215\227/index.html" +++ "b/docs/Web3/IPFS/IPFS-Desktop-\350\277\220\350\241\214\346\214\207\345\215\227/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    IPFS Desktop 运行指南

    @@ -41,6 +41,6 @@

    如果在安装 electron 时遇到 SSL 证书问题，可以尝试设置以下环境变量：

    NODE_TLS_REJECT_UNAUTHORIZED=0 yarn

    也可以尝试使用淘宝的 electron 镜像：

    -
    ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

    编辑此页
    最后由 sumingcheng 于 更新
    +
    ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git a/docs/Web3/IPFS/IPFS-pin-get/index.html b/docs/Web3/IPFS/IPFS-pin-get/index.html index 08a4096a..fd206404 100644 --- a/docs/Web3/IPFS/IPFS-pin-get/index.html +++ b/docs/Web3/IPFS/IPFS-pin-get/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    IPFS 中的固定和获取操作

    @@ -36,6 +36,6 @@

    最佳实践

    ipfs pin ls

    根据需要，移除不再需要固定的文件：

    ipfs pin rm QmYourContentIdentifier
    -

    通过这些操作，可以保持本地存储的整洁和高效，确保关键数据始终可用。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这些操作，可以保持本地存储的整洁和高效，确保关键数据始终可用。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/IPFS/IPFS\344\270\216IPNS\346\212\200\346\234\257\350\257\246\350\247\243/index.html" "b/docs/Web3/IPFS/IPFS\344\270\216IPNS\346\212\200\346\234\257\350\257\246\350\247\243/index.html" index c4a1324d..6f5099a6 100644 --- "a/docs/Web3/IPFS/IPFS\344\270\216IPNS\346\212\200\346\234\257\350\257\246\350\247\243/index.html" +++ "b/docs/Web3/IPFS/IPFS\344\270\216IPNS\346\212\200\346\234\257\350\257\246\350\247\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    IPFS 与 IPNS 技术详解

    @@ -44,6 +44,6 @@

    实践中的 IPFS 与 IPNS​

    在实际应用中，IPFS 和 IPNS 常常结合使用，以充分发挥其分布式存储和动态命名的优势。例如，开发一个去中心化的博客系统，开发者可以将博客文章存储在 IPFS 上，通过 IPNS 创建一个固定的博客地址。每次更新文章时，只需将新的内容添加到 IPFS，并更新 IPNS 指向新的 CID，用户访问博客地址时将自动获取最新的内容。

    // 示例：使用 JavaScript 通过 IPFS 和 IPNS 发布内容
    const IPFS = require('ipfs');
    const node = await IPFS.create();

    const { cid } = await node.add('Hello IPFS');
    console.log('Added file contents:', cid.toString());

    // 发布到 IPNS
    const publishResult = await node.name.publish(cid);
    console.log('Published to IPNS:', publishResult.name);
    -

    通过这种方式，开发者可以轻松管理和分发动态内容，充分利用 IPFS 和 IPNS 提供的分布式存储和动态命名功能。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    通过这种方式，开发者可以轻松管理和分发动态内容，充分利用 IPFS 和 IPNS 提供的分布式存储和动态命名功能。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/IPFS/IPFS\345\221\275\344\273\244/index.html" "b/docs/Web3/IPFS/IPFS\345\221\275\344\273\244/index.html" index ce891951..c373b137 100644 --- "a/docs/Web3/IPFS/IPFS\345\221\275\344\273\244/index.html" +++ "b/docs/Web3/IPFS/IPFS\345\221\275\344\273\244/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    IPFS 命令详解

    @@ -164,6 +164,6 @@

    示例定期检查 IPFS 版本，有助于获取最新功能和安全修复，保障节点的稳定运行。

    实践中的 IPFS 命令应用​

    在实际应用中，熟练掌握 IPFS 命令能够显著提升数据管理和分发的效率。例如，部署一个去中心化的内容管理系统，开发者可以使用ipfs add命令上传内容，通过ipfs pin确保数据持久存储，并利用ipfs daemon保持节点在线。同时，结合ipfs name publish和ipfs key命令，实现内容的动态更新和安全管理。

    -
    # 启动IPFS守护进程
    ipfs daemon

    # 添加文件到IPFS
    ipfs add blog-post.md

    # 固定文件以防止被垃圾回收
    ipfs pin add QmBlogPostCID

    # 发布到IPNS
    ipfs name publish QmBlogPostCID

    编辑此页
    最后由 sumingcheng 于 更新
    +
    # 启动IPFS守护进程
    ipfs daemon

    # 添加文件到IPFS
    ipfs add blog-post.md

    # 固定文件以防止被垃圾回收
    ipfs pin add QmBlogPostCID

    # 发布到IPNS
    ipfs name publish QmBlogPostCID
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/IPFS/IPFS\346\226\207\344\273\266\344\274\240\350\276\223\350\277\207\347\250\213/index.html" "b/docs/Web3/IPFS/IPFS\346\226\207\344\273\266\344\274\240\350\276\223\350\277\207\347\250\213/index.html" index ab3fdf44..3bf6e4bb 100644 --- "a/docs/Web3/IPFS/IPFS\346\226\207\344\273\266\344\274\240\350\276\223\350\277\207\347\250\213/index.html" +++ "b/docs/Web3/IPFS/IPFS\346\226\207\344\273\266\344\274\240\350\276\223\350\277\207\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    IPFS 文件传输过程

    @@ -107,6 +107,6 @@

    缓存机制的实现​

    以下示例展示了如何在 IPFS 中配置和使用缓存机制：

    package main

    import (
        "context"
        "fmt"
        "github.com/ipfs/go-ipfs/core"
        "github.com/ipfs/go-ipfs/core/coreapi"
        "github.com/ipfs/go-ipfs/repo/fsrepo"
    )

    func main() {
        // 打开 IPFS 仓库
        repoPath := "~/.ipfs"
        repo, err := fsrepo.Open(repoPath)
        if err != nil {
            fmt.Println("Error opening repo:", err)
            return
        }

        // 初始化 IPFS 节点
        ctx := context.Background()
        node, err := core.NewNode(ctx, &core.BuildCfg{
            Repo: repo,
            Online: true,
        })
        if err != nil {
            fmt.Println("Error creating IPFS node:", err)
            return
        }

        api := coreapi.NewCoreAPI(node)

        // 配置缓存大小
        cacheSize := 1024 * 1024 * 100 // 100MB
        node.Blockstore = datastore.NewCachedDatastore(node.Blockstore, cacheSize)

        fmt.Println("Cache configured with size:", cacheSize)
    }
    -

    此代码展示了如何在 IPFS 节点中配置缓存大小，优化数据块的存储和访问。

    编辑此页
    最后由 sumingcheng 于 更新
    +

    此代码展示了如何在 IPFS 节点中配置缓存大小，优化数据块的存储和访问。

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/IPFS/IPFS\347\224\237\345\221\275\345\221\250\346\234\237/index.html" "b/docs/Web3/IPFS/IPFS\347\224\237\345\221\275\345\221\250\346\234\237/index.html" index f12d0080..699df85f 100644 --- "a/docs/Web3/IPFS/IPFS\347\224\237\345\221\275\345\221\250\346\234\237/index.html" +++ "b/docs/Web3/IPFS/IPFS\347\224\237\345\221\275\345\221\250\346\234\237/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    IPFS 生命周期指南

    @@ -25,6 +25,6 @@

    节

    内容发布与解析生命周期​

    步骤命令/操作描述
    添加内容ipfs add <file>将文件添加到 IPFS，获取文件的 CID。
    发布到 IPNSipfs name publish <CID>将文件的 CID 发布到 IPNS，获取 IPNS 链接。
    解析 IPNS 链接ipfs name resolve <IPNS>解析 IPNS 链接，获取对应的 CID。
    访问内容ipfs cat <CID>通过 CID 访问 IPNS 链接指向的内容。
    更新内容重复添加内容和发布到 IPNS 步骤更新 IPFS 中的内容并重新发布到 IPNS。
    再次解析ipfs name resolve <IPNS>解析更新后的 IPNS 链接，获取新的 CID。

    垃圾回收（GC）生命周期​

    -
    步骤操作描述
    固定数据ipfs pin add <CID>固定（pin）重要的数据块，确保它们不会在垃圾回收过程中被删除。固定的数据通常是用户希望保留的文件或目录。
    触发垃圾回收ipfs repo gc手动执行垃圾回收命令，清理未固定的数据块。IPFS 也可能根据配置自动执行垃圾回收。
    识别可回收数据自动进行IPFS 节点遍历本地存储，识别所有未固定的数据块。这些数据块不再被网络中的任何文件或目录引用。
    删除数据块自动进行IPFS 删除所有未固定的数据块，释放存储空间。
    更新存储状态自动进行IPFS 更新本地存储的状态，反映删除操作后的新状态。
    报告结果命令输出ipfs repo gc 命令输出被删除的数据块的信息，包括它们的 CID。
    编辑此页
    最后由 sumingcheng 于 更新
    +
    步骤操作描述
    固定数据ipfs pin add <CID>固定（pin）重要的数据块，确保它们不会在垃圾回收过程中被删除。固定的数据通常是用户希望保留的文件或目录。
    触发垃圾回收ipfs repo gc手动执行垃圾回收命令，清理未固定的数据块。IPFS 也可能根据配置自动执行垃圾回收。
    识别可回收数据自动进行IPFS 节点遍历本地存储，识别所有未固定的数据块。这些数据块不再被网络中的任何文件或目录引用。
    删除数据块自动进行IPFS 删除所有未固定的数据块，释放存储空间。
    更新存储状态自动进行IPFS 更新本地存储的状态，反映删除操作后的新状态。
    报告结果命令输出ipfs repo gc 命令输出被删除的数据块的信息，包括它们的 CID。
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/Learning/Web2\345\246\202\344\275\225\350\275\254Web3/index.html" "b/docs/Web3/Learning/Web2\345\246\202\344\275\225\350\275\254Web3/index.html" index 9f6b2b85..9fad13e2 100644 --- "a/docs/Web3/Learning/Web2\345\246\202\344\275\225\350\275\254Web3/index.html" +++ "b/docs/Web3/Learning/Web2\345\246\202\344\275\225\350\275\254Web3/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Web2如何转Web3

    @@ -209,6 +209,6 @@

    总结策
  • Web3 行业变化快，尝试在学习基础技能后快速构建项目，投入实际开发中提升。
    • -

    编辑此页
    最后由 sumingcheng 于 更新
    +
    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git "a/docs/Web3/Learning/\345\255\246\344\271\240\351\241\272\345\272\217/index.html" "b/docs/Web3/Learning/\345\255\246\344\271\240\351\241\272\345\272\217/index.html" index bfedea37..561e6798 100644 --- "a/docs/Web3/Learning/\345\255\246\344\271\240\351\241\272\345\272\217/index.html" +++ "b/docs/Web3/Learning/\345\255\246\344\271\240\351\241\272\345\272\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    学习顺序

    阶段一：区块链与去中心化基础认知​

    @@ -151,6 +151,6 @@

    总结​

    通过上述分阶段的学习和实践，你将从基础概念一路深入到合约开发、安全审计和多元生态的理解。在每个阶段产出相应的代码示例、笔记、博客总结，并在社区或 GitHub 上积极互动，有助于你建立长期学习与分享的习惯。这种持续的、实践导向的学习方式，将帮助你不断精进成为一名合格且与时俱进的 Web3 开发者。

    参考​

    -

    https://roadmap.sh/blockchain

    编辑此页
    最后由 sumingcheng 于 更新
    +

    https://roadmap.sh/blockchain

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git a/docs/category/es3-es5/index.html b/docs/category/es3-es5/index.html index 726bfc66..01167c49 100644 --- a/docs/category/es3-es5/index.html +++ b/docs/category/es3-es5/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    ES3-ES5

    JavaScript ES3-ES5基础知识

    diff --git a/docs/category/es6-api/index.html b/docs/category/es6-api/index.html index f8bcc8d8..edaed6c2 100644 --- a/docs/category/es6-api/index.html +++ b/docs/category/es6-api/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    ES6-API

    ES6新增API详解

    diff --git a/docs/category/es6/index.html b/docs/category/es6/index.html index f15271e7..7cb112f4 100644 --- a/docs/category/es6/index.html +++ b/docs/category/es6/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    ES6+

    ES6及更高版本特性

    diff --git a/docs/category/gin/index.html b/docs/category/gin/index.html index 28eb201d..19a6e1dc 100644 --- a/docs/category/gin/index.html +++ b/docs/category/gin/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Gin

    Go语言最流行的Web框架Gin的使用

    diff --git a/docs/category/grpc/index.html b/docs/category/grpc/index.html index 9606f175..7d35f542 100644 --- a/docs/category/grpc/index.html +++ b/docs/category/grpc/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    gRPC

    Go语言中使用gRPC进行微服务通信

    diff --git "a/docs/category/grpc\351\253\230\347\272\247/index.html" "b/docs/category/grpc\351\253\230\347\272\247/index.html" index dedffa05..876cd406 100644 --- "a/docs/category/grpc\351\253\230\347\272\247/index.html" +++ "b/docs/category/grpc\351\253\230\347\272\247/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    gRPC高级

    gRPC的高级特性和最佳实践

    diff --git a/docs/category/maven/index.html b/docs/category/maven/index.html index 5e22d1c2..2877ec18 100644 --- a/docs/category/maven/index.html +++ b/docs/category/maven/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Maven

    Maven项目管理工具

    diff --git a/docs/category/promise/index.html b/docs/category/promise/index.html index 5865c6e8..5989c173 100644 --- a/docs/category/promise/index.html +++ b/docs/category/promise/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Promise

    JavaScript异步编程Promise

    diff --git a/docs/category/stable-diffusion/index.html b/docs/category/stable-diffusion/index.html index 8b579fad..ca56f39a 100644 --- a/docs/category/stable-diffusion/index.html +++ b/docs/category/stable-diffusion/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Stable Diffusion

    Stable Diffusion 相关知识

    diff --git "a/docs/category/\344\270\223\351\242\230\345\206\205\345\256\271/index.html" "b/docs/category/\344\270\223\351\242\230\345\206\205\345\256\271/index.html" index 8b1022f1..a4d8d8e3 100644 --- "a/docs/category/\344\270\223\351\242\230\345\206\205\345\256\271/index.html" +++ "b/docs/category/\344\270\223\351\242\230\345\206\205\345\256\271/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    专题内容

    JavaScript专题深入研究

    diff --git "a/docs/category/\344\272\213\344\273\266\347\216\257/index.html" "b/docs/category/\344\272\213\344\273\266\347\216\257/index.html" index 621d20db..e68d14de 100644 --- "a/docs/category/\344\272\213\344\273\266\347\216\257/index.html" +++ "b/docs/category/\344\272\213\344\273\266\347\216\257/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    事件环

    JavaScript事件循环机制

    diff --git "a/docs/category/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/index.html" "b/docs/category/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/index.html" index 8eb15ad1..c28f2df4 100644 --- "a/docs/category/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/index.html" +++ "b/docs/category/\345\207\275\346\225\260\345\274\217\347\274\226\347\250\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    函数式编程

    JavaScript函数式编程

    diff --git "a/docs/category/\345\237\272\347\241\200-1/index.html" "b/docs/category/\345\237\272\347\241\200-1/index.html" index 2b8418bf..e44fc912 100644 --- "a/docs/category/\345\237\272\347\241\200-1/index.html" +++ "b/docs/category/\345\237\272\347\241\200-1/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    基础

    Java基础知识

    diff --git "a/docs/category/\345\237\272\347\241\200/index.html" "b/docs/category/\345\237\272\347\241\200/index.html" index 48a50b49..576c88e7 100644 --- "a/docs/category/\345\237\272\347\241\200/index.html" +++ "b/docs/category/\345\237\272\347\241\200/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    基础

    Python基础知识

    diff --git "a/docs/category/\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/index.html" "b/docs/category/\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/index.html" index c69f4aaa..5a42fcc0 100644 --- "a/docs/category/\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/index.html" +++ "b/docs/category/\345\270\270\350\247\201\345\206\205\347\275\256\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    常见内置方法

    JavaScript常用内置方法

    diff --git "a/docs/category/\345\270\270\350\247\201\351\227\256\351\242\230/index.html" "b/docs/category/\345\270\270\350\247\201\351\227\256\351\242\230/index.html" index e668f13b..248f869e 100644 --- "a/docs/category/\345\270\270\350\247\201\351\227\256\351\242\230/index.html" +++ "b/docs/category/\345\270\270\350\247\201\351\227\256\351\242\230/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    常见问题

    JavaScript常见问题和最佳实践

    diff --git "a/docs/category/\345\274\202\345\270\270/index.html" "b/docs/category/\345\274\202\345\270\270/index.html" index 1bdbf99b..7b2e85aa 100644 --- "a/docs/category/\345\274\202\345\270\270/index.html" +++ "b/docs/category/\345\274\202\345\270\270/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    异常

    Java异常处理机制

    diff --git "a/docs/category/\346\216\245\345\217\243/index.html" "b/docs/category/\346\216\245\345\217\243/index.html" index ddbb7d30..d17ca7c0 100644 --- "a/docs/category/\346\216\245\345\217\243/index.html" +++ "b/docs/category/\346\216\245\345\217\243/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    接口

    Go语言接口，实现多态和抽象

    diff --git "a/docs/category/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" "b/docs/category/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" index 8c129d80..4024a525 100644 --- "a/docs/category/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" +++ "b/docs/category/\346\225\260\347\273\204\346\211\251\345\261\225\346\226\271\346\263\225/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    数组扩展方法

    JavaScript数组扩展方法详解

    diff --git "a/docs/category/\346\263\233\345\236\213/index.html" "b/docs/category/\346\263\233\345\236\213/index.html" index 468e889c..79d4db92 100644 --- "a/docs/category/\346\263\233\345\236\213/index.html" +++ "b/docs/category/\346\263\233\345\236\213/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    泛型

    Java编程语言中的泛型

    diff --git "a/docs/category/\350\247\243\351\207\212\345\231\250/index.html" "b/docs/category/\350\247\243\351\207\212\345\231\250/index.html" index 4429f49a..2200e08e 100644 --- "a/docs/category/\350\247\243\351\207\212\345\231\250/index.html" +++ "b/docs/category/\350\247\243\351\207\212\345\231\250/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    解释器

    Python解释器原理

    diff --git "a/docs/category/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" "b/docs/category/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" index 7efb2cdc..75dc80e2 100644 --- "a/docs/category/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" +++ "b/docs/category/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    设计模式

    Java设计模式

    diff --git "a/docs/category/\351\235\242\345\220\221\345\257\271\350\261\241/index.html" "b/docs/category/\351\235\242\345\220\221\345\257\271\350\261\241/index.html" index 6f559d59..560dca22 100644 --- "a/docs/category/\351\235\242\345\220\221\345\257\271\350\261\241/index.html" +++ "b/docs/category/\351\235\242\345\220\221\345\257\271\350\261\241/index.html" @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    面向对象

    Java面向对象编程

    diff --git a/docs/intro/index.html b/docs/intro/index.html index f42e0cd8..9d4302e9 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -11,10 +11,10 @@ - - + + -
    跳到主要内容

    intro

    intro

    编辑此页
    最后由 sumingcheng 于 更新
    +
    跳到主要内容

    intro

    intro

    编辑此页
    最后由 sumingcheng 于 更新
    \ No newline at end of file diff --git a/index.html b/index.html index c07915b0..92197571 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Sumingcheng's Document Center

    Document Center

    Docusaurus Tutorial - 5min ⏱️
    Easy to Use

    Easy to Use

    Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly.

    Focus on What Matters

    Focus on What Matters

    Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and move your docs into the docs directory.

    Powered by React

    Powered by React

    Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same header and footer.

    diff --git a/markdown-page/index.html b/markdown-page/index.html index 356c64d9..805d00c1 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -11,8 +11,8 @@ - - + +
    跳到主要内容

    Markdown page example

    diff --git a/search/index.html b/search/index.html index db075775..c95b7920 100644 --- a/search/index.html +++ b/search/index.html @@ -11,8 +11,8 @@ - - + +

    在文档中搜索