From 888156a2a83178b966acd46d59caedfa873f0f1c Mon Sep 17 00:00:00 2001 From: cosyer Date: Thu, 19 Nov 2020 20:31:26 +0800 Subject: [PATCH] Site updated: 2020-11-19 20:31:23 --- ...mmit Message\350\247\204\350\214\203.html" | 2 +- ...346\226\260\347\211\271\346\200\247 .html" | 2 +- 2019/ES6Proxy.html | 2 +- .../ES6Reflect\345\257\271\350\261\241.html" | 2 +- 2019/EventLoop.html | 2 +- ...\346\225\260\345\237\272\347\241\200.html" | 2 +- ...\346\200\201\350\265\204\346\272\220.html" | 2 +- "2019/PWA\346\211\213\350\256\260.html" | 2 +- ...\345\206\263\345\212\236\346\263\225.html" | 2 +- ...\344\271\210\345\214\272\345\210\253.html" | 2 +- ...\345\222\214\345\221\275\344\273\244.html" | 2 +- ...\350\256\241\346\250\241\345\274\217.html" | 2 +- ...\350\247\201\345\221\275\344\273\244.html" | 2 +- ...\345\206\263\345\212\236\346\263\225.html" | 19 +- "2019/npm\346\200\273\347\273\223.html" | 2 +- ...\344\275\234\347\224\250\345\237\237.html" | 2 +- 2019/use strict.html | 2 +- ...\344\271\240\347\254\224\350\256\260.html" | 2 +- 2019/webpack.html | 2 +- ...\345\272\267\346\214\207\346\240\207.html" | 2 +- ...263\344\272\216requestAnimationFrame.html" | 2 +- ...\345\214\226\345\217\221\345\261\225.html" | 2 +- ...\345\261\225\346\211\251\345\261\225.html" | 2 +- ...\351\230\205\346\250\241\345\274\217.html" | 2 +- ...\347\232\204\345\273\272\350\256\256.html" | 2 +- ...\347\232\204\346\231\272\346\205\247.html" | 2 +- ...\347\216\207\345\267\245\344\275\234.html" | 2 +- ...\351\242\230\346\200\273\347\273\223.html" | 2 +- ...\205\245\344\272\206\350\247\243HTTP.html" | 2 +- ...45\344\272\206\350\247\243instanceof.html" | 2 +- ...\345\236\213\350\275\254\346\215\242.html" | 2 +- ...\347\232\204\347\273\247\346\211\277.html" | 2 +- ...\346\210\277\351\241\273\347\237\245.html" | 2 +- ...\347\273\264\347\224\237\347\264\240.html" | 2 +- ...7\347\262\276\351\200\232React Hooks.html" | 18 +- ...\344\273\266\351\200\232\350\256\257.html" | 2 +- 2020/Docker.html | 2 +- ...\351\235\242\351\200\232\347\237\245.html" | 2 +- ...\347\224\237\344\273\200\344\271\210.html" | 2 +- 2020/Hybrid.html | 2 +- ...\346\226\207\346\226\207\346\241\243.html" | 2 +- 2020/Mac iTerm2 + oh-my-zsh.html | 2 +- 2020/Nginx.html | 2 +- ...\351\227\250\346\225\231\347\250\213.html" | 2 +- ...\344\273\244\350\257\246\350\247\243.html" | 2 +- ...\347\232\204\345\214\272\345\210\253.html" | 26 +- ...\347\232\204\345\260\201\350\243\205.html" | 2 +- ...344\271\240&\345\256\236\350\267\265.html" | 2 +- ...200\201redis\351\203\250\347\275\262.html" | 2 +- ...\344\275\215\350\277\220\347\256\227.html" | 2 +- "2020/react SSR\346\225\231\347\250\213.html" | 2 +- ...react-native\345\260\217\347\273\223.html" | 2 +- ...00(React\347\233\270\345\205\263API).html" | 2 +- ...45\210\227\344\272\214(React Render).html" | 2 +- 2020/useful-website.html | 25 +- 2020/vueInterview.html | 2 +- ...windows\345\256\211\350\243\205mysql.html" | 2 +- ...\345\261\200\346\200\273\347\273\223.html" | 2 +- ...345\237\272\347\241\200\347\257\207).html" | 2 +- ...350\277\233\351\230\266\347\257\207).html" | 2 +- ...\345\274\217\346\200\273\347\273\223.html" | 2 +- ...\344\274\240\344\274\230\345\214\226.html" | 2 +- ...\344\275\277\347\224\250 CSS Modules.html" | 2 +- "2020/\345\256\236\347\216\260compose.html" | 2 +- ...\346\207\222\345\212\240\350\275\275.html" | 2 +- ...\345\255\227\350\257\201\344\271\246.html" | 2 +- ...\347\232\204\345\210\206\347\261\273.html" | 2 +- ...\351\242\230\347\273\203\344\271\240.html" | 2 +- ...\351\230\205\346\250\241\345\274\217.html" | 2 +- ...04TypeScript\346\225\231\347\250\213.html" | 2 +- ...\351\252\214\345\210\206\344\272\253.html" | 2 +- ...\351\242\230\351\233\206\351\224\246.html" | 2 +- ...\345\274\272\347\211\271\346\225\210.html" | 2 +- ...5\222\214DOM\346\217\255\345\257\206.html" | 2 +- ...\230\257JSON\345\220\227\357\274\237.html" | 2 +- about/index.html | 2 +- "angular7\350\257\246\350\247\243.html" | 2 +- archives/2018/04/index.html | 2 +- archives/2018/06/index.html | 2 +- archives/2018/06/page/2/index.html | 4 +- archives/2018/06/page/3/index.html | 4 +- archives/2018/07/index.html | 2 +- archives/2018/08/index.html | 2 +- archives/2018/09/index.html | 2 +- archives/2018/10/index.html | 2 +- archives/2018/11/index.html | 2 +- archives/2018/12/index.html | 2 +- archives/2018/index.html | 2 +- archives/2018/page/2/index.html | 2 +- archives/2018/page/3/index.html | 2 +- archives/2018/page/4/index.html | 2 +- archives/2018/page/5/index.html | 2 +- archives/2018/page/6/index.html | 2 +- archives/2018/page/7/index.html | 4 +- archives/2018/page/8/index.html | 4 +- archives/2018/page/9/index.html | 2 +- archives/2019/02/index.html | 2 +- archives/2019/03/index.html | 2 +- archives/2019/04/index.html | 4 +- archives/2019/05/index.html | 2 +- archives/2019/06/index.html | 2 +- archives/2019/07/index.html | 2 +- archives/2019/08/index.html | 2 +- archives/2019/09/index.html | 2 +- archives/2019/11/index.html | 2 +- archives/2019/12/index.html | 2 +- archives/2019/index.html | 2 +- archives/2019/page/2/index.html | 2 +- archives/2019/page/3/index.html | 4 +- archives/2019/page/4/index.html | 2 +- archives/2020/03/index.html | 2 +- archives/2020/04/index.html | 2 +- archives/2020/05/index.html | 6 +- archives/2020/06/index.html | 2 +- archives/2020/07/index.html | 2 +- archives/2020/09/index.html | 2 +- archives/2020/10/index.html | 4 +- archives/2020/11/index.html | 2 +- archives/2020/index.html | 4 +- archives/2020/page/2/index.html | 2 +- archives/2020/page/3/index.html | 6 +- archives/2020/page/4/index.html | 2 +- archives/index.html | 4 +- archives/page/10/index.html | 2 +- archives/page/11/index.html | 2 +- archives/page/12/index.html | 2 +- archives/page/13/index.html | 2 +- archives/page/14/index.html | 2 +- archives/page/15/index.html | 4 +- archives/page/16/index.html | 4 +- archives/page/2/index.html | 2 +- archives/page/3/index.html | 6 +- archives/page/4/index.html | 2 +- archives/page/5/index.html | 2 +- archives/page/6/index.html | 2 +- archives/page/7/index.html | 4 +- archives/page/8/index.html | 2 +- archives/page/9/index.html | 2 +- ...\204.babelrc\351\205\215\347\275\256.html" | 2 +- baidusitemap.xml | 194 ++--- beforehz.html | 2 +- bubble.html | 2 +- categories/CSS/index.html | 2 +- categories/JS/index.html | 26 +- categories/JS/page/2/index.html | 2 +- categories/JS/page/3/index.html | 2 +- categories/JS/page/4/index.html | 2 +- categories/JS/page/5/index.html | 2 +- categories/JS/page/6/index.html | 2 +- categories/Ng/index.html | 2 +- categories/Node/index.html | 2 +- categories/PHP/index.html | 2 +- categories/React/index.html | 12 +- categories/Vue/index.html | 2 +- categories/index.html | 2 +- .../\345\267\245\345\205\267/index.html" | 19 +- .../page/2/index.html" | 13 +- .../\346\235\202\350\260\210/index.html" | 2 +- .../page/2/index.html" | 2 +- .../\347\237\245\350\257\206/index.html" | 2 +- .../page/2/index.html" | 2 +- .../page/3/index.html" | 2 +- .../page/4/index.html" | 12 +- ...\345\217\221\346\214\207\345\215\227.html" | 2 +- ...\347\232\204\345\272\224\347\224\250.html" | 2 +- closure.html | 2 +- console.html | 2 +- ...\344\273\244\350\257\246\350\247\243.html" | 2 +- context.html | 2 +- contextapi.html | 2 +- createPromise.html | 2 +- ...\344\275\225\345\233\276\345\275\242.html" | 2 +- ...\346\250\252\347\253\226\345\261\217.html" | 2 +- destory.html | 2 +- es6export.html | 2 +- es6function.html | 2 +- es6generator.html | 2 +- es7async.html | 2 +- executionOrder.html | 2 +- flex.html | 2 +- "flutter\345\205\245\351\227\250.html" | 2 +- forloop.html | 2 +- google3b224456377b4f10.html | 2 +- guestbook/index.html | 2 +- hello-world.html | 2 +- helloPHP.html | 2 +- houseprice.html | 2 +- ...\345\257\206\351\200\232\344\277\241.html" | 2 +- ...\346\261\202\346\246\202\350\277\260.html" | 2 +- index.html | 581 +++++++------- interview.html | 2 +- "java -jar\344\270\216nohup.html" | 2 +- jssummary.html | 2 +- jsthis.html | 2 +- ...\346\237\257\351\207\214\345\214\226.html" | 2 +- ...\347\216\260\347\273\247\346\211\277.html" | 2 +- ...\346\215\256\347\261\273\345\236\213.html" | 2 +- ...\351\227\256\346\235\245\346\272\220.html" | 2 +- links/index.html | 2 +- markdownGrammar.html | 2 +- mobx.html | 2 +- page/10/index.html | 490 ++++++------ page/11/index.html | 32 +- page/12/index.html | 2 +- page/13/index.html | 2 +- page/14/index.html | 2 +- page/15/index.html | 2 +- page/16/index.html | 2 +- page/2/index.html | 504 ++++++------ page/3/index.html | 442 ++++++----- page/4/index.html | 721 ++++++++---------- page/5/index.html | 481 +++++++----- page/6/index.html | 336 ++++---- page/7/index.html | 464 ++++++----- page/8/index.html | 443 ++++++----- page/9/index.html | 486 ++++++------ prototype.html | 2 +- react16.html | 2 +- reactInterview.html | 23 +- ...\351\234\200\345\212\240\350\275\275.html" | 2 +- reduxstate.html | 2 +- responsive.html | 2 +- rss2.xml | 2 +- sass.html | 2 +- ...22\214stylus\345\214\272\345\210\253.html" | 2 +- scienceInternet.html | 2 +- scope.html | 2 +- search.json | 2 +- seo.html | 2 +- sitemap.xml | 70 +- smallknowledge.html | 22 +- sort.html | 2 +- spa.html | 2 +- storage.html | 2 +- tags/Java/index.html | 2 +- tags/Less/index.html | 2 +- tags/NodeJS/index.html | 2 +- tags/PHP/index.html | 2 +- tags/Promise/index.html | 2 +- tags/Sass/index.html | 2 +- tags/Stylus/index.html | 2 +- tags/angular/index.html | 2 +- tags/es6/index.html | 2 +- tags/flutter/index.html | 2 +- tags/git/index.html | 2 +- tags/http/index.html | 2 +- tags/index.html | 2 +- tags/markdown/index.html | 2 +- tags/mysql/index.html | 2 +- tags/react/index.html | 10 +- tags/react/page/2/index.html | 12 +- tags/redux/index.html | 2 +- tags/shell/index.html | 2 +- tags/typescript/index.html | 2 +- tags/vue/index.html | 2 +- .../index.html" | 2 +- "tags/\344\274\230\345\214\226/index.html" | 2 +- .../index.html" | 2 +- .../index.html" | 2 +- "tags/\345\211\215\347\253\257/index.html" | 19 +- .../index.html" | 2 +- "tags/\345\220\220\346\247\275/index.html" | 2 +- .../index.html" | 2 +- "tags/\345\267\245\345\205\267/index.html" | 13 +- "tags/\345\270\203\345\261\200/index.html" | 2 +- .../index.html" | 18 +- "tags/\346\210\277\344\273\267/index.html" | 2 +- "tags/\346\211\223\345\214\205/index.html" | 2 +- "tags/\346\216\222\345\272\217/index.html" | 2 +- .../index.html" | 2 +- "tags/\346\225\264\347\220\206/index.html" | 2 +- .../page/2/index.html" | 2 +- "tags/\346\234\252\347\237\245/index.html" | 2 +- "tags/\346\235\202\350\260\210/index.html" | 2 +- .../page/2/index.html" | 2 +- .../index.html" | 2 +- "tags/\346\265\213\350\257\225/index.html" | 2 +- .../index.html" | 2 +- .../index.html" | 2 +- .../page/2/index.html" | 2 +- "tags/\346\272\220\347\240\201/index.html" | 2 +- .../index.html" | 2 +- "tags/\347\237\245\350\257\206/index.html" | 2 +- .../page/2/index.html" | 12 +- "tags/\347\256\227\346\263\225/index.html" | 2 +- .../index.html" | 2 +- "tags/\350\256\262\345\272\247/index.html" | 2 +- .../index.html" | 2 +- "tags/\351\227\255\345\214\205/index.html" | 2 +- "tags/\351\235\242\350\257\225/index.html" | 12 +- ...\346\263\250\346\204\217\347\202\271.html" | 2 +- ...\350\247\243\344\270\200\344\270\213.html" | 2 +- ...\345\245\275\345\237\272\345\217\213.html" | 2 +- ...\345\274\217\350\247\243\350\257\273.html" | 2 +- ...\344\270\252\345\234\260\346\226\271.html" | 2 +- ...\344\270\223\344\270\232\347\211\210.html" | 2 +- ...\345\222\214\350\212\202\346\265\201.html" | 2 +- ...\345\267\245\347\250\213\345\214\226.html" | 2 +- ...\350\203\275\344\274\230\345\214\226.html" | 2 +- ...211\213\345\256\236\347\216\260redux.html" | 2 +- ...\347\202\271\346\212\200\346\234\257.html" | 2 +- ...\213angular7\350\256\262\345\272\247.html" | 2 +- ...\345\256\236\347\216\260JSON.parse().html" | 2 +- ...\344\271\240\350\203\275\345\212\233.html" | 2 +- "\345\256\236\347\216\260jsonp.html" | 2 +- ...\347\247\215\346\226\271\346\263\225.html" | 2 +- ...\347\253\257\350\267\257\347\224\261.html" | 2 +- ...\345\220\221\347\273\221\345\256\232.html" | 2 +- ...2\240\350\275\275\346\235\241loading.html" | 2 +- ...\351\235\242\350\257\225\351\242\230.html" | 2 +- ...\351\200\201\346\212\200\346\234\257.html" | 2 +- ...\345\210\231\346\200\273\347\273\223.html" | 2 +- ...\346\265\205\346\213\267\350\264\235.html" | 2 +- ...\351\242\230\346\200\273\347\273\223.html" | 2 +- ...\346\263\225\346\200\273\347\273\223.html" | 2 +- "\351\200\211\346\213\251.html" | 2 +- ...47\232\204JS\344\273\243\347\240\201.html" | 2 +- 317 files changed, 3112 insertions(+), 3051 deletions(-) diff --git "a/2019/Commit Message\350\247\204\350\214\203.html" "b/2019/Commit Message\350\247\204\350\214\203.html" index 4d607ec9f..e1d7bf59d 100644 --- "a/2019/Commit Message\350\247\204\350\214\203.html" +++ "b/2019/Commit Message\350\247\204\350\214\203.html" @@ -1149,7 +1149,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/ECMAScript 2016\343\200\2012017\343\200\2012018 \346\226\260\347\211\271\346\200\247 .html" "b/2019/ECMAScript 2016\343\200\2012017\343\200\2012018 \346\226\260\347\211\271\346\200\247 .html" index 26b5a3b0c..ac8191a25 100644 --- "a/2019/ECMAScript 2016\343\200\2012017\343\200\2012018 \346\226\260\347\211\271\346\200\247 .html" +++ "b/2019/ECMAScript 2016\343\200\2012017\343\200\2012018 \346\226\260\347\211\271\346\200\247 .html" @@ -978,7 +978,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2019/ES6Proxy.html b/2019/ES6Proxy.html index 6ef49346d..13fdd191c 100644 --- a/2019/ES6Proxy.html +++ b/2019/ES6Proxy.html @@ -999,7 +999,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/ES6Reflect\345\257\271\350\261\241.html" "b/2019/ES6Reflect\345\257\271\350\261\241.html" index 68794215f..6a46914a9 100644 --- "a/2019/ES6Reflect\345\257\271\350\261\241.html" +++ "b/2019/ES6Reflect\345\257\271\350\261\241.html" @@ -996,7 +996,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2019/EventLoop.html b/2019/EventLoop.html index 6e05c4fd5..ac038c113 100644 --- a/2019/EventLoop.html +++ b/2019/EventLoop.html @@ -1044,7 +1044,7 @@

参考
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/JS\345\207\275\346\225\260\345\237\272\347\241\200.html" "b/2019/JS\345\207\275\346\225\260\345\237\272\347\241\200.html" index fa6c628af..87d94ff9a 100644 --- "a/2019/JS\345\207\275\346\225\260\345\237\272\347\241\200.html" +++ "b/2019/JS\345\207\275\346\225\260\345\237\272\347\241\200.html" @@ -1018,7 +1018,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/NodeJSHttp\345\212\240\350\275\275\351\235\231\346\200\201\350\265\204\346\272\220.html" "b/2019/NodeJSHttp\345\212\240\350\275\275\351\235\231\346\200\201\350\265\204\346\272\220.html" index 5f7c67083..ef26194e5 100644 --- "a/2019/NodeJSHttp\345\212\240\350\275\275\351\235\231\346\200\201\350\265\204\346\272\220.html" +++ "b/2019/NodeJSHttp\345\212\240\350\275\275\351\235\231\346\200\201\350\265\204\346\272\220.html" @@ -953,7 +953,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/PWA\346\211\213\350\256\260.html" "b/2019/PWA\346\211\213\350\256\260.html" index f2e8ef632..33a08b755 100644 --- "a/2019/PWA\346\211\213\350\256\260.html" +++ "b/2019/PWA\346\211\213\350\256\260.html" @@ -1137,7 +1137,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/blur\344\272\213\344\273\266\344\270\216click\344\272\213\344\273\266\345\206\262\347\252\201\347\232\204\350\247\243\345\206\263\345\212\236\346\263\225.html" "b/2019/blur\344\272\213\344\273\266\344\270\216click\344\272\213\344\273\266\345\206\262\347\252\201\347\232\204\350\247\243\345\206\263\345\212\236\346\263\225.html" index a531828aa..195344625 100644 --- "a/2019/blur\344\272\213\344\273\266\344\270\216click\344\272\213\344\273\266\345\206\262\347\252\201\347\232\204\350\247\243\345\206\263\345\212\236\346\263\225.html" +++ "b/2019/blur\344\272\213\344\273\266\344\270\216click\344\272\213\344\273\266\345\206\262\347\252\201\347\232\204\350\247\243\345\206\263\345\212\236\346\263\225.html" @@ -960,7 +960,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/borderRadius\347\231\276\345\210\206\346\257\22450\345\222\214100\347\251\266\347\253\237\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253.html" "b/2019/borderRadius\347\231\276\345\210\206\346\257\22450\345\222\214100\347\251\266\347\253\237\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253.html" index ec5388084..14883b3da 100644 --- "a/2019/borderRadius\347\231\276\345\210\206\346\257\22450\345\222\214100\347\251\266\347\253\237\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253.html" +++ "b/2019/borderRadius\347\231\276\345\210\206\346\257\22450\345\222\214100\347\251\266\347\253\237\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253.html" @@ -954,7 +954,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/git\347\233\270\345\205\263\351\227\256\351\242\230\345\234\272\346\231\257\345\222\214\345\221\275\344\273\244.html" "b/2019/git\347\233\270\345\205\263\351\227\256\351\242\230\345\234\272\346\231\257\345\222\214\345\221\275\344\273\244.html" index 9b4000456..d2d34062f 100644 --- "a/2019/git\347\233\270\345\205\263\351\227\256\351\242\230\345\234\272\346\231\257\345\222\214\345\221\275\344\273\244.html" +++ "b/2019/git\347\233\270\345\205\263\351\227\256\351\242\230\345\234\272\346\231\257\345\222\214\345\221\275\344\273\244.html" @@ -1185,7 +1185,7 @@

参考
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/javascript\350\256\276\350\256\241\346\250\241\345\274\217.html" "b/2019/javascript\350\256\276\350\256\241\346\250\241\345\274\217.html" index 026c03ed5..711b51e96 100644 --- "a/2019/javascript\350\256\276\350\256\241\346\250\241\345\274\217.html" +++ "b/2019/javascript\350\256\276\350\256\241\346\250\241\345\274\217.html" @@ -1094,7 +1094,7 @@

总
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/linux\345\256\211\350\243\205mongodb\345\217\212\345\270\270\350\247\201\345\221\275\344\273\244.html" "b/2019/linux\345\256\211\350\243\205mongodb\345\217\212\345\270\270\350\247\201\345\221\275\344\273\244.html" index 9ae236662..60b383dc6 100644 --- "a/2019/linux\345\256\211\350\243\205mongodb\345\217\212\345\270\270\350\247\201\345\221\275\344\273\244.html" +++ "b/2019/linux\345\256\211\350\243\205mongodb\345\217\212\345\270\270\350\247\201\345\221\275\344\273\244.html" @@ -962,7 +962,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/macvscode\346\233\264\346\226\260\345\244\261\350\264\245\357\274\232Permissiondenied\350\247\243\345\206\263\345\212\236\346\263\225.html" "b/2019/macvscode\346\233\264\346\226\260\345\244\261\350\264\245\357\274\232Permissiondenied\350\247\243\345\206\263\345\212\236\346\263\225.html" index c7c20de66..f0540fa5a 100644 --- "a/2019/macvscode\346\233\264\346\226\260\345\244\261\350\264\245\357\274\232Permissiondenied\350\247\243\345\206\263\345\212\236\346\263\225.html" +++ "b/2019/macvscode\346\233\264\346\226\260\345\244\261\350\264\245\357\274\232Permissiondenied\350\247\243\345\206\263\345\212\236\346\263\225.html" @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

Blog

-
-
6月
-
26
+
+
11月
+
16
更新于
-
6月26
+
11月16
2020
@@ -523,7 +523,7 @@

macvscode更新失败：Permissi 字数统计： - 374 (字) + 520 (字) @@ -581,6 +581,7 @@ 

1
xattr -rc directory
+

重启电池smc

1
2
3
4
5
6
7
8
将 Mac 关机。
在内建键盘上，按住以下所有按键。Mac 可能会开机。
键盘左侧的 Control 
键盘左侧的 Option (Alt) 
键盘右侧的 Shift 
按住全部三个按键 7 秒钟，然后在不松开按键的情况下按住电源按钮。如果 Mac 处于开机状态，它将在您按住这些按键时关机。
继续按住全部四个按键 7 秒钟，然后松开这些按键。
等待几秒钟，然后按下电源按钮以将 Mac 开机。

@@ -612,7 +613,7 @@

本文标题:macvscode更新失败：Permissiondenied解决办法

文章作者:陈宇（cosyer）

发布时间:2019年04月09日 - 23:04

-

最后更新:2020年06月26日 - 01:06

+

最后更新:2020年11月16日 - 20:11

原始链接:http://mydearest.cn/2019/macvscode%E6%9B%B4%E6%96%B0%E5%A4%B1%E8%B4%A5%EF%BC%9APermissiondenied%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95.html

@@ -916,7 +917,7 @@

  1. 1. 场景 – mac vscode不能安装更新
  2. 2. 原因分析
  3. 3. 解决方案
  4. 4. 重新安装更新 完成😁
  5. 5. Mac版本下的Chrome，双击html文件打不开

+
  1. 1. 场景 – mac vscode不能安装更新
  2. 2. 原因分析
  3. 3. 解决方案
  4. 4. 重新安装更新 完成😁
  5. 5. Mac版本下的Chrome，双击html文件打不开
  6. 6. 重启电池smc

@@ -961,7 +962,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/npm\346\200\273\347\273\223.html" "b/2019/npm\346\200\273\347\273\223.html" index 771167a2c..3b9203669 100644 --- "a/2019/npm\346\200\273\347\273\223.html" +++ "b/2019/npm\346\200\273\347\273\223.html" @@ -1036,7 +1036,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/switch\347\232\204\345\235\227\347\272\247\344\275\234\347\224\250\345\237\237.html" "b/2019/switch\347\232\204\345\235\227\347\272\247\344\275\234\347\224\250\345\237\237.html" index 6ba55a36c..2868faf90 100644 --- "a/2019/switch\347\232\204\345\235\227\347\272\247\344\275\234\347\224\250\345\237\237.html" +++ "b/2019/switch\347\232\204\345\235\227\347\272\247\344\275\234\347\224\250\345\237\237.html" @@ -951,7 +951,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2019/use strict.html b/2019/use strict.html index 9b7c8fa4e..eea7b6728 100644 --- a/2019/use strict.html +++ b/2019/use strict.html @@ -987,7 +987,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/vuex\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/2019/vuex\345\255\246\344\271\240\347\254\224\350\256\260.html" index ac16095db..97cb6d772 100644 --- "a/2019/vuex\345\255\246\344\271\240\347\254\224\350\256\260.html" +++ "b/2019/vuex\345\255\246\344\271\240\347\254\224\350\256\260.html" @@ -1037,7 +1037,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2019/webpack.html b/2019/webpack.html index b8c0d4425..25faaf82f 100644 --- a/2019/webpack.html +++ b/2019/webpack.html @@ -1093,7 +1093,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\345\201\245\345\272\267\346\214\207\346\240\207.html" "b/2019/\345\201\245\345\272\267\346\214\207\346\240\207.html" index 6c2711b1d..3efdb6625 100644 --- "a/2019/\345\201\245\345\272\267\346\214\207\346\240\207.html" +++ "b/2019/\345\201\245\345\272\267\346\214\207\346\240\207.html" @@ -1020,7 +1020,7 @@

其他
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\345\205\263\344\272\216requestAnimationFrame.html" "b/2019/\345\205\263\344\272\216requestAnimationFrame.html" index d126c7816..efbfbaab8 100644 --- "a/2019/\345\205\263\344\272\216requestAnimationFrame.html" +++ "b/2019/\345\205\263\344\272\216requestAnimationFrame.html" @@ -979,7 +979,7 @@

5
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.html" "b/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.html" index 9d90dae8f..8542f101e 100644 --- "a/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.html" +++ "b/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.html" @@ -1071,7 +1071,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225\346\211\251\345\261\225.html" "b/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225\346\211\251\345\261\225.html" index 5c04e5357..05b532f3d 100644 --- "a/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225\346\211\251\345\261\225.html" +++ "b/2019/\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\345\217\221\345\261\225\346\211\251\345\261\225.html" @@ -970,7 +970,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" "b/2019/\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" index 636ac58a0..9f2250edf 100644 --- "a/2019/\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" +++ "b/2019/\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" @@ -918,7 +918,7 @@

事件机制

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/\346\210\220\344\270\272\344\274\230\347\247\200\347\250\213\345\272\217\345\221\230\347\232\204\345\273\272\350\256\256.html" "b/2019/\346\210\220\344\270\272\344\274\230\347\247\200\347\250\213\345\272\217\345\221\230\347\232\204\345\273\272\350\256\256.html" index 10cef1334..ea3858476 100644 --- "a/2019/\346\210\220\344\270\272\344\274\230\347\247\200\347\250\213\345\272\217\345\221\230\347\232\204\345\273\272\350\256\256.html" +++ "b/2019/\346\210\220\344\270\272\344\274\230\347\247\200\347\250\213\345\272\217\345\221\230\347\232\204\345\273\272\350\256\256.html" @@ -1047,7 +1047,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\346\217\220\351\227\256\347\232\204\346\231\272\346\205\247.html" "b/2019/\346\217\220\351\227\256\347\232\204\346\231\272\346\205\247.html" index 74614ffc2..6c420b135 100644 --- "a/2019/\346\217\220\351\227\256\347\232\204\346\231\272\346\205\247.html" +++ "b/2019/\346\217\220\351\227\256\347\232\204\346\231\272\346\205\247.html" @@ -978,7 +978,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\346\225\210\347\216\207\345\267\245\344\275\234.html" "b/2019/\346\225\210\347\216\207\345\267\245\344\275\234.html" index 3e3232ea2..281707127 100644 --- "a/2019/\346\225\210\347\216\207\345\267\245\344\275\234.html" +++ "b/2019/\346\225\210\347\216\207\345\267\245\344\275\234.html" @@ -974,7 +974,7 @@

效率工作

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\351\227\256\351\242\230\346\200\273\347\273\223.html" "b/2019/\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\351\227\256\351\242\230\346\200\273\347\273\223.html" index 9815936fe..7ab13ab96 100644 --- "a/2019/\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\351\227\256\351\242\230\346\200\273\347\273\223.html" +++ "b/2019/\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\351\227\256\351\242\230\346\200\273\347\273\223.html" @@ -997,7 +997,7 @@

浏览器兼容问题总结

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/\346\267\261\345\205\245\344\272\206\350\247\243HTTP.html" "b/2019/\346\267\261\345\205\245\344\272\206\350\247\243HTTP.html" index ae293305d..d6255bf50 100644 --- "a/2019/\346\267\261\345\205\245\344\272\206\350\247\243HTTP.html" +++ "b/2019/\346\267\261\345\205\245\344\272\206\350\247\243HTTP.html" @@ -1085,7 +1085,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\346\267\261\345\205\245\344\272\206\350\247\243instanceof.html" "b/2019/\346\267\261\345\205\245\344\272\206\350\247\243instanceof.html" index 1c0ee6011..f7819f9ce 100644 --- "a/2019/\346\267\261\345\205\245\344\272\206\350\247\243instanceof.html" +++ "b/2019/\346\267\261\345\205\245\344\272\206\350\247\243instanceof.html" @@ -981,7 +981,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\261\273\345\236\213\343\200\201\345\200\274\345\222\214\347\261\273\345\236\213\350\275\254\346\215\242.html" "b/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\261\273\345\236\213\343\200\201\345\200\274\345\222\214\347\261\273\345\236\213\350\275\254\346\215\242.html" index ab6e686d8..299e72e5f 100644 --- "a/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\261\273\345\236\213\343\200\201\345\200\274\345\222\214\347\261\273\345\236\213\350\275\254\346\215\242.html" +++ "b/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\261\273\345\236\213\343\200\201\345\200\274\345\222\214\347\261\273\345\236\213\350\275\254\346\215\242.html" @@ -1068,7 +1068,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\273\247\346\211\277.html" "b/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\273\247\346\211\277.html" index 68c13f6dd..957456f4b 100644 --- "a/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\273\247\346\211\277.html" +++ "b/2019/\346\267\261\345\205\245\347\220\206\350\247\243JS\347\232\204\347\273\247\346\211\277.html" @@ -980,7 +980,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\347\247\237\346\210\277\351\241\273\347\237\245.html" "b/2019/\347\247\237\346\210\277\351\241\273\347\237\245.html" index 92305517e..5e4ae499d 100644 --- "a/2019/\347\247\237\346\210\277\351\241\273\347\237\245.html" +++ "b/2019/\347\247\237\346\210\277\351\241\273\347\237\245.html" @@ -1157,7 +1157,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2019/\347\273\264\347\224\237\347\264\240.html" "b/2019/\347\273\264\347\224\237\347\264\240.html" index 011a7cf0e..569068627 100644 --- "a/2019/\347\273\264\347\224\237\347\264\240.html" +++ "b/2019/\347\273\264\347\224\237\347\264\240.html" @@ -965,7 +965,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/30\345\210\206\351\222\237\347\262\276\351\200\232React Hooks.html" "b/2020/30\345\210\206\351\222\237\347\262\276\351\200\232React Hooks.html" index 46def0931..b3b03f4eb 100644 --- "a/2020/30\345\210\206\351\222\237\347\262\276\351\200\232React Hooks.html" +++ "b/2020/30\345\210\206\351\222\237\347\262\276\351\200\232React Hooks.html" @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

Blog

-
+
11月
-
09
+
18
更新于
-
11月09
+
11月18
2020
@@ -523,7 +523,7 @@

30分钟精通React Hooks

字数统计： - 8,703 (字) + 8,708 (字) @@ -697,7 +697,7 @@ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const INCREASE = 'INCREASE'
const SET_FROZEN = 'SET_FROZEN'

const initialState = {
  count: 0,
  frozen: false
}

const CountApp = () => {
  const reducer = (state: any, action: any) => {
    switch (action.type) {
      case INCREASE:
        if (state.frozen) {
          return state
        }
        return {
          ...state,
          count: state.count + 1
        }

      case SET_FROZEN:
        return {
          ...state,
          frozen: action.frozen
        }
      default:
        return state
    }
  }
  const [state, dispath] = useReducer(reducer, initialState)

  useEffect(() => {
    dispath({ type: INCREASE })
    dispath({ type: SET_FROZEN, frozen: true })
    dispath({ type: INCREASE })
  }, [])

  return <p>current count: {state.count}</p>
}

如何用useState实现useReducer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const CountApp = () => {
  const [state, setState] = useState({
    count: 0,
    frozen: false,
  });

  const increase = () => {
    setState(prevState => {
      if (prevState.frozen) {
        return prevState;
      }
      return {
        ...prevState,
        count: state.count + 1,
      };
    });
  };

  const setFrozen = () => {
    setState(prevState => {
      return {
        ...prevState,
        frozen: true,
      };
    });
  };

  useEffect(() => {
    increase();
    setFrozen();
    increase();
  }, []);

  return <p>current count: {state.count}</p>;
  // render：1
};

useReducer 和 useState 相比，优势在于可以将使用 reducer 将一些逻辑进行抽离，进行集中化管理。

-

useCallback

useCallback 可以理解为将函数进行了缓存，它接收一个回调函数和一个依赖数组，只有当依赖数组中的值发生改变时，该回调函数才会更新。 +

useCallback(useMemo返回函数)

useCallback 可以理解为将函数进行了缓存，它接收一个回调函数和一个依赖数组，只有当依赖数组中的值发生改变时，该回调函数才会更新。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function UseCallbackDemo() {
  const [count, setCount] = useState(0)

  const handleResize = useCallback(() => {
    console.log(`the current count is: ${count}`)
  }, [count])

  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [handleResize])

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        click
      </button>
      <p>current count: {count}</p>
    </div>
  )
}
该例子中，当改变 count 后，然后改变浏览器窗口大小，可以获取到最新的 count 。如果传入的依赖为 []，handleResize 不会更新，则改变浏览器窗口时， count 的值始终为 0 。

useMemo

useMemo 对值进行了缓存，与 useCallback 类似，接收一个创建值的函数和一个依赖数组，它仅会在某个依赖项改变时才重新计算 memoized 值，这种优化有助于避免在每次渲染时都进行高开销的计算。

@@ -823,7 +823,7 @@

总结本文标题:30分钟精通React Hooks

文章作者:陈宇（cosyer）

发布时间:2020年05月12日 - 11:05

-

最后更新:2020年11月09日 - 20:11

+

最后更新:2020年11月18日 - 14:11

原始链接:http://mydearest.cn/2020/30%E5%88%86%E9%92%9F%E7%B2%BE%E9%80%9AReact%20Hooks.html

@@ -1127,7 +1127,7 @@

总结
  1. 1. React为什么要搞一个Hooks？
    1. 1.1. 渲染属性
      1. 1.1.1. 其他🌰
      2. 1.1.2. 缺点
    2. 1.2. 高阶组件
      1. 1.2.1. 缺点
  2. 2. State Hooks
    1. 2.1. 状态组件
    2. 2.2. hooks改造
    3. 2.3. 组件有多个状态值
    4. 2.4. react是怎么保证多个useState的相互独立的？
  3. 3. Effect Hooks
    1. 3.1. useEffect做了什么？
    2. 3.2. useEffect怎么解绑一些副作用？
    3. 3.3. 为什么要让副作用函数每次组件更新都执行一遍？
    4. 3.4. 怎么跳过一些不必要的副作用函数？
  4. 4. 怎么写自定义的Effect Hooks?
    1. 4.1. useProfile 使用 Hooks 实现 API 请求
    2. 4.2. useInput 使用 Hooks 实现 input 输入逻辑
  5. 5. useContext
  6. 6. useReducer
    1. 6.1. 处理 state 有相互依赖的场景
    2. 6.2. 如何用useState实现useReducer
  7. 7. useCallback
  8. 8. useMemo
  9. 9. useRef
  10. 10. useImperativeHandle
  11. 11. useLayoutEffect
  12. 12. useDebugValue
  13. 13. hooks中的坑
  14. 14. useEffect依赖数组深入
  15. 15. hooks实现计时器
  16. 16. useMemo、useCallback、useEffect的区别
  17. 17. 仓库代码
  18. 18. 源码解析
  19. 19. 总结

+
  1. 1. React为什么要搞一个Hooks？
    1. 1.1. 渲染属性
      1. 1.1.1. 其他🌰
      2. 1.1.2. 缺点
    2. 1.2. 高阶组件
      1. 1.2.1. 缺点
  2. 2. State Hooks
    1. 2.1. 状态组件
    2. 2.2. hooks改造
    3. 2.3. 组件有多个状态值
    4. 2.4. react是怎么保证多个useState的相互独立的？
  3. 3. Effect Hooks
    1. 3.1. useEffect做了什么？
    2. 3.2. useEffect怎么解绑一些副作用？
    3. 3.3. 为什么要让副作用函数每次组件更新都执行一遍？
    4. 3.4. 怎么跳过一些不必要的副作用函数？
  4. 4. 怎么写自定义的Effect Hooks?
    1. 4.1. useProfile 使用 Hooks 实现 API 请求
    2. 4.2. useInput 使用 Hooks 实现 input 输入逻辑
  5. 5. useContext
  6. 6. useReducer
    1. 6.1. 处理 state 有相互依赖的场景
    2. 6.2. 如何用useState实现useReducer
  7. 7. useCallback(useMemo返回函数)
  8. 8. useMemo
  9. 9. useRef
  10. 10. useImperativeHandle
  11. 11. useLayoutEffect
  12. 12. useDebugValue
  13. 13. hooks中的坑
  14. 14. useEffect依赖数组深入
  15. 15. hooks实现计时器
  16. 16. useMemo、useCallback、useEffect的区别
  17. 17. 仓库代码
  18. 18. 源码解析
  19. 19. 总结
@@ -1172,7 +1172,7 @@

总结
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/Angular\347\273\204\344\273\266\351\200\232\350\256\257.html" "b/2020/Angular\347\273\204\344\273\266\351\200\232\350\256\257.html" index 1a6f9f855..fc582d7c2 100644 --- "a/2020/Angular\347\273\204\344\273\266\351\200\232\350\256\257.html" +++ "b/2020/Angular\347\273\204\344\273\266\351\200\232\350\256\257.html" @@ -983,7 +983,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2020/Docker.html b/2020/Docker.html index 6102b1d7e..075651de2 100644 --- a/2020/Docker.html +++ b/2020/Docker.html @@ -1146,7 +1146,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/HTML5\344\270\255\347\232\204Web Notification\346\241\214\351\235\242\351\200\232\347\237\245.html" "b/2020/HTML5\344\270\255\347\232\204Web Notification\346\241\214\351\235\242\351\200\232\347\237\245.html" index f671837eb..a0721dbfa 100644 --- "a/2020/HTML5\344\270\255\347\232\204Web Notification\346\241\214\351\235\242\351\200\232\347\237\245.html" +++ "b/2020/HTML5\344\270\255\347\232\204Web Notification\346\241\214\351\235\242\351\200\232\347\237\245.html" @@ -992,7 +992,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/HTML\344\270\255p\346\240\207\347\255\276\344\270\255\346\217\222\345\205\245div\346\240\207\347\255\276\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210.html" "b/2020/HTML\344\270\255p\346\240\207\347\255\276\344\270\255\346\217\222\345\205\245div\346\240\207\347\255\276\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210.html" index bcae00d95..dd8b0d4f6 100644 --- "a/2020/HTML\344\270\255p\346\240\207\347\255\276\344\270\255\346\217\222\345\205\245div\346\240\207\347\255\276\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210.html" +++ "b/2020/HTML\344\270\255p\346\240\207\347\255\276\344\270\255\346\217\222\345\205\245div\346\240\207\347\255\276\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210.html" @@ -933,7 +933,7 @@

HTML中p标签中插入div标签
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git a/2020/Hybrid.html b/2020/Hybrid.html index 85a1188bf..0621a1365 100644 --- a/2020/Hybrid.html +++ b/2020/Hybrid.html @@ -1024,7 +1024,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/Immer\344\270\255\346\226\207\346\226\207\346\241\243.html" "b/2020/Immer\344\270\255\346\226\207\346\226\207\346\241\243.html" index a599643f1..e654db6c7 100644 --- "a/2020/Immer\344\270\255\346\226\207\346\226\207\346\241\243.html" +++ "b/2020/Immer\344\270\255\346\226\207\346\226\207\346\241\243.html" @@ -1067,7 +1067,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2020/Mac iTerm2 + oh-my-zsh.html b/2020/Mac iTerm2 + oh-my-zsh.html index 30b35bcd9..2f88f787e 100644 --- a/2020/Mac iTerm2 + oh-my-zsh.html +++ b/2020/Mac iTerm2 + oh-my-zsh.html @@ -965,7 +965,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/2020/Nginx.html b/2020/Nginx.html index 647933362..cf670d673 100644 --- a/2020/Nginx.html +++ b/2020/Nginx.html @@ -1057,7 +1057,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/Shell\345\205\245\351\227\250\346\225\231\347\250\213.html" "b/2020/Shell\345\205\245\351\227\250\346\225\231\347\250\213.html" index 49bdf6aa3..a8b10b8ef 100644 --- "a/2020/Shell\345\205\245\351\227\250\346\225\231\347\250\213.html" +++ "b/2020/Shell\345\205\245\351\227\250\346\225\231\347\250\213.html" @@ -1701,7 +1701,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/TAR\345\221\275\344\273\244\350\257\246\350\247\243.html" "b/2020/TAR\345\221\275\344\273\244\350\257\246\350\247\243.html" index e5c802a01..cefb2d3b3 100644 --- "a/2020/TAR\345\221\275\344\273\244\350\257\246\350\247\243.html" +++ "b/2020/TAR\345\221\275\344\273\244\350\257\246\350\247\243.html" @@ -965,7 +965,7 @@

总结
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/TypeScript \344\270\255\357\274\214interface \345\222\214 type \347\232\204\345\214\272\345\210\253.html" "b/2020/TypeScript \344\270\255\357\274\214interface \345\222\214 type \347\232\204\345\214\272\345\210\253.html" index 6d1262ea5..0080e4a2a 100644 --- "a/2020/TypeScript \344\270\255\357\274\214interface \345\222\214 type \347\232\204\345\214\272\345\210\253.html" +++ "b/2020/TypeScript \344\270\255\357\274\214interface \345\222\214 type \347\232\204\345\214\272\345\210\253.html" @@ -132,14 +132,14 @@ - + - + - + @@ -413,12 +413,12 @@

Blog

-
-
5月
-
18
+
+
11月
+
13
更新于
-
5月18
+
11月13
2020
@@ -523,7 +523,7 @@

TypeScript 中，interface 和 t 字数统计： - 344 (字) + 432 (字) @@ -560,7 +560,11 @@

TypeScript 中，interface 和 t -

在 TypeScript 中，interface 和 type 主要用于类型的声明，它们的相同点以及区别如下：

+
+

interface是接口，type是类型，本身就是两个概念。只是碰巧表现上比较相似。希望定义一个变量类型，就用type，如果希望是能够继承并约束的，就 +用interface。如果你不知道该用哪个，说明你只是想定义一个类型而非接口，所以应该用type。

+
+

在 TypeScript 中，interface 和 type 主要用于类型的声明，它们的相同点以及区别如下：

相同点

都可以描述一个对象或者函数

1
2
3
4
5
6
7
8
9
/* interface */
interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): string
}
@@ -601,7 +605,7 @@

TypeScript 中，interface 和 type 的区别

文章作者:陈宇（cosyer）

发布时间:2020年05月18日 - 10:05

-

最后更新:2020年05月18日 - 23:05

+

最后更新:2020年11月13日 - 08:11

原始链接:http://mydearest.cn/2020/TypeScript%20%E4%B8%AD%EF%BC%8Cinterface%20%E5%92%8C%20type%20%E7%9A%84%E5%8C%BA%E5%88%AB.html

@@ -950,7 +954,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/Vue\344\270\255axios\347\232\204\345\260\201\350\243\205.html" "b/2020/Vue\344\270\255axios\347\232\204\345\260\201\350\243\205.html" index 8eadc7ec3..1acc1a766 100644 --- "a/2020/Vue\344\270\255axios\347\232\204\345\260\201\350\243\205.html" +++ "b/2020/Vue\344\270\255axios\347\232\204\345\260\201\350\243\205.html" @@ -993,7 +993,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/XSS\345\255\246\344\271\240&\345\256\236\350\267\265.html" "b/2020/XSS\345\255\246\344\271\240&\345\256\236\350\267\265.html" index 795ac4e60..a0ec6f1a4 100644 --- "a/2020/XSS\345\255\246\344\271\240&\345\256\236\350\267\265.html" +++ "b/2020/XSS\345\255\246\344\271\240&\345\256\236\350\267\265.html" @@ -976,7 +976,7 @@

防护
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/elasticsearch\343\200\201redis\351\203\250\347\275\262.html" "b/2020/elasticsearch\343\200\201redis\351\203\250\347\275\262.html" index 8dee94641..a778cdb45 100644 --- "a/2020/elasticsearch\343\200\201redis\351\203\250\347\275\262.html" +++ "b/2020/elasticsearch\343\200\201redis\351\203\250\347\275\262.html" @@ -957,7 +957,7 @@

nginx

<
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2020/js\344\272\214\350\277\233\345\210\266\345\222\214\344\275\215\350\277\220\347\256\227.html" "b/2020/js\344\272\214\350\277\233\345\210\266\345\222\214\344\275\215\350\277\220\347\256\227.html" index df416ab3c..75f767909 100644 --- "a/2020/js\344\272\214\350\277\233\345\210\266\345\222\214\344\275\215\350\277\220\347\256\227.html" +++ "b/2020/js\344\272\214\350\277\233\345\210\266\345\222\214\344\275\215\350\277\220\347\256\227.html" @@ -1048,7 +1048,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/react SSR\346\225\231\347\250\213.html" "b/2020/react SSR\346\225\231\347\250\213.html" index 65f9882b8..0230d2662 100644 --- "a/2020/react SSR\346\225\231\347\250\213.html" +++ "b/2020/react SSR\346\225\231\347\250\213.html" @@ -1020,7 +1020,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/react-native\345\260\217\347\273\223.html" "b/2020/react-native\345\260\217\347\273\223.html" index c5443fff4..32a965b5f 100644 --- "a/2020/react-native\345\260\217\347\273\223.html" +++ "b/2020/react-native\345\260\217\347\273\223.html" @@ -975,7 +975,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git "a/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\270\200(React\347\233\270\345\205\263API).html" "b/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\270\200(React\347\233\270\345\205\263API).html" index fdcede2c3..92fc6cdc6 100644 --- "a/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\270\200(React\347\233\270\345\205\263API).html" +++ "b/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\270\200(React\347\233\270\345\205\263API).html" @@ -1088,7 +1088,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git "a/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\272\214(React Render).html" "b/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\272\214(React Render).html" index 7f7786a95..27e2417f6 100644 --- "a/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\272\214(React Render).html" +++ "b/2020/react\346\272\220\347\240\201\350\247\243\346\236\220\347\263\273\345\210\227\344\272\214(React Render).html" @@ -977,7 +977,7 @@

Fiber

<
- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git a/2020/useful-website.html b/2020/useful-website.html index 685da5761..b6caa6176 100644 --- a/2020/useful-website.html +++ b/2020/useful-website.html @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

Blog

-
+
11月
-
04
+
17
更新于
-
11月04
+
11月17
2020
@@ -523,7 +523,7 @@

收集有用的网站

字数统计： - 67 (字) + 127 (字) @@ -601,6 +601,15 @@

ps

+

神曲

    +
  • 拔剑神曲 GC-βίος
    • +
  • 核爆神曲 AZ-aLIEz MKAlieZ
    • +
  • 变身神曲 巨人-at’aek ON taitn
    • +
  • 爆衣神曲 kill la kill-Before my body is dry
    • +
  • 断剑神曲 Perfect Time
    • +
  • 反击神曲 AZ-Keep on keeping on
    • +
  • 窒息神曲 AZ-BRE@TH//LESS
@@ -633,7 +642,7 @@

ps

@@ -982,7 +991,7 @@

ps

- + 阅读全文 »
@@ -2268,7 +2249,7 @@

+
8月
31
@@ -2286,8 +2267,8 @@

- @@ -2302,7 +2283,7 @@

- +

-

+

@@ -2333,8 +2314,8 @@

发表于 -

@@ -2418,122 +2399,20 @@

-

概念

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢 -的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。

-

设计原则（5个）

S – Single Responsibility Principle 单一职责原则

    -
  • 一个程序只做好一件事
    • -
  • 如果功能过于复杂就拆分开，每个部分保持独立
    • -
-

O – OpenClosed Principle 开放/封闭原则

    -
  • 对扩展开放，对修改封闭
    • -
  • 增加需求时，扩展新代码，而非修改已有代码
    • -
-

L – Liskov Substitution Principle 里氏替换原则

    -
  • 子类能覆盖父类
    • -
  • 父类能出现的地方子类就能出现
    • -
-

I – Interface Segregation Principle 接口隔离原则

    -
  • 保持接口的单一独立
    • -
  • 类似单一职责原则，这里更关注接口
    • -
-

D – Dependency Inversion Principle 依赖倒转原则

    -
  • 面向接口编程，依赖于抽象而不依赖于具
    • -
  • 使用方只关注接口而不关注具体类的实现
    • -
-

设计模式的类型

如果从作用上来划分，JavaScript设计模式大概分为五种设计类型：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
创建型设计模式结构型设计模式行为型设计模式技巧型设计模式架构型设计模式
简单工厂模式外观模式模板方法模式链模式同步模块
工厂方法模式适配器模式观察者模式委托模式异步模块模式
抽象工厂模式代理模式状态模式数据访问对象模式Widget模式
建造者模式装饰者模式策略模式节流模式MVC模式
原型模式桥接模式职责链模式简单模板模式MVP模式
单例模式组合模式命令模式惰性模式MVVM模式
享元模式访问者模式参与者模式
中介者模式等待者模式
备忘录模式
迭代器模式
解释器模式
+

简单描述下微信小程序的相关文件类型？

答：微信小程序项目结构主要有四个文件类型,如下： +一、WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。 +二、WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式， +二、js 逻辑处理，网络请求 +三、json 小程序设置，如页面注册，页面标题及tabBar。 +四、app.json +必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。 +五、app.js +必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。 +六、app.wxss

- + 阅读全文 »
@@ -2591,7 +2470,7 @@

+
8月
31
@@ -2609,8 +2488,8 @@

- @@ -2625,7 +2504,7 @@

- +

-

+

@@ -2656,8 +2535,8 @@

发表于 -

@@ -2741,33 +2620,39 @@

-

现代的前端框架react/vue/angular都有路由router的概念，通过手写实现可以帮助我们更好地了解它的工作原理。它们都推荐单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-router等。

-

一般来说，这些路由插件总是提供两种不同方式的路由方式： Hash 和 History，有时也会提供非浏览器环境下的路由方式 Abstract(支持所有 JavaScript 运行 -环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式)。

-

实现路由的2种方式

    -
  1. hash模式 状态保存需要另行传递
    2. -
  2. history模式 原生提供了自定义状态传递的能力
    3. +

    开始准备

      +

    1. 安装nodejs

      +
      1
      npm -v
      +
      2. +

    2. 安装@angular/cli

      +
      1
      npm i -g @angular/cli
      +
      3. +

    3. CLI命令建立项目

      +
      1
      ng new ng7demo
      +

      选择是否加入路由模块以及哪种css预处理器

      +
    -

    缺点

    hash: 地址栏会多出一个#号，对url造成影响，在某些场景下如微信支付有坑。 -history: 兼容性差，直接访问报404，需要服务器做处理。

    -

    基本原理

      -
    • hash 主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件(当 location.hash 发生改变时，将触发这个事件)
      • -
    -
    -

    注意： Hash 方法是利用了相当于页面锚点的功能，所以与原来的通过锚点定位来进行页面滚动定位的方式冲突，导致定位到错误的路由路径，因此需要采用别的办法。

    -
    -
      -
    • history 则基于 pushState 和 popState replaceState
      • -
    -

    Hash 模式是使用 URL 的 Hash 来模拟一个完整的 URL，因此当 URL 改变的时候页面并不会重载。History 模式则会直接改变 URL，所以在路由跳转的时候会丢失一些地址信息(只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求)，在刷新或直接访问路由地址的时候会匹配不到静态资源。因此需要在服务器上配置一些信息，让服务器增加一个覆盖所有情况的候选资源。

    -

    history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 -404 错误。

    +

    可ctrl+c取消自动安装node_modules，手动进入项目npm install +node-sass安装不上可切换淘宝镜像库或者用cnpm安装

    +
      +
    1. npm config set registry https://registry.npm.taobao.org +npm install
      2. +
    +

    or

    +
      +

    1. npm install -g cnpm +cnpm install

      +
      2. +

    2. 启动项目

      +
      1
      ng serve --open // 自动打开浏览器 http://localhost:4200/
      +
      3. +
    - + 阅读全文 »
    @@ -3030,7 +2915,7 @@

    - Blog总字数: 301.3k字 + Blog总字数: 301.7k字

diff --git a/page/5/index.html b/page/5/index.html index 94e0df532..646a00385 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -428,12 +428,12 @@

Blog

-
+
8月
-
29
+
31
更新于
-
8月29
+
8月31
2020
@@ -446,8 +446,8 @@

Blog

- @@ -462,7 +462,7 @@

Blog

- +

@@ -493,8 +493,8 @@

发表于 -

@@ -578,15 +578,122 @@

-

作为常用的跨域解决方案，怎么能不用原生实现一下呢！

-

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。 -在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的，所以我们可以通过这个“犯罪漏洞”来进行跨域。 -一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信。补充一点，JSONP不使用XMLHttpRequest对象加载资源，不属于真正意义上的AJAX。

-
1
2
3
4
5
6
7
8
9
// 实现目标
JSONP(url, {
  data: {
    key1: value1
  },
  callback: function (data) {
    // data 是服务端返回的数据
  }
})
+

概念

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢 +的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。

+

设计原则（5个）

S – Single Responsibility Principle 单一职责原则

    +
  • 一个程序只做好一件事
    • +
  • 如果功能过于复杂就拆分开，每个部分保持独立
    • +
+

O – OpenClosed Principle 开放/封闭原则

    +
  • 对扩展开放，对修改封闭
    • +
  • 增加需求时，扩展新代码，而非修改已有代码
    • +
+

L – Liskov Substitution Principle 里氏替换原则

    +
  • 子类能覆盖父类
    • +
  • 父类能出现的地方子类就能出现
    • +
+

I – Interface Segregation Principle 接口隔离原则

    +
  • 保持接口的单一独立
    • +
  • 类似单一职责原则，这里更关注接口
    • +
+

D – Dependency Inversion Principle 依赖倒转原则

    +
  • 面向接口编程，依赖于抽象而不依赖于具
    • +
  • 使用方只关注接口而不关注具体类的实现
    • +
+

设计模式的类型

如果从作用上来划分，JavaScript设计模式大概分为五种设计类型：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
创建型设计模式结构型设计模式行为型设计模式技巧型设计模式架构型设计模式
简单工厂模式外观模式模板方法模式链模式同步模块
工厂方法模式适配器模式观察者模式委托模式异步模块模式
抽象工厂模式代理模式状态模式数据访问对象模式Widget模式
建造者模式装饰者模式策略模式节流模式MVC模式
原型模式桥接模式职责链模式简单模板模式MVP模式
单例模式组合模式命令模式惰性模式MVVM模式
享元模式访问者模式参与者模式
中介者模式等待者模式
备忘录模式
迭代器模式
解释器模式
- + 阅读全文 »
@@ -644,12 +751,12 @@

-
+
8月
-
28
+
31
更新于
-
8月28
+
8月31
2020
@@ -678,7 +785,7 @@

- +

@@ -709,8 +816,8 @@

发表于 -

@@ -794,26 +901,33 @@

-

作为一个开发人员，或多或少都听说过对称加密、非对称加密、摘要、数字签名、数字证书这几个概念，它们是用来保证在互联网通信过程中数据传输安全的。有人可能会有疑惑，我给传输数 -据加个密不就安全了，为什么还要搞这么多花样出来？本文主要通过一个案例来讲解这几个概念的实际作用。

-

在此之前，我先简单介绍一下这几个概念。

-

对称加密

对称加密是指用来加密和解密的是同一个秘钥。其特点是加密速度快，但是秘钥容易被黑客截获，所以安全性不高。密钥不可能一开始在发送方和接收方都全部生成好了 需要在一方生成之后传递给另一方 如果在传递过程密钥被劫持 整个加密就不安全了。常见的有AES、DES算法。

-

非对称加密

非对称加密是指用来加密和解密的是不同的秘钥，它们是成对出现的，称为公钥和私钥，知道其中一个秘钥是无法推导出另外一个秘钥的。用公钥加密的内容需要用私钥才能解密，用私钥加密 -的内容需要用公钥才能解密。非对称加密的特点是安全性高，缺点是加密速度慢。公钥对外公开 如果密文是私钥加密 那么任何人都能用公钥解密。常见的有RSA、ECC算法。

-

混合加密

在传递过程把我们的对称加密中的密钥用非对称加密的方式去传递就好了。 -mix

-

摘要

所谓的摘要就是一段信息或者一个文件通过某个哈希算法(也叫摘要算法)而得到的一串字符。摘要算法的特点就是不同的文件计算出的摘要是不同的(也有可能相同，但是可能性非常非常低)， -比如一个1G的视频文件，哪怕只是改动其中一个字节，最后计算得到的摘要也是完全不同的，所以摘要算法通常是用来判断文件是否被篡改过。其还有一个特点就是通过摘要是无法推导出源文 -件的信息的。常用的摘要(散列)算法有MD5、SHA等。

-

数字签名

数字签名就是一个文件的摘要加密后的信息。数字签名是和源文件一起发送给接收方的，接收方收到后对文件用摘要算法算出一个摘要，然后和数字签名中的摘要进行比对，两者不一致的话说 -明文件被篡改了。

-

数字证书

数字证书是一个经证书授权中心生成的文件，数字证书里一般会包含公钥、公钥拥有者名称、CA的数字签名、有效期、授权中心名称、证书序列号等信息。其中CA的数字签名是验证证书是否被 -篡改的关键，它其实就是对证书里面除了CA的数字签名以外的内容进行摘要算法得到一个摘要，然后CA机构用他自己的私钥对这个摘要进行加密就生成了CA的数字签名，CA机构会公开它的公 -钥，验证证书时就是用这个公钥解密CA的数字签名，然后用来验证证书是否被篡改。

+

现代的前端框架react/vue/angular都有路由router的概念，通过手写实现可以帮助我们更好地了解它的工作原理。它们都推荐单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-router等。

+

一般来说，这些路由插件总是提供两种不同方式的路由方式： Hash 和 History，有时也会提供非浏览器环境下的路由方式 Abstract(支持所有 JavaScript 运行 +环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式)。

+

实现路由的2种方式

    +
  1. hash模式 状态保存需要另行传递
    2. +
  2. history模式 原生提供了自定义状态传递的能力
    3. +
+

缺点

hash: 地址栏会多出一个#号，对url造成影响，在某些场景下如微信支付有坑。 +history: 兼容性差，直接访问报404，需要服务器做处理。

+

基本原理

    +
  • hash 主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件(当 location.hash 发生改变时，将触发这个事件)
    • +
+
+

注意： Hash 方法是利用了相当于页面锚点的功能，所以与原来的通过锚点定位来进行页面滚动定位的方式冲突，导致定位到错误的路由路径，因此需要采用别的办法。

+
+
    +
  • history 则基于 pushState 和 popState replaceState
    • +
+

Hash 模式是使用 URL 的 Hash 来模拟一个完整的 URL，因此当 URL 改变的时候页面并不会重载。History 模式则会直接改变 URL，所以在路由跳转的时候会丢失一些地址信息(只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求)，在刷新或直接访问路由地址的时候会匹配不到静态资源。因此需要在服务器上配置一些信息，让服务器增加一个覆盖所有情况的候选资源。

+
+

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 +404 错误。

+
- + 阅读全文 »
@@ -871,12 +985,12 @@

+
8月
-
28
+
29
更新于
-
8月28
+
8月29
2020
@@ -905,7 +1019,7 @@

- +

-

+

@@ -936,8 +1050,8 @@

发表于 -

@@ -1021,19 +1135,15 @@

-

https其实是有两部分组成：http + SSL / TLS加密数据包，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。

-

https比http要占用更多的资源，http使用TCP 三次握手建立连接，客户端和服务器需要交换3个包，https除了 TCP 的三个包，还要加上 ssl握手需要的9个包，所以一共是12个包。

-
-

SSL的全称是Secure Sockets Layer，即安全套接层协议，是为网络通信提供安全及数据完整性的一种安全协议。SSL最新的版本是3.0。TLS的全称是Transport Layer Security，即安全传输层协议，是建立在SSL 3.0协议规范之上，是SSL 3.0的后续版本。

-
-

SSL/TLS = 非对称加密（如RSA、ECC） + 对称加密（如AES、DES） + 散列算法（如MD5）

-
-

1.对数据加密 2.验证网站服务器身份

-
+

作为常用的跨域解决方案，怎么能不用原生实现一下呢！

+

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。 +在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的，所以我们可以通过这个“犯罪漏洞”来进行跨域。 +一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信。补充一点，JSONP不使用XMLHttpRequest对象加载资源，不属于真正意义上的AJAX。

+
1
2
3
4
5
6
7
8
9
// 实现目标
JSONP(url, {
  data: {
    key1: value1
  },
  callback: function (data) {
    // data 是服务端返回的数据
  }
})
- + 阅读全文 »
@@ -1091,12 +1201,12 @@

-
+
8月
-
27
+
28
更新于
-
8月27
+
8月28
2020
@@ -1109,8 +1219,8 @@

- @@ -1125,7 +1235,7 @@

- +

@@ -1156,8 +1266,8 @@

发表于 -

@@ -1241,22 +1351,26 @@

-

原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已，仅有一份。

-
-

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， -如果这个对象内部不存在这个属性，那么它就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

-
    -
  • “prototype” 是什么？ -prototype 是所有公共方法和属性的宿主，从祖先派生的“子”对象可以从使用祖先的方法和属性。
    • -
-

原型是一个用于实现对象属性继承的对象。

-

构造函数创建对象

我们先使用构造函数创建一个对象：

-
1
2
3
4
function Person() {}
var person = new Person();
person.name = "cosyer";
console.log(person.name); // cosyer
-

在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。

+

作为一个开发人员，或多或少都听说过对称加密、非对称加密、摘要、数字签名、数字证书这几个概念，它们是用来保证在互联网通信过程中数据传输安全的。有人可能会有疑惑，我给传输数 +据加个密不就安全了，为什么还要搞这么多花样出来？本文主要通过一个案例来讲解这几个概念的实际作用。

+

在此之前，我先简单介绍一下这几个概念。

+

对称加密

对称加密是指用来加密和解密的是同一个秘钥。其特点是加密速度快，但是秘钥容易被黑客截获，所以安全性不高。密钥不可能一开始在发送方和接收方都全部生成好了 需要在一方生成之后传递给另一方 如果在传递过程密钥被劫持 整个加密就不安全了。常见的有AES、DES算法。

+

非对称加密

非对称加密是指用来加密和解密的是不同的秘钥，它们是成对出现的，称为公钥和私钥，知道其中一个秘钥是无法推导出另外一个秘钥的。用公钥加密的内容需要用私钥才能解密，用私钥加密 +的内容需要用公钥才能解密。非对称加密的特点是安全性高，缺点是加密速度慢。公钥对外公开 如果密文是私钥加密 那么任何人都能用公钥解密。常见的有RSA、ECC算法。

+

混合加密

在传递过程把我们的对称加密中的密钥用非对称加密的方式去传递就好了。 +mix

+

摘要

所谓的摘要就是一段信息或者一个文件通过某个哈希算法(也叫摘要算法)而得到的一串字符。摘要算法的特点就是不同的文件计算出的摘要是不同的(也有可能相同，但是可能性非常非常低)， +比如一个1G的视频文件，哪怕只是改动其中一个字节，最后计算得到的摘要也是完全不同的，所以摘要算法通常是用来判断文件是否被篡改过。其还有一个特点就是通过摘要是无法推导出源文 +件的信息的。常用的摘要(散列)算法有MD5、SHA等。

+

数字签名

数字签名就是一个文件的摘要加密后的信息。数字签名是和源文件一起发送给接收方的，接收方收到后对文件用摘要算法算出一个摘要，然后和数字签名中的摘要进行比对，两者不一致的话说 +明文件被篡改了。

+

数字证书

数字证书是一个经证书授权中心生成的文件，数字证书里一般会包含公钥、公钥拥有者名称、CA的数字签名、有效期、授权中心名称、证书序列号等信息。其中CA的数字签名是验证证书是否被 +篡改的关键，它其实就是对证书里面除了CA的数字签名以外的内容进行摘要算法得到一个摘要，然后CA机构用他自己的私钥对这个摘要进行加密就生成了CA的数字签名，CA机构会公开它的公 +钥，验证证书时就是用这个公钥解密CA的数字签名，然后用来验证证书是否被篡改。

- + 阅读全文 »
@@ -1314,12 +1428,12 @@

+
8月
-
24
+
28
更新于
-
8月24
+
8月28
2020
@@ -1348,7 +1462,7 @@

- +

-

+

@@ -1379,8 +1493,8 @@

发表于 -

@@ -1464,14 +1578,19 @@

-
    -
  1. 正则(xxx?typeId=2)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            // return unescape(r[2]); // 中文会乱码
            return decodeURI(r[2]);
        }
        return null;
    }
    getQueryString("typeId") // "2"
    -
    2. -
+

https其实是有两部分组成：http + SSL / TLS加密数据包，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。

+

https比http要占用更多的资源，http使用TCP 三次握手建立连接，客户端和服务器需要交换3个包，https除了 TCP 的三个包，还要加上 ssl握手需要的9个包，所以一共是12个包。

+
+

SSL的全称是Secure Sockets Layer，即安全套接层协议，是为网络通信提供安全及数据完整性的一种安全协议。SSL最新的版本是3.0。TLS的全称是Transport Layer Security，即安全传输层协议，是建立在SSL 3.0协议规范之上，是SSL 3.0的后续版本。

+
+

SSL/TLS = 非对称加密（如RSA、ECC） + 对称加密（如AES、DES） + 散列算法（如MD5）

+
+

1.对数据加密 2.验证网站服务器身份

+
- + 阅读全文 »
@@ -1529,12 +1648,12 @@

-
+
8月
-
24
+
27
更新于
-
8月24
+
8月27
2020
@@ -1547,8 +1666,8 @@

- @@ -1563,7 +1682,7 @@

- +

@@ -1594,8 +1713,8 @@

发表于 -

@@ -1679,12 +1798,22 @@

-

今天10月31日，万圣节前夜。希望ff的病早点好，身体健康。

-

创建对象(字面量、构造函数、create方法、调用函数返回对象)

1
2
3
4
5
6
7
8
9
var obj = {} // 字面量 
var obj = new Object() // 很少见，性能低 没有形参时可省略()
var obj = Object.create(null) // 以xx为原型创建对象
var obj = Object.assign({})   // 复制到目标对象
// Object.assign()还可以去除多余的参数覆盖
Object.assign({ a: 1, b: 2 }, { b: 3, c: 3 })
const newObj = { ...{ a: 1, b: 2 }, ...{ b: 3, c: 3 } }
// {a: 1, b: 3, c: 3}
// Object() ==> {}
+

原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已，仅有一份。

+
+

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， +如果这个对象内部不存在这个属性，那么它就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

+
    +
  • “prototype” 是什么？ +prototype 是所有公共方法和属性的宿主，从祖先派生的“子”对象可以从使用祖先的方法和属性。
    • +
+

原型是一个用于实现对象属性继承的对象。

+

构造函数创建对象

我们先使用构造函数创建一个对象：

+
1
2
3
4
function Person() {}
var person = new Person();
person.name = "cosyer";
console.log(person.name); // cosyer
+

在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。

- + 阅读全文 »
@@ -1742,7 +1871,7 @@

+
8月
24
@@ -1760,8 +1889,8 @@

- @@ -1776,7 +1905,7 @@

- +

@@ -1807,8 +1936,8 @@

发表于 -

@@ -1892,14 +2021,14 @@

-

this 的指向

this 是 js 中定义的关键字， 它的指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。在实际应用中，this的指向大致可以分为以下四种情况。

-
-

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁(取决于函数的调用位置)，实际上this的最终指向的是那个调用它的对象(函数的直接调用者);

-
+
    +
  1. 正则(xxx?typeId=2)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            // return unescape(r[2]); // 中文会乱码
            return decodeURI(r[2]);
        }
        return null;
    }
    getQueryString("typeId") // "2"
    +
    2. +
- + 阅读全文 »
@@ -1975,8 +2104,8 @@

- @@ -1991,7 +2120,7 @@

- +

-

+

@@ -2022,8 +2151,8 @@

发表于 -

@@ -2107,11 +2236,12 @@

-

Async/Await是一种允许我们像构建没有回调函数的普通函数一样构建Promise的新语法。以往的异步方法无外乎回调函数和Promise。但是Async/Await建立于Promise之上。

+

今天10月31日，万圣节前夜。希望ff的病早点好，身体健康。

+

创建对象(字面量、构造函数、create方法、调用函数返回对象)

1
2
3
4
5
6
7
8
9
var obj = {} // 字面量 
var obj = new Object() // 很少见，性能低 没有形参时可省略()
var obj = Object.create(null) // 以xx为原型创建对象
var obj = Object.assign({})   // 复制到目标对象
// Object.assign()还可以去除多余的参数覆盖
Object.assign({ a: 1, b: 2 }, { b: 3, c: 3 })
const newObj = { ...{ a: 1, b: 2 }, ...{ b: 3, c: 3 } }
// {a: 1, b: 3, c: 3}
// Object() ==> {}
- + 阅读全文 »
@@ -2203,7 +2333,7 @@

- +

@@ -2234,8 +2364,8 @@

发表于 -

@@ -2319,12 +2449,14 @@

-

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字，有意思的是函数会在每个yield后暂停。

-

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

+

this 的指向

this 是 js 中定义的关键字， 它的指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。在实际应用中，this的指向大致可以分为以下四种情况。

+
+

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁(取决于函数的调用位置)，实际上this的最终指向的是那个调用它的对象(函数的直接调用者);

+
- + 阅读全文 »
@@ -2416,7 +2548,7 @@

- +

@@ -2447,8 +2579,8 @@

发表于 -

@@ -2532,28 +2664,11 @@

-

subscribe

-

从图中可以看出：

-
    -
  • 观察者与目标（被观察者）是直接进行交互的，包括订阅和触发。
    • -
  • 发布订阅模式是透过一个中间者当调度中心，相关的订阅与发布都由调度中心来进行协调。（适合更复杂的场景）
    • -
-

两者的优缺点：

-
    -
  • 观察者模式：优点就是一一对应，比较直观明了，占用内存资源容易进行回收。缺点就是两者耦合。
    • -
  • 发布订阅模式：优点就是一方面实现了发布者与订阅者之间的解耦，中间者可在两者操作之间进行更细粒度的控制。如：条件过滤发布，权限控制等等。缺点就是整一个中间调度会越来越庞大，需要手动清除里面的发布回调。
    • -
-

举个栗子：

-
    -

  • 观察者模式：彩票中心里，管理员充当目标对象（被观察者），彩民充当观察者，当管理员说公布一等奖号码时，即给各个观察者发布了消息，然后彩民（观察者）就收到发布消息，进行自己的后续操作（兑奖）。

    -
    • -

  • 发布订阅模式：每家每户向牛奶订购中心订购了牛奶，但是各家的牛奶品牌不一样，有燕塘、蒙牛等等。当燕塘牛奶来货了，订阅中心就给订购燕塘的各家各户派发燕塘牛奶。同理，当蒙牛到货时，订阅中心发布蒙牛的牛奶。

    -
    • -
+

Async/Await是一种允许我们像构建没有回调函数的普通函数一样构建Promise的新语法。以往的异步方法无外乎回调函数和Promise。但是Async/Await建立于Promise之上。

- + 阅读全文 »
@@ -2816,7 +2931,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git a/page/6/index.html b/page/6/index.html index c0c6e34e7..84375eb36 100644 --- a/page/6/index.html +++ b/page/6/index.html @@ -462,7 +462,7 @@

Blog

- +

@@ -493,8 +493,8 @@

发表于 -

@@ -578,15 +578,12 @@

-

PWA作为2018最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。

-

PWA是Progressive Web App的英文缩写，也就是渐进式增强WEB应用。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。

-

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的

-

安装和离线等功能。

-

我们需要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安

-

全、性能和体验三个方面，优化我们的Web App。所以，其实PWA本质上依然是一个Web App。

+

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字，有意思的是函数会在每个yield后暂停。

+

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

+
- + 阅读全文 »
@@ -678,7 +675,7 @@

- +

@@ -709,8 +706,8 @@

发表于 -

@@ -794,13 +791,28 @@

-

Proxy，代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。

-

Proxy 对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。

-

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。

+

subscribe

+

从图中可以看出：

+
    +
  • 观察者与目标（被观察者）是直接进行交互的，包括订阅和触发。
    • +
  • 发布订阅模式是透过一个中间者当调度中心，相关的订阅与发布都由调度中心来进行协调。（适合更复杂的场景）
    • +
+

两者的优缺点：

+
    +
  • 观察者模式：优点就是一一对应，比较直观明了，占用内存资源容易进行回收。缺点就是两者耦合。
    • +
  • 发布订阅模式：优点就是一方面实现了发布者与订阅者之间的解耦，中间者可在两者操作之间进行更细粒度的控制。如：条件过滤发布，权限控制等等。缺点就是整一个中间调度会越来越庞大，需要手动清除里面的发布回调。
    • +
+

举个栗子：

+
    +

  • 观察者模式：彩票中心里，管理员充当目标对象（被观察者），彩民充当观察者，当管理员说公布一等奖号码时，即给各个观察者发布了消息，然后彩民（观察者）就收到发布消息，进行自己的后续操作（兑奖）。

    +
    • +

  • 发布订阅模式：每家每户向牛奶订购中心订购了牛奶，但是各家的牛奶品牌不一样，有燕塘、蒙牛等等。当燕塘牛奶来货了，订阅中心就给订购燕塘的各家各户派发燕塘牛奶。同理，当蒙牛到货时，订阅中心发布蒙牛的牛奶。

    +
    • +
- + 阅读全文 »
@@ -858,12 +870,12 @@

-
+
8月
-
18
+
24
更新于
-
8月18
+
8月24
2020
@@ -876,8 +888,8 @@

- @@ -892,7 +904,7 @@

- +

@@ -923,8 +935,8 @@

发表于 -

@@ -1008,22 +1020,15 @@

-

定义：轻量级、高性能的 Web 服务器，在现今的大型应用、网站基本都离不开 Nginx，已经成为了一项必选的技术；其实可以把它理解成 入口网关。

-
-

当你去银行办理业务时，刚走进银行，需要到入门处的机器排队取号，然后按指令到对应的柜台办理业务，或者也有可能告诉你，今天不能排号了，回家吧！ -这样一个场景中，取号机器就是 Nginx(入口网关)。一个个柜台就是我们的业务服务器(办理业务)；银行中的保险箱就是我们的数据库(存取数据)；🤣

-
-

nginx

-

特点

    -
  1. 轻量级，配置方便灵活，无侵入性；
    2. -
  2. 占用内存少，启动快，性能好；
    3. -
  3. 高并发，事件驱动，异步；
    4. -
  4. 热部署，修改配置热生效；
    5. -
-
+

PWA作为2018最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。

+

PWA是Progressive Web App的英文缩写，也就是渐进式增强WEB应用。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。

+

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的

+

安装和离线等功能。

+

我们需要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安

+

全、性能和体验三个方面，优化我们的Web App。所以，其实PWA本质上依然是一个Web App。

- + 阅读全文 »
@@ -1081,12 +1086,12 @@

特点 +
8月
-
14
+
24
更新于
-
8月14
+
8月24
2020
@@ -1099,8 +1104,8 @@

特点 - @@ -1115,7 +1120,7 @@

特点 - +

@@ -1146,8 +1151,8 @@

发表于 -

@@ -1231,11 +1236,13 @@

- Shadowsocks +

Proxy，代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。

+

Proxy 对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。

+

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。

- + 阅读全文 »
@@ -1293,12 +1300,12 @@

-
+
8月
-
14
+
18
更新于
-
8月14
+
8月18
2020
@@ -1311,8 +1318,8 @@

- @@ -1327,7 +1334,7 @@

- +

@@ -1358,8 +1365,8 @@

发表于 -

@@ -1443,11 +1450,22 @@

-

通常有人说一个人一生最好经常去三个地方看看，人生感悟会提高一个档次，人生观，价值观乃至世界观，都会有一个质的飞跃。这三个地方就是：托儿所、殡仪馆、监狱。 常去托儿所，看到天真烂漫、童真无邪、活泼可爱的孩子们，会更加的体会到生命的重要和可爱，从而更加珍惜生命，热爱生活，激发出更多积极向上的人生志向。 常去殡仪馆，看到撒手人寰逝去的人们，会感受到，人赤条条来，赤条条去，人为财死，鸟为食亡，是多么的狭隘和自私，心胸会豁然开朗，，不会在为鸡毛蒜皮的小事斤斤计较，退一步海阔天空，让三分心平气和。会更加的领会人生的价值所在，让人生更具异彩。 常去监狱，看到无论是过去高官还是贫民百姓，进到监狱没有了姓名，只有号码，一律囚服，进出报告，极大的限制了人身自由，天高任鸟飞，海阔凭鱼跃的现实已经成为梦中的理想。自古就有人犯王法身无主，因此也就会更加的洁身自好，以人为镜，严于律己。守法度者为幸福，世上本没有绝对的自由，遵守了，习惯了，适应了也就自由了。

+

定义：轻量级、高性能的 Web 服务器，在现今的大型应用、网站基本都离不开 Nginx，已经成为了一项必选的技术；其实可以把它理解成 入口网关。

+
+

当你去银行办理业务时，刚走进银行，需要到入门处的机器排队取号，然后按指令到对应的柜台办理业务，或者也有可能告诉你，今天不能排号了，回家吧！ +这样一个场景中，取号机器就是 Nginx(入口网关)。一个个柜台就是我们的业务服务器(办理业务)；银行中的保险箱就是我们的数据库(存取数据)；🤣

+
+

nginx

+

特点

    +
  1. 轻量级，配置方便灵活，无侵入性；
    2. +
  2. 占用内存少，启动快，性能好；
    3. +
  3. 高并发，事件驱动，异步；
    4. +
  4. 热部署，修改配置热生效；
    5. +
- + 阅读全文 »
@@ -1505,7 +1523,7 @@

-
+
8月
14
@@ -1523,8 +1541,8 @@

- @@ -1539,7 +1557,7 @@

- +

@@ -1570,8 +1588,8 @@

发表于 -

@@ -1655,11 +1673,11 @@

-

怯懦的我终于和领导提出了离职，从8月11号入职以来，jenkins打包管理、bugatti自动化部署等等惊艳到了在上家公司还是用手动发包javac的我，学到了更正规的软件开发流程体系和产品线的迭代，KA项目的定制化。从1月开始一直用RN做相关的微应用，期间虽然也做过小程序、mui的H5、antd的中后台系统，但大多数时间还是用RN写业务应用。经过几个应用的锻炼、改造，已经封出了一些较能应付业务需求的组件。复杂的集成调用框架那边都做了，其他部分做起来没有什么技术含量了。我知道已经毕业1年的我该做出些改变了。

+ Shadowsocks
- + 阅读全文 »
@@ -1717,12 +1735,12 @@

-
+
8月
-
13
+
14
更新于
-
8月13
+
8月14
2020
@@ -1735,8 +1753,8 @@

- @@ -1751,7 +1769,7 @@

- +

@@ -1782,8 +1800,8 @@

发表于 -

@@ -1867,17 +1885,11 @@

-

芮 rui 四声

-

浏览器前缀 -webkit/chrome、safari -moz/firefox -ms/ie -o/opera

-

弹性伸缩flexbox布局

-

任何一个容器都可设为display:flex

-

行内元素 display:inline-flex

-

webkit内核浏览器（Safari） display:-webkit-flex; display:flex

-

设为flex布局以后，子元素的float、clear、vertical-align属性将失效。

+

通常有人说一个人一生最好经常去三个地方看看，人生感悟会提高一个档次，人生观，价值观乃至世界观，都会有一个质的飞跃。这三个地方就是：托儿所、殡仪馆、监狱。 常去托儿所，看到天真烂漫、童真无邪、活泼可爱的孩子们，会更加的体会到生命的重要和可爱，从而更加珍惜生命，热爱生活，激发出更多积极向上的人生志向。 常去殡仪馆，看到撒手人寰逝去的人们，会感受到，人赤条条来，赤条条去，人为财死，鸟为食亡，是多么的狭隘和自私，心胸会豁然开朗，，不会在为鸡毛蒜皮的小事斤斤计较，退一步海阔天空，让三分心平气和。会更加的领会人生的价值所在，让人生更具异彩。 常去监狱，看到无论是过去高官还是贫民百姓，进到监狱没有了姓名，只有号码，一律囚服，进出报告，极大的限制了人身自由，天高任鸟飞，海阔凭鱼跃的现实已经成为梦中的理想。自古就有人犯王法身无主，因此也就会更加的洁身自好，以人为镜，严于律己。守法度者为幸福，世上本没有绝对的自由，遵守了，习惯了，适应了也就自由了。

- + 阅读全文 »
@@ -1935,12 +1947,12 @@

-
+
8月
-
08
+
14
更新于
-
8月08
+
8月14
2020
@@ -1953,8 +1965,8 @@

- @@ -1969,7 +1981,7 @@

- +

@@ -2000,8 +2012,8 @@

发表于 -

@@ -2085,11 +2097,11 @@

-

一、必备知识点

git

+

怯懦的我终于和领导提出了离职，从8月11号入职以来，jenkins打包管理、bugatti自动化部署等等惊艳到了在上家公司还是用手动发包javac的我，学到了更正规的软件开发流程体系和产品线的迭代，KA项目的定制化。从1月开始一直用RN做相关的微应用，期间虽然也做过小程序、mui的H5、antd的中后台系统，但大多数时间还是用RN写业务应用。经过几个应用的锻炼、改造，已经封出了一些较能应付业务需求的组件。复杂的集成调用框架那边都做了，其他部分做起来没有什么技术含量了。我知道已经毕业1年的我该做出些改变了。

- + 阅读全文 »
@@ -2147,12 +2159,12 @@

+
8月
-
05
+
13
更新于
-
8月05
+
8月13
2020
@@ -2165,8 +2177,8 @@

- @@ -2181,7 +2193,7 @@

- +

-

+

@@ -2212,8 +2224,8 @@

发表于 -

@@ -2297,11 +2309,17 @@

-

Error Boundary

Error Boundary可以看作是一种特殊的React组件，新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

+

芮 rui 四声

+

浏览器前缀 -webkit/chrome、safari -moz/firefox -ms/ie -o/opera

+

弹性伸缩flexbox布局

+

任何一个容器都可设为display:flex

+

行内元素 display:inline-flex

+

webkit内核浏览器（Safari） display:-webkit-flex; display:flex

+

设为flex布局以后，子元素的float、clear、vertical-align属性将失效。

- + 阅读全文 »
@@ -2359,12 +2377,12 @@

+
8月
-
05
+
08
更新于
-
8月05
+
8月08
2020
@@ -2393,7 +2411,7 @@

- +

-

+

@@ -2424,8 +2442,8 @@

发表于 -

@@ -2509,25 +2527,11 @@

-

在Linux中，压缩与解压用得最多的是 tar 命令。

-

-c: 建立压缩档案 --x：解压 --t：查看内容 --r：向压缩归档文件末尾追加文件 --u：更新原压缩包中的文件

-

以上五个是独立的命令参数，压缩解压都要用到其中一个，可以和别的命令连用但只能用其中一个。下面的参数是根据需要在压缩或解压档案时可选的。

-

-z：有gzip属性的 gz --j：有bz2属性的 bz2

-

-J ：有xz属性的 xz --Z：有compress属性的 --v：显示所有过程 --O：将文件解开到标准输出

-

下面的参数-f是必须的

-

-f: 使用档案名字，切记，这个参数是最后一个参数，后面只能接档案名。

+

一、必备知识点

git

- + 阅读全文 »
@@ -2790,7 +2794,7 @@

- Blog总字数: 301.3k字 + Blog总字数: 301.7k字
diff --git a/page/7/index.html b/page/7/index.html index 82cb2dae9..c02b40764 100644 --- a/page/7/index.html +++ b/page/7/index.html @@ -428,12 +428,12 @@

Blog

-
-
7月
-
30
+
+
8月
+
05
更新于
-
7月30
+
8月05
2020
@@ -446,8 +446,8 @@

Blog

- @@ -462,7 +462,7 @@

Blog

- +

@@ -493,8 +493,8 @@

发表于 -

@@ -1519,12 +1521,12 @@

+
7月
-
24
+
28
更新于
-
7月24
+
7月28
2020
@@ -1537,8 +1539,8 @@

- @@ -1553,7 +1555,7 @@

- +

-

+

@@ -1584,8 +1586,8 @@

发表于 -

@@ -1669,15 +1671,21 @@

-

什么是响应式网站

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

-
- -
- - 阅读全文 » - -
- + +

深浅拷贝概念

深拷贝和浅拷贝只针对象 Object, Array 这样的复杂对象（引用类型）的。

+

复制引用（引用类型）的拷贝方法称之为浅拷贝，创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果

+

属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

+

深拷贝就是指完全的拷贝一个对象，将原对象的各个属性递归复制下来。这样即使嵌套了对象，两者也相互分离。

+

浅拷贝 对基本类型拷贝值，引用类型拷贝引用

Object.assign()

扩展运算符…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var shallowCopy = function(obj) {
    if (typeof obj !== 'object') return;      // 只拷贝对象
    var newObj = obj instanceof Array ? [] : {};     // 根据obj的类型判断是新建一个数组还是对象
    for (var key in obj) {      // 遍历obj，并且判断是obj的属性才拷贝
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

function shallowCopy2(source) {
  if (source === null || typeof source !== 'object') return source;
  const copy = Array.isArray(source) ? [] : {};

  Object.keys(source).forEach(key => {
    copy[key] = source[key];
  });
  return copy;
}

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
shallowObj.arr[1] = 5;
console.log(obj.arr[1])  // 5 互相影响 指向了同一块内存地址
shallowObj.a = 5;
console.log(obj.a) // 1
+

深拷贝(将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。)

JSON.parse(JSON.stringify(a)): 性能最快

具有循环引用的对象时，报错 +当值为函数、undefined、或symbol时，无法拷贝

+

递归复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 不考虑循环引用
var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
shallowObj.arr[1] = 5;
console.log(obj.arr[1])  // 3 没有影响 重新拷贝了新数据
shallowObj.a = 5;
console.log(obj.a) // 1
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 不考虑循环引用
const clone = function(data){
    if(typeof data !== 'object'){
        return data;
    }
    let keys = Object.keys(data);
    let result = Array.isArray(data) ? [] : {};
    keys.forEach(key=>{
        if(typeof data[key] === 'object'){
            result[key] = clone(data[key]);
        }else{
            result[key] = data[key];
        }
    })
    return result;
}
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 考虑循环引用 只考虑了普通的 object和 array两种数据类型
const clone = function(data){
    let map = new WeakMap(); // 这里用WeakMap弱引用，会自动回收，不需要手动处理置为null
    function dp(obj){
        if(typeof obj !== 'object'){
            return obj;
        }
        let o = map.get(obj);
        if(o){
            return o;
        }
        let result = Array.isArray(obj) ? [] : {};
        map.set(obj, result);
        let keys = Object.keys(obj);
        keys.forEach(key=>{
            if(typeof obj[key] === 'object'){
                result[key] = dp(obj[key]);
            }else{
                result[key] = obj[key];
            }
        })
        return result;
    }
    return dp(data);
}
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
// 终极版
const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';
const argsTag = '[object Arguments]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';

const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];


function forEach(array, iteratee) {
    let index = -1;
    const length = array.length;
    while (++index < length) {
        iteratee(array[index], index);
    }
    return array;
}

function isObject(target) {
    const type = typeof target;
    return target !== null && (type === 'object' || type === 'function');
}

function getType(target) {
    return Object.prototype.toString.call(target);
}

function getInit(target) {
    const Ctor = target.constructor;
    return new Ctor();
}

function cloneSymbol(targe) {
    return Object(Symbol.prototype.valueOf.call(targe));
}

function cloneReg(targe) {
    const reFlags = /\w*$/;
    const result = new targe.constructor(targe.source, reFlags.exec(targe));
    result.lastIndex = targe.lastIndex;
    return result;
}

function cloneFunction(func) {
    const bodyReg = /(?<={)(.|\n)+(?=})/m;
    const paramReg = /(?<=\().+(?=\)\s+{)/;
    const funcString = func.toString();
    if (func.prototype) {
        const param = paramReg.exec(funcString);
        const body = bodyReg.exec(funcString);
        if (body) {
            if (param) {
                const paramArr = param[0].split(',');
                return new Function(...paramArr, body[0]);
            } else {
                return new Function(body[0]);
            }
        } else {
            return null;
        }
    } else {
        return eval(funcString);
    }
}

function cloneOtherType(targe, type) {
    const Ctor = targe.constructor;
    switch (type) {
        case boolTag:
        case numberTag:
        case stringTag:
        case errorTag:
        case dateTag:
            return new Ctor(targe);
        case regexpTag:
            return cloneReg(targe);
        case symbolTag:
            return cloneSymbol(targe);
        case funcTag:
            return cloneFunction(targe);
        default:
            return null;
    }
}

function clone(target, map = new WeakMap()) {

    // 克隆原始类型
    if (!isObject(target)) {
        return target;
    }

    // 初始化
    const type = getType(target);
    let cloneTarget;
    if (deepTag.includes(type)) {
        cloneTarget = getInit(target, type);
    } else {
        return cloneOtherType(target, type);
    }

    // 防止循环引用
    if (map.get(target)) {
        return map.get(target);
    }
    map.set(target, cloneTarget);

    // 克隆set
    if (type === setTag) {
        target.forEach(value => {
            cloneTarget.add(clone(value, map));
        });
        return cloneTarget;
    }

    // 克隆map
    if (type === mapTag) {
        target.forEach((value, key) => {
            cloneTarget.set(key, clone(value, map));
        });
        return cloneTarget;
    }

    // 克隆对象和数组
    const keys = type === arrayTag ? undefined : Object.keys(target);
    forEach(keys || target, (value, key) => {
        if (keys) {
            key = value;
        }
        cloneTarget[key] = clone(target[key], map);
    });

    return cloneTarget;
}

module.exports = {
    clone
};
+

尽管使用深拷贝会完全的克隆一个新对象，不会产生副作用，但是深拷贝因为使用递归，性能会不如浅拷贝，在开发中，还是要根据实际情况进行选择。

+ +

@@ -1731,12 +1739,12 @@

+
7月
-
22
+
28
更新于
-
7月22
+
7月28
2020
@@ -1749,8 +1757,8 @@

- @@ -1765,7 +1773,7 @@

- +

-

+

@@ -1796,8 +1804,8 @@

发表于 -