Help
RSS
API
Feed
Maltego
Contact
Domain > artiely.com
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2024-10-20
47.79.64.169
(
ClassC
)
2026-01-17
47.79.64.176
(
ClassC
)
Port 80
HTTP/1.1 200 OKServer: AliyunOSSDate: Sat, 17 Jan 2026 13:29:46 GMTContent-Type: text/htmlContent-Length: 288507Connection: keep-aliveVary: Accept-Encodingx-oss-request-id: 696B8ECAAB67323535512E44Accept-Ranges: bytesETag: 9841D48CE2D87CBCFCCD0876EE3B7821Last-Modified: Mon, 18 Mar 2024 08:47:41 GMTx-oss-object-type: Normalx-oss-hash-crc64ecma: 1372239796868184491x-oss-storage-class: StandardContent-MD5: mEHUjOLYfLz8zQh27jt4IQx-oss-server-time: 26 !DOCTYPE html>html langen-US dirltr> head> meta charsetutf-8> meta nameviewport contentwidthdevice-width,initial-scale1> title>ArtielyBlog/title> meta namedescription contentJust playing around.> meta namegenerator contentVitePress v1.0.0-rc.45> link relpreload stylesheet href/assets/style.YRO5wqqk.css asstyle> script typemodule src/assets/app.2HGCEJft.js>/script> link relpreload href/assets/inter-roman-latin.Bu8hRsVA.woff2 asfont typefont/woff2 crossorigin> link relmodulepreload href/assets/chunks/framework.l0xeoHtg.js> link relmodulepreload href/assets/chunks/theme.l3YyJhge.js> link relmodulepreload href/assets/index.md.BTpQKT2a.lean.js> script idcheck-dark-mode>(()>{const elocalStorage.getItem(vitepress-theme-appearance)||auto,awindow.matchMedia((prefers-color-scheme: dark)).matches;(!e||eauto?a:edark)&&document.documentElement.classList.add(dark)})();/script> script idcheck-mac-os>document.documentElement.classList.toggle(mac,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));/script> /head> body> div idapp>!---->div classLayout data-v-5d98c3a5>!---->!---->!---->span tabindex-1 data-v-0f60ec36>/span>a href#VPContent classVPSkipLink visually-hidden data-v-0f60ec36> Skip to content /a>!---->!---->header classVPNav data-v-5d98c3a5 data-v-ae24b3ad>div classVPNavBar top data-v-ae24b3ad data-v-19c990f1>div classwrapper data-v-19c990f1>div classcontainer data-v-19c990f1>div classtitle data-v-19c990f1>div classVPNavBarTitle data-v-19c990f1 data-v-ab179fa1>a classtitle href/ data-v-ab179fa1>!---->!---->!---->span data-v-ab179fa1>Artiely'Blog/span>!---->!---->/a>/div>/div>div classcontent data-v-19c990f1>div classcontent-body data-v-19c990f1>!---->!---->div classVPNavBarSearch search data-v-19c990f1>!---->/div>nav aria-labelledbymain-nav-aria-label classVPNavBarMenu menu data-v-19c990f1 data-v-7f418b0f>span idmain-nav-aria-label classvisually-hidden data-v-7f418b0f>Main Navigation/span>!---->!---->a classVPLink link VPNavBarMenuLink active href/ tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>主页/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/posts/index.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>博客/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/timeline.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>归档/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/tag.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>标签/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/about.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>关于/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/comment.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>留言/span>!---->/a>!---->!---->a classVPLink link vp-external-link-icon VPNavBarMenuLink hrefhttps://github.com/artiely target_blank relnoreferrer tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>github/span>!---->/a>!---->!---->/nav>!---->div classVPNavBarAppearance appearance data-v-19c990f1 data-v-e6aabb21>button classVPSwitch VPSwitchAppearance typebutton roleswitch titleSwitch to dark theme aria-checkedfalse data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3>span classcheck data-v-1d5665e3>span classicon data-v-1d5665e3>!---->span classvpi-sun sun data-v-d1f28634>/span>span classvpi-moon moon data-v-d1f28634>/span>!---->/span>/span>/button>/div>!---->div classVPFlyout VPNavBarExtra extra data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9>button typebutton classbutton aria-haspopuptrue aria-expandedfalse aria-labelextra navigation data-v-b6c34ac9>span classvpi-more-horizontal icon data-v-b6c34ac9>/span>/button>div classmenu data-v-b6c34ac9>div classVPMenu data-v-b6c34ac9 data-v-e7ea1737>!---->!---->!---->!---->div classgroup data-v-d0bd9dde>div classitem appearance data-v-d0bd9dde>p classlabel data-v-d0bd9dde>Appearance/p>div classappearance-action data-v-d0bd9dde>button classVPSwitch VPSwitchAppearance typebutton roleswitch titleSwitch to dark theme aria-checkedfalse data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3>span classcheck data-v-1d5665e3>span classicon data-v-1d5665e3>!---->span classvpi-sun sun data-v-d1f28634>/span>span classvpi-moon moon data-v-d1f28634>/span>!---->/span>/span>/button>/div>/div>/div>!---->!---->!---->/div>/div>/div>!---->!---->button typebutton classVPNavBarHamburger hamburger aria-labelmobile navigation aria-expandedfalse aria-controlsVPNavScreen data-v-19c990f1 data-v-e5dd9c1c>span classcontainer data-v-e5dd9c1c>span classtop data-v-e5dd9c1c>/span>span classmiddle data-v-e5dd9c1c>/span>span classbottom data-v-e5dd9c1c>/span>/span>/button>/div>/div>/div>/div>div classdivider data-v-19c990f1>div classdivider-line data-v-19c990f1>/div>/div>/div>!---->/header>!---->!---->div classVPContent is-home idVPContent data-v-5d98c3a5 data-v-1428d186>div classVPHome data-v-1428d186 data-v-686f80a6>!---->!---->!---->!---->!---->!---->!---->!---->!---->!---->div classvp-doc container style--vp-offset:calc(50% - Infinitypx); data-v-686f80a6 data-v-82d4af08>!---->div styleposition:relative; data-v-686f80a6>div>!---->!---->div classhome data-v-7b2ece8c>div data-v-7b2ece8c>h2 data-v-7b2ece8c>Miracles sometimes occur,/h2>h2 data-v-7b2ece8c>but one has to work terribly for them./h2>/div>p class data-v-7b2ece8c>人生除了眼前的苟且，还有未知的 bug , 和看不懂的 code ./p>/div>canvas idcanvas data-v-7b2ece8c>/canvas>!---->/div>/div>!---->/div>/div>/div>!---->!---->!---->/div>div classfooter>a title更换字体风格>svg t1677726706400 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svg p-id1305 width32 height32>path dM944.23079443-0.0572024H79.76920557c-44.28356519 0-80.32351067 36.03994548-80.32351067 80.32351067v863.50880869c0 44.28356519 36.03994548 80.32351067 80.32351067 80.32351068h864.46158886c44.28356519 0 80.32351067-36.03994548 80.32351067-80.32351068v-863.50880869c0-44.28356519-36.03994548-80.32351067-80.32351067-80.32351067z m-54.47417046 91.42547088a34.3829365 34.3829365 0 1 1 0 68.84872343 34.3829365 34.3829365 0 0 1 0-68.84872343z m-123.36431914 0a34.3829365 34.3829365 0 1 1 0 68.84872343 34.3829365 34.3829365 0 0 1 0-68.84872343zM932.7560072 932.2589045H91.2439928V245.67723045h841.5120144V932.2589045zM258.60190057 760.05424545h-6.29663417c-20.6297619 0-30.94464285-3.27259275-30.94464284-9.81777825 0-5.84095668 6.46233505-18.97275291 19.38700515-39.27111301l31.48317078-50.08309664h155.13746646l9.61065213 51.07730203c2.8583405 15.4516088 4.26679813 27.42349875 4.26679815 35.99852026 0 8.0364936-12.13759084 12.0961656-36.49562295 12.09616561h-7.78794225l-3.27259275 15.61730972h139.68585767l3.27259274-15.61730972-6.29663415-0.24855135c-13.09037101-0.66280359-21.87251863-3.93539635-26.30501769-9.81777825s-8.82357285-20.21550965-13.21464666-43.04080846l-59.56947312-310.02638158h-18.39279976L218.33658217 711.46245689c-16.11441241 25.14511138-26.05646633 39.27111301-29.82616179 42.41943008s-13.54604848 5.09530263-29.32905908 5.92380713l-4.76390084 0.24855135-3.0240414 15.61730972h103.93588876l3.27259275-15.61730972z m131.6907893-296.19035654l32.43595093 175.14584999H282.21427863l108.07841124-175.14584999z m240.34915365 318.06287518c22.12106998 0 45.98199941-11.06053499 71.58278827-33.14017975s48.88176514-51.53297952 69.71865315-88.36000427l-22.9909997 115.20354987h96.23079695l3.0240414-15.61730971-4.51534949-0.24855134c-17.77142139-1.15990629-28.29342846-2.36123781-31.44174553-3.52114411s-4.80532606-4.43249904-4.80532607-9.81777825c0-10.2320305 1.40845763-22.24534565 4.26679814-35.99852026l40.96954722-208.07890362H803.21932958c-10.2320305-2.07126124-19.01417813-3.64541977-26.38786813-4.72247562s-13.38034757-1.57415854-18.06139796-1.57415853c-44.53211653 0-85.99876645 23.44667717-124.35852452 70.38145675s-57.49821187 97.68067982-57.49821188 152.23770073c0 21.00258892 4.47392427 36.78559952 13.4217728 47.34903183s22.41104656 15.86586107 40.30674363 15.86586105z m12.0961656-155.01319079c8.86499808-30.1989888 19.46985561-54.34989479 31.81457257-72.45271799 15.53445925-22.6595979 35.83281936-33.96868425 60.85365508-33.96868425A128.50104699 128.50104699 0 0 1 796.79841975 535.61237808l-17.39859436 87.32437365c-51.90580654 81.19344039-93.86955915 121.79016059-125.84983262 121.79016059-8.0364936 0-14.08457639-3.02404141-18.06139796-9.07212421s-6.00665758-15.07878178-6.00665758-27.1749474c0-24.15090599 4.43249904-51.32585339 13.25607189-81.52484219z fillvar(--c-brand) p-id1306>/path>/svg>/a>a titlebilibili hrefhttps://space.bilibili.com/31432769/ target_blank>svg t1677726664284 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svg p-id1064 width32 height32>path dM0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z fill#EC5D85 p-id1065>/path>path dM512 241.96096h52.224l65.06496-96.31744c49.63328-50.31936 89.64096 0.43008 63.85664 45.71136l-34.31424 51.5072c257.64864 5.02784 257.64864 43.008 257.64864 325.03808 0 325.94944 0 336.46592-404.48 336.46592S107.52 893.8496 107.52 567.90016c0-277.69856 0-318.80192 253.14304-324.95616l-39.43424-58.368c-31.26272-54.90688 37.33504-90.40896 64.68608-42.37312l60.416 99.80928c18.18624-0.0512 41.18528-0.0512 65.66912-0.0512z fill#EF85A7 p-id1066>/path>path dM512 338.5856c332.8 0 332.8 0 332.8 240.64s0 248.39168-332.8 248.39168-332.8-7.75168-332.8-248.39168 0-240.64 332.8-240.64z fill#EC5D85 p-id1067>/path>path dM281.6 558.08a30.72 30.72 0 0 1-27.47392-16.97792 30.72 30.72 0 0 1 13.73184-41.216l122.88-61.44a30.72 30.72 0 0 1 41.216 13.74208 30.72 30.72 0 0 1-13.74208 41.216l-122.88 61.44a30.59712 30.59712 0 0 1-13.73184 3.23584zM752.64 558.08a30.60736 30.60736 0 0 1-12.8512-2.83648l-133.12-61.44a30.72 30.72 0 0 1-15.04256-40.7552 30.72 30.72 0 0 1 40.76544-15.02208l133.12 61.44A30.72 30.72 0 0 1 752.64 558.08zM454.656 666.88a15.36 15.36 0 0 1-12.288-6.1952 15.36 15.36 0 0 1 3.072-21.49376l68.5056-50.91328 50.35008 52.62336a15.36 15.36 0 0 1-22.20032 21.23776l-31.5904-33.024-46.71488 34.72384a15.28832 15.28832 0 0 1-9.13408 3.04128z fill#EF85A7 p-id1068>/path>path dM65.536 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM362.25024 383.03744l34.816 303.17568h34.64192L405.23776 381.1328zM309.52448 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM446.86336 542.98624h45.80352V705.3312h-33.87392zM296.6016 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM326.99392 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM470.62016 459.88864h19.456v62.27968h-19.456zM440.23808 459.88864h22.20032v62.27968h-16.62976z fill#FFFFFF p-id1069>/path>path dM243.56864 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z fill#EB5480 p-id1070>/path>path dM513.29024 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM810.00448 383.03744l34.816 303.17568h34.64192L852.992 381.1328zM757.27872 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM894.6176 542.98624h45.80352V705.3312H906.5472zM744.35584 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM774.74816 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM918.3744 459.88864h19.456v62.27968h-19.456zM887.99232 459.88864h22.20032v62.27968h-16.62976z fill#FFFFFF p-id1071>/path>path dM691.32288 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z fill#EB5480 p-id1072>/path>/svg>/a>/div>!---->/div> script>window.__VP_HASH_MAP__JSON.parse({\design.md\:\DH2-gyoE\,\docs_2023-01-17-puerts-nodejs-unity_index.md\:\Cuu69fcG\,\docs_2022-11-18-electron-countdown_index.md\:\BywmCqpS\,\about.md\:\CC_1udDQ\,\docs_2022-11-18-electron-live2d_index.md\:\BsD2grog\,\design2.md\:\Ae3lk_Hw\,\comment.md\:\I6qwc9h6\,\docs_2023-01-05-pyqt5_index.md\:\B20WmFbg\,\posts_2017_2017-6-10-tcp.md\:\D7XwMFwt\,\posts_2017_2017-6-8-yahoo-rules14.md\:\LDjoEKoE\,\posts_2017_2017-6-9-form-default-submit.md\:\0cfNsajG\,\index.md\:\BTpQKT2a\,\docs_2023-02-13-fe-safe_index.md\:\BPrVB9GD\,\posts_2017_2017-6-6-css-sticky-footer.md\:\C0ofMk83\,\docs_2023-01-04-new-year-plan_index.md\:\pFVGl5x1\,\posts_2017_2017-6-6-git.md\:\BPsvnfFk\,\posts_2017_2017-7-4-moment.md\:\VbM0cuTP\,\posts_2017_2017-6-6-css-ios-android.md\:\BNuNDJcv\,\docs_2022-12-08-fe_index.md\:\cvNqG1T2\,\posts_2017_2017-6-7-css-mobile-scroll-through.md\:\C06zVkhx\,\posts_2017_2017-7-7-js-rules.md\:\DOgwQX2q\,\posts_2017_2017-7-7-rules-file.md\:\CMQwSX3H\,\posts_2018_2018-10-10-chrome-dev-tips.md\:\q0oRE8Wp\,\posts_2017_2017-7-7-css-rules.md\:\DCC4TxC2\,\posts_2017_2017-6-6-css-1px.md\:\BQIwR9os\,\posts_2017_2017-7-7-rules-html.md\:\DPi4IR5I\,\posts_2018_2018-10-10-get-post.md\:\Bv_r_QwS\,\posts_2018_2018-1-30-centos-setup-nodejs.md\:\B96edCgO\,\posts_2018_2018-10-10-git-green-pointer.md\:\DdrSMU2H\,\posts_2018_2018-10-10-pm2.md\:\BrOxX4gS\,\posts_2018_2018-10-10-vue-pracel.md\:\BGkupVAK\,\posts_2018_2018-10-10-npm-nrm.md\:\o8dNSRzm\,\posts_2018_2018-10-10-js-bit-operation.md\:\CEtwaPm9\,\posts_2018_2018-10-10-axios.md\:\B0dUG5DX\,\posts_2018_2018-3-12-nodejs-npm.md\:\cflt7wsE\,\posts_2018_2018-10-7-node-spider.md\:\WQsctoHR\,\posts_2018_2018-7-10-electron-message.md\:\DS8SrP50\,\posts_2018_2018-6-9-nuxt.md\:\ZHQV0aXN\,\posts_2018_2018-7-11-electron-nedb.md\:\Dy2gx15m\,\posts_2018_2018-7-11-electron-shortcut-cliboard-nativeimage.md\:\WquIcjkc\,\posts_2018_2018-7-3-electron-init.md\:\DlbFXtUs\,\posts_2018_2018-7-4-electron-base.md\:\C9oPfOos\,\posts_2018_2018-7-5-electron-model.md\:\Ce-MKzI1\,\posts_2018_2018-7-8-electron-shell-url-webview.md\:\CgWVryh1\,\posts_2018_2018-7-8-electron-dialog.md\:\BVkuKSv5\,\posts_2018_2018-7-7-electron-main-render.md\:\D_acQgb0\,\posts_2018_2018-7-6-electron-menu-shortcut.md\:\BHb97JZI\,\posts_2018_2018-7-9-electron-ico.md\:\Dufi3tf3\,\posts_2018_2018-8-8-question.md\:\D_OOGwFE\,\posts_2018_2018-8-7-egg-start.md\:\bP1LZCiH\,\posts_2018_2018-8-8-vue-rules.md\:\DqHqgAR6\,\posts_2018_2018-7-10-websocket.md\:\Ba61GAfA\,\posts_2019_2019-10-3-alinode.md\:\DSKh174R\,\posts_2018_2018-9-7-js.md\:\BgNj3s-m\,\posts_2019_2019-4-3-sentry-sourcemap.md\:\TIGLFmrk\,\posts_2019_2019-10-27-node-pm2.md\:\Bfu2f85v\,\posts_2019_2019-4-16-vue-cli3_to-plugin.md\:\BU3vK0Sf\,\posts_2019_2019-11-16-nodejs-api.md\:\_6jtGsN0\,\posts_2019_2019-5-15-vue-admin.md\:\RD2CNoAF\,\posts_2019_2019-4-3-vuepress-theme.md\:\BGYfqP9Q\,\posts_2019_2019-5-5-restful-graphql.md\:\CVGxO4st\,\posts_2018_2018-6-26-web-koa-egg.md\:\DCeIQIHh\,\posts_2019_2019-4-15-nodejs-tcp-udp-h2.md\:\0JFWdytS\,\posts_2019_2019-6-1-linux.md\:\B63QVe4D\,\posts_2019_2019-6-27-eslint-test.md\:\Cw-I5iuR\,\posts_2019_2019-6-12-deploy.md\:\CaPFE9z0\,\posts_2019_2019-7-6-dart-flutter-conf.md\:\CNGObLqL\,\posts_2019_2019-6-4-docker.md\:\DqkqiJP0\,\posts_2019_2019-7-6-android-studio-flutter-shortcut.md\:\DdeRB7-O\,\posts_2019_2019-6-6-vue-observable.md\:\DFR_PSHj\,\posts_2019_2019-7-13-automated-testing.md\:\Dukvzkbv\,\posts_2019_2019-6-6-css-fixedleft-autoright.md\:\BwFxA0Hp\,\posts_2020_2020-3-16-windows-plugin_2020-3-16-windows-plugin.md\:\rvxwv3X8\,\posts_2020_2020-3-16-chrome-plugin_2020-3-16-chrome-plugin.md\:\uN7tIPQ6\,\posts_2019_2019-6-19-fontend-performance-optimization.md\:\BSfICx63\,\posts_2020_2020-12-31-css_2020-12-31-css.md\:\bZeIfv-s\,\posts_2020_2020-3-16-vscode-plugin_2020-3-16-vscode-plugin.md\:\tzVvV9gg\,\posts_2020_2020-3-18-electron-mirror-down_2020-3-18-electron-mirror-down.md\:\BPaqX4mb\,\posts_2020_2020-3-19-timer.js_2020-3-19-timer.js.md\:\BDdUZgHu\,\posts_2020_2020-4-2-cmder_2020-4-2-cmder.md\:\D6AEfzdJ\,\posts_2020_2020-4-1-plupload_2020-4-1-plupload.md\:\Bm0n5mg1\,\posts_2020_2020-3-20-antd-vue-pro_2020-3-20-antd-vue-pro.md\:\BLvVQgqa\,\posts_2020_2020-3-31-shituzhengmei_2020-3-31-shituzhengmei.md\:\EcFfH8nX\,\posts_2020_2020-3-29-vuepress-plugin_2020-3-29-vuepress-plugin.md\:\B2Il_IE8\,\posts_2020_2020-4-29-vue-hook-lifecycle_2020-4-29-vue-hook-lifecycle.md\:\C_lhshRu\,\posts_2020_2020-3-18-electron-updater_2020-3-18-electron-updater.md\:\DfMR9DVE\,\posts_2019_2019-6-4-nodejs-events.md\:\DV1U-qvu\,\posts_2020_2020-3-20-js-how-to-work_2020-3-20-js-how-to-work.md\:\BeQJl5G7\,\posts_2020_2020-4-4-yiqin_2020-4-4-yiqin.md\:\xtZUpIHX\,\posts_2020_2020-5-29-axios_2020-5-29-axios.md\:\ePbhQs8J\,\posts_2020_2020-6-12-icon_2020-6-12-icon.md\:\BaaLIH9c\,\posts_2020_2020-6-20-limit-chars_2020-6-20-limit-chars.md\:\CwpIuuVz\,\posts_2020_2020-6-23-charslimit_2020-6-23-charslimit.md\:\CsoAw7di\,\posts_2020_2020-6-25-photo_2020-6-25-photo.md\:\BcWzRd9l\,\posts_2020_2020-6-25-custom-event_2020-6-25-custom-event.md\:\DNLK2qQ9\,\posts_2020_2020-4-6-plop_2020-4-6-plop.md\:\DJGwoxg4\,\posts_2020_2020-5-22-ali-oss_2020-5-22-ali-oss.md\:\EeilOsGQ\,\posts_2019_2019-8-14-nosql.md\:\BoPqgGE3\,\posts_2020_2020-6-5-03-vue-config_2020-6-5-03-vue-config.md\:\DLQLoCUL\,\posts_2020_2020-6-5-01-vue-cli_2020-6-5-01-vue-cli.md\:\C3S3K0FT\,\posts_2020_2020-6-5-02-vue-dir_2020-6-5-02-vue-dir.md\:\V0CHXN9N\,\posts_2020_2020-7-1-vuex-api_2020-7-1-vuex-api.md\:\CVuW9dhU\,\posts_2020_2020-6-5-06-local-preview_2020-6-5-06-local-preview.md\:\m6C_N8TU\,\posts_2020_2020-6-5-04-vue.webpack_2020-6-5-04-vue.webpack.md\:\D7uaS2Z8\,\posts_2020_2020-7-14-share_2020-7-14-share.md\:\noLpwmmh\,\posts_2020_2020-7-21-taro_2020-7-21-taro.md\:\K7PGi0hJ\,\posts_2020_2020-7-23-temp_2020-7-23-temp.md\:\2uFKv6tm\,\posts_2020_2020-7-9-thks-js_2020-7-9-thks-js.md\:\Bh6I61cG\,\posts_2020_2020-6-5-05-env-mode_2020-6-5-05-env-mode.md\:\C4fEkn5t\,\posts_2020_2020-7-1-vue-api_2020-7-1-vue-api.md\:\D8kFY8KA\,\posts_2020_2020-8-17_2020-8-17.md\:\FdAhPZ6w\,\posts_2020_2020-9-1-fw_2020-9-1-fw.md\:\Cr4TxvH5\,\posts_2020_2020-9-15-js-arr_2020-9-15-js-arr.md\:\BONfVFxK\,\posts_2020_2020-9-1-fw2_2020-9-1-fw2.md\:\BbolpjeW\,\posts_2020_2020-7-13-madel_2020-7-13-madel.md\:\FYWrNDW8\,\posts_2020_2020-6-29-component_2020-6-29-component.md\:\1Y5Zu8LR\,\posts_2020_2020-9-3-brower_2020-9-3-brower.md\:\D-zCA5q-\,\posts_2021_2021-1-8-threejs_index.md\:\Bx3eIQ-c\,\posts_2021_2021-12-1-kaboom_2021-12-1.md\:\B5vRk7ES\,\posts_2020_2020-9-5-what-happens_2020-9-5-what-happens.md\:\B38feyIh\,\posts_2020_2020-9-7-recursive_2020-9-7-recursive.md\:\Dvrx72H7\,\posts_2021_2021-12-29-unity_index.md\:\DtP6yuYc\,\posts_2021_2021-1-9-js_index.md\:\CGBhGm6G\,\posts_2020_2020-9-24-interview_2020-9-24-interview.md\:\DliNT6s6\,\posts_2020_2020-9-2-proxy_index.md\:\wiOEe9ev\,\posts_2021_2021-6-15-mini_2021-6-15-mini.md\:\CDaU9A1V\,\posts_2021_2021-3-18-appleid_2021-3-18-appleid.md\:\DM9etRjY\,\posts_2021_2021-1-3-puppeteer_2021-1-3-puppeteer.md\:\Bas6z7Fr\,\posts_2021_2021-8-15-resize-observer_2021-8-15-resize-observer.md\:\Drd7d9NY\,\posts_2021_2021-7-23-pixijs_2021-7-23-pixijs.md\:\Qi7cd-CY\,\posts_2021_2021-9-9-taro_index.md\:\XfYgUG3O\,\posts_2021_2021-8-16-min-share_2021-8-16-min-share.md\:\Dc-h_Avu\,\posts_2022_2022-05-11-puppet-master-props_index.md\:\Cl-W_OWv\,\posts_2022_2022-05-27-agent_index.md\:\DyzgfOsa\,\posts_2022_2022-06-17-probuilder_index.md\:\C5vinz4X\,\posts_2022_2022-05-09-algolia_index.md\:\QmP9w81P\,\posts_2022_2022-06-29-unity-bilibili_index.md\:\Bx73EnHV\,\posts_2022_2022-06-20-nav-mesh_index.md\:\CTKhnJQ2\,\posts_2022_2022-05-16-scroll_index.md\:\Dr_ZSH6N\,\posts_2022_2022-06-22-mac-photo_index.md\:\Dz8z4kw8\,\posts_2022_2022-06-02-unity-transform_index.md\:\kh_NurKz\,\posts_2022_2022-05-17-markdown-it_index.md\:\DXOC0pwk\,\posts_2022_2022-07-05-unity_index.md\:\5B-07agI\,\posts_2022_2022-07-01-mongo_index.md\:\Ddnf_uX_\,\posts_2022_2022-1-10-js-list_index.md\:\DL2FSeaC\,\posts_2022_2022-1-11md-test_index.md\:\DzHtlGhA\,\posts_2021_2021-2-23-proxy_2021-2-23-proxy.md\:\BTFdpM2a\,\posts_2022_2022-1-13-css-unicode-range_index.md\:\olC2q-OF\,\posts_2022_2022-1-15-git-stash_index.md\:\C2CA-Nd3\,\posts_2022_2022-1-19-unity-spine_index.md\:\UZ2XVGyw\,\posts_2022_2022-1-20-unity-itween_index.md\:\Bh4QbZvj\,\posts_2022_2022-1-13-js-a-a-1_index.md\:\DpR4N0sP\,\posts_2022_2022-06-29-unity-transparent_index.md\:\DeGybw7c\,\posts_2022_2022-1-6-js-single_index.md\:\BA7eVQT-\,\posts_2022_2022-1-12-js-array_index.md\:\Bq4jBP30\,\posts_2022_2022-1-13-js-str-is-num_index.md\:\vmnZNG-a\,\posts_2022_2022-1-7-js-proxy_index.md\:\Dr4mdg5O\,\posts_2022_2022-1-9-frontend_index.md\:\BsStg5mB\,\posts_2022_2022-11-14-py-env_index.md\:\BvL-cjTs\,\posts_2022_2022-1-9-js-prototype_index.md\:\BPWeWill\,\posts_2022_2022-11-18-douyin-danmu_index.md\:\B6OeMziT\,\posts_2022_2022-1-8-js-provider_index.md\:\DSQG2KcU\,\posts_2022_2022-11-16-unity-materials_index.md\:\DXGz3Zps\,\posts_2022_2022-11-18-slack-hook_index.md\:\D78oTm_p\,\posts_2022_2022-11-18-vue-wc_index.md\:\DDooQIUp\,\posts_2022_2022-11-26-protobuf_index.md\:\oF1QU9k4\,\posts_2022_2022-12-07-open-ai_index.md\:\J7hacyJv\,\posts_2022_2022-1-9-js-oneline_index.md\:\DkOgbcEn\,\posts_2022_2022-11-28-csharp-playwright_index.md\:\DcMoVist\,\posts_2022_2022-12-02-image-animated_index.md\:\jfCaWOEy\,\posts_2022_2022-11-26-puppeteer-ws_index.md\:\Cxm_r0ZD\,\posts_2022_2022-11-17-github-actions_index.md\:\D_EguZSJ\,\posts_2022_2022-12-08-chrome-ext-ws_index.md\:\BbL-7-Px\,\posts_2022_2022-3-14-unity-layout_index.md\:\12Zg9fCv\,\posts_2022_2022-2-9-family-meeting_index.md\:\7lXvEYfC\,\posts_2022_2022-3-21-webext_index.md\:\DxJmDCgK\,\posts_2022_2022-3-17-unity-theme_index.md\:\C4PYKThv\,\posts_2022_2022-3-25-unity-ragdoll_index.md\:\DDuscR06\,\posts_2022_2022-3-24-unity-nodejs_index.md\:\CSfUAa_k\,\posts_2022_2022-2-22-unity_index.md\:\D7OFzUNe\,\posts_2022_2022-4-12-unity-ragdoll_index.md\:\RzRJ0cDe\,\posts_2022_2022-4-15-unity-puppet-master_index.md\:\CfAIU284\,\posts_2022_2022-3-23-vscodeext_index.md\:\DvHxQGzO\,\posts_2022_2022-4-18-system-win_index.md\:\C0PU1p67\,\posts_2022_2022-12-20-ext-style_index.md\:\VPXY4nCl\,\posts_2022_2022-2-28-spine_index.md\:\CjIecKaU\,\posts_2022_2022-12-20-ws_index.md\:\lmiUYIim\,\posts_2022_2022-3-18-plugins_index.md\:\BVc0FaPM\,\posts_2022_2022-4-21-unity-websocket_index.md\:\w37xXjEs\,\posts_2022_2022-4-24-unity-human-fall-flat_index.md\:\DUL3x4Sf\,\posts_2022_2022-4-24-puppeteer-pm2_index.md\:\BWdPkY52\,\posts_2022_2022-3-17-unity-ray_index.md\:\CAihyRJB\,\posts_2022_2022-4-21-puppeteer_index.md\:\DIkDWKAw\,\posts_2022_2022-5-5-log4js_index.md\:\bp8QJR9m\,\posts_2022_2023-01-31-eslint-save_index.md\:\CKzLJo1z\,\posts_2022_2022-5-3-flex-css_index.md\:\vIZR3rxI\,\posts_index.md\:\0wwc1nCB\,\timeline.md\:\BSMUx0q1\,\tag.md\:\DOpbzRpu\,\posts_2024_2024-03-15_index.md\:\M6YKxLoL\,\posts_2022_2023-02-12-changelog_index.md\:\1n8ztwNL\,\posts_2022_2023-02-03-electron-vite_index.md\:\DCvuzJcE\,\posts_2022_2023-01-12-native-message_index.md\:\BKDafslP\});window.__VP_SITE_DATA__JSON.parse({\lang\:\en-US\,\dir\:\ltr\,\title\:\ArtielyBlog\,\description\:\Just playing around.\,\base\:\/\,\head\:,\router\:{\prefetchLinks\:true},\appearance\:true,\themeConfig\:{\nav\:{\text\:\主页\,\link\:\/\,\activeMatch\:\^/$|^/index\},{\text\:\博客\,\link\:\/posts/index\,\activeMatch\:\/posts/\},{\text\:\归档\,\link\:\/timeline\,\activeMatch\:\/timeline\},{\text\:\标签\,\link\:\/tag\,\activeMatch\:\/tag\},{\text\:\关于\,\link\:\/about\,\activeMatch\:\/about\},{\text\:\留言\,\link\:\/comment\,\activeMatch\:\/comment\},{\text\:\github\,\link\:\https://github.com/artiely\},\posts\:{\text\:\ git 凭证切换\,\link\:\/posts/2024/2024-03-15/index\,\frontmatter\:{\tag\:\git\,\cover\:\/2022-05-11-09-21-21.png\,\tinyCover\:\/cover/2022-05-11-09-21-21.png\,\coverWidth\:474,\coverHeight\:1001,\coverPrimary\:\1A2635\,\coverSecondary\:\e5d9ca\,\dir\:\/posts/2024/2024-03-15\,\title\:\ git 凭证切换\,\summary\:\git 凭证切换多个github账号，有时候需要切换提交代码我们可以通过修改凭证的方式，来切换凭证。在macOS上，Git使用git-credential-osxkeychain来帮助用户安全地存储和访问Git仓库的认证信息，如用户名和密码或个人访问令牌。如果您需要修改或重新设置这些认证信息，可以按照以下步骤操作：查找存储的凭证首先，您可能想要查看当前存储的凭证。运行以下命令来查找与特定主机相关的...\,\description\:\git 凭证切换多个github账号，有时候需要切换提交代码我们可以通过修改凭证的方式，来切换凭证。在macOS上，Git使用git-credential-osxkeychain来帮助用户安全地存储和访问Git仓库的认证信息，如用户名和密码或个人访问令牌。如果您需要修改或重新设置这些认证信息，可以按照以下步骤操作：查找存储的凭证首先，您可能想要查看当前存储的凭证。运行以下命令来查找与特定主机相关的...\,\date\:\2024-03-15\,\author\:\tanjie-ola\,\words\:523,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-11-09-21-21.png\,\coverPathBase\:\/assets/2022-05-11-09-21-21\},{\text\:\ 自动更新 changelog\,\link\:\/posts/2022/2023-02-12-changelog/index\,\frontmatter\:{\cover\:\/2023-02-12-15-48-53.png\,\tag\:\changelog\,\dir\:\/posts/2022/2023-02-12-changelog\,\title\:\ 自动更新 changelog\,\summary\:\自动更新 changelog安装依赖\\\conventional-changelog-cli\\\: \\\^2.2.2\\\,\\\zx\\\: \\\^7.1.1\\\\\\prompts\\\: \\\^2.4.2\\\,创建 scripts\\\scripts\\\: { //... \\\build\\\: \\\npm run typecheck && electron-vite build\\\, \\\changelog\\\: \\\conv...\,\description\:\自动更新 changelog安装依赖\\\conventional-changelog-cli\\\: \\\^2.2.2\\\,\\\zx\\\: \\\^7.1.1\\\\\\prompts\\\: \\\^2.4.2\\\,创建 scripts\\\scripts\\\: { //... \\\build\\\: \\\npm run typecheck && electron-vite build\\\, \\\changelog\\\: \\\conv...\,\date\:\2023-02-12\,\author\:\tanjie-ola\,\words\:447,\readTime\:\3 min read\},\coverPath\:\/assets/2023-02-12-15-48-53.png\,\coverPathBase\:\/assets/2023-02-12-15-48-53\},{\text\:\ electron-vite 笔记\,\link\:\/posts/2022/2023-02-03-electron-vite/index\,\frontmatter\:{\cover\:\/2023-02-12-15-50-56.png\,\tag\:\electron\,\dir\:\/posts/2022/2023-02-03-electron-vite\,\title\:\ electron-vite 笔记\,\summary\:\electron-vite 笔记前后通讯// 主进程发mainWindow.webContents.send(dm-message-to-client, JSON.stringify(msg))// 渲染进程收window.electron.ipcRenderer.on(dm-message-to-client,(msg)>{ console.log(msg)})// 渲染进程发w...\,\description\:\electron-vite 笔记前后通讯// 主进程发mainWindow.webContents.send(dm-message-to-client, JSON.stringify(msg))// 渲染进程收window.electron.ipcRenderer.on(dm-message-to-client,(msg)>{ console.log(msg)})// 渲染进程发w...\,\date\:\2023-02-03\,\author\:\tanjie-ola\,\words\:1240,\readTime\:\7 min read\},\coverPath\:\/assets/2023-02-12-15-50-56.png\,\coverPathBase\:\/assets/2023-02-12-15-50-56\},{\text\:\ 项目保存时自动修复 eslint\,\link\:\/posts/2022/2023-01-31-eslint-save/index\,\frontmatter\:{\cover\:\/2023-02-12-15-52-11.png\,\tag\:\eslint\,\dir\:\/posts/2022/2023-01-31-eslint-save\,\title\:\ 项目保存时自动修复 eslint\,\summary\:\项目保存时自动修复 eslintvscode 安装 eslint.vscode/settings.json\\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: true, }如果有其他的 如 markdownlint \\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: t...\,\description\:\项目保存时自动修复 eslintvscode 安装 eslint.vscode/settings.json\\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: true, }如果有其他的 如 markdownlint \\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: t...\,\date\:\2023-01-31\,\author\:\tanjie-ola\,\words\:41,\readTime\:\1 min read\},\coverPath\:\/assets/2023-02-12-15-52-11.png\,\coverPathBase\:\/assets/2023-02-12-15-52-11\},{\text\:\ 浏览器插件与原生应用的通讯\,\link\:\/posts/2022/2023-01-12-native-message/index\,\frontmatter\:{\tag\:\chrome\,\cover\:\/2023-02-12-15-58-16.png\,\dir\:\/posts/2022/2023-01-12-native-message\,\title\:\ 浏览器插件与原生应用的通讯\,\summary\:\浏览器插件与原生应用的通讯参考示例chrome 插件文档关于nativeMessaging与注册表chromemdn这里主要以mac/win系统chrome为主原生应用的manifest{ \\\name\\\: \\\com.my_company.my_application\\\, \\\description\\\: \\\My Application\\\, \\\path\\\: \\\C:\\\\\\\\Program Files\\\\\\\\...\,\description\:\浏览器插件与原生应用的通讯参考示例chrome 插件文档关于nativeMessaging与注册表chromemdn这里主要以mac/win系统chrome为主原生应用的manifest{ \\\name\\\: \\\com.my_company.my_application\\\, \\\description\\\: \\\My Application\\\, \\\path\\\: \\\C:\\\\\\\\Program Files\\\\\\\\...\,\date\:\2023-01-12\,\author\:\tanjie-ola\,\words\:1364,\readTime\:\7 min read\},\coverPath\:\/assets/2023-02-12-15-58-16.png\,\coverPathBase\:\/assets/2023-02-12-15-58-16\},{\text\:\ 写一个插件获取元素的样式\,\link\:\/posts/2022/2022-12-20-ext-style/index\,\frontmatter\:{\tag\:\css\,\chrome\,\cover\:\/2022-12-22-17-17-45.png\,\coverPrimary\:\182828\,\coverSecondary\:\e7d7d7\,\dir\:\/posts/2022/2022-12-20-ext-style\,\title\:\ 写一个插件获取元素的样式\,\summary\:\写一个插件获取元素的样式其背景是可以获取好看网站的样式可直接复制对css scan类似插件原理探索price看看，卖的挺贵的，买不起又无法不白嫖，只好自己动手了第一版的对比效果diff百度输入框的效果baidu主要apigetComputedStyle,getPropertyValuevar style window.getComputedStyle(document.querySelecto...\,\description\:\写一个插件获取元素的样式其背景是可以获取好看网站的样式可直接复制对css scan类似插件原理探索price看看，卖的挺贵的，买不起又无法不白嫖，只好自己动手了第一版的对比效果diff百度输入框的效果baidu主要apigetComputedStyle,getPropertyValuevar style window.getComputedStyle(document.querySelecto...\,\date\:\2022-12-20\,\author\:\tanjie-ola\,\words\:2307,\readTime\:\12 min read\},\coverPath\:\/assets/2022-12-22-17-17-45.png\,\coverPathBase\:\/assets/2022-12-22-17-17-45\},{\text\:\ websocket 逆向(各直播平台弹幕获取)\,\link\:\/posts/2022/2022-12-20-ws/index\,\frontmatter\:{\cover\:\/2022-12-20-19-22-05.png\,\tag\:\websocket\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-12-20-ws\,\title\:\ websocket 逆向(各直播平台弹幕获取)\,\summary\:\websocket 逆向(各直播平台弹幕获取)声明：本内容仅供学习参考，本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害 不承担责任。 如有侵权，请联系我进行删除。什么是 websocketWebSocket 是一种网络通信协议，它允许客户端（通常是浏览器）和服务器之间进行全双工通信。这意味着服务器可以主动发送信息给客户端，而不是像传统的网络协议（例如 H...\,\description\:\websocket 逆向(各直播平台弹幕获取)声明：本内容仅供学习参考，本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害 不承担责任。 如有侵权，请联系我进行删除。什么是 websocketWebSocket 是一种网络通信协议，它允许客户端（通常是浏览器）和服务器之间进行全双工通信。这意味着服务器可以主动发送信息给客户端，而不是像传统的网络协议（例如 H...\,\date\:\2022-12-20\,\author\:\tanjie-ola\,\words\:2232,\readTime\:\12 min read\},\coverPath\:\/assets/2022-12-20-19-22-05.png\,\coverPathBase\:\/assets/2022-12-20-19-22-05\},{\text\:\chrome 插件 监听websocket\,\link\:\/posts/2022/2022-12-08-chrome-ext-ws/index\,\frontmatter\:{\title\:\chrome 插件 监听websocket\,\cover\:\/2022-12-19-09-44-31.png\,\tag\:\chrome\,\coverPrimary\:\684858\,\coverSecondary\:\97b7a7\,\dir\:\/posts/2022/2022-12-08-chrome-ext-ws\,\summary\:\chrome 插件 监听websocket安装模板npx degit antfu/vitesse-webext my-webextcd my-webextyarnyarn dev修改配置并添加页面在src下新建文件夹inspector包含index.html inspector包含main.tsimport { createApp } from vueimport App from ./I...\,\description\:\chrome 插件 监听websocket安装模板npx degit antfu/vitesse-webext my-webextcd my-webextyarnyarn dev修改配置并添加页面在src下新建文件夹inspector包含index.html inspector包含main.tsimport { createApp } from vueimport App from ./I...\,\date\:\2022-12-08\,\author\:\tanjie-ola\,\words\:783,\readTime\:\4 min read\},\coverPath\:\/assets/2022-12-19-09-44-31.png\,\coverPathBase\:\/assets/2022-12-19-09-44-31\},{\text\:\openAI chatGPT 试玩\,\link\:\/posts/2022/2022-12-07-open-ai/index\,\frontmatter\:{\tag\:\ai\,\cover\:\/2022-12-07-14-01-57.png\,\coverPrimary\:\281848\,\coverSecondary\:\d7e7b7\,\title\:\openAI chatGPT 试玩\,\dir\:\/posts/2022/2022-12-07-open-ai\,\summary\:\openAI chatGPT 试玩前提可以访问google注册地址一个国外手机号虚拟手机号申请1 看运气，本人没成功虚拟手机号申请2 美国的直接一次成功，比较贵2种方式都是有效期内没收到验证码可以退费用的虚拟手机号申请1便宜 失败率大流程： 注册-> 充值-> 选择服务-> 激活-> 复制手机号发送验证码->等待验证码1虚拟手机号申请2贵 成功率高流程：注册-> 购买卡密-> 复制卡密-> 获...\,\description\:\openAI chatGPT 试玩前提可以访问google注册地址一个国外手机号虚拟手机号申请1 看运气，本人没成功虚拟手机号申请2 美国的直接一次成功，比较贵2种方式都是有效期内没收到验证码可以退费用的虚拟手机号申请1便宜 失败率大流程： 注册-> 充值-> 选择服务-> 激活-> 复制手机号发送验证码->等待验证码1虚拟手机号申请2贵 成功率高流程：注册-> 购买卡密-> 复制卡密-> 获...\,\date\:\2022-12-07\,\author\:\tanjie-ola\,\words\:228,\readTime\:\2 min read\},\coverPath\:\/assets/2022-12-07-14-01-57.png\,\coverPathBase\:\/assets/2022-12-07-14-01-57\},{\text\:\ 几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA\,\link\:\/posts/2022/2022-12-02-image-animated/index\,\frontmatter\:{\tag\:\webp\,\loffie\,\svga\,\cover\:\/2022-12-02-18-54-35.png\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-12-02-image-animated\,\title\:\ 几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA\,\summary\:\几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA下面来介绍【直接落地输出可见动画】的几种格式：GIF视频APNG/WEBPLOTTIE/SVGA总结对比GIFGIF全称Graphics Interchange Format，图像互换格式，采用8位压缩，最多只能处理256种颜色，不宜应用于真彩色图片。GIF体积大，颗粒感，有锯齿，尤其透明效果动画慎用。GIF导出1、视频+P...\,\description\:\几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA下面来介绍【直接落地输出可见动画】的几种格式：GIF视频APNG/WEBPLOTTIE/SVGA总结对比GIFGIF全称Graphics Interchange Format，图像互换格式，采用8位压缩，最多只能处理256种颜色，不宜应用于真彩色图片。GIF体积大，颗粒感，有锯齿，尤其透明效果动画慎用。GIF导出1、视频+P...\,\date\:\2022-12-02\,\author\:\tanjie-ola\,\words\:1019,\readTime\:\6 min read\},\coverPath\:\/assets/2022-12-02-18-54-35.png\,\coverPathBase\:\/assets/2022-12-02-18-54-35\},{\text\:\ c# 安装playwright\,\link\:\/posts/2022/2022-11-28-csharp-playwright/index\,\frontmatter\:{\tag\:\playwright\,\cover\:\/2022-11-28-09-57-48.png\,\coverPrimary\:\384848\,\coverSecondary\:\c7b7b7\,\dir\:\/posts/2022/2022-11-28-csharp-playwright\,\title\:\ c# 安装playwright\,\summary\:\c# 安装playwrightrider新建解决方案安装playwright安装失败运行脚本提示浏览器未安装按照提示安装先安装 powershell-> brew install --cask powershell然后执行 pwsh bin/Debug/netX/playwright.ps1 install:::tipnetX 为对应的版本如下图:::打开你的工程目录...\,\description\:\c# 安装playwrightrider新建解决方案安装playwright安装失败运行脚本提示浏览器未安装按照提示安装先安装 powershell-> brew install --cask powershell然后执行 pwsh bin/Debug/netX/playwright.ps1 install:::tipnetX 为对应的版本如下图:::打开你的工程目录...\,\date\:\2022-11-28\,\author\:\tanjie-ola\,\words\:79,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-28-09-57-48.png\,\coverPathBase\:\/assets/2022-11-28-09-57-48\},{\text\:\protobuf 简单使用\,\link\:\/posts/2022/2022-11-26-protobuf/index\,\frontmatter\:{\title\:\protobuf 简单使用\,\tag\:\protobuf\,\cover\:\/2022-11-26-11-51-30.png\,\coverPrimary\:\181818\,\coverSecondary\:\e7e7e7\,\dir\:\/posts/2022/2022-11-26-protobuf\,\summary\:\编写proto文件新建message.proto文件示例syntax \\\proto3\\\;message PushFrame{ int64 seqid 1; int64 logid 2; int64 service 3; int64 method 4; repeated PushHeader headersList 5; string payloadEncodin...\,\description\:\编写proto文件新建message.proto文件示例syntax \\\proto3\\\;message PushFrame{ int64 seqid 1; int64 logid 2; int64 service 3; int64 method 4; repeated PushHeader headersList 5; string payloadEncodin...\,\date\:\2022-11-26\,\author\:\tanjie-ola\,\words\:211,\readTime\:\2 min read\},\coverPath\:\/assets/2022-11-26-11-51-30.png\,\coverPathBase\:\/assets/2022-11-26-11-51-30\},{\text\:\puppeteer 监听websocket\,\link\:\/posts/2022/2022-11-26-puppeteer-ws/index\,\frontmatter\:{\title\:\puppeteer 监听websocket\,\tag\:\puppeteer\,\cover\:\/2022-11-26-11-49-21.png\,\coverPrimary\:\281828\,\coverSecondary\:\d7e7d7\,\dir\:\/posts/2022/2022-11-26-puppeteer-ws\,\summary\:\代码示例// 打开浏览器，打开新页面const puppeteer require(\\\puppeteer\\\);const protobuf require(\\\protobufjs\\\);const pako require(\\\pako\\\);var root protobuf.Root.fromJSON(require(\\\./message.json\\\));(async () > {...\,\description\:\代码示例// 打开浏览器，打开新页面const puppeteer require(\\\puppeteer\\\);const protobuf require(\\\protobufjs\\\);const pako require(\\\pako\\\);var root protobuf.Root.fromJSON(require(\\\./message.json\\\));(async () > {...\,\date\:\2022-11-26\,\author\:\tanjie-ola\,\words\:204,\readTime\:\2 min read\},\coverPath\:\/assets/2022-11-26-11-49-21.png\,\coverPathBase\:\/assets/2022-11-26-11-49-21\},{\text\:\一招鲜破解所有直播弹幕\,\link\:\/posts/2022/2022-11-18-douyin-danmu/index\,\frontmatter\:{\title\:\一招鲜破解所有直播弹幕\,\cover\:\/2022-11-18-11-28-33.png\,\tag\:\javascript\,\websocket\,\coverPrimary\:\f8b898\,\coverSecondary\:\074767\,\dir\:\/posts/2022/2022-11-18-douyin-danmu\,\summary\:\通过dom断点确定消息触发的函数先已抖音为例先随便进入一个直播间直播间F12打开控制台element标签找到弹幕滚动元素的容器添加如下断点dom断点选择子节点更新作为断点进入断点后进入 展开源码 找到call stack 拉到最下面，一般越下面越接近业务成的逻辑call stack展开源码 我们最终到调用的位置 如图已经可以看到明文的弹幕信息了明文我们可以看到n.queue是一个消息数组，没一秒消...\,\description\:\通过dom断点确定消息触发的函数先已抖音为例先随便进入一个直播间直播间F12打开控制台element标签找到弹幕滚动元素的容器添加如下断点dom断点选择子节点更新作为断点进入断点后进入 展开源码 找到call stack 拉到最下面，一般越下面越接近业务成的逻辑call stack展开源码 我们最终到调用的位置 如图已经可以看到明文的弹幕信息了明文我们可以看到n.queue是一个消息数组，没一秒消...\,\date\:\2022-11-18\,\author\:\tanjie-ola\,\words\:289,\readTime\:\2 min read\},\coverPath\:\/assets/2022-11-18-11-28-33.png\,\coverPathBase\:\/assets/2022-11-18-11-28-33\},{\text\:\slack 添加通知机器人\,\link\:\/posts/2022/2022-11-18-slack-hook/index\,\frontmatter\:{\title\:\slack 添加通知机器人\,\tag\:\slack\,\cover\:\/2022-11-18-11-27-00.png\,\coverPrimary\:\080818\,\coverSecondary\:\f7f7e7\,\dir\:\/posts/2022/2022-11-18-slack-hook\,\summary\:\添加webhook添加到个人进行测试编辑消息格式https://app.slack.com/block-kit-builder自定义基本信息发送通知// 通知到slackawait axios.post(https://hooks.slack.com/services/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,{ \\\blocks\\\: ...\,\description\:\添加webhook添加到个人进行测试编辑消息格式https://app.slack.com/block-kit-builder自定义基本信息发送通知// 通知到slackawait axios.post(https://hooks.slack.com/services/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,{ \\\blocks\\\: ...\,\date\:\2022-11-18\,\author\:\tanjie-ola\,\words\:105,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-18-11-27-00.png\,\coverPathBase\:\/assets/2022-11-18-11-27-00\},{\text\:\react/vue组件构建web components\,\link\:\/posts/2022/2022-11-18-vue-wc/index\,\frontmatter\:{\title\:\react/vue组件构建web components\,\cover\:\/2022-11-18-17-48-26.png\,\tag\:\vue\,\react\,\web components\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-11-18-vue-wc\,\summary\:\vite 起一个vue3项目yarn create vite创建组件helloWorld.ce.vue hello world export default { }.hello{ color:red;}vite 配置import { defineConfig } from \\\vite\\\;import vue from \\\@vitejs/plugin-vue\\\;// https://vi...\,\description\:\vite 起一个vue3项目yarn create vite创建组件helloWorld.ce.vue hello world export default { }.hello{ color:red;}vite 配置import { defineConfig } from \\\vite\\\;import vue from \\\@vitejs/plugin-vue\\\;// https://vi...\,\date\:\2022-11-18\,\author\:\tanjie-ola\,\words\:156,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-18-17-48-26.png\,\coverPathBase\:\/assets/2022-11-18-17-48-26\},{\text\:\github actions\,\link\:\/posts/2022/2022-11-17-github-actions/index\,\frontmatter\:{\cover\:\/2022-11-17-19-05-20.png\,\title\:\github actions\,\tag\:\github\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-11-17-github-actions\,\summary\:\官网文档Github Action基本概念workflow: 一个 workflow 就是一个完整的工作流过程，每个workflow 包含一组 jobs任务。job : jobs任务包含一个或多个job ，每个 job包含一系列的 steps 步骤。step : 每个 step 步骤可以执行指令或者使用一个 action 动作。action : 每个 action 动作就是一个通用的基本单元。Gi...\,\description\:\官网文档Github Action基本概念workflow: 一个 workflow 就是一个完整的工作流过程，每个workflow 包含一组 jobs任务。job : jobs任务包含一个或多个job ，每个 job包含一系列的 steps 步骤。step : 每个 step 步骤可以执行指令或者使用一个 action 动作。action : 每个 action 动作就是一个通用的基本单元。Gi...\,\date\:\2022-11-17\,\author\:\tanjie-ola\,\words\:1505,\readTime\:\8 min read\},\coverPath\:\/assets/2022-11-17-19-05-20.png\,\coverPathBase\:\/assets/2022-11-17-19-05-20\},{\text\:\Unity 如何通过代码修改材质\,\link\:\/posts/2022/2022-11-16-unity-materials/index\,\frontmatter\:{\title\:\Unity 如何通过代码修改材质\,\cover\:\/2022-11-17-18-15-01.png\,\tag\:\Unity\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-11-16-unity-materials\,\summary\:\// 通过resources目录加载题图var textureResource.Load(\\\map\\\)clone.GetComponent().material.SetTexture(\\\_MainTex\\\,texture);// 通过网络获取图片材质IEnumerator LoadFace(Dmu dm, Action callback) { //请求WWW W...\,\description\:\// 通过resources目录加载题图var textureResource.Load(\\\map\\\)clone.GetComponent().material.SetTexture(\\\_MainTex\\\,texture);// 通过网络获取图片材质IEnumerator LoadFace(Dmu dm, Action callback) { //请求WWW W...\,\date\:\2022-11-16\,\author\:\tanjie-ola\,\words\:150,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-17-18-15-01.png\,\coverPathBase\:\/assets/2022-11-17-18-15-01\},{\text\:\机器学习 让AI踢足球\,\link\:\/posts/2022/2022-11-14-py-env/index\,\frontmatter\:{\title\:\机器学习 让AI踢足球\,\cover\:\/2022-11-17-18-07-29.png\,\tag\:\unity\,\python\,\ai\,\coverPrimary\:\081828\,\coverSecondary\:\f7e7d7\,\dir\:\/posts/2022/2022-11-14-py-env\,\summary\:\机器学习 让AI踢足球安装ml-agents官方文档简要步骤git clone --branch release_19 https://github.com/Unity-Technologies/ml-agents.git导航到菜单Window-> Package Manager-> 在包管理器窗口中单击+包列表左上角的按钮 -> 选择Add package from disk...-> 导航到c...\,\description\:\机器学习 让AI踢足球安装ml-agents官方文档简要步骤git clone --branch release_19 https://github.com/Unity-Technologies/ml-agents.git导航到菜单Window-> Package Manager-> 在包管理器窗口中单击+包列表左上角的按钮 -> 选择Add package from disk...-> 导航到c...\,\date\:\2022-11-14\,\author\:\tanjie-ola\,\words\:193,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-17-18-07-29.png\,\coverPathBase\:\/assets/2022-11-17-18-07-29\},{\text\:\ 实现互殴模拟互动\,\link\:\/posts/2022/2022-07-05-unity/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-07-07-19-22-27.png\,\tinyCover\:\/cover/2022-07-07-19-22-27.jpg\,\coverWidth\:736,\coverHeight\:1592,\coverPrimary\:\aaa39e\,\coverSecondary\:\555c61\,\dir\:\/posts/2022/2022-07-05-unity\,\title\:\ 实现互殴模拟互动\,\summary\:\实现互殴模拟互动插件 PuppetMaster 1.1.unitypackage链接: 提取码: bgkd 复制这段内容后打开百度网盘手机App，操作更方便哦模型 human-fall-flat-models.unitypackage链接: 提取码: a6tn 复制这段内容后打开百度网盘手机App，操作更方便哦动画库1链接: https://pan.baidu.com/s/1mW3_S_YY...\,\description\:\实现互殴模拟互动插件 PuppetMaster 1.1.unitypackage链接: 提取码: bgkd 复制这段内容后打开百度网盘手机App，操作更方便哦模型 human-fall-flat-models.unitypackage链接: 提取码: a6tn 复制这段内容后打开百度网盘手机App，操作更方便哦动画库1链接: https://pan.baidu.com/s/1mW3_S_YY...\,\date\:\2022-07-05\,\author\:\tanjie-ola\,\words\:108,\readTime\:\1 min read\},\coverPath\:\/assets/2022-07-07-19-22-27.png\,\coverPathBase\:\/assets/2022-07-07-19-22-27\},{\text\:\ mongodb 5.0\,\link\:\/posts/2022/2022-07-01-mongo/index\,\frontmatter\:{\tag\:\mongodb\,\cover\:\/2022-07-01-17-28-32.png\,\tinyCover\:\/cover/2022-07-01-17-28-32.jpg\,\coverWidth\:564,\coverHeight\:1253,\coverPrimary\:\19546f\,\coverSecondary\:\e6ab90\,\dir\:\/posts/2022/2022-07-01-mongo\,\title\:\ mongodb 5.0\,\summary\:\mongodb 5.0安装linux查看系统类型lsb_release -abanban-1@bigdata:~$ lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubuntu 18.04.5 LTSRelease: 18.04Codename: bionic...\,\description\:\mongodb 5.0安装linux查看系统类型lsb_release -abanban-1@bigdata:~$ lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubuntu 18.04.5 LTSRelease: 18.04Codename: bionic...\,\date\:\2022-07-01\,\author\:\tanjie-ola\,\words\:55,\readTime\:\1 min read\},\coverPath\:\/assets/2022-07-01-17-28-32.png\,\coverPathBase\:\/assets/2022-07-01-17-28-32\},{\text\:\ Bilibili 饭贩创作者中心\,\link\:\/posts/2022/2022-06-29-unity-bilibili/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-29-17-34-12.png\,\tinyCover\:\/cover/2022-06-29-17-34-12.jpg\,\coverWidth\:563,\coverHeight\:973,\coverPrimary\:\060b10\,\coverSecondary\:\f9f4ef\,\dir\:\/posts/2022/2022-06-29-unity-bilibili\,\title\:\ Bilibili 饭贩创作者中心\,\summary\:\Bilibili 饭贩创作者中心一般b站抓取弹幕要么自己写爬虫要么用一些野生的api。搞不好还会封ip。利用官方的api或sdk可以直接获取弹幕并包含头像。unitySDKaccessKeySecret/accessKeyId是注册开发者时邮件发送给你的appId 是创建项目事的项目id，获取如下code 是身份码直播中心 ▶ 我的直播间 ▶ 开始直播 ▶ 身份码。目前还没有进房消息类型目前不是很...\,\description\:\Bilibili 饭贩创作者中心一般b站抓取弹幕要么自己写爬虫要么用一些野生的api。搞不好还会封ip。利用官方的api或sdk可以直接获取弹幕并包含头像。unitySDKaccessKeySecret/accessKeyId是注册开发者时邮件发送给你的appId 是创建项目事的项目id，获取如下code 是身份码直播中心 ▶ 我的直播间 ▶ 开始直播 ▶ 身份码。目前还没有进房消息类型目前不是很...\,\date\:\2022-06-29\,\author\:\tanjie-ola\,\words\:153,\readTime\:\1 min read\},\coverPath\:\/assets/2022-06-29-17-34-12.png\,\coverPathBase\:\/assets/2022-06-29-17-34-12\},{\text\:\ Unity 实现透明背景桌面\,\link\:\/posts/2022/2022-06-29-unity-transparent/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-29-15-32-21.png\,\tinyCover\:\/cover/2022-06-29-15-32-21.jpg\,\coverWidth\:474,\coverHeight\:948,\coverPrimary\:\cead9a\,\coverSecondary\:\315265\,\dir\:\/posts/2022/2022-06-29-unity-transparent\,\title\:\ Unity 实现透明背景桌面\,\summary\:\Unity 实现透明背景桌面以下代码实测于 unity2020.3 / Windows 10 系统步骤：将以下脚本命名为TransparentWindow添加到Camera效果不带操作栏，鼠标点击不可穿透第一using System;using System.Runtime.InteropServices;using UnityEngine;public class TransparentWind...\,\description\:\Unity 实现透明背景桌面以下代码实测于 unity2020.3 / Windows 10 系统步骤：将以下脚本命名为TransparentWindow添加到Camera效果不带操作栏，鼠标点击不可穿透第一using System;using System.Runtime.InteropServices;using UnityEngine;public class TransparentWind...\,\date\:\2022-06-29\,\author\:\tanjie-ola\,\words\:1072,\readTime\:\6 min read\},\coverPath\:\/assets/2022-06-29-15-32-21.png\,\coverPathBase\:\/assets/2022-06-29-15-32-21\},{\text\:\ 如何将相册导入到mac移动硬盘\,\link\:\/posts/2022/2022-06-22-mac-photo/index\,\frontmatter\:{\tag\:\mac\,\cover\:\/2022-06-22-10-37-02.png\,\tinyCover\:\/cover/2022-06-22-10-37-02.jpg\,\coverWidth\:444,\coverHeight\:794,\coverPrimary\:\cac2e8\,\coverSecondary\:\353d17\,\dir\:\/posts/2022/2022-06-22-mac-photo\,\title\:\ 如何将相册导入到mac移动硬盘\,\summary\:\如何将相册导入到mac移动硬盘不需要itunse,不需要照片.app,不需要iMazing，不需要iCloud ,不需要隔空投放只需要系统自带的图像捕捉软件“最好的状态是一点点向喜欢的东西靠近.”“少发脾气按时睡觉不要乱想还有多笑笑.”\\\The best state is to get closer to what you like.\\\\\\Dont lose your temper, go to ...\,\description\:\如何将相册导入到mac移动硬盘不需要itunse,不需要照片.app,不需要iMazing，不需要iCloud ,不需要隔空投放只需要系统自带的图像捕捉软件“最好的状态是一点点向喜欢的东西靠近.”“少发脾气按时睡觉不要乱想还有多笑笑.”\\\The best state is to get closer to what you like.\\\\\\Dont lose your temper, go to ...\,\date\:\2022-06-22\,\author\:\tanjie-ola\,\words\:120,\readTime\:\1 min read\},\coverPath\:\/assets/2022-06-22-10-37-02.png\,\coverPathBase\:\/assets/2022-06-22-10-37-02\},{\text\:\ 动态导航实现互动挤地铁\,\link\:\/posts/2022/2022-06-20-nav-mesh/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-20-18-54-31.png\,\tinyCover\:\/cover/2022-06-20-18-54-31.png\,\coverWidth\:980,\coverHeight\:1502,\coverPrimary\:\4d4654\,\coverSecondary\:\b2b9ab\,\dir\:\/posts/2022/2022-06-20-nav-mesh\,\title\:\ 动态导航实现互动挤地铁\,\summary\:\动态导航实现互动挤地铁下载组件地址这里因为地铁是一个移动的物体，人物要从站台上移动到地铁上，可以使用导航，但是地铁动起来后，需要动态烘焙。新建一个空物体，将需要烘焙的物体作为它的子物体烘焙public NavMeshSurface navMeshSurface;//...navMeshSurface.BuildNavMesh();在动画中添加事件函数，在地铁进站后重新烘焙，然后给每个角色重新指定地...\,\description\:\动态导航实现互动挤地铁下载组件地址这里因为地铁是一个移动的物体，人物要从站台上移动到地铁上，可以使用导航，但是地铁动起来后，需要动态烘焙。新建一个空物体，将需要烘焙的物体作为它的子物体烘焙public NavMeshSurface navMeshSurface;//...navMeshSurface.BuildNavMesh();在动画中添加事件函数，在地铁进站后重新烘焙，然后给每个角色重新指定地...\,\date\:\2022-06-20\,\author\:\tanjie-ola\,\words\:182,\readTime\:\1 min read\},\coverPath\:\/assets/2022-06-20-18-54-31.png\,\coverPathBase\:\/assets/2022-06-20-18-54-31\},{\text\:\ ProBuilder快速原型开发技术 ---不规则模型与材质\,\link\:\/posts/2022/2022-06-17-probuilder/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-20-18-53-24.png\,\tinyCover\:\/cover/2022-06-20-18-53-24.png\,\coverWidth\:564,\coverHeight\:1030,\coverPrimary\:\efcd30\,\coverSecondary\:\1032cf\,\dir\:\/posts/2022/2022-06-17-probuilder\,\title\:\ ProBuilder快速原型开发技术 ---不规则模型与材质\,\summary\:\ProBuilder快速原型开发技术 ---不规则模型与材质ProBuilder开发模型的强大之处，还在于可以按照要求精确定制不规则模型、克隆镜像模型、给模型着色以及添加材质等，下面笔者就这几方面进行讲解。一：定制不规则模型PB有一个专门定制不规则模型的功能“New Poly Shape”，可以按照设计师的想法，定义任意图案的模型，或者更加确切的说是“画出”我们想要的模型，制作步骤如下：第1步：为...\,\description\:\ProBuilder快速原型开发技术 ---不规则模型与材质ProBuilder开发模型的强大之处，还在于可以按照要求精确定制不规则模型、克隆镜像模型、给模型着色以及添加材质等，下面笔者就这几方面进行讲解。一：定制不规则模型PB有一个专门定制不规则模型的功能“New Poly Shape”，可以按照设计师的想法，定义任意图案的模型，或者更加确切的说是“画出”我们想要的模型，制作步骤如下：第1步：为...\,\date\:\2022-06-17\,\author\:\tanjie-ola\,\words\:970,\readTime\:\5 min read\},\coverPath\:\/assets/2022-06-20-18-53-24.png\,\coverPathBase\:\/assets/2022-06-20-18-53-24\},{\text\:\ Unity Transform的一些发现\,\link\:\/posts/2022/2022-06-02-unity-transform/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-02-15-47-20.png\,\tinyCover\:\/cover/2022-06-02-15-47-20.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\7b0d0d\,\coverSecondary\:\84f2f2\,\dir\:\/posts/2022/2022-06-02-unity-transform\,\title\:\ Unity Transform的一些发现\,\summary\:\Unity Transform的一些发现本人作为业余的unity玩家对 Unity Transform的 一些发现void update(){ transform.Rotate(TurnX * Time.deltaTime,TurnY * Time.deltaTime,TurnZ * Time.deltaTime, Space.World); transform.Translate(Mov...\,\description\:\Unity Transform的一些发现本人作为业余的unity玩家对 Unity Transform的 一些发现void update(){ transform.Rotate(TurnX * Time.deltaTime,TurnY * Time.deltaTime,TurnZ * Time.deltaTime, Space.World); transform.Translate(Mov...\,\date\:\2022-06-02\,\author\:\tanjie-ola\,\words\:385,\readTime\:\2 min read\},\coverPath\:\/assets/2022-06-02-15-47-20.png\,\coverPathBase\:\/assets/2022-06-02-15-47-20\},{\text\:\ 导航搞丢了\,\link\:\/posts/2022/2022-05-27-agent/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-27-17-28-58.png\,\tinyCover\:\/cover/2022-05-27-17-28-58.png\,\coverWidth\:564,\coverHeight\:845,\coverPrimary\:\2d1419\,\coverSecondary\:\d2ebe6\,\dir\:\/posts/2022/2022-05-27-agent\,\title\:\ 导航搞丢了\,\summary\:\导航搞丢了近日做了一个小人儿互殴的游戏，角色取自于人类一败涂地，角色甚是可爱，魔性。用于火热的直播平台上直播，bilibili抑或抖音，深受观众老爷们的喜爱。无不夸赞称奇。纷纷加入粉丝团，或豪掷礼物，每每开播，都会来增添一份热度。也会有粉丝提及些许改进已经，本人也有着改之，虽然从不缺乏想象的力度，但是亏在技能的不足，无法达到预期的效果。也只能加紧学习，继续努力。今天打算在之前的擂台上新增一个平台。...\,\description\:\导航搞丢了近日做了一个小人儿互殴的游戏，角色取自于人类一败涂地，角色甚是可爱，魔性。用于火热的直播平台上直播，bilibili抑或抖音，深受观众老爷们的喜爱。无不夸赞称奇。纷纷加入粉丝团，或豪掷礼物，每每开播，都会来增添一份热度。也会有粉丝提及些许改进已经，本人也有着改之，虽然从不缺乏想象的力度，但是亏在技能的不足，无法达到预期的效果。也只能加紧学习，继续努力。今天打算在之前的擂台上新增一个平台。...\,\date\:\2022-05-27\,\author\:\tanjie-ola\,\words\:451,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-27-17-28-58.png\,\coverPathBase\:\/assets/2022-05-27-17-28-58\},{\text\:\ markdown 美化之 markdown-it-container 配置\,\link\:\/posts/2022/2022-05-17-markdown-it/index\,\frontmatter\:{\cover\:\/2022-05-17-14-09-00.png\,\tinyCover\:\/cover/2022-05-17-14-09-00.png\,\coverWidth\:736,\coverHeight\:883,\coverPrimary\:\1a0506\,\coverSecondary\:\e5faf9\,\tag\:\markdown\,\dir\:\/posts/2022/2022-05-17-markdown-it\,\title\:\ markdown 美化之 markdown-it-container 配置\,\summary\:\markdown 美化之 markdown-it-container 配置import MarkdownItContainer from markdown-it-containerconst tipIcon const warningIcon const dangerIcon const containerPluginOptions () > { return ...\,\description\:\markdown 美化之 markdown-it-container 配置import MarkdownItContainer from markdown-it-containerconst tipIcon const warningIcon const dangerIcon const containerPluginOptions () > { return ...\,\date\:\2022-05-17\,\author\:\tanjie-ola\,\words\:535,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-17-14-09-00.png\,\coverPathBase\:\/assets/2022-05-17-14-09-00\},{\text\:\ 美化你的滚动条\,\link\:\/posts/2022/2022-05-16-scroll/index\,\frontmatter\:{\tag\:\vue\,\js\,\vueuse\,\typescript\,\cover\:\/2022-05-16-18-47-31.png\,\tinyCover\:\/cover/2022-05-16-18-47-31.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\c2a88f\,\coverSecondary\:\3d5770\,\dir\:\/posts/2022/2022-05-16-scroll\,\title\:\ 美化你的滚动条\,\summary\:\美化你的滚动条实现步骤首先是样式的修改滚动开始和结束的监听动画的实现效果如下##############################################################################################首先是样式的修改/* 设置滚动条整体部分的样式 */::-webkit-scrollbar { width: 0px; height...\,\description\:\美化你的滚动条实现步骤首先是样式的修改滚动开始和结束的监听动画的实现效果如下##############################################################################################首先是样式的修改/* 设置滚动条整体部分的样式 */::-webkit-scrollbar { width: 0px; height...\,\date\:\2022-05-16\,\author\:\tanjie-ola\,\words\:393,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-16-18-47-31.png\,\coverPathBase\:\/assets/2022-05-16-18-47-31\},{\text\:\ puppet-master道具篇\,\link\:\/posts/2022/2022-05-11-puppet-master-props/index\,\frontmatter\:{\tag\:\puppet-master\,\unity\,\cover\:\/2022-05-11-14-06-50.png\,\tinyCover\:\/cover/2022-05-11-14-06-50.png\,\coverWidth\:399,\coverHeight\:600,\coverPrimary\:\4b4d4c\,\coverSecondary\:\b4b2b3\,\dir\:\/posts/2022/2022-05-11-puppet-master-props\,\title\:\ puppet-master道具篇\,\summary\:\puppet-master道具篇先准备一批道具模型链接: 提取码: 184i场景中新建空对象命名Prop->新建子对象命名Mesh Root将道具预制体Ham拖入Prop/及Prop/Mesh Root将Prop/Mesh Root下的Ham只保留Mesh组件如下将Prop下的Ham只保留Collider组件如下在Prop上添加如下组件Rigidbody默认值Collider这里我选择的Mesh...\,\description\:\puppet-master道具篇先准备一批道具模型链接: 提取码: 184i场景中新建空对象命名Prop->新建子对象命名Mesh Root将道具预制体Ham拖入Prop/及Prop/Mesh Root将Prop/Mesh Root下的Ham只保留Mesh组件如下将Prop下的Ham只保留Collider组件如下在Prop上添加如下组件Rigidbody默认值Collider这里我选择的Mesh...\,\date\:\2022-05-11\,\author\:\tanjie-ola\,\words\:412,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-11-14-06-50.png\,\coverPathBase\:\/assets/2022-05-11-14-06-50\},{\text\:\ 给你的网站添加 Algolia 搜索\,\link\:\/posts/2022/2022-05-09-Algolia/index\,\frontmatter\:{\tag\:\Algolia\,\Search\,\Node.js\,\Vue.js\,\Shell\,\Docker\,\Typescript\,\Scss\,\cover\:\/2022-05-10-14-26-40.png\,\tinyCover\:\/cover/2022-05-10-14-26-40.png\,\coverWidth\:563,\coverHeight\:762,\coverPrimary\:\ED8961\,\coverSecondary\:\12769e\,\dir\:\/posts/2022/2022-05-09-Algolia\,\title\:\ 给你的网站添加 Algolia 搜索\,\summary\:\给你的网站添加 Algolia 搜索官网面向开发者官网实现一个组件基于vue3import @docsearch/cssimport docsearch from @docsearch/jsimport { getCurrentInstance, onMounted, watch } from vueimport type { DocSearchHit } from @docsear...\,\description\:\给你的网站添加 Algolia 搜索官网面向开发者官网实现一个组件基于vue3import @docsearch/cssimport docsearch from @docsearch/jsimport { getCurrentInstance, onMounted, watch } from vueimport type { DocSearchHit } from @docsear...\,\date\:\2022-05-09\,\author\:\tanjie-ola\,\words\:873,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-10-14-26-40.png\,\coverPathBase\:\/assets/2022-05-10-14-26-40\},{\text\:\ log4js简单使用\,\link\:\/posts/2022/2022-5-5-log4js/index\,\frontmatter\:{\tag\:\log4js\,\nodejs\,\express\,\webSocket\,\cover\:\/2022-05-10-18-10-42.png\,\tinyCover\:\/cover/2022-05-10-18-10-42.png\,\coverWidth\:564,\coverHeight\:877,\coverPrimary\:\030104\,\coverSecondary\:\fcfefb\,\dir\:\/posts/2022/2022-5-5-log4js\,\title\:\ log4js简单使用\,\summary\:\log4js简单使用npm install log4jsvar log4js require(\\\log4js\\\);var logger log4js.getLogger();logger.level \\\debug\\\; // default level is OFF - which means no logs at all.logger.debug(\\\Some debug message...\,\description\:\log4js简单使用npm install log4jsvar log4js require(\\\log4js\\\);var logger log4js.getLogger();logger.level \\\debug\\\; // default level is OFF - which means no logs at all.logger.debug(\\\Some debug message...\,\date\:\2022-05-05\,\author\:\tanjie-ola\,\words\:474,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-10-42.png\,\coverPathBase\:\/assets/2022-05-10-18-10-42\},{\text\:\ CSS Flex 布局回顾\,\link\:\/posts/2022/2022-5-3-flex-css/index\,\frontmatter\:{\tag\:\css\,\flex\,\cover\:\/2022-05-10-18-11-58.png\,\tinyCover\:\/cover/2022-05-10-18-11-58.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\707174\,\coverSecondary\:\8f8e8b\,\dir\:\/posts/2022/2022-5-3-flex-css\,\title\:\ CSS Flex 布局回顾\,\summary\:\CSS Flex 布局回顾寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticl...\,\description\:\CSS Flex 布局回顾寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticl...\,\date\:\2022-05-03\,\author\:\tanjie-ola\,\words\:2085,\readTime\:\11 min read\},\coverPath\:\/assets/2022-05-10-18-11-58.png\,\coverPathBase\:\/assets/2022-05-10-18-11-58\},{\text\:\ puppeteer & pm2\,\link\:\/posts/2022/2022-4-24-puppeteer-pm2/index\,\frontmatter\:{\tag\:\puppeteteer\,\pm2\,\cover\:\/2022-05-10-18-14-26.png\,\tinyCover\:\/cover/2022-05-10-18-14-26.png\,\coverWidth\:564,\coverHeight\:841,\coverPrimary\:\B31E1E\,\coverSecondary\:\4ce1e1\,\dir\:\/posts/2022/2022-4-24-puppeteer-pm2\,\title\:\ puppeteer & pm2\,\summary\:\puppeteer & pm2问题1在linux下chrome启动失败官方类似的 issues 非常多，大多数解决方法都复杂且不奏效对于我最有效的方式是sudo apt install chromium-browser chromium-codecs-ffmpegnpm i puppeteer-coreconst puppeteer require(puppeteer);const pu...\,\description\:\puppeteer & pm2问题1在linux下chrome启动失败官方类似的 issues 非常多，大多数解决方法都复杂且不奏效对于我最有效的方式是sudo apt install chromium-browser chromium-codecs-ffmpegnpm i puppeteer-coreconst puppeteer require(puppeteer);const pu...\,\date\:\2022-04-24\,\author\:\tanjie-ola\,\words\:264,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-10-18-14-26.png\,\coverPathBase\:\/assets/2022-05-10-18-14-26\},{\text\:\ 人类一败涂地\,\link\:\/posts/2022/2022-4-24-unity-human-fall-flat/index\,\frontmatter\:{\tag\:\unity\,\human fall flat\,\cover\:\/2022-05-10-18-13-24.png\,\tinyCover\:\/cover/2022-05-10-18-13-24.png\,\coverWidth\:736,\coverHeight\:1111,\coverPrimary\:\4C9288\,\coverSecondary\:\b36d77\,\dir\:\/posts/2022/2022-4-24-unity-human-fall-flat\,\title\:\ 人类一败涂地\,\summary\:\人类一败涂地MacOS打开资源库 在终端程序中输入命令：ln -s /Library/ /资源库 后面有用导入资源到unity资源地址：/Users/tanjie/Library/Application Support/Steam/steamapps/common/Human Fall Flat/WorkshopPackage/Human.unitypackage人物模型在Assets/Model...\,\description\:\人类一败涂地MacOS打开资源库 在终端程序中输入命令：ln -s /Library/ /资源库 后面有用导入资源到unity资源地址：/Users/tanjie/Library/Application Support/Steam/steamapps/common/Human Fall Flat/WorkshopPackage/Human.unitypackage人物模型在Assets/Model...\,\date\:\2022-04-24\,\author\:\tanjie-ola\,\words\:55,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-13-24.png\,\coverPathBase\:\/assets/2022-05-10-18-13-24\},{\text\:\ 利用 puppeteteer 实现修改请求返回结果抓取弹幕\,\link\:\/posts/2022/2022-4-21-puppeteer/index\,\frontmatter\:{\tag\:\puppeteteer\,\pm2\,\pkg\,\express\,\webSocket\,\cover\:\/2022-05-10-18-31-13.png\,\tinyCover\:\/cover/2022-05-10-18-31-13.png\,\coverWidth\:564,\coverHeight\:564,\coverPrimary\:\D0B66D\,\coverSecondary\:\2f4992\,\dir\:\/posts/2022/2022-4-21-puppeteer\,\title\:\ 利用 puppeteteer 实现修改请求返回结果抓取弹幕\,\summary\:\利用 puppeteteer 实现修改请求返回结果抓取弹幕 代码包含如何在pkg中打包puppeteer 参考 打包mac下运行okconst fs require(fs)const path require(path)const puppeteer require(puppeteer)const express require(express)const a...\,\description\:\利用 puppeteteer 实现修改请求返回结果抓取弹幕 代码包含如何在pkg中打包puppeteer 参考 打包mac下运行okconst fs require(fs)const path require(path)const puppeteer require(puppeteer)const express require(express)const a...\,\date\:\2022-04-21\,\author\:\tanjie-ola\,\words\:294,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-10-18-31-13.png\,\coverPathBase\:\/assets/2022-05-10-18-31-13\},{\text\:\ unity 中使用websocket\,\link\:\/posts/2022/2022-4-21-unity-websocket/index\,\frontmatter\:{\tag\:\unity\,\webSocket\,\cover\:\/2022-05-10-18-15-57.png\,\tinyCover\:\/cover/2022-05-10-18-15-57.png\,\coverWidth\:564,\coverHeight\:848,\coverPrimary\:\EDF2F5\,\coverSecondary\:\120d0a\,\dir\:\/posts/2022/2022-4-21-unity-websocket\,\title\:\ unity 中使用websocket\,\summary\:\unity 中使用websocketNativeWebSocketinstall via UPM (Unity Package Manager)Open UnityOpen Package Manager WindowClick Add Package From Git URLEnter URL: https://github.com/endel/NativeWebSocket.git#upmus...\,\description\:\unity 中使用websocketNativeWebSocketinstall via UPM (Unity Package Manager)Open UnityOpen Package Manager WindowClick Add Package From Git URLEnter URL: https://github.com/endel/NativeWebSocket.git#upmus...\,\date\:\2022-04-21\,\author\:\tanjie-ola\,\words\:191,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-15-57.png\,\coverPathBase\:\/assets/2022-05-10-18-15-57\},{\text\:\ 小白装机\,\link\:\/posts/2022/2022-4-18-system-win/index\,\frontmatter\:{\tag\:\windows\,\cover\:\/2022-05-10-18-39-11.png\,\tinyCover\:\/cover/2022-05-10-18-39-11.png\,\coverWidth\:564,\coverHeight\:881,\coverPrimary\:\493730\,\coverSecondary\:\b6c8cf\,\dir\:\/posts/2022/2022-4-18-system-win\,\title\:\ 小白装机\,\summary\:\小白装机下载冰封PE下载纯净版下载系统MSDN找到操作系统win10最下面的最新版...\,\description\:\小白装机下载冰封PE下载纯净版下载系统MSDN找到操作系统win10最下面的最新版...\,\date\:\2022-04-18\,\author\:\tanjie-ola\,\words\:37,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-39-11.png\,\coverPathBase\:\/assets/2022-05-10-18-39-11\},{\text\:\ 这是最基本的 PuppetMaster 角色设置\,\link\:\/posts/2022/2022-4-15-unity-puppet-master/index\,\frontmatter\:{\tag\:\unity\,\puppetMaster\,\cover\:\/2022-05-10-18-40-12.png\,\tinyCover\:\/cover/2022-05-10-18-40-12.png\,\coverWidth\:564,\coverHeight\:1222,\coverPrimary\:\282e2c\,\coverSecondary\:\d7d1d3\,\dir\:\/posts/2022/2022-4-15-unity-puppet-master\,\title\:\ 这是最基本的 PuppetMaster 角色设置\,\summary\:\这是最基本的 PuppetMaster 角色设置播放场景并将“Pin Weight”滑动到零以将角色释放到物理肌肉空间动画。调整所有其他参数，展开“肌肉”以分别调整每块肌肉的重量乘数。要从布娃娃创建 PuppetMaster 角色：将布娃娃角色拖到场景中。如果布娃娃不是使用 ConfigurableJoints 构建的，请选择它的根 GameObject 并单击 GameObject/Conver...\,\description\:\这是最基本的 PuppetMaster 角色设置播放场景并将“Pin Weight”滑动到零以将角色释放到物理肌肉空间动画。调整所有其他参数，展开“肌肉”以分别调整每块肌肉的重量乘数。要从布娃娃创建 PuppetMaster 角色：将布娃娃角色拖到场景中。如果布娃娃不是使用 ConfigurableJoints 构建的，请选择它的根 GameObject 并单击 GameObject/Conver...\,\date\:\2022-04-15\,\author\:\tanjie-ola\,\words\:1759,\readTime\:\9 min read\},\coverPath\:\/assets/2022-05-10-18-40-12.png\,\coverPathBase\:\/assets/2022-05-10-18-40-12\},{\text\:\ unity ragdoll实现拾取道具的核心代码\,\link\:\/posts/2022/2022-4-12-unity-ragdoll/index\,\frontmatter\:{\tag\:\unity\,\ragdoll\,\cover\:\/2022-05-10-18-41-39.png\,\tinyCover\:\/cover/2022-05-10-18-41-39.png\,\coverWidth\:466,\coverHeight\:700,\coverPrimary\:\120804\,\coverSecondary\:\edf7fb\,\dir\:\/posts/2022/2022-4-12-unity-ragdoll\,\title\:\ unity ragdoll实现拾取道具的核心代码\,\summary\:\unity ragdoll实现拾取道具的核心代码给手的骨骼添加碰撞组件void OnCollisionEnter(Collision col){ if (col.gameObject.tag \\\weapon\\\) { // 有一些逻辑需要判断 // 当前武器是否有玩家拥有 （如果一个武器只能被一个玩家拾取） // 武器当前的玩家不是他自己的时候才可以捡起 ...\,\description\:\unity ragdoll实现拾取道具的核心代码给手的骨骼添加碰撞组件void OnCollisionEnter(Collision col){ if (col.gameObject.tag \\\weapon\\\) { // 有一些逻辑需要判断 // 当前武器是否有玩家拥有 （如果一个武器只能被一个玩家拾取） // 武器当前的玩家不是他自己的时候才可以捡起 ...\,\date\:\2022-04-12\,\author\:\tanjie-ola\,\words\:135,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-41-39.png\,\coverPathBase\:\/assets/2022-05-10-18-41-39\},{\text\:\ unity ragdoll\,\link\:\/posts/2022/2022-3-25-unity-ragdoll/index\,\frontmatter\:{\tag\:\unity\,\ragdoll\,\cover\:\/2022-05-10-18-42-39.png\,\tinyCover\:\/cover/2022-05-10-18-42-39.png\,\coverWidth\:564,\coverHeight\:1252,\coverPrimary\:\F6A558\,\coverSecondary\:\095aa7\,\dir\:\/posts/2022/2022-3-25-unity-ragdoll\,\title\:\ unity ragdoll\,\summary\:\unity ragdollUnity 布娃娃实现布娃娃类似于人类一败涂地的橡胶人效果相关插件可以快速创建类似效果链接: 提取码: 6b71购买了人类一败涂地的可以直接获取里面的资源一个个人感觉体验更好游戏ragdoll 插件由于官方自带的插件只推荐用于死亡状态，所以这里推荐一个更好的插件。链接: 提取码: 8v7u该插件的基本使用记录选择角色配置如图 注意选择模型而不是预制体角色加入场景并不需...\,\description\:\unity ragdollUnity 布娃娃实现布娃娃类似于人类一败涂地的橡胶人效果相关插件可以快速创建类似效果链接: 提取码: 6b71购买了人类一败涂地的可以直接获取里面的资源一个个人感觉体验更好游戏ragdoll 插件由于官方自带的插件只推荐用于死亡状态，所以这里推荐一个更好的插件。链接: 提取码: 8v7u该插件的基本使用记录选择角色配置如图 注意选择模型而不是预制体角色加入场景并不需...\,\date\:\2022-03-25\,\author\:\tanjie-ola\,\words\:356,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-10-18-42-39.png\,\coverPathBase\:\/assets/2022-05-10-18-42-39\},{\text\:\ Unity+nodejs\,\link\:\/posts/2022/2022-3-24-unity-nodejs/index\,\frontmatter\:{\tag\:\unity\,\nodejs\,\cover\:\/2022-05-10-18-45-48.png\,\tinyCover\:\/cover/2022-05-10-18-45-48.png\,\coverWidth\:564,\coverHeight\:1001,\coverPrimary\:\1C1418\,\coverSecondary\:\e3ebe7\,\dir\:\/posts/2022/2022-3-24-unity-nodejs\,\title\:\ Unity+nodejs\,\summary\:\Unity+nodejs背景在做一个B站直播类弹幕互动小游戏类似【修勾夜店】抓取弹幕的服务是用nodejs写的，游戏是用unity制作的。因为是直播所有不需要用到服务，就是在本地通过websocket通讯。但是每次都得先起一个node程序来抓弹幕，于是我就想能不能把这个程序直接写到unity程序里。但是要是用CS 的生态来替换nodejs的那套生态理论上是行的，但是时间成本比较大。于是我就找有没有...\,\description\:\Unity+nodejs背景在做一个B站直播类弹幕互动小游戏类似【修勾夜店】抓取弹幕的服务是用nodejs写的，游戏是用unity制作的。因为是直播所有不需要用到服务，就是在本地通过websocket通讯。但是每次都得先起一个node程序来抓弹幕，于是我就想能不能把这个程序直接写到unity程序里。但是要是用CS 的生态来替换nodejs的那套生态理论上是行的，但是时间成本比较大。于是我就找有没有...\,\date\:\2022-03-24\,\author\:\tanjie-ola\,\words\:1236,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-10-18-45-48.png\,\coverPathBase\:\/assets/2022-05-10-18-45-48\},{\text\:\ vscode从头开发一个笑话扩展\,\link\:\/posts/2022/2022-3-23-vscodeext/index\,\frontmatter\:{\tag\:\vscode\,\vscodeext\,\cover\:\/2022-05-10-18-46-27.png\,\tinyCover\:\/cover/2022-05-10-18-46-27.png\,\coverWidth\:404,\coverHeight\:630,\coverPrimary\:\0B0808\,\coverSecondary\:\f4f7f7\,\dir\:\/posts/2022/2022-3-23-vscodeext\,\title\:\ vscode从头开发一个笑话扩展\,\summary\:\vscode从头开发一个笑话扩展安装开发工具包npm install -g yo generator-code创建工程,选择插件开发yo code插件基本目录结构package.jsonactivationEvents 声明视图命令和事件命令contributes 定义了视图和命令的具体信息\\\viewsContainers\\\: { \\\activitybar\\\: { \\\id\\\:...\,\description\:\vscode从头开发一个笑话扩展安装开发工具包npm install -g yo generator-code创建工程,选择插件开发yo code插件基本目录结构package.jsonactivationEvents 声明视图命令和事件命令contributes 定义了视图和命令的具体信息\\\viewsContainers\\\: { \\\activitybar\\\: { \\\id\\\:...\,\date\:\2022-03-23\,\author\:\tanjie-ola\,\words\:437,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-46-27.png\,\coverPathBase\:\/assets/2022-05-10-18-46-27\},{\text\:\ 扩展开发文档\,\link\:\/posts/2022/2022-3-21-webext/index\,\frontmatter\:{\tag\:\chrome\,\cover\:\/2022-05-10-18-48-20.png\,\tinyCover\:\/cover/2022-05-10-18-48-20.png\,\coverWidth\:563,\coverHeight\:704,\coverPrimary\:\282C2F\,\coverSecondary\:\d7d3d0\,\dir\:\/posts/2022/2022-3-21-webext\,\title\:\ 扩展开发文档\,\summary\:\扩展开发文档预计开发一键网站黑色 灰色提取网站图片网站内容转md提取css打算写一个css提取器基础：如何通过js提取元素的css...\,\description\:\扩展开发文档预计开发一键网站黑色 灰色提取网站图片网站内容转md提取css打算写一个css提取器基础：如何通过js提取元素的css...\,\date\:\2022-03-21\,\author\:\tanjie-ola\,\words\:58,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-48-20.png\,\coverPathBase\:\/assets/2022-05-10-18-48-20\},{\text\:\ 个人装机必备软件\,\link\:\/posts/2022/2022-3-18-plugins/index\,\frontmatter\:{\tag\:\windows\,\vscode\,\macos\,\plugins\,\bookmark\,\cover\:\/2022-05-10-18-49-37.png\,\tinyCover\:\/cover/2022-05-10-18-49-37.png\,\coverWidth\:564,\coverHeight\:1220,\coverPrimary\:\c0bfbe\,\coverSecondary\:\3f4041\,\dir\:\/posts/2022/2022-3-18-plugins\,\title\:\ 个人装机必备软件\,\summary\:\个人装机必备软件装机必备谷歌浏览器搜狗输入法VscodetyporaPicgoiShot超级右键 liteThor百度网盘dev-sidecar开发环境nodejsnvmnrmnivitevscode 效率工具 Carbon Product Iconsimage-20220318141046218 translate speaker 翻译朗读者 APIimage-20220318141046218...\,\description\:\个人装机必备软件装机必备谷歌浏览器搜狗输入法VscodetyporaPicgoiShot超级右键 liteThor百度网盘dev-sidecar开发环境nodejsnvmnrmnivitevscode 效率工具 Carbon Product Iconsimage-20220318141046218 translate speaker 翻译朗读者 APIimage-20220318141046218...\,\date\:\2022-03-18\,\author\:\tanjie-ola\,\words\:622,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-10-18-49-37.png\,\coverPathBase\:\/assets/2022-05-10-18-49-37\},{\text\:\ Unity3D 之射线检测\,\link\:\/posts/2022/2022-3-17-unity-ray/index\,\frontmatter\:{\tag\:\unity\,\ray\,\cover\:\/2022-05-10-18-54-44.png\,\tinyCover\:\/cover/2022-05-10-18-54-44.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\000000\,\coverSecondary\:\ffffff\,\dir\:\/posts/2022/2022-3-17-unity-ray\,\title\:\ Unity3D 之射线检测\,\summary\:\Unity3D 之射线检测这里来记录下射线检测的相关内容：射线检测故名就是通过射线去检测是否和碰撞器产生了交集，和碰撞器与碰撞器发生交集一样，会返回一个真。射线的用法很多：比如检测是否跳跃，通过向地面投射射线控制在地面时候可以跳起。射击游戏中可以通过定长射线去判断目标物体是否被击中，等主要用到的工具类是：PhysicsRaycastHit 光线投射碰撞Ray 射线第一种是：Physics.Line...\,\description\:\Unity3D 之射线检测这里来记录下射线检测的相关内容：射线检测故名就是通过射线去检测是否和碰撞器产生了交集，和碰撞器与碰撞器发生交集一样，会返回一个真。射线的用法很多：比如检测是否跳跃，通过向地面投射射线控制在地面时候可以跳起。射击游戏中可以通过定长射线去判断目标物体是否被击中，等主要用到的工具类是：PhysicsRaycastHit 光线投射碰撞Ray 射线第一种是：Physics.Line...\,\date\:\2022-03-17\,\author\:\tanjie-ola\,\words\:659,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-10-18-54-44.png\,\coverPathBase\:\/assets/2022-05-10-18-54-44\},{\text\:\ Unity主题修改\,\link\:\/posts/2022/2022-3-17-unity-theme/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-10-18-50-08.png\,\tinyCover\:\/cover/2022-05-10-18-50-08.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\1c1a1a\,\coverSecondary\:\e3e5e5\,\dir\:\/posts/2022/2022-3-17-unity-theme\,\title\:\ Unity主题修改\,\summary\:\Unity主题修改image-20220317111952789image-20220317112022814...\,\description\:\Unity主题修改image-20220317111952789image-20220317112022814...\,\date\:\2022-03-17\,\author\:\tanjie-ola\,\words\:8,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-50-08.png\,\coverPathBase\:\/assets/2022-05-10-18-50-08\},{\text\:\ unity 如何实现气泡聊天\,\link\:\/posts/2022/2022-3-14-unity-layout/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-10-18-57-11.png\,\tinyCover\:\/cover/2022-05-10-18-57-11.png\,\coverWidth\:564,\coverHeight\:1031,\coverPrimary\:\A5E2D9\,\coverSecondary\:\5a1d26\,\dir\:\/posts/2022/2022-3-14-unity-layout\,\title\:\ unity 如何实现气泡聊天\,\summary\:\unity 如何实现气泡聊天新建image并改名为bgimage-20220314184522374准备素材image-20220314184629709image-20220314184749631image-20220314184816859根据提示安装sprite编辑器 编辑并应用image-20220314184930206将生成的素材拖入bg的sourceImage 并添加框内的两个组件...\,\description\:\unity 如何实现气泡聊天新建image并改名为bgimage-20220314184522374准备素材image-20220314184629709image-20220314184749631image-20220314184816859根据提示安装sprite编辑器 编辑并应用image-20220314184930206将生成的素材拖入bg的sourceImage 并添加框内的两个组件...\,\date\:\2022-03-14\,\author\:\tanjie-ola\,\words\:88,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-57-11.png\,\coverPathBase\:\/assets/2022-05-10-18-57-11\},{\text\:\ Unity获取spine动画的一些信息\,\link\:\/posts/2022/2022-2-28-spine/index\,\frontmatter\:{\tag\:\unity\,\CS\,\spine\,\cover\:\/2022-05-10-18-59-18.png\,\tinyCover\:\/cover/2022-05-10-18-59-18.png\,\coverWidth\:564,\coverHeight\:1253,\coverPrimary\:\33055B\,\coverSecondary\:\ccfaa4\,\dir\:\/posts/2022/2022-2-28-spine\,\title\:\ Unity获取spine动画的一些信息\,\summary\:\Unity获取spine动画的一些信息不同的unity版本可能有区别以下为Unity2020 spine4.0获取spine组件//skeletonDataSkeletonAnimation skeletonAnimation GetComponent();获取所有的动画// 获取所有的动画List sk skeletonAnimation.skeleton.Data.Animations...\,\description\:\Unity获取spine动画的一些信息不同的unity版本可能有区别以下为Unity2020 spine4.0获取spine组件//skeletonDataSkeletonAnimation skeletonAnimation GetComponent();获取所有的动画// 获取所有的动画List sk skeletonAnimation.skeleton.Data.Animations...\,\date\:\2022-02-28\,\author\:\tanjie-ola\,\words\:550,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-59-18.png\,\coverPathBase\:\/assets/2022-05-10-18-59-18\},{\text\:\ unity常用方法备忘\,\link\:\/posts/2022/2022-2-22-unity/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-10-18-59-58.png\,\tinyCover\:\/cover/2022-05-10-18-59-58.png\,\coverWidth\:564,\coverHeight\:1172,\coverPrimary\:\1D1C1C\,\coverSecondary\:\e2e3e3\,\dir\:\/posts/2022/2022-2-22-unity\,\title\:\ unity常用方法备忘\,\summary\:\unity常用方法备忘unity中三种调用其他脚本函数的方法第一种，被调用脚本函数为static类型，调用时直接用 脚本名.函数名()第二种，GameObject.Find(\\\脚本所在的物体的名字\\\).SendMessage(\\\函数名\\\); //能调用public和private类型函数第三种，GameObject.Find(\\\脚本所在的物体的名字\\\).GetComponent().函数名();...\,\description\:\unity常用方法备忘unity中三种调用其他脚本函数的方法第一种，被调用脚本函数为static类型，调用时直接用 脚本名.函数名()第二种，GameObject.Find(\\\脚本所在的物体的名字\\\).SendMessage(\\\函数名\\\); //能调用public和private类型函数第三种，GameObject.Find(\\\脚本所在的物体的名字\\\).GetComponent().函数名();...\,\date\:\2022-02-22\,\author\:\tanjie-ola\,\words\:421,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-59-58.png\,\coverPathBase\:\/assets/2022-05-10-18-59-58\},{\text\:\ 家庭会议\,\link\:\/posts/2022/2022-2-9-family-meeting/index\,\frontmatter\:{\cover\:\/2022-05-11-09-02-17.png\,\tinyCover\:\/cover/2022-05-11-09-02-17.png\,\coverWidth\:564,\coverHeight\:1128,\coverPrimary\:\292426\,\coverSecondary\:\d6dbd9\,\dir\:\/posts/2022/2022-2-9-family-meeting\,\title\:\ 家庭会议\,\summary\:\家庭会议总结去年：发生了许多的大事：结婚，生病，千寻诞生首先感谢爸妈对结婚的支持，买房首付，彩礼的支持。虽然对焕云来说我们没有做到她想要的婚礼仪式，但是我知道爸妈已经努力了，后面我自己努力让她过得更好。后面可以在补一个有千寻参与的婚礼。焕云生病：一同携手在病房度过2020的春节，凤凰涅槃，希望你可以更爱自己和身边的人，意外和明天不知道谁先来。经历过黑暗，也更懂了习以为常的珍贵。宝贝诞生：感谢焕云为...\,\description\:\家庭会议总结去年：发生了许多的大事：结婚，生病，千寻诞生首先感谢爸妈对结婚的支持，买房首付，彩礼的支持。虽然对焕云来说我们没有做到她想要的婚礼仪式，但是我知道爸妈已经努力了，后面我自己努力让她过得更好。后面可以在补一个有千寻参与的婚礼。焕云生病：一同携手在病房度过2020的春节，凤凰涅槃，希望你可以更爱自己和身边的人，意外和明天不知道谁先来。经历过黑暗，也更懂了习以为常的珍贵。宝贝诞生：感谢焕云为...\,\date\:\2022-02-09\,\author\:\tanjie-ola\,\words\:1172,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-11-09-02-17.png\,\coverPathBase\:\/assets/2022-05-11-09-02-17\},{\text\:\ iTween 入门\,\link\:\/posts/2022/2022-1-20-unity-itween/index\,\frontmatter\:{\tag\:\unity\,\iTween\,\cover\:\/2022-05-11-09-04-28.png\,\tinyCover\:\/cover/2022-05-11-09-04-28.png\,\coverWidth\:564,\coverHeight\:1039,\coverPrimary\:\b8466d\,\coverSecondary\:\47b992\,\dir\:\/posts/2022/2022-1-20-unity-itween\,\title\:\ iTween 入门\,\summary\:\iTween 入门官网1.简介iTween是一个动画库,作者创建它的目的就是最小的投入实现最大的产出。让你做开发更轻松,用它可以轻松实现各种动画,晃动,旋转,移动,褪色,上色,控制音频等等。iTween的核心是数值的插值。只需要定义开始和结束,中间过程iTween就会帮你弄好。iTween插件包含两部分:iTween和iTweenPath如何将iTween 加入项目：1.在项目中建立Plugins...\,\description\:\iTween 入门官网1.简介iTween是一个动画库,作者创建它的目的就是最小的投入实现最大的产出。让你做开发更轻松,用它可以轻松实现各种动画,晃动,旋转,移动,褪色,上色,控制音频等等。iTween的核心是数值的插值。只需要定义开始和结束,中间过程iTween就会帮你弄好。iTween插件包含两部分:iTween和iTweenPath如何将iTween 加入项目：1.在项目中建立Plugins...\,\date\:\2022-01-20\,\author\:\tanjie-ola\,\words\:3192,\readTime\:\16 min read\},\coverPath\:\/assets/2022-05-11-09-04-28.png\,\coverPathBase\:\/assets/2022-05-11-09-04-28\},{\text\:\常用Markdown演示\,\link\:\/posts/2022/2022-1-11md-test/index\,\frontmatter\:{\cover\:\/2022012308421.png\,\title\:\常用Markdown演示\,\tag\:\markdown\,\javascript\,\date\:\2022-01-19\,\author\:\artiely\,\primary\:\d4d4d4\,\secondary\:\2b2b2b\,\readTime\:\9 min read\,\words\:1797,\calendar\:\辛丑,牛,辛丑,壬申,腊月,十七,星期三\,\tinyCover\:\/cover/2022012308421.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\3573dc\,\coverSecondary\:\ca8c23\,\dir\:\/posts/2022/2022-1-11md-test\,\summary\:\常用markdown语法测试博客样式图片演示图片引用演示我去菜市场的时候没有赶上趟，却碰上了她正落魄的时光，不知道她吻遍了多少橱窗才习惯了她的理想就在一步之隔的桌上，我给了她两根火腿肠，看清了她的模样，满身的泥泞和风霜都没抖落她眼里的光和对爱的向往，她啊，在人来人往的地方流浪，可能从来不知道爱是可以被人捧在手掌，所以她这一生都在路上表情使用🌰 🙂 👆🏻标记文本重点可能从来不知道爱是可以...\,\description\:\常用markdown语法测试博客样式图片演示图片引用演示我去菜市场的时候没有赶上趟，却碰上了她正落魄的时光，不知道她吻遍了多少橱窗才习惯了她的理想就在一步之隔的桌上，我给了她两根火腿肠，看清了她的模样，满身的泥泞和风霜都没抖落她眼里的光和对爱的向往，她啊，在人来人往的地方流浪，可能从来不知道爱是可以被人捧在手掌，所以她这一生都在路上表情使用🌰 🙂 👆🏻标记文本重点可能从来不知道爱是可以...\},\coverPath\:\/assets/2022012308421.png\,\coverPathBase\:\/assets/2022012308421\},{\text\:\ 在Unity中使用spine\,\link\:\/posts/2022/2022-1-19-unity-spine/index\,\frontmatter\:{\tag\:\unity\,\spine\,\cover\:\/2022-05-11-09-05-37.png\,\tinyCover\:\/cover/2022-05-11-09-05-37.png\,\coverWidth\:563,\coverHeight\:864,\coverPrimary\:\070B0D\,\coverSecondary\:\f8f4f2\,\dir\:\/posts/2022/2022-1-19-unity-spine\,\title\:\ 在Unity中使用spine\,\summary\:\在Unity中使用spine什么是spine 官网spine支持的运行库unity运行库的githubunity spine下载地址下载后导入UnityProject->Packages 拖进去spine体验资源地址 spine4.x链接: 密码: gr7gimage-20220119114214479直接拖入unity指定文件夹会多出三个文件image-20220119114248588新建...\,\description\:\在Unity中使用spine什么是spine 官网spine支持的运行库unity运行库的githubunity spine下载地址下载后导入UnityProject->Packages 拖进去spine体验资源地址 spine4.x链接: 密码: gr7gimage-20220119114214479直接拖入unity指定文件夹会多出三个文件image-20220119114248588新建...\,\date\:\2022-01-19\,\author\:\tanjie-ola\,\words\:115,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-09-05-37.png\,\coverPathBase\:\/assets/2022-05-11-09-05-37\},{\text\:\ git stash\,\link\:\/posts/2022/2022-1-15-git-stash/index\,\frontmatter\:{\tag\:\git\,\cover\:\/2022-05-11-09-11-13.png\,\tinyCover\:\/cover/2022-05-11-09-11-13.png\,\coverWidth\:523,\coverHeight\:520,\coverPrimary\:\899490\,\coverSecondary\:\766b6f\,\dir\:\/posts/2022/2022-1-15-git-stash\,\title\:\ git stash\,\summary\:\git stash所在的分支没有commit权限，但是我们已经在当前分支上做了大量的修改。（git提供了暂存的方式帮我们解决该问题）在我们项目中我们经常会遇到这样一种场景，我们在某个分支中修改代码，突然有一个紧急的任务需要我们在develop中进行修复问题，这个时候我们不得不将我们当前开的分支中代码暂存，等我们修改完develop分支中的内容的时候在回过头去继续修改，这个时候我们就用到了需要使用到...\,\description\:\git stash所在的分支没有commit权限，但是我们已经在当前分支上做了大量的修改。（git提供了暂存的方式帮我们解决该问题）在我们项目中我们经常会遇到这样一种场景，我们在某个分支中修改代码，突然有一个紧急的任务需要我们在develop中进行修复问题，这个时候我们不得不将我们当前开的分支中代码暂存，等我们修改完develop分支中的内容的时候在回过头去继续修改，这个时候我们就用到了需要使用到...\,\date\:\2022-01-15\,\author\:\tanjie-ola\,\words\:230,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-09-11-13.png\,\coverPathBase\:\/assets/2022-05-11-09-11-13\},{\text\:\ 增强页面排版\,\link\:\/posts/2022/2022-1-13-css-unicode-range/index\,\frontmatter\:{\tag\:\css\,\cover\:\/2022-05-11-09-13-44.png\,\tinyCover\:\/cover/2022-05-11-09-13-44.png\,\coverWidth\:564,\coverHeight\:721,\coverPrimary\:\131218\,\coverSecondary\:\ecede7\,\dir\:\/posts/2022/2022-1-13-css-unicode-range\,\title\:\ 增强页面排版\,\summary\:\增强页面排版如何提升网站字体的表现效果，英文使用特定的英文字体，中文使用特定的中文字体，从而增强页面排版。首先能想到最常见的解决方案实现两个class，分别设置font-family为这两个字体，再将这两个类分别应用于中文与英文元素上。缺点繁琐。使用font-family的加载顺续特性，先加载只包含英文的字体，再加载中文字体。缺点对字体有要求。大多数字体无法满足需求。unicode-rangecs...\,\description\:\增强页面排版如何提升网站字体的表现效果，英文使用特定的英文字体，中文使用特定的中文字体，从而增强页面排版。首先能想到最常见的解决方案实现两个class，分别设置font-family为这两个字体，再将这两个类分别应用于中文与英文元素上。缺点繁琐。使用font-family的加载顺续特性，先加载只包含英文的字体，再加载中文字体。缺点对字体有要求。大多数字体无法满足需求。unicode-rangecs...\,\date\:\2022-01-13\,\author\:\tanjie-ola\,\words\:413,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-11-09-13-44.png\,\coverPathBase\:\/assets/2022-05-11-09-13-44\},{\text\:\ 在什么情况下 a a - 1 ？\,\link\:\/posts/2022/2022-1-13-js-a-a-1/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-12-40.png\,\tinyCover\:\/cover/2022-05-11-09-12-40.png\,\coverWidth\:564,\coverHeight\:794,\coverPrimary\:\08090C\,\coverSecondary\:\f7f6f3\,\dir\:\/posts/2022/2022-1-13-js-a-a-1\,\title\:\ 在什么情况下 a a - 1 ？\,\summary\:\在什么情况下 a a - 1 ？思考10秒钟再往下看——**_第一个答案自然是Infinity，或者说，扩展一下，应该是正负Infinity👉🏻 知识点: 在JavaScript里，Infinity是一个Number类型的字面量，表示无穷大。当一个Number类型的值，在运算过程中超过了所能表示的最大值，就会得到无穷大。比如，如果我们将一个不为0的正数除以0，得到的结果就是无穷大。co...\,\description\:\在什么情况下 a a - 1 ？思考10秒钟再往下看——**_第一个答案自然是Infinity，或者说，扩展一下，应该是正负Infinity👉🏻 知识点: 在JavaScript里，Infinity是一个Number类型的字面量，表示无穷大。当一个Number类型的值，在运算过程中超过了所能表示的最大值，就会得到无穷大。比如，如果我们将一个不为0的正数除以0，得到的结果就是无穷大。co...\,\date\:\2022-01-13\,\author\:\tanjie-ola\,\words\:1141,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-11-09-12-40.png\,\coverPathBase\:\/assets/2022-05-11-09-12-40\},{\text\:\前端冷知识判断字符串是数字\,\link\:\/posts/2022/2022-1-13-js-str-is-num/index\,\frontmatter\:{\title\:\前端冷知识判断字符串是数字\,\tag\:\js\,\cover\:\/2022-05-11-09-11-42.png\,\tinyCover\:\/cover/2022-05-11-09-11-42.png\,\coverWidth\:563,\coverHeight\:1001,\coverPrimary\:\B3E1FE\,\coverSecondary\:\4c1e01\,\dir\:\/posts/2022/2022-1-13-js-str-is-num\,\summary\:\在网页中，我们从用户输入的内容中获取的值通常是字符串，但是有时候我们希望用户输入的内容一定要能转成数值：userInput.addEventListener(change, (e) > { const value e.target.value; console.log(typeof value); // string console.assert(isNumeric(value),...\,\description\:\在网页中，我们从用户输入的内容中获取的值通常是字符串，但是有时候我们希望用户输入的内容一定要能转成数值：userInput.addEventListener(change, (e) > { const value e.target.value; console.log(typeof value); // string console.assert(isNumeric(value),...\,\date\:\2022-01-13\,\author\:\tanjie-ola\,\words\:1308,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-11-09-11-42.png\,\coverPathBase\:\/assets/2022-05-11-09-11-42\},{\text\:\从零实现流行的 JavaScript 方法\,\link\:\/posts/2022/2022-1-12-js-array/index\,\frontmatter\:{\title\:\从零实现流行的 JavaScript 方法\,\tag\:\js\,\cover\:\/2022-05-11-09-14-17.png\,\tinyCover\:\/cover/2022-05-11-09-14-17.png\,\coverWidth\:564,\coverHeight\:939,\coverPrimary\:\0A1015\,\coverSecondary\:\f5efea\,\dir\:\/posts/2022/2022-1-12-js-array\,\summary\:\介绍在本文中，分享最流行的 JavaScript 方法，但都是从零开始实现的。对提升编码能力，理解源码能力有一定提升。这只是其工作原理的简单版本，ECMAScript 中指定的实际方法要复杂得多。本文提到的方法有：map, reduce, filter, sort, every, includes, slice, splice, shift, indexOf.在实现前先理解以上方法的api和使用m...\,\description\:\介绍在本文中，分享最流行的 JavaScript 方法，但都是从零开始实现的。对提升编码能力，理解源码能力有一定提升。这只是其工作原理的简单版本，ECMAScript 中指定的实际方法要复杂得多。本文提到的方法有：map, reduce, filter, sort, every, includes, slice, splice, shift, indexOf.在实现前先理解以上方法的api和使用m...\,\date\:\2022-01-12\,\author\:\tanjie-ola\,\words\:803,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-11-09-14-17.png\,\coverPathBase\:\/assets/2022-05-11-09-14-17\},{\text\:\ 链表\,\link\:\/posts/2022/2022-1-10-js-list/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-15-37.png\,\tinyCover\:\/cover/2022-05-11-09-15-37.png\,\coverWidth\:564,\coverHeight\:796,\coverPrimary\:\0d1318\,\coverSecondary\:\f2ece7\,\dir\:\/posts/2022/2022-1-10-js-list\,\title\:\ 链表\,\summary\:\链表如果您正在学习数据结构，那么链表是您应该知道的一种数据结构。如果你不是很了解它或者它是如何在 JavaScript 中实现的，这篇文章可以帮助你。在本文中，我们将讨论链表是什么，它与数组有何不同，以及如何在 JavaScript 中实现它。让我们开始吧。什么是链表？链表是一种类似于数组的线性数据结构。但是，与数组不同，元素不存储在特定的内存位置或索引中。相反，每个元素都是一个单独的对象，其中包...\,\description\:\链表如果您正在学习数据结构，那么链表是您应该知道的一种数据结构。如果你不是很了解它或者它是如何在 JavaScript 中实现的，这篇文章可以帮助你。在本文中，我们将讨论链表是什么，它与数组有何不同，以及如何在 JavaScript 中实现它。让我们开始吧。什么是链表？链表是一种类似于数组的线性数据结构。但是，与数组不同，元素不存储在特定的内存位置或索引中。相反，每个元素都是一个单独的对象，其中包...\,\date\:\2022-01-10\,\author\:\tanjie-ola\,\words\:1722,\readTime\:\9 min read\},\coverPath\:\/assets/2022-05-11-09-15-37.png\,\coverPathBase\:\/assets/2022-05-11-09-15-37\},{\text\:\ 一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术\,\link\:\/posts/2022/2022-1-9-frontend/index\,\frontmatter\:{\tag\:\html\,\css\,\js\,\cover\:\/2022-05-11-09-17-31.png\,\tinyCover\:\/cover/2022-05-11-09-17-31.png\,\coverWidth\:450,\coverHeight\:800,\coverPrimary\:\030303\,\coverSecondary\:\fcfcfc\,\dir\:\/posts/2022/2022-1-9-frontend\,\title\:\ 一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术\,\summary\:\一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术前端是网站的第一道防线（或者更准确地说，是对用户“攻击”的第一道防线），所以前端开发者总是有很多工作要做。为了让他们的生活更轻松一些，我们选择了一些有用但不太知名的 HTML、CSS 和 JavaScript 技术。特别是当你的用户使用Chrome或者你使用Electron技术不用太担心兼容问题的时候。快速隐藏要隐藏 DOM 元素...\,\description\:\一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术前端是网站的第一道防线（或者更准确地说，是对用户“攻击”的第一道防线），所以前端开发者总是有很多工作要做。为了让他们的生活更轻松一些，我们选择了一些有用但不太知名的 HTML、CSS 和 JavaScript 技术。特别是当你的用户使用Chrome或者你使用Electron技术不用太担心兼容问题的时候。快速隐藏要隐藏 DOM 元素...\,\date\:\2022-01-09\,\author\:\tanjie-ola\,\words\:841,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-11-09-17-31.png\,\coverPathBase\:\/assets/2022-05-11-09-17-31\},{\text\:\ 单行 JavaScript 函数\,\link\:\/posts/2022/2022-1-9-js-oneline/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-16-44.png\,\tinyCover\:\/cover/2022-05-11-09-16-44.png\,\coverWidth\:564,\coverHeight\:846,\coverPrimary\:\b48a5b\,\coverSecondary\:\4b75a4\,\dir\:\/posts/2022/2022-1-9-js-oneline\,\title\:\ 单行 JavaScript 函数\,\summary\:\单行 JavaScript 函数复制到剪贴板一个有用的单行 JavaScript 函数，可用于轻松将任何文本复制到剪贴板。const copyToClipboard text > navigator.clipboard.writeText(text)copyToClipboard(This Sring is Copied To Clipboard.)复制到剪贴板获取特定范围内的随机数一个...\,\description\:\单行 JavaScript 函数复制到剪贴板一个有用的单行 JavaScript 函数，可用于轻松将任何文本复制到剪贴板。const copyToClipboard text > navigator.clipboard.writeText(text)copyToClipboard(This Sring is Copied To Clipboard.)复制到剪贴板获取特定范围内的随机数一个...\,\date\:\2022-01-09\,\author\:\tanjie-ola\,\words\:1943,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-11-09-16-44.png\,\coverPathBase\:\/assets/2022-05-11-09-16-44\},{\text\:\ 原型模式\,\link\:\/posts/2022/2022-1-9-js-prototype/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-16-09.png\,\tinyCover\:\/cover/2022-05-11-09-16-09.png\,\coverWidth\:564,\coverHeight\:748,\coverPrimary\:\d595a4\,\coverSecondary\:\2a6a5b\,\dir\:\/posts/2022/2022-1-9-js-prototype\,\title\:\ 原型模式\,\summary\:\原型模式原型模式是在许多相同类型的对象之间共享属性的有用方式。原型是 JavaScript 原生的对象，对象可以通过原型链访问。在我们的应用程序中，我们经常需要创建许多相同类型的对象。一个有用的方法是创建一个 ES6 类的多个实例。假设我们要创建许多狗！在我们的例子中，狗不能做那么多：它们只是有一个名字，它们可以吠叫！class Dog { constructor(name) { this...\,\description\:\原型模式原型模式是在许多相同类型的对象之间共享属性的有用方式。原型是 JavaScript 原生的对象，对象可以通过原型链访问。在我们的应用程序中，我们经常需要创建许多相同类型的对象。一个有用的方法是创建一个 ES6 类的多个实例。假设我们要创建许多狗！在我们的例子中，狗不能做那么多：它们只是有一个名字，它们可以吠叫！class Dog { constructor(name) { this...\,\date\:\2022-01-09\,\author\:\tanjie-ola\,\words\:978,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-11-09-16-09.png\,\coverPathBase\:\/assets/2022-05-11-09-16-09\},{\text\:\ 提供者模式\,\link\:\/posts/2022/2022-1-8-js-provider/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-18-53.png\,\tinyCover\:\/cover/2022-05-11-09-18-53.png\,\coverWidth\:564,\coverHeight\:1252,\coverPrimary\:\7366AB\,\coverSecondary\:\8c9954\,\dir\:\/posts/2022/2022-1-8-js-provider\,\title\:\ 提供者模式\,\summary\:\提供者模式在某些情况下，我们希望为应用程序中的许多（如果不是全部）组件提供可用数据。虽然我们可以使用 将数据传递给组件props，但如果应用程序中的几乎所有组件都需要访问 props 的值，这可能很难做到。我们经常会得到一个叫做prop Drill 的东西，当我们将 props 传递到组件树的很远的地方时就是这种情况。重构依赖于 props 的代码几乎是不可能的，而且很难知道某些数据的来源。优点提...\,\description\:\提供者模式在某些情况下，我们希望为应用程序中的许多（如果不是全部）组件提供可用数据。虽然我们可以使用 将数据传递给组件props，但如果应用程序中的几乎所有组件都需要访问 props 的值，这可能很难做到。我们经常会得到一个叫做prop Drill 的东西，当我们将 props 传递到组件树的很远的地方时就是这种情况。重构依赖于 props 的代码几乎是不可能的，而且很难知道某些数据的来源。优点提...\,\date\:\2022-01-08\,\author\:\tanjie-ola\,\words\:2256,\readTime\:\12 min read\},\coverPath\:\/assets/2022-05-11-09-18-53.png\,\coverPathBase\:\/assets/2022-05-11-09-18-53\},{\text\:\ 代理模式\,\link\:\/posts/2022/2022-1-7-js-proxy/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-19-49.png\,\tinyCover\:\/cover/2022-05-11-09-19-49.png\,\coverWidth\:564,\coverHeight\:824,\coverPrimary\:\0E0D09\,\coverSecondary\:\f1f2f6\,\dir\:\/posts/2022/2022-1-7-js-proxy\,\title\:\ 代理模式\,\summary\:\代理模式使用 Proxy 对象，我们可以更好地控制与某些对象的交互。代理对象可以在我们与对象交互时确定行为，例如当我们获取值或设置值时。一般来说，代理是指代他人。生活中有很多的代理模式的场景。例如，明星有经纪人作为代理，老板有秘书作为代理等等，当有事情的时候，会找到经纪人或秘书，再由他们转达给明星或者老板。JavaScript 中也是如此：我们将与 Proxy 对象进行交互，而不是直接与目标对象交...\,\description\:\代理模式使用 Proxy 对象，我们可以更好地控制与某些对象的交互。代理对象可以在我们与对象交互时确定行为，例如当我们获取值或设置值时。一般来说，代理是指代他人。生活中有很多的代理模式的场景。例如，明星有经纪人作为代理，老板有秘书作为代理等等，当有事情的时候，会找到经纪人或秘书，再由他们转达给明星或者老板。JavaScript 中也是如此：我们将与 Proxy 对象进行交互，而不是直接与目标对象交...\,\date\:\2022-01-07\,\author\:\tanjie-ola\,\words\:1288,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-11-09-19-49.png\,\coverPathBase\:\/assets/2022-05-11-09-19-49\},{\text\:\ 单例模式\,\link\:\/posts/2022/2022-1-6-js-single/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-21-21.png\,\tinyCover\:\/cover/2022-05-11-09-21-21.png\,\coverWidth\:474,\coverHeight\:1001,\coverPrimary\:\1A2635\,\coverSecondary\:\e5d9ca\,\dir\:\/posts/2022/2022-1-6-js-single\,\title\:\ 单例模式\,\summary\:\单例模式维基百科单例是可以实例化一次的类，并且可以全局访问。这个 单一实例 可以在我们的应用程序中共享，这使得单例非常适合管理应用程序中的全局状态。其实我更喜欢把全局只有 一个实例引用 的称之为单例模式，他可能比你理解单例模式更广泛一些。因为随着程序的发展，以前的单例应用的示例中往往会出现很多的缺点和不足，甚至被称之为一种 反模式 ,在现在的应用中已经很少能看到传统单例形式。现代应用都会继承单例思...\,\description\:\单例模式维基百科单例是可以实例化一次的类，并且可以全局访问。这个 单一实例 可以在我们的应用程序中共享，这使得单例非常适合管理应用程序中的全局状态。其实我更喜欢把全局只有 一个实例引用 的称之为单例模式，他可能比你理解单例模式更广泛一些。因为随着程序的发展，以前的单例应用的示例中往往会出现很多的缺点和不足，甚至被称之为一种 反模式 ,在现在的应用中已经很少能看到传统单例形式。现代应用都会继承单例思...\,\date\:\2022-01-06\,\author\:\tanjie-ola\,\words\:1968,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-11-09-21-21.png\,\coverPathBase\:\/assets/2022-05-11-09-21-21\},{\text\:\Unity\,\link\:\/posts/2021/2021-12-29-unity/index\,\frontmatter\:{\title\:\Unity\,\tag\:\CS\,\unity\,\author\:\Artiely\,\date\:\2021-12-29\,\cover\:\/2022-05-11-09-23-19.png\,\base64\:777777,\tinyCover\:\/cover/2022-05-11-09-23-19.png\,\coverWidth\:564,\coverHeight\:704,\coverPrimary\:\b7a79c\,\coverSecondary\:\485863\,\dir\:\/posts/2021/2021-12-29-unity\,\summary\:\Unity插件分享实现在线蹦迪部分插件分享aura-2-volumetric-lighting-fog体积灯和雾效果实现商城地址白嫖地址链接:密码: f571--来自百度网盘超级会员V1的分享链接失效请联系我LitJSONJSON序列化记得把插件放在Assets/Plugins下链接:密码: sutk--来自百度网盘超级会员V1的分享LayersToPNG.jsxPhotoshop 转 spine...\,\description\:\Unity插件分享实现在线蹦迪部分插件分享aura-2-volumetric-lighting-fog体积灯和雾效果实现商城地址白嫖地址链接:密码: f571--来自百度网盘超级会员V1的分享链接失效请联系我LitJSONJSON序列化记得把插件放在Assets/Plugins下链接:密码: sutk--来自百度网盘超级会员V1的分享LayersToPNG.jsxPhotoshop 转 spine...\,\words\:339,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-09-23-19.png\,\coverPathBase\:\/assets/2022-05-11-09-23-19\},{\text\:\飞机大战游戏\,\link\:\/posts/2021/2021-12-1-kaboom/2021-12-1\,\frontmatter\:{\title\:\飞机大战游戏\,\tag\:\js\,\author\:\Artiely\,\date\:\2021-12-01\,\cover\:\/2022-05-11-10-00-45.png\,\base64\:777777,\tinyCover\:\/cover/2022-05-11-10-00-45.png\,\coverWidth\:563,\coverHeight\:843,\coverPrimary\:\1c1c1c\,\coverSecondary\:\e3e3e3\,\dir\:\/posts/2021/2021-12-1-kaboom\,\summary\:\相关内容体验地址项目源码PPT其他kaboomPPT插件phaser爱给网...\,\description\:\相关内容体验地址项目源码PPT其他kaboomPPT插件phaser爱给网...\,\words\:31,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-10-00-45.png\,\coverPathBase\:\/assets/2022-05-11-10-00-45\},{\text\:\ taro 升级采坑\,\link\:\/posts/2021/2021-9-9-taro/index\,\frontmatter\:{\tag\:\taro\,\react\,\cover\:\/2022-05-11-09-24-54.png\,\tinyCover\:\/cover/2022-05-11-09-24-54.png\,\coverWidth\:412,\coverHeight\:594,\coverPrimary\:\4b4b4b\,\coverSecondary\:\b4b4b4\,\dir\:\/posts/2021/2021-9-9-taro\,\title\:\ taro 升级采坑\,\summary\:\taro 升级采坑Taro.getSystemInfoSync()获取不到值 .getSystemInfoSync is not a function原因：依赖版本不一致的问题{ \\\@tarojs/components\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/runtime\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/taro\\\: \\\^3.0.0-a...\,\description\:\taro 升级采坑Taro.getSystemInfoSync()获取不到值 .getSystemInfoSync is not a function原因：依赖版本不一致的问题{ \\\@tarojs/components\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/runtime\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/taro\\\: \\\^3.0.0-a...\,\date\:\2021-09-09\,\author\:\tanjie-ola\,\words\:385,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-09-24-54.png\,\coverPathBase\:\/assets/2022-05-11-09-24-54\},{\text\:\小程序分享另类实践\,\link\:\/posts/2021/2021-8-16-min-share/2021-8-16-min-share\,\frontmatter\:{\title\:\小程序分享另类实践\,\tag\:\js\,\mini\,\taro\,\author\:\Artiely\,\date\:\2021-08-16\,\cover\:\/2022-05-11-10-01-15.png\,\base64\:\fafafa\,\password\:true,\tinyCover\:\/cover/2022-05-11-10-01-15.png\,\coverWidth\:564,\coverHeight\:846,\coverPrimary\:\608d8f\,\coverSecondary\:\9f7270\,\dir\:\/posts/2021/2021-8-16-min-share\,\summary\:\该方法的好处是你不用关心分享以后的逻辑，也就是说你不用去管理 接受分享的用户进来要处理是否登录，是否已经绑定等等，这些逻辑都是在分享的时候就定义好了。不会导致分享逻辑散布在各处难以维护。/** 分享包装 useHandleShare(params,callback) params{ title:string imageUrl:string path:string cb:fn query:{} 参...\,\description\:\该方法的好处是你不用关心分享以后的逻辑，也就是说你不用去管理 接受分享的用户进来要处理是否登录，是否已经绑定等等，这些逻辑都是在分享的时候就定义好了。不会导致分享逻辑散布在各处难以维护。/** 分享包装 useHandleShare(params,callback) params{ title:string imageUrl:string path:string cb:fn query:{} 参...\,\words\:358,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-10-01-15.png\,\coverPathBase\:\/assets/2022-05-11-10-01-15\},{\text\:\利用 ResizeObserver 实现响应式\,\link\:\/posts/2021/2021-8-15-resize-observer/2021-8-15-resize-observer\,\frontmatter\:{\title\:\利用 ResizeObserver 实现响应式\,\tag\:\js\,\author\:\Artiely\,\date\:\2021-08-15\,\cover\:\/2022-05-11-10-02-28.png\,\base64\:\fafafa\,\tinyCover\:\/cover/2022-05-11-10-02-28.png\,\coverWidth\:564,\coverHeight\:662,\coverPrimary\:\ccd4ce\,\coverSecondary\:\332b31\,\dir\:\/posts/2021/2021-8-15-resize-observer\,\summary\:\const a document.getElementById(a)const obverser new ResizeObserver((entries) > { for (const entry of entries) console.log(entry.contentRect.width)})obverser.observe(a)例如表格里的元素很长的，在宽度够的情况下自...\,\description\:\const a document.getElementById(a)const obverser new ResizeObserver((entries) > { for (const entry of entries) console.log(entry.contentRect.width)})obverser.observe(a)例如表格里的元素很长的，在宽度够的情况下自...\,\words\:63,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-10-02-28.png\,\coverPathBase\:\/assets/2022-05-11-10-02-28\},{\text\:\pixijs\,\link\:\/posts/2021/2021-7-23-pixijs/2021-7-23-pixijs\,\frontmatter\:{\title\:\pixijs\,\tag\:\pixijs\,\author\:\Artiely\,\date\:\2021-07-23\,\cover\:\/2022-05-11-10-03-20.png\,\tinyCover\:\/cover/2022-05-11-10-03-20.png\,\coverWidth\:600,\coverHeight\:1188,\coverPrimary\:\bbbcc2\,\coverSecondary\:\44433d\,\dir\:\/posts/2021/2021-7-23-pixijs\,\summary\:\安装yarn add pixi.js起步import * as PIXI from pixi.js// 初始化const app new PIXI.Application({ width: 256, height: 256, antialias: true, // default: false transparent: false, // default: false resol...\,\description\:\安装yarn add pixi.js起步import * as PIXI from pixi.js// 初始化const app new PIXI.Application({ width: 256, height: 256, antialias: true, // default: false transparent: false, // default: false resol...\,\words\:387,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-10-03-20.png\,\coverPathBase\:\/assets/2022-05-11-10-03-20\},{\text\:\小程序二进制转字符串\,\link\:\/posts/2021/2021-6-15-mini/2021-6-15-mini\,\frontmatter\:{\title\:\小程序二进制转字符串\,\tag\:\weapp\,\cover\:\/2022-05-11-10-03-50.png\,\base64\:\22b443\,\date\:\2021-06-15\,\tinyCover\:\/cover/2022-05-11-10-03-50.png\,\coverWidth\:564,\coverHeight\:916,\coverPrimary\:\6e6d6d\,\coverSecondary\:\919292\,\dir\:\/posts/2021/2021-6-15-mini\,\summary\:\function Uint8ArrayToString(buf) { let encodedString String.fromCharCode.apply(null, new Uint8Array(buf)) encodedString decodeURIComponent(escape(encodedString)) return encodedString}`...\,\description\:\function Uint8ArrayToString(buf) { let encodedString String.fromCharCode.apply(null, new Uint8Array(buf)) encodedString decodeURIComponent(escape(encodedString)) return encodedString}`...\,\author\:\tanjie-ola\,\words\:17,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-10-03-50.png\,\coverPathBase\:\/assets/2022-05-11-10-03-50\},{\text\:\如何创建自己的美区苹果账号\,\link\:\/posts/2021/2021-3-18-appleId/2021-3-18-appleId\,\frontmatter\:{\title\:\如何创建自己的美区苹果账号\,\tag\:\appleId\,\cover\:\/2022-05-11-10-04-41.png\,\base64\:\a19caf\,\author\:\artiely\,\date\:\2021-03-18\,\tinyCover\:\/cover/2022-05-11-10-04-41.png\,\coverWidth\:564,\coverHeight\:978,\coverPrimary\:\cfcccc\,\coverSecondary\:\303333\,\dir\:\/posts/2021/2021-3-18-appleId\,\summary\:\如何创建？1.使用网页浏览器创建新的Apple ID点击Apple ID创建链接 ，然后点击“创建您的 Apple ID”。（页面语言是中文英文都可以）12.输入姓名、生日、电子邮件地址、密码、国家选择美国23.选择安全提示问题，点击“继续”34.网页版注册完成4手机登录新创建等Apple ID1.打开Apple设备，进入 App Store -> 点击右上角你的Apple ID头像退出原来的账...\,\description\:\如何创建？1.使用网页浏览器创建新的Apple ID点击Apple ID创建链接 ，然后点击“创建您的 Apple ID”。（页面语言是中文英文都可以）12.输入姓名、生日、电子邮件地址、密码、国家选择美国23.选择安全提示问题，点击“继续”34.网页版注册完成4手机登录新创建等Apple ID1.打开Apple设备，进入 App Store -> 点击右上角你的Apple ID头像退出原来的账...\,\words\:267,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-10-04-41.png\,\coverPathBase\:\/assets/2022-05-11-10-04-41\},{\text\:\从使用场景了解proxy\,\link\:\/posts/2021/2021-2-23-proxy/2021-2-23-proxy\,\frontmatter\:{\title\:\从使用场景了解proxy\,\tag\:\proxy\,\cover\:\/2022-05-11-10-05-37.png\,\base64\:\f0df3d\,\author\:\artiely\,\date\:\2021-02-23\,\tinyCover\:\/cover/2022-05-11-10-05-37.png\,\coverWidth\:564,\coverHeight\:957,\coverPrimary\:\262623\,\coverSecondary\:\d9d9dc\,\dir\:\/posts/2021/2021-2-23-proxy\,\summary\:\前面讲过一篇proxy 的深入理解，现在就带大家了解一下proxy的实际应用，更深入的了解proxy的妙用及价值吧！ 呼应上了~由俭入奢跟踪属性访问（get，set）假设我们有一个函数tracePropAccess(obj, propKeys)，该函数 obj 在 propKeys 设置或获取的属性（其键在 Array 中）时进行记录。在以下代码中，我们将该函数应用于类的实例 Point：clas...\,\description\:\前面讲过一篇proxy 的深入理解，现在就带大家了解一下proxy的实际应用，更深入的了解proxy的妙用及价值吧！ 呼应上了~由俭入奢跟踪属性访问（get，set）假设我们有一个函数tracePropAccess(obj, propKeys)，该函数 obj 在 propKeys 设置或获取的属性（其键在 Array 中）时进行记录。在以下代码中，我们将该函数应用于类的实例 Point：clas...\,\words\:2463,\readTime\:\13 min read\},\coverPath\:\/assets/2022-05-11-10-05-37.png\,\coverPathBase\:\/assets/2022-05-11-10-05-37\},{\text\:\ 有用的javascript技巧\,\link\:\/posts/2021/2021-1-9-js/index\,\frontmatter\:{\tag\:\javascript\,\cover\:\/2022-05-11-09-25-23.png\,\tinyCover\:\/cover/2022-05-11-09-25-23.png\,\coverWidth\:500,\coverHeight\:750,\coverPrimary\:\1f1f1f\,\coverSecondary\:\e0e0e0\,\dir\:\/posts/2021/2021-1-9-js\,\title\:\ 有用的javascript技巧\,\summary\:\有用的javascript技巧您可以使用 JavaScript 以不同的方式做同样的事情。随着每个新 ECMAScript 规范的发布，都添加了新的方法和运算符，以使代码更短且更具可读性。代码Object.entries大多数开发人员使用Object.keys方法来迭代对象。此方法仅返回对象键数组，而不返回值。您可以使用Object.entries来获取键和值。const person { ...\,\description\:\有用的javascript技巧您可以使用 JavaScript 以不同的方式做同样的事情。随着每个新 ECMAScript 规范的发布，都添加了新的方法和运算符，以使代码更短且更具可读性。代码Object.entries大多数开发人员使用Object.keys方法来迭代对象。此方法仅返回对象键数组，而不返回值。您可以使用Object.entries来获取键和值。const person { ...\,\date\:\2021-01-09\,\author\:\tanjie-ola\,\words\:759,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-11-09-25-23.png\,\coverPathBase\:\/assets/2022-05-11-09-25-23\},{\text\:\ threejs的低模和一些材质参考\,\link\:\/posts/2021/2021-1-8-threejs/index\,\frontmatter\:{\tag\:\threejs\,\cover\:\/2022-05-11-09-26-04.png\,\tinyCover\:\/cover/2022-05-11-09-26-04.png\,\coverWidth\:564,\coverHeight\:1001,\coverPrimary\:\6d6e71\,\coverSecondary\:\92918e\,\dir\:\/posts/2021/2021-1-8-threejs\,\title\:\ threejs的低模和一些材质参考\,\summary\:\threejs的低模和一些材质参考使用演示threejs控制面板插件...\,\description\:\threejs的低模和一些材质参考使用演示threejs控制面板插件...\,\date\:\2021-01-08\,\author\:\tanjie-ola\,\words\:26,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-09-26-04.png\,\coverPathBase\:\/assets/2022-05-11-09-26-04\},{\text\:\从使用场景了解puppeteer\,\link\:\/posts/2021/2021-1-3-puppeteer/2021-1-3-puppeteer\,\frontmatter\:{\title\:\从使用场景了解puppeteer\,\tag\:\puppeteer\,\cover\:\/2022-05-11-10-06-26.png\,\base64\:\00cab4\,\author\:\artiely\,\date\:\2021-01-03\,\tinyCover\:\/cover/2022-05-11-10-06-26.png\,\coverWidth\:534,\coverHeight\:800,\coverPrimary\:\876f5b\,\coverSecondary\:\7890a4\,\dir\:\/posts/2021/2021-1-3-puppeteer\,\summary\:\英 ˌpʌpɪˈtɪər美 ˌpʌpɪˈtɪrn. 操纵木偶的人；操纵傀儡vt. 操纵浏览器自动化库Puppeteer Node.js + Chrome评估 Javascript官网Puppeteer安装只需安装 NPM 包即可开始npm i puppeteer然后const puppetter require(puppeteer);(async() > { // .......\,\description\:\英 ˌpʌpɪˈtɪər美 ˌpʌpɪˈtɪrn. 操纵木偶的人；操纵傀儡vt. 操纵浏览器自动化库Puppeteer Node.js + Chrome评估 Javascript官网Puppeteer安装只需安装 NPM 包即可开始npm i puppeteer然后const puppetter require(puppeteer);(async() > { // .......\,\words\:1126,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-11-10-06-26.png\,\coverPathBase\:\/assets/2022-05-11-10-06-26\},{\text\:\css\,\link\:\/posts/2020/2020-12-31-css/2020-12-31-css\,\frontmatter\:{\title\:\css\,\tag\:\css\,\cover\:\/2022-05-13-13-30-32.png\,\base64\:\639ecd\,\author\:\artiely\,\date\:\2020-12-31\,\tinyCover\:\/cover/2022-05-13-13-30-32.png\,\coverWidth\:564,\coverHeight\:1003,\coverPrimary\:\dcbf2e\,\coverSecondary\:\2340d1\,\dir\:\/posts/2020/2020-12-31-css\,\summary\:\css See the Pen Clip Path Transitions by jie (@artiely) on CodePen.`...\,\description\:\css See the Pen Clip Path Transitions by jie (@artiely) on CodePen.`...\,\words\:51,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-30-32.png\,\coverPathBase\:\/assets/2022-05-13-13-30-32\},{\text\:\面试问题总结\,\link\:\/posts/2020/2020-9-24-interview/2020-9-24-interview\,\frontmatter\:{\title\:\面试问题总结\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-29-56.png\,\base64\:\3f5d5e\,\author\:\artiely\,\date\:\2020-09-24\,\tinyCover\:\/cover/2022-05-13-13-29-56.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\0b596b\,\coverSecondary\:\f4a694\,\dir\:\/posts/2020/2020-9-24-interview\,\summary\:\最近参加了一些面试，凭借着自己的记忆把还记得住的问题做一个归纳总结和个人观点。暂时不写答案，大家可以自己答一答，再找我要答案。笔试和问答// 说出一下代码执行结果，为什么？console.log(script start);setTimeout(function(){ console.log(settimeout)});let promise1 new Promise(functio...\,\description\:\最近参加了一些面试，凭借着自己的记忆把还记得住的问题做一个归纳总结和个人观点。暂时不写答案，大家可以自己答一答，再找我要答案。笔试和问答// 说出一下代码执行结果，为什么？console.log(script start);setTimeout(function(){ console.log(settimeout)});let promise1 new Promise(functio...\,\words\:1912,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-13-13-29-56.png\,\coverPathBase\:\/assets/2022-05-13-13-29-56\},{\text\:\手写 map 和 reduce\,\link\:\/posts/2020/2020-9-15-js-arr/2020-9-15-js-arr\,\frontmatter\:{\title\:\手写 map 和 reduce\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-29-26.png\,\base64\:\1b1b20\,\author\:\artiely\,\date\:\2020-09-15\,\tinyCover\:\/cover/2022-05-13-13-29-26.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\667e95\,\coverSecondary\:\99816a\,\dir\:\/posts/2020/2020-9-15-js-arr\,\summary\:\(function() { const selfMap function(fn, context) { // fn: 回调 context:回调作用域指定的this // 1. 获取调用者this,并转为数组 const arr .slice.call(this) // 2. 遍历调用者 const arrMap for (let i ...\,\description\:\(function() { const selfMap function(fn, context) { // fn: 回调 context:回调作用域指定的this // 1. 获取调用者this,并转为数组 const arr .slice.call(this) // 2. 遍历调用者 const arrMap for (let i ...\,\words\:183,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-29-26.png\,\coverPathBase\:\/assets/2022-05-13-13-29-26\},{\text\:\ 说一说递归如何优化-尾递归优化\,\link\:\/posts/2020/2020-9-7-recursive/2020-9-7-recursive\,\frontmatter\:{\tag\:\javaScript\,\cover\:\/2022-05-13-13-28-45.png\,\base64\:\1b1b20\,\author\:\artiely\,\date\:\2020-09-07\,\tinyCover\:\/cover/2022-05-13-13-28-45.png\,\coverWidth\:564,\coverHeight\:790,\coverPrimary\:\bbb7a5\,\coverSecondary\:\44485a\,\dir\:\/posts/2020/2020-9-7-recursive\,\title\:\ 说一说递归如何优化-尾递归优化\,\summary\:\说一说递归如何优化-尾递归优化本文旨在帮助大家掌握递归的性能优化方案——尾递归优化，以及如何对下列函数用尾递归进行优化？参考摘录：阮一峰-尾调用优化一、什么尾调用？尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x) { return g(x)}上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下这两种情况，均不属于尾调用。// 情...\,\description\:\说一说递归如何优化-尾递归优化本文旨在帮助大家掌握递归的性能优化方案——尾递归优化，以及如何对下列函数用尾递归进行优化？参考摘录：阮一峰-尾调用优化一、什么尾调用？尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x) { return g(x)}上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下这两种情况，均不属于尾调用。// 情...\,\words\:2161,\readTime\:\11 min read\},\coverPath\:\/assets/2022-05-13-13-28-45.png\,\coverPathBase\:\/assets/2022-05-13-13-28-45\},{\text\:\当···时发生了什么\,\link\:\/posts/2020/2020-9-5-what-happens/2020-9-5-what-happens\,\frontmatter\:{\title\:\当···时发生了什么\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-27-34.png\,\base64\:\f2f2f2\,\author\:\artiely\,\date\:\2020-09-05\,\tinyCover\:\/cover/2022-05-13-13-27-34.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\1d2122\,\coverSecondary\:\e2dedd\,\dir\:\/posts/2020/2020-9-5-what-happens\,\summary\:\这个试图回答一个古老的面试问题：当你在浏览器中输入 google.com 并且按下回车之后发生了什么？不过我们不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。这将是一个协作的过程，所以深入挖掘吧，并且帮助我们一起完善它。仍然有大量的细节等待着你来添加，欢迎向我们发送 Pull Requset！按下\\\g\\\键接下来的内容介绍了物理键盘和系统中断的工作原理，但是有一部分内容却没有涉及。...\,\description\:\这个试图回答一个古老的面试问题：当你在浏览器中输入 google.com 并且按下回车之后发生了什么？不过我们不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。这将是一个协作的过程，所以深入挖掘吧，并且帮助我们一起完善它。仍然有大量的细节等待着你来添加，欢迎向我们发送 Pull Requset！按下\\\g\\\键接下来的内容介绍了物理键盘和系统中断的工作原理，但是有一部分内容却没有涉及。...\,\words\:7353,\readTime\:\37 min read\},\coverPath\:\/assets/2022-05-13-13-27-34.png\,\coverPathBase\:\/assets/2022-05-13-13-27-34\},{\text\:\前端并发性能优化\,\link\:\/posts/2020/2020-9-3-brower/2020-9-3-brower\,\frontmatter\:{\title\:\前端并发性能优化\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-23-43.png\,\base64\:\0a1a4a\,\author\:\artiely\,\date\:\2020-09-03\,\tinyCover\:\/cover/2022-05-13-13-23-43.png\,\coverWidth\:474,\coverHeight\:842,\coverPrimary\:\403d44\,\coverSecondary\:\bfc2bb\,\dir\:\/posts/2020/2020-9-3-brower\,\summary\:\前端技术的逐渐成熟，还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。cookie free按照普通设计，当网站cookie信息有1 KB、网站首页共150个资源时，用户在请求过程中需要发送15...\,\description\:\前端技术的逐渐成熟，还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。cookie free按照普通设计，当网站cookie信息有1 KB、网站首页共150个资源时，用户在请求过程中需要发送15...\,\words\:1206,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-13-13-23-43.png\,\coverPathBase\:\/assets/2022-05-13-13-23-43\},{\text\:\深入理解Proxy\,\link\:\/posts/2020/2020-9-2-proxy/index\,\frontmatter\:{\title\:\深入理解Proxy\,\tag\:\javaScript\,\proxy\,\cover\:\/2022-05-13-13-17-57.png\,\base64\:\eb7426\,\author\:\artiely\,\date\:\2020-09-02\,\tinyCover\:\/cover/2022-05-13-13-17-57.png\,\coverWidth\:564,\coverHeight\:1003,\coverPrimary\:\463c38\,\coverSecondary\:\b9c3c7\,\dir\:\/posts/2020/2020-9-2-proxy\,\summary\:\什么是Proxy？它的作用是？MDN据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层 \\\拦截\\\，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来...\,\description\:\什么是Proxy？它的作用是？MDN据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层 \\\拦截\\\，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来...\,\words\:2838,\readTime\:\15 min read\},\coverPath\:\/assets/2022-05-13-13-17-57.png\,\coverPathBase\:\/assets/2022-05-13-13-17-57\},{\text\:\前端面试题汇总-框架-1\,\link\:\/posts/2020/2020-9-1-fw/2020-9-1-fw\,\frontmatter\:{\title\:\前端面试题汇总-框架-1\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-16-29.png\,\base64\:\3fb782\,\author\:\artiely\,\date\:\2020-09-01\,\tinyCover\:\/cover/2022-05-13-13-16-29.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\cbb0af\,\coverSecondary\:\344f50\,\dir\:\/posts/2020/2020-9-1-fw\,\summary\:\1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据...\,\description\:\1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据...\,\words\:3486,\readTime\:\18 min read\},\coverPath\:\/assets/2022-05-13-13-16-29.png\,\coverPathBase\:\/assets/2022-05-13-13-16-29\},{\text\:\前端面试题汇总-框架-2\,\link\:\/posts/2020/2020-9-1-fw2/2020-9-1-fw2\,\frontmatter\:{\title\:\前端面试题汇总-框架-2\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-17-15.png\,\base64\:\3fb782\,\author\:\artiely\,\date\:\2020-09-01\,\tinyCover\:\/cover/2022-05-13-13-17-15.png\,\coverWidth\:301,\coverHeight\:512,\coverPrimary\:\665f65\,\coverSecondary\:\99a09a\,\dir\:\/posts/2020/2020-9-1-fw2\,\summary\:\生命周期函数面试题1.什么是 vue 生命周期？有什么作用？答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染...\,\description\:\生命周期函数面试题1.什么是 vue 生命周期？有什么作用？答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染...\,\words\:3593,\readTime\:\18 min read\},\coverPath\:\/assets/2022-05-13-13-17-15.png\,\coverPathBase\:\/assets/2022-05-13-13-17-15\},{\text\:\ 前端性能优化\,\link\:\/posts/2020/2020-8-17/2020-8-17\,\frontmatter\:{\tag\:\gzip\,\javaScript\,\DNS\,\cover\:\/2022-05-13-13-15-41.png\,\base64\:\2884fc\,\author\:\artiely\,\date\:\2020-08-17\,\tinyCover\:\/cover/2022-05-13-13-15-41.png\,\coverWidth\:510,\coverHeight\:720,\coverPrimary\:\ebdcd7\,\coverSecondary\:\142328\,\dir\:\/posts/2020/2020-8-17\,\title\:\ 前端性能优化\,\summary\:\前端性能优化关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。尽量减少 HTTP 请求个数——须权衡使用 CDN（内容分发网络）为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。避免空的 src 和 href使用 gzip 压缩内容把 CSS 放到顶部把 JS 放到底部避免使用 CSS 表达式将 CSS ...\,\description\:\前端性能优化关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。尽量减少 HTTP 请求个数——须权衡使用 CDN（内容分发网络）为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。避免空的 src 和 href使用 gzip 压缩内容把 CSS 放到顶部把 JS 放到底部避免使用 CSS 表达式将 CSS ...\,\words\:342,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-13-15-41.png\,\coverPathBase\:\/assets/2022-05-13-13-15-41\},{\text\:\ 创建模板脚手架\,\link\:\/posts/2020/2020-7-23-temp/2020-7-23-temp\,\frontmatter\:{\tag\:\commander\,\cover\:\/2022-05-13-13-15-00.png\,\base64\:262626,\author\:\artiely\,\date\:\2020-07-23\,\tinyCover\:\/cover/2022-05-13-13-15-00.png\,\coverWidth\:405,\coverHeight\:720,\coverPrimary\:\2a2929\,\coverSecondary\:\d5d6d6\,\dir\:\/posts/2020/2020-7-23-temp\,\title\:\ 创建模板脚手架\,\summary\:\创建模板脚手架commandercommander这是用来编写指令和处理命令行的，具体用法如下：const program require(commander)// 定义指令program .version(0.0.1) .command(init, Generate a new project from a template) .action(() > { //...\,\description\:\创建模板脚手架commandercommander这是用来编写指令和处理命令行的，具体用法如下：const program require(commander)// 定义指令program .version(0.0.1) .command(init, Generate a new project from a template) .action(() > { //...\,\words\:382,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-13-15-00.png\,\coverPathBase\:\/assets/2022-05-13-13-15-00\},{\text\:\taro 踩坑初体验\,\link\:\/posts/2020/2020-7-21-taro/2020-7-21-taro\,\frontmatter\:{\title\:\taro 踩坑初体验\,\tag\:\weapp\,\taro\,\cover\:\/2022-05-13-13-14-12.png\,\base64\:\1628d2\,\author\:\artiely\,\date\:\2020-07-21\,\tinyCover\:\/cover/2022-05-13-13-14-12.png\,\coverWidth\:564,\coverHeight\:769,\coverPrimary\:\4f3d36\,\coverSecondary\:\b0c2c9\,\dir\:\/posts/2020/2020-7-21-taro\,\summary\:\taro 踩坑初体验因为接到多端的小程序需求并且工期端，之前一直在关注taro，今天就来先入个门实践一下，希望可以站着走出来官方文档安装按照文档走流程没遇到啥问题，不赘述百度小程序工具下载下载地址有点小隐蔽运行百度小程序yarn dev:swan报错大致意思是node-sass没有安装成功需要重新构建回到文档的最初提示npm install -g mirror-config-chinanpm i ...\,\description\:\taro 踩坑初体验因为接到多端的小程序需求并且工期端，之前一直在关注taro，今天就来先入个门实践一下，希望可以站着走出来官方文档安装按照文档走流程没遇到啥问题，不赘述百度小程序工具下载下载地址有点小隐蔽运行百度小程序yarn dev:swan报错大致意思是node-sass没有安装成功需要重新构建回到文档的最初提示npm install -g mirror-config-chinanpm i ...\,\words\:165,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-14-12.png\,\coverPathBase\:\/assets/2022-05-13-13-14-12\},{\text\:\无邀请码分享相关产品\,\link\:\/posts/2020/2020-7-14-share/2020-7-14-share\,\frontmatter\:{\title\:\无邀请码分享相关产品\,\tag\:\product\,\cover\:\/2022-05-13-13-13-35.png\,\base64\:\606a7b\,\author\:\artiely\,\date\:\2020-07-14\,\tinyCover\:\/cover/2022-05-13-13-13-35.png\,\coverWidth\:564,\coverHeight\:965,\coverPrimary\:\f0e4e0\,\coverSecondary\:\0f1b1f\,\dir\:\/posts/2020/2020-7-14-share\,\summary\:\openinstallshareinstallsharetrace极光魔链大致的实现方案1、WEB的下载落地页每个用户分享出来的落地页URL不同，或者说URL上的参数不同，比如A用户的URL后面带的参数可能是codeA，B用户分的URL参数就是codeB。这样就可以区分用户是点谁的邀请链接进来的。同时可以通过网页收集一些手机的信息和分享的链接一起上报给后台，不过网页能获取的信息比较有限，收集的...\,\description\:\openinstallshareinstallsharetrace极光魔链大致的实现方案1、WEB的下载落地页每个用户分享出来的落地页URL不同，或者说URL上的参数不同，比如A用户的URL后面带的参数可能是codeA，B用户分的URL参数就是codeB。这样就可以区分用户是点谁的邀请链接进来的。同时可以通过网页收集一些手机的信息和分享的链接一起上报给后台，不过网页能获取的信息比较有限，收集的...\,\words\:415,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-13-13-35.png\,\coverPathBase\:\/assets/2022-05-13-13-13-35\},{\text\:\可控模态框的实现\,\link\:\/posts/2020/2020-7-13-madel/2020-7-13-madel\,\frontmatter\:{\title\:\可控模态框的实现\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-11-50.png\,\base64\:\f1da4e\,\author\:\artiely\,\date\:\2020-07-13\,\tinyCover\:\/cover/2022-05-13-13-11-50.png\,\coverWidth\:540,\coverHeight\:960,\coverPrimary\:\d0c2be\,\coverSecondary\:\2f3d41\,\dir\:\/posts/2020/2020-7-13-madel\,\summary\:\v-model 语法糖的实现.sync 修饰符的使用滚动穿透的解决slot 和 slot-scoped 的运用优化滚动条的处理动态添加到指定节点的实现快捷键的扩展应用esc,enter动画拖拽jsApi扩展成提示框扩展成询问框扩展成抽屉书写文档借助 vue-cli 快速开始原型开发安装全局原型 cli 工具点击我了解更多npm install -g @vue/cli-service-globa...\,\description\:\v-model 语法糖的实现.sync 修饰符的使用滚动穿透的解决slot 和 slot-scoped 的运用优化滚动条的处理动态添加到指定节点的实现快捷键的扩展应用esc,enter动画拖拽jsApi扩展成提示框扩展成询问框扩展成抽屉书写文档借助 vue-cli 快速开始原型开发安装全局原型 cli 工具点击我了解更多npm install -g @vue/cli-service-globa...\,\words\:2205,\readTime\:\12 min read\},\coverPath\:\/assets/2022-05-13-13-11-50.png\,\coverPathBase\:\/assets/2022-05-13-13-11-50\},{\text\:\ 着迷的JavaScript\,\link\:\/posts/2020/2020-7-9-thks-js/2020-7-9-thks-js\,\frontmatter\:{\tag\:\javaScript\,\cover\:\/2022-05-13-13-10-33.png\,\base64\:\f1da4e\,\author\:\artiely\,\date\:\2020-07-09\,\tinyCover\:\/cover/2022-05-13-13-10-33.png\,\coverWidth\:506,\coverHeight\:920,\coverPrimary\:\f3e5db\,\coverSecondary\:\0c1a24\,\dir\:\/posts/2020/2020-7-9-thks-js\,\title\:\ 着迷的JavaScript\,\summary\:\着迷的JavaScriptfuck js...\,\description\:\着迷的JavaScriptfuck js...\,\words\:7,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-10-33.png\,\coverPathBase\:\/assets/2022-05-13-13-10-33\},{\text\:\vue 完整api备忘清单\,\link\:\/posts/2020/2020-7-1-vue-api/2020-7-1-vue-api\,\frontmatter\:{\title\:\vue 完整api备忘清单\,\tag\:\vue\,\cover\:\/2022-05-13-13-05-49.png\,\base64\:\f9f9f9\,\author\:\artiely\,\date\:\2020-07-01\,\tinyCover\:\/cover/2022-05-13-13-05-49.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\ecc6af\,\coverSecondary\:\133950\,\dir\:\/posts/2020/2020-7-1-vue-api\,\summary\:\https://vuejs-tips.github.io/cheatsheet/vuejs-cheatsheet.pdf...\,\description\:\https://vuejs-tips.github.io/cheatsheet/vuejs-cheatsheet.pdf...\,\words\:22,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-05-49.png\,\coverPathBase\:\/assets/2022-05-13-13-05-49\},{\text\:\vuex 完整api备忘清单\,\link\:\/posts/2020/2020-7-1-vuex-api/2020-7-1-vuex-api\,\frontmatter\:{\title\:\vuex 完整api备忘清单\,\tag\:\vue\,\cover\:\/2022-05-13-13-06-48.png\,\base64\:\f9f9f9\,\author\:\artiely\,\date\:\2020-07-01\,\tinyCover\:\/cover/2022-05-13-13-06-48.png\,\coverWidth\:563,\coverHeight\:1051,\coverPrimary\:\383e45\,\coverSecondary\:\c7c1ba\,\dir\:\/posts/2020/2020-7-1-vuex-api\,\summary\:\...\,\description\:\...\,\words\:1,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-06-48.png\,\coverPathBase\:\/assets/2022-05-13-13-06-48\},{\text\:\vue 组件模式\,\link\:\/posts/2020/2020-6-29-component/2020-6-29-component\,\frontmatter\:{\title\:\vue 组件模式\,\tag\:\vue\,\cover\:\/2022-05-13-13-05-23.png\,\base64\:\3a966a\,\author\:\artiely\,\date\:\2020-06-29\,\tinyCover\:\/cover/2022-05-13-13-05-23.png\,\coverWidth\:564,\coverHeight\:878,\coverPrimary\:\efe6db\,\coverSecondary\:\101924\,\dir\:\/posts/2020/2020-6-29-component\,\summary\:\有用的Vue模式，技巧，提示和技巧以及有帮助的精选链接。组件声明单文件组件 (SFC) - 最常用 {{text}}export default { data() { return { text: Click me, }; }, methods: { handleClick() { console.log(clicked); }, ...\,\description\:\有用的Vue模式，技巧，提示和技巧以及有帮助的精选链接。组件声明单文件组件 (SFC) - 最常用 {{text}}export default { data() { return { text: Click me, }; }, methods: { handleClick() { console.log(clicked); }, ...\,\words\:2622,\readTime\:\14 min read\},\coverPath\:\/assets/2022-05-13-13-05-23.png\,\coverPathBase\:\/assets/2022-05-13-13-05-23\},{\text\:\创建自定义事件\,\link\:\/posts/2020/2020-6-25-custom-event/2020-6-25-custom-event\,\frontmatter\:{\title\:\创建自定义事件\,\tag\:\javascript\,\cover\:\/2022-05-13-13-03-51.png\,\base64\:\e7eb91\,\date\:\2020-06-25\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-13-03-51.png\,\coverWidth\:564,\coverHeight\:752,\coverPrimary\:\e3d4c0\,\coverSecondary\:\1c2b3f\,\dir\:\/posts/2020/2020-6-25-custom-event\,\summary\:\可以使用Event构造函数创建事件，如下所示：const event new Event(build)// Listen for the event.elem.addEventListener(build, (e) > { /* ... */ }, false)// Dispatch the event.elem.dispatchEvent(event)上面的代码示例使用EventT...\,\description\:\可以使用Event构造函数创建事件，如下所示：const event new Event(build)// Listen for the event.elem.addEventListener(build, (e) > { /* ... */ }, false)// Dispatch the event.elem.dispatchEvent(event)上面的代码示例使用EventT...\,\words\:901,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-13-03-51.png\,\coverPathBase\:\/assets/2022-05-13-13-03-51\},{\text\:\摄影图片欣赏\,\link\:\/posts/2020/2020-6-25-photo/2020-6-25-photo\,\frontmatter\:{\title\:\摄影图片欣赏\,\tag\:\photo\,\cover\:\/2022-05-13-13-04-48.png\,\base64\:\4a67b9\,\author\:\幽梦影\,\date\:\2020-06-25\,\tinyCover\:\/cover/2022-05-13-13-04-48.png\,\coverWidth\:564,\coverHeight\:806,\coverPrimary\:\cbc5bd\,\coverSecondary\:\343a42\,\dir\:\/posts/2020/2020-6-25-photo\,\summary\:\...\,\description\:\...\,\words\:11,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-04-48.png\,\coverPathBase\:\/assets/2022-05-13-13-04-48\},{\text\:\指令限制字符的长度\,\link\:\/posts/2020/2020-6-23-charslimit/2020-6-23-charslimit\,\frontmatter\:{\title\:\指令限制字符的长度\,\tag\:\vue\,\cover\:\/2022-05-13-13-01-53.png\,\base64\:\68a863\,\date\:\2020-06-23\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-13-01-53.png\,\coverWidth\:564,\coverHeight\:810,\coverPrimary\:\e5e2e0\,\coverSecondary\:\1a1d1f\,\dir\:\/posts/2020/2020-6-23-charslimit\,\summary\:\show code// 计算当前输入的字节export function strlen(str) { let len 0 for (let i 0; i 0x0001 && c 0xFF60)) { len++ } else len + 2 } return len}// 计算还可输入的字节export function maxlen(st...\,\description\:\show code// 计算当前输入的字节export function strlen(str) { let len 0 for (let i 0; i 0x0001 && c 0xFF60)) { len++ } else len + 2 } return len}// 计算还可输入的字节export function maxlen(st...\,\words\:452,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-13-01-53.png\,\coverPathBase\:\/assets/2022-05-13-13-01-53\},{\text\:\限制字符的长度\,\link\:\/posts/2020/2020-6-20-limit-chars/2020-6-20-limit-chars\,\frontmatter\:{\title\:\限制字符的长度\,\tag\:\vue\,\cover\:\/2022-05-13-12-51-39.png\,\base64\:\68a863\,\date\:\2020-06-20\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-12-51-39.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\0a0a1c\,\coverSecondary\:\f5f5e3\,\dir\:\/posts/2020/2020-6-20-limit-chars\,\summary\:\需求一个字母和数字算作一个字符，一个汉字算作两个字符如：一个输入框可输入 30 个字符,同时展示剩余可输入字符用例 1：可输入 30 个字母或数字用例 2：只可输入 15 个汉字开始const charCodeDir (c) > { return (c > 0x0001 && c 0xFF60)}// 计算当前输入的字节export function strlen(str) { l...\,\description\:\需求一个字母和数字算作一个字符，一个汉字算作两个字符如：一个输入框可输入 30 个字符,同时展示剩余可输入字符用例 1：可输入 30 个字母或数字用例 2：只可输入 15 个汉字开始const charCodeDir (c) > { return (c > 0x0001 && c 0xFF60)}// 计算当前输入的字节export function strlen(str) { l...\,\words\:464,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-51-39.png\,\coverPathBase\:\/assets/2022-05-13-12-51-39\},{\text\:\vue管理系统从0到1-icon组件\,\link\:\/posts/2020/2020-6-12-icon/2020-6-12-icon\,\frontmatter\:{\title\:\vue管理系统从0到1-icon组件\,\tag\:\vue\,\cover\:\/2022-05-13-12-50-42.png\,\base64\:\4f8829\,\date\:\2020-06-12\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-12-50-42.png\,\coverWidth\:310,\coverHeight\:550,\coverPrimary\:\0a0921\,\coverSecondary\:\f5f6de\,\dir\:\/posts/2020/2020-6-12-icon\,\summary\:\什么是iconfonticonfont ，图标字体，也叫字体图标，顾名思义，就是字体做的图标。受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 iconfont特色自由的变化大小，且不会模糊比图片小，加载快可以任意改变颜色支持单色和多色好管理维护准备iconfont账号代码创建组件src/packages/icon/Icon.vueexport default { name: Icon...\,\description\:\什么是iconfonticonfont ，图标字体，也叫字体图标，顾名思义，就是字体做的图标。受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 iconfont特色自由的变化大小，且不会模糊比图片小，加载快可以任意改变颜色支持单色和多色好管理维护准备iconfont账号代码创建组件src/packages/icon/Icon.vueexport default { name: Icon...\,\words\:175,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-50-42.png\,\coverPathBase\:\/assets/2022-05-13-12-50-42\},{\text\:\vue管理系统从0到1-vue-cli@4\,\link\:\/posts/2020/2020-6-5-01-vue-cli/2020-6-5-01-vue-cli\,\frontmatter\:{\title\:\vue管理系统从0到1-vue-cli@4\,\tag\:\vue-cli\,\cover\:\/2022-05-13-12-18-43.png\,\base64\:\eef1f5\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-18-43.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\122226\,\coverSecondary\:\edddd9\,\dir\:\/posts/2020/2020-6-5-01-vue-cli\,\summary\:\安装脚手架工具$ npm install -g @vue/cliOR$ yarn global add @vue/cli创建一个项目vue create admin并配置项目。若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。:::tip推荐小公举（小工具）nrm 可以方便的切换镜像源安装npm i nrm -g查看支...\,\description\:\安装脚手架工具$ npm install -g @vue/cliOR$ yarn global add @vue/cli创建一个项目vue create admin并配置项目。若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。:::tip推荐小公举（小工具）nrm 可以方便的切换镜像源安装npm i nrm -g查看支...\,\author\:\tanjie-ola\,\words\:886,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-18-43.png\,\coverPathBase\:\/assets/2022-05-13-12-18-43\},{\text\:\vue管理系统从0到1-项目结构\,\link\:\/posts/2020/2020-6-5-02-vue-dir/2020-6-5-02-vue-dir\,\frontmatter\:{\title\:\vue管理系统从0到1-项目结构\,\tag\:\vue\,\cover\:\/2022-05-13-12-19-40.png\,\base64\:784840,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-19-40.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\191818\,\coverSecondary\:\e6e7e7\,\dir\:\/posts/2020/2020-6-5-02-vue-dir\,\summary\:\一个好的目录结构能让人迅速了解项目的层次和更易维护当前的项目结构├──public│ ├──favicon.i│ └──index.htm├──src│ ├──assets│ │ └──logo.pn│ ├──component│ │ └──HelloWo│ ├──router│ │ └──index.j│ ├──store│ │ └──index.j│ ├──views│ │ ├──About....\,\description\:\一个好的目录结构能让人迅速了解项目的层次和更易维护当前的项目结构├──public│ ├──favicon.i│ └──index.htm├──src│ ├──assets│ │ └──logo.pn│ ├──component│ │ └──HelloWo│ ├──router│ │ └──index.j│ ├──store│ │ └──index.j│ ├──views│ │ ├──About....\,\author\:\tanjie-ola\,\words\:483,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-19-40.png\,\coverPathBase\:\/assets/2022-05-13-12-19-40\},{\text\:\vue管理系统从0到1-vue.config\,\link\:\/posts/2020/2020-6-5-03-vue-config/2020-6-5-03-vue-config\,\frontmatter\:{\title\:\vue管理系统从0到1-vue.config\,\tag\:\vue\,\cover\:\/2022-05-13-12-20-26.png\,\base64\:\ef5559\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-20-26.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\111111\,\coverSecondary\:\eeeeee\,\dir\:\/posts/2020/2020-6-5-03-vue-config\,\summary\:\官网官网文档将变量全局化平时在定义css变量时总是得在每个页面去引用，这也太繁琐了，所以const path require(path)module.exports { // https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader // 不是这个 https://www.npmjs.com/packag...\,\description\:\官网官网文档将变量全局化平时在定义css变量时总是得在每个页面去引用，这也太繁琐了，所以const path require(path)module.exports { // https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader // 不是这个 https://www.npmjs.com/packag...\,\author\:\tanjie-ola\,\words\:271,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-20-26.png\,\coverPathBase\:\/assets/2022-05-13-12-20-26\},{\text\:\vue管理系统从0到1-文件自动导入\,\link\:\/posts/2020/2020-6-5-04-vue.webpack/2020-6-5-04-vue.webpack\,\frontmatter\:{\title\:\vue管理系统从0到1-文件自动导入\,\tag\:\vue\,\cover\:\/2022-05-13-12-27-01.png\,\base64\:\ef5559\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-27-01.png\,\coverWidth\:564,\coverHeight\:1004,\coverPrimary\:\efba14\,\coverSecondary\:\1045eb\,\dir\:\/posts/2020/2020-6-5-04-vue.webpack\,\summary\:\require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块文档require.context函数接受三个参数directory {String...\,\description\:\require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块文档require.context函数接受三个参数directory {String...\,\author\:\tanjie-ola\,\words\:421,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-27-01.png\,\coverPathBase\:\/assets/2022-05-13-12-27-01\},{\text\:\ vue管理系统从0到1-环境与模式\,\link\:\/posts/2020/2020-6-5-05-env-mode/2020-6-5-05-env-mode\,\frontmatter\:{\tag\:\vue\,\cover\:\/2022-05-13-12-47-37.png\,\base64\:\d2d2d2\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-47-37.png\,\coverWidth\:563,\coverHeight\:1002,\coverPrimary\:\2b2828\,\coverSecondary\:\d4d7d7\,\dir\:\/posts/2020/2020-6-5-05-env-mode\,\title\:\ vue管理系统从0到1-环境与模式\,\summary\:\vue管理系统从0到1-环境与模式文档为什么需要模式和环境我们平时在开发的过程中会有很多的环境和模式：比如我们我们npm run dev这就是一个开发环境，npm run build 打包就是一个生产环境。但是这远远是不够的。很多时候我们需要将打包好的资源发布各个环境下，可能每个环境都对应不同的 api 地址和服务器地址。我们不可能每次打包的时候都去手动的更改地址，然后再打包，繁琐倒不说，关键是容...\,\description\:\vue管理系统从0到1-环境与模式文档为什么需要模式和环境我们平时在开发的过程中会有很多的环境和模式：比如我们我们npm run dev这就是一个开发环境，npm run build 打包就是一个生产环境。但是这远远是不够的。很多时候我们需要将打包好的资源发布各个环境下，可能每个环境都对应不同的 api 地址和服务器地址。我们不可能每次打包的时候都去手动的更改地址，然后再打包，繁琐倒不说，关键是容...\,\author\:\tanjie-ola\,\words\:932,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-47-37.png\,\coverPathBase\:\/assets/2022-05-13-12-47-37\},{\text\:\vue管理系统从0到1-本地预览\,\link\:\/posts/2020/2020-6-5-06-local-preview/2020-6-5-06-local-preview\,\frontmatter\:{\title\:\vue管理系统从0到1-本地预览\,\tag\:\vue\,\cover\:\/2022-05-13-12-49-32.png\,\base64\:\63a3dd\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-49-32.png\,\coverWidth\:564,\coverHeight\:1252,\coverPrimary\:\0a110d\,\coverSecondary\:\f5eef2\,\dir\:\/posts/2020/2020-6-5-06-local-preview\,\summary\:\前一节我们设置了环境和模式，现在我们来实现本地预览，主要是为了本地先测试，有问题提前暴露首先我们在根目录创建一个server.jsconst path require(path)const express require(express)const app express()// var opn require(opn)const localhost require...\,\description\:\前一节我们设置了环境和模式，现在我们来实现本地预览，主要是为了本地先测试，有问题提前暴露首先我们在根目录创建一个server.jsconst path require(path)const express require(express)const app express()// var opn require(opn)const localhost require...\,\author\:\tanjie-ola\,\words\:318,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-49-32.png\,\coverPathBase\:\/assets/2022-05-13-12-49-32\},{\text\:\重新探讨axios的封装\,\link\:\/posts/2020/2020-5-29-axios/2020-5-29-axios\,\frontmatter\:{\title\:\重新探讨axios的封装\,\tag\:\axios\,\cover\:\/2022-05-13-12-17-53.png\,\base64\:\a7d6eb\,\date\:\2020-05-29\,\tinyCover\:\/cover/2022-05-13-12-17-53.png\,\coverWidth\:564,\coverHeight\:1030,\coverPrimary\:\050507\,\coverSecondary\:\fafaf8\,\dir\:\/posts/2020/2020-5-29-axios\,\summary\:\问题，我们为什么要对axios进行封装先看看axios的功能Make XMLHttpRequests from the browserMake http requests from node.jsSupports the Promise APIIntercept request and responseTransform request and response dataCancel reques...\,\description\:\问题，我们为什么要对axios进行封装先看看axios的功能Make XMLHttpRequests from the browserMake http requests from node.jsSupports the Promise APIIntercept request and responseTransform request and response dataCancel reques...\,\author\:\tanjie-ola\,\words\:233,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-17-53.png\,\coverPathBase\:\/assets/2022-05-13-12-17-53\},{\text\:\vue封装ali-oss sdk web直传批量上传等\,\link\:\/posts/2020/2020-5-22-ali-oss/2020-5-22-ali-oss\,\frontmatter\:{\title\:\vue封装ali-oss sdk web直传批量上传等\,\tag\:\vue\,\ali-oss\,\plupload\,\cover\:\/2022-05-13-12-17-19.png\,\date\:\2020-05-22\,\base64\:\efbc00\,\tinyCover\:\/cover/2022-05-13-12-17-19.png\,\coverWidth\:564,\coverHeight\:752,\coverPrimary\:\503b4d\,\coverSecondary\:\afc4b2\,\dir\:\/posts/2020/2020-5-22-ali-oss\,\summary\:\本讲解只包含前端实现和后端实现飞机票如何基于POST Policy的使用规则在服务端通过各种语言代码完成签名对应的官方文档地址图片直传实践获取鉴权export function getToken(currfile, base64) { return new Promise((resolve, reject) > { const type currfile.type.split(/...\,\description\:\本讲解只包含前端实现和后端实现飞机票如何基于POST Policy的使用规则在服务端通过各种语言代码完成签名对应的官方文档地址图片直传实践获取鉴权export function getToken(currfile, base64) { return new Promise((resolve, reject) > { const type currfile.type.split(/...\,\author\:\tanjie-ola\,\words\:820,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-17-19.png\,\coverPathBase\:\/assets/2022-05-13-12-17-19\},{\text\:\vue中如何优雅的清除定时器\,\link\:\/posts/2020/2020-4-29-vue-hook-lifecycle/2020-4-29-vue-hook-lifecycle\,\frontmatter\:{\title\:\vue中如何优雅的清除定时器\,\tag\:\vue\,\cover\:\/2022-05-13-12-15-54.png\,\date\:\2020-04-29\,\base64\:\4ec07b\,\tinyCover\:\/cover/2022-05-13-12-15-54.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\050d1c\,\coverSecondary\:\faf2e3\,\dir\:\/posts/2020/2020-4-29-vue-hook-lifecycle\,\summary\:\首先来看一下我们平时最常见的清除方式export default { data() { return { timer: null, } }, mounted() { this.timer setInterval(() > {}, 1000) }, beforeDestroy() { clearInterval(this.timer) this...\,\description\:\首先来看一下我们平时最常见的清除方式export default { data() { return { timer: null, } }, mounted() { this.timer setInterval(() > {}, 1000) }, beforeDestroy() { clearInterval(this.timer) this...\,\author\:\tanjie-ola\,\words\:269,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-15-54.png\,\coverPathBase\:\/assets/2022-05-13-12-15-54\},{\text\:\plop 模板生成工具\,\link\:\/posts/2020/2020-4-6-plop/2020-4-6-plop\,\frontmatter\:{\title\:\plop 模板生成工具\,\tag\:\plop\,\cover\:\/2022-05-13-12-15-06.png\,\date\:\2020-04-06\,\base64\:\1d2323\,\tinyCover\:\/cover/2022-05-13-12-15-06.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\0d1011\,\coverSecondary\:\f2efee\,\dir\:\/posts/2020/2020-4-6-plop\,\summary\:\官网https://plopjs.com/documentation/#installation安装// 全局安装npm i -g plop// 本地安装npm i --save-dev plop配置// 更目录创建文件 plopfile.js plop将已该文件作为执行入口// 导出执行函数module.exports function (plop) { plop.getGenerato...\,\description\:\官网https://plopjs.com/documentation/#installation安装// 全局安装npm i -g plop// 本地安装npm i --save-dev plop配置// 更目录创建文件 plopfile.js plop将已该文件作为执行入口// 导出执行函数module.exports function (plop) { plop.getGenerato...\,\author\:\tanjie-ola\,\words\:664,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-13-12-15-06.png\,\coverPathBase\:\/assets/2022-05-13-12-15-06\},{\text\:\深切哀悼\,\link\:\/posts/2020/2020-4-4-yiqin/2020-4-4-yiqin\,\frontmatter\:{\title\:\深切哀悼\,\tag\:\2019-nCoV\,\css\,\cover\:\/2022-05-13-12-14-33.png\,\date\:\2020-04-03\,\base64\:0,\tinyCover\:\/cover/2022-05-13-12-14-33.png\,\coverWidth\:370,\coverHeight\:658,\coverPrimary\:\131212\,\coverSecondary\:\eceded\,\dir\:\/posts/2020/2020-4-4-yiqin\,\summary\:\国务院今日公告，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。如何让我们的网站符合当前的气氛html { filter: grayscale(100%); -webkit-filt...\,\description\:\国务院今日公告，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。如何让我们的网站符合当前的气氛html { filter: grayscale(100%); -webkit-filt...\,\author\:\tanjie-ola\,\words\:416,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-14-33.png\,\coverPathBase\:\/assets/2022-05-13-12-14-33\},{\text\:\cmder的安装和运行\,\link\:\/posts/2020/2020-4-2-cmder/2020-4-2-cmder\,\frontmatter\:{\tag\:\cmder\,\cover\:\/2022-05-13-12-13-15.png\,\date\:\2020-04-02\,\base64\:\ffffff\,\title\:\cmder的安装和运行\,\tinyCover\:\/cover/2022-05-13-12-13-15.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\3c2e69\,\coverSecondary\:\c3d196\,\dir\:\/posts/2020/2020-4-2-cmder\,\summary\:\官网下载地址下载解压后可直接运行加入环境变量加入右键快捷环境变量添加后，在任意文件夹中即可打开Cmder，上一步的把 Cmder 加到环境变量就是为此服务的, 在管理员权限的cmd下输入以下语句即可:Cmder.exe /REGISTER ALL...\,\description\:\官网下载地址下载解压后可直接运行加入环境变量加入右键快捷环境变量添加后，在任意文件夹中即可打开Cmder，上一步的把 Cmder 加到环境变量就是为此服务的, 在管理员权限的cmd下输入以下语句即可:Cmder.exe /REGISTER ALL...\,\author\:\tanjie-ola\,\words\:97,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-13-15.png\,\coverPathBase\:\/assets/2022-05-13-12-13-15\},{\text\:\ plupload中文文档整理\,\link\:\/posts/2020/2020-4-1-plupload/2020-4-1-plupload\,\frontmatter\:{\tag\:\plupload\,\cover\:\/2022-05-13-12-12-47.png\,\date\:\2020-04-01\,\base64\:\03a6e1\,\tinyCover\:\/cover/2022-05-13-12-12-47.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\a23d34\,\coverSecondary\:\5dc2cb\,\dir\:\/posts/2020/2020-4-1-plupload\,\title\:\ plupload中文文档整理\,\summary\:\plupload中文文档整理 项目中用到改上传插件，因此抽了一晚上事件把列子和文档看了一下，翻译过来，如有错误的翻译请帮助我一起纠正谢谢。介绍：Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。特性：注释：1、gears：http...\,\description\:\plupload中文文档整理 项目中用到改上传插件，因此抽了一晚上事件把列子和文档看了一下，翻译过来，如有错误的翻译请帮助我一起纠正谢谢。介绍：Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。特性：注释：1、gears：http...\,\author\:\tanjie-ola\,\words\:1286,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-13-12-12-47.png\,\coverPathBase\:\/assets/2022-05-13-12-12-47\},{\text\:\纪念司徒正美君\,\link\:\/posts/2020/2020-3-31-shituzhengmei/2020-3-31-shituzhengmei\,\frontmatter\:{\title\:\纪念司徒正美君\,\tag\:\javaScript\,\cover\:\/2022-05-13-12-11-54.png\,\date\:\2020-03-31\,\base64\:\ffffff\,\tinyCover\:\/cover/2022-05-13-12-11-54.png\,\coverWidth\:549,\coverHeight\:550,\coverPrimary\:\5f8f85\,\coverSecondary\:\a0707a\,\dir\:\/posts/2020/2020-3-31-shituzhengmei\,\summary\:\听闻司徒君离世的消息，悲痛万分！一颗前端巨星就此陨落。看着他的灰色头像不会再跳动，是什么 坠落 升空。在此借以犬夜叉的图片纪念司徒正美君呜呼哀哉!无名的生命之花 已惨遭摧残践踏一度坠地的飞鸟 正焦急以待风起一味埋头祈祷 却不会有任何改变若想有所改变 就请起而奋战吧踏过尸体前行的我们嘲笑这进击意志的猪猡啊家畜般的安宁 那虚伪的繁荣请赐予誓死之饿狼以自由！……——进击的巨人OP《红莲の弓矢》（转自司徒...\,\description\:\听闻司徒君离世的消息，悲痛万分！一颗前端巨星就此陨落。看着他的灰色头像不会再跳动，是什么 坠落 升空。在此借以犬夜叉的图片纪念司徒正美君呜呼哀哉!无名的生命之花 已惨遭摧残践踏一度坠地的飞鸟 正焦急以待风起一味埋头祈祷 却不会有任何改变若想有所改变 就请起而奋战吧踏过尸体前行的我们嘲笑这进击意志的猪猡啊家畜般的安宁 那虚伪的繁荣请赐予誓死之饿狼以自由！……——进击的巨人OP《红莲の弓矢》（转自司徒...\,\author\:\tanjie-ola\,\words\:188,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-11-54.png\,\coverPathBase\:\/assets/2022-05-13-12-11-54\},{\text\:\vuepress插件推荐\,\link\:\/posts/2020/2020-3-29-vuepress-plugin/2020-3-29-vuepress-plugin\,\frontmatter\:{\title\:\vuepress插件推荐\,\tag\:\vuepress\,\cover\:\/2022-05-13-12-10-40.png\,\hot\:true,\date\:\2020-03-29\,\base64\:\8341d2\,\tinyCover\:\/cover/2022-05-13-12-10-40.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\bfb0a6\,\coverSecondary\:\404f59\,\dir\:\/posts/2020/2020-3-29-vuepress-plugin\,\summary\:\个人插件推荐欢迎服用 star本文插件地址github地址vuepress-plugin-auto-front-matter该插件的作用平时我们在使用vuepree博客的时候会书写yaml格式的文章基本信息 如：title: 如何实现一个vuepress插件 author:Artiely tag: javaScript vuepressdate: 2020-3-29location: wuha...\,\description\:\个人插件推荐欢迎服用 star本文插件地址github地址vuepress-plugin-auto-front-matter该插件的作用平时我们在使用vuepree博客的时候会书写yaml格式的文章基本信息 如：title: 如何实现一个vuepress插件 author:Artiely tag: javaScript vuepressdate: 2020-3-29location: wuha...\,\author\:\tanjie-ola\,\words\:396,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-10-40.png\,\coverPathBase\:\/assets/2022-05-13-12-10-40\},{\text\:\vue中后台管理平台\,\link\:\/posts/2020/2020-3-20-antd-vue-pro/2020-3-20-antd-vue-pro\,\frontmatter\:{\title\:\vue中后台管理平台\,\tag\:\vue\,\author\:\Artiely\,\date\:\2020-03-20\,\cover\:\/2022-05-13-12-09-12.png\,\hot\:true,\base64\:\ffffff\,\tinyCover\:\/cover/2022-05-13-12-09-12.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\c4c8cd\,\coverSecondary\:\3b3732\,\dir\:\/posts/2020/2020-3-20-antd-vue-pro\,\summary\:\介绍 这是本人开源的一个基于vue和ant-design-vue的中后台管理平台，里面有一些技巧和思路希望能给你们带来灵感和帮助，可供学习和参考。 此项目从2019五月开源，期间间歇性更新，每有好的思路和想法都会慢慢地收集进来。可以持续关注。 github地址：https://github.com/artiely/vue-admin效果预览预览地址快速构建更新依赖npm i启动本地开发环境npm ...\,\description\:\介绍 这是本人开源的一个基于vue和ant-design-vue的中后台管理平台，里面有一些技巧和思路希望能给你们带来灵感和帮助，可供学习和参考。 此项目从2019五月开源，期间间歇性更新，每有好的思路和想法都会慢慢地收集进来。可以持续关注。 github地址：https://github.com/artiely/vue-admin效果预览预览地址快速构建更新依赖npm i启动本地开发环境npm ...\,\words\:722,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-13-12-09-12.png\,\coverPathBase\:\/assets/2022-05-13-12-09-12\},{\text\:\JavaScript 复习系列 之 JavaScript是如何工作的\,\link\:\/posts/2020/2020-3-20-js-how-to-work/2020-3-20-js-how-to-work\,\frontmatter\:{\title\:\JavaScript 复习系列 之 JavaScript是如何工作的\,\tag\:\javaScript\,\author\:\Artiley\,\cover\:\/2022-05-13-12-10-03.png\,\date\:\2020-03-20\,\hot\:true,\base64\:\f0db4f\,\tinyCover\:\/cover/2022-05-13-12-10-03.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\c4ccbc\,\coverSecondary\:\3b3343\,\dir\:\/posts/2020/2020-3-20-js-how-to-work\,\summary\:\2020年注定是个特殊的年份，随着新年的到来，新型冠状病毒也加快了蔓延的脚步。时至今日我们依然在家闭关。既然是闭关，那我也得修炼点什么啊。他来了！JavaScript！或简写js 其实本来想做出个什么高大上的产品出来的，计划是做一个桌面应用程序，大致包含博客的书写和自动发布，后面越想越不着边际不知从何下手。于是 决定重温一遍JavaScript。有夯实的基础就不怕铸造琼楼玉宇。在学习JavaS...\,\description\:\2020年注定是个特殊的年份，随着新年的到来，新型冠状病毒也加快了蔓延的脚步。时至今日我们依然在家闭关。既然是闭关，那我也得修炼点什么啊。他来了！JavaScript！或简写js 其实本来想做出个什么高大上的产品出来的，计划是做一个桌面应用程序，大致包含博客的书写和自动发布，后面越想越不着边际不知从何下手。于是 决定重温一遍JavaScript。有夯实的基础就不怕铸造琼楼玉宇。在学习JavaS...\,\words\:8149,\readTime\:\41 min read\},\coverPath\:\/assets/2022-05-13-12-10-03.png\,\coverPathBase\:\/assets/2022-05-13-12-10-03\},{\text\:\timer.js 介绍\,\link\:\/posts/2020/2020-3-19-timer.js/2020-3-19-timer.js\,\frontmatter\:{\title\:\timer.js 介绍\,\date\:\2020-03-19\,\cover\:\/2022-05-13-12-08-39.png\,\tag\:\timer.js\,\author\:\Artiely\,\base64\:\00040e\,\tinyCover\:\/cover/2022-05-13-12-08-39.png\,\coverWidth\:564,\coverHeight\:564,\coverPrimary\:\657674\,\coverSecondary\:\9a898b\,\dir\:\/posts/2020/2020-3-19-timer.js\,\summary\:\Timer.js 是一个简单而轻量的定时器管理库，并且无依赖。安装npm install timer.js使用示例制作披萨的倒计时import Timer from timer.jsconst pizzaTimer new Timer()const pizzaCookingTime 15 * 60 // 15 minutespizzaTimer.start(pizzaCookingTi...\,\description\:\Timer.js 是一个简单而轻量的定时器管理库，并且无依赖。安装npm install timer.js使用示例制作披萨的倒计时import Timer from timer.jsconst pizzaTimer new Timer()const pizzaCookingTime 15 * 60 // 15 minutespizzaTimer.start(pizzaCookingTi...\,\words\:260,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-08-39.png\,\coverPathBase\:\/assets/2022-05-13-12-08-39\},{\text\:\Electron 镜像下载慢的解决办法\,\link\:\/posts/2020/2020-3-18-electron-mirror-down/2020-3-18-electron-mirror-down\,\frontmatter\:{\title\:\Electron 镜像下载慢的解决办法\,\tag\:\electron\,\author\:\Artiely\,\date\:\2020-03-18\,\cover\:\/2022-05-13-12-07-10.png\,\base64\:\2e7bd7\,\tinyCover\:\/cover/2022-05-13-12-07-10.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\d8bfa3\,\coverSecondary\:\27405c\,\dir\:\/posts/2020/2020-3-18-electron-mirror-down\,\summary\:\因为 Electron 的源在国外，如果我们直接使用 npm 进行安装，由于众所周知的原因，如果你没有一个好的梯子，通常下载速度只有几 k 到十几 k的速度。如图：运气非常好时，可能能跑到100多k。而这个包有差不多 50MB，可想而知，如果是以几k的龟速，不知道要下载到猴年马月。将npm包下载地址改为淘宝地址全局设置下载源npm config set registry https://npm.t...\,\description\:\因为 Electron 的源在国外，如果我们直接使用 npm 进行安装，由于众所周知的原因，如果你没有一个好的梯子，通常下载速度只有几 k 到十几 k的速度。如图：运气非常好时，可能能跑到100多k。而这个包有差不多 50MB，可想而知，如果是以几k的龟速，不知道要下载到猴年马月。将npm包下载地址改为淘宝地址全局设置下载源npm config set registry https://npm.t...\,\words\:187,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-07-10.png\,\coverPathBase\:\/assets/2022-05-13-12-07-10\},{\text\:\Electron 自动更新\,\link\:\/posts/2020/2020-3-18-electron-updater/2020-3-18-electron-updater\,\frontmatter\:{\title\:\Electron 自动更新\,\tag\:\electron\,\vue\,\date\:\2020-03-18\,\cover\:\/2022-05-13-12-08-06.png\,\author\:\Artiely\,\base64\:\127a53\,\tinyCover\:\/cover/2022-05-13-12-08-06.png\,\coverWidth\:563,\coverHeight\:769,\coverPrimary\:\d1cdc1\,\coverSecondary\:\2e323e\,\dir\:\/posts/2020/2020-3-18-electron-updater\,\summary\:\从0实现一个electron自动更新的最小demo本实例基于vue，不使用vue也大同小异，目的只是在后期更加的方便使用组件库，有差异的地方我会指出。初始化一个vue项目初始化项目，前面的vue脚手架环境安装忽略vue create electron-updater-demo中间的流程略cd electron-updater-demonpm i安装 electron-builder 插件vue a...\,\description\:\从0实现一个electron自动更新的最小demo本实例基于vue，不使用vue也大同小异，目的只是在后期更加的方便使用组件库，有差异的地方我会指出。初始化一个vue项目初始化项目，前面的vue脚手架环境安装忽略vue create electron-updater-demo中间的流程略cd electron-updater-demonpm i安装 electron-builder 插件vue a...\,\words\:922,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-08-06.png\,\coverPathBase\:\/assets/2022-05-13-12-08-06\},{\text\:\让你的chrome如虎添翼\,\link\:\/posts/2020/2020-3-16-chrome-plugin/2020-3-16-chrome-plugin\,\frontmatter\:{\title\:\让你的chrome如虎添翼\,\tag\:\chrome\,\author\:\Artiely\,\cover\:\/2022-05-13-12-05-35.png\,\date\:\2020-03-16\,\base64\:\3488fd\,\tinyCover\:\/cover/2022-05-13-12-05-35.png\,\coverWidth\:564,\coverHeight\:798,\coverPrimary\:\2a0e3a\,\coverSecondary\:\d5f1c5\,\dir\:\/posts/2020/2020-3-16-chrome-plugin\,\summary\:\谷歌访问助手大多数情况下我们是无法访问谷歌的，所以我们先下载一个谷歌访问助手帮助我们访问谷歌应用商店，这是一个破解版。正版也是可以免费使用的，但是他会修改你的主页并且强制绑定。所以有点脾气的都忍不了。如图我们下载下来可以直接点击就安装了。如果安装失败，将下载包复制到一个指定的文件夹，重命名并解压。你也可以放在默认路径下，下图是如何查看路径解压后可以删除压缩包现在就可以访问谷歌商店了，当然你也可以使...\,\description\:\谷歌访问助手大多数情况下我们是无法访问谷歌的，所以我们先下载一个谷歌访问助手帮助我们访问谷歌应用商店，这是一个破解版。正版也是可以免费使用的，但是他会修改你的主页并且强制绑定。所以有点脾气的都忍不了。如图我们下载下来可以直接点击就安装了。如果安装失败，将下载包复制到一个指定的文件夹，重命名并解压。你也可以放在默认路径下，下图是如何查看路径解压后可以删除压缩包现在就可以访问谷歌商店了，当然你也可以使...\,\words\:568,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-05-35.png\,\coverPathBase\:\/assets/2022-05-13-12-05-35\},{\text\:\ 如何使你的vscode更好用\,\link\:\/posts/2020/2020-3-16-vscode-plugin/2020-3-16-vscode-plugin\,\frontmatter\:{\tag\:\vscode\,\author\:\Artiely\,\cover\:\/2022-05-13-12-06-13.png\,\date\:\2020-03-16\,\base64\:\7cbde7\,\tinyCover\:\/cover/2022-05-13-12-06-13.png\,\coverWidth\:563,\coverHeight\:1000,\coverPrimary\:\361c3b\,\coverSecondary\:\c9e3c4\,\dir\:\/posts/2020/2020-3-16-vscode-plugin\,\title\:\ 如何使你的vscode更好用\,\summary\:\如何使你的vscode更好用VS Code 写代码是真好用、真爽、真香！想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中，VS Code 也是以压倒性的优势获胜第一，其他的编辑器只能被无情碾压在地上摩擦……但是呢，VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的，需要额外安装一些插件、掌握一些快捷键和技巧，才能顺手的用起来。我花了一点时间，为你整理了可...\,\description\:\如何使你的vscode更好用VS Code 写代码是真好用、真爽、真香！想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中，VS Code 也是以压倒性的优势获胜第一，其他的编辑器只能被无情碾压在地上摩擦……但是呢，VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的，需要额外安装一些插件、掌握一些快捷键和技巧，才能顺手的用起来。我花了一点时间，为你整理了可...\,\words\:751,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-13-12-06-13.png\,\coverPathBase\:\/assets/2022-05-13-12-06-13\},{\text\:\windows 好用的软件推荐\,\link\:\/posts/2020/2020-3-16-windows-plugin/2020-3-16-windows-plugin\,\frontmatter\:{\title\:\windows 好用的软件推荐\,\tag\:\windows\,\cover\:\/2022-05-13-12-06-40.png\,\date\:\2020-03-16\,\base64\:\3260d0\,\tinyCover\:\/cover/2022-05-13-12-06-40.png\,\coverWidth\:736,\coverHeight\:981,\coverPrimary\:\494e38\,\coverSecondary\:\b6b1c7\,\dir\:\/posts/2020/2020-3-16-windows-plugin\,\summary\:\wox应用管理新体验。ctrl+space(空格)官网picgo图片管理新体验官网typoramarkdown书写新体验官网并且typora可以和picgo配合使用，让md的图片更好的管理。待续....\,\description\:\wox应用管理新体验。ctrl+space(空格)官网picgo图片管理新体验官网typoramarkdown书写新体验官网并且typora可以和picgo配合使用，让md的图片更好的管理。待续....\,\author\:\tanjie-ola\,\words\:67,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-06-40.png\,\coverPathBase\:\/assets/2022-05-13-12-06-40\},{\text\:\nodejs核心api\,\link\:\/posts/2019/2019-11-16-nodejs-api\,\frontmatter\:{\title\:\nodejs核心api\,\tag\:\nodejs\,\author\:\Artiely\,\date\:\2019-11-16\,\cover\:\/2022-05-14-22-06-30.png\,\base64\:\fee200\,\tinyCover\:\/cover/2022-05-14-22-06-30.png\,\coverWidth\:564,\coverHeight\:564,\coverPrimary\:\c5bdb3\,\coverSecondary\:\3a424c\,\dir\:\/posts/2019\,\summary\:\nodejs核心api目标理解nodejs常用核心api加深对nodejs设计思想的理解核心apiBuffer在引入 TypedArray 之前，JavaScript 语言没有用于读取或操作二进制数据流的机制。 Buffer 类是作为 Node.js API 的一部分引入的，用于在 TCP 流、文件系统操作、以及其他上下文中与八位字节流进行交互。现在可以使用 TypedArray， Buffer ...\,\description\:\nodejs核心api目标理解nodejs常用核心api加深对nodejs设计思想的理解核心apiBuffer在引入 TypedArray 之前，JavaScript 语言没有用于读取或操作二进制数据流的机制。 Buffer 类是作为 Node.js API 的一部分引入的，用于在 TCP 流、文件系统操作、以及其他上下文中与八位字节流进行交互。现在可以使用 TypedArray， Buffer ...\,\words\:8701,\readTime\:\44 min read\},\coverPath\:\/assets/2022-05-14-22-06-30.png\,\coverPathBase\:\/assets/2022-05-14-22-06-30\},{\text\:\Nodejs通用业务模块\,\link\:\/posts/2019/2019-10-27-node-pm2\,\frontmatter\:{\title\:\Nodejs通用业务模块\,\tag\:\nodejs\,\daemon\,\shell\,\pm2\,\forever\,\egg\,\npm link\,\author\:\Artiely\,\date\:\2019-10-27\,\cover\:\/2022-05-14-22-06-07.png\,\base64\:\2c3033\,\tinyCover\:\/cover/2022-05-14-22-06-07.png\,\coverWidth\:640,\coverHeight\:1136,\coverPrimary\:\343d45\,\coverSecondary\:\cbc2ba\,\dir\:\/posts/2019\,\summary\:\Nodejs进程守护目标理解什么是进程守护理解为什么nodejs服务需要进程守护从源码理解Egg对进程守护的处理进程守护守护进程，也即通常所说的 Daemon 进程，是 Linux 下一种特殊的后台服务进程，它独立于控制终端并且周期性的执行某种任务或者等待处理某些发生的事件。守护进程通常在系统引导时启动，在系统关闭时终止。Linux 系统下大多数服务都是通过守护进程实现的。守护进程的名称通常以 d...\,\description\:\Nodejs进程守护目标理解什么是进程守护理解为什么nodejs服务需要进程守护从源码理解Egg对进程守护的处理进程守护守护进程，也即通常所说的 Daemon 进程，是 Linux 下一种特殊的后台服务进程，它独立于控制终端并且周期性的执行某种任务或者等待处理某些发生的事件。守护进程通常在系统引导时启动，在系统关闭时终止。Linux 系统下大多数服务都是通过守护进程实现的。守护进程的名称通常以 d...\,\words\:3051,\readTime\:\16 min read\},\coverPath\:\/assets/2022-05-14-22-06-07.png\,\coverPathBase\:\/assets/2022-05-14-22-06-07\},{\text\:\Nodejs通用业务模块\,\link\:\/posts/2019/2019-10-3-alinode\,\frontmatter\:{\title\:\Nodejs通用业务模块\,\tag\:\nodejs\,\alinode\,\author\:\Artiely\,\date\:\2019-10-03\,\cover\:\/2022-05-14-22-05-45.png\,\base64\:\9ae3a9\,\tinyCover\:\/cover/2022-05-14-22-05-45.png\,\coverWidth\:736,\coverHeight\:1308,\coverPrimary\:\070707\,\coverSecondary\:\f8f8f8\,\dir\:\/posts/2019\,\summary\:\Nodejs通用业务模块目标了解nodejs的生态与未来理解alinode监控体系的应用场景与使用理解nodejs在云原生应用领域的生态与发展why知己知彼，百战不殆开阔技术视野，技术的提升不能仅仅停留在crud领域nodejs之生态2019年前端，选择Nodejs 还是 PHP？观点：作为前端玩一玩可以学nodejs，真正的后端还是选择php未来语言不重要，nodejs必有一席之地https:/...\,\description\:\Nodejs通用业务模块目标了解nodejs的生态与未来理解alinode监控体系的应用场景与使用理解nodejs在云原生应用领域的生态与发展why知己知彼，百战不殆开阔技术视野，技术的提升不能仅仅停留在crud领域nodejs之生态2019年前端，选择Nodejs 还是 PHP？观点：作为前端玩一玩可以学nodejs，真正的后端还是选择php未来语言不重要，nodejs必有一席之地https:/...\,\words\:1833,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-14-22-05-45.png\,\coverPathBase\:\/assets/2022-05-14-22-05-45\},{\text\:\NoSQL数据库\,\link\:\/posts/2019/2019-8-14-nosql\,\frontmatter\:{\title\:\NoSQL数据库\,\tag\:\redis\,\memcached\,\mongoDb\,\author\:\Artiely\,\date\:\2019-08-14\,\cover\:\/2022-05-14-22-05-01.png\,\base64\:\323d47\,\tinyCover\:\/cover/2022-05-14-22-05-01.png\,\coverWidth\:564,\coverHeight\:752,\coverPrimary\:\4f7774\,\coverSecondary\:\b0888b\,\dir\:\/posts/2019\,\summary\:\NoSQL数据库介绍主要内容Redis开发与实战**(内存型)Memcached入门**(内存型)MongoDb入门(存储型)redis和memcached是同一类型，内存型。MongoDb是存储型。着重讲解redis,存储性数据库还是mysql的天下。学习目标掌握非关系性数据库的特点以及使用掌握NoSQL 技术在实际开发中的应用NoSQL主要应用场景专门应对高并发，需要高速读写的场景，而就Red...\,\description\:\NoSQL数据库介绍主要内容Redis开发与实战**(内存型)Memcached入门**(内存型)MongoDb入门(存储型)redis和memcached是同一类型，内存型。MongoDb是存储型。着重讲解redis,存储性数据库还是mysql的天下。学习目标掌握非关系性数据库的特点以及使用掌握NoSQL 技术在实际开发中的应用NoSQL主要应用场景专门应对高并发，需要高速读写的场景，而就Red...\,\words\:18684,\readTime\:\94 min read\},\coverPath\:\/assets/2022-05-14-22-05-01.png\,\coverPathBase\:\/assets/2022-05-14-22-05-01\},{\text\:\ 自动化测试\,\link\:\/posts/2019/2019-7-13-automated-testing\,\frontmatter\:{\tag\:\mocha\,\jest\,\AVA\,\karma\,\nightmare\,\author\:\Artiely\,\date\:\2019-07-13\,\cover\:\/2022-05-14-22-04-40.png\,\base64\:\00a1d8\,\tinyCover\:\/cover/2022-05-14-22-04-40.png\,\coverWidth\:564,\coverHeight\:960,\coverPrimary\:\3b3938\,\coverSecondary\:\c4c6c7\,\dir\:\/posts/2019\,\title\:\ 自动化测试\,\summary\:\自动化测试介绍在前端界，浏览器兼容性是让工程师们头疼的问题，对于经验丰富的人来说，很清楚浏览器有哪些坑，但是对于大部分程序员，最可怕的是代码明明在这个浏览器运行得很好，但是到了另一个浏览器中就不能正常运行了。对于这部分的程序员，保障代码能正常运行的方法便是能尽早发现问题，然后将其解决。为什么需要自动化测试？项目经过不断的开发，最终肯定会趋于稳定，在适当的时机下引入自动化测试能及早发现问题，保证产品...\,\description\:\自动化测试介绍在前端界，浏览器兼容性是让工程师们头疼的问题，对于经验丰富的人来说，很清楚浏览器有哪些坑，但是对于大部分程序员，最可怕的是代码明明在这个浏览器运行得很好，但是到了另一个浏览器中就不能正常运行了。对于这部分的程序员，保障代码能正常运行的方法便是能尽早发现问题，然后将其解决。为什么需要自动化测试？项目经过不断的开发，最终肯定会趋于稳定，在适当的时机下引入自动化测试能及早发现问题，保证产品...\,\words\:5654,\readTime\:\29 min read\},\coverPath\:\/assets/2022-05-14-22-04-40.png\,\coverPathBase\:\/assets/2022-05-14-22-04-40\},{\text\:\android studio flutter 之快捷键\,\link\:\/posts/2019/2019-7-6-android-studio-flutter-shortcut\,\frontmatter\:{\title\:\android studio flutter 之快捷键\,\tag\:\dart\,\flutter\,\android studio\,\author\:\Artiely\,\date\:\2019-07-06\,\cover\:\/2022-05-14-22-03-53.png\,\base64\:\135bd0\,\tinyCover\:\/cover/2022-05-14-22-03-53.png\,\coverWidth\:563,\coverHeight\:797,\coverPrimary\:\c6c6c7\,\coverSecondary\:\393938\,\dir\:\/posts/2019\,\summary\:\android studio flutter 之快捷键创建新的StatelessWidget或者StatefulWidget我们不必手动去编写继承StatelessWidget或者StatefulWidget并重写build()方法。IDE已经提供了相应的快捷键。只需要输出stless就可以创建一个StatelessWidget。或者输入stful创建一个StatefulWidget。如果一开始我...\,\description\:\android studio flutter 之快捷键创建新的StatelessWidget或者StatefulWidget我们不必手动去编写继承StatelessWidget或者StatefulWidget并重写build()方法。IDE已经提供了相应的快捷键。只需要输出stless就可以创建一个StatelessWidget。或者输入stful创建一个StatefulWidget。如果一开始我...\,\words\:1224,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-14-22-03-53.png\,\coverPathBase\:\/assets/2022-05-14-22-03-53\},{\text\:\Dart,flutter相关环境\,\link\:\/posts/2019/2019-7-6-dart-flutter-conf\,\frontmatter\:{\title\:\Dart,flutter相关环境\,\tag\:\dart\,\flutter\,\author\:\Artiely\,\date\:\2019-07-06\,\cover\:\/2022-05-14-22-04-15.png\,\base64\:\0271e2\,\tinyCover\:\/cover/2022-05-14-22-04-15.png\,\coverWidth\:563,\coverHeight\:797,\coverPrimary\:\372720\,\coverSecondary\:\c8d8df\,\dir\:\/posts/2019\,\summary\:\Dart介绍：Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。Dart诞生于2011年，号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。要学Flutter的话我们必须首先得会Dart。官网：https://dart.dev/Dart环境搭建：要在我们本地开发Dart程序的话首先需要安装Dar...\,\description\:\Dart介绍：Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。Dart诞生于2011年，号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。要学Flutter的话我们必须首先得会Dart。官网：https://dart.dev/Dart环境搭建：要在我们本地开发Dart程序的话首先需要安装Dar...\,\words\:979,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-22-04-15.png\,\coverPathBase\:\/assets/2022-05-14-22-04-15\},{\text\:\ 项目质量监测\,\link\:\/posts/2019/2019-6-27-eslint-test\,\frontmatter\:{\tag\:\eslint\,\e2e\,\codecov\,\author\:\Artiely\,\date\:\2019-06-27\,\cover\:\/2022-05-14-22-03-31.png\,\base64\:\0e01c9\,\tinyCover\:\/cover/2022-05-14-22-03-31.png\,\coverWidth\:736,\coverHeight\:1310,\coverPrimary\:\05395a\,\coverSecondary\:\fac6a5\,\dir\:\/posts/2019\,\title\:\ 项目质量监测\,\summary\:\项目质量监测介绍没有规矩不成方圆，所以我们写代码也要有\\\规矩\\\，但是我们通常记不住所有的\\\规矩\\\，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。通常来说，项目的质量决定了：软件项目的命运软件项目的可维护性软件项目的运维成本软件项目的扩展性为什么要进行代码质量检查？代码检查很重要，原因有三：避免低级bug：...\,\description\:\项目质量监测介绍没有规矩不成方圆，所以我们写代码也要有\\\规矩\\\，但是我们通常记不住所有的\\\规矩\\\，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。通常来说，项目的质量决定了：软件项目的命运软件项目的可维护性软件项目的运维成本软件项目的扩展性为什么要进行代码质量检查？代码检查很重要，原因有三：避免低级bug：...\,\words\:5659,\readTime\:\29 min read\},\coverPath\:\/assets/2022-05-14-22-03-31.png\,\coverPathBase\:\/assets/2022-05-14-22-03-31\},{\text\:\前端性能优化\,\link\:\/posts/2019/2019-6-19-fontend-performance-optimization\,\frontmatter\:{\title\:\前端性能优化\,\tag\:\SEO\,\http\,\CDN\,\author\:\Artiely\,\date\:\2019-06-19\,\cover\:\/2022-05-14-22-03-09.png\,\base64\:\1d212c\,\tinyCover\:\/cover/2022-05-14-22-03-09.png\,\coverWidth\:564,\coverHeight\:838,\coverPrimary\:\2e2a31\,\coverSecondary\:\d1d5ce\,\dir\:\/posts/2019\,\summary\:\前端性能优化介绍任何小型企业，博主或成长型公司在网上出现时面临的最大挑战之一就是“页面加载时间”问题。除非您能确保尽可能快速无缝地加载每个页面，您才可以拥有世界上最好最引人注目的网站，否则您仍然无法赢得关注者的尊重和忠诚度。根据当今网络上的所有主要浏览器公司的说法，如果每个网站都想要排名靠前，表现良好并确保客户满意，那么每个网站都需要快。毕竟，如果您的网页加载速度很慢，那么您会立即增加客户开始在其...\,\description\:\前端性能优化介绍任何小型企业，博主或成长型公司在网上出现时面临的最大挑战之一就是“页面加载时间”问题。除非您能确保尽可能快速无缝地加载每个页面，您才可以拥有世界上最好最引人注目的网站，否则您仍然无法赢得关注者的尊重和忠诚度。根据当今网络上的所有主要浏览器公司的说法，如果每个网站都想要排名靠前，表现良好并确保客户满意，那么每个网站都需要快。毕竟，如果您的网页加载速度很慢，那么您会立即增加客户开始在其...\,\words\:19728,\readTime\:\99 min read\},\coverPath\:\/assets/2022-05-14-22-03-09.png\,\coverPathBase\:\/assets/2022-05-14-22-03-09\},{\text\:\持续集成与持续部署\,\link\:\/posts/2019/2019-6-12-deploy\,\frontmatter\:{\title\:\持续集成与持续部署\,\tag\:\circleCI\,\jenkins\,\travisCI\,\author\:\Artiely\,\date\:\2019-06-12\,\cover\:\/2022-05-14-22-02-45.png\,\base64\:\f8f8f8\,\tinyCover\:\/cover/2022-05-14-22-02-45.png\,\coverWidth\:736,\coverHeight\:933,\coverPrimary\:\d3c6c2\,\coverSecondary\:\2c393d\,\dir\:\/posts/2019\,\summary\:\持续集成与持续部署介绍那些大厂们，天天DevOps、持续集成的？到底在讲些什么？给你揭开持续集成与持续部署的面纱！！没有什么难的，盘它！传统的开发过程中的坑：BUG总是在最后才发现越到项目后期，加班越严重交付无法保障变更频繁导致效率低下无效的等待多，用户满足度低img你有没有想过/用过？当你哪一天...不用为开发/测试环境不一致而苦恼不用麻烦运维人员帮忙调试环境不用手动进行测试，模拟环境中进行自测...\,\description\:\持续集成与持续部署介绍那些大厂们，天天DevOps、持续集成的？到底在讲些什么？给你揭开持续集成与持续部署的面纱！！没有什么难的，盘它！传统的开发过程中的坑：BUG总是在最后才发现越到项目后期，加班越严重交付无法保障变更频繁导致效率低下无效的等待多，用户满足度低img你有没有想过/用过？当你哪一天...不用为开发/测试环境不一致而苦恼不用麻烦运维人员帮忙调试环境不用手动进行测试，模拟环境中进行自测...\,\words\:12227,\readTime\:\62 min read\},\coverPath\:\/assets/2022-05-14-22-02-45.png\,\coverPathBase\:\/assets/2022-05-14-22-02-45\},{\text\:\css实现左边固定宽右边自适应\,\link\:\/posts/2019/2019-6-6-css-fixedleft-autoright\,\frontmatter\:{\title\:\css实现左边固定宽右边自适应\,\tag\:\css\,\author\:\Artiely\,\date\:\2019-06-06\,\cover\:\/2022-05-14-22-02-04.png\,\base64\:\76c9e8\,\tinyCover\:\/cover/2022-05-14-22-02-04.png\,\coverWidth\:736,\coverHeight\:1308,\coverPrimary\:\0e141d\,\coverSecondary\:\f1ebe2\,\dir\:\/posts/2019\,\summary\:\show turnsshow you the code Document .wrapper { background: #eee; } .left { background: red; width: 100px; } .right { background: yellow; }...\,\description\:\show turnsshow you the code Document .wrapper { background: #eee; } .left { background: red; width: 100px; } .right { background: yellow; }...\,\words\:341,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-22-02-04.png\,\coverPathBase\:\/assets/2022-05-14-22-02-04\},{\text\:\vue observable api 初应用\,\link\:\/posts/2019/2019-6-6-vue-observable\,\frontmatter\:{\title\:\vue observable api 初应用\,\tag\:\vue\,\observable\,\author\:\Artiely\,\date\:\2019-06-06\,\cover\:\/2022-05-14-22-02-24.png\,\base64\:404040,\tinyCover\:\/cover/2022-05-14-22-02-24.png\,\coverWidth\:735,\coverHeight\:1040,\coverPrimary\:\e5d5d4\,\coverSecondary\:\1a2a2b\,\dir\:\/posts/2019\,\summary\:\vue 列表的按需刷新在vue 2.6.0 新增了一个api observable 可实现全局的数据相应，一定程度上可以取代vuex所以我在项目中第一次使用了他，我们的业务场景是这样的，一个订单列表，可以无限下拉，假如：我下拉了 3 页，点击一个订单可以进入详情，在详情里可以改变订单的状态，但是从详情返回的时候列表应该刷新到第一页才能看到状态的改变【前提是后端排序是按更新时间】，但也不能每次从详情...\,\description\:\vue 列表的按需刷新在vue 2.6.0 新增了一个api observable 可实现全局的数据相应，一定程度上可以取代vuex所以我在项目中第一次使用了他，我们的业务场景是这样的，一个订单列表，可以无限下拉，假如：我下拉了 3 页，点击一个订单可以进入详情，在详情里可以改变订单的状态，但是从详情返回的时候列表应该刷新到第一页才能看到状态的改变【前提是后端排序是按更新时间】，但也不能每次从详情...\,\words\:679,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-22-02-24.png\,\coverPathBase\:\/assets/2022-05-14-22-02-24\},{\text\:\容器化运维操作\,\link\:\/posts/2019/2019-6-4-docker\,\frontmatter\:{\title\:\容器化运维操作\,\tag\:\docker\,\moby\,\author\:\Artiely\,\date\:\2019-06-04\,\cover\:\/2022-05-14-22-01-22.png\,\base64\:\2db1f0\,\tinyCover\:\/cover/2022-05-14-22-01-22.png\,\coverWidth\:597,\coverHeight\:900,\coverPrimary\:\bbd3c5\,\coverSecondary\:\442c3a\,\dir\:\/posts/2019\,\summary\:\容器化运维操作日趋复杂的运维开发环境，对虚拟服务器及应用服务的要求更加的多元化。我们需要更加容易扩展、性能优越、方便监控的管理服务，容器化应用、容器化运维应运而生。【知己知彼】你将学习到：理解/安装docker容器技术秒级快速部署mysql、nginx、tomcat等服务使用容器技术发布nodejs应用…【工欲善其事，必先利其器】你需要准备的环境（三选一）：Linux环境(Centos 7以上/D...\,\description\:\容器化运维操作日趋复杂的运维开发环境，对虚拟服务器及应用服务的要求更加的多元化。我们需要更加容易扩展、性能优越、方便监控的管理服务，容器化应用、容器化运维应运而生。【知己知彼】你将学习到：理解/安装docker容器技术秒级快速部署mysql、nginx、tomcat等服务使用容器技术发布nodejs应用…【工欲善其事，必先利其器】你需要准备的环境（三选一）：Linux环境(Centos 7以上/D...\,\words\:4985,\readTime\:\25 min read\},\coverPath\:\/assets/2022-05-14-22-01-22.png\,\coverPathBase\:\/assets/2022-05-14-22-01-22\},{\text\:\nodejs事件循环与多进程\,\link\:\/posts/2019/2019-6-4-nodejs-events\,\frontmatter\:{\title\:\nodejs事件循环与多进程\,\tag\:\events\,\cluster\,\macrotask\,\microtask\,\author\:\Artiely\,\date\:\2019-06-04\,\cover\:\/2022-05-14-22-01-43.png\,\base64\:\32332b\,\tinyCover\:\/cover/2022-05-14-22-01-43.png\,\coverWidth\:675,\coverHeight\:1200,\coverPrimary\:\2b251f\,\coverSecondary\:\d4dae0\,\dir\:\/posts/2019\,\summary\:\nodejs事件循环与多进程介绍了解事件循环的概念学习浏览器中的事件循环机制学习nodejs中的事件循环机制了解多进程，多线程之间的区别学习nodejs中的多进程并使用cluster来开启多进程目标深入掌握浏览器与nodejs中的事件循环机制，并且能理解它们之间的区别使用cluster开启多进程第一章 事件循环介绍浏览器中的事件循环为了协调事件（event），用户交互（user interacti...\,\description\:\nodejs事件循环与多进程介绍了解事件循环的概念学习浏览器中的事件循环机制学习nodejs中的事件循环机制了解多进程，多线程之间的区别学习nodejs中的多进程并使用cluster来开启多进程目标深入掌握浏览器与nodejs中的事件循环机制，并且能理解它们之间的区别使用cluster开启多进程第一章 事件循环介绍浏览器中的事件循环为了协调事件（event），用户交互（user interacti...\,\words\:6828,\readTime\:\35 min read\},\coverPath\:\/assets/2022-05-14-22-01-43.png\,\coverPathBase\:\/assets/2022-05-14-22-01-43\},{\text\:\Linux 服务器\,\link\:\/posts/2019/2019-6-1-linux\,\frontmatter\:{\title\:\Linux 服务器\,\tag\:\linux\,\centOS\,\nginx\,\author\:\Artiely\,\date\:\2019-06-01\,\cover\:\/2022-05-14-22-01-02.png\,\base64\:16517,\tinyCover\:\/cover/2022-05-14-22-01-02.png\,\coverWidth\:564,\coverHeight\:743,\coverPrimary\:\3f3630\,\coverSecondary\:\c0c9cf\,\dir\:\/posts/2019\,\summary\:\Linux 服务器Linux是操作系统：Linux作为自由软件和开放源代码软件发展中最著名的例子，背靠社区与商业化的使用，使其得到了广泛的应用与发展。Linux无处不在：世界上500个最快的超级计算机90％以上运行Linux发行版或变种，包括最快的前10名超级计算机运行的都是基于Linux内核的操作系统。Linux也广泛应用在嵌入式系统上，如手机（Mobile Phone）、平板电脑（Tablet...\,\description\:\Linux 服务器Linux是操作系统：Linux作为自由软件和开放源代码软件发展中最著名的例子，背靠社区与商业化的使用，使其得到了广泛的应用与发展。Linux无处不在：世界上500个最快的超级计算机90％以上运行Linux发行版或变种，包括最快的前10名超级计算机运行的都是基于Linux内核的操作系统。Linux也广泛应用在嵌入式系统上，如手机（Mobile Phone）、平板电脑（Tablet...\,\words\:12020,\readTime\:\61 min read\},\coverPath\:\/assets/2022-05-14-22-01-02.png\,\coverPathBase\:\/assets/2022-05-14-22-01-02\},{\text\:\ vue-admin\,\link\:\/posts/2019/2019-5-15-vue-admin\,\frontmatter\:{\tag\:\vue\,\javaScript\,\date\:\2019-05-15\,\cover\:\/2022-05-14-22-00-24.png\,\summary\:\基于and-design-vue的vue后台管理系统模板\,\tinyCover\:\/cover/2022-05-14-22-00-24.png\,\coverWidth\:450,\coverHeight\:800,\coverPrimary\:\0f0f0f\,\coverSecondary\:\f0f0f0\,\dir\:\/posts/2019\,\title\:\ vue-admin\,\author\:\tanjie-ola\,\words\:603,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-22-00-24.png\,\coverPathBase\:\/assets/2022-05-14-22-00-24\},{\text\:\GraphQL 介绍\,\link\:\/posts/2019/2019-5-5-restful-graphql\,\frontmatter\:{\title\:\GraphQL 介绍\,\tag\:\graphQL\,\RESTful\,\author\:\Artiely\,\date\:\2019-05-05\,\cover\:\/2022-05-14-22-00-00.png\,\base64\:16932,\tinyCover\:\/cover/2022-05-14-22-00-00.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\2a1c16\,\coverSecondary\:\d5e3e9\,\dir\:\/posts/2019\,\summary\:\GraphQL 介绍接口开发方式RESTfulGraphQLRESTful 接口问题接口粒度比较细，很多场景需要调用多次请求才能完成一个功能接口扩展、维护成本高接口响应的数据格式无法预知（json已经成为主流格式）GraphQL概述GraphQL 既是一种用于 API 的查询语言，也是一个满足你数据查询的运行时。是一种接口开发标准，支持常见的服务端开发语言。例如：java、php、Python、N...\,\description\:\GraphQL 介绍接口开发方式RESTfulGraphQLRESTful 接口问题接口粒度比较细，很多场景需要调用多次请求才能完成一个功能接口扩展、维护成本高接口响应的数据格式无法预知（json已经成为主流格式）GraphQL概述GraphQL 既是一种用于 API 的查询语言，也是一个满足你数据查询的运行时。是一种接口开发标准，支持常见的服务端开发语言。例如：java、php、Python、N...\,\words\:3628,\readTime\:\19 min read\},\coverPath\:\/assets/2022-05-14-22-00-00.png\,\coverPathBase\:\/assets/2022-05-14-22-00-00\},{\text\:\Vuecli3+发布组件库到npm\,\link\:\/posts/2019/2019-4-16-vue-cli3+to-plugin\,\frontmatter\:{\title\:\Vuecli3+发布组件库到npm\,\tag\:\vue-cli\,\vue\,\npm\,\cover\:\/2022-05-14-21-59-39.png\,\date\:\2019-04-16\,\base64\:\ca3838\,\tinyCover\:\/cover/2022-05-14-21-59-39.png\,\coverWidth\:658,\coverHeight\:1170,\coverPrimary\:\2e2c2b\,\coverSecondary\:\d1d3d4\,\dir\:\/posts/2019\,\summary\:\Vuecli3+发布组件库到npm创建项目vue create my-plugin调整目录我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。|-- src|-- packages // 新增 packages 用于编写存放组件配置项目以支持新的目录结构我们通过上一步的目录改造后，会遇到两个问题。新增packages目录，该目录未加入webpack编译新增packag...\,\description\:\Vuecli3+发布组件库到npm创建项目vue create my-plugin调整目录我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。|-- src|-- packages // 新增 packages 用于编写存放组件配置项目以支持新的目录结构我们通过上一步的目录改造后，会遇到两个问题。新增packages目录，该目录未加入webpack编译新增packag...\,\author\:\tanjie-ola\,\words\:1475,\readTime\:\8 min read\},\coverPath\:\/assets/2022-05-14-21-59-39.png\,\coverPathBase\:\/assets/2022-05-14-21-59-39\},{\text\:\Node.js 网络通信\,\link\:\/posts/2019/2019-4-15-nodejs-tcp-udp-h2\,\frontmatter\:{\title\:\Node.js 网络通信\,\tag\:\TCP\,\UDP\,\http\,\https\,\author\:\Artiely\,\date\:\2019-04-15\,\cover\:\/2022-05-14-21-59-17.png\,\base64\:\0755a2\,\tinyCover\:\/cover/2022-05-14-21-59-17.png\,\coverWidth\:564,\coverHeight\:1003,\coverPrimary\:\9a8f85\,\coverSecondary\:\65707a\,\dir\:\/posts/2019\,\summary\:\Node.js 网络通信Node 是一个面向网络而生的平台，它具有事件驱动、无阻塞、单线程等特性，具备良好的可伸缩性，使得它十分轻量，适合在分布式网络中扮演各种各样的角色。同时 Node 提供的 API 十分贴合网络，适合用它基础的 API 构建灵活的网络服务。就是给大家介绍 Node 在网络通信编程方面的具体能力。利用 Node 可以十分方便的搭建网络服务器。在 Web 领域，大多数的编程语言需...\,\description\:\Node.js 网络通信Node 是一个面向网络而生的平台，它具有事件驱动、无阻塞、单线程等特性，具备良好的可伸缩性，使得它十分轻量，适合在分布式网络中扮演各种各样的角色。同时 Node 提供的 API 十分贴合网络，适合用它基础的 API 构建灵活的网络服务。就是给大家介绍 Node 在网络通信编程方面的具体能力。利用 Node 可以十分方便的搭建网络服务器。在 Web 领域，大多数的编程语言需...\,\words\:8831,\readTime\:\45 min read\},\coverPath\:\/assets/2022-05-14-21-59-17.png\,\coverPathBase\:\/assets/2022-05-14-21-59-17\},{\text\:\记sentry配置sourcemap后的优化\,\link\:\/posts/2019/2019-4-3-sentry-sourcemap\,\frontmatter\:{\title\:\记sentry配置sourcemap后的优化\,\tag\:\vue\,\sentry\,\sourcemap\,\webpack\,\author\:\Artiely\,\date\:\2019-04-03\,\cover\:\/2022-05-14-21-58-32.png\,\base64\:\c2175b\,\tinyCover\:\/cover/2022-05-14-21-58-32.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\1a251a\,\coverSecondary\:\e5dae5\,\dir\:\/posts/2019\,\summary\:\记sentry配置sourcemap后的优化需求！打包后的文件自动过滤出sourcemap并压缩成zip包项目结构：说明首先说明一下为什么会有这样的需求因为项目中集成了 sentry 关于sentry的介绍 请点击我，如果你已经了解了 sentry那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行，但是在实际生产中我们是不能上传sourcemap的，这不仅仅是不安全的问题...\,\description\:\记sentry配置sourcemap后的优化需求！打包后的文件自动过滤出sourcemap并压缩成zip包项目结构：说明首先说明一下为什么会有这样的需求因为项目中集成了 sentry 关于sentry的介绍 请点击我，如果你已经了解了 sentry那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行，但是在实际生产中我们是不能上传sourcemap的，这不仅仅是不安全的问题...\,\words\:598,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-58-32.png\,\coverPathBase\:\/assets/2022-05-14-21-58-32\},{\text\:\如何创建自定义 VuePress 主题\,\link\:\/posts/2019/2019-4-3-vuepress-theme\,\frontmatter\:{\title\:\如何创建自定义 VuePress 主题\,\tag\:\vue\,\vuepress\,\author\:\Artiely\,\date\:\2019-04-03\,\cover\:\/2022-05-14-21-58-55.png\,\base64\:\c2175b\,\tinyCover\:\/cover/2022-05-14-21-58-55.png\,\coverWidth\:675,\coverHeight\:1200,\coverPrimary\:\2a2e28\,\coverSecondary\:\d5d1d7\,\dir\:\/posts/2019\,\summary\:\如何创建自定义 VuePress 主题如果您已经听说过 VuePress，那么可能会知道它是一个功能极小的静态站点生成器。VuePress 使创建文本繁多的文档网站变得简单，比 Nuxt.js 容易得多。但是，您是否知道 VuePress 有一个基于 Vue 构建的自定义主题系统，可以让您使用自定义功能构建自己的全功能主题？在本文中，我们将介绍如何开始创建自己的自定义主题，遵循一些最佳实践，以及如...\,\description\:\如何创建自定义 VuePress 主题如果您已经听说过 VuePress，那么可能会知道它是一个功能极小的静态站点生成器。VuePress 使创建文本繁多的文档网站变得简单，比 Nuxt.js 容易得多。但是，您是否知道 VuePress 有一个基于 Vue 构建的自定义主题系统，可以让您使用自定义功能构建自己的全功能主题？在本文中，我们将介绍如何开始创建自己的自定义主题，遵循一些最佳实践，以及如...\,\words\:1154,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-58-55.png\,\coverPathBase\:\/assets/2022-05-14-21-58-55\},{\text\:\axios认识\,\link\:\/posts/2018/2018-10-10-axios\,\frontmatter\:{\title\:\axios认识\,\tag\:\axios\,\http\,\promise\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-54-40.png\,\base64\:222222,\tinyCover\:\/cover/2022-05-14-21-54-40.png\,\coverWidth\:736,\coverHeight\:1552,\coverPrimary\:\1c3239\,\coverSecondary\:\e3cdc6\,\dir\:\/posts/2018\,\summary\:\axios认识Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF浏览器支持安装使用 npm:$ npm install axios使...\,\description\:\axios认识Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF浏览器支持安装使用 npm:$ npm install axios使...\,\words\:2329,\readTime\:\12 min read\},\coverPath\:\/assets/2022-05-14-21-54-40.png\,\coverPathBase\:\/assets/2022-05-14-21-54-40\},{\text\:\chrome开发使用小技巧\,\link\:\/posts/2018/2018-10-10-chrome-dev-tips\,\frontmatter\:{\title\:\chrome开发使用小技巧\,\tag\:\chrome\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-55-02.png\,\base64\:\dc4a3b\,\tinyCover\:\/cover/2022-05-14-21-55-02.png\,\coverWidth\:564,\coverHeight\:953,\coverPrimary\:\e4e6e2\,\coverSecondary\:\1b191d\,\dir\:\/posts/2018\,\summary\:\开发工具使用小技巧chrome开启跨域跨域的解决办法有很多这里先来个简单暴力一劳永逸的办法1.找到chrome的安装目录chrome.exe新建快捷方式2.重命名快捷方式跨域.exe右键属性 目标 加入参数 --disable-web-security 记得前面空格3.快捷方式发送到桌面关闭所有chrome然后启动跨域.exe 会提示 您使用的是不受支持的命令行标记disable-web-sec...\,\description\:\开发工具使用小技巧chrome开启跨域跨域的解决办法有很多这里先来个简单暴力一劳永逸的办法1.找到chrome的安装目录chrome.exe新建快捷方式2.重命名快捷方式跨域.exe右键属性 目标 加入参数 --disable-web-security 记得前面空格3.快捷方式发送到桌面关闭所有chrome然后启动跨域.exe 会提示 您使用的是不受支持的命令行标记disable-web-sec...\,\words\:198,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-55-02.png\,\coverPathBase\:\/assets/2022-05-14-21-55-02\},{\text\:\get与post的区别\,\link\:\/posts/2018/2018-10-10-get-post\,\frontmatter\:{\title\:\get与post的区别\,\tag\:\TCP\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-55-21.png\,\base64\:666666,\tinyCover\:\/cover/2022-05-14-21-55-21.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\735c51\,\coverSecondary\:\8ca3ae\,\dir\:\/posts/2018\,\summary\:\get与post的区别GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你轻轻松松的给出了一...\,\description\:\get与post的区别GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你轻轻松松的给出了一...\,\words\:1682,\readTime\:\9 min read\},\coverPath\:\/assets/2022-05-14-21-55-21.png\,\coverPathBase\:\/assets/2022-05-14-21-55-21\},{\text\:\github恢复属于你的小绿点\,\link\:\/posts/2018/2018-10-10-git-green-pointer\,\frontmatter\:{\title\:\github恢复属于你的小绿点\,\tag\:\git\,\github\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-55-48.png\,\base64\:\252a2e\,\tinyCover\:\/cover/2022-05-14-21-55-48.png\,\coverWidth\:564,\coverHeight\:902,\coverPrimary\:\6f7271\,\coverSecondary\:\908d8e\,\dir\:\/posts/2018\,\summary\:\github恢复属于你的小绿点首先要分析为什么你的提交记录没有被github识别：进行Commits的用户没有被关联到你的Github帐号中。不是在这个版本库的默认分支进行的Commit。这个仓库是一个Fork仓库，而不是独立仓库。我估计很多人和我一样都是第一个原因，初用github远程管理代码和那些经常更换使用机器的原因有可能用错账户名和邮箱，其实我在修改自己的原来的用户名和邮箱是就发现，当初设...\,\description\:\github恢复属于你的小绿点首先要分析为什么你的提交记录没有被github识别：进行Commits的用户没有被关联到你的Github帐号中。不是在这个版本库的默认分支进行的Commit。这个仓库是一个Fork仓库，而不是独立仓库。我估计很多人和我一样都是第一个原因，初用github远程管理代码和那些经常更换使用机器的原因有可能用错账户名和邮箱，其实我在修改自己的原来的用户名和邮箱是就发现，当初设...\,\words\:662,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-55-48.png\,\coverPathBase\:\/assets/2022-05-14-21-55-48\},{\text\:\js常见位运算理解\,\link\:\/posts/2018/2018-10-10-js-bit-operation\,\frontmatter\:{\title\:\js常见位运算理解\,\tag\:\javaScript\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-56-07.png\,\base64\:129,\tinyCover\:\/cover/2022-05-14-21-56-07.png\,\coverWidth\:600,\coverHeight\:1200,\coverPrimary\:\2a3440\,\coverSecondary\:\d5cbbf\,\dir\:\/posts/2018\,\summary\:\js常见位运算理解我们可能很少在编程中用位运算，如果没深入学习，可能也很难理解。平时的数值运算，其实是要先转换成二进制再进行运算的，而位运算就是直接进行二进制运算，所以位运算的执行效率肯定是更高的。下面通过一些实例来加深对位运算的理解。按位与(&)&&运算符我们都知道，只有两个都为真，结果才为真。&道理是一样的，只有两个数的值为1时，才返回1。例如1和3的按位与操作： ...\,\description\:\js常见位运算理解我们可能很少在编程中用位运算，如果没深入学习，可能也很难理解。平时的数值运算，其实是要先转换成二进制再进行运算的，而位运算就是直接进行二进制运算，所以位运算的执行效率肯定是更高的。下面通过一些实例来加深对位运算的理解。按位与(&)&&运算符我们都知道，只有两个都为真，结果才为真。&道理是一样的，只有两个数的值为1时，才返回1。例如1和3的按位与操作： ...\,\words\:1413,\readTime\:\8 min read\},\coverPath\:\/assets/2022-05-14-21-56-07.png\,\coverPathBase\:\/assets/2022-05-14-21-56-07\},{\text\:\npm常见问题\,\link\:\/posts/2018/2018-10-10-npm-nrm\,\frontmatter\:{\title\:\npm常见问题\,\tag\:\npm\,\nrm\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-56-29.png\,\base64\:\70d1a4\,\tinyCover\:\/cover/2022-05-14-21-56-29.png\,\coverWidth\:564,\coverHeight\:1110,\coverPrimary\:\51596e\,\coverSecondary\:\aea691\,\dir\:\/posts/2018\,\summary\:\npm安装失败在执行 npm install时，出现如下错误，npm ERR! phantomjs-prebuilt@2.1.14 install: node install.jsnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the phantomjs-prebuilt@2.1.14 install script node install.js...\,\description\:\npm安装失败在执行 npm install时，出现如下错误，npm ERR! phantomjs-prebuilt@2.1.14 install: node install.jsnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the phantomjs-prebuilt@2.1.14 install script node install.js...\,\words\:371,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-56-29.png\,\coverPathBase\:\/assets/2022-05-14-21-56-29\},{\text\:\pm2进阶使用之一键发布\,\link\:\/posts/2018/2018-10-10-pm2\,\frontmatter\:{\title\:\pm2进阶使用之一键发布\,\tag\:\pm2\,\nodejs\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-56-56.png\,\base64\:301286,\tinyCover\:\/cover/2022-05-14-21-56-56.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\e38b42\,\coverSecondary\:\1c74bd\,\dir\:\/posts/2018\,\summary\:\pm2进阶使用之一键发布启用集群模式只需要在启动应用时带上i参数pm2 start app.js -i maxmax：意味着PM2将自动检测可用的CPU数量和运行多个进程可以在负载均衡模式(但是不推荐使用)或者使用json文件启动的{ \\\apps\\\ : { \\\script\\\ : \\\api.js\\\, \\\instances\\\ : \\\max\\\, \\\exec_mode\\\ : \\\clu...\,\description\:\pm2进阶使用之一键发布启用集群模式只需要在启动应用时带上i参数pm2 start app.js -i maxmax：意味着PM2将自动检测可用的CPU数量和运行多个进程可以在负载均衡模式(但是不推荐使用)或者使用json文件启动的{ \\\apps\\\ : { \\\script\\\ : \\\api.js\\\, \\\instances\\\ : \\\max\\\, \\\exec_mode\\\ : \\\clu...\,\words\:833,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-56-56.png\,\coverPathBase\:\/assets/2022-05-14-21-56-56\},{\text\:\vue pracel试玩\,\link\:\/posts/2018/2018-10-10-vue-pracel\,\frontmatter\:{\title\:\vue pracel试玩\,\tag\:\vue\,\pracel\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-57-26.png\,\base64\:253848,\tinyCover\:\/cover/2022-05-14-21-57-26.png\,\coverWidth\:563,\coverHeight\:574,\coverPrimary\:\242327\,\coverSecondary\:\dbdcd8\,\dir\:\/posts/2018\,\summary\:\vue pracel试玩安装github https://github.com/parcel-bundler/parcel?utm_sourcegold_browser_extension首先通过 Yarn 或者 npm 安装 Parcel :npm install -g parcel-bundler在你正在使用的项目目录下创建一个 package.json 文件:npm init -y我用的原...\,\description\:\vue pracel试玩安装github https://github.com/parcel-bundler/parcel?utm_sourcegold_browser_extension首先通过 Yarn 或者 npm 安装 Parcel :npm install -g parcel-bundler在你正在使用的项目目录下创建一个 package.json 文件:npm init -y我用的原...\,\words\:220,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-57-26.png\,\coverPathBase\:\/assets/2022-05-14-21-57-26\},{\text\:\网络爬虫开发\,\link\:\/posts/2018/2018-10-7-node-spider\,\frontmatter\:{\title\:\网络爬虫开发\,\tag\:\nodejs\,\http\,\cheerio\,\selenium\,\puppeteer\,\author\:\Artiely\,\date\:\2018-10-07\,\cover\:\/2022-05-14-21-54-19.png\,\base64\:\fff\,\tinyCover\:\/cover/2022-05-14-21-54-19.png\,\coverWidth\:564,\coverHeight\:1222,\coverPrimary\:\343438\,\coverSecondary\:\cbcbc7\,\dir\:\/posts/2018\,\summary\:\网络爬虫开发什么是爬虫可以把互联网比做成一张“大网”，爬虫就是在这张大网上不断爬取信息的程序所以一句话总结：爬虫是请求网站并提取数据的自动化程序爬虫的基本工作流程如下：向指定的URL发送http请求获取响应（HTML、XML、JSON、二进制等数据）处理数据（解析DOM、解析JSON等）将处理好的数据进行存储img爬虫的意义爬虫就是一个探测程序，它的基本功能就是模拟人的行为去各个网站转悠，点点按钮...\,\description\:\网络爬虫开发什么是爬虫可以把互联网比做成一张“大网”，爬虫就是在这张大网上不断爬取信息的程序所以一句话总结：爬虫是请求网站并提取数据的自动化程序爬虫的基本工作流程如下：向指定的URL发送http请求获取响应（HTML、XML、JSON、二进制等数据）处理数据（解析DOM、解析JSON等）将处理好的数据进行存储img爬虫的意义爬虫就是一个探测程序，它的基本功能就是模拟人的行为去各个网站转悠，点点按钮...\,\words\:4529,\readTime\:\23 min read\},\coverPath\:\/assets/2022-05-14-21-54-19.png\,\coverPathBase\:\/assets/2022-05-14-21-54-19\},{\text\:\javascript 的执行逻辑\,\link\:\/posts/2018/2018-9-7-js\,\frontmatter\:{\title\:\javascript 的执行逻辑\,\tag\:\javaScript\,\date\:\2018-09-07\,\cover\:\/2022-05-14-21-53-56.png\,\hot\:true,\base64\:\f0de3e\,\tinyCover\:\/cover/2022-05-14-21-53-56.png\,\coverWidth\:564,\coverHeight\:1128,\coverPrimary\:\060e22\,\coverSecondary\:\f9f1dd\,\dir\:\/posts/2018\,\summary\:\你将了解执行栈（Execution stack）执行上下文（Execution Context）作用域链（scope chains）变量提升（hoisting）闭包（closures）this 绑定执行栈又叫调用栈，具有 LIFO（last in first out 后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。当 JavaScript 引擎首次读取你的脚本时，它会创建一个全局执行上...\,\description\:\你将了解执行栈（Execution stack）执行上下文（Execution Context）作用域链（scope chains）变量提升（hoisting）闭包（closures）this 绑定执行栈又叫调用栈，具有 LIFO（last in first out 后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。当 JavaScript 引擎首次读取你的脚本时，它会创建一个全局执行上...\,\author\:\tanjie-ola\,\words\:3554,\readTime\:\18 min read\},\coverPath\:\/assets/2022-05-14-21-53-56.png\,\coverPathBase\:\/assets/2022-05-14-21-53-56\},{\text\:\提问的艺术\,\link\:\/posts/2018/2018-8-8-question\,\frontmatter\:{\title\:\提问的艺术\,\tag\:\baidu\,\google\,\author\:\Artiely\,\date\:\2018-08-08\,\cover\:\/2022-05-14-21-53-11.png\,\base64\:\02b981\,\tinyCover\:\/cover/2022-05-14-21-53-11.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\070a08\,\coverSecondary\:\f8f5f7\,\dir\:\/posts/2018\,\summary\:\提问的艺术正如查尔斯吉特林所说的：只要能把问题讲清楚，就已经解决了一半问题。提问前你必须需要知道的事情要知道， Free 的正确翻译是 自由，而非免费。要知道，愿意回答问题的人，都是 可爱 的人。要知道，向帮助你的人 付费 是一个高尚的行为。即使回答你的人不是为了钱。要知道，花钱买时间一个是常识。如果你不能认同，要么你钱包穷，要么你思想穷。要知道，给对方发工资的不是你或者你老板。要知道，提问的时候...\,\description\:\提问的艺术正如查尔斯吉特林所说的：只要能把问题讲清楚，就已经解决了一半问题。提问前你必须需要知道的事情要知道， Free 的正确翻译是 自由，而非免费。要知道，愿意回答问题的人，都是 可爱 的人。要知道，向帮助你的人 付费 是一个高尚的行为。即使回答你的人不是为了钱。要知道，花钱买时间一个是常识。如果你不能认同，要么你钱包穷，要么你思想穷。要知道，给对方发工资的不是你或者你老板。要知道，提问的时候...\,\words\:699,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-53-11.png\,\coverPathBase\:\/assets/2022-05-14-21-53-11\},{\text\:\Vue 前端开发规范\,\link\:\/posts/2018/2018-8-8-vue-rules\,\frontmatter\:{\title\:\Vue 前端开发规范\,\tag\:\vue\,\eslint\,\BEM\,\author\:\Artiely\,\date\:\2018-08-08\,\cover\:\/2022-05-14-21-53-33.png\,\base64\:\4d5054\,\tinyCover\:\/cover/2022-05-14-21-53-33.png\,\coverWidth\:736,\coverHeight\:1592,\coverPrimary\:\0f0d0e\,\coverSecondary\:\f0f2f1\,\dir\:\/posts/2018\,\summary\:\Vue 前端开发规范基于 Vue 官方风格指南整理一、强制代码必须遵循 eslint使用 eslint standard 规范组件命名组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: TodoItem, // ...}反例：export default { name: Todo, // ...}data 函数组件数...\,\description\:\Vue 前端开发规范基于 Vue 官方风格指南整理一、强制代码必须遵循 eslint使用 eslint standard 规范组件命名组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: TodoItem, // ...}反例：export default { name: Todo, // ...}data 函数组件数...\,\words\:3019,\readTime\:\16 min read\},\coverPath\:\/assets/2022-05-14-21-53-33.png\,\coverPathBase\:\/assets/2022-05-14-21-53-33\},{\text\:\Egg.js 入门\,\link\:\/posts/2018/2018-8-7-egg-start\,\frontmatter\:{\title\:\Egg.js 入门\,\tag\:\eggjs\,\nodejs\,\author\:\Artiely\,\date\:\2018-08-07\,\cover\:\/2022-05-14-21-52-48.png\,\base64\:\1a1a1a\,\tinyCover\:\/cover/2022-05-14-21-52-48.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\6a4c5e\,\coverSecondary\:\95b3a1\,\dir\:\/posts/2018\,\summary\:\Egg.js 入门Egg.js 官网官 网：https://eggjs.org中文网站：https://eggjs.org/zh-cn/Egg.js 是什么?Egg.js 是《阿里旗下产品》基于 Node.js 和 Koa 是一个 Nodejs 的企业级应用开发框架。可以帮助发团队和开发人员降低开发和维护成本。Express 和 Koa 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常...\,\description\:\Egg.js 入门Egg.js 官网官 网：https://eggjs.org中文网站：https://eggjs.org/zh-cn/Egg.js 是什么?Egg.js 是《阿里旗下产品》基于 Node.js 和 Koa 是一个 Nodejs 的企业级应用开发框架。可以帮助发团队和开发人员降低开发和维护成本。Express 和 Koa 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常...\,\words\:1085,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-52-48.png\,\coverPathBase\:\/assets/2022-05-14-21-52-48\},{\text\:\Electron 应用操作数据之nedb数据库\,\link\:\/posts/2018/2018-7-11-electron-nedb\,\frontmatter\:{\title\:\Electron 应用操作数据之nedb数据库\,\tag\:\electron\,\nodejs\,\nedb\,\author\:\Artiely\,\date\:\2018-07-11\,\cover\:\/2022-05-14-21-52-03.png\,\base64\:\ffb00e\,\tinyCover\:\/cover/2022-05-14-21-52-03.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\b5bfc0\,\coverSecondary\:\4a403f\,\dir\:\/posts/2018\,\summary\:\Electron 应用操作数据之nedb数据库Electron 应用操作数据的几种方法：1、远程api接口 （多个客户端公用一套数据）2、连接远程数据库 (局域网内使用 多个客户端公用一套数据 ) （不建议使用）3、连接本地数据库 （nedb sqlite） 应用本地保存数据（localstore 5M） 用户设置信息 qq聊天记录读...\,\description\:\Electron 应用操作数据之nedb数据库Electron 应用操作数据的几种方法：1、远程api接口 （多个客户端公用一套数据）2、连接远程数据库 (局域网内使用 多个客户端公用一套数据 ) （不建议使用）3、连接本地数据库 （nedb sqlite） 应用本地保存数据（localstore 5M） 用户设置信息 qq聊天记录读...\,\words\:546,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-52-03.png\,\coverPathBase\:\/assets/2022-05-14-21-52-03\},{\text\:\Electron注册全局快捷键（globalShortcut）,剪切板（clipboard ）与nativeImage 模块\,\link\:\/posts/2018/2018-7-11-electron-shortcut-cliboard-nativeimage\,\frontmatter\:{\title\:\Electron注册全局快捷键（globalShortcut）,剪切板（clipboard ）与nativeImage 模块\,\tag\:\nodejs\,\electron\,\author\:\Artiely\,\date\:\2018-07-11\,\cover\:\/2022-05-14-21-52-25.png\,\base64\:\8c8f8f\,\tinyCover\:\/cover/2022-05-14-21-52-25.png\,\coverWidth\:736,\coverHeight\:1071,\coverPrimary\:\171718\,\coverSecondary\:\e8e8e7\,\dir\:\/posts/2018\,\summary\:\Electron 注册全局快捷键（globalShortcut）const app require(app)const globalShortcut require(electron).globalShortcutapp.on(ready, () > { // Register a ctrl+x shortcut listener. const ret globa...\,\description\:\Electron 注册全局快捷键（globalShortcut）const app require(app)const globalShortcut require(electron).globalShortcutapp.on(ready, () > { // Register a ctrl+x shortcut listener. const ret globa...\,\words\:120,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-52-25.png\,\coverPathBase\:\/assets/2022-05-14-21-52-25\},{\text\:\Electron实现消息通知与监听网络\,\link\:\/posts/2018/2018-7-10-electron-message\,\frontmatter\:{\title\:\Electron实现消息通知与监听网络\,\tag\:\nodejs\,\electron\,\author\:\Artiely\,\date\:\2018-07-10\,\cover\:\/2022-05-14-21-51-07.png\,\base64\:\101e2e\,\tinyCover\:\/cover/2022-05-14-21-51-07.png\,\coverWidth\:353,\coverHeight\:680,\coverPrimary\:\cdcaca\,\coverSecondary\:\323535\,\dir\:\/posts/2018\,\summary\:\Electron实现消息通知Electron 里面的消息通知是基于 h5 的通知 api 实现的。const option { title: title, body: body, icon: path.join(main-process/favicon2.ico),}const myNotification new window.Notification(option.t...\,\description\:\Electron实现消息通知Electron 里面的消息通知是基于 h5 的通知 api 实现的。const option { title: title, body: body, icon: path.join(main-process/favicon2.ico),}const myNotification new window.Notification(option.t...\,\words\:72,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-51-07.png\,\coverPathBase\:\/assets/2022-05-14-21-51-07\},{\text\:\WebSocket\,\link\:\/posts/2018/2018-7-10-websocket\,\frontmatter\:{\title\:\WebSocket\,\tag\:\nodejs\,\webSocket\,\author\:\Artiely\,\date\:\2018-07-10\,\cover\:\/2022-05-14-21-51-36.png\,\base64\:\fceb3f\,\tinyCover\:\/cover/2022-05-14-21-51-36.png\,\coverWidth\:736,\coverHeight\:1033,\coverPrimary\:\312c41\,\coverSecondary\:\ced3be\,\dir\:\/posts/2018\,\summary\:\WebSocket介绍现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。img所以单向请求的缺...\,\description\:\WebSocket介绍现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。img所以单向请求的缺...\,\words\:4982,\readTime\:\25 min read\},\coverPath\:\/assets/2022-05-14-21-51-36.png\,\coverPathBase\:\/assets/2022-05-14-21-51-36\},{\text\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘\,\link\:\/posts/2018/2018-7-9-electron-ico\,\frontmatter\:{\title\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-09\,\cover\:\/2022-05-14-21-50-40.png\,\base64\:\273a49\,\tinyCover\:\/cover/2022-05-14-21-50-40.png\,\coverWidth\:676,\coverHeight\:1200,\coverPrimary\:\040404\,\coverSecondary\:\fbfbfb\,\dir\:\/posts/2018\,\summary\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘Electron 创建任务栏图标以及任务栏图标右键菜单const path require(path)const { Menu, Tray, app, BrowserWindow } require(electron)const appIcon new Tray(path.join(__di...\,\description\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘Electron 创建任务栏图标以及任务栏图标右键菜单const path require(path)const { Menu, Tray, app, BrowserWindow } require(electron)const appIcon new Tray(path.join(__di...\,\words\:250,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-50-40.png\,\coverPathBase\:\/assets/2022-05-14-21-50-40\},{\text\:\Electron 弹出框\,\link\:\/posts/2018/2018-7-8-electron-dialog\,\frontmatter\:{\title\:\Electron 弹出框\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-08\,\cover\:\/2022-05-14-21-49-57.png\,\base64\:\2f3341\,\tinyCover\:\/cover/2022-05-14-21-49-57.png\,\coverWidth\:474,\coverHeight\:842,\coverPrimary\:\2794c4\,\coverSecondary\:\d86b3b\,\dir\:\/posts/2018\,\summary\:\Electron 弹出框dialog 模块提供了 api 来展示原生的系统对话框，例如打开文件框，alert 框， 所以 web 应用可以给用户带来跟系统应用相同的体验。dialog.showErrorBox(title, content)dialog.showMessageBox( { type: info, title: message, message: ...\,\description\:\Electron 弹出框dialog 模块提供了 api 来展示原生的系统对话框，例如打开文件框，alert 框， 所以 web 应用可以给用户带来跟系统应用相同的体验。dialog.showErrorBox(title, content)dialog.showMessageBox( { type: info, title: message, message: ...\,\words\:153,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-49-57.png\,\coverPathBase\:\/assets/2022-05-14-21-49-57\},{\text\:\Electron 在用户默认浏览器中打开 URL\,\link\:\/posts/2018/2018-7-8-electron-shell-url-webview\,\frontmatter\:{\title\:\Electron 在用户默认浏览器中打开 URL\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-08\,\cover\:\/2022-05-14-21-50-16.png\,\base64\:\2f3341\,\tinyCover\:\/cover/2022-05-14-21-50-16.png\,\coverWidth\:474,\coverHeight\:727,\coverPrimary\:\d5cbbf\,\coverSecondary\:\2a3440\,\dir\:\/posts/2018\,\summary\:\Electron shell 模块 在用户默认浏览器中打开 URL 的示例shell 模块提供了集成其他桌面客户端的关联功能.const shell require(shell)shell.openExternal(https://github.com)Electron DOM `` 标签。Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的...\,\description\:\Electron shell 模块 在用户默认浏览器中打开 URL 的示例shell 模块提供了集成其他桌面客户端的关联功能.const shell require(shell)shell.openExternal(https://github.com)Electron DOM `` 标签。Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的...\,\words\:143,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-50-16.png\,\coverPathBase\:\/assets/2022-05-14-21-50-16\},{\text\:\Electron 主进程和渲染进程通信\,\link\:\/posts/2018/2018-7-7-electron-main-render\,\frontmatter\:{\title\:\Electron 主进程和渲染进程通信\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-07\,\cover\:\/2022-05-14-21-49-30.png\,\base64\:\50737e\,\tinyCover\:\/cover/2022-05-14-21-49-30.png\,\coverWidth\:736,\coverHeight\:1592,\coverPrimary\:\a5bcce\,\coverSecondary\:\5a4331\,\dir\:\/posts/2018\,\summary\:\Electron 主进程和渲染进程通信有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知 主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就 用到了主进程和渲染进程之间的相互通信。 Electron 主进程，和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRendereripcMain：当在主进程中使用时，它处理从渲染器进程（...\,\description\:\Electron 主进程和渲染进程通信有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知 主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就 用到了主进程和渲染进程之间的相互通信。 Electron 主进程，和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRendereripcMain：当在主进程中使用时，它处理从渲染器进程（...\,\words\:586,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-49-30.png\,\coverPathBase\:\/assets/2022-05-14-21-49-30\},{\text\:\Electron自定义软件顶部菜单,上下文菜单以及绑定快捷键\,\link\:\/posts/2018/2018-7-6-electron-menu-shortcut\,\frontmatter\:{\title\:\Electron自定义软件顶部菜单,上下文菜单以及绑定快捷键\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-06\,\cover\:\/2022-05-14-21-48-58.png\,\base64\:\2d3135\,\tinyCover\:\/cover/2022-05-14-21-48-58.png\,\coverWidth\:736,\coverHeight\:1040,\coverPrimary\:\a2958d\,\coverSecondary\:\5d6a72\,\dir\:\/posts/2018\,\summary\:\Electron自定义软件顶部菜单以及绑定快捷键Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单。 这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用。const { Menu } require(electron)const template { label: 文件, submenu: ...\,\description\:\Electron自定义软件顶部菜单以及绑定快捷键Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单。 这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用。const { Menu } require(electron)const template { label: 文件, submenu: ...\,\words\:357,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-48-58.png\,\coverPathBase\:\/assets/2022-05-14-21-48-58\},{\text\:\Electron 模块介绍\,\link\:\/posts/2018/2018-7-5-electron-model\,\frontmatter\:{\title\:\Electron 模块介绍\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-05\,\cover\:\/2022-05-14-21-48-33.png\,\base64\:\01bcf3\,\tinyCover\:\/cover/2022-05-14-21-48-33.png\,\coverWidth\:736,\coverHeight\:1085,\coverPrimary\:\3c3a3d\,\coverSecondary\:\c3c5c2\,\dir\:\/posts/2018\,\summary\:\Electron 主进程和渲染进程中的模块Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口。主进程代码：const electron require(electron)// 控制应用生命周期的模块const { app } electron// 创建本地浏览器窗口的模块const { BrowserWindow } elec...\,\description\:\Electron 主进程和渲染进程中的模块Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口。主进程代码：const electron require(electron)// 控制应用生命周期的模块const { app } electron// 创建本地浏览器窗口的模块const { BrowserWindow } elec...\,\words\:525,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-48-33.png\,\coverPathBase\:\/assets/2022-05-14-21-48-33\},{\text\:\Electron基本概念\,\link\:\/posts/2018/2018-7-4-electron-base\,\frontmatter\:{\title\:\Electron基本概念\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-04\,\cover\:\/2022-05-14-21-48-13.png\,\base64\:\5587d7\,\tinyCover\:\/cover/2022-05-14-21-48-13.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\7d6f76\,\coverSecondary\:\829089\,\dir\:\/posts/2018\,\summary\:\Electron运行的流程Electron 主进程和渲染进程主进程和渲染器进程：Electron 运行 package.json 的 main 脚本的进程被称为主进程 。 在主进程中运行的脚 本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。由于 Electron 使用了 Chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的 多...\,\description\:\Electron运行的流程Electron 主进程和渲染进程主进程和渲染器进程：Electron 运行 package.json 的 main 脚本的进程被称为主进程 。 在主进程中运行的脚 本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。由于 Electron 使用了 Chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的 多...\,\words\:552,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-48-13.png\,\coverPathBase\:\/assets/2022-05-14-21-48-13\},{\text\:\Electron了解与开始\,\link\:\/posts/2018/2018-7-3-electron-init\,\frontmatter\:{\title\:\Electron了解与开始\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-03\,\cover\:\/2022-05-14-21-47-41.png\,\base64\:\2d3135\,\tinyCover\:\/cover/2022-05-14-21-47-41.png\,\coverWidth\:736,\coverHeight\:1145,\coverPrimary\:\344f55\,\coverSecondary\:\cbb0aa\,\dir\:\/posts/2018\,\summary\:\Electron了解与开始为什么要学 Electron。Electron 是一个跨平台的桌面应用开发框架，用 html css js 的技术开发桌面上面可以安装的 软件。“Electron 又为前端开发者谋得了一份好的差事”。想起在网路里流传很广的一句话“不要和老夫说什么 C++，Java，老夫行走江湖就靠一把 JS，遇到需求撸起袖子就是干”。是的 Electron 看上去是在蚕食桌面客户端领域的...\,\description\:\Electron了解与开始为什么要学 Electron。Electron 是一个跨平台的桌面应用开发框架，用 html css js 的技术开发桌面上面可以安装的 软件。“Electron 又为前端开发者谋得了一份好的差事”。想起在网路里流传很广的一句话“不要和老夫说什么 C++，Java，老夫行走江湖就靠一把 JS，遇到需求撸起袖子就是干”。是的 Electron 看上去是在蚕食桌面客户端领域的...\,\words\:799,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-47-41.png\,\coverPathBase\:\/assets/2022-05-14-21-47-41\},{\text\:\web应用开发框架\,\link\:\/posts/2018/2018-6-26-web-koa-egg\,\frontmatter\:{\title\:\web应用开发框架\,\tag\:\koa\,\egg\,\author\:\Artiely\,\date\:\2018-06-26\,\cover\:\/2022-05-14-21-46-46.png\,\base64\:\332a2a\,\tinyCover\:\/cover/2022-05-14-21-46-46.png\,\coverWidth\:718,\coverHeight\:1200,\coverPrimary\:\b9b3b7\,\coverSecondary\:\464c48\,\dir\:\/posts/2018\,\summary\:\web应用开发框架koa入门与使用image-20190620190151695简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快...\,\description\:\web应用开发框架koa入门与使用image-20190620190151695简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快...\,\words\:19229,\readTime\:\97 min read\},\coverPath\:\/assets/2022-05-14-21-46-46.png\,\coverPathBase\:\/assets/2022-05-14-21-46-46\},{\text\:\Nuxt基础入门\,\link\:\/posts/2018/2018-6-9-nuxt\,\frontmatter\:{\title\:\Nuxt基础入门\,\tag\:\vue\,\nuxt\,\author\:\Artiely\,\date\:\2018-06-09\,\cover\:\/2022-05-14-21-46-22.png\,\base64\:\dddee0\,\tinyCover\:\/cover/2022-05-14-21-46-22.png\,\coverWidth\:736,\coverHeight\:758,\coverPrimary\:\55483e\,\coverSecondary\:\aab7c1\,\dir\:\/posts/2018\,\summary\:\Nuxt基础入门Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点，以及一些比较常用的功能介绍。安装和部署npm install -g vue-cli //安装vue-cli架...\,\description\:\Nuxt基础入门Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点，以及一些比较常用的功能介绍。安装和部署npm install -g vue-cli //安装vue-cli架...\,\words\:845,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-46-22.png\,\coverPathBase\:\/assets/2022-05-14-21-46-22\},{\text\:\如何实现一个命令行工具的npm包\,\link\:\/posts/2018/2018-3-12-nodejs-npm\,\frontmatter\:{\title\:\如何实现一个命令行工具的npm包\,\tag\:\nodejs\,\npm\,\author\:\Artiely\,\cover\:\/2022-05-14-21-45-59.png\,\date\:\2018-03-12\,\base64\:\f8f8f8\,\tinyCover\:\/cover/2022-05-14-21-45-59.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\19130e\,\coverSecondary\:\e6ecf1\,\dir\:\/posts/2018\,\summary\:\如何实现一个命令行工具的npm包我们平时会使用到很多的基于命令行的npm包，其中我们最熟悉的前端三大框架的脚手架，例如vue-cli他们大致的工作原理是什么呢，今天来实现一个最基本的需求。这样的结构图相信大家都见过├──dist│ ├──css│ │ └──app.ae730c66.css│ ├──js│ │ ├──app.13838aa1.js│ │ ├──app.13838aa1.js.map...\,\description\:\如何实现一个命令行工具的npm包我们平时会使用到很多的基于命令行的npm包，其中我们最熟悉的前端三大框架的脚手架，例如vue-cli他们大致的工作原理是什么呢，今天来实现一个最基本的需求。这样的结构图相信大家都见过├──dist│ ├──css│ │ └──app.ae730c66.css│ ├──js│ │ ├──app.13838aa1.js│ │ ├──app.13838aa1.js.map...\,\words\:995,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-45-59.png\,\coverPathBase\:\/assets/2022-05-14-21-45-59\},{\text\:\CentOS下如何安装nodejs及相关环境\,\link\:\/posts/2018/2018-1-30-centos-setup-nodejs\,\frontmatter\:{\title\:\CentOS下如何安装nodejs及相关环境\,\tag\:\nodejs\,\centOS\,\pm2\,\nvm\,\nginx\,\author\:\Artiely\,\date\:\2018-01-30\,\cover\:\/2022-05-14-21-45-28.png\,\hot\:true,\base64\:\6b8359\,\tinyCover\:\/cover/2022-05-14-21-45-28.png\,\coverWidth\:735,\coverHeight\:1083,\coverPrimary\:\413d41\,\coverSecondary\:\bec2be\,\dir\:\/posts/2018\,\summary\:\CentOS下如何安装nodejs及相关环境您将了解CentOS下如何安装nodejsCentOS下如何安装NVMCentOS下如何安装gitCentOS下如何安装pm2CentOS下如何安装nginx适用对象本文档介绍如何在阿里云CentOS系统的云服务器ECS实例上，安装Nodejs并部署项目。准备工作部署之前，请做如下准备工作：购买ECS实例您的实例运行的镜像是CentOS7.x您的实例可以...\,\description\:\CentOS下如何安装nodejs及相关环境您将了解CentOS下如何安装nodejsCentOS下如何安装NVMCentOS下如何安装gitCentOS下如何安装pm2CentOS下如何安装nginx适用对象本文档介绍如何在阿里云CentOS系统的云服务器ECS实例上，安装Nodejs并部署项目。准备工作部署之前，请做如下准备工作：购买ECS实例您的实例运行的镜像是CentOS7.x您的实例可以...\,\words\:3351,\readTime\:\17 min read\},\coverPath\:\/assets/2022-05-14-21-45-28.png\,\coverPathBase\:\/assets/2022-05-14-21-45-28\},{\text\:\css 规范\,\link\:\/posts/2017/2017-7-7-css-rules\,\frontmatter\:{\title\:\css 规范\,\tag\:\css\,\less\,\stylus\,\sass\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-25-03.png\,\base64\:\7bcdeb\,\tinyCover\:\/cover/2022-05-14-21-25-03.png\,\coverWidth\:736,\coverHeight\:1040,\coverPrimary\:\8a929c\,\coverSecondary\:\756d63\,\dir\:\/posts/2017\,\summary\:\css 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。使用组合选择器时，保持每个独立的选择器占用一行。为了代码的易读性，在每个声明的左括号前增加一个空格。声明块的右括号应该另起一行。每条声明 : 后应该插入一个空格。每条声明应该只占用一行来保证错误报告更加准确。所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出...\,\description\:\css 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。使用组合选择器时，保持每个独立的选择器占用一行。为了代码的易读性，在每个声明的左括号前增加一个空格。声明块的右括号应该另起一行。每条声明 : 后应该插入一个空格。每条声明应该只占用一行来保证错误报告更加准确。所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出...\,\words\:3380,\readTime\:\17 min read\},\coverPath\:\/assets/2022-05-14-21-25-03.png\,\coverPathBase\:\/assets/2022-05-14-21-25-03\},{\text\:\JS 规范\,\link\:\/posts/2017/2017-7-7-js-rules\,\frontmatter\:{\title\:\JS 规范\,\tag\:\javaScript\,\eslint\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-25-26.png\,\base64\:\24384d\,\tinyCover\:\/cover/2022-05-14-21-25-26.png\,\coverWidth\:500,\coverHeight\:741,\coverPrimary\:\d6d5d2\,\coverSecondary\:\292a2d\,\dir\:\/posts/2017\,\summary\:\JS 规范https://standardjs.com/rules-zhcn.html命名规范驼峰式命名法介绍Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfoCamel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo文件资源命名文件名不得含有空格文件名建议只使用小...\,\description\:\JS 规范https://standardjs.com/rules-zhcn.html命名规范驼峰式命名法介绍Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfoCamel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo文件资源命名文件名不得含有空格文件名建议只使用小...\,\words\:2093,\readTime\:\11 min read\},\coverPath\:\/assets/2022-05-14-21-25-26.png\,\coverPathBase\:\/assets/2022-05-14-21-25-26\},{\text\:\文件命名规范\,\link\:\/posts/2017/2017-7-7-rules-file\,\frontmatter\:{\title\:\文件命名规范\,\tag\:\file\,\folder\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-25-53.png\,\base64\:\222d30\,\tinyCover\:\/cover/2022-05-14-21-25-53.png\,\coverWidth\:415,\coverHeight\:679,\coverPrimary\:\845843\,\coverSecondary\:\7ba7bc\,\dir\:\/posts/2017\,\summary\:\文件命名规范下面列出了一些常用的名称，并不是按出现频次排序，但是列出来的都是出现频次非常高的单复数形式都出现了的只列出次数最多的注意，都是目录名称，不是文件名src，source 源代码，用 src 居多test，tests 测试文件，也经常用test，facebook 的测试框架 jest 默认的测试文件目录就是testdocs 文档lib 库文件，library 的缩写dist 用来...\,\description\:\文件命名规范下面列出了一些常用的名称，并不是按出现频次排序，但是列出来的都是出现频次非常高的单复数形式都出现了的只列出次数最多的注意，都是目录名称，不是文件名src，source 源代码，用 src 居多test，tests 测试文件，也经常用test，facebook 的测试框架 jest 默认的测试文件目录就是testdocs 文档lib 库文件，library 的缩写dist 用来...\,\words\:376,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-25-53.png\,\coverPathBase\:\/assets/2022-05-14-21-25-53\},{\text\:\html 规范\,\link\:\/posts/2017/2017-7-7-rules-html\,\frontmatter\:{\title\:\html 规范\,\tag\:\html\,\html5\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-26-19.png\,\base64\:\ee6534\,\tinyCover\:\/cover/2022-05-14-21-26-19.png\,\coverWidth\:563,\coverHeight\:798,\coverPrimary\:\d1c1a0\,\coverSecondary\:\2e3e5f\,\dir\:\/posts/2017\,\summary\:\html 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。嵌套的节点应该缩进（两个空格）。在属性上，使用双引号，不要使用单引号。不好在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。不要忽略可选的关闭标签（例如，` 和 `）。 Page title Hello, world!HTML5 doctype在每个 HTML 页面...\,\description\:\html 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。嵌套的节点应该缩进（两个空格）。在属性上，使用双引号，不要使用单引号。不好在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。不要忽略可选的关闭标签（例如，` 和 `）。 Page title Hello, world!HTML5 doctype在每个 HTML 页面...\,\words\:1422,\readTime\:\8 min read\},\coverPath\:\/assets/2022-05-14-21-26-19.png\,\coverPathBase\:\/assets/2022-05-14-21-26-19\},{\text\:\moment.js常用时间示例,时间管理\,\link\:\/posts/2017/2017-7-4-moment\,\frontmatter\:{\title\:\moment.js常用时间示例,时间管理\,\tag\:\moment\,\author\:\Artiely\,\date\:\2017-07-04\,\cover\:\/2022-05-14-21-24-38.png\,\base64\:241313,\tinyCover\:\/cover/2022-05-14-21-24-38.png\,\coverWidth\:736,\coverHeight\:1329,\coverPrimary\:\4b6c78\,\coverSecondary\:\b49387\,\dir\:\/posts/2017\,\summary\:\moment.js常用时间示例,时间管理今天: moment()昨天: moment().subtract(1, days)过去7天:moment().subtract(7, days)，moment()上月: moment().subtract(1, month).startOf(month) , moment().subtract(1, month).end...\,\description\:\moment.js常用时间示例,时间管理今天: moment()昨天: moment().subtract(1, days)过去7天:moment().subtract(7, days)，moment()上月: moment().subtract(1, month).startOf(month) , moment().subtract(1, month).end...\,\words\:283,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-24-38.png\,\coverPathBase\:\/assets/2022-05-14-21-24-38\},{\text\:\TCP协议之握手\,\link\:\/posts/2017/2017-6-10-tcp\,\frontmatter\:{\title\:\TCP协议之握手\,\tag\:\TCP\,\author\:\Artiely\,\date\:\2017-06-10\,\cover\:\/2022-05-14-21-24-12.png\,\base64\:\fefcfd\,\tinyCover\:\/cover/2022-05-14-21-24-12.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\d0bcb6\,\coverSecondary\:\2f4349\,\dir\:\/posts/2017\,\summary\:\TCP协议之握手TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义建立TCP需要三次握手才能建立，而断开连接则需要四次握手三次握手Three-way Handshake首先Client端发送连接请求报文，Server端接受连接后回复ACK报文，并为这次连接分配资源。Client端接收...\,\description\:\TCP协议之握手TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义建立TCP需要三次握手才能建立，而断开连接则需要四次握手三次握手Three-way Handshake首先Client端发送连接请求报文，Server端接受连接后回复ACK报文，并为这次连接分配资源。Client端接收...\,\words\:1046,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-24-12.png\,\coverPathBase\:\/assets/2022-05-14-21-24-12\},{\text\:\表单的默认行为\,\link\:\/posts/2017/2017-6-9-form-default-submit\,\frontmatter\:{\title\:\表单的默认行为\,\tag\:\css\,\author\:\Artiely\,\date\:\2017-06-09\,\cover\:\/2022-05-14-21-23-49.png\,\base64\:\ffffff\,\tinyCover\:\/cover/2022-05-14-21-23-49.png\,\coverWidth\:735,\coverHeight\:1087,\coverPrimary\:\aa8158\,\coverSecondary\:\557ea7\,\dir\:\/posts/2017\,\summary\:\表单的默认行为当form下只包裹一个input的情况下，在回车时，会自动提交（页面会刷新）解决办法：加入一个input display:none...\,\description\:\表单的默认行为当form下只包裹一个input的情况下，在回车时，会自动提交（页面会刷新）解决办法：加入一个input display:none...\,\words\:45,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-23-49.png\,\coverPathBase\:\/assets/2022-05-14-21-23-49\},{\text\:\雅虎性能优化的十四条规则\,\link\:\/posts/2017/2017-6-8-yahoo-rules14\,\frontmatter\:{\title\:\雅虎性能优化的十四条规则\,\tag\:\css\,\javaScript\,\author\:\Artiely\,\date\:\2017-06-08\,\cover\:\/2022-05-14-21-23-27.png\,\base64\:\602ad2\,\tinyCover\:\/cover/2022-05-14-21-23-27.png\,\coverWidth\:736,\coverHeight\:1028,\coverPrimary\:\483235\,\coverSecondary\:\b7cdca\,\dir\:\/posts/2017\,\summary\:\雅虎性能优化的十四条规则作为一位前端技术人员，了解网站的性能优化方面的知识是很基本的，但是我很惭愧我现在才了解到这一点T^T，以下是我学习yahoo性能优化十四条规则的笔记：一、减少http请求次数__如何减少http请求次数：- 组合页面中的图片到单个文件中，并使用css的background-image和background-position属性来实现所需部分的图片；- 组合多个脚本文件到单一...\,\description\:\雅虎性能优化的十四条规则作为一位前端技术人员，了解网站的性能优化方面的知识是很基本的，但是我很惭愧我现在才了解到这一点T^T，以下是我学习yahoo性能优化十四条规则的笔记：一、减少http请求次数__如何减少http请求次数：- 组合页面中的图片到单个文件中，并使用css的background-image和background-position属性来实现所需部分的图片；- 组合多个脚本文件到单一...\,\words\:931,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-23-27.png\,\coverPathBase\:\/assets/2022-05-14-21-23-27\},{\text\:\移动端滚动穿透解决办法\,\link\:\/posts/2017/2017-6-7-css-mobile-scroll-through\,\frontmatter\:{\title\:\移动端滚动穿透解决办法\,\tag\:\css\,\javaScript\,\author\:\Artiely\,\date\:\2017-06-07\,\cover\:\/2022-05-14-21-23-04.png\,\base64\:\c0cad6\,\tinyCover\:\/cover/2022-05-14-21-23-04.png\,\coverWidth\:736,\coverHeight\:1040,\coverPrimary\:\2c2444\,\coverSecondary\:\d3dbbb\,\dir\:\/posts/2017\,\summary\:\移动端滚动穿透解决办法问题在滚动模态框里的内容的时候，背景（模态框下面的内容）也在跟着滚动css 之 overflow: hidden.modal-open { &, body { overflow: hidden; height: 100%; }}页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案有两个缺点：由于 ...\,\description\:\移动端滚动穿透解决办法问题在滚动模态框里的内容的时候，背景（模态框下面的内容）也在跟着滚动css 之 overflow: hidden.modal-open { &, body { overflow: hidden; height: 100%; }}页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案有两个缺点：由于 ...\,\words\:597,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-23-04.png\,\coverPathBase\:\/assets/2022-05-14-21-23-04\},{\text\:\ 移动端1px解决方案\,\link\:\/posts/2017/2017-6-6-css-1px\,\frontmatter\:{\tag\:\css\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-19-43.png\,\tinyCover\:\/cover/2022-05-14-21-19-43.png\,\coverWidth\:736,\coverHeight\:1038,\coverPrimary\:\85a6a0\,\coverSecondary\:\7a595f\,\dir\:\/posts/2017\,\title\:\ 移动端1px解决方案\,\summary\:\移动端1px解决方案1.用小数来写px值IOS8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2...\,\description\:\移动端1px解决方案1.用小数来写px值IOS8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2...\,\words\:1055,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-19-43.png\,\coverPathBase\:\/assets/2022-05-14-21-19-43\},{\text\:\移动端css优化\,\link\:\/posts/2017/2017-6-6-css-ios-android\,\frontmatter\:{\title\:\移动端css优化\,\tag\:\css\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-20-47.png\,\base64\:\f3744e\,\tinyCover\:\/cover/2022-05-14-21-20-47.png\,\coverWidth\:736,\coverHeight\:1104,\coverPrimary\:716455,\coverSecondary\:\8e9baa\,\dir\:\/posts/2017\,\summary\:\ios 下定位的层如果有表单，在输入时键盘弹起，表单的光标不会跟随（系统bug） 解决办法：有表单数据尽量在页面完成，不用类似popup的浮层ios 下滑动不平滑html,body { -webkit-overflow-scrolling: touch;}ios 下表单的默认外观样式input select{ -webkit-appearance: none;}禁止ios 长按时不触发系统的...\,\description\:\ios 下定位的层如果有表单，在输入时键盘弹起，表单的光标不会跟随（系统bug） 解决办法：有表单数据尽量在页面完成，不用类似popup的浮层ios 下滑动不平滑html,body { -webkit-overflow-scrolling: touch;}ios 下表单的默认外观样式input select{ -webkit-appearance: none;}禁止ios 长按时不触发系统的...\,\words\:298,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-20-47.png\,\coverPathBase\:\/assets/2022-05-14-21-20-47\},{\text\:\什么是Sticky footers布局\,\link\:\/posts/2017/2017-6-6-css-sticky-footer\,\frontmatter\:{\title\:\什么是Sticky footers布局\,\tag\:\css\,\sticky footers\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-21-46.png\,\hot\:true,\base64\:\afc3d5\,\tinyCover\:\/cover/2022-05-14-21-21-46.png\,\coverWidth\:564,\coverHeight\:858,\coverPrimary\:\d7cdb8\,\coverSecondary\:\283247\,\dir\:\/posts/2017\,\summary\:\什么是Sticky footers布局在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。固定高度的实现方式html @Artielycss.sticker { height: auto; padding: 0 0 40px 0; ...\,\description\:\什么是Sticky footers布局在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。固定高度的实现方式html @Artielycss.sticker { height: auto; padding: 0 0 40px 0; ...\,\words\:235,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-21-46.png\,\coverPathBase\:\/assets/2022-05-14-21-21-46\},{\text\:\git 版本管理\,\link\:\/posts/2017/2017-6-6-git\,\frontmatter\:{\title\:\git 版本管理\,\tag\:\git\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-22-32.png\,\base64\:\282c3e\,\tinyCover\:\/cover/2022-05-14-21-22-32.png\,\coverWidth\:736,\coverHeight\:981,\coverPrimary\:\163f3f\,\coverSecondary\:\e9c0c0\,\dir\:\/posts/2017\,\summary\:\git 版本管理下载地址配置 git 用户和邮箱$ git config --global user.name \\\你的github用户名\\\$ git config --global user.email \\\你的github邮箱\\\不配置用户名和邮箱的话无法提交,因为git不知道你是谁查看配置$ git config --global user.name$ git config --global us...\,\description\:\git 版本管理下载地址配置 git 用户和邮箱$ git config --global user.name \\\你的github用户名\\\$ git config --global user.email \\\你的github邮箱\\\不配置用户名和邮箱的话无法提交,因为git不知道你是谁查看配置$ git config --global user.name$ git config --global us...\,\words\:720,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-22-32.png\,\coverPathBase\:\/assets/2022-05-14-21-22-32\}},\locales\:{},\scrollOffset\:134,\cleanUrls\:false});/script> /body>/html>
Port 443
HTTP/1.1 200 OKServer: AliyunOSSDate: Sat, 17 Jan 2026 13:29:47 GMTContent-Type: text/htmlContent-Length: 288507Connection: keep-aliveVary: Accept-Encodingx-oss-request-id: 696B8ECB6AFD36363975B28EAccept-Ranges: bytesETag: 9841D48CE2D87CBCFCCD0876EE3B7821Last-Modified: Mon, 18 Mar 2024 08:47:41 GMTx-oss-object-type: Normalx-oss-hash-crc64ecma: 1372239796868184491x-oss-storage-class: StandardContent-MD5: mEHUjOLYfLz8zQh27jt4IQx-oss-server-time: 4 !DOCTYPE html>html langen-US dirltr> head> meta charsetutf-8> meta nameviewport contentwidthdevice-width,initial-scale1> title>ArtielyBlog/title> meta namedescription contentJust playing around.> meta namegenerator contentVitePress v1.0.0-rc.45> link relpreload stylesheet href/assets/style.YRO5wqqk.css asstyle> script typemodule src/assets/app.2HGCEJft.js>/script> link relpreload href/assets/inter-roman-latin.Bu8hRsVA.woff2 asfont typefont/woff2 crossorigin> link relmodulepreload href/assets/chunks/framework.l0xeoHtg.js> link relmodulepreload href/assets/chunks/theme.l3YyJhge.js> link relmodulepreload href/assets/index.md.BTpQKT2a.lean.js> script idcheck-dark-mode>(()>{const elocalStorage.getItem(vitepress-theme-appearance)||auto,awindow.matchMedia((prefers-color-scheme: dark)).matches;(!e||eauto?a:edark)&&document.documentElement.classList.add(dark)})();/script> script idcheck-mac-os>document.documentElement.classList.toggle(mac,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));/script> /head> body> div idapp>!---->div classLayout data-v-5d98c3a5>!---->!---->!---->span tabindex-1 data-v-0f60ec36>/span>a href#VPContent classVPSkipLink visually-hidden data-v-0f60ec36> Skip to content /a>!---->!---->header classVPNav data-v-5d98c3a5 data-v-ae24b3ad>div classVPNavBar top data-v-ae24b3ad data-v-19c990f1>div classwrapper data-v-19c990f1>div classcontainer data-v-19c990f1>div classtitle data-v-19c990f1>div classVPNavBarTitle data-v-19c990f1 data-v-ab179fa1>a classtitle href/ data-v-ab179fa1>!---->!---->!---->span data-v-ab179fa1>Artiely'Blog/span>!---->!---->/a>/div>/div>div classcontent data-v-19c990f1>div classcontent-body data-v-19c990f1>!---->!---->div classVPNavBarSearch search data-v-19c990f1>!---->/div>nav aria-labelledbymain-nav-aria-label classVPNavBarMenu menu data-v-19c990f1 data-v-7f418b0f>span idmain-nav-aria-label classvisually-hidden data-v-7f418b0f>Main Navigation/span>!---->!---->a classVPLink link VPNavBarMenuLink active href/ tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>主页/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/posts/index.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>博客/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/timeline.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>归档/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/tag.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>标签/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/about.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>关于/span>!---->/a>!---->!---->a classVPLink link VPNavBarMenuLink href/comment.html tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>留言/span>!---->/a>!---->!---->a classVPLink link vp-external-link-icon VPNavBarMenuLink hrefhttps://github.com/artiely target_blank relnoreferrer tabindex0 data-v-7f418b0f data-v-42ef59de>!---->span data-v-42ef59de>github/span>!---->/a>!---->!---->/nav>!---->div classVPNavBarAppearance appearance data-v-19c990f1 data-v-e6aabb21>button classVPSwitch VPSwitchAppearance typebutton roleswitch titleSwitch to dark theme aria-checkedfalse data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3>span classcheck data-v-1d5665e3>span classicon data-v-1d5665e3>!---->span classvpi-sun sun data-v-d1f28634>/span>span classvpi-moon moon data-v-d1f28634>/span>!---->/span>/span>/button>/div>!---->div classVPFlyout VPNavBarExtra extra data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9>button typebutton classbutton aria-haspopuptrue aria-expandedfalse aria-labelextra navigation data-v-b6c34ac9>span classvpi-more-horizontal icon data-v-b6c34ac9>/span>/button>div classmenu data-v-b6c34ac9>div classVPMenu data-v-b6c34ac9 data-v-e7ea1737>!---->!---->!---->!---->div classgroup data-v-d0bd9dde>div classitem appearance data-v-d0bd9dde>p classlabel data-v-d0bd9dde>Appearance/p>div classappearance-action data-v-d0bd9dde>button classVPSwitch VPSwitchAppearance typebutton roleswitch titleSwitch to dark theme aria-checkedfalse data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3>span classcheck data-v-1d5665e3>span classicon data-v-1d5665e3>!---->span classvpi-sun sun data-v-d1f28634>/span>span classvpi-moon moon data-v-d1f28634>/span>!---->/span>/span>/button>/div>/div>/div>!---->!---->!---->/div>/div>/div>!---->!---->button typebutton classVPNavBarHamburger hamburger aria-labelmobile navigation aria-expandedfalse aria-controlsVPNavScreen data-v-19c990f1 data-v-e5dd9c1c>span classcontainer data-v-e5dd9c1c>span classtop data-v-e5dd9c1c>/span>span classmiddle data-v-e5dd9c1c>/span>span classbottom data-v-e5dd9c1c>/span>/span>/button>/div>/div>/div>/div>div classdivider data-v-19c990f1>div classdivider-line data-v-19c990f1>/div>/div>/div>!---->/header>!---->!---->div classVPContent is-home idVPContent data-v-5d98c3a5 data-v-1428d186>div classVPHome data-v-1428d186 data-v-686f80a6>!---->!---->!---->!---->!---->!---->!---->!---->!---->!---->div classvp-doc container style--vp-offset:calc(50% - Infinitypx); data-v-686f80a6 data-v-82d4af08>!---->div styleposition:relative; data-v-686f80a6>div>!---->!---->div classhome data-v-7b2ece8c>div data-v-7b2ece8c>h2 data-v-7b2ece8c>Miracles sometimes occur,/h2>h2 data-v-7b2ece8c>but one has to work terribly for them./h2>/div>p class data-v-7b2ece8c>人生除了眼前的苟且，还有未知的 bug , 和看不懂的 code ./p>/div>canvas idcanvas data-v-7b2ece8c>/canvas>!---->/div>/div>!---->/div>/div>/div>!---->!---->!---->/div>div classfooter>a title更换字体风格>svg t1677726706400 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svg p-id1305 width32 height32>path dM944.23079443-0.0572024H79.76920557c-44.28356519 0-80.32351067 36.03994548-80.32351067 80.32351067v863.50880869c0 44.28356519 36.03994548 80.32351067 80.32351067 80.32351068h864.46158886c44.28356519 0 80.32351067-36.03994548 80.32351067-80.32351068v-863.50880869c0-44.28356519-36.03994548-80.32351067-80.32351067-80.32351067z m-54.47417046 91.42547088a34.3829365 34.3829365 0 1 1 0 68.84872343 34.3829365 34.3829365 0 0 1 0-68.84872343z m-123.36431914 0a34.3829365 34.3829365 0 1 1 0 68.84872343 34.3829365 34.3829365 0 0 1 0-68.84872343zM932.7560072 932.2589045H91.2439928V245.67723045h841.5120144V932.2589045zM258.60190057 760.05424545h-6.29663417c-20.6297619 0-30.94464285-3.27259275-30.94464284-9.81777825 0-5.84095668 6.46233505-18.97275291 19.38700515-39.27111301l31.48317078-50.08309664h155.13746646l9.61065213 51.07730203c2.8583405 15.4516088 4.26679813 27.42349875 4.26679815 35.99852026 0 8.0364936-12.13759084 12.0961656-36.49562295 12.09616561h-7.78794225l-3.27259275 15.61730972h139.68585767l3.27259274-15.61730972-6.29663415-0.24855135c-13.09037101-0.66280359-21.87251863-3.93539635-26.30501769-9.81777825s-8.82357285-20.21550965-13.21464666-43.04080846l-59.56947312-310.02638158h-18.39279976L218.33658217 711.46245689c-16.11441241 25.14511138-26.05646633 39.27111301-29.82616179 42.41943008s-13.54604848 5.09530263-29.32905908 5.92380713l-4.76390084 0.24855135-3.0240414 15.61730972h103.93588876l3.27259275-15.61730972z m131.6907893-296.19035654l32.43595093 175.14584999H282.21427863l108.07841124-175.14584999z m240.34915365 318.06287518c22.12106998 0 45.98199941-11.06053499 71.58278827-33.14017975s48.88176514-51.53297952 69.71865315-88.36000427l-22.9909997 115.20354987h96.23079695l3.0240414-15.61730971-4.51534949-0.24855134c-17.77142139-1.15990629-28.29342846-2.36123781-31.44174553-3.52114411s-4.80532606-4.43249904-4.80532607-9.81777825c0-10.2320305 1.40845763-22.24534565 4.26679814-35.99852026l40.96954722-208.07890362H803.21932958c-10.2320305-2.07126124-19.01417813-3.64541977-26.38786813-4.72247562s-13.38034757-1.57415854-18.06139796-1.57415853c-44.53211653 0-85.99876645 23.44667717-124.35852452 70.38145675s-57.49821187 97.68067982-57.49821188 152.23770073c0 21.00258892 4.47392427 36.78559952 13.4217728 47.34903183s22.41104656 15.86586107 40.30674363 15.86586105z m12.0961656-155.01319079c8.86499808-30.1989888 19.46985561-54.34989479 31.81457257-72.45271799 15.53445925-22.6595979 35.83281936-33.96868425 60.85365508-33.96868425A128.50104699 128.50104699 0 0 1 796.79841975 535.61237808l-17.39859436 87.32437365c-51.90580654 81.19344039-93.86955915 121.79016059-125.84983262 121.79016059-8.0364936 0-14.08457639-3.02404141-18.06139796-9.07212421s-6.00665758-15.07878178-6.00665758-27.1749474c0-24.15090599 4.43249904-51.32585339 13.25607189-81.52484219z fillvar(--c-brand) p-id1306>/path>/svg>/a>a titlebilibili hrefhttps://space.bilibili.com/31432769/ target_blank>svg t1677726664284 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svg p-id1064 width32 height32>path dM0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z fill#EC5D85 p-id1065>/path>path dM512 241.96096h52.224l65.06496-96.31744c49.63328-50.31936 89.64096 0.43008 63.85664 45.71136l-34.31424 51.5072c257.64864 5.02784 257.64864 43.008 257.64864 325.03808 0 325.94944 0 336.46592-404.48 336.46592S107.52 893.8496 107.52 567.90016c0-277.69856 0-318.80192 253.14304-324.95616l-39.43424-58.368c-31.26272-54.90688 37.33504-90.40896 64.68608-42.37312l60.416 99.80928c18.18624-0.0512 41.18528-0.0512 65.66912-0.0512z fill#EF85A7 p-id1066>/path>path dM512 338.5856c332.8 0 332.8 0 332.8 240.64s0 248.39168-332.8 248.39168-332.8-7.75168-332.8-248.39168 0-240.64 332.8-240.64z fill#EC5D85 p-id1067>/path>path dM281.6 558.08a30.72 30.72 0 0 1-27.47392-16.97792 30.72 30.72 0 0 1 13.73184-41.216l122.88-61.44a30.72 30.72 0 0 1 41.216 13.74208 30.72 30.72 0 0 1-13.74208 41.216l-122.88 61.44a30.59712 30.59712 0 0 1-13.73184 3.23584zM752.64 558.08a30.60736 30.60736 0 0 1-12.8512-2.83648l-133.12-61.44a30.72 30.72 0 0 1-15.04256-40.7552 30.72 30.72 0 0 1 40.76544-15.02208l133.12 61.44A30.72 30.72 0 0 1 752.64 558.08zM454.656 666.88a15.36 15.36 0 0 1-12.288-6.1952 15.36 15.36 0 0 1 3.072-21.49376l68.5056-50.91328 50.35008 52.62336a15.36 15.36 0 0 1-22.20032 21.23776l-31.5904-33.024-46.71488 34.72384a15.28832 15.28832 0 0 1-9.13408 3.04128z fill#EF85A7 p-id1068>/path>path dM65.536 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM362.25024 383.03744l34.816 303.17568h34.64192L405.23776 381.1328zM309.52448 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM446.86336 542.98624h45.80352V705.3312h-33.87392zM296.6016 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM326.99392 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM470.62016 459.88864h19.456v62.27968h-19.456zM440.23808 459.88864h22.20032v62.27968h-16.62976z fill#FFFFFF p-id1069>/path>path dM243.56864 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z fill#EB5480 p-id1070>/path>path dM513.29024 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM810.00448 383.03744l34.816 303.17568h34.64192L852.992 381.1328zM757.27872 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM894.6176 542.98624h45.80352V705.3312H906.5472zM744.35584 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM774.74816 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM918.3744 459.88864h19.456v62.27968h-19.456zM887.99232 459.88864h22.20032v62.27968h-16.62976z fill#FFFFFF p-id1071>/path>path dM691.32288 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z fill#EB5480 p-id1072>/path>/svg>/a>/div>!---->/div> script>window.__VP_HASH_MAP__JSON.parse({\design.md\:\DH2-gyoE\,\docs_2023-01-17-puerts-nodejs-unity_index.md\:\Cuu69fcG\,\docs_2022-11-18-electron-countdown_index.md\:\BywmCqpS\,\about.md\:\CC_1udDQ\,\docs_2022-11-18-electron-live2d_index.md\:\BsD2grog\,\design2.md\:\Ae3lk_Hw\,\comment.md\:\I6qwc9h6\,\docs_2023-01-05-pyqt5_index.md\:\B20WmFbg\,\posts_2017_2017-6-10-tcp.md\:\D7XwMFwt\,\posts_2017_2017-6-8-yahoo-rules14.md\:\LDjoEKoE\,\posts_2017_2017-6-9-form-default-submit.md\:\0cfNsajG\,\index.md\:\BTpQKT2a\,\docs_2023-02-13-fe-safe_index.md\:\BPrVB9GD\,\posts_2017_2017-6-6-css-sticky-footer.md\:\C0ofMk83\,\docs_2023-01-04-new-year-plan_index.md\:\pFVGl5x1\,\posts_2017_2017-6-6-git.md\:\BPsvnfFk\,\posts_2017_2017-7-4-moment.md\:\VbM0cuTP\,\posts_2017_2017-6-6-css-ios-android.md\:\BNuNDJcv\,\docs_2022-12-08-fe_index.md\:\cvNqG1T2\,\posts_2017_2017-6-7-css-mobile-scroll-through.md\:\C06zVkhx\,\posts_2017_2017-7-7-js-rules.md\:\DOgwQX2q\,\posts_2017_2017-7-7-rules-file.md\:\CMQwSX3H\,\posts_2018_2018-10-10-chrome-dev-tips.md\:\q0oRE8Wp\,\posts_2017_2017-7-7-css-rules.md\:\DCC4TxC2\,\posts_2017_2017-6-6-css-1px.md\:\BQIwR9os\,\posts_2017_2017-7-7-rules-html.md\:\DPi4IR5I\,\posts_2018_2018-10-10-get-post.md\:\Bv_r_QwS\,\posts_2018_2018-1-30-centos-setup-nodejs.md\:\B96edCgO\,\posts_2018_2018-10-10-git-green-pointer.md\:\DdrSMU2H\,\posts_2018_2018-10-10-pm2.md\:\BrOxX4gS\,\posts_2018_2018-10-10-vue-pracel.md\:\BGkupVAK\,\posts_2018_2018-10-10-npm-nrm.md\:\o8dNSRzm\,\posts_2018_2018-10-10-js-bit-operation.md\:\CEtwaPm9\,\posts_2018_2018-10-10-axios.md\:\B0dUG5DX\,\posts_2018_2018-3-12-nodejs-npm.md\:\cflt7wsE\,\posts_2018_2018-10-7-node-spider.md\:\WQsctoHR\,\posts_2018_2018-7-10-electron-message.md\:\DS8SrP50\,\posts_2018_2018-6-9-nuxt.md\:\ZHQV0aXN\,\posts_2018_2018-7-11-electron-nedb.md\:\Dy2gx15m\,\posts_2018_2018-7-11-electron-shortcut-cliboard-nativeimage.md\:\WquIcjkc\,\posts_2018_2018-7-3-electron-init.md\:\DlbFXtUs\,\posts_2018_2018-7-4-electron-base.md\:\C9oPfOos\,\posts_2018_2018-7-5-electron-model.md\:\Ce-MKzI1\,\posts_2018_2018-7-8-electron-shell-url-webview.md\:\CgWVryh1\,\posts_2018_2018-7-8-electron-dialog.md\:\BVkuKSv5\,\posts_2018_2018-7-7-electron-main-render.md\:\D_acQgb0\,\posts_2018_2018-7-6-electron-menu-shortcut.md\:\BHb97JZI\,\posts_2018_2018-7-9-electron-ico.md\:\Dufi3tf3\,\posts_2018_2018-8-8-question.md\:\D_OOGwFE\,\posts_2018_2018-8-7-egg-start.md\:\bP1LZCiH\,\posts_2018_2018-8-8-vue-rules.md\:\DqHqgAR6\,\posts_2018_2018-7-10-websocket.md\:\Ba61GAfA\,\posts_2019_2019-10-3-alinode.md\:\DSKh174R\,\posts_2018_2018-9-7-js.md\:\BgNj3s-m\,\posts_2019_2019-4-3-sentry-sourcemap.md\:\TIGLFmrk\,\posts_2019_2019-10-27-node-pm2.md\:\Bfu2f85v\,\posts_2019_2019-4-16-vue-cli3_to-plugin.md\:\BU3vK0Sf\,\posts_2019_2019-11-16-nodejs-api.md\:\_6jtGsN0\,\posts_2019_2019-5-15-vue-admin.md\:\RD2CNoAF\,\posts_2019_2019-4-3-vuepress-theme.md\:\BGYfqP9Q\,\posts_2019_2019-5-5-restful-graphql.md\:\CVGxO4st\,\posts_2018_2018-6-26-web-koa-egg.md\:\DCeIQIHh\,\posts_2019_2019-4-15-nodejs-tcp-udp-h2.md\:\0JFWdytS\,\posts_2019_2019-6-1-linux.md\:\B63QVe4D\,\posts_2019_2019-6-27-eslint-test.md\:\Cw-I5iuR\,\posts_2019_2019-6-12-deploy.md\:\CaPFE9z0\,\posts_2019_2019-7-6-dart-flutter-conf.md\:\CNGObLqL\,\posts_2019_2019-6-4-docker.md\:\DqkqiJP0\,\posts_2019_2019-7-6-android-studio-flutter-shortcut.md\:\DdeRB7-O\,\posts_2019_2019-6-6-vue-observable.md\:\DFR_PSHj\,\posts_2019_2019-7-13-automated-testing.md\:\Dukvzkbv\,\posts_2019_2019-6-6-css-fixedleft-autoright.md\:\BwFxA0Hp\,\posts_2020_2020-3-16-windows-plugin_2020-3-16-windows-plugin.md\:\rvxwv3X8\,\posts_2020_2020-3-16-chrome-plugin_2020-3-16-chrome-plugin.md\:\uN7tIPQ6\,\posts_2019_2019-6-19-fontend-performance-optimization.md\:\BSfICx63\,\posts_2020_2020-12-31-css_2020-12-31-css.md\:\bZeIfv-s\,\posts_2020_2020-3-16-vscode-plugin_2020-3-16-vscode-plugin.md\:\tzVvV9gg\,\posts_2020_2020-3-18-electron-mirror-down_2020-3-18-electron-mirror-down.md\:\BPaqX4mb\,\posts_2020_2020-3-19-timer.js_2020-3-19-timer.js.md\:\BDdUZgHu\,\posts_2020_2020-4-2-cmder_2020-4-2-cmder.md\:\D6AEfzdJ\,\posts_2020_2020-4-1-plupload_2020-4-1-plupload.md\:\Bm0n5mg1\,\posts_2020_2020-3-20-antd-vue-pro_2020-3-20-antd-vue-pro.md\:\BLvVQgqa\,\posts_2020_2020-3-31-shituzhengmei_2020-3-31-shituzhengmei.md\:\EcFfH8nX\,\posts_2020_2020-3-29-vuepress-plugin_2020-3-29-vuepress-plugin.md\:\B2Il_IE8\,\posts_2020_2020-4-29-vue-hook-lifecycle_2020-4-29-vue-hook-lifecycle.md\:\C_lhshRu\,\posts_2020_2020-3-18-electron-updater_2020-3-18-electron-updater.md\:\DfMR9DVE\,\posts_2019_2019-6-4-nodejs-events.md\:\DV1U-qvu\,\posts_2020_2020-3-20-js-how-to-work_2020-3-20-js-how-to-work.md\:\BeQJl5G7\,\posts_2020_2020-4-4-yiqin_2020-4-4-yiqin.md\:\xtZUpIHX\,\posts_2020_2020-5-29-axios_2020-5-29-axios.md\:\ePbhQs8J\,\posts_2020_2020-6-12-icon_2020-6-12-icon.md\:\BaaLIH9c\,\posts_2020_2020-6-20-limit-chars_2020-6-20-limit-chars.md\:\CwpIuuVz\,\posts_2020_2020-6-23-charslimit_2020-6-23-charslimit.md\:\CsoAw7di\,\posts_2020_2020-6-25-photo_2020-6-25-photo.md\:\BcWzRd9l\,\posts_2020_2020-6-25-custom-event_2020-6-25-custom-event.md\:\DNLK2qQ9\,\posts_2020_2020-4-6-plop_2020-4-6-plop.md\:\DJGwoxg4\,\posts_2020_2020-5-22-ali-oss_2020-5-22-ali-oss.md\:\EeilOsGQ\,\posts_2019_2019-8-14-nosql.md\:\BoPqgGE3\,\posts_2020_2020-6-5-03-vue-config_2020-6-5-03-vue-config.md\:\DLQLoCUL\,\posts_2020_2020-6-5-01-vue-cli_2020-6-5-01-vue-cli.md\:\C3S3K0FT\,\posts_2020_2020-6-5-02-vue-dir_2020-6-5-02-vue-dir.md\:\V0CHXN9N\,\posts_2020_2020-7-1-vuex-api_2020-7-1-vuex-api.md\:\CVuW9dhU\,\posts_2020_2020-6-5-06-local-preview_2020-6-5-06-local-preview.md\:\m6C_N8TU\,\posts_2020_2020-6-5-04-vue.webpack_2020-6-5-04-vue.webpack.md\:\D7uaS2Z8\,\posts_2020_2020-7-14-share_2020-7-14-share.md\:\noLpwmmh\,\posts_2020_2020-7-21-taro_2020-7-21-taro.md\:\K7PGi0hJ\,\posts_2020_2020-7-23-temp_2020-7-23-temp.md\:\2uFKv6tm\,\posts_2020_2020-7-9-thks-js_2020-7-9-thks-js.md\:\Bh6I61cG\,\posts_2020_2020-6-5-05-env-mode_2020-6-5-05-env-mode.md\:\C4fEkn5t\,\posts_2020_2020-7-1-vue-api_2020-7-1-vue-api.md\:\D8kFY8KA\,\posts_2020_2020-8-17_2020-8-17.md\:\FdAhPZ6w\,\posts_2020_2020-9-1-fw_2020-9-1-fw.md\:\Cr4TxvH5\,\posts_2020_2020-9-15-js-arr_2020-9-15-js-arr.md\:\BONfVFxK\,\posts_2020_2020-9-1-fw2_2020-9-1-fw2.md\:\BbolpjeW\,\posts_2020_2020-7-13-madel_2020-7-13-madel.md\:\FYWrNDW8\,\posts_2020_2020-6-29-component_2020-6-29-component.md\:\1Y5Zu8LR\,\posts_2020_2020-9-3-brower_2020-9-3-brower.md\:\D-zCA5q-\,\posts_2021_2021-1-8-threejs_index.md\:\Bx3eIQ-c\,\posts_2021_2021-12-1-kaboom_2021-12-1.md\:\B5vRk7ES\,\posts_2020_2020-9-5-what-happens_2020-9-5-what-happens.md\:\B38feyIh\,\posts_2020_2020-9-7-recursive_2020-9-7-recursive.md\:\Dvrx72H7\,\posts_2021_2021-12-29-unity_index.md\:\DtP6yuYc\,\posts_2021_2021-1-9-js_index.md\:\CGBhGm6G\,\posts_2020_2020-9-24-interview_2020-9-24-interview.md\:\DliNT6s6\,\posts_2020_2020-9-2-proxy_index.md\:\wiOEe9ev\,\posts_2021_2021-6-15-mini_2021-6-15-mini.md\:\CDaU9A1V\,\posts_2021_2021-3-18-appleid_2021-3-18-appleid.md\:\DM9etRjY\,\posts_2021_2021-1-3-puppeteer_2021-1-3-puppeteer.md\:\Bas6z7Fr\,\posts_2021_2021-8-15-resize-observer_2021-8-15-resize-observer.md\:\Drd7d9NY\,\posts_2021_2021-7-23-pixijs_2021-7-23-pixijs.md\:\Qi7cd-CY\,\posts_2021_2021-9-9-taro_index.md\:\XfYgUG3O\,\posts_2021_2021-8-16-min-share_2021-8-16-min-share.md\:\Dc-h_Avu\,\posts_2022_2022-05-11-puppet-master-props_index.md\:\Cl-W_OWv\,\posts_2022_2022-05-27-agent_index.md\:\DyzgfOsa\,\posts_2022_2022-06-17-probuilder_index.md\:\C5vinz4X\,\posts_2022_2022-05-09-algolia_index.md\:\QmP9w81P\,\posts_2022_2022-06-29-unity-bilibili_index.md\:\Bx73EnHV\,\posts_2022_2022-06-20-nav-mesh_index.md\:\CTKhnJQ2\,\posts_2022_2022-05-16-scroll_index.md\:\Dr_ZSH6N\,\posts_2022_2022-06-22-mac-photo_index.md\:\Dz8z4kw8\,\posts_2022_2022-06-02-unity-transform_index.md\:\kh_NurKz\,\posts_2022_2022-05-17-markdown-it_index.md\:\DXOC0pwk\,\posts_2022_2022-07-05-unity_index.md\:\5B-07agI\,\posts_2022_2022-07-01-mongo_index.md\:\Ddnf_uX_\,\posts_2022_2022-1-10-js-list_index.md\:\DL2FSeaC\,\posts_2022_2022-1-11md-test_index.md\:\DzHtlGhA\,\posts_2021_2021-2-23-proxy_2021-2-23-proxy.md\:\BTFdpM2a\,\posts_2022_2022-1-13-css-unicode-range_index.md\:\olC2q-OF\,\posts_2022_2022-1-15-git-stash_index.md\:\C2CA-Nd3\,\posts_2022_2022-1-19-unity-spine_index.md\:\UZ2XVGyw\,\posts_2022_2022-1-20-unity-itween_index.md\:\Bh4QbZvj\,\posts_2022_2022-1-13-js-a-a-1_index.md\:\DpR4N0sP\,\posts_2022_2022-06-29-unity-transparent_index.md\:\DeGybw7c\,\posts_2022_2022-1-6-js-single_index.md\:\BA7eVQT-\,\posts_2022_2022-1-12-js-array_index.md\:\Bq4jBP30\,\posts_2022_2022-1-13-js-str-is-num_index.md\:\vmnZNG-a\,\posts_2022_2022-1-7-js-proxy_index.md\:\Dr4mdg5O\,\posts_2022_2022-1-9-frontend_index.md\:\BsStg5mB\,\posts_2022_2022-11-14-py-env_index.md\:\BvL-cjTs\,\posts_2022_2022-1-9-js-prototype_index.md\:\BPWeWill\,\posts_2022_2022-11-18-douyin-danmu_index.md\:\B6OeMziT\,\posts_2022_2022-1-8-js-provider_index.md\:\DSQG2KcU\,\posts_2022_2022-11-16-unity-materials_index.md\:\DXGz3Zps\,\posts_2022_2022-11-18-slack-hook_index.md\:\D78oTm_p\,\posts_2022_2022-11-18-vue-wc_index.md\:\DDooQIUp\,\posts_2022_2022-11-26-protobuf_index.md\:\oF1QU9k4\,\posts_2022_2022-12-07-open-ai_index.md\:\J7hacyJv\,\posts_2022_2022-1-9-js-oneline_index.md\:\DkOgbcEn\,\posts_2022_2022-11-28-csharp-playwright_index.md\:\DcMoVist\,\posts_2022_2022-12-02-image-animated_index.md\:\jfCaWOEy\,\posts_2022_2022-11-26-puppeteer-ws_index.md\:\Cxm_r0ZD\,\posts_2022_2022-11-17-github-actions_index.md\:\D_EguZSJ\,\posts_2022_2022-12-08-chrome-ext-ws_index.md\:\BbL-7-Px\,\posts_2022_2022-3-14-unity-layout_index.md\:\12Zg9fCv\,\posts_2022_2022-2-9-family-meeting_index.md\:\7lXvEYfC\,\posts_2022_2022-3-21-webext_index.md\:\DxJmDCgK\,\posts_2022_2022-3-17-unity-theme_index.md\:\C4PYKThv\,\posts_2022_2022-3-25-unity-ragdoll_index.md\:\DDuscR06\,\posts_2022_2022-3-24-unity-nodejs_index.md\:\CSfUAa_k\,\posts_2022_2022-2-22-unity_index.md\:\D7OFzUNe\,\posts_2022_2022-4-12-unity-ragdoll_index.md\:\RzRJ0cDe\,\posts_2022_2022-4-15-unity-puppet-master_index.md\:\CfAIU284\,\posts_2022_2022-3-23-vscodeext_index.md\:\DvHxQGzO\,\posts_2022_2022-4-18-system-win_index.md\:\C0PU1p67\,\posts_2022_2022-12-20-ext-style_index.md\:\VPXY4nCl\,\posts_2022_2022-2-28-spine_index.md\:\CjIecKaU\,\posts_2022_2022-12-20-ws_index.md\:\lmiUYIim\,\posts_2022_2022-3-18-plugins_index.md\:\BVc0FaPM\,\posts_2022_2022-4-21-unity-websocket_index.md\:\w37xXjEs\,\posts_2022_2022-4-24-unity-human-fall-flat_index.md\:\DUL3x4Sf\,\posts_2022_2022-4-24-puppeteer-pm2_index.md\:\BWdPkY52\,\posts_2022_2022-3-17-unity-ray_index.md\:\CAihyRJB\,\posts_2022_2022-4-21-puppeteer_index.md\:\DIkDWKAw\,\posts_2022_2022-5-5-log4js_index.md\:\bp8QJR9m\,\posts_2022_2023-01-31-eslint-save_index.md\:\CKzLJo1z\,\posts_2022_2022-5-3-flex-css_index.md\:\vIZR3rxI\,\posts_index.md\:\0wwc1nCB\,\timeline.md\:\BSMUx0q1\,\tag.md\:\DOpbzRpu\,\posts_2024_2024-03-15_index.md\:\M6YKxLoL\,\posts_2022_2023-02-12-changelog_index.md\:\1n8ztwNL\,\posts_2022_2023-02-03-electron-vite_index.md\:\DCvuzJcE\,\posts_2022_2023-01-12-native-message_index.md\:\BKDafslP\});window.__VP_SITE_DATA__JSON.parse({\lang\:\en-US\,\dir\:\ltr\,\title\:\ArtielyBlog\,\description\:\Just playing around.\,\base\:\/\,\head\:,\router\:{\prefetchLinks\:true},\appearance\:true,\themeConfig\:{\nav\:{\text\:\主页\,\link\:\/\,\activeMatch\:\^/$|^/index\},{\text\:\博客\,\link\:\/posts/index\,\activeMatch\:\/posts/\},{\text\:\归档\,\link\:\/timeline\,\activeMatch\:\/timeline\},{\text\:\标签\,\link\:\/tag\,\activeMatch\:\/tag\},{\text\:\关于\,\link\:\/about\,\activeMatch\:\/about\},{\text\:\留言\,\link\:\/comment\,\activeMatch\:\/comment\},{\text\:\github\,\link\:\https://github.com/artiely\},\posts\:{\text\:\ git 凭证切换\,\link\:\/posts/2024/2024-03-15/index\,\frontmatter\:{\tag\:\git\,\cover\:\/2022-05-11-09-21-21.png\,\tinyCover\:\/cover/2022-05-11-09-21-21.png\,\coverWidth\:474,\coverHeight\:1001,\coverPrimary\:\1A2635\,\coverSecondary\:\e5d9ca\,\dir\:\/posts/2024/2024-03-15\,\title\:\ git 凭证切换\,\summary\:\git 凭证切换多个github账号，有时候需要切换提交代码我们可以通过修改凭证的方式，来切换凭证。在macOS上，Git使用git-credential-osxkeychain来帮助用户安全地存储和访问Git仓库的认证信息，如用户名和密码或个人访问令牌。如果您需要修改或重新设置这些认证信息，可以按照以下步骤操作：查找存储的凭证首先，您可能想要查看当前存储的凭证。运行以下命令来查找与特定主机相关的...\,\description\:\git 凭证切换多个github账号，有时候需要切换提交代码我们可以通过修改凭证的方式，来切换凭证。在macOS上，Git使用git-credential-osxkeychain来帮助用户安全地存储和访问Git仓库的认证信息，如用户名和密码或个人访问令牌。如果您需要修改或重新设置这些认证信息，可以按照以下步骤操作：查找存储的凭证首先，您可能想要查看当前存储的凭证。运行以下命令来查找与特定主机相关的...\,\date\:\2024-03-15\,\author\:\tanjie-ola\,\words\:523,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-11-09-21-21.png\,\coverPathBase\:\/assets/2022-05-11-09-21-21\},{\text\:\ 自动更新 changelog\,\link\:\/posts/2022/2023-02-12-changelog/index\,\frontmatter\:{\cover\:\/2023-02-12-15-48-53.png\,\tag\:\changelog\,\dir\:\/posts/2022/2023-02-12-changelog\,\title\:\ 自动更新 changelog\,\summary\:\自动更新 changelog安装依赖\\\conventional-changelog-cli\\\: \\\^2.2.2\\\,\\\zx\\\: \\\^7.1.1\\\\\\prompts\\\: \\\^2.4.2\\\,创建 scripts\\\scripts\\\: { //... \\\build\\\: \\\npm run typecheck && electron-vite build\\\, \\\changelog\\\: \\\conv...\,\description\:\自动更新 changelog安装依赖\\\conventional-changelog-cli\\\: \\\^2.2.2\\\,\\\zx\\\: \\\^7.1.1\\\\\\prompts\\\: \\\^2.4.2\\\,创建 scripts\\\scripts\\\: { //... \\\build\\\: \\\npm run typecheck && electron-vite build\\\, \\\changelog\\\: \\\conv...\,\date\:\2023-02-12\,\author\:\tanjie-ola\,\words\:447,\readTime\:\3 min read\},\coverPath\:\/assets/2023-02-12-15-48-53.png\,\coverPathBase\:\/assets/2023-02-12-15-48-53\},{\text\:\ electron-vite 笔记\,\link\:\/posts/2022/2023-02-03-electron-vite/index\,\frontmatter\:{\cover\:\/2023-02-12-15-50-56.png\,\tag\:\electron\,\dir\:\/posts/2022/2023-02-03-electron-vite\,\title\:\ electron-vite 笔记\,\summary\:\electron-vite 笔记前后通讯// 主进程发mainWindow.webContents.send(dm-message-to-client, JSON.stringify(msg))// 渲染进程收window.electron.ipcRenderer.on(dm-message-to-client,(msg)>{ console.log(msg)})// 渲染进程发w...\,\description\:\electron-vite 笔记前后通讯// 主进程发mainWindow.webContents.send(dm-message-to-client, JSON.stringify(msg))// 渲染进程收window.electron.ipcRenderer.on(dm-message-to-client,(msg)>{ console.log(msg)})// 渲染进程发w...\,\date\:\2023-02-03\,\author\:\tanjie-ola\,\words\:1240,\readTime\:\7 min read\},\coverPath\:\/assets/2023-02-12-15-50-56.png\,\coverPathBase\:\/assets/2023-02-12-15-50-56\},{\text\:\ 项目保存时自动修复 eslint\,\link\:\/posts/2022/2023-01-31-eslint-save/index\,\frontmatter\:{\cover\:\/2023-02-12-15-52-11.png\,\tag\:\eslint\,\dir\:\/posts/2022/2023-01-31-eslint-save\,\title\:\ 项目保存时自动修复 eslint\,\summary\:\项目保存时自动修复 eslintvscode 安装 eslint.vscode/settings.json\\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: true, }如果有其他的 如 markdownlint \\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: t...\,\description\:\项目保存时自动修复 eslintvscode 安装 eslint.vscode/settings.json\\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: true, }如果有其他的 如 markdownlint \\\editor.codeActionsOnSave\\\: { \\\source.fixAll.eslint\\\: t...\,\date\:\2023-01-31\,\author\:\tanjie-ola\,\words\:41,\readTime\:\1 min read\},\coverPath\:\/assets/2023-02-12-15-52-11.png\,\coverPathBase\:\/assets/2023-02-12-15-52-11\},{\text\:\ 浏览器插件与原生应用的通讯\,\link\:\/posts/2022/2023-01-12-native-message/index\,\frontmatter\:{\tag\:\chrome\,\cover\:\/2023-02-12-15-58-16.png\,\dir\:\/posts/2022/2023-01-12-native-message\,\title\:\ 浏览器插件与原生应用的通讯\,\summary\:\浏览器插件与原生应用的通讯参考示例chrome 插件文档关于nativeMessaging与注册表chromemdn这里主要以mac/win系统chrome为主原生应用的manifest{ \\\name\\\: \\\com.my_company.my_application\\\, \\\description\\\: \\\My Application\\\, \\\path\\\: \\\C:\\\\\\\\Program Files\\\\\\\\...\,\description\:\浏览器插件与原生应用的通讯参考示例chrome 插件文档关于nativeMessaging与注册表chromemdn这里主要以mac/win系统chrome为主原生应用的manifest{ \\\name\\\: \\\com.my_company.my_application\\\, \\\description\\\: \\\My Application\\\, \\\path\\\: \\\C:\\\\\\\\Program Files\\\\\\\\...\,\date\:\2023-01-12\,\author\:\tanjie-ola\,\words\:1364,\readTime\:\7 min read\},\coverPath\:\/assets/2023-02-12-15-58-16.png\,\coverPathBase\:\/assets/2023-02-12-15-58-16\},{\text\:\ 写一个插件获取元素的样式\,\link\:\/posts/2022/2022-12-20-ext-style/index\,\frontmatter\:{\tag\:\css\,\chrome\,\cover\:\/2022-12-22-17-17-45.png\,\coverPrimary\:\182828\,\coverSecondary\:\e7d7d7\,\dir\:\/posts/2022/2022-12-20-ext-style\,\title\:\ 写一个插件获取元素的样式\,\summary\:\写一个插件获取元素的样式其背景是可以获取好看网站的样式可直接复制对css scan类似插件原理探索price看看，卖的挺贵的，买不起又无法不白嫖，只好自己动手了第一版的对比效果diff百度输入框的效果baidu主要apigetComputedStyle,getPropertyValuevar style window.getComputedStyle(document.querySelecto...\,\description\:\写一个插件获取元素的样式其背景是可以获取好看网站的样式可直接复制对css scan类似插件原理探索price看看，卖的挺贵的，买不起又无法不白嫖，只好自己动手了第一版的对比效果diff百度输入框的效果baidu主要apigetComputedStyle,getPropertyValuevar style window.getComputedStyle(document.querySelecto...\,\date\:\2022-12-20\,\author\:\tanjie-ola\,\words\:2307,\readTime\:\12 min read\},\coverPath\:\/assets/2022-12-22-17-17-45.png\,\coverPathBase\:\/assets/2022-12-22-17-17-45\},{\text\:\ websocket 逆向(各直播平台弹幕获取)\,\link\:\/posts/2022/2022-12-20-ws/index\,\frontmatter\:{\cover\:\/2022-12-20-19-22-05.png\,\tag\:\websocket\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-12-20-ws\,\title\:\ websocket 逆向(各直播平台弹幕获取)\,\summary\:\websocket 逆向(各直播平台弹幕获取)声明：本内容仅供学习参考，本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害 不承担责任。 如有侵权，请联系我进行删除。什么是 websocketWebSocket 是一种网络通信协议，它允许客户端（通常是浏览器）和服务器之间进行全双工通信。这意味着服务器可以主动发送信息给客户端，而不是像传统的网络协议（例如 H...\,\description\:\websocket 逆向(各直播平台弹幕获取)声明：本内容仅供学习参考，本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害 不承担责任。 如有侵权，请联系我进行删除。什么是 websocketWebSocket 是一种网络通信协议，它允许客户端（通常是浏览器）和服务器之间进行全双工通信。这意味着服务器可以主动发送信息给客户端，而不是像传统的网络协议（例如 H...\,\date\:\2022-12-20\,\author\:\tanjie-ola\,\words\:2232,\readTime\:\12 min read\},\coverPath\:\/assets/2022-12-20-19-22-05.png\,\coverPathBase\:\/assets/2022-12-20-19-22-05\},{\text\:\chrome 插件 监听websocket\,\link\:\/posts/2022/2022-12-08-chrome-ext-ws/index\,\frontmatter\:{\title\:\chrome 插件 监听websocket\,\cover\:\/2022-12-19-09-44-31.png\,\tag\:\chrome\,\coverPrimary\:\684858\,\coverSecondary\:\97b7a7\,\dir\:\/posts/2022/2022-12-08-chrome-ext-ws\,\summary\:\chrome 插件 监听websocket安装模板npx degit antfu/vitesse-webext my-webextcd my-webextyarnyarn dev修改配置并添加页面在src下新建文件夹inspector包含index.html inspector包含main.tsimport { createApp } from vueimport App from ./I...\,\description\:\chrome 插件 监听websocket安装模板npx degit antfu/vitesse-webext my-webextcd my-webextyarnyarn dev修改配置并添加页面在src下新建文件夹inspector包含index.html inspector包含main.tsimport { createApp } from vueimport App from ./I...\,\date\:\2022-12-08\,\author\:\tanjie-ola\,\words\:783,\readTime\:\4 min read\},\coverPath\:\/assets/2022-12-19-09-44-31.png\,\coverPathBase\:\/assets/2022-12-19-09-44-31\},{\text\:\openAI chatGPT 试玩\,\link\:\/posts/2022/2022-12-07-open-ai/index\,\frontmatter\:{\tag\:\ai\,\cover\:\/2022-12-07-14-01-57.png\,\coverPrimary\:\281848\,\coverSecondary\:\d7e7b7\,\title\:\openAI chatGPT 试玩\,\dir\:\/posts/2022/2022-12-07-open-ai\,\summary\:\openAI chatGPT 试玩前提可以访问google注册地址一个国外手机号虚拟手机号申请1 看运气，本人没成功虚拟手机号申请2 美国的直接一次成功，比较贵2种方式都是有效期内没收到验证码可以退费用的虚拟手机号申请1便宜 失败率大流程： 注册-> 充值-> 选择服务-> 激活-> 复制手机号发送验证码->等待验证码1虚拟手机号申请2贵 成功率高流程：注册-> 购买卡密-> 复制卡密-> 获...\,\description\:\openAI chatGPT 试玩前提可以访问google注册地址一个国外手机号虚拟手机号申请1 看运气，本人没成功虚拟手机号申请2 美国的直接一次成功，比较贵2种方式都是有效期内没收到验证码可以退费用的虚拟手机号申请1便宜 失败率大流程： 注册-> 充值-> 选择服务-> 激活-> 复制手机号发送验证码->等待验证码1虚拟手机号申请2贵 成功率高流程：注册-> 购买卡密-> 复制卡密-> 获...\,\date\:\2022-12-07\,\author\:\tanjie-ola\,\words\:228,\readTime\:\2 min read\},\coverPath\:\/assets/2022-12-07-14-01-57.png\,\coverPathBase\:\/assets/2022-12-07-14-01-57\},{\text\:\ 几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA\,\link\:\/posts/2022/2022-12-02-image-animated/index\,\frontmatter\:{\tag\:\webp\,\loffie\,\svga\,\cover\:\/2022-12-02-18-54-35.png\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-12-02-image-animated\,\title\:\ 几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA\,\summary\:\几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA下面来介绍【直接落地输出可见动画】的几种格式：GIF视频APNG/WEBPLOTTIE/SVGA总结对比GIFGIF全称Graphics Interchange Format，图像互换格式，采用8位压缩，最多只能处理256种颜色，不宜应用于真彩色图片。GIF体积大，颗粒感，有锯齿，尤其透明效果动画慎用。GIF导出1、视频+P...\,\description\:\几种动效落地方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA下面来介绍【直接落地输出可见动画】的几种格式：GIF视频APNG/WEBPLOTTIE/SVGA总结对比GIFGIF全称Graphics Interchange Format，图像互换格式，采用8位压缩，最多只能处理256种颜色，不宜应用于真彩色图片。GIF体积大，颗粒感，有锯齿，尤其透明效果动画慎用。GIF导出1、视频+P...\,\date\:\2022-12-02\,\author\:\tanjie-ola\,\words\:1019,\readTime\:\6 min read\},\coverPath\:\/assets/2022-12-02-18-54-35.png\,\coverPathBase\:\/assets/2022-12-02-18-54-35\},{\text\:\ c# 安装playwright\,\link\:\/posts/2022/2022-11-28-csharp-playwright/index\,\frontmatter\:{\tag\:\playwright\,\cover\:\/2022-11-28-09-57-48.png\,\coverPrimary\:\384848\,\coverSecondary\:\c7b7b7\,\dir\:\/posts/2022/2022-11-28-csharp-playwright\,\title\:\ c# 安装playwright\,\summary\:\c# 安装playwrightrider新建解决方案安装playwright安装失败运行脚本提示浏览器未安装按照提示安装先安装 powershell-> brew install --cask powershell然后执行 pwsh bin/Debug/netX/playwright.ps1 install:::tipnetX 为对应的版本如下图:::打开你的工程目录...\,\description\:\c# 安装playwrightrider新建解决方案安装playwright安装失败运行脚本提示浏览器未安装按照提示安装先安装 powershell-> brew install --cask powershell然后执行 pwsh bin/Debug/netX/playwright.ps1 install:::tipnetX 为对应的版本如下图:::打开你的工程目录...\,\date\:\2022-11-28\,\author\:\tanjie-ola\,\words\:79,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-28-09-57-48.png\,\coverPathBase\:\/assets/2022-11-28-09-57-48\},{\text\:\protobuf 简单使用\,\link\:\/posts/2022/2022-11-26-protobuf/index\,\frontmatter\:{\title\:\protobuf 简单使用\,\tag\:\protobuf\,\cover\:\/2022-11-26-11-51-30.png\,\coverPrimary\:\181818\,\coverSecondary\:\e7e7e7\,\dir\:\/posts/2022/2022-11-26-protobuf\,\summary\:\编写proto文件新建message.proto文件示例syntax \\\proto3\\\;message PushFrame{ int64 seqid 1; int64 logid 2; int64 service 3; int64 method 4; repeated PushHeader headersList 5; string payloadEncodin...\,\description\:\编写proto文件新建message.proto文件示例syntax \\\proto3\\\;message PushFrame{ int64 seqid 1; int64 logid 2; int64 service 3; int64 method 4; repeated PushHeader headersList 5; string payloadEncodin...\,\date\:\2022-11-26\,\author\:\tanjie-ola\,\words\:211,\readTime\:\2 min read\},\coverPath\:\/assets/2022-11-26-11-51-30.png\,\coverPathBase\:\/assets/2022-11-26-11-51-30\},{\text\:\puppeteer 监听websocket\,\link\:\/posts/2022/2022-11-26-puppeteer-ws/index\,\frontmatter\:{\title\:\puppeteer 监听websocket\,\tag\:\puppeteer\,\cover\:\/2022-11-26-11-49-21.png\,\coverPrimary\:\281828\,\coverSecondary\:\d7e7d7\,\dir\:\/posts/2022/2022-11-26-puppeteer-ws\,\summary\:\代码示例// 打开浏览器，打开新页面const puppeteer require(\\\puppeteer\\\);const protobuf require(\\\protobufjs\\\);const pako require(\\\pako\\\);var root protobuf.Root.fromJSON(require(\\\./message.json\\\));(async () > {...\,\description\:\代码示例// 打开浏览器，打开新页面const puppeteer require(\\\puppeteer\\\);const protobuf require(\\\protobufjs\\\);const pako require(\\\pako\\\);var root protobuf.Root.fromJSON(require(\\\./message.json\\\));(async () > {...\,\date\:\2022-11-26\,\author\:\tanjie-ola\,\words\:204,\readTime\:\2 min read\},\coverPath\:\/assets/2022-11-26-11-49-21.png\,\coverPathBase\:\/assets/2022-11-26-11-49-21\},{\text\:\一招鲜破解所有直播弹幕\,\link\:\/posts/2022/2022-11-18-douyin-danmu/index\,\frontmatter\:{\title\:\一招鲜破解所有直播弹幕\,\cover\:\/2022-11-18-11-28-33.png\,\tag\:\javascript\,\websocket\,\coverPrimary\:\f8b898\,\coverSecondary\:\074767\,\dir\:\/posts/2022/2022-11-18-douyin-danmu\,\summary\:\通过dom断点确定消息触发的函数先已抖音为例先随便进入一个直播间直播间F12打开控制台element标签找到弹幕滚动元素的容器添加如下断点dom断点选择子节点更新作为断点进入断点后进入 展开源码 找到call stack 拉到最下面，一般越下面越接近业务成的逻辑call stack展开源码 我们最终到调用的位置 如图已经可以看到明文的弹幕信息了明文我们可以看到n.queue是一个消息数组，没一秒消...\,\description\:\通过dom断点确定消息触发的函数先已抖音为例先随便进入一个直播间直播间F12打开控制台element标签找到弹幕滚动元素的容器添加如下断点dom断点选择子节点更新作为断点进入断点后进入 展开源码 找到call stack 拉到最下面，一般越下面越接近业务成的逻辑call stack展开源码 我们最终到调用的位置 如图已经可以看到明文的弹幕信息了明文我们可以看到n.queue是一个消息数组，没一秒消...\,\date\:\2022-11-18\,\author\:\tanjie-ola\,\words\:289,\readTime\:\2 min read\},\coverPath\:\/assets/2022-11-18-11-28-33.png\,\coverPathBase\:\/assets/2022-11-18-11-28-33\},{\text\:\slack 添加通知机器人\,\link\:\/posts/2022/2022-11-18-slack-hook/index\,\frontmatter\:{\title\:\slack 添加通知机器人\,\tag\:\slack\,\cover\:\/2022-11-18-11-27-00.png\,\coverPrimary\:\080818\,\coverSecondary\:\f7f7e7\,\dir\:\/posts/2022/2022-11-18-slack-hook\,\summary\:\添加webhook添加到个人进行测试编辑消息格式https://app.slack.com/block-kit-builder自定义基本信息发送通知// 通知到slackawait axios.post(https://hooks.slack.com/services/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,{ \\\blocks\\\: ...\,\description\:\添加webhook添加到个人进行测试编辑消息格式https://app.slack.com/block-kit-builder自定义基本信息发送通知// 通知到slackawait axios.post(https://hooks.slack.com/services/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,{ \\\blocks\\\: ...\,\date\:\2022-11-18\,\author\:\tanjie-ola\,\words\:105,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-18-11-27-00.png\,\coverPathBase\:\/assets/2022-11-18-11-27-00\},{\text\:\react/vue组件构建web components\,\link\:\/posts/2022/2022-11-18-vue-wc/index\,\frontmatter\:{\title\:\react/vue组件构建web components\,\cover\:\/2022-11-18-17-48-26.png\,\tag\:\vue\,\react\,\web components\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-11-18-vue-wc\,\summary\:\vite 起一个vue3项目yarn create vite创建组件helloWorld.ce.vue hello world export default { }.hello{ color:red;}vite 配置import { defineConfig } from \\\vite\\\;import vue from \\\@vitejs/plugin-vue\\\;// https://vi...\,\description\:\vite 起一个vue3项目yarn create vite创建组件helloWorld.ce.vue hello world export default { }.hello{ color:red;}vite 配置import { defineConfig } from \\\vite\\\;import vue from \\\@vitejs/plugin-vue\\\;// https://vi...\,\date\:\2022-11-18\,\author\:\tanjie-ola\,\words\:156,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-18-17-48-26.png\,\coverPathBase\:\/assets/2022-11-18-17-48-26\},{\text\:\github actions\,\link\:\/posts/2022/2022-11-17-github-actions/index\,\frontmatter\:{\cover\:\/2022-11-17-19-05-20.png\,\title\:\github actions\,\tag\:\github\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-11-17-github-actions\,\summary\:\官网文档Github Action基本概念workflow: 一个 workflow 就是一个完整的工作流过程，每个workflow 包含一组 jobs任务。job : jobs任务包含一个或多个job ，每个 job包含一系列的 steps 步骤。step : 每个 step 步骤可以执行指令或者使用一个 action 动作。action : 每个 action 动作就是一个通用的基本单元。Gi...\,\description\:\官网文档Github Action基本概念workflow: 一个 workflow 就是一个完整的工作流过程，每个workflow 包含一组 jobs任务。job : jobs任务包含一个或多个job ，每个 job包含一系列的 steps 步骤。step : 每个 step 步骤可以执行指令或者使用一个 action 动作。action : 每个 action 动作就是一个通用的基本单元。Gi...\,\date\:\2022-11-17\,\author\:\tanjie-ola\,\words\:1505,\readTime\:\8 min read\},\coverPath\:\/assets/2022-11-17-19-05-20.png\,\coverPathBase\:\/assets/2022-11-17-19-05-20\},{\text\:\Unity 如何通过代码修改材质\,\link\:\/posts/2022/2022-11-16-unity-materials/index\,\frontmatter\:{\title\:\Unity 如何通过代码修改材质\,\cover\:\/2022-11-17-18-15-01.png\,\tag\:\Unity\,\coverPrimary\:\080808\,\coverSecondary\:\f7f7f7\,\dir\:\/posts/2022/2022-11-16-unity-materials\,\summary\:\// 通过resources目录加载题图var textureResource.Load(\\\map\\\)clone.GetComponent().material.SetTexture(\\\_MainTex\\\,texture);// 通过网络获取图片材质IEnumerator LoadFace(Dmu dm, Action callback) { //请求WWW W...\,\description\:\// 通过resources目录加载题图var textureResource.Load(\\\map\\\)clone.GetComponent().material.SetTexture(\\\_MainTex\\\,texture);// 通过网络获取图片材质IEnumerator LoadFace(Dmu dm, Action callback) { //请求WWW W...\,\date\:\2022-11-16\,\author\:\tanjie-ola\,\words\:150,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-17-18-15-01.png\,\coverPathBase\:\/assets/2022-11-17-18-15-01\},{\text\:\机器学习 让AI踢足球\,\link\:\/posts/2022/2022-11-14-py-env/index\,\frontmatter\:{\title\:\机器学习 让AI踢足球\,\cover\:\/2022-11-17-18-07-29.png\,\tag\:\unity\,\python\,\ai\,\coverPrimary\:\081828\,\coverSecondary\:\f7e7d7\,\dir\:\/posts/2022/2022-11-14-py-env\,\summary\:\机器学习 让AI踢足球安装ml-agents官方文档简要步骤git clone --branch release_19 https://github.com/Unity-Technologies/ml-agents.git导航到菜单Window-> Package Manager-> 在包管理器窗口中单击+包列表左上角的按钮 -> 选择Add package from disk...-> 导航到c...\,\description\:\机器学习 让AI踢足球安装ml-agents官方文档简要步骤git clone --branch release_19 https://github.com/Unity-Technologies/ml-agents.git导航到菜单Window-> Package Manager-> 在包管理器窗口中单击+包列表左上角的按钮 -> 选择Add package from disk...-> 导航到c...\,\date\:\2022-11-14\,\author\:\tanjie-ola\,\words\:193,\readTime\:\1 min read\},\coverPath\:\/assets/2022-11-17-18-07-29.png\,\coverPathBase\:\/assets/2022-11-17-18-07-29\},{\text\:\ 实现互殴模拟互动\,\link\:\/posts/2022/2022-07-05-unity/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-07-07-19-22-27.png\,\tinyCover\:\/cover/2022-07-07-19-22-27.jpg\,\coverWidth\:736,\coverHeight\:1592,\coverPrimary\:\aaa39e\,\coverSecondary\:\555c61\,\dir\:\/posts/2022/2022-07-05-unity\,\title\:\ 实现互殴模拟互动\,\summary\:\实现互殴模拟互动插件 PuppetMaster 1.1.unitypackage链接: 提取码: bgkd 复制这段内容后打开百度网盘手机App，操作更方便哦模型 human-fall-flat-models.unitypackage链接: 提取码: a6tn 复制这段内容后打开百度网盘手机App，操作更方便哦动画库1链接: https://pan.baidu.com/s/1mW3_S_YY...\,\description\:\实现互殴模拟互动插件 PuppetMaster 1.1.unitypackage链接: 提取码: bgkd 复制这段内容后打开百度网盘手机App，操作更方便哦模型 human-fall-flat-models.unitypackage链接: 提取码: a6tn 复制这段内容后打开百度网盘手机App，操作更方便哦动画库1链接: https://pan.baidu.com/s/1mW3_S_YY...\,\date\:\2022-07-05\,\author\:\tanjie-ola\,\words\:108,\readTime\:\1 min read\},\coverPath\:\/assets/2022-07-07-19-22-27.png\,\coverPathBase\:\/assets/2022-07-07-19-22-27\},{\text\:\ mongodb 5.0\,\link\:\/posts/2022/2022-07-01-mongo/index\,\frontmatter\:{\tag\:\mongodb\,\cover\:\/2022-07-01-17-28-32.png\,\tinyCover\:\/cover/2022-07-01-17-28-32.jpg\,\coverWidth\:564,\coverHeight\:1253,\coverPrimary\:\19546f\,\coverSecondary\:\e6ab90\,\dir\:\/posts/2022/2022-07-01-mongo\,\title\:\ mongodb 5.0\,\summary\:\mongodb 5.0安装linux查看系统类型lsb_release -abanban-1@bigdata:~$ lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubuntu 18.04.5 LTSRelease: 18.04Codename: bionic...\,\description\:\mongodb 5.0安装linux查看系统类型lsb_release -abanban-1@bigdata:~$ lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubuntu 18.04.5 LTSRelease: 18.04Codename: bionic...\,\date\:\2022-07-01\,\author\:\tanjie-ola\,\words\:55,\readTime\:\1 min read\},\coverPath\:\/assets/2022-07-01-17-28-32.png\,\coverPathBase\:\/assets/2022-07-01-17-28-32\},{\text\:\ Bilibili 饭贩创作者中心\,\link\:\/posts/2022/2022-06-29-unity-bilibili/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-29-17-34-12.png\,\tinyCover\:\/cover/2022-06-29-17-34-12.jpg\,\coverWidth\:563,\coverHeight\:973,\coverPrimary\:\060b10\,\coverSecondary\:\f9f4ef\,\dir\:\/posts/2022/2022-06-29-unity-bilibili\,\title\:\ Bilibili 饭贩创作者中心\,\summary\:\Bilibili 饭贩创作者中心一般b站抓取弹幕要么自己写爬虫要么用一些野生的api。搞不好还会封ip。利用官方的api或sdk可以直接获取弹幕并包含头像。unitySDKaccessKeySecret/accessKeyId是注册开发者时邮件发送给你的appId 是创建项目事的项目id，获取如下code 是身份码直播中心 ▶ 我的直播间 ▶ 开始直播 ▶ 身份码。目前还没有进房消息类型目前不是很...\,\description\:\Bilibili 饭贩创作者中心一般b站抓取弹幕要么自己写爬虫要么用一些野生的api。搞不好还会封ip。利用官方的api或sdk可以直接获取弹幕并包含头像。unitySDKaccessKeySecret/accessKeyId是注册开发者时邮件发送给你的appId 是创建项目事的项目id，获取如下code 是身份码直播中心 ▶ 我的直播间 ▶ 开始直播 ▶ 身份码。目前还没有进房消息类型目前不是很...\,\date\:\2022-06-29\,\author\:\tanjie-ola\,\words\:153,\readTime\:\1 min read\},\coverPath\:\/assets/2022-06-29-17-34-12.png\,\coverPathBase\:\/assets/2022-06-29-17-34-12\},{\text\:\ Unity 实现透明背景桌面\,\link\:\/posts/2022/2022-06-29-unity-transparent/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-29-15-32-21.png\,\tinyCover\:\/cover/2022-06-29-15-32-21.jpg\,\coverWidth\:474,\coverHeight\:948,\coverPrimary\:\cead9a\,\coverSecondary\:\315265\,\dir\:\/posts/2022/2022-06-29-unity-transparent\,\title\:\ Unity 实现透明背景桌面\,\summary\:\Unity 实现透明背景桌面以下代码实测于 unity2020.3 / Windows 10 系统步骤：将以下脚本命名为TransparentWindow添加到Camera效果不带操作栏，鼠标点击不可穿透第一using System;using System.Runtime.InteropServices;using UnityEngine;public class TransparentWind...\,\description\:\Unity 实现透明背景桌面以下代码实测于 unity2020.3 / Windows 10 系统步骤：将以下脚本命名为TransparentWindow添加到Camera效果不带操作栏，鼠标点击不可穿透第一using System;using System.Runtime.InteropServices;using UnityEngine;public class TransparentWind...\,\date\:\2022-06-29\,\author\:\tanjie-ola\,\words\:1072,\readTime\:\6 min read\},\coverPath\:\/assets/2022-06-29-15-32-21.png\,\coverPathBase\:\/assets/2022-06-29-15-32-21\},{\text\:\ 如何将相册导入到mac移动硬盘\,\link\:\/posts/2022/2022-06-22-mac-photo/index\,\frontmatter\:{\tag\:\mac\,\cover\:\/2022-06-22-10-37-02.png\,\tinyCover\:\/cover/2022-06-22-10-37-02.jpg\,\coverWidth\:444,\coverHeight\:794,\coverPrimary\:\cac2e8\,\coverSecondary\:\353d17\,\dir\:\/posts/2022/2022-06-22-mac-photo\,\title\:\ 如何将相册导入到mac移动硬盘\,\summary\:\如何将相册导入到mac移动硬盘不需要itunse,不需要照片.app,不需要iMazing，不需要iCloud ,不需要隔空投放只需要系统自带的图像捕捉软件“最好的状态是一点点向喜欢的东西靠近.”“少发脾气按时睡觉不要乱想还有多笑笑.”\\\The best state is to get closer to what you like.\\\\\\Dont lose your temper, go to ...\,\description\:\如何将相册导入到mac移动硬盘不需要itunse,不需要照片.app,不需要iMazing，不需要iCloud ,不需要隔空投放只需要系统自带的图像捕捉软件“最好的状态是一点点向喜欢的东西靠近.”“少发脾气按时睡觉不要乱想还有多笑笑.”\\\The best state is to get closer to what you like.\\\\\\Dont lose your temper, go to ...\,\date\:\2022-06-22\,\author\:\tanjie-ola\,\words\:120,\readTime\:\1 min read\},\coverPath\:\/assets/2022-06-22-10-37-02.png\,\coverPathBase\:\/assets/2022-06-22-10-37-02\},{\text\:\ 动态导航实现互动挤地铁\,\link\:\/posts/2022/2022-06-20-nav-mesh/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-20-18-54-31.png\,\tinyCover\:\/cover/2022-06-20-18-54-31.png\,\coverWidth\:980,\coverHeight\:1502,\coverPrimary\:\4d4654\,\coverSecondary\:\b2b9ab\,\dir\:\/posts/2022/2022-06-20-nav-mesh\,\title\:\ 动态导航实现互动挤地铁\,\summary\:\动态导航实现互动挤地铁下载组件地址这里因为地铁是一个移动的物体，人物要从站台上移动到地铁上，可以使用导航，但是地铁动起来后，需要动态烘焙。新建一个空物体，将需要烘焙的物体作为它的子物体烘焙public NavMeshSurface navMeshSurface;//...navMeshSurface.BuildNavMesh();在动画中添加事件函数，在地铁进站后重新烘焙，然后给每个角色重新指定地...\,\description\:\动态导航实现互动挤地铁下载组件地址这里因为地铁是一个移动的物体，人物要从站台上移动到地铁上，可以使用导航，但是地铁动起来后，需要动态烘焙。新建一个空物体，将需要烘焙的物体作为它的子物体烘焙public NavMeshSurface navMeshSurface;//...navMeshSurface.BuildNavMesh();在动画中添加事件函数，在地铁进站后重新烘焙，然后给每个角色重新指定地...\,\date\:\2022-06-20\,\author\:\tanjie-ola\,\words\:182,\readTime\:\1 min read\},\coverPath\:\/assets/2022-06-20-18-54-31.png\,\coverPathBase\:\/assets/2022-06-20-18-54-31\},{\text\:\ ProBuilder快速原型开发技术 ---不规则模型与材质\,\link\:\/posts/2022/2022-06-17-probuilder/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-20-18-53-24.png\,\tinyCover\:\/cover/2022-06-20-18-53-24.png\,\coverWidth\:564,\coverHeight\:1030,\coverPrimary\:\efcd30\,\coverSecondary\:\1032cf\,\dir\:\/posts/2022/2022-06-17-probuilder\,\title\:\ ProBuilder快速原型开发技术 ---不规则模型与材质\,\summary\:\ProBuilder快速原型开发技术 ---不规则模型与材质ProBuilder开发模型的强大之处，还在于可以按照要求精确定制不规则模型、克隆镜像模型、给模型着色以及添加材质等，下面笔者就这几方面进行讲解。一：定制不规则模型PB有一个专门定制不规则模型的功能“New Poly Shape”，可以按照设计师的想法，定义任意图案的模型，或者更加确切的说是“画出”我们想要的模型，制作步骤如下：第1步：为...\,\description\:\ProBuilder快速原型开发技术 ---不规则模型与材质ProBuilder开发模型的强大之处，还在于可以按照要求精确定制不规则模型、克隆镜像模型、给模型着色以及添加材质等，下面笔者就这几方面进行讲解。一：定制不规则模型PB有一个专门定制不规则模型的功能“New Poly Shape”，可以按照设计师的想法，定义任意图案的模型，或者更加确切的说是“画出”我们想要的模型，制作步骤如下：第1步：为...\,\date\:\2022-06-17\,\author\:\tanjie-ola\,\words\:970,\readTime\:\5 min read\},\coverPath\:\/assets/2022-06-20-18-53-24.png\,\coverPathBase\:\/assets/2022-06-20-18-53-24\},{\text\:\ Unity Transform的一些发现\,\link\:\/posts/2022/2022-06-02-unity-transform/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-06-02-15-47-20.png\,\tinyCover\:\/cover/2022-06-02-15-47-20.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\7b0d0d\,\coverSecondary\:\84f2f2\,\dir\:\/posts/2022/2022-06-02-unity-transform\,\title\:\ Unity Transform的一些发现\,\summary\:\Unity Transform的一些发现本人作为业余的unity玩家对 Unity Transform的 一些发现void update(){ transform.Rotate(TurnX * Time.deltaTime,TurnY * Time.deltaTime,TurnZ * Time.deltaTime, Space.World); transform.Translate(Mov...\,\description\:\Unity Transform的一些发现本人作为业余的unity玩家对 Unity Transform的 一些发现void update(){ transform.Rotate(TurnX * Time.deltaTime,TurnY * Time.deltaTime,TurnZ * Time.deltaTime, Space.World); transform.Translate(Mov...\,\date\:\2022-06-02\,\author\:\tanjie-ola\,\words\:385,\readTime\:\2 min read\},\coverPath\:\/assets/2022-06-02-15-47-20.png\,\coverPathBase\:\/assets/2022-06-02-15-47-20\},{\text\:\ 导航搞丢了\,\link\:\/posts/2022/2022-05-27-agent/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-27-17-28-58.png\,\tinyCover\:\/cover/2022-05-27-17-28-58.png\,\coverWidth\:564,\coverHeight\:845,\coverPrimary\:\2d1419\,\coverSecondary\:\d2ebe6\,\dir\:\/posts/2022/2022-05-27-agent\,\title\:\ 导航搞丢了\,\summary\:\导航搞丢了近日做了一个小人儿互殴的游戏，角色取自于人类一败涂地，角色甚是可爱，魔性。用于火热的直播平台上直播，bilibili抑或抖音，深受观众老爷们的喜爱。无不夸赞称奇。纷纷加入粉丝团，或豪掷礼物，每每开播，都会来增添一份热度。也会有粉丝提及些许改进已经，本人也有着改之，虽然从不缺乏想象的力度，但是亏在技能的不足，无法达到预期的效果。也只能加紧学习，继续努力。今天打算在之前的擂台上新增一个平台。...\,\description\:\导航搞丢了近日做了一个小人儿互殴的游戏，角色取自于人类一败涂地，角色甚是可爱，魔性。用于火热的直播平台上直播，bilibili抑或抖音，深受观众老爷们的喜爱。无不夸赞称奇。纷纷加入粉丝团，或豪掷礼物，每每开播，都会来增添一份热度。也会有粉丝提及些许改进已经，本人也有着改之，虽然从不缺乏想象的力度，但是亏在技能的不足，无法达到预期的效果。也只能加紧学习，继续努力。今天打算在之前的擂台上新增一个平台。...\,\date\:\2022-05-27\,\author\:\tanjie-ola\,\words\:451,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-27-17-28-58.png\,\coverPathBase\:\/assets/2022-05-27-17-28-58\},{\text\:\ markdown 美化之 markdown-it-container 配置\,\link\:\/posts/2022/2022-05-17-markdown-it/index\,\frontmatter\:{\cover\:\/2022-05-17-14-09-00.png\,\tinyCover\:\/cover/2022-05-17-14-09-00.png\,\coverWidth\:736,\coverHeight\:883,\coverPrimary\:\1a0506\,\coverSecondary\:\e5faf9\,\tag\:\markdown\,\dir\:\/posts/2022/2022-05-17-markdown-it\,\title\:\ markdown 美化之 markdown-it-container 配置\,\summary\:\markdown 美化之 markdown-it-container 配置import MarkdownItContainer from markdown-it-containerconst tipIcon const warningIcon const dangerIcon const containerPluginOptions () > { return ...\,\description\:\markdown 美化之 markdown-it-container 配置import MarkdownItContainer from markdown-it-containerconst tipIcon const warningIcon const dangerIcon const containerPluginOptions () > { return ...\,\date\:\2022-05-17\,\author\:\tanjie-ola\,\words\:535,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-17-14-09-00.png\,\coverPathBase\:\/assets/2022-05-17-14-09-00\},{\text\:\ 美化你的滚动条\,\link\:\/posts/2022/2022-05-16-scroll/index\,\frontmatter\:{\tag\:\vue\,\js\,\vueuse\,\typescript\,\cover\:\/2022-05-16-18-47-31.png\,\tinyCover\:\/cover/2022-05-16-18-47-31.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\c2a88f\,\coverSecondary\:\3d5770\,\dir\:\/posts/2022/2022-05-16-scroll\,\title\:\ 美化你的滚动条\,\summary\:\美化你的滚动条实现步骤首先是样式的修改滚动开始和结束的监听动画的实现效果如下##############################################################################################首先是样式的修改/* 设置滚动条整体部分的样式 */::-webkit-scrollbar { width: 0px; height...\,\description\:\美化你的滚动条实现步骤首先是样式的修改滚动开始和结束的监听动画的实现效果如下##############################################################################################首先是样式的修改/* 设置滚动条整体部分的样式 */::-webkit-scrollbar { width: 0px; height...\,\date\:\2022-05-16\,\author\:\tanjie-ola\,\words\:393,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-16-18-47-31.png\,\coverPathBase\:\/assets/2022-05-16-18-47-31\},{\text\:\ puppet-master道具篇\,\link\:\/posts/2022/2022-05-11-puppet-master-props/index\,\frontmatter\:{\tag\:\puppet-master\,\unity\,\cover\:\/2022-05-11-14-06-50.png\,\tinyCover\:\/cover/2022-05-11-14-06-50.png\,\coverWidth\:399,\coverHeight\:600,\coverPrimary\:\4b4d4c\,\coverSecondary\:\b4b2b3\,\dir\:\/posts/2022/2022-05-11-puppet-master-props\,\title\:\ puppet-master道具篇\,\summary\:\puppet-master道具篇先准备一批道具模型链接: 提取码: 184i场景中新建空对象命名Prop->新建子对象命名Mesh Root将道具预制体Ham拖入Prop/及Prop/Mesh Root将Prop/Mesh Root下的Ham只保留Mesh组件如下将Prop下的Ham只保留Collider组件如下在Prop上添加如下组件Rigidbody默认值Collider这里我选择的Mesh...\,\description\:\puppet-master道具篇先准备一批道具模型链接: 提取码: 184i场景中新建空对象命名Prop->新建子对象命名Mesh Root将道具预制体Ham拖入Prop/及Prop/Mesh Root将Prop/Mesh Root下的Ham只保留Mesh组件如下将Prop下的Ham只保留Collider组件如下在Prop上添加如下组件Rigidbody默认值Collider这里我选择的Mesh...\,\date\:\2022-05-11\,\author\:\tanjie-ola\,\words\:412,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-11-14-06-50.png\,\coverPathBase\:\/assets/2022-05-11-14-06-50\},{\text\:\ 给你的网站添加 Algolia 搜索\,\link\:\/posts/2022/2022-05-09-Algolia/index\,\frontmatter\:{\tag\:\Algolia\,\Search\,\Node.js\,\Vue.js\,\Shell\,\Docker\,\Typescript\,\Scss\,\cover\:\/2022-05-10-14-26-40.png\,\tinyCover\:\/cover/2022-05-10-14-26-40.png\,\coverWidth\:563,\coverHeight\:762,\coverPrimary\:\ED8961\,\coverSecondary\:\12769e\,\dir\:\/posts/2022/2022-05-09-Algolia\,\title\:\ 给你的网站添加 Algolia 搜索\,\summary\:\给你的网站添加 Algolia 搜索官网面向开发者官网实现一个组件基于vue3import @docsearch/cssimport docsearch from @docsearch/jsimport { getCurrentInstance, onMounted, watch } from vueimport type { DocSearchHit } from @docsear...\,\description\:\给你的网站添加 Algolia 搜索官网面向开发者官网实现一个组件基于vue3import @docsearch/cssimport docsearch from @docsearch/jsimport { getCurrentInstance, onMounted, watch } from vueimport type { DocSearchHit } from @docsear...\,\date\:\2022-05-09\,\author\:\tanjie-ola\,\words\:873,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-10-14-26-40.png\,\coverPathBase\:\/assets/2022-05-10-14-26-40\},{\text\:\ log4js简单使用\,\link\:\/posts/2022/2022-5-5-log4js/index\,\frontmatter\:{\tag\:\log4js\,\nodejs\,\express\,\webSocket\,\cover\:\/2022-05-10-18-10-42.png\,\tinyCover\:\/cover/2022-05-10-18-10-42.png\,\coverWidth\:564,\coverHeight\:877,\coverPrimary\:\030104\,\coverSecondary\:\fcfefb\,\dir\:\/posts/2022/2022-5-5-log4js\,\title\:\ log4js简单使用\,\summary\:\log4js简单使用npm install log4jsvar log4js require(\\\log4js\\\);var logger log4js.getLogger();logger.level \\\debug\\\; // default level is OFF - which means no logs at all.logger.debug(\\\Some debug message...\,\description\:\log4js简单使用npm install log4jsvar log4js require(\\\log4js\\\);var logger log4js.getLogger();logger.level \\\debug\\\; // default level is OFF - which means no logs at all.logger.debug(\\\Some debug message...\,\date\:\2022-05-05\,\author\:\tanjie-ola\,\words\:474,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-10-42.png\,\coverPathBase\:\/assets/2022-05-10-18-10-42\},{\text\:\ CSS Flex 布局回顾\,\link\:\/posts/2022/2022-5-3-flex-css/index\,\frontmatter\:{\tag\:\css\,\flex\,\cover\:\/2022-05-10-18-11-58.png\,\tinyCover\:\/cover/2022-05-10-18-11-58.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\707174\,\coverSecondary\:\8f8e8b\,\dir\:\/posts/2022/2022-5-3-flex-css\,\title\:\ CSS Flex 布局回顾\,\summary\:\CSS Flex 布局回顾寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticl...\,\description\:\CSS Flex 布局回顾寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticl...\,\date\:\2022-05-03\,\author\:\tanjie-ola\,\words\:2085,\readTime\:\11 min read\},\coverPath\:\/assets/2022-05-10-18-11-58.png\,\coverPathBase\:\/assets/2022-05-10-18-11-58\},{\text\:\ puppeteer & pm2\,\link\:\/posts/2022/2022-4-24-puppeteer-pm2/index\,\frontmatter\:{\tag\:\puppeteteer\,\pm2\,\cover\:\/2022-05-10-18-14-26.png\,\tinyCover\:\/cover/2022-05-10-18-14-26.png\,\coverWidth\:564,\coverHeight\:841,\coverPrimary\:\B31E1E\,\coverSecondary\:\4ce1e1\,\dir\:\/posts/2022/2022-4-24-puppeteer-pm2\,\title\:\ puppeteer & pm2\,\summary\:\puppeteer & pm2问题1在linux下chrome启动失败官方类似的 issues 非常多，大多数解决方法都复杂且不奏效对于我最有效的方式是sudo apt install chromium-browser chromium-codecs-ffmpegnpm i puppeteer-coreconst puppeteer require(puppeteer);const pu...\,\description\:\puppeteer & pm2问题1在linux下chrome启动失败官方类似的 issues 非常多，大多数解决方法都复杂且不奏效对于我最有效的方式是sudo apt install chromium-browser chromium-codecs-ffmpegnpm i puppeteer-coreconst puppeteer require(puppeteer);const pu...\,\date\:\2022-04-24\,\author\:\tanjie-ola\,\words\:264,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-10-18-14-26.png\,\coverPathBase\:\/assets/2022-05-10-18-14-26\},{\text\:\ 人类一败涂地\,\link\:\/posts/2022/2022-4-24-unity-human-fall-flat/index\,\frontmatter\:{\tag\:\unity\,\human fall flat\,\cover\:\/2022-05-10-18-13-24.png\,\tinyCover\:\/cover/2022-05-10-18-13-24.png\,\coverWidth\:736,\coverHeight\:1111,\coverPrimary\:\4C9288\,\coverSecondary\:\b36d77\,\dir\:\/posts/2022/2022-4-24-unity-human-fall-flat\,\title\:\ 人类一败涂地\,\summary\:\人类一败涂地MacOS打开资源库 在终端程序中输入命令：ln -s /Library/ /资源库 后面有用导入资源到unity资源地址：/Users/tanjie/Library/Application Support/Steam/steamapps/common/Human Fall Flat/WorkshopPackage/Human.unitypackage人物模型在Assets/Model...\,\description\:\人类一败涂地MacOS打开资源库 在终端程序中输入命令：ln -s /Library/ /资源库 后面有用导入资源到unity资源地址：/Users/tanjie/Library/Application Support/Steam/steamapps/common/Human Fall Flat/WorkshopPackage/Human.unitypackage人物模型在Assets/Model...\,\date\:\2022-04-24\,\author\:\tanjie-ola\,\words\:55,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-13-24.png\,\coverPathBase\:\/assets/2022-05-10-18-13-24\},{\text\:\ 利用 puppeteteer 实现修改请求返回结果抓取弹幕\,\link\:\/posts/2022/2022-4-21-puppeteer/index\,\frontmatter\:{\tag\:\puppeteteer\,\pm2\,\pkg\,\express\,\webSocket\,\cover\:\/2022-05-10-18-31-13.png\,\tinyCover\:\/cover/2022-05-10-18-31-13.png\,\coverWidth\:564,\coverHeight\:564,\coverPrimary\:\D0B66D\,\coverSecondary\:\2f4992\,\dir\:\/posts/2022/2022-4-21-puppeteer\,\title\:\ 利用 puppeteteer 实现修改请求返回结果抓取弹幕\,\summary\:\利用 puppeteteer 实现修改请求返回结果抓取弹幕 代码包含如何在pkg中打包puppeteer 参考 打包mac下运行okconst fs require(fs)const path require(path)const puppeteer require(puppeteer)const express require(express)const a...\,\description\:\利用 puppeteteer 实现修改请求返回结果抓取弹幕 代码包含如何在pkg中打包puppeteer 参考 打包mac下运行okconst fs require(fs)const path require(path)const puppeteer require(puppeteer)const express require(express)const a...\,\date\:\2022-04-21\,\author\:\tanjie-ola\,\words\:294,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-10-18-31-13.png\,\coverPathBase\:\/assets/2022-05-10-18-31-13\},{\text\:\ unity 中使用websocket\,\link\:\/posts/2022/2022-4-21-unity-websocket/index\,\frontmatter\:{\tag\:\unity\,\webSocket\,\cover\:\/2022-05-10-18-15-57.png\,\tinyCover\:\/cover/2022-05-10-18-15-57.png\,\coverWidth\:564,\coverHeight\:848,\coverPrimary\:\EDF2F5\,\coverSecondary\:\120d0a\,\dir\:\/posts/2022/2022-4-21-unity-websocket\,\title\:\ unity 中使用websocket\,\summary\:\unity 中使用websocketNativeWebSocketinstall via UPM (Unity Package Manager)Open UnityOpen Package Manager WindowClick Add Package From Git URLEnter URL: https://github.com/endel/NativeWebSocket.git#upmus...\,\description\:\unity 中使用websocketNativeWebSocketinstall via UPM (Unity Package Manager)Open UnityOpen Package Manager WindowClick Add Package From Git URLEnter URL: https://github.com/endel/NativeWebSocket.git#upmus...\,\date\:\2022-04-21\,\author\:\tanjie-ola\,\words\:191,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-15-57.png\,\coverPathBase\:\/assets/2022-05-10-18-15-57\},{\text\:\ 小白装机\,\link\:\/posts/2022/2022-4-18-system-win/index\,\frontmatter\:{\tag\:\windows\,\cover\:\/2022-05-10-18-39-11.png\,\tinyCover\:\/cover/2022-05-10-18-39-11.png\,\coverWidth\:564,\coverHeight\:881,\coverPrimary\:\493730\,\coverSecondary\:\b6c8cf\,\dir\:\/posts/2022/2022-4-18-system-win\,\title\:\ 小白装机\,\summary\:\小白装机下载冰封PE下载纯净版下载系统MSDN找到操作系统win10最下面的最新版...\,\description\:\小白装机下载冰封PE下载纯净版下载系统MSDN找到操作系统win10最下面的最新版...\,\date\:\2022-04-18\,\author\:\tanjie-ola\,\words\:37,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-39-11.png\,\coverPathBase\:\/assets/2022-05-10-18-39-11\},{\text\:\ 这是最基本的 PuppetMaster 角色设置\,\link\:\/posts/2022/2022-4-15-unity-puppet-master/index\,\frontmatter\:{\tag\:\unity\,\puppetMaster\,\cover\:\/2022-05-10-18-40-12.png\,\tinyCover\:\/cover/2022-05-10-18-40-12.png\,\coverWidth\:564,\coverHeight\:1222,\coverPrimary\:\282e2c\,\coverSecondary\:\d7d1d3\,\dir\:\/posts/2022/2022-4-15-unity-puppet-master\,\title\:\ 这是最基本的 PuppetMaster 角色设置\,\summary\:\这是最基本的 PuppetMaster 角色设置播放场景并将“Pin Weight”滑动到零以将角色释放到物理肌肉空间动画。调整所有其他参数，展开“肌肉”以分别调整每块肌肉的重量乘数。要从布娃娃创建 PuppetMaster 角色：将布娃娃角色拖到场景中。如果布娃娃不是使用 ConfigurableJoints 构建的，请选择它的根 GameObject 并单击 GameObject/Conver...\,\description\:\这是最基本的 PuppetMaster 角色设置播放场景并将“Pin Weight”滑动到零以将角色释放到物理肌肉空间动画。调整所有其他参数，展开“肌肉”以分别调整每块肌肉的重量乘数。要从布娃娃创建 PuppetMaster 角色：将布娃娃角色拖到场景中。如果布娃娃不是使用 ConfigurableJoints 构建的，请选择它的根 GameObject 并单击 GameObject/Conver...\,\date\:\2022-04-15\,\author\:\tanjie-ola\,\words\:1759,\readTime\:\9 min read\},\coverPath\:\/assets/2022-05-10-18-40-12.png\,\coverPathBase\:\/assets/2022-05-10-18-40-12\},{\text\:\ unity ragdoll实现拾取道具的核心代码\,\link\:\/posts/2022/2022-4-12-unity-ragdoll/index\,\frontmatter\:{\tag\:\unity\,\ragdoll\,\cover\:\/2022-05-10-18-41-39.png\,\tinyCover\:\/cover/2022-05-10-18-41-39.png\,\coverWidth\:466,\coverHeight\:700,\coverPrimary\:\120804\,\coverSecondary\:\edf7fb\,\dir\:\/posts/2022/2022-4-12-unity-ragdoll\,\title\:\ unity ragdoll实现拾取道具的核心代码\,\summary\:\unity ragdoll实现拾取道具的核心代码给手的骨骼添加碰撞组件void OnCollisionEnter(Collision col){ if (col.gameObject.tag \\\weapon\\\) { // 有一些逻辑需要判断 // 当前武器是否有玩家拥有 （如果一个武器只能被一个玩家拾取） // 武器当前的玩家不是他自己的时候才可以捡起 ...\,\description\:\unity ragdoll实现拾取道具的核心代码给手的骨骼添加碰撞组件void OnCollisionEnter(Collision col){ if (col.gameObject.tag \\\weapon\\\) { // 有一些逻辑需要判断 // 当前武器是否有玩家拥有 （如果一个武器只能被一个玩家拾取） // 武器当前的玩家不是他自己的时候才可以捡起 ...\,\date\:\2022-04-12\,\author\:\tanjie-ola\,\words\:135,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-41-39.png\,\coverPathBase\:\/assets/2022-05-10-18-41-39\},{\text\:\ unity ragdoll\,\link\:\/posts/2022/2022-3-25-unity-ragdoll/index\,\frontmatter\:{\tag\:\unity\,\ragdoll\,\cover\:\/2022-05-10-18-42-39.png\,\tinyCover\:\/cover/2022-05-10-18-42-39.png\,\coverWidth\:564,\coverHeight\:1252,\coverPrimary\:\F6A558\,\coverSecondary\:\095aa7\,\dir\:\/posts/2022/2022-3-25-unity-ragdoll\,\title\:\ unity ragdoll\,\summary\:\unity ragdollUnity 布娃娃实现布娃娃类似于人类一败涂地的橡胶人效果相关插件可以快速创建类似效果链接: 提取码: 6b71购买了人类一败涂地的可以直接获取里面的资源一个个人感觉体验更好游戏ragdoll 插件由于官方自带的插件只推荐用于死亡状态，所以这里推荐一个更好的插件。链接: 提取码: 8v7u该插件的基本使用记录选择角色配置如图 注意选择模型而不是预制体角色加入场景并不需...\,\description\:\unity ragdollUnity 布娃娃实现布娃娃类似于人类一败涂地的橡胶人效果相关插件可以快速创建类似效果链接: 提取码: 6b71购买了人类一败涂地的可以直接获取里面的资源一个个人感觉体验更好游戏ragdoll 插件由于官方自带的插件只推荐用于死亡状态，所以这里推荐一个更好的插件。链接: 提取码: 8v7u该插件的基本使用记录选择角色配置如图 注意选择模型而不是预制体角色加入场景并不需...\,\date\:\2022-03-25\,\author\:\tanjie-ola\,\words\:356,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-10-18-42-39.png\,\coverPathBase\:\/assets/2022-05-10-18-42-39\},{\text\:\ Unity+nodejs\,\link\:\/posts/2022/2022-3-24-unity-nodejs/index\,\frontmatter\:{\tag\:\unity\,\nodejs\,\cover\:\/2022-05-10-18-45-48.png\,\tinyCover\:\/cover/2022-05-10-18-45-48.png\,\coverWidth\:564,\coverHeight\:1001,\coverPrimary\:\1C1418\,\coverSecondary\:\e3ebe7\,\dir\:\/posts/2022/2022-3-24-unity-nodejs\,\title\:\ Unity+nodejs\,\summary\:\Unity+nodejs背景在做一个B站直播类弹幕互动小游戏类似【修勾夜店】抓取弹幕的服务是用nodejs写的，游戏是用unity制作的。因为是直播所有不需要用到服务，就是在本地通过websocket通讯。但是每次都得先起一个node程序来抓弹幕，于是我就想能不能把这个程序直接写到unity程序里。但是要是用CS 的生态来替换nodejs的那套生态理论上是行的，但是时间成本比较大。于是我就找有没有...\,\description\:\Unity+nodejs背景在做一个B站直播类弹幕互动小游戏类似【修勾夜店】抓取弹幕的服务是用nodejs写的，游戏是用unity制作的。因为是直播所有不需要用到服务，就是在本地通过websocket通讯。但是每次都得先起一个node程序来抓弹幕，于是我就想能不能把这个程序直接写到unity程序里。但是要是用CS 的生态来替换nodejs的那套生态理论上是行的，但是时间成本比较大。于是我就找有没有...\,\date\:\2022-03-24\,\author\:\tanjie-ola\,\words\:1236,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-10-18-45-48.png\,\coverPathBase\:\/assets/2022-05-10-18-45-48\},{\text\:\ vscode从头开发一个笑话扩展\,\link\:\/posts/2022/2022-3-23-vscodeext/index\,\frontmatter\:{\tag\:\vscode\,\vscodeext\,\cover\:\/2022-05-10-18-46-27.png\,\tinyCover\:\/cover/2022-05-10-18-46-27.png\,\coverWidth\:404,\coverHeight\:630,\coverPrimary\:\0B0808\,\coverSecondary\:\f4f7f7\,\dir\:\/posts/2022/2022-3-23-vscodeext\,\title\:\ vscode从头开发一个笑话扩展\,\summary\:\vscode从头开发一个笑话扩展安装开发工具包npm install -g yo generator-code创建工程,选择插件开发yo code插件基本目录结构package.jsonactivationEvents 声明视图命令和事件命令contributes 定义了视图和命令的具体信息\\\viewsContainers\\\: { \\\activitybar\\\: { \\\id\\\:...\,\description\:\vscode从头开发一个笑话扩展安装开发工具包npm install -g yo generator-code创建工程,选择插件开发yo code插件基本目录结构package.jsonactivationEvents 声明视图命令和事件命令contributes 定义了视图和命令的具体信息\\\viewsContainers\\\: { \\\activitybar\\\: { \\\id\\\:...\,\date\:\2022-03-23\,\author\:\tanjie-ola\,\words\:437,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-46-27.png\,\coverPathBase\:\/assets/2022-05-10-18-46-27\},{\text\:\ 扩展开发文档\,\link\:\/posts/2022/2022-3-21-webext/index\,\frontmatter\:{\tag\:\chrome\,\cover\:\/2022-05-10-18-48-20.png\,\tinyCover\:\/cover/2022-05-10-18-48-20.png\,\coverWidth\:563,\coverHeight\:704,\coverPrimary\:\282C2F\,\coverSecondary\:\d7d3d0\,\dir\:\/posts/2022/2022-3-21-webext\,\title\:\ 扩展开发文档\,\summary\:\扩展开发文档预计开发一键网站黑色 灰色提取网站图片网站内容转md提取css打算写一个css提取器基础：如何通过js提取元素的css...\,\description\:\扩展开发文档预计开发一键网站黑色 灰色提取网站图片网站内容转md提取css打算写一个css提取器基础：如何通过js提取元素的css...\,\date\:\2022-03-21\,\author\:\tanjie-ola\,\words\:58,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-48-20.png\,\coverPathBase\:\/assets/2022-05-10-18-48-20\},{\text\:\ 个人装机必备软件\,\link\:\/posts/2022/2022-3-18-plugins/index\,\frontmatter\:{\tag\:\windows\,\vscode\,\macos\,\plugins\,\bookmark\,\cover\:\/2022-05-10-18-49-37.png\,\tinyCover\:\/cover/2022-05-10-18-49-37.png\,\coverWidth\:564,\coverHeight\:1220,\coverPrimary\:\c0bfbe\,\coverSecondary\:\3f4041\,\dir\:\/posts/2022/2022-3-18-plugins\,\title\:\ 个人装机必备软件\,\summary\:\个人装机必备软件装机必备谷歌浏览器搜狗输入法VscodetyporaPicgoiShot超级右键 liteThor百度网盘dev-sidecar开发环境nodejsnvmnrmnivitevscode 效率工具 Carbon Product Iconsimage-20220318141046218 translate speaker 翻译朗读者 APIimage-20220318141046218...\,\description\:\个人装机必备软件装机必备谷歌浏览器搜狗输入法VscodetyporaPicgoiShot超级右键 liteThor百度网盘dev-sidecar开发环境nodejsnvmnrmnivitevscode 效率工具 Carbon Product Iconsimage-20220318141046218 translate speaker 翻译朗读者 APIimage-20220318141046218...\,\date\:\2022-03-18\,\author\:\tanjie-ola\,\words\:622,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-10-18-49-37.png\,\coverPathBase\:\/assets/2022-05-10-18-49-37\},{\text\:\ Unity3D 之射线检测\,\link\:\/posts/2022/2022-3-17-unity-ray/index\,\frontmatter\:{\tag\:\unity\,\ray\,\cover\:\/2022-05-10-18-54-44.png\,\tinyCover\:\/cover/2022-05-10-18-54-44.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\000000\,\coverSecondary\:\ffffff\,\dir\:\/posts/2022/2022-3-17-unity-ray\,\title\:\ Unity3D 之射线检测\,\summary\:\Unity3D 之射线检测这里来记录下射线检测的相关内容：射线检测故名就是通过射线去检测是否和碰撞器产生了交集，和碰撞器与碰撞器发生交集一样，会返回一个真。射线的用法很多：比如检测是否跳跃，通过向地面投射射线控制在地面时候可以跳起。射击游戏中可以通过定长射线去判断目标物体是否被击中，等主要用到的工具类是：PhysicsRaycastHit 光线投射碰撞Ray 射线第一种是：Physics.Line...\,\description\:\Unity3D 之射线检测这里来记录下射线检测的相关内容：射线检测故名就是通过射线去检测是否和碰撞器产生了交集，和碰撞器与碰撞器发生交集一样，会返回一个真。射线的用法很多：比如检测是否跳跃，通过向地面投射射线控制在地面时候可以跳起。射击游戏中可以通过定长射线去判断目标物体是否被击中，等主要用到的工具类是：PhysicsRaycastHit 光线投射碰撞Ray 射线第一种是：Physics.Line...\,\date\:\2022-03-17\,\author\:\tanjie-ola\,\words\:659,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-10-18-54-44.png\,\coverPathBase\:\/assets/2022-05-10-18-54-44\},{\text\:\ Unity主题修改\,\link\:\/posts/2022/2022-3-17-unity-theme/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-10-18-50-08.png\,\tinyCover\:\/cover/2022-05-10-18-50-08.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\1c1a1a\,\coverSecondary\:\e3e5e5\,\dir\:\/posts/2022/2022-3-17-unity-theme\,\title\:\ Unity主题修改\,\summary\:\Unity主题修改image-20220317111952789image-20220317112022814...\,\description\:\Unity主题修改image-20220317111952789image-20220317112022814...\,\date\:\2022-03-17\,\author\:\tanjie-ola\,\words\:8,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-50-08.png\,\coverPathBase\:\/assets/2022-05-10-18-50-08\},{\text\:\ unity 如何实现气泡聊天\,\link\:\/posts/2022/2022-3-14-unity-layout/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-10-18-57-11.png\,\tinyCover\:\/cover/2022-05-10-18-57-11.png\,\coverWidth\:564,\coverHeight\:1031,\coverPrimary\:\A5E2D9\,\coverSecondary\:\5a1d26\,\dir\:\/posts/2022/2022-3-14-unity-layout\,\title\:\ unity 如何实现气泡聊天\,\summary\:\unity 如何实现气泡聊天新建image并改名为bgimage-20220314184522374准备素材image-20220314184629709image-20220314184749631image-20220314184816859根据提示安装sprite编辑器 编辑并应用image-20220314184930206将生成的素材拖入bg的sourceImage 并添加框内的两个组件...\,\description\:\unity 如何实现气泡聊天新建image并改名为bgimage-20220314184522374准备素材image-20220314184629709image-20220314184749631image-20220314184816859根据提示安装sprite编辑器 编辑并应用image-20220314184930206将生成的素材拖入bg的sourceImage 并添加框内的两个组件...\,\date\:\2022-03-14\,\author\:\tanjie-ola\,\words\:88,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-10-18-57-11.png\,\coverPathBase\:\/assets/2022-05-10-18-57-11\},{\text\:\ Unity获取spine动画的一些信息\,\link\:\/posts/2022/2022-2-28-spine/index\,\frontmatter\:{\tag\:\unity\,\CS\,\spine\,\cover\:\/2022-05-10-18-59-18.png\,\tinyCover\:\/cover/2022-05-10-18-59-18.png\,\coverWidth\:564,\coverHeight\:1253,\coverPrimary\:\33055B\,\coverSecondary\:\ccfaa4\,\dir\:\/posts/2022/2022-2-28-spine\,\title\:\ Unity获取spine动画的一些信息\,\summary\:\Unity获取spine动画的一些信息不同的unity版本可能有区别以下为Unity2020 spine4.0获取spine组件//skeletonDataSkeletonAnimation skeletonAnimation GetComponent();获取所有的动画// 获取所有的动画List sk skeletonAnimation.skeleton.Data.Animations...\,\description\:\Unity获取spine动画的一些信息不同的unity版本可能有区别以下为Unity2020 spine4.0获取spine组件//skeletonDataSkeletonAnimation skeletonAnimation GetComponent();获取所有的动画// 获取所有的动画List sk skeletonAnimation.skeleton.Data.Animations...\,\date\:\2022-02-28\,\author\:\tanjie-ola\,\words\:550,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-59-18.png\,\coverPathBase\:\/assets/2022-05-10-18-59-18\},{\text\:\ unity常用方法备忘\,\link\:\/posts/2022/2022-2-22-unity/index\,\frontmatter\:{\tag\:\unity\,\cover\:\/2022-05-10-18-59-58.png\,\tinyCover\:\/cover/2022-05-10-18-59-58.png\,\coverWidth\:564,\coverHeight\:1172,\coverPrimary\:\1D1C1C\,\coverSecondary\:\e2e3e3\,\dir\:\/posts/2022/2022-2-22-unity\,\title\:\ unity常用方法备忘\,\summary\:\unity常用方法备忘unity中三种调用其他脚本函数的方法第一种，被调用脚本函数为static类型，调用时直接用 脚本名.函数名()第二种，GameObject.Find(\\\脚本所在的物体的名字\\\).SendMessage(\\\函数名\\\); //能调用public和private类型函数第三种，GameObject.Find(\\\脚本所在的物体的名字\\\).GetComponent().函数名();...\,\description\:\unity常用方法备忘unity中三种调用其他脚本函数的方法第一种，被调用脚本函数为static类型，调用时直接用 脚本名.函数名()第二种，GameObject.Find(\\\脚本所在的物体的名字\\\).SendMessage(\\\函数名\\\); //能调用public和private类型函数第三种，GameObject.Find(\\\脚本所在的物体的名字\\\).GetComponent().函数名();...\,\date\:\2022-02-22\,\author\:\tanjie-ola\,\words\:421,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-10-18-59-58.png\,\coverPathBase\:\/assets/2022-05-10-18-59-58\},{\text\:\ 家庭会议\,\link\:\/posts/2022/2022-2-9-family-meeting/index\,\frontmatter\:{\cover\:\/2022-05-11-09-02-17.png\,\tinyCover\:\/cover/2022-05-11-09-02-17.png\,\coverWidth\:564,\coverHeight\:1128,\coverPrimary\:\292426\,\coverSecondary\:\d6dbd9\,\dir\:\/posts/2022/2022-2-9-family-meeting\,\title\:\ 家庭会议\,\summary\:\家庭会议总结去年：发生了许多的大事：结婚，生病，千寻诞生首先感谢爸妈对结婚的支持，买房首付，彩礼的支持。虽然对焕云来说我们没有做到她想要的婚礼仪式，但是我知道爸妈已经努力了，后面我自己努力让她过得更好。后面可以在补一个有千寻参与的婚礼。焕云生病：一同携手在病房度过2020的春节，凤凰涅槃，希望你可以更爱自己和身边的人，意外和明天不知道谁先来。经历过黑暗，也更懂了习以为常的珍贵。宝贝诞生：感谢焕云为...\,\description\:\家庭会议总结去年：发生了许多的大事：结婚，生病，千寻诞生首先感谢爸妈对结婚的支持，买房首付，彩礼的支持。虽然对焕云来说我们没有做到她想要的婚礼仪式，但是我知道爸妈已经努力了，后面我自己努力让她过得更好。后面可以在补一个有千寻参与的婚礼。焕云生病：一同携手在病房度过2020的春节，凤凰涅槃，希望你可以更爱自己和身边的人，意外和明天不知道谁先来。经历过黑暗，也更懂了习以为常的珍贵。宝贝诞生：感谢焕云为...\,\date\:\2022-02-09\,\author\:\tanjie-ola\,\words\:1172,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-11-09-02-17.png\,\coverPathBase\:\/assets/2022-05-11-09-02-17\},{\text\:\ iTween 入门\,\link\:\/posts/2022/2022-1-20-unity-itween/index\,\frontmatter\:{\tag\:\unity\,\iTween\,\cover\:\/2022-05-11-09-04-28.png\,\tinyCover\:\/cover/2022-05-11-09-04-28.png\,\coverWidth\:564,\coverHeight\:1039,\coverPrimary\:\b8466d\,\coverSecondary\:\47b992\,\dir\:\/posts/2022/2022-1-20-unity-itween\,\title\:\ iTween 入门\,\summary\:\iTween 入门官网1.简介iTween是一个动画库,作者创建它的目的就是最小的投入实现最大的产出。让你做开发更轻松,用它可以轻松实现各种动画,晃动,旋转,移动,褪色,上色,控制音频等等。iTween的核心是数值的插值。只需要定义开始和结束,中间过程iTween就会帮你弄好。iTween插件包含两部分:iTween和iTweenPath如何将iTween 加入项目：1.在项目中建立Plugins...\,\description\:\iTween 入门官网1.简介iTween是一个动画库,作者创建它的目的就是最小的投入实现最大的产出。让你做开发更轻松,用它可以轻松实现各种动画,晃动,旋转,移动,褪色,上色,控制音频等等。iTween的核心是数值的插值。只需要定义开始和结束,中间过程iTween就会帮你弄好。iTween插件包含两部分:iTween和iTweenPath如何将iTween 加入项目：1.在项目中建立Plugins...\,\date\:\2022-01-20\,\author\:\tanjie-ola\,\words\:3192,\readTime\:\16 min read\},\coverPath\:\/assets/2022-05-11-09-04-28.png\,\coverPathBase\:\/assets/2022-05-11-09-04-28\},{\text\:\常用Markdown演示\,\link\:\/posts/2022/2022-1-11md-test/index\,\frontmatter\:{\cover\:\/2022012308421.png\,\title\:\常用Markdown演示\,\tag\:\markdown\,\javascript\,\date\:\2022-01-19\,\author\:\artiely\,\primary\:\d4d4d4\,\secondary\:\2b2b2b\,\readTime\:\9 min read\,\words\:1797,\calendar\:\辛丑,牛,辛丑,壬申,腊月,十七,星期三\,\tinyCover\:\/cover/2022012308421.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\3573dc\,\coverSecondary\:\ca8c23\,\dir\:\/posts/2022/2022-1-11md-test\,\summary\:\常用markdown语法测试博客样式图片演示图片引用演示我去菜市场的时候没有赶上趟，却碰上了她正落魄的时光，不知道她吻遍了多少橱窗才习惯了她的理想就在一步之隔的桌上，我给了她两根火腿肠，看清了她的模样，满身的泥泞和风霜都没抖落她眼里的光和对爱的向往，她啊，在人来人往的地方流浪，可能从来不知道爱是可以被人捧在手掌，所以她这一生都在路上表情使用🌰 🙂 👆🏻标记文本重点可能从来不知道爱是可以...\,\description\:\常用markdown语法测试博客样式图片演示图片引用演示我去菜市场的时候没有赶上趟，却碰上了她正落魄的时光，不知道她吻遍了多少橱窗才习惯了她的理想就在一步之隔的桌上，我给了她两根火腿肠，看清了她的模样，满身的泥泞和风霜都没抖落她眼里的光和对爱的向往，她啊，在人来人往的地方流浪，可能从来不知道爱是可以被人捧在手掌，所以她这一生都在路上表情使用🌰 🙂 👆🏻标记文本重点可能从来不知道爱是可以...\},\coverPath\:\/assets/2022012308421.png\,\coverPathBase\:\/assets/2022012308421\},{\text\:\ 在Unity中使用spine\,\link\:\/posts/2022/2022-1-19-unity-spine/index\,\frontmatter\:{\tag\:\unity\,\spine\,\cover\:\/2022-05-11-09-05-37.png\,\tinyCover\:\/cover/2022-05-11-09-05-37.png\,\coverWidth\:563,\coverHeight\:864,\coverPrimary\:\070B0D\,\coverSecondary\:\f8f4f2\,\dir\:\/posts/2022/2022-1-19-unity-spine\,\title\:\ 在Unity中使用spine\,\summary\:\在Unity中使用spine什么是spine 官网spine支持的运行库unity运行库的githubunity spine下载地址下载后导入UnityProject->Packages 拖进去spine体验资源地址 spine4.x链接: 密码: gr7gimage-20220119114214479直接拖入unity指定文件夹会多出三个文件image-20220119114248588新建...\,\description\:\在Unity中使用spine什么是spine 官网spine支持的运行库unity运行库的githubunity spine下载地址下载后导入UnityProject->Packages 拖进去spine体验资源地址 spine4.x链接: 密码: gr7gimage-20220119114214479直接拖入unity指定文件夹会多出三个文件image-20220119114248588新建...\,\date\:\2022-01-19\,\author\:\tanjie-ola\,\words\:115,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-09-05-37.png\,\coverPathBase\:\/assets/2022-05-11-09-05-37\},{\text\:\ git stash\,\link\:\/posts/2022/2022-1-15-git-stash/index\,\frontmatter\:{\tag\:\git\,\cover\:\/2022-05-11-09-11-13.png\,\tinyCover\:\/cover/2022-05-11-09-11-13.png\,\coverWidth\:523,\coverHeight\:520,\coverPrimary\:\899490\,\coverSecondary\:\766b6f\,\dir\:\/posts/2022/2022-1-15-git-stash\,\title\:\ git stash\,\summary\:\git stash所在的分支没有commit权限，但是我们已经在当前分支上做了大量的修改。（git提供了暂存的方式帮我们解决该问题）在我们项目中我们经常会遇到这样一种场景，我们在某个分支中修改代码，突然有一个紧急的任务需要我们在develop中进行修复问题，这个时候我们不得不将我们当前开的分支中代码暂存，等我们修改完develop分支中的内容的时候在回过头去继续修改，这个时候我们就用到了需要使用到...\,\description\:\git stash所在的分支没有commit权限，但是我们已经在当前分支上做了大量的修改。（git提供了暂存的方式帮我们解决该问题）在我们项目中我们经常会遇到这样一种场景，我们在某个分支中修改代码，突然有一个紧急的任务需要我们在develop中进行修复问题，这个时候我们不得不将我们当前开的分支中代码暂存，等我们修改完develop分支中的内容的时候在回过头去继续修改，这个时候我们就用到了需要使用到...\,\date\:\2022-01-15\,\author\:\tanjie-ola\,\words\:230,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-09-11-13.png\,\coverPathBase\:\/assets/2022-05-11-09-11-13\},{\text\:\ 增强页面排版\,\link\:\/posts/2022/2022-1-13-css-unicode-range/index\,\frontmatter\:{\tag\:\css\,\cover\:\/2022-05-11-09-13-44.png\,\tinyCover\:\/cover/2022-05-11-09-13-44.png\,\coverWidth\:564,\coverHeight\:721,\coverPrimary\:\131218\,\coverSecondary\:\ecede7\,\dir\:\/posts/2022/2022-1-13-css-unicode-range\,\title\:\ 增强页面排版\,\summary\:\增强页面排版如何提升网站字体的表现效果，英文使用特定的英文字体，中文使用特定的中文字体，从而增强页面排版。首先能想到最常见的解决方案实现两个class，分别设置font-family为这两个字体，再将这两个类分别应用于中文与英文元素上。缺点繁琐。使用font-family的加载顺续特性，先加载只包含英文的字体，再加载中文字体。缺点对字体有要求。大多数字体无法满足需求。unicode-rangecs...\,\description\:\增强页面排版如何提升网站字体的表现效果，英文使用特定的英文字体，中文使用特定的中文字体，从而增强页面排版。首先能想到最常见的解决方案实现两个class，分别设置font-family为这两个字体，再将这两个类分别应用于中文与英文元素上。缺点繁琐。使用font-family的加载顺续特性，先加载只包含英文的字体，再加载中文字体。缺点对字体有要求。大多数字体无法满足需求。unicode-rangecs...\,\date\:\2022-01-13\,\author\:\tanjie-ola\,\words\:413,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-11-09-13-44.png\,\coverPathBase\:\/assets/2022-05-11-09-13-44\},{\text\:\ 在什么情况下 a a - 1 ？\,\link\:\/posts/2022/2022-1-13-js-a-a-1/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-12-40.png\,\tinyCover\:\/cover/2022-05-11-09-12-40.png\,\coverWidth\:564,\coverHeight\:794,\coverPrimary\:\08090C\,\coverSecondary\:\f7f6f3\,\dir\:\/posts/2022/2022-1-13-js-a-a-1\,\title\:\ 在什么情况下 a a - 1 ？\,\summary\:\在什么情况下 a a - 1 ？思考10秒钟再往下看——**_第一个答案自然是Infinity，或者说，扩展一下，应该是正负Infinity👉🏻 知识点: 在JavaScript里，Infinity是一个Number类型的字面量，表示无穷大。当一个Number类型的值，在运算过程中超过了所能表示的最大值，就会得到无穷大。比如，如果我们将一个不为0的正数除以0，得到的结果就是无穷大。co...\,\description\:\在什么情况下 a a - 1 ？思考10秒钟再往下看——**_第一个答案自然是Infinity，或者说，扩展一下，应该是正负Infinity👉🏻 知识点: 在JavaScript里，Infinity是一个Number类型的字面量，表示无穷大。当一个Number类型的值，在运算过程中超过了所能表示的最大值，就会得到无穷大。比如，如果我们将一个不为0的正数除以0，得到的结果就是无穷大。co...\,\date\:\2022-01-13\,\author\:\tanjie-ola\,\words\:1141,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-11-09-12-40.png\,\coverPathBase\:\/assets/2022-05-11-09-12-40\},{\text\:\前端冷知识判断字符串是数字\,\link\:\/posts/2022/2022-1-13-js-str-is-num/index\,\frontmatter\:{\title\:\前端冷知识判断字符串是数字\,\tag\:\js\,\cover\:\/2022-05-11-09-11-42.png\,\tinyCover\:\/cover/2022-05-11-09-11-42.png\,\coverWidth\:563,\coverHeight\:1001,\coverPrimary\:\B3E1FE\,\coverSecondary\:\4c1e01\,\dir\:\/posts/2022/2022-1-13-js-str-is-num\,\summary\:\在网页中，我们从用户输入的内容中获取的值通常是字符串，但是有时候我们希望用户输入的内容一定要能转成数值：userInput.addEventListener(change, (e) > { const value e.target.value; console.log(typeof value); // string console.assert(isNumeric(value),...\,\description\:\在网页中，我们从用户输入的内容中获取的值通常是字符串，但是有时候我们希望用户输入的内容一定要能转成数值：userInput.addEventListener(change, (e) > { const value e.target.value; console.log(typeof value); // string console.assert(isNumeric(value),...\,\date\:\2022-01-13\,\author\:\tanjie-ola\,\words\:1308,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-11-09-11-42.png\,\coverPathBase\:\/assets/2022-05-11-09-11-42\},{\text\:\从零实现流行的 JavaScript 方法\,\link\:\/posts/2022/2022-1-12-js-array/index\,\frontmatter\:{\title\:\从零实现流行的 JavaScript 方法\,\tag\:\js\,\cover\:\/2022-05-11-09-14-17.png\,\tinyCover\:\/cover/2022-05-11-09-14-17.png\,\coverWidth\:564,\coverHeight\:939,\coverPrimary\:\0A1015\,\coverSecondary\:\f5efea\,\dir\:\/posts/2022/2022-1-12-js-array\,\summary\:\介绍在本文中，分享最流行的 JavaScript 方法，但都是从零开始实现的。对提升编码能力，理解源码能力有一定提升。这只是其工作原理的简单版本，ECMAScript 中指定的实际方法要复杂得多。本文提到的方法有：map, reduce, filter, sort, every, includes, slice, splice, shift, indexOf.在实现前先理解以上方法的api和使用m...\,\description\:\介绍在本文中，分享最流行的 JavaScript 方法，但都是从零开始实现的。对提升编码能力，理解源码能力有一定提升。这只是其工作原理的简单版本，ECMAScript 中指定的实际方法要复杂得多。本文提到的方法有：map, reduce, filter, sort, every, includes, slice, splice, shift, indexOf.在实现前先理解以上方法的api和使用m...\,\date\:\2022-01-12\,\author\:\tanjie-ola\,\words\:803,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-11-09-14-17.png\,\coverPathBase\:\/assets/2022-05-11-09-14-17\},{\text\:\ 链表\,\link\:\/posts/2022/2022-1-10-js-list/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-15-37.png\,\tinyCover\:\/cover/2022-05-11-09-15-37.png\,\coverWidth\:564,\coverHeight\:796,\coverPrimary\:\0d1318\,\coverSecondary\:\f2ece7\,\dir\:\/posts/2022/2022-1-10-js-list\,\title\:\ 链表\,\summary\:\链表如果您正在学习数据结构，那么链表是您应该知道的一种数据结构。如果你不是很了解它或者它是如何在 JavaScript 中实现的，这篇文章可以帮助你。在本文中，我们将讨论链表是什么，它与数组有何不同，以及如何在 JavaScript 中实现它。让我们开始吧。什么是链表？链表是一种类似于数组的线性数据结构。但是，与数组不同，元素不存储在特定的内存位置或索引中。相反，每个元素都是一个单独的对象，其中包...\,\description\:\链表如果您正在学习数据结构，那么链表是您应该知道的一种数据结构。如果你不是很了解它或者它是如何在 JavaScript 中实现的，这篇文章可以帮助你。在本文中，我们将讨论链表是什么，它与数组有何不同，以及如何在 JavaScript 中实现它。让我们开始吧。什么是链表？链表是一种类似于数组的线性数据结构。但是，与数组不同，元素不存储在特定的内存位置或索引中。相反，每个元素都是一个单独的对象，其中包...\,\date\:\2022-01-10\,\author\:\tanjie-ola\,\words\:1722,\readTime\:\9 min read\},\coverPath\:\/assets/2022-05-11-09-15-37.png\,\coverPathBase\:\/assets/2022-05-11-09-15-37\},{\text\:\ 一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术\,\link\:\/posts/2022/2022-1-9-frontend/index\,\frontmatter\:{\tag\:\html\,\css\,\js\,\cover\:\/2022-05-11-09-17-31.png\,\tinyCover\:\/cover/2022-05-11-09-17-31.png\,\coverWidth\:450,\coverHeight\:800,\coverPrimary\:\030303\,\coverSecondary\:\fcfcfc\,\dir\:\/posts/2022/2022-1-9-frontend\,\title\:\ 一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术\,\summary\:\一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术前端是网站的第一道防线（或者更准确地说，是对用户“攻击”的第一道防线），所以前端开发者总是有很多工作要做。为了让他们的生活更轻松一些，我们选择了一些有用但不太知名的 HTML、CSS 和 JavaScript 技术。特别是当你的用户使用Chrome或者你使用Electron技术不用太担心兼容问题的时候。快速隐藏要隐藏 DOM 元素...\,\description\:\一小部分鲜为人知的 HTML、CSS 和 JavaScript 技术前端是网站的第一道防线（或者更准确地说，是对用户“攻击”的第一道防线），所以前端开发者总是有很多工作要做。为了让他们的生活更轻松一些，我们选择了一些有用但不太知名的 HTML、CSS 和 JavaScript 技术。特别是当你的用户使用Chrome或者你使用Electron技术不用太担心兼容问题的时候。快速隐藏要隐藏 DOM 元素...\,\date\:\2022-01-09\,\author\:\tanjie-ola\,\words\:841,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-11-09-17-31.png\,\coverPathBase\:\/assets/2022-05-11-09-17-31\},{\text\:\ 单行 JavaScript 函数\,\link\:\/posts/2022/2022-1-9-js-oneline/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-16-44.png\,\tinyCover\:\/cover/2022-05-11-09-16-44.png\,\coverWidth\:564,\coverHeight\:846,\coverPrimary\:\b48a5b\,\coverSecondary\:\4b75a4\,\dir\:\/posts/2022/2022-1-9-js-oneline\,\title\:\ 单行 JavaScript 函数\,\summary\:\单行 JavaScript 函数复制到剪贴板一个有用的单行 JavaScript 函数，可用于轻松将任何文本复制到剪贴板。const copyToClipboard text > navigator.clipboard.writeText(text)copyToClipboard(This Sring is Copied To Clipboard.)复制到剪贴板获取特定范围内的随机数一个...\,\description\:\单行 JavaScript 函数复制到剪贴板一个有用的单行 JavaScript 函数，可用于轻松将任何文本复制到剪贴板。const copyToClipboard text > navigator.clipboard.writeText(text)copyToClipboard(This Sring is Copied To Clipboard.)复制到剪贴板获取特定范围内的随机数一个...\,\date\:\2022-01-09\,\author\:\tanjie-ola\,\words\:1943,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-11-09-16-44.png\,\coverPathBase\:\/assets/2022-05-11-09-16-44\},{\text\:\ 原型模式\,\link\:\/posts/2022/2022-1-9-js-prototype/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-16-09.png\,\tinyCover\:\/cover/2022-05-11-09-16-09.png\,\coverWidth\:564,\coverHeight\:748,\coverPrimary\:\d595a4\,\coverSecondary\:\2a6a5b\,\dir\:\/posts/2022/2022-1-9-js-prototype\,\title\:\ 原型模式\,\summary\:\原型模式原型模式是在许多相同类型的对象之间共享属性的有用方式。原型是 JavaScript 原生的对象，对象可以通过原型链访问。在我们的应用程序中，我们经常需要创建许多相同类型的对象。一个有用的方法是创建一个 ES6 类的多个实例。假设我们要创建许多狗！在我们的例子中，狗不能做那么多：它们只是有一个名字，它们可以吠叫！class Dog { constructor(name) { this...\,\description\:\原型模式原型模式是在许多相同类型的对象之间共享属性的有用方式。原型是 JavaScript 原生的对象，对象可以通过原型链访问。在我们的应用程序中，我们经常需要创建许多相同类型的对象。一个有用的方法是创建一个 ES6 类的多个实例。假设我们要创建许多狗！在我们的例子中，狗不能做那么多：它们只是有一个名字，它们可以吠叫！class Dog { constructor(name) { this...\,\date\:\2022-01-09\,\author\:\tanjie-ola\,\words\:978,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-11-09-16-09.png\,\coverPathBase\:\/assets/2022-05-11-09-16-09\},{\text\:\ 提供者模式\,\link\:\/posts/2022/2022-1-8-js-provider/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-18-53.png\,\tinyCover\:\/cover/2022-05-11-09-18-53.png\,\coverWidth\:564,\coverHeight\:1252,\coverPrimary\:\7366AB\,\coverSecondary\:\8c9954\,\dir\:\/posts/2022/2022-1-8-js-provider\,\title\:\ 提供者模式\,\summary\:\提供者模式在某些情况下，我们希望为应用程序中的许多（如果不是全部）组件提供可用数据。虽然我们可以使用 将数据传递给组件props，但如果应用程序中的几乎所有组件都需要访问 props 的值，这可能很难做到。我们经常会得到一个叫做prop Drill 的东西，当我们将 props 传递到组件树的很远的地方时就是这种情况。重构依赖于 props 的代码几乎是不可能的，而且很难知道某些数据的来源。优点提...\,\description\:\提供者模式在某些情况下，我们希望为应用程序中的许多（如果不是全部）组件提供可用数据。虽然我们可以使用 将数据传递给组件props，但如果应用程序中的几乎所有组件都需要访问 props 的值，这可能很难做到。我们经常会得到一个叫做prop Drill 的东西，当我们将 props 传递到组件树的很远的地方时就是这种情况。重构依赖于 props 的代码几乎是不可能的，而且很难知道某些数据的来源。优点提...\,\date\:\2022-01-08\,\author\:\tanjie-ola\,\words\:2256,\readTime\:\12 min read\},\coverPath\:\/assets/2022-05-11-09-18-53.png\,\coverPathBase\:\/assets/2022-05-11-09-18-53\},{\text\:\ 代理模式\,\link\:\/posts/2022/2022-1-7-js-proxy/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-19-49.png\,\tinyCover\:\/cover/2022-05-11-09-19-49.png\,\coverWidth\:564,\coverHeight\:824,\coverPrimary\:\0E0D09\,\coverSecondary\:\f1f2f6\,\dir\:\/posts/2022/2022-1-7-js-proxy\,\title\:\ 代理模式\,\summary\:\代理模式使用 Proxy 对象，我们可以更好地控制与某些对象的交互。代理对象可以在我们与对象交互时确定行为，例如当我们获取值或设置值时。一般来说，代理是指代他人。生活中有很多的代理模式的场景。例如，明星有经纪人作为代理，老板有秘书作为代理等等，当有事情的时候，会找到经纪人或秘书，再由他们转达给明星或者老板。JavaScript 中也是如此：我们将与 Proxy 对象进行交互，而不是直接与目标对象交...\,\description\:\代理模式使用 Proxy 对象，我们可以更好地控制与某些对象的交互。代理对象可以在我们与对象交互时确定行为，例如当我们获取值或设置值时。一般来说，代理是指代他人。生活中有很多的代理模式的场景。例如，明星有经纪人作为代理，老板有秘书作为代理等等，当有事情的时候，会找到经纪人或秘书，再由他们转达给明星或者老板。JavaScript 中也是如此：我们将与 Proxy 对象进行交互，而不是直接与目标对象交...\,\date\:\2022-01-07\,\author\:\tanjie-ola\,\words\:1288,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-11-09-19-49.png\,\coverPathBase\:\/assets/2022-05-11-09-19-49\},{\text\:\ 单例模式\,\link\:\/posts/2022/2022-1-6-js-single/index\,\frontmatter\:{\tag\:\js\,\cover\:\/2022-05-11-09-21-21.png\,\tinyCover\:\/cover/2022-05-11-09-21-21.png\,\coverWidth\:474,\coverHeight\:1001,\coverPrimary\:\1A2635\,\coverSecondary\:\e5d9ca\,\dir\:\/posts/2022/2022-1-6-js-single\,\title\:\ 单例模式\,\summary\:\单例模式维基百科单例是可以实例化一次的类，并且可以全局访问。这个 单一实例 可以在我们的应用程序中共享，这使得单例非常适合管理应用程序中的全局状态。其实我更喜欢把全局只有 一个实例引用 的称之为单例模式，他可能比你理解单例模式更广泛一些。因为随着程序的发展，以前的单例应用的示例中往往会出现很多的缺点和不足，甚至被称之为一种 反模式 ,在现在的应用中已经很少能看到传统单例形式。现代应用都会继承单例思...\,\description\:\单例模式维基百科单例是可以实例化一次的类，并且可以全局访问。这个 单一实例 可以在我们的应用程序中共享，这使得单例非常适合管理应用程序中的全局状态。其实我更喜欢把全局只有 一个实例引用 的称之为单例模式，他可能比你理解单例模式更广泛一些。因为随着程序的发展，以前的单例应用的示例中往往会出现很多的缺点和不足，甚至被称之为一种 反模式 ,在现在的应用中已经很少能看到传统单例形式。现代应用都会继承单例思...\,\date\:\2022-01-06\,\author\:\tanjie-ola\,\words\:1968,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-11-09-21-21.png\,\coverPathBase\:\/assets/2022-05-11-09-21-21\},{\text\:\Unity\,\link\:\/posts/2021/2021-12-29-unity/index\,\frontmatter\:{\title\:\Unity\,\tag\:\CS\,\unity\,\author\:\Artiely\,\date\:\2021-12-29\,\cover\:\/2022-05-11-09-23-19.png\,\base64\:777777,\tinyCover\:\/cover/2022-05-11-09-23-19.png\,\coverWidth\:564,\coverHeight\:704,\coverPrimary\:\b7a79c\,\coverSecondary\:\485863\,\dir\:\/posts/2021/2021-12-29-unity\,\summary\:\Unity插件分享实现在线蹦迪部分插件分享aura-2-volumetric-lighting-fog体积灯和雾效果实现商城地址白嫖地址链接:密码: f571--来自百度网盘超级会员V1的分享链接失效请联系我LitJSONJSON序列化记得把插件放在Assets/Plugins下链接:密码: sutk--来自百度网盘超级会员V1的分享LayersToPNG.jsxPhotoshop 转 spine...\,\description\:\Unity插件分享实现在线蹦迪部分插件分享aura-2-volumetric-lighting-fog体积灯和雾效果实现商城地址白嫖地址链接:密码: f571--来自百度网盘超级会员V1的分享链接失效请联系我LitJSONJSON序列化记得把插件放在Assets/Plugins下链接:密码: sutk--来自百度网盘超级会员V1的分享LayersToPNG.jsxPhotoshop 转 spine...\,\words\:339,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-09-23-19.png\,\coverPathBase\:\/assets/2022-05-11-09-23-19\},{\text\:\飞机大战游戏\,\link\:\/posts/2021/2021-12-1-kaboom/2021-12-1\,\frontmatter\:{\title\:\飞机大战游戏\,\tag\:\js\,\author\:\Artiely\,\date\:\2021-12-01\,\cover\:\/2022-05-11-10-00-45.png\,\base64\:777777,\tinyCover\:\/cover/2022-05-11-10-00-45.png\,\coverWidth\:563,\coverHeight\:843,\coverPrimary\:\1c1c1c\,\coverSecondary\:\e3e3e3\,\dir\:\/posts/2021/2021-12-1-kaboom\,\summary\:\相关内容体验地址项目源码PPT其他kaboomPPT插件phaser爱给网...\,\description\:\相关内容体验地址项目源码PPT其他kaboomPPT插件phaser爱给网...\,\words\:31,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-10-00-45.png\,\coverPathBase\:\/assets/2022-05-11-10-00-45\},{\text\:\ taro 升级采坑\,\link\:\/posts/2021/2021-9-9-taro/index\,\frontmatter\:{\tag\:\taro\,\react\,\cover\:\/2022-05-11-09-24-54.png\,\tinyCover\:\/cover/2022-05-11-09-24-54.png\,\coverWidth\:412,\coverHeight\:594,\coverPrimary\:\4b4b4b\,\coverSecondary\:\b4b4b4\,\dir\:\/posts/2021/2021-9-9-taro\,\title\:\ taro 升级采坑\,\summary\:\taro 升级采坑Taro.getSystemInfoSync()获取不到值 .getSystemInfoSync is not a function原因：依赖版本不一致的问题{ \\\@tarojs/components\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/runtime\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/taro\\\: \\\^3.0.0-a...\,\description\:\taro 升级采坑Taro.getSystemInfoSync()获取不到值 .getSystemInfoSync is not a function原因：依赖版本不一致的问题{ \\\@tarojs/components\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/runtime\\\: \\\^3.0.0-alpha.5\\\, \\\@tarojs/taro\\\: \\\^3.0.0-a...\,\date\:\2021-09-09\,\author\:\tanjie-ola\,\words\:385,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-09-24-54.png\,\coverPathBase\:\/assets/2022-05-11-09-24-54\},{\text\:\小程序分享另类实践\,\link\:\/posts/2021/2021-8-16-min-share/2021-8-16-min-share\,\frontmatter\:{\title\:\小程序分享另类实践\,\tag\:\js\,\mini\,\taro\,\author\:\Artiely\,\date\:\2021-08-16\,\cover\:\/2022-05-11-10-01-15.png\,\base64\:\fafafa\,\password\:true,\tinyCover\:\/cover/2022-05-11-10-01-15.png\,\coverWidth\:564,\coverHeight\:846,\coverPrimary\:\608d8f\,\coverSecondary\:\9f7270\,\dir\:\/posts/2021/2021-8-16-min-share\,\summary\:\该方法的好处是你不用关心分享以后的逻辑，也就是说你不用去管理 接受分享的用户进来要处理是否登录，是否已经绑定等等，这些逻辑都是在分享的时候就定义好了。不会导致分享逻辑散布在各处难以维护。/** 分享包装 useHandleShare(params,callback) params{ title:string imageUrl:string path:string cb:fn query:{} 参...\,\description\:\该方法的好处是你不用关心分享以后的逻辑，也就是说你不用去管理 接受分享的用户进来要处理是否登录，是否已经绑定等等，这些逻辑都是在分享的时候就定义好了。不会导致分享逻辑散布在各处难以维护。/** 分享包装 useHandleShare(params,callback) params{ title:string imageUrl:string path:string cb:fn query:{} 参...\,\words\:358,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-10-01-15.png\,\coverPathBase\:\/assets/2022-05-11-10-01-15\},{\text\:\利用 ResizeObserver 实现响应式\,\link\:\/posts/2021/2021-8-15-resize-observer/2021-8-15-resize-observer\,\frontmatter\:{\title\:\利用 ResizeObserver 实现响应式\,\tag\:\js\,\author\:\Artiely\,\date\:\2021-08-15\,\cover\:\/2022-05-11-10-02-28.png\,\base64\:\fafafa\,\tinyCover\:\/cover/2022-05-11-10-02-28.png\,\coverWidth\:564,\coverHeight\:662,\coverPrimary\:\ccd4ce\,\coverSecondary\:\332b31\,\dir\:\/posts/2021/2021-8-15-resize-observer\,\summary\:\const a document.getElementById(a)const obverser new ResizeObserver((entries) > { for (const entry of entries) console.log(entry.contentRect.width)})obverser.observe(a)例如表格里的元素很长的，在宽度够的情况下自...\,\description\:\const a document.getElementById(a)const obverser new ResizeObserver((entries) > { for (const entry of entries) console.log(entry.contentRect.width)})obverser.observe(a)例如表格里的元素很长的，在宽度够的情况下自...\,\words\:63,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-10-02-28.png\,\coverPathBase\:\/assets/2022-05-11-10-02-28\},{\text\:\pixijs\,\link\:\/posts/2021/2021-7-23-pixijs/2021-7-23-pixijs\,\frontmatter\:{\title\:\pixijs\,\tag\:\pixijs\,\author\:\Artiely\,\date\:\2021-07-23\,\cover\:\/2022-05-11-10-03-20.png\,\tinyCover\:\/cover/2022-05-11-10-03-20.png\,\coverWidth\:600,\coverHeight\:1188,\coverPrimary\:\bbbcc2\,\coverSecondary\:\44433d\,\dir\:\/posts/2021/2021-7-23-pixijs\,\summary\:\安装yarn add pixi.js起步import * as PIXI from pixi.js// 初始化const app new PIXI.Application({ width: 256, height: 256, antialias: true, // default: false transparent: false, // default: false resol...\,\description\:\安装yarn add pixi.js起步import * as PIXI from pixi.js// 初始化const app new PIXI.Application({ width: 256, height: 256, antialias: true, // default: false transparent: false, // default: false resol...\,\words\:387,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-10-03-20.png\,\coverPathBase\:\/assets/2022-05-11-10-03-20\},{\text\:\小程序二进制转字符串\,\link\:\/posts/2021/2021-6-15-mini/2021-6-15-mini\,\frontmatter\:{\title\:\小程序二进制转字符串\,\tag\:\weapp\,\cover\:\/2022-05-11-10-03-50.png\,\base64\:\22b443\,\date\:\2021-06-15\,\tinyCover\:\/cover/2022-05-11-10-03-50.png\,\coverWidth\:564,\coverHeight\:916,\coverPrimary\:\6e6d6d\,\coverSecondary\:\919292\,\dir\:\/posts/2021/2021-6-15-mini\,\summary\:\function Uint8ArrayToString(buf) { let encodedString String.fromCharCode.apply(null, new Uint8Array(buf)) encodedString decodeURIComponent(escape(encodedString)) return encodedString}`...\,\description\:\function Uint8ArrayToString(buf) { let encodedString String.fromCharCode.apply(null, new Uint8Array(buf)) encodedString decodeURIComponent(escape(encodedString)) return encodedString}`...\,\author\:\tanjie-ola\,\words\:17,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-10-03-50.png\,\coverPathBase\:\/assets/2022-05-11-10-03-50\},{\text\:\如何创建自己的美区苹果账号\,\link\:\/posts/2021/2021-3-18-appleId/2021-3-18-appleId\,\frontmatter\:{\title\:\如何创建自己的美区苹果账号\,\tag\:\appleId\,\cover\:\/2022-05-11-10-04-41.png\,\base64\:\a19caf\,\author\:\artiely\,\date\:\2021-03-18\,\tinyCover\:\/cover/2022-05-11-10-04-41.png\,\coverWidth\:564,\coverHeight\:978,\coverPrimary\:\cfcccc\,\coverSecondary\:\303333\,\dir\:\/posts/2021/2021-3-18-appleId\,\summary\:\如何创建？1.使用网页浏览器创建新的Apple ID点击Apple ID创建链接 ，然后点击“创建您的 Apple ID”。（页面语言是中文英文都可以）12.输入姓名、生日、电子邮件地址、密码、国家选择美国23.选择安全提示问题，点击“继续”34.网页版注册完成4手机登录新创建等Apple ID1.打开Apple设备，进入 App Store -> 点击右上角你的Apple ID头像退出原来的账...\,\description\:\如何创建？1.使用网页浏览器创建新的Apple ID点击Apple ID创建链接 ，然后点击“创建您的 Apple ID”。（页面语言是中文英文都可以）12.输入姓名、生日、电子邮件地址、密码、国家选择美国23.选择安全提示问题，点击“继续”34.网页版注册完成4手机登录新创建等Apple ID1.打开Apple设备，进入 App Store -> 点击右上角你的Apple ID头像退出原来的账...\,\words\:267,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-11-10-04-41.png\,\coverPathBase\:\/assets/2022-05-11-10-04-41\},{\text\:\从使用场景了解proxy\,\link\:\/posts/2021/2021-2-23-proxy/2021-2-23-proxy\,\frontmatter\:{\title\:\从使用场景了解proxy\,\tag\:\proxy\,\cover\:\/2022-05-11-10-05-37.png\,\base64\:\f0df3d\,\author\:\artiely\,\date\:\2021-02-23\,\tinyCover\:\/cover/2022-05-11-10-05-37.png\,\coverWidth\:564,\coverHeight\:957,\coverPrimary\:\262623\,\coverSecondary\:\d9d9dc\,\dir\:\/posts/2021/2021-2-23-proxy\,\summary\:\前面讲过一篇proxy 的深入理解，现在就带大家了解一下proxy的实际应用，更深入的了解proxy的妙用及价值吧！ 呼应上了~由俭入奢跟踪属性访问（get，set）假设我们有一个函数tracePropAccess(obj, propKeys)，该函数 obj 在 propKeys 设置或获取的属性（其键在 Array 中）时进行记录。在以下代码中，我们将该函数应用于类的实例 Point：clas...\,\description\:\前面讲过一篇proxy 的深入理解，现在就带大家了解一下proxy的实际应用，更深入的了解proxy的妙用及价值吧！ 呼应上了~由俭入奢跟踪属性访问（get，set）假设我们有一个函数tracePropAccess(obj, propKeys)，该函数 obj 在 propKeys 设置或获取的属性（其键在 Array 中）时进行记录。在以下代码中，我们将该函数应用于类的实例 Point：clas...\,\words\:2463,\readTime\:\13 min read\},\coverPath\:\/assets/2022-05-11-10-05-37.png\,\coverPathBase\:\/assets/2022-05-11-10-05-37\},{\text\:\ 有用的javascript技巧\,\link\:\/posts/2021/2021-1-9-js/index\,\frontmatter\:{\tag\:\javascript\,\cover\:\/2022-05-11-09-25-23.png\,\tinyCover\:\/cover/2022-05-11-09-25-23.png\,\coverWidth\:500,\coverHeight\:750,\coverPrimary\:\1f1f1f\,\coverSecondary\:\e0e0e0\,\dir\:\/posts/2021/2021-1-9-js\,\title\:\ 有用的javascript技巧\,\summary\:\有用的javascript技巧您可以使用 JavaScript 以不同的方式做同样的事情。随着每个新 ECMAScript 规范的发布，都添加了新的方法和运算符，以使代码更短且更具可读性。代码Object.entries大多数开发人员使用Object.keys方法来迭代对象。此方法仅返回对象键数组，而不返回值。您可以使用Object.entries来获取键和值。const person { ...\,\description\:\有用的javascript技巧您可以使用 JavaScript 以不同的方式做同样的事情。随着每个新 ECMAScript 规范的发布，都添加了新的方法和运算符，以使代码更短且更具可读性。代码Object.entries大多数开发人员使用Object.keys方法来迭代对象。此方法仅返回对象键数组，而不返回值。您可以使用Object.entries来获取键和值。const person { ...\,\date\:\2021-01-09\,\author\:\tanjie-ola\,\words\:759,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-11-09-25-23.png\,\coverPathBase\:\/assets/2022-05-11-09-25-23\},{\text\:\ threejs的低模和一些材质参考\,\link\:\/posts/2021/2021-1-8-threejs/index\,\frontmatter\:{\tag\:\threejs\,\cover\:\/2022-05-11-09-26-04.png\,\tinyCover\:\/cover/2022-05-11-09-26-04.png\,\coverWidth\:564,\coverHeight\:1001,\coverPrimary\:\6d6e71\,\coverSecondary\:\92918e\,\dir\:\/posts/2021/2021-1-8-threejs\,\title\:\ threejs的低模和一些材质参考\,\summary\:\threejs的低模和一些材质参考使用演示threejs控制面板插件...\,\description\:\threejs的低模和一些材质参考使用演示threejs控制面板插件...\,\date\:\2021-01-08\,\author\:\tanjie-ola\,\words\:26,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-11-09-26-04.png\,\coverPathBase\:\/assets/2022-05-11-09-26-04\},{\text\:\从使用场景了解puppeteer\,\link\:\/posts/2021/2021-1-3-puppeteer/2021-1-3-puppeteer\,\frontmatter\:{\title\:\从使用场景了解puppeteer\,\tag\:\puppeteer\,\cover\:\/2022-05-11-10-06-26.png\,\base64\:\00cab4\,\author\:\artiely\,\date\:\2021-01-03\,\tinyCover\:\/cover/2022-05-11-10-06-26.png\,\coverWidth\:534,\coverHeight\:800,\coverPrimary\:\876f5b\,\coverSecondary\:\7890a4\,\dir\:\/posts/2021/2021-1-3-puppeteer\,\summary\:\英 ˌpʌpɪˈtɪər美 ˌpʌpɪˈtɪrn. 操纵木偶的人；操纵傀儡vt. 操纵浏览器自动化库Puppeteer Node.js + Chrome评估 Javascript官网Puppeteer安装只需安装 NPM 包即可开始npm i puppeteer然后const puppetter require(puppeteer);(async() > { // .......\,\description\:\英 ˌpʌpɪˈtɪər美 ˌpʌpɪˈtɪrn. 操纵木偶的人；操纵傀儡vt. 操纵浏览器自动化库Puppeteer Node.js + Chrome评估 Javascript官网Puppeteer安装只需安装 NPM 包即可开始npm i puppeteer然后const puppetter require(puppeteer);(async() > { // .......\,\words\:1126,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-11-10-06-26.png\,\coverPathBase\:\/assets/2022-05-11-10-06-26\},{\text\:\css\,\link\:\/posts/2020/2020-12-31-css/2020-12-31-css\,\frontmatter\:{\title\:\css\,\tag\:\css\,\cover\:\/2022-05-13-13-30-32.png\,\base64\:\639ecd\,\author\:\artiely\,\date\:\2020-12-31\,\tinyCover\:\/cover/2022-05-13-13-30-32.png\,\coverWidth\:564,\coverHeight\:1003,\coverPrimary\:\dcbf2e\,\coverSecondary\:\2340d1\,\dir\:\/posts/2020/2020-12-31-css\,\summary\:\css See the Pen Clip Path Transitions by jie (@artiely) on CodePen.`...\,\description\:\css See the Pen Clip Path Transitions by jie (@artiely) on CodePen.`...\,\words\:51,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-30-32.png\,\coverPathBase\:\/assets/2022-05-13-13-30-32\},{\text\:\面试问题总结\,\link\:\/posts/2020/2020-9-24-interview/2020-9-24-interview\,\frontmatter\:{\title\:\面试问题总结\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-29-56.png\,\base64\:\3f5d5e\,\author\:\artiely\,\date\:\2020-09-24\,\tinyCover\:\/cover/2022-05-13-13-29-56.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\0b596b\,\coverSecondary\:\f4a694\,\dir\:\/posts/2020/2020-9-24-interview\,\summary\:\最近参加了一些面试，凭借着自己的记忆把还记得住的问题做一个归纳总结和个人观点。暂时不写答案，大家可以自己答一答，再找我要答案。笔试和问答// 说出一下代码执行结果，为什么？console.log(script start);setTimeout(function(){ console.log(settimeout)});let promise1 new Promise(functio...\,\description\:\最近参加了一些面试，凭借着自己的记忆把还记得住的问题做一个归纳总结和个人观点。暂时不写答案，大家可以自己答一答，再找我要答案。笔试和问答// 说出一下代码执行结果，为什么？console.log(script start);setTimeout(function(){ console.log(settimeout)});let promise1 new Promise(functio...\,\words\:1912,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-13-13-29-56.png\,\coverPathBase\:\/assets/2022-05-13-13-29-56\},{\text\:\手写 map 和 reduce\,\link\:\/posts/2020/2020-9-15-js-arr/2020-9-15-js-arr\,\frontmatter\:{\title\:\手写 map 和 reduce\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-29-26.png\,\base64\:\1b1b20\,\author\:\artiely\,\date\:\2020-09-15\,\tinyCover\:\/cover/2022-05-13-13-29-26.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\667e95\,\coverSecondary\:\99816a\,\dir\:\/posts/2020/2020-9-15-js-arr\,\summary\:\(function() { const selfMap function(fn, context) { // fn: 回调 context:回调作用域指定的this // 1. 获取调用者this,并转为数组 const arr .slice.call(this) // 2. 遍历调用者 const arrMap for (let i ...\,\description\:\(function() { const selfMap function(fn, context) { // fn: 回调 context:回调作用域指定的this // 1. 获取调用者this,并转为数组 const arr .slice.call(this) // 2. 遍历调用者 const arrMap for (let i ...\,\words\:183,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-29-26.png\,\coverPathBase\:\/assets/2022-05-13-13-29-26\},{\text\:\ 说一说递归如何优化-尾递归优化\,\link\:\/posts/2020/2020-9-7-recursive/2020-9-7-recursive\,\frontmatter\:{\tag\:\javaScript\,\cover\:\/2022-05-13-13-28-45.png\,\base64\:\1b1b20\,\author\:\artiely\,\date\:\2020-09-07\,\tinyCover\:\/cover/2022-05-13-13-28-45.png\,\coverWidth\:564,\coverHeight\:790,\coverPrimary\:\bbb7a5\,\coverSecondary\:\44485a\,\dir\:\/posts/2020/2020-9-7-recursive\,\title\:\ 说一说递归如何优化-尾递归优化\,\summary\:\说一说递归如何优化-尾递归优化本文旨在帮助大家掌握递归的性能优化方案——尾递归优化，以及如何对下列函数用尾递归进行优化？参考摘录：阮一峰-尾调用优化一、什么尾调用？尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x) { return g(x)}上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下这两种情况，均不属于尾调用。// 情...\,\description\:\说一说递归如何优化-尾递归优化本文旨在帮助大家掌握递归的性能优化方案——尾递归优化，以及如何对下列函数用尾递归进行优化？参考摘录：阮一峰-尾调用优化一、什么尾调用？尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x) { return g(x)}上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下这两种情况，均不属于尾调用。// 情...\,\words\:2161,\readTime\:\11 min read\},\coverPath\:\/assets/2022-05-13-13-28-45.png\,\coverPathBase\:\/assets/2022-05-13-13-28-45\},{\text\:\当···时发生了什么\,\link\:\/posts/2020/2020-9-5-what-happens/2020-9-5-what-happens\,\frontmatter\:{\title\:\当···时发生了什么\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-27-34.png\,\base64\:\f2f2f2\,\author\:\artiely\,\date\:\2020-09-05\,\tinyCover\:\/cover/2022-05-13-13-27-34.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\1d2122\,\coverSecondary\:\e2dedd\,\dir\:\/posts/2020/2020-9-5-what-happens\,\summary\:\这个试图回答一个古老的面试问题：当你在浏览器中输入 google.com 并且按下回车之后发生了什么？不过我们不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。这将是一个协作的过程，所以深入挖掘吧，并且帮助我们一起完善它。仍然有大量的细节等待着你来添加，欢迎向我们发送 Pull Requset！按下\\\g\\\键接下来的内容介绍了物理键盘和系统中断的工作原理，但是有一部分内容却没有涉及。...\,\description\:\这个试图回答一个古老的面试问题：当你在浏览器中输入 google.com 并且按下回车之后发生了什么？不过我们不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。这将是一个协作的过程，所以深入挖掘吧，并且帮助我们一起完善它。仍然有大量的细节等待着你来添加，欢迎向我们发送 Pull Requset！按下\\\g\\\键接下来的内容介绍了物理键盘和系统中断的工作原理，但是有一部分内容却没有涉及。...\,\words\:7353,\readTime\:\37 min read\},\coverPath\:\/assets/2022-05-13-13-27-34.png\,\coverPathBase\:\/assets/2022-05-13-13-27-34\},{\text\:\前端并发性能优化\,\link\:\/posts/2020/2020-9-3-brower/2020-9-3-brower\,\frontmatter\:{\title\:\前端并发性能优化\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-23-43.png\,\base64\:\0a1a4a\,\author\:\artiely\,\date\:\2020-09-03\,\tinyCover\:\/cover/2022-05-13-13-23-43.png\,\coverWidth\:474,\coverHeight\:842,\coverPrimary\:\403d44\,\coverSecondary\:\bfc2bb\,\dir\:\/posts/2020/2020-9-3-brower\,\summary\:\前端技术的逐渐成熟，还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。cookie free按照普通设计，当网站cookie信息有1 KB、网站首页共150个资源时，用户在请求过程中需要发送15...\,\description\:\前端技术的逐渐成熟，还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。cookie free按照普通设计，当网站cookie信息有1 KB、网站首页共150个资源时，用户在请求过程中需要发送15...\,\words\:1206,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-13-13-23-43.png\,\coverPathBase\:\/assets/2022-05-13-13-23-43\},{\text\:\深入理解Proxy\,\link\:\/posts/2020/2020-9-2-proxy/index\,\frontmatter\:{\title\:\深入理解Proxy\,\tag\:\javaScript\,\proxy\,\cover\:\/2022-05-13-13-17-57.png\,\base64\:\eb7426\,\author\:\artiely\,\date\:\2020-09-02\,\tinyCover\:\/cover/2022-05-13-13-17-57.png\,\coverWidth\:564,\coverHeight\:1003,\coverPrimary\:\463c38\,\coverSecondary\:\b9c3c7\,\dir\:\/posts/2020/2020-9-2-proxy\,\summary\:\什么是Proxy？它的作用是？MDN据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层 \\\拦截\\\，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来...\,\description\:\什么是Proxy？它的作用是？MDN据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层 \\\拦截\\\，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来...\,\words\:2838,\readTime\:\15 min read\},\coverPath\:\/assets/2022-05-13-13-17-57.png\,\coverPathBase\:\/assets/2022-05-13-13-17-57\},{\text\:\前端面试题汇总-框架-1\,\link\:\/posts/2020/2020-9-1-fw/2020-9-1-fw\,\frontmatter\:{\title\:\前端面试题汇总-框架-1\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-16-29.png\,\base64\:\3fb782\,\author\:\artiely\,\date\:\2020-09-01\,\tinyCover\:\/cover/2022-05-13-13-16-29.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\cbb0af\,\coverSecondary\:\344f50\,\dir\:\/posts/2020/2020-9-1-fw\,\summary\:\1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据...\,\description\:\1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据...\,\words\:3486,\readTime\:\18 min read\},\coverPath\:\/assets/2022-05-13-13-16-29.png\,\coverPathBase\:\/assets/2022-05-13-13-16-29\},{\text\:\前端面试题汇总-框架-2\,\link\:\/posts/2020/2020-9-1-fw2/2020-9-1-fw2\,\frontmatter\:{\title\:\前端面试题汇总-框架-2\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-17-15.png\,\base64\:\3fb782\,\author\:\artiely\,\date\:\2020-09-01\,\tinyCover\:\/cover/2022-05-13-13-17-15.png\,\coverWidth\:301,\coverHeight\:512,\coverPrimary\:\665f65\,\coverSecondary\:\99a09a\,\dir\:\/posts/2020/2020-9-1-fw2\,\summary\:\生命周期函数面试题1.什么是 vue 生命周期？有什么作用？答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染...\,\description\:\生命周期函数面试题1.什么是 vue 生命周期？有什么作用？答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染...\,\words\:3593,\readTime\:\18 min read\},\coverPath\:\/assets/2022-05-13-13-17-15.png\,\coverPathBase\:\/assets/2022-05-13-13-17-15\},{\text\:\ 前端性能优化\,\link\:\/posts/2020/2020-8-17/2020-8-17\,\frontmatter\:{\tag\:\gzip\,\javaScript\,\DNS\,\cover\:\/2022-05-13-13-15-41.png\,\base64\:\2884fc\,\author\:\artiely\,\date\:\2020-08-17\,\tinyCover\:\/cover/2022-05-13-13-15-41.png\,\coverWidth\:510,\coverHeight\:720,\coverPrimary\:\ebdcd7\,\coverSecondary\:\142328\,\dir\:\/posts/2020/2020-8-17\,\title\:\ 前端性能优化\,\summary\:\前端性能优化关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。尽量减少 HTTP 请求个数——须权衡使用 CDN（内容分发网络）为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。避免空的 src 和 href使用 gzip 压缩内容把 CSS 放到顶部把 JS 放到底部避免使用 CSS 表达式将 CSS ...\,\description\:\前端性能优化关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。尽量减少 HTTP 请求个数——须权衡使用 CDN（内容分发网络）为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。避免空的 src 和 href使用 gzip 压缩内容把 CSS 放到顶部把 JS 放到底部避免使用 CSS 表达式将 CSS ...\,\words\:342,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-13-15-41.png\,\coverPathBase\:\/assets/2022-05-13-13-15-41\},{\text\:\ 创建模板脚手架\,\link\:\/posts/2020/2020-7-23-temp/2020-7-23-temp\,\frontmatter\:{\tag\:\commander\,\cover\:\/2022-05-13-13-15-00.png\,\base64\:262626,\author\:\artiely\,\date\:\2020-07-23\,\tinyCover\:\/cover/2022-05-13-13-15-00.png\,\coverWidth\:405,\coverHeight\:720,\coverPrimary\:\2a2929\,\coverSecondary\:\d5d6d6\,\dir\:\/posts/2020/2020-7-23-temp\,\title\:\ 创建模板脚手架\,\summary\:\创建模板脚手架commandercommander这是用来编写指令和处理命令行的，具体用法如下：const program require(commander)// 定义指令program .version(0.0.1) .command(init, Generate a new project from a template) .action(() > { //...\,\description\:\创建模板脚手架commandercommander这是用来编写指令和处理命令行的，具体用法如下：const program require(commander)// 定义指令program .version(0.0.1) .command(init, Generate a new project from a template) .action(() > { //...\,\words\:382,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-13-15-00.png\,\coverPathBase\:\/assets/2022-05-13-13-15-00\},{\text\:\taro 踩坑初体验\,\link\:\/posts/2020/2020-7-21-taro/2020-7-21-taro\,\frontmatter\:{\title\:\taro 踩坑初体验\,\tag\:\weapp\,\taro\,\cover\:\/2022-05-13-13-14-12.png\,\base64\:\1628d2\,\author\:\artiely\,\date\:\2020-07-21\,\tinyCover\:\/cover/2022-05-13-13-14-12.png\,\coverWidth\:564,\coverHeight\:769,\coverPrimary\:\4f3d36\,\coverSecondary\:\b0c2c9\,\dir\:\/posts/2020/2020-7-21-taro\,\summary\:\taro 踩坑初体验因为接到多端的小程序需求并且工期端，之前一直在关注taro，今天就来先入个门实践一下，希望可以站着走出来官方文档安装按照文档走流程没遇到啥问题，不赘述百度小程序工具下载下载地址有点小隐蔽运行百度小程序yarn dev:swan报错大致意思是node-sass没有安装成功需要重新构建回到文档的最初提示npm install -g mirror-config-chinanpm i ...\,\description\:\taro 踩坑初体验因为接到多端的小程序需求并且工期端，之前一直在关注taro，今天就来先入个门实践一下，希望可以站着走出来官方文档安装按照文档走流程没遇到啥问题，不赘述百度小程序工具下载下载地址有点小隐蔽运行百度小程序yarn dev:swan报错大致意思是node-sass没有安装成功需要重新构建回到文档的最初提示npm install -g mirror-config-chinanpm i ...\,\words\:165,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-14-12.png\,\coverPathBase\:\/assets/2022-05-13-13-14-12\},{\text\:\无邀请码分享相关产品\,\link\:\/posts/2020/2020-7-14-share/2020-7-14-share\,\frontmatter\:{\title\:\无邀请码分享相关产品\,\tag\:\product\,\cover\:\/2022-05-13-13-13-35.png\,\base64\:\606a7b\,\author\:\artiely\,\date\:\2020-07-14\,\tinyCover\:\/cover/2022-05-13-13-13-35.png\,\coverWidth\:564,\coverHeight\:965,\coverPrimary\:\f0e4e0\,\coverSecondary\:\0f1b1f\,\dir\:\/posts/2020/2020-7-14-share\,\summary\:\openinstallshareinstallsharetrace极光魔链大致的实现方案1、WEB的下载落地页每个用户分享出来的落地页URL不同，或者说URL上的参数不同，比如A用户的URL后面带的参数可能是codeA，B用户分的URL参数就是codeB。这样就可以区分用户是点谁的邀请链接进来的。同时可以通过网页收集一些手机的信息和分享的链接一起上报给后台，不过网页能获取的信息比较有限，收集的...\,\description\:\openinstallshareinstallsharetrace极光魔链大致的实现方案1、WEB的下载落地页每个用户分享出来的落地页URL不同，或者说URL上的参数不同，比如A用户的URL后面带的参数可能是codeA，B用户分的URL参数就是codeB。这样就可以区分用户是点谁的邀请链接进来的。同时可以通过网页收集一些手机的信息和分享的链接一起上报给后台，不过网页能获取的信息比较有限，收集的...\,\words\:415,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-13-13-35.png\,\coverPathBase\:\/assets/2022-05-13-13-13-35\},{\text\:\可控模态框的实现\,\link\:\/posts/2020/2020-7-13-madel/2020-7-13-madel\,\frontmatter\:{\title\:\可控模态框的实现\,\tag\:\javaScript\,\cover\:\/2022-05-13-13-11-50.png\,\base64\:\f1da4e\,\author\:\artiely\,\date\:\2020-07-13\,\tinyCover\:\/cover/2022-05-13-13-11-50.png\,\coverWidth\:540,\coverHeight\:960,\coverPrimary\:\d0c2be\,\coverSecondary\:\2f3d41\,\dir\:\/posts/2020/2020-7-13-madel\,\summary\:\v-model 语法糖的实现.sync 修饰符的使用滚动穿透的解决slot 和 slot-scoped 的运用优化滚动条的处理动态添加到指定节点的实现快捷键的扩展应用esc,enter动画拖拽jsApi扩展成提示框扩展成询问框扩展成抽屉书写文档借助 vue-cli 快速开始原型开发安装全局原型 cli 工具点击我了解更多npm install -g @vue/cli-service-globa...\,\description\:\v-model 语法糖的实现.sync 修饰符的使用滚动穿透的解决slot 和 slot-scoped 的运用优化滚动条的处理动态添加到指定节点的实现快捷键的扩展应用esc,enter动画拖拽jsApi扩展成提示框扩展成询问框扩展成抽屉书写文档借助 vue-cli 快速开始原型开发安装全局原型 cli 工具点击我了解更多npm install -g @vue/cli-service-globa...\,\words\:2205,\readTime\:\12 min read\},\coverPath\:\/assets/2022-05-13-13-11-50.png\,\coverPathBase\:\/assets/2022-05-13-13-11-50\},{\text\:\ 着迷的JavaScript\,\link\:\/posts/2020/2020-7-9-thks-js/2020-7-9-thks-js\,\frontmatter\:{\tag\:\javaScript\,\cover\:\/2022-05-13-13-10-33.png\,\base64\:\f1da4e\,\author\:\artiely\,\date\:\2020-07-09\,\tinyCover\:\/cover/2022-05-13-13-10-33.png\,\coverWidth\:506,\coverHeight\:920,\coverPrimary\:\f3e5db\,\coverSecondary\:\0c1a24\,\dir\:\/posts/2020/2020-7-9-thks-js\,\title\:\ 着迷的JavaScript\,\summary\:\着迷的JavaScriptfuck js...\,\description\:\着迷的JavaScriptfuck js...\,\words\:7,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-10-33.png\,\coverPathBase\:\/assets/2022-05-13-13-10-33\},{\text\:\vue 完整api备忘清单\,\link\:\/posts/2020/2020-7-1-vue-api/2020-7-1-vue-api\,\frontmatter\:{\title\:\vue 完整api备忘清单\,\tag\:\vue\,\cover\:\/2022-05-13-13-05-49.png\,\base64\:\f9f9f9\,\author\:\artiely\,\date\:\2020-07-01\,\tinyCover\:\/cover/2022-05-13-13-05-49.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\ecc6af\,\coverSecondary\:\133950\,\dir\:\/posts/2020/2020-7-1-vue-api\,\summary\:\https://vuejs-tips.github.io/cheatsheet/vuejs-cheatsheet.pdf...\,\description\:\https://vuejs-tips.github.io/cheatsheet/vuejs-cheatsheet.pdf...\,\words\:22,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-05-49.png\,\coverPathBase\:\/assets/2022-05-13-13-05-49\},{\text\:\vuex 完整api备忘清单\,\link\:\/posts/2020/2020-7-1-vuex-api/2020-7-1-vuex-api\,\frontmatter\:{\title\:\vuex 完整api备忘清单\,\tag\:\vue\,\cover\:\/2022-05-13-13-06-48.png\,\base64\:\f9f9f9\,\author\:\artiely\,\date\:\2020-07-01\,\tinyCover\:\/cover/2022-05-13-13-06-48.png\,\coverWidth\:563,\coverHeight\:1051,\coverPrimary\:\383e45\,\coverSecondary\:\c7c1ba\,\dir\:\/posts/2020/2020-7-1-vuex-api\,\summary\:\...\,\description\:\...\,\words\:1,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-06-48.png\,\coverPathBase\:\/assets/2022-05-13-13-06-48\},{\text\:\vue 组件模式\,\link\:\/posts/2020/2020-6-29-component/2020-6-29-component\,\frontmatter\:{\title\:\vue 组件模式\,\tag\:\vue\,\cover\:\/2022-05-13-13-05-23.png\,\base64\:\3a966a\,\author\:\artiely\,\date\:\2020-06-29\,\tinyCover\:\/cover/2022-05-13-13-05-23.png\,\coverWidth\:564,\coverHeight\:878,\coverPrimary\:\efe6db\,\coverSecondary\:\101924\,\dir\:\/posts/2020/2020-6-29-component\,\summary\:\有用的Vue模式，技巧，提示和技巧以及有帮助的精选链接。组件声明单文件组件 (SFC) - 最常用 {{text}}export default { data() { return { text: Click me, }; }, methods: { handleClick() { console.log(clicked); }, ...\,\description\:\有用的Vue模式，技巧，提示和技巧以及有帮助的精选链接。组件声明单文件组件 (SFC) - 最常用 {{text}}export default { data() { return { text: Click me, }; }, methods: { handleClick() { console.log(clicked); }, ...\,\words\:2622,\readTime\:\14 min read\},\coverPath\:\/assets/2022-05-13-13-05-23.png\,\coverPathBase\:\/assets/2022-05-13-13-05-23\},{\text\:\创建自定义事件\,\link\:\/posts/2020/2020-6-25-custom-event/2020-6-25-custom-event\,\frontmatter\:{\title\:\创建自定义事件\,\tag\:\javascript\,\cover\:\/2022-05-13-13-03-51.png\,\base64\:\e7eb91\,\date\:\2020-06-25\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-13-03-51.png\,\coverWidth\:564,\coverHeight\:752,\coverPrimary\:\e3d4c0\,\coverSecondary\:\1c2b3f\,\dir\:\/posts/2020/2020-6-25-custom-event\,\summary\:\可以使用Event构造函数创建事件，如下所示：const event new Event(build)// Listen for the event.elem.addEventListener(build, (e) > { /* ... */ }, false)// Dispatch the event.elem.dispatchEvent(event)上面的代码示例使用EventT...\,\description\:\可以使用Event构造函数创建事件，如下所示：const event new Event(build)// Listen for the event.elem.addEventListener(build, (e) > { /* ... */ }, false)// Dispatch the event.elem.dispatchEvent(event)上面的代码示例使用EventT...\,\words\:901,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-13-03-51.png\,\coverPathBase\:\/assets/2022-05-13-13-03-51\},{\text\:\摄影图片欣赏\,\link\:\/posts/2020/2020-6-25-photo/2020-6-25-photo\,\frontmatter\:{\title\:\摄影图片欣赏\,\tag\:\photo\,\cover\:\/2022-05-13-13-04-48.png\,\base64\:\4a67b9\,\author\:\幽梦影\,\date\:\2020-06-25\,\tinyCover\:\/cover/2022-05-13-13-04-48.png\,\coverWidth\:564,\coverHeight\:806,\coverPrimary\:\cbc5bd\,\coverSecondary\:\343a42\,\dir\:\/posts/2020/2020-6-25-photo\,\summary\:\...\,\description\:\...\,\words\:11,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-13-04-48.png\,\coverPathBase\:\/assets/2022-05-13-13-04-48\},{\text\:\指令限制字符的长度\,\link\:\/posts/2020/2020-6-23-charslimit/2020-6-23-charslimit\,\frontmatter\:{\title\:\指令限制字符的长度\,\tag\:\vue\,\cover\:\/2022-05-13-13-01-53.png\,\base64\:\68a863\,\date\:\2020-06-23\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-13-01-53.png\,\coverWidth\:564,\coverHeight\:810,\coverPrimary\:\e5e2e0\,\coverSecondary\:\1a1d1f\,\dir\:\/posts/2020/2020-6-23-charslimit\,\summary\:\show code// 计算当前输入的字节export function strlen(str) { let len 0 for (let i 0; i 0x0001 && c 0xFF60)) { len++ } else len + 2 } return len}// 计算还可输入的字节export function maxlen(st...\,\description\:\show code// 计算当前输入的字节export function strlen(str) { let len 0 for (let i 0; i 0x0001 && c 0xFF60)) { len++ } else len + 2 } return len}// 计算还可输入的字节export function maxlen(st...\,\words\:452,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-13-01-53.png\,\coverPathBase\:\/assets/2022-05-13-13-01-53\},{\text\:\限制字符的长度\,\link\:\/posts/2020/2020-6-20-limit-chars/2020-6-20-limit-chars\,\frontmatter\:{\title\:\限制字符的长度\,\tag\:\vue\,\cover\:\/2022-05-13-12-51-39.png\,\base64\:\68a863\,\date\:\2020-06-20\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-12-51-39.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\0a0a1c\,\coverSecondary\:\f5f5e3\,\dir\:\/posts/2020/2020-6-20-limit-chars\,\summary\:\需求一个字母和数字算作一个字符，一个汉字算作两个字符如：一个输入框可输入 30 个字符,同时展示剩余可输入字符用例 1：可输入 30 个字母或数字用例 2：只可输入 15 个汉字开始const charCodeDir (c) > { return (c > 0x0001 && c 0xFF60)}// 计算当前输入的字节export function strlen(str) { l...\,\description\:\需求一个字母和数字算作一个字符，一个汉字算作两个字符如：一个输入框可输入 30 个字符,同时展示剩余可输入字符用例 1：可输入 30 个字母或数字用例 2：只可输入 15 个汉字开始const charCodeDir (c) > { return (c > 0x0001 && c 0xFF60)}// 计算当前输入的字节export function strlen(str) { l...\,\words\:464,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-51-39.png\,\coverPathBase\:\/assets/2022-05-13-12-51-39\},{\text\:\vue管理系统从0到1-icon组件\,\link\:\/posts/2020/2020-6-12-icon/2020-6-12-icon\,\frontmatter\:{\title\:\vue管理系统从0到1-icon组件\,\tag\:\vue\,\cover\:\/2022-05-13-12-50-42.png\,\base64\:\4f8829\,\date\:\2020-06-12\,\author\:\artiely\,\tinyCover\:\/cover/2022-05-13-12-50-42.png\,\coverWidth\:310,\coverHeight\:550,\coverPrimary\:\0a0921\,\coverSecondary\:\f5f6de\,\dir\:\/posts/2020/2020-6-12-icon\,\summary\:\什么是iconfonticonfont ，图标字体，也叫字体图标，顾名思义，就是字体做的图标。受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 iconfont特色自由的变化大小，且不会模糊比图片小，加载快可以任意改变颜色支持单色和多色好管理维护准备iconfont账号代码创建组件src/packages/icon/Icon.vueexport default { name: Icon...\,\description\:\什么是iconfonticonfont ，图标字体，也叫字体图标，顾名思义，就是字体做的图标。受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 iconfont特色自由的变化大小，且不会模糊比图片小，加载快可以任意改变颜色支持单色和多色好管理维护准备iconfont账号代码创建组件src/packages/icon/Icon.vueexport default { name: Icon...\,\words\:175,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-50-42.png\,\coverPathBase\:\/assets/2022-05-13-12-50-42\},{\text\:\vue管理系统从0到1-vue-cli@4\,\link\:\/posts/2020/2020-6-5-01-vue-cli/2020-6-5-01-vue-cli\,\frontmatter\:{\title\:\vue管理系统从0到1-vue-cli@4\,\tag\:\vue-cli\,\cover\:\/2022-05-13-12-18-43.png\,\base64\:\eef1f5\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-18-43.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\122226\,\coverSecondary\:\edddd9\,\dir\:\/posts/2020/2020-6-5-01-vue-cli\,\summary\:\安装脚手架工具$ npm install -g @vue/cliOR$ yarn global add @vue/cli创建一个项目vue create admin并配置项目。若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。:::tip推荐小公举（小工具）nrm 可以方便的切换镜像源安装npm i nrm -g查看支...\,\description\:\安装脚手架工具$ npm install -g @vue/cliOR$ yarn global add @vue/cli创建一个项目vue create admin并配置项目。若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。:::tip推荐小公举（小工具）nrm 可以方便的切换镜像源安装npm i nrm -g查看支...\,\author\:\tanjie-ola\,\words\:886,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-18-43.png\,\coverPathBase\:\/assets/2022-05-13-12-18-43\},{\text\:\vue管理系统从0到1-项目结构\,\link\:\/posts/2020/2020-6-5-02-vue-dir/2020-6-5-02-vue-dir\,\frontmatter\:{\title\:\vue管理系统从0到1-项目结构\,\tag\:\vue\,\cover\:\/2022-05-13-12-19-40.png\,\base64\:784840,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-19-40.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\191818\,\coverSecondary\:\e6e7e7\,\dir\:\/posts/2020/2020-6-5-02-vue-dir\,\summary\:\一个好的目录结构能让人迅速了解项目的层次和更易维护当前的项目结构├──public│ ├──favicon.i│ └──index.htm├──src│ ├──assets│ │ └──logo.pn│ ├──component│ │ └──HelloWo│ ├──router│ │ └──index.j│ ├──store│ │ └──index.j│ ├──views│ │ ├──About....\,\description\:\一个好的目录结构能让人迅速了解项目的层次和更易维护当前的项目结构├──public│ ├──favicon.i│ └──index.htm├──src│ ├──assets│ │ └──logo.pn│ ├──component│ │ └──HelloWo│ ├──router│ │ └──index.j│ ├──store│ │ └──index.j│ ├──views│ │ ├──About....\,\author\:\tanjie-ola\,\words\:483,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-19-40.png\,\coverPathBase\:\/assets/2022-05-13-12-19-40\},{\text\:\vue管理系统从0到1-vue.config\,\link\:\/posts/2020/2020-6-5-03-vue-config/2020-6-5-03-vue-config\,\frontmatter\:{\title\:\vue管理系统从0到1-vue.config\,\tag\:\vue\,\cover\:\/2022-05-13-12-20-26.png\,\base64\:\ef5559\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-20-26.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\111111\,\coverSecondary\:\eeeeee\,\dir\:\/posts/2020/2020-6-5-03-vue-config\,\summary\:\官网官网文档将变量全局化平时在定义css变量时总是得在每个页面去引用，这也太繁琐了，所以const path require(path)module.exports { // https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader // 不是这个 https://www.npmjs.com/packag...\,\description\:\官网官网文档将变量全局化平时在定义css变量时总是得在每个页面去引用，这也太繁琐了，所以const path require(path)module.exports { // https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader // 不是这个 https://www.npmjs.com/packag...\,\author\:\tanjie-ola\,\words\:271,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-20-26.png\,\coverPathBase\:\/assets/2022-05-13-12-20-26\},{\text\:\vue管理系统从0到1-文件自动导入\,\link\:\/posts/2020/2020-6-5-04-vue.webpack/2020-6-5-04-vue.webpack\,\frontmatter\:{\title\:\vue管理系统从0到1-文件自动导入\,\tag\:\vue\,\cover\:\/2022-05-13-12-27-01.png\,\base64\:\ef5559\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-27-01.png\,\coverWidth\:564,\coverHeight\:1004,\coverPrimary\:\efba14\,\coverSecondary\:\1045eb\,\dir\:\/posts/2020/2020-6-5-04-vue.webpack\,\summary\:\require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块文档require.context函数接受三个参数directory {String...\,\description\:\require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块文档require.context函数接受三个参数directory {String...\,\author\:\tanjie-ola\,\words\:421,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-27-01.png\,\coverPathBase\:\/assets/2022-05-13-12-27-01\},{\text\:\ vue管理系统从0到1-环境与模式\,\link\:\/posts/2020/2020-6-5-05-env-mode/2020-6-5-05-env-mode\,\frontmatter\:{\tag\:\vue\,\cover\:\/2022-05-13-12-47-37.png\,\base64\:\d2d2d2\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-47-37.png\,\coverWidth\:563,\coverHeight\:1002,\coverPrimary\:\2b2828\,\coverSecondary\:\d4d7d7\,\dir\:\/posts/2020/2020-6-5-05-env-mode\,\title\:\ vue管理系统从0到1-环境与模式\,\summary\:\vue管理系统从0到1-环境与模式文档为什么需要模式和环境我们平时在开发的过程中会有很多的环境和模式：比如我们我们npm run dev这就是一个开发环境，npm run build 打包就是一个生产环境。但是这远远是不够的。很多时候我们需要将打包好的资源发布各个环境下，可能每个环境都对应不同的 api 地址和服务器地址。我们不可能每次打包的时候都去手动的更改地址，然后再打包，繁琐倒不说，关键是容...\,\description\:\vue管理系统从0到1-环境与模式文档为什么需要模式和环境我们平时在开发的过程中会有很多的环境和模式：比如我们我们npm run dev这就是一个开发环境，npm run build 打包就是一个生产环境。但是这远远是不够的。很多时候我们需要将打包好的资源发布各个环境下，可能每个环境都对应不同的 api 地址和服务器地址。我们不可能每次打包的时候都去手动的更改地址，然后再打包，繁琐倒不说，关键是容...\,\author\:\tanjie-ola\,\words\:932,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-47-37.png\,\coverPathBase\:\/assets/2022-05-13-12-47-37\},{\text\:\vue管理系统从0到1-本地预览\,\link\:\/posts/2020/2020-6-5-06-local-preview/2020-6-5-06-local-preview\,\frontmatter\:{\title\:\vue管理系统从0到1-本地预览\,\tag\:\vue\,\cover\:\/2022-05-13-12-49-32.png\,\base64\:\63a3dd\,\date\:\2020-06-05\,\tinyCover\:\/cover/2022-05-13-12-49-32.png\,\coverWidth\:564,\coverHeight\:1252,\coverPrimary\:\0a110d\,\coverSecondary\:\f5eef2\,\dir\:\/posts/2020/2020-6-5-06-local-preview\,\summary\:\前一节我们设置了环境和模式，现在我们来实现本地预览，主要是为了本地先测试，有问题提前暴露首先我们在根目录创建一个server.jsconst path require(path)const express require(express)const app express()// var opn require(opn)const localhost require...\,\description\:\前一节我们设置了环境和模式，现在我们来实现本地预览，主要是为了本地先测试，有问题提前暴露首先我们在根目录创建一个server.jsconst path require(path)const express require(express)const app express()// var opn require(opn)const localhost require...\,\author\:\tanjie-ola\,\words\:318,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-49-32.png\,\coverPathBase\:\/assets/2022-05-13-12-49-32\},{\text\:\重新探讨axios的封装\,\link\:\/posts/2020/2020-5-29-axios/2020-5-29-axios\,\frontmatter\:{\title\:\重新探讨axios的封装\,\tag\:\axios\,\cover\:\/2022-05-13-12-17-53.png\,\base64\:\a7d6eb\,\date\:\2020-05-29\,\tinyCover\:\/cover/2022-05-13-12-17-53.png\,\coverWidth\:564,\coverHeight\:1030,\coverPrimary\:\050507\,\coverSecondary\:\fafaf8\,\dir\:\/posts/2020/2020-5-29-axios\,\summary\:\问题，我们为什么要对axios进行封装先看看axios的功能Make XMLHttpRequests from the browserMake http requests from node.jsSupports the Promise APIIntercept request and responseTransform request and response dataCancel reques...\,\description\:\问题，我们为什么要对axios进行封装先看看axios的功能Make XMLHttpRequests from the browserMake http requests from node.jsSupports the Promise APIIntercept request and responseTransform request and response dataCancel reques...\,\author\:\tanjie-ola\,\words\:233,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-17-53.png\,\coverPathBase\:\/assets/2022-05-13-12-17-53\},{\text\:\vue封装ali-oss sdk web直传批量上传等\,\link\:\/posts/2020/2020-5-22-ali-oss/2020-5-22-ali-oss\,\frontmatter\:{\title\:\vue封装ali-oss sdk web直传批量上传等\,\tag\:\vue\,\ali-oss\,\plupload\,\cover\:\/2022-05-13-12-17-19.png\,\date\:\2020-05-22\,\base64\:\efbc00\,\tinyCover\:\/cover/2022-05-13-12-17-19.png\,\coverWidth\:564,\coverHeight\:752,\coverPrimary\:\503b4d\,\coverSecondary\:\afc4b2\,\dir\:\/posts/2020/2020-5-22-ali-oss\,\summary\:\本讲解只包含前端实现和后端实现飞机票如何基于POST Policy的使用规则在服务端通过各种语言代码完成签名对应的官方文档地址图片直传实践获取鉴权export function getToken(currfile, base64) { return new Promise((resolve, reject) > { const type currfile.type.split(/...\,\description\:\本讲解只包含前端实现和后端实现飞机票如何基于POST Policy的使用规则在服务端通过各种语言代码完成签名对应的官方文档地址图片直传实践获取鉴权export function getToken(currfile, base64) { return new Promise((resolve, reject) > { const type currfile.type.split(/...\,\author\:\tanjie-ola\,\words\:820,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-17-19.png\,\coverPathBase\:\/assets/2022-05-13-12-17-19\},{\text\:\vue中如何优雅的清除定时器\,\link\:\/posts/2020/2020-4-29-vue-hook-lifecycle/2020-4-29-vue-hook-lifecycle\,\frontmatter\:{\title\:\vue中如何优雅的清除定时器\,\tag\:\vue\,\cover\:\/2022-05-13-12-15-54.png\,\date\:\2020-04-29\,\base64\:\4ec07b\,\tinyCover\:\/cover/2022-05-13-12-15-54.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\050d1c\,\coverSecondary\:\faf2e3\,\dir\:\/posts/2020/2020-4-29-vue-hook-lifecycle\,\summary\:\首先来看一下我们平时最常见的清除方式export default { data() { return { timer: null, } }, mounted() { this.timer setInterval(() > {}, 1000) }, beforeDestroy() { clearInterval(this.timer) this...\,\description\:\首先来看一下我们平时最常见的清除方式export default { data() { return { timer: null, } }, mounted() { this.timer setInterval(() > {}, 1000) }, beforeDestroy() { clearInterval(this.timer) this...\,\author\:\tanjie-ola\,\words\:269,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-15-54.png\,\coverPathBase\:\/assets/2022-05-13-12-15-54\},{\text\:\plop 模板生成工具\,\link\:\/posts/2020/2020-4-6-plop/2020-4-6-plop\,\frontmatter\:{\title\:\plop 模板生成工具\,\tag\:\plop\,\cover\:\/2022-05-13-12-15-06.png\,\date\:\2020-04-06\,\base64\:\1d2323\,\tinyCover\:\/cover/2022-05-13-12-15-06.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\0d1011\,\coverSecondary\:\f2efee\,\dir\:\/posts/2020/2020-4-6-plop\,\summary\:\官网https://plopjs.com/documentation/#installation安装// 全局安装npm i -g plop// 本地安装npm i --save-dev plop配置// 更目录创建文件 plopfile.js plop将已该文件作为执行入口// 导出执行函数module.exports function (plop) { plop.getGenerato...\,\description\:\官网https://plopjs.com/documentation/#installation安装// 全局安装npm i -g plop// 本地安装npm i --save-dev plop配置// 更目录创建文件 plopfile.js plop将已该文件作为执行入口// 导出执行函数module.exports function (plop) { plop.getGenerato...\,\author\:\tanjie-ola\,\words\:664,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-13-12-15-06.png\,\coverPathBase\:\/assets/2022-05-13-12-15-06\},{\text\:\深切哀悼\,\link\:\/posts/2020/2020-4-4-yiqin/2020-4-4-yiqin\,\frontmatter\:{\title\:\深切哀悼\,\tag\:\2019-nCoV\,\css\,\cover\:\/2022-05-13-12-14-33.png\,\date\:\2020-04-03\,\base64\:0,\tinyCover\:\/cover/2022-05-13-12-14-33.png\,\coverWidth\:370,\coverHeight\:658,\coverPrimary\:\131212\,\coverSecondary\:\eceded\,\dir\:\/posts/2020/2020-4-4-yiqin\,\summary\:\国务院今日公告，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。如何让我们的网站符合当前的气氛html { filter: grayscale(100%); -webkit-filt...\,\description\:\国务院今日公告，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。如何让我们的网站符合当前的气氛html { filter: grayscale(100%); -webkit-filt...\,\author\:\tanjie-ola\,\words\:416,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-14-33.png\,\coverPathBase\:\/assets/2022-05-13-12-14-33\},{\text\:\cmder的安装和运行\,\link\:\/posts/2020/2020-4-2-cmder/2020-4-2-cmder\,\frontmatter\:{\tag\:\cmder\,\cover\:\/2022-05-13-12-13-15.png\,\date\:\2020-04-02\,\base64\:\ffffff\,\title\:\cmder的安装和运行\,\tinyCover\:\/cover/2022-05-13-12-13-15.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\3c2e69\,\coverSecondary\:\c3d196\,\dir\:\/posts/2020/2020-4-2-cmder\,\summary\:\官网下载地址下载解压后可直接运行加入环境变量加入右键快捷环境变量添加后，在任意文件夹中即可打开Cmder，上一步的把 Cmder 加到环境变量就是为此服务的, 在管理员权限的cmd下输入以下语句即可:Cmder.exe /REGISTER ALL...\,\description\:\官网下载地址下载解压后可直接运行加入环境变量加入右键快捷环境变量添加后，在任意文件夹中即可打开Cmder，上一步的把 Cmder 加到环境变量就是为此服务的, 在管理员权限的cmd下输入以下语句即可:Cmder.exe /REGISTER ALL...\,\author\:\tanjie-ola\,\words\:97,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-13-15.png\,\coverPathBase\:\/assets/2022-05-13-12-13-15\},{\text\:\ plupload中文文档整理\,\link\:\/posts/2020/2020-4-1-plupload/2020-4-1-plupload\,\frontmatter\:{\tag\:\plupload\,\cover\:\/2022-05-13-12-12-47.png\,\date\:\2020-04-01\,\base64\:\03a6e1\,\tinyCover\:\/cover/2022-05-13-12-12-47.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\a23d34\,\coverSecondary\:\5dc2cb\,\dir\:\/posts/2020/2020-4-1-plupload\,\title\:\ plupload中文文档整理\,\summary\:\plupload中文文档整理 项目中用到改上传插件，因此抽了一晚上事件把列子和文档看了一下，翻译过来，如有错误的翻译请帮助我一起纠正谢谢。介绍：Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。特性：注释：1、gears：http...\,\description\:\plupload中文文档整理 项目中用到改上传插件，因此抽了一晚上事件把列子和文档看了一下，翻译过来，如有错误的翻译请帮助我一起纠正谢谢。介绍：Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。特性：注释：1、gears：http...\,\author\:\tanjie-ola\,\words\:1286,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-13-12-12-47.png\,\coverPathBase\:\/assets/2022-05-13-12-12-47\},{\text\:\纪念司徒正美君\,\link\:\/posts/2020/2020-3-31-shituzhengmei/2020-3-31-shituzhengmei\,\frontmatter\:{\title\:\纪念司徒正美君\,\tag\:\javaScript\,\cover\:\/2022-05-13-12-11-54.png\,\date\:\2020-03-31\,\base64\:\ffffff\,\tinyCover\:\/cover/2022-05-13-12-11-54.png\,\coverWidth\:549,\coverHeight\:550,\coverPrimary\:\5f8f85\,\coverSecondary\:\a0707a\,\dir\:\/posts/2020/2020-3-31-shituzhengmei\,\summary\:\听闻司徒君离世的消息，悲痛万分！一颗前端巨星就此陨落。看着他的灰色头像不会再跳动，是什么 坠落 升空。在此借以犬夜叉的图片纪念司徒正美君呜呼哀哉!无名的生命之花 已惨遭摧残践踏一度坠地的飞鸟 正焦急以待风起一味埋头祈祷 却不会有任何改变若想有所改变 就请起而奋战吧踏过尸体前行的我们嘲笑这进击意志的猪猡啊家畜般的安宁 那虚伪的繁荣请赐予誓死之饿狼以自由！……——进击的巨人OP《红莲の弓矢》（转自司徒...\,\description\:\听闻司徒君离世的消息，悲痛万分！一颗前端巨星就此陨落。看着他的灰色头像不会再跳动，是什么 坠落 升空。在此借以犬夜叉的图片纪念司徒正美君呜呼哀哉!无名的生命之花 已惨遭摧残践踏一度坠地的飞鸟 正焦急以待风起一味埋头祈祷 却不会有任何改变若想有所改变 就请起而奋战吧踏过尸体前行的我们嘲笑这进击意志的猪猡啊家畜般的安宁 那虚伪的繁荣请赐予誓死之饿狼以自由！……——进击的巨人OP《红莲の弓矢》（转自司徒...\,\author\:\tanjie-ola\,\words\:188,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-11-54.png\,\coverPathBase\:\/assets/2022-05-13-12-11-54\},{\text\:\vuepress插件推荐\,\link\:\/posts/2020/2020-3-29-vuepress-plugin/2020-3-29-vuepress-plugin\,\frontmatter\:{\title\:\vuepress插件推荐\,\tag\:\vuepress\,\cover\:\/2022-05-13-12-10-40.png\,\hot\:true,\date\:\2020-03-29\,\base64\:\8341d2\,\tinyCover\:\/cover/2022-05-13-12-10-40.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\bfb0a6\,\coverSecondary\:\404f59\,\dir\:\/posts/2020/2020-3-29-vuepress-plugin\,\summary\:\个人插件推荐欢迎服用 star本文插件地址github地址vuepress-plugin-auto-front-matter该插件的作用平时我们在使用vuepree博客的时候会书写yaml格式的文章基本信息 如：title: 如何实现一个vuepress插件 author:Artiely tag: javaScript vuepressdate: 2020-3-29location: wuha...\,\description\:\个人插件推荐欢迎服用 star本文插件地址github地址vuepress-plugin-auto-front-matter该插件的作用平时我们在使用vuepree博客的时候会书写yaml格式的文章基本信息 如：title: 如何实现一个vuepress插件 author:Artiely tag: javaScript vuepressdate: 2020-3-29location: wuha...\,\author\:\tanjie-ola\,\words\:396,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-10-40.png\,\coverPathBase\:\/assets/2022-05-13-12-10-40\},{\text\:\vue中后台管理平台\,\link\:\/posts/2020/2020-3-20-antd-vue-pro/2020-3-20-antd-vue-pro\,\frontmatter\:{\title\:\vue中后台管理平台\,\tag\:\vue\,\author\:\Artiely\,\date\:\2020-03-20\,\cover\:\/2022-05-13-12-09-12.png\,\hot\:true,\base64\:\ffffff\,\tinyCover\:\/cover/2022-05-13-12-09-12.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\c4c8cd\,\coverSecondary\:\3b3732\,\dir\:\/posts/2020/2020-3-20-antd-vue-pro\,\summary\:\介绍 这是本人开源的一个基于vue和ant-design-vue的中后台管理平台，里面有一些技巧和思路希望能给你们带来灵感和帮助，可供学习和参考。 此项目从2019五月开源，期间间歇性更新，每有好的思路和想法都会慢慢地收集进来。可以持续关注。 github地址：https://github.com/artiely/vue-admin效果预览预览地址快速构建更新依赖npm i启动本地开发环境npm ...\,\description\:\介绍 这是本人开源的一个基于vue和ant-design-vue的中后台管理平台，里面有一些技巧和思路希望能给你们带来灵感和帮助，可供学习和参考。 此项目从2019五月开源，期间间歇性更新，每有好的思路和想法都会慢慢地收集进来。可以持续关注。 github地址：https://github.com/artiely/vue-admin效果预览预览地址快速构建更新依赖npm i启动本地开发环境npm ...\,\words\:722,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-13-12-09-12.png\,\coverPathBase\:\/assets/2022-05-13-12-09-12\},{\text\:\JavaScript 复习系列 之 JavaScript是如何工作的\,\link\:\/posts/2020/2020-3-20-js-how-to-work/2020-3-20-js-how-to-work\,\frontmatter\:{\title\:\JavaScript 复习系列 之 JavaScript是如何工作的\,\tag\:\javaScript\,\author\:\Artiley\,\cover\:\/2022-05-13-12-10-03.png\,\date\:\2020-03-20\,\hot\:true,\base64\:\f0db4f\,\tinyCover\:\/cover/2022-05-13-12-10-03.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\c4ccbc\,\coverSecondary\:\3b3343\,\dir\:\/posts/2020/2020-3-20-js-how-to-work\,\summary\:\2020年注定是个特殊的年份，随着新年的到来，新型冠状病毒也加快了蔓延的脚步。时至今日我们依然在家闭关。既然是闭关，那我也得修炼点什么啊。他来了！JavaScript！或简写js 其实本来想做出个什么高大上的产品出来的，计划是做一个桌面应用程序，大致包含博客的书写和自动发布，后面越想越不着边际不知从何下手。于是 决定重温一遍JavaScript。有夯实的基础就不怕铸造琼楼玉宇。在学习JavaS...\,\description\:\2020年注定是个特殊的年份，随着新年的到来，新型冠状病毒也加快了蔓延的脚步。时至今日我们依然在家闭关。既然是闭关，那我也得修炼点什么啊。他来了！JavaScript！或简写js 其实本来想做出个什么高大上的产品出来的，计划是做一个桌面应用程序，大致包含博客的书写和自动发布，后面越想越不着边际不知从何下手。于是 决定重温一遍JavaScript。有夯实的基础就不怕铸造琼楼玉宇。在学习JavaS...\,\words\:8149,\readTime\:\41 min read\},\coverPath\:\/assets/2022-05-13-12-10-03.png\,\coverPathBase\:\/assets/2022-05-13-12-10-03\},{\text\:\timer.js 介绍\,\link\:\/posts/2020/2020-3-19-timer.js/2020-3-19-timer.js\,\frontmatter\:{\title\:\timer.js 介绍\,\date\:\2020-03-19\,\cover\:\/2022-05-13-12-08-39.png\,\tag\:\timer.js\,\author\:\Artiely\,\base64\:\00040e\,\tinyCover\:\/cover/2022-05-13-12-08-39.png\,\coverWidth\:564,\coverHeight\:564,\coverPrimary\:\657674\,\coverSecondary\:\9a898b\,\dir\:\/posts/2020/2020-3-19-timer.js\,\summary\:\Timer.js 是一个简单而轻量的定时器管理库，并且无依赖。安装npm install timer.js使用示例制作披萨的倒计时import Timer from timer.jsconst pizzaTimer new Timer()const pizzaCookingTime 15 * 60 // 15 minutespizzaTimer.start(pizzaCookingTi...\,\description\:\Timer.js 是一个简单而轻量的定时器管理库，并且无依赖。安装npm install timer.js使用示例制作披萨的倒计时import Timer from timer.jsconst pizzaTimer new Timer()const pizzaCookingTime 15 * 60 // 15 minutespizzaTimer.start(pizzaCookingTi...\,\words\:260,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-13-12-08-39.png\,\coverPathBase\:\/assets/2022-05-13-12-08-39\},{\text\:\Electron 镜像下载慢的解决办法\,\link\:\/posts/2020/2020-3-18-electron-mirror-down/2020-3-18-electron-mirror-down\,\frontmatter\:{\title\:\Electron 镜像下载慢的解决办法\,\tag\:\electron\,\author\:\Artiely\,\date\:\2020-03-18\,\cover\:\/2022-05-13-12-07-10.png\,\base64\:\2e7bd7\,\tinyCover\:\/cover/2022-05-13-12-07-10.png\,\coverWidth\:564,\coverHeight\:705,\coverPrimary\:\d8bfa3\,\coverSecondary\:\27405c\,\dir\:\/posts/2020/2020-3-18-electron-mirror-down\,\summary\:\因为 Electron 的源在国外，如果我们直接使用 npm 进行安装，由于众所周知的原因，如果你没有一个好的梯子，通常下载速度只有几 k 到十几 k的速度。如图：运气非常好时，可能能跑到100多k。而这个包有差不多 50MB，可想而知，如果是以几k的龟速，不知道要下载到猴年马月。将npm包下载地址改为淘宝地址全局设置下载源npm config set registry https://npm.t...\,\description\:\因为 Electron 的源在国外，如果我们直接使用 npm 进行安装，由于众所周知的原因，如果你没有一个好的梯子，通常下载速度只有几 k 到十几 k的速度。如图：运气非常好时，可能能跑到100多k。而这个包有差不多 50MB，可想而知，如果是以几k的龟速，不知道要下载到猴年马月。将npm包下载地址改为淘宝地址全局设置下载源npm config set registry https://npm.t...\,\words\:187,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-07-10.png\,\coverPathBase\:\/assets/2022-05-13-12-07-10\},{\text\:\Electron 自动更新\,\link\:\/posts/2020/2020-3-18-electron-updater/2020-3-18-electron-updater\,\frontmatter\:{\title\:\Electron 自动更新\,\tag\:\electron\,\vue\,\date\:\2020-03-18\,\cover\:\/2022-05-13-12-08-06.png\,\author\:\Artiely\,\base64\:\127a53\,\tinyCover\:\/cover/2022-05-13-12-08-06.png\,\coverWidth\:563,\coverHeight\:769,\coverPrimary\:\d1cdc1\,\coverSecondary\:\2e323e\,\dir\:\/posts/2020/2020-3-18-electron-updater\,\summary\:\从0实现一个electron自动更新的最小demo本实例基于vue，不使用vue也大同小异，目的只是在后期更加的方便使用组件库，有差异的地方我会指出。初始化一个vue项目初始化项目，前面的vue脚手架环境安装忽略vue create electron-updater-demo中间的流程略cd electron-updater-demonpm i安装 electron-builder 插件vue a...\,\description\:\从0实现一个electron自动更新的最小demo本实例基于vue，不使用vue也大同小异，目的只是在后期更加的方便使用组件库，有差异的地方我会指出。初始化一个vue项目初始化项目，前面的vue脚手架环境安装忽略vue create electron-updater-demo中间的流程略cd electron-updater-demonpm i安装 electron-builder 插件vue a...\,\words\:922,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-13-12-08-06.png\,\coverPathBase\:\/assets/2022-05-13-12-08-06\},{\text\:\让你的chrome如虎添翼\,\link\:\/posts/2020/2020-3-16-chrome-plugin/2020-3-16-chrome-plugin\,\frontmatter\:{\title\:\让你的chrome如虎添翼\,\tag\:\chrome\,\author\:\Artiely\,\cover\:\/2022-05-13-12-05-35.png\,\date\:\2020-03-16\,\base64\:\3488fd\,\tinyCover\:\/cover/2022-05-13-12-05-35.png\,\coverWidth\:564,\coverHeight\:798,\coverPrimary\:\2a0e3a\,\coverSecondary\:\d5f1c5\,\dir\:\/posts/2020/2020-3-16-chrome-plugin\,\summary\:\谷歌访问助手大多数情况下我们是无法访问谷歌的，所以我们先下载一个谷歌访问助手帮助我们访问谷歌应用商店，这是一个破解版。正版也是可以免费使用的，但是他会修改你的主页并且强制绑定。所以有点脾气的都忍不了。如图我们下载下来可以直接点击就安装了。如果安装失败，将下载包复制到一个指定的文件夹，重命名并解压。你也可以放在默认路径下，下图是如何查看路径解压后可以删除压缩包现在就可以访问谷歌商店了，当然你也可以使...\,\description\:\谷歌访问助手大多数情况下我们是无法访问谷歌的，所以我们先下载一个谷歌访问助手帮助我们访问谷歌应用商店，这是一个破解版。正版也是可以免费使用的，但是他会修改你的主页并且强制绑定。所以有点脾气的都忍不了。如图我们下载下来可以直接点击就安装了。如果安装失败，将下载包复制到一个指定的文件夹，重命名并解压。你也可以放在默认路径下，下图是如何查看路径解压后可以删除压缩包现在就可以访问谷歌商店了，当然你也可以使...\,\words\:568,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-13-12-05-35.png\,\coverPathBase\:\/assets/2022-05-13-12-05-35\},{\text\:\ 如何使你的vscode更好用\,\link\:\/posts/2020/2020-3-16-vscode-plugin/2020-3-16-vscode-plugin\,\frontmatter\:{\tag\:\vscode\,\author\:\Artiely\,\cover\:\/2022-05-13-12-06-13.png\,\date\:\2020-03-16\,\base64\:\7cbde7\,\tinyCover\:\/cover/2022-05-13-12-06-13.png\,\coverWidth\:563,\coverHeight\:1000,\coverPrimary\:\361c3b\,\coverSecondary\:\c9e3c4\,\dir\:\/posts/2020/2020-3-16-vscode-plugin\,\title\:\ 如何使你的vscode更好用\,\summary\:\如何使你的vscode更好用VS Code 写代码是真好用、真爽、真香！想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中，VS Code 也是以压倒性的优势获胜第一，其他的编辑器只能被无情碾压在地上摩擦……但是呢，VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的，需要额外安装一些插件、掌握一些快捷键和技巧，才能顺手的用起来。我花了一点时间，为你整理了可...\,\description\:\如何使你的vscode更好用VS Code 写代码是真好用、真爽、真香！想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中，VS Code 也是以压倒性的优势获胜第一，其他的编辑器只能被无情碾压在地上摩擦……但是呢，VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的，需要额外安装一些插件、掌握一些快捷键和技巧，才能顺手的用起来。我花了一点时间，为你整理了可...\,\words\:751,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-13-12-06-13.png\,\coverPathBase\:\/assets/2022-05-13-12-06-13\},{\text\:\windows 好用的软件推荐\,\link\:\/posts/2020/2020-3-16-windows-plugin/2020-3-16-windows-plugin\,\frontmatter\:{\title\:\windows 好用的软件推荐\,\tag\:\windows\,\cover\:\/2022-05-13-12-06-40.png\,\date\:\2020-03-16\,\base64\:\3260d0\,\tinyCover\:\/cover/2022-05-13-12-06-40.png\,\coverWidth\:736,\coverHeight\:981,\coverPrimary\:\494e38\,\coverSecondary\:\b6b1c7\,\dir\:\/posts/2020/2020-3-16-windows-plugin\,\summary\:\wox应用管理新体验。ctrl+space(空格)官网picgo图片管理新体验官网typoramarkdown书写新体验官网并且typora可以和picgo配合使用，让md的图片更好的管理。待续....\,\description\:\wox应用管理新体验。ctrl+space(空格)官网picgo图片管理新体验官网typoramarkdown书写新体验官网并且typora可以和picgo配合使用，让md的图片更好的管理。待续....\,\author\:\tanjie-ola\,\words\:67,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-13-12-06-40.png\,\coverPathBase\:\/assets/2022-05-13-12-06-40\},{\text\:\nodejs核心api\,\link\:\/posts/2019/2019-11-16-nodejs-api\,\frontmatter\:{\title\:\nodejs核心api\,\tag\:\nodejs\,\author\:\Artiely\,\date\:\2019-11-16\,\cover\:\/2022-05-14-22-06-30.png\,\base64\:\fee200\,\tinyCover\:\/cover/2022-05-14-22-06-30.png\,\coverWidth\:564,\coverHeight\:564,\coverPrimary\:\c5bdb3\,\coverSecondary\:\3a424c\,\dir\:\/posts/2019\,\summary\:\nodejs核心api目标理解nodejs常用核心api加深对nodejs设计思想的理解核心apiBuffer在引入 TypedArray 之前，JavaScript 语言没有用于读取或操作二进制数据流的机制。 Buffer 类是作为 Node.js API 的一部分引入的，用于在 TCP 流、文件系统操作、以及其他上下文中与八位字节流进行交互。现在可以使用 TypedArray， Buffer ...\,\description\:\nodejs核心api目标理解nodejs常用核心api加深对nodejs设计思想的理解核心apiBuffer在引入 TypedArray 之前，JavaScript 语言没有用于读取或操作二进制数据流的机制。 Buffer 类是作为 Node.js API 的一部分引入的，用于在 TCP 流、文件系统操作、以及其他上下文中与八位字节流进行交互。现在可以使用 TypedArray， Buffer ...\,\words\:8701,\readTime\:\44 min read\},\coverPath\:\/assets/2022-05-14-22-06-30.png\,\coverPathBase\:\/assets/2022-05-14-22-06-30\},{\text\:\Nodejs通用业务模块\,\link\:\/posts/2019/2019-10-27-node-pm2\,\frontmatter\:{\title\:\Nodejs通用业务模块\,\tag\:\nodejs\,\daemon\,\shell\,\pm2\,\forever\,\egg\,\npm link\,\author\:\Artiely\,\date\:\2019-10-27\,\cover\:\/2022-05-14-22-06-07.png\,\base64\:\2c3033\,\tinyCover\:\/cover/2022-05-14-22-06-07.png\,\coverWidth\:640,\coverHeight\:1136,\coverPrimary\:\343d45\,\coverSecondary\:\cbc2ba\,\dir\:\/posts/2019\,\summary\:\Nodejs进程守护目标理解什么是进程守护理解为什么nodejs服务需要进程守护从源码理解Egg对进程守护的处理进程守护守护进程，也即通常所说的 Daemon 进程，是 Linux 下一种特殊的后台服务进程，它独立于控制终端并且周期性的执行某种任务或者等待处理某些发生的事件。守护进程通常在系统引导时启动，在系统关闭时终止。Linux 系统下大多数服务都是通过守护进程实现的。守护进程的名称通常以 d...\,\description\:\Nodejs进程守护目标理解什么是进程守护理解为什么nodejs服务需要进程守护从源码理解Egg对进程守护的处理进程守护守护进程，也即通常所说的 Daemon 进程，是 Linux 下一种特殊的后台服务进程，它独立于控制终端并且周期性的执行某种任务或者等待处理某些发生的事件。守护进程通常在系统引导时启动，在系统关闭时终止。Linux 系统下大多数服务都是通过守护进程实现的。守护进程的名称通常以 d...\,\words\:3051,\readTime\:\16 min read\},\coverPath\:\/assets/2022-05-14-22-06-07.png\,\coverPathBase\:\/assets/2022-05-14-22-06-07\},{\text\:\Nodejs通用业务模块\,\link\:\/posts/2019/2019-10-3-alinode\,\frontmatter\:{\title\:\Nodejs通用业务模块\,\tag\:\nodejs\,\alinode\,\author\:\Artiely\,\date\:\2019-10-03\,\cover\:\/2022-05-14-22-05-45.png\,\base64\:\9ae3a9\,\tinyCover\:\/cover/2022-05-14-22-05-45.png\,\coverWidth\:736,\coverHeight\:1308,\coverPrimary\:\070707\,\coverSecondary\:\f8f8f8\,\dir\:\/posts/2019\,\summary\:\Nodejs通用业务模块目标了解nodejs的生态与未来理解alinode监控体系的应用场景与使用理解nodejs在云原生应用领域的生态与发展why知己知彼，百战不殆开阔技术视野，技术的提升不能仅仅停留在crud领域nodejs之生态2019年前端，选择Nodejs 还是 PHP？观点：作为前端玩一玩可以学nodejs，真正的后端还是选择php未来语言不重要，nodejs必有一席之地https:/...\,\description\:\Nodejs通用业务模块目标了解nodejs的生态与未来理解alinode监控体系的应用场景与使用理解nodejs在云原生应用领域的生态与发展why知己知彼，百战不殆开阔技术视野，技术的提升不能仅仅停留在crud领域nodejs之生态2019年前端，选择Nodejs 还是 PHP？观点：作为前端玩一玩可以学nodejs，真正的后端还是选择php未来语言不重要，nodejs必有一席之地https:/...\,\words\:1833,\readTime\:\10 min read\},\coverPath\:\/assets/2022-05-14-22-05-45.png\,\coverPathBase\:\/assets/2022-05-14-22-05-45\},{\text\:\NoSQL数据库\,\link\:\/posts/2019/2019-8-14-nosql\,\frontmatter\:{\title\:\NoSQL数据库\,\tag\:\redis\,\memcached\,\mongoDb\,\author\:\Artiely\,\date\:\2019-08-14\,\cover\:\/2022-05-14-22-05-01.png\,\base64\:\323d47\,\tinyCover\:\/cover/2022-05-14-22-05-01.png\,\coverWidth\:564,\coverHeight\:752,\coverPrimary\:\4f7774\,\coverSecondary\:\b0888b\,\dir\:\/posts/2019\,\summary\:\NoSQL数据库介绍主要内容Redis开发与实战**(内存型)Memcached入门**(内存型)MongoDb入门(存储型)redis和memcached是同一类型，内存型。MongoDb是存储型。着重讲解redis,存储性数据库还是mysql的天下。学习目标掌握非关系性数据库的特点以及使用掌握NoSQL 技术在实际开发中的应用NoSQL主要应用场景专门应对高并发，需要高速读写的场景，而就Red...\,\description\:\NoSQL数据库介绍主要内容Redis开发与实战**(内存型)Memcached入门**(内存型)MongoDb入门(存储型)redis和memcached是同一类型，内存型。MongoDb是存储型。着重讲解redis,存储性数据库还是mysql的天下。学习目标掌握非关系性数据库的特点以及使用掌握NoSQL 技术在实际开发中的应用NoSQL主要应用场景专门应对高并发，需要高速读写的场景，而就Red...\,\words\:18684,\readTime\:\94 min read\},\coverPath\:\/assets/2022-05-14-22-05-01.png\,\coverPathBase\:\/assets/2022-05-14-22-05-01\},{\text\:\ 自动化测试\,\link\:\/posts/2019/2019-7-13-automated-testing\,\frontmatter\:{\tag\:\mocha\,\jest\,\AVA\,\karma\,\nightmare\,\author\:\Artiely\,\date\:\2019-07-13\,\cover\:\/2022-05-14-22-04-40.png\,\base64\:\00a1d8\,\tinyCover\:\/cover/2022-05-14-22-04-40.png\,\coverWidth\:564,\coverHeight\:960,\coverPrimary\:\3b3938\,\coverSecondary\:\c4c6c7\,\dir\:\/posts/2019\,\title\:\ 自动化测试\,\summary\:\自动化测试介绍在前端界，浏览器兼容性是让工程师们头疼的问题，对于经验丰富的人来说，很清楚浏览器有哪些坑，但是对于大部分程序员，最可怕的是代码明明在这个浏览器运行得很好，但是到了另一个浏览器中就不能正常运行了。对于这部分的程序员，保障代码能正常运行的方法便是能尽早发现问题，然后将其解决。为什么需要自动化测试？项目经过不断的开发，最终肯定会趋于稳定，在适当的时机下引入自动化测试能及早发现问题，保证产品...\,\description\:\自动化测试介绍在前端界，浏览器兼容性是让工程师们头疼的问题，对于经验丰富的人来说，很清楚浏览器有哪些坑，但是对于大部分程序员，最可怕的是代码明明在这个浏览器运行得很好，但是到了另一个浏览器中就不能正常运行了。对于这部分的程序员，保障代码能正常运行的方法便是能尽早发现问题，然后将其解决。为什么需要自动化测试？项目经过不断的开发，最终肯定会趋于稳定，在适当的时机下引入自动化测试能及早发现问题，保证产品...\,\words\:5654,\readTime\:\29 min read\},\coverPath\:\/assets/2022-05-14-22-04-40.png\,\coverPathBase\:\/assets/2022-05-14-22-04-40\},{\text\:\android studio flutter 之快捷键\,\link\:\/posts/2019/2019-7-6-android-studio-flutter-shortcut\,\frontmatter\:{\title\:\android studio flutter 之快捷键\,\tag\:\dart\,\flutter\,\android studio\,\author\:\Artiely\,\date\:\2019-07-06\,\cover\:\/2022-05-14-22-03-53.png\,\base64\:\135bd0\,\tinyCover\:\/cover/2022-05-14-22-03-53.png\,\coverWidth\:563,\coverHeight\:797,\coverPrimary\:\c6c6c7\,\coverSecondary\:\393938\,\dir\:\/posts/2019\,\summary\:\android studio flutter 之快捷键创建新的StatelessWidget或者StatefulWidget我们不必手动去编写继承StatelessWidget或者StatefulWidget并重写build()方法。IDE已经提供了相应的快捷键。只需要输出stless就可以创建一个StatelessWidget。或者输入stful创建一个StatefulWidget。如果一开始我...\,\description\:\android studio flutter 之快捷键创建新的StatelessWidget或者StatefulWidget我们不必手动去编写继承StatelessWidget或者StatefulWidget并重写build()方法。IDE已经提供了相应的快捷键。只需要输出stless就可以创建一个StatelessWidget。或者输入stful创建一个StatefulWidget。如果一开始我...\,\words\:1224,\readTime\:\7 min read\},\coverPath\:\/assets/2022-05-14-22-03-53.png\,\coverPathBase\:\/assets/2022-05-14-22-03-53\},{\text\:\Dart,flutter相关环境\,\link\:\/posts/2019/2019-7-6-dart-flutter-conf\,\frontmatter\:{\title\:\Dart,flutter相关环境\,\tag\:\dart\,\flutter\,\author\:\Artiely\,\date\:\2019-07-06\,\cover\:\/2022-05-14-22-04-15.png\,\base64\:\0271e2\,\tinyCover\:\/cover/2022-05-14-22-04-15.png\,\coverWidth\:563,\coverHeight\:797,\coverPrimary\:\372720\,\coverSecondary\:\c8d8df\,\dir\:\/posts/2019\,\summary\:\Dart介绍：Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。Dart诞生于2011年，号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。要学Flutter的话我们必须首先得会Dart。官网：https://dart.dev/Dart环境搭建：要在我们本地开发Dart程序的话首先需要安装Dar...\,\description\:\Dart介绍：Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。Dart诞生于2011年，号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。要学Flutter的话我们必须首先得会Dart。官网：https://dart.dev/Dart环境搭建：要在我们本地开发Dart程序的话首先需要安装Dar...\,\words\:979,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-22-04-15.png\,\coverPathBase\:\/assets/2022-05-14-22-04-15\},{\text\:\ 项目质量监测\,\link\:\/posts/2019/2019-6-27-eslint-test\,\frontmatter\:{\tag\:\eslint\,\e2e\,\codecov\,\author\:\Artiely\,\date\:\2019-06-27\,\cover\:\/2022-05-14-22-03-31.png\,\base64\:\0e01c9\,\tinyCover\:\/cover/2022-05-14-22-03-31.png\,\coverWidth\:736,\coverHeight\:1310,\coverPrimary\:\05395a\,\coverSecondary\:\fac6a5\,\dir\:\/posts/2019\,\title\:\ 项目质量监测\,\summary\:\项目质量监测介绍没有规矩不成方圆，所以我们写代码也要有\\\规矩\\\，但是我们通常记不住所有的\\\规矩\\\，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。通常来说，项目的质量决定了：软件项目的命运软件项目的可维护性软件项目的运维成本软件项目的扩展性为什么要进行代码质量检查？代码检查很重要，原因有三：避免低级bug：...\,\description\:\项目质量监测介绍没有规矩不成方圆，所以我们写代码也要有\\\规矩\\\，但是我们通常记不住所有的\\\规矩\\\，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。通常来说，项目的质量决定了：软件项目的命运软件项目的可维护性软件项目的运维成本软件项目的扩展性为什么要进行代码质量检查？代码检查很重要，原因有三：避免低级bug：...\,\words\:5659,\readTime\:\29 min read\},\coverPath\:\/assets/2022-05-14-22-03-31.png\,\coverPathBase\:\/assets/2022-05-14-22-03-31\},{\text\:\前端性能优化\,\link\:\/posts/2019/2019-6-19-fontend-performance-optimization\,\frontmatter\:{\title\:\前端性能优化\,\tag\:\SEO\,\http\,\CDN\,\author\:\Artiely\,\date\:\2019-06-19\,\cover\:\/2022-05-14-22-03-09.png\,\base64\:\1d212c\,\tinyCover\:\/cover/2022-05-14-22-03-09.png\,\coverWidth\:564,\coverHeight\:838,\coverPrimary\:\2e2a31\,\coverSecondary\:\d1d5ce\,\dir\:\/posts/2019\,\summary\:\前端性能优化介绍任何小型企业，博主或成长型公司在网上出现时面临的最大挑战之一就是“页面加载时间”问题。除非您能确保尽可能快速无缝地加载每个页面，您才可以拥有世界上最好最引人注目的网站，否则您仍然无法赢得关注者的尊重和忠诚度。根据当今网络上的所有主要浏览器公司的说法，如果每个网站都想要排名靠前，表现良好并确保客户满意，那么每个网站都需要快。毕竟，如果您的网页加载速度很慢，那么您会立即增加客户开始在其...\,\description\:\前端性能优化介绍任何小型企业，博主或成长型公司在网上出现时面临的最大挑战之一就是“页面加载时间”问题。除非您能确保尽可能快速无缝地加载每个页面，您才可以拥有世界上最好最引人注目的网站，否则您仍然无法赢得关注者的尊重和忠诚度。根据当今网络上的所有主要浏览器公司的说法，如果每个网站都想要排名靠前，表现良好并确保客户满意，那么每个网站都需要快。毕竟，如果您的网页加载速度很慢，那么您会立即增加客户开始在其...\,\words\:19728,\readTime\:\99 min read\},\coverPath\:\/assets/2022-05-14-22-03-09.png\,\coverPathBase\:\/assets/2022-05-14-22-03-09\},{\text\:\持续集成与持续部署\,\link\:\/posts/2019/2019-6-12-deploy\,\frontmatter\:{\title\:\持续集成与持续部署\,\tag\:\circleCI\,\jenkins\,\travisCI\,\author\:\Artiely\,\date\:\2019-06-12\,\cover\:\/2022-05-14-22-02-45.png\,\base64\:\f8f8f8\,\tinyCover\:\/cover/2022-05-14-22-02-45.png\,\coverWidth\:736,\coverHeight\:933,\coverPrimary\:\d3c6c2\,\coverSecondary\:\2c393d\,\dir\:\/posts/2019\,\summary\:\持续集成与持续部署介绍那些大厂们，天天DevOps、持续集成的？到底在讲些什么？给你揭开持续集成与持续部署的面纱！！没有什么难的，盘它！传统的开发过程中的坑：BUG总是在最后才发现越到项目后期，加班越严重交付无法保障变更频繁导致效率低下无效的等待多，用户满足度低img你有没有想过/用过？当你哪一天...不用为开发/测试环境不一致而苦恼不用麻烦运维人员帮忙调试环境不用手动进行测试，模拟环境中进行自测...\,\description\:\持续集成与持续部署介绍那些大厂们，天天DevOps、持续集成的？到底在讲些什么？给你揭开持续集成与持续部署的面纱！！没有什么难的，盘它！传统的开发过程中的坑：BUG总是在最后才发现越到项目后期，加班越严重交付无法保障变更频繁导致效率低下无效的等待多，用户满足度低img你有没有想过/用过？当你哪一天...不用为开发/测试环境不一致而苦恼不用麻烦运维人员帮忙调试环境不用手动进行测试，模拟环境中进行自测...\,\words\:12227,\readTime\:\62 min read\},\coverPath\:\/assets/2022-05-14-22-02-45.png\,\coverPathBase\:\/assets/2022-05-14-22-02-45\},{\text\:\css实现左边固定宽右边自适应\,\link\:\/posts/2019/2019-6-6-css-fixedleft-autoright\,\frontmatter\:{\title\:\css实现左边固定宽右边自适应\,\tag\:\css\,\author\:\Artiely\,\date\:\2019-06-06\,\cover\:\/2022-05-14-22-02-04.png\,\base64\:\76c9e8\,\tinyCover\:\/cover/2022-05-14-22-02-04.png\,\coverWidth\:736,\coverHeight\:1308,\coverPrimary\:\0e141d\,\coverSecondary\:\f1ebe2\,\dir\:\/posts/2019\,\summary\:\show turnsshow you the code Document .wrapper { background: #eee; } .left { background: red; width: 100px; } .right { background: yellow; }...\,\description\:\show turnsshow you the code Document .wrapper { background: #eee; } .left { background: red; width: 100px; } .right { background: yellow; }...\,\words\:341,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-22-02-04.png\,\coverPathBase\:\/assets/2022-05-14-22-02-04\},{\text\:\vue observable api 初应用\,\link\:\/posts/2019/2019-6-6-vue-observable\,\frontmatter\:{\title\:\vue observable api 初应用\,\tag\:\vue\,\observable\,\author\:\Artiely\,\date\:\2019-06-06\,\cover\:\/2022-05-14-22-02-24.png\,\base64\:404040,\tinyCover\:\/cover/2022-05-14-22-02-24.png\,\coverWidth\:735,\coverHeight\:1040,\coverPrimary\:\e5d5d4\,\coverSecondary\:\1a2a2b\,\dir\:\/posts/2019\,\summary\:\vue 列表的按需刷新在vue 2.6.0 新增了一个api observable 可实现全局的数据相应，一定程度上可以取代vuex所以我在项目中第一次使用了他，我们的业务场景是这样的，一个订单列表，可以无限下拉，假如：我下拉了 3 页，点击一个订单可以进入详情，在详情里可以改变订单的状态，但是从详情返回的时候列表应该刷新到第一页才能看到状态的改变【前提是后端排序是按更新时间】，但也不能每次从详情...\,\description\:\vue 列表的按需刷新在vue 2.6.0 新增了一个api observable 可实现全局的数据相应，一定程度上可以取代vuex所以我在项目中第一次使用了他，我们的业务场景是这样的，一个订单列表，可以无限下拉，假如：我下拉了 3 页，点击一个订单可以进入详情，在详情里可以改变订单的状态，但是从详情返回的时候列表应该刷新到第一页才能看到状态的改变【前提是后端排序是按更新时间】，但也不能每次从详情...\,\words\:679,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-22-02-24.png\,\coverPathBase\:\/assets/2022-05-14-22-02-24\},{\text\:\容器化运维操作\,\link\:\/posts/2019/2019-6-4-docker\,\frontmatter\:{\title\:\容器化运维操作\,\tag\:\docker\,\moby\,\author\:\Artiely\,\date\:\2019-06-04\,\cover\:\/2022-05-14-22-01-22.png\,\base64\:\2db1f0\,\tinyCover\:\/cover/2022-05-14-22-01-22.png\,\coverWidth\:597,\coverHeight\:900,\coverPrimary\:\bbd3c5\,\coverSecondary\:\442c3a\,\dir\:\/posts/2019\,\summary\:\容器化运维操作日趋复杂的运维开发环境，对虚拟服务器及应用服务的要求更加的多元化。我们需要更加容易扩展、性能优越、方便监控的管理服务，容器化应用、容器化运维应运而生。【知己知彼】你将学习到：理解/安装docker容器技术秒级快速部署mysql、nginx、tomcat等服务使用容器技术发布nodejs应用…【工欲善其事，必先利其器】你需要准备的环境（三选一）：Linux环境(Centos 7以上/D...\,\description\:\容器化运维操作日趋复杂的运维开发环境，对虚拟服务器及应用服务的要求更加的多元化。我们需要更加容易扩展、性能优越、方便监控的管理服务，容器化应用、容器化运维应运而生。【知己知彼】你将学习到：理解/安装docker容器技术秒级快速部署mysql、nginx、tomcat等服务使用容器技术发布nodejs应用…【工欲善其事，必先利其器】你需要准备的环境（三选一）：Linux环境(Centos 7以上/D...\,\words\:4985,\readTime\:\25 min read\},\coverPath\:\/assets/2022-05-14-22-01-22.png\,\coverPathBase\:\/assets/2022-05-14-22-01-22\},{\text\:\nodejs事件循环与多进程\,\link\:\/posts/2019/2019-6-4-nodejs-events\,\frontmatter\:{\title\:\nodejs事件循环与多进程\,\tag\:\events\,\cluster\,\macrotask\,\microtask\,\author\:\Artiely\,\date\:\2019-06-04\,\cover\:\/2022-05-14-22-01-43.png\,\base64\:\32332b\,\tinyCover\:\/cover/2022-05-14-22-01-43.png\,\coverWidth\:675,\coverHeight\:1200,\coverPrimary\:\2b251f\,\coverSecondary\:\d4dae0\,\dir\:\/posts/2019\,\summary\:\nodejs事件循环与多进程介绍了解事件循环的概念学习浏览器中的事件循环机制学习nodejs中的事件循环机制了解多进程，多线程之间的区别学习nodejs中的多进程并使用cluster来开启多进程目标深入掌握浏览器与nodejs中的事件循环机制，并且能理解它们之间的区别使用cluster开启多进程第一章 事件循环介绍浏览器中的事件循环为了协调事件（event），用户交互（user interacti...\,\description\:\nodejs事件循环与多进程介绍了解事件循环的概念学习浏览器中的事件循环机制学习nodejs中的事件循环机制了解多进程，多线程之间的区别学习nodejs中的多进程并使用cluster来开启多进程目标深入掌握浏览器与nodejs中的事件循环机制，并且能理解它们之间的区别使用cluster开启多进程第一章 事件循环介绍浏览器中的事件循环为了协调事件（event），用户交互（user interacti...\,\words\:6828,\readTime\:\35 min read\},\coverPath\:\/assets/2022-05-14-22-01-43.png\,\coverPathBase\:\/assets/2022-05-14-22-01-43\},{\text\:\Linux 服务器\,\link\:\/posts/2019/2019-6-1-linux\,\frontmatter\:{\title\:\Linux 服务器\,\tag\:\linux\,\centOS\,\nginx\,\author\:\Artiely\,\date\:\2019-06-01\,\cover\:\/2022-05-14-22-01-02.png\,\base64\:16517,\tinyCover\:\/cover/2022-05-14-22-01-02.png\,\coverWidth\:564,\coverHeight\:743,\coverPrimary\:\3f3630\,\coverSecondary\:\c0c9cf\,\dir\:\/posts/2019\,\summary\:\Linux 服务器Linux是操作系统：Linux作为自由软件和开放源代码软件发展中最著名的例子，背靠社区与商业化的使用，使其得到了广泛的应用与发展。Linux无处不在：世界上500个最快的超级计算机90％以上运行Linux发行版或变种，包括最快的前10名超级计算机运行的都是基于Linux内核的操作系统。Linux也广泛应用在嵌入式系统上，如手机（Mobile Phone）、平板电脑（Tablet...\,\description\:\Linux 服务器Linux是操作系统：Linux作为自由软件和开放源代码软件发展中最著名的例子，背靠社区与商业化的使用，使其得到了广泛的应用与发展。Linux无处不在：世界上500个最快的超级计算机90％以上运行Linux发行版或变种，包括最快的前10名超级计算机运行的都是基于Linux内核的操作系统。Linux也广泛应用在嵌入式系统上，如手机（Mobile Phone）、平板电脑（Tablet...\,\words\:12020,\readTime\:\61 min read\},\coverPath\:\/assets/2022-05-14-22-01-02.png\,\coverPathBase\:\/assets/2022-05-14-22-01-02\},{\text\:\ vue-admin\,\link\:\/posts/2019/2019-5-15-vue-admin\,\frontmatter\:{\tag\:\vue\,\javaScript\,\date\:\2019-05-15\,\cover\:\/2022-05-14-22-00-24.png\,\summary\:\基于and-design-vue的vue后台管理系统模板\,\tinyCover\:\/cover/2022-05-14-22-00-24.png\,\coverWidth\:450,\coverHeight\:800,\coverPrimary\:\0f0f0f\,\coverSecondary\:\f0f0f0\,\dir\:\/posts/2019\,\title\:\ vue-admin\,\author\:\tanjie-ola\,\words\:603,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-22-00-24.png\,\coverPathBase\:\/assets/2022-05-14-22-00-24\},{\text\:\GraphQL 介绍\,\link\:\/posts/2019/2019-5-5-restful-graphql\,\frontmatter\:{\title\:\GraphQL 介绍\,\tag\:\graphQL\,\RESTful\,\author\:\Artiely\,\date\:\2019-05-05\,\cover\:\/2022-05-14-22-00-00.png\,\base64\:16932,\tinyCover\:\/cover/2022-05-14-22-00-00.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\2a1c16\,\coverSecondary\:\d5e3e9\,\dir\:\/posts/2019\,\summary\:\GraphQL 介绍接口开发方式RESTfulGraphQLRESTful 接口问题接口粒度比较细，很多场景需要调用多次请求才能完成一个功能接口扩展、维护成本高接口响应的数据格式无法预知（json已经成为主流格式）GraphQL概述GraphQL 既是一种用于 API 的查询语言，也是一个满足你数据查询的运行时。是一种接口开发标准，支持常见的服务端开发语言。例如：java、php、Python、N...\,\description\:\GraphQL 介绍接口开发方式RESTfulGraphQLRESTful 接口问题接口粒度比较细，很多场景需要调用多次请求才能完成一个功能接口扩展、维护成本高接口响应的数据格式无法预知（json已经成为主流格式）GraphQL概述GraphQL 既是一种用于 API 的查询语言，也是一个满足你数据查询的运行时。是一种接口开发标准，支持常见的服务端开发语言。例如：java、php、Python、N...\,\words\:3628,\readTime\:\19 min read\},\coverPath\:\/assets/2022-05-14-22-00-00.png\,\coverPathBase\:\/assets/2022-05-14-22-00-00\},{\text\:\Vuecli3+发布组件库到npm\,\link\:\/posts/2019/2019-4-16-vue-cli3+to-plugin\,\frontmatter\:{\title\:\Vuecli3+发布组件库到npm\,\tag\:\vue-cli\,\vue\,\npm\,\cover\:\/2022-05-14-21-59-39.png\,\date\:\2019-04-16\,\base64\:\ca3838\,\tinyCover\:\/cover/2022-05-14-21-59-39.png\,\coverWidth\:658,\coverHeight\:1170,\coverPrimary\:\2e2c2b\,\coverSecondary\:\d1d3d4\,\dir\:\/posts/2019\,\summary\:\Vuecli3+发布组件库到npm创建项目vue create my-plugin调整目录我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。|-- src|-- packages // 新增 packages 用于编写存放组件配置项目以支持新的目录结构我们通过上一步的目录改造后，会遇到两个问题。新增packages目录，该目录未加入webpack编译新增packag...\,\description\:\Vuecli3+发布组件库到npm创建项目vue create my-plugin调整目录我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。|-- src|-- packages // 新增 packages 用于编写存放组件配置项目以支持新的目录结构我们通过上一步的目录改造后，会遇到两个问题。新增packages目录，该目录未加入webpack编译新增packag...\,\author\:\tanjie-ola\,\words\:1475,\readTime\:\8 min read\},\coverPath\:\/assets/2022-05-14-21-59-39.png\,\coverPathBase\:\/assets/2022-05-14-21-59-39\},{\text\:\Node.js 网络通信\,\link\:\/posts/2019/2019-4-15-nodejs-tcp-udp-h2\,\frontmatter\:{\title\:\Node.js 网络通信\,\tag\:\TCP\,\UDP\,\http\,\https\,\author\:\Artiely\,\date\:\2019-04-15\,\cover\:\/2022-05-14-21-59-17.png\,\base64\:\0755a2\,\tinyCover\:\/cover/2022-05-14-21-59-17.png\,\coverWidth\:564,\coverHeight\:1003,\coverPrimary\:\9a8f85\,\coverSecondary\:\65707a\,\dir\:\/posts/2019\,\summary\:\Node.js 网络通信Node 是一个面向网络而生的平台，它具有事件驱动、无阻塞、单线程等特性，具备良好的可伸缩性，使得它十分轻量，适合在分布式网络中扮演各种各样的角色。同时 Node 提供的 API 十分贴合网络，适合用它基础的 API 构建灵活的网络服务。就是给大家介绍 Node 在网络通信编程方面的具体能力。利用 Node 可以十分方便的搭建网络服务器。在 Web 领域，大多数的编程语言需...\,\description\:\Node.js 网络通信Node 是一个面向网络而生的平台，它具有事件驱动、无阻塞、单线程等特性，具备良好的可伸缩性，使得它十分轻量，适合在分布式网络中扮演各种各样的角色。同时 Node 提供的 API 十分贴合网络，适合用它基础的 API 构建灵活的网络服务。就是给大家介绍 Node 在网络通信编程方面的具体能力。利用 Node 可以十分方便的搭建网络服务器。在 Web 领域，大多数的编程语言需...\,\words\:8831,\readTime\:\45 min read\},\coverPath\:\/assets/2022-05-14-21-59-17.png\,\coverPathBase\:\/assets/2022-05-14-21-59-17\},{\text\:\记sentry配置sourcemap后的优化\,\link\:\/posts/2019/2019-4-3-sentry-sourcemap\,\frontmatter\:{\title\:\记sentry配置sourcemap后的优化\,\tag\:\vue\,\sentry\,\sourcemap\,\webpack\,\author\:\Artiely\,\date\:\2019-04-03\,\cover\:\/2022-05-14-21-58-32.png\,\base64\:\c2175b\,\tinyCover\:\/cover/2022-05-14-21-58-32.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\1a251a\,\coverSecondary\:\e5dae5\,\dir\:\/posts/2019\,\summary\:\记sentry配置sourcemap后的优化需求！打包后的文件自动过滤出sourcemap并压缩成zip包项目结构：说明首先说明一下为什么会有这样的需求因为项目中集成了 sentry 关于sentry的介绍 请点击我，如果你已经了解了 sentry那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行，但是在实际生产中我们是不能上传sourcemap的，这不仅仅是不安全的问题...\,\description\:\记sentry配置sourcemap后的优化需求！打包后的文件自动过滤出sourcemap并压缩成zip包项目结构：说明首先说明一下为什么会有这样的需求因为项目中集成了 sentry 关于sentry的介绍 请点击我，如果你已经了解了 sentry那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行，但是在实际生产中我们是不能上传sourcemap的，这不仅仅是不安全的问题...\,\words\:598,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-58-32.png\,\coverPathBase\:\/assets/2022-05-14-21-58-32\},{\text\:\如何创建自定义 VuePress 主题\,\link\:\/posts/2019/2019-4-3-vuepress-theme\,\frontmatter\:{\title\:\如何创建自定义 VuePress 主题\,\tag\:\vue\,\vuepress\,\author\:\Artiely\,\date\:\2019-04-03\,\cover\:\/2022-05-14-21-58-55.png\,\base64\:\c2175b\,\tinyCover\:\/cover/2022-05-14-21-58-55.png\,\coverWidth\:675,\coverHeight\:1200,\coverPrimary\:\2a2e28\,\coverSecondary\:\d5d1d7\,\dir\:\/posts/2019\,\summary\:\如何创建自定义 VuePress 主题如果您已经听说过 VuePress，那么可能会知道它是一个功能极小的静态站点生成器。VuePress 使创建文本繁多的文档网站变得简单，比 Nuxt.js 容易得多。但是，您是否知道 VuePress 有一个基于 Vue 构建的自定义主题系统，可以让您使用自定义功能构建自己的全功能主题？在本文中，我们将介绍如何开始创建自己的自定义主题，遵循一些最佳实践，以及如...\,\description\:\如何创建自定义 VuePress 主题如果您已经听说过 VuePress，那么可能会知道它是一个功能极小的静态站点生成器。VuePress 使创建文本繁多的文档网站变得简单，比 Nuxt.js 容易得多。但是，您是否知道 VuePress 有一个基于 Vue 构建的自定义主题系统，可以让您使用自定义功能构建自己的全功能主题？在本文中，我们将介绍如何开始创建自己的自定义主题，遵循一些最佳实践，以及如...\,\words\:1154,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-58-55.png\,\coverPathBase\:\/assets/2022-05-14-21-58-55\},{\text\:\axios认识\,\link\:\/posts/2018/2018-10-10-axios\,\frontmatter\:{\title\:\axios认识\,\tag\:\axios\,\http\,\promise\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-54-40.png\,\base64\:222222,\tinyCover\:\/cover/2022-05-14-21-54-40.png\,\coverWidth\:736,\coverHeight\:1552,\coverPrimary\:\1c3239\,\coverSecondary\:\e3cdc6\,\dir\:\/posts/2018\,\summary\:\axios认识Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF浏览器支持安装使用 npm:$ npm install axios使...\,\description\:\axios认识Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF浏览器支持安装使用 npm:$ npm install axios使...\,\words\:2329,\readTime\:\12 min read\},\coverPath\:\/assets/2022-05-14-21-54-40.png\,\coverPathBase\:\/assets/2022-05-14-21-54-40\},{\text\:\chrome开发使用小技巧\,\link\:\/posts/2018/2018-10-10-chrome-dev-tips\,\frontmatter\:{\title\:\chrome开发使用小技巧\,\tag\:\chrome\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-55-02.png\,\base64\:\dc4a3b\,\tinyCover\:\/cover/2022-05-14-21-55-02.png\,\coverWidth\:564,\coverHeight\:953,\coverPrimary\:\e4e6e2\,\coverSecondary\:\1b191d\,\dir\:\/posts/2018\,\summary\:\开发工具使用小技巧chrome开启跨域跨域的解决办法有很多这里先来个简单暴力一劳永逸的办法1.找到chrome的安装目录chrome.exe新建快捷方式2.重命名快捷方式跨域.exe右键属性 目标 加入参数 --disable-web-security 记得前面空格3.快捷方式发送到桌面关闭所有chrome然后启动跨域.exe 会提示 您使用的是不受支持的命令行标记disable-web-sec...\,\description\:\开发工具使用小技巧chrome开启跨域跨域的解决办法有很多这里先来个简单暴力一劳永逸的办法1.找到chrome的安装目录chrome.exe新建快捷方式2.重命名快捷方式跨域.exe右键属性 目标 加入参数 --disable-web-security 记得前面空格3.快捷方式发送到桌面关闭所有chrome然后启动跨域.exe 会提示 您使用的是不受支持的命令行标记disable-web-sec...\,\words\:198,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-55-02.png\,\coverPathBase\:\/assets/2022-05-14-21-55-02\},{\text\:\get与post的区别\,\link\:\/posts/2018/2018-10-10-get-post\,\frontmatter\:{\title\:\get与post的区别\,\tag\:\TCP\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-55-21.png\,\base64\:666666,\tinyCover\:\/cover/2022-05-14-21-55-21.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\735c51\,\coverSecondary\:\8ca3ae\,\dir\:\/posts/2018\,\summary\:\get与post的区别GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你轻轻松松的给出了一...\,\description\:\get与post的区别GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你轻轻松松的给出了一...\,\words\:1682,\readTime\:\9 min read\},\coverPath\:\/assets/2022-05-14-21-55-21.png\,\coverPathBase\:\/assets/2022-05-14-21-55-21\},{\text\:\github恢复属于你的小绿点\,\link\:\/posts/2018/2018-10-10-git-green-pointer\,\frontmatter\:{\title\:\github恢复属于你的小绿点\,\tag\:\git\,\github\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-55-48.png\,\base64\:\252a2e\,\tinyCover\:\/cover/2022-05-14-21-55-48.png\,\coverWidth\:564,\coverHeight\:902,\coverPrimary\:\6f7271\,\coverSecondary\:\908d8e\,\dir\:\/posts/2018\,\summary\:\github恢复属于你的小绿点首先要分析为什么你的提交记录没有被github识别：进行Commits的用户没有被关联到你的Github帐号中。不是在这个版本库的默认分支进行的Commit。这个仓库是一个Fork仓库，而不是独立仓库。我估计很多人和我一样都是第一个原因，初用github远程管理代码和那些经常更换使用机器的原因有可能用错账户名和邮箱，其实我在修改自己的原来的用户名和邮箱是就发现，当初设...\,\description\:\github恢复属于你的小绿点首先要分析为什么你的提交记录没有被github识别：进行Commits的用户没有被关联到你的Github帐号中。不是在这个版本库的默认分支进行的Commit。这个仓库是一个Fork仓库，而不是独立仓库。我估计很多人和我一样都是第一个原因，初用github远程管理代码和那些经常更换使用机器的原因有可能用错账户名和邮箱，其实我在修改自己的原来的用户名和邮箱是就发现，当初设...\,\words\:662,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-55-48.png\,\coverPathBase\:\/assets/2022-05-14-21-55-48\},{\text\:\js常见位运算理解\,\link\:\/posts/2018/2018-10-10-js-bit-operation\,\frontmatter\:{\title\:\js常见位运算理解\,\tag\:\javaScript\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-56-07.png\,\base64\:129,\tinyCover\:\/cover/2022-05-14-21-56-07.png\,\coverWidth\:600,\coverHeight\:1200,\coverPrimary\:\2a3440\,\coverSecondary\:\d5cbbf\,\dir\:\/posts/2018\,\summary\:\js常见位运算理解我们可能很少在编程中用位运算，如果没深入学习，可能也很难理解。平时的数值运算，其实是要先转换成二进制再进行运算的，而位运算就是直接进行二进制运算，所以位运算的执行效率肯定是更高的。下面通过一些实例来加深对位运算的理解。按位与(&)&&运算符我们都知道，只有两个都为真，结果才为真。&道理是一样的，只有两个数的值为1时，才返回1。例如1和3的按位与操作： ...\,\description\:\js常见位运算理解我们可能很少在编程中用位运算，如果没深入学习，可能也很难理解。平时的数值运算，其实是要先转换成二进制再进行运算的，而位运算就是直接进行二进制运算，所以位运算的执行效率肯定是更高的。下面通过一些实例来加深对位运算的理解。按位与(&)&&运算符我们都知道，只有两个都为真，结果才为真。&道理是一样的，只有两个数的值为1时，才返回1。例如1和3的按位与操作： ...\,\words\:1413,\readTime\:\8 min read\},\coverPath\:\/assets/2022-05-14-21-56-07.png\,\coverPathBase\:\/assets/2022-05-14-21-56-07\},{\text\:\npm常见问题\,\link\:\/posts/2018/2018-10-10-npm-nrm\,\frontmatter\:{\title\:\npm常见问题\,\tag\:\npm\,\nrm\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-56-29.png\,\base64\:\70d1a4\,\tinyCover\:\/cover/2022-05-14-21-56-29.png\,\coverWidth\:564,\coverHeight\:1110,\coverPrimary\:\51596e\,\coverSecondary\:\aea691\,\dir\:\/posts/2018\,\summary\:\npm安装失败在执行 npm install时，出现如下错误，npm ERR! phantomjs-prebuilt@2.1.14 install: node install.jsnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the phantomjs-prebuilt@2.1.14 install script node install.js...\,\description\:\npm安装失败在执行 npm install时，出现如下错误，npm ERR! phantomjs-prebuilt@2.1.14 install: node install.jsnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the phantomjs-prebuilt@2.1.14 install script node install.js...\,\words\:371,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-56-29.png\,\coverPathBase\:\/assets/2022-05-14-21-56-29\},{\text\:\pm2进阶使用之一键发布\,\link\:\/posts/2018/2018-10-10-pm2\,\frontmatter\:{\title\:\pm2进阶使用之一键发布\,\tag\:\pm2\,\nodejs\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-56-56.png\,\base64\:301286,\tinyCover\:\/cover/2022-05-14-21-56-56.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\e38b42\,\coverSecondary\:\1c74bd\,\dir\:\/posts/2018\,\summary\:\pm2进阶使用之一键发布启用集群模式只需要在启动应用时带上i参数pm2 start app.js -i maxmax：意味着PM2将自动检测可用的CPU数量和运行多个进程可以在负载均衡模式(但是不推荐使用)或者使用json文件启动的{ \\\apps\\\ : { \\\script\\\ : \\\api.js\\\, \\\instances\\\ : \\\max\\\, \\\exec_mode\\\ : \\\clu...\,\description\:\pm2进阶使用之一键发布启用集群模式只需要在启动应用时带上i参数pm2 start app.js -i maxmax：意味着PM2将自动检测可用的CPU数量和运行多个进程可以在负载均衡模式(但是不推荐使用)或者使用json文件启动的{ \\\apps\\\ : { \\\script\\\ : \\\api.js\\\, \\\instances\\\ : \\\max\\\, \\\exec_mode\\\ : \\\clu...\,\words\:833,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-56-56.png\,\coverPathBase\:\/assets/2022-05-14-21-56-56\},{\text\:\vue pracel试玩\,\link\:\/posts/2018/2018-10-10-vue-pracel\,\frontmatter\:{\title\:\vue pracel试玩\,\tag\:\vue\,\pracel\,\author\:\Artiely\,\date\:\2018-10-10\,\cover\:\/2022-05-14-21-57-26.png\,\base64\:253848,\tinyCover\:\/cover/2022-05-14-21-57-26.png\,\coverWidth\:563,\coverHeight\:574,\coverPrimary\:\242327\,\coverSecondary\:\dbdcd8\,\dir\:\/posts/2018\,\summary\:\vue pracel试玩安装github https://github.com/parcel-bundler/parcel?utm_sourcegold_browser_extension首先通过 Yarn 或者 npm 安装 Parcel :npm install -g parcel-bundler在你正在使用的项目目录下创建一个 package.json 文件:npm init -y我用的原...\,\description\:\vue pracel试玩安装github https://github.com/parcel-bundler/parcel?utm_sourcegold_browser_extension首先通过 Yarn 或者 npm 安装 Parcel :npm install -g parcel-bundler在你正在使用的项目目录下创建一个 package.json 文件:npm init -y我用的原...\,\words\:220,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-57-26.png\,\coverPathBase\:\/assets/2022-05-14-21-57-26\},{\text\:\网络爬虫开发\,\link\:\/posts/2018/2018-10-7-node-spider\,\frontmatter\:{\title\:\网络爬虫开发\,\tag\:\nodejs\,\http\,\cheerio\,\selenium\,\puppeteer\,\author\:\Artiely\,\date\:\2018-10-07\,\cover\:\/2022-05-14-21-54-19.png\,\base64\:\fff\,\tinyCover\:\/cover/2022-05-14-21-54-19.png\,\coverWidth\:564,\coverHeight\:1222,\coverPrimary\:\343438\,\coverSecondary\:\cbcbc7\,\dir\:\/posts/2018\,\summary\:\网络爬虫开发什么是爬虫可以把互联网比做成一张“大网”，爬虫就是在这张大网上不断爬取信息的程序所以一句话总结：爬虫是请求网站并提取数据的自动化程序爬虫的基本工作流程如下：向指定的URL发送http请求获取响应（HTML、XML、JSON、二进制等数据）处理数据（解析DOM、解析JSON等）将处理好的数据进行存储img爬虫的意义爬虫就是一个探测程序，它的基本功能就是模拟人的行为去各个网站转悠，点点按钮...\,\description\:\网络爬虫开发什么是爬虫可以把互联网比做成一张“大网”，爬虫就是在这张大网上不断爬取信息的程序所以一句话总结：爬虫是请求网站并提取数据的自动化程序爬虫的基本工作流程如下：向指定的URL发送http请求获取响应（HTML、XML、JSON、二进制等数据）处理数据（解析DOM、解析JSON等）将处理好的数据进行存储img爬虫的意义爬虫就是一个探测程序，它的基本功能就是模拟人的行为去各个网站转悠，点点按钮...\,\words\:4529,\readTime\:\23 min read\},\coverPath\:\/assets/2022-05-14-21-54-19.png\,\coverPathBase\:\/assets/2022-05-14-21-54-19\},{\text\:\javascript 的执行逻辑\,\link\:\/posts/2018/2018-9-7-js\,\frontmatter\:{\title\:\javascript 的执行逻辑\,\tag\:\javaScript\,\date\:\2018-09-07\,\cover\:\/2022-05-14-21-53-56.png\,\hot\:true,\base64\:\f0de3e\,\tinyCover\:\/cover/2022-05-14-21-53-56.png\,\coverWidth\:564,\coverHeight\:1128,\coverPrimary\:\060e22\,\coverSecondary\:\f9f1dd\,\dir\:\/posts/2018\,\summary\:\你将了解执行栈（Execution stack）执行上下文（Execution Context）作用域链（scope chains）变量提升（hoisting）闭包（closures）this 绑定执行栈又叫调用栈，具有 LIFO（last in first out 后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。当 JavaScript 引擎首次读取你的脚本时，它会创建一个全局执行上...\,\description\:\你将了解执行栈（Execution stack）执行上下文（Execution Context）作用域链（scope chains）变量提升（hoisting）闭包（closures）this 绑定执行栈又叫调用栈，具有 LIFO（last in first out 后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。当 JavaScript 引擎首次读取你的脚本时，它会创建一个全局执行上...\,\author\:\tanjie-ola\,\words\:3554,\readTime\:\18 min read\},\coverPath\:\/assets/2022-05-14-21-53-56.png\,\coverPathBase\:\/assets/2022-05-14-21-53-56\},{\text\:\提问的艺术\,\link\:\/posts/2018/2018-8-8-question\,\frontmatter\:{\title\:\提问的艺术\,\tag\:\baidu\,\google\,\author\:\Artiely\,\date\:\2018-08-08\,\cover\:\/2022-05-14-21-53-11.png\,\base64\:\02b981\,\tinyCover\:\/cover/2022-05-14-21-53-11.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\070a08\,\coverSecondary\:\f8f5f7\,\dir\:\/posts/2018\,\summary\:\提问的艺术正如查尔斯吉特林所说的：只要能把问题讲清楚，就已经解决了一半问题。提问前你必须需要知道的事情要知道， Free 的正确翻译是 自由，而非免费。要知道，愿意回答问题的人，都是 可爱 的人。要知道，向帮助你的人 付费 是一个高尚的行为。即使回答你的人不是为了钱。要知道，花钱买时间一个是常识。如果你不能认同，要么你钱包穷，要么你思想穷。要知道，给对方发工资的不是你或者你老板。要知道，提问的时候...\,\description\:\提问的艺术正如查尔斯吉特林所说的：只要能把问题讲清楚，就已经解决了一半问题。提问前你必须需要知道的事情要知道， Free 的正确翻译是 自由，而非免费。要知道，愿意回答问题的人，都是 可爱 的人。要知道，向帮助你的人 付费 是一个高尚的行为。即使回答你的人不是为了钱。要知道，花钱买时间一个是常识。如果你不能认同，要么你钱包穷，要么你思想穷。要知道，给对方发工资的不是你或者你老板。要知道，提问的时候...\,\words\:699,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-53-11.png\,\coverPathBase\:\/assets/2022-05-14-21-53-11\},{\text\:\Vue 前端开发规范\,\link\:\/posts/2018/2018-8-8-vue-rules\,\frontmatter\:{\title\:\Vue 前端开发规范\,\tag\:\vue\,\eslint\,\BEM\,\author\:\Artiely\,\date\:\2018-08-08\,\cover\:\/2022-05-14-21-53-33.png\,\base64\:\4d5054\,\tinyCover\:\/cover/2022-05-14-21-53-33.png\,\coverWidth\:736,\coverHeight\:1592,\coverPrimary\:\0f0d0e\,\coverSecondary\:\f0f2f1\,\dir\:\/posts/2018\,\summary\:\Vue 前端开发规范基于 Vue 官方风格指南整理一、强制代码必须遵循 eslint使用 eslint standard 规范组件命名组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: TodoItem, // ...}反例：export default { name: Todo, // ...}data 函数组件数...\,\description\:\Vue 前端开发规范基于 Vue 官方风格指南整理一、强制代码必须遵循 eslint使用 eslint standard 规范组件命名组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: TodoItem, // ...}反例：export default { name: Todo, // ...}data 函数组件数...\,\words\:3019,\readTime\:\16 min read\},\coverPath\:\/assets/2022-05-14-21-53-33.png\,\coverPathBase\:\/assets/2022-05-14-21-53-33\},{\text\:\Egg.js 入门\,\link\:\/posts/2018/2018-8-7-egg-start\,\frontmatter\:{\title\:\Egg.js 入门\,\tag\:\eggjs\,\nodejs\,\author\:\Artiely\,\date\:\2018-08-07\,\cover\:\/2022-05-14-21-52-48.png\,\base64\:\1a1a1a\,\tinyCover\:\/cover/2022-05-14-21-52-48.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\6a4c5e\,\coverSecondary\:\95b3a1\,\dir\:\/posts/2018\,\summary\:\Egg.js 入门Egg.js 官网官 网：https://eggjs.org中文网站：https://eggjs.org/zh-cn/Egg.js 是什么?Egg.js 是《阿里旗下产品》基于 Node.js 和 Koa 是一个 Nodejs 的企业级应用开发框架。可以帮助发团队和开发人员降低开发和维护成本。Express 和 Koa 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常...\,\description\:\Egg.js 入门Egg.js 官网官 网：https://eggjs.org中文网站：https://eggjs.org/zh-cn/Egg.js 是什么?Egg.js 是《阿里旗下产品》基于 Node.js 和 Koa 是一个 Nodejs 的企业级应用开发框架。可以帮助发团队和开发人员降低开发和维护成本。Express 和 Koa 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常...\,\words\:1085,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-52-48.png\,\coverPathBase\:\/assets/2022-05-14-21-52-48\},{\text\:\Electron 应用操作数据之nedb数据库\,\link\:\/posts/2018/2018-7-11-electron-nedb\,\frontmatter\:{\title\:\Electron 应用操作数据之nedb数据库\,\tag\:\electron\,\nodejs\,\nedb\,\author\:\Artiely\,\date\:\2018-07-11\,\cover\:\/2022-05-14-21-52-03.png\,\base64\:\ffb00e\,\tinyCover\:\/cover/2022-05-14-21-52-03.png\,\coverWidth\:720,\coverHeight\:1280,\coverPrimary\:\b5bfc0\,\coverSecondary\:\4a403f\,\dir\:\/posts/2018\,\summary\:\Electron 应用操作数据之nedb数据库Electron 应用操作数据的几种方法：1、远程api接口 （多个客户端公用一套数据）2、连接远程数据库 (局域网内使用 多个客户端公用一套数据 ) （不建议使用）3、连接本地数据库 （nedb sqlite） 应用本地保存数据（localstore 5M） 用户设置信息 qq聊天记录读...\,\description\:\Electron 应用操作数据之nedb数据库Electron 应用操作数据的几种方法：1、远程api接口 （多个客户端公用一套数据）2、连接远程数据库 (局域网内使用 多个客户端公用一套数据 ) （不建议使用）3、连接本地数据库 （nedb sqlite） 应用本地保存数据（localstore 5M） 用户设置信息 qq聊天记录读...\,\words\:546,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-52-03.png\,\coverPathBase\:\/assets/2022-05-14-21-52-03\},{\text\:\Electron注册全局快捷键（globalShortcut）,剪切板（clipboard ）与nativeImage 模块\,\link\:\/posts/2018/2018-7-11-electron-shortcut-cliboard-nativeimage\,\frontmatter\:{\title\:\Electron注册全局快捷键（globalShortcut）,剪切板（clipboard ）与nativeImage 模块\,\tag\:\nodejs\,\electron\,\author\:\Artiely\,\date\:\2018-07-11\,\cover\:\/2022-05-14-21-52-25.png\,\base64\:\8c8f8f\,\tinyCover\:\/cover/2022-05-14-21-52-25.png\,\coverWidth\:736,\coverHeight\:1071,\coverPrimary\:\171718\,\coverSecondary\:\e8e8e7\,\dir\:\/posts/2018\,\summary\:\Electron 注册全局快捷键（globalShortcut）const app require(app)const globalShortcut require(electron).globalShortcutapp.on(ready, () > { // Register a ctrl+x shortcut listener. const ret globa...\,\description\:\Electron 注册全局快捷键（globalShortcut）const app require(app)const globalShortcut require(electron).globalShortcutapp.on(ready, () > { // Register a ctrl+x shortcut listener. const ret globa...\,\words\:120,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-52-25.png\,\coverPathBase\:\/assets/2022-05-14-21-52-25\},{\text\:\Electron实现消息通知与监听网络\,\link\:\/posts/2018/2018-7-10-electron-message\,\frontmatter\:{\title\:\Electron实现消息通知与监听网络\,\tag\:\nodejs\,\electron\,\author\:\Artiely\,\date\:\2018-07-10\,\cover\:\/2022-05-14-21-51-07.png\,\base64\:\101e2e\,\tinyCover\:\/cover/2022-05-14-21-51-07.png\,\coverWidth\:353,\coverHeight\:680,\coverPrimary\:\cdcaca\,\coverSecondary\:\323535\,\dir\:\/posts/2018\,\summary\:\Electron实现消息通知Electron 里面的消息通知是基于 h5 的通知 api 实现的。const option { title: title, body: body, icon: path.join(main-process/favicon2.ico),}const myNotification new window.Notification(option.t...\,\description\:\Electron实现消息通知Electron 里面的消息通知是基于 h5 的通知 api 实现的。const option { title: title, body: body, icon: path.join(main-process/favicon2.ico),}const myNotification new window.Notification(option.t...\,\words\:72,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-51-07.png\,\coverPathBase\:\/assets/2022-05-14-21-51-07\},{\text\:\WebSocket\,\link\:\/posts/2018/2018-7-10-websocket\,\frontmatter\:{\title\:\WebSocket\,\tag\:\nodejs\,\webSocket\,\author\:\Artiely\,\date\:\2018-07-10\,\cover\:\/2022-05-14-21-51-36.png\,\base64\:\fceb3f\,\tinyCover\:\/cover/2022-05-14-21-51-36.png\,\coverWidth\:736,\coverHeight\:1033,\coverPrimary\:\312c41\,\coverSecondary\:\ced3be\,\dir\:\/posts/2018\,\summary\:\WebSocket介绍现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。img所以单向请求的缺...\,\description\:\WebSocket介绍现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。img所以单向请求的缺...\,\words\:4982,\readTime\:\25 min read\},\coverPath\:\/assets/2022-05-14-21-51-36.png\,\coverPathBase\:\/assets/2022-05-14-21-51-36\},{\text\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘\,\link\:\/posts/2018/2018-7-9-electron-ico\,\frontmatter\:{\title\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-09\,\cover\:\/2022-05-14-21-50-40.png\,\base64\:\273a49\,\tinyCover\:\/cover/2022-05-14-21-50-40.png\,\coverWidth\:676,\coverHeight\:1200,\coverPrimary\:\040404\,\coverSecondary\:\fbfbfb\,\dir\:\/posts/2018\,\summary\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘Electron 创建任务栏图标以及任务栏图标右键菜单const path require(path)const { Menu, Tray, app, BrowserWindow } require(electron)const appIcon new Tray(path.join(__di...\,\description\:\Electron 系统托盘 托盘右键菜单、托 盘图标闪烁 点击右上角关闭按钮隐 藏到托盘Electron 创建任务栏图标以及任务栏图标右键菜单const path require(path)const { Menu, Tray, app, BrowserWindow } require(electron)const appIcon new Tray(path.join(__di...\,\words\:250,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-50-40.png\,\coverPathBase\:\/assets/2022-05-14-21-50-40\},{\text\:\Electron 弹出框\,\link\:\/posts/2018/2018-7-8-electron-dialog\,\frontmatter\:{\title\:\Electron 弹出框\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-08\,\cover\:\/2022-05-14-21-49-57.png\,\base64\:\2f3341\,\tinyCover\:\/cover/2022-05-14-21-49-57.png\,\coverWidth\:474,\coverHeight\:842,\coverPrimary\:\2794c4\,\coverSecondary\:\d86b3b\,\dir\:\/posts/2018\,\summary\:\Electron 弹出框dialog 模块提供了 api 来展示原生的系统对话框，例如打开文件框，alert 框， 所以 web 应用可以给用户带来跟系统应用相同的体验。dialog.showErrorBox(title, content)dialog.showMessageBox( { type: info, title: message, message: ...\,\description\:\Electron 弹出框dialog 模块提供了 api 来展示原生的系统对话框，例如打开文件框，alert 框， 所以 web 应用可以给用户带来跟系统应用相同的体验。dialog.showErrorBox(title, content)dialog.showMessageBox( { type: info, title: message, message: ...\,\words\:153,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-49-57.png\,\coverPathBase\:\/assets/2022-05-14-21-49-57\},{\text\:\Electron 在用户默认浏览器中打开 URL\,\link\:\/posts/2018/2018-7-8-electron-shell-url-webview\,\frontmatter\:{\title\:\Electron 在用户默认浏览器中打开 URL\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-08\,\cover\:\/2022-05-14-21-50-16.png\,\base64\:\2f3341\,\tinyCover\:\/cover/2022-05-14-21-50-16.png\,\coverWidth\:474,\coverHeight\:727,\coverPrimary\:\d5cbbf\,\coverSecondary\:\2a3440\,\dir\:\/posts/2018\,\summary\:\Electron shell 模块 在用户默认浏览器中打开 URL 的示例shell 模块提供了集成其他桌面客户端的关联功能.const shell require(shell)shell.openExternal(https://github.com)Electron DOM `` 标签。Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的...\,\description\:\Electron shell 模块 在用户默认浏览器中打开 URL 的示例shell 模块提供了集成其他桌面客户端的关联功能.const shell require(shell)shell.openExternal(https://github.com)Electron DOM `` 标签。Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的...\,\words\:143,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-50-16.png\,\coverPathBase\:\/assets/2022-05-14-21-50-16\},{\text\:\Electron 主进程和渲染进程通信\,\link\:\/posts/2018/2018-7-7-electron-main-render\,\frontmatter\:{\title\:\Electron 主进程和渲染进程通信\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-07\,\cover\:\/2022-05-14-21-49-30.png\,\base64\:\50737e\,\tinyCover\:\/cover/2022-05-14-21-49-30.png\,\coverWidth\:736,\coverHeight\:1592,\coverPrimary\:\a5bcce\,\coverSecondary\:\5a4331\,\dir\:\/posts/2018\,\summary\:\Electron 主进程和渲染进程通信有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知 主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就 用到了主进程和渲染进程之间的相互通信。 Electron 主进程，和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRendereripcMain：当在主进程中使用时，它处理从渲染器进程（...\,\description\:\Electron 主进程和渲染进程通信有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知 主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就 用到了主进程和渲染进程之间的相互通信。 Electron 主进程，和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRendereripcMain：当在主进程中使用时，它处理从渲染器进程（...\,\words\:586,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-49-30.png\,\coverPathBase\:\/assets/2022-05-14-21-49-30\},{\text\:\Electron自定义软件顶部菜单,上下文菜单以及绑定快捷键\,\link\:\/posts/2018/2018-7-6-electron-menu-shortcut\,\frontmatter\:{\title\:\Electron自定义软件顶部菜单,上下文菜单以及绑定快捷键\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-06\,\cover\:\/2022-05-14-21-48-58.png\,\base64\:\2d3135\,\tinyCover\:\/cover/2022-05-14-21-48-58.png\,\coverWidth\:736,\coverHeight\:1040,\coverPrimary\:\a2958d\,\coverSecondary\:\5d6a72\,\dir\:\/posts/2018\,\summary\:\Electron自定义软件顶部菜单以及绑定快捷键Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单。 这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用。const { Menu } require(electron)const template { label: 文件, submenu: ...\,\description\:\Electron自定义软件顶部菜单以及绑定快捷键Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单。 这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用。const { Menu } require(electron)const template { label: 文件, submenu: ...\,\words\:357,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-48-58.png\,\coverPathBase\:\/assets/2022-05-14-21-48-58\},{\text\:\Electron 模块介绍\,\link\:\/posts/2018/2018-7-5-electron-model\,\frontmatter\:{\title\:\Electron 模块介绍\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-05\,\cover\:\/2022-05-14-21-48-33.png\,\base64\:\01bcf3\,\tinyCover\:\/cover/2022-05-14-21-48-33.png\,\coverWidth\:736,\coverHeight\:1085,\coverPrimary\:\3c3a3d\,\coverSecondary\:\c3c5c2\,\dir\:\/posts/2018\,\summary\:\Electron 主进程和渲染进程中的模块Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口。主进程代码：const electron require(electron)// 控制应用生命周期的模块const { app } electron// 创建本地浏览器窗口的模块const { BrowserWindow } elec...\,\description\:\Electron 主进程和渲染进程中的模块Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口。主进程代码：const electron require(electron)// 控制应用生命周期的模块const { app } electron// 创建本地浏览器窗口的模块const { BrowserWindow } elec...\,\words\:525,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-48-33.png\,\coverPathBase\:\/assets/2022-05-14-21-48-33\},{\text\:\Electron基本概念\,\link\:\/posts/2018/2018-7-4-electron-base\,\frontmatter\:{\title\:\Electron基本概念\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-04\,\cover\:\/2022-05-14-21-48-13.png\,\base64\:\5587d7\,\tinyCover\:\/cover/2022-05-14-21-48-13.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\7d6f76\,\coverSecondary\:\829089\,\dir\:\/posts/2018\,\summary\:\Electron运行的流程Electron 主进程和渲染进程主进程和渲染器进程：Electron 运行 package.json 的 main 脚本的进程被称为主进程 。 在主进程中运行的脚 本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。由于 Electron 使用了 Chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的 多...\,\description\:\Electron运行的流程Electron 主进程和渲染进程主进程和渲染器进程：Electron 运行 package.json 的 main 脚本的进程被称为主进程 。 在主进程中运行的脚 本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。由于 Electron 使用了 Chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的 多...\,\words\:552,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-48-13.png\,\coverPathBase\:\/assets/2022-05-14-21-48-13\},{\text\:\Electron了解与开始\,\link\:\/posts/2018/2018-7-3-electron-init\,\frontmatter\:{\title\:\Electron了解与开始\,\tag\:\electron\,\nodejs\,\author\:\Artiely\,\date\:\2018-07-03\,\cover\:\/2022-05-14-21-47-41.png\,\base64\:\2d3135\,\tinyCover\:\/cover/2022-05-14-21-47-41.png\,\coverWidth\:736,\coverHeight\:1145,\coverPrimary\:\344f55\,\coverSecondary\:\cbb0aa\,\dir\:\/posts/2018\,\summary\:\Electron了解与开始为什么要学 Electron。Electron 是一个跨平台的桌面应用开发框架，用 html css js 的技术开发桌面上面可以安装的 软件。“Electron 又为前端开发者谋得了一份好的差事”。想起在网路里流传很广的一句话“不要和老夫说什么 C++，Java，老夫行走江湖就靠一把 JS，遇到需求撸起袖子就是干”。是的 Electron 看上去是在蚕食桌面客户端领域的...\,\description\:\Electron了解与开始为什么要学 Electron。Electron 是一个跨平台的桌面应用开发框架，用 html css js 的技术开发桌面上面可以安装的 软件。“Electron 又为前端开发者谋得了一份好的差事”。想起在网路里流传很广的一句话“不要和老夫说什么 C++，Java，老夫行走江湖就靠一把 JS，遇到需求撸起袖子就是干”。是的 Electron 看上去是在蚕食桌面客户端领域的...\,\words\:799,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-47-41.png\,\coverPathBase\:\/assets/2022-05-14-21-47-41\},{\text\:\web应用开发框架\,\link\:\/posts/2018/2018-6-26-web-koa-egg\,\frontmatter\:{\title\:\web应用开发框架\,\tag\:\koa\,\egg\,\author\:\Artiely\,\date\:\2018-06-26\,\cover\:\/2022-05-14-21-46-46.png\,\base64\:\332a2a\,\tinyCover\:\/cover/2022-05-14-21-46-46.png\,\coverWidth\:718,\coverHeight\:1200,\coverPrimary\:\b9b3b7\,\coverSecondary\:\464c48\,\dir\:\/posts/2018\,\summary\:\web应用开发框架koa入门与使用image-20190620190151695简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快...\,\description\:\web应用开发框架koa入门与使用image-20190620190151695简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快...\,\words\:19229,\readTime\:\97 min read\},\coverPath\:\/assets/2022-05-14-21-46-46.png\,\coverPathBase\:\/assets/2022-05-14-21-46-46\},{\text\:\Nuxt基础入门\,\link\:\/posts/2018/2018-6-9-nuxt\,\frontmatter\:{\title\:\Nuxt基础入门\,\tag\:\vue\,\nuxt\,\author\:\Artiely\,\date\:\2018-06-09\,\cover\:\/2022-05-14-21-46-22.png\,\base64\:\dddee0\,\tinyCover\:\/cover/2022-05-14-21-46-22.png\,\coverWidth\:736,\coverHeight\:758,\coverPrimary\:\55483e\,\coverSecondary\:\aab7c1\,\dir\:\/posts/2018\,\summary\:\Nuxt基础入门Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点，以及一些比较常用的功能介绍。安装和部署npm install -g vue-cli //安装vue-cli架...\,\description\:\Nuxt基础入门Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点，以及一些比较常用的功能介绍。安装和部署npm install -g vue-cli //安装vue-cli架...\,\words\:845,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-46-22.png\,\coverPathBase\:\/assets/2022-05-14-21-46-22\},{\text\:\如何实现一个命令行工具的npm包\,\link\:\/posts/2018/2018-3-12-nodejs-npm\,\frontmatter\:{\title\:\如何实现一个命令行工具的npm包\,\tag\:\nodejs\,\npm\,\author\:\Artiely\,\cover\:\/2022-05-14-21-45-59.png\,\date\:\2018-03-12\,\base64\:\f8f8f8\,\tinyCover\:\/cover/2022-05-14-21-45-59.png\,\coverWidth\:564,\coverHeight\:1002,\coverPrimary\:\19130e\,\coverSecondary\:\e6ecf1\,\dir\:\/posts/2018\,\summary\:\如何实现一个命令行工具的npm包我们平时会使用到很多的基于命令行的npm包，其中我们最熟悉的前端三大框架的脚手架，例如vue-cli他们大致的工作原理是什么呢，今天来实现一个最基本的需求。这样的结构图相信大家都见过├──dist│ ├──css│ │ └──app.ae730c66.css│ ├──js│ │ ├──app.13838aa1.js│ │ ├──app.13838aa1.js.map...\,\description\:\如何实现一个命令行工具的npm包我们平时会使用到很多的基于命令行的npm包，其中我们最熟悉的前端三大框架的脚手架，例如vue-cli他们大致的工作原理是什么呢，今天来实现一个最基本的需求。这样的结构图相信大家都见过├──dist│ ├──css│ │ └──app.ae730c66.css│ ├──js│ │ ├──app.13838aa1.js│ │ ├──app.13838aa1.js.map...\,\words\:995,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-45-59.png\,\coverPathBase\:\/assets/2022-05-14-21-45-59\},{\text\:\CentOS下如何安装nodejs及相关环境\,\link\:\/posts/2018/2018-1-30-centos-setup-nodejs\,\frontmatter\:{\title\:\CentOS下如何安装nodejs及相关环境\,\tag\:\nodejs\,\centOS\,\pm2\,\nvm\,\nginx\,\author\:\Artiely\,\date\:\2018-01-30\,\cover\:\/2022-05-14-21-45-28.png\,\hot\:true,\base64\:\6b8359\,\tinyCover\:\/cover/2022-05-14-21-45-28.png\,\coverWidth\:735,\coverHeight\:1083,\coverPrimary\:\413d41\,\coverSecondary\:\bec2be\,\dir\:\/posts/2018\,\summary\:\CentOS下如何安装nodejs及相关环境您将了解CentOS下如何安装nodejsCentOS下如何安装NVMCentOS下如何安装gitCentOS下如何安装pm2CentOS下如何安装nginx适用对象本文档介绍如何在阿里云CentOS系统的云服务器ECS实例上，安装Nodejs并部署项目。准备工作部署之前，请做如下准备工作：购买ECS实例您的实例运行的镜像是CentOS7.x您的实例可以...\,\description\:\CentOS下如何安装nodejs及相关环境您将了解CentOS下如何安装nodejsCentOS下如何安装NVMCentOS下如何安装gitCentOS下如何安装pm2CentOS下如何安装nginx适用对象本文档介绍如何在阿里云CentOS系统的云服务器ECS实例上，安装Nodejs并部署项目。准备工作部署之前，请做如下准备工作：购买ECS实例您的实例运行的镜像是CentOS7.x您的实例可以...\,\words\:3351,\readTime\:\17 min read\},\coverPath\:\/assets/2022-05-14-21-45-28.png\,\coverPathBase\:\/assets/2022-05-14-21-45-28\},{\text\:\css 规范\,\link\:\/posts/2017/2017-7-7-css-rules\,\frontmatter\:{\title\:\css 规范\,\tag\:\css\,\less\,\stylus\,\sass\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-25-03.png\,\base64\:\7bcdeb\,\tinyCover\:\/cover/2022-05-14-21-25-03.png\,\coverWidth\:736,\coverHeight\:1040,\coverPrimary\:\8a929c\,\coverSecondary\:\756d63\,\dir\:\/posts/2017\,\summary\:\css 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。使用组合选择器时，保持每个独立的选择器占用一行。为了代码的易读性，在每个声明的左括号前增加一个空格。声明块的右括号应该另起一行。每条声明 : 后应该插入一个空格。每条声明应该只占用一行来保证错误报告更加准确。所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出...\,\description\:\css 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。使用组合选择器时，保持每个独立的选择器占用一行。为了代码的易读性，在每个声明的左括号前增加一个空格。声明块的右括号应该另起一行。每条声明 : 后应该插入一个空格。每条声明应该只占用一行来保证错误报告更加准确。所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出...\,\words\:3380,\readTime\:\17 min read\},\coverPath\:\/assets/2022-05-14-21-25-03.png\,\coverPathBase\:\/assets/2022-05-14-21-25-03\},{\text\:\JS 规范\,\link\:\/posts/2017/2017-7-7-js-rules\,\frontmatter\:{\title\:\JS 规范\,\tag\:\javaScript\,\eslint\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-25-26.png\,\base64\:\24384d\,\tinyCover\:\/cover/2022-05-14-21-25-26.png\,\coverWidth\:500,\coverHeight\:741,\coverPrimary\:\d6d5d2\,\coverSecondary\:\292a2d\,\dir\:\/posts/2017\,\summary\:\JS 规范https://standardjs.com/rules-zhcn.html命名规范驼峰式命名法介绍Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfoCamel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo文件资源命名文件名不得含有空格文件名建议只使用小...\,\description\:\JS 规范https://standardjs.com/rules-zhcn.html命名规范驼峰式命名法介绍Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfoCamel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo文件资源命名文件名不得含有空格文件名建议只使用小...\,\words\:2093,\readTime\:\11 min read\},\coverPath\:\/assets/2022-05-14-21-25-26.png\,\coverPathBase\:\/assets/2022-05-14-21-25-26\},{\text\:\文件命名规范\,\link\:\/posts/2017/2017-7-7-rules-file\,\frontmatter\:{\title\:\文件命名规范\,\tag\:\file\,\folder\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-25-53.png\,\base64\:\222d30\,\tinyCover\:\/cover/2022-05-14-21-25-53.png\,\coverWidth\:415,\coverHeight\:679,\coverPrimary\:\845843\,\coverSecondary\:\7ba7bc\,\dir\:\/posts/2017\,\summary\:\文件命名规范下面列出了一些常用的名称，并不是按出现频次排序，但是列出来的都是出现频次非常高的单复数形式都出现了的只列出次数最多的注意，都是目录名称，不是文件名src，source 源代码，用 src 居多test，tests 测试文件，也经常用test，facebook 的测试框架 jest 默认的测试文件目录就是testdocs 文档lib 库文件，library 的缩写dist 用来...\,\description\:\文件命名规范下面列出了一些常用的名称，并不是按出现频次排序，但是列出来的都是出现频次非常高的单复数形式都出现了的只列出次数最多的注意，都是目录名称，不是文件名src，source 源代码，用 src 居多test，tests 测试文件，也经常用test，facebook 的测试框架 jest 默认的测试文件目录就是testdocs 文档lib 库文件，library 的缩写dist 用来...\,\words\:376,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-25-53.png\,\coverPathBase\:\/assets/2022-05-14-21-25-53\},{\text\:\html 规范\,\link\:\/posts/2017/2017-7-7-rules-html\,\frontmatter\:{\title\:\html 规范\,\tag\:\html\,\html5\,\author\:\Artiely\,\date\:\2017-07-07\,\cover\:\/2022-05-14-21-26-19.png\,\base64\:\ee6534\,\tinyCover\:\/cover/2022-05-14-21-26-19.png\,\coverWidth\:563,\coverHeight\:798,\coverPrimary\:\d1c1a0\,\coverSecondary\:\2e3e5f\,\dir\:\/posts/2017\,\summary\:\html 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。嵌套的节点应该缩进（两个空格）。在属性上，使用双引号，不要使用单引号。不好在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。不要忽略可选的关闭标签（例如，` 和 `）。 Page title Hello, world!HTML5 doctype在每个 HTML 页面...\,\description\:\html 规范语法使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。嵌套的节点应该缩进（两个空格）。在属性上，使用双引号，不要使用单引号。不好在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。不要忽略可选的关闭标签（例如，` 和 `）。 Page title Hello, world!HTML5 doctype在每个 HTML 页面...\,\words\:1422,\readTime\:\8 min read\},\coverPath\:\/assets/2022-05-14-21-26-19.png\,\coverPathBase\:\/assets/2022-05-14-21-26-19\},{\text\:\moment.js常用时间示例,时间管理\,\link\:\/posts/2017/2017-7-4-moment\,\frontmatter\:{\title\:\moment.js常用时间示例,时间管理\,\tag\:\moment\,\author\:\Artiely\,\date\:\2017-07-04\,\cover\:\/2022-05-14-21-24-38.png\,\base64\:241313,\tinyCover\:\/cover/2022-05-14-21-24-38.png\,\coverWidth\:736,\coverHeight\:1329,\coverPrimary\:\4b6c78\,\coverSecondary\:\b49387\,\dir\:\/posts/2017\,\summary\:\moment.js常用时间示例,时间管理今天: moment()昨天: moment().subtract(1, days)过去7天:moment().subtract(7, days)，moment()上月: moment().subtract(1, month).startOf(month) , moment().subtract(1, month).end...\,\description\:\moment.js常用时间示例,时间管理今天: moment()昨天: moment().subtract(1, days)过去7天:moment().subtract(7, days)，moment()上月: moment().subtract(1, month).startOf(month) , moment().subtract(1, month).end...\,\words\:283,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-24-38.png\,\coverPathBase\:\/assets/2022-05-14-21-24-38\},{\text\:\TCP协议之握手\,\link\:\/posts/2017/2017-6-10-tcp\,\frontmatter\:{\title\:\TCP协议之握手\,\tag\:\TCP\,\author\:\Artiely\,\date\:\2017-06-10\,\cover\:\/2022-05-14-21-24-12.png\,\base64\:\fefcfd\,\tinyCover\:\/cover/2022-05-14-21-24-12.png\,\coverWidth\:564,\coverHeight\:797,\coverPrimary\:\d0bcb6\,\coverSecondary\:\2f4349\,\dir\:\/posts/2017\,\summary\:\TCP协议之握手TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义建立TCP需要三次握手才能建立，而断开连接则需要四次握手三次握手Three-way Handshake首先Client端发送连接请求报文，Server端接受连接后回复ACK报文，并为这次连接分配资源。Client端接收...\,\description\:\TCP协议之握手TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义建立TCP需要三次握手才能建立，而断开连接则需要四次握手三次握手Three-way Handshake首先Client端发送连接请求报文，Server端接受连接后回复ACK报文，并为这次连接分配资源。Client端接收...\,\words\:1046,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-24-12.png\,\coverPathBase\:\/assets/2022-05-14-21-24-12\},{\text\:\表单的默认行为\,\link\:\/posts/2017/2017-6-9-form-default-submit\,\frontmatter\:{\title\:\表单的默认行为\,\tag\:\css\,\author\:\Artiely\,\date\:\2017-06-09\,\cover\:\/2022-05-14-21-23-49.png\,\base64\:\ffffff\,\tinyCover\:\/cover/2022-05-14-21-23-49.png\,\coverWidth\:735,\coverHeight\:1087,\coverPrimary\:\aa8158\,\coverSecondary\:\557ea7\,\dir\:\/posts/2017\,\summary\:\表单的默认行为当form下只包裹一个input的情况下，在回车时，会自动提交（页面会刷新）解决办法：加入一个input display:none...\,\description\:\表单的默认行为当form下只包裹一个input的情况下，在回车时，会自动提交（页面会刷新）解决办法：加入一个input display:none...\,\words\:45,\readTime\:\1 min read\},\coverPath\:\/assets/2022-05-14-21-23-49.png\,\coverPathBase\:\/assets/2022-05-14-21-23-49\},{\text\:\雅虎性能优化的十四条规则\,\link\:\/posts/2017/2017-6-8-yahoo-rules14\,\frontmatter\:{\title\:\雅虎性能优化的十四条规则\,\tag\:\css\,\javaScript\,\author\:\Artiely\,\date\:\2017-06-08\,\cover\:\/2022-05-14-21-23-27.png\,\base64\:\602ad2\,\tinyCover\:\/cover/2022-05-14-21-23-27.png\,\coverWidth\:736,\coverHeight\:1028,\coverPrimary\:\483235\,\coverSecondary\:\b7cdca\,\dir\:\/posts/2017\,\summary\:\雅虎性能优化的十四条规则作为一位前端技术人员，了解网站的性能优化方面的知识是很基本的，但是我很惭愧我现在才了解到这一点T^T，以下是我学习yahoo性能优化十四条规则的笔记：一、减少http请求次数__如何减少http请求次数：- 组合页面中的图片到单个文件中，并使用css的background-image和background-position属性来实现所需部分的图片；- 组合多个脚本文件到单一...\,\description\:\雅虎性能优化的十四条规则作为一位前端技术人员，了解网站的性能优化方面的知识是很基本的，但是我很惭愧我现在才了解到这一点T^T，以下是我学习yahoo性能优化十四条规则的笔记：一、减少http请求次数__如何减少http请求次数：- 组合页面中的图片到单个文件中，并使用css的background-image和background-position属性来实现所需部分的图片；- 组合多个脚本文件到单一...\,\words\:931,\readTime\:\5 min read\},\coverPath\:\/assets/2022-05-14-21-23-27.png\,\coverPathBase\:\/assets/2022-05-14-21-23-27\},{\text\:\移动端滚动穿透解决办法\,\link\:\/posts/2017/2017-6-7-css-mobile-scroll-through\,\frontmatter\:{\title\:\移动端滚动穿透解决办法\,\tag\:\css\,\javaScript\,\author\:\Artiely\,\date\:\2017-06-07\,\cover\:\/2022-05-14-21-23-04.png\,\base64\:\c0cad6\,\tinyCover\:\/cover/2022-05-14-21-23-04.png\,\coverWidth\:736,\coverHeight\:1040,\coverPrimary\:\2c2444\,\coverSecondary\:\d3dbbb\,\dir\:\/posts/2017\,\summary\:\移动端滚动穿透解决办法问题在滚动模态框里的内容的时候，背景（模态框下面的内容）也在跟着滚动css 之 overflow: hidden.modal-open { &, body { overflow: hidden; height: 100%; }}页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案有两个缺点：由于 ...\,\description\:\移动端滚动穿透解决办法问题在滚动模态框里的内容的时候，背景（模态框下面的内容）也在跟着滚动css 之 overflow: hidden.modal-open { &, body { overflow: hidden; height: 100%; }}页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案有两个缺点：由于 ...\,\words\:597,\readTime\:\3 min read\},\coverPath\:\/assets/2022-05-14-21-23-04.png\,\coverPathBase\:\/assets/2022-05-14-21-23-04\},{\text\:\ 移动端1px解决方案\,\link\:\/posts/2017/2017-6-6-css-1px\,\frontmatter\:{\tag\:\css\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-19-43.png\,\tinyCover\:\/cover/2022-05-14-21-19-43.png\,\coverWidth\:736,\coverHeight\:1038,\coverPrimary\:\85a6a0\,\coverSecondary\:\7a595f\,\dir\:\/posts/2017\,\title\:\ 移动端1px解决方案\,\summary\:\移动端1px解决方案1.用小数来写px值IOS8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2...\,\description\:\移动端1px解决方案1.用小数来写px值IOS8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2...\,\words\:1055,\readTime\:\6 min read\},\coverPath\:\/assets/2022-05-14-21-19-43.png\,\coverPathBase\:\/assets/2022-05-14-21-19-43\},{\text\:\移动端css优化\,\link\:\/posts/2017/2017-6-6-css-ios-android\,\frontmatter\:{\title\:\移动端css优化\,\tag\:\css\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-20-47.png\,\base64\:\f3744e\,\tinyCover\:\/cover/2022-05-14-21-20-47.png\,\coverWidth\:736,\coverHeight\:1104,\coverPrimary\:716455,\coverSecondary\:\8e9baa\,\dir\:\/posts/2017\,\summary\:\ios 下定位的层如果有表单，在输入时键盘弹起，表单的光标不会跟随（系统bug） 解决办法：有表单数据尽量在页面完成，不用类似popup的浮层ios 下滑动不平滑html,body { -webkit-overflow-scrolling: touch;}ios 下表单的默认外观样式input select{ -webkit-appearance: none;}禁止ios 长按时不触发系统的...\,\description\:\ios 下定位的层如果有表单，在输入时键盘弹起，表单的光标不会跟随（系统bug） 解决办法：有表单数据尽量在页面完成，不用类似popup的浮层ios 下滑动不平滑html,body { -webkit-overflow-scrolling: touch;}ios 下表单的默认外观样式input select{ -webkit-appearance: none;}禁止ios 长按时不触发系统的...\,\words\:298,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-20-47.png\,\coverPathBase\:\/assets/2022-05-14-21-20-47\},{\text\:\什么是Sticky footers布局\,\link\:\/posts/2017/2017-6-6-css-sticky-footer\,\frontmatter\:{\title\:\什么是Sticky footers布局\,\tag\:\css\,\sticky footers\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-21-46.png\,\hot\:true,\base64\:\afc3d5\,\tinyCover\:\/cover/2022-05-14-21-21-46.png\,\coverWidth\:564,\coverHeight\:858,\coverPrimary\:\d7cdb8\,\coverSecondary\:\283247\,\dir\:\/posts/2017\,\summary\:\什么是Sticky footers布局在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。固定高度的实现方式html @Artielycss.sticker { height: auto; padding: 0 0 40px 0; ...\,\description\:\什么是Sticky footers布局在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。固定高度的实现方式html @Artielycss.sticker { height: auto; padding: 0 0 40px 0; ...\,\words\:235,\readTime\:\2 min read\},\coverPath\:\/assets/2022-05-14-21-21-46.png\,\coverPathBase\:\/assets/2022-05-14-21-21-46\},{\text\:\git 版本管理\,\link\:\/posts/2017/2017-6-6-git\,\frontmatter\:{\title\:\git 版本管理\,\tag\:\git\,\author\:\Artiely\,\date\:\2017-06-06\,\cover\:\/2022-05-14-21-22-32.png\,\base64\:\282c3e\,\tinyCover\:\/cover/2022-05-14-21-22-32.png\,\coverWidth\:736,\coverHeight\:981,\coverPrimary\:\163f3f\,\coverSecondary\:\e9c0c0\,\dir\:\/posts/2017\,\summary\:\git 版本管理下载地址配置 git 用户和邮箱$ git config --global user.name \\\你的github用户名\\\$ git config --global user.email \\\你的github邮箱\\\不配置用户名和邮箱的话无法提交,因为git不知道你是谁查看配置$ git config --global user.name$ git config --global us...\,\description\:\git 版本管理下载地址配置 git 用户和邮箱$ git config --global user.name \\\你的github用户名\\\$ git config --global user.email \\\你的github邮箱\\\不配置用户名和邮箱的话无法提交,因为git不知道你是谁查看配置$ git config --global user.name$ git config --global us...\,\words\:720,\readTime\:\4 min read\},\coverPath\:\/assets/2022-05-14-21-22-32.png\,\coverPathBase\:\/assets/2022-05-14-21-22-32\}},\locales\:{},\scrollOffset\:134,\cleanUrls\:false});/script> /body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]