From 559e8350a5eab6bae08f728e04d15bdfc4936e30 Mon Sep 17 00:00:00 2001 From: Ybhdsg123 Date: Wed, 26 Jul 2023 09:12:52 +0000 Subject: [PATCH] deploy: fbb2b8731bf73d18533e3d29cd074ea9541638b7 --- 404.html | 8 +- assets/{app.cac277bf.js => app.88185e12.js} | 4 +- ...0ed5.js => VPAlgoliaSearchBox.b308f465.js} | 2 +- assets/index.md.6ec8a0c5.js | 1 - assets/index.md.6ec8a0c5.lean.js | 1 - assets/index.md.d07e4110.js | 1 + assets/index.md.d07e4110.lean.js | 1 + ....js => novice-guide_README.md.55ead219.js} | 2 +- ...> novice-guide_README.md.55ead219.lean.js} | 2 +- ...ase_cssAnimation_index.md.ba17ab61.lean.js | 1 - ...es_base_cssAnimation_index.md.db898473.js} | 2 +- ...ase_cssAnimation_index.md.db898473.lean.js | 1 + ...js => pages_base_css_index.md.2d4f0195.js} | 34 ++- ... pages_base_css_index.md.2d4f0195.lean.js} | 2 +- .../pages_base_globalDemo.md.17f0d49d.lean.js | 1 - assets/pages_base_globalDemo.md.f5d8a625.js | 1 + .../pages_base_globalDemo.md.f5d8a625.lean.js | 1 + ...s => pages_base_html_index.md.66f38061.js} | 2 +- ...pages_base_html_index.md.66f38061.lean.js} | 2 +- ....js => pages_base_js_index.md.adf3d015.js} | 58 +++-- ...> pages_base_js_index.md.adf3d015.lean.js} | 2 +- assets/pages_base_js_prototype.md.650df3e5.js | 88 +++++++ ...ages_base_js_prototype.md.650df3e5.lean.js | 1 + assets/pages_base_js_this.md.ec485cc5.js | 221 ++++++++++++++++ assets/pages_base_js_this.md.ec485cc5.lean.js | 1 + ... pages_base_leetcode_index.md.0ae9a5a0.js} | 2 +- ...s_base_leetcode_index.md.0ae9a5a0.lean.js} | 2 +- ...s => pages_base_uploadFile.md.a0df13d9.js} | 2 +- ...pages_base_uploadFile.md.a0df13d9.lean.js} | 2 +- ...3f.js => pages_canvas_demo.md.b7bf901c.js} | 2 +- ... => pages_canvas_demo.md.b7bf901c.lean.js} | 2 +- ...2.js => pages_canvas_index.md.595e9bdf.js} | 2 +- ...=> pages_canvas_index.md.595e9bdf.lean.js} | 2 +- ...e7.js => pages_css_cssDemo.md.40e297c4.js} | 4 +- ... => pages_css_cssDemo.md.40e297c4.lean.js} | 2 +- ...s_git_githubQuestion_index.md.a299864d.js} | 2 +- ..._githubQuestion_index.md.a299864d.lean.js} | 2 +- ...92.js => pages_index_index.md.21c95c36.js} | 2 +- ... => pages_index_index.md.21c95c36.lean.js} | 2 +- ...> pages_interviews_browser.md.b9843bd5.js} | 2 +- ...es_interviews_browser.md.b9843bd5.lean.js} | 2 +- ...js => pages_interviews_css.md.5f84b849.js} | 2 +- ... pages_interviews_css.md.5f84b849.lean.js} | 2 +- ...pages_interviews_eventLoop.md.1d4bd144.js} | 2 +- ..._interviews_eventLoop.md.1d4bd144.lean.js} | 2 +- ...js => pages_interviews_git.md.c2a3befc.js} | 2 +- ... pages_interviews_git.md.c2a3befc.lean.js} | 2 +- ...ges_interviews_handwriteFn.md.9554aa8e.js} | 80 +----- ...nterviews_handwriteFn.md.9554aa8e.lean.js} | 2 +- ...s => pages_interviews_html.md.45009bf3.js} | 2 +- ...pages_interviews_html.md.45009bf3.lean.js} | 2 +- ...s => pages_interviews_http.md.8abf6eb5.js} | 2 +- ...pages_interviews_http.md.8abf6eb5.lean.js} | 2 +- ....js => pages_interviews_js.md.642bf115.js} | 4 +- ...> pages_interviews_js.md.642bf115.lean.js} | 2 +- ...interviews_networkrotocols.md.910d1446.js} | 2 +- ...views_networkrotocols.md.910d1446.lean.js} | 2 +- ...js => pages_interviews_vue.md.9053cc04.js} | 2 +- ... pages_interviews_vue.md.9053cc04.lean.js} | 2 +- ...> pages_interviews_webpack.md.1fa7fa56.js} | 2 +- ...es_interviews_webpack.md.1fa7fa56.lean.js} | 2 +- ...lotsOfDifferent_demo1_index.md.56190601.js | 9 + ...fDifferent_demo1_index.md.56190601.lean.js | 1 + ...49d.js => pages_node_index.md.5f123883.js} | 8 +- assets/pages_node_index.md.5f123883.lean.js | 1 + assets/pages_node_index.md.cd83335d.js | 1 - assets/pages_node_index.md.cd83335d.lean.js | 1 - ... pages_rollup-build_rollup.md.1efd2d0e.js} | 2 +- ...s_rollup-build_rollup.md.1efd2d0e.lean.js} | 2 +- ...s => pages_threejs_threejs.md.115909cd.js} | 2 +- ...pages_threejs_threejs.md.115909cd.lean.js} | 2 +- ... => pages_toolFun_download.md.85833187.js} | 2 +- ...ages_toolFun_download.md.85833187.lean.js} | 2 +- ...s => pages_toolFun_imgTool.md.b48323c9.js} | 2 +- ...pages_toolFun_imgTool.md.b48323c9.lean.js} | 2 +- ... => pages_toolFun_timeTool.md.2fd221b3.js} | 2 +- ...ages_toolFun_timeTool.md.2fd221b3.lean.js} | 2 +- ....js => pages_toolFun_tools.md.4b3bad63.js} | 2 +- ...> pages_toolFun_tools.md.4b3bad63.lean.js} | 2 +- ...s => pages_uniapp_calendar.md.065cae52.js} | 2 +- ...pages_uniapp_calendar.md.065cae52.lean.js} | 2 +- ...niapp_components-uploadImg.md.db76862e.js} | 2 +- ..._components-uploadImg.md.db76862e.lean.js} | 2 +- ...3.js => pages_uniapp_index.md.ae5a24c3.js} | 2 +- ...=> pages_uniapp_index.md.ae5a24c3.lean.js} | 2 +- ...925.js => pages_vite_index.md.55a91e0d.js} | 2 +- ...s => pages_vite_index.md.55a91e0d.lean.js} | 2 +- ...js => pages_vite_vitepress.md.88d59af6.js} | 2 +- ... pages_vite_vitepress.md.88d59af6.lean.js} | 2 +- ... => pages_vscodeTool_index.md.19107cde.js} | 2 +- ...ages_vscodeTool_index.md.19107cde.lean.js} | 2 +- ...s_vue3-base_basic_computed.md.af4881fb.js} | 2 +- ...3-base_basic_computed.md.af4881fb.lean.js} | 2 +- ...pages_vue3-base_basic_note.md.2007ecc2.js} | 2 +- ..._vue3-base_basic_note.md.2007ecc2.lean.js} | 2 +- ...s_vue3-base_basic_reactive.md.1a625091.js} | 2 +- ...e3-base_basic_reactive.md.1a625091.lean.js | 1 + ... pages_vue3-base_basic_ref.md.d5b10178.js} | 2 +- ...es_vue3-base_basic_ref.md.d5b10178.lean.js | 1 + ...es_vue3-base_basic_v-model.md.88abdea8.js} | 2 +- ...e3-base_basic_v-model.md.88abdea8.lean.js} | 2 +- ...e_components_componentNote.md.1043555d.js} | 2 +- ...ponents_componentNote.md.1043555d.lean.js} | 2 +- ...e3-base_components_provide.md.e21ca77d.js} | 2 +- ...se_components_provide.md.e21ca77d.lean.js} | 2 +- ...s_vue3-base_components_reg.md.ef9abdbb.js} | 2 +- ...3-base_components_reg.md.ef9abdbb.lean.js} | 2 +- ..._vue3-base_components_slot.md.b91c6a1d.js} | 2 +- ...-base_components_slot.md.b91c6a1d.lean.js} | 2 +- ...ages_vue3-base_vueCore_diff.md.55e4c4ca.js | 1 + ...vue3-base_vueCore_diff.md.55e4c4ca.lean.js | 1 + ...eCore_responsivePrinciples.md.d3c42f12.js} | 2 +- ..._responsivePrinciples.md.d3c42f12.lean.js} | 2 +- ...e3-base_vueCore_virtualDom.md.f7ee0e72.js} | 2 +- ...se_vueCore_virtualDom.md.f7ee0e72.lean.js} | 2 +- ...vue3-element-admin_anxinPC.md.c46f9aa5.js} | 2 +- ...element-admin_anxinPC.md.c46f9aa5.lean.js} | 2 +- ...element-admin_epComponents.md.3923bf86.js} | 2 +- ...nt-admin_epComponents.md.3923bf86.lean.js} | 2 +- ...reasures_vueCommonTips.md.9f462d67.lean.js | 1 - ...ue3Treasures_vueCommonTips.md.b2e5b00f.js} | 84 +++++- ...reasures_vueCommonTips.md.b2e5b00f.lean.js | 1 + ...ue3Treasures_vueComponents.md.5cb0d14c.js} | 2 +- ...easures_vueComponents.md.5cb0d14c.lean.js} | 2 +- ...ue3Treasures_vueDirectives.md.0c512ed3.js} | 2 +- ...easures_vueDirectives.md.0c512ed3.lean.js} | 2 +- ...es_vue3_basic_reactive.md.f63c3e3c.lean.js | 1 - .../pages_vue3_basic_ref.md.855045ab.lean.js | 1 - assets/pages_vueCore_diff.md.f8e1852d.js | 1 - assets/pages_vueCore_diff.md.f8e1852d.lean.js | 1 - ...{style.8e0769ae.css => style.2fb23578.css} | 2 +- hashmap.json | 2 +- index.html | 14 +- novice-guide/README.html | 16 +- pages/base/css/index.html | 46 +++- pages/base/cssAnimation/index.html | 16 +- pages/base/globalDemo.html | 154 +---------- pages/base/html/index.html | 16 +- pages/base/js/index.html | 70 +++-- pages/base/js/prototype.html | 108 ++++++++ pages/base/js/this.html | 241 ++++++++++++++++++ pages/base/leetcode/index.html | 16 +- pages/base/uploadFile.html | 16 +- pages/canvas/demo.html | 14 +- pages/canvas/index.html | 16 +- pages/css/cssDemo.html | 16 +- pages/git/githubQuestion/index.html | 16 +- pages/index/index.html | 16 +- pages/interviews/browser.html | 14 +- pages/interviews/css.html | 16 +- pages/interviews/eventLoop.html | 14 +- pages/interviews/git.html | 14 +- pages/interviews/handwriteFn.html | 92 +------ pages/interviews/html.html | 16 +- pages/interviews/http.html | 16 +- pages/interviews/js.html | 18 +- pages/interviews/networkrotocols.html | 16 +- pages/interviews/vue.html | 14 +- pages/interviews/webpack.html | 16 +- pages/lotsOfDifferent/demo1/index.html | 29 +++ pages/node/index.html | 152 ++++++++++- pages/rollup-build/rollup.html | 16 +- pages/threejs/threejs.html | 16 +- pages/toolFun/download.html | 14 +- pages/toolFun/imgTool.html | 16 +- pages/toolFun/timeTool.html | 14 +- pages/toolFun/tools.html | 16 +- pages/uniapp/calendar.html | 16 +- pages/uniapp/components-uploadImg.html | 14 +- pages/uniapp/index.html | 16 +- pages/vite/index.html | 16 +- pages/vite/vitepress.html | 14 +- pages/vscodeTool/index.html | 16 +- pages/{vue3 => vue3-base}/basic/computed.html | 16 +- pages/{vue3 => vue3-base}/basic/note.html | 16 +- pages/{vue3 => vue3-base}/basic/reactive.html | 16 +- pages/{vue3 => vue3-base}/basic/ref.html | 16 +- pages/{vue3 => vue3-base}/basic/v-model.html | 16 +- .../components/componentNote.html | 16 +- .../components/provide.html | 16 +- pages/{vue3 => vue3-base}/components/reg.html | 16 +- .../{vue3 => vue3-base}/components/slot.html | 16 +- pages/{ => vue3-base}/vueCore/diff.html | 14 +- .../vueCore/responsivePrinciples.html | 16 +- pages/{ => vue3-base}/vueCore/virtualDom.html | 16 +- pages/vue3-element-admin/anxinPC.html | 16 +- pages/vue3-element-admin/epComponents.html | 16 +- pages/vue3Treasures/vueCommonTips.html | 96 ++++++- pages/vue3Treasures/vueComponents.html | 14 +- pages/vue3Treasures/vueDirectives.html | 16 +- 190 files changed, 1691 insertions(+), 876 deletions(-) rename assets/{app.cac277bf.js => app.88185e12.js} (70%) rename assets/chunks/{VPAlgoliaSearchBox.ba670ed5.js => VPAlgoliaSearchBox.b308f465.js} (99%) delete mode 100644 assets/index.md.6ec8a0c5.js delete mode 100644 assets/index.md.6ec8a0c5.lean.js create mode 100644 assets/index.md.d07e4110.js create mode 100644 assets/index.md.d07e4110.lean.js rename assets/{novice-guide_README.md.4d1aaf78.js => novice-guide_README.md.55ead219.js} (99%) rename assets/{novice-guide_README.md.4d1aaf78.lean.js => novice-guide_README.md.55ead219.lean.js} (97%) delete mode 100644 assets/pages_base_cssAnimation_index.md.ba17ab61.lean.js rename assets/{pages_base_cssAnimation_index.md.ba17ab61.js => pages_base_cssAnimation_index.md.db898473.js} (98%) create mode 100644 assets/pages_base_cssAnimation_index.md.db898473.lean.js rename assets/{pages_base_css_index.md.85f25ff6.js => pages_base_css_index.md.2d4f0195.js} (59%) rename assets/{pages_base_css_index.md.85f25ff6.lean.js => pages_base_css_index.md.2d4f0195.lean.js} (59%) delete mode 100644 assets/pages_base_globalDemo.md.17f0d49d.lean.js create mode 100644 assets/pages_base_globalDemo.md.f5d8a625.js create mode 100644 assets/pages_base_globalDemo.md.f5d8a625.lean.js rename assets/{pages_base_html_index.md.084d5598.js => pages_base_html_index.md.66f38061.js} (99%) rename assets/{pages_base_html_index.md.084d5598.lean.js => pages_base_html_index.md.66f38061.lean.js} (94%) rename assets/{pages_base_js_index.md.a6526166.js => pages_base_js_index.md.adf3d015.js} (81%) rename assets/{pages_base_js_index.md.a6526166.lean.js => pages_base_js_index.md.adf3d015.lean.js} (77%) create mode 100644 assets/pages_base_js_prototype.md.650df3e5.js create mode 100644 assets/pages_base_js_prototype.md.650df3e5.lean.js create mode 100644 assets/pages_base_js_this.md.ec485cc5.js create mode 100644 assets/pages_base_js_this.md.ec485cc5.lean.js rename assets/{pages_base_leetcode_index.md.9731c2ad.js => pages_base_leetcode_index.md.0ae9a5a0.js} (99%) rename assets/{pages_base_leetcode_index.md.9731c2ad.lean.js => pages_base_leetcode_index.md.0ae9a5a0.lean.js} (96%) rename assets/{pages_base_uploadFile.md.8dfa3e49.js => pages_base_uploadFile.md.a0df13d9.js} (99%) rename assets/{pages_base_uploadFile.md.8dfa3e49.lean.js => pages_base_uploadFile.md.a0df13d9.lean.js} (89%) rename assets/{pages_canvas_demo.md.4a6d673f.js => pages_canvas_demo.md.b7bf901c.js} (98%) rename assets/{pages_canvas_demo.md.4a6d673f.lean.js => pages_canvas_demo.md.b7bf901c.lean.js} (97%) rename assets/{pages_canvas_index.md.167acf62.js => pages_canvas_index.md.595e9bdf.js} (99%) rename assets/{pages_canvas_index.md.167acf62.lean.js => pages_canvas_index.md.595e9bdf.lean.js} (98%) rename assets/{pages_css_cssDemo.md.f7b7a8e7.js => pages_css_cssDemo.md.40e297c4.js} (91%) rename assets/{pages_css_cssDemo.md.f7b7a8e7.lean.js => pages_css_cssDemo.md.40e297c4.lean.js} (68%) rename assets/{pages_git_githubQuestion_index.md.8f146a86.js => pages_git_githubQuestion_index.md.a299864d.js} (99%) rename assets/{pages_git_githubQuestion_index.md.8f146a86.lean.js => pages_git_githubQuestion_index.md.a299864d.lean.js} (96%) rename assets/{pages_index_index.md.2158a292.js => pages_index_index.md.21c95c36.js} (99%) rename assets/{pages_index_index.md.2158a292.lean.js => pages_index_index.md.21c95c36.lean.js} (98%) rename assets/{pages_interviews_browser.md.51981874.js => pages_interviews_browser.md.b9843bd5.js} (99%) rename assets/{pages_interviews_browser.md.51981874.lean.js => pages_interviews_browser.md.b9843bd5.lean.js} (94%) rename assets/{pages_interviews_css.md.4c56046e.js => pages_interviews_css.md.5f84b849.js} (99%) rename assets/{pages_interviews_css.md.4c56046e.lean.js => pages_interviews_css.md.5f84b849.lean.js} (98%) rename assets/{pages_interviews_eventLoop.md.b8f8395a.js => pages_interviews_eventLoop.md.1d4bd144.js} (99%) rename assets/{pages_interviews_eventLoop.md.b8f8395a.lean.js => pages_interviews_eventLoop.md.1d4bd144.lean.js} (95%) rename assets/{pages_interviews_git.md.c9866cd5.js => pages_interviews_git.md.c2a3befc.js} (99%) rename assets/{pages_interviews_git.md.c9866cd5.lean.js => pages_interviews_git.md.c2a3befc.lean.js} (93%) rename assets/{pages_interviews_handwriteFn.md.269f1a12.js => pages_interviews_handwriteFn.md.9554aa8e.js} (83%) rename assets/{pages_interviews_handwriteFn.md.269f1a12.lean.js => pages_interviews_handwriteFn.md.9554aa8e.lean.js} (78%) rename assets/{pages_interviews_html.md.213e3dd8.js => pages_interviews_html.md.45009bf3.js} (99%) rename assets/{pages_interviews_html.md.213e3dd8.lean.js => pages_interviews_html.md.45009bf3.lean.js} (98%) rename assets/{pages_interviews_http.md.c4668dab.js => pages_interviews_http.md.8abf6eb5.js} (99%) rename assets/{pages_interviews_http.md.c4668dab.lean.js => pages_interviews_http.md.8abf6eb5.lean.js} (99%) rename assets/{pages_interviews_js.md.3c178cde.js => pages_interviews_js.md.642bf115.js} (94%) rename assets/{pages_interviews_js.md.3c178cde.lean.js => pages_interviews_js.md.642bf115.lean.js} (97%) rename assets/{pages_interviews_networkrotocols.md.7dbf4a52.js => pages_interviews_networkrotocols.md.910d1446.js} (99%) rename assets/{pages_interviews_networkrotocols.md.7dbf4a52.lean.js => pages_interviews_networkrotocols.md.910d1446.lean.js} (95%) rename assets/{pages_interviews_vue.md.a8066c1e.js => pages_interviews_vue.md.9053cc04.js} (99%) rename assets/{pages_interviews_vue.md.a8066c1e.lean.js => pages_interviews_vue.md.9053cc04.lean.js} (96%) rename assets/{pages_interviews_webpack.md.fb4ce712.js => pages_interviews_webpack.md.1fa7fa56.js} (99%) rename assets/{pages_interviews_webpack.md.fb4ce712.lean.js => pages_interviews_webpack.md.1fa7fa56.lean.js} (99%) create mode 100644 assets/pages_lotsOfDifferent_demo1_index.md.56190601.js create mode 100644 assets/pages_lotsOfDifferent_demo1_index.md.56190601.lean.js rename assets/{pages_base_globalDemo.md.17f0d49d.js => pages_node_index.md.5f123883.js} (85%) create mode 100644 assets/pages_node_index.md.5f123883.lean.js delete mode 100644 assets/pages_node_index.md.cd83335d.js delete mode 100644 assets/pages_node_index.md.cd83335d.lean.js rename assets/{pages_rollup-build_rollup.md.36a8ef50.js => pages_rollup-build_rollup.md.1efd2d0e.js} (99%) rename assets/{pages_rollup-build_rollup.md.36a8ef50.lean.js => pages_rollup-build_rollup.md.1efd2d0e.lean.js} (94%) rename assets/{pages_threejs_threejs.md.6cef040c.js => pages_threejs_threejs.md.115909cd.js} (99%) rename assets/{pages_threejs_threejs.md.6cef040c.lean.js => pages_threejs_threejs.md.115909cd.lean.js} (99%) rename assets/{pages_toolFun_download.md.7792d731.js => pages_toolFun_download.md.85833187.js} (99%) rename assets/{pages_toolFun_download.md.7792d731.lean.js => pages_toolFun_download.md.85833187.lean.js} (95%) rename assets/{pages_toolFun_imgTool.md.18293a7c.js => pages_toolFun_imgTool.md.b48323c9.js} (99%) rename assets/{pages_toolFun_imgTool.md.18293a7c.lean.js => pages_toolFun_imgTool.md.b48323c9.lean.js} (92%) rename assets/{pages_toolFun_timeTool.md.e01ff7bc.js => pages_toolFun_timeTool.md.2fd221b3.js} (99%) rename assets/{pages_toolFun_timeTool.md.e01ff7bc.lean.js => pages_toolFun_timeTool.md.2fd221b3.lean.js} (97%) rename assets/{pages_toolFun_tools.md.33bffa6c.js => pages_toolFun_tools.md.4b3bad63.js} (99%) rename assets/{pages_toolFun_tools.md.33bffa6c.lean.js => pages_toolFun_tools.md.4b3bad63.lean.js} (98%) rename assets/{pages_uniapp_calendar.md.82a523e6.js => pages_uniapp_calendar.md.065cae52.js} (99%) rename assets/{pages_uniapp_calendar.md.82a523e6.lean.js => pages_uniapp_calendar.md.065cae52.lean.js} (92%) rename assets/{pages_uniapp_components-uploadImg.md.7c6e8089.js => pages_uniapp_components-uploadImg.md.db76862e.js} (99%) rename assets/{pages_uniapp_components-uploadImg.md.7c6e8089.lean.js => pages_uniapp_components-uploadImg.md.db76862e.lean.js} (95%) rename assets/{pages_uniapp_index.md.a99ff0a3.js => pages_uniapp_index.md.ae5a24c3.js} (99%) rename assets/{pages_uniapp_index.md.a99ff0a3.lean.js => pages_uniapp_index.md.ae5a24c3.lean.js} (94%) rename assets/{pages_vite_index.md.616ac925.js => pages_vite_index.md.55a91e0d.js} (99%) rename assets/{pages_vite_index.md.616ac925.lean.js => pages_vite_index.md.55a91e0d.lean.js} (92%) rename assets/{pages_vite_vitepress.md.432c8ce6.js => pages_vite_vitepress.md.88d59af6.js} (95%) rename assets/{pages_vite_vitepress.md.432c8ce6.lean.js => pages_vite_vitepress.md.88d59af6.lean.js} (89%) rename assets/{pages_vscodeTool_index.md.c6793020.js => pages_vscodeTool_index.md.19107cde.js} (99%) rename assets/{pages_vscodeTool_index.md.c6793020.lean.js => pages_vscodeTool_index.md.19107cde.lean.js} (91%) rename assets/{pages_vue3_basic_computed.md.1263e59b.js => pages_vue3-base_basic_computed.md.af4881fb.js} (95%) rename assets/{pages_vue3_basic_computed.md.1263e59b.lean.js => pages_vue3-base_basic_computed.md.af4881fb.lean.js} (78%) rename assets/{pages_vue3_basic_note.md.3b0f3b84.js => pages_vue3-base_basic_note.md.2007ecc2.js} (95%) rename assets/{pages_vue3_basic_note.md.3b0f3b84.lean.js => pages_vue3-base_basic_note.md.2007ecc2.lean.js} (87%) rename assets/{pages_vue3_basic_reactive.md.f63c3e3c.js => pages_vue3-base_basic_reactive.md.1a625091.js} (57%) create mode 100644 assets/pages_vue3-base_basic_reactive.md.1a625091.lean.js rename assets/{pages_vue3_basic_ref.md.855045ab.js => pages_vue3-base_basic_ref.md.d5b10178.js} (80%) create mode 100644 assets/pages_vue3-base_basic_ref.md.d5b10178.lean.js rename assets/{pages_vue3_basic_v-model.md.97277445.js => pages_vue3-base_basic_v-model.md.88abdea8.js} (96%) rename assets/{pages_vue3_basic_v-model.md.97277445.lean.js => pages_vue3-base_basic_v-model.md.88abdea8.lean.js} (74%) rename assets/{pages_vue3_components_componentNote.md.6337365e.js => pages_vue3-base_components_componentNote.md.1043555d.js} (93%) rename assets/{pages_vue3_components_componentNote.md.6337365e.lean.js => pages_vue3-base_components_componentNote.md.1043555d.lean.js} (74%) rename assets/{pages_vue3_components_provide.md.422aefa5.js => pages_vue3-base_components_provide.md.e21ca77d.js} (84%) rename assets/{pages_vue3_components_provide.md.422aefa5.lean.js => pages_vue3-base_components_provide.md.e21ca77d.lean.js} (63%) rename assets/{pages_vue3_components_reg.md.09fb6f64.js => pages_vue3-base_components_reg.md.ef9abdbb.js} (94%) rename assets/{pages_vue3_components_reg.md.09fb6f64.lean.js => pages_vue3-base_components_reg.md.ef9abdbb.lean.js} (73%) rename assets/{pages_vue3_components_slot.md.33d1d27f.js => pages_vue3-base_components_slot.md.b91c6a1d.js} (85%) rename assets/{pages_vue3_components_slot.md.33d1d27f.lean.js => pages_vue3-base_components_slot.md.b91c6a1d.lean.js} (77%) create mode 100644 assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.js create mode 100644 assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.lean.js rename assets/{pages_vueCore_responsivePrinciples.md.fbe18c7f.js => pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.js} (97%) rename assets/{pages_vueCore_responsivePrinciples.md.fbe18c7f.lean.js => pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.lean.js} (86%) rename assets/{pages_vueCore_virtualDom.md.38185b1e.js => pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.js} (54%) rename assets/{pages_vueCore_virtualDom.md.38185b1e.lean.js => pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.lean.js} (79%) rename assets/{pages_vue3-element-admin_anxinPC.md.57d7ccd4.js => pages_vue3-element-admin_anxinPC.md.c46f9aa5.js} (99%) rename assets/{pages_vue3-element-admin_anxinPC.md.57d7ccd4.lean.js => pages_vue3-element-admin_anxinPC.md.c46f9aa5.lean.js} (97%) rename assets/{pages_vue3-element-admin_epComponents.md.7ebe1e71.js => pages_vue3-element-admin_epComponents.md.3923bf86.js} (99%) rename assets/{pages_vue3-element-admin_epComponents.md.7ebe1e71.lean.js => pages_vue3-element-admin_epComponents.md.3923bf86.lean.js} (98%) delete mode 100644 assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.lean.js rename assets/{pages_vue3Treasures_vueCommonTips.md.9f462d67.js => pages_vue3Treasures_vueCommonTips.md.b2e5b00f.js} (56%) create mode 100644 assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.lean.js rename assets/{pages_vue3Treasures_vueComponents.md.59d1affa.js => pages_vue3Treasures_vueComponents.md.5cb0d14c.js} (98%) rename assets/{pages_vue3Treasures_vueComponents.md.59d1affa.lean.js => pages_vue3Treasures_vueComponents.md.5cb0d14c.lean.js} (97%) rename assets/{pages_vue3Treasures_vueDirectives.md.117c53dd.js => pages_vue3Treasures_vueDirectives.md.0c512ed3.js} (99%) rename assets/{pages_vue3Treasures_vueDirectives.md.117c53dd.lean.js => pages_vue3Treasures_vueDirectives.md.0c512ed3.lean.js} (97%) delete mode 100644 assets/pages_vue3_basic_reactive.md.f63c3e3c.lean.js delete mode 100644 assets/pages_vue3_basic_ref.md.855045ab.lean.js delete mode 100644 assets/pages_vueCore_diff.md.f8e1852d.js delete mode 100644 assets/pages_vueCore_diff.md.f8e1852d.lean.js rename assets/{style.8e0769ae.css => style.2fb23578.css} (98%) create mode 100644 pages/base/js/prototype.html create mode 100644 pages/base/js/this.html create mode 100644 pages/lotsOfDifferent/demo1/index.html rename pages/{vue3 => vue3-base}/basic/computed.html (73%) rename pages/{vue3 => vue3-base}/basic/note.html (70%) rename pages/{vue3 => vue3-base}/basic/reactive.html (54%) rename pages/{vue3 => vue3-base}/basic/ref.html (61%) rename pages/{vue3 => vue3-base}/basic/v-model.html (70%) rename pages/{vue3 => vue3-base}/components/componentNote.html (68%) rename pages/{vue3 => vue3-base}/components/provide.html (59%) rename pages/{vue3 => vue3-base}/components/reg.html (66%) rename pages/{vue3 => vue3-base}/components/slot.html (61%) rename pages/{ => vue3-base}/vueCore/diff.html (53%) rename pages/{ => vue3-base}/vueCore/responsivePrinciples.html (83%) rename pages/{ => vue3-base}/vueCore/virtualDom.html (56%) diff --git a/404.html b/404.html index 487835c..7e57249 100644 --- a/404.html +++ b/404.html @@ -5,15 +5,15 @@ 404 | 我的网站 - - + +
- - + + \ No newline at end of file diff --git a/assets/app.cac277bf.js b/assets/app.88185e12.js similarity index 70% rename from assets/app.cac277bf.js rename to assets/app.88185e12.js index 4d4b99b..b027699 100644 --- a/assets/app.cac277bf.js +++ b/assets/app.88185e12.js @@ -1,7 +1,7 @@ -function Ds(e,t){const n=Object.create(null),s=e.split(",");for(let o=0;o!!n[o.toLowerCase()]:o=>!!n[o]}function mn(e){if(K(e)){const t={};for(let n=0;n{if(n){const s=n.split(Ar);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function he(e){let t="";if(xe(e))t=e;else if(K(e))for(let n=0;nxe(e)?e:e==null?"":K(e)||ge(e)&&(e.toString===yi||!X(e.toString))?JSON.stringify(e,mi,2):String(e),mi=(e,t)=>t&&t.__v_isRef?mi(e,t.value):Bt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,o])=>(n[`${s} =>`]=o,n),{})}:gi(t)?{[`Set(${t.size})`]:[...t.values()]}:ge(t)&&!K(t)&&!xi(t)?String(t):t,me={},Nt=[],Ke=()=>{},Hr=()=>!1,Dr=/^on[^a-z]/,gn=e=>Dr.test(e),Rs=e=>e.startsWith("onUpdate:"),$e=Object.assign,zs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Rr=Object.prototype.hasOwnProperty,oe=(e,t)=>Rr.call(e,t),K=Array.isArray,Bt=e=>Yn(e)==="[object Map]",gi=e=>Yn(e)==="[object Set]",X=e=>typeof e=="function",xe=e=>typeof e=="string",Us=e=>typeof e=="symbol",ge=e=>e!==null&&typeof e=="object",bi=e=>ge(e)&&X(e.then)&&X(e.catch),yi=Object.prototype.toString,Yn=e=>yi.call(e),zr=e=>Yn(e).slice(8,-1),xi=e=>Yn(e)==="[object Object]",js=e=>xe(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,sn=Ds(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Gn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Ur=/-(\w)/g,et=Gn(e=>e.replace(Ur,(t,n)=>n?n.toUpperCase():"")),jr=/\B([A-Z])/g,Gt=Gn(e=>e.replace(jr,"-$1").toLowerCase()),Qn=Gn(e=>e.charAt(0).toUpperCase()+e.slice(1)),hs=Gn(e=>e?`on${Qn(e)}`:""),un=(e,t)=>!Object.is(e,t),In=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},fn=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let yo;const Kr=()=>yo||(yo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let Ae;class Wr{constructor(t=!1){this.detached=t,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Ae,!t&&Ae&&(this.index=(Ae.scopes||(Ae.scopes=[])).push(this)-1)}run(t){if(this.active){const n=Ae;try{return Ae=this,t()}finally{Ae=n}}}on(){Ae=this}off(){Ae=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},wi=e=>(e.w&ht)>0,ki=e=>(e.n&ht)>0,Qr=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s{(h==="length"||h>=c)&&l.push(u)})}else switch(n!==void 0&&l.push(r.get(n)),t){case"add":K(e)?js(n)&&l.push(r.get("length")):(l.push(r.get(Tt)),Bt(e)&&l.push(r.get(Cs)));break;case"delete":K(e)||(l.push(r.get(Tt)),Bt(e)&&l.push(r.get(Cs)));break;case"set":Bt(e)&&l.push(r.get(Tt));break}if(l.length===1)l[0]&&Ss(l[0]);else{const c=[];for(const u of l)u&&c.push(...u);Ss(Ks(c))}}function Ss(e,t){const n=K(e)?e:[...e];for(const s of n)s.computed&&wo(s);for(const s of n)s.computed||wo(s)}function wo(e,t){(e!==Ue||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const Xr=Ds("__proto__,__v_isRef,__isVue"),Ci=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Us)),Zr=qs(),el=qs(!1,!0),tl=qs(!0),ko=nl();function nl(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=ce(this);for(let i=0,r=this.length;i{e[t]=function(...n){Qt();const s=ce(this)[t].apply(this,n);return Jt(),s}}),e}function qs(e=!1,t=!1){return function(s,o,i){if(o==="__v_isReactive")return!e;if(o==="__v_isReadonly")return e;if(o==="__v_isShallow")return t;if(o==="__v_raw"&&i===(e?t?gl:Li:t?Ei:Vi).get(s))return s;const r=K(s);if(!e&&r&&oe(ko,o))return Reflect.get(ko,o,i);const l=Reflect.get(s,o,i);return(Us(o)?Ci.has(o):Xr(o))||(e||Be(s,"get",o),t)?l:Ce(l)?r&&js(o)?l:l.value:ge(l)?e?Qs(l):Xn(l):l}}const sl=Si(),ol=Si(!0);function Si(e=!1){return function(n,s,o,i){let r=n[s];if(Ut(r)&&Ce(r)&&!Ce(o))return!1;if(!e&&(!On(o)&&!Ut(o)&&(r=ce(r),o=ce(o)),!K(n)&&Ce(r)&&!Ce(o)))return r.value=o,!0;const l=K(n)&&js(s)?Number(s)e,Jn=e=>Reflect.getPrototypeOf(e);function $n(e,t,n=!1,s=!1){e=e.__v_raw;const o=ce(e),i=ce(t);n||(t!==i&&Be(o,"get",t),Be(o,"get",i));const{has:r}=Jn(o),l=s?Ys:n?Xs:dn;if(r.call(o,t))return l(e.get(t));if(r.call(o,i))return l(e.get(i));e!==o&&e.get(t)}function Pn(e,t=!1){const n=this.__v_raw,s=ce(n),o=ce(e);return t||(e!==o&&Be(s,"has",e),Be(s,"has",o)),e===o?n.has(e):n.has(e)||n.has(o)}function Cn(e,t=!1){return e=e.__v_raw,!t&&Be(ce(e),"iterate",Tt),Reflect.get(e,"size",e)}function $o(e){e=ce(e);const t=ce(this);return Jn(t).has.call(t,e)||(t.add(e),ot(t,"add",e,e)),this}function Po(e,t){t=ce(t);const n=ce(this),{has:s,get:o}=Jn(n);let i=s.call(n,e);i||(e=ce(e),i=s.call(n,e));const r=o.call(n,e);return n.set(e,t),i?un(t,r)&&ot(n,"set",e,t):ot(n,"add",e,t),this}function Co(e){const t=ce(this),{has:n,get:s}=Jn(t);let o=n.call(t,e);o||(e=ce(e),o=n.call(t,e)),s&&s.call(t,e);const i=t.delete(e);return o&&ot(t,"delete",e,void 0),i}function So(){const e=ce(this),t=e.size!==0,n=e.clear();return t&&ot(e,"clear",void 0,void 0),n}function Sn(e,t){return function(s,o){const i=this,r=i.__v_raw,l=ce(r),c=t?Ys:e?Xs:dn;return!e&&Be(l,"iterate",Tt),r.forEach((u,h)=>s.call(o,c(u),c(h),i))}}function Tn(e,t,n){return function(...s){const o=this.__v_raw,i=ce(o),r=Bt(i),l=e==="entries"||e===Symbol.iterator&&r,c=e==="keys"&&r,u=o[e](...s),h=n?Ys:t?Xs:dn;return!t&&Be(i,"iterate",c?Cs:Tt),{next(){const{value:v,done:g}=u.next();return g?{value:v,done:g}:{value:l?[h(v[0]),h(v[1])]:h(v),done:g}},[Symbol.iterator](){return this}}}}function rt(e){return function(...t){return e==="delete"?!1:this}}function ul(){const e={get(i){return $n(this,i)},get size(){return Cn(this)},has:Pn,add:$o,set:Po,delete:Co,clear:So,forEach:Sn(!1,!1)},t={get(i){return $n(this,i,!1,!0)},get size(){return Cn(this)},has:Pn,add:$o,set:Po,delete:Co,clear:So,forEach:Sn(!1,!0)},n={get(i){return $n(this,i,!0)},get size(){return Cn(this,!0)},has(i){return Pn.call(this,i,!0)},add:rt("add"),set:rt("set"),delete:rt("delete"),clear:rt("clear"),forEach:Sn(!0,!1)},s={get(i){return $n(this,i,!0,!0)},get size(){return Cn(this,!0)},has(i){return Pn.call(this,i,!0)},add:rt("add"),set:rt("set"),delete:rt("delete"),clear:rt("clear"),forEach:Sn(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(i=>{e[i]=Tn(i,!1,!1),n[i]=Tn(i,!0,!1),t[i]=Tn(i,!1,!0),s[i]=Tn(i,!0,!0)}),[e,n,t,s]}const[fl,dl,hl,_l]=ul();function Gs(e,t){const n=t?e?_l:hl:e?dl:fl;return(s,o,i)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?s:Reflect.get(oe(n,o)&&o in s?n:s,o,i)}const pl={get:Gs(!1,!1)},vl={get:Gs(!1,!0)},ml={get:Gs(!0,!1)},Vi=new WeakMap,Ei=new WeakMap,Li=new WeakMap,gl=new WeakMap;function bl(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function yl(e){return e.__v_skip||!Object.isExtensible(e)?0:bl(zr(e))}function Xn(e){return Ut(e)?e:Js(e,!1,Ti,pl,Vi)}function xl(e){return Js(e,!1,al,vl,Ei)}function Qs(e){return Js(e,!0,cl,ml,Li)}function Js(e,t,n,s,o){if(!ge(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=o.get(e);if(i)return i;const r=yl(e);if(r===0)return e;const l=new Proxy(e,r===2?s:n);return o.set(e,l),l}function Ot(e){return Ut(e)?Ot(e.__v_raw):!!(e&&e.__v_isReactive)}function Ut(e){return!!(e&&e.__v_isReadonly)}function On(e){return!!(e&&e.__v_isShallow)}function Mi(e){return Ot(e)||Ut(e)}function ce(e){const t=e&&e.__v_raw;return t?ce(t):e}function on(e){return Bn(e,"__v_skip",!0),e}const dn=e=>ge(e)?Xn(e):e,Xs=e=>ge(e)?Qs(e):e;function Ii(e){ft&&Ue&&(e=ce(e),Pi(e.dep||(e.dep=Ks())))}function Ai(e,t){e=ce(e),e.dep&&Ss(e.dep)}function Ce(e){return!!(e&&e.__v_isRef===!0)}function ue(e){return Ni(e,!1)}function wl(e){return Ni(e,!0)}function Ni(e,t){return Ce(e)?e:new kl(e,t)}class kl{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:ce(t),this._value=n?t:dn(t)}get value(){return Ii(this),this._value}set value(t){const n=this.__v_isShallow||On(t)||Ut(t);t=n?t:ce(t),un(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:dn(t),Ai(this))}}function _(e){return Ce(e)?e.value:e}const $l={get:(e,t,n)=>_(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const o=e[t];return Ce(o)&&!Ce(n)?(o.value=n,!0):Reflect.set(e,t,n,s)}};function Bi(e){return Ot(e)?e:new Proxy(e,$l)}var Oi;class Pl{constructor(t,n,s,o){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this[Oi]=!1,this._dirty=!0,this.effect=new Ws(t,()=>{this._dirty||(this._dirty=!0,Ai(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=s}get value(){const t=ce(this);return Ii(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}Oi="__v_isReadonly";function Cl(e,t,n=!1){let s,o;const i=X(e);return i?(s=e,o=Ke):(s=e.get,o=e.set),new Pl(s,o,i||!o,n)}function dt(e,t,n,s){let o;try{o=s?e(...s):e()}catch(i){bn(i,t,n)}return o}function He(e,t,n,s){if(X(e)){const i=dt(e,t,n,s);return i&&bi(i)&&i.catch(r=>{bn(r,t,n)}),i}const o=[];for(let i=0;i>>1;_n(Pe[s])Xe&&Pe.splice(t,1)}function El(e){K(e)?Ft.push(...e):(!st||!st.includes(e,e.allowRecurse?kt+1:kt))&&Ft.push(e),Hi()}function To(e,t=hn?Xe+1:0){for(;t_n(n)-_n(s)),kt=0;kte.id==null?1/0:e.id,Ll=(e,t)=>{const n=_n(e)-_n(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Di(e){Ts=!1,hn=!0,Pe.sort(Ll);const t=Ke;try{for(Xe=0;Xexe(k)?k.trim():k)),v&&(o=n.map(fn))}let l,c=s[l=hs(t)]||s[l=hs(et(t))];!c&&i&&(c=s[l=hs(Gt(t))]),c&&He(c,e,6,o);const u=s[l+"Once"];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,He(u,e,6,o)}}function Ri(e,t,n=!1){const s=t.emitsCache,o=s.get(e);if(o!==void 0)return o;const i=e.emits;let r={},l=!1;if(!X(e)){const c=u=>{const h=Ri(u,t,!0);h&&(l=!0,$e(r,h))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(ge(e)&&s.set(e,null),null):(K(i)?i.forEach(c=>r[c]=null):$e(r,i),ge(e)&&s.set(e,r),r)}function es(e,t){return!e||!gn(t)?!1:(t=t.slice(2).replace(/Once$/,""),oe(e,t[0].toLowerCase()+t.slice(1))||oe(e,Gt(t))||oe(e,t))}let ke=null,ts=null;function Hn(e){const t=ke;return ke=e,ts=e&&e.type.__scopeId||null,t}function qe(e){ts=e}function Ye(){ts=null}function B(e,t=ke,n){if(!t||e._n)return e;const s=(...o)=>{s._d&&Fo(-1);const i=Hn(t);let r;try{r=e(...o)}finally{Hn(i),s._d&&Fo(1)}return r};return s._n=!0,s._c=!0,s._d=!0,s}function _s(e){const{type:t,vnode:n,proxy:s,withProxy:o,props:i,propsOptions:[r],slots:l,attrs:c,emit:u,render:h,renderCache:v,data:g,setupState:k,ctx:M,inheritAttrs:N}=e;let Y,y;const P=Hn(e);try{if(n.shapeFlag&4){const q=o||s;Y=ze(h.call(q,q,v,i,k,g,M)),y=c}else{const q=t;Y=ze(q.length>1?q(i,{attrs:c,slots:l,emit:u}):q(i,null)),y=t.props?c:Il(c)}}catch(q){ln.length=0,bn(q,e,1),Y=T(Ne)}let A=Y;if(y&&N!==!1){const q=Object.keys(y),{shapeFlag:ee}=A;q.length&&ee&7&&(r&&q.some(Rs)&&(y=Al(y,r)),A=_t(A,y))}return n.dirs&&(A=_t(A),A.dirs=A.dirs?A.dirs.concat(n.dirs):n.dirs),n.transition&&(A.transition=n.transition),Y=A,Hn(P),Y}const Il=e=>{let t;for(const n in e)(n==="class"||n==="style"||gn(n))&&((t||(t={}))[n]=e[n]);return t},Al=(e,t)=>{const n={};for(const s in e)(!Rs(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function Nl(e,t,n){const{props:s,children:o,component:i}=e,{props:r,children:l,patchFlag:c}=t,u=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?Vo(s,r,u):!!r;if(c&8){const h=t.dynamicProps;for(let v=0;ve.__isSuspense;function zi(e,t){t&&t.pendingBranch?K(e)?t.effects.push(...e):t.effects.push(e):El(e)}function ns(e,t){if(we){let n=we.provides;const s=we.parent&&we.parent.provides;s===n&&(n=we.provides=Object.create(s)),n[e]=t}}function We(e,t,n=!1){const s=we||ke;if(s){const o=s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides;if(o&&e in o)return o[e];if(arguments.length>1)return n&&X(t)?t.call(s.proxy):t}}function jt(e,t){return ss(e,null,t)}function Ui(e,t){return ss(e,null,{flush:"post"})}const Vn={};function Ze(e,t,n){return ss(e,t,n)}function ss(e,t,{immediate:n,deep:s,flush:o,onTrack:i,onTrigger:r}=me){const l=we;let c,u=!1,h=!1;if(Ce(e)?(c=()=>e.value,u=On(e)):Ot(e)?(c=()=>e,s=!0):K(e)?(h=!0,u=e.some(A=>Ot(A)||On(A)),c=()=>e.map(A=>{if(Ce(A))return A.value;if(Ot(A))return St(A);if(X(A))return dt(A,l,2)})):X(e)?t?c=()=>dt(e,l,2):c=()=>{if(!(l&&l.isUnmounted))return v&&v(),He(e,l,3,[g])}:c=Ke,t&&s){const A=c;c=()=>St(A())}let v,g=A=>{v=y.onStop=()=>{dt(A,l,4)}},k;if(qt)if(g=Ke,t?n&&He(t,l,3,[c(),h?[]:void 0,g]):c(),o==="sync"){const A=Vc();k=A.__watcherHandles||(A.__watcherHandles=[])}else return Ke;let M=h?new Array(e.length).fill(Vn):Vn;const N=()=>{if(!!y.active)if(t){const A=y.run();(s||u||(h?A.some((q,ee)=>un(q,M[ee])):un(A,M)))&&(v&&v(),He(t,l,3,[A,M===Vn?void 0:h&&M[0]===Vn?[]:M,g]),M=A)}else y.run()};N.allowRecurse=!!t;let Y;o==="sync"?Y=N:o==="post"?Y=()=>Ee(N,l&&l.suspense):(N.pre=!0,l&&(N.id=l.uid),Y=()=>Zn(N));const y=new Ws(c,Y);t?n?N():M=y.run():o==="post"?Ee(y.run.bind(y),l&&l.suspense):y.run();const P=()=>{y.stop(),l&&l.scope&&zs(l.scope.effects,y)};return k&&k.push(P),P}function Fl(e,t,n){const s=this.proxy,o=xe(e)?e.includes(".")?ji(s,e):()=>s[e]:e.bind(s,s);let i;X(t)?i=t:(i=t.handler,n=t);const r=we;Wt(this);const l=ss(o,i.bind(s),n);return r?Wt(r):Vt(),l}function ji(e,t){const n=t.split(".");return()=>{let s=e;for(let o=0;o{St(n,t)});else if(xi(e))for(const n in e)St(e[n],t);return e}function Hl(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return De(()=>{e.isMounted=!0}),Gi(()=>{e.isUnmounting=!0}),e}const Oe=[Function,Array],Dl={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Oe,onEnter:Oe,onAfterEnter:Oe,onEnterCancelled:Oe,onBeforeLeave:Oe,onLeave:Oe,onAfterLeave:Oe,onLeaveCancelled:Oe,onBeforeAppear:Oe,onAppear:Oe,onAfterAppear:Oe,onAppearCancelled:Oe},setup(e,{slots:t}){const n=lo(),s=Hl();let o;return()=>{const i=t.default&&qi(t.default(),!0);if(!i||!i.length)return;let r=i[0];if(i.length>1){for(const N of i)if(N.type!==Ne){r=N;break}}const l=ce(e),{mode:c}=l;if(s.isLeaving)return ps(r);const u=Eo(r);if(!u)return ps(r);const h=Vs(u,l,s,n);Es(u,h);const v=n.subTree,g=v&&Eo(v);let k=!1;const{getTransitionKey:M}=u.type;if(M){const N=M();o===void 0?o=N:N!==o&&(o=N,k=!0)}if(g&&g.type!==Ne&&(!$t(u,g)||k)){const N=Vs(g,l,s,n);if(Es(g,N),c==="out-in")return s.isLeaving=!0,N.afterLeave=()=>{s.isLeaving=!1,n.update.active!==!1&&n.update()},ps(r);c==="in-out"&&u.type!==Ne&&(N.delayLeave=(Y,y,P)=>{const A=Wi(s,g);A[String(g.key)]=g,Y._leaveCb=()=>{y(),Y._leaveCb=void 0,delete h.delayedLeave},h.delayedLeave=P})}return r}}},Ki=Dl;function Wi(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Vs(e,t,n,s){const{appear:o,mode:i,persisted:r=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:u,onEnterCancelled:h,onBeforeLeave:v,onLeave:g,onAfterLeave:k,onLeaveCancelled:M,onBeforeAppear:N,onAppear:Y,onAfterAppear:y,onAppearCancelled:P}=t,A=String(e.key),q=Wi(n,e),ee=(I,Z)=>{I&&He(I,s,9,Z)},_e=(I,Z)=>{const J=Z[1];ee(I,Z),K(I)?I.every(re=>re.length<=1)&&J():I.length<=1&&J()},se={mode:i,persisted:r,beforeEnter(I){let Z=l;if(!n.isMounted)if(o)Z=N||l;else return;I._leaveCb&&I._leaveCb(!0);const J=q[A];J&&$t(e,J)&&J.el._leaveCb&&J.el._leaveCb(),ee(Z,[I])},enter(I){let Z=c,J=u,re=h;if(!n.isMounted)if(o)Z=Y||c,J=y||u,re=P||h;else return;let F=!1;const te=I._enterCb=R=>{F||(F=!0,R?ee(re,[I]):ee(J,[I]),se.delayedLeave&&se.delayedLeave(),I._enterCb=void 0)};Z?_e(Z,[I,te]):te()},leave(I,Z){const J=String(e.key);if(I._enterCb&&I._enterCb(!0),n.isUnmounting)return Z();ee(v,[I]);let re=!1;const F=I._leaveCb=te=>{re||(re=!0,Z(),te?ee(M,[I]):ee(k,[I]),I._leaveCb=void 0,q[J]===e&&delete q[J])};q[J]=e,g?_e(g,[I,F]):F()},clone(I){return Vs(I,t,n,s)}};return se}function ps(e){if(yn(e))return e=_t(e),e.children=null,e}function Eo(e){return yn(e)?e.children?e.children[0]:void 0:e}function Es(e,t){e.shapeFlag&6&&e.component?Es(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function qi(e,t=!1,n){let s=[],o=0;for(let i=0;i1)for(let i=0;i!!e.type.__asyncLoader;function Rl(e){X(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:s,delay:o=200,timeout:i,suspensible:r=!0,onError:l}=e;let c=null,u,h=0;const v=()=>(h++,c=null,g()),g=()=>{let k;return c||(k=c=t().catch(M=>{if(M=M instanceof Error?M:new Error(String(M)),l)return new Promise((N,Y)=>{l(M,()=>N(v()),()=>Y(M),h+1)});throw M}).then(M=>k!==c&&c?c:(M&&(M.__esModule||M[Symbol.toStringTag]==="Module")&&(M=M.default),u=M,M)))};return D({name:"AsyncComponentWrapper",__asyncLoader:g,get __asyncResolved(){return u},setup(){const k=we;if(u)return()=>vs(u,k);const M=P=>{c=null,bn(P,k,13,!s)};if(r&&k.suspense||qt)return g().then(P=>()=>vs(P,k)).catch(P=>(M(P),()=>s?T(s,{error:P}):null));const N=ue(!1),Y=ue(),y=ue(!!o);return o&&setTimeout(()=>{y.value=!1},o),i!=null&&setTimeout(()=>{if(!N.value&&!Y.value){const P=new Error(`Async component timed out after ${i}ms.`);M(P),Y.value=P}},i),g().then(()=>{N.value=!0,k.parent&&yn(k.parent.vnode)&&Zn(k.parent.update)}).catch(P=>{M(P),Y.value=P}),()=>{if(N.value&&u)return vs(u,k);if(Y.value&&s)return T(s,{error:Y.value});if(n&&!y.value)return T(n)}}})}function vs(e,t){const{ref:n,props:s,children:o,ce:i}=t.vnode,r=T(e,s,o);return r.ref=n,r.ce=i,delete t.vnode.ce,r}const yn=e=>e.type.__isKeepAlive;function zl(e,t){Yi(e,"a",t)}function Ul(e,t){Yi(e,"da",t)}function Yi(e,t,n=we){const s=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(os(t,s,n),n){let o=n.parent;for(;o&&o.parent;)yn(o.parent.vnode)&&jl(s,t,n,o),o=o.parent}}function jl(e,t,n,s){const o=os(t,e,s,!0);pt(()=>{zs(s[t],o)},n)}function os(e,t,n=we,s=!1){if(n){const o=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...r)=>{if(n.isUnmounted)return;Qt(),Wt(n);const l=He(t,n,e,r);return Vt(),Jt(),l});return s?o.unshift(i):o.push(i),i}}const it=e=>(t,n=we)=>(!qt||e==="sp")&&os(e,(...s)=>t(...s),n),Kl=it("bm"),De=it("m"),Wl=it("bu"),to=it("u"),Gi=it("bum"),pt=it("um"),ql=it("sp"),Yl=it("rtg"),Gl=it("rtc");function Ql(e,t=we){os("ec",e,t)}function w_(e,t){const n=ke;if(n===null)return e;const s=rs(n)||n.proxy,o=e.dirs||(e.dirs=[]);for(let i=0;it(r,l,void 0,i&&i[l]));else{const r=Object.keys(e);o=new Array(r.length);for(let l=0,c=r.length;lzn(t)?!(t.type===Ne||t.type===G&&!Xi(t.children)):!0)?e:null}const Ls=e=>e?ar(e)?rs(e)||e.proxy:Ls(e.parent):null,rn=$e(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Ls(e.parent),$root:e=>Ls(e.root),$emit:e=>e.emit,$options:e=>oo(e),$forceUpdate:e=>e.f||(e.f=()=>Zn(e.update)),$nextTick:e=>e.n||(e.n=eo.bind(e.proxy)),$watch:e=>Fl.bind(e)}),ms=(e,t)=>e!==me&&!e.__isScriptSetup&&oe(e,t),Jl={get({_:e},t){const{ctx:n,setupState:s,data:o,props:i,accessCache:r,type:l,appContext:c}=e;let u;if(t[0]!=="$"){const k=r[t];if(k!==void 0)switch(k){case 1:return s[t];case 2:return o[t];case 4:return n[t];case 3:return i[t]}else{if(ms(s,t))return r[t]=1,s[t];if(o!==me&&oe(o,t))return r[t]=2,o[t];if((u=e.propsOptions[0])&&oe(u,t))return r[t]=3,i[t];if(n!==me&&oe(n,t))return r[t]=4,n[t];Ms&&(r[t]=0)}}const h=rn[t];let v,g;if(h)return t==="$attrs"&&Be(e,"get",t),h(e);if((v=l.__cssModules)&&(v=v[t]))return v;if(n!==me&&oe(n,t))return r[t]=4,n[t];if(g=c.config.globalProperties,oe(g,t))return g[t]},set({_:e},t,n){const{data:s,setupState:o,ctx:i}=e;return ms(o,t)?(o[t]=n,!0):s!==me&&oe(s,t)?(s[t]=n,!0):oe(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:o,propsOptions:i}},r){let l;return!!n[r]||e!==me&&oe(e,r)||ms(t,r)||(l=i[0])&&oe(l,r)||oe(s,r)||oe(rn,r)||oe(o.config.globalProperties,r)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:oe(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let Ms=!0;function Xl(e){const t=oo(e),n=e.proxy,s=e.ctx;Ms=!1,t.beforeCreate&&Mo(t.beforeCreate,e,"bc");const{data:o,computed:i,methods:r,watch:l,provide:c,inject:u,created:h,beforeMount:v,mounted:g,beforeUpdate:k,updated:M,activated:N,deactivated:Y,beforeDestroy:y,beforeUnmount:P,destroyed:A,unmounted:q,render:ee,renderTracked:_e,renderTriggered:se,errorCaptured:I,serverPrefetch:Z,expose:J,inheritAttrs:re,components:F,directives:te,filters:R}=t;if(u&&Zl(u,s,null,e.appContext.config.unwrapInjectedRef),r)for(const be in r){const pe=r[be];X(pe)&&(s[be]=pe.bind(n))}if(o){const be=o.call(n,n);ge(be)&&(e.data=Xn(be))}if(Ms=!0,i)for(const be in i){const pe=i[be],mt=X(pe)?pe.bind(n,n):X(pe.get)?pe.get.bind(n,n):Ke,wn=!X(pe)&&X(pe.set)?pe.set.bind(n):Ke,gt=ie({get:mt,set:wn});Object.defineProperty(s,be,{enumerable:!0,configurable:!0,get:()=>gt.value,set:Ge=>gt.value=Ge})}if(l)for(const be in l)Zi(l[be],s,n,be);if(c){const be=X(c)?c.call(n):c;Reflect.ownKeys(be).forEach(pe=>{ns(pe,be[pe])})}h&&Mo(h,e,"c");function fe(be,pe){K(pe)?pe.forEach(mt=>be(mt.bind(n))):pe&&be(pe.bind(n))}if(fe(Kl,v),fe(De,g),fe(Wl,k),fe(to,M),fe(zl,N),fe(Ul,Y),fe(Ql,I),fe(Gl,_e),fe(Yl,se),fe(Gi,P),fe(pt,q),fe(ql,Z),K(J))if(J.length){const be=e.exposed||(e.exposed={});J.forEach(pe=>{Object.defineProperty(be,pe,{get:()=>n[pe],set:mt=>n[pe]=mt})})}else e.exposed||(e.exposed={});ee&&e.render===Ke&&(e.render=ee),re!=null&&(e.inheritAttrs=re),F&&(e.components=F),te&&(e.directives=te)}function Zl(e,t,n=Ke,s=!1){K(e)&&(e=Is(e));for(const o in e){const i=e[o];let r;ge(i)?"default"in i?r=We(i.from||o,i.default,!0):r=We(i.from||o):r=We(i),Ce(r)&&s?Object.defineProperty(t,o,{enumerable:!0,configurable:!0,get:()=>r.value,set:l=>r.value=l}):t[o]=r}}function Mo(e,t,n){He(K(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Zi(e,t,n,s){const o=s.includes(".")?ji(n,s):()=>n[s];if(xe(e)){const i=t[e];X(i)&&Ze(o,i)}else if(X(e))Ze(o,e.bind(n));else if(ge(e))if(K(e))e.forEach(i=>Zi(i,t,n,s));else{const i=X(e.handler)?e.handler.bind(n):t[e.handler];X(i)&&Ze(o,i,e)}}function oo(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:o,optionsCache:i,config:{optionMergeStrategies:r}}=e.appContext,l=i.get(t);let c;return l?c=l:!o.length&&!n&&!s?c=t:(c={},o.length&&o.forEach(u=>Dn(c,u,r,!0)),Dn(c,t,r)),ge(t)&&i.set(t,c),c}function Dn(e,t,n,s=!1){const{mixins:o,extends:i}=t;i&&Dn(e,i,n,!0),o&&o.forEach(r=>Dn(e,r,n,!0));for(const r in t)if(!(s&&r==="expose")){const l=ec[r]||n&&n[r];e[r]=l?l(e[r],t[r]):t[r]}return e}const ec={data:Io,props:wt,emits:wt,methods:wt,computed:wt,beforeCreate:Te,created:Te,beforeMount:Te,mounted:Te,beforeUpdate:Te,updated:Te,beforeDestroy:Te,beforeUnmount:Te,destroyed:Te,unmounted:Te,activated:Te,deactivated:Te,errorCaptured:Te,serverPrefetch:Te,components:wt,directives:wt,watch:nc,provide:Io,inject:tc};function Io(e,t){return t?e?function(){return $e(X(e)?e.call(this,this):e,X(t)?t.call(this,this):t)}:t:e}function tc(e,t){return wt(Is(e),Is(t))}function Is(e){if(K(e)){const t={};for(let n=0;n0)&&!(r&16)){if(r&8){const h=e.vnode.dynamicProps;for(let v=0;v{c=!0;const[g,k]=tr(v,t,!0);$e(r,g),k&&l.push(...k)};!n&&t.mixins.length&&t.mixins.forEach(h),e.extends&&h(e.extends),e.mixins&&e.mixins.forEach(h)}if(!i&&!c)return ge(e)&&s.set(e,Nt),Nt;if(K(i))for(let h=0;h-1,k[1]=N<0||M-1||oe(k,"default"))&&l.push(v)}}}const u=[r,l];return ge(e)&&s.set(e,u),u}function Ao(e){return e[0]!=="$"}function No(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:e===null?"null":""}function Bo(e,t){return No(e)===No(t)}function Oo(e,t){return K(t)?t.findIndex(n=>Bo(n,e)):X(t)&&Bo(t,e)?0:-1}const nr=e=>e[0]==="_"||e==="$stable",io=e=>K(e)?e.map(ze):[ze(e)],ic=(e,t,n)=>{if(t._n)return t;const s=B((...o)=>io(t(...o)),n);return s._c=!1,s},sr=(e,t,n)=>{const s=e._ctx;for(const o in e){if(nr(o))continue;const i=e[o];if(X(i))t[o]=ic(o,i,s);else if(i!=null){const r=io(i);t[o]=()=>r}}},or=(e,t)=>{const n=io(t);e.slots.default=()=>n},rc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=ce(t),Bn(t,"_",n)):sr(t,e.slots={})}else e.slots={},t&&or(e,t);Bn(e.slots,is,1)},lc=(e,t,n)=>{const{vnode:s,slots:o}=e;let i=!0,r=me;if(s.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:($e(o,t),!n&&l===1&&delete o._):(i=!t.$stable,sr(t,o)),r=t}else t&&(or(e,t),r={default:1});if(i)for(const l in o)!nr(l)&&!(l in r)&&delete o[l]};function ir(){return{app:null,config:{isNativeTag:Hr,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let cc=0;function ac(e,t){return function(s,o=null){X(s)||(s=Object.assign({},s)),o!=null&&!ge(o)&&(o=null);const i=ir(),r=new Set;let l=!1;const c=i.app={_uid:cc++,_component:s,_props:o,_container:null,_context:i,_instance:null,version:Ec,get config(){return i.config},set config(u){},use(u,...h){return r.has(u)||(u&&X(u.install)?(r.add(u),u.install(c,...h)):X(u)&&(r.add(u),u(c,...h))),c},mixin(u){return i.mixins.includes(u)||i.mixins.push(u),c},component(u,h){return h?(i.components[u]=h,c):i.components[u]},directive(u,h){return h?(i.directives[u]=h,c):i.directives[u]},mount(u,h,v){if(!l){const g=T(s,o);return g.appContext=i,h&&t?t(g,u):e(g,u,v),l=!0,c._container=u,u.__vue_app__=c,rs(g.component)||g.component.proxy}},unmount(){l&&(e(null,c._container),delete c._container.__vue_app__)},provide(u,h){return i.provides[u]=h,c}};return c}}function Rn(e,t,n,s,o=!1){if(K(e)){e.forEach((g,k)=>Rn(g,t&&(K(t)?t[k]:t),n,s,o));return}if(Ht(s)&&!o)return;const i=s.shapeFlag&4?rs(s.component)||s.component.proxy:s.el,r=o?null:i,{i:l,r:c}=e,u=t&&t.r,h=l.refs===me?l.refs={}:l.refs,v=l.setupState;if(u!=null&&u!==c&&(xe(u)?(h[u]=null,oe(v,u)&&(v[u]=null)):Ce(u)&&(u.value=null)),X(c))dt(c,l,12,[r,h]);else{const g=xe(c),k=Ce(c);if(g||k){const M=()=>{if(e.f){const N=g?oe(v,c)?v[c]:h[c]:c.value;o?K(N)&&zs(N,i):K(N)?N.includes(i)||N.push(i):g?(h[c]=[i],oe(v,c)&&(v[c]=h[c])):(c.value=[i],e.k&&(h[e.k]=c.value))}else g?(h[c]=r,oe(v,c)&&(v[c]=r)):k&&(c.value=r,e.k&&(h[e.k]=r))};r?(M.id=-1,Ee(M,n)):M()}}}let lt=!1;const En=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",Ln=e=>e.nodeType===8;function uc(e){const{mt:t,p:n,o:{patchProp:s,createText:o,nextSibling:i,parentNode:r,remove:l,insert:c,createComment:u}}=e,h=(y,P)=>{if(!P.hasChildNodes()){n(null,y,P),Fn(),P._vnode=y;return}lt=!1,v(P.firstChild,y,null,null,null),Fn(),P._vnode=y,lt&&console.error("Hydration completed but contains mismatches.")},v=(y,P,A,q,ee,_e=!1)=>{const se=Ln(y)&&y.data==="[",I=()=>N(y,P,A,q,ee,se),{type:Z,ref:J,shapeFlag:re,patchFlag:F}=P;let te=y.nodeType;P.el=y,F===-2&&(_e=!1,P.dynamicChildren=null);let R=null;switch(Z){case Kt:te!==3?P.children===""?(c(P.el=o(""),r(y),y),R=y):R=I():(y.data!==P.children&&(lt=!0,y.data=P.children),R=i(y));break;case Ne:te!==8||se?R=I():R=i(y);break;case Dt:if(se&&(y=i(y),te=y.nodeType),te===1||te===3){R=y;const Me=!P.children.length;for(let fe=0;fe{_e=_e||!!P.dynamicChildren;const{type:se,props:I,patchFlag:Z,shapeFlag:J,dirs:re}=P,F=se==="input"&&re||se==="option";if(F||Z!==-1){if(re&&Je(P,null,A,"created"),I)if(F||!_e||Z&48)for(const R in I)(F&&R.endsWith("value")||gn(R)&&!sn(R))&&s(y,R,null,I[R],!1,void 0,A);else I.onClick&&s(y,"onClick",null,I.onClick,!1,void 0,A);let te;if((te=I&&I.onVnodeBeforeMount)&&Fe(te,A,P),re&&Je(P,null,A,"beforeMount"),((te=I&&I.onVnodeMounted)||re)&&zi(()=>{te&&Fe(te,A,P),re&&Je(P,null,A,"mounted")},q),J&16&&!(I&&(I.innerHTML||I.textContent))){let R=k(y.firstChild,P,y,A,q,ee,_e);for(;R;){lt=!0;const Me=R;R=R.nextSibling,l(Me)}}else J&8&&y.textContent!==P.children&&(lt=!0,y.textContent=P.children)}return y.nextSibling},k=(y,P,A,q,ee,_e,se)=>{se=se||!!P.dynamicChildren;const I=P.children,Z=I.length;for(let J=0;J{const{slotScopeIds:se}=P;se&&(ee=ee?ee.concat(se):se);const I=r(y),Z=k(i(y),P,I,A,q,ee,_e);return Z&&Ln(Z)&&Z.data==="]"?i(P.anchor=Z):(lt=!0,c(P.anchor=u("]"),I,Z),Z)},N=(y,P,A,q,ee,_e)=>{if(lt=!0,P.el=null,_e){const Z=Y(y);for(;;){const J=i(y);if(J&&J!==Z)l(J);else break}}const se=i(y),I=r(y);return l(y),n(null,P,I,se,A,q,En(I),ee),se},Y=y=>{let P=0;for(;y;)if(y=i(y),y&&Ln(y)&&(y.data==="["&&P++,y.data==="]")){if(P===0)return i(y);P--}return y};return[h,v]}const Ee=zi;function fc(e){return dc(e,uc)}function dc(e,t){const n=Kr();n.__VUE__=!0;const{insert:s,remove:o,patchProp:i,createElement:r,createText:l,createComment:c,setText:u,setElementText:h,parentNode:v,nextSibling:g,setScopeId:k=Ke,insertStaticContent:M}=e,N=(a,f,p,w=null,x=null,S=null,L=!1,C=null,V=!!f.dynamicChildren)=>{if(a===f)return;a&&!$t(a,f)&&(w=kn(a),Ge(a,x,S,!0),a=null),f.patchFlag===-2&&(V=!1,f.dynamicChildren=null);const{type:$,ref:z,shapeFlag:H}=f;switch($){case Kt:Y(a,f,p,w);break;case Ne:y(a,f,p,w);break;case Dt:a==null&&P(f,p,w,L);break;case G:F(a,f,p,w,x,S,L,C,V);break;default:H&1?ee(a,f,p,w,x,S,L,C,V):H&6?te(a,f,p,w,x,S,L,C,V):(H&64||H&128)&&$.process(a,f,p,w,x,S,L,C,V,Mt)}z!=null&&x&&Rn(z,a&&a.ref,S,f||a,!f)},Y=(a,f,p,w)=>{if(a==null)s(f.el=l(f.children),p,w);else{const x=f.el=a.el;f.children!==a.children&&u(x,f.children)}},y=(a,f,p,w)=>{a==null?s(f.el=c(f.children||""),p,w):f.el=a.el},P=(a,f,p,w)=>{[a.el,a.anchor]=M(a.children,f,p,w,a.el,a.anchor)},A=({el:a,anchor:f},p,w)=>{let x;for(;a&&a!==f;)x=g(a),s(a,p,w),a=x;s(f,p,w)},q=({el:a,anchor:f})=>{let p;for(;a&&a!==f;)p=g(a),o(a),a=p;o(f)},ee=(a,f,p,w,x,S,L,C,V)=>{L=L||f.type==="svg",a==null?_e(f,p,w,x,S,L,C,V):Z(a,f,x,S,L,C,V)},_e=(a,f,p,w,x,S,L,C)=>{let V,$;const{type:z,props:H,shapeFlag:U,transition:W,dirs:ne}=a;if(V=a.el=r(a.type,S,H&&H.is,H),U&8?h(V,a.children):U&16&&I(a.children,V,null,w,x,S&&z!=="foreignObject",L,C),ne&&Je(a,null,w,"created"),H){for(const de in H)de!=="value"&&!sn(de)&&i(V,de,null,H[de],S,a.children,w,x,nt);"value"in H&&i(V,"value",null,H.value),($=H.onVnodeBeforeMount)&&Fe($,w,a)}se(V,a,a.scopeId,L,w),ne&&Je(a,null,w,"beforeMount");const ve=(!x||x&&!x.pendingBranch)&&W&&!W.persisted;ve&&W.beforeEnter(V),s(V,f,p),(($=H&&H.onVnodeMounted)||ve||ne)&&Ee(()=>{$&&Fe($,w,a),ve&&W.enter(V),ne&&Je(a,null,w,"mounted")},x)},se=(a,f,p,w,x)=>{if(p&&k(a,p),w)for(let S=0;S{for(let $=V;${const C=f.el=a.el;let{patchFlag:V,dynamicChildren:$,dirs:z}=f;V|=a.patchFlag&16;const H=a.props||me,U=f.props||me;let W;p&&bt(p,!1),(W=U.onVnodeBeforeUpdate)&&Fe(W,p,f,a),z&&Je(f,a,p,"beforeUpdate"),p&&bt(p,!0);const ne=x&&f.type!=="foreignObject";if($?J(a.dynamicChildren,$,C,p,w,ne,S):L||pe(a,f,C,null,p,w,ne,S,!1),V>0){if(V&16)re(C,f,H,U,p,w,x);else if(V&2&&H.class!==U.class&&i(C,"class",null,U.class,x),V&4&&i(C,"style",H.style,U.style,x),V&8){const ve=f.dynamicProps;for(let de=0;de{W&&Fe(W,p,f,a),z&&Je(f,a,p,"updated")},w)},J=(a,f,p,w,x,S,L)=>{for(let C=0;C{if(p!==w){if(p!==me)for(const C in p)!sn(C)&&!(C in w)&&i(a,C,p[C],null,L,f.children,x,S,nt);for(const C in w){if(sn(C))continue;const V=w[C],$=p[C];V!==$&&C!=="value"&&i(a,C,$,V,L,f.children,x,S,nt)}"value"in w&&i(a,"value",p.value,w.value)}},F=(a,f,p,w,x,S,L,C,V)=>{const $=f.el=a?a.el:l(""),z=f.anchor=a?a.anchor:l("");let{patchFlag:H,dynamicChildren:U,slotScopeIds:W}=f;W&&(C=C?C.concat(W):W),a==null?(s($,p,w),s(z,p,w),I(f.children,p,z,x,S,L,C,V)):H>0&&H&64&&U&&a.dynamicChildren?(J(a.dynamicChildren,U,p,x,S,L,C),(f.key!=null||x&&f===x.subTree)&&rr(a,f,!0)):pe(a,f,p,z,x,S,L,C,V)},te=(a,f,p,w,x,S,L,C,V)=>{f.slotScopeIds=C,a==null?f.shapeFlag&512?x.ctx.activate(f,p,w,L,V):R(f,p,w,x,S,L,V):Me(a,f,V)},R=(a,f,p,w,x,S,L)=>{const C=a.component=xc(a,w,x);if(yn(a)&&(C.ctx.renderer=Mt),wc(C),C.asyncDep){if(x&&x.registerDep(C,fe),!a.el){const V=C.subTree=T(Ne);y(null,V,f,p)}return}fe(C,a,f,p,x,S,L)},Me=(a,f,p)=>{const w=f.component=a.component;if(Nl(a,f,p))if(w.asyncDep&&!w.asyncResolved){be(w,f,p);return}else w.next=f,Vl(w.update),w.update();else f.el=a.el,w.vnode=f},fe=(a,f,p,w,x,S,L)=>{const C=()=>{if(a.isMounted){let{next:z,bu:H,u:U,parent:W,vnode:ne}=a,ve=z,de;bt(a,!1),z?(z.el=ne.el,be(a,z,L)):z=ne,H&&In(H),(de=z.props&&z.props.onVnodeBeforeUpdate)&&Fe(de,W,z,ne),bt(a,!0);const ye=_s(a),Re=a.subTree;a.subTree=ye,N(Re,ye,v(Re.el),kn(Re),a,x,S),z.el=ye.el,ve===null&&Bl(a,ye.el),U&&Ee(U,x),(de=z.props&&z.props.onVnodeUpdated)&&Ee(()=>Fe(de,W,z,ne),x)}else{let z;const{el:H,props:U}=f,{bm:W,m:ne,parent:ve}=a,de=Ht(f);if(bt(a,!1),W&&In(W),!de&&(z=U&&U.onVnodeBeforeMount)&&Fe(z,ve,f),bt(a,!0),H&&ds){const ye=()=>{a.subTree=_s(a),ds(H,a.subTree,a,x,null)};de?f.type.__asyncLoader().then(()=>!a.isUnmounted&&ye()):ye()}else{const ye=a.subTree=_s(a);N(null,ye,p,w,a,x,S),f.el=ye.el}if(ne&&Ee(ne,x),!de&&(z=U&&U.onVnodeMounted)){const ye=f;Ee(()=>Fe(z,ve,ye),x)}(f.shapeFlag&256||ve&&Ht(ve.vnode)&&ve.vnode.shapeFlag&256)&&a.a&&Ee(a.a,x),a.isMounted=!0,f=p=w=null}},V=a.effect=new Ws(C,()=>Zn($),a.scope),$=a.update=()=>V.run();$.id=a.uid,bt(a,!0),$()},be=(a,f,p)=>{f.component=a;const w=a.vnode.props;a.vnode=f,a.next=null,oc(a,f.props,w,p),lc(a,f.children,p),Qt(),To(),Jt()},pe=(a,f,p,w,x,S,L,C,V=!1)=>{const $=a&&a.children,z=a?a.shapeFlag:0,H=f.children,{patchFlag:U,shapeFlag:W}=f;if(U>0){if(U&128){wn($,H,p,w,x,S,L,C,V);return}else if(U&256){mt($,H,p,w,x,S,L,C,V);return}}W&8?(z&16&&nt($,x,S),H!==$&&h(p,H)):z&16?W&16?wn($,H,p,w,x,S,L,C,V):nt($,x,S,!0):(z&8&&h(p,""),W&16&&I(H,p,w,x,S,L,C,V))},mt=(a,f,p,w,x,S,L,C,V)=>{a=a||Nt,f=f||Nt;const $=a.length,z=f.length,H=Math.min($,z);let U;for(U=0;Uz?nt(a,x,S,!0,!1,H):I(f,p,w,x,S,L,C,V,H)},wn=(a,f,p,w,x,S,L,C,V)=>{let $=0;const z=f.length;let H=a.length-1,U=z-1;for(;$<=H&&$<=U;){const W=a[$],ne=f[$]=V?ut(f[$]):ze(f[$]);if($t(W,ne))N(W,ne,p,null,x,S,L,C,V);else break;$++}for(;$<=H&&$<=U;){const W=a[H],ne=f[U]=V?ut(f[U]):ze(f[U]);if($t(W,ne))N(W,ne,p,null,x,S,L,C,V);else break;H--,U--}if($>H){if($<=U){const W=U+1,ne=WU)for(;$<=H;)Ge(a[$],x,S,!0),$++;else{const W=$,ne=$,ve=new Map;for($=ne;$<=U;$++){const Ie=f[$]=V?ut(f[$]):ze(f[$]);Ie.key!=null&&ve.set(Ie.key,$)}let de,ye=0;const Re=U-ne+1;let It=!1,mo=0;const Zt=new Array(Re);for($=0;$=Re){Ge(Ie,x,S,!0);continue}let Qe;if(Ie.key!=null)Qe=ve.get(Ie.key);else for(de=ne;de<=U;de++)if(Zt[de-ne]===0&&$t(Ie,f[de])){Qe=de;break}Qe===void 0?Ge(Ie,x,S,!0):(Zt[Qe-ne]=$+1,Qe>=mo?mo=Qe:It=!0,N(Ie,f[Qe],p,null,x,S,L,C,V),ye++)}const go=It?hc(Zt):Nt;for(de=go.length-1,$=Re-1;$>=0;$--){const Ie=ne+$,Qe=f[Ie],bo=Ie+1{const{el:S,type:L,transition:C,children:V,shapeFlag:$}=a;if($&6){gt(a.component.subTree,f,p,w);return}if($&128){a.suspense.move(f,p,w);return}if($&64){L.move(a,f,p,Mt);return}if(L===G){s(S,f,p);for(let H=0;HC.enter(S),x);else{const{leave:H,delayLeave:U,afterLeave:W}=C,ne=()=>s(S,f,p),ve=()=>{H(S,()=>{ne(),W&&W()})};U?U(S,ne,ve):ve()}else s(S,f,p)},Ge=(a,f,p,w=!1,x=!1)=>{const{type:S,props:L,ref:C,children:V,dynamicChildren:$,shapeFlag:z,patchFlag:H,dirs:U}=a;if(C!=null&&Rn(C,null,p,a,!0),z&256){f.ctx.deactivate(a);return}const W=z&1&&U,ne=!Ht(a);let ve;if(ne&&(ve=L&&L.onVnodeBeforeUnmount)&&Fe(ve,f,a),z&6)Mr(a.component,p,w);else{if(z&128){a.suspense.unmount(p,w);return}W&&Je(a,null,f,"beforeUnmount"),z&64?a.type.remove(a,f,p,x,Mt,w):$&&(S!==G||H>0&&H&64)?nt($,f,p,!1,!0):(S===G&&H&384||!x&&z&16)&&nt(V,f,p),w&&po(a)}(ne&&(ve=L&&L.onVnodeUnmounted)||W)&&Ee(()=>{ve&&Fe(ve,f,a),W&&Je(a,null,f,"unmounted")},p)},po=a=>{const{type:f,el:p,anchor:w,transition:x}=a;if(f===G){Lr(p,w);return}if(f===Dt){q(a);return}const S=()=>{o(p),x&&!x.persisted&&x.afterLeave&&x.afterLeave()};if(a.shapeFlag&1&&x&&!x.persisted){const{leave:L,delayLeave:C}=x,V=()=>L(p,S);C?C(a.el,S,V):V()}else S()},Lr=(a,f)=>{let p;for(;a!==f;)p=g(a),o(a),a=p;o(f)},Mr=(a,f,p)=>{const{bum:w,scope:x,update:S,subTree:L,um:C}=a;w&&In(w),x.stop(),S&&(S.active=!1,Ge(L,a,f,p)),C&&Ee(C,f),Ee(()=>{a.isUnmounted=!0},f),f&&f.pendingBranch&&!f.isUnmounted&&a.asyncDep&&!a.asyncResolved&&a.suspenseId===f.pendingId&&(f.deps--,f.deps===0&&f.resolve())},nt=(a,f,p,w=!1,x=!1,S=0)=>{for(let L=S;La.shapeFlag&6?kn(a.component.subTree):a.shapeFlag&128?a.suspense.next():g(a.anchor||a.el),vo=(a,f,p)=>{a==null?f._vnode&&Ge(f._vnode,null,null,!0):N(f._vnode||null,a,f,null,null,null,p),To(),Fn(),f._vnode=a},Mt={p:N,um:Ge,m:gt,r:po,mt:R,mc:I,pc:pe,pbc:J,n:kn,o:e};let fs,ds;return t&&([fs,ds]=t(Mt)),{render:vo,hydrate:fs,createApp:ac(vo,fs)}}function bt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function rr(e,t,n=!1){const s=e.children,o=t.children;if(K(s)&&K(o))for(let i=0;i>1,e[n[l]]0&&(t[s]=n[i-1]),n[i]=s)}}for(i=n.length,r=n[i-1];i-- >0;)n[i]=r,r=t[r];return n}const _c=e=>e.__isTeleport,G=Symbol(void 0),Kt=Symbol(void 0),Ne=Symbol(void 0),Dt=Symbol(void 0),ln=[];let je=null;function d(e=!1){ln.push(je=e?null:[])}function pc(){ln.pop(),je=ln[ln.length-1]||null}let pn=1;function Fo(e){pn+=e}function lr(e){return e.dynamicChildren=pn>0?je||Nt:null,pc(),pn>0&&je&&je.push(e),e}function m(e,t,n,s,o,i){return lr(b(e,t,n,s,o,i,!0))}function Q(e,t,n,s,o){return lr(T(e,t,n,s,o,!0))}function zn(e){return e?e.__v_isVNode===!0:!1}function $t(e,t){return e.type===t.type&&e.key===t.key}const is="__vInternal",cr=({key:e})=>e!=null?e:null,An=({ref:e,ref_key:t,ref_for:n})=>e!=null?xe(e)||Ce(e)||X(e)?{i:ke,r:e,k:t,f:!!n}:e:null;function b(e,t=null,n=null,s=0,o=null,i=e===G?0:1,r=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&cr(t),ref:t&&An(t),scopeId:ts,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:s,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:ke};return l?(ro(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=xe(n)?8:16),pn>0&&!r&&je&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&je.push(c),c}const T=vc;function vc(e,t=null,n=null,s=0,o=null,i=!1){if((!e||e===Qi)&&(e=Ne),zn(e)){const l=_t(e,t,!0);return n&&ro(l,n),pn>0&&!i&&je&&(l.shapeFlag&6?je[je.indexOf(e)]=l:je.push(l)),l.patchFlag|=-2,l}if(Sc(e)&&(e=e.__vccOpts),t){t=mc(t);let{class:l,style:c}=t;l&&!xe(l)&&(t.class=he(l)),ge(c)&&(Mi(c)&&!K(c)&&(c=$e({},c)),t.style=mn(c))}const r=xe(e)?1:Ol(e)?128:_c(e)?64:ge(e)?4:X(e)?2:0;return b(e,t,n,s,o,r,i,!0)}function mc(e){return e?Mi(e)||is in e?$e({},e):e:null}function _t(e,t,n=!1){const{props:s,ref:o,patchFlag:i,children:r}=e,l=t?Nn(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&cr(l),ref:t&&t.ref?n&&o?K(o)?o.concat(An(t)):[o,An(t)]:An(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:r,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==G?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&_t(e.ssContent),ssFallback:e.ssFallback&&_t(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx}}function Ve(e=" ",t=0){return T(Kt,null,e,t)}function gc(e,t){const n=T(Dt,null,e);return n.staticCount=t,n}function j(e="",t=!1){return t?(d(),Q(Ne,null,e)):T(Ne,null,e)}function ze(e){return e==null||typeof e=="boolean"?T(Ne):K(e)?T(G,null,e.slice()):typeof e=="object"?ut(e):T(Kt,null,String(e))}function ut(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:_t(e)}function ro(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(K(t))n=16;else if(typeof t=="object")if(s&65){const o=t.default;o&&(o._c&&(o._d=!1),ro(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!(is in t)?t._ctx=ke:o===3&&ke&&(ke.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else X(t)?(t={default:t,_ctx:ke},n=32):(t=String(t),s&64?(n=16,t=[Ve(t)]):n=8);e.children=t,e.shapeFlag|=n}function Nn(...e){const t={};for(let n=0;nwe||ke,Wt=e=>{we=e,e.scope.on()},Vt=()=>{we&&we.scope.off(),we=null};function ar(e){return e.vnode.shapeFlag&4}let qt=!1;function wc(e,t=!1){qt=t;const{props:n,children:s}=e.vnode,o=ar(e);sc(e,n,o,t),rc(e,s);const i=o?kc(e,t):void 0;return qt=!1,i}function kc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=on(new Proxy(e.ctx,Jl));const{setup:s}=n;if(s){const o=e.setupContext=s.length>1?Pc(e):null;Wt(e),Qt();const i=dt(s,e,0,[e.props,o]);if(Jt(),Vt(),bi(i)){if(i.then(Vt,Vt),t)return i.then(r=>{Ho(e,r,t)}).catch(r=>{bn(r,e,0)});e.asyncDep=i}else Ho(e,i,t)}else ur(e,t)}function Ho(e,t,n){X(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:ge(t)&&(e.setupState=Bi(t)),ur(e,n)}let Do;function ur(e,t,n){const s=e.type;if(!e.render){if(!t&&Do&&!s.render){const o=s.template||oo(e).template;if(o){const{isCustomElement:i,compilerOptions:r}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,u=$e($e({isCustomElement:i,delimiters:l},r),c);s.render=Do(o,u)}}e.render=s.render||Ke}Wt(e),Qt(),Xl(e),Jt(),Vt()}function $c(e){return new Proxy(e.attrs,{get(t,n){return Be(e,"get","$attrs"),t[n]}})}function Pc(e){const t=s=>{e.exposed=s||{}};let n;return{get attrs(){return n||(n=$c(e))},slots:e.slots,emit:e.emit,expose:t}}function rs(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Bi(on(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in rn)return rn[n](e)},has(t,n){return n in t||n in rn}}))}function Cc(e,t=!0){return X(e)?e.displayName||e.name:e.name||t&&e.__name}function Sc(e){return X(e)&&"__vccOpts"in e}const ie=(e,t)=>Cl(e,t,qt);function Un(e,t,n){const s=arguments.length;return s===2?ge(t)&&!K(t)?zn(t)?T(e,null,[t]):T(e,t):T(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&zn(n)&&(n=[n]),T(e,t,n))}const Tc=Symbol(""),Vc=()=>We(Tc),Ec="3.2.45",Lc="http://www.w3.org/2000/svg",Pt=typeof document<"u"?document:null,Ro=Pt&&Pt.createElement("template"),Mc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const o=t?Pt.createElementNS(Lc,e):Pt.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&o.setAttribute("multiple",s.multiple),o},createText:e=>Pt.createTextNode(e),createComment:e=>Pt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Pt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,o,i){const r=n?n.previousSibling:t.lastChild;if(o&&(o===i||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===i||!(o=o.nextSibling)););else{Ro.innerHTML=s?`${e}`:e;const l=Ro.content;if(s){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[r?r.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Ic(e,t,n){const s=e._vtc;s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Ac(e,t,n){const s=e.style,o=xe(n);if(n&&!o){for(const i in n)Ns(s,i,n[i]);if(t&&!xe(t))for(const i in t)n[i]==null&&Ns(s,i,"")}else{const i=s.display;o?t!==n&&(s.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(s.display=i)}}const zo=/\s*!important$/;function Ns(e,t,n){if(K(n))n.forEach(s=>Ns(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=Nc(e,t);zo.test(n)?e.setProperty(Gt(s),n.replace(zo,""),"important"):e[s]=n}}const Uo=["Webkit","Moz","ms"],gs={};function Nc(e,t){const n=gs[t];if(n)return n;let s=et(t);if(s!=="filter"&&s in e)return gs[t]=s;s=Qn(s);for(let o=0;obs||(Rc.then(()=>bs=0),bs=Date.now());function Uc(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;He(jc(s,n.value),t,5,[s])};return n.value=e,n.attached=zc(),n}function jc(e,t){if(K(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>o=>!o._stopped&&s&&s(o))}else return t}const Wo=/^on[a-z]/,Kc=(e,t,n,s,o=!1,i,r,l,c)=>{t==="class"?Ic(e,s,o):t==="style"?Ac(e,n,s):gn(t)?Rs(t)||Hc(e,t,n,s,r):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Wc(e,t,s,o))?Oc(e,t,s,i,r,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Bc(e,t,s,o))};function Wc(e,t,n,s){return s?!!(t==="innerHTML"||t==="textContent"||t in e&&Wo.test(t)&&X(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Wo.test(t)&&xe(n)?!1:t in e}function qc(e){const t=lo();if(!t)return;const n=t.ut=(o=e(t.proxy))=>{Array.from(document.querySelectorAll(`[data-v-owner="${t.uid}"]`)).forEach(i=>Os(i,o))},s=()=>{const o=e(t.proxy);Bs(t.subTree,o),n(o)};Ui(s),De(()=>{const o=new MutationObserver(s);o.observe(t.subTree.el.parentNode,{childList:!0}),pt(()=>o.disconnect())})}function Bs(e,t){if(e.shapeFlag&128){const n=e.suspense;e=n.activeBranch,n.pendingBranch&&!n.isHydrating&&n.effects.push(()=>{Bs(n.activeBranch,t)})}for(;e.component;)e=e.component.subTree;if(e.shapeFlag&1&&e.el)Os(e.el,t);else if(e.type===G)e.children.forEach(n=>Bs(n,t));else if(e.type===Dt){let{el:n,anchor:s}=e;for(;n&&(Os(n,t),n!==s);)n=n.nextSibling}}function Os(e,t){if(e.nodeType===1){const n=e.style;for(const s in t)n.setProperty(`--${s}`,t[s])}}const ct="transition",en="animation",ls=(e,{slots:t})=>Un(Ki,Yc(e),t);ls.displayName="Transition";const fr={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};ls.props=$e({},Ki.props,fr);const yt=(e,t=[])=>{K(e)?e.forEach(n=>n(...t)):e&&e(...t)},qo=e=>e?K(e)?e.some(t=>t.length>1):e.length>1:!1;function Yc(e){const t={};for(const F in e)F in fr||(t[F]=e[F]);if(e.css===!1)return t;const{name:n="v",type:s,duration:o,enterFromClass:i=`${n}-enter-from`,enterActiveClass:r=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:u=r,appearToClass:h=l,leaveFromClass:v=`${n}-leave-from`,leaveActiveClass:g=`${n}-leave-active`,leaveToClass:k=`${n}-leave-to`}=e,M=Gc(o),N=M&&M[0],Y=M&&M[1],{onBeforeEnter:y,onEnter:P,onEnterCancelled:A,onLeave:q,onLeaveCancelled:ee,onBeforeAppear:_e=y,onAppear:se=P,onAppearCancelled:I=A}=t,Z=(F,te,R)=>{xt(F,te?h:l),xt(F,te?u:r),R&&R()},J=(F,te)=>{F._isLeaving=!1,xt(F,v),xt(F,k),xt(F,g),te&&te()},re=F=>(te,R)=>{const Me=F?se:P,fe=()=>Z(te,F,R);yt(Me,[te,fe]),Yo(()=>{xt(te,F?c:i),at(te,F?h:l),qo(Me)||Go(te,s,N,fe)})};return $e(t,{onBeforeEnter(F){yt(y,[F]),at(F,i),at(F,r)},onBeforeAppear(F){yt(_e,[F]),at(F,c),at(F,u)},onEnter:re(!1),onAppear:re(!0),onLeave(F,te){F._isLeaving=!0;const R=()=>J(F,te);at(F,v),Xc(),at(F,g),Yo(()=>{!F._isLeaving||(xt(F,v),at(F,k),qo(q)||Go(F,s,Y,R))}),yt(q,[F,R])},onEnterCancelled(F){Z(F,!1),yt(A,[F])},onAppearCancelled(F){Z(F,!0),yt(I,[F])},onLeaveCancelled(F){J(F),yt(ee,[F])}})}function Gc(e){if(e==null)return null;if(ge(e))return[ys(e.enter),ys(e.leave)];{const t=ys(e);return[t,t]}}function ys(e){return fn(e)}function at(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function xt(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Yo(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Qc=0;function Go(e,t,n,s){const o=e._endId=++Qc,i=()=>{o===e._endId&&s()};if(n)return setTimeout(i,n);const{type:r,timeout:l,propCount:c}=Jc(e,t);if(!r)return s();const u=r+"end";let h=0;const v=()=>{e.removeEventListener(u,g),i()},g=k=>{k.target===e&&++h>=c&&v()};setTimeout(()=>{h(n[M]||"").split(", "),o=s(`${ct}Delay`),i=s(`${ct}Duration`),r=Qo(o,i),l=s(`${en}Delay`),c=s(`${en}Duration`),u=Qo(l,c);let h=null,v=0,g=0;t===ct?r>0&&(h=ct,v=r,g=i.length):t===en?u>0&&(h=en,v=u,g=c.length):(v=Math.max(r,u),h=v>0?r>u?ct:en:null,g=h?h===ct?i.length:c.length:0);const k=h===ct&&/\b(transform|all)(,|$)/.test(s(`${ct}Property`).toString());return{type:h,timeout:v,propCount:g,hasTransform:k}}function Qo(e,t){for(;e.lengthJo(n)+Jo(e[s])))}function Jo(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function Xc(){return document.body.offsetHeight}const Xo=e=>{const t=e.props["onUpdate:modelValue"]||!1;return K(t)?n=>In(t,n):t};function Zc(e){e.target.composing=!0}function Zo(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const k_={created(e,{modifiers:{lazy:t,trim:n,number:s}},o){e._assign=Xo(o);const i=s||o.props&&o.props.type==="number";At(e,t?"change":"input",r=>{if(r.target.composing)return;let l=e.value;n&&(l=l.trim()),i&&(l=fn(l)),e._assign(l)}),n&&At(e,"change",()=>{e.value=e.value.trim()}),t||(At(e,"compositionstart",Zc),At(e,"compositionend",Zo),At(e,"change",Zo))},mounted(e,{value:t}){e.value=t==null?"":t},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:o}},i){if(e._assign=Xo(i),e.composing||document.activeElement===e&&e.type!=="range"&&(n||s&&e.value.trim()===t||(o||e.type==="number")&&fn(e.value)===t))return;const r=t==null?"":t;e.value!==r&&(e.value=r)}},ea=["ctrl","shift","alt","meta"],ta={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>ea.some(n=>e[`${n}Key`]&&!t.includes(n))},na=(e,t)=>(n,...s)=>{for(let o=0;o{tn(e,!1)}):tn(e,t))},beforeUnmount(e,{value:t}){tn(e,t)}};function tn(e,t){e.style.display=t?e._vod:"none"}const sa=$e({patchProp:Kc},Mc);let xs,ei=!1;function oa(){return xs=ei?xs:fc(sa),ei=!0,xs}const ia=(...e)=>{const t=oa().createApp(...e),{mount:n}=t;return t.mount=s=>{const o=ra(s);if(o)return n(o,!0,o instanceof SVGElement)},t};function ra(e){return xe(e)?document.querySelector(e):e}const O=(e,t)=>{const n=e.__vccOpts||e;for(const[s,o]of t)n[s]=o;return n},la="modulepreload",ca=function(e){return"/ybhdsg-zhs/"+e},ti={},dr=function(t,n,s){if(!n||n.length===0)return t();const o=document.getElementsByTagName("link");return Promise.all(n.map(i=>{if(i=ca(i),i in ti)return;ti[i]=!0;const r=i.endsWith(".css"),l=r?'[rel="stylesheet"]':"";if(!!s)for(let h=o.length-1;h>=0;h--){const v=o[h];if(v.href===i&&(!r||v.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${l}`))return;const u=document.createElement("link");if(u.rel=r?"stylesheet":la,r||(u.as="script",u.crossOrigin=""),u.href=i,document.head.appendChild(u),r)return new Promise((h,v)=>{u.addEventListener("load",h),u.addEventListener("error",()=>v(new Error(`Unable to preload CSS for ${i}`)))})})).then(()=>t())};const aa=D({__name:"VPBadge",props:{text:null,type:null},setup(e){return(t,n)=>{var s;return d(),m("span",{class:he(["VPBadge",(s=e.type)!=null?s:"tip"])},[E(t.$slots,"default",{},()=>[Ve(ae(e.text),1)],!0)],2)}}});const ua=O(aa,[["__scopeId","data-v-8d21f6c9"]]),fa=JSON.parse('{"lang":"en-US","title":"\u54D1\u5DF4\u6E56\u5927\u6C34\u602A","titleTemplate":"\u6211\u7684\u7F51\u7AD9","description":"A VitePress site","base":"/ybhdsg-zhs/","head":[],"appearance":true,"themeConfig":{"algolia":{"appId":"6CNZ25L7YU","apiKey":"e53c455f0ac0c08324e6940af2916937","indexName":"ybhdsg","placeholder":"\u8BF7\u8F93\u5165\u5173\u952E\u8BCD","buttonText":"\u641C\u7D22"},"outline":[2,6],"outlineTitle":"\u76EE\u5F55","logo":"/cat.svg","siteTitle":"\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u5C71\u6C34\u6E38\u8BB0","docFooter":{"prev":"\u4E0A\u4E00\u9875","next":"\u4E0B\u4E00\u9875"},"socialLinks":[{"icon":"github","link":"https://github.com/Ybhdsg123/ybhdsg-zhs"},{"icon":{"svg":""},"link":"https://juejin.cn/user/761326894326280/posts"}],"nav":[{"text":"Threejs","link":"../pages/threejs/threejs.md"},{"text":"cancvs","items":[{"text":"\u57FA\u7840\u77E5\u8BC6","link":"../pages/canvas/index.md"},{"text":"\u5C0Fdemo","link":"../pages/canvas/demo.md"}]},{"text":"\u9762\u8BD5\u76F8\u5173","items":[{"text":"\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE","link":"/pages/interviews/networkrotocols"},{"text":"\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B","link":"/pages/interviews/browser"},{"text":"Webpack\u9762\u8BD5\u9898","link":"/pages/interviews/webpack"},{"text":"html\u65B9\u9762","link":"/pages/interviews/html"},{"text":"css\u65B9\u9762","link":"/pages/interviews/css"},{"text":"js\u65B9\u9762","link":"/pages/interviews/js"},{"text":"http\u65B9\u9762","link":"/pages/interviews/http"},{"text":"git\u65B9\u9762","link":"/pages/interviews/git"},{"text":"vue\u65B9\u9762","link":"/pages/interviews/vue"},{"text":"\u4E8B\u4EF6\u5FAA\u73AF","link":"/pages/interviews/eventLoop"}]},{"text":"vue3\u540E\u53F0\u7CFB\u7EDF","items":[{"text":"\u642D\u5EFA\u8FC7\u7A0B","link":"/pages/vue3-element-admin/anxinPC"},{"text":"element plus\u7EC4\u4EF6","link":"/pages/vue3-element-admin/epComponents"}]},{"text":"\u5E38\u89C1\u624B\u5199\u51FD\u6570","link":"../pages/interviews/handwriteFn.md"},{"text":"node","link":"../pages/node/"},{"text":"rollup\u6253\u5305","link":"../pages/rollup-build/rollup.md"},{"text":"\u7B80\u4E66","link":"https://www.jianshu.com/u/ac97502b9e92"}],"sidebar":[{"text":"vue3\u5B9D\u85CF\u{1F3F4}\u200D\u2620\uFE0F","items":[{"text":"vue\u7EC4\u4EF6","link":"/pages/vue3Treasures/vueComponents"},{"text":"vue\u5E38\u89C1\u6280\u5DE7","link":"/pages/vue3Treasures/vueCommonTips"},{"text":"vue\u5E38\u7528\u6307\u4EE4","link":"/pages/vue3Treasures/vueDirectives"}]},{"text":"vue \u6838\u5FC3","items":[{"text":"\u54CD\u5E94\u5F0F\u539F\u7406","link":"/pages/vueCore/responsivePrinciples"},{"text":"\u865A\u62DFdom","link":"/pages/vueCore/virtualDom"},{"text":"diff\u7B97\u6CD5","link":"/pages/vueCore/diff"}]},{"text":"\u5DE5\u5177\u51FD\u6570","items":[{"text":"\u5E38\u7528\u7684\u65B9\u6CD5","link":"/pages/toolFun/tools"},{"text":"\u6587\u4EF6\u76F8\u5173","link":"/pages/toolFun/download"},{"text":"\u65F6\u95F4\u76F8\u5173","link":"/pages/toolFun/timeTool"},{"text":"\u56FE\u7247\u76F8\u5173","link":"/pages/toolFun/imgTool"}]},{"text":"\u597D\u8BB0\u6027\u4E0D\u5982\u70C2\u7B14\u5934","collapsible":true,"collapsed":false,"items":[{"text":"\u516C\u7528demo","link":"/pages/base/globalDemo"},{"text":"\u7B97\u6CD5","link":"/pages/base/leetcode/"},{"text":"JavaScript","link":"/pages/base/js/"},{"text":"HTML","link":"/pages/base/html/"},{"text":"CSS","link":"/pages/base/css/"},{"text":"CSS Demo","link":"/pages/css/cssDemo.md"},{"text":"CSS\u7279\u6548","link":"/pages/base/cssAnimation/"},{"text":"\u6587\u4EF6\u4E0A\u4F20\uFF08\u539F\u751F\uFF09","link":"/pages/base/uploadFile"}]},{"text":"vue3\u57FA\u7840","collapsible":true,"collapsed":true,"items":[{"text":"\u6CE8\u610F\u70B9","link":"/pages/vue3/basic/note"},{"text":"reactive","link":"/pages/vue3/basic/reactive"},{"text":"ref","link":"/pages/vue3/basic/ref"},{"text":"v-model","link":"/pages/vue3/basic/v-model"},{"text":"\u8BA1\u7B97\u5C5E\u6027\u548C\u4FA6\u542C\u5668","link":"/pages/vue3/basic/computed"}]},{"text":"vue3\u7EC4\u4EF6","collapsible":true,"collapsed":true,"items":[{"text":"\u7EC4\u4EF6\u7684\u4E00\u4E9B\u6CE8\u610F\u70B9","link":"/pages/vue3/components/componentNote"},{"text":"\u7EC4\u4EF6\u6CE8\u518C","link":"/pages/vue3/components/reg"},{"text":"\u7EC4\u4EF6\u63D2\u69FD","link":"/pages/vue3/components/slot"},{"text":"\u4F9D\u8D56\u6CE8\u5165","link":"/pages/vue3/components/provide"}]},{"text":"uniapp\u76F8\u5173","collapsible":true,"collapsed":true,"items":[{"text":"\u5E38\u7528api\u7B49","link":"/pages/uniapp/"},{"text":"\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6","link":"/pages/uniapp/components-uploadImg"},{"text":"\u65E5\u5386\u7EC4\u4EF6","link":"/pages/uniapp/calendar"}]},{"text":"vite","collapsible":true,"collapsed":true,"items":[{"text":"vite\u76F8\u5173","link":"/pages/vite/"},{"text":"vitepress\u76F8\u5173","link":"/pages/vite/vitepress"}]},{"text":"vscode\u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E","collapsible":true,"collapsed":true,"items":[{"text":"\u76F8\u5173\u63D2\u4EF6","link":"/pages/vscodeTool/"}]},{"text":"git\u76F8\u5173","collapsible":true,"collapsed":true,"items":[{"text":"gitHub\u9047\u5230\u7684\u95EE\u9898","link":"/pages/git/githubQuestion/"}]}]},"locales":{"/":{"lang":"zh-CN"}},"langs":{},"scrollOffset":90,"cleanUrls":"disabled"}'),cs=/^[a-z]+:/i,ni="vitepress-theme-appearance",Le=typeof window<"u",hr={relativePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0};function da(e,t){t.sort((n,s)=>{const o=s.split("/").length-n.split("/").length;return o!==0?o:s.length-n.length});for(const n of t)if(e.startsWith(n))return n}function si(e,t){const n=da(t,Object.keys(e));return n?e[n]:void 0}function ha(e){const{locales:t}=e.themeConfig||{},n=e.locales;return t&&n?Object.keys(t).reduce((s,o)=>(s[o]={label:t[o].label,lang:n[o].lang},s),{}):{}}function _a(e,t){t=va(e,t);const n=si(e.locales||{},t),s=si(e.themeConfig.locales||{},t);return Object.assign({},e,n,{themeConfig:Object.assign({},e.themeConfig,s,{locales:{}}),lang:(n||e).lang,locales:{},langs:ha(e)})}function _r(e,t){var i;const n=t.title||e.title,s=(i=t.titleTemplate)!=null?i:e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const o=pa(e.title,s);return`${n}${o}`}function pa(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function va(e,t){if(!Le)return t;const n=e.base,s=n.endsWith("/")?n.slice(0,-1):n;return t.slice(s.length)}function ma(e,t){const[n,s]=t;if(n!=="meta")return!1;const o=Object.entries(s)[0];return o==null?!1:e.some(([i,r])=>i===n&&r[o[0]]===o[1])}function ga(e,t){return[...e.filter(n=>!ma(t,n)),...t]}const ba=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,ya=/^[a-z]:/i;function oi(e){const t=ya.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(ba,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}function xa(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function vn(e){return cs.test(e)?e:xa(Yt.value.base,e)}function pr(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t.endsWith("/")&&(t+="index"),Le){const n="/ybhdsg-zhs/";t=oi(t.slice(n.length).replace(/\//g,"_")||"index")+".md";const s=__VP_HASH_MAP__[t.toLowerCase()];t=`${n}assets/${t}.${s}.js`}else t=`./${oi(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}const vr=Symbol(),Yt=wl(fa);function wa(e){const t=ie(()=>_a(Yt.value,e.path));return{site:t,theme:ie(()=>t.value.themeConfig),page:ie(()=>e.data),frontmatter:ie(()=>e.data.frontmatter),lang:ie(()=>t.value.lang),localePath:ie(()=>{const{langs:n,lang:s}=t.value,o=Object.keys(n).find(i=>n[i].lang===s);return vn(o||"/")}),title:ie(()=>_r(t.value,e.data)),description:ie(()=>e.data.description||t.value.description),isDark:ue(!1)}}function le(){const e=We(vr);if(!e)throw new Error("vitepress data not properly injected in app");return e}const mr=Symbol(),ii="http://a.com",ka=()=>({path:"/",component:null,data:hr});function $a(e,t){const n=Xn(ka()),s={route:n,go:o};async function o(l=Le?location.href:"/"){var u,h;await((u=s.onBeforeRouteChange)==null?void 0:u.call(s,l));const c=new URL(l,ii);Yt.value.cleanUrls==="disabled"&&!c.pathname.endsWith("/")&&!c.pathname.endsWith(".html")&&(c.pathname+=".html",l=c.pathname+c.search+c.hash),Le&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",l)),await r(l),await((h=s.onAfterRouteChanged)==null?void 0:h.call(s,l))}let i=null;async function r(l,c=0,u=!1){const h=new URL(l,ii),v=i=h.pathname;try{let g=await e(v);if(i===v){i=null;const{default:k,__pageData:M}=g;if(!k)throw new Error(`Invalid route component: ${k}`);n.path=Le?v:vn(v),n.component=on(k),n.data=on(M),Le&&eo(()=>{if(h.hash&&!c){let N=null;try{N=document.querySelector(decodeURIComponent(h.hash))}catch(Y){console.warn(Y)}if(N){ri(N,h.hash);return}}window.scrollTo(0,c)})}}catch(g){if(!/fetch/.test(g.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(g),!u)try{const k=await fetch(Yt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await k.json(),await r(l,c,!0);return}catch{}i===v&&(i=null,n.path=Le?v:vn(v),n.component=t?on(t):null,n.data=hr)}}return Le&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const u=l.target.closest("a");if(u&&!u.closest(".vp-raw")&&!u.download){const{href:h,origin:v,pathname:g,hash:k,search:M,target:N}=u,Y=window.location,y=g.match(/\.\w+$/);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&N!=="_blank"&&v===Y.origin&&!(y&&y[0]!==".html")&&(l.preventDefault(),g===Y.pathname&&M===Y.search?k&&k!==Y.hash&&(history.pushState(null,"",k),window.dispatchEvent(new Event("hashchange")),ri(u,k,u.classList.contains("header-anchor"))):o(h))}},{capture:!0}),window.addEventListener("popstate",l=>{r(location.href,l.state&&l.state.scrollPosition||0)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function Pa(){const e=We(mr);if(!e)throw new Error("useRouter() is called without provider.");return e}function vt(){return Pa().route}function ri(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.querySelector(decodeURIComponent(t))}catch(o){console.warn(o)}if(s){let o=Yt.value.scrollOffset;typeof o=="string"&&(o=document.querySelector(o).getBoundingClientRect().bottom+24);const i=parseInt(window.getComputedStyle(s).paddingTop,10),r=window.scrollY+s.getBoundingClientRect().top-o+i;!n||Math.abs(r-window.scrollY)>window.innerHeight?window.scrollTo(0,r):window.scrollTo({left:0,top:r,behavior:"smooth"})}}const Ca=D({name:"VitePressContent",props:{onContentUpdated:Function},setup(e){const t=vt();return to(()=>{var n;(n=e.onContentUpdated)==null||n.call(e)}),()=>Un("div",{style:{position:"relative"}},[t.component?Un(t.component):null])}}),gr=/#.*$/,Sa=/(index)?\.(md|html)$/,Ta=typeof window<"u",Va=ue(Ta?location.hash:"");function Ea(e){return cs.test(e)}function La(e,t){let n,s=!1;return()=>{n&&clearTimeout(n),s?n=setTimeout(e,t):(e(),s=!0,setTimeout(()=>{s=!1},t))}}function Xt(e,t,n=!1){if(t===void 0)return!1;if(e=ci(`/${e}`),n)return new RegExp(t).test(e);if(ci(t)!==e)return!1;const s=t.match(gr);return s?Va.value===s[0]:!0}function li(e){return/^\//.test(e)?e:`/${e}`}function ci(e){return decodeURI(e).replace(gr,"").replace(Sa,"")}function jn(e){if(Ea(e))return e;const{site:t}=le(),{pathname:n,search:s,hash:o}=new URL(e,"http://example.com"),i=n.endsWith("/")||n.endsWith(".html")?e:`${n.replace(/(\.md)?$/,t.value.cleanUrls==="disabled"?".html":"")}${s}${o}`;return vn(i)}function br(e,t){if(Array.isArray(e))return e;if(e==null)return[];t=li(t);const n=Object.keys(e).sort((s,o)=>o.split("/").length-s.split("/").length).find(s=>t.startsWith(li(s)));return n?e[n]:[]}function Ma(e){const t=[];function n(s){for(const o of s)o.link&&t.push({...o,link:o.link}),"items"in o&&n(o.items)}for(const s of e)n(s.items);return t}function tt(){const e=vt(),{theme:t,frontmatter:n}=le(),s=ue(!1),o=ie(()=>{const h=t.value.sidebar,v=e.data.relativePath;return h?br(h,v):[]}),i=ie(()=>n.value.sidebar!==!1&&o.value.length>0&&n.value.layout!=="home"),r=ie(()=>n.value.layout!=="home"&&n.value.aside!==!1);function l(){s.value=!0}function c(){s.value=!1}function u(){s.value?c():l()}return{isOpen:s,sidebar:o,hasSidebar:i,hasAside:r,open:l,close:c,toggle:u}}function Ia(e,t){let n;jt(()=>{n=e.value?document.activeElement:void 0}),De(()=>{window.addEventListener("keyup",s)}),pt(()=>{window.removeEventListener("keyup",s)});function s(o){o.key==="Escape"&&e.value&&(t(),n==null||n.focus())}}const Aa=D({__name:"VPSkipLink",setup(e){const t=vt(),n=ue();Ze(()=>t.path,()=>n.value.focus());function s({target:o}){const i=document.querySelector(o.hash);if(i){const r=()=>{i.removeAttribute("tabindex"),i.removeEventListener("blur",r)};i.setAttribute("tabindex","-1"),i.addEventListener("blur",r),i.focus(),window.scrollTo(0,0)}}return(o,i)=>(d(),m(G,null,[b("span",{ref_key:"backToTop",ref:n,tabindex:"-1"},null,512),b("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}});const Na=O(Aa,[["__scopeId","data-v-151f2593"]]),Ba={key:0,class:"VPBackdrop"},Oa=D({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,n)=>(d(),Q(ls,{name:"fade"},{default:B(()=>[e.show?(d(),m("div",Ba)):j("",!0)]),_:1}))}});const Fa=O(Oa,[["__scopeId","data-v-0164f098"]]);function Ha(){const e=ue(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function n(){e.value=!1,window.removeEventListener("resize",o)}function s(){e.value?n():t()}function o(){window.outerWidth>=768&&n()}const i=vt();return Ze(()=>i.path,n),{isScreenOpen:e,openScreen:t,closeScreen:n,toggleScreen:s}}const Da=["src","alt"],Ra={inheritAttrs:!1},za=D({...Ra,__name:"VPImage",props:{image:null,alt:null},setup(e){return(t,n)=>{var o;const s=Et("VPImage",!0);return e.image?(d(),m(G,{key:0},[typeof e.image=="string"||"src"in e.image?(d(),m("img",Nn({key:0,class:"VPImage"},typeof e.image=="string"?t.$attrs:{...e.image,...t.$attrs},{src:_(vn)(typeof e.image=="string"?e.image:e.image.src),alt:(o=e.alt)!=null?o:typeof e.image=="string"?"":e.image.alt||""}),null,16,Da)):(d(),m(G,{key:1},[T(s,Nn({class:"dark",image:e.image.dark,alt:typeof e.image.dark=="string"?e.image.alt:e.image.dark.alt||e.image.alt},t.$attrs),null,16,["image","alt"]),T(s,Nn({class:"light",image:e.image.light,alt:typeof e.image.light=="string"?e.image.alt:e.image.light.alt||e.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):j("",!0)}}});const yr=O(za,[["__scopeId","data-v-b7ac6bd3"]]),Ua=["href"],ja=D({__name:"VPNavBarTitle",setup(e){const{site:t,theme:n}=le(),{hasSidebar:s}=tt();return(o,i)=>(d(),m("div",{class:he(["VPNavBarTitle",{"has-sidebar":_(s)}])},[b("a",{class:"title",href:_(t).base},[E(o.$slots,"nav-bar-title-before",{},void 0,!0),T(yr,{class:"logo",image:_(n).logo},null,8,["image"]),_(n).siteTitle?(d(),m(G,{key:0},[Ve(ae(_(n).siteTitle),1)],64)):_(n).siteTitle===void 0?(d(),m(G,{key:1},[Ve(ae(_(t).title),1)],64)):j("",!0),E(o.$slots,"nav-bar-title-after",{},void 0,!0)],8,Ua)],2))}});const Ka=O(ja,[["__scopeId","data-v-d5925166"]]);const Wa={key:0,class:"VPNavBarSearch"},qa={type:"button",class:"DocSearch DocSearch-Button","aria-label":"Search"},Ya={class:"DocSearch-Button-Container"},Ga=b("svg",{class:"DocSearch-Search-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},[b("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Qa={class:"DocSearch-Button-Placeholder"},Ja=b("span",{class:"DocSearch-Button-Keys"},[b("kbd",{class:"DocSearch-Button-Key"}),b("kbd",{class:"DocSearch-Button-Key"},"K")],-1),Xa=D({__name:"VPNavBarSearch",setup(e){qc(r=>({"5943dbe8":o.value}));const t=Rl(()=>dr(()=>import("./chunks/VPAlgoliaSearchBox.ba670ed5.js"),[])),{theme:n}=le(),s=ue(!1),o=ue("'Meta'");De(()=>{if(!n.value.algolia)return;o.value=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"'\u2318'":"'Ctrl'";const r=c=>{c.key==="k"&&(c.ctrlKey||c.metaKey)&&(c.preventDefault(),i(),l())},l=()=>{window.removeEventListener("keydown",r)};window.addEventListener("keydown",r),pt(l)});function i(){s.value||(s.value=!0)}return(r,l)=>{var c;return _(n).algolia?(d(),m("div",Wa,[s.value?(d(),Q(_(t),{key:0})):(d(),m("div",{key:1,id:"docsearch",onClick:i},[b("button",qa,[b("span",Ya,[Ga,b("span",Qa,ae(((c=_(n).algolia)==null?void 0:c.buttonText)||"Search"),1)]),Ja])]))])):j("",!0)}}});const Za={},eu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",height:"24px",viewBox:"0 0 24 24",width:"24px"},tu=b("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),nu=b("path",{d:"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"},null,-1),su=[tu,nu];function ou(e,t){return d(),m("svg",eu,su)}const iu=O(Za,[["render",ou]]),ru=D({__name:"VPLink",props:{href:null,noIcon:{type:Boolean}},setup(e){const t=e,n=ie(()=>t.href&&cs.test(t.href));return(s,o)=>(d(),Q(so(e.href?"a":"span"),{class:he(["VPLink",{link:e.href}]),href:e.href?_(jn)(e.href):void 0,target:_(n)?"_blank":void 0,rel:_(n)?"noreferrer":void 0},{default:B(()=>[E(s.$slots,"default",{},void 0,!0),_(n)&&!e.noIcon?(d(),Q(iu,{key:0,class:"icon"})):j("",!0)]),_:3},8,["class","href","target","rel"]))}});const Lt=O(ru,[["__scopeId","data-v-3c355974"]]),lu=D({__name:"VPNavBarMenuLink",props:{item:null},setup(e){const{page:t}=le();return(n,s)=>(d(),Q(Lt,{class:he({VPNavBarMenuLink:!0,active:_(Xt)(_(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,noIcon:!0},{default:B(()=>[Ve(ae(e.item.text),1)]),_:1},8,["class","href"]))}});const cu=O(lu,[["__scopeId","data-v-47a2263e"]]),co=ue();let xr=!1,ws=0;function au(e){const t=ue(!1);if(typeof window<"u"){!xr&&uu(),ws++;const n=Ze(co,s=>{var o,i,r;s===e.el.value||((o=e.el.value)==null?void 0:o.contains(s))?(t.value=!0,(i=e.onFocus)==null||i.call(e)):(t.value=!1,(r=e.onBlur)==null||r.call(e))});pt(()=>{n(),ws--,ws||fu()})}return Qs(t)}function uu(){document.addEventListener("focusin",wr),xr=!0,co.value=document.activeElement}function fu(){document.removeEventListener("focusin",wr)}function wr(){co.value=document.activeElement}const du={},hu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},_u=b("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),pu=[_u];function vu(e,t){return d(),m("svg",hu,pu)}const kr=O(du,[["render",vu]]),mu={},gu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},bu=b("circle",{cx:"12",cy:"12",r:"2"},null,-1),yu=b("circle",{cx:"19",cy:"12",r:"2"},null,-1),xu=b("circle",{cx:"5",cy:"12",r:"2"},null,-1),wu=[bu,yu,xu];function ku(e,t){return d(),m("svg",gu,wu)}const $u=O(mu,[["render",ku]]),Pu={class:"VPMenuLink"},Cu=D({__name:"VPMenuLink",props:{item:null},setup(e){const{page:t}=le();return(n,s)=>(d(),m("div",Pu,[T(Lt,{class:he({active:_(Xt)(_(t).relativePath,e.item.activeMatch||e.item.link)}),href:e.item.link},{default:B(()=>[Ve(ae(e.item.text),1)]),_:1},8,["class","href"])]))}});const as=O(Cu,[["__scopeId","data-v-e8e0fb1d"]]),Su={class:"VPMenuGroup"},Tu={key:0,class:"title"},Vu=D({__name:"VPMenuGroup",props:{text:null,items:null},setup(e){return(t,n)=>(d(),m("div",Su,[e.text?(d(),m("p",Tu,ae(e.text),1)):j("",!0),(d(!0),m(G,null,Se(e.items,s=>(d(),m(G,null,["link"in s?(d(),Q(as,{key:0,item:s},null,8,["item"])):j("",!0)],64))),256))]))}});const Eu=O(Vu,[["__scopeId","data-v-9ca52130"]]),Lu={class:"VPMenu"},Mu={key:0,class:"items"},Iu=D({__name:"VPMenu",props:{items:null},setup(e){return(t,n)=>(d(),m("div",Lu,[e.items?(d(),m("div",Mu,[(d(!0),m(G,null,Se(e.items,s=>(d(),m(G,{key:s.text},["link"in s?(d(),Q(as,{key:0,item:s},null,8,["item"])):(d(),Q(Eu,{key:1,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):j("",!0),E(t.$slots,"default",{},void 0,!0)]))}});const Au=O(Iu,[["__scopeId","data-v-1c5d0cfc"]]),Nu=["aria-expanded","aria-label"],Bu={key:0,class:"text"},Ou={class:"menu"},Fu=D({__name:"VPFlyout",props:{icon:null,button:null,label:null,items:null},setup(e){const t=ue(!1),n=ue();au({el:n,onBlur:s});function s(){t.value=!1}return(o,i)=>(d(),m("div",{class:"VPFlyout",ref_key:"el",ref:n,onMouseenter:i[1]||(i[1]=r=>t.value=!0),onMouseleave:i[2]||(i[2]=r=>t.value=!1)},[b("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":e.label,onClick:i[0]||(i[0]=r=>t.value=!t.value)},[e.button||e.icon?(d(),m("span",Bu,[e.icon?(d(),Q(so(e.icon),{key:0,class:"option-icon"})):j("",!0),Ve(" "+ae(e.button)+" ",1),T(kr,{class:"text-icon"})])):(d(),Q($u,{key:1,class:"icon"}))],8,Nu),b("div",Ou,[T(Au,{items:e.items},{default:B(()=>[E(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});const ao=O(Fu,[["__scopeId","data-v-6ffb57d3"]]),Hu=D({__name:"VPNavBarMenuGroup",props:{item:null},setup(e){const{page:t}=le();return(n,s)=>(d(),Q(ao,{class:he({VPNavBarMenuGroup:!0,active:_(Xt)(_(t).relativePath,e.item.activeMatch,!!e.item.activeMatch)}),button:e.item.text,items:e.item.items},null,8,["class","button","items"]))}}),Du=e=>(qe("data-v-f83db6ba"),e=e(),Ye(),e),Ru={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},zu=Du(()=>b("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),Uu=D({__name:"VPNavBarMenu",setup(e){const{theme:t}=le();return(n,s)=>_(t).nav?(d(),m("nav",Ru,[zu,(d(!0),m(G,null,Se(_(t).nav,o=>(d(),m(G,{key:o.text},["link"in o?(d(),Q(cu,{key:0,item:o},null,8,["item"])):(d(),Q(Hu,{key:1,item:o},null,8,["item"]))],64))),128))])):j("",!0)}});const ju=O(Uu,[["__scopeId","data-v-f83db6ba"]]),Ku={},Wu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},qu=b("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Yu=b("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Gu=[qu,Yu];function Qu(e,t){return d(),m("svg",Wu,Gu)}const $r=O(Ku,[["render",Qu]]),Ju={class:"items"},Xu={class:"title"},Zu=D({__name:"VPNavBarTranslations",setup(e){const{theme:t}=le();return(n,s)=>_(t).localeLinks?(d(),Q(ao,{key:0,class:"VPNavBarTranslations",icon:$r},{default:B(()=>[b("div",Ju,[b("p",Xu,ae(_(t).localeLinks.text),1),(d(!0),m(G,null,Se(_(t).localeLinks.items,o=>(d(),Q(as,{key:o.link,item:o},null,8,["item"]))),128))])]),_:1})):j("",!0)}});const ef=O(Zu,[["__scopeId","data-v-db824e91"]]);const tf={},nf={class:"VPSwitch",type:"button",role:"switch"},sf={class:"check"},of={key:0,class:"icon"};function rf(e,t){return d(),m("button",nf,[b("span",sf,[e.$slots.default?(d(),m("span",of,[E(e.$slots,"default",{},void 0,!0)])):j("",!0)])])}const lf=O(tf,[["render",rf],["__scopeId","data-v-eba7420e"]]),cf={},af={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},uf=gc('',9),ff=[uf];function df(e,t){return d(),m("svg",af,ff)}const hf=O(cf,[["render",df]]),_f={},pf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},vf=b("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),mf=[vf];function gf(e,t){return d(),m("svg",pf,mf)}const bf=O(_f,[["render",gf]]),yf=D({__name:"VPSwitchAppearance",setup(e){const{site:t,isDark:n}=le(),s=ue(!1),o=typeof localStorage<"u"?i():()=>{};De(()=>{s.value=document.documentElement.classList.contains("dark")});function i(){const r=window.matchMedia("(prefers-color-scheme: dark)"),l=document.documentElement.classList;let c=localStorage.getItem(ni),u=t.value.appearance==="dark"&&c==null||(c==="auto"||c==null?r.matches:c==="dark");r.onchange=g=>{c==="auto"&&v(u=g.matches)};function h(){v(u=!u),c=u?r.matches?"auto":"dark":r.matches?"light":"auto",localStorage.setItem(ni,c)}function v(g){const k=document.createElement("style");k.type="text/css",k.appendChild(document.createTextNode(`:not(.VPSwitchAppearance):not(.VPSwitchAppearance *) { +function Rs(e,t){const n=Object.create(null),s=e.split(",");for(let o=0;o!!n[o.toLowerCase()]:o=>!!n[o]}function mn(e){if(K(e)){const t={};for(let n=0;n{if(n){const s=n.split(Ar);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function he(e){let t="";if(xe(e))t=e;else if(K(e))for(let n=0;nxe(e)?e:e==null?"":K(e)||ge(e)&&(e.toString===yi||!X(e.toString))?JSON.stringify(e,mi,2):String(e),mi=(e,t)=>t&&t.__v_isRef?mi(e,t.value):Bt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,o])=>(n[`${s} =>`]=o,n),{})}:gi(t)?{[`Set(${t.size})`]:[...t.values()]}:ge(t)&&!K(t)&&!xi(t)?String(t):t,me={},Nt=[],Ke=()=>{},Hr=()=>!1,Rr=/^on[^a-z]/,gn=e=>Rr.test(e),Ds=e=>e.startsWith("onUpdate:"),$e=Object.assign,zs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Dr=Object.prototype.hasOwnProperty,oe=(e,t)=>Dr.call(e,t),K=Array.isArray,Bt=e=>Yn(e)==="[object Map]",gi=e=>Yn(e)==="[object Set]",X=e=>typeof e=="function",xe=e=>typeof e=="string",js=e=>typeof e=="symbol",ge=e=>e!==null&&typeof e=="object",bi=e=>ge(e)&&X(e.then)&&X(e.catch),yi=Object.prototype.toString,Yn=e=>yi.call(e),zr=e=>Yn(e).slice(8,-1),xi=e=>Yn(e)==="[object Object]",Us=e=>xe(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,sn=Rs(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Gn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},jr=/-(\w)/g,et=Gn(e=>e.replace(jr,(t,n)=>n?n.toUpperCase():"")),Ur=/\B([A-Z])/g,Gt=Gn(e=>e.replace(Ur,"-$1").toLowerCase()),Qn=Gn(e=>e.charAt(0).toUpperCase()+e.slice(1)),hs=Gn(e=>e?`on${Qn(e)}`:""),un=(e,t)=>!Object.is(e,t),In=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},fn=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let yo;const Kr=()=>yo||(yo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let Ae;class Wr{constructor(t=!1){this.detached=t,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Ae,!t&&Ae&&(this.index=(Ae.scopes||(Ae.scopes=[])).push(this)-1)}run(t){if(this.active){const n=Ae;try{return Ae=this,t()}finally{Ae=n}}}on(){Ae=this}off(){Ae=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},wi=e=>(e.w&ht)>0,ki=e=>(e.n&ht)>0,Qr=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s{(h==="length"||h>=c)&&l.push(u)})}else switch(n!==void 0&&l.push(r.get(n)),t){case"add":K(e)?Us(n)&&l.push(r.get("length")):(l.push(r.get(Tt)),Bt(e)&&l.push(r.get(Cs)));break;case"delete":K(e)||(l.push(r.get(Tt)),Bt(e)&&l.push(r.get(Cs)));break;case"set":Bt(e)&&l.push(r.get(Tt));break}if(l.length===1)l[0]&&Ss(l[0]);else{const c=[];for(const u of l)u&&c.push(...u);Ss(Ks(c))}}function Ss(e,t){const n=K(e)?e:[...e];for(const s of n)s.computed&&wo(s);for(const s of n)s.computed||wo(s)}function wo(e,t){(e!==je||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const Xr=Rs("__proto__,__v_isRef,__isVue"),Ci=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(js)),Zr=qs(),el=qs(!1,!0),tl=qs(!0),ko=nl();function nl(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=ce(this);for(let i=0,r=this.length;i{e[t]=function(...n){Qt();const s=ce(this)[t].apply(this,n);return Jt(),s}}),e}function qs(e=!1,t=!1){return function(s,o,i){if(o==="__v_isReactive")return!e;if(o==="__v_isReadonly")return e;if(o==="__v_isShallow")return t;if(o==="__v_raw"&&i===(e?t?gl:Li:t?Ei:Vi).get(s))return s;const r=K(s);if(!e&&r&&oe(ko,o))return Reflect.get(ko,o,i);const l=Reflect.get(s,o,i);return(js(o)?Ci.has(o):Xr(o))||(e||Be(s,"get",o),t)?l:Ce(l)?r&&Us(o)?l:l.value:ge(l)?e?Qs(l):Xn(l):l}}const sl=Si(),ol=Si(!0);function Si(e=!1){return function(n,s,o,i){let r=n[s];if(jt(r)&&Ce(r)&&!Ce(o))return!1;if(!e&&(!On(o)&&!jt(o)&&(r=ce(r),o=ce(o)),!K(n)&&Ce(r)&&!Ce(o)))return r.value=o,!0;const l=K(n)&&Us(s)?Number(s)e,Jn=e=>Reflect.getPrototypeOf(e);function $n(e,t,n=!1,s=!1){e=e.__v_raw;const o=ce(e),i=ce(t);n||(t!==i&&Be(o,"get",t),Be(o,"get",i));const{has:r}=Jn(o),l=s?Ys:n?Xs:dn;if(r.call(o,t))return l(e.get(t));if(r.call(o,i))return l(e.get(i));e!==o&&e.get(t)}function Pn(e,t=!1){const n=this.__v_raw,s=ce(n),o=ce(e);return t||(e!==o&&Be(s,"has",e),Be(s,"has",o)),e===o?n.has(e):n.has(e)||n.has(o)}function Cn(e,t=!1){return e=e.__v_raw,!t&&Be(ce(e),"iterate",Tt),Reflect.get(e,"size",e)}function $o(e){e=ce(e);const t=ce(this);return Jn(t).has.call(t,e)||(t.add(e),ot(t,"add",e,e)),this}function Po(e,t){t=ce(t);const n=ce(this),{has:s,get:o}=Jn(n);let i=s.call(n,e);i||(e=ce(e),i=s.call(n,e));const r=o.call(n,e);return n.set(e,t),i?un(t,r)&&ot(n,"set",e,t):ot(n,"add",e,t),this}function Co(e){const t=ce(this),{has:n,get:s}=Jn(t);let o=n.call(t,e);o||(e=ce(e),o=n.call(t,e)),s&&s.call(t,e);const i=t.delete(e);return o&&ot(t,"delete",e,void 0),i}function So(){const e=ce(this),t=e.size!==0,n=e.clear();return t&&ot(e,"clear",void 0,void 0),n}function Sn(e,t){return function(s,o){const i=this,r=i.__v_raw,l=ce(r),c=t?Ys:e?Xs:dn;return!e&&Be(l,"iterate",Tt),r.forEach((u,h)=>s.call(o,c(u),c(h),i))}}function Tn(e,t,n){return function(...s){const o=this.__v_raw,i=ce(o),r=Bt(i),l=e==="entries"||e===Symbol.iterator&&r,c=e==="keys"&&r,u=o[e](...s),h=n?Ys:t?Xs:dn;return!t&&Be(i,"iterate",c?Cs:Tt),{next(){const{value:v,done:g}=u.next();return g?{value:v,done:g}:{value:l?[h(v[0]),h(v[1])]:h(v),done:g}},[Symbol.iterator](){return this}}}}function rt(e){return function(...t){return e==="delete"?!1:this}}function ul(){const e={get(i){return $n(this,i)},get size(){return Cn(this)},has:Pn,add:$o,set:Po,delete:Co,clear:So,forEach:Sn(!1,!1)},t={get(i){return $n(this,i,!1,!0)},get size(){return Cn(this)},has:Pn,add:$o,set:Po,delete:Co,clear:So,forEach:Sn(!1,!0)},n={get(i){return $n(this,i,!0)},get size(){return Cn(this,!0)},has(i){return Pn.call(this,i,!0)},add:rt("add"),set:rt("set"),delete:rt("delete"),clear:rt("clear"),forEach:Sn(!0,!1)},s={get(i){return $n(this,i,!0,!0)},get size(){return Cn(this,!0)},has(i){return Pn.call(this,i,!0)},add:rt("add"),set:rt("set"),delete:rt("delete"),clear:rt("clear"),forEach:Sn(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(i=>{e[i]=Tn(i,!1,!1),n[i]=Tn(i,!0,!1),t[i]=Tn(i,!1,!0),s[i]=Tn(i,!0,!0)}),[e,n,t,s]}const[fl,dl,hl,_l]=ul();function Gs(e,t){const n=t?e?_l:hl:e?dl:fl;return(s,o,i)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?s:Reflect.get(oe(n,o)&&o in s?n:s,o,i)}const pl={get:Gs(!1,!1)},vl={get:Gs(!1,!0)},ml={get:Gs(!0,!1)},Vi=new WeakMap,Ei=new WeakMap,Li=new WeakMap,gl=new WeakMap;function bl(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function yl(e){return e.__v_skip||!Object.isExtensible(e)?0:bl(zr(e))}function Xn(e){return jt(e)?e:Js(e,!1,Ti,pl,Vi)}function xl(e){return Js(e,!1,al,vl,Ei)}function Qs(e){return Js(e,!0,cl,ml,Li)}function Js(e,t,n,s,o){if(!ge(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=o.get(e);if(i)return i;const r=yl(e);if(r===0)return e;const l=new Proxy(e,r===2?s:n);return o.set(e,l),l}function Ot(e){return jt(e)?Ot(e.__v_raw):!!(e&&e.__v_isReactive)}function jt(e){return!!(e&&e.__v_isReadonly)}function On(e){return!!(e&&e.__v_isShallow)}function Mi(e){return Ot(e)||jt(e)}function ce(e){const t=e&&e.__v_raw;return t?ce(t):e}function on(e){return Bn(e,"__v_skip",!0),e}const dn=e=>ge(e)?Xn(e):e,Xs=e=>ge(e)?Qs(e):e;function Ii(e){ft&&je&&(e=ce(e),Pi(e.dep||(e.dep=Ks())))}function Ai(e,t){e=ce(e),e.dep&&Ss(e.dep)}function Ce(e){return!!(e&&e.__v_isRef===!0)}function ue(e){return Ni(e,!1)}function wl(e){return Ni(e,!0)}function Ni(e,t){return Ce(e)?e:new kl(e,t)}class kl{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:ce(t),this._value=n?t:dn(t)}get value(){return Ii(this),this._value}set value(t){const n=this.__v_isShallow||On(t)||jt(t);t=n?t:ce(t),un(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:dn(t),Ai(this))}}function _(e){return Ce(e)?e.value:e}const $l={get:(e,t,n)=>_(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const o=e[t];return Ce(o)&&!Ce(n)?(o.value=n,!0):Reflect.set(e,t,n,s)}};function Bi(e){return Ot(e)?e:new Proxy(e,$l)}var Oi;class Pl{constructor(t,n,s,o){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this[Oi]=!1,this._dirty=!0,this.effect=new Ws(t,()=>{this._dirty||(this._dirty=!0,Ai(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=s}get value(){const t=ce(this);return Ii(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}Oi="__v_isReadonly";function Cl(e,t,n=!1){let s,o;const i=X(e);return i?(s=e,o=Ke):(s=e.get,o=e.set),new Pl(s,o,i||!o,n)}function dt(e,t,n,s){let o;try{o=s?e(...s):e()}catch(i){bn(i,t,n)}return o}function He(e,t,n,s){if(X(e)){const i=dt(e,t,n,s);return i&&bi(i)&&i.catch(r=>{bn(r,t,n)}),i}const o=[];for(let i=0;i>>1;_n(Pe[s])Xe&&Pe.splice(t,1)}function El(e){K(e)?Ft.push(...e):(!st||!st.includes(e,e.allowRecurse?kt+1:kt))&&Ft.push(e),Hi()}function To(e,t=hn?Xe+1:0){for(;t_n(n)-_n(s)),kt=0;kte.id==null?1/0:e.id,Ll=(e,t)=>{const n=_n(e)-_n(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Ri(e){Ts=!1,hn=!0,Pe.sort(Ll);const t=Ke;try{for(Xe=0;Xexe(k)?k.trim():k)),v&&(o=n.map(fn))}let l,c=s[l=hs(t)]||s[l=hs(et(t))];!c&&i&&(c=s[l=hs(Gt(t))]),c&&He(c,e,6,o);const u=s[l+"Once"];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,He(u,e,6,o)}}function Di(e,t,n=!1){const s=t.emitsCache,o=s.get(e);if(o!==void 0)return o;const i=e.emits;let r={},l=!1;if(!X(e)){const c=u=>{const h=Di(u,t,!0);h&&(l=!0,$e(r,h))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(ge(e)&&s.set(e,null),null):(K(i)?i.forEach(c=>r[c]=null):$e(r,i),ge(e)&&s.set(e,r),r)}function es(e,t){return!e||!gn(t)?!1:(t=t.slice(2).replace(/Once$/,""),oe(e,t[0].toLowerCase()+t.slice(1))||oe(e,Gt(t))||oe(e,t))}let ke=null,ts=null;function Hn(e){const t=ke;return ke=e,ts=e&&e.type.__scopeId||null,t}function qe(e){ts=e}function Ye(){ts=null}function B(e,t=ke,n){if(!t||e._n)return e;const s=(...o)=>{s._d&&Fo(-1);const i=Hn(t);let r;try{r=e(...o)}finally{Hn(i),s._d&&Fo(1)}return r};return s._n=!0,s._c=!0,s._d=!0,s}function _s(e){const{type:t,vnode:n,proxy:s,withProxy:o,props:i,propsOptions:[r],slots:l,attrs:c,emit:u,render:h,renderCache:v,data:g,setupState:k,ctx:M,inheritAttrs:N}=e;let Y,y;const P=Hn(e);try{if(n.shapeFlag&4){const q=o||s;Y=ze(h.call(q,q,v,i,k,g,M)),y=c}else{const q=t;Y=ze(q.length>1?q(i,{attrs:c,slots:l,emit:u}):q(i,null)),y=t.props?c:Il(c)}}catch(q){ln.length=0,bn(q,e,1),Y=T(Ne)}let A=Y;if(y&&N!==!1){const q=Object.keys(y),{shapeFlag:ee}=A;q.length&&ee&7&&(r&&q.some(Ds)&&(y=Al(y,r)),A=_t(A,y))}return n.dirs&&(A=_t(A),A.dirs=A.dirs?A.dirs.concat(n.dirs):n.dirs),n.transition&&(A.transition=n.transition),Y=A,Hn(P),Y}const Il=e=>{let t;for(const n in e)(n==="class"||n==="style"||gn(n))&&((t||(t={}))[n]=e[n]);return t},Al=(e,t)=>{const n={};for(const s in e)(!Ds(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function Nl(e,t,n){const{props:s,children:o,component:i}=e,{props:r,children:l,patchFlag:c}=t,u=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?Vo(s,r,u):!!r;if(c&8){const h=t.dynamicProps;for(let v=0;ve.__isSuspense;function zi(e,t){t&&t.pendingBranch?K(e)?t.effects.push(...e):t.effects.push(e):El(e)}function ns(e,t){if(we){let n=we.provides;const s=we.parent&&we.parent.provides;s===n&&(n=we.provides=Object.create(s)),n[e]=t}}function We(e,t,n=!1){const s=we||ke;if(s){const o=s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides;if(o&&e in o)return o[e];if(arguments.length>1)return n&&X(t)?t.call(s.proxy):t}}function Ut(e,t){return ss(e,null,t)}function ji(e,t){return ss(e,null,{flush:"post"})}const Vn={};function Ze(e,t,n){return ss(e,t,n)}function ss(e,t,{immediate:n,deep:s,flush:o,onTrack:i,onTrigger:r}=me){const l=we;let c,u=!1,h=!1;if(Ce(e)?(c=()=>e.value,u=On(e)):Ot(e)?(c=()=>e,s=!0):K(e)?(h=!0,u=e.some(A=>Ot(A)||On(A)),c=()=>e.map(A=>{if(Ce(A))return A.value;if(Ot(A))return St(A);if(X(A))return dt(A,l,2)})):X(e)?t?c=()=>dt(e,l,2):c=()=>{if(!(l&&l.isUnmounted))return v&&v(),He(e,l,3,[g])}:c=Ke,t&&s){const A=c;c=()=>St(A())}let v,g=A=>{v=y.onStop=()=>{dt(A,l,4)}},k;if(qt)if(g=Ke,t?n&&He(t,l,3,[c(),h?[]:void 0,g]):c(),o==="sync"){const A=Vc();k=A.__watcherHandles||(A.__watcherHandles=[])}else return Ke;let M=h?new Array(e.length).fill(Vn):Vn;const N=()=>{if(!!y.active)if(t){const A=y.run();(s||u||(h?A.some((q,ee)=>un(q,M[ee])):un(A,M)))&&(v&&v(),He(t,l,3,[A,M===Vn?void 0:h&&M[0]===Vn?[]:M,g]),M=A)}else y.run()};N.allowRecurse=!!t;let Y;o==="sync"?Y=N:o==="post"?Y=()=>Ee(N,l&&l.suspense):(N.pre=!0,l&&(N.id=l.uid),Y=()=>Zn(N));const y=new Ws(c,Y);t?n?N():M=y.run():o==="post"?Ee(y.run.bind(y),l&&l.suspense):y.run();const P=()=>{y.stop(),l&&l.scope&&zs(l.scope.effects,y)};return k&&k.push(P),P}function Fl(e,t,n){const s=this.proxy,o=xe(e)?e.includes(".")?Ui(s,e):()=>s[e]:e.bind(s,s);let i;X(t)?i=t:(i=t.handler,n=t);const r=we;Wt(this);const l=ss(o,i.bind(s),n);return r?Wt(r):Vt(),l}function Ui(e,t){const n=t.split(".");return()=>{let s=e;for(let o=0;o{St(n,t)});else if(xi(e))for(const n in e)St(e[n],t);return e}function Hl(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Re(()=>{e.isMounted=!0}),Gi(()=>{e.isUnmounting=!0}),e}const Oe=[Function,Array],Rl={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Oe,onEnter:Oe,onAfterEnter:Oe,onEnterCancelled:Oe,onBeforeLeave:Oe,onLeave:Oe,onAfterLeave:Oe,onLeaveCancelled:Oe,onBeforeAppear:Oe,onAppear:Oe,onAfterAppear:Oe,onAppearCancelled:Oe},setup(e,{slots:t}){const n=lo(),s=Hl();let o;return()=>{const i=t.default&&qi(t.default(),!0);if(!i||!i.length)return;let r=i[0];if(i.length>1){for(const N of i)if(N.type!==Ne){r=N;break}}const l=ce(e),{mode:c}=l;if(s.isLeaving)return ps(r);const u=Eo(r);if(!u)return ps(r);const h=Vs(u,l,s,n);Es(u,h);const v=n.subTree,g=v&&Eo(v);let k=!1;const{getTransitionKey:M}=u.type;if(M){const N=M();o===void 0?o=N:N!==o&&(o=N,k=!0)}if(g&&g.type!==Ne&&(!$t(u,g)||k)){const N=Vs(g,l,s,n);if(Es(g,N),c==="out-in")return s.isLeaving=!0,N.afterLeave=()=>{s.isLeaving=!1,n.update.active!==!1&&n.update()},ps(r);c==="in-out"&&u.type!==Ne&&(N.delayLeave=(Y,y,P)=>{const A=Wi(s,g);A[String(g.key)]=g,Y._leaveCb=()=>{y(),Y._leaveCb=void 0,delete h.delayedLeave},h.delayedLeave=P})}return r}}},Ki=Rl;function Wi(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Vs(e,t,n,s){const{appear:o,mode:i,persisted:r=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:u,onEnterCancelled:h,onBeforeLeave:v,onLeave:g,onAfterLeave:k,onLeaveCancelled:M,onBeforeAppear:N,onAppear:Y,onAfterAppear:y,onAppearCancelled:P}=t,A=String(e.key),q=Wi(n,e),ee=(I,Z)=>{I&&He(I,s,9,Z)},_e=(I,Z)=>{const J=Z[1];ee(I,Z),K(I)?I.every(re=>re.length<=1)&&J():I.length<=1&&J()},se={mode:i,persisted:r,beforeEnter(I){let Z=l;if(!n.isMounted)if(o)Z=N||l;else return;I._leaveCb&&I._leaveCb(!0);const J=q[A];J&&$t(e,J)&&J.el._leaveCb&&J.el._leaveCb(),ee(Z,[I])},enter(I){let Z=c,J=u,re=h;if(!n.isMounted)if(o)Z=Y||c,J=y||u,re=P||h;else return;let F=!1;const te=I._enterCb=D=>{F||(F=!0,D?ee(re,[I]):ee(J,[I]),se.delayedLeave&&se.delayedLeave(),I._enterCb=void 0)};Z?_e(Z,[I,te]):te()},leave(I,Z){const J=String(e.key);if(I._enterCb&&I._enterCb(!0),n.isUnmounting)return Z();ee(v,[I]);let re=!1;const F=I._leaveCb=te=>{re||(re=!0,Z(),te?ee(M,[I]):ee(k,[I]),I._leaveCb=void 0,q[J]===e&&delete q[J])};q[J]=e,g?_e(g,[I,F]):F()},clone(I){return Vs(I,t,n,s)}};return se}function ps(e){if(yn(e))return e=_t(e),e.children=null,e}function Eo(e){return yn(e)?e.children?e.children[0]:void 0:e}function Es(e,t){e.shapeFlag&6&&e.component?Es(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function qi(e,t=!1,n){let s=[],o=0;for(let i=0;i1)for(let i=0;i!!e.type.__asyncLoader;function Dl(e){X(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:s,delay:o=200,timeout:i,suspensible:r=!0,onError:l}=e;let c=null,u,h=0;const v=()=>(h++,c=null,g()),g=()=>{let k;return c||(k=c=t().catch(M=>{if(M=M instanceof Error?M:new Error(String(M)),l)return new Promise((N,Y)=>{l(M,()=>N(v()),()=>Y(M),h+1)});throw M}).then(M=>k!==c&&c?c:(M&&(M.__esModule||M[Symbol.toStringTag]==="Module")&&(M=M.default),u=M,M)))};return R({name:"AsyncComponentWrapper",__asyncLoader:g,get __asyncResolved(){return u},setup(){const k=we;if(u)return()=>vs(u,k);const M=P=>{c=null,bn(P,k,13,!s)};if(r&&k.suspense||qt)return g().then(P=>()=>vs(P,k)).catch(P=>(M(P),()=>s?T(s,{error:P}):null));const N=ue(!1),Y=ue(),y=ue(!!o);return o&&setTimeout(()=>{y.value=!1},o),i!=null&&setTimeout(()=>{if(!N.value&&!Y.value){const P=new Error(`Async component timed out after ${i}ms.`);M(P),Y.value=P}},i),g().then(()=>{N.value=!0,k.parent&&yn(k.parent.vnode)&&Zn(k.parent.update)}).catch(P=>{M(P),Y.value=P}),()=>{if(N.value&&u)return vs(u,k);if(Y.value&&s)return T(s,{error:Y.value});if(n&&!y.value)return T(n)}}})}function vs(e,t){const{ref:n,props:s,children:o,ce:i}=t.vnode,r=T(e,s,o);return r.ref=n,r.ce=i,delete t.vnode.ce,r}const yn=e=>e.type.__isKeepAlive;function zl(e,t){Yi(e,"a",t)}function jl(e,t){Yi(e,"da",t)}function Yi(e,t,n=we){const s=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(os(t,s,n),n){let o=n.parent;for(;o&&o.parent;)yn(o.parent.vnode)&&Ul(s,t,n,o),o=o.parent}}function Ul(e,t,n,s){const o=os(t,e,s,!0);pt(()=>{zs(s[t],o)},n)}function os(e,t,n=we,s=!1){if(n){const o=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...r)=>{if(n.isUnmounted)return;Qt(),Wt(n);const l=He(t,n,e,r);return Vt(),Jt(),l});return s?o.unshift(i):o.push(i),i}}const it=e=>(t,n=we)=>(!qt||e==="sp")&&os(e,(...s)=>t(...s),n),Kl=it("bm"),Re=it("m"),Wl=it("bu"),to=it("u"),Gi=it("bum"),pt=it("um"),ql=it("sp"),Yl=it("rtg"),Gl=it("rtc");function Ql(e,t=we){os("ec",e,t)}function w_(e,t){const n=ke;if(n===null)return e;const s=rs(n)||n.proxy,o=e.dirs||(e.dirs=[]);for(let i=0;it(r,l,void 0,i&&i[l]));else{const r=Object.keys(e);o=new Array(r.length);for(let l=0,c=r.length;lzn(t)?!(t.type===Ne||t.type===G&&!Xi(t.children)):!0)?e:null}const Ls=e=>e?ar(e)?rs(e)||e.proxy:Ls(e.parent):null,rn=$e(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Ls(e.parent),$root:e=>Ls(e.root),$emit:e=>e.emit,$options:e=>oo(e),$forceUpdate:e=>e.f||(e.f=()=>Zn(e.update)),$nextTick:e=>e.n||(e.n=eo.bind(e.proxy)),$watch:e=>Fl.bind(e)}),ms=(e,t)=>e!==me&&!e.__isScriptSetup&&oe(e,t),Jl={get({_:e},t){const{ctx:n,setupState:s,data:o,props:i,accessCache:r,type:l,appContext:c}=e;let u;if(t[0]!=="$"){const k=r[t];if(k!==void 0)switch(k){case 1:return s[t];case 2:return o[t];case 4:return n[t];case 3:return i[t]}else{if(ms(s,t))return r[t]=1,s[t];if(o!==me&&oe(o,t))return r[t]=2,o[t];if((u=e.propsOptions[0])&&oe(u,t))return r[t]=3,i[t];if(n!==me&&oe(n,t))return r[t]=4,n[t];Ms&&(r[t]=0)}}const h=rn[t];let v,g;if(h)return t==="$attrs"&&Be(e,"get",t),h(e);if((v=l.__cssModules)&&(v=v[t]))return v;if(n!==me&&oe(n,t))return r[t]=4,n[t];if(g=c.config.globalProperties,oe(g,t))return g[t]},set({_:e},t,n){const{data:s,setupState:o,ctx:i}=e;return ms(o,t)?(o[t]=n,!0):s!==me&&oe(s,t)?(s[t]=n,!0):oe(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:o,propsOptions:i}},r){let l;return!!n[r]||e!==me&&oe(e,r)||ms(t,r)||(l=i[0])&&oe(l,r)||oe(s,r)||oe(rn,r)||oe(o.config.globalProperties,r)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:oe(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let Ms=!0;function Xl(e){const t=oo(e),n=e.proxy,s=e.ctx;Ms=!1,t.beforeCreate&&Mo(t.beforeCreate,e,"bc");const{data:o,computed:i,methods:r,watch:l,provide:c,inject:u,created:h,beforeMount:v,mounted:g,beforeUpdate:k,updated:M,activated:N,deactivated:Y,beforeDestroy:y,beforeUnmount:P,destroyed:A,unmounted:q,render:ee,renderTracked:_e,renderTriggered:se,errorCaptured:I,serverPrefetch:Z,expose:J,inheritAttrs:re,components:F,directives:te,filters:D}=t;if(u&&Zl(u,s,null,e.appContext.config.unwrapInjectedRef),r)for(const be in r){const pe=r[be];X(pe)&&(s[be]=pe.bind(n))}if(o){const be=o.call(n,n);ge(be)&&(e.data=Xn(be))}if(Ms=!0,i)for(const be in i){const pe=i[be],mt=X(pe)?pe.bind(n,n):X(pe.get)?pe.get.bind(n,n):Ke,wn=!X(pe)&&X(pe.set)?pe.set.bind(n):Ke,gt=ie({get:mt,set:wn});Object.defineProperty(s,be,{enumerable:!0,configurable:!0,get:()=>gt.value,set:Ge=>gt.value=Ge})}if(l)for(const be in l)Zi(l[be],s,n,be);if(c){const be=X(c)?c.call(n):c;Reflect.ownKeys(be).forEach(pe=>{ns(pe,be[pe])})}h&&Mo(h,e,"c");function fe(be,pe){K(pe)?pe.forEach(mt=>be(mt.bind(n))):pe&&be(pe.bind(n))}if(fe(Kl,v),fe(Re,g),fe(Wl,k),fe(to,M),fe(zl,N),fe(jl,Y),fe(Ql,I),fe(Gl,_e),fe(Yl,se),fe(Gi,P),fe(pt,q),fe(ql,Z),K(J))if(J.length){const be=e.exposed||(e.exposed={});J.forEach(pe=>{Object.defineProperty(be,pe,{get:()=>n[pe],set:mt=>n[pe]=mt})})}else e.exposed||(e.exposed={});ee&&e.render===Ke&&(e.render=ee),re!=null&&(e.inheritAttrs=re),F&&(e.components=F),te&&(e.directives=te)}function Zl(e,t,n=Ke,s=!1){K(e)&&(e=Is(e));for(const o in e){const i=e[o];let r;ge(i)?"default"in i?r=We(i.from||o,i.default,!0):r=We(i.from||o):r=We(i),Ce(r)&&s?Object.defineProperty(t,o,{enumerable:!0,configurable:!0,get:()=>r.value,set:l=>r.value=l}):t[o]=r}}function Mo(e,t,n){He(K(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Zi(e,t,n,s){const o=s.includes(".")?Ui(n,s):()=>n[s];if(xe(e)){const i=t[e];X(i)&&Ze(o,i)}else if(X(e))Ze(o,e.bind(n));else if(ge(e))if(K(e))e.forEach(i=>Zi(i,t,n,s));else{const i=X(e.handler)?e.handler.bind(n):t[e.handler];X(i)&&Ze(o,i,e)}}function oo(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:o,optionsCache:i,config:{optionMergeStrategies:r}}=e.appContext,l=i.get(t);let c;return l?c=l:!o.length&&!n&&!s?c=t:(c={},o.length&&o.forEach(u=>Rn(c,u,r,!0)),Rn(c,t,r)),ge(t)&&i.set(t,c),c}function Rn(e,t,n,s=!1){const{mixins:o,extends:i}=t;i&&Rn(e,i,n,!0),o&&o.forEach(r=>Rn(e,r,n,!0));for(const r in t)if(!(s&&r==="expose")){const l=ec[r]||n&&n[r];e[r]=l?l(e[r],t[r]):t[r]}return e}const ec={data:Io,props:wt,emits:wt,methods:wt,computed:wt,beforeCreate:Te,created:Te,beforeMount:Te,mounted:Te,beforeUpdate:Te,updated:Te,beforeDestroy:Te,beforeUnmount:Te,destroyed:Te,unmounted:Te,activated:Te,deactivated:Te,errorCaptured:Te,serverPrefetch:Te,components:wt,directives:wt,watch:nc,provide:Io,inject:tc};function Io(e,t){return t?e?function(){return $e(X(e)?e.call(this,this):e,X(t)?t.call(this,this):t)}:t:e}function tc(e,t){return wt(Is(e),Is(t))}function Is(e){if(K(e)){const t={};for(let n=0;n0)&&!(r&16)){if(r&8){const h=e.vnode.dynamicProps;for(let v=0;v{c=!0;const[g,k]=tr(v,t,!0);$e(r,g),k&&l.push(...k)};!n&&t.mixins.length&&t.mixins.forEach(h),e.extends&&h(e.extends),e.mixins&&e.mixins.forEach(h)}if(!i&&!c)return ge(e)&&s.set(e,Nt),Nt;if(K(i))for(let h=0;h-1,k[1]=N<0||M-1||oe(k,"default"))&&l.push(v)}}}const u=[r,l];return ge(e)&&s.set(e,u),u}function Ao(e){return e[0]!=="$"}function No(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:e===null?"null":""}function Bo(e,t){return No(e)===No(t)}function Oo(e,t){return K(t)?t.findIndex(n=>Bo(n,e)):X(t)&&Bo(t,e)?0:-1}const nr=e=>e[0]==="_"||e==="$stable",io=e=>K(e)?e.map(ze):[ze(e)],ic=(e,t,n)=>{if(t._n)return t;const s=B((...o)=>io(t(...o)),n);return s._c=!1,s},sr=(e,t,n)=>{const s=e._ctx;for(const o in e){if(nr(o))continue;const i=e[o];if(X(i))t[o]=ic(o,i,s);else if(i!=null){const r=io(i);t[o]=()=>r}}},or=(e,t)=>{const n=io(t);e.slots.default=()=>n},rc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=ce(t),Bn(t,"_",n)):sr(t,e.slots={})}else e.slots={},t&&or(e,t);Bn(e.slots,is,1)},lc=(e,t,n)=>{const{vnode:s,slots:o}=e;let i=!0,r=me;if(s.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:($e(o,t),!n&&l===1&&delete o._):(i=!t.$stable,sr(t,o)),r=t}else t&&(or(e,t),r={default:1});if(i)for(const l in o)!nr(l)&&!(l in r)&&delete o[l]};function ir(){return{app:null,config:{isNativeTag:Hr,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let cc=0;function ac(e,t){return function(s,o=null){X(s)||(s=Object.assign({},s)),o!=null&&!ge(o)&&(o=null);const i=ir(),r=new Set;let l=!1;const c=i.app={_uid:cc++,_component:s,_props:o,_container:null,_context:i,_instance:null,version:Ec,get config(){return i.config},set config(u){},use(u,...h){return r.has(u)||(u&&X(u.install)?(r.add(u),u.install(c,...h)):X(u)&&(r.add(u),u(c,...h))),c},mixin(u){return i.mixins.includes(u)||i.mixins.push(u),c},component(u,h){return h?(i.components[u]=h,c):i.components[u]},directive(u,h){return h?(i.directives[u]=h,c):i.directives[u]},mount(u,h,v){if(!l){const g=T(s,o);return g.appContext=i,h&&t?t(g,u):e(g,u,v),l=!0,c._container=u,u.__vue_app__=c,rs(g.component)||g.component.proxy}},unmount(){l&&(e(null,c._container),delete c._container.__vue_app__)},provide(u,h){return i.provides[u]=h,c}};return c}}function Dn(e,t,n,s,o=!1){if(K(e)){e.forEach((g,k)=>Dn(g,t&&(K(t)?t[k]:t),n,s,o));return}if(Ht(s)&&!o)return;const i=s.shapeFlag&4?rs(s.component)||s.component.proxy:s.el,r=o?null:i,{i:l,r:c}=e,u=t&&t.r,h=l.refs===me?l.refs={}:l.refs,v=l.setupState;if(u!=null&&u!==c&&(xe(u)?(h[u]=null,oe(v,u)&&(v[u]=null)):Ce(u)&&(u.value=null)),X(c))dt(c,l,12,[r,h]);else{const g=xe(c),k=Ce(c);if(g||k){const M=()=>{if(e.f){const N=g?oe(v,c)?v[c]:h[c]:c.value;o?K(N)&&zs(N,i):K(N)?N.includes(i)||N.push(i):g?(h[c]=[i],oe(v,c)&&(v[c]=h[c])):(c.value=[i],e.k&&(h[e.k]=c.value))}else g?(h[c]=r,oe(v,c)&&(v[c]=r)):k&&(c.value=r,e.k&&(h[e.k]=r))};r?(M.id=-1,Ee(M,n)):M()}}}let lt=!1;const En=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",Ln=e=>e.nodeType===8;function uc(e){const{mt:t,p:n,o:{patchProp:s,createText:o,nextSibling:i,parentNode:r,remove:l,insert:c,createComment:u}}=e,h=(y,P)=>{if(!P.hasChildNodes()){n(null,y,P),Fn(),P._vnode=y;return}lt=!1,v(P.firstChild,y,null,null,null),Fn(),P._vnode=y,lt&&console.error("Hydration completed but contains mismatches.")},v=(y,P,A,q,ee,_e=!1)=>{const se=Ln(y)&&y.data==="[",I=()=>N(y,P,A,q,ee,se),{type:Z,ref:J,shapeFlag:re,patchFlag:F}=P;let te=y.nodeType;P.el=y,F===-2&&(_e=!1,P.dynamicChildren=null);let D=null;switch(Z){case Kt:te!==3?P.children===""?(c(P.el=o(""),r(y),y),D=y):D=I():(y.data!==P.children&&(lt=!0,y.data=P.children),D=i(y));break;case Ne:te!==8||se?D=I():D=i(y);break;case Rt:if(se&&(y=i(y),te=y.nodeType),te===1||te===3){D=y;const Me=!P.children.length;for(let fe=0;fe{_e=_e||!!P.dynamicChildren;const{type:se,props:I,patchFlag:Z,shapeFlag:J,dirs:re}=P,F=se==="input"&&re||se==="option";if(F||Z!==-1){if(re&&Je(P,null,A,"created"),I)if(F||!_e||Z&48)for(const D in I)(F&&D.endsWith("value")||gn(D)&&!sn(D))&&s(y,D,null,I[D],!1,void 0,A);else I.onClick&&s(y,"onClick",null,I.onClick,!1,void 0,A);let te;if((te=I&&I.onVnodeBeforeMount)&&Fe(te,A,P),re&&Je(P,null,A,"beforeMount"),((te=I&&I.onVnodeMounted)||re)&&zi(()=>{te&&Fe(te,A,P),re&&Je(P,null,A,"mounted")},q),J&16&&!(I&&(I.innerHTML||I.textContent))){let D=k(y.firstChild,P,y,A,q,ee,_e);for(;D;){lt=!0;const Me=D;D=D.nextSibling,l(Me)}}else J&8&&y.textContent!==P.children&&(lt=!0,y.textContent=P.children)}return y.nextSibling},k=(y,P,A,q,ee,_e,se)=>{se=se||!!P.dynamicChildren;const I=P.children,Z=I.length;for(let J=0;J{const{slotScopeIds:se}=P;se&&(ee=ee?ee.concat(se):se);const I=r(y),Z=k(i(y),P,I,A,q,ee,_e);return Z&&Ln(Z)&&Z.data==="]"?i(P.anchor=Z):(lt=!0,c(P.anchor=u("]"),I,Z),Z)},N=(y,P,A,q,ee,_e)=>{if(lt=!0,P.el=null,_e){const Z=Y(y);for(;;){const J=i(y);if(J&&J!==Z)l(J);else break}}const se=i(y),I=r(y);return l(y),n(null,P,I,se,A,q,En(I),ee),se},Y=y=>{let P=0;for(;y;)if(y=i(y),y&&Ln(y)&&(y.data==="["&&P++,y.data==="]")){if(P===0)return i(y);P--}return y};return[h,v]}const Ee=zi;function fc(e){return dc(e,uc)}function dc(e,t){const n=Kr();n.__VUE__=!0;const{insert:s,remove:o,patchProp:i,createElement:r,createText:l,createComment:c,setText:u,setElementText:h,parentNode:v,nextSibling:g,setScopeId:k=Ke,insertStaticContent:M}=e,N=(a,f,p,w=null,x=null,S=null,L=!1,C=null,V=!!f.dynamicChildren)=>{if(a===f)return;a&&!$t(a,f)&&(w=kn(a),Ge(a,x,S,!0),a=null),f.patchFlag===-2&&(V=!1,f.dynamicChildren=null);const{type:$,ref:z,shapeFlag:H}=f;switch($){case Kt:Y(a,f,p,w);break;case Ne:y(a,f,p,w);break;case Rt:a==null&&P(f,p,w,L);break;case G:F(a,f,p,w,x,S,L,C,V);break;default:H&1?ee(a,f,p,w,x,S,L,C,V):H&6?te(a,f,p,w,x,S,L,C,V):(H&64||H&128)&&$.process(a,f,p,w,x,S,L,C,V,Mt)}z!=null&&x&&Dn(z,a&&a.ref,S,f||a,!f)},Y=(a,f,p,w)=>{if(a==null)s(f.el=l(f.children),p,w);else{const x=f.el=a.el;f.children!==a.children&&u(x,f.children)}},y=(a,f,p,w)=>{a==null?s(f.el=c(f.children||""),p,w):f.el=a.el},P=(a,f,p,w)=>{[a.el,a.anchor]=M(a.children,f,p,w,a.el,a.anchor)},A=({el:a,anchor:f},p,w)=>{let x;for(;a&&a!==f;)x=g(a),s(a,p,w),a=x;s(f,p,w)},q=({el:a,anchor:f})=>{let p;for(;a&&a!==f;)p=g(a),o(a),a=p;o(f)},ee=(a,f,p,w,x,S,L,C,V)=>{L=L||f.type==="svg",a==null?_e(f,p,w,x,S,L,C,V):Z(a,f,x,S,L,C,V)},_e=(a,f,p,w,x,S,L,C)=>{let V,$;const{type:z,props:H,shapeFlag:j,transition:W,dirs:ne}=a;if(V=a.el=r(a.type,S,H&&H.is,H),j&8?h(V,a.children):j&16&&I(a.children,V,null,w,x,S&&z!=="foreignObject",L,C),ne&&Je(a,null,w,"created"),H){for(const de in H)de!=="value"&&!sn(de)&&i(V,de,null,H[de],S,a.children,w,x,nt);"value"in H&&i(V,"value",null,H.value),($=H.onVnodeBeforeMount)&&Fe($,w,a)}se(V,a,a.scopeId,L,w),ne&&Je(a,null,w,"beforeMount");const ve=(!x||x&&!x.pendingBranch)&&W&&!W.persisted;ve&&W.beforeEnter(V),s(V,f,p),(($=H&&H.onVnodeMounted)||ve||ne)&&Ee(()=>{$&&Fe($,w,a),ve&&W.enter(V),ne&&Je(a,null,w,"mounted")},x)},se=(a,f,p,w,x)=>{if(p&&k(a,p),w)for(let S=0;S{for(let $=V;${const C=f.el=a.el;let{patchFlag:V,dynamicChildren:$,dirs:z}=f;V|=a.patchFlag&16;const H=a.props||me,j=f.props||me;let W;p&&bt(p,!1),(W=j.onVnodeBeforeUpdate)&&Fe(W,p,f,a),z&&Je(f,a,p,"beforeUpdate"),p&&bt(p,!0);const ne=x&&f.type!=="foreignObject";if($?J(a.dynamicChildren,$,C,p,w,ne,S):L||pe(a,f,C,null,p,w,ne,S,!1),V>0){if(V&16)re(C,f,H,j,p,w,x);else if(V&2&&H.class!==j.class&&i(C,"class",null,j.class,x),V&4&&i(C,"style",H.style,j.style,x),V&8){const ve=f.dynamicProps;for(let de=0;de{W&&Fe(W,p,f,a),z&&Je(f,a,p,"updated")},w)},J=(a,f,p,w,x,S,L)=>{for(let C=0;C{if(p!==w){if(p!==me)for(const C in p)!sn(C)&&!(C in w)&&i(a,C,p[C],null,L,f.children,x,S,nt);for(const C in w){if(sn(C))continue;const V=w[C],$=p[C];V!==$&&C!=="value"&&i(a,C,$,V,L,f.children,x,S,nt)}"value"in w&&i(a,"value",p.value,w.value)}},F=(a,f,p,w,x,S,L,C,V)=>{const $=f.el=a?a.el:l(""),z=f.anchor=a?a.anchor:l("");let{patchFlag:H,dynamicChildren:j,slotScopeIds:W}=f;W&&(C=C?C.concat(W):W),a==null?(s($,p,w),s(z,p,w),I(f.children,p,z,x,S,L,C,V)):H>0&&H&64&&j&&a.dynamicChildren?(J(a.dynamicChildren,j,p,x,S,L,C),(f.key!=null||x&&f===x.subTree)&&rr(a,f,!0)):pe(a,f,p,z,x,S,L,C,V)},te=(a,f,p,w,x,S,L,C,V)=>{f.slotScopeIds=C,a==null?f.shapeFlag&512?x.ctx.activate(f,p,w,L,V):D(f,p,w,x,S,L,V):Me(a,f,V)},D=(a,f,p,w,x,S,L)=>{const C=a.component=xc(a,w,x);if(yn(a)&&(C.ctx.renderer=Mt),wc(C),C.asyncDep){if(x&&x.registerDep(C,fe),!a.el){const V=C.subTree=T(Ne);y(null,V,f,p)}return}fe(C,a,f,p,x,S,L)},Me=(a,f,p)=>{const w=f.component=a.component;if(Nl(a,f,p))if(w.asyncDep&&!w.asyncResolved){be(w,f,p);return}else w.next=f,Vl(w.update),w.update();else f.el=a.el,w.vnode=f},fe=(a,f,p,w,x,S,L)=>{const C=()=>{if(a.isMounted){let{next:z,bu:H,u:j,parent:W,vnode:ne}=a,ve=z,de;bt(a,!1),z?(z.el=ne.el,be(a,z,L)):z=ne,H&&In(H),(de=z.props&&z.props.onVnodeBeforeUpdate)&&Fe(de,W,z,ne),bt(a,!0);const ye=_s(a),De=a.subTree;a.subTree=ye,N(De,ye,v(De.el),kn(De),a,x,S),z.el=ye.el,ve===null&&Bl(a,ye.el),j&&Ee(j,x),(de=z.props&&z.props.onVnodeUpdated)&&Ee(()=>Fe(de,W,z,ne),x)}else{let z;const{el:H,props:j}=f,{bm:W,m:ne,parent:ve}=a,de=Ht(f);if(bt(a,!1),W&&In(W),!de&&(z=j&&j.onVnodeBeforeMount)&&Fe(z,ve,f),bt(a,!0),H&&ds){const ye=()=>{a.subTree=_s(a),ds(H,a.subTree,a,x,null)};de?f.type.__asyncLoader().then(()=>!a.isUnmounted&&ye()):ye()}else{const ye=a.subTree=_s(a);N(null,ye,p,w,a,x,S),f.el=ye.el}if(ne&&Ee(ne,x),!de&&(z=j&&j.onVnodeMounted)){const ye=f;Ee(()=>Fe(z,ve,ye),x)}(f.shapeFlag&256||ve&&Ht(ve.vnode)&&ve.vnode.shapeFlag&256)&&a.a&&Ee(a.a,x),a.isMounted=!0,f=p=w=null}},V=a.effect=new Ws(C,()=>Zn($),a.scope),$=a.update=()=>V.run();$.id=a.uid,bt(a,!0),$()},be=(a,f,p)=>{f.component=a;const w=a.vnode.props;a.vnode=f,a.next=null,oc(a,f.props,w,p),lc(a,f.children,p),Qt(),To(),Jt()},pe=(a,f,p,w,x,S,L,C,V=!1)=>{const $=a&&a.children,z=a?a.shapeFlag:0,H=f.children,{patchFlag:j,shapeFlag:W}=f;if(j>0){if(j&128){wn($,H,p,w,x,S,L,C,V);return}else if(j&256){mt($,H,p,w,x,S,L,C,V);return}}W&8?(z&16&&nt($,x,S),H!==$&&h(p,H)):z&16?W&16?wn($,H,p,w,x,S,L,C,V):nt($,x,S,!0):(z&8&&h(p,""),W&16&&I(H,p,w,x,S,L,C,V))},mt=(a,f,p,w,x,S,L,C,V)=>{a=a||Nt,f=f||Nt;const $=a.length,z=f.length,H=Math.min($,z);let j;for(j=0;jz?nt(a,x,S,!0,!1,H):I(f,p,w,x,S,L,C,V,H)},wn=(a,f,p,w,x,S,L,C,V)=>{let $=0;const z=f.length;let H=a.length-1,j=z-1;for(;$<=H&&$<=j;){const W=a[$],ne=f[$]=V?ut(f[$]):ze(f[$]);if($t(W,ne))N(W,ne,p,null,x,S,L,C,V);else break;$++}for(;$<=H&&$<=j;){const W=a[H],ne=f[j]=V?ut(f[j]):ze(f[j]);if($t(W,ne))N(W,ne,p,null,x,S,L,C,V);else break;H--,j--}if($>H){if($<=j){const W=j+1,ne=Wj)for(;$<=H;)Ge(a[$],x,S,!0),$++;else{const W=$,ne=$,ve=new Map;for($=ne;$<=j;$++){const Ie=f[$]=V?ut(f[$]):ze(f[$]);Ie.key!=null&&ve.set(Ie.key,$)}let de,ye=0;const De=j-ne+1;let It=!1,mo=0;const Zt=new Array(De);for($=0;$=De){Ge(Ie,x,S,!0);continue}let Qe;if(Ie.key!=null)Qe=ve.get(Ie.key);else for(de=ne;de<=j;de++)if(Zt[de-ne]===0&&$t(Ie,f[de])){Qe=de;break}Qe===void 0?Ge(Ie,x,S,!0):(Zt[Qe-ne]=$+1,Qe>=mo?mo=Qe:It=!0,N(Ie,f[Qe],p,null,x,S,L,C,V),ye++)}const go=It?hc(Zt):Nt;for(de=go.length-1,$=De-1;$>=0;$--){const Ie=ne+$,Qe=f[Ie],bo=Ie+1{const{el:S,type:L,transition:C,children:V,shapeFlag:$}=a;if($&6){gt(a.component.subTree,f,p,w);return}if($&128){a.suspense.move(f,p,w);return}if($&64){L.move(a,f,p,Mt);return}if(L===G){s(S,f,p);for(let H=0;HC.enter(S),x);else{const{leave:H,delayLeave:j,afterLeave:W}=C,ne=()=>s(S,f,p),ve=()=>{H(S,()=>{ne(),W&&W()})};j?j(S,ne,ve):ve()}else s(S,f,p)},Ge=(a,f,p,w=!1,x=!1)=>{const{type:S,props:L,ref:C,children:V,dynamicChildren:$,shapeFlag:z,patchFlag:H,dirs:j}=a;if(C!=null&&Dn(C,null,p,a,!0),z&256){f.ctx.deactivate(a);return}const W=z&1&&j,ne=!Ht(a);let ve;if(ne&&(ve=L&&L.onVnodeBeforeUnmount)&&Fe(ve,f,a),z&6)Mr(a.component,p,w);else{if(z&128){a.suspense.unmount(p,w);return}W&&Je(a,null,f,"beforeUnmount"),z&64?a.type.remove(a,f,p,x,Mt,w):$&&(S!==G||H>0&&H&64)?nt($,f,p,!1,!0):(S===G&&H&384||!x&&z&16)&&nt(V,f,p),w&&po(a)}(ne&&(ve=L&&L.onVnodeUnmounted)||W)&&Ee(()=>{ve&&Fe(ve,f,a),W&&Je(a,null,f,"unmounted")},p)},po=a=>{const{type:f,el:p,anchor:w,transition:x}=a;if(f===G){Lr(p,w);return}if(f===Rt){q(a);return}const S=()=>{o(p),x&&!x.persisted&&x.afterLeave&&x.afterLeave()};if(a.shapeFlag&1&&x&&!x.persisted){const{leave:L,delayLeave:C}=x,V=()=>L(p,S);C?C(a.el,S,V):V()}else S()},Lr=(a,f)=>{let p;for(;a!==f;)p=g(a),o(a),a=p;o(f)},Mr=(a,f,p)=>{const{bum:w,scope:x,update:S,subTree:L,um:C}=a;w&&In(w),x.stop(),S&&(S.active=!1,Ge(L,a,f,p)),C&&Ee(C,f),Ee(()=>{a.isUnmounted=!0},f),f&&f.pendingBranch&&!f.isUnmounted&&a.asyncDep&&!a.asyncResolved&&a.suspenseId===f.pendingId&&(f.deps--,f.deps===0&&f.resolve())},nt=(a,f,p,w=!1,x=!1,S=0)=>{for(let L=S;La.shapeFlag&6?kn(a.component.subTree):a.shapeFlag&128?a.suspense.next():g(a.anchor||a.el),vo=(a,f,p)=>{a==null?f._vnode&&Ge(f._vnode,null,null,!0):N(f._vnode||null,a,f,null,null,null,p),To(),Fn(),f._vnode=a},Mt={p:N,um:Ge,m:gt,r:po,mt:D,mc:I,pc:pe,pbc:J,n:kn,o:e};let fs,ds;return t&&([fs,ds]=t(Mt)),{render:vo,hydrate:fs,createApp:ac(vo,fs)}}function bt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function rr(e,t,n=!1){const s=e.children,o=t.children;if(K(s)&&K(o))for(let i=0;i>1,e[n[l]]0&&(t[s]=n[i-1]),n[i]=s)}}for(i=n.length,r=n[i-1];i-- >0;)n[i]=r,r=t[r];return n}const _c=e=>e.__isTeleport,G=Symbol(void 0),Kt=Symbol(void 0),Ne=Symbol(void 0),Rt=Symbol(void 0),ln=[];let Ue=null;function d(e=!1){ln.push(Ue=e?null:[])}function pc(){ln.pop(),Ue=ln[ln.length-1]||null}let pn=1;function Fo(e){pn+=e}function lr(e){return e.dynamicChildren=pn>0?Ue||Nt:null,pc(),pn>0&&Ue&&Ue.push(e),e}function m(e,t,n,s,o,i){return lr(b(e,t,n,s,o,i,!0))}function Q(e,t,n,s,o){return lr(T(e,t,n,s,o,!0))}function zn(e){return e?e.__v_isVNode===!0:!1}function $t(e,t){return e.type===t.type&&e.key===t.key}const is="__vInternal",cr=({key:e})=>e!=null?e:null,An=({ref:e,ref_key:t,ref_for:n})=>e!=null?xe(e)||Ce(e)||X(e)?{i:ke,r:e,k:t,f:!!n}:e:null;function b(e,t=null,n=null,s=0,o=null,i=e===G?0:1,r=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&cr(t),ref:t&&An(t),scopeId:ts,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:s,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:ke};return l?(ro(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=xe(n)?8:16),pn>0&&!r&&Ue&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&Ue.push(c),c}const T=vc;function vc(e,t=null,n=null,s=0,o=null,i=!1){if((!e||e===Qi)&&(e=Ne),zn(e)){const l=_t(e,t,!0);return n&&ro(l,n),pn>0&&!i&&Ue&&(l.shapeFlag&6?Ue[Ue.indexOf(e)]=l:Ue.push(l)),l.patchFlag|=-2,l}if(Sc(e)&&(e=e.__vccOpts),t){t=mc(t);let{class:l,style:c}=t;l&&!xe(l)&&(t.class=he(l)),ge(c)&&(Mi(c)&&!K(c)&&(c=$e({},c)),t.style=mn(c))}const r=xe(e)?1:Ol(e)?128:_c(e)?64:ge(e)?4:X(e)?2:0;return b(e,t,n,s,o,r,i,!0)}function mc(e){return e?Mi(e)||is in e?$e({},e):e:null}function _t(e,t,n=!1){const{props:s,ref:o,patchFlag:i,children:r}=e,l=t?Nn(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&cr(l),ref:t&&t.ref?n&&o?K(o)?o.concat(An(t)):[o,An(t)]:An(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:r,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==G?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&_t(e.ssContent),ssFallback:e.ssFallback&&_t(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx}}function Ve(e=" ",t=0){return T(Kt,null,e,t)}function gc(e,t){const n=T(Rt,null,e);return n.staticCount=t,n}function U(e="",t=!1){return t?(d(),Q(Ne,null,e)):T(Ne,null,e)}function ze(e){return e==null||typeof e=="boolean"?T(Ne):K(e)?T(G,null,e.slice()):typeof e=="object"?ut(e):T(Kt,null,String(e))}function ut(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:_t(e)}function ro(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(K(t))n=16;else if(typeof t=="object")if(s&65){const o=t.default;o&&(o._c&&(o._d=!1),ro(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!(is in t)?t._ctx=ke:o===3&&ke&&(ke.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else X(t)?(t={default:t,_ctx:ke},n=32):(t=String(t),s&64?(n=16,t=[Ve(t)]):n=8);e.children=t,e.shapeFlag|=n}function Nn(...e){const t={};for(let n=0;nwe||ke,Wt=e=>{we=e,e.scope.on()},Vt=()=>{we&&we.scope.off(),we=null};function ar(e){return e.vnode.shapeFlag&4}let qt=!1;function wc(e,t=!1){qt=t;const{props:n,children:s}=e.vnode,o=ar(e);sc(e,n,o,t),rc(e,s);const i=o?kc(e,t):void 0;return qt=!1,i}function kc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=on(new Proxy(e.ctx,Jl));const{setup:s}=n;if(s){const o=e.setupContext=s.length>1?Pc(e):null;Wt(e),Qt();const i=dt(s,e,0,[e.props,o]);if(Jt(),Vt(),bi(i)){if(i.then(Vt,Vt),t)return i.then(r=>{Ho(e,r,t)}).catch(r=>{bn(r,e,0)});e.asyncDep=i}else Ho(e,i,t)}else ur(e,t)}function Ho(e,t,n){X(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:ge(t)&&(e.setupState=Bi(t)),ur(e,n)}let Ro;function ur(e,t,n){const s=e.type;if(!e.render){if(!t&&Ro&&!s.render){const o=s.template||oo(e).template;if(o){const{isCustomElement:i,compilerOptions:r}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,u=$e($e({isCustomElement:i,delimiters:l},r),c);s.render=Ro(o,u)}}e.render=s.render||Ke}Wt(e),Qt(),Xl(e),Jt(),Vt()}function $c(e){return new Proxy(e.attrs,{get(t,n){return Be(e,"get","$attrs"),t[n]}})}function Pc(e){const t=s=>{e.exposed=s||{}};let n;return{get attrs(){return n||(n=$c(e))},slots:e.slots,emit:e.emit,expose:t}}function rs(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Bi(on(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in rn)return rn[n](e)},has(t,n){return n in t||n in rn}}))}function Cc(e,t=!0){return X(e)?e.displayName||e.name:e.name||t&&e.__name}function Sc(e){return X(e)&&"__vccOpts"in e}const ie=(e,t)=>Cl(e,t,qt);function jn(e,t,n){const s=arguments.length;return s===2?ge(t)&&!K(t)?zn(t)?T(e,null,[t]):T(e,t):T(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&zn(n)&&(n=[n]),T(e,t,n))}const Tc=Symbol(""),Vc=()=>We(Tc),Ec="3.2.45",Lc="http://www.w3.org/2000/svg",Pt=typeof document<"u"?document:null,Do=Pt&&Pt.createElement("template"),Mc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const o=t?Pt.createElementNS(Lc,e):Pt.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&o.setAttribute("multiple",s.multiple),o},createText:e=>Pt.createTextNode(e),createComment:e=>Pt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Pt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,o,i){const r=n?n.previousSibling:t.lastChild;if(o&&(o===i||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===i||!(o=o.nextSibling)););else{Do.innerHTML=s?`${e}`:e;const l=Do.content;if(s){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[r?r.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Ic(e,t,n){const s=e._vtc;s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Ac(e,t,n){const s=e.style,o=xe(n);if(n&&!o){for(const i in n)Ns(s,i,n[i]);if(t&&!xe(t))for(const i in t)n[i]==null&&Ns(s,i,"")}else{const i=s.display;o?t!==n&&(s.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(s.display=i)}}const zo=/\s*!important$/;function Ns(e,t,n){if(K(n))n.forEach(s=>Ns(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=Nc(e,t);zo.test(n)?e.setProperty(Gt(s),n.replace(zo,""),"important"):e[s]=n}}const jo=["Webkit","Moz","ms"],gs={};function Nc(e,t){const n=gs[t];if(n)return n;let s=et(t);if(s!=="filter"&&s in e)return gs[t]=s;s=Qn(s);for(let o=0;obs||(Dc.then(()=>bs=0),bs=Date.now());function jc(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;He(Uc(s,n.value),t,5,[s])};return n.value=e,n.attached=zc(),n}function Uc(e,t){if(K(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>o=>!o._stopped&&s&&s(o))}else return t}const Wo=/^on[a-z]/,Kc=(e,t,n,s,o=!1,i,r,l,c)=>{t==="class"?Ic(e,s,o):t==="style"?Ac(e,n,s):gn(t)?Ds(t)||Hc(e,t,n,s,r):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Wc(e,t,s,o))?Oc(e,t,s,i,r,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Bc(e,t,s,o))};function Wc(e,t,n,s){return s?!!(t==="innerHTML"||t==="textContent"||t in e&&Wo.test(t)&&X(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Wo.test(t)&&xe(n)?!1:t in e}function qc(e){const t=lo();if(!t)return;const n=t.ut=(o=e(t.proxy))=>{Array.from(document.querySelectorAll(`[data-v-owner="${t.uid}"]`)).forEach(i=>Os(i,o))},s=()=>{const o=e(t.proxy);Bs(t.subTree,o),n(o)};ji(s),Re(()=>{const o=new MutationObserver(s);o.observe(t.subTree.el.parentNode,{childList:!0}),pt(()=>o.disconnect())})}function Bs(e,t){if(e.shapeFlag&128){const n=e.suspense;e=n.activeBranch,n.pendingBranch&&!n.isHydrating&&n.effects.push(()=>{Bs(n.activeBranch,t)})}for(;e.component;)e=e.component.subTree;if(e.shapeFlag&1&&e.el)Os(e.el,t);else if(e.type===G)e.children.forEach(n=>Bs(n,t));else if(e.type===Rt){let{el:n,anchor:s}=e;for(;n&&(Os(n,t),n!==s);)n=n.nextSibling}}function Os(e,t){if(e.nodeType===1){const n=e.style;for(const s in t)n.setProperty(`--${s}`,t[s])}}const ct="transition",en="animation",ls=(e,{slots:t})=>jn(Ki,Yc(e),t);ls.displayName="Transition";const fr={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};ls.props=$e({},Ki.props,fr);const yt=(e,t=[])=>{K(e)?e.forEach(n=>n(...t)):e&&e(...t)},qo=e=>e?K(e)?e.some(t=>t.length>1):e.length>1:!1;function Yc(e){const t={};for(const F in e)F in fr||(t[F]=e[F]);if(e.css===!1)return t;const{name:n="v",type:s,duration:o,enterFromClass:i=`${n}-enter-from`,enterActiveClass:r=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:u=r,appearToClass:h=l,leaveFromClass:v=`${n}-leave-from`,leaveActiveClass:g=`${n}-leave-active`,leaveToClass:k=`${n}-leave-to`}=e,M=Gc(o),N=M&&M[0],Y=M&&M[1],{onBeforeEnter:y,onEnter:P,onEnterCancelled:A,onLeave:q,onLeaveCancelled:ee,onBeforeAppear:_e=y,onAppear:se=P,onAppearCancelled:I=A}=t,Z=(F,te,D)=>{xt(F,te?h:l),xt(F,te?u:r),D&&D()},J=(F,te)=>{F._isLeaving=!1,xt(F,v),xt(F,k),xt(F,g),te&&te()},re=F=>(te,D)=>{const Me=F?se:P,fe=()=>Z(te,F,D);yt(Me,[te,fe]),Yo(()=>{xt(te,F?c:i),at(te,F?h:l),qo(Me)||Go(te,s,N,fe)})};return $e(t,{onBeforeEnter(F){yt(y,[F]),at(F,i),at(F,r)},onBeforeAppear(F){yt(_e,[F]),at(F,c),at(F,u)},onEnter:re(!1),onAppear:re(!0),onLeave(F,te){F._isLeaving=!0;const D=()=>J(F,te);at(F,v),Xc(),at(F,g),Yo(()=>{!F._isLeaving||(xt(F,v),at(F,k),qo(q)||Go(F,s,Y,D))}),yt(q,[F,D])},onEnterCancelled(F){Z(F,!1),yt(A,[F])},onAppearCancelled(F){Z(F,!0),yt(I,[F])},onLeaveCancelled(F){J(F),yt(ee,[F])}})}function Gc(e){if(e==null)return null;if(ge(e))return[ys(e.enter),ys(e.leave)];{const t=ys(e);return[t,t]}}function ys(e){return fn(e)}function at(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function xt(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Yo(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Qc=0;function Go(e,t,n,s){const o=e._endId=++Qc,i=()=>{o===e._endId&&s()};if(n)return setTimeout(i,n);const{type:r,timeout:l,propCount:c}=Jc(e,t);if(!r)return s();const u=r+"end";let h=0;const v=()=>{e.removeEventListener(u,g),i()},g=k=>{k.target===e&&++h>=c&&v()};setTimeout(()=>{h(n[M]||"").split(", "),o=s(`${ct}Delay`),i=s(`${ct}Duration`),r=Qo(o,i),l=s(`${en}Delay`),c=s(`${en}Duration`),u=Qo(l,c);let h=null,v=0,g=0;t===ct?r>0&&(h=ct,v=r,g=i.length):t===en?u>0&&(h=en,v=u,g=c.length):(v=Math.max(r,u),h=v>0?r>u?ct:en:null,g=h?h===ct?i.length:c.length:0);const k=h===ct&&/\b(transform|all)(,|$)/.test(s(`${ct}Property`).toString());return{type:h,timeout:v,propCount:g,hasTransform:k}}function Qo(e,t){for(;e.lengthJo(n)+Jo(e[s])))}function Jo(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function Xc(){return document.body.offsetHeight}const Xo=e=>{const t=e.props["onUpdate:modelValue"]||!1;return K(t)?n=>In(t,n):t};function Zc(e){e.target.composing=!0}function Zo(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const k_={created(e,{modifiers:{lazy:t,trim:n,number:s}},o){e._assign=Xo(o);const i=s||o.props&&o.props.type==="number";At(e,t?"change":"input",r=>{if(r.target.composing)return;let l=e.value;n&&(l=l.trim()),i&&(l=fn(l)),e._assign(l)}),n&&At(e,"change",()=>{e.value=e.value.trim()}),t||(At(e,"compositionstart",Zc),At(e,"compositionend",Zo),At(e,"change",Zo))},mounted(e,{value:t}){e.value=t==null?"":t},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:o}},i){if(e._assign=Xo(i),e.composing||document.activeElement===e&&e.type!=="range"&&(n||s&&e.value.trim()===t||(o||e.type==="number")&&fn(e.value)===t))return;const r=t==null?"":t;e.value!==r&&(e.value=r)}},ea=["ctrl","shift","alt","meta"],ta={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>ea.some(n=>e[`${n}Key`]&&!t.includes(n))},na=(e,t)=>(n,...s)=>{for(let o=0;o{tn(e,!1)}):tn(e,t))},beforeUnmount(e,{value:t}){tn(e,t)}};function tn(e,t){e.style.display=t?e._vod:"none"}const sa=$e({patchProp:Kc},Mc);let xs,ei=!1;function oa(){return xs=ei?xs:fc(sa),ei=!0,xs}const ia=(...e)=>{const t=oa().createApp(...e),{mount:n}=t;return t.mount=s=>{const o=ra(s);if(o)return n(o,!0,o instanceof SVGElement)},t};function ra(e){return xe(e)?document.querySelector(e):e}const O=(e,t)=>{const n=e.__vccOpts||e;for(const[s,o]of t)n[s]=o;return n},la="modulepreload",ca=function(e){return"/ybhdsg-zhs/"+e},ti={},dr=function(t,n,s){if(!n||n.length===0)return t();const o=document.getElementsByTagName("link");return Promise.all(n.map(i=>{if(i=ca(i),i in ti)return;ti[i]=!0;const r=i.endsWith(".css"),l=r?'[rel="stylesheet"]':"";if(!!s)for(let h=o.length-1;h>=0;h--){const v=o[h];if(v.href===i&&(!r||v.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${l}`))return;const u=document.createElement("link");if(u.rel=r?"stylesheet":la,r||(u.as="script",u.crossOrigin=""),u.href=i,document.head.appendChild(u),r)return new Promise((h,v)=>{u.addEventListener("load",h),u.addEventListener("error",()=>v(new Error(`Unable to preload CSS for ${i}`)))})})).then(()=>t())};const aa=R({__name:"VPBadge",props:{text:null,type:null},setup(e){return(t,n)=>{var s;return d(),m("span",{class:he(["VPBadge",(s=e.type)!=null?s:"tip"])},[E(t.$slots,"default",{},()=>[Ve(ae(e.text),1)],!0)],2)}}});const ua=O(aa,[["__scopeId","data-v-8d21f6c9"]]),fa=JSON.parse('{"lang":"en-US","title":"\u54D1\u5DF4\u6E56\u5927\u6C34\u602A","titleTemplate":"\u6211\u7684\u7F51\u7AD9","description":"A VitePress site","base":"/ybhdsg-zhs/","head":[],"appearance":true,"themeConfig":{"algolia":{"appId":"6CNZ25L7YU","apiKey":"e53c455f0ac0c08324e6940af2916937","indexName":"ybhdsg","placeholder":"\u8BF7\u8F93\u5165\u5173\u952E\u8BCD","buttonText":"\u641C\u7D22"},"outline":[2,6],"outlineTitle":"\u76EE\u5F55","logo":"/cat.svg","siteTitle":"\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u5C71\u6C34\u6E38\u8BB0","docFooter":{"prev":"\u4E0A\u4E00\u9875","next":"\u4E0B\u4E00\u9875"},"socialLinks":[{"icon":"github","link":"https://github.com/Ybhdsg123/ybhdsg-zhs"},{"icon":{"svg":""},"link":"https://juejin.cn/user/761326894326280/posts"}],"nav":[{"text":"Threejs","link":"../pages/threejs/threejs.md"},{"text":"cancvs","items":[{"text":"\u57FA\u7840\u77E5\u8BC6","link":"../pages/canvas/index.md"},{"text":"\u5C0Fdemo","link":"../pages/canvas/demo.md"}]},{"text":"\u9762\u8BD5\u76F8\u5173","items":[{"text":"\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE","link":"/pages/interviews/networkrotocols"},{"text":"\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B","link":"/pages/interviews/browser"},{"text":"Webpack\u9762\u8BD5\u9898","link":"/pages/interviews/webpack"},{"text":"html\u65B9\u9762","link":"/pages/interviews/html"},{"text":"css\u65B9\u9762","link":"/pages/interviews/css"},{"text":"js\u65B9\u9762","link":"/pages/interviews/js"},{"text":"http\u65B9\u9762","link":"/pages/interviews/http"},{"text":"git\u65B9\u9762","link":"/pages/interviews/git"},{"text":"vue\u65B9\u9762","link":"/pages/interviews/vue"},{"text":"\u4E8B\u4EF6\u5FAA\u73AF","link":"/pages/interviews/eventLoop"}]},{"text":"vue3\u540E\u53F0\u7CFB\u7EDF","items":[{"text":"\u642D\u5EFA\u8FC7\u7A0B","link":"/pages/vue3-element-admin/anxinPC"},{"text":"element plus\u7EC4\u4EF6","link":"/pages/vue3-element-admin/epComponents"}]},{"text":"\u5E38\u89C1\u624B\u5199\u51FD\u6570","link":"../pages/interviews/handwriteFn.md"},{"text":"node","link":"../pages/node/"},{"text":"rollup\u6253\u5305","link":"../pages/rollup-build/rollup.md"},{"text":"\u7B80\u4E66","link":"https://www.jianshu.com/u/ac97502b9e92"}],"sidebar":[{"text":"vue3\u5B9D\u85CF\u{1F3F4}\u200D\u2620\uFE0F","items":[{"text":"vue\u5E38\u7528\u7EC4\u4EF6","link":"/pages/vue3Treasures/vueComponents"},{"text":"vue\u5E38\u89C1\u6280\u5DE7","link":"/pages/vue3Treasures/vueCommonTips"},{"text":"vue\u5E38\u7528\u6307\u4EE4","link":"/pages/vue3Treasures/vueDirectives"}]},{"text":"\u5DE5\u5177\u51FD\u6570\u{1F527}","items":[{"text":"\u5E38\u7528\u7684\u65B9\u6CD5","link":"/pages/toolFun/tools"},{"text":"\u6587\u4EF6\u76F8\u5173","link":"/pages/toolFun/download"},{"text":"\u65F6\u95F4\u76F8\u5173","link":"/pages/toolFun/timeTool"},{"text":"\u56FE\u7247\u76F8\u5173","link":"/pages/toolFun/imgTool"}]},{"text":"\u6742\u4E03\u6742\u516B","items":[{"text":"\u7CFB\u5217\u4E00","link":"/pages/lotsOfDifferent/demo1/"}]},{"text":"js\u76F8\u5173","items":[{"text":"this\u7684\u6307\u5411","link":"/pages/base/js/this.md"},{"text":"\u539F\u578B\u4E0E\u539F\u578B\u94FE","link":"/pages/base/js/prototype.md"},{"text":"JavaScript","link":"/pages/base/js/"},{"text":"\u7B97\u6CD5","link":"/pages/base/leetcode/"},{"text":"\u6587\u4EF6\u4E0A\u4F20\uFF08\u539F\u751F\uFF09","link":"/pages/base/uploadFile"}]},{"text":"css","items":[{"text":"CSS\u5E38\u7528\u6280\u5DE7","link":"/pages/base/css/"},{"text":"CSS \u6E10\u53D8","link":"/pages/css/cssDemo.md"},{"text":"CSS\u7279\u6548","link":"/pages/base/cssAnimation/"}]},{"text":"HTML","items":[{"text":"HTML\u5E38\u7528\u6280\u5DE7","link":"/pages/base/html/"}]},{"text":"vue3\u5B66\u4E60\u7B14\u8BB0\u{1F4D6}","collapsible":true,"collapsed":true,"items":[{"text":"vue3\u57FA\u7840","items":[{"text":"\u6CE8\u610F\u70B9","link":"/pages/vue3-base/basic/note"},{"text":"reactive","link":"/pages/vue3-base/basic/reactive"},{"text":"ref","link":"/pages/vue3-base/basic/ref"},{"text":"v-model","link":"/pages/vue3-base/basic/v-model"},{"text":"\u8BA1\u7B97\u5C5E\u6027\u548C\u4FA6\u542C\u5668","link":"/pages/vue3-base/basic/computed"}]},{"text":"vue3\u7EC4\u4EF6","items":[{"text":"\u7EC4\u4EF6\u7684\u4E00\u4E9B\u6CE8\u610F\u70B9","link":"/pages/vue3-base/components/componentNote"},{"text":"\u7EC4\u4EF6\u6CE8\u518C","link":"/pages/vue3-base/components/reg"},{"text":"\u7EC4\u4EF6\u63D2\u69FD","link":"/pages/vue3-base/components/slot"},{"text":"\u4F9D\u8D56\u6CE8\u5165","link":"/pages/vue3-base/components/provide"}]},{"text":"vue \u6838\u5FC3\u{1F4AA}","items":[{"text":"\u54CD\u5E94\u5F0F\u539F\u7406","link":"/pages/vue3-base/vueCore/responsivePrinciples"},{"text":"\u865A\u62DFdom","link":"/pages/vue3-base/vueCore/virtualDom"},{"text":"diff\u7B97\u6CD5","link":"/pages/vue3-base/vueCore/diff"}]}]},{"text":"vite","collapsible":true,"collapsed":true,"items":[{"text":"vite\u76F8\u5173","link":"/pages/vite/"},{"text":"vitepress\u76F8\u5173","link":"/pages/vite/vitepress"}]},{"text":"git\u76F8\u5173","collapsible":true,"collapsed":true,"items":[{"text":"gitHub\u9047\u5230\u7684\u95EE\u9898","link":"/pages/git/githubQuestion/"}]},{"text":"vscode\u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E","collapsible":true,"collapsed":true,"items":[{"text":"\u76F8\u5173\u63D2\u4EF6","link":"/pages/vscodeTool/"}]},{"text":"uniapp\u76F8\u5173","collapsible":true,"collapsed":true,"items":[{"text":"\u5E38\u7528api\u7B49","link":"/pages/uniapp/"},{"text":"\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6","link":"/pages/uniapp/components-uploadImg"},{"text":"\u65E5\u5386\u7EC4\u4EF6","link":"/pages/uniapp/calendar"}]}]},"locales":{"/":{"lang":"zh-CN"}},"langs":{},"scrollOffset":90,"cleanUrls":"disabled"}'),cs=/^[a-z]+:/i,ni="vitepress-theme-appearance",Le=typeof window<"u",hr={relativePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0};function da(e,t){t.sort((n,s)=>{const o=s.split("/").length-n.split("/").length;return o!==0?o:s.length-n.length});for(const n of t)if(e.startsWith(n))return n}function si(e,t){const n=da(t,Object.keys(e));return n?e[n]:void 0}function ha(e){const{locales:t}=e.themeConfig||{},n=e.locales;return t&&n?Object.keys(t).reduce((s,o)=>(s[o]={label:t[o].label,lang:n[o].lang},s),{}):{}}function _a(e,t){t=va(e,t);const n=si(e.locales||{},t),s=si(e.themeConfig.locales||{},t);return Object.assign({},e,n,{themeConfig:Object.assign({},e.themeConfig,s,{locales:{}}),lang:(n||e).lang,locales:{},langs:ha(e)})}function _r(e,t){var i;const n=t.title||e.title,s=(i=t.titleTemplate)!=null?i:e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const o=pa(e.title,s);return`${n}${o}`}function pa(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function va(e,t){if(!Le)return t;const n=e.base,s=n.endsWith("/")?n.slice(0,-1):n;return t.slice(s.length)}function ma(e,t){const[n,s]=t;if(n!=="meta")return!1;const o=Object.entries(s)[0];return o==null?!1:e.some(([i,r])=>i===n&&r[o[0]]===o[1])}function ga(e,t){return[...e.filter(n=>!ma(t,n)),...t]}const ba=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,ya=/^[a-z]:/i;function oi(e){const t=ya.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(ba,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}function xa(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function vn(e){return cs.test(e)?e:xa(Yt.value.base,e)}function pr(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t.endsWith("/")&&(t+="index"),Le){const n="/ybhdsg-zhs/";t=oi(t.slice(n.length).replace(/\//g,"_")||"index")+".md";const s=__VP_HASH_MAP__[t.toLowerCase()];t=`${n}assets/${t}.${s}.js`}else t=`./${oi(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}const vr=Symbol(),Yt=wl(fa);function wa(e){const t=ie(()=>_a(Yt.value,e.path));return{site:t,theme:ie(()=>t.value.themeConfig),page:ie(()=>e.data),frontmatter:ie(()=>e.data.frontmatter),lang:ie(()=>t.value.lang),localePath:ie(()=>{const{langs:n,lang:s}=t.value,o=Object.keys(n).find(i=>n[i].lang===s);return vn(o||"/")}),title:ie(()=>_r(t.value,e.data)),description:ie(()=>e.data.description||t.value.description),isDark:ue(!1)}}function le(){const e=We(vr);if(!e)throw new Error("vitepress data not properly injected in app");return e}const mr=Symbol(),ii="http://a.com",ka=()=>({path:"/",component:null,data:hr});function $a(e,t){const n=Xn(ka()),s={route:n,go:o};async function o(l=Le?location.href:"/"){var u,h;await((u=s.onBeforeRouteChange)==null?void 0:u.call(s,l));const c=new URL(l,ii);Yt.value.cleanUrls==="disabled"&&!c.pathname.endsWith("/")&&!c.pathname.endsWith(".html")&&(c.pathname+=".html",l=c.pathname+c.search+c.hash),Le&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",l)),await r(l),await((h=s.onAfterRouteChanged)==null?void 0:h.call(s,l))}let i=null;async function r(l,c=0,u=!1){const h=new URL(l,ii),v=i=h.pathname;try{let g=await e(v);if(i===v){i=null;const{default:k,__pageData:M}=g;if(!k)throw new Error(`Invalid route component: ${k}`);n.path=Le?v:vn(v),n.component=on(k),n.data=on(M),Le&&eo(()=>{if(h.hash&&!c){let N=null;try{N=document.querySelector(decodeURIComponent(h.hash))}catch(Y){console.warn(Y)}if(N){ri(N,h.hash);return}}window.scrollTo(0,c)})}}catch(g){if(!/fetch/.test(g.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(g),!u)try{const k=await fetch(Yt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await k.json(),await r(l,c,!0);return}catch{}i===v&&(i=null,n.path=Le?v:vn(v),n.component=t?on(t):null,n.data=hr)}}return Le&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const u=l.target.closest("a");if(u&&!u.closest(".vp-raw")&&!u.download){const{href:h,origin:v,pathname:g,hash:k,search:M,target:N}=u,Y=window.location,y=g.match(/\.\w+$/);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&N!=="_blank"&&v===Y.origin&&!(y&&y[0]!==".html")&&(l.preventDefault(),g===Y.pathname&&M===Y.search?k&&k!==Y.hash&&(history.pushState(null,"",k),window.dispatchEvent(new Event("hashchange")),ri(u,k,u.classList.contains("header-anchor"))):o(h))}},{capture:!0}),window.addEventListener("popstate",l=>{r(location.href,l.state&&l.state.scrollPosition||0)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function Pa(){const e=We(mr);if(!e)throw new Error("useRouter() is called without provider.");return e}function vt(){return Pa().route}function ri(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.querySelector(decodeURIComponent(t))}catch(o){console.warn(o)}if(s){let o=Yt.value.scrollOffset;typeof o=="string"&&(o=document.querySelector(o).getBoundingClientRect().bottom+24);const i=parseInt(window.getComputedStyle(s).paddingTop,10),r=window.scrollY+s.getBoundingClientRect().top-o+i;!n||Math.abs(r-window.scrollY)>window.innerHeight?window.scrollTo(0,r):window.scrollTo({left:0,top:r,behavior:"smooth"})}}const Ca=R({name:"VitePressContent",props:{onContentUpdated:Function},setup(e){const t=vt();return to(()=>{var n;(n=e.onContentUpdated)==null||n.call(e)}),()=>jn("div",{style:{position:"relative"}},[t.component?jn(t.component):null])}}),gr=/#.*$/,Sa=/(index)?\.(md|html)$/,Ta=typeof window<"u",Va=ue(Ta?location.hash:"");function Ea(e){return cs.test(e)}function La(e,t){let n,s=!1;return()=>{n&&clearTimeout(n),s?n=setTimeout(e,t):(e(),s=!0,setTimeout(()=>{s=!1},t))}}function Xt(e,t,n=!1){if(t===void 0)return!1;if(e=ci(`/${e}`),n)return new RegExp(t).test(e);if(ci(t)!==e)return!1;const s=t.match(gr);return s?Va.value===s[0]:!0}function li(e){return/^\//.test(e)?e:`/${e}`}function ci(e){return decodeURI(e).replace(gr,"").replace(Sa,"")}function Un(e){if(Ea(e))return e;const{site:t}=le(),{pathname:n,search:s,hash:o}=new URL(e,"http://example.com"),i=n.endsWith("/")||n.endsWith(".html")?e:`${n.replace(/(\.md)?$/,t.value.cleanUrls==="disabled"?".html":"")}${s}${o}`;return vn(i)}function br(e,t){if(Array.isArray(e))return e;if(e==null)return[];t=li(t);const n=Object.keys(e).sort((s,o)=>o.split("/").length-s.split("/").length).find(s=>t.startsWith(li(s)));return n?e[n]:[]}function Ma(e){const t=[];function n(s){for(const o of s)o.link&&t.push({...o,link:o.link}),"items"in o&&n(o.items)}for(const s of e)n(s.items);return t}function tt(){const e=vt(),{theme:t,frontmatter:n}=le(),s=ue(!1),o=ie(()=>{const h=t.value.sidebar,v=e.data.relativePath;return h?br(h,v):[]}),i=ie(()=>n.value.sidebar!==!1&&o.value.length>0&&n.value.layout!=="home"),r=ie(()=>n.value.layout!=="home"&&n.value.aside!==!1);function l(){s.value=!0}function c(){s.value=!1}function u(){s.value?c():l()}return{isOpen:s,sidebar:o,hasSidebar:i,hasAside:r,open:l,close:c,toggle:u}}function Ia(e,t){let n;Ut(()=>{n=e.value?document.activeElement:void 0}),Re(()=>{window.addEventListener("keyup",s)}),pt(()=>{window.removeEventListener("keyup",s)});function s(o){o.key==="Escape"&&e.value&&(t(),n==null||n.focus())}}const Aa=R({__name:"VPSkipLink",setup(e){const t=vt(),n=ue();Ze(()=>t.path,()=>n.value.focus());function s({target:o}){const i=document.querySelector(o.hash);if(i){const r=()=>{i.removeAttribute("tabindex"),i.removeEventListener("blur",r)};i.setAttribute("tabindex","-1"),i.addEventListener("blur",r),i.focus(),window.scrollTo(0,0)}}return(o,i)=>(d(),m(G,null,[b("span",{ref_key:"backToTop",ref:n,tabindex:"-1"},null,512),b("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}});const Na=O(Aa,[["__scopeId","data-v-151f2593"]]),Ba={key:0,class:"VPBackdrop"},Oa=R({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,n)=>(d(),Q(ls,{name:"fade"},{default:B(()=>[e.show?(d(),m("div",Ba)):U("",!0)]),_:1}))}});const Fa=O(Oa,[["__scopeId","data-v-0164f098"]]);function Ha(){const e=ue(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function n(){e.value=!1,window.removeEventListener("resize",o)}function s(){e.value?n():t()}function o(){window.outerWidth>=768&&n()}const i=vt();return Ze(()=>i.path,n),{isScreenOpen:e,openScreen:t,closeScreen:n,toggleScreen:s}}const Ra=["src","alt"],Da={inheritAttrs:!1},za=R({...Da,__name:"VPImage",props:{image:null,alt:null},setup(e){return(t,n)=>{var o;const s=Et("VPImage",!0);return e.image?(d(),m(G,{key:0},[typeof e.image=="string"||"src"in e.image?(d(),m("img",Nn({key:0,class:"VPImage"},typeof e.image=="string"?t.$attrs:{...e.image,...t.$attrs},{src:_(vn)(typeof e.image=="string"?e.image:e.image.src),alt:(o=e.alt)!=null?o:typeof e.image=="string"?"":e.image.alt||""}),null,16,Ra)):(d(),m(G,{key:1},[T(s,Nn({class:"dark",image:e.image.dark,alt:typeof e.image.dark=="string"?e.image.alt:e.image.dark.alt||e.image.alt},t.$attrs),null,16,["image","alt"]),T(s,Nn({class:"light",image:e.image.light,alt:typeof e.image.light=="string"?e.image.alt:e.image.light.alt||e.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):U("",!0)}}});const yr=O(za,[["__scopeId","data-v-b7ac6bd3"]]),ja=["href"],Ua=R({__name:"VPNavBarTitle",setup(e){const{site:t,theme:n}=le(),{hasSidebar:s}=tt();return(o,i)=>(d(),m("div",{class:he(["VPNavBarTitle",{"has-sidebar":_(s)}])},[b("a",{class:"title",href:_(t).base},[E(o.$slots,"nav-bar-title-before",{},void 0,!0),T(yr,{class:"logo",image:_(n).logo},null,8,["image"]),_(n).siteTitle?(d(),m(G,{key:0},[Ve(ae(_(n).siteTitle),1)],64)):_(n).siteTitle===void 0?(d(),m(G,{key:1},[Ve(ae(_(t).title),1)],64)):U("",!0),E(o.$slots,"nav-bar-title-after",{},void 0,!0)],8,ja)],2))}});const Ka=O(Ua,[["__scopeId","data-v-d5925166"]]);const Wa={key:0,class:"VPNavBarSearch"},qa={type:"button",class:"DocSearch DocSearch-Button","aria-label":"Search"},Ya={class:"DocSearch-Button-Container"},Ga=b("svg",{class:"DocSearch-Search-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},[b("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Qa={class:"DocSearch-Button-Placeholder"},Ja=b("span",{class:"DocSearch-Button-Keys"},[b("kbd",{class:"DocSearch-Button-Key"}),b("kbd",{class:"DocSearch-Button-Key"},"K")],-1),Xa=R({__name:"VPNavBarSearch",setup(e){qc(r=>({"5943dbe8":o.value}));const t=Dl(()=>dr(()=>import("./chunks/VPAlgoliaSearchBox.b308f465.js"),[])),{theme:n}=le(),s=ue(!1),o=ue("'Meta'");Re(()=>{if(!n.value.algolia)return;o.value=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"'\u2318'":"'Ctrl'";const r=c=>{c.key==="k"&&(c.ctrlKey||c.metaKey)&&(c.preventDefault(),i(),l())},l=()=>{window.removeEventListener("keydown",r)};window.addEventListener("keydown",r),pt(l)});function i(){s.value||(s.value=!0)}return(r,l)=>{var c;return _(n).algolia?(d(),m("div",Wa,[s.value?(d(),Q(_(t),{key:0})):(d(),m("div",{key:1,id:"docsearch",onClick:i},[b("button",qa,[b("span",Ya,[Ga,b("span",Qa,ae(((c=_(n).algolia)==null?void 0:c.buttonText)||"Search"),1)]),Ja])]))])):U("",!0)}}});const Za={},eu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",height:"24px",viewBox:"0 0 24 24",width:"24px"},tu=b("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),nu=b("path",{d:"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"},null,-1),su=[tu,nu];function ou(e,t){return d(),m("svg",eu,su)}const iu=O(Za,[["render",ou]]),ru=R({__name:"VPLink",props:{href:null,noIcon:{type:Boolean}},setup(e){const t=e,n=ie(()=>t.href&&cs.test(t.href));return(s,o)=>(d(),Q(so(e.href?"a":"span"),{class:he(["VPLink",{link:e.href}]),href:e.href?_(Un)(e.href):void 0,target:_(n)?"_blank":void 0,rel:_(n)?"noreferrer":void 0},{default:B(()=>[E(s.$slots,"default",{},void 0,!0),_(n)&&!e.noIcon?(d(),Q(iu,{key:0,class:"icon"})):U("",!0)]),_:3},8,["class","href","target","rel"]))}});const Lt=O(ru,[["__scopeId","data-v-3c355974"]]),lu=R({__name:"VPNavBarMenuLink",props:{item:null},setup(e){const{page:t}=le();return(n,s)=>(d(),Q(Lt,{class:he({VPNavBarMenuLink:!0,active:_(Xt)(_(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,noIcon:!0},{default:B(()=>[Ve(ae(e.item.text),1)]),_:1},8,["class","href"]))}});const cu=O(lu,[["__scopeId","data-v-47a2263e"]]),co=ue();let xr=!1,ws=0;function au(e){const t=ue(!1);if(typeof window<"u"){!xr&&uu(),ws++;const n=Ze(co,s=>{var o,i,r;s===e.el.value||((o=e.el.value)==null?void 0:o.contains(s))?(t.value=!0,(i=e.onFocus)==null||i.call(e)):(t.value=!1,(r=e.onBlur)==null||r.call(e))});pt(()=>{n(),ws--,ws||fu()})}return Qs(t)}function uu(){document.addEventListener("focusin",wr),xr=!0,co.value=document.activeElement}function fu(){document.removeEventListener("focusin",wr)}function wr(){co.value=document.activeElement}const du={},hu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},_u=b("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),pu=[_u];function vu(e,t){return d(),m("svg",hu,pu)}const kr=O(du,[["render",vu]]),mu={},gu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},bu=b("circle",{cx:"12",cy:"12",r:"2"},null,-1),yu=b("circle",{cx:"19",cy:"12",r:"2"},null,-1),xu=b("circle",{cx:"5",cy:"12",r:"2"},null,-1),wu=[bu,yu,xu];function ku(e,t){return d(),m("svg",gu,wu)}const $u=O(mu,[["render",ku]]),Pu={class:"VPMenuLink"},Cu=R({__name:"VPMenuLink",props:{item:null},setup(e){const{page:t}=le();return(n,s)=>(d(),m("div",Pu,[T(Lt,{class:he({active:_(Xt)(_(t).relativePath,e.item.activeMatch||e.item.link)}),href:e.item.link},{default:B(()=>[Ve(ae(e.item.text),1)]),_:1},8,["class","href"])]))}});const as=O(Cu,[["__scopeId","data-v-e8e0fb1d"]]),Su={class:"VPMenuGroup"},Tu={key:0,class:"title"},Vu=R({__name:"VPMenuGroup",props:{text:null,items:null},setup(e){return(t,n)=>(d(),m("div",Su,[e.text?(d(),m("p",Tu,ae(e.text),1)):U("",!0),(d(!0),m(G,null,Se(e.items,s=>(d(),m(G,null,["link"in s?(d(),Q(as,{key:0,item:s},null,8,["item"])):U("",!0)],64))),256))]))}});const Eu=O(Vu,[["__scopeId","data-v-9ca52130"]]),Lu={class:"VPMenu"},Mu={key:0,class:"items"},Iu=R({__name:"VPMenu",props:{items:null},setup(e){return(t,n)=>(d(),m("div",Lu,[e.items?(d(),m("div",Mu,[(d(!0),m(G,null,Se(e.items,s=>(d(),m(G,{key:s.text},["link"in s?(d(),Q(as,{key:0,item:s},null,8,["item"])):(d(),Q(Eu,{key:1,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):U("",!0),E(t.$slots,"default",{},void 0,!0)]))}});const Au=O(Iu,[["__scopeId","data-v-1c5d0cfc"]]),Nu=["aria-expanded","aria-label"],Bu={key:0,class:"text"},Ou={class:"menu"},Fu=R({__name:"VPFlyout",props:{icon:null,button:null,label:null,items:null},setup(e){const t=ue(!1),n=ue();au({el:n,onBlur:s});function s(){t.value=!1}return(o,i)=>(d(),m("div",{class:"VPFlyout",ref_key:"el",ref:n,onMouseenter:i[1]||(i[1]=r=>t.value=!0),onMouseleave:i[2]||(i[2]=r=>t.value=!1)},[b("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":e.label,onClick:i[0]||(i[0]=r=>t.value=!t.value)},[e.button||e.icon?(d(),m("span",Bu,[e.icon?(d(),Q(so(e.icon),{key:0,class:"option-icon"})):U("",!0),Ve(" "+ae(e.button)+" ",1),T(kr,{class:"text-icon"})])):(d(),Q($u,{key:1,class:"icon"}))],8,Nu),b("div",Ou,[T(Au,{items:e.items},{default:B(()=>[E(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});const ao=O(Fu,[["__scopeId","data-v-6ffb57d3"]]),Hu=R({__name:"VPNavBarMenuGroup",props:{item:null},setup(e){const{page:t}=le();return(n,s)=>(d(),Q(ao,{class:he({VPNavBarMenuGroup:!0,active:_(Xt)(_(t).relativePath,e.item.activeMatch,!!e.item.activeMatch)}),button:e.item.text,items:e.item.items},null,8,["class","button","items"]))}}),Ru=e=>(qe("data-v-f83db6ba"),e=e(),Ye(),e),Du={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},zu=Ru(()=>b("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),ju=R({__name:"VPNavBarMenu",setup(e){const{theme:t}=le();return(n,s)=>_(t).nav?(d(),m("nav",Du,[zu,(d(!0),m(G,null,Se(_(t).nav,o=>(d(),m(G,{key:o.text},["link"in o?(d(),Q(cu,{key:0,item:o},null,8,["item"])):(d(),Q(Hu,{key:1,item:o},null,8,["item"]))],64))),128))])):U("",!0)}});const Uu=O(ju,[["__scopeId","data-v-f83db6ba"]]),Ku={},Wu={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},qu=b("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Yu=b("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Gu=[qu,Yu];function Qu(e,t){return d(),m("svg",Wu,Gu)}const $r=O(Ku,[["render",Qu]]),Ju={class:"items"},Xu={class:"title"},Zu=R({__name:"VPNavBarTranslations",setup(e){const{theme:t}=le();return(n,s)=>_(t).localeLinks?(d(),Q(ao,{key:0,class:"VPNavBarTranslations",icon:$r},{default:B(()=>[b("div",Ju,[b("p",Xu,ae(_(t).localeLinks.text),1),(d(!0),m(G,null,Se(_(t).localeLinks.items,o=>(d(),Q(as,{key:o.link,item:o},null,8,["item"]))),128))])]),_:1})):U("",!0)}});const ef=O(Zu,[["__scopeId","data-v-db824e91"]]);const tf={},nf={class:"VPSwitch",type:"button",role:"switch"},sf={class:"check"},of={key:0,class:"icon"};function rf(e,t){return d(),m("button",nf,[b("span",sf,[e.$slots.default?(d(),m("span",of,[E(e.$slots,"default",{},void 0,!0)])):U("",!0)])])}const lf=O(tf,[["render",rf],["__scopeId","data-v-eba7420e"]]),cf={},af={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},uf=gc('',9),ff=[uf];function df(e,t){return d(),m("svg",af,ff)}const hf=O(cf,[["render",df]]),_f={},pf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},vf=b("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),mf=[vf];function gf(e,t){return d(),m("svg",pf,mf)}const bf=O(_f,[["render",gf]]),yf=R({__name:"VPSwitchAppearance",setup(e){const{site:t,isDark:n}=le(),s=ue(!1),o=typeof localStorage<"u"?i():()=>{};Re(()=>{s.value=document.documentElement.classList.contains("dark")});function i(){const r=window.matchMedia("(prefers-color-scheme: dark)"),l=document.documentElement.classList;let c=localStorage.getItem(ni),u=t.value.appearance==="dark"&&c==null||(c==="auto"||c==null?r.matches:c==="dark");r.onchange=g=>{c==="auto"&&v(u=g.matches)};function h(){v(u=!u),c=u?r.matches?"auto":"dark":r.matches?"light":"auto",localStorage.setItem(ni,c)}function v(g){const k=document.createElement("style");k.type="text/css",k.appendChild(document.createTextNode(`:not(.VPSwitchAppearance):not(.VPSwitchAppearance *) { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; -}`)),document.head.appendChild(k),s.value=g,l[g?"add":"remove"]("dark"),window.getComputedStyle(k).opacity,document.head.removeChild(k)}return h}return Ze(s,r=>{n.value=r}),(r,l)=>(d(),Q(lf,{class:"VPSwitchAppearance","aria-label":"toggle dark mode","aria-checked":s.value,onClick:_(o)},{default:B(()=>[T(hf,{class:"sun"}),T(bf,{class:"moon"})]),_:1},8,["aria-checked","onClick"]))}});const uo=O(yf,[["__scopeId","data-v-481098f9"]]),xf={key:0,class:"VPNavBarAppearance"},wf=D({__name:"VPNavBarAppearance",setup(e){const{site:t}=le();return(n,s)=>_(t).appearance?(d(),m("div",xf,[T(uo)])):j("",!0)}});const kf=O(wf,[["__scopeId","data-v-a3e7452b"]]),$f={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',slack:'Slack',twitter:'Twitter',youtube:'YouTube'},Pf=["href","innerHTML"],Cf=D({__name:"VPSocialLink",props:{icon:null,link:null},setup(e){const t=e,n=ie(()=>typeof t.icon=="object"?t.icon.svg:$f[t.icon]);return(s,o)=>(d(),m("a",{class:"VPSocialLink",href:e.link,target:"_blank",rel:"noopener",innerHTML:_(n)},null,8,Pf))}});const Sf=O(Cf,[["__scopeId","data-v-e57698f6"]]),Tf={class:"VPSocialLinks"},Vf=D({__name:"VPSocialLinks",props:{links:null},setup(e){return(t,n)=>(d(),m("div",Tf,[(d(!0),m(G,null,Se(e.links,({link:s,icon:o})=>(d(),Q(Sf,{key:s,icon:o,link:s},null,8,["icon","link"]))),128))]))}});const fo=O(Vf,[["__scopeId","data-v-f6988cfb"]]),Ef=D({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=le();return(n,s)=>_(t).socialLinks?(d(),Q(fo,{key:0,class:"VPNavBarSocialLinks",links:_(t).socialLinks},null,8,["links"])):j("",!0)}});const Lf=O(Ef,[["__scopeId","data-v-738bef5a"]]),Mf=e=>(qe("data-v-e4361c82"),e=e(),Ye(),e),If={key:0,class:"group"},Af={class:"trans-title"},Nf={key:1,class:"group"},Bf={class:"item appearance"},Of=Mf(()=>b("p",{class:"label"},"Appearance",-1)),Ff={class:"appearance-action"},Hf={key:2,class:"group"},Df={class:"item social-links"},Rf=D({__name:"VPNavBarExtra",setup(e){const{site:t,theme:n}=le(),s=ie(()=>n.value.localeLinks||t.value.appearance||n.value.socialLinks);return(o,i)=>_(s)?(d(),Q(ao,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:B(()=>[_(n).localeLinks?(d(),m("div",If,[b("p",Af,ae(_(n).localeLinks.text),1),(d(!0),m(G,null,Se(_(n).localeLinks.items,r=>(d(),Q(as,{key:r.link,item:r},null,8,["item"]))),128))])):j("",!0),_(t).appearance?(d(),m("div",Nf,[b("div",Bf,[Of,b("div",Ff,[T(uo)])])])):j("",!0),_(n).socialLinks?(d(),m("div",Hf,[b("div",Df,[T(fo,{class:"social-links-list",links:_(n).socialLinks},null,8,["links"])])])):j("",!0)]),_:1})):j("",!0)}});const zf=O(Rf,[["__scopeId","data-v-e4361c82"]]),Uf=e=>(qe("data-v-e5dd9c1c"),e=e(),Ye(),e),jf=["aria-expanded"],Kf=Uf(()=>b("span",{class:"container"},[b("span",{class:"top"}),b("span",{class:"middle"}),b("span",{class:"bottom"})],-1)),Wf=[Kf],qf=D({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,n)=>(d(),m("button",{type:"button",class:he(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:n[0]||(n[0]=s=>t.$emit("click"))},Wf,10,jf))}});const Yf=O(qf,[["__scopeId","data-v-e5dd9c1c"]]),Gf={class:"container"},Qf={class:"content"},Jf=D({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{hasSidebar:t}=tt();return(n,s)=>(d(),m("div",{class:he(["VPNavBar",{"has-sidebar":_(t)}])},[b("div",Gf,[T(Ka,null,{"nav-bar-title-before":B(()=>[E(n.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":B(()=>[E(n.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3}),b("div",Qf,[E(n.$slots,"nav-bar-content-before",{},void 0,!0),T(Xa,{class:"search"}),T(ju,{class:"menu"}),T(ef,{class:"translations"}),T(kf,{class:"appearance"}),T(Lf,{class:"social-links"}),T(zf,{class:"extra"}),E(n.$slots,"nav-bar-content-after",{},void 0,!0),T(Yf,{class:"hamburger",active:e.isScreenOpen,onClick:s[0]||(s[0]=o=>n.$emit("toggle-screen"))},null,8,["active"])])])],2))}});const Xf=O(Jf,[["__scopeId","data-v-6f1d18b5"]]);function Zf(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1),Rt=[],Wn=!1,_o=-1,cn=void 0,Ct=void 0,an=void 0,Pr=function(t){return Rt.some(function(n){return!!(n.options.allowTouchMove&&n.options.allowTouchMove(t))})},qn=function(t){var n=t||window.event;return Pr(n.target)||n.touches.length>1?!0:(n.preventDefault&&n.preventDefault(),!1)},ed=function(t){if(an===void 0){var n=!!t&&t.reserveScrollBarGap===!0,s=window.innerWidth-document.documentElement.clientWidth;if(n&&s>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);an=document.body.style.paddingRight,document.body.style.paddingRight=o+s+"px"}}cn===void 0&&(cn=document.body.style.overflow,document.body.style.overflow="hidden")},td=function(){an!==void 0&&(document.body.style.paddingRight=an,an=void 0),cn!==void 0&&(document.body.style.overflow=cn,cn=void 0)},nd=function(){return window.requestAnimationFrame(function(){if(Ct===void 0){Ct={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,n=t.scrollY,s=t.scrollX,o=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-n,document.body.style.left=-s,setTimeout(function(){return window.requestAnimationFrame(function(){var i=o-window.innerHeight;i&&n>=o&&(document.body.style.top=-(n+i))})},300)}})},sd=function(){if(Ct!==void 0){var t=-parseInt(document.body.style.top,10),n=-parseInt(document.body.style.left,10);document.body.style.position=Ct.position,document.body.style.top=Ct.top,document.body.style.left=Ct.left,window.scrollTo(n,t),Ct=void 0}},od=function(t){return t?t.scrollHeight-t.scrollTop<=t.clientHeight:!1},id=function(t,n){var s=t.targetTouches[0].clientY-_o;return Pr(t.target)?!1:n&&n.scrollTop===0&&s>0||od(n)&&s<0?qn(t):(t.stopPropagation(),!0)},Cr=function(t,n){if(!t){console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");return}if(!Rt.some(function(o){return o.targetElement===t})){var s={targetElement:t,options:n||{}};Rt=[].concat(Zf(Rt),[s]),Kn?nd():ed(n),Kn&&(t.ontouchstart=function(o){o.targetTouches.length===1&&(_o=o.targetTouches[0].clientY)},t.ontouchmove=function(o){o.targetTouches.length===1&&id(o,t)},Wn||(document.addEventListener("touchmove",qn,ho?{passive:!1}:void 0),Wn=!0))}},Sr=function(){Kn&&(Rt.forEach(function(t){t.targetElement.ontouchstart=null,t.targetElement.ontouchmove=null}),Wn&&(document.removeEventListener("touchmove",qn,ho?{passive:!1}:void 0),Wn=!1),_o=-1),Kn?sd():td(),Rt=[]};const rd=D({__name:"VPNavScreenMenuLink",props:{text:null,link:null},setup(e){const t=We("close-screen");return(n,s)=>(d(),Q(Lt,{class:"VPNavScreenMenuLink",href:e.link,onClick:_(t)},{default:B(()=>[Ve(ae(e.text),1)]),_:1},8,["href","onClick"]))}});const ld=O(rd,[["__scopeId","data-v-b7098508"]]),cd={},ad={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ud=b("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),fd=[ud];function dd(e,t){return d(),m("svg",ad,fd)}const hd=O(cd,[["render",dd]]),_d=D({__name:"VPNavScreenMenuGroupLink",props:{text:null,link:null},setup(e){const t=We("close-screen");return(n,s)=>(d(),Q(Lt,{class:"VPNavScreenMenuGroupLink",href:e.link,onClick:_(t)},{default:B(()=>[Ve(ae(e.text),1)]),_:1},8,["href","onClick"]))}});const Tr=O(_d,[["__scopeId","data-v-7f173864"]]),pd={class:"VPNavScreenMenuGroupSection"},vd={key:0,class:"title"},md=D({__name:"VPNavScreenMenuGroupSection",props:{text:null,items:null},setup(e){return(t,n)=>(d(),m("div",pd,[e.text?(d(),m("p",vd,ae(e.text),1)):j("",!0),(d(!0),m(G,null,Se(e.items,s=>(d(),Q(Tr,{key:s.text,text:s.text,link:s.link},null,8,["text","link"]))),128))]))}});const gd=O(md,[["__scopeId","data-v-7478538b"]]),bd=["aria-controls","aria-expanded"],yd={class:"button-text"},xd=["id"],wd={key:1,class:"group"},kd=D({__name:"VPNavScreenMenuGroup",props:{text:null,items:null},setup(e){const t=e,n=ue(!1),s=ie(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){n.value=!n.value}return(i,r)=>(d(),m("div",{class:he(["VPNavScreenMenuGroup",{open:n.value}])},[b("button",{class:"button","aria-controls":_(s),"aria-expanded":n.value,onClick:o},[b("span",yd,ae(e.text),1),T(hd,{class:"button-icon"})],8,bd),b("div",{id:_(s),class:"items"},[(d(!0),m(G,null,Se(e.items,l=>(d(),m(G,{key:l.text},["link"in l?(d(),m("div",{key:l.text,class:"item"},[T(Tr,{text:l.text,link:l.link},null,8,["text","link"])])):(d(),m("div",wd,[T(gd,{text:l.text,items:l.items},null,8,["text","items"])]))],64))),128))],8,xd)],2))}});const $d=O(kd,[["__scopeId","data-v-5bc84358"]]),Pd={key:0,class:"VPNavScreenMenu"},Cd=D({__name:"VPNavScreenMenu",setup(e){const{theme:t}=le();return(n,s)=>_(t).nav?(d(),m("nav",Pd,[(d(!0),m(G,null,Se(_(t).nav,o=>(d(),m(G,{key:o.text},["link"in o?(d(),Q(ld,{key:0,text:o.text,link:o.link},null,8,["text","link"])):(d(),Q($d,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):j("",!0)}}),Sd=e=>(qe("data-v-7bc19822"),e=e(),Ye(),e),Td={key:0,class:"VPNavScreenAppearance"},Vd=Sd(()=>b("p",{class:"text"},"Appearance",-1)),Ed=D({__name:"VPNavScreenAppearance",setup(e){const{site:t}=le();return(n,s)=>_(t).appearance?(d(),m("div",Td,[Vd,T(uo)])):j("",!0)}});const Ld=O(Ed,[["__scopeId","data-v-7bc19822"]]),Md={class:"list"},Id=["href"],Ad=D({__name:"VPNavScreenTranslations",setup(e){const{theme:t}=le(),n=ue(!1);function s(){n.value=!n.value}return(o,i)=>_(t).localeLinks?(d(),m("div",{key:0,class:he(["VPNavScreenTranslations",{open:n.value}])},[b("button",{class:"title",onClick:s},[T($r,{class:"icon lang"}),Ve(" "+ae(_(t).localeLinks.text)+" ",1),T(kr,{class:"icon chevron"})]),b("ul",Md,[(d(!0),m(G,null,Se(_(t).localeLinks.items,r=>(d(),m("li",{key:r.link,class:"item"},[b("a",{class:"link",href:r.link},ae(r.text),9,Id)]))),128))])],2)):j("",!0)}});const Nd=O(Ad,[["__scopeId","data-v-6bfcad30"]]),Bd=D({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=le();return(n,s)=>_(t).socialLinks?(d(),Q(fo,{key:0,class:"VPNavScreenSocialLinks",links:_(t).socialLinks},null,8,["links"])):j("",!0)}}),Od={class:"container"},Fd=D({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=ue(null);function n(){Cr(t.value,{reserveScrollBarGap:!0})}function s(){Sr()}return(o,i)=>(d(),Q(ls,{name:"fade",onEnter:n,onAfterLeave:s},{default:B(()=>[e.open?(d(),m("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t},[b("div",Od,[E(o.$slots,"nav-screen-content-before",{},void 0,!0),T(Cd,{class:"menu"}),T(Nd,{class:"translations"}),T(Ld,{class:"appearance"}),T(Bd,{class:"social-links"}),E(o.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):j("",!0)]),_:3}))}});const Hd=O(Fd,[["__scopeId","data-v-4a289eba"]]),Dd=D({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:n,toggleScreen:s}=Ha(),{hasSidebar:o}=tt();return ns("close-screen",n),(i,r)=>(d(),m("header",{class:he(["VPNav",{"no-sidebar":!_(o)}])},[T(Xf,{"is-screen-open":_(t),onToggleScreen:_(s)},{"nav-bar-title-before":B(()=>[E(i.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":B(()=>[E(i.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":B(()=>[E(i.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":B(()=>[E(i.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),T(Hd,{open:_(t)},{"nav-screen-content-before":B(()=>[E(i.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":B(()=>[E(i.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])],2))}});const Rd=O(Dd,[["__scopeId","data-v-a50780ff"]]),zd={},Ud={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},jd=b("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),Kd=b("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),Wd=b("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),qd=b("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),Yd=[jd,Kd,Wd,qd];function Gd(e,t){return d(),m("svg",Ud,Yd)}const Qd=O(zd,[["render",Gd]]),Jd=e=>(qe("data-v-b6162a8b"),e=e(),Ye(),e),Xd={key:0,class:"VPLocalNav"},Zd=["aria-expanded"],e1=Jd(()=>b("span",{class:"menu-text"},"Menu",-1)),t1=D({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{hasSidebar:t}=tt();function n(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(s,o)=>_(t)?(d(),m("div",Xd,[b("button",{class:"menu","aria-expanded":e.open,"aria-controls":"VPSidebarNav",onClick:o[0]||(o[0]=i=>s.$emit("open-menu"))},[T(Qd,{class:"menu-icon"}),e1],8,Zd),b("a",{class:"top-link",href:"#",onClick:n}," Return to top ")])):j("",!0)}});const n1=O(t1,[["__scopeId","data-v-b6162a8b"]]),s1={},o1={version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},i1=b("path",{d:"M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"},null,-1),r1=b("path",{d:"M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"},null,-1),l1=[i1,r1];function c1(e,t){return d(),m("svg",o1,l1)}const a1=O(s1,[["render",c1]]),u1={},f1={xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:"0 0 24 24"},d1=b("path",{d:"M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"},null,-1),h1=b("path",{d:"M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"},null,-1),_1=[d1,h1];function p1(e,t){return d(),m("svg",f1,_1)}const v1=O(u1,[["render",p1]]),m1=["innerHTML"],g1=D({__name:"VPSidebarLink",props:{item:null,depth:{default:1}},setup(e){const{page:t,frontmatter:n}=le(),s=ie(()=>n.value.sidebarDepth||1/0),o=We("close-sidebar");return(i,r)=>{const l=Et("VPSidebarLink",!0);return d(),m(G,null,[T(Lt,{class:he(["link",{active:_(Xt)(_(t).relativePath,e.item.link)}]),style:mn({paddingLeft:16*(e.depth-1)+"px"}),href:e.item.link,onClick:_(o)},{default:B(()=>[b("span",{innerHTML:e.item.text,class:he(["link-text",{light:e.depth>1}])},null,10,m1)]),_:1},8,["class","style","href","onClick"]),"items"in e.item&&e.depth<_(s)?(d(!0),m(G,{key:0},Se(e.item.items,c=>(d(),Q(l,{key:c.link,item:c,depth:e.depth+1},null,8,["item","depth"]))),128)):j("",!0)],64)}}});const b1=O(g1,[["__scopeId","data-v-36b976d1"]]),y1=["role"],x1=["innerHTML"],w1={class:"action"},k1={class:"items"},$1=D({__name:"VPSidebarGroup",props:{text:null,items:null,collapsible:{type:Boolean},collapsed:{type:Boolean}},setup(e){const t=e,n=ue(!1);jt(()=>{n.value=!!(t.collapsible&&t.collapsed)});const{page:s}=le();jt(()=>{t.items.some(i=>Xt(s.value.relativePath,i.link))&&(n.value=!1)});function o(){t.collapsible&&(n.value=!n.value)}return(i,r)=>(d(),m("section",{class:he(["VPSidebarGroup",{collapsible:e.collapsible,collapsed:n.value}])},[e.text?(d(),m("div",{key:0,class:"title",role:e.collapsible?"button":void 0,onClick:o},[b("h2",{innerHTML:e.text,class:"title-text"},null,8,x1),b("div",w1,[T(v1,{class:"icon minus"}),T(a1,{class:"icon plus"})])],8,y1)):j("",!0),b("div",k1,[(d(!0),m(G,null,Se(e.items,l=>(d(),Q(b1,{key:l.link,item:l},null,8,["item"]))),128))])],2))}});const P1=O($1,[["__scopeId","data-v-6e45c352"]]),C1=e=>(qe("data-v-a186aa16"),e=e(),Ye(),e),S1={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},T1=C1(()=>b("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),V1=D({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const t=e,{sidebar:n,hasSidebar:s}=tt();let o=ue(null);function i(){Cr(o.value,{reserveScrollBarGap:!0})}function r(){Sr()}return Ui(async()=>{var l;t.open?(i(),(l=o.value)==null||l.focus()):r()}),(l,c)=>_(s)?(d(),m("aside",{key:0,class:he(["VPSidebar",{open:e.open}]),ref_key:"navEl",ref:o,onClick:c[0]||(c[0]=na(()=>{},["stop"]))},[b("nav",S1,[T1,E(l.$slots,"sidebar-nav-before",{},void 0,!0),(d(!0),m(G,null,Se(_(n),u=>(d(),m("div",{key:u.text,class:"group"},[T(P1,{text:u.text,items:u.items,collapsible:u.collapsible,collapsed:u.collapsed},null,8,["text","items","collapsible","collapsed"])]))),128)),E(l.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):j("",!0)}});const E1=O(V1,[["__scopeId","data-v-a186aa16"]]),L1={},M1={class:"VPPage"};function I1(e,t){const n=Et("Content");return d(),m("div",M1,[T(n)])}const A1=O(L1,[["render",I1]]),N1=D({__name:"VPButton",props:{tag:null,size:null,theme:null,text:null,href:null},setup(e){const t=e,n=ie(()=>{var i,r;return[(i=t.size)!=null?i:"medium",(r=t.theme)!=null?r:"brand"]}),s=ie(()=>t.href&&cs.test(t.href)),o=ie(()=>t.tag?t.tag:t.href?"a":"button");return(i,r)=>(d(),Q(so(_(o)),{class:he(["VPButton",_(n)]),href:e.href?_(jn)(e.href):void 0,target:_(s)?"_blank":void 0,rel:_(s)?"noreferrer":void 0},{default:B(()=>[Ve(ae(e.text),1)]),_:1},8,["class","href","target","rel"]))}});const B1=O(N1,[["__scopeId","data-v-53dbb8eb"]]),O1=e=>(qe("data-v-0a0d4301"),e=e(),Ye(),e),F1={class:"container"},H1={class:"main"},D1={key:0,class:"name"},R1={class:"clip"},z1={key:1,class:"text"},U1={key:2,class:"tagline"},j1={key:3,class:"actions"},K1={key:0,class:"image"},W1={class:"image-container"},q1=O1(()=>b("div",{class:"image-bg"},null,-1)),Y1=D({__name:"VPHero",props:{name:null,text:null,tagline:null,image:null,actions:null},setup(e){return(t,n)=>(d(),m("div",{class:he(["VPHero",{"has-image":e.image}])},[b("div",F1,[b("div",H1,[e.name?(d(),m("h1",D1,[b("span",R1,ae(e.name),1)])):j("",!0),e.text?(d(),m("p",z1,ae(e.text),1)):j("",!0),e.tagline?(d(),m("p",U1,ae(e.tagline),1)):j("",!0),e.actions?(d(),m("div",j1,[(d(!0),m(G,null,Se(e.actions,s=>(d(),m("div",{key:s.link,class:"action"},[T(B1,{tag:"a",size:"medium",theme:s.theme,text:s.text,href:s.link},null,8,["theme","text","href"])]))),128))])):j("",!0)]),e.image?(d(),m("div",K1,[b("div",W1,[q1,T(yr,{class:"image-src",image:e.image},null,8,["image"])])])):j("",!0)])],2))}});const G1=O(Y1,[["__scopeId","data-v-0a0d4301"]]),Q1=D({__name:"VPHomeHero",setup(e){const{frontmatter:t}=le();return(n,s)=>_(t).hero?(d(),Q(G1,{key:0,class:"VPHomeHero",name:_(t).hero.name,text:_(t).hero.text,tagline:_(t).hero.tagline,image:_(t).hero.image,actions:_(t).hero.actions},null,8,["name","text","tagline","image","actions"])):j("",!0)}}),J1={},X1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Z1=b("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),e0=[Z1];function t0(e,t){return d(),m("svg",X1,e0)}const n0=O(J1,[["render",t0]]),s0={class:"box"},o0={key:0,class:"icon"},i0={class:"title"},r0={class:"details"},l0={key:1,class:"link-text"},c0={class:"link-text-value"},a0=D({__name:"VPFeature",props:{icon:null,title:null,details:null,link:null,linkText:null},setup(e){return(t,n)=>(d(),Q(Lt,{class:"VPFeature",href:e.link,"no-icon":!0},{default:B(()=>[b("article",s0,[e.icon?(d(),m("div",o0,ae(e.icon),1)):j("",!0),b("h2",i0,ae(e.title),1),b("p",r0,ae(e.details),1),e.linkText?(d(),m("div",l0,[b("p",c0,[Ve(ae(e.linkText)+" ",1),T(n0,{class:"link-text-icon"})])])):j("",!0)])]),_:1},8,["href"]))}});const u0=O(a0,[["__scopeId","data-v-b8147458"]]),f0={key:0,class:"VPFeatures"},d0={class:"container"},h0={class:"items"},_0=D({__name:"VPFeatures",props:{features:null},setup(e){const t=e,n=ie(()=>{const s=t.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s%2===0)return"grid-4"}else return});return(s,o)=>e.features?(d(),m("div",f0,[b("div",d0,[b("div",h0,[(d(!0),m(G,null,Se(e.features,i=>(d(),m("div",{key:i.title,class:he(["item",[_(n)]])},[T(u0,{icon:i.icon,title:i.title,details:i.details,link:i.link,"link-text":i.linkText},null,8,["icon","title","details","link","link-text"])],2))),128))])])])):j("",!0)}});const p0=O(_0,[["__scopeId","data-v-69662dc1"]]),v0=D({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=le();return(n,s)=>_(t).features?(d(),Q(p0,{key:0,class:"VPHomeFeatures",features:_(t).features},null,8,["features"])):j("",!0)}}),m0={class:"VPHome"},g0=D({__name:"VPHome",setup(e){return(t,n)=>{const s=Et("Content");return d(),m("div",m0,[E(t.$slots,"home-hero-before",{},void 0,!0),T(Q1),E(t.$slots,"home-hero-after",{},void 0,!0),E(t.$slots,"home-features-before",{},void 0,!0),T(v0),E(t.$slots,"home-features-after",{},void 0,!0),T(s)])}}});const b0=O(g0,[["__scopeId","data-v-1db23833"]]);var ui;const xn=typeof window<"u";xn&&((ui=window==null?void 0:window.navigator)==null?void 0:ui.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function y0(e){return e}function x0(e){return Yr()?(Gr(e),!0):!1}function w0(e){return typeof e=="function"?ie(e):ue(e)}function k0(e,t=!0){lo()?De(e):t?e():eo(e)}const $0=xn?window:void 0;xn&&window.document;xn&&window.navigator;xn&&window.location;function P0(e,t=!1){const n=ue(),s=()=>n.value=Boolean(e());return s(),k0(s,t),n}function fi(e,t={}){const{window:n=$0}=t,s=P0(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const i=ue(!1),r=()=>{!o||("removeEventListener"in o?o.removeEventListener("change",l):o.removeListener(l))},l=()=>{!s.value||(r(),o=n.matchMedia(w0(e).value),i.value=o.matches,"addEventListener"in o?o.addEventListener("change",l):o.addListener(l))};return jt(l),x0(()=>r()),i}const Fs=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},Hs="__vueuse_ssr_handlers__";Fs[Hs]=Fs[Hs]||{};Fs[Hs];var di;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(di||(di={}));var C0=Object.defineProperty,hi=Object.getOwnPropertySymbols,S0=Object.prototype.hasOwnProperty,T0=Object.prototype.propertyIsEnumerable,_i=(e,t,n)=>t in e?C0(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,V0=(e,t)=>{for(var n in t||(t={}))S0.call(t,n)&&_i(e,n,t[n]);if(hi)for(var n of hi(t))T0.call(t,n)&&_i(e,n,t[n]);return e};const E0={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};V0({linear:y0},E0);function L0(){const{hasSidebar:e}=tt(),t=fi("(min-width: 960px)"),n=fi("(min-width: 1280px)");return{isAsideEnabled:ie(()=>!n.value&&!t.value?!1:e.value?n.value:t.value)}}const M0=71;function I0(e){if(e===!1)return[];let t=[];return document.querySelectorAll("h2, h3, h4, h5, h6").forEach(n=>{n.textContent&&n.id&&t.push({level:Number(n.tagName[1]),title:n.innerText.replace(/\s+#\s*$/,""),link:`#${n.id}`})}),A0(t,e)}function A0(e,t=2){return N0(e,typeof t=="number"?[t,t]:t==="deep"?[2,6]:t)}function N0(e,t){const n=[];return e=e.map(s=>({...s})),e.forEach((s,o)=>{s.level>=t[0]&&s.level<=t[1]&&B0(o,e,t)&&n.push(s)}),n}function B0(e,t,n){if(e===0)return!0;const s=t[e];for(let o=e-1;o>=0;o--){const i=t[o];if(i.level=n[0]&&i.level<=n[1])return i.children==null&&(i.children=[]),i.children.push(s),!1}return!0}function O0(e,t){const{isAsideEnabled:n}=L0(),s=La(i,100);let o=null;De(()=>{requestAnimationFrame(i),window.addEventListener("scroll",s)}),to(()=>{r(location.hash)}),pt(()=>{window.removeEventListener("scroll",s)});function i(){if(!n.value)return;const l=[].slice.call(e.value.querySelectorAll(".outline-link")),c=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(k=>l.some(M=>M.hash===k.hash&&k.offsetParent!==null)),u=window.scrollY,h=window.innerHeight,v=document.body.offsetHeight,g=Math.abs(u+h-v)<1;if(c.length&&g){r(c[c.length-1].hash);return}for(let k=0;k{const s=Et("VPDocAsideOutlineItem",!0);return d(),m("ul",{class:he(e.root?"root":"nested")},[(d(!0),m(G,null,Se(e.headers,({children:o,link:i,title:r})=>(d(),m("li",null,[b("a",{class:"outline-link",href:i,onClick:n[0]||(n[0]=(...l)=>e.onClick&&e.onClick(...l))},ae(r),9,H0),o!=null&&o.length?(d(),Q(s,{key:0,headers:o,onClick:e.onClick},null,8,["headers","onClick"])):j("",!0)]))),256))],2)}}});const R0=O(D0,[["__scopeId","data-v-1188541a"]]),z0=e=>(qe("data-v-2865c0b0"),e=e(),Ye(),e),U0={class:"content"},j0={class:"outline-title"},K0={"aria-labelledby":"doc-outline-aria-label"},W0=z0(()=>b("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),q0=D({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:n}=le(),s=ie(()=>{var h;return(h=t.value.outline)!=null?h:n.value.outline}),o=We("onContentUpdated");o.value=()=>{i.value=I0(s.value)};const i=ue([]),r=ie(()=>i.value.length>0),l=ue(),c=ue();O0(l,c);function u({target:h}){const v="#"+h.href.split("#")[1],g=document.querySelector(decodeURIComponent(v));g==null||g.focus()}return(h,v)=>(d(),m("div",{class:he(["VPDocAsideOutline",{"has-outline":_(r)}]),ref_key:"container",ref:l},[b("div",U0,[b("div",{class:"outline-marker",ref_key:"marker",ref:c},null,512),b("div",j0,ae(_(n).outlineTitle||"On this page"),1),b("nav",K0,[W0,T(R0,{headers:i.value,root:!0,onClick:u},null,8,["headers"])])])],2))}});const Y0=O(q0,[["__scopeId","data-v-2865c0b0"]]),G0={class:"VPDocAsideCarbonAds"},Q0=D({__name:"VPDocAsideCarbonAds",setup(e){const t=()=>null;return(n,s)=>(d(),m("div",G0,[T(_(t))]))}}),J0=e=>(qe("data-v-afc4c1a1"),e=e(),Ye(),e),X0={class:"VPDocAside"},Z0=J0(()=>b("div",{class:"spacer"},null,-1)),eh=D({__name:"VPDocAside",setup(e){const{theme:t}=le();return(n,s)=>(d(),m("div",X0,[E(n.$slots,"aside-top",{},void 0,!0),E(n.$slots,"aside-outline-before",{},void 0,!0),T(Y0),E(n.$slots,"aside-outline-after",{},void 0,!0),Z0,E(n.$slots,"aside-ads-before",{},void 0,!0),_(t).carbonAds?(d(),Q(Q0,{key:0})):j("",!0),E(n.$slots,"aside-ads-after",{},void 0,!0),E(n.$slots,"aside-bottom",{},void 0,!0)]))}});const th=O(eh,[["__scopeId","data-v-afc4c1a1"]]);function nh(){const{theme:e,page:t}=le();return ie(()=>{const{text:n="Edit this page",pattern:s}=e.value.editLink||{},{relativePath:o}=t.value;return{url:s.replace(/:path/g,o),text:n}})}function sh(){const{page:e,theme:t,frontmatter:n}=le();return ie(()=>{const s=br(t.value.sidebar,e.value.relativePath),o=Ma(s),i=o.findIndex(r=>Xt(e.value.relativePath,r.link));return{prev:n.value.prev?{...o[i-1],text:n.value.prev}:o[i-1],next:n.value.next?{...o[i+1],text:n.value.next}:o[i+1]}})}const oh={},ih={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},rh=b("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),lh=b("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),ch=[rh,lh];function ah(e,t){return d(),m("svg",ih,ch)}const uh=O(oh,[["render",ah]]),fh={class:"VPLastUpdated"},dh=["datetime"],hh=D({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:n}=le(),s=ie(()=>new Date(n.value.lastUpdated)),o=ie(()=>s.value.toISOString()),i=ue("");return De(()=>{jt(()=>{i.value=s.value.toLocaleString(window.navigator.language)})}),(r,l)=>{var c;return d(),m("p",fh,[Ve(ae((c=_(t).lastUpdatedText)!=null?c:"Last updated")+": ",1),b("time",{datetime:_(o)},ae(i.value),9,dh)])}}});const _h=O(hh,[["__scopeId","data-v-18fe8fc2"]]),ph={key:0,class:"VPDocFooter"},vh={key:0,class:"edit-info"},mh={key:0,class:"edit-link"},gh={key:1,class:"last-updated"},bh={key:1,class:"prev-next"},yh={class:"pager"},xh=["href"],wh=["innerHTML"],kh=["innerHTML"],$h=["href"],Ph=["innerHTML"],Ch=["innerHTML"],Sh=D({__name:"VPDocFooter",setup(e){const{theme:t,page:n,frontmatter:s}=le(),o=nh(),i=sh(),r=ie(()=>t.value.editLink&&s.value.editLink!==!1),l=ie(()=>n.value.lastUpdated&&s.value.lastUpdated!==!1),c=ie(()=>r.value||l.value||i.value.prev||i.value.next);return(u,h)=>{var v,g,k,M;return _(c)?(d(),m("footer",ph,[_(r)||_(l)?(d(),m("div",vh,[_(r)?(d(),m("div",mh,[T(Lt,{class:"edit-link-button",href:_(o).url,"no-icon":!0},{default:B(()=>[T(uh,{class:"edit-link-icon"}),Ve(" "+ae(_(o).text),1)]),_:1},8,["href"])])):j("",!0),_(l)?(d(),m("div",gh,[T(_h)])):j("",!0)])):j("",!0),_(i).prev||_(i).next?(d(),m("div",bh,[b("div",yh,[_(i).prev?(d(),m("a",{key:0,class:"pager-link prev",href:_(jn)(_(i).prev.link)},[b("span",{class:"desc",innerHTML:(g=(v=_(t).docFooter)==null?void 0:v.prev)!=null?g:"Previous page"},null,8,wh),b("span",{class:"title",innerHTML:_(i).prev.text},null,8,kh)],8,xh)):j("",!0)]),b("div",{class:he(["pager",{"has-prev":_(i).prev}])},[_(i).next?(d(),m("a",{key:0,class:"pager-link next",href:_(jn)(_(i).next.link)},[b("span",{class:"desc",innerHTML:(M=(k=_(t).docFooter)==null?void 0:k.next)!=null?M:"Next page"},null,8,Ph),b("span",{class:"title",innerHTML:_(i).next.text},null,8,Ch)],8,$h)):j("",!0)],2)])):j("",!0)])):j("",!0)}}});const Th=O(Sh,[["__scopeId","data-v-21f75714"]]),Vh=e=>(qe("data-v-cfb513e0"),e=e(),Ye(),e),Eh={class:"container"},Lh={key:0,class:"aside"},Mh=Vh(()=>b("div",{class:"aside-curtain"},null,-1)),Ih={class:"aside-container"},Ah={class:"aside-content"},Nh={class:"content"},Bh={class:"content-container"},Oh={class:"main"},Fh=D({__name:"VPDoc",setup(e){const t=vt(),{hasSidebar:n,hasAside:s}=tt(),o=ie(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,"")),i=ue();return ns("onContentUpdated",i),(r,l)=>{const c=Et("Content");return d(),m("div",{class:he(["VPDoc",{"has-sidebar":_(n),"has-aside":_(s)}])},[b("div",Eh,[_(s)?(d(),m("div",Lh,[Mh,b("div",Ih,[b("div",Ah,[T(th,null,{"aside-top":B(()=>[E(r.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":B(()=>[E(r.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":B(()=>[E(r.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":B(()=>[E(r.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":B(()=>[E(r.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":B(()=>[E(r.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])])):j("",!0),b("div",Nh,[b("div",Bh,[E(r.$slots,"doc-before",{},void 0,!0),b("main",Oh,[T(c,{class:he(["vp-doc",_(o)]),onContentUpdated:i.value},null,8,["class","onContentUpdated"])]),E(r.$slots,"doc-footer-before",{},void 0,!0),T(Th),E(r.$slots,"doc-after",{},void 0,!0)])])])],2)}}});const Hh=O(Fh,[["__scopeId","data-v-cfb513e0"]]),Dh=D({__name:"VPContent",setup(e){const t=vt(),{frontmatter:n}=le(),{hasSidebar:s}=tt(),o=We("NotFound");return(i,r)=>(d(),m("div",{class:he(["VPContent",{"has-sidebar":_(s),"is-home":_(n).layout==="home"}]),id:"VPContent"},[_(t).component===_(o)?(d(),Q(_(o),{key:0})):_(n).layout==="page"?(d(),Q(A1,{key:1})):_(n).layout==="home"?(d(),Q(b0,{key:2},{"home-hero-before":B(()=>[E(i.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-after":B(()=>[E(i.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":B(()=>[E(i.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":B(()=>[E(i.$slots,"home-features-after",{},void 0,!0)]),_:3})):(d(),Q(Hh,{key:3},{"doc-footer-before":B(()=>[E(i.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":B(()=>[E(i.$slots,"doc-before",{},void 0,!0)]),"doc-after":B(()=>[E(i.$slots,"doc-after",{},void 0,!0)]),"aside-top":B(()=>[E(i.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":B(()=>[E(i.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":B(()=>[E(i.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":B(()=>[E(i.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":B(()=>[E(i.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":B(()=>[E(i.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});const Rh=O(Dh,[["__scopeId","data-v-d981fe29"]]),zh={class:"container"},Uh=["innerHTML"],jh=["innerHTML"],Kh=D({__name:"VPFooter",setup(e){const{theme:t}=le(),{hasSidebar:n}=tt();return(s,o)=>_(t).footer?(d(),m("footer",{key:0,class:he(["VPFooter",{"has-sidebar":_(n)}])},[b("div",zh,[_(t).footer.message?(d(),m("p",{key:0,class:"message",innerHTML:_(t).footer.message},null,8,Uh)):j("",!0),_(t).footer.copyright?(d(),m("p",{key:1,class:"copyright",innerHTML:_(t).footer.copyright},null,8,jh)):j("",!0)])],2)):j("",!0)}});const Wh=O(Kh,[["__scopeId","data-v-9f24cc86"]]),qh={key:0,class:"Layout"},Yh=D({__name:"Layout",setup(e){const{isOpen:t,open:n,close:s}=tt(),o=vt();Ze(()=>o.path,s),Ia(t,s),ns("close-sidebar",s);const{frontmatter:i}=le();return(r,l)=>{const c=Et("Content");return _(i).layout!==!1?(d(),m("div",qh,[E(r.$slots,"layout-top",{},void 0,!0),T(Na),T(Fa,{class:"backdrop",show:_(t),onClick:_(s)},null,8,["show","onClick"]),T(Rd,null,{"nav-bar-title-before":B(()=>[E(r.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":B(()=>[E(r.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":B(()=>[E(r.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":B(()=>[E(r.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":B(()=>[E(r.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":B(()=>[E(r.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),T(n1,{open:_(t),onOpenMenu:_(n)},null,8,["open","onOpenMenu"]),T(E1,{open:_(t)},{"sidebar-nav-before":B(()=>[E(r.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":B(()=>[E(r.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),T(Rh,null,{"home-hero-before":B(()=>[E(r.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-after":B(()=>[E(r.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":B(()=>[E(r.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":B(()=>[E(r.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":B(()=>[E(r.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":B(()=>[E(r.$slots,"doc-before",{},void 0,!0)]),"doc-after":B(()=>[E(r.$slots,"doc-after",{},void 0,!0)]),"aside-top":B(()=>[E(r.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":B(()=>[E(r.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":B(()=>[E(r.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":B(()=>[E(r.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":B(()=>[E(r.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":B(()=>[E(r.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),T(Wh),E(r.$slots,"layout-bottom",{},void 0,!0)])):(d(),Q(c,{key:1}))}}});const Gh=O(Yh,[["__scopeId","data-v-f44a984a"]]),us=e=>(qe("data-v-95656537"),e=e(),Ye(),e),Qh={class:"NotFound"},Jh=us(()=>b("p",{class:"code"},"404",-1)),Xh=us(()=>b("h1",{class:"title"},"PAGE NOT FOUND",-1)),Zh=us(()=>b("div",{class:"divider"},null,-1)),e_=us(()=>b("blockquote",{class:"quote"}," But if you don't change your direction, and if you keep looking, you may end up where you are heading. ",-1)),t_={class:"action"},n_=["href"],s_=D({__name:"NotFound",setup(e){const{site:t}=le();return(n,s)=>(d(),m("div",Qh,[Jh,Xh,Zh,e_,b("div",t_,[b("a",{class:"link",href:_(t).base,"aria-label":"go to home"}," Take me home ",8,n_)])]))}});const o_=O(s_,[["__scopeId","data-v-95656537"]]);const i_={Layout:Gh,NotFound:o_,enhanceApp:({app:e})=>{e.component("Badge",ua)}},r_={__name:"index",props:{text:String,color:{type:String,default:"#f40"}},setup(e){return(t,n)=>(d(),m("span",{style:mn({color:e.color})},ae(e.text),5))}};const zt={...i_,enhanceApp({app:e}){e.component("MyText",r_)}};function l_(e,t){let n=[],s=!0;const o=i=>{if(s){s=!1;return}n.forEach(r=>document.head.removeChild(r)),n=[],i.forEach(r=>{const l=c_(r);document.head.appendChild(l),n.push(l)})};jt(()=>{const i=e.data,r=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[];document.title=_r(r,i),document.querySelector("meta[name=description]").setAttribute("content",l||r.description),o(ga(r.head,u_(c)))})}function c_([e,t,n]){const s=document.createElement(e);for(const o in t)s.setAttribute(o,t[o]);return n&&(s.innerHTML=n),s}function a_(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function u_(e){return e.filter(t=>!a_(t))}const ks=new Set,Vr=()=>document.createElement("link"),f_=e=>{const t=Vr();t.rel="prefetch",t.href=e,document.head.appendChild(t)},d_=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let Mn;const h_=Le&&(Mn=Vr())&&Mn.relList&&Mn.relList.supports&&Mn.relList.supports("prefetch")?f_:d_;function __(){if(!Le||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(r=>{if(r.isIntersecting){const l=r.target;n.unobserve(l);const{pathname:c}=l;if(!ks.has(c)){ks.add(c);const u=pr(c);h_(u)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{target:r,hostname:l,pathname:c}=i,u=c.match(/\.\w+$/);u&&u[0]!==".html"||r!=="_blank"&&l===location.hostname&&(c!==location.pathname?n.observe(i):ks.add(c))})})};De(s);const o=vt();Ze(()=>o.path,s),pt(()=>{n&&n.disconnect()})}const p_=D({setup(e,{slots:t}){const n=ue(!1);return De(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function v_(){if(Le){const e=new Map;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const o=n.parentElement,i=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!o||!i)return;const r=/language-(shellscript|shell|bash|sh|zsh)/.test(o.classList.toString());let{innerText:l=""}=i;r&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),m_(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function m_(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),o=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),o&&(s.removeAllRanges(),s.addRange(o)),n&&n.focus()}}const Er=zt.NotFound||(()=>"404 Not Found"),g_=D({name:"VitePressApp",setup(){const{site:e}=le();return De(()=>{Ze(()=>e.value.lang,t=>{document.documentElement.lang=t},{immediate:!0})}),__(),v_(),zt.setup&&zt.setup(),()=>Un(zt.Layout)}});function b_(){const e=x_(),t=y_();t.provide(mr,e);const n=wa(e.route);return t.provide(vr,n),t.provide("NotFound",Er),t.component("Content",Ca),t.component("ClientOnly",p_),Object.defineProperty(t.config.globalProperties,"$frontmatter",{get(){return n.frontmatter.value}}),zt.enhanceApp&&zt.enhanceApp({app:t,router:e,siteData:Yt}),{app:t,router:e,data:n}}function y_(){return ia(g_)}function x_(){let e=Le,t;return $a(n=>{let s=pr(n);return e&&(t=s),(e||t===s)&&(s=s.replace(/\.js$/,".lean.js")),Le&&(e=!1),dr(()=>import(s),[])},Er)}if(Le){const{app:e,router:t,data:n}=b_();t.go().then(()=>{l_(t.route,n.site),e.mount("#app")})}export{D as A,Pa as B,vt as C,le as D,G as F,O as _,gc as a,b,m as c,b_ as createApp,Ye as d,ue as e,j as f,T as g,Et as h,Ve as i,De as j,pt as k,qc as l,Ze as m,he as n,d as o,qe as p,w_ as q,Se as r,$_ as s,ae as t,_ as u,k_ as v,B as w,ie as x,jt as y,E as z}; +}`)),document.head.appendChild(k),s.value=g,l[g?"add":"remove"]("dark"),window.getComputedStyle(k).opacity,document.head.removeChild(k)}return h}return Ze(s,r=>{n.value=r}),(r,l)=>(d(),Q(lf,{class:"VPSwitchAppearance","aria-label":"toggle dark mode","aria-checked":s.value,onClick:_(o)},{default:B(()=>[T(hf,{class:"sun"}),T(bf,{class:"moon"})]),_:1},8,["aria-checked","onClick"]))}});const uo=O(yf,[["__scopeId","data-v-481098f9"]]),xf={key:0,class:"VPNavBarAppearance"},wf=R({__name:"VPNavBarAppearance",setup(e){const{site:t}=le();return(n,s)=>_(t).appearance?(d(),m("div",xf,[T(uo)])):U("",!0)}});const kf=O(wf,[["__scopeId","data-v-a3e7452b"]]),$f={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',slack:'Slack',twitter:'Twitter',youtube:'YouTube'},Pf=["href","innerHTML"],Cf=R({__name:"VPSocialLink",props:{icon:null,link:null},setup(e){const t=e,n=ie(()=>typeof t.icon=="object"?t.icon.svg:$f[t.icon]);return(s,o)=>(d(),m("a",{class:"VPSocialLink",href:e.link,target:"_blank",rel:"noopener",innerHTML:_(n)},null,8,Pf))}});const Sf=O(Cf,[["__scopeId","data-v-e57698f6"]]),Tf={class:"VPSocialLinks"},Vf=R({__name:"VPSocialLinks",props:{links:null},setup(e){return(t,n)=>(d(),m("div",Tf,[(d(!0),m(G,null,Se(e.links,({link:s,icon:o})=>(d(),Q(Sf,{key:s,icon:o,link:s},null,8,["icon","link"]))),128))]))}});const fo=O(Vf,[["__scopeId","data-v-f6988cfb"]]),Ef=R({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=le();return(n,s)=>_(t).socialLinks?(d(),Q(fo,{key:0,class:"VPNavBarSocialLinks",links:_(t).socialLinks},null,8,["links"])):U("",!0)}});const Lf=O(Ef,[["__scopeId","data-v-738bef5a"]]),Mf=e=>(qe("data-v-e4361c82"),e=e(),Ye(),e),If={key:0,class:"group"},Af={class:"trans-title"},Nf={key:1,class:"group"},Bf={class:"item appearance"},Of=Mf(()=>b("p",{class:"label"},"Appearance",-1)),Ff={class:"appearance-action"},Hf={key:2,class:"group"},Rf={class:"item social-links"},Df=R({__name:"VPNavBarExtra",setup(e){const{site:t,theme:n}=le(),s=ie(()=>n.value.localeLinks||t.value.appearance||n.value.socialLinks);return(o,i)=>_(s)?(d(),Q(ao,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:B(()=>[_(n).localeLinks?(d(),m("div",If,[b("p",Af,ae(_(n).localeLinks.text),1),(d(!0),m(G,null,Se(_(n).localeLinks.items,r=>(d(),Q(as,{key:r.link,item:r},null,8,["item"]))),128))])):U("",!0),_(t).appearance?(d(),m("div",Nf,[b("div",Bf,[Of,b("div",Ff,[T(uo)])])])):U("",!0),_(n).socialLinks?(d(),m("div",Hf,[b("div",Rf,[T(fo,{class:"social-links-list",links:_(n).socialLinks},null,8,["links"])])])):U("",!0)]),_:1})):U("",!0)}});const zf=O(Df,[["__scopeId","data-v-e4361c82"]]),jf=e=>(qe("data-v-e5dd9c1c"),e=e(),Ye(),e),Uf=["aria-expanded"],Kf=jf(()=>b("span",{class:"container"},[b("span",{class:"top"}),b("span",{class:"middle"}),b("span",{class:"bottom"})],-1)),Wf=[Kf],qf=R({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,n)=>(d(),m("button",{type:"button",class:he(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:n[0]||(n[0]=s=>t.$emit("click"))},Wf,10,Uf))}});const Yf=O(qf,[["__scopeId","data-v-e5dd9c1c"]]),Gf={class:"container"},Qf={class:"content"},Jf=R({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{hasSidebar:t}=tt();return(n,s)=>(d(),m("div",{class:he(["VPNavBar",{"has-sidebar":_(t)}])},[b("div",Gf,[T(Ka,null,{"nav-bar-title-before":B(()=>[E(n.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":B(()=>[E(n.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3}),b("div",Qf,[E(n.$slots,"nav-bar-content-before",{},void 0,!0),T(Xa,{class:"search"}),T(Uu,{class:"menu"}),T(ef,{class:"translations"}),T(kf,{class:"appearance"}),T(Lf,{class:"social-links"}),T(zf,{class:"extra"}),E(n.$slots,"nav-bar-content-after",{},void 0,!0),T(Yf,{class:"hamburger",active:e.isScreenOpen,onClick:s[0]||(s[0]=o=>n.$emit("toggle-screen"))},null,8,["active"])])])],2))}});const Xf=O(Jf,[["__scopeId","data-v-6f1d18b5"]]);function Zf(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1),Dt=[],Wn=!1,_o=-1,cn=void 0,Ct=void 0,an=void 0,Pr=function(t){return Dt.some(function(n){return!!(n.options.allowTouchMove&&n.options.allowTouchMove(t))})},qn=function(t){var n=t||window.event;return Pr(n.target)||n.touches.length>1?!0:(n.preventDefault&&n.preventDefault(),!1)},ed=function(t){if(an===void 0){var n=!!t&&t.reserveScrollBarGap===!0,s=window.innerWidth-document.documentElement.clientWidth;if(n&&s>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);an=document.body.style.paddingRight,document.body.style.paddingRight=o+s+"px"}}cn===void 0&&(cn=document.body.style.overflow,document.body.style.overflow="hidden")},td=function(){an!==void 0&&(document.body.style.paddingRight=an,an=void 0),cn!==void 0&&(document.body.style.overflow=cn,cn=void 0)},nd=function(){return window.requestAnimationFrame(function(){if(Ct===void 0){Ct={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,n=t.scrollY,s=t.scrollX,o=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-n,document.body.style.left=-s,setTimeout(function(){return window.requestAnimationFrame(function(){var i=o-window.innerHeight;i&&n>=o&&(document.body.style.top=-(n+i))})},300)}})},sd=function(){if(Ct!==void 0){var t=-parseInt(document.body.style.top,10),n=-parseInt(document.body.style.left,10);document.body.style.position=Ct.position,document.body.style.top=Ct.top,document.body.style.left=Ct.left,window.scrollTo(n,t),Ct=void 0}},od=function(t){return t?t.scrollHeight-t.scrollTop<=t.clientHeight:!1},id=function(t,n){var s=t.targetTouches[0].clientY-_o;return Pr(t.target)?!1:n&&n.scrollTop===0&&s>0||od(n)&&s<0?qn(t):(t.stopPropagation(),!0)},Cr=function(t,n){if(!t){console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");return}if(!Dt.some(function(o){return o.targetElement===t})){var s={targetElement:t,options:n||{}};Dt=[].concat(Zf(Dt),[s]),Kn?nd():ed(n),Kn&&(t.ontouchstart=function(o){o.targetTouches.length===1&&(_o=o.targetTouches[0].clientY)},t.ontouchmove=function(o){o.targetTouches.length===1&&id(o,t)},Wn||(document.addEventListener("touchmove",qn,ho?{passive:!1}:void 0),Wn=!0))}},Sr=function(){Kn&&(Dt.forEach(function(t){t.targetElement.ontouchstart=null,t.targetElement.ontouchmove=null}),Wn&&(document.removeEventListener("touchmove",qn,ho?{passive:!1}:void 0),Wn=!1),_o=-1),Kn?sd():td(),Dt=[]};const rd=R({__name:"VPNavScreenMenuLink",props:{text:null,link:null},setup(e){const t=We("close-screen");return(n,s)=>(d(),Q(Lt,{class:"VPNavScreenMenuLink",href:e.link,onClick:_(t)},{default:B(()=>[Ve(ae(e.text),1)]),_:1},8,["href","onClick"]))}});const ld=O(rd,[["__scopeId","data-v-b7098508"]]),cd={},ad={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ud=b("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),fd=[ud];function dd(e,t){return d(),m("svg",ad,fd)}const hd=O(cd,[["render",dd]]),_d=R({__name:"VPNavScreenMenuGroupLink",props:{text:null,link:null},setup(e){const t=We("close-screen");return(n,s)=>(d(),Q(Lt,{class:"VPNavScreenMenuGroupLink",href:e.link,onClick:_(t)},{default:B(()=>[Ve(ae(e.text),1)]),_:1},8,["href","onClick"]))}});const Tr=O(_d,[["__scopeId","data-v-7f173864"]]),pd={class:"VPNavScreenMenuGroupSection"},vd={key:0,class:"title"},md=R({__name:"VPNavScreenMenuGroupSection",props:{text:null,items:null},setup(e){return(t,n)=>(d(),m("div",pd,[e.text?(d(),m("p",vd,ae(e.text),1)):U("",!0),(d(!0),m(G,null,Se(e.items,s=>(d(),Q(Tr,{key:s.text,text:s.text,link:s.link},null,8,["text","link"]))),128))]))}});const gd=O(md,[["__scopeId","data-v-7478538b"]]),bd=["aria-controls","aria-expanded"],yd={class:"button-text"},xd=["id"],wd={key:1,class:"group"},kd=R({__name:"VPNavScreenMenuGroup",props:{text:null,items:null},setup(e){const t=e,n=ue(!1),s=ie(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){n.value=!n.value}return(i,r)=>(d(),m("div",{class:he(["VPNavScreenMenuGroup",{open:n.value}])},[b("button",{class:"button","aria-controls":_(s),"aria-expanded":n.value,onClick:o},[b("span",yd,ae(e.text),1),T(hd,{class:"button-icon"})],8,bd),b("div",{id:_(s),class:"items"},[(d(!0),m(G,null,Se(e.items,l=>(d(),m(G,{key:l.text},["link"in l?(d(),m("div",{key:l.text,class:"item"},[T(Tr,{text:l.text,link:l.link},null,8,["text","link"])])):(d(),m("div",wd,[T(gd,{text:l.text,items:l.items},null,8,["text","items"])]))],64))),128))],8,xd)],2))}});const $d=O(kd,[["__scopeId","data-v-5bc84358"]]),Pd={key:0,class:"VPNavScreenMenu"},Cd=R({__name:"VPNavScreenMenu",setup(e){const{theme:t}=le();return(n,s)=>_(t).nav?(d(),m("nav",Pd,[(d(!0),m(G,null,Se(_(t).nav,o=>(d(),m(G,{key:o.text},["link"in o?(d(),Q(ld,{key:0,text:o.text,link:o.link},null,8,["text","link"])):(d(),Q($d,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):U("",!0)}}),Sd=e=>(qe("data-v-7bc19822"),e=e(),Ye(),e),Td={key:0,class:"VPNavScreenAppearance"},Vd=Sd(()=>b("p",{class:"text"},"Appearance",-1)),Ed=R({__name:"VPNavScreenAppearance",setup(e){const{site:t}=le();return(n,s)=>_(t).appearance?(d(),m("div",Td,[Vd,T(uo)])):U("",!0)}});const Ld=O(Ed,[["__scopeId","data-v-7bc19822"]]),Md={class:"list"},Id=["href"],Ad=R({__name:"VPNavScreenTranslations",setup(e){const{theme:t}=le(),n=ue(!1);function s(){n.value=!n.value}return(o,i)=>_(t).localeLinks?(d(),m("div",{key:0,class:he(["VPNavScreenTranslations",{open:n.value}])},[b("button",{class:"title",onClick:s},[T($r,{class:"icon lang"}),Ve(" "+ae(_(t).localeLinks.text)+" ",1),T(kr,{class:"icon chevron"})]),b("ul",Md,[(d(!0),m(G,null,Se(_(t).localeLinks.items,r=>(d(),m("li",{key:r.link,class:"item"},[b("a",{class:"link",href:r.link},ae(r.text),9,Id)]))),128))])],2)):U("",!0)}});const Nd=O(Ad,[["__scopeId","data-v-6bfcad30"]]),Bd=R({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=le();return(n,s)=>_(t).socialLinks?(d(),Q(fo,{key:0,class:"VPNavScreenSocialLinks",links:_(t).socialLinks},null,8,["links"])):U("",!0)}}),Od={class:"container"},Fd=R({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=ue(null);function n(){Cr(t.value,{reserveScrollBarGap:!0})}function s(){Sr()}return(o,i)=>(d(),Q(ls,{name:"fade",onEnter:n,onAfterLeave:s},{default:B(()=>[e.open?(d(),m("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t},[b("div",Od,[E(o.$slots,"nav-screen-content-before",{},void 0,!0),T(Cd,{class:"menu"}),T(Nd,{class:"translations"}),T(Ld,{class:"appearance"}),T(Bd,{class:"social-links"}),E(o.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):U("",!0)]),_:3}))}});const Hd=O(Fd,[["__scopeId","data-v-4a289eba"]]),Rd=R({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:n,toggleScreen:s}=Ha(),{hasSidebar:o}=tt();return ns("close-screen",n),(i,r)=>(d(),m("header",{class:he(["VPNav",{"no-sidebar":!_(o)}])},[T(Xf,{"is-screen-open":_(t),onToggleScreen:_(s)},{"nav-bar-title-before":B(()=>[E(i.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":B(()=>[E(i.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":B(()=>[E(i.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":B(()=>[E(i.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),T(Hd,{open:_(t)},{"nav-screen-content-before":B(()=>[E(i.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":B(()=>[E(i.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])],2))}});const Dd=O(Rd,[["__scopeId","data-v-a50780ff"]]),zd={},jd={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ud=b("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),Kd=b("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),Wd=b("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),qd=b("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),Yd=[Ud,Kd,Wd,qd];function Gd(e,t){return d(),m("svg",jd,Yd)}const Qd=O(zd,[["render",Gd]]),Jd=e=>(qe("data-v-b6162a8b"),e=e(),Ye(),e),Xd={key:0,class:"VPLocalNav"},Zd=["aria-expanded"],e1=Jd(()=>b("span",{class:"menu-text"},"Menu",-1)),t1=R({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{hasSidebar:t}=tt();function n(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(s,o)=>_(t)?(d(),m("div",Xd,[b("button",{class:"menu","aria-expanded":e.open,"aria-controls":"VPSidebarNav",onClick:o[0]||(o[0]=i=>s.$emit("open-menu"))},[T(Qd,{class:"menu-icon"}),e1],8,Zd),b("a",{class:"top-link",href:"#",onClick:n}," Return to top ")])):U("",!0)}});const n1=O(t1,[["__scopeId","data-v-b6162a8b"]]),s1={},o1={version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},i1=b("path",{d:"M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"},null,-1),r1=b("path",{d:"M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"},null,-1),l1=[i1,r1];function c1(e,t){return d(),m("svg",o1,l1)}const a1=O(s1,[["render",c1]]),u1={},f1={xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:"0 0 24 24"},d1=b("path",{d:"M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"},null,-1),h1=b("path",{d:"M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"},null,-1),_1=[d1,h1];function p1(e,t){return d(),m("svg",f1,_1)}const v1=O(u1,[["render",p1]]),m1=["innerHTML"],g1=R({__name:"VPSidebarLink",props:{item:null,depth:{default:1}},setup(e){const{page:t,frontmatter:n}=le(),s=ie(()=>n.value.sidebarDepth||1/0),o=We("close-sidebar");return(i,r)=>{const l=Et("VPSidebarLink",!0);return d(),m(G,null,[T(Lt,{class:he(["link",{active:_(Xt)(_(t).relativePath,e.item.link)}]),style:mn({paddingLeft:16*(e.depth-1)+"px"}),href:e.item.link,onClick:_(o)},{default:B(()=>[b("span",{innerHTML:e.item.text,class:he(["link-text",{light:e.depth>1}])},null,10,m1)]),_:1},8,["class","style","href","onClick"]),"items"in e.item&&e.depth<_(s)?(d(!0),m(G,{key:0},Se(e.item.items,c=>(d(),Q(l,{key:c.link,item:c,depth:e.depth+1},null,8,["item","depth"]))),128)):U("",!0)],64)}}});const b1=O(g1,[["__scopeId","data-v-36b976d1"]]),y1=["role"],x1=["innerHTML"],w1={class:"action"},k1={class:"items"},$1=R({__name:"VPSidebarGroup",props:{text:null,items:null,collapsible:{type:Boolean},collapsed:{type:Boolean}},setup(e){const t=e,n=ue(!1);Ut(()=>{n.value=!!(t.collapsible&&t.collapsed)});const{page:s}=le();Ut(()=>{t.items.some(i=>Xt(s.value.relativePath,i.link))&&(n.value=!1)});function o(){t.collapsible&&(n.value=!n.value)}return(i,r)=>(d(),m("section",{class:he(["VPSidebarGroup",{collapsible:e.collapsible,collapsed:n.value}])},[e.text?(d(),m("div",{key:0,class:"title",role:e.collapsible?"button":void 0,onClick:o},[b("h2",{innerHTML:e.text,class:"title-text"},null,8,x1),b("div",w1,[T(v1,{class:"icon minus"}),T(a1,{class:"icon plus"})])],8,y1)):U("",!0),b("div",k1,[(d(!0),m(G,null,Se(e.items,l=>(d(),Q(b1,{key:l.link,item:l},null,8,["item"]))),128))])],2))}});const P1=O($1,[["__scopeId","data-v-6e45c352"]]),C1=e=>(qe("data-v-a186aa16"),e=e(),Ye(),e),S1={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},T1=C1(()=>b("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),V1=R({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const t=e,{sidebar:n,hasSidebar:s}=tt();let o=ue(null);function i(){Cr(o.value,{reserveScrollBarGap:!0})}function r(){Sr()}return ji(async()=>{var l;t.open?(i(),(l=o.value)==null||l.focus()):r()}),(l,c)=>_(s)?(d(),m("aside",{key:0,class:he(["VPSidebar",{open:e.open}]),ref_key:"navEl",ref:o,onClick:c[0]||(c[0]=na(()=>{},["stop"]))},[b("nav",S1,[T1,E(l.$slots,"sidebar-nav-before",{},void 0,!0),(d(!0),m(G,null,Se(_(n),u=>(d(),m("div",{key:u.text,class:"group"},[T(P1,{text:u.text,items:u.items,collapsible:u.collapsible,collapsed:u.collapsed},null,8,["text","items","collapsible","collapsed"])]))),128)),E(l.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):U("",!0)}});const E1=O(V1,[["__scopeId","data-v-a186aa16"]]),L1={},M1={class:"VPPage"};function I1(e,t){const n=Et("Content");return d(),m("div",M1,[T(n)])}const A1=O(L1,[["render",I1]]),N1=R({__name:"VPButton",props:{tag:null,size:null,theme:null,text:null,href:null},setup(e){const t=e,n=ie(()=>{var i,r;return[(i=t.size)!=null?i:"medium",(r=t.theme)!=null?r:"brand"]}),s=ie(()=>t.href&&cs.test(t.href)),o=ie(()=>t.tag?t.tag:t.href?"a":"button");return(i,r)=>(d(),Q(so(_(o)),{class:he(["VPButton",_(n)]),href:e.href?_(Un)(e.href):void 0,target:_(s)?"_blank":void 0,rel:_(s)?"noreferrer":void 0},{default:B(()=>[Ve(ae(e.text),1)]),_:1},8,["class","href","target","rel"]))}});const B1=O(N1,[["__scopeId","data-v-53dbb8eb"]]),O1=e=>(qe("data-v-0a0d4301"),e=e(),Ye(),e),F1={class:"container"},H1={class:"main"},R1={key:0,class:"name"},D1={class:"clip"},z1={key:1,class:"text"},j1={key:2,class:"tagline"},U1={key:3,class:"actions"},K1={key:0,class:"image"},W1={class:"image-container"},q1=O1(()=>b("div",{class:"image-bg"},null,-1)),Y1=R({__name:"VPHero",props:{name:null,text:null,tagline:null,image:null,actions:null},setup(e){return(t,n)=>(d(),m("div",{class:he(["VPHero",{"has-image":e.image}])},[b("div",F1,[b("div",H1,[e.name?(d(),m("h1",R1,[b("span",D1,ae(e.name),1)])):U("",!0),e.text?(d(),m("p",z1,ae(e.text),1)):U("",!0),e.tagline?(d(),m("p",j1,ae(e.tagline),1)):U("",!0),e.actions?(d(),m("div",U1,[(d(!0),m(G,null,Se(e.actions,s=>(d(),m("div",{key:s.link,class:"action"},[T(B1,{tag:"a",size:"medium",theme:s.theme,text:s.text,href:s.link},null,8,["theme","text","href"])]))),128))])):U("",!0)]),e.image?(d(),m("div",K1,[b("div",W1,[q1,T(yr,{class:"image-src",image:e.image},null,8,["image"])])])):U("",!0)])],2))}});const G1=O(Y1,[["__scopeId","data-v-0a0d4301"]]),Q1=R({__name:"VPHomeHero",setup(e){const{frontmatter:t}=le();return(n,s)=>_(t).hero?(d(),Q(G1,{key:0,class:"VPHomeHero",name:_(t).hero.name,text:_(t).hero.text,tagline:_(t).hero.tagline,image:_(t).hero.image,actions:_(t).hero.actions},null,8,["name","text","tagline","image","actions"])):U("",!0)}}),J1={},X1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Z1=b("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),e0=[Z1];function t0(e,t){return d(),m("svg",X1,e0)}const n0=O(J1,[["render",t0]]),s0={class:"box"},o0={key:0,class:"icon"},i0={class:"title"},r0={class:"details"},l0={key:1,class:"link-text"},c0={class:"link-text-value"},a0=R({__name:"VPFeature",props:{icon:null,title:null,details:null,link:null,linkText:null},setup(e){return(t,n)=>(d(),Q(Lt,{class:"VPFeature",href:e.link,"no-icon":!0},{default:B(()=>[b("article",s0,[e.icon?(d(),m("div",o0,ae(e.icon),1)):U("",!0),b("h2",i0,ae(e.title),1),b("p",r0,ae(e.details),1),e.linkText?(d(),m("div",l0,[b("p",c0,[Ve(ae(e.linkText)+" ",1),T(n0,{class:"link-text-icon"})])])):U("",!0)])]),_:1},8,["href"]))}});const u0=O(a0,[["__scopeId","data-v-b8147458"]]),f0={key:0,class:"VPFeatures"},d0={class:"container"},h0={class:"items"},_0=R({__name:"VPFeatures",props:{features:null},setup(e){const t=e,n=ie(()=>{const s=t.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s%2===0)return"grid-4"}else return});return(s,o)=>e.features?(d(),m("div",f0,[b("div",d0,[b("div",h0,[(d(!0),m(G,null,Se(e.features,i=>(d(),m("div",{key:i.title,class:he(["item",[_(n)]])},[T(u0,{icon:i.icon,title:i.title,details:i.details,link:i.link,"link-text":i.linkText},null,8,["icon","title","details","link","link-text"])],2))),128))])])])):U("",!0)}});const p0=O(_0,[["__scopeId","data-v-69662dc1"]]),v0=R({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=le();return(n,s)=>_(t).features?(d(),Q(p0,{key:0,class:"VPHomeFeatures",features:_(t).features},null,8,["features"])):U("",!0)}}),m0={class:"VPHome"},g0=R({__name:"VPHome",setup(e){return(t,n)=>{const s=Et("Content");return d(),m("div",m0,[E(t.$slots,"home-hero-before",{},void 0,!0),T(Q1),E(t.$slots,"home-hero-after",{},void 0,!0),E(t.$slots,"home-features-before",{},void 0,!0),T(v0),E(t.$slots,"home-features-after",{},void 0,!0),T(s)])}}});const b0=O(g0,[["__scopeId","data-v-1db23833"]]);var ui;const xn=typeof window<"u";xn&&((ui=window==null?void 0:window.navigator)==null?void 0:ui.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function y0(e){return e}function x0(e){return Yr()?(Gr(e),!0):!1}function w0(e){return typeof e=="function"?ie(e):ue(e)}function k0(e,t=!0){lo()?Re(e):t?e():eo(e)}const $0=xn?window:void 0;xn&&window.document;xn&&window.navigator;xn&&window.location;function P0(e,t=!1){const n=ue(),s=()=>n.value=Boolean(e());return s(),k0(s,t),n}function fi(e,t={}){const{window:n=$0}=t,s=P0(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const i=ue(!1),r=()=>{!o||("removeEventListener"in o?o.removeEventListener("change",l):o.removeListener(l))},l=()=>{!s.value||(r(),o=n.matchMedia(w0(e).value),i.value=o.matches,"addEventListener"in o?o.addEventListener("change",l):o.addListener(l))};return Ut(l),x0(()=>r()),i}const Fs=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},Hs="__vueuse_ssr_handlers__";Fs[Hs]=Fs[Hs]||{};Fs[Hs];var di;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(di||(di={}));var C0=Object.defineProperty,hi=Object.getOwnPropertySymbols,S0=Object.prototype.hasOwnProperty,T0=Object.prototype.propertyIsEnumerable,_i=(e,t,n)=>t in e?C0(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,V0=(e,t)=>{for(var n in t||(t={}))S0.call(t,n)&&_i(e,n,t[n]);if(hi)for(var n of hi(t))T0.call(t,n)&&_i(e,n,t[n]);return e};const E0={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};V0({linear:y0},E0);function L0(){const{hasSidebar:e}=tt(),t=fi("(min-width: 960px)"),n=fi("(min-width: 1280px)");return{isAsideEnabled:ie(()=>!n.value&&!t.value?!1:e.value?n.value:t.value)}}const M0=71;function I0(e){if(e===!1)return[];let t=[];return document.querySelectorAll("h2, h3, h4, h5, h6").forEach(n=>{n.textContent&&n.id&&t.push({level:Number(n.tagName[1]),title:n.innerText.replace(/\s+#\s*$/,""),link:`#${n.id}`})}),A0(t,e)}function A0(e,t=2){return N0(e,typeof t=="number"?[t,t]:t==="deep"?[2,6]:t)}function N0(e,t){const n=[];return e=e.map(s=>({...s})),e.forEach((s,o)=>{s.level>=t[0]&&s.level<=t[1]&&B0(o,e,t)&&n.push(s)}),n}function B0(e,t,n){if(e===0)return!0;const s=t[e];for(let o=e-1;o>=0;o--){const i=t[o];if(i.level=n[0]&&i.level<=n[1])return i.children==null&&(i.children=[]),i.children.push(s),!1}return!0}function O0(e,t){const{isAsideEnabled:n}=L0(),s=La(i,100);let o=null;Re(()=>{requestAnimationFrame(i),window.addEventListener("scroll",s)}),to(()=>{r(location.hash)}),pt(()=>{window.removeEventListener("scroll",s)});function i(){if(!n.value)return;const l=[].slice.call(e.value.querySelectorAll(".outline-link")),c=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(k=>l.some(M=>M.hash===k.hash&&k.offsetParent!==null)),u=window.scrollY,h=window.innerHeight,v=document.body.offsetHeight,g=Math.abs(u+h-v)<1;if(c.length&&g){r(c[c.length-1].hash);return}for(let k=0;k{const s=Et("VPDocAsideOutlineItem",!0);return d(),m("ul",{class:he(e.root?"root":"nested")},[(d(!0),m(G,null,Se(e.headers,({children:o,link:i,title:r})=>(d(),m("li",null,[b("a",{class:"outline-link",href:i,onClick:n[0]||(n[0]=(...l)=>e.onClick&&e.onClick(...l))},ae(r),9,H0),o!=null&&o.length?(d(),Q(s,{key:0,headers:o,onClick:e.onClick},null,8,["headers","onClick"])):U("",!0)]))),256))],2)}}});const D0=O(R0,[["__scopeId","data-v-1188541a"]]),z0=e=>(qe("data-v-2865c0b0"),e=e(),Ye(),e),j0={class:"content"},U0={class:"outline-title"},K0={"aria-labelledby":"doc-outline-aria-label"},W0=z0(()=>b("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),q0=R({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:n}=le(),s=ie(()=>{var h;return(h=t.value.outline)!=null?h:n.value.outline}),o=We("onContentUpdated");o.value=()=>{i.value=I0(s.value)};const i=ue([]),r=ie(()=>i.value.length>0),l=ue(),c=ue();O0(l,c);function u({target:h}){const v="#"+h.href.split("#")[1],g=document.querySelector(decodeURIComponent(v));g==null||g.focus()}return(h,v)=>(d(),m("div",{class:he(["VPDocAsideOutline",{"has-outline":_(r)}]),ref_key:"container",ref:l},[b("div",j0,[b("div",{class:"outline-marker",ref_key:"marker",ref:c},null,512),b("div",U0,ae(_(n).outlineTitle||"On this page"),1),b("nav",K0,[W0,T(D0,{headers:i.value,root:!0,onClick:u},null,8,["headers"])])])],2))}});const Y0=O(q0,[["__scopeId","data-v-2865c0b0"]]),G0={class:"VPDocAsideCarbonAds"},Q0=R({__name:"VPDocAsideCarbonAds",setup(e){const t=()=>null;return(n,s)=>(d(),m("div",G0,[T(_(t))]))}}),J0=e=>(qe("data-v-afc4c1a1"),e=e(),Ye(),e),X0={class:"VPDocAside"},Z0=J0(()=>b("div",{class:"spacer"},null,-1)),eh=R({__name:"VPDocAside",setup(e){const{theme:t}=le();return(n,s)=>(d(),m("div",X0,[E(n.$slots,"aside-top",{},void 0,!0),E(n.$slots,"aside-outline-before",{},void 0,!0),T(Y0),E(n.$slots,"aside-outline-after",{},void 0,!0),Z0,E(n.$slots,"aside-ads-before",{},void 0,!0),_(t).carbonAds?(d(),Q(Q0,{key:0})):U("",!0),E(n.$slots,"aside-ads-after",{},void 0,!0),E(n.$slots,"aside-bottom",{},void 0,!0)]))}});const th=O(eh,[["__scopeId","data-v-afc4c1a1"]]);function nh(){const{theme:e,page:t}=le();return ie(()=>{const{text:n="Edit this page",pattern:s}=e.value.editLink||{},{relativePath:o}=t.value;return{url:s.replace(/:path/g,o),text:n}})}function sh(){const{page:e,theme:t,frontmatter:n}=le();return ie(()=>{const s=br(t.value.sidebar,e.value.relativePath),o=Ma(s),i=o.findIndex(r=>Xt(e.value.relativePath,r.link));return{prev:n.value.prev?{...o[i-1],text:n.value.prev}:o[i-1],next:n.value.next?{...o[i+1],text:n.value.next}:o[i+1]}})}const oh={},ih={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},rh=b("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),lh=b("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),ch=[rh,lh];function ah(e,t){return d(),m("svg",ih,ch)}const uh=O(oh,[["render",ah]]),fh={class:"VPLastUpdated"},dh=["datetime"],hh=R({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:n}=le(),s=ie(()=>new Date(n.value.lastUpdated)),o=ie(()=>s.value.toISOString()),i=ue("");return Re(()=>{Ut(()=>{i.value=s.value.toLocaleString(window.navigator.language)})}),(r,l)=>{var c;return d(),m("p",fh,[Ve(ae((c=_(t).lastUpdatedText)!=null?c:"Last updated")+": ",1),b("time",{datetime:_(o)},ae(i.value),9,dh)])}}});const _h=O(hh,[["__scopeId","data-v-18fe8fc2"]]),ph={key:0,class:"VPDocFooter"},vh={key:0,class:"edit-info"},mh={key:0,class:"edit-link"},gh={key:1,class:"last-updated"},bh={key:1,class:"prev-next"},yh={class:"pager"},xh=["href"],wh=["innerHTML"],kh=["innerHTML"],$h=["href"],Ph=["innerHTML"],Ch=["innerHTML"],Sh=R({__name:"VPDocFooter",setup(e){const{theme:t,page:n,frontmatter:s}=le(),o=nh(),i=sh(),r=ie(()=>t.value.editLink&&s.value.editLink!==!1),l=ie(()=>n.value.lastUpdated&&s.value.lastUpdated!==!1),c=ie(()=>r.value||l.value||i.value.prev||i.value.next);return(u,h)=>{var v,g,k,M;return _(c)?(d(),m("footer",ph,[_(r)||_(l)?(d(),m("div",vh,[_(r)?(d(),m("div",mh,[T(Lt,{class:"edit-link-button",href:_(o).url,"no-icon":!0},{default:B(()=>[T(uh,{class:"edit-link-icon"}),Ve(" "+ae(_(o).text),1)]),_:1},8,["href"])])):U("",!0),_(l)?(d(),m("div",gh,[T(_h)])):U("",!0)])):U("",!0),_(i).prev||_(i).next?(d(),m("div",bh,[b("div",yh,[_(i).prev?(d(),m("a",{key:0,class:"pager-link prev",href:_(Un)(_(i).prev.link)},[b("span",{class:"desc",innerHTML:(g=(v=_(t).docFooter)==null?void 0:v.prev)!=null?g:"Previous page"},null,8,wh),b("span",{class:"title",innerHTML:_(i).prev.text},null,8,kh)],8,xh)):U("",!0)]),b("div",{class:he(["pager",{"has-prev":_(i).prev}])},[_(i).next?(d(),m("a",{key:0,class:"pager-link next",href:_(Un)(_(i).next.link)},[b("span",{class:"desc",innerHTML:(M=(k=_(t).docFooter)==null?void 0:k.next)!=null?M:"Next page"},null,8,Ph),b("span",{class:"title",innerHTML:_(i).next.text},null,8,Ch)],8,$h)):U("",!0)],2)])):U("",!0)])):U("",!0)}}});const Th=O(Sh,[["__scopeId","data-v-21f75714"]]),Vh=e=>(qe("data-v-cfb513e0"),e=e(),Ye(),e),Eh={class:"container"},Lh={key:0,class:"aside"},Mh=Vh(()=>b("div",{class:"aside-curtain"},null,-1)),Ih={class:"aside-container"},Ah={class:"aside-content"},Nh={class:"content"},Bh={class:"content-container"},Oh={class:"main"},Fh=R({__name:"VPDoc",setup(e){const t=vt(),{hasSidebar:n,hasAside:s}=tt(),o=ie(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,"")),i=ue();return ns("onContentUpdated",i),(r,l)=>{const c=Et("Content");return d(),m("div",{class:he(["VPDoc",{"has-sidebar":_(n),"has-aside":_(s)}])},[b("div",Eh,[_(s)?(d(),m("div",Lh,[Mh,b("div",Ih,[b("div",Ah,[T(th,null,{"aside-top":B(()=>[E(r.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":B(()=>[E(r.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":B(()=>[E(r.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":B(()=>[E(r.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":B(()=>[E(r.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":B(()=>[E(r.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])])):U("",!0),b("div",Nh,[b("div",Bh,[E(r.$slots,"doc-before",{},void 0,!0),b("main",Oh,[T(c,{class:he(["vp-doc",_(o)]),onContentUpdated:i.value},null,8,["class","onContentUpdated"])]),E(r.$slots,"doc-footer-before",{},void 0,!0),T(Th),E(r.$slots,"doc-after",{},void 0,!0)])])])],2)}}});const Hh=O(Fh,[["__scopeId","data-v-cfb513e0"]]),Rh=R({__name:"VPContent",setup(e){const t=vt(),{frontmatter:n}=le(),{hasSidebar:s}=tt(),o=We("NotFound");return(i,r)=>(d(),m("div",{class:he(["VPContent",{"has-sidebar":_(s),"is-home":_(n).layout==="home"}]),id:"VPContent"},[_(t).component===_(o)?(d(),Q(_(o),{key:0})):_(n).layout==="page"?(d(),Q(A1,{key:1})):_(n).layout==="home"?(d(),Q(b0,{key:2},{"home-hero-before":B(()=>[E(i.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-after":B(()=>[E(i.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":B(()=>[E(i.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":B(()=>[E(i.$slots,"home-features-after",{},void 0,!0)]),_:3})):(d(),Q(Hh,{key:3},{"doc-footer-before":B(()=>[E(i.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":B(()=>[E(i.$slots,"doc-before",{},void 0,!0)]),"doc-after":B(()=>[E(i.$slots,"doc-after",{},void 0,!0)]),"aside-top":B(()=>[E(i.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":B(()=>[E(i.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":B(()=>[E(i.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":B(()=>[E(i.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":B(()=>[E(i.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":B(()=>[E(i.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});const Dh=O(Rh,[["__scopeId","data-v-d981fe29"]]),zh={class:"container"},jh=["innerHTML"],Uh=["innerHTML"],Kh=R({__name:"VPFooter",setup(e){const{theme:t}=le(),{hasSidebar:n}=tt();return(s,o)=>_(t).footer?(d(),m("footer",{key:0,class:he(["VPFooter",{"has-sidebar":_(n)}])},[b("div",zh,[_(t).footer.message?(d(),m("p",{key:0,class:"message",innerHTML:_(t).footer.message},null,8,jh)):U("",!0),_(t).footer.copyright?(d(),m("p",{key:1,class:"copyright",innerHTML:_(t).footer.copyright},null,8,Uh)):U("",!0)])],2)):U("",!0)}});const Wh=O(Kh,[["__scopeId","data-v-9f24cc86"]]),qh={key:0,class:"Layout"},Yh=R({__name:"Layout",setup(e){const{isOpen:t,open:n,close:s}=tt(),o=vt();Ze(()=>o.path,s),Ia(t,s),ns("close-sidebar",s);const{frontmatter:i}=le();return(r,l)=>{const c=Et("Content");return _(i).layout!==!1?(d(),m("div",qh,[E(r.$slots,"layout-top",{},void 0,!0),T(Na),T(Fa,{class:"backdrop",show:_(t),onClick:_(s)},null,8,["show","onClick"]),T(Dd,null,{"nav-bar-title-before":B(()=>[E(r.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":B(()=>[E(r.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":B(()=>[E(r.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":B(()=>[E(r.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":B(()=>[E(r.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":B(()=>[E(r.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),T(n1,{open:_(t),onOpenMenu:_(n)},null,8,["open","onOpenMenu"]),T(E1,{open:_(t)},{"sidebar-nav-before":B(()=>[E(r.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":B(()=>[E(r.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),T(Dh,null,{"home-hero-before":B(()=>[E(r.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-after":B(()=>[E(r.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":B(()=>[E(r.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":B(()=>[E(r.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":B(()=>[E(r.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":B(()=>[E(r.$slots,"doc-before",{},void 0,!0)]),"doc-after":B(()=>[E(r.$slots,"doc-after",{},void 0,!0)]),"aside-top":B(()=>[E(r.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":B(()=>[E(r.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":B(()=>[E(r.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":B(()=>[E(r.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":B(()=>[E(r.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":B(()=>[E(r.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),T(Wh),E(r.$slots,"layout-bottom",{},void 0,!0)])):(d(),Q(c,{key:1}))}}});const Gh=O(Yh,[["__scopeId","data-v-f44a984a"]]),us=e=>(qe("data-v-95656537"),e=e(),Ye(),e),Qh={class:"NotFound"},Jh=us(()=>b("p",{class:"code"},"404",-1)),Xh=us(()=>b("h1",{class:"title"},"PAGE NOT FOUND",-1)),Zh=us(()=>b("div",{class:"divider"},null,-1)),e_=us(()=>b("blockquote",{class:"quote"}," But if you don't change your direction, and if you keep looking, you may end up where you are heading. ",-1)),t_={class:"action"},n_=["href"],s_=R({__name:"NotFound",setup(e){const{site:t}=le();return(n,s)=>(d(),m("div",Qh,[Jh,Xh,Zh,e_,b("div",t_,[b("a",{class:"link",href:_(t).base,"aria-label":"go to home"}," Take me home ",8,n_)])]))}});const o_=O(s_,[["__scopeId","data-v-95656537"]]);const i_={Layout:Gh,NotFound:o_,enhanceApp:({app:e})=>{e.component("Badge",ua)}},r_={__name:"index",props:{text:String,color:{type:String,default:"#f40"}},setup(e){return(t,n)=>(d(),m("span",{style:mn({color:e.color})},ae(e.text),5))}};const zt={...i_,enhanceApp({app:e}){e.component("MyText",r_)}};function l_(e,t){let n=[],s=!0;const o=i=>{if(s){s=!1;return}n.forEach(r=>document.head.removeChild(r)),n=[],i.forEach(r=>{const l=c_(r);document.head.appendChild(l),n.push(l)})};Ut(()=>{const i=e.data,r=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[];document.title=_r(r,i),document.querySelector("meta[name=description]").setAttribute("content",l||r.description),o(ga(r.head,u_(c)))})}function c_([e,t,n]){const s=document.createElement(e);for(const o in t)s.setAttribute(o,t[o]);return n&&(s.innerHTML=n),s}function a_(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function u_(e){return e.filter(t=>!a_(t))}const ks=new Set,Vr=()=>document.createElement("link"),f_=e=>{const t=Vr();t.rel="prefetch",t.href=e,document.head.appendChild(t)},d_=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let Mn;const h_=Le&&(Mn=Vr())&&Mn.relList&&Mn.relList.supports&&Mn.relList.supports("prefetch")?f_:d_;function __(){if(!Le||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(r=>{if(r.isIntersecting){const l=r.target;n.unobserve(l);const{pathname:c}=l;if(!ks.has(c)){ks.add(c);const u=pr(c);h_(u)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{target:r,hostname:l,pathname:c}=i,u=c.match(/\.\w+$/);u&&u[0]!==".html"||r!=="_blank"&&l===location.hostname&&(c!==location.pathname?n.observe(i):ks.add(c))})})};Re(s);const o=vt();Ze(()=>o.path,s),pt(()=>{n&&n.disconnect()})}const p_=R({setup(e,{slots:t}){const n=ue(!1);return Re(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function v_(){if(Le){const e=new Map;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const o=n.parentElement,i=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!o||!i)return;const r=/language-(shellscript|shell|bash|sh|zsh)/.test(o.classList.toString());let{innerText:l=""}=i;r&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),m_(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function m_(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),o=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),o&&(s.removeAllRanges(),s.addRange(o)),n&&n.focus()}}const Er=zt.NotFound||(()=>"404 Not Found"),g_=R({name:"VitePressApp",setup(){const{site:e}=le();return Re(()=>{Ze(()=>e.value.lang,t=>{document.documentElement.lang=t},{immediate:!0})}),__(),v_(),zt.setup&&zt.setup(),()=>jn(zt.Layout)}});function b_(){const e=x_(),t=y_();t.provide(mr,e);const n=wa(e.route);return t.provide(vr,n),t.provide("NotFound",Er),t.component("Content",Ca),t.component("ClientOnly",p_),Object.defineProperty(t.config.globalProperties,"$frontmatter",{get(){return n.frontmatter.value}}),zt.enhanceApp&&zt.enhanceApp({app:t,router:e,siteData:Yt}),{app:t,router:e,data:n}}function y_(){return ia(g_)}function x_(){let e=Le,t;return $a(n=>{let s=pr(n);return e&&(t=s),(e||t===s)&&(s=s.replace(/\.js$/,".lean.js")),Le&&(e=!1),dr(()=>import(s),[])},Er)}if(Le){const{app:e,router:t,data:n}=b_();t.go().then(()=>{l_(t.route,n.site),e.mount("#app")})}export{R as A,Pa as B,vt as C,le as D,G as F,O as _,gc as a,b,m as c,b_ as createApp,Ye as d,ue as e,U as f,T as g,Re as h,pt as i,Ve as j,Et as k,qc as l,Ze as m,he as n,d as o,qe as p,w_ as q,Se as r,$_ as s,ae as t,_ as u,k_ as v,B as w,ie as x,Ut as y,E as z}; diff --git a/assets/chunks/VPAlgoliaSearchBox.ba670ed5.js b/assets/chunks/VPAlgoliaSearchBox.b308f465.js similarity index 99% rename from assets/chunks/VPAlgoliaSearchBox.ba670ed5.js rename to assets/chunks/VPAlgoliaSearchBox.b308f465.js index 8c144fe..7b189b1 100644 --- a/assets/chunks/VPAlgoliaSearchBox.ba670ed5.js +++ b/assets/chunks/VPAlgoliaSearchBox.b308f465.js @@ -1,4 +1,4 @@ -import{A as Pr,B as Ir,C as kr,D as Dr,j as Cr,o as Ar,c as xr}from"../app.cac277bf.js";/*! @docsearch/js 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */function Ct(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function P(e){for(var t=1;t=0||(c[l]=i[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Ve(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var a,i,u=[],l=!0,s=!1;try{for(o=o.call(n);!(l=(a=o.next()).done)&&(u.push(a.value),!r||u.length!==r);l=!0);}catch(c){s=!0,i=c}finally{try{l||o.return==null||o.return()}finally{if(s)throw i}}return u}}(e,t)||Mn(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +import{A as Pr,B as Ir,C as kr,D as Dr,h as Cr,o as Ar,c as xr}from"../app.88185e12.js";/*! @docsearch/js 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */function Ct(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function P(e){for(var t=1;t=0||(c[l]=i[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Ve(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var a,i,u=[],l=!0,s=!1;try{for(o=o.call(n);!(l=(a=o.next()).done)&&(u.push(a.value),!r||u.length!==r);l=!0);}catch(c){s=!0,i=c}finally{try{l||o.return==null||o.return()}finally{if(s)throw i}}return u}}(e,t)||Mn(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Ke(e){return function(t){if(Array.isArray(t))return ft(t)}(e)||function(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||Mn(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Mn(e,t){if(e){if(typeof e=="string")return ft(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return n==="Object"&&e.constructor&&(n=e.constructor.name),n==="Map"||n==="Set"?Array.from(e):n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ft(e,t):void 0}}function ft(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n3)for(n=[n],a=3;a0?Se(m.type,m.props,m.key,null,m.__v):m)!=null){if(m.__=n,m.__b=n.__b+1,(p=v[c])===null||p&&m.key==p.key&&m.type===p.type)v[c]=void 0;else for(d=0;d3)for(n=[n],a=3;a=n.__.length&&n.__.push({}),n.__[e]}function Zn(e){return ue=1,Yn(Xn,e)}function Yn(e,t,n){var r=ke(le++,2);return r.t=e,r.__c||(r.__=[n?n(t):Xn(void 0,t),function(o){var a=r.t(r.__[0],o);r.__[0]!==a&&(r.__=[a,r.__[1]],r.__c.setState({}))}],r.__c=T),r.__}function Gn(e,t){var n=ke(le++,3);!w.__s&&jt(n.__H,t)&&(n.__=e,n.__H=t,T.__H.__h.push(n))}function Ft(e,t){var n=ke(le++,4);!w.__s&&jt(n.__H,t)&&(n.__=e,n.__H=t,T.__h.push(n))}function rt(e,t){var n=ke(le++,7);return jt(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Hr(){mt.forEach(function(e){if(e.__P)try{e.__H.__h.forEach(He),e.__H.__h.forEach(dt),e.__H.__h=[]}catch(t){e.__H.__h=[],w.__e(t,e.__v)}}),mt=[]}w.__b=function(e){T=null,Lt&&Lt(e)},w.__r=function(e){qt&&qt(e),le=0;var t=(T=e.__c).__H;t&&(t.__h.forEach(He),t.__h.forEach(dt),t.__h=[])},w.diffed=function(e){Mt&&Mt(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(mt.push(t)!==1&&Tt===w.requestAnimationFrame||((Tt=w.requestAnimationFrame)||function(n){var r,o=function(){clearTimeout(a),Bt&&cancelAnimationFrame(r),setTimeout(n)},a=setTimeout(o,100);Bt&&(r=requestAnimationFrame(o))})(Hr)),T=void 0},w.__c=function(e,t){t.some(function(n){try{n.__h.forEach(He),n.__h=n.__h.filter(function(r){return!r.__||dt(r)})}catch(r){t.some(function(o){o.__h&&(o.__h=[])}),t=[],w.__e(r,n.__v)}}),Ht&&Ht(e,t)},w.unmount=function(e){Ut&&Ut(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(He)}catch(n){w.__e(n,t.__v)}};var Bt=typeof requestAnimationFrame=="function";function He(e){var t=T;typeof e.__c=="function"&&e.__c(),T=t}function dt(e){var t=T;e.__c=e.__(),T=t}function jt(e,t){return!e||e.length!==t.length||t.some(function(n,r){return n!==e[r]})}function Xn(e,t){return typeof t=="function"?t(e):t}function er(e,t){for(var n in t)e[n]=t[n];return e}function ht(e,t){for(var n in e)if(n!=="__source"&&!(n in t))return!0;for(var r in t)if(r!=="__source"&&e[r]!==t[r])return!0;return!1}function vt(e){this.props=e}(vt.prototype=new K).isPureReactComponent=!0,vt.prototype.shouldComponentUpdate=function(e,t){return ht(this.props,e)||ht(this.state,t)};var Vt=w.__b;w.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),Vt&&Vt(e)};var Ur=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Kt=function(e,t){return e==null?null:J(J(e).map(t))},Fr={map:Kt,forEach:Kt,count:function(e){return e?J(e).length:0},only:function(e){var t=J(e);if(t.length!==1)throw"Children.only";return t[0]},toArray:J},Br=w.__e;function Ue(){this.__u=0,this.t=null,this.__b=null}function tr(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function ge(){this.u=null,this.o=null}w.__e=function(e,t,n){if(e.then){for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return t.__e==null&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t)}Br(e,t,n)},(Ue.prototype=new K).__c=function(e,t){var n=t.__c,r=this;r.t==null&&(r.t=[]),r.t.push(n);var o=tr(r.__v),a=!1,i=function(){a||(a=!0,n.componentWillUnmount=n.__c,o?o(u):u())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){i(),n.__c&&n.__c()};var u=function(){if(!--r.__u){if(r.state.__e){var s=r.state.__e;r.__v.__k[0]=function d(p,m,_){return p&&(p.__v=null,p.__k=p.__k&&p.__k.map(function(h){return d(h,m,_)}),p.__c&&p.__c.__P===m&&(p.__e&&_.insertBefore(p.__e,p.__d),p.__c.__e=!0,p.__c.__P=_)),p}(s,s.__c.__P,s.__c.__O)}var c;for(r.setState({__e:r.__b=null});c=r.t.pop();)c.forceUpdate()}},l=t.__h===!0;r.__u++||l||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(i,i)},Ue.prototype.componentWillUnmount=function(){this.t=[]},Ue.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function a(i,u,l){return i&&(i.__c&&i.__c.__H&&(i.__c.__H.__.forEach(function(s){typeof s.__c=="function"&&s.__c()}),i.__c.__H=null),(i=er({},i)).__c!=null&&(i.__c.__P===l&&(i.__c.__P=u),i.__c=null),i.__k=i.__k&&i.__k.map(function(s){return a(s,u,l)})),i}(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__e&&V(Z,null,e.fallback);return o&&(o.__h=null),[V(Z,null,t.__e?null:e.children),o]};var Wt=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&(e.props.revealOrder[0]!=="t"||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]>>1,1),t.i.removeChild(r)}}),Pe(V(Vr,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function nr(e,t){return V(Kr,{__v:e,i:t})}(ge.prototype=new K).__e=function(e){var t=this,n=tr(t.__v),r=t.o.get(e);return r[0]++,function(o){var a=function(){t.props.revealOrder?(r.push(o),Wt(t,e,r)):o()};n?n(a):a()}},ge.prototype.render=function(e){this.u=null,this.o=new Map;var t=J(e.children);e.revealOrder&&e.revealOrder[0]==="b"&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},ge.prototype.componentDidUpdate=ge.prototype.componentDidMount=function(){var e=this;this.o.forEach(function(t,n){Wt(e,n,t)})};var rr=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.element")||60103,Wr=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,zr=function(e){return(typeof Symbol<"u"&&Ee(Symbol())=="symbol"?/fil|che|rad/i:/fil|che|ra/i).test(e)};function or(e,t,n){return t.__k==null&&(t.textContent=""),Pe(e,t),typeof n=="function"&&n(),e?e.__c:null}K.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(K.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var zt=w.event;function Jr(){}function $r(){return this.cancelBubble}function Qr(){return this.defaultPrevented}w.event=function(e){return zt&&(e=zt(e)),e.persist=Jr,e.isPropagationStopped=$r,e.isDefaultPrevented=Qr,e.nativeEvent=e};var ar,Jt={configurable:!0,get:function(){return this.class}},$t=w.vnode;w.vnode=function(e){var t=e.type,n=e.props,r=n;if(typeof t=="string"){for(var o in r={},n){var a=n[o];o==="value"&&"defaultValue"in n&&a==null||(o==="defaultValue"&&"value"in n&&n.value==null?o="value":o==="download"&&a===!0?a="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!zr(n.type)?o="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(o)?o=o.toLowerCase():Wr.test(o)?o=o.replace(/[A-Z0-9]/,"-$&").toLowerCase():a===null&&(a=void 0),r[o]=a)}t=="select"&&r.multiple&&Array.isArray(r.value)&&(r.value=J(n.children).forEach(function(i){i.props.selected=r.value.indexOf(i.props.value)!=-1})),t=="select"&&r.defaultValue!=null&&(r.value=J(n.children).forEach(function(i){i.props.selected=r.multiple?r.defaultValue.indexOf(i.props.value)!=-1:r.defaultValue==i.props.value})),e.props=r}t&&n.class!=n.className&&(Jt.enumerable="className"in n,n.className!=null&&(r.class=n.className),Object.defineProperty(r,"className",Jt)),e.$$typeof=rr,$t&&$t(e)};var Qt=w.__r;w.__r=function(e){Qt&&Qt(e),ar=e.__c};var Zr={ReactCurrentDispatcher:{current:{readContext:function(e){return ar.__n[e.__c].props.value}}}};(typeof performance>"u"?"undefined":Ee(performance))=="object"&&typeof performance.now=="function"&&performance.now.bind(performance);function Zt(e){return!!e&&e.$$typeof===rr}var f={useState:Zn,useReducer:Yn,useEffect:Gn,useLayoutEffect:Ft,useRef:function(e){return ue=5,rt(function(){return{current:e}},[])},useImperativeHandle:function(e,t,n){ue=6,Ft(function(){typeof e=="function"?e(t()):e&&(e.current=t())},n==null?n:n.concat(e))},useMemo:rt,useCallback:function(e,t){return ue=8,rt(function(){return e},t)},useContext:function(e){var t=T.context[e.__c],n=ke(le++,9);return n.__c=e,t?(n.__==null&&(n.__=!0,t.sub(T)),t.props.value):e.__},useDebugValue:function(e,t){w.useDebugValue&&w.useDebugValue(t?t(e):e)},version:"16.8.0",Children:Fr,render:or,hydrate:function(e,t,n){return Qn(e,t),typeof n=="function"&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(Pe(null,e),!0)},createPortal:nr,createElement:V,createContext:function(e,t){var n={__c:t="__cC"+Un++,__:e,Consumer:function(r,o){return r.children(o)},Provider:function(r){var o,a;return this.getChildContext||(o=[],(a={})[t]=this,this.getChildContext=function(){return a},this.shouldComponentUpdate=function(i){this.props.value!==i.value&&o.some(pt)},this.sub=function(i){o.push(i);var u=i.componentWillUnmount;i.componentWillUnmount=function(){o.splice(o.indexOf(i),1),u&&u.call(i)}}),r.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return V.bind(null,e)},cloneElement:function(e){return Zt(e)?Mr.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:Z,isValidElement:Zt,findDOMNode:function(e){return e&&(e.base||e.nodeType===1&&e)||null},Component:K,PureComponent:vt,memo:function(e,t){function n(o){var a=this.props.ref,i=a==o.ref;return!i&&a&&(a.call?a(null):a.current=null),t?!t(this.props,o)||!i:ht(this.props,o)}function r(o){return this.shouldComponentUpdate=n,V(e,o)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(n,r){var o=er({},n);return delete o.ref,e(o,(r=n.ref||r)&&(Ee(r)!="object"||"current"in r)?r:null)}return t.$$typeof=Ur,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:Z,Suspense:Ue,SuspenseList:ge,lazy:function(e){var t,n,r;function o(a){if(t||(t=e()).then(function(i){n=i.default||i},function(i){r=i}),r)throw r;if(!n)throw t;return V(n,a)}return o.displayName="Lazy",o.__f=!0,o},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Zr};function Yr(){return f.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},f.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function ir(){return f.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},f.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}var Gr=["translations"];function yt(){return yt=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(c[l]=i[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var to=f.forwardRef(function(e,t){var n=e.translations,r=n===void 0?{}:n,o=eo(e,Gr),a=r.buttonText,i=a===void 0?"Search":a,u=r.buttonAriaLabel,l=u===void 0?"Search":u,s=Xr(Zn(null),2),c=s[0],d=s[1];return Gn(function(){typeof navigator<"u"&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?d("\u2318"):d("Ctrl"))},[]),f.createElement("button",yt({type:"button",className:"DocSearch DocSearch-Button","aria-label":l},o,{ref:t}),f.createElement("span",{className:"DocSearch-Button-Container"},f.createElement(ir,null),f.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),f.createElement("span",{className:"DocSearch-Button-Keys"},c!==null&&f.createElement(f.Fragment,null,f.createElement("kbd",{className:"DocSearch-Button-Key"},c==="Ctrl"?f.createElement(Yr,null):c),f.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))});function Ie(e){return e.reduce(function(t,n){return t.concat(n)},[])}var no=0;function _t(e){return e.collections.length===0?0:e.collections.reduce(function(t,n){return t+n.items.length},0)}var cr=function(){},ro=[{segment:"autocomplete-core",version:"1.7.2"}];function Fe(e,t){var n=t;return{then:function(r,o){return Fe(e.then(xe(r,n,e),xe(o,n,e)),n)},catch:function(r){return Fe(e.catch(xe(r,n,e)),n)},finally:function(r){return r&&n.onCancelList.push(r),Fe(e.finally(xe(r&&function(){return n.onCancelList=[],r()},n,e)),n)},cancel:function(){n.isCanceled=!0;var r=n.onCancelList;n.onCancelList=[],r.forEach(function(o){o()})},isCanceled:function(){return n.isCanceled===!0}}}function Gt(e){return Fe(e,{isCanceled:!1,onCancelList:[]})}function xe(e,t,n){return e?function(r){return t.isCanceled?r:e(r)}:n}function Xt(e,t,n,r){if(!n)return null;if(e<0&&(t===null||r!==null&&t===0))return n+e;var o=(t===null?-1:t)+e;return o<=-1||o>=n?r===null?null:0:o}function en(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function oo(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ao(e,t){var n=[];return Promise.resolve(e(t)).then(function(r){return Promise.all(r.filter(function(o){return Boolean(o)}).map(function(o){if(o.sourceId,n.includes(o.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(o.sourceId)," is not unique."));n.push(o.sourceId);var a=function(i){for(var u=1;u {})","slug":"noviceguide-on-eventname-args","link":"#noviceguide-on-eventname-args","children":[]},{"level":3,"title":"noviceGuide.emit(eventName, ...args)","slug":"noviceguide-emit-eventname-args","link":"#noviceguide-emit-eventname-args","children":[]},{"level":3,"title":"noviceGuide.off(eventName, fn?)","slug":"noviceguide-off-eventname-fn","link":"#noviceguide-off-eventname-fn","children":[]}]},{"level":2,"title":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","slug":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","link":"#\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","children":[]}],"relativePath":"novice-guide/README.md"}'),t={name:"novice-guide/README.md"},o=a(`

novice guide

\u4E00\u4E2A\u7B80\u5355\u7684\u65B0\u624B\u5F15\u5BFC\u5E93\u3002

\u5B89\u88C5

bash
npm i novice-guide
+import{_ as s,o as e,c as n,a}from"./app.88185e12.js";const y=JSON.parse('{"title":"novice guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u521B\u5EFA\u5B9E\u4F8B","slug":"\u521B\u5EFA\u5B9E\u4F8B","link":"#\u521B\u5EFA\u5B9E\u4F8B","children":[{"level":3,"title":"\u53C2\u6570 options","slug":"\u53C2\u6570-options","link":"#\u53C2\u6570-options","children":[]},{"level":3,"title":"options.steps \u5C5E\u6027","slug":"options-steps-\u5C5E\u6027","link":"#options-steps-\u5C5E\u6027","children":[]}]},{"level":2,"title":"\u5B9E\u4F8B\u5C5E\u6027","slug":"\u5B9E\u4F8B\u5C5E\u6027","link":"#\u5B9E\u4F8B\u5C5E\u6027","children":[{"level":3,"title":"noviceGuide.options","slug":"noviceguide-options","link":"#noviceguide-options","children":[]},{"level":3,"title":"noviceGuide.steps","slug":"noviceguide-steps","link":"#noviceguide-steps","children":[]},{"level":3,"title":"noviceGuide.currentStepIndex","slug":"noviceguide-currentstepindex","link":"#noviceguide-currentstepindex","children":[]}]},{"level":2,"title":"\u5B9E\u4F8B\u65B9\u6CD5","slug":"\u5B9E\u4F8B\u65B9\u6CD5","link":"#\u5B9E\u4F8B\u65B9\u6CD5","children":[{"level":3,"title":"noviceGuide.start()","slug":"noviceguide-start","link":"#noviceguide-start","children":[]},{"level":3,"title":"noviceGuide.next()","slug":"noviceguide-next","link":"#noviceguide-next","children":[]},{"level":3,"title":"noviceGuide.prev()","slug":"noviceguide-prev","link":"#noviceguide-prev","children":[]},{"level":3,"title":"noviceGuide.jump(stepIndex: number)","slug":"noviceguide-jump-stepindex-number","link":"#noviceguide-jump-stepindex-number","children":[]},{"level":3,"title":"noviceGuide.done()","slug":"noviceguide-done","link":"#noviceguide-done","children":[]},{"level":3,"title":"noviceGuide.isFirstStep()","slug":"noviceguide-isfirststep","link":"#noviceguide-isfirststep","children":[]},{"level":3,"title":"noviceGuide.isLastStep()","slug":"noviceguide-islaststep","link":"#noviceguide-islaststep","children":[]},{"level":3,"title":"noviceGuide.on(eventName, (...args) => {})","slug":"noviceguide-on-eventname-args","link":"#noviceguide-on-eventname-args","children":[]},{"level":3,"title":"noviceGuide.emit(eventName, ...args)","slug":"noviceguide-emit-eventname-args","link":"#noviceguide-emit-eventname-args","children":[]},{"level":3,"title":"noviceGuide.off(eventName, fn?)","slug":"noviceguide-off-eventname-fn","link":"#noviceguide-off-eventname-fn","children":[]}]},{"level":2,"title":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","slug":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","link":"#\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","children":[]}],"relativePath":"novice-guide/README.md"}'),t={name:"novice-guide/README.md"},o=a(`

novice guide

\u4E00\u4E2A\u7B80\u5355\u7684\u65B0\u624B\u5F15\u5BFC\u5E93\u3002

\u5B89\u88C5

bash
npm i novice-guide
 

\u4F7F\u7528

js
import NoviceGuide from 'novice-guide'
 
 new SimpleNoviceGuide({
diff --git a/assets/novice-guide_README.md.4d1aaf78.lean.js b/assets/novice-guide_README.md.55ead219.lean.js
similarity index 97%
rename from assets/novice-guide_README.md.4d1aaf78.lean.js
rename to assets/novice-guide_README.md.55ead219.lean.js
index 8472e71..cc6cecd 100644
--- a/assets/novice-guide_README.md.4d1aaf78.lean.js
+++ b/assets/novice-guide_README.md.55ead219.lean.js
@@ -1 +1 @@
-import{_ as s,o as e,c as n,a}from"./app.cac277bf.js";const y=JSON.parse('{"title":"novice guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u521B\u5EFA\u5B9E\u4F8B","slug":"\u521B\u5EFA\u5B9E\u4F8B","link":"#\u521B\u5EFA\u5B9E\u4F8B","children":[{"level":3,"title":"\u53C2\u6570 options","slug":"\u53C2\u6570-options","link":"#\u53C2\u6570-options","children":[]},{"level":3,"title":"options.steps \u5C5E\u6027","slug":"options-steps-\u5C5E\u6027","link":"#options-steps-\u5C5E\u6027","children":[]}]},{"level":2,"title":"\u5B9E\u4F8B\u5C5E\u6027","slug":"\u5B9E\u4F8B\u5C5E\u6027","link":"#\u5B9E\u4F8B\u5C5E\u6027","children":[{"level":3,"title":"noviceGuide.options","slug":"noviceguide-options","link":"#noviceguide-options","children":[]},{"level":3,"title":"noviceGuide.steps","slug":"noviceguide-steps","link":"#noviceguide-steps","children":[]},{"level":3,"title":"noviceGuide.currentStepIndex","slug":"noviceguide-currentstepindex","link":"#noviceguide-currentstepindex","children":[]}]},{"level":2,"title":"\u5B9E\u4F8B\u65B9\u6CD5","slug":"\u5B9E\u4F8B\u65B9\u6CD5","link":"#\u5B9E\u4F8B\u65B9\u6CD5","children":[{"level":3,"title":"noviceGuide.start()","slug":"noviceguide-start","link":"#noviceguide-start","children":[]},{"level":3,"title":"noviceGuide.next()","slug":"noviceguide-next","link":"#noviceguide-next","children":[]},{"level":3,"title":"noviceGuide.prev()","slug":"noviceguide-prev","link":"#noviceguide-prev","children":[]},{"level":3,"title":"noviceGuide.jump(stepIndex: number)","slug":"noviceguide-jump-stepindex-number","link":"#noviceguide-jump-stepindex-number","children":[]},{"level":3,"title":"noviceGuide.done()","slug":"noviceguide-done","link":"#noviceguide-done","children":[]},{"level":3,"title":"noviceGuide.isFirstStep()","slug":"noviceguide-isfirststep","link":"#noviceguide-isfirststep","children":[]},{"level":3,"title":"noviceGuide.isLastStep()","slug":"noviceguide-islaststep","link":"#noviceguide-islaststep","children":[]},{"level":3,"title":"noviceGuide.on(eventName, (...args) => {})","slug":"noviceguide-on-eventname-args","link":"#noviceguide-on-eventname-args","children":[]},{"level":3,"title":"noviceGuide.emit(eventName, ...args)","slug":"noviceguide-emit-eventname-args","link":"#noviceguide-emit-eventname-args","children":[]},{"level":3,"title":"noviceGuide.off(eventName, fn?)","slug":"noviceguide-off-eventname-fn","link":"#noviceguide-off-eventname-fn","children":[]}]},{"level":2,"title":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","slug":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","link":"#\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","children":[]}],"relativePath":"novice-guide/README.md"}'),t={name:"novice-guide/README.md"},o=a("",66),l=[o];function p(d,i,c,r,h,u){return e(),n("div",null,l)}const C=s(t,[["render",p]]);export{y as __pageData,C as default};
+import{_ as s,o as e,c as n,a}from"./app.88185e12.js";const y=JSON.parse('{"title":"novice guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u521B\u5EFA\u5B9E\u4F8B","slug":"\u521B\u5EFA\u5B9E\u4F8B","link":"#\u521B\u5EFA\u5B9E\u4F8B","children":[{"level":3,"title":"\u53C2\u6570 options","slug":"\u53C2\u6570-options","link":"#\u53C2\u6570-options","children":[]},{"level":3,"title":"options.steps \u5C5E\u6027","slug":"options-steps-\u5C5E\u6027","link":"#options-steps-\u5C5E\u6027","children":[]}]},{"level":2,"title":"\u5B9E\u4F8B\u5C5E\u6027","slug":"\u5B9E\u4F8B\u5C5E\u6027","link":"#\u5B9E\u4F8B\u5C5E\u6027","children":[{"level":3,"title":"noviceGuide.options","slug":"noviceguide-options","link":"#noviceguide-options","children":[]},{"level":3,"title":"noviceGuide.steps","slug":"noviceguide-steps","link":"#noviceguide-steps","children":[]},{"level":3,"title":"noviceGuide.currentStepIndex","slug":"noviceguide-currentstepindex","link":"#noviceguide-currentstepindex","children":[]}]},{"level":2,"title":"\u5B9E\u4F8B\u65B9\u6CD5","slug":"\u5B9E\u4F8B\u65B9\u6CD5","link":"#\u5B9E\u4F8B\u65B9\u6CD5","children":[{"level":3,"title":"noviceGuide.start()","slug":"noviceguide-start","link":"#noviceguide-start","children":[]},{"level":3,"title":"noviceGuide.next()","slug":"noviceguide-next","link":"#noviceguide-next","children":[]},{"level":3,"title":"noviceGuide.prev()","slug":"noviceguide-prev","link":"#noviceguide-prev","children":[]},{"level":3,"title":"noviceGuide.jump(stepIndex: number)","slug":"noviceguide-jump-stepindex-number","link":"#noviceguide-jump-stepindex-number","children":[]},{"level":3,"title":"noviceGuide.done()","slug":"noviceguide-done","link":"#noviceguide-done","children":[]},{"level":3,"title":"noviceGuide.isFirstStep()","slug":"noviceguide-isfirststep","link":"#noviceguide-isfirststep","children":[]},{"level":3,"title":"noviceGuide.isLastStep()","slug":"noviceguide-islaststep","link":"#noviceguide-islaststep","children":[]},{"level":3,"title":"noviceGuide.on(eventName, (...args) => {})","slug":"noviceguide-on-eventname-args","link":"#noviceguide-on-eventname-args","children":[]},{"level":3,"title":"noviceGuide.emit(eventName, ...args)","slug":"noviceguide-emit-eventname-args","link":"#noviceguide-emit-eventname-args","children":[]},{"level":3,"title":"noviceGuide.off(eventName, fn?)","slug":"noviceguide-off-eventname-fn","link":"#noviceguide-off-eventname-fn","children":[]}]},{"level":2,"title":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","slug":"\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","link":"#\u81EA\u5B9A\u4E49\u4FE1\u606F\u6846","children":[]}],"relativePath":"novice-guide/README.md"}'),t={name:"novice-guide/README.md"},o=a("",66),l=[o];function p(d,i,c,r,h,u){return e(),n("div",null,l)}const C=s(t,[["render",p]]);export{y as __pageData,C as default};
diff --git a/assets/pages_base_cssAnimation_index.md.ba17ab61.lean.js b/assets/pages_base_cssAnimation_index.md.ba17ab61.lean.js
deleted file mode 100644
index 489deec..0000000
--- a/assets/pages_base_cssAnimation_index.md.ba17ab61.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as r,o as a,c as l,F as u,r as h,b as s,p as y,d as F,e as g,n as d,t as _,f as E,g as D,a as c}from"./app.cac277bf.js";const f={},A=n=>(y("data-v-047f60d3"),n=n(),F(),n),m={class:"items"},b=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),v=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),x=A(()=>s("a",{target:"_blank",href:"https://ybhdsg123.github.io/ybhdsg-zhs/"},"\u70B9\u8D5E\u4E86\u89E3\u66F4\u591A",-1)),q=[b,v,x];function k(n,t){return a(),l("div",m,[(a(),l(u,null,h(2,C=>s("div",{key:C,class:"item"},q)),64))])}const $=r(f,[["render",k],["__scopeId","data-v-047f60d3"]]);const w={class:"wrapper"},T={class:"input-data"},S=["modelValue"],V={key:0,class:"error-info"},I={__name:"specialIpt",props:{modelValue:{required:!0},rules:{type:Object,dfault:()=>{}}},emits:["update:modelValue"],setup(n,{emit:t}){const C=g(!1);return(Rs,i)=>(a(),l("div",w,[s("div",T,[s("input",{type:"email",modelValue:n.modelValue,onInput:i[0]||(i[0]=B=>t("update:modelValue",B.target.value))},null,40,S),s("div",{class:d(["underline",[n.modelValue?"underline-active":"underline"]])},null,2),s("label",{class:d([n.modelValue?"ipt-have-value":""]),ref:"labelRef"}," \u60A8\u7684\u59D3\u540D ",2),C.value?(a(),l("div",V,_(n.rules.message),1)):E("",!0)])]))}},z=r(I,[["__scopeId","data-v-b534d88f"]]);const P={},X=n=>(y("data-v-2f68e289"),n=n(),F(),n),N={class:"card"},R=X(()=>s("span",{class:"card-item"},"\u8D5A\u94B1 \u6478\u9C7C",-1)),j=[R];function L(n,t){return a(),l("div",N,j)}const O=r(P,[["render",L],["__scopeId","data-v-2f68e289"]]);const Y={},p=n=>(y("data-v-b2ad72bd"),n=n(),F(),n),H={class:"heart"},J=p(()=>s("span",null,null,-1)),M=p(()=>s("span",null,null,-1)),G=p(()=>s("span",null,null,-1)),K=p(()=>s("span",null,null,-1)),Q=p(()=>s("span",null,null,-1)),U=p(()=>s("span",null,null,-1)),W=p(()=>s("span",null,null,-1)),Z=p(()=>s("span",null,null,-1)),ss=p(()=>s("span",null,null,-1)),ns=[J,M,G,K,Q,U,W,Z,ss];function as(n,t){return a(),l("div",H,ns)}const ls=r(Y,[["render",as],["__scopeId","data-v-b2ad72bd"]]);const ps={},o=n=>(y("data-v-2fabf103"),n=n(),F(),n),os={class:"loading"},es=o(()=>s("span",null,null,-1)),ts=o(()=>s("span",null,null,-1)),cs=o(()=>s("span",null,null,-1)),Ds=o(()=>s("span",null,null,-1)),rs=o(()=>s("span",null,null,-1)),ys=o(()=>s("span",null,null,-1)),Fs=o(()=>s("span",null,null,-1)),Cs=o(()=>s("span",null,null,-1)),As=o(()=>s("span",null,null,-1)),is=[es,ts,cs,Ds,rs,ys,Fs,Cs,As];function ds(n,t){return a(),l("div",os,is)}const Bs=r(ps,[["render",ds],["__scopeId","data-v-2fabf103"]]);const us={},e=n=>(y("data-v-bd0c07d5"),n=n(),F(),n),hs={class:"container"},gs=e(()=>s("span",null,null,-1)),_s=e(()=>s("span",null,null,-1)),Es=e(()=>s("span",null,null,-1)),fs=e(()=>s("span",null,null,-1)),ms=e(()=>s("span",null,null,-1)),bs=e(()=>s("span",null,null,-1)),vs=e(()=>s("span",null,null,-1)),xs=e(()=>s("span",null,null,-1)),qs=e(()=>s("span",null,null,-1)),ks=[gs,_s,Es,fs,ms,bs,vs,xs,qs];function $s(n,t){return a(),l("div",hs,ks)}const ws=r(us,[["render",$s],["__scopeId","data-v-bd0c07d5"]]);const Ts=c("",3),Ss=c("",2),Vs=c("",2),Is=c("",2),zs=c("",4),Ps=c("",2),Xs=c("",7),Ls=JSON.parse('{"title":"css \u7279\u6548","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6587\u5B57\u88C2\u5F00\u7279\u6548","slug":"_1-\u6587\u5B57\u88C2\u5F00\u7279\u6548","link":"#_1-\u6587\u5B57\u88C2\u5F00\u7279\u6548","children":[]},{"level":2,"title":"2. \u8F93\u5165\u6846","slug":"_2-\u8F93\u5165\u6846","link":"#_2-\u8F93\u5165\u6846","children":[]},{"level":2,"title":"3. \u95EA\u5149\u5361\u7247","slug":"_3-\u95EA\u5149\u5361\u7247","link":"#_3-\u95EA\u5149\u5361\u7247","children":[]},{"level":2,"title":"4. \u70AB\u5F69\u7231\u5FC3\u52A0\u8F7D\u52A8\u753B","slug":"_4-\u70AB\u5F69\u7231\u5FC3\u52A0\u8F7D\u52A8\u753B","link":"#_4-\u70AB\u5F69\u7231\u5FC3\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"5. \u6709\u8DA3\u7684\u52A0\u8F7D\u52A8\u753B","slug":"_5-\u6709\u8DA3\u7684\u52A0\u8F7D\u52A8\u753B","link":"#_5-\u6709\u8DA3\u7684\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"6. \u83F1\u5F62\u52A0\u8F7D\u52A8\u753B","slug":"_6-\u83F1\u5F62\u52A0\u8F7D\u52A8\u753B","link":"#_6-\u83F1\u5F62\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"7. \u70AB\u5F69\u65CB\u8F6C\u52A0\u8F7D\u52A8\u753B","slug":"_7-\u70AB\u5F69\u65CB\u8F6C\u52A0\u8F7D\u52A8\u753B","link":"#_7-\u70AB\u5F69\u65CB\u8F6C\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"8. \u9F20\u6807\u60AC\u505C\u53D1\u5149\u6309\u94AE\uFF0C\u5DE6\u4E0A\u53F3\u4E0B\u6709\u8FB9\u6846\u5E76\u5EF6\u4F38","slug":"_8-\u9F20\u6807\u60AC\u505C\u53D1\u5149\u6309\u94AE-\u5DE6\u4E0A\u53F3\u4E0B\u6709\u8FB9\u6846\u5E76\u5EF6\u4F38","link":"#_8-\u9F20\u6807\u60AC\u505C\u53D1\u5149\u6309\u94AE-\u5DE6\u4E0A\u53F3\u4E0B\u6709\u8FB9\u6846\u5E76\u5EF6\u4F38","children":[]},{"level":2,"title":"9. \u6587\u5B57\u4E0A\u53D8\u5316\u6EDA\u52A8\u7684\u989C\u8272\u6548\u679C","slug":"_9-\u6587\u5B57\u4E0A\u53D8\u5316\u6EDA\u52A8\u7684\u989C\u8272\u6548\u679C","link":"#_9-\u6587\u5B57\u4E0A\u53D8\u5316\u6EDA\u52A8\u7684\u989C\u8272\u6548\u679C","children":[]},{"level":2,"title":"10. \u53D1\u5149\u6309\u94AE","slug":"_10-\u53D1\u5149\u6309\u94AE","link":"#_10-\u53D1\u5149\u6309\u94AE","children":[]}],"relativePath":"pages/base/cssAnimation/index.md"}'),Ns={name:"pages/base/cssAnimation/index.md"},Os=Object.assign(Ns,{setup(n){return(t,C)=>(a(),l("div",null,[Ts,D($),Ss,D(z),Vs,D(O),Is,D(ls),zs,D(Bs),Ps,D(ws),Xs]))}});export{Ls as __pageData,Os as default};
diff --git a/assets/pages_base_cssAnimation_index.md.ba17ab61.js b/assets/pages_base_cssAnimation_index.md.db898473.js
similarity index 98%
rename from assets/pages_base_cssAnimation_index.md.ba17ab61.js
rename to assets/pages_base_cssAnimation_index.md.db898473.js
index 6b764a6..ea6d796 100644
--- a/assets/pages_base_cssAnimation_index.md.ba17ab61.js
+++ b/assets/pages_base_cssAnimation_index.md.db898473.js
@@ -1,4 +1,4 @@
-import{_ as r,o as a,c as l,F as u,r as h,b as s,p as y,d as F,e as g,n as d,t as _,f as E,g as D,a as c}from"./app.cac277bf.js";const f={},A=n=>(y("data-v-047f60d3"),n=n(),F(),n),m={class:"items"},b=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),v=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),x=A(()=>s("a",{target:"_blank",href:"https://ybhdsg123.github.io/ybhdsg-zhs/"},"\u70B9\u8D5E\u4E86\u89E3\u66F4\u591A",-1)),q=[b,v,x];function k(n,t){return a(),l("div",m,[(a(),l(u,null,h(2,C=>s("div",{key:C,class:"item"},q)),64))])}const $=r(f,[["render",k],["__scopeId","data-v-047f60d3"]]);const w={class:"wrapper"},T={class:"input-data"},S=["modelValue"],V={key:0,class:"error-info"},I={__name:"specialIpt",props:{modelValue:{required:!0},rules:{type:Object,dfault:()=>{}}},emits:["update:modelValue"],setup(n,{emit:t}){const C=g(!1);return(Rs,i)=>(a(),l("div",w,[s("div",T,[s("input",{type:"email",modelValue:n.modelValue,onInput:i[0]||(i[0]=B=>t("update:modelValue",B.target.value))},null,40,S),s("div",{class:d(["underline",[n.modelValue?"underline-active":"underline"]])},null,2),s("label",{class:d([n.modelValue?"ipt-have-value":""]),ref:"labelRef"}," \u60A8\u7684\u59D3\u540D ",2),C.value?(a(),l("div",V,_(n.rules.message),1)):E("",!0)])]))}},z=r(I,[["__scopeId","data-v-b534d88f"]]);const P={},X=n=>(y("data-v-2f68e289"),n=n(),F(),n),N={class:"card"},R=X(()=>s("span",{class:"card-item"},"\u8D5A\u94B1 \u6478\u9C7C",-1)),j=[R];function L(n,t){return a(),l("div",N,j)}const O=r(P,[["render",L],["__scopeId","data-v-2f68e289"]]);const Y={},p=n=>(y("data-v-b2ad72bd"),n=n(),F(),n),H={class:"heart"},J=p(()=>s("span",null,null,-1)),M=p(()=>s("span",null,null,-1)),G=p(()=>s("span",null,null,-1)),K=p(()=>s("span",null,null,-1)),Q=p(()=>s("span",null,null,-1)),U=p(()=>s("span",null,null,-1)),W=p(()=>s("span",null,null,-1)),Z=p(()=>s("span",null,null,-1)),ss=p(()=>s("span",null,null,-1)),ns=[J,M,G,K,Q,U,W,Z,ss];function as(n,t){return a(),l("div",H,ns)}const ls=r(Y,[["render",as],["__scopeId","data-v-b2ad72bd"]]);const ps={},o=n=>(y("data-v-2fabf103"),n=n(),F(),n),os={class:"loading"},es=o(()=>s("span",null,null,-1)),ts=o(()=>s("span",null,null,-1)),cs=o(()=>s("span",null,null,-1)),Ds=o(()=>s("span",null,null,-1)),rs=o(()=>s("span",null,null,-1)),ys=o(()=>s("span",null,null,-1)),Fs=o(()=>s("span",null,null,-1)),Cs=o(()=>s("span",null,null,-1)),As=o(()=>s("span",null,null,-1)),is=[es,ts,cs,Ds,rs,ys,Fs,Cs,As];function ds(n,t){return a(),l("div",os,is)}const Bs=r(ps,[["render",ds],["__scopeId","data-v-2fabf103"]]);const us={},e=n=>(y("data-v-bd0c07d5"),n=n(),F(),n),hs={class:"container"},gs=e(()=>s("span",null,null,-1)),_s=e(()=>s("span",null,null,-1)),Es=e(()=>s("span",null,null,-1)),fs=e(()=>s("span",null,null,-1)),ms=e(()=>s("span",null,null,-1)),bs=e(()=>s("span",null,null,-1)),vs=e(()=>s("span",null,null,-1)),xs=e(()=>s("span",null,null,-1)),qs=e(()=>s("span",null,null,-1)),ks=[gs,_s,Es,fs,ms,bs,vs,xs,qs];function $s(n,t){return a(),l("div",hs,ks)}const ws=r(us,[["render",$s],["__scopeId","data-v-bd0c07d5"]]);const Ts=c('

css \u7279\u6548

\u5927\u4F6C\u7279\u6548\u4ED3\u5E93

1. \u6587\u5B57\u88C2\u5F00\u7279\u6548

',3),Ss=c(`
\u6587\u5B57\u88C2\u5F00
vue
<template>
+import{_ as r,o as a,c as l,F as u,r as h,b as s,p as y,d as F,e as g,n as d,t as _,f as E,g as D,a as c}from"./app.88185e12.js";const f={},A=n=>(y("data-v-aa286928"),n=n(),F(),n),m={class:"items"},b=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),v=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),x=A(()=>s("a",{target:"_blank",href:"https://ybhdsg123.github.io/ybhdsg-zhs/"}," \u70B9\u8D5E\u4E86\u89E3\u66F4\u591A ",-1)),q=[b,v,x];function k(n,t){return a(),l("div",m,[(a(),l(u,null,h(2,C=>s("div",{key:C,class:"item"},q)),64))])}const $=r(f,[["render",k],["__scopeId","data-v-aa286928"]]);const w={class:"wrapper"},T={class:"input-data"},S=["modelValue"],V={key:0,class:"error-info"},I={__name:"specialIpt",props:{modelValue:{required:!0},rules:{type:Object,dfault:()=>{}}},emits:["update:modelValue"],setup(n,{emit:t}){const C=g(!1);return(Rs,i)=>(a(),l("div",w,[s("div",T,[s("input",{type:"email",modelValue:n.modelValue,onInput:i[0]||(i[0]=B=>t("update:modelValue",B.target.value))},null,40,S),s("div",{class:d(["underline",[n.modelValue?"underline-active":"underline"]])},null,2),s("label",{class:d([n.modelValue?"ipt-have-value":""]),ref:"labelRef"}," \u60A8\u7684\u59D3\u540D ",2),C.value?(a(),l("div",V,_(n.rules.message),1)):E("",!0)])]))}},z=r(I,[["__scopeId","data-v-b534d88f"]]);const P={},X=n=>(y("data-v-2f68e289"),n=n(),F(),n),N={class:"card"},R=X(()=>s("span",{class:"card-item"},"\u8D5A\u94B1 \u6478\u9C7C",-1)),j=[R];function L(n,t){return a(),l("div",N,j)}const O=r(P,[["render",L],["__scopeId","data-v-2f68e289"]]);const Y={},p=n=>(y("data-v-b2ad72bd"),n=n(),F(),n),H={class:"heart"},J=p(()=>s("span",null,null,-1)),M=p(()=>s("span",null,null,-1)),G=p(()=>s("span",null,null,-1)),K=p(()=>s("span",null,null,-1)),Q=p(()=>s("span",null,null,-1)),U=p(()=>s("span",null,null,-1)),W=p(()=>s("span",null,null,-1)),Z=p(()=>s("span",null,null,-1)),ss=p(()=>s("span",null,null,-1)),ns=[J,M,G,K,Q,U,W,Z,ss];function as(n,t){return a(),l("div",H,ns)}const ls=r(Y,[["render",as],["__scopeId","data-v-b2ad72bd"]]);const ps={},o=n=>(y("data-v-2fabf103"),n=n(),F(),n),os={class:"loading"},es=o(()=>s("span",null,null,-1)),ts=o(()=>s("span",null,null,-1)),cs=o(()=>s("span",null,null,-1)),Ds=o(()=>s("span",null,null,-1)),rs=o(()=>s("span",null,null,-1)),ys=o(()=>s("span",null,null,-1)),Fs=o(()=>s("span",null,null,-1)),Cs=o(()=>s("span",null,null,-1)),As=o(()=>s("span",null,null,-1)),is=[es,ts,cs,Ds,rs,ys,Fs,Cs,As];function ds(n,t){return a(),l("div",os,is)}const Bs=r(ps,[["render",ds],["__scopeId","data-v-2fabf103"]]);const us={},e=n=>(y("data-v-bd0c07d5"),n=n(),F(),n),hs={class:"container"},gs=e(()=>s("span",null,null,-1)),_s=e(()=>s("span",null,null,-1)),Es=e(()=>s("span",null,null,-1)),fs=e(()=>s("span",null,null,-1)),ms=e(()=>s("span",null,null,-1)),bs=e(()=>s("span",null,null,-1)),vs=e(()=>s("span",null,null,-1)),xs=e(()=>s("span",null,null,-1)),qs=e(()=>s("span",null,null,-1)),ks=[gs,_s,Es,fs,ms,bs,vs,xs,qs];function $s(n,t){return a(),l("div",hs,ks)}const ws=r(us,[["render",$s],["__scopeId","data-v-bd0c07d5"]]);const Ts=c('

css \u7279\u6548

\u5927\u4F6C\u7279\u6548\u4ED3\u5E93

1. \u6587\u5B57\u88C2\u5F00\u7279\u6548

',3),Ss=c(`
\u6587\u5B57\u88C2\u5F00
vue
<template>
   <div class="items">
     <div v-for="item in 2" :key="item" class="item">
       <div class="a">\u6587\u5B57\u88C2\u5F00\u6548\u679C</div>
diff --git a/assets/pages_base_cssAnimation_index.md.db898473.lean.js b/assets/pages_base_cssAnimation_index.md.db898473.lean.js
new file mode 100644
index 0000000..b6c32e0
--- /dev/null
+++ b/assets/pages_base_cssAnimation_index.md.db898473.lean.js
@@ -0,0 +1 @@
+import{_ as r,o as a,c as l,F as u,r as h,b as s,p as y,d as F,e as g,n as d,t as _,f as E,g as D,a as c}from"./app.88185e12.js";const f={},A=n=>(y("data-v-aa286928"),n=n(),F(),n),m={class:"items"},b=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),v=A(()=>s("div",{class:"a"},"\u6587\u5B57\u88C2\u5F00\u6548\u679C",-1)),x=A(()=>s("a",{target:"_blank",href:"https://ybhdsg123.github.io/ybhdsg-zhs/"}," \u70B9\u8D5E\u4E86\u89E3\u66F4\u591A ",-1)),q=[b,v,x];function k(n,t){return a(),l("div",m,[(a(),l(u,null,h(2,C=>s("div",{key:C,class:"item"},q)),64))])}const $=r(f,[["render",k],["__scopeId","data-v-aa286928"]]);const w={class:"wrapper"},T={class:"input-data"},S=["modelValue"],V={key:0,class:"error-info"},I={__name:"specialIpt",props:{modelValue:{required:!0},rules:{type:Object,dfault:()=>{}}},emits:["update:modelValue"],setup(n,{emit:t}){const C=g(!1);return(Rs,i)=>(a(),l("div",w,[s("div",T,[s("input",{type:"email",modelValue:n.modelValue,onInput:i[0]||(i[0]=B=>t("update:modelValue",B.target.value))},null,40,S),s("div",{class:d(["underline",[n.modelValue?"underline-active":"underline"]])},null,2),s("label",{class:d([n.modelValue?"ipt-have-value":""]),ref:"labelRef"}," \u60A8\u7684\u59D3\u540D ",2),C.value?(a(),l("div",V,_(n.rules.message),1)):E("",!0)])]))}},z=r(I,[["__scopeId","data-v-b534d88f"]]);const P={},X=n=>(y("data-v-2f68e289"),n=n(),F(),n),N={class:"card"},R=X(()=>s("span",{class:"card-item"},"\u8D5A\u94B1 \u6478\u9C7C",-1)),j=[R];function L(n,t){return a(),l("div",N,j)}const O=r(P,[["render",L],["__scopeId","data-v-2f68e289"]]);const Y={},p=n=>(y("data-v-b2ad72bd"),n=n(),F(),n),H={class:"heart"},J=p(()=>s("span",null,null,-1)),M=p(()=>s("span",null,null,-1)),G=p(()=>s("span",null,null,-1)),K=p(()=>s("span",null,null,-1)),Q=p(()=>s("span",null,null,-1)),U=p(()=>s("span",null,null,-1)),W=p(()=>s("span",null,null,-1)),Z=p(()=>s("span",null,null,-1)),ss=p(()=>s("span",null,null,-1)),ns=[J,M,G,K,Q,U,W,Z,ss];function as(n,t){return a(),l("div",H,ns)}const ls=r(Y,[["render",as],["__scopeId","data-v-b2ad72bd"]]);const ps={},o=n=>(y("data-v-2fabf103"),n=n(),F(),n),os={class:"loading"},es=o(()=>s("span",null,null,-1)),ts=o(()=>s("span",null,null,-1)),cs=o(()=>s("span",null,null,-1)),Ds=o(()=>s("span",null,null,-1)),rs=o(()=>s("span",null,null,-1)),ys=o(()=>s("span",null,null,-1)),Fs=o(()=>s("span",null,null,-1)),Cs=o(()=>s("span",null,null,-1)),As=o(()=>s("span",null,null,-1)),is=[es,ts,cs,Ds,rs,ys,Fs,Cs,As];function ds(n,t){return a(),l("div",os,is)}const Bs=r(ps,[["render",ds],["__scopeId","data-v-2fabf103"]]);const us={},e=n=>(y("data-v-bd0c07d5"),n=n(),F(),n),hs={class:"container"},gs=e(()=>s("span",null,null,-1)),_s=e(()=>s("span",null,null,-1)),Es=e(()=>s("span",null,null,-1)),fs=e(()=>s("span",null,null,-1)),ms=e(()=>s("span",null,null,-1)),bs=e(()=>s("span",null,null,-1)),vs=e(()=>s("span",null,null,-1)),xs=e(()=>s("span",null,null,-1)),qs=e(()=>s("span",null,null,-1)),ks=[gs,_s,Es,fs,ms,bs,vs,xs,qs];function $s(n,t){return a(),l("div",hs,ks)}const ws=r(us,[["render",$s],["__scopeId","data-v-bd0c07d5"]]);const Ts=c("",3),Ss=c("",2),Vs=c("",2),Is=c("",2),zs=c("",4),Ps=c("",2),Xs=c("",7),Ls=JSON.parse('{"title":"css \u7279\u6548","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6587\u5B57\u88C2\u5F00\u7279\u6548","slug":"_1-\u6587\u5B57\u88C2\u5F00\u7279\u6548","link":"#_1-\u6587\u5B57\u88C2\u5F00\u7279\u6548","children":[]},{"level":2,"title":"2. \u8F93\u5165\u6846","slug":"_2-\u8F93\u5165\u6846","link":"#_2-\u8F93\u5165\u6846","children":[]},{"level":2,"title":"3. \u95EA\u5149\u5361\u7247","slug":"_3-\u95EA\u5149\u5361\u7247","link":"#_3-\u95EA\u5149\u5361\u7247","children":[]},{"level":2,"title":"4. \u70AB\u5F69\u7231\u5FC3\u52A0\u8F7D\u52A8\u753B","slug":"_4-\u70AB\u5F69\u7231\u5FC3\u52A0\u8F7D\u52A8\u753B","link":"#_4-\u70AB\u5F69\u7231\u5FC3\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"5. \u6709\u8DA3\u7684\u52A0\u8F7D\u52A8\u753B","slug":"_5-\u6709\u8DA3\u7684\u52A0\u8F7D\u52A8\u753B","link":"#_5-\u6709\u8DA3\u7684\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"6. \u83F1\u5F62\u52A0\u8F7D\u52A8\u753B","slug":"_6-\u83F1\u5F62\u52A0\u8F7D\u52A8\u753B","link":"#_6-\u83F1\u5F62\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"7. \u70AB\u5F69\u65CB\u8F6C\u52A0\u8F7D\u52A8\u753B","slug":"_7-\u70AB\u5F69\u65CB\u8F6C\u52A0\u8F7D\u52A8\u753B","link":"#_7-\u70AB\u5F69\u65CB\u8F6C\u52A0\u8F7D\u52A8\u753B","children":[]},{"level":2,"title":"8. \u9F20\u6807\u60AC\u505C\u53D1\u5149\u6309\u94AE\uFF0C\u5DE6\u4E0A\u53F3\u4E0B\u6709\u8FB9\u6846\u5E76\u5EF6\u4F38","slug":"_8-\u9F20\u6807\u60AC\u505C\u53D1\u5149\u6309\u94AE-\u5DE6\u4E0A\u53F3\u4E0B\u6709\u8FB9\u6846\u5E76\u5EF6\u4F38","link":"#_8-\u9F20\u6807\u60AC\u505C\u53D1\u5149\u6309\u94AE-\u5DE6\u4E0A\u53F3\u4E0B\u6709\u8FB9\u6846\u5E76\u5EF6\u4F38","children":[]},{"level":2,"title":"9. \u6587\u5B57\u4E0A\u53D8\u5316\u6EDA\u52A8\u7684\u989C\u8272\u6548\u679C","slug":"_9-\u6587\u5B57\u4E0A\u53D8\u5316\u6EDA\u52A8\u7684\u989C\u8272\u6548\u679C","link":"#_9-\u6587\u5B57\u4E0A\u53D8\u5316\u6EDA\u52A8\u7684\u989C\u8272\u6548\u679C","children":[]},{"level":2,"title":"10. \u53D1\u5149\u6309\u94AE","slug":"_10-\u53D1\u5149\u6309\u94AE","link":"#_10-\u53D1\u5149\u6309\u94AE","children":[]}],"relativePath":"pages/base/cssAnimation/index.md"}'),Ns={name:"pages/base/cssAnimation/index.md"},Os=Object.assign(Ns,{setup(n){return(t,C)=>(a(),l("div",null,[Ts,D($),Ss,D(z),Vs,D(O),Is,D(ls),zs,D(Bs),Ps,D(ws),Xs]))}});export{Ls as __pageData,Os as default};
diff --git a/assets/pages_base_css_index.md.85f25ff6.js b/assets/pages_base_css_index.md.2d4f0195.js
similarity index 59%
rename from assets/pages_base_css_index.md.85f25ff6.js
rename to assets/pages_base_css_index.md.2d4f0195.js
index 8a19b55..136f51d 100644
--- a/assets/pages_base_css_index.md.85f25ff6.js
+++ b/assets/pages_base_css_index.md.2d4f0195.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"css","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7F51\u7AD9\u7F6E\u7070","slug":"_1-\u7F51\u7AD9\u7F6E\u7070","link":"#_1-\u7F51\u7AD9\u7F6E\u7070","children":[]},{"level":2,"title":"2. css \u7684\u5C42/\u5806\u53E0\u4E0A\u4E0B\u6587","slug":"_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","link":"#_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","children":[]},{"level":2,"title":"3. css \u65B0\u5EFA\u56FE\u5C42","slug":"_3-css-\u65B0\u5EFA\u56FE\u5C42","link":"#_3-css-\u65B0\u5EFA\u56FE\u5C42","children":[]},{"level":2,"title":"4. \u591A\u884C\u7701\u7565","slug":"_4-\u591A\u884C\u7701\u7565","link":"#_4-\u591A\u884C\u7701\u7565","children":[]},{"level":2,"title":"5. \u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","slug":"_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","link":"#_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","children":[]}],"relativePath":"pages/base/css/index.md"}'),p={name:"pages/base/css/index.md"},o=l(`

css

Flexbox \u5E03\u5C40\u6700\u9002\u5408\u5E94\u7528\u7A0B\u5E8F\u7684\u7EC4\u4EF6\u548C\u5C0F\u89C4\u6A21\u5E03\u5C40\uFF08\u4E00\u7EF4\u5E03\u5C40\uFF09\uFF0C\u800C Grid \u5E03\u5C40\u5219\u9002\u7528\u4E8E\u66F4\u5927\u89C4\u6A21\u7684\u5E03\u5C40\uFF08\u4E8C\u7EF4\u5E03\u5C40\uFF09

Grid \u5E03\u5C40\u94FE\u63A5\uFF1AGrid \u5E03\u5C40\u4E2D\uFF0Cfloat\uFF0Cdisplay:inline-block\uFF0Cdisplay:table-cell\uFF0Cvertical-align\u4EE5\u53CAcolumn-*\u8FD9\u4E9B\u5C5E\u6027\u548C\u58F0\u660E\u5BF9 grid \u5B50\u9879\u662F\u6CA1\u6709\u4EFB\u4F55\u4F5C\u7528\u7684\u3002\u9762\u8BD5\u7ECF\u5E38\u4F1A\u95EE\u7684\uFF0C\u4E00\u5B9A\u8981\u8BB0\u5F97\u3002

Flexbox \u5E03\u5C40\u94FE\u63A5\uFF1Aflex \u5B50\u5143\u7D20\u7684\u8BBE\u7F6E float\`\`\uFF0Cclear \u4EE5\u53CA vertical-align \u5C5E\u6027\u90FD\u662F\u6CA1\u6709\u7528\u7684\u3002

1. \u7F51\u7AD9\u7F6E\u7070

TIP

css
html.gray-mode {
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"css","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7F51\u7AD9\u7F6E\u7070","slug":"_1-\u7F51\u7AD9\u7F6E\u7070","link":"#_1-\u7F51\u7AD9\u7F6E\u7070","children":[]},{"level":2,"title":"2. css \u7684\u5C42/\u5806\u53E0\u4E0A\u4E0B\u6587","slug":"_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","link":"#_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","children":[]},{"level":2,"title":"3. css \u65B0\u5EFA\u56FE\u5C42","slug":"_3-css-\u65B0\u5EFA\u56FE\u5C42","link":"#_3-css-\u65B0\u5EFA\u56FE\u5C42","children":[]},{"level":2,"title":"4. \u591A\u884C\u7701\u7565","slug":"_4-\u591A\u884C\u7701\u7565","link":"#_4-\u591A\u884C\u7701\u7565","children":[]},{"level":2,"title":"5. \u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","slug":"_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","link":"#_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","children":[]},{"level":2,"title":"6. scss\u5B9A\u4E49\u65B9\u6CD5\uFF0C\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528","slug":"_6-scss\u5B9A\u4E49\u65B9\u6CD5-\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528","link":"#_6-scss\u5B9A\u4E49\u65B9\u6CD5-\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528","children":[]}],"relativePath":"pages/base/css/index.md"}'),p={name:"pages/base/css/index.md"},o=l(`

css

Flexbox \u5E03\u5C40\u6700\u9002\u5408\u5E94\u7528\u7A0B\u5E8F\u7684\u7EC4\u4EF6\u548C\u5C0F\u89C4\u6A21\u5E03\u5C40\uFF08\u4E00\u7EF4\u5E03\u5C40\uFF09\uFF0C\u800C Grid \u5E03\u5C40\u5219\u9002\u7528\u4E8E\u66F4\u5927\u89C4\u6A21\u7684\u5E03\u5C40\uFF08\u4E8C\u7EF4\u5E03\u5C40\uFF09

Grid \u5E03\u5C40\u94FE\u63A5\uFF1AGrid \u5E03\u5C40\u4E2D\uFF0Cfloat\uFF0Cdisplay:inline-block\uFF0Cdisplay:table-cell\uFF0Cvertical-align\u4EE5\u53CAcolumn-*\u8FD9\u4E9B\u5C5E\u6027\u548C\u58F0\u660E\u5BF9 grid \u5B50\u9879\u662F\u6CA1\u6709\u4EFB\u4F55\u4F5C\u7528\u7684\u3002\u9762\u8BD5\u7ECF\u5E38\u4F1A\u95EE\u7684\uFF0C\u4E00\u5B9A\u8981\u8BB0\u5F97\u3002

Flexbox \u5E03\u5C40\u94FE\u63A5\uFF1Aflex \u5B50\u5143\u7D20\u7684\u8BBE\u7F6E float\`\`\uFF0Cclear \u4EE5\u53CA vertical-align \u5C5E\u6027\u90FD\u662F\u6CA1\u6709\u7528\u7684\u3002

1. \u7F51\u7AD9\u7F6E\u7070

TIP

css
html.gray-mode {
   filter: grayscale(0.95);
   -webkit-filter: grayscale(0.95);
 }
@@ -42,4 +42,34 @@ import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const i=JSON.parse('{
   /*\u6EDA\u52A8\u6761\u91CC\u9762\u8F68\u9053*/
   // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
 }
-
`,15),e=[o];function c(t,r,D,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default}; +

6. scss\u5B9A\u4E49\u65B9\u6CD5\uFF0C\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528

utils.scss
scss
@use "sass:math";
+// \u9ED8\u8BA4\u8BBE\u8BA1\u7A3F\u7684\u5BBD\u5EA6
+$designWidth: 1920;
+// \u9ED8\u8BA4\u8BBE\u8BA1\u7A3F\u7684\u9AD8\u5EA6
+$designHeight: 1080;
+
+// px \u8F6C\u4E3A vw \u7684\u51FD\u6570
+@function vw($px) {
+  @return math.div($px, $designWidth) * 100vw;
+}
+
+// px \u8F6C\u4E3A vh \u7684\u51FD\u6570
+@function vh($px) {
+  @return math.div($px, $designHeight) * 100vh;
+}
+
\u5728vite.config.js\u4E0B\u5B9A\u4E49\u4F7F\u7528\u7684\u65B9\u6CD5
js
export default ({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd());
+  return defineConfig({
+    plugins: [vue()],
+    css: {
+      // \u6307\u5B9A\u4F20\u9012\u7ED9 CSS \u9884\u5904\u7406\u5668\u7684\u9009\u9879\u3002\u6587\u4EF6\u6269\u5C55\u540D\u7528\u4F5C\u9009\u9879\u7684\u952E
+      preprocessorOptions: {
+        scss: {
+          // \u4E3A\u6BCF\u4E2A\u6837\u5F0F\u5185\u5BB9\u6CE8\u5165\u989D\u5916\u4EE3\u7801
+          additionalData: \`@import "@/styles/utils.scss";\`,
+        },
+      },
+    },
+  });
+};
+
`,18),e=[o];function c(t,r,D,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_css_index.md.85f25ff6.lean.js b/assets/pages_base_css_index.md.2d4f0195.lean.js similarity index 59% rename from assets/pages_base_css_index.md.85f25ff6.lean.js rename to assets/pages_base_css_index.md.2d4f0195.lean.js index 53633f7..092cea6 100644 --- a/assets/pages_base_css_index.md.85f25ff6.lean.js +++ b/assets/pages_base_css_index.md.2d4f0195.lean.js @@ -1 +1 @@ -import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"css","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7F51\u7AD9\u7F6E\u7070","slug":"_1-\u7F51\u7AD9\u7F6E\u7070","link":"#_1-\u7F51\u7AD9\u7F6E\u7070","children":[]},{"level":2,"title":"2. css \u7684\u5C42/\u5806\u53E0\u4E0A\u4E0B\u6587","slug":"_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","link":"#_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","children":[]},{"level":2,"title":"3. css \u65B0\u5EFA\u56FE\u5C42","slug":"_3-css-\u65B0\u5EFA\u56FE\u5C42","link":"#_3-css-\u65B0\u5EFA\u56FE\u5C42","children":[]},{"level":2,"title":"4. \u591A\u884C\u7701\u7565","slug":"_4-\u591A\u884C\u7701\u7565","link":"#_4-\u591A\u884C\u7701\u7565","children":[]},{"level":2,"title":"5. \u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","slug":"_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","link":"#_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","children":[]}],"relativePath":"pages/base/css/index.md"}'),p={name:"pages/base/css/index.md"},o=l("",15),e=[o];function c(t,r,D,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default}; +import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"css","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7F51\u7AD9\u7F6E\u7070","slug":"_1-\u7F51\u7AD9\u7F6E\u7070","link":"#_1-\u7F51\u7AD9\u7F6E\u7070","children":[]},{"level":2,"title":"2. css \u7684\u5C42/\u5806\u53E0\u4E0A\u4E0B\u6587","slug":"_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","link":"#_2-css-\u7684\u5C42-\u5806\u53E0\u4E0A\u4E0B\u6587","children":[]},{"level":2,"title":"3. css \u65B0\u5EFA\u56FE\u5C42","slug":"_3-css-\u65B0\u5EFA\u56FE\u5C42","link":"#_3-css-\u65B0\u5EFA\u56FE\u5C42","children":[]},{"level":2,"title":"4. \u591A\u884C\u7701\u7565","slug":"_4-\u591A\u884C\u7701\u7565","link":"#_4-\u591A\u884C\u7701\u7565","children":[]},{"level":2,"title":"5. \u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","slug":"_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","link":"#_5-\u6EDA\u52A8\u6761\u6837\u5F0F\u6539\u53D8","children":[]},{"level":2,"title":"6. scss\u5B9A\u4E49\u65B9\u6CD5\uFF0C\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528","slug":"_6-scss\u5B9A\u4E49\u65B9\u6CD5-\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528","link":"#_6-scss\u5B9A\u4E49\u65B9\u6CD5-\u5E76\u5728vite\u4E0B\u6CE8\u518C\u5168\u5C40\u53EF\u7528","children":[]}],"relativePath":"pages/base/css/index.md"}'),p={name:"pages/base/css/index.md"},o=l("",18),e=[o];function c(t,r,D,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_globalDemo.md.17f0d49d.lean.js b/assets/pages_base_globalDemo.md.17f0d49d.lean.js deleted file mode 100644 index 712850c..0000000 --- a/assets/pages_base_globalDemo.md.17f0d49d.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as o,h as p,o as e,c as t,b as s,g as c,i as n,a}from"./app.cac277bf.js";const x=JSON.parse('{"title":"node.js(http://www.nodejs.com.cn/7-days-nodejs/#2.5.5)","description":"","frontmatter":{},"headers":[{"level":2,"title":"\uFF01node \u5E38\u7528","slug":"node-\u5E38\u7528","link":"#node-\u5E38\u7528","children":[{"level":3,"title":"1. process\u5168\u5C40\u53D8\u91CF","slug":"_1-process\u5168\u5C40\u53D8\u91CF","link":"#_1-process\u5168\u5C40\u53D8\u91CF","children":[]},{"level":3,"title":"2. cp -r source/* target \u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","slug":"_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","link":"#_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","children":[]}]},{"level":2,"title":"1. \u57FA\u672C\u4FE1\u606F","slug":"_1-\u57FA\u672C\u4FE1\u606F","link":"#_1-\u57FA\u672C\u4FE1\u606F","children":[]},{"level":2,"title":"2. \u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","slug":"_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","link":"#_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","children":[]},{"level":2,"title":"3. \u5305package","slug":"_3-\u5305package","link":"#_3-\u5305package","children":[]},{"level":2,"title":"4. fs\u6A21\u5757","slug":"_4-fs\u6A21\u5757","link":"#_4-fs\u6A21\u5757","children":[]},{"level":2,"title":"5. path\u6A21\u5757","slug":"_5-path\u6A21\u5757","link":"#_5-path\u6A21\u5757","children":[]},{"level":2,"title":"6 .\u5355\u5B57\u8282\u7F16\u7801","slug":"_6-\u5355\u5B57\u8282\u7F16\u7801","link":"#_6-\u5355\u5B57\u8282\u7F16\u7801","children":[]},{"level":2,"title":"7. http\u6A21\u5757","slug":"_7-http\u6A21\u5757","link":"#_7-http\u6A21\u5757","children":[]},{"level":2,"title":"8. \u8FDB\u7A0B\u7BA1\u7406","slug":"_8-\u8FDB\u7A0B\u7BA1\u7406","link":"#_8-\u8FDB\u7A0B\u7BA1\u7406","children":[{"level":3,"title":"\u5E94\u7528\u573A\u666F","slug":"\u5E94\u7528\u573A\u666F","link":"#\u5E94\u7528\u573A\u666F","children":[]}]},{"level":2,"title":"9. \u5F02\u6B65\u7F16\u7A0B","slug":"_9-\u5F02\u6B65\u7F16\u7A0B","link":"#_9-\u5F02\u6B65\u7F16\u7A0B","children":[{"level":3,"title":"\u57DF\uFF08domain\uFF09","slug":"\u57DF-domain","link":"#\u57DF-domain","children":[]},{"level":3,"title":"\u6CE8\u610F\u70B9 \u26A0\uFE0F","slug":"\u6CE8\u610F\u70B9-\u26A0\uFE0F","link":"#\u6CE8\u610F\u70B9-\u26A0\uFE0F","children":[]}]}],"relativePath":"pages/base/globalDemo.md"}'),r={name:"pages/base/globalDemo.md"},D=a("",23),F={class:"tip custom-block"},y=s("p",{class:"custom-block-title"},"path",-1),i=s("p",null,[s("code",null,"path.normalize()"),n(": \u5C06\u4F20\u5165\u7684\u8DEF\u5F84\u8F6C\u6362\u4E3A"),s("strong",null,"\u6807\u51C6\u8DEF\u5F84"),n("\uFF0C"),s("strong",null,"\u89E3\u6790"),n("\u8DEF\u5F84\u4E2D\u7684"),s("code",null,"."),n("\u4E0E"),s("code",null,".."),n("\uFF0C\u8FD8\u80FD"),s("strong",null,"\u53BB\u6389"),n("\u591A\u4F59\u7684\u659C\u6760\u3002")],-1),A=s("strong",null,[n("Windows \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"\\")],-1),C=s("strong",null,[n("Linux \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"/")],-1),d=s("code",null,"/",-1),u=s("strong",null,[s("code",null,".replace(/\\\\/g, '/')")],-1),h=a("",1),g=a("",3),_=a("",38);function E(m,f,b,q,v,k){const l=p("MyText");return e(),t("div",null,[D,s("div",F,[y,s("ul",null,[s("li",null,[i,c(l,{text:"\u6CE8\u610F\uFF1A"}),n("\u6807\u51C6\u5316\u4E4B\u540E\u7684\u8DEF\u5F84\u91CC\u7684\u659C\u6760\u5728 "),A,n(" \uFF0C\u800C\u5728"),C,n("\u3002\u5982\u679C\u60F3\u4FDD\u8BC1\u4EFB\u4F55\u7CFB\u7EDF\u4E0B\u90FD\u4F7F\u7528"),d,n("\u4F5C\u4E3A\u8DEF\u5F84\u5206\u9694\u7B26\u7684\u8BDD\uFF0C\u9700\u8981\u7528 "),u,n(" \u518D\u66FF\u6362\u4E00\u4E0B\u6807\u51C6\u8DEF\u5F84\u3002"),h]),g])]),_])}const S=o(r,[["render",E]]);export{x as __pageData,S as default}; diff --git a/assets/pages_base_globalDemo.md.f5d8a625.js b/assets/pages_base_globalDemo.md.f5d8a625.js new file mode 100644 index 0000000..be21a16 --- /dev/null +++ b/assets/pages_base_globalDemo.md.f5d8a625.js @@ -0,0 +1 @@ +import{_ as e,o as a,c as t,b as o}from"./app.88185e12.js";const b=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"pages/base/globalDemo.md"}'),s={name:"pages/base/globalDemo.md"},n=o("p",null,"111",-1),r=[n];function c(l,_,p,d,i,m){return a(),t("div",null,r)}const g=e(s,[["render",c]]);export{b as __pageData,g as default}; diff --git a/assets/pages_base_globalDemo.md.f5d8a625.lean.js b/assets/pages_base_globalDemo.md.f5d8a625.lean.js new file mode 100644 index 0000000..be21a16 --- /dev/null +++ b/assets/pages_base_globalDemo.md.f5d8a625.lean.js @@ -0,0 +1 @@ +import{_ as e,o as a,c as t,b as o}from"./app.88185e12.js";const b=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"pages/base/globalDemo.md"}'),s={name:"pages/base/globalDemo.md"},n=o("p",null,"111",-1),r=[n];function c(l,_,p,d,i,m){return a(),t("div",null,r)}const g=e(s,[["render",c]]);export{b as __pageData,g as default}; diff --git a/assets/pages_base_html_index.md.084d5598.js b/assets/pages_base_html_index.md.66f38061.js similarity index 99% rename from assets/pages_base_html_index.md.084d5598.js rename to assets/pages_base_html_index.md.66f38061.js index a18190d..48336b2 100644 --- a/assets/pages_base_html_index.md.084d5598.js +++ b/assets/pages_base_html_index.md.66f38061.js @@ -1,4 +1,4 @@ -import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"HTML","description":"","frontmatter":{},"headers":[{"level":2,"title":"1.\u7981\u7528\u53F3\u952E \u548C \u7981\u7528\u9009\u62E9","slug":"_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","link":"#_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","children":[]},{"level":2,"title":"2. \u5C06 http \u8BF7\u6C42\u5347\u7EA7\u4E3A https","slug":"_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","link":"#_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","children":[]},{"level":2,"title":"3. a \u5143\u7D20\u7684\u5E94\u7528","slug":"_3-a-\u5143\u7D20\u7684\u5E94\u7528","link":"#_3-a-\u5143\u7D20\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. \u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","slug":"_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","link":"#_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","children":[]}],"relativePath":"pages/base/html/index.md"}'),p={name:"pages/base/html/index.md"},o=l(`

HTML

1.\u7981\u7528\u53F3\u952E \u548C \u7981\u7528\u9009\u62E9

js \u4E2D

js
// \u7981\u7528\u53F3\u952E
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"HTML","description":"","frontmatter":{},"headers":[{"level":2,"title":"1.\u7981\u7528\u53F3\u952E \u548C \u7981\u7528\u9009\u62E9","slug":"_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","link":"#_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","children":[]},{"level":2,"title":"2. \u5C06 http \u8BF7\u6C42\u5347\u7EA7\u4E3A https","slug":"_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","link":"#_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","children":[]},{"level":2,"title":"3. a \u5143\u7D20\u7684\u5E94\u7528","slug":"_3-a-\u5143\u7D20\u7684\u5E94\u7528","link":"#_3-a-\u5143\u7D20\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. \u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","slug":"_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","link":"#_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","children":[]}],"relativePath":"pages/base/html/index.md"}'),p={name:"pages/base/html/index.md"},o=l(`

HTML

1.\u7981\u7528\u53F3\u952E \u548C \u7981\u7528\u9009\u62E9

js \u4E2D

js
// \u7981\u7528\u53F3\u952E
 document.oncontextmenu = new Function("event.returnValue=false");
 // \u7981\u7528\u9009\u62E9
 document.onselectstart = new Function("event.returnValue=false");
diff --git a/assets/pages_base_html_index.md.084d5598.lean.js b/assets/pages_base_html_index.md.66f38061.lean.js
similarity index 94%
rename from assets/pages_base_html_index.md.084d5598.lean.js
rename to assets/pages_base_html_index.md.66f38061.lean.js
index 5e3221f..00c2208 100644
--- a/assets/pages_base_html_index.md.084d5598.lean.js
+++ b/assets/pages_base_html_index.md.66f38061.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"HTML","description":"","frontmatter":{},"headers":[{"level":2,"title":"1.\u7981\u7528\u53F3\u952E \u548C \u7981\u7528\u9009\u62E9","slug":"_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","link":"#_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","children":[]},{"level":2,"title":"2. \u5C06 http \u8BF7\u6C42\u5347\u7EA7\u4E3A https","slug":"_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","link":"#_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","children":[]},{"level":2,"title":"3. a \u5143\u7D20\u7684\u5E94\u7528","slug":"_3-a-\u5143\u7D20\u7684\u5E94\u7528","link":"#_3-a-\u5143\u7D20\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. \u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","slug":"_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","link":"#_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","children":[]}],"relativePath":"pages/base/html/index.md"}'),p={name:"pages/base/html/index.md"},o=l("",11),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{d as __pageData,A as default};
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"HTML","description":"","frontmatter":{},"headers":[{"level":2,"title":"1.\u7981\u7528\u53F3\u952E \u548C \u7981\u7528\u9009\u62E9","slug":"_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","link":"#_1-\u7981\u7528\u53F3\u952E-\u548C-\u7981\u7528\u9009\u62E9","children":[]},{"level":2,"title":"2. \u5C06 http \u8BF7\u6C42\u5347\u7EA7\u4E3A https","slug":"_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","link":"#_2-\u5C06-http-\u8BF7\u6C42\u5347\u7EA7\u4E3A-https","children":[]},{"level":2,"title":"3. a \u5143\u7D20\u7684\u5E94\u7528","slug":"_3-a-\u5143\u7D20\u7684\u5E94\u7528","link":"#_3-a-\u5143\u7D20\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. \u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","slug":"_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","link":"#_4-\u7CFB\u7EDF\u4E3B\u9898\u8272\u6539\u53D8","children":[]}],"relativePath":"pages/base/html/index.md"}'),p={name:"pages/base/html/index.md"},o=l("",11),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{d as __pageData,A as default};
diff --git a/assets/pages_base_js_index.md.a6526166.js b/assets/pages_base_js_index.md.adf3d015.js
similarity index 81%
rename from assets/pages_base_js_index.md.a6526166.js
rename to assets/pages_base_js_index.md.adf3d015.js
index 93d1425..a4ec0fa 100644
--- a/assets/pages_base_js_index.md.a6526166.js
+++ b/assets/pages_base_js_index.md.adf3d015.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"javaScript","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","slug":"_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","link":"#_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","children":[]},{"level":2,"title":"2. flat \u6570\u7EC4\u6241\u5E73\u5316","slug":"_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","link":"#_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","children":[]},{"level":2,"title":"3. \u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","slug":"_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","link":"#_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. js \u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F\uFF085 \u79CD\u65B9\u5F0F\uFF09","slug":"_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","link":"#_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","children":[]},{"level":2,"title":"6. structuredClone() \u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","slug":"_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","link":"#_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","children":[]},{"level":2,"title":"7. \u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","slug":"_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","link":"#_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","children":[{"level":3,"title":"1.\u7B2C\u4E00\u79CD\u65B9\u5F0F","slug":"_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","link":"#_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","children":[]},{"level":3,"title":"2.\u7B2C\u4E8C\u79CD\u65B9\u5F0F","slug":"_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","link":"#_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","children":[]}]}],"relativePath":"pages/base/js/index.md"}'),p={name:"pages/base/js/index.md"},o=l(`

javaScript

1. \u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57

TIP

js \u4E2D\u6709~\u662F\u6309\u4F4D\u53D6\u53CD\u8FD0\u7B97,~~ \u7528\u6765\u4F5C\u53CC\u975E\u6309\u4F4D\u53D6\u53CD\u8FD0\u7B97\uFF0C ~~ \u7684\u4F5C\u7528\u662F\u53BB\u6389\u5C0F\u6570\u90E8\u5206,\u5BF9\u4E8E\u6B63\u6570\uFF0C\u5411\u4E0B\u53D6\u6574\uFF1B\u5BF9\u4E8E\u8D1F\u6570\uFF0C\u5411\u4E0A\u53D6\u6574\uFF1B\u4E0E Math.floor()\u4E0D\u540C\u7684\u662F\uFF0C\u5B83\u53EA\u662F\u5355\u7EAF\u7684\u53BB\u6389\u5C0F\u6570\u90E8\u5206\uFF0C\u4E0D\u8BBA\u6B63\u8D1F\u90FD\u4E0D\u4F1A\u6539\u53D8\u6574\u6570\u90E8\u5206

\u975E\u6570\u5B57\u53D6\u503C\u4E3A 0\uFF0Ctrue:1,false:0

\u9A9A\u64CD\u4F5C
js
let str = "2";
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"javaScript","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","slug":"_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","link":"#_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","children":[]},{"level":2,"title":"2. flat \u6570\u7EC4\u6241\u5E73\u5316","slug":"_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","link":"#_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","children":[]},{"level":2,"title":"3. \u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","slug":"_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","link":"#_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. js \u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F\uFF085 \u79CD\u65B9\u5F0F\uFF09","slug":"_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","link":"#_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","children":[]},{"level":2,"title":"6. structuredClone() \u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","slug":"_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","link":"#_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","children":[]},{"level":2,"title":"7. \u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","slug":"_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","link":"#_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","children":[{"level":3,"title":"1.\u7B2C\u4E00\u79CD\u65B9\u5F0F","slug":"_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","link":"#_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","children":[]},{"level":3,"title":"2.\u7B2C\u4E8C\u79CD\u65B9\u5F0F","slug":"_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","link":"#_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","children":[]}]},{"level":2,"title":"8. \u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F","slug":"_8-\u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F","link":"#_8-\u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F","children":[]}],"relativePath":"pages/base/js/index.md"}'),p={name:"pages/base/js/index.md"},o=l(`

javaScript

1. \u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57

TIP

js \u4E2D\u6709~\u662F\u6309\u4F4D\u53D6\u53CD\u8FD0\u7B97,~~ \u7528\u6765\u4F5C\u53CC\u975E\u6309\u4F4D\u53D6\u53CD\u8FD0\u7B97\uFF0C ~~ \u7684\u4F5C\u7528\u662F\u53BB\u6389\u5C0F\u6570\u90E8\u5206,\u5BF9\u4E8E\u6B63\u6570\uFF0C\u5411\u4E0B\u53D6\u6574\uFF1B\u5BF9\u4E8E\u8D1F\u6570\uFF0C\u5411\u4E0A\u53D6\u6574\uFF1B\u4E0E Math.floor()\u4E0D\u540C\u7684\u662F\uFF0C\u5B83\u53EA\u662F\u5355\u7EAF\u7684\u53BB\u6389\u5C0F\u6570\u90E8\u5206\uFF0C\u4E0D\u8BBA\u6B63\u8D1F\u90FD\u4E0D\u4F1A\u6539\u53D8\u6574\u6570\u90E8\u5206

\u975E\u6570\u5B57\u53D6\u503C\u4E3A 0\uFF0Ctrue:1,false:0

\u9A9A\u64CD\u4F5C
js
let str = "2";
 console.log(~~str); //2
 

2. flat \u6570\u7EC4\u6241\u5E73\u5316

\u5E38\u89C4\u64CD\u4F5C
js
let arr = [1, [2, [3, 4\uFF0C5]]];
 function flatten(arr) {
@@ -117,33 +117,57 @@ import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{
     console.log(styleDeclaration.content, styleDeclaration.fontSize); //"\u4F60\u597D" 25.6px
   </script>
 </body>
-

6. structuredClone() \u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002

https://mp.weixin.qq.com/s/dLvyW_xmT3PAZ6ZrkrvYjA

mdn : https://developer.mozilla.org/zh-CN/docs/Web/API/structuredClone

7. \u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668

Details

1.\u7B2C\u4E00\u79CD\u65B9\u5F0F

js
// \u8FD9\u91CC\u7684 i \u4E3A\u5168\u5C40\u5B9A\u4E49\u7684
-for (var i = 0; i <= 5; i++) {
-  // \u540C\u6B65\u4EE3\u7801 ==\u300B  \u8FD9\u91CC\u4F9D\u6B21\u8F93\u51FA i \u7684\u503C\u4E3A\uFF0C0\uFF0C1\uFF0C2\uFF0C3\uFF0C4\uFF0C5
-  console.log(i);
-  // \u5F02\u6B65\u4EE3\u7801 ==\u300B \u5B9A\u65F6\u5668\uFF0C\u91CC\u9762\u7684i\u4F7F\u7528\u4E86\u95ED\u5305\uFF0C
-  // 1. \u6BCF\u9694\u4E00\u79D2\u63A8\u5165\u4EFB\u52A1\u961F\u5217\u4E2D\u4E00\u4E2A\u5B9A\u65F6\u4EFB\u52A1\uFF0C\u5B9A\u65F6 1s\uFF0C\u4E3A 6\u4E2A st(fn,1s)\uFF0C1s\u5185\u5168\u90E8\u6267\u884C\u5B8C\u6BD5\u4E86
+

6. structuredClone() \u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002

https://mp.weixin.qq.com/s/dLvyW_xmT3PAZ6ZrkrvYjA

mdn : https://developer.mozilla.org/zh-CN/docs/Web/API/structuredClone

7. \u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668

Details

1.\u7B2C\u4E00\u79CD\u65B9\u5F0F

js
for (var i = 0; i <= 5; i++) {
+  console.log(i); // 0\uFF0C1\uFF0C2\uFF0C3\uFF0C4\uFF0C5
+  // 1. \u5728 6\u6B21 \u5FAA\u73AF\u4E2D\uFF0C\u63A8\u5165\u4EFB\u52A1\u961F\u5217\u4E2D 6\u4E2A \u5B9A\u65F6\u4EFB\u52A1\uFF0C\u5728 1s \u5185\u5168\u90E8\u6267\u884C\u5B8C\u6BD5\u4E86
   // 2. performance.now() \u5927\u5C0F\u57FA\u672C\u76F8\u540C\uFF0C\u77AC\u95F4\u6267\u884C\u5B8C 0-5 \u6B21\u5FAA\u73AF\u63A8\u5165\u7684 6 \u4E2A\u5B9A\u65F6\u5668\uFF0C\u90FD\u5728 1s \u5185\u6267\u884C\u5B8C
   setTimeout(() => {
     console.log(performance.now());
     // i \u4E3A\u5168\u5C40\u6700\u7EC8\u503C 6\uFF0C\u867D\u7136\u5728\u5FAA\u73AF\u65F6\u5F15\u7528\u5230\u5B9A\u4E49\u7684 i\uFF0C\u4F46\u662F\u8FD9\u4E2A i \u662F\u5168\u5C40\u7684
     // \u6240\u4EE5\u5728 \u5B9A\u65F6\u5668\u6267\u884C\u65F6(\u540C\u6B65\u4EE3\u7801\u6267\u884C\u5B8C\u6BD5\u540E) \u8FD9\u4E2A i \u5DF2\u7ECF\u53D8\u4E3A 6 \u4E86\uFF0C\u8F93\u51FA6
-    console.log(i);
+    console.log(i); // 1s \u8F93\u51FA 6\u4E2A6
   }, 1000);
 }
-// \u8F93\u51FA\u5168\u5C40\u5B9A\u4E49\u7684i\uFF0C\u4E0A\u9762\u6267\u884C\u5B8C i \u6700\u7EC8\u503C\u4E3A6
-console.log(i);
-

2.\u7B2C\u4E8C\u79CD\u65B9\u5F0F

js
// \u8FD9\u91CC\u7684 i \u4E3A\u5168\u5C40\u5B9A\u4E49\u7684
-for (var i = 0; i <= 5; i++) {
-  console.log(i);
-  // \u5F02\u6B65\u4EE3\u7801 ==\u300B \u5B9A\u65F6\u5668\uFF0C\u91CC\u9762\u7684i\u4F7F\u7528\u4E86\u95ED\u5305\uFF0C
-  // 1. \u5728 0s,1s,2s,3s,4s,5s \u63A8\u5165\u4EFB\u52A1\u961F\u5217\u4E2D\u4E00\u4E2A\u5B9A\u65F6\u4EFB\u52A1\uFF0C
+console.log(i); // 6
+

2.\u7B2C\u4E8C\u79CD\u65B9\u5F0F

js
for (var i = 0; i <= 5; i++) {
+  console.log(i); // 0\uFF0C1\uFF0C2\uFF0C3\uFF0C4\uFF0C5
+  // 1. \u95F4\u9694 1s \u63A8\u5165\u4EFB\u52A1\u961F\u5217\u4E2D\u4E00\u4E2A\u5B9A\u65F6\u4EFB\u52A1\uFF0C 0s,1s,2s,3s,4s,5s\u3002
   // 2. \u4F9D\u6B21\u4E3A st(fn,0s)\uFF0Cst(fn,1s)\uFF0Cst(fn,2s)\uFF0Cst(fn,3s)\uFF0Cst(fn,4s),st(fn,5s),st(fn,6s),
   // 3. performance.now() \u5927\u5C0F\u76F8\u5DEE\u5927\u6982 1s\uFF0C\u56E0\u4E3A\u5728 0-5 \u6B21\u5FAA\u73AF\u63A8\u5165\u7684 6\u4E2A\u5B9A\u65F6\u5668\uFF0C \u5B9A\u65F6\u95F4\u9694\u4E3A 1s
   setTimeout(() => {
     console.log(performance.now());
-    console.log(i); // i \u4E3A\u5168\u5C40\u6700\u7EC8\u503C 6
+    console.log(i); // i \u4E3A\u5168\u5C40\u6700\u7EC8\u503C 6\uFF0C\u6BCF\u9694 1s \u8F93\u51FA 1\u4E2A 6
   }, i * 1000);
 }
 console.log(i);
-
`,35),e=[o];function t(c,r,y,D,F,A){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default}; +

8. \u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F

  1. compositionstart: \u5F53\u7528\u6237\u4F7F\u7528\u62FC\u97F3\u8F93\u5165\u6CD5\u5F00\u59CB\u8F93\u5165\u6C49\u5B57\u62FC\u97F3\u65F6\uFF0C\u8FD9\u4E2A\u4E8B\u4EF6\u5C31\u4F1A\u88AB\u89E6\u53D1\u3002
  2. compositionupdate: \u62FC\u97F3\u8F93\u5165\u6CD5\uFF0C\u8F93\u5165\u4E2D\u89E6\u53D1
  3. compositionend: \u62FC\u97F3\u8F93\u5165\u6CD5\uFF0C\u8F93\u5165\u7ED3\u675F\u89E6\u53D1
\u4F8B\u5B50
vue
<template>
+  <input
+    type="text"
+    v-model="demo"
+    @compositionstart="compositionstart"
+    @compositionupdate="compositionupdate"
+    @compositionend="compositionend"
+  />
+  <!--  elelment\u5143\u7D20\u4E0A\u9700\u8981 \u2795 \u4FEE\u9970\u7B26 native -->
+  <el-input
+    @compositionstart.native="compositionstart"
+    @compositionupdate.native="compositionupdate"
+    @compositionend.native="compositionend"
+    v-model="demo"
+  />
+</template>
+
+<script setup>
+import {ref} from 'vue'
+const demo= ref('')
+compositionend(e) {
+  console.log("end", e.target.value);
+},
+compositionstart(e) {
+  console.log("start", e.target.value);
+},
+compositionupdate(e) {
+  console.log("update", e.target.value);
+},
+</script>
+
`,38),e=[o];function t(c,r,y,D,F,A){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_js_index.md.a6526166.lean.js b/assets/pages_base_js_index.md.adf3d015.lean.js similarity index 77% rename from assets/pages_base_js_index.md.a6526166.lean.js rename to assets/pages_base_js_index.md.adf3d015.lean.js index 9c8e254..c2ec6ff 100644 --- a/assets/pages_base_js_index.md.a6526166.lean.js +++ b/assets/pages_base_js_index.md.adf3d015.lean.js @@ -1 +1 @@ -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"javaScript","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","slug":"_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","link":"#_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","children":[]},{"level":2,"title":"2. flat \u6570\u7EC4\u6241\u5E73\u5316","slug":"_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","link":"#_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","children":[]},{"level":2,"title":"3. \u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","slug":"_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","link":"#_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. js \u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F\uFF085 \u79CD\u65B9\u5F0F\uFF09","slug":"_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","link":"#_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","children":[]},{"level":2,"title":"6. structuredClone() \u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","slug":"_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","link":"#_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","children":[]},{"level":2,"title":"7. \u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","slug":"_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","link":"#_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","children":[{"level":3,"title":"1.\u7B2C\u4E00\u79CD\u65B9\u5F0F","slug":"_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","link":"#_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","children":[]},{"level":3,"title":"2.\u7B2C\u4E8C\u79CD\u65B9\u5F0F","slug":"_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","link":"#_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","children":[]}]}],"relativePath":"pages/base/js/index.md"}'),p={name:"pages/base/js/index.md"},o=l("",35),e=[o];function t(c,r,y,D,F,A){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default}; +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"javaScript","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","slug":"_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","link":"#_1-\u5C06\u4E00\u4E2A\u5B57\u7B26\u4E32\u53D8\u6210\u6570\u5B57","children":[]},{"level":2,"title":"2. flat \u6570\u7EC4\u6241\u5E73\u5316","slug":"_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","link":"#_2-flat-\u6570\u7EC4\u6241\u5E73\u5316","children":[]},{"level":2,"title":"3. \u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","slug":"_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","link":"#_3-\u62D3\u5C55\u8FD0\u7B97\u7B26\u7684\u5E94\u7528","children":[]},{"level":2,"title":"4. js \u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F\uFF085 \u79CD\u65B9\u5F0F\uFF09","slug":"_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","link":"#_4-js-\u4E1D\u6ED1\u7684\u64CD\u4F5C\u6837\u5F0F-5-\u79CD\u65B9\u5F0F","children":[]},{"level":2,"title":"6. structuredClone() \u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","slug":"_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","link":"#_6-structuredclone-\u65B9\u6CD5\u4F7F\u7528\u7ED3\u6784\u5316\u514B\u9686\u7B97\u6CD5\u5C06\u7ED9\u5B9A\u7684\u503C\u8FDB\u884C\u6DF1\u62F7\u8D1D\u3002","children":[]},{"level":2,"title":"7. \u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","slug":"_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","link":"#_7-\u5FAA\u73AF\u4E2D\u4F7F\u7528\u5B9A\u65F6\u5668","children":[{"level":3,"title":"1.\u7B2C\u4E00\u79CD\u65B9\u5F0F","slug":"_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","link":"#_1-\u7B2C\u4E00\u79CD\u65B9\u5F0F","children":[]},{"level":3,"title":"2.\u7B2C\u4E8C\u79CD\u65B9\u5F0F","slug":"_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","link":"#_2-\u7B2C\u4E8C\u79CD\u65B9\u5F0F","children":[]}]},{"level":2,"title":"8. \u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F","slug":"_8-\u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F","link":"#_8-\u76D1\u542C\u4E2D\u6587\u8F93\u5165\u5F00\u59CB\u548C\u7ED3\u675F","children":[]}],"relativePath":"pages/base/js/index.md"}'),p={name:"pages/base/js/index.md"},o=l("",38),e=[o];function t(c,r,y,D,F,A){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_js_prototype.md.650df3e5.js b/assets/pages_base_js_prototype.md.650df3e5.js new file mode 100644 index 0000000..36b4f2c --- /dev/null +++ b/assets/pages_base_js_prototype.md.650df3e5.js @@ -0,0 +1,88 @@ +import{_ as s,o as n,c as o,a}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u539F\u578B\u548C\u539F\u578B\u94FE","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u57FA\u7840\u77E5\u8BC6\uFF08\u6B7B\u8BB0\u786C\u80CC\uFF09","slug":"_1-\u57FA\u7840\u77E5\u8BC6-\u6B7B\u8BB0\u786C\u80CC","link":"#_1-\u57FA\u7840\u77E5\u8BC6-\u6B7B\u8BB0\u786C\u80CC","children":[]},{"level":2,"title":"2. const obj = new Object()\u7684\u539F\u578B\u94FE\u67E5\u627E","slug":"_2-const-obj-new-object-\u7684\u539F\u578B\u94FE\u67E5\u627E","link":"#_2-const-obj-new-object-\u7684\u539F\u578B\u94FE\u67E5\u627E","children":[]},{"level":2,"title":"3. \u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B Function","slug":"_3-\u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B-function","link":"#_3-\u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B-function","children":[{"level":3,"title":"3.1 \u6BCF\u4E2A\u51FD\u6570\u90FD\u662F Function\u7684\u5B9E\u4F8B","slug":"_3-1-\u6BCF\u4E2A\u51FD\u6570\u90FD\u662F-function\u7684\u5B9E\u4F8B","link":"#_3-1-\u6BCF\u4E2A\u51FD\u6570\u90FD\u662F-function\u7684\u5B9E\u4F8B","children":[]},{"level":3,"title":"3.2 \u666E\u901A\u51FD\u6570\u4E5F\u662FFunction\u5B9E\u4F8B","slug":"_3-2-\u666E\u901A\u51FD\u6570\u4E5F\u662Ffunction\u5B9E\u4F8B","link":"#_3-2-\u666E\u901A\u51FD\u6570\u4E5F\u662Ffunction\u5B9E\u4F8B","children":[]},{"level":3,"title":"3.3 \u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB","slug":"_3-3-\u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB","link":"#_3-3-\u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB","children":[]}]},{"level":2,"title":"4. \u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B","slug":"_4-\u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B","link":"#_4-\u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B","children":[]},{"level":2,"title":"5. \u5173\u4E8E js \u4E2D\u4E00\u5207\u7686\u5BF9\u8C61","slug":"_5-\u5173\u4E8E-js-\u4E2D\u4E00\u5207\u7686\u5BF9\u8C61","link":"#_5-\u5173\u4E8E-js-\u4E2D\u4E00\u5207\u7686\u5BF9\u8C61","children":[]},{"level":2,"title":"6. \u539F\u578B","slug":"_6-\u539F\u578B","link":"#_6-\u539F\u578B","children":[]},{"level":2,"title":"7. \u539F\u578B\u94FE","slug":"_7-\u539F\u578B\u94FE","link":"#_7-\u539F\u578B\u94FE","children":[]},{"level":2,"title":"8. \u6784\u9020\u51FD\u6570\uFF0C\u539F\u578B\uFF0C\u5B9E\u4F8B\u7684\u5173\u7CFB","slug":"_8-\u6784\u9020\u51FD\u6570-\u539F\u578B-\u5B9E\u4F8B\u7684\u5173\u7CFB","link":"#_8-\u6784\u9020\u51FD\u6570-\u539F\u578B-\u5B9E\u4F8B\u7684\u5173\u7CFB","children":[]},{"level":2,"title":"9. \u7EE7\u627F","slug":"_9-\u7EE7\u627F","link":"#_9-\u7EE7\u627F","children":[{"level":3,"title":"9.1 \u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","slug":"_9-1-\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","link":"#_9-1-\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","children":[]},{"level":3,"title":"9.2 \u901A\u8FC7Object.create(proto,[propertiesObject])\u65B9\u6CD5(\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027)","slug":"_9-2-\u901A\u8FC7object-create-proto-propertiesobject-\u65B9\u6CD5-\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","link":"#_9-2-\u901A\u8FC7object-create-proto-propertiesobject-\u65B9\u6CD5-\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","children":[]},{"level":3,"title":"9.3 \u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0","slug":"_9-3-\u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0","link":"#_9-3-\u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0","children":[]}]}],"relativePath":"pages/base/js/prototype.md"}'),l={name:"pages/base/js/prototype.md"},p=a(`

\u539F\u578B\u548C\u539F\u578B\u94FE

TIP

  1. \u539F\u578B\u662F\u4E3A\u4E86\u5B9E\u73B0\u9762\u5411\u5BF9\u8C61\u7684\u624B\u6BB5\uFF0C\u539F\u578B\u94FE\u662F\u4E3A\u4E86\u5B9E\u73B0\u7EE7\u627F
  2. \u5B9E\u73B0\u9762\u5411\u5BF9\u8C61\u7684\u4E24\u79CD\u65B9\u5F0F\uFF1A \u57FA\u4E8E\u7C7B\u7684\u9762\u5411\u5BF9\u8C61\u548C\u57FA\u4E8E\u539F\u578B\u7684\u9762\u5411\u5BF9\u8C61
  3. \u901A\u8FC7\u539F\u578B\u80FD\u77E5\u9053\u5BF9\u8C61\u7684\u7C7B\u578B\uFF0C\u4E0D\u7136\u4F1A\u4E22\u5931\u5BF9\u8C61\u7684\u7C7B\u578B
  4. \u901A\u8FC7\u4E00\u4E2A\u6784\u9020\u51FD\u6570\u5B9E\u4F8B\u5316\uFF0C\u4EA7\u751F\u4E00\u4E2A\u5B9E\u4F8B\u5BF9\u8C61\uFF0C\u5B9E\u4F8B\u5BF9\u8C61\u91CC\u4F1A\u6709\u4E00\u4E2A _proto_\u5C5E\u6027\u6307\u5411\u539F\u578B\u5BF9\u8C61\uFF0C\u539F\u578B\u5BF9\u8C61\u91CC\u9762\u8BB0\u5F55\u8BE5\u5B9E\u4F8B\u5BF9\u8C61\u7684\u7C7B\u578B\uFF0C\u8FD9\u4E2A\u5B9E\u4F8B\u5BF9\u8C61\u7684 constructor \u6307\u56DE \u6784\u9020\u51FD\u6570\uFF0C\u6784\u9020\u51FD\u6570\u91CC\u9762\u6709\u4E00\u4E2A prototype \u6307\u5411\u539F\u578B\u5BF9\u8C61
  5. \u5BF9\u4E8E\u6240\u6709\u51FD\u6570\uFF0C\u5C5E\u6027prototype\u662FObject.prototype\u7684\u5B9E\u4F8B\uFF0C\u4F8B\u5982\uFF1Ajs Array.prototype instanceof Object //true
  6. \u6240\u6709\u7684\u5BF9\u8C61\u90FD\u4F1A\u7EE7\u627F\u6765\u81EA Object.prototype \u7684\u5C5E\u6027\u548C\u65B9\u6CD5\u3002

1. \u57FA\u7840\u77E5\u8BC6\uFF08\u6B7B\u8BB0\u786C\u80CC\uFF09

  1. \u5BF9\u8C61\u662F\u67D0\u4E2A\u7279\u5B9A\u5F15\u7528\u7C7B\u578B\u7684\u5B9E\u4F8B\uFF0C\u53EF\u4EE5\u7406\u89E3\u4E3A\u5BF9\u8C61\u8981\u901A\u8FC7\u6784\u9020\u51FD\u6570\u5B9E\u4F8B\u5316\u5B9E\u73B0\u7684\uFF0C\u800C\u6784\u9020\u51FD\u6570\u672C\u8EAB\u53C8\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u6784\u9020\u51FD\u6570\u672C\u8EAB\u53C8\u9700\u8981\u901A\u8FC7\u6784\u9020\u51FD\u6570\u5B9E\u4F8B\u5316\u5B9E\u73B0\u3002
  2. js \u63D0\u4F9B\u4E86\u5F88\u591A\u539F\u751F\u5F15\u7528\u7C7B\u578B\uFF1AObject\u3001Array\u3001Function\u3001String\u3001Number\u3001Boolean\u3001Date\u3001RegExp\uFF0CMap\u3001WeakMap\u3001Set\u3001Symbol\u3001BigInt \u540C\u65F6\u5B83\u4EEC\u90FD\u662F\u539F\u751F\u6784\u9020\u51FD\u6570
  3. \u6BCF\u4E2A\u51FD\u6570\u90FD\u662F Function \u7C7B\u578B\u7684\u5B9E\u4F8B\uFF0C\u56E0\u6B64\u51FD\u6570\u4E5F\u662F\u5BF9\u8C61
  4. \u5BF9\u8C61\u90FD\u62E5\u6709\u9690\u5F0F\u539F\u578B\uFF08__proto__ \u5C5E\u6027\uFF09\uFF0C\u6307\u5411\u5B83\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61\uFF08prototype \u5C5E\u6027\uFF09
  5. \u6BCF\u4E2A\u6784\u9020\u51FD\u6570\u90FD\u6709\u4E00\u4E2Aprototype \u5C5E\u6027(\u53EA\u6709\u51FD\u6570\u624D\u6709prototype\u5C5E\u6027)\uFF0C\u53EB\u539F\u578B\u5BF9\u8C61(\u4E5F\u53EB\u663E\u5F0F\u539F\u578B)\uFF08\u6CE8\u610F\uFF1A\u539F\u578B\u5BF9\u8C61\uFF0C\u672C\u8D28\u662F\u5BF9\u8C61\uFF09\uFF0C
  6. \u539F\u578B\u5BF9\u8C61\u4E0A\u6709\u4E00\u4E2A constructor \u5C5E\u6027\u6307\u5411\u6784\u9020\u51FD\u6570\u672C\u8EAB\u3002Fn.prototype.constructor === Fn // true
  7. \u901A\u8FC7 new \u5B9E\u4F8B\u5316\u51FA\u6765\u7684\u5BF9\u8C61\u6CA1\u6709 prototype \u5C5E\u6027
  8. \u5BF9\u8C61\u90FD\u5177\u6709 __proto__ \u5C5E\u6027
  9. \u5B87\u5B99\u7684\u5C3D\u5934\uFF1AObject.prototype.__proto__ === null

2. const obj = new Object()\u7684\u539F\u578B\u94FE\u67E5\u627E

\u5BF9\u4E8E const obj = new Object()

  1. \u6839\u636E\u4E0A\u9762\u7684\u89C4\u5219 4 \u548C 5 \u53EF\u4EE5\u5F97\u77E5\uFF0Cobj.__proto__ === Object.prototype;
  2. \u6839\u636E\u89C4\u5219 2\u30013\u30014 \u53EF\u4EE5\u77E5\u9053 Object \u672C\u8EAB\u662F\u5F15\u7528\u7C7B\u578B\u4E5F\u5C31\u662F\u5BF9\u8C61;
  3. \u6839\u636E\u89C4\u5219 8\uFF0CObject \u62E5\u6709\u9690\u5F0F\u539F\u578B __proto__\uFF0C \u540C\u65F6 Object \u4E5F\u662F\u4E00\u4E2A\u51FD\u6570\uFF0C\u800C\u51FD\u6570\u90FD\u662F Function \u7684\u5B9E\u4F8B\uFF0C\u4E5F\u5C31\u662F Object \u662F Function \u7684\u5B9E\u4F8B;
  4. \u56E0\u4E3A\u5BF9\u8C61\u7684\u9690\u5F0F\u539F\u578B\uFF08__proto__\u5C5E\u6027\uFF09\u6307\u5411\u5B83\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61\uFF08prototype \u5C5E\u6027\uFF09 \u6240\u4EE5\uFF1AObject.__proto__ === Function.prototype;
  5. \u6839\u636E\u4E0A\u9762\u7684\u89C4\u5219 5\uFF0CFunction.prototype \u672C\u8D28\u662F\u5BF9\u8C61\uFF0C
  6. \u6839\u636E\u89C4\u5219 8\uFF0CFunction.prototype \u62E5\u6709\u9690\u5F0F\u539F\u578B __proto__\uFF0C\u800C\u5BF9\u8C61\u662F\u901A\u8FC7\u539F\u751F\u6784\u9020\u51FD\u6570 Object \u5B9E\u73B0\u7684\uFF0C\u6240\u4EE5 Function.prototype.__proto__ === Object.prototype;
  7. \u6700\u540E\u6839\u636E\u89C4\u5219 9\uFF0CObject.prototype.__proto__ === null \u3002
  8. \u81F3\u6B64\uFF0C\u8FD9\u6574\u4E00\u4E2A\u94FE\u8DEF\u7684\u8FC7\u7A0B\u4E5F\u5C31\u662F\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u539F\u7406\u89E3\u6790\u8FC7\u7A0B\uFF0C\u672C\u8D28\u5C31\u662F\u901A\u8FC7\u5C5E\u6027 proto \u8FDB\u884C\u94FE\u63A5\u6BCF\u4E00\u4E2A\u8282\u70B9\u5BF9\u8C61\u3002
js
const obj = new Object();
+// \u5B9E\u4F8B\u5BF9\u8C61\u7684\u9690\u5F0F\u539F\u578B\u6307\u5411\u5B83\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61
+obj.__proto__ === Object.prototype;
+// Object \u672C\u8EAB\u662F\u539F\u751F\u5F15\u7528\u7C7B\u578B\u4E5F\u5C31\u662F\u5BF9\u8C61\uFF0C\u800C\u5BF9\u8C61\u90FD\u62E5\u6709\u9690\u5F0F\u539F\u578B\uFF0C
+// \u540C\u65F6 Object \u53C8\u662F\u539F\u751F\u6784\u9020\u51FD\u6570\uFF0C\u800C\u51FD\u6570\u90FD\u662F Function \u7684\u5B9E\u4F8B\uFF0C\u53EF\u4EE5\u7B80\u5355\u7406\u89E3\u4E3A Object \u662F\u901A\u8FC7\u6784\u9020\u51FD\u6570 Function \u5B9E\u4F8B\u5316\u5B9E\u73B0\u3002
+Object.__proto__ === Function.prototype;
+// \u539F\u578B\u5BF9\u8C61\u672C\u8D28\u662F\u5BF9\u8C61\uFF0C\u800C\u5BF9\u8C61\u662F\u901A\u8FC7\u539F\u751F\u6784\u9020\u51FD\u6570 Object \u5B9E\u4F8B\u5316\u5B9E\u73B0\u7684
+Function.prototype.__proto__ === Object.prototype;
+// \u5B87\u5B99\u7684\u5C3D\u5934
+Object.prototype.__proto__ === null;
+

3. \u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B Function

3.1 \u6BCF\u4E2A\u51FD\u6570\u90FD\u662F Function\u7684\u5B9E\u4F8B

Function \u662F\u539F\u751F\u7684\u5F15\u7528\u7C7B\u578B\uFF0C\u4E5F\u5C31\u662F\u5BF9\u8C61\uFF0C\u4E5F\u5C31\u62E5\u6709\u9690\u5F0F\u539F\u578B\uFF0C\u6BCF\u4E2A\u51FD\u6570\u90FD\u662F Function \u7684\u5B9E\u4F8B\uFF0C\u6240\u4EE5 Function \u7684\u9690\u5F0F\u539F\u578B\u5C31\u6307\u5411\u4E86\u6784\u9020\u51FD\u6570 Function \u7684\u539F\u578B\u5BF9\u8C61

js
typeof Function === "function"; // true
+Function instanceof Function === true; // true
+
+Function.__proto__ === Function.prototype; // true
+// \u63A5\u4E0B\u6765\u8DDF\u4E0A\u6587\u4E00\u6837
+Function.prototype.__proto__ === Object.prototype;
+Object.prototype.__proto__ === null;
+

3.2 \u666E\u901A\u51FD\u6570\u4E5F\u662FFunction\u5B9E\u4F8B

js
function fn() {} // \u51FD\u6570\u58F0\u660E\u5B9A\u4E49\u51FD\u6570
+const fn = function () {}; // \u51FD\u6570\u8868\u8FBE\u5F0F\u5B9A\u4E49\u51FD\u6570
+
+// \u56E0\u4E3A\u6BCF\u4E2A\u51FD\u6570\u90FD\u662F Function \u7684\u5B9E\u4F8B\uFF0C\u51FD\u6570\u5B9E\u4F8B\u5BF9\u8C61 fn \u7684\u9690\u5F0F\u539F\u578B\u6307\u5411\u5B83\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61
+fn.__proto__ === Function.prototype; // true
+// \u63A5\u4E0B\u6765\u8DDF\u4E0A\u6587\u4E00\u6837
+Function.prototype.__proto__ === Object.prototype;
+Object.prototype.__proto__ === null;
+

3.3 \u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB

js
// String \u4F5C\u4E3A\u5B57\u7B26\u4E32\u7684\u6784\u9020\u51FD\u6570\u5BF9\u8C61\uFF0CString \u4E5F\u662F\u901A\u8FC7\u7684 Function \u7684\u5B9E\u4F8B\u5316\u800C\u6765\u3002\u6240\u4EE5
+String.__proto__ === Function.prototype;
+
+// Boolean \u4F5C\u4E3A\u5E03\u5C14\u7C7B\u578B\u7684\u6784\u9020\u51FD\u6570\u5BF9\u8C61\uFF0CBoolean \u4E5F\u662F\u901A\u8FC7\u7684 Function \u7684\u5B9E\u4F8B\u5316\u800C\u6765\u3002\u6240\u4EE5
+Boolean.__proto__ === Function.prototype;
+
+// Number \u4F5C\u4E3A\u6570\u5B57\u7684\u6784\u9020\u51FD\u6570\u5BF9\u8C61\uFF0CNumber \u4E5F\u662F\u901A\u8FC7\u7684 Function \u7684\u5B9E\u4F8B\u5316\u800C\u6765\u3002\u6240\u4EE5
+Number.__proto__ === Function.prototype;
+
+// \u540C\u6837\u5176\u5B83\u7684
+Map.__proto__ === Function.prototype;
+WeakMap.__proto__ === Function.prototype;
+Set.__proto__ === Function.prototype;
+

4. \u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B

  1. \u5F15\u7528\u7C7B\u578B\u4E0E\u57FA\u672C\u5305\u88C5\u7C7B\u578B\u7684\u4E3B\u8981\u533A\u522B\u662F\u5BF9\u8C61\u7684\u751F\u5B58\u671F\u3002
  2. \u4F7F\u7528 new \u64CD\u4F5C\u7B26\u521B\u5EFA\u7684\u5F15\u7528\u7C7B\u578B\u7684\u5B9E\u4F8B\u5BF9\u8C61\uFF0C\u5728\u6267\u884C\u6D41\u79BB\u5F00\u5F53\u524D\u4F5C\u7528\u57DF\u4E4B\u524D\u90FD\u4E00\u76F4\u4FDD\u5B58\u5728\u5185\u5B58\u4E2D\u3002
  3. \u800C\u81EA\u52A8\u521B\u5EFA\u7684\u57FA\u672C\u5305\u88C5\u7C7B\u578B\u7684\u5BF9\u8C61\uFF0C\u5C31\u53EA\u5B58\u5728\u4EE3\u7801\u6267\u884C\u7684\u4E00\u77AC\u95F4\uFF0C\u7136\u540E\u7ACB\u5373\u88AB\u9500\u6BC1\u3002\u8FD9\u610F\u5473\u7740\u6211\u4EEC\u4E0D\u80FD\u5728\u8FD0\u884C\u65F6\u4E3A\u57FA\u672C\u7C7B\u578B\u503C\u6DFB\u52A0\u5C5E\u6027\u548C\u65B9\u6CD5\u3002\u4E3A\u57FA\u672C\u7C7B\u578B\u5728\u4EE3\u7801\u6267\u884C\u7684\u65F6\u5019\u521B\u5EFA\u5BF9\u5E94\u7684\u57FA\u672C\u5305\u88C5\u7C7B\u578B\uFF0C\u53EA\u662F\u4E3A\u4E86\u65B9\u4FBF\u6570\u636E\u7684\u64CD\u4F5C\u3002

5. \u5173\u4E8E js \u4E2D\u4E00\u5207\u7686\u5BF9\u8C61

js
const s = "Cobyte";
+typeof s === "string"; // true
+s.__proto__ === String.prototype; // true
+s instanceof String; // false
+

\u57FA\u7840\u6570\u636E\u7C7B\u578B\u5728\u901A\u8FC7\u5B57\u9762\u91CF\u5F62\u5F0F\u521B\u5EFA\u65F6\uFF0C\u4F1A\u5BF9\u57FA\u7840\u7C7B\u578B\u8FDB\u884C\u5305\u88C5\uFF0C\u53EB\u57FA\u7840\u5305\u88C5\u7C7B\u578B\uFF0C\u5728\u4EE3\u7801\u521B\u5EFA\u7684\u4E00\u77AC\u95F4 const str = new String('cobyte')\uFF0C\u8BA9\u8FD9\u4E2A\u5B57\u7B26\u4E32\u53D8\u91CF\u53EF\u4EE5\u8BBF\u95EE\u5BF9\u8C61\u7684\u4E00\u4E9B\u5C5E\u6027\u548C\u65B9\u6CD5\uFF0C\u4F46\u4ED6\u672C\u8D28\u5E76\u4E0D\u662F\u4E00\u4E2A\u5BF9\u8C61\u3002\u4F46\u662F\u901A\u8FC7 new\u5173\u952E\u5B57\u521B\u5EFA\u65F6\uFF0C\u5C31\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u4E86\u3002

6. \u539F\u578B

  • prototype\u4E00\u822C\u79F0\u4E3A\u663E\u5F0F\u539F\u578B\uFF0C__proto__\u4E00\u822C\u79F0\u4E3A\u9690\u5F0F\u539F\u578B\uFF0C
  • \u6BCF\u4E00\u4E2A\u51FD\u6570\u5728\u521B\u5EFA\u4E4B\u540E\uFF0C\u5728\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u4F1A\u62E5\u6709\u4E00\u4E2A\u540D\u4E3A prototype \u7684\u5C5E\u6027\uFF0C\u8FD9\u4E2A\u5C5E\u6027\u8868\u793A\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61\u3002
  • \u6BCF\u4E2A JavaScript \u5BF9\u8C61\u90FD\u6709\u4E00\u4E2A\u9690\u85CF\u7684\u539F\u578B\u5C5E\u6027\u2014\u2014__proto__\u3002
js
function Fn() {}
+const obj = new Fn();
+// \u5BF9\u8C61 obj \u7684\u9690\u5F0F\u539F\u578B\u6307\u5411\u6784\u9020\u51FD\u6570 Fn \u7684\u539F\u578B\u5BF9\u8C61
+obj.__proto__ === Fn.prototype; // true
+

7. \u539F\u578B\u94FE

  • \u5F53\u6211\u4EEC\u8BBF\u95EE\u4E00\u4E2A\u5BF9\u8C61\u7684\u5C5E\u6027\u65F6\uFF0CJS \u4F1A\u5148\u5728\u8FD9\u4E2A\u5BF9\u8C61\u5B9A\u4E49\u7684\u5C5E\u6027\u4E2D\u8FDB\u884C\u67E5\u627E\uFF0C\u5982\u679C\u6CA1\u6709\u627E\u5230\uFF0C\u5C31\u4F1A\u6CBF\u7740 __proto__ \u8FD9\u4E2A\u9690\u5F0F\u539F\u578B\u5173\u8054\u8D77\u6765\u7684\u94FE\u6761\u5411\u4E0A\u4E00\u4E2A\u5BF9\u8C61\u67E5\u627E\uFF0C\u8FD9\u4E2A\u94FE\u6761\u5C31\u662F\u539F\u578B\u94FE\u3002

8. \u6784\u9020\u51FD\u6570\uFF0C\u539F\u578B\uFF0C\u5B9E\u4F8B\u7684\u5173\u7CFB

  • \u6BCF\u4E2A\u6784\u9020\u51FD\u6570\u90FD\u6709\u4E00\u4E2A\u539F\u578B\u5BF9\u8C61(prototype\u5C5E\u6027)\uFF0C\u539F\u578B\u5BF9\u8C61\u90FD\u5305\u542B\u4E00\u4E2A\u6307\u5411\u6784\u9020\u51FD\u6570\u7684\u6307\u9488(constructor\u5C5E\u6027)\uFF0C\u5B9E\u4F8B\u90FD\u5305\u542B\u4E00\u4E2A\u6307\u5411\u539F\u578B\u5BF9\u8C61\u7684\u5185\u90E8\u6307\u9488(__proto__\u5C5E\u6027)

9. \u7EE7\u627F

TIP

  1. hasOwnProperty \u65B9\u6CD5\u6765\u68C0\u6D4B\u5BF9\u8C61\u4E0A\u7684\u5C5E\u6027\u662F\u5426\u662F\u81EA\u8EAB\u5B9A\u4E49\u7684\u8FD8\u662F\u901A\u8FC7\u539F\u578B\u94FE\u7EE7\u627F\u800C\u6765\u7684\u3002

9.1 \u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027

js
const obj1 = {
+  info: "cobyte",
+  run: function () {
+    console.log("run");
+  },
+};
+const obj2 = {
+  age: 18,
+};
+// \u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027
+obj2.__proto__ = obj1;
+obj2.info; // 'cobyte'
+obj2.run(); // 'run'
+

9.2 \u901A\u8FC7Object.create(proto,[propertiesObject])\u65B9\u6CD5(\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027)

js
const obj1 = {
+  info: "cobyte",
+  run: function () {
+    console.log("run");
+  },
+};
+// \u901A\u8FC7\`Object.create(proto,[propertiesObject])\`\u65B9\u6CD5
+const obj2 = Object.create(obj1, { age: { value: 18 } });
+obj2.info; // 'cobyte'
+obj2.run(); // 'run'
+

9.3 \u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0

  • \u4E0D\u591F\u4E25\u8C28\uFF0C\u5355\u5355\u4FEE\u6539\u5B50\u7C7B\u539F\u578B\u5BF9\u8C61\u4E3A\u7236\u7C7B\u5B9E\u4F8B\uFF0C\u90A3\u5B50\u7C7B\u7684\u6784\u9020\u51FD\u6570\u4F1A\u6709\u95EE\u9898\uFF0C\u800C\u4E14\u5982\u679C\u7236\u7C7B\u9700\u8981\u4F20\u53C2\uFF0C\u8FD9\u6837\u5B9E\u73B0\u7684\u7EE7\u627F\uFF0C\u5728 new \u5B50\u7C7B\u5B9E\u4F8B\u7684\u65F6\u5019\u65E0\u6CD5\u4F20\u53C2
js
function Fn1() {
+  this.age = 18;
+}
+Fn1.prototype.getAge = function () {
+  return this.age;
+};
+
+function Fn2() {}
+// \u8BA9\u6784\u9020\u51FD\u6570 Fn2 \u7684\u539F\u578B\u5BF9\u8C61\u7B49\u4E8E\u6784\u9020\u51FD\u6570 Fn1 \u7684\u5B9E\u4F8B\u5BF9\u8C61
+Fn2.prototype = new Fn1();
+
+const fn2 = new Fn2();
+fn2.age; // 18
+fn2.getAge(); // 18
+

\u8FD9\u91CC\u672C\u8D28\u662F\u91CD\u5199\u539F\u578B\u5BF9\u8C61\u3002\u7528\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7406\u89E3\u7684\u8BDD\u5C31\u662F\uFF1A\u5728\u8FDB\u884C new \u64CD\u4F5C\u65F6\uFF0Cnew\u64CD\u4F5C\u5728\u80CC\u540E\u505A\u4E86\u4EC0\u4E48\uFF0C

  1. fn2\u7684\u9690\u5F0F\u539F\u578B__proto__\u6307\u5411\u4E86\u6784\u9020\u51FD\u6570Fn2\u7684\u663E\u5F0F\u539F\u578Bprototype\uFF0C
  2. Fn2.prototype\u6B64\u65F6\u5DF2\u7ECF\u53D8\u4E86\uFF0C\u53D8\u6210\u4E86fn1\u7684\u5B9E\u4F8B\u5BF9\u8C61\u3002
  3. \u8FD9\u6837 fn2 \u4E0D\u4EC5\u62E5\u6709 Fn1 \u5B9E\u4F8B\u5BF9\u8C61\u7684\u5168\u90E8\u5C5E\u6027\u548C\u65B9\u6CD5\uFF0C\u800C\u4E14 Fn1 \u5B9E\u4F8B\u7684\u9690\u5F0F\u539F\u578B\u6307\u5411 Fn1 \u7684\u663E\u5F0F\u539F\u578B
  4. \u6700\u7EC8 Fn1 \u7684 prototype \u5C5E\u6027\u503C\u7684\u9690\u5F0F\u539F\u578B\u6307\u5411 Object.prototype\uFF0C\u8FD9\u6837\u6700\u7EC8\u5B9E\u73B0\u7EE7\u627F\u4E86 Object \u4E0A\u7684\u5C5E\u6027\u548C\u65B9\u6CD5\u3002

\u4EE3\u7801\u89E3\u91CA

js
fn2.__proto__ === Fn2.prototype; // 1. true
+Fn2.prototype.__proto__ === Fn1.prototype; // 2.  true
+Fn1.prototype.__proto__ === Object.prototype; // 3.  true
+Object.prototype.__proto__ === null; // 4. true
+
`,41),e=[p];function t(c,r,y,D,F,C){return n(),o("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_js_prototype.md.650df3e5.lean.js b/assets/pages_base_js_prototype.md.650df3e5.lean.js new file mode 100644 index 0000000..5ba8e16 --- /dev/null +++ b/assets/pages_base_js_prototype.md.650df3e5.lean.js @@ -0,0 +1 @@ +import{_ as s,o as n,c as o,a}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u539F\u578B\u548C\u539F\u578B\u94FE","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u57FA\u7840\u77E5\u8BC6\uFF08\u6B7B\u8BB0\u786C\u80CC\uFF09","slug":"_1-\u57FA\u7840\u77E5\u8BC6-\u6B7B\u8BB0\u786C\u80CC","link":"#_1-\u57FA\u7840\u77E5\u8BC6-\u6B7B\u8BB0\u786C\u80CC","children":[]},{"level":2,"title":"2. const obj = new Object()\u7684\u539F\u578B\u94FE\u67E5\u627E","slug":"_2-const-obj-new-object-\u7684\u539F\u578B\u94FE\u67E5\u627E","link":"#_2-const-obj-new-object-\u7684\u539F\u578B\u94FE\u67E5\u627E","children":[]},{"level":2,"title":"3. \u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B Function","slug":"_3-\u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B-function","link":"#_3-\u6709\u610F\u601D\u7684\u4E00\u4E2A\u7C7B\u578B-function","children":[{"level":3,"title":"3.1 \u6BCF\u4E2A\u51FD\u6570\u90FD\u662F Function\u7684\u5B9E\u4F8B","slug":"_3-1-\u6BCF\u4E2A\u51FD\u6570\u90FD\u662F-function\u7684\u5B9E\u4F8B","link":"#_3-1-\u6BCF\u4E2A\u51FD\u6570\u90FD\u662F-function\u7684\u5B9E\u4F8B","children":[]},{"level":3,"title":"3.2 \u666E\u901A\u51FD\u6570\u4E5F\u662FFunction\u5B9E\u4F8B","slug":"_3-2-\u666E\u901A\u51FD\u6570\u4E5F\u662Ffunction\u5B9E\u4F8B","link":"#_3-2-\u666E\u901A\u51FD\u6570\u4E5F\u662Ffunction\u5B9E\u4F8B","children":[]},{"level":3,"title":"3.3 \u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB","slug":"_3-3-\u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB","link":"#_3-3-\u539F\u751F\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u4E0E\u539F\u578B\u94FE\u7684\u5173\u7CFB","children":[]}]},{"level":2,"title":"4. \u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B","slug":"_4-\u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B","link":"#_4-\u57FA\u7840\u6570\u636E\u7C7B\u578B\u548C\u5F15\u7528\u6570\u636E\u7C7B\u578B","children":[]},{"level":2,"title":"5. \u5173\u4E8E js \u4E2D\u4E00\u5207\u7686\u5BF9\u8C61","slug":"_5-\u5173\u4E8E-js-\u4E2D\u4E00\u5207\u7686\u5BF9\u8C61","link":"#_5-\u5173\u4E8E-js-\u4E2D\u4E00\u5207\u7686\u5BF9\u8C61","children":[]},{"level":2,"title":"6. \u539F\u578B","slug":"_6-\u539F\u578B","link":"#_6-\u539F\u578B","children":[]},{"level":2,"title":"7. \u539F\u578B\u94FE","slug":"_7-\u539F\u578B\u94FE","link":"#_7-\u539F\u578B\u94FE","children":[]},{"level":2,"title":"8. \u6784\u9020\u51FD\u6570\uFF0C\u539F\u578B\uFF0C\u5B9E\u4F8B\u7684\u5173\u7CFB","slug":"_8-\u6784\u9020\u51FD\u6570-\u539F\u578B-\u5B9E\u4F8B\u7684\u5173\u7CFB","link":"#_8-\u6784\u9020\u51FD\u6570-\u539F\u578B-\u5B9E\u4F8B\u7684\u5173\u7CFB","children":[]},{"level":2,"title":"9. \u7EE7\u627F","slug":"_9-\u7EE7\u627F","link":"#_9-\u7EE7\u627F","children":[{"level":3,"title":"9.1 \u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","slug":"_9-1-\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","link":"#_9-1-\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","children":[]},{"level":3,"title":"9.2 \u901A\u8FC7Object.create(proto,[propertiesObject])\u65B9\u6CD5(\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027)","slug":"_9-2-\u901A\u8FC7object-create-proto-propertiesobject-\u65B9\u6CD5-\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","link":"#_9-2-\u901A\u8FC7object-create-proto-propertiesobject-\u65B9\u6CD5-\u672C\u8D28\u8FD8\u662F\u901A\u8FC7\u91CD\u5199\u9690\u5F0F\u539F\u578B\u5C5E\u6027","children":[]},{"level":3,"title":"9.3 \u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0","slug":"_9-3-\u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0","link":"#_9-3-\u901A\u8FC7\u6784\u9020\u51FD\u6570\u65B9\u5F0F\u5B9E\u73B0","children":[]}]}],"relativePath":"pages/base/js/prototype.md"}'),l={name:"pages/base/js/prototype.md"},p=a("",41),e=[p];function t(c,r,y,D,F,C){return n(),o("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_js_this.md.ec485cc5.js b/assets/pages_base_js_this.md.ec485cc5.js new file mode 100644 index 0000000..be3af7b --- /dev/null +++ b/assets/pages_base_js_this.md.ec485cc5.js @@ -0,0 +1,221 @@ +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"this\u7684\u6307\u5411\u95EE\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u666E\u901A\u51FD\u6570\u7684 this","slug":"_1-\u666E\u901A\u51FD\u6570\u7684-this","link":"#_1-\u666E\u901A\u51FD\u6570\u7684-this","children":[]},{"level":2,"title":"2. \u7BAD\u5934\u51FD\u6570\u7684 this","slug":"_2-\u7BAD\u5934\u51FD\u6570\u7684-this","link":"#_2-\u7BAD\u5934\u51FD\u6570\u7684-this","children":[]},{"level":2,"title":"3. \u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this","slug":"_3-\u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this","link":"#_3-\u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this","children":[]},{"level":2,"title":"4. \u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684 this","slug":"_4-\u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684-this","link":"#_4-\u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684-this","children":[]},{"level":2,"title":"5. \u6784\u9020\u51FD\u6570\u4E2D\u7684 this \uFF08\u901A\u8FC7 new\uFF09","slug":"_5-\u6784\u9020\u51FD\u6570\u4E2D\u7684-this-\u901A\u8FC7-new","link":"#_5-\u6784\u9020\u51FD\u6570\u4E2D\u7684-this-\u901A\u8FC7-new","children":[]},{"level":2,"title":"6. call","slug":"_6-call","link":"#_6-call","children":[]},{"level":2,"title":"7. apply","slug":"_7-apply","link":"#_7-apply","children":[]},{"level":2,"title":"8. bind","slug":"_8-bind","link":"#_8-bind","children":[]},{"level":2,"title":"9. this \u7684\u4F18\u5148\u7EA7","slug":"_9-this-\u7684\u4F18\u5148\u7EA7","link":"#_9-this-\u7684\u4F18\u5148\u7EA7","children":[]},{"level":2,"title":"10. Function.prototype.call","slug":"_10-function-prototype-call","link":"#_10-function-prototype-call","children":[]},{"level":2,"title":"11. Function.prototype.apply","slug":"_11-function-prototype-apply","link":"#_11-function-prototype-apply","children":[]},{"level":2,"title":"12. Function.prototype.bind","slug":"_12-function-prototype-bind","link":"#_12-function-prototype-bind","children":[]},{"level":2,"title":"13. New \u5173\u952E\u5B57","slug":"_13-new-\u5173\u952E\u5B57","link":"#_13-new-\u5173\u952E\u5B57","children":[]}],"relativePath":"pages/base/js/this.md"}'),p={name:"pages/base/js/this.md"},o=l(`

this\u7684\u6307\u5411\u95EE\u9898

\u53C2\u8003\u6587\u7AE0: this \u5B9E\u6218\u4F8B\u9898\u603B\u7ED3\u5206\u6790

TIP

  • \u533F\u540D\u51FD\u6570\u7684this\u6C38\u8FDC\u6307\u5411window

  • \u8BCD\u6CD5\u4F5C\u7528\u57DF\u5728\u8BCD\u6CD5\u5206\u6790\u9636\u6BB5\u5C31\u88AB\u786E\u5B9A\u4E86\uFF08\u5199\u4EE3\u7801\u7684\u65F6\u5019\u5C31\u786E\u5B9A\u4E86\uFF09\uFF0Cjs \u662F\u89E3\u91CA\u578B\u8BED\u8A00\uFF0C\u6CA1\u6709\u7F16\u8BD1\u65F6\uFF0C\u6709\u9884\u7F16\u8BD1\u9636\u6BB5

  • java \u662F\u7F16\u8BD1\u578B\u8BED\u8A00\uFF1Ajava \u7684\u4EE3\u7801\u5C31\u662F\u88AB\u7F16\u8BD1\u4E3A .class \u6587\u4EF6\u624D\u80FD\u8FD0\u884C\uFF0C\u8FD9\u4E2A\u7F16\u8BD1\u8FC7\u7A0B\u5C31\u662F\u7F16\u8BD1\u65F6\uFF0C\u8FD0\u884C .class \u6587\u4EF6\u5C31\u662F\u8FD0\u884C\u65F6\u3002

  • \u7BAD\u5934\u51FD\u6570\u672C\u8EAB\u6CA1\u6709this\uFF0C\u56E0\u4E3A\u57FA\u4E8E\u95ED\u5305(\u672C\u8EAB\u6CA1\u6709\uFF0C\u53BB\u5916\u5C42\u5BFB\u627E)\uFF0C\u4F1A\u53BB\u5916\u5C42\u5BFB\u627Ethis\uFF0C\u95ED\u5305\u5C5E\u4E8E\u8BCD\u6CD5\u4F5C\u7528\u57DF\uFF08\u8BCD\u6CD5\u4F5C\u7528\u57DF\u662F\u5728\u7F16\u8BD1\u65F6\u786E\u5B9A\u7684\uFF09

  • \u7BAD\u5934\u51FD\u6570this\u6307\u5411\u8C01\uFF0C\u51B3\u5B9A\u4E8E\u5B83\u5B9A\u4E49\u7684\u4F4D\u7F6E\uFF0C\u800C\u4E0D\u662F\u8FD0\u884C\u7684\u4F4D\u7F6E\uFF08\u56E0\u4E3Athis => \u95ED\u5305 => \u8BCD\u6CD5\u4F5C\u7528\u57DF => \u7F16\u8BD1\u65F6\u6001\u786E\u5B9A\uFF08js \u6CA1\u6709\u7F16\u8BD1\uFF0C\u4F46\u662F\u6709\u9884\u7F16\u8BD1\uFF0C\u7F16\u8BD1\u65F6\u6001\u5C31\u786E\u5B9A\u4E86\u8BCD\u6CD5\u4F5C\u7528\u57DF\uFF09

  • B.apply(A, arguments)\uFF1A\u5373 A \u5BF9\u8C61\u5E94\u7528 B \u5BF9\u8C61\u7684\u65B9\u6CD5 arguments\u4E3A\u6570\u7EC4

  • B.call(A, arguments)\uFF1A\u5373 A \u5BF9\u8C61\u5E94\u7528 B \u5BF9\u8C61\u7684\u65B9\u6CD5 arguments\u4E3A\u5217\u8868\u9879

  • const newFn = fn.bind(A, arguments)\u7684\u4F5C\u7528\u662F\u53EA\u4FEE\u6539this\u6307\u5411\uFF0C\u4F46\u4E0D\u4F1A\u7ACB\u5373\u6267\u884C fn\uFF1B\u4F1A\u8FD4\u56DE\u4E00\u4E2A\u4FEE\u6539\u4E86 this \u6307\u5411\u540E\u7684 fn\u3002\u9700\u8981\u8C03\u7528\u624D\u4F1A\u6267\u884C:bind(thisArg, arg1, arg2, arg3, ...)()\u3002bind \u7684\u4F20\u53C2\u548C call \u76F8\u540C\u3002

1. \u666E\u901A\u51FD\u6570\u7684 this

  • \u5728\u975E\u4E25\u683C\u6A21\u5F0F\u4E0B\u5168\u5C40\u8C03\u7528\u51FD\u6570\u65F6\uFF0Cthis\u6307\u5411window\uFF0C\u5728\u4E25\u683C\u6A21\u5F0F\u4E0B this\u4E3Aundefined(babel \u8F6C\u4E3A ES6 \u65F6\uFF0C\u4F1A\u81EA\u5B9A\u52A0\u4E0A \u4E25\u683C\u6A21\u5F0F)

2. \u7BAD\u5934\u51FD\u6570\u7684 this

  • \u7BAD\u5934\u51FD\u6570\u7684 this \u7684\u6307\u5411\u662F\u7531\u5916\u5C42(\u51FD\u6570\u6216\u5168\u5C40)\u4F5C\u7528\u57DF\u6765\u51B3\u5B9A\u7684\u3002

  • \u7BAD\u5934\u51FD\u6570\u4F53\u5185\u7684 this \u5BF9\u8C61\uFF0C\u5C31\u662F\u5B9A\u4E49\u65F6\u6240\u5728\u7684\u5BF9\u8C61\uFF0C\u800C\u4E0D\u662F\u4F7F\u7528\u65F6\u6240\u5728\u7684\u5BF9\u8C61\u3002\u666E\u901A\u51FD\u6570\u4F7F\u7528\u4E86\u4E25\u683C\u6A21\u5F0F this \u4F1A\u6307\u5411 undefined \u4F46\u7BAD\u5934\u51FD\u6570\u4F9D\u7136\u6307\u5411\u4E86 window

3. \u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this

\u4F8B\u5B50
js
const obj = {
+  name: "coboy",
+  age: 18,
+  add: function () {
+    console.log(this, this.name, this.age);
+  },
+  edit: function () {
+    // \u8FD9\u91CC\u58F0\u660E\u4E86\u4E00\u4E2A fn \u51FD\u6570\uFF0C\u63A5\u7740\u53C8\u9A6C\u4E0A\u6267\u884C\u4E86\u5B83\uFF0C\u5176\u5B9E\u53EF\u4EE5\u770B\u505A\u662F\u4E00\u4E2A\u533F\u540D\u7684\u81EA\u6267\u884C\u51FD\u6570
+    function fn() {
+      console.log(this);
+    }
+    fn();
+    // (function () {
+    //   console.log(this);
+    // })();
+  },
+  arrow: function () {
+    const fn = () => {
+      console.log(this);
+    };
+    fn();
+  },
+};
+// 1. \u8C01\u8C03\u7528\u4E86\u5B83\uFF0C\u5B83\u5C31\u6307\u5411\u8C01\uFF01
+obj.add(); // {name: "coboy", age: 18, add: \u0192} "coboy" 18
+
+// 2.  obj \u5BF9\u8C61\u65B9\u6CD5 add \u8D4B\u503C\u7ED9 fn \u4E4B\u540E\uFF0Cfn \u4ECD\u7136\u5728 window \u7684\u5168\u5C40\u73AF\u5883\u4E2D\u6267\u884C\uFF0C\u6240\u4EE5 this \u4ECD\u7136\u6307\u5411 window\u3002
+const fn = obj.add;
+fn(); // window
+
+// 3. \u533F\u540D\u51FD\u6570\u7684 this \u6C38\u8FDC\u6307\u5411 window\uFF01
+obj.edit(); // window
+
+// 4. \u7BAD\u5934\u51FD\u6570\u7684 this  \u662F\u7531\u5916\u5C42\u51FD\u6570\u4F5C\u7528\u57DF\u6216\u8005\u5168\u5C40\u4F5C\u7528\u57DF\u51B3\u5B9A\u7684\u3002
+obj.arrow(); // {name: "coboy", age: 18, add: \u0192}   \u7BAD\u5934\u51FD\u6570 this \u6307\u5411\u5916\u5C42\uFF0C\u8FD9\u91CC\u5C31\u662Fobj
+

4. \u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684 this

\u4F8B\u5B50
js
const animal = {
+  name: "cat",
+  age: 18,
+  add: function () {
+    return this;
+  },
+  dog: {
+    name: "dog",
+    getName: function () {
+      console.log(this.name);
+    },
+  },
+};
+// 1. this \u6307\u5411 animal \u5BF9\u8C61\u672C\u8EAB
+console.log(obj.add() === animal); // true
+
+// 2. \u8C01\u8C03\u7528\u6307\u5411\u8C01
+animal.dog.getName(); // 'dog'
+

5. \u6784\u9020\u51FD\u6570\u4E2D\u7684 this \uFF08\u901A\u8FC7 new\uFF09

  • \u901A\u8FC7 new \u64CD\u4F5C\u7B26\u6765\u6784\u5EFA\u4E00\u4E2A\u6784\u9020\u51FD\u6570\u7684\u5B9E\u4F8B\u5BF9\u8C61\uFF0C\u8FD9\u4E2A\u6784\u9020\u51FD\u6570\u4E2D\u7684 this \u5C31\u6307\u5411\u8FD9\u4E2A\u65B0\u7684\u5B9E\u4F8B\u5BF9\u8C61\uFF08\u65B0\u521B\u5EFA\u7684\u5BF9\u8C61\u4E0A\uFF09\uFF0C\u4E14\u4F18\u5148\u7EA7\u8981\u6BD4 bind \u7684\u9AD8\u3002\u540C\u65F6\u6784\u9020\u51FD\u6570 prototype \u5C5E\u6027\u4E0B\u9762\u65B9\u6CD5\u4E2D\u7684 this \u4E5F\u6307\u5411\u8FD9\u4E2A\u65B0\u7684\u5B9E\u4F8B\u5BF9\u8C61\u3002
  • \u6784\u9020\u51FD\u6570\u4E2D\u663E\u5F0F\u8FD4\u56DE\u4E00\u4E2A\u503C\uFF0C\u4E14\u8FD4\u56DE\u7684\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u90A3\u4E48 this \u5C31\u6307\u5411\u8FD4\u56DE\u7684\u5BF9\u8C61\uFF0C\u5982\u679C\u8FD4\u56DE\u7684\u4E0D\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u800C\u662F\u57FA\u672C\u7C7B\u578B\uFF0C\u90A3\u4E48 this \u4ECD\u7136\u6307\u5411\u5B9E\u4F8B\u3002
\u4F8B\u5B50
js
// 1.  \u6784\u9020\u51FD\u6570\u4E2D this
+function Animal() {
+  this.txt = "coboy";
+  this.age = 100;
+  console.log(this); // Animal \xA0{txt: 'coboy', age: 100}
+}
+Animal.prototype.getNum = function () {
+  return this.txt;
+};
+const a1 = new Animal();
+console.log(a1); // Animal \xA0{txt: 'coboy', age: 100}
+console.log(a1.age); // 100
+console.log(a1.getNum()); // 'coboy'
+
+// 2. \u6784\u9020\u51FD\u6570\u4E2D\u51FA\u73B0\u663E\u5F0F return \u7684\u60C5\u51B5\u3002
+// \u8FD4\u56DE\u5BF9\u8C61
+function Animal() {
+  this.txt = "coboy";
+  const obj = { txt: "cobyte" };
+  return obj;
+}
+const a1 = new Animal();
+console.log(a1.txt); // cobyte
+
+// \u8FD4\u56DE\u57FA\u672C\u7C7B\u578B
+function Animal1() {
+  this.txt = "coboy";
+  return 1;
+}
+const a1 = new Animal1();
+console.log(a1.txt); // 'coboy'
+

6. call

  • function.call(thisArg, arg1, arg2, ...)\uFF1A\u53C2\u6570\u53EF\u4EE5\u662F\u4EFB\u610F\u6570\u636E\u7C7B\u578B
\u4F8B\u5B50
js
Math.max.call(Math, 1, 2, 3, 10); // 10
+const obj = {
+  txt: "coboy",
+  age: 18,
+  getName: function () {
+    console.log(this, this.txt);
+  },
+};
+const obj1 = {
+  txt: "cobyte",
+};
+obj.getName(); // this\u6307\u5411obj
+obj.getName.call(obj1); // this\u6307\u5411obj1
+obj.getName.call(); // this\u6307\u5411window
+obj.getName.call(obj1, "coboy1", "coboy2"); // \u4F20\u53C2
+

7. apply

  • function apply(thisArg, argsArray)\uFF1A\u53C2\u6570argsArray\u4E3A\u6570\u7EC4\u7C7B\u578B\u6216\u8005 arguments \u53C2\u6570\u96C6\u5408\u3002
\u4F8B\u5B50
js
Math.max.apply(Math, [1, 2, 3, 10]); // 10
+const obj = {
+  txt: "coboy",
+  age: 18,
+  getName: function () {
+    console.log(this, this.txt);
+  },
+};
+const obj1 = {
+  txt: "cobyte",
+};
+obj.getName.apply(obj1); // this\u6307\u5411obj1
+obj.getName.apply(); // this\u6307\u5411window
+obj.getName.apply(obj1, ["coboy1", "coboy2"]); // \u4F20\u53C2
+

8. bind

  • bind() \u65B9\u6CD5\u4E5F\u80FD\u4FEE\u6539 this \u6307\u5411\uFF0C\u4E0D\u8FC7\u8C03\u7528 bind() \u65B9\u6CD5\u4E0D\u4F1A\u6267\u884C getName()\u51FD\u6570\uFF0C\u4E5F\u4E0D\u4F1A\u6539\u53D8 getName() \u51FD\u6570\u672C\u8EAB\uFF0C\u53EA\u4F1A\u8FD4\u56DE\u4E00\u4E2A\u5DF2\u7ECF\u4FEE\u6539\u4E86 this \u6307\u5411\u7684\u65B0\u51FD\u6570\uFF0C\u8FD9\u4E2A\u65B0\u51FD\u6570\u53EF\u4EE5\u8D4B\u503C\u7ED9\u4E00\u4E2A\u53D8\u91CF\uFF0C\u8C03\u7528\u8FD9\u4E2A\u53D8\u91CF\u65B0\u51FD\u6570\u624D\u80FD\u6267\u884C getName()\u3002
Details
js
// 1. \u65E0\u53C2\u6570
+const obj = {
+  txt: "coboy",
+  age: 18,
+  getName: function () {
+    console.log(this.txt);
+  },
+};
+const obj2 = {
+  txt: "cobyte",
+};
+const newGetName = obj.getName.bind(obj2);
+newGetName(); // this\u6307\u5411obj2
+obj.getName(); // this\u4ECD\u7136\u6307\u5411obj
+
+// 2. \u6709\u53C2\u6570
+function fn(a, b, c) {
+  console.log(a, b, c);
+}
+const fn1 = fn.bind({ abc: 123 }, 600);
+fn(100, 200, 300); // 100,200,300
+fn1(100, 200, 300); // 600,100,200  // \u6539\u53D8 fn \u7684 this \u65F6\uFF0C\u4F20\u5165\u4E86\u4E00\u4E2A\u53C2\u6570\uFF0C\u4F1A\u5C06\u8FD9\u91CC\u7684\u53C2\u6570\u5408\u5E76\uFF0Cfn(a,b,c) \u53EA\u6709\u4E09\u4E2A\u53C2\u6570\uFF0C300 \u662F\u7B2C\u56DB\u4E2A\u53C2\u6570
+fn1(200, 300); // 600,200,300
+fn.call({ abc: 123 }, 600); // 600,undefined,undefined
+fn.call({ abc: 123 }, 600, 100, 200); // 600,100,200
+

9. this \u7684\u4F18\u5148\u7EA7

  • call\uFF0Capply\uFF0Cbind\u663E\u793A\u7ED1\u5B9A\u6BD4\u9690\u5F0F\u7ED1\u5B9A\u4F18\u5148\u7EA7\u9AD8
  • \u6784\u9020\u51FD\u6570\u7684(new)\u6BD4 bind\u4F18\u5148\u7EA7\u66F4\u9AD8
  • \u7BAD\u5934\u51FD\u6570\u65E0\u6CD5\u6539\u53D8this\u6307\u5411

10. Function.prototype.call

call() \u65B9\u6CD5\u4F7F\u7528\u4E00\u4E2A\u6307\u5B9A\u7684 this \u503C\u548C\u5355\u72EC\u7ED9\u51FA\u7684\u4E00\u4E2A\u6216\u591A\u4E2A\u53C2\u6570\u6765\u8C03\u7528\u4E00\u4E2A\u51FD\u6570\u3002

\u57FA\u672C\u601D\u60F3\u662F\u628A fn.call(obj,args)\u4E2D\u7684 fn \u8D4B\u503C\u4E3A obj \u7684\u5C5E\u6027\uFF0C\u7136\u540E\u8C03\u7528 obj.fn \u5373\u53EF\u5B9E\u73B0 fn \u4E2D this \u6307\u5411\u7684\u6539\u53D8\uFF0C\u8FD8\u662F\u90A3\u4E2A\u786E\u5B9A\u7684\u89C4\u5F8B \u201C\u8C01\u8C03\u7528\u5B83\uFF0Cthis \u5C31\u6307\u5411\u8C01\u201D

js
Function.prototype._call = function (ctx, ...args) {
+  // \u5224\u65AD\u4F20\u5165\u7684 ctx \u662F\u5426\u4E3A\u7A7A\uFF0C\u4E3A\u7A7A\u5C31\u6302\u5728 \u5168\u5C40window\u4E0A\uFF0C\u4E0D\u7136\u5C31\u521B\u5EFA\u4E00\u4E2A\u5BF9\u8C61
+  const o = ctx == undefined ? window : Object(ctx);
+  // \u7ED9 ctx \u5BF9\u8C61\u6DFB\u52A0\u72EC\u4E00\u65E0\u4E8C\u7684\u5C5E\u6027
+  const key = Symbol();
+  // \u7ED1\u5B9A this\uFF0C\u8C01\u8C03\u7528\uFF0C this \u5C31\u4E3A\u8C01\uFF0C\u8FD9\u91CC\u4E3A obj.fun,(\u8FD9\u91CC\u662F\u4E3A\u4E86\u5B9E\u73B0call\uFF0C\u6539\u53D8this\u6307\u5411\uFF0C\u5C31\u662F\u8BA9\u4F7F\u7528\u8FD9\u4E2A\u51FD\u6570\u7684this\uFF0C\u6307\u5411 ctx)
+  // \u8FD9\u91CC\u7684 o = { name: "22",Symbol: fun(...args) }
+  o[key] = this;
+  // \u6267\u884C\u51FD\u6570\uFF0C\u5F97\u5230\u8FD4\u56DE\u7ED3\u679C
+  const result = o[key](...args);
+  // \u5220\u9664\u8BE5\u5C5E\u6027
+  delete o[key];
+  return result;
+};
+
+const obj = {
+  name: "11",
+  fun(...args) {
+    console.log(this.name);
+  },
+};
+
+const obj2 = { name: "22" };
+obj.fun(); // 11
+obj.fun.call(obj2); // 22
+obj.fun._call(obj2, 1, 2); // 22 1 2
+

11. Function.prototype.apply

\u8DDFcall\u662F\u4E00\u6837\u7684\u601D\u60F3\uFF0C\u53EA\u4E0D\u8FC7\u4F20\u53C2\u662F\u6570\u7EC4\u7684\u5F62\u5F0F

js
Function.prototype.myApply = function (ctx) {
+  const context = ctx == undefined ? window : Object(ctx);
+  let key = Symbol();
+  context[key] = this;
+  let result;
+  if (arguments[1]) {
+    //\u5224\u65AD\u662F\u5426\u6709\u7B2C\u4E8C\u4E2A\u53C2\u6570
+    result = context[key](...arguments[1]); // \u8C03\u7528\u8BE5\u65B9\u6CD5\uFF0C\u8BE5\u65B9\u6CD5this\u6307\u5411context
+  } else {
+    result = context[key]; // \u8C03\u7528\u8BE5\u65B9\u6CD5\uFF0C\u8BE5\u65B9\u6CD5this\u6307\u5411context
+  }
+  delete context[key];
+  return result;
+};
+
+const r = Math.max.myApply(null, [12, 3]);
+const r1 = Math.max.apply(null, [12, 3]);
+console.log(r); // 12
+console.log(r1); //  12
+

12. Function.prototype.bind

  • \u7ED1\u5B9A\u65F6\u53EF\u4EE5\u4F20\u53C2\u6570\uFF0C\u4E4B\u540E\u6267\u884C\u7684\u65F6\u5019\u4F9D\u7136\u53EF\u4EE5\u4F20\u53C2\u6570\uFF0C\u5178\u578B\u7684\u95ED\u5305\u884C\u4E3A
  • bind() \u65B9\u6CD5\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684\u51FD\u6570\uFF0C\u5728 bind() \u88AB\u8C03\u7528\u65F6\uFF0C\u8FD9\u4E2A\u65B0\u51FD\u6570\u7684 this \u88AB\u6307\u5B9A\u4E3A bind() \u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF0C\u800C\u5176\u4F59\u53C2\u6570\u5C06\u4F5C\u4E3A\u65B0\u51FD\u6570\u7684\u53C2\u6570\uFF0C\u4F9B\u8C03\u7528\u65F6\u4F7F\u7528\u3002
js
const obj = {
+  name: "11",
+  fun() {
+    console.log(this.name);
+  },
+};
+Function.prototype._bind = function (ctx, ...args) {
+  // \u83B7\u53D6\u51FD\u6570\u4F53
+  const _self = this;
+  // \u7528\u4E00\u4E2A\u65B0\u51FD\u6570\u5305\u88F9\uFF0C\u907F\u514D\u7ACB\u5373\u6267\u884C
+  const bindFn = (...reset) => {
+    return _self.call(ctx, ...args, ...reset);
+  };
+  return bindFn;
+};
+const obj2 = { name: "22" };
+obj.fun(); // 11
+const fn = obj.fun.bind(obj2);
+const fn2 = obj.fun._bind(obj2);
+fn(); // 22
+fn2(); // 22
+

13. New \u5173\u952E\u5B57

new \u8FD0\u7B97\u7B26\u521B\u5EFA\u4E00\u4E2A\u7528\u6237\u5B9A\u4E49\u7684\u5BF9\u8C61\u7C7B\u578B\u7684\u5B9E\u4F8B\u6216\u5177\u6709\u6784\u9020\u51FD\u6570\u7684\u5185\u7F6E\u5BF9\u8C61\u7684\u5B9E\u4F8B\u3002

js
/*
+  create\u51FD\u6570\u8981\u63A5\u53D7\u4E0D\u5B9A\u91CF\u7684\u53C2\u6570\uFF0C\u7B2C\u4E00\u4E2A\u53C2\u6570\u662F\u6784\u9020\u51FD\u6570\uFF08\u4E5F\u5C31\u662Fnew\u64CD\u4F5C\u7B26\u7684\u76EE\u6807\u51FD\u6570\uFF09\uFF0C\u5176\u4F59\u53C2\u6570\u88AB\u6784\u9020\u51FD\u6570\u4F7F\u7528\u3002
+  new Create() \u662F\u4E00\u79CDjs\u8BED\u6CD5\u7CD6\u3002\u6211\u4EEC\u53EF\u4EE5\u7528\u51FD\u6570\u8C03\u7528\u7684\u65B9\u5F0F\u6A21\u62DF\u5B9E\u73B0
+*/
+function create(Fn, ...args) {
+  // 1\u3001\u521B\u5EFA\u4E00\u4E2A\u7A7A\u7684\u5BF9\u8C61
+  let obj = {}; // let obj = Object.create({});
+  // 2\u3001\u5C06\u7A7A\u5BF9\u8C61\u7684\u9690\u5F0F\u539F\u578B __proto__ \u6307\u5411\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61 prototype
+  Object.setPrototypeOf(obj, Fn.prototype); // obj.__proto__ = Fn.prototype
+  // \u4EE5\u4E0A 1\u30012\u6B65\u8FD8\u53EF\u4EE5\u901A\u8FC7 const obj = Object.create(Fn.prototype) \u5B9E\u73B0
+  // 3\u3001\u6539\u53D8\u6784\u9020\u51FD\u6570\u7684\u4E0A\u4E0B\u6587\uFF08this\uFF09,\u5E76\u5C06\u53C2\u6570\u4F20\u5165
+  let result = Fn.apply(obj, args);
+  // 4\u3001\u5982\u679C\u6784\u9020\u51FD\u6570\u6267\u884C\u540E\uFF0C\u8FD4\u56DE\u7684\u7ED3\u679C\u662F\u5BF9\u8C61\u7C7B\u578B\uFF0C\u5219\u76F4\u63A5\u5C06\u8BE5\u7ED3\u679C\u8FD4\u56DE\uFF0C\u5426\u5219\u8FD4\u56DE obj \u5BF9\u8C61
+  return result instanceof Object ? result : obj;
+  // return typeof result === 'object' && result != null ? result : obj
+}
+
`,38),e=[o];function t(c,r,y,F,D,A){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_js_this.md.ec485cc5.lean.js b/assets/pages_base_js_this.md.ec485cc5.lean.js new file mode 100644 index 0000000..a5db72c --- /dev/null +++ b/assets/pages_base_js_this.md.ec485cc5.lean.js @@ -0,0 +1 @@ +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"this\u7684\u6307\u5411\u95EE\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u666E\u901A\u51FD\u6570\u7684 this","slug":"_1-\u666E\u901A\u51FD\u6570\u7684-this","link":"#_1-\u666E\u901A\u51FD\u6570\u7684-this","children":[]},{"level":2,"title":"2. \u7BAD\u5934\u51FD\u6570\u7684 this","slug":"_2-\u7BAD\u5934\u51FD\u6570\u7684-this","link":"#_2-\u7BAD\u5934\u51FD\u6570\u7684-this","children":[]},{"level":2,"title":"3. \u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this","slug":"_3-\u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this","link":"#_3-\u51FD\u6570\u4F5C\u4E3A\u5BF9\u8C61\u5185\u7684\u65B9\u6CD5\u65F6\u7684this","children":[]},{"level":2,"title":"4. \u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684 this","slug":"_4-\u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684-this","link":"#_4-\u4E0A\u4E0B\u6587\u5BF9\u8C61\u8C03\u7528\u4E2D\u7684-this","children":[]},{"level":2,"title":"5. \u6784\u9020\u51FD\u6570\u4E2D\u7684 this \uFF08\u901A\u8FC7 new\uFF09","slug":"_5-\u6784\u9020\u51FD\u6570\u4E2D\u7684-this-\u901A\u8FC7-new","link":"#_5-\u6784\u9020\u51FD\u6570\u4E2D\u7684-this-\u901A\u8FC7-new","children":[]},{"level":2,"title":"6. call","slug":"_6-call","link":"#_6-call","children":[]},{"level":2,"title":"7. apply","slug":"_7-apply","link":"#_7-apply","children":[]},{"level":2,"title":"8. bind","slug":"_8-bind","link":"#_8-bind","children":[]},{"level":2,"title":"9. this \u7684\u4F18\u5148\u7EA7","slug":"_9-this-\u7684\u4F18\u5148\u7EA7","link":"#_9-this-\u7684\u4F18\u5148\u7EA7","children":[]},{"level":2,"title":"10. Function.prototype.call","slug":"_10-function-prototype-call","link":"#_10-function-prototype-call","children":[]},{"level":2,"title":"11. Function.prototype.apply","slug":"_11-function-prototype-apply","link":"#_11-function-prototype-apply","children":[]},{"level":2,"title":"12. Function.prototype.bind","slug":"_12-function-prototype-bind","link":"#_12-function-prototype-bind","children":[]},{"level":2,"title":"13. New \u5173\u952E\u5B57","slug":"_13-new-\u5173\u952E\u5B57","link":"#_13-new-\u5173\u952E\u5B57","children":[]}],"relativePath":"pages/base/js/this.md"}'),p={name:"pages/base/js/this.md"},o=l("",38),e=[o];function t(c,r,y,F,D,A){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default}; diff --git a/assets/pages_base_leetcode_index.md.9731c2ad.js b/assets/pages_base_leetcode_index.md.0ae9a5a0.js similarity index 99% rename from assets/pages_base_leetcode_index.md.9731c2ad.js rename to assets/pages_base_leetcode_index.md.0ae9a5a0.js index ce64576..9afc020 100644 --- a/assets/pages_base_leetcode_index.md.9731c2ad.js +++ b/assets/pages_base_leetcode_index.md.0ae9a5a0.js @@ -1,4 +1,4 @@ -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u7B97\u6CD5\u7B14\u8BB0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20\uFF1A","slug":"_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","link":"#_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","children":[]},{"level":2,"title":"2. \u8D2A\u5FC3\u7B97\u6CD5","slug":"_2-\u8D2A\u5FC3\u7B97\u6CD5","link":"#_2-\u8D2A\u5FC3\u7B97\u6CD5","children":[]},{"level":2,"title":"3. \u4E8C\u5206\u67E5\u627E","slug":"_3-\u4E8C\u5206\u67E5\u627E","link":"#_3-\u4E8C\u5206\u67E5\u627E","children":[]},{"level":2,"title":"4. \u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57\uFF0C\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","slug":"_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","link":"#_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","children":[]},{"level":2,"title":"5. \u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","slug":"_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","link":"#_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","children":[]},{"level":2,"title":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","slug":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","link":"#\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","children":[]}],"relativePath":"pages/base/leetcode/index.md"}'),p={name:"pages/base/leetcode/index.md"},o=l(`

\u7B97\u6CD5\u7B14\u8BB0

\u4F7F\u7528\u9012\u5F52\u7B97\u6CD5\u7F16\u5199\u7684\u4EE3\u7801\u867D\u7136\u7B80\u6D01\uFF0C\u4F46\u7531\u4E8E\u6BCF\u9012\u5F52\u4E00\u6B21\u5C31\u4EA7\u751F\u4E00\u6B21\u51FD\u6570\u8C03\u7528\uFF0C\u5728\u9700\u8981\u4F18\u5148\u8003\u8651\u6027\u80FD\u65F6\uFF0C\u9700\u8981\u628A\u9012\u5F52\u7B97\u6CD5\u8F6C\u6362\u4E3A\u5FAA\u73AF\u7B97\u6CD5\uFF0C\u4EE5\u51CF\u5C11\u51FD\u6570\u8C03\u7528\u6B21\u6570

1. \u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20\uFF1A

  1. \u91CD\u53E0\u5B50\u95EE\u9898
  2. \u6700\u4F18\u5B50\u7ED3\u6784
  3. \u72B6\u6001\u8F6C\u79FB\u65B9\u7A0B
\u6590\u6CE2\u90A3\u5951\u6570\u5217(\u53F0\u9636\u95EE\u9898)\u6C42\u89E3
js
// 1. \u9012\u5F52\u6C42\u89E3 \u81EA\u9876\u5411\u4E0B
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u7B97\u6CD5\u7B14\u8BB0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20\uFF1A","slug":"_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","link":"#_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","children":[]},{"level":2,"title":"2. \u8D2A\u5FC3\u7B97\u6CD5","slug":"_2-\u8D2A\u5FC3\u7B97\u6CD5","link":"#_2-\u8D2A\u5FC3\u7B97\u6CD5","children":[]},{"level":2,"title":"3. \u4E8C\u5206\u67E5\u627E","slug":"_3-\u4E8C\u5206\u67E5\u627E","link":"#_3-\u4E8C\u5206\u67E5\u627E","children":[]},{"level":2,"title":"4. \u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57\uFF0C\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","slug":"_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","link":"#_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","children":[]},{"level":2,"title":"5. \u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","slug":"_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","link":"#_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","children":[]},{"level":2,"title":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","slug":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","link":"#\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","children":[]}],"relativePath":"pages/base/leetcode/index.md"}'),p={name:"pages/base/leetcode/index.md"},o=l(`

\u7B97\u6CD5\u7B14\u8BB0

\u4F7F\u7528\u9012\u5F52\u7B97\u6CD5\u7F16\u5199\u7684\u4EE3\u7801\u867D\u7136\u7B80\u6D01\uFF0C\u4F46\u7531\u4E8E\u6BCF\u9012\u5F52\u4E00\u6B21\u5C31\u4EA7\u751F\u4E00\u6B21\u51FD\u6570\u8C03\u7528\uFF0C\u5728\u9700\u8981\u4F18\u5148\u8003\u8651\u6027\u80FD\u65F6\uFF0C\u9700\u8981\u628A\u9012\u5F52\u7B97\u6CD5\u8F6C\u6362\u4E3A\u5FAA\u73AF\u7B97\u6CD5\uFF0C\u4EE5\u51CF\u5C11\u51FD\u6570\u8C03\u7528\u6B21\u6570

1. \u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20\uFF1A

  1. \u91CD\u53E0\u5B50\u95EE\u9898
  2. \u6700\u4F18\u5B50\u7ED3\u6784
  3. \u72B6\u6001\u8F6C\u79FB\u65B9\u7A0B
\u6590\u6CE2\u90A3\u5951\u6570\u5217(\u53F0\u9636\u95EE\u9898)\u6C42\u89E3
js
// 1. \u9012\u5F52\u6C42\u89E3 \u81EA\u9876\u5411\u4E0B
 // \u65F6\u95F4\u590D\u6742\u5EA6\uFF1A O(2^n) ======> \u5B50\u95EE\u9898\u4E2A\u6570\u5373\u9012\u5F52\u6811\u4E2D\u7684\u8282\u70B9\u603B\u6570 2^n,\u89E3\u51B3\u4E00\u4E2A\u5B50\u95EE\u9898\u9700\u8981\u7684\u65F6\u95F4\uFF0C\u56E0\u4E3A\u53EA\u6709\u4E00\u4E2A\u52A0\u6CD5\u64CD\u4F5C recursion(n-1) + recursion(n-2) \uFF0C\u6240\u4EE5\u89E3\u51B3\u4E00\u4E2A\u5B50\u95EE\u9898\u7684\u65F6\u95F4\u4E3A O(1),\u4E8C\u8005\u76F8\u4E58 \u4E3A O(2^n)
 
 // \u7A7A\u95F4\u590D\u6742\u5EA6\uFF1A O(n)
diff --git a/assets/pages_base_leetcode_index.md.9731c2ad.lean.js b/assets/pages_base_leetcode_index.md.0ae9a5a0.lean.js
similarity index 96%
rename from assets/pages_base_leetcode_index.md.9731c2ad.lean.js
rename to assets/pages_base_leetcode_index.md.0ae9a5a0.lean.js
index 645d37d..de241f6 100644
--- a/assets/pages_base_leetcode_index.md.9731c2ad.lean.js
+++ b/assets/pages_base_leetcode_index.md.0ae9a5a0.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u7B97\u6CD5\u7B14\u8BB0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20\uFF1A","slug":"_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","link":"#_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","children":[]},{"level":2,"title":"2. \u8D2A\u5FC3\u7B97\u6CD5","slug":"_2-\u8D2A\u5FC3\u7B97\u6CD5","link":"#_2-\u8D2A\u5FC3\u7B97\u6CD5","children":[]},{"level":2,"title":"3. \u4E8C\u5206\u67E5\u627E","slug":"_3-\u4E8C\u5206\u67E5\u627E","link":"#_3-\u4E8C\u5206\u67E5\u627E","children":[]},{"level":2,"title":"4. \u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57\uFF0C\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","slug":"_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","link":"#_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","children":[]},{"level":2,"title":"5. \u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","slug":"_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","link":"#_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","children":[]},{"level":2,"title":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","slug":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","link":"#\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","children":[]}],"relativePath":"pages/base/leetcode/index.md"}'),p={name:"pages/base/leetcode/index.md"},o=l("",18),e=[o];function c(t,r,F,y,D,C){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u7B97\u6CD5\u7B14\u8BB0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20\uFF1A","slug":"_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","link":"#_1-\u52A8\u6001\u89C4\u5212\u4E09\u8981\u7D20","children":[]},{"level":2,"title":"2. \u8D2A\u5FC3\u7B97\u6CD5","slug":"_2-\u8D2A\u5FC3\u7B97\u6CD5","link":"#_2-\u8D2A\u5FC3\u7B97\u6CD5","children":[]},{"level":2,"title":"3. \u4E8C\u5206\u67E5\u627E","slug":"_3-\u4E8C\u5206\u67E5\u627E","link":"#_3-\u4E8C\u5206\u67E5\u627E","children":[]},{"level":2,"title":"4. \u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57\uFF0C\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","slug":"_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","link":"#_4-\u8F93\u51FA\u6570\u7EC4\u4E2D\u5360\u6BD4\u8D85\u8FC7\u4E00\u534A\u7684\u5355\u4E2A\u6570\u5B57-\u5982\u679C\u6CA1\u6709\u5C31\u8F93\u51FA-1","children":[]},{"level":2,"title":"5. \u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","slug":"_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","link":"#_5-\u5408\u5E76\u4E24\u4E2A\u6709\u5E8F\u6570\u7EC4","children":[]},{"level":2,"title":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","slug":"\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","link":"#\u5B57\u7B26\u4E32\u7684\u76F8\u52A0","children":[]}],"relativePath":"pages/base/leetcode/index.md"}'),p={name:"pages/base/leetcode/index.md"},o=l("",18),e=[o];function c(t,r,F,y,D,C){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default};
diff --git a/assets/pages_base_uploadFile.md.8dfa3e49.js b/assets/pages_base_uploadFile.md.a0df13d9.js
similarity index 99%
rename from assets/pages_base_uploadFile.md.8dfa3e49.js
rename to assets/pages_base_uploadFile.md.a0df13d9.js
index b73444c..7d700ca 100644
--- a/assets/pages_base_uploadFile.md.8dfa3e49.js
+++ b/assets/pages_base_uploadFile.md.a0df13d9.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u539F\u751F\u6587\u4EF6\u4E0A\u4F20\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"css","slug":"css","link":"#css","children":[]},{"level":2,"title":"js","slug":"js","link":"#js","children":[]}],"relativePath":"pages/base/uploadFile.md"}'),p={name:"pages/base/uploadFile.md"},o=l(`

\u539F\u751F\u6587\u4EF6\u4E0A\u4F20\u76F8\u5173

html

input \u5C5E\u6027

multiple\uFF1A\u591A\u9009\u6587\u4EF6

webkitdirectory\uFF1A\u9009\u62E9\u6587\u4EF6\u5939

html \u6587\u4EF6
html
<!DOCTYPE html>
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u539F\u751F\u6587\u4EF6\u4E0A\u4F20\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"css","slug":"css","link":"#css","children":[]},{"level":2,"title":"js","slug":"js","link":"#js","children":[]}],"relativePath":"pages/base/uploadFile.md"}'),p={name:"pages/base/uploadFile.md"},o=l(`

\u539F\u751F\u6587\u4EF6\u4E0A\u4F20\u76F8\u5173

html

input \u5C5E\u6027

multiple\uFF1A\u591A\u9009\u6587\u4EF6

webkitdirectory\uFF1A\u9009\u62E9\u6587\u4EF6\u5939

html \u6587\u4EF6
html
<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/assets/pages_base_uploadFile.md.8dfa3e49.lean.js b/assets/pages_base_uploadFile.md.a0df13d9.lean.js
similarity index 89%
rename from assets/pages_base_uploadFile.md.8dfa3e49.lean.js
rename to assets/pages_base_uploadFile.md.a0df13d9.lean.js
index b7ffa72..ae52b8f 100644
--- a/assets/pages_base_uploadFile.md.8dfa3e49.lean.js
+++ b/assets/pages_base_uploadFile.md.a0df13d9.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u539F\u751F\u6587\u4EF6\u4E0A\u4F20\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"css","slug":"css","link":"#css","children":[]},{"level":2,"title":"js","slug":"js","link":"#js","children":[]}],"relativePath":"pages/base/uploadFile.md"}'),p={name:"pages/base/uploadFile.md"},o=l("",10),e=[o];function c(t,r,D,F,y,C){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u539F\u751F\u6587\u4EF6\u4E0A\u4F20\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"css","slug":"css","link":"#css","children":[]},{"level":2,"title":"js","slug":"js","link":"#js","children":[]}],"relativePath":"pages/base/uploadFile.md"}'),p={name:"pages/base/uploadFile.md"},o=l("",10),e=[o];function c(t,r,D,F,y,C){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};
diff --git a/assets/pages_canvas_demo.md.4a6d673f.js b/assets/pages_canvas_demo.md.b7bf901c.js
similarity index 98%
rename from assets/pages_canvas_demo.md.4a6d673f.js
rename to assets/pages_canvas_demo.md.b7bf901c.js
index 12af65f..1079352 100644
--- a/assets/pages_canvas_demo.md.4a6d673f.js
+++ b/assets/pages_canvas_demo.md.b7bf901c.js
@@ -1 +1 @@
-import{_ as D,j as S,o as x,c as b,p as k,d as $,b as s,e as y,t as T,F as B,k as q,u as V,g as C,i as w,a as F}from"./app.cac277bf.js";const P=c=>(k("data-v-1661bc13"),c=c(),$(),c),R={style:{width:"600px"}},L=P(()=>s("canvas",{id:"canvas-dom",width:"600",height:"300"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ",-1)),H=[L],N={__name:"smallBalls",setup(c){return S(()=>{const o=document.getElementById("canvas-dom");if(o.width=600,o.getContext){let d=function(){t.fillStyle="rgba(255, 255, 255, 0.3)",t.fillRect(0,0,o.width,o.height),e.draw(),e.vy*=.99,e.vy+=.15,e.x+=e.vx,e.y+=e.vy,(e.x+e.vx>o.width||e.x+e.vx<0)&&(e.vx=-e.vx),(e.y+e.vy>o.height||e.y+e.vy<0)&&(e.vy=-e.vy,e.y+e.vy>310&&(e.y=50)),window.requestAnimationFrame(d)};const t=o.getContext("2d");let e={x:50,y:50,vx:1,vy:3,radius:10,color:"blue",draw:function(){t.beginPath(),t.arc(this.x,this.y,this.radius,0,Math.PI*2,!1),t.closePath(),t.fillStyle=this.color,t.fill()}};window.requestAnimationFrame(d),e.draw()}}),(o,t)=>(x(),b("div",R,H))}},X=D(N,[["__scopeId","data-v-1661bc13"]]);const Y=c=>(k("data-v-fc085a83"),c=c(),$(),c),M=Y(()=>s("canvas",{id:"themeCanvas",width:"600",height:"300"},null,-1)),W={__name:"themeChange",setup(c){const o="https://img2.baidu.com/it/u=4044887937,3129736188&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=392";let t=null,e=null,d=null;const i=y(""),m=y("");S(()=>{e=document.getElementById("themeCanvas"),t=e.getContext("2d",{willReadFrequently:!0}),d=new Image,d.crossOrigin="Anonymous",d.src=o,d.onload=()=>{t.drawImage(d,0,0,600,300),d.style.display="none"},e.addEventListener("mousemove",function(a){l("move",a)}),e.addEventListener("click",a=>{l("click",a)});function l(a,n){const g=n.offsetX,p=n.offsetY,_=t.getImageData(g,p,1,1).data,v=`rgba(${_[0]}, ${_[1]}, ${_[2]}, ${_[3]/255})`;if(a=="move")i.value=v;else{m.value=v;const A=t.getImageData(0,0,e.width,e.height),I=A.data;for(let f=0;f<=I.length;f+=4)I[f]=_[0],I[f+1]=_[1],I[f+2]=_[2];t.putImageData(A,0,0)}return v}});const u=()=>{t.drawImage(d,0,0,600,300)},r=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4){const g=(a[n]+a[n+1]+a[n+2])/3;a[n]=g,a[n+1]=g,a[n+2]=g}t.putImageData(l,0,0)},h=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4)a[n]=255-a[n],a[n+1]=255-a[n+1],a[n+2]=255-a[n+2];t.putImageData(l,0,0)};return(l,a)=>(x(),b(B,null,[M,s("div",null,"\u5212\u8FC7\u7684\u989C\u8272\u4E3A\uFF1A"+T(i.value),1),s("div",null,"\u9009\u4E2D\u7684\u989C\u8272\uFF1A "+T(m.value),1),s("button",{onClick:u},"\u8FD8\u539F"),s("button",{onClick:r},"\u9ED1\u767D"),s("button",{onClick:h},"\u66DD\u5149")],64))}},O=D(W,[["__scopeId","data-v-fc085a83"]]);const j=c=>(k("data-v-d42abf30"),c=c(),$(),c),z=j(()=>s("canvas",{id:"signatureCanvas",width:"600",height:"300"},null,-1)),J={__name:"Signature",setup(c){let o=null,t=null;S(()=>{t=document.getElementById("signatureCanvas"),o=t.getContext("2d"),t.addEventListener("mouseenter",()=>{t.addEventListener("mousedown",i=>{o.beginPath(),o.moveTo(i.offsetX,i.offsetY),t.addEventListener("mousemove",d)}),t.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",d)})});const d=i=>{o.lineTo(i.offsetX,i.offsetY),o.stroke()}});const e=()=>{o.clearRect(0,0,t.width,t.height)};return(d,i)=>(x(),b(B,null,[z,s("button",{onClick:e},"\u6E05\u7A7A\u753B\u5E03")],64))}},U=D(J,[["__scopeId","data-v-d42abf30"]]),G="/ybhdsg-zhs/assets/\u672C\u8349\u7EB2\u76EE.3e97399a.mp3";const K=c=>(k("data-v-22a1e8fb"),c=c(),$(),c),Q=K(()=>s("canvas",null,null,-1)),Z=["src"],ee={__name:"audioVisualisation",setup(c){const o=y(null);let t=y([]),e=y(!1),d;return S(()=>{const i=document.querySelector("audio"),m=document.querySelector("canvas"),u=m.getContext("2d");i.onplay=function(){if(e.value)return;const r=new AudioContext,h=r.createMediaElementSource(i);o.value=r.createAnalyser(),o.value.fftSize=512,t.value=new Uint8Array(o.value.frequencyBinCount),h.connect(o.value),o.value.connect(r.destination),e.value=!0},d=()=>{requestAnimationFrame(d);const{width:r,height:h}=m;if(u.clearRect(0,0,r,h),!e.value)return;o.value.getByteFrequencyData(t.value);const l=t.value.length/2,a=r/l/2;console.log(l),u.fillStyle="#e0f9b5";for(let n=0;n{window.requestAnimationFrame(d)}),(i,m)=>(x(),b("div",null,[Q,s("audio",{src:V(G),controls:""},null,8,Z)]))}},te=D(ee,[["__scopeId","data-v-22a1e8fb"]]),ae=s("h1",{id:"canvas-\u7684\u5C0F-demo",tabindex:"-1"},[w("canvas \u7684\u5C0F demo "),s("a",{class:"header-anchor",href:"#canvas-\u7684\u5C0F-demo","aria-hidden":"true"},"#")],-1),ne=s("h2",{id:"_1-\u97F3\u9891\u53EF\u89C6\u5316",tabindex:"-1"},[w("1. \u97F3\u9891\u53EF\u89C6\u5316 "),s("a",{class:"header-anchor",href:"#_1-\u97F3\u9891\u53EF\u89C6\u5316","aria-hidden":"true"},"#")],-1),oe=s("h2",{id:"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8",tabindex:"-1"},[w("2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8 "),s("a",{class:"header-anchor",href:"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","aria-hidden":"true"},"#")],-1),se=s("h2",{id:"_3-\u70DF\u82B1",tabindex:"-1"},[w("3. \u70DF\u82B1 "),s("a",{class:"header-anchor",href:"#_3-\u70DF\u82B1","aria-hidden":"true"},"#")],-1),ce=s("h2",{id:"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668",tabindex:"-1"},[w("4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668 "),s("a",{class:"header-anchor",href:"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","aria-hidden":"true"},"#")],-1),de=F('

getImageData()

getImageData()\u65B9\u6CD5\u53EF\u4EE5\u8FD4\u56DE\u4E00\u4E2AImageData\u5BF9\u8C61\u3002

ImageData\u5BF9\u8C61\u7528\u6765\u63CF\u8FF0canvas\u533A\u57DF\u9690\u542B\u7684\u50CF\u7D20\u6570\u636E\uFF0C\u6B64\u533A\u57DF\u901A\u8FC7\u77E9\u5F62\u8868\u793A\uFF0C\u8D77\u59CB\u70B9\u4E3A(sx, sy)\u3001\u5BBD\u4E3A sw\u3001\u9AD8\u4E3A sh

\u8BED\u6CD5\uFF1AgetImageData(sx, sy, sw, sh)

\u53C2\u6570\uFF1Ax

sx\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u5DE6\u4E0A\u89D2 x \u5750\u6807;

sy\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u5DE6\u4E0A\u89D2 y \u5750\u6807;

sw\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u5BBD\u5EA6;

sh\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u9AD8\u5EA6;

\u{1F389} \uFF1AgetImageData(x,y,1,1)\uFF1A\u83B7\u53D6\u8DDD\u79BB x \u548C y \u4F4D\u7F6E\u7684 1 \u50CF\u7D20\u70B9\u7684\u989C\u8272

putImageData()

putImageData()\uFF1A\u53EF\u4EE5\u5C06\u6570\u636E\u4ECE\u5DF2\u6709\u7684ImageData\u5BF9\u8C61\u7ED8\u5236\u4E3A\u4F4D\u56FE

\u8BED\u6CD5\uFF1A putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

\u53C2\u6570\uFF1A

ImageData\uFF1A\u5305\u542B\u50CF\u7D20\u503C\u7684\u6570\u7EC4\u5BF9\u8C61\u3002 dx\uFF1A\u6E90\u56FE\u50CF\u6570\u636E\u5728\u76EE\u6807\u753B\u5E03\u4E2D x \u8F74\u65B9\u5411\u7684\u504F\u79FB\u91CF\u3002 dy\uFF1A\u6E90\u56FE\u50CF\u6570\u636E\u5728\u76EE\u6807\u753B\u5E03\u4E2D y \u8F74\u65B9\u5411\u7684\u504F\u79FB\u91CF\u3002 dirtyX\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u5DE6\u4E0A\u89D2\u7684\u4F4D\u7F6E\u3002\u9ED8\u8BA4\u662F\u6574\u4E2A\u56FE\u50CF\u6570\u636E\u7684\u5DE6\u4E0A\u89D2\uFF08x \u5750\u6807\uFF09\u3002 dirtyY\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u5DE6\u4E0A\u89D2\u7684\u4F4D\u7F6E\u3002\u9ED8\u8BA4\u662F\u6574\u4E2A\u56FE\u50CF\u6570\u636E\u7684\u5DE6\u4E0A\u89D2\uFF08y \u5750\u6807\uFF09\u3002 dirtyWidth\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u7684\u5BBD\u5EA6\u3002\u9ED8\u8BA4\u662F\u56FE\u50CF\u6570\u636E\u7684\u5BBD\u5EA6\u3002 dirtyHeight\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u7684\u9AD8\u5EA6\u3002\u9ED8\u8BA4\u662F\u56FE\u50CF\u6570\u636E\u7684\u9AD8\u5EA6\u3002

5. \u7B7E\u540D

',3),re=JSON.parse('{"title":"canvas \u7684\u5C0F demo","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u97F3\u9891\u53EF\u89C6\u5316","slug":"_1-\u97F3\u9891\u53EF\u89C6\u5316","link":"#_1-\u97F3\u9891\u53EF\u89C6\u5316","children":[]},{"level":2,"title":"2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","slug":"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","link":"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","children":[]},{"level":2,"title":"3. \u70DF\u82B1","slug":"_3-\u70DF\u82B1","link":"#_3-\u70DF\u82B1","children":[]},{"level":2,"title":"4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668","slug":"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","link":"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","children":[]},{"level":2,"title":"5. \u7B7E\u540D","slug":"_5-\u7B7E\u540D","link":"#_5-\u7B7E\u540D","children":[]}],"relativePath":"pages/canvas/demo.md"}'),ie={name:"pages/canvas/demo.md"},_e=Object.assign(ie,{setup(c){return(o,t)=>(x(),b("div",null,[ae,ne,C(te),oe,C(X),se,ce,C(O),de,C(U)]))}});export{re as __pageData,_e as default}; +import{_ as D,h as S,o as x,c as b,p as k,d as $,b as s,e as y,t as T,F as B,i as q,u as V,g as C,j as w,a as F}from"./app.88185e12.js";const P=c=>(k("data-v-1661bc13"),c=c(),$(),c),R={style:{width:"600px"}},L=P(()=>s("canvas",{id:"canvas-dom",width:"600",height:"300"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ",-1)),H=[L],N={__name:"smallBalls",setup(c){return S(()=>{const o=document.getElementById("canvas-dom");if(o.width=600,o.getContext){let d=function(){t.fillStyle="rgba(255, 255, 255, 0.3)",t.fillRect(0,0,o.width,o.height),e.draw(),e.vy*=.99,e.vy+=.15,e.x+=e.vx,e.y+=e.vy,(e.x+e.vx>o.width||e.x+e.vx<0)&&(e.vx=-e.vx),(e.y+e.vy>o.height||e.y+e.vy<0)&&(e.vy=-e.vy,e.y+e.vy>310&&(e.y=50)),window.requestAnimationFrame(d)};const t=o.getContext("2d");let e={x:50,y:50,vx:1,vy:3,radius:10,color:"blue",draw:function(){t.beginPath(),t.arc(this.x,this.y,this.radius,0,Math.PI*2,!1),t.closePath(),t.fillStyle=this.color,t.fill()}};window.requestAnimationFrame(d),e.draw()}}),(o,t)=>(x(),b("div",R,H))}},X=D(N,[["__scopeId","data-v-1661bc13"]]);const Y=c=>(k("data-v-fc085a83"),c=c(),$(),c),M=Y(()=>s("canvas",{id:"themeCanvas",width:"600",height:"300"},null,-1)),W={__name:"themeChange",setup(c){const o="https://img2.baidu.com/it/u=4044887937,3129736188&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=392";let t=null,e=null,d=null;const i=y(""),m=y("");S(()=>{e=document.getElementById("themeCanvas"),t=e.getContext("2d",{willReadFrequently:!0}),d=new Image,d.crossOrigin="Anonymous",d.src=o,d.onload=()=>{t.drawImage(d,0,0,600,300),d.style.display="none"},e.addEventListener("mousemove",function(a){l("move",a)}),e.addEventListener("click",a=>{l("click",a)});function l(a,n){const g=n.offsetX,p=n.offsetY,_=t.getImageData(g,p,1,1).data,v=`rgba(${_[0]}, ${_[1]}, ${_[2]}, ${_[3]/255})`;if(a=="move")i.value=v;else{m.value=v;const A=t.getImageData(0,0,e.width,e.height),I=A.data;for(let f=0;f<=I.length;f+=4)I[f]=_[0],I[f+1]=_[1],I[f+2]=_[2];t.putImageData(A,0,0)}return v}});const u=()=>{t.drawImage(d,0,0,600,300)},r=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4){const g=(a[n]+a[n+1]+a[n+2])/3;a[n]=g,a[n+1]=g,a[n+2]=g}t.putImageData(l,0,0)},h=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4)a[n]=255-a[n],a[n+1]=255-a[n+1],a[n+2]=255-a[n+2];t.putImageData(l,0,0)};return(l,a)=>(x(),b(B,null,[M,s("div",null,"\u5212\u8FC7\u7684\u989C\u8272\u4E3A\uFF1A"+T(i.value),1),s("div",null,"\u9009\u4E2D\u7684\u989C\u8272\uFF1A "+T(m.value),1),s("button",{onClick:u},"\u8FD8\u539F"),s("button",{onClick:r},"\u9ED1\u767D"),s("button",{onClick:h},"\u66DD\u5149")],64))}},O=D(W,[["__scopeId","data-v-fc085a83"]]);const j=c=>(k("data-v-d42abf30"),c=c(),$(),c),z=j(()=>s("canvas",{id:"signatureCanvas",width:"600",height:"300"},null,-1)),J={__name:"Signature",setup(c){let o=null,t=null;S(()=>{t=document.getElementById("signatureCanvas"),o=t.getContext("2d"),t.addEventListener("mouseenter",()=>{t.addEventListener("mousedown",i=>{o.beginPath(),o.moveTo(i.offsetX,i.offsetY),t.addEventListener("mousemove",d)}),t.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",d)})});const d=i=>{o.lineTo(i.offsetX,i.offsetY),o.stroke()}});const e=()=>{o.clearRect(0,0,t.width,t.height)};return(d,i)=>(x(),b(B,null,[z,s("button",{onClick:e},"\u6E05\u7A7A\u753B\u5E03")],64))}},U=D(J,[["__scopeId","data-v-d42abf30"]]),G="/ybhdsg-zhs/assets/\u672C\u8349\u7EB2\u76EE.3e97399a.mp3";const K=c=>(k("data-v-22a1e8fb"),c=c(),$(),c),Q=K(()=>s("canvas",null,null,-1)),Z=["src"],ee={__name:"audioVisualisation",setup(c){const o=y(null);let t=y([]),e=y(!1),d;return S(()=>{const i=document.querySelector("audio"),m=document.querySelector("canvas"),u=m.getContext("2d");i.onplay=function(){if(e.value)return;const r=new AudioContext,h=r.createMediaElementSource(i);o.value=r.createAnalyser(),o.value.fftSize=512,t.value=new Uint8Array(o.value.frequencyBinCount),h.connect(o.value),o.value.connect(r.destination),e.value=!0},d=()=>{requestAnimationFrame(d);const{width:r,height:h}=m;if(u.clearRect(0,0,r,h),!e.value)return;o.value.getByteFrequencyData(t.value);const l=t.value.length/2,a=r/l/2;console.log(l),u.fillStyle="#e0f9b5";for(let n=0;n{window.requestAnimationFrame(d)}),(i,m)=>(x(),b("div",null,[Q,s("audio",{src:V(G),controls:""},null,8,Z)]))}},te=D(ee,[["__scopeId","data-v-22a1e8fb"]]),ae=s("h1",{id:"canvas-\u7684\u5C0F-demo",tabindex:"-1"},[w("canvas \u7684\u5C0F demo "),s("a",{class:"header-anchor",href:"#canvas-\u7684\u5C0F-demo","aria-hidden":"true"},"#")],-1),ne=s("h2",{id:"_1-\u97F3\u9891\u53EF\u89C6\u5316",tabindex:"-1"},[w("1. \u97F3\u9891\u53EF\u89C6\u5316 "),s("a",{class:"header-anchor",href:"#_1-\u97F3\u9891\u53EF\u89C6\u5316","aria-hidden":"true"},"#")],-1),oe=s("h2",{id:"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8",tabindex:"-1"},[w("2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8 "),s("a",{class:"header-anchor",href:"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","aria-hidden":"true"},"#")],-1),se=s("h2",{id:"_3-\u70DF\u82B1",tabindex:"-1"},[w("3. \u70DF\u82B1 "),s("a",{class:"header-anchor",href:"#_3-\u70DF\u82B1","aria-hidden":"true"},"#")],-1),ce=s("h2",{id:"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668",tabindex:"-1"},[w("4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668 "),s("a",{class:"header-anchor",href:"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","aria-hidden":"true"},"#")],-1),de=F('

getImageData()

getImageData()\u65B9\u6CD5\u53EF\u4EE5\u8FD4\u56DE\u4E00\u4E2AImageData\u5BF9\u8C61\u3002

ImageData\u5BF9\u8C61\u7528\u6765\u63CF\u8FF0canvas\u533A\u57DF\u9690\u542B\u7684\u50CF\u7D20\u6570\u636E\uFF0C\u6B64\u533A\u57DF\u901A\u8FC7\u77E9\u5F62\u8868\u793A\uFF0C\u8D77\u59CB\u70B9\u4E3A(sx, sy)\u3001\u5BBD\u4E3A sw\u3001\u9AD8\u4E3A sh

\u8BED\u6CD5\uFF1AgetImageData(sx, sy, sw, sh)

\u53C2\u6570\uFF1Ax

sx\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u5DE6\u4E0A\u89D2 x \u5750\u6807;

sy\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u5DE6\u4E0A\u89D2 y \u5750\u6807;

sw\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u5BBD\u5EA6;

sh\uFF1A\u5C06\u8981\u88AB\u63D0\u53D6\u7684\u56FE\u50CF\u6570\u636E\u77E9\u5F62\u533A\u57DF\u7684\u9AD8\u5EA6;

\u{1F389} \uFF1AgetImageData(x,y,1,1)\uFF1A\u83B7\u53D6\u8DDD\u79BB x \u548C y \u4F4D\u7F6E\u7684 1 \u50CF\u7D20\u70B9\u7684\u989C\u8272

putImageData()

putImageData()\uFF1A\u53EF\u4EE5\u5C06\u6570\u636E\u4ECE\u5DF2\u6709\u7684ImageData\u5BF9\u8C61\u7ED8\u5236\u4E3A\u4F4D\u56FE

\u8BED\u6CD5\uFF1A putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

\u53C2\u6570\uFF1A

ImageData\uFF1A\u5305\u542B\u50CF\u7D20\u503C\u7684\u6570\u7EC4\u5BF9\u8C61\u3002 dx\uFF1A\u6E90\u56FE\u50CF\u6570\u636E\u5728\u76EE\u6807\u753B\u5E03\u4E2D x \u8F74\u65B9\u5411\u7684\u504F\u79FB\u91CF\u3002 dy\uFF1A\u6E90\u56FE\u50CF\u6570\u636E\u5728\u76EE\u6807\u753B\u5E03\u4E2D y \u8F74\u65B9\u5411\u7684\u504F\u79FB\u91CF\u3002 dirtyX\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u5DE6\u4E0A\u89D2\u7684\u4F4D\u7F6E\u3002\u9ED8\u8BA4\u662F\u6574\u4E2A\u56FE\u50CF\u6570\u636E\u7684\u5DE6\u4E0A\u89D2\uFF08x \u5750\u6807\uFF09\u3002 dirtyY\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u5DE6\u4E0A\u89D2\u7684\u4F4D\u7F6E\u3002\u9ED8\u8BA4\u662F\u6574\u4E2A\u56FE\u50CF\u6570\u636E\u7684\u5DE6\u4E0A\u89D2\uFF08y \u5750\u6807\uFF09\u3002 dirtyWidth\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u7684\u5BBD\u5EA6\u3002\u9ED8\u8BA4\u662F\u56FE\u50CF\u6570\u636E\u7684\u5BBD\u5EA6\u3002 dirtyHeight\uFF1A\u53EF\u9009\u53C2\u6570\uFF0C\u5728\u6E90\u56FE\u50CF\u6570\u636E\u4E2D\uFF0C\u77E9\u5F62\u533A\u57DF\u7684\u9AD8\u5EA6\u3002\u9ED8\u8BA4\u662F\u56FE\u50CF\u6570\u636E\u7684\u9AD8\u5EA6\u3002

5. \u7B7E\u540D

',3),re=JSON.parse('{"title":"canvas \u7684\u5C0F demo","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u97F3\u9891\u53EF\u89C6\u5316","slug":"_1-\u97F3\u9891\u53EF\u89C6\u5316","link":"#_1-\u97F3\u9891\u53EF\u89C6\u5316","children":[]},{"level":2,"title":"2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","slug":"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","link":"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","children":[]},{"level":2,"title":"3. \u70DF\u82B1","slug":"_3-\u70DF\u82B1","link":"#_3-\u70DF\u82B1","children":[]},{"level":2,"title":"4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668","slug":"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","link":"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","children":[]},{"level":2,"title":"5. \u7B7E\u540D","slug":"_5-\u7B7E\u540D","link":"#_5-\u7B7E\u540D","children":[]}],"relativePath":"pages/canvas/demo.md"}'),ie={name:"pages/canvas/demo.md"},_e=Object.assign(ie,{setup(c){return(o,t)=>(x(),b("div",null,[ae,ne,C(te),oe,C(X),se,ce,C(O),de,C(U)]))}});export{re as __pageData,_e as default}; diff --git a/assets/pages_canvas_demo.md.4a6d673f.lean.js b/assets/pages_canvas_demo.md.b7bf901c.lean.js similarity index 97% rename from assets/pages_canvas_demo.md.4a6d673f.lean.js rename to assets/pages_canvas_demo.md.b7bf901c.lean.js index e02d86f..a99a273 100644 --- a/assets/pages_canvas_demo.md.4a6d673f.lean.js +++ b/assets/pages_canvas_demo.md.b7bf901c.lean.js @@ -1 +1 @@ -import{_ as D,j as S,o as x,c as b,p as k,d as $,b as s,e as y,t as T,F as B,k as q,u as V,g as C,i as w,a as F}from"./app.cac277bf.js";const P=c=>(k("data-v-1661bc13"),c=c(),$(),c),R={style:{width:"600px"}},L=P(()=>s("canvas",{id:"canvas-dom",width:"600",height:"300"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ",-1)),H=[L],N={__name:"smallBalls",setup(c){return S(()=>{const o=document.getElementById("canvas-dom");if(o.width=600,o.getContext){let d=function(){t.fillStyle="rgba(255, 255, 255, 0.3)",t.fillRect(0,0,o.width,o.height),e.draw(),e.vy*=.99,e.vy+=.15,e.x+=e.vx,e.y+=e.vy,(e.x+e.vx>o.width||e.x+e.vx<0)&&(e.vx=-e.vx),(e.y+e.vy>o.height||e.y+e.vy<0)&&(e.vy=-e.vy,e.y+e.vy>310&&(e.y=50)),window.requestAnimationFrame(d)};const t=o.getContext("2d");let e={x:50,y:50,vx:1,vy:3,radius:10,color:"blue",draw:function(){t.beginPath(),t.arc(this.x,this.y,this.radius,0,Math.PI*2,!1),t.closePath(),t.fillStyle=this.color,t.fill()}};window.requestAnimationFrame(d),e.draw()}}),(o,t)=>(x(),b("div",R,H))}},X=D(N,[["__scopeId","data-v-1661bc13"]]);const Y=c=>(k("data-v-fc085a83"),c=c(),$(),c),M=Y(()=>s("canvas",{id:"themeCanvas",width:"600",height:"300"},null,-1)),W={__name:"themeChange",setup(c){const o="https://img2.baidu.com/it/u=4044887937,3129736188&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=392";let t=null,e=null,d=null;const i=y(""),m=y("");S(()=>{e=document.getElementById("themeCanvas"),t=e.getContext("2d",{willReadFrequently:!0}),d=new Image,d.crossOrigin="Anonymous",d.src=o,d.onload=()=>{t.drawImage(d,0,0,600,300),d.style.display="none"},e.addEventListener("mousemove",function(a){l("move",a)}),e.addEventListener("click",a=>{l("click",a)});function l(a,n){const g=n.offsetX,p=n.offsetY,_=t.getImageData(g,p,1,1).data,v=`rgba(${_[0]}, ${_[1]}, ${_[2]}, ${_[3]/255})`;if(a=="move")i.value=v;else{m.value=v;const A=t.getImageData(0,0,e.width,e.height),I=A.data;for(let f=0;f<=I.length;f+=4)I[f]=_[0],I[f+1]=_[1],I[f+2]=_[2];t.putImageData(A,0,0)}return v}});const u=()=>{t.drawImage(d,0,0,600,300)},r=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4){const g=(a[n]+a[n+1]+a[n+2])/3;a[n]=g,a[n+1]=g,a[n+2]=g}t.putImageData(l,0,0)},h=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4)a[n]=255-a[n],a[n+1]=255-a[n+1],a[n+2]=255-a[n+2];t.putImageData(l,0,0)};return(l,a)=>(x(),b(B,null,[M,s("div",null,"\u5212\u8FC7\u7684\u989C\u8272\u4E3A\uFF1A"+T(i.value),1),s("div",null,"\u9009\u4E2D\u7684\u989C\u8272\uFF1A "+T(m.value),1),s("button",{onClick:u},"\u8FD8\u539F"),s("button",{onClick:r},"\u9ED1\u767D"),s("button",{onClick:h},"\u66DD\u5149")],64))}},O=D(W,[["__scopeId","data-v-fc085a83"]]);const j=c=>(k("data-v-d42abf30"),c=c(),$(),c),z=j(()=>s("canvas",{id:"signatureCanvas",width:"600",height:"300"},null,-1)),J={__name:"Signature",setup(c){let o=null,t=null;S(()=>{t=document.getElementById("signatureCanvas"),o=t.getContext("2d"),t.addEventListener("mouseenter",()=>{t.addEventListener("mousedown",i=>{o.beginPath(),o.moveTo(i.offsetX,i.offsetY),t.addEventListener("mousemove",d)}),t.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",d)})});const d=i=>{o.lineTo(i.offsetX,i.offsetY),o.stroke()}});const e=()=>{o.clearRect(0,0,t.width,t.height)};return(d,i)=>(x(),b(B,null,[z,s("button",{onClick:e},"\u6E05\u7A7A\u753B\u5E03")],64))}},U=D(J,[["__scopeId","data-v-d42abf30"]]),G="/ybhdsg-zhs/assets/\u672C\u8349\u7EB2\u76EE.3e97399a.mp3";const K=c=>(k("data-v-22a1e8fb"),c=c(),$(),c),Q=K(()=>s("canvas",null,null,-1)),Z=["src"],ee={__name:"audioVisualisation",setup(c){const o=y(null);let t=y([]),e=y(!1),d;return S(()=>{const i=document.querySelector("audio"),m=document.querySelector("canvas"),u=m.getContext("2d");i.onplay=function(){if(e.value)return;const r=new AudioContext,h=r.createMediaElementSource(i);o.value=r.createAnalyser(),o.value.fftSize=512,t.value=new Uint8Array(o.value.frequencyBinCount),h.connect(o.value),o.value.connect(r.destination),e.value=!0},d=()=>{requestAnimationFrame(d);const{width:r,height:h}=m;if(u.clearRect(0,0,r,h),!e.value)return;o.value.getByteFrequencyData(t.value);const l=t.value.length/2,a=r/l/2;console.log(l),u.fillStyle="#e0f9b5";for(let n=0;n{window.requestAnimationFrame(d)}),(i,m)=>(x(),b("div",null,[Q,s("audio",{src:V(G),controls:""},null,8,Z)]))}},te=D(ee,[["__scopeId","data-v-22a1e8fb"]]),ae=s("h1",{id:"canvas-\u7684\u5C0F-demo",tabindex:"-1"},[w("canvas \u7684\u5C0F demo "),s("a",{class:"header-anchor",href:"#canvas-\u7684\u5C0F-demo","aria-hidden":"true"},"#")],-1),ne=s("h2",{id:"_1-\u97F3\u9891\u53EF\u89C6\u5316",tabindex:"-1"},[w("1. \u97F3\u9891\u53EF\u89C6\u5316 "),s("a",{class:"header-anchor",href:"#_1-\u97F3\u9891\u53EF\u89C6\u5316","aria-hidden":"true"},"#")],-1),oe=s("h2",{id:"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8",tabindex:"-1"},[w("2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8 "),s("a",{class:"header-anchor",href:"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","aria-hidden":"true"},"#")],-1),se=s("h2",{id:"_3-\u70DF\u82B1",tabindex:"-1"},[w("3. \u70DF\u82B1 "),s("a",{class:"header-anchor",href:"#_3-\u70DF\u82B1","aria-hidden":"true"},"#")],-1),ce=s("h2",{id:"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668",tabindex:"-1"},[w("4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668 "),s("a",{class:"header-anchor",href:"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","aria-hidden":"true"},"#")],-1),de=F("",3),re=JSON.parse('{"title":"canvas \u7684\u5C0F demo","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u97F3\u9891\u53EF\u89C6\u5316","slug":"_1-\u97F3\u9891\u53EF\u89C6\u5316","link":"#_1-\u97F3\u9891\u53EF\u89C6\u5316","children":[]},{"level":2,"title":"2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","slug":"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","link":"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","children":[]},{"level":2,"title":"3. \u70DF\u82B1","slug":"_3-\u70DF\u82B1","link":"#_3-\u70DF\u82B1","children":[]},{"level":2,"title":"4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668","slug":"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","link":"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","children":[]},{"level":2,"title":"5. \u7B7E\u540D","slug":"_5-\u7B7E\u540D","link":"#_5-\u7B7E\u540D","children":[]}],"relativePath":"pages/canvas/demo.md"}'),ie={name:"pages/canvas/demo.md"},_e=Object.assign(ie,{setup(c){return(o,t)=>(x(),b("div",null,[ae,ne,C(te),oe,C(X),se,ce,C(O),de,C(U)]))}});export{re as __pageData,_e as default}; +import{_ as D,h as S,o as x,c as b,p as k,d as $,b as s,e as y,t as T,F as B,i as q,u as V,g as C,j as w,a as F}from"./app.88185e12.js";const P=c=>(k("data-v-1661bc13"),c=c(),$(),c),R={style:{width:"600px"}},L=P(()=>s("canvas",{id:"canvas-dom",width:"600",height:"300"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ",-1)),H=[L],N={__name:"smallBalls",setup(c){return S(()=>{const o=document.getElementById("canvas-dom");if(o.width=600,o.getContext){let d=function(){t.fillStyle="rgba(255, 255, 255, 0.3)",t.fillRect(0,0,o.width,o.height),e.draw(),e.vy*=.99,e.vy+=.15,e.x+=e.vx,e.y+=e.vy,(e.x+e.vx>o.width||e.x+e.vx<0)&&(e.vx=-e.vx),(e.y+e.vy>o.height||e.y+e.vy<0)&&(e.vy=-e.vy,e.y+e.vy>310&&(e.y=50)),window.requestAnimationFrame(d)};const t=o.getContext("2d");let e={x:50,y:50,vx:1,vy:3,radius:10,color:"blue",draw:function(){t.beginPath(),t.arc(this.x,this.y,this.radius,0,Math.PI*2,!1),t.closePath(),t.fillStyle=this.color,t.fill()}};window.requestAnimationFrame(d),e.draw()}}),(o,t)=>(x(),b("div",R,H))}},X=D(N,[["__scopeId","data-v-1661bc13"]]);const Y=c=>(k("data-v-fc085a83"),c=c(),$(),c),M=Y(()=>s("canvas",{id:"themeCanvas",width:"600",height:"300"},null,-1)),W={__name:"themeChange",setup(c){const o="https://img2.baidu.com/it/u=4044887937,3129736188&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=392";let t=null,e=null,d=null;const i=y(""),m=y("");S(()=>{e=document.getElementById("themeCanvas"),t=e.getContext("2d",{willReadFrequently:!0}),d=new Image,d.crossOrigin="Anonymous",d.src=o,d.onload=()=>{t.drawImage(d,0,0,600,300),d.style.display="none"},e.addEventListener("mousemove",function(a){l("move",a)}),e.addEventListener("click",a=>{l("click",a)});function l(a,n){const g=n.offsetX,p=n.offsetY,_=t.getImageData(g,p,1,1).data,v=`rgba(${_[0]}, ${_[1]}, ${_[2]}, ${_[3]/255})`;if(a=="move")i.value=v;else{m.value=v;const A=t.getImageData(0,0,e.width,e.height),I=A.data;for(let f=0;f<=I.length;f+=4)I[f]=_[0],I[f+1]=_[1],I[f+2]=_[2];t.putImageData(A,0,0)}return v}});const u=()=>{t.drawImage(d,0,0,600,300)},r=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4){const g=(a[n]+a[n+1]+a[n+2])/3;a[n]=g,a[n+1]=g,a[n+2]=g}t.putImageData(l,0,0)},h=()=>{u();const l=t.getImageData(0,0,e.width,e.height),a=l.data;for(let n=0;n<=a.length;n+=4)a[n]=255-a[n],a[n+1]=255-a[n+1],a[n+2]=255-a[n+2];t.putImageData(l,0,0)};return(l,a)=>(x(),b(B,null,[M,s("div",null,"\u5212\u8FC7\u7684\u989C\u8272\u4E3A\uFF1A"+T(i.value),1),s("div",null,"\u9009\u4E2D\u7684\u989C\u8272\uFF1A "+T(m.value),1),s("button",{onClick:u},"\u8FD8\u539F"),s("button",{onClick:r},"\u9ED1\u767D"),s("button",{onClick:h},"\u66DD\u5149")],64))}},O=D(W,[["__scopeId","data-v-fc085a83"]]);const j=c=>(k("data-v-d42abf30"),c=c(),$(),c),z=j(()=>s("canvas",{id:"signatureCanvas",width:"600",height:"300"},null,-1)),J={__name:"Signature",setup(c){let o=null,t=null;S(()=>{t=document.getElementById("signatureCanvas"),o=t.getContext("2d"),t.addEventListener("mouseenter",()=>{t.addEventListener("mousedown",i=>{o.beginPath(),o.moveTo(i.offsetX,i.offsetY),t.addEventListener("mousemove",d)}),t.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",d)})});const d=i=>{o.lineTo(i.offsetX,i.offsetY),o.stroke()}});const e=()=>{o.clearRect(0,0,t.width,t.height)};return(d,i)=>(x(),b(B,null,[z,s("button",{onClick:e},"\u6E05\u7A7A\u753B\u5E03")],64))}},U=D(J,[["__scopeId","data-v-d42abf30"]]),G="/ybhdsg-zhs/assets/\u672C\u8349\u7EB2\u76EE.3e97399a.mp3";const K=c=>(k("data-v-22a1e8fb"),c=c(),$(),c),Q=K(()=>s("canvas",null,null,-1)),Z=["src"],ee={__name:"audioVisualisation",setup(c){const o=y(null);let t=y([]),e=y(!1),d;return S(()=>{const i=document.querySelector("audio"),m=document.querySelector("canvas"),u=m.getContext("2d");i.onplay=function(){if(e.value)return;const r=new AudioContext,h=r.createMediaElementSource(i);o.value=r.createAnalyser(),o.value.fftSize=512,t.value=new Uint8Array(o.value.frequencyBinCount),h.connect(o.value),o.value.connect(r.destination),e.value=!0},d=()=>{requestAnimationFrame(d);const{width:r,height:h}=m;if(u.clearRect(0,0,r,h),!e.value)return;o.value.getByteFrequencyData(t.value);const l=t.value.length/2,a=r/l/2;console.log(l),u.fillStyle="#e0f9b5";for(let n=0;n{window.requestAnimationFrame(d)}),(i,m)=>(x(),b("div",null,[Q,s("audio",{src:V(G),controls:""},null,8,Z)]))}},te=D(ee,[["__scopeId","data-v-22a1e8fb"]]),ae=s("h1",{id:"canvas-\u7684\u5C0F-demo",tabindex:"-1"},[w("canvas \u7684\u5C0F demo "),s("a",{class:"header-anchor",href:"#canvas-\u7684\u5C0F-demo","aria-hidden":"true"},"#")],-1),ne=s("h2",{id:"_1-\u97F3\u9891\u53EF\u89C6\u5316",tabindex:"-1"},[w("1. \u97F3\u9891\u53EF\u89C6\u5316 "),s("a",{class:"header-anchor",href:"#_1-\u97F3\u9891\u53EF\u89C6\u5316","aria-hidden":"true"},"#")],-1),oe=s("h2",{id:"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8",tabindex:"-1"},[w("2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8 "),s("a",{class:"header-anchor",href:"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","aria-hidden":"true"},"#")],-1),se=s("h2",{id:"_3-\u70DF\u82B1",tabindex:"-1"},[w("3. \u70DF\u82B1 "),s("a",{class:"header-anchor",href:"#_3-\u70DF\u82B1","aria-hidden":"true"},"#")],-1),ce=s("h2",{id:"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668",tabindex:"-1"},[w("4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668 "),s("a",{class:"header-anchor",href:"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","aria-hidden":"true"},"#")],-1),de=F("",3),re=JSON.parse('{"title":"canvas \u7684\u5C0F demo","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u97F3\u9891\u53EF\u89C6\u5316","slug":"_1-\u97F3\u9891\u53EF\u89C6\u5316","link":"#_1-\u97F3\u9891\u53EF\u89C6\u5316","children":[]},{"level":2,"title":"2. \u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","slug":"_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","link":"#_2-\u5C0F\u7403\u7684\u81EA\u7531\u843D\u4F53\u8FD0\u52A8","children":[]},{"level":2,"title":"3. \u70DF\u82B1","slug":"_3-\u70DF\u82B1","link":"#_3-\u70DF\u82B1","children":[]},{"level":2,"title":"4. \u4E3B\u9898\u8272\u6539\u53D8\uFF08\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C\uFF09\u548C\u62FE\u8272\u5668","slug":"_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","link":"#_4-\u4E3B\u9898\u8272\u6539\u53D8-\u56FE\u7247\u52A0\u4E0A\u6EE4\u955C-\u548C\u62FE\u8272\u5668","children":[]},{"level":2,"title":"5. \u7B7E\u540D","slug":"_5-\u7B7E\u540D","link":"#_5-\u7B7E\u540D","children":[]}],"relativePath":"pages/canvas/demo.md"}'),ie={name:"pages/canvas/demo.md"},_e=Object.assign(ie,{setup(c){return(o,t)=>(x(),b("div",null,[ae,ne,C(te),oe,C(X),se,ce,C(O),de,C(U)]))}});export{re as __pageData,_e as default}; diff --git a/assets/pages_canvas_index.md.167acf62.js b/assets/pages_canvas_index.md.595e9bdf.js similarity index 99% rename from assets/pages_canvas_index.md.167acf62.js rename to assets/pages_canvas_index.md.595e9bdf.js index 8b983d6..b70284f 100644 --- a/assets/pages_canvas_index.md.167acf62.js +++ b/assets/pages_canvas_index.md.595e9bdf.js @@ -1,4 +1,4 @@ -import{_ as h,j as _,o as r,c as d,p as u,d as y,b as s,h as p,g as t,i as l,a as i}from"./app.cac277bf.js";const D=a=>(u("data-v-0d5d66a8"),a=a(),y(),a),F=D(()=>s("span",null,[s("canvas",{id:"canvas1",width:"800",height:"330"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ")],-1)),g=[F],v={__name:"canvasDemo",setup(a){return _(()=>{const o=document.getElementById("canvas1");if(o.getContext){const e=o.getContext("2d");e.moveTo(300,70),e.lineTo(430,100),e.stroke(),e.beginPath(),e.moveTo(50,50),e.lineTo(130,130),e.lineTo(130,50),e.lineTo(50,50),e.stroke(),e.strokeRect(200,20,20,50),e.fillRect(230,60,30,30),e.beginPath(),e.arc(60,160,50,0,Math.PI,!1),e.stroke(),e.beginPath(),e.arc(180,160,50,0,Math.PI*2,!1),e.stroke(),e.beginPath(),e.arc(60,200,50,0,Math.PI/2,!1),e.fill(),e.beginPath(),e.arc(200,280,50,0,Math.PI*2,!1),e.fill(),e.beginPath(),e.ellipse(400,150,50,100,0,0,2*Math.PI),e.stroke(),e.beginPath(),e.ellipse(550,150,50,100,Math.PI/2,0,2*Math.PI),e.fill()}}),(o,e)=>(r(),d("div",null,g))}},x=h(v,[["__scopeId","data-v-0d5d66a8"]]),b=i(`

canvas

\u4E00\u3001\u57FA\u7840\u77E5\u8BC6\uFF08\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684)

\u6848\u4F8B+\u56FE\u89E3\u5E26\u4F60\u4E00\u6587\u8BFB\u61C2 Canvas\u{1F525}\u{1F525}

\u4E8C\u6B21\u8D1D\u585E\u5C14\u66F2\u7EBF\u5DE5\u5177\u7F51\u7AD9

\u4E09\u6B21\u8D1D\u585E\u5C14\u66F2\u7EBF\u5DE5\u5177\u7F51\u7AD9

1. \u57FA\u7840\u77E5\u8BC6(https://juejin.cn/post/7161696893695688740)

html
<body>
+import{_ as h,h as _,o as r,c as d,p as u,d as y,b as s,k as p,g as t,j as l,a as i}from"./app.88185e12.js";const D=a=>(u("data-v-0d5d66a8"),a=a(),y(),a),F=D(()=>s("span",null,[s("canvas",{id:"canvas1",width:"800",height:"330"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ")],-1)),g=[F],v={__name:"canvasDemo",setup(a){return _(()=>{const o=document.getElementById("canvas1");if(o.getContext){const e=o.getContext("2d");e.moveTo(300,70),e.lineTo(430,100),e.stroke(),e.beginPath(),e.moveTo(50,50),e.lineTo(130,130),e.lineTo(130,50),e.lineTo(50,50),e.stroke(),e.strokeRect(200,20,20,50),e.fillRect(230,60,30,30),e.beginPath(),e.arc(60,160,50,0,Math.PI,!1),e.stroke(),e.beginPath(),e.arc(180,160,50,0,Math.PI*2,!1),e.stroke(),e.beginPath(),e.arc(60,200,50,0,Math.PI/2,!1),e.fill(),e.beginPath(),e.arc(200,280,50,0,Math.PI*2,!1),e.fill(),e.beginPath(),e.ellipse(400,150,50,100,0,0,2*Math.PI),e.stroke(),e.beginPath(),e.ellipse(550,150,50,100,Math.PI/2,0,2*Math.PI),e.fill()}}),(o,e)=>(r(),d("div",null,g))}},x=h(v,[["__scopeId","data-v-0d5d66a8"]]),b=i(`

canvas

\u4E00\u3001\u57FA\u7840\u77E5\u8BC6\uFF08\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684)

\u6848\u4F8B+\u56FE\u89E3\u5E26\u4F60\u4E00\u6587\u8BFB\u61C2 Canvas\u{1F525}\u{1F525}

\u4E8C\u6B21\u8D1D\u585E\u5C14\u66F2\u7EBF\u5DE5\u5177\u7F51\u7AD9

\u4E09\u6B21\u8D1D\u585E\u5C14\u66F2\u7EBF\u5DE5\u5177\u7F51\u7AD9

1. \u57FA\u7840\u77E5\u8BC6(https://juejin.cn/post/7161696893695688740)

html
<body>
   <canvas id="canvas" width="200" height="200">
     \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01
   </canvas>
diff --git a/assets/pages_canvas_index.md.167acf62.lean.js b/assets/pages_canvas_index.md.595e9bdf.lean.js
similarity index 98%
rename from assets/pages_canvas_index.md.167acf62.lean.js
rename to assets/pages_canvas_index.md.595e9bdf.lean.js
index df3efc8..842bfbf 100644
--- a/assets/pages_canvas_index.md.167acf62.lean.js
+++ b/assets/pages_canvas_index.md.595e9bdf.lean.js
@@ -1 +1 @@
-import{_ as h,j as _,o as r,c as d,p as u,d as y,b as s,h as p,g as t,i as l,a as i}from"./app.cac277bf.js";const D=a=>(u("data-v-0d5d66a8"),a=a(),y(),a),F=D(()=>s("span",null,[s("canvas",{id:"canvas1",width:"800",height:"330"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ")],-1)),g=[F],v={__name:"canvasDemo",setup(a){return _(()=>{const o=document.getElementById("canvas1");if(o.getContext){const e=o.getContext("2d");e.moveTo(300,70),e.lineTo(430,100),e.stroke(),e.beginPath(),e.moveTo(50,50),e.lineTo(130,130),e.lineTo(130,50),e.lineTo(50,50),e.stroke(),e.strokeRect(200,20,20,50),e.fillRect(230,60,30,30),e.beginPath(),e.arc(60,160,50,0,Math.PI,!1),e.stroke(),e.beginPath(),e.arc(180,160,50,0,Math.PI*2,!1),e.stroke(),e.beginPath(),e.arc(60,200,50,0,Math.PI/2,!1),e.fill(),e.beginPath(),e.arc(200,280,50,0,Math.PI*2,!1),e.fill(),e.beginPath(),e.ellipse(400,150,50,100,0,0,2*Math.PI),e.stroke(),e.beginPath(),e.ellipse(550,150,50,100,Math.PI/2,0,2*Math.PI),e.fill()}}),(o,e)=>(r(),d("div",null,g))}},x=h(v,[["__scopeId","data-v-0d5d66a8"]]),b=i("",8),m={class:"details custom-block"},C=s("summary",null,[s("code",null,"getContext(contextType, contextAttributes)"),l("\u53EF\u80FD\u7684\u63A5\u6536\u53C2\u6570")],-1),f=i("",1),A=s("blockquote",null,null,-1),k=s("p",null,"(1)\u3001alpha \u5B83\u7684\u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E3A false, \u6D4F\u89C8\u5668\u5C06\u8BA4 Canvas \u80CC\u666F\u603B\u662F\u4E0D\u900F\u660E\u7684\uFF0C\u8FD9\u6837\u53EF\u4EE5\u505A\u5230\u4E00\u4E9B\u6027\u80FD\u63D0\u6548\u3002",-1),T=s("p",null,[l("(2)\u3001willReadFrequently\uFF0C\u503C\u4E5F\u4E3A Boolean \u7C7B\u578B\uFF0C\u7528\u4E8E\u8868\u660E\u662F\u5426\u8981\u91CD\u590D\u64CD\u4F5C\uFF0C"),s("strong",null,"\u9891\u7E41\u8C03\u7528 getImageData()\u65B9\u6CD5\u65F6\u80FD\u8282\u7701\u5185\u5B58\uFF0C\u4F46\u662F\u4EC5 Gecko \u5185\u6838\u6D4F\u89C8\u5668\u652F\u6301"),l("\u3002")],-1),P=s("p",null,"(3)\u3001storage \u7528\u4E8E\u8868\u660E\u4F7F\u7528\u54EA\u79CD\u65B9\u5F0F\u5B58\u50A8\uFF0C\u9ED8\u8BA4\u503C persisten\uFF0C\u8868\u793A\u6301\u4E45\u5316\u5B58\u50A8\u3002",-1),I=s("p",null,"(1)\u3001alpha \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u6307\u793A\u753B\u5E03\u662F\u5426\u5305\u542B alpha \u7F13\u51B2\u533A\u3002 (2)\u3001antialias \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u6307\u793A\u662F\u5426\u5F00\u542F\u6297\u952F\u9F7F\u3002 (3)\u3001depth \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u8868\u793A\u7ED8\u56FE\u7F13\u51B2\u533A\u7684\u6DF1\u5EA6\u7F13\u51B2\u533A\u81F3\u5C11\u4E3A 16 \u4F4D\u3002 (4)\u3001failIfMajorPerformanceCaveat \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u6307\u793A\u5982\u679C\u7CFB\u7EDF\u6027\u80FD\u8F83\u4F4E\uFF0C\u662F\u5426\u521B\u5EFA\u4E0A\u4E0B\u6587\u3002 (5)\u3001powerPreference\uFF1A\u5BF9\u7528\u6237\u4EE3\u7406\u7684\u63D0\u793A\uFF0C\u6307\u793A GPU \u7684\u54EA\u79CD\u914D\u7F6E\u9002\u5408 WebGL \u4E0A\u4E0B\u6587\u3002\u53EF\u80FD\u7684\u503C\u662F\uFF1A default: \u81EA\u52A8\u9009\u62E9\u6A21\u5F0F\uFF0C\u81EA\u52A8\u51B3\u5B9A\u54EA\u79CD GPU \u914D\u7F6E\u6700\u5408\u9002\uFF0C\u4E3A\u9ED8\u8BA4\u503C\u3002 high-performance: \u9AD8\u6027\u80FD\u6A21\u5F0F\uFF0C\u4F18\u5148\u8003\u8651\u6E32\u67D3\u6027\u80FD\u800C\u4E0D\u662F\u529F\u8017\u3002 low-power: \u8282\u80FD\u6A21\u5F0F\uFF0C\u4F18\u5148\u8003\u8651\u8282\u80FD\u800C\u4E0D\u662F\u6E32\u67D3\u6027\u80FD\u3002 (6)\u3001premultipliedAlpha \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u8868\u793A\u9875\u9762\u5408\u6210\u5668\u5C06\u5047\u5B9A\u7ED8\u56FE\u7F13\u51B2\u533A\u5305\u542B\u5177\u6709\u9884\u4E58 alpha \u7684\u989C\u8272\u3002 (7)\u3001preserveDrawingBuffer \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u5982\u679C\u503C\u4E3A true\uFF0C\u5219\u4E0D\u4F1A\u6E05\u9664\u7F13\u51B2\u533A\u5E76\u4FDD\u7559\u5176\u503C\uFF0C\u76F4\u5230\u88AB\u6E05\u9664\u6216\u88AB\u4F7F\u7528\u8005\u8986\u76D6\u3002 (8)\u3001stencil \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u8868\u793A\u7ED8\u56FE\u7F13\u51B2\u533A\u5177\u6709\u81F3\u5C11 8 \u4F4D\u7684\u6A21\u677F\u7F13\u51B2\u533A\u3002",-1),E=s("h2",{id:"\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6",tabindex:"-1"},[l("\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6 "),s("a",{class:"header-anchor",href:"#\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","aria-hidden":"true"},"#")],-1),w=s("h2",{id:"_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62",tabindex:"-1"},[l("1. \u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62 "),s("a",{class:"header-anchor",href:"#_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","aria-hidden":"true"},"#")],-1),j={class:"tip custom-block"},S=s("p",{class:"custom-block-title"},"TIP",-1),q=s("code",null,"moveTo(x,y)",-1),B=s("strong",null,"\u521D\u59CB\u4F4D\u7F6E",-1),R=s("code",null,"x",-1),L=s("code",null,"y",-1),M=s("code",null,"lineTo(x,y)",-1),V=s("strong",null,"\u6307\u5B9A\u4F4D\u7F6E",-1),G=s("code",null,"x",-1),N=s("code",null,"y",-1),W=s("code",null,"stroke()",-1),O=i("",3),J={class:"tip custom-block"},Y=s("p",{class:"custom-block-title"},"\u5706",-1),z=s("li",null,[s("p",null,[s("code",null,"arc(x, y, radius, startAngle, endAngle, anticlockwise)"),l("\u3002x \u548C Y \u4E3A\u5706\u5FC3\u7684\u5750\u6807\uFF0Cradius \u4E3A\u534A\u5F84\uFF0CstartAngle \u4E3A\u5706\u5F27\u6216\u5706\u7684\u5F00\u59CB\u4F4D\u7F6E\uFF0CendAngle \u4E3A\u5706\u5F27\u6216\u5706\u7684\u7ED3\u675F\u4F4D\u7F6E\uFF0Canticlockwise \u662F\u7ED8\u5236\u7684\u65B9\u5411\uFF08\u4E0D\u5199\u9ED8\u8BA4\u4E3A false\uFF0C\u4ECE\u987A\u65F6\u9488\u65B9\u5411\uFF09\u3002")])],-1),U=s("strong",null,"arc()\u51FD\u6570\u4E2D\u89D2\u7684\u5355\u4F4D\u662F\u5F27\u5EA6\u800C\u4E0D\u662F\u89D2\u5EA6",-1),X=i("",9),$={class:"tip custom-block"},H=s("p",{class:"custom-block-title"},"TIP",-1),K=s("li",null,[s("code",null,"lineWidth"),l(" \u8BBE\u7F6E\u5F53\u524D\u7ED8\u7EBF\u7684\u7C97\u7EC6\u3002\u5C5E\u6027\u503C\u5FC5\u987B\u4E3A\u6B63\u6570\u3002\u9ED8\u8BA4\u503C\u662F 1.0\u3002")],-1),Q=s("li",null,[s("code",null,"lineCap"),l(" \u8BBE\u7F6E\u7EBF\u6BB5\u7AEF\u70B9\u663E\u793A\u7684\u6837\u5B50\u3002\u53EF\u9009\u503C\u4E3A\uFF1Abutt\uFF0Cround \u548C square\u3002\u9ED8\u8BA4\u662F butt\u3002")],-1),Z=s("li",null,[s("code",null,"lineJoin"),l(" \u8BE5\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u4E24\u7EBF\u6BB5\u8FDE\u63A5\u5904\u6240\u663E\u793A\u7684\u6837\u5B50\u3002\u53EF\u9009\u503C\u4E3A\uFF1Around, bevel \u548C miter\u3002\u9ED8\u8BA4\u662F miter\u3002")],-1),ss=s("li",null,[s("code",null,"miterLimit"),l(" \u9650\u5236\u5F53\u4E24\u6761\u7EBF\u76F8\u4EA4\u65F6\u4EA4\u63A5\u5904\u6700\u5927\u957F\u5EA6\uFF1B\u6240\u8C13\u4EA4\u63A5\u5904\u957F\u5EA6\uFF08\u659C\u63A5\u957F\u5EA6\uFF09\u662F\u6307\u7EBF\u6761\u4EA4\u63A5\u5904\u5185\u89D2\u9876\u70B9\u5230\u5916\u89D2\u9876\u70B9\u7684\u957F\u5EA6\u3002 \u7EBF\u6BB5\u4E4B\u95F4\u5939\u89D2\u6BD4\u8F83\u5927\u65F6\uFF0C\u4EA4\u70B9\u4E0D\u4F1A\u592A\u8FDC\uFF0C\u4F46\u968F\u7740\u5939\u89D2\u53D8\u5C0F\uFF0C\u4EA4\u70B9\u8DDD\u79BB\u4F1A\u5448\u6307\u6570\u7EA7\u589E\u5927\u3002 \u5982\u679C\u4EA4\u70B9\u8DDD\u79BB\u5927\u4E8E miterLimit \u503C\uFF0C\u8FDE\u63A5\u6548\u679C\u4F1A\u53D8\u6210\u4E86 lineJoin = bevel \u7684\u6548\u679C\u3002")],-1),es=s("code",null,"setLineDash",-1),ls=s("li",null,[s("code",null,"getLineDash"),l(" \u5219\u662F\u8FD4\u56DE\u5F53\u524D\u865A\u7EBF\u8BBE\u7F6E\u7684\u6837\u5F0F\uFF0C\u957F\u5EA6\u4E3A\u975E\u8D1F\u5076\u6570\u7684\u6570\u7EC4\u3002")],-1),ts=s("li",null,[s("code",null,"lineDashOffset"),l(" \u8BBE\u7F6E\u865A\u7EBF\u6837\u5F0F\u7684\u8D77\u59CB\u504F\u79FB\u91CF\u3002")],-1),os=JSON.parse('{"title":"canvas","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00\u3001\u57FA\u7840\u77E5\u8BC6\uFF08\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684)","slug":"\u4E00\u3001\u57FA\u7840\u77E5\u8BC6-\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684","link":"#\u4E00\u3001\u57FA\u7840\u77E5\u8BC6-\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684","children":[]},{"level":2,"title":"1. \u57FA\u7840\u77E5\u8BC6(https://juejin.cn/post/7161696893695688740)","slug":"_1-\u57FA\u7840\u77E5\u8BC6-https-juejin-cn-post-7161696893695688740","link":"#_1-\u57FA\u7840\u77E5\u8BC6-https-juejin-cn-post-7161696893695688740","children":[]},{"level":2,"title":"\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","slug":"\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","link":"#\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","children":[]},{"level":2,"title":"1. \u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","slug":"_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","link":"#_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","children":[]},{"level":2,"title":"2. \u77E9\u5F62","slug":"_2-\u77E9\u5F62","link":"#_2-\u77E9\u5F62","children":[]},{"level":2,"title":"3. \u5706\u5F27\u548C\u5706","slug":"_3-\u5706\u5F27\u548C\u5706","link":"#_3-\u5706\u5F27\u548C\u5706","children":[]},{"level":2,"title":"4. \u5F00\u542F\u8DEF\u5F84\uFF08beginPath\uFF09\uFF0C\u95ED\u5408\u8DEF\u5F84\uFF08closePath()\uFF09","slug":"_4-\u5F00\u542F\u8DEF\u5F84-beginpath-\u95ED\u5408\u8DEF\u5F84-closepath","link":"#_4-\u5F00\u542F\u8DEF\u5F84-beginpath-\u95ED\u5408\u8DEF\u5F84-closepath","children":[]},{"level":2,"title":"5. fill","slug":"_5-fill","link":"#_5-fill","children":[]},{"level":2,"title":"6. \u8D1D\u585E\u5C14\u66F2\u7EBF","slug":"_6-\u8D1D\u585E\u5C14\u66F2\u7EBF","link":"#_6-\u8D1D\u585E\u5C14\u66F2\u7EBF","children":[]},{"level":2,"title":"\u4E09\u3001 \u7ED8\u5236\u6837\u5F0F","slug":"\u4E09\u3001-\u7ED8\u5236\u6837\u5F0F","link":"#\u4E09\u3001-\u7ED8\u5236\u6837\u5F0F","children":[]},{"level":2,"title":"1. \u7EBF\u6761\u7684\u6837\u5F0F","slug":"_1-\u7EBF\u6761\u7684\u6837\u5F0F","link":"#_1-\u7EBF\u6761\u7684\u6837\u5F0F","children":[]}],"relativePath":"pages/canvas/index.md"}'),as={name:"pages/canvas/index.md"},cs=Object.assign(as,{setup(a){return(o,e)=>{const c=p("MyText"),n=p("my-text");return r(),d("div",null,[b,s("details",m,[C,t(c,{text:"contextType"}),l(" \u4E3A\u7ED8\u5236\u4E0A\u4E0B\u6587\u7684\u7C7B\u578B\uFF0C\u7C7B\u578B\u53C2\u6570\u6709\uFF1A"),f,t(c,{text:"contextAttributes"}),l(" \u4E3A\u7ED8\u5236\u4E0A\u4E0B\u6587\u7684\u5C5E\u6027\uFF0C\u8FD9\u4E9B\u5C5E\u6027\u76F8\u5BF9\u6BD4\u8F83\u591A"),A,t(c,{text:"2D \u7C7B\u578B\u7684\u53C2\u6570\u6709\uFF1A"}),k,T,P,t(c,{text:"3D \u7C7B\u578B\u7684\u53C2\u6570\u6709\uFF1A"}),I]),E,t(x),w,s("div",j,[S,s("ol",null,[s("li",null,[q,l(": "),t(n,{text:" \u8BBE\u7F6E\u521D\u59CB\u4F4D\u7F6E"}),l("\uFF0C\u53C2\u6570\u4E3A"),B,R,l("\u548C"),L,l("\u7684\u5750\u6807\u70B9")]),s("li",null,[M,l(": "),t(n,{text:" \u7ED8\u5236\u4E00\u6761\u4ECE\u521D\u59CB\u4F4D\u7F6E\u5230\u6307\u5B9A\u4F4D\u7F6E\u7684\u76F4\u7EBF"}),l("\uFF0C\u53C2\u6570\u4E3A"),V,G,l("\u548C"),N,l("\u7684\u5750\u6807\u70B9")]),s("li",null,[W,l(": "),t(n,{text:" \u901A\u8FC7\u7EBF\u6761\u6765\u7ED8\u5236\u56FE\u5F62\u8F6E\u5ED3"})])])]),O,s("div",J,[Y,s("ol",null,[z,s("li",null,[s("p",null,[l("\u5728\u753B\u5F27\u7684\u65F6\u5019\uFF0C"),U,l("\u3002\u89D2\u5EA6\u6362\u7B97\u4E3A\u5F27\u5EA6\u7684\u8868\u8FBE\u5F0F\u4E3A\uFF1A"),t(n,{text:"\u5F27\u5EA6=(Math.PI/180)*\u89D2\u5EA6\u3002"})])])])]),X,s("div",$,[H,s("ol",null,[K,Q,Z,ss,s("li",null,[es,l(" \u53EF\u4EE5\u8BBE\u7F6E\u5F53\u524D\u865A\u7EBF\u6837\u5F0F\u3002"),t(n,{text:"\u8BBE\u7F6E\u5947\u6570\uFF0CsetLineDash \u4F1A\u590D\u5236\u4E00\u4EFD\u6570\u7EC4\u8865\u5168\u4E3A\u5076\u6570"})]),ls,ts])])])}}});export{os as __pageData,cs as default};
+import{_ as h,h as _,o as r,c as d,p as u,d as y,b as s,k as p,g as t,j as l,a as i}from"./app.88185e12.js";const D=a=>(u("data-v-0d5d66a8"),a=a(),y(),a),F=D(()=>s("span",null,[s("canvas",{id:"canvas1",width:"800",height:"330"}," \u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301canvas\u5143\u7D20\uFF0C\u8BF7\u5347\u7EA7\u6216\u66F4\u6362\u6D4F\u89C8\u5668\uFF01 ")],-1)),g=[F],v={__name:"canvasDemo",setup(a){return _(()=>{const o=document.getElementById("canvas1");if(o.getContext){const e=o.getContext("2d");e.moveTo(300,70),e.lineTo(430,100),e.stroke(),e.beginPath(),e.moveTo(50,50),e.lineTo(130,130),e.lineTo(130,50),e.lineTo(50,50),e.stroke(),e.strokeRect(200,20,20,50),e.fillRect(230,60,30,30),e.beginPath(),e.arc(60,160,50,0,Math.PI,!1),e.stroke(),e.beginPath(),e.arc(180,160,50,0,Math.PI*2,!1),e.stroke(),e.beginPath(),e.arc(60,200,50,0,Math.PI/2,!1),e.fill(),e.beginPath(),e.arc(200,280,50,0,Math.PI*2,!1),e.fill(),e.beginPath(),e.ellipse(400,150,50,100,0,0,2*Math.PI),e.stroke(),e.beginPath(),e.ellipse(550,150,50,100,Math.PI/2,0,2*Math.PI),e.fill()}}),(o,e)=>(r(),d("div",null,g))}},x=h(v,[["__scopeId","data-v-0d5d66a8"]]),b=i("",8),m={class:"details custom-block"},C=s("summary",null,[s("code",null,"getContext(contextType, contextAttributes)"),l("\u53EF\u80FD\u7684\u63A5\u6536\u53C2\u6570")],-1),f=i("",1),A=s("blockquote",null,null,-1),k=s("p",null,"(1)\u3001alpha \u5B83\u7684\u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E3A false, \u6D4F\u89C8\u5668\u5C06\u8BA4 Canvas \u80CC\u666F\u603B\u662F\u4E0D\u900F\u660E\u7684\uFF0C\u8FD9\u6837\u53EF\u4EE5\u505A\u5230\u4E00\u4E9B\u6027\u80FD\u63D0\u6548\u3002",-1),T=s("p",null,[l("(2)\u3001willReadFrequently\uFF0C\u503C\u4E5F\u4E3A Boolean \u7C7B\u578B\uFF0C\u7528\u4E8E\u8868\u660E\u662F\u5426\u8981\u91CD\u590D\u64CD\u4F5C\uFF0C"),s("strong",null,"\u9891\u7E41\u8C03\u7528 getImageData()\u65B9\u6CD5\u65F6\u80FD\u8282\u7701\u5185\u5B58\uFF0C\u4F46\u662F\u4EC5 Gecko \u5185\u6838\u6D4F\u89C8\u5668\u652F\u6301"),l("\u3002")],-1),P=s("p",null,"(3)\u3001storage \u7528\u4E8E\u8868\u660E\u4F7F\u7528\u54EA\u79CD\u65B9\u5F0F\u5B58\u50A8\uFF0C\u9ED8\u8BA4\u503C persisten\uFF0C\u8868\u793A\u6301\u4E45\u5316\u5B58\u50A8\u3002",-1),I=s("p",null,"(1)\u3001alpha \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u6307\u793A\u753B\u5E03\u662F\u5426\u5305\u542B alpha \u7F13\u51B2\u533A\u3002 (2)\u3001antialias \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u6307\u793A\u662F\u5426\u5F00\u542F\u6297\u952F\u9F7F\u3002 (3)\u3001depth \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u8868\u793A\u7ED8\u56FE\u7F13\u51B2\u533A\u7684\u6DF1\u5EA6\u7F13\u51B2\u533A\u81F3\u5C11\u4E3A 16 \u4F4D\u3002 (4)\u3001failIfMajorPerformanceCaveat \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u6307\u793A\u5982\u679C\u7CFB\u7EDF\u6027\u80FD\u8F83\u4F4E\uFF0C\u662F\u5426\u521B\u5EFA\u4E0A\u4E0B\u6587\u3002 (5)\u3001powerPreference\uFF1A\u5BF9\u7528\u6237\u4EE3\u7406\u7684\u63D0\u793A\uFF0C\u6307\u793A GPU \u7684\u54EA\u79CD\u914D\u7F6E\u9002\u5408 WebGL \u4E0A\u4E0B\u6587\u3002\u53EF\u80FD\u7684\u503C\u662F\uFF1A default: \u81EA\u52A8\u9009\u62E9\u6A21\u5F0F\uFF0C\u81EA\u52A8\u51B3\u5B9A\u54EA\u79CD GPU \u914D\u7F6E\u6700\u5408\u9002\uFF0C\u4E3A\u9ED8\u8BA4\u503C\u3002 high-performance: \u9AD8\u6027\u80FD\u6A21\u5F0F\uFF0C\u4F18\u5148\u8003\u8651\u6E32\u67D3\u6027\u80FD\u800C\u4E0D\u662F\u529F\u8017\u3002 low-power: \u8282\u80FD\u6A21\u5F0F\uFF0C\u4F18\u5148\u8003\u8651\u8282\u80FD\u800C\u4E0D\u662F\u6E32\u67D3\u6027\u80FD\u3002 (6)\u3001premultipliedAlpha \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u8868\u793A\u9875\u9762\u5408\u6210\u5668\u5C06\u5047\u5B9A\u7ED8\u56FE\u7F13\u51B2\u533A\u5305\u542B\u5177\u6709\u9884\u4E58 alpha \u7684\u989C\u8272\u3002 (7)\u3001preserveDrawingBuffer \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u5982\u679C\u503C\u4E3A true\uFF0C\u5219\u4E0D\u4F1A\u6E05\u9664\u7F13\u51B2\u533A\u5E76\u4FDD\u7559\u5176\u503C\uFF0C\u76F4\u5230\u88AB\u6E05\u9664\u6216\u88AB\u4F7F\u7528\u8005\u8986\u76D6\u3002 (8)\u3001stencil \u503C\u4E3A Boolean \u7C7B\u578B\uFF0C\u8868\u793A\u7ED8\u56FE\u7F13\u51B2\u533A\u5177\u6709\u81F3\u5C11 8 \u4F4D\u7684\u6A21\u677F\u7F13\u51B2\u533A\u3002",-1),E=s("h2",{id:"\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6",tabindex:"-1"},[l("\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6 "),s("a",{class:"header-anchor",href:"#\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","aria-hidden":"true"},"#")],-1),w=s("h2",{id:"_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62",tabindex:"-1"},[l("1. \u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62 "),s("a",{class:"header-anchor",href:"#_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","aria-hidden":"true"},"#")],-1),j={class:"tip custom-block"},S=s("p",{class:"custom-block-title"},"TIP",-1),q=s("code",null,"moveTo(x,y)",-1),B=s("strong",null,"\u521D\u59CB\u4F4D\u7F6E",-1),R=s("code",null,"x",-1),L=s("code",null,"y",-1),M=s("code",null,"lineTo(x,y)",-1),V=s("strong",null,"\u6307\u5B9A\u4F4D\u7F6E",-1),G=s("code",null,"x",-1),N=s("code",null,"y",-1),W=s("code",null,"stroke()",-1),O=i("",3),J={class:"tip custom-block"},Y=s("p",{class:"custom-block-title"},"\u5706",-1),z=s("li",null,[s("p",null,[s("code",null,"arc(x, y, radius, startAngle, endAngle, anticlockwise)"),l("\u3002x \u548C Y \u4E3A\u5706\u5FC3\u7684\u5750\u6807\uFF0Cradius \u4E3A\u534A\u5F84\uFF0CstartAngle \u4E3A\u5706\u5F27\u6216\u5706\u7684\u5F00\u59CB\u4F4D\u7F6E\uFF0CendAngle \u4E3A\u5706\u5F27\u6216\u5706\u7684\u7ED3\u675F\u4F4D\u7F6E\uFF0Canticlockwise \u662F\u7ED8\u5236\u7684\u65B9\u5411\uFF08\u4E0D\u5199\u9ED8\u8BA4\u4E3A false\uFF0C\u4ECE\u987A\u65F6\u9488\u65B9\u5411\uFF09\u3002")])],-1),U=s("strong",null,"arc()\u51FD\u6570\u4E2D\u89D2\u7684\u5355\u4F4D\u662F\u5F27\u5EA6\u800C\u4E0D\u662F\u89D2\u5EA6",-1),X=i("",9),$={class:"tip custom-block"},H=s("p",{class:"custom-block-title"},"TIP",-1),K=s("li",null,[s("code",null,"lineWidth"),l(" \u8BBE\u7F6E\u5F53\u524D\u7ED8\u7EBF\u7684\u7C97\u7EC6\u3002\u5C5E\u6027\u503C\u5FC5\u987B\u4E3A\u6B63\u6570\u3002\u9ED8\u8BA4\u503C\u662F 1.0\u3002")],-1),Q=s("li",null,[s("code",null,"lineCap"),l(" \u8BBE\u7F6E\u7EBF\u6BB5\u7AEF\u70B9\u663E\u793A\u7684\u6837\u5B50\u3002\u53EF\u9009\u503C\u4E3A\uFF1Abutt\uFF0Cround \u548C square\u3002\u9ED8\u8BA4\u662F butt\u3002")],-1),Z=s("li",null,[s("code",null,"lineJoin"),l(" \u8BE5\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u4E24\u7EBF\u6BB5\u8FDE\u63A5\u5904\u6240\u663E\u793A\u7684\u6837\u5B50\u3002\u53EF\u9009\u503C\u4E3A\uFF1Around, bevel \u548C miter\u3002\u9ED8\u8BA4\u662F miter\u3002")],-1),ss=s("li",null,[s("code",null,"miterLimit"),l(" \u9650\u5236\u5F53\u4E24\u6761\u7EBF\u76F8\u4EA4\u65F6\u4EA4\u63A5\u5904\u6700\u5927\u957F\u5EA6\uFF1B\u6240\u8C13\u4EA4\u63A5\u5904\u957F\u5EA6\uFF08\u659C\u63A5\u957F\u5EA6\uFF09\u662F\u6307\u7EBF\u6761\u4EA4\u63A5\u5904\u5185\u89D2\u9876\u70B9\u5230\u5916\u89D2\u9876\u70B9\u7684\u957F\u5EA6\u3002 \u7EBF\u6BB5\u4E4B\u95F4\u5939\u89D2\u6BD4\u8F83\u5927\u65F6\uFF0C\u4EA4\u70B9\u4E0D\u4F1A\u592A\u8FDC\uFF0C\u4F46\u968F\u7740\u5939\u89D2\u53D8\u5C0F\uFF0C\u4EA4\u70B9\u8DDD\u79BB\u4F1A\u5448\u6307\u6570\u7EA7\u589E\u5927\u3002 \u5982\u679C\u4EA4\u70B9\u8DDD\u79BB\u5927\u4E8E miterLimit \u503C\uFF0C\u8FDE\u63A5\u6548\u679C\u4F1A\u53D8\u6210\u4E86 lineJoin = bevel \u7684\u6548\u679C\u3002")],-1),es=s("code",null,"setLineDash",-1),ls=s("li",null,[s("code",null,"getLineDash"),l(" \u5219\u662F\u8FD4\u56DE\u5F53\u524D\u865A\u7EBF\u8BBE\u7F6E\u7684\u6837\u5F0F\uFF0C\u957F\u5EA6\u4E3A\u975E\u8D1F\u5076\u6570\u7684\u6570\u7EC4\u3002")],-1),ts=s("li",null,[s("code",null,"lineDashOffset"),l(" \u8BBE\u7F6E\u865A\u7EBF\u6837\u5F0F\u7684\u8D77\u59CB\u504F\u79FB\u91CF\u3002")],-1),os=JSON.parse('{"title":"canvas","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00\u3001\u57FA\u7840\u77E5\u8BC6\uFF08\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684)","slug":"\u4E00\u3001\u57FA\u7840\u77E5\u8BC6-\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684","link":"#\u4E00\u3001\u57FA\u7840\u77E5\u8BC6-\u8BE6\u7EC6\u7248\u672C\u770B\u5927\u795E\u7684","children":[]},{"level":2,"title":"1. \u57FA\u7840\u77E5\u8BC6(https://juejin.cn/post/7161696893695688740)","slug":"_1-\u57FA\u7840\u77E5\u8BC6-https-juejin-cn-post-7161696893695688740","link":"#_1-\u57FA\u7840\u77E5\u8BC6-https-juejin-cn-post-7161696893695688740","children":[]},{"level":2,"title":"\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","slug":"\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","link":"#\u4E8C\u3001\u7ED8\u5236\u5F62\u72B6","children":[]},{"level":2,"title":"1. \u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","slug":"_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","link":"#_1-\u7ED8\u5236\u76F4\u7EBF\u548C\u4E09\u89D2\u5F62","children":[]},{"level":2,"title":"2. \u77E9\u5F62","slug":"_2-\u77E9\u5F62","link":"#_2-\u77E9\u5F62","children":[]},{"level":2,"title":"3. \u5706\u5F27\u548C\u5706","slug":"_3-\u5706\u5F27\u548C\u5706","link":"#_3-\u5706\u5F27\u548C\u5706","children":[]},{"level":2,"title":"4. \u5F00\u542F\u8DEF\u5F84\uFF08beginPath\uFF09\uFF0C\u95ED\u5408\u8DEF\u5F84\uFF08closePath()\uFF09","slug":"_4-\u5F00\u542F\u8DEF\u5F84-beginpath-\u95ED\u5408\u8DEF\u5F84-closepath","link":"#_4-\u5F00\u542F\u8DEF\u5F84-beginpath-\u95ED\u5408\u8DEF\u5F84-closepath","children":[]},{"level":2,"title":"5. fill","slug":"_5-fill","link":"#_5-fill","children":[]},{"level":2,"title":"6. \u8D1D\u585E\u5C14\u66F2\u7EBF","slug":"_6-\u8D1D\u585E\u5C14\u66F2\u7EBF","link":"#_6-\u8D1D\u585E\u5C14\u66F2\u7EBF","children":[]},{"level":2,"title":"\u4E09\u3001 \u7ED8\u5236\u6837\u5F0F","slug":"\u4E09\u3001-\u7ED8\u5236\u6837\u5F0F","link":"#\u4E09\u3001-\u7ED8\u5236\u6837\u5F0F","children":[]},{"level":2,"title":"1. \u7EBF\u6761\u7684\u6837\u5F0F","slug":"_1-\u7EBF\u6761\u7684\u6837\u5F0F","link":"#_1-\u7EBF\u6761\u7684\u6837\u5F0F","children":[]}],"relativePath":"pages/canvas/index.md"}'),as={name:"pages/canvas/index.md"},cs=Object.assign(as,{setup(a){return(o,e)=>{const c=p("MyText"),n=p("my-text");return r(),d("div",null,[b,s("details",m,[C,t(c,{text:"contextType"}),l(" \u4E3A\u7ED8\u5236\u4E0A\u4E0B\u6587\u7684\u7C7B\u578B\uFF0C\u7C7B\u578B\u53C2\u6570\u6709\uFF1A"),f,t(c,{text:"contextAttributes"}),l(" \u4E3A\u7ED8\u5236\u4E0A\u4E0B\u6587\u7684\u5C5E\u6027\uFF0C\u8FD9\u4E9B\u5C5E\u6027\u76F8\u5BF9\u6BD4\u8F83\u591A"),A,t(c,{text:"2D \u7C7B\u578B\u7684\u53C2\u6570\u6709\uFF1A"}),k,T,P,t(c,{text:"3D \u7C7B\u578B\u7684\u53C2\u6570\u6709\uFF1A"}),I]),E,t(x),w,s("div",j,[S,s("ol",null,[s("li",null,[q,l(": "),t(n,{text:" \u8BBE\u7F6E\u521D\u59CB\u4F4D\u7F6E"}),l("\uFF0C\u53C2\u6570\u4E3A"),B,R,l("\u548C"),L,l("\u7684\u5750\u6807\u70B9")]),s("li",null,[M,l(": "),t(n,{text:" \u7ED8\u5236\u4E00\u6761\u4ECE\u521D\u59CB\u4F4D\u7F6E\u5230\u6307\u5B9A\u4F4D\u7F6E\u7684\u76F4\u7EBF"}),l("\uFF0C\u53C2\u6570\u4E3A"),V,G,l("\u548C"),N,l("\u7684\u5750\u6807\u70B9")]),s("li",null,[W,l(": "),t(n,{text:" \u901A\u8FC7\u7EBF\u6761\u6765\u7ED8\u5236\u56FE\u5F62\u8F6E\u5ED3"})])])]),O,s("div",J,[Y,s("ol",null,[z,s("li",null,[s("p",null,[l("\u5728\u753B\u5F27\u7684\u65F6\u5019\uFF0C"),U,l("\u3002\u89D2\u5EA6\u6362\u7B97\u4E3A\u5F27\u5EA6\u7684\u8868\u8FBE\u5F0F\u4E3A\uFF1A"),t(n,{text:"\u5F27\u5EA6=(Math.PI/180)*\u89D2\u5EA6\u3002"})])])])]),X,s("div",$,[H,s("ol",null,[K,Q,Z,ss,s("li",null,[es,l(" \u53EF\u4EE5\u8BBE\u7F6E\u5F53\u524D\u865A\u7EBF\u6837\u5F0F\u3002"),t(n,{text:"\u8BBE\u7F6E\u5947\u6570\uFF0CsetLineDash \u4F1A\u590D\u5236\u4E00\u4EFD\u6570\u7EC4\u8865\u5168\u4E3A\u5076\u6570"})]),ls,ts])])])}}});export{os as __pageData,cs as default};
diff --git a/assets/pages_css_cssDemo.md.f7b7a8e7.js b/assets/pages_css_cssDemo.md.40e297c4.js
similarity index 91%
rename from assets/pages_css_cssDemo.md.f7b7a8e7.js
rename to assets/pages_css_cssDemo.md.40e297c4.js
index 91d9286..a83adb7 100644
--- a/assets/pages_css_cssDemo.md.f7b7a8e7.js
+++ b/assets/pages_css_cssDemo.md.40e297c4.js
@@ -1,7 +1,7 @@
-import{_ as i,o as n,c as l,F as C,p as d,d as r,b as e,i as a,g as t,a as p}from"./app.cac277bf.js";const y={},_=s=>(d("data-v-da6cfc98"),s=s(),r(),s),h=_(()=>e("div",null,[a(" 1. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u4E09\u89D2\u5F62 "),e("div",{class:"bg-triangles"})],-1)),D=_(()=>e("div",null,[a(" 2. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u5185\u5207\u56DB\u8FB9\u5F62 "),e("div",{class:"notching"})],-1)),v=_(()=>e("div",null,[a(" 3. repeating-linear-gradient \u753B\u8FDB\u5EA6\u6761 "),e("div",{class:"process"})],-1));function A(s,c){return n(),l(C,null,[h,D,v],64)}const F=i(y,[["render",A],["__scopeId","data-v-da6cfc98"]]);const f={},g=s=>(d("data-v-182aa5f5"),s=s(),r(),s),b=g(()=>e("div",{class:"eliminate-jaggies"},null,-1)),m=g(()=>e("div",{class:"coupon"},"99",-1)),k=g(()=>e("div",{class:"wave"},"99",-1));function x(s,c,u,R,j,Y){return n(),l(C,null,[a(" 1. \u5728\u8854\u63A5\u5904\uFF0C\u9002\u5F53\u7559\u51FA\u4E00\u4E9B\u6E10\u53D8\u7A7A\u95F4\uFF0C\u6D88\u9664\u952F\u9F7F "),b,a(" 2. \u5B9E\u73B0\u4F18\u60E0\u5238 "),m,k],64)}const S=i(f,[["render",x],["__scopeId","data-v-182aa5f5"]]);const T={},o=s=>(d("data-v-f84ff072"),s=s(),r(),s),$=o(()=>e("div",{class:"ranbow"},null,-1)),I=o(()=>e("div",{class:"bar"},null,-1)),N=o(()=>e("div",{class:"poster"},[e("div",{class:"poster-one"}),e("div",{class:"poster-two"})],-1)),V=o(()=>e("div",{class:"repeating-conic-gradient"},null,-1));function w(s,c){return n(),l("div",null,[a(" 1. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0\u8272\u76F8\u73AF "),$,a(" 2. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0 "),I,a(" 3. \u89D2\u5411\u6E10\u53D8\u914D\u5408background-size\u5B9E\u73B0\u8D34\u56FE "),N,a(" 4. \u91CD\u590D\u89D2\u5411\u6E10\u53D8 repeating-conic-gradient "),V])}const B=i(T,[["render",w],["__scopeId","data-v-f84ff072"]]),P=p('

css \u6E10\u53D8\u51FD\u6570\u7528\u4E8E\u521B\u5EFA\u4E00\u4E2A\u8868\u793A\u4E24\u79CD\u6216\u591A\u79CD\u989C\u8272\u7EBF\u6027\u6E10\u53D8\u7684\u56FE\u7247\u3002\u5176\u7ED3\u679C\u5C5E\u4E8E<gradient>\u6570\u636E\u7C7B\u578B\uFF0C\u662F\u4E00\u79CD\u7279\u522B\u7684<image>\u6570\u636E\u7C7B\u578B\u3002

1. linear-gradient \u7EBF\u6027\u6E10\u53D8

linear-gradient(\u89D2\u5EA6\uFF0C\u989C\u8272 \u5360\u6BD4\uFF0C\u989C\u8272 \u5360\u6BD4\uFF0C)

  1. \u89D2\u5EA6\uFF1Ato top(0deg)\uFF0C\u4ECE\u4E0B\u5F80\u4E0A\uFF0C\u5982\u679C\u662F45deg\uFF0C\u60F3\u8C61\u4E3A\u5728 Y \u8F74\u4E0A\u4E0B\u5404\u6709\u4E00\u4E2A\u70B9\uFF0C\u5728 45deg \u65F6\uFF0CY \u8F74\u4E0A\u65B9\u7684\u70B9\u5E26\u7740 0deg \u65F6\u90A3\u4E2A\u80CC\u666F\u8272\u7ED5 Y \u8F74 \u987A\u65F6\u9488\u65CB\u8F6C\u4E86 45deg\uFF0C\u65CB\u8F6C\u89D2\u5EA6\u4E3A0deg\u4E0E Y \u8F74\u7684\u7684\u89D2\u5EA6\uFF08\u81EA\u5DF1\u7406\u89E3\uFF09
  2. \u6E10\u53D8\u5230\u7684\u8303\u56F4\uFF1Alinear-gradient()\u5982\u679C\u6240\u6709\u70B9\u548C\u957F\u5EA6\u90FD\u4F7F\u7528\u56FA\u5B9A\u5355\u4F4D\uFF08\u800C\u4E0D\u662F\u76F8\u5BF9\u4E8E background-size \u7684\u503C\u6307\u5B9A\u7684\u767E\u5206\u6BD4\u6216\u5173\u952E\u5B57\uFF09\uFF0C\u5219\u6E10\u53D8\u80CC\u666F\u4E0D\u53D7 background-size \u7684\u5F71\u54CD;
  3. \u6E10\u53D8\u4F4D\u7F6E\uFF1A background-position\u53EF\u4EE5\u5728\u91CD\u590D\u65F6\u5B9A\u4E49\u6BCF\u4E2A\u6E10\u53D8\u7684\u4F4D\u7F6E;
  4. \u6E10\u53D8\u7684\u989C\u8272\u53EF\u4EE5\u662F\u900F\u660E\u8272\uFF1B
  5. \u6E10\u53D8\u53EF\u4EE5\u662F\u4ECE\u4E00\u79CD\u989C\u8272\u76F4\u63A5\u5230\u53E6\u5916\u4E00\u79CD\u989C\u8272\uFF0C\u4E0D\u9700\u8981\u6709\u8FC7\u6E21\u72B6\u6001\uFF1B
  6. \u6E10\u53D8\u662F\u53EF\u4EE5\u53E0\u52A0\u591A\u5C42\u7684\uFF1B
  7. \u5229\u7528 repeating-linear-gradient \u8282\u7701\u4EE3\u7801\uFF0C\u5B9E\u73B0\u7247\u6BB5\u7684\u91CD\u590D\u3002
',3),z=p(`

2. radial-gradient \u5F84\u5411\u6E10\u53D8

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient

TIP

  1. \u8BED\u6CD5
js
/* \u5728\u5BB9\u5668\u4E2D\u5FC3\u7684\u6E10\u53D8\uFF0C\u4ECE\u7EA2\u8272\u5F00\u59CB\uFF0C\u53D8\u6210\u84DD\u8272\uFF0C\u6700\u540E\u53D8\u6210\u7EFF\u8272 */
+import{_ as i,o as n,c as l,F as C,p as d,d as r,b as e,j as a,g as t,a as p}from"./app.88185e12.js";const y={},_=s=>(d("data-v-1832088a"),s=s(),r(),s),h=_(()=>e("div",null,[a(" 1. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u4E09\u89D2\u5F62 "),e("div",{class:"bg-triangles"})],-1)),D=_(()=>e("div",null,[a(" 2. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u5185\u5207\u56DB\u8FB9\u5F62 "),e("div",{class:"notching"})],-1)),v=_(()=>e("div",null,[a(" 3. repeating-linear-gradient \u753B\u8FDB\u5EA6\u6761 "),e("div",{class:"process"})],-1));function A(s,c){return n(),l(C,null,[h,D,v],64)}const F=i(y,[["render",A],["__scopeId","data-v-1832088a"]]);const b={},g=s=>(d("data-v-182aa5f5"),s=s(),r(),s),m=g(()=>e("div",{class:"eliminate-jaggies"},null,-1)),f=g(()=>e("div",{class:"coupon"},"99",-1)),k=g(()=>e("div",{class:"wave"},"99",-1));function x(s,c,u,E,R,Y){return n(),l(C,null,[a(" 1. \u5728\u8854\u63A5\u5904\uFF0C\u9002\u5F53\u7559\u51FA\u4E00\u4E9B\u6E10\u53D8\u7A7A\u95F4\uFF0C\u6D88\u9664\u952F\u9F7F "),m,a(" 2. \u5B9E\u73B0\u4F18\u60E0\u5238 "),f,k],64)}const S=i(b,[["render",x],["__scopeId","data-v-182aa5f5"]]);const T={},o=s=>(d("data-v-211ecb9e"),s=s(),r(),s),$=o(()=>e("div",{class:"ranbow"},null,-1)),I=o(()=>e("div",{class:"bar"},null,-1)),N=o(()=>e("div",{class:"poster"},[e("div",{class:"poster-one"}),e("div",{class:"poster-two"})],-1)),V=o(()=>e("div",{class:"repeating-conic-gradient"},null,-1));function w(s,c){return n(),l("div",null,[a(" 1. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0\u8272\u76F8\u73AF "),$,a(" 2. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0 "),I,a(" 3. \u89D2\u5411\u6E10\u53D8\u914D\u5408background-size\u5B9E\u73B0\u8D34\u56FE "),N,a(" 4. \u91CD\u590D\u89D2\u5411\u6E10\u53D8 repeating-conic-gradient "),V])}const B=i(T,[["render",w],["__scopeId","data-v-211ecb9e"]]),P=p('

css \u6E10\u53D8\u51FD\u6570\u7528\u4E8E\u521B\u5EFA\u4E00\u4E2A\u8868\u793A\u4E24\u79CD\u6216\u591A\u79CD\u989C\u8272\u7EBF\u6027\u6E10\u53D8\u7684\u56FE\u7247\u3002\u5176\u7ED3\u679C\u5C5E\u4E8E<gradient>\u6570\u636E\u7C7B\u578B\uFF0C\u662F\u4E00\u79CD\u7279\u522B\u7684<image>\u6570\u636E\u7C7B\u578B\u3002

1. linear-gradient \u7EBF\u6027\u6E10\u53D8

linear-gradient(\u89D2\u5EA6\uFF0C\u989C\u8272 \u5360\u6BD4\uFF0C\u989C\u8272 \u5360\u6BD4\uFF0C)

  1. \u89D2\u5EA6\uFF1Ato top(0deg)\uFF0C\u4ECE\u4E0B\u5F80\u4E0A\uFF0C\u5982\u679C\u662F45deg\uFF0C\u60F3\u8C61\u4E3A\u5728 Y \u8F74\u4E0A\u4E0B\u5404\u6709\u4E00\u4E2A\u70B9\uFF0C\u5728 45deg \u65F6\uFF0CY \u8F74\u4E0A\u65B9\u7684\u70B9\u5E26\u7740 0deg \u65F6\u90A3\u4E2A\u80CC\u666F\u8272\u7ED5 Y \u8F74 \u987A\u65F6\u9488\u65CB\u8F6C\u4E86 45deg\uFF0C\u65CB\u8F6C\u89D2\u5EA6\u4E3A0deg\u4E0E Y \u8F74\u7684\u7684\u89D2\u5EA6\uFF08\u81EA\u5DF1\u7406\u89E3\uFF09
  2. \u6E10\u53D8\u5230\u7684\u8303\u56F4\uFF1Alinear-gradient()\u5982\u679C\u6240\u6709\u70B9\u548C\u957F\u5EA6\u90FD\u4F7F\u7528\u56FA\u5B9A\u5355\u4F4D\uFF08\u800C\u4E0D\u662F\u76F8\u5BF9\u4E8E background-size \u7684\u503C\u6307\u5B9A\u7684\u767E\u5206\u6BD4\u6216\u5173\u952E\u5B57\uFF09\uFF0C\u5219\u6E10\u53D8\u80CC\u666F\u4E0D\u53D7 background-size \u7684\u5F71\u54CD;
  3. \u6E10\u53D8\u4F4D\u7F6E\uFF1A background-position\u53EF\u4EE5\u5728\u91CD\u590D\u65F6\u5B9A\u4E49\u6BCF\u4E2A\u6E10\u53D8\u7684\u4F4D\u7F6E;
  4. \u6E10\u53D8\u7684\u989C\u8272\u53EF\u4EE5\u662F\u900F\u660E\u8272\uFF1B
  5. \u6E10\u53D8\u53EF\u4EE5\u662F\u4ECE\u4E00\u79CD\u989C\u8272\u76F4\u63A5\u5230\u53E6\u5916\u4E00\u79CD\u989C\u8272\uFF0C\u4E0D\u9700\u8981\u6709\u8FC7\u6E21\u72B6\u6001\uFF1B
  6. \u6E10\u53D8\u662F\u53EF\u4EE5\u53E0\u52A0\u591A\u5C42\u7684\uFF1B
  7. \u5229\u7528 repeating-linear-gradient \u8282\u7701\u4EE3\u7801\uFF0C\u5B9E\u73B0\u7247\u6BB5\u7684\u91CD\u590D\u3002
',3),z=p(`

2. radial-gradient \u5F84\u5411\u6E10\u53D8

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient

TIP

  1. \u8BED\u6CD5
js
/* \u5728\u5BB9\u5668\u4E2D\u5FC3\u7684\u6E10\u53D8\uFF0C\u4ECE\u7EA2\u8272\u5F00\u59CB\uFF0C\u53D8\u6210\u84DD\u8272\uFF0C\u6700\u540E\u53D8\u6210\u7EFF\u8272 */
 radial-gradient(circle at center, red 0, blue, green 100%)
 
  1. drop-shadow(\u504F\u79FB\u8DDD\u79BB\uFF0C\u9634\u5F71\u7684\u6A21\u7CCA\u534A\u5F84\uFF0C\u9634\u5F71\u7684\u6269\u5C55\u534A\u5F84\uFF0C\u989C\u8272)
css
filter: drop-shadow(-7px 4px 3px #333);
 
`,3),G=p(`

3. conic-gradient\u89D2\u5411\u6E10\u53D8

\u6CE8\u610F\u70B9

  1. \u8D77\u59CB\u70B9\u662F\u56FE\u5F62\u4E2D\u5FC3\uFF1B
  2. \u9ED8\u8BA4\u6E10\u53D8\u89D2\u5EA6 0deg \u662F\u4ECE\u4E0A\u65B9\u5782\u76F4\u4E8E\u5706\u5FC3\u7684\uFF1B
  3. \u6E10\u53D8\u65B9\u5411\u4EE5\u987A\u65F6\u9488\u65B9\u5411\u7ED5\u4E2D\u5FC3\u5B9E\u73B0\u3002
  4. \u6539\u53D8\u8D77\u59CB\u70B9\u548C\u6E10\u53D8\u89D2\u5EA6\uFF1A background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen);\uFF0C\u6539\u53D8\u5706\u5FC3\u4E3A50px 50px\uFF0C\u89D2\u5EA6\u4E3A 270deg
  5. \u5148\u5B9A\u4E49\u7684\u989C\u8272\u5C42\u53E0\u5728\u540E\u5B9A\u4E49\u7684\u989C\u8272\u4E0A
  • 0 \uFF5E 30% \u7684\u533A\u95F4\u4F7F\u7528 red
  • 0 \uFF5E 60% \u7684\u533A\u95F4\u4F7F\u7528 green
  • 0 \uFF5E 100% \u7684\u533A\u95F4\u4F7F\u7528 blue
  • \u8FD9\u91CC\u4E5F\u53EF\u4EE5\u4F7F\u7528\u89D2\u5EA6
css
.demo {
   background: conic-gradient(red 0 30%, green 0 60%, blue 0 100%);
 }
-
hsl() \u8272\u76F8(h)\uFF0C\u9971\u548C\u5EA6(s)\uFF0C\u4EAE\u5EA6(l)
  1. \u8272\u76F8(h)\uFF1A\u5C31\u662F\u989C\u8272
  2. \u9971\u548C\u5EA6(s)\uFF1A\u6307\u8272\u5F69\u7684\u7EAF\u5EA6\uFF0C\u8D8A\u9AD8\u8272\u5F69\u8D8A\u7EAF\uFF0C\u8D8A\u4F4E\u989C\u8272\u53D8\u7070\uFF0C\u53D6\u503C 0-100%
  3. \u660E\u5EA6(v)\uFF0C\u4EAE\u5EA6(l)\uFF1A\u53D6\u503C 0-100%
`,3),L=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. linear-gradient \u7EBF\u6027\u6E10\u53D8","slug":"_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","link":"#_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","children":[]},{"level":2,"title":"2. radial-gradient \u5F84\u5411\u6E10\u53D8","slug":"_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","link":"#_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","children":[]},{"level":2,"title":"3. conic-gradient\u89D2\u5411\u6E10\u53D8","slug":"_3-conic-gradient\u89D2\u5411\u6E10\u53D8","link":"#_3-conic-gradient\u89D2\u5411\u6E10\u53D8","children":[]}],"relativePath":"pages/css/cssDemo.md"}'),E={name:"pages/css/cssDemo.md"},O=Object.assign(E,{setup(s){return(c,u)=>(n(),l("div",null,[P,t(F),z,t(S),G,t(B)]))}});export{L as __pageData,O as default}; +
hsl() \u8272\u76F8(h)\uFF0C\u9971\u548C\u5EA6(s)\uFF0C\u4EAE\u5EA6(l)
  1. \u8272\u76F8(h)\uFF1A\u5C31\u662F\u989C\u8272
  2. \u9971\u548C\u5EA6(s)\uFF1A\u6307\u8272\u5F69\u7684\u7EAF\u5EA6\uFF0C\u8D8A\u9AD8\u8272\u5F69\u8D8A\u7EAF\uFF0C\u8D8A\u4F4E\u989C\u8272\u53D8\u7070\uFF0C\u53D6\u503C 0-100%
  3. \u660E\u5EA6(v)\uFF0C\u4EAE\u5EA6(l)\uFF1A\u53D6\u503C 0-100%
`,3),L=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. linear-gradient \u7EBF\u6027\u6E10\u53D8","slug":"_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","link":"#_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","children":[]},{"level":2,"title":"2. radial-gradient \u5F84\u5411\u6E10\u53D8","slug":"_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","link":"#_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","children":[]},{"level":2,"title":"3. conic-gradient\u89D2\u5411\u6E10\u53D8","slug":"_3-conic-gradient\u89D2\u5411\u6E10\u53D8","link":"#_3-conic-gradient\u89D2\u5411\u6E10\u53D8","children":[]}],"relativePath":"pages/css/cssDemo.md"}'),j={name:"pages/css/cssDemo.md"},O=Object.assign(j,{setup(s){return(c,u)=>(n(),l("div",null,[P,t(F),z,t(S),G,t(B)]))}});export{L as __pageData,O as default}; diff --git a/assets/pages_css_cssDemo.md.f7b7a8e7.lean.js b/assets/pages_css_cssDemo.md.40e297c4.lean.js similarity index 68% rename from assets/pages_css_cssDemo.md.f7b7a8e7.lean.js rename to assets/pages_css_cssDemo.md.40e297c4.lean.js index e0f44a8..57cd8e3 100644 --- a/assets/pages_css_cssDemo.md.f7b7a8e7.lean.js +++ b/assets/pages_css_cssDemo.md.40e297c4.lean.js @@ -1 +1 @@ -import{_ as i,o as n,c as l,F as C,p as d,d as r,b as e,i as a,g as t,a as p}from"./app.cac277bf.js";const y={},_=s=>(d("data-v-da6cfc98"),s=s(),r(),s),h=_(()=>e("div",null,[a(" 1. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u4E09\u89D2\u5F62 "),e("div",{class:"bg-triangles"})],-1)),D=_(()=>e("div",null,[a(" 2. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u5185\u5207\u56DB\u8FB9\u5F62 "),e("div",{class:"notching"})],-1)),v=_(()=>e("div",null,[a(" 3. repeating-linear-gradient \u753B\u8FDB\u5EA6\u6761 "),e("div",{class:"process"})],-1));function A(s,c){return n(),l(C,null,[h,D,v],64)}const F=i(y,[["render",A],["__scopeId","data-v-da6cfc98"]]);const f={},g=s=>(d("data-v-182aa5f5"),s=s(),r(),s),b=g(()=>e("div",{class:"eliminate-jaggies"},null,-1)),m=g(()=>e("div",{class:"coupon"},"99",-1)),k=g(()=>e("div",{class:"wave"},"99",-1));function x(s,c,u,R,j,Y){return n(),l(C,null,[a(" 1. \u5728\u8854\u63A5\u5904\uFF0C\u9002\u5F53\u7559\u51FA\u4E00\u4E9B\u6E10\u53D8\u7A7A\u95F4\uFF0C\u6D88\u9664\u952F\u9F7F "),b,a(" 2. \u5B9E\u73B0\u4F18\u60E0\u5238 "),m,k],64)}const S=i(f,[["render",x],["__scopeId","data-v-182aa5f5"]]);const T={},o=s=>(d("data-v-f84ff072"),s=s(),r(),s),$=o(()=>e("div",{class:"ranbow"},null,-1)),I=o(()=>e("div",{class:"bar"},null,-1)),N=o(()=>e("div",{class:"poster"},[e("div",{class:"poster-one"}),e("div",{class:"poster-two"})],-1)),V=o(()=>e("div",{class:"repeating-conic-gradient"},null,-1));function w(s,c){return n(),l("div",null,[a(" 1. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0\u8272\u76F8\u73AF "),$,a(" 2. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0 "),I,a(" 3. \u89D2\u5411\u6E10\u53D8\u914D\u5408background-size\u5B9E\u73B0\u8D34\u56FE "),N,a(" 4. \u91CD\u590D\u89D2\u5411\u6E10\u53D8 repeating-conic-gradient "),V])}const B=i(T,[["render",w],["__scopeId","data-v-f84ff072"]]),P=p("",3),z=p("",3),G=p("",3),L=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. linear-gradient \u7EBF\u6027\u6E10\u53D8","slug":"_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","link":"#_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","children":[]},{"level":2,"title":"2. radial-gradient \u5F84\u5411\u6E10\u53D8","slug":"_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","link":"#_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","children":[]},{"level":2,"title":"3. conic-gradient\u89D2\u5411\u6E10\u53D8","slug":"_3-conic-gradient\u89D2\u5411\u6E10\u53D8","link":"#_3-conic-gradient\u89D2\u5411\u6E10\u53D8","children":[]}],"relativePath":"pages/css/cssDemo.md"}'),E={name:"pages/css/cssDemo.md"},O=Object.assign(E,{setup(s){return(c,u)=>(n(),l("div",null,[P,t(F),z,t(S),G,t(B)]))}});export{L as __pageData,O as default}; +import{_ as i,o as n,c as l,F as C,p as d,d as r,b as e,j as a,g as t,a as p}from"./app.88185e12.js";const y={},_=s=>(d("data-v-1832088a"),s=s(),r(),s),h=_(()=>e("div",null,[a(" 1. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u4E09\u89D2\u5F62 "),e("div",{class:"bg-triangles"})],-1)),D=_(()=>e("div",null,[a(" 2. \u80CC\u666F\u8272\u6E10\u53D8\u753B\u5185\u5207\u56DB\u8FB9\u5F62 "),e("div",{class:"notching"})],-1)),v=_(()=>e("div",null,[a(" 3. repeating-linear-gradient \u753B\u8FDB\u5EA6\u6761 "),e("div",{class:"process"})],-1));function A(s,c){return n(),l(C,null,[h,D,v],64)}const F=i(y,[["render",A],["__scopeId","data-v-1832088a"]]);const b={},g=s=>(d("data-v-182aa5f5"),s=s(),r(),s),m=g(()=>e("div",{class:"eliminate-jaggies"},null,-1)),f=g(()=>e("div",{class:"coupon"},"99",-1)),k=g(()=>e("div",{class:"wave"},"99",-1));function x(s,c,u,E,R,Y){return n(),l(C,null,[a(" 1. \u5728\u8854\u63A5\u5904\uFF0C\u9002\u5F53\u7559\u51FA\u4E00\u4E9B\u6E10\u53D8\u7A7A\u95F4\uFF0C\u6D88\u9664\u952F\u9F7F "),m,a(" 2. \u5B9E\u73B0\u4F18\u60E0\u5238 "),f,k],64)}const S=i(b,[["render",x],["__scopeId","data-v-182aa5f5"]]);const T={},o=s=>(d("data-v-211ecb9e"),s=s(),r(),s),$=o(()=>e("div",{class:"ranbow"},null,-1)),I=o(()=>e("div",{class:"bar"},null,-1)),N=o(()=>e("div",{class:"poster"},[e("div",{class:"poster-one"}),e("div",{class:"poster-two"})],-1)),V=o(()=>e("div",{class:"repeating-conic-gradient"},null,-1));function w(s,c){return n(),l("div",null,[a(" 1. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0\u8272\u76F8\u73AF "),$,a(" 2. \u89D2\u5411\u6E10\u53D8\u5B9E\u73B0 "),I,a(" 3. \u89D2\u5411\u6E10\u53D8\u914D\u5408background-size\u5B9E\u73B0\u8D34\u56FE "),N,a(" 4. \u91CD\u590D\u89D2\u5411\u6E10\u53D8 repeating-conic-gradient "),V])}const B=i(T,[["render",w],["__scopeId","data-v-211ecb9e"]]),P=p("",3),z=p("",3),G=p("",3),L=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. linear-gradient \u7EBF\u6027\u6E10\u53D8","slug":"_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","link":"#_1-linear-gradient-\u7EBF\u6027\u6E10\u53D8","children":[]},{"level":2,"title":"2. radial-gradient \u5F84\u5411\u6E10\u53D8","slug":"_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","link":"#_2-radial-gradient-\u5F84\u5411\u6E10\u53D8","children":[]},{"level":2,"title":"3. conic-gradient\u89D2\u5411\u6E10\u53D8","slug":"_3-conic-gradient\u89D2\u5411\u6E10\u53D8","link":"#_3-conic-gradient\u89D2\u5411\u6E10\u53D8","children":[]}],"relativePath":"pages/css/cssDemo.md"}'),j={name:"pages/css/cssDemo.md"},O=Object.assign(j,{setup(s){return(c,u)=>(n(),l("div",null,[P,t(F),z,t(S),G,t(B)]))}});export{L as __pageData,O as default}; diff --git a/assets/pages_git_githubQuestion_index.md.8f146a86.js b/assets/pages_git_githubQuestion_index.md.a299864d.js similarity index 99% rename from assets/pages_git_githubQuestion_index.md.8f146a86.js rename to assets/pages_git_githubQuestion_index.md.a299864d.js index 5f77d35..585af05 100644 --- a/assets/pages_git_githubQuestion_index.md.8f146a86.js +++ b/assets/pages_git_githubQuestion_index.md.a299864d.js @@ -1,4 +1,4 @@ -import{_ as s,o as e,c as o,a as t}from"./app.cac277bf.js";const b=JSON.parse('{"title":"gitHub \u9047\u5230\u7684\u95EE\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E38\u7528\u6307\u4EE4","slug":"_1-\u5E38\u7528\u6307\u4EE4","link":"#_1-\u5E38\u7528\u6307\u4EE4","children":[]},{"level":2,"title":"2.\u51FA\u73B0git@github.com: Permission denied (publickey)\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","slug":"_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","link":"#_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","children":[]},{"level":2,"title":"3. git push \u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801\uFF08\u4E0D\u4F7F\u7528 https \u4E0A\u4F20\uFF09","slug":"_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","link":"#_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","children":[]},{"level":2,"title":"4. \u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04 gitignore \u6587\u4EF6\uFF0C\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","slug":"_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","link":"#_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","children":[]}],"relativePath":"pages/git/githubQuestion/index.md"}'),n={name:"pages/git/githubQuestion/index.md"},a=t(`

gitHub \u9047\u5230\u7684\u95EE\u9898

1. \u5E38\u7528\u6307\u4EE4

1.1 ssh -T git@github.com \u9A8C\u8BC1\u662F\u5426\u4E0E gitHub \u7684\u8FDE\u63A5\uFF0C \u8FDE\u63A5\u6210\u529F\uFF1A Hi yourName! You've successfully authenticated, but GitHub does not provide shell access.

1.2 ssh-keygen \u751F\u6210 SSH key \u6587\u4EF6\uFF0C\u5982\u679C\u6709 git \u8D26\u53F7\u5360\u4E86 ~/.ssh/id_rsa\u540D\u79F0\uFF0C\u53EF\u4EE5\u81EA\u5DF1\u6539\u6210.ssh/id_rsa.github \u6587\u4EF6\u540D\u79F0

1.3 \u51FA\u73B0 gitHub \u8BF4\u5BC6\u94A5\u6587\u4EF6\u6743\u9650\u4E0D\u5BF9\u95EE\u9898\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 chmod 700 .ssh/id_rsa\u4FEE\u6539\u6743\u9650\uFF0C\u6743\u9650\u503C 700\uFF0C\u9ED8\u8BA4 600

1.4 \u672C\u5730\u5206\u652F

git branch\uFF1A\u67E5\u770B\u6240\u6709\u5206\u652F

git checkout -b main\uFF1A\u521B\u5EFA main \u5206\u652F\u5E76\u5207\u6362\u5230\u8BE5\u5206\u652F

git branch -d test\uFF1A\u5220\u9664 test \u5206\u652F\uFF0C\u5220\u9664\u8BE5\u5206\u652F\u524D\u9700\u8981\u5148\u5207\u6362\u5230\u5176\u4ED6\u5206\u652F

\u6CE8\u610F\uFF1A\u5982\u679C\u5206\u652F\u5305\u542B\u672A\u5408\u5E76\u7684\u66F4\u6539\u548C\u672A\u63A8\u9001\u7684\u63D0\u4EA4\uFF0C\u5219\u8BE5 -d \u6807\u5FD7\u5C06\u4E0D\u5141\u8BB8\u5220\u9664\u672C\u5730\u5206\u652F\u3002\u6B64\u65F6\uFF0C\u5982\u679C\u4F60\u786E\u5B9A\u4E86\u4E0D\u60F3\u8981\u5206\u652F\u7684\u5185\u5BB9\uFF0C\u53EF\u4EE5\u4F7F\u7528 -D \u66FF\u6362 -d \u6765\u5F3A\u5236\u5220\u9664\u6B64\u5206\u652F

1.5 \u8FDC\u7A0B\u5206\u652F

git branch -r\uFF1A\u67E5\u770B\u8FDC\u7A0B\u4E0A\u7684\u6240\u6709\u5206\u652F

git push -u origin test\uFF1A\u5C06\u4EE3\u7801\u63A8\u9001\u5230\u8FDC\u7A0B test \u5206\u652F\uFF0C\u6CA1\u6709\u7684\u8BDD\u5C31\u4F1A\u521B\u5EFA test \u5206\u652F

git push <remote_name> -d <remote_branch>\uFF1A\u5220\u9664\u8FDC\u7A0B\u5206\u652F\uFF0Cgit push origin -d test\uFF1A\u5220\u9664\u8FDC\u7A0B test \u5206\u652F

git remote -v: \u4F5C\u7528\u662F\u663E\u793A\u6240\u6709\u8FDC\u7A0B\u4ED3\u5E93

git remote show <remote_name>\uFF1A\u67E5\u770B\u8FDC\u7A0B\u5206\u652F\u548C\u672C\u5730\u7684\u5BF9\u5E94\u5173\u7CFB git remote show origin

git remote add [name] [url]: \u4F5C\u7528\u662F\u6DFB\u52A0\u8FDC\u7A0B\u7248\u672C\u5E93,name \u662F\u81EA\u5DF1\u53D6\u7684\u4ED3\u5E93\u7684\u540D\u5B57 url \u662F\u5730\u5740,\u65B0\u5EFA\u4ED3\u5E93\u4E0B\u9762\u63D0\u793A\u90FD\u6709\uFF0C\u76F4\u63A5\u590D\u5236\u5C31\u884C

git remote rm name: \u5220\u9664\u8FDC\u7A0B\u4ED3\u5E93

git remote rename old_name new_name: \u4FEE\u6539\u4ED3\u5E93\u540D

2.\u51FA\u73B0git@github.com: Permission denied (publickey)\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5

\u7B2C\u4E00\u6B65\uFF1A\u751F\u6210 SSH key

\u7B2C\u4E8C\u6B65\uFF1A\u8F93\u5165\u547D\u4EE4\uFF1Assh -v git@github.com

\u7B2C\u4E09\u6B65\uFF1A\u8F93\u5165\u547D\u4EE4\uFF1Assh-agent -s

\u7B2C\u56DB\u6B65\uFF1A\u8F93\u5165\u547D\u4EE4\uFF1Assh-add ~/.ssh/id_rsa\uFF0C\u6587\u4EF6\u8DEF\u5F84\u662F~/.ssh/id_rsa\uFF0C\u5982\u679C\u81EA\u5DF1\u751F\u6210\u65F6\u4FDD\u5B58\u7684\u4E3A~/.ssh/id_rsa.github,\u5C31\u6539\u6210\u8FD9\u4E2A

\u7B2C\u4E94\u6B65\uFF1A\u5728 gitHub \u4E0A\u6DFB\u52A0\u4E00\u4E2A SSH key\uFF0C\u6839\u636E\u8DEF\u5F84\u627E\u5230\u4EE5.pub \u7ED3\u5C3E\u7684\u6587\u4EF6\uFF0C\u5C06\u516C\u94A5\u6587\u4EF6\u590D\u5236\u5230 Github \u4E2D

3. git push \u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801\uFF08\u4E0D\u4F7F\u7528 https \u4E0A\u4F20\uFF09

\u7B2C\u4E00\u6B65\uFF1Agit remote -v \u67E5\u770B\u5F53\u524D\u94FE\u63A5\u7684\u8FDC\u7A0B\u4ED3\u5E93\u5730\u5740

js
$ git remote -v
+import{_ as s,o as e,c as o,a as t}from"./app.88185e12.js";const b=JSON.parse('{"title":"gitHub \u9047\u5230\u7684\u95EE\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E38\u7528\u6307\u4EE4","slug":"_1-\u5E38\u7528\u6307\u4EE4","link":"#_1-\u5E38\u7528\u6307\u4EE4","children":[]},{"level":2,"title":"2.\u51FA\u73B0git@github.com: Permission denied (publickey)\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","slug":"_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","link":"#_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","children":[]},{"level":2,"title":"3. git push \u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801\uFF08\u4E0D\u4F7F\u7528 https \u4E0A\u4F20\uFF09","slug":"_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","link":"#_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","children":[]},{"level":2,"title":"4. \u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04 gitignore \u6587\u4EF6\uFF0C\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","slug":"_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","link":"#_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","children":[]}],"relativePath":"pages/git/githubQuestion/index.md"}'),n={name:"pages/git/githubQuestion/index.md"},a=t(`

gitHub \u9047\u5230\u7684\u95EE\u9898

1. \u5E38\u7528\u6307\u4EE4

1.1 ssh -T git@github.com \u9A8C\u8BC1\u662F\u5426\u4E0E gitHub \u7684\u8FDE\u63A5\uFF0C \u8FDE\u63A5\u6210\u529F\uFF1A Hi yourName! You've successfully authenticated, but GitHub does not provide shell access.

1.2 ssh-keygen \u751F\u6210 SSH key \u6587\u4EF6\uFF0C\u5982\u679C\u6709 git \u8D26\u53F7\u5360\u4E86 ~/.ssh/id_rsa\u540D\u79F0\uFF0C\u53EF\u4EE5\u81EA\u5DF1\u6539\u6210.ssh/id_rsa.github \u6587\u4EF6\u540D\u79F0

1.3 \u51FA\u73B0 gitHub \u8BF4\u5BC6\u94A5\u6587\u4EF6\u6743\u9650\u4E0D\u5BF9\u95EE\u9898\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 chmod 700 .ssh/id_rsa\u4FEE\u6539\u6743\u9650\uFF0C\u6743\u9650\u503C 700\uFF0C\u9ED8\u8BA4 600

1.4 \u672C\u5730\u5206\u652F

git branch\uFF1A\u67E5\u770B\u6240\u6709\u5206\u652F

git checkout -b main\uFF1A\u521B\u5EFA main \u5206\u652F\u5E76\u5207\u6362\u5230\u8BE5\u5206\u652F

git branch -d test\uFF1A\u5220\u9664 test \u5206\u652F\uFF0C\u5220\u9664\u8BE5\u5206\u652F\u524D\u9700\u8981\u5148\u5207\u6362\u5230\u5176\u4ED6\u5206\u652F

\u6CE8\u610F\uFF1A\u5982\u679C\u5206\u652F\u5305\u542B\u672A\u5408\u5E76\u7684\u66F4\u6539\u548C\u672A\u63A8\u9001\u7684\u63D0\u4EA4\uFF0C\u5219\u8BE5 -d \u6807\u5FD7\u5C06\u4E0D\u5141\u8BB8\u5220\u9664\u672C\u5730\u5206\u652F\u3002\u6B64\u65F6\uFF0C\u5982\u679C\u4F60\u786E\u5B9A\u4E86\u4E0D\u60F3\u8981\u5206\u652F\u7684\u5185\u5BB9\uFF0C\u53EF\u4EE5\u4F7F\u7528 -D \u66FF\u6362 -d \u6765\u5F3A\u5236\u5220\u9664\u6B64\u5206\u652F

1.5 \u8FDC\u7A0B\u5206\u652F

git branch -r\uFF1A\u67E5\u770B\u8FDC\u7A0B\u4E0A\u7684\u6240\u6709\u5206\u652F

git push -u origin test\uFF1A\u5C06\u4EE3\u7801\u63A8\u9001\u5230\u8FDC\u7A0B test \u5206\u652F\uFF0C\u6CA1\u6709\u7684\u8BDD\u5C31\u4F1A\u521B\u5EFA test \u5206\u652F

git push <remote_name> -d <remote_branch>\uFF1A\u5220\u9664\u8FDC\u7A0B\u5206\u652F\uFF0Cgit push origin -d test\uFF1A\u5220\u9664\u8FDC\u7A0B test \u5206\u652F

git remote -v: \u4F5C\u7528\u662F\u663E\u793A\u6240\u6709\u8FDC\u7A0B\u4ED3\u5E93

git remote show <remote_name>\uFF1A\u67E5\u770B\u8FDC\u7A0B\u5206\u652F\u548C\u672C\u5730\u7684\u5BF9\u5E94\u5173\u7CFB git remote show origin

git remote add [name] [url]: \u4F5C\u7528\u662F\u6DFB\u52A0\u8FDC\u7A0B\u7248\u672C\u5E93,name \u662F\u81EA\u5DF1\u53D6\u7684\u4ED3\u5E93\u7684\u540D\u5B57 url \u662F\u5730\u5740,\u65B0\u5EFA\u4ED3\u5E93\u4E0B\u9762\u63D0\u793A\u90FD\u6709\uFF0C\u76F4\u63A5\u590D\u5236\u5C31\u884C

git remote rm name: \u5220\u9664\u8FDC\u7A0B\u4ED3\u5E93

git remote rename old_name new_name: \u4FEE\u6539\u4ED3\u5E93\u540D

2.\u51FA\u73B0git@github.com: Permission denied (publickey)\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5

\u7B2C\u4E00\u6B65\uFF1A\u751F\u6210 SSH key

\u7B2C\u4E8C\u6B65\uFF1A\u8F93\u5165\u547D\u4EE4\uFF1Assh -v git@github.com

\u7B2C\u4E09\u6B65\uFF1A\u8F93\u5165\u547D\u4EE4\uFF1Assh-agent -s

\u7B2C\u56DB\u6B65\uFF1A\u8F93\u5165\u547D\u4EE4\uFF1Assh-add ~/.ssh/id_rsa\uFF0C\u6587\u4EF6\u8DEF\u5F84\u662F~/.ssh/id_rsa\uFF0C\u5982\u679C\u81EA\u5DF1\u751F\u6210\u65F6\u4FDD\u5B58\u7684\u4E3A~/.ssh/id_rsa.github,\u5C31\u6539\u6210\u8FD9\u4E2A

\u7B2C\u4E94\u6B65\uFF1A\u5728 gitHub \u4E0A\u6DFB\u52A0\u4E00\u4E2A SSH key\uFF0C\u6839\u636E\u8DEF\u5F84\u627E\u5230\u4EE5.pub \u7ED3\u5C3E\u7684\u6587\u4EF6\uFF0C\u5C06\u516C\u94A5\u6587\u4EF6\u590D\u5236\u5230 Github \u4E2D

3. git push \u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801\uFF08\u4E0D\u4F7F\u7528 https \u4E0A\u4F20\uFF09

\u7B2C\u4E00\u6B65\uFF1Agit remote -v \u67E5\u770B\u5F53\u524D\u94FE\u63A5\u7684\u8FDC\u7A0B\u4ED3\u5E93\u5730\u5740

js
$ git remote -v
 origin  https://github.com/tianqixin/runoob-git-test (fetch)
 origin  https://github.com/tianqixin/runoob-git-test (push)
 

\u7B2C\u4E8C\u6B65\uFF1Agit remote set-url origin remote's URL \u4FEE\u6539\u5F53\u524D\u94FE\u63A5\u7684\u8FDC\u7A0B\u4ED3\u5E93\u5F62\u5F0F

js
$ git remote set-url origin git@github.com:tianqixin/runoob-git-test.git
diff --git a/assets/pages_git_githubQuestion_index.md.8f146a86.lean.js b/assets/pages_git_githubQuestion_index.md.a299864d.lean.js
similarity index 96%
rename from assets/pages_git_githubQuestion_index.md.8f146a86.lean.js
rename to assets/pages_git_githubQuestion_index.md.a299864d.lean.js
index b82083f..9ff1c9e 100644
--- a/assets/pages_git_githubQuestion_index.md.8f146a86.lean.js
+++ b/assets/pages_git_githubQuestion_index.md.a299864d.lean.js
@@ -1 +1 @@
-import{_ as s,o as e,c as o,a as t}from"./app.cac277bf.js";const b=JSON.parse('{"title":"gitHub \u9047\u5230\u7684\u95EE\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E38\u7528\u6307\u4EE4","slug":"_1-\u5E38\u7528\u6307\u4EE4","link":"#_1-\u5E38\u7528\u6307\u4EE4","children":[]},{"level":2,"title":"2.\u51FA\u73B0git@github.com: Permission denied (publickey)\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","slug":"_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","link":"#_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","children":[]},{"level":2,"title":"3. git push \u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801\uFF08\u4E0D\u4F7F\u7528 https \u4E0A\u4F20\uFF09","slug":"_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","link":"#_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","children":[]},{"level":2,"title":"4. \u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04 gitignore \u6587\u4EF6\uFF0C\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","slug":"_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","link":"#_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","children":[]}],"relativePath":"pages/git/githubQuestion/index.md"}'),n={name:"pages/git/githubQuestion/index.md"},a=t("",33),c=[a];function p(i,l,r,d,g,u){return e(),o("div",null,c)}const y=s(n,[["render",p]]);export{b as __pageData,y as default};
+import{_ as s,o as e,c as o,a as t}from"./app.88185e12.js";const b=JSON.parse('{"title":"gitHub \u9047\u5230\u7684\u95EE\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E38\u7528\u6307\u4EE4","slug":"_1-\u5E38\u7528\u6307\u4EE4","link":"#_1-\u5E38\u7528\u6307\u4EE4","children":[]},{"level":2,"title":"2.\u51FA\u73B0git@github.com: Permission denied (publickey)\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","slug":"_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","link":"#_2-\u51FA\u73B0git-github-com-permission-denied-publickey-\u9519\u8BEF\u65F6\u89E3\u51B3\u529E\u6CD5","children":[]},{"level":2,"title":"3. git push \u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801\uFF08\u4E0D\u4F7F\u7528 https \u4E0A\u4F20\uFF09","slug":"_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","link":"#_3-git-push-\u65F6\u9700\u8981\u8F93\u5165\u8D26\u53F7\u5BC6\u7801-\u4E0D\u4F7F\u7528-https-\u4E0A\u4F20","children":[]},{"level":2,"title":"4. \u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04 gitignore \u6587\u4EF6\uFF0C\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","slug":"_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","link":"#_4-\u4E0A\u4F20\u65F6\u5FD8\u8BB0\u5F04-gitignore-\u6587\u4EF6-\u5DF2\u4E0A\u4F20\u5230\u4ED3\u5E93\u65F6","children":[]}],"relativePath":"pages/git/githubQuestion/index.md"}'),n={name:"pages/git/githubQuestion/index.md"},a=t("",33),c=[a];function p(i,l,r,d,g,u){return e(),o("div",null,c)}const y=s(n,[["render",p]]);export{b as __pageData,y as default};
diff --git a/assets/pages_index_index.md.2158a292.js b/assets/pages_index_index.md.21c95c36.js
similarity index 99%
rename from assets/pages_index_index.md.2158a292.js
rename to assets/pages_index_index.md.21c95c36.js
index 341ba55..5183c5b 100644
--- a/assets/pages_index_index.md.2158a292.js
+++ b/assets/pages_index_index.md.21c95c36.js
@@ -1,4 +1,4 @@
-import{_ as e,o as r,c as t,a}from"./app.cac277bf.js";const g=JSON.parse('{"title":"\u6B22\u8FCE\u6765\u5230\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u4E16\u754C \u{1F44F}","description":"","frontmatter":{},"headers":[{"level":2,"title":"vitePress \u5B98\u7F51","slug":"vitepress-\u5B98\u7F51","link":"#vitepress-\u5B98\u7F51","children":[]},{"level":2,"title":"Emoji \u{1F389}","slug":"emoji-\u{1F389}","link":"#emoji-\u{1F389}","children":[]},{"level":2,"title":"1. \u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6\uFF1A","slug":"_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","link":"#_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","children":[]},{"level":2,"title":"2. vueUse","slug":"_2-vueuse","link":"#_2-vueuse","children":[]},{"level":2,"title":"3. \u7CBE\u8FDB JavaScript \uFF5C \u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417 \uFF1F","slug":"_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","link":"#_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","slug":"_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","link":"#_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","children":[]},{"level":2,"title":"5. \u73E0\u5CF0\uFF1A\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684 Vue.js \u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","slug":"_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","link":"#_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","children":[]},{"level":2,"title":"6. \u7834\u89E3\u524D\u7AEF\u9762\u8BD5\uFF0880% \u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217\uFF09\uFF1A\u4ECE\u95ED\u5305\u8BF4\u8D77","slug":"_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","link":"#_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","children":[]},{"level":2,"title":"7. es5/6/7/...","slug":"_7-es5-6-7","link":"#_7-es5-6-7","children":[]},{"level":2,"title":"8.css","slug":"_8-css","link":"#_8-css","children":[]},{"level":2,"title":"9. ts","slug":"_9-ts","link":"#_9-ts","children":[]},{"level":2,"title":"10. vue2/3","slug":"_10-vue2-3","link":"#_10-vue2-3","children":[]},{"level":2,"title":"11. react","slug":"_11-react","link":"#_11-react","children":[]},{"level":2,"title":"12. node","slug":"_12-node","link":"#_12-node","children":[]},{"level":2,"title":"13. \u6D4F\u89C8\u5668","slug":"_13-\u6D4F\u89C8\u5668","link":"#_13-\u6D4F\u89C8\u5668","children":[]},{"level":2,"title":"14. \u7F51\u7EDC","slug":"_14-\u7F51\u7EDC","link":"#_14-\u7F51\u7EDC","children":[]},{"level":2,"title":"15. \u6027\u80FD\u4F18\u5316","slug":"_15-\u6027\u80FD\u4F18\u5316","link":"#_15-\u6027\u80FD\u4F18\u5316","children":[]},{"level":2,"title":"16. \u5DE5\u7A0B\u5316/\u67B6\u6784/\u8BBE\u8BA1\u6A21\u5F0F","slug":"_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","link":"#_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","children":[]},{"level":2,"title":"17. flutter/rn/Electron","slug":"_17-flutter-rn-electron","link":"#_17-flutter-rn-electron","children":[]},{"level":2,"title":"18. \u9762\u8BD5\u7ECF\u9A8C","slug":"_18-\u9762\u8BD5\u7ECF\u9A8C","link":"#_18-\u9762\u8BD5\u7ECF\u9A8C","children":[]},{"level":2,"title":"19. \u5B89\u5168","slug":"_19-\u5B89\u5168","link":"#_19-\u5B89\u5168","children":[]},{"level":2,"title":"20. \u5F00\u6E90\u9879\u76EE","slug":"_20-\u5F00\u6E90\u9879\u76EE","link":"#_20-\u5F00\u6E90\u9879\u76EE","children":[]},{"level":2,"title":"21. \u90E8\u7F72/\u76D1\u63A7","slug":"_21-\u90E8\u7F72-\u76D1\u63A7","link":"#_21-\u90E8\u7F72-\u76D1\u63A7","children":[]},{"level":2,"title":"22. \u56E2\u961F\u89C4\u5219","slug":"_22-\u56E2\u961F\u89C4\u5219","link":"#_22-\u56E2\u961F\u89C4\u5219","children":[]},{"level":2,"title":"23. \u7B97\u6CD5","slug":"_23-\u7B97\u6CD5","link":"#_23-\u7B97\u6CD5","children":[]},{"level":2,"title":"24. \u6742\u8C08","slug":"_24-\u6742\u8C08","link":"#_24-\u6742\u8C08","children":[]}],"relativePath":"pages/index/index.md"}'),l={name:"pages/index/index.md"},n=a(`

\u6B22\u8FCE\u6765\u5230\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u4E16\u754C \u{1F44F}

vitePress \u5B98\u7F51

Emoji \u{1F389}

1. \u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6\uFF1A

\u6BD4\u5982 vue-virtual-scroller\u3001vue-virtual-scroll-list\u3001react-tiny-virtual-list\u3001react-virtualized \u7B49

vue-virtual-scroller \u7684\u4F7F\u7528

js
// \u5B89\u88C5\u63D2\u4EF6
+import{_ as e,o as r,c as t,a}from"./app.88185e12.js";const g=JSON.parse('{"title":"\u6B22\u8FCE\u6765\u5230\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u4E16\u754C \u{1F44F}","description":"","frontmatter":{},"headers":[{"level":2,"title":"vitePress \u5B98\u7F51","slug":"vitepress-\u5B98\u7F51","link":"#vitepress-\u5B98\u7F51","children":[]},{"level":2,"title":"Emoji \u{1F389}","slug":"emoji-\u{1F389}","link":"#emoji-\u{1F389}","children":[]},{"level":2,"title":"1. \u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6\uFF1A","slug":"_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","link":"#_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","children":[]},{"level":2,"title":"2. vueUse","slug":"_2-vueuse","link":"#_2-vueuse","children":[]},{"level":2,"title":"3. \u7CBE\u8FDB JavaScript \uFF5C \u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417 \uFF1F","slug":"_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","link":"#_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","slug":"_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","link":"#_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","children":[]},{"level":2,"title":"5. \u73E0\u5CF0\uFF1A\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684 Vue.js \u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","slug":"_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","link":"#_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","children":[]},{"level":2,"title":"6. \u7834\u89E3\u524D\u7AEF\u9762\u8BD5\uFF0880% \u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217\uFF09\uFF1A\u4ECE\u95ED\u5305\u8BF4\u8D77","slug":"_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","link":"#_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","children":[]},{"level":2,"title":"7. es5/6/7/...","slug":"_7-es5-6-7","link":"#_7-es5-6-7","children":[]},{"level":2,"title":"8.css","slug":"_8-css","link":"#_8-css","children":[]},{"level":2,"title":"9. ts","slug":"_9-ts","link":"#_9-ts","children":[]},{"level":2,"title":"10. vue2/3","slug":"_10-vue2-3","link":"#_10-vue2-3","children":[]},{"level":2,"title":"11. react","slug":"_11-react","link":"#_11-react","children":[]},{"level":2,"title":"12. node","slug":"_12-node","link":"#_12-node","children":[]},{"level":2,"title":"13. \u6D4F\u89C8\u5668","slug":"_13-\u6D4F\u89C8\u5668","link":"#_13-\u6D4F\u89C8\u5668","children":[]},{"level":2,"title":"14. \u7F51\u7EDC","slug":"_14-\u7F51\u7EDC","link":"#_14-\u7F51\u7EDC","children":[]},{"level":2,"title":"15. \u6027\u80FD\u4F18\u5316","slug":"_15-\u6027\u80FD\u4F18\u5316","link":"#_15-\u6027\u80FD\u4F18\u5316","children":[]},{"level":2,"title":"16. \u5DE5\u7A0B\u5316/\u67B6\u6784/\u8BBE\u8BA1\u6A21\u5F0F","slug":"_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","link":"#_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","children":[]},{"level":2,"title":"17. flutter/rn/Electron","slug":"_17-flutter-rn-electron","link":"#_17-flutter-rn-electron","children":[]},{"level":2,"title":"18. \u9762\u8BD5\u7ECF\u9A8C","slug":"_18-\u9762\u8BD5\u7ECF\u9A8C","link":"#_18-\u9762\u8BD5\u7ECF\u9A8C","children":[]},{"level":2,"title":"19. \u5B89\u5168","slug":"_19-\u5B89\u5168","link":"#_19-\u5B89\u5168","children":[]},{"level":2,"title":"20. \u5F00\u6E90\u9879\u76EE","slug":"_20-\u5F00\u6E90\u9879\u76EE","link":"#_20-\u5F00\u6E90\u9879\u76EE","children":[]},{"level":2,"title":"21. \u90E8\u7F72/\u76D1\u63A7","slug":"_21-\u90E8\u7F72-\u76D1\u63A7","link":"#_21-\u90E8\u7F72-\u76D1\u63A7","children":[]},{"level":2,"title":"22. \u56E2\u961F\u89C4\u5219","slug":"_22-\u56E2\u961F\u89C4\u5219","link":"#_22-\u56E2\u961F\u89C4\u5219","children":[]},{"level":2,"title":"23. \u7B97\u6CD5","slug":"_23-\u7B97\u6CD5","link":"#_23-\u7B97\u6CD5","children":[]},{"level":2,"title":"24. \u6742\u8C08","slug":"_24-\u6742\u8C08","link":"#_24-\u6742\u8C08","children":[]}],"relativePath":"pages/index/index.md"}'),l={name:"pages/index/index.md"},n=a(`

\u6B22\u8FCE\u6765\u5230\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u4E16\u754C \u{1F44F}

vitePress \u5B98\u7F51

Emoji \u{1F389}

1. \u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6\uFF1A

\u6BD4\u5982 vue-virtual-scroller\u3001vue-virtual-scroll-list\u3001react-tiny-virtual-list\u3001react-virtualized \u7B49

vue-virtual-scroller \u7684\u4F7F\u7528

js
// \u5B89\u88C5\u63D2\u4EF6
 npm install vue-virtual-scroller
 
 // main.js
diff --git a/assets/pages_index_index.md.2158a292.lean.js b/assets/pages_index_index.md.21c95c36.lean.js
similarity index 98%
rename from assets/pages_index_index.md.2158a292.lean.js
rename to assets/pages_index_index.md.21c95c36.lean.js
index 202db9a..8047774 100644
--- a/assets/pages_index_index.md.2158a292.lean.js
+++ b/assets/pages_index_index.md.21c95c36.lean.js
@@ -1 +1 @@
-import{_ as e,o as r,c as t,a}from"./app.cac277bf.js";const g=JSON.parse('{"title":"\u6B22\u8FCE\u6765\u5230\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u4E16\u754C \u{1F44F}","description":"","frontmatter":{},"headers":[{"level":2,"title":"vitePress \u5B98\u7F51","slug":"vitepress-\u5B98\u7F51","link":"#vitepress-\u5B98\u7F51","children":[]},{"level":2,"title":"Emoji \u{1F389}","slug":"emoji-\u{1F389}","link":"#emoji-\u{1F389}","children":[]},{"level":2,"title":"1. \u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6\uFF1A","slug":"_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","link":"#_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","children":[]},{"level":2,"title":"2. vueUse","slug":"_2-vueuse","link":"#_2-vueuse","children":[]},{"level":2,"title":"3. \u7CBE\u8FDB JavaScript \uFF5C \u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417 \uFF1F","slug":"_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","link":"#_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","slug":"_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","link":"#_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","children":[]},{"level":2,"title":"5. \u73E0\u5CF0\uFF1A\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684 Vue.js \u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","slug":"_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","link":"#_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","children":[]},{"level":2,"title":"6. \u7834\u89E3\u524D\u7AEF\u9762\u8BD5\uFF0880% \u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217\uFF09\uFF1A\u4ECE\u95ED\u5305\u8BF4\u8D77","slug":"_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","link":"#_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","children":[]},{"level":2,"title":"7. es5/6/7/...","slug":"_7-es5-6-7","link":"#_7-es5-6-7","children":[]},{"level":2,"title":"8.css","slug":"_8-css","link":"#_8-css","children":[]},{"level":2,"title":"9. ts","slug":"_9-ts","link":"#_9-ts","children":[]},{"level":2,"title":"10. vue2/3","slug":"_10-vue2-3","link":"#_10-vue2-3","children":[]},{"level":2,"title":"11. react","slug":"_11-react","link":"#_11-react","children":[]},{"level":2,"title":"12. node","slug":"_12-node","link":"#_12-node","children":[]},{"level":2,"title":"13. \u6D4F\u89C8\u5668","slug":"_13-\u6D4F\u89C8\u5668","link":"#_13-\u6D4F\u89C8\u5668","children":[]},{"level":2,"title":"14. \u7F51\u7EDC","slug":"_14-\u7F51\u7EDC","link":"#_14-\u7F51\u7EDC","children":[]},{"level":2,"title":"15. \u6027\u80FD\u4F18\u5316","slug":"_15-\u6027\u80FD\u4F18\u5316","link":"#_15-\u6027\u80FD\u4F18\u5316","children":[]},{"level":2,"title":"16. \u5DE5\u7A0B\u5316/\u67B6\u6784/\u8BBE\u8BA1\u6A21\u5F0F","slug":"_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","link":"#_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","children":[]},{"level":2,"title":"17. flutter/rn/Electron","slug":"_17-flutter-rn-electron","link":"#_17-flutter-rn-electron","children":[]},{"level":2,"title":"18. \u9762\u8BD5\u7ECF\u9A8C","slug":"_18-\u9762\u8BD5\u7ECF\u9A8C","link":"#_18-\u9762\u8BD5\u7ECF\u9A8C","children":[]},{"level":2,"title":"19. \u5B89\u5168","slug":"_19-\u5B89\u5168","link":"#_19-\u5B89\u5168","children":[]},{"level":2,"title":"20. \u5F00\u6E90\u9879\u76EE","slug":"_20-\u5F00\u6E90\u9879\u76EE","link":"#_20-\u5F00\u6E90\u9879\u76EE","children":[]},{"level":2,"title":"21. \u90E8\u7F72/\u76D1\u63A7","slug":"_21-\u90E8\u7F72-\u76D1\u63A7","link":"#_21-\u90E8\u7F72-\u76D1\u63A7","children":[]},{"level":2,"title":"22. \u56E2\u961F\u89C4\u5219","slug":"_22-\u56E2\u961F\u89C4\u5219","link":"#_22-\u56E2\u961F\u89C4\u5219","children":[]},{"level":2,"title":"23. \u7B97\u6CD5","slug":"_23-\u7B97\u6CD5","link":"#_23-\u7B97\u6CD5","children":[]},{"level":2,"title":"24. \u6742\u8C08","slug":"_24-\u6742\u8C08","link":"#_24-\u6742\u8C08","children":[]}],"relativePath":"pages/index/index.md"}'),l={name:"pages/index/index.md"},n=a("",59),i=[n];function s(o,p,h,c,f,u){return r(),t("div",null,i)}const _=e(l,[["render",s]]);export{g as __pageData,_ as default};
+import{_ as e,o as r,c as t,a}from"./app.88185e12.js";const g=JSON.parse('{"title":"\u6B22\u8FCE\u6765\u5230\u54D1\u5DF4\u6E56\u5927\u6C34\u602A\u7684\u4E16\u754C \u{1F44F}","description":"","frontmatter":{},"headers":[{"level":2,"title":"vitePress \u5B98\u7F51","slug":"vitepress-\u5B98\u7F51","link":"#vitepress-\u5B98\u7F51","children":[]},{"level":2,"title":"Emoji \u{1F389}","slug":"emoji-\u{1F389}","link":"#emoji-\u{1F389}","children":[]},{"level":2,"title":"1. \u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6\uFF1A","slug":"_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","link":"#_1-\u865A\u62DF\u6EDA\u52A8\u63D2\u4EF6","children":[]},{"level":2,"title":"2. vueUse","slug":"_2-vueuse","link":"#_2-vueuse","children":[]},{"level":2,"title":"3. \u7CBE\u8FDB JavaScript \uFF5C \u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417 \uFF1F","slug":"_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","link":"#_3-\u7CBE\u8FDB-javascript-\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","slug":"_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","link":"#_4-\u524D\u7AEF\u77E5\u8BC6\u4F53\u7CFB\u3001\u524D\u7AEF\u76D1\u63A7\u3001\u6027\u80FD\u4F18\u5316\u3001\u539F\u7406\u63A2\u7D22\u3001\u9762\u7ECF\u7B49","children":[]},{"level":2,"title":"5. \u73E0\u5CF0\uFF1A\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684 Vue.js \u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","slug":"_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","link":"#_5-\u73E0\u5CF0-\u53F2\u4E0A\u6700\u5168\u6700\u4E13\u4E1A\u7684-vue-js-\u9762\u8BD5\u9898\u8BAD\u7EC3\u8425","children":[]},{"level":2,"title":"6. \u7834\u89E3\u524D\u7AEF\u9762\u8BD5\uFF0880% \u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217\uFF09\uFF1A\u4ECE\u95ED\u5305\u8BF4\u8D77","slug":"_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","link":"#_6-\u7834\u89E3\u524D\u7AEF\u9762\u8BD5-80-\u5E94\u8058\u8005\u4E0D\u53CA\u683C\u7CFB\u5217-\u4ECE\u95ED\u5305\u8BF4\u8D77","children":[]},{"level":2,"title":"7. es5/6/7/...","slug":"_7-es5-6-7","link":"#_7-es5-6-7","children":[]},{"level":2,"title":"8.css","slug":"_8-css","link":"#_8-css","children":[]},{"level":2,"title":"9. ts","slug":"_9-ts","link":"#_9-ts","children":[]},{"level":2,"title":"10. vue2/3","slug":"_10-vue2-3","link":"#_10-vue2-3","children":[]},{"level":2,"title":"11. react","slug":"_11-react","link":"#_11-react","children":[]},{"level":2,"title":"12. node","slug":"_12-node","link":"#_12-node","children":[]},{"level":2,"title":"13. \u6D4F\u89C8\u5668","slug":"_13-\u6D4F\u89C8\u5668","link":"#_13-\u6D4F\u89C8\u5668","children":[]},{"level":2,"title":"14. \u7F51\u7EDC","slug":"_14-\u7F51\u7EDC","link":"#_14-\u7F51\u7EDC","children":[]},{"level":2,"title":"15. \u6027\u80FD\u4F18\u5316","slug":"_15-\u6027\u80FD\u4F18\u5316","link":"#_15-\u6027\u80FD\u4F18\u5316","children":[]},{"level":2,"title":"16. \u5DE5\u7A0B\u5316/\u67B6\u6784/\u8BBE\u8BA1\u6A21\u5F0F","slug":"_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","link":"#_16-\u5DE5\u7A0B\u5316-\u67B6\u6784-\u8BBE\u8BA1\u6A21\u5F0F","children":[]},{"level":2,"title":"17. flutter/rn/Electron","slug":"_17-flutter-rn-electron","link":"#_17-flutter-rn-electron","children":[]},{"level":2,"title":"18. \u9762\u8BD5\u7ECF\u9A8C","slug":"_18-\u9762\u8BD5\u7ECF\u9A8C","link":"#_18-\u9762\u8BD5\u7ECF\u9A8C","children":[]},{"level":2,"title":"19. \u5B89\u5168","slug":"_19-\u5B89\u5168","link":"#_19-\u5B89\u5168","children":[]},{"level":2,"title":"20. \u5F00\u6E90\u9879\u76EE","slug":"_20-\u5F00\u6E90\u9879\u76EE","link":"#_20-\u5F00\u6E90\u9879\u76EE","children":[]},{"level":2,"title":"21. \u90E8\u7F72/\u76D1\u63A7","slug":"_21-\u90E8\u7F72-\u76D1\u63A7","link":"#_21-\u90E8\u7F72-\u76D1\u63A7","children":[]},{"level":2,"title":"22. \u56E2\u961F\u89C4\u5219","slug":"_22-\u56E2\u961F\u89C4\u5219","link":"#_22-\u56E2\u961F\u89C4\u5219","children":[]},{"level":2,"title":"23. \u7B97\u6CD5","slug":"_23-\u7B97\u6CD5","link":"#_23-\u7B97\u6CD5","children":[]},{"level":2,"title":"24. \u6742\u8C08","slug":"_24-\u6742\u8C08","link":"#_24-\u6742\u8C08","children":[]}],"relativePath":"pages/index/index.md"}'),l={name:"pages/index/index.md"},n=a("",59),i=[n];function s(o,p,h,c,f,u){return r(),t("div",null,i)}const _=e(l,[["render",s]]);export{g as __pageData,_ as default};
diff --git a/assets/pages_interviews_browser.md.51981874.js b/assets/pages_interviews_browser.md.b9843bd5.js
similarity index 99%
rename from assets/pages_interviews_browser.md.51981874.js
rename to assets/pages_interviews_browser.md.b9843bd5.js
index 9da6a5c..4776e67 100644
--- a/assets/pages_interviews_browser.md.51981874.js
+++ b/assets/pages_interviews_browser.md.b9843bd5.js
@@ -1 +1 @@
-import{_ as t,o as e,c as d,a as o}from"./app.cac277bf.js";const _=JSON.parse('{"title":"\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7528\u6237\u4EE3\u7406","slug":"\u7528\u6237\u4EE3\u7406","link":"#\u7528\u6237\u4EE3\u7406","children":[{"level":3,"title":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u57FA\u672C\u6D41\u7A0B","slug":"\u57FA\u672C\u6D41\u7A0B","link":"#\u57FA\u672C\u6D41\u7A0B","children":[]}]},{"level":2,"title":"AJAX","slug":"ajax","link":"#ajax","children":[]}],"relativePath":"pages/interviews/browser.md"}'),r={name:"pages/interviews/browser.md"},p=o('

\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B

\u7528\u6237\u4EE3\u7406

\u6D4F\u89C8\u5668\u53EF\u4EE5\u4EE3\u66FF\u7528\u6237\u5B8C\u6210 http \u8BF7\u6C42\uFF0C\u4EE3\u66FF\u7528\u6237\u89E3\u6790\u54CD\u5E94\u7ED3\u679C\uFF0C\u6240\u4EE5\u6211\u4EEC\u79F0\u4E4B\u4E3A\uFF1A

\u7528\u6237\u4EE3\u7406 user agent

\u5728\u7F51\u7EDC\u5C42\u9762\uFF0C\u5BF9\u4E8E\u524D\u7AEF\u5F00\u53D1\u8005\uFF0C\u5FC5\u987B\u8981\u77E5\u9053\u6D4F\u89C8\u5668\u62E5\u6709\u7684\u4E24\u5927\u6838\u5FC3\u80FD\u529B\uFF1A

  • \u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B
  • \u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B

\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B

\u5F53\u4E00\u4E9B\u4E8B\u60C5\u53D1\u751F\u7684\u65F6\u5019\uFF0C\u6D4F\u89C8\u5668\u4F1A\u4EE3\u66FF\u7528\u6237\u81EA\u52A8\u53D1\u51FA http \u8BF7\u6C42\uFF0C\u5E38\u89C1\u7684\u5305\u62EC\uFF1A

  1. \u7528\u6237\u5728\u5730\u5740\u680F\u8F93\u5165\u4E86\u4E00\u4E2A url \u5730\u5740\uFF0C\u5E76\u6309\u4E0B\u4E86\u56DE\u8F66

    \u6D4F\u89C8\u5668\u4F1A\u81EA\u52A8\u89E3\u6790 URL\uFF0C\u5E76\u53D1\u51FA\u4E00\u4E2AGET\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

  2. \u5F53\u7528\u6237\u70B9\u51FB\u4E86\u9875\u9762\u4E2D\u7684 a \u5143\u7D20

    \u6D4F\u89C8\u5668\u4F1A\u62FF\u5230 a \u5143\u7D20\u7684 href \u5730\u5740\uFF0C\u5E76\u53D1\u51FA\u4E00\u4E2AGET\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

  3. \u5F53\u7528\u6237\u70B9\u51FB\u4E86\u63D0\u4EA4\u6309\u94AE<button type="submit">...</button>

    \u6D4F\u89C8\u5668\u4F1A\u83B7\u53D6\u6309\u94AE\u6240\u5728\u7684<form>\u5143\u7D20\uFF0C\u62FF\u5230\u5B83\u7684action\u5C5E\u6027\u5730\u5740\uFF0C\u540C\u65F6\u62FF\u5230\u5B83method\u5C5E\u6027\u503C\uFF0C\u7136\u540E\u628A\u8868\u5355\u4E2D\u7684\u6570\u636E\u7EC4\u7EC7\u5230\u8BF7\u6C42\u4F53\u4E2D\uFF0C\u53D1\u51FA\u6307\u5B9A\u65B9\u6CD5\u7684\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

    \u8FD9\u79CD\u65B9\u5F0F\u7684\u63D0\u4EA4\u73B0\u5728\u8D8A\u6765\u8D8A\u5C11\u89C1\u4E86

  4. \u5F53\u89E3\u6790 HTML \u65F6\u9047\u5230\u4E86<link> <img> <script> <video> <audio>\u7B49\u5143\u7D20

    \u6D4F\u89C8\u5668\u4F1A\u62FF\u5230\u5BF9\u5E94\u7684\u5730\u5740\uFF0C\u53D1\u51FAGET\u8BF7\u6C42

  5. \u5F53\u7528\u6237\u70B9\u51FB\u4E86\u5237\u65B0

    \u6D4F\u89C8\u5668\u4F1A\u62FF\u5230\u5F53\u524D\u9875\u9762\u7684\u5730\u5740\uFF0C\u4EE5\u53CA\u5F53\u524D\u9875\u9762\u7684\u8BF7\u6C42\u65B9\u6CD5\uFF0C\u91CD\u65B0\u53D1\u4E00\u6B21\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

\u6D4F\u89C8\u5668\u5728\u53D1\u51FA\u8BF7\u6C42\u65F6\uFF0C\u4F1A\u81EA\u52A8\u9644\u5E26\u4E00\u4E9B\u8BF7\u6C42\u5934

==\u91CD\u70B9\u6765\u4E86==

\u4ECE\u53E4\u81F3\u4ECA\uFF0C\u6D4F\u89C8\u5668\u90FD\u6709\u4E00\u4E2A\u7EA6\u5B9A\uFF1A

\u5F53\u53D1\u9001 GET \u8BF7\u6C42\u65F6\uFF0C\u6D4F\u89C8\u5668\u4E0D\u4F1A\u9644\u5E26\u8BF7\u6C42\u4F53

\u8FD9\u4E2A\u7EA6\u5B9A\u6DF1\u523B\u7684\u5F71\u54CD\u7740\u540E\u7EED\u7684\u524D\u540E\u7AEF\u5404\u79CD\u5E94\u7528\uFF0C\u73B0\u5728\uFF0C\u51E0\u4E4E\u6240\u6709\u4EBA\u90FD\u5728\u6F5C\u610F\u8BC6\u4E2D\u8BA4\u540C\u4E86\u8FD9\u4E00\u70B9\uFF0C\u65E0\u8BBA\u662F\u524D\u7AEF\u5F00\u53D1\u4EBA\u5458\u8FD8\u662F\u540E\u7AEF\u5F00\u53D1\u4EBA\u5458\u3002

\u7531\u4E8E\u524D\u540E\u7AEF\u7A0B\u5E8F\u7684\u9ED8\u8BA4\u884C\u4E3A\uFF0C\u9010\u6B65\u9020\u6210\u4E86 GET \u548C POST \u7684\u5404\u79CD\u5DEE\u5F02\uFF1A

  1. \u6D4F\u89C8\u5668\u5728\u53D1\u9001 GET \u8BF7\u6C42\u65F6\uFF0C\u4E0D\u4F1A\u9644\u5E26\u8BF7\u6C42\u4F53

  2. GET \u8BF7\u6C42\u7684\u4F20\u9012\u4FE1\u606F\u91CF\u6709\u9650\uFF0C\u9002\u5408\u4F20\u9012\u5C11\u91CF\u6570\u636E\uFF1BPOST \u8BF7\u6C42\u7684\u4F20\u9012\u4FE1\u606F\u91CF\u662F\u6CA1\u6709\u9650\u5236\u7684\uFF0C\u9002\u5408\u4F20\u8F93\u5927\u91CF\u6570\u636E\u3002

  3. GET \u8BF7\u6C42\u53EA\u80FD\u4F20\u9012 ASCII \u6570\u636E\uFF0C\u9047\u5230\u975E ASCII \u6570\u636E\u9700\u8981\u8FDB\u884C\u7F16\u7801\uFF1BPOST \u8BF7\u6C42\u6CA1\u6709\u9650\u5236

  4. \u5927\u90E8\u5206 GET \u8BF7\u6C42\u4F20\u9012\u7684\u6570\u636E\u90FD\u9644\u5E26\u5728 path \u53C2\u6570\u4E2D\uFF0C\u80FD\u591F\u901A\u8FC7\u5206\u4EAB\u5730\u5740\u5B8C\u6574\u7684\u91CD\u73B0\u9875\u9762\uFF0C\u4F46\u540C\u65F6\u4E5F\u66B4\u9732\u4E86\u6570\u636E\uFF0C\u82E5\u6709\u654F\u611F\u6570\u636E\u4F20\u9012\uFF0C\u4E0D\u5E94\u8BE5\u4F7F\u7528 GET \u8BF7\u6C42\uFF0C\u81F3\u5C11\u4E0D\u5E94\u8BE5\u653E\u5230 path \u4E2D

  5. POST \u4E0D\u4F1A\u88AB\u4FDD\u5B58\u5230\u6D4F\u89C8\u5668\u7684\u5386\u53F2\u8BB0\u5F55\u4E2D

  6. \u5237\u65B0\u9875\u9762\u65F6\uFF0C\u82E5\u5F53\u524D\u7684\u9875\u9762\u662F\u901A\u8FC7 POST \u8BF7\u6C42\u5F97\u5230\u7684\uFF0C\u5219\u6D4F\u89C8\u5668\u4F1A\u63D0\u793A\u7528\u6237\u662F\u5426\u91CD\u65B0\u63D0\u4EA4\u3002\u82E5\u662F GET \u8BF7\u6C42\u5F97\u5230\u7684\u9875\u9762\u5219\u6CA1\u6709\u63D0\u793A\u3002

\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B

\u6D4F\u89C8\u5668\u4E0D\u4EC5\u80FD\u53D1\u9001\u8BF7\u6C42\uFF0C\u8FD8\u80FD\u591F\u9488\u5BF9\u670D\u52A1\u5668\u7684\u5404\u79CD\u54CD\u5E94\u7ED3\u679C\u505A\u51FA\u4E0D\u540C\u7684\u81EA\u52A8\u5904\u7406

\u5E38\u89C1\u7684\u5904\u7406\u6709\uFF1A

  1. \u8BC6\u522B\u54CD\u5E94\u7801

    \u6D4F\u89C8\u5668\u80FD\u591F\u81EA\u52A8\u8BC6\u522B\u54CD\u5E94\u7801\uFF0C\u5F53\u51FA\u73B0\u4E00\u4E9B\u7279\u6B8A\u7684\u54CD\u5E94\u7801\u65F6\u6D4F\u89C8\u5668\u4F1A\u81EA\u52A8\u5B8C\u6210\u5904\u7406\uFF0C\u6BD4\u5982301\u3001302

  2. \u6839\u636E\u54CD\u5E94\u7ED3\u679C\u505A\u4E0D\u540C\u7684\u5904\u7406

    \u6D4F\u89C8\u5668\u80FD\u591F\u81EA\u52A8\u5206\u6790\u54CD\u5E94\u5934\u4E2D\u7684Content-Type\uFF0C\u6839\u636E\u4E0D\u540C\u7684\u503C\u8FDB\u884C\u4E0D\u540C\u5904\u7406\uFF0C\u6BD4\u5982\uFF1A

    • text/plain: \u666E\u901A\u7684\u7EAF\u6587\u672C\uFF0C\u6D4F\u89C8\u5668\u901A\u5E38\u4F1A\u5C06\u54CD\u5E94\u4F53\u539F\u5C01\u4E0D\u52A8\u7684\u663E\u793A\u5230\u9875\u9762\u4E0A

    • text/html\uFF1Ahtml \u6587\u6863\uFF0C\u6D4F\u89C8\u5668\u901A\u5E38\u4F1A\u5C06\u54CD\u5E94\u4F53\u4F5C\u4E3A\u9875\u9762\u8FDB\u884C\u6E32\u67D3

    • text/javascript\u6216application/javascript\uFF1Ajs \u4EE3\u7801\uFF0C\u6D4F\u89C8\u5668\u901A\u5E38\u4F1A\u4F7F\u7528 JS \u6267\u884C\u5F15\u64CE\u5C06\u5B83\u89E3\u6790\u6267\u884C

    • text/css\uFF1Acss \u4EE3\u7801\uFF0C\u6D4F\u89C8\u5668\u4F1A\u5C06\u5B83\u89C6\u4E3A\u6837\u5F0F

    • image/jpeg\uFF1A\u6D4F\u89C8\u5668\u4F1A\u5C06\u5B83\u89C6\u4E3A jpg \u56FE\u7247

    • application/octet-stream\uFF1A\u4E8C\u8FDB\u5236\u6570\u636E\uFF0C\u4F1A\u89E6\u53D1\u6D4F\u89C8\u5668\u4E0B\u8F7D\u529F\u80FD

    • attachment\uFF1A\u9644\u4EF6\uFF0C\u4F1A\u89E6\u53D1\u4E0B\u8F7D\u529F\u80FD

      \u8BE5\u503C\u548C\u5176\u4ED6\u503C\u4E0D\u540C\uFF0C\u5E94\u653E\u5230Content-Disposition\u5934\u4E2D\u3002

\u57FA\u672C\u6D41\u7A0B

\u8BBF\u95EE\uFF1Ahttps://oss.duyiedu.com/test/index.html

image-20220428165629557

AJAX

\u6D4F\u89C8\u5668\u672C\u8EAB\u5C31\u5177\u5907\u7F51\u7EDC\u901A\u4FE1\u7684\u80FD\u529B\uFF0C\u4F46\u5728\u65E9\u671F\uFF0C\u6D4F\u89C8\u5668\u5E76\u6CA1\u6709\u628A\u8FD9\u4E2A\u80FD\u529B\u5F00\u653E\u7ED9 JS\u3002

\u6700\u65E9\u662F\u5FAE\u8F6F\u5728 IE \u6D4F\u89C8\u5668\u4E2D\u628A\u8FD9\u4E00\u80FD\u529B\u5411 JS \u5F00\u653E\uFF0C\u8BA9 JS \u53EF\u4EE5\u5728\u4EE3\u7801\u4E2D\u5B9E\u73B0\u53D1\u9001\u8BF7\u6C42\uFF0C\u5E76\u4E0D\u4F1A\u5237\u65B0\u9875\u9762\uFF0C\u8FD9\u9879\u6280\u672F\u5728 2005 \u5E74\u88AB\u6B63\u5F0F\u547D\u540D\u4E3A AJAX\uFF08Asynchronous Javascript And XML\uFF09

AJAX \u5C31\u662F\u6307\u5728 web \u5E94\u7528\u7A0B\u5E8F\u4E2D\u5F02\u6B65\u5411\u670D\u52A1\u5668\u53D1\u9001\u8BF7\u6C42\u3002

\u5B83\u7684\u5B9E\u73B0\u65B9\u5F0F\u6709\u4E24\u79CD\uFF0CXMLHttpRequest \u7B80\u79F0XHR\u548CFetch

\u4EE5\u4E0B\u662F\u4E24\u8005\u7684\u5BF9\u6BD4

\u529F\u80FD\u70B9XHRFetch
\u57FA\u672C\u7684\u8BF7\u6C42\u80FD\u529B\u2705\u2705
\u57FA\u672C\u7684\u83B7\u53D6\u54CD\u5E94\u80FD\u529B\u2705\u2705
\u76D1\u63A7\u8BF7\u6C42\u8FDB\u5EA6\u2705\u274C
\u76D1\u63A7\u54CD\u5E94\u8FDB\u5EA6\u2705\u2705
Service Worker \u4E2D\u662F\u5426\u53EF\u7528\u274C\u2705
\u63A7\u5236 cookie \u7684\u643A\u5E26\u274C\u2705
\u63A7\u5236\u91CD\u5B9A\u5411\u274C\u2705
\u8BF7\u6C42\u53D6\u6D88\u2705\u2705
\u81EA\u5B9A\u4E49 referrer\u274C\u2705
\u6D41\u274C\u2705
API \u98CE\u683CEventPromise
\u6D3B\u8DC3\u5EA6\u505C\u6B62\u66F4\u65B0\u4E0D\u65AD\u66F4\u65B0
',29),i=[p];function l(a,c,n,s,h,g){return e(),d("div",null,i)}const b=t(r,[["render",l]]);export{_ as __pageData,b as default}; +import{_ as t,o as e,c as d,a as o}from"./app.88185e12.js";const _=JSON.parse('{"title":"\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7528\u6237\u4EE3\u7406","slug":"\u7528\u6237\u4EE3\u7406","link":"#\u7528\u6237\u4EE3\u7406","children":[{"level":3,"title":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u57FA\u672C\u6D41\u7A0B","slug":"\u57FA\u672C\u6D41\u7A0B","link":"#\u57FA\u672C\u6D41\u7A0B","children":[]}]},{"level":2,"title":"AJAX","slug":"ajax","link":"#ajax","children":[]}],"relativePath":"pages/interviews/browser.md"}'),r={name:"pages/interviews/browser.md"},p=o('

\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B

\u7528\u6237\u4EE3\u7406

\u6D4F\u89C8\u5668\u53EF\u4EE5\u4EE3\u66FF\u7528\u6237\u5B8C\u6210 http \u8BF7\u6C42\uFF0C\u4EE3\u66FF\u7528\u6237\u89E3\u6790\u54CD\u5E94\u7ED3\u679C\uFF0C\u6240\u4EE5\u6211\u4EEC\u79F0\u4E4B\u4E3A\uFF1A

\u7528\u6237\u4EE3\u7406 user agent

\u5728\u7F51\u7EDC\u5C42\u9762\uFF0C\u5BF9\u4E8E\u524D\u7AEF\u5F00\u53D1\u8005\uFF0C\u5FC5\u987B\u8981\u77E5\u9053\u6D4F\u89C8\u5668\u62E5\u6709\u7684\u4E24\u5927\u6838\u5FC3\u80FD\u529B\uFF1A

  • \u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B
  • \u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B

\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B

\u5F53\u4E00\u4E9B\u4E8B\u60C5\u53D1\u751F\u7684\u65F6\u5019\uFF0C\u6D4F\u89C8\u5668\u4F1A\u4EE3\u66FF\u7528\u6237\u81EA\u52A8\u53D1\u51FA http \u8BF7\u6C42\uFF0C\u5E38\u89C1\u7684\u5305\u62EC\uFF1A

  1. \u7528\u6237\u5728\u5730\u5740\u680F\u8F93\u5165\u4E86\u4E00\u4E2A url \u5730\u5740\uFF0C\u5E76\u6309\u4E0B\u4E86\u56DE\u8F66

    \u6D4F\u89C8\u5668\u4F1A\u81EA\u52A8\u89E3\u6790 URL\uFF0C\u5E76\u53D1\u51FA\u4E00\u4E2AGET\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

  2. \u5F53\u7528\u6237\u70B9\u51FB\u4E86\u9875\u9762\u4E2D\u7684 a \u5143\u7D20

    \u6D4F\u89C8\u5668\u4F1A\u62FF\u5230 a \u5143\u7D20\u7684 href \u5730\u5740\uFF0C\u5E76\u53D1\u51FA\u4E00\u4E2AGET\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

  3. \u5F53\u7528\u6237\u70B9\u51FB\u4E86\u63D0\u4EA4\u6309\u94AE<button type="submit">...</button>

    \u6D4F\u89C8\u5668\u4F1A\u83B7\u53D6\u6309\u94AE\u6240\u5728\u7684<form>\u5143\u7D20\uFF0C\u62FF\u5230\u5B83\u7684action\u5C5E\u6027\u5730\u5740\uFF0C\u540C\u65F6\u62FF\u5230\u5B83method\u5C5E\u6027\u503C\uFF0C\u7136\u540E\u628A\u8868\u5355\u4E2D\u7684\u6570\u636E\u7EC4\u7EC7\u5230\u8BF7\u6C42\u4F53\u4E2D\uFF0C\u53D1\u51FA\u6307\u5B9A\u65B9\u6CD5\u7684\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

    \u8FD9\u79CD\u65B9\u5F0F\u7684\u63D0\u4EA4\u73B0\u5728\u8D8A\u6765\u8D8A\u5C11\u89C1\u4E86

  4. \u5F53\u89E3\u6790 HTML \u65F6\u9047\u5230\u4E86<link> <img> <script> <video> <audio>\u7B49\u5143\u7D20

    \u6D4F\u89C8\u5668\u4F1A\u62FF\u5230\u5BF9\u5E94\u7684\u5730\u5740\uFF0C\u53D1\u51FAGET\u8BF7\u6C42

  5. \u5F53\u7528\u6237\u70B9\u51FB\u4E86\u5237\u65B0

    \u6D4F\u89C8\u5668\u4F1A\u62FF\u5230\u5F53\u524D\u9875\u9762\u7684\u5730\u5740\uFF0C\u4EE5\u53CA\u5F53\u524D\u9875\u9762\u7684\u8BF7\u6C42\u65B9\u6CD5\uFF0C\u91CD\u65B0\u53D1\u4E00\u6B21\u8BF7\u6C42\uFF0C\u540C\u65F6\u629B\u5F03\u5F53\u524D\u9875\u9762\u3002

\u6D4F\u89C8\u5668\u5728\u53D1\u51FA\u8BF7\u6C42\u65F6\uFF0C\u4F1A\u81EA\u52A8\u9644\u5E26\u4E00\u4E9B\u8BF7\u6C42\u5934

==\u91CD\u70B9\u6765\u4E86==

\u4ECE\u53E4\u81F3\u4ECA\uFF0C\u6D4F\u89C8\u5668\u90FD\u6709\u4E00\u4E2A\u7EA6\u5B9A\uFF1A

\u5F53\u53D1\u9001 GET \u8BF7\u6C42\u65F6\uFF0C\u6D4F\u89C8\u5668\u4E0D\u4F1A\u9644\u5E26\u8BF7\u6C42\u4F53

\u8FD9\u4E2A\u7EA6\u5B9A\u6DF1\u523B\u7684\u5F71\u54CD\u7740\u540E\u7EED\u7684\u524D\u540E\u7AEF\u5404\u79CD\u5E94\u7528\uFF0C\u73B0\u5728\uFF0C\u51E0\u4E4E\u6240\u6709\u4EBA\u90FD\u5728\u6F5C\u610F\u8BC6\u4E2D\u8BA4\u540C\u4E86\u8FD9\u4E00\u70B9\uFF0C\u65E0\u8BBA\u662F\u524D\u7AEF\u5F00\u53D1\u4EBA\u5458\u8FD8\u662F\u540E\u7AEF\u5F00\u53D1\u4EBA\u5458\u3002

\u7531\u4E8E\u524D\u540E\u7AEF\u7A0B\u5E8F\u7684\u9ED8\u8BA4\u884C\u4E3A\uFF0C\u9010\u6B65\u9020\u6210\u4E86 GET \u548C POST \u7684\u5404\u79CD\u5DEE\u5F02\uFF1A

  1. \u6D4F\u89C8\u5668\u5728\u53D1\u9001 GET \u8BF7\u6C42\u65F6\uFF0C\u4E0D\u4F1A\u9644\u5E26\u8BF7\u6C42\u4F53

  2. GET \u8BF7\u6C42\u7684\u4F20\u9012\u4FE1\u606F\u91CF\u6709\u9650\uFF0C\u9002\u5408\u4F20\u9012\u5C11\u91CF\u6570\u636E\uFF1BPOST \u8BF7\u6C42\u7684\u4F20\u9012\u4FE1\u606F\u91CF\u662F\u6CA1\u6709\u9650\u5236\u7684\uFF0C\u9002\u5408\u4F20\u8F93\u5927\u91CF\u6570\u636E\u3002

  3. GET \u8BF7\u6C42\u53EA\u80FD\u4F20\u9012 ASCII \u6570\u636E\uFF0C\u9047\u5230\u975E ASCII \u6570\u636E\u9700\u8981\u8FDB\u884C\u7F16\u7801\uFF1BPOST \u8BF7\u6C42\u6CA1\u6709\u9650\u5236

  4. \u5927\u90E8\u5206 GET \u8BF7\u6C42\u4F20\u9012\u7684\u6570\u636E\u90FD\u9644\u5E26\u5728 path \u53C2\u6570\u4E2D\uFF0C\u80FD\u591F\u901A\u8FC7\u5206\u4EAB\u5730\u5740\u5B8C\u6574\u7684\u91CD\u73B0\u9875\u9762\uFF0C\u4F46\u540C\u65F6\u4E5F\u66B4\u9732\u4E86\u6570\u636E\uFF0C\u82E5\u6709\u654F\u611F\u6570\u636E\u4F20\u9012\uFF0C\u4E0D\u5E94\u8BE5\u4F7F\u7528 GET \u8BF7\u6C42\uFF0C\u81F3\u5C11\u4E0D\u5E94\u8BE5\u653E\u5230 path \u4E2D

  5. POST \u4E0D\u4F1A\u88AB\u4FDD\u5B58\u5230\u6D4F\u89C8\u5668\u7684\u5386\u53F2\u8BB0\u5F55\u4E2D

  6. \u5237\u65B0\u9875\u9762\u65F6\uFF0C\u82E5\u5F53\u524D\u7684\u9875\u9762\u662F\u901A\u8FC7 POST \u8BF7\u6C42\u5F97\u5230\u7684\uFF0C\u5219\u6D4F\u89C8\u5668\u4F1A\u63D0\u793A\u7528\u6237\u662F\u5426\u91CD\u65B0\u63D0\u4EA4\u3002\u82E5\u662F GET \u8BF7\u6C42\u5F97\u5230\u7684\u9875\u9762\u5219\u6CA1\u6709\u63D0\u793A\u3002

\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B

\u6D4F\u89C8\u5668\u4E0D\u4EC5\u80FD\u53D1\u9001\u8BF7\u6C42\uFF0C\u8FD8\u80FD\u591F\u9488\u5BF9\u670D\u52A1\u5668\u7684\u5404\u79CD\u54CD\u5E94\u7ED3\u679C\u505A\u51FA\u4E0D\u540C\u7684\u81EA\u52A8\u5904\u7406

\u5E38\u89C1\u7684\u5904\u7406\u6709\uFF1A

  1. \u8BC6\u522B\u54CD\u5E94\u7801

    \u6D4F\u89C8\u5668\u80FD\u591F\u81EA\u52A8\u8BC6\u522B\u54CD\u5E94\u7801\uFF0C\u5F53\u51FA\u73B0\u4E00\u4E9B\u7279\u6B8A\u7684\u54CD\u5E94\u7801\u65F6\u6D4F\u89C8\u5668\u4F1A\u81EA\u52A8\u5B8C\u6210\u5904\u7406\uFF0C\u6BD4\u5982301\u3001302

  2. \u6839\u636E\u54CD\u5E94\u7ED3\u679C\u505A\u4E0D\u540C\u7684\u5904\u7406

    \u6D4F\u89C8\u5668\u80FD\u591F\u81EA\u52A8\u5206\u6790\u54CD\u5E94\u5934\u4E2D\u7684Content-Type\uFF0C\u6839\u636E\u4E0D\u540C\u7684\u503C\u8FDB\u884C\u4E0D\u540C\u5904\u7406\uFF0C\u6BD4\u5982\uFF1A

    • text/plain: \u666E\u901A\u7684\u7EAF\u6587\u672C\uFF0C\u6D4F\u89C8\u5668\u901A\u5E38\u4F1A\u5C06\u54CD\u5E94\u4F53\u539F\u5C01\u4E0D\u52A8\u7684\u663E\u793A\u5230\u9875\u9762\u4E0A

    • text/html\uFF1Ahtml \u6587\u6863\uFF0C\u6D4F\u89C8\u5668\u901A\u5E38\u4F1A\u5C06\u54CD\u5E94\u4F53\u4F5C\u4E3A\u9875\u9762\u8FDB\u884C\u6E32\u67D3

    • text/javascript\u6216application/javascript\uFF1Ajs \u4EE3\u7801\uFF0C\u6D4F\u89C8\u5668\u901A\u5E38\u4F1A\u4F7F\u7528 JS \u6267\u884C\u5F15\u64CE\u5C06\u5B83\u89E3\u6790\u6267\u884C

    • text/css\uFF1Acss \u4EE3\u7801\uFF0C\u6D4F\u89C8\u5668\u4F1A\u5C06\u5B83\u89C6\u4E3A\u6837\u5F0F

    • image/jpeg\uFF1A\u6D4F\u89C8\u5668\u4F1A\u5C06\u5B83\u89C6\u4E3A jpg \u56FE\u7247

    • application/octet-stream\uFF1A\u4E8C\u8FDB\u5236\u6570\u636E\uFF0C\u4F1A\u89E6\u53D1\u6D4F\u89C8\u5668\u4E0B\u8F7D\u529F\u80FD

    • attachment\uFF1A\u9644\u4EF6\uFF0C\u4F1A\u89E6\u53D1\u4E0B\u8F7D\u529F\u80FD

      \u8BE5\u503C\u548C\u5176\u4ED6\u503C\u4E0D\u540C\uFF0C\u5E94\u653E\u5230Content-Disposition\u5934\u4E2D\u3002

\u57FA\u672C\u6D41\u7A0B

\u8BBF\u95EE\uFF1Ahttps://oss.duyiedu.com/test/index.html

image-20220428165629557

AJAX

\u6D4F\u89C8\u5668\u672C\u8EAB\u5C31\u5177\u5907\u7F51\u7EDC\u901A\u4FE1\u7684\u80FD\u529B\uFF0C\u4F46\u5728\u65E9\u671F\uFF0C\u6D4F\u89C8\u5668\u5E76\u6CA1\u6709\u628A\u8FD9\u4E2A\u80FD\u529B\u5F00\u653E\u7ED9 JS\u3002

\u6700\u65E9\u662F\u5FAE\u8F6F\u5728 IE \u6D4F\u89C8\u5668\u4E2D\u628A\u8FD9\u4E00\u80FD\u529B\u5411 JS \u5F00\u653E\uFF0C\u8BA9 JS \u53EF\u4EE5\u5728\u4EE3\u7801\u4E2D\u5B9E\u73B0\u53D1\u9001\u8BF7\u6C42\uFF0C\u5E76\u4E0D\u4F1A\u5237\u65B0\u9875\u9762\uFF0C\u8FD9\u9879\u6280\u672F\u5728 2005 \u5E74\u88AB\u6B63\u5F0F\u547D\u540D\u4E3A AJAX\uFF08Asynchronous Javascript And XML\uFF09

AJAX \u5C31\u662F\u6307\u5728 web \u5E94\u7528\u7A0B\u5E8F\u4E2D\u5F02\u6B65\u5411\u670D\u52A1\u5668\u53D1\u9001\u8BF7\u6C42\u3002

\u5B83\u7684\u5B9E\u73B0\u65B9\u5F0F\u6709\u4E24\u79CD\uFF0CXMLHttpRequest \u7B80\u79F0XHR\u548CFetch

\u4EE5\u4E0B\u662F\u4E24\u8005\u7684\u5BF9\u6BD4

\u529F\u80FD\u70B9XHRFetch
\u57FA\u672C\u7684\u8BF7\u6C42\u80FD\u529B\u2705\u2705
\u57FA\u672C\u7684\u83B7\u53D6\u54CD\u5E94\u80FD\u529B\u2705\u2705
\u76D1\u63A7\u8BF7\u6C42\u8FDB\u5EA6\u2705\u274C
\u76D1\u63A7\u54CD\u5E94\u8FDB\u5EA6\u2705\u2705
Service Worker \u4E2D\u662F\u5426\u53EF\u7528\u274C\u2705
\u63A7\u5236 cookie \u7684\u643A\u5E26\u274C\u2705
\u63A7\u5236\u91CD\u5B9A\u5411\u274C\u2705
\u8BF7\u6C42\u53D6\u6D88\u2705\u2705
\u81EA\u5B9A\u4E49 referrer\u274C\u2705
\u6D41\u274C\u2705
API \u98CE\u683CEventPromise
\u6D3B\u8DC3\u5EA6\u505C\u6B62\u66F4\u65B0\u4E0D\u65AD\u66F4\u65B0
',29),i=[p];function l(a,c,n,s,h,g){return e(),d("div",null,i)}const b=t(r,[["render",l]]);export{_ as __pageData,b as default}; diff --git a/assets/pages_interviews_browser.md.51981874.lean.js b/assets/pages_interviews_browser.md.b9843bd5.lean.js similarity index 94% rename from assets/pages_interviews_browser.md.51981874.lean.js rename to assets/pages_interviews_browser.md.b9843bd5.lean.js index 546c04b..495578c 100644 --- a/assets/pages_interviews_browser.md.51981874.lean.js +++ b/assets/pages_interviews_browser.md.b9843bd5.lean.js @@ -1 +1 @@ -import{_ as t,o as e,c as d,a as o}from"./app.cac277bf.js";const _=JSON.parse('{"title":"\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7528\u6237\u4EE3\u7406","slug":"\u7528\u6237\u4EE3\u7406","link":"#\u7528\u6237\u4EE3\u7406","children":[{"level":3,"title":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u57FA\u672C\u6D41\u7A0B","slug":"\u57FA\u672C\u6D41\u7A0B","link":"#\u57FA\u672C\u6D41\u7A0B","children":[]}]},{"level":2,"title":"AJAX","slug":"ajax","link":"#ajax","children":[]}],"relativePath":"pages/interviews/browser.md"}'),r={name:"pages/interviews/browser.md"},p=o("",29),i=[p];function l(a,c,n,s,h,g){return e(),d("div",null,i)}const b=t(r,[["render",l]]);export{_ as __pageData,b as default}; +import{_ as t,o as e,c as d,a as o}from"./app.88185e12.js";const _=JSON.parse('{"title":"\u6D4F\u89C8\u5668\u7684\u901A\u4FE1\u80FD\u529B","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7528\u6237\u4EE3\u7406","slug":"\u7528\u6237\u4EE3\u7406","link":"#\u7528\u6237\u4EE3\u7406","children":[{"level":3,"title":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u53D1\u51FA\u8BF7\u6C42\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","slug":"\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","link":"#\u81EA\u52A8\u89E3\u6790\u54CD\u5E94\u7684\u80FD\u529B","children":[]},{"level":3,"title":"\u57FA\u672C\u6D41\u7A0B","slug":"\u57FA\u672C\u6D41\u7A0B","link":"#\u57FA\u672C\u6D41\u7A0B","children":[]}]},{"level":2,"title":"AJAX","slug":"ajax","link":"#ajax","children":[]}],"relativePath":"pages/interviews/browser.md"}'),r={name:"pages/interviews/browser.md"},p=o("",29),i=[p];function l(a,c,n,s,h,g){return e(),d("div",null,i)}const b=t(r,[["render",l]]);export{_ as __pageData,b as default}; diff --git a/assets/pages_interviews_css.md.4c56046e.js b/assets/pages_interviews_css.md.5f84b849.js similarity index 99% rename from assets/pages_interviews_css.md.4c56046e.js rename to assets/pages_interviews_css.md.5f84b849.js index ca03205..8fb33bb 100644 --- a/assets/pages_interviews_css.md.4c56046e.js +++ b/assets/pages_interviews_css.md.5f84b849.js @@ -1,4 +1,4 @@ -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/image-20210214150511841.f4828bd6.png",o="/ybhdsg-zhs/assets/image-20210214151037552.d6def06c.png",g=JSON.parse('{"title":"CSS \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. CSS \u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","slug":"_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","link":"#_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","children":[]},{"level":2,"title":"2. \u901A\u8FC7 CSS \u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20\uFF1F","slug":"_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","link":"#_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","children":[]},{"level":2,"title":"3. \u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B\uFF1F","slug":"_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","link":"#_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"4. CSS \u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","slug":"_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","link":"#_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","children":[]},{"level":2,"title":"5. \u5982\u4F55\u7406\u89E3 z-index\uFF1F","slug":"_5-\u5982\u4F55\u7406\u89E3-z-index","link":"#_5-\u5982\u4F55\u7406\u89E3-z-index","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u4F60\u5BF9 BFC \u7684\u7406\u89E3\uFF1F","slug":"_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"8. \u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"9. \u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B\uFF1F","slug":"_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","link":"#_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","children":[]},{"level":2,"title":"10. \u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B\uFF1F","slug":"_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","link":"#_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","children":[]},{"level":2,"title":"11. \u8C08\u8C08\u4F60\u5BF9 flex \u7684\u7406\u89E3\uFF1F","slug":"_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","link":"#_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"12. \u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F CSS Sprites \u4EE5\u53CA\u5B83\u7684\u597D\u5904\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","link":"#_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","children":[]},{"level":2,"title":"14. px\u3001em\u3001rem \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"15. \u4F60\u4E0D\u77E5\u9053\u7684 CSS \u4E4B\u5305\u542B\u5757","slug":"_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","link":"#_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","children":[]},{"level":2,"title":"16. CSS \u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","slug":"_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","link":"#_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","children":[{"level":3,"title":"\u786E\u5B9A\u58F0\u660E\u503C","slug":"\u786E\u5B9A\u58F0\u660E\u503C","link":"#\u786E\u5B9A\u58F0\u660E\u503C","children":[]},{"level":3,"title":"\u5C42\u53E0\u51B2\u7A81","slug":"\u5C42\u53E0\u51B2\u7A81","link":"#\u5C42\u53E0\u51B2\u7A81","children":[]},{"level":3,"title":"\u4F7F\u7528\u7EE7\u627F","slug":"\u4F7F\u7528\u7EE7\u627F","link":"#\u4F7F\u7528\u7EE7\u627F","children":[]},{"level":3,"title":"\u4F7F\u7528\u9ED8\u8BA4\u503C","slug":"\u4F7F\u7528\u9ED8\u8BA4\u503C","link":"#\u4F7F\u7528\u9ED8\u8BA4\u503C","children":[]}]}],"relativePath":"pages/interviews/css.md"}'),t={name:"pages/interviews/css.md"},e=l(`

CSS \u9762\u8BD5\u76F8\u5173

JavaScript \u4E2D\u83B7\u53D6\u6216\u8005\u4FEE\u6539 CSS \u53D8\u91CF
js
// \u83B7\u53D6\u4E00\u4E2A Dom \u8282\u70B9\u4E0A\u7684 CSS \u53D8\u91CF
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/image-20210214150511841.f4828bd6.png",o="/ybhdsg-zhs/assets/image-20210214151037552.d6def06c.png",g=JSON.parse('{"title":"CSS \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. CSS \u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","slug":"_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","link":"#_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","children":[]},{"level":2,"title":"2. \u901A\u8FC7 CSS \u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20\uFF1F","slug":"_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","link":"#_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","children":[]},{"level":2,"title":"3. \u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B\uFF1F","slug":"_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","link":"#_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"4. CSS \u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","slug":"_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","link":"#_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","children":[]},{"level":2,"title":"5. \u5982\u4F55\u7406\u89E3 z-index\uFF1F","slug":"_5-\u5982\u4F55\u7406\u89E3-z-index","link":"#_5-\u5982\u4F55\u7406\u89E3-z-index","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u4F60\u5BF9 BFC \u7684\u7406\u89E3\uFF1F","slug":"_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"8. \u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"9. \u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B\uFF1F","slug":"_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","link":"#_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","children":[]},{"level":2,"title":"10. \u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B\uFF1F","slug":"_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","link":"#_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","children":[]},{"level":2,"title":"11. \u8C08\u8C08\u4F60\u5BF9 flex \u7684\u7406\u89E3\uFF1F","slug":"_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","link":"#_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"12. \u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F CSS Sprites \u4EE5\u53CA\u5B83\u7684\u597D\u5904\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","link":"#_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","children":[]},{"level":2,"title":"14. px\u3001em\u3001rem \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"15. \u4F60\u4E0D\u77E5\u9053\u7684 CSS \u4E4B\u5305\u542B\u5757","slug":"_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","link":"#_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","children":[]},{"level":2,"title":"16. CSS \u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","slug":"_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","link":"#_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","children":[{"level":3,"title":"\u786E\u5B9A\u58F0\u660E\u503C","slug":"\u786E\u5B9A\u58F0\u660E\u503C","link":"#\u786E\u5B9A\u58F0\u660E\u503C","children":[]},{"level":3,"title":"\u5C42\u53E0\u51B2\u7A81","slug":"\u5C42\u53E0\u51B2\u7A81","link":"#\u5C42\u53E0\u51B2\u7A81","children":[]},{"level":3,"title":"\u4F7F\u7528\u7EE7\u627F","slug":"\u4F7F\u7528\u7EE7\u627F","link":"#\u4F7F\u7528\u7EE7\u627F","children":[]},{"level":3,"title":"\u4F7F\u7528\u9ED8\u8BA4\u503C","slug":"\u4F7F\u7528\u9ED8\u8BA4\u503C","link":"#\u4F7F\u7528\u9ED8\u8BA4\u503C","children":[]}]}],"relativePath":"pages/interviews/css.md"}'),t={name:"pages/interviews/css.md"},e=l(`

CSS \u9762\u8BD5\u76F8\u5173

JavaScript \u4E2D\u83B7\u53D6\u6216\u8005\u4FEE\u6539 CSS \u53D8\u91CF
js
// \u83B7\u53D6\u4E00\u4E2A Dom \u8282\u70B9\u4E0A\u7684 CSS \u53D8\u91CF
 element.style.getPropertyValue("--my-var");
 
 // \u83B7\u53D6\u4EFB\u610F Dom \u8282\u70B9\u4E0A\u7684 CSS \u53D8\u91CF
diff --git a/assets/pages_interviews_css.md.4c56046e.lean.js b/assets/pages_interviews_css.md.5f84b849.lean.js
similarity index 98%
rename from assets/pages_interviews_css.md.4c56046e.lean.js
rename to assets/pages_interviews_css.md.5f84b849.lean.js
index b689293..4389132 100644
--- a/assets/pages_interviews_css.md.4c56046e.lean.js
+++ b/assets/pages_interviews_css.md.5f84b849.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/image-20210214150511841.f4828bd6.png",o="/ybhdsg-zhs/assets/image-20210214151037552.d6def06c.png",g=JSON.parse('{"title":"CSS \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. CSS \u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","slug":"_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","link":"#_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","children":[]},{"level":2,"title":"2. \u901A\u8FC7 CSS \u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20\uFF1F","slug":"_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","link":"#_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","children":[]},{"level":2,"title":"3. \u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B\uFF1F","slug":"_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","link":"#_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"4. CSS \u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","slug":"_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","link":"#_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","children":[]},{"level":2,"title":"5. \u5982\u4F55\u7406\u89E3 z-index\uFF1F","slug":"_5-\u5982\u4F55\u7406\u89E3-z-index","link":"#_5-\u5982\u4F55\u7406\u89E3-z-index","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u4F60\u5BF9 BFC \u7684\u7406\u89E3\uFF1F","slug":"_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"8. \u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"9. \u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B\uFF1F","slug":"_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","link":"#_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","children":[]},{"level":2,"title":"10. \u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B\uFF1F","slug":"_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","link":"#_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","children":[]},{"level":2,"title":"11. \u8C08\u8C08\u4F60\u5BF9 flex \u7684\u7406\u89E3\uFF1F","slug":"_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","link":"#_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"12. \u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F CSS Sprites \u4EE5\u53CA\u5B83\u7684\u597D\u5904\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","link":"#_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","children":[]},{"level":2,"title":"14. px\u3001em\u3001rem \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"15. \u4F60\u4E0D\u77E5\u9053\u7684 CSS \u4E4B\u5305\u542B\u5757","slug":"_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","link":"#_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","children":[]},{"level":2,"title":"16. CSS \u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","slug":"_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","link":"#_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","children":[{"level":3,"title":"\u786E\u5B9A\u58F0\u660E\u503C","slug":"\u786E\u5B9A\u58F0\u660E\u503C","link":"#\u786E\u5B9A\u58F0\u660E\u503C","children":[]},{"level":3,"title":"\u5C42\u53E0\u51B2\u7A81","slug":"\u5C42\u53E0\u51B2\u7A81","link":"#\u5C42\u53E0\u51B2\u7A81","children":[]},{"level":3,"title":"\u4F7F\u7528\u7EE7\u627F","slug":"\u4F7F\u7528\u7EE7\u627F","link":"#\u4F7F\u7528\u7EE7\u627F","children":[]},{"level":3,"title":"\u4F7F\u7528\u9ED8\u8BA4\u503C","slug":"\u4F7F\u7528\u9ED8\u8BA4\u503C","link":"#\u4F7F\u7528\u9ED8\u8BA4\u503C","children":[]}]}],"relativePath":"pages/interviews/css.md"}'),t={name:"pages/interviews/css.md"},e=l("",178),c=[e];function r(D,y,F,C,i,d){return n(),a("div",null,c)}const h=s(t,[["render",r]]);export{g as __pageData,h as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/image-20210214150511841.f4828bd6.png",o="/ybhdsg-zhs/assets/image-20210214151037552.d6def06c.png",g=JSON.parse('{"title":"CSS \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. CSS \u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","slug":"_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","link":"#_1-css-\u9009\u62E9\u5668\u7684\u4F18\u5148\u7EA7\u987A\u5E8F","children":[]},{"level":2,"title":"2. \u901A\u8FC7 CSS \u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20\uFF1F","slug":"_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","link":"#_2-\u901A\u8FC7-css-\u7684\u54EA\u4E9B\u65B9\u5F0F\u53EF\u4EE5\u5B9E\u73B0\u9690\u85CF\u9875\u9762\u4E0A\u7684\u5143\u7D20","children":[]},{"level":2,"title":"3. \u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B\uFF1F","slug":"_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","link":"#_3-\u8BA9\u5143\u7D20\u6C34\u5E73\u5C45\u4E2D\u7684\u65B9\u6CD5\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"4. CSS \u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","slug":"_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","link":"#_4-css-\u4E2D\u7684\u5B9A\u4F4D\u65B9\u5F0F","children":[]},{"level":2,"title":"5. \u5982\u4F55\u7406\u89E3 z-index\uFF1F","slug":"_5-\u5982\u4F55\u7406\u89E3-z-index","link":"#_5-\u5982\u4F55\u7406\u89E3-z-index","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u4F60\u5BF9 BFC \u7684\u7406\u89E3\uFF1F","slug":"_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u4F60\u5BF9-bfc-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"8. \u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_8-\u4F60\u5BF9\u76D2\u5B50\u6A21\u578B\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"9. \u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B\uFF1F","slug":"_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","link":"#_9-\u6807\u51C6\u76D2\u6A21\u578B\u548C\u602A\u5F02\u76D2\u6A21\u578B\u6709\u54EA\u4E9B\u533A\u522B","children":[]},{"level":2,"title":"10. \u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B\uFF1F","slug":"_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","link":"#_10-\u8BF4\u8BF4\u4F2A\u7C7B\u548C\u4F2A\u5143\u7D20\u7684\u533A\u522B","children":[]},{"level":2,"title":"11. \u8C08\u8C08\u4F60\u5BF9 flex \u7684\u7406\u89E3\uFF1F","slug":"_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","link":"#_11-\u8C08\u8C08\u4F60\u5BF9-flex-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"12. \u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","link":"#_12-\u4F60\u5BF9\u5A92\u4F53\u67E5\u8BE2\u7684\u7406\u89E3\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F CSS Sprites \u4EE5\u53CA\u5B83\u7684\u597D\u5904\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","link":"#_13-\u4EC0\u4E48\u662F-css-sprites-\u4EE5\u53CA\u5B83\u7684\u597D\u5904","children":[]},{"level":2,"title":"14. px\u3001em\u3001rem \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_14-px\u3001em\u3001rem-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"15. \u4F60\u4E0D\u77E5\u9053\u7684 CSS \u4E4B\u5305\u542B\u5757","slug":"_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","link":"#_15-\u4F60\u4E0D\u77E5\u9053\u7684-css-\u4E4B\u5305\u542B\u5757","children":[]},{"level":2,"title":"16. CSS \u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","slug":"_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","link":"#_16-css-\u5C5E\u6027\u8BA1\u7B97\u8FC7\u7A0B","children":[{"level":3,"title":"\u786E\u5B9A\u58F0\u660E\u503C","slug":"\u786E\u5B9A\u58F0\u660E\u503C","link":"#\u786E\u5B9A\u58F0\u660E\u503C","children":[]},{"level":3,"title":"\u5C42\u53E0\u51B2\u7A81","slug":"\u5C42\u53E0\u51B2\u7A81","link":"#\u5C42\u53E0\u51B2\u7A81","children":[]},{"level":3,"title":"\u4F7F\u7528\u7EE7\u627F","slug":"\u4F7F\u7528\u7EE7\u627F","link":"#\u4F7F\u7528\u7EE7\u627F","children":[]},{"level":3,"title":"\u4F7F\u7528\u9ED8\u8BA4\u503C","slug":"\u4F7F\u7528\u9ED8\u8BA4\u503C","link":"#\u4F7F\u7528\u9ED8\u8BA4\u503C","children":[]}]}],"relativePath":"pages/interviews/css.md"}'),t={name:"pages/interviews/css.md"},e=l("",178),c=[e];function r(D,y,F,C,i,d){return n(),a("div",null,c)}const h=s(t,[["render",r]]);export{g as __pageData,h as default};
diff --git a/assets/pages_interviews_eventLoop.md.b8f8395a.js b/assets/pages_interviews_eventLoop.md.1d4bd144.js
similarity index 99%
rename from assets/pages_interviews_eventLoop.md.b8f8395a.js
rename to assets/pages_interviews_eventLoop.md.1d4bd144.js
index 196d609..c7411cf 100644
--- a/assets/pages_interviews_eventLoop.md.b8f8395a.js
+++ b/assets/pages_interviews_eventLoop.md.1d4bd144.js
@@ -1 +1 @@
-import{_ as e,o as t,c as o,a as s}from"./app.cac277bf.js";const u=JSON.parse('{"title":"\u4E8B\u4EF6\u5FAA\u73AF","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9610\u8FF0\u4E00\u4E0B js \u7684\u4E8B\u4EF6\u5FAA\u73AF","slug":"_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","link":"#_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","children":[]},{"level":2,"title":"2. \u5982\u4F55\u7406\u89E3 js \u7684\u5F02\u6B65\uFF1A","slug":"_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","link":"#_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","children":[]},{"level":2,"title":"3. Js \u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417\uFF1F\u4E3A\u4EC0\u4E48\uFF1F","slug":"_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","link":"#_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","children":[]},{"level":2,"title":"4. \u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417\uFF1F","slug":"_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","link":"#_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","children":[]}],"relativePath":"pages/interviews/eventLoop.md"}'),r={name:"pages/interviews/eventLoop.md"},p=s('

\u4E8B\u4EF6\u5FAA\u73AF

1. \u5355\u7EBF\u7A0B\u662F\u5F02\u6B65\u4EA7\u751F\u7684\u539F\u56E0

2. \u4E8B\u4EF6\u5FAA\u73AF\u662F\u5F02\u6B65\u7684\u5B9E\u73B0\u65B9\u5F0F

3. \u5FAE\u961F\u5217\u4F18\u5148\u7EA7\u6700\u9AD8

4. \u4E00\u4E2A\u8FDB\u7A0B\u81F3\u5C11\u6709\u4E00\u4E2A\u7EBF\u7A0B

5. \u6D4F\u89C8\u5668\u662F\u4E00\u4E2A\u591A\u8FDB\u7A0B\u591A\u7EBF\u7A0B\u7684\u5E94\u7528\u7A0B\u5E8F

1. \u9610\u8FF0\u4E00\u4E0B js \u7684\u4E8B\u4EF6\u5FAA\u73AF

\u4E8B\u4EF6\u5FAA\u73AF\u53C8\u53EB\u6D88\u606F\u5FAA\u73AF\uFF0C\u662F\u6D4F\u89C8\u5668\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u7684\u5DE5\u4F5C\u65B9\u5F0F

\u5728 chrome \u6E90\u7801\u4E2D\uFF0C\u4ED6\u5F00\u542F\u4E00\u4E2A\u4E0D\u4F1A\u7ED3\u675F\u7684 for \u5FAA\u73AF\uFF0C\u6BCF\u6B21\u5FAA\u73AF\u4ECE\u6D88\u606F\u961F\u5217\u4E2D\u53D6\u51FA\u7B2C\u4E00\u4E2A\u4EFB\u52A1\u6267\u884C\uFF0C\u800C\u5176\u4ED6\u7EBF\u7A0B\u53EA\u9700\u8981\u5728\u5408\u9002\u7684\u65F6\u5019\u5C06\u4EFB\u52A1\u52A0\u5165\u5230\u961F\u5217\u672B\u5C3E\u5C31\u884C

\u8FC7\u53BB\u628A\u6D88\u606F\u961F\u5217\u7B80\u5355\u7406\u89E3\u4E3A\u5B8F\u961F\u5217\u548C\u5FAE\u961F\u5217\uFF0C\u8FD9\u79CD\u8BF4\u6CD5\u76EE\u524D\u65E0\u6CD5\u6EE1\u8DB3\u590D\u6742\u7684\u6D4F\u89C8\u5668\u73AF\u5883\uFF0C\u53D6\u800C\u4EE3\u4E4B\u7684\u662F\u4E00\u79CD\u66F4\u52A0\u7075\u6D3B\u591A\u53D8\u7684\u5904\u7406\u65B9\u5F0F

\u6839\u636E W3C \u5B98\u65B9\u7684\u89E3\u91CA\uFF0C\u6BCF\u4E2A\u4EFB\u52A1\u6709\u4E0D\u540C\u7684\u7C7B\u578B\uFF0C\u540C\u7C7B\u578B\u7684\u4EFB\u52A1\u5FC5\u987B\u5728\u540C\u4E00\u4E2A\u961F\u5217\uFF0C\u4E0D\u540C\u7684\u4EFB\u52A1\u53EF\u4EE5\u5C5E\u4E8E\u4E0D\u540C\u7684\u961F\u5217\uFF0C

\u4E0D\u540C\u961F\u5217\u6709\u4E0D\u540C\u7684\u4F18\u5148\u7EA7\uFF0C\u5728\u4E00\u6B21\u4E8B\u4EF6\u5FAA\u73AF\u4E2D\uFF0C\u7531\u6D4F\u89C8\u5668\u81EA\u884C\u51B3\u5B9A\u90A3\u4E2A\u961F\u5217\u7684\u4EFB\u52A1\uFF0C

\u4F46\u6D4F\u89C8\u5668\u5FC5\u987B\u6709\u4E00\u4E2A\u5FAE\u961F\u5217\uFF0C\u5FAE\u961F\u5217\u7684\u4EFB\u52A1\u4E00\u5B9A\u5177\u6709\u6700\u9AD8\u7684\u4F18\u5148\u7EA7\uFF0C\u5FC5\u987B\u4F18\u5148\u8C03\u5EA6\u6267\u884C

\u56DE\u7B54\uFF1A \u6D88\u606F\uFF08\u4E8B\u4EF6\uFF09\u5FAA\u73AF\u662F\u6D4F\u89C8\u5668\u7684\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u7684\u5DE5\u4F5C\u65B9\u5F0F\uFF0C\u6BCF\u6B21\u5FAA\u73AF\u4ECE\u6D88\u606F\u961F\u5217\u4E2D\u53D6\u51FA\u7B2C\u4E00\u4E2A\u4EFB\u52A1\u6267\u884C\uFF0C\u6267\u884C\u5B8C\u540E\u4F1A\u67E5\u770B\u5FAE\u961F\u5217\u4E2D\u6709\u65E0\u4EFB\u52A1\uFF0C\u6709\u4EFB\u52A1\u4F1A\u5148\u5C06\u5FAE\u4EFB\u52A1\u961F\u5217\u8FDB\u884C\u4EFB\u52A1\u4F18\u5148\u8C03\u5EA6\u6267\u884C\u5B8C\u6210\uFF0C\u5728\u6B64\u671F\u95F4\u4EA7\u751F\u7684\u300C\u5FAE\u4EFB\u52A1\u300D\uFF0C\u653E\u5165\u300C\u5FAE\u4EFB\u52A1\u961F\u5217\u300D\u672B\u5C3E\uFF0C\u518D\u8FDB\u884C\u4E0B\u4E00\u6B21\u5FAA\u73AF

2. \u5982\u4F55\u7406\u89E3 js \u7684\u5F02\u6B65\uFF1A

Js \u662F\u4E00\u95E8\u5355\u7EBF\u7A0B\u7684\u8BED\u8A00\uFF0C\u8FD9\u662F\u56E0\u4E3A\u5B83\u8FD0\u884C\u5728\u6D4F\u89C8\u5668\u7684\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u4E2D\uFF0C\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u53EA\u6709\u4E00\u4E2A

\u800C\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u627F\u62C5\u7740\u8BF8\u591A\u7684\u5DE5\u4F5C\uFF0C\u6E32\u67D3\u9875\u9762\uFF0C\u6267\u884C js\u90FD\u5728\u5176\u4E2D\u8FD0\u884C\uFF0C

\u5982\u679C\u4F7F\u7528\u540C\u6B65\u7684\u65B9\u5F0F\u5C31\u6781\u6709\u53EF\u80FD\u5BFC\u81F4\u4E3B\u7EBF\u7A0B\u4EA7\u751F\u963B\u585E\uFF0C\u4ECE\u800C\u5BFC\u81F4\u6D88\u606F\u961F\u5217\u4E2D\u7684\u5F88\u591A\u5176\u4ED6\u4EFB\u52A1\u65E0\u6CD5\u5F97\u5230\u6267\u884C\uFF0C\u8FD9\u6837\u4E00\u6765\uFF0C\u4E00\u65B9\u9762\u4F1A\u5BFC\u81F4\u7E41\u5FD9\u7684\u4E3B\u7EBF\u7A0B\u767D\u767D\u6D88\u8017\u65F6\u95F4\uFF0C\u53E6\u4E00\u65B9\u9762\u5BFC\u81F4\u9875\u9762\u65E0\u6CD5\u53CA\u65F6\u66F4\u65B0\uFF0C\u7ED9\u7528\u6237\u9020\u6210\u5361\u6B7B\u73B0\u8C61

\u6240\u4EE5\u6D4F\u89C8\u5668\u91C7\u7528\u5F02\u6B65\u7684\u65B9\u5F0F\u6765\u907F\u514D\uFF0C\u5177\u4F53\u505A\u6CD5\u662F\u5F53\u67D0\u4E9B\u4EFB\u52A1\u53D1\u751F\u65F6\uFF0C\u6BD4\u5982\u8BA1\u65F6\u5668\uFF0C\u7F51\u7EDC\uFF0C\u4E8B\u4EF6\u76D1\u542C\uFF0C

\u4E3B\u7EBF\u7A0B\u5C06\u4EFB\u52A1\u4EA4\u7ED9\u5176\u4ED6\u7EBF\u7A0B\u5904\u7406\uFF0C\u81EA\u8EAB\u7ACB\u5373\u7ED3\u675F\u4EFB\u52A1\u7684\u6267\u884C\uFF0C\u8F6C\u800C\u6267\u884C\u540E\u7EED\u4EE3\u7801\uFF0C

\u5F53\u5176\u4ED6\u7EBF\u7A0B\u5B8C\u6210\u65F6\uFF0C\u5C06\u4E8B\u5148\u4F20\u9012\u7684\u56DE\u8C03\u51FD\u6570\u5305\u88C5\u6210\u4EFB\u52A1\uFF08\u7B80\u5355\u7406\u89E3\u5C31\u662F\u51FD\u6570\uFF09\uFF0C\u52A0\u5165\u5230\u6D88\u606F\u961F\u5217\u7684\u672B\u5C3E\u6392\u961F\uFF0C\u7B49\u5F85\u4E3B\u7EBF\u7A0B\u8C03\u5EA6\u6267\u884C\uFF0C

\u5728\u8FD9\u79CD\u5F02\u6B65\u6A21\u5F0F\u4E0B\uFF0C\u6D4F\u89C8\u5668\u6C38\u4E0D\u963B\u585E\uFF0C\u4ECE\u800C\u6700\u5927\u9650\u5EA6\u7684\u4FDD\u8BC1\u4E86\u4F46\u7EBF\u7A0B\u7684\u6D41\u7545\u8FD0\u884C

3. Js \u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417\uFF1F\u4E3A\u4EC0\u4E48\uFF1F

\u4E0D\u80FD\uFF0C\u56E0\u4E3A

1.\u8BA1\u7B97\u673A\u6CA1\u6709\u539F\u5B50\u949F\uFF0C\u65E0\u6CD5\u505A\u5230\u7CBE\u786E\u8BA1\u65F6

2.\u64CD\u4F5C\u7CFB\u7EDF\u7684\u8BA1\u65F6\u51FD\u6570\u672C\u8EAB\u5C31\u6709\u5C11\u91CF\u8BEF\u5DEE\uFF0C\u7531\u4E8E js \u7684\u8BA1\u65F6\u5668\u6700\u7EC8\u8C03\u7528\u7684\u662F\u64CD\u4F5C\u7CFB\u7EDF\u7684\u51FD\u6570\uFF0C\u4E5F\u5C31\u643A\u5E26\u4E86\u4E00\u4E9B\u504F\u5DEE

3.\u6309\u7167 W3C \u7684\u6807\u51C6\uFF0C\u6D4F\u89C8\u5668\u5B9E\u73B0\u8BA1\u65F6\u5668\u65F6\uFF0C\u5982\u679C\u5D4C\u5957\u7684\u5C42\u7EA7\u8D85\u8FC7 5 \u5C42\uFF0C\u5219\u4F1A\u5E26\u6709 4 \u6BEB\u79D2\u7684\u6700\u5C11\u65F6\u95F4\uFF0C\u8FD9\u6837\u5728\u8BA1\u65F6\u65F6\u95F4\u5C11\u4E8E 4 \u6BEB\u79D2\u662F\u53C8\u5E26\u6765\u4E86\u504F\u5DEE

4\uFF0C\u53D7\u4E8B\u4EF6\u5FAA\u73AF\u7684\u5F71\u54CD\uFF0C\u8BA1\u65F6\u5668\u7684\u56DE\u8C03\u51FD\u6570\u5728\u80FD\u5728\u4E3B\u7EBF\u7A0B\u7A7A\u95F2\u65F6\u8FD0\u884C\uFF0C\u56E0\u6B64\u53C8\u6765\u4E86\u504F\u5DEE

4. \u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417\uFF1F

\u4EFB\u52A1\u6CA1\u6709\u4F18\u5148\u7EA7\uFF0C\u5728\u6D88\u606F\u961F\u5217\u4E2D\u5148\u8FDB\u5148\u51FA

\u4F46\u6D88\u606F\u961F\u5217\u662F\u6709\u4F18\u5148\u7EA7\u7684

\u6839\u636E W3C \u7684\u6700\u65B0\u89E3\u91CA:

  • \u6BCF\u4E2A\u4EFB\u52A1\u90FD\u6709\u4E00\u4E2A\u4EFB\u52A1\u7C7B\u578B\uFF0C\u540C\u4E00\u4E2A\u7C7B\u578B\u7684\u4EFB\u52A1\u5FC5\u987B\u5728\u4E00\u4E2A\u961F\u5217\uFF0C\u4E0D\u540C\u7C7B\u578B\u7684\u4EFB\u52A1\u53EF\u4EE5\u5206\u5C5E\u4E8E\u4E0D\u540C\u7684\u961F\u5217\u3002 \u5728\u4E00\u6B21\u4E8B\u4EF6\u5FAA\u73AF\u4E2D\uFF0C\u6D4F\u89C8\u5668\u53EF\u4EE5\u6839\u636E\u5B9E\u9645\u60C5\u51B5\u4ECE\u4E0D\u540C\u7684\u961F\u5217\u4E2D\u53D6\u51FA\u4EFB\u52A1\u6267\u884C\u3002
  • \u6D4F\u89C8\u5668\u5FC5\u987B\u51C6\u5907\u597D\u4E00\u4E2A\u5FAE\u961F\u5217\uFF0C\u5FAE\u961F\u5217\u4E2D\u7684\u4EFB\u52A1\u4F18\u5148\u6240\u6709\u5176\u4ED6\u4EFB\u52A1\u6267\u884Chttps://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

\u968F\u7740\u6D4F\u89C8\u5668\u7684\u590D\u6742\u5EA6\u6025\u5267\u63D0\u5347\uFF0CW3C \u4E0D\u518D\u4F7F\u7528\u5B8F\u961F\u5217\u7684\u8BF4\u6CD5

',30),n=[p];function a(l,i,c,h,g,d){return t(),o("div",null,n)}const k=e(r,[["render",a]]);export{u as __pageData,k as default}; +import{_ as e,o as t,c as o,a as s}from"./app.88185e12.js";const u=JSON.parse('{"title":"\u4E8B\u4EF6\u5FAA\u73AF","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9610\u8FF0\u4E00\u4E0B js \u7684\u4E8B\u4EF6\u5FAA\u73AF","slug":"_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","link":"#_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","children":[]},{"level":2,"title":"2. \u5982\u4F55\u7406\u89E3 js \u7684\u5F02\u6B65\uFF1A","slug":"_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","link":"#_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","children":[]},{"level":2,"title":"3. Js \u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417\uFF1F\u4E3A\u4EC0\u4E48\uFF1F","slug":"_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","link":"#_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","children":[]},{"level":2,"title":"4. \u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417\uFF1F","slug":"_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","link":"#_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","children":[]}],"relativePath":"pages/interviews/eventLoop.md"}'),r={name:"pages/interviews/eventLoop.md"},p=s('

\u4E8B\u4EF6\u5FAA\u73AF

1. \u5355\u7EBF\u7A0B\u662F\u5F02\u6B65\u4EA7\u751F\u7684\u539F\u56E0

2. \u4E8B\u4EF6\u5FAA\u73AF\u662F\u5F02\u6B65\u7684\u5B9E\u73B0\u65B9\u5F0F

3. \u5FAE\u961F\u5217\u4F18\u5148\u7EA7\u6700\u9AD8

4. \u4E00\u4E2A\u8FDB\u7A0B\u81F3\u5C11\u6709\u4E00\u4E2A\u7EBF\u7A0B

5. \u6D4F\u89C8\u5668\u662F\u4E00\u4E2A\u591A\u8FDB\u7A0B\u591A\u7EBF\u7A0B\u7684\u5E94\u7528\u7A0B\u5E8F

1. \u9610\u8FF0\u4E00\u4E0B js \u7684\u4E8B\u4EF6\u5FAA\u73AF

\u4E8B\u4EF6\u5FAA\u73AF\u53C8\u53EB\u6D88\u606F\u5FAA\u73AF\uFF0C\u662F\u6D4F\u89C8\u5668\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u7684\u5DE5\u4F5C\u65B9\u5F0F

\u5728 chrome \u6E90\u7801\u4E2D\uFF0C\u4ED6\u5F00\u542F\u4E00\u4E2A\u4E0D\u4F1A\u7ED3\u675F\u7684 for \u5FAA\u73AF\uFF0C\u6BCF\u6B21\u5FAA\u73AF\u4ECE\u6D88\u606F\u961F\u5217\u4E2D\u53D6\u51FA\u7B2C\u4E00\u4E2A\u4EFB\u52A1\u6267\u884C\uFF0C\u800C\u5176\u4ED6\u7EBF\u7A0B\u53EA\u9700\u8981\u5728\u5408\u9002\u7684\u65F6\u5019\u5C06\u4EFB\u52A1\u52A0\u5165\u5230\u961F\u5217\u672B\u5C3E\u5C31\u884C

\u8FC7\u53BB\u628A\u6D88\u606F\u961F\u5217\u7B80\u5355\u7406\u89E3\u4E3A\u5B8F\u961F\u5217\u548C\u5FAE\u961F\u5217\uFF0C\u8FD9\u79CD\u8BF4\u6CD5\u76EE\u524D\u65E0\u6CD5\u6EE1\u8DB3\u590D\u6742\u7684\u6D4F\u89C8\u5668\u73AF\u5883\uFF0C\u53D6\u800C\u4EE3\u4E4B\u7684\u662F\u4E00\u79CD\u66F4\u52A0\u7075\u6D3B\u591A\u53D8\u7684\u5904\u7406\u65B9\u5F0F

\u6839\u636E W3C \u5B98\u65B9\u7684\u89E3\u91CA\uFF0C\u6BCF\u4E2A\u4EFB\u52A1\u6709\u4E0D\u540C\u7684\u7C7B\u578B\uFF0C\u540C\u7C7B\u578B\u7684\u4EFB\u52A1\u5FC5\u987B\u5728\u540C\u4E00\u4E2A\u961F\u5217\uFF0C\u4E0D\u540C\u7684\u4EFB\u52A1\u53EF\u4EE5\u5C5E\u4E8E\u4E0D\u540C\u7684\u961F\u5217\uFF0C

\u4E0D\u540C\u961F\u5217\u6709\u4E0D\u540C\u7684\u4F18\u5148\u7EA7\uFF0C\u5728\u4E00\u6B21\u4E8B\u4EF6\u5FAA\u73AF\u4E2D\uFF0C\u7531\u6D4F\u89C8\u5668\u81EA\u884C\u51B3\u5B9A\u90A3\u4E2A\u961F\u5217\u7684\u4EFB\u52A1\uFF0C

\u4F46\u6D4F\u89C8\u5668\u5FC5\u987B\u6709\u4E00\u4E2A\u5FAE\u961F\u5217\uFF0C\u5FAE\u961F\u5217\u7684\u4EFB\u52A1\u4E00\u5B9A\u5177\u6709\u6700\u9AD8\u7684\u4F18\u5148\u7EA7\uFF0C\u5FC5\u987B\u4F18\u5148\u8C03\u5EA6\u6267\u884C

\u56DE\u7B54\uFF1A \u6D88\u606F\uFF08\u4E8B\u4EF6\uFF09\u5FAA\u73AF\u662F\u6D4F\u89C8\u5668\u7684\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u7684\u5DE5\u4F5C\u65B9\u5F0F\uFF0C\u6BCF\u6B21\u5FAA\u73AF\u4ECE\u6D88\u606F\u961F\u5217\u4E2D\u53D6\u51FA\u7B2C\u4E00\u4E2A\u4EFB\u52A1\u6267\u884C\uFF0C\u6267\u884C\u5B8C\u540E\u4F1A\u67E5\u770B\u5FAE\u961F\u5217\u4E2D\u6709\u65E0\u4EFB\u52A1\uFF0C\u6709\u4EFB\u52A1\u4F1A\u5148\u5C06\u5FAE\u4EFB\u52A1\u961F\u5217\u8FDB\u884C\u4EFB\u52A1\u4F18\u5148\u8C03\u5EA6\u6267\u884C\u5B8C\u6210\uFF0C\u5728\u6B64\u671F\u95F4\u4EA7\u751F\u7684\u300C\u5FAE\u4EFB\u52A1\u300D\uFF0C\u653E\u5165\u300C\u5FAE\u4EFB\u52A1\u961F\u5217\u300D\u672B\u5C3E\uFF0C\u518D\u8FDB\u884C\u4E0B\u4E00\u6B21\u5FAA\u73AF

2. \u5982\u4F55\u7406\u89E3 js \u7684\u5F02\u6B65\uFF1A

Js \u662F\u4E00\u95E8\u5355\u7EBF\u7A0B\u7684\u8BED\u8A00\uFF0C\u8FD9\u662F\u56E0\u4E3A\u5B83\u8FD0\u884C\u5728\u6D4F\u89C8\u5668\u7684\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u4E2D\uFF0C\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u53EA\u6709\u4E00\u4E2A

\u800C\u6E32\u67D3\u4E3B\u7EBF\u7A0B\u627F\u62C5\u7740\u8BF8\u591A\u7684\u5DE5\u4F5C\uFF0C\u6E32\u67D3\u9875\u9762\uFF0C\u6267\u884C js\u90FD\u5728\u5176\u4E2D\u8FD0\u884C\uFF0C

\u5982\u679C\u4F7F\u7528\u540C\u6B65\u7684\u65B9\u5F0F\u5C31\u6781\u6709\u53EF\u80FD\u5BFC\u81F4\u4E3B\u7EBF\u7A0B\u4EA7\u751F\u963B\u585E\uFF0C\u4ECE\u800C\u5BFC\u81F4\u6D88\u606F\u961F\u5217\u4E2D\u7684\u5F88\u591A\u5176\u4ED6\u4EFB\u52A1\u65E0\u6CD5\u5F97\u5230\u6267\u884C\uFF0C\u8FD9\u6837\u4E00\u6765\uFF0C\u4E00\u65B9\u9762\u4F1A\u5BFC\u81F4\u7E41\u5FD9\u7684\u4E3B\u7EBF\u7A0B\u767D\u767D\u6D88\u8017\u65F6\u95F4\uFF0C\u53E6\u4E00\u65B9\u9762\u5BFC\u81F4\u9875\u9762\u65E0\u6CD5\u53CA\u65F6\u66F4\u65B0\uFF0C\u7ED9\u7528\u6237\u9020\u6210\u5361\u6B7B\u73B0\u8C61

\u6240\u4EE5\u6D4F\u89C8\u5668\u91C7\u7528\u5F02\u6B65\u7684\u65B9\u5F0F\u6765\u907F\u514D\uFF0C\u5177\u4F53\u505A\u6CD5\u662F\u5F53\u67D0\u4E9B\u4EFB\u52A1\u53D1\u751F\u65F6\uFF0C\u6BD4\u5982\u8BA1\u65F6\u5668\uFF0C\u7F51\u7EDC\uFF0C\u4E8B\u4EF6\u76D1\u542C\uFF0C

\u4E3B\u7EBF\u7A0B\u5C06\u4EFB\u52A1\u4EA4\u7ED9\u5176\u4ED6\u7EBF\u7A0B\u5904\u7406\uFF0C\u81EA\u8EAB\u7ACB\u5373\u7ED3\u675F\u4EFB\u52A1\u7684\u6267\u884C\uFF0C\u8F6C\u800C\u6267\u884C\u540E\u7EED\u4EE3\u7801\uFF0C

\u5F53\u5176\u4ED6\u7EBF\u7A0B\u5B8C\u6210\u65F6\uFF0C\u5C06\u4E8B\u5148\u4F20\u9012\u7684\u56DE\u8C03\u51FD\u6570\u5305\u88C5\u6210\u4EFB\u52A1\uFF08\u7B80\u5355\u7406\u89E3\u5C31\u662F\u51FD\u6570\uFF09\uFF0C\u52A0\u5165\u5230\u6D88\u606F\u961F\u5217\u7684\u672B\u5C3E\u6392\u961F\uFF0C\u7B49\u5F85\u4E3B\u7EBF\u7A0B\u8C03\u5EA6\u6267\u884C\uFF0C

\u5728\u8FD9\u79CD\u5F02\u6B65\u6A21\u5F0F\u4E0B\uFF0C\u6D4F\u89C8\u5668\u6C38\u4E0D\u963B\u585E\uFF0C\u4ECE\u800C\u6700\u5927\u9650\u5EA6\u7684\u4FDD\u8BC1\u4E86\u4F46\u7EBF\u7A0B\u7684\u6D41\u7545\u8FD0\u884C

3. Js \u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417\uFF1F\u4E3A\u4EC0\u4E48\uFF1F

\u4E0D\u80FD\uFF0C\u56E0\u4E3A

1.\u8BA1\u7B97\u673A\u6CA1\u6709\u539F\u5B50\u949F\uFF0C\u65E0\u6CD5\u505A\u5230\u7CBE\u786E\u8BA1\u65F6

2.\u64CD\u4F5C\u7CFB\u7EDF\u7684\u8BA1\u65F6\u51FD\u6570\u672C\u8EAB\u5C31\u6709\u5C11\u91CF\u8BEF\u5DEE\uFF0C\u7531\u4E8E js \u7684\u8BA1\u65F6\u5668\u6700\u7EC8\u8C03\u7528\u7684\u662F\u64CD\u4F5C\u7CFB\u7EDF\u7684\u51FD\u6570\uFF0C\u4E5F\u5C31\u643A\u5E26\u4E86\u4E00\u4E9B\u504F\u5DEE

3.\u6309\u7167 W3C \u7684\u6807\u51C6\uFF0C\u6D4F\u89C8\u5668\u5B9E\u73B0\u8BA1\u65F6\u5668\u65F6\uFF0C\u5982\u679C\u5D4C\u5957\u7684\u5C42\u7EA7\u8D85\u8FC7 5 \u5C42\uFF0C\u5219\u4F1A\u5E26\u6709 4 \u6BEB\u79D2\u7684\u6700\u5C11\u65F6\u95F4\uFF0C\u8FD9\u6837\u5728\u8BA1\u65F6\u65F6\u95F4\u5C11\u4E8E 4 \u6BEB\u79D2\u662F\u53C8\u5E26\u6765\u4E86\u504F\u5DEE

4\uFF0C\u53D7\u4E8B\u4EF6\u5FAA\u73AF\u7684\u5F71\u54CD\uFF0C\u8BA1\u65F6\u5668\u7684\u56DE\u8C03\u51FD\u6570\u5728\u80FD\u5728\u4E3B\u7EBF\u7A0B\u7A7A\u95F2\u65F6\u8FD0\u884C\uFF0C\u56E0\u6B64\u53C8\u6765\u4E86\u504F\u5DEE

4. \u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417\uFF1F

\u4EFB\u52A1\u6CA1\u6709\u4F18\u5148\u7EA7\uFF0C\u5728\u6D88\u606F\u961F\u5217\u4E2D\u5148\u8FDB\u5148\u51FA

\u4F46\u6D88\u606F\u961F\u5217\u662F\u6709\u4F18\u5148\u7EA7\u7684

\u6839\u636E W3C \u7684\u6700\u65B0\u89E3\u91CA:

  • \u6BCF\u4E2A\u4EFB\u52A1\u90FD\u6709\u4E00\u4E2A\u4EFB\u52A1\u7C7B\u578B\uFF0C\u540C\u4E00\u4E2A\u7C7B\u578B\u7684\u4EFB\u52A1\u5FC5\u987B\u5728\u4E00\u4E2A\u961F\u5217\uFF0C\u4E0D\u540C\u7C7B\u578B\u7684\u4EFB\u52A1\u53EF\u4EE5\u5206\u5C5E\u4E8E\u4E0D\u540C\u7684\u961F\u5217\u3002 \u5728\u4E00\u6B21\u4E8B\u4EF6\u5FAA\u73AF\u4E2D\uFF0C\u6D4F\u89C8\u5668\u53EF\u4EE5\u6839\u636E\u5B9E\u9645\u60C5\u51B5\u4ECE\u4E0D\u540C\u7684\u961F\u5217\u4E2D\u53D6\u51FA\u4EFB\u52A1\u6267\u884C\u3002
  • \u6D4F\u89C8\u5668\u5FC5\u987B\u51C6\u5907\u597D\u4E00\u4E2A\u5FAE\u961F\u5217\uFF0C\u5FAE\u961F\u5217\u4E2D\u7684\u4EFB\u52A1\u4F18\u5148\u6240\u6709\u5176\u4ED6\u4EFB\u52A1\u6267\u884Chttps://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

\u968F\u7740\u6D4F\u89C8\u5668\u7684\u590D\u6742\u5EA6\u6025\u5267\u63D0\u5347\uFF0CW3C \u4E0D\u518D\u4F7F\u7528\u5B8F\u961F\u5217\u7684\u8BF4\u6CD5

',30),n=[p];function a(l,i,c,h,g,d){return t(),o("div",null,n)}const k=e(r,[["render",a]]);export{u as __pageData,k as default}; diff --git a/assets/pages_interviews_eventLoop.md.b8f8395a.lean.js b/assets/pages_interviews_eventLoop.md.1d4bd144.lean.js similarity index 95% rename from assets/pages_interviews_eventLoop.md.b8f8395a.lean.js rename to assets/pages_interviews_eventLoop.md.1d4bd144.lean.js index f413f7c..692e9e8 100644 --- a/assets/pages_interviews_eventLoop.md.b8f8395a.lean.js +++ b/assets/pages_interviews_eventLoop.md.1d4bd144.lean.js @@ -1 +1 @@ -import{_ as e,o as t,c as o,a as s}from"./app.cac277bf.js";const u=JSON.parse('{"title":"\u4E8B\u4EF6\u5FAA\u73AF","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9610\u8FF0\u4E00\u4E0B js \u7684\u4E8B\u4EF6\u5FAA\u73AF","slug":"_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","link":"#_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","children":[]},{"level":2,"title":"2. \u5982\u4F55\u7406\u89E3 js \u7684\u5F02\u6B65\uFF1A","slug":"_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","link":"#_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","children":[]},{"level":2,"title":"3. Js \u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417\uFF1F\u4E3A\u4EC0\u4E48\uFF1F","slug":"_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","link":"#_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","children":[]},{"level":2,"title":"4. \u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417\uFF1F","slug":"_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","link":"#_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","children":[]}],"relativePath":"pages/interviews/eventLoop.md"}'),r={name:"pages/interviews/eventLoop.md"},p=s("",30),n=[p];function a(l,i,c,h,g,d){return t(),o("div",null,n)}const k=e(r,[["render",a]]);export{u as __pageData,k as default}; +import{_ as e,o as t,c as o,a as s}from"./app.88185e12.js";const u=JSON.parse('{"title":"\u4E8B\u4EF6\u5FAA\u73AF","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9610\u8FF0\u4E00\u4E0B js \u7684\u4E8B\u4EF6\u5FAA\u73AF","slug":"_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","link":"#_1-\u9610\u8FF0\u4E00\u4E0B-js-\u7684\u4E8B\u4EF6\u5FAA\u73AF","children":[]},{"level":2,"title":"2. \u5982\u4F55\u7406\u89E3 js \u7684\u5F02\u6B65\uFF1A","slug":"_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","link":"#_2-\u5982\u4F55\u7406\u89E3-js-\u7684\u5F02\u6B65","children":[]},{"level":2,"title":"3. Js \u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417\uFF1F\u4E3A\u4EC0\u4E48\uFF1F","slug":"_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","link":"#_3-js-\u4E2D\u7684\u8BA1\u65F6\u5668\u80FD\u505A\u5230\u7CBE\u786E\u8BA1\u65F6\u5417-\u4E3A\u4EC0\u4E48","children":[]},{"level":2,"title":"4. \u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417\uFF1F","slug":"_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","link":"#_4-\u4EFB\u52A1\u6709\u4F18\u5148\u7EA7\u5417","children":[]}],"relativePath":"pages/interviews/eventLoop.md"}'),r={name:"pages/interviews/eventLoop.md"},p=s("",30),n=[p];function a(l,i,c,h,g,d){return t(),o("div",null,n)}const k=e(r,[["render",a]]);export{u as __pageData,k as default}; diff --git a/assets/pages_interviews_git.md.c9866cd5.js b/assets/pages_interviews_git.md.c2a3befc.js similarity index 99% rename from assets/pages_interviews_git.md.c9866cd5.js rename to assets/pages_interviews_git.md.c2a3befc.js index ac57d60..c1f4551 100644 --- a/assets/pages_interviews_git.md.c9866cd5.js +++ b/assets/pages_interviews_git.md.c2a3befc.js @@ -1 +1 @@ -import{_ as e,o as t,c as o,a as i}from"./app.cac277bf.js";const r="/ybhdsg-zhs/assets/image-20210222132936016.16b1b41b.png",l="/ybhdsg-zhs/assets/image-20210222133524146.4df552a5.png",f=JSON.parse('{"title":"GIT \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4F60\u4EEC\u7684 Git \u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","link":"#_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"2. Git \u7684 rebase \u548C merge \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/git.md"}'),a={name:"pages/interviews/git.md"},d=i('

GIT \u76F8\u5173

1. \u4F60\u4EEC\u7684 Git \u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684\uFF1F

\u6BCF\u4E2A\u516C\u53F8\u91C7\u7528\u7684 Git \u5DE5\u4F5C\u6D41\u90FD\u53EF\u80FD\u4F1A\u6709\u5DEE\u522B\uFF0C\u6709\u7684\u6BD4\u8F83\u89C4\u8303\uFF0C\u6709\u7684\u6BD4\u8F83\u968F\u610F\u3002\u5728\u8FD9\u91CC\u4ECB\u7ECD\u4E00\u4E2A\u540D\u4E3A GitFlow \u7684 git \u6807\u51C6\u64CD\u4F5C\u6D41\u7A0B\u3002

\u5728 GitFlow \u6807\u51C6\u4E0B\uFF0C\u6211\u4EEC\u7684 git \u4ED3\u5E93\u9700\u8981\u5305\u542B\u4EE5\u4E0B\u51E0\u4E2A\u5173\u952E\u5206\u652F\uFF1A

  • master\uFF1A\u4E3B\u5206\u652F
  • develop\uFF1A\u4E3B\u5F00\u53D1\u5206\u2F40\u3002\u5305\u542B\u786E\u5B9A\u5373\u5C06\u53D1\u5E03\u7684\u4EE3\u7801
  • feature\uFF1A\u65B0\u529F\u80FD\u5206\u2F40\u3002\u2F00\u4E2A\u65B0\u529F\u80FD\u5BF9\u5E94\u2F00\u4E2A\u5206\u2F40
  • release\uFF1A\u53D1\u5E03\u5206\u2F40\u3002\u53D1\u5E03\u65F6\u2F64\u7684\u5206\u2F40\uFF0C\u2F00\u822C\u6D4B\u8BD5\u9636\u6BB5\u53D1\u73B0\u7684 bug \u5728\u8FD9\u4E2A\u5206\u2F40\u8FDB\u2F8F\u4FEE\u590D
  • hotfix\uFF1A\u70ED\u8865\u4E01\u5206\u652F\u3002\u7528\u4E8E\u4FEE\u6539\u5728\u7EBF\u4E0A\u7248\u672C\u4E2D\u53D1\u73B0\u7684\u4E25\u91CD\u7D27\u6025 bug

GitFlow \u7684\u4E3B\u8981\u4F18\u70B9

  1. \u652F\u6301\u5E76\u2F8F\u5F00\u53D1

\u56E0\u4E3A\u6BCF\u4E2A\u65B0\u529F\u80FD\u90FD\u4F1A\u5EFA\u2F74\u2F00\u4E2A\u65B0\u7684 feature \u5206\u2F40\uFF0C\u4ECE\u2F7D\u548C\u5176\u4ED6\u5DF2\u7ECF\u5B8C\u6210\u7684\u529F\u80FD\u9694\u79BB\u5F00\uFF0C\u4E14\u5F53\u53EA\u6709\u5728\u65B0\u529F\u80FD\u5B8C\u6210\u5F00\u53D1\u7684\u60C5\u51B5\u4E0B\uFF0C\u5176\u5BF9\u5E94\u7684 feature \u5206\u2F40\u624D\u4F1A\u88AB\u5408\u5E76\u5230\u4E3B\u5F00\u53D1\u5206\u2F40\uFF08develop \u5206\u652F\uFF09\u3002

\u53E6\u5916\uFF0C\u5982\u679C\u4F60\u6B63\u5728\u5F00\u53D1\u67D0\u4E2A\u529F\u80FD\u7684\u540C\u65F6\u2F1C\u6709\u2F00\u4E2A\u65B0\u529F\u80FD\u9700\u8981\u5F00\u59CB\u5F00\u53D1\uFF0C\u90A3\u4E48\u4F60\u53EA\u9700\u628A\u5F53\u524D feature \u7684\u4EE3\u7801\u63D0\u4EA4\u540E\uFF0C\u65B0\u5EFA\u53E6\u5916\u2F00\u4E2A feature \u5206\u2F40\u5373\u53EF\u5F00\u53D1\u65B0\u529F\u80FD\u4E86\u3002

\u4F60\u4E5F\u53EF\u4EE5\u968F\u65F6\u5207\u56DE\u4E4B\u524D\u7684\u5176\u4ED6 feature \u5206\u2F40\u7EE7\u7EED\u5B8C\u6210\u8BE5\u529F\u80FD\u7684\u5F00\u53D1\u3002

  • \u534F\u4F5C\u5F00\u53D1

\u56E0\u4E3A\u6BCF\u4E2A feature \u5206\u2F40\u4E0A\u6539\u52A8\u7684\u4EE3\u7801\u90FD\u53EA\u5BF9\u8BE5 feature \u5BF9\u5E94\u7684\u529F\u80FD\u751F\u6548\uFF0C\u6240\u4EE5\u4E0D\u540C feature \u5206\u652F\u4E0A\u7684\u4EE3\u7801\u5728\u5F00\u53D1\u65F6\u4E0D\u4F1A\u4E92\u76F8\u5F71\u54CD\uFF0C\u5927\u5BB6\u53EF\u4EE5\u76F8\u5B89\u65E0\u4E8B\u7684\u5F00\u53D1\u81EA\u5DF1\u8D1F\u8D23\u7684\u529F\u80FD\u3002

\u540C\u65F6\u6211\u4EEC\u53EF\u4EE5\u6839\u636E\u5206\u652F\u7684\u540D\u79F0\uFF0C\u5F88\u5BB9\u6613\u77E5\u9053\u6BCF\u4E2A\u2F08\u90FD\u5728\u505A\u4EC0\u4E48\u529F\u80FD\u3002

  • \u53D1\u5E03\u9636\u6BB5

\u5F53\u2F00\u4E2A\u65B0 feature \u5F00\u53D1\u5B8C\u6210\u65F6\uFF0C\u5B83\u4F1A\u88AB\u5408\u5E76\u5230 develop \u5206\u2F40\uFF0C\u8FD9\u5C31\u610F\u5473\u7740 develop \u5206\u652F\u4E0A\u5305\u542B\u4E86\u6240\u6709\u5DF2\u7ECF\u5F00\u53D1\u5B8C\u6210\u7684\u529F\u80FD\u3002

\u56E0\u6B64\uFF0C\u5728\u5F00\u53D1\u65B0\u7684 feature \u65F6\uFF0C\u6211\u4EEC\u53EA\u9700\u4ECE develop \u5206\u2F40\u6765\u521B\u5EFA\u65B0\u7684\u5206\u2F40\uFF0C\u5373\u53EF\u5728\u65B0\u7684 feature \u5206\u652F\u4E2D\u5305\u542B\u6240\u6709\u5DF2\u5B8C\u6210\u7684\u6700\u65B0\u529F\u80FD\u3002

  • \u2F40\u6301\u7D27\u6025\u4FEE\u590D

hotfix \u5206\u2F40\u662F\u4ECE\u67D0\u4E2A\u5DF2\u7ECF\u53D1\u5E03\u7684 Tag \u4E0A\u521B\u5EFA\u51FA\u6765\u6765\uFF0C\u7528\u4E8E\u7D27\u6025\u4FEE\u590D Bug\u3002

\u8BE5\u7D27\u6025\u4FEE\u590D\u53EA\u5F71\u54CD\u8FD9\u4E2A\u5DF2\u7ECF\u53D1\u5E03\u7684 Tag\uFF0C\u2F7D\u4E0D\u4F1A\u5F71\u54CD\u4F60\u6B63\u5728\u5F00\u53D1\u7684\u5176\u4ED6\u65B0 feature \u3002

\u6CE8\u610F\u70B9

  1. feature \u5206\u2F40\u90FD\u662F\u4ECE develop \u5206\u2F40\u4E0A\u521B\u5EFA\u7684\uFF0C\u5F00\u53D1\u5B8C\u6210\u540E\u518D\u5408\u5E76\u5230 develop \u5206\u2F40\u4E0A\uFF0C\u7B49\u5F85\u53D1\u5E03

  2. \u5F53\u9700\u8981\u53D1\u5E03\u65F6\uFF0C\u6211\u4EEC\u8981\u4ECE develop \u5206\u2F40\u4E0A\u521B\u5EFA\u2F00\u4E2A release \u5206\u2F40\uFF0C\u7136\u540E\u8BE5 release \u5206\u2F40\u4F1A\u53D1\u5E03\u5230\u6D4B\u8BD5\u73AF\u5883\u8FDB\u2F8F\u6D4B\u8BD5\u3002\u5982\u679C\u53D1\u73B0\u95EE\u9898\u7684\u8BDD\uFF0C\u5C31\u4F1A\u76F4\u63A5\u5728\u8BE5\u5206\u2F40\u4E0A\u8FDB\u2F8F\u4FEE\u590D\u3002\u6240\u6709\u95EE\u9898\u4FEE\u590D\u4E4B\u524D\uFF0C\u4F1A\u4E0D\u505C\u91CD\u590D \u53D1\u5E03 > \u6D4B\u8BD5 > \u4FEE\u590D > \u91CD\u65B0\u53D1\u5E03 > \u91CD\u65B0\u6D4B\u8BD5 \u6D41\u7A0B\u3002 \u53D1\u5E03\u7ED3\u675F\uFF0C\u8BE5 release \u5206\u2F40\u4F1A\u88AB\u5408\u5E76\u5230 develop \u4EE5\u53CA master \u5206\u2F40\uFF0C\u4ECE\u2F7D\u4FDD\u8BC1\u4E0D\u4F1A\u6709\u4EE3\u7801\u4E22\u5931

  3. master \u5206\u2F40\u53EA\u8DDF\u8E2A\u5DF2\u7ECF\u53D1\u5E03\u7684\u4EE3\u7801\uFF0C\u5408\u5E76\u5230 master \u4E0A\u7684 commit \u53EA\u80FD\u6765\u2F83 release \u5206\u2F40\u548C hotfix \u5206\u2F40

  4. hotfix \u5206\u2F40\u7684\u4F5C\u2F64\u662F\u7D27\u6025\u4FEE\u590D\u2F00\u4E9B Bug\uFF0C\u5B83\u4EEC\u90FD\u662F\u4ECE master \u5206\u2F40\u4E0A\u7684\u67D0\u4E2A Tag \u5EFA\u2F74\uFF0C\u4FEE\u590D\u7ED3\u675F\u540E\u518D\u4F1A\u88AB\u5408\u5E76\u5230 develop \u548C master \u5206\u2F40\u4E0A

\u53C2\u8003\u6587\u7AE0\uFF1AGit \u5DE5\u4F5C\u6D41

2. Git \u7684 rebase \u548C merge \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F

git rebase \u548C git merge \u4E24\u4E2A\u547D\u4EE4\u90FD\u2F64\u4E8E\u4ECE\u2F00\u4E2A\u5206\u2F40\u83B7\u53D6\u5185\u5BB9\u5E76\u5408\u5E76\u5230\u5F53\u524D\u5206\u2F40\u3002

\u4EE5\u4E00\u4E2A feature/todo \u5206\u2F40\u5408\u5E76\u5230 master\u4E3B\u5206\u2F40\u4E3A\u4F8B\uFF0C\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u5206\u522B\u2F64 rebase \u548C merge \u4F1A\u6709\u4EC0\u4E48\u4E0D\u540C\u3002

\u4F7F\u7528 Merge

image-20210222132936016

merge \u4F1A\u2F83\u52A8\u521B\u5EFA\u2F00\u4E2A\u65B0\u7684 commit\uFF0C \u5982\u679C\u5408\u5E76\u65F6\u9047\u5230\u51B2\u7A81\u7684\u8BDD\uFF0C\u53EA\u9700\u8981\u4FEE\u6539\u540E\u91CD\u65B0 commit\u3002

  • \u4F18\u70B9\uFF1A\u80FD\u8BB0\u5F55\u771F\u5B9E\u7684 commit \u60C5\u51B5\uFF0C\u5305\u62EC\u6BCF\u4E2A\u5206\u2F40\u7684\u8BE6\u60C5

  • \u7F3A\u70B9\uFF1A\u7531\u4E8E\u6BCF\u6B21 merge \u4F1A\u2F83\u52A8\u4EA7\u2F63\u2F00\u4E2A merge commit\uFF0C\u56E0\u6B64\u5728\u4F7F\u2F64\u2F00\u4E9B\u53EF\u89C6\u5316\u7684 git \u5DE5\u5177\u65F6\u4F1A\u770B\u5230\u8FD9\u4E9B\u81EA\u52A8\u4EA7\u751F\u7684 commit\uFF0C\u8FD9\u4E9B commit \u5BF9\u4E8E\u7A0B\u5E8F\u5458\u6765\u8BF4\u6CA1\u6709\u4EC0\u4E48\u7279\u522B\u7684\u610F\u4E49\uFF0C\u53CD\u800C\u4F1A\u5F71\u54CD\u9605\u8BFB

\u4F7F\u7528 Rebase

image-20210222133524146

rebase \u4F1A\u5408\u5E76\u4E4B\u524D\u7684 commit \u5386\u53F2\u3002

  • \u4F18\u70B9\uFF1A\u53EF\u4EE5\u5F97\u5230\u66F4\u7B80\u6D01\u7684\u63D0\u4EA4\u5386\u53F2\uFF0C\u53BB\u6389\u4E86 merge commit

  • \u7F3A\u70B9\uFF1A\u56E0\u4E3A\u5408\u5E76\u800C\u4EA7\u751F\u7684\u4EE3\u7801\u95EE\u9898\uFF0C\u5C31\u4E0D\u5BB9\u6613\u5B9A\u4F4D\uFF0C\u56E0\u4E3A\u4F1A\u91CD\u5199\u63D0\u4EA4\u5386\u53F2\u4FE1\u606F

\u5EFA\u8BAE

  • \u5F53\u9700\u8981\u4FDD\u7559\u8BE6\u7EC6\u7684\u5408\u5E76\u4FE1\u606F\u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u2F64 git merge\uFF0C\u7279\u522B\u662F\u9700\u8981\u5C06\u5206\u2F40\u5408\u5E76\u8FDB master \u5206\u2F40\u65F6

  • \u5F53\u53D1\u73B0\u2F83\u2F30\u4FEE\u6539\u67D0\u4E2A\u529F\u80FD\u65F6\u63D0\u4EA4\u6BD4\u8F83\u9891\u7E41\uFF0C\u5E76\u89C9\u5F97\u8FC7\u591A\u7684\u63D0\u4EA4\u4FE1\u606F\u5BF9\u81EA\u5DF1\u6765\u8BF4\u6CA1\u6709\u5FC5\u8981\uFF0C\u90A3\u4E48\u53EF\u5C1D\u8BD5\u4F7F\u7528 git rebase

',35),c=[d];function p(s,g,m,n,u,_){return t(),o("div",null,c)}const b=e(a,[["render",p]]);export{f as __pageData,b as default}; +import{_ as e,o as t,c as o,a as i}from"./app.88185e12.js";const r="/ybhdsg-zhs/assets/image-20210222132936016.16b1b41b.png",l="/ybhdsg-zhs/assets/image-20210222133524146.4df552a5.png",f=JSON.parse('{"title":"GIT \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4F60\u4EEC\u7684 Git \u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","link":"#_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"2. Git \u7684 rebase \u548C merge \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/git.md"}'),a={name:"pages/interviews/git.md"},d=i('

GIT \u76F8\u5173

1. \u4F60\u4EEC\u7684 Git \u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684\uFF1F

\u6BCF\u4E2A\u516C\u53F8\u91C7\u7528\u7684 Git \u5DE5\u4F5C\u6D41\u90FD\u53EF\u80FD\u4F1A\u6709\u5DEE\u522B\uFF0C\u6709\u7684\u6BD4\u8F83\u89C4\u8303\uFF0C\u6709\u7684\u6BD4\u8F83\u968F\u610F\u3002\u5728\u8FD9\u91CC\u4ECB\u7ECD\u4E00\u4E2A\u540D\u4E3A GitFlow \u7684 git \u6807\u51C6\u64CD\u4F5C\u6D41\u7A0B\u3002

\u5728 GitFlow \u6807\u51C6\u4E0B\uFF0C\u6211\u4EEC\u7684 git \u4ED3\u5E93\u9700\u8981\u5305\u542B\u4EE5\u4E0B\u51E0\u4E2A\u5173\u952E\u5206\u652F\uFF1A

  • master\uFF1A\u4E3B\u5206\u652F
  • develop\uFF1A\u4E3B\u5F00\u53D1\u5206\u2F40\u3002\u5305\u542B\u786E\u5B9A\u5373\u5C06\u53D1\u5E03\u7684\u4EE3\u7801
  • feature\uFF1A\u65B0\u529F\u80FD\u5206\u2F40\u3002\u2F00\u4E2A\u65B0\u529F\u80FD\u5BF9\u5E94\u2F00\u4E2A\u5206\u2F40
  • release\uFF1A\u53D1\u5E03\u5206\u2F40\u3002\u53D1\u5E03\u65F6\u2F64\u7684\u5206\u2F40\uFF0C\u2F00\u822C\u6D4B\u8BD5\u9636\u6BB5\u53D1\u73B0\u7684 bug \u5728\u8FD9\u4E2A\u5206\u2F40\u8FDB\u2F8F\u4FEE\u590D
  • hotfix\uFF1A\u70ED\u8865\u4E01\u5206\u652F\u3002\u7528\u4E8E\u4FEE\u6539\u5728\u7EBF\u4E0A\u7248\u672C\u4E2D\u53D1\u73B0\u7684\u4E25\u91CD\u7D27\u6025 bug

GitFlow \u7684\u4E3B\u8981\u4F18\u70B9

  1. \u652F\u6301\u5E76\u2F8F\u5F00\u53D1

\u56E0\u4E3A\u6BCF\u4E2A\u65B0\u529F\u80FD\u90FD\u4F1A\u5EFA\u2F74\u2F00\u4E2A\u65B0\u7684 feature \u5206\u2F40\uFF0C\u4ECE\u2F7D\u548C\u5176\u4ED6\u5DF2\u7ECF\u5B8C\u6210\u7684\u529F\u80FD\u9694\u79BB\u5F00\uFF0C\u4E14\u5F53\u53EA\u6709\u5728\u65B0\u529F\u80FD\u5B8C\u6210\u5F00\u53D1\u7684\u60C5\u51B5\u4E0B\uFF0C\u5176\u5BF9\u5E94\u7684 feature \u5206\u2F40\u624D\u4F1A\u88AB\u5408\u5E76\u5230\u4E3B\u5F00\u53D1\u5206\u2F40\uFF08develop \u5206\u652F\uFF09\u3002

\u53E6\u5916\uFF0C\u5982\u679C\u4F60\u6B63\u5728\u5F00\u53D1\u67D0\u4E2A\u529F\u80FD\u7684\u540C\u65F6\u2F1C\u6709\u2F00\u4E2A\u65B0\u529F\u80FD\u9700\u8981\u5F00\u59CB\u5F00\u53D1\uFF0C\u90A3\u4E48\u4F60\u53EA\u9700\u628A\u5F53\u524D feature \u7684\u4EE3\u7801\u63D0\u4EA4\u540E\uFF0C\u65B0\u5EFA\u53E6\u5916\u2F00\u4E2A feature \u5206\u2F40\u5373\u53EF\u5F00\u53D1\u65B0\u529F\u80FD\u4E86\u3002

\u4F60\u4E5F\u53EF\u4EE5\u968F\u65F6\u5207\u56DE\u4E4B\u524D\u7684\u5176\u4ED6 feature \u5206\u2F40\u7EE7\u7EED\u5B8C\u6210\u8BE5\u529F\u80FD\u7684\u5F00\u53D1\u3002

  • \u534F\u4F5C\u5F00\u53D1

\u56E0\u4E3A\u6BCF\u4E2A feature \u5206\u2F40\u4E0A\u6539\u52A8\u7684\u4EE3\u7801\u90FD\u53EA\u5BF9\u8BE5 feature \u5BF9\u5E94\u7684\u529F\u80FD\u751F\u6548\uFF0C\u6240\u4EE5\u4E0D\u540C feature \u5206\u652F\u4E0A\u7684\u4EE3\u7801\u5728\u5F00\u53D1\u65F6\u4E0D\u4F1A\u4E92\u76F8\u5F71\u54CD\uFF0C\u5927\u5BB6\u53EF\u4EE5\u76F8\u5B89\u65E0\u4E8B\u7684\u5F00\u53D1\u81EA\u5DF1\u8D1F\u8D23\u7684\u529F\u80FD\u3002

\u540C\u65F6\u6211\u4EEC\u53EF\u4EE5\u6839\u636E\u5206\u652F\u7684\u540D\u79F0\uFF0C\u5F88\u5BB9\u6613\u77E5\u9053\u6BCF\u4E2A\u2F08\u90FD\u5728\u505A\u4EC0\u4E48\u529F\u80FD\u3002

  • \u53D1\u5E03\u9636\u6BB5

\u5F53\u2F00\u4E2A\u65B0 feature \u5F00\u53D1\u5B8C\u6210\u65F6\uFF0C\u5B83\u4F1A\u88AB\u5408\u5E76\u5230 develop \u5206\u2F40\uFF0C\u8FD9\u5C31\u610F\u5473\u7740 develop \u5206\u652F\u4E0A\u5305\u542B\u4E86\u6240\u6709\u5DF2\u7ECF\u5F00\u53D1\u5B8C\u6210\u7684\u529F\u80FD\u3002

\u56E0\u6B64\uFF0C\u5728\u5F00\u53D1\u65B0\u7684 feature \u65F6\uFF0C\u6211\u4EEC\u53EA\u9700\u4ECE develop \u5206\u2F40\u6765\u521B\u5EFA\u65B0\u7684\u5206\u2F40\uFF0C\u5373\u53EF\u5728\u65B0\u7684 feature \u5206\u652F\u4E2D\u5305\u542B\u6240\u6709\u5DF2\u5B8C\u6210\u7684\u6700\u65B0\u529F\u80FD\u3002

  • \u2F40\u6301\u7D27\u6025\u4FEE\u590D

hotfix \u5206\u2F40\u662F\u4ECE\u67D0\u4E2A\u5DF2\u7ECF\u53D1\u5E03\u7684 Tag \u4E0A\u521B\u5EFA\u51FA\u6765\u6765\uFF0C\u7528\u4E8E\u7D27\u6025\u4FEE\u590D Bug\u3002

\u8BE5\u7D27\u6025\u4FEE\u590D\u53EA\u5F71\u54CD\u8FD9\u4E2A\u5DF2\u7ECF\u53D1\u5E03\u7684 Tag\uFF0C\u2F7D\u4E0D\u4F1A\u5F71\u54CD\u4F60\u6B63\u5728\u5F00\u53D1\u7684\u5176\u4ED6\u65B0 feature \u3002

\u6CE8\u610F\u70B9

  1. feature \u5206\u2F40\u90FD\u662F\u4ECE develop \u5206\u2F40\u4E0A\u521B\u5EFA\u7684\uFF0C\u5F00\u53D1\u5B8C\u6210\u540E\u518D\u5408\u5E76\u5230 develop \u5206\u2F40\u4E0A\uFF0C\u7B49\u5F85\u53D1\u5E03

  2. \u5F53\u9700\u8981\u53D1\u5E03\u65F6\uFF0C\u6211\u4EEC\u8981\u4ECE develop \u5206\u2F40\u4E0A\u521B\u5EFA\u2F00\u4E2A release \u5206\u2F40\uFF0C\u7136\u540E\u8BE5 release \u5206\u2F40\u4F1A\u53D1\u5E03\u5230\u6D4B\u8BD5\u73AF\u5883\u8FDB\u2F8F\u6D4B\u8BD5\u3002\u5982\u679C\u53D1\u73B0\u95EE\u9898\u7684\u8BDD\uFF0C\u5C31\u4F1A\u76F4\u63A5\u5728\u8BE5\u5206\u2F40\u4E0A\u8FDB\u2F8F\u4FEE\u590D\u3002\u6240\u6709\u95EE\u9898\u4FEE\u590D\u4E4B\u524D\uFF0C\u4F1A\u4E0D\u505C\u91CD\u590D \u53D1\u5E03 > \u6D4B\u8BD5 > \u4FEE\u590D > \u91CD\u65B0\u53D1\u5E03 > \u91CD\u65B0\u6D4B\u8BD5 \u6D41\u7A0B\u3002 \u53D1\u5E03\u7ED3\u675F\uFF0C\u8BE5 release \u5206\u2F40\u4F1A\u88AB\u5408\u5E76\u5230 develop \u4EE5\u53CA master \u5206\u2F40\uFF0C\u4ECE\u2F7D\u4FDD\u8BC1\u4E0D\u4F1A\u6709\u4EE3\u7801\u4E22\u5931

  3. master \u5206\u2F40\u53EA\u8DDF\u8E2A\u5DF2\u7ECF\u53D1\u5E03\u7684\u4EE3\u7801\uFF0C\u5408\u5E76\u5230 master \u4E0A\u7684 commit \u53EA\u80FD\u6765\u2F83 release \u5206\u2F40\u548C hotfix \u5206\u2F40

  4. hotfix \u5206\u2F40\u7684\u4F5C\u2F64\u662F\u7D27\u6025\u4FEE\u590D\u2F00\u4E9B Bug\uFF0C\u5B83\u4EEC\u90FD\u662F\u4ECE master \u5206\u2F40\u4E0A\u7684\u67D0\u4E2A Tag \u5EFA\u2F74\uFF0C\u4FEE\u590D\u7ED3\u675F\u540E\u518D\u4F1A\u88AB\u5408\u5E76\u5230 develop \u548C master \u5206\u2F40\u4E0A

\u53C2\u8003\u6587\u7AE0\uFF1AGit \u5DE5\u4F5C\u6D41

2. Git \u7684 rebase \u548C merge \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F

git rebase \u548C git merge \u4E24\u4E2A\u547D\u4EE4\u90FD\u2F64\u4E8E\u4ECE\u2F00\u4E2A\u5206\u2F40\u83B7\u53D6\u5185\u5BB9\u5E76\u5408\u5E76\u5230\u5F53\u524D\u5206\u2F40\u3002

\u4EE5\u4E00\u4E2A feature/todo \u5206\u2F40\u5408\u5E76\u5230 master\u4E3B\u5206\u2F40\u4E3A\u4F8B\uFF0C\u6211\u4EEC\u6765\u770B\u4E00\u4E0B\u5206\u522B\u2F64 rebase \u548C merge \u4F1A\u6709\u4EC0\u4E48\u4E0D\u540C\u3002

\u4F7F\u7528 Merge

image-20210222132936016

merge \u4F1A\u2F83\u52A8\u521B\u5EFA\u2F00\u4E2A\u65B0\u7684 commit\uFF0C \u5982\u679C\u5408\u5E76\u65F6\u9047\u5230\u51B2\u7A81\u7684\u8BDD\uFF0C\u53EA\u9700\u8981\u4FEE\u6539\u540E\u91CD\u65B0 commit\u3002

  • \u4F18\u70B9\uFF1A\u80FD\u8BB0\u5F55\u771F\u5B9E\u7684 commit \u60C5\u51B5\uFF0C\u5305\u62EC\u6BCF\u4E2A\u5206\u2F40\u7684\u8BE6\u60C5

  • \u7F3A\u70B9\uFF1A\u7531\u4E8E\u6BCF\u6B21 merge \u4F1A\u2F83\u52A8\u4EA7\u2F63\u2F00\u4E2A merge commit\uFF0C\u56E0\u6B64\u5728\u4F7F\u2F64\u2F00\u4E9B\u53EF\u89C6\u5316\u7684 git \u5DE5\u5177\u65F6\u4F1A\u770B\u5230\u8FD9\u4E9B\u81EA\u52A8\u4EA7\u751F\u7684 commit\uFF0C\u8FD9\u4E9B commit \u5BF9\u4E8E\u7A0B\u5E8F\u5458\u6765\u8BF4\u6CA1\u6709\u4EC0\u4E48\u7279\u522B\u7684\u610F\u4E49\uFF0C\u53CD\u800C\u4F1A\u5F71\u54CD\u9605\u8BFB

\u4F7F\u7528 Rebase

image-20210222133524146

rebase \u4F1A\u5408\u5E76\u4E4B\u524D\u7684 commit \u5386\u53F2\u3002

  • \u4F18\u70B9\uFF1A\u53EF\u4EE5\u5F97\u5230\u66F4\u7B80\u6D01\u7684\u63D0\u4EA4\u5386\u53F2\uFF0C\u53BB\u6389\u4E86 merge commit

  • \u7F3A\u70B9\uFF1A\u56E0\u4E3A\u5408\u5E76\u800C\u4EA7\u751F\u7684\u4EE3\u7801\u95EE\u9898\uFF0C\u5C31\u4E0D\u5BB9\u6613\u5B9A\u4F4D\uFF0C\u56E0\u4E3A\u4F1A\u91CD\u5199\u63D0\u4EA4\u5386\u53F2\u4FE1\u606F

\u5EFA\u8BAE

  • \u5F53\u9700\u8981\u4FDD\u7559\u8BE6\u7EC6\u7684\u5408\u5E76\u4FE1\u606F\u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u2F64 git merge\uFF0C\u7279\u522B\u662F\u9700\u8981\u5C06\u5206\u2F40\u5408\u5E76\u8FDB master \u5206\u2F40\u65F6

  • \u5F53\u53D1\u73B0\u2F83\u2F30\u4FEE\u6539\u67D0\u4E2A\u529F\u80FD\u65F6\u63D0\u4EA4\u6BD4\u8F83\u9891\u7E41\uFF0C\u5E76\u89C9\u5F97\u8FC7\u591A\u7684\u63D0\u4EA4\u4FE1\u606F\u5BF9\u81EA\u5DF1\u6765\u8BF4\u6CA1\u6709\u5FC5\u8981\uFF0C\u90A3\u4E48\u53EF\u5C1D\u8BD5\u4F7F\u7528 git rebase

',35),c=[d];function p(s,g,m,n,u,_){return t(),o("div",null,c)}const b=e(a,[["render",p]]);export{f as __pageData,b as default}; diff --git a/assets/pages_interviews_git.md.c9866cd5.lean.js b/assets/pages_interviews_git.md.c2a3befc.lean.js similarity index 93% rename from assets/pages_interviews_git.md.c9866cd5.lean.js rename to assets/pages_interviews_git.md.c2a3befc.lean.js index 5e08e69..1335a17 100644 --- a/assets/pages_interviews_git.md.c9866cd5.lean.js +++ b/assets/pages_interviews_git.md.c2a3befc.lean.js @@ -1 +1 @@ -import{_ as e,o as t,c as o,a as i}from"./app.cac277bf.js";const r="/ybhdsg-zhs/assets/image-20210222132936016.16b1b41b.png",l="/ybhdsg-zhs/assets/image-20210222133524146.4df552a5.png",f=JSON.parse('{"title":"GIT \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4F60\u4EEC\u7684 Git \u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","link":"#_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"2. Git \u7684 rebase \u548C merge \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/git.md"}'),a={name:"pages/interviews/git.md"},d=i("",35),c=[d];function p(s,g,m,n,u,_){return t(),o("div",null,c)}const b=e(a,[["render",p]]);export{f as __pageData,b as default}; +import{_ as e,o as t,c as o,a as i}from"./app.88185e12.js";const r="/ybhdsg-zhs/assets/image-20210222132936016.16b1b41b.png",l="/ybhdsg-zhs/assets/image-20210222133524146.4df552a5.png",f=JSON.parse('{"title":"GIT \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4F60\u4EEC\u7684 Git \u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","link":"#_1-\u4F60\u4EEC\u7684-git-\u5DE5\u4F5C\u6D41\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"2. Git \u7684 rebase \u548C merge \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_2-git-\u7684-rebase-\u548C-merge-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/git.md"}'),a={name:"pages/interviews/git.md"},d=i("",35),c=[d];function p(s,g,m,n,u,_){return t(),o("div",null,c)}const b=e(a,[["render",p]]);export{f as __pageData,b as default}; diff --git a/assets/pages_interviews_handwriteFn.md.269f1a12.js b/assets/pages_interviews_handwriteFn.md.9554aa8e.js similarity index 83% rename from assets/pages_interviews_handwriteFn.md.269f1a12.js rename to assets/pages_interviews_handwriteFn.md.9554aa8e.js index fc93df4..87af246 100644 --- a/assets/pages_interviews_handwriteFn.md.269f1a12.js +++ b/assets/pages_interviews_handwriteFn.md.9554aa8e.js @@ -1,4 +1,4 @@ -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u5E38\u89C1\u624B\u5199\u51FD\u6570","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u624B\u52A8\u5B9E\u73B0Array.prototype.map\u65B9\u6CD5","slug":"_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","link":"#_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5","link":"#\u8BED\u6CD5","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570","link":"#\u53C2\u6570","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528","link":"#\u5E94\u7528","children":[]},{"level":3,"title":"1 \u5728\u4E00\u4E2A String \u4E0A\u4F7F\u7528 map \u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684 ASCII \u7801\u7EC4\u6210\u7684\u6570\u7EC4\uFF1A","slug":"_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","link":"#_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","children":[]},{"level":3,"title":"2. \u904D\u5386\u7528 querySelectorAll \u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC\uFF0C\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879\uFF0C\u5E76\u5C06\u5176\u6253\u5370\uFF1A","slug":"_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","link":"#_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","children":[]},{"level":3,"title":"3. \u9519\u8BEF\u4F7F\u7528","slug":"_3-\u9519\u8BEF\u4F7F\u7528","link":"#_3-\u9519\u8BEF\u4F7F\u7528","children":[]}]},{"level":2,"title":"2. \u624B\u52A8\u5B9E\u73B0Array.prototype.filter\u65B9\u6CD5","slug":"_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","link":"#_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-1","link":"#\u8BED\u6CD5-1","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-1","link":"#\u53C2\u6570-1","children":[]}]},{"level":2,"title":"3. \u624B\u52A8\u5B9E\u73B0Array.prototype.reduce\u65B9\u6CD5","slug":"_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","link":"#_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","children":[{"level":3,"title":"3.2 \u7B2C\u4E00\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.2 \u7B2C\u4E8C\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.3 \u7B2C\u4E09\u79CD\u7248\u672C","slug":"_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","link":"#_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","children":[]},{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-2","link":"#\u8BED\u6CD5-2","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-2","link":"#\u53C2\u6570-2","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528-1","link":"#\u5E94\u7528-1","children":[]},{"level":3,"title":"1. \u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","slug":"_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","link":"#_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","children":[]},{"level":3,"title":"2. \u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","slug":"_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","link":"#_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","children":[]},{"level":3,"title":"3. \u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","slug":"_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","link":"#_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","children":[]},{"level":3,"title":"4. \u6309\u5C5E\u6027\u5BF9 object \u5206\u7C7B","slug":"_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","link":"#_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","children":[]},{"level":3,"title":"5. \u6570\u7EC4\u53BB\u91CD","slug":"_5-\u6570\u7EC4\u53BB\u91CD","link":"#_5-\u6570\u7EC4\u53BB\u91CD","children":[]},{"level":3,"title":"6. \u4F7F\u7528 .reduce() \u66FF\u6362 .filter().map()","slug":"_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","link":"#_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","children":[]},{"level":3,"title":"7. \u6309\u987A\u5E8F\u8FD0\u884C Promise","slug":"_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","link":"#_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","children":[]}]},{"level":2,"title":"4. Object.create()","slug":"_4-object-create","link":"#_4-object-create","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-3","link":"#\u8BED\u6CD5-3","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-3","link":"#\u53C2\u6570-3","children":[]},{"level":3,"title":"\u8FD4\u56DE\u503C","slug":"\u8FD4\u56DE\u503C","link":"#\u8FD4\u56DE\u503C","children":[]},{"level":3,"title":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61\uFF1F","slug":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","link":"#\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","children":[]}]},{"level":2,"title":"5. \u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D b \u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","slug":"_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","link":"#_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","children":[]},{"level":2,"title":"6. Function.prototype.call","slug":"_6-function-prototype-call","link":"#_6-function-prototype-call","children":[]},{"level":2,"title":"7. Function.prototype.apply","slug":"_7-function-prototype-apply","link":"#_7-function-prototype-apply","children":[]},{"level":2,"title":"8. Function.prototype.bind","slug":"_8-function-prototype-bind","link":"#_8-function-prototype-bind","children":[]},{"level":2,"title":"9. New \u5173\u952E\u5B57","slug":"_9-new-\u5173\u952E\u5B57","link":"#_9-new-\u5173\u952E\u5B57","children":[]},{"level":2,"title":"10. \u6D45\u62F7\u8D1D","slug":"_10-\u6D45\u62F7\u8D1D","link":"#_10-\u6D45\u62F7\u8D1D","children":[]},{"level":2,"title":"11. \u6DF1\u62F7\u8D1D","slug":"_11-\u6DF1\u62F7\u8D1D","link":"#_11-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"12. \u8282\u6D41","slug":"_12-\u8282\u6D41","link":"#_12-\u8282\u6D41","children":[]},{"level":2,"title":"13. \u9632\u6296","slug":"_13-\u9632\u6296","link":"#_13-\u9632\u6296","children":[]},{"level":2,"title":"14. \u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","slug":"_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","link":"#_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","children":[]},{"level":2,"title":"15. \u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","slug":"_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","link":"#_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","children":[]}],"relativePath":"pages/interviews/handwriteFn.md"}'),p={name:"pages/interviews/handwriteFn.md"},o=l(`

\u5E38\u89C1\u624B\u5199\u51FD\u6570

\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417

1. \u624B\u52A8\u5B9E\u73B0Array.prototype.map\u65B9\u6CD5

js
// \u7B2C\u4E00\u79CD\u65B9\u5F0F
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u5E38\u89C1\u624B\u5199\u51FD\u6570","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u624B\u52A8\u5B9E\u73B0Array.prototype.map\u65B9\u6CD5","slug":"_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","link":"#_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5","link":"#\u8BED\u6CD5","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570","link":"#\u53C2\u6570","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528","link":"#\u5E94\u7528","children":[]},{"level":3,"title":"1 \u5728\u4E00\u4E2A String \u4E0A\u4F7F\u7528 map \u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684 ASCII \u7801\u7EC4\u6210\u7684\u6570\u7EC4\uFF1A","slug":"_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","link":"#_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","children":[]},{"level":3,"title":"2. \u904D\u5386\u7528 querySelectorAll \u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC\uFF0C\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879\uFF0C\u5E76\u5C06\u5176\u6253\u5370\uFF1A","slug":"_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","link":"#_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","children":[]},{"level":3,"title":"3. \u9519\u8BEF\u4F7F\u7528","slug":"_3-\u9519\u8BEF\u4F7F\u7528","link":"#_3-\u9519\u8BEF\u4F7F\u7528","children":[]}]},{"level":2,"title":"2. \u624B\u52A8\u5B9E\u73B0Array.prototype.filter\u65B9\u6CD5","slug":"_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","link":"#_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-1","link":"#\u8BED\u6CD5-1","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-1","link":"#\u53C2\u6570-1","children":[]}]},{"level":2,"title":"3. \u624B\u52A8\u5B9E\u73B0Array.prototype.reduce\u65B9\u6CD5","slug":"_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","link":"#_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","children":[{"level":3,"title":"3.2 \u7B2C\u4E00\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.2 \u7B2C\u4E8C\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.3 \u7B2C\u4E09\u79CD\u7248\u672C","slug":"_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","link":"#_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","children":[]},{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-2","link":"#\u8BED\u6CD5-2","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-2","link":"#\u53C2\u6570-2","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528-1","link":"#\u5E94\u7528-1","children":[]},{"level":3,"title":"1. \u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","slug":"_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","link":"#_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","children":[]},{"level":3,"title":"2. \u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","slug":"_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","link":"#_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","children":[]},{"level":3,"title":"3. \u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","slug":"_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","link":"#_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","children":[]},{"level":3,"title":"4. \u6309\u5C5E\u6027\u5BF9 object \u5206\u7C7B","slug":"_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","link":"#_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","children":[]},{"level":3,"title":"5. \u6570\u7EC4\u53BB\u91CD","slug":"_5-\u6570\u7EC4\u53BB\u91CD","link":"#_5-\u6570\u7EC4\u53BB\u91CD","children":[]},{"level":3,"title":"6. \u4F7F\u7528 .reduce() \u66FF\u6362 .filter().map()","slug":"_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","link":"#_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","children":[]},{"level":3,"title":"7. \u6309\u987A\u5E8F\u8FD0\u884C Promise","slug":"_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","link":"#_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","children":[]}]},{"level":2,"title":"4. Object.create()","slug":"_4-object-create","link":"#_4-object-create","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-3","link":"#\u8BED\u6CD5-3","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-3","link":"#\u53C2\u6570-3","children":[]},{"level":3,"title":"\u8FD4\u56DE\u503C","slug":"\u8FD4\u56DE\u503C","link":"#\u8FD4\u56DE\u503C","children":[]},{"level":3,"title":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61\uFF1F","slug":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","link":"#\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","children":[]}]},{"level":2,"title":"5. \u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D b \u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","slug":"_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","link":"#_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","children":[]},{"level":2,"title":"10. \u6D45\u62F7\u8D1D","slug":"_10-\u6D45\u62F7\u8D1D","link":"#_10-\u6D45\u62F7\u8D1D","children":[]},{"level":2,"title":"11. \u6DF1\u62F7\u8D1D","slug":"_11-\u6DF1\u62F7\u8D1D","link":"#_11-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"12. \u8282\u6D41","slug":"_12-\u8282\u6D41","link":"#_12-\u8282\u6D41","children":[]},{"level":2,"title":"13. \u9632\u6296","slug":"_13-\u9632\u6296","link":"#_13-\u9632\u6296","children":[]},{"level":2,"title":"14. \u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","slug":"_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","link":"#_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","children":[]},{"level":2,"title":"15. \u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","slug":"_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","link":"#_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","children":[]}],"relativePath":"pages/interviews/handwriteFn.md"}'),p={name:"pages/interviews/handwriteFn.md"},o=l(`

\u5E38\u89C1\u624B\u5199\u51FD\u6570

\u8FD9\u4E9B\u624B\u5199\u4F60\u90FD\u4F1A\u5417

1. \u624B\u52A8\u5B9E\u73B0Array.prototype.map\u65B9\u6CD5

js
// \u7B2C\u4E00\u79CD\u65B9\u5F0F
 function map(arr, callBack) {
   if (!Array.isArray(arr) || !arr.length || typeof callBack !== "function") {
     return [];
@@ -271,82 +271,6 @@ import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{
   let a, b;
   a = b = 0;
 }
-

this \u6307\u5411

  • \u8BCD\u6CD5\u4F5C\u7528\u57DF\u5728\u8BCD\u6CD5\u5206\u6790\u9636\u6BB5\u5C31\u88AB\u786E\u5B9A\u4E86\uFF08\u5199\u4EE3\u7801\u7684\u65F6\u5019\u5C31\u786E\u5B9A\u4E86\uFF09\uFF0Cjs \u662F\u89E3\u91CA\u578B\u8BED\u8A00\uFF0C\u6CA1\u6709\u7F16\u8BD1\u65F6\uFF0C\u6709\u9884\u7F16\u8BD1\u9636\u6BB5

  • java \u662F\u7F16\u8BD1\u578B\u8BED\u8A00\uFF1Ajava \u7684\u4EE3\u7801\u5C31\u662F\u88AB\u7F16\u8BD1\u4E3A .class \u6587\u4EF6\u624D\u80FD\u8FD0\u884C\uFF0C\u8FD9\u4E2A\u7F16\u8BD1\u8FC7\u7A0B\u5C31\u662F\u7F16\u8BD1\u65F6\uFF0C\u8FD0\u884C .class \u6587\u4EF6\u5C31\u662F\u8FD0\u884C\u65F6\u3002

  • \u7BAD\u5934\u51FD\u6570\u672C\u8EAB\u6CA1\u6709this\uFF0C\u56E0\u4E3A\u57FA\u4E8E\u95ED\u5305(\u672C\u8EAB\u6CA1\u6709\uFF0C\u53BB\u5916\u5C42\u5BFB\u627E)\uFF0C\u4F1A\u53BB\u5916\u5C42\u5BFB\u627Ethis\uFF0C\u95ED\u5305\u5C5E\u4E8E\u8BCD\u6CD5\u4F5C\u7528\u57DF\uFF08\u8BCD\u6CD5\u4F5C\u7528\u57DF\u662F\u5728\u7F16\u8BD1\u65F6\u786E\u5B9A\u7684\uFF09

  • \u7BAD\u5934\u51FD\u6570this\u6307\u5411\u8C01\uFF0C\u51B3\u5B9A\u4E8E\u5B83\u5B9A\u4E49\u7684\u4F4D\u7F6E\uFF0C\u800C\u4E0D\u662F\u8FD0\u884C\u7684\u4F4D\u7F6E\uFF08\u56E0\u4E3Athis => \u95ED\u5305 => \u8BCD\u6CD5\u4F5C\u7528\u57DF => \u7F16\u8BD1\u65F6\u6001\u786E\u5B9A\uFF08js \u6CA1\u6709\u7F16\u8BD1\uFF0C\u4F46\u662F\u6709\u9884\u7F16\u8BD1\uFF0C\u7F16\u8BD1\u65F6\u6001\u5C31\u786E\u5B9A\u4E86\u8BCD\u6CD5\u4F5C\u7528\u57DF\uFF09

  • B.apply(A, arguments)\uFF1A\u5373 A \u5BF9\u8C61\u5E94\u7528 B \u5BF9\u8C61\u7684\u65B9\u6CD5 arguments\u4E3A\u6570\u7EC4

  • B.call(A, arguments)\uFF1A\u5373 A \u5BF9\u8C61\u5E94\u7528 B \u5BF9\u8C61\u7684\u65B9\u6CD5 arguments\u4E3A\u5217\u8868\u9879

  • const newFn = fn.bind(A, arguments)\u7684\u4F5C\u7528\u662F\u53EA\u4FEE\u6539this\u6307\u5411\uFF0C\u4F46\u4E0D\u4F1A\u7ACB\u5373\u6267\u884C fn\uFF1B\u4F1A\u8FD4\u56DE\u4E00\u4E2A\u4FEE\u6539\u4E86 this \u6307\u5411\u540E\u7684 fn\u3002\u9700\u8981\u8C03\u7528\u624D\u4F1A\u6267\u884C:bind(thisArg, arg1, arg2, arg3, ...)()\u3002bind \u7684\u4F20\u53C2\u548C call \u76F8\u540C\u3002

6. Function.prototype.call

call() \u65B9\u6CD5\u4F7F\u7528\u4E00\u4E2A\u6307\u5B9A\u7684 this \u503C\u548C\u5355\u72EC\u7ED9\u51FA\u7684\u4E00\u4E2A\u6216\u591A\u4E2A\u53C2\u6570\u6765\u8C03\u7528\u4E00\u4E2A\u51FD\u6570\u3002

\u57FA\u672C\u601D\u60F3\u662F\u628A fn.call(obj,args)\u4E2D\u7684 fn \u8D4B\u503C\u4E3A obj \u7684\u5C5E\u6027\uFF0C\u7136\u540E\u8C03\u7528 obj.fn \u5373\u53EF\u5B9E\u73B0 fn \u4E2D this \u6307\u5411\u7684\u6539\u53D8

js
Function.prototype._call = function (ctx, ...args) {
-  // \u5224\u65AD\u4F20\u5165\u7684 ctx \u662F\u5426\u4E3A\u7A7A\uFF0C\u4E3A\u7A7A\u5C31\u6302\u5728 \u5168\u5C40window\u4E0A\uFF0C\u4E0D\u7136\u5C31\u521B\u5EFA\u4E00\u4E2A\u5BF9\u8C61
-  const o = ctx == undefined ? window : Object(ctx);
-  // \u7ED9 ctx \u5BF9\u8C61\u6DFB\u52A0\u72EC\u4E00\u65E0\u4E8C\u7684\u5C5E\u6027
-  const key = Symbol();
-  // \u7ED1\u5B9A this\uFF0C\u8C01\u8C03\u7528\uFF0C this \u5C31\u4E3A\u8C01\uFF0C\u8FD9\u91CC\u4E3A obj.fun,(\u8FD9\u91CC\u662F\u4E3A\u4E86\u5B9E\u73B0call\uFF0C\u6539\u53D8this\u6307\u5411\uFF0C\u5C31\u662F\u8BA9\u4F7F\u7528\u8FD9\u4E2A\u51FD\u6570\u7684this\uFF0C\u6307\u5411 ctx)
-  // \u8FD9\u91CC\u7684 o = { name: "22",Symbol: fun(...args) }
-  o[key] = this;
-  // \u6267\u884C\u51FD\u6570\uFF0C\u5F97\u5230\u8FD4\u56DE\u7ED3\u679C
-  const result = o[key](...args);
-  // \u5220\u9664\u8BE5\u5C5E\u6027
-  delete o[key];
-  return result;
-};
-
-const obj = {
-  name: "11",
-  fun(...args) {
-    console.log(this.name);
-  },
-};
-
-const obj2 = { name: "22" };
-obj.fun(); // 11
-obj.fun.call(obj2); // 22
-obj.fun._call(obj2, 1, 2); // 22 1 2
-

7. Function.prototype.apply

js
Function.prototype.myApply = function (ctx) {
-  const context = ctx == undefined ? window : Object(ctx);
-  let key = Symbol();
-  context[key] = this;
-  let result;
-  if (arguments[1]) {
-    //\u5224\u65AD\u662F\u5426\u6709\u7B2C\u4E8C\u4E2A\u53C2\u6570
-    result = context[key](...arguments[1]); // \u8C03\u7528\u8BE5\u65B9\u6CD5\uFF0C\u8BE5\u65B9\u6CD5this\u6307\u5411context
-  } else {
-    result = context[key]; // \u8C03\u7528\u8BE5\u65B9\u6CD5\uFF0C\u8BE5\u65B9\u6CD5this\u6307\u5411context
-  }
-  delete context[key];
-  return result;
-};
-
-const r = Math.max.myApply(null, [12, 3]);
-const r1 = Math.max.apply(null, [12, 3]);
-console.log(r); // 12
-console.log(r1); //  12
-

8. Function.prototype.bind

bind() \u65B9\u6CD5\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684\u51FD\u6570\uFF0C\u5728 bind() \u88AB\u8C03\u7528\u65F6\uFF0C\u8FD9\u4E2A\u65B0\u51FD\u6570\u7684 this \u88AB\u6307\u5B9A\u4E3A bind() \u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF0C\u800C\u5176\u4F59\u53C2\u6570\u5C06\u4F5C\u4E3A\u65B0\u51FD\u6570\u7684\u53C2\u6570\uFF0C\u4F9B\u8C03\u7528\u65F6\u4F7F\u7528\u3002

js
const obj = {
-  name: "11",
-  fun() {
-    console.log(this.name);
-  },
-};
-Function.prototype._bind = function (ctx, ...args) {
-  // \u83B7\u53D6\u51FD\u6570\u4F53
-  const _self = this;
-  // \u7528\u4E00\u4E2A\u65B0\u51FD\u6570\u5305\u88F9\uFF0C\u907F\u514D\u7ACB\u5373\u6267\u884C
-  const bindFn = (...reset) => {
-    return _self.call(ctx, ...args, ...reset);
-  };
-  return bindFn;
-};
-const obj2 = { name: "22" };
-obj.fun(); // 11
-const fn = obj.fun.bind(obj2);
-const fn2 = obj.fun._bind(obj2);
-fn(); // 22
-fn2(); // 22
-

9. New \u5173\u952E\u5B57

new \u8FD0\u7B97\u7B26\u521B\u5EFA\u4E00\u4E2A\u7528\u6237\u5B9A\u4E49\u7684\u5BF9\u8C61\u7C7B\u578B\u7684\u5B9E\u4F8B\u6216\u5177\u6709\u6784\u9020\u51FD\u6570\u7684\u5185\u7F6E\u5BF9\u8C61\u7684\u5B9E\u4F8B\u3002

js
const _new = function(constructor) {
-  // \u521B\u5EFA\u4E00\u4E2A\u7A7A\u5BF9\u8C61
-  const obj = {}
-  // \u539F\u578B\u94FE\u6302\u8F7D
-  obj.__proto__ = constructor.prototype;
-  // \u5C06obj \u590D\u5236\u7ED9\u6784\u9020\u4F53\u4E2D\u7684 this\uFF0C\u5E76\u4E14\u8FD4\u56DE\u7ED3\u679C
-  const result = constructor.call(obj)
-  // \u5982\u679C\u8FD4\u56DE\u5BF9\u8C61\u4E0D\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u5219\u76F4\u63A5\u8FD4\u56DE\u521A\u624D\u521B\u5EFA\u7684\u5BF9\u8C61
-  return typeof result === 'object' && result !== null ? : result : obj
-}
 

10. \u6D45\u62F7\u8D1D

js
const _shallowClone = (target) => {
   // \u57FA\u672C\u6570\u636E\u7C7B\u578B\u76F4\u63A5\u8FD4\u56DE
   if (typeof target === "object" && target !== null) {
@@ -542,4 +466,4 @@ import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{
 };
 
 main();
-
`,98),e=[o];function c(t,r,y,F,D,A){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default}; +
`,85),e=[o];function c(t,r,y,F,D,A){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default}; diff --git a/assets/pages_interviews_handwriteFn.md.269f1a12.lean.js b/assets/pages_interviews_handwriteFn.md.9554aa8e.lean.js similarity index 78% rename from assets/pages_interviews_handwriteFn.md.269f1a12.lean.js rename to assets/pages_interviews_handwriteFn.md.9554aa8e.lean.js index aa380dd..d6910ca 100644 --- a/assets/pages_interviews_handwriteFn.md.269f1a12.lean.js +++ b/assets/pages_interviews_handwriteFn.md.9554aa8e.lean.js @@ -1 +1 @@ -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u5E38\u89C1\u624B\u5199\u51FD\u6570","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u624B\u52A8\u5B9E\u73B0Array.prototype.map\u65B9\u6CD5","slug":"_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","link":"#_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5","link":"#\u8BED\u6CD5","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570","link":"#\u53C2\u6570","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528","link":"#\u5E94\u7528","children":[]},{"level":3,"title":"1 \u5728\u4E00\u4E2A String \u4E0A\u4F7F\u7528 map \u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684 ASCII \u7801\u7EC4\u6210\u7684\u6570\u7EC4\uFF1A","slug":"_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","link":"#_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","children":[]},{"level":3,"title":"2. \u904D\u5386\u7528 querySelectorAll \u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC\uFF0C\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879\uFF0C\u5E76\u5C06\u5176\u6253\u5370\uFF1A","slug":"_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","link":"#_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","children":[]},{"level":3,"title":"3. \u9519\u8BEF\u4F7F\u7528","slug":"_3-\u9519\u8BEF\u4F7F\u7528","link":"#_3-\u9519\u8BEF\u4F7F\u7528","children":[]}]},{"level":2,"title":"2. \u624B\u52A8\u5B9E\u73B0Array.prototype.filter\u65B9\u6CD5","slug":"_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","link":"#_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-1","link":"#\u8BED\u6CD5-1","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-1","link":"#\u53C2\u6570-1","children":[]}]},{"level":2,"title":"3. \u624B\u52A8\u5B9E\u73B0Array.prototype.reduce\u65B9\u6CD5","slug":"_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","link":"#_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","children":[{"level":3,"title":"3.2 \u7B2C\u4E00\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.2 \u7B2C\u4E8C\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.3 \u7B2C\u4E09\u79CD\u7248\u672C","slug":"_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","link":"#_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","children":[]},{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-2","link":"#\u8BED\u6CD5-2","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-2","link":"#\u53C2\u6570-2","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528-1","link":"#\u5E94\u7528-1","children":[]},{"level":3,"title":"1. \u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","slug":"_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","link":"#_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","children":[]},{"level":3,"title":"2. \u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","slug":"_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","link":"#_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","children":[]},{"level":3,"title":"3. \u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","slug":"_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","link":"#_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","children":[]},{"level":3,"title":"4. \u6309\u5C5E\u6027\u5BF9 object \u5206\u7C7B","slug":"_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","link":"#_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","children":[]},{"level":3,"title":"5. \u6570\u7EC4\u53BB\u91CD","slug":"_5-\u6570\u7EC4\u53BB\u91CD","link":"#_5-\u6570\u7EC4\u53BB\u91CD","children":[]},{"level":3,"title":"6. \u4F7F\u7528 .reduce() \u66FF\u6362 .filter().map()","slug":"_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","link":"#_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","children":[]},{"level":3,"title":"7. \u6309\u987A\u5E8F\u8FD0\u884C Promise","slug":"_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","link":"#_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","children":[]}]},{"level":2,"title":"4. Object.create()","slug":"_4-object-create","link":"#_4-object-create","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-3","link":"#\u8BED\u6CD5-3","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-3","link":"#\u53C2\u6570-3","children":[]},{"level":3,"title":"\u8FD4\u56DE\u503C","slug":"\u8FD4\u56DE\u503C","link":"#\u8FD4\u56DE\u503C","children":[]},{"level":3,"title":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61\uFF1F","slug":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","link":"#\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","children":[]}]},{"level":2,"title":"5. \u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D b \u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","slug":"_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","link":"#_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","children":[]},{"level":2,"title":"6. Function.prototype.call","slug":"_6-function-prototype-call","link":"#_6-function-prototype-call","children":[]},{"level":2,"title":"7. Function.prototype.apply","slug":"_7-function-prototype-apply","link":"#_7-function-prototype-apply","children":[]},{"level":2,"title":"8. Function.prototype.bind","slug":"_8-function-prototype-bind","link":"#_8-function-prototype-bind","children":[]},{"level":2,"title":"9. New \u5173\u952E\u5B57","slug":"_9-new-\u5173\u952E\u5B57","link":"#_9-new-\u5173\u952E\u5B57","children":[]},{"level":2,"title":"10. \u6D45\u62F7\u8D1D","slug":"_10-\u6D45\u62F7\u8D1D","link":"#_10-\u6D45\u62F7\u8D1D","children":[]},{"level":2,"title":"11. \u6DF1\u62F7\u8D1D","slug":"_11-\u6DF1\u62F7\u8D1D","link":"#_11-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"12. \u8282\u6D41","slug":"_12-\u8282\u6D41","link":"#_12-\u8282\u6D41","children":[]},{"level":2,"title":"13. \u9632\u6296","slug":"_13-\u9632\u6296","link":"#_13-\u9632\u6296","children":[]},{"level":2,"title":"14. \u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","slug":"_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","link":"#_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","children":[]},{"level":2,"title":"15. \u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","slug":"_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","link":"#_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","children":[]}],"relativePath":"pages/interviews/handwriteFn.md"}'),p={name:"pages/interviews/handwriteFn.md"},o=l("",98),e=[o];function c(t,r,y,F,D,A){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default}; +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u5E38\u89C1\u624B\u5199\u51FD\u6570","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u624B\u52A8\u5B9E\u73B0Array.prototype.map\u65B9\u6CD5","slug":"_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","link":"#_1-\u624B\u52A8\u5B9E\u73B0array-prototype-map\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5","link":"#\u8BED\u6CD5","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570","link":"#\u53C2\u6570","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528","link":"#\u5E94\u7528","children":[]},{"level":3,"title":"1 \u5728\u4E00\u4E2A String \u4E0A\u4F7F\u7528 map \u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684 ASCII \u7801\u7EC4\u6210\u7684\u6570\u7EC4\uFF1A","slug":"_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","link":"#_1-\u5728\u4E00\u4E2A-string-\u4E0A\u4F7F\u7528-map-\u65B9\u6CD5\u83B7\u53D6\u5B57\u7B26\u4E32\u4E2D\u6BCF\u4E2A\u5B57\u7B26\u6240\u5BF9\u5E94\u7684-ascii-\u7801\u7EC4\u6210\u7684\u6570\u7EC4","children":[]},{"level":3,"title":"2. \u904D\u5386\u7528 querySelectorAll \u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC\uFF0C\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879\uFF0C\u5E76\u5C06\u5176\u6253\u5370\uFF1A","slug":"_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","link":"#_2-\u904D\u5386\u7528-queryselectorall-\u5F97\u5230\u7684\u52A8\u6001\u5BF9\u8C61\u96C6\u5408\u3002\u5728\u8FD9\u91CC-\u6211\u4EEC\u83B7\u5F97\u4E86\u6587\u6863\u91CC\u6240\u6709\u9009\u4E2D\u7684\u9009\u9879-\u5E76\u5C06\u5176\u6253\u5370","children":[]},{"level":3,"title":"3. \u9519\u8BEF\u4F7F\u7528","slug":"_3-\u9519\u8BEF\u4F7F\u7528","link":"#_3-\u9519\u8BEF\u4F7F\u7528","children":[]}]},{"level":2,"title":"2. \u624B\u52A8\u5B9E\u73B0Array.prototype.filter\u65B9\u6CD5","slug":"_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","link":"#_2-\u624B\u52A8\u5B9E\u73B0array-prototype-filter\u65B9\u6CD5","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-1","link":"#\u8BED\u6CD5-1","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-1","link":"#\u53C2\u6570-1","children":[]}]},{"level":2,"title":"3. \u624B\u52A8\u5B9E\u73B0Array.prototype.reduce\u65B9\u6CD5","slug":"_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","link":"#_3-\u624B\u52A8\u5B9E\u73B0array-prototype-reduce\u65B9\u6CD5","children":[{"level":3,"title":"3.2 \u7B2C\u4E00\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E00\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.2 \u7B2C\u4E8C\u79CD\u7248\u672C","slug":"_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","link":"#_3-2-\u7B2C\u4E8C\u79CD\u7248\u672C","children":[]},{"level":3,"title":"3.3 \u7B2C\u4E09\u79CD\u7248\u672C","slug":"_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","link":"#_3-3-\u7B2C\u4E09\u79CD\u7248\u672C","children":[]},{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-2","link":"#\u8BED\u6CD5-2","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-2","link":"#\u53C2\u6570-2","children":[]},{"level":3,"title":"\u5E94\u7528","slug":"\u5E94\u7528-1","link":"#\u5E94\u7528-1","children":[]},{"level":3,"title":"1. \u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","slug":"_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","link":"#_1-\u7D2F\u52A0\u5BF9\u8C61\u6570\u7EC4\u91CC\u7684\u503C","children":[]},{"level":3,"title":"2. \u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","slug":"_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","link":"#_2-\u5C06\u4E8C\u7EF4\u6570\u7EC4\u8F6C\u5316\u4E3A\u4E00\u7EF4","children":[]},{"level":3,"title":"3. \u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","slug":"_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","link":"#_3-\u8BA1\u7B97\u6570\u7EC4\u4E2D\u6BCF\u4E2A\u5143\u7D20\u51FA\u73B0\u7684\u6B21\u6570","children":[]},{"level":3,"title":"4. \u6309\u5C5E\u6027\u5BF9 object \u5206\u7C7B","slug":"_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","link":"#_4-\u6309\u5C5E\u6027\u5BF9-object-\u5206\u7C7B","children":[]},{"level":3,"title":"5. \u6570\u7EC4\u53BB\u91CD","slug":"_5-\u6570\u7EC4\u53BB\u91CD","link":"#_5-\u6570\u7EC4\u53BB\u91CD","children":[]},{"level":3,"title":"6. \u4F7F\u7528 .reduce() \u66FF\u6362 .filter().map()","slug":"_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","link":"#_6-\u4F7F\u7528-reduce-\u66FF\u6362-filter-map","children":[]},{"level":3,"title":"7. \u6309\u987A\u5E8F\u8FD0\u884C Promise","slug":"_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","link":"#_7-\u6309\u987A\u5E8F\u8FD0\u884C-promise","children":[]}]},{"level":2,"title":"4. Object.create()","slug":"_4-object-create","link":"#_4-object-create","children":[{"level":3,"title":"\u8BED\u6CD5","slug":"\u8BED\u6CD5-3","link":"#\u8BED\u6CD5-3","children":[]},{"level":3,"title":"\u53C2\u6570","slug":"\u53C2\u6570-3","link":"#\u53C2\u6570-3","children":[]},{"level":3,"title":"\u8FD4\u56DE\u503C","slug":"\u8FD4\u56DE\u503C","link":"#\u8FD4\u56DE\u503C","children":[]},{"level":3,"title":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61\uFF1F","slug":"\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","link":"#\u5982\u4F55\u521B\u5EFA\u6CA1\u6709\u539F\u578B\u7684\u5BF9\u8C61","children":[]}]},{"level":2,"title":"5. \u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D b \u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","slug":"_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","link":"#_5-\u4E3A\u4EC0\u4E48\u8C03\u7528\u6B64\u51FD\u6570\u65F6\u6B64\u4EE3\u7801\u4E2D-b-\u4F1A\u53D8\u6210\u5168\u5C40\u53D8\u91CF","children":[]},{"level":2,"title":"10. \u6D45\u62F7\u8D1D","slug":"_10-\u6D45\u62F7\u8D1D","link":"#_10-\u6D45\u62F7\u8D1D","children":[]},{"level":2,"title":"11. \u6DF1\u62F7\u8D1D","slug":"_11-\u6DF1\u62F7\u8D1D","link":"#_11-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"12. \u8282\u6D41","slug":"_12-\u8282\u6D41","link":"#_12-\u8282\u6D41","children":[]},{"level":2,"title":"13. \u9632\u6296","slug":"_13-\u9632\u6296","link":"#_13-\u9632\u6296","children":[]},{"level":2,"title":"14. \u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","slug":"_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","link":"#_14-\u53D1\u5E03\u8BA2\u9605\u8005\u6A21\u5F0F","children":[]},{"level":2,"title":"15. \u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","slug":"_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","link":"#_15-\u4F7F\u7528\u5F02\u6B65\u5B9E\u73B0\u7EA2\u7EFF\u706F\u6548\u679C","children":[]}],"relativePath":"pages/interviews/handwriteFn.md"}'),p={name:"pages/interviews/handwriteFn.md"},o=l("",85),e=[o];function c(t,r,y,F,D,A){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default}; diff --git a/assets/pages_interviews_html.md.213e3dd8.js b/assets/pages_interviews_html.md.45009bf3.js similarity index 99% rename from assets/pages_interviews_html.md.213e3dd8.js rename to assets/pages_interviews_html.md.45009bf3.js index 4bffcd4..d4647ed 100644 --- a/assets/pages_interviews_html.md.213e3dd8.js +++ b/assets/pages_interviews_html.md.45009bf3.js @@ -1,4 +1,4 @@ -import{_ as s,o as l,c as a,a as n}from"./app.cac277bf.js";const o="/ybhdsg-zhs/assets/image-20210209172314832.90193bfe.png",h=JSON.parse('{"title":"HTML \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTML \u6587\u4EF6\u4E2D\u7684 DOCTYPE \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"2. \u524D\u7F00\u4E3A data- \u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","link":"#_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. HTML5 \u5BF9\u6BD4 HTML4 \u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904\uFF1F","slug":"_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","link":"#_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","children":[]},{"level":2,"title":"4. meta \u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5\uFF1F","slug":"_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","link":"#_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","children":[]},{"level":2,"title":"5. img \u6807\u7B7E\u7684 srcset \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"6. \u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316: Picture \u6807\u7B7E","slug":"_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","link":"#_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","children":[]},{"level":2,"title":"7. \u5728 script \u6807\u7B7E\u4E0A\u4F7F\u7528 defer \u548C async \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"8. \u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","slug":"_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","link":"#_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","children":[{"level":3,"title":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}]},{"level":2,"title":"9. HTML\u3001XML\u3001XHTML \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"10. \u8C08\u8C08\u4F60\u5BF9 HTML \u8BED\u4E49\u5316\u7684\u7406\u89E3\uFF1F","slug":"_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","link":"#_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","children":[]},{"level":2,"title":"11. \u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684\uFF1F","slug":"_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","link":"#_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","children":[]},{"level":2,"title":"12. \u4EC0\u4E48\u662F reflow(\u56DE\u6D41)\uFF1F","slug":"_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","link":"#_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","children":[]},{"level":2,"title":"Reflow \u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97 layout \u6811","slug":"reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","link":"#reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F repaint(\u91CD\u7ED8)\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","link":"#_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","children":[]},{"level":2,"title":"Repaint \u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","slug":"repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","link":"#repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","children":[]},{"level":2,"title":"14. \u6D4F\u89C8\u5668 reflow(\u56DE\u6D41)\u4E0E repaint(\u91CD\u6392)\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"15. \u4E3A\u4EC0\u4E48 transform \u7684\u6548\u7387\u9AD8\uFF1F","slug":"_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","link":"#_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","children":[]},{"level":2,"title":"16. \u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8\uFF1F","slug":"_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","link":"#_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","children":[]},{"level":2,"title":"17. \u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709 div \u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","slug":"_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","link":"#_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","children":[]}],"relativePath":"pages/interviews/html.md"}'),t={name:"pages/interviews/html.md"},e=n(`

HTML \u9762\u8BD5\u76F8\u5173

1. HTML \u6587\u4EF6\u4E2D\u7684 DOCTYPE \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F

HTML \u8D85\u6587\u672C\u6807\u8BB0\u8BED\u8A00: \u662F\u4E00\u4E2A\u6807\u8BB0\u8BED\u8A00, \u5C31\u6709\u5BF9\u5E94\u7684\u8BED\u6CD5\u6807\u51C6 DOCTYPE \u5373 Document Type\uFF0C\u7F51\u9875\u6587\u4EF6\u7684\u6587\u6863\u7C7B\u578B\u6807\u51C6\u3002 \u4E3B\u8981\u4F5C\u7528\u662F\u544A\u8BC9\u6D4F\u89C8\u5668\u7684\u89E3\u6790\u5668\u8981\u4F7F\u7528\u54EA\u79CD HTML \u89C4\u8303 \u6216 XHTML \u89C4\u8303 \u6765\u89E3\u6790\u9875\u9762\u3002 DOCTYPE \u9700\u8981\u653E\u7F6E\u5728 HTML \u6587\u4EF6\u7684 <html>\u6807\u7B7E\u4E4B\u524D\uFF0C\u5982\uFF1A

html
<!DOCTYPE html>
+import{_ as s,o as l,c as a,a as n}from"./app.88185e12.js";const o="/ybhdsg-zhs/assets/image-20210209172314832.90193bfe.png",h=JSON.parse('{"title":"HTML \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTML \u6587\u4EF6\u4E2D\u7684 DOCTYPE \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"2. \u524D\u7F00\u4E3A data- \u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","link":"#_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. HTML5 \u5BF9\u6BD4 HTML4 \u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904\uFF1F","slug":"_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","link":"#_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","children":[]},{"level":2,"title":"4. meta \u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5\uFF1F","slug":"_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","link":"#_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","children":[]},{"level":2,"title":"5. img \u6807\u7B7E\u7684 srcset \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"6. \u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316: Picture \u6807\u7B7E","slug":"_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","link":"#_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","children":[]},{"level":2,"title":"7. \u5728 script \u6807\u7B7E\u4E0A\u4F7F\u7528 defer \u548C async \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"8. \u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","slug":"_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","link":"#_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","children":[{"level":3,"title":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}]},{"level":2,"title":"9. HTML\u3001XML\u3001XHTML \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"10. \u8C08\u8C08\u4F60\u5BF9 HTML \u8BED\u4E49\u5316\u7684\u7406\u89E3\uFF1F","slug":"_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","link":"#_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","children":[]},{"level":2,"title":"11. \u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684\uFF1F","slug":"_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","link":"#_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","children":[]},{"level":2,"title":"12. \u4EC0\u4E48\u662F reflow(\u56DE\u6D41)\uFF1F","slug":"_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","link":"#_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","children":[]},{"level":2,"title":"Reflow \u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97 layout \u6811","slug":"reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","link":"#reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F repaint(\u91CD\u7ED8)\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","link":"#_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","children":[]},{"level":2,"title":"Repaint \u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","slug":"repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","link":"#repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","children":[]},{"level":2,"title":"14. \u6D4F\u89C8\u5668 reflow(\u56DE\u6D41)\u4E0E repaint(\u91CD\u6392)\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"15. \u4E3A\u4EC0\u4E48 transform \u7684\u6548\u7387\u9AD8\uFF1F","slug":"_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","link":"#_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","children":[]},{"level":2,"title":"16. \u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8\uFF1F","slug":"_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","link":"#_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","children":[]},{"level":2,"title":"17. \u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709 div \u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","slug":"_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","link":"#_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","children":[]}],"relativePath":"pages/interviews/html.md"}'),t={name:"pages/interviews/html.md"},e=n(`

HTML \u9762\u8BD5\u76F8\u5173

1. HTML \u6587\u4EF6\u4E2D\u7684 DOCTYPE \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F

HTML \u8D85\u6587\u672C\u6807\u8BB0\u8BED\u8A00: \u662F\u4E00\u4E2A\u6807\u8BB0\u8BED\u8A00, \u5C31\u6709\u5BF9\u5E94\u7684\u8BED\u6CD5\u6807\u51C6 DOCTYPE \u5373 Document Type\uFF0C\u7F51\u9875\u6587\u4EF6\u7684\u6587\u6863\u7C7B\u578B\u6807\u51C6\u3002 \u4E3B\u8981\u4F5C\u7528\u662F\u544A\u8BC9\u6D4F\u89C8\u5668\u7684\u89E3\u6790\u5668\u8981\u4F7F\u7528\u54EA\u79CD HTML \u89C4\u8303 \u6216 XHTML \u89C4\u8303 \u6765\u89E3\u6790\u9875\u9762\u3002 DOCTYPE \u9700\u8981\u653E\u7F6E\u5728 HTML \u6587\u4EF6\u7684 <html>\u6807\u7B7E\u4E4B\u524D\uFF0C\u5982\uFF1A

html
<!DOCTYPE html>
 <html>
   ...
 </html>
diff --git a/assets/pages_interviews_html.md.213e3dd8.lean.js b/assets/pages_interviews_html.md.45009bf3.lean.js
similarity index 98%
rename from assets/pages_interviews_html.md.213e3dd8.lean.js
rename to assets/pages_interviews_html.md.45009bf3.lean.js
index 75bef3b..e7a0bbe 100644
--- a/assets/pages_interviews_html.md.213e3dd8.lean.js
+++ b/assets/pages_interviews_html.md.45009bf3.lean.js
@@ -1 +1 @@
-import{_ as s,o as l,c as a,a as n}from"./app.cac277bf.js";const o="/ybhdsg-zhs/assets/image-20210209172314832.90193bfe.png",h=JSON.parse('{"title":"HTML \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTML \u6587\u4EF6\u4E2D\u7684 DOCTYPE \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"2. \u524D\u7F00\u4E3A data- \u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","link":"#_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. HTML5 \u5BF9\u6BD4 HTML4 \u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904\uFF1F","slug":"_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","link":"#_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","children":[]},{"level":2,"title":"4. meta \u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5\uFF1F","slug":"_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","link":"#_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","children":[]},{"level":2,"title":"5. img \u6807\u7B7E\u7684 srcset \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"6. \u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316: Picture \u6807\u7B7E","slug":"_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","link":"#_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","children":[]},{"level":2,"title":"7. \u5728 script \u6807\u7B7E\u4E0A\u4F7F\u7528 defer \u548C async \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"8. \u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","slug":"_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","link":"#_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","children":[{"level":3,"title":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}]},{"level":2,"title":"9. HTML\u3001XML\u3001XHTML \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"10. \u8C08\u8C08\u4F60\u5BF9 HTML \u8BED\u4E49\u5316\u7684\u7406\u89E3\uFF1F","slug":"_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","link":"#_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","children":[]},{"level":2,"title":"11. \u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684\uFF1F","slug":"_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","link":"#_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","children":[]},{"level":2,"title":"12. \u4EC0\u4E48\u662F reflow(\u56DE\u6D41)\uFF1F","slug":"_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","link":"#_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","children":[]},{"level":2,"title":"Reflow \u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97 layout \u6811","slug":"reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","link":"#reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F repaint(\u91CD\u7ED8)\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","link":"#_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","children":[]},{"level":2,"title":"Repaint \u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","slug":"repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","link":"#repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","children":[]},{"level":2,"title":"14. \u6D4F\u89C8\u5668 reflow(\u56DE\u6D41)\u4E0E repaint(\u91CD\u6392)\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"15. \u4E3A\u4EC0\u4E48 transform \u7684\u6548\u7387\u9AD8\uFF1F","slug":"_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","link":"#_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","children":[]},{"level":2,"title":"16. \u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8\uFF1F","slug":"_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","link":"#_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","children":[]},{"level":2,"title":"17. \u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709 div \u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","slug":"_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","link":"#_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","children":[]}],"relativePath":"pages/interviews/html.md"}'),t={name:"pages/interviews/html.md"},e=n("",128),p=[e];function r(c,i,d,D,y,F){return l(),a("div",null,p)}const u=s(t,[["render",r]]);export{h as __pageData,u as default};
+import{_ as s,o as l,c as a,a as n}from"./app.88185e12.js";const o="/ybhdsg-zhs/assets/image-20210209172314832.90193bfe.png",h=JSON.parse('{"title":"HTML \u9762\u8BD5\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTML \u6587\u4EF6\u4E2D\u7684 DOCTYPE \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_1-html-\u6587\u4EF6\u4E2D\u7684-doctype-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"2. \u524D\u7F00\u4E3A data- \u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","link":"#_2-\u524D\u7F00\u4E3A-data-\u5F00\u5934\u7684\u5143\u7D20\u5C5E\u6027\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. HTML5 \u5BF9\u6BD4 HTML4 \u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904\uFF1F","slug":"_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","link":"#_3-html5-\u5BF9\u6BD4-html4-\u6709\u54EA\u4E9B\u4E0D\u540C\u4E4B\u5904","children":[]},{"level":2,"title":"4. meta \u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5\uFF1F","slug":"_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","link":"#_4-meta-\u6807\u7B7E\u6709\u54EA\u4E9B\u5E38\u7528\u7528\u6CD5","children":[]},{"level":2,"title":"5. img \u6807\u7B7E\u7684 srcset \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_5-img-\u6807\u7B7E\u7684-srcset-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"6. \u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316: Picture \u6807\u7B7E","slug":"_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","link":"#_6-\u54CD\u5E94\u5F0F\u56FE\u7247\u5904\u7406\u4F18\u5316-picture-\u6807\u7B7E","children":[]},{"level":2,"title":"7. \u5728 script \u6807\u7B7E\u4E0A\u4F7F\u7528 defer \u548C async \u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_7-\u5728-script-\u6807\u7B7E\u4E0A\u4F7F\u7528-defer-\u548C-async-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"8. \u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","slug":"_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","link":"#_8-\u524D\u7AEF\u672C\u5730\u6570\u636E\u5B58\u50A8\u7684\u65B9\u5F0F\u548C\u533A\u522B","children":[{"level":3,"title":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#\u4EE5\u4E0A\u51E0\u79CD\u524D\u7AEF\u5B58\u50A8\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]}]},{"level":2,"title":"9. HTML\u3001XML\u3001XHTML \u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B\uFF1F","slug":"_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","link":"#_9-html\u3001xml\u3001xhtml-\u4E4B\u95F4\u6709\u4EC0\u4E48\u533A\u522B","children":[]},{"level":2,"title":"10. \u8C08\u8C08\u4F60\u5BF9 HTML \u8BED\u4E49\u5316\u7684\u7406\u89E3\uFF1F","slug":"_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","link":"#_10-\u8C08\u8C08\u4F60\u5BF9-html-\u8BED\u4E49\u5316\u7684\u7406\u89E3","children":[]},{"level":2,"title":"11. \u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684\uFF1F","slug":"_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","link":"#_11-\u6D4F\u89C8\u5668\u662F\u5982\u4F55\u6E32\u67D3\u9875\u9762\u7684","children":[]},{"level":2,"title":"12. \u4EC0\u4E48\u662F reflow(\u56DE\u6D41)\uFF1F","slug":"_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","link":"#_12-\u4EC0\u4E48\u662F-reflow-\u56DE\u6D41","children":[]},{"level":2,"title":"Reflow \u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97 layout \u6811","slug":"reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","link":"#reflow-\u7684\u672C\u8D28\u5C31\u662F\u91CD\u65B0\u8BA1\u7B97-layout-\u6811","children":[]},{"level":2,"title":"13. \u4EC0\u4E48\u662F repaint(\u91CD\u7ED8)\uFF1F","slug":"_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","link":"#_13-\u4EC0\u4E48\u662F-repaint-\u91CD\u7ED8","children":[]},{"level":2,"title":"Repaint \u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","slug":"repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","link":"#repaint-\u7684\u672C\u8D28\u662F\u91CD\u65B0\u6839\u636E\u5206\u5C42\u4FE1\u606F\u8BA1\u7B97\u4E86\u7ED8\u5236\u6307\u4EE4","children":[]},{"level":2,"title":"14. \u6D4F\u89C8\u5668 reflow(\u56DE\u6D41)\u4E0E repaint(\u91CD\u6392)\u7684\u533A\u522B\u662F\u4EC0\u4E48\uFF1F","slug":"_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_14-\u6D4F\u89C8\u5668-reflow-\u56DE\u6D41-\u4E0E-repaint-\u91CD\u6392-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"15. \u4E3A\u4EC0\u4E48 transform \u7684\u6548\u7387\u9AD8\uFF1F","slug":"_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","link":"#_15-\u4E3A\u4EC0\u4E48-transform-\u7684\u6548\u7387\u9AD8","children":[]},{"level":2,"title":"16. \u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8\uFF1F","slug":"_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","link":"#_16-\u5982\u4F55\u907F\u514D\u91CD\u6392\u6216\u91CD\u7ED8","children":[]},{"level":2,"title":"17. \u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709 div \u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","slug":"_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","link":"#_17-\u7ED9\u9875\u9762\u4E2D\u7684\u6240\u6709-div-\u521B\u5EFA\u4E00\u4E2A\u8FB9\u6846","children":[]}],"relativePath":"pages/interviews/html.md"}'),t={name:"pages/interviews/html.md"},e=n("",128),p=[e];function r(c,i,d,D,y,F){return l(),a("div",null,p)}const u=s(t,[["render",r]]);export{h as __pageData,u as default};
diff --git a/assets/pages_interviews_http.md.c4668dab.js b/assets/pages_interviews_http.md.8abf6eb5.js
similarity index 99%
rename from assets/pages_interviews_http.md.c4668dab.js
rename to assets/pages_interviews_http.md.8abf6eb5.js
index c1f876b..5a3975b 100644
--- a/assets/pages_interviews_http.md.c4668dab.js
+++ b/assets/pages_interviews_http.md.8abf6eb5.js
@@ -1,4 +1,4 @@
-import{_ as t,o as e,c as p,a as d}from"./app.cac277bf.js";const r="/ybhdsg-zhs/assets/image-20210305232854139.8665e8e2.png",s="/ybhdsg-zhs/assets/image-20210219125038371.42ae1a40.png",a="/ybhdsg-zhs/assets/image-20210306161216371.edaeca14.png",n="/ybhdsg-zhs/assets/image-20210306005550796.054012bd.png",o="/ybhdsg-zhs/assets/image-20210306011528361.7c611c7d.png",l="/ybhdsg-zhs/assets/image-20210306021532010.0cda54eb.png",i="/ybhdsg-zhs/assets/940884-20180423141536107-329179455.778fcc56.png",h="/ybhdsg-zhs/assets/940884-20180423141732879-1484228353.eb013399.png",c="/ybhdsg-zhs/assets/5rxqugj8dh.14687f3c.png",g="/ybhdsg-zhs/assets/image-20210219192116213.72d7c828.png",T="/ybhdsg-zhs/assets/image-20210219192659983.1c0b95b4.png",A=JSON.parse('{"title":"http \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTTP \u6709\u54EA\u4E9B\u2F45\u6CD5\uFF1F","slug":"_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","link":"#_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","children":[]},{"level":2,"title":"2. \u5404\u4E2A HTTP \u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. GET \u65B9\u6CD5\u548C POST \u65B9\u6CD5\u6709\u4F55\u533A\u522B\uFF1F","slug":"_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","link":"#_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","children":[]},{"level":2,"title":"4. HTTP \u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"5. HTTP \u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"6. \u4F60\u4E86\u89E3\u7684 HTTP \u72B6\u6001\u7801\u6709\u54EA\u4E9B\uFF1F","slug":"_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","link":"#_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"7. HTTP \u7684 keep-alive \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"8. \u4E3A\u4EC0\u4E48\u9700\u8981 HTTPS\uFF1F","slug":"_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","link":"#_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","children":[]},{"level":2,"title":"9. HTTPS \u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684\uFF1F","slug":"_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","link":"#_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","children":[{"level":3,"title":"9.1 \u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.2 \u4EC0\u4E48\u662F\u2FAE\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.3 HTTPS \u52A0\u5BC6\u89E3\u51B3\u2F45\u6848","slug":"_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","link":"#_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","children":[]},{"level":3,"title":"9.4 \u6570\u5B57\u8BC1\u4E66","slug":"_9-4-\u6570\u5B57\u8BC1\u4E66","link":"#_9-4-\u6570\u5B57\u8BC1\u4E66","children":[]},{"level":3,"title":"9.5 \u6570\u5B57\u7B7E\u540D","slug":"_9-5-\u6570\u5B57\u7B7E\u540D","link":"#_9-5-\u6570\u5B57\u7B7E\u540D","children":[]}]},{"level":2,"title":"10. HTTP2 \u548C HTTP1.x \u6BD4\uFF0C\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9\uFF1F","slug":"_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","link":"#_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","children":[]},{"level":2,"title":"11. http \u7F13\u5B58\u63A7\u5236","slug":"_11-http-\u7F13\u5B58\u63A7\u5236","link":"#_11-http-\u7F13\u5B58\u63A7\u5236","children":[{"level":3,"title":"11.1 \u57FA\u672C\u8BA4\u77E5","slug":"_11-1-\u57FA\u672C\u8BA4\u77E5","link":"#_11-1-\u57FA\u672C\u8BA4\u77E5","children":[]},{"level":3,"title":"11.2 \u5F3A\u7F13\u5B58 (\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD)","slug":"_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","link":"#_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","children":[]},{"level":3,"title":"11.3 \u534F\u5546\u7F13\u5B58 (\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546)","slug":"_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","link":"#_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","children":[]},{"level":3,"title":"\u603B\u7ED3\uFF1A","slug":"\u603B\u7ED3","link":"#\u603B\u7ED3","children":[]}]},{"level":2,"title":"12. TCP \u7684\u7279\u6027","slug":"_12-tcp-\u7684\u7279\u6027","link":"#_12-tcp-\u7684\u7279\u6027","children":[]},{"level":2,"title":"13. \u7B80\u8FF0 TCP \u548C UDP \u7684\u533A\u522B","slug":"_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","link":"#_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F TCP \u7C98\u5305\uFF0C\u600E\u4E48\u5904\u7406\uFF1F","slug":"_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","link":"#_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","children":[]},{"level":2,"title":"15. \u4E00\u6B21\u5B8C\u6574\u7684 HTTP \u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","slug":"_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","link":"#_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F DNS \u89E3\u6790","slug":"_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","link":"#_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B\uFF1F","slug":"_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","link":"#_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","children":[]},{"level":2,"title":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B\uFF1F","slug":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","link":"#\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","children":[]},{"level":2,"title":"17. TCP \u4E09\u6B21\u63E1\u624B\u7406\u89E3 (\u53CC\u65B9\u786E\u8BA4)","slug":"_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","link":"#_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","children":[]}],"relativePath":"pages/interviews/http.md"}'),_={name:"pages/interviews/http.md"},u=d('

http \u76F8\u5173

Hyper Text Transfer Protocol(HTTP)\u662F\u8D85\u6587\u672C\u4F20\u8F93\u534F\u8BAE\u3002\u5728\u524D\u7AEF\u6700\u91CD\u8981\u7684\u4F53\u73B0\u5728\u4E8E\uFF0C\u6D4F\u89C8\u5668\uFF08HTTP Client\uFF09\u4E0E\u670D\u52A1\u5668\uFF08HTTP Server\uFF09\u4E4B\u95F4\u7684\u901A\u4FE1\u3002

1. HTTP \u6709\u54EA\u4E9B\u2F45\u6CD5\uFF1F

HTTP 1.0 \u6807\u51C6\u4E2D\uFF0C\u5B9A\u4E49\u4E86 3 \u79CD\u8BF7\u6C42\u2F45\u6CD5\uFF1AGET\u3001POST\u3001HEAD

HTTP 1.1 \u6807\u51C6\u4E2D\uFF0C\u65B0\u589E\u4E86\u8BF7\u6C42\u2F45\u6CD5\uFF1APUT\u3001PATCH\u3001DELETE\u3001OPTIONS\u3001TRACE\u3001CONNECT

2. \u5404\u4E2A HTTP \u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F

\u65B9\u6CD5\u529F\u80FD
GET\u901A\u5E38\u2F64\u4E8E\u8BF7\u6C42\u670D\u52A1\u5668\u53D1\u9001\u67D0\u4E9B\u8D44\u6E90
POST\u53D1\u9001\u6570\u636E\u7ED9\u670D\u52A1\u5668
HEAD\u8BF7\u6C42\u8D44\u6E90\u7684\u5934\u90E8\u4FE1\u606F, \u5E76\u4E14\u8FD9\u4E9B\u5934\u90E8\u4E0E HTTP GET \u2F45\u6CD5\u8BF7\u6C42\u65F6\u8FD4\u56DE\u7684\u2F00\u81F4\u3002
\u8BE5\u8BF7\u6C42\u2F45\u6CD5\u7684\u2F00\u4E2A\u4F7F\u2F64\u573A\u666F\u662F\u5728\u4E0B\u8F7D\u2F00\u4E2A\u2F24\u2F42\u4EF6\u524D\u5148\u83B7\u53D6\u5176\u2F24\u2F29\u518D\u51B3\u5B9A\u662F\u5426\u8981\u4E0B\u8F7D, \u4EE5\u6B64\u53EF\u4EE5\u8282\u7EA6\u5E26\u5BBD\u8D44\u6E90
PUT\u2F64\u4E8E\u5168\u91CF\u4FEE\u6539\u2F6C\u6807\u8D44\u6E90 (\u770B\u63A5\u53E3, \u4E5F\u53EF\u4EE5\u7528\u4E8E\u6DFB\u52A0)
DELETE\u2F64\u4E8E\u5220\u9664\u6307\u5B9A\u7684\u8D44\u6E90
OPTIONS\u2F64\u4E8E\u83B7\u53D6\u2F6C\u7684\u8D44\u6E90\u6240\u2F40\u6301\u7684\u901A\u4FE1\u9009\u9879 (\u8DE8\u57DF\u8BF7\u6C42\u524D, \u9884\u68C0\u8BF7\u6C42, \u5224\u65AD\u76EE\u6807\u662F\u5426\u5B89\u5168)
TRACE\u8BE5\u65B9\u6CD5\u4F1A \u8BA9\u670D\u52A1\u5668 \u539F\u6837\u8FD4\u56DE\u4EFB\u610F\u5BA2\u6237\u7AEF\u8BF7\u6C42\u7684\u4FE1\u606F\u5185\u5BB9, \u7528\u4E8E\u8BCA\u65AD\u548C\u5224\u65AD
CONNECTHTTP/1.1 \u534F\u8BAE\u4E2D\u9884\u7559\u7ED9\u80FD\u591F\u5C06\u8FDE\u63A5\u6539\u4E3A\u7BA1\u9053\u2F45\u5F0F\u7684\u4EE3\u7406\u670D\u52A1\u5668
(\u628A\u670D\u52A1\u5668\u4F5C\u4E3A\u8DF3\u677F\uFF0C\u8BA9\u670D\u52A1\u5668\u4EE3\u66FF\u7528\u6237\u53BB\u8BBF\u95EE\u5176\u5B83\u7F51\u9875, \u4E4B\u540E\u628A\u6570\u636E\u539F\u539F\u672C\u672C\u7684\u8FD4\u56DE\u7ED9\u7528\u6237)
PATCH\u2F64\u4E8E\u5BF9\u8D44\u6E90\u8FDB\u2F8F\u90E8\u5206\u4FEE\u6539

GET/DELETE \u53C2\u6570\u662F\u5728\u5730\u5740\u680F\u4E2D\u4F20\u9012\u7684

PUT/PATCH/POST \u53C2\u6570\u662F\u5728\u8BF7\u6C42\u4F53\u4F20\u9012\u7684

3. GET \u65B9\u6CD5\u548C POST \u65B9\u6CD5\u6709\u4F55\u533A\u522B\uFF1F

\u9ED8\u8BA4\u7684 http \u8BF7\u6C42\u7684\u5185\u5BB9, \u5728\u7F51\u7EDC\u4E2D\u4F20\u8F93, \u660E\u6587\u7684\u5F62\u5F0F\u4F20\u9012\u7684 (https \u5BF9\u5185\u5BB9\u52A0\u5BC6)

GET \u65B9\u6CD5POST \u65B9\u6CD5
\u6570\u636E\u4F20\u8F93\u2F45\u5F0F\u901A\u8FC7 URL \u4F20\u8F93\u6570\u636E (\u5730\u5740\u680F\u62FC\u63A5\u53C2\u6570)\u901A\u8FC7\u8BF7\u6C42\u4F53\u4F20\u8F93
\u6570\u636E\u5B89\u5168\u6570\u636E\u66B4\u9732\u5728 URL \u4E2D\uFF0C\u53EF\u901A\u8FC7\u6D4F\u89C8\u5386\u53F2\u8BB0\u5F55\u3001\u7F13\u5B58\u7B49\u5F88\u5BB9\u6613\u67E5\u5230\u6570\u636E\u4FE1\u606F\u6570\u636E\u56E0\u4E3A\u5728\u8BF7\u6C42\u4E3B\u4F53\u5185\uFF0C
\u6240\u4EE5\u6709\u2F00\u5B9A\u7684\u5B89\u5168\u6027\u4FDD\u8BC1
\u6570\u636E\u7C7B\u578B\u53EA\u5141\u8BB8 ASCII \u5B57\u7B26\u2F46\u9650\u5236
GET \u2F46\u5BB3\u5237\u65B0\u3001\u540E\u9000\u7B49\u6D4F\u89C8\u5668\u64CD\u4F5C\u662F\u2F46\u5BB3\u7684\u53EF\u80FD\u4F1A\u5F15\u8D77\u91CD\u590D\u63D0\u4EA4\u8868\u5355
\u529F\u80FD\u7279\u6027\u5B89\u5168\u4E14\u5E42\u7B49\uFF08\u8FD9\u2FA5\u7684\u5B89\u5168\u662F\u6307\u53EA\u8BFB\u7279\u6027\uFF0C\u5C31\u662F\u4F7F\u2F64\u8FD9\u4E2A\u2F45\u6CD5\u4E0D\u4F1A\u5F15\u8D77\u670D\u52A1\u5668\u72B6\u6001\u53D8\u5316\u3002
\u5E42\u7B49\u7684\u6982\u5FF5\u662F\u6307\u540C\u2F00\u4E2A\u8BF7\u6C42\u2F45\u6CD5\u6267\u2F8F\u591A\u6B21\u548C\u4EC5\u6267\u2F8F\u2F00\u6B21\u7684\u6548\u679C\u5B8C\u5168\u76F8\u540C\uFF09
\u2FAE\u5B89\u5168(\u4F1A\u5F15\u8D77\u670D\u52A1\u5668\u7AEF\u7684\u53D8\u5316)\u3001\u2FAE\u5E42\u7B49

4. HTTP \u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F

HTTP \u8BF7\u6C42\u62A5\u2F42\u7684\u7EC4\u6210\uFF1A\u8BF7\u6C42\u2F8F\u3001\u8BF7\u6C42\u5934\u3001(\u7A7A\u2F8F)\u3001\u8BF7\u6C42\u4F53\u3002

\u5B9E\u9645\u8BF7\u6C42\u62A5\u6587\u5B9E\u4F8B:

image-20210305232854139

\u8BF7\u6C42\u884C

\u5305\u542B\u4E86\u8BF7\u6C42\u2F45\u6CD5\u3001URL\u3001HTTP \u534F\u8BAE\u7248\u672C\uFF0C\u5B83\u4EEC\u4E4B\u95F4\u2F64\u7A7A\u683C\u8FDB\u884C\u5206\u9694\u3002\u4F8B\u5982\uFF1A

bash
GET http://www.abc.com/articles HTTP/1.1
+import{_ as t,o as e,c as p,a as d}from"./app.88185e12.js";const r="/ybhdsg-zhs/assets/image-20210305232854139.8665e8e2.png",s="/ybhdsg-zhs/assets/image-20210219125038371.42ae1a40.png",a="/ybhdsg-zhs/assets/image-20210306161216371.edaeca14.png",n="/ybhdsg-zhs/assets/image-20210306005550796.054012bd.png",o="/ybhdsg-zhs/assets/image-20210306011528361.7c611c7d.png",l="/ybhdsg-zhs/assets/image-20210306021532010.0cda54eb.png",i="/ybhdsg-zhs/assets/940884-20180423141536107-329179455.778fcc56.png",h="/ybhdsg-zhs/assets/940884-20180423141732879-1484228353.eb013399.png",c="/ybhdsg-zhs/assets/5rxqugj8dh.14687f3c.png",g="/ybhdsg-zhs/assets/image-20210219192116213.72d7c828.png",T="/ybhdsg-zhs/assets/image-20210219192659983.1c0b95b4.png",A=JSON.parse('{"title":"http \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTTP \u6709\u54EA\u4E9B\u2F45\u6CD5\uFF1F","slug":"_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","link":"#_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","children":[]},{"level":2,"title":"2. \u5404\u4E2A HTTP \u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. GET \u65B9\u6CD5\u548C POST \u65B9\u6CD5\u6709\u4F55\u533A\u522B\uFF1F","slug":"_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","link":"#_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","children":[]},{"level":2,"title":"4. HTTP \u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"5. HTTP \u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"6. \u4F60\u4E86\u89E3\u7684 HTTP \u72B6\u6001\u7801\u6709\u54EA\u4E9B\uFF1F","slug":"_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","link":"#_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"7. HTTP \u7684 keep-alive \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"8. \u4E3A\u4EC0\u4E48\u9700\u8981 HTTPS\uFF1F","slug":"_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","link":"#_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","children":[]},{"level":2,"title":"9. HTTPS \u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684\uFF1F","slug":"_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","link":"#_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","children":[{"level":3,"title":"9.1 \u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.2 \u4EC0\u4E48\u662F\u2FAE\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.3 HTTPS \u52A0\u5BC6\u89E3\u51B3\u2F45\u6848","slug":"_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","link":"#_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","children":[]},{"level":3,"title":"9.4 \u6570\u5B57\u8BC1\u4E66","slug":"_9-4-\u6570\u5B57\u8BC1\u4E66","link":"#_9-4-\u6570\u5B57\u8BC1\u4E66","children":[]},{"level":3,"title":"9.5 \u6570\u5B57\u7B7E\u540D","slug":"_9-5-\u6570\u5B57\u7B7E\u540D","link":"#_9-5-\u6570\u5B57\u7B7E\u540D","children":[]}]},{"level":2,"title":"10. HTTP2 \u548C HTTP1.x \u6BD4\uFF0C\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9\uFF1F","slug":"_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","link":"#_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","children":[]},{"level":2,"title":"11. http \u7F13\u5B58\u63A7\u5236","slug":"_11-http-\u7F13\u5B58\u63A7\u5236","link":"#_11-http-\u7F13\u5B58\u63A7\u5236","children":[{"level":3,"title":"11.1 \u57FA\u672C\u8BA4\u77E5","slug":"_11-1-\u57FA\u672C\u8BA4\u77E5","link":"#_11-1-\u57FA\u672C\u8BA4\u77E5","children":[]},{"level":3,"title":"11.2 \u5F3A\u7F13\u5B58 (\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD)","slug":"_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","link":"#_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","children":[]},{"level":3,"title":"11.3 \u534F\u5546\u7F13\u5B58 (\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546)","slug":"_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","link":"#_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","children":[]},{"level":3,"title":"\u603B\u7ED3\uFF1A","slug":"\u603B\u7ED3","link":"#\u603B\u7ED3","children":[]}]},{"level":2,"title":"12. TCP \u7684\u7279\u6027","slug":"_12-tcp-\u7684\u7279\u6027","link":"#_12-tcp-\u7684\u7279\u6027","children":[]},{"level":2,"title":"13. \u7B80\u8FF0 TCP \u548C UDP \u7684\u533A\u522B","slug":"_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","link":"#_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F TCP \u7C98\u5305\uFF0C\u600E\u4E48\u5904\u7406\uFF1F","slug":"_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","link":"#_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","children":[]},{"level":2,"title":"15. \u4E00\u6B21\u5B8C\u6574\u7684 HTTP \u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","slug":"_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","link":"#_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F DNS \u89E3\u6790","slug":"_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","link":"#_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B\uFF1F","slug":"_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","link":"#_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","children":[]},{"level":2,"title":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B\uFF1F","slug":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","link":"#\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","children":[]},{"level":2,"title":"17. TCP \u4E09\u6B21\u63E1\u624B\u7406\u89E3 (\u53CC\u65B9\u786E\u8BA4)","slug":"_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","link":"#_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","children":[]}],"relativePath":"pages/interviews/http.md"}'),_={name:"pages/interviews/http.md"},u=d('

http \u76F8\u5173

Hyper Text Transfer Protocol(HTTP)\u662F\u8D85\u6587\u672C\u4F20\u8F93\u534F\u8BAE\u3002\u5728\u524D\u7AEF\u6700\u91CD\u8981\u7684\u4F53\u73B0\u5728\u4E8E\uFF0C\u6D4F\u89C8\u5668\uFF08HTTP Client\uFF09\u4E0E\u670D\u52A1\u5668\uFF08HTTP Server\uFF09\u4E4B\u95F4\u7684\u901A\u4FE1\u3002

1. HTTP \u6709\u54EA\u4E9B\u2F45\u6CD5\uFF1F

HTTP 1.0 \u6807\u51C6\u4E2D\uFF0C\u5B9A\u4E49\u4E86 3 \u79CD\u8BF7\u6C42\u2F45\u6CD5\uFF1AGET\u3001POST\u3001HEAD

HTTP 1.1 \u6807\u51C6\u4E2D\uFF0C\u65B0\u589E\u4E86\u8BF7\u6C42\u2F45\u6CD5\uFF1APUT\u3001PATCH\u3001DELETE\u3001OPTIONS\u3001TRACE\u3001CONNECT

2. \u5404\u4E2A HTTP \u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F

\u65B9\u6CD5\u529F\u80FD
GET\u901A\u5E38\u2F64\u4E8E\u8BF7\u6C42\u670D\u52A1\u5668\u53D1\u9001\u67D0\u4E9B\u8D44\u6E90
POST\u53D1\u9001\u6570\u636E\u7ED9\u670D\u52A1\u5668
HEAD\u8BF7\u6C42\u8D44\u6E90\u7684\u5934\u90E8\u4FE1\u606F, \u5E76\u4E14\u8FD9\u4E9B\u5934\u90E8\u4E0E HTTP GET \u2F45\u6CD5\u8BF7\u6C42\u65F6\u8FD4\u56DE\u7684\u2F00\u81F4\u3002
\u8BE5\u8BF7\u6C42\u2F45\u6CD5\u7684\u2F00\u4E2A\u4F7F\u2F64\u573A\u666F\u662F\u5728\u4E0B\u8F7D\u2F00\u4E2A\u2F24\u2F42\u4EF6\u524D\u5148\u83B7\u53D6\u5176\u2F24\u2F29\u518D\u51B3\u5B9A\u662F\u5426\u8981\u4E0B\u8F7D, \u4EE5\u6B64\u53EF\u4EE5\u8282\u7EA6\u5E26\u5BBD\u8D44\u6E90
PUT\u2F64\u4E8E\u5168\u91CF\u4FEE\u6539\u2F6C\u6807\u8D44\u6E90 (\u770B\u63A5\u53E3, \u4E5F\u53EF\u4EE5\u7528\u4E8E\u6DFB\u52A0)
DELETE\u2F64\u4E8E\u5220\u9664\u6307\u5B9A\u7684\u8D44\u6E90
OPTIONS\u2F64\u4E8E\u83B7\u53D6\u2F6C\u7684\u8D44\u6E90\u6240\u2F40\u6301\u7684\u901A\u4FE1\u9009\u9879 (\u8DE8\u57DF\u8BF7\u6C42\u524D, \u9884\u68C0\u8BF7\u6C42, \u5224\u65AD\u76EE\u6807\u662F\u5426\u5B89\u5168)
TRACE\u8BE5\u65B9\u6CD5\u4F1A \u8BA9\u670D\u52A1\u5668 \u539F\u6837\u8FD4\u56DE\u4EFB\u610F\u5BA2\u6237\u7AEF\u8BF7\u6C42\u7684\u4FE1\u606F\u5185\u5BB9, \u7528\u4E8E\u8BCA\u65AD\u548C\u5224\u65AD
CONNECTHTTP/1.1 \u534F\u8BAE\u4E2D\u9884\u7559\u7ED9\u80FD\u591F\u5C06\u8FDE\u63A5\u6539\u4E3A\u7BA1\u9053\u2F45\u5F0F\u7684\u4EE3\u7406\u670D\u52A1\u5668
(\u628A\u670D\u52A1\u5668\u4F5C\u4E3A\u8DF3\u677F\uFF0C\u8BA9\u670D\u52A1\u5668\u4EE3\u66FF\u7528\u6237\u53BB\u8BBF\u95EE\u5176\u5B83\u7F51\u9875, \u4E4B\u540E\u628A\u6570\u636E\u539F\u539F\u672C\u672C\u7684\u8FD4\u56DE\u7ED9\u7528\u6237)
PATCH\u2F64\u4E8E\u5BF9\u8D44\u6E90\u8FDB\u2F8F\u90E8\u5206\u4FEE\u6539

GET/DELETE \u53C2\u6570\u662F\u5728\u5730\u5740\u680F\u4E2D\u4F20\u9012\u7684

PUT/PATCH/POST \u53C2\u6570\u662F\u5728\u8BF7\u6C42\u4F53\u4F20\u9012\u7684

3. GET \u65B9\u6CD5\u548C POST \u65B9\u6CD5\u6709\u4F55\u533A\u522B\uFF1F

\u9ED8\u8BA4\u7684 http \u8BF7\u6C42\u7684\u5185\u5BB9, \u5728\u7F51\u7EDC\u4E2D\u4F20\u8F93, \u660E\u6587\u7684\u5F62\u5F0F\u4F20\u9012\u7684 (https \u5BF9\u5185\u5BB9\u52A0\u5BC6)

GET \u65B9\u6CD5POST \u65B9\u6CD5
\u6570\u636E\u4F20\u8F93\u2F45\u5F0F\u901A\u8FC7 URL \u4F20\u8F93\u6570\u636E (\u5730\u5740\u680F\u62FC\u63A5\u53C2\u6570)\u901A\u8FC7\u8BF7\u6C42\u4F53\u4F20\u8F93
\u6570\u636E\u5B89\u5168\u6570\u636E\u66B4\u9732\u5728 URL \u4E2D\uFF0C\u53EF\u901A\u8FC7\u6D4F\u89C8\u5386\u53F2\u8BB0\u5F55\u3001\u7F13\u5B58\u7B49\u5F88\u5BB9\u6613\u67E5\u5230\u6570\u636E\u4FE1\u606F\u6570\u636E\u56E0\u4E3A\u5728\u8BF7\u6C42\u4E3B\u4F53\u5185\uFF0C
\u6240\u4EE5\u6709\u2F00\u5B9A\u7684\u5B89\u5168\u6027\u4FDD\u8BC1
\u6570\u636E\u7C7B\u578B\u53EA\u5141\u8BB8 ASCII \u5B57\u7B26\u2F46\u9650\u5236
GET \u2F46\u5BB3\u5237\u65B0\u3001\u540E\u9000\u7B49\u6D4F\u89C8\u5668\u64CD\u4F5C\u662F\u2F46\u5BB3\u7684\u53EF\u80FD\u4F1A\u5F15\u8D77\u91CD\u590D\u63D0\u4EA4\u8868\u5355
\u529F\u80FD\u7279\u6027\u5B89\u5168\u4E14\u5E42\u7B49\uFF08\u8FD9\u2FA5\u7684\u5B89\u5168\u662F\u6307\u53EA\u8BFB\u7279\u6027\uFF0C\u5C31\u662F\u4F7F\u2F64\u8FD9\u4E2A\u2F45\u6CD5\u4E0D\u4F1A\u5F15\u8D77\u670D\u52A1\u5668\u72B6\u6001\u53D8\u5316\u3002
\u5E42\u7B49\u7684\u6982\u5FF5\u662F\u6307\u540C\u2F00\u4E2A\u8BF7\u6C42\u2F45\u6CD5\u6267\u2F8F\u591A\u6B21\u548C\u4EC5\u6267\u2F8F\u2F00\u6B21\u7684\u6548\u679C\u5B8C\u5168\u76F8\u540C\uFF09
\u2FAE\u5B89\u5168(\u4F1A\u5F15\u8D77\u670D\u52A1\u5668\u7AEF\u7684\u53D8\u5316)\u3001\u2FAE\u5E42\u7B49

4. HTTP \u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F

HTTP \u8BF7\u6C42\u62A5\u2F42\u7684\u7EC4\u6210\uFF1A\u8BF7\u6C42\u2F8F\u3001\u8BF7\u6C42\u5934\u3001(\u7A7A\u2F8F)\u3001\u8BF7\u6C42\u4F53\u3002

\u5B9E\u9645\u8BF7\u6C42\u62A5\u6587\u5B9E\u4F8B:

image-20210305232854139

\u8BF7\u6C42\u884C

\u5305\u542B\u4E86\u8BF7\u6C42\u2F45\u6CD5\u3001URL\u3001HTTP \u534F\u8BAE\u7248\u672C\uFF0C\u5B83\u4EEC\u4E4B\u95F4\u2F64\u7A7A\u683C\u8FDB\u884C\u5206\u9694\u3002\u4F8B\u5982\uFF1A

bash
GET http://www.abc.com/articles HTTP/1.1
 

\u8BF7\u6C42\u5934

\u8BF7\u6C42\u5934\u7531\u952E\u503C\u5BF9\u7EC4\u6210\uFF0C\u6BCF\u2F8F\u2F00\u5BF9\uFF0C\u952E\u503C\u4E4B\u95F4\u2F64\u82F1\u2F42\u5192\u53F7:\u8FDB\u884C\u5206\u9694\u3002\u4F8B\u5982\uFF1A

Content-Type: application/json
 Host: www.abc.com
 

\u8BF7\u6C42\u4F53

\u8BF7\u6C42\u4F53\u4E2D\u653E\u7F6E POST\u3001PUT\u3001PATCH \u7B49\u8BF7\u6C42\u65B9\u6CD5\u6240\u9700\u8981\u643A\u5E26\u7684\u6570\u636E\u3002

5. HTTP \u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F

HTTP \u54CD\u5E94\u62A5\u2F42\u7684\u7EC4\u6210: \u54CD\u5E94\u2F8F\u3001\u54CD\u5E94\u5934\u3001\u7A7A\u2F8F\u3001\u54CD\u5E94\u4F53\u3002

image-20210219125038371

\u54CD\u5E94\u884C

\u54CD\u5E94\u884C\u7531\u534F\u8BAE\u7248\u672C\u3001\u72B6\u6001\u7801\u3001\u72B6\u6001\u7801\u7684\u539F\u56E0\u77ED\u8BED 3 \u4E2A\u5185\u5BB9\u7EC4\u6210\uFF0C\u4E2D\u95F4\u4EE5\u7A7A\u683C\u5206\u9694\u3002\u4F8B\u5982\uFF1A

bash
HTTP/1.1 200 OK
diff --git a/assets/pages_interviews_http.md.c4668dab.lean.js b/assets/pages_interviews_http.md.8abf6eb5.lean.js
similarity index 99%
rename from assets/pages_interviews_http.md.c4668dab.lean.js
rename to assets/pages_interviews_http.md.8abf6eb5.lean.js
index 9ec12bd..5094feb 100644
--- a/assets/pages_interviews_http.md.c4668dab.lean.js
+++ b/assets/pages_interviews_http.md.8abf6eb5.lean.js
@@ -1 +1 @@
-import{_ as t,o as e,c as p,a as d}from"./app.cac277bf.js";const r="/ybhdsg-zhs/assets/image-20210305232854139.8665e8e2.png",s="/ybhdsg-zhs/assets/image-20210219125038371.42ae1a40.png",a="/ybhdsg-zhs/assets/image-20210306161216371.edaeca14.png",n="/ybhdsg-zhs/assets/image-20210306005550796.054012bd.png",o="/ybhdsg-zhs/assets/image-20210306011528361.7c611c7d.png",l="/ybhdsg-zhs/assets/image-20210306021532010.0cda54eb.png",i="/ybhdsg-zhs/assets/940884-20180423141536107-329179455.778fcc56.png",h="/ybhdsg-zhs/assets/940884-20180423141732879-1484228353.eb013399.png",c="/ybhdsg-zhs/assets/5rxqugj8dh.14687f3c.png",g="/ybhdsg-zhs/assets/image-20210219192116213.72d7c828.png",T="/ybhdsg-zhs/assets/image-20210219192659983.1c0b95b4.png",A=JSON.parse('{"title":"http \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTTP \u6709\u54EA\u4E9B\u2F45\u6CD5\uFF1F","slug":"_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","link":"#_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","children":[]},{"level":2,"title":"2. \u5404\u4E2A HTTP \u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. GET \u65B9\u6CD5\u548C POST \u65B9\u6CD5\u6709\u4F55\u533A\u522B\uFF1F","slug":"_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","link":"#_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","children":[]},{"level":2,"title":"4. HTTP \u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"5. HTTP \u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"6. \u4F60\u4E86\u89E3\u7684 HTTP \u72B6\u6001\u7801\u6709\u54EA\u4E9B\uFF1F","slug":"_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","link":"#_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"7. HTTP \u7684 keep-alive \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"8. \u4E3A\u4EC0\u4E48\u9700\u8981 HTTPS\uFF1F","slug":"_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","link":"#_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","children":[]},{"level":2,"title":"9. HTTPS \u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684\uFF1F","slug":"_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","link":"#_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","children":[{"level":3,"title":"9.1 \u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.2 \u4EC0\u4E48\u662F\u2FAE\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.3 HTTPS \u52A0\u5BC6\u89E3\u51B3\u2F45\u6848","slug":"_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","link":"#_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","children":[]},{"level":3,"title":"9.4 \u6570\u5B57\u8BC1\u4E66","slug":"_9-4-\u6570\u5B57\u8BC1\u4E66","link":"#_9-4-\u6570\u5B57\u8BC1\u4E66","children":[]},{"level":3,"title":"9.5 \u6570\u5B57\u7B7E\u540D","slug":"_9-5-\u6570\u5B57\u7B7E\u540D","link":"#_9-5-\u6570\u5B57\u7B7E\u540D","children":[]}]},{"level":2,"title":"10. HTTP2 \u548C HTTP1.x \u6BD4\uFF0C\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9\uFF1F","slug":"_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","link":"#_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","children":[]},{"level":2,"title":"11. http \u7F13\u5B58\u63A7\u5236","slug":"_11-http-\u7F13\u5B58\u63A7\u5236","link":"#_11-http-\u7F13\u5B58\u63A7\u5236","children":[{"level":3,"title":"11.1 \u57FA\u672C\u8BA4\u77E5","slug":"_11-1-\u57FA\u672C\u8BA4\u77E5","link":"#_11-1-\u57FA\u672C\u8BA4\u77E5","children":[]},{"level":3,"title":"11.2 \u5F3A\u7F13\u5B58 (\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD)","slug":"_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","link":"#_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","children":[]},{"level":3,"title":"11.3 \u534F\u5546\u7F13\u5B58 (\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546)","slug":"_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","link":"#_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","children":[]},{"level":3,"title":"\u603B\u7ED3\uFF1A","slug":"\u603B\u7ED3","link":"#\u603B\u7ED3","children":[]}]},{"level":2,"title":"12. TCP \u7684\u7279\u6027","slug":"_12-tcp-\u7684\u7279\u6027","link":"#_12-tcp-\u7684\u7279\u6027","children":[]},{"level":2,"title":"13. \u7B80\u8FF0 TCP \u548C UDP \u7684\u533A\u522B","slug":"_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","link":"#_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F TCP \u7C98\u5305\uFF0C\u600E\u4E48\u5904\u7406\uFF1F","slug":"_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","link":"#_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","children":[]},{"level":2,"title":"15. \u4E00\u6B21\u5B8C\u6574\u7684 HTTP \u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","slug":"_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","link":"#_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F DNS \u89E3\u6790","slug":"_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","link":"#_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B\uFF1F","slug":"_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","link":"#_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","children":[]},{"level":2,"title":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B\uFF1F","slug":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","link":"#\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","children":[]},{"level":2,"title":"17. TCP \u4E09\u6B21\u63E1\u624B\u7406\u89E3 (\u53CC\u65B9\u786E\u8BA4)","slug":"_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","link":"#_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","children":[]}],"relativePath":"pages/interviews/http.md"}'),_={name:"pages/interviews/http.md"},u=d("",265),P=[u];function C(b,S,m,f,H,x){return e(),p("div",null,P)}const E=t(_,[["render",C]]);export{A as __pageData,E as default};
+import{_ as t,o as e,c as p,a as d}from"./app.88185e12.js";const r="/ybhdsg-zhs/assets/image-20210305232854139.8665e8e2.png",s="/ybhdsg-zhs/assets/image-20210219125038371.42ae1a40.png",a="/ybhdsg-zhs/assets/image-20210306161216371.edaeca14.png",n="/ybhdsg-zhs/assets/image-20210306005550796.054012bd.png",o="/ybhdsg-zhs/assets/image-20210306011528361.7c611c7d.png",l="/ybhdsg-zhs/assets/image-20210306021532010.0cda54eb.png",i="/ybhdsg-zhs/assets/940884-20180423141536107-329179455.778fcc56.png",h="/ybhdsg-zhs/assets/940884-20180423141732879-1484228353.eb013399.png",c="/ybhdsg-zhs/assets/5rxqugj8dh.14687f3c.png",g="/ybhdsg-zhs/assets/image-20210219192116213.72d7c828.png",T="/ybhdsg-zhs/assets/image-20210219192659983.1c0b95b4.png",A=JSON.parse('{"title":"http \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. HTTP \u6709\u54EA\u4E9B\u2F45\u6CD5\uFF1F","slug":"_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","link":"#_1-http-\u6709\u54EA\u4E9B\u65B9\u6CD5","children":[]},{"level":2,"title":"2. \u5404\u4E2A HTTP \u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_2-\u5404\u4E2A-http-\u65B9\u6CD5\u7684\u5177\u4F53\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"3. GET \u65B9\u6CD5\u548C POST \u65B9\u6CD5\u6709\u4F55\u533A\u522B\uFF1F","slug":"_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","link":"#_3-get-\u65B9\u6CD5\u548C-post-\u65B9\u6CD5\u6709\u4F55\u533A\u522B","children":[]},{"level":2,"title":"4. HTTP \u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_4-http-\u8BF7\u6C42\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"5. HTTP \u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684\uFF1F","slug":"_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","link":"#_5-http-\u54CD\u5E94\u62A5\u6587\u662F\u4EC0\u4E48\u6837\u7684","children":[]},{"level":2,"title":"6. \u4F60\u4E86\u89E3\u7684 HTTP \u72B6\u6001\u7801\u6709\u54EA\u4E9B\uFF1F","slug":"_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","link":"#_6-\u4F60\u4E86\u89E3\u7684-http-\u72B6\u6001\u7801\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"7. HTTP \u7684 keep-alive \u662F\u4EC0\u4E48\u4F5C\u7528\uFF1F","slug":"_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","link":"#_7-http-\u7684-keep-alive-\u662F\u4EC0\u4E48\u4F5C\u7528","children":[]},{"level":2,"title":"8. \u4E3A\u4EC0\u4E48\u9700\u8981 HTTPS\uFF1F","slug":"_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","link":"#_8-\u4E3A\u4EC0\u4E48\u9700\u8981-https","children":[]},{"level":2,"title":"9. HTTPS \u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684\uFF1F","slug":"_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","link":"#_9-https-\u662F\u5982\u4F55\u4FDD\u8BC1\u5B89\u5168\u7684","children":[{"level":3,"title":"9.1 \u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-1-\u4EC0\u4E48\u662F\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.2 \u4EC0\u4E48\u662F\u2FAE\u5BF9\u79F0\u52A0\u5BC6\uFF1F","slug":"_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","link":"#_9-2-\u4EC0\u4E48\u662F\u975E\u5BF9\u79F0\u52A0\u5BC6","children":[]},{"level":3,"title":"9.3 HTTPS \u52A0\u5BC6\u89E3\u51B3\u2F45\u6848","slug":"_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","link":"#_9-3-https-\u52A0\u5BC6\u89E3\u51B3\u65B9\u6848","children":[]},{"level":3,"title":"9.4 \u6570\u5B57\u8BC1\u4E66","slug":"_9-4-\u6570\u5B57\u8BC1\u4E66","link":"#_9-4-\u6570\u5B57\u8BC1\u4E66","children":[]},{"level":3,"title":"9.5 \u6570\u5B57\u7B7E\u540D","slug":"_9-5-\u6570\u5B57\u7B7E\u540D","link":"#_9-5-\u6570\u5B57\u7B7E\u540D","children":[]}]},{"level":2,"title":"10. HTTP2 \u548C HTTP1.x \u6BD4\uFF0C\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9\uFF1F","slug":"_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","link":"#_10-http2-\u548C-http1-x-\u6BD4-\u6709\u4EC0\u4E48\u4F18\u52BF\u548C\u7279\u70B9","children":[]},{"level":2,"title":"11. http \u7F13\u5B58\u63A7\u5236","slug":"_11-http-\u7F13\u5B58\u63A7\u5236","link":"#_11-http-\u7F13\u5B58\u63A7\u5236","children":[{"level":3,"title":"11.1 \u57FA\u672C\u8BA4\u77E5","slug":"_11-1-\u57FA\u672C\u8BA4\u77E5","link":"#_11-1-\u57FA\u672C\u8BA4\u77E5","children":[]},{"level":3,"title":"11.2 \u5F3A\u7F13\u5B58 (\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD)","slug":"_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","link":"#_11-2-\u5F3A\u7F13\u5B58-\u98DF\u54C1\u8FC7\u671F\u65F6\u95F4\u5224\u65AD","children":[]},{"level":3,"title":"11.3 \u534F\u5546\u7F13\u5B58 (\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546)","slug":"_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","link":"#_11-3-\u534F\u5546\u7F13\u5B58-\u627E\u4F9B\u8D27\u5546\u4E13\u5BB6\u534F\u5546","children":[]},{"level":3,"title":"\u603B\u7ED3\uFF1A","slug":"\u603B\u7ED3","link":"#\u603B\u7ED3","children":[]}]},{"level":2,"title":"12. TCP \u7684\u7279\u6027","slug":"_12-tcp-\u7684\u7279\u6027","link":"#_12-tcp-\u7684\u7279\u6027","children":[]},{"level":2,"title":"13. \u7B80\u8FF0 TCP \u548C UDP \u7684\u533A\u522B","slug":"_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","link":"#_13-\u7B80\u8FF0-tcp-\u548C-udp-\u7684\u533A\u522B","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F TCP \u7C98\u5305\uFF0C\u600E\u4E48\u5904\u7406\uFF1F","slug":"_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","link":"#_14-\u4EC0\u4E48\u662F-tcp-\u7C98\u5305-\u600E\u4E48\u5904\u7406","children":[]},{"level":2,"title":"15. \u4E00\u6B21\u5B8C\u6574\u7684 HTTP \u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","slug":"_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","link":"#_15-\u4E00\u6B21\u5B8C\u6574\u7684-http-\u670D\u52A1\u8FC7\u7A0B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F DNS \u89E3\u6790","slug":"_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","link":"#_16-\u4EC0\u4E48\u662F-dns-\u89E3\u6790","children":[]},{"level":2,"title":"16. \u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B\uFF1F","slug":"_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","link":"#_16-\u4EC0\u4E48\u662F\u4E09\u6B21\u63E1\u624B","children":[]},{"level":2,"title":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B\uFF1F","slug":"\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","link":"#\u4EC0\u4E48\u662F\u56DB\u6B21\u6325\u624B","children":[]},{"level":2,"title":"17. TCP \u4E09\u6B21\u63E1\u624B\u7406\u89E3 (\u53CC\u65B9\u786E\u8BA4)","slug":"_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","link":"#_17-tcp-\u4E09\u6B21\u63E1\u624B\u7406\u89E3-\u53CC\u65B9\u786E\u8BA4","children":[]}],"relativePath":"pages/interviews/http.md"}'),_={name:"pages/interviews/http.md"},u=d("",265),P=[u];function C(b,S,m,f,H,x){return e(),p("div",null,P)}const E=t(_,[["render",C]]);export{A as __pageData,E as default};
diff --git a/assets/pages_interviews_js.md.3c178cde.js b/assets/pages_interviews_js.md.642bf115.js
similarity index 94%
rename from assets/pages_interviews_js.md.3c178cde.js
rename to assets/pages_interviews_js.md.642bf115.js
index 036e872..6f8f959 100644
--- a/assets/pages_interviews_js.md.3c178cde.js
+++ b/assets/pages_interviews_js.md.642bf115.js
@@ -1,4 +1,4 @@
-import{_ as e,h as t,o as c,c as r,b as s,i as n,g as l,w as p,a as o}from"./app.cac277bf.js";const y="/ybhdsg-zhs/assets/image-20210305172448582.b5495005.png",F="/ybhdsg-zhs/assets/image-20210306104516852.e37bd288.png",D="/ybhdsg-zhs/assets/image-20210218212449526.591c6cf9.png",i="/ybhdsg-zhs/assets/img1.cec84ebb.png",A="/ybhdsg-zhs/assets/image-20201208040306978.29b49979.png",C="/ybhdsg-zhs/assets/image-20201208040235602.9c1fe808.png",d="/ybhdsg-zhs/assets/image-20210221101152845.33f587de.png",N=JSON.parse('{"title":"JavaScript \u57FA\u7840","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347\uFF1F","slug":"_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","link":"#_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","children":[]},{"level":2,"title":"2. JS \u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684\uFF1F","slug":"_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","link":"#_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","children":[]},{"level":2,"title":"3. JavaScript \u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684\uFF1F","slug":"_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","link":"#_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","children":[{"level":3,"title":"3.1 \u5185\u5B58\u7684\u751F\u547D\u5468\u671F","slug":"_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","link":"#_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","children":[]},{"level":3,"title":"3.2 \u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","slug":"_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","link":"#_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","children":[]},{"level":3,"title":"3.3 \u5F15\u7528\u8BA1\u6570","slug":"_3-3-\u5F15\u7528\u8BA1\u6570","link":"#_3-3-\u5F15\u7528\u8BA1\u6570","children":[]},{"level":3,"title":"3.4 \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","slug":"_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","link":"#_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","children":[]}]},{"level":2,"title":"4. \u8C08\u8C08\u4F60\u5BF9 JavaScript \u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3\uFF1F","slug":"_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","link":"#_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. \u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","slug":"_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","link":"#_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"6. \u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3\uFF1F","slug":"_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","link":"#_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","slug":"_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","children":[{"level":3,"title":"7.1 \u7EE7\u627F - \u539F\u578B\u7EE7\u627F","slug":"_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","link":"#_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","children":[]},{"level":3,"title":"7.2 \u7EE7\u627F - \u7EC4\u5408\u7EE7\u627F","slug":"_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","link":"#_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.3 \u7EE7\u627F - \u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","slug":"_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","link":"#_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.4 es6 - class \u5B9E\u73B0\u7EE7\u627F extends","slug":"_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","link":"#_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","children":[]}]},{"level":2,"title":"8. \u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4\uFF1F","slug":"_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","link":"#_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","children":[]},{"level":2,"title":"9. \u8C08\u8C08\u4F60\u5BF9 this \u7684\u7406\u89E3\uFF1F","slug":"_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","link":"#_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"10. Promise \u7684\u9759\u6001\u65B9\u6CD5","slug":"_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","link":"#_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","children":[]},{"level":2,"title":"11. \u5B8F\u4EFB\u52A1 \u5FAE\u4EFB\u52A1 \u662F\u4EC0\u4E48","slug":"_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","link":"#_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"12. async/await \u662F\u4EC0\u4E48\uFF1F","slug":"_12-async-await-\u662F\u4EC0\u4E48","link":"#_12-async-await-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"13. \u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF\uFF1F","slug":"_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","link":"#_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565\uFF1F","slug":"_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","link":"#_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","children":[]},{"level":2,"title":"15. \u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF\uFF1F","slug":"_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","link":"#_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","children":[]},{"level":2,"title":"16. Babel \u7684\u539F\u7406\u662F\u4EC0\u4E48\uFF1F","slug":"_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","link":"#_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/js.md"}'),h={name:"pages/interviews/js.md"},u=o(`

JavaScript \u57FA\u7840

1. \u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347\uFF1F

\u53D8\u91CF\u63D0\u5347\uFF08hoisting\uFF09\uFF0C\u662F\u8D1F\u8D23\u89E3\u6790\u6267\u884C\u4EE3\u7801\u7684 JavaScript \u5F15\u64CE\u7684\u5DE5\u4F5C\u65B9\u5F0F\u4EA7\u751F\u7684\u4E00\u4E2A\u7279\u6027\u3002

JS \u5F15\u64CE\u5728\u8FD0\u884C\u4E00\u4EFD\u4EE3\u7801\u7684\u65F6\u5019\uFF0C\u4F1A\u6309\u7167\u4E0B\u9762\u7684\u6B65\u9AA4\u8FDB\u884C\u5DE5\u4F5C\uFF1A

  1. \u9996\u5148\uFF0C\u5BF9\u4EE3\u7801\u8FDB\u884C\u9884\u89E3\u6790\uFF0C\u5E76\u83B7\u53D6\u58F0\u660E\u7684\u6240\u6709\u53D8\u91CF

  2. \u7136\u540E\uFF0C\u5C06\u8FD9\u4E9B\u53D8\u91CF\u7684\u58F0\u660E\u8BED\u53E5\u7EDF\u4E00\u653E\u5230\u4EE3\u7801\u7684\u6700\u524D\u9762

  3. \u6700\u540E\uFF0C\u5F00\u59CB\u4E00\u884C\u4E00\u884C\u8FD0\u884C\u4EE3\u7801

\u53D8\u91CF\u7684\u8FD9\u4E00\u8F6C\u6362\u8FC7\u7A0B\uFF0C\u5C31\u88AB\u79F0\u4E3A\u53D8\u91CF\u7684\u58F0\u660E\u63D0\u5347\u3002

\u800C\u8FD9\u662F\u4E0D\u89C4\u8303, \u4E0D\u5408\u7406\u7684, \u6211\u4EEC\u7528\u7684 let \u5C31\u6CA1\u6709\u8FD9\u4E2A\u53D8\u91CF\u63D0\u5347\u7684\u95EE\u9898

2. JS \u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684\uFF1F

\u57FA\u672C\u7C7B\u578B\uFF1A\u662F\u503C\u4F20\u9012\uFF01

\u590D\u6742\u7C7B\u578B: \u4F20\u9012\u7684\u662F\u5730\u5740! (\u53D8\u91CF\u4E2D\u5B58\u7684\u5C31\u662F\u5730\u5740)

\u4FEE\u6539\u53C2\u6570\u5C5E\u6027\u503C\u7684\u8BDD\uFF0C\u6539\u53D8\u7684\u4F9D\u7136\u662F\u539F\u5730\u5740\u4E2D\u7684\u5BF9\u8C61\u672C\u8EAB

js
let a = {
+import{_ as e,k as t,o as c,c as r,b as s,j as n,g as l,w as p,a as o}from"./app.88185e12.js";const y="/ybhdsg-zhs/assets/image-20210305172448582.b5495005.png",F="/ybhdsg-zhs/assets/image-20210306104516852.e37bd288.png",D="/ybhdsg-zhs/assets/image-20210218212449526.591c6cf9.png",i="/ybhdsg-zhs/assets/img1.cec84ebb.png",A="/ybhdsg-zhs/assets/image-20201208040306978.29b49979.png",C="/ybhdsg-zhs/assets/image-20201208040235602.9c1fe808.png",d="/ybhdsg-zhs/assets/image-20210221101152845.33f587de.png",N=JSON.parse('{"title":"JavaScript \u57FA\u7840","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347\uFF1F","slug":"_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","link":"#_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","children":[]},{"level":2,"title":"2. JS \u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684\uFF1F","slug":"_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","link":"#_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","children":[]},{"level":2,"title":"3. JavaScript \u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684\uFF1F","slug":"_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","link":"#_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","children":[{"level":3,"title":"3.1 \u5185\u5B58\u7684\u751F\u547D\u5468\u671F","slug":"_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","link":"#_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","children":[]},{"level":3,"title":"3.2 \u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","slug":"_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","link":"#_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","children":[]},{"level":3,"title":"3.3 \u5F15\u7528\u8BA1\u6570","slug":"_3-3-\u5F15\u7528\u8BA1\u6570","link":"#_3-3-\u5F15\u7528\u8BA1\u6570","children":[]},{"level":3,"title":"3.4 \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","slug":"_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","link":"#_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","children":[]}]},{"level":2,"title":"4. \u8C08\u8C08\u4F60\u5BF9 JavaScript \u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3\uFF1F","slug":"_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","link":"#_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. \u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","slug":"_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","link":"#_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"6. \u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3\uFF1F","slug":"_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","link":"#_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","slug":"_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","children":[{"level":3,"title":"7.1 \u7EE7\u627F - \u539F\u578B\u7EE7\u627F","slug":"_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","link":"#_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","children":[]},{"level":3,"title":"7.2 \u7EE7\u627F - \u7EC4\u5408\u7EE7\u627F","slug":"_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","link":"#_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.3 \u7EE7\u627F - \u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","slug":"_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","link":"#_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.4 es6 - class \u5B9E\u73B0\u7EE7\u627F extends","slug":"_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","link":"#_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","children":[]}]},{"level":2,"title":"8. \u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4\uFF1F","slug":"_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","link":"#_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","children":[]},{"level":2,"title":"9. \u8C08\u8C08\u4F60\u5BF9 this \u7684\u7406\u89E3\uFF1F","slug":"_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","link":"#_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"10. Promise \u7684\u9759\u6001\u65B9\u6CD5","slug":"_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","link":"#_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","children":[]},{"level":2,"title":"11. \u5B8F\u4EFB\u52A1 \u5FAE\u4EFB\u52A1 \u662F\u4EC0\u4E48","slug":"_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","link":"#_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"12. async/await \u662F\u4EC0\u4E48\uFF1F","slug":"_12-async-await-\u662F\u4EC0\u4E48","link":"#_12-async-await-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"13. \u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF\uFF1F","slug":"_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","link":"#_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565\uFF1F","slug":"_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","link":"#_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","children":[]},{"level":2,"title":"15. \u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF\uFF1F","slug":"_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","link":"#_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","children":[]},{"level":2,"title":"16. Babel \u7684\u539F\u7406\u662F\u4EC0\u4E48\uFF1F","slug":"_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","link":"#_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/js.md"}'),h={name:"pages/interviews/js.md"},u=o(`

JavaScript \u57FA\u7840

1. \u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347\uFF1F

\u53D8\u91CF\u63D0\u5347\uFF08hoisting\uFF09\uFF0C\u662F\u8D1F\u8D23\u89E3\u6790\u6267\u884C\u4EE3\u7801\u7684 JavaScript \u5F15\u64CE\u7684\u5DE5\u4F5C\u65B9\u5F0F\u4EA7\u751F\u7684\u4E00\u4E2A\u7279\u6027\u3002

JS \u5F15\u64CE\u5728\u8FD0\u884C\u4E00\u4EFD\u4EE3\u7801\u7684\u65F6\u5019\uFF0C\u4F1A\u6309\u7167\u4E0B\u9762\u7684\u6B65\u9AA4\u8FDB\u884C\u5DE5\u4F5C\uFF1A

  1. \u9996\u5148\uFF0C\u5BF9\u4EE3\u7801\u8FDB\u884C\u9884\u89E3\u6790\uFF0C\u5E76\u83B7\u53D6\u58F0\u660E\u7684\u6240\u6709\u53D8\u91CF

  2. \u7136\u540E\uFF0C\u5C06\u8FD9\u4E9B\u53D8\u91CF\u7684\u58F0\u660E\u8BED\u53E5\u7EDF\u4E00\u653E\u5230\u4EE3\u7801\u7684\u6700\u524D\u9762

  3. \u6700\u540E\uFF0C\u5F00\u59CB\u4E00\u884C\u4E00\u884C\u8FD0\u884C\u4EE3\u7801

\u53D8\u91CF\u7684\u8FD9\u4E00\u8F6C\u6362\u8FC7\u7A0B\uFF0C\u5C31\u88AB\u79F0\u4E3A\u53D8\u91CF\u7684\u58F0\u660E\u63D0\u5347\u3002

\u800C\u8FD9\u662F\u4E0D\u89C4\u8303, \u4E0D\u5408\u7406\u7684, \u6211\u4EEC\u7528\u7684 let \u5C31\u6CA1\u6709\u8FD9\u4E2A\u53D8\u91CF\u63D0\u5347\u7684\u95EE\u9898

2. JS \u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684\uFF1F

\u57FA\u672C\u7C7B\u578B\uFF1A\u662F\u503C\u4F20\u9012\uFF01

\u590D\u6742\u7C7B\u578B: \u4F20\u9012\u7684\u662F\u5730\u5740! (\u53D8\u91CF\u4E2D\u5B58\u7684\u5C31\u662F\u5730\u5740)

\u4FEE\u6539\u53C2\u6570\u5C5E\u6027\u503C\u7684\u8BDD\uFF0C\u6539\u53D8\u7684\u4F9D\u7136\u662F\u539F\u5730\u5740\u4E2D\u7684\u5BF9\u8C61\u672C\u8EAB

js
let a = {
   count: 1,
 };
 function test(x) {
@@ -38,7 +38,7 @@ import{_ as e,h as t,o as c,c as r,b as s,i as n,g as l,w as p,a as o}from"./app
 }
 
 cycle();
-

image-20210305172448582

3.4 \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5

\u73B0\u4EE3\u7684\u6D4F\u89C8\u5668\u5DF2\u7ECF\u4E0D\u518D\u4F7F\u7528\u5F15\u7528\u8BA1\u6570\u7B97\u6CD5\u4E86\u3002

\u73B0\u4EE3\u6D4F\u89C8\u5668\u901A\u7528\u7684\u5927\u591A\u662F\u57FA\u4E8E\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5\u7684\u67D0\u4E9B\u6539\u8FDB\u7B97\u6CD5\uFF0C\u603B\u4F53\u601D\u60F3\u90FD\u662F\u4E00\u81F4\u7684\u3002

\u6807\u8BB0\u6E05\u9664\u6CD5:

  • \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5\u5C06\u201C\u4E0D\u518D\u4F7F\u7528\u7684\u5BF9\u8C61\u201D\u5B9A\u4E49\u4E3A\u201C\u65E0\u6CD5\u8FBE\u5230\u7684\u5BF9\u8C61\u201D\u3002

  • \u7B80\u5355\u6765\u8BF4\uFF0C\u5C31\u662F\u4ECE\u6839\u90E8\uFF08\u5728 JS \u4E2D\u5C31\u662F\u5168\u5C40\u5BF9\u8C61\uFF09\u51FA\u53D1\u5B9A\u65F6\u626B\u63CF\u5185\u5B58\u4E2D\u7684\u5BF9\u8C61\u3002

  • \u51E1\u662F\u80FD\u4ECE\u6839\u90E8\u5230\u8FBE\u7684\u5BF9\u8C61\uFF0C\u90FD\u662F\u8FD8\u9700\u8981\u4F7F\u7528\u7684\u3002\u90A3\u4E9B\u65E0\u6CD5\u7531\u6839\u90E8\u51FA\u53D1\u89E6\u53CA\u5230\u7684\u5BF9\u8C61\u88AB\u6807\u8BB0\u4E3A\u4E0D\u518D\u4F7F\u7528\uFF0C\u7A0D\u540E\u8FDB\u884C\u56DE\u6536\u3002

\u4ECE\u8FD9\u4E2A\u6982\u5FF5\u53EF\u4EE5\u770B\u51FA\uFF0C\u65E0\u6CD5\u89E6\u53CA\u7684\u5BF9\u8C61\u5305\u542B\u4E86\u6CA1\u6709\u5F15\u7528\u7684\u5BF9\u8C61\u8FD9\u4E2A\u6982\u5FF5\uFF08\u6CA1\u6709\u4EFB\u4F55\u5F15\u7528\u7684\u5BF9\u8C61\u4E5F\u662F\u65E0\u6CD5\u89E6\u53CA\u7684\u5BF9\u8C61\uFF09\u3002

\u6839\u636E\u8FD9\u4E2A\u6982\u5FF5\uFF0C\u4E0A\u9762\u7684\u4F8B\u5B50\u53EF\u4EE5\u6B63\u786E\u88AB\u5783\u573E\u56DE\u6536\u5904\u7406\u4E86\u3002

\u53C2\u8003\u6587\u7AE0\uFF1AJavaScript \u5185\u5B58\u7BA1\u7406

4. \u8C08\u8C08\u4F60\u5BF9 JavaScript \u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3\uFF1F

JavaScript \u5728\u6267\u2F8F\u8FC7\u7A0B\u4E2D\u4F1A\u521B\u5EFA\u4E00\u4E2A\u4E2A\u7684\u53EF\u6267\u2F8F\u4E0A\u4E0B\u2F42\u3002 (\u6BCF\u4E2A\u51FD\u6570\u6267\u884C\u90FD\u4F1A\u521B\u5EFA\u8FD9\u4E48\u4E00\u4E2A\u53EF\u6267\u884C\u4E0A\u4E0B\u6587)

\u6BCF\u4E2A\u53EF\u6267\u2F8F\u4E0A\u4E0B\u2F42\u7684\u8BCD\u6CD5\u73AF\u5883\u4E2D\u5305\u542B\u4E86\u5BF9\u5916\u90E8\u8BCD\u6CD5\u73AF\u5883\u7684\u5F15\u2F64\uFF0C\u53EF\u901A\u8FC7\u8BE5\u5F15\u2F64\u6765\u83B7\u53D6\u5916\u90E8\u8BCD\u6CD5\u73AF\u5883\u4E2D\u7684\u53D8\u91CF\u548C\u58F0\u660E\u7B49\u3002

\u8FD9\u4E9B\u5F15\u2F64\u4E32\u8054\u8D77\u6765\uFF0C\u2F00\u76F4\u6307\u5411\u5168\u5C40\u7684\u8BCD\u6CD5\u73AF\u5883\uFF0C\u5F62\u6210\u4E00\u4E2A\u94FE\u5F0F\u7ED3\u6784\uFF0C\u88AB\u79F0\u4E3A\u4F5C\u2F64\u57DF\u94FE\u3002

',42),g=s("strong",null,"\u51FD\u6570\u5185\u90E8 \u53EF\u4EE5\u8BBF\u95EE\u5230 \u51FD\u6570\u5916\u90E8\u4F5C\u7528\u57DF\u7684\u53D8\u91CF, \u800C\u5916\u90E8\u51FD\u6570\u8FD8\u53EF\u4EE5\u8BBF\u95EE\u5230\u5168\u5C40\u4F5C\u7528\u57DF\u7684\u53D8\u91CF\uFF0C",-1),_=o('

js \u5168\u5C40\u6709\u5168\u5C40\u53EF\u6267\u884C\u4E0A\u4E0B\u6587, \u6BCF\u4E2A\u51FD\u6570\u8C03\u7528\u65F6, \u6709\u7740\u51FD\u6570\u7684\u53EF\u6267\u884C\u4E0A\u4E0B\u6587, \u4F1A\u5165 js \u8C03\u7528\u6808

\u6BCF\u4E2A\u53EF\u6267\u884C\u4E0A\u4E0B\u6587, \u90FD\u6709\u7740\u5BF9\u4E8E\u5916\u90E8\u4E0A\u4E0B\u6587\u8BCD\u6CD5\u4F5C\u7528\u57DF\u7684\u5F15\u7528, \u5916\u90E8\u4E0A\u4E0B\u6587\u4E5F\u6709\u7740\u5BF9\u4E8E\u518D\u5916\u90E8\u7684\u4E0A\u4E0B\u6587\u8BCD\u6CD5\u4F5C\u7528\u57DF\u7684\u5F15\u7528

=> \u5C31\u5F62\u6210\u4E86\u4F5C\u7528\u57DF\u94FE

5. \u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3

\u539F\u578B\u548C\u539F\u578B\u94FE

  1. \u539F\u578B\u662F\u4E3A\u4E86\u5B9E\u73B0\u9762\u5411\u5BF9\u8C61\u7684\u624B\u6BB5\uFF0C\u539F\u578B\u94FE\u662F\u4E3A\u4E86\u5B9E\u73B0\u7EE7\u627F

  2. \u5B9E\u73B0\u9762\u5411\u5BF9\u8C61\u7684\u4E24\u79CD\u65B9\u5F0F\uFF1A \u57FA\u4E8E\u7C7B\u7684\u9762\u5411\u5BF9\u8C61\u548C\u57FA\u4E8E\u539F\u578B\u7684\u9762\u5411\u5BF9\u8C61

  3. \u901A\u8FC7\u539F\u578B\u80FD\u77E5\u9053\u5BF9\u8C61\u7684\u7C7B\u578B\uFF0C\u4E0D\u7136\u4F1A\u4E22\u5931\u5BF9\u8C61\u7684\u7C7B\u578B

  4. \u901A\u8FC7\u4E00\u4E2A\u6784\u9020\u51FD\u6570\u5B9E\u4F8B\u5316\uFF0C\u4EA7\u751F\u4E00\u4E2A\u5B9E\u4F8B\u5BF9\u8C61\uFF0C\u5B9E\u4F8B\u5BF9\u8C61\u91CC\u4F1A\u6709\u4E00\u4E2A _proto_\u5C5E\u6027\u6307\u5411\u539F\u578B\u5BF9\u8C61\uFF0C\u539F\u578B\u5BF9\u8C61\u91CC\u9762\u8BB0\u5F55\u8BE5\u5B9E\u4F8B\u5BF9\u8C61\u7684\u7C7B\u578B\uFF0C\u8FD9\u4E2A\u5B9E\u4F8B\u5BF9\u8C61\u7684 constructor \u6307\u56DE \u6784\u9020\u51FD\u6570\uFF0C\u6784\u9020\u51FD\u6570\u91CC\u9762\u6709\u4E00\u4E2A prototype \u6307\u5411\u539F\u578B\u5BF9\u8C61

\u8981\u8BB2\u6E05\u695A\u8FD9\u4E2A\u95EE\u9898\uFF0C\u4E3B\u8981\u7740\u91CD\u8FD9\u51E0\u4E2A\u65B9\u9762\uFF1A

  • \u4EC0\u4E48\u662F\u539F\u578B\u5BF9\u8C61
  • \u6784\u9020\u51FD\u6570, \u539F\u578B\u5BF9\u8C61, \u5B9E\u4F8B\u7684\u4E09\u89D2\u5173\u7CFB\u56FE
  • \u539F\u578B\u94FE\u5982\u4F55\u5F62\u6210 image-20210306104516852

\u539F\u578B\u5BF9\u8C61

\u5728 JavaScript \u4E2D\uFF0C\u9664\u53BB\u4E00\u90E8\u5206\u5185\u5EFA\u51FD\u6570\uFF0C\u7EDD\u5927\u591A\u6570\u7684\u51FD\u6570\u90FD\u4F1A\u5305\u542B\u6709\u4E00\u4E2A\u53EB\u505A prototype \u7684\u5C5E\u6027\uFF0C\u6307\u5411\u539F\u578B\u5BF9\u8C61\uFF0C

\u57FA\u4E8E\u6784\u9020\u51FD\u6570\u521B\u5EFA\u51FA\u6765\u7684\u5B9E\u4F8B, \u90FD\u53EF\u4EE5\u5171\u4EAB\u8BBF\u95EE\u539F\u578B\u5BF9\u8C61\u7684\u5C5E\u6027\u3002

\u4F8B\u5982\u6211\u4EEC\u7684 hasOwnProperty, toString \u2F45\u6CD5\u7B49\u5176\u5B9E\u662F Obejct \u539F\u578B\u5BF9\u8C61\u7684\u65B9\u6CD5\uFF0C\u5B83\u53EF\u4EE5\u88AB\u4EFB\u4F55\u5BF9\u8C61\u5F53\u505A\u2F83\u2F30\u7684\u2F45\u6CD5\u6765\u4F7F\u2F64\u3002

hasOwnProperty \u7528\u4E8E\u5224\u65AD, \u67D0\u4E2A\u5C5E\u6027, \u662F\u4E0D\u662F\u81EA\u5DF1\u7684 (\u8FD8\u662F\u539F\u578B\u94FE\u4E0A\u7684)

\u539F\u578B\u94FE

\u5728 JavaScript \u4E2D\uFF0C\u6BCF\u4E2A\u5BF9\u8C61\u4E2D\u90FD\u6709\u4E00\u4E2A __proto__ \u5C5E\u6027\uFF0C\u8FD9\u4E2A\u5C5E\u6027\u6307\u5411\u4E86\u5F53\u524D\u5BF9\u8C61\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u3002

\u5BF9\u8C61\u53EF\u4EE5\u901A\u8FC7\u81EA\u8EAB\u7684 __proto__\u5C5E\u6027\u4E0E\u5B83\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61\u8FDE\u63A5\u8D77\u6765\uFF0C

\u800C\u56E0\u4E3A\u5B83\u7684\u539F\u578B\u5BF9\u8C61\u4E5F\u6709 __proto__\uFF0C\u56E0\u6B64\u8FD9\u6837\u5C31\u4E32\u8054\u5F62\u6210\u4E00\u4E2A\u94FE\u5F0F\u7ED3\u6784\uFF0C\u4E5F\u5C31\u662F\u6211\u4EEC\u79F0\u4E3A\u7684\u539F\u578B\u94FE\u3002

image-20210218212449526

6. \u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3\uFF1F

\u8FD9\u4E2A\u95EE\u9898\u60F3\u8003\u5BDF\u7684\u4E3B\u8981\u6709\u4E24\u4E2A\u65B9\u9762\uFF1A

  • \u5BF9\u95ED\u5305\u7684\u57FA\u672C\u6982\u5FF5\u7684\u7406\u89E3
  • \u5BF9\u95ED\u5305\u7684\u4F5C\u7528\u7684\u4E86\u89E3

\u4EC0\u4E48\u662F\u95ED\u5305\uFF1F

MDN \u7684\u5B98\u65B9\u89E3\u91CA\uFF1A

\u95ED\u5305\u662F\u51FD\u6570\u548C\u58F0\u660E\u8BE5\u51FD\u6570\u7684\u8BCD\u6CD5\u73AF\u5883\u7684\u7EC4\u5408

\u66F4\u901A\u4FD7\u4E00\u70B9\u7684\u89E3\u91CA\u662F\uFF1A

',24),b=s("strong",null,"\u95ED\u5305\u7684\u4E3B\u8981\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F",-1),m=s("strong",null,"\u53D8\u91CF\u79C1\u6709",-1),E=o(`
js
function Person() {
+

image-20210305172448582

3.4 \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5

\u73B0\u4EE3\u7684\u6D4F\u89C8\u5668\u5DF2\u7ECF\u4E0D\u518D\u4F7F\u7528\u5F15\u7528\u8BA1\u6570\u7B97\u6CD5\u4E86\u3002

\u73B0\u4EE3\u6D4F\u89C8\u5668\u901A\u7528\u7684\u5927\u591A\u662F\u57FA\u4E8E\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5\u7684\u67D0\u4E9B\u6539\u8FDB\u7B97\u6CD5\uFF0C\u603B\u4F53\u601D\u60F3\u90FD\u662F\u4E00\u81F4\u7684\u3002

\u6807\u8BB0\u6E05\u9664\u6CD5:

  • \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5\u5C06\u201C\u4E0D\u518D\u4F7F\u7528\u7684\u5BF9\u8C61\u201D\u5B9A\u4E49\u4E3A\u201C\u65E0\u6CD5\u8FBE\u5230\u7684\u5BF9\u8C61\u201D\u3002

  • \u7B80\u5355\u6765\u8BF4\uFF0C\u5C31\u662F\u4ECE\u6839\u90E8\uFF08\u5728 JS \u4E2D\u5C31\u662F\u5168\u5C40\u5BF9\u8C61\uFF09\u51FA\u53D1\u5B9A\u65F6\u626B\u63CF\u5185\u5B58\u4E2D\u7684\u5BF9\u8C61\u3002

  • \u51E1\u662F\u80FD\u4ECE\u6839\u90E8\u5230\u8FBE\u7684\u5BF9\u8C61\uFF0C\u90FD\u662F\u8FD8\u9700\u8981\u4F7F\u7528\u7684\u3002\u90A3\u4E9B\u65E0\u6CD5\u7531\u6839\u90E8\u51FA\u53D1\u89E6\u53CA\u5230\u7684\u5BF9\u8C61\u88AB\u6807\u8BB0\u4E3A\u4E0D\u518D\u4F7F\u7528\uFF0C\u7A0D\u540E\u8FDB\u884C\u56DE\u6536\u3002

\u4ECE\u8FD9\u4E2A\u6982\u5FF5\u53EF\u4EE5\u770B\u51FA\uFF0C\u65E0\u6CD5\u89E6\u53CA\u7684\u5BF9\u8C61\u5305\u542B\u4E86\u6CA1\u6709\u5F15\u7528\u7684\u5BF9\u8C61\u8FD9\u4E2A\u6982\u5FF5\uFF08\u6CA1\u6709\u4EFB\u4F55\u5F15\u7528\u7684\u5BF9\u8C61\u4E5F\u662F\u65E0\u6CD5\u89E6\u53CA\u7684\u5BF9\u8C61\uFF09\u3002

\u6839\u636E\u8FD9\u4E2A\u6982\u5FF5\uFF0C\u4E0A\u9762\u7684\u4F8B\u5B50\u53EF\u4EE5\u6B63\u786E\u88AB\u5783\u573E\u56DE\u6536\u5904\u7406\u4E86\u3002

\u53C2\u8003\u6587\u7AE0\uFF1AJavaScript \u5185\u5B58\u7BA1\u7406

4. \u8C08\u8C08\u4F60\u5BF9 JavaScript \u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3\uFF1F

JavaScript \u5728\u6267\u2F8F\u8FC7\u7A0B\u4E2D\u4F1A\u521B\u5EFA\u4E00\u4E2A\u4E2A\u7684\u53EF\u6267\u2F8F\u4E0A\u4E0B\u2F42\u3002 (\u6BCF\u4E2A\u51FD\u6570\u6267\u884C\u90FD\u4F1A\u521B\u5EFA\u8FD9\u4E48\u4E00\u4E2A\u53EF\u6267\u884C\u4E0A\u4E0B\u6587)

\u6BCF\u4E2A\u53EF\u6267\u2F8F\u4E0A\u4E0B\u2F42\u7684\u8BCD\u6CD5\u73AF\u5883\u4E2D\u5305\u542B\u4E86\u5BF9\u5916\u90E8\u8BCD\u6CD5\u73AF\u5883\u7684\u5F15\u2F64\uFF0C\u53EF\u901A\u8FC7\u8BE5\u5F15\u2F64\u6765\u83B7\u53D6\u5916\u90E8\u8BCD\u6CD5\u73AF\u5883\u4E2D\u7684\u53D8\u91CF\u548C\u58F0\u660E\u7B49\u3002

\u8FD9\u4E9B\u5F15\u2F64\u4E32\u8054\u8D77\u6765\uFF0C\u2F00\u76F4\u6307\u5411\u5168\u5C40\u7684\u8BCD\u6CD5\u73AF\u5883\uFF0C\u5F62\u6210\u4E00\u4E2A\u94FE\u5F0F\u7ED3\u6784\uFF0C\u88AB\u79F0\u4E3A\u4F5C\u2F64\u57DF\u94FE\u3002

',42),g=s("strong",null,"\u51FD\u6570\u5185\u90E8 \u53EF\u4EE5\u8BBF\u95EE\u5230 \u51FD\u6570\u5916\u90E8\u4F5C\u7528\u57DF\u7684\u53D8\u91CF, \u800C\u5916\u90E8\u51FD\u6570\u8FD8\u53EF\u4EE5\u8BBF\u95EE\u5230\u5168\u5C40\u4F5C\u7528\u57DF\u7684\u53D8\u91CF\uFF0C",-1),_=o('

js \u5168\u5C40\u6709\u5168\u5C40\u53EF\u6267\u884C\u4E0A\u4E0B\u6587, \u6BCF\u4E2A\u51FD\u6570\u8C03\u7528\u65F6, \u6709\u7740\u51FD\u6570\u7684\u53EF\u6267\u884C\u4E0A\u4E0B\u6587, \u4F1A\u5165 js \u8C03\u7528\u6808

\u6BCF\u4E2A\u53EF\u6267\u884C\u4E0A\u4E0B\u6587, \u90FD\u6709\u7740\u5BF9\u4E8E\u5916\u90E8\u4E0A\u4E0B\u6587\u8BCD\u6CD5\u4F5C\u7528\u57DF\u7684\u5F15\u7528, \u5916\u90E8\u4E0A\u4E0B\u6587\u4E5F\u6709\u7740\u5BF9\u4E8E\u518D\u5916\u90E8\u7684\u4E0A\u4E0B\u6587\u8BCD\u6CD5\u4F5C\u7528\u57DF\u7684\u5F15\u7528

=> \u5C31\u5F62\u6210\u4E86\u4F5C\u7528\u57DF\u94FE

5. \u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3

\u8981\u8BB2\u6E05\u695A\u8FD9\u4E2A\u95EE\u9898\uFF0C\u4E3B\u8981\u7740\u91CD\u8FD9\u51E0\u4E2A\u65B9\u9762\uFF1A

  • \u4EC0\u4E48\u662F\u539F\u578B\u5BF9\u8C61
  • \u6784\u9020\u51FD\u6570, \u539F\u578B\u5BF9\u8C61, \u5B9E\u4F8B\u7684\u4E09\u89D2\u5173\u7CFB\u56FE
  • \u539F\u578B\u94FE\u5982\u4F55\u5F62\u6210 image-20210306104516852

\u539F\u578B\u5BF9\u8C61

\u5728 JavaScript \u4E2D\uFF0C\u9664\u53BB\u4E00\u90E8\u5206\u5185\u5EFA\u51FD\u6570\uFF0C\u7EDD\u5927\u591A\u6570\u7684\u51FD\u6570\u90FD\u4F1A\u5305\u542B\u6709\u4E00\u4E2A\u53EB\u505A prototype \u7684\u5C5E\u6027\uFF0C\u6307\u5411\u539F\u578B\u5BF9\u8C61\uFF0C

\u57FA\u4E8E\u6784\u9020\u51FD\u6570\u521B\u5EFA\u51FA\u6765\u7684\u5B9E\u4F8B, \u90FD\u53EF\u4EE5\u5171\u4EAB\u8BBF\u95EE\u539F\u578B\u5BF9\u8C61\u7684\u5C5E\u6027\u3002

\u4F8B\u5982\u6211\u4EEC\u7684 hasOwnProperty, toString \u2F45\u6CD5\u7B49\u5176\u5B9E\u662F Obejct \u539F\u578B\u5BF9\u8C61\u7684\u65B9\u6CD5\uFF0C\u5B83\u53EF\u4EE5\u88AB\u4EFB\u4F55\u5BF9\u8C61\u5F53\u505A\u2F83\u2F30\u7684\u2F45\u6CD5\u6765\u4F7F\u2F64\u3002

hasOwnProperty \u7528\u4E8E\u5224\u65AD, \u67D0\u4E2A\u5C5E\u6027, \u662F\u4E0D\u662F\u81EA\u5DF1\u7684 (\u8FD8\u662F\u539F\u578B\u94FE\u4E0A\u7684)

\u539F\u578B\u94FE

\u5728 JavaScript \u4E2D\uFF0C\u6BCF\u4E2A\u5BF9\u8C61\u4E2D\u90FD\u6709\u4E00\u4E2A __proto__ \u5C5E\u6027\uFF0C\u8FD9\u4E2A\u5C5E\u6027\u6307\u5411\u4E86\u5F53\u524D\u5BF9\u8C61\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u3002

\u5BF9\u8C61\u53EF\u4EE5\u901A\u8FC7\u81EA\u8EAB\u7684 __proto__\u5C5E\u6027\u4E0E\u5B83\u7684\u6784\u9020\u51FD\u6570\u7684\u539F\u578B\u5BF9\u8C61\u8FDE\u63A5\u8D77\u6765\uFF0C

\u800C\u56E0\u4E3A\u5B83\u7684\u539F\u578B\u5BF9\u8C61\u4E5F\u6709 __proto__\uFF0C\u56E0\u6B64\u8FD9\u6837\u5C31\u4E32\u8054\u5F62\u6210\u4E00\u4E2A\u94FE\u5F0F\u7ED3\u6784\uFF0C\u4E5F\u5C31\u662F\u6211\u4EEC\u79F0\u4E3A\u7684\u539F\u578B\u94FE\u3002

image-20210218212449526

6. \u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3\uFF1F

\u8FD9\u4E2A\u95EE\u9898\u60F3\u8003\u5BDF\u7684\u4E3B\u8981\u6709\u4E24\u4E2A\u65B9\u9762\uFF1A

  • \u5BF9\u95ED\u5305\u7684\u57FA\u672C\u6982\u5FF5\u7684\u7406\u89E3
  • \u5BF9\u95ED\u5305\u7684\u4F5C\u7528\u7684\u4E86\u89E3

\u4EC0\u4E48\u662F\u95ED\u5305\uFF1F

MDN \u7684\u5B98\u65B9\u89E3\u91CA\uFF1A

\u95ED\u5305\u662F\u51FD\u6570\u548C\u58F0\u660E\u8BE5\u51FD\u6570\u7684\u8BCD\u6CD5\u73AF\u5883\u7684\u7EC4\u5408

\u66F4\u901A\u4FD7\u4E00\u70B9\u7684\u89E3\u91CA\u662F\uFF1A

',23),b=s("strong",null,"\u95ED\u5305\u7684\u4E3B\u8981\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F",-1),m=s("strong",null,"\u53D8\u91CF\u79C1\u6709",-1),E=o(`
js
function Person() {
   // \u4EE5 let \u58F0\u660E\u4E00\u4E2A\u5C40\u90E8\u53D8\u91CF\uFF0C\u800C\u4E0D\u662F this.name
   // this.name = 'zs'     =>  p.name
   let name = "hm_programmer"; // \u6570\u636E\u79C1\u6709
diff --git a/assets/pages_interviews_js.md.3c178cde.lean.js b/assets/pages_interviews_js.md.642bf115.lean.js
similarity index 97%
rename from assets/pages_interviews_js.md.3c178cde.lean.js
rename to assets/pages_interviews_js.md.642bf115.lean.js
index 75be089..eee26b8 100644
--- a/assets/pages_interviews_js.md.3c178cde.lean.js
+++ b/assets/pages_interviews_js.md.642bf115.lean.js
@@ -1 +1 @@
-import{_ as e,h as t,o as c,c as r,b as s,i as n,g as l,w as p,a as o}from"./app.cac277bf.js";const y="/ybhdsg-zhs/assets/image-20210305172448582.b5495005.png",F="/ybhdsg-zhs/assets/image-20210306104516852.e37bd288.png",D="/ybhdsg-zhs/assets/image-20210218212449526.591c6cf9.png",i="/ybhdsg-zhs/assets/img1.cec84ebb.png",A="/ybhdsg-zhs/assets/image-20201208040306978.29b49979.png",C="/ybhdsg-zhs/assets/image-20201208040235602.9c1fe808.png",d="/ybhdsg-zhs/assets/image-20210221101152845.33f587de.png",N=JSON.parse('{"title":"JavaScript \u57FA\u7840","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347\uFF1F","slug":"_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","link":"#_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","children":[]},{"level":2,"title":"2. JS \u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684\uFF1F","slug":"_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","link":"#_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","children":[]},{"level":2,"title":"3. JavaScript \u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684\uFF1F","slug":"_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","link":"#_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","children":[{"level":3,"title":"3.1 \u5185\u5B58\u7684\u751F\u547D\u5468\u671F","slug":"_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","link":"#_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","children":[]},{"level":3,"title":"3.2 \u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","slug":"_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","link":"#_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","children":[]},{"level":3,"title":"3.3 \u5F15\u7528\u8BA1\u6570","slug":"_3-3-\u5F15\u7528\u8BA1\u6570","link":"#_3-3-\u5F15\u7528\u8BA1\u6570","children":[]},{"level":3,"title":"3.4 \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","slug":"_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","link":"#_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","children":[]}]},{"level":2,"title":"4. \u8C08\u8C08\u4F60\u5BF9 JavaScript \u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3\uFF1F","slug":"_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","link":"#_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. \u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","slug":"_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","link":"#_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"6. \u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3\uFF1F","slug":"_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","link":"#_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","slug":"_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","children":[{"level":3,"title":"7.1 \u7EE7\u627F - \u539F\u578B\u7EE7\u627F","slug":"_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","link":"#_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","children":[]},{"level":3,"title":"7.2 \u7EE7\u627F - \u7EC4\u5408\u7EE7\u627F","slug":"_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","link":"#_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.3 \u7EE7\u627F - \u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","slug":"_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","link":"#_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.4 es6 - class \u5B9E\u73B0\u7EE7\u627F extends","slug":"_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","link":"#_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","children":[]}]},{"level":2,"title":"8. \u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4\uFF1F","slug":"_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","link":"#_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","children":[]},{"level":2,"title":"9. \u8C08\u8C08\u4F60\u5BF9 this \u7684\u7406\u89E3\uFF1F","slug":"_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","link":"#_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"10. Promise \u7684\u9759\u6001\u65B9\u6CD5","slug":"_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","link":"#_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","children":[]},{"level":2,"title":"11. \u5B8F\u4EFB\u52A1 \u5FAE\u4EFB\u52A1 \u662F\u4EC0\u4E48","slug":"_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","link":"#_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"12. async/await \u662F\u4EC0\u4E48\uFF1F","slug":"_12-async-await-\u662F\u4EC0\u4E48","link":"#_12-async-await-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"13. \u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF\uFF1F","slug":"_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","link":"#_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565\uFF1F","slug":"_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","link":"#_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","children":[]},{"level":2,"title":"15. \u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF\uFF1F","slug":"_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","link":"#_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","children":[]},{"level":2,"title":"16. Babel \u7684\u539F\u7406\u662F\u4EC0\u4E48\uFF1F","slug":"_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","link":"#_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/js.md"}'),h={name:"pages/interviews/js.md"},u=o("",42),g=s("strong",null,"\u51FD\u6570\u5185\u90E8 \u53EF\u4EE5\u8BBF\u95EE\u5230 \u51FD\u6570\u5916\u90E8\u4F5C\u7528\u57DF\u7684\u53D8\u91CF, \u800C\u5916\u90E8\u51FD\u6570\u8FD8\u53EF\u4EE5\u8BBF\u95EE\u5230\u5168\u5C40\u4F5C\u7528\u57DF\u7684\u53D8\u91CF\uFF0C",-1),_=o("",24),b=s("strong",null,"\u95ED\u5305\u7684\u4E3B\u8981\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F",-1),m=s("strong",null,"\u53D8\u91CF\u79C1\u6709",-1),E=o("",47),v=s("p",null,[s("strong",null,"\u5E94\u7528\u573A\u666F: \u7ECF\u5E38\u505A\u7EE7\u627F.")],-1),j=s("strong",null,"\u6570\u7EC4",-1),f=s("p",null,[s("strong",null,"\u5E94\u7528\u573A\u666F: \u7ECF\u5E38\u8DDF\u6570\u7EC4\u6709\u5173\u7CFB")],-1),k=o("",71);function S(q,w,x,T,P,B){const a=t("font");return c(),r("div",null,[u,s("p",null,[n("\u7B80\u800C\u8A00\u4E4B: "),l(a,{color:"blue"},{default:p(()=>[g]),_:1}),n("\u8FD9\u6837\u7684\u53D8\u91CF\u4F5C\u7528\u57DF\u8BBF\u95EE\u7684\u94FE\u5F0F\u7ED3\u6784, \u88AB\u79F0\u4E4B\u4E3A\u4F5C\u7528\u57DF\u94FE")]),_,s("blockquote",null,[l(a,{color:"blue"},{default:p(()=>[n("\u5185\u5C42\u51FD\u6570, \u5F15\u7528\u5916\u5C42\u51FD\u6570\u4E0A\u7684\u53D8\u91CF, \u5C31\u53EF\u4EE5\u5F62\u6210\u95ED\u5305")]),_:1})]),s("p",null,[b,n(" \u5728\u5B9E\u9645\u5F00\u53D1\u4E2D\uFF0C\u95ED\u5305\u6700\u5927\u7684\u4F5C\u7528\u5C31\u662F\u7528\u6765 "),l(a,{color:"red"},{default:p(()=>[m]),_:1}),n("\u3002")]),E,s("ul",null,[s("li",null,[l(a,{color:"red"},{default:p(()=>[n("call")]),_:1}),n(" \u7684\u53C2\u6570\u662F\u76F4\u63A5\u653E\u8FDB\u53BB\u7684\uFF0C\u7B2C\u4E8C\u7B2C\u4E09\u7B2C n \u4E2A\u53C2\u6570\u5168\u90FD\u7528\u9017\u53F7\u5206\u9694\uFF0C\u76F4\u63A5\u653E\u5230\u540E\u9762 obj.myFun.call(db,'\u6210\u90FD', ... ,'string' )\u3002")])]),v,s("ul",null,[s("li",null,[l(a,{color:"green"},{default:p(()=>[n("apply")]),_:1}),n(" \u7684\u6240\u6709\u53C2\u6570\u90FD\u5FC5\u987B\u653E\u5728\u4E00\u4E2A"),j,n("\u91CC\u9762\u4F20\u8FDB\u53BB obj.myFun.apply(db,['\u6210\u90FD', ..., 'string' ])\u3002")])]),f,s("ul",null,[s("li",null,[l(a,{color:"blue"},{default:p(()=>[n("bind")]),_:1}),n(" \u9664\u4E86\u8FD4\u56DE\u662F\u51FD\u6570\u4EE5\u5916\uFF0C\u5B83 \u7684\u53C2\u6570\u548C call \u4E00\u6837\u3002")])]),k])}const J=e(h,[["render",S]]);export{N as __pageData,J as default};
+import{_ as e,k as t,o as c,c as r,b as s,j as n,g as l,w as p,a as o}from"./app.88185e12.js";const y="/ybhdsg-zhs/assets/image-20210305172448582.b5495005.png",F="/ybhdsg-zhs/assets/image-20210306104516852.e37bd288.png",D="/ybhdsg-zhs/assets/image-20210218212449526.591c6cf9.png",i="/ybhdsg-zhs/assets/img1.cec84ebb.png",A="/ybhdsg-zhs/assets/image-20201208040306978.29b49979.png",C="/ybhdsg-zhs/assets/image-20201208040235602.9c1fe808.png",d="/ybhdsg-zhs/assets/image-20210221101152845.33f587de.png",N=JSON.parse('{"title":"JavaScript \u57FA\u7840","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347\uFF1F","slug":"_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","link":"#_1-\u89E3\u91CA\u4E0B\u4EC0\u4E48\u662F\u53D8\u91CF\u58F0\u660E\u63D0\u5347","children":[]},{"level":2,"title":"2. JS \u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684\uFF1F","slug":"_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","link":"#_2-js-\u7684\u53C2\u6570\u662F\u4EE5\u4EC0\u4E48\u65B9\u5F0F\u8FDB\u884C\u4F20\u9012\u7684","children":[]},{"level":2,"title":"3. JavaScript \u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684\uFF1F","slug":"_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","link":"#_3-javascript-\u5783\u573E\u56DE\u6536\u662F\u600E\u4E48\u505A\u7684","children":[{"level":3,"title":"3.1 \u5185\u5B58\u7684\u751F\u547D\u5468\u671F","slug":"_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","link":"#_3-1-\u5185\u5B58\u7684\u751F\u547D\u5468\u671F","children":[]},{"level":3,"title":"3.2 \u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","slug":"_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","link":"#_3-2-\u5783\u573E\u56DE\u6536\u7B97\u6CD5\u8BF4\u660E","children":[]},{"level":3,"title":"3.3 \u5F15\u7528\u8BA1\u6570","slug":"_3-3-\u5F15\u7528\u8BA1\u6570","link":"#_3-3-\u5F15\u7528\u8BA1\u6570","children":[]},{"level":3,"title":"3.4 \u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","slug":"_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","link":"#_3-4-\u6807\u8BB0\u6E05\u9664\u7B97\u6CD5","children":[]}]},{"level":2,"title":"4. \u8C08\u8C08\u4F60\u5BF9 JavaScript \u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3\uFF1F","slug":"_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","link":"#_4-\u8C08\u8C08\u4F60\u5BF9-javascript-\u4F5C\u7528\u57DF\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. \u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","slug":"_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","link":"#_5-\u8C08\u8C08\u4F60\u5BF9\u539F\u578B\u94FE\u7684\u7406\u89E3","children":[]},{"level":2,"title":"6. \u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3\uFF1F","slug":"_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","link":"#_6-\u8C08\u8C08\u4F60\u5BF9\u95ED\u5305\u7684\u7406\u89E3","children":[]},{"level":2,"title":"7. \u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","slug":"_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","link":"#_7-\u8C08\u8C08\u5BF9\u4E8E\u7EE7\u627F\u7684\u7406\u89E3","children":[{"level":3,"title":"7.1 \u7EE7\u627F - \u539F\u578B\u7EE7\u627F","slug":"_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","link":"#_7-1-\u7EE7\u627F-\u539F\u578B\u7EE7\u627F","children":[]},{"level":3,"title":"7.2 \u7EE7\u627F - \u7EC4\u5408\u7EE7\u627F","slug":"_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","link":"#_7-2-\u7EE7\u627F-\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.3 \u7EE7\u627F - \u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","slug":"_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","link":"#_7-3-\u7EE7\u627F-\u5BC4\u751F\u7EC4\u5408\u7EE7\u627F","children":[]},{"level":3,"title":"7.4 es6 - class \u5B9E\u73B0\u7EE7\u627F extends","slug":"_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","link":"#_7-4-es6-class-\u5B9E\u73B0\u7EE7\u627F-extends","children":[]}]},{"level":2,"title":"8. \u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4\uFF1F","slug":"_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","link":"#_8-\u5982\u4F55\u5224\u65AD\u662F\u5426\u662F\u6570\u7EC4","children":[]},{"level":2,"title":"9. \u8C08\u8C08\u4F60\u5BF9 this \u7684\u7406\u89E3\uFF1F","slug":"_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","link":"#_9-\u8C08\u8C08\u4F60\u5BF9-this-\u7684\u7406\u89E3","children":[]},{"level":2,"title":"10. Promise \u7684\u9759\u6001\u65B9\u6CD5","slug":"_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","link":"#_10-promise-\u7684\u9759\u6001\u65B9\u6CD5","children":[]},{"level":2,"title":"11. \u5B8F\u4EFB\u52A1 \u5FAE\u4EFB\u52A1 \u662F\u4EC0\u4E48","slug":"_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","link":"#_11-\u5B8F\u4EFB\u52A1-\u5FAE\u4EFB\u52A1-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"12. async/await \u662F\u4EC0\u4E48\uFF1F","slug":"_12-async-await-\u662F\u4EC0\u4E48","link":"#_12-async-await-\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"13. \u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF\uFF1F","slug":"_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","link":"#_13-\u524D\u7AEF\u5982\u4F55\u5B9E\u73B0\u5373\u65F6\u901A\u8BAF","children":[]},{"level":2,"title":"14. \u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565\uFF1F","slug":"_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","link":"#_14-\u4EC0\u4E48\u662F\u6D4F\u89C8\u5668\u7684\u540C\u6E90\u7B56\u7565","children":[]},{"level":2,"title":"15. \u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF\uFF1F","slug":"_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","link":"#_15-\u5982\u4F55\u5B9E\u73B0\u8DE8\u57DF","children":[]},{"level":2,"title":"16. Babel \u7684\u539F\u7406\u662F\u4EC0\u4E48\uFF1F","slug":"_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","link":"#_16-babel-\u7684\u539F\u7406\u662F\u4EC0\u4E48","children":[]}],"relativePath":"pages/interviews/js.md"}'),h={name:"pages/interviews/js.md"},u=o("",42),g=s("strong",null,"\u51FD\u6570\u5185\u90E8 \u53EF\u4EE5\u8BBF\u95EE\u5230 \u51FD\u6570\u5916\u90E8\u4F5C\u7528\u57DF\u7684\u53D8\u91CF, \u800C\u5916\u90E8\u51FD\u6570\u8FD8\u53EF\u4EE5\u8BBF\u95EE\u5230\u5168\u5C40\u4F5C\u7528\u57DF\u7684\u53D8\u91CF\uFF0C",-1),_=o("",23),b=s("strong",null,"\u95ED\u5305\u7684\u4E3B\u8981\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F",-1),m=s("strong",null,"\u53D8\u91CF\u79C1\u6709",-1),E=o("",47),v=s("p",null,[s("strong",null,"\u5E94\u7528\u573A\u666F: \u7ECF\u5E38\u505A\u7EE7\u627F.")],-1),j=s("strong",null,"\u6570\u7EC4",-1),f=s("p",null,[s("strong",null,"\u5E94\u7528\u573A\u666F: \u7ECF\u5E38\u8DDF\u6570\u7EC4\u6709\u5173\u7CFB")],-1),k=o("",71);function S(q,w,x,T,P,B){const a=t("font");return c(),r("div",null,[u,s("p",null,[n("\u7B80\u800C\u8A00\u4E4B: "),l(a,{color:"blue"},{default:p(()=>[g]),_:1}),n("\u8FD9\u6837\u7684\u53D8\u91CF\u4F5C\u7528\u57DF\u8BBF\u95EE\u7684\u94FE\u5F0F\u7ED3\u6784, \u88AB\u79F0\u4E4B\u4E3A\u4F5C\u7528\u57DF\u94FE")]),_,s("blockquote",null,[l(a,{color:"blue"},{default:p(()=>[n("\u5185\u5C42\u51FD\u6570, \u5F15\u7528\u5916\u5C42\u51FD\u6570\u4E0A\u7684\u53D8\u91CF, \u5C31\u53EF\u4EE5\u5F62\u6210\u95ED\u5305")]),_:1})]),s("p",null,[b,n(" \u5728\u5B9E\u9645\u5F00\u53D1\u4E2D\uFF0C\u95ED\u5305\u6700\u5927\u7684\u4F5C\u7528\u5C31\u662F\u7528\u6765 "),l(a,{color:"red"},{default:p(()=>[m]),_:1}),n("\u3002")]),E,s("ul",null,[s("li",null,[l(a,{color:"red"},{default:p(()=>[n("call")]),_:1}),n(" \u7684\u53C2\u6570\u662F\u76F4\u63A5\u653E\u8FDB\u53BB\u7684\uFF0C\u7B2C\u4E8C\u7B2C\u4E09\u7B2C n \u4E2A\u53C2\u6570\u5168\u90FD\u7528\u9017\u53F7\u5206\u9694\uFF0C\u76F4\u63A5\u653E\u5230\u540E\u9762 obj.myFun.call(db,'\u6210\u90FD', ... ,'string' )\u3002")])]),v,s("ul",null,[s("li",null,[l(a,{color:"green"},{default:p(()=>[n("apply")]),_:1}),n(" \u7684\u6240\u6709\u53C2\u6570\u90FD\u5FC5\u987B\u653E\u5728\u4E00\u4E2A"),j,n("\u91CC\u9762\u4F20\u8FDB\u53BB obj.myFun.apply(db,['\u6210\u90FD', ..., 'string' ])\u3002")])]),f,s("ul",null,[s("li",null,[l(a,{color:"blue"},{default:p(()=>[n("bind")]),_:1}),n(" \u9664\u4E86\u8FD4\u56DE\u662F\u51FD\u6570\u4EE5\u5916\uFF0C\u5B83 \u7684\u53C2\u6570\u548C call \u4E00\u6837\u3002")])]),k])}const J=e(h,[["render",S]]);export{N as __pageData,J as default};
diff --git a/assets/pages_interviews_networkrotocols.md.7dbf4a52.js b/assets/pages_interviews_networkrotocols.md.910d1446.js
similarity index 99%
rename from assets/pages_interviews_networkrotocols.md.7dbf4a52.js
rename to assets/pages_interviews_networkrotocols.md.910d1446.js
index 388ee8f..82637d8 100644
--- a/assets/pages_interviews_networkrotocols.md.7dbf4a52.js
+++ b/assets/pages_interviews_networkrotocols.md.910d1446.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as e}from"./app.cac277bf.js";const u=JSON.parse('{"title":"\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5206\u5C42\u6A21\u578B","slug":"\u5206\u5C42\u6A21\u578B","link":"#\u5206\u5C42\u6A21\u578B","children":[{"level":3,"title":"\u5206\u5C42\u7684\u610F\u4E49","slug":"\u5206\u5C42\u7684\u610F\u4E49","link":"#\u5206\u5C42\u7684\u610F\u4E49","children":[]},{"level":3,"title":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","slug":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","link":"#\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","children":[]},{"level":3,"title":"\u6570\u636E\u7684\u4F20\u8F93","slug":"\u6570\u636E\u7684\u4F20\u8F93","link":"#\u6570\u636E\u7684\u4F20\u8F93","children":[]},{"level":3,"title":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","slug":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","link":"#\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","children":[]}]},{"level":2,"title":"\u5E94\u7528\u5C42\u534F\u8BAE","slug":"\u5E94\u7528\u5C42\u534F\u8BAE","link":"#\u5E94\u7528\u5C42\u534F\u8BAE","children":[{"level":3,"title":"URL","slug":"url","link":"#url","children":[]},{"level":3,"title":"HTTP","slug":"http","link":"#http","children":[]}]}],"relativePath":"pages/interviews/networkrotocols.md"}'),l={name:"pages/interviews/networkrotocols.md"},o=e(`

\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE

\u5206\u5C42\u6A21\u578B

\u5206\u5C42\u7684\u610F\u4E49

\u5F53\u9047\u5230\u4E00\u4E2A\u590D\u6742\u95EE\u9898\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5206\u5C42\u7684\u601D\u60F3\u628A\u95EE\u9898\u7B80\u5355\u5316 \u4ECE\u5E38\u7406\u51FA\u53D1\uFF0C\u6211\u4EEC\u53EF\u4EE5\u5F97\u51FA\u4EE5\u4E0B\u7ED3\u8BBA\uFF1A

  • \u6BCF\u5C42\u76F8\u5BF9\u72EC\u7ACB\uFF0C\u53EA\u9700\u89E3\u51B3\u81EA\u5DF1\u7684\u95EE\u9898
  • \u6BCF\u5C42\u65E0\u987B\u8003\u8651\u4E0A\u5C42\u7684\u4EA4\u4ED8\uFF0C\u4EC5\u9700\u628A\u81EA\u5DF1\u7684\u7ED3\u679C\u4EA4\u7ED9\u4E0B\u5C42\u5373\u53EF
  • \u6BCF\u5C42\u6709\u591A\u79CD\u65B9\u6848\u53EF\u4F9B\u9009\u62E9\uFF0C\u9009\u62E9\u4E0D\u540C\u7684\u65B9\u6848\u4E0D\u4F1A\u5BF9\u4E0A\u4E0B\u5C42\u9020\u6210\u5F71\u54CD
  • \u6BCF\u4E00\u5C42\u4F1A\u5728\u4E0A\u4E00\u5C42\u7684\u57FA\u7840\u4E0A\u589E\u52A0\u4E00\u4E9B\u989D\u5916\u4FE1\u606F

\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B

\u7F51\u7EDC\u8981\u89E3\u51B3\u7684\u95EE\u9898\u662F\uFF1A\u4E24\u4E2A\u7A0B\u5E8F\u4E4B\u95F4\u5982\u4F55\u4EA4\u6362\u6570\u636E\u3002

\u8FD9\u662F\u4E00\u4E2A\u975E\u5E38\u590D\u6742\u7684\u95EE\u9898\uFF0C\u56E0\u4E3A\u4E24\u4E2A\u7A0B\u5E8F\u6709\u53EF\u80FD\u51FA\u73B0\u5728\u4E0D\u540C\u7684\u8BBE\u5907\u4E0A\u3002

\u9762\u5BF9\u590D\u6742\u7684\u95EE\u9898\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5206\u5C42\u7684\u65B9\u5F0F\u6765\u7B80\u5316\u3002

\u7ECF\u8FC7\u4E0D\u65AD\u7684\u6F14\u5316\uFF0C\u7F51\u7EDC\u6700\u7EC8\u5F62\u6210\u4E86\u4E94\u5C42\u6A21\u578B\uFF1A

image-20211008163417521

\u6570\u636E\u7684\u4F20\u8F93

image-20211008163458168

\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42

image-20211008164017299

\u5E94\u7528\u5C42\u534F\u8BAE

URL

URL\uFF08uniform resource locator\uFF0C\u7EDF\u4E00\u8D44\u6E90\u5B9A\u4F4D\u7B26\uFF09\u7528\u4E8E\u5B9A\u4F4D\u7F51\u7EDC\u670D\u52A1

image-20230112104100679

URL \u662F\u4E00\u4E2A\u56FA\u5B9A\u683C\u5F0F\u7684\u5B57\u7B26\u4E32

image-20230112102913056

\u5B83\u8868\u8FBE\u4E86\uFF1A

\u4ECE\u7F51\u7EDC\u4E2D==\u54EA\u53F0\u8BA1\u7B97\u673A\uFF08domain\uFF09==\u4E2D\u7684==\u54EA\u4E2A\u7A0B\u5E8F\uFF08port\uFF09==\u5BFB\u627E==\u54EA\u4E2A\u670D\u52A1\uFF08path\uFF09==\uFF0C\u5E76\u6CE8\u660E\u4E86\u83B7\u53D6\u670D\u52A1\u7684==\u5177\u4F53\u7EC6\u8282\uFF08query\uFF09==\uFF0C\u4EE5\u53CA\u8981\u7528\u4EC0\u4E48\u6837\u7684==\u534F\u8BAE\u901A\u4FE1\uFF08schema\uFF09==

\u8FD9\u91CC\u9762\u5305\u542B\u4E86\u4E00\u4E9B\u7EC6\u8282\uFF1A

  • \u5F53\u534F\u8BAE\u662Fhttp\u7AEF\u53E3\u4E3A80\u65F6\uFF0C\u7AEF\u53E3\u53EF\u4EE5\u7701\u7565
  • \u5F53\u534F\u8BAE\u662Fhttps\u7AEF\u53E3\u4E3A443\u65F6\uFF0C\u7AEF\u53E3\u53EF\u4EE5\u7701\u7565
  • schema\u3001domain\u3001path\u662F\u5FC5\u586B\u7684\uFF0C\u5176\u4ED6\u7684\u6839\u636E\u5177\u4F53\u7684\u8981\u6C42\u586B\u5199

HTTP

\u8D85\u6587\u672C\u4F20\u8F93\u534F\u8BAE\uFF08Hyper Text Transfer Protocol\uFF0CHTTP\uFF09\u662F\u4E00\u4E2A\u5E7F\u6CDB\u8FD0\u7528\u4E8E\u4E92\u8054\u7F51\u7684\u5E94\u7528\u5C42\u534F\u8BAE\u3002

99%\u7684\u60C5\u51B5\u4E0B\uFF0C\u524D\u7AEF\u5F00\u53D1\u8005\u63A5\u89E6\u7684\u90FD\u662F HTTP \u534F\u8BAE\u3002

\u8BE5\u534F\u8BAE\u89C4\u5B9A\u4E86\u4E24\u4E2A\u65B9\u9762\u7684\u5185\u5BB9\uFF1A

  • \u4F20\u9012\u6D88\u606F\u7684\u6A21\u5F0F
  • \u4F20\u9012\u6D88\u606F\u7684\u683C\u5F0F

\u4F20\u9012\u6D88\u606F\u7684\u6A21\u5F0F

image-20230112110047746

HTTP \u4F7F\u7528\u4E86\u4E00\u79CD\u6781\u4E3A\u7B80\u5355\u7684\u6D88\u606F\u4F20\u9012\u6A21\u5F0F\uFF0C\u300C\u8BF7\u6C42-\u54CD\u5E94\u300D\u6A21\u5F0F

\u53D1\u8D77\u8BF7\u6C42\u7684\u79F0\u4E4B\u4E3A\u5BA2\u6237\u7AEF\uFF0C\u63A5\u6536\u8BF7\u6C42\u5E76\u5B8C\u6210\u54CD\u5E94\u7684\u79F0\u4E4B\u4E3A\u670D\u52A1\u5668\u3002

\u300C\u8BF7\u6C42-\u54CD\u5E94\u300D\u5B8C\u6210\u540E\uFF0C\u4E00\u6B21\u4EA4\u4E92\u7ED3\u675F\u3002

\u4F20\u9012\u6D88\u606F\u7684\u683C\u5F0F

image-20230113214343300

HTTP \u7684\u6D88\u606F\u683C\u5F0F\u662F\u4E00\u79CD\u7EAF\u6587\u672C\u7684\u683C\u5F0F\uFF0C\u6587\u672C\u5206\u4E3A\u4E09\u4E2A\u90E8\u5206\uFF1A

\u8BF7\u6C42\u884C
+import{_ as s,o as a,c as n,a as e}from"./app.88185e12.js";const u=JSON.parse('{"title":"\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5206\u5C42\u6A21\u578B","slug":"\u5206\u5C42\u6A21\u578B","link":"#\u5206\u5C42\u6A21\u578B","children":[{"level":3,"title":"\u5206\u5C42\u7684\u610F\u4E49","slug":"\u5206\u5C42\u7684\u610F\u4E49","link":"#\u5206\u5C42\u7684\u610F\u4E49","children":[]},{"level":3,"title":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","slug":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","link":"#\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","children":[]},{"level":3,"title":"\u6570\u636E\u7684\u4F20\u8F93","slug":"\u6570\u636E\u7684\u4F20\u8F93","link":"#\u6570\u636E\u7684\u4F20\u8F93","children":[]},{"level":3,"title":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","slug":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","link":"#\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","children":[]}]},{"level":2,"title":"\u5E94\u7528\u5C42\u534F\u8BAE","slug":"\u5E94\u7528\u5C42\u534F\u8BAE","link":"#\u5E94\u7528\u5C42\u534F\u8BAE","children":[{"level":3,"title":"URL","slug":"url","link":"#url","children":[]},{"level":3,"title":"HTTP","slug":"http","link":"#http","children":[]}]}],"relativePath":"pages/interviews/networkrotocols.md"}'),l={name:"pages/interviews/networkrotocols.md"},o=e(`

\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE

\u5206\u5C42\u6A21\u578B

\u5206\u5C42\u7684\u610F\u4E49

\u5F53\u9047\u5230\u4E00\u4E2A\u590D\u6742\u95EE\u9898\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5206\u5C42\u7684\u601D\u60F3\u628A\u95EE\u9898\u7B80\u5355\u5316 \u4ECE\u5E38\u7406\u51FA\u53D1\uFF0C\u6211\u4EEC\u53EF\u4EE5\u5F97\u51FA\u4EE5\u4E0B\u7ED3\u8BBA\uFF1A

  • \u6BCF\u5C42\u76F8\u5BF9\u72EC\u7ACB\uFF0C\u53EA\u9700\u89E3\u51B3\u81EA\u5DF1\u7684\u95EE\u9898
  • \u6BCF\u5C42\u65E0\u987B\u8003\u8651\u4E0A\u5C42\u7684\u4EA4\u4ED8\uFF0C\u4EC5\u9700\u628A\u81EA\u5DF1\u7684\u7ED3\u679C\u4EA4\u7ED9\u4E0B\u5C42\u5373\u53EF
  • \u6BCF\u5C42\u6709\u591A\u79CD\u65B9\u6848\u53EF\u4F9B\u9009\u62E9\uFF0C\u9009\u62E9\u4E0D\u540C\u7684\u65B9\u6848\u4E0D\u4F1A\u5BF9\u4E0A\u4E0B\u5C42\u9020\u6210\u5F71\u54CD
  • \u6BCF\u4E00\u5C42\u4F1A\u5728\u4E0A\u4E00\u5C42\u7684\u57FA\u7840\u4E0A\u589E\u52A0\u4E00\u4E9B\u989D\u5916\u4FE1\u606F

\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B

\u7F51\u7EDC\u8981\u89E3\u51B3\u7684\u95EE\u9898\u662F\uFF1A\u4E24\u4E2A\u7A0B\u5E8F\u4E4B\u95F4\u5982\u4F55\u4EA4\u6362\u6570\u636E\u3002

\u8FD9\u662F\u4E00\u4E2A\u975E\u5E38\u590D\u6742\u7684\u95EE\u9898\uFF0C\u56E0\u4E3A\u4E24\u4E2A\u7A0B\u5E8F\u6709\u53EF\u80FD\u51FA\u73B0\u5728\u4E0D\u540C\u7684\u8BBE\u5907\u4E0A\u3002

\u9762\u5BF9\u590D\u6742\u7684\u95EE\u9898\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5206\u5C42\u7684\u65B9\u5F0F\u6765\u7B80\u5316\u3002

\u7ECF\u8FC7\u4E0D\u65AD\u7684\u6F14\u5316\uFF0C\u7F51\u7EDC\u6700\u7EC8\u5F62\u6210\u4E86\u4E94\u5C42\u6A21\u578B\uFF1A

image-20211008163417521

\u6570\u636E\u7684\u4F20\u8F93

image-20211008163458168

\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42

image-20211008164017299

\u5E94\u7528\u5C42\u534F\u8BAE

URL

URL\uFF08uniform resource locator\uFF0C\u7EDF\u4E00\u8D44\u6E90\u5B9A\u4F4D\u7B26\uFF09\u7528\u4E8E\u5B9A\u4F4D\u7F51\u7EDC\u670D\u52A1

image-20230112104100679

URL \u662F\u4E00\u4E2A\u56FA\u5B9A\u683C\u5F0F\u7684\u5B57\u7B26\u4E32

image-20230112102913056

\u5B83\u8868\u8FBE\u4E86\uFF1A

\u4ECE\u7F51\u7EDC\u4E2D==\u54EA\u53F0\u8BA1\u7B97\u673A\uFF08domain\uFF09==\u4E2D\u7684==\u54EA\u4E2A\u7A0B\u5E8F\uFF08port\uFF09==\u5BFB\u627E==\u54EA\u4E2A\u670D\u52A1\uFF08path\uFF09==\uFF0C\u5E76\u6CE8\u660E\u4E86\u83B7\u53D6\u670D\u52A1\u7684==\u5177\u4F53\u7EC6\u8282\uFF08query\uFF09==\uFF0C\u4EE5\u53CA\u8981\u7528\u4EC0\u4E48\u6837\u7684==\u534F\u8BAE\u901A\u4FE1\uFF08schema\uFF09==

\u8FD9\u91CC\u9762\u5305\u542B\u4E86\u4E00\u4E9B\u7EC6\u8282\uFF1A

  • \u5F53\u534F\u8BAE\u662Fhttp\u7AEF\u53E3\u4E3A80\u65F6\uFF0C\u7AEF\u53E3\u53EF\u4EE5\u7701\u7565
  • \u5F53\u534F\u8BAE\u662Fhttps\u7AEF\u53E3\u4E3A443\u65F6\uFF0C\u7AEF\u53E3\u53EF\u4EE5\u7701\u7565
  • schema\u3001domain\u3001path\u662F\u5FC5\u586B\u7684\uFF0C\u5176\u4ED6\u7684\u6839\u636E\u5177\u4F53\u7684\u8981\u6C42\u586B\u5199

HTTP

\u8D85\u6587\u672C\u4F20\u8F93\u534F\u8BAE\uFF08Hyper Text Transfer Protocol\uFF0CHTTP\uFF09\u662F\u4E00\u4E2A\u5E7F\u6CDB\u8FD0\u7528\u4E8E\u4E92\u8054\u7F51\u7684\u5E94\u7528\u5C42\u534F\u8BAE\u3002

99%\u7684\u60C5\u51B5\u4E0B\uFF0C\u524D\u7AEF\u5F00\u53D1\u8005\u63A5\u89E6\u7684\u90FD\u662F HTTP \u534F\u8BAE\u3002

\u8BE5\u534F\u8BAE\u89C4\u5B9A\u4E86\u4E24\u4E2A\u65B9\u9762\u7684\u5185\u5BB9\uFF1A

  • \u4F20\u9012\u6D88\u606F\u7684\u6A21\u5F0F
  • \u4F20\u9012\u6D88\u606F\u7684\u683C\u5F0F

\u4F20\u9012\u6D88\u606F\u7684\u6A21\u5F0F

image-20230112110047746

HTTP \u4F7F\u7528\u4E86\u4E00\u79CD\u6781\u4E3A\u7B80\u5355\u7684\u6D88\u606F\u4F20\u9012\u6A21\u5F0F\uFF0C\u300C\u8BF7\u6C42-\u54CD\u5E94\u300D\u6A21\u5F0F

\u53D1\u8D77\u8BF7\u6C42\u7684\u79F0\u4E4B\u4E3A\u5BA2\u6237\u7AEF\uFF0C\u63A5\u6536\u8BF7\u6C42\u5E76\u5B8C\u6210\u54CD\u5E94\u7684\u79F0\u4E4B\u4E3A\u670D\u52A1\u5668\u3002

\u300C\u8BF7\u6C42-\u54CD\u5E94\u300D\u5B8C\u6210\u540E\uFF0C\u4E00\u6B21\u4EA4\u4E92\u7ED3\u675F\u3002

\u4F20\u9012\u6D88\u606F\u7684\u683C\u5F0F

image-20230113214343300

HTTP \u7684\u6D88\u606F\u683C\u5F0F\u662F\u4E00\u79CD\u7EAF\u6587\u672C\u7684\u683C\u5F0F\uFF0C\u6587\u672C\u5206\u4E3A\u4E09\u4E2A\u90E8\u5206\uFF1A

\u8BF7\u6C42\u884C
 \u8BF7\u6C42\u5934
 
 \u8BF7\u6C42\u4F53
diff --git a/assets/pages_interviews_networkrotocols.md.7dbf4a52.lean.js b/assets/pages_interviews_networkrotocols.md.910d1446.lean.js
similarity index 95%
rename from assets/pages_interviews_networkrotocols.md.7dbf4a52.lean.js
rename to assets/pages_interviews_networkrotocols.md.910d1446.lean.js
index 22171e6..6fbbc25 100644
--- a/assets/pages_interviews_networkrotocols.md.7dbf4a52.lean.js
+++ b/assets/pages_interviews_networkrotocols.md.910d1446.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,a as e}from"./app.cac277bf.js";const u=JSON.parse('{"title":"\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5206\u5C42\u6A21\u578B","slug":"\u5206\u5C42\u6A21\u578B","link":"#\u5206\u5C42\u6A21\u578B","children":[{"level":3,"title":"\u5206\u5C42\u7684\u610F\u4E49","slug":"\u5206\u5C42\u7684\u610F\u4E49","link":"#\u5206\u5C42\u7684\u610F\u4E49","children":[]},{"level":3,"title":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","slug":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","link":"#\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","children":[]},{"level":3,"title":"\u6570\u636E\u7684\u4F20\u8F93","slug":"\u6570\u636E\u7684\u4F20\u8F93","link":"#\u6570\u636E\u7684\u4F20\u8F93","children":[]},{"level":3,"title":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","slug":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","link":"#\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","children":[]}]},{"level":2,"title":"\u5E94\u7528\u5C42\u534F\u8BAE","slug":"\u5E94\u7528\u5C42\u534F\u8BAE","link":"#\u5E94\u7528\u5C42\u534F\u8BAE","children":[{"level":3,"title":"URL","slug":"url","link":"#url","children":[]},{"level":3,"title":"HTTP","slug":"http","link":"#http","children":[]}]}],"relativePath":"pages/interviews/networkrotocols.md"}'),l={name:"pages/interviews/networkrotocols.md"},o=e("",74),p=[o];function t(c,i,r,d,h,y){return a(),n("div",null,p)}const D=s(l,[["render",t]]);export{u as __pageData,D as default};
+import{_ as s,o as a,c as n,a as e}from"./app.88185e12.js";const u=JSON.parse('{"title":"\u7F51\u7EDC\u5206\u5C42\u6A21\u578B\u548C\u5E94\u7528\u534F\u8BAE","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5206\u5C42\u6A21\u578B","slug":"\u5206\u5C42\u6A21\u578B","link":"#\u5206\u5C42\u6A21\u578B","children":[{"level":3,"title":"\u5206\u5C42\u7684\u610F\u4E49","slug":"\u5206\u5C42\u7684\u610F\u4E49","link":"#\u5206\u5C42\u7684\u610F\u4E49","children":[]},{"level":3,"title":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","slug":"\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","link":"#\u4E94\u5C42\u7F51\u7EDC\u6A21\u578B","children":[]},{"level":3,"title":"\u6570\u636E\u7684\u4F20\u8F93","slug":"\u6570\u636E\u7684\u4F20\u8F93","link":"#\u6570\u636E\u7684\u4F20\u8F93","children":[]},{"level":3,"title":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","slug":"\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","link":"#\u56DB\u5C42\u3001\u4E94\u5C42\u3001\u4E03\u5C42","children":[]}]},{"level":2,"title":"\u5E94\u7528\u5C42\u534F\u8BAE","slug":"\u5E94\u7528\u5C42\u534F\u8BAE","link":"#\u5E94\u7528\u5C42\u534F\u8BAE","children":[{"level":3,"title":"URL","slug":"url","link":"#url","children":[]},{"level":3,"title":"HTTP","slug":"http","link":"#http","children":[]}]}],"relativePath":"pages/interviews/networkrotocols.md"}'),l={name:"pages/interviews/networkrotocols.md"},o=e("",74),p=[o];function t(c,i,r,d,h,y){return a(),n("div",null,p)}const D=s(l,[["render",t]]);export{u as __pageData,D as default};
diff --git a/assets/pages_interviews_vue.md.a8066c1e.js b/assets/pages_interviews_vue.md.9053cc04.js
similarity index 99%
rename from assets/pages_interviews_vue.md.a8066c1e.js
rename to assets/pages_interviews_vue.md.9053cc04.js
index d708a57..dc4bb58 100644
--- a/assets/pages_interviews_vue.md.a8066c1e.js
+++ b/assets/pages_interviews_vue.md.9053cc04.js
@@ -1 +1 @@
-import{_ as e,o,c as i,a as r}from"./app.cac277bf.js";const v=JSON.parse('{"title":"vue2 \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F MVVM\uFF1F","slug":"_1-\u4EC0\u4E48\u662F-mvvm","link":"#_1-\u4EC0\u4E48\u662F-mvvm","children":[]},{"level":2,"title":"2. MVVM \u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B\uFF1F","slug":"_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","link":"#_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"3. \u8C08\u8C08\u5BF9 Vue \u751F\u547D\u5468\u671F\u7684\u7406\u89E3\uFF1F","slug":"_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","link":"#_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. Vue \u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1\uFF1F","slug":"_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","link":"#_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","children":[]},{"level":2,"title":"6. Vue \u53CC\u5411\u7ED1\u5B9A\u539F\u7406\uFF1F","slug":"_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","link":"#_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","children":[]},{"level":2,"title":"7. Object.defineProperty \u548C Proxy \u7684\u4F18\u7F3A\u70B9\uFF1F","slug":"_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","link":"#_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","children":[]},{"level":2,"title":"8. \u5982\u4F55\u7406\u89E3 Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\uFF1F","slug":"_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","link":"#_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","children":[{"level":3,"title":"\u57FA\u672C\u539F\u7406","slug":"\u57FA\u672C\u539F\u7406","link":"#\u57FA\u672C\u539F\u7406","children":[]}]}],"relativePath":"pages/interviews/vue.md"}'),t={name:"pages/interviews/vue.md"},d=r('

vue2 \u76F8\u5173

vue \u539F\u7406\u9762\u8BD5

1. \u4EC0\u4E48\u662F MVVM\uFF1F

Model \u5C42

\u5BF9\u5E94\u6570\u636E\u5C42\u7684\u57DF\u6A21\u578B\uFF0C\u4E3B\u8981\u7528\u6765\u505A\u57DF\u6A21\u578B\u7684\u540C\u6B65\u3002

\u901A\u8FC7 Ajax\u3001fetch \u7B49 API \u5B8C\u6210\u5BA2\u6237\u7AEF\u548C\u670D\u52A1\u7AEF\u4E1A\u52A1\u6A21\u578B\u7684\u540C\u6B65\u3002

\u5728\u5206\u5C42\u5173\u7CFB\u4E2D\uFF0C\u5B83\u4E3B\u8981\u2F64\u4E8E\u62BD\u8C61\u51FA ViewModel \u5C42\u4E2D\u89C6\u56FE\u7684 Model\u3002

View \u5C42

\u4F5C\u4E3A\u89C6\u56FE\u6A21\u677F\u5B58\u5728\uFF0C\u5176\u5B9E\u5728 MVVM \u4E2D\u6574\u4E2A View \u5C31\u662F\u2F00\u4E2A\u52A8\u6001\u6A21\u677F\u3002

\u9664\u4E86\u7528\u4E8E\u5B9A\u4E49\u7ED3\u6784\u548C\u5E03\u5C40\u4E4B\u5916\uFF0C\u5B83\u8FD8\u5C55\u793A\u4E86 ViewModel \u5C42\u7684\u6570\u636E\u548C\u72B6\u6001\u3002

View \u5C42\u5E76\u4E0D\u8D1F\u8D23\u72B6\u6001\u7684\u5B9E\u9645\u5904\u7406\uFF0C\u5B83\u53EA\u662F\u505A\uFF1A\u6570\u636E\u7ED1\u5B9A\u58F0\u660E\u3001 \u6307\u4EE4\u58F0\u660E\u3001 \u4E8B\u4EF6\u7ED1\u5B9A\u58F0\u660E\u3002

ViewModel \u5C42

\u8D1F\u8D23\u66B4\u9732\u6570\u636E\u7ED9 View \u5C42\uFF0C\u5E76\u5BF9 View \u5C42\u4E2D\u7684\u6570\u636E\u7ED1\u5B9A\u58F0\u660E\u3001 \u6307\u4EE4\u58F0\u660E\u3001 \u4E8B\u4EF6\u7ED1\u5B9A\u58F0\u660E\u8FDB\u884C\u5B9E\u9645\u7684\u4E1A\u52A1\u903B\u8F91\u3002

ViewModel \u5E95\u5C42\u4F1A\u505A\u597D\u7ED1\u5B9A\u5C5E\u6027\u7684\u76D1\u542C\uFF0C\u5F53 ViewModel \u4E2D\u7684\u6570\u636E\u53D8\u5316\u65F6\uFF0CView \u5C42\u4F1A\u81EA\u52A8\u8FDB\u884C\u66F4\u65B0\uFF1B\u2F7D\u5F53 View \u4E2D\u58F0\u660E\u4E86\u6570\u636E\u7684\u53CC\u5411\u7ED1\u5B9A\uFF08\u8868\u5355\u5143\u7D20\uFF09\uFF0C\u6846\u67B6\u4E5F\u4F1A\u76D1\u542C View \u5C42\uFF08\u8868\u5355\u5143\u7D20\uFF09\u503C\u7684\u53D8\u5316\uFF0C\u2F00\u65E6\u53D8\u5316\uFF0C\u5219 View \u5C42\u7ED1\u5B9A\u7684 ViewModel \u4E2D\u7684\u6570\u636E\u4E5F\u4F1A\u5F97\u5230\u2F83\u52A8\u66F4\u65B0\u3002

2. MVVM \u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B\uFF1F

\u4F18\u70B9

  1. \u5B9E\u73B0\u4E86\u89C6\u56FE\uFF08View\uFF09\u548C\u6A21\u578B\uFF08Model\uFF09\u7684\u5206\u79BB\uFF0C\u964D\u4F4E\u4EE3\u7801\u8026\u5408\u3001\u63D0\u2FBC\u89C6\u56FE\u6216\u903B\u8F91\u7684\u590D\u2F64\u6027

\u2F50\u5982\uFF1AView \u53EF\u4EE5\u72EC\u2F74\u4E8E Model \u53D8\u5316\u548C\u4FEE\u6539\uFF0C\u2F00\u4E2A ViewModel \u53EF\u4EE5\u7ED1\u5B9A\u4E8E\u4E0D\u540C\u7684 "View"\uFF0C\u5F53 View \u53D1\u751F\u53D8\u5316\u65F6 Model \u4E00\u5B9A\u4F1A\u968F\u4E4B\u6539\u53D8\uFF0C\u800C\u5F53 Model \u53D8\u5316\u65F6\u5219 View \u53EF\u4EE5\u4E0D\u53D8\u3002\u6211\u4EEC\u53EF\u4EE5\u628A\u2F00\u4E9B\u89C6\u56FE\u903B\u8F91\u653E\u5728\u2F00\u4E2A ViewModel \u2FA5\uFF0C\u4EE5\u6B64\u8BA9\u591A\u4E2A View \u91CD\u2F64\u8FD9\u6BB5\u89C6\u56FE\u903B\u8F91\u3002

  1. \u63D0\u2FBC\u4E86\u53EF\u6D4B\u8BD5\u6027\uFF1AViewModel \u7684\u5B58\u5728\u53EF\u4EE5\u5E2E\u52A9\u5F00\u53D1\u8005\u66F4\u597D\u5730\u7F16\u5199\u6D4B\u8BD5\u4EE3\u7801

  2. \u80FD\u2F83\u52A8\u66F4\u65B0 DOM\uFF1A\u5229\u2F64\u53CC\u5411\u7ED1\u5B9A\uFF0C\u6570\u636E\u66F4\u65B0\u540E\u89C6\u56FE\u2F83\u52A8\u66F4\u65B0\uFF0C\u8BA9\u5F00\u53D1\u8005\u4ECE\u7E41\u7410\u7684\u2F3F\u52A8\u64CD\u4F5C DOM \u4E2D\u89E3\u653E\u51FA\u6765

\u7F3A\u70B9

  1. Bug \u5F88\u96BE\u88AB\u8C03\u8BD5\uFF1A\u56E0\u4E3A\u4F7F\u2F64\u4E86\u53CC\u5411\u7ED1\u5B9A\u7684\u6A21\u5F0F\uFF0C\u5F53\u6211\u4EEC\u770B\u5230\u754C\u2FAF\u53D1\u751F\u5F02\u5E38\u4E86\uFF0C\u6709\u53EF\u80FD\u662F View \u7684\u4EE3\u7801\u4EA7\u751F\u7684 Bug\uFF0C\u4E5F\u6709\u53EF\u80FD\u662F Model \u4EE3\u7801\u7684\u95EE\u9898\u3002\u6570\u636E\u7ED1\u5B9A\u4F7F\u5F97\u2F00\u4E2A\u4F4D\u7F6E\u7684 Bug \u88AB\u5FEB\u901F\u4F20\u9012\u5230\u522B\u7684\u4F4D\u7F6E\uFF0C\u8981\u5B9A\u4F4D\u539F\u59CB\u51FA\u95EE\u9898\u7684\u5730\u2F45\u5C31\u53D8\u5F97\u4E0D\u90A3\u4E48\u5BB9\u6613\u4E86\u3002\u53E6\u5916\uFF0C\u6570\u636E\u7ED1\u5B9A\u7684\u58F0\u660E\u662F\u6307\u4EE4\u5F0F\u5730\u5199\u5728 View \u6A21\u7248\u4E2D\u7684\uFF0C\u5B83\u4EEC\u6CA1\u529E\u6CD5\u6253\u65AD\u70B9\u8FDB\u884C Debug

  2. \u5728\u2F00\u4E2A\u2F24\u7684\u6A21\u5757\u4E2D Model \u4E5F\u4F1A\u5F88\u2F24\uFF0C\u867D\u7136\u4F7F\u2F64\u4E0A\u6765\u8BF4\u2F45\u4FBF\u4E86\uFF0C\u4E5F\u80FD\u5F88\u5BB9\u6613\u7684\u4FDD\u8BC1\u4E86\u6570\u636E\u7684\u2F00\u81F4\u6027\uFF0C\u4F46\u5982\u679C\u2ED3\u671F\u6301\u6709\u4E0D\u91CA\u653E\u5185\u5B58\uFF0C\u5C31\u4F1A\u9020\u6210\u66F4\u591A\u7684\u5185\u5B58\u6D88\u8017

  3. \u5BF9\u4E8E\u2F24\u578B\u7684\u56FE\u5F62\u5E94\u2F64\u7A0B\u5E8F\uFF0C\u89C6\u56FE\u72B6\u6001\u8F83\u591A\uFF0CViewModel \u7684\u6784\u5EFA\u548C\u7EF4\u62A4\u7684\u6210\u672C\u90FD\u4F1A\u2F50\u8F83\u2FBC

3. \u8C08\u8C08\u5BF9 Vue \u751F\u547D\u5468\u671F\u7684\u7406\u89E3\uFF1F

\u751F\u547D\u5468\u671F\u7684\u6982\u5FF5

\u6BCF\u4E2A Vue \u5B9E\u4F8B\u90FD\u6709\u2F00\u4E2A\u5B8C\u6574\u7684\u2F63\u547D\u5468\u671F\uFF1A

  1. \u5F00\u59CB\u521B\u5EFA
  2. \u521D\u59CB\u5316\u6570\u636E
  3. \u7F16\u8BD1\u6A21\u7248
  4. \u6302\u8F7D DOM
  5. \u6E32\u67D3\u3001\u66F4\u65B0\u6570\u636E => \u91CD\u65B0\u6E32\u67D3
  6. \u5378\u8F7D

\u8FD9\u2F00\u7CFB\u5217\u8FC7\u7A0B\u6211\u4EEC\u79F0\u4E4B\u4E3A Vue \u7684\u2F63\u547D\u5468\u671F\u3002

5. Vue \u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1\uFF1F

props \u548C $emit + v-on

\u901A\u8FC7 props \u5C06\u6570\u636E\u5728\u7EC4\u4EF6\u6811\u4E2D\u8FDB\u884C\u2F83\u4E0A\u2F7D\u4E0B\u7684\u4F20\u9012\uFF1B

\u901A\u8FC7 $emit \u548C v-on \u6765\u4F5C\u4FE1\u606F\u7684\u5411\u4E0A\u4F20\u9012\u3002

EventBus

\u53EF\u901A\u8FC7 EventBus \u8FDB\u2F8F\u4FE1\u606F\u7684\u53D1\u5E03\u4E0E\u8BA2\u9605\u3002

Vuex

\u5168\u5C40\u72B6\u6001\u7BA1\u7406\u5E93\u3002\u53EF\u901A\u8FC7\u5B83\u6765\u8FDB\u884C\u5168\u5C40\u6570\u636E\u6D41\u7684\u7BA1\u7406\u3002

$attrs \u548C $listeners

\u5728 Vue 2.4 \u7248\u672C\u4E2D\u52A0\u2F0A\u7684 $attrs \u548C $listeners \u53EF\u4EE5\u7528\u6765\u4F5C\u4E3A\u8DE8\u7EA7\u7EC4\u4EF6\u4E4B\u95F4\u7684\u901A\u4FE1\u673A\u5236\u3002

provide \u548C inject

\u7531\u4E8E provide \u548C inject \u53EF\u4EE5\u5141\u8BB8\u2F00\u4E2A\u7956\u5148\u7EC4\u4EF6\u5411\u5B83\u7684\u6240\u6709\u2F26\u5B59\u7EC4\u4EF6\u6CE8\u2F0A\u2F00\u4E2A\u4F9D\u8D56\uFF08\u4E0D\u8BBA\u7EC4\u4EF6\u5C42\u6B21\u6709\u591A\u6DF1\uFF09\uFF0C\u5E76\u5728\u5176\u4E0A\u4E0B\u6E38\u5173\u7CFB\u6210\u2F74\u7684\u65F6\u95F4\u2FA5\u59CB\u7EC8\u2F63\u6548\uFF0C\u56E0\u6B64\u8FD9\u79CD\u673A\u5236\u4E5F\u5C31\u6210\u4E3A\u4E86\u4E00\u79CD\u8DE8\u7EC4\u4EF6\u901A\u4FE1\u7684\u624B\u6BB5\u3002

\u53E6\u5916\u8FD8\u6709\u4E00\u4E9B\u65B9\u5F0F\u4F7F\u7528\u573A\u666F\u6709\u9650\uFF0C\u5728\u6B64\u4E0D\u4ECB\u7ECD\u4E86\u3002

\u53EF\u4EE5\u9605\u8BFB\u53C2\u8003\u6587\u7AE0\uFF1AVue \u4E2D\u7684 8 \u79CD\u7EC4\u4EF6\u901A\u4FE1\u65B9\u5F0F

6. Vue \u53CC\u5411\u7ED1\u5B9A\u539F\u7406\uFF1F

\u5728 Vue 2.x \u4E2D\uFF0C\u5229\u2F64\u7684\u662F Object.defineProperty \u53BB\u52AB\u6301\u5BF9\u8C61\u7684\u8BBF\u95EE\u5668\uFF08Getter\u3001Setter\uFF09\uFF0C\u5F53\u5BF9\u8C61\u5C5E\u6027\u503C\u53D1\u2F63\u53D8\u5316\u65F6\u53EF\u83B7\u53D6\u53D8\u5316\uFF0C\u7136\u540E\u6839\u636E\u53D8\u5316\u6765\u4F5C\u540E\u7EED\u54CD\u5E94\uFF1B

\u5728 Vue 3.0 \u4E2D\uFF0C\u5219\u662F\u901A\u8FC7 Proxy \u4EE3\u7406\u5BF9\u8C61\u8FDB\u2F8F\u7C7B\u4F3C\u7684\u64CD\u4F5C\u3002

7. Object.defineProperty \u548C Proxy \u7684\u4F18\u7F3A\u70B9\uFF1F

Proxy

  • \u53EF\u4EE5\u76F4\u63A5\u76D1\u542C\u6574\u4E2A\u5BF9\u8C61\uFF0C\u2F7D\u2FAE\u662F\u5BF9\u8C61\u7684\u5C5E\u6027

  • \u53EF\u4EE5\u76F4\u63A5\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316

  • \u62E6\u622A\u2F45\u6CD5\u4E30\u5BCC\uFF1A\u591A\u8FBE 13 \u79CD\uFF0C\u4E0D\u9650\u4E8E apply\u3001ownKeys\u3001deleteProperty\u3001has \u7B49\u3002\u6BD4 Object.defineProperty \u5F3A\u5927\u5F88\u591A

  • \u8FD4\u56DE\u7684\u662F\u2F00\u4E2A\u65B0\u5BF9\u8C61\uFF0C\u53EF\u4EE5\u5728\u4E0D\u5F71\u54CD\u539F\u5BF9\u8C61\u7684\u60C5\u51B5\u4E0B\uFF0C\u53EA\u64CD\u4F5C\u65B0\u5BF9\u8C61\u6765\u8FBE\u5230\u2F6C\u7684\uFF1B\u2F7D Object.defineProperty \u53EA\u80FD\u904D\u5386\u539F\u5BF9\u8C61\u5C5E\u6027\u5E76\u76F4\u63A5\u4FEE\u6539\u539F\u5BF9\u8C61

  • \u53D7\u5230\u5404\u6D4F\u89C8\u5668\u2F1A\u5546\u7684\u91CD\u70B9\u6301\u7EED\u6027\u80FD\u4F18\u5316\uFF0C\u80FD\u4EAB\u53D7\u5230\u4F5C\u4E3A\u65B0\u6807\u51C6\u7684\u6027\u80FD\u7EA2\u5229

Object.defineProperty

  • \u517C\u5BB9\u6027\u8F83\u597D\uFF08\u53EF\u2F40\u6301\u5230 IE9\uFF09

8. \u5982\u4F55\u7406\u89E3 Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\uFF1F

(\u8003\u5BDF MVVM) M: model \u6570\u636E\u6A21\u578B, V:view \u89C6\u56FE\u6A21\u578B, VM: viewModel \u89C6\u56FE\u6570\u636E\u6A21\u578B

\u53CC\u5411:

  1. \u89C6\u56FE\u53D8\u5316\u4E86, \u6570\u636E\u81EA\u52A8\u66F4\u65B0 => \u76D1\u542C\u539F\u751F\u7684\u4E8B\u4EF6\u5373\u53EF, \u8F93\u5165\u6846\u53D8\u4E86, \u76D1\u542C\u8F93\u5165\u6846 input \u4E8B\u4EF6
  2. \u6570\u636E\u53D8\u5316\u4E86, \u89C6\u56FE\u8981\u81EA\u52A8\u66F4\u65B0 => vue2 \u548C vue3

\u57FA\u672C\u539F\u7406

vue2.0 \u6570\u636E\u52AB\u6301: Object.defineProperty (es5)

vue3.0 \u6570\u636E\u52AB\u6301: Proxy (es6)

\u5206\u6790 :\u6B64\u9898\u8003\u67E5 Vue \u7684 MVVM \u539F\u7406

\u89E3\u7B54: Vue \u7684\u53CC\u5411\u7ED1\u5B9A\u539F\u7406\u5176\u5B9E\u5C31\u662F MVVM \u7684\u57FA\u672C\u539F\u7406, Vuejs \u5B98\u7F51\u5DF2\u7ECF\u8BF4\u660E, \u5B9E\u9645\u5C31\u662F\u901A\u8FC7 Object.defineProperty \u65B9\u6CD5 \u5B8C\u6210\u4E86\u5BF9\u4E8E Vue \u5B9E\u4F8B\u4E2D\u6570\u636E\u7684 \u52AB\u6301, \u901A\u8FC7\u5BF9\u4E8E data \u4E2D\u6570\u636E \u8FDB\u884C set \u7684\u52AB\u6301\u76D1\u542C, \u7136\u540E\u901A\u8FC7**\u89C2\u5BDF\u8005\u6A21\u5F0F**, \u901A\u77E5 \u5BF9\u5E94\u7684\u7ED1\u5B9A\u8282\u70B9 \u8FDB\u884C\u8282\u70B9\u6570\u636E\u66F4\u65B0, \u5B8C\u6210\u6570\u636E\u9A71\u52A8\u89C6\u56FE\u7684\u66F4\u65B0

\u7B80\u5355\u6982\u8FF0 : \u901A\u8FC7 Object.defineProperty \u5B8C\u6210\u5BF9\u4E8E\u6570\u636E\u7684\u52AB\u6301, \u901A\u8FC7\u89C2\u5BDF\u8005\u6A21\u5F0F, \u5B8C\u6210\u5BF9\u4E8E\u8282\u70B9\u7684\u6570\u636E\u66F4\u65B0

',57),p=[d];function l(n,c,a,s,u,h){return o(),i("div",null,p)}const _=e(t,[["render",l]]);export{v as __pageData,_ as default}; +import{_ as e,o,c as i,a as r}from"./app.88185e12.js";const v=JSON.parse('{"title":"vue2 \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F MVVM\uFF1F","slug":"_1-\u4EC0\u4E48\u662F-mvvm","link":"#_1-\u4EC0\u4E48\u662F-mvvm","children":[]},{"level":2,"title":"2. MVVM \u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B\uFF1F","slug":"_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","link":"#_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"3. \u8C08\u8C08\u5BF9 Vue \u751F\u547D\u5468\u671F\u7684\u7406\u89E3\uFF1F","slug":"_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","link":"#_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. Vue \u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1\uFF1F","slug":"_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","link":"#_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","children":[]},{"level":2,"title":"6. Vue \u53CC\u5411\u7ED1\u5B9A\u539F\u7406\uFF1F","slug":"_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","link":"#_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","children":[]},{"level":2,"title":"7. Object.defineProperty \u548C Proxy \u7684\u4F18\u7F3A\u70B9\uFF1F","slug":"_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","link":"#_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","children":[]},{"level":2,"title":"8. \u5982\u4F55\u7406\u89E3 Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\uFF1F","slug":"_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","link":"#_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","children":[{"level":3,"title":"\u57FA\u672C\u539F\u7406","slug":"\u57FA\u672C\u539F\u7406","link":"#\u57FA\u672C\u539F\u7406","children":[]}]}],"relativePath":"pages/interviews/vue.md"}'),t={name:"pages/interviews/vue.md"},d=r('

vue2 \u76F8\u5173

vue \u539F\u7406\u9762\u8BD5

1. \u4EC0\u4E48\u662F MVVM\uFF1F

Model \u5C42

\u5BF9\u5E94\u6570\u636E\u5C42\u7684\u57DF\u6A21\u578B\uFF0C\u4E3B\u8981\u7528\u6765\u505A\u57DF\u6A21\u578B\u7684\u540C\u6B65\u3002

\u901A\u8FC7 Ajax\u3001fetch \u7B49 API \u5B8C\u6210\u5BA2\u6237\u7AEF\u548C\u670D\u52A1\u7AEF\u4E1A\u52A1\u6A21\u578B\u7684\u540C\u6B65\u3002

\u5728\u5206\u5C42\u5173\u7CFB\u4E2D\uFF0C\u5B83\u4E3B\u8981\u2F64\u4E8E\u62BD\u8C61\u51FA ViewModel \u5C42\u4E2D\u89C6\u56FE\u7684 Model\u3002

View \u5C42

\u4F5C\u4E3A\u89C6\u56FE\u6A21\u677F\u5B58\u5728\uFF0C\u5176\u5B9E\u5728 MVVM \u4E2D\u6574\u4E2A View \u5C31\u662F\u2F00\u4E2A\u52A8\u6001\u6A21\u677F\u3002

\u9664\u4E86\u7528\u4E8E\u5B9A\u4E49\u7ED3\u6784\u548C\u5E03\u5C40\u4E4B\u5916\uFF0C\u5B83\u8FD8\u5C55\u793A\u4E86 ViewModel \u5C42\u7684\u6570\u636E\u548C\u72B6\u6001\u3002

View \u5C42\u5E76\u4E0D\u8D1F\u8D23\u72B6\u6001\u7684\u5B9E\u9645\u5904\u7406\uFF0C\u5B83\u53EA\u662F\u505A\uFF1A\u6570\u636E\u7ED1\u5B9A\u58F0\u660E\u3001 \u6307\u4EE4\u58F0\u660E\u3001 \u4E8B\u4EF6\u7ED1\u5B9A\u58F0\u660E\u3002

ViewModel \u5C42

\u8D1F\u8D23\u66B4\u9732\u6570\u636E\u7ED9 View \u5C42\uFF0C\u5E76\u5BF9 View \u5C42\u4E2D\u7684\u6570\u636E\u7ED1\u5B9A\u58F0\u660E\u3001 \u6307\u4EE4\u58F0\u660E\u3001 \u4E8B\u4EF6\u7ED1\u5B9A\u58F0\u660E\u8FDB\u884C\u5B9E\u9645\u7684\u4E1A\u52A1\u903B\u8F91\u3002

ViewModel \u5E95\u5C42\u4F1A\u505A\u597D\u7ED1\u5B9A\u5C5E\u6027\u7684\u76D1\u542C\uFF0C\u5F53 ViewModel \u4E2D\u7684\u6570\u636E\u53D8\u5316\u65F6\uFF0CView \u5C42\u4F1A\u81EA\u52A8\u8FDB\u884C\u66F4\u65B0\uFF1B\u2F7D\u5F53 View \u4E2D\u58F0\u660E\u4E86\u6570\u636E\u7684\u53CC\u5411\u7ED1\u5B9A\uFF08\u8868\u5355\u5143\u7D20\uFF09\uFF0C\u6846\u67B6\u4E5F\u4F1A\u76D1\u542C View \u5C42\uFF08\u8868\u5355\u5143\u7D20\uFF09\u503C\u7684\u53D8\u5316\uFF0C\u2F00\u65E6\u53D8\u5316\uFF0C\u5219 View \u5C42\u7ED1\u5B9A\u7684 ViewModel \u4E2D\u7684\u6570\u636E\u4E5F\u4F1A\u5F97\u5230\u2F83\u52A8\u66F4\u65B0\u3002

2. MVVM \u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B\uFF1F

\u4F18\u70B9

  1. \u5B9E\u73B0\u4E86\u89C6\u56FE\uFF08View\uFF09\u548C\u6A21\u578B\uFF08Model\uFF09\u7684\u5206\u79BB\uFF0C\u964D\u4F4E\u4EE3\u7801\u8026\u5408\u3001\u63D0\u2FBC\u89C6\u56FE\u6216\u903B\u8F91\u7684\u590D\u2F64\u6027

\u2F50\u5982\uFF1AView \u53EF\u4EE5\u72EC\u2F74\u4E8E Model \u53D8\u5316\u548C\u4FEE\u6539\uFF0C\u2F00\u4E2A ViewModel \u53EF\u4EE5\u7ED1\u5B9A\u4E8E\u4E0D\u540C\u7684 "View"\uFF0C\u5F53 View \u53D1\u751F\u53D8\u5316\u65F6 Model \u4E00\u5B9A\u4F1A\u968F\u4E4B\u6539\u53D8\uFF0C\u800C\u5F53 Model \u53D8\u5316\u65F6\u5219 View \u53EF\u4EE5\u4E0D\u53D8\u3002\u6211\u4EEC\u53EF\u4EE5\u628A\u2F00\u4E9B\u89C6\u56FE\u903B\u8F91\u653E\u5728\u2F00\u4E2A ViewModel \u2FA5\uFF0C\u4EE5\u6B64\u8BA9\u591A\u4E2A View \u91CD\u2F64\u8FD9\u6BB5\u89C6\u56FE\u903B\u8F91\u3002

  1. \u63D0\u2FBC\u4E86\u53EF\u6D4B\u8BD5\u6027\uFF1AViewModel \u7684\u5B58\u5728\u53EF\u4EE5\u5E2E\u52A9\u5F00\u53D1\u8005\u66F4\u597D\u5730\u7F16\u5199\u6D4B\u8BD5\u4EE3\u7801

  2. \u80FD\u2F83\u52A8\u66F4\u65B0 DOM\uFF1A\u5229\u2F64\u53CC\u5411\u7ED1\u5B9A\uFF0C\u6570\u636E\u66F4\u65B0\u540E\u89C6\u56FE\u2F83\u52A8\u66F4\u65B0\uFF0C\u8BA9\u5F00\u53D1\u8005\u4ECE\u7E41\u7410\u7684\u2F3F\u52A8\u64CD\u4F5C DOM \u4E2D\u89E3\u653E\u51FA\u6765

\u7F3A\u70B9

  1. Bug \u5F88\u96BE\u88AB\u8C03\u8BD5\uFF1A\u56E0\u4E3A\u4F7F\u2F64\u4E86\u53CC\u5411\u7ED1\u5B9A\u7684\u6A21\u5F0F\uFF0C\u5F53\u6211\u4EEC\u770B\u5230\u754C\u2FAF\u53D1\u751F\u5F02\u5E38\u4E86\uFF0C\u6709\u53EF\u80FD\u662F View \u7684\u4EE3\u7801\u4EA7\u751F\u7684 Bug\uFF0C\u4E5F\u6709\u53EF\u80FD\u662F Model \u4EE3\u7801\u7684\u95EE\u9898\u3002\u6570\u636E\u7ED1\u5B9A\u4F7F\u5F97\u2F00\u4E2A\u4F4D\u7F6E\u7684 Bug \u88AB\u5FEB\u901F\u4F20\u9012\u5230\u522B\u7684\u4F4D\u7F6E\uFF0C\u8981\u5B9A\u4F4D\u539F\u59CB\u51FA\u95EE\u9898\u7684\u5730\u2F45\u5C31\u53D8\u5F97\u4E0D\u90A3\u4E48\u5BB9\u6613\u4E86\u3002\u53E6\u5916\uFF0C\u6570\u636E\u7ED1\u5B9A\u7684\u58F0\u660E\u662F\u6307\u4EE4\u5F0F\u5730\u5199\u5728 View \u6A21\u7248\u4E2D\u7684\uFF0C\u5B83\u4EEC\u6CA1\u529E\u6CD5\u6253\u65AD\u70B9\u8FDB\u884C Debug

  2. \u5728\u2F00\u4E2A\u2F24\u7684\u6A21\u5757\u4E2D Model \u4E5F\u4F1A\u5F88\u2F24\uFF0C\u867D\u7136\u4F7F\u2F64\u4E0A\u6765\u8BF4\u2F45\u4FBF\u4E86\uFF0C\u4E5F\u80FD\u5F88\u5BB9\u6613\u7684\u4FDD\u8BC1\u4E86\u6570\u636E\u7684\u2F00\u81F4\u6027\uFF0C\u4F46\u5982\u679C\u2ED3\u671F\u6301\u6709\u4E0D\u91CA\u653E\u5185\u5B58\uFF0C\u5C31\u4F1A\u9020\u6210\u66F4\u591A\u7684\u5185\u5B58\u6D88\u8017

  3. \u5BF9\u4E8E\u2F24\u578B\u7684\u56FE\u5F62\u5E94\u2F64\u7A0B\u5E8F\uFF0C\u89C6\u56FE\u72B6\u6001\u8F83\u591A\uFF0CViewModel \u7684\u6784\u5EFA\u548C\u7EF4\u62A4\u7684\u6210\u672C\u90FD\u4F1A\u2F50\u8F83\u2FBC

3. \u8C08\u8C08\u5BF9 Vue \u751F\u547D\u5468\u671F\u7684\u7406\u89E3\uFF1F

\u751F\u547D\u5468\u671F\u7684\u6982\u5FF5

\u6BCF\u4E2A Vue \u5B9E\u4F8B\u90FD\u6709\u2F00\u4E2A\u5B8C\u6574\u7684\u2F63\u547D\u5468\u671F\uFF1A

  1. \u5F00\u59CB\u521B\u5EFA
  2. \u521D\u59CB\u5316\u6570\u636E
  3. \u7F16\u8BD1\u6A21\u7248
  4. \u6302\u8F7D DOM
  5. \u6E32\u67D3\u3001\u66F4\u65B0\u6570\u636E => \u91CD\u65B0\u6E32\u67D3
  6. \u5378\u8F7D

\u8FD9\u2F00\u7CFB\u5217\u8FC7\u7A0B\u6211\u4EEC\u79F0\u4E4B\u4E3A Vue \u7684\u2F63\u547D\u5468\u671F\u3002

5. Vue \u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1\uFF1F

props \u548C $emit + v-on

\u901A\u8FC7 props \u5C06\u6570\u636E\u5728\u7EC4\u4EF6\u6811\u4E2D\u8FDB\u884C\u2F83\u4E0A\u2F7D\u4E0B\u7684\u4F20\u9012\uFF1B

\u901A\u8FC7 $emit \u548C v-on \u6765\u4F5C\u4FE1\u606F\u7684\u5411\u4E0A\u4F20\u9012\u3002

EventBus

\u53EF\u901A\u8FC7 EventBus \u8FDB\u2F8F\u4FE1\u606F\u7684\u53D1\u5E03\u4E0E\u8BA2\u9605\u3002

Vuex

\u5168\u5C40\u72B6\u6001\u7BA1\u7406\u5E93\u3002\u53EF\u901A\u8FC7\u5B83\u6765\u8FDB\u884C\u5168\u5C40\u6570\u636E\u6D41\u7684\u7BA1\u7406\u3002

$attrs \u548C $listeners

\u5728 Vue 2.4 \u7248\u672C\u4E2D\u52A0\u2F0A\u7684 $attrs \u548C $listeners \u53EF\u4EE5\u7528\u6765\u4F5C\u4E3A\u8DE8\u7EA7\u7EC4\u4EF6\u4E4B\u95F4\u7684\u901A\u4FE1\u673A\u5236\u3002

provide \u548C inject

\u7531\u4E8E provide \u548C inject \u53EF\u4EE5\u5141\u8BB8\u2F00\u4E2A\u7956\u5148\u7EC4\u4EF6\u5411\u5B83\u7684\u6240\u6709\u2F26\u5B59\u7EC4\u4EF6\u6CE8\u2F0A\u2F00\u4E2A\u4F9D\u8D56\uFF08\u4E0D\u8BBA\u7EC4\u4EF6\u5C42\u6B21\u6709\u591A\u6DF1\uFF09\uFF0C\u5E76\u5728\u5176\u4E0A\u4E0B\u6E38\u5173\u7CFB\u6210\u2F74\u7684\u65F6\u95F4\u2FA5\u59CB\u7EC8\u2F63\u6548\uFF0C\u56E0\u6B64\u8FD9\u79CD\u673A\u5236\u4E5F\u5C31\u6210\u4E3A\u4E86\u4E00\u79CD\u8DE8\u7EC4\u4EF6\u901A\u4FE1\u7684\u624B\u6BB5\u3002

\u53E6\u5916\u8FD8\u6709\u4E00\u4E9B\u65B9\u5F0F\u4F7F\u7528\u573A\u666F\u6709\u9650\uFF0C\u5728\u6B64\u4E0D\u4ECB\u7ECD\u4E86\u3002

\u53EF\u4EE5\u9605\u8BFB\u53C2\u8003\u6587\u7AE0\uFF1AVue \u4E2D\u7684 8 \u79CD\u7EC4\u4EF6\u901A\u4FE1\u65B9\u5F0F

6. Vue \u53CC\u5411\u7ED1\u5B9A\u539F\u7406\uFF1F

\u5728 Vue 2.x \u4E2D\uFF0C\u5229\u2F64\u7684\u662F Object.defineProperty \u53BB\u52AB\u6301\u5BF9\u8C61\u7684\u8BBF\u95EE\u5668\uFF08Getter\u3001Setter\uFF09\uFF0C\u5F53\u5BF9\u8C61\u5C5E\u6027\u503C\u53D1\u2F63\u53D8\u5316\u65F6\u53EF\u83B7\u53D6\u53D8\u5316\uFF0C\u7136\u540E\u6839\u636E\u53D8\u5316\u6765\u4F5C\u540E\u7EED\u54CD\u5E94\uFF1B

\u5728 Vue 3.0 \u4E2D\uFF0C\u5219\u662F\u901A\u8FC7 Proxy \u4EE3\u7406\u5BF9\u8C61\u8FDB\u2F8F\u7C7B\u4F3C\u7684\u64CD\u4F5C\u3002

7. Object.defineProperty \u548C Proxy \u7684\u4F18\u7F3A\u70B9\uFF1F

Proxy

  • \u53EF\u4EE5\u76F4\u63A5\u76D1\u542C\u6574\u4E2A\u5BF9\u8C61\uFF0C\u2F7D\u2FAE\u662F\u5BF9\u8C61\u7684\u5C5E\u6027

  • \u53EF\u4EE5\u76F4\u63A5\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316

  • \u62E6\u622A\u2F45\u6CD5\u4E30\u5BCC\uFF1A\u591A\u8FBE 13 \u79CD\uFF0C\u4E0D\u9650\u4E8E apply\u3001ownKeys\u3001deleteProperty\u3001has \u7B49\u3002\u6BD4 Object.defineProperty \u5F3A\u5927\u5F88\u591A

  • \u8FD4\u56DE\u7684\u662F\u2F00\u4E2A\u65B0\u5BF9\u8C61\uFF0C\u53EF\u4EE5\u5728\u4E0D\u5F71\u54CD\u539F\u5BF9\u8C61\u7684\u60C5\u51B5\u4E0B\uFF0C\u53EA\u64CD\u4F5C\u65B0\u5BF9\u8C61\u6765\u8FBE\u5230\u2F6C\u7684\uFF1B\u2F7D Object.defineProperty \u53EA\u80FD\u904D\u5386\u539F\u5BF9\u8C61\u5C5E\u6027\u5E76\u76F4\u63A5\u4FEE\u6539\u539F\u5BF9\u8C61

  • \u53D7\u5230\u5404\u6D4F\u89C8\u5668\u2F1A\u5546\u7684\u91CD\u70B9\u6301\u7EED\u6027\u80FD\u4F18\u5316\uFF0C\u80FD\u4EAB\u53D7\u5230\u4F5C\u4E3A\u65B0\u6807\u51C6\u7684\u6027\u80FD\u7EA2\u5229

Object.defineProperty

  • \u517C\u5BB9\u6027\u8F83\u597D\uFF08\u53EF\u2F40\u6301\u5230 IE9\uFF09

8. \u5982\u4F55\u7406\u89E3 Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\uFF1F

(\u8003\u5BDF MVVM) M: model \u6570\u636E\u6A21\u578B, V:view \u89C6\u56FE\u6A21\u578B, VM: viewModel \u89C6\u56FE\u6570\u636E\u6A21\u578B

\u53CC\u5411:

  1. \u89C6\u56FE\u53D8\u5316\u4E86, \u6570\u636E\u81EA\u52A8\u66F4\u65B0 => \u76D1\u542C\u539F\u751F\u7684\u4E8B\u4EF6\u5373\u53EF, \u8F93\u5165\u6846\u53D8\u4E86, \u76D1\u542C\u8F93\u5165\u6846 input \u4E8B\u4EF6
  2. \u6570\u636E\u53D8\u5316\u4E86, \u89C6\u56FE\u8981\u81EA\u52A8\u66F4\u65B0 => vue2 \u548C vue3

\u57FA\u672C\u539F\u7406

vue2.0 \u6570\u636E\u52AB\u6301: Object.defineProperty (es5)

vue3.0 \u6570\u636E\u52AB\u6301: Proxy (es6)

\u5206\u6790 :\u6B64\u9898\u8003\u67E5 Vue \u7684 MVVM \u539F\u7406

\u89E3\u7B54: Vue \u7684\u53CC\u5411\u7ED1\u5B9A\u539F\u7406\u5176\u5B9E\u5C31\u662F MVVM \u7684\u57FA\u672C\u539F\u7406, Vuejs \u5B98\u7F51\u5DF2\u7ECF\u8BF4\u660E, \u5B9E\u9645\u5C31\u662F\u901A\u8FC7 Object.defineProperty \u65B9\u6CD5 \u5B8C\u6210\u4E86\u5BF9\u4E8E Vue \u5B9E\u4F8B\u4E2D\u6570\u636E\u7684 \u52AB\u6301, \u901A\u8FC7\u5BF9\u4E8E data \u4E2D\u6570\u636E \u8FDB\u884C set \u7684\u52AB\u6301\u76D1\u542C, \u7136\u540E\u901A\u8FC7**\u89C2\u5BDF\u8005\u6A21\u5F0F**, \u901A\u77E5 \u5BF9\u5E94\u7684\u7ED1\u5B9A\u8282\u70B9 \u8FDB\u884C\u8282\u70B9\u6570\u636E\u66F4\u65B0, \u5B8C\u6210\u6570\u636E\u9A71\u52A8\u89C6\u56FE\u7684\u66F4\u65B0

\u7B80\u5355\u6982\u8FF0 : \u901A\u8FC7 Object.defineProperty \u5B8C\u6210\u5BF9\u4E8E\u6570\u636E\u7684\u52AB\u6301, \u901A\u8FC7\u89C2\u5BDF\u8005\u6A21\u5F0F, \u5B8C\u6210\u5BF9\u4E8E\u8282\u70B9\u7684\u6570\u636E\u66F4\u65B0

',57),p=[d];function l(n,c,a,s,u,h){return o(),i("div",null,p)}const _=e(t,[["render",l]]);export{v as __pageData,_ as default}; diff --git a/assets/pages_interviews_vue.md.a8066c1e.lean.js b/assets/pages_interviews_vue.md.9053cc04.lean.js similarity index 96% rename from assets/pages_interviews_vue.md.a8066c1e.lean.js rename to assets/pages_interviews_vue.md.9053cc04.lean.js index b19d62d..95de987 100644 --- a/assets/pages_interviews_vue.md.a8066c1e.lean.js +++ b/assets/pages_interviews_vue.md.9053cc04.lean.js @@ -1 +1 @@ -import{_ as e,o,c as i,a as r}from"./app.cac277bf.js";const v=JSON.parse('{"title":"vue2 \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F MVVM\uFF1F","slug":"_1-\u4EC0\u4E48\u662F-mvvm","link":"#_1-\u4EC0\u4E48\u662F-mvvm","children":[]},{"level":2,"title":"2. MVVM \u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B\uFF1F","slug":"_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","link":"#_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"3. \u8C08\u8C08\u5BF9 Vue \u751F\u547D\u5468\u671F\u7684\u7406\u89E3\uFF1F","slug":"_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","link":"#_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. Vue \u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1\uFF1F","slug":"_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","link":"#_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","children":[]},{"level":2,"title":"6. Vue \u53CC\u5411\u7ED1\u5B9A\u539F\u7406\uFF1F","slug":"_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","link":"#_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","children":[]},{"level":2,"title":"7. Object.defineProperty \u548C Proxy \u7684\u4F18\u7F3A\u70B9\uFF1F","slug":"_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","link":"#_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","children":[]},{"level":2,"title":"8. \u5982\u4F55\u7406\u89E3 Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\uFF1F","slug":"_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","link":"#_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","children":[{"level":3,"title":"\u57FA\u672C\u539F\u7406","slug":"\u57FA\u672C\u539F\u7406","link":"#\u57FA\u672C\u539F\u7406","children":[]}]}],"relativePath":"pages/interviews/vue.md"}'),t={name:"pages/interviews/vue.md"},d=r("",57),p=[d];function l(n,c,a,s,u,h){return o(),i("div",null,p)}const _=e(t,[["render",l]]);export{v as __pageData,_ as default}; +import{_ as e,o,c as i,a as r}from"./app.88185e12.js";const v=JSON.parse('{"title":"vue2 \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F MVVM\uFF1F","slug":"_1-\u4EC0\u4E48\u662F-mvvm","link":"#_1-\u4EC0\u4E48\u662F-mvvm","children":[]},{"level":2,"title":"2. MVVM \u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B\uFF1F","slug":"_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","link":"#_2-mvvm-\u7684\u4F18\u7F3A\u70B9\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"3. \u8C08\u8C08\u5BF9 Vue \u751F\u547D\u5468\u671F\u7684\u7406\u89E3\uFF1F","slug":"_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","link":"#_3-\u8C08\u8C08\u5BF9-vue-\u751F\u547D\u5468\u671F\u7684\u7406\u89E3","children":[]},{"level":2,"title":"5. Vue \u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1\uFF1F","slug":"_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","link":"#_5-vue-\u7EC4\u4EF6\u4E4B\u95F4\u5982\u4F55\u8FDB\u884C\u901A\u4FE1","children":[]},{"level":2,"title":"6. Vue \u53CC\u5411\u7ED1\u5B9A\u539F\u7406\uFF1F","slug":"_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","link":"#_6-vue-\u53CC\u5411\u7ED1\u5B9A\u539F\u7406","children":[]},{"level":2,"title":"7. Object.defineProperty \u548C Proxy \u7684\u4F18\u7F3A\u70B9\uFF1F","slug":"_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","link":"#_7-object-defineproperty-\u548C-proxy-\u7684\u4F18\u7F3A\u70B9","children":[]},{"level":2,"title":"8. \u5982\u4F55\u7406\u89E3 Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\uFF1F","slug":"_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","link":"#_8-\u5982\u4F55\u7406\u89E3-vue-\u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF","children":[{"level":3,"title":"\u57FA\u672C\u539F\u7406","slug":"\u57FA\u672C\u539F\u7406","link":"#\u57FA\u672C\u539F\u7406","children":[]}]}],"relativePath":"pages/interviews/vue.md"}'),t={name:"pages/interviews/vue.md"},d=r("",57),p=[d];function l(n,c,a,s,u,h){return o(),i("div",null,p)}const _=e(t,[["render",l]]);export{v as __pageData,_ as default}; diff --git a/assets/pages_interviews_webpack.md.fb4ce712.js b/assets/pages_interviews_webpack.md.1fa7fa56.js similarity index 99% rename from assets/pages_interviews_webpack.md.fb4ce712.js rename to assets/pages_interviews_webpack.md.1fa7fa56.js index d6c6a65..ed346cc 100644 --- a/assets/pages_interviews_webpack.md.fb4ce712.js +++ b/assets/pages_interviews_webpack.md.1fa7fa56.js @@ -1,2 +1,2 @@ -import{_ as e,o as a,c as l,a as r}from"./app.cac277bf.js";const b=JSON.parse('{"title":"Webpack \u9762\u8BD5\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1\u3001webpack \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF0C\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3\uFF1F","slug":"_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","link":"#_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","children":[]},{"level":2,"title":"2\u3001webpack \u7684\u5DE5\u4F5C\u539F\u7406?","slug":"_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","link":"#_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","children":[]},{"level":2,"title":"3\u3001webpack \u6253\u5305\u539F\u7406","slug":"_3\u3001webpack-\u6253\u5305\u539F\u7406","link":"#_3\u3001webpack-\u6253\u5305\u539F\u7406","children":[]},{"level":2,"title":"4\u3001webpack \u7684\u6838\u5FC3\u6982\u5FF5","slug":"_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","link":"#_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","children":[]},{"level":2,"title":"5\u3001Webpack \u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B\uFF1F","slug":"_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","link":"#_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"6\u3001gulp/grunt \u4E0E webpack \u7684\u533A\u522B\u662F\u4EC0\u4E48?","slug":"_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"7\u3001webpack \u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684?","slug":"_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","link":"#_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","children":[]},{"level":2,"title":"8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8 webpack \u6784\u4EF6\u901F\u5EA6\u7684?","slug":"_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","link":"#_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","children":[]},{"level":2,"title":"9\u3001npm \u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B\uFF1F\u5982\u4F55\u5229\u7528 webpack \u6765\u66F4\u597D\u7684\u6784\u5EFA\uFF1F","slug":"_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","link":"#_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","children":[]},{"level":2,"title":"10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA\uFF1F","slug":"_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","link":"#_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","children":[]},{"level":2,"title":"11\u3001webpack \u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48?\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","slug":"_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","link":"#_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","children":[]},{"level":2,"title":"12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528\uFF1F\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528\uFF1F","slug":"_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","link":"#_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","children":[]},{"level":2,"title":"13\u3001Loader \u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"14\u3001\u5E38\u7528 loader","slug":"_14\u3001\u5E38\u7528-loader","link":"#_14\u3001\u5E38\u7528-loader","children":[]},{"level":2,"title":"15\u3001Plugin\uFF08\u63D2\u4EF6\uFF09\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16\u3001\u4EC0\u4E48\u662F bundle\uFF0C\u4EC0\u4E48\u662F chunk\uFF0C\u4EC0\u4E48\u662F module","slug":"_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","link":"#_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","children":[]},{"level":2,"title":"17\u3001\u5E38\u89C1 Plugins","slug":"_17\u3001\u5E38\u89C1-plugins","link":"#_17\u3001\u5E38\u89C1-plugins","children":[]},{"level":2,"title":"18\u3001ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528","slug":"_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","link":"#_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","children":[]},{"level":2,"title":"19\u3001sourceMap","slug":"_19\u3001sourcemap","link":"#_19\u3001sourcemap","children":[]},{"level":2,"title":"22\u3001babel \u76F8\u5173: polyfill \u4EE5\u53CA runtime \u533A\u522B\uFF0C ES stage \u542B\u4E49\uFF0Cpreset\u2013env \u4F5C\u7528\u7B49\u7B49","slug":"_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","link":"#_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","children":[]},{"level":2,"title":"23. \u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0\uFF1F\u6709\u4EC0\u4E48\u4F18\u70B9\uFF1F","slug":"_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","link":"#_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","children":[]},{"level":2,"title":"24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58\uFF1F\u5728 webpack \u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316\uFF1F","slug":"_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","link":"#_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","children":[]},{"level":2,"title":"26\u3001\u4EC0\u4E48\u662F Tree-sharking?","slug":"_26\u3001\u4EC0\u4E48\u662F-tree-sharking","link":"#_26\u3001\u4EC0\u4E48\u662F-tree-sharking","children":[]},{"level":2,"title":"27\u3001webpack-dev-server \u548C http \u670D\u52A1\u5668\u7684\u533A\u522B","slug":"_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","link":"#_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","children":[]},{"level":2,"title":"28\u3001webpack3 \u548C webpack4 \u7684\u533A\u522B","slug":"_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","link":"#_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","children":[]}],"relativePath":"pages/interviews/webpack.md"}'),p={name:"pages/interviews/webpack.md"},n=r(`

Webpack \u9762\u8BD5\u9898

1\u3001webpack \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF0C\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3\uFF1F

\u73B0\u5728\u7684\u524D\u7AEF\u7F51\u9875\u529F\u80FD\u4E30\u5BCC\uFF0C\u7279\u522B\u662F SPA\uFF08single page web application \u5355\u9875\u5E94\u7528\uFF09\u6280\u672F\u6D41\u884C\u540E\uFF0CJavaScript \u7684\u590D\u6742\u5EA6\u589E\u52A0\u548C\u9700\u8981\u4E00\u5927\u5806\u4F9D\u8D56\u5305\uFF0C\u8FD8\u9700\u8981\u89E3\u51B3 Scss\uFF0CLess\u2026\u2026\u65B0\u589E\u6837\u5F0F\u7684\u6269\u5C55\u5199\u6CD5\u7684\u7F16\u8BD1\u5DE5\u4F5C\u3002 \u6240\u4EE5\u73B0\u4EE3\u5316\u7684\u524D\u7AEF\u5DF2\u7ECF\u5B8C\u5168\u4F9D\u8D56\u4E8E webpack \u7684\u8F85\u52A9\u4E86\u3002

2\u3001webpack \u7684\u5DE5\u4F5C\u539F\u7406?

WebPack \u53EF\u4EE5\u770B\u505A\u662F\u6A21\u5757\u6253\u5305\u673A\uFF1A\u5B83\u505A\u7684\u4E8B\u60C5\u662F\uFF0C\u5206\u6790\u4F60\u7684\u9879\u76EE\u7ED3\u6784\uFF0C\u627E\u5230JavaScript\u6A21\u5757\u4EE5\u53CA\u5176\u5B83\u7684\u4E00\u4E9B\u6D4F\u89C8\u5668\u4E0D\u80FD\u76F4\u63A5\u8FD0\u884C\u7684\u62D3\u5C55\u8BED\u8A00\uFF08Sass\uFF0CTypeScript\u7B49\uFF09\uFF0C\u5E76\u5C06\u5176\u8F6C\u6362\u548C\u6253\u5305\u4E3A\u5408\u9002\u7684\u683C\u5F0F\u4F9B\u6D4F\u89C8\u5668\u4F7F\u7528\u3002\u5728 3.0 \u51FA\u73B0\u540E\uFF0CWebpack \u8FD8\u80A9\u8D1F\u8D77\u4E86\u4F18\u5316\u9879\u76EE\u7684\u8D23\u4EFB\u3002

3\u3001webpack \u6253\u5305\u539F\u7406

\u628A\u4E00\u5207\u90FD\u89C6\u4E3A\u6A21\u5757\uFF1A\u4E0D\u7BA1\u662F css\u3001JS\u3001Image \u8FD8\u662F html \u90FD\u53EF\u4EE5\u4E92\u76F8\u5F15\u7528\uFF0C\u901A\u8FC7\u5B9A\u4E49 entry.js\uFF0C\u5BF9\u6240\u6709\u4F9D\u8D56\u7684\u6587\u4EF6\u8FDB\u884C\u8DDF\u8E2A\uFF0C\u5C06\u5404\u4E2A\u6A21\u5757\u901A\u8FC7 loader \u548C plugins \u5904\u7406\uFF0C\u7136\u540E\u6253\u5305\u5728\u4E00\u8D77\u3002

\u6309\u9700\u52A0\u8F7D\uFF1A\u6253\u5305\u8FC7\u7A0B\u4E2D Webpack \u901A\u8FC7 Code Splitting \u529F\u80FD\u5C06\u6587\u4EF6\u5206\u4E3A\u591A\u4E2A chunks\uFF0C\u8FD8\u53EF\u4EE5\u5C06\u91CD\u590D\u7684\u90E8\u5206\u5355\u72EC\u63D0\u53D6\u51FA\u6765\u4F5C\u4E3A commonChunk\uFF0C\u4ECE\u800C\u5B9E\u73B0\u6309\u9700\u52A0\u8F7D\u3002\u628A\u6240\u6709\u4F9D\u8D56\u6253\u5305\u6210\u4E00\u4E2A bundle.js \u6587\u4EF6\uFF0C\u901A\u8FC7\u4EE3\u7801\u5206\u5272\u6210\u5355\u5143\u7247\u6BB5\u5E76\u6309\u9700\u52A0\u8F7D

4\u3001webpack \u7684\u6838\u5FC3\u6982\u5FF5

  • Entry\uFF1A\u5165\u53E3\uFF0CWebpack \u6267\u884C\u6784\u5EFA\u7684\u7B2C\u4E00\u6B65\u5C06\u4ECE Entry \u5F00\u59CB\uFF0C\u53EF\u62BD\u8C61\u6210\u8F93\u5165\u3002\u544A\u8BC9 webpack \u8981\u4F7F\u7528\u54EA\u4E2A\u6A21\u5757\u4F5C\u4E3A\u6784\u5EFA\u9879\u76EE\u7684\u8D77\u70B9\uFF0C\u9ED8\u8BA4\u4E3A./src/index.js

  • output \uFF1A\u51FA\u53E3\uFF0C\u544A\u8BC9 webpack \u5728\u54EA\u91CC\u8F93\u51FA\u5B83\u6253\u5305\u597D\u7684\u4EE3\u7801\u4EE5\u53CA\u5982\u4F55\u547D\u540D\uFF0C\u9ED8\u8BA4\u4E3A./dist

  • Module\uFF1A\u6A21\u5757\uFF0C\u5728 Webpack \u91CC\u4E00\u5207\u7686\u6A21\u5757\uFF0C\u4E00\u4E2A\u6A21\u5757\u5BF9\u5E94\u7740\u4E00\u4E2A\u6587\u4EF6\u3002Webpack \u4F1A\u4ECE\u914D\u7F6E\u7684 Entry \u5F00\u59CB\u9012\u5F52\u627E\u51FA\u6240\u6709\u4F9D\u8D56\u7684\u6A21\u5757\u3002

  • Chunk\uFF1A\u4EE3\u7801\u5757\uFF0C\u4E00\u4E2A Chunk \u7531\u591A\u4E2A\u6A21\u5757\u7EC4\u5408\u800C\u6210\uFF0C\u7528\u4E8E\u4EE3\u7801\u5408\u5E76\u4E0E\u5206\u5272\u3002

  • Loader\uFF1A\u6A21\u5757\u8F6C\u6362\u5668\uFF0C\u7528\u4E8E\u628A\u6A21\u5757\u539F\u5185\u5BB9\u6309\u7167\u9700\u6C42\u8F6C\u6362\u6210\u65B0\u5185\u5BB9\u3002webpack \u672C\u8EAB\u53EA\u80FD\u6253\u5305 js \u6587\u4EF6\uFF0C\u6240\u4EE5\uFF0C\u9488\u5BF9 css\uFF0C\u56FE\u7247\u7B49\u683C\u5F0F\u7684\u6587\u4EF6\u6CA1\u6CD5\u6253\u5305\uFF0C\u5C31\u9700\u8981\u5F15\u5165\u7B2C\u4E09\u65B9\u7684\u6A21\u5757\u8FDB\u884C\u6253\u5305\u3002loader \u867D\u7136\u662F\u6269\u5C55\u4E86 webpack \uFF0C\u4F46\u662F\u5B83\u53EA\u4E13\u6CE8\u4E8E\u8F6C\u5316\u6587\u4EF6\uFF0C\u5B8C\u6210\u538B\u7F29\uFF0C\u6253\u5305\uFF0C\u8BED\u8A00\u7FFB\u8BD1\u3002 \u4EC5\u4EC5\u53EA\u662F\u4E3A\u4E86\u6253\u5305

    css-loader\u548Cstyle-loader\u6A21\u5757\u662F\u4E3A\u4E86\u6253\u5305 css \u7684 babel-loader\u548Cbabel-core\u6A21\u5757\u65F6\u4E3A\u4E86\u628A ES6 \u7684\u4EE3\u7801\u8F6C\u6210 ES5 url-loader\u548Cfile-loader\u662F\u628A\u56FE\u7247\u8FDB\u884C\u6253\u5305\u7684\u3002

  • Plugin\uFF1A\u6269\u5C55\u63D2\u4EF6\uFF0CPlugin \u53EF\u4EE5\u6269\u5C55 webpack \u7684\u529F\u80FD\uFF0C\u8BA9 webpack \u5177\u6709\u66F4\u591A\u7684\u7075\u6D3B\u6027\u3002\u5728 Webpack \u6784\u5EFA\u6D41\u7A0B\u4E2D\u7684\u7279\u5B9A\u65F6\u673A\u4F1A\u5E7F\u64AD\u51FA\u5BF9\u5E94\u7684\u4E8B\u4EF6\uFF0C\u63D2\u4EF6\u53EF\u4EE5\u76D1\u542C\u8FD9\u4E9B\u4E8B\u4EF6\u7684\u53D1\u751F\uFF0C\u5728\u7279\u5B9A\u65F6\u673A\u505A\u5BF9\u5E94\u7684\u4E8B\u60C5\u3002

Loader \u548C Plugin1n \u7684\u533A\u522B

  • loader \u8FD0\u884C\u5728\u6253\u5305\u6587\u4EF6\u4E4B\u524D\uFF08loader \u4E3A\u5728\u6A21\u5757\u52A0\u8F7D\u65F6\u7684\u9884\u5904\u7406\u6587\u4EF6\uFF09\uFF1Bplugins \u5728\u6574\u4E2A\u7F16\u8BD1\u5468\u671F\u90FD\u8D77\u4F5C\u7528
  • \u4E00\u4E2A loader \u7684\u804C\u8D23\u662F\u5355\u4E00\u7684\uFF0C\u53EA\u9700\u8981\u5B8C\u6210\u4E00\u79CD\u8F6C\u6362\u3002\u4E00\u4E2A loader \u5176\u5B9E\u5C31\u662F\u4E00\u4E2A Node.js \u6A21\u5757\u3002\u5F53\u9700\u8981\u8C03\u7528\u591A\u4E2A loader \u53BB\u8F6C\u6362\u4E00\u4E2A\u6587\u4EF6\u65F6\uFF0C\u6BCF\u4E2A loader \u4F1A\u94FE\u5F0F\u7684\u987A\u5E8F\u6267\u884C

5\u3001Webpack \u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B\uFF1F

  • \u4EE3\u7801\u8F6C\u6362\uFF1ATypeScript \u7F16\u8BD1\u6210 JavaScript\u3001SCSS \u7F16\u8BD1\u6210 CSS \u7B49\u7B49

  • \u6587\u4EF6\u4F18\u5316\uFF1A\u538B\u7F29 JavaScript\u3001CSS\u3001html \u4EE3\u7801\uFF0C\u538B\u7F29\u5408\u5E76\u56FE\u7247\u7B49

  • \u4EE3\u7801\u5206\u5272\uFF1A\u63D0\u53D6\u591A\u4E2A\u9875\u9762\u7684\u516C\u5171\u4EE3\u7801\u3001\u63D0\u53D6\u9996\u5C4F\u4E0D\u9700\u8981\u6267\u884C\u90E8\u5206\u7684\u4EE3\u7801\u8BA9\u5176\u5F02\u6B65\u52A0\u8F7D

  • \u6A21\u5757\u5408\u5E76\uFF1A\u5728\u91C7\u7528\u6A21\u5757\u5316\u7684\u9879\u76EE\u6709\u5F88\u591A\u6A21\u5757\u548C\u6587\u4EF6\uFF0C\u9700\u8981\u6784\u5EFA\u529F\u80FD\u628A\u6A21\u5757\u5206\u7C7B\u5408\u5E76\u6210\u4E00\u4E2A\u6587\u4EF6

  • \u81EA\u52A8\u5237\u65B0\uFF1A\u76D1\u542C\u672C\u5730\u6E90\u4EE3\u7801\u7684\u53D8\u5316\uFF0C\u81EA\u52A8\u6784\u5EFA\uFF0C\u5237\u65B0\u6D4F\u89C8\u5668

  • \u4EE3\u7801\u6821\u9A8C\uFF1A\u5728\u4EE3\u7801\u88AB\u63D0\u4EA4\u5230\u4ED3\u5E93\u524D\u9700\u8981\u68C0\u6D4B\u4EE3\u7801\u662F\u5426\u7B26\u5408\u89C4\u8303\uFF0C\u4EE5\u53CA\u5355\u5143\u6D4B\u8BD5\u662F\u5426\u901A\u8FC7

  • \u81EA\u52A8\u53D1\u5E03\uFF1A\u66F4\u65B0\u5B8C\u4EE3\u7801\u540E\uFF0C\u81EA\u52A8\u6784\u5EFA\u51FA\u7EBF\u4E0A\u53D1\u5E03\u4EE3\u7801\u5E76\u4F20\u8F93\u7ED9\u53D1\u5E03\u7CFB\u7EDF\u3002

6\u3001gulp/grunt \u4E0E webpack \u7684\u533A\u522B\u662F\u4EC0\u4E48?

\u4E09\u8005\u90FD\u662F\u524D\u7AEF\u6784\u5EFA\u5DE5\u5177\uFF0Cgrunt \u548C gulp \u5728\u65E9\u671F\u6BD4\u8F83\u6D41\u884C\uFF0C\u73B0\u5728 webpack \u76F8\u5BF9\u6765\u8BF4\u6BD4\u8F83\u4E3B\u6D41\uFF0C\u4E0D\u8FC7\u4E00\u4E9B\u8F7B\u91CF\u5316\u7684\u4EFB\u52A1\u8FD8\u662F\u4F1A\u7528 gulp \u6765\u5904\u7406\uFF0C\u6BD4\u5982\u5355\u72EC\u6253\u5305 CSS \u6587\u4EF6\u7B49\u3002 grunt \u548C gulp \u662F\u57FA\u4E8E\u4EFB\u52A1\u548C\u6D41\uFF08Task\u3001Stream\uFF09\u7684\u3002 \u7C7B\u4F3C jQuery\uFF0C\u627E\u5230\u4E00\u4E2A\uFF08\u6216\u4E00\u7C7B\uFF09\u6587\u4EF6\uFF0C\u5BF9\u5176\u505A\u4E00\u7CFB\u5217\u94FE\u5F0F\u64CD\u4F5C\uFF0C\u66F4\u65B0\u6D41\u4E0A\u7684\u6570\u636E\uFF0C \u6574\u6761\u94FE\u5F0F\u64CD\u4F5C\u6784\u6210\u4E86\u4E00\u4E2A\u4EFB\u52A1\uFF0C\u591A\u4E2A\u4EFB\u52A1\u5C31\u6784\u6210\u4E86\u6574\u4E2A web \u7684\u6784\u5EFA\u6D41\u7A0B\u3002 webpack \u662F\u57FA\u4E8E\u5165\u53E3\u7684\u3002 webpack \u4F1A\u81EA\u52A8\u5730\u9012\u5F52\u89E3\u6790\u5165\u53E3\u6240\u9700\u8981\u52A0\u8F7D\u7684\u6240\u6709\u8D44\u6E90\u6587\u4EF6\uFF0C\u7136\u540E\u7528\u4E0D\u540C\u7684 Loader \u6765\u5904\u7406\u4E0D\u540C\u7684\u6587\u4EF6\uFF0C\u7528 Plugin \u6765\u6269\u5C55 webpack \u529F\u80FD\u3002

7\u3001webpack \u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684?

\u5982\u679C\u50CF\u4EE5\u524D\u5F00\u53D1\u65F6\u4E00\u4E2A html \u6587\u4EF6\u53EF\u80FD\u4F1A\u5F15\u7528\u5341\u51E0\u4E2A js \u6587\u4EF6,\u800C\u4E14\u987A\u5E8F\u8FD8\u4E0D\u80FD\u4E71\uFF0C\u56E0\u4E3A\u5B83\u4EEC\u5B58\u5728\u4F9D\u8D56\u5173\u7CFB\uFF0C\u540C\u65F6\u5BF9\u4E8E ES6+\u7B49\u65B0\u7684\u8BED\u6CD5\uFF0Cless, sass \u7B49 CSS \u9884\u5904\u7406\u90FD\u4E0D\u80FD\u5F88\u597D\u7684\u89E3\u51B3\u2026\u2026\uFF0C\u6B64\u65F6\u5C31\u9700\u8981\u4E00\u4E2A\u5904\u7406\u8FD9\u4E9B\u95EE\u9898\u7684\u5DE5\u5177\u3002

8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8 webpack \u6784\u4EF6\u901F\u5EA6\u7684?

  • \u591A\u5165\u53E3\u60C5\u51B5\u4E0B\uFF0C\u4F7F\u7528 CommonsChunkPlugin \u6765\u63D0\u53D6\u516C\u5171\u4EE3\u7801
  • \u901A\u8FC7 externals \u914D\u7F6E\u6765\u63D0\u53D6\u5E38\u7528\u5E93
  • \u5229\u7528 DllPlugin \u548C DllReferencePlugin \u9884\u7F16\u8BD1\u8D44\u6E90\u6A21\u5757\u901A\u8FC7 DllPlugin \u6765\u5BF9\u90A3\u4E9B\u6211\u4EEC \u5F15\u7528\u4F46\u662F\u7EDD\u5BF9\u4E0D\u4F1A\u4FEE\u6539\u7684 npm \u5305\u6765\u8FDB\u884C\u9884\u7F16\u8BD1\uFF0C\u518D\u901A\u8FC7 DllReferencePlugin \u5C06\u9884\u7F16\u8BD1\u7684\u6A21\u5757\u52A0\u8F7D\u8FDB\u6765\u3002
  • \u4F7F\u7528 Happypack \u5B9E\u73B0\u591A\u7EBF\u7A0B\u52A0\u901F\u7F16\u8BD1
  • \u4F7F\u7528 webpack-uglify-paralle \u6765\u63D0\u5347 uglifyPlugin \u7684\u538B\u7F29\u901F\u5EA6\u3002 \u539F\u7406\u4E0A webpack-uglify-parallel \u91C7\u7528\u4E86\u591A\u6838\u5E76\u884C\u538B\u7F29\u6765\u63D0\u5347\u538B\u7F29\u901F\u5EA6 \u4F7F\u7528 Tree-shaking \u548C Scope Hoisting \u6765\u5254\u9664\u591A\u4F59\u4EE3\u7801

9\u3001npm \u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B\uFF1F\u5982\u4F55\u5229\u7528 webpack \u6765\u66F4\u597D\u7684\u6784\u5EFA\uFF1F

Npm \u662F\u76EE\u524D\u6700\u5927\u7684 JavaScript \u6A21\u5757\u4ED3\u5E93\uFF0C\u91CC\u9762\u6709\u6765\u81EA\u5168\u4E16\u754C\u5F00\u53D1\u8005\u4E0A\u4F20\u7684\u53EF\u590D\u7528\u6A21\u5757\u3002 \u4F60\u53EF\u80FD\u53EA\u662F JS \u6A21\u5757\u7684\u4F7F\u7528\u8005\uFF0C\u4F46\u662F\u6709\u4E9B\u60C5\u51B5\u4F60\u4E5F\u4F1A\u53BB\u9009\u62E9\u4E0A\u4F20\u81EA\u5DF1\u5F00\u53D1\u7684\u6A21\u5757\u3002 \u5173\u4E8E NPM \u6A21\u5757\u4E0A\u4F20\u7684\u65B9\u6CD5\u53EF\u4EE5\u53BB\u5B98\u7F51\u4E0A\u8FDB\u884C\u5B66\u4E60\uFF0C\u8FD9\u91CC\u53EA\u8BB2\u89E3\u5982\u4F55\u5229\u7528 webpack \u6765\u6784\u5EFA\u3002 NPM \u6A21\u5757\u9700\u8981\u6CE8\u610F\u4EE5\u4E0B\u95EE\u9898\uFF1A

  • \u8981\u652F\u6301 CommonJS \u6A21\u5757\u5316\u89C4\u8303\uFF0C\u6240\u4EE5\u8981\u6C42\u6253\u5305\u540E\u7684\u6700\u540E\u7ED3\u679C\u4E5F\u9075\u5B88\u8BE5\u89C4\u5219\u3002
  • Npm \u6A21\u5757\u4F7F\u7528\u8005\u7684\u73AF\u5883\u662F\u4E0D\u786E\u5B9A\u7684\uFF0C\u5F88\u6709\u53EF\u80FD\u5E76\u4E0D\u652F\u6301 ES6\uFF0C\u6240\u4EE5\u6253\u5305\u7684\u6700\u540E\u7ED3\u679C\u5E94\u8BE5\u662F\u91C7\u7528 ES5 \u7F16\u5199\u7684\u3002\u5E76\u4E14\u5982\u679C ES5 \u662F\u7ECF\u8FC7\u8F6C\u6362\u7684\uFF0C\u8BF7\u6700\u597D\u8FDE\u540C SourceMap \u4E00\u540C\u4E0A\u4F20\u3002
  • Npm \u5305\u5927\u5C0F\u5E94\u8BE5\u662F\u5C3D\u91CF\u5C0F\uFF08\u6709\u4E9B\u4ED3\u5E93\u4F1A\u9650\u5236\u5305\u5927\u5C0F\uFF09
  • \u53D1\u5E03\u7684\u6A21\u5757\u4E0D\u80FD\u5C06\u4F9D\u8D56\u7684\u6A21\u5757\u4E5F\u4E00\u540C\u6253\u5305\uFF0C\u5E94\u8BE5\u8BA9\u7528\u6237\u9009\u62E9\u6027\u7684\u53BB\u81EA\u884C\u5B89\u88C5\u3002\u8FD9\u6837\u53EF\u4EE5\u907F\u514D\u6A21\u5757\u5E94\u7528\u8005\u518D\u6B21\u6253\u5305\u65F6\u51FA\u73B0\u5E95\u5C42\u6A21\u5757\u88AB\u91CD\u590D\u6253\u5305\u7684\u60C5\u51B5\u3002
  • UI \u7EC4\u4EF6\u7C7B\u7684\u6A21\u5757\u5E94\u8BE5\u5C06\u4F9D\u8D56\u7684\u5176\u5B83\u8D44\u6E90\u6587\u4EF6\uFF0C\u4F8B\u5982.css \u6587\u4EF6\u4E5F\u9700\u8981\u5305\u542B\u5728\u53D1\u5E03\u7684\u6A21\u5757\u91CC\u3002

10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA\uFF1F

\u4EE3\u7801\u5C42\u9762\uFF1A

  • \u4F53\u79EF\u66F4\u5C0F\uFF08Tree-shaking\u3001\u538B\u7F29\u3001\u5408\u5E76\uFF09\uFF0C\u52A0\u8F7D\u66F4\u5FEB

  • \u7F16\u8BD1\u9AD8\u7EA7\u8BED\u8A00\u548C\u8BED\u6CD5\uFF08TS\u3001ES6\u3001\u6A21\u5757\u5316\u3001scss\uFF09

  • \u517C\u5BB9\u6027\u548C\u9519\u8BEF\u68C0\u67E5\uFF08polyfill,postcss,eslint\uFF09

    \u7814\u53D1\u6D41\u7A0B\u5C42\u9762\uFF1A

  • \u7EDF\u4E00\u3001\u9AD8\u6548\u7684\u5F00\u53D1\u73AF\u5883

  • \u7EDF\u4E00\u7684\u6784\u5EFA\u6D41\u7A0B\u548C\u4EA7\u51FA\u6807\u51C6

  • \u96C6\u6210\u516C\u53F8\u6784\u5EFA\u89C4\u8303\uFF08\u63D0\u6D4B\u3001\u4E0A\u7EBF\uFF09

11\u3001webpack \u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48?\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002

Webpack \u7684\u8FD0\u884C\u6D41\u7A0B\u662F\u4E00\u4E2A\u4E32\u884C\u7684\u8FC7\u7A0B\uFF0C\u4ECE\u542F\u52A8\u5230\u7ED3\u675F\u4F1A\u4F9D\u6B21\u6267\u884C\u4EE5\u4E0B\u6D41\u7A0B\uFF1A

1. \u521D\u59CB\u5316\u53C2\u6570\uFF1A\u4ECE\u914D\u7F6E\u6587\u4EF6\u548C Shell \u8BED\u53E5\u4E2D\u8BFB\u53D6\u4E0E\u5408\u5E76\u53C2\u6570\uFF0C\u5F97\u51FA\u6700\u7EC8\u7684\u53C2\u6570\uFF1B

2. \u5F00\u59CB\u7F16\u8BD1\uFF1A\u7528\u4E0A\u4E00\u6B65\u5F97\u5230\u7684\u53C2\u6570\u521D\u59CB\u5316 Compiler \u5BF9\u8C61\uFF0C\u52A0\u8F7D\u6240\u6709\u914D\u7F6E\u7684\u63D2\u4EF6\uFF0C\u6267\u884C\u5BF9\u8C61\u7684 run \u65B9\u6CD5\u5F00\u59CB\u6267\u884C\u7F16\u8BD1\uFF1B

3. \u786E\u5B9A\u5165\u53E3\uFF1A\u6839\u636E\u914D\u7F6E\u4E2D\u7684 entry \u627E\u51FA\u6240\u6709\u7684\u5165\u53E3\u6587\u4EF6\uFF1B

4. \u7F16\u8BD1\u6A21\u5757\uFF1A\u4ECE\u5165\u53E3\u6587\u4EF6\u51FA\u53D1\uFF0C\u8C03\u7528\u6240\u6709\u914D\u7F6E\u7684 Loader \u5BF9\u6A21\u5757\u8FDB\u884C\u7FFB\u8BD1\uFF0C\u518D\u627E\u51FA\u8BE5\u6A21\u5757\u4F9D\u8D56\u7684\u6A21\u5757\uFF0C\u518D\u9012\u5F52\u672C\u6B65\u9AA4\u76F4\u5230\u6240\u6709\u5165\u53E3\u4F9D\u8D56\u7684\u6587\u4EF6\u90FD\u7ECF\u8FC7\u4E86\u672C\u6B65\u9AA4\u7684\u5904\u7406\uFF1B

5. \u5B8C\u6210\u6A21\u5757\u7F16\u8BD1\uFF1A\u5728\u7ECF\u8FC7\u7B2C 4 \u6B65\u4F7F\u7528 Loader \u7FFB\u8BD1\u5B8C\u6240\u6709\u6A21\u5757\u540E\uFF0C\u5F97\u5230\u4E86\u6BCF\u4E2A\u6A21\u5757\u88AB\u7FFB\u8BD1\u540E\u7684\u6700\u7EC8\u5185\u5BB9\u4EE5\u53CA\u5B83\u4EEC\u4E4B\u95F4\u7684\u4F9D\u8D56\u5173\u7CFB\uFF1B

6. \u8F93\u51FA\u8D44\u6E90\uFF1A\u6839\u636E\u5165\u53E3\u548C\u6A21\u5757\u4E4B\u95F4\u7684\u4F9D\u8D56\u5173\u7CFB\uFF0C\u7EC4\u88C5\u6210\u4E00\u4E2A\u4E2A\u5305\u542B\u591A\u4E2A\u6A21\u5757\u7684 Chunk\uFF0C\u518D\u628A\u6BCF\u4E2A Chunk \u8F6C\u6362\u6210\u4E00\u4E2A\u5355\u72EC\u7684\u6587\u4EF6\u52A0\u5165\u5230\u8F93\u51FA\u5217\u8868\uFF0C\u8FD9\u6B65\u662F\u53EF\u4EE5\u4FEE\u6539\u8F93\u51FA\u5185\u5BB9\u7684\u6700\u540E\u673A\u4F1A\uFF1B

7. \u8F93\u51FA\u5B8C\u6210\uFF1A\u5728\u786E\u5B9A\u597D\u8F93\u51FA\u5185\u5BB9\u540E\uFF0C\u6839\u636E\u914D\u7F6E\u786E\u5B9A\u8F93\u51FA\u7684\u8DEF\u5F84\u548C\u6587\u4EF6\u540D\uFF0C\u628A\u6587\u4EF6\u5185\u5BB9\u5199\u5165\u5230\u6587\u4EF6\u7CFB\u7EDF\u3002

\u5728\u4EE5\u4E0A\u8FC7\u7A0B\u4E2D\uFF0CWebpack \u4F1A\u5728\u7279\u5B9A\u7684\u65F6\u95F4\u70B9\u5E7F\u64AD\u51FA\u7279\u5B9A\u7684\u4E8B\u4EF6\uFF0C\u63D2\u4EF6\u5728\u76D1\u542C\u5230\u611F\u5174\u8DA3\u7684\u4E8B\u4EF6\u540E\u4F1A\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\uFF0C\u5E76\u4E14\u63D2\u4EF6\u53EF\u4EE5\u8C03\u7528 Webpack \u63D0\u4F9B\u7684 API \u6539\u53D8 Webpack \u7684\u8FD0\u884C\u7ED3\u679C\u3002

12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528\uFF1F\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528\uFF1F

\u5355\u9875\u5E94\u7528\u53EF\u4EE5\u7406\u89E3\u4E3A webpack \u7684\u6807\u51C6\u6A21\u5F0F\uFF0C\u76F4\u63A5\u5728 entry \u4E2D\u6307\u5B9A\u5355\u9875\u5E94\u7528\u7684\u5165\u53E3\u5373\u53EF

\u591A\u9875\u5E94\u7528\u7684\u8BDD\uFF0C\u53EF\u4EE5\u4F7F\u7528 webpack \u7684 AutoWebPlugin \u6765\u5B8C\u6210\u7B80\u5355\u81EA\u52A8\u5316\u7684\u6784\u5EFA\uFF0C\u4F46\u662F\u524D\u63D0\u662F\u9879\u76EE\u7684\u76EE\u5F55\u7ED3\u6784\u5FC5\u987B\u9075\u5B88\u4ED6\u9884\u8BBE\u7684\u89C4\u8303\u3002\u591A\u9875\u5E94\u7528\u4E2D\u8981\u6CE8\u610F\u7684\u662F\uFF1A

  • \u6BCF\u4E2A\u9875\u9762\u90FD\u6709\u516C\u5171\u7684\u4EE3\u7801\uFF0C\u53EF\u4EE5\u5C06\u8FD9\u4E9B\u4EE3\u7801\u62BD\u79BB\u51FA\u6765\uFF0C\u907F\u514D\u91CD\u590D\u7684\u52A0\u8F7D\u3002\u6BD4\u5982\uFF0C\u6BCF\u4E2A\u9875\u9762\u90FD\u5F15\u7528\u4E86\u540C\u4E00\u5957 css \u6837\u5F0F\u8868
  • \u968F\u7740\u4E1A\u52A1\u7684\u4E0D\u65AD\u6269\u5C55\uFF0C\u9875\u9762\u53EF\u80FD\u4F1A\u4E0D\u65AD\u7684\u8FFD\u52A0\uFF0C\u6240\u4EE5\u4E00\u5B9A\u8981\u8BA9\u5165\u53E3\u7684\u914D\u7F6E\u8DB3\u591F\u7075\u6D3B\uFF0C\u907F\u514D\u6BCF\u6B21\u6DFB\u52A0\u65B0\u9875\u9762\u8FD8\u9700\u8981\u4FEE\u6539\u6784\u5EFA\u914D\u7F6E

13\u3001Loader \u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F

webpack \u9ED8\u8BA4\u53EA\u80FD\u6253\u5305 js \u6587\u4EF6\uFF0C\u914D\u7F6E\u91CC\u7684 module.rules \u6570\u7EC4\u914D\u7F6E\u4E86\u4E00\u7EC4\u89C4\u5219\uFF0C\u544A\u8BC9 Webpack \u5728\u9047\u5230\u54EA\u4E9B\u6587\u4EF6\u65F6\u4F7F\u7528\u54EA\u4E9B Loader \u53BB\u52A0\u8F7D\u548C\u8F6C\u6362\u6253\u5305\u6210 js\u3002

\u6CE8\u610F\uFF1A

  • use \u5C5E\u6027\u7684\u503C\u9700\u8981\u662F\u4E00\u4E2A\u7531 Loader \u540D\u79F0\u7EC4\u6210\u7684\u6570\u7EC4\uFF0CLoader \u7684\u6267\u884C\u987A\u5E8F\u662F\u7531\u540E\u5230\u524D\u7684\uFF1B
  • \u6BCF\u4E00\u4E2A Loader \u90FD\u53EF\u4EE5\u901A\u8FC7 URL querystring \u7684\u65B9\u5F0F\u4F20\u5165\u53C2\u6570\uFF0C
  • \u4F8B\u5982 css-loader?minimize \u4E2D\u7684 minimize \u544A\u8BC9 css-loader \u8981\u5F00\u542F CSS \u538B\u7F29\u3002

14\u3001\u5E38\u7528 loader

  • css-loader \u8BFB\u53D6 \u5408\u5E76 CSS \u6587\u4EF6
  • style-loader \u628A CSS \u5185\u5BB9\u6CE8\u5165\u5230 JavaScript \u91CC
  • sass-loader \u89E3\u6790 sass \u6587\u4EF6\uFF08\u5B89\u88C5 sass-loader\uFF0Cnode-sass\uFF09
  • postcss-loader \u81EA\u52A8\u6DFB\u52A0\u6D4F\u89C8\u5668\u517C\u5BB9\u524D\u7F00\uFF08postcss.config \u914D\u7F6E\uFF09
  • url-loader \u5C06\u6587\u4EF6\u8F6C\u6362\u4E3A base64 URI\u3002
  • vue-loader \u5904\u7406 vue \u6587\u4EF6\u3002

15\u3001Plugin\uFF08\u63D2\u4EF6\uFF09\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F

Plugin \u662F\u7528\u6765\u6269\u5C55 Webpack \u529F\u80FD\u7684\uFF0C\u901A\u8FC7\u5728\u6784\u5EFA\u6D41\u7A0B\u91CC\u6CE8\u5165\u94A9\u5B50\u5B9E\u73B0\uFF0C\u5B83\u7ED9 Webpack \u5E26\u6765\u4E86\u5F88\u5927\u7684\u7075\u6D3B\u6027\u3002

Webpack \u662F\u901A\u8FC7 plugins \u5C5E\u6027\u6765\u914D\u7F6E\u9700\u8981\u4F7F\u7528\u7684\u63D2\u4EF6\u5217\u8868\u7684\u3002plugins \u5C5E\u6027\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u91CC\u9762\u7684\u6BCF\u4E00\u9879\u90FD\u662F\u63D2\u4EF6\u7684\u4E00\u4E2A\u5B9E\u4F8B\uFF0C\u5728\u5B9E\u4F8B\u5316\u4E00\u4E2A\u7EC4\u4EF6\u65F6\u53EF\u4EE5\u901A\u8FC7\u6784\u9020\u51FD\u6570\u4F20\u5165\u8FD9\u4E2A\u7EC4\u4EF6\u652F\u6301\u7684\u914D\u7F6E\u5C5E\u6027\u3002

16\u3001\u4EC0\u4E48\u662F bundle\uFF0C\u4EC0\u4E48\u662F chunk\uFF0C\u4EC0\u4E48\u662F module

bundle\uFF1A\u662F\u7531 webpack \u6253\u5305\u51FA\u6765\u7684\u6587\u4EF6

chunk\uFF1A\u662F\u6307 webpack \u5728\u8FDB\u884C\u6A21\u5757\u4F9D\u8D56\u5206\u6790\u7684\u65F6\u5019\uFF0C\u4EE3\u7801\u5206\u5272\u51FA\u6765\u7684\u4EE3\u7801\u5757

module\uFF1A\u662F\u5F00\u53D1\u4E2D\u7684\u5355\u4E2A\u6A21\u5757

17\u3001\u5E38\u89C1 Plugins

HtmlWbpackPlugin \u81EA\u52A8\u5728\u6253\u5305\u7ED3\u675F\u540E\u751F\u6210 html \u6587\u4EF6\uFF0C\u5E76\u5F15\u5165 bundle.js cleanwebPackPlugin \u6253\u5305\u81EA\u52A8\u5220\u9664\u4E0A\u6B21\u6253\u5305\u6587\u4EF6

18\u3001ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528

ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528\u662F\u63D0\u53D6\u51FA JavaScript \u4EE3\u7801\u91CC\u7684 CSS \u5230\u4E00\u4E2A\u5355\u72EC\u7684\u6587\u4EF6\u3002

\u5BF9\u6B64\u4F60\u53EF\u4EE5\u901A\u8FC7\u63D2\u4EF6\u7684 filename \u5C5E\u6027\uFF0C\u544A\u8BC9\u63D2\u4EF6\u8F93\u51FA\u7684 CSS \u6587\u4EF6\u540D\u79F0\u662F\u901A\u8FC7[name]\\_[contenthash:8].css \u5B57\u7B26\u4E32\u6A21\u7248\u751F\u6210\u7684\uFF0C

\u91CC\u9762\u7684[name]\u4EE3\u8868\u6587\u4EF6\u540D\u79F0\uFF0C[contenthash:8]\u4EE3\u8868\u6839\u636E\u6587\u4EF6\u5185\u5BB9\u7B97\u51FA\u7684 8 \u4F4D hash \u503C\uFF0C \u8FD8\u6709\u5F88\u591A\u914D\u7F6E\u9009\u9879\u53EF\u4EE5\u5728 ExtractTextPlugin \u7684\u4E3B\u9875\u4E0A\u67E5\u5230\u3002

19\u3001sourceMap

\u662F\u4E00\u4E2A\u6620\u5C04\u5173\u7CFB\uFF0C\u5C06\u6253\u5305\u540E\u7684\u6587\u4EF6\u9690\u5C04\u5230\u6E90\u4EE3\u7801\uFF0C\u7528\u4E8E\u5B9A\u4F4D\u62A5\u9519\u4F4D\u7F6E

\u914D\u7F6E\u65B9\u5F0F: \u4F8B\u5982\uFF1A

js
devtool\uFF1A\u2018source-map\u2019
+import{_ as e,o as a,c as l,a as r}from"./app.88185e12.js";const b=JSON.parse('{"title":"Webpack \u9762\u8BD5\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1\u3001webpack \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF0C\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3\uFF1F","slug":"_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","link":"#_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","children":[]},{"level":2,"title":"2\u3001webpack \u7684\u5DE5\u4F5C\u539F\u7406?","slug":"_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","link":"#_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","children":[]},{"level":2,"title":"3\u3001webpack \u6253\u5305\u539F\u7406","slug":"_3\u3001webpack-\u6253\u5305\u539F\u7406","link":"#_3\u3001webpack-\u6253\u5305\u539F\u7406","children":[]},{"level":2,"title":"4\u3001webpack \u7684\u6838\u5FC3\u6982\u5FF5","slug":"_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","link":"#_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","children":[]},{"level":2,"title":"5\u3001Webpack \u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B\uFF1F","slug":"_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","link":"#_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"6\u3001gulp/grunt \u4E0E webpack \u7684\u533A\u522B\u662F\u4EC0\u4E48?","slug":"_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"7\u3001webpack \u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684?","slug":"_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","link":"#_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","children":[]},{"level":2,"title":"8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8 webpack \u6784\u4EF6\u901F\u5EA6\u7684?","slug":"_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","link":"#_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","children":[]},{"level":2,"title":"9\u3001npm \u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B\uFF1F\u5982\u4F55\u5229\u7528 webpack \u6765\u66F4\u597D\u7684\u6784\u5EFA\uFF1F","slug":"_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","link":"#_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","children":[]},{"level":2,"title":"10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA\uFF1F","slug":"_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","link":"#_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","children":[]},{"level":2,"title":"11\u3001webpack \u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48?\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","slug":"_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","link":"#_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","children":[]},{"level":2,"title":"12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528\uFF1F\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528\uFF1F","slug":"_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","link":"#_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","children":[]},{"level":2,"title":"13\u3001Loader \u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"14\u3001\u5E38\u7528 loader","slug":"_14\u3001\u5E38\u7528-loader","link":"#_14\u3001\u5E38\u7528-loader","children":[]},{"level":2,"title":"15\u3001Plugin\uFF08\u63D2\u4EF6\uFF09\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16\u3001\u4EC0\u4E48\u662F bundle\uFF0C\u4EC0\u4E48\u662F chunk\uFF0C\u4EC0\u4E48\u662F module","slug":"_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","link":"#_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","children":[]},{"level":2,"title":"17\u3001\u5E38\u89C1 Plugins","slug":"_17\u3001\u5E38\u89C1-plugins","link":"#_17\u3001\u5E38\u89C1-plugins","children":[]},{"level":2,"title":"18\u3001ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528","slug":"_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","link":"#_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","children":[]},{"level":2,"title":"19\u3001sourceMap","slug":"_19\u3001sourcemap","link":"#_19\u3001sourcemap","children":[]},{"level":2,"title":"22\u3001babel \u76F8\u5173: polyfill \u4EE5\u53CA runtime \u533A\u522B\uFF0C ES stage \u542B\u4E49\uFF0Cpreset\u2013env \u4F5C\u7528\u7B49\u7B49","slug":"_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","link":"#_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","children":[]},{"level":2,"title":"23. \u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0\uFF1F\u6709\u4EC0\u4E48\u4F18\u70B9\uFF1F","slug":"_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","link":"#_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","children":[]},{"level":2,"title":"24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58\uFF1F\u5728 webpack \u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316\uFF1F","slug":"_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","link":"#_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","children":[]},{"level":2,"title":"26\u3001\u4EC0\u4E48\u662F Tree-sharking?","slug":"_26\u3001\u4EC0\u4E48\u662F-tree-sharking","link":"#_26\u3001\u4EC0\u4E48\u662F-tree-sharking","children":[]},{"level":2,"title":"27\u3001webpack-dev-server \u548C http \u670D\u52A1\u5668\u7684\u533A\u522B","slug":"_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","link":"#_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","children":[]},{"level":2,"title":"28\u3001webpack3 \u548C webpack4 \u7684\u533A\u522B","slug":"_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","link":"#_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","children":[]}],"relativePath":"pages/interviews/webpack.md"}'),p={name:"pages/interviews/webpack.md"},n=r(`

Webpack \u9762\u8BD5\u9898

1\u3001webpack \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF0C\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3\uFF1F

\u73B0\u5728\u7684\u524D\u7AEF\u7F51\u9875\u529F\u80FD\u4E30\u5BCC\uFF0C\u7279\u522B\u662F SPA\uFF08single page web application \u5355\u9875\u5E94\u7528\uFF09\u6280\u672F\u6D41\u884C\u540E\uFF0CJavaScript \u7684\u590D\u6742\u5EA6\u589E\u52A0\u548C\u9700\u8981\u4E00\u5927\u5806\u4F9D\u8D56\u5305\uFF0C\u8FD8\u9700\u8981\u89E3\u51B3 Scss\uFF0CLess\u2026\u2026\u65B0\u589E\u6837\u5F0F\u7684\u6269\u5C55\u5199\u6CD5\u7684\u7F16\u8BD1\u5DE5\u4F5C\u3002 \u6240\u4EE5\u73B0\u4EE3\u5316\u7684\u524D\u7AEF\u5DF2\u7ECF\u5B8C\u5168\u4F9D\u8D56\u4E8E webpack \u7684\u8F85\u52A9\u4E86\u3002

2\u3001webpack \u7684\u5DE5\u4F5C\u539F\u7406?

WebPack \u53EF\u4EE5\u770B\u505A\u662F\u6A21\u5757\u6253\u5305\u673A\uFF1A\u5B83\u505A\u7684\u4E8B\u60C5\u662F\uFF0C\u5206\u6790\u4F60\u7684\u9879\u76EE\u7ED3\u6784\uFF0C\u627E\u5230JavaScript\u6A21\u5757\u4EE5\u53CA\u5176\u5B83\u7684\u4E00\u4E9B\u6D4F\u89C8\u5668\u4E0D\u80FD\u76F4\u63A5\u8FD0\u884C\u7684\u62D3\u5C55\u8BED\u8A00\uFF08Sass\uFF0CTypeScript\u7B49\uFF09\uFF0C\u5E76\u5C06\u5176\u8F6C\u6362\u548C\u6253\u5305\u4E3A\u5408\u9002\u7684\u683C\u5F0F\u4F9B\u6D4F\u89C8\u5668\u4F7F\u7528\u3002\u5728 3.0 \u51FA\u73B0\u540E\uFF0CWebpack \u8FD8\u80A9\u8D1F\u8D77\u4E86\u4F18\u5316\u9879\u76EE\u7684\u8D23\u4EFB\u3002

3\u3001webpack \u6253\u5305\u539F\u7406

\u628A\u4E00\u5207\u90FD\u89C6\u4E3A\u6A21\u5757\uFF1A\u4E0D\u7BA1\u662F css\u3001JS\u3001Image \u8FD8\u662F html \u90FD\u53EF\u4EE5\u4E92\u76F8\u5F15\u7528\uFF0C\u901A\u8FC7\u5B9A\u4E49 entry.js\uFF0C\u5BF9\u6240\u6709\u4F9D\u8D56\u7684\u6587\u4EF6\u8FDB\u884C\u8DDF\u8E2A\uFF0C\u5C06\u5404\u4E2A\u6A21\u5757\u901A\u8FC7 loader \u548C plugins \u5904\u7406\uFF0C\u7136\u540E\u6253\u5305\u5728\u4E00\u8D77\u3002

\u6309\u9700\u52A0\u8F7D\uFF1A\u6253\u5305\u8FC7\u7A0B\u4E2D Webpack \u901A\u8FC7 Code Splitting \u529F\u80FD\u5C06\u6587\u4EF6\u5206\u4E3A\u591A\u4E2A chunks\uFF0C\u8FD8\u53EF\u4EE5\u5C06\u91CD\u590D\u7684\u90E8\u5206\u5355\u72EC\u63D0\u53D6\u51FA\u6765\u4F5C\u4E3A commonChunk\uFF0C\u4ECE\u800C\u5B9E\u73B0\u6309\u9700\u52A0\u8F7D\u3002\u628A\u6240\u6709\u4F9D\u8D56\u6253\u5305\u6210\u4E00\u4E2A bundle.js \u6587\u4EF6\uFF0C\u901A\u8FC7\u4EE3\u7801\u5206\u5272\u6210\u5355\u5143\u7247\u6BB5\u5E76\u6309\u9700\u52A0\u8F7D

4\u3001webpack \u7684\u6838\u5FC3\u6982\u5FF5

  • Entry\uFF1A\u5165\u53E3\uFF0CWebpack \u6267\u884C\u6784\u5EFA\u7684\u7B2C\u4E00\u6B65\u5C06\u4ECE Entry \u5F00\u59CB\uFF0C\u53EF\u62BD\u8C61\u6210\u8F93\u5165\u3002\u544A\u8BC9 webpack \u8981\u4F7F\u7528\u54EA\u4E2A\u6A21\u5757\u4F5C\u4E3A\u6784\u5EFA\u9879\u76EE\u7684\u8D77\u70B9\uFF0C\u9ED8\u8BA4\u4E3A./src/index.js

  • output \uFF1A\u51FA\u53E3\uFF0C\u544A\u8BC9 webpack \u5728\u54EA\u91CC\u8F93\u51FA\u5B83\u6253\u5305\u597D\u7684\u4EE3\u7801\u4EE5\u53CA\u5982\u4F55\u547D\u540D\uFF0C\u9ED8\u8BA4\u4E3A./dist

  • Module\uFF1A\u6A21\u5757\uFF0C\u5728 Webpack \u91CC\u4E00\u5207\u7686\u6A21\u5757\uFF0C\u4E00\u4E2A\u6A21\u5757\u5BF9\u5E94\u7740\u4E00\u4E2A\u6587\u4EF6\u3002Webpack \u4F1A\u4ECE\u914D\u7F6E\u7684 Entry \u5F00\u59CB\u9012\u5F52\u627E\u51FA\u6240\u6709\u4F9D\u8D56\u7684\u6A21\u5757\u3002

  • Chunk\uFF1A\u4EE3\u7801\u5757\uFF0C\u4E00\u4E2A Chunk \u7531\u591A\u4E2A\u6A21\u5757\u7EC4\u5408\u800C\u6210\uFF0C\u7528\u4E8E\u4EE3\u7801\u5408\u5E76\u4E0E\u5206\u5272\u3002

  • Loader\uFF1A\u6A21\u5757\u8F6C\u6362\u5668\uFF0C\u7528\u4E8E\u628A\u6A21\u5757\u539F\u5185\u5BB9\u6309\u7167\u9700\u6C42\u8F6C\u6362\u6210\u65B0\u5185\u5BB9\u3002webpack \u672C\u8EAB\u53EA\u80FD\u6253\u5305 js \u6587\u4EF6\uFF0C\u6240\u4EE5\uFF0C\u9488\u5BF9 css\uFF0C\u56FE\u7247\u7B49\u683C\u5F0F\u7684\u6587\u4EF6\u6CA1\u6CD5\u6253\u5305\uFF0C\u5C31\u9700\u8981\u5F15\u5165\u7B2C\u4E09\u65B9\u7684\u6A21\u5757\u8FDB\u884C\u6253\u5305\u3002loader \u867D\u7136\u662F\u6269\u5C55\u4E86 webpack \uFF0C\u4F46\u662F\u5B83\u53EA\u4E13\u6CE8\u4E8E\u8F6C\u5316\u6587\u4EF6\uFF0C\u5B8C\u6210\u538B\u7F29\uFF0C\u6253\u5305\uFF0C\u8BED\u8A00\u7FFB\u8BD1\u3002 \u4EC5\u4EC5\u53EA\u662F\u4E3A\u4E86\u6253\u5305

    css-loader\u548Cstyle-loader\u6A21\u5757\u662F\u4E3A\u4E86\u6253\u5305 css \u7684 babel-loader\u548Cbabel-core\u6A21\u5757\u65F6\u4E3A\u4E86\u628A ES6 \u7684\u4EE3\u7801\u8F6C\u6210 ES5 url-loader\u548Cfile-loader\u662F\u628A\u56FE\u7247\u8FDB\u884C\u6253\u5305\u7684\u3002

  • Plugin\uFF1A\u6269\u5C55\u63D2\u4EF6\uFF0CPlugin \u53EF\u4EE5\u6269\u5C55 webpack \u7684\u529F\u80FD\uFF0C\u8BA9 webpack \u5177\u6709\u66F4\u591A\u7684\u7075\u6D3B\u6027\u3002\u5728 Webpack \u6784\u5EFA\u6D41\u7A0B\u4E2D\u7684\u7279\u5B9A\u65F6\u673A\u4F1A\u5E7F\u64AD\u51FA\u5BF9\u5E94\u7684\u4E8B\u4EF6\uFF0C\u63D2\u4EF6\u53EF\u4EE5\u76D1\u542C\u8FD9\u4E9B\u4E8B\u4EF6\u7684\u53D1\u751F\uFF0C\u5728\u7279\u5B9A\u65F6\u673A\u505A\u5BF9\u5E94\u7684\u4E8B\u60C5\u3002

Loader \u548C Plugin1n \u7684\u533A\u522B

  • loader \u8FD0\u884C\u5728\u6253\u5305\u6587\u4EF6\u4E4B\u524D\uFF08loader \u4E3A\u5728\u6A21\u5757\u52A0\u8F7D\u65F6\u7684\u9884\u5904\u7406\u6587\u4EF6\uFF09\uFF1Bplugins \u5728\u6574\u4E2A\u7F16\u8BD1\u5468\u671F\u90FD\u8D77\u4F5C\u7528
  • \u4E00\u4E2A loader \u7684\u804C\u8D23\u662F\u5355\u4E00\u7684\uFF0C\u53EA\u9700\u8981\u5B8C\u6210\u4E00\u79CD\u8F6C\u6362\u3002\u4E00\u4E2A loader \u5176\u5B9E\u5C31\u662F\u4E00\u4E2A Node.js \u6A21\u5757\u3002\u5F53\u9700\u8981\u8C03\u7528\u591A\u4E2A loader \u53BB\u8F6C\u6362\u4E00\u4E2A\u6587\u4EF6\u65F6\uFF0C\u6BCF\u4E2A loader \u4F1A\u94FE\u5F0F\u7684\u987A\u5E8F\u6267\u884C

5\u3001Webpack \u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B\uFF1F

  • \u4EE3\u7801\u8F6C\u6362\uFF1ATypeScript \u7F16\u8BD1\u6210 JavaScript\u3001SCSS \u7F16\u8BD1\u6210 CSS \u7B49\u7B49

  • \u6587\u4EF6\u4F18\u5316\uFF1A\u538B\u7F29 JavaScript\u3001CSS\u3001html \u4EE3\u7801\uFF0C\u538B\u7F29\u5408\u5E76\u56FE\u7247\u7B49

  • \u4EE3\u7801\u5206\u5272\uFF1A\u63D0\u53D6\u591A\u4E2A\u9875\u9762\u7684\u516C\u5171\u4EE3\u7801\u3001\u63D0\u53D6\u9996\u5C4F\u4E0D\u9700\u8981\u6267\u884C\u90E8\u5206\u7684\u4EE3\u7801\u8BA9\u5176\u5F02\u6B65\u52A0\u8F7D

  • \u6A21\u5757\u5408\u5E76\uFF1A\u5728\u91C7\u7528\u6A21\u5757\u5316\u7684\u9879\u76EE\u6709\u5F88\u591A\u6A21\u5757\u548C\u6587\u4EF6\uFF0C\u9700\u8981\u6784\u5EFA\u529F\u80FD\u628A\u6A21\u5757\u5206\u7C7B\u5408\u5E76\u6210\u4E00\u4E2A\u6587\u4EF6

  • \u81EA\u52A8\u5237\u65B0\uFF1A\u76D1\u542C\u672C\u5730\u6E90\u4EE3\u7801\u7684\u53D8\u5316\uFF0C\u81EA\u52A8\u6784\u5EFA\uFF0C\u5237\u65B0\u6D4F\u89C8\u5668

  • \u4EE3\u7801\u6821\u9A8C\uFF1A\u5728\u4EE3\u7801\u88AB\u63D0\u4EA4\u5230\u4ED3\u5E93\u524D\u9700\u8981\u68C0\u6D4B\u4EE3\u7801\u662F\u5426\u7B26\u5408\u89C4\u8303\uFF0C\u4EE5\u53CA\u5355\u5143\u6D4B\u8BD5\u662F\u5426\u901A\u8FC7

  • \u81EA\u52A8\u53D1\u5E03\uFF1A\u66F4\u65B0\u5B8C\u4EE3\u7801\u540E\uFF0C\u81EA\u52A8\u6784\u5EFA\u51FA\u7EBF\u4E0A\u53D1\u5E03\u4EE3\u7801\u5E76\u4F20\u8F93\u7ED9\u53D1\u5E03\u7CFB\u7EDF\u3002

6\u3001gulp/grunt \u4E0E webpack \u7684\u533A\u522B\u662F\u4EC0\u4E48?

\u4E09\u8005\u90FD\u662F\u524D\u7AEF\u6784\u5EFA\u5DE5\u5177\uFF0Cgrunt \u548C gulp \u5728\u65E9\u671F\u6BD4\u8F83\u6D41\u884C\uFF0C\u73B0\u5728 webpack \u76F8\u5BF9\u6765\u8BF4\u6BD4\u8F83\u4E3B\u6D41\uFF0C\u4E0D\u8FC7\u4E00\u4E9B\u8F7B\u91CF\u5316\u7684\u4EFB\u52A1\u8FD8\u662F\u4F1A\u7528 gulp \u6765\u5904\u7406\uFF0C\u6BD4\u5982\u5355\u72EC\u6253\u5305 CSS \u6587\u4EF6\u7B49\u3002 grunt \u548C gulp \u662F\u57FA\u4E8E\u4EFB\u52A1\u548C\u6D41\uFF08Task\u3001Stream\uFF09\u7684\u3002 \u7C7B\u4F3C jQuery\uFF0C\u627E\u5230\u4E00\u4E2A\uFF08\u6216\u4E00\u7C7B\uFF09\u6587\u4EF6\uFF0C\u5BF9\u5176\u505A\u4E00\u7CFB\u5217\u94FE\u5F0F\u64CD\u4F5C\uFF0C\u66F4\u65B0\u6D41\u4E0A\u7684\u6570\u636E\uFF0C \u6574\u6761\u94FE\u5F0F\u64CD\u4F5C\u6784\u6210\u4E86\u4E00\u4E2A\u4EFB\u52A1\uFF0C\u591A\u4E2A\u4EFB\u52A1\u5C31\u6784\u6210\u4E86\u6574\u4E2A web \u7684\u6784\u5EFA\u6D41\u7A0B\u3002 webpack \u662F\u57FA\u4E8E\u5165\u53E3\u7684\u3002 webpack \u4F1A\u81EA\u52A8\u5730\u9012\u5F52\u89E3\u6790\u5165\u53E3\u6240\u9700\u8981\u52A0\u8F7D\u7684\u6240\u6709\u8D44\u6E90\u6587\u4EF6\uFF0C\u7136\u540E\u7528\u4E0D\u540C\u7684 Loader \u6765\u5904\u7406\u4E0D\u540C\u7684\u6587\u4EF6\uFF0C\u7528 Plugin \u6765\u6269\u5C55 webpack \u529F\u80FD\u3002

7\u3001webpack \u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684?

\u5982\u679C\u50CF\u4EE5\u524D\u5F00\u53D1\u65F6\u4E00\u4E2A html \u6587\u4EF6\u53EF\u80FD\u4F1A\u5F15\u7528\u5341\u51E0\u4E2A js \u6587\u4EF6,\u800C\u4E14\u987A\u5E8F\u8FD8\u4E0D\u80FD\u4E71\uFF0C\u56E0\u4E3A\u5B83\u4EEC\u5B58\u5728\u4F9D\u8D56\u5173\u7CFB\uFF0C\u540C\u65F6\u5BF9\u4E8E ES6+\u7B49\u65B0\u7684\u8BED\u6CD5\uFF0Cless, sass \u7B49 CSS \u9884\u5904\u7406\u90FD\u4E0D\u80FD\u5F88\u597D\u7684\u89E3\u51B3\u2026\u2026\uFF0C\u6B64\u65F6\u5C31\u9700\u8981\u4E00\u4E2A\u5904\u7406\u8FD9\u4E9B\u95EE\u9898\u7684\u5DE5\u5177\u3002

8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8 webpack \u6784\u4EF6\u901F\u5EA6\u7684?

  • \u591A\u5165\u53E3\u60C5\u51B5\u4E0B\uFF0C\u4F7F\u7528 CommonsChunkPlugin \u6765\u63D0\u53D6\u516C\u5171\u4EE3\u7801
  • \u901A\u8FC7 externals \u914D\u7F6E\u6765\u63D0\u53D6\u5E38\u7528\u5E93
  • \u5229\u7528 DllPlugin \u548C DllReferencePlugin \u9884\u7F16\u8BD1\u8D44\u6E90\u6A21\u5757\u901A\u8FC7 DllPlugin \u6765\u5BF9\u90A3\u4E9B\u6211\u4EEC \u5F15\u7528\u4F46\u662F\u7EDD\u5BF9\u4E0D\u4F1A\u4FEE\u6539\u7684 npm \u5305\u6765\u8FDB\u884C\u9884\u7F16\u8BD1\uFF0C\u518D\u901A\u8FC7 DllReferencePlugin \u5C06\u9884\u7F16\u8BD1\u7684\u6A21\u5757\u52A0\u8F7D\u8FDB\u6765\u3002
  • \u4F7F\u7528 Happypack \u5B9E\u73B0\u591A\u7EBF\u7A0B\u52A0\u901F\u7F16\u8BD1
  • \u4F7F\u7528 webpack-uglify-paralle \u6765\u63D0\u5347 uglifyPlugin \u7684\u538B\u7F29\u901F\u5EA6\u3002 \u539F\u7406\u4E0A webpack-uglify-parallel \u91C7\u7528\u4E86\u591A\u6838\u5E76\u884C\u538B\u7F29\u6765\u63D0\u5347\u538B\u7F29\u901F\u5EA6 \u4F7F\u7528 Tree-shaking \u548C Scope Hoisting \u6765\u5254\u9664\u591A\u4F59\u4EE3\u7801

9\u3001npm \u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B\uFF1F\u5982\u4F55\u5229\u7528 webpack \u6765\u66F4\u597D\u7684\u6784\u5EFA\uFF1F

Npm \u662F\u76EE\u524D\u6700\u5927\u7684 JavaScript \u6A21\u5757\u4ED3\u5E93\uFF0C\u91CC\u9762\u6709\u6765\u81EA\u5168\u4E16\u754C\u5F00\u53D1\u8005\u4E0A\u4F20\u7684\u53EF\u590D\u7528\u6A21\u5757\u3002 \u4F60\u53EF\u80FD\u53EA\u662F JS \u6A21\u5757\u7684\u4F7F\u7528\u8005\uFF0C\u4F46\u662F\u6709\u4E9B\u60C5\u51B5\u4F60\u4E5F\u4F1A\u53BB\u9009\u62E9\u4E0A\u4F20\u81EA\u5DF1\u5F00\u53D1\u7684\u6A21\u5757\u3002 \u5173\u4E8E NPM \u6A21\u5757\u4E0A\u4F20\u7684\u65B9\u6CD5\u53EF\u4EE5\u53BB\u5B98\u7F51\u4E0A\u8FDB\u884C\u5B66\u4E60\uFF0C\u8FD9\u91CC\u53EA\u8BB2\u89E3\u5982\u4F55\u5229\u7528 webpack \u6765\u6784\u5EFA\u3002 NPM \u6A21\u5757\u9700\u8981\u6CE8\u610F\u4EE5\u4E0B\u95EE\u9898\uFF1A

  • \u8981\u652F\u6301 CommonJS \u6A21\u5757\u5316\u89C4\u8303\uFF0C\u6240\u4EE5\u8981\u6C42\u6253\u5305\u540E\u7684\u6700\u540E\u7ED3\u679C\u4E5F\u9075\u5B88\u8BE5\u89C4\u5219\u3002
  • Npm \u6A21\u5757\u4F7F\u7528\u8005\u7684\u73AF\u5883\u662F\u4E0D\u786E\u5B9A\u7684\uFF0C\u5F88\u6709\u53EF\u80FD\u5E76\u4E0D\u652F\u6301 ES6\uFF0C\u6240\u4EE5\u6253\u5305\u7684\u6700\u540E\u7ED3\u679C\u5E94\u8BE5\u662F\u91C7\u7528 ES5 \u7F16\u5199\u7684\u3002\u5E76\u4E14\u5982\u679C ES5 \u662F\u7ECF\u8FC7\u8F6C\u6362\u7684\uFF0C\u8BF7\u6700\u597D\u8FDE\u540C SourceMap \u4E00\u540C\u4E0A\u4F20\u3002
  • Npm \u5305\u5927\u5C0F\u5E94\u8BE5\u662F\u5C3D\u91CF\u5C0F\uFF08\u6709\u4E9B\u4ED3\u5E93\u4F1A\u9650\u5236\u5305\u5927\u5C0F\uFF09
  • \u53D1\u5E03\u7684\u6A21\u5757\u4E0D\u80FD\u5C06\u4F9D\u8D56\u7684\u6A21\u5757\u4E5F\u4E00\u540C\u6253\u5305\uFF0C\u5E94\u8BE5\u8BA9\u7528\u6237\u9009\u62E9\u6027\u7684\u53BB\u81EA\u884C\u5B89\u88C5\u3002\u8FD9\u6837\u53EF\u4EE5\u907F\u514D\u6A21\u5757\u5E94\u7528\u8005\u518D\u6B21\u6253\u5305\u65F6\u51FA\u73B0\u5E95\u5C42\u6A21\u5757\u88AB\u91CD\u590D\u6253\u5305\u7684\u60C5\u51B5\u3002
  • UI \u7EC4\u4EF6\u7C7B\u7684\u6A21\u5757\u5E94\u8BE5\u5C06\u4F9D\u8D56\u7684\u5176\u5B83\u8D44\u6E90\u6587\u4EF6\uFF0C\u4F8B\u5982.css \u6587\u4EF6\u4E5F\u9700\u8981\u5305\u542B\u5728\u53D1\u5E03\u7684\u6A21\u5757\u91CC\u3002

10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA\uFF1F

\u4EE3\u7801\u5C42\u9762\uFF1A

  • \u4F53\u79EF\u66F4\u5C0F\uFF08Tree-shaking\u3001\u538B\u7F29\u3001\u5408\u5E76\uFF09\uFF0C\u52A0\u8F7D\u66F4\u5FEB

  • \u7F16\u8BD1\u9AD8\u7EA7\u8BED\u8A00\u548C\u8BED\u6CD5\uFF08TS\u3001ES6\u3001\u6A21\u5757\u5316\u3001scss\uFF09

  • \u517C\u5BB9\u6027\u548C\u9519\u8BEF\u68C0\u67E5\uFF08polyfill,postcss,eslint\uFF09

    \u7814\u53D1\u6D41\u7A0B\u5C42\u9762\uFF1A

  • \u7EDF\u4E00\u3001\u9AD8\u6548\u7684\u5F00\u53D1\u73AF\u5883

  • \u7EDF\u4E00\u7684\u6784\u5EFA\u6D41\u7A0B\u548C\u4EA7\u51FA\u6807\u51C6

  • \u96C6\u6210\u516C\u53F8\u6784\u5EFA\u89C4\u8303\uFF08\u63D0\u6D4B\u3001\u4E0A\u7EBF\uFF09

11\u3001webpack \u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48?\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002

Webpack \u7684\u8FD0\u884C\u6D41\u7A0B\u662F\u4E00\u4E2A\u4E32\u884C\u7684\u8FC7\u7A0B\uFF0C\u4ECE\u542F\u52A8\u5230\u7ED3\u675F\u4F1A\u4F9D\u6B21\u6267\u884C\u4EE5\u4E0B\u6D41\u7A0B\uFF1A

1. \u521D\u59CB\u5316\u53C2\u6570\uFF1A\u4ECE\u914D\u7F6E\u6587\u4EF6\u548C Shell \u8BED\u53E5\u4E2D\u8BFB\u53D6\u4E0E\u5408\u5E76\u53C2\u6570\uFF0C\u5F97\u51FA\u6700\u7EC8\u7684\u53C2\u6570\uFF1B

2. \u5F00\u59CB\u7F16\u8BD1\uFF1A\u7528\u4E0A\u4E00\u6B65\u5F97\u5230\u7684\u53C2\u6570\u521D\u59CB\u5316 Compiler \u5BF9\u8C61\uFF0C\u52A0\u8F7D\u6240\u6709\u914D\u7F6E\u7684\u63D2\u4EF6\uFF0C\u6267\u884C\u5BF9\u8C61\u7684 run \u65B9\u6CD5\u5F00\u59CB\u6267\u884C\u7F16\u8BD1\uFF1B

3. \u786E\u5B9A\u5165\u53E3\uFF1A\u6839\u636E\u914D\u7F6E\u4E2D\u7684 entry \u627E\u51FA\u6240\u6709\u7684\u5165\u53E3\u6587\u4EF6\uFF1B

4. \u7F16\u8BD1\u6A21\u5757\uFF1A\u4ECE\u5165\u53E3\u6587\u4EF6\u51FA\u53D1\uFF0C\u8C03\u7528\u6240\u6709\u914D\u7F6E\u7684 Loader \u5BF9\u6A21\u5757\u8FDB\u884C\u7FFB\u8BD1\uFF0C\u518D\u627E\u51FA\u8BE5\u6A21\u5757\u4F9D\u8D56\u7684\u6A21\u5757\uFF0C\u518D\u9012\u5F52\u672C\u6B65\u9AA4\u76F4\u5230\u6240\u6709\u5165\u53E3\u4F9D\u8D56\u7684\u6587\u4EF6\u90FD\u7ECF\u8FC7\u4E86\u672C\u6B65\u9AA4\u7684\u5904\u7406\uFF1B

5. \u5B8C\u6210\u6A21\u5757\u7F16\u8BD1\uFF1A\u5728\u7ECF\u8FC7\u7B2C 4 \u6B65\u4F7F\u7528 Loader \u7FFB\u8BD1\u5B8C\u6240\u6709\u6A21\u5757\u540E\uFF0C\u5F97\u5230\u4E86\u6BCF\u4E2A\u6A21\u5757\u88AB\u7FFB\u8BD1\u540E\u7684\u6700\u7EC8\u5185\u5BB9\u4EE5\u53CA\u5B83\u4EEC\u4E4B\u95F4\u7684\u4F9D\u8D56\u5173\u7CFB\uFF1B

6. \u8F93\u51FA\u8D44\u6E90\uFF1A\u6839\u636E\u5165\u53E3\u548C\u6A21\u5757\u4E4B\u95F4\u7684\u4F9D\u8D56\u5173\u7CFB\uFF0C\u7EC4\u88C5\u6210\u4E00\u4E2A\u4E2A\u5305\u542B\u591A\u4E2A\u6A21\u5757\u7684 Chunk\uFF0C\u518D\u628A\u6BCF\u4E2A Chunk \u8F6C\u6362\u6210\u4E00\u4E2A\u5355\u72EC\u7684\u6587\u4EF6\u52A0\u5165\u5230\u8F93\u51FA\u5217\u8868\uFF0C\u8FD9\u6B65\u662F\u53EF\u4EE5\u4FEE\u6539\u8F93\u51FA\u5185\u5BB9\u7684\u6700\u540E\u673A\u4F1A\uFF1B

7. \u8F93\u51FA\u5B8C\u6210\uFF1A\u5728\u786E\u5B9A\u597D\u8F93\u51FA\u5185\u5BB9\u540E\uFF0C\u6839\u636E\u914D\u7F6E\u786E\u5B9A\u8F93\u51FA\u7684\u8DEF\u5F84\u548C\u6587\u4EF6\u540D\uFF0C\u628A\u6587\u4EF6\u5185\u5BB9\u5199\u5165\u5230\u6587\u4EF6\u7CFB\u7EDF\u3002

\u5728\u4EE5\u4E0A\u8FC7\u7A0B\u4E2D\uFF0CWebpack \u4F1A\u5728\u7279\u5B9A\u7684\u65F6\u95F4\u70B9\u5E7F\u64AD\u51FA\u7279\u5B9A\u7684\u4E8B\u4EF6\uFF0C\u63D2\u4EF6\u5728\u76D1\u542C\u5230\u611F\u5174\u8DA3\u7684\u4E8B\u4EF6\u540E\u4F1A\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\uFF0C\u5E76\u4E14\u63D2\u4EF6\u53EF\u4EE5\u8C03\u7528 Webpack \u63D0\u4F9B\u7684 API \u6539\u53D8 Webpack \u7684\u8FD0\u884C\u7ED3\u679C\u3002

12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528\uFF1F\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528\uFF1F

\u5355\u9875\u5E94\u7528\u53EF\u4EE5\u7406\u89E3\u4E3A webpack \u7684\u6807\u51C6\u6A21\u5F0F\uFF0C\u76F4\u63A5\u5728 entry \u4E2D\u6307\u5B9A\u5355\u9875\u5E94\u7528\u7684\u5165\u53E3\u5373\u53EF

\u591A\u9875\u5E94\u7528\u7684\u8BDD\uFF0C\u53EF\u4EE5\u4F7F\u7528 webpack \u7684 AutoWebPlugin \u6765\u5B8C\u6210\u7B80\u5355\u81EA\u52A8\u5316\u7684\u6784\u5EFA\uFF0C\u4F46\u662F\u524D\u63D0\u662F\u9879\u76EE\u7684\u76EE\u5F55\u7ED3\u6784\u5FC5\u987B\u9075\u5B88\u4ED6\u9884\u8BBE\u7684\u89C4\u8303\u3002\u591A\u9875\u5E94\u7528\u4E2D\u8981\u6CE8\u610F\u7684\u662F\uFF1A

  • \u6BCF\u4E2A\u9875\u9762\u90FD\u6709\u516C\u5171\u7684\u4EE3\u7801\uFF0C\u53EF\u4EE5\u5C06\u8FD9\u4E9B\u4EE3\u7801\u62BD\u79BB\u51FA\u6765\uFF0C\u907F\u514D\u91CD\u590D\u7684\u52A0\u8F7D\u3002\u6BD4\u5982\uFF0C\u6BCF\u4E2A\u9875\u9762\u90FD\u5F15\u7528\u4E86\u540C\u4E00\u5957 css \u6837\u5F0F\u8868
  • \u968F\u7740\u4E1A\u52A1\u7684\u4E0D\u65AD\u6269\u5C55\uFF0C\u9875\u9762\u53EF\u80FD\u4F1A\u4E0D\u65AD\u7684\u8FFD\u52A0\uFF0C\u6240\u4EE5\u4E00\u5B9A\u8981\u8BA9\u5165\u53E3\u7684\u914D\u7F6E\u8DB3\u591F\u7075\u6D3B\uFF0C\u907F\u514D\u6BCF\u6B21\u6DFB\u52A0\u65B0\u9875\u9762\u8FD8\u9700\u8981\u4FEE\u6539\u6784\u5EFA\u914D\u7F6E

13\u3001Loader \u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F

webpack \u9ED8\u8BA4\u53EA\u80FD\u6253\u5305 js \u6587\u4EF6\uFF0C\u914D\u7F6E\u91CC\u7684 module.rules \u6570\u7EC4\u914D\u7F6E\u4E86\u4E00\u7EC4\u89C4\u5219\uFF0C\u544A\u8BC9 Webpack \u5728\u9047\u5230\u54EA\u4E9B\u6587\u4EF6\u65F6\u4F7F\u7528\u54EA\u4E9B Loader \u53BB\u52A0\u8F7D\u548C\u8F6C\u6362\u6253\u5305\u6210 js\u3002

\u6CE8\u610F\uFF1A

  • use \u5C5E\u6027\u7684\u503C\u9700\u8981\u662F\u4E00\u4E2A\u7531 Loader \u540D\u79F0\u7EC4\u6210\u7684\u6570\u7EC4\uFF0CLoader \u7684\u6267\u884C\u987A\u5E8F\u662F\u7531\u540E\u5230\u524D\u7684\uFF1B
  • \u6BCF\u4E00\u4E2A Loader \u90FD\u53EF\u4EE5\u901A\u8FC7 URL querystring \u7684\u65B9\u5F0F\u4F20\u5165\u53C2\u6570\uFF0C
  • \u4F8B\u5982 css-loader?minimize \u4E2D\u7684 minimize \u544A\u8BC9 css-loader \u8981\u5F00\u542F CSS \u538B\u7F29\u3002

14\u3001\u5E38\u7528 loader

  • css-loader \u8BFB\u53D6 \u5408\u5E76 CSS \u6587\u4EF6
  • style-loader \u628A CSS \u5185\u5BB9\u6CE8\u5165\u5230 JavaScript \u91CC
  • sass-loader \u89E3\u6790 sass \u6587\u4EF6\uFF08\u5B89\u88C5 sass-loader\uFF0Cnode-sass\uFF09
  • postcss-loader \u81EA\u52A8\u6DFB\u52A0\u6D4F\u89C8\u5668\u517C\u5BB9\u524D\u7F00\uFF08postcss.config \u914D\u7F6E\uFF09
  • url-loader \u5C06\u6587\u4EF6\u8F6C\u6362\u4E3A base64 URI\u3002
  • vue-loader \u5904\u7406 vue \u6587\u4EF6\u3002

15\u3001Plugin\uFF08\u63D2\u4EF6\uFF09\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F

Plugin \u662F\u7528\u6765\u6269\u5C55 Webpack \u529F\u80FD\u7684\uFF0C\u901A\u8FC7\u5728\u6784\u5EFA\u6D41\u7A0B\u91CC\u6CE8\u5165\u94A9\u5B50\u5B9E\u73B0\uFF0C\u5B83\u7ED9 Webpack \u5E26\u6765\u4E86\u5F88\u5927\u7684\u7075\u6D3B\u6027\u3002

Webpack \u662F\u901A\u8FC7 plugins \u5C5E\u6027\u6765\u914D\u7F6E\u9700\u8981\u4F7F\u7528\u7684\u63D2\u4EF6\u5217\u8868\u7684\u3002plugins \u5C5E\u6027\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u91CC\u9762\u7684\u6BCF\u4E00\u9879\u90FD\u662F\u63D2\u4EF6\u7684\u4E00\u4E2A\u5B9E\u4F8B\uFF0C\u5728\u5B9E\u4F8B\u5316\u4E00\u4E2A\u7EC4\u4EF6\u65F6\u53EF\u4EE5\u901A\u8FC7\u6784\u9020\u51FD\u6570\u4F20\u5165\u8FD9\u4E2A\u7EC4\u4EF6\u652F\u6301\u7684\u914D\u7F6E\u5C5E\u6027\u3002

16\u3001\u4EC0\u4E48\u662F bundle\uFF0C\u4EC0\u4E48\u662F chunk\uFF0C\u4EC0\u4E48\u662F module

bundle\uFF1A\u662F\u7531 webpack \u6253\u5305\u51FA\u6765\u7684\u6587\u4EF6

chunk\uFF1A\u662F\u6307 webpack \u5728\u8FDB\u884C\u6A21\u5757\u4F9D\u8D56\u5206\u6790\u7684\u65F6\u5019\uFF0C\u4EE3\u7801\u5206\u5272\u51FA\u6765\u7684\u4EE3\u7801\u5757

module\uFF1A\u662F\u5F00\u53D1\u4E2D\u7684\u5355\u4E2A\u6A21\u5757

17\u3001\u5E38\u89C1 Plugins

HtmlWbpackPlugin \u81EA\u52A8\u5728\u6253\u5305\u7ED3\u675F\u540E\u751F\u6210 html \u6587\u4EF6\uFF0C\u5E76\u5F15\u5165 bundle.js cleanwebPackPlugin \u6253\u5305\u81EA\u52A8\u5220\u9664\u4E0A\u6B21\u6253\u5305\u6587\u4EF6

18\u3001ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528

ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528\u662F\u63D0\u53D6\u51FA JavaScript \u4EE3\u7801\u91CC\u7684 CSS \u5230\u4E00\u4E2A\u5355\u72EC\u7684\u6587\u4EF6\u3002

\u5BF9\u6B64\u4F60\u53EF\u4EE5\u901A\u8FC7\u63D2\u4EF6\u7684 filename \u5C5E\u6027\uFF0C\u544A\u8BC9\u63D2\u4EF6\u8F93\u51FA\u7684 CSS \u6587\u4EF6\u540D\u79F0\u662F\u901A\u8FC7[name]\\_[contenthash:8].css \u5B57\u7B26\u4E32\u6A21\u7248\u751F\u6210\u7684\uFF0C

\u91CC\u9762\u7684[name]\u4EE3\u8868\u6587\u4EF6\u540D\u79F0\uFF0C[contenthash:8]\u4EE3\u8868\u6839\u636E\u6587\u4EF6\u5185\u5BB9\u7B97\u51FA\u7684 8 \u4F4D hash \u503C\uFF0C \u8FD8\u6709\u5F88\u591A\u914D\u7F6E\u9009\u9879\u53EF\u4EE5\u5728 ExtractTextPlugin \u7684\u4E3B\u9875\u4E0A\u67E5\u5230\u3002

19\u3001sourceMap

\u662F\u4E00\u4E2A\u6620\u5C04\u5173\u7CFB\uFF0C\u5C06\u6253\u5305\u540E\u7684\u6587\u4EF6\u9690\u5C04\u5230\u6E90\u4EE3\u7801\uFF0C\u7528\u4E8E\u5B9A\u4F4D\u62A5\u9519\u4F4D\u7F6E

\u914D\u7F6E\u65B9\u5F0F: \u4F8B\u5982\uFF1A

js
devtool\uFF1A\u2018source-map\u2019
 

\u52A0\u4E0D\u540C\u524D\u7F00\u610F\u4E49\uFF1A

inline: \u4E0D\u751F\u6210\u6620\u5C04\u5173\u7CFB\u6587\u4EF6\uFF0C\u6253\u5305\u8FDB main.js

cheap: 1.\u53EA\u7CBE\u786E\u5230\u884C\uFF0C\u4E0D\u7CBE\u786E\u5230\u5217\uFF0C\u6253\u5305\u901F\u5EA6\u5FEB 2.\u53EA\u7BA1\u4E1A\u52A1\u4EE3\u7801\uFF0C\u4E0D\u7BA1\u7B2C\u4E09\u65B9\u6A21\u5757

module\uFF1A\u4E0D\u4EC5\u7BA1\u4E1A\u52A1\u4EE3\u7801\uFF0C\u800C\u4E14\u7BA1\u7B2C\u4E09\u65B9\u4EE3\u7801

eval:\u6267\u884C\u6548\u7387\u6700\u5FEB\uFF0C\u6027\u80FD\u6700\u597D

\u6700\u4F73\u5B9E\u8DF5\uFF1A

\u5F00\u53D1\u73AF\u5883\uFF1Acheap-module-eval-source-map

\u7EBF\u4E0A\u73AF\u5883\uFF1Acheap-mudole-source-map

22\u3001babel \u76F8\u5173: polyfill \u4EE5\u53CA runtime \u533A\u522B\uFF0C ES stage \u542B\u4E49\uFF0Cpreset\u2013env \u4F5C\u7528\u7B49\u7B49

  • 1.polyfill \u4EE5\u53CA runtime \u533A\u522B

babel-polyfill \u7684\u539F\u7406\u662F\u5F53\u8FD0\u884C\u73AF\u5883\u4E2D\u5E76\u6CA1\u6709\u5B9E\u73B0\u7684\u4E00\u4E9B\u65B9\u6CD5\uFF0C

babel-polyfill \u4F1A\u505A\u517C\u5BB9\u3002

babel-runtime \u5B83\u662F\u5C06 es6 \u7F16\u8BD1\u6210 es5 \u53BB\u6267\u884C\u3002\u6211\u4EEC\u4F7F\u7528 es6 \u7684\u8BED\u6CD5\u6765\u7F16\u5199\uFF0C\u6700\u7EC8\u4F1A\u901A\u8FC7 babel-runtime \u7F16\u8BD1\u6210 es5.\u4E5F\u5C31\u662F\u8BF4\uFF0C\u4E0D\u7BA1\u6D4F\u89C8\u5668\u662F\u5426\u652F\u6301 ES6\uFF0C\u53EA\u8981\u662F ES6 \u7684\u8BED\u6CD5\uFF0C\u5B83\u90FD\u4F1A\u8FDB\u884C\u8F6C\u7801\u6210 ES5.\u6240\u4EE5\u5C31\u6709\u5F88\u591A\u5197\u4F59\u7684\u4EE3\u7801\u3002

babel-polyfill \u5B83\u662F\u901A\u8FC7\u5411\u5168\u5C40\u5BF9\u8C61\u548C\u5185\u7F6E\u5BF9\u8C61\u7684 prototype \u4E0A\u6DFB\u52A0\u65B9\u6CD5\u6765\u5B9E\u73B0\u7684\u3002\u6BD4\u5982\u8FD0\u884C\u73AF\u5883\u4E2D\u4E0D\u652F\u6301 Array.prototype.find \u65B9\u6CD5\uFF0C\u5F15\u5165 polyfill, \u6211\u4EEC\u5C31\u53EF\u4EE5\u4F7F\u7528 es6 \u65B9\u6CD5\u6765\u7F16\u5199\u4E86\uFF0C\u4F46\u662F\u7F3A\u70B9\u5C31\u662F\u4F1A\u9020\u6210\u5168\u5C40\u7A7A\u95F4\u6C61\u67D3\u3002

babel-runtime: \u5B83\u4E0D\u4F1A\u6C61\u67D3\u5168\u5C40\u5BF9\u8C61\u548C\u5185\u7F6E\u5BF9\u8C61\u7684\u539F\u578B\uFF0C\u6BD4\u5982\u8BF4\u6211\u4EEC\u9700\u8981 Promise\uFF0C\u6211\u4EEC\u53EA\u9700\u8981 import Promise from 'babel-runtime/core-js/promise'\u5373\u53EF\uFF0C\u8FD9\u6837\u4E0D\u4EC5\u907F\u514D\u6C61\u67D3\u5168\u5C40\u5BF9\u8C61\uFF0C\u800C\u4E14\u53EF\u4EE5\u51CF\u5C11\u4E0D\u5FC5\u8981\u7684\u4EE3\u7801\u3002

  • stage-x\uFF1A\u6307\u5904\u4E8E\u67D0\u4E00\u9636\u6BB5\u7684 js \u8BED\u8A00\u63D0\u6848
  • \u7406\u89E3 babel-preset-envbabel-preset-es2015: \u53EF\u4EE5\u5C06 es6 \u7684\u4EE3\u7801\u7F16\u8BD1\u6210 es5. babel-preset-es2016: \u53EF\u4EE5\u5C06 es7 \u7684\u4EE3\u7801\u7F16\u8BD1\u4E3A es6. babel-preset-es2017: \u53EF\u4EE5\u5C06 es8 \u7684\u4EE3\u7801\u7F16\u8BD1\u4E3A es7. babel-preset-latest: \u652F\u6301\u73B0\u6709\u6240\u6709 ECMAScript \u7248\u672C\u7684\u65B0\u7279\u6027

23. \u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0\uFF1F\u6709\u4EC0\u4E48\u4F18\u70B9\uFF1F

\u6A21\u5757\u70ED\u66F4\u65B0\u662F webpack \u7684\u4E00\u4E2A\u529F\u80FD\uFF0C\u5B83\u53EF\u4EE5\u4F7F\u5F97\u4EE3\u7801\u4FEE\u6539\u4E4B\u540E\uFF0C\u4E0D\u7528\u5237\u65B0\u6D4F\u89C8\u5668\u5C31\u53EF\u4EE5\u66F4\u65B0\u3002

\u5728\u5E94\u7528\u8FC7\u7A0B\u4E2D\u66FF\u6362\u6DFB\u52A0\u5220\u51FA\u6A21\u5757\uFF0C\u65E0\u9700\u91CD\u65B0\u52A0\u8F7D\u6574\u4E2A\u9875\u9762\uFF0C\u662F\u9AD8\u7EA7\u7248\u7684\u81EA\u52A8\u5237\u65B0\u6D4F\u89C8\u5668\u3002

\u4F18\u70B9\uFF1A\u53EA\u66F4\u65B0\u53D8\u66F4\u5185\u5BB9\uFF0C\u4EE5\u8282\u7701\u5B9D\u8D35\u7684\u5F00\u53D1\u65F6\u95F4\u3002\u8C03\u6574\u6837\u5F0F\u66F4\u52A0\u5FEB\u901F\uFF0C\u51E0\u4E4E\u76F8\u5F53\u4E8E\u5728\u6D4F\u89C8\u5668\u4E2D\u66F4\u6539\u6837\u5F0F

24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58\uFF1F\u5728 webpack \u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316\uFF1F

\u6D4F\u89C8\u5668\u5728\u7528\u6237\u8BBF\u95EE\u9875\u9762\u7684\u65F6\u5019\uFF0C\u4E3A\u4E86\u52A0\u5FEB\u52A0\u8F7D\u901F\u5EA6\uFF0C\u4F1A\u5BF9\u7528\u6237\u8BBF\u95EE\u7684\u9759\u6001\u8D44\u6E90\u8FDB\u884C\u5B58\u50A8\uFF0C\u4F46\u662F\u6BCF\u4E00\u6B21\u4EE3\u7801\u5347\u7EA7\u6216\u8005\u66F4\u65B0\uFF0C\u90FD\u9700\u8981\u6D4F\u89C8\u5668\u53BB\u4E0B\u8F7D\u65B0\u7684\u4EE3\u7801\uFF0C\u6700\u65B9\u4FBF\u548C\u6700\u7B80\u5355\u7684\u66F4\u65B0\u65B9\u5F0F\u5C31\u662F\u5F15\u5165\u65B0\u7684\u6587\u4EF6\u540D\u79F0\u3002

\u5728 webpack \u4E2D\uFF0C\u53EF\u4EE5\u5728 output \u7ED9\u51FA\u8F93\u51FA\u7684\u6587\u4EF6\u5236\u5B9A chunkhash\uFF0C\u5E76\u4E14\u5206\u79BB\u7ECF\u5E38\u66F4\u65B0\u7684\u4EE3\u7801\u548C\u6846\u67B6\u4EE3\u7801\uFF0C\u901A\u8FC7 NameModulesPlugin \u6216\u8005 HashedModulesPlugin \u4F7F\u518D\u6B21\u6253\u5305\u6587\u4EF6\u540D\u4E0D\u53D8\u3002

26\u3001\u4EC0\u4E48\u662F Tree-sharking?

\u6307\u6253\u5305\u4E2D\u53BB\u9664\u90A3\u4E9B\u5F15\u5165\u4E86\u4F46\u5728\u4EE3\u7801\u4E2D\u6CA1\u7528\u5230\u7684\u6B7B\u4EE3\u7801\u3002\u5728 wepack \u4E2D js treeshaking \u901A\u8FC7 UglifyJsPlugin \u6765\u8FDB\u884C\uFF0Ccss \u4E2D\u901A\u8FC7 purify-CSS \u6765\u8FDB\u884C\u3002

27\u3001webpack-dev-server \u548C http \u670D\u52A1\u5668\u7684\u533A\u522B

webpack-dev-server \u4F7F\u7528\u5185\u5B58\u6765\u5B58\u50A8 webpack \u5F00\u53D1\u73AF\u5883\u4E0B\u7684\u6253\u5305\u6587\u4EF6\uFF0C\u5E76\u4E14\u53EF\u4EE5\u4F7F\u7528\u6A21\u5757\u70ED\u66F4\u65B0\uFF0C\u6BD4\u4F20\u7EDF\u7684 http \u670D\u52A1\u5BF9\u5F00\u53D1\u66F4\u52A0\u6709\u6548\u3002

28\u3001webpack3 \u548C webpack4 \u7684\u533A\u522B

mode/\u2013mode \u53C2\u6570\uFF0C\u65B0\u589E\u4E86 mode/\u2013mode \u53C2\u6570\u6765\u8868\u793A\u662F\u5F00\u53D1\u8FD8\u662F\u751F\u4EA7\uFF08development/production\uFF09production \u4FA7\u91CD\u4E8E\u6253\u5305\u540E\u7684\u6587\u4EF6\u5927\u5C0F\uFF0Cdevelopment \u4FA7\u91CD\u4E8E goujiansud \u79FB\u9664 loaders\uFF0C\u5FC5\u987B\u4F7F\u7528 rules\uFF08\u5728 3 \u7248\u672C\u7684\u65F6\u5019 loaders \u548C rules \u662F\u5171\u5B58\u7684\u4F46\u662F\u5230 4 \u7684\u65F6\u5019\u53EA\u5141\u8BB8\u4F7F\u7528 rules\uFF09\u79FB\u9664\u4E86 CommonsChunkPlugin (\u63D0\u53D6\u516C\u5171\u4EE3\u7801)\uFF0C\u7528 optimization.splitChunks \u548C optimization.runtimeChunk \u6765\u4EE3\u66FF\u652F\u6301 es6 \u7684\u65B9\u5F0F\u5BFC\u5165 JSON \u6587\u4EF6\uFF0C\u5E76\u4E14\u53EF\u4EE5\u8FC7\u6EE4\u65E0\u7528\u7684\u4EE3\u7801

`,95),i=[n];function c(s,o,t,d,h,u){return a(),l("div",null,i)}const k=e(p,[["render",c]]);export{b as __pageData,k as default}; diff --git a/assets/pages_interviews_webpack.md.fb4ce712.lean.js b/assets/pages_interviews_webpack.md.1fa7fa56.lean.js similarity index 99% rename from assets/pages_interviews_webpack.md.fb4ce712.lean.js rename to assets/pages_interviews_webpack.md.1fa7fa56.lean.js index e24b9dc..620d9b2 100644 --- a/assets/pages_interviews_webpack.md.fb4ce712.lean.js +++ b/assets/pages_interviews_webpack.md.1fa7fa56.lean.js @@ -1 +1 @@ -import{_ as e,o as a,c as l,a as r}from"./app.cac277bf.js";const b=JSON.parse('{"title":"Webpack \u9762\u8BD5\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1\u3001webpack \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF0C\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3\uFF1F","slug":"_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","link":"#_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","children":[]},{"level":2,"title":"2\u3001webpack \u7684\u5DE5\u4F5C\u539F\u7406?","slug":"_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","link":"#_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","children":[]},{"level":2,"title":"3\u3001webpack \u6253\u5305\u539F\u7406","slug":"_3\u3001webpack-\u6253\u5305\u539F\u7406","link":"#_3\u3001webpack-\u6253\u5305\u539F\u7406","children":[]},{"level":2,"title":"4\u3001webpack \u7684\u6838\u5FC3\u6982\u5FF5","slug":"_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","link":"#_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","children":[]},{"level":2,"title":"5\u3001Webpack \u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B\uFF1F","slug":"_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","link":"#_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"6\u3001gulp/grunt \u4E0E webpack \u7684\u533A\u522B\u662F\u4EC0\u4E48?","slug":"_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"7\u3001webpack \u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684?","slug":"_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","link":"#_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","children":[]},{"level":2,"title":"8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8 webpack \u6784\u4EF6\u901F\u5EA6\u7684?","slug":"_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","link":"#_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","children":[]},{"level":2,"title":"9\u3001npm \u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B\uFF1F\u5982\u4F55\u5229\u7528 webpack \u6765\u66F4\u597D\u7684\u6784\u5EFA\uFF1F","slug":"_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","link":"#_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","children":[]},{"level":2,"title":"10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA\uFF1F","slug":"_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","link":"#_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","children":[]},{"level":2,"title":"11\u3001webpack \u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48?\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","slug":"_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","link":"#_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","children":[]},{"level":2,"title":"12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528\uFF1F\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528\uFF1F","slug":"_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","link":"#_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","children":[]},{"level":2,"title":"13\u3001Loader \u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"14\u3001\u5E38\u7528 loader","slug":"_14\u3001\u5E38\u7528-loader","link":"#_14\u3001\u5E38\u7528-loader","children":[]},{"level":2,"title":"15\u3001Plugin\uFF08\u63D2\u4EF6\uFF09\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16\u3001\u4EC0\u4E48\u662F bundle\uFF0C\u4EC0\u4E48\u662F chunk\uFF0C\u4EC0\u4E48\u662F module","slug":"_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","link":"#_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","children":[]},{"level":2,"title":"17\u3001\u5E38\u89C1 Plugins","slug":"_17\u3001\u5E38\u89C1-plugins","link":"#_17\u3001\u5E38\u89C1-plugins","children":[]},{"level":2,"title":"18\u3001ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528","slug":"_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","link":"#_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","children":[]},{"level":2,"title":"19\u3001sourceMap","slug":"_19\u3001sourcemap","link":"#_19\u3001sourcemap","children":[]},{"level":2,"title":"22\u3001babel \u76F8\u5173: polyfill \u4EE5\u53CA runtime \u533A\u522B\uFF0C ES stage \u542B\u4E49\uFF0Cpreset\u2013env \u4F5C\u7528\u7B49\u7B49","slug":"_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","link":"#_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","children":[]},{"level":2,"title":"23. \u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0\uFF1F\u6709\u4EC0\u4E48\u4F18\u70B9\uFF1F","slug":"_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","link":"#_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","children":[]},{"level":2,"title":"24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58\uFF1F\u5728 webpack \u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316\uFF1F","slug":"_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","link":"#_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","children":[]},{"level":2,"title":"26\u3001\u4EC0\u4E48\u662F Tree-sharking?","slug":"_26\u3001\u4EC0\u4E48\u662F-tree-sharking","link":"#_26\u3001\u4EC0\u4E48\u662F-tree-sharking","children":[]},{"level":2,"title":"27\u3001webpack-dev-server \u548C http \u670D\u52A1\u5668\u7684\u533A\u522B","slug":"_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","link":"#_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","children":[]},{"level":2,"title":"28\u3001webpack3 \u548C webpack4 \u7684\u533A\u522B","slug":"_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","link":"#_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","children":[]}],"relativePath":"pages/interviews/webpack.md"}'),p={name:"pages/interviews/webpack.md"},n=r("",95),i=[n];function c(s,o,t,d,h,u){return a(),l("div",null,i)}const k=e(p,[["render",c]]);export{b as __pageData,k as default}; +import{_ as e,o as a,c as l,a as r}from"./app.88185e12.js";const b=JSON.parse('{"title":"Webpack \u9762\u8BD5\u9898","description":"","frontmatter":{},"headers":[{"level":2,"title":"1\u3001webpack \u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF0C\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3\uFF1F","slug":"_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","link":"#_1\u3001webpack-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48-\u8C08\u8C08\u4F60\u5BF9\u5B83\u7684\u7406\u89E3","children":[]},{"level":2,"title":"2\u3001webpack \u7684\u5DE5\u4F5C\u539F\u7406?","slug":"_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","link":"#_2\u3001webpack-\u7684\u5DE5\u4F5C\u539F\u7406","children":[]},{"level":2,"title":"3\u3001webpack \u6253\u5305\u539F\u7406","slug":"_3\u3001webpack-\u6253\u5305\u539F\u7406","link":"#_3\u3001webpack-\u6253\u5305\u539F\u7406","children":[]},{"level":2,"title":"4\u3001webpack \u7684\u6838\u5FC3\u6982\u5FF5","slug":"_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","link":"#_4\u3001webpack-\u7684\u6838\u5FC3\u6982\u5FF5","children":[]},{"level":2,"title":"5\u3001Webpack \u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B\uFF1F","slug":"_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","link":"#_5\u3001webpack-\u7684\u57FA\u672C\u529F\u80FD\u6709\u54EA\u4E9B","children":[]},{"level":2,"title":"6\u3001gulp/grunt \u4E0E webpack \u7684\u533A\u522B\u662F\u4EC0\u4E48?","slug":"_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","link":"#_6\u3001gulp-grunt-\u4E0E-webpack-\u7684\u533A\u522B\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"7\u3001webpack \u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684?","slug":"_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","link":"#_7\u3001webpack-\u662F\u89E3\u51B3\u4EC0\u4E48\u95EE\u9898\u800C\u751F\u7684","children":[]},{"level":2,"title":"8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8 webpack \u6784\u4EF6\u901F\u5EA6\u7684?","slug":"_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","link":"#_8\u3001\u4F60\u662F\u5982\u4F55\u63D0\u9AD8-webpack-\u6784\u4EF6\u901F\u5EA6\u7684","children":[]},{"level":2,"title":"9\u3001npm \u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B\uFF1F\u5982\u4F55\u5229\u7528 webpack \u6765\u66F4\u597D\u7684\u6784\u5EFA\uFF1F","slug":"_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","link":"#_9\u3001npm-\u6253\u5305\u65F6\u9700\u8981\u6CE8\u610F\u54EA\u4E9B-\u5982\u4F55\u5229\u7528-webpack-\u6765\u66F4\u597D\u7684\u6784\u5EFA","children":[]},{"level":2,"title":"10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA\uFF1F","slug":"_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","link":"#_10\u3001\u524D\u7AEF\u4E3A\u4EC0\u4E48\u8981\u8FDB\u884C\u6253\u5305\u548C\u6784\u5EFA","children":[]},{"level":2,"title":"11\u3001webpack \u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48?\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","slug":"_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","link":"#_11\u3001webpack-\u7684\u6784\u5EFA\u6D41\u7A0B\u662F\u4EC0\u4E48-\u4ECE\u8BFB\u53D6\u914D\u7F6E\u5230\u8F93\u51FA\u6587\u4EF6\u8FD9\u4E2A\u8FC7\u7A0B\u5C3D\u91CF\u8BF4\u5168\u3002","children":[]},{"level":2,"title":"12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528\uFF1F\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528\uFF1F","slug":"_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","link":"#_12\u3001\u600E\u4E48\u914D\u7F6E\u5355\u9875\u5E94\u7528-\u600E\u4E48\u914D\u7F6E\u591A\u9875\u5E94\u7528","children":[]},{"level":2,"title":"13\u3001Loader \u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_13\u3001loader-\u673A\u5236\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"14\u3001\u5E38\u7528 loader","slug":"_14\u3001\u5E38\u7528-loader","link":"#_14\u3001\u5E38\u7528-loader","children":[]},{"level":2,"title":"15\u3001Plugin\uFF08\u63D2\u4EF6\uFF09\u7684\u4F5C\u7528\u662F\u4EC0\u4E48\uFF1F","slug":"_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","link":"#_15\u3001plugin-\u63D2\u4EF6-\u7684\u4F5C\u7528\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"16\u3001\u4EC0\u4E48\u662F bundle\uFF0C\u4EC0\u4E48\u662F chunk\uFF0C\u4EC0\u4E48\u662F module","slug":"_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","link":"#_16\u3001\u4EC0\u4E48\u662F-bundle-\u4EC0\u4E48\u662F-chunk-\u4EC0\u4E48\u662F-module","children":[]},{"level":2,"title":"17\u3001\u5E38\u89C1 Plugins","slug":"_17\u3001\u5E38\u89C1-plugins","link":"#_17\u3001\u5E38\u89C1-plugins","children":[]},{"level":2,"title":"18\u3001ExtractTextPlugin \u63D2\u4EF6\u7684\u4F5C\u7528","slug":"_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","link":"#_18\u3001extracttextplugin-\u63D2\u4EF6\u7684\u4F5C\u7528","children":[]},{"level":2,"title":"19\u3001sourceMap","slug":"_19\u3001sourcemap","link":"#_19\u3001sourcemap","children":[]},{"level":2,"title":"22\u3001babel \u76F8\u5173: polyfill \u4EE5\u53CA runtime \u533A\u522B\uFF0C ES stage \u542B\u4E49\uFF0Cpreset\u2013env \u4F5C\u7528\u7B49\u7B49","slug":"_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","link":"#_22\u3001babel-\u76F8\u5173-polyfill-\u4EE5\u53CA-runtime-\u533A\u522B-es-stage-\u542B\u4E49-preset\u2013env-\u4F5C\u7528\u7B49\u7B49","children":[]},{"level":2,"title":"23. \u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0\uFF1F\u6709\u4EC0\u4E48\u4F18\u70B9\uFF1F","slug":"_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","link":"#_23-\u4EC0\u4E48\u662F\u6A21\u70ED\u66F4\u65B0-\u6709\u4EC0\u4E48\u4F18\u70B9","children":[]},{"level":2,"title":"24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58\uFF1F\u5728 webpack \u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316\uFF1F","slug":"_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","link":"#_24\u3001\u4EC0\u4E48\u662F\u957F\u7F13\u5B58-\u5728-webpack-\u4E2D\u5982\u4F55\u505A\u5230\u957F\u7F13\u5B58\u4F18\u5316","children":[]},{"level":2,"title":"26\u3001\u4EC0\u4E48\u662F Tree-sharking?","slug":"_26\u3001\u4EC0\u4E48\u662F-tree-sharking","link":"#_26\u3001\u4EC0\u4E48\u662F-tree-sharking","children":[]},{"level":2,"title":"27\u3001webpack-dev-server \u548C http \u670D\u52A1\u5668\u7684\u533A\u522B","slug":"_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","link":"#_27\u3001webpack-dev-server-\u548C-http-\u670D\u52A1\u5668\u7684\u533A\u522B","children":[]},{"level":2,"title":"28\u3001webpack3 \u548C webpack4 \u7684\u533A\u522B","slug":"_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","link":"#_28\u3001webpack3-\u548C-webpack4-\u7684\u533A\u522B","children":[]}],"relativePath":"pages/interviews/webpack.md"}'),p={name:"pages/interviews/webpack.md"},n=r("",95),i=[n];function c(s,o,t,d,h,u){return a(),l("div",null,i)}const k=e(p,[["render",c]]);export{b as __pageData,k as default}; diff --git a/assets/pages_lotsOfDifferent_demo1_index.md.56190601.js b/assets/pages_lotsOfDifferent_demo1_index.md.56190601.js new file mode 100644 index 0000000..5be6ad1 --- /dev/null +++ b/assets/pages_lotsOfDifferent_demo1_index.md.56190601.js @@ -0,0 +1,9 @@ +import{o as s,c as o,a}from"./app.88185e12.js";const n=a(`

\u6742\u4E03\u6742\u516B\u7CFB\u5217\u4E00

1. \u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272

\u56E0\u4E3A\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u4E86 cdn \u5F15\u5165\u7684\u65B9\u5F0F\uFF0C\u6253\u5305\u9519\u8BEF\uFF0C\u7EC4\u4EF6\u5730\u5740\u4E3A ./components/bgFollowImg.vue

TIP

  1. \u901A\u8FC7 cdn \u5F15\u5165 colorThief\uFF0Cimport "https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.4.0/color-thief.min.js"

    • \u6216\u8005 npm i colorthief
  2. \u901A\u8FC7 https://picsum.photos \u7F51\u5740\u83B7\u53D6\u968F\u673A\u56FE\u7247\uFF0C\u901A\u8FC7 colorThief \u83B7\u53D6\u989C\u8272\u7684\u8BDD\u4F1A\u6709\u8DE8\u57DF\u6C61\u67D3\uFF08\u56E0\u4E3A\u91CC\u9762\u4F7F\u7528\u4E86 canvas\uFF0C\u4F1A\u6C61\u67D3\u753B\u5E03\uFF09\uFF0C\u5728img\u6807\u7B7E\u4E0A\u8BBE\u7F6E crossorigin="anonymous"\u89E3\u51B3

  3. colorThief\u4F7F\u7528

js
//\u521B\u5EFA\u4E00\u4E2A ColorThief \u7684\u5B9E\u4F8B\u5BF9\u8C61
+const colorThief = new ColorThief();
+
+// 1. \u5F97\u5230\u56FE\u7247\u7684\u8C03\u8272\u76D8\uFF08\u53EA\u5F97\u5230\u524D\u4E09\u79CD\u4E3B\u8981\u989C\u8272\uFF09
+const colors = await colorThief.getPalette(e.target, 3);
+
+// 2. \u53EA\u5F97\u5230\u4E3B\u8981\u989C\u8272
+const mainColor = await colorThief.getColor(e.target);
+
`,4),l=[n],i=JSON.parse('{"title":"\u6742\u4E03\u6742\u516B\u7CFB\u5217\u4E00","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272","slug":"_1-\u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272","link":"#_1-\u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272","children":[]}],"relativePath":"pages/lotsOfDifferent/demo1/index.md"}'),e={name:"pages/lotsOfDifferent/demo1/index.md"},d=Object.assign(e,{setup(p){return(c,t)=>(s(),o("div",null,l))}});export{i as __pageData,d as default}; diff --git a/assets/pages_lotsOfDifferent_demo1_index.md.56190601.lean.js b/assets/pages_lotsOfDifferent_demo1_index.md.56190601.lean.js new file mode 100644 index 0000000..1573de1 --- /dev/null +++ b/assets/pages_lotsOfDifferent_demo1_index.md.56190601.lean.js @@ -0,0 +1 @@ +import{o as s,c as o,a}from"./app.88185e12.js";const n=a("",4),l=[n],i=JSON.parse('{"title":"\u6742\u4E03\u6742\u516B\u7CFB\u5217\u4E00","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272","slug":"_1-\u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272","link":"#_1-\u8DDF\u968F\u56FE\u7247\u53D8\u5316\u7684\u80CC\u666F\u8272","children":[]}],"relativePath":"pages/lotsOfDifferent/demo1/index.md"}'),e={name:"pages/lotsOfDifferent/demo1/index.md"},d=Object.assign(e,{setup(p){return(c,t)=>(s(),o("div",null,l))}});export{i as __pageData,d as default}; diff --git a/assets/pages_base_globalDemo.md.17f0d49d.js b/assets/pages_node_index.md.5f123883.js similarity index 85% rename from assets/pages_base_globalDemo.md.17f0d49d.js rename to assets/pages_node_index.md.5f123883.js index cb7723d..b98909c 100644 --- a/assets/pages_base_globalDemo.md.17f0d49d.js +++ b/assets/pages_node_index.md.5f123883.js @@ -1,4 +1,4 @@ -import{_ as o,h as p,o as e,c as t,b as s,g as c,i as n,a}from"./app.cac277bf.js";const x=JSON.parse('{"title":"node.js(http://www.nodejs.com.cn/7-days-nodejs/#2.5.5)","description":"","frontmatter":{},"headers":[{"level":2,"title":"\uFF01node \u5E38\u7528","slug":"node-\u5E38\u7528","link":"#node-\u5E38\u7528","children":[{"level":3,"title":"1. process\u5168\u5C40\u53D8\u91CF","slug":"_1-process\u5168\u5C40\u53D8\u91CF","link":"#_1-process\u5168\u5C40\u53D8\u91CF","children":[]},{"level":3,"title":"2. cp -r source/* target \u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","slug":"_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","link":"#_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","children":[]}]},{"level":2,"title":"1. \u57FA\u672C\u4FE1\u606F","slug":"_1-\u57FA\u672C\u4FE1\u606F","link":"#_1-\u57FA\u672C\u4FE1\u606F","children":[]},{"level":2,"title":"2. \u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","slug":"_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","link":"#_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","children":[]},{"level":2,"title":"3. \u5305package","slug":"_3-\u5305package","link":"#_3-\u5305package","children":[]},{"level":2,"title":"4. fs\u6A21\u5757","slug":"_4-fs\u6A21\u5757","link":"#_4-fs\u6A21\u5757","children":[]},{"level":2,"title":"5. path\u6A21\u5757","slug":"_5-path\u6A21\u5757","link":"#_5-path\u6A21\u5757","children":[]},{"level":2,"title":"6 .\u5355\u5B57\u8282\u7F16\u7801","slug":"_6-\u5355\u5B57\u8282\u7F16\u7801","link":"#_6-\u5355\u5B57\u8282\u7F16\u7801","children":[]},{"level":2,"title":"7. http\u6A21\u5757","slug":"_7-http\u6A21\u5757","link":"#_7-http\u6A21\u5757","children":[]},{"level":2,"title":"8. \u8FDB\u7A0B\u7BA1\u7406","slug":"_8-\u8FDB\u7A0B\u7BA1\u7406","link":"#_8-\u8FDB\u7A0B\u7BA1\u7406","children":[{"level":3,"title":"\u5E94\u7528\u573A\u666F","slug":"\u5E94\u7528\u573A\u666F","link":"#\u5E94\u7528\u573A\u666F","children":[]}]},{"level":2,"title":"9. \u5F02\u6B65\u7F16\u7A0B","slug":"_9-\u5F02\u6B65\u7F16\u7A0B","link":"#_9-\u5F02\u6B65\u7F16\u7A0B","children":[{"level":3,"title":"\u57DF\uFF08domain\uFF09","slug":"\u57DF-domain","link":"#\u57DF-domain","children":[]},{"level":3,"title":"\u6CE8\u610F\u70B9 \u26A0\uFE0F","slug":"\u6CE8\u610F\u70B9-\u26A0\uFE0F","link":"#\u6CE8\u610F\u70B9-\u26A0\uFE0F","children":[]}]}],"relativePath":"pages/base/globalDemo.md"}'),r={name:"pages/base/globalDemo.md"},D=a(`

node.js(http://www.nodejs.com.cn/7-days-nodejs/#2.5.5)

\uFF01node \u5E38\u7528

1. process\u5168\u5C40\u53D8\u91CF

  • process\uFF1A\u4E00\u4E2A\u5168\u5C40\u53D8\u91CF\uFF0C\u63D0\u4F9B\u4E86\u6709\u5173\u5F53\u524D Node.js \u8FDB\u7A0B\u7684\u4FE1\u606F\u5E76\u5BF9\u5176\u8FDB\u884C\u63A7\u5236
  • \u7531\u4E8E JavaScript \u662F\u4E00\u4E2A\u5355\u7EBF\u7A0B\u8BED\u8A00\uFF0C\u6240\u4EE5\u901A\u8FC7 node xxx \u542F\u52A8\u4E00\u4E2A\u6587\u4EF6\u540E\uFF0C\u53EA\u6709\u4E00\u6761\u4E3B\u7EBF\u7A0B
process\u5E38\u89C1\u5C5E\u6027
  • process.env\uFF1A\u73AF\u5883\u53D8\u91CF\uFF0C\u4F8B\u5982\u901A\u8FC7 \`process.env.NODE_ENV \u83B7\u53D6\u4E0D\u540C\u73AF\u5883\u9879\u76EE\u914D\u7F6E\u4FE1\u606F
  • process.nextTick\uFF1A\u8FD9\u4E2A\u5728\u8C08\u53CA EventLoop \u65F6\u7ECF\u5E38\u4E3A\u4F1A\u63D0\u5230
  • process.pid\uFF1A\u83B7\u53D6\u5F53\u524D\u8FDB\u7A0B id
  • process.ppid\uFF1A\u5F53\u524D\u8FDB\u7A0B\u5BF9\u5E94\u7684\u7236\u8FDB\u7A0B
  • process.cwd()\uFF1A\u83B7\u53D6\u5F53\u524D\u8FDB\u7A0B\u5DE5\u4F5C\u76EE\u5F55\uFF0C
  • process.platform\uFF1A\u83B7\u53D6\u5F53\u524D\u8FDB\u7A0B\u8FD0\u884C\u7684\u64CD\u4F5C\u7CFB\u7EDF\u5E73\u53F0
  • process.uptime()\uFF1A\u5F53\u524D\u8FDB\u7A0B\u5DF2\u8FD0\u884C\u65F6\u95F4\uFF0C\u4F8B\u5982\uFF1Apm2 \u5B88\u62A4\u8FDB\u7A0B\u7684 uptime \u503C
  • \u8FDB\u7A0B\u4E8B\u4EF6\uFF1Aprocess.on(\u2018uncaughtException\u2019,cb) \u6355\u83B7\u5F02\u5E38\u4FE1\u606F\u3001 process.on(\u2018exit\u2019,cb\uFF09\u8FDB\u7A0B\u63A8\u51FA\u76D1\u542C
  • \u4E09\u4E2A\u6807\u51C6\u6D41\uFF1Aprocess.stdout \u6807\u51C6\u8F93\u51FA\u3001 process.stdin \u6807\u51C6\u8F93\u5165\u3001 process.stderr \u6807\u51C6\u9519\u8BEF\u8F93\u51FA
  • process.title \u6307\u5B9A\u8FDB\u7A0B\u540D\u79F0\uFF0C\u6709\u7684\u65F6\u5019\u9700\u8981\u7ED9\u8FDB\u7A0B\u6307\u5B9A\u4E00\u4E2A\u540D\u79F0

process\u5E38\u89C1\u65B9\u6CD5

  • process.argv()\uFF1A\u5728\u7EC8\u7AEF\u901A\u8FC7 node \u547D\u4EE4\u6267\u884C\u65F6\uFF0C\u83B7\u53D6\u547D\u4EE4\u884C\u53C2\u6570\uFF0C\u8FD4\u56DE\u503C\u662F\u4E00\u4E2A\u6570\u7EC4

    - [0] node\u8DEF\u5F84 \uFF08\u4E00\u822C\u7528\u4E0D\u5230\uFF09
    +import{_ as o,k as p,o as e,c as t,b as s,g as c,j as n,a}from"./app.88185e12.js";const x=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"node \u76F8\u5173","slug":"node-\u76F8\u5173","link":"#node-\u76F8\u5173","children":[]},{"level":2,"title":"\u{1F4D6} Node.js \u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","slug":"\u{1F4D6}-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","link":"#\u{1F4D6}-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","children":[]},{"level":2,"title":"\u{1F680} 7 \u5929\u5B66\u4F1A node.js","slug":"\u{1F680}-7-\u5929\u5B66\u4F1A-node-js","link":"#\u{1F680}-7-\u5929\u5B66\u4F1A-node-js","children":[]},{"level":2,"title":"\u{1F525} node \u5E38\u7528","slug":"\u{1F525}-node-\u5E38\u7528","link":"#\u{1F525}-node-\u5E38\u7528","children":[{"level":3,"title":"1. process\u5168\u5C40\u53D8\u91CF","slug":"_1-process\u5168\u5C40\u53D8\u91CF","link":"#_1-process\u5168\u5C40\u53D8\u91CF","children":[]},{"level":3,"title":"2. cp -r source/* target \u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","slug":"_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","link":"#_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","children":[]}]},{"level":2,"title":"1. \u57FA\u672C\u4FE1\u606F","slug":"_1-\u57FA\u672C\u4FE1\u606F","link":"#_1-\u57FA\u672C\u4FE1\u606F","children":[]},{"level":2,"title":"2. \u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","slug":"_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","link":"#_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","children":[]},{"level":2,"title":"3. \u5305package","slug":"_3-\u5305package","link":"#_3-\u5305package","children":[]},{"level":2,"title":"4. fs\u6A21\u5757","slug":"_4-fs\u6A21\u5757","link":"#_4-fs\u6A21\u5757","children":[]},{"level":2,"title":"5. path\u6A21\u5757","slug":"_5-path\u6A21\u5757","link":"#_5-path\u6A21\u5757","children":[]},{"level":2,"title":"6 .\u5355\u5B57\u8282\u7F16\u7801","slug":"_6-\u5355\u5B57\u8282\u7F16\u7801","link":"#_6-\u5355\u5B57\u8282\u7F16\u7801","children":[]},{"level":2,"title":"7. http\u6A21\u5757","slug":"_7-http\u6A21\u5757","link":"#_7-http\u6A21\u5757","children":[]},{"level":2,"title":"8. \u8FDB\u7A0B\u7BA1\u7406","slug":"_8-\u8FDB\u7A0B\u7BA1\u7406","link":"#_8-\u8FDB\u7A0B\u7BA1\u7406","children":[{"level":3,"title":"\u5E94\u7528\u573A\u666F","slug":"\u5E94\u7528\u573A\u666F","link":"#\u5E94\u7528\u573A\u666F","children":[]}]},{"level":2,"title":"9. \u5F02\u6B65\u7F16\u7A0B","slug":"_9-\u5F02\u6B65\u7F16\u7A0B","link":"#_9-\u5F02\u6B65\u7F16\u7A0B","children":[{"level":3,"title":"\u57DF\uFF08domain\uFF09","slug":"\u57DF-domain","link":"#\u57DF-domain","children":[]},{"level":3,"title":"\u6CE8\u610F\u70B9 \u26A0\uFE0F","slug":"\u6CE8\u610F\u70B9-\u26A0\uFE0F","link":"#\u6CE8\u610F\u70B9-\u26A0\uFE0F","children":[]}]}],"relativePath":"pages/node/index.md"}'),r={name:"pages/node/index.md"},D=a(`

    node \u76F8\u5173

    \u{1F4D6} Node.js \u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5

    \u{1F680} 7 \u5929\u5B66\u4F1A node.js

    \u{1F525} node \u5E38\u7528

    1. process\u5168\u5C40\u53D8\u91CF

    • process\uFF1A\u4E00\u4E2A\u5168\u5C40\u53D8\u91CF\uFF0C\u63D0\u4F9B\u4E86\u6709\u5173\u5F53\u524D Node.js \u8FDB\u7A0B\u7684\u4FE1\u606F\u5E76\u5BF9\u5176\u8FDB\u884C\u63A7\u5236
    • \u7531\u4E8E JavaScript \u662F\u4E00\u4E2A\u5355\u7EBF\u7A0B\u8BED\u8A00\uFF0C\u6240\u4EE5\u901A\u8FC7 node xxx \u542F\u52A8\u4E00\u4E2A\u6587\u4EF6\u540E\uFF0C\u53EA\u6709\u4E00\u6761\u4E3B\u7EBF\u7A0B
    process\u5E38\u89C1\u5C5E\u6027
    • process.env\uFF1A\u73AF\u5883\u53D8\u91CF\uFF0C\u4F8B\u5982\u901A\u8FC7 \`process.env.NODE_ENV \u83B7\u53D6\u4E0D\u540C\u73AF\u5883\u9879\u76EE\u914D\u7F6E\u4FE1\u606F
    • process.nextTick\uFF1A\u8FD9\u4E2A\u5728\u8C08\u53CA EventLoop \u65F6\u7ECF\u5E38\u4E3A\u4F1A\u63D0\u5230
    • process.pid\uFF1A\u83B7\u53D6\u5F53\u524D\u8FDB\u7A0B id
    • process.ppid\uFF1A\u5F53\u524D\u8FDB\u7A0B\u5BF9\u5E94\u7684\u7236\u8FDB\u7A0B
    • process.cwd()\uFF1A\u83B7\u53D6\u5F53\u524D\u8FDB\u7A0B\u5DE5\u4F5C\u76EE\u5F55\uFF0C
    • process.platform\uFF1A\u83B7\u53D6\u5F53\u524D\u8FDB\u7A0B\u8FD0\u884C\u7684\u64CD\u4F5C\u7CFB\u7EDF\u5E73\u53F0
    • process.uptime()\uFF1A\u5F53\u524D\u8FDB\u7A0B\u5DF2\u8FD0\u884C\u65F6\u95F4\uFF0C\u4F8B\u5982\uFF1Apm2 \u5B88\u62A4\u8FDB\u7A0B\u7684 uptime \u503C
    • \u8FDB\u7A0B\u4E8B\u4EF6\uFF1Aprocess.on(\u2018uncaughtException\u2019,cb) \u6355\u83B7\u5F02\u5E38\u4FE1\u606F\u3001 process.on(\u2018exit\u2019,cb\uFF09\u8FDB\u7A0B\u63A8\u51FA\u76D1\u542C
    • \u4E09\u4E2A\u6807\u51C6\u6D41\uFF1Aprocess.stdout \u6807\u51C6\u8F93\u51FA\u3001 process.stdin \u6807\u51C6\u8F93\u5165\u3001 process.stderr \u6807\u51C6\u9519\u8BEF\u8F93\u51FA
    • process.title \u6307\u5B9A\u8FDB\u7A0B\u540D\u79F0\uFF0C\u6709\u7684\u65F6\u5019\u9700\u8981\u7ED9\u8FDB\u7A0B\u6307\u5B9A\u4E00\u4E2A\u540D\u79F0

    process\u5E38\u89C1\u65B9\u6CD5

    • process.argv()\uFF1A\u5728\u7EC8\u7AEF\u901A\u8FC7 node \u547D\u4EE4\u6267\u884C\u65F6\uFF0C\u83B7\u53D6\u547D\u4EE4\u884C\u53C2\u6570\uFF0C\u8FD4\u56DE\u503C\u662F\u4E00\u4E2A\u6570\u7EC4

      - [0] node\u8DEF\u5F84 \uFF08\u4E00\u822C\u7528\u4E0D\u5230\uFF09
       - [1] \u5F53\u524D\u6267\u884C\u7684\u6587\u4EF6\u8DEF\u5F84 \uFF08\u4E00\u822C\u7528\u4E0D\u5230\uFF09
       - 2-n : \u53C2\u6570 \uFF08\u4E00\u822C\u90FD\u8FD9\u6837 process.argv.slice(2) \u62FF\u547D\u4EE4\u884C\u8F93\u5165\u7684\u53C2\u6570\uFF09
       
    • process.cwd()\uFF1A\u8FD4\u56DE\u5F53\u524D Node \u8FDB\u7A0B\u6267\u884C\u7684\u76EE\u5F55

    2. cp -r source/* target \u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4

    • \u7EC8\u7AEF\u4E0B\u901A\u8FC7 cp -r source/* target \u53EF\u4EE5\u5FEB\u901F\u5B9E\u73B0\u76EE\u5F55\u7684\u62F7\u8D1D source\uFF1A\u6E90\u76EE\u5F55\uFF0Ctarget\uFF1A\u76EE\u6807\u76EE\u5F55
    js
      cp -r demo demo1 // \u5C06 demo \u76EE\u5F55 \u62F7\u8D1D\u4E00\u4EFD\u5230 demo1 \uFF0C\u6CA1\u6709\u5C31\u65B0\u5EFA
    @@ -21,7 +21,7 @@ import{_ as o,h as p,o as e,c as t,b as s,g as c,i as n,a}from"./app.cac277bf.js
         "name": "cat", // \u5305\u540D\uFF0C\u5728npm\u4E0A\u5FC5\u987B\u552F\u4E00
         "main": "./lib/main.js" // \u5165\u53E3\u4F4D\u7F6E
     }
    -

    4. fs\u6A21\u5757

    fs\u6A21\u5757

    • \u5F15\u5165 const fs = require('fs')

    • fs.readFileSync(\u6587\u4EF6\u8DEF\u5F84,options) \uFF1A\u4ECE\u6E90\u8DEF\u5F84\u8BFB\u53D6\u6587\u4EF6\u5185\u5BB9

    • fs.writeFileSync(\u76EE\u6807\u6587\u4EF6\u8DEF\u5F84\uFF08\u65E0\u65B0\u5EFA\uFF09,\u5199\u5165\u6587\u4EF6,options)\uFF1A\u5199\u5165\u6587\u4EF6

    • fs.readdirSync(dir) \u8BFB\u53D6\u76EE\u5F55\u5185\u5BB9

    • fs.createReadStream()\uFF1A\u521B\u5EFA\u4E00\u4E2A\u6E90\u6587\u4EF6\u7684\u53EA\u8BFB\u7684\u6570\u636E\u6D41

    • fs.createWriteStream()\uFF1A\u521B\u5EFA\u4E00\u4E2A\u76EE\u6807\u6587\u4EF6\u7684\u53EA\u5199\u6570\u636E\u6D41

    • .pipe\u8FDB\u884C\u8FDE\u63A5\uFF1Ajs fs.createReadStream(src).pipe(fs.createWriteStream(dst));

    • \u6587\u4EF6\u5C5E\u6027\u8BFB\u5199\u3002

    \u5176\u4E2D\u5E38\u7528\u7684\u6709fs.stat\u3001fs.chmod\u3001fs.chown\u7B49\u7B49\u3002

    • \u6587\u4EF6\u5185\u5BB9\u8BFB\u5199\u3002

    \u5176\u4E2D\u5E38\u7528\u7684\u6709fs.readFile\u3001fs.readdir\u3001fs.writeFile\u3001fs.mkdir\u7B49\u7B49\u3002

    • \u5E95\u5C42\u6587\u4EF6\u64CD\u4F5C\u3002

    \u5176\u4E2D\u5E38\u7528\u7684\u6709fs.open\u3001fs.read\u3001fs.write\u3001fs.close\u7B49\u7B49\u3002

    fs.stat(), fs.statsync() : \u83B7\u53D6\u6587\u4EF6\u4FE1\u606F\u72B6\u6001
    1. \u5F02\u6B65\u65B9\u6CD5 fs.stat() fs.stat(path,callback)\uFF0Cpath \u8868\u793A\u6587\u4EF6\u8DEF\u5F84\uFF1B callback \u662F\u6307\u56DE\u8C03\u51FD\u6570\uFF0C\u6709\u4E24\u4E2A\u53C2\u6570\uFF1A(err,stats)\uFF0C\u5176\u4E2D stats \u662F fs.stat \u7684\u5B9E\u4F8B\uFF1B
    2. \u540C\u6B65\u65B9\u6CD5 fs.statsync() fs.statsync(path),\u53EA\u63A5\u6536\u4E00\u4E2A path \u53D8\u91CF\uFF0Cfs.statSync(path)\u5176\u5B9E\u662F\u4E00\u4E2A fs.stats \u7684\u4E00\u4E2A\u5B9E\u4F8B

    \u5E38\u7528\u7684\u65B9\u6CD5\uFF1A

    1. stats.isFile(): \u5982\u679C\u662F\u6587\u4EF6\u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    2. stats.isDirectiory(): \u5982\u679C\u662F\u76EE\u5F55\u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    3. stats.isBlockDevice(): \u5982\u679C\u662F\u5757\u8BBE\u5907\u5219\u8FD4\u56DE true\uFF0C\u5426\u5219\u8FD4\u56DE false;

    4. stats.isCharacterDevice(): \u5982\u679C\u662F\u5B57\u7B26\u8BBE\u5907\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    5. stats.isSymbolicLink(): \u5982\u679C\u662F\u8F6F\u94FE\u63A5\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    6. stats.isFIFO(): \u5982\u679C\u662F FIFO,\u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false.FIFO \u662F UNIX \u4E2D\u7684\u4E00\u79CD\u7279\u6B8A\u7C7B\u578B\u7684\u547D\u4EE4\u7BA1\u9053\uFF1B

    7. stats.isSocket(): \u5982\u679C\u662F Socket \u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    8. stats.size(): \u6587\u4EF6\u7684\u5927\u5C0F\uFF08\u4EE5\u5B57\u8282\u4E3A\u5355\u4F4D\uFF09\u3002

    5. path\u6A21\u5757

    `,23),F={class:"tip custom-block"},y=s("p",{class:"custom-block-title"},"path",-1),i=s("p",null,[s("code",null,"path.normalize()"),n(": \u5C06\u4F20\u5165\u7684\u8DEF\u5F84\u8F6C\u6362\u4E3A"),s("strong",null,"\u6807\u51C6\u8DEF\u5F84"),n("\uFF0C"),s("strong",null,"\u89E3\u6790"),n("\u8DEF\u5F84\u4E2D\u7684"),s("code",null,"."),n("\u4E0E"),s("code",null,".."),n("\uFF0C\u8FD8\u80FD"),s("strong",null,"\u53BB\u6389"),n("\u591A\u4F59\u7684\u659C\u6760\u3002")],-1),A=s("strong",null,[n("Windows \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"\\")],-1),C=s("strong",null,[n("Linux \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"/")],-1),d=s("code",null,"/",-1),u=s("strong",null,[s("code",null,".replace(/\\\\/g, '/')")],-1),h=a(`
    js
    path.normalize('foo//baz//../bar') ==> "foo/bar"
    +

    4. fs\u6A21\u5757

    fs\u6A21\u5757

    • \u5F15\u5165 const fs = require('fs')

    • fs.readFileSync(\u6587\u4EF6\u8DEF\u5F84,options) \uFF1A\u4ECE\u6E90\u8DEF\u5F84\u8BFB\u53D6\u6587\u4EF6\u5185\u5BB9

    • fs.writeFileSync(\u76EE\u6807\u6587\u4EF6\u8DEF\u5F84\uFF08\u65E0\u65B0\u5EFA\uFF09,\u5199\u5165\u6587\u4EF6,options)\uFF1A\u5199\u5165\u6587\u4EF6

    • fs.readdirSync(dir) \u8BFB\u53D6\u76EE\u5F55\u5185\u5BB9

    • fs.existsSync(path) \u5982\u679C\u8DEF\u5F84\u5B58\u5728\u5219\u8FD4\u56DE true\uFF0C\u5426\u5219\u8FD4\u56DE false

    • fs.createReadStream()\uFF1A\u521B\u5EFA\u4E00\u4E2A\u6E90\u6587\u4EF6\u7684\u53EA\u8BFB\u7684\u6570\u636E\u6D41

    • fs.createWriteStream()\uFF1A\u521B\u5EFA\u4E00\u4E2A\u76EE\u6807\u6587\u4EF6\u7684\u53EA\u5199\u6570\u636E\u6D41

    • .pipe\u8FDB\u884C\u8FDE\u63A5\uFF1Ajs fs.createReadStream(src).pipe(fs.createWriteStream(dst));

    • \u6587\u4EF6\u5C5E\u6027\u8BFB\u5199\u3002

    \u5176\u4E2D\u5E38\u7528\u7684\u6709fs.stat\u3001fs.chmod\u3001fs.chown\u7B49\u7B49\u3002

    • \u6587\u4EF6\u5185\u5BB9\u8BFB\u5199\u3002

    \u5176\u4E2D\u5E38\u7528\u7684\u6709fs.readFile\u3001fs.readdir\u3001fs.writeFile\u3001fs.mkdir\u7B49\u7B49\u3002

    • \u5E95\u5C42\u6587\u4EF6\u64CD\u4F5C\u3002

    \u5176\u4E2D\u5E38\u7528\u7684\u6709fs.open\u3001fs.read\u3001fs.write\u3001fs.close\u7B49\u7B49\u3002

    fs.stats(), fs.statsync() : \u83B7\u53D6\u6587\u4EF6\u4FE1\u606F\u72B6\u6001
    1. \u5F02\u6B65\u65B9\u6CD5 fs.stat() fs.stat(path,callback)\uFF0Cpath \u8868\u793A\u6587\u4EF6\u8DEF\u5F84\uFF1B callback \u662F\u6307\u56DE\u8C03\u51FD\u6570\uFF0C\u6709\u4E24\u4E2A\u53C2\u6570\uFF1A(err,stats)\uFF0C\u5176\u4E2D stats \u662F fs.stat \u7684\u5B9E\u4F8B\uFF1B
    2. \u540C\u6B65\u65B9\u6CD5 fs.statsync() fs.statsync(path),\u53EA\u63A5\u6536\u4E00\u4E2A path \u53D8\u91CF\uFF0Cfs.statSync(path)\u5176\u5B9E\u662F\u4E00\u4E2A fs.stats \u7684\u4E00\u4E2A\u5B9E\u4F8B

    \u5E38\u7528\u7684\u65B9\u6CD5\uFF1A

    1. stats.isFile(): \u5982\u679C\u662F\u6587\u4EF6\u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    2. stats.isDirectiory(): \u5982\u679C\u662F\u76EE\u5F55\u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    3. stats.isBlockDevice(): \u5982\u679C\u662F\u5757\u8BBE\u5907\u5219\u8FD4\u56DE true\uFF0C\u5426\u5219\u8FD4\u56DE false;

    4. stats.isCharacterDevice(): \u5982\u679C\u662F\u5B57\u7B26\u8BBE\u5907\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    5. stats.isSymbolicLink(): \u5982\u679C\u662F\u8F6F\u94FE\u63A5\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    6. stats.isFIFO(): \u5982\u679C\u662F FIFO,\u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false.FIFO \u662F UNIX \u4E2D\u7684\u4E00\u79CD\u7279\u6B8A\u7C7B\u578B\u7684\u547D\u4EE4\u7BA1\u9053\uFF1B

    7. stats.isSocket(): \u5982\u679C\u662F Socket \u5219\u8FD4\u56DE true,\u5426\u5219\u8FD4\u56DE false;

    8. stats.size(): \u6587\u4EF6\u7684\u5927\u5C0F\uFF08\u4EE5\u5B57\u8282\u4E3A\u5355\u4F4D\uFF09\u3002

    5. path\u6A21\u5757

    `,25),F={class:"tip custom-block"},y=s("p",{class:"custom-block-title"},"path",-1),i=s("p",null,[s("code",null,"path.normalize()"),n(": \u5C06\u4F20\u5165\u7684\u8DEF\u5F84\u8F6C\u6362\u4E3A"),s("strong",null,"\u6807\u51C6\u8DEF\u5F84"),n("\uFF0C"),s("strong",null,"\u89E3\u6790"),n("\u8DEF\u5F84\u4E2D\u7684"),s("code",null,"."),n("\u4E0E"),s("code",null,".."),n("\uFF0C\u8FD8\u80FD"),s("strong",null,"\u53BB\u6389"),n("\u591A\u4F59\u7684\u659C\u6760\u3002")],-1),A=s("strong",null,[n("Windows \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"\\")],-1),C=s("strong",null,[n("Linux \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"/")],-1),d=s("code",null,"/",-1),u=s("strong",null,[s("code",null,".replace(/\\\\/g, '/')")],-1),h=a(`
    js
    path.normalize('foo//baz//../bar') ==> "foo/bar"
     
    `,1),g=a(`
  • path.join()\uFF1A\u5C06\u4F20\u5165\u7684\u591A\u4E2A\u8DEF\u5F84\u62FC\u63A5\u4E3A\u6807\u51C6\u8DEF\u5F84\u3002\u8BE5\u65B9\u6CD5\u53EF\u907F\u514D\u624B\u5DE5\u62FC\u63A5\u8DEF\u5F84\u5B57\u7B26\u4E32\u7684\u7E41\u7410\uFF0C\u5E76\u4E14\u80FD\u5728\u4E0D\u540C\u7CFB\u7EDF\u4E0B\u6B63\u786E\u4F7F\u7528\u76F8\u5E94\u7684\u8DEF\u5F84\u5206\u9694\u7B26.

    js
    path.join("foo/", "baz/", "../bar"); // => "foo/bar"
     
  • path.extname()\uFF1A\u8FD4\u56DE path \u7684\u6269\u5C55\u540D\uFF0C\u5373 path \u7684\u6700\u540E\u4E00\u90E8\u5206\u4E2D\u4ECE\u6700\u540E\u4E00\u6B21\u51FA\u73B0\u7684 .\uFF08\u53E5\u70B9\uFF09\u5B57\u7B26\u5230\u5B57\u7B26\u4E32\u7684\u7ED3\u5C3E

    js
    path.extname("foo/bar.js"); // => ".js"
     path.extname("index.html"); // => '.html'
    @@ -45,7 +45,7 @@ import{_ as o,h as p,o as e,c as t,b as s,g as c,i as n,a}from"./app.cac277bf.js
       // ...
       process.exit(1);
     }
    -

    3. \u5982\u4F55\u63A7\u5236\u8F93\u5165\u8F93\u51FA

    NodeJS \u7A0B\u5E8F\u7684\u6807\u51C6\u8F93\u5165\u6D41\uFF08stdin\uFF09\u3001\u4E00\u4E2A\u6807\u51C6\u8F93\u51FA\u6D41\uFF08stdout\uFF09\u3001\u4E00\u4E2A**\u6807\u51C6\u9519\u8BEF\u6D41\uFF08stderr\uFF09**\u5206\u522B\u5BF9\u5E94 process.stdin\u3001process.stdout \u548C process.stderr\uFF0C\u7B2C\u4E00\u4E2A\u662F\u53EA\u8BFB\u6570\u636E\u6D41\uFF0C\u540E\u8FB9\u4E24\u4E2A\u662F\u53EA\u5199\u6570\u636E\u6D41\uFF0C\u5BF9\u5B83\u4EEC\u7684\u64CD\u4F5C\u6309\u7167\u5BF9\u6570\u636E\u6D41\u7684\u64CD\u4F5C\u65B9\u5F0F\u5373\u53EF\u3002\u4F8B\u5982\uFF0Cconsole.log \u53EF\u4EE5\u6309\u7167\u4EE5\u4E0B\u65B9\u5F0F\u5B9E\u73B0\u3002

    js
     function log(){
    +

    3. \u5982\u4F55\u63A7\u5236\u8F93\u5165\u8F93\u51FA

    NodeJS \u7A0B\u5E8F\u7684\u6807\u51C6\u8F93\u5165\u6D41\uFF08stdin\uFF09\u3001\u4E00\u4E2A\u6807\u51C6\u8F93\u51FA\u6D41\uFF08stdout\uFF09\u3001\u4E00\u4E2A \u6807\u51C6\u9519\u8BEF\u6D41(stderr)\u3001\u5206\u522B\u5BF9\u5E94 process.stdin\u3001process.stdout \u548C process.stderr\uFF0C\u7B2C\u4E00\u4E2A\u662F\u53EA\u8BFB\u6570\u636E\u6D41\uFF0C\u540E\u8FB9\u4E24\u4E2A\u662F\u53EA\u5199\u6570\u636E\u6D41\uFF0C\u5BF9\u5B83\u4EEC\u7684\u64CD\u4F5C\u6309\u7167\u5BF9\u6570\u636E\u6D41\u7684\u64CD\u4F5C\u65B9\u5F0F\u5373\u53EF\u3002\u4F8B\u5982\uFF0Cconsole.log \u53EF\u4EE5\u6309\u7167\u4EE5\u4E0B\u65B9\u5F0F\u5B9E\u73B0\u3002

    js
     function log(){
       process.stdout.write(
               util.format.apply(util, arguments) + '\\n');
       )
    @@ -136,4 +136,4 @@ import{_ as o,h as p,o as e,c as t,b as s,g as c,i as n,a}from"./app.cac277bf.js
       response.writeHead(500);
       response.end();
     });
    -

    \u6CE8\u610F\u70B9 \u26A0\uFE0F

    • \u5B98\u65B9\u5EFA\u8BAE\u65E0\u8BBA\u662F\u901A\u8FC7process\u8FD8\u662Fdomian\u5904\u7406\u5F02\u5E38\u540E\u90FD\u8981\u91CD\u542F\u7A0B\u5E8F\uFF0C\u56E0\u4E3A\u5904\u7406\u5F02\u5E38\u540E\u7684\u7A0B\u5E8F\u5904\u4E8E\u4E00\u79CD\u4E0D\u786E\u5B9A\u7684\u8FD0\u884C\u72B6\u6001\uFF0C\u53EF\u80FD\u5BFC\u81F4\u5185\u5B58\u6CC4\u6F0F\u6216\u8005\u8868\u73B0\u7684\u5F88\u5947\u602A
    • JS \u672C\u8EAB\u7684 throw..try..catch \u5F02\u5E38\u5904\u7406\u673A\u5236\u5E76\u4E0D\u4F1A\u5BFC\u81F4\u5185\u5B58\u6CC4\u6F0F\uFF0C\u4E5F\u4E0D\u4F1A\u8BA9\u7A0B\u5E8F\u7684\u6267\u884C\u7ED3\u679C\u51FA\u4E4E\u610F\u6599\uFF0C\u4F46 NodeJS \u5E76\u4E0D\u662F\u5B58\u7CB9\u7684 JS\u3002NodeJS \u91CC\u5927\u91CF\u7684 API \u5185\u90E8\u662F\u7528 C/C++\u5B9E\u73B0\u7684\uFF0C\u56E0\u6B64 NodeJS \u7A0B\u5E8F\u7684\u8FD0\u884C\u8FC7\u7A0B\u4E2D\uFF0C\u4EE3\u7801\u6267\u884C\u8DEF\u5F84\u7A7F\u68AD\u4E8E JS \u5F15\u64CE\u5185\u90E8\u548C\u5916\u90E8\uFF0C\u800C JS \u7684\u5F02\u5E38\u629B\u51FA\u673A\u5236\u53EF\u80FD\u4F1A\u6253\u65AD\u6B63\u5E38\u7684\u4EE3\u7801\u6267\u884C\u6D41\u7A0B\uFF0C\u5BFC\u81F4 C/C++\u90E8\u5206\u7684\u4EE3\u7801\u8868\u73B0\u5F02\u5E38\uFF0C\u8FDB\u800C\u5BFC\u81F4\u5185\u5B58\u6CC4\u6F0F\u7B49\u95EE\u9898
    `,38);function E(m,f,b,q,v,k){const l=p("MyText");return e(),t("div",null,[D,s("div",F,[y,s("ul",null,[s("li",null,[i,c(l,{text:"\u6CE8\u610F\uFF1A"}),n("\u6807\u51C6\u5316\u4E4B\u540E\u7684\u8DEF\u5F84\u91CC\u7684\u659C\u6760\u5728 "),A,n(" \uFF0C\u800C\u5728"),C,n("\u3002\u5982\u679C\u60F3\u4FDD\u8BC1\u4EFB\u4F55\u7CFB\u7EDF\u4E0B\u90FD\u4F7F\u7528"),d,n("\u4F5C\u4E3A\u8DEF\u5F84\u5206\u9694\u7B26\u7684\u8BDD\uFF0C\u9700\u8981\u7528 "),u,n(" \u518D\u66FF\u6362\u4E00\u4E0B\u6807\u51C6\u8DEF\u5F84\u3002"),h]),g])]),_])}const S=o(r,[["render",E]]);export{x as __pageData,S as default}; +

\u6CE8\u610F\u70B9 \u26A0\uFE0F

  • \u5B98\u65B9\u5EFA\u8BAE\u65E0\u8BBA\u662F\u901A\u8FC7process\u8FD8\u662Fdomian\u5904\u7406\u5F02\u5E38\u540E\u90FD\u8981\u91CD\u542F\u7A0B\u5E8F\uFF0C\u56E0\u4E3A\u5904\u7406\u5F02\u5E38\u540E\u7684\u7A0B\u5E8F\u5904\u4E8E\u4E00\u79CD\u4E0D\u786E\u5B9A\u7684\u8FD0\u884C\u72B6\u6001\uFF0C\u53EF\u80FD\u5BFC\u81F4\u5185\u5B58\u6CC4\u6F0F\u6216\u8005\u8868\u73B0\u7684\u5F88\u5947\u602A
  • JS \u672C\u8EAB\u7684 throw..try..catch \u5F02\u5E38\u5904\u7406\u673A\u5236\u5E76\u4E0D\u4F1A\u5BFC\u81F4\u5185\u5B58\u6CC4\u6F0F\uFF0C\u4E5F\u4E0D\u4F1A\u8BA9\u7A0B\u5E8F\u7684\u6267\u884C\u7ED3\u679C\u51FA\u4E4E\u610F\u6599\uFF0C\u4F46 NodeJS \u5E76\u4E0D\u662F\u5B58\u7CB9\u7684 JS\u3002NodeJS \u91CC\u5927\u91CF\u7684 API \u5185\u90E8\u662F\u7528 C/C++\u5B9E\u73B0\u7684\uFF0C\u56E0\u6B64 NodeJS \u7A0B\u5E8F\u7684\u8FD0\u884C\u8FC7\u7A0B\u4E2D\uFF0C\u4EE3\u7801\u6267\u884C\u8DEF\u5F84\u7A7F\u68AD\u4E8E JS \u5F15\u64CE\u5185\u90E8\u548C\u5916\u90E8\uFF0C\u800C JS \u7684\u5F02\u5E38\u629B\u51FA\u673A\u5236\u53EF\u80FD\u4F1A\u6253\u65AD\u6B63\u5E38\u7684\u4EE3\u7801\u6267\u884C\u6D41\u7A0B\uFF0C\u5BFC\u81F4 C/C++\u90E8\u5206\u7684\u4EE3\u7801\u8868\u73B0\u5F02\u5E38\uFF0C\u8FDB\u800C\u5BFC\u81F4\u5185\u5B58\u6CC4\u6F0F\u7B49\u95EE\u9898
`,38);function E(f,m,b,q,v,k){const l=p("MyText");return e(),t("div",null,[D,s("div",F,[y,s("ul",null,[s("li",null,[i,c(l,{text:"\u6CE8\u610F\uFF1A"}),n("\u6807\u51C6\u5316\u4E4B\u540E\u7684\u8DEF\u5F84\u91CC\u7684\u659C\u6760\u5728 "),A,n(" \uFF0C\u800C\u5728"),C,n("\u3002\u5982\u679C\u60F3\u4FDD\u8BC1\u4EFB\u4F55\u7CFB\u7EDF\u4E0B\u90FD\u4F7F\u7528"),d,n("\u4F5C\u4E3A\u8DEF\u5F84\u5206\u9694\u7B26\u7684\u8BDD\uFF0C\u9700\u8981\u7528 "),u,n(" \u518D\u66FF\u6362\u4E00\u4E0B\u6807\u51C6\u8DEF\u5F84\u3002"),h]),g])]),_])}const S=o(r,[["render",E]]);export{x as __pageData,S as default}; diff --git a/assets/pages_node_index.md.5f123883.lean.js b/assets/pages_node_index.md.5f123883.lean.js new file mode 100644 index 0000000..96974b7 --- /dev/null +++ b/assets/pages_node_index.md.5f123883.lean.js @@ -0,0 +1 @@ +import{_ as o,k as p,o as e,c as t,b as s,g as c,j as n,a}from"./app.88185e12.js";const x=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"node \u76F8\u5173","slug":"node-\u76F8\u5173","link":"#node-\u76F8\u5173","children":[]},{"level":2,"title":"\u{1F4D6} Node.js \u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","slug":"\u{1F4D6}-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","link":"#\u{1F4D6}-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","children":[]},{"level":2,"title":"\u{1F680} 7 \u5929\u5B66\u4F1A node.js","slug":"\u{1F680}-7-\u5929\u5B66\u4F1A-node-js","link":"#\u{1F680}-7-\u5929\u5B66\u4F1A-node-js","children":[]},{"level":2,"title":"\u{1F525} node \u5E38\u7528","slug":"\u{1F525}-node-\u5E38\u7528","link":"#\u{1F525}-node-\u5E38\u7528","children":[{"level":3,"title":"1. process\u5168\u5C40\u53D8\u91CF","slug":"_1-process\u5168\u5C40\u53D8\u91CF","link":"#_1-process\u5168\u5C40\u53D8\u91CF","children":[]},{"level":3,"title":"2. cp -r source/* target \u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","slug":"_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","link":"#_2-cp-r-source-target-\u62F7\u8D1D\u76EE\u5F55\u547D\u4EE4","children":[]}]},{"level":2,"title":"1. \u57FA\u672C\u4FE1\u606F","slug":"_1-\u57FA\u672C\u4FE1\u606F","link":"#_1-\u57FA\u672C\u4FE1\u606F","children":[]},{"level":2,"title":"2. \u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","slug":"_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","link":"#_2-\u6A21\u5757\u8DEF\u5F84\u89E3\u6790\u89C4\u5219","children":[]},{"level":2,"title":"3. \u5305package","slug":"_3-\u5305package","link":"#_3-\u5305package","children":[]},{"level":2,"title":"4. fs\u6A21\u5757","slug":"_4-fs\u6A21\u5757","link":"#_4-fs\u6A21\u5757","children":[]},{"level":2,"title":"5. path\u6A21\u5757","slug":"_5-path\u6A21\u5757","link":"#_5-path\u6A21\u5757","children":[]},{"level":2,"title":"6 .\u5355\u5B57\u8282\u7F16\u7801","slug":"_6-\u5355\u5B57\u8282\u7F16\u7801","link":"#_6-\u5355\u5B57\u8282\u7F16\u7801","children":[]},{"level":2,"title":"7. http\u6A21\u5757","slug":"_7-http\u6A21\u5757","link":"#_7-http\u6A21\u5757","children":[]},{"level":2,"title":"8. \u8FDB\u7A0B\u7BA1\u7406","slug":"_8-\u8FDB\u7A0B\u7BA1\u7406","link":"#_8-\u8FDB\u7A0B\u7BA1\u7406","children":[{"level":3,"title":"\u5E94\u7528\u573A\u666F","slug":"\u5E94\u7528\u573A\u666F","link":"#\u5E94\u7528\u573A\u666F","children":[]}]},{"level":2,"title":"9. \u5F02\u6B65\u7F16\u7A0B","slug":"_9-\u5F02\u6B65\u7F16\u7A0B","link":"#_9-\u5F02\u6B65\u7F16\u7A0B","children":[{"level":3,"title":"\u57DF\uFF08domain\uFF09","slug":"\u57DF-domain","link":"#\u57DF-domain","children":[]},{"level":3,"title":"\u6CE8\u610F\u70B9 \u26A0\uFE0F","slug":"\u6CE8\u610F\u70B9-\u26A0\uFE0F","link":"#\u6CE8\u610F\u70B9-\u26A0\uFE0F","children":[]}]}],"relativePath":"pages/node/index.md"}'),r={name:"pages/node/index.md"},D=a("",25),F={class:"tip custom-block"},y=s("p",{class:"custom-block-title"},"path",-1),i=s("p",null,[s("code",null,"path.normalize()"),n(": \u5C06\u4F20\u5165\u7684\u8DEF\u5F84\u8F6C\u6362\u4E3A"),s("strong",null,"\u6807\u51C6\u8DEF\u5F84"),n("\uFF0C"),s("strong",null,"\u89E3\u6790"),n("\u8DEF\u5F84\u4E2D\u7684"),s("code",null,"."),n("\u4E0E"),s("code",null,".."),n("\uFF0C\u8FD8\u80FD"),s("strong",null,"\u53BB\u6389"),n("\u591A\u4F59\u7684\u659C\u6760\u3002")],-1),A=s("strong",null,[n("Windows \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"\\")],-1),C=s("strong",null,[n("Linux \u7CFB\u7EDF\u4E0B\u662F"),s("code",null,"/")],-1),d=s("code",null,"/",-1),u=s("strong",null,[s("code",null,".replace(/\\\\/g, '/')")],-1),h=a("",1),g=a("",3),_=a("",38);function E(f,m,b,q,v,k){const l=p("MyText");return e(),t("div",null,[D,s("div",F,[y,s("ul",null,[s("li",null,[i,c(l,{text:"\u6CE8\u610F\uFF1A"}),n("\u6807\u51C6\u5316\u4E4B\u540E\u7684\u8DEF\u5F84\u91CC\u7684\u659C\u6760\u5728 "),A,n(" \uFF0C\u800C\u5728"),C,n("\u3002\u5982\u679C\u60F3\u4FDD\u8BC1\u4EFB\u4F55\u7CFB\u7EDF\u4E0B\u90FD\u4F7F\u7528"),d,n("\u4F5C\u4E3A\u8DEF\u5F84\u5206\u9694\u7B26\u7684\u8BDD\uFF0C\u9700\u8981\u7528 "),u,n(" \u518D\u66FF\u6362\u4E00\u4E0B\u6807\u51C6\u8DEF\u5F84\u3002"),h]),g])]),_])}const S=o(r,[["render",E]]);export{x as __pageData,S as default}; diff --git a/assets/pages_node_index.md.cd83335d.js b/assets/pages_node_index.md.cd83335d.js deleted file mode 100644 index 49bae07..0000000 --- a/assets/pages_node_index.md.cd83335d.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o as n,c as a,a as t}from"./app.cac277bf.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"node \u76F8\u5173","slug":"node-\u76F8\u5173","link":"#node-\u76F8\u5173","children":[]},{"level":2,"title":"1. Node.js \u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","slug":"_1-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","link":"#_1-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","children":[]}],"relativePath":"pages/node/index.md"}'),d={name:"pages/node/index.md"},o=t('

node \u76F8\u5173

1. Node.js \u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5

',2),r=[o];function s(_,i,c,l,h,p){return n(),a("div",null,r)}const u=e(d,[["render",s]]);export{m as __pageData,u as default}; diff --git a/assets/pages_node_index.md.cd83335d.lean.js b/assets/pages_node_index.md.cd83335d.lean.js deleted file mode 100644 index b8d69e2..0000000 --- a/assets/pages_node_index.md.cd83335d.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o as n,c as a,a as t}from"./app.cac277bf.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"node \u76F8\u5173","slug":"node-\u76F8\u5173","link":"#node-\u76F8\u5173","children":[]},{"level":2,"title":"1. Node.js \u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","slug":"_1-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","link":"#_1-node-js-\u5165\u95E8\u6307\u5357\u548C\u5B9E\u8DF5","children":[]}],"relativePath":"pages/node/index.md"}'),d={name:"pages/node/index.md"},o=t("",2),r=[o];function s(_,i,c,l,h,p){return n(),a("div",null,r)}const u=e(d,[["render",s]]);export{m as __pageData,u as default}; diff --git a/assets/pages_rollup-build_rollup.md.36a8ef50.js b/assets/pages_rollup-build_rollup.md.1efd2d0e.js similarity index 99% rename from assets/pages_rollup-build_rollup.md.36a8ef50.js rename to assets/pages_rollup-build_rollup.md.1efd2d0e.js index ab47f15..08f052a 100644 --- a/assets/pages_rollup-build_rollup.md.36a8ef50.js +++ b/assets/pages_rollup-build_rollup.md.1efd2d0e.js @@ -1,4 +1,4 @@ -import{_ as s,o,c as n,a}from"./app.cac277bf.js";const C=JSON.parse('{"title":"\u4F7F\u7528 rollup \u6253\u5305 ts \u5E76\u53D1\u5E03\u5DE5\u5177\u5305","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA .gitignore\u6587\u4EF6","slug":"_1-\u521B\u5EFA-gitignore\u6587\u4EF6","link":"#_1-\u521B\u5EFA-gitignore\u6587\u4EF6","children":[]},{"level":2,"title":"2. \u521D\u59CB\u5316\u6587\u4EF6","slug":"_2-\u521D\u59CB\u5316\u6587\u4EF6","link":"#_2-\u521D\u59CB\u5316\u6587\u4EF6","children":[]},{"level":2,"title":"3.package.json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","slug":"_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","link":"#_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u6A21\u5757\u5316","slug":"_4-\u524D\u7AEF\u6A21\u5757\u5316","link":"#_4-\u524D\u7AEF\u6A21\u5757\u5316","children":[]}],"relativePath":"pages/rollup-build/rollup.md"}'),p={name:"pages/rollup-build/rollup.md"},l=a(`

\u4F7F\u7528 rollup \u6253\u5305 ts \u5E76\u53D1\u5E03\u5DE5\u5177\u5305

1. \u521B\u5EFA .gitignore\u6587\u4EF6

touch \u6587\u4EF6\u540D\u79F0:\u521B\u5EFA\u6587\u4EF6\uFF0Cmkdir \u6587\u4EF6\u5939\u540D\u79F0:\u521B\u5EFA\u6587\u4EF6\u5939

1. touch .gitignore

  1. \u4F1A\u521B\u5EFA\u4E00\u4E2A\u7A7A\u6587\u4EF6\uFF0C
  2. \u6216\u8005\u5982\u679C\u6587\u4EF6\u786E\u5B9E\u5B58\u5728\uFF0C\u4F1A\u5C06\u4E0A\u6B21\u4FEE\u6539\u7684\u65F6\u95F4\u66F4\u65B0\u4E3A"now\u201C\u3002

2.mkdir src: \u521B\u5EFAsrc\u6587\u4EF6\u5939

2. \u521D\u59CB\u5316\u6587\u4EF6

TIP

  1. \u521D\u59CB\u5316package.json\u6587\u4EF6\uFF1Apnpm init\u3001npm init -y

  2. \u521D\u59CB\u5316typescript.json\u6587\u4EF6\uFF1Atsc --init(\u786E\u5B9A\u5DF2\u5B89\u88C5 tsc)

    -- tsc -v :\u67E5\u770B\u7248\u672C\u53F7\uFF0C

    -- npm i -g typescript\uFF1A\u5B89\u88C5 tsc

3.package.json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6

Details

name\uFF1A\u5305\u540D\uFF1B decription\uFF1A\u5305\u7684\u63CF\u8FF0\uFF0C\u5728 npm \u641C\u7D22\u91CC\u4F1A\u7528\u5230\uFF0C\u5982\u679C\u6CA1\u6709\u63D0\u4F9B\uFF0C\u4F1A\u4ECE README.md \u4E2D\u63D0\u53D6\uFF1B main\uFF1A\u5305\u7684\u5165\u53E3\u6587\u4EF6\uFF0C\u901A\u5E38\u662F CommonJS\uFF0C\u5386\u53F2\u539F\u56E0\u3002\u8FD9\u91CC\u6211\u4EEC\u5199\u4E0A ./dist/mid-index-of.common.js\uFF1B browser\uFF1A\u5305\u7528\u4E8E\u6D4F\u89C8\u5668\u65F6\u7684\u5165\u53E3\u6587\u4EF6\uFF1B module\uFF1A\u6307\u5B9A ES \u6A21\u5757\u5165\u53E3\uFF0C\u8FD9\u4E2A\u4E0D\u662F npm \u81EA\u5DF1\u7684\u5B57\u6BB5\uFF0C\u662F\u7ED9\u6253\u5305\u5DE5\u5177\u7528\u7684\u3002\u8FD9\u91CC\u6211\u4EEC\u5199\u4E0A ./dist/mid-index-of.esm.js\uFF1B types\uFF1A\u6307\u5B9A\u5305\u7684\u7C7B\u578B\u6587\u4EF6\u3002\u8FD9\u91CC\u6211\u4EEC\u5199\u4E0A./dist/index.d.ts\uFF1B keywords\uFF1A\u5173\u952E\u5B57\u6570\u7EC4\uFF0Cnpm \u641C\u7D22\u4F1A\u7528\u5230\uFF0C\u5EFA\u8BAE\u591A\u5199\u4E00\u70B9\uFF1B private\uFF1A\u662F\u5426\u4E3A\u79C1\u6709\u5305\uFF0C\u8FD9\u4E2A\u5B57\u6BB5\u8BBE\u7F6E\u4E3A true \u53EF\u4EE5\u9632\u6B62\u610F\u5916\u5C06\u79C1\u6709\u5305\u53D1\u5E03\u51FA\u53BB\uFF1B liscense\uFF1A\u5F00\u6E90\u8BB8\u53EF\u8BC1\uFF0C\u5E38\u7528 MIT\uFF1B files\uFF1A\u6307\u5B9A\u53EF\u4EE5\u88AB\u53D1\u5E03\u7684\u6587\u4EF6\uFF0C\u9ED8\u8BA4\u662F\u6240\u6709\u6587\u4EF6\u3002\u4E3A\u4E86\u51CF\u5C11\u5305\u4F53\u79EF\uFF0C\u4E0D\u52A0\u4E0A\u591A\u4F59\u7684\u6587\u4EF6\uFF0C\u8FD9\u4E2A\u662F\u4E00\u5B9A\u8981\u914D\u7F6E\u7684\u3002\u6B64\u5916\u4E00\u4E9B\u6587\u4EF6\u662F\u4E00\u5B9A\u4F1A\u5E26\u4E0A\u7684\uFF0C\u6BD4\u5982 package.json\u3001LICENSE\u3001README.md\uFF1B sideEffects\uFF1A\u5305\u662F\u5426\u6709\u526F\u4F5C\u7528\uFF0C\u6BD4\u5982\u6CE8\u5165\u5168\u5C40\u53D8\u91CF\u3002\u5982\u679C\u6CA1\u526F\u4F5C\u7528\uFF0C\u8BBE\u7F6E\u4E3A false\uFF0C\u53EF\u4EE5\u5E2E\u52A9\u6253\u5305\u5DE5\u5177\u505A tree-shaking\uFF0C\u5C06\u4E00\u4E9B\u5F15\u5165\u4E86\u4F46\u6CA1\u6709\u4F7F\u7528\u7684\u5305\u79FB\u9664\uFF1B

4. \u524D\u7AEF\u6A21\u5757\u5316

\u524D\u7AEF\u6A21\u5757\u5316\uFF1A\u5C31\u662F\u5C06\u72EC\u7ACB\u7684\u529F\u80FD\u4EE3\u7801\u5C01\u88C5\u6210\u4E00\u4E2A\u72EC\u7ACB\u7684\u6587\u4EF6\uFF0C\u5176\u4ED6\u6A21\u5757\u9700\u8981\u4F7F\u7528\uFF0C\u5728\u8FDB\u884C\u5F15\u7528\u3002

\u6A21\u5757\u5316\u5C31\u662F\u5C06\u4E00\u4E2A\u590D\u6742\u7684\u7A0B\u5E8F\u4F9D\u636E\u4E00\u5B9A\u7684\u89C4\u5219\u6216\u8005\u8BF4\u662F\u89C4\u8303\uFF0C\u5C06\u5176\u5C01\u88C5\u6210\u51E0\u4E2A\u5355\u72EC\u7684\u5757\uFF08\u8FD9\u91CC\u7684\u5757\u6307\u7684\u5C31\u662F\u6587\u4EF6\uFF09\uFF0C\u5728\u4F7F\u7528\u7684\u65F6\u5019\u5C06\u5176\u7EC4\u5408\u5728\u4E00\u8D77

\u6A21\u5757\u5316\u6709\u5229\u4E8E\u4EE3\u7801\u7684\u62C6\u5206\u548C\u67B6\u6784\u4E0A\u7684\u89E3\u8026\uFF0C\u6A21\u5757\u5316\u5728\u670D\u52A1\u7AEF\u9886\u57DF\u5DF2\u7ECF\u65E9\u5DF2\u6210\u719F\uFF0Cnodejs \u4E5F\u5DF2\u7ECF\u652F\u6301\u6A21\u5757\u5316\u3002

\u800C\u5728\u6D4F\u89C8\u5668\u4E0A\uFF0Cjs \u811A\u672C\u662F\u5F02\u6B65\u8F7D\u5165\u7684\uFF0C\u811A\u672C\u6309\u7167\u7F16\u7801\u987A\u5E8F\u4F9D\u6B21\u6267\u884C\uFF0C\u4F9D\u8D56\u5173\u7CFB\u53EA\u80FD\u6309\u7167\u7F16\u7801\u987A\u5E8F\u6765\u63A7\u5236\u3002\u56E0\u6B64\u524D\u7AEF\u65E9\u65E9\u5C31\u6709\u4E86\u6A21\u5757\u5316\u6280\u672F\u3002

\u9075\u5FAA\u89C4\u8303 require \u662F AMD \u89C4\u8303\u5F15\u5165\u65B9\u5F0F import \u662F es6 \u7684\u4E00\u4E2A\u8BED\u6CD5\u6807\u51C6\uFF0C\u5982\u679C\u8981\u517C\u5BB9\u6D4F\u89C8\u5668\u7684\u8BDD\u5FC5\u987B\u8F6C\u5316\u6210 es5 \u7684\u8BED\u6CD5

\u8C03\u7528\u65F6\u95F4 require \u662F\u8FD0\u884C\u65F6\u8C03\u7528\uFF0C\u6240\u4EE5 require \u7406\u8BBA\u4E0A\u53EF\u4EE5\u8FD0\u7528\u5728\u4EE3\u7801\u7684\u4EFB\u4F55\u5730\u65B9 import \u662F\u7F16\u8BD1\u65F6\u8C03\u7528\uFF0C\u6240\u4EE5\u5FC5\u987B\u653E\u5728\u6587\u4EF6\u5F00\u5934

\u672C\u8D28 require \u662F\u8D4B\u503C\u8FC7\u7A0B\uFF0C\u5176\u5B9E require \u7684\u7ED3\u679C\u5C31\u662F\u5BF9\u8C61\u3001\u6570\u5B57\u3001\u5B57\u7B26\u4E32\u3001\u51FD\u6570\u7B49\uFF0C\u518D\u628A require \u7684\u7ED3\u679C\u8D4B\u503C\u7ED9\u67D0\u4E2A\u53D8\u91CF

import \u662F\u89E3\u6784\u8FC7\u7A0B\uFF0C\u4F46\u662F\u76EE\u524D\u6240\u6709\u7684\u5F15\u64CE\u90FD\u8FD8\u6CA1\u6709\u5B9E\u73B0 import\uFF0C\u6211\u4EEC\u5728 node \u4E2D\u4F7F\u7528 babel \u652F\u6301 ES6\uFF0C\u4E5F\u4EC5\u4EC5\u662F\u5C06 ES6 \u8F6C\u7801\u4E3A ES5 \u518D\u6267\u884C\uFF0Cimport \u8BED\u6CD5\u4F1A\u88AB\u8F6C\u7801\u4E3A require

require / exports \u7684\u533A\u522B

  1. \u9075\u5FAA CommonJS/AMD\uFF0C\u53EA\u80FD\u5728\u8FD0\u884C\u65F6\u786E\u5B9A\u6A21\u5757\u7684\u4F9D\u8D56\u5173\u7CFB\u53CA\u8F93\u5165/\u8F93\u51FA\u7684\u53D8\u91CF\uFF0C\u65E0\u6CD5\u8FDB\u884C\u9759\u6001\u4F18\u5316\u3002

    \u7528\u6CD5\u53EA\u6709\u4EE5\u4E0B\u4E09\u79CD\u7B80\u5355\u7684\u5199\u6CD5\uFF1A

js
const fs = require('fs')
+import{_ as s,o,c as n,a}from"./app.88185e12.js";const C=JSON.parse('{"title":"\u4F7F\u7528 rollup \u6253\u5305 ts \u5E76\u53D1\u5E03\u5DE5\u5177\u5305","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA .gitignore\u6587\u4EF6","slug":"_1-\u521B\u5EFA-gitignore\u6587\u4EF6","link":"#_1-\u521B\u5EFA-gitignore\u6587\u4EF6","children":[]},{"level":2,"title":"2. \u521D\u59CB\u5316\u6587\u4EF6","slug":"_2-\u521D\u59CB\u5316\u6587\u4EF6","link":"#_2-\u521D\u59CB\u5316\u6587\u4EF6","children":[]},{"level":2,"title":"3.package.json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","slug":"_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","link":"#_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u6A21\u5757\u5316","slug":"_4-\u524D\u7AEF\u6A21\u5757\u5316","link":"#_4-\u524D\u7AEF\u6A21\u5757\u5316","children":[]}],"relativePath":"pages/rollup-build/rollup.md"}'),p={name:"pages/rollup-build/rollup.md"},l=a(`

\u4F7F\u7528 rollup \u6253\u5305 ts \u5E76\u53D1\u5E03\u5DE5\u5177\u5305

1. \u521B\u5EFA .gitignore\u6587\u4EF6

touch \u6587\u4EF6\u540D\u79F0:\u521B\u5EFA\u6587\u4EF6\uFF0Cmkdir \u6587\u4EF6\u5939\u540D\u79F0:\u521B\u5EFA\u6587\u4EF6\u5939

1. touch .gitignore

  1. \u4F1A\u521B\u5EFA\u4E00\u4E2A\u7A7A\u6587\u4EF6\uFF0C
  2. \u6216\u8005\u5982\u679C\u6587\u4EF6\u786E\u5B9E\u5B58\u5728\uFF0C\u4F1A\u5C06\u4E0A\u6B21\u4FEE\u6539\u7684\u65F6\u95F4\u66F4\u65B0\u4E3A"now\u201C\u3002

2.mkdir src: \u521B\u5EFAsrc\u6587\u4EF6\u5939

2. \u521D\u59CB\u5316\u6587\u4EF6

TIP

  1. \u521D\u59CB\u5316package.json\u6587\u4EF6\uFF1Apnpm init\u3001npm init -y

  2. \u521D\u59CB\u5316typescript.json\u6587\u4EF6\uFF1Atsc --init(\u786E\u5B9A\u5DF2\u5B89\u88C5 tsc)

    -- tsc -v :\u67E5\u770B\u7248\u672C\u53F7\uFF0C

    -- npm i -g typescript\uFF1A\u5B89\u88C5 tsc

3.package.json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6

Details

name\uFF1A\u5305\u540D\uFF1B decription\uFF1A\u5305\u7684\u63CF\u8FF0\uFF0C\u5728 npm \u641C\u7D22\u91CC\u4F1A\u7528\u5230\uFF0C\u5982\u679C\u6CA1\u6709\u63D0\u4F9B\uFF0C\u4F1A\u4ECE README.md \u4E2D\u63D0\u53D6\uFF1B main\uFF1A\u5305\u7684\u5165\u53E3\u6587\u4EF6\uFF0C\u901A\u5E38\u662F CommonJS\uFF0C\u5386\u53F2\u539F\u56E0\u3002\u8FD9\u91CC\u6211\u4EEC\u5199\u4E0A ./dist/mid-index-of.common.js\uFF1B browser\uFF1A\u5305\u7528\u4E8E\u6D4F\u89C8\u5668\u65F6\u7684\u5165\u53E3\u6587\u4EF6\uFF1B module\uFF1A\u6307\u5B9A ES \u6A21\u5757\u5165\u53E3\uFF0C\u8FD9\u4E2A\u4E0D\u662F npm \u81EA\u5DF1\u7684\u5B57\u6BB5\uFF0C\u662F\u7ED9\u6253\u5305\u5DE5\u5177\u7528\u7684\u3002\u8FD9\u91CC\u6211\u4EEC\u5199\u4E0A ./dist/mid-index-of.esm.js\uFF1B types\uFF1A\u6307\u5B9A\u5305\u7684\u7C7B\u578B\u6587\u4EF6\u3002\u8FD9\u91CC\u6211\u4EEC\u5199\u4E0A./dist/index.d.ts\uFF1B keywords\uFF1A\u5173\u952E\u5B57\u6570\u7EC4\uFF0Cnpm \u641C\u7D22\u4F1A\u7528\u5230\uFF0C\u5EFA\u8BAE\u591A\u5199\u4E00\u70B9\uFF1B private\uFF1A\u662F\u5426\u4E3A\u79C1\u6709\u5305\uFF0C\u8FD9\u4E2A\u5B57\u6BB5\u8BBE\u7F6E\u4E3A true \u53EF\u4EE5\u9632\u6B62\u610F\u5916\u5C06\u79C1\u6709\u5305\u53D1\u5E03\u51FA\u53BB\uFF1B liscense\uFF1A\u5F00\u6E90\u8BB8\u53EF\u8BC1\uFF0C\u5E38\u7528 MIT\uFF1B files\uFF1A\u6307\u5B9A\u53EF\u4EE5\u88AB\u53D1\u5E03\u7684\u6587\u4EF6\uFF0C\u9ED8\u8BA4\u662F\u6240\u6709\u6587\u4EF6\u3002\u4E3A\u4E86\u51CF\u5C11\u5305\u4F53\u79EF\uFF0C\u4E0D\u52A0\u4E0A\u591A\u4F59\u7684\u6587\u4EF6\uFF0C\u8FD9\u4E2A\u662F\u4E00\u5B9A\u8981\u914D\u7F6E\u7684\u3002\u6B64\u5916\u4E00\u4E9B\u6587\u4EF6\u662F\u4E00\u5B9A\u4F1A\u5E26\u4E0A\u7684\uFF0C\u6BD4\u5982 package.json\u3001LICENSE\u3001README.md\uFF1B sideEffects\uFF1A\u5305\u662F\u5426\u6709\u526F\u4F5C\u7528\uFF0C\u6BD4\u5982\u6CE8\u5165\u5168\u5C40\u53D8\u91CF\u3002\u5982\u679C\u6CA1\u526F\u4F5C\u7528\uFF0C\u8BBE\u7F6E\u4E3A false\uFF0C\u53EF\u4EE5\u5E2E\u52A9\u6253\u5305\u5DE5\u5177\u505A tree-shaking\uFF0C\u5C06\u4E00\u4E9B\u5F15\u5165\u4E86\u4F46\u6CA1\u6709\u4F7F\u7528\u7684\u5305\u79FB\u9664\uFF1B

4. \u524D\u7AEF\u6A21\u5757\u5316

\u524D\u7AEF\u6A21\u5757\u5316\uFF1A\u5C31\u662F\u5C06\u72EC\u7ACB\u7684\u529F\u80FD\u4EE3\u7801\u5C01\u88C5\u6210\u4E00\u4E2A\u72EC\u7ACB\u7684\u6587\u4EF6\uFF0C\u5176\u4ED6\u6A21\u5757\u9700\u8981\u4F7F\u7528\uFF0C\u5728\u8FDB\u884C\u5F15\u7528\u3002

\u6A21\u5757\u5316\u5C31\u662F\u5C06\u4E00\u4E2A\u590D\u6742\u7684\u7A0B\u5E8F\u4F9D\u636E\u4E00\u5B9A\u7684\u89C4\u5219\u6216\u8005\u8BF4\u662F\u89C4\u8303\uFF0C\u5C06\u5176\u5C01\u88C5\u6210\u51E0\u4E2A\u5355\u72EC\u7684\u5757\uFF08\u8FD9\u91CC\u7684\u5757\u6307\u7684\u5C31\u662F\u6587\u4EF6\uFF09\uFF0C\u5728\u4F7F\u7528\u7684\u65F6\u5019\u5C06\u5176\u7EC4\u5408\u5728\u4E00\u8D77

\u6A21\u5757\u5316\u6709\u5229\u4E8E\u4EE3\u7801\u7684\u62C6\u5206\u548C\u67B6\u6784\u4E0A\u7684\u89E3\u8026\uFF0C\u6A21\u5757\u5316\u5728\u670D\u52A1\u7AEF\u9886\u57DF\u5DF2\u7ECF\u65E9\u5DF2\u6210\u719F\uFF0Cnodejs \u4E5F\u5DF2\u7ECF\u652F\u6301\u6A21\u5757\u5316\u3002

\u800C\u5728\u6D4F\u89C8\u5668\u4E0A\uFF0Cjs \u811A\u672C\u662F\u5F02\u6B65\u8F7D\u5165\u7684\uFF0C\u811A\u672C\u6309\u7167\u7F16\u7801\u987A\u5E8F\u4F9D\u6B21\u6267\u884C\uFF0C\u4F9D\u8D56\u5173\u7CFB\u53EA\u80FD\u6309\u7167\u7F16\u7801\u987A\u5E8F\u6765\u63A7\u5236\u3002\u56E0\u6B64\u524D\u7AEF\u65E9\u65E9\u5C31\u6709\u4E86\u6A21\u5757\u5316\u6280\u672F\u3002

\u9075\u5FAA\u89C4\u8303 require \u662F AMD \u89C4\u8303\u5F15\u5165\u65B9\u5F0F import \u662F es6 \u7684\u4E00\u4E2A\u8BED\u6CD5\u6807\u51C6\uFF0C\u5982\u679C\u8981\u517C\u5BB9\u6D4F\u89C8\u5668\u7684\u8BDD\u5FC5\u987B\u8F6C\u5316\u6210 es5 \u7684\u8BED\u6CD5

\u8C03\u7528\u65F6\u95F4 require \u662F\u8FD0\u884C\u65F6\u8C03\u7528\uFF0C\u6240\u4EE5 require \u7406\u8BBA\u4E0A\u53EF\u4EE5\u8FD0\u7528\u5728\u4EE3\u7801\u7684\u4EFB\u4F55\u5730\u65B9 import \u662F\u7F16\u8BD1\u65F6\u8C03\u7528\uFF0C\u6240\u4EE5\u5FC5\u987B\u653E\u5728\u6587\u4EF6\u5F00\u5934

\u672C\u8D28 require \u662F\u8D4B\u503C\u8FC7\u7A0B\uFF0C\u5176\u5B9E require \u7684\u7ED3\u679C\u5C31\u662F\u5BF9\u8C61\u3001\u6570\u5B57\u3001\u5B57\u7B26\u4E32\u3001\u51FD\u6570\u7B49\uFF0C\u518D\u628A require \u7684\u7ED3\u679C\u8D4B\u503C\u7ED9\u67D0\u4E2A\u53D8\u91CF

import \u662F\u89E3\u6784\u8FC7\u7A0B\uFF0C\u4F46\u662F\u76EE\u524D\u6240\u6709\u7684\u5F15\u64CE\u90FD\u8FD8\u6CA1\u6709\u5B9E\u73B0 import\uFF0C\u6211\u4EEC\u5728 node \u4E2D\u4F7F\u7528 babel \u652F\u6301 ES6\uFF0C\u4E5F\u4EC5\u4EC5\u662F\u5C06 ES6 \u8F6C\u7801\u4E3A ES5 \u518D\u6267\u884C\uFF0Cimport \u8BED\u6CD5\u4F1A\u88AB\u8F6C\u7801\u4E3A require

require / exports \u7684\u533A\u522B

  1. \u9075\u5FAA CommonJS/AMD\uFF0C\u53EA\u80FD\u5728\u8FD0\u884C\u65F6\u786E\u5B9A\u6A21\u5757\u7684\u4F9D\u8D56\u5173\u7CFB\u53CA\u8F93\u5165/\u8F93\u51FA\u7684\u53D8\u91CF\uFF0C\u65E0\u6CD5\u8FDB\u884C\u9759\u6001\u4F18\u5316\u3002

    \u7528\u6CD5\u53EA\u6709\u4EE5\u4E0B\u4E09\u79CD\u7B80\u5355\u7684\u5199\u6CD5\uFF1A

js
const fs = require('fs')
 exports.fs = fs
 module.exports = fs
 import / export
diff --git a/assets/pages_rollup-build_rollup.md.36a8ef50.lean.js b/assets/pages_rollup-build_rollup.md.1efd2d0e.lean.js
similarity index 94%
rename from assets/pages_rollup-build_rollup.md.36a8ef50.lean.js
rename to assets/pages_rollup-build_rollup.md.1efd2d0e.lean.js
index 9bae641..0008d60 100644
--- a/assets/pages_rollup-build_rollup.md.36a8ef50.lean.js
+++ b/assets/pages_rollup-build_rollup.md.1efd2d0e.lean.js
@@ -1 +1 @@
-import{_ as s,o,c as n,a}from"./app.cac277bf.js";const C=JSON.parse('{"title":"\u4F7F\u7528 rollup \u6253\u5305 ts \u5E76\u53D1\u5E03\u5DE5\u5177\u5305","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA .gitignore\u6587\u4EF6","slug":"_1-\u521B\u5EFA-gitignore\u6587\u4EF6","link":"#_1-\u521B\u5EFA-gitignore\u6587\u4EF6","children":[]},{"level":2,"title":"2. \u521D\u59CB\u5316\u6587\u4EF6","slug":"_2-\u521D\u59CB\u5316\u6587\u4EF6","link":"#_2-\u521D\u59CB\u5316\u6587\u4EF6","children":[]},{"level":2,"title":"3.package.json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","slug":"_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","link":"#_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u6A21\u5757\u5316","slug":"_4-\u524D\u7AEF\u6A21\u5757\u5316","link":"#_4-\u524D\u7AEF\u6A21\u5757\u5316","children":[]}],"relativePath":"pages/rollup-build/rollup.md"}'),p={name:"pages/rollup-build/rollup.md"},l=a("",24),e=[l];function t(r,c,D,i,d,F){return o(),n("div",null,e)}const A=s(p,[["render",t]]);export{C as __pageData,A as default};
+import{_ as s,o,c as n,a}from"./app.88185e12.js";const C=JSON.parse('{"title":"\u4F7F\u7528 rollup \u6253\u5305 ts \u5E76\u53D1\u5E03\u5DE5\u5177\u5305","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA .gitignore\u6587\u4EF6","slug":"_1-\u521B\u5EFA-gitignore\u6587\u4EF6","link":"#_1-\u521B\u5EFA-gitignore\u6587\u4EF6","children":[]},{"level":2,"title":"2. \u521D\u59CB\u5316\u6587\u4EF6","slug":"_2-\u521D\u59CB\u5316\u6587\u4EF6","link":"#_2-\u521D\u59CB\u5316\u6587\u4EF6","children":[]},{"level":2,"title":"3.package.json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","slug":"_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","link":"#_3-package-json\u6587\u4EF6\u914D\u7F6E\u6587\u4EF6","children":[]},{"level":2,"title":"4. \u524D\u7AEF\u6A21\u5757\u5316","slug":"_4-\u524D\u7AEF\u6A21\u5757\u5316","link":"#_4-\u524D\u7AEF\u6A21\u5757\u5316","children":[]}],"relativePath":"pages/rollup-build/rollup.md"}'),p={name:"pages/rollup-build/rollup.md"},l=a("",24),e=[l];function t(r,c,D,i,d,F){return o(),n("div",null,e)}const A=s(p,[["render",t]]);export{C as __pageData,A as default};
diff --git a/assets/pages_threejs_threejs.md.6cef040c.js b/assets/pages_threejs_threejs.md.115909cd.js
similarity index 99%
rename from assets/pages_threejs_threejs.md.6cef040c.js
rename to assets/pages_threejs_threejs.md.115909cd.js
index a900147..d35a517 100644
--- a/assets/pages_threejs_threejs.md.6cef040c.js
+++ b/assets/pages_threejs_threejs.md.115909cd.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"\u521B\u5EFA 3D \u573A\u666F\u65F6\uFF0C\u552F\u4E00\u7684\u9650\u5236\u662F\u60A8\u7684\u60F3\u8C61\u529B - \u4EE5\u53CA\u60A8\u7684\u6280\u672F\u77E5\u8BC6\u6DF1\u5EA6\u3002","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6240\u6709\u6B65\u9AA4","slug":"_1-\u6240\u6709\u6B65\u9AA4","link":"#_1-\u6240\u6709\u6B65\u9AA4","children":[]},{"level":2,"title":"2. \u5206\u6A21\u5757\uFF08\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6\uFF09","slug":"_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","link":"#_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","children":[{"level":3,"title":"2.1 \u6A21\u5757\u5206\u4E3A\u4E24\u7C7B \u7EC4\u4EF6\uFF08components\uFF09\u548C \u7CFB\u7EDF\u7EA7\uFF08system)","slug":"_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","link":"#_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","children":[]},{"level":3,"title":"2.2 \u7EC4\u4EF6\uFF08components\uFF09\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F\uFF0C\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB\uFF0C","slug":"_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","link":"#_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","children":[]},{"level":3,"title":"2.3 \u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC\uFF0C\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570(Resizer)","slug":"_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","link":"#_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","children":[]}]},{"level":2,"title":"3. \u573A\u666F\u56FE","slug":"_3-\u573A\u666F\u56FE","link":"#_3-\u573A\u666F\u56FE","children":[]},{"level":2,"title":"4. \u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","slug":"_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","link":"#_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","children":[]},{"level":2,"title":"5. \u5E73\u79FB(translation) \u7F29\u653E(scale) \u65CB\u8F6C(rotation)","slug":"_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","link":"#_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","children":[]},{"level":2,"title":"6 three.js \u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528 \u5F27\u5EA6\u800C\u4E0D\u662F \u5EA6\u6570 \u6307\u5B9A\u7684\uFF0C\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE(fov)\u662F\u5EA6\u6570","slug":"_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","link":"#_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","children":[]},{"level":2,"title":"7. \u53D8\u6362\u77E9\u9635","slug":"_7-\u53D8\u6362\u77E9\u9635","link":"#_7-\u53D8\u6362\u77E9\u9635","children":[]},{"level":2,"title":"8. \u52A8\u753B\u5FAA\u73AF","slug":"_8-\u52A8\u753B\u5FAA\u73AF","link":"#_8-\u52A8\u753B\u5FAA\u73AF","children":[]},{"level":2,"title":"9. \u7EB9\u7406","slug":"_9-\u7EB9\u7406","link":"#_9-\u7EB9\u7406","children":[{"level":3,"title":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","slug":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","link":"#\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","children":[]},{"level":3,"title":"\u50CF\u7D20\u548C\u7EB9\u7D20","slug":"\u50CF\u7D20\u548C\u7EB9\u7D20","link":"#\u50CF\u7D20\u548C\u7EB9\u7D20","children":[]},{"level":3,"title":"UV \u6620\u5C04","slug":"uv-\u6620\u5C04","link":"#uv-\u6620\u5C04","children":[]}]},{"level":2,"title":"10. OrbitControls \u76F8\u673A\u63A7\u5236\u63D2\u4EF6","slug":"_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","link":"#_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","children":[{"level":3,"title":"1. \u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E#","slug":"_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","link":"#_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"2. \u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","slug":"_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","link":"#_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"3. \u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","slug":"_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","link":"#_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","children":[]},{"level":3,"title":"4. \u9500\u6BC1\u63A7\u4EF6 Controls","slug":"_4-\u9500\u6BC1\u63A7\u4EF6-controls","link":"#_4-\u9500\u6BC1\u63A7\u4EF6-controls","children":[]},{"level":3,"title":"\u4F7F\u7528 OrbitControls \u6309\u9700\u6E32\u67D3","slug":"\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","link":"#\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","children":[]},{"level":3,"title":"1. \u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","slug":"_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","link":"#_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","children":[]},{"level":3,"title":"2. \u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","slug":"_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","link":"#_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","children":[]},{"level":3,"title":"3. \u81EA\u52A8\u65CB\u8F6C\uFF1A.autoRotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5.target\u65CB\u8F6C\uFF0C\u7136\u540E .autoRotateSpeed\u63A7\u5236\u901F\u5EA6","slug":"_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","link":"#_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","children":[]},{"level":3,"title":"4. \u9650\u5236\u7F29\u653E\uFF1A\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB\uFF0C\u786E\u4FDDminDistance\u4E0D\u5C0F\u4E8E \u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxDistance\u4E0D\u5927\u4E8E \u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916\uFF0CminDistance \u5FC5\u987B\u5C0F\u4E8E maxDistance\u3002","slug":"_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","link":"#_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","children":[]},{"level":3,"title":"5. \u9650\u5236\u65CB\u8F6C\uFF1A\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C\uFF08\u65B9\u4F4D\u89D2\uFF09\u548C\u5782\u76F4\uFF08\u6781\u89D2\uFF09","slug":"_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","link":"#_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","children":[]}]}],"relativePath":"pages/threejs/threejs.md"}'),o={name:"pages/threejs/threejs.md"},e=l(`

\u521B\u5EFA 3D \u573A\u666F\u65F6\uFF0C\u552F\u4E00\u7684\u9650\u5236\u662F\u60A8\u7684\u60F3\u8C61\u529B - \u4EE5\u53CA\u60A8\u7684\u6280\u672F\u77E5\u8BC6\u6DF1\u5EA6\u3002

1. \u6240\u6709\u6B65\u9AA4

Details
  1. \u521D\u59CB\u8BBE\u7F6E
  2. \u521B\u5EFA\u573A\u666F
  3. \u521B\u5EFA\u76F8\u673A
  4. \u521B\u5EFA\u7ACB\u65B9\u4F53\u5E76\u5C06\u5176\u6DFB\u52A0\u5230\u573A\u666F\u4E2D
  5. \u521B\u5EFA\u6E32\u67D3\u5668

\u9644\u52A0\u4EFB\u52A1\uFF1A\u8BBE\u7F6E\u573A\u666F\u7684\u5927\u5C0F

  1. \u6E32\u67D3\u573A\u666F

2. \u5206\u6A21\u5757\uFF08\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6\uFF09

2.1 \u6A21\u5757\u5206\u4E3A\u4E24\u7C7B \u7EC4\u4EF6\uFF08components\uFF09\u548C \u7CFB\u7EDF\u7EA7\uFF08system)

2.2 \u7EC4\u4EF6\uFF08components\uFF09\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F\uFF0C\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB\uFF0C

2.3 \u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC\uFF0C\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570(Resizer)

3. \u573A\u666F\u56FE

  1. \u573A\u666F\u56FE\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\uFF08\u9876\u7EA7\u573A\u666F\u9664\u5916\uFF09\u53EA\u6709\u4E00\u4E2A\u7236\u5BF9\u8C61\uFF0C\u5E76\u4E14\u53EF\u4EE5\u6709\u4EFB\u610F\u6570\u91CF\u7684\u5B50\u5BF9\u8C61\u3002
  2. \u901A\u8FC7.children\u6570\u7EC4\u6765\u8BBF\u95EE\u6240\u6709\u5B50\u5BF9\u8C61\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7getObjectByName\uFF08\u6709\u540D\u79F0\u7684\u8BDD\uFF09
  3. \u56E0\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u53EA\u80FD\u6709\u4E00\u4E2A\u7236\u5BF9\u8C61\uFF0C\u6240\u4EE5\u5728\u5C06 A \u4E0B\u9762\u7684\u5B57\u5143\u7D20 a \u79FB\u52A8\u5230 B \u5BF9\u8C61\uFF0C\u90A3\u4E48 A \u5BF9\u8C61\u4F1A\u5220\u9664
  4. \u6211\u4EEC\u6700\u7EC8\u5728\u5C4F\u5E55\u4E0A\u770B\u5230\u7684\u662F\u4E16\u754C\u7A7A\u95F4\u3002

4. \u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4

\u9876\u7EA7\u573A\u666F\u5B9A\u4E49\u4E86\u4E16\u754C\u7A7A\u95F4\uFF0C\u800C\u5176\u4ED6\u6BCF\u4E2A\u5BF9\u8C61\u90FD\u5B9A\u4E49\u4E86\u81EA\u5DF1\u7684\u5C40\u90E8\u7A7A\u95F4\u3002

5. \u5E73\u79FB(translation) \u7F29\u653E(scale) \u65CB\u8F6C(rotation)

TIP

  1. \u5E73\u79FB \u548C \u7F29\u653E \u90FD\u5B58\u50A8\u4E8E Vector3 \u4E2D
  2. \u76F8\u673A\u548C\u706F\u5149\uFF08\u9664\u4E86 RectAreaLight\uFF09\u6CA1\u6709\u5927\u5C0F\uFF0C\u56E0\u6B64\u7F29\u653E\u5B83\u4EEC\u6CA1\u6709\u610F\u4E49\u3002\u66F4\u6539 camera.scale \u6216 light.scale \u5C06\u6CA1\u6709\u6548\u679C\u3002
\u5E73\u79FB(translation)
js
// translate one axis at a time
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"\u521B\u5EFA 3D \u573A\u666F\u65F6\uFF0C\u552F\u4E00\u7684\u9650\u5236\u662F\u60A8\u7684\u60F3\u8C61\u529B - \u4EE5\u53CA\u60A8\u7684\u6280\u672F\u77E5\u8BC6\u6DF1\u5EA6\u3002","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6240\u6709\u6B65\u9AA4","slug":"_1-\u6240\u6709\u6B65\u9AA4","link":"#_1-\u6240\u6709\u6B65\u9AA4","children":[]},{"level":2,"title":"2. \u5206\u6A21\u5757\uFF08\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6\uFF09","slug":"_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","link":"#_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","children":[{"level":3,"title":"2.1 \u6A21\u5757\u5206\u4E3A\u4E24\u7C7B \u7EC4\u4EF6\uFF08components\uFF09\u548C \u7CFB\u7EDF\u7EA7\uFF08system)","slug":"_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","link":"#_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","children":[]},{"level":3,"title":"2.2 \u7EC4\u4EF6\uFF08components\uFF09\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F\uFF0C\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB\uFF0C","slug":"_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","link":"#_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","children":[]},{"level":3,"title":"2.3 \u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC\uFF0C\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570(Resizer)","slug":"_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","link":"#_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","children":[]}]},{"level":2,"title":"3. \u573A\u666F\u56FE","slug":"_3-\u573A\u666F\u56FE","link":"#_3-\u573A\u666F\u56FE","children":[]},{"level":2,"title":"4. \u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","slug":"_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","link":"#_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","children":[]},{"level":2,"title":"5. \u5E73\u79FB(translation) \u7F29\u653E(scale) \u65CB\u8F6C(rotation)","slug":"_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","link":"#_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","children":[]},{"level":2,"title":"6 three.js \u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528 \u5F27\u5EA6\u800C\u4E0D\u662F \u5EA6\u6570 \u6307\u5B9A\u7684\uFF0C\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE(fov)\u662F\u5EA6\u6570","slug":"_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","link":"#_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","children":[]},{"level":2,"title":"7. \u53D8\u6362\u77E9\u9635","slug":"_7-\u53D8\u6362\u77E9\u9635","link":"#_7-\u53D8\u6362\u77E9\u9635","children":[]},{"level":2,"title":"8. \u52A8\u753B\u5FAA\u73AF","slug":"_8-\u52A8\u753B\u5FAA\u73AF","link":"#_8-\u52A8\u753B\u5FAA\u73AF","children":[]},{"level":2,"title":"9. \u7EB9\u7406","slug":"_9-\u7EB9\u7406","link":"#_9-\u7EB9\u7406","children":[{"level":3,"title":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","slug":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","link":"#\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","children":[]},{"level":3,"title":"\u50CF\u7D20\u548C\u7EB9\u7D20","slug":"\u50CF\u7D20\u548C\u7EB9\u7D20","link":"#\u50CF\u7D20\u548C\u7EB9\u7D20","children":[]},{"level":3,"title":"UV \u6620\u5C04","slug":"uv-\u6620\u5C04","link":"#uv-\u6620\u5C04","children":[]}]},{"level":2,"title":"10. OrbitControls \u76F8\u673A\u63A7\u5236\u63D2\u4EF6","slug":"_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","link":"#_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","children":[{"level":3,"title":"1. \u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E#","slug":"_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","link":"#_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"2. \u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","slug":"_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","link":"#_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"3. \u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","slug":"_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","link":"#_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","children":[]},{"level":3,"title":"4. \u9500\u6BC1\u63A7\u4EF6 Controls","slug":"_4-\u9500\u6BC1\u63A7\u4EF6-controls","link":"#_4-\u9500\u6BC1\u63A7\u4EF6-controls","children":[]},{"level":3,"title":"\u4F7F\u7528 OrbitControls \u6309\u9700\u6E32\u67D3","slug":"\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","link":"#\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","children":[]},{"level":3,"title":"1. \u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","slug":"_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","link":"#_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","children":[]},{"level":3,"title":"2. \u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","slug":"_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","link":"#_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","children":[]},{"level":3,"title":"3. \u81EA\u52A8\u65CB\u8F6C\uFF1A.autoRotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5.target\u65CB\u8F6C\uFF0C\u7136\u540E .autoRotateSpeed\u63A7\u5236\u901F\u5EA6","slug":"_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","link":"#_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","children":[]},{"level":3,"title":"4. \u9650\u5236\u7F29\u653E\uFF1A\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB\uFF0C\u786E\u4FDDminDistance\u4E0D\u5C0F\u4E8E \u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxDistance\u4E0D\u5927\u4E8E \u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916\uFF0CminDistance \u5FC5\u987B\u5C0F\u4E8E maxDistance\u3002","slug":"_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","link":"#_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","children":[]},{"level":3,"title":"5. \u9650\u5236\u65CB\u8F6C\uFF1A\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C\uFF08\u65B9\u4F4D\u89D2\uFF09\u548C\u5782\u76F4\uFF08\u6781\u89D2\uFF09","slug":"_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","link":"#_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","children":[]}]}],"relativePath":"pages/threejs/threejs.md"}'),o={name:"pages/threejs/threejs.md"},e=l(`

\u521B\u5EFA 3D \u573A\u666F\u65F6\uFF0C\u552F\u4E00\u7684\u9650\u5236\u662F\u60A8\u7684\u60F3\u8C61\u529B - \u4EE5\u53CA\u60A8\u7684\u6280\u672F\u77E5\u8BC6\u6DF1\u5EA6\u3002

1. \u6240\u6709\u6B65\u9AA4

Details
  1. \u521D\u59CB\u8BBE\u7F6E
  2. \u521B\u5EFA\u573A\u666F
  3. \u521B\u5EFA\u76F8\u673A
  4. \u521B\u5EFA\u7ACB\u65B9\u4F53\u5E76\u5C06\u5176\u6DFB\u52A0\u5230\u573A\u666F\u4E2D
  5. \u521B\u5EFA\u6E32\u67D3\u5668

\u9644\u52A0\u4EFB\u52A1\uFF1A\u8BBE\u7F6E\u573A\u666F\u7684\u5927\u5C0F

  1. \u6E32\u67D3\u573A\u666F

2. \u5206\u6A21\u5757\uFF08\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6\uFF09

2.1 \u6A21\u5757\u5206\u4E3A\u4E24\u7C7B \u7EC4\u4EF6\uFF08components\uFF09\u548C \u7CFB\u7EDF\u7EA7\uFF08system)

2.2 \u7EC4\u4EF6\uFF08components\uFF09\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F\uFF0C\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB\uFF0C

2.3 \u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC\uFF0C\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570(Resizer)

3. \u573A\u666F\u56FE

  1. \u573A\u666F\u56FE\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\uFF08\u9876\u7EA7\u573A\u666F\u9664\u5916\uFF09\u53EA\u6709\u4E00\u4E2A\u7236\u5BF9\u8C61\uFF0C\u5E76\u4E14\u53EF\u4EE5\u6709\u4EFB\u610F\u6570\u91CF\u7684\u5B50\u5BF9\u8C61\u3002
  2. \u901A\u8FC7.children\u6570\u7EC4\u6765\u8BBF\u95EE\u6240\u6709\u5B50\u5BF9\u8C61\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7getObjectByName\uFF08\u6709\u540D\u79F0\u7684\u8BDD\uFF09
  3. \u56E0\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u53EA\u80FD\u6709\u4E00\u4E2A\u7236\u5BF9\u8C61\uFF0C\u6240\u4EE5\u5728\u5C06 A \u4E0B\u9762\u7684\u5B57\u5143\u7D20 a \u79FB\u52A8\u5230 B \u5BF9\u8C61\uFF0C\u90A3\u4E48 A \u5BF9\u8C61\u4F1A\u5220\u9664
  4. \u6211\u4EEC\u6700\u7EC8\u5728\u5C4F\u5E55\u4E0A\u770B\u5230\u7684\u662F\u4E16\u754C\u7A7A\u95F4\u3002

4. \u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4

\u9876\u7EA7\u573A\u666F\u5B9A\u4E49\u4E86\u4E16\u754C\u7A7A\u95F4\uFF0C\u800C\u5176\u4ED6\u6BCF\u4E2A\u5BF9\u8C61\u90FD\u5B9A\u4E49\u4E86\u81EA\u5DF1\u7684\u5C40\u90E8\u7A7A\u95F4\u3002

5. \u5E73\u79FB(translation) \u7F29\u653E(scale) \u65CB\u8F6C(rotation)

TIP

  1. \u5E73\u79FB \u548C \u7F29\u653E \u90FD\u5B58\u50A8\u4E8E Vector3 \u4E2D
  2. \u76F8\u673A\u548C\u706F\u5149\uFF08\u9664\u4E86 RectAreaLight\uFF09\u6CA1\u6709\u5927\u5C0F\uFF0C\u56E0\u6B64\u7F29\u653E\u5B83\u4EEC\u6CA1\u6709\u610F\u4E49\u3002\u66F4\u6539 camera.scale \u6216 light.scale \u5C06\u6CA1\u6709\u6548\u679C\u3002
\u5E73\u79FB(translation)
js
// translate one axis at a time
 mesh.position.x = 1;
 mesh.position.y = 2;
 mesh.position.z = 3;
diff --git a/assets/pages_threejs_threejs.md.6cef040c.lean.js b/assets/pages_threejs_threejs.md.115909cd.lean.js
similarity index 99%
rename from assets/pages_threejs_threejs.md.6cef040c.lean.js
rename to assets/pages_threejs_threejs.md.115909cd.lean.js
index a8944b5..0560516 100644
--- a/assets/pages_threejs_threejs.md.6cef040c.lean.js
+++ b/assets/pages_threejs_threejs.md.115909cd.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"\u521B\u5EFA 3D \u573A\u666F\u65F6\uFF0C\u552F\u4E00\u7684\u9650\u5236\u662F\u60A8\u7684\u60F3\u8C61\u529B - \u4EE5\u53CA\u60A8\u7684\u6280\u672F\u77E5\u8BC6\u6DF1\u5EA6\u3002","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6240\u6709\u6B65\u9AA4","slug":"_1-\u6240\u6709\u6B65\u9AA4","link":"#_1-\u6240\u6709\u6B65\u9AA4","children":[]},{"level":2,"title":"2. \u5206\u6A21\u5757\uFF08\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6\uFF09","slug":"_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","link":"#_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","children":[{"level":3,"title":"2.1 \u6A21\u5757\u5206\u4E3A\u4E24\u7C7B \u7EC4\u4EF6\uFF08components\uFF09\u548C \u7CFB\u7EDF\u7EA7\uFF08system)","slug":"_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","link":"#_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","children":[]},{"level":3,"title":"2.2 \u7EC4\u4EF6\uFF08components\uFF09\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F\uFF0C\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB\uFF0C","slug":"_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","link":"#_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","children":[]},{"level":3,"title":"2.3 \u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC\uFF0C\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570(Resizer)","slug":"_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","link":"#_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","children":[]}]},{"level":2,"title":"3. \u573A\u666F\u56FE","slug":"_3-\u573A\u666F\u56FE","link":"#_3-\u573A\u666F\u56FE","children":[]},{"level":2,"title":"4. \u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","slug":"_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","link":"#_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","children":[]},{"level":2,"title":"5. \u5E73\u79FB(translation) \u7F29\u653E(scale) \u65CB\u8F6C(rotation)","slug":"_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","link":"#_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","children":[]},{"level":2,"title":"6 three.js \u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528 \u5F27\u5EA6\u800C\u4E0D\u662F \u5EA6\u6570 \u6307\u5B9A\u7684\uFF0C\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE(fov)\u662F\u5EA6\u6570","slug":"_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","link":"#_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","children":[]},{"level":2,"title":"7. \u53D8\u6362\u77E9\u9635","slug":"_7-\u53D8\u6362\u77E9\u9635","link":"#_7-\u53D8\u6362\u77E9\u9635","children":[]},{"level":2,"title":"8. \u52A8\u753B\u5FAA\u73AF","slug":"_8-\u52A8\u753B\u5FAA\u73AF","link":"#_8-\u52A8\u753B\u5FAA\u73AF","children":[]},{"level":2,"title":"9. \u7EB9\u7406","slug":"_9-\u7EB9\u7406","link":"#_9-\u7EB9\u7406","children":[{"level":3,"title":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","slug":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","link":"#\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","children":[]},{"level":3,"title":"\u50CF\u7D20\u548C\u7EB9\u7D20","slug":"\u50CF\u7D20\u548C\u7EB9\u7D20","link":"#\u50CF\u7D20\u548C\u7EB9\u7D20","children":[]},{"level":3,"title":"UV \u6620\u5C04","slug":"uv-\u6620\u5C04","link":"#uv-\u6620\u5C04","children":[]}]},{"level":2,"title":"10. OrbitControls \u76F8\u673A\u63A7\u5236\u63D2\u4EF6","slug":"_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","link":"#_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","children":[{"level":3,"title":"1. \u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E#","slug":"_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","link":"#_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"2. \u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","slug":"_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","link":"#_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"3. \u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","slug":"_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","link":"#_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","children":[]},{"level":3,"title":"4. \u9500\u6BC1\u63A7\u4EF6 Controls","slug":"_4-\u9500\u6BC1\u63A7\u4EF6-controls","link":"#_4-\u9500\u6BC1\u63A7\u4EF6-controls","children":[]},{"level":3,"title":"\u4F7F\u7528 OrbitControls \u6309\u9700\u6E32\u67D3","slug":"\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","link":"#\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","children":[]},{"level":3,"title":"1. \u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","slug":"_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","link":"#_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","children":[]},{"level":3,"title":"2. \u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","slug":"_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","link":"#_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","children":[]},{"level":3,"title":"3. \u81EA\u52A8\u65CB\u8F6C\uFF1A.autoRotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5.target\u65CB\u8F6C\uFF0C\u7136\u540E .autoRotateSpeed\u63A7\u5236\u901F\u5EA6","slug":"_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","link":"#_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","children":[]},{"level":3,"title":"4. \u9650\u5236\u7F29\u653E\uFF1A\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB\uFF0C\u786E\u4FDDminDistance\u4E0D\u5C0F\u4E8E \u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxDistance\u4E0D\u5927\u4E8E \u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916\uFF0CminDistance \u5FC5\u987B\u5C0F\u4E8E maxDistance\u3002","slug":"_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","link":"#_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","children":[]},{"level":3,"title":"5. \u9650\u5236\u65CB\u8F6C\uFF1A\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C\uFF08\u65B9\u4F4D\u89D2\uFF09\u548C\u5782\u76F4\uFF08\u6781\u89D2\uFF09","slug":"_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","link":"#_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","children":[]}]}],"relativePath":"pages/threejs/threejs.md"}'),o={name:"pages/threejs/threejs.md"},e=l("",38),p=[e];function t(c,r,i,D,y,F){return a(),n("div",null,p)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"\u521B\u5EFA 3D \u573A\u666F\u65F6\uFF0C\u552F\u4E00\u7684\u9650\u5236\u662F\u60A8\u7684\u60F3\u8C61\u529B - \u4EE5\u53CA\u60A8\u7684\u6280\u672F\u77E5\u8BC6\u6DF1\u5EA6\u3002","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6240\u6709\u6B65\u9AA4","slug":"_1-\u6240\u6709\u6B65\u9AA4","link":"#_1-\u6240\u6709\u6B65\u9AA4","children":[]},{"level":2,"title":"2. \u5206\u6A21\u5757\uFF08\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6\uFF09","slug":"_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","link":"#_2-\u5206\u6A21\u5757-\u6BCF\u4E2A\u6A21\u5757\u90FD\u662F\u4E00\u4E2A\u6587\u4EF6","children":[{"level":3,"title":"2.1 \u6A21\u5757\u5206\u4E3A\u4E24\u7C7B \u7EC4\u4EF6\uFF08components\uFF09\u548C \u7CFB\u7EDF\u7EA7\uFF08system)","slug":"_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","link":"#_2-1-\u6A21\u5757\u5206\u4E3A\u4E24\u7C7B-\u7EC4\u4EF6-components-\u548C-\u7CFB\u7EDF\u7EA7-system","children":[]},{"level":3,"title":"2.2 \u7EC4\u4EF6\uFF08components\uFF09\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F\uFF0C\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB\uFF0C","slug":"_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","link":"#_2-2-\u7EC4\u4EF6-components-\u662F\u53EF\u4EE5\u653E\u7F6E\u5230\u573A\u666F\u4E2D\u7684\u4EFB\u4F55\u4E1C\u897F-\u4F8B\u5982\u7ACB\u65B9\u4F53\u3001\u76F8\u673A\u548C\u573A\u666F\u672C\u8EAB","children":[]},{"level":3,"title":"2.3 \u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC\uFF0C\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570(Resizer)","slug":"_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","link":"#_2-3-\u800C\u7CFB\u7EDF\u662F\u5728\u7EC4\u4EF6\u6216\u5176\u4ED6\u7CFB\u7EDF\u4E0A\u8FD0\u884C\u7684\u4E1C\u897F\u3002\u5728\u8FD9\u91CC-\u662F\u6E32\u67D3\u5668\u548C\u5927\u5C0F\u8C03\u6574\u51FD\u6570-resizer","children":[]}]},{"level":2,"title":"3. \u573A\u666F\u56FE","slug":"_3-\u573A\u666F\u56FE","link":"#_3-\u573A\u666F\u56FE","children":[]},{"level":2,"title":"4. \u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","slug":"_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","link":"#_4-\u4E16\u754C\u7A7A\u95F4\u548C\u5C40\u90E8\u7A7A\u95F4","children":[]},{"level":2,"title":"5. \u5E73\u79FB(translation) \u7F29\u653E(scale) \u65CB\u8F6C(rotation)","slug":"_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","link":"#_5-\u5E73\u79FB-translation-\u7F29\u653E-scale-\u65CB\u8F6C-rotation","children":[]},{"level":2,"title":"6 three.js \u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528 \u5F27\u5EA6\u800C\u4E0D\u662F \u5EA6\u6570 \u6307\u5B9A\u7684\uFF0C\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE(fov)\u662F\u5EA6\u6570","slug":"_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","link":"#_6-three-js-\u4E2D\u7684\u6240\u6709\u5176\u4ED6\u89D2\u5EA6\u90FD\u662F\u4F7F\u7528-\u5F27\u5EA6\u800C\u4E0D\u662F-\u5EA6\u6570-\u6307\u5B9A\u7684-\u53EA\u6709\u900F\u89C6\u6295\u5F71\u7684\u89C6\u91CE-fov-\u662F\u5EA6\u6570","children":[]},{"level":2,"title":"7. \u53D8\u6362\u77E9\u9635","slug":"_7-\u53D8\u6362\u77E9\u9635","link":"#_7-\u53D8\u6362\u77E9\u9635","children":[]},{"level":2,"title":"8. \u52A8\u753B\u5FAA\u73AF","slug":"_8-\u52A8\u753B\u5FAA\u73AF","link":"#_8-\u52A8\u753B\u5FAA\u73AF","children":[]},{"level":2,"title":"9. \u7EB9\u7406","slug":"_9-\u7EB9\u7406","link":"#_9-\u7EB9\u7406","children":[{"level":3,"title":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","slug":"\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","link":"#\u56FE\u50CF\u548C\u7EB9\u7406\u7684\u533A\u522B","children":[]},{"level":3,"title":"\u50CF\u7D20\u548C\u7EB9\u7D20","slug":"\u50CF\u7D20\u548C\u7EB9\u7D20","link":"#\u50CF\u7D20\u548C\u7EB9\u7D20","children":[]},{"level":3,"title":"UV \u6620\u5C04","slug":"uv-\u6620\u5C04","link":"#uv-\u6620\u5C04","children":[]}]},{"level":2,"title":"10. OrbitControls \u76F8\u673A\u63A7\u5236\u63D2\u4EF6","slug":"_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","link":"#_10-orbitcontrols-\u76F8\u673A\u63A7\u5236\u63D2\u4EF6","children":[{"level":3,"title":"1. \u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E#","slug":"_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","link":"#_1-\u526A\u5207\u5230\u65B0\u7684\u6444\u50CF\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"2. \u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","slug":"_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","link":"#_2-\u5E73\u6ED1\u8FC7\u6E21\u5230\u65B0\u7684\u76F8\u673A\u4F4D\u7F6E","children":[]},{"level":3,"title":"3. \u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","slug":"_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","link":"#_3-\u4FDD\u5B58\u548C\u6062\u590D\u89C6\u56FE\u72B6\u6001","children":[]},{"level":3,"title":"4. \u9500\u6BC1\u63A7\u4EF6 Controls","slug":"_4-\u9500\u6BC1\u63A7\u4EF6-controls","link":"#_4-\u9500\u6BC1\u63A7\u4EF6-controls","children":[]},{"level":3,"title":"\u4F7F\u7528 OrbitControls \u6309\u9700\u6E32\u67D3","slug":"\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","link":"#\u4F7F\u7528-orbitcontrols-\u6309\u9700\u6E32\u67D3","children":[]},{"level":3,"title":"1. \u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","slug":"_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","link":"#_1-\u542F\u7528\u6216\u7981\u7528\u63A7\u4EF6","children":[]},{"level":3,"title":"2. \u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","slug":"_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","link":"#_2-\u76D1\u542C\u6309\u952E\u4E8B\u4EF6\u5E76\u4F7F\u7528\u7BAD\u5934\u952E\u5E73\u79FB\u76F8\u673A","children":[]},{"level":3,"title":"3. \u81EA\u52A8\u65CB\u8F6C\uFF1A.autoRotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5.target\u65CB\u8F6C\uFF0C\u7136\u540E .autoRotateSpeed\u63A7\u5236\u901F\u5EA6","slug":"_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","link":"#_3-\u81EA\u52A8\u65CB\u8F6C-autorotate\u5C06\u4F7F\u76F8\u673A\u81EA\u52A8\u56F4\u7ED5-target\u65CB\u8F6C-\u7136\u540E-autorotatespeed\u63A7\u5236\u901F\u5EA6","children":[]},{"level":3,"title":"4. \u9650\u5236\u7F29\u653E\uFF1A\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB\uFF0C\u786E\u4FDDminDistance\u4E0D\u5C0F\u4E8E \u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxDistance\u4E0D\u5927\u4E8E \u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916\uFF0CminDistance \u5FC5\u987B\u5C0F\u4E8E maxDistance\u3002","slug":"_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","link":"#_4-\u9650\u5236\u7F29\u653E-\u9650\u5236\u63A7\u4EF6\u653E\u5927\u6216\u7F29\u5C0F\u7684\u8DDD\u79BB-\u786E\u4FDDmindistance\u4E0D\u5C0F\u4E8E-\u76F8\u673A\u7684\u8FD1\u526A\u88C1\u5E73\u9762\u4E14maxdistance\u4E0D\u5927\u4E8E-\u76F8\u673A\u7684\u8FDC\u526A\u88C1\u5E73\u9762\u3002\u6B64\u5916-mindistance-\u5FC5\u987B\u5C0F\u4E8E-maxdistance\u3002","children":[]},{"level":3,"title":"5. \u9650\u5236\u65CB\u8F6C\uFF1A\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C\uFF08\u65B9\u4F4D\u89D2\uFF09\u548C\u5782\u76F4\uFF08\u6781\u89D2\uFF09","slug":"_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","link":"#_5-\u9650\u5236\u65CB\u8F6C-\u9650\u5236\u63A7\u4EF6\u7684\u6C34\u5E73\u65CB\u8F6C-\u65B9\u4F4D\u89D2-\u548C\u5782\u76F4-\u6781\u89D2","children":[]}]}],"relativePath":"pages/threejs/threejs.md"}'),o={name:"pages/threejs/threejs.md"},e=l("",38),p=[e];function t(c,r,i,D,y,F){return a(),n("div",null,p)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
diff --git a/assets/pages_toolFun_download.md.7792d731.js b/assets/pages_toolFun_download.md.85833187.js
similarity index 99%
rename from assets/pages_toolFun_download.md.7792d731.js
rename to assets/pages_toolFun_download.md.85833187.js
index 5527526..eeaf912 100644
--- a/assets/pages_toolFun_download.md.7792d731.js
+++ b/assets/pages_toolFun_download.md.85833187.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u4E0B\u8F7D\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA a \u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6\uFF08\u5BFC\u51FA excel\uFF09","slug":"_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","link":"#_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","children":[]},{"level":2,"title":"2. \u5C06 json \u6570\u636E\u8F6C\u5316\u4E3A demo.json \u5E76\u4E0B\u8F7D\u6587\u4EF6","slug":"_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","link":"#_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","children":[]},{"level":2,"title":"3. \u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6 \u76F8\u5173","slug":"_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","link":"#_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","children":[]},{"level":2,"title":"4. excel \u5BFC\u5165\u76F8\u5173","slug":"_4-excel-\u5BFC\u5165\u76F8\u5173","link":"#_4-excel-\u5BFC\u5165\u76F8\u5173","children":[]},{"level":2,"title":"5. \u672C\u5730\u7F13\u5B58\u76F8\u5173","slug":"_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","link":"#_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","children":[]}],"relativePath":"pages/toolFun/download.md"}'),p={name:"pages/toolFun/download.md"},o=l(`

\u4E0B\u8F7D\u76F8\u5173

1. \u521B\u5EFA a \u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6\uFF08\u5BFC\u51FA excel\uFF09

js
/**
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u4E0B\u8F7D\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA a \u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6\uFF08\u5BFC\u51FA excel\uFF09","slug":"_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","link":"#_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","children":[]},{"level":2,"title":"2. \u5C06 json \u6570\u636E\u8F6C\u5316\u4E3A demo.json \u5E76\u4E0B\u8F7D\u6587\u4EF6","slug":"_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","link":"#_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","children":[]},{"level":2,"title":"3. \u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6 \u76F8\u5173","slug":"_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","link":"#_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","children":[]},{"level":2,"title":"4. excel \u5BFC\u5165\u76F8\u5173","slug":"_4-excel-\u5BFC\u5165\u76F8\u5173","link":"#_4-excel-\u5BFC\u5165\u76F8\u5173","children":[]},{"level":2,"title":"5. \u672C\u5730\u7F13\u5B58\u76F8\u5173","slug":"_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","link":"#_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","children":[]}],"relativePath":"pages/toolFun/download.md"}'),p={name:"pages/toolFun/download.md"},o=l(`

\u4E0B\u8F7D\u76F8\u5173

1. \u521B\u5EFA a \u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6\uFF08\u5BFC\u51FA excel\uFF09

js
/**
  * @description: \u5BFC\u51FAexcel
  * @param {binary} data \u5BFC\u51FAexcel \u4E8C\u8FDB\u5236\u6570\u636E
  * @param {string} fileName \u5BFC\u51FAexcel\u6587\u4EF6\u540D\u5B57\uFF0C\u5E26\u540E\u7F00
diff --git a/assets/pages_toolFun_download.md.7792d731.lean.js b/assets/pages_toolFun_download.md.85833187.lean.js
similarity index 95%
rename from assets/pages_toolFun_download.md.7792d731.lean.js
rename to assets/pages_toolFun_download.md.85833187.lean.js
index 4293530..cf7893f 100644
--- a/assets/pages_toolFun_download.md.7792d731.lean.js
+++ b/assets/pages_toolFun_download.md.85833187.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u4E0B\u8F7D\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA a \u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6\uFF08\u5BFC\u51FA excel\uFF09","slug":"_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","link":"#_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","children":[]},{"level":2,"title":"2. \u5C06 json \u6570\u636E\u8F6C\u5316\u4E3A demo.json \u5E76\u4E0B\u8F7D\u6587\u4EF6","slug":"_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","link":"#_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","children":[]},{"level":2,"title":"3. \u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6 \u76F8\u5173","slug":"_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","link":"#_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","children":[]},{"level":2,"title":"4. excel \u5BFC\u5165\u76F8\u5173","slug":"_4-excel-\u5BFC\u5165\u76F8\u5173","link":"#_4-excel-\u5BFC\u5165\u76F8\u5173","children":[]},{"level":2,"title":"5. \u672C\u5730\u7F13\u5B58\u76F8\u5173","slug":"_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","link":"#_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","children":[]}],"relativePath":"pages/toolFun/download.md"}'),p={name:"pages/toolFun/download.md"},o=l("",30),e=[o];function c(t,r,F,y,D,A){return n(),a("div",null,e)}const E=s(p,[["render",c]]);export{i as __pageData,E as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u4E0B\u8F7D\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u521B\u5EFA a \u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6\uFF08\u5BFC\u51FA excel\uFF09","slug":"_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","link":"#_1-\u521B\u5EFA-a-\u94FE\u63A5\u5E76\u4E0B\u8F7D\u6587\u4EF6-\u5BFC\u51FA-excel","children":[]},{"level":2,"title":"2. \u5C06 json \u6570\u636E\u8F6C\u5316\u4E3A demo.json \u5E76\u4E0B\u8F7D\u6587\u4EF6","slug":"_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","link":"#_2-\u5C06-json-\u6570\u636E\u8F6C\u5316\u4E3A-demo-json-\u5E76\u4E0B\u8F7D\u6587\u4EF6","children":[]},{"level":2,"title":"3. \u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6 \u76F8\u5173","slug":"_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","link":"#_3-\u6839\u636E\u94FE\u63A5\u4E0B\u8F7D\u6587\u4EF6-\u76F8\u5173","children":[]},{"level":2,"title":"4. excel \u5BFC\u5165\u76F8\u5173","slug":"_4-excel-\u5BFC\u5165\u76F8\u5173","link":"#_4-excel-\u5BFC\u5165\u76F8\u5173","children":[]},{"level":2,"title":"5. \u672C\u5730\u7F13\u5B58\u76F8\u5173","slug":"_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","link":"#_5-\u672C\u5730\u7F13\u5B58\u76F8\u5173","children":[]}],"relativePath":"pages/toolFun/download.md"}'),p={name:"pages/toolFun/download.md"},o=l("",30),e=[o];function c(t,r,F,y,D,A){return n(),a("div",null,e)}const E=s(p,[["render",c]]);export{i as __pageData,E as default};
diff --git a/assets/pages_toolFun_imgTool.md.18293a7c.js b/assets/pages_toolFun_imgTool.md.b48323c9.js
similarity index 99%
rename from assets/pages_toolFun_imgTool.md.18293a7c.js
rename to assets/pages_toolFun_imgTool.md.b48323c9.js
index d072a28..ff3edcd 100644
--- a/assets/pages_toolFun_imgTool.md.18293a7c.js
+++ b/assets/pages_toolFun_imgTool.md.b48323c9.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u5E38\u7528\u5DE5\u5177\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","slug":"_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","link":"#_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","children":[]},{"level":2,"title":"2. \u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","slug":"_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","link":"#_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","children":[]}],"relativePath":"pages/toolFun/imgTool.md"}'),p={name:"pages/toolFun/imgTool.md"},o=l(`

\u5E38\u7528\u5DE5\u5177\u76F8\u5173

_\u904D\u5386\u6587\u4EF6\u5939\u4E0B\u56FE\u7247\u5E76\u8FDB\u884C\u7011\u5E03\u6D41\u5E03\u5C40\u548C\u9884\u89C8\u56FE\u7247\uFF08\u6709\u7455\u75B5\u6CA1\u5B8C\u5584\uFF09\uFF1Ahttps://github.com/Ybhdsg123/ybhdag-img/actions_

1. \u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03

js
/**
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u5E38\u7528\u5DE5\u5177\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","slug":"_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","link":"#_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","children":[]},{"level":2,"title":"2. \u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","slug":"_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","link":"#_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","children":[]}],"relativePath":"pages/toolFun/imgTool.md"}'),p={name:"pages/toolFun/imgTool.md"},o=l(`

\u5E38\u7528\u5DE5\u5177\u76F8\u5173

_\u904D\u5386\u6587\u4EF6\u5939\u4E0B\u56FE\u7247\u5E76\u8FDB\u884C\u7011\u5E03\u6D41\u5E03\u5C40\u548C\u9884\u89C8\u56FE\u7247\uFF08\u6709\u7455\u75B5\u6CA1\u5B8C\u5584\uFF09\uFF1Ahttps://github.com/Ybhdsg123/ybhdag-img/actions_

1. \u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03

js
/**
  * @description: \u7011\u5E03\u6D41\u6392\u6CD5 \u7B49\u5BBD\u4E0D\u7B49\u9AD8
  * @param {*} data \u56FE\u7247\u6570\u7EC4 [{img:imgurl}]
  * @param {*} clientW \u5C4F\u5E55\u7684\u603B\u5BBD\u5EA6
diff --git a/assets/pages_toolFun_imgTool.md.18293a7c.lean.js b/assets/pages_toolFun_imgTool.md.b48323c9.lean.js
similarity index 92%
rename from assets/pages_toolFun_imgTool.md.18293a7c.lean.js
rename to assets/pages_toolFun_imgTool.md.b48323c9.lean.js
index 2469132..7ac02e3 100644
--- a/assets/pages_toolFun_imgTool.md.18293a7c.lean.js
+++ b/assets/pages_toolFun_imgTool.md.b48323c9.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u5E38\u7528\u5DE5\u5177\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","slug":"_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","link":"#_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","children":[]},{"level":2,"title":"2. \u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","slug":"_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","link":"#_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","children":[]}],"relativePath":"pages/toolFun/imgTool.md"}'),p={name:"pages/toolFun/imgTool.md"},o=l("",6),e=[o];function c(t,r,F,y,D,A){return n(),a("div",null,e)}const g=s(p,[["render",c]]);export{i as __pageData,g as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u5E38\u7528\u5DE5\u5177\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","slug":"_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","link":"#_1-\u56FE\u7247\u7684\u7011\u5E03\u6D41\u6392\u5E03","children":[]},{"level":2,"title":"2. \u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","slug":"_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","link":"#_2-\u5F02\u6B65\u65B9\u5F0F\u5F97\u5230\u56FE\u7247\u7684\u5927\u5C0F","children":[]}],"relativePath":"pages/toolFun/imgTool.md"}'),p={name:"pages/toolFun/imgTool.md"},o=l("",6),e=[o];function c(t,r,F,y,D,A){return n(),a("div",null,e)}const g=s(p,[["render",c]]);export{i as __pageData,g as default};
diff --git a/assets/pages_toolFun_timeTool.md.e01ff7bc.js b/assets/pages_toolFun_timeTool.md.2fd221b3.js
similarity index 99%
rename from assets/pages_toolFun_timeTool.md.e01ff7bc.js
rename to assets/pages_toolFun_timeTool.md.2fd221b3.js
index fe13873..ed66ff1 100644
--- a/assets/pages_toolFun_timeTool.md.e01ff7bc.js
+++ b/assets/pages_toolFun_timeTool.md.2fd221b3.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/timeTool-weekTimeS.5b2b7844.png",d=JSON.parse('{"title":"\u65F6\u95F4\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u83B7\u53D6\u5F53\u5929\u65F6\u95F4","slug":"_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","link":"#_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","children":[]},{"level":2,"title":"2. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","slug":"_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","link":"#_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","children":[]},{"level":2,"title":"3. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","slug":"_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","link":"#_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","children":[]},{"level":2,"title":"4. \u683C\u5F0F\u5316\u65F6\u95F4","slug":"_4-\u683C\u5F0F\u5316\u65F6\u95F4","link":"#_4-\u683C\u5F0F\u5316\u65F6\u95F4","children":[{"level":3,"title":"4.1 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 11:25:11","slug":"_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","link":"#_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","children":[]},{"level":3,"title":"4.2 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 \u4E0A\u5348","slug":"_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","link":"#_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","children":[]},{"level":3,"title":"4.3 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31","slug":"_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","link":"#_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","children":[]}]},{"level":2,"title":"5. \u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","slug":"_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","link":"#_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","children":[]},{"level":2,"title":"6. \u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","slug":"_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","link":"#_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","children":[]}],"relativePath":"pages/toolFun/timeTool.md"}'),o={name:"pages/toolFun/timeTool.md"},e=l(`

\u65F6\u95F4\u76F8\u5173

1. \u83B7\u53D6\u5F53\u5929\u65F6\u95F4

js
/*
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/timeTool-weekTimeS.5b2b7844.png",d=JSON.parse('{"title":"\u65F6\u95F4\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u83B7\u53D6\u5F53\u5929\u65F6\u95F4","slug":"_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","link":"#_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","children":[]},{"level":2,"title":"2. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","slug":"_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","link":"#_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","children":[]},{"level":2,"title":"3. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","slug":"_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","link":"#_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","children":[]},{"level":2,"title":"4. \u683C\u5F0F\u5316\u65F6\u95F4","slug":"_4-\u683C\u5F0F\u5316\u65F6\u95F4","link":"#_4-\u683C\u5F0F\u5316\u65F6\u95F4","children":[{"level":3,"title":"4.1 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 11:25:11","slug":"_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","link":"#_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","children":[]},{"level":3,"title":"4.2 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 \u4E0A\u5348","slug":"_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","link":"#_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","children":[]},{"level":3,"title":"4.3 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31","slug":"_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","link":"#_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","children":[]}]},{"level":2,"title":"5. \u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","slug":"_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","link":"#_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","children":[]},{"level":2,"title":"6. \u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","slug":"_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","link":"#_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","children":[]}],"relativePath":"pages/toolFun/timeTool.md"}'),o={name:"pages/toolFun/timeTool.md"},e=l(`

\u65F6\u95F4\u76F8\u5173

1. \u83B7\u53D6\u5F53\u5929\u65F6\u95F4

js
/*
  ** val="timeStamp" \u8FD4\u56DE\u65F6\u95F4\u6233 \u6BEB\u79D2\uFF0C\u5426\u5219\u8FD4\u56DE\u683C\u5F0F\u4E3A "2022-12-09"
  */
 export const getCurrentDay = (val = "timeStamp") => {
diff --git a/assets/pages_toolFun_timeTool.md.e01ff7bc.lean.js b/assets/pages_toolFun_timeTool.md.2fd221b3.lean.js
similarity index 97%
rename from assets/pages_toolFun_timeTool.md.e01ff7bc.lean.js
rename to assets/pages_toolFun_timeTool.md.2fd221b3.lean.js
index 80a1f67..d25d9c2 100644
--- a/assets/pages_toolFun_timeTool.md.e01ff7bc.lean.js
+++ b/assets/pages_toolFun_timeTool.md.2fd221b3.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/timeTool-weekTimeS.5b2b7844.png",d=JSON.parse('{"title":"\u65F6\u95F4\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u83B7\u53D6\u5F53\u5929\u65F6\u95F4","slug":"_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","link":"#_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","children":[]},{"level":2,"title":"2. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","slug":"_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","link":"#_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","children":[]},{"level":2,"title":"3. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","slug":"_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","link":"#_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","children":[]},{"level":2,"title":"4. \u683C\u5F0F\u5316\u65F6\u95F4","slug":"_4-\u683C\u5F0F\u5316\u65F6\u95F4","link":"#_4-\u683C\u5F0F\u5316\u65F6\u95F4","children":[{"level":3,"title":"4.1 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 11:25:11","slug":"_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","link":"#_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","children":[]},{"level":3,"title":"4.2 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 \u4E0A\u5348","slug":"_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","link":"#_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","children":[]},{"level":3,"title":"4.3 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31","slug":"_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","link":"#_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","children":[]}]},{"level":2,"title":"5. \u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","slug":"_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","link":"#_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","children":[]},{"level":2,"title":"6. \u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","slug":"_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","link":"#_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","children":[]}],"relativePath":"pages/toolFun/timeTool.md"}'),o={name:"pages/toolFun/timeTool.md"},e=l("",20),t=[e];function c(r,F,y,D,C,A){return a(),n("div",null,t)}const u=s(o,[["render",c]]);export{d as __pageData,u as default};
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/timeTool-weekTimeS.5b2b7844.png",d=JSON.parse('{"title":"\u65F6\u95F4\u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u83B7\u53D6\u5F53\u5929\u65F6\u95F4","slug":"_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","link":"#_1-\u83B7\u53D6\u5F53\u5929\u65F6\u95F4","children":[]},{"level":2,"title":"2. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","slug":"_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","link":"#_2-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u5468\u7684\u65F6\u95F4\u6233","children":[]},{"level":2,"title":"3. \u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","slug":"_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","link":"#_3-\u6839\u636E\u67D0\u4E00\u5929\u83B7\u53D6\u672C\u6708\u7684\u7B2C\u4E00\u5929\u53CA\u6700\u540E\u4E00\u5929","children":[]},{"level":2,"title":"4. \u683C\u5F0F\u5316\u65F6\u95F4","slug":"_4-\u683C\u5F0F\u5316\u65F6\u95F4","link":"#_4-\u683C\u5F0F\u5316\u65F6\u95F4","children":[{"level":3,"title":"4.1 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 11:25:11","slug":"_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","link":"#_4-1-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-11-25-11","children":[]},{"level":3,"title":"4.2 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31 \u4E0A\u5348","slug":"_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","link":"#_4-2-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31-\u4E0A\u5348","children":[]},{"level":3,"title":"4.3 \u683C\u5F0F\u5316\u65F6\u95F4 2021-12-31","slug":"_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","link":"#_4-3-\u683C\u5F0F\u5316\u65F6\u95F4-2021-12-31","children":[]}]},{"level":2,"title":"5. \u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","slug":"_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","link":"#_5-\u4E24\u65E5\u671F\u4E4B\u95F4\u76F8\u5DEE\u7684\u5929\u6570","children":[]},{"level":2,"title":"6. \u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","slug":"_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","link":"#_6-\u67E5\u8BE2\u67D0\u5929\u662F\u5426\u4E3A\u5DE5\u4F5C\u65E5","children":[]}],"relativePath":"pages/toolFun/timeTool.md"}'),o={name:"pages/toolFun/timeTool.md"},e=l("",20),t=[e];function c(r,F,y,D,C,A){return a(),n("div",null,t)}const u=s(o,[["render",c]]);export{d as __pageData,u as default};
diff --git a/assets/pages_toolFun_tools.md.33bffa6c.js b/assets/pages_toolFun_tools.md.4b3bad63.js
similarity index 99%
rename from assets/pages_toolFun_tools.md.33bffa6c.js
rename to assets/pages_toolFun_tools.md.4b3bad63.js
index e04d048..e43d1d9 100644
--- a/assets/pages_toolFun_tools.md.33bffa6c.js
+++ b/assets/pages_toolFun_tools.md.4b3bad63.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. navigator.clipboard \u526A\u5207\u677F","slug":"_1-navigator-clipboard-\u526A\u5207\u677F","link":"#_1-navigator-clipboard-\u526A\u5207\u677F","children":[{"level":3,"title":"1.1 \u590D\u5236\u6587\u672C \uFF08\u6709\u517C\u5BB9\u6027\uFF09","slug":"_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","link":"#_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","children":[]},{"level":3,"title":"1.2 \u8BFB\u6587\u672C\uFF08\u6709\u517C\u5BB9\u6027,\u4F1A\u5F39\u7A97\u63D0\u793A\uFF09","slug":"_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","link":"#_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","children":[]}]},{"level":2,"title":"6. ElMessageBox.confirm \u4E8C\u6B21\u5C01\u88C5","slug":"_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","link":"#_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","children":[]},{"level":2,"title":"7. \u6570\u7EC4\u5206\u5757","slug":"_7-\u6570\u7EC4\u5206\u5757","link":"#_7-\u6570\u7EC4\u5206\u5757","children":[]},{"level":2,"title":"8. \u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F \u548C \u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","slug":"_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","link":"#_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","children":[]},{"level":2,"title":"9. \u6DF1\u62F7\u8D1D","slug":"_9-\u6DF1\u62F7\u8D1D","link":"#_9-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"10. \u6821\u9A8C\u6570\u636E\u7C7B\u578B","slug":"_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","link":"#_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","children":[]},{"level":2,"title":"11. \u4ECE url \u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","slug":"_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","link":"#_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","children":[]},{"level":2,"title":"12. \u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","slug":"_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","link":"#_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","children":[]},{"level":2,"title":"13. \u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","slug":"_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","link":"#_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","children":[]},{"level":2,"title":"14. \u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","slug":"_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","link":"#_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","children":[]},{"level":2,"title":"17. \u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","slug":"_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","link":"#_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","children":[]},{"level":2,"title":"18. \u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","slug":"_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","link":"#_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","children":[]},{"level":2,"title":"19. \u5F00\u542F\u5168\u5C4F \u548C \u5173\u95ED\u5168\u5C4F","slug":"_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","link":"#_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","children":[]},{"level":2,"title":"20. \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","slug":"_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","link":"#_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","children":[]},{"level":2,"title":"21. \u8BA1\u7B97\u5E74\u9F84","slug":"_21-\u8BA1\u7B97\u5E74\u9F84","link":"#_21-\u8BA1\u7B97\u5E74\u9F84","children":[]},{"level":2,"title":"22. \u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","slug":"_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","link":"#_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","children":[]},{"level":2,"title":"23.\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","slug":"_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","link":"#_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","children":[]}],"relativePath":"pages/toolFun/tools.md"}'),p={name:"pages/toolFun/tools.md"},o=l(`

1. navigator.clipboard \u526A\u5207\u677F

1.1 \u590D\u5236\u6587\u672C \uFF08\u6709\u517C\u5BB9\u6027\uFF09

js
// \u8BFB\u53D6\u6587\u672C
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. navigator.clipboard \u526A\u5207\u677F","slug":"_1-navigator-clipboard-\u526A\u5207\u677F","link":"#_1-navigator-clipboard-\u526A\u5207\u677F","children":[{"level":3,"title":"1.1 \u590D\u5236\u6587\u672C \uFF08\u6709\u517C\u5BB9\u6027\uFF09","slug":"_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","link":"#_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","children":[]},{"level":3,"title":"1.2 \u8BFB\u6587\u672C\uFF08\u6709\u517C\u5BB9\u6027,\u4F1A\u5F39\u7A97\u63D0\u793A\uFF09","slug":"_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","link":"#_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","children":[]}]},{"level":2,"title":"6. ElMessageBox.confirm \u4E8C\u6B21\u5C01\u88C5","slug":"_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","link":"#_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","children":[]},{"level":2,"title":"7. \u6570\u7EC4\u5206\u5757","slug":"_7-\u6570\u7EC4\u5206\u5757","link":"#_7-\u6570\u7EC4\u5206\u5757","children":[]},{"level":2,"title":"8. \u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F \u548C \u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","slug":"_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","link":"#_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","children":[]},{"level":2,"title":"9. \u6DF1\u62F7\u8D1D","slug":"_9-\u6DF1\u62F7\u8D1D","link":"#_9-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"10. \u6821\u9A8C\u6570\u636E\u7C7B\u578B","slug":"_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","link":"#_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","children":[]},{"level":2,"title":"11. \u4ECE url \u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","slug":"_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","link":"#_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","children":[]},{"level":2,"title":"12. \u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","slug":"_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","link":"#_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","children":[]},{"level":2,"title":"13. \u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","slug":"_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","link":"#_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","children":[]},{"level":2,"title":"14. \u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","slug":"_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","link":"#_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","children":[]},{"level":2,"title":"17. \u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","slug":"_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","link":"#_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","children":[]},{"level":2,"title":"18. \u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","slug":"_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","link":"#_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","children":[]},{"level":2,"title":"19. \u5F00\u542F\u5168\u5C4F \u548C \u5173\u95ED\u5168\u5C4F","slug":"_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","link":"#_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","children":[]},{"level":2,"title":"20. \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","slug":"_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","link":"#_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","children":[]},{"level":2,"title":"21. \u8BA1\u7B97\u5E74\u9F84","slug":"_21-\u8BA1\u7B97\u5E74\u9F84","link":"#_21-\u8BA1\u7B97\u5E74\u9F84","children":[]},{"level":2,"title":"22. \u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","slug":"_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","link":"#_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","children":[]},{"level":2,"title":"23.\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","slug":"_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","link":"#_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","children":[]}],"relativePath":"pages/toolFun/tools.md"}'),p={name:"pages/toolFun/tools.md"},o=l(`

1. navigator.clipboard \u526A\u5207\u677F

1.1 \u590D\u5236\u6587\u672C \uFF08\u6709\u517C\u5BB9\u6027\uFF09

js
// \u8BFB\u53D6\u6587\u672C
 export const copyText = async (text) => {
   // \u8BFB\u7684\u6743\u9650
   const premission = await navigator.permissions.query({
diff --git a/assets/pages_toolFun_tools.md.33bffa6c.lean.js b/assets/pages_toolFun_tools.md.4b3bad63.lean.js
similarity index 98%
rename from assets/pages_toolFun_tools.md.33bffa6c.lean.js
rename to assets/pages_toolFun_tools.md.4b3bad63.lean.js
index f47be50..683c31a 100644
--- a/assets/pages_toolFun_tools.md.33bffa6c.lean.js
+++ b/assets/pages_toolFun_tools.md.4b3bad63.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. navigator.clipboard \u526A\u5207\u677F","slug":"_1-navigator-clipboard-\u526A\u5207\u677F","link":"#_1-navigator-clipboard-\u526A\u5207\u677F","children":[{"level":3,"title":"1.1 \u590D\u5236\u6587\u672C \uFF08\u6709\u517C\u5BB9\u6027\uFF09","slug":"_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","link":"#_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","children":[]},{"level":3,"title":"1.2 \u8BFB\u6587\u672C\uFF08\u6709\u517C\u5BB9\u6027,\u4F1A\u5F39\u7A97\u63D0\u793A\uFF09","slug":"_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","link":"#_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","children":[]}]},{"level":2,"title":"6. ElMessageBox.confirm \u4E8C\u6B21\u5C01\u88C5","slug":"_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","link":"#_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","children":[]},{"level":2,"title":"7. \u6570\u7EC4\u5206\u5757","slug":"_7-\u6570\u7EC4\u5206\u5757","link":"#_7-\u6570\u7EC4\u5206\u5757","children":[]},{"level":2,"title":"8. \u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F \u548C \u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","slug":"_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","link":"#_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","children":[]},{"level":2,"title":"9. \u6DF1\u62F7\u8D1D","slug":"_9-\u6DF1\u62F7\u8D1D","link":"#_9-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"10. \u6821\u9A8C\u6570\u636E\u7C7B\u578B","slug":"_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","link":"#_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","children":[]},{"level":2,"title":"11. \u4ECE url \u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","slug":"_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","link":"#_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","children":[]},{"level":2,"title":"12. \u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","slug":"_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","link":"#_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","children":[]},{"level":2,"title":"13. \u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","slug":"_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","link":"#_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","children":[]},{"level":2,"title":"14. \u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","slug":"_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","link":"#_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","children":[]},{"level":2,"title":"17. \u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","slug":"_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","link":"#_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","children":[]},{"level":2,"title":"18. \u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","slug":"_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","link":"#_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","children":[]},{"level":2,"title":"19. \u5F00\u542F\u5168\u5C4F \u548C \u5173\u95ED\u5168\u5C4F","slug":"_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","link":"#_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","children":[]},{"level":2,"title":"20. \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","slug":"_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","link":"#_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","children":[]},{"level":2,"title":"21. \u8BA1\u7B97\u5E74\u9F84","slug":"_21-\u8BA1\u7B97\u5E74\u9F84","link":"#_21-\u8BA1\u7B97\u5E74\u9F84","children":[]},{"level":2,"title":"22. \u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","slug":"_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","link":"#_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","children":[]},{"level":2,"title":"23.\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","slug":"_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","link":"#_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","children":[]}],"relativePath":"pages/toolFun/tools.md"}'),p={name:"pages/toolFun/tools.md"},o=l("",52),e=[o];function t(c,r,F,y,D,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. navigator.clipboard \u526A\u5207\u677F","slug":"_1-navigator-clipboard-\u526A\u5207\u677F","link":"#_1-navigator-clipboard-\u526A\u5207\u677F","children":[{"level":3,"title":"1.1 \u590D\u5236\u6587\u672C \uFF08\u6709\u517C\u5BB9\u6027\uFF09","slug":"_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","link":"#_1-1-\u590D\u5236\u6587\u672C-\u6709\u517C\u5BB9\u6027","children":[]},{"level":3,"title":"1.2 \u8BFB\u6587\u672C\uFF08\u6709\u517C\u5BB9\u6027,\u4F1A\u5F39\u7A97\u63D0\u793A\uFF09","slug":"_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","link":"#_1-2-\u8BFB\u6587\u672C-\u6709\u517C\u5BB9\u6027-\u4F1A\u5F39\u7A97\u63D0\u793A","children":[]}]},{"level":2,"title":"6. ElMessageBox.confirm \u4E8C\u6B21\u5C01\u88C5","slug":"_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","link":"#_6-elmessagebox-confirm-\u4E8C\u6B21\u5C01\u88C5","children":[]},{"level":2,"title":"7. \u6570\u7EC4\u5206\u5757","slug":"_7-\u6570\u7EC4\u5206\u5757","link":"#_7-\u6570\u7EC4\u5206\u5757","children":[]},{"level":2,"title":"8. \u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F \u548C \u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","slug":"_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","link":"#_8-\u6587\u5B57\u590D\u5236\u5230\u7C98\u8D34\u677F-\u548C-\u83B7\u53D6\u9009\u5B9A\u7684\u6587\u672C","children":[]},{"level":2,"title":"9. \u6DF1\u62F7\u8D1D","slug":"_9-\u6DF1\u62F7\u8D1D","link":"#_9-\u6DF1\u62F7\u8D1D","children":[]},{"level":2,"title":"10. \u6821\u9A8C\u6570\u636E\u7C7B\u578B","slug":"_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","link":"#_10-\u6821\u9A8C\u6570\u636E\u7C7B\u578B","children":[]},{"level":2,"title":"11. \u4ECE url \u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","slug":"_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","link":"#_11-\u4ECE-url-\u83B7\u53D6\u53C2\u6570\u5E76\u8F6C\u4E3A\u5BF9\u8C61","children":[]},{"level":2,"title":"12. \u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","slug":"_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","link":"#_12-\u68C0\u67E5\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A","children":[]},{"level":2,"title":"13. \u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","slug":"_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","link":"#_13-\u8BA1\u7B97\u6570\u7EC4\u5E73\u5747\u503C","children":[]},{"level":2,"title":"14. \u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","slug":"_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","link":"#_14-\u6570\u7EC4\u5BF9\u8C61\u6839\u636E\u5B57\u6BB5\u53BB\u91CD","children":[]},{"level":2,"title":"17. \u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","slug":"_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","link":"#_17-\u751F\u6210\u968F\u673A\u5341\u516D\u8FDB\u5236","children":[]},{"level":2,"title":"18. \u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","slug":"_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","link":"#_18-\u68C0\u67E5\u8BBE\u5907\u7C7B\u578B","children":[]},{"level":2,"title":"19. \u5F00\u542F\u5168\u5C4F \u548C \u5173\u95ED\u5168\u5C4F","slug":"_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","link":"#_19-\u5F00\u542F\u5168\u5C4F-\u548C-\u5173\u95ED\u5168\u5C4F","children":[]},{"level":2,"title":"20. \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","slug":"_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","link":"#_20-\u68C0\u6D4B\u5143\u7D20\u662F\u5426\u5904\u4E8E\u7126\u70B9","children":[]},{"level":2,"title":"21. \u8BA1\u7B97\u5E74\u9F84","slug":"_21-\u8BA1\u7B97\u5E74\u9F84","link":"#_21-\u8BA1\u7B97\u5E74\u9F84","children":[]},{"level":2,"title":"22. \u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","slug":"_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","link":"#_22-\u5BF9\u6570\u636E\u8FDB\u884C\u5206\u7EC4","children":[]},{"level":2,"title":"23.\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","slug":"_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","link":"#_23-\u89E3\u51B3\u6570\u5B57\u76F8\u52A0\u7CBE\u5EA6\u635F\u5931\u95EE\u9898","children":[]}],"relativePath":"pages/toolFun/tools.md"}'),p={name:"pages/toolFun/tools.md"},o=l("",52),e=[o];function t(c,r,F,y,D,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
diff --git a/assets/pages_uniapp_calendar.md.82a523e6.js b/assets/pages_uniapp_calendar.md.065cae52.js
similarity index 99%
rename from assets/pages_uniapp_calendar.md.82a523e6.js
rename to assets/pages_uniapp_calendar.md.065cae52.js
index 45483fc..8e30693 100644
--- a/assets/pages_uniapp_calendar.md.82a523e6.js
+++ b/assets/pages_uniapp_calendar.md.065cae52.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/calendar.17aa29e2.png",u=JSON.parse('{"title":"\u65E5\u5386\u7EC4\u4EF6","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u4F7F\u7528","slug":"_2-\u4F7F\u7528","link":"#_2-\u4F7F\u7528","children":[]},{"level":2,"title":"3. \u590D\u6742\u5E94\u7528","slug":"_3-\u590D\u6742\u5E94\u7528","link":"#_3-\u590D\u6742\u5E94\u7528","children":[]}],"relativePath":"pages/uniapp/calendar.md"}'),o={name:"pages/uniapp/calendar.md"},e=l(`

\u65E5\u5386\u7EC4\u4EF6

1. \u7EC4\u4EF6\u5185\u5BB9

vue
<template>
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/calendar.17aa29e2.png",u=JSON.parse('{"title":"\u65E5\u5386\u7EC4\u4EF6","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u4F7F\u7528","slug":"_2-\u4F7F\u7528","link":"#_2-\u4F7F\u7528","children":[]},{"level":2,"title":"3. \u590D\u6742\u5E94\u7528","slug":"_3-\u590D\u6742\u5E94\u7528","link":"#_3-\u590D\u6742\u5E94\u7528","children":[]}],"relativePath":"pages/uniapp/calendar.md"}'),o={name:"pages/uniapp/calendar.md"},e=l(`

\u65E5\u5386\u7EC4\u4EF6

1. \u7EC4\u4EF6\u5185\u5BB9

vue
<template>
   <view class="calendar">
     <slot name="header"> </slot>
     <view class="calendar-header">
diff --git a/assets/pages_uniapp_calendar.md.82a523e6.lean.js b/assets/pages_uniapp_calendar.md.065cae52.lean.js
similarity index 92%
rename from assets/pages_uniapp_calendar.md.82a523e6.lean.js
rename to assets/pages_uniapp_calendar.md.065cae52.lean.js
index 619f9d2..32cb07b 100644
--- a/assets/pages_uniapp_calendar.md.82a523e6.lean.js
+++ b/assets/pages_uniapp_calendar.md.065cae52.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/calendar.17aa29e2.png",u=JSON.parse('{"title":"\u65E5\u5386\u7EC4\u4EF6","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u4F7F\u7528","slug":"_2-\u4F7F\u7528","link":"#_2-\u4F7F\u7528","children":[]},{"level":2,"title":"3. \u590D\u6742\u5E94\u7528","slug":"_3-\u590D\u6742\u5E94\u7528","link":"#_3-\u590D\u6742\u5E94\u7528","children":[]}],"relativePath":"pages/uniapp/calendar.md"}'),o={name:"pages/uniapp/calendar.md"},e=l("",9),t=[e];function D(c,F,r,y,C,A){return n(),a("div",null,t)}const d=s(o,[["render",D]]);export{u as __pageData,d as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/calendar.17aa29e2.png",u=JSON.parse('{"title":"\u65E5\u5386\u7EC4\u4EF6","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u4F7F\u7528","slug":"_2-\u4F7F\u7528","link":"#_2-\u4F7F\u7528","children":[]},{"level":2,"title":"3. \u590D\u6742\u5E94\u7528","slug":"_3-\u590D\u6742\u5E94\u7528","link":"#_3-\u590D\u6742\u5E94\u7528","children":[]}],"relativePath":"pages/uniapp/calendar.md"}'),o={name:"pages/uniapp/calendar.md"},e=l("",9),t=[e];function D(c,F,r,y,C,A){return n(),a("div",null,t)}const d=s(o,[["render",D]]);export{u as __pageData,d as default};
diff --git a/assets/pages_uniapp_components-uploadImg.md.7c6e8089.js b/assets/pages_uniapp_components-uploadImg.md.db76862e.js
similarity index 99%
rename from assets/pages_uniapp_components-uploadImg.md.7c6e8089.js
rename to assets/pages_uniapp_components-uploadImg.md.db76862e.js
index 7366ac9..14c93b8 100644
--- a/assets/pages_uniapp_components-uploadImg.md.7c6e8089.js
+++ b/assets/pages_uniapp_components-uploadImg.md.db76862e.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"uniapp \u5E38\u7528\u5C01\u88C5\u7EC4\u4EF6----\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6\uFF08vue2\uFF09","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u8BF7\u6C42","slug":"_2-\u8BF7\u6C42","link":"#_2-\u8BF7\u6C42","children":[]},{"level":2,"title":"3. \u4F7F\u7528\u4E86 isNew \u65B0\u7684\uFF0C\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","slug":"_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","link":"#_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","children":[]},{"level":2,"title":"4. \u672A\u4F7F\u7528 isNew \u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C oss \u56FE\u7247","slug":"_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","link":"#_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","children":[]}],"relativePath":"pages/uniapp/components-uploadImg.md"}'),p={name:"pages/uniapp/components-uploadImg.md"},o=l(`

uniapp \u5E38\u7528\u5C01\u88C5\u7EC4\u4EF6----\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6\uFF08vue2\uFF09

1. \u7EC4\u4EF6\u5185\u5BB9

vue

+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"uniapp \u5E38\u7528\u5C01\u88C5\u7EC4\u4EF6----\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6\uFF08vue2\uFF09","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u8BF7\u6C42","slug":"_2-\u8BF7\u6C42","link":"#_2-\u8BF7\u6C42","children":[]},{"level":2,"title":"3. \u4F7F\u7528\u4E86 isNew \u65B0\u7684\uFF0C\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","slug":"_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","link":"#_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","children":[]},{"level":2,"title":"4. \u672A\u4F7F\u7528 isNew \u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C oss \u56FE\u7247","slug":"_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","link":"#_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","children":[]}],"relativePath":"pages/uniapp/components-uploadImg.md"}'),p={name:"pages/uniapp/components-uploadImg.md"},o=l(`

uniapp \u5E38\u7528\u5C01\u88C5\u7EC4\u4EF6----\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6\uFF08vue2\uFF09

1. \u7EC4\u4EF6\u5185\u5BB9

vue

 <template>
 	<view class="upload-img">
 		<view class="img-item" @click="uploadImg">
diff --git a/assets/pages_uniapp_components-uploadImg.md.7c6e8089.lean.js b/assets/pages_uniapp_components-uploadImg.md.db76862e.lean.js
similarity index 95%
rename from assets/pages_uniapp_components-uploadImg.md.7c6e8089.lean.js
rename to assets/pages_uniapp_components-uploadImg.md.db76862e.lean.js
index 9c1ff18..b3b539c 100644
--- a/assets/pages_uniapp_components-uploadImg.md.7c6e8089.lean.js
+++ b/assets/pages_uniapp_components-uploadImg.md.db76862e.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"uniapp \u5E38\u7528\u5C01\u88C5\u7EC4\u4EF6----\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6\uFF08vue2\uFF09","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u8BF7\u6C42","slug":"_2-\u8BF7\u6C42","link":"#_2-\u8BF7\u6C42","children":[]},{"level":2,"title":"3. \u4F7F\u7528\u4E86 isNew \u65B0\u7684\uFF0C\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","slug":"_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","link":"#_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","children":[]},{"level":2,"title":"4. \u672A\u4F7F\u7528 isNew \u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C oss \u56FE\u7247","slug":"_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","link":"#_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","children":[]}],"relativePath":"pages/uniapp/components-uploadImg.md"}'),p={name:"pages/uniapp/components-uploadImg.md"},o=l("",9),t=[o];function e(c,F,r,D,y,C){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"uniapp \u5E38\u7528\u5C01\u88C5\u7EC4\u4EF6----\u4E0A\u4F20\u56FE\u7247\u7EC4\u4EF6\uFF08vue2\uFF09","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u7EC4\u4EF6\u5185\u5BB9","slug":"_1-\u7EC4\u4EF6\u5185\u5BB9","link":"#_1-\u7EC4\u4EF6\u5185\u5BB9","children":[]},{"level":2,"title":"2. \u8BF7\u6C42","slug":"_2-\u8BF7\u6C42","link":"#_2-\u8BF7\u6C42","children":[]},{"level":2,"title":"3. \u4F7F\u7528\u4E86 isNew \u65B0\u7684\uFF0C\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","slug":"_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","link":"#_3-\u4F7F\u7528\u4E86-isnew-\u65B0\u7684-\u53EA\u4F1A\u8FD4\u56DE\u672C\u5730\u56FE\u7247","children":[]},{"level":2,"title":"4. \u672A\u4F7F\u7528 isNew \u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C oss \u56FE\u7247","slug":"_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","link":"#_4-\u672A\u4F7F\u7528-isnew-\u8FD4\u56DE\u672C\u5730\u56FE\u7247\u548C-oss-\u56FE\u7247","children":[]}],"relativePath":"pages/uniapp/components-uploadImg.md"}'),p={name:"pages/uniapp/components-uploadImg.md"},o=l("",9),t=[o];function e(c,F,r,D,y,C){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{i as __pageData,u as default};
diff --git a/assets/pages_uniapp_index.md.a99ff0a3.js b/assets/pages_uniapp_index.md.ae5a24c3.js
similarity index 99%
rename from assets/pages_uniapp_index.md.a99ff0a3.js
rename to assets/pages_uniapp_index.md.ae5a24c3.js
index f3fa70b..9ec8084 100644
--- a/assets/pages_uniapp_index.md.a99ff0a3.js
+++ b/assets/pages_uniapp_index.md.ae5a24c3.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u5E38\u7528 api \u7B49","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u72B6\u6001\u680F\u9AD8\u5EA6","slug":"_1-\u72B6\u6001\u680F\u9AD8\u5EA6","link":"#_1-\u72B6\u6001\u680F\u9AD8\u5EA6","children":[]},{"level":2,"title":"2. \u81EA\u5B9A\u4E49\u72B6\u6001\u680F","slug":"_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","link":"#_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","children":[]},{"level":2,"title":"3. \u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","slug":"_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","link":"#_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","children":[{"level":3,"title":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","slug":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","link":"#\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","children":[]}]}],"relativePath":"pages/uniapp/index.md"}'),p={name:"pages/uniapp/index.md"},o=l(`

\u5E38\u7528 api \u7B49

1. \u72B6\u6001\u680F\u9AD8\u5EA6

js \u83B7\u53D6\u72B6\u6001\u680F\u9AD8\u5EA6

js
onLoad() {
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u5E38\u7528 api \u7B49","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u72B6\u6001\u680F\u9AD8\u5EA6","slug":"_1-\u72B6\u6001\u680F\u9AD8\u5EA6","link":"#_1-\u72B6\u6001\u680F\u9AD8\u5EA6","children":[]},{"level":2,"title":"2. \u81EA\u5B9A\u4E49\u72B6\u6001\u680F","slug":"_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","link":"#_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","children":[]},{"level":2,"title":"3. \u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","slug":"_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","link":"#_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","children":[{"level":3,"title":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","slug":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","link":"#\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","children":[]}]}],"relativePath":"pages/uniapp/index.md"}'),p={name:"pages/uniapp/index.md"},o=l(`

\u5E38\u7528 api \u7B49

1. \u72B6\u6001\u680F\u9AD8\u5EA6

js \u83B7\u53D6\u72B6\u6001\u680F\u9AD8\u5EA6

js
onLoad() {
 		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; // \u83B7\u53D6\u72B6\u6001\u680F\u9AD8\u5EA6
 },
 

uni-app \u63D0\u4F9B\u5185\u7F6E CSS \u53D8\u91CF

\u5F53\u8BBE\u7F6E "navigationStyle":"custom" \u53D6\u6D88\u539F\u751F\u5BFC\u822A\u680F\u540E\uFF0C\u7531\u4E8E\u7A97\u4F53\u4E3A\u6C89\u6D78\u5F0F\uFF0C\u5360\u636E\u4E86\u72B6\u6001\u680F\u4F4D\u7F6E\u3002\u6B64\u65F6\u53EF\u4EE5\u4F7F\u7528\u4E00\u4E2A\u9AD8\u5EA6\u4E3A var(--status-bar-height) \u7684 view \u653E\u5728\u9875\u9762\u9876\u90E8\uFF0C\u907F\u514D\u9875\u9762\u5185\u5BB9\u51FA\u73B0\u5728\u72B6\u6001\u680F\u3002

css
.navBar {
diff --git a/assets/pages_uniapp_index.md.a99ff0a3.lean.js b/assets/pages_uniapp_index.md.ae5a24c3.lean.js
similarity index 94%
rename from assets/pages_uniapp_index.md.a99ff0a3.lean.js
rename to assets/pages_uniapp_index.md.ae5a24c3.lean.js
index 1d15256..e86d6a8 100644
--- a/assets/pages_uniapp_index.md.a99ff0a3.lean.js
+++ b/assets/pages_uniapp_index.md.ae5a24c3.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u5E38\u7528 api \u7B49","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u72B6\u6001\u680F\u9AD8\u5EA6","slug":"_1-\u72B6\u6001\u680F\u9AD8\u5EA6","link":"#_1-\u72B6\u6001\u680F\u9AD8\u5EA6","children":[]},{"level":2,"title":"2. \u81EA\u5B9A\u4E49\u72B6\u6001\u680F","slug":"_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","link":"#_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","children":[]},{"level":2,"title":"3. \u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","slug":"_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","link":"#_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","children":[{"level":3,"title":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","slug":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","link":"#\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","children":[]}]}],"relativePath":"pages/uniapp/index.md"}'),p={name:"pages/uniapp/index.md"},o=l("",18),t=[o];function e(c,r,F,D,y,C){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u5E38\u7528 api \u7B49","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u72B6\u6001\u680F\u9AD8\u5EA6","slug":"_1-\u72B6\u6001\u680F\u9AD8\u5EA6","link":"#_1-\u72B6\u6001\u680F\u9AD8\u5EA6","children":[]},{"level":2,"title":"2. \u81EA\u5B9A\u4E49\u72B6\u6001\u680F","slug":"_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","link":"#_2-\u81EA\u5B9A\u4E49\u72B6\u6001\u680F","children":[]},{"level":2,"title":"3. \u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","slug":"_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","link":"#_3-\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u5B9E\u73B0\u5438\u9876\u6548\u679C","children":[{"level":3,"title":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","slug":"\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","link":"#\u4E3B\u8981\u5B9E\u73B0\u4EE3\u7801","children":[]}]}],"relativePath":"pages/uniapp/index.md"}'),p={name:"pages/uniapp/index.md"},o=l("",18),t=[o];function e(c,r,F,D,y,C){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{i as __pageData,u as default};
diff --git a/assets/pages_vite_index.md.616ac925.js b/assets/pages_vite_index.md.55a91e0d.js
similarity index 99%
rename from assets/pages_vite_index.md.616ac925.js
rename to assets/pages_vite_index.md.55a91e0d.js
index be8a299..718511e 100644
--- a/assets/pages_vite_index.md.616ac925.js
+++ b/assets/pages_vite_index.md.55a91e0d.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as l,a as n}from"./app.cac277bf.js";const A=JSON.parse('{"title":"vite \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. i\u200Bmport.meta.glob \u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","slug":"_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","link":"#_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","children":[]},{"level":2,"title":"2. vite \u6BD4 webpack \u5FEB\u7684\u539F\u56E0","slug":"_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","link":"#_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","children":[]}],"relativePath":"pages/vite/index.md"}'),e={name:"pages/vite/index.md"},o=n(`

vite \u76F8\u5173

1. import.meta.glob \u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6

js
// \u83B7\u53D6\u6240\u6709\u7EC4\u4EF6\u4FE1\u606F
+import{_ as s,o as a,c as l,a as n}from"./app.88185e12.js";const A=JSON.parse('{"title":"vite \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. i\u200Bmport.meta.glob \u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","slug":"_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","link":"#_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","children":[]},{"level":2,"title":"2. vite \u6BD4 webpack \u5FEB\u7684\u539F\u56E0","slug":"_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","link":"#_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","children":[]}],"relativePath":"pages/vite/index.md"}'),e={name:"pages/vite/index.md"},o=n(`

vite \u76F8\u5173

1. import.meta.glob \u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6

js
// \u83B7\u53D6\u6240\u6709\u7EC4\u4EF6\u4FE1\u606F
 const allRoutes = import.meta.glob("@/components/**/index.vue", {
   //\u8BBE\u7F6E\u4E3A true \u76F4\u63A5\u5F15\u5165\u6240\u6709\u7684\u6A21\u5757\uFF08\u4F8B\u5982\u4F9D\u8D56\u4E8E\u8FD9\u4E9B\u6A21\u5757\u4E2D\u7684\u526F\u4F5C\u7528\u9996\u5148\u88AB\u5E94\u7528\uFF09
   eager: true,
diff --git a/assets/pages_vite_index.md.616ac925.lean.js b/assets/pages_vite_index.md.55a91e0d.lean.js
similarity index 92%
rename from assets/pages_vite_index.md.616ac925.lean.js
rename to assets/pages_vite_index.md.55a91e0d.lean.js
index 58066ba..15af793 100644
--- a/assets/pages_vite_index.md.616ac925.lean.js
+++ b/assets/pages_vite_index.md.55a91e0d.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as l,a as n}from"./app.cac277bf.js";const A=JSON.parse('{"title":"vite \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. i\u200Bmport.meta.glob \u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","slug":"_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","link":"#_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","children":[]},{"level":2,"title":"2. vite \u6BD4 webpack \u5FEB\u7684\u539F\u56E0","slug":"_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","link":"#_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","children":[]}],"relativePath":"pages/vite/index.md"}'),e={name:"pages/vite/index.md"},o=n("",9),p=[o];function t(c,r,i,D,y,F){return a(),l("div",null,p)}const C=s(e,[["render",t]]);export{A as __pageData,C as default};
+import{_ as s,o as a,c as l,a as n}from"./app.88185e12.js";const A=JSON.parse('{"title":"vite \u76F8\u5173","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. i\u200Bmport.meta.glob \u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","slug":"_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","link":"#_1-import-meta-glob-\u83B7\u53D6\u6587\u4EF6\u5939\u4E0B\u7684\u6587\u4EF6","children":[]},{"level":2,"title":"2. vite \u6BD4 webpack \u5FEB\u7684\u539F\u56E0","slug":"_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","link":"#_2-vite-\u6BD4-webpack-\u5FEB\u7684\u539F\u56E0","children":[]}],"relativePath":"pages/vite/index.md"}'),e={name:"pages/vite/index.md"},o=n("",9),p=[o];function t(c,r,i,D,y,F){return a(),l("div",null,p)}const C=s(e,[["render",t]]);export{A as __pageData,C as default};
diff --git a/assets/pages_vite_vitepress.md.432c8ce6.js b/assets/pages_vite_vitepress.md.88d59af6.js
similarity index 95%
rename from assets/pages_vite_vitepress.md.432c8ce6.js
rename to assets/pages_vite_vitepress.md.88d59af6.js
index fa78467..65bfb7e 100644
--- a/assets/pages_vite_vitepress.md.432c8ce6.js
+++ b/assets/pages_vite_vitepress.md.88d59af6.js
@@ -1 +1 @@
-import{_ as e,o as t,c as a,a as r}from"./app.cac277bf.js";const u=JSON.parse('{"title":"vitepress","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00. \u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD \u{1F50D}","slug":"\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","link":"#\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","children":[]}],"relativePath":"pages/vite/vitepress.md"}'),s={name:"pages/vite/vitepress.md"},i=r('

vitepress

\u4E00. \u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD \u{1F50D}

\u53C2\u8003\u4E0B\u9762\u4E24\u7BC7\u6587\u7AE0\u5373\u53EF

https://blog.csdn.net/weixin_42429718/article/details/128361258 > https://juejin.cn/post/7157340749065895944

',4),n=[i];function o(c,_,p,l,d,h){return t(),a("div",null,n)}const v=e(s,[["render",o]]);export{u as __pageData,v as default}; +import{_ as e,o as t,c as a,a as r}from"./app.88185e12.js";const u=JSON.parse('{"title":"vitepress","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00. \u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD \u{1F50D}","slug":"\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","link":"#\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","children":[]}],"relativePath":"pages/vite/vitepress.md"}'),s={name:"pages/vite/vitepress.md"},i=r('

vitepress

\u4E00. \u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD \u{1F50D}

\u53C2\u8003\u4E0B\u9762\u4E24\u7BC7\u6587\u7AE0\u5373\u53EF

https://blog.csdn.net/weixin_42429718/article/details/128361258 > https://juejin.cn/post/7157340749065895944

',4),n=[i];function o(c,_,p,l,d,h){return t(),a("div",null,n)}const v=e(s,[["render",o]]);export{u as __pageData,v as default}; diff --git a/assets/pages_vite_vitepress.md.432c8ce6.lean.js b/assets/pages_vite_vitepress.md.88d59af6.lean.js similarity index 89% rename from assets/pages_vite_vitepress.md.432c8ce6.lean.js rename to assets/pages_vite_vitepress.md.88d59af6.lean.js index 66f5025..93d68ef 100644 --- a/assets/pages_vite_vitepress.md.432c8ce6.lean.js +++ b/assets/pages_vite_vitepress.md.88d59af6.lean.js @@ -1 +1 @@ -import{_ as e,o as t,c as a,a as r}from"./app.cac277bf.js";const u=JSON.parse('{"title":"vitepress","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00. \u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD \u{1F50D}","slug":"\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","link":"#\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","children":[]}],"relativePath":"pages/vite/vitepress.md"}'),s={name:"pages/vite/vitepress.md"},i=r("",4),n=[i];function o(c,_,p,l,d,h){return t(),a("div",null,n)}const v=e(s,[["render",o]]);export{u as __pageData,v as default}; +import{_ as e,o as t,c as a,a as r}from"./app.88185e12.js";const u=JSON.parse('{"title":"vitepress","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00. \u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD \u{1F50D}","slug":"\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","link":"#\u4E00-\u5168\u5C40\u96C6\u6210\u641C\u7D22\u529F\u80FD-\u{1F50D}","children":[]}],"relativePath":"pages/vite/vitepress.md"}'),s={name:"pages/vite/vitepress.md"},i=r("",4),n=[i];function o(c,_,p,l,d,h){return t(),a("div",null,n)}const v=e(s,[["render",o]]);export{u as __pageData,v as default}; diff --git a/assets/pages_vscodeTool_index.md.c6793020.js b/assets/pages_vscodeTool_index.md.19107cde.js similarity index 99% rename from assets/pages_vscodeTool_index.md.c6793020.js rename to assets/pages_vscodeTool_index.md.19107cde.js index 0c491f6..d338160 100644 --- a/assets/pages_vscodeTool_index.md.c6793020.js +++ b/assets/pages_vscodeTool_index.md.19107cde.js @@ -1,4 +1,4 @@ -import{_ as s,o,c as l,a}from"./app.cac277bf.js";const C=JSON.parse('{"title":"vscode \u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5FC5\u5907\u63D2\u4EF6","slug":"\u5FC5\u5907\u63D2\u4EF6","link":"#\u5FC5\u5907\u63D2\u4EF6","children":[]},{"level":2,"title":"\u597D\u7528\u63D2\u4EF6","slug":"\u597D\u7528\u63D2\u4EF6","link":"#\u597D\u7528\u63D2\u4EF6","children":[]},{"level":2,"title":"\u5FEB\u6377\u952E","slug":"\u5FEB\u6377\u952E","link":"#\u5FEB\u6377\u952E","children":[]}],"relativePath":"pages/vscodeTool/index.md"}'),e={name:"pages/vscodeTool/index.md"},n=a(`

vscode \u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E

\u5FC5\u5907\u63D2\u4EF6

  1. Bookmarks \u529F\u80FD\uFF1A\u5E38\u7528\u4E8E\u8BFB\u6E90\u7801\u8FDB\u884C\u6807\u8BB0\u884C\uFF0C\u8DF3\u8F6C\uFF08\u4EE3\u7801\u6807\u8BB0\u5FEB\u901F\u8DF3\u8F6C\uFF09
  2. ESLint \u529F\u80FD\uFF1A\u4EE3\u7801\u89C4\u8303\u68C0\u67E5
  3. Prettier - Code formatter \u529F\u80FD\uFF1A\u4EE3\u7801\u7F8E\u5316\uFF0C\u81EA\u52A8\u683C\u5F0F\u5316\u6210\u89C4\u8303\u683C\u5F0F
  4. Project Manager \u529F\u80FD\uFF1A\u9879\u76EE\u7BA1\u7406\u63D2\u4EF6\uFF0C\u5F53\u5F00\u53D1\u591A\u4E2A\u9879\u76EE\u65F6\uFF0C\u53EF\u4EE5\u5FEB\u901F\u8DF3\u8F6C
  5. Path Intellisense \u529F\u80FD\uFF1A\u8DEF\u5F84\u667A\u80FD\u63D0\u793A
  6. Image preview \u529F\u80FD\uFF1A\u5F53\u5F15\u5165\u8DEF\u5F84\u4E3A\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u9884\u89C8\u5F53\u524D\u56FE\u7247
  7. GitLens \u529F\u80FD\uFF1A\u589E\u5F3A\u4E86 git \u529F\u80FD\uFF0C\u652F\u6301\u5728 VSCode \u67E5\u770B\u4F5C\u8005\u3001\u4FEE\u6539\u65F6\u95F4\u7B49\u7B49
  8. open in browser \u529F\u80FD\uFF1A\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u5F53\u524D\u6587\u4EF6
  9. auto-close-tag\uFF1A\u81EA\u52A8\u5173\u95ED\u6807\u7B7E\u3002

\u597D\u7528\u63D2\u4EF6

  1. Code Spell Checker \uFF1A\u4E00\u4E2A\u7528\u4E8E\u68C0\u67E5\u5355\u8BCD\u62FC\u5199\u7684\u63D2\u4EF6\u3002
  2. javascript console utils\uFF1A

Cmd+Shift+L\uFF1A\u9009\u4E2D\u53D8\u91CF\uFF0C\u5728\u5F53\u524D\u4EE3\u7801\u4E0B\u63D2\u5165\u4E00\u884C clg Cmd+Shift+D\uFF1A\u5220\u9664\u63D2\u5165\u7684\u90A3\u4E00\u884C\u4EE3\u7801

  1. Import Cost\uFF1A\u663E\u793A\u4F9D\u8D56\u7684\u5927\u5C0F
  2. Auto Rename Tag\uFF1A\u81EA\u52A8\u91CD\u547D\u540D\u6807\u7B7E
  3. Code Runner\uFF1A\u4E00\u952E\u6267\u884C\u5404\u79CD\u8BED\u8A00\u4EE3\u7801\uFF08\u5E38\u7528\u4E8E\u6D4B\u8BD5\uFF09
  4. Debugger for Chrome\uFF1A\u5728 VSCode \u7AEF\uFF0C\u8C03\u8BD5\u4EE3\u7801
  5. Live ServerPP\uFF1A\u5728\u670D\u52A1\u5668\u7AEF\u6253\u5F00\u4F60\u7684\u6587\u4EF6\uFF0C\u5B9E\u65F6\u663E\u793A\u4F60\u4FEE\u6539\u7684\u4EE3\u7801 \u652F\u6301 websocket \u6D88\u606F\u670D\u52A1\uFF0C\u53EF\u4EE5\u7528\u4E8E\u8C03\u8BD5 websocket \u5BA2\u6237\u7AEF \u652F\u6301\u53EF\u7F16\u7A0B\u865A\u62DF\u6587\u4EF6\uFF0C\u53EF\u7528\u4E8E\u6A21\u62DF\u670D\u52A1\u7AEF API \u63A5\u53E3
  6. Svg Preview\uFF1A\u53EF\u4EE5\u663E\u793A\u4F60\u7684 SVG \u56FE\u7247\uFF0C\u8FD8\u53EF\u4EE5\u7F16\u8F91
  7. Template String Converter\uFF1A\u5728\u5B57\u7B26\u4E32\u4E2D\u8F93\u5165$\u89E6\u53D1\uFF0C\u5C06\u5B57\u7B26\u4E32\u8F6C\u6362\u4E3A\u6A21\u677F\u5B57\u7B26\u4E32
  8. JavaScript (ES6) code snippets\uFF1AES6 \u7684 js \u4EE3\u7801\u7247\u6BB5\uFF0C\u6BD4\u5982 clg---console.log
  9. any-rule\uFF1A\u5E38\u7528\u6B63\u5219\u5224\u65AD\u8868\u5355\u5185\u5BB9
  10. vscode-icons\uFF1AVSCode \u6587\u4EF6\u5939&\u6587\u4EF6\u56FE\u6807
  11. echarts-vscode-extension\uFF1A --\u5B89\u88C5\u63D2\u4EF6\u540E\uFF0Cctrl+shift+p \u8F93\u5165 active Echars \u5373\u53EF\u5F00\u542F\u667A\u80FD\u63D0\u793A\uFF0C --\u63D0\u793A\u5404\u79CD Echar \u4E2D Option \u7684\u5C5E\u6027\uFF0C\u633A\u5F3A\u5927\u7684
  12. A-super-translate\uFF1A\u9009\u4E2D\u884C\uFF0CCtrl+Shift+p \u8F93\u5165 \u7FFB\u8BD1\uFF0C\u952E\u5165 ctrl+\`\u518D\u6309\u4E0B ctrl+1 \u4E3A\u7FFB\u8BD1\u76F4\u63A5\u66FF\u6362\u9009\u4E2D\u533A\u57DF
  13. One Dark Pro\uFF1A\u989C\u8272\u4E3B\u9898
  14. VS Code Counter\uFF1A\u7EDF\u8BA1\u4F60\u7684\u4EE3\u7801\u884C\u6570\uFF0C\u70B9\u51FB Vscode \u9876\u90E8\u83DC\u5355 \u67E5\u770B -> \u547D\u4EE4\u9762\u677F \uFF0C\u8F93\u5165 count
  15. koroFileHeader: \u6587\u4EF6\u5934\u90E8\u6CE8\u91CA\u548C\u51FD\u6570\u6CE8\u91CA\u7684\u63D2\u4EF6
  16. GitHub Repositories: \u8FDC\u7A0B\u67E5\u770B github \u4E0A\u7684\u4ED3\u5E93\u4EE3\u7801

    \u5728 settings.json \u4E2D\u914D\u7F6E fileheader

  17. rect client
js
// \u6587\u4EF6\u5934\u90E8\u6CE8\u91CA
+import{_ as s,o,c as l,a}from"./app.88185e12.js";const C=JSON.parse('{"title":"vscode \u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5FC5\u5907\u63D2\u4EF6","slug":"\u5FC5\u5907\u63D2\u4EF6","link":"#\u5FC5\u5907\u63D2\u4EF6","children":[]},{"level":2,"title":"\u597D\u7528\u63D2\u4EF6","slug":"\u597D\u7528\u63D2\u4EF6","link":"#\u597D\u7528\u63D2\u4EF6","children":[]},{"level":2,"title":"\u5FEB\u6377\u952E","slug":"\u5FEB\u6377\u952E","link":"#\u5FEB\u6377\u952E","children":[]}],"relativePath":"pages/vscodeTool/index.md"}'),e={name:"pages/vscodeTool/index.md"},n=a(`

vscode \u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E

\u5FC5\u5907\u63D2\u4EF6

  1. Bookmarks \u529F\u80FD\uFF1A\u5E38\u7528\u4E8E\u8BFB\u6E90\u7801\u8FDB\u884C\u6807\u8BB0\u884C\uFF0C\u8DF3\u8F6C\uFF08\u4EE3\u7801\u6807\u8BB0\u5FEB\u901F\u8DF3\u8F6C\uFF09
  2. ESLint \u529F\u80FD\uFF1A\u4EE3\u7801\u89C4\u8303\u68C0\u67E5
  3. Prettier - Code formatter \u529F\u80FD\uFF1A\u4EE3\u7801\u7F8E\u5316\uFF0C\u81EA\u52A8\u683C\u5F0F\u5316\u6210\u89C4\u8303\u683C\u5F0F
  4. Project Manager \u529F\u80FD\uFF1A\u9879\u76EE\u7BA1\u7406\u63D2\u4EF6\uFF0C\u5F53\u5F00\u53D1\u591A\u4E2A\u9879\u76EE\u65F6\uFF0C\u53EF\u4EE5\u5FEB\u901F\u8DF3\u8F6C
  5. Path Intellisense \u529F\u80FD\uFF1A\u8DEF\u5F84\u667A\u80FD\u63D0\u793A
  6. Image preview \u529F\u80FD\uFF1A\u5F53\u5F15\u5165\u8DEF\u5F84\u4E3A\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u9884\u89C8\u5F53\u524D\u56FE\u7247
  7. GitLens \u529F\u80FD\uFF1A\u589E\u5F3A\u4E86 git \u529F\u80FD\uFF0C\u652F\u6301\u5728 VSCode \u67E5\u770B\u4F5C\u8005\u3001\u4FEE\u6539\u65F6\u95F4\u7B49\u7B49
  8. open in browser \u529F\u80FD\uFF1A\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u5F53\u524D\u6587\u4EF6
  9. auto-close-tag\uFF1A\u81EA\u52A8\u5173\u95ED\u6807\u7B7E\u3002

\u597D\u7528\u63D2\u4EF6

  1. Code Spell Checker \uFF1A\u4E00\u4E2A\u7528\u4E8E\u68C0\u67E5\u5355\u8BCD\u62FC\u5199\u7684\u63D2\u4EF6\u3002
  2. javascript console utils\uFF1A

Cmd+Shift+L\uFF1A\u9009\u4E2D\u53D8\u91CF\uFF0C\u5728\u5F53\u524D\u4EE3\u7801\u4E0B\u63D2\u5165\u4E00\u884C clg Cmd+Shift+D\uFF1A\u5220\u9664\u63D2\u5165\u7684\u90A3\u4E00\u884C\u4EE3\u7801

  1. Import Cost\uFF1A\u663E\u793A\u4F9D\u8D56\u7684\u5927\u5C0F
  2. Auto Rename Tag\uFF1A\u81EA\u52A8\u91CD\u547D\u540D\u6807\u7B7E
  3. Code Runner\uFF1A\u4E00\u952E\u6267\u884C\u5404\u79CD\u8BED\u8A00\u4EE3\u7801\uFF08\u5E38\u7528\u4E8E\u6D4B\u8BD5\uFF09
  4. Debugger for Chrome\uFF1A\u5728 VSCode \u7AEF\uFF0C\u8C03\u8BD5\u4EE3\u7801
  5. Live ServerPP\uFF1A\u5728\u670D\u52A1\u5668\u7AEF\u6253\u5F00\u4F60\u7684\u6587\u4EF6\uFF0C\u5B9E\u65F6\u663E\u793A\u4F60\u4FEE\u6539\u7684\u4EE3\u7801 \u652F\u6301 websocket \u6D88\u606F\u670D\u52A1\uFF0C\u53EF\u4EE5\u7528\u4E8E\u8C03\u8BD5 websocket \u5BA2\u6237\u7AEF \u652F\u6301\u53EF\u7F16\u7A0B\u865A\u62DF\u6587\u4EF6\uFF0C\u53EF\u7528\u4E8E\u6A21\u62DF\u670D\u52A1\u7AEF API \u63A5\u53E3
  6. Svg Preview\uFF1A\u53EF\u4EE5\u663E\u793A\u4F60\u7684 SVG \u56FE\u7247\uFF0C\u8FD8\u53EF\u4EE5\u7F16\u8F91
  7. Template String Converter\uFF1A\u5728\u5B57\u7B26\u4E32\u4E2D\u8F93\u5165$\u89E6\u53D1\uFF0C\u5C06\u5B57\u7B26\u4E32\u8F6C\u6362\u4E3A\u6A21\u677F\u5B57\u7B26\u4E32
  8. JavaScript (ES6) code snippets\uFF1AES6 \u7684 js \u4EE3\u7801\u7247\u6BB5\uFF0C\u6BD4\u5982 clg---console.log
  9. any-rule\uFF1A\u5E38\u7528\u6B63\u5219\u5224\u65AD\u8868\u5355\u5185\u5BB9
  10. vscode-icons\uFF1AVSCode \u6587\u4EF6\u5939&\u6587\u4EF6\u56FE\u6807
  11. echarts-vscode-extension\uFF1A --\u5B89\u88C5\u63D2\u4EF6\u540E\uFF0Cctrl+shift+p \u8F93\u5165 active Echars \u5373\u53EF\u5F00\u542F\u667A\u80FD\u63D0\u793A\uFF0C --\u63D0\u793A\u5404\u79CD Echar \u4E2D Option \u7684\u5C5E\u6027\uFF0C\u633A\u5F3A\u5927\u7684
  12. A-super-translate\uFF1A\u9009\u4E2D\u884C\uFF0CCtrl+Shift+p \u8F93\u5165 \u7FFB\u8BD1\uFF0C\u952E\u5165 ctrl+\`\u518D\u6309\u4E0B ctrl+1 \u4E3A\u7FFB\u8BD1\u76F4\u63A5\u66FF\u6362\u9009\u4E2D\u533A\u57DF
  13. One Dark Pro\uFF1A\u989C\u8272\u4E3B\u9898
  14. VS Code Counter\uFF1A\u7EDF\u8BA1\u4F60\u7684\u4EE3\u7801\u884C\u6570\uFF0C\u70B9\u51FB Vscode \u9876\u90E8\u83DC\u5355 \u67E5\u770B -> \u547D\u4EE4\u9762\u677F \uFF0C\u8F93\u5165 count
  15. koroFileHeader: \u6587\u4EF6\u5934\u90E8\u6CE8\u91CA\u548C\u51FD\u6570\u6CE8\u91CA\u7684\u63D2\u4EF6
  16. GitHub Repositories: \u8FDC\u7A0B\u67E5\u770B github \u4E0A\u7684\u4ED3\u5E93\u4EE3\u7801

    \u5728 settings.json \u4E2D\u914D\u7F6E fileheader

  17. rect client
js
// \u6587\u4EF6\u5934\u90E8\u6CE8\u91CA
 "fileheader.customMade": {
   "Author": "zhs", // \u6587\u4EF6\u4F5C\u8005
   "Date": "Do not edit", // \u6587\u4EF6\u521B\u5EFA\u65F6\u95F4
diff --git a/assets/pages_vscodeTool_index.md.c6793020.lean.js b/assets/pages_vscodeTool_index.md.19107cde.lean.js
similarity index 91%
rename from assets/pages_vscodeTool_index.md.c6793020.lean.js
rename to assets/pages_vscodeTool_index.md.19107cde.lean.js
index 912a062..11bcf03 100644
--- a/assets/pages_vscodeTool_index.md.c6793020.lean.js
+++ b/assets/pages_vscodeTool_index.md.19107cde.lean.js
@@ -1 +1 @@
-import{_ as s,o,c as l,a}from"./app.cac277bf.js";const C=JSON.parse('{"title":"vscode \u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5FC5\u5907\u63D2\u4EF6","slug":"\u5FC5\u5907\u63D2\u4EF6","link":"#\u5FC5\u5907\u63D2\u4EF6","children":[]},{"level":2,"title":"\u597D\u7528\u63D2\u4EF6","slug":"\u597D\u7528\u63D2\u4EF6","link":"#\u597D\u7528\u63D2\u4EF6","children":[]},{"level":2,"title":"\u5FEB\u6377\u952E","slug":"\u5FEB\u6377\u952E","link":"#\u5FEB\u6377\u952E","children":[]}],"relativePath":"pages/vscodeTool/index.md"}'),e={name:"pages/vscodeTool/index.md"},n=a("",10),p=[n];function t(c,r,i,D,d,F){return o(),l("div",null,p)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
+import{_ as s,o,c as l,a}from"./app.88185e12.js";const C=JSON.parse('{"title":"vscode \u76F8\u5173\u63D2\u4EF6\u548C\u5FEB\u6377\u952E","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5FC5\u5907\u63D2\u4EF6","slug":"\u5FC5\u5907\u63D2\u4EF6","link":"#\u5FC5\u5907\u63D2\u4EF6","children":[]},{"level":2,"title":"\u597D\u7528\u63D2\u4EF6","slug":"\u597D\u7528\u63D2\u4EF6","link":"#\u597D\u7528\u63D2\u4EF6","children":[]},{"level":2,"title":"\u5FEB\u6377\u952E","slug":"\u5FEB\u6377\u952E","link":"#\u5FEB\u6377\u952E","children":[]}],"relativePath":"pages/vscodeTool/index.md"}'),e={name:"pages/vscodeTool/index.md"},n=a("",10),p=[n];function t(c,r,i,D,d,F){return o(),l("div",null,p)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
diff --git a/assets/pages_vue3_basic_computed.md.1263e59b.js b/assets/pages_vue3-base_basic_computed.md.af4881fb.js
similarity index 95%
rename from assets/pages_vue3_basic_computed.md.1263e59b.js
rename to assets/pages_vue3-base_basic_computed.md.af4881fb.js
index b665014..8e0bf42 100644
--- a/assets/pages_vue3_basic_computed.md.1263e59b.js
+++ b/assets/pages_vue3-base_basic_computed.md.af4881fb.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u8BA1\u7B97\u5C5E\u6027 computed()","slug":"\u8BA1\u7B97\u5C5E\u6027-computed","link":"#\u8BA1\u7B97\u5C5E\u6027-computed","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watch()","slug":"\u4FA6\u542C\u5668-watch","link":"#\u4FA6\u542C\u5668-watch","children":[]},{"level":2,"title":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","slug":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","link":"#\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watchEffect()","slug":"\u4FA6\u542C\u5668-watcheffect","link":"#\u4FA6\u542C\u5668-watcheffect","children":[]},{"level":2,"title":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","slug":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","link":"#\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","children":[]},{"level":2,"title":"\u505C\u6B62\u4FA6\u542C\u5668","slug":"\u505C\u6B62\u4FA6\u542C\u5668","link":"#\u505C\u6B62\u4FA6\u542C\u5668","children":[]}],"relativePath":"pages/vue3/basic/computed.md"}'),p={name:"pages/vue3/basic/computed.md"},o=l(`

\u8BA1\u7B97\u5C5E\u6027 computed()

\u63A8\u8350\u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027\u6765\u63CF\u8FF0\u4F9D\u8D56\u54CD\u5E94\u5F0F\u72B6\u6001\u7684\u590D\u6742\u903B\u8F91

  1. \u8BA1\u7B97\u5C5E\u6027\u9ED8\u8BA4\u662F\u53EA\u8BFB\u7684\uFF0Ccomputed() \u65B9\u6CD5\u671F\u671B\u63A5\u6536\u4E00\u4E2A getter \u51FD\u6570\uFF0C\u8FD4\u56DE\u503C\u4E3A\u4E00\u4E2A\u8BA1\u7B97\u5C5E\u6027 ref,\u6A21\u7248\u4E2D\u4F1A\u81EA\u52A8\u89E3\u5305\uFF1B
  2. \u8BA1\u7B97\u5C5E\u6027\u503C\u4F1A\u57FA\u4E8E\u5176\u54CD\u5E94\u5F0F\u4F9D\u8D56\u88AB\u7F13\u5B58;
  3. \u8BA1\u7B97\u5C5E\u6027\u7684 getter \u5E94\u53EA\u505A\u8BA1\u7B97\u800C\u6CA1\u6709\u4EFB\u4F55\u5176\u4ED6\u7684\u526F\u4F5C\u7528\uFF0C\u8FD9\u4E00\u70B9\u975E\u5E38\u91CD\u8981\uFF0C\u8BF7\u52A1\u5FC5\u7262\u8BB0\u3002\u4E0D\u8981\u5728 getter \u4E2D\u505A\u5F02\u6B65\u8BF7\u6C42\u6216\u8005\u66F4\u6539 DOM\uFF01
  4. \u907F\u514D\u76F4\u63A5\u4FEE\u6539\u8BA1\u7B97\u5C5E\u6027\u503C"\uFF0C\u4ECE\u8BA1\u7B97\u5C5E\u6027\u8FD4\u56DE\u7684\u503C\u662F\u6D3E\u751F\u72B6\u6001\u3002\u53EF\u4EE5\u628A\u5B83\u770B\u4F5C\u662F\u4E00\u4E2A\u201C\u4E34\u65F6\u5FEB\u7167\u201D\uFF0C\u6BCF\u5F53\u6E90\u72B6\u6001\u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u5C31\u4F1A\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684\u5FEB\u7167\u3002\u66F4\u6539\u5FEB\u7167\u662F\u6CA1\u6709\u610F\u4E49\u7684;
vue
<script setup>
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u8BA1\u7B97\u5C5E\u6027 computed()","slug":"\u8BA1\u7B97\u5C5E\u6027-computed","link":"#\u8BA1\u7B97\u5C5E\u6027-computed","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watch()","slug":"\u4FA6\u542C\u5668-watch","link":"#\u4FA6\u542C\u5668-watch","children":[]},{"level":2,"title":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","slug":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","link":"#\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watchEffect()","slug":"\u4FA6\u542C\u5668-watcheffect","link":"#\u4FA6\u542C\u5668-watcheffect","children":[]},{"level":2,"title":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","slug":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","link":"#\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","children":[]},{"level":2,"title":"\u505C\u6B62\u4FA6\u542C\u5668","slug":"\u505C\u6B62\u4FA6\u542C\u5668","link":"#\u505C\u6B62\u4FA6\u542C\u5668","children":[]}],"relativePath":"pages/vue3-base/basic/computed.md"}'),p={name:"pages/vue3-base/basic/computed.md"},o=l(`

\u8BA1\u7B97\u5C5E\u6027 computed()

\u63A8\u8350\u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027\u6765\u63CF\u8FF0\u4F9D\u8D56\u54CD\u5E94\u5F0F\u72B6\u6001\u7684\u590D\u6742\u903B\u8F91

  1. \u8BA1\u7B97\u5C5E\u6027\u9ED8\u8BA4\u662F\u53EA\u8BFB\u7684\uFF0Ccomputed() \u65B9\u6CD5\u671F\u671B\u63A5\u6536\u4E00\u4E2A getter \u51FD\u6570\uFF0C\u8FD4\u56DE\u503C\u4E3A\u4E00\u4E2A\u8BA1\u7B97\u5C5E\u6027 ref,\u6A21\u7248\u4E2D\u4F1A\u81EA\u52A8\u89E3\u5305\uFF1B
  2. \u8BA1\u7B97\u5C5E\u6027\u503C\u4F1A\u57FA\u4E8E\u5176\u54CD\u5E94\u5F0F\u4F9D\u8D56\u88AB\u7F13\u5B58;
  3. \u8BA1\u7B97\u5C5E\u6027\u7684 getter \u5E94\u53EA\u505A\u8BA1\u7B97\u800C\u6CA1\u6709\u4EFB\u4F55\u5176\u4ED6\u7684\u526F\u4F5C\u7528\uFF0C\u8FD9\u4E00\u70B9\u975E\u5E38\u91CD\u8981\uFF0C\u8BF7\u52A1\u5FC5\u7262\u8BB0\u3002\u4E0D\u8981\u5728 getter \u4E2D\u505A\u5F02\u6B65\u8BF7\u6C42\u6216\u8005\u66F4\u6539 DOM\uFF01
  4. \u907F\u514D\u76F4\u63A5\u4FEE\u6539\u8BA1\u7B97\u5C5E\u6027\u503C"\uFF0C\u4ECE\u8BA1\u7B97\u5C5E\u6027\u8FD4\u56DE\u7684\u503C\u662F\u6D3E\u751F\u72B6\u6001\u3002\u53EF\u4EE5\u628A\u5B83\u770B\u4F5C\u662F\u4E00\u4E2A\u201C\u4E34\u65F6\u5FEB\u7167\u201D\uFF0C\u6BCF\u5F53\u6E90\u72B6\u6001\u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u5C31\u4F1A\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684\u5FEB\u7167\u3002\u66F4\u6539\u5FEB\u7167\u662F\u6CA1\u6709\u610F\u4E49\u7684;
vue
<script setup>
 import { ref, computed } from "vue";
 
 const firstName = ref("John");
diff --git a/assets/pages_vue3_basic_computed.md.1263e59b.lean.js b/assets/pages_vue3-base_basic_computed.md.af4881fb.lean.js
similarity index 78%
rename from assets/pages_vue3_basic_computed.md.1263e59b.lean.js
rename to assets/pages_vue3-base_basic_computed.md.af4881fb.lean.js
index 6c8b779..2b15ff4 100644
--- a/assets/pages_vue3_basic_computed.md.1263e59b.lean.js
+++ b/assets/pages_vue3-base_basic_computed.md.af4881fb.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u8BA1\u7B97\u5C5E\u6027 computed()","slug":"\u8BA1\u7B97\u5C5E\u6027-computed","link":"#\u8BA1\u7B97\u5C5E\u6027-computed","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watch()","slug":"\u4FA6\u542C\u5668-watch","link":"#\u4FA6\u542C\u5668-watch","children":[]},{"level":2,"title":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","slug":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","link":"#\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watchEffect()","slug":"\u4FA6\u542C\u5668-watcheffect","link":"#\u4FA6\u542C\u5668-watcheffect","children":[]},{"level":2,"title":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","slug":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","link":"#\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","children":[]},{"level":2,"title":"\u505C\u6B62\u4FA6\u542C\u5668","slug":"\u505C\u6B62\u4FA6\u542C\u5668","link":"#\u505C\u6B62\u4FA6\u542C\u5668","children":[]}],"relativePath":"pages/vue3/basic/computed.md"}'),p={name:"pages/vue3/basic/computed.md"},o=l("",27),e=[o];function c(t,r,D,y,F,A){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u8BA1\u7B97\u5C5E\u6027 computed()","slug":"\u8BA1\u7B97\u5C5E\u6027-computed","link":"#\u8BA1\u7B97\u5C5E\u6027-computed","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watch()","slug":"\u4FA6\u542C\u5668-watch","link":"#\u4FA6\u542C\u5668-watch","children":[]},{"level":2,"title":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","slug":"\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","link":"#\u6DF1\u5C42\u4FA6\u542C\u5668\u548C\u7ACB\u5373\u6267\u884C","children":[]},{"level":2,"title":"\u4FA6\u542C\u5668 watchEffect()","slug":"\u4FA6\u542C\u5668-watcheffect","link":"#\u4FA6\u542C\u5668-watcheffect","children":[]},{"level":2,"title":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","slug":"\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","link":"#\u56DE\u8C03\u7684\u89E6\u53D1\u65F6\u673A","children":[]},{"level":2,"title":"\u505C\u6B62\u4FA6\u542C\u5668","slug":"\u505C\u6B62\u4FA6\u542C\u5668","link":"#\u505C\u6B62\u4FA6\u542C\u5668","children":[]}],"relativePath":"pages/vue3-base/basic/computed.md"}'),p={name:"pages/vue3-base/basic/computed.md"},o=l("",27),e=[o];function c(t,r,D,y,F,A){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{i as __pageData,u as default};
diff --git a/assets/pages_vue3_basic_note.md.3b0f3b84.js b/assets/pages_vue3-base_basic_note.md.2007ecc2.js
similarity index 95%
rename from assets/pages_vue3_basic_note.md.3b0f3b84.js
rename to assets/pages_vue3-base_basic_note.md.2007ecc2.js
index 73c093a..3f496f5 100644
--- a/assets/pages_vue3_basic_note.md.3b0f3b84.js
+++ b/assets/pages_vue3-base_basic_note.md.2007ecc2.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"vue3 \u57FA\u7840\u77E5\u8BC6\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. DOM \u66F4\u65B0\u65F6\u673A","slug":"_1-dom-\u66F4\u65B0\u65F6\u673A","link":"#_1-dom-\u66F4\u65B0\u65F6\u673A","children":[]},{"level":2,"title":"2. \u6DF1\u5C42\u54CD\u5E94\u6027","slug":"_2-\u6DF1\u5C42\u54CD\u5E94\u6027","link":"#_2-\u6DF1\u5C42\u54CD\u5E94\u6027","children":[]},{"level":2,"title":"3. \u54CD\u5E94\u5F0F\u4EE3\u7406 vs. \u539F\u59CB\u5BF9\u8C61","slug":"_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","link":"#_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","children":[]},{"level":2,"title":"4. reactive() \u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A JavaScript \u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684 \u201C\u5F15\u7528\u201D \u673A\u5236\u3002","slug":"_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","link":"#_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","children":[]},{"level":2,"title":"5. v-if \u548C v-show","slug":"_5-v-if-\u548C-v-show","link":"#_5-v-if-\u548C-v-show","children":[]},{"level":2,"title":"6. v-for","slug":"_6-v-for","link":"#_6-v-for","children":[]},{"level":2,"title":"7. \u4E8B\u4EF6\u4FEE\u9970\u7B26","slug":"_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","link":"#_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","children":[]},{"level":2,"title":"8. \u4E0D\u5E38\u7528\u4E8B\u4EF6","slug":"_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","link":"#_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","children":[]},{"level":2,"title":"9. watch vs. watchEffect","slug":"_9-watch-vs-watcheffect","link":"#_9-watch-vs-watcheffect","children":[]},{"level":2,"title":"10. \u7EC4\u4EF6\u7684 ref","slug":"_10-\u7EC4\u4EF6\u7684-ref","link":"#_10-\u7EC4\u4EF6\u7684-ref","children":[]}],"relativePath":"pages/vue3/basic/note.md"}'),o={name:"pages/vue3/basic/note.md"},p=l(`

vue3 \u57FA\u7840\u77E5\u8BC6\u70B9

1. DOM \u66F4\u65B0\u65F6\u673A

\u5F53\u4F60\u66F4\u6539\u54CD\u5E94\u5F0F\u72B6\u6001\u540E\uFF0CDOM \u4F1A\u81EA\u52A8\u66F4\u65B0\u3002\u7136\u800C\uFF0C\u4F60\u5F97\u6CE8\u610F DOM \u7684\u66F4\u65B0\u5E76\u4E0D\u662F\u540C\u6B65\u7684\u3002\u76F8\u53CD\uFF0CVue \u5C06\u7F13\u51B2\u5B83\u4EEC\u76F4\u5230\u66F4\u65B0\u5468\u671F\u7684 \u201C\u4E0B\u4E2A\u65F6\u673A\u201D \u4EE5\u786E\u4FDD\u65E0\u8BBA\u4F60\u8FDB\u884C\u4E86\u591A\u5C11\u6B21\u72B6\u6001\u66F4\u6539\uFF0C\u6BCF\u4E2A\u7EC4\u4EF6\u90FD\u53EA\u66F4\u65B0\u4E00\u6B21\u3002

\u82E5\u8981\u7B49\u5F85\u4E00\u4E2A\u72B6\u6001\u6539\u53D8\u540E\u7684 DOM \u66F4\u65B0\u5B8C\u6210\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 nextTick() \u8FD9\u4E2A\u5168\u5C40 API\uFF1A

js
import { nextTick } from "vue";
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"vue3 \u57FA\u7840\u77E5\u8BC6\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. DOM \u66F4\u65B0\u65F6\u673A","slug":"_1-dom-\u66F4\u65B0\u65F6\u673A","link":"#_1-dom-\u66F4\u65B0\u65F6\u673A","children":[]},{"level":2,"title":"2. \u6DF1\u5C42\u54CD\u5E94\u6027","slug":"_2-\u6DF1\u5C42\u54CD\u5E94\u6027","link":"#_2-\u6DF1\u5C42\u54CD\u5E94\u6027","children":[]},{"level":2,"title":"3. \u54CD\u5E94\u5F0F\u4EE3\u7406 vs. \u539F\u59CB\u5BF9\u8C61","slug":"_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","link":"#_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","children":[]},{"level":2,"title":"4. reactive() \u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A JavaScript \u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684 \u201C\u5F15\u7528\u201D \u673A\u5236\u3002","slug":"_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","link":"#_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","children":[]},{"level":2,"title":"5. v-if \u548C v-show","slug":"_5-v-if-\u548C-v-show","link":"#_5-v-if-\u548C-v-show","children":[]},{"level":2,"title":"6. v-for","slug":"_6-v-for","link":"#_6-v-for","children":[]},{"level":2,"title":"7. \u4E8B\u4EF6\u4FEE\u9970\u7B26","slug":"_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","link":"#_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","children":[]},{"level":2,"title":"8. \u4E0D\u5E38\u7528\u4E8B\u4EF6","slug":"_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","link":"#_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","children":[]},{"level":2,"title":"9. watch vs. watchEffect","slug":"_9-watch-vs-watcheffect","link":"#_9-watch-vs-watcheffect","children":[]},{"level":2,"title":"10. \u7EC4\u4EF6\u7684 ref","slug":"_10-\u7EC4\u4EF6\u7684-ref","link":"#_10-\u7EC4\u4EF6\u7684-ref","children":[]}],"relativePath":"pages/vue3-base/basic/note.md"}'),o={name:"pages/vue3-base/basic/note.md"},p=l(`

vue3 \u57FA\u7840\u77E5\u8BC6\u70B9

1. DOM \u66F4\u65B0\u65F6\u673A

\u5F53\u4F60\u66F4\u6539\u54CD\u5E94\u5F0F\u72B6\u6001\u540E\uFF0CDOM \u4F1A\u81EA\u52A8\u66F4\u65B0\u3002\u7136\u800C\uFF0C\u4F60\u5F97\u6CE8\u610F DOM \u7684\u66F4\u65B0\u5E76\u4E0D\u662F\u540C\u6B65\u7684\u3002\u76F8\u53CD\uFF0CVue \u5C06\u7F13\u51B2\u5B83\u4EEC\u76F4\u5230\u66F4\u65B0\u5468\u671F\u7684 \u201C\u4E0B\u4E2A\u65F6\u673A\u201D \u4EE5\u786E\u4FDD\u65E0\u8BBA\u4F60\u8FDB\u884C\u4E86\u591A\u5C11\u6B21\u72B6\u6001\u66F4\u6539\uFF0C\u6BCF\u4E2A\u7EC4\u4EF6\u90FD\u53EA\u66F4\u65B0\u4E00\u6B21\u3002

\u82E5\u8981\u7B49\u5F85\u4E00\u4E2A\u72B6\u6001\u6539\u53D8\u540E\u7684 DOM \u66F4\u65B0\u5B8C\u6210\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 nextTick() \u8FD9\u4E2A\u5168\u5C40 API\uFF1A

js
import { nextTick } from "vue";
 
 function increment() {
   state.count++;
diff --git a/assets/pages_vue3_basic_note.md.3b0f3b84.lean.js b/assets/pages_vue3-base_basic_note.md.2007ecc2.lean.js
similarity index 87%
rename from assets/pages_vue3_basic_note.md.3b0f3b84.lean.js
rename to assets/pages_vue3-base_basic_note.md.2007ecc2.lean.js
index 8b76b77..f366113 100644
--- a/assets/pages_vue3_basic_note.md.3b0f3b84.lean.js
+++ b/assets/pages_vue3-base_basic_note.md.2007ecc2.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"vue3 \u57FA\u7840\u77E5\u8BC6\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. DOM \u66F4\u65B0\u65F6\u673A","slug":"_1-dom-\u66F4\u65B0\u65F6\u673A","link":"#_1-dom-\u66F4\u65B0\u65F6\u673A","children":[]},{"level":2,"title":"2. \u6DF1\u5C42\u54CD\u5E94\u6027","slug":"_2-\u6DF1\u5C42\u54CD\u5E94\u6027","link":"#_2-\u6DF1\u5C42\u54CD\u5E94\u6027","children":[]},{"level":2,"title":"3. \u54CD\u5E94\u5F0F\u4EE3\u7406 vs. \u539F\u59CB\u5BF9\u8C61","slug":"_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","link":"#_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","children":[]},{"level":2,"title":"4. reactive() \u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A JavaScript \u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684 \u201C\u5F15\u7528\u201D \u673A\u5236\u3002","slug":"_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","link":"#_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","children":[]},{"level":2,"title":"5. v-if \u548C v-show","slug":"_5-v-if-\u548C-v-show","link":"#_5-v-if-\u548C-v-show","children":[]},{"level":2,"title":"6. v-for","slug":"_6-v-for","link":"#_6-v-for","children":[]},{"level":2,"title":"7. \u4E8B\u4EF6\u4FEE\u9970\u7B26","slug":"_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","link":"#_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","children":[]},{"level":2,"title":"8. \u4E0D\u5E38\u7528\u4E8B\u4EF6","slug":"_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","link":"#_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","children":[]},{"level":2,"title":"9. watch vs. watchEffect","slug":"_9-watch-vs-watcheffect","link":"#_9-watch-vs-watcheffect","children":[]},{"level":2,"title":"10. \u7EC4\u4EF6\u7684 ref","slug":"_10-\u7EC4\u4EF6\u7684-ref","link":"#_10-\u7EC4\u4EF6\u7684-ref","children":[]}],"relativePath":"pages/vue3/basic/note.md"}'),o={name:"pages/vue3/basic/note.md"},p=l("",43),e=[p];function t(c,r,D,F,y,i){return n(),a("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"vue3 \u57FA\u7840\u77E5\u8BC6\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. DOM \u66F4\u65B0\u65F6\u673A","slug":"_1-dom-\u66F4\u65B0\u65F6\u673A","link":"#_1-dom-\u66F4\u65B0\u65F6\u673A","children":[]},{"level":2,"title":"2. \u6DF1\u5C42\u54CD\u5E94\u6027","slug":"_2-\u6DF1\u5C42\u54CD\u5E94\u6027","link":"#_2-\u6DF1\u5C42\u54CD\u5E94\u6027","children":[]},{"level":2,"title":"3. \u54CD\u5E94\u5F0F\u4EE3\u7406 vs. \u539F\u59CB\u5BF9\u8C61","slug":"_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","link":"#_3-\u54CD\u5E94\u5F0F\u4EE3\u7406-vs-\u539F\u59CB\u5BF9\u8C61","children":[]},{"level":2,"title":"4. reactive() \u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A JavaScript \u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684 \u201C\u5F15\u7528\u201D \u673A\u5236\u3002","slug":"_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","link":"#_4-reactive-\u7684\u79CD\u79CD\u9650\u5236\u5F52\u6839\u7ED3\u5E95\u662F\u56E0\u4E3A-javascript-\u6CA1\u6709\u53EF\u4EE5\u4F5C\u7528\u4E8E\u6240\u6709\u503C\u7C7B\u578B\u7684-\u5F15\u7528-\u673A\u5236\u3002","children":[]},{"level":2,"title":"5. v-if \u548C v-show","slug":"_5-v-if-\u548C-v-show","link":"#_5-v-if-\u548C-v-show","children":[]},{"level":2,"title":"6. v-for","slug":"_6-v-for","link":"#_6-v-for","children":[]},{"level":2,"title":"7. \u4E8B\u4EF6\u4FEE\u9970\u7B26","slug":"_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","link":"#_7-\u4E8B\u4EF6\u4FEE\u9970\u7B26","children":[]},{"level":2,"title":"8. \u4E0D\u5E38\u7528\u4E8B\u4EF6","slug":"_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","link":"#_8-\u4E0D\u5E38\u7528\u4E8B\u4EF6","children":[]},{"level":2,"title":"9. watch vs. watchEffect","slug":"_9-watch-vs-watcheffect","link":"#_9-watch-vs-watcheffect","children":[]},{"level":2,"title":"10. \u7EC4\u4EF6\u7684 ref","slug":"_10-\u7EC4\u4EF6\u7684-ref","link":"#_10-\u7EC4\u4EF6\u7684-ref","children":[]}],"relativePath":"pages/vue3-base/basic/note.md"}'),o={name:"pages/vue3-base/basic/note.md"},p=l("",43),e=[p];function t(c,r,D,F,y,i){return n(),a("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
diff --git a/assets/pages_vue3_basic_reactive.md.f63c3e3c.js b/assets/pages_vue3-base_basic_reactive.md.1a625091.js
similarity index 57%
rename from assets/pages_vue3_basic_reactive.md.f63c3e3c.js
rename to assets/pages_vue3-base_basic_reactive.md.1a625091.js
index 83e21f4..0329a5d 100644
--- a/assets/pages_vue3_basic_reactive.md.f63c3e3c.js
+++ b/assets/pages_vue3-base_basic_reactive.md.1a625091.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const F=JSON.parse('{"title":"reactive","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. reactive() API \u6709\u4E24\u6761\u9650\u5236\uFF1A","slug":"_1-reactive-api-\u6709\u4E24\u6761\u9650\u5236","link":"#_1-reactive-api-\u6709\u4E24\u6761\u9650\u5236","children":[]}],"relativePath":"pages/vue3/basic/reactive.md"}'),p={name:"pages/vue3/basic/reactive.md"},e=l(`

reactive

1. reactive() API \u6709\u4E24\u6761\u9650\u5236\uFF1A

  1. \u4EC5\u5BF9\u5BF9\u8C61\u7C7B\u578B\u6709\u6548\uFF08\u5BF9\u8C61\u3001\u6570\u7EC4\u548C Map\u3001Set \u8FD9\u6837\u7684\u96C6\u5408\u7C7B\u578B\uFF09\uFF0C\u800C\u5BF9 string\u3001number \u548C boolean \u8FD9\u6837\u7684 \u539F\u59CB\u7C7B\u578B \u65E0\u6548\u3002

  2. \u56E0\u4E3A Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\u662F\u901A\u8FC7\u5C5E\u6027\u8BBF\u95EE\u8FDB\u884C\u8FFD\u8E2A\u7684\uFF0C\u56E0\u6B64\u6211\u4EEC\u5FC5\u987B\u59CB\u7EC8\u4FDD\u6301\u5BF9\u8BE5\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u76F8\u540C\u5F15\u7528\u3002\u8FD9\u610F\u5473\u7740\u6211\u4EEC\u4E0D\u53EF\u4EE5\u968F\u610F\u5730\u201C\u66FF\u6362\u201D\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\uFF0C\u56E0\u4E3A\u8FD9\u5C06\u5BFC\u81F4\u5BF9\u521D\u59CB\u5F15\u7528\u7684\u54CD\u5E94\u6027\u8FDE\u63A5\u4E22\u5931\uFF1A

    \u5C06\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u5C5E\u6027\u8D4B\u503C\u6216\u89E3\u6784\u81F3\u672C\u5730\u53D8\u91CF\u65F6\uFF0C\u6216\u662F\u5C06\u8BE5\u5C5E\u6027\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\u65F6\uFF0C\u6211\u4EEC\u4F1A\u5931\u53BB\u54CD\u5E94\u6027\uFF1A

js
let state = reactive({ count: 0 });
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const F=JSON.parse('{"title":"reactive","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. reactive() API \u6709\u4E24\u6761\u9650\u5236\uFF1A","slug":"_1-reactive-api-\u6709\u4E24\u6761\u9650\u5236","link":"#_1-reactive-api-\u6709\u4E24\u6761\u9650\u5236","children":[]}],"relativePath":"pages/vue3-base/basic/reactive.md"}'),p={name:"pages/vue3-base/basic/reactive.md"},e=l(`

reactive

1. reactive() API \u6709\u4E24\u6761\u9650\u5236\uFF1A

  1. \u4EC5\u5BF9\u5BF9\u8C61\u7C7B\u578B\u6709\u6548\uFF08\u5BF9\u8C61\u3001\u6570\u7EC4\u548C Map\u3001Set \u8FD9\u6837\u7684\u96C6\u5408\u7C7B\u578B\uFF09\uFF0C\u800C\u5BF9 string\u3001number \u548C boolean \u8FD9\u6837\u7684 \u539F\u59CB\u7C7B\u578B \u65E0\u6548\u3002

  2. \u56E0\u4E3A Vue \u7684\u54CD\u5E94\u5F0F\u7CFB\u7EDF\u662F\u901A\u8FC7\u5C5E\u6027\u8BBF\u95EE\u8FDB\u884C\u8FFD\u8E2A\u7684\uFF0C\u56E0\u6B64\u6211\u4EEC\u5FC5\u987B\u59CB\u7EC8\u4FDD\u6301\u5BF9\u8BE5\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u76F8\u540C\u5F15\u7528\u3002\u8FD9\u610F\u5473\u7740\u6211\u4EEC\u4E0D\u53EF\u4EE5\u968F\u610F\u5730\u201C\u66FF\u6362\u201D\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\uFF0C\u56E0\u4E3A\u8FD9\u5C06\u5BFC\u81F4\u5BF9\u521D\u59CB\u5F15\u7528\u7684\u54CD\u5E94\u6027\u8FDE\u63A5\u4E22\u5931\uFF1A

    \u5C06\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u5C5E\u6027\u8D4B\u503C\u6216\u89E3\u6784\u81F3\u672C\u5730\u53D8\u91CF\u65F6\uFF0C\u6216\u662F\u5C06\u8BE5\u5C5E\u6027\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\u65F6\uFF0C\u6211\u4EEC\u4F1A\u5931\u53BB\u54CD\u5E94\u6027\uFF1A

js
let state = reactive({ count: 0 });
 
 // \u4E0A\u9762\u7684\u5F15\u7528 ({ count: 0 }) \u5C06\u4E0D\u518D\u88AB\u8FFD\u8E2A\uFF08\u54CD\u5E94\u6027\u8FDE\u63A5\u5DF2\u4E22\u5931\uFF01\uFF09
 state = reactive({ count: 1 });
diff --git a/assets/pages_vue3-base_basic_reactive.md.1a625091.lean.js b/assets/pages_vue3-base_basic_reactive.md.1a625091.lean.js
new file mode 100644
index 0000000..0e4a647
--- /dev/null
+++ b/assets/pages_vue3-base_basic_reactive.md.1a625091.lean.js
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const F=JSON.parse('{"title":"reactive","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. reactive() API \u6709\u4E24\u6761\u9650\u5236\uFF1A","slug":"_1-reactive-api-\u6709\u4E24\u6761\u9650\u5236","link":"#_1-reactive-api-\u6709\u4E24\u6761\u9650\u5236","children":[]}],"relativePath":"pages/vue3-base/basic/reactive.md"}'),p={name:"pages/vue3-base/basic/reactive.md"},e=l("",4),o=[e];function t(c,r,i,D,y,A){return a(),n("div",null,o)}const _=s(p,[["render",t]]);export{F as __pageData,_ as default};
diff --git a/assets/pages_vue3_basic_ref.md.855045ab.js b/assets/pages_vue3-base_basic_ref.md.d5b10178.js
similarity index 80%
rename from assets/pages_vue3_basic_ref.md.855045ab.js
rename to assets/pages_vue3-base_basic_ref.md.d5b10178.js
index ab80817..bb1add8 100644
--- a/assets/pages_vue3_basic_ref.md.855045ab.js
+++ b/assets/pages_vue3-base_basic_ref.md.d5b10178.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"ref","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u57FA\u7840\u77E5\u8BC6\uFF1A","slug":"\u57FA\u7840\u77E5\u8BC6","link":"#\u57FA\u7840\u77E5\u8BC6","children":[]}],"relativePath":"pages/vue3/basic/ref.md"}'),o={name:"pages/vue3/basic/ref.md"},p=l(`

ref

\u57FA\u7840\u77E5\u8BC6\uFF1A

ref() \u8BA9\u6211\u4EEC\u80FD\u521B\u9020\u4E00\u79CD\u5BF9\u4EFB\u610F\u503C\u7684 \u201C\u5F15\u7528\u201D\uFF0C\u5E76\u80FD\u591F\u5728\u4E0D\u4E22\u5931\u54CD\u5E94\u6027\u7684\u524D\u63D0\u4E0B\u4F20\u9012\u8FD9\u4E9B\u5F15\u7528

  1. ref() \u65B9\u6CD5\u6765\u5141\u8BB8\u6211\u4EEC\u521B\u5EFA\u53EF\u4EE5\u4F7F\u7528\u4EFB\u4F55\u503C\u7C7B\u578B\u7684\u54CD\u5E94\u5F0F ref;
  2. ref() \u5C06\u4F20\u5165\u53C2\u6570\u7684\u503C\u5305\u88C5\u4E3A\u4E00\u4E2A\u5E26 .value \u5C5E\u6027\u7684 ref \u5BF9\u8C61;
  3. ref \u7684 .value \u5C5E\u6027\u4E5F\u662F\u54CD\u5E94\u5F0F\u7684\u3002\u540C\u65F6\uFF0C\u5F53\u503C\u4E3A\u5BF9\u8C61\u7C7B\u578B\u65F6\uFF0C\u4F1A\u7528 reactive() \u81EA\u52A8\u8F6C\u6362\u5B83\u7684 .value;
  4. \u4E00\u4E2A\u5305\u542B\u5BF9\u8C61\u7C7B\u578B\u503C\u7684 ref \u53EF\u4EE5\u54CD\u5E94\u5F0F\u5730\u66FF\u6362\u6574\u4E2A\u5BF9\u8C61; reactive\u201C\u66FF\u6362\u201D\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\uFF0C\u5C06\u5BFC\u81F4\u5BF9\u521D\u59CB\u5F15\u7528\u7684\u54CD\u5E94\u6027\u8FDE\u63A5\u4E22\u5931
  5. ref \u88AB\u4F20\u9012\u7ED9\u51FD\u6570\u6216\u662F\u4ECE\u4E00\u822C\u5BF9\u8C61\u4E0A\u88AB\u89E3\u6784\u65F6\uFF0C\u4E0D\u4F1A\u4E22\u5931\u54CD\u5E94\u6027; reactive \u5C06\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u5C5E\u6027\u8D4B\u503C\u6216\u89E3\u6784\u81F3\u672C\u5730\u53D8\u91CF\u65F6\uFF0C\u6216\u662F\u5C06\u8BE5\u5C5E\u6027\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\u65F6\uFF0C\u4F1A\u5931\u53BB\u54CD\u5E94\u6027
  6. \u5F53 ref \u5728\u6A21\u677F\u4E2D\u4F5C\u4E3A\u9876\u5C42\u5C5E\u6027\u88AB\u8BBF\u95EE\u65F6\uFF0C\u5B83\u4EEC\u4F1A\u88AB\u81EA\u52A8\u201C\u89E3\u5305\u201D
  7. \u5F53\u4E00\u4E2A ref \u88AB\u5D4C\u5957\u5728\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\u4E2D\uFF0C\u4F5C\u4E3A\u5C5E\u6027\u88AB\u8BBF\u95EE\u6216\u66F4\u6539\u65F6\uFF0C\u5B83\u4F1A\u81EA\u52A8\u89E3\u5305
  8. \u5982\u679C\u5C06\u4E00\u4E2A\u65B0\u7684 ref \u8D4B\u503C\u7ED9\u4E00\u4E2A\u5173\u8054\u4E86\u5DF2\u6709 ref \u7684\u5C5E\u6027\uFF0C\u90A3\u4E48\u5B83\u4F1A\u66FF\u6362\u6389\u65E7\u7684 ref
  9. \u53EA\u6709\u5F53\u5D4C\u5957\u5728\u4E00\u4E2A\u6DF1\u5C42\u54CD\u5E94\u5F0F\u5BF9\u8C61\u5185\u65F6\uFF0C\u624D\u4F1A\u53D1\u751F ref \u89E3\u5305\u3002\u5F53\u5176\u4F5C\u4E3A\u6D45\u5C42\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u5C5E\u6027\u88AB\u8BBF\u95EE\u65F6\u4E0D\u4F1A\u89E3\u5305\u3002
  10. \u8DDF\u54CD\u5E94\u5F0F\u5BF9\u8C61\u4E0D\u540C\uFF0C\u5F53 ref \u4F5C\u4E3A\u54CD\u5E94\u5F0F\u6570\u7EC4\u6216\u50CF Map \u8FD9\u79CD\u539F\u751F\u96C6\u5408\u7C7B\u578B\u7684\u5143\u7D20\u88AB\u8BBF\u95EE\u65F6\uFF0C\u4E0D\u4F1A\u8FDB\u884C\u89E3\u5305\u3002
vue
<script setup>
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"ref","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u57FA\u7840\u77E5\u8BC6\uFF1A","slug":"\u57FA\u7840\u77E5\u8BC6","link":"#\u57FA\u7840\u77E5\u8BC6","children":[]}],"relativePath":"pages/vue3-base/basic/ref.md"}'),o={name:"pages/vue3-base/basic/ref.md"},p=l(`

ref

\u57FA\u7840\u77E5\u8BC6\uFF1A

ref() \u8BA9\u6211\u4EEC\u80FD\u521B\u9020\u4E00\u79CD\u5BF9\u4EFB\u610F\u503C\u7684 \u201C\u5F15\u7528\u201D\uFF0C\u5E76\u80FD\u591F\u5728\u4E0D\u4E22\u5931\u54CD\u5E94\u6027\u7684\u524D\u63D0\u4E0B\u4F20\u9012\u8FD9\u4E9B\u5F15\u7528

  1. ref() \u65B9\u6CD5\u6765\u5141\u8BB8\u6211\u4EEC\u521B\u5EFA\u53EF\u4EE5\u4F7F\u7528\u4EFB\u4F55\u503C\u7C7B\u578B\u7684\u54CD\u5E94\u5F0F ref;
  2. ref() \u5C06\u4F20\u5165\u53C2\u6570\u7684\u503C\u5305\u88C5\u4E3A\u4E00\u4E2A\u5E26 .value \u5C5E\u6027\u7684 ref \u5BF9\u8C61;
  3. ref \u7684 .value \u5C5E\u6027\u4E5F\u662F\u54CD\u5E94\u5F0F\u7684\u3002\u540C\u65F6\uFF0C\u5F53\u503C\u4E3A\u5BF9\u8C61\u7C7B\u578B\u65F6\uFF0C\u4F1A\u7528 reactive() \u81EA\u52A8\u8F6C\u6362\u5B83\u7684 .value;
  4. \u4E00\u4E2A\u5305\u542B\u5BF9\u8C61\u7C7B\u578B\u503C\u7684 ref \u53EF\u4EE5\u54CD\u5E94\u5F0F\u5730\u66FF\u6362\u6574\u4E2A\u5BF9\u8C61; reactive\u201C\u66FF\u6362\u201D\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\uFF0C\u5C06\u5BFC\u81F4\u5BF9\u521D\u59CB\u5F15\u7528\u7684\u54CD\u5E94\u6027\u8FDE\u63A5\u4E22\u5931
  5. ref \u88AB\u4F20\u9012\u7ED9\u51FD\u6570\u6216\u662F\u4ECE\u4E00\u822C\u5BF9\u8C61\u4E0A\u88AB\u89E3\u6784\u65F6\uFF0C\u4E0D\u4F1A\u4E22\u5931\u54CD\u5E94\u6027; reactive \u5C06\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u5C5E\u6027\u8D4B\u503C\u6216\u89E3\u6784\u81F3\u672C\u5730\u53D8\u91CF\u65F6\uFF0C\u6216\u662F\u5C06\u8BE5\u5C5E\u6027\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\u65F6\uFF0C\u4F1A\u5931\u53BB\u54CD\u5E94\u6027
  6. \u5F53 ref \u5728\u6A21\u677F\u4E2D\u4F5C\u4E3A\u9876\u5C42\u5C5E\u6027\u88AB\u8BBF\u95EE\u65F6\uFF0C\u5B83\u4EEC\u4F1A\u88AB\u81EA\u52A8\u201C\u89E3\u5305\u201D
  7. \u5F53\u4E00\u4E2A ref \u88AB\u5D4C\u5957\u5728\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\u4E2D\uFF0C\u4F5C\u4E3A\u5C5E\u6027\u88AB\u8BBF\u95EE\u6216\u66F4\u6539\u65F6\uFF0C\u5B83\u4F1A\u81EA\u52A8\u89E3\u5305
  8. \u5982\u679C\u5C06\u4E00\u4E2A\u65B0\u7684 ref \u8D4B\u503C\u7ED9\u4E00\u4E2A\u5173\u8054\u4E86\u5DF2\u6709 ref \u7684\u5C5E\u6027\uFF0C\u90A3\u4E48\u5B83\u4F1A\u66FF\u6362\u6389\u65E7\u7684 ref
  9. \u53EA\u6709\u5F53\u5D4C\u5957\u5728\u4E00\u4E2A\u6DF1\u5C42\u54CD\u5E94\u5F0F\u5BF9\u8C61\u5185\u65F6\uFF0C\u624D\u4F1A\u53D1\u751F ref \u89E3\u5305\u3002\u5F53\u5176\u4F5C\u4E3A\u6D45\u5C42\u54CD\u5E94\u5F0F\u5BF9\u8C61\u7684\u5C5E\u6027\u88AB\u8BBF\u95EE\u65F6\u4E0D\u4F1A\u89E3\u5305\u3002
  10. \u8DDF\u54CD\u5E94\u5F0F\u5BF9\u8C61\u4E0D\u540C\uFF0C\u5F53 ref \u4F5C\u4E3A\u54CD\u5E94\u5F0F\u6570\u7EC4\u6216\u50CF Map \u8FD9\u79CD\u539F\u751F\u96C6\u5408\u7C7B\u578B\u7684\u5143\u7D20\u88AB\u8BBF\u95EE\u65F6\uFF0C\u4E0D\u4F1A\u8FDB\u884C\u89E3\u5305\u3002
vue
<script setup>
 import { ref, reactive } from "vue";
 const object = { foo: ref(1) }; // foo \u662F\u9876\u5C42\u5C5E\u6027\uFF0C\u4F46 object.foo \u4E0D\u662F\u3002
 const { foo } = object; // \u6E32\u67D3\u7684\u7ED3\u679C\u4F1A\u662F\u4E00\u4E2A [object Object]\uFF0C\u56E0\u4E3A object.foo \u662F\u4E00\u4E2A ref \u5BF9\u8C61\u3002\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7\u5C06 foo \u6539\u6210\u9876\u5C42\u5C5E\u6027\u6765\u89E3\u51B3\u8FD9\u4E2A\u95EE\u9898\uFF1A
diff --git a/assets/pages_vue3-base_basic_ref.md.d5b10178.lean.js b/assets/pages_vue3-base_basic_ref.md.d5b10178.lean.js
new file mode 100644
index 0000000..e5ff516
--- /dev/null
+++ b/assets/pages_vue3-base_basic_ref.md.d5b10178.lean.js
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"ref","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u57FA\u7840\u77E5\u8BC6\uFF1A","slug":"\u57FA\u7840\u77E5\u8BC6","link":"#\u57FA\u7840\u77E5\u8BC6","children":[]}],"relativePath":"pages/vue3-base/basic/ref.md"}'),o={name:"pages/vue3-base/basic/ref.md"},p=l("",5),e=[p];function c(t,r,D,y,A,C){return n(),a("div",null,e)}const u=s(o,[["render",c]]);export{i as __pageData,u as default};
diff --git a/assets/pages_vue3_basic_v-model.md.97277445.js b/assets/pages_vue3-base_basic_v-model.md.88abdea8.js
similarity index 96%
rename from assets/pages_vue3_basic_v-model.md.97277445.js
rename to assets/pages_vue3-base_basic_v-model.md.88abdea8.js
index e90f5b4..52ec473 100644
--- a/assets/pages_vue3_basic_v-model.md.97277445.js
+++ b/assets/pages_vue3-base_basic_v-model.md.88abdea8.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const A=JSON.parse('{"title":"v-model","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. v-model \u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5\uFF1A","slug":"_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","link":"#_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","children":[]},{"level":2,"title":"2. v-model \u5728\u7EC4\u4EF6\u4E0A","slug":"_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","link":"#_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","children":[]},{"level":2,"title":"3. v-model \u7684\u53C2\u6570","slug":"_3-v-model-\u7684\u53C2\u6570","link":"#_3-v-model-\u7684\u53C2\u6570","children":[]},{"level":2,"title":"4. \u591A\u4E2A v-model \u7ED1\u5B9A","slug":"_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","link":"#_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","children":[]},{"level":2,"title":"5. \u5904\u7406 v-model \u4FEE\u9970\u7B26","slug":"_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","link":"#_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","children":[]}],"relativePath":"pages/vue3/basic/v-model.md"}'),p={name:"pages/vue3/basic/v-model.md"},o=l(`

v-model

1. v-model \u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5\uFF1A

html
<input v-model="searchText" />
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const A=JSON.parse('{"title":"v-model","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. v-model \u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5\uFF1A","slug":"_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","link":"#_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","children":[]},{"level":2,"title":"2. v-model \u5728\u7EC4\u4EF6\u4E0A","slug":"_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","link":"#_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","children":[]},{"level":2,"title":"3. v-model \u7684\u53C2\u6570","slug":"_3-v-model-\u7684\u53C2\u6570","link":"#_3-v-model-\u7684\u53C2\u6570","children":[]},{"level":2,"title":"4. \u591A\u4E2A v-model \u7ED1\u5B9A","slug":"_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","link":"#_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","children":[]},{"level":2,"title":"5. \u5904\u7406 v-model \u4FEE\u9970\u7B26","slug":"_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","link":"#_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","children":[]}],"relativePath":"pages/vue3-base/basic/v-model.md"}'),p={name:"pages/vue3-base/basic/v-model.md"},o=l(`

v-model

1. v-model \u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5\uFF1A

html
<input v-model="searchText" />
 

\u4E0A\u9762\u7684\u4EE3\u7801\u5176\u5B9E\u7B49\u4EF7\u4E8E\u4E0B\u9762\u8FD9\u6BB5 (\u7F16\u8BD1\u5668\u4F1A\u5BF9 v-model \u8FDB\u884C\u5C55\u5F00)\uFF1A

html
<input :value="searchText" @input="searchText = $event.target.value" />
 

2. v-model \u5728\u7EC4\u4EF6\u4E0A

js
<CustomInput
   :modelValue="searchText"
diff --git a/assets/pages_vue3_basic_v-model.md.97277445.lean.js b/assets/pages_vue3-base_basic_v-model.md.88abdea8.lean.js
similarity index 74%
rename from assets/pages_vue3_basic_v-model.md.97277445.lean.js
rename to assets/pages_vue3-base_basic_v-model.md.88abdea8.lean.js
index 0ab8f7b..a4e47f7 100644
--- a/assets/pages_vue3_basic_v-model.md.97277445.lean.js
+++ b/assets/pages_vue3-base_basic_v-model.md.88abdea8.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const A=JSON.parse('{"title":"v-model","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. v-model \u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5\uFF1A","slug":"_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","link":"#_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","children":[]},{"level":2,"title":"2. v-model \u5728\u7EC4\u4EF6\u4E0A","slug":"_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","link":"#_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","children":[]},{"level":2,"title":"3. v-model \u7684\u53C2\u6570","slug":"_3-v-model-\u7684\u53C2\u6570","link":"#_3-v-model-\u7684\u53C2\u6570","children":[]},{"level":2,"title":"4. \u591A\u4E2A v-model \u7ED1\u5B9A","slug":"_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","link":"#_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","children":[]},{"level":2,"title":"5. \u5904\u7406 v-model \u4FEE\u9970\u7B26","slug":"_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","link":"#_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","children":[]}],"relativePath":"pages/vue3/basic/v-model.md"}'),p={name:"pages/vue3/basic/v-model.md"},o=l("",31),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const A=JSON.parse('{"title":"v-model","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. v-model \u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5\uFF1A","slug":"_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","link":"#_1-v-model-\u5728\u539F\u751F\u5143\u7D20\u4E0A\u7684\u7528\u6CD5","children":[]},{"level":2,"title":"2. v-model \u5728\u7EC4\u4EF6\u4E0A","slug":"_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","link":"#_2-v-model-\u5728\u7EC4\u4EF6\u4E0A","children":[]},{"level":2,"title":"3. v-model \u7684\u53C2\u6570","slug":"_3-v-model-\u7684\u53C2\u6570","link":"#_3-v-model-\u7684\u53C2\u6570","children":[]},{"level":2,"title":"4. \u591A\u4E2A v-model \u7ED1\u5B9A","slug":"_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","link":"#_4-\u591A\u4E2A-v-model-\u7ED1\u5B9A","children":[]},{"level":2,"title":"5. \u5904\u7406 v-model \u4FEE\u9970\u7B26","slug":"_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","link":"#_5-\u5904\u7406-v-model-\u4FEE\u9970\u7B26","children":[]}],"relativePath":"pages/vue3-base/basic/v-model.md"}'),p={name:"pages/vue3-base/basic/v-model.md"},o=l("",31),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
diff --git a/assets/pages_vue3_components_componentNote.md.6337365e.js b/assets/pages_vue3-base_components_componentNote.md.1043555d.js
similarity index 93%
rename from assets/pages_vue3_components_componentNote.md.6337365e.js
rename to assets/pages_vue3-base_components_componentNote.md.1043555d.js
index 27b1341..9132f63 100644
--- a/assets/pages_vue3_components_componentNote.md.6337365e.js
+++ b/assets/pages_vue3-base_components_componentNote.md.1043555d.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as p}from"./app.cac277bf.js";const A=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u610F\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. props \u7684\u5355\u5411\u6570\u636E\u6D41","slug":"_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","link":"#_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","children":[]},{"level":2,"title":"2. \u66F4\u6539\u5BF9\u8C61 / \u6570\u7EC4\u7C7B\u578B\u7684 props\uFF1A","slug":"_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","link":"#_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","children":[]},{"level":2,"title":"3. props \u7684\u6821\u9A8C","slug":"_3-props-\u7684\u6821\u9A8C","link":"#_3-props-\u7684\u6821\u9A8C","children":[]},{"level":2,"title":"4.\u4E8B\u4EF6\u6821\u9A8C","slug":"_4-\u4E8B\u4EF6\u6821\u9A8C","link":"#_4-\u4E8B\u4EF6\u6821\u9A8C","children":[]},{"level":2,"title":"5. \u900F\u4F20 Attributes","slug":"_5-\u900F\u4F20-attributes","link":"#_5-\u900F\u4F20-attributes","children":[]}],"relativePath":"pages/vue3/components/componentNote.md"}'),l={name:"pages/vue3/components/componentNote.md"},o=p(`

\u7EC4\u4EF6\u6CE8\u610F\u70B9

1. props \u7684\u5355\u5411\u6570\u636E\u6D41

\u6240\u6709\u7684 props \u90FD\u9075\u5FAA\u7740\u5355\u5411\u7ED1\u5B9A\u539F\u5219\uFF0C\u4F60\u4E0D\u5E94\u8BE5\u5728\u5B50\u7EC4\u4EF6\u4E2D\u53BB\u66F4\u6539\u4E00\u4E2A prop\u3002\u82E5\u4F60\u8FD9\u4E48\u505A\u4E86\uFF0CVue \u4F1A\u5728\u63A7\u5236\u53F0\u4E0A\u5411\u4F60\u629B\u51FA\u8B66\u544A

\u5BFC\u81F4\u4F60\u60F3\u8981\u66F4\u6539\u4E00\u4E2A prop \u7684\u9700\u6C42\u901A\u5E38\u6765\u6E90\u4E8E\u4EE5\u4E0B\u4E24\u79CD\u573A\u666F\uFF1A

  1. prop \u88AB\u7528\u4E8E\u4F20\u5165\u521D\u59CB\u503C\uFF1B\u800C\u5B50\u7EC4\u4EF6\u60F3\u5728\u4E4B\u540E\u5C06\u5176\u4F5C\u4E3A\u4E00\u4E2A\u5C40\u90E8\u6570\u636E\u5C5E\u6027\u3002 \u5728\u8FD9\u79CD\u60C5\u51B5\u4E0B\uFF0C\u6700\u597D\u662F\u65B0\u5B9A\u4E49\u4E00\u4E2A\u5C40\u90E8\u6570\u636E\u5C5E\u6027\uFF0C\u4ECE props \u4E0A\u83B7\u53D6\u521D\u59CB\u503C\u5373\u53EF\uFF1A
js
const props = defineProps(["initialCounter"]);
+import{_ as s,o as n,c as a,a as p}from"./app.88185e12.js";const A=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u610F\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. props \u7684\u5355\u5411\u6570\u636E\u6D41","slug":"_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","link":"#_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","children":[]},{"level":2,"title":"2. \u66F4\u6539\u5BF9\u8C61 / \u6570\u7EC4\u7C7B\u578B\u7684 props\uFF1A","slug":"_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","link":"#_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","children":[]},{"level":2,"title":"3. props \u7684\u6821\u9A8C","slug":"_3-props-\u7684\u6821\u9A8C","link":"#_3-props-\u7684\u6821\u9A8C","children":[]},{"level":2,"title":"4.\u4E8B\u4EF6\u6821\u9A8C","slug":"_4-\u4E8B\u4EF6\u6821\u9A8C","link":"#_4-\u4E8B\u4EF6\u6821\u9A8C","children":[]},{"level":2,"title":"5. \u900F\u4F20 Attributes","slug":"_5-\u900F\u4F20-attributes","link":"#_5-\u900F\u4F20-attributes","children":[]}],"relativePath":"pages/vue3-base/components/componentNote.md"}'),l={name:"pages/vue3-base/components/componentNote.md"},o=p(`

\u7EC4\u4EF6\u6CE8\u610F\u70B9

1. props \u7684\u5355\u5411\u6570\u636E\u6D41

\u6240\u6709\u7684 props \u90FD\u9075\u5FAA\u7740\u5355\u5411\u7ED1\u5B9A\u539F\u5219\uFF0C\u4F60\u4E0D\u5E94\u8BE5\u5728\u5B50\u7EC4\u4EF6\u4E2D\u53BB\u66F4\u6539\u4E00\u4E2A prop\u3002\u82E5\u4F60\u8FD9\u4E48\u505A\u4E86\uFF0CVue \u4F1A\u5728\u63A7\u5236\u53F0\u4E0A\u5411\u4F60\u629B\u51FA\u8B66\u544A

\u5BFC\u81F4\u4F60\u60F3\u8981\u66F4\u6539\u4E00\u4E2A prop \u7684\u9700\u6C42\u901A\u5E38\u6765\u6E90\u4E8E\u4EE5\u4E0B\u4E24\u79CD\u573A\u666F\uFF1A

  1. prop \u88AB\u7528\u4E8E\u4F20\u5165\u521D\u59CB\u503C\uFF1B\u800C\u5B50\u7EC4\u4EF6\u60F3\u5728\u4E4B\u540E\u5C06\u5176\u4F5C\u4E3A\u4E00\u4E2A\u5C40\u90E8\u6570\u636E\u5C5E\u6027\u3002 \u5728\u8FD9\u79CD\u60C5\u51B5\u4E0B\uFF0C\u6700\u597D\u662F\u65B0\u5B9A\u4E49\u4E00\u4E2A\u5C40\u90E8\u6570\u636E\u5C5E\u6027\uFF0C\u4ECE props \u4E0A\u83B7\u53D6\u521D\u59CB\u503C\u5373\u53EF\uFF1A
js
const props = defineProps(["initialCounter"]);
 
 // \u8BA1\u6570\u5668\u53EA\u662F\u5C06 props.initialCounter \u4F5C\u4E3A\u521D\u59CB\u503C
 // \u50CF\u4E0B\u9762\u8FD9\u6837\u505A\u5C31\u4F7F prop \u548C\u540E\u7EED\u66F4\u65B0\u65E0\u5173\u4E86
diff --git a/assets/pages_vue3_components_componentNote.md.6337365e.lean.js b/assets/pages_vue3-base_components_componentNote.md.1043555d.lean.js
similarity index 74%
rename from assets/pages_vue3_components_componentNote.md.6337365e.lean.js
rename to assets/pages_vue3-base_components_componentNote.md.1043555d.lean.js
index 8657e93..febb174 100644
--- a/assets/pages_vue3_components_componentNote.md.6337365e.lean.js
+++ b/assets/pages_vue3-base_components_componentNote.md.1043555d.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as p}from"./app.cac277bf.js";const A=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u610F\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. props \u7684\u5355\u5411\u6570\u636E\u6D41","slug":"_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","link":"#_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","children":[]},{"level":2,"title":"2. \u66F4\u6539\u5BF9\u8C61 / \u6570\u7EC4\u7C7B\u578B\u7684 props\uFF1A","slug":"_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","link":"#_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","children":[]},{"level":2,"title":"3. props \u7684\u6821\u9A8C","slug":"_3-props-\u7684\u6821\u9A8C","link":"#_3-props-\u7684\u6821\u9A8C","children":[]},{"level":2,"title":"4.\u4E8B\u4EF6\u6821\u9A8C","slug":"_4-\u4E8B\u4EF6\u6821\u9A8C","link":"#_4-\u4E8B\u4EF6\u6821\u9A8C","children":[]},{"level":2,"title":"5. \u900F\u4F20 Attributes","slug":"_5-\u900F\u4F20-attributes","link":"#_5-\u900F\u4F20-attributes","children":[]}],"relativePath":"pages/vue3/components/componentNote.md"}'),l={name:"pages/vue3/components/componentNote.md"},o=p("",30),e=[o];function t(c,r,D,F,y,i){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{A as __pageData,d as default};
+import{_ as s,o as n,c as a,a as p}from"./app.88185e12.js";const A=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u610F\u70B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. props \u7684\u5355\u5411\u6570\u636E\u6D41","slug":"_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","link":"#_1-props-\u7684\u5355\u5411\u6570\u636E\u6D41","children":[]},{"level":2,"title":"2. \u66F4\u6539\u5BF9\u8C61 / \u6570\u7EC4\u7C7B\u578B\u7684 props\uFF1A","slug":"_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","link":"#_2-\u66F4\u6539\u5BF9\u8C61-\u6570\u7EC4\u7C7B\u578B\u7684-props","children":[]},{"level":2,"title":"3. props \u7684\u6821\u9A8C","slug":"_3-props-\u7684\u6821\u9A8C","link":"#_3-props-\u7684\u6821\u9A8C","children":[]},{"level":2,"title":"4.\u4E8B\u4EF6\u6821\u9A8C","slug":"_4-\u4E8B\u4EF6\u6821\u9A8C","link":"#_4-\u4E8B\u4EF6\u6821\u9A8C","children":[]},{"level":2,"title":"5. \u900F\u4F20 Attributes","slug":"_5-\u900F\u4F20-attributes","link":"#_5-\u900F\u4F20-attributes","children":[]}],"relativePath":"pages/vue3-base/components/componentNote.md"}'),l={name:"pages/vue3-base/components/componentNote.md"},o=p("",30),e=[o];function t(c,r,D,F,y,i){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{A as __pageData,d as default};
diff --git a/assets/pages_vue3_components_provide.md.422aefa5.js b/assets/pages_vue3-base_components_provide.md.e21ca77d.js
similarity index 84%
rename from assets/pages_vue3_components_provide.md.422aefa5.js
rename to assets/pages_vue3-base_components_provide.md.e21ca77d.js
index 12be900..e61ac8f 100644
--- a/assets/pages_vue3_components_provide.md.422aefa5.js
+++ b/assets/pages_vue3-base_components_provide.md.e21ca77d.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as o}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u4F9D\u8D56\u6CE8\u5165","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E94\u7528\u5C42 Provide","slug":"_1-\u5E94\u7528\u5C42-provide","link":"#_1-\u5E94\u7528\u5C42-provide","children":[]},{"level":2,"title":"2. Provide (\u63D0\u4F9B)","slug":"_2-provide-\u63D0\u4F9B","link":"#_2-provide-\u63D0\u4F9B","children":[]},{"level":2,"title":"3. Inject (\u6CE8\u5165)","slug":"_3-inject-\u6CE8\u5165","link":"#_3-inject-\u6CE8\u5165","children":[]}],"relativePath":"pages/vue3/components/provide.md"}'),p={name:"pages/vue3/components/provide.md"},l=o(`

\u4F9D\u8D56\u6CE8\u5165

\u4E00\u4E2A\u7236\u7EC4\u4EF6\u76F8\u5BF9\u4E8E\u5176\u6240\u6709\u7684\u540E\u4EE3\u7EC4\u4EF6\uFF0C\u4F1A\u4F5C\u4E3A\u4F9D\u8D56\u63D0\u4F9B\u8005\u3002\u4EFB\u4F55\u540E\u4EE3\u7684\u7EC4\u4EF6\u6811\uFF0C\u65E0\u8BBA\u5C42\u7EA7\u6709\u591A\u6DF1\uFF0C\u90FD\u53EF\u4EE5\u6CE8\u5165\u7531\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7ED9\u6574\u6761\u94FE\u8DEF\u7684\u4F9D\u8D56\u3002

1. \u5E94\u7528\u5C42 Provide

\u5728\u5E94\u7528\u7EA7\u522B\u63D0\u4F9B\u7684\u6570\u636E\u5728\u8BE5\u5E94\u7528\u5185\u7684\u6240\u6709\u7EC4\u4EF6\u4E2D\u90FD\u53EF\u4EE5\u6CE8\u5165\u3002\u8FD9\u5728\u4F60\u7F16\u5199\u63D2\u4EF6\u65F6\u4F1A\u7279\u522B\u6709\u7528\uFF0C\u56E0\u4E3A\u63D2\u4EF6\u4E00\u822C\u90FD\u4E0D\u4F1A\u4F7F\u7528\u7EC4\u4EF6\u5F62\u5F0F\u6765\u63D0\u4F9B\u503C\u3002

js
import { createApp } from "vue";
+import{_ as s,o as n,c as a,a as o}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u4F9D\u8D56\u6CE8\u5165","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E94\u7528\u5C42 Provide","slug":"_1-\u5E94\u7528\u5C42-provide","link":"#_1-\u5E94\u7528\u5C42-provide","children":[]},{"level":2,"title":"2. Provide (\u63D0\u4F9B)","slug":"_2-provide-\u63D0\u4F9B","link":"#_2-provide-\u63D0\u4F9B","children":[]},{"level":2,"title":"3. Inject (\u6CE8\u5165)","slug":"_3-inject-\u6CE8\u5165","link":"#_3-inject-\u6CE8\u5165","children":[]}],"relativePath":"pages/vue3-base/components/provide.md"}'),p={name:"pages/vue3-base/components/provide.md"},l=o(`

\u4F9D\u8D56\u6CE8\u5165

\u4E00\u4E2A\u7236\u7EC4\u4EF6\u76F8\u5BF9\u4E8E\u5176\u6240\u6709\u7684\u540E\u4EE3\u7EC4\u4EF6\uFF0C\u4F1A\u4F5C\u4E3A\u4F9D\u8D56\u63D0\u4F9B\u8005\u3002\u4EFB\u4F55\u540E\u4EE3\u7684\u7EC4\u4EF6\u6811\uFF0C\u65E0\u8BBA\u5C42\u7EA7\u6709\u591A\u6DF1\uFF0C\u90FD\u53EF\u4EE5\u6CE8\u5165\u7531\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7ED9\u6574\u6761\u94FE\u8DEF\u7684\u4F9D\u8D56\u3002

1. \u5E94\u7528\u5C42 Provide

\u5728\u5E94\u7528\u7EA7\u522B\u63D0\u4F9B\u7684\u6570\u636E\u5728\u8BE5\u5E94\u7528\u5185\u7684\u6240\u6709\u7EC4\u4EF6\u4E2D\u90FD\u53EF\u4EE5\u6CE8\u5165\u3002\u8FD9\u5728\u4F60\u7F16\u5199\u63D2\u4EF6\u65F6\u4F1A\u7279\u522B\u6709\u7528\uFF0C\u56E0\u4E3A\u63D2\u4EF6\u4E00\u822C\u90FD\u4E0D\u4F1A\u4F7F\u7528\u7EC4\u4EF6\u5F62\u5F0F\u6765\u63D0\u4F9B\u503C\u3002

js
import { createApp } from "vue";
 const app = createApp({});
 app.provide(/* \u6CE8\u5165\u540D */ "message", /* \u503C */ "hello!");
 

2. Provide (\u63D0\u4F9B)

\u4E00\u4E2A\u7EC4\u4EF6\u53EF\u4EE5\u591A\u6B21\u8C03\u7528 provide()\uFF0C\u4F7F\u7528\u4E0D\u540C\u7684\u6CE8\u5165\u540D\uFF0C\u6CE8\u5165\u4E0D\u540C\u7684\u4F9D\u8D56\u503C\u3002

provide(key,value) \u51FD\u6570\u63A5\u6536\u4E24\u4E2A\u53C2\u6570

\u7B2C\u4E00\u4E2A\u53C2\u6570\u88AB\u79F0\u4E3A\u6CE8\u5165\u540D\uFF0C\u53EF\u4EE5\u662F\u4E00\u4E2A\u5B57\u7B26\u4E32\u6216\u662F\u4E00\u4E2A Symbol\u3002

\u7B2C\u4E8C\u4E2A\u53C2\u6570\u662F\u63D0\u4F9B\u7684\u503C\uFF0C\u503C\u53EF\u4EE5\u662F\u4EFB\u610F\u7C7B\u578B\uFF0C\u5305\u62EC\u54CD\u5E94\u5F0F\u7684\u72B6\u6001\uFF0C\u6BD4\u5982\u4E00\u4E2A ref\uFF1A

vue
<script setup>
diff --git a/assets/pages_vue3_components_provide.md.422aefa5.lean.js b/assets/pages_vue3-base_components_provide.md.e21ca77d.lean.js
similarity index 63%
rename from assets/pages_vue3_components_provide.md.422aefa5.lean.js
rename to assets/pages_vue3-base_components_provide.md.e21ca77d.lean.js
index e55d487..14a0d5a 100644
--- a/assets/pages_vue3_components_provide.md.422aefa5.lean.js
+++ b/assets/pages_vue3-base_components_provide.md.e21ca77d.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as o}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u4F9D\u8D56\u6CE8\u5165","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E94\u7528\u5C42 Provide","slug":"_1-\u5E94\u7528\u5C42-provide","link":"#_1-\u5E94\u7528\u5C42-provide","children":[]},{"level":2,"title":"2. Provide (\u63D0\u4F9B)","slug":"_2-provide-\u63D0\u4F9B","link":"#_2-provide-\u63D0\u4F9B","children":[]},{"level":2,"title":"3. Inject (\u6CE8\u5165)","slug":"_3-inject-\u6CE8\u5165","link":"#_3-inject-\u6CE8\u5165","children":[]}],"relativePath":"pages/vue3/components/provide.md"}'),p={name:"pages/vue3/components/provide.md"},l=o("",16),e=[l];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
+import{_ as s,o as n,c as a,a as o}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u4F9D\u8D56\u6CE8\u5165","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5E94\u7528\u5C42 Provide","slug":"_1-\u5E94\u7528\u5C42-provide","link":"#_1-\u5E94\u7528\u5C42-provide","children":[]},{"level":2,"title":"2. Provide (\u63D0\u4F9B)","slug":"_2-provide-\u63D0\u4F9B","link":"#_2-provide-\u63D0\u4F9B","children":[]},{"level":2,"title":"3. Inject (\u6CE8\u5165)","slug":"_3-inject-\u6CE8\u5165","link":"#_3-inject-\u6CE8\u5165","children":[]}],"relativePath":"pages/vue3-base/components/provide.md"}'),p={name:"pages/vue3-base/components/provide.md"},l=o("",16),e=[l];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
diff --git a/assets/pages_vue3_components_reg.md.09fb6f64.js b/assets/pages_vue3-base_components_reg.md.ef9abdbb.js
similarity index 94%
rename from assets/pages_vue3_components_reg.md.09fb6f64.js
rename to assets/pages_vue3-base_components_reg.md.ef9abdbb.js
index 4a273c6..49c7e32 100644
--- a/assets/pages_vue3_components_reg.md.09fb6f64.js
+++ b/assets/pages_vue3-base_components_reg.md.ef9abdbb.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,a as p}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u518C","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5168\u5C40\u6CE8\u518C","slug":"_1-\u5168\u5C40\u6CE8\u518C","link":"#_1-\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"2. \u5C40\u90E8\u6CE8\u518C","slug":"_2-\u5C40\u90E8\u6CE8\u518C","link":"#_2-\u5C40\u90E8\u6CE8\u518C","children":[]},{"level":2,"title":"3. \u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","slug":"_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","link":"#_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","children":[]},{"level":2,"title":"4. elemengt plus \u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","slug":"_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","link":"#_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","children":[]}],"relativePath":"pages/vue3/components/reg.md"}'),l={name:"pages/vue3/components/reg.md"},o=p(`

\u7EC4\u4EF6\u6CE8\u518C

1. \u5168\u5C40\u6CE8\u518C

  1. app.component() \u65B9\u6CD5\u53EF\u4EE5\u88AB\u94FE\u5F0F\u8C03\u7528\uFF1A
  2. \u5168\u5C40\u6CE8\u518C\u7684\u7EC4\u4EF6\u53EF\u4EE5\u5728\u6B64\u5E94\u7528\u7684\u4EFB\u610F\u7EC4\u4EF6\u7684\u6A21\u677F\u4E2D\u4F7F\u7528\uFF1A\u6240\u6709\u7684\u5B50\u7EC4\u4EF6\u4E5F\u53EF\u4EE5\u4F7F\u7528\u5168\u5C40\u6CE8\u518C\u7684\u7EC4\u4EF6\uFF0C\u8FD9\u610F\u5473\u7740\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\u4E5F\u90FD\u53EF\u4EE5\u5728\u5F7C\u6B64\u5185\u90E8\u4F7F\u7528\u3002
js
import MyComponent from "./App.vue";
+import{_ as s,o as n,c as a,a as p}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u518C","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5168\u5C40\u6CE8\u518C","slug":"_1-\u5168\u5C40\u6CE8\u518C","link":"#_1-\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"2. \u5C40\u90E8\u6CE8\u518C","slug":"_2-\u5C40\u90E8\u6CE8\u518C","link":"#_2-\u5C40\u90E8\u6CE8\u518C","children":[]},{"level":2,"title":"3. \u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","slug":"_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","link":"#_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","children":[]},{"level":2,"title":"4. elemengt plus \u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","slug":"_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","link":"#_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","children":[]}],"relativePath":"pages/vue3-base/components/reg.md"}'),l={name:"pages/vue3-base/components/reg.md"},o=p(`

\u7EC4\u4EF6\u6CE8\u518C

1. \u5168\u5C40\u6CE8\u518C

  1. app.component() \u65B9\u6CD5\u53EF\u4EE5\u88AB\u94FE\u5F0F\u8C03\u7528\uFF1A
  2. \u5168\u5C40\u6CE8\u518C\u7684\u7EC4\u4EF6\u53EF\u4EE5\u5728\u6B64\u5E94\u7528\u7684\u4EFB\u610F\u7EC4\u4EF6\u7684\u6A21\u677F\u4E2D\u4F7F\u7528\uFF1A\u6240\u6709\u7684\u5B50\u7EC4\u4EF6\u4E5F\u53EF\u4EE5\u4F7F\u7528\u5168\u5C40\u6CE8\u518C\u7684\u7EC4\u4EF6\uFF0C\u8FD9\u610F\u5473\u7740\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\u4E5F\u90FD\u53EF\u4EE5\u5728\u5F7C\u6B64\u5185\u90E8\u4F7F\u7528\u3002
js
import MyComponent from "./App.vue";
 
 app.component("MyComponent", MyComponent);
 app
diff --git a/assets/pages_vue3_components_reg.md.09fb6f64.lean.js b/assets/pages_vue3-base_components_reg.md.ef9abdbb.lean.js
similarity index 73%
rename from assets/pages_vue3_components_reg.md.09fb6f64.lean.js
rename to assets/pages_vue3-base_components_reg.md.ef9abdbb.lean.js
index 5f743df..058d7ec 100644
--- a/assets/pages_vue3_components_reg.md.09fb6f64.lean.js
+++ b/assets/pages_vue3-base_components_reg.md.ef9abdbb.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as p}from"./app.cac277bf.js";const i=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u518C","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5168\u5C40\u6CE8\u518C","slug":"_1-\u5168\u5C40\u6CE8\u518C","link":"#_1-\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"2. \u5C40\u90E8\u6CE8\u518C","slug":"_2-\u5C40\u90E8\u6CE8\u518C","link":"#_2-\u5C40\u90E8\u6CE8\u518C","children":[]},{"level":2,"title":"3. \u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","slug":"_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","link":"#_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","children":[]},{"level":2,"title":"4. elemengt plus \u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","slug":"_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","link":"#_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","children":[]}],"relativePath":"pages/vue3/components/reg.md"}'),l={name:"pages/vue3/components/reg.md"},o=p("",29),e=[o];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,a as p}from"./app.88185e12.js";const i=JSON.parse('{"title":"\u7EC4\u4EF6\u6CE8\u518C","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u5168\u5C40\u6CE8\u518C","slug":"_1-\u5168\u5C40\u6CE8\u518C","link":"#_1-\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"2. \u5C40\u90E8\u6CE8\u518C","slug":"_2-\u5C40\u90E8\u6CE8\u518C","link":"#_2-\u5C40\u90E8\u6CE8\u518C","children":[]},{"level":2,"title":"3. \u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","slug":"_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","link":"#_3-\u76EE\u524D\u5728\u4F7F\u7528\u7684\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\u65B9\u6CD5","children":[]},{"level":2,"title":"4. elemengt plus \u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","slug":"_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","link":"#_4-elemengt-plus-\u7684\u6309\u9700\u81EA\u52A8\u5BFC\u5165","children":[]}],"relativePath":"pages/vue3-base/components/reg.md"}'),l={name:"pages/vue3-base/components/reg.md"},o=p("",29),e=[o];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
diff --git a/assets/pages_vue3_components_slot.md.33d1d27f.js b/assets/pages_vue3-base_components_slot.md.b91c6a1d.js
similarity index 85%
rename from assets/pages_vue3_components_slot.md.33d1d27f.js
rename to assets/pages_vue3-base_components_slot.md.b91c6a1d.js
index 61955f3..1ac9539 100644
--- a/assets/pages_vue3_components_slot.md.33d1d27f.js
+++ b/assets/pages_vue3-base_components_slot.md.b91c6a1d.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"\u7EC4\u4EF6\u63D2\u69FD","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6E32\u67D3\u4F5C\u7528\u57DF","slug":"_1-\u6E32\u67D3\u4F5C\u7528\u57DF","link":"#_1-\u6E32\u67D3\u4F5C\u7528\u57DF","children":[]},{"level":2,"title":"2. \u5177\u540D\u63D2\u69FD","slug":"_2-\u5177\u540D\u63D2\u69FD","link":"#_2-\u5177\u540D\u63D2\u69FD","children":[]},{"level":2,"title":"3. \u52A8\u6001\u63D2\u69FD\u540D","slug":"_3-\u52A8\u6001\u63D2\u69FD\u540D","link":"#_3-\u52A8\u6001\u63D2\u69FD\u540D","children":[]},{"level":2,"title":"4. \u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]},{"level":2,"title":"5. \u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]}],"relativePath":"pages/vue3/components/slot.md"}'),o={name:"pages/vue3/components/slot.md"},p=l(`

\u7EC4\u4EF6\u63D2\u69FD

1. \u6E32\u67D3\u4F5C\u7528\u57DF

\u63D2\u69FD\u5185\u5BB9\u65E0\u6CD5\u8BBF\u95EE\u5B50\u7EC4\u4EF6\u7684\u6570\u636E\u3002Vue \u6A21\u677F\u4E2D\u7684\u8868\u8FBE\u5F0F\u53EA\u80FD\u8BBF\u95EE\u5176\u5B9A\u4E49\u65F6\u6240\u5904\u7684\u4F5C\u7528\u57DF

\u7236\u7EC4\u4EF6\u6A21\u677F\u4E2D\u7684\u8868\u8FBE\u5F0F\u53EA\u80FD\u8BBF\u95EE\u7236\u7EC4\u4EF6\u7684\u4F5C\u7528\u57DF\uFF1B\u5B50\u7EC4\u4EF6\u6A21\u677F\u4E2D\u7684\u8868\u8FBE\u5F0F\u53EA\u80FD\u8BBF\u95EE\u5B50\u7EC4\u4EF6\u7684\u4F5C\u7528\u57DF\u3002

2. \u5177\u540D\u63D2\u69FD

\u8FD9\u7C7B\u5E26 name \u7684\u63D2\u69FD\u88AB\u79F0\u4E3A\u5177\u540D\u63D2\u69FD (named slots)\u3002\u6CA1\u6709\u63D0\u4F9B name \u7684 <slot> \u51FA\u53E3\u4F1A\u9690\u5F0F\u5730\u547D\u540D\u4E3A\u201Cdefault\u201D\u3002

\u8981\u4E3A\u5177\u540D\u63D2\u69FD\u4F20\u5165\u5185\u5BB9\uFF0C\u6211\u4EEC\u9700\u8981\u4F7F\u7528\u4E00\u4E2A\u542B v-slot \u6307\u4EE4\u7684 <template> \u5143\u7D20\uFF0C\u5E76\u5C06\u76EE\u6807\u63D2\u69FD\u7684\u540D\u5B57\u4F20\u7ED9\u8BE5\u6307\u4EE4\uFF1A

v-slot \u6709\u5BF9\u5E94\u7684\u7B80\u5199 #\uFF0C\u56E0\u6B64 <template v-slot:header> \u53EF\u4EE5\u7B80\u5199\u4E3A <template #header>\u3002\u5176\u610F\u601D\u5C31\u662F\u201C\u5C06\u8FD9\u90E8\u5206\u6A21\u677F\u7247\u6BB5\u4F20\u5165\u5B50\u7EC4\u4EF6\u7684 header \u63D2\u69FD\u4E2D\u201D\u3002

js
<BaseLayout>
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"\u7EC4\u4EF6\u63D2\u69FD","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6E32\u67D3\u4F5C\u7528\u57DF","slug":"_1-\u6E32\u67D3\u4F5C\u7528\u57DF","link":"#_1-\u6E32\u67D3\u4F5C\u7528\u57DF","children":[]},{"level":2,"title":"2. \u5177\u540D\u63D2\u69FD","slug":"_2-\u5177\u540D\u63D2\u69FD","link":"#_2-\u5177\u540D\u63D2\u69FD","children":[]},{"level":2,"title":"3. \u52A8\u6001\u63D2\u69FD\u540D","slug":"_3-\u52A8\u6001\u63D2\u69FD\u540D","link":"#_3-\u52A8\u6001\u63D2\u69FD\u540D","children":[]},{"level":2,"title":"4. \u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]},{"level":2,"title":"5. \u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]}],"relativePath":"pages/vue3-base/components/slot.md"}'),o={name:"pages/vue3-base/components/slot.md"},p=l(`

\u7EC4\u4EF6\u63D2\u69FD

1. \u6E32\u67D3\u4F5C\u7528\u57DF

\u63D2\u69FD\u5185\u5BB9\u65E0\u6CD5\u8BBF\u95EE\u5B50\u7EC4\u4EF6\u7684\u6570\u636E\u3002Vue \u6A21\u677F\u4E2D\u7684\u8868\u8FBE\u5F0F\u53EA\u80FD\u8BBF\u95EE\u5176\u5B9A\u4E49\u65F6\u6240\u5904\u7684\u4F5C\u7528\u57DF

\u7236\u7EC4\u4EF6\u6A21\u677F\u4E2D\u7684\u8868\u8FBE\u5F0F\u53EA\u80FD\u8BBF\u95EE\u7236\u7EC4\u4EF6\u7684\u4F5C\u7528\u57DF\uFF1B\u5B50\u7EC4\u4EF6\u6A21\u677F\u4E2D\u7684\u8868\u8FBE\u5F0F\u53EA\u80FD\u8BBF\u95EE\u5B50\u7EC4\u4EF6\u7684\u4F5C\u7528\u57DF\u3002

2. \u5177\u540D\u63D2\u69FD

\u8FD9\u7C7B\u5E26 name \u7684\u63D2\u69FD\u88AB\u79F0\u4E3A\u5177\u540D\u63D2\u69FD (named slots)\u3002\u6CA1\u6709\u63D0\u4F9B name \u7684 <slot> \u51FA\u53E3\u4F1A\u9690\u5F0F\u5730\u547D\u540D\u4E3A\u201Cdefault\u201D\u3002

\u8981\u4E3A\u5177\u540D\u63D2\u69FD\u4F20\u5165\u5185\u5BB9\uFF0C\u6211\u4EEC\u9700\u8981\u4F7F\u7528\u4E00\u4E2A\u542B v-slot \u6307\u4EE4\u7684 <template> \u5143\u7D20\uFF0C\u5E76\u5C06\u76EE\u6807\u63D2\u69FD\u7684\u540D\u5B57\u4F20\u7ED9\u8BE5\u6307\u4EE4\uFF1A

v-slot \u6709\u5BF9\u5E94\u7684\u7B80\u5199 #\uFF0C\u56E0\u6B64 <template v-slot:header> \u53EF\u4EE5\u7B80\u5199\u4E3A <template #header>\u3002\u5176\u610F\u601D\u5C31\u662F\u201C\u5C06\u8FD9\u90E8\u5206\u6A21\u677F\u7247\u6BB5\u4F20\u5165\u5B50\u7EC4\u4EF6\u7684 header \u63D2\u69FD\u4E2D\u201D\u3002

js
<BaseLayout>
   <template v-slot:header>{/* header \u63D2\u69FD\u7684\u5185\u5BB9\u653E\u8FD9\u91CC */}</template>
 </BaseLayout>
 

3. \u52A8\u6001\u63D2\u69FD\u540D

html
<base-layout>
diff --git a/assets/pages_vue3_components_slot.md.33d1d27f.lean.js b/assets/pages_vue3-base_components_slot.md.b91c6a1d.lean.js
similarity index 77%
rename from assets/pages_vue3_components_slot.md.33d1d27f.lean.js
rename to assets/pages_vue3-base_components_slot.md.b91c6a1d.lean.js
index 3a51723..7fd0297 100644
--- a/assets/pages_vue3_components_slot.md.33d1d27f.lean.js
+++ b/assets/pages_vue3-base_components_slot.md.b91c6a1d.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,a as l}from"./app.cac277bf.js";const d=JSON.parse('{"title":"\u7EC4\u4EF6\u63D2\u69FD","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6E32\u67D3\u4F5C\u7528\u57DF","slug":"_1-\u6E32\u67D3\u4F5C\u7528\u57DF","link":"#_1-\u6E32\u67D3\u4F5C\u7528\u57DF","children":[]},{"level":2,"title":"2. \u5177\u540D\u63D2\u69FD","slug":"_2-\u5177\u540D\u63D2\u69FD","link":"#_2-\u5177\u540D\u63D2\u69FD","children":[]},{"level":2,"title":"3. \u52A8\u6001\u63D2\u69FD\u540D","slug":"_3-\u52A8\u6001\u63D2\u69FD\u540D","link":"#_3-\u52A8\u6001\u63D2\u69FD\u540D","children":[]},{"level":2,"title":"4. \u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]},{"level":2,"title":"5. \u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]}],"relativePath":"pages/vue3/components/slot.md"}'),o={name:"pages/vue3/components/slot.md"},p=l("",21),e=[p];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
+import{_ as s,o as a,c as n,a as l}from"./app.88185e12.js";const d=JSON.parse('{"title":"\u7EC4\u4EF6\u63D2\u69FD","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6E32\u67D3\u4F5C\u7528\u57DF","slug":"_1-\u6E32\u67D3\u4F5C\u7528\u57DF","link":"#_1-\u6E32\u67D3\u4F5C\u7528\u57DF","children":[]},{"level":2,"title":"2. \u5177\u540D\u63D2\u69FD","slug":"_2-\u5177\u540D\u63D2\u69FD","link":"#_2-\u5177\u540D\u63D2\u69FD","children":[]},{"level":2,"title":"3. \u52A8\u6001\u63D2\u69FD\u540D","slug":"_3-\u52A8\u6001\u63D2\u69FD\u540D","link":"#_3-\u52A8\u6001\u63D2\u69FD\u540D","children":[]},{"level":2,"title":"4. \u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_4-\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]},{"level":2,"title":"5. \u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","slug":"_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","link":"#_5-\u5177\u540D\u4F5C\u7528\u57DF\u63D2\u69FD","children":[]}],"relativePath":"pages/vue3-base/components/slot.md"}'),o={name:"pages/vue3-base/components/slot.md"},p=l("",21),e=[p];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
diff --git a/assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.js b/assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.js
new file mode 100644
index 0000000..b963d6b
--- /dev/null
+++ b/assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.js
@@ -0,0 +1 @@
+import{_ as e,o,c as t,a as s}from"./app.88185e12.js";const h=JSON.parse('{"title":"Diff \u7B97\u6CD5","description":"","frontmatter":{},"headers":[],"relativePath":"pages/vue3-base/vueCore/diff.md"}'),d={name:"pages/vue3-base/vueCore/diff.md"},c=s('

Diff \u7B97\u6CD5

Diff \u7B97\u6CD5\u4F5C\u7528

\u5728\u7EC4\u4EF6\u66F4\u65B0\u65F6\uFF0C\u4F1A\u5F62\u6210\u65B0\u7684 VNode\uFF0C\u65B0\u65E7 VNode \u8FDB\u884C\u6BD4\u8F83 patch\uFF0C\u901A\u8FC7 diff \u7B97\u6CD5\u627E\u51FA\u66F4\u65B0\u7684\u5730\u65B9\uFF0C\u7136\u540E\u6267\u884C\u5BF9\u5E94\u7684 DOM \u64CD\u4F5C diff \u7684\u8FC7\u7A0B

Vnode \u7684\u57FA\u672C\u683C\u5F0F\uFF1A h(type, props, children)\uFF0Ctype\u6307vnode\u7684\u7C7B\u578B\uFF08\u5305\u62EC\u7EC4\u4EF6\uFF0C\u5143\u7D20\u7B49\uFF09\uFF0Cprops\u6307\u63A5\u6536\u7684\u53C2\u6570\uFF08\u5BF9\u4E8E\u7EC4\u4EF6\u7C7B\u578B\u4E3A\u5176props\u7B49\u503C\uFF0C\u5BF9\u4E8E\u5143\u7D20\u7C7B\u578B\u4E3A\u5176\u5C5E\u6027\u503C\uFF09\uFF0Cchildren\u6307\u5B50vnode\uFF08\u9ED8\u8BA4\u662F\u6570\u7EC4\uFF09\u3002

',3),r=[c];function n(a,i,f,p,_,g){return o(),t("div",null,r)}const u=e(d,[["render",n]]);export{h as __pageData,u as default}; diff --git a/assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.lean.js b/assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.lean.js new file mode 100644 index 0000000..c0e69cc --- /dev/null +++ b/assets/pages_vue3-base_vueCore_diff.md.55e4c4ca.lean.js @@ -0,0 +1 @@ +import{_ as e,o,c as t,a as s}from"./app.88185e12.js";const h=JSON.parse('{"title":"Diff \u7B97\u6CD5","description":"","frontmatter":{},"headers":[],"relativePath":"pages/vue3-base/vueCore/diff.md"}'),d={name:"pages/vue3-base/vueCore/diff.md"},c=s("",3),r=[c];function n(a,i,f,p,_,g){return o(),t("div",null,r)}const u=e(d,[["render",n]]);export{h as __pageData,u as default}; diff --git a/assets/pages_vueCore_responsivePrinciples.md.fbe18c7f.js b/assets/pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.js similarity index 97% rename from assets/pages_vueCore_responsivePrinciples.md.fbe18c7f.js rename to assets/pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.js index 1b09f8d..1afa570 100644 --- a/assets/pages_vueCore_responsivePrinciples.md.fbe18c7f.js +++ b/assets/pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.js @@ -1,4 +1,4 @@ -import{_ as s,o as n,c as a,a as p}from"./app.cac277bf.js";const i=JSON.parse('{"title":"Vue \u54CD\u5E94\u5F0F\u539F\u7406: \u4F9D\u8D56\u6536\u96C6\u548C\u4F9D\u8D56\u66F4\u65B0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48\uFF1F","slug":"_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","link":"#_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"2. Vue2 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Object.defineProperty()\u5B9E\u73B0\u7684\u3002","slug":"_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","link":"#_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","children":[]},{"level":2,"title":"3. Vue3 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Proxy \u5B9E\u73B0\u7684","slug":"_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","link":"#_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","children":[]},{"level":2,"title":"4. Vue2 \u54CD\u5E94\u5F0F\u539F\u7406\uFF1A","slug":"_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"5. Vue3 \u54CD\u5E94\u5F0F\u539F\u7406","slug":"_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"6. Object.defineProperty \u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417\uFF1F","slug":"_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","link":"#_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","children":[]},{"level":2,"title":"7. Vue2 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684\uFF1F","slug":"_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","link":"#_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","children":[]},{"level":2,"title":"8. Vue3 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\uFF1F","slug":"_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","link":"#_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","children":[]}],"relativePath":"pages/vueCore/responsivePrinciples.md"}'),l={name:"pages/vueCore/responsivePrinciples.md"},o=p(`

Vue \u54CD\u5E94\u5F0F\u539F\u7406: \u4F9D\u8D56\u6536\u96C6\u548C\u4F9D\u8D56\u66F4\u65B0

1. \u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48\uFF1F

\u6240\u8C13\u6570\u636E\u54CD\u5E94\u5F0F\u5C31\u662F\u5EFA\u7ACB\u54CD\u5E94\u5F0F\u6570\u636E\u4E0E\u4F9D\u8D56\uFF08\u8C03\u7528\u4E86\u54CD\u5E94\u5F0F\u6570\u636E\u7684\u64CD\u4F5C\uFF09\u4E4B\u95F4\u7684\u5173\u7CFB\uFF0C\u5F53\u54CD\u5E94\u5F0F\u6570\u636E\u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u901A\u77E5\u90A3\u4E9B\u4F7F\u7528\u4E86\u8FD9\u4E9B\u54CD\u5E94\u5F0F\u6570\u636E\u7684\u4F9D\u8D56\u64CD\u4F5C\u8FDB\u884C\u76F8\u5173\u66F4\u65B0\u64CD\u4F5C\uFF0C\u53EF\u4EE5\u662F DOM \u66F4\u65B0\uFF0C\u4E5F\u53EF\u4EE5\u662F\u6267\u884C\u4E00\u4E9B\u56DE\u8C03\u51FD\u6570\u3002

2. Vue2 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Object.defineProperty()\u5B9E\u73B0\u7684\u3002

\u6709\u4EE5\u4E0B\u7F3A\u70B9\uFF1A

defineProperty \u5B9A\u4E49\u5BF9\u8C61\u4E0D\u80FD\u76D1\u542C\u6DFB\u52A0\u989D\u5916\u5C5E\u6027\u6216\u4FEE\u6539\u989D\u5916\u6DFB\u52A0\u7684\u5C5E\u6027\u7684\u53D8\u5316

defineProperty \u5B9A\u4E49\u5BF9\u8C61\u4E0D\u80FD\u76D1\u542C\u6839\u636E\u81EA\u8EAB\u6570\u7EC4\u4E0B\u6807\u4FEE\u6539\u6570\u7EC4\u5143\u7D20\u7684\u53D8\u5316

Vue2 \u63D0\u4F9B\u4E86\u4E24\u4E2A\u5C5E\u6027\u65B9\u6CD5\u89E3\u51B3\u4E86\u8FD9\u4E2A\u95EE\u9898\uFF1AVue.$set\u548CVue.$delete\u3002

js
this.$delete(this.student, "name"); // \u5220\u9664student\u5BF9\u8C61\u5C5E\u6027name
+import{_ as s,o as n,c as a,a as p}from"./app.88185e12.js";const i=JSON.parse('{"title":"Vue \u54CD\u5E94\u5F0F\u539F\u7406: \u4F9D\u8D56\u6536\u96C6\u548C\u4F9D\u8D56\u66F4\u65B0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48\uFF1F","slug":"_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","link":"#_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"2. Vue2 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Object.defineProperty()\u5B9E\u73B0\u7684\u3002","slug":"_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","link":"#_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","children":[]},{"level":2,"title":"3. Vue3 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Proxy \u5B9E\u73B0\u7684","slug":"_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","link":"#_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","children":[]},{"level":2,"title":"4. Vue2 \u54CD\u5E94\u5F0F\u539F\u7406\uFF1A","slug":"_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"5. Vue3 \u54CD\u5E94\u5F0F\u539F\u7406","slug":"_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"6. Object.defineProperty \u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417\uFF1F","slug":"_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","link":"#_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","children":[]},{"level":2,"title":"7. Vue2 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684\uFF1F","slug":"_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","link":"#_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","children":[]},{"level":2,"title":"8. Vue3 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\uFF1F","slug":"_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","link":"#_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","children":[]}],"relativePath":"pages/vue3-base/vueCore/responsivePrinciples.md"}'),l={name:"pages/vue3-base/vueCore/responsivePrinciples.md"},o=p(`

Vue \u54CD\u5E94\u5F0F\u539F\u7406: \u4F9D\u8D56\u6536\u96C6\u548C\u4F9D\u8D56\u66F4\u65B0

1. \u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48\uFF1F

\u6240\u8C13\u6570\u636E\u54CD\u5E94\u5F0F\u5C31\u662F\u5EFA\u7ACB\u54CD\u5E94\u5F0F\u6570\u636E\u4E0E\u4F9D\u8D56\uFF08\u8C03\u7528\u4E86\u54CD\u5E94\u5F0F\u6570\u636E\u7684\u64CD\u4F5C\uFF09\u4E4B\u95F4\u7684\u5173\u7CFB\uFF0C\u5F53\u54CD\u5E94\u5F0F\u6570\u636E\u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u901A\u77E5\u90A3\u4E9B\u4F7F\u7528\u4E86\u8FD9\u4E9B\u54CD\u5E94\u5F0F\u6570\u636E\u7684\u4F9D\u8D56\u64CD\u4F5C\u8FDB\u884C\u76F8\u5173\u66F4\u65B0\u64CD\u4F5C\uFF0C\u53EF\u4EE5\u662F DOM \u66F4\u65B0\uFF0C\u4E5F\u53EF\u4EE5\u662F\u6267\u884C\u4E00\u4E9B\u56DE\u8C03\u51FD\u6570\u3002

2. Vue2 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Object.defineProperty()\u5B9E\u73B0\u7684\u3002

\u6709\u4EE5\u4E0B\u7F3A\u70B9\uFF1A

defineProperty \u5B9A\u4E49\u5BF9\u8C61\u4E0D\u80FD\u76D1\u542C\u6DFB\u52A0\u989D\u5916\u5C5E\u6027\u6216\u4FEE\u6539\u989D\u5916\u6DFB\u52A0\u7684\u5C5E\u6027\u7684\u53D8\u5316

defineProperty \u5B9A\u4E49\u5BF9\u8C61\u4E0D\u80FD\u76D1\u542C\u6839\u636E\u81EA\u8EAB\u6570\u7EC4\u4E0B\u6807\u4FEE\u6539\u6570\u7EC4\u5143\u7D20\u7684\u53D8\u5316

Vue2 \u63D0\u4F9B\u4E86\u4E24\u4E2A\u5C5E\u6027\u65B9\u6CD5\u89E3\u51B3\u4E86\u8FD9\u4E2A\u95EE\u9898\uFF1AVue.$set\u548CVue.$delete\u3002

js
this.$delete(this.student, "name"); // \u5220\u9664student\u5BF9\u8C61\u5C5E\u6027name
 this.$set(this.student, "age", "21"); // \u6DFB\u52A0student\u5BF9\u8C61\u5C5E\u6027age
 this.$set(this.student.hobby, 0, "\u738B\u8005"); // \u66F4\u65B0student\u5BF9\u8C61\u5C5E\u6027hobby\u6570\u7EC4
 
  • \u4E3A\u4EC0\u4E48 Vue2 \u65B0\u589E\u54CD\u5E94\u5F0F\u5C5E\u6027\u8981\u901A\u8FC7\u989D\u5916\u7684 API\uFF1F \u8FD9\u662F\u56E0\u4E3A Object.defineProperty \u53EA\u4F1A\u5BF9\u5C5E\u6027\u8FDB\u884C\u76D1\u6D4B\uFF0C\u800C\u4E0D\u4F1A\u5BF9\u5BF9\u8C61\u8FDB\u884C\u76D1\u6D4B\uFF0C\u4E3A\u4E86\u53EF\u4EE5\u76D1\u6D4B\u5BF9\u8C61 Vue2 \u521B\u5EFA\u4E86\u4E00\u4E2A Observer \u7C7B\u3002Observer \u7C7B\u7684\u4F5C\u7528\u5C31\u662F\u628A\u4E00\u4E2A\u5BF9\u8C61\u5168\u90E8\u8F6C\u6362\u6210\u54CD\u5E94\u5F0F\u5BF9\u8C61\uFF0C\u5305\u62EC\u5B50\u5C5E\u6027\u6570\u636E\uFF0C\u5F53\u5BF9\u8C61\u65B0\u589E\u6216\u5220\u9664\u5C5E\u6027\u7684\u65F6\u5019\u8D1F\u8D23\u901A\u77E5\u5BF9\u5E94\u7684 Watcher \u8FDB\u884C\u66F4\u65B0\u64CD\u4F5C\u3002
vm.$set \u7684\u5B9E\u73B0\u539F\u7406

\u5F53\u5411\u4E00\u4E2A\u54CD\u5E94\u5F0F\u5BF9\u8C61\u65B0\u589E\u5C5E\u6027\u7684\u65F6\u5019\uFF0C\u9700\u8981\u5BF9\u8FD9\u4E2A\u5C5E\u6027\u91CD\u65B0\u8FDB\u884C\u54CD\u5E94\u5F0F\u7684\u8BBE\u7F6E\uFF0C\u5373\u4F7F\u7528 defineReactive \u5C06\u65B0\u589E\u7684\u5C5E\u6027\u8F6C\u6362\u6210 getter/setter\u3002

\u6211\u4EEC\u5728\u524D\u9762\u8BB2\u8FC7\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u662F\u4F1A\u901A\u8FC7 Observer \u7C7B\u578B\u8FDB\u884C\u5305\u88C5\u7684\uFF0C\u5E76\u5728 Observer \u7C7B\u91CC\u9762\u521B\u5EFA\u4E00\u4E2A\u5C5E\u4E8E\u8FD9\u4E2A\u5BF9\u8C61\u7684\u4F9D\u8D56\u6536\u96C6\u5B58\u50A8\u5BF9\u8C61 dep\uFF0C \u6700\u540E\u5728\u65B0\u589E\u5C5E\u6027\u7684\u65F6\u5019\u5C31\u901A\u8FC7\u8FD9\u4E2A\u4F9D\u8D56\u5BF9\u8C61\u8FDB\u884C\u901A\u77E5\u76F8\u5173 Watcher \u8FDB\u884C\u53D8\u5316\u66F4\u65B0\u3002

js
function set(target, key, val) {
diff --git a/assets/pages_vueCore_responsivePrinciples.md.fbe18c7f.lean.js b/assets/pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.lean.js
similarity index 86%
rename from assets/pages_vueCore_responsivePrinciples.md.fbe18c7f.lean.js
rename to assets/pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.lean.js
index 6150796..1a37a1f 100644
--- a/assets/pages_vueCore_responsivePrinciples.md.fbe18c7f.lean.js
+++ b/assets/pages_vue3-base_vueCore_responsivePrinciples.md.d3c42f12.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,a as p}from"./app.cac277bf.js";const i=JSON.parse('{"title":"Vue \u54CD\u5E94\u5F0F\u539F\u7406: \u4F9D\u8D56\u6536\u96C6\u548C\u4F9D\u8D56\u66F4\u65B0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48\uFF1F","slug":"_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","link":"#_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"2. Vue2 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Object.defineProperty()\u5B9E\u73B0\u7684\u3002","slug":"_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","link":"#_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","children":[]},{"level":2,"title":"3. Vue3 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Proxy \u5B9E\u73B0\u7684","slug":"_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","link":"#_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","children":[]},{"level":2,"title":"4. Vue2 \u54CD\u5E94\u5F0F\u539F\u7406\uFF1A","slug":"_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"5. Vue3 \u54CD\u5E94\u5F0F\u539F\u7406","slug":"_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"6. Object.defineProperty \u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417\uFF1F","slug":"_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","link":"#_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","children":[]},{"level":2,"title":"7. Vue2 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684\uFF1F","slug":"_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","link":"#_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","children":[]},{"level":2,"title":"8. Vue3 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\uFF1F","slug":"_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","link":"#_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","children":[]}],"relativePath":"pages/vueCore/responsivePrinciples.md"}'),l={name:"pages/vueCore/responsivePrinciples.md"},o=p("",70),e=[o];function t(c,r,y,F,D,A){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};
+import{_ as s,o as n,c as a,a as p}from"./app.88185e12.js";const i=JSON.parse('{"title":"Vue \u54CD\u5E94\u5F0F\u539F\u7406: \u4F9D\u8D56\u6536\u96C6\u548C\u4F9D\u8D56\u66F4\u65B0","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48\uFF1F","slug":"_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","link":"#_1-\u6570\u636E\u54CD\u5E94\u5F0F\u662F\u4EC0\u4E48","children":[]},{"level":2,"title":"2. Vue2 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Object.defineProperty()\u5B9E\u73B0\u7684\u3002","slug":"_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","link":"#_2-vue2-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-object-defineproperty-\u5B9E\u73B0\u7684\u3002","children":[]},{"level":2,"title":"3. Vue3 \u54CD\u5E94\u5F0F\uFF1A\u57FA\u4E8E Proxy \u5B9E\u73B0\u7684","slug":"_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","link":"#_3-vue3-\u54CD\u5E94\u5F0F-\u57FA\u4E8E-proxy-\u5B9E\u73B0\u7684","children":[]},{"level":2,"title":"4. Vue2 \u54CD\u5E94\u5F0F\u539F\u7406\uFF1A","slug":"_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_4-vue2-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"5. Vue3 \u54CD\u5E94\u5F0F\u539F\u7406","slug":"_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","link":"#_5-vue3-\u54CD\u5E94\u5F0F\u539F\u7406","children":[]},{"level":2,"title":"6. Object.defineProperty \u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417\uFF1F","slug":"_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","link":"#_6-object-defineproperty-\u771F\u7684\u4E0D\u80FD\u76D1\u542C\u6570\u7EC4\u7684\u53D8\u5316\u5417","children":[]},{"level":2,"title":"7. Vue2 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684\uFF1F","slug":"_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","link":"#_7-vue2-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\u7684","children":[]},{"level":2,"title":"8. Vue3 \u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316\uFF1F","slug":"_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","link":"#_8-vue3-\u4E2D\u662F\u600E\u4E48\u76D1\u6D4B\u6570\u7EC4\u7684\u53D8\u5316","children":[]}],"relativePath":"pages/vue3-base/vueCore/responsivePrinciples.md"}'),l={name:"pages/vue3-base/vueCore/responsivePrinciples.md"},o=p("",70),e=[o];function t(c,r,y,F,D,A){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};
diff --git a/assets/pages_vueCore_virtualDom.md.38185b1e.js b/assets/pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.js
similarity index 54%
rename from assets/pages_vueCore_virtualDom.md.38185b1e.js
rename to assets/pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.js
index be0e7c6..ba61fb0 100644
--- a/assets/pages_vueCore_virtualDom.md.38185b1e.js
+++ b/assets/pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,a as e}from"./app.cac277bf.js";const C=JSON.parse('{"title":"\u865A\u62DF Dom","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F\u865A\u62DF dom\uFF1F","slug":"_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","link":"#_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","children":[]},{"level":2,"title":"\u4E09\u3001 vue3 \u4E0E vue2 \u7684\u533A\u522B","slug":"\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","link":"#\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u56DB\u3001vue \u548C react \u7684\u533A\u522B","slug":"\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","link":"#\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u4E94\u3001react Fiber","slug":"\u4E94\u3001react-fiber","link":"#\u4E94\u3001react-fiber","children":[]},{"level":2,"title":"\u516D\u3001Object.defineProperty","slug":"\u516D\u3001object-defineproperty","link":"#\u516D\u3001object-defineproperty","children":[]},{"level":2,"title":"\u4E03\u3001Object.getOwnPropertyDescriptor()","slug":"\u4E03\u3001object-getownpropertydescriptor","link":"#\u4E03\u3001object-getownpropertydescriptor","children":[]}],"relativePath":"pages/vueCore/virtualDom.md"}'),p={name:"pages/vueCore/virtualDom.md"},o=e(`

\u865A\u62DF Dom

1. \u4EC0\u4E48\u662F\u865A\u62DF dom\uFF1F

Virtual DOM\u662F JS \u6A21\u62DF\u771F\u5B9E DOM \u8282\u70B9\uFF0C\u8FD9\u4E2A\u5BF9\u8C61\u5C31\u662F\u66F4\u52A0\u8F7B\u91CF\u7EA7\u7684\u5BF9 DOM \u7684\u63CF\u8FF0

\u4E3A\u4EC0\u4E48\u73B0\u5728\u4E3B\u6D41\u7684\u6846\u67B6\u90FD\u4F7F\u7528\u865A\u62DF dom?

1\uFF09\u524D\u7AEF\u6027\u80FD\u4F18\u5316\u7684\u4E00\u4E2A\u79D8\u8BC0\u5C31\u662F\u5C3D\u53EF\u80FD\u5C11\u5730\u64CD\u4F5C DOM\uFF0C\u9891\u7E41\u53D8\u52A8 DOM \u4F1A\u9020\u6210\u6D4F\u89C8\u5668\u7684\u56DE\u6D41\u6216\u8005\u91CD\u7ED8

2\uFF09\u4F7F\u7528\u865A\u62DF dom\uFF0C\u5F53\u6570\u636E\u53D8\u5316\uFF0C\u9875\u9762\u9700\u8981\u66F4\u65B0\u65F6\uFF0C\u901A\u8FC7 diff \u7B97\u6CD5\uFF0C\u5BF9\u65B0\u65E7\u865A\u62DF dom \u8282\u70B9\u8FDB\u884C\u5BF9\u6BD4\uFF0C\u6BD4\u8F83\u4E24\u68F5\u6811\u7684\u5DEE\u5F02\uFF0C\u751F\u6210\u5DEE\u5F02\u5BF9\u8C61\uFF0C\u4E00\u6B21\u6027\u5BF9 DOM \u8FDB\u884C\u6279\u91CF\u66F4\u65B0\u64CD\u4F5C\uFF0C\u8FDB\u800C\u6709\u6548\u63D0\u9AD8\u4E86\u6027\u80FD

3\uFF09\u865A\u62DF DOM \u672C\u8D28\u4E0A\u662F js \u5BF9\u8C61\uFF0C\u800C DOM \u4E0E\u5E73\u53F0\u5F3A\u76F8\u5173\uFF0C\u76F8\u6BD4\u4E4B\u4E0B\u865A\u62DF DOM \u53EF\u4EE5\u8FDB\u884C\u66F4\u65B9\u4FBF\u7684\u8DE8\u5E73\u53F0\u64CD\u4F5C\uFF0C\u4F8B\u5982\u670D\u52A1\u5668\u6E32\u67D3\u3001weex \u5F00\u53D1\u7B49\u7B49

\u4E09\u3001 vue3 \u4E0E vue2 \u7684\u533A\u522B

1\uFF09vue3 \u6027\u80FD\u6BD4 Vue2.x \u5FEB 1.2~2 \u500D

2\uFF09\u4F7F\u7528 proxy \u53D6\u4EE3 Object.defineproperty\uFF0C\u89E3\u51B3\u4E86 vue2 \u4E2D\u65B0\u589E\u5C5E\u6027\u76D1\u542C\u4E0D\u5230\u7684\u95EE\u9898\uFF0C\u540C\u65F6 proxy \u4E5F\u652F\u6301\u6570\u7EC4\uFF0C\u4E0D\u9700\u8981\u50CF vue2 \u90A3\u6837\u5BF9\u6570\u7EC4\u7684\u65B9\u6CD5\u505A\u62E6\u622A\u5904\u7406

3\uFF09diff \u65B9\u6CD5\u4F18\u5316 vue3 \u65B0\u589E\u4E86\u9759\u6001\u6807\u8BB0\uFF08patchflag\uFF09\uFF0C\u865A\u62DF\u8282\u70B9\u5BF9\u6BD4\u65F6\uFF0C\u5C31\u53EA\u4F1A\u5BF9\u6BD4\u8FD9\u4E9B\u5E26\u6709\u9759\u6001\u6807\u8BB0\u7684\u8282\u70B9

4\uFF09\u9759\u6001\u63D0\u5347 vue3 \u5BF9\u4E8E\u4E0D\u53C2\u4E0E\u66F4\u65B0\u7684\u5143\u7D20\uFF0C\u4F1A\u505A\u9759\u6001\u63D0\u5347\uFF0C\u53EA\u4F1A\u88AB\u521B\u5EFA\u4E00\u6B21\uFF0C\u5728\u6E32\u67D3\u65F6\u76F4\u63A5\u590D\u7528\u5373\u53EF\u3002vue2 \u65E0\u8BBA\u5143\u7D20\u662F\u5426\u53C2\u4E0E\u66F4\u65B0\uFF0C\u6BCF\u6B21\u90FD\u4F1A\u91CD\u65B0\u521B\u5EFA\u7136\u540E\u518D\u6E32\u67D3

5\uFF09\u4E8B\u4EF6\u4FA6\u542C\u5668\u7F13\u5B58 \u9ED8\u8BA4\u60C5\u51B5\u4E0B onClick \u4F1A\u88AB\u89C6\u4E3A\u52A8\u6001\u7ED1\u5B9A\uFF0C\u6240\u4EE5\u6BCF\u6B21\u90FD\u4F1A\u8FFD\u8E2A\u5B83\u7684\u53D8\u5316\uFF0C\u4F46\u662F\u56E0\u4E3A\u662F\u540C\u4E00\u4E2A\u51FD\u6570\uFF0C\u6240\u4EE5\u4E0D\u7528\u8FFD\u8E2A\u53D8\u5316\uFF0C\u76F4\u63A5\u7F13\u5B58\u8D77\u6765\u590D\u7528\u5373\u53EF

6\uFF09\u6309\u9700\u5F15\u5165\uFF0C\u901A\u8FC7 treeSharking \u4F53\u79EF\u6BD4 vue2.x \u66F4\u5C0F

7\uFF09\u7EC4\u5408 API\uFF08\u7C7B\u4F3C react hooks\uFF09\uFF0C\u53EF\u4EE5\u5C06 data \u4E0E\u5BF9\u5E94\u7684\u903B\u8F91\u5199\u5230\u4E00\u8D77\uFF0C\u66F4\u5BB9\u6613\u7406\u89E3

8\uFF09\u63D0\u4F9B\u4E86\u5F88\u7075\u6D3B\u7684 api \u6BD4\u5982 toRef\u3001shallowRef \u7B49\u7B49\uFF0C\u53EF\u4EE5\u7075\u6D3B\u63A7\u5236\u6570\u636E\u53D8\u5316\u662F\u5426\u9700\u8981\u66F4\u65B0 ui \u6E32\u67D3

9\uFF09\u66F4\u597D\u7684 Ts \u652F\u6301

\u56DB\u3001vue \u548C react \u7684\u533A\u522B

1\uFF09\u8BBE\u8BA1\u7406\u5FF5\u4E0D\u540C

react \u6574\u4F53\u4E0A\u662F\u51FD\u6570\u5F0F\u7F16\u7A0B\u601D\u60F3\uFF0C\u7EC4\u4EF6\u4F7F\u7528 jsx \u8BED\u6CD5\uFF0Call in js\uFF0C\u5C06 html \u4E0E css \u5168\u90FD\u878D\u5165 javaScript \u4E2D\uFF0Cjsx \u8BED\u6CD5\u76F8\u5BF9\u6765\u8BF4\u66F4\u52A0\u7075\u6D3B

vue \u7684\u6574\u4F53\u601D\u60F3\uFF0C\u662F\u62E5\u62B1\u7ECF\u5178\u7684 html(\u7ED3\u6784)+css(\u8868\u73B0)+js(\u884C\u4E3A)\u7684\u5F62\u5F0F\uFF0C\u4F7F\u7528 template \u6A21\u677F\uFF0C\u5E76\u63D0\u4F9B\u6307\u4EE4\u4F9B\u5F00\u53D1\u8005\u4F7F\u7528\uFF0C\u5982 v-if\u3001v-show\u3001v-for \u7B49\uFF0C\u5F00\u53D1\u65F6\u6709\u7ED3\u6784\u3001\u8868\u73B0\u3001\u884C\u4E3A\u5206\u79BB\u7684\u611F\u89C9

2\uFF09\u76D1\u542C\u6570\u636E\u53D8\u5316\u7684\u5B9E\u73B0\u539F\u7406\u4E0D\u540C

vue \u7684\u601D\u60F3\u662F\u54CD\u5E94\u5F0F\u7684\uFF0C\u901A\u8FC7 Object.defineproperty \u6216 proxy \u4EE3\u7406\u5B9E\u73B0\u6570\u636E\u76D1\u542C\uFF0C\u6BCF\u4E00\u4E2A\u5C5E\u6027\u6DFB\u52A0\u4E00\u4E2A dep \u5BF9\u8C61\uFF08\u7528\u6765\u5B58\u50A8\u5BF9\u5E94\u7684 watcher\uFF09\uFF0C\u5F53\u5C5E\u6027\u53D8\u5316\u7684\u65F6\u5019\uFF0C\u901A\u77E5\u5BF9\u5E94\u7684 watcher \u53D1\u751F\u6539\u53D8

react \u63A8\u5D07\u7684\u662F\u6570\u636E\u4E0D\u53EF\u53D8\uFF0Creact \u4F7F\u7528\u7684\u662F\u6D45\u6BD4\u8F83\uFF0C\u5982\u679C\u5BF9\u8C61\u548C\u6570\u636E\u7684\u5F15\u7528\u5730\u5740\u6CA1\u6709\u53D8\uFF0Creact \u8BA4\u4E3A\u8BE5\u5BF9\u8C61\u6CA1\u6709\u53D8\u5316\uFF0C\u6240\u4EE5 react \u53D8\u5316\u65F6\u4E00\u822C\u90FD\u662F\u65B0\u521B\u5EFA\u4E00\u4E2A\u5BF9\u8C61

3\uFF09\u66F4\u65B0\u6E32\u67D3\u65B9\u5F0F\u4E0D\u540C

\u5F53\u7EC4\u4EF6\u7684\u72B6\u6001\u53D1\u751F\u53D8\u5316\u65F6\uFF0Cvue \u662F\u54CD\u5E94\u5F0F\uFF0C\u901A\u8FC7\u5BF9\u5E94\u7684 watcher \u81EA\u52A8\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u91CD\u65B0\u6E32\u67D3

react \u9700\u8981\u66F4\u65B0\u7EC4\u4EF6\u65F6\uFF0C\u4F1A\u91CD\u65B0\u8D70\u6E32\u67D3\u7684\u6D41\u7A0B\uFF0C\u901A\u8FC7\u4ECE\u6839\u8282\u70B9\u5F00\u59CB\u904D\u5386\uFF0Cdom diff \u627E\u5230\u9700\u8981\u53D8\u66F4\u7684\u8282\u70B9\uFF0C\u66F4\u65B0\u4EFB\u52A1\u8FD8\u662F\u5F88\u5927\uFF0C\u9700\u8981\u4F7F\u7528\u5230 Fiber\uFF0C\u5C06\u5927\u4EFB\u52A1\u5206\u5272\u4E3A\u591A\u4E2A\u5C0F\u4EFB\u52A1\uFF0C\u53EF\u4EE5\u4E2D\u65AD\u548C\u6062\u590D\uFF0C\u4E0D\u963B\u585E\u4E3B\u8FDB\u7A0B\u6267\u884C\u9AD8\u4F18\u5148\u7EA7\u7684\u4EFB\u52A1

4\uFF09\u5404\u81EA\u7684\u4F18\u52BF\u4E0D\u540C

vue \u7684\u4F18\u52BF\uFF1A\u6846\u67B6\u5185\u90E8\u5C01\u88C5\u7684\u591A\uFF0C\u66F4\u5BB9\u6613\u4E0A\u624B\uFF0C\u7B80\u5355\u7684\u8BED\u6CD5\u53CA\u9879\u76EE\u521B\u5EFA\uFF0C \u66F4\u5FEB\u7684\u6E32\u67D3\u901F\u5EA6\u548C\u66F4\u5C0F\u7684\u4F53\u79EF

react \u7684\u4F18\u52BF\uFF1A react \u66F4\u7075\u6D3B\uFF0C\u66F4\u63A5\u8FD1\u539F\u751F\u7684 js\u3001\u53EF\u64CD\u63A7\u6027\u5F3A\uFF0C\u5BF9\u4E8E\u80FD\u529B\u5F3A\u7684\u4EBA\uFF0C\u66F4\u5BB9\u6613\u9020\u51FA\u66F4\u4E2A\u6027\u5316\u7684\u9879\u76EE

\u4E94\u3001react Fiber

\u89E3\u51B3 react \u65E7\u7248\u672C\uFF0C\u66F4\u65B0\u9875\u9762\u65F6\u4F1A\u51FA\u73B0\u4E22\u5E27\u5361\u987F\u7684\u95EE\u9898

React \u65E7\u7248\u672C\u95EE\u9898

\u5F53\u6211\u4EEC\u8C03\u7528 setState \u66F4\u65B0\u9875\u9762\u7684\u65F6\u5019\uFF0CReact \u4F1A\u904D\u5386\u5E94\u7528\u7684\u6240\u6709\u8282\u70B9\uFF0C\u8BA1\u7B97\u51FA\u5DEE\u5F02\uFF0C\u7136\u540E\u518D\u66F4\u65B0 UI

\u6574\u4E2A\u8FC7\u7A0B\u662F\u4E00\u6C14\u5475\u6210\uFF0C\u4E0D\u80FD\u88AB\u6253\u65AD\u7684\u3002\u5982\u679C\u9875\u9762\u5143\u7D20\u5F88\u591A\uFF0C\u6574\u4E2A\u8FC7\u7A0B\u6267\u884C\u7684\u65F6\u95F4\u53EF\u80FD\u8D85\u8FC7 50 \u6BEB\u79D2\uFF0C\u5C31\u5BB9\u6613\u51FA\u73B0\u6389\u5E27\u7684\u73B0\u8C61

\u65B0\u7248\u672C\u89E3\u51B3\u65B9\u6848

React Fiber \u662F\u628A\u4E00\u4E2A\u5927\u4EFB\u52A1\u62C6\u5206\u4E3A\u4E86\u5F88\u591A\u4E2A\u5C0F\u5757\u4EFB\u52A1\uFF0C\u4E00\u4E2A\u5C0F\u5757\u4EFB\u52A1\u7684\u6267\u884C\u5FC5\u987B\u662F\u4E00\u6B21\u5B8C\u6210\u7684\uFF0C\u4E0D\u80FD\u51FA\u73B0\u6682\u505C\uFF0C\u4F46\u662F\u4E00\u4E2A\u5C0F\u5757\u4EFB\u52A1\u6267\u884C\u5B8C\u540E\u53EF\u4EE5\u79FB\u4EA4\u63A7\u5236\u6743\u7ED9\u6D4F\u89C8\u5668\u53BB\u54CD\u5E94\u7528\u6237\u64CD\u4F5C

\u6838\u5FC3\u662F\u901A\u8FC7 requestIdleCallback \uFF0C\u4F1A\u5728\u5229\u7528\u6D4F\u89C8\u5668\u7A7A\u95F2\u65F6\u95F4\u4F1A\u627E\u51FA\u6240\u6709\u9700\u8981\u53D8\u66F4\u7684\u8282\u70B9

\u9636\u6BB5\u4E00\uFF0C\u751F\u6210 Fiber \u6811\uFF0C\u5F97\u51FA\u9700\u8981\u66F4\u65B0\u7684\u8282\u70B9\u4FE1\u606F\uFF0C\u8FD9\u4E00\u6B65\u662F\u4E00\u4E2A\u6E10\u8FDB\u7684\u8FC7\u7A0B\uFF0C\u53EF\u4EE5\u88AB\u6253\u65AD

\u9636\u6BB5\u4E8C\uFF0C\u5C06\u9700\u8981\u66F4\u65B0\u7684\u8282\u70B9\u4E00\u6B21\u6027\u6279\u91CF\u66F4\u65B0\uFF0C\u8FD9\u4E2A\u8FC7\u7A0B\u4E0D\u80FD\u88AB\u6253\u65AD

react \u4E2D\u4F7F\u7528\u4E86 Fiber\uFF0C\u4E3A\u4EC0\u4E48 vue \u6CA1\u6709\u7528 Fiber\uFF1F \u539F\u56E0\u662F\u4E8C\u8005\u7684\u66F4\u65B0\u673A\u5236\u4E0D\u4E00\u6837

Vue \u662F\u57FA\u4E8E template \u548C watcher \u7684\u7EC4\u4EF6\u7EA7\u66F4\u65B0\uFF0C\u628A\u6BCF\u4E2A\u66F4\u65B0\u4EFB\u52A1\u5206\u5272\u5F97\u8DB3\u591F\u5C0F\uFF0C\u4E0D\u9700\u8981\u4F7F\u7528\u5230 Fiber \u67B6\u6784\uFF0C\u5C06\u4EFB\u52A1\u8FDB\u884C\u66F4\u7EC6\u7C92\u5EA6\u7684\u62C6\u5206

React \u662F\u4E0D\u7BA1\u5728\u54EA\u91CC\u8C03\u7528 setState\uFF0C\u90FD\u662F\u4ECE\u6839\u8282\u70B9\u5F00\u59CB\u66F4\u65B0\u7684\uFF0C\u66F4\u65B0\u4EFB\u52A1\u8FD8\u662F\u5F88\u5927\uFF0C\u9700\u8981\u4F7F\u7528\u5230 Fiber \u5C06\u5927\u4EFB\u52A1\u5206\u5272\u4E3A\u591A\u4E2A\u5C0F\u4EFB\u52A1\uFF0C\u53EF\u4EE5\u4E2D\u65AD\u548C\u6062\u590D\uFF0C\u4E0D\u963B\u585E\u4E3B\u8FDB\u7A0B\u6267\u884C\u9AD8\u4F18\u5148\u7EA7\u7684\u4EFB\u52A1\uFF0C\u5982\u679C\u4E0D\u7528 Fiber\uFF0C\u4F1A\u51FA\u73B0\u8001\u7248\u672C\u5361\u987F\u7684\u95EE\u9898

\u516D\u3001Object.defineProperty

\u63CF\u8FF0\uFF1AObject.defineProperty() \u65B9\u6CD5\u4F1A\u76F4\u63A5\u5728\u4E00\u4E2A\u5BF9\u8C61\u4E0A\u5B9A\u4E49\u4E00\u4E2A\u65B0\u5C5E\u6027\uFF0C\u6216\u8005\u4FEE\u6539\u4E00\u4E2A\u5BF9\u8C61\u7684\u73B0\u6709\u5C5E\u6027\uFF0C\u5E76\u8FD4\u56DE\u6B64\u5BF9\u8C61\u3002

\u8BED\u6CD5\uFF1A

js
Object.defineProperty(obj, prop, descriptor);
+import{_ as s,o as a,c as n,a as e}from"./app.88185e12.js";const C=JSON.parse('{"title":"\u865A\u62DF Dom","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F\u865A\u62DF dom\uFF1F","slug":"_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","link":"#_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","children":[]},{"level":2,"title":"\u4E09\u3001 vue3 \u4E0E vue2 \u7684\u533A\u522B","slug":"\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","link":"#\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u56DB\u3001vue \u548C react \u7684\u533A\u522B","slug":"\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","link":"#\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u4E94\u3001react Fiber","slug":"\u4E94\u3001react-fiber","link":"#\u4E94\u3001react-fiber","children":[]},{"level":2,"title":"\u516D\u3001Object.defineProperty","slug":"\u516D\u3001object-defineproperty","link":"#\u516D\u3001object-defineproperty","children":[]},{"level":2,"title":"\u4E03\u3001Object.getOwnPropertyDescriptor()","slug":"\u4E03\u3001object-getownpropertydescriptor","link":"#\u4E03\u3001object-getownpropertydescriptor","children":[]}],"relativePath":"pages/vue3-base/vueCore/virtualDom.md"}'),p={name:"pages/vue3-base/vueCore/virtualDom.md"},o=e(`

\u865A\u62DF Dom

1. \u4EC0\u4E48\u662F\u865A\u62DF dom\uFF1F

Virtual DOM\u662F JS \u6A21\u62DF\u771F\u5B9E DOM \u8282\u70B9\uFF0C\u8FD9\u4E2A\u5BF9\u8C61\u5C31\u662F\u66F4\u52A0\u8F7B\u91CF\u7EA7\u7684\u5BF9 DOM \u7684\u63CF\u8FF0

\u4E3A\u4EC0\u4E48\u73B0\u5728\u4E3B\u6D41\u7684\u6846\u67B6\u90FD\u4F7F\u7528\u865A\u62DF dom?

1\uFF09\u524D\u7AEF\u6027\u80FD\u4F18\u5316\u7684\u4E00\u4E2A\u79D8\u8BC0\u5C31\u662F\u5C3D\u53EF\u80FD\u5C11\u5730\u64CD\u4F5C DOM\uFF0C\u9891\u7E41\u53D8\u52A8 DOM \u4F1A\u9020\u6210\u6D4F\u89C8\u5668\u7684\u56DE\u6D41\u6216\u8005\u91CD\u7ED8

2\uFF09\u4F7F\u7528\u865A\u62DF dom\uFF0C\u5F53\u6570\u636E\u53D8\u5316\uFF0C\u9875\u9762\u9700\u8981\u66F4\u65B0\u65F6\uFF0C\u901A\u8FC7 diff \u7B97\u6CD5\uFF0C\u5BF9\u65B0\u65E7\u865A\u62DF dom \u8282\u70B9\u8FDB\u884C\u5BF9\u6BD4\uFF0C\u6BD4\u8F83\u4E24\u68F5\u6811\u7684\u5DEE\u5F02\uFF0C\u751F\u6210\u5DEE\u5F02\u5BF9\u8C61\uFF0C\u4E00\u6B21\u6027\u5BF9 DOM \u8FDB\u884C\u6279\u91CF\u66F4\u65B0\u64CD\u4F5C\uFF0C\u8FDB\u800C\u6709\u6548\u63D0\u9AD8\u4E86\u6027\u80FD

3\uFF09\u865A\u62DF DOM \u672C\u8D28\u4E0A\u662F js \u5BF9\u8C61\uFF0C\u800C DOM \u4E0E\u5E73\u53F0\u5F3A\u76F8\u5173\uFF0C\u76F8\u6BD4\u4E4B\u4E0B\u865A\u62DF DOM \u53EF\u4EE5\u8FDB\u884C\u66F4\u65B9\u4FBF\u7684\u8DE8\u5E73\u53F0\u64CD\u4F5C\uFF0C\u4F8B\u5982\u670D\u52A1\u5668\u6E32\u67D3\u3001weex \u5F00\u53D1\u7B49\u7B49

\u4E09\u3001 vue3 \u4E0E vue2 \u7684\u533A\u522B

1\uFF09vue3 \u6027\u80FD\u6BD4 Vue2.x \u5FEB 1.2~2 \u500D

2\uFF09\u4F7F\u7528 proxy \u53D6\u4EE3 Object.defineproperty\uFF0C\u89E3\u51B3\u4E86 vue2 \u4E2D\u65B0\u589E\u5C5E\u6027\u76D1\u542C\u4E0D\u5230\u7684\u95EE\u9898\uFF0C\u540C\u65F6 proxy \u4E5F\u652F\u6301\u6570\u7EC4\uFF0C\u4E0D\u9700\u8981\u50CF vue2 \u90A3\u6837\u5BF9\u6570\u7EC4\u7684\u65B9\u6CD5\u505A\u62E6\u622A\u5904\u7406

3\uFF09diff \u65B9\u6CD5\u4F18\u5316 vue3 \u65B0\u589E\u4E86\u9759\u6001\u6807\u8BB0\uFF08patchflag\uFF09\uFF0C\u865A\u62DF\u8282\u70B9\u5BF9\u6BD4\u65F6\uFF0C\u5C31\u53EA\u4F1A\u5BF9\u6BD4\u8FD9\u4E9B\u5E26\u6709\u9759\u6001\u6807\u8BB0\u7684\u8282\u70B9

4\uFF09\u9759\u6001\u63D0\u5347 vue3 \u5BF9\u4E8E\u4E0D\u53C2\u4E0E\u66F4\u65B0\u7684\u5143\u7D20\uFF0C\u4F1A\u505A\u9759\u6001\u63D0\u5347\uFF0C\u53EA\u4F1A\u88AB\u521B\u5EFA\u4E00\u6B21\uFF0C\u5728\u6E32\u67D3\u65F6\u76F4\u63A5\u590D\u7528\u5373\u53EF\u3002vue2 \u65E0\u8BBA\u5143\u7D20\u662F\u5426\u53C2\u4E0E\u66F4\u65B0\uFF0C\u6BCF\u6B21\u90FD\u4F1A\u91CD\u65B0\u521B\u5EFA\u7136\u540E\u518D\u6E32\u67D3

5\uFF09\u4E8B\u4EF6\u4FA6\u542C\u5668\u7F13\u5B58 \u9ED8\u8BA4\u60C5\u51B5\u4E0B onClick \u4F1A\u88AB\u89C6\u4E3A\u52A8\u6001\u7ED1\u5B9A\uFF0C\u6240\u4EE5\u6BCF\u6B21\u90FD\u4F1A\u8FFD\u8E2A\u5B83\u7684\u53D8\u5316\uFF0C\u4F46\u662F\u56E0\u4E3A\u662F\u540C\u4E00\u4E2A\u51FD\u6570\uFF0C\u6240\u4EE5\u4E0D\u7528\u8FFD\u8E2A\u53D8\u5316\uFF0C\u76F4\u63A5\u7F13\u5B58\u8D77\u6765\u590D\u7528\u5373\u53EF

6\uFF09\u6309\u9700\u5F15\u5165\uFF0C\u901A\u8FC7 treeSharking \u4F53\u79EF\u6BD4 vue2.x \u66F4\u5C0F

7\uFF09\u7EC4\u5408 API\uFF08\u7C7B\u4F3C react hooks\uFF09\uFF0C\u53EF\u4EE5\u5C06 data \u4E0E\u5BF9\u5E94\u7684\u903B\u8F91\u5199\u5230\u4E00\u8D77\uFF0C\u66F4\u5BB9\u6613\u7406\u89E3

8\uFF09\u63D0\u4F9B\u4E86\u5F88\u7075\u6D3B\u7684 api \u6BD4\u5982 toRef\u3001shallowRef \u7B49\u7B49\uFF0C\u53EF\u4EE5\u7075\u6D3B\u63A7\u5236\u6570\u636E\u53D8\u5316\u662F\u5426\u9700\u8981\u66F4\u65B0 ui \u6E32\u67D3

9\uFF09\u66F4\u597D\u7684 Ts \u652F\u6301

\u56DB\u3001vue \u548C react \u7684\u533A\u522B

1\uFF09\u8BBE\u8BA1\u7406\u5FF5\u4E0D\u540C

react \u6574\u4F53\u4E0A\u662F\u51FD\u6570\u5F0F\u7F16\u7A0B\u601D\u60F3\uFF0C\u7EC4\u4EF6\u4F7F\u7528 jsx \u8BED\u6CD5\uFF0Call in js\uFF0C\u5C06 html \u4E0E css \u5168\u90FD\u878D\u5165 javaScript \u4E2D\uFF0Cjsx \u8BED\u6CD5\u76F8\u5BF9\u6765\u8BF4\u66F4\u52A0\u7075\u6D3B

vue \u7684\u6574\u4F53\u601D\u60F3\uFF0C\u662F\u62E5\u62B1\u7ECF\u5178\u7684 html(\u7ED3\u6784)+css(\u8868\u73B0)+js(\u884C\u4E3A)\u7684\u5F62\u5F0F\uFF0C\u4F7F\u7528 template \u6A21\u677F\uFF0C\u5E76\u63D0\u4F9B\u6307\u4EE4\u4F9B\u5F00\u53D1\u8005\u4F7F\u7528\uFF0C\u5982 v-if\u3001v-show\u3001v-for \u7B49\uFF0C\u5F00\u53D1\u65F6\u6709\u7ED3\u6784\u3001\u8868\u73B0\u3001\u884C\u4E3A\u5206\u79BB\u7684\u611F\u89C9

2\uFF09\u76D1\u542C\u6570\u636E\u53D8\u5316\u7684\u5B9E\u73B0\u539F\u7406\u4E0D\u540C

vue \u7684\u601D\u60F3\u662F\u54CD\u5E94\u5F0F\u7684\uFF0C\u901A\u8FC7 Object.defineproperty \u6216 proxy \u4EE3\u7406\u5B9E\u73B0\u6570\u636E\u76D1\u542C\uFF0C\u6BCF\u4E00\u4E2A\u5C5E\u6027\u6DFB\u52A0\u4E00\u4E2A dep \u5BF9\u8C61\uFF08\u7528\u6765\u5B58\u50A8\u5BF9\u5E94\u7684 watcher\uFF09\uFF0C\u5F53\u5C5E\u6027\u53D8\u5316\u7684\u65F6\u5019\uFF0C\u901A\u77E5\u5BF9\u5E94\u7684 watcher \u53D1\u751F\u6539\u53D8

react \u63A8\u5D07\u7684\u662F\u6570\u636E\u4E0D\u53EF\u53D8\uFF0Creact \u4F7F\u7528\u7684\u662F\u6D45\u6BD4\u8F83\uFF0C\u5982\u679C\u5BF9\u8C61\u548C\u6570\u636E\u7684\u5F15\u7528\u5730\u5740\u6CA1\u6709\u53D8\uFF0Creact \u8BA4\u4E3A\u8BE5\u5BF9\u8C61\u6CA1\u6709\u53D8\u5316\uFF0C\u6240\u4EE5 react \u53D8\u5316\u65F6\u4E00\u822C\u90FD\u662F\u65B0\u521B\u5EFA\u4E00\u4E2A\u5BF9\u8C61

3\uFF09\u66F4\u65B0\u6E32\u67D3\u65B9\u5F0F\u4E0D\u540C

\u5F53\u7EC4\u4EF6\u7684\u72B6\u6001\u53D1\u751F\u53D8\u5316\u65F6\uFF0Cvue \u662F\u54CD\u5E94\u5F0F\uFF0C\u901A\u8FC7\u5BF9\u5E94\u7684 watcher \u81EA\u52A8\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u91CD\u65B0\u6E32\u67D3

react \u9700\u8981\u66F4\u65B0\u7EC4\u4EF6\u65F6\uFF0C\u4F1A\u91CD\u65B0\u8D70\u6E32\u67D3\u7684\u6D41\u7A0B\uFF0C\u901A\u8FC7\u4ECE\u6839\u8282\u70B9\u5F00\u59CB\u904D\u5386\uFF0Cdom diff \u627E\u5230\u9700\u8981\u53D8\u66F4\u7684\u8282\u70B9\uFF0C\u66F4\u65B0\u4EFB\u52A1\u8FD8\u662F\u5F88\u5927\uFF0C\u9700\u8981\u4F7F\u7528\u5230 Fiber\uFF0C\u5C06\u5927\u4EFB\u52A1\u5206\u5272\u4E3A\u591A\u4E2A\u5C0F\u4EFB\u52A1\uFF0C\u53EF\u4EE5\u4E2D\u65AD\u548C\u6062\u590D\uFF0C\u4E0D\u963B\u585E\u4E3B\u8FDB\u7A0B\u6267\u884C\u9AD8\u4F18\u5148\u7EA7\u7684\u4EFB\u52A1

4\uFF09\u5404\u81EA\u7684\u4F18\u52BF\u4E0D\u540C

vue \u7684\u4F18\u52BF\uFF1A\u6846\u67B6\u5185\u90E8\u5C01\u88C5\u7684\u591A\uFF0C\u66F4\u5BB9\u6613\u4E0A\u624B\uFF0C\u7B80\u5355\u7684\u8BED\u6CD5\u53CA\u9879\u76EE\u521B\u5EFA\uFF0C \u66F4\u5FEB\u7684\u6E32\u67D3\u901F\u5EA6\u548C\u66F4\u5C0F\u7684\u4F53\u79EF

react \u7684\u4F18\u52BF\uFF1A react \u66F4\u7075\u6D3B\uFF0C\u66F4\u63A5\u8FD1\u539F\u751F\u7684 js\u3001\u53EF\u64CD\u63A7\u6027\u5F3A\uFF0C\u5BF9\u4E8E\u80FD\u529B\u5F3A\u7684\u4EBA\uFF0C\u66F4\u5BB9\u6613\u9020\u51FA\u66F4\u4E2A\u6027\u5316\u7684\u9879\u76EE

\u4E94\u3001react Fiber

\u89E3\u51B3 react \u65E7\u7248\u672C\uFF0C\u66F4\u65B0\u9875\u9762\u65F6\u4F1A\u51FA\u73B0\u4E22\u5E27\u5361\u987F\u7684\u95EE\u9898

React \u65E7\u7248\u672C\u95EE\u9898

\u5F53\u6211\u4EEC\u8C03\u7528 setState \u66F4\u65B0\u9875\u9762\u7684\u65F6\u5019\uFF0CReact \u4F1A\u904D\u5386\u5E94\u7528\u7684\u6240\u6709\u8282\u70B9\uFF0C\u8BA1\u7B97\u51FA\u5DEE\u5F02\uFF0C\u7136\u540E\u518D\u66F4\u65B0 UI

\u6574\u4E2A\u8FC7\u7A0B\u662F\u4E00\u6C14\u5475\u6210\uFF0C\u4E0D\u80FD\u88AB\u6253\u65AD\u7684\u3002\u5982\u679C\u9875\u9762\u5143\u7D20\u5F88\u591A\uFF0C\u6574\u4E2A\u8FC7\u7A0B\u6267\u884C\u7684\u65F6\u95F4\u53EF\u80FD\u8D85\u8FC7 50 \u6BEB\u79D2\uFF0C\u5C31\u5BB9\u6613\u51FA\u73B0\u6389\u5E27\u7684\u73B0\u8C61

\u65B0\u7248\u672C\u89E3\u51B3\u65B9\u6848

React Fiber \u662F\u628A\u4E00\u4E2A\u5927\u4EFB\u52A1\u62C6\u5206\u4E3A\u4E86\u5F88\u591A\u4E2A\u5C0F\u5757\u4EFB\u52A1\uFF0C\u4E00\u4E2A\u5C0F\u5757\u4EFB\u52A1\u7684\u6267\u884C\u5FC5\u987B\u662F\u4E00\u6B21\u5B8C\u6210\u7684\uFF0C\u4E0D\u80FD\u51FA\u73B0\u6682\u505C\uFF0C\u4F46\u662F\u4E00\u4E2A\u5C0F\u5757\u4EFB\u52A1\u6267\u884C\u5B8C\u540E\u53EF\u4EE5\u79FB\u4EA4\u63A7\u5236\u6743\u7ED9\u6D4F\u89C8\u5668\u53BB\u54CD\u5E94\u7528\u6237\u64CD\u4F5C

\u6838\u5FC3\u662F\u901A\u8FC7 requestIdleCallback \uFF0C\u4F1A\u5728\u5229\u7528\u6D4F\u89C8\u5668\u7A7A\u95F2\u65F6\u95F4\u4F1A\u627E\u51FA\u6240\u6709\u9700\u8981\u53D8\u66F4\u7684\u8282\u70B9

\u9636\u6BB5\u4E00\uFF0C\u751F\u6210 Fiber \u6811\uFF0C\u5F97\u51FA\u9700\u8981\u66F4\u65B0\u7684\u8282\u70B9\u4FE1\u606F\uFF0C\u8FD9\u4E00\u6B65\u662F\u4E00\u4E2A\u6E10\u8FDB\u7684\u8FC7\u7A0B\uFF0C\u53EF\u4EE5\u88AB\u6253\u65AD

\u9636\u6BB5\u4E8C\uFF0C\u5C06\u9700\u8981\u66F4\u65B0\u7684\u8282\u70B9\u4E00\u6B21\u6027\u6279\u91CF\u66F4\u65B0\uFF0C\u8FD9\u4E2A\u8FC7\u7A0B\u4E0D\u80FD\u88AB\u6253\u65AD

react \u4E2D\u4F7F\u7528\u4E86 Fiber\uFF0C\u4E3A\u4EC0\u4E48 vue \u6CA1\u6709\u7528 Fiber\uFF1F \u539F\u56E0\u662F\u4E8C\u8005\u7684\u66F4\u65B0\u673A\u5236\u4E0D\u4E00\u6837

Vue \u662F\u57FA\u4E8E template \u548C watcher \u7684\u7EC4\u4EF6\u7EA7\u66F4\u65B0\uFF0C\u628A\u6BCF\u4E2A\u66F4\u65B0\u4EFB\u52A1\u5206\u5272\u5F97\u8DB3\u591F\u5C0F\uFF0C\u4E0D\u9700\u8981\u4F7F\u7528\u5230 Fiber \u67B6\u6784\uFF0C\u5C06\u4EFB\u52A1\u8FDB\u884C\u66F4\u7EC6\u7C92\u5EA6\u7684\u62C6\u5206

React \u662F\u4E0D\u7BA1\u5728\u54EA\u91CC\u8C03\u7528 setState\uFF0C\u90FD\u662F\u4ECE\u6839\u8282\u70B9\u5F00\u59CB\u66F4\u65B0\u7684\uFF0C\u66F4\u65B0\u4EFB\u52A1\u8FD8\u662F\u5F88\u5927\uFF0C\u9700\u8981\u4F7F\u7528\u5230 Fiber \u5C06\u5927\u4EFB\u52A1\u5206\u5272\u4E3A\u591A\u4E2A\u5C0F\u4EFB\u52A1\uFF0C\u53EF\u4EE5\u4E2D\u65AD\u548C\u6062\u590D\uFF0C\u4E0D\u963B\u585E\u4E3B\u8FDB\u7A0B\u6267\u884C\u9AD8\u4F18\u5148\u7EA7\u7684\u4EFB\u52A1\uFF0C\u5982\u679C\u4E0D\u7528 Fiber\uFF0C\u4F1A\u51FA\u73B0\u8001\u7248\u672C\u5361\u987F\u7684\u95EE\u9898

\u516D\u3001Object.defineProperty

\u63CF\u8FF0\uFF1AObject.defineProperty() \u65B9\u6CD5\u4F1A\u76F4\u63A5\u5728\u4E00\u4E2A\u5BF9\u8C61\u4E0A\u5B9A\u4E49\u4E00\u4E2A\u65B0\u5C5E\u6027\uFF0C\u6216\u8005\u4FEE\u6539\u4E00\u4E2A\u5BF9\u8C61\u7684\u73B0\u6709\u5C5E\u6027\uFF0C\u5E76\u8FD4\u56DE\u6B64\u5BF9\u8C61\u3002

\u8BED\u6CD5\uFF1A

js
Object.defineProperty(obj, prop, descriptor);
 

\u53C2\u6570\uFF1A

  • obj \u8981\u5B9A\u4E49\u5C5E\u6027\u7684\u5BF9\u8C61\u3002

  • prop \u8981\u5B9A\u4E49\u6216\u4FEE\u6539\u7684\u5C5E\u6027\u7684\u540D\u79F0\u6216 Symbol \u3002

  • descriptor \u8981\u5B9A\u4E49\u6216\u4FEE\u6539\u7684\u5C5E\u6027\u63CF\u8FF0\u7B26\u3002 \u5305\u62EC

    js
    {
     value: 10, // \u8981\u4FEE\u6539\u7684\u503C
     writable: false, // \u4E0D\u53EF\u91CD\u5199
    diff --git a/assets/pages_vueCore_virtualDom.md.38185b1e.lean.js b/assets/pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.lean.js
    similarity index 79%
    rename from assets/pages_vueCore_virtualDom.md.38185b1e.lean.js
    rename to assets/pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.lean.js
    index fd3417a..694e883 100644
    --- a/assets/pages_vueCore_virtualDom.md.38185b1e.lean.js
    +++ b/assets/pages_vue3-base_vueCore_virtualDom.md.f7ee0e72.lean.js
    @@ -1 +1 @@
    -import{_ as s,o as a,c as n,a as e}from"./app.cac277bf.js";const C=JSON.parse('{"title":"\u865A\u62DF Dom","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F\u865A\u62DF dom\uFF1F","slug":"_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","link":"#_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","children":[]},{"level":2,"title":"\u4E09\u3001 vue3 \u4E0E vue2 \u7684\u533A\u522B","slug":"\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","link":"#\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u56DB\u3001vue \u548C react \u7684\u533A\u522B","slug":"\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","link":"#\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u4E94\u3001react Fiber","slug":"\u4E94\u3001react-fiber","link":"#\u4E94\u3001react-fiber","children":[]},{"level":2,"title":"\u516D\u3001Object.defineProperty","slug":"\u516D\u3001object-defineproperty","link":"#\u516D\u3001object-defineproperty","children":[]},{"level":2,"title":"\u4E03\u3001Object.getOwnPropertyDescriptor()","slug":"\u4E03\u3001object-getownpropertydescriptor","link":"#\u4E03\u3001object-getownpropertydescriptor","children":[]}],"relativePath":"pages/vueCore/virtualDom.md"}'),p={name:"pages/vueCore/virtualDom.md"},o=e("",55),l=[o];function t(r,c,y,D,F,i){return a(),n("div",null,l)}const A=s(p,[["render",t]]);export{C as __pageData,A as default};
    +import{_ as s,o as a,c as n,a as e}from"./app.88185e12.js";const C=JSON.parse('{"title":"\u865A\u62DF Dom","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u4EC0\u4E48\u662F\u865A\u62DF dom\uFF1F","slug":"_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","link":"#_1-\u4EC0\u4E48\u662F\u865A\u62DF-dom","children":[]},{"level":2,"title":"\u4E09\u3001 vue3 \u4E0E vue2 \u7684\u533A\u522B","slug":"\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","link":"#\u4E09\u3001-vue3-\u4E0E-vue2-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u56DB\u3001vue \u548C react \u7684\u533A\u522B","slug":"\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","link":"#\u56DB\u3001vue-\u548C-react-\u7684\u533A\u522B","children":[]},{"level":2,"title":"\u4E94\u3001react Fiber","slug":"\u4E94\u3001react-fiber","link":"#\u4E94\u3001react-fiber","children":[]},{"level":2,"title":"\u516D\u3001Object.defineProperty","slug":"\u516D\u3001object-defineproperty","link":"#\u516D\u3001object-defineproperty","children":[]},{"level":2,"title":"\u4E03\u3001Object.getOwnPropertyDescriptor()","slug":"\u4E03\u3001object-getownpropertydescriptor","link":"#\u4E03\u3001object-getownpropertydescriptor","children":[]}],"relativePath":"pages/vue3-base/vueCore/virtualDom.md"}'),p={name:"pages/vue3-base/vueCore/virtualDom.md"},o=e("",55),l=[o];function t(r,c,y,D,F,i){return a(),n("div",null,l)}const A=s(p,[["render",t]]);export{C as __pageData,A as default};
    diff --git a/assets/pages_vue3-element-admin_anxinPC.md.57d7ccd4.js b/assets/pages_vue3-element-admin_anxinPC.md.c46f9aa5.js
    similarity index 99%
    rename from assets/pages_vue3-element-admin_anxinPC.md.57d7ccd4.js
    rename to assets/pages_vue3-element-admin_anxinPC.md.c46f9aa5.js
    index b624171..eda3e31 100644
    --- a/assets/pages_vue3-element-admin_anxinPC.md.57d7ccd4.js
    +++ b/assets/pages_vue3-element-admin_anxinPC.md.c46f9aa5.js
    @@ -1,4 +1,4 @@
    -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/globalComponents.54e62442.png",u=JSON.parse('{"title":"\u57FA\u4E8E vue3+vite+pina+element-plus \u76F8\u5173\u7CFB\u7EDF\u642D\u5EFA\u8FC7\u7A0B","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9879\u76EE\u521D\u59CB\u5316","slug":"_1-\u9879\u76EE\u521D\u59CB\u5316","link":"#_1-\u9879\u76EE\u521D\u59CB\u5316","children":[]},{"level":2,"title":"2. \u81EA\u52A8\u6309\u9700\u5BFC\u5165 element-plus","slug":"_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","link":"#_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","children":[]},{"level":2,"title":"3. \u8DEF\u5F84\u522B\u540D\u914D\u7F6E","slug":"_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","link":"#_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","children":[]},{"level":2,"title":"4. \u73AF\u5883\u53D8\u91CF","slug":"_4-\u73AF\u5883\u53D8\u91CF","link":"#_4-\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"5. \u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","slug":"_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","link":"#_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"6. SVG \u56FE\u6807","slug":"_6-svg-\u56FE\u6807","link":"#_6-svg-\u56FE\u6807","children":[]},{"level":2,"title":"7. setup \u4E0B name \u7684\u5904\u7406","slug":"_7-setup-\u4E0B-name-\u7684\u5904\u7406","link":"#_7-setup-\u4E0B-name-\u7684\u5904\u7406","children":[]},{"level":2,"title":"8. \u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","slug":"_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","link":"#_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"9. Pinia \u72B6\u6001\u7BA1\u7406","slug":"_9-pinia-\u72B6\u6001\u7BA1\u7406","link":"#_9-pinia-\u72B6\u6001\u7BA1\u7406","children":[]},{"level":2,"title":"10. \u8DEF\u7531\u7684\u6CE8\u518C","slug":"_10-\u8DEF\u7531\u7684\u6CE8\u518C","link":"#_10-\u8DEF\u7531\u7684\u6CE8\u518C","children":[]},{"level":2,"title":"11. Axios \u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","slug":"_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","link":"#_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","children":[]},{"level":2,"title":"12. vite.config.js \u914D\u7F6E","slug":"_12-vite-config-js-\u914D\u7F6E","link":"#_12-vite-config-js-\u914D\u7F6E","children":[]}],"relativePath":"pages/vue3-element-admin/anxinPC.md"}'),o={name:"pages/vue3-element-admin/anxinPC.md"},e=l(`

    \u57FA\u4E8E vue3+vite+pina+element-plus \u76F8\u5173\u7CFB\u7EDF\u642D\u5EFA\u8FC7\u7A0B

    \u53C2\u8003\u6709\u6765\u6280\u672F\u56E2\u961F vue3-element-admin \u81EA\u5DF1\u8DDF\u7740\u642D\u5EFA\u4E86\u4E00\u904D

    vue3.3 \u7279\u6027\u4E86\u89E3\uFF1Ahttps://juejin.cn/post/7231940493256032316#heading-21

    defineOptions\u4E0D\u7528\u518D\u5F15\u5165\u63D2\u4EF6\u5199 name \u5566

    defineModel \u7B80\u5316 \u53CC\u5411\u7ED1\u5B9A\u7684 prop

    1. \u9879\u76EE\u521D\u59CB\u5316

    Vite \u5B98\u65B9\u4E2D\u6587\u6587\u6863\uFF1Ahttps://cn.vitejs.dev/guide/

    • \u521D\u59CB\u5316\u9879\u76EE
    js
    pnpm create vite my-vue-app --template vue
    +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/globalComponents.54e62442.png",u=JSON.parse('{"title":"\u57FA\u4E8E vue3+vite+pina+element-plus \u76F8\u5173\u7CFB\u7EDF\u642D\u5EFA\u8FC7\u7A0B","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9879\u76EE\u521D\u59CB\u5316","slug":"_1-\u9879\u76EE\u521D\u59CB\u5316","link":"#_1-\u9879\u76EE\u521D\u59CB\u5316","children":[]},{"level":2,"title":"2. \u81EA\u52A8\u6309\u9700\u5BFC\u5165 element-plus","slug":"_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","link":"#_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","children":[]},{"level":2,"title":"3. \u8DEF\u5F84\u522B\u540D\u914D\u7F6E","slug":"_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","link":"#_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","children":[]},{"level":2,"title":"4. \u73AF\u5883\u53D8\u91CF","slug":"_4-\u73AF\u5883\u53D8\u91CF","link":"#_4-\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"5. \u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","slug":"_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","link":"#_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"6. SVG \u56FE\u6807","slug":"_6-svg-\u56FE\u6807","link":"#_6-svg-\u56FE\u6807","children":[]},{"level":2,"title":"7. setup \u4E0B name \u7684\u5904\u7406","slug":"_7-setup-\u4E0B-name-\u7684\u5904\u7406","link":"#_7-setup-\u4E0B-name-\u7684\u5904\u7406","children":[]},{"level":2,"title":"8. \u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","slug":"_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","link":"#_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"9. Pinia \u72B6\u6001\u7BA1\u7406","slug":"_9-pinia-\u72B6\u6001\u7BA1\u7406","link":"#_9-pinia-\u72B6\u6001\u7BA1\u7406","children":[]},{"level":2,"title":"10. \u8DEF\u7531\u7684\u6CE8\u518C","slug":"_10-\u8DEF\u7531\u7684\u6CE8\u518C","link":"#_10-\u8DEF\u7531\u7684\u6CE8\u518C","children":[]},{"level":2,"title":"11. Axios \u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","slug":"_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","link":"#_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","children":[]},{"level":2,"title":"12. vite.config.js \u914D\u7F6E","slug":"_12-vite-config-js-\u914D\u7F6E","link":"#_12-vite-config-js-\u914D\u7F6E","children":[]}],"relativePath":"pages/vue3-element-admin/anxinPC.md"}'),o={name:"pages/vue3-element-admin/anxinPC.md"},e=l(`

    \u57FA\u4E8E vue3+vite+pina+element-plus \u76F8\u5173\u7CFB\u7EDF\u642D\u5EFA\u8FC7\u7A0B

    \u53C2\u8003\u6709\u6765\u6280\u672F\u56E2\u961F vue3-element-admin \u81EA\u5DF1\u8DDF\u7740\u642D\u5EFA\u4E86\u4E00\u904D

    vue3.3 \u7279\u6027\u4E86\u89E3\uFF1Ahttps://juejin.cn/post/7231940493256032316#heading-21

    defineOptions\u4E0D\u7528\u518D\u5F15\u5165\u63D2\u4EF6\u5199 name \u5566

    defineModel \u7B80\u5316 \u53CC\u5411\u7ED1\u5B9A\u7684 prop

    1. \u9879\u76EE\u521D\u59CB\u5316

    Vite \u5B98\u65B9\u4E2D\u6587\u6587\u6863\uFF1Ahttps://cn.vitejs.dev/guide/

    • \u521D\u59CB\u5316\u9879\u76EE
    js
    pnpm create vite my-vue-app --template vue
     
    • my-vue-app\uFF1A\u9879\u76EE\u540D\u79F0
    • vue: Vue \u7684\u6A21\u677F\uFF0C\u9664\u6B64\u8FD8\u6709 vue-ts(Vue + TypeScript \u7684\u6A21\u677F) \uFF0Creact\uFF0Creact-ts \u6A21\u677F\u7B49
    • \u542F\u52A8\u9879\u76EE
    js
    cd my-vue-app
     pnpm install
     pnpm run dev
    diff --git a/assets/pages_vue3-element-admin_anxinPC.md.57d7ccd4.lean.js b/assets/pages_vue3-element-admin_anxinPC.md.c46f9aa5.lean.js
    similarity index 97%
    rename from assets/pages_vue3-element-admin_anxinPC.md.57d7ccd4.lean.js
    rename to assets/pages_vue3-element-admin_anxinPC.md.c46f9aa5.lean.js
    index e7ad2a0..d90bceb 100644
    --- a/assets/pages_vue3-element-admin_anxinPC.md.57d7ccd4.lean.js
    +++ b/assets/pages_vue3-element-admin_anxinPC.md.c46f9aa5.lean.js
    @@ -1 +1 @@
    -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const p="/ybhdsg-zhs/assets/globalComponents.54e62442.png",u=JSON.parse('{"title":"\u57FA\u4E8E vue3+vite+pina+element-plus \u76F8\u5173\u7CFB\u7EDF\u642D\u5EFA\u8FC7\u7A0B","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9879\u76EE\u521D\u59CB\u5316","slug":"_1-\u9879\u76EE\u521D\u59CB\u5316","link":"#_1-\u9879\u76EE\u521D\u59CB\u5316","children":[]},{"level":2,"title":"2. \u81EA\u52A8\u6309\u9700\u5BFC\u5165 element-plus","slug":"_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","link":"#_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","children":[]},{"level":2,"title":"3. \u8DEF\u5F84\u522B\u540D\u914D\u7F6E","slug":"_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","link":"#_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","children":[]},{"level":2,"title":"4. \u73AF\u5883\u53D8\u91CF","slug":"_4-\u73AF\u5883\u53D8\u91CF","link":"#_4-\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"5. \u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","slug":"_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","link":"#_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"6. SVG \u56FE\u6807","slug":"_6-svg-\u56FE\u6807","link":"#_6-svg-\u56FE\u6807","children":[]},{"level":2,"title":"7. setup \u4E0B name \u7684\u5904\u7406","slug":"_7-setup-\u4E0B-name-\u7684\u5904\u7406","link":"#_7-setup-\u4E0B-name-\u7684\u5904\u7406","children":[]},{"level":2,"title":"8. \u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","slug":"_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","link":"#_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"9. Pinia \u72B6\u6001\u7BA1\u7406","slug":"_9-pinia-\u72B6\u6001\u7BA1\u7406","link":"#_9-pinia-\u72B6\u6001\u7BA1\u7406","children":[]},{"level":2,"title":"10. \u8DEF\u7531\u7684\u6CE8\u518C","slug":"_10-\u8DEF\u7531\u7684\u6CE8\u518C","link":"#_10-\u8DEF\u7531\u7684\u6CE8\u518C","children":[]},{"level":2,"title":"11. Axios \u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","slug":"_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","link":"#_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","children":[]},{"level":2,"title":"12. vite.config.js \u914D\u7F6E","slug":"_12-vite-config-js-\u914D\u7F6E","link":"#_12-vite-config-js-\u914D\u7F6E","children":[]}],"relativePath":"pages/vue3-element-admin/anxinPC.md"}'),o={name:"pages/vue3-element-admin/anxinPC.md"},e=l("",98),t=[e];function c(r,F,D,y,C,A){return n(),a("div",null,t)}const d=s(o,[["render",c]]);export{u as __pageData,d as default};
    +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const p="/ybhdsg-zhs/assets/globalComponents.54e62442.png",u=JSON.parse('{"title":"\u57FA\u4E8E vue3+vite+pina+element-plus \u76F8\u5173\u7CFB\u7EDF\u642D\u5EFA\u8FC7\u7A0B","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u9879\u76EE\u521D\u59CB\u5316","slug":"_1-\u9879\u76EE\u521D\u59CB\u5316","link":"#_1-\u9879\u76EE\u521D\u59CB\u5316","children":[]},{"level":2,"title":"2. \u81EA\u52A8\u6309\u9700\u5BFC\u5165 element-plus","slug":"_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","link":"#_2-\u81EA\u52A8\u6309\u9700\u5BFC\u5165-element-plus","children":[]},{"level":2,"title":"3. \u8DEF\u5F84\u522B\u540D\u914D\u7F6E","slug":"_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","link":"#_3-\u8DEF\u5F84\u522B\u540D\u914D\u7F6E","children":[]},{"level":2,"title":"4. \u73AF\u5883\u53D8\u91CF","slug":"_4-\u73AF\u5883\u53D8\u91CF","link":"#_4-\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"5. \u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","slug":"_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","link":"#_5-\u83B7\u53D6\u914D\u7F6E\u7684\u73AF\u5883\u53D8\u91CF","children":[]},{"level":2,"title":"6. SVG \u56FE\u6807","slug":"_6-svg-\u56FE\u6807","link":"#_6-svg-\u56FE\u6807","children":[]},{"level":2,"title":"7. setup \u4E0B name \u7684\u5904\u7406","slug":"_7-setup-\u4E0B-name-\u7684\u5904\u7406","link":"#_7-setup-\u4E0B-name-\u7684\u5904\u7406","children":[]},{"level":2,"title":"8. \u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","slug":"_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","link":"#_8-\u516C\u7528\u7EC4\u4EF6\u7684\u5168\u5C40\u6CE8\u518C","children":[]},{"level":2,"title":"9. Pinia \u72B6\u6001\u7BA1\u7406","slug":"_9-pinia-\u72B6\u6001\u7BA1\u7406","link":"#_9-pinia-\u72B6\u6001\u7BA1\u7406","children":[]},{"level":2,"title":"10. \u8DEF\u7531\u7684\u6CE8\u518C","slug":"_10-\u8DEF\u7531\u7684\u6CE8\u518C","link":"#_10-\u8DEF\u7531\u7684\u6CE8\u518C","children":[]},{"level":2,"title":"11. Axios \u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","slug":"_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","link":"#_11-axios-\u7F51\u7EDC\u8BF7\u6C42\u5E93\u5C01\u88C5","children":[]},{"level":2,"title":"12. vite.config.js \u914D\u7F6E","slug":"_12-vite-config-js-\u914D\u7F6E","link":"#_12-vite-config-js-\u914D\u7F6E","children":[]}],"relativePath":"pages/vue3-element-admin/anxinPC.md"}'),o={name:"pages/vue3-element-admin/anxinPC.md"},e=l("",98),t=[e];function c(r,F,D,y,C,A){return n(),a("div",null,t)}const d=s(o,[["render",c]]);export{u as __pageData,d as default};
    diff --git a/assets/pages_vue3-element-admin_epComponents.md.7ebe1e71.js b/assets/pages_vue3-element-admin_epComponents.md.3923bf86.js
    similarity index 99%
    rename from assets/pages_vue3-element-admin_epComponents.md.7ebe1e71.js
    rename to assets/pages_vue3-element-admin_epComponents.md.3923bf86.js
    index 0a5ef22..22f8abd 100644
    --- a/assets/pages_vue3-element-admin_epComponents.md.7ebe1e71.js
    +++ b/assets/pages_vue3-element-admin_epComponents.md.3923bf86.js
    @@ -1,4 +1,4 @@
    -import{_ as R,l as P,e as c,m as j,o,c as e,q as S,v as I,b as D,F as f,r as _,f as T,s as N,n as J,t as h,g as $,a as z}from"./app.cac277bf.js";const M=(t,r,F="name")=>{let p=["",...t,""].join(".*"),A=new RegExp(p);return r.filter(d=>A.test(d[F]))};const H={class:"search-box"},L=["disabled"],U={key:0,class:"search-content"},O={class:"left",ref:"leftRef"},G=["onMouseenter","onClick"],K={class:"right"},Q=["onClick"],W={key:1,class:"fuzey-data"},X=["onClick"],Y={class:"no-data"},Z={__name:"fuzzySearchData",props:{data:{type:Array,default:()=>[]},delayTime:{type:Number,default:300},defaultValue:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["selectedJob"],setup(t,{expose:r,emit:F}){const p=t;P(a=>({"6ff65607":E.value}));const A={time:p.delayTime,event:"input"},d={onMounted(a,l){const s=l.arg;if(!s)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');a.addEventListener(s.event,debounce(l.value,s.time))}},y=c(null),V=c(null),E=c(),n=c(p.defaultValue),g=c(0),u=c([]);j(()=>p.defaultValue,a=>{n.value=p.defaultValue},{immediate:!0});const v=[],q=a=>{a.forEach(l=>{l.child&&l.child.length>0&&q(l.child),v.push({name:l.name,job_id:l.job_id})})};q(p.data);const C=c([]),x=()=>{n.value!==""&&(C.value=M(n.value,v))},m=a=>{n.value=a.name,F("selectedJob",a),b()},w=()=>{var a;x(),u.value=(a=p.data[0])==null?void 0:a.child,E.value=y.value.offsetHeight+"px",y.value.style.transform=" scale(1,1)"},b=()=>{n.value!==""&&(y.value.style.transform="scale(0, 0)")},B=a=>{g.value=a,u.value=p.data[a].child};return r({clearSelected:()=>n.value=""}),(a,l)=>(o(),e("div",H,[S(D("input",{style:{width:"100%"},placeholder:"\u8F93\u5165\u5C97\u4F4D\u540D\u79F0\u641C\u7D22","onUpdate:modelValue":l[0]||(l[0]=s=>n.value=s),onFocus:w,onBlur:b,disabled:t.disabled,ref_key:"iptRef",ref:V},null,40,L),[[I,n.value],[d,x,A]]),D("div",{class:"search-suggestions",ref_key:"searchContentRef",ref:y,style:{transform:"scale(0, 0)"}},[t.data.length>0&&n.value===""?(o(),e("div",U,[D("div",O,[(o(!0),e(f,null,_(t.data,(s,i)=>(o(),e("span",{class:J([i===g.value?"left-item":""]),key:s.id,onMouseenter:k=>B(i),onClick:k=>m(s)},h(s.name),43,G))),128))],512),D("div",K,[(o(!0),e(f,null,_(u.value,(s,i)=>(o(),e("span",{class:"left-item",key:s.id,onClick:k=>m(s)},h(s.name),9,Q))),128))])])):T("",!0),C.value.length>0&&n.value!==""?(o(),e("div",W,[(o(!0),e(f,null,_(C.value,s=>(o(),e("span",{class:"fuzey-data-item",key:s.job_id,onClick:i=>m(s)},h(s.name),9,X))),128))])):T("",!0),S(D("div",Y," \u6682\u65E0\u6570\u636E ",512),[[N,t.data.length===0||n.value!==""&&C.value.length===0]])],512)]))}},ss=R(Z,[["__scopeId","data-v-92b6d4c0"]]),as=z(`

    element plus \u7EC4\u4EF6

    1. \u5BFC\u5165 excel \u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6

    TIP

    \u5176\u4E2D excelToJson,changeCnToEnFn \u65B9\u6CD5\u6765\u81EA\u4E8E \u5DE5\u5177\u51FD\u6570/\u6587\u4EF6\u76F8\u5173 /pages/toolFun/download

    \u6E90\u7801
    vue
    <template>
    +import{_ as R,l as P,e as c,m as j,o,c as e,q as S,v as I,b as D,F as f,r as _,f as T,s as N,n as J,t as h,g as $,a as z}from"./app.88185e12.js";const M=(t,r,F="name")=>{let p=["",...t,""].join(".*"),A=new RegExp(p);return r.filter(d=>A.test(d[F]))};const H={class:"search-box"},L=["disabled"],U={key:0,class:"search-content"},O={class:"left",ref:"leftRef"},G=["onMouseenter","onClick"],K={class:"right"},Q=["onClick"],W={key:1,class:"fuzey-data"},X=["onClick"],Y={class:"no-data"},Z={__name:"fuzzySearchData",props:{data:{type:Array,default:()=>[]},delayTime:{type:Number,default:300},defaultValue:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["selectedJob"],setup(t,{expose:r,emit:F}){const p=t;P(a=>({"6ff65607":E.value}));const A={time:p.delayTime,event:"input"},d={onMounted(a,l){const s=l.arg;if(!s)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');a.addEventListener(s.event,debounce(l.value,s.time))}},y=c(null),V=c(null),E=c(),n=c(p.defaultValue),g=c(0),u=c([]);j(()=>p.defaultValue,a=>{n.value=p.defaultValue},{immediate:!0});const v=[],q=a=>{a.forEach(l=>{l.child&&l.child.length>0&&q(l.child),v.push({name:l.name,job_id:l.job_id})})};q(p.data);const C=c([]),x=()=>{n.value!==""&&(C.value=M(n.value,v))},m=a=>{n.value=a.name,F("selectedJob",a),b()},w=()=>{var a;x(),u.value=(a=p.data[0])==null?void 0:a.child,E.value=y.value.offsetHeight+"px",y.value.style.transform=" scale(1,1)"},b=()=>{n.value!==""&&(y.value.style.transform="scale(0, 0)")},B=a=>{g.value=a,u.value=p.data[a].child};return r({clearSelected:()=>n.value=""}),(a,l)=>(o(),e("div",H,[S(D("input",{style:{width:"100%"},placeholder:"\u8F93\u5165\u5C97\u4F4D\u540D\u79F0\u641C\u7D22","onUpdate:modelValue":l[0]||(l[0]=s=>n.value=s),onFocus:w,onBlur:b,disabled:t.disabled,ref_key:"iptRef",ref:V},null,40,L),[[I,n.value],[d,x,A]]),D("div",{class:"search-suggestions",ref_key:"searchContentRef",ref:y,style:{transform:"scale(0, 0)"}},[t.data.length>0&&n.value===""?(o(),e("div",U,[D("div",O,[(o(!0),e(f,null,_(t.data,(s,i)=>(o(),e("span",{class:J([i===g.value?"left-item":""]),key:s.id,onMouseenter:k=>B(i),onClick:k=>m(s)},h(s.name),43,G))),128))],512),D("div",K,[(o(!0),e(f,null,_(u.value,(s,i)=>(o(),e("span",{class:"left-item",key:s.id,onClick:k=>m(s)},h(s.name),9,Q))),128))])])):T("",!0),C.value.length>0&&n.value!==""?(o(),e("div",W,[(o(!0),e(f,null,_(C.value,s=>(o(),e("span",{class:"fuzey-data-item",key:s.job_id,onClick:i=>m(s)},h(s.name),9,X))),128))])):T("",!0),S(D("div",Y," \u6682\u65E0\u6570\u636E ",512),[[N,t.data.length===0||n.value!==""&&C.value.length===0]])],512)]))}},ss=R(Z,[["__scopeId","data-v-92b6d4c0"]]),as=z(`

    element plus \u7EC4\u4EF6

    1. \u5BFC\u5165 excel \u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6

    TIP

    \u5176\u4E2D excelToJson,changeCnToEnFn \u65B9\u6CD5\u6765\u81EA\u4E8E \u5DE5\u5177\u51FD\u6570/\u6587\u4EF6\u76F8\u5173 /pages/toolFun/download

    \u6E90\u7801
    vue
    <template>
       <el-upload
         ref="uploadPayrollFileRef"
         class="upload-file"
    diff --git a/assets/pages_vue3-element-admin_epComponents.md.7ebe1e71.lean.js b/assets/pages_vue3-element-admin_epComponents.md.3923bf86.lean.js
    similarity index 98%
    rename from assets/pages_vue3-element-admin_epComponents.md.7ebe1e71.lean.js
    rename to assets/pages_vue3-element-admin_epComponents.md.3923bf86.lean.js
    index 29ac7cb..9e05931 100644
    --- a/assets/pages_vue3-element-admin_epComponents.md.7ebe1e71.lean.js
    +++ b/assets/pages_vue3-element-admin_epComponents.md.3923bf86.lean.js
    @@ -1 +1 @@
    -import{_ as R,l as P,e as c,m as j,o,c as e,q as S,v as I,b as D,F as f,r as _,f as T,s as N,n as J,t as h,g as $,a as z}from"./app.cac277bf.js";const M=(t,r,F="name")=>{let p=["",...t,""].join(".*"),A=new RegExp(p);return r.filter(d=>A.test(d[F]))};const H={class:"search-box"},L=["disabled"],U={key:0,class:"search-content"},O={class:"left",ref:"leftRef"},G=["onMouseenter","onClick"],K={class:"right"},Q=["onClick"],W={key:1,class:"fuzey-data"},X=["onClick"],Y={class:"no-data"},Z={__name:"fuzzySearchData",props:{data:{type:Array,default:()=>[]},delayTime:{type:Number,default:300},defaultValue:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["selectedJob"],setup(t,{expose:r,emit:F}){const p=t;P(a=>({"6ff65607":E.value}));const A={time:p.delayTime,event:"input"},d={onMounted(a,l){const s=l.arg;if(!s)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');a.addEventListener(s.event,debounce(l.value,s.time))}},y=c(null),V=c(null),E=c(),n=c(p.defaultValue),g=c(0),u=c([]);j(()=>p.defaultValue,a=>{n.value=p.defaultValue},{immediate:!0});const v=[],q=a=>{a.forEach(l=>{l.child&&l.child.length>0&&q(l.child),v.push({name:l.name,job_id:l.job_id})})};q(p.data);const C=c([]),x=()=>{n.value!==""&&(C.value=M(n.value,v))},m=a=>{n.value=a.name,F("selectedJob",a),b()},w=()=>{var a;x(),u.value=(a=p.data[0])==null?void 0:a.child,E.value=y.value.offsetHeight+"px",y.value.style.transform=" scale(1,1)"},b=()=>{n.value!==""&&(y.value.style.transform="scale(0, 0)")},B=a=>{g.value=a,u.value=p.data[a].child};return r({clearSelected:()=>n.value=""}),(a,l)=>(o(),e("div",H,[S(D("input",{style:{width:"100%"},placeholder:"\u8F93\u5165\u5C97\u4F4D\u540D\u79F0\u641C\u7D22","onUpdate:modelValue":l[0]||(l[0]=s=>n.value=s),onFocus:w,onBlur:b,disabled:t.disabled,ref_key:"iptRef",ref:V},null,40,L),[[I,n.value],[d,x,A]]),D("div",{class:"search-suggestions",ref_key:"searchContentRef",ref:y,style:{transform:"scale(0, 0)"}},[t.data.length>0&&n.value===""?(o(),e("div",U,[D("div",O,[(o(!0),e(f,null,_(t.data,(s,i)=>(o(),e("span",{class:J([i===g.value?"left-item":""]),key:s.id,onMouseenter:k=>B(i),onClick:k=>m(s)},h(s.name),43,G))),128))],512),D("div",K,[(o(!0),e(f,null,_(u.value,(s,i)=>(o(),e("span",{class:"left-item",key:s.id,onClick:k=>m(s)},h(s.name),9,Q))),128))])])):T("",!0),C.value.length>0&&n.value!==""?(o(),e("div",W,[(o(!0),e(f,null,_(C.value,s=>(o(),e("span",{class:"fuzey-data-item",key:s.job_id,onClick:i=>m(s)},h(s.name),9,X))),128))])):T("",!0),S(D("div",Y," \u6682\u65E0\u6570\u636E ",512),[[N,t.data.length===0||n.value!==""&&C.value.length===0]])],512)]))}},ss=R(Z,[["__scopeId","data-v-92b6d4c0"]]),as=z("",5),ns=z("",3),es=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"element plus \u7EC4\u4EF6","slug":"element-plus-\u7EC4\u4EF6","link":"#element-plus-\u7EC4\u4EF6","children":[]},{"level":2,"title":"1. \u5BFC\u5165 excel \u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6","slug":"_1-\u5BFC\u5165-excel-\u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6","link":"#_1-\u5BFC\u5165-excel-\u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6","children":[]},{"level":2,"title":"2. \u524D\u7AEF\u81EA\u5DF1\u5B9E\u73B0\u6A21\u7CCA\u641C\u7D22\u7EC4\u4EF6","slug":"_2-\u524D\u7AEF\u81EA\u5DF1\u5B9E\u73B0\u6A21\u7CCA\u641C\u7D22\u7EC4\u4EF6","link":"#_2-\u524D\u7AEF\u81EA\u5DF1\u5B9E\u73B0\u6A21\u7CCA\u641C\u7D22\u7EC4\u4EF6","children":[]},{"level":2,"title":"3. \u56FE\u7247\u4E0A\u4F20\u7EC4\u4EF6","slug":"_3-\u56FE\u7247\u4E0A\u4F20\u7EC4\u4EF6","link":"#_3-\u56FE\u7247\u4E0A\u4F20\u7EC4\u4EF6","children":[]}],"relativePath":"pages/vue3-element-admin/epComponents.md"}'),ls={name:"pages/vue3-element-admin/epComponents.md"},ts=Object.assign(ls,{setup(t){const r=[{name:"item1",job_id:1,child:[{name:"item1-1",job_id:12},{name:"item1-2",job_id:13}]},{name:"item2",job_id:2,child:[{name:"item2-1",job_id:22},{name:"item2-2",job_id:23}]},{name:"item3",job_id:3,child:[{name:"item3-1",job_id:32},{name:"item3-2",job_id:33}]}];return(F,p)=>(o(),e("div",null,[as,$(ss,{data:r}),ns]))}});export{es as __pageData,ts as default};
    +import{_ as R,l as P,e as c,m as j,o,c as e,q as S,v as I,b as D,F as f,r as _,f as T,s as N,n as J,t as h,g as $,a as z}from"./app.88185e12.js";const M=(t,r,F="name")=>{let p=["",...t,""].join(".*"),A=new RegExp(p);return r.filter(d=>A.test(d[F]))};const H={class:"search-box"},L=["disabled"],U={key:0,class:"search-content"},O={class:"left",ref:"leftRef"},G=["onMouseenter","onClick"],K={class:"right"},Q=["onClick"],W={key:1,class:"fuzey-data"},X=["onClick"],Y={class:"no-data"},Z={__name:"fuzzySearchData",props:{data:{type:Array,default:()=>[]},delayTime:{type:Number,default:300},defaultValue:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["selectedJob"],setup(t,{expose:r,emit:F}){const p=t;P(a=>({"6ff65607":E.value}));const A={time:p.delayTime,event:"input"},d={onMounted(a,l){const s=l.arg;if(!s)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');a.addEventListener(s.event,debounce(l.value,s.time))}},y=c(null),V=c(null),E=c(),n=c(p.defaultValue),g=c(0),u=c([]);j(()=>p.defaultValue,a=>{n.value=p.defaultValue},{immediate:!0});const v=[],q=a=>{a.forEach(l=>{l.child&&l.child.length>0&&q(l.child),v.push({name:l.name,job_id:l.job_id})})};q(p.data);const C=c([]),x=()=>{n.value!==""&&(C.value=M(n.value,v))},m=a=>{n.value=a.name,F("selectedJob",a),b()},w=()=>{var a;x(),u.value=(a=p.data[0])==null?void 0:a.child,E.value=y.value.offsetHeight+"px",y.value.style.transform=" scale(1,1)"},b=()=>{n.value!==""&&(y.value.style.transform="scale(0, 0)")},B=a=>{g.value=a,u.value=p.data[a].child};return r({clearSelected:()=>n.value=""}),(a,l)=>(o(),e("div",H,[S(D("input",{style:{width:"100%"},placeholder:"\u8F93\u5165\u5C97\u4F4D\u540D\u79F0\u641C\u7D22","onUpdate:modelValue":l[0]||(l[0]=s=>n.value=s),onFocus:w,onBlur:b,disabled:t.disabled,ref_key:"iptRef",ref:V},null,40,L),[[I,n.value],[d,x,A]]),D("div",{class:"search-suggestions",ref_key:"searchContentRef",ref:y,style:{transform:"scale(0, 0)"}},[t.data.length>0&&n.value===""?(o(),e("div",U,[D("div",O,[(o(!0),e(f,null,_(t.data,(s,i)=>(o(),e("span",{class:J([i===g.value?"left-item":""]),key:s.id,onMouseenter:k=>B(i),onClick:k=>m(s)},h(s.name),43,G))),128))],512),D("div",K,[(o(!0),e(f,null,_(u.value,(s,i)=>(o(),e("span",{class:"left-item",key:s.id,onClick:k=>m(s)},h(s.name),9,Q))),128))])])):T("",!0),C.value.length>0&&n.value!==""?(o(),e("div",W,[(o(!0),e(f,null,_(C.value,s=>(o(),e("span",{class:"fuzey-data-item",key:s.job_id,onClick:i=>m(s)},h(s.name),9,X))),128))])):T("",!0),S(D("div",Y," \u6682\u65E0\u6570\u636E ",512),[[N,t.data.length===0||n.value!==""&&C.value.length===0]])],512)]))}},ss=R(Z,[["__scopeId","data-v-92b6d4c0"]]),as=z("",5),ns=z("",3),es=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":2,"title":"element plus \u7EC4\u4EF6","slug":"element-plus-\u7EC4\u4EF6","link":"#element-plus-\u7EC4\u4EF6","children":[]},{"level":2,"title":"1. \u5BFC\u5165 excel \u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6","slug":"_1-\u5BFC\u5165-excel-\u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6","link":"#_1-\u5BFC\u5165-excel-\u6587\u4EF6\u5E76\u4E0A\u4F20\u7EC4\u4EF6","children":[]},{"level":2,"title":"2. \u524D\u7AEF\u81EA\u5DF1\u5B9E\u73B0\u6A21\u7CCA\u641C\u7D22\u7EC4\u4EF6","slug":"_2-\u524D\u7AEF\u81EA\u5DF1\u5B9E\u73B0\u6A21\u7CCA\u641C\u7D22\u7EC4\u4EF6","link":"#_2-\u524D\u7AEF\u81EA\u5DF1\u5B9E\u73B0\u6A21\u7CCA\u641C\u7D22\u7EC4\u4EF6","children":[]},{"level":2,"title":"3. \u56FE\u7247\u4E0A\u4F20\u7EC4\u4EF6","slug":"_3-\u56FE\u7247\u4E0A\u4F20\u7EC4\u4EF6","link":"#_3-\u56FE\u7247\u4E0A\u4F20\u7EC4\u4EF6","children":[]}],"relativePath":"pages/vue3-element-admin/epComponents.md"}'),ls={name:"pages/vue3-element-admin/epComponents.md"},ts=Object.assign(ls,{setup(t){const r=[{name:"item1",job_id:1,child:[{name:"item1-1",job_id:12},{name:"item1-2",job_id:13}]},{name:"item2",job_id:2,child:[{name:"item2-1",job_id:22},{name:"item2-2",job_id:23}]},{name:"item3",job_id:3,child:[{name:"item3-1",job_id:32},{name:"item3-2",job_id:33}]}];return(F,p)=>(o(),e("div",null,[as,$(ss,{data:r}),ns]))}});export{es as __pageData,ts as default};
    diff --git a/assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.lean.js b/assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.lean.js
    deleted file mode 100644
    index 8f79cbc..0000000
    --- a/assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.lean.js
    +++ /dev/null
    @@ -1 +0,0 @@
    -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"vue \u5E38\u89C1\u6280\u5DE7","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. css \u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","slug":"_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","link":"#_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","children":[]},{"level":2,"title":"2. CSS \u4E2D\u7684 v-bind()","slug":"_2-css-\u4E2D\u7684-v-bind","link":"#_2-css-\u4E2D\u7684-v-bind","children":[]},{"level":2,"title":"3. \u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E\uFF0C\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","slug":"_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","link":"#_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","children":[]},{"level":2,"title":"4. vue \u7981\u6B62\u590D\u5236 \u7981\u7528\u53F3\u952E","slug":"_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","link":"#_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","children":[]},{"level":2,"title":"5. \u83B7\u53D6 app \u6587\u4EF6\u7684\u5305\u540D","slug":"_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","link":"#_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","children":[]},{"level":2,"title":"6. \u901A\u8FC7 customRef() \u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684 ref(\u5B98\u7F51\u4F8B\u5B50)","slug":"_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","link":"#_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","children":[]}],"relativePath":"pages/vue3Treasures/vueCommonTips.md"}'),p={name:"pages/vue3Treasures/vueCommonTips.md"},o=l("",18),e=[o];function t(c,r,F,y,D,C){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
    diff --git a/assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.js b/assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.js
    similarity index 56%
    rename from assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.js
    rename to assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.js
    index 5adcb9d..1108116 100644
    --- a/assets/pages_vue3Treasures_vueCommonTips.md.9f462d67.js
    +++ b/assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.js
    @@ -1,4 +1,4 @@
    -import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{"title":"vue \u5E38\u89C1\u6280\u5DE7","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. css \u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","slug":"_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","link":"#_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","children":[]},{"level":2,"title":"2. CSS \u4E2D\u7684 v-bind()","slug":"_2-css-\u4E2D\u7684-v-bind","link":"#_2-css-\u4E2D\u7684-v-bind","children":[]},{"level":2,"title":"3. \u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E\uFF0C\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","slug":"_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","link":"#_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","children":[]},{"level":2,"title":"4. vue \u7981\u6B62\u590D\u5236 \u7981\u7528\u53F3\u952E","slug":"_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","link":"#_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","children":[]},{"level":2,"title":"5. \u83B7\u53D6 app \u6587\u4EF6\u7684\u5305\u540D","slug":"_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","link":"#_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","children":[]},{"level":2,"title":"6. \u901A\u8FC7 customRef() \u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684 ref(\u5B98\u7F51\u4F8B\u5B50)","slug":"_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","link":"#_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","children":[]}],"relativePath":"pages/vue3Treasures/vueCommonTips.md"}'),p={name:"pages/vue3Treasures/vueCommonTips.md"},o=l(`

    vue \u5E38\u89C1\u6280\u5DE7

    1. css \u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B

    \u9875\u9762\u4E0A \u201C\u5C5E\u6027\u9009\u62E9\u5668\u201D\u8FD9\u51E0\u4E2A\u5B57\u663E\u793A\u7EA2\u8272

    Details
    js
    // \u9875\u9762\u4E0A \u201C\u5C5E\u6027\u9009\u62E9\u5668\u201D\u8FD9\u51E0\u4E2A\u5B57\u663E\u793A\u7EA2\u8272
    +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"vue \u5E38\u89C1\u6280\u5DE7","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. css \u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","slug":"_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","link":"#_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","children":[]},{"level":2,"title":"2. CSS \u4E2D\u7684 v-bind()","slug":"_2-css-\u4E2D\u7684-v-bind","link":"#_2-css-\u4E2D\u7684-v-bind","children":[]},{"level":2,"title":"3. \u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E\uFF0C\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","slug":"_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","link":"#_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","children":[]},{"level":2,"title":"4. vue \u7981\u6B62\u590D\u5236 \u7981\u7528\u53F3\u952E","slug":"_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","link":"#_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","children":[]},{"level":2,"title":"5. \u83B7\u53D6 app \u6587\u4EF6\u7684\u5305\u540D","slug":"_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","link":"#_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","children":[]},{"level":2,"title":"6. \u901A\u8FC7 customRef() \u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684 ref(\u5B98\u7F51\u4F8B\u5B50)","slug":"_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","link":"#_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","children":[]},{"level":2,"title":"7. \u5728 vue \u4E2D\u4F7F\u7528 xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6\uFF0C\u5E76\u4E14\u5F00\u542F new worker()","slug":"_7-\u5728-vue-\u4E2D\u4F7F\u7528-xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6-\u5E76\u4E14\u5F00\u542F-new-worker","link":"#_7-\u5728-vue-\u4E2D\u4F7F\u7528-xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6-\u5E76\u4E14\u5F00\u542F-new-worker","children":[{"level":3,"title":"7.1 \u4E0B\u8F7D xlsx-populate\uFF0C\u8FD9\u662F\u4E00\u4E2A node\u7684\u5E93","slug":"_7-1-\u4E0B\u8F7D-xlsx-populate-\u8FD9\u662F\u4E00\u4E2A-node\u7684\u5E93","link":"#_7-1-\u4E0B\u8F7D-xlsx-populate-\u8FD9\u662F\u4E00\u4E2A-node\u7684\u5E93","children":[]},{"level":3,"title":"7.2 \u5728 vue \u4E2D\u4F7F\u7528 new worker()\uFF0C","slug":"_7-2-\u5728-vue-\u4E2D\u4F7F\u7528-new-worker","link":"#_7-2-\u5728-vue-\u4E2D\u4F7F\u7528-new-worker","children":[]},{"level":3,"title":"7.3 \u4E0B\u8F7D\u52A0\u5BC6\u7684excel","slug":"_7-3-\u4E0B\u8F7D\u52A0\u5BC6\u7684excel","link":"#_7-3-\u4E0B\u8F7D\u52A0\u5BC6\u7684excel","children":[]}]},{"level":2,"title":"8. el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316","slug":"_8-el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316","link":"#_8-el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316","children":[]}],"relativePath":"pages/vue3Treasures/vueCommonTips.md"}'),p={name:"pages/vue3Treasures/vueCommonTips.md"},o=l(`

    vue \u5E38\u89C1\u6280\u5DE7

    1. css \u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B

    \u9875\u9762\u4E0A \u201C\u5C5E\u6027\u9009\u62E9\u5668\u201D\u8FD9\u51E0\u4E2A\u5B57\u663E\u793A\u7EA2\u8272

    Details
    js
    // \u9875\u9762\u4E0A \u201C\u5C5E\u6027\u9009\u62E9\u5668\u201D\u8FD9\u51E0\u4E2A\u5B57\u663E\u793A\u7EA2\u8272
      <div data-v-hash class="test-attr">\u5C5E\u6027\u9009\u62E9\u5668</div>
       <style>
         /* \u8BE5\u6807\u7B7E\u6709\u4E2Adata-v-hash\u7684\u5C5E\u6027\uFF0C\u53EA\u4E0D\u8FC7\u8BE5\u5C5E\u6027\u4E3A\u7A7A\uFF0C\u4F9D\u7136\u53EF\u4EE5\u4F7F\u7528\u5C5E\u6027\u9009\u62E9\u5668 */
    @@ -112,4 +112,84 @@ import{_ as s,o as n,c as a,a as l}from"./app.cac277bf.js";const i=JSON.parse('{
     <template>
       <input v-model="text" />
     </template>
    -
    `,18),e=[o];function t(c,r,F,y,D,C){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default}; +

    7. \u5728 vue \u4E2D\u4F7F\u7528 xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6\uFF0C\u5E76\u4E14\u5F00\u542F new worker()

    7.1 \u4E0B\u8F7D xlsx-populate\uFF0C\u8FD9\u662F\u4E00\u4E2A node\u7684\u5E93

    • js npm i -D xlsx-populate
    nodejs \u7248\u672C
    js
    // \u5BFC\u5165 xlsx-populate \u5E93
    +const XlsxPopulate = require("xlsx-populate");
    +XlsxPopulate.fromBlankAsync().then((workbook) => {
    +  // \u5199\u5165\u5185\u5BB9
    +  workbook.sheet("Sheet1").cell("A1").value("Some  text");
    +  // \u5199\u5165 /test.xlsx \u6587\u4EF6 \u5E76\u52A0\u5BC6
    +  return workbook.toFileAsync("./test.xlsx", { password: "$secret_password" });
    +});
    +
    \u6D4F\u89C8\u5668\u7248\u672C https://github.com/dtjohnson/xlsx-populate
    js
    // \u4E0B\u8F7D  pnpm i xlsx-populate -D
    +import XlsxPopulate from "xlsx-populate"; // \u5BFC\u5165
    +// \u52A0\u5BC6\u6587\u4EF6 file \u83B7\u53D6\u540E\u7AEF\u8BF7\u6C42\u7684excel\u6587\u4EF6\u4E3A\u4E8C\u8FDB\u5236\uFF0C\u8BBE\u7F6E { responseType: "blob" }
    +const worksheets = await XlsxPopulate.fromDataAsync(file);
    +// \u4E5F\u53EF\u4EE5\u8FD9\u4E48\u5199\u5165\u6587\u4EF6\uFF0C\u4E00\u4E2A\u5355\u5143\u683C\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5199
    +// workbook.sheet("Sheet1").cell("A1").value("Some  text");
    +
    +// \u5BF9\u6587\u4EF6\u8FDB\u884C\u52A0\u5BC6
    +const workbook = await worksheets.outputAsync({
    +  password: "$secret_password", // \u5BC6\u7801
    +});
    +// downloadExcel\u4E0B\u8F7D\u65B9\u6CD5 \u6302\u8F7D a \u5143\u7D20\u4E0B\u8F7D
    +this.downloadExcel(workbook, "\u5BFC\u51FA\u6587\u4EF6"); // \u5BFC\u51FAexcel
    +

    7.2 \u5728 vue \u4E2D\u4F7F\u7528 new worker()\uFF0C

      1. \u9700\u8981\u901A\u8FC7 worker-loader\u914D\u7F6E\uFF0C\u914D\u7F6E\u4E86\u4E4B\u540E worker.js \u540E\u7F00\u7684\u6587\u4EF6\u5C31\u4F1A\u88AB loader \u5904\u7406\uFF0C\u4F46\u6211\u6CA1\u6574\u597D
      1. \u6211\u91C7\u7528\u7684\u65B9\u6CD5\uFF1A\u76F4\u63A5\u628Ademo.worker.js\u6587\u4EF6\u653E\u5230\u76EE\u5F55public\u4E0B\u4E86\uFF0C\u8FD9\u6837\u5C31\u4E0D\u4F1A\u62A5\u5404\u79CD\u5947\u602A\u95EE\u9898\uFF0C\u6700\u7B80\u5355\u76F4\u63A5

    7.3 \u4E0B\u8F7D\u52A0\u5BC6\u7684excel

    \u4E3B\u7EBF\u7A0B
    js
    let worker
    +async workerDemo(file, ps) {
    +      return new Promise((resolve, reject) => {
    +        // \u5B9E\u4F8B\u5316\u4E00\u4E2A\u4E3B\u7EBF\u7A0B\uFF0C\u5730\u5740\u4E3A public \u4E0B\u7684 demo.worker.js
    +        worker = new Worker("demo.worker.js");
    +        // \u53D1\u9001\u4FE1\u606F
    +        worker.postMessage({ file });
    +        // \u63A5\u53D7\u4FE1\u606F
    +        worker.onmessage = (e) => {
    +          const { workbook } = e.data;
    +          // \u5F02\u6B65\u7684\u8BDD\u611F\u89C9\u65F6\u95F4\u548C\u6B63\u5E38\u52A0\u5BC6\u5DEE\u4E0D\u591A\uFF0C\u4E0D\u61C2
    +          resolve(workbook);
    +          // \u540C\u6B65\uFF0C\u76F4\u63A5\u5728\u8FD9\u5C31\u4E0B\u8F7D\u4E86\uFF0C
    +          // this.downloadExcel(workbook, "\u5BFC\u51FA\u6587\u4EF6"); // \u5BFC\u51FAexcel
    +        };
    +      });
    +},
    +async quitExport() {
    +      // \u8BF7\u6C42\u83B7\u53D6\u6587\u4EF6\u7684\u4E8C\u8FDB\u5236\u6570\u636E
    +      const file = await this.$http.exportExcel(url,data {
    +        responseType: "blob",
    +      });
    +      const t0 = window.performance.now();
    +      // \u8C03\u7528 workerDemo \u5E76\u4E14\u4F20\u5165 file
    +      const workbook = await this.workerDemo(file);
    +      // \u7ACB\u5373\u7EC8\u6B62 Worker \u7684\u884C\u4E3A
    +      worker.terminate()
    +      // downloadExcel()\u65B9\u6CD5\uFF0C\u770B \u5DE5\u5177\u51FD\u6570/\u6587\u4EF6\u76F8\u5173
    +      this.downloadExcel(workbook, "\u5BFC\u51FA\u6587\u4EF6"); // \u5BFC\u51FAexcel
    +      const t1 = window.performance.now();
    +      console.log(" \u51FD\u6570\u6267\u884C\u4E86" + (t1 - t0) + "\u6BEB\u79D2\u3002");
    +},
    +
    +
    \u5B50\u7EBF\u7A0B
    js
    // self \u548C this \u662F\u4E00\u6837\u7684\uFF0C\u4EE3\u8868\u5B50\u8FDB\u7A0B\u7684\u5168\u5C40\u5BF9\u8C61
    +// \u5F15\u5165 xlsx-populate \u5E93\u7684cdn\u6587\u4EF6
    +self.importScripts(
    +  "https://cdnjs.cloudflare.com/ajax/libs/xlsx-populate/1.21.0/xlsx-populate.min.js"
    +);
    +// \u63A5\u53D7\u4FE1\u606F
    +self.onmessage = async (e) => {
    +  const { file } = e.data;
    +  if (!file) {
    +    // \u5173\u95ED\u8FDB\u7A0B
    +    self.close();
    +  } else {
    +    // \u5904\u7406\u4F20\u5165\u7684 file \u6587\u4EF6\u5BF9\u8C61
    +    const worksheets = await XlsxPopulate.fromDataAsync(file);
    +    // \u8FDB\u884C\u52A0\u5BC6\u5904\u7406
    +    const workbook = await worksheets.outputAsync({
    +      password: "123", //  \u5BC6\u7801
    +    });
    +    // \u5411\u7236\u8FDB\u7A0B\u4F20\u8F93\u6570\u636E
    +    self.postMessage({ workbook });
    +    // \u5173\u95ED\u8FDB\u7A0B
    +    self.close();
    +  }
    +};
    +

    8. el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316

    js
    // vue2
    +Object.assign(this.formData, this.$options.data().formData);
    +

    TIP

    1. vue2\uFF1Athis.$options.data()\uFF0C\u62FF\u5230 data \u4E2D\u5B9A\u4E49\u7684\u521D\u59CB\u6570\u636E
    `,31),e=[o];function t(c,r,F,y,D,A){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default}; diff --git a/assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.lean.js b/assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.lean.js new file mode 100644 index 0000000..61d2e69 --- /dev/null +++ b/assets/pages_vue3Treasures_vueCommonTips.md.b2e5b00f.lean.js @@ -0,0 +1 @@ +import{_ as s,o as n,c as a,a as l}from"./app.88185e12.js";const i=JSON.parse('{"title":"vue \u5E38\u89C1\u6280\u5DE7","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. css \u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","slug":"_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","link":"#_1-css-\u5C5E\u6027\u9009\u62E9\u5668\u793A\u4F8B","children":[]},{"level":2,"title":"2. CSS \u4E2D\u7684 v-bind()","slug":"_2-css-\u4E2D\u7684-v-bind","link":"#_2-css-\u4E2D\u7684-v-bind","children":[]},{"level":2,"title":"3. \u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E\uFF0C\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","slug":"_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","link":"#_3-\u52A8\u6001\u8DEF\u7531\u6811\u7ED3\u6784\u6570\u636E-\u904D\u5386\u5F97\u5230\u60F3\u8981\u7684\u7ED3\u679C","children":[]},{"level":2,"title":"4. vue \u7981\u6B62\u590D\u5236 \u7981\u7528\u53F3\u952E","slug":"_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","link":"#_4-vue-\u7981\u6B62\u590D\u5236-\u7981\u7528\u53F3\u952E","children":[]},{"level":2,"title":"5. \u83B7\u53D6 app \u6587\u4EF6\u7684\u5305\u540D","slug":"_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","link":"#_5-\u83B7\u53D6-app-\u6587\u4EF6\u7684\u5305\u540D","children":[]},{"level":2,"title":"6. \u901A\u8FC7 customRef() \u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684 ref(\u5B98\u7F51\u4F8B\u5B50)","slug":"_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","link":"#_6-\u901A\u8FC7-customref-\u521B\u5EFA\u4E00\u4E2A\u9632\u6296\u7684-ref-\u5B98\u7F51\u4F8B\u5B50","children":[]},{"level":2,"title":"7. \u5728 vue \u4E2D\u4F7F\u7528 xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6\uFF0C\u5E76\u4E14\u5F00\u542F new worker()","slug":"_7-\u5728-vue-\u4E2D\u4F7F\u7528-xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6-\u5E76\u4E14\u5F00\u542F-new-worker","link":"#_7-\u5728-vue-\u4E2D\u4F7F\u7528-xlsx-populate\u5E93\u52A0\u5BC6excel\u6587\u4EF6-\u5E76\u4E14\u5F00\u542F-new-worker","children":[{"level":3,"title":"7.1 \u4E0B\u8F7D xlsx-populate\uFF0C\u8FD9\u662F\u4E00\u4E2A node\u7684\u5E93","slug":"_7-1-\u4E0B\u8F7D-xlsx-populate-\u8FD9\u662F\u4E00\u4E2A-node\u7684\u5E93","link":"#_7-1-\u4E0B\u8F7D-xlsx-populate-\u8FD9\u662F\u4E00\u4E2A-node\u7684\u5E93","children":[]},{"level":3,"title":"7.2 \u5728 vue \u4E2D\u4F7F\u7528 new worker()\uFF0C","slug":"_7-2-\u5728-vue-\u4E2D\u4F7F\u7528-new-worker","link":"#_7-2-\u5728-vue-\u4E2D\u4F7F\u7528-new-worker","children":[]},{"level":3,"title":"7.3 \u4E0B\u8F7D\u52A0\u5BC6\u7684excel","slug":"_7-3-\u4E0B\u8F7D\u52A0\u5BC6\u7684excel","link":"#_7-3-\u4E0B\u8F7D\u52A0\u5BC6\u7684excel","children":[]}]},{"level":2,"title":"8. el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316","slug":"_8-el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316","link":"#_8-el-form\u5F39\u7A97\u4E2D\u8868\u5355\u7684\u521D\u59CB\u5316","children":[]}],"relativePath":"pages/vue3Treasures/vueCommonTips.md"}'),p={name:"pages/vue3Treasures/vueCommonTips.md"},o=l("",31),e=[o];function t(c,r,F,y,D,A){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default}; diff --git a/assets/pages_vue3Treasures_vueComponents.md.59d1affa.js b/assets/pages_vue3Treasures_vueComponents.md.5cb0d14c.js similarity index 98% rename from assets/pages_vue3Treasures_vueComponents.md.59d1affa.js rename to assets/pages_vue3Treasures_vueComponents.md.5cb0d14c.js index 2d88a80..9d5af73 100644 --- a/assets/pages_vue3Treasures_vueComponents.md.59d1affa.js +++ b/assets/pages_vue3Treasures_vueComponents.md.5cb0d14c.js @@ -1,4 +1,4 @@ -import{_ as v,l as q,e as D,j as C,o as h,c as g,b as n,t as B,n as L,u as E,x as M,y as I,k as N,z as R,p as j,d as O,g as u,w as P,a as w,i as z}from"./app.cac277bf.js";const W=["data-text"],$={__name:"autoEllipsis",props:{text:{type:String,default:""},showLine:{type:[Number,String],default:1},isShowSuffix:{type:Boolean,default:!1},textStyle:{type:Object,default:()=>{}}},setup(o){const s=o;q(a=>({"5b5d230d":s.showLine}));const t={fontSize:"12px",...s.textStyle},l=D(null),e=D(s.text),r=parseInt(t.fontSize),i=D(!1);C(()=>{const{text:a,isShowEllipsis:p}=c(l.value,s.text);e.value=a,i.value=p});const c=(a,p)=>{let y;const x=a&&a.clientWidth;if(y=d(p.trim(),t)>=x*s.showLine,y&&s.isShowSuffix){const _=p.split(".").reverse()[0],b=Math.round((_.length+1)*.5),S=(Math.ceil(x/r)*s.showLine).toFixed(0)-b-2;p=p.slice(0,S)+"..."+_}return{text:p,isShowEllipsis:y}},d=(a,p)=>{const y=parseInt(p.fontSize),m=document.createElement("canvas").getContext("2d"),_=window.devicePixelRatio||1,b=_*y||_*10,S=p.fontStyle||"sans-serif";m.font=`${b}px ${S}`;const F=m.measureText(a),A=F.width,T=F.actualBoundingBoxRight+F.actualBoundingBoxLeft;return Math.max(A*_,T*_)};return(a,p)=>(h(),g("div",{class:"auto-ellipsis hover-tip","data-text":s.text,ref_key:"autoEllipsisRef",ref:l},[n("span",{class:L([i.value?"overflow-hide-moreline":""]),style:t},B(e.value),3)],8,W))}},f=v($,[["__scopeId","data-v-91b6df93"]]);const V={class:"my-loading"},U={__name:"loading",props:{size:{type:[Number,String],default:"mini"}},setup(o){const s=o;q(i=>({"73f791dc":E(r),"6cd8e7b8":E(e)}));const l={mini:60,small:80,medium:100,large:200}[s.size];let e;C(()=>{e=window.devicePixelRatio});const r=l?l+"px":s.size+"px";return(i,c)=>(h(),g("div",V))}},k=v(U,[["__scopeId","data-v-bba6dd69"]]);function H(o){return M(()=>{const s=document.createElement("canvas"),t=s.getContext("2d"),l=window.devicePixelRatio||1,r=o.fontSize*l+"px serif",{width:i,actualBoundingBoxRight:c,actualBoundingBoxLeft:d}=t.measureText(o.text),a=Math.max(100,i,c+d)+o.gap*l;return s.width=a,s.height=a,t.translate(s.width/2,s.height/2),t.rotate(Math.PI/180*-45),t.fillStyle="#f40",t.textAlign="left",t.textBaseline="middle",t.font=r,t.fillText(o.text,0,0),{base64:s.toDataURL(),size:a,styleSize:a/l}})}const J={__name:"imgWatermark",props:{text:{type:String,required:!0,default:"waterMark"},fontSize:{type:[Number,String],default:10},gap:{type:Number,default:10}},setup(o){const s=o,t=D(null),l=H(s);let e;const r=D(0);I(()=>{if(r.value,!t.value)return;e&&e.remove();const{base64:c,size:d,styleSize:a}=l.value;e=document.createElement("div"),e.style.backgroundImage=`url(${c})`,e.style.backgroundSize=`${a}px ${a}px`,e.style.backgroundRepeat="repeat",e.style.pointerEvents="none",e.style.position="absolute",e.style.zInde=9999,e.style.inset=0,t.value.appendChild(e)});let i;return C(()=>{i=new MutationObserver(c=>{for(const d of c){for(const a of d.removedNodes)if(a===e){r.value++;return}if(d.target===e){r.value++;return}}}),i.observe(t.value,{childList:!0,attributes:!0,subtree:!0})}),N(()=>{i&&i.disconnect(),e=null}),(c,d)=>(h(),g("div",{class:"water-mark",ref_key:"parentRef",ref:t},[R(c.$slots,"default",{},void 0,!0)],512))}},G=v(J,[["__scopeId","data-v-74f2beff"]]);const K={},Q=o=>(j("data-v-ea570d53"),o=o(),O(),o),X={class:"content"},Y=Q(()=>n("div",{class:"crash-ball-loading"},[n("div",{class:"ball left-ball"}),n("div",{class:"ball right-ball"})],-1)),Z=[Y];function ss(o,s){return h(),g("div",X,Z)}const es=v(K,[["render",ss],["__scopeId","data-v-ea570d53"]]),ts=w(`

    \u622A\u53D6\u5B57\u7B26\u7EC4\u4EF6

    1. \u81EA\u52A8\u7701\u7565\u6587\u672C

    \u6CE8\u610F\u70B9

    1. \u901A\u8FC7\u81EA\u5B9A\u4E49 data \u548C \u4F2A\u5143\u7D20\u7684 attr \u663E\u793A\u5C55\u793A\u7684\u6587\u672C

      attr() : \u53EF\u4EE5\u5C06\u81EA\u5B9A\u4E49\u5C5E\u6027\u503C\u4F5C\u7528\u4E8E\u4F2A\u5143\u7D20

      html
      <p data-foo="hello">world</p>
      +import{_ as v,l as q,e as D,h as C,o as h,c as g,b as n,t as B,n as L,u as E,x as M,y as I,i as N,z as R,p as j,d as O,g as u,w as P,a as w,j as z}from"./app.88185e12.js";const W=["data-text"],$={__name:"autoEllipsis",props:{text:{type:String,default:""},showLine:{type:[Number,String],default:1},isShowSuffix:{type:Boolean,default:!1},textStyle:{type:Object,default:()=>{}}},setup(o){const s=o;q(a=>({"5b5d230d":s.showLine}));const t={fontSize:"12px",...s.textStyle},l=D(null),e=D(s.text),r=parseInt(t.fontSize),i=D(!1);C(()=>{const{text:a,isShowEllipsis:p}=c(l.value,s.text);e.value=a,i.value=p});const c=(a,p)=>{let y;const x=a&&a.clientWidth;if(y=d(p.trim(),t)>=x*s.showLine,y&&s.isShowSuffix){const _=p.split(".").reverse()[0],b=Math.round((_.length+1)*.5),S=(Math.ceil(x/r)*s.showLine).toFixed(0)-b-2;p=p.slice(0,S)+"..."+_}return{text:p,isShowEllipsis:y}},d=(a,p)=>{const y=parseInt(p.fontSize),m=document.createElement("canvas").getContext("2d"),_=window.devicePixelRatio||1,b=_*y||_*10,S=p.fontStyle||"sans-serif";m.font=`${b}px ${S}`;const F=m.measureText(a),A=F.width,T=F.actualBoundingBoxRight+F.actualBoundingBoxLeft;return Math.max(A*_,T*_)};return(a,p)=>(h(),g("div",{class:"auto-ellipsis hover-tip","data-text":s.text,ref_key:"autoEllipsisRef",ref:l},[n("span",{class:L([i.value?"overflow-hide-moreline":""]),style:t},B(e.value),3)],8,W))}},f=v($,[["__scopeId","data-v-91b6df93"]]);const V={class:"my-loading"},U={__name:"loading",props:{size:{type:[Number,String],default:"mini"}},setup(o){const s=o;q(i=>({"73f791dc":E(r),"6cd8e7b8":E(e)}));const l={mini:60,small:80,medium:100,large:200}[s.size];let e;C(()=>{e=window.devicePixelRatio});const r=l?l+"px":s.size+"px";return(i,c)=>(h(),g("div",V))}},k=v(U,[["__scopeId","data-v-bba6dd69"]]);function H(o){return M(()=>{const s=document.createElement("canvas"),t=s.getContext("2d"),l=window.devicePixelRatio||1,r=o.fontSize*l+"px serif",{width:i,actualBoundingBoxRight:c,actualBoundingBoxLeft:d}=t.measureText(o.text),a=Math.max(100,i,c+d)+o.gap*l;return s.width=a,s.height=a,t.translate(s.width/2,s.height/2),t.rotate(Math.PI/180*-45),t.fillStyle="#f40",t.textAlign="left",t.textBaseline="middle",t.font=r,t.fillText(o.text,0,0),{base64:s.toDataURL(),size:a,styleSize:a/l}})}const J={__name:"imgWatermark",props:{text:{type:String,required:!0,default:"waterMark"},fontSize:{type:[Number,String],default:10},gap:{type:Number,default:10}},setup(o){const s=o,t=D(null),l=H(s);let e;const r=D(0);I(()=>{if(r.value,!t.value)return;e&&e.remove();const{base64:c,size:d,styleSize:a}=l.value;e=document.createElement("div"),e.style.backgroundImage=`url(${c})`,e.style.backgroundSize=`${a}px ${a}px`,e.style.backgroundRepeat="repeat",e.style.pointerEvents="none",e.style.position="absolute",e.style.zInde=9999,e.style.inset=0,t.value.appendChild(e)});let i;return C(()=>{i=new MutationObserver(c=>{for(const d of c){for(const a of d.removedNodes)if(a===e){r.value++;return}if(d.target===e){r.value++;return}}}),i.observe(t.value,{childList:!0,attributes:!0,subtree:!0})}),N(()=>{i&&i.disconnect(),e=null}),(c,d)=>(h(),g("div",{class:"water-mark",ref_key:"parentRef",ref:t},[R(c.$slots,"default",{},void 0,!0)],512))}},G=v(J,[["__scopeId","data-v-74f2beff"]]);const K={},Q=o=>(j("data-v-ea570d53"),o=o(),O(),o),X={class:"content"},Y=Q(()=>n("div",{class:"crash-ball-loading"},[n("div",{class:"ball left-ball"}),n("div",{class:"ball right-ball"})],-1)),Z=[Y];function ss(o,s){return h(),g("div",X,Z)}const es=v(K,[["render",ss],["__scopeId","data-v-ea570d53"]]),ts=w(`

      \u622A\u53D6\u5B57\u7B26\u7EC4\u4EF6

      1. \u81EA\u52A8\u7701\u7565\u6587\u672C

      \u6CE8\u610F\u70B9

      1. \u901A\u8FC7\u81EA\u5B9A\u4E49 data \u548C \u4F2A\u5143\u7D20\u7684 attr \u663E\u793A\u5C55\u793A\u7684\u6587\u672C

        attr() : \u53EF\u4EE5\u5C06\u81EA\u5B9A\u4E49\u5C5E\u6027\u503C\u4F5C\u7528\u4E8E\u4F2A\u5143\u7D20

        html
        <p data-foo="hello">world</p>
         &:before { content: attr(data-foo)}
         
      `,3),as={style:{width:"180px"}},ns=w(`
      \u4F7F\u7528
      1. text: [string] \u663E\u793A\u7684\u6587\u672C
      2. showLine:[number] \u5C55\u793A\u51E0\u884C
      3. isShowSuffix: [boolean] \u662F\u5426\u5C55\u793A\u540E\u7F00
      4. textStyle: [object] \u5C55\u793A\u6587\u672C\u7684\u6837\u5F0F\uFF08\u6539\u53D8\u5B57\u4F53\u5927\u5C0F\u5C31\u5728\u8FD9\u91CC\u4FEE\u6539\uFF09
      js
      
       <div style="width:80px" >
      diff --git a/assets/pages_vue3Treasures_vueComponents.md.59d1affa.lean.js b/assets/pages_vue3Treasures_vueComponents.md.5cb0d14c.lean.js
      similarity index 97%
      rename from assets/pages_vue3Treasures_vueComponents.md.59d1affa.lean.js
      rename to assets/pages_vue3Treasures_vueComponents.md.5cb0d14c.lean.js
      index 4e7f16d..ee6fef3 100644
      --- a/assets/pages_vue3Treasures_vueComponents.md.59d1affa.lean.js
      +++ b/assets/pages_vue3Treasures_vueComponents.md.5cb0d14c.lean.js
      @@ -1 +1 @@
      -import{_ as v,l as q,e as D,j as C,o as h,c as g,b as n,t as B,n as L,u as E,x as M,y as I,k as N,z as R,p as j,d as O,g as u,w as P,a as w,i as z}from"./app.cac277bf.js";const W=["data-text"],$={__name:"autoEllipsis",props:{text:{type:String,default:""},showLine:{type:[Number,String],default:1},isShowSuffix:{type:Boolean,default:!1},textStyle:{type:Object,default:()=>{}}},setup(o){const s=o;q(a=>({"5b5d230d":s.showLine}));const t={fontSize:"12px",...s.textStyle},l=D(null),e=D(s.text),r=parseInt(t.fontSize),i=D(!1);C(()=>{const{text:a,isShowEllipsis:p}=c(l.value,s.text);e.value=a,i.value=p});const c=(a,p)=>{let y;const x=a&&a.clientWidth;if(y=d(p.trim(),t)>=x*s.showLine,y&&s.isShowSuffix){const _=p.split(".").reverse()[0],b=Math.round((_.length+1)*.5),S=(Math.ceil(x/r)*s.showLine).toFixed(0)-b-2;p=p.slice(0,S)+"..."+_}return{text:p,isShowEllipsis:y}},d=(a,p)=>{const y=parseInt(p.fontSize),m=document.createElement("canvas").getContext("2d"),_=window.devicePixelRatio||1,b=_*y||_*10,S=p.fontStyle||"sans-serif";m.font=`${b}px ${S}`;const F=m.measureText(a),A=F.width,T=F.actualBoundingBoxRight+F.actualBoundingBoxLeft;return Math.max(A*_,T*_)};return(a,p)=>(h(),g("div",{class:"auto-ellipsis hover-tip","data-text":s.text,ref_key:"autoEllipsisRef",ref:l},[n("span",{class:L([i.value?"overflow-hide-moreline":""]),style:t},B(e.value),3)],8,W))}},f=v($,[["__scopeId","data-v-91b6df93"]]);const V={class:"my-loading"},U={__name:"loading",props:{size:{type:[Number,String],default:"mini"}},setup(o){const s=o;q(i=>({"73f791dc":E(r),"6cd8e7b8":E(e)}));const l={mini:60,small:80,medium:100,large:200}[s.size];let e;C(()=>{e=window.devicePixelRatio});const r=l?l+"px":s.size+"px";return(i,c)=>(h(),g("div",V))}},k=v(U,[["__scopeId","data-v-bba6dd69"]]);function H(o){return M(()=>{const s=document.createElement("canvas"),t=s.getContext("2d"),l=window.devicePixelRatio||1,r=o.fontSize*l+"px serif",{width:i,actualBoundingBoxRight:c,actualBoundingBoxLeft:d}=t.measureText(o.text),a=Math.max(100,i,c+d)+o.gap*l;return s.width=a,s.height=a,t.translate(s.width/2,s.height/2),t.rotate(Math.PI/180*-45),t.fillStyle="#f40",t.textAlign="left",t.textBaseline="middle",t.font=r,t.fillText(o.text,0,0),{base64:s.toDataURL(),size:a,styleSize:a/l}})}const J={__name:"imgWatermark",props:{text:{type:String,required:!0,default:"waterMark"},fontSize:{type:[Number,String],default:10},gap:{type:Number,default:10}},setup(o){const s=o,t=D(null),l=H(s);let e;const r=D(0);I(()=>{if(r.value,!t.value)return;e&&e.remove();const{base64:c,size:d,styleSize:a}=l.value;e=document.createElement("div"),e.style.backgroundImage=`url(${c})`,e.style.backgroundSize=`${a}px ${a}px`,e.style.backgroundRepeat="repeat",e.style.pointerEvents="none",e.style.position="absolute",e.style.zInde=9999,e.style.inset=0,t.value.appendChild(e)});let i;return C(()=>{i=new MutationObserver(c=>{for(const d of c){for(const a of d.removedNodes)if(a===e){r.value++;return}if(d.target===e){r.value++;return}}}),i.observe(t.value,{childList:!0,attributes:!0,subtree:!0})}),N(()=>{i&&i.disconnect(),e=null}),(c,d)=>(h(),g("div",{class:"water-mark",ref_key:"parentRef",ref:t},[R(c.$slots,"default",{},void 0,!0)],512))}},G=v(J,[["__scopeId","data-v-74f2beff"]]);const K={},Q=o=>(j("data-v-ea570d53"),o=o(),O(),o),X={class:"content"},Y=Q(()=>n("div",{class:"crash-ball-loading"},[n("div",{class:"ball left-ball"}),n("div",{class:"ball right-ball"})],-1)),Z=[Y];function ss(o,s){return h(),g("div",X,Z)}const es=v(K,[["render",ss],["__scopeId","data-v-ea570d53"]]),ts=w("",3),as={style:{width:"180px"}},ns=w("",4),os=w("",3),ls=n("blockquote",null,[n("p",null,"\u4EE3\u7801\u5730\u5740\uFF1Apages/vue3Treasures/components/crashBallLoading.vue")],-1),is=n("h2",{id:"_3-\u56FE\u7247\u6C34\u5370",tabindex:"-1"},[z("3. \u56FE\u7247\u6C34\u5370 "),n("a",{class:"header-anchor",href:"#_3-\u56FE\u7247\u6C34\u5370","aria-hidden":"true"},"#")],-1),ps=n("div",null,[z(" MutationObserver \u63A5\u53E3\u63D0\u4F9B\u4E86\u76D1\u89C6\u5BF9 DOM \u6811\u6240\u505A\u66F4\u6539\u7684\u80FD\u529B\u3002\u5B83\u88AB\u8BBE\u8BA1\u4E3A\u65E7\u7684 Mutation Events \u529F\u80FD\u7684\u66FF\u4EE3\u54C1\uFF0C\u8BE5\u529F\u80FD\u662F DOM3 Events \u89C4\u8303\u7684\u4E00\u90E8\u5206\u3002 "),n("p",null,"disconnect(): \u5173\u95ED\u76D1\u542C\uFF0C \u963B\u6B62 MutationObserver \u5B9E\u4F8B\u7EE7\u7EED\u63A5\u6536\u7684\u901A\u77E5\uFF0C\u76F4\u5230\u518D\u6B21\u8C03\u7528\u5176 observe() \u65B9\u6CD5\uFF0C\u8BE5\u89C2\u5BDF\u8005\u5BF9\u8C61\u5305\u542B\u7684\u56DE\u8C03\u51FD\u6570\u90FD\u4E0D\u4F1A\u518D\u88AB\u8C03\u7528\u3002"),n("p",null,"observe(): \u5F00\u542F\u76D1\u542C\uFF0C\u914D\u7F6E MutationObserver \u5728 DOM \u66F4\u6539\u5339\u914D\u7ED9\u5B9A\u9009\u9879\u65F6\uFF0C\u901A\u8FC7\u5176\u56DE\u8C03\u51FD\u6570\u5F00\u59CB\u63A5\u6536\u901A\u77E5\u3002"),n("p",null,"takeRecords():\u4ECE MutationObserver \u7684\u901A\u77E5\u961F\u5217\u4E2D\u5220\u9664\u6240\u6709\u5F85\u5904\u7406\u7684\u901A\u77E5\uFF0C\u5E76\u5C06\u5B83\u4EEC\u8FD4\u56DE\u5230 MutationRecord \u5BF9\u8C61\u7684\u65B0 Array \u4E2D\u3002")],-1),cs=n("blockquote",null,[n("p",null,"\u4EE3\u7801\u5730\u5740\uFF1Apages/vue3Treasures/components/imgWatermark.vue")],-1),rs=n("blockquote",null,[n("p",null,[n("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver",target:"_blank",rel:"noreferrer"},"MutationObserver----MDN")])],-1),_s=JSON.parse('{"title":"\u622A\u53D6\u5B57\u7B26\u7EC4\u4EF6","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u81EA\u52A8\u7701\u7565\u6587\u672C","slug":"_1-\u81EA\u52A8\u7701\u7565\u6587\u672C","link":"#_1-\u81EA\u52A8\u7701\u7565\u6587\u672C","children":[]},{"level":2,"title":"2. loading \u6548\u679C","slug":"_2-loading-\u6548\u679C","link":"#_2-loading-\u6548\u679C","children":[{"level":3,"title":"2.1 \u8F6C\u5708 loading","slug":"_2-1-\u8F6C\u5708-loading","link":"#_2-1-\u8F6C\u5708-loading","children":[]},{"level":3,"title":"2.2 \u5C0F\u7403\u78B0\u649E loading","slug":"_2-2-\u5C0F\u7403\u78B0\u649E-loading","link":"#_2-2-\u5C0F\u7403\u78B0\u649E-loading","children":[]}]},{"level":2,"title":"3. \u56FE\u7247\u6C34\u5370","slug":"_3-\u56FE\u7247\u6C34\u5370","link":"#_3-\u56FE\u7247\u6C34\u5370","children":[]}],"relativePath":"pages/vue3Treasures/vueComponents.md"}'),ds={name:"pages/vue3Treasures/vueComponents.md"},ys=Object.assign(ds,{setup(o){return(s,t)=>(h(),g("div",null,[ts,n("div",as,[u(f,{text:"1. \u5355\u884C\u5C55\u793A\u9ED8\u8BA4\u7701\u7565 \u5355\u884C\u5C55\u793A\u9ED8\u8BA4\u7701\u7565"})]),u(f,{style:{width:"200px"},isShowSuffix:"",text:"2. \u5355\u884C\u5E26\u540E\u7F00\u7701\u7565\u5355\u884C\u5E26\u540E\u7F00\u7701\u7565\u5355\u884C\u5E26\u540E\u7F00\u7701\u7565.jpeg"}),u(f,{style:{width:"80px"},showLine:2,text:"3. \u591A\u884C\u5C55\u793A\u9ED8\u8BA4\u7701\u7565\u5C55\u793A\u9ED8\u8BA4\u7701\u7565.jpeg"}),u(f,{style:{width:"220px"},isShowSuffix:"",showLine:2,text:"4. \u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565\u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565.jpg\u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565\u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565.jpg"}),ns,u(k),u(k,{size:30}),os,u(es),ls,is,u(G,{text:"\u4FB5\u6743\u5FC5\u7A76"},{default:P(()=>[ps]),_:1}),cs,rs]))}});export{_s as __pageData,ys as default};
      +import{_ as v,l as q,e as D,h as C,o as h,c as g,b as n,t as B,n as L,u as E,x as M,y as I,i as N,z as R,p as j,d as O,g as u,w as P,a as w,j as z}from"./app.88185e12.js";const W=["data-text"],$={__name:"autoEllipsis",props:{text:{type:String,default:""},showLine:{type:[Number,String],default:1},isShowSuffix:{type:Boolean,default:!1},textStyle:{type:Object,default:()=>{}}},setup(o){const s=o;q(a=>({"5b5d230d":s.showLine}));const t={fontSize:"12px",...s.textStyle},l=D(null),e=D(s.text),r=parseInt(t.fontSize),i=D(!1);C(()=>{const{text:a,isShowEllipsis:p}=c(l.value,s.text);e.value=a,i.value=p});const c=(a,p)=>{let y;const x=a&&a.clientWidth;if(y=d(p.trim(),t)>=x*s.showLine,y&&s.isShowSuffix){const _=p.split(".").reverse()[0],b=Math.round((_.length+1)*.5),S=(Math.ceil(x/r)*s.showLine).toFixed(0)-b-2;p=p.slice(0,S)+"..."+_}return{text:p,isShowEllipsis:y}},d=(a,p)=>{const y=parseInt(p.fontSize),m=document.createElement("canvas").getContext("2d"),_=window.devicePixelRatio||1,b=_*y||_*10,S=p.fontStyle||"sans-serif";m.font=`${b}px ${S}`;const F=m.measureText(a),A=F.width,T=F.actualBoundingBoxRight+F.actualBoundingBoxLeft;return Math.max(A*_,T*_)};return(a,p)=>(h(),g("div",{class:"auto-ellipsis hover-tip","data-text":s.text,ref_key:"autoEllipsisRef",ref:l},[n("span",{class:L([i.value?"overflow-hide-moreline":""]),style:t},B(e.value),3)],8,W))}},f=v($,[["__scopeId","data-v-91b6df93"]]);const V={class:"my-loading"},U={__name:"loading",props:{size:{type:[Number,String],default:"mini"}},setup(o){const s=o;q(i=>({"73f791dc":E(r),"6cd8e7b8":E(e)}));const l={mini:60,small:80,medium:100,large:200}[s.size];let e;C(()=>{e=window.devicePixelRatio});const r=l?l+"px":s.size+"px";return(i,c)=>(h(),g("div",V))}},k=v(U,[["__scopeId","data-v-bba6dd69"]]);function H(o){return M(()=>{const s=document.createElement("canvas"),t=s.getContext("2d"),l=window.devicePixelRatio||1,r=o.fontSize*l+"px serif",{width:i,actualBoundingBoxRight:c,actualBoundingBoxLeft:d}=t.measureText(o.text),a=Math.max(100,i,c+d)+o.gap*l;return s.width=a,s.height=a,t.translate(s.width/2,s.height/2),t.rotate(Math.PI/180*-45),t.fillStyle="#f40",t.textAlign="left",t.textBaseline="middle",t.font=r,t.fillText(o.text,0,0),{base64:s.toDataURL(),size:a,styleSize:a/l}})}const J={__name:"imgWatermark",props:{text:{type:String,required:!0,default:"waterMark"},fontSize:{type:[Number,String],default:10},gap:{type:Number,default:10}},setup(o){const s=o,t=D(null),l=H(s);let e;const r=D(0);I(()=>{if(r.value,!t.value)return;e&&e.remove();const{base64:c,size:d,styleSize:a}=l.value;e=document.createElement("div"),e.style.backgroundImage=`url(${c})`,e.style.backgroundSize=`${a}px ${a}px`,e.style.backgroundRepeat="repeat",e.style.pointerEvents="none",e.style.position="absolute",e.style.zInde=9999,e.style.inset=0,t.value.appendChild(e)});let i;return C(()=>{i=new MutationObserver(c=>{for(const d of c){for(const a of d.removedNodes)if(a===e){r.value++;return}if(d.target===e){r.value++;return}}}),i.observe(t.value,{childList:!0,attributes:!0,subtree:!0})}),N(()=>{i&&i.disconnect(),e=null}),(c,d)=>(h(),g("div",{class:"water-mark",ref_key:"parentRef",ref:t},[R(c.$slots,"default",{},void 0,!0)],512))}},G=v(J,[["__scopeId","data-v-74f2beff"]]);const K={},Q=o=>(j("data-v-ea570d53"),o=o(),O(),o),X={class:"content"},Y=Q(()=>n("div",{class:"crash-ball-loading"},[n("div",{class:"ball left-ball"}),n("div",{class:"ball right-ball"})],-1)),Z=[Y];function ss(o,s){return h(),g("div",X,Z)}const es=v(K,[["render",ss],["__scopeId","data-v-ea570d53"]]),ts=w("",3),as={style:{width:"180px"}},ns=w("",4),os=w("",3),ls=n("blockquote",null,[n("p",null,"\u4EE3\u7801\u5730\u5740\uFF1Apages/vue3Treasures/components/crashBallLoading.vue")],-1),is=n("h2",{id:"_3-\u56FE\u7247\u6C34\u5370",tabindex:"-1"},[z("3. \u56FE\u7247\u6C34\u5370 "),n("a",{class:"header-anchor",href:"#_3-\u56FE\u7247\u6C34\u5370","aria-hidden":"true"},"#")],-1),ps=n("div",null,[z(" MutationObserver \u63A5\u53E3\u63D0\u4F9B\u4E86\u76D1\u89C6\u5BF9 DOM \u6811\u6240\u505A\u66F4\u6539\u7684\u80FD\u529B\u3002\u5B83\u88AB\u8BBE\u8BA1\u4E3A\u65E7\u7684 Mutation Events \u529F\u80FD\u7684\u66FF\u4EE3\u54C1\uFF0C\u8BE5\u529F\u80FD\u662F DOM3 Events \u89C4\u8303\u7684\u4E00\u90E8\u5206\u3002 "),n("p",null,"disconnect(): \u5173\u95ED\u76D1\u542C\uFF0C \u963B\u6B62 MutationObserver \u5B9E\u4F8B\u7EE7\u7EED\u63A5\u6536\u7684\u901A\u77E5\uFF0C\u76F4\u5230\u518D\u6B21\u8C03\u7528\u5176 observe() \u65B9\u6CD5\uFF0C\u8BE5\u89C2\u5BDF\u8005\u5BF9\u8C61\u5305\u542B\u7684\u56DE\u8C03\u51FD\u6570\u90FD\u4E0D\u4F1A\u518D\u88AB\u8C03\u7528\u3002"),n("p",null,"observe(): \u5F00\u542F\u76D1\u542C\uFF0C\u914D\u7F6E MutationObserver \u5728 DOM \u66F4\u6539\u5339\u914D\u7ED9\u5B9A\u9009\u9879\u65F6\uFF0C\u901A\u8FC7\u5176\u56DE\u8C03\u51FD\u6570\u5F00\u59CB\u63A5\u6536\u901A\u77E5\u3002"),n("p",null,"takeRecords():\u4ECE MutationObserver \u7684\u901A\u77E5\u961F\u5217\u4E2D\u5220\u9664\u6240\u6709\u5F85\u5904\u7406\u7684\u901A\u77E5\uFF0C\u5E76\u5C06\u5B83\u4EEC\u8FD4\u56DE\u5230 MutationRecord \u5BF9\u8C61\u7684\u65B0 Array \u4E2D\u3002")],-1),cs=n("blockquote",null,[n("p",null,"\u4EE3\u7801\u5730\u5740\uFF1Apages/vue3Treasures/components/imgWatermark.vue")],-1),rs=n("blockquote",null,[n("p",null,[n("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver",target:"_blank",rel:"noreferrer"},"MutationObserver----MDN")])],-1),_s=JSON.parse('{"title":"\u622A\u53D6\u5B57\u7B26\u7EC4\u4EF6","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. \u81EA\u52A8\u7701\u7565\u6587\u672C","slug":"_1-\u81EA\u52A8\u7701\u7565\u6587\u672C","link":"#_1-\u81EA\u52A8\u7701\u7565\u6587\u672C","children":[]},{"level":2,"title":"2. loading \u6548\u679C","slug":"_2-loading-\u6548\u679C","link":"#_2-loading-\u6548\u679C","children":[{"level":3,"title":"2.1 \u8F6C\u5708 loading","slug":"_2-1-\u8F6C\u5708-loading","link":"#_2-1-\u8F6C\u5708-loading","children":[]},{"level":3,"title":"2.2 \u5C0F\u7403\u78B0\u649E loading","slug":"_2-2-\u5C0F\u7403\u78B0\u649E-loading","link":"#_2-2-\u5C0F\u7403\u78B0\u649E-loading","children":[]}]},{"level":2,"title":"3. \u56FE\u7247\u6C34\u5370","slug":"_3-\u56FE\u7247\u6C34\u5370","link":"#_3-\u56FE\u7247\u6C34\u5370","children":[]}],"relativePath":"pages/vue3Treasures/vueComponents.md"}'),ds={name:"pages/vue3Treasures/vueComponents.md"},ys=Object.assign(ds,{setup(o){return(s,t)=>(h(),g("div",null,[ts,n("div",as,[u(f,{text:"1. \u5355\u884C\u5C55\u793A\u9ED8\u8BA4\u7701\u7565 \u5355\u884C\u5C55\u793A\u9ED8\u8BA4\u7701\u7565"})]),u(f,{style:{width:"200px"},isShowSuffix:"",text:"2. \u5355\u884C\u5E26\u540E\u7F00\u7701\u7565\u5355\u884C\u5E26\u540E\u7F00\u7701\u7565\u5355\u884C\u5E26\u540E\u7F00\u7701\u7565.jpeg"}),u(f,{style:{width:"80px"},showLine:2,text:"3. \u591A\u884C\u5C55\u793A\u9ED8\u8BA4\u7701\u7565\u5C55\u793A\u9ED8\u8BA4\u7701\u7565.jpeg"}),u(f,{style:{width:"220px"},isShowSuffix:"",showLine:2,text:"4. \u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565\u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565.jpg\u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565\u591A\u884C\u5C55\u793A\u5E26\u540E\u7F00\u7701\u7565.jpg"}),ns,u(k),u(k,{size:30}),os,u(es),ls,is,u(G,{text:"\u4FB5\u6743\u5FC5\u7A76"},{default:P(()=>[ps]),_:1}),cs,rs]))}});export{_s as __pageData,ys as default};
      diff --git a/assets/pages_vue3Treasures_vueDirectives.md.117c53dd.js b/assets/pages_vue3Treasures_vueDirectives.md.0c512ed3.js
      similarity index 99%
      rename from assets/pages_vue3Treasures_vueDirectives.md.117c53dd.js
      rename to assets/pages_vue3Treasures_vueDirectives.md.0c512ed3.js
      index 159a64b..6cac263 100644
      --- a/assets/pages_vue3Treasures_vueDirectives.md.117c53dd.js
      +++ b/assets/pages_vue3Treasures_vueDirectives.md.0c512ed3.js
      @@ -1,4 +1,4 @@
      -import{e as i,o as p,c as o,q as A,i as t,t as C,F as d,g as u,a as c}from"./app.cac277bf.js";const v="/ybhdsg-zhs/assets/binding.2ff5852e.png",h={style:{padding:"3px",border:"1px solid #409eff"}},g={__name:"debounceDir",setup(r){const a=i({time:1e3,event:"click"});function e(){a.value.time++,console.log("Only triggered once when clicked many times quickly")}const D=(l,s=1e3)=>{let n=null;return function(...y){clearInterval(n),n=setTimeout(()=>{l.apply(this,y)},s)}},F={mounted(l,s){console.log(s);const n=s.arg;if(!n)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');l.addEventListener(n.event,D(s.value,n.time))}};return(l,s)=>(p(),o(d,null,[A((p(),o("button",h,[t(" \u591A\u6B21\u70B9\u51FB ")])),[[F,e,a.value,{foo:!0}]]),t(" "+C(a.value.time),1)],64))}},m=c(`

      vue \u5E38\u89C1\u6307\u4EE4

      \u4E00\u3001\u6CE8\u518C\u81EA\u5B9A\u4E49\u6307\u4EE4

      1. \u5728 <script setup> \u4E2D\uFF0C\u4EFB\u4F55\u4EE5 v \u5F00\u5934\u7684\u9A7C\u5CF0\u5F0F\u547D\u540D\u7684\u53D8\u91CF\u90FD\u53EF\u4EE5\u88AB\u7528\u4F5C\u4E00\u4E2A\u81EA\u5B9A\u4E49\u6307\u4EE4\u3002vFocus \u5373\u53EF\u4EE5\u5728\u6A21\u677F\u4E2D\u4EE5 v-focus \u7684\u5F62\u5F0F\u4F7F\u7528\u3002

      \u5728 <script setup> \u4E2D
      vue
      <script setup>
      +import{e as i,o as p,c as o,q as A,j as t,t as C,F as d,g as u,a as c}from"./app.88185e12.js";const v="/ybhdsg-zhs/assets/binding.2ff5852e.png",h={style:{padding:"3px",border:"1px solid #409eff"}},g={__name:"debounceDir",setup(r){const a=i({time:1e3,event:"click"});function e(){a.value.time++,console.log("Only triggered once when clicked many times quickly")}const D=(l,s=1e3)=>{let n=null;return function(...y){clearInterval(n),n=setTimeout(()=>{l.apply(this,y)},s)}},F={mounted(l,s){console.log(s);const n=s.arg;if(!n)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');l.addEventListener(n.event,D(s.value,n.time))}};return(l,s)=>(p(),o(d,null,[A((p(),o("button",h,[t(" \u591A\u6B21\u70B9\u51FB ")])),[[F,e,a.value,{foo:!0}]]),t(" "+C(a.value.time),1)],64))}},m=c(`

      vue \u5E38\u89C1\u6307\u4EE4

      \u4E00\u3001\u6CE8\u518C\u81EA\u5B9A\u4E49\u6307\u4EE4

      1. \u5728 <script setup> \u4E2D\uFF0C\u4EFB\u4F55\u4EE5 v \u5F00\u5934\u7684\u9A7C\u5CF0\u5F0F\u547D\u540D\u7684\u53D8\u91CF\u90FD\u53EF\u4EE5\u88AB\u7528\u4F5C\u4E00\u4E2A\u81EA\u5B9A\u4E49\u6307\u4EE4\u3002vFocus \u5373\u53EF\u4EE5\u5728\u6A21\u677F\u4E2D\u4EE5 v-focus \u7684\u5F62\u5F0F\u4F7F\u7528\u3002

      \u5728 <script setup> \u4E2D
      vue
      <script setup>
       // \u5728\u6A21\u677F\u4E2D\u542F\u7528 v-focus
       const vFocus = {
         mounted: (el) => el.focus(),
      diff --git a/assets/pages_vue3Treasures_vueDirectives.md.117c53dd.lean.js b/assets/pages_vue3Treasures_vueDirectives.md.0c512ed3.lean.js
      similarity index 97%
      rename from assets/pages_vue3Treasures_vueDirectives.md.117c53dd.lean.js
      rename to assets/pages_vue3Treasures_vueDirectives.md.0c512ed3.lean.js
      index d056962..a243adf 100644
      --- a/assets/pages_vue3Treasures_vueDirectives.md.117c53dd.lean.js
      +++ b/assets/pages_vue3Treasures_vueDirectives.md.0c512ed3.lean.js
      @@ -1 +1 @@
      -import{e as i,o as p,c as o,q as A,i as t,t as C,F as d,g as u,a as c}from"./app.cac277bf.js";const v="/ybhdsg-zhs/assets/binding.2ff5852e.png",h={style:{padding:"3px",border:"1px solid #409eff"}},g={__name:"debounceDir",setup(r){const a=i({time:1e3,event:"click"});function e(){a.value.time++,console.log("Only triggered once when clicked many times quickly")}const D=(l,s=1e3)=>{let n=null;return function(...y){clearInterval(n),n=setTimeout(()=>{l.apply(this,y)},s)}},F={mounted(l,s){console.log(s);const n=s.arg;if(!n)throw Error('\u8BF7\u4F20\u5165\u7C7B\u4F3C\u4E8E{time:1000,event:"click"}\u683C\u5F0F\u7684\u6307\u4EE4\u53C2\u6570');l.addEventListener(n.event,D(s.value,n.time))}};return(l,s)=>(p(),o(d,null,[A((p(),o("button",h,[t(" \u591A\u6B21\u70B9\u51FB ")])),[[F,e,a.value,{foo:!0}]]),t(" "+C(a.value.time),1)],64))}},m=c("",29),b=c("",7),_=JSON.parse('{"title":"vue \u5E38\u89C1\u6307\u4EE4","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4E00\u3001\u6CE8\u518C\u81EA\u5B9A\u4E49\u6307\u4EE4","slug":"\u4E00\u3001\u6CE8\u518C\u81EA\u5B9A\u4E49\u6307\u4EE4","link":"#\u4E00\u3001\u6CE8\u518C\u81EA\u5B9A\u4E49\u6307\u4EE4","children":[{"level":3,"title":"1. \u5728 
         
         
      -    
      -    
      -    
      +    
      +    
      +    
           
         
       
      \ No newline at end of file
      diff --git a/novice-guide/README.html b/novice-guide/README.html
      index c94795f..f95d542 100644
      --- a/novice-guide/README.html
      +++ b/novice-guide/README.html
      @@ -5,15 +5,15 @@
           
           novice guide | 我的网站
           
      -    
      -    
      -    
      -    
      +    
      +    
      +    
      +    
           
           
         
         
      -    
      Skip to content
      目录

      novice guide

      一个简单的新手引导库。

      安装

      bash
      npm i novice-guide
      +    
      Skip to content
      目录

      novice guide

      一个简单的新手引导库。

      安装

      bash
      npm i novice-guide
       

      使用

      js
      import NoviceGuide from 'novice-guide'
       
       new SimpleNoviceGuide({
      @@ -48,9 +48,9 @@
       

      通常还需要监听done事件来删除或隐藏你的自定义信息框:

      js
      noviceGuide.on('done', () => {
         customInfoBoxEl.style.display = 'none'
       })
      -
      - - +
      + + \ No newline at end of file diff --git a/pages/base/css/index.html b/pages/base/css/index.html index 4285c8e..63b05b5 100644 --- a/pages/base/css/index.html +++ b/pages/base/css/index.html @@ -5,15 +5,15 @@ css | 我的网站 - - - - + + + + -
      Skip to content
      目录

      css

      Flexbox 布局最适合应用程序的组件和小规模布局(一维布局),而 Grid 布局则适用于更大规模的布局(二维布局)

      Grid 布局链接:Grid 布局中,floatdisplay:inline-blockdisplay:table-cellvertical-align以及column-*这些属性和声明对 grid 子项是没有任何作用的。面试经常会问的,一定要记得。

      Flexbox 布局链接flex 子元素的设置 float``,clear 以及 vertical-align 属性都是没有用的。

      1. 网站置灰

      TIP

      css
      html.gray-mode {
      +    
      Skip to content
      目录

      css

      Flexbox 布局最适合应用程序的组件和小规模布局(一维布局),而 Grid 布局则适用于更大规模的布局(二维布局)

      Grid 布局链接:Grid 布局中,floatdisplay:inline-blockdisplay:table-cellvertical-align以及column-*这些属性和声明对 grid 子项是没有任何作用的。面试经常会问的,一定要记得。

      Flexbox 布局链接flex 子元素的设置 float``,clear 以及 vertical-align 属性都是没有用的。

      1. 网站置灰

      TIP

      css
      html.gray-mode {
         filter: grayscale(0.95);
         -webkit-filter: grayscale(0.95);
       }
      @@ -57,9 +57,39 @@
         /*滚动条里面轨道*/
         // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
       }
      -
      - - +

      6. scss定义方法,并在vite下注册全局可用

      utils.scss
      scss
      @use "sass:math";
      +// 默认设计稿的宽度
      +$designWidth: 1920;
      +// 默认设计稿的高度
      +$designHeight: 1080;
      +
      +// px 转为 vw 的函数
      +@function vw($px) {
      +  @return math.div($px, $designWidth) * 100vw;
      +}
      +
      +// px 转为 vh 的函数
      +@function vh($px) {
      +  @return math.div($px, $designHeight) * 100vh;
      +}
      +
      vite.config.js下定义使用的方法
      js
      export default ({ mode, command }) => {
      +  const env = loadEnv(mode, process.cwd());
      +  return defineConfig({
      +    plugins: [vue()],
      +    css: {
      +      // 指定传递给 CSS 预处理器的选项。文件扩展名用作选项的键
      +      preprocessorOptions: {
      +        scss: {
      +          // 为每个样式内容注入额外代码
      +          additionalData: `@import "@/styles/utils.scss";`,
      +        },
      +      },
      +    },
      +  });
      +};
      +
      + + \ No newline at end of file diff --git a/pages/base/cssAnimation/index.html b/pages/base/cssAnimation/index.html index 8102986..59f7946 100644 --- a/pages/base/cssAnimation/index.html +++ b/pages/base/cssAnimation/index.html @@ -5,15 +5,15 @@ css 特效 | 我的网站 - - - - + + + + -
      Skip to content
      目录

      css 特效

      大佬特效仓库

      1. 文字裂开特效

      文字裂开效果
      文字裂开效果
      点赞了解更多
      文字裂开效果
      文字裂开效果
      点赞了解更多
      文字裂开
      vue
      <template>
      +    
      -    
      -    
      +
      + + \ No newline at end of file diff --git a/pages/base/globalDemo.html b/pages/base/globalDemo.html index 61570fc..361e0a8 100644 --- a/pages/base/globalDemo.html +++ b/pages/base/globalDemo.html @@ -3,157 +3,19 @@ - node.js(http://www.nodejs.com.cn/7-days-nodejs/#2.5.5) | 我的网站 + 哑巴湖大水怪 | 我的网站 - - - - + + + + -
      Skip to content
      目录

      node.js(http://www.nodejs.com.cn/7-days-nodejs/#2.5.5)

      !node 常用

      1. process全局变量

      • process:一个全局变量,提供了有关当前 Node.js 进程的信息并对其进行控制
      • 由于 JavaScript 是一个单线程语言,所以通过 node xxx 启动一个文件后,只有一条主线程
      process常见属性
      • process.env:环境变量,例如通过 `process.env.NODE_ENV 获取不同环境项目配置信息
      • process.nextTick:这个在谈及 EventLoop 时经常为会提到
      • process.pid:获取当前进程 id
      • process.ppid:当前进程对应的父进程
      • process.cwd():获取当前进程工作目录,
      • process.platform:获取当前进程运行的操作系统平台
      • process.uptime():当前进程已运行时间,例如:pm2 守护进程的 uptime 值
      • 进程事件:process.on(‘uncaughtException’,cb) 捕获异常信息、 process.on(‘exit’,cb)进程推出监听
      • 三个标准流:process.stdout 标准输出、 process.stdin 标准输入、 process.stderr 标准错误输出
      • process.title 指定进程名称,有的时候需要给进程指定一个名称

      process常见方法

      • process.argv():在终端通过 node 命令执行时,获取命令行参数,返回值是一个数组

        - [0] node路径 (一般用不到)
        -- [1] 当前执行的文件路径 (一般用不到)
        -- 2-n : 参数 (一般都这样 process.argv.slice(2) 拿命令行输入的参数)
        -
      • process.cwd():返回当前 Node 进程执行的目录

      2. cp -r source/* target 拷贝目录命令

      • 终端下通过 cp -r source/* target 可以快速实现目录的拷贝 source:源目录,target:目标目录
      js
        cp -r demo demo1 // 将 demo 目录 拷贝一份到 demo1 ,没有就新建
      -  cp -r demo/file demo2 // 将 demo 目录下的 file 拷贝到 demo2
      -

      1. 基本信息

      • NodeJS是一个 JS 脚本解析器,任何操作系统下安装NodeJS本质上做的事情都是把 NodeJS 执行程序复制到一个目录,然后保证这个目录在系统 PATH 环境变量下,以便终端下可以使用 node 命令。

      • 终端下直接输入 node 命令可进入命令交互模式,很适合用来测试一些 JS 代码片段,比如正则表达式。

      • NodeJS 使用 CMD 模块系统,主模块作为程序入口点,所有模块在执行过程中只初始化一次

      • 除非 JS 模块不能满足需求,否则不要轻易使用二进制模块,否则你的用户会叫苦连天。

      2. 模块路径解析规则

      • 内置模块:不做路径解析,直接返回内部模块的导出对象,例如require(fs)
      • node-modules目录:在模块/home/user/hello.js中使用require('foo/bar'),那么会依次查找
        js
        /home/user/node-modules/foo/bar
        -/user/node-modules/foo/bar
        -/node-modules/foo/bar
        -
      • NODE_PATH变量:NodeJs允许通过NODE_PATH环境变量来设置搜索路径,可以设置一个或者多个目录,在linux下使用:,在window下使用;分隔,例如:
      js
      // 环境变量
      -NODE_PATH = "/home/user/lib:/home/lib";
      -// 使用
      -requir("foo / bar");
      -
      -// 查找路径
      -("/home/user/lib/foo/bar");
      -("/home/lib/foo/bar");
      -

      3. 包package

      • js 模块的基本单位是 js 文件,多个子模块组成大模块,称为包,并把子模块放在同一目录中
      • 当模块的文件名为index.js时,加载模块时可以使用模块所在目录的路径代替模块文件路径,下面两条语句等价
      js
      var cat = require("/home/user/lib/cat");
      -var cat = require("/home/user/lib/cat/index");
      -
      • package.json文件,自定义入口模块的文件名入口位置,可以使用require("/home/user/lib/cat")来加载模块
      js
      // package.json
      -{
      -    "name": "cat", // 包名,在npm上必须唯一
      -    "main": "./lib/main.js" // 入口位置
      -}
      -

      4. fs模块

      fs模块

      • 引入 const fs = require('fs')

      • fs.readFileSync(文件路径,options) :从源路径读取文件内容

      • fs.writeFileSync(目标文件路径(无新建),写入文件,options):写入文件

      • fs.readdirSync(dir) 读取目录内容

      • fs.createReadStream():创建一个源文件的只读的数据流

      • fs.createWriteStream():创建一个目标文件的只写数据流

      • .pipe进行连接:js fs.createReadStream(src).pipe(fs.createWriteStream(dst));

      • 文件属性读写

      其中常用的有fs.statfs.chmodfs.chown等等。

      • 文件内容读写

      其中常用的有fs.readFilefs.readdirfs.writeFilefs.mkdir等等。

      • 底层文件操作

      其中常用的有fs.openfs.readfs.writefs.close等等。

      fs.stat(), fs.statsync() : 获取文件信息状态
      1. 异步方法 fs.stat() fs.stat(path,callback),path 表示文件路径; callback 是指回调函数,有两个参数:(err,stats),其中 stats 是 fs.stat 的实例;
      2. 同步方法 fs.statsync() fs.statsync(path),只接收一个 path 变量,fs.statSync(path)其实是一个 fs.stats 的一个实例

      常用的方法:

      1. stats.isFile(): 如果是文件则返回 true,否则返回 false;

      2. stats.isDirectiory(): 如果是目录则返回 true,否则返回 false;

      3. stats.isBlockDevice(): 如果是块设备则返回 true,否则返回 false;

      4. stats.isCharacterDevice(): 如果是字符设备返回 true,否则返回 false;

      5. stats.isSymbolicLink(): 如果是软链接返回 true,否则返回 false;

      6. stats.isFIFO(): 如果是 FIFO,则返回 true,否则返回 false.FIFO 是 UNIX 中的一种特殊类型的命令管道;

      7. stats.isSocket(): 如果是 Socket 则返回 true,否则返回 false;

      8. stats.size(): 文件的大小(以字节为单位)。

      5. path模块

      path

      • path.normalize(): 将传入的路径转换为标准路径解析路径中的...,还能去掉多余的斜杠。

        注意:标准化之后的路径里的斜杠在 Windows 系统下是\ ,而在Linux 系统下是/。如果想保证任何系统下都使用/作为路径分隔符的话,需要用 .replace(/\\/g, '/') 再替换一下标准路径。
        js
        path.normalize('foo//baz//../bar') ==> "foo/bar"
        -
      • path.join():将传入的多个路径拼接为标准路径。该方法可避免手工拼接路径字符串的繁琐,并且能在不同系统下正确使用相应的路径分隔符.

        js
        path.join("foo/", "baz/", "../bar"); // => "foo/bar"
        -
      • path.extname()返回 path 的扩展名,即 path 的最后一部分中从最后一次出现的 .(句点)字符到字符串的结尾

        js
        path.extname("foo/bar.js"); // => ".js"
        -path.extname("index.html"); // => '.html'
        -path.extname("index."); // => '.'
        -path.extname("index"); // => ''
        -path.extname(".index"); // => ''
        -path.extname(".index.md"); // => '.md'
        -
      • path.resolve(): 路径或路径片段的序列解析为绝对路径给定的路径序列从右到左处理,每个后续的 path 会被追加到前面,直到构建绝对路径。

        js
        // 因为 baz 不是绝对路径,但是 /bar/baz 是
        -path.resolve("/foo", "/bar", "baz"); // => '/bar/baz'
        -path.resolve("/foo/bar", "./baz"); // => '/foo/bar/baz'
        -path.resolve("/foo/bar", "/tmp/file/"); // => '/tmp/file'
        -
        -path.resolve("wwwroot", "static_files/png/", "../gif/image.gif");
        -// 如果当前工作目录是 /home/myself/node,
        -// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'
        -

      6 .单字节编码

      Details
      1. ASCII编码:单字节编码。最初的编码,由一个字节组成,因此只能表示 256 个字符,但只表示 0-9,a-z,A-Z,和一些加减乘除百分号,够老美用了
      2. ANSI编码:多字节编码。
      • 由于一个字节只能表示 255 个数字,所以中国约定了GBK 编码规则,约定用 0x80-0xFF 范围内的某两个字节来表示某一个中文字符。

      • 日本约定了 JIS 编码规则,他们约定 0x80-0xFF 范围内的某两个字节来表示某个日文字符。

      • 台湾约定了 BIG5 编码规则,约定 0x80-0xFF 范围内的某两个字节表示某个繁体中文字符。

      • 所以我们拿到了一个 ANSI 字节串的时候,我们还必须知道这个字节串的编码,才能将这个字节串转换成相应国家的字符串。

      1. UNICODE编码:宽字节编码。

      TIP

      1. 字节: 字节(Byte)是一种计量单位,表示数据量多少,它是计算机信息技术用于计量存储容量的一种计量单位
      2. 字符:字符是指计算机中使用的文字和符号,比如 1、2、3、A、B、C、~!·#¥%……—*()——+、等等。
      • ①ASCII 码中,一个英文字母(不分大小写)占一个字节的空间,一个中文汉字占两个字节的空间。一个二进制数字序列,在计算机中作为一个数字单元,一般为 8 位二进制数,换算为十进制。最小值 0,最大值 255

      • ②UTF-8 编码中,一个英文字符等于一个字节,一个中文(含繁体)等于三个字节。

      • ③Unicode 编码中,一个英文等于两个字节,一个中文(含繁体)等于两个字节。符号:英文标点占一个字节,中文标点占两个字节。举例:英文句号“.”占 1 个字节的大小,中文句号“。”占 2 个字节的大小。

      • ④UTF-16 编码中,一个英文字母字符或一个汉字字符存储都需要 2 个字节(Unicode 扩展区的一些汉字存储需要 4 个字节)。

      • ⑤UTF-32 编码中,世界上任何字符的存储都需要 4 个字节。

      7. http模块

      'http'模块提供两种使用方式:

      • 作为服务端使用时,创建一个 HTTP 服务器,监听 HTTP 客户端请求并返回响应。

      • 作为客户端使用时,发起一个 HTTP 客户端请求,获取服务端响应。

      注意点:

      问: 为什么 http 模块创建的 HTTP 服务器返回的响应是 chunked 传输方式的?

      答: 因为默认情况下,使用.writeHead 方法写入响应头后,允许使用.write 方法写入任意长度的响应体数据,并使用.end 方法结束一个响应。由于响应体数据长度不确定,因此 NodeJS 自动在响应头里添加了 Transfer-Encoding: chunked 字段,并采用 chunked 传输方式。但是当响应体数据长度确定时,可使用.writeHead 方法在响应头里加上 Content-Length 字段,这样做之后 NodeJS 就不会自动添加 Transfer-Encoding 字段和使用 chunked 传输方式。

      问: 为什么使用 http 模块发起 HTTP 客户端请求时,有时候会发生 socket hang up 错误?

      答: 发起客户端 HTTP 请求前需要先创建一个客户端。http 模块提供了一个全局客户端 http.globalAgent,可以让我们使用.request 或.get 方法时不用手动创建客户端。但是全局客户端默认只允许 5 个并发 Socket 连接,当某一个时刻 HTTP 客户端请求创建过多,超过这个数字时,就会发生 socket hang up 错误。解决方法也很简单,通过 http.globalAgent.maxSockets 属性把这个数字改大些即可。另外,https 模块遇到这个问题时也一样通过 https.globalAgent.maxSockets 属性来处理

      8. 进程管理

        1. process:process 不是内置模块,而是一个全局对象,
        1. child_process:模块可以创建和控制子进程,该模块提供的 API 中最核心的是.spawn,其余 API 都是针对特定使用场景对它的进一步封装,算是一种语法糖。
        1. Cluster:cluster 模块是对 child_process 模块的进一步封装,专用于解决单进程 NodeJS Web 服务器无法充分利用多核 CPU 的问题。使用该模块可以简化多进程服务器程序的开发,让每个核上运行一个工作进程,并统一通过主进程监听端口和分发请求。

      应用场景

      1. 如何获取命令行参数

      js
      function main(argvs) {}
      -main(process.argv.slice(2));
      -

      2. 如何退出程序

      通常一个程序做完所有事情后就正常退出了,这时程序的退出状态码为 0。或者一个程序运行时发生异常后挂了,这时程序的退出状态码不等于 0。如果我们在代码中捕获了某个异常,但是觉得程序不应该继续运行下去,需要立即退出,并且需要把退出状态码设置为指定数字,比如 1,就可以按照以下方式:

      js
      try {
      -  // ...
      -} catch (err) {
      -  // ...
      -  process.exit(1);
      -}
      -

      3. 如何控制输入输出

      NodeJS 程序的标准输入流(stdin)、一个标准输出流(stdout)、一个**标准错误流(stderr)**分别对应 process.stdinprocess.stdoutprocess.stderr,第一个是只读数据流,后边两个是只写数据流,对它们的操作按照对数据流的操作方式即可。例如,console.log 可以按照以下方式实现。

      js
       function log(){
      -  process.stdout.write(
      -          util.format.apply(util, arguments) + '\n');
      -  )
      - }
      -

      4. 如何降权

      在 Linux 系统下,我们知道需要使用 root 权限才能监听 1024 以下端口。但是一旦完成端口监听后,继续让程序运行在 root 权限下存在安全隐患,因此最好能把权限降下来。以下是这样一个例子。

      js
      http.createServer(callback).listen(80, function () {
      -  // 如果是通过sudo获取root权限的,运行程序的用户的UID和GID保存在环境变量SUDO_UID和SUDO_GID里边。
      -  // 如果是通过chmod +s方式获取root权限的,运行程序的用户的UID和GID可直接通过process.getuid和process.getgid方法获取。
      -  var env = process.env,
      -    uid = parseInt(env["SUDO_UID"] || process.getuid(), 10),
      -    gid = parseInt(env["SUDO_GID"] || process.getgid(), 10);
      -
      -  // 降权时必须先降GID再降UID,否则顺序反过来的话就没权限更改程序的GID了。
      -  process.setgid(gid); // 先降GID  process.setgid(gid) 只接受number类型参数
      -  process.setuid(uid); // 再降UID   process.setuid(uid) 只接受number类型参数
      -});
      -

      5. 如何创建子进程

      js
      // spawn(exec, args, options)方法支持三个参数
      -// exec:参数是执行文件路径,可以是执行文件的相对或绝对路径,也可以是根据PATH环境变量能找到的执行文件名。
      -// args:数组中的每个成员都按顺序对应一个命令行参数。
      -// options:用于配置子进程的执行环境与行为。
      -const child = child_process.spawn("node", ["xxx.js"]);
      -
      -child.stdout("data", function (data) {
      -  console.log("stdout: " + data);
      -});
      -child.stderr("data", function (data) {
      -  console.log("stderr: " + data);
      -});
      -child.on("close", function (code) {
      -  console.log("child process exited with code " + code);
      -});
      -

      6. 进程间如何通讯

      js
      /* parent.js */
      -const child = child_process.spawn("node", ["child.js"]);
      -
      -// 父进程通过 .kill 方法向子进程发送 SIGTERM 信号
      -child.kill("SIGTERM");
      -
      -/* child.js */
      -process.on("SIGTERM", function () {
      -  // 子进程通过监听 process 对象的的SIGTERM事件响应信号
      -  cleanUp();
      -  process.exit(0);
      -});
      -

      父子进程都是 NodeJS 进程,就可以通过 IPC(进程间通讯)双向传递数据 据在传递过程中,会先在发送端使用 JSON.stringify 方法序列化,再在接收端使用 JSON.parse 方法反序列化。

      js
      /* parent.js */
      -var child = child_process.spawn("node", ["child.js"], {
      -  stdio: [0, 1, 2, "ipc"], //父进程在创建子进程时,在options.stdio字段中通过ipc开启了一条IPC通道
      -});
      -
      -// 监听子进程对象的 message 事件接收 来自子进程的消息,
      -child.on("message", function (msg) {
      -  console.log(msg);
      -});
      -
      -// 并通过.send方法给子进程发送消息。
      -child.send({ hello: "hello" });
      -
      -/* child.js */
      -process.on("message", function (msg) {
      -  // 监听 process 对象的 message 事件
      -  msg.hello = msg.hello.toUpperCase();
      -  // 通过 .send 方法向父进程传递信息
      -  process.send(msg);
      -});
      -

      7. 如何守护子进程

      守护进程一般用于监控工作进程的运行状态,在工作进程不正常退出时重启工作进程,保障工作进程不间断运行。以下是一种实现方式。

      js
      /* daemon.js */
      -function spawn(mainModule) {
      -  var worker = child_process.spawn("node", [mainModule]);
      -
      -  worker.on("exit", function (code) {
      -    // 工作进程非正常退出时,守护进程立即重启工作进程。
      -    if (code !== 0) {
      -      spawn(mainModule);
      -    }
      -  });
      -}
      -
      -spawn("worker.js");
      -

      9. 异步编程

      域(domain)

      1. 一个域就是一个 js 运行环境,在一个运行环境中,如果一个异常没有被捕获,就会作为一个全局异常被抛出,nodejs 中通过 process 对象提供捕获全局异常的方法
      js
      process.on("uncaughtException", function (error) {
      -  console.log("Error: %s", err.message);
      -});
      -
      -setTimeout(function (fn) {
      -  fn();
      -});
      -
      -// Error: undefined is not a function
      -
      1. 通过 域(domain)对象监听 error 事件,捕获异常
      js
      const d = domain.create();
      -
      -d.on("error", function () {
      -  response.writeHead(500);
      -  response.end();
      -});
      -

      注意点 ⚠️

      • 官方建议无论是通过process还是domian处理异常后都要重启程序,因为处理异常后的程序处于一种不确定的运行状态,可能导致内存泄漏或者表现的很奇怪
      • JS 本身的 throw..try..catch 异常处理机制并不会导致内存泄漏,也不会让程序的执行结果出乎意料,但 NodeJS 并不是存粹的 JS。NodeJS 里大量的 API 内部是用 C/C++实现的,因此 NodeJS 程序的运行过程中,代码执行路径穿梭于 JS 引擎内部和外部,而 JS 的异常抛出机制可能会打断正常的代码执行流程,导致 C/C++部分的代码表现异常,进而导致内存泄漏等问题
      - - + + + \ No newline at end of file diff --git a/pages/base/html/index.html b/pages/base/html/index.html index cc77043..c5c0615 100644 --- a/pages/base/html/index.html +++ b/pages/base/html/index.html @@ -5,15 +5,15 @@ HTML | 我的网站 - - - - + + + + -
      Skip to content
      目录

      HTML

      1.禁用右键 和 禁用选择

      js 中

      js
      // 禁用右键
      +    
      Skip to content
      目录

      HTML

      1.禁用右键 和 禁用选择

      js 中

      js
      // 禁用右键
       document.oncontextmenu = new Function("event.returnValue=false");
       // 禁用选择
       document.onselectstart = new Function("event.returnValue=false");
      @@ -51,9 +51,9 @@
         // 主题色从 暗色-亮色会触发该方法
         console.log(e);
       });
      -
    - - +
+ + \ No newline at end of file diff --git a/pages/base/js/index.html b/pages/base/js/index.html index e7a9183..93d4d0e 100644 --- a/pages/base/js/index.html +++ b/pages/base/js/index.html @@ -5,15 +5,15 @@ javaScript | 我的网站 - - - - + + + + -
Skip to content
目录

javaScript

1. 将一个字符串变成数字

TIP

js 中有~是按位取反运算,~~ 用来作双非按位取反运算, ~~ 的作用是去掉小数部分,对于正数,向下取整;对于负数,向上取整;与 Math.floor()不同的是,它只是单纯的去掉小数部分,不论正负都不会改变整数部分

非数字取值为 0,true:1,false:0

骚操作
js
let str = "2";
+    
Skip to content
目录

javaScript

1. 将一个字符串变成数字

TIP

js 中有~是按位取反运算,~~ 用来作双非按位取反运算, ~~ 的作用是去掉小数部分,对于正数,向下取整;对于负数,向上取整;与 Math.floor()不同的是,它只是单纯的去掉小数部分,不论正负都不会改变整数部分

非数字取值为 0,true:1,false:0

骚操作
js
let str = "2";
 console.log(~~str); //2
 

2. flat 数组扁平化

常规操作
js
let arr = [1, [2, [3, 45]]];
 function flatten(arr) {
@@ -132,38 +132,62 @@
     console.log(styleDeclaration.content, styleDeclaration.fontSize); //"你好" 25.6px
   </script>
 </body>
-

6. structuredClone() 方法使用结构化克隆算法将给定的值进行深拷贝

https://mp.weixin.qq.com/s/dLvyW_xmT3PAZ6ZrkrvYjA

mdn : https://developer.mozilla.org/zh-CN/docs/Web/API/structuredClone

7. 循环中使用定时器

Details

1.第一种方式

js
// 这里的 i 为全局定义的
-for (var i = 0; i <= 5; i++) {
-  // 同步代码 ==》  这里依次输出 i 的值为,0,1,2,3,4,5
-  console.log(i);
-  // 异步代码 ==》 定时器,里面的i使用了闭包,
-  // 1. 每隔一秒推入任务队列中一个定时任务,定时 1s,为 6个 st(fn,1s),1s内全部执行完毕了
+

6. structuredClone() 方法使用结构化克隆算法将给定的值进行深拷贝

https://mp.weixin.qq.com/s/dLvyW_xmT3PAZ6ZrkrvYjA

mdn : https://developer.mozilla.org/zh-CN/docs/Web/API/structuredClone

7. 循环中使用定时器

Details

1.第一种方式

js
for (var i = 0; i <= 5; i++) {
+  console.log(i); // 0,1,2,3,4,5
+  // 1. 在 6次 循环中,推入任务队列中 6个 定时任务,在 1s 内全部执行完毕了
   // 2. performance.now() 大小基本相同,瞬间执行完 0-5 次循环推入的 6 个定时器,都在 1s 内执行完
   setTimeout(() => {
     console.log(performance.now());
     // i 为全局最终值 6,虽然在循环时引用到定义的 i,但是这个 i 是全局的
     // 所以在 定时器执行时(同步代码执行完毕后) 这个 i 已经变为 6 了,输出6
-    console.log(i);
+    console.log(i); // 1s 输出 6个6
   }, 1000);
 }
-// 输出全局定义的i,上面执行完 i 最终值为6
-console.log(i);
-

2.第二种方式

js
// 这里的 i 为全局定义的
-for (var i = 0; i <= 5; i++) {
-  console.log(i);
-  // 异步代码 ==》 定时器,里面的i使用了闭包,
-  // 1. 在 0s,1s,2s,3s,4s,5s 推入任务队列中一个定时任务,
+console.log(i); // 6
+

2.第二种方式

js
for (var i = 0; i <= 5; i++) {
+  console.log(i); // 0,1,2,3,4,5
+  // 1. 间隔 1s 推入任务队列中一个定时任务, 0s,1s,2s,3s,4s,5s。
   // 2. 依次为 st(fn,0s),st(fn,1s),st(fn,2s),st(fn,3s),st(fn,4s),st(fn,5s),st(fn,6s),
   // 3. performance.now() 大小相差大概 1s,因为在 0-5 次循环推入的 6个定时器, 定时间隔为 1s
   setTimeout(() => {
     console.log(performance.now());
-    console.log(i); // i 为全局最终值 6
+    console.log(i); // i 为全局最终值 6,每隔 1s 输出 1个 6
   }, i * 1000);
 }
 console.log(i);
-
- - +

8. 监听中文输入开始和结束

  1. compositionstart: 当用户使用拼音输入法开始输入汉字拼音时,这个事件就会被触发。
  2. compositionupdate: 拼音输入法,输入中触发
  3. compositionend: 拼音输入法,输入结束触发
例子
vue
<template>
+  <input
+    type="text"
+    v-model="demo"
+    @compositionstart="compositionstart"
+    @compositionupdate="compositionupdate"
+    @compositionend="compositionend"
+  />
+  <!--  elelment元素上需要 ➕ 修饰符 native -->
+  <el-input
+    @compositionstart.native="compositionstart"
+    @compositionupdate.native="compositionupdate"
+    @compositionend.native="compositionend"
+    v-model="demo"
+  />
+</template>
+
+<script setup>
+import {ref} from 'vue'
+const demo= ref('')
+compositionend(e) {
+  console.log("end", e.target.value);
+},
+compositionstart(e) {
+  console.log("start", e.target.value);
+},
+compositionupdate(e) {
+  console.log("update", e.target.value);
+},
+</script>
+
+ + \ No newline at end of file diff --git a/pages/base/js/prototype.html b/pages/base/js/prototype.html new file mode 100644 index 0000000..8d89df0 --- /dev/null +++ b/pages/base/js/prototype.html @@ -0,0 +1,108 @@ + + + + + + 原型和原型链 | 我的网站 + + + + + + + + + +
Skip to content
目录

原型和原型链

TIP

  1. 原型是为了实现面向对象的手段,原型链是为了实现继承
  2. 实现面向对象的两种方式: 基于类的面向对象和基于原型的面向对象
  3. 通过原型能知道对象的类型,不然会丢失对象的类型
  4. 通过一个构造函数实例化,产生一个实例对象,实例对象里会有一个 _proto_属性指向原型对象原型对象里面记录该实例对象的类型,这个实例对象constructor 指回 构造函数构造函数里面有一个 prototype 指向原型对象
  5. 对于所有函数,属性prototypeObject.prototype的实例,例如:js Array.prototype instanceof Object //true
  6. 所有的对象都会继承来自 Object.prototype 的属性和方法。

1. 基础知识(死记硬背)

  1. 对象是某个特定引用类型的实例,可以理解为对象要通过构造函数实例化实现的,而构造函数本身又是一个对象,构造函数本身又需要通过构造函数实例化实现。
  2. js 提供了很多原生引用类型:Object、Array、Function、String、Number、Boolean、Date、RegExp,Map、WeakMap、Set、Symbol、BigInt 同时它们都是原生构造函数
  3. 每个函数都是 Function 类型的实例,因此函数也是对象
  4. 对象都拥有隐式原型(__proto__ 属性),指向它的构造函数的原型对象prototype 属性)
  5. 每个构造函数都有一个prototype 属性(只有函数才有prototype属性),叫原型对象(也叫显式原型)(注意:原型对象,本质是对象),
  6. 原型对象上有一个 constructor 属性指向构造函数本身。Fn.prototype.constructor === Fn // true
  7. 通过 new 实例化出来的对象没有 prototype 属性
  8. 对象都具有 __proto__ 属性
  9. 宇宙的尽头:Object.prototype.__proto__ === null

2. const obj = new Object()的原型链查找

对于 const obj = new Object()

  1. 根据上面的规则 4 和 5 可以得知,obj.__proto__ === Object.prototype;
  2. 根据规则 2、3、4 可以知道 Object 本身是引用类型也就是对象;
  3. 根据规则 8,Object 拥有隐式原型 __proto__, 同时 Object 也是一个函数,而函数都是 Function 的实例,也就是 ObjectFunction 的实例;
  4. 因为对象的隐式原型__proto__属性)指向它的构造函数的原型对象prototype 属性) 所以:Object.__proto__ === Function.prototype;
  5. 根据上面的规则 5,Function.prototype 本质是对象
  6. 根据规则 8,Function.prototype 拥有隐式原型 __proto__,而对象是通过原生构造函数 Object 实现的,所以 Function.prototype.__proto__ === Object.prototype;
  7. 最后根据规则 9,Object.prototype.__proto__ === null
  8. 至此,这整一个链路的过程也就是原型与原型链的原理解析过程,本质就是通过属性 proto 进行链接每一个节点对象。
js
const obj = new Object();
+// 实例对象的隐式原型指向它的构造函数的原型对象
+obj.__proto__ === Object.prototype;
+// Object 本身是原生引用类型也就是对象,而对象都拥有隐式原型,
+// 同时 Object 又是原生构造函数,而函数都是 Function 的实例,可以简单理解为 Object 是通过构造函数 Function 实例化实现。
+Object.__proto__ === Function.prototype;
+// 原型对象本质是对象,而对象是通过原生构造函数 Object 实例化实现的
+Function.prototype.__proto__ === Object.prototype;
+// 宇宙的尽头
+Object.prototype.__proto__ === null;
+

3. 有意思的一个类型 Function

3.1 每个函数都是 Function的实例

Function 是原生的引用类型,也就是对象,也就拥有隐式原型每个函数都是 Function 的实例,所以 Function 的隐式原型就指向了构造函数 Function 的原型对象

js
typeof Function === "function"; // true
+Function instanceof Function === true; // true
+
+Function.__proto__ === Function.prototype; // true
+// 接下来跟上文一样
+Function.prototype.__proto__ === Object.prototype;
+Object.prototype.__proto__ === null;
+

3.2 普通函数也是Function实例

js
function fn() {} // 函数声明定义函数
+const fn = function () {}; // 函数表达式定义函数
+
+// 因为每个函数都是 Function 的实例,函数实例对象 fn 的隐式原型指向它的构造函数的原型对象
+fn.__proto__ === Function.prototype; // true
+// 接下来跟上文一样
+Function.prototype.__proto__ === Object.prototype;
+Object.prototype.__proto__ === null;
+

3.3 原生构造函数的原型与原型链的关系

js
// String 作为字符串的构造函数对象,String 也是通过的 Function 的实例化而来。所以
+String.__proto__ === Function.prototype;
+
+// Boolean 作为布尔类型的构造函数对象,Boolean 也是通过的 Function 的实例化而来。所以
+Boolean.__proto__ === Function.prototype;
+
+// Number 作为数字的构造函数对象,Number 也是通过的 Function 的实例化而来。所以
+Number.__proto__ === Function.prototype;
+
+// 同样其它的
+Map.__proto__ === Function.prototype;
+WeakMap.__proto__ === Function.prototype;
+Set.__proto__ === Function.prototype;
+

4. 基础数据类型和引用数据类型

  1. 引用类型基本包装类型主要区别是对象的生存期
  2. 使用 new 操作符创建的引用类型的实例对象,在执行流离开当前作用域之前都一直保存在内存中
  3. 而自动创建的基本包装类型的对象,就只存在代码执行的一瞬间,然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法为基本类型在代码执行的时候创建对应的基本包装类型,只是为了方便数据的操作。

5. 关于 js 中一切皆对象

js
const s = "Cobyte";
+typeof s === "string"; // true
+s.__proto__ === String.prototype; // true
+s instanceof String; // false
+

基础数据类型在通过字面量形式创建时,会对基础类型进行包装,叫基础包装类型,在代码创建的一瞬间 const str = new String('cobyte'),让这个字符串变量可以访问对象的一些属性和方法,但他本质并不是一个对象。但是通过 new关键字创建时,就为一个对象了。

6. 原型

  • prototype一般称为显式原型,__proto__一般称为隐式原型,
  • 每一个函数在创建之后,在默认情况下,会拥有一个名为 prototype 的属性,这个属性表示函数的原型对象。
  • 每个 JavaScript 对象都有一个隐藏的原型属性——__proto__
js
function Fn() {}
+const obj = new Fn();
+// 对象 obj 的隐式原型指向构造函数 Fn 的原型对象
+obj.__proto__ === Fn.prototype; // true
+

7. 原型链

  • 当我们访问一个对象的属性时,JS 会先在这个对象定义的属性中进行查找,如果没有找到,就会沿着 __proto__ 这个隐式原型关联起来的链条向上一个对象查找,这个链条就是原型链。

8. 构造函数,原型,实例的关系

  • 每个构造函数都有一个原型对象(prototype属性),原型对象都包含一个指向构造函数的指针(constructor属性),实例都包含一个指向原型对象的内部指针(__proto__属性)

9. 继承

TIP

  1. hasOwnProperty 方法来检测对象上的属性是否是自身定义的还是通过原型链继承而来的。

9.1 通过重写隐式原型属性

js
const obj1 = {
+  info: "cobyte",
+  run: function () {
+    console.log("run");
+  },
+};
+const obj2 = {
+  age: 18,
+};
+// 重写隐式原型属性
+obj2.__proto__ = obj1;
+obj2.info; // 'cobyte'
+obj2.run(); // 'run'
+

9.2 通过Object.create(proto,[propertiesObject])方法(本质还是通过重写隐式原型属性)

js
const obj1 = {
+  info: "cobyte",
+  run: function () {
+    console.log("run");
+  },
+};
+// 通过`Object.create(proto,[propertiesObject])`方法
+const obj2 = Object.create(obj1, { age: { value: 18 } });
+obj2.info; // 'cobyte'
+obj2.run(); // 'run'
+

9.3 通过构造函数方式实现

  • 不够严谨,单单修改子类原型对象为父类实例,那子类的构造函数会有问题,而且如果父类需要传参,这样实现的继承,在 new 子类实例的时候无法传参
js
function Fn1() {
+  this.age = 18;
+}
+Fn1.prototype.getAge = function () {
+  return this.age;
+};
+
+function Fn2() {}
+// 让构造函数 Fn2 的原型对象等于构造函数 Fn1 的实例对象
+Fn2.prototype = new Fn1();
+
+const fn2 = new Fn2();
+fn2.age; // 18
+fn2.getAge(); // 18
+

这里本质是重写原型对象。用原型与原型链理解的话就是:在进行 new 操作时,new操作在背后做了什么,

  1. fn2的隐式原型__proto__指向了构造函数Fn2的显式原型prototype
  2. Fn2.prototype此时已经变了,变成了fn1的实例对象。
  3. 这样 fn2 不仅拥有 Fn1 实例对象的全部属性和方法,而且 Fn1 实例的隐式原型指向 Fn1显式原型
  4. 最终 Fn1prototype 属性值的隐式原型指向 Object.prototype,这样最终实现继承了 Object 上的属性和方法。

代码解释

js
fn2.__proto__ === Fn2.prototype; // 1. true
+Fn2.prototype.__proto__ === Fn1.prototype; // 2.  true
+Fn1.prototype.__proto__ === Object.prototype; // 3.  true
+Object.prototype.__proto__ === null; // 4. true
+
+ + + + + \ No newline at end of file diff --git a/pages/base/js/this.html b/pages/base/js/this.html new file mode 100644 index 0000000..b3791fc --- /dev/null +++ b/pages/base/js/this.html @@ -0,0 +1,241 @@ + + + + + + this的指向问题 | 我的网站 + + + + + + + + + +
Skip to content
目录

this的指向问题

参考文章: this 实战例题总结分析

TIP

  • 匿名函数的this永远指向window

  • 词法作用域在词法分析阶段就被确定了(写代码的时候就确定了),js 是解释型语言,没有编译时,有预编译阶段

  • java 是编译型语言:java 的代码就是被编译为 .class 文件才能运行,这个编译过程就是编译时运行 .class 文件就是运行时。

  • 箭头函数本身没有this,因为基于闭包(本身没有,去外层寻找),会去外层寻找this闭包属于词法作用域(词法作用域是在编译时确定的)

  • 箭头函数this指向谁,决定于它定义的位置,而不是运行的位置(因为this => 闭包 => 词法作用域 => 编译时态确定(js 没有编译,但是有预编译,编译时态就确定了词法作用域)

  • B.apply(A, arguments):即 A 对象应用 B 对象的方法 arguments为数组

  • B.call(A, arguments):即 A 对象应用 B 对象的方法 arguments为列表项

  • const newFn = fn.bind(A, arguments)的作用是只修改this指向,但不会立即执行 fn;会返回一个修改了 this 指向后的 fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()。bind 的传参和 call 相同。

1. 普通函数的 this

  • 非严格模式下全局调用函数时,this指向window,在严格模式thisundefined(babel 转为 ES6 时,会自定加上 严格模式)

2. 箭头函数的 this

  • 箭头函数的 this 的指向是由外层(函数或全局)作用域来决定的。

  • 箭头函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。普通函数使用了严格模式 this 会指向 undefined 但箭头函数依然指向了 window

3. 函数作为对象内的方法时的this

例子
js
const obj = {
+  name: "coboy",
+  age: 18,
+  add: function () {
+    console.log(this, this.name, this.age);
+  },
+  edit: function () {
+    // 这里声明了一个 fn 函数,接着又马上执行了它,其实可以看做是一个匿名的自执行函数
+    function fn() {
+      console.log(this);
+    }
+    fn();
+    // (function () {
+    //   console.log(this);
+    // })();
+  },
+  arrow: function () {
+    const fn = () => {
+      console.log(this);
+    };
+    fn();
+  },
+};
+// 1. 谁调用了它,它就指向谁!
+obj.add(); // {name: "coboy", age: 18, add: ƒ} "coboy" 18
+
+// 2.  obj 对象方法 add 赋值给 fn 之后,fn 仍然在 window 的全局环境中执行,所以 this 仍然指向 window。
+const fn = obj.add;
+fn(); // window
+
+// 3. 匿名函数的 this 永远指向 window!
+obj.edit(); // window
+
+// 4. 箭头函数的 this  是由外层函数作用域或者全局作用域决定的。
+obj.arrow(); // {name: "coboy", age: 18, add: ƒ}   箭头函数 this 指向外层,这里就是obj
+

4. 上下文对象调用中的 this

例子
js
const animal = {
+  name: "cat",
+  age: 18,
+  add: function () {
+    return this;
+  },
+  dog: {
+    name: "dog",
+    getName: function () {
+      console.log(this.name);
+    },
+  },
+};
+// 1. this 指向 animal 对象本身
+console.log(obj.add() === animal); // true
+
+// 2. 谁调用指向谁
+animal.dog.getName(); // 'dog'
+

5. 构造函数中的 this (通过 new)

  • 通过 new 操作符来构建一个构造函数的实例对象,这个构造函数中的 this 就指向这个新的实例对象(新创建的对象上),且优先级要比 bind 的高。同时构造函数 prototype 属性下面方法中的 this 也指向这个新的实例对象。
  • 构造函数中显式返回一个值,且返回的是一个对象,那么 this 就指向返回的对象,如果返回的不是一个对象,而是基本类型,那么 this 仍然指向实例
例子
js
// 1.  构造函数中 this
+function Animal() {
+  this.txt = "coboy";
+  this.age = 100;
+  console.log(this); // Animal  {txt: 'coboy', age: 100}
+}
+Animal.prototype.getNum = function () {
+  return this.txt;
+};
+const a1 = new Animal();
+console.log(a1); // Animal  {txt: 'coboy', age: 100}
+console.log(a1.age); // 100
+console.log(a1.getNum()); // 'coboy'
+
+// 2. 构造函数中出现显式 return 的情况。
+// 返回对象
+function Animal() {
+  this.txt = "coboy";
+  const obj = { txt: "cobyte" };
+  return obj;
+}
+const a1 = new Animal();
+console.log(a1.txt); // cobyte
+
+// 返回基本类型
+function Animal1() {
+  this.txt = "coboy";
+  return 1;
+}
+const a1 = new Animal1();
+console.log(a1.txt); // 'coboy'
+

6. call

  • function.call(thisArg, arg1, arg2, ...):参数可以是任意数据类型
例子
js
Math.max.call(Math, 1, 2, 3, 10); // 10
+const obj = {
+  txt: "coboy",
+  age: 18,
+  getName: function () {
+    console.log(this, this.txt);
+  },
+};
+const obj1 = {
+  txt: "cobyte",
+};
+obj.getName(); // this指向obj
+obj.getName.call(obj1); // this指向obj1
+obj.getName.call(); // this指向window
+obj.getName.call(obj1, "coboy1", "coboy2"); // 传参
+

7. apply

  • function apply(thisArg, argsArray):参数argsArray数组类型或者 arguments 参数集合
例子
js
Math.max.apply(Math, [1, 2, 3, 10]); // 10
+const obj = {
+  txt: "coboy",
+  age: 18,
+  getName: function () {
+    console.log(this, this.txt);
+  },
+};
+const obj1 = {
+  txt: "cobyte",
+};
+obj.getName.apply(obj1); // this指向obj1
+obj.getName.apply(); // this指向window
+obj.getName.apply(obj1, ["coboy1", "coboy2"]); // 传参
+

8. bind

  • bind() 方法也能修改 this 指向,不过调用 bind() 方法不会执行 getName()函数,也不会改变 getName() 函数本身,只会返回一个已经修改了 this 指向的新函数,这个新函数可以赋值给一个变量,调用这个变量新函数才能执行 getName()。
Details
js
// 1. 无参数
+const obj = {
+  txt: "coboy",
+  age: 18,
+  getName: function () {
+    console.log(this.txt);
+  },
+};
+const obj2 = {
+  txt: "cobyte",
+};
+const newGetName = obj.getName.bind(obj2);
+newGetName(); // this指向obj2
+obj.getName(); // this仍然指向obj
+
+// 2. 有参数
+function fn(a, b, c) {
+  console.log(a, b, c);
+}
+const fn1 = fn.bind({ abc: 123 }, 600);
+fn(100, 200, 300); // 100,200,300
+fn1(100, 200, 300); // 600,100,200  // 改变 fn 的 this 时,传入了一个参数,会将这里的参数合并,fn(a,b,c) 只有三个参数,300 是第四个参数
+fn1(200, 300); // 600,200,300
+fn.call({ abc: 123 }, 600); // 600,undefined,undefined
+fn.call({ abc: 123 }, 600, 100, 200); // 600,100,200
+

9. this 的优先级

  • callapplybind显示绑定比隐式绑定优先级高
  • 构造函数的(new)比 bind优先级更高
  • 箭头函数无法改变this指向

10. Function.prototype.call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

基本思想是把 fn.call(obj,args)中的 fn 赋值为 obj 的属性,然后调用 obj.fn 即可实现 fn 中 this 指向的改变,还是那个确定的规律 “谁调用它,this 就指向谁”

js
Function.prototype._call = function (ctx, ...args) {
+  // 判断传入的 ctx 是否为空,为空就挂在 全局window上,不然就创建一个对象
+  const o = ctx == undefined ? window : Object(ctx);
+  // 给 ctx 对象添加独一无二的属性
+  const key = Symbol();
+  // 绑定 this,谁调用, this 就为谁,这里为 obj.fun,(这里是为了实现call,改变this指向,就是让使用这个函数的this,指向 ctx)
+  // 这里的 o = { name: "22",Symbol: fun(...args) }
+  o[key] = this;
+  // 执行函数,得到返回结果
+  const result = o[key](...args);
+  // 删除该属性
+  delete o[key];
+  return result;
+};
+
+const obj = {
+  name: "11",
+  fun(...args) {
+    console.log(this.name);
+  },
+};
+
+const obj2 = { name: "22" };
+obj.fun(); // 11
+obj.fun.call(obj2); // 22
+obj.fun._call(obj2, 1, 2); // 22 1 2
+

11. Function.prototype.apply

call是一样的思想,只不过传参是数组的形式

js
Function.prototype.myApply = function (ctx) {
+  const context = ctx == undefined ? window : Object(ctx);
+  let key = Symbol();
+  context[key] = this;
+  let result;
+  if (arguments[1]) {
+    //判断是否有第二个参数
+    result = context[key](...arguments[1]); // 调用该方法,该方法this指向context
+  } else {
+    result = context[key]; // 调用该方法,该方法this指向context
+  }
+  delete context[key];
+  return result;
+};
+
+const r = Math.max.myApply(null, [12, 3]);
+const r1 = Math.max.apply(null, [12, 3]);
+console.log(r); // 12
+console.log(r1); //  12
+

12. Function.prototype.bind

  • 绑定时可以传参数,之后执行的时候依然可以传参数,典型的闭包行为
  • bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
js
const obj = {
+  name: "11",
+  fun() {
+    console.log(this.name);
+  },
+};
+Function.prototype._bind = function (ctx, ...args) {
+  // 获取函数体
+  const _self = this;
+  // 用一个新函数包裹,避免立即执行
+  const bindFn = (...reset) => {
+    return _self.call(ctx, ...args, ...reset);
+  };
+  return bindFn;
+};
+const obj2 = { name: "22" };
+obj.fun(); // 11
+const fn = obj.fun.bind(obj2);
+const fn2 = obj.fun._bind(obj2);
+fn(); // 22
+fn2(); // 22
+

13. New 关键字

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

js
/*
+  create函数要接受不定量的参数,第一个参数是构造函数(也就是new操作符的目标函数),其余参数被构造函数使用。
+  new Create() 是一种js语法糖。我们可以用函数调用的方式模拟实现
+*/
+function create(Fn, ...args) {
+  // 1、创建一个空的对象
+  let obj = {}; // let obj = Object.create({});
+  // 2、将空对象的隐式原型 __proto__ 指向构造函数的原型对象 prototype
+  Object.setPrototypeOf(obj, Fn.prototype); // obj.__proto__ = Fn.prototype
+  // 以上 1、2步还可以通过 const obj = Object.create(Fn.prototype) 实现
+  // 3、改变构造函数的上下文(this),并将参数传入
+  let result = Fn.apply(obj, args);
+  // 4、如果构造函数执行后,返回的结果是对象类型,则直接将该结果返回,否则返回 obj 对象
+  return result instanceof Object ? result : obj;
+  // return typeof result === 'object' && result != null ? result : obj
+}
+
+ + + + + \ No newline at end of file diff --git a/pages/base/leetcode/index.html b/pages/base/leetcode/index.html index 2712224..e23dba2 100644 --- a/pages/base/leetcode/index.html +++ b/pages/base/leetcode/index.html @@ -5,15 +5,15 @@ 算法笔记 | 我的网站 - - - - + + + + -
Skip to content
目录

算法笔记

使用递归算法编写的代码虽然简洁,但由于每递归一次就产生一次函数调用,在需要优先考虑性能时,需要把递归算法转换为循环算法,以减少函数调用次数

1. 动态规划三要素:

  1. 重叠子问题
  2. 最优子结构
  3. 状态转移方程
斐波那契数列(台阶问题)求解
js
// 1. 递归求解 自顶向下
+    
Skip to content
目录

算法笔记

使用递归算法编写的代码虽然简洁,但由于每递归一次就产生一次函数调用,在需要优先考虑性能时,需要把递归算法转换为循环算法,以减少函数调用次数

1. 动态规划三要素:

  1. 重叠子问题
  2. 最优子结构
  3. 状态转移方程
斐波那契数列(台阶问题)求解
js
// 1. 递归求解 自顶向下
 // 时间复杂度: O(2^n) ======> 子问题个数即递归树中的节点总数 2^n,解决一个子问题需要的时间,因为只有一个加法操作 recursion(n-1) + recursion(n-2) ,所以解决一个子问题的时间为 O(1),二者相乘 为 O(2^n)
 
 // 空间复杂度: O(n)
@@ -220,9 +220,9 @@
   return result.reverse().join("");
 }
 console.log(add(str1, str2));
-
- - +
+ + \ No newline at end of file diff --git a/pages/base/uploadFile.html b/pages/base/uploadFile.html index d06bb12..762ce65 100644 --- a/pages/base/uploadFile.html +++ b/pages/base/uploadFile.html @@ -5,15 +5,15 @@ 原生文件上传相关 | 我的网站 - - - - + + + + -
Skip to content
目录

原生文件上传相关

html

input 属性

multiple:多选文件

webkitdirectory:选择文件夹

html 文件
html
<!DOCTYPE html>
+    
Skip to content
目录

原生文件上传相关

html

input 属性

multiple:多选文件

webkitdirectory:选择文件夹

html 文件
html
<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -374,9 +374,9 @@
 
 // 取消按钮点击事件注册
 doms.cacelBtn.onclick = doms.delBtn.onclick = cnacelHandler;
-
- - +
+ + \ No newline at end of file diff --git a/pages/canvas/demo.html b/pages/canvas/demo.html index a7378e6..5380bad 100644 --- a/pages/canvas/demo.html +++ b/pages/canvas/demo.html @@ -5,17 +5,17 @@ canvas 的小 demo | 我的网站 - - - - + + + + -
Skip to content
目录

canvas 的小 demo

1. 音频可视化

2. 小球的自由落体运动

当前浏览器不支持canvas元素,请升级或更换浏览器!

3. 烟花

4. 主题色改变(图片加上滤镜)和拾色器

划过的颜色为:
选中的颜色:

getImageData()

getImageData()方法可以返回一个ImageData对象。

ImageData对象用来描述canvas区域隐含的像素数据,此区域通过矩形表示,起始点为(sx, sy)宽为 sw、高为 sh

语法:getImageData(sx, sy, sw, sh)

参数:x

sx:将要被提取的图像数据矩形区域的左上角 x 坐标;

sy:将要被提取的图像数据矩形区域的左上角 y 坐标;

sw:将要被提取的图像数据矩形区域的宽度;

sh:将要被提取的图像数据矩形区域的高度;

🎉 :getImageData(x,y,1,1):获取距离 x 和 y 位置的 1 像素点的颜色

putImageData()

putImageData():可以将数据从已有的ImageData对象绘制为位图

语法: putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

参数:

ImageData:包含像素值的数组对象。 dx:源图像数据在目标画布中 x 轴方向的偏移量。 dy:源图像数据在目标画布中 y 轴方向的偏移量。 dirtyX:可选参数,在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(x 坐标)。 dirtyY:可选参数,在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(y 坐标)。 dirtyWidth:可选参数,在源图像数据中,矩形区域的宽度。默认是图像数据的宽度。 dirtyHeight:可选参数,在源图像数据中,矩形区域的高度。默认是图像数据的高度。

5. 签名

- - +
Skip to content
目录

canvas 的小 demo

1. 音频可视化

2. 小球的自由落体运动

当前浏览器不支持canvas元素,请升级或更换浏览器!

3. 烟花

4. 主题色改变(图片加上滤镜)和拾色器

划过的颜色为:
选中的颜色:

getImageData()

getImageData()方法可以返回一个ImageData对象。

ImageData对象用来描述canvas区域隐含的像素数据,此区域通过矩形表示,起始点为(sx, sy)宽为 sw、高为 sh

语法:getImageData(sx, sy, sw, sh)

参数:x

sx:将要被提取的图像数据矩形区域的左上角 x 坐标;

sy:将要被提取的图像数据矩形区域的左上角 y 坐标;

sw:将要被提取的图像数据矩形区域的宽度;

sh:将要被提取的图像数据矩形区域的高度;

🎉 :getImageData(x,y,1,1):获取距离 x 和 y 位置的 1 像素点的颜色

putImageData()

putImageData():可以将数据从已有的ImageData对象绘制为位图

语法: putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

参数:

ImageData:包含像素值的数组对象。 dx:源图像数据在目标画布中 x 轴方向的偏移量。 dy:源图像数据在目标画布中 y 轴方向的偏移量。 dirtyX:可选参数,在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(x 坐标)。 dirtyY:可选参数,在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(y 坐标)。 dirtyWidth:可选参数,在源图像数据中,矩形区域的宽度。默认是图像数据的宽度。 dirtyHeight:可选参数,在源图像数据中,矩形区域的高度。默认是图像数据的高度。

5. 签名

+ + \ No newline at end of file diff --git a/pages/canvas/index.html b/pages/canvas/index.html index c2ffaff..a48a464 100644 --- a/pages/canvas/index.html +++ b/pages/canvas/index.html @@ -5,15 +5,15 @@ canvas | 我的网站 - - - - + + + + -
Skip to content
目录

canvas

一、基础知识(详细版本看大神的)

案例+图解带你一文读懂 Canvas🔥🔥

二次贝塞尔曲线工具网站

三次贝塞尔曲线工具网站

1. 基础知识(https://juejin.cn/post/7161696893695688740)

html
<body>
+    
Skip to content
目录

canvas

一、基础知识(详细版本看大神的)

案例+图解带你一文读懂 Canvas🔥🔥

二次贝塞尔曲线工具网站

三次贝塞尔曲线工具网站

1. 基础知识(https://juejin.cn/post/7161696893695688740)

html
<body>
   <canvas id="canvas" width="200" height="200">
     当前浏览器不支持canvas元素,请升级或更换浏览器!
   </canvas>
@@ -27,9 +27,9 @@
     var ctx = canvas.getContext("2d");
   }
 </script>
-

TIP

    1. Canvas标签的默认大小为:300 x 150 (像素),而这里咱们设置为了:200 x 200(像素)
    1. Canvas标签中的文字:不支持Canvas:浏览器会忽略容器而显示其中的内容,支持Canvas:忽略包含的内容渲染 Canvas 标签:::
    1. Canvas 标签起初只是创造了一个固定大小的画布,它公开了一个或多个渲染上下文,通过 getContext() 可以获得渲染上下文和绘画功能
getContext(contextType, contextAttributes)可能的接收参数contextType 为绘制上下文的类型,类型参数有:
    1. 2d:建立一个二维渲染上下文。这种情况可以用 CanvasRenderingContext2D()来替换 getContext('2d')。
    1. webgl(或 experimental-webgl): 创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 1(OpenGL ES 2.0)的浏览器上可用。
    1. webgl2(或 experimental-webgl2):创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0)的浏览器上可用。
    1. bitmaprenderer:创建一个只提供将 canvas 内容替换为指定 ImageBitmap 功能的 ImageBitmapRenderingContext。
contextAttributes 为绘制上下文的属性,这些属性相对比较多
2D 类型的参数有:

(1)、alpha 它的值为 Boolean 类型,如果设置为 false, 浏览器将认 Canvas 背景总是不透明的,这样可以做到一些性能提效。

(2)、willReadFrequently,值也为 Boolean 类型,用于表明是否要重复操作,频繁调用 getImageData()方法时能节省内存,但是仅 Gecko 内核浏览器支持

(3)、storage 用于表明使用哪种方式存储,默认值 persisten,表示持久化存储。

3D 类型的参数有:

(1)、alpha 值为 Boolean 类型,指示画布是否包含 alpha 缓冲区。 (2)、antialias 值为 Boolean 类型,指示是否开启抗锯齿。 (3)、depth 值为 Boolean 类型,表示绘图缓冲区的深度缓冲区至少为 16 位。 (4)、failIfMajorPerformanceCaveat 值为 Boolean 类型,指示如果系统性能较低,是否创建上下文。 (5)、powerPreference:对用户代理的提示,指示 GPU 的哪种配置适合 WebGL 上下文。可能的值是: default: 自动选择模式,自动决定哪种 GPU 配置最合适,为默认值。 high-performance: 高性能模式,优先考虑渲染性能而不是功耗。 low-power: 节能模式,优先考虑节能而不是渲染性能。 (6)、premultipliedAlpha 值为 Boolean 类型,表示页面合成器将假定绘图缓冲区包含具有预乘 alpha 的颜色。 (7)、preserveDrawingBuffer 值为 Boolean 类型,如果值为 true,则不会清除缓冲区并保留其值,直到被清除或被使用者覆盖。 (8)、stencil 值为 Boolean 类型,表示绘图缓冲区具有至少 8 位的模板缓冲区。

二、绘制形状

当前浏览器不支持canvas元素,请升级或更换浏览器!

1. 绘制直线和三角形

TIP

  1. moveTo(x,y): 设置初始位置,参数为初始位置xy的坐标点
  2. lineTo(x,y): 绘制一条从初始位置到指定位置的直线,参数为指定位置xy的坐标点
  3. stroke(): 通过线条来绘制图形轮廓

2. 矩形

TIP

x 和 y 是矩形的起点坐标,width 和 height 是矩形的宽高

  1. strokeRect(x, y, width, height) 绘制一个矩形的边框
  2. fillRect(x, y, width, height) 绘制一个填充的矩形
  3. clearRect(x, y, width, height) 清除指定矩形区域,让清除部分完全透明。

3. 圆弧和圆

  1. arc(x, y, radius, startAngle, endAngle, anticlockwise)。x 和 Y 为圆心的坐标,radius 为半径,startAngle 为圆弧或圆的开始位置,endAngle 为圆弧或圆的结束位置,anticlockwise 是绘制的方向(不写默认为 false,从顺时针方向)。

  2. 在画弧的时候,arc()函数中角的单位是弧度而不是角度。角度换算为弧度的表达式为:弧度=(Math.PI/180)*角度。

椭圆

  1. ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
  • x、y:椭圆的圆心位置
  • radiusX、radiusY:x 轴和 y 轴的半径
  • rotation:椭圆的旋转角度,以弧度表示
  • startAngle:开始绘制点
  • endAngle:结束绘制点
  • anticlockwise:绘制的方向(默认顺时针),可选参数。

4. 开启路径(beginPath),闭合路径(closePath())

TIP

  1. 新建一条路径,生成之后,图形绘制命令被指向到路径上。

  2. 闭合路径之后图形绘制命令又重新指向到上下文中,关闭路径其实并不是必须的,对于新路径其实每次都开启新路径就 ok。

5. fill

TIP

  1. stroke方法是通过线条来绘制图形轮廓,
  2. fill方法则是通过填充路径的内容区域生成实心的图形。

6. 贝塞尔曲线

TIP

二次贝塞尔曲线

  1. quadraticCurveTo(cp1x, cp1y, x, y),其中 cp1x 和 cp1y 为一个控制点,x 和 y 为结束点。

三次贝塞尔曲线

  1. ctx.bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y),其中 cp1x 和 cp1y 为一个控制点,cp2x 和 cp2y 为第二个控制点,x 和 y 为结束点。

三、 绘制样式

1. 线条的样式

TIP

  1. lineWidth 设置当前绘线的粗细。属性值必须为正数。默认值是 1.0。
  2. lineCap 设置线段端点显示的样子。可选值为:butt,round 和 square。默认是 butt。
  3. lineJoin 该属性可以设置两线段连接处所显示的样子。可选值为:round, bevel 和 miter。默认是 miter。
  4. miterLimit 限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。 线段之间夹角比较大时,交点不会太远,但随着夹角变小,交点距离会呈指数级增大。 如果交点距离大于 miterLimit 值,连接效果会变成了 lineJoin = bevel 的效果。
  5. setLineDash 可以设置当前虚线样式。设置奇数,setLineDash 会复制一份数组补全为偶数
  6. getLineDash 则是返回当前虚线设置的样式,长度为非负偶数的数组。
  7. lineDashOffset 设置虚线样式的起始偏移量。
- - +

TIP

    1. Canvas标签的默认大小为:300 x 150 (像素),而这里咱们设置为了:200 x 200(像素)
    1. Canvas标签中的文字:不支持Canvas:浏览器会忽略容器而显示其中的内容,支持Canvas:忽略包含的内容渲染 Canvas 标签:::
    1. Canvas 标签起初只是创造了一个固定大小的画布,它公开了一个或多个渲染上下文,通过 getContext() 可以获得渲染上下文和绘画功能
getContext(contextType, contextAttributes)可能的接收参数contextType 为绘制上下文的类型,类型参数有:
    1. 2d:建立一个二维渲染上下文。这种情况可以用 CanvasRenderingContext2D()来替换 getContext('2d')。
    1. webgl(或 experimental-webgl): 创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 1(OpenGL ES 2.0)的浏览器上可用。
    1. webgl2(或 experimental-webgl2):创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0)的浏览器上可用。
    1. bitmaprenderer:创建一个只提供将 canvas 内容替换为指定 ImageBitmap 功能的 ImageBitmapRenderingContext。
contextAttributes 为绘制上下文的属性,这些属性相对比较多
2D 类型的参数有:

(1)、alpha 它的值为 Boolean 类型,如果设置为 false, 浏览器将认 Canvas 背景总是不透明的,这样可以做到一些性能提效。

(2)、willReadFrequently,值也为 Boolean 类型,用于表明是否要重复操作,频繁调用 getImageData()方法时能节省内存,但是仅 Gecko 内核浏览器支持

(3)、storage 用于表明使用哪种方式存储,默认值 persisten,表示持久化存储。

3D 类型的参数有:

(1)、alpha 值为 Boolean 类型,指示画布是否包含 alpha 缓冲区。 (2)、antialias 值为 Boolean 类型,指示是否开启抗锯齿。 (3)、depth 值为 Boolean 类型,表示绘图缓冲区的深度缓冲区至少为 16 位。 (4)、failIfMajorPerformanceCaveat 值为 Boolean 类型,指示如果系统性能较低,是否创建上下文。 (5)、powerPreference:对用户代理的提示,指示 GPU 的哪种配置适合 WebGL 上下文。可能的值是: default: 自动选择模式,自动决定哪种 GPU 配置最合适,为默认值。 high-performance: 高性能模式,优先考虑渲染性能而不是功耗。 low-power: 节能模式,优先考虑节能而不是渲染性能。 (6)、premultipliedAlpha 值为 Boolean 类型,表示页面合成器将假定绘图缓冲区包含具有预乘 alpha 的颜色。 (7)、preserveDrawingBuffer 值为 Boolean 类型,如果值为 true,则不会清除缓冲区并保留其值,直到被清除或被使用者覆盖。 (8)、stencil 值为 Boolean 类型,表示绘图缓冲区具有至少 8 位的模板缓冲区。

二、绘制形状

当前浏览器不支持canvas元素,请升级或更换浏览器!

1. 绘制直线和三角形

TIP

  1. moveTo(x,y): 设置初始位置,参数为初始位置xy的坐标点
  2. lineTo(x,y): 绘制一条从初始位置到指定位置的直线,参数为指定位置xy的坐标点
  3. stroke(): 通过线条来绘制图形轮廓

2. 矩形

TIP

x 和 y 是矩形的起点坐标,width 和 height 是矩形的宽高

  1. strokeRect(x, y, width, height) 绘制一个矩形的边框
  2. fillRect(x, y, width, height) 绘制一个填充的矩形
  3. clearRect(x, y, width, height) 清除指定矩形区域,让清除部分完全透明。

3. 圆弧和圆

  1. arc(x, y, radius, startAngle, endAngle, anticlockwise)。x 和 Y 为圆心的坐标,radius 为半径,startAngle 为圆弧或圆的开始位置,endAngle 为圆弧或圆的结束位置,anticlockwise 是绘制的方向(不写默认为 false,从顺时针方向)。

  2. 在画弧的时候,arc()函数中角的单位是弧度而不是角度。角度换算为弧度的表达式为:弧度=(Math.PI/180)*角度。

椭圆

  1. ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
  • x、y:椭圆的圆心位置
  • radiusX、radiusY:x 轴和 y 轴的半径
  • rotation:椭圆的旋转角度,以弧度表示
  • startAngle:开始绘制点
  • endAngle:结束绘制点
  • anticlockwise:绘制的方向(默认顺时针),可选参数。

4. 开启路径(beginPath),闭合路径(closePath())

TIP

  1. 新建一条路径,生成之后,图形绘制命令被指向到路径上。

  2. 闭合路径之后图形绘制命令又重新指向到上下文中,关闭路径其实并不是必须的,对于新路径其实每次都开启新路径就 ok。

5. fill

TIP

  1. stroke方法是通过线条来绘制图形轮廓,
  2. fill方法则是通过填充路径的内容区域生成实心的图形。

6. 贝塞尔曲线

TIP

二次贝塞尔曲线

  1. quadraticCurveTo(cp1x, cp1y, x, y),其中 cp1x 和 cp1y 为一个控制点,x 和 y 为结束点。

三次贝塞尔曲线

  1. ctx.bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y),其中 cp1x 和 cp1y 为一个控制点,cp2x 和 cp2y 为第二个控制点,x 和 y 为结束点。

三、 绘制样式

1. 线条的样式

TIP

  1. lineWidth 设置当前绘线的粗细。属性值必须为正数。默认值是 1.0。
  2. lineCap 设置线段端点显示的样子。可选值为:butt,round 和 square。默认是 butt。
  3. lineJoin 该属性可以设置两线段连接处所显示的样子。可选值为:round, bevel 和 miter。默认是 miter。
  4. miterLimit 限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。 线段之间夹角比较大时,交点不会太远,但随着夹角变小,交点距离会呈指数级增大。 如果交点距离大于 miterLimit 值,连接效果会变成了 lineJoin = bevel 的效果。
  5. setLineDash 可以设置当前虚线样式。设置奇数,setLineDash 会复制一份数组补全为偶数
  6. getLineDash 则是返回当前虚线设置的样式,长度为非负偶数的数组。
  7. lineDashOffset 设置虚线样式的起始偏移量。
+ + \ No newline at end of file diff --git a/pages/css/cssDemo.html b/pages/css/cssDemo.html index c74cad9..75e3ea7 100644 --- a/pages/css/cssDemo.html +++ b/pages/css/cssDemo.html @@ -5,23 +5,23 @@ 哑巴湖大水怪 | 我的网站 - - - - + + + + -
Skip to content
目录

css 渐变函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。

1. linear-gradient 线性渐变

linear-gradient(角度,颜色 占比,颜色 占比,)

  1. 角度:to top(0deg),从下往上,如果是45deg想象为在 Y 轴上下各有一个点,在 45deg 时,Y 轴上方的点带着 0deg 时那个背景色绕 Y 轴 顺时针旋转了 45deg,旋转角度为0deg与 Y 轴的的角度(自己理解)
  2. 渐变到的范围:linear-gradient()如果所有点和长度都使用固定单位(而不是相对于 background-size 的值指定的百分比或关键字),则渐变背景不受 background-size 的影响;
  3. 渐变位置: background-position可以在重复时定义每个渐变的位置;
  4. 渐变的颜色可以是透明色;
  5. 渐变可以是从一种颜色直接到另外一种颜色,不需要有过渡状态;
  6. 渐变是可以叠加多层的;
  7. 利用 repeating-linear-gradient 节省代码,实现片段的重复。
1. 背景色渐变画三角形
2. 背景色渐变画内切四边形
3. repeating-linear-gradient 画进度条

2. radial-gradient 径向渐变

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient

TIP

  1. 语法
js
/* 在容器中心的渐变,从红色开始,变成蓝色,最后变成绿色 */
+    
Skip to content
目录

css 渐变函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。

1. linear-gradient 线性渐变

linear-gradient(角度,颜色 占比,颜色 占比,)

  1. 角度:to top(0deg),从下往上,如果是45deg想象为在 Y 轴上下各有一个点,在 45deg 时,Y 轴上方的点带着 0deg 时那个背景色绕 Y 轴 顺时针旋转了 45deg,旋转角度为0deg与 Y 轴的的角度(自己理解)
  2. 渐变到的范围:linear-gradient()如果所有点和长度都使用固定单位(而不是相对于 background-size 的值指定的百分比或关键字),则渐变背景不受 background-size 的影响;
  3. 渐变位置: background-position可以在重复时定义每个渐变的位置;
  4. 渐变的颜色可以是透明色;
  5. 渐变可以是从一种颜色直接到另外一种颜色,不需要有过渡状态;
  6. 渐变是可以叠加多层的;
  7. 利用 repeating-linear-gradient 节省代码,实现片段的重复。
1. 背景色渐变画三角形
2. 背景色渐变画内切四边形
3. repeating-linear-gradient 画进度条

2. radial-gradient 径向渐变

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient

TIP

  1. 语法
js
/* 在容器中心的渐变,从红色开始,变成蓝色,最后变成绿色 */
 radial-gradient(circle at center, red 0, blue, green 100%)
 
  1. drop-shadow(偏移距离,阴影的模糊半径,阴影的扩展半径,颜色)
css
filter: drop-shadow(-7px 4px 3px #333);
 
1. 在衔接处,适当留出一些渐变空间,消除锯齿
2. 实现优惠券
99
99

3. conic-gradient角向渐变

注意点

  1. 起始点是图形中心;
  2. 默认渐变角度 0deg 是从上方垂直于圆心的;
  3. 渐变方向以顺时针方向绕中心实现。
  4. 改变起始点和渐变角度: background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen);,改变圆心为50px 50px,角度为 270deg
  5. 先定义的颜色层叠在后定义的颜色上
  • 0 ~ 30% 的区间使用 red
  • 0 ~ 60% 的区间使用 green
  • 0 ~ 100% 的区间使用 blue
  • 这里也可以使用角度
css
.demo {
   background: conic-gradient(red 0 30%, green 0 60%, blue 0 100%);
 }
-
hsl() 色相(h),饱和度(s),亮度(l)
  1. 色相(h):就是颜色
  2. 饱和度(s):指色彩的纯度,越高色彩越纯,越低颜色变灰,取值 0-100%
  3. 明度(v),亮度(l):取值 0-100%
1. 角向渐变实现色相环
2. 角向渐变实现
3. 角向渐变配合background-size实现贴图
4. 重复角向渐变 repeating-conic-gradient
- - +
hsl() 色相(h),饱和度(s),亮度(l)
  1. 色相(h):就是颜色
  2. 饱和度(s):指色彩的纯度,越高色彩越纯,越低颜色变灰,取值 0-100%
  3. 明度(v),亮度(l):取值 0-100%
1. 角向渐变实现色相环
2. 角向渐变实现
3. 角向渐变配合background-size实现贴图
4. 重复角向渐变 repeating-conic-gradient
+ + \ No newline at end of file diff --git a/pages/git/githubQuestion/index.html b/pages/git/githubQuestion/index.html index 86862af..e32ea09 100644 --- a/pages/git/githubQuestion/index.html +++ b/pages/git/githubQuestion/index.html @@ -5,15 +5,15 @@ gitHub 遇到的问题 | 我的网站 - - - - + + + + -
Skip to content
目录

gitHub 遇到的问题

1. 常用指令

1.1 ssh -T git@github.com 验证是否与 gitHub 的连接, 连接成功: Hi yourName! You've successfully authenticated, but GitHub does not provide shell access.

1.2 ssh-keygen 生成 SSH key 文件,如果有 git 账号占了 ~/.ssh/id_rsa名称,可以自己改成.ssh/id_rsa.github 文件名称

1.3 出现 gitHub 说密钥文件权限不对问题时,可以使用 chmod 700 .ssh/id_rsa修改权限,权限值 700,默认 600

1.4 本地分支

git branch:查看所有分支

git checkout -b main:创建 main 分支并切换到该分支

git branch -d test:删除 test 分支,删除该分支前需要先切换到其他分支

注意:如果分支包含未合并的更改和未推送的提交,则该 -d 标志将不允许删除本地分支。此时,如果你确定了不想要分支的内容,可以使用 -D 替换 -d 来强制删除此分支

1.5 远程分支

git branch -r:查看远程上的所有分支

git push -u origin test:将代码推送到远程 test 分支,没有的话就会创建 test 分支

git push <remote_name> -d <remote_branch>:删除远程分支,git push origin -d test:删除远程 test 分支

git remote -v: 作用是显示所有远程仓库

git remote show <remote_name>:查看远程分支和本地的对应关系 git remote show origin

git remote add [name] [url]: 作用是添加远程版本库,name 是自己取的仓库的名字 url 是地址,新建仓库下面提示都有,直接复制就行

git remote rm name: 删除远程仓库

git remote rename old_name new_name: 修改仓库名

2.出现git@github.com: Permission denied (publickey)错误时解决办法

第一步:生成 SSH key

第二步:输入命令:ssh -v git@github.com

第三步:输入命令:ssh-agent -s

第四步:输入命令:ssh-add ~/.ssh/id_rsa,文件路径是~/.ssh/id_rsa,如果自己生成时保存的为~/.ssh/id_rsa.github,就改成这个

第五步:在 gitHub 上添加一个 SSH key,根据路径找到以.pub 结尾的文件,将公钥文件复制到 Github 中

3. git push 时需要输入账号密码(不使用 https 上传)

第一步git remote -v 查看当前链接的远程仓库地址

js
$ git remote -v
+    
Skip to content
目录

gitHub 遇到的问题

1. 常用指令

1.1 ssh -T git@github.com 验证是否与 gitHub 的连接, 连接成功: Hi yourName! You've successfully authenticated, but GitHub does not provide shell access.

1.2 ssh-keygen 生成 SSH key 文件,如果有 git 账号占了 ~/.ssh/id_rsa名称,可以自己改成.ssh/id_rsa.github 文件名称

1.3 出现 gitHub 说密钥文件权限不对问题时,可以使用 chmod 700 .ssh/id_rsa修改权限,权限值 700,默认 600

1.4 本地分支

git branch:查看所有分支

git checkout -b main:创建 main 分支并切换到该分支

git branch -d test:删除 test 分支,删除该分支前需要先切换到其他分支

注意:如果分支包含未合并的更改和未推送的提交,则该 -d 标志将不允许删除本地分支。此时,如果你确定了不想要分支的内容,可以使用 -D 替换 -d 来强制删除此分支

1.5 远程分支

git branch -r:查看远程上的所有分支

git push -u origin test:将代码推送到远程 test 分支,没有的话就会创建 test 分支

git push <remote_name> -d <remote_branch>:删除远程分支,git push origin -d test:删除远程 test 分支

git remote -v: 作用是显示所有远程仓库

git remote show <remote_name>:查看远程分支和本地的对应关系 git remote show origin

git remote add [name] [url]: 作用是添加远程版本库,name 是自己取的仓库的名字 url 是地址,新建仓库下面提示都有,直接复制就行

git remote rm name: 删除远程仓库

git remote rename old_name new_name: 修改仓库名

2.出现git@github.com: Permission denied (publickey)错误时解决办法

第一步:生成 SSH key

第二步:输入命令:ssh -v git@github.com

第三步:输入命令:ssh-agent -s

第四步:输入命令:ssh-add ~/.ssh/id_rsa,文件路径是~/.ssh/id_rsa,如果自己生成时保存的为~/.ssh/id_rsa.github,就改成这个

第五步:在 gitHub 上添加一个 SSH key,根据路径找到以.pub 结尾的文件,将公钥文件复制到 Github 中

3. git push 时需要输入账号密码(不使用 https 上传)

第一步git remote -v 查看当前链接的远程仓库地址

js
$ git remote -v
 origin  https://github.com/tianqixin/runoob-git-test (fetch)
 origin  https://github.com/tianqixin/runoob-git-test (push)
 

第二步git remote set-url origin remote's URL 修改当前链接的远程仓库形式

js
$ git remote set-url origin git@github.com:tianqixin/runoob-git-test.git
@@ -21,9 +21,9 @@
 git add .
 git commit -m '注释'
 git push
-
- - +
+ + \ No newline at end of file diff --git a/pages/index/index.html b/pages/index/index.html index 34a46e6..897e5eb 100644 --- a/pages/index/index.html +++ b/pages/index/index.html @@ -5,15 +5,15 @@ 欢迎来到哑巴湖大水怪的世界 👏 | 我的网站 - - - - + + + + -
Skip to content
目录

欢迎来到哑巴湖大水怪的世界 👏

vitePress 官网

Emoji 🎉

1. 虚拟滚动插件:

比如 vue-virtual-scrollervue-virtual-scroll-listreact-tiny-virtual-listreact-virtualized

vue-virtual-scroller 的使用

js
// 安装插件
+    
Skip to content
目录

欢迎来到哑巴湖大水怪的世界 👏

vitePress 官网

Emoji 🎉

1. 虚拟滚动插件:

比如 vue-virtual-scrollervue-virtual-scroll-listreact-tiny-virtual-listreact-virtualized

vue-virtual-scroller 的使用

js
// 安装插件
 npm install vue-virtual-scroller
 
 // main.js
@@ -33,9 +33,9 @@
       <div class="user"> {{ item.name }} </div>
   </RecycleScroller>
 </template>
-

该插件主要有 RecycleScroller.vueDynamicScroller.vue 这两个组件,其中 RecycleScroller 需要 item 的高度为静态的,也就是列表每个 item 的高度都是一致的,而 DynamicScroller 可以兼容 item 的高度为动态的情况

2. vueUse

3. 精进 JavaScript | 这些手写你都会吗 ?

4. 前端知识体系、前端监控、性能优化、原理探索、面经等

5. 珠峰:史上最全最专业的 Vue.js 面试题训练营

6. 破解前端面试(80% 应聘者不及格系列):从闭包说起

7. es5/6/7/...

image.png

8.css

image.png

9. ts

image.png

10. vue2/3

image.png

11. react

image.png

12. node

image.png

13. 浏览器

image.png

14. 网络

image.png

15. 性能优化

image.png

16. 工程化/架构/设计模式

17. flutter/rn/Electron

18. 面试经验

19. 安全

20. 开源项目

21. 部署/监控

22. 团队规则

23. 算法

24. 杂谈

- - +

该插件主要有 RecycleScroller.vueDynamicScroller.vue 这两个组件,其中 RecycleScroller 需要 item 的高度为静态的,也就是列表每个 item 的高度都是一致的,而 DynamicScroller 可以兼容 item 的高度为动态的情况

2. vueUse

3. 精进 JavaScript | 这些手写你都会吗 ?

4. 前端知识体系、前端监控、性能优化、原理探索、面经等

5. 珠峰:史上最全最专业的 Vue.js 面试题训练营

6. 破解前端面试(80% 应聘者不及格系列):从闭包说起

7. es5/6/7/...

image.png

8.css

image.png

9. ts

image.png

10. vue2/3

image.png

11. react

image.png

12. node

image.png

13. 浏览器

image.png

14. 网络

image.png

15. 性能优化

image.png

16. 工程化/架构/设计模式

17. flutter/rn/Electron

18. 面试经验

19. 安全

20. 开源项目

21. 部署/监控

22. 团队规则

23. 算法

24. 杂谈

+ + \ No newline at end of file diff --git a/pages/interviews/browser.html b/pages/interviews/browser.html index c35b4f5..cd399c7 100644 --- a/pages/interviews/browser.html +++ b/pages/interviews/browser.html @@ -5,17 +5,17 @@ 浏览器的通信能力 | 我的网站 - - - - + + + + -
Skip to content
目录

浏览器的通信能力

用户代理

浏览器可以代替用户完成 http 请求,代替用户解析响应结果,所以我们称之为:

用户代理 user agent

在网络层面,对于前端开发者,必须要知道浏览器拥有的两大核心能力:

  • 自动发出请求的能力
  • 自动解析响应的能力

自动发出请求的能力

当一些事情发生的时候,浏览器会代替用户自动发出 http 请求,常见的包括:

  1. 用户在地址栏输入了一个 url 地址,并按下了回车

    浏览器会自动解析 URL,并发出一个GET请求,同时抛弃当前页面。

  2. 当用户点击了页面中的 a 元素

    浏览器会拿到 a 元素的 href 地址,并发出一个GET请求,同时抛弃当前页面。

  3. 当用户点击了提交按钮<button type="submit">...</button>

    浏览器会获取按钮所在的<form>元素,拿到它的action属性地址,同时拿到它method属性值,然后把表单中的数据组织到请求体中,发出指定方法的请求,同时抛弃当前页面。

    这种方式的提交现在越来越少见了

  4. 当解析 HTML 时遇到了<link> <img> <script> <video> <audio>等元素

    浏览器会拿到对应的地址,发出GET请求

  5. 当用户点击了刷新

    浏览器会拿到当前页面的地址,以及当前页面的请求方法,重新发一次请求,同时抛弃当前页面。

浏览器在发出请求时,会自动附带一些请求头

==重点来了==

从古至今,浏览器都有一个约定:

当发送 GET 请求时,浏览器不会附带请求体

这个约定深刻的影响着后续的前后端各种应用,现在,几乎所有人都在潜意识中认同了这一点,无论是前端开发人员还是后端开发人员。

由于前后端程序的默认行为,逐步造成了 GET 和 POST 的各种差异:

  1. 浏览器在发送 GET 请求时,不会附带请求体

  2. GET 请求的传递信息量有限,适合传递少量数据;POST 请求的传递信息量是没有限制的,适合传输大量数据。

  3. GET 请求只能传递 ASCII 数据,遇到非 ASCII 数据需要进行编码;POST 请求没有限制

  4. 大部分 GET 请求传递的数据都附带在 path 参数中,能够通过分享地址完整的重现页面,但同时也暴露了数据,若有敏感数据传递,不应该使用 GET 请求,至少不应该放到 path 中

  5. POST 不会被保存到浏览器的历史记录中

  6. 刷新页面时,若当前的页面是通过 POST 请求得到的,则浏览器会提示用户是否重新提交。若是 GET 请求得到的页面则没有提示。

自动解析响应的能力

浏览器不仅能发送请求,还能够针对服务器的各种响应结果做出不同的自动处理

常见的处理有:

  1. 识别响应码

    浏览器能够自动识别响应码,当出现一些特殊的响应码时浏览器会自动完成处理,比如301、302

  2. 根据响应结果做不同的处理

    浏览器能够自动分析响应头中的Content-Type,根据不同的值进行不同处理,比如:

    • text/plain: 普通的纯文本,浏览器通常会将响应体原封不动的显示到页面上

    • text/html:html 文档,浏览器通常会将响应体作为页面进行渲染

    • text/javascriptapplication/javascript:js 代码,浏览器通常会使用 JS 执行引擎将它解析执行

    • text/css:css 代码,浏览器会将它视为样式

    • image/jpeg:浏览器会将它视为 jpg 图片

    • application/octet-stream:二进制数据,会触发浏览器下载功能

    • attachment:附件,会触发下载功能

      该值和其他值不同,应放到Content-Disposition头中。

基本流程

访问:https://oss.duyiedu.com/test/index.html

image-20220428165629557

AJAX

浏览器本身就具备网络通信的能力,但在早期,浏览器并没有把这个能力开放给 JS。

最早是微软在 IE 浏览器中把这一能力向 JS 开放,让 JS 可以在代码中实现发送请求,并不会刷新页面,这项技术在 2005 年被正式命名为 AJAX(Asynchronous Javascript And XML)

AJAX 就是指在 web 应用程序中异步向服务器发送请求。

它的实现方式有两种,XMLHttpRequest 简称XHRFetch

以下是两者的对比

功能点XHRFetch
基本的请求能力
基本的获取响应能力
监控请求进度
监控响应进度
Service Worker 中是否可用
控制 cookie 的携带
控制重定向
请求取消
自定义 referrer
API 风格EventPromise
活跃度停止更新不断更新
- - +
Skip to content
目录

浏览器的通信能力

用户代理

浏览器可以代替用户完成 http 请求,代替用户解析响应结果,所以我们称之为:

用户代理 user agent

在网络层面,对于前端开发者,必须要知道浏览器拥有的两大核心能力:

  • 自动发出请求的能力
  • 自动解析响应的能力

自动发出请求的能力

当一些事情发生的时候,浏览器会代替用户自动发出 http 请求,常见的包括:

  1. 用户在地址栏输入了一个 url 地址,并按下了回车

    浏览器会自动解析 URL,并发出一个GET请求,同时抛弃当前页面。

  2. 当用户点击了页面中的 a 元素

    浏览器会拿到 a 元素的 href 地址,并发出一个GET请求,同时抛弃当前页面。

  3. 当用户点击了提交按钮<button type="submit">...</button>

    浏览器会获取按钮所在的<form>元素,拿到它的action属性地址,同时拿到它method属性值,然后把表单中的数据组织到请求体中,发出指定方法的请求,同时抛弃当前页面。

    这种方式的提交现在越来越少见了

  4. 当解析 HTML 时遇到了<link> <img> <script> <video> <audio>等元素

    浏览器会拿到对应的地址,发出GET请求

  5. 当用户点击了刷新

    浏览器会拿到当前页面的地址,以及当前页面的请求方法,重新发一次请求,同时抛弃当前页面。

浏览器在发出请求时,会自动附带一些请求头

==重点来了==

从古至今,浏览器都有一个约定:

当发送 GET 请求时,浏览器不会附带请求体

这个约定深刻的影响着后续的前后端各种应用,现在,几乎所有人都在潜意识中认同了这一点,无论是前端开发人员还是后端开发人员。

由于前后端程序的默认行为,逐步造成了 GET 和 POST 的各种差异:

  1. 浏览器在发送 GET 请求时,不会附带请求体

  2. GET 请求的传递信息量有限,适合传递少量数据;POST 请求的传递信息量是没有限制的,适合传输大量数据。

  3. GET 请求只能传递 ASCII 数据,遇到非 ASCII 数据需要进行编码;POST 请求没有限制

  4. 大部分 GET 请求传递的数据都附带在 path 参数中,能够通过分享地址完整的重现页面,但同时也暴露了数据,若有敏感数据传递,不应该使用 GET 请求,至少不应该放到 path 中

  5. POST 不会被保存到浏览器的历史记录中

  6. 刷新页面时,若当前的页面是通过 POST 请求得到的,则浏览器会提示用户是否重新提交。若是 GET 请求得到的页面则没有提示。

自动解析响应的能力

浏览器不仅能发送请求,还能够针对服务器的各种响应结果做出不同的自动处理

常见的处理有:

  1. 识别响应码

    浏览器能够自动识别响应码,当出现一些特殊的响应码时浏览器会自动完成处理,比如301、302

  2. 根据响应结果做不同的处理

    浏览器能够自动分析响应头中的Content-Type,根据不同的值进行不同处理,比如:

    • text/plain: 普通的纯文本,浏览器通常会将响应体原封不动的显示到页面上

    • text/html:html 文档,浏览器通常会将响应体作为页面进行渲染

    • text/javascriptapplication/javascript:js 代码,浏览器通常会使用 JS 执行引擎将它解析执行

    • text/css:css 代码,浏览器会将它视为样式

    • image/jpeg:浏览器会将它视为 jpg 图片

    • application/octet-stream:二进制数据,会触发浏览器下载功能

    • attachment:附件,会触发下载功能

      该值和其他值不同,应放到Content-Disposition头中。

基本流程

访问:https://oss.duyiedu.com/test/index.html

image-20220428165629557

AJAX

浏览器本身就具备网络通信的能力,但在早期,浏览器并没有把这个能力开放给 JS。

最早是微软在 IE 浏览器中把这一能力向 JS 开放,让 JS 可以在代码中实现发送请求,并不会刷新页面,这项技术在 2005 年被正式命名为 AJAX(Asynchronous Javascript And XML)

AJAX 就是指在 web 应用程序中异步向服务器发送请求。

它的实现方式有两种,XMLHttpRequest 简称XHRFetch

以下是两者的对比

功能点XHRFetch
基本的请求能力
基本的获取响应能力
监控请求进度
监控响应进度
Service Worker 中是否可用
控制 cookie 的携带
控制重定向
请求取消
自定义 referrer
API 风格EventPromise
活跃度停止更新不断更新
+ + \ No newline at end of file diff --git a/pages/interviews/css.html b/pages/interviews/css.html index 5f616ff..124cba0 100644 --- a/pages/interviews/css.html +++ b/pages/interviews/css.html @@ -5,15 +5,15 @@ CSS 面试相关 | 我的网站 - - - - + + + + -
Skip to content
目录

CSS 面试相关

JavaScript 中获取或者修改 CSS 变量
js
// 获取一个 Dom 节点上的 CSS 变量
+    
Skip to content
目录

CSS 面试相关

JavaScript 中获取或者修改 CSS 变量
js
// 获取一个 Dom 节点上的 CSS 变量
 element.style.getPropertyValue("--my-var");
 
 // 获取任意 Dom 节点上的 CSS 变量
@@ -323,9 +323,9 @@
 .test {
   color: blue;
 }
-

image-20220813145652726

因为这里并不涉及到选中 p 元素声明 color 值,而是从父元素上面继承到 color 对应的值,因此这里是谁近就听谁的,初学者往往会产生混淆,又去比较权重,但是这里根本不会涉及到权重比较,因为压根儿就没有选中到 p 元素。

第二个就是哪些属性能够继承?

关于这一点的话,大家可以在 MDN 上面很轻松的查阅到。例如我们以 text-align 为例,如下图所示:

image-20220813150147885

使用默认值

好了,目前走到这一步,如果属性值都还不能确定下来,那么就只能是使用默认值了。

前面我们也说过,一个 HTML 元素要在浏览器中渲染出来,必须具备所有的 CSS 属性值,但是绝大部分我们是不会去设置的,用户代理样式表里面也不会去设置,也无法从继承拿到,因此最终都是用默认值。

- - +

image-20220813145652726

因为这里并不涉及到选中 p 元素声明 color 值,而是从父元素上面继承到 color 对应的值,因此这里是谁近就听谁的,初学者往往会产生混淆,又去比较权重,但是这里根本不会涉及到权重比较,因为压根儿就没有选中到 p 元素。

第二个就是哪些属性能够继承?

关于这一点的话,大家可以在 MDN 上面很轻松的查阅到。例如我们以 text-align 为例,如下图所示:

image-20220813150147885

使用默认值

好了,目前走到这一步,如果属性值都还不能确定下来,那么就只能是使用默认值了。

前面我们也说过,一个 HTML 元素要在浏览器中渲染出来,必须具备所有的 CSS 属性值,但是绝大部分我们是不会去设置的,用户代理样式表里面也不会去设置,也无法从继承拿到,因此最终都是用默认值。

+ + \ No newline at end of file diff --git a/pages/interviews/eventLoop.html b/pages/interviews/eventLoop.html index 9112519..d1fc4b9 100644 --- a/pages/interviews/eventLoop.html +++ b/pages/interviews/eventLoop.html @@ -5,17 +5,17 @@ 事件循环 | 我的网站 - - - - + + + + -
Skip to content
目录

事件循环

1. 单线程是异步产生的原因

2. 事件循环是异步的实现方式

3. 微队列优先级最高

4. 一个进程至少有一个线程

5. 浏览器是一个多进程多线程的应用程序

1. 阐述一下 js 的事件循环

事件循环又叫消息循环,是浏览器渲染主线程的工作方式

在 chrome 源码中,他开启一个不会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾就行

过去把消息队列简单理解为宏队列和微队列,这种说法目前无法满足复杂的浏览器环境,取而代之的是一种更加灵活多变的处理方式

根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列

不同队列有不同的优先级,在一次事件循环中,由浏览器自行决定那个队列的任务,

但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行

回答: 消息(事件)循环是浏览器的渲染主线程的工作方式,每次循环从消息队列中取出第一个任务执行,执行完后会查看微队列中有无任务,有任务会先将微任务队列进行任务优先调度执行完成,在此期间产生的「微任务」,放入「微任务队列」末尾,再进行下一次循环

2. 如何理解 js 的异步:

Js 是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,渲染主线程只有一个

而渲染主线程承担着诸多的工作,渲染页面,执行 js都在其中运行,

如果使用同步的方式就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行,这样一来,一方面会导致繁忙的主线程白白消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象

所以浏览器采用异步的方式来避免,具体做法是当某些任务发生时,比如计时器,网络,事件监听

主线程将任务交给其他线程处理,自身立即结束任务的执行,转而执行后续代码,

当其他线程完成时,将事先传递的回调函数包装成任务(简单理解就是函数),加入到消息队列的末尾排队,等待主线程调度执行,

在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了但线程的流畅运行

3. Js 中的计时器能做到精确计时吗?为什么?

不能,因为

1.计算机没有原子钟,无法做到精确计时

2.操作系统的计时函数本身就有少量误差,由于 js 的计时器最终调用的是操作系统的函数,也就携带了一些偏差

3.按照 W3C 的标准,浏览器实现计时器时,如果嵌套的层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒是又带来了偏差

4,受事件循环的影响,计时器的回调函数在能在主线程空闲时运行,因此又来了偏差

4. 任务有优先级吗?

任务没有优先级,在消息队列中先进先出

消息队列是有优先级的

根据 W3C 的最新解释:

随着浏览器的复杂度急剧提升,W3C 不再使用宏队列的说法

- - +
Skip to content
目录

事件循环

1. 单线程是异步产生的原因

2. 事件循环是异步的实现方式

3. 微队列优先级最高

4. 一个进程至少有一个线程

5. 浏览器是一个多进程多线程的应用程序

1. 阐述一下 js 的事件循环

事件循环又叫消息循环,是浏览器渲染主线程的工作方式

在 chrome 源码中,他开启一个不会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾就行

过去把消息队列简单理解为宏队列和微队列,这种说法目前无法满足复杂的浏览器环境,取而代之的是一种更加灵活多变的处理方式

根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列

不同队列有不同的优先级,在一次事件循环中,由浏览器自行决定那个队列的任务,

但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行

回答: 消息(事件)循环是浏览器的渲染主线程的工作方式,每次循环从消息队列中取出第一个任务执行,执行完后会查看微队列中有无任务,有任务会先将微任务队列进行任务优先调度执行完成,在此期间产生的「微任务」,放入「微任务队列」末尾,再进行下一次循环

2. 如何理解 js 的异步:

Js 是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,渲染主线程只有一个

而渲染主线程承担着诸多的工作,渲染页面,执行 js都在其中运行,

如果使用同步的方式就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行,这样一来,一方面会导致繁忙的主线程白白消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象

所以浏览器采用异步的方式来避免,具体做法是当某些任务发生时,比如计时器,网络,事件监听

主线程将任务交给其他线程处理,自身立即结束任务的执行,转而执行后续代码,

当其他线程完成时,将事先传递的回调函数包装成任务(简单理解就是函数),加入到消息队列的末尾排队,等待主线程调度执行,

在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了但线程的流畅运行

3. Js 中的计时器能做到精确计时吗?为什么?

不能,因为

1.计算机没有原子钟,无法做到精确计时

2.操作系统的计时函数本身就有少量误差,由于 js 的计时器最终调用的是操作系统的函数,也就携带了一些偏差

3.按照 W3C 的标准,浏览器实现计时器时,如果嵌套的层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒是又带来了偏差

4,受事件循环的影响,计时器的回调函数在能在主线程空闲时运行,因此又来了偏差

4. 任务有优先级吗?

任务没有优先级,在消息队列中先进先出

消息队列是有优先级的

根据 W3C 的最新解释:

随着浏览器的复杂度急剧提升,W3C 不再使用宏队列的说法

+ + \ No newline at end of file diff --git a/pages/interviews/git.html b/pages/interviews/git.html index 1653648..d094f29 100644 --- a/pages/interviews/git.html +++ b/pages/interviews/git.html @@ -5,17 +5,17 @@ GIT 相关 | 我的网站 - - - - + + + + -
Skip to content
目录

GIT 相关

1. 你们的 Git 工作流是什么样的?

每个公司采用的 Git 工作流都可能会有差别,有的比较规范,有的比较随意。在这里介绍一个名为 GitFlow 的 git 标准操作流程。

在 GitFlow 标准下,我们的 git 仓库需要包含以下几个关键分支:

  • master:主分支
  • develop:主开发分⽀。包含确定即将发布的代码
  • feature:新功能分⽀。⼀个新功能对应⼀个分⽀
  • release:发布分⽀。发布时⽤的分⽀,⼀般测试阶段发现的 bug 在这个分⽀进⾏修复
  • hotfix:热补丁分支。用于修改在线上版本中发现的严重紧急 bug

GitFlow 的主要优点

  1. 支持并⾏开发

因为每个新功能都会建⽴⼀个新的 feature 分⽀,从⽽和其他已经完成的功能隔离开,且当只有在新功能完成开发的情况下,其对应的 feature 分⽀才会被合并到主开发分⽀(develop 分支)。

另外,如果你正在开发某个功能的同时⼜有⼀个新功能需要开始开发,那么你只需把当前 feature 的代码提交后,新建另外⼀个 feature 分⽀即可开发新功能了。

你也可以随时切回之前的其他 feature 分⽀继续完成该功能的开发。

  • 协作开发

因为每个 feature 分⽀上改动的代码都只对该 feature 对应的功能生效,所以不同 feature 分支上的代码在开发时不会互相影响,大家可以相安无事的开发自己负责的功能。

同时我们可以根据分支的名称,很容易知道每个⼈都在做什么功能。

  • 发布阶段

当⼀个新 feature 开发完成时,它会被合并到 develop 分⽀,这就意味着 develop 分支上包含了所有已经开发完成的功能。

因此,在开发新的 feature 时,我们只需从 develop 分⽀来创建新的分⽀,即可在新的 feature 分支中包含所有已完成的最新功能。

  • ⽀持紧急修复

hotfix 分⽀是从某个已经发布的 Tag 上创建出来来,用于紧急修复 Bug。

该紧急修复只影响这个已经发布的 Tag,⽽不会影响你正在开发的其他新 feature 。

注意点

  1. feature 分⽀都是从 develop 分⽀上创建的,开发完成后再合并到 develop 分⽀上,等待发布

  2. 当需要发布时,我们要从 develop 分⽀上创建⼀个 release 分⽀,然后该 release 分⽀会发布到测试环境进⾏测试。如果发现问题的话,就会直接在该分⽀上进⾏修复。所有问题修复之前,会不停重复 发布 > 测试 > 修复 > 重新发布 > 重新测试 流程。 发布结束,该 release 分⽀会被合并到 develop 以及 master 分⽀,从⽽保证不会有代码丢失

  3. master 分⽀只跟踪已经发布的代码,合并到 master 上的 commit 只能来⾃ release 分⽀和 hotfix 分⽀

  4. hotfix 分⽀的作⽤是紧急修复⼀些 Bug,它们都是从 master 分⽀上的某个 Tag 建⽴,修复结束后再会被合并到 develop 和 master 分⽀上

参考文章:Git 工作流

2. Git 的 rebase 和 merge 的区别是什么?

git rebasegit merge 两个命令都⽤于从⼀个分⽀获取内容并合并到当前分⽀。

以一个 feature/todo 分⽀合并到 master主分⽀为例,我们来看一下分别⽤ rebasemerge 会有什么不同。

使用 Merge

image-20210222132936016

merge 会⾃动创建⼀个新的 commit, 如果合并时遇到冲突的话,只需要修改后重新 commit

  • 优点:能记录真实的 commit 情况,包括每个分⽀的详情

  • 缺点:由于每次 merge 会⾃动产⽣⼀个 merge commit,因此在使⽤⼀些可视化的 git 工具时会看到这些自动产生的 commit,这些 commit 对于程序员来说没有什么特别的意义,反而会影响阅读

使用 Rebase

image-20210222133524146

rebase 会合并之前的 commit 历史。

  • 优点:可以得到更简洁的提交历史,去掉了 merge commit

  • 缺点:因为合并而产生的代码问题,就不容易定位,因为会重写提交历史信息

建议

  • 当需要保留详细的合并信息时,建议使⽤ git merge,特别是需要将分⽀合并进 master 分⽀时

  • 当发现⾃⼰修改某个功能时提交比较频繁,并觉得过多的提交信息对自己来说没有必要,那么可尝试使用 git rebase

- - +
Skip to content
目录

GIT 相关

1. 你们的 Git 工作流是什么样的?

每个公司采用的 Git 工作流都可能会有差别,有的比较规范,有的比较随意。在这里介绍一个名为 GitFlow 的 git 标准操作流程。

在 GitFlow 标准下,我们的 git 仓库需要包含以下几个关键分支:

  • master:主分支
  • develop:主开发分⽀。包含确定即将发布的代码
  • feature:新功能分⽀。⼀个新功能对应⼀个分⽀
  • release:发布分⽀。发布时⽤的分⽀,⼀般测试阶段发现的 bug 在这个分⽀进⾏修复
  • hotfix:热补丁分支。用于修改在线上版本中发现的严重紧急 bug

GitFlow 的主要优点

  1. 支持并⾏开发

因为每个新功能都会建⽴⼀个新的 feature 分⽀,从⽽和其他已经完成的功能隔离开,且当只有在新功能完成开发的情况下,其对应的 feature 分⽀才会被合并到主开发分⽀(develop 分支)。

另外,如果你正在开发某个功能的同时⼜有⼀个新功能需要开始开发,那么你只需把当前 feature 的代码提交后,新建另外⼀个 feature 分⽀即可开发新功能了。

你也可以随时切回之前的其他 feature 分⽀继续完成该功能的开发。

  • 协作开发

因为每个 feature 分⽀上改动的代码都只对该 feature 对应的功能生效,所以不同 feature 分支上的代码在开发时不会互相影响,大家可以相安无事的开发自己负责的功能。

同时我们可以根据分支的名称,很容易知道每个⼈都在做什么功能。

  • 发布阶段

当⼀个新 feature 开发完成时,它会被合并到 develop 分⽀,这就意味着 develop 分支上包含了所有已经开发完成的功能。

因此,在开发新的 feature 时,我们只需从 develop 分⽀来创建新的分⽀,即可在新的 feature 分支中包含所有已完成的最新功能。

  • ⽀持紧急修复

hotfix 分⽀是从某个已经发布的 Tag 上创建出来来,用于紧急修复 Bug。

该紧急修复只影响这个已经发布的 Tag,⽽不会影响你正在开发的其他新 feature 。

注意点

  1. feature 分⽀都是从 develop 分⽀上创建的,开发完成后再合并到 develop 分⽀上,等待发布

  2. 当需要发布时,我们要从 develop 分⽀上创建⼀个 release 分⽀,然后该 release 分⽀会发布到测试环境进⾏测试。如果发现问题的话,就会直接在该分⽀上进⾏修复。所有问题修复之前,会不停重复 发布 > 测试 > 修复 > 重新发布 > 重新测试 流程。 发布结束,该 release 分⽀会被合并到 develop 以及 master 分⽀,从⽽保证不会有代码丢失

  3. master 分⽀只跟踪已经发布的代码,合并到 master 上的 commit 只能来⾃ release 分⽀和 hotfix 分⽀

  4. hotfix 分⽀的作⽤是紧急修复⼀些 Bug,它们都是从 master 分⽀上的某个 Tag 建⽴,修复结束后再会被合并到 develop 和 master 分⽀上

参考文章:Git 工作流

2. Git 的 rebase 和 merge 的区别是什么?

git rebasegit merge 两个命令都⽤于从⼀个分⽀获取内容并合并到当前分⽀。

以一个 feature/todo 分⽀合并到 master主分⽀为例,我们来看一下分别⽤ rebasemerge 会有什么不同。

使用 Merge

image-20210222132936016

merge 会⾃动创建⼀个新的 commit, 如果合并时遇到冲突的话,只需要修改后重新 commit

  • 优点:能记录真实的 commit 情况,包括每个分⽀的详情

  • 缺点:由于每次 merge 会⾃动产⽣⼀个 merge commit,因此在使⽤⼀些可视化的 git 工具时会看到这些自动产生的 commit,这些 commit 对于程序员来说没有什么特别的意义,反而会影响阅读

使用 Rebase

image-20210222133524146

rebase 会合并之前的 commit 历史。

  • 优点:可以得到更简洁的提交历史,去掉了 merge commit

  • 缺点:因为合并而产生的代码问题,就不容易定位,因为会重写提交历史信息

建议

  • 当需要保留详细的合并信息时,建议使⽤ git merge,特别是需要将分⽀合并进 master 分⽀时

  • 当发现⾃⼰修改某个功能时提交比较频繁,并觉得过多的提交信息对自己来说没有必要,那么可尝试使用 git rebase

+ + \ No newline at end of file diff --git a/pages/interviews/handwriteFn.html b/pages/interviews/handwriteFn.html index cbf114a..8fc5239 100644 --- a/pages/interviews/handwriteFn.html +++ b/pages/interviews/handwriteFn.html @@ -5,15 +5,15 @@ 常见手写函数 | 我的网站 - - - - + + + + -
Skip to content
目录

常见手写函数

这些手写你都会吗

1. 手动实现Array.prototype.map方法

js
// 第一种方式
+    
Skip to content
目录

常见手写函数

这些手写你都会吗

1. 手动实现Array.prototype.map方法

js
// 第一种方式
 function map(arr, callBack) {
   if (!Array.isArray(arr) || !arr.length || typeof callBack !== "function") {
     return [];
@@ -286,82 +286,6 @@
   let a, b;
   a = b = 0;
 }
-

this 指向

  • 词法作用域在词法分析阶段就被确定了(写代码的时候就确定了),js 是解释型语言,没有编译时,有预编译阶段

  • java 是编译型语言:java 的代码就是被编译为 .class 文件才能运行,这个编译过程就是编译时运行 .class 文件就是运行时。

  • 箭头函数本身没有this,因为基于闭包(本身没有,去外层寻找),会去外层寻找this闭包属于词法作用域(词法作用域是在编译时确定的)

  • 箭头函数this指向谁,决定于它定义的位置,而不是运行的位置(因为this => 闭包 => 词法作用域 => 编译时态确定(js 没有编译,但是有预编译,编译时态就确定了词法作用域)

  • B.apply(A, arguments):即 A 对象应用 B 对象的方法 arguments为数组

  • B.call(A, arguments):即 A 对象应用 B 对象的方法 arguments为列表项

  • const newFn = fn.bind(A, arguments)的作用是只修改this指向,但不会立即执行 fn;会返回一个修改了 this 指向后的 fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()。bind 的传参和 call 相同。

6. Function.prototype.call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

基本思想是把 fn.call(obj,args)中的 fn 赋值为 obj 的属性,然后调用 obj.fn 即可实现 fn 中 this 指向的改变

js
Function.prototype._call = function (ctx, ...args) {
-  // 判断传入的 ctx 是否为空,为空就挂在 全局window上,不然就创建一个对象
-  const o = ctx == undefined ? window : Object(ctx);
-  // 给 ctx 对象添加独一无二的属性
-  const key = Symbol();
-  // 绑定 this,谁调用, this 就为谁,这里为 obj.fun,(这里是为了实现call,改变this指向,就是让使用这个函数的this,指向 ctx)
-  // 这里的 o = { name: "22",Symbol: fun(...args) }
-  o[key] = this;
-  // 执行函数,得到返回结果
-  const result = o[key](...args);
-  // 删除该属性
-  delete o[key];
-  return result;
-};
-
-const obj = {
-  name: "11",
-  fun(...args) {
-    console.log(this.name);
-  },
-};
-
-const obj2 = { name: "22" };
-obj.fun(); // 11
-obj.fun.call(obj2); // 22
-obj.fun._call(obj2, 1, 2); // 22 1 2
-

7. Function.prototype.apply

js
Function.prototype.myApply = function (ctx) {
-  const context = ctx == undefined ? window : Object(ctx);
-  let key = Symbol();
-  context[key] = this;
-  let result;
-  if (arguments[1]) {
-    //判断是否有第二个参数
-    result = context[key](...arguments[1]); // 调用该方法,该方法this指向context
-  } else {
-    result = context[key]; // 调用该方法,该方法this指向context
-  }
-  delete context[key];
-  return result;
-};
-
-const r = Math.max.myApply(null, [12, 3]);
-const r1 = Math.max.apply(null, [12, 3]);
-console.log(r); // 12
-console.log(r1); //  12
-

8. Function.prototype.bind

bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

js
const obj = {
-  name: "11",
-  fun() {
-    console.log(this.name);
-  },
-};
-Function.prototype._bind = function (ctx, ...args) {
-  // 获取函数体
-  const _self = this;
-  // 用一个新函数包裹,避免立即执行
-  const bindFn = (...reset) => {
-    return _self.call(ctx, ...args, ...reset);
-  };
-  return bindFn;
-};
-const obj2 = { name: "22" };
-obj.fun(); // 11
-const fn = obj.fun.bind(obj2);
-const fn2 = obj.fun._bind(obj2);
-fn(); // 22
-fn2(); // 22
-

9. New 关键字

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

js
const _new = function(constructor) {
-  // 创建一个空对象
-  const obj = {}
-  // 原型链挂载
-  obj.__proto__ = constructor.prototype;
-  // 将obj 复制给构造体中的 this,并且返回结果
-  const result = constructor.call(obj)
-  // 如果返回对象不为一个对象则直接返回刚才创建的对象
-  return typeof result === 'object' && result !== null ? : result : obj
-}
 

10. 浅拷贝

js
const _shallowClone = (target) => {
   // 基本数据类型直接返回
   if (typeof target === "object" && target !== null) {
@@ -557,9 +481,9 @@
 };
 
 main();
-
- - +
+ + \ No newline at end of file diff --git a/pages/interviews/html.html b/pages/interviews/html.html index aa80b71..7e2a2a7 100644 --- a/pages/interviews/html.html +++ b/pages/interviews/html.html @@ -5,15 +5,15 @@ HTML 面试相关 | 我的网站 - - - - + + + + -
Skip to content
目录

HTML 面试相关

1. HTML 文件中的 DOCTYPE 是什么作用?

HTML 超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type,网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML 规范XHTML 规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前,如:

html
<!DOCTYPE html>
+    
Skip to content
目录

HTML 面试相关

1. HTML 文件中的 DOCTYPE 是什么作用?

HTML 超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type,网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML 规范XHTML 规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前,如:

html
<!DOCTYPE html>
 <html>
   ...
 </html>
@@ -69,9 +69,9 @@
   will-change: transform;
 }
 

提升为合成层有下列几个优点:

  • 合成层的位图会由 GPU 合成,⽐由 CPU 处理更快

  • 当需要重绘时只重绘本身,不影响其他层

  • transformopacity 不会触发重排和重绘

17. 给页面中的所有 div 创建一个边框

js
document.styleSheets[0].addRule("div", "border:2px solid #f40");
-

document.styleSheets :获取页面使用的 css 样式表

- - +

document.styleSheets :获取页面使用的 css 样式表

+ + \ No newline at end of file diff --git a/pages/interviews/http.html b/pages/interviews/http.html index 8b5a4f2..a0d3cbb 100644 --- a/pages/interviews/http.html +++ b/pages/interviews/http.html @@ -5,23 +5,23 @@ http 相关 | 我的网站 - - - - + + + + -
Skip to content
目录

http 相关

Hyper Text Transfer Protocol(HTTP)是超文本传输协议。在前端最重要的体现在于,浏览器(HTTP Client)与服务器(HTTP Server)之间的通信。

1. HTTP 有哪些⽅法?

HTTP 1.0 标准中,定义了 3 种请求⽅法:GET、POST、HEAD

HTTP 1.1 标准中,新增了请求⽅法:PUT、PATCH、DELETE、OPTIONS、TRACE、CONNECT

2. 各个 HTTP 方法的具体作用是什么?

方法功能
GET通常⽤于请求服务器发送某些资源
POST发送数据给服务器
HEAD请求资源的头部信息, 并且这些头部与 HTTP GET ⽅法请求时返回的⼀致。
该请求⽅法的⼀个使⽤场景是在下载⼀个⼤⽂件前先获取其⼤⼩再决定是否要下载, 以此可以节约带宽资源
PUT⽤于全量修改⽬标资源 (看接口, 也可以用于添加)
DELETE⽤于删除指定的资源
OPTIONS⽤于获取⽬的资源所⽀持的通信选项 (跨域请求前, 预检请求, 判断目标是否安全)
TRACE该方法会 让服务器 原样返回任意客户端请求的信息内容, 用于诊断和判断
CONNECTHTTP/1.1 协议中预留给能够将连接改为管道⽅式的代理服务器
(把服务器作为跳板,让服务器代替用户去访问其它网页, 之后把数据原原本本的返回给用户)
PATCH⽤于对资源进⾏部分修改

GET/DELETE 参数是在地址栏中传递的

PUT/PATCH/POST 参数是在请求体传递的

3. GET 方法和 POST 方法有何区别?

默认的 http 请求的内容, 在网络中传输, 明文的形式传递的 (https 对内容加密)

GET 方法POST 方法
数据传输⽅式通过 URL 传输数据 (地址栏拼接参数)通过请求体传输
数据安全数据暴露在 URL 中,可通过浏览历史记录、缓存等很容易查到数据信息数据因为在请求主体内,
所以有⼀定的安全性保证
数据类型只允许 ASCII 字符⽆限制
GET ⽆害刷新、后退等浏览器操作是⽆害的可能会引起重复提交表单
功能特性安全且幂等(这⾥的安全是指只读特性,就是使⽤这个⽅法不会引起服务器状态变化。
幂等的概念是指同⼀个请求⽅法执⾏多次和仅执⾏⼀次的效果完全相同)
⾮安全(会引起服务器端的变化)、⾮幂等

4. HTTP 请求报文是什么样的?

HTTP 请求报⽂的组成:请求⾏、请求头、(空⾏)、请求体。

实际请求报文实例:

image-20210305232854139

请求行

包含了请求⽅法、URL、HTTP 协议版本,它们之间⽤空格进行分隔。例如:

bash
GET http://www.abc.com/articles HTTP/1.1
+    
Skip to content
目录

http 相关

Hyper Text Transfer Protocol(HTTP)是超文本传输协议。在前端最重要的体现在于,浏览器(HTTP Client)与服务器(HTTP Server)之间的通信。

1. HTTP 有哪些⽅法?

HTTP 1.0 标准中,定义了 3 种请求⽅法:GET、POST、HEAD

HTTP 1.1 标准中,新增了请求⽅法:PUT、PATCH、DELETE、OPTIONS、TRACE、CONNECT

2. 各个 HTTP 方法的具体作用是什么?

方法功能
GET通常⽤于请求服务器发送某些资源
POST发送数据给服务器
HEAD请求资源的头部信息, 并且这些头部与 HTTP GET ⽅法请求时返回的⼀致。
该请求⽅法的⼀个使⽤场景是在下载⼀个⼤⽂件前先获取其⼤⼩再决定是否要下载, 以此可以节约带宽资源
PUT⽤于全量修改⽬标资源 (看接口, 也可以用于添加)
DELETE⽤于删除指定的资源
OPTIONS⽤于获取⽬的资源所⽀持的通信选项 (跨域请求前, 预检请求, 判断目标是否安全)
TRACE该方法会 让服务器 原样返回任意客户端请求的信息内容, 用于诊断和判断
CONNECTHTTP/1.1 协议中预留给能够将连接改为管道⽅式的代理服务器
(把服务器作为跳板,让服务器代替用户去访问其它网页, 之后把数据原原本本的返回给用户)
PATCH⽤于对资源进⾏部分修改

GET/DELETE 参数是在地址栏中传递的

PUT/PATCH/POST 参数是在请求体传递的

3. GET 方法和 POST 方法有何区别?

默认的 http 请求的内容, 在网络中传输, 明文的形式传递的 (https 对内容加密)

GET 方法POST 方法
数据传输⽅式通过 URL 传输数据 (地址栏拼接参数)通过请求体传输
数据安全数据暴露在 URL 中,可通过浏览历史记录、缓存等很容易查到数据信息数据因为在请求主体内,
所以有⼀定的安全性保证
数据类型只允许 ASCII 字符⽆限制
GET ⽆害刷新、后退等浏览器操作是⽆害的可能会引起重复提交表单
功能特性安全且幂等(这⾥的安全是指只读特性,就是使⽤这个⽅法不会引起服务器状态变化。
幂等的概念是指同⼀个请求⽅法执⾏多次和仅执⾏⼀次的效果完全相同)
⾮安全(会引起服务器端的变化)、⾮幂等

4. HTTP 请求报文是什么样的?

HTTP 请求报⽂的组成:请求⾏、请求头、(空⾏)、请求体。

实际请求报文实例:

image-20210305232854139

请求行

包含了请求⽅法、URL、HTTP 协议版本,它们之间⽤空格进行分隔。例如:

bash
GET http://www.abc.com/articles HTTP/1.1
 

请求头

请求头由键值对组成,每⾏⼀对,键值之间⽤英⽂冒号:进行分隔。例如:

Content-Type: application/json
 Host: www.abc.com
 

请求体

请求体中放置 POST、PUT、PATCH 等请求方法所需要携带的数据。

5. HTTP 响应报文是什么样的?

HTTP 响应报⽂的组成: 响应⾏、响应头、空⾏、响应体。

image-20210219125038371

响应行

响应行由协议版本、状态码、状态码的原因短语 3 个内容组成,中间以空格分隔。例如:

bash
HTTP/1.1 200 OK
 

响应头

响应头由键值对组成,每⾏⼀对,键值之间⽤英⽂冒号:进行分隔。例如:

Content-Length: 1024
 Content-Type: application/json
-

响应体

服务器发送过来的数据。

image-20210306161216371

6. 你了解的 HTTP 状态码有哪些?

成功(2XX)

状态码原因短语说明
200OK表示从客户端发来的请求在服务器端被正确处理
201Created请求已经被实现,⽽且有⼀个新的资源已经依据请求的需要⽽建⽴
通常是在 POST 请求,或是某些 PUT 请求之后创建了内容, 进行的返回的响应
202Accepted请求服务器已接受,但是尚未处理,不保证完成请求
适合异步任务或者说需要处理时间比较长的请求,避免 HTTP 连接一直占用
204No content表示请求成功,但响应报⽂不含实体的主体部分
206Partial Content进⾏的是范围请求, 表示服务器已经成功处理了部分 GET 请求
响应头中会包含获取的内容范围 (常用于分段下载)

重定向(3XX)

状态码原因短语说明
301Moved Permanently永久性重定向,表示资源已被分配了新的 URL
比如,我们访问 http😕/www.baidu.com 会跳转到 https😕/www.baidu.com
302Found临时性重定向,表示资源临时被分配了新的 URL, 支持搜索引擎优化
首页, 个人中心, 遇到了需要登录才能操作的内容, 重定向 到 登录页
303See Other对于 POST 请求,它表示请求已经被处理,客户端可以接着使用 GET 方法去请求 Location 里的 URI。
304Not Modified自从上次请求后,请求的网页内容未修改过。
服务器返回此响应时,不会返回网页内容。(协商缓存)
307Temporary Redirect对于 POST 请求,表示请求还没有被处理,客户端应该向 Location 里的 URI 重新发起 POST 请求。
不对请求做额外处理, 正常发送请求, 请求 location 中的 url 地址

因为 post 请求, 是非幂等的, 从 302 中, 细化出了 303 和 307

简而言之:

  • 301 302 307 都是重定向
  • 304 协商缓存

客户端错误(4XX)

状态码原因短语说明
400Bad Request请求报⽂存在语法错误((传参格式不正确)
401UnAuthorized权限认证未通过(没有权限)
403Forbidden表示对请求资源的访问被服务器拒绝
404Not Found表示在服务器上没有找到请求的资源
408Request Timeout客户端请求超时
409Confict请求的资源可能引起冲突

服务端错误(5XX)

状态码原因短语说明
500Internal Sever Error表示服务器端在执⾏请求时发⽣了错误
501Not Implemented请求超出服务器能⼒范围,例如服务器不⽀持当前请求所需要的某个功能,
或者请求是服务器不⽀持的某个⽅法
503Service Unavailable表明服务器暂时处于超负载或正在停机维护,⽆法处理请求
505Http Version Not Supported服务器不⽀持,或者拒绝⽀持在请求中使⽤的 HTTP 版本

7. HTTP 的 keep-alive 是什么作用?

作用:使客户端到服务器端的连接持续有效(长连接),当出现对服务器的后继请求时,

Keep-Alive 功能避免了建立或者重新建立连接。

早期 HTTP/1.0 在每次请求的时候,都要创建⼀个新的连接,⽽创建连接的过程需要消耗资源和时间,

为了减少资源消耗、缩短响应时间,就需要复⽤已有连接。

在后来的 HTTP/1.0 以及 HTTP/1.1 中引⼊了复⽤连接的机制,也就是在请求头中加⼊ Connection: keep-alive

以此告诉对⽅这个请求响应完成后不要关闭连接,下⼀次还⽤这个请求的连接进行后续交流。

协议规定,如果想要保持连接,则需要在请求头中加上 Connection: keep-alive。

keep-alive 的优点 (复用连接)

  • 较少的 CPU 和内存的占⽤(因为要打开的连接数变少了, 复用了连接)
  • 减少了后续请求的延迟(⽆需再进⾏握⼿)
  • ...

缺点: 因为在处理的暂停期间,本来可以释放的资源仍旧被占用。请求已经都结束了, 但是还一直连接着也不合适

解决:Keep-Alive: timeout=5, max=100

  • timeout:过期时间 5 秒(对应 httpd.conf 里的参数是:KeepAliveTimeout),

  • max 是最多一百次请求,强制断掉连接。

    就是在 timeout 时间内又有新的连接过来,同时 max 会自动减 1,直到为 0,强制断掉。

8. 为什么需要 HTTPS?

HTTPS 是安全版的 HTTP。

HTTP 协议在传输数据时采用的是明⽂方式传递,因此,⼀些敏感信息的传输就变得很不安全。

而 HTTPS 就是为了解决 HTTP 的不安全⽽产⽣的。

9. HTTPS 是如何保证安全的?

HTTPS 在传输数据的过程中会对数据进行加密处理,保证安全性。

那 HTTPS 采用的什么样的加密方式呢?我们来了解下一些加密的基本概念。

目前常见的加密算法可以分成三类,对称加密算法非对称加密算法Hash 算法

9.1 什么是对称加密?

对称加密的特点是文件加密和解密使用相同的密钥,即加密密钥也可以用作解密密钥,

这种方法在密码学中叫做对称加密算法,对称加密算法使用起来简单快捷,密钥较短,且破译困难

通信的双⽅都使⽤同⼀个秘钥进⾏加解密。⽐如,两个人事先约定的暗号,就属于对称加密。

image-20210306005550796

对称加密的特点是:

  • 优点:

    计算量小、加密速度快、加密效率高。

  • 缺点:

    在数据传送前,发送方和接收方必须商定好秘钥,然后双方保存好秘钥。

    如果一方的秘钥被泄露,那么加密信息也就不安全了

使用场景:本地数据加密、https 通信、网络传输等

常见算法:AES、DES、3DES、DESX、Blowfish、IDEA、RC4、RC5、RC6

9.2 什么是⾮对称加密?

而加密和解密其实可以使用不同的规则,只要这两种规则之间存在某种对应关系即可,

这样就避免了直接传递密钥。这种新的加密模式被称为"非对称加密算法"。

通信的双方使用不同的秘钥进行加密解密,即秘钥对(私钥 + 公钥)

特征: 私钥可以解密公钥加密的内容, 公钥可以解密私钥加密的内容

image-20210306011528361 非对称加密的特点是:

  • 优点:非对称加密与对称加密相比其安全性更好

  • 缺点:加密和解密花费时间长、速度慢,只适合对少量数据进行加密。

使用场景:https 会话前期、CA 数字证书、信息加密、登录认证等

常见算法:RSA、ECC(移动设备用)、Diffie-Hellman、El Gamal、DSA(数字签名用)

9.3 HTTPS 加密解决⽅案

结合了两种加密⽅式:

  • 对称加密的密钥 ⽤非对称加密的公钥, 进⾏加密并发送出去,接收⽅使⽤私钥解密得到 对称加密密钥

  • 双⽅沟通时使⽤ 对称加密密钥 进⾏

可以看到,只有在发送秘钥阶段才使用非对称加密,而后续的通信都使用对称加密,这样解决了性能问题。

HTTPS 目前所使用的 TLS 或 SSL 协议, 就是目前采用的加密通道的规范协议

它利用对称加密、(公私钥)非对称加密, 以及其密钥交换算法,可完成可信任的信息传输

9.4 数字证书

为了安全性, 一般还需要签发数字证书!

客户端 和 服务器端要初步互通消息时, 客户端发送请求可以拿到公开的公钥信息

进而进行非对称加密, 使用公钥, 加密对称加密密钥, 传递给服务器, 后续通信都使用对称加密!

问题是: 初步互通消息时, 如果请求拿到的公钥信息, 就是假的, 或者不安全的! 那么后续的所有操作, 都将是不安全的!

所以, 就需要有数字证书(CA 证书), 一般是 CA 机构颁发的, 证明这个公钥是安全可靠的!

CA 证书中心会对你网站的公钥, 网站的域名地址, 证书到期时间, 等一些相关信息一起加密签发数字证书, 保证你网站的安全性

当公司申请了 CA 证书后, 就应该在响应时, 将数字证书一起发送给客户端

而客户端, 接收到消息后, 就可以查看证书

  1. 如果正在访问的网站 和 证书记载的网址 不一致, 说明不安全, 可能被冒用, 浏览器就会发出警告!!!

  2. 如果签发证书的机构, 不权威, 发出警告

  3. 如果证书过期了, 浏览器也会发出警告

image-20210306021532010

9.5 数字签名

但这还是有问题:如果证书被篡改了怎么办?

这时就需要用⼀个技术:数字签名。 (根据证书内容, 生成的一个唯一标识)

数字签名就是先⽤ CA ⾃带的 Hash 算法来计算出证书内容的⼀个摘要,然后使⽤ CA 私钥进行加密,组成数字签名。

当别⼈把他的证书发过来时,接收方⽤同样的算法再次⽣成摘要,⽤ CA 公钥解密后得到 CA 生成的摘要,两者进行对⽐后,

就能确定中间是否被⼈篡改。这样就能最⼤程度的保证通信的安全了。

博客参考

10. HTTP2 和 HTTP1.x 比,有什么优势和特点?

  1. HTTP/2 采⽤⼆进制格式来传输数据,⽽⾮ HTTP 1.x 的⽂本格式,⼆进制协议解析起来更⾼效
  2. HTTP/2 采用一些头部压缩技术,减少在请求和响应头中重复携带的数据,降低网络负担
  3. HTTP/2 采⽤服务器推送方式,主动向客户端推送资源,提高页面加载效率
  4. HTTP/2 采⽤多路复用机制,减少需要创建的连接数量,降低资源占用和性能消耗

下面是一些与之关联的技术知识。

⼆进制格式分帧

帧:HTTP/2 数据通信的最⼩单位消息,是指 HTTP/2 中逻辑上的 HTTP 消息(例如请求、响应等)。消息由⼀个或多个帧组成

流:存在于连接中的⼀个虚拟通道,它可以承载双向消息,且每个流都有唯⼀的整数 ID

头部压缩

在 HTTP/1.x 中,请求和响应中会重复携带一些不常改变、冗⻓的头数据,给⽹络带来额外负担。

在 HTTP/2 中,客户端和服务端使⽤ “⾸部表” 来跟踪和存储之前发送过的键值对,

相同的数据不再随着每次请求和响应发送。⾸部表在连接存续期间始终存在,由客户端和服务器共同渐进更新。

每个新的⾸部键值对,要么被追加到当前表的末尾,要么替换表中已存在的键值对。

可以简单的理解为:只发送差异数据,⽽不是全部发送,从⽽减少头部的信息量

服务器推送

服务端可以在发送⻚⾯ HTML 内容时,再主动推送一些其它资源,⽽不⽤等到浏览器解析到相应的位置时发起请求后再作响应。

例如,服务端可以主动把 JS 和 CSS ⽂件推送给客户端,⽽不需要客户端解析 HTML 时再发送这些请求。

不过,服务端的主动推送行为,客户端有权利选择是否要接收。

如果服务端推送的资源已经被浏览器缓存过,浏览器可以通过发送 RST_STREAM 帧来拒收。

多路复用

在 HTTP 1.x 中如果想并发多个请求的话,必须使⽤多个 TCP 链接,但浏览器为了控制资源,

会对单个域名有 6-8 个 TCP 链接的数量限制。而在 HTTP 2 中:

  • 同域名下的所有通信,都在单个连接上完成

  • 单个连接可以承载任意数量的双向数据流

  • 数据流以消息的形式发送,⽽消息⼜由⼀个或多个帧组成(多个帧可以乱序发送,因为可以根据帧⾸部的流标识来重新组装)

    参考文章:HTTP/2 特性及其在实际应用中的表现

11. http 缓存控制

11.1 基本认知

Web 服务缓存 大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 服务器缓存)、浏览器缓存。

浏览器缓存 也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容

HTTP 缓存:

  • 强缓存
  • 协商缓存

在具体了解 HTTP 缓存之前先来明确几个术语:

  • 缓存命中率:从缓存中得到数据的请求数 与 所有请求数的比率。理想状态是越高越好。
  • 过期内容:超过设置的有效时间,被标记为“陈旧”的内容。
  • 验证:验证缓存中的过期内容是否仍然有效,验证通过的话刷新过期时间。
  • 失效:失效就是把内容从缓存中移除。

浏览器缓存主要是 HTTP 协议定义的缓存机制。

浏览器缓存, HTTP 缓存分类

浏览器缓存分为强缓存 协商缓存,浏览器加载一个页面的简单流程如下:

  1. 浏览器先根据这个资源的 http 头信息判断是否命中强缓存

    如果命中则直接加载在缓存中的资源,并不会将请求发送到服务器。(强缓存)

  2. 如果未命中强缓存,则浏览器会将资源加载请求发送到服务器。

    服务器来判断浏览器本地缓存是否失效。

    若可以使用,则服务器并不会返回资源信息,浏览器继续从缓存加载资源。(协商缓存)

  3. 如果未命中协商缓存,则服务器会将完整的资源返回给浏览器,浏览器加载新资源,并更新缓存。(新的请求)

11.2 强缓存 (食品过期时间判断)

(进行判断, 是否资源过期, 如果未过期, 直接用缓存)

强缓存

命中强缓存时,浏览器并不会将请求发送给服务器。

在 Chrome 的开发者工具中看到 http 的返回码是 200,但是在 Size 列会显示为(from cache)。 img 强缓存是利用 http 的返回的响应头中的 Expires 或者 Cache-Control (优先级更高) 两个字段来控制的,用来表示资源的缓存时间。

Expires: 指定一个具体时间(2020 年 12 月 12 日 17:00), 到了这个时间了, 缓存过期了, 在时间内, 都是有效的, 可以直接读

Cache-Control : 指定一个过期时间 (3600s), 这个资源你加载到后, 可以用 3600s

Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age + 请求时间,需要和 Last-modified 结合使用。但在上面我们提到过,cache-control 的优先级更高

Expires 是 Web 服务器响应消息头字段,在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

该字段会返回一个时间,比如 Expires: Wed, 23 Nov 2050 16:00:01 GMT 。这个时间代表着这个资源的失效时间,也就是说在 xx 年 xx 月 xx 日时间之前都是有效的,即命中缓存。

这种方式有一个明显的缺点,由于失效时间是一个绝对时间,所以当 服务器与客户端 时间偏差很大 以后,就会导致缓存混乱。于是发展出了 Cache-Control。

Cache-Control

Cache-Control 是一个相对时间,例如 Cache-Control:max-age 3600,代表着资源的有效期是 3600 秒。

由于是相对时间,并且都是与客户端时间比较,所以服务器与客户端时间偏差也不会导致问题。

Cache-Control 与 Expires 可以在服务端配置同时启用或者启用任意一个,同时启用的时候 Cache-Control 优先级高。

Cache-Control 可以由多个字段组合而成,主要有以下几个取值:

  1. max-age 指定一个时间长度,在这个时间段内缓存是有效的,单位是 s。

    例如设置 Cache-Control:max-age=31536000,也就是说缓存有效期为(31536000 / 24 / 60 / 60)天,

    第一次访问这个资源的时候,服务器端也返回了 Expires 字段,并且过期时间是一年后。

    在没有禁用缓存并且没有超过有效时间的情况下,再次访问这个资源就命中了缓存,不会向服务器请求资源而是直接从浏览器缓存中取。

  2. no-cache 强制所有缓存了该响应的用户,在使用已缓存的数据前,发送带验证的请求到服务器, 问服务器是否可以读缓存。

    不是字面意思上的不缓存。

  3. no-store 禁止缓存,每次请求都要向服务器重新获取数据。

11.3 协商缓存 (找供货商专家协商)

看看过期时间, 食品没过期, 直接吃 (直接读缓存, 不发请求) 强缓存

食品过期时间过了, 能不能吃呢? 问问专家(服务器), 专家瞅了一眼, 没过期 (响应 304, 不返回内容) , 直接吃 (协商缓存)

如果问过专家(服务器), 专家瞅了一眼, 呀真过期了, 原来的不要了, 我重新给你发一个 (响应 200, 并返回内容)

协商缓存

若未命中强缓存(强缓存过期了),则浏览器会将请求发送至服务器。

服务器根据 http 头信息中的Last-Modify/If-Modify-SinceEtag/If-None-Match来判断是否命中协商缓存。

如果命中,则 http 返回码为 304 (你本地之前加载的资源是有效的),浏览器从缓存中加载资源。Last-Modify/If-Modify-Since

浏览器第一次请求一个资源的时候, 服务器返回的 header 中会加上 Last-Modify,

Last-modify 是一个时间标识该资源的最后修改时间,例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT

当浏览器再次请求该资源时,发送的请求头中会包含 If-Modify-Since,该值为缓存之前返回的 Last-Modify

服务器收到 If-Modify-Since 后,根据实际服务器的资源的最后修改时间, 进行判断是否命中缓存。

img

如果命中缓存,则返回 http304,并且不会返回资源内容,并且不会返回 Last-Modify。

由于对比的是服务端时间,所以客户端与服务端时间差距不会导致问题。

但是有时候通过最后修改时间来判断资源是否修改还是不太准确(资源变化了最后修改时间也可以一致)。

比如: 最后修改只能精确到秒级, 一秒进行了多次修改, 就不行了, 于是出现了 ETag/If-None-Match。

ETag/If-None-Match

与 Last-Modify/If-Modify-Since (最后修改时间)不同的是,Etag/If-None-Match 返回的是一个校验码(ETag: entity tag)。

ETag 可以保证每一个资源是唯一的,资源变化都会导致 ETag 变化。

ETag 值的变更则说明资源状态已经被修改。

服务器根据浏览器上发送的 If-None-Match 值来判断是否命中缓存。

ETag 生成靠以下几种因子

  1. 文件的 i-node 编号,是 Linux/Unix 用来识别文件的编号。

  2. 文件最后修改时间

  3. 文件大小

    ...

生成 Etag 的时候,可以使用其中一种或几种因子,使用抗碰撞散列函数来生成。生成一个标记文件的唯一值

既生 Last-Modified 何生 Etag ?

你可能会觉得使用 Last-Modified 已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要 Etag(实体标识)呢?

Etag 的出现主要是为了解决几个 Last-Modified 比较难解决的问题:

  1. Last-Modified 标注的最后修改只能精确到秒级

    如果某些文件在 1 秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间

  2. 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形

Etag 是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加 准确的控制缓存。

不会仅仅只根据最后的修改时间判断是否进行使用缓存

Last-Modified 与 ETag 是可以一起使用的,服务器会优先验证 ETag,一致的情况下,才会继续比对 Last-Modified,

最后才决定是否返回 304。

总结:

  • 强缓存: 大大的减少了 服务器的请求次数, 在过期时间内, 直接从客户端内存中读

  • 协商缓存: 强缓存命中失效了, 超过过期时间了, 拿着标识(最后的修改时间, 唯一标识 etag), 去问服务器, 是否真的过期了

    如果验证通过, 服务器会直接响应 304, 且不会返回资源

TCP

12. TCP 的特性

主要有以下 5 点特性:

  1. TCP 提供⼀种⾯向连接的、可靠的字节流服务

  2. 在⼀个 TCP 连接中,仅有两⽅进⾏彼此通信(⼴播和多播不能⽤于 TCP)

  3. TCP 使⽤校验、确认和重传机制来保证可靠传输

  4. TCP 将数据分节进⾏排序,并使⽤累积来确认保证数据的顺序不变和⾮重复

  5. TCP 使⽤滑动窗⼝机制来实现流量控制,通过动态改变窗⼝的⼤⼩进⾏拥塞控制

13. 简述 TCP 和 UDP 的区别

协议连接性双工性可靠性有序性有界性拥塞控制传输速度量级头部大小
TCP⾯向连接全双工 1:1可靠,有重传机制有序,通过 SYN 排序无边界,有粘包情况20~60 字节
UDP无连接n:m不可靠,丢包后数据丢失无序有边界,无粘包8 字节

UDP socket ⽀持 n 对 m 的连接状态。在 Node.js 官⽅⽂档中有写到在 dgram.createSocket(options[, callback]) 中的 options 中可指定 reuseAddrSO_REUSEADDR 标志,通过它可以简单的实现 n 对 m 的多播特性 (仅在⽀持多播的操作系统上才有用)。

14. 什么是 TCP 粘包,怎么处理?

TCP 连接在默认情况下会启⽤延迟传送算法 (Nagle 算法),它在数据发送前进行缓存数据,如短时间内有多个数据发送,会缓冲后再作⼀次发送操作 (缓冲区⼤⼩可⻅ socket.bufferSize),这样可以减少 IO 产生的消耗,提⾼了性能。

在传输⽂件的情况下,不⽤处理粘包问题,接收到⼀个包就拼接⼀个包就行了。但是,如果是传输多条消息、或是别的⽤途的数据,那么就需要处理粘包。可参⻅⽹上流传甚⼴的⼀个例⼦:连续调⽤两次 send 分别发送两段数据 data1 和 data2,则在接收端会有以下⼏种常⻅情况出现:

  • A. 先收到 data1,然后收到 data2

  • B. 先收到 data1 的部分数据,然后收到 data1 余下的部分以及 data2 的全部

  • C. 先收到 data1 的全部数据和 data2 的部分数据,然后收到 data2 的余下的数据

  • D. ⼀次性收到 data1 和 data2 的全部数据

以上情况中的 B、C、D 三种,就是常⻅的粘包情况。而处理粘包问题的常⻅⽅案有:

方案一:多次发送之前间隔⼀个等待时间

只需等待⼀段时间再做下⼀次send 发送操作就可以了。

  • 它适⽤于交互频率特别低的场景

  • 对于交互频繁的场景来说, 其传输效率太低。

方案二:关闭 Nagle 算法

在 Node.js 中你可以通过 socket.setNoDelay() ⽅法来关闭 Nagle 算法,让每次 send 都不缓冲而直接发送。

  • 该⽅法适⽤于每次发送的数据都⽐较⼤ (但不是如⽂件那么⼤), 并且频率不特别⾼的场景

  • 如果是每次发送的数据量⽐较⼩且频率特别⾼的话,这种方式纯属⾃废武功

  • 该⽅法也不适⽤于⽹络较差的情况,因为 Nagle 算法是在服务端进⾏的包合并情况,但如果短时间内客户端的⽹络

情况不好、或者应⽤层由于某些原因不能及时将 TCP 的数据 recv,就会造成多个包在客户端缓冲从⽽粘包的情况

方案三:进⾏封包/拆包

这是⽬前业内最常⻅的解决⽅案,即在发送每个数据包之前,将⼀些有特征的数据放在数据包前/后,然后在收到数据的时候,根据特征数据来分割出各个数据包。

15. 一次完整的 HTTP 服务过程是什么

当我们在 web 浏览器的地址栏中输入:www.baidu.com,具体发生了什么?

  1. www.baidu.com这个网址进行 DNS 域名解析,得到对应的 IP 地址
  2. 根据这个 IP,找到对应的服务器,发起 TCP 的三次握手 (tcp 三次握手四次挥手 )
  3. 建立 TCP 连接后发起 HTTP 请求
  4. 服务器响应 HTTP 请求,浏览器得到 html 代码
  5. 浏览器解析 html 代码,并请求 html 代码中的资源(如 js、css、图片等)(先得到 html 代码,才能去找这些资源)
  6. 浏览器对页面进行渲染呈现给用户
  7. 服务器关闭 TCP 连接

注:

1.DNS 怎么找到域名的?

DNS 域名解析采用的是递归查询的方式,过程是,先去找 DNS 缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级,这样递归查找之后,找到了,给我们的 web 浏览器

2.为什么 HTTP 协议要基于 TCP 来实现?

TCP 是一个端到端的可靠面向连接的协议,HTTP 基于传输层 TCP 协议不用担心数据传输的各种问题(当发生错误时,可以重传)

3.最后一步浏览器是如何对页面进行渲染的?

a)解析 html 文件构成 DOM 树 b)解析 CSS 文件构成渲染树 c)边解析,边渲染 d)JS 单线程运行,JS 有可能修改 DOM 结构,意味着 JS 执行完成前,后续所有资源的下载是没有必要的,所以 JS 是单线程,会阻塞后续资源下载

16. 什么是 DNS 解析

DNS 解析(域名解析服务器)

假定请求的是 www.baidu.com

a)首先会搜索浏览器自身的 DNS 缓存(缓存时间比较短,大概只有 1 分钟,且只能容纳 1000 条缓存)

b)如果浏览器自身的缓存里面没有找到,那么浏览器会搜索系统自身的 DNS 缓存

c)如果还没有找到,那么尝试从 hosts 文件里面去找

d)在前面三个过程都没获取到的情况下,就递归地去域名服务器去查找(就近查找),具体过程如下 dns域名解析 DNS 优化两个方面:DNS 缓存、DNS 负载均衡 (准备多台 dns 服务器, 进行 dns 解析)

16. 什么是三次握手?

三次握⼿(Three-way Handshake)是指在建⽴⼀个 TCP 连接时,需要客户端和服务器总共发送 3 个包。

三次握⼿的⽬的是连接服务器指定端⼝,建⽴ TCP 连接,并同步连接双⽅的序列号和确认号,交换 TCP 窗⼝⼤⼩信息。在 socket 编程中,客户端调用执行 connect() 时将触发三次握⼿。

下图为三次握手的示意图:

image-20210219192116213

第⼀次握⼿(SYN=1, seq=x)

客户端发送⼀个 TCP 的 SYN 标志位置 1 的包,指明客户端打算连接的服务器的端⼝,以及初始序号 X,保存在包头的序列号(Sequence Number)字段⾥。

发送完毕后,客户端进⼊ SYN_SEND 状态。

第⼆次握⼿(SYN=1, ACK=1, seq=y, ACKnum=x+1)

服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为 1。服务器端选择⾃⼰ ISN 序列号,放到 Seq 域⾥,同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加 1,即 X + 1。

发送完毕后,服务器端进⼊ SYN_RCVD 状态。

第三次握⼿(ACK=1,ACKnum=y+1)

客户端再次发送确认包(ACK),SYN 标志位为 0,ACK 标志位为 1,并且把服务器发来 ACK 的序号字段+1,放在确定字段中发送给对⽅,并且在数据段放写 ISN 的 +1。

发送完毕后,客户端进⼊ ESTABLISHED 状态,当服务器端接收到这个包时,也进⼊ ESTABLISHED 状态,TCP 握⼿结束。

什么是四次挥手?

四次挥⼿(Four-way handshake),也叫做改进的三次握⼿,TCP 连接的拆除需要发送四个包,客户端或服务器均可主动发起挥⼿动作,在 socket 编程中,任何⼀⽅执⾏ close() 操作即可产⽣挥⼿操作。

下图为四次挥手示意图:

image-20210219192659983

第⼀次挥⼿(FIN=1,seq=x)

假设客户端想要关闭连接,客户端发送⼀个 FIN 标志位置为 1 的包,表示⾃⼰已经没有数据可以发送了,但是仍然可以接受数据。发送完毕后,客户端进⼊ FIN_WAIT_1 状态。

第⼆次挥⼿(ACK=1,ACKnum=x+1)

服务器端确认客户端的 FIN 包,发送⼀个确认包,表明⾃⼰接受到了客户端关闭连接的请求,但还没有准备好关闭连接。发送完毕后,服务器端进⼊ CLOSE_WAIT 状态,客户端接收到这个确认包之后,进⼊ FIN_WAIT_2 状态,等待服务器端关闭连接。

第三次挥⼿(FIN=1,seq=y)

服务器端准备好关闭连接时,向客户端发送结束连接请求,FIN 置为 1。发送完毕后,服务器端进⼊ LAST_ACK 状态,等待来⾃客户端的最后⼀个 ACK。

第四次挥⼿(ACK=1,ACKnum=y+1)

客户端接收到来⾃服务器端的关闭请求,发送⼀个确认包,并进⼊ TIME_WAIT 状态,等待可能出现的要求重传的 ACK 包。服务器端接收到这个确认包之后,关闭连接,进⼊ CLOSED 状态。客户端等待了某个固定时间(两个最⼤段⽣命周期,2MSL,2 Maximum Segment Lifetime)之后,没有收到服务器端的 ACK ,认为服务器端已经正常关闭连接,于是⾃⼰也关闭连接,进⼊ CLOSED 状态。

17. TCP 三次握手理解 (双方确认)

TCP 是一个端到端的 可靠 面相连接的协议,

HTTP 基于传输层 TCP 协议不用担心数据传输的各种问题(当发生错误时,可以重传)

根据这个 IP,找到对应的服务器,发起 TCP 的三次握手 (tcp 三次握手四次挥手 )

- - +

响应体

服务器发送过来的数据。

image-20210306161216371

6. 你了解的 HTTP 状态码有哪些?

成功(2XX)

状态码原因短语说明
200OK表示从客户端发来的请求在服务器端被正确处理
201Created请求已经被实现,⽽且有⼀个新的资源已经依据请求的需要⽽建⽴
通常是在 POST 请求,或是某些 PUT 请求之后创建了内容, 进行的返回的响应
202Accepted请求服务器已接受,但是尚未处理,不保证完成请求
适合异步任务或者说需要处理时间比较长的请求,避免 HTTP 连接一直占用
204No content表示请求成功,但响应报⽂不含实体的主体部分
206Partial Content进⾏的是范围请求, 表示服务器已经成功处理了部分 GET 请求
响应头中会包含获取的内容范围 (常用于分段下载)

重定向(3XX)

状态码原因短语说明
301Moved Permanently永久性重定向,表示资源已被分配了新的 URL
比如,我们访问 http😕/www.baidu.com 会跳转到 https😕/www.baidu.com
302Found临时性重定向,表示资源临时被分配了新的 URL, 支持搜索引擎优化
首页, 个人中心, 遇到了需要登录才能操作的内容, 重定向 到 登录页
303See Other对于 POST 请求,它表示请求已经被处理,客户端可以接着使用 GET 方法去请求 Location 里的 URI。
304Not Modified自从上次请求后,请求的网页内容未修改过。
服务器返回此响应时,不会返回网页内容。(协商缓存)
307Temporary Redirect对于 POST 请求,表示请求还没有被处理,客户端应该向 Location 里的 URI 重新发起 POST 请求。
不对请求做额外处理, 正常发送请求, 请求 location 中的 url 地址

因为 post 请求, 是非幂等的, 从 302 中, 细化出了 303 和 307

简而言之:

  • 301 302 307 都是重定向
  • 304 协商缓存

客户端错误(4XX)

状态码原因短语说明
400Bad Request请求报⽂存在语法错误((传参格式不正确)
401UnAuthorized权限认证未通过(没有权限)
403Forbidden表示对请求资源的访问被服务器拒绝
404Not Found表示在服务器上没有找到请求的资源
408Request Timeout客户端请求超时
409Confict请求的资源可能引起冲突

服务端错误(5XX)

状态码原因短语说明
500Internal Sever Error表示服务器端在执⾏请求时发⽣了错误
501Not Implemented请求超出服务器能⼒范围,例如服务器不⽀持当前请求所需要的某个功能,
或者请求是服务器不⽀持的某个⽅法
503Service Unavailable表明服务器暂时处于超负载或正在停机维护,⽆法处理请求
505Http Version Not Supported服务器不⽀持,或者拒绝⽀持在请求中使⽤的 HTTP 版本

7. HTTP 的 keep-alive 是什么作用?

作用:使客户端到服务器端的连接持续有效(长连接),当出现对服务器的后继请求时,

Keep-Alive 功能避免了建立或者重新建立连接。

早期 HTTP/1.0 在每次请求的时候,都要创建⼀个新的连接,⽽创建连接的过程需要消耗资源和时间,

为了减少资源消耗、缩短响应时间,就需要复⽤已有连接。

在后来的 HTTP/1.0 以及 HTTP/1.1 中引⼊了复⽤连接的机制,也就是在请求头中加⼊ Connection: keep-alive

以此告诉对⽅这个请求响应完成后不要关闭连接,下⼀次还⽤这个请求的连接进行后续交流。

协议规定,如果想要保持连接,则需要在请求头中加上 Connection: keep-alive。

keep-alive 的优点 (复用连接)

  • 较少的 CPU 和内存的占⽤(因为要打开的连接数变少了, 复用了连接)
  • 减少了后续请求的延迟(⽆需再进⾏握⼿)
  • ...

缺点: 因为在处理的暂停期间,本来可以释放的资源仍旧被占用。请求已经都结束了, 但是还一直连接着也不合适

解决:Keep-Alive: timeout=5, max=100

  • timeout:过期时间 5 秒(对应 httpd.conf 里的参数是:KeepAliveTimeout),

  • max 是最多一百次请求,强制断掉连接。

    就是在 timeout 时间内又有新的连接过来,同时 max 会自动减 1,直到为 0,强制断掉。

8. 为什么需要 HTTPS?

HTTPS 是安全版的 HTTP。

HTTP 协议在传输数据时采用的是明⽂方式传递,因此,⼀些敏感信息的传输就变得很不安全。

而 HTTPS 就是为了解决 HTTP 的不安全⽽产⽣的。

9. HTTPS 是如何保证安全的?

HTTPS 在传输数据的过程中会对数据进行加密处理,保证安全性。

那 HTTPS 采用的什么样的加密方式呢?我们来了解下一些加密的基本概念。

目前常见的加密算法可以分成三类,对称加密算法非对称加密算法Hash 算法

9.1 什么是对称加密?

对称加密的特点是文件加密和解密使用相同的密钥,即加密密钥也可以用作解密密钥,

这种方法在密码学中叫做对称加密算法,对称加密算法使用起来简单快捷,密钥较短,且破译困难

通信的双⽅都使⽤同⼀个秘钥进⾏加解密。⽐如,两个人事先约定的暗号,就属于对称加密。

image-20210306005550796

对称加密的特点是:

  • 优点:

    计算量小、加密速度快、加密效率高。

  • 缺点:

    在数据传送前,发送方和接收方必须商定好秘钥,然后双方保存好秘钥。

    如果一方的秘钥被泄露,那么加密信息也就不安全了

使用场景:本地数据加密、https 通信、网络传输等

常见算法:AES、DES、3DES、DESX、Blowfish、IDEA、RC4、RC5、RC6

9.2 什么是⾮对称加密?

而加密和解密其实可以使用不同的规则,只要这两种规则之间存在某种对应关系即可,

这样就避免了直接传递密钥。这种新的加密模式被称为"非对称加密算法"。

通信的双方使用不同的秘钥进行加密解密,即秘钥对(私钥 + 公钥)

特征: 私钥可以解密公钥加密的内容, 公钥可以解密私钥加密的内容

image-20210306011528361 非对称加密的特点是:

  • 优点:非对称加密与对称加密相比其安全性更好

  • 缺点:加密和解密花费时间长、速度慢,只适合对少量数据进行加密。

使用场景:https 会话前期、CA 数字证书、信息加密、登录认证等

常见算法:RSA、ECC(移动设备用)、Diffie-Hellman、El Gamal、DSA(数字签名用)

9.3 HTTPS 加密解决⽅案

结合了两种加密⽅式:

  • 对称加密的密钥 ⽤非对称加密的公钥, 进⾏加密并发送出去,接收⽅使⽤私钥解密得到 对称加密密钥

  • 双⽅沟通时使⽤ 对称加密密钥 进⾏

可以看到,只有在发送秘钥阶段才使用非对称加密,而后续的通信都使用对称加密,这样解决了性能问题。

HTTPS 目前所使用的 TLS 或 SSL 协议, 就是目前采用的加密通道的规范协议

它利用对称加密、(公私钥)非对称加密, 以及其密钥交换算法,可完成可信任的信息传输

9.4 数字证书

为了安全性, 一般还需要签发数字证书!

客户端 和 服务器端要初步互通消息时, 客户端发送请求可以拿到公开的公钥信息

进而进行非对称加密, 使用公钥, 加密对称加密密钥, 传递给服务器, 后续通信都使用对称加密!

问题是: 初步互通消息时, 如果请求拿到的公钥信息, 就是假的, 或者不安全的! 那么后续的所有操作, 都将是不安全的!

所以, 就需要有数字证书(CA 证书), 一般是 CA 机构颁发的, 证明这个公钥是安全可靠的!

CA 证书中心会对你网站的公钥, 网站的域名地址, 证书到期时间, 等一些相关信息一起加密签发数字证书, 保证你网站的安全性

当公司申请了 CA 证书后, 就应该在响应时, 将数字证书一起发送给客户端

而客户端, 接收到消息后, 就可以查看证书

  1. 如果正在访问的网站 和 证书记载的网址 不一致, 说明不安全, 可能被冒用, 浏览器就会发出警告!!!

  2. 如果签发证书的机构, 不权威, 发出警告

  3. 如果证书过期了, 浏览器也会发出警告

image-20210306021532010

9.5 数字签名

但这还是有问题:如果证书被篡改了怎么办?

这时就需要用⼀个技术:数字签名。 (根据证书内容, 生成的一个唯一标识)

数字签名就是先⽤ CA ⾃带的 Hash 算法来计算出证书内容的⼀个摘要,然后使⽤ CA 私钥进行加密,组成数字签名。

当别⼈把他的证书发过来时,接收方⽤同样的算法再次⽣成摘要,⽤ CA 公钥解密后得到 CA 生成的摘要,两者进行对⽐后,

就能确定中间是否被⼈篡改。这样就能最⼤程度的保证通信的安全了。

博客参考

10. HTTP2 和 HTTP1.x 比,有什么优势和特点?

  1. HTTP/2 采⽤⼆进制格式来传输数据,⽽⾮ HTTP 1.x 的⽂本格式,⼆进制协议解析起来更⾼效
  2. HTTP/2 采用一些头部压缩技术,减少在请求和响应头中重复携带的数据,降低网络负担
  3. HTTP/2 采⽤服务器推送方式,主动向客户端推送资源,提高页面加载效率
  4. HTTP/2 采⽤多路复用机制,减少需要创建的连接数量,降低资源占用和性能消耗

下面是一些与之关联的技术知识。

⼆进制格式分帧

帧:HTTP/2 数据通信的最⼩单位消息,是指 HTTP/2 中逻辑上的 HTTP 消息(例如请求、响应等)。消息由⼀个或多个帧组成

流:存在于连接中的⼀个虚拟通道,它可以承载双向消息,且每个流都有唯⼀的整数 ID

头部压缩

在 HTTP/1.x 中,请求和响应中会重复携带一些不常改变、冗⻓的头数据,给⽹络带来额外负担。

在 HTTP/2 中,客户端和服务端使⽤ “⾸部表” 来跟踪和存储之前发送过的键值对,

相同的数据不再随着每次请求和响应发送。⾸部表在连接存续期间始终存在,由客户端和服务器共同渐进更新。

每个新的⾸部键值对,要么被追加到当前表的末尾,要么替换表中已存在的键值对。

可以简单的理解为:只发送差异数据,⽽不是全部发送,从⽽减少头部的信息量

服务器推送

服务端可以在发送⻚⾯ HTML 内容时,再主动推送一些其它资源,⽽不⽤等到浏览器解析到相应的位置时发起请求后再作响应。

例如,服务端可以主动把 JS 和 CSS ⽂件推送给客户端,⽽不需要客户端解析 HTML 时再发送这些请求。

不过,服务端的主动推送行为,客户端有权利选择是否要接收。

如果服务端推送的资源已经被浏览器缓存过,浏览器可以通过发送 RST_STREAM 帧来拒收。

多路复用

在 HTTP 1.x 中如果想并发多个请求的话,必须使⽤多个 TCP 链接,但浏览器为了控制资源,

会对单个域名有 6-8 个 TCP 链接的数量限制。而在 HTTP 2 中:

  • 同域名下的所有通信,都在单个连接上完成

  • 单个连接可以承载任意数量的双向数据流

  • 数据流以消息的形式发送,⽽消息⼜由⼀个或多个帧组成(多个帧可以乱序发送,因为可以根据帧⾸部的流标识来重新组装)

    参考文章:HTTP/2 特性及其在实际应用中的表现

11. http 缓存控制

11.1 基本认知

Web 服务缓存 大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 服务器缓存)、浏览器缓存。

浏览器缓存 也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容

HTTP 缓存:

  • 强缓存
  • 协商缓存

在具体了解 HTTP 缓存之前先来明确几个术语:

  • 缓存命中率:从缓存中得到数据的请求数 与 所有请求数的比率。理想状态是越高越好。
  • 过期内容:超过设置的有效时间,被标记为“陈旧”的内容。
  • 验证:验证缓存中的过期内容是否仍然有效,验证通过的话刷新过期时间。
  • 失效:失效就是把内容从缓存中移除。

浏览器缓存主要是 HTTP 协议定义的缓存机制。

浏览器缓存, HTTP 缓存分类

浏览器缓存分为强缓存 协商缓存,浏览器加载一个页面的简单流程如下:

  1. 浏览器先根据这个资源的 http 头信息判断是否命中强缓存

    如果命中则直接加载在缓存中的资源,并不会将请求发送到服务器。(强缓存)

  2. 如果未命中强缓存,则浏览器会将资源加载请求发送到服务器。

    服务器来判断浏览器本地缓存是否失效。

    若可以使用,则服务器并不会返回资源信息,浏览器继续从缓存加载资源。(协商缓存)

  3. 如果未命中协商缓存,则服务器会将完整的资源返回给浏览器,浏览器加载新资源,并更新缓存。(新的请求)

11.2 强缓存 (食品过期时间判断)

(进行判断, 是否资源过期, 如果未过期, 直接用缓存)

强缓存

命中强缓存时,浏览器并不会将请求发送给服务器。

在 Chrome 的开发者工具中看到 http 的返回码是 200,但是在 Size 列会显示为(from cache)。 img 强缓存是利用 http 的返回的响应头中的 Expires 或者 Cache-Control (优先级更高) 两个字段来控制的,用来表示资源的缓存时间。

Expires: 指定一个具体时间(2020 年 12 月 12 日 17:00), 到了这个时间了, 缓存过期了, 在时间内, 都是有效的, 可以直接读

Cache-Control : 指定一个过期时间 (3600s), 这个资源你加载到后, 可以用 3600s

Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age + 请求时间,需要和 Last-modified 结合使用。但在上面我们提到过,cache-control 的优先级更高

Expires 是 Web 服务器响应消息头字段,在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

该字段会返回一个时间,比如 Expires: Wed, 23 Nov 2050 16:00:01 GMT 。这个时间代表着这个资源的失效时间,也就是说在 xx 年 xx 月 xx 日时间之前都是有效的,即命中缓存。

这种方式有一个明显的缺点,由于失效时间是一个绝对时间,所以当 服务器与客户端 时间偏差很大 以后,就会导致缓存混乱。于是发展出了 Cache-Control。

Cache-Control

Cache-Control 是一个相对时间,例如 Cache-Control:max-age 3600,代表着资源的有效期是 3600 秒。

由于是相对时间,并且都是与客户端时间比较,所以服务器与客户端时间偏差也不会导致问题。

Cache-Control 与 Expires 可以在服务端配置同时启用或者启用任意一个,同时启用的时候 Cache-Control 优先级高。

Cache-Control 可以由多个字段组合而成,主要有以下几个取值:

  1. max-age 指定一个时间长度,在这个时间段内缓存是有效的,单位是 s。

    例如设置 Cache-Control:max-age=31536000,也就是说缓存有效期为(31536000 / 24 / 60 / 60)天,

    第一次访问这个资源的时候,服务器端也返回了 Expires 字段,并且过期时间是一年后。

    在没有禁用缓存并且没有超过有效时间的情况下,再次访问这个资源就命中了缓存,不会向服务器请求资源而是直接从浏览器缓存中取。

  2. no-cache 强制所有缓存了该响应的用户,在使用已缓存的数据前,发送带验证的请求到服务器, 问服务器是否可以读缓存。

    不是字面意思上的不缓存。

  3. no-store 禁止缓存,每次请求都要向服务器重新获取数据。

11.3 协商缓存 (找供货商专家协商)

看看过期时间, 食品没过期, 直接吃 (直接读缓存, 不发请求) 强缓存

食品过期时间过了, 能不能吃呢? 问问专家(服务器), 专家瞅了一眼, 没过期 (响应 304, 不返回内容) , 直接吃 (协商缓存)

如果问过专家(服务器), 专家瞅了一眼, 呀真过期了, 原来的不要了, 我重新给你发一个 (响应 200, 并返回内容)

协商缓存

若未命中强缓存(强缓存过期了),则浏览器会将请求发送至服务器。

服务器根据 http 头信息中的Last-Modify/If-Modify-SinceEtag/If-None-Match来判断是否命中协商缓存。

如果命中,则 http 返回码为 304 (你本地之前加载的资源是有效的),浏览器从缓存中加载资源。Last-Modify/If-Modify-Since

浏览器第一次请求一个资源的时候, 服务器返回的 header 中会加上 Last-Modify,

Last-modify 是一个时间标识该资源的最后修改时间,例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT

当浏览器再次请求该资源时,发送的请求头中会包含 If-Modify-Since,该值为缓存之前返回的 Last-Modify

服务器收到 If-Modify-Since 后,根据实际服务器的资源的最后修改时间, 进行判断是否命中缓存。

img

如果命中缓存,则返回 http304,并且不会返回资源内容,并且不会返回 Last-Modify。

由于对比的是服务端时间,所以客户端与服务端时间差距不会导致问题。

但是有时候通过最后修改时间来判断资源是否修改还是不太准确(资源变化了最后修改时间也可以一致)。

比如: 最后修改只能精确到秒级, 一秒进行了多次修改, 就不行了, 于是出现了 ETag/If-None-Match。

ETag/If-None-Match

与 Last-Modify/If-Modify-Since (最后修改时间)不同的是,Etag/If-None-Match 返回的是一个校验码(ETag: entity tag)。

ETag 可以保证每一个资源是唯一的,资源变化都会导致 ETag 变化。

ETag 值的变更则说明资源状态已经被修改。

服务器根据浏览器上发送的 If-None-Match 值来判断是否命中缓存。

ETag 生成靠以下几种因子

  1. 文件的 i-node 编号,是 Linux/Unix 用来识别文件的编号。

  2. 文件最后修改时间

  3. 文件大小

    ...

生成 Etag 的时候,可以使用其中一种或几种因子,使用抗碰撞散列函数来生成。生成一个标记文件的唯一值

既生 Last-Modified 何生 Etag ?

你可能会觉得使用 Last-Modified 已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要 Etag(实体标识)呢?

Etag 的出现主要是为了解决几个 Last-Modified 比较难解决的问题:

  1. Last-Modified 标注的最后修改只能精确到秒级

    如果某些文件在 1 秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间

  2. 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形

Etag 是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加 准确的控制缓存。

不会仅仅只根据最后的修改时间判断是否进行使用缓存

Last-Modified 与 ETag 是可以一起使用的,服务器会优先验证 ETag,一致的情况下,才会继续比对 Last-Modified,

最后才决定是否返回 304。

总结:

  • 强缓存: 大大的减少了 服务器的请求次数, 在过期时间内, 直接从客户端内存中读

  • 协商缓存: 强缓存命中失效了, 超过过期时间了, 拿着标识(最后的修改时间, 唯一标识 etag), 去问服务器, 是否真的过期了

    如果验证通过, 服务器会直接响应 304, 且不会返回资源

TCP

12. TCP 的特性

主要有以下 5 点特性:

  1. TCP 提供⼀种⾯向连接的、可靠的字节流服务

  2. 在⼀个 TCP 连接中,仅有两⽅进⾏彼此通信(⼴播和多播不能⽤于 TCP)

  3. TCP 使⽤校验、确认和重传机制来保证可靠传输

  4. TCP 将数据分节进⾏排序,并使⽤累积来确认保证数据的顺序不变和⾮重复

  5. TCP 使⽤滑动窗⼝机制来实现流量控制,通过动态改变窗⼝的⼤⼩进⾏拥塞控制

13. 简述 TCP 和 UDP 的区别

协议连接性双工性可靠性有序性有界性拥塞控制传输速度量级头部大小
TCP⾯向连接全双工 1:1可靠,有重传机制有序,通过 SYN 排序无边界,有粘包情况20~60 字节
UDP无连接n:m不可靠,丢包后数据丢失无序有边界,无粘包8 字节

UDP socket ⽀持 n 对 m 的连接状态。在 Node.js 官⽅⽂档中有写到在 dgram.createSocket(options[, callback]) 中的 options 中可指定 reuseAddrSO_REUSEADDR 标志,通过它可以简单的实现 n 对 m 的多播特性 (仅在⽀持多播的操作系统上才有用)。

14. 什么是 TCP 粘包,怎么处理?

TCP 连接在默认情况下会启⽤延迟传送算法 (Nagle 算法),它在数据发送前进行缓存数据,如短时间内有多个数据发送,会缓冲后再作⼀次发送操作 (缓冲区⼤⼩可⻅ socket.bufferSize),这样可以减少 IO 产生的消耗,提⾼了性能。

在传输⽂件的情况下,不⽤处理粘包问题,接收到⼀个包就拼接⼀个包就行了。但是,如果是传输多条消息、或是别的⽤途的数据,那么就需要处理粘包。可参⻅⽹上流传甚⼴的⼀个例⼦:连续调⽤两次 send 分别发送两段数据 data1 和 data2,则在接收端会有以下⼏种常⻅情况出现:

  • A. 先收到 data1,然后收到 data2

  • B. 先收到 data1 的部分数据,然后收到 data1 余下的部分以及 data2 的全部

  • C. 先收到 data1 的全部数据和 data2 的部分数据,然后收到 data2 的余下的数据

  • D. ⼀次性收到 data1 和 data2 的全部数据

以上情况中的 B、C、D 三种,就是常⻅的粘包情况。而处理粘包问题的常⻅⽅案有:

方案一:多次发送之前间隔⼀个等待时间

只需等待⼀段时间再做下⼀次send 发送操作就可以了。

  • 它适⽤于交互频率特别低的场景

  • 对于交互频繁的场景来说, 其传输效率太低。

方案二:关闭 Nagle 算法

在 Node.js 中你可以通过 socket.setNoDelay() ⽅法来关闭 Nagle 算法,让每次 send 都不缓冲而直接发送。

  • 该⽅法适⽤于每次发送的数据都⽐较⼤ (但不是如⽂件那么⼤), 并且频率不特别⾼的场景

  • 如果是每次发送的数据量⽐较⼩且频率特别⾼的话,这种方式纯属⾃废武功

  • 该⽅法也不适⽤于⽹络较差的情况,因为 Nagle 算法是在服务端进⾏的包合并情况,但如果短时间内客户端的⽹络

情况不好、或者应⽤层由于某些原因不能及时将 TCP 的数据 recv,就会造成多个包在客户端缓冲从⽽粘包的情况

方案三:进⾏封包/拆包

这是⽬前业内最常⻅的解决⽅案,即在发送每个数据包之前,将⼀些有特征的数据放在数据包前/后,然后在收到数据的时候,根据特征数据来分割出各个数据包。

15. 一次完整的 HTTP 服务过程是什么

当我们在 web 浏览器的地址栏中输入:www.baidu.com,具体发生了什么?

  1. www.baidu.com这个网址进行 DNS 域名解析,得到对应的 IP 地址
  2. 根据这个 IP,找到对应的服务器,发起 TCP 的三次握手 (tcp 三次握手四次挥手 )
  3. 建立 TCP 连接后发起 HTTP 请求
  4. 服务器响应 HTTP 请求,浏览器得到 html 代码
  5. 浏览器解析 html 代码,并请求 html 代码中的资源(如 js、css、图片等)(先得到 html 代码,才能去找这些资源)
  6. 浏览器对页面进行渲染呈现给用户
  7. 服务器关闭 TCP 连接

注:

1.DNS 怎么找到域名的?

DNS 域名解析采用的是递归查询的方式,过程是,先去找 DNS 缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级,这样递归查找之后,找到了,给我们的 web 浏览器

2.为什么 HTTP 协议要基于 TCP 来实现?

TCP 是一个端到端的可靠面向连接的协议,HTTP 基于传输层 TCP 协议不用担心数据传输的各种问题(当发生错误时,可以重传)

3.最后一步浏览器是如何对页面进行渲染的?

a)解析 html 文件构成 DOM 树 b)解析 CSS 文件构成渲染树 c)边解析,边渲染 d)JS 单线程运行,JS 有可能修改 DOM 结构,意味着 JS 执行完成前,后续所有资源的下载是没有必要的,所以 JS 是单线程,会阻塞后续资源下载

16. 什么是 DNS 解析

DNS 解析(域名解析服务器)

假定请求的是 www.baidu.com

a)首先会搜索浏览器自身的 DNS 缓存(缓存时间比较短,大概只有 1 分钟,且只能容纳 1000 条缓存)

b)如果浏览器自身的缓存里面没有找到,那么浏览器会搜索系统自身的 DNS 缓存

c)如果还没有找到,那么尝试从 hosts 文件里面去找

d)在前面三个过程都没获取到的情况下,就递归地去域名服务器去查找(就近查找),具体过程如下 dns域名解析 DNS 优化两个方面:DNS 缓存、DNS 负载均衡 (准备多台 dns 服务器, 进行 dns 解析)

16. 什么是三次握手?

三次握⼿(Three-way Handshake)是指在建⽴⼀个 TCP 连接时,需要客户端和服务器总共发送 3 个包。

三次握⼿的⽬的是连接服务器指定端⼝,建⽴ TCP 连接,并同步连接双⽅的序列号和确认号,交换 TCP 窗⼝⼤⼩信息。在 socket 编程中,客户端调用执行 connect() 时将触发三次握⼿。

下图为三次握手的示意图:

image-20210219192116213

第⼀次握⼿(SYN=1, seq=x)

客户端发送⼀个 TCP 的 SYN 标志位置 1 的包,指明客户端打算连接的服务器的端⼝,以及初始序号 X,保存在包头的序列号(Sequence Number)字段⾥。

发送完毕后,客户端进⼊ SYN_SEND 状态。

第⼆次握⼿(SYN=1, ACK=1, seq=y, ACKnum=x+1)

服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为 1。服务器端选择⾃⼰ ISN 序列号,放到 Seq 域⾥,同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加 1,即 X + 1。

发送完毕后,服务器端进⼊ SYN_RCVD 状态。

第三次握⼿(ACK=1,ACKnum=y+1)

客户端再次发送确认包(ACK),SYN 标志位为 0,ACK 标志位为 1,并且把服务器发来 ACK 的序号字段+1,放在确定字段中发送给对⽅,并且在数据段放写 ISN 的 +1。

发送完毕后,客户端进⼊ ESTABLISHED 状态,当服务器端接收到这个包时,也进⼊ ESTABLISHED 状态,TCP 握⼿结束。

什么是四次挥手?

四次挥⼿(Four-way handshake),也叫做改进的三次握⼿,TCP 连接的拆除需要发送四个包,客户端或服务器均可主动发起挥⼿动作,在 socket 编程中,任何⼀⽅执⾏ close() 操作即可产⽣挥⼿操作。

下图为四次挥手示意图:

image-20210219192659983

第⼀次挥⼿(FIN=1,seq=x)

假设客户端想要关闭连接,客户端发送⼀个 FIN 标志位置为 1 的包,表示⾃⼰已经没有数据可以发送了,但是仍然可以接受数据。发送完毕后,客户端进⼊ FIN_WAIT_1 状态。

第⼆次挥⼿(ACK=1,ACKnum=x+1)

服务器端确认客户端的 FIN 包,发送⼀个确认包,表明⾃⼰接受到了客户端关闭连接的请求,但还没有准备好关闭连接。发送完毕后,服务器端进⼊ CLOSE_WAIT 状态,客户端接收到这个确认包之后,进⼊ FIN_WAIT_2 状态,等待服务器端关闭连接。

第三次挥⼿(FIN=1,seq=y)

服务器端准备好关闭连接时,向客户端发送结束连接请求,FIN 置为 1。发送完毕后,服务器端进⼊ LAST_ACK 状态,等待来⾃客户端的最后⼀个 ACK。

第四次挥⼿(ACK=1,ACKnum=y+1)

客户端接收到来⾃服务器端的关闭请求,发送⼀个确认包,并进⼊ TIME_WAIT 状态,等待可能出现的要求重传的 ACK 包。服务器端接收到这个确认包之后,关闭连接,进⼊ CLOSED 状态。客户端等待了某个固定时间(两个最⼤段⽣命周期,2MSL,2 Maximum Segment Lifetime)之后,没有收到服务器端的 ACK ,认为服务器端已经正常关闭连接,于是⾃⼰也关闭连接,进⼊ CLOSED 状态。

17. TCP 三次握手理解 (双方确认)

TCP 是一个端到端的 可靠 面相连接的协议,

HTTP 基于传输层 TCP 协议不用担心数据传输的各种问题(当发生错误时,可以重传)

根据这个 IP,找到对应的服务器,发起 TCP 的三次握手 (tcp 三次握手四次挥手 )

+ + \ No newline at end of file diff --git a/pages/interviews/js.html b/pages/interviews/js.html index 069abe4..819ff9c 100644 --- a/pages/interviews/js.html +++ b/pages/interviews/js.html @@ -5,15 +5,15 @@ JavaScript 基础 | 我的网站 - - - - + + + + -
Skip to content
目录

JavaScript 基础

1. 解释下什么是变量声明提升?

变量提升(hoisting),是负责解析执行代码的 JavaScript 引擎的工作方式产生的一个特性。

JS 引擎在运行一份代码的时候,会按照下面的步骤进行工作:

  1. 首先,对代码进行预解析,并获取声明的所有变量

  2. 然后,将这些变量的声明语句统一放到代码的最前面

  3. 最后,开始一行一行运行代码

变量的这一转换过程,就被称为变量的声明提升。

而这是不规范, 不合理的, 我们用的 let 就没有这个变量提升的问题

2. JS 的参数是以什么方式进行传递的?

基本类型:是值传递

复杂类型: 传递的是地址! (变量中存的就是地址)

修改参数属性值的话,改变的依然是原地址中的对象本身

js
let a = {
+    
Skip to content
目录

JavaScript 基础

1. 解释下什么是变量声明提升?

变量提升(hoisting),是负责解析执行代码的 JavaScript 引擎的工作方式产生的一个特性。

JS 引擎在运行一份代码的时候,会按照下面的步骤进行工作:

  1. 首先,对代码进行预解析,并获取声明的所有变量

  2. 然后,将这些变量的声明语句统一放到代码的最前面

  3. 最后,开始一行一行运行代码

变量的这一转换过程,就被称为变量的声明提升。

而这是不规范, 不合理的, 我们用的 let 就没有这个变量提升的问题

2. JS 的参数是以什么方式进行传递的?

基本类型:是值传递

复杂类型: 传递的是地址! (变量中存的就是地址)

修改参数属性值的话,改变的依然是原地址中的对象本身

js
let a = {
   count: 1,
 };
 function test(x) {
@@ -53,7 +53,7 @@
 }
 
 cycle();
-

image-20210305172448582

3.4 标记清除算法

现代的浏览器已经不再使用引用计数算法了。

现代浏览器通用的大多是基于标记清除算法的某些改进算法,总体思想都是一致的。

标记清除法:

  • 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。

  • 简单来说,就是从根部(在 JS 中就是全局对象)出发定时扫描内存中的对象。

  • 凡是能从根部到达的对象,都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收。

从这个概念可以看出,无法触及的对象包含了没有引用的对象这个概念(没有任何引用的对象也是无法触及的对象)。

根据这个概念,上面的例子可以正确被垃圾回收处理了。

参考文章:JavaScript 内存管理

4. 谈谈你对 JavaScript 作用域链的理解?

JavaScript 在执⾏过程中会创建一个个的可执⾏上下⽂。 (每个函数执行都会创建这么一个可执行上下文)

每个可执⾏上下⽂的词法环境中包含了对外部词法环境的引⽤,可通过该引⽤来获取外部词法环境中的变量和声明等。

这些引⽤串联起来,⼀直指向全局的词法环境,形成一个链式结构,被称为作⽤域链。

简而言之: 这样的变量作用域访问的链式结构, 被称之为作用域链

js 全局有全局可执行上下文, 每个函数调用时, 有着函数的可执行上下文, 会入 js 调用栈

每个可执行上下文, 都有着对于外部上下文词法作用域的引用, 外部上下文也有着对于再外部的上下文词法作用域的引用

=> 就形成了作用域链

5. 谈谈你对原型链的理解

原型和原型链

  1. 原型是为了实现面向对象的手段,原型链是为了实现继承

  2. 实现面向对象的两种方式: 基于类的面向对象和基于原型的面向对象

  3. 通过原型能知道对象的类型,不然会丢失对象的类型

  4. 通过一个构造函数实例化,产生一个实例对象,实例对象里会有一个 _proto_属性指向原型对象原型对象里面记录该实例对象的类型,这个实例对象constructor 指回 构造函数构造函数里面有一个 prototype 指向原型对象

要讲清楚这个问题,主要着重这几个方面:

  • 什么是原型对象
  • 构造函数, 原型对象, 实例的三角关系图
  • 原型链如何形成 image-20210306104516852

原型对象

在 JavaScript 中,除去一部分内建函数,绝大多数的函数都会包含有一个叫做 prototype 的属性,指向原型对象,

基于构造函数创建出来的实例, 都可以共享访问原型对象的属性。

例如我们的 hasOwnProperty, toString ⽅法等其实是 Obejct 原型对象的方法,它可以被任何对象当做⾃⼰的⽅法来使⽤。

hasOwnProperty 用于判断, 某个属性, 是不是自己的 (还是原型链上的)

原型链

在 JavaScript 中,每个对象中都有一个 __proto__ 属性,这个属性指向了当前对象的构造函数的原型。

对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来,

而因为它的原型对象也有 __proto__,因此这样就串联形成一个链式结构,也就是我们称为的原型链。

image-20210218212449526

6. 谈谈你对闭包的理解?

这个问题想考察的主要有两个方面:

  • 对闭包的基本概念的理解
  • 对闭包的作用的了解

什么是闭包?

MDN 的官方解释:

闭包是函数和声明该函数的词法环境的组合

更通俗一点的解释是:

闭包的主要作用是什么? 在实际开发中,闭包最大的作用就是用来

js
function Person() {
+

image-20210305172448582

3.4 标记清除算法

现代的浏览器已经不再使用引用计数算法了。

现代浏览器通用的大多是基于标记清除算法的某些改进算法,总体思想都是一致的。

标记清除法:

  • 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。

  • 简单来说,就是从根部(在 JS 中就是全局对象)出发定时扫描内存中的对象。

  • 凡是能从根部到达的对象,都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收。

从这个概念可以看出,无法触及的对象包含了没有引用的对象这个概念(没有任何引用的对象也是无法触及的对象)。

根据这个概念,上面的例子可以正确被垃圾回收处理了。

参考文章:JavaScript 内存管理

4. 谈谈你对 JavaScript 作用域链的理解?

JavaScript 在执⾏过程中会创建一个个的可执⾏上下⽂。 (每个函数执行都会创建这么一个可执行上下文)

每个可执⾏上下⽂的词法环境中包含了对外部词法环境的引⽤,可通过该引⽤来获取外部词法环境中的变量和声明等。

这些引⽤串联起来,⼀直指向全局的词法环境,形成一个链式结构,被称为作⽤域链。

简而言之: 这样的变量作用域访问的链式结构, 被称之为作用域链

js 全局有全局可执行上下文, 每个函数调用时, 有着函数的可执行上下文, 会入 js 调用栈

每个可执行上下文, 都有着对于外部上下文词法作用域的引用, 外部上下文也有着对于再外部的上下文词法作用域的引用

=> 就形成了作用域链

5. 谈谈你对原型链的理解

要讲清楚这个问题,主要着重这几个方面:

  • 什么是原型对象
  • 构造函数, 原型对象, 实例的三角关系图
  • 原型链如何形成 image-20210306104516852

原型对象

在 JavaScript 中,除去一部分内建函数,绝大多数的函数都会包含有一个叫做 prototype 的属性,指向原型对象,

基于构造函数创建出来的实例, 都可以共享访问原型对象的属性。

例如我们的 hasOwnProperty, toString ⽅法等其实是 Obejct 原型对象的方法,它可以被任何对象当做⾃⼰的⽅法来使⽤。

hasOwnProperty 用于判断, 某个属性, 是不是自己的 (还是原型链上的)

原型链

在 JavaScript 中,每个对象中都有一个 __proto__ 属性,这个属性指向了当前对象的构造函数的原型。

对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来,

而因为它的原型对象也有 __proto__,因此这样就串联形成一个链式结构,也就是我们称为的原型链。

image-20210218212449526

6. 谈谈你对闭包的理解?

这个问题想考察的主要有两个方面:

  • 对闭包的基本概念的理解
  • 对闭包的作用的了解

什么是闭包?

MDN 的官方解释:

闭包是函数和声明该函数的词法环境的组合

更通俗一点的解释是:

闭包的主要作用是什么? 在实际开发中,闭包最大的作用就是用来

js
function Person() {
   // 以 let 声明一个局部变量,而不是 this.name
   // this.name = 'zs'     =>  p.name
   let name = "hm_programmer"; // 数据私有
@@ -165,9 +165,9 @@
 Promise.all([promise1, promise2, promise3]).then((values) => {
   // values 是一个数组, 会收集前面promise的结果 values[0] => promise1的成功的结果
 });
-

Promise.race([promise1, promise2, promise3]) 赛跑, 竞速原则, 只要三个 promise 中有一个满足条件, 就会执行.then(用的较少)

11. 宏任务 微任务 是什么

它执行所有处于等待中的 JavaScript 任务(宏任务),然后是微任务,然后在开始下一次循环之前执行一些必要的渲染和绘制操作。 网页或者 app 的代码和浏览器本身的用户界面程序运行在相同的 线程中,共享相同的 事件循环。

每次当一个任务退出且执行上下文为空的时候,微任务队列中的每一个微任务会依次被执行。不同的是它会等到微任务队列为空才会停止执行——即使中途有微任务加入。

换句话说,微任务可以添加新的微任务到队列中,并在下一个任务开始执行之前且当前事件循环结束之前执行完所有的微任务。 由于你的代码和浏览器的用户界面运行在同一个线程中,共享同一个事件循环,假如你的代码阻塞了或者进入了无限循环,则浏览器将会卡死。…

  • 宏任务: 主线程代码,异步 Ajax 请求 setTimeout、setInterval文件操作等其它宏任务属于宏任务, 上一个宏任务执行完, 才会考虑执行下一个宏任务

  • 微任务: promise .then .catch和 .finallyprocess.nextTick 等其它微任务属于微任务, 满足条件的微任务, 会被添加到当前宏任务的最后去执行

image-20201208040306978

事件循环队列 eventLoopimage-20201208040235602

参考文章:宏任务,微任务

12. async/await 是什么?

ES7 标准中新增的 async 函数,从目前的内部实现来说其实就是 Generator 函数的语法糖。

它基于 Promise,并与所有现存的基于 Promise 的 API 兼容。

async 关键字

  1. async 关键字用于声明⼀个异步函数(如 async function asyncTask1() {...}

  2. async 会⾃动将常规函数转换成 Promise,返回值也是⼀个 Promise 对象

  3. async 函数内部可以使⽤ await

await 关键字

  1. await 用于等待异步的功能执⾏完毕 var result = await someAsyncCall()

  2. await 放置在 Promise 调⽤之前,会强制 async 函数中其他代码等待,直到 Promise 完成并返回结果

  3. await 只能与 Promise ⼀起使⽤

  4. await 只能在 async 函数内部使⽤

13. 前端如何实现即时通讯?

基于 Web 的前端,存在以下几种可实现即时通讯的方式:

  • 短轮询
  • Comet
  • SSE
  • WebSocket

短轮询

短轮询就是客户端定时发送请求,获取服务器上的最新数据。不是真正的即时通讯,但一定程度上可以模拟即时通讯的效果。

优缺点:

  • 优点:浏览器兼容性好,实现简单
  • 缺点:实时性不高,资源消耗高,存在较多无用请求,影响性能

Comet

有两种实现 Comet 的方式:

  1. 使用 Ajax 长轮询(long-polling)
  2. 使用 HTTP 长连接(基于 iframe 和 htmlfile 的流)

优缺点:

  • 优点:浏览器兼容性好,即时性好,不存在⽆⽤请求

  • 缺点:服务器压力较大(维护⻓连接会消耗较多服务器资源)

参考文章:Comet 技术详解

SSE

服务端推送事件(Server-Sent Event),它是⼀种允许服务端向客户端推送新数据的 HTML5 技术。

优缺点:

  • 优点:基于 HTTP,无需太多改造就能使⽤;相比 WebSocket 要简单方便很多

  • 缺点:基于⽂本传输,效率没有 WebSocket ⾼;不是严格的双向通信,客户端⽆法复⽤连接来向服务端发送请求,

    而是每次都需重新创建新请求

参考文章:SSE 教程

WebSocket

这是基于 TCP 协议的全新、独⽴的协议,作⽤是在服务器和客户端之间建⽴实时的双向通信。

WebSocket 协议与 HTTP 协议保持兼容,但它不会融⼊ HTTP 协议,仅作为 HTML 5 的⼀部分。

优缺点:

  • 优点:真正意义上的双向实时通信,性能好、延迟低

  • 缺点:由于是独⽴于 HTTP 的协议,因此要使用的话需要对项⽬作改造;使⽤复杂度较⾼,通常需要引⼊成熟的库;并且⽆法兼容低版本的浏览器

HTTP 和 WebSocket 的连接通信比较图:

image-20210221101152845

14. 什么是浏览器的同源策略?

首先,同源是指资源地址的 "协议 + 域名 + 端⼝" 三者都相同,即使两个不同域名指向了同⼀ IP 地址,也被判断为⾮同源。

了解了什么是同源,再来说同源策略。

同源策略是一种⽤于隔离潜在恶意⽂件的重要安全保护机制,它用于限制从⼀个源加载的⽂档或脚本与来⾃另⼀个源的资源进⾏交互。

在浏览器中,⼤部分内容都受同源策略限制,除了以下三个标签:

  • <img>
  • <link>
  • script

15. 如何实现跨域?

历史上出现过的跨域⼿段有很多,本章主要介绍目前主流的 3 种跨域⽅案:

  • JSONP
  • CORS
  • 服务器代理(webpack 代理, Nginx 反向代理)

参考文章:跨域方式实现原理

16. Babel 的原理是什么?

Babel 的主要工作是对代码进行转译。

转译分为三阶段:

  • 解析(Parse),将代码解析⽣成抽象语法树 AST,也就是词法分析与语法分析的过程

  • 转换(Transform),对 AST 进⾏变换方面的⼀系列操作。通过 babel-traverse,对 AST 进⾏遍历并作添加、更新、删除等操作

  • ⽣成(Generate),通过 babel-generator 将变换后的 AST 转换为 JS 代码

- - +

Promise.race([promise1, promise2, promise3]) 赛跑, 竞速原则, 只要三个 promise 中有一个满足条件, 就会执行.then(用的较少)

11. 宏任务 微任务 是什么

它执行所有处于等待中的 JavaScript 任务(宏任务),然后是微任务,然后在开始下一次循环之前执行一些必要的渲染和绘制操作。 网页或者 app 的代码和浏览器本身的用户界面程序运行在相同的 线程中,共享相同的 事件循环。

每次当一个任务退出且执行上下文为空的时候,微任务队列中的每一个微任务会依次被执行。不同的是它会等到微任务队列为空才会停止执行——即使中途有微任务加入。

换句话说,微任务可以添加新的微任务到队列中,并在下一个任务开始执行之前且当前事件循环结束之前执行完所有的微任务。 由于你的代码和浏览器的用户界面运行在同一个线程中,共享同一个事件循环,假如你的代码阻塞了或者进入了无限循环,则浏览器将会卡死。…

  • 宏任务: 主线程代码,异步 Ajax 请求 setTimeout、setInterval文件操作等其它宏任务属于宏任务, 上一个宏任务执行完, 才会考虑执行下一个宏任务

  • 微任务: promise .then .catch和 .finallyprocess.nextTick 等其它微任务属于微任务, 满足条件的微任务, 会被添加到当前宏任务的最后去执行

image-20201208040306978

事件循环队列 eventLoopimage-20201208040235602

参考文章:宏任务,微任务

12. async/await 是什么?

ES7 标准中新增的 async 函数,从目前的内部实现来说其实就是 Generator 函数的语法糖。

它基于 Promise,并与所有现存的基于 Promise 的 API 兼容。

async 关键字

  1. async 关键字用于声明⼀个异步函数(如 async function asyncTask1() {...}

  2. async 会⾃动将常规函数转换成 Promise,返回值也是⼀个 Promise 对象

  3. async 函数内部可以使⽤ await

await 关键字

  1. await 用于等待异步的功能执⾏完毕 var result = await someAsyncCall()

  2. await 放置在 Promise 调⽤之前,会强制 async 函数中其他代码等待,直到 Promise 完成并返回结果

  3. await 只能与 Promise ⼀起使⽤

  4. await 只能在 async 函数内部使⽤

13. 前端如何实现即时通讯?

基于 Web 的前端,存在以下几种可实现即时通讯的方式:

  • 短轮询
  • Comet
  • SSE
  • WebSocket

短轮询

短轮询就是客户端定时发送请求,获取服务器上的最新数据。不是真正的即时通讯,但一定程度上可以模拟即时通讯的效果。

优缺点:

  • 优点:浏览器兼容性好,实现简单
  • 缺点:实时性不高,资源消耗高,存在较多无用请求,影响性能

Comet

有两种实现 Comet 的方式:

  1. 使用 Ajax 长轮询(long-polling)
  2. 使用 HTTP 长连接(基于 iframe 和 htmlfile 的流)

优缺点:

  • 优点:浏览器兼容性好,即时性好,不存在⽆⽤请求

  • 缺点:服务器压力较大(维护⻓连接会消耗较多服务器资源)

参考文章:Comet 技术详解

SSE

服务端推送事件(Server-Sent Event),它是⼀种允许服务端向客户端推送新数据的 HTML5 技术。

优缺点:

  • 优点:基于 HTTP,无需太多改造就能使⽤;相比 WebSocket 要简单方便很多

  • 缺点:基于⽂本传输,效率没有 WebSocket ⾼;不是严格的双向通信,客户端⽆法复⽤连接来向服务端发送请求,

    而是每次都需重新创建新请求

参考文章:SSE 教程

WebSocket

这是基于 TCP 协议的全新、独⽴的协议,作⽤是在服务器和客户端之间建⽴实时的双向通信。

WebSocket 协议与 HTTP 协议保持兼容,但它不会融⼊ HTTP 协议,仅作为 HTML 5 的⼀部分。

优缺点:

  • 优点:真正意义上的双向实时通信,性能好、延迟低

  • 缺点:由于是独⽴于 HTTP 的协议,因此要使用的话需要对项⽬作改造;使⽤复杂度较⾼,通常需要引⼊成熟的库;并且⽆法兼容低版本的浏览器

HTTP 和 WebSocket 的连接通信比较图:

image-20210221101152845

14. 什么是浏览器的同源策略?

首先,同源是指资源地址的 "协议 + 域名 + 端⼝" 三者都相同,即使两个不同域名指向了同⼀ IP 地址,也被判断为⾮同源。

了解了什么是同源,再来说同源策略。

同源策略是一种⽤于隔离潜在恶意⽂件的重要安全保护机制,它用于限制从⼀个源加载的⽂档或脚本与来⾃另⼀个源的资源进⾏交互。

在浏览器中,⼤部分内容都受同源策略限制,除了以下三个标签:

  • <img>
  • <link>
  • script

15. 如何实现跨域?

历史上出现过的跨域⼿段有很多,本章主要介绍目前主流的 3 种跨域⽅案:

  • JSONP
  • CORS
  • 服务器代理(webpack 代理, Nginx 反向代理)

参考文章:跨域方式实现原理

16. Babel 的原理是什么?

Babel 的主要工作是对代码进行转译。

转译分为三阶段:

  • 解析(Parse),将代码解析⽣成抽象语法树 AST,也就是词法分析与语法分析的过程

  • 转换(Transform),对 AST 进⾏变换方面的⼀系列操作。通过 babel-traverse,对 AST 进⾏遍历并作添加、更新、删除等操作

  • ⽣成(Generate),通过 babel-generator 将变换后的 AST 转换为 JS 代码

+ + \ No newline at end of file diff --git a/pages/interviews/networkrotocols.html b/pages/interviews/networkrotocols.html index f8d1249..47c3b91 100644 --- a/pages/interviews/networkrotocols.html +++ b/pages/interviews/networkrotocols.html @@ -5,15 +5,15 @@ 网络分层模型和应用协议 | 我的网站 - - - - + + + + -
Skip to content
目录

网络分层模型和应用协议

分层模型

分层的意义

当遇到一个复杂问题的时候,可以使用分层的思想把问题简单化 从常理出发,我们可以得出以下结论:

  • 每层相对独立,只需解决自己的问题
  • 每层无须考虑上层的交付,仅需把自己的结果交给下层即可
  • 每层有多种方案可供选择,选择不同的方案不会对上下层造成影响
  • 每一层会在上一层的基础上增加一些额外信息

五层网络模型

网络要解决的问题是:两个程序之间如何交换数据

这是一个非常复杂的问题,因为两个程序有可能出现在不同的设备上。

面对复杂的问题,可以使用分层的方式来简化。

经过不断的演化,网络最终形成了五层模型:

image-20211008163417521

数据的传输

image-20211008163458168

四层、五层、七层

image-20211008164017299

应用层协议

URL

URL(uniform resource locator,统一资源定位符)用于定位网络服务

image-20230112104100679

URL 是一个固定格式的字符串

image-20230112102913056

它表达了:

从网络中==哪台计算机(domain)==中的==哪个程序(port)==寻找==哪个服务(path)==,并注明了获取服务的==具体细节(query)==,以及要用什么样的==协议通信(schema)==

这里面包含了一些细节:

  • 当协议是http端口为80时,端口可以省略
  • 当协议是https端口为443时,端口可以省略
  • schemadomainpath是必填的,其他的根据具体的要求填写

HTTP

超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个广泛运用于互联网的应用层协议。

99%的情况下,前端开发者接触的都是 HTTP 协议。

该协议规定了两个方面的内容:

  • 传递消息的模式
  • 传递消息的格式

传递消息的模式

image-20230112110047746

HTTP 使用了一种极为简单的消息传递模式,「请求-响应」模式

发起请求的称之为客户端,接收请求并完成响应的称之为服务器。

「请求-响应」完成后,一次交互结束。

传递消息的格式

image-20230113214343300

HTTP 的消息格式是一种纯文本的格式,文本分为三个部分:

请求行
+    
Skip to content
目录

网络分层模型和应用协议

分层模型

分层的意义

当遇到一个复杂问题的时候,可以使用分层的思想把问题简单化 从常理出发,我们可以得出以下结论:

  • 每层相对独立,只需解决自己的问题
  • 每层无须考虑上层的交付,仅需把自己的结果交给下层即可
  • 每层有多种方案可供选择,选择不同的方案不会对上下层造成影响
  • 每一层会在上一层的基础上增加一些额外信息

五层网络模型

网络要解决的问题是:两个程序之间如何交换数据

这是一个非常复杂的问题,因为两个程序有可能出现在不同的设备上。

面对复杂的问题,可以使用分层的方式来简化。

经过不断的演化,网络最终形成了五层模型:

image-20211008163417521

数据的传输

image-20211008163458168

四层、五层、七层

image-20211008164017299

应用层协议

URL

URL(uniform resource locator,统一资源定位符)用于定位网络服务

image-20230112104100679

URL 是一个固定格式的字符串

image-20230112102913056

它表达了:

从网络中==哪台计算机(domain)==中的==哪个程序(port)==寻找==哪个服务(path)==,并注明了获取服务的==具体细节(query)==,以及要用什么样的==协议通信(schema)==

这里面包含了一些细节:

  • 当协议是http端口为80时,端口可以省略
  • 当协议是https端口为443时,端口可以省略
  • schemadomainpath是必填的,其他的根据具体的要求填写

HTTP

超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个广泛运用于互联网的应用层协议。

99%的情况下,前端开发者接触的都是 HTTP 协议。

该协议规定了两个方面的内容:

  • 传递消息的模式
  • 传递消息的格式

传递消息的模式

image-20230112110047746

HTTP 使用了一种极为简单的消息传递模式,「请求-响应」模式

发起请求的称之为客户端,接收请求并完成响应的称之为服务器。

「请求-响应」完成后,一次交互结束。

传递消息的格式

image-20230113214343300

HTTP 的消息格式是一种纯文本的格式,文本分为三个部分:

请求行
 请求头
 
 请求体
@@ -43,9 +43,9 @@
 
 123456
 ------WebKitFormBoundaryraPtlntBIqy4X2Ho--
-
响应码

响应码(状态码、消息码)是响应行中的一个数字,后面往往跟上一个对应的单词,用于表达服务器对这个响应的整体「态度」

常见的响应码有:

image-20230112131000507

常见的状态码有:

  1. 200 OK:一切正常。

  2. 301 Moved Permanently:资源已被永久重定向。

    你的请求我收到了,但是呢,你要的东西不在这个地址了,我已经永远的把它移动到了一个新的地址,麻烦你取请求新的地址,地址我放到了响应头的Location中了

    试试请求:www.douyutv.com

  3. 302 Found:资源已被临时重定向。

    你的请求我收到了,但是呢,你要的东西不在这个地址了,我临时的把它移动到了一个新的地址,麻烦你取请求新的地址,地址我放到了请求头的Location中了

  4. 304 Not Modified:文档内容未被修改。

    你的请求我收到了,你要的东西跟之前是一样的,没有任何的变化,所以我就不给你结果了,你自己就用以前的吧。啥?你没有缓存以前的内容,关我啥事

  5. 400 Bad Request:语义有误,当前请求无法被服务器理解。

    你给我发的是个啥啊,我听都听不懂

  6. 403 Forbidden:服务器拒绝执行。

    你的请求我已收到,但是我就是不给你东西

  7. 404 Not Found:资源不存在。

    你的请求我收到了,但我没有你要的东西

  8. 500 Internal Server Error:服务器内部错误。

    你的请求我已收到,但这道题我不会,解不出来,先睡了

响应头 - Content-Type

Content-Type标注了附带的响应体是什么格式

常见的值有:

  1. text/plain: 普通的纯文本
  2. text/html:html 文档
  3. text/javascriptapplication/javascript:js 代码
  4. text/css:css 代码
  5. image/jpeg:jpg 图片
  6. attachment:附件
  7. 其他MIME类型
- - +
响应码

响应码(状态码、消息码)是响应行中的一个数字,后面往往跟上一个对应的单词,用于表达服务器对这个响应的整体「态度」

常见的响应码有:

image-20230112131000507

常见的状态码有:

  1. 200 OK:一切正常。

  2. 301 Moved Permanently:资源已被永久重定向。

    你的请求我收到了,但是呢,你要的东西不在这个地址了,我已经永远的把它移动到了一个新的地址,麻烦你取请求新的地址,地址我放到了响应头的Location中了

    试试请求:www.douyutv.com

  3. 302 Found:资源已被临时重定向。

    你的请求我收到了,但是呢,你要的东西不在这个地址了,我临时的把它移动到了一个新的地址,麻烦你取请求新的地址,地址我放到了请求头的Location中了

  4. 304 Not Modified:文档内容未被修改。

    你的请求我收到了,你要的东西跟之前是一样的,没有任何的变化,所以我就不给你结果了,你自己就用以前的吧。啥?你没有缓存以前的内容,关我啥事

  5. 400 Bad Request:语义有误,当前请求无法被服务器理解。

    你给我发的是个啥啊,我听都听不懂

  6. 403 Forbidden:服务器拒绝执行。

    你的请求我已收到,但是我就是不给你东西

  7. 404 Not Found:资源不存在。

    你的请求我收到了,但我没有你要的东西

  8. 500 Internal Server Error:服务器内部错误。

    你的请求我已收到,但这道题我不会,解不出来,先睡了

响应头 - Content-Type

Content-Type标注了附带的响应体是什么格式

常见的值有:

  1. text/plain: 普通的纯文本
  2. text/html:html 文档
  3. text/javascriptapplication/javascript:js 代码
  4. text/css:css 代码
  5. image/jpeg:jpg 图片
  6. attachment:附件
  7. 其他MIME类型
+ + \ No newline at end of file diff --git a/pages/interviews/vue.html b/pages/interviews/vue.html index dde4ee3..99568f3 100644 --- a/pages/interviews/vue.html +++ b/pages/interviews/vue.html @@ -5,17 +5,17 @@ vue2 相关 | 我的网站 - - - - + + + + -
Skip to content
目录

vue2 相关

vue 原理面试

1. 什么是 MVVM?

Model 层

对应数据层的域模型,主要用来做域模型的同步。

通过 Ajaxfetch 等 API 完成客户端和服务端业务模型的同步。

在分层关系中,它主要⽤于抽象出 ViewModel 层中视图的 Model。

View 层

作为视图模板存在,其实在 MVVM 中整个 View 就是⼀个动态模板。

除了用于定义结构和布局之外,它还展示了 ViewModel 层的数据和状态。

View 层并不负责状态的实际处理,它只是做:数据绑定声明、 指令声明、 事件绑定声明。

ViewModel 层

负责暴露数据给 View 层,并对 View 层中的数据绑定声明、 指令声明、 事件绑定声明进行实际的业务逻辑。

ViewModel 底层会做好绑定属性的监听,当 ViewModel 中的数据变化时,View 层会自动进行更新;⽽当 View 中声明了数据的双向绑定(表单元素),框架也会监听 View 层(表单元素)值的变化,⼀旦变化,则 View 层绑定的 ViewModel 中的数据也会得到⾃动更新。

2. MVVM 的优缺点有哪些?

优点

  1. 实现了视图(View)和模型(Model)的分离,降低代码耦合、提⾼视图或逻辑的复⽤性

⽐如:View 可以独⽴于 Model 变化和修改,⼀个 ViewModel 可以绑定于不同的 "View",当 View 发生变化时 Model 一定会随之改变,而当 Model 变化时则 View 可以不变。我们可以把⼀些视图逻辑放在⼀个 ViewModel ⾥,以此让多个 View 重⽤这段视图逻辑。

  1. 提⾼了可测试性:ViewModel 的存在可以帮助开发者更好地编写测试代码

  2. 能⾃动更新 DOM:利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动操作 DOM 中解放出来

缺点

  1. Bug 很难被调试:因为使⽤了双向绑定的模式,当我们看到界⾯发生异常了,有可能是 View 的代码产生的 Bug,也有可能是 Model 代码的问题。数据绑定使得⼀个位置的 Bug 被快速传递到别的位置,要定位原始出问题的地⽅就变得不那么容易了。另外,数据绑定的声明是指令式地写在 View 模版中的,它们没办法打断点进行 Debug

  2. 在⼀个⼤的模块中 Model 也会很⼤,虽然使⽤上来说⽅便了,也能很容易的保证了数据的⼀致性,但如果⻓期持有不释放内存,就会造成更多的内存消耗

  3. 对于⼤型的图形应⽤程序,视图状态较多,ViewModel 的构建和维护的成本都会⽐较⾼

3. 谈谈对 Vue 生命周期的理解?

生命周期的概念

每个 Vue 实例都有⼀个完整的⽣命周期:

  1. 开始创建
  2. 初始化数据
  3. 编译模版
  4. 挂载 DOM
  5. 渲染、更新数据 => 重新渲染
  6. 卸载

这⼀系列过程我们称之为 Vue 的⽣命周期。

5. Vue 组件之间如何进行通信?

props$emit + v-on

通过 props 将数据在组件树中进行⾃上⽽下的传递;

通过 $emitv-on 来作信息的向上传递。

EventBus

可通过 EventBus 进⾏信息的发布与订阅。

Vuex

全局状态管理库。可通过它来进行全局数据流的管理。

$attrs$listeners

在 Vue 2.4 版本中加⼊的 $attrs$listeners 可以用来作为跨级组件之间的通信机制。

provideinject

由于 provideinject 可以允许⼀个祖先组件向它的所有⼦孙组件注⼊⼀个依赖(不论组件层次有多深),并在其上下游关系成⽴的时间⾥始终⽣效,因此这种机制也就成为了一种跨组件通信的手段。

另外还有一些方式使用场景有限,在此不介绍了。

可以阅读参考文章:Vue 中的 8 种组件通信方式

6. Vue 双向绑定原理?

在 Vue 2.x 中,利⽤的是 Object.defineProperty 去劫持对象的访问器(Getter、Setter),当对象属性值发⽣变化时可获取变化,然后根据变化来作后续响应;

在 Vue 3.0 中,则是通过 Proxy 代理对象进⾏类似的操作。

7. Object.defineProperty 和 Proxy 的优缺点?

Proxy

  • 可以直接监听整个对象,⽽⾮是对象的属性

  • 可以直接监听数组的变化

  • 拦截⽅法丰富:多达 13 种,不限于 applyownKeysdeletePropertyhas 等。比 Object.defineProperty 强大很多

  • 返回的是⼀个新对象,可以在不影响原对象的情况下,只操作新对象来达到⽬的;⽽ Object.defineProperty 只能遍历原对象属性并直接修改原对象

  • 受到各浏览器⼚商的重点持续性能优化,能享受到作为新标准的性能红利

Object.defineProperty

  • 兼容性较好(可⽀持到 IE9)

8. 如何理解 Vue 的响应式系统?

(考察 MVVM) M: model 数据模型, V:view 视图模型, VM: viewModel 视图数据模型

双向:

  1. 视图变化了, 数据自动更新 => 监听原生的事件即可, 输入框变了, 监听输入框 input 事件
  2. 数据变化了, 视图要自动更新 => vue2 和 vue3

基本原理

vue2.0 数据劫持: Object.defineProperty (es5)

vue3.0 数据劫持: Proxy (es6)

分析 :此题考查 Vue 的 MVVM 原理

解答: Vue 的双向绑定原理其实就是 MVVM 的基本原理, Vuejs 官网已经说明, 实际就是通过 Object.defineProperty 方法 完成了对于 Vue 实例中数据的 劫持, 通过对于 data 中数据 进行 set 的劫持监听, 然后通过**观察者模式**, 通知 对应的绑定节点 进行节点数据更新, 完成数据驱动视图的更新

简单概述 : 通过 Object.defineProperty 完成对于数据的劫持, 通过观察者模式, 完成对于节点的数据更新

- - +
Skip to content
目录

vue2 相关

vue 原理面试

1. 什么是 MVVM?

Model 层

对应数据层的域模型,主要用来做域模型的同步。

通过 Ajaxfetch 等 API 完成客户端和服务端业务模型的同步。

在分层关系中,它主要⽤于抽象出 ViewModel 层中视图的 Model。

View 层

作为视图模板存在,其实在 MVVM 中整个 View 就是⼀个动态模板。

除了用于定义结构和布局之外,它还展示了 ViewModel 层的数据和状态。

View 层并不负责状态的实际处理,它只是做:数据绑定声明、 指令声明、 事件绑定声明。

ViewModel 层

负责暴露数据给 View 层,并对 View 层中的数据绑定声明、 指令声明、 事件绑定声明进行实际的业务逻辑。

ViewModel 底层会做好绑定属性的监听,当 ViewModel 中的数据变化时,View 层会自动进行更新;⽽当 View 中声明了数据的双向绑定(表单元素),框架也会监听 View 层(表单元素)值的变化,⼀旦变化,则 View 层绑定的 ViewModel 中的数据也会得到⾃动更新。

2. MVVM 的优缺点有哪些?

优点

  1. 实现了视图(View)和模型(Model)的分离,降低代码耦合、提⾼视图或逻辑的复⽤性

⽐如:View 可以独⽴于 Model 变化和修改,⼀个 ViewModel 可以绑定于不同的 "View",当 View 发生变化时 Model 一定会随之改变,而当 Model 变化时则 View 可以不变。我们可以把⼀些视图逻辑放在⼀个 ViewModel ⾥,以此让多个 View 重⽤这段视图逻辑。

  1. 提⾼了可测试性:ViewModel 的存在可以帮助开发者更好地编写测试代码

  2. 能⾃动更新 DOM:利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动操作 DOM 中解放出来

缺点

  1. Bug 很难被调试:因为使⽤了双向绑定的模式,当我们看到界⾯发生异常了,有可能是 View 的代码产生的 Bug,也有可能是 Model 代码的问题。数据绑定使得⼀个位置的 Bug 被快速传递到别的位置,要定位原始出问题的地⽅就变得不那么容易了。另外,数据绑定的声明是指令式地写在 View 模版中的,它们没办法打断点进行 Debug

  2. 在⼀个⼤的模块中 Model 也会很⼤,虽然使⽤上来说⽅便了,也能很容易的保证了数据的⼀致性,但如果⻓期持有不释放内存,就会造成更多的内存消耗

  3. 对于⼤型的图形应⽤程序,视图状态较多,ViewModel 的构建和维护的成本都会⽐较⾼

3. 谈谈对 Vue 生命周期的理解?

生命周期的概念

每个 Vue 实例都有⼀个完整的⽣命周期:

  1. 开始创建
  2. 初始化数据
  3. 编译模版
  4. 挂载 DOM
  5. 渲染、更新数据 => 重新渲染
  6. 卸载

这⼀系列过程我们称之为 Vue 的⽣命周期。

5. Vue 组件之间如何进行通信?

props$emit + v-on

通过 props 将数据在组件树中进行⾃上⽽下的传递;

通过 $emitv-on 来作信息的向上传递。

EventBus

可通过 EventBus 进⾏信息的发布与订阅。

Vuex

全局状态管理库。可通过它来进行全局数据流的管理。

$attrs$listeners

在 Vue 2.4 版本中加⼊的 $attrs$listeners 可以用来作为跨级组件之间的通信机制。

provideinject

由于 provideinject 可以允许⼀个祖先组件向它的所有⼦孙组件注⼊⼀个依赖(不论组件层次有多深),并在其上下游关系成⽴的时间⾥始终⽣效,因此这种机制也就成为了一种跨组件通信的手段。

另外还有一些方式使用场景有限,在此不介绍了。

可以阅读参考文章:Vue 中的 8 种组件通信方式

6. Vue 双向绑定原理?

在 Vue 2.x 中,利⽤的是 Object.defineProperty 去劫持对象的访问器(Getter、Setter),当对象属性值发⽣变化时可获取变化,然后根据变化来作后续响应;

在 Vue 3.0 中,则是通过 Proxy 代理对象进⾏类似的操作。

7. Object.defineProperty 和 Proxy 的优缺点?

Proxy

  • 可以直接监听整个对象,⽽⾮是对象的属性

  • 可以直接监听数组的变化

  • 拦截⽅法丰富:多达 13 种,不限于 applyownKeysdeletePropertyhas 等。比 Object.defineProperty 强大很多

  • 返回的是⼀个新对象,可以在不影响原对象的情况下,只操作新对象来达到⽬的;⽽ Object.defineProperty 只能遍历原对象属性并直接修改原对象

  • 受到各浏览器⼚商的重点持续性能优化,能享受到作为新标准的性能红利

Object.defineProperty

  • 兼容性较好(可⽀持到 IE9)

8. 如何理解 Vue 的响应式系统?

(考察 MVVM) M: model 数据模型, V:view 视图模型, VM: viewModel 视图数据模型

双向:

  1. 视图变化了, 数据自动更新 => 监听原生的事件即可, 输入框变了, 监听输入框 input 事件
  2. 数据变化了, 视图要自动更新 => vue2 和 vue3

基本原理

vue2.0 数据劫持: Object.defineProperty (es5)

vue3.0 数据劫持: Proxy (es6)

分析 :此题考查 Vue 的 MVVM 原理

解答: Vue 的双向绑定原理其实就是 MVVM 的基本原理, Vuejs 官网已经说明, 实际就是通过 Object.defineProperty 方法 完成了对于 Vue 实例中数据的 劫持, 通过对于 data 中数据 进行 set 的劫持监听, 然后通过**观察者模式**, 通知 对应的绑定节点 进行节点数据更新, 完成数据驱动视图的更新

简单概述 : 通过 Object.defineProperty 完成对于数据的劫持, 通过观察者模式, 完成对于节点的数据更新

+ + \ No newline at end of file diff --git a/pages/interviews/webpack.html b/pages/interviews/webpack.html index 093a766..1b5dd46 100644 --- a/pages/interviews/webpack.html +++ b/pages/interviews/webpack.html @@ -5,18 +5,18 @@ Webpack 面试题 | 我的网站 - - - - + + + + -
Skip to content
目录

Webpack 面试题

1、webpack 的作用是什么,谈谈你对它的理解?

现在的前端网页功能丰富,特别是 SPA(single page web application 单页应用)技术流行后,JavaScript 的复杂度增加和需要一大堆依赖包,还需要解决 Scss,Less……新增样式的扩展写法的编译工作。 所以现代化的前端已经完全依赖于 webpack 的辅助了。

2、webpack 的工作原理?

WebPack 可以看做是模块打包机:它做的事情是,分析你的项目结构找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在 3.0 出现后,Webpack 还肩负起了优化项目的责任。

3、webpack 打包原理

把一切都视为模块:不管是 css、JS、Image 还是 html 都可以互相引用,通过定义 entry.js,对所有依赖的文件进行跟踪,将各个模块通过 loaderplugins 处理,然后打包在一起。

按需加载:打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks,还可以将重复的部分单独提取出来作为 commonChunk,从而实现按需加载。把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载

4、webpack 的核心概念

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。告诉 webpack 要使用哪个模块作为构建项目的起点,默认为./src/index.js

  • output :出口,告诉 webpack 在哪里输出它打包好的代码以及如何命名,默认为./dist

  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。webpack 本身只能打包 js 文件,所以,针对 css,图片等格式的文件没法打包,就需要引入第三方的模块进行打包。loader 虽然是扩展了 webpack ,但是它只专注于转化文件,完成压缩,打包,语言翻译。 仅仅只是为了打包

    css-loaderstyle-loader模块是为了打包 css 的 babel-loaderbabel-core模块时为了把 ES6 的代码转成 ES5 url-loaderfile-loader是把图片进行打包的。

  • Plugin:扩展插件,Plugin 可以扩展 webpack 的功能,让 webpack 具有更多的灵活性。在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

Loader 和 Plugin1n 的区别

  • loader 运行在打包文件之前(loader 为在模块加载时的预处理文件);plugins 在整个编译周期都起作用
  • 一个 loader 的职责是单一的,只需要完成一种转换。一个 loader 其实就是一个 Node.js 模块。当需要调用多个 loader 去转换一个文件时,每个 loader 会链式的顺序执行

5、Webpack 的基本功能有哪些?

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

  • 文件优化:压缩 JavaScript、CSS、html 代码,压缩合并图片等

  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

  • 模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

  • 自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

  • 代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

6、gulp/grunt 与 webpack 的区别是什么?

三者都是前端构建工具,grunt 和 gulp 在早期比较流行,现在 webpack 相对来说比较主流,不过一些轻量化的任务还是会用 gulp 来处理,比如单独打包 CSS 文件等。 grunt 和 gulp 是基于任务和流(Task、Stream)的。 类似 jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个 web 的构建流程。 webpack 是基于入口的。 webpack 会自动地递归解析入口所需要加载的所有资源文件,然后用不同的 Loader 来处理不同的文件,用 Plugin 来扩展 webpack 功能。

7、webpack 是解决什么问题而生的?

如果像以前开发时一个 html 文件可能会引用十几个 js 文件,而且顺序还不能乱,因为它们存在依赖关系,同时对于 ES6+等新的语法,less, sass 等 CSS 预处理都不能很好的解决……,此时就需要一个处理这些问题的工具。

8、你是如何提高 webpack 构件速度的?

  • 多入口情况下,使用 CommonsChunkPlugin 来提取公共代码
  • 通过 externals 配置来提取常用库
  • 利用 DllPluginDllReferencePlugin 预编译资源模块通过 DllPlugin 来对那些我们 引用但是绝对不会修改的 npm 包来进行预编译,再通过 DllReferencePlugin 将预编译的模块加载进来。
  • 使用 Happypack 实现多线程加速编译
  • 使用 webpack-uglify-paralle 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度 使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码

9、npm 打包时需要注意哪些?如何利用 webpack 来更好的构建?

Npm 是目前最大的 JavaScript 模块仓库,里面有来自全世界开发者上传的可复用模块。 你可能只是 JS 模块的使用者,但是有些情况你也会去选择上传自己开发的模块。 关于 NPM 模块上传的方法可以去官网上进行学习,这里只讲解如何利用 webpack 来构建。 NPM 模块需要注意以下问题

  • 要支持 CommonJS 模块化规范,所以要求打包后的最后结果也遵守该规则。
  • Npm 模块使用者的环境是不确定的,很有可能并不支持 ES6,所以打包的最后结果应该是采用 ES5 编写的。并且如果 ES5 是经过转换的,请最好连同 SourceMap 一同上传。
  • Npm 包大小应该是尽量小(有些仓库会限制包大小)
  • 发布的模块不能将依赖的模块也一同打包,应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。
  • UI 组件类的模块应该将依赖的其它资源文件,例如.css 文件也需要包含在发布的模块里。

10、前端为什么要进行打包和构建?

代码层面:

  • 体积更小(Tree-shaking、压缩、合并),加载更快

  • 编译高级语言和语法(TS、ES6、模块化、scss)

  • 兼容性和错误检查(polyfill,postcss,eslint)

    研发流程层面:

  • 统一、高效的开发环境

  • 统一的构建流程和产出标准

  • 集成公司构建规范(提测、上线)

11、webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全。

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;

2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;

3. 确定入口:根据配置中的 entry 找出所有的入口文件;

4. 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;

5. 完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;

6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;

7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

12、怎么配置单页应用?怎么配置多页应用?

单页应用可以理解为 webpack 的标准模式,直接在 entry 中指定单页应用的入口即可

多页应用的话,可以使用 webpack 的 AutoWebPlugin 来完成简单自动化的构建,但是前提是项目的目录结构必须遵守他预设的规范。多页应用中要注意的是:

  • 每个页面都有公共的代码,可以将这些代码抽离出来,避免重复的加载。比如,每个页面都引用了同一套 css 样式表
  • 随着业务的不断扩展,页面可能会不断的追加,所以一定要让入口的配置足够灵活,避免每次添加新页面还需要修改构建配置

13、Loader 机制的作用是什么?

webpack 默认只能打包 js 文件,配置里的 module.rules 数组配置了一组规则,告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换打包成 js。

注意:

  • use 属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;
  • 每一个 Loader 都可以通过 URL querystring 的方式传入参数,
  • 例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

14、常用 loader

  • css-loader 读取 合并 CSS 文件
  • style-loader 把 CSS 内容注入到 JavaScript 里
  • sass-loader 解析 sass 文件(安装 sass-loader,node-sass)
  • postcss-loader 自动添加浏览器兼容前缀(postcss.config 配置)
  • url-loader 将文件转换为 base64 URI。
  • vue-loader 处理 vue 文件。

15、Plugin(插件)的作用是什么?

Plugin 是用来扩展 Webpack 功能的,通过在构建流程里注入钩子实现,它给 Webpack 带来了很大的灵活性。

Webpack 是通过 plugins 属性来配置需要使用的插件列表的。plugins 属性是一个数组,里面的每一项都是插件的一个实例,在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

16、什么是 bundle,什么是 chunk,什么是 module

bundle:是由 webpack 打包出来的文件

chunk:是指 webpack 在进行模块依赖分析的时候,代码分割出来的代码块

module:是开发中的单个模块

17、常见 Plugins

HtmlWbpackPlugin 自动在打包结束后生成 html 文件,并引入 bundle.js cleanwebPackPlugin 打包自动删除上次打包文件

18、ExtractTextPlugin 插件的作用

ExtractTextPlugin 插件的作用是提取出 JavaScript 代码里的 CSS 到一个单独的文件

对此你可以通过插件的 filename 属性,告诉插件输出的 CSS 文件名称是通过[name]\_[contenthash:8].css 字符串模版生成的,

里面的[name]代表文件名称,[contenthash:8]代表根据文件内容算出的 8 位 hash 值, 还有很多配置选项可以在 ExtractTextPlugin 的主页上查到。

19、sourceMap

是一个映射关系,将打包后的文件隐射到源代码,用于定位报错位置

配置方式: 例如:

js
devtool:‘source-map’
-

加不同前缀意义:

inline: 不生成映射关系文件,打包进 main.js

cheap: 1.只精确到行,不精确到列,打包速度快 2.只管业务代码,不管第三方模块

module:不仅管业务代码,而且管第三方代码

eval:执行效率最快,性能最好

最佳实践:

开发环境:cheap-module-eval-source-map

线上环境:cheap-mudole-source-map

22、babel 相关: polyfill 以及 runtime 区别, ES stage 含义,preset–env 作用等等

  • 1.polyfill 以及 runtime 区别

babel-polyfill 的原理是当运行环境中并没有实现的一些方法,

babel-polyfill 会做兼容。

babel-runtime 它是将 es6 编译成 es5 去执行。我们使用 es6 的语法来编写,最终会通过 babel-runtime 编译成 es5.也就是说,不管浏览器是否支持 ES6,只要是 ES6 的语法,它都会进行转码成 ES5.所以就有很多冗余的代码。

babel-polyfill 它是通过向全局对象和内置对象的 prototype 上添加方法来实现的。比如运行环境中不支持 Array.prototype.find 方法,引入 polyfill, 我们就可以使用 es6 方法来编写了,但是缺点就是会造成全局空间污染。

babel-runtime: 它不会污染全局对象和内置对象的原型,比如说我们需要 Promise,我们只需要 import Promise from 'babel-runtime/core-js/promise'即可,这样不仅避免污染全局对象,而且可以减少不必要的代码。

  • stage-x:指处于某一阶段的 js 语言提案
  • 理解 babel-preset-envbabel-preset-es2015: 可以将 es6 的代码编译成 es5. babel-preset-es2016: 可以将 es7 的代码编译为 es6. babel-preset-es2017: 可以将 es8 的代码编译为 es7. babel-preset-latest: 支持现有所有 ECMAScript 版本的新特性

23. 什么是模热更新?有什么优点?

模块热更新是 webpack 的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新。

在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器。

优点:只更新变更内容,以节省宝贵的开发时间。调整样式更加快速,几乎相当于在浏览器中更改样式

24、什么是长缓存?在 webpack 中如何做到长缓存优化?

浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。

在 webpack 中,可以在 output 给出输出的文件制定 chunkhash,并且分离经常更新的代码和框架代码,通过 NameModulesPlugin 或者 HashedModulesPlugin 使再次打包文件名不变。

26、什么是 Tree-sharking?

指打包中去除那些引入了但在代码中没用到的死代码。在 wepack 中 js treeshaking 通过 UglifyJsPlugin 来进行,css 中通过 purify-CSS 来进行。

27、webpack-dev-server 和 http 服务器的区别

webpack-dev-server 使用内存来存储 webpack 开发环境下的打包文件,并且可以使用模块热更新,比传统的 http 服务对开发更加有效。

28、webpack3 和 webpack4 的区别

mode/–mode 参数,新增了 mode/–mode 参数来表示是开发还是生产(development/production)production 侧重于打包后的文件大小,development 侧重于 goujiansud 移除 loaders,必须使用 rules(在 3 版本的时候 loaders 和 rules 是共存的但是到 4 的时候只允许使用 rules)移除了 CommonsChunkPlugin (提取公共代码),用 optimization.splitChunks 和 optimization.runtimeChunk 来代替支持 es6 的方式导入 JSON 文件,并且可以过滤无用的代码

- - +
Skip to content
目录

Webpack 面试题

1、webpack 的作用是什么,谈谈你对它的理解?

现在的前端网页功能丰富,特别是 SPA(single page web application 单页应用)技术流行后,JavaScript 的复杂度增加和需要一大堆依赖包,还需要解决 Scss,Less……新增样式的扩展写法的编译工作。 所以现代化的前端已经完全依赖于 webpack 的辅助了。

2、webpack 的工作原理?

WebPack 可以看做是模块打包机:它做的事情是,分析你的项目结构找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在 3.0 出现后,Webpack 还肩负起了优化项目的责任。

3、webpack 打包原理

把一切都视为模块:不管是 css、JS、Image 还是 html 都可以互相引用,通过定义 entry.js,对所有依赖的文件进行跟踪,将各个模块通过 loaderplugins 处理,然后打包在一起。

按需加载:打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks,还可以将重复的部分单独提取出来作为 commonChunk,从而实现按需加载。把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载

4、webpack 的核心概念

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。告诉 webpack 要使用哪个模块作为构建项目的起点,默认为./src/index.js

  • output :出口,告诉 webpack 在哪里输出它打包好的代码以及如何命名,默认为./dist

  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。webpack 本身只能打包 js 文件,所以,针对 css,图片等格式的文件没法打包,就需要引入第三方的模块进行打包。loader 虽然是扩展了 webpack ,但是它只专注于转化文件,完成压缩,打包,语言翻译。 仅仅只是为了打包

    css-loaderstyle-loader模块是为了打包 css 的 babel-loaderbabel-core模块时为了把 ES6 的代码转成 ES5 url-loaderfile-loader是把图片进行打包的。

  • Plugin:扩展插件,Plugin 可以扩展 webpack 的功能,让 webpack 具有更多的灵活性。在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

Loader 和 Plugin1n 的区别

  • loader 运行在打包文件之前(loader 为在模块加载时的预处理文件);plugins 在整个编译周期都起作用
  • 一个 loader 的职责是单一的,只需要完成一种转换。一个 loader 其实就是一个 Node.js 模块。当需要调用多个 loader 去转换一个文件时,每个 loader 会链式的顺序执行

5、Webpack 的基本功能有哪些?

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

  • 文件优化:压缩 JavaScript、CSS、html 代码,压缩合并图片等

  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

  • 模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

  • 自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

  • 代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

6、gulp/grunt 与 webpack 的区别是什么?

三者都是前端构建工具,grunt 和 gulp 在早期比较流行,现在 webpack 相对来说比较主流,不过一些轻量化的任务还是会用 gulp 来处理,比如单独打包 CSS 文件等。 grunt 和 gulp 是基于任务和流(Task、Stream)的。 类似 jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个 web 的构建流程。 webpack 是基于入口的。 webpack 会自动地递归解析入口所需要加载的所有资源文件,然后用不同的 Loader 来处理不同的文件,用 Plugin 来扩展 webpack 功能。

7、webpack 是解决什么问题而生的?

如果像以前开发时一个 html 文件可能会引用十几个 js 文件,而且顺序还不能乱,因为它们存在依赖关系,同时对于 ES6+等新的语法,less, sass 等 CSS 预处理都不能很好的解决……,此时就需要一个处理这些问题的工具。

8、你是如何提高 webpack 构件速度的?

  • 多入口情况下,使用 CommonsChunkPlugin 来提取公共代码
  • 通过 externals 配置来提取常用库
  • 利用 DllPluginDllReferencePlugin 预编译资源模块通过 DllPlugin 来对那些我们 引用但是绝对不会修改的 npm 包来进行预编译,再通过 DllReferencePlugin 将预编译的模块加载进来。
  • 使用 Happypack 实现多线程加速编译
  • 使用 webpack-uglify-paralle 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度 使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码

9、npm 打包时需要注意哪些?如何利用 webpack 来更好的构建?

Npm 是目前最大的 JavaScript 模块仓库,里面有来自全世界开发者上传的可复用模块。 你可能只是 JS 模块的使用者,但是有些情况你也会去选择上传自己开发的模块。 关于 NPM 模块上传的方法可以去官网上进行学习,这里只讲解如何利用 webpack 来构建。 NPM 模块需要注意以下问题

  • 要支持 CommonJS 模块化规范,所以要求打包后的最后结果也遵守该规则。
  • Npm 模块使用者的环境是不确定的,很有可能并不支持 ES6,所以打包的最后结果应该是采用 ES5 编写的。并且如果 ES5 是经过转换的,请最好连同 SourceMap 一同上传。
  • Npm 包大小应该是尽量小(有些仓库会限制包大小)
  • 发布的模块不能将依赖的模块也一同打包,应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。
  • UI 组件类的模块应该将依赖的其它资源文件,例如.css 文件也需要包含在发布的模块里。

10、前端为什么要进行打包和构建?

代码层面:

  • 体积更小(Tree-shaking、压缩、合并),加载更快

  • 编译高级语言和语法(TS、ES6、模块化、scss)

  • 兼容性和错误检查(polyfill,postcss,eslint)

    研发流程层面:

  • 统一、高效的开发环境

  • 统一的构建流程和产出标准

  • 集成公司构建规范(提测、上线)

11、webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全。

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;

2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;

3. 确定入口:根据配置中的 entry 找出所有的入口文件;

4. 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;

5. 完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;

6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;

7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

12、怎么配置单页应用?怎么配置多页应用?

单页应用可以理解为 webpack 的标准模式,直接在 entry 中指定单页应用的入口即可

多页应用的话,可以使用 webpack 的 AutoWebPlugin 来完成简单自动化的构建,但是前提是项目的目录结构必须遵守他预设的规范。多页应用中要注意的是:

  • 每个页面都有公共的代码,可以将这些代码抽离出来,避免重复的加载。比如,每个页面都引用了同一套 css 样式表
  • 随着业务的不断扩展,页面可能会不断的追加,所以一定要让入口的配置足够灵活,避免每次添加新页面还需要修改构建配置

13、Loader 机制的作用是什么?

webpack 默认只能打包 js 文件,配置里的 module.rules 数组配置了一组规则,告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换打包成 js。

注意:

  • use 属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;
  • 每一个 Loader 都可以通过 URL querystring 的方式传入参数,
  • 例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

14、常用 loader

  • css-loader 读取 合并 CSS 文件
  • style-loader 把 CSS 内容注入到 JavaScript 里
  • sass-loader 解析 sass 文件(安装 sass-loader,node-sass)
  • postcss-loader 自动添加浏览器兼容前缀(postcss.config 配置)
  • url-loader 将文件转换为 base64 URI。
  • vue-loader 处理 vue 文件。

15、Plugin(插件)的作用是什么?

Plugin 是用来扩展 Webpack 功能的,通过在构建流程里注入钩子实现,它给 Webpack 带来了很大的灵活性。

Webpack 是通过 plugins 属性来配置需要使用的插件列表的。plugins 属性是一个数组,里面的每一项都是插件的一个实例,在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

16、什么是 bundle,什么是 chunk,什么是 module

bundle:是由 webpack 打包出来的文件

chunk:是指 webpack 在进行模块依赖分析的时候,代码分割出来的代码块

module:是开发中的单个模块

17、常见 Plugins

HtmlWbpackPlugin 自动在打包结束后生成 html 文件,并引入 bundle.js cleanwebPackPlugin 打包自动删除上次打包文件

18、ExtractTextPlugin 插件的作用

ExtractTextPlugin 插件的作用是提取出 JavaScript 代码里的 CSS 到一个单独的文件

对此你可以通过插件的 filename 属性,告诉插件输出的 CSS 文件名称是通过[name]\_[contenthash:8].css 字符串模版生成的,

里面的[name]代表文件名称,[contenthash:8]代表根据文件内容算出的 8 位 hash 值, 还有很多配置选项可以在 ExtractTextPlugin 的主页上查到。

19、sourceMap

是一个映射关系,将打包后的文件隐射到源代码,用于定位报错位置

配置方式: 例如:

js
devtool:‘source-map’
+

加不同前缀意义:

inline: 不生成映射关系文件,打包进 main.js

cheap: 1.只精确到行,不精确到列,打包速度快 2.只管业务代码,不管第三方模块

module:不仅管业务代码,而且管第三方代码

eval:执行效率最快,性能最好

最佳实践:

开发环境:cheap-module-eval-source-map

线上环境:cheap-mudole-source-map

22、babel 相关: polyfill 以及 runtime 区别, ES stage 含义,preset–env 作用等等

  • 1.polyfill 以及 runtime 区别

babel-polyfill 的原理是当运行环境中并没有实现的一些方法,

babel-polyfill 会做兼容。

babel-runtime 它是将 es6 编译成 es5 去执行。我们使用 es6 的语法来编写,最终会通过 babel-runtime 编译成 es5.也就是说,不管浏览器是否支持 ES6,只要是 ES6 的语法,它都会进行转码成 ES5.所以就有很多冗余的代码。

babel-polyfill 它是通过向全局对象和内置对象的 prototype 上添加方法来实现的。比如运行环境中不支持 Array.prototype.find 方法,引入 polyfill, 我们就可以使用 es6 方法来编写了,但是缺点就是会造成全局空间污染。

babel-runtime: 它不会污染全局对象和内置对象的原型,比如说我们需要 Promise,我们只需要 import Promise from 'babel-runtime/core-js/promise'即可,这样不仅避免污染全局对象,而且可以减少不必要的代码。

  • stage-x:指处于某一阶段的 js 语言提案
  • 理解 babel-preset-envbabel-preset-es2015: 可以将 es6 的代码编译成 es5. babel-preset-es2016: 可以将 es7 的代码编译为 es6. babel-preset-es2017: 可以将 es8 的代码编译为 es7. babel-preset-latest: 支持现有所有 ECMAScript 版本的新特性

23. 什么是模热更新?有什么优点?

模块热更新是 webpack 的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新。

在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器。

优点:只更新变更内容,以节省宝贵的开发时间。调整样式更加快速,几乎相当于在浏览器中更改样式

24、什么是长缓存?在 webpack 中如何做到长缓存优化?

浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。

在 webpack 中,可以在 output 给出输出的文件制定 chunkhash,并且分离经常更新的代码和框架代码,通过 NameModulesPlugin 或者 HashedModulesPlugin 使再次打包文件名不变。

26、什么是 Tree-sharking?

指打包中去除那些引入了但在代码中没用到的死代码。在 wepack 中 js treeshaking 通过 UglifyJsPlugin 来进行,css 中通过 purify-CSS 来进行。

27、webpack-dev-server 和 http 服务器的区别

webpack-dev-server 使用内存来存储 webpack 开发环境下的打包文件,并且可以使用模块热更新,比传统的 http 服务对开发更加有效。

28、webpack3 和 webpack4 的区别

mode/–mode 参数,新增了 mode/–mode 参数来表示是开发还是生产(development/production)production 侧重于打包后的文件大小,development 侧重于 goujiansud 移除 loaders,必须使用 rules(在 3 版本的时候 loaders 和 rules 是共存的但是到 4 的时候只允许使用 rules)移除了 CommonsChunkPlugin (提取公共代码),用 optimization.splitChunks 和 optimization.runtimeChunk 来代替支持 es6 的方式导入 JSON 文件,并且可以过滤无用的代码

+ + \ No newline at end of file diff --git a/pages/lotsOfDifferent/demo1/index.html b/pages/lotsOfDifferent/demo1/index.html new file mode 100644 index 0000000..ed1e2ae --- /dev/null +++ b/pages/lotsOfDifferent/demo1/index.html @@ -0,0 +1,29 @@ + + + + + + 杂七杂八系列一 | 我的网站 + + + + + + + + + +
Skip to content
目录

杂七杂八系列一

1. 跟随图片变化的背景色

因为组件中使用了 cdn 引入的方式,打包错误,组件地址为 ./components/bgFollowImg.vue

TIP

  1. 通过 cdn 引入 colorThiefimport "https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.4.0/color-thief.min.js"

    • 或者 npm i colorthief
  2. 通过 https://picsum.photos 网址获取随机图片,通过 colorThief 获取颜色的话会有跨域污染(因为里面使用了 canvas,会污染画布),在img标签上设置 crossorigin="anonymous"解决

  3. colorThief使用

js
//创建一个 ColorThief 的实例对象
+const colorThief = new ColorThief();
+
+// 1. 得到图片的调色盘(只得到前三种主要颜色)
+const colors = await colorThief.getPalette(e.target, 3);
+
+// 2. 只得到主要颜色
+const mainColor = await colorThief.getColor(e.target);
+
+ + + + + \ No newline at end of file diff --git a/pages/node/index.html b/pages/node/index.html index 04f1362..17c502a 100644 --- a/pages/node/index.html +++ b/pages/node/index.html @@ -5,17 +5,155 @@ 哑巴湖大水怪 | 我的网站 - - - - + + + + - - - +
Skip to content
目录

node 相关

📖 Node.js 入门指南和实践

🚀 7 天学会 node.js

🔥 node 常用

1. process全局变量

  • process:一个全局变量,提供了有关当前 Node.js 进程的信息并对其进行控制
  • 由于 JavaScript 是一个单线程语言,所以通过 node xxx 启动一个文件后,只有一条主线程
process常见属性
  • process.env:环境变量,例如通过 `process.env.NODE_ENV 获取不同环境项目配置信息
  • process.nextTick:这个在谈及 EventLoop 时经常为会提到
  • process.pid:获取当前进程 id
  • process.ppid:当前进程对应的父进程
  • process.cwd():获取当前进程工作目录,
  • process.platform:获取当前进程运行的操作系统平台
  • process.uptime():当前进程已运行时间,例如:pm2 守护进程的 uptime 值
  • 进程事件:process.on(‘uncaughtException’,cb) 捕获异常信息、 process.on(‘exit’,cb)进程推出监听
  • 三个标准流:process.stdout 标准输出、 process.stdin 标准输入、 process.stderr 标准错误输出
  • process.title 指定进程名称,有的时候需要给进程指定一个名称

process常见方法

  • process.argv():在终端通过 node 命令执行时,获取命令行参数,返回值是一个数组

    - [0] node路径 (一般用不到)
    +- [1] 当前执行的文件路径 (一般用不到)
    +- 2-n : 参数 (一般都这样 process.argv.slice(2) 拿命令行输入的参数)
    +
  • process.cwd():返回当前 Node 进程执行的目录

2. cp -r source/* target 拷贝目录命令

  • 终端下通过 cp -r source/* target 可以快速实现目录的拷贝 source:源目录,target:目标目录
js
  cp -r demo demo1 // 将 demo 目录 拷贝一份到 demo1 ,没有就新建
+  cp -r demo/file demo2 // 将 demo 目录下的 file 拷贝到 demo2
+

1. 基本信息

  • NodeJS是一个 JS 脚本解析器,任何操作系统下安装NodeJS本质上做的事情都是把 NodeJS 执行程序复制到一个目录,然后保证这个目录在系统 PATH 环境变量下,以便终端下可以使用 node 命令。

  • 终端下直接输入 node 命令可进入命令交互模式,很适合用来测试一些 JS 代码片段,比如正则表达式。

  • NodeJS 使用 CMD 模块系统,主模块作为程序入口点,所有模块在执行过程中只初始化一次

  • 除非 JS 模块不能满足需求,否则不要轻易使用二进制模块,否则你的用户会叫苦连天。

2. 模块路径解析规则

  • 内置模块:不做路径解析,直接返回内部模块的导出对象,例如require(fs)
  • node-modules目录:在模块/home/user/hello.js中使用require('foo/bar'),那么会依次查找
    js
    /home/user/node-modules/foo/bar
    +/user/node-modules/foo/bar
    +/node-modules/foo/bar
    +
  • NODE_PATH变量:NodeJs允许通过NODE_PATH环境变量来设置搜索路径,可以设置一个或者多个目录,在linux下使用:,在window下使用;分隔,例如:
js
// 环境变量
+NODE_PATH = "/home/user/lib:/home/lib";
+// 使用
+requir("foo / bar");
+
+// 查找路径
+("/home/user/lib/foo/bar");
+("/home/lib/foo/bar");
+

3. 包package

  • js 模块的基本单位是 js 文件,多个子模块组成大模块,称为包,并把子模块放在同一目录中
  • 当模块的文件名为index.js时,加载模块时可以使用模块所在目录的路径代替模块文件路径,下面两条语句等价
js
var cat = require("/home/user/lib/cat");
+var cat = require("/home/user/lib/cat/index");
+
  • package.json文件,自定义入口模块的文件名入口位置,可以使用require("/home/user/lib/cat")来加载模块
js
// package.json
+{
+    "name": "cat", // 包名,在npm上必须唯一
+    "main": "./lib/main.js" // 入口位置
+}
+

4. fs模块

fs模块

  • 引入 const fs = require('fs')

  • fs.readFileSync(文件路径,options) :从源路径读取文件内容

  • fs.writeFileSync(目标文件路径(无新建),写入文件,options):写入文件

  • fs.readdirSync(dir) 读取目录内容

  • fs.existsSync(path) 如果路径存在则返回 true,否则返回 false

  • fs.createReadStream():创建一个源文件的只读的数据流

  • fs.createWriteStream():创建一个目标文件的只写数据流

  • .pipe进行连接:js fs.createReadStream(src).pipe(fs.createWriteStream(dst));

  • 文件属性读写

其中常用的有fs.statfs.chmodfs.chown等等。

  • 文件内容读写

其中常用的有fs.readFilefs.readdirfs.writeFilefs.mkdir等等。

  • 底层文件操作

其中常用的有fs.openfs.readfs.writefs.close等等。

fs.stats(), fs.statsync() : 获取文件信息状态
  1. 异步方法 fs.stat() fs.stat(path,callback),path 表示文件路径; callback 是指回调函数,有两个参数:(err,stats),其中 stats 是 fs.stat 的实例;
  2. 同步方法 fs.statsync() fs.statsync(path),只接收一个 path 变量,fs.statSync(path)其实是一个 fs.stats 的一个实例

常用的方法:

  1. stats.isFile(): 如果是文件则返回 true,否则返回 false;

  2. stats.isDirectiory(): 如果是目录则返回 true,否则返回 false;

  3. stats.isBlockDevice(): 如果是块设备则返回 true,否则返回 false;

  4. stats.isCharacterDevice(): 如果是字符设备返回 true,否则返回 false;

  5. stats.isSymbolicLink(): 如果是软链接返回 true,否则返回 false;

  6. stats.isFIFO(): 如果是 FIFO,则返回 true,否则返回 false.FIFO 是 UNIX 中的一种特殊类型的命令管道;

  7. stats.isSocket(): 如果是 Socket 则返回 true,否则返回 false;

  8. stats.size(): 文件的大小(以字节为单位)。

5. path模块

path

  • path.normalize(): 将传入的路径转换为标准路径解析路径中的...,还能去掉多余的斜杠。

    注意:标准化之后的路径里的斜杠在 Windows 系统下是\ ,而在Linux 系统下是/。如果想保证任何系统下都使用/作为路径分隔符的话,需要用 .replace(/\\/g, '/') 再替换一下标准路径。
    js
    path.normalize('foo//baz//../bar') ==> "foo/bar"
    +
  • path.join():将传入的多个路径拼接为标准路径。该方法可避免手工拼接路径字符串的繁琐,并且能在不同系统下正确使用相应的路径分隔符.

    js
    path.join("foo/", "baz/", "../bar"); // => "foo/bar"
    +
  • path.extname()返回 path 的扩展名,即 path 的最后一部分中从最后一次出现的 .(句点)字符到字符串的结尾

    js
    path.extname("foo/bar.js"); // => ".js"
    +path.extname("index.html"); // => '.html'
    +path.extname("index."); // => '.'
    +path.extname("index"); // => ''
    +path.extname(".index"); // => ''
    +path.extname(".index.md"); // => '.md'
    +
  • path.resolve(): 路径或路径片段的序列解析为绝对路径给定的路径序列从右到左处理,每个后续的 path 会被追加到前面,直到构建绝对路径。

    js
    // 因为 baz 不是绝对路径,但是 /bar/baz 是
    +path.resolve("/foo", "/bar", "baz"); // => '/bar/baz'
    +path.resolve("/foo/bar", "./baz"); // => '/foo/bar/baz'
    +path.resolve("/foo/bar", "/tmp/file/"); // => '/tmp/file'
    +
    +path.resolve("wwwroot", "static_files/png/", "../gif/image.gif");
    +// 如果当前工作目录是 /home/myself/node,
    +// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'
    +

6 .单字节编码

Details
  1. ASCII编码:单字节编码。最初的编码,由一个字节组成,因此只能表示 256 个字符,但只表示 0-9,a-z,A-Z,和一些加减乘除百分号,够老美用了
  2. ANSI编码:多字节编码。
  • 由于一个字节只能表示 255 个数字,所以中国约定了GBK 编码规则,约定用 0x80-0xFF 范围内的某两个字节来表示某一个中文字符。

  • 日本约定了 JIS 编码规则,他们约定 0x80-0xFF 范围内的某两个字节来表示某个日文字符。

  • 台湾约定了 BIG5 编码规则,约定 0x80-0xFF 范围内的某两个字节表示某个繁体中文字符。

  • 所以我们拿到了一个 ANSI 字节串的时候,我们还必须知道这个字节串的编码,才能将这个字节串转换成相应国家的字符串。

  1. UNICODE编码:宽字节编码。

TIP

  1. 字节: 字节(Byte)是一种计量单位,表示数据量多少,它是计算机信息技术用于计量存储容量的一种计量单位
  2. 字符:字符是指计算机中使用的文字和符号,比如 1、2、3、A、B、C、~!·#¥%……—*()——+、等等。
  • ①ASCII 码中,一个英文字母(不分大小写)占一个字节的空间,一个中文汉字占两个字节的空间。一个二进制数字序列,在计算机中作为一个数字单元,一般为 8 位二进制数,换算为十进制。最小值 0,最大值 255

  • ②UTF-8 编码中,一个英文字符等于一个字节,一个中文(含繁体)等于三个字节。

  • ③Unicode 编码中,一个英文等于两个字节,一个中文(含繁体)等于两个字节。符号:英文标点占一个字节,中文标点占两个字节。举例:英文句号“.”占 1 个字节的大小,中文句号“。”占 2 个字节的大小。

  • ④UTF-16 编码中,一个英文字母字符或一个汉字字符存储都需要 2 个字节(Unicode 扩展区的一些汉字存储需要 4 个字节)。

  • ⑤UTF-32 编码中,世界上任何字符的存储都需要 4 个字节。

7. http模块

'http'模块提供两种使用方式:

  • 作为服务端使用时,创建一个 HTTP 服务器,监听 HTTP 客户端请求并返回响应。

  • 作为客户端使用时,发起一个 HTTP 客户端请求,获取服务端响应。

注意点:

问: 为什么 http 模块创建的 HTTP 服务器返回的响应是 chunked 传输方式的?

答: 因为默认情况下,使用.writeHead 方法写入响应头后,允许使用.write 方法写入任意长度的响应体数据,并使用.end 方法结束一个响应。由于响应体数据长度不确定,因此 NodeJS 自动在响应头里添加了 Transfer-Encoding: chunked 字段,并采用 chunked 传输方式。但是当响应体数据长度确定时,可使用.writeHead 方法在响应头里加上 Content-Length 字段,这样做之后 NodeJS 就不会自动添加 Transfer-Encoding 字段和使用 chunked 传输方式。

问: 为什么使用 http 模块发起 HTTP 客户端请求时,有时候会发生 socket hang up 错误?

答: 发起客户端 HTTP 请求前需要先创建一个客户端。http 模块提供了一个全局客户端 http.globalAgent,可以让我们使用.request 或.get 方法时不用手动创建客户端。但是全局客户端默认只允许 5 个并发 Socket 连接,当某一个时刻 HTTP 客户端请求创建过多,超过这个数字时,就会发生 socket hang up 错误。解决方法也很简单,通过 http.globalAgent.maxSockets 属性把这个数字改大些即可。另外,https 模块遇到这个问题时也一样通过 https.globalAgent.maxSockets 属性来处理

8. 进程管理

    1. process:process 不是内置模块,而是一个全局对象,
    1. child_process:模块可以创建和控制子进程,该模块提供的 API 中最核心的是.spawn,其余 API 都是针对特定使用场景对它的进一步封装,算是一种语法糖。
    1. Cluster:cluster 模块是对 child_process 模块的进一步封装,专用于解决单进程 NodeJS Web 服务器无法充分利用多核 CPU 的问题。使用该模块可以简化多进程服务器程序的开发,让每个核上运行一个工作进程,并统一通过主进程监听端口和分发请求。

应用场景

1. 如何获取命令行参数

js
function main(argvs) {}
+main(process.argv.slice(2));
+

2. 如何退出程序

通常一个程序做完所有事情后就正常退出了,这时程序的退出状态码为 0。或者一个程序运行时发生异常后挂了,这时程序的退出状态码不等于 0。如果我们在代码中捕获了某个异常,但是觉得程序不应该继续运行下去,需要立即退出,并且需要把退出状态码设置为指定数字,比如 1,就可以按照以下方式:

js
try {
+  // ...
+} catch (err) {
+  // ...
+  process.exit(1);
+}
+

3. 如何控制输入输出

NodeJS 程序的标准输入流(stdin)、一个标准输出流(stdout)、一个 标准错误流(stderr)、分别对应 process.stdinprocess.stdoutprocess.stderr,第一个是只读数据流,后边两个是只写数据流,对它们的操作按照对数据流的操作方式即可。例如,console.log 可以按照以下方式实现。

js
 function log(){
+  process.stdout.write(
+          util.format.apply(util, arguments) + '\n');
+  )
+ }
+

4. 如何降权

在 Linux 系统下,我们知道需要使用 root 权限才能监听 1024 以下端口。但是一旦完成端口监听后,继续让程序运行在 root 权限下存在安全隐患,因此最好能把权限降下来。以下是这样一个例子。

js
http.createServer(callback).listen(80, function () {
+  // 如果是通过sudo获取root权限的,运行程序的用户的UID和GID保存在环境变量SUDO_UID和SUDO_GID里边。
+  // 如果是通过chmod +s方式获取root权限的,运行程序的用户的UID和GID可直接通过process.getuid和process.getgid方法获取。
+  var env = process.env,
+    uid = parseInt(env["SUDO_UID"] || process.getuid(), 10),
+    gid = parseInt(env["SUDO_GID"] || process.getgid(), 10);
+
+  // 降权时必须先降GID再降UID,否则顺序反过来的话就没权限更改程序的GID了。
+  process.setgid(gid); // 先降GID  process.setgid(gid) 只接受number类型参数
+  process.setuid(uid); // 再降UID   process.setuid(uid) 只接受number类型参数
+});
+

5. 如何创建子进程

js
// spawn(exec, args, options)方法支持三个参数
+// exec:参数是执行文件路径,可以是执行文件的相对或绝对路径,也可以是根据PATH环境变量能找到的执行文件名。
+// args:数组中的每个成员都按顺序对应一个命令行参数。
+// options:用于配置子进程的执行环境与行为。
+const child = child_process.spawn("node", ["xxx.js"]);
+
+child.stdout("data", function (data) {
+  console.log("stdout: " + data);
+});
+child.stderr("data", function (data) {
+  console.log("stderr: " + data);
+});
+child.on("close", function (code) {
+  console.log("child process exited with code " + code);
+});
+

6. 进程间如何通讯

js
/* parent.js */
+const child = child_process.spawn("node", ["child.js"]);
+
+// 父进程通过 .kill 方法向子进程发送 SIGTERM 信号
+child.kill("SIGTERM");
+
+/* child.js */
+process.on("SIGTERM", function () {
+  // 子进程通过监听 process 对象的的SIGTERM事件响应信号
+  cleanUp();
+  process.exit(0);
+});
+

父子进程都是 NodeJS 进程,就可以通过 IPC(进程间通讯)双向传递数据 据在传递过程中,会先在发送端使用 JSON.stringify 方法序列化,再在接收端使用 JSON.parse 方法反序列化。

js
/* parent.js */
+var child = child_process.spawn("node", ["child.js"], {
+  stdio: [0, 1, 2, "ipc"], //父进程在创建子进程时,在options.stdio字段中通过ipc开启了一条IPC通道
+});
+
+// 监听子进程对象的 message 事件接收 来自子进程的消息,
+child.on("message", function (msg) {
+  console.log(msg);
+});
+
+// 并通过.send方法给子进程发送消息。
+child.send({ hello: "hello" });
+
+/* child.js */
+process.on("message", function (msg) {
+  // 监听 process 对象的 message 事件
+  msg.hello = msg.hello.toUpperCase();
+  // 通过 .send 方法向父进程传递信息
+  process.send(msg);
+});
+

7. 如何守护子进程

守护进程一般用于监控工作进程的运行状态,在工作进程不正常退出时重启工作进程,保障工作进程不间断运行。以下是一种实现方式。

js
/* daemon.js */
+function spawn(mainModule) {
+  var worker = child_process.spawn("node", [mainModule]);
+
+  worker.on("exit", function (code) {
+    // 工作进程非正常退出时,守护进程立即重启工作进程。
+    if (code !== 0) {
+      spawn(mainModule);
+    }
+  });
+}
+
+spawn("worker.js");
+

9. 异步编程

域(domain)

  1. 一个域就是一个 js 运行环境,在一个运行环境中,如果一个异常没有被捕获,就会作为一个全局异常被抛出,nodejs 中通过 process 对象提供捕获全局异常的方法
js
process.on("uncaughtException", function (error) {
+  console.log("Error: %s", err.message);
+});
+
+setTimeout(function (fn) {
+  fn();
+});
+
+// Error: undefined is not a function
+
  1. 通过 域(domain)对象监听 error 事件,捕获异常
js
const d = domain.create();
+
+d.on("error", function () {
+  response.writeHead(500);
+  response.end();
+});
+

注意点 ⚠️

  • 官方建议无论是通过process还是domian处理异常后都要重启程序,因为处理异常后的程序处于一种不确定的运行状态,可能导致内存泄漏或者表现的很奇怪
  • JS 本身的 throw..try..catch 异常处理机制并不会导致内存泄漏,也不会让程序的执行结果出乎意料,但 NodeJS 并不是存粹的 JS。NodeJS 里大量的 API 内部是用 C/C++实现的,因此 NodeJS 程序的运行过程中,代码执行路径穿梭于 JS 引擎内部和外部,而 JS 的异常抛出机制可能会打断正常的代码执行流程,导致 C/C++部分的代码表现异常,进而导致内存泄漏等问题
+ + \ No newline at end of file diff --git a/pages/rollup-build/rollup.html b/pages/rollup-build/rollup.html index e79ac9c..e09697b 100644 --- a/pages/rollup-build/rollup.html +++ b/pages/rollup-build/rollup.html @@ -5,15 +5,15 @@ 使用 rollup 打包 ts 并发布工具包 | 我的网站 - - - - + + + + -
Skip to content
目录

使用 rollup 打包 ts 并发布工具包

1. 创建 .gitignore文件

touch 文件名称:创建文件,mkdir 文件夹名称:创建文件夹

1. touch .gitignore

  1. 会创建一个空文件,
  2. 或者如果文件确实存在,会将上次修改的时间更新为"now“。

2.mkdir src: 创建src文件夹

2. 初始化文件

TIP

  1. 初始化package.json文件:pnpm initnpm init -y

  2. 初始化typescript.json文件:tsc --init(确定已安装 tsc)

    -- tsc -v :查看版本号,

    -- npm i -g typescript:安装 tsc

3.package.json文件配置文件

Details

name:包名; decription:包的描述,在 npm 搜索里会用到,如果没有提供,会从 README.md 中提取; main:包的入口文件,通常是 CommonJS,历史原因。这里我们写上 ./dist/mid-index-of.common.jsbrowser:包用于浏览器时的入口文件; module:指定 ES 模块入口,这个不是 npm 自己的字段,是给打包工具用的。这里我们写上 ./dist/mid-index-of.esm.jstypes:指定包的类型文件。这里我们写上./dist/index.d.tskeywords:关键字数组,npm 搜索会用到,建议多写一点; private:是否为私有包,这个字段设置为 true 可以防止意外将私有包发布出去; liscense:开源许可证,常用 MIT; files:指定可以被发布的文件,默认是所有文件。为了减少包体积,不加上多余的文件,这个是一定要配置的。此外一些文件是一定会带上的,比如 package.jsonLICENSEREADME.mdsideEffects:包是否有副作用,比如注入全局变量。如果没副作用,设置为 false,可以帮助打包工具做 tree-shaking,将一些引入了但没有使用的包移除;

4. 前端模块化

前端模块化:就是将独立的功能代码封装成一个独立的文件,其他模块需要使用,在进行引用。

模块化就是将一个复杂的程序依据一定的规则或者说是规范,将其封装成几个单独的块(这里的块指的就是文件),在使用的时候将其组合在一起

模块化有利于代码的拆分和架构上的解耦,模块化在服务端领域已经早已成熟,nodejs 也已经支持模块化。

而在浏览器上,js 脚本是异步载入的,脚本按照编码顺序依次执行,依赖关系只能按照编码顺序来控制。因此前端早早就有了模块化技术。

遵循规范 require 是 AMD 规范引入方式 import 是 es6 的一个语法标准,如果要兼容浏览器的话必须转化成 es5 的语法

调用时间 require 是运行时调用,所以 require 理论上可以运用在代码的任何地方 import 是编译时调用,所以必须放在文件开头

本质 require 是赋值过程,其实 require 的结果就是对象、数字、字符串、函数等,再把 require 的结果赋值给某个变量

import 是解构过程,但是目前所有的引擎都还没有实现 import,我们在 node 中使用 babel 支持 ES6,也仅仅是将 ES6 转码为 ES5 再执行,import 语法会被转码为 require

require / exports 的区别

  1. 遵循 CommonJS/AMD,只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。

    用法只有以下三种简单的写法:

js
const fs = require('fs')
+    
Skip to content
目录

使用 rollup 打包 ts 并发布工具包

1. 创建 .gitignore文件

touch 文件名称:创建文件,mkdir 文件夹名称:创建文件夹

1. touch .gitignore

  1. 会创建一个空文件,
  2. 或者如果文件确实存在,会将上次修改的时间更新为"now“。

2.mkdir src: 创建src文件夹

2. 初始化文件

TIP

  1. 初始化package.json文件:pnpm initnpm init -y

  2. 初始化typescript.json文件:tsc --init(确定已安装 tsc)

    -- tsc -v :查看版本号,

    -- npm i -g typescript:安装 tsc

3.package.json文件配置文件

Details

name:包名; decription:包的描述,在 npm 搜索里会用到,如果没有提供,会从 README.md 中提取; main:包的入口文件,通常是 CommonJS,历史原因。这里我们写上 ./dist/mid-index-of.common.jsbrowser:包用于浏览器时的入口文件; module:指定 ES 模块入口,这个不是 npm 自己的字段,是给打包工具用的。这里我们写上 ./dist/mid-index-of.esm.jstypes:指定包的类型文件。这里我们写上./dist/index.d.tskeywords:关键字数组,npm 搜索会用到,建议多写一点; private:是否为私有包,这个字段设置为 true 可以防止意外将私有包发布出去; liscense:开源许可证,常用 MIT; files:指定可以被发布的文件,默认是所有文件。为了减少包体积,不加上多余的文件,这个是一定要配置的。此外一些文件是一定会带上的,比如 package.jsonLICENSEREADME.mdsideEffects:包是否有副作用,比如注入全局变量。如果没副作用,设置为 false,可以帮助打包工具做 tree-shaking,将一些引入了但没有使用的包移除;

4. 前端模块化

前端模块化:就是将独立的功能代码封装成一个独立的文件,其他模块需要使用,在进行引用。

模块化就是将一个复杂的程序依据一定的规则或者说是规范,将其封装成几个单独的块(这里的块指的就是文件),在使用的时候将其组合在一起

模块化有利于代码的拆分和架构上的解耦,模块化在服务端领域已经早已成熟,nodejs 也已经支持模块化。

而在浏览器上,js 脚本是异步载入的,脚本按照编码顺序依次执行,依赖关系只能按照编码顺序来控制。因此前端早早就有了模块化技术。

遵循规范 require 是 AMD 规范引入方式 import 是 es6 的一个语法标准,如果要兼容浏览器的话必须转化成 es5 的语法

调用时间 require 是运行时调用,所以 require 理论上可以运用在代码的任何地方 import 是编译时调用,所以必须放在文件开头

本质 require 是赋值过程,其实 require 的结果就是对象、数字、字符串、函数等,再把 require 的结果赋值给某个变量

import 是解构过程,但是目前所有的引擎都还没有实现 import,我们在 node 中使用 babel 支持 ES6,也仅仅是将 ES6 转码为 ES5 再执行,import 语法会被转码为 require

require / exports 的区别

  1. 遵循 CommonJS/AMD,只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。

    用法只有以下三种简单的写法:

js
const fs = require('fs')
 exports.fs = fs
 module.exports = fs
 import / export
@@ -28,9 +28,9 @@
 export function readFile
 export {readFile, read}
 export * from 'fs'
-

通过 require 引入基础数据类型时,属于复制该变量。 通过 require 引入复杂数据类型时,数据浅拷贝该对象。 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂) CommonJS模块默认export的是一个对象,即使导出的是基础数据类型

require:运行时加载,CommonJS/AMD,社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。import:编译时加载,ESMAScript6+,语言规格层面支持模块功能。支持编译时静态分析,便于 JS 引入宏和类型检验。动态绑定。

- - +

通过 require 引入基础数据类型时,属于复制该变量。 通过 require 引入复杂数据类型时,数据浅拷贝该对象。 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂) CommonJS模块默认export的是一个对象,即使导出的是基础数据类型

require:运行时加载,CommonJS/AMD,社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。import:编译时加载,ESMAScript6+,语言规格层面支持模块功能。支持编译时静态分析,便于 JS 引入宏和类型检验。动态绑定。

+ + \ No newline at end of file diff --git a/pages/threejs/threejs.html b/pages/threejs/threejs.html index af130ac..7427d18 100644 --- a/pages/threejs/threejs.html +++ b/pages/threejs/threejs.html @@ -5,15 +5,15 @@ 创建 3D 场景时,唯一的限制是您的想象力 - 以及您的技术知识深度。 | 我的网站 - - - - + + + + -
Skip to content
目录

创建 3D 场景时,唯一的限制是您的想象力 - 以及您的技术知识深度。

1. 所有步骤

Details
  1. 初始设置
  2. 创建场景
  3. 创建相机
  4. 创建立方体并将其添加到场景中
  5. 创建渲染器

附加任务:设置场景的大小

  1. 渲染场景

2. 分模块(每个模块都是一个文件)

2.1 模块分为两类 组件(components)和 系统级(system)

2.2 组件(components)是可以放置到场景中的任何东西,例如立方体、相机和场景本身,

2.3 而系统是在组件或其他系统上运行的东西。在这里,是渲染器和大小调整函数(Resizer)

3. 场景图

  1. 场景图中的每个对象(顶级场景除外)只有一个父对象,并且可以有任意数量的子对象。
  2. 通过.children数组来访问所有子对象,也可以通过getObjectByName(有名称的话)
  3. 因为一个对象只能有一个父对象,所以在将 A 下面的字元素 a 移动到 B 对象,那么 A 对象会删除
  4. 我们最终在屏幕上看到的是世界空间。

4. 世界空间和局部空间

顶级场景定义了世界空间,而其他每个对象都定义了自己的局部空间。

5. 平移(translation) 缩放(scale) 旋转(rotation)

TIP

  1. 平移 和 缩放 都存储于 Vector3
  2. 相机和灯光(除了 RectAreaLight)没有大小,因此缩放它们没有意义。更改 camera.scale 或 light.scale 将没有效果。
平移(translation)
js
// translate one axis at a time
+    
Skip to content
目录

创建 3D 场景时,唯一的限制是您的想象力 - 以及您的技术知识深度。

1. 所有步骤

Details
  1. 初始设置
  2. 创建场景
  3. 创建相机
  4. 创建立方体并将其添加到场景中
  5. 创建渲染器

附加任务:设置场景的大小

  1. 渲染场景

2. 分模块(每个模块都是一个文件)

2.1 模块分为两类 组件(components)和 系统级(system)

2.2 组件(components)是可以放置到场景中的任何东西,例如立方体、相机和场景本身,

2.3 而系统是在组件或其他系统上运行的东西。在这里,是渲染器和大小调整函数(Resizer)

3. 场景图

  1. 场景图中的每个对象(顶级场景除外)只有一个父对象,并且可以有任意数量的子对象。
  2. 通过.children数组来访问所有子对象,也可以通过getObjectByName(有名称的话)
  3. 因为一个对象只能有一个父对象,所以在将 A 下面的字元素 a 移动到 B 对象,那么 A 对象会删除
  4. 我们最终在屏幕上看到的是世界空间。

4. 世界空间和局部空间

顶级场景定义了世界空间,而其他每个对象都定义了自己的局部空间。

5. 平移(translation) 缩放(scale) 旋转(rotation)

TIP

  1. 平移 和 缩放 都存储于 Vector3
  2. 相机和灯光(除了 RectAreaLight)没有大小,因此缩放它们没有意义。更改 camera.scale 或 light.scale 将没有效果。
平移(translation)
js
// translate one axis at a time
 mesh.position.x = 1;
 mesh.position.y = 2;
 mesh.position.z = 3;
@@ -114,9 +114,9 @@
 // 垂直(极角)
 controls.minPolarAngle = 0; // default
 controls.maxPolarAngle = Math.PI; // default
-
- - +
+ + \ No newline at end of file diff --git a/pages/toolFun/download.html b/pages/toolFun/download.html index 5a511dc..185dd7e 100644 --- a/pages/toolFun/download.html +++ b/pages/toolFun/download.html @@ -5,15 +5,15 @@ 下载相关 | 我的网站 - - - - + + + + -
Skip to content
目录

下载相关

1. 创建 a 链接并下载文件(导出 excel)

js
/**
+    
Skip to content
目录

下载相关

1. 创建 a 链接并下载文件(导出 excel)

js
/**
  * @description: 导出excel
  * @param {binary} data 导出excel 二进制数据
  * @param {string} fileName 导出excel文件名字,带后缀
@@ -356,8 +356,8 @@
   },
 };
 
- - + + \ No newline at end of file diff --git a/pages/toolFun/imgTool.html b/pages/toolFun/imgTool.html index 265957c..8df6550 100644 --- a/pages/toolFun/imgTool.html +++ b/pages/toolFun/imgTool.html @@ -5,15 +5,15 @@ 常用工具相关 | 我的网站 - - - - + + + + -
Skip to content
目录

常用工具相关

_遍历文件夹下图片并进行瀑布流布局和预览图片(有瑕疵没完善):https://github.com/Ybhdsg123/ybhdag-img/actions_

1. 图片的瀑布流排布

js
/**
+    
Skip to content
目录

常用工具相关

_遍历文件夹下图片并进行瀑布流布局和预览图片(有瑕疵没完善):https://github.com/Ybhdsg123/ybhdag-img/actions_

1. 图片的瀑布流排布

js
/**
  * @description: 瀑布流排法 等宽不等高
  * @param {*} data 图片数组 [{img:imgurl}]
  * @param {*} clientW 屏幕的总宽度
@@ -66,9 +66,9 @@
       });
   });
 };
-
- - +
+ + \ No newline at end of file diff --git a/pages/toolFun/timeTool.html b/pages/toolFun/timeTool.html index 3803ec9..8abed99 100644 --- a/pages/toolFun/timeTool.html +++ b/pages/toolFun/timeTool.html @@ -5,15 +5,15 @@ 时间相关 | 我的网站 - - - - + + + + -
Skip to content
目录

时间相关

1. 获取当天时间

js
/*
+    
-    
-    
+    
+    
     
   
 
\ No newline at end of file
diff --git a/pages/toolFun/tools.html b/pages/toolFun/tools.html
index 51138d4..a0f46d5 100644
--- a/pages/toolFun/tools.html
+++ b/pages/toolFun/tools.html
@@ -5,15 +5,15 @@
     
     哑巴湖大水怪 | 我的网站
     
-    
-    
-    
-    
+    
+    
+    
+    
     
     
   
   
-    
Skip to content
目录

1. navigator.clipboard 剪切板

1.1 复制文本 (有兼容性)

js
// 读取文本
+    
-    
-    
+
+ + \ No newline at end of file diff --git a/pages/uniapp/calendar.html b/pages/uniapp/calendar.html index c95f988..424bfca 100644 --- a/pages/uniapp/calendar.html +++ b/pages/uniapp/calendar.html @@ -5,15 +5,15 @@ 日历组件 | 我的网站 - - - - + + + + -
Skip to content
目录

日历组件

1. 组件内容

vue
<template>
+    
-    
-    
+

效果:效果

+ + \ No newline at end of file diff --git a/pages/uniapp/components-uploadImg.html b/pages/uniapp/components-uploadImg.html index 2e913e5..538a193 100644 --- a/pages/uniapp/components-uploadImg.html +++ b/pages/uniapp/components-uploadImg.html @@ -5,15 +5,15 @@ uniapp 常用封装组件----上传图片组件(vue2) | 我的网站 - - - - + + + + -
Skip to content
目录

uniapp 常用封装组件----上传图片组件(vue2)

1. 组件内容

vue

+    
-    
-    
+    
+    
     
   
 
\ No newline at end of file
diff --git a/pages/uniapp/index.html b/pages/uniapp/index.html
index b3bf745..53d997b 100644
--- a/pages/uniapp/index.html
+++ b/pages/uniapp/index.html
@@ -5,15 +5,15 @@
     
     常用 api 等 | 我的网站
     
-    
-    
-    
-    
+    
+    
+    
+    
     
     
   
   
-    
Skip to content
目录

常用 api 等

1. 状态栏高度

js 获取状态栏高度

js
onLoad() {
+    
Skip to content
目录

常用 api 等

1. 状态栏高度

js 获取状态栏高度

js
onLoad() {
 		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; // 获取状态栏高度
 },
 

uni-app 提供内置 CSS 变量

当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。

css
.navBar {
@@ -143,9 +143,9 @@
 				title: this.status
 			});
 		},
-
- - +
+ + \ No newline at end of file diff --git a/pages/vite/index.html b/pages/vite/index.html index cf225f4..283ccba 100644 --- a/pages/vite/index.html +++ b/pages/vite/index.html @@ -5,15 +5,15 @@ vite 相关 | 我的网站 - - - - + + + + -
Skip to content
目录

vite 相关

1. import.meta.glob 获取文件夹下的文件

js
// 获取所有组件信息
+    
Skip to content
目录

vite 相关

1. import.meta.glob 获取文件夹下的文件

js
// 获取所有组件信息
 const allRoutes = import.meta.glob("@/components/**/index.vue", {
   //设置为 true 直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用)
   eager: true,
@@ -27,9 +27,9 @@
     }
   },
 };
-

2. vite 比 webpack 快的原因

webpack:分析依赖 ==> 编译打包 ==> 交给本地服务器渲染
  • 分析各个模块之间的依赖,再进行打包,然后通过webpack-dev-server请求,显示结果。
  • 项目体积变大,bundle体积增加,影响热更新速度

::: vite: 开发阶段通过 esbuild构建,生产环境通过 rollup 进行构建

  • 开发阶段:采用 esbuild 进行依赖预购建,依赖不改变,不需要重新构建,通过浏览器自身的 ES Modules(ESM) ,给<scrup 写上 type='module',来使用浏览器的 esm 模块加载模块,当浏览器发起相应模块的请求时,Vite 内置的基于 Koa 构建的 web 服务器会拦截 ES Module 请求,并通过 path 找到想要目录的文件,通过简单的处理再返回给浏览器。

:::

总结

vite 在开发阶段构建项目时会将其构建成 ESM 的形式,这让浏览器来决定什么使用要加载什么模块,然后 Vite 拦截并处理浏览器对模型加载的请求,从而实现真正的按需加载,不再需要打包

- - +

2. vite 比 webpack 快的原因

webpack:分析依赖 ==> 编译打包 ==> 交给本地服务器渲染
  • 分析各个模块之间的依赖,再进行打包,然后通过webpack-dev-server请求,显示结果。
  • 项目体积变大,bundle体积增加,影响热更新速度

::: vite: 开发阶段通过 esbuild构建,生产环境通过 rollup 进行构建

  • 开发阶段:采用 esbuild 进行依赖预购建,依赖不改变,不需要重新构建,通过浏览器自身的 ES Modules(ESM) ,给<scrup 写上 type='module',来使用浏览器的 esm 模块加载模块,当浏览器发起相应模块的请求时,Vite 内置的基于 Koa 构建的 web 服务器会拦截 ES Module 请求,并通过 path 找到想要目录的文件,通过简单的处理再返回给浏览器。

:::

总结

vite 在开发阶段构建项目时会将其构建成 ESM 的形式,这让浏览器来决定什么使用要加载什么模块,然后 Vite 拦截并处理浏览器对模型加载的请求,从而实现真正的按需加载,不再需要打包

+ + \ No newline at end of file diff --git a/pages/vite/vitepress.html b/pages/vite/vitepress.html index b9e72ea..b706b06 100644 --- a/pages/vite/vitepress.html +++ b/pages/vite/vitepress.html @@ -5,17 +5,17 @@ vitepress | 我的网站 - - - - + + + + - - - + + + \ No newline at end of file diff --git a/pages/vscodeTool/index.html b/pages/vscodeTool/index.html index 6e0c9c1..82900c6 100644 --- a/pages/vscodeTool/index.html +++ b/pages/vscodeTool/index.html @@ -5,15 +5,15 @@ vscode 相关插件和快捷键 | 我的网站 - - - - + + + + -
Skip to content
目录

vscode 相关插件和快捷键

必备插件

  1. Bookmarks 功能:常用于读源码进行标记行,跳转(代码标记快速跳转)
  2. ESLint 功能:代码规范检查
  3. Prettier - Code formatter 功能:代码美化,自动格式化成规范格式
  4. Project Manager 功能:项目管理插件,当开发多个项目时,可以快速跳转
  5. Path Intellisense 功能:路径智能提示
  6. Image preview 功能:当引入路径为图片时,可以预览当前图片
  7. GitLens 功能:增强了 git 功能,支持在 VSCode 查看作者、修改时间等等
  8. open in browser 功能:在浏览器打开当前文件
  9. auto-close-tag:自动关闭标签。

好用插件

  1. Code Spell Checker :一个用于检查单词拼写的插件。
  2. javascript console utils

Cmd+Shift+L:选中变量,在当前代码下插入一行 clg Cmd+Shift+D:删除插入的那一行代码

  1. Import Cost:显示依赖的大小
  2. Auto Rename Tag:自动重命名标签
  3. Code Runner:一键执行各种语言代码(常用于测试)
  4. Debugger for Chrome:在 VSCode 端,调试代码
  5. Live ServerPP:在服务器端打开你的文件,实时显示你修改的代码 支持 websocket 消息服务,可以用于调试 websocket 客户端 支持可编程虚拟文件,可用于模拟服务端 API 接口
  6. Svg Preview:可以显示你的 SVG 图片,还可以编辑
  7. Template String Converter:在字符串中输入$触发,将字符串转换为模板字符串
  8. JavaScript (ES6) code snippets:ES6 的 js 代码片段,比如 clg---console.log
  9. any-rule:常用正则判断表单内容
  10. vscode-icons:VSCode 文件夹&文件图标
  11. echarts-vscode-extension: --安装插件后,ctrl+shift+p 输入 active Echars 即可开启智能提示, --提示各种 Echar 中 Option 的属性,挺强大的
  12. A-super-translate:选中行,Ctrl+Shift+p 输入 翻译,键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域
  13. One Dark Pro:颜色主题
  14. VS Code Counter:统计你的代码行数,点击 Vscode 顶部菜单 查看 -> 命令面板 ,输入 count
  15. koroFileHeader: 文件头部注释和函数注释的插件
  16. GitHub Repositories: 远程查看 github 上的仓库代码

    在 settings.json 中配置 fileheader

  17. rect client
js
// 文件头部注释
+    
Skip to content
目录

vscode 相关插件和快捷键

必备插件

  1. Bookmarks 功能:常用于读源码进行标记行,跳转(代码标记快速跳转)
  2. ESLint 功能:代码规范检查
  3. Prettier - Code formatter 功能:代码美化,自动格式化成规范格式
  4. Project Manager 功能:项目管理插件,当开发多个项目时,可以快速跳转
  5. Path Intellisense 功能:路径智能提示
  6. Image preview 功能:当引入路径为图片时,可以预览当前图片
  7. GitLens 功能:增强了 git 功能,支持在 VSCode 查看作者、修改时间等等
  8. open in browser 功能:在浏览器打开当前文件
  9. auto-close-tag:自动关闭标签。

好用插件

  1. Code Spell Checker :一个用于检查单词拼写的插件。
  2. javascript console utils

Cmd+Shift+L:选中变量,在当前代码下插入一行 clg Cmd+Shift+D:删除插入的那一行代码

  1. Import Cost:显示依赖的大小
  2. Auto Rename Tag:自动重命名标签
  3. Code Runner:一键执行各种语言代码(常用于测试)
  4. Debugger for Chrome:在 VSCode 端,调试代码
  5. Live ServerPP:在服务器端打开你的文件,实时显示你修改的代码 支持 websocket 消息服务,可以用于调试 websocket 客户端 支持可编程虚拟文件,可用于模拟服务端 API 接口
  6. Svg Preview:可以显示你的 SVG 图片,还可以编辑
  7. Template String Converter:在字符串中输入$触发,将字符串转换为模板字符串
  8. JavaScript (ES6) code snippets:ES6 的 js 代码片段,比如 clg---console.log
  9. any-rule:常用正则判断表单内容
  10. vscode-icons:VSCode 文件夹&文件图标
  11. echarts-vscode-extension: --安装插件后,ctrl+shift+p 输入 active Echars 即可开启智能提示, --提示各种 Echar 中 Option 的属性,挺强大的
  12. A-super-translate:选中行,Ctrl+Shift+p 输入 翻译,键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域
  13. One Dark Pro:颜色主题
  14. VS Code Counter:统计你的代码行数,点击 Vscode 顶部菜单 查看 -> 命令面板 ,输入 count
  15. koroFileHeader: 文件头部注释和函数注释的插件
  16. GitHub Repositories: 远程查看 github 上的仓库代码

    在 settings.json 中配置 fileheader

  17. rect client
js
// 文件头部注释
 "fileheader.customMade": {
   "Author": "zhs", // 文件作者
   "Date": "Do not edit", // 文件创建时间
@@ -28,9 +28,9 @@
   "Author": "zhs", // 函数作者
   "Date": "Do not edit"
 },
-

快捷键

  1. 快速复制一行:shift+alt+下箭头(上箭头)
  2. 选定多个相同的单词:ctrl+d
  3. 添加多个光标:ctrl+alt+下箭头(上箭头)
  4. 快速定位到某一行:ctrl+g
  5. 选择某个区块:shift+alt 然后拖动鼠标
  6. 放大缩小整个编辑器界面: ctrl + + / - ctrl + 加号或者减号
  7. 多行注释:shift +alt +a
  8. 自定义快捷键 作者:管理按钮 --- 键盘快捷方式 --- 输入 shift +alt +a 找到这个快捷键 -----点击编辑按钮 ----直接按下 ctrl +shift + / ----最后按下回车修改完毕。
- - +

快捷键

  1. 快速复制一行:shift+alt+下箭头(上箭头)
  2. 选定多个相同的单词:ctrl+d
  3. 添加多个光标:ctrl+alt+下箭头(上箭头)
  4. 快速定位到某一行:ctrl+g
  5. 选择某个区块:shift+alt 然后拖动鼠标
  6. 放大缩小整个编辑器界面: ctrl + + / - ctrl + 加号或者减号
  7. 多行注释:shift +alt +a
  8. 自定义快捷键 作者:管理按钮 --- 键盘快捷方式 --- 输入 shift +alt +a 找到这个快捷键 -----点击编辑按钮 ----直接按下 ctrl +shift + / ----最后按下回车修改完毕。
+ + \ No newline at end of file diff --git a/pages/vue3/basic/computed.html b/pages/vue3-base/basic/computed.html similarity index 73% rename from pages/vue3/basic/computed.html rename to pages/vue3-base/basic/computed.html index da19a7e..66c9b20 100644 --- a/pages/vue3/basic/computed.html +++ b/pages/vue3-base/basic/computed.html @@ -5,15 +5,15 @@ 哑巴湖大水怪 | 我的网站 - - - - + + + + -
Skip to content
目录

计算属性 computed()

推荐使用计算属性来描述依赖响应式状态的复杂逻辑

  1. 计算属性默认是只读的,computed() 方法期望接收一个 getter 函数,返回值为一个计算属性 ref,模版中会自动解包;
  2. 计算属性值会基于其响应式依赖被缓存;
  3. 计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。不要在 getter 中做异步请求或者更改 DOM!
  4. 避免直接修改计算属性值",从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”,每当源状态发生变化时,就会创建一个新的快照。更改快照是没有意义的;
vue
<script setup>
+    
Skip to content
目录

计算属性 computed()

推荐使用计算属性来描述依赖响应式状态的复杂逻辑

  1. 计算属性默认是只读的,computed() 方法期望接收一个 getter 函数,返回值为一个计算属性 ref,模版中会自动解包;
  2. 计算属性值会基于其响应式依赖被缓存;
  3. 计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。不要在 getter 中做异步请求或者更改 DOM!
  4. 避免直接修改计算属性值",从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”,每当源状态发生变化时,就会创建一个新的快照。更改快照是没有意义的;
vue
<script setup>
 import { ref, computed } from "vue";
 
 const firstName = ref("John");
@@ -172,9 +172,9 @@
   }
 });
 </script>
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3/basic/note.html b/pages/vue3-base/basic/note.html similarity index 70% rename from pages/vue3/basic/note.html rename to pages/vue3-base/basic/note.html index 3fe47df..1cb0b28 100644 --- a/pages/vue3/basic/note.html +++ b/pages/vue3-base/basic/note.html @@ -5,15 +5,15 @@ vue3 基础知识点 | 我的网站 - - - - + + + + -
Skip to content
目录

vue3 基础知识点

1. DOM 更新时机

当你更改响应式状态后,DOM 会自动更新。然而,你得注意 DOM 的更新并不是同步的。相反,Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改,每个组件都只更新一次。

若要等待一个状态改变后的 DOM 更新完成,你可以使用 nextTick() 这个全局 API:

js
import { nextTick } from "vue";
+    
Skip to content
目录

vue3 基础知识点

1. DOM 更新时机

当你更改响应式状态后,DOM 会自动更新。然而,你得注意 DOM 的更新并不是同步的。相反,Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改,每个组件都只更新一次。

若要等待一个状态改变后的 DOM 更新完成,你可以使用 nextTick() 这个全局 API:

js
import { nextTick } from "vue";
 
 function increment() {
   state.count++;
@@ -120,9 +120,9 @@
   }
 });
 
  1. 当在 v-for 中使用模板引用时,对应的 ref 中包含的值是一个数组,它将在元素被挂载后包含对应整个列表的所有元素, 应该注意的是,ref 数组并不保证与源数组相同的顺序。(需要 v3.2.25 及以上版本)
  2. ref attribute 还可以绑定为一个函数,会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数
html
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }" />
-

注意我们这里需要使用动态的 :ref绑定才能够传入一个函数。当绑定的元素被卸载时,函数也会被调用一次,此时的 el 参数会是 null。你当然也可以绑定一个组件方法而不是内联函数

  1. 使用了 <script setup> 的组件是默认私有的:一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露
- - +

注意我们这里需要使用动态的 :ref绑定才能够传入一个函数。当绑定的元素被卸载时,函数也会被调用一次,此时的 el 参数会是 null。你当然也可以绑定一个组件方法而不是内联函数

  1. 使用了 <script setup> 的组件是默认私有的:一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露
+ + \ No newline at end of file diff --git a/pages/vue3/basic/reactive.html b/pages/vue3-base/basic/reactive.html similarity index 54% rename from pages/vue3/basic/reactive.html rename to pages/vue3-base/basic/reactive.html index 9c59d8e..576f079 100644 --- a/pages/vue3/basic/reactive.html +++ b/pages/vue3-base/basic/reactive.html @@ -5,15 +5,15 @@ reactive | 我的网站 - - - - + + + + -
Skip to content
目录

reactive

1. reactive() API 有两条限制:

  1. 仅对对象类型有效(对象、数组和 Map、Set 这样的集合类型),而对 string、number 和 boolean 这样的 原始类型 无效。

  2. 因为 Vue 的响应式系统是通过属性访问进行追踪的,因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象,因为这将导致对初始引用的响应性连接丢失:

    将响应式对象的属性赋值或解构至本地变量时,或是将该属性传入一个函数时,我们会失去响应性:

js
let state = reactive({ count: 0 });
+    
Skip to content
目录

reactive

1. reactive() API 有两条限制:

  1. 仅对对象类型有效(对象、数组和 Map、Set 这样的集合类型),而对 string、number 和 boolean 这样的 原始类型 无效。

  2. 因为 Vue 的响应式系统是通过属性访问进行追踪的,因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象,因为这将导致对初始引用的响应性连接丢失:

    将响应式对象的属性赋值或解构至本地变量时,或是将该属性传入一个函数时,我们会失去响应性:

js
let state = reactive({ count: 0 });
 
 // 上面的引用 ({ count: 0 }) 将不再被追踪(响应性连接已丢失!)
 state = reactive({ count: 1 });
@@ -32,9 +32,9 @@
 // 该函数接收一个普通数字,并且
 // 将无法跟踪 state.count 的变化
 callSomeFunction(state.count);
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3/basic/ref.html b/pages/vue3-base/basic/ref.html similarity index 61% rename from pages/vue3/basic/ref.html rename to pages/vue3-base/basic/ref.html index 028547a..94dd1ac 100644 --- a/pages/vue3/basic/ref.html +++ b/pages/vue3-base/basic/ref.html @@ -5,15 +5,15 @@ ref | 我的网站 - - - - + + + + -
Skip to content
目录

ref

基础知识:

ref() 让我们能创造一种对任意值的 “引用”,并能够在不丢失响应性的前提下传递这些引用

  1. ref() 方法来允许我们创建可以使用任何值类型的响应式 ref;
  2. ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象;
  3. ref 的 .value 属性也是响应式的。同时,当值为对象类型时,会用 reactive() 自动转换它的 .value;
  4. 一个包含对象类型值的 ref 可以响应式地替换整个对象; reactive“替换”一个响应式对象,将导致对初始引用的响应性连接丢失
  5. ref 被传递给函数或是从一般对象上被解构时,不会丢失响应性; reactive 将响应式对象的属性赋值或解构至本地变量时,或是将该属性传入一个函数时,会失去响应性
  6. 当 ref 在模板中作为顶层属性被访问时,它们会被自动“解包”
  7. 当一个 ref 被嵌套在一个响应式对象中,作为属性被访问或更改时,它会自动解包
  8. 如果将一个新的 ref 赋值给一个关联了已有 ref 的属性,那么它会替换掉旧的 ref
  9. 只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。
  10. 跟响应式对象不同,当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时,不会进行解包。
vue
<script setup>
+    
Skip to content
目录

ref

基础知识:

ref() 让我们能创造一种对任意值的 “引用”,并能够在不丢失响应性的前提下传递这些引用

  1. ref() 方法来允许我们创建可以使用任何值类型的响应式 ref;
  2. ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象;
  3. ref 的 .value 属性也是响应式的。同时,当值为对象类型时,会用 reactive() 自动转换它的 .value;
  4. 一个包含对象类型值的 ref 可以响应式地替换整个对象; reactive“替换”一个响应式对象,将导致对初始引用的响应性连接丢失
  5. ref 被传递给函数或是从一般对象上被解构时,不会丢失响应性; reactive 将响应式对象的属性赋值或解构至本地变量时,或是将该属性传入一个函数时,会失去响应性
  6. 当 ref 在模板中作为顶层属性被访问时,它们会被自动“解包”
  7. 当一个 ref 被嵌套在一个响应式对象中,作为属性被访问或更改时,它会自动解包
  8. 如果将一个新的 ref 赋值给一个关联了已有 ref 的属性,那么它会替换掉旧的 ref
  9. 只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。
  10. 跟响应式对象不同,当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时,不会进行解包。
vue
<script setup>
 import { ref, reactive } from "vue";
 const object = { foo: ref(1) }; // foo 是顶层属性,但 object.foo 不是。
 const { foo } = object; // 渲染的结果会是一个 [object Object],因为 object.foo 是一个 ref 对象。我们可以通过将 foo 改成顶层属性来解决这个问题:
@@ -64,9 +64,9 @@
     {{ foo + 1 }}
   </div>
 </template>
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3/basic/v-model.html b/pages/vue3-base/basic/v-model.html similarity index 70% rename from pages/vue3/basic/v-model.html rename to pages/vue3-base/basic/v-model.html index 8c1fad0..5a61ff4 100644 --- a/pages/vue3/basic/v-model.html +++ b/pages/vue3-base/basic/v-model.html @@ -5,15 +5,15 @@ v-model | 我的网站 - - - - + + + + -
Skip to content
目录

v-model

1. v-model 在原生元素上的用法:

html
<input v-model="searchText" />
+    
Skip to content
目录

v-model

1. v-model 在原生元素上的用法:

html
<input v-model="searchText" />
 

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开):

html
<input :value="searchText" @input="searchText = $event.target.value" />
 

2. v-model 在组件上

js
<CustomInput
   :modelValue="searchText"
@@ -117,9 +117,9 @@
 
js
const props = defineProps(['title', 'titleModifiers'])
 defineEmits(['update:title']) console.log(props.titleModifiers) // { capitalize:
 true }
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3/components/componentNote.html b/pages/vue3-base/components/componentNote.html similarity index 68% rename from pages/vue3/components/componentNote.html rename to pages/vue3-base/components/componentNote.html index f517aec..686fda8 100644 --- a/pages/vue3/components/componentNote.html +++ b/pages/vue3-base/components/componentNote.html @@ -5,15 +5,15 @@ 组件注意点 | 我的网站 - - - - + + + + -
Skip to content
目录

组件注意点

1. props 的单向数据流

所有的 props 都遵循着单向绑定原则,你不应该在子组件中去更改一个 prop。若你这么做了,Vue 会在控制台上向你抛出警告

导致你想要更改一个 prop 的需求通常来源于以下两种场景:

  1. prop 被用于传入初始值;而子组件想在之后将其作为一个局部数据属性。 在这种情况下,最好是新定义一个局部数据属性,从 props 上获取初始值即可:
js
const props = defineProps(["initialCounter"]);
+    
Skip to content
目录

组件注意点

1. props 的单向数据流

所有的 props 都遵循着单向绑定原则,你不应该在子组件中去更改一个 prop。若你这么做了,Vue 会在控制台上向你抛出警告

导致你想要更改一个 prop 的需求通常来源于以下两种场景:

  1. prop 被用于传入初始值;而子组件想在之后将其作为一个局部数据属性。 在这种情况下,最好是新定义一个局部数据属性,从 props 上获取初始值即可:
js
const props = defineProps(["initialCounter"]);
 
 // 计数器只是将 props.initialCounter 作为初始值
 // 像下面这样做就使 prop 和后续更新无关了
@@ -108,9 +108,9 @@
   },
 };
 </script>
-

虽然这里的 attrs 对象总是反映为最新的透传 attribute但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。如果你需要响应性,可以使用 prop。或者你也可以使用 onUpdated() 使得在每次更新时结合最新的 attrs 执行副作用。

- - +

虽然这里的 attrs 对象总是反映为最新的透传 attribute但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。如果你需要响应性,可以使用 prop。或者你也可以使用 onUpdated() 使得在每次更新时结合最新的 attrs 执行副作用。

+ + \ No newline at end of file diff --git a/pages/vue3/components/provide.html b/pages/vue3-base/components/provide.html similarity index 59% rename from pages/vue3/components/provide.html rename to pages/vue3-base/components/provide.html index fdd502c..7f93881 100644 --- a/pages/vue3/components/provide.html +++ b/pages/vue3-base/components/provide.html @@ -5,15 +5,15 @@ 依赖注入 | 我的网站 - - - - + + + + -
Skip to content
目录

依赖注入

一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

1. 应用层 Provide

在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用,因为插件一般都不会使用组件形式来提供值。

js
import { createApp } from "vue";
+    
Skip to content
目录

依赖注入

一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

1. 应用层 Provide

在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用,因为插件一般都不会使用组件形式来提供值。

js
import { createApp } from "vue";
 const app = createApp({});
 app.provide(/* 注入名 */ "message", /* 值 */ "hello!");
 

2. Provide (提供)

一个组件可以多次调用 provide(),使用不同的注入名,注入不同的依赖值。

provide(key,value) 函数接收两个参数

第一个参数被称为注入名,可以是一个字符串或是一个 Symbol。

第二个参数是提供的值,值可以是任意类型,包括响应式的状态,比如一个 ref:

vue
<script setup>
@@ -32,9 +32,9 @@
 // 在一些场景中,默认值可能需要通过调用一个函数或初始化一个类来取得。
 // 为了避免在用不到默认值的情况下进行不必要的计算或产生副作用,我们可以使用工厂函数来创建默认值:
 const value = inject("key", () => new ExpensiveClass());
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3/components/reg.html b/pages/vue3-base/components/reg.html similarity index 66% rename from pages/vue3/components/reg.html rename to pages/vue3-base/components/reg.html index acb979d..ea58d8f 100644 --- a/pages/vue3/components/reg.html +++ b/pages/vue3-base/components/reg.html @@ -5,15 +5,15 @@ 组件注册 | 我的网站 - - - - + + + + -
Skip to content
目录

组件注册

1. 全局注册

  1. app.component() 方法可以被链式调用:
  2. 全局注册的组件可以在此应用的任意组件的模板中使用:所有的子组件也可以使用全局注册的组件,这意味着这三个组件也都可以在彼此内部使用。
js
import MyComponent from "./App.vue";
+    
Skip to content
目录

组件注册

1. 全局注册

  1. app.component() 方法可以被链式调用:
  2. 全局注册的组件可以在此应用的任意组件的模板中使用:所有的子组件也可以使用全局注册的组件,这意味着这三个组件也都可以在彼此内部使用。
js
import MyComponent from "./App.vue";
 
 app.component("MyComponent", MyComponent);
 app
@@ -85,9 +85,9 @@
     }),
   ],
 });
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3/components/slot.html b/pages/vue3-base/components/slot.html similarity index 61% rename from pages/vue3/components/slot.html rename to pages/vue3-base/components/slot.html index 9329d9d..08f860e 100644 --- a/pages/vue3/components/slot.html +++ b/pages/vue3-base/components/slot.html @@ -5,15 +5,15 @@ 组件插槽 | 我的网站 - - - - + + + + -
Skip to content
目录

组件插槽

1. 渲染作用域

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域

父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。

2. 具名插槽

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”

要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令:

v-slot 有对应的简写 #,因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。

js
<BaseLayout>
+    
Skip to content
目录

组件插槽

1. 渲染作用域

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域

父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。

2. 具名插槽

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”

要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令:

v-slot 有对应的简写 #,因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。

js
<BaseLayout>
   <template v-slot:header>{/* header 插槽的内容放这里 */}</template>
 </BaseLayout>
 

3. 动态插槽名

html
<base-layout>
@@ -58,9 +58,9 @@
     </template>
   </MyComponent>
 </template>
-
- - +
+ + \ No newline at end of file diff --git a/pages/vueCore/diff.html b/pages/vue3-base/vueCore/diff.html similarity index 53% rename from pages/vueCore/diff.html rename to pages/vue3-base/vueCore/diff.html index 63cf031..0da5e3a 100644 --- a/pages/vueCore/diff.html +++ b/pages/vue3-base/vueCore/diff.html @@ -5,17 +5,17 @@ Diff 算法 | 我的网站 - - - - + + + + -
Skip to content
目录

Diff 算法

Diff 算法作用

在组件更新时,会形成新的 VNode,新旧 VNode 进行比较 patch,通过 diff 算法找出更新的地方,然后执行对应的 DOM 操作 diff 的过程

Vnode 的基本格式h(type, props, children)typevnode的类型(包括组件,元素等),props指接收的参数(对于组件类型为其props等值,对于元素类型为其属性值),children指子vnode(默认是数组)。

- - +
Skip to content
目录

Diff 算法

Diff 算法作用

在组件更新时,会形成新的 VNode,新旧 VNode 进行比较 patch,通过 diff 算法找出更新的地方,然后执行对应的 DOM 操作 diff 的过程

Vnode 的基本格式h(type, props, children)typevnode的类型(包括组件,元素等),props指接收的参数(对于组件类型为其props等值,对于元素类型为其属性值),children指子vnode(默认是数组)。

+ + \ No newline at end of file diff --git a/pages/vueCore/responsivePrinciples.html b/pages/vue3-base/vueCore/responsivePrinciples.html similarity index 83% rename from pages/vueCore/responsivePrinciples.html rename to pages/vue3-base/vueCore/responsivePrinciples.html index 38599f4..bb262ae 100644 --- a/pages/vueCore/responsivePrinciples.html +++ b/pages/vue3-base/vueCore/responsivePrinciples.html @@ -5,15 +5,15 @@ Vue 响应式原理: 依赖收集和依赖更新 | 我的网站 - - - - + + + + -
Skip to content
目录

Vue 响应式原理: 依赖收集依赖更新

1. 数据响应式是什么?

所谓数据响应式就是建立响应式数据依赖(调用了响应式数据的操作)之间的关系,当响应式数据发生变化时,可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作,可以是 DOM 更新,也可以是执行一些回调函数。

2. Vue2 响应式:基于 Object.defineProperty()实现的。

有以下缺点:

defineProperty 定义对象不能监听添加额外属性或修改额外添加的属性的变化

defineProperty 定义对象不能监听根据自身数组下标修改数组元素的变化

Vue2 提供了两个属性方法解决了这个问题:Vue.$setVue.$delete

js
this.$delete(this.student, "name"); // 删除student对象属性name
+    
Skip to content
目录

Vue 响应式原理: 依赖收集依赖更新

1. 数据响应式是什么?

所谓数据响应式就是建立响应式数据依赖(调用了响应式数据的操作)之间的关系,当响应式数据发生变化时,可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作,可以是 DOM 更新,也可以是执行一些回调函数。

2. Vue2 响应式:基于 Object.defineProperty()实现的。

有以下缺点:

defineProperty 定义对象不能监听添加额外属性或修改额外添加的属性的变化

defineProperty 定义对象不能监听根据自身数组下标修改数组元素的变化

Vue2 提供了两个属性方法解决了这个问题:Vue.$setVue.$delete

js
this.$delete(this.student, "name"); // 删除student对象属性name
 this.$set(this.student, "age", "21"); // 添加student对象属性age
 this.$set(this.student.hobby, 0, "王者"); // 更新student对象属性hobby数组
 
  • 为什么 Vue2 新增响应式属性要通过额外的 API? 这是因为 Object.defineProperty 只会对属性进行监测,而不会对对象进行监测,为了可以监测对象 Vue2 创建了一个 Observer 类。Observer 类的作用就是把一个对象全部转换成响应式对象,包括子属性数据,当对象新增或删除属性的时候负责通知对应的 Watcher 进行更新操作。
vm.$set 的实现原理

当向一个响应式对象新增属性的时候,需要对这个属性重新进行响应式的设置,即使用 defineReactive 将新增的属性转换成 getter/setter。

我们在前面讲过每一个对象是会通过 Observer 类型进行包装的,并在 Observer 类里面创建一个属于这个对象的依赖收集存储对象 dep, 最后在新增属性的时候就通过这个依赖对象进行通知相关 Watcher 进行变化更新。

js
function set(target, key, val) {
@@ -286,9 +286,9 @@
     triggerEffects(createDep(effects))
   }
 }
-
  1. Vue3 响应式原理小结

    Vue3 中的副作用函数其实就是 Vue2 的依赖

  • activeEffect 解决匿名函数问题
  • WeakMap、Map、Set 存储对象属性的相关副作用函数。
  • 处理副作用函数时,假如有多个响应式属性,控制只触发生效的属性或用到的属性。
  • 嵌套副作用函数,使用二进制位记录嵌套副作用,通过控制二进制位是否清理嵌套副作用实现层级追踪
  • track()实现依赖收集、层级依赖追踪、依赖清理(解决嵌套副作用)
  • trigger()当某个依赖值发生变化时触发的, 根据依赖值的变化类型, 会收集与依赖相关的不同副作用处理对象, 然后逐个触发他们的 run 函数, 通过执行副作用函数获得与依赖变化后对应的最新值

6. Object.defineProperty 真的不能监听数组的变化吗?

数组就是一个特殊的对象,它的下标就可以看作是它的 key,Object.defineProperty 是可以监听数组的变化的。

Vue2 弃用了这个方案的原因:

  • 这种直接通过下标获取数组元素的场景就比较少,
  • 其次即便通过了 Object.defineProperty 对数组进行监听,但也监听不了 push、pop、shift 等对数组进行操作的方法,所以还是需要通过对数组原型上的那 7 个方法进行重写监听。
  • 为了性能考虑 Vue2 直接弃用了使用 Object.defineProperty 对数组进行监听的方案。

7. Vue2 中是怎么监测数组的变化的?

原理:使用拦截器覆盖 Array.prototype,之后再去使用 Array 原型上的方法的时候,其实使用的是拦截器提供的方法,在拦截器里面才真正使用原生 Array 原型上的方法去操作数组。

8. Vue3 中是怎么监测数组的变化?

在 Vue2 是不可以通过数组下标对响应式数组进行设置和读取的,而 Vue3 中是可以的,但是在 Vue3 中也需要像 Vue2 那样对一些数组原型上方法进行重写。

- - +
  1. Vue3 响应式原理小结

    Vue3 中的副作用函数其实就是 Vue2 的依赖

  • activeEffect 解决匿名函数问题
  • WeakMap、Map、Set 存储对象属性的相关副作用函数。
  • 处理副作用函数时,假如有多个响应式属性,控制只触发生效的属性或用到的属性。
  • 嵌套副作用函数,使用二进制位记录嵌套副作用,通过控制二进制位是否清理嵌套副作用实现层级追踪
  • track()实现依赖收集、层级依赖追踪、依赖清理(解决嵌套副作用)
  • trigger()当某个依赖值发生变化时触发的, 根据依赖值的变化类型, 会收集与依赖相关的不同副作用处理对象, 然后逐个触发他们的 run 函数, 通过执行副作用函数获得与依赖变化后对应的最新值

6. Object.defineProperty 真的不能监听数组的变化吗?

数组就是一个特殊的对象,它的下标就可以看作是它的 key,Object.defineProperty 是可以监听数组的变化的。

Vue2 弃用了这个方案的原因:

  • 这种直接通过下标获取数组元素的场景就比较少,
  • 其次即便通过了 Object.defineProperty 对数组进行监听,但也监听不了 push、pop、shift 等对数组进行操作的方法,所以还是需要通过对数组原型上的那 7 个方法进行重写监听。
  • 为了性能考虑 Vue2 直接弃用了使用 Object.defineProperty 对数组进行监听的方案。

7. Vue2 中是怎么监测数组的变化的?

原理:使用拦截器覆盖 Array.prototype,之后再去使用 Array 原型上的方法的时候,其实使用的是拦截器提供的方法,在拦截器里面才真正使用原生 Array 原型上的方法去操作数组。

8. Vue3 中是怎么监测数组的变化?

在 Vue2 是不可以通过数组下标对响应式数组进行设置和读取的,而 Vue3 中是可以的,但是在 Vue3 中也需要像 Vue2 那样对一些数组原型上方法进行重写。

+ + \ No newline at end of file diff --git a/pages/vueCore/virtualDom.html b/pages/vue3-base/vueCore/virtualDom.html similarity index 56% rename from pages/vueCore/virtualDom.html rename to pages/vue3-base/vueCore/virtualDom.html index 0d63e64..a5c976f 100644 --- a/pages/vueCore/virtualDom.html +++ b/pages/vue3-base/vueCore/virtualDom.html @@ -5,15 +5,15 @@ 虚拟 Dom | 我的网站 - - - - + + + + -
Skip to content
目录

虚拟 Dom

1. 什么是虚拟 dom?

Virtual DOM是 JS 模拟真实 DOM 节点,这个对象就是更加轻量级的对 DOM 的描述

为什么现在主流的框架都使用虚拟 dom?

1)前端性能优化的一个秘诀就是尽可能少地操作 DOM,频繁变动 DOM 会造成浏览器的回流或者重绘

2)使用虚拟 dom,当数据变化,页面需要更新时,通过 diff 算法,对新旧虚拟 dom 节点进行对比,比较两棵树的差异,生成差异对象,一次性对 DOM 进行批量更新操作,进而有效提高了性能

3)虚拟 DOM 本质上是 js 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行更方便的跨平台操作,例如服务器渲染、weex 开发等等

三、 vue3 与 vue2 的区别

1)vue3 性能比 Vue2.x 快 1.2~2 倍

2)使用 proxy 取代 Object.defineproperty,解决了 vue2 中新增属性监听不到的问题,同时 proxy 也支持数组,不需要像 vue2 那样对数组的方法做拦截处理

3)diff 方法优化 vue3 新增了静态标记(patchflag),虚拟节点对比时,就只会对比这些带有静态标记的节点

4)静态提升 vue3 对于不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可。vue2 无论元素是否参与更新,每次都会重新创建然后再渲染

5)事件侦听器缓存 默认情况下 onClick 会被视为动态绑定,所以每次都会追踪它的变化,但是因为是同一个函数,所以不用追踪变化,直接缓存起来复用即可

6)按需引入,通过 treeSharking 体积比 vue2.x 更小

7)组合 API(类似 react hooks),可以将 data 与对应的逻辑写到一起,更容易理解

8)提供了很灵活的 api 比如 toRef、shallowRef 等等,可以灵活控制数据变化是否需要更新 ui 渲染

9)更好的 Ts 支持

四、vue 和 react 的区别

1)设计理念不同

react 整体上是函数式编程思想,组件使用 jsx 语法,all in js,将 html 与 css 全都融入 javaScript 中,jsx 语法相对来说更加灵活

vue 的整体思想,是拥抱经典的 html(结构)+css(表现)+js(行为)的形式,使用 template 模板,并提供指令供开发者使用,如 v-if、v-show、v-for 等,开发时有结构、表现、行为分离的感觉

2)监听数据变化的实现原理不同

vue 的思想是响应式的,通过 Object.defineproperty 或 proxy 代理实现数据监听,每一个属性添加一个 dep 对象(用来存储对应的 watcher),当属性变化的时候,通知对应的 watcher 发生改变

react 推崇的是数据不可变,react 使用的是浅比较,如果对象和数据的引用地址没有变,react 认为该对象没有变化,所以 react 变化时一般都是新创建一个对象

3)更新渲染方式不同

当组件的状态发生变化时,vue 是响应式,通过对应的 watcher 自动找到对应的组件重新渲染

react 需要更新组件时,会重新走渲染的流程,通过从根节点开始遍历,dom diff 找到需要变更的节点,更新任务还是很大,需要使用到 Fiber,将大任务分割为多个小任务,可以中断和恢复,不阻塞主进程执行高优先级的任务

4)各自的优势不同

vue 的优势:框架内部封装的多,更容易上手,简单的语法及项目创建, 更快的渲染速度和更小的体积

react 的优势: react 更灵活,更接近原生的 js、可操控性强,对于能力强的人,更容易造出更个性化的项目

五、react Fiber

解决 react 旧版本,更新页面时会出现丢帧卡顿的问题

React 旧版本问题

当我们调用 setState 更新页面的时候,React 会遍历应用的所有节点,计算出差异,然后再更新 UI

整个过程是一气呵成,不能被打断的。如果页面元素很多,整个过程执行的时间可能超过 50 毫秒,就容易出现掉帧的现象

新版本解决方案

React Fiber 是把一个大任务拆分为了很多个小块任务,一个小块任务的执行必须是一次完成的,不能出现暂停,但是一个小块任务执行完后可以移交控制权给浏览器去响应用户操作

核心是通过 requestIdleCallback ,会在利用浏览器空闲时间会找出所有需要变更的节点

阶段一,生成 Fiber 树,得出需要更新的节点信息,这一步是一个渐进的过程,可以被打断

阶段二,将需要更新的节点一次性批量更新,这个过程不能被打断

react 中使用了 Fiber,为什么 vue 没有用 Fiber? 原因是二者的更新机制不一样

Vue 是基于 template 和 watcher 的组件级更新,把每个更新任务分割得足够小,不需要使用到 Fiber 架构,将任务进行更细粒度的拆分

React 是不管在哪里调用 setState,都是从根节点开始更新的,更新任务还是很大,需要使用到 Fiber 将大任务分割为多个小任务,可以中断和恢复,不阻塞主进程执行高优先级的任务,如果不用 Fiber,会出现老版本卡顿的问题

六、Object.defineProperty

描述:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

语法:

js
Object.defineProperty(obj, prop, descriptor);
+    
Skip to content
目录

虚拟 Dom

1. 什么是虚拟 dom?

Virtual DOM是 JS 模拟真实 DOM 节点,这个对象就是更加轻量级的对 DOM 的描述

为什么现在主流的框架都使用虚拟 dom?

1)前端性能优化的一个秘诀就是尽可能少地操作 DOM,频繁变动 DOM 会造成浏览器的回流或者重绘

2)使用虚拟 dom,当数据变化,页面需要更新时,通过 diff 算法,对新旧虚拟 dom 节点进行对比,比较两棵树的差异,生成差异对象,一次性对 DOM 进行批量更新操作,进而有效提高了性能

3)虚拟 DOM 本质上是 js 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行更方便的跨平台操作,例如服务器渲染、weex 开发等等

三、 vue3 与 vue2 的区别

1)vue3 性能比 Vue2.x 快 1.2~2 倍

2)使用 proxy 取代 Object.defineproperty,解决了 vue2 中新增属性监听不到的问题,同时 proxy 也支持数组,不需要像 vue2 那样对数组的方法做拦截处理

3)diff 方法优化 vue3 新增了静态标记(patchflag),虚拟节点对比时,就只会对比这些带有静态标记的节点

4)静态提升 vue3 对于不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可。vue2 无论元素是否参与更新,每次都会重新创建然后再渲染

5)事件侦听器缓存 默认情况下 onClick 会被视为动态绑定,所以每次都会追踪它的变化,但是因为是同一个函数,所以不用追踪变化,直接缓存起来复用即可

6)按需引入,通过 treeSharking 体积比 vue2.x 更小

7)组合 API(类似 react hooks),可以将 data 与对应的逻辑写到一起,更容易理解

8)提供了很灵活的 api 比如 toRef、shallowRef 等等,可以灵活控制数据变化是否需要更新 ui 渲染

9)更好的 Ts 支持

四、vue 和 react 的区别

1)设计理念不同

react 整体上是函数式编程思想,组件使用 jsx 语法,all in js,将 html 与 css 全都融入 javaScript 中,jsx 语法相对来说更加灵活

vue 的整体思想,是拥抱经典的 html(结构)+css(表现)+js(行为)的形式,使用 template 模板,并提供指令供开发者使用,如 v-if、v-show、v-for 等,开发时有结构、表现、行为分离的感觉

2)监听数据变化的实现原理不同

vue 的思想是响应式的,通过 Object.defineproperty 或 proxy 代理实现数据监听,每一个属性添加一个 dep 对象(用来存储对应的 watcher),当属性变化的时候,通知对应的 watcher 发生改变

react 推崇的是数据不可变,react 使用的是浅比较,如果对象和数据的引用地址没有变,react 认为该对象没有变化,所以 react 变化时一般都是新创建一个对象

3)更新渲染方式不同

当组件的状态发生变化时,vue 是响应式,通过对应的 watcher 自动找到对应的组件重新渲染

react 需要更新组件时,会重新走渲染的流程,通过从根节点开始遍历,dom diff 找到需要变更的节点,更新任务还是很大,需要使用到 Fiber,将大任务分割为多个小任务,可以中断和恢复,不阻塞主进程执行高优先级的任务

4)各自的优势不同

vue 的优势:框架内部封装的多,更容易上手,简单的语法及项目创建, 更快的渲染速度和更小的体积

react 的优势: react 更灵活,更接近原生的 js、可操控性强,对于能力强的人,更容易造出更个性化的项目

五、react Fiber

解决 react 旧版本,更新页面时会出现丢帧卡顿的问题

React 旧版本问题

当我们调用 setState 更新页面的时候,React 会遍历应用的所有节点,计算出差异,然后再更新 UI

整个过程是一气呵成,不能被打断的。如果页面元素很多,整个过程执行的时间可能超过 50 毫秒,就容易出现掉帧的现象

新版本解决方案

React Fiber 是把一个大任务拆分为了很多个小块任务,一个小块任务的执行必须是一次完成的,不能出现暂停,但是一个小块任务执行完后可以移交控制权给浏览器去响应用户操作

核心是通过 requestIdleCallback ,会在利用浏览器空闲时间会找出所有需要变更的节点

阶段一,生成 Fiber 树,得出需要更新的节点信息,这一步是一个渐进的过程,可以被打断

阶段二,将需要更新的节点一次性批量更新,这个过程不能被打断

react 中使用了 Fiber,为什么 vue 没有用 Fiber? 原因是二者的更新机制不一样

Vue 是基于 template 和 watcher 的组件级更新,把每个更新任务分割得足够小,不需要使用到 Fiber 架构,将任务进行更细粒度的拆分

React 是不管在哪里调用 setState,都是从根节点开始更新的,更新任务还是很大,需要使用到 Fiber 将大任务分割为多个小任务,可以中断和恢复,不阻塞主进程执行高优先级的任务,如果不用 Fiber,会出现老版本卡顿的问题

六、Object.defineProperty

描述:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

语法:

js
Object.defineProperty(obj, prop, descriptor);
 

参数:

  • obj 要定义属性的对象。

  • prop 要定义或修改的属性的名称或 Symbol 。

  • descriptor 要定义或修改的属性描述符。 包括

    js
    {
     value: 10, // 要修改的值
     writable: false, // 不可重写
    @@ -53,9 +53,9 @@
     console.log(obj.a);
     obj.a = "abx";
     // console.log(obj.a); // console.log(get())
    -

    七、Object.getOwnPropertyDescriptor()

    Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

- - +

七、Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

+ + \ No newline at end of file diff --git a/pages/vue3-element-admin/anxinPC.html b/pages/vue3-element-admin/anxinPC.html index 4b8acee..245363b 100644 --- a/pages/vue3-element-admin/anxinPC.html +++ b/pages/vue3-element-admin/anxinPC.html @@ -5,15 +5,15 @@ 基于 vue3+vite+pina+element-plus 相关系统搭建过程 | 我的网站 - - - - + + + + -
Skip to content
目录

基于 vue3+vite+pina+element-plus 相关系统搭建过程

参考有来技术团队 vue3-element-admin 自己跟着搭建了一遍

vue3.3 特性了解:https://juejin.cn/post/7231940493256032316#heading-21

defineOptions不用再引入插件写 name 啦

defineModel 简化 双向绑定的 prop

1. 项目初始化

Vite 官方中文文档https://cn.vitejs.dev/guide/

  • 初始化项目
js
pnpm create vite my-vue-app --template vue
+    
Skip to content
目录

基于 vue3+vite+pina+element-plus 相关系统搭建过程

参考有来技术团队 vue3-element-admin 自己跟着搭建了一遍

vue3.3 特性了解:https://juejin.cn/post/7231940493256032316#heading-21

defineOptions不用再引入插件写 name 啦

defineModel 简化 双向绑定的 prop

1. 项目初始化

Vite 官方中文文档https://cn.vitejs.dev/guide/

  • 初始化项目
js
pnpm create vite my-vue-app --template vue
 
  • my-vue-app:项目名称
  • vue: Vue 的模板,除此还有 vue-ts(Vue + TypeScript 的模板) ,react,react-ts 模板等
  • 启动项目
js
cd my-vue-app
 pnpm install
 pnpm run dev
@@ -804,9 +804,9 @@
     },
   });
 };
-
- - +
+ + \ No newline at end of file diff --git a/pages/vue3-element-admin/epComponents.html b/pages/vue3-element-admin/epComponents.html index 5af42ec..c424894 100644 --- a/pages/vue3-element-admin/epComponents.html +++ b/pages/vue3-element-admin/epComponents.html @@ -5,15 +5,15 @@ 哑巴湖大水怪 | 我的网站 - - - - + + + + -
Skip to content
目录

element plus 组件

1. 导入 excel 文件并上传组件

TIP

其中 excelToJson,changeCnToEnFn 方法来自于 工具函数/文件相关 /pages/toolFun/download

源码
vue
<template>
+    
Skip to content
目录

element plus 组件

1. 导入 excel 文件并上传组件

TIP

其中 excelToJson,changeCnToEnFn 方法来自于 工具函数/文件相关 /pages/toolFun/download

源码
vue
<template>
   <el-upload
     ref="uploadPayrollFileRef"
     class="upload-file"
@@ -119,9 +119,9 @@
     ref="searchBoxRef"
   />
 </template>
-

3. 图片上传组件

组件位置:pages/vue3-element-admin/components/imgUpload.vue

- - +

3. 图片上传组件

组件位置:pages/vue3-element-admin/components/imgUpload.vue

+ + \ No newline at end of file diff --git a/pages/vue3Treasures/vueCommonTips.html b/pages/vue3Treasures/vueCommonTips.html index 596d091..c14b413 100644 --- a/pages/vue3Treasures/vueCommonTips.html +++ b/pages/vue3Treasures/vueCommonTips.html @@ -5,15 +5,15 @@ vue 常见技巧 | 我的网站 - - - - + + + + -
Skip to content
目录

vue 常见技巧

1. css 属性选择器示例

页面上 “属性选择器”这几个字显示红色

Details
js
// 页面上 “属性选择器”这几个字显示红色
+    
Skip to content
目录

vue 常见技巧

1. css 属性选择器示例

页面上 “属性选择器”这几个字显示红色

Details
js
// 页面上 “属性选择器”这几个字显示红色
  <div data-v-hash class="test-attr">属性选择器</div>
   <style>
     /* 该标签有个data-v-hash的属性,只不过该属性为空,依然可以使用属性选择器 */
@@ -127,9 +127,89 @@
 <template>
   <input v-model="text" />
 </template>
-
- - +

7. 在 vue 中使用 xlsx-populate库加密excel文件,并且开启 new worker()

7.1 下载 xlsx-populate,这是一个 node的库

  • js npm i -D xlsx-populate
nodejs 版本
js
// 导入 xlsx-populate 库
+const XlsxPopulate = require("xlsx-populate");
+XlsxPopulate.fromBlankAsync().then((workbook) => {
+  // 写入内容
+  workbook.sheet("Sheet1").cell("A1").value("Some  text");
+  // 写入 /test.xlsx 文件 并加密
+  return workbook.toFileAsync("./test.xlsx", { password: "$secret_password" });
+});
+
浏览器版本 https://github.com/dtjohnson/xlsx-populate
js
// 下载  pnpm i xlsx-populate -D
+import XlsxPopulate from "xlsx-populate"; // 导入
+// 加密文件 file 获取后端请求的excel文件为二进制,设置 { responseType: "blob" }
+const worksheets = await XlsxPopulate.fromDataAsync(file);
+// 也可以这么写入文件,一个单元格一个单元格的写
+// workbook.sheet("Sheet1").cell("A1").value("Some  text");
+
+// 对文件进行加密
+const workbook = await worksheets.outputAsync({
+  password: "$secret_password", // 密码
+});
+// downloadExcel下载方法 挂载 a 元素下载
+this.downloadExcel(workbook, "导出文件"); // 导出excel
+

7.2 在 vue 中使用 new worker()

    1. 需要通过 worker-loader配置,配置了之后 worker.js 后缀的文件就会被 loader 处理,但我没整好
    1. 我采用的方法:直接把demo.worker.js文件放到目录public下了,这样就不会报各种奇怪问题,最简单直接

7.3 下载加密的excel

主线程
js
let worker
+async workerDemo(file, ps) {
+      return new Promise((resolve, reject) => {
+        // 实例化一个主线程,地址为 public 下的 demo.worker.js
+        worker = new Worker("demo.worker.js");
+        // 发送信息
+        worker.postMessage({ file });
+        // 接受信息
+        worker.onmessage = (e) => {
+          const { workbook } = e.data;
+          // 异步的话感觉时间和正常加密差不多,不懂
+          resolve(workbook);
+          // 同步,直接在这就下载了,
+          // this.downloadExcel(workbook, "导出文件"); // 导出excel
+        };
+      });
+},
+async quitExport() {
+      // 请求获取文件的二进制数据
+      const file = await this.$http.exportExcel(url,data {
+        responseType: "blob",
+      });
+      const t0 = window.performance.now();
+      // 调用 workerDemo 并且传入 file
+      const workbook = await this.workerDemo(file);
+      // 立即终止 Worker 的行为
+      worker.terminate()
+      // downloadExcel()方法,看 工具函数/文件相关
+      this.downloadExcel(workbook, "导出文件"); // 导出excel
+      const t1 = window.performance.now();
+      console.log(" 函数执行了" + (t1 - t0) + "毫秒。");
+},
+
+
子线程
js
// self 和 this 是一样的,代表子进程的全局对象
+// 引入 xlsx-populate 库的cdn文件
+self.importScripts(
+  "https://cdnjs.cloudflare.com/ajax/libs/xlsx-populate/1.21.0/xlsx-populate.min.js"
+);
+// 接受信息
+self.onmessage = async (e) => {
+  const { file } = e.data;
+  if (!file) {
+    // 关闭进程
+    self.close();
+  } else {
+    // 处理传入的 file 文件对象
+    const worksheets = await XlsxPopulate.fromDataAsync(file);
+    // 进行加密处理
+    const workbook = await worksheets.outputAsync({
+      password: "123", //  密码
+    });
+    // 向父进程传输数据
+    self.postMessage({ workbook });
+    // 关闭进程
+    self.close();
+  }
+};
+

8. el-form弹窗中表单的初始化

js
// vue2
+Object.assign(this.formData, this.$options.data().formData);
+

TIP

  1. vue2:this.$options.data(),拿到 data 中定义的初始数据
+ + \ No newline at end of file diff --git a/pages/vue3Treasures/vueComponents.html b/pages/vue3Treasures/vueComponents.html index 85e860d..3ffd949 100644 --- a/pages/vue3Treasures/vueComponents.html +++ b/pages/vue3Treasures/vueComponents.html @@ -5,15 +5,15 @@ 截取字符组件 | 我的网站 - - - - + + + + -
Skip to content
目录

截取字符组件

1. 自动省略文本

注意点

  1. 通过自定义 data 和 伪元素的 attr 显示展示的文本

    attr() : 可以将自定义属性值作用于伪元素

    html
    <p data-foo="hello">world</p>
    +    
    Skip to content
    目录

    截取字符组件

    1. 自动省略文本

    注意点

    1. 通过自定义 data 和 伪元素的 attr 显示展示的文本

      attr() : 可以将自定义属性值作用于伪元素

      html
      <p data-foo="hello">world</p>
       &:before { content: attr(data-foo)}
       
    1. 单行展示默认省略 单行展示默认省略
    2. 单行带后缀省略单行带后缀省略单行带后缀省略.jpeg
    3. 多行展示默认省略展示默认省略.jpeg
    4. 多行展示带后缀省略多行展示带后缀省略.jpg多行展示带后缀省略多行展示带后缀省略.jpg
    使用
    1. text: [string] 显示的文本
    2. showLine:[number] 展示几行
    3. isShowSuffix: [boolean] 是否展示后缀
    4. textStyle: [object] 展示文本的样式(改变字体大小就在这里修改)
    js
    
     <div style="width:80px" >
    @@ -25,8 +25,8 @@
     

    代码地址:pages/vue3Treasures/components/autoEllipsis.vue

    2. loading 效果

    2.1 转圈 loading

    使用
    1. size: 内置 4 个尺寸( mini,small,medium,large,默认为 mini<Loading />

    2. 自定义尺寸的话输入数字 <Loading :size="30"/>

    js
    <Loading />
     <Loading :size="30"/>
     

    代码地址:pages/vue3Treasures/components/loading.vue

    2.2 小球碰撞 loading

    代码地址:pages/vue3Treasures/components/crashBallLoading.vue

    3. 图片水印

    MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。

    disconnect(): 关闭监听, 阻止 MutationObserver 实例继续接收的通知,直到再次调用其 observe() 方法,该观察者对象包含的回调函数都不会再被调用。

    observe(): 开启监听,配置 MutationObserver 在 DOM 更改匹配给定选项时,通过其回调函数开始接收通知。

    takeRecords():从 MutationObserver 的通知队列中删除所有待处理的通知,并将它们返回到 MutationRecord 对象的新 Array 中。

    代码地址:pages/vue3Treasures/components/imgWatermark.vue

    MutationObserver----MDN

    - - + + \ No newline at end of file diff --git a/pages/vue3Treasures/vueDirectives.html b/pages/vue3Treasures/vueDirectives.html index 8b42e55..57b33e3 100644 --- a/pages/vue3Treasures/vueDirectives.html +++ b/pages/vue3Treasures/vueDirectives.html @@ -5,15 +5,15 @@ vue 常见指令 | 我的网站 - - - - + + + + -
    Skip to content
    目录

    vue 常见指令

    一、注册自定义指令

    1. 在 <script setup> 中,任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令vFocus 即可以在模板中以 v-focus 的形式使用。

    <script setup>
    vue
    <script setup>
    +    
    Skip to content
    目录

    vue 常见指令

    一、注册自定义指令

    1. 在 <script setup> 中,任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令vFocus 即可以在模板中以 v-focus 的形式使用。

    <script setup>
    vue
    <script setup>
     // 在模板中启用 v-focus
     const vFocus = {
       mounted: (el) => el.focus(),
    @@ -242,9 +242,9 @@
       const disTopHeight = el.offsetTop;
       el.style.height = parentElHeight - disTopHeight - bottomHeight + "px";
     }
    -
    - - +
    + + \ No newline at end of file