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 394504981..c77feab8d 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总字数: 286.9k字 + Blog总字数: 288.0k字
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 6b9bd9edf..8b12d7fb7 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总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git a/2019/ES6Proxy.html b/2019/ES6Proxy.html index f900751a2..ee2fa331e 100644 --- a/2019/ES6Proxy.html +++ b/2019/ES6Proxy.html @@ -999,7 +999,7 @@

- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git "a/2019/ES6Reflect\345\257\271\350\261\241.html" "b/2019/ES6Reflect\345\257\271\350\261\241.html" index da00a1484..f855b1dd1 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总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git a/2019/EventLoop.html b/2019/EventLoop.html index 11db9d253..f5b602369 100644 --- a/2019/EventLoop.html +++ b/2019/EventLoop.html @@ -1044,7 +1044,7 @@

参考
- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

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 7ff6700af..bda28751c 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 7ad092247..46e4d0daa 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总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git "a/2019/PWA\346\211\213\350\256\260.html" "b/2019/PWA\346\211\213\350\256\260.html" index e2fcbb7b2..6f31b2869 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 925771869..007f9bc34 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 52358078a..a162a082d 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 8c472fadf..adc578e89 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 ab4324fb1..980ccf1d4 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总字数: 286.9k字 + Blog总字数: 288.0k字
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 e496e69b9..979522dc9 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" @@ -951,7 +951,7 @@

- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

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 c8df88a57..c209756fb 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" @@ -961,7 +961,7 @@

- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git "a/2019/npm\346\200\273\347\273\223.html" "b/2019/npm\346\200\273\347\273\223.html" index 969ed9614..121d08263 100644 --- "a/2019/npm\346\200\273\347\273\223.html" +++ "b/2019/npm\346\200\273\347\273\223.html" @@ -1035,7 +1035,7 @@

- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

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 ed3c04d94..cca83e223 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总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git a/2019/use strict.html b/2019/use strict.html index 013fc2acf..e54550024 100644 --- a/2019/use strict.html +++ b/2019/use strict.html @@ -987,7 +987,7 @@

- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

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 2a837b4df..ddb1110e9 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总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git a/2019/webpack.html b/2019/webpack.html index b40daa4cb..cadba54a8 100644 --- a/2019/webpack.html +++ b/2019/webpack.html @@ -1093,7 +1093,7 @@

- Blog总字数: 286.9k字 + Blog总字数: 288.0k字

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 f7b031cd2..78e73c99a 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总字数: 286.9k字 + Blog总字数: 288.0k字

diff --git "a/2019/\345\205\263\344\272\216requestAnimationFrame.html" "b/2019/\345\205\263\344\272\216requestAnimationFrame.html" index 30eefe895..a7e87f59a 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总字数: 286.9k字 + Blog总字数: 288.0k字
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 05bb9dd6f..a9033c1fa 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 bf0f5a3a2..483cd410a 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 0af4343cd..54ffb91c0 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总字数: 286.9k字 + Blog总字数: 288.0k字
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 b5c81d857..f038aed10 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 416eb0b30..212159e51 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总字数: 286.9k字 + Blog总字数: 288.0k字

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 b9c4ea988..06cfa1fde 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总字数: 286.9k字 + Blog总字数: 288.0k字
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 6573b5e04..33de7e7a2 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" @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

Blog

-
+
9月
-
05
+
08
更新于
-
9月05
+
9月08
2020
@@ -523,7 +523,7 @@

浏览器兼容问题总结

字数统计： - 803 (字) + 1,061 (字) @@ -539,7 +539,7 @@

浏览器兼容问题总结

阅读时长： - 3 (分钟) + 4 (分钟)
@@ -610,7 +610,38 @@

浏览器兼容问题总结

  • display:inline-block 什么时候会显示间隙？ 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

    • +

  • ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。 +解决方法：统一设置ul的内外边距为0

    +
    • +

  • IE6下图片的下方有空隙 +解决方法：给img设置display:block;

    +
    • +

  • IE6下两个float之间会有个3px的bug +解决办法：给右边的元素也设置float:left;

    +
    • +

  • IE6下没有min-width的概念，其默认的width就是min-width

    +
    • +

  • IE6下在使用margin:0 auto;无法使其居中 +解决办法：为其父容器设置text-align:center;

    +
    • +

  • 被点击过后的超链接不再具有hover和active属性 +解决办法:按lvha的顺序书写css样式，

    +
    • +
      +
    • “:link”: a标签还未被访问的状态；
      • +
    • “:visited”: a标签已被访问过的状态；
      • +
    • “:hover”: 鼠标悬停在a标签上的状态；
      • +
    • “:active”: a标签被鼠标按着时的状态；
      • +
    +
      +
    1. 标准事件绑定 +addEventListener/attachEvent、event.target/event.srcElement、XMLHttpRequest/ActiveXObject(‘Microsoft.XMLHTTP’)
      2. +
    +
      +
    • 获取dom的父子节点 +parentNode/parentElement
      • +
    @@ -642,7 +673,7 @@

    浏览器兼容问题总结

    本文标题:浏览器兼容问题总结

    文章作者:陈宇（cosyer）

    发布时间:2019年09月01日 - 01:09

    -

    最后更新:2020年09月05日 - 21:09

    +

    最后更新:2020年09月08日 - 19:09

    原始链接:http://mydearest.cn/2019/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93.html

    @@ -966,7 +997,7 @@

    浏览器兼容问题总结

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    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 5f214f66a..9b40e2353 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 18824bc07..9c7f30844 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 bffa11d2b..4d5708064 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总字数: 286.9k字 + Blog总字数: 288.0k字
    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 8a24de792..a664bc17b 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 27a250e76..2eb2d24ea 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 577606859..a785be81e 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 1cedb6f62..bcb80d417 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

    -
    -
    7月
    -
    15
    +
    +
    9月
    +
    08
    更新于
    -
    7月15
    +
    9月08
    2020
    @@ -589,6 +589,14 @@ 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const withUser = WrappedComponent => {
      const user = sessionStorage.getItem("user");
      return props => <WrappedComponent user={user} {...props} />;
    };

    const UserPage = props => (
      <div class="user-container">
        <p>My name is {props.user}!</p>
      </div>
    );

    export default withUser(UserPage);
    withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。 但是这两种模式会增加代码的层级关系，而hooks简洁多了，没有多余的层级嵌套，把各种想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook即可。

    +
    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
    // withGithubProfile
    const withGithubProfile = (WrappedComponent:any) => {
      return class extends React.Component<IProps, IStates> {
        constructor(props:IProps) {
          super(props)
          this.state = {
            profile: {}
          }
        }
        
        componentDidMount() {
          fetch('https://api.github.com/users/cosyer')
            .then(response => {
              return response.json()
            })
            .then(res => {
              this.setState({
                profile: res
              })
            })
        }
        
        render() {
          const { profile } = this.state
          return <WrappedComponent profile={profile} {...this.props} />
        }
      }
    }
    +

    引入高阶组件，使用其profile +

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class GithubProfileHoc extends React.Component<IProps, IStates> {
      render() {
        const { profile } = this.props
        return (
          <div className="profile">
            <img src={profile.avatar_url} alt="avatar" width="200px" />
            <div>name: {profile.name}</div>
            <div>followers: {profile.followers}</div>
            <div>following: {profile.following}</div>
          </div>
        )
      }
    }

    export default WithGithubProfile(GithubProfileHoc)

    +

    缺点

      +
    • 使用多个高阶组件时，无法确定 props 来源
      • +
    • 相同的 props 会存在覆盖的情况
      • +
    • 增加调试难度
      • +

    生命周期钩子函数里的逻辑太乱了吧！ 我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观。

    class真的太让人困惑了！ @@ -603,14 +611,6 @@ 

    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
    // withGithubProfile
    const withGithubProfile = (WrappedComponent:any) => {
      return class extends React.Component<IProps, IStates> {
        constructor(props:IProps) {
          super(props)
          this.state = {
            profile: {}
          }
        }
        
        componentDidMount() {
          fetch('https://api.github.com/users/cosyer')
            .then(response => {
              return response.json()
            })
            .then(res => {
              this.setState({
                profile: res
              })
            })
        }
        
        render() {
          const { profile } = this.state
          return <WrappedComponent profile={profile} {...this.props} />
        }
      }
    }
    -

    引入高阶组件，使用其profile -

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class GithubProfileHoc extends React.Component<IProps, IStates> {
      render() {
        const { profile } = this.props
        return (
          <div className="profile">
            <img src={profile.avatar_url} alt="avatar" width="200px" />
            <div>name: {profile.name}</div>
            <div>followers: {profile.followers}</div>
            <div>following: {profile.following}</div>
          </div>
        )
      }
    }

    export default WithGithubProfile(GithubProfileHoc)

    -

    缺点

      -
    • 使用多个高阶组件时，无法确定 props 来源
      • -
    • 相同的 props 会存在覆盖的情况
      • -
    • 增加调试难度
      • -

    State Hooks

    状态组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    class Example extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        };
      }

      render() {
        return (
          <div>
            <p>You clicked {this.state.count} times</p>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
              Click me
            </button>
          </div>
        );
      }
    }

    hooks改造

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import { useState } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

    是不是简单多了！可以看到，Example变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）。

    @@ -670,11 +670,11 @@ 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function FriendListItem(props) {
      const isOnline = useFriendStatus(props.friend.id);

      return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
          {props.friend.name}
        </li>
      );
    }
    funky!!!

    比如还有

    -

    useProfile 使用 Hooks 实现 API 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // useProfile
    const useProfile = () => {
      const [profile, setProfile] = useState({} as TProfile)
      const [loading, setLoading] = useState(false)
      const [isError, setIsError] = useState(false)

      useEffect(() => {
        setLoading(true)
        fetch('https://api.github.com/users/gaearon')
          .then(response => {
            return response.json()
          })
          .then(res => {
            setProfile(res as TProfile)
            setIsError(false)
            setLoading(false)
          }).catch(()=> {
            setIsError(true)
            setLoading(false)
          })
      }, [])

      return { profile, loading,isError }
    }
    +

    useProfile 使用 Hooks 实现 API 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // useProfile
    const useProfile = () => {
      const [profile, setProfile] = useState({} as TProfile)
      const [loading, setLoading] = useState(false)
      const [isError, setIsError] = useState(false)

      useEffect(() => {
        setLoading(true)
        fetch('https://api.github.com/users/gaearon')
          .then(response => {
            return response.json()
          })
          .then(res => {
            setProfile(res as TProfile)
            setIsError(false)
            setLoading(false)
          }).catch(()=> {
            setIsError(true)
            setLoading(false)
          })
      }, [])

      return { profile, loading, isError }
    }

    使用 useProfile Hooks： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    const UseProfilePage = () => {
      const { profile, loading, isError } = useProfile()
      return (
        <React.Fragment>
          {isError ? (
            <div>Network Error...</div>
          ) : (
            <div className="profile">
              {loading ? (
                <div>loading profile...</div>
              ) : (
                <React.Fragment>
                  <img src={profile.avatar_url} alt="avatar" width="200px" />
                  <div>name: {profile.name}</div>
                  <div>company: {profile.company}</div>
                  <div>bio: {profile.bio}</div>
                </React.Fragment>
              )}
            </div>
          )}
        </React.Fragment>
      )
    }

    useInput 使用 Hooks 实现 input 输入逻辑

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const useInput = (initialValue:string) => {
      const [value, setValue] = useState(initialValue)

      const handleChange = (e:any) => {
        setValue(e.target.value)
      }

      return {
        value,
        onChange: handleChange
      }
    }
    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const useInputDemo = () => {
      const value = useInput('KuangPF')

      return (
        <div className="use-input">
          <p>current name: {value.value}</p>
          <input {...value} />
        </div>
      )
    }
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const useInputDemo = () => {
      const value = useInput('cosyer')

      return (
        <div className="use-input">
          <p>current name: {value.value}</p>
          <input {...value} />
        </div>
      )
    }

    useContext

    useContext 是为了在 function 组件中使用类组件的 context API，使用方法很简单，首先创建一个 context： 

    1
    2
    const local = '🇨🇳'
    const ThemeContext = React.createContext(local)
    然后在 useContext hook 使用 context： @@ -690,7 +690,7 @@

    返回当前 state 以及配套的 dispatch 方法。首先看下 useReducer 处理简单的 state： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function UseReducerDemo() {
      const [count, dispatch] = useReducer(state => {
        return state + 1
      }, 0)

      return (
        <div>
          <p>count: {count}</p>
          <button
            onClick={() => {
              dispatch()
            }}
          >
            add
          </button>
        </div>
      )
    }
    这个例子和使用 useState 一样，都达到了计数的效果。 该例子中，useReducer 初始化了 count 值为 0，传入的 reducer 很简单，当接收到一个 dispatch 时，将 count 的值增加 1。

    -

    处理 state 有相互依赖的场景

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const CountApp = () => {
      const [count, setCount] = useState(0)
      const [frozen, setFrozen] = useState(false)

      const increase = () => {
        setCount(prevCount => {
          if (frozen) {
            return prevCount
          }
          return prevCount + 1
        })
      }

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

      return <p>count {count}</p>
    }
    // render 1
    +

    处理 state 有相互依赖的场景

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const CountApp = () => {
      const [count, setCount] = useState(0)
      const [frozen, setFrozen] = useState(false)

      const increase = () => {
        setCount(prevCount => {
          if (frozen) {
            return prevCount
          }
          return prevCount + 1
        })
      }

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

      return <p>count {count}</p>
    }
    // render 2

    原因在于 function 组件的更新机制，当引入 hooks 以后，function 组件也拥有了 state 的功能，当我们 setState 时，UI 会重新渲染，但在这个过程中function 组件中，state 以及 props 都是静态值，不存在引用，或者也可以理解为 state 和 props 是一个 capture value，每次渲染的 state 和 props 都是独立的。

    在这个例子中，由于 useEffect 传入的依赖为 []，即该副作用只会在 UI 第一次渲染结束后执行一次。而在这次 render 中，count 的值为 0， frozen 值为 false，所以第二次执行 increase 时，frozen 值依然为 false， setCount 返回的 prevCount 为 1 ，然后增加 1，这也就是为什么最后 render 的结果为 2，而不是 1。

    对于 state 有相互依赖的情况，我们可以用 useReducer 来处理： @@ -766,7 +766,7 @@

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

    文章作者:陈宇（cosyer）

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

    -

    最后更新:2020年07月15日 - 22:07

    +

    最后更新:2020年09月08日 - 19:09

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

    @@ -1115,7 +1115,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    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 54ac8dc64..1b60b4641 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总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/2020/Docker.html b/2020/Docker.html index 8458a3ddf..a9674d8fc 100644 --- a/2020/Docker.html +++ b/2020/Docker.html @@ -1141,7 +1141,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    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 d414aa1cd..0f27f1c2e 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 86a47adec..ac25f6994 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" @@ -132,17 +132,17 @@ - + - + - + @@ -417,12 +417,12 @@

    Blog

    -
    +
    9月
    -
    05
    +
    08
    更新于
    -
    9月05
    +
    9月08
    2020
    @@ -567,7 +567,9 @@

    HTML中p标签中插入div标签

    面试遇到了问题:<p>中能不能插入<div>? 插入<div>会如何?

    先直接实践下：

    div1

    -

    我们可以看到,

    +

    @@ -607,7 +609,7 @@

    HTML中p标签中插入div标签

    本文标题:HTML中p标签中插入div标签会发生什么

    文章作者:陈宇（cosyer）

    发布时间:2020年09月02日 - 11:09

    -

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

    +

    最后更新:2020年09月08日 - 19:09

    原始链接:http://mydearest.cn/2020/HTML%E4%B8%ADp%E6%A0%87%E7%AD%BE%E4%B8%AD%E6%8F%92%E5%85%A5div%E6%A0%87%E7%AD%BE%E4%BC%9A%E5%8F%91%E7%94%9F%E4%BB%80%E4%B9%88.html

    @@ -927,7 +929,7 @@

    HTML中p标签中插入div标签
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/2020/Hybrid.html b/2020/Hybrid.html index 5f44c63c2..c468206c3 100644 --- a/2020/Hybrid.html +++ b/2020/Hybrid.html @@ -1024,7 +1024,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    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 7e7991a45..092e774b1 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总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/2020/Mac iTerm2 + oh-my-zsh.html b/2020/Mac iTerm2 + oh-my-zsh.html index cb0907a41..8732aa91a 100644 --- a/2020/Mac iTerm2 + oh-my-zsh.html +++ b/2020/Mac iTerm2 + oh-my-zsh.html @@ -949,7 +949,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/2020/Nginx.html b/2020/Nginx.html index 0214ab0e3..8252c54da 100644 --- a/2020/Nginx.html +++ b/2020/Nginx.html @@ -1057,7 +1057,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    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 d5dde53c0..b87dc7180 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 306f0b4d8..b78df2f21 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 91e13834f..69533332f 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" @@ -950,7 +950,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    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 70f2a3250..01f79ae13 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 6434a0bc9..1d055927e 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 f826a4e89..88ec12b54 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 9ec548ded..eb53f9a77 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总字数: 286.9k字 + Blog总字数: 288.0k字

    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 c92c174b5..f2ea31b4a 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总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/2020/vueInterview.html b/2020/vueInterview.html index 49fab5833..dcc86c73a 100644 --- a/2020/vueInterview.html +++ b/2020/vueInterview.html @@ -139,7 +139,7 @@ - + @@ -414,12 +414,12 @@

    Blog

    -
    -
    8月
    -
    31
    +
    +
    9月
    +
    08
    更新于
    -
    8月31
    +
    9月08
    2020
    @@ -644,7 +644,7 @@

    vue3

      本文标题:vue面试题记录

      文章作者:陈宇（cosyer）

      发布时间:2020年04月23日 - 00:04

      -

      最后更新:2020年08月31日 - 22:08

      +

      最后更新:2020年09月08日 - 19:09

      原始链接:http://mydearest.cn/2020/vueInterview.html

      @@ -1621,7 +1621,7 @@

      vue3

        - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
        diff --git "a/2020/windows\345\256\211\350\243\205mysql.html" "b/2020/windows\345\256\211\350\243\205mysql.html" index 4de508032..f36edc1e2 100644 --- "a/2020/windows\345\256\211\350\243\205mysql.html" +++ "b/2020/windows\345\256\211\350\243\205mysql.html" @@ -1004,7 +1004,7 @@

        - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

        diff --git "a/2020/\344\270\211\346\240\217\345\270\203\345\261\200\346\200\273\347\273\223.html" "b/2020/\344\270\211\346\240\217\345\270\203\345\261\200\346\200\273\347\273\223.html" index 718fe2e8f..0f5999cba 100644 --- "a/2020/\344\270\211\346\240\217\345\270\203\345\261\200\346\200\273\347\273\223.html" +++ "b/2020/\344\270\211\346\240\217\345\270\203\345\261\200\346\200\273\347\273\223.html" @@ -993,7 +993,7 @@

        总结
        - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

        diff --git "a/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\345\237\272\347\241\200\347\257\207).html" "b/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\345\237\272\347\241\200\347\257\207).html" index 036e15c12..e4afaeaa9 100644 --- "a/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\345\237\272\347\241\200\347\257\207).html" +++ "b/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\345\237\272\347\241\200\347\257\207).html" @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

        Blog

        -
        -
        8月
        -
        31
        +
        +
        9月
        +
        08
        更新于
        -
        8月31
        +
        9月08
        2020
        @@ -523,7 +523,7 @@

        关于node的那些事(基础篇 字数统计： - 1,876 (字) + 2,191 (字) @@ -539,7 +539,7 @@

        关于node的那些事(基础篇 阅读时长： - 8 (分钟) + 9 (分钟)

        @@ -576,8 +576,17 @@ 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        "script": {
            "serve": "node test.js arg1 arg2 arg3"
        }

        // test.js
        const arguments = process.argv.splice(2) // [arg1, arg2, arg3]

        // 结合commander
        commander.parse(process.argv)
         +

        为什么要用node（基于v8引擎运行在服务端的JS运行环境）

        +

        总结起来node有以下几个特点:简单强大，轻量可扩展．简单体现在node使用的是javascript，json来进行编码，人人都会；强大体现在非阻塞IO,可以适应分块传输数据，较慢的网络环境，尤其擅长 +高并发访问；轻量体现在node本身既是代码，又是服务器，前后端使用统一语言;可扩展体现在可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件。

        +
        +
          +
        • 全局对象 +process、console、Buffer
          • +
        +

        基于事件驱动和无阻塞适合高并发的场景，统一语言

        怎么看 nodejs 可支持高并发

        nodejs 其实并不是真正的单线程架构，因为 nodejs 还有I/O线程存在（网络I/O、磁盘I/O），这些I/O线程是由更底层的 libuv 处理，这部分线程对于开发者来 -说是透明的。 JavaScript 代码永远运行在V8上，是单线程的。

        +说是透明的。 JavaScript 代码永远运行在V8上，是单线程的。异步通过一次次循环事件队列来实现的。

        +
        1. 1. 👨提问：最近Deno很火，会不会替代node的替代品，学node是不是没有前途？
        2. 2. node 如何获取命令行传来的参数？
        3. 3. 为什么要用node（基于v8引擎运行在服务端的JS运行环境）
        4. 4. 怎么看 nodejs 可支持高并发
        5. 5. node有哪些相关的文件路径？
        6. 6. node相关path API 有哪些？
        7. 7. node的文件读取怎么做的？
        8. 8. node的url模块是用来干嘛的？
        9. 9. node的http模块创建服务与Express或Koa框架有何不同?
          1. 9.1. http
          2. 9.2. express
          3. 9.3. koa
        10. 10. Express和Koa框架中间件有什么不同？
        11. 11. koa2和egg的区别
        12. 12. 什么是模版引擎？
    @@ -1051,7 +1070,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\350\277\233\351\230\266\347\257\207).html" "b/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\350\277\233\351\230\266\347\257\207).html" index 075900f91..5891d45fa 100644 --- "a/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\350\277\233\351\230\266\347\257\207).html" +++ "b/2020/\345\205\263\344\272\216node\347\232\204\351\202\243\344\272\233\344\272\213(\350\277\233\351\230\266\347\257\207).html" @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

    Blog

    -
    -
    8月
    -
    31
    +
    +
    9月
    +
    08
    更新于
    -
    8月31
    +
    9月08
    2020
    @@ -523,7 +523,7 @@

    关于node的那些事(进阶篇 字数统计： - 1,752 (字) + 1,802 (字) @@ -611,8 +611,11 @@

    两个node程序之间怎样交互?

    通过fork，原理是子程序用process.on来监听父程序的消息，用 process.send给子程序发消息，父程序里用child.on,child.send进行交互，来实现父进程和子 +

    两个node程序之间怎样交互?

    通过fork，原理是子程序用process.on来监听父程序的消息，用 process.send给父程序发消息，父程序里用child.on,child.send进行交互，来实现父进程和子 进程互相发送消息。

    +
    +

    child-process和process的stdin,stdout,stderror是一样的吗?概念都是一样的，输入，输出，错误，都是流．区别是在父程序眼里，子程序的stdout是输入流，stdin是输出流

    +

    执行中间件（洋葱模型）

    我们通过 use 注册中间件，中间件函数有两个参数第一个是上下文，第二个是 next，在中间件函数执行过程中，若遇到 next() ，那么就会进入到下一个中间件中执 行，下一个中间执行完成后，在返回上一个中间件执行 next() 后面的方法，这便是中间件的执行逻辑。

    介绍下 stream

    流在 nodejs 用的很广泛，但对于大部分开发者来说，更多的是使用流，比如说 HTTP 中的 request respond ，标准输入输出，文件读取 @@ -661,7 +664,7 @@

    关于node的那些事(进阶篇)

    文章作者:陈宇（cosyer）

    发布时间:2020年07月02日 - 00:07

    -

    最后更新:2020年08月31日 - 01:08

    +

    最后更新:2020年09月08日 - 19:09

    原始链接:http://mydearest.cn/2020/%E5%85%B3%E4%BA%8Enode%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B(%E8%BF%9B%E9%98%B6%E7%AF%87).html

    @@ -1010,7 +1013,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\211\215\347\253\257\345\212\250\347\224\273\347\232\204\345\256\236\347\216\260\346\226\271\345\274\217\346\200\273\347\273\223.html" "b/2020/\345\211\215\347\253\257\345\212\250\347\224\273\347\232\204\345\256\236\347\216\260\346\226\271\345\274\217\346\200\273\347\273\223.html" index 47e2fed9c..147cd192e 100644 --- "a/2020/\345\211\215\347\253\257\345\212\250\347\224\273\347\232\204\345\256\236\347\216\260\346\226\271\345\274\217\346\200\273\347\273\223.html" +++ "b/2020/\345\211\215\347\253\257\345\212\250\347\224\273\347\232\204\345\256\236\347\216\260\346\226\271\345\274\217\346\200\273\347\273\223.html" @@ -998,7 +998,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\244\247\346\226\207\344\273\266\345\210\206\347\211\207\344\270\212\344\274\240\344\274\230\345\214\226.html" "b/2020/\345\244\247\346\226\207\344\273\266\345\210\206\347\211\207\344\270\212\344\274\240\344\274\230\345\214\226.html" index 56cf4de1a..6f273cd6b 100644 --- "a/2020/\345\244\247\346\226\207\344\273\266\345\210\206\347\211\207\344\270\212\344\274\240\344\274\230\345\214\226.html" +++ "b/2020/\345\244\247\346\226\207\344\273\266\345\210\206\347\211\207\344\270\212\344\274\240\344\274\230\345\214\226.html" @@ -984,7 +984,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\246\202\344\275\225\345\234\250 create-react-app \344\270\255\344\275\277\347\224\250 CSS Modules.html" "b/2020/\345\246\202\344\275\225\345\234\250 create-react-app \344\270\255\344\275\277\347\224\250 CSS Modules.html" index ea67d30e4..a95c73589 100644 --- "a/2020/\345\246\202\344\275\225\345\234\250 create-react-app \344\270\255\344\275\277\347\224\250 CSS Modules.html" +++ "b/2020/\345\246\202\344\275\225\345\234\250 create-react-app \344\270\255\344\275\277\347\224\250 CSS Modules.html" @@ -982,7 +982,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\256\236\347\216\260compose.html" "b/2020/\345\256\236\347\216\260compose.html" index c7d5d6939..a33c9566f 100644 --- "a/2020/\345\256\236\347\216\260compose.html" +++ "b/2020/\345\256\236\347\216\260compose.html" @@ -978,7 +978,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\256\236\347\216\260\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" "b/2020/\345\256\236\347\216\260\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" index 6d9dd8901..c633109b0 100644 --- "a/2020/\345\256\236\347\216\260\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" +++ "b/2020/\345\256\236\347\216\260\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" @@ -966,7 +966,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\351\235\236\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\346\221\230\350\246\201\343\200\201\346\225\260\345\255\227\347\255\276\345\220\215\343\200\201\346\225\260\345\255\227\350\257\201\344\271\246.html" "b/2020/\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\351\235\236\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\346\221\230\350\246\201\343\200\201\346\225\260\345\255\227\347\255\276\345\220\215\343\200\201\346\225\260\345\255\227\350\257\201\344\271\246.html" index 2cfdea090..945279cb9 100644 --- "a/2020/\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\351\235\236\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\346\221\230\350\246\201\343\200\201\346\225\260\345\255\227\347\255\276\345\220\215\343\200\201\346\225\260\345\255\227\350\257\201\344\271\246.html" +++ "b/2020/\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\351\235\236\345\257\271\347\247\260\345\212\240\345\257\206\343\200\201\346\221\230\350\246\201\343\200\201\346\225\260\345\255\227\347\255\276\345\220\215\343\200\201\346\225\260\345\255\227\350\257\201\344\271\246.html" @@ -997,7 +997,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\347\256\227\346\263\225\351\242\230\347\273\203\344\271\240.html" "b/2020/\347\256\227\346\263\225\351\242\230\347\273\203\344\271\240.html" index 979124650..50e8531b0 100644 --- "a/2020/\347\256\227\346\263\225\351\242\230\347\273\203\344\271\240.html" +++ "b/2020/\347\256\227\346\263\225\351\242\230\347\273\203\344\271\240.html" @@ -143,7 +143,7 @@ - + @@ -418,12 +418,12 @@

    Blog

    -
    -
    8月
    -
    31
    +
    +
    9月
    +
    08
    更新于
    -
    8月31
    +
    9月08
    2020
    @@ -528,7 +528,7 @@

    算法题练习

    字数统计： - 2,017 (字) + 2,123 (字) @@ -544,7 +544,7 @@

    算法题练习

    阅读时长： - 9 (分钟) + 10 (分钟)
    @@ -646,7 +646,7 @@ 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function fn() {
      const arr = []
      for (let i = 2; i <= 100; i++) {
        let bl = false
        for (let j = 2; j <= i; j++) {
          if (i === j) continue
          i % j === 0 && (bl = true)
        }
        !bl && arr.push(i)
      }
      return arr
    }
    console.log(fn())
    -

    给定一个整数数组，实现快速排序算法进行升序排列。如[2, 5, 8, 9, 3] =>[2, 3, 5, 8, 9]

    解析：（分治法） +

    (数组中第K大元素)给定一个整数数组，实现快速排序算法进行升序排列。如[2, 5, 8, 9, 3] =>[2, 3, 5, 8, 9]

    解析：（分治法） 将一个列表分割为左右两块，然后再将字列表再进行分割为左右两块，如何反复，知道子元素长度为1时，结束！

    • 代码实现
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      function qSort(arr) {
        if (arr.length <= 1) return arr
        const index = Math.floor(arr.length / 2)
        const midVal = arr.splice(index, 1)[0]
        const left = [],
          right = []
        arr.forEach(item => {
          if (item < midVal) left.push(item)
          else right.push(item)
        })
        return [...qSort(left), midVal, ...qSort(right)]
      }
      qSort([2, 5, 8, 9, 3])
      @@ -665,8 +665,9 @@

      时间复杂度:O(n)空间复杂度O(1)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      function shuffle(arr) {
        var newArr = [];
        for(var i = 0, len = arr.length; i < len; i++) {
          var j = Math.floor(Math.random() * (len - i));
          newArr[i] = arr[j];
          arr.splice(j, 1)
        }
        return newArr;
      }

      两数之和

      [2,7,11,88,34],9 => [0,1]

      双循环

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      function twoSum(arr, target) {
        var result = []
        for (let m=0;m<arr.length -1;m++) {
          for (let n= m+1;n<arr.length;n++) {
            if(arr[m]+arr[n]===target){
              result.push(m,n)
              return result
            }
          }
        }
      }
      -

      Map

      1
      2
      3
      4
      5
      6
      7
      8
      9
      function(arr, target) {
       let result = new Map()
          for(let i=0;i<arr.length;i++){
            if(result.has(target-arr[i])){
              return [arrs.get(target-nums[i]),i] 
            }
            result.set(nums[i],i)
          }
      };
      +

      Map

      1
      2
      3
      4
      5
      6
      7
      8
      9
      function(arr, target) {
       let result = new Map()
          for(let i=0;i<arr.length;i++){
            if(result.has(target-arr[i])){
              return [result.get(target-nums[i]),i] 
            }
            result.set(nums[i],i)
          }
      };

      假设有130个苹果，你我轮流拿，每次可拿1-5个，如何保证你拿到最后一个苹果

      巴什博奕嘛保证剩最后6个给对面取，先取者可必胜，第一次取4个，剩126个，对面随便取，取的时候保证一直剩余6的倍数，最后一定出现剩6个苹果的情况。

      +

      手动控制并发请求fetchWithLimit

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      function fetchWithLimit(urls, max, callback) {
        const urlCount = urls.length;
        const requestsQueue = [];
        const results = [];
        let i = 0;
        const handleRequest = (url) => {
          const req = fetch(url).then(res => {
            const len = results.push(res);
            if (len < urlCount && i + 1 < urlCount) {
              requestsQueue.shift();
              handleRequest(urls[++i])
            } else if (len === urlCount) {
              'function' === typeof callback && callback(results)
            }
          }).catch(e => {
            results.push(e)
          });
          if (requestsQueue.push(req) < max) {
            handleRequest(urls[++i])
          }
        };
        handleRequest(urls[i])
      }
    @@ -698,7 +699,7 @@

    算法题练习

    文章作者:陈宇（cosyer）

    发布时间:2020年04月23日 - 01:04

    -

    最后更新:2020年08月31日 - 20:08

    +

    最后更新:2020年09月08日 - 19:09

    原始链接:http://mydearest.cn/2020/%E7%AE%97%E6%B3%95%E9%A2%98%E7%BB%83%E4%B9%A0.html

    @@ -1002,7 +1003,7 @@

    1. 1. 五大算法
      1. 1.1. 数据树
      2. 1.2. 写出一个方法输出1-100内的所有素数
      3. 1.3. 给定一个整数数组，实现快速排序算法进行升序排列。如[2, 5, 8, 9, 3] =>[2, 3, 5, 8, 9]
      4. 1.4. 求一个字符串中最长的非重复连续子串
      5. 1.5. 求字符串数组的最长公共前缀
      6. 1.6. 实现二叉树(构建、遍历)
      7. 1.7. 二叉树的非递归遍历
        1. 1.7.1. 深度优先非递归(栈的先进后出)DFS
        2. 1.7.2. 广度优先非递归(队列的先进先出)BFS
      8. 1.8. 一个数组，里面是排好序的数字，输入一个数字怎么能找到它的index
        1. 1.8.1. 把这些数字放到对象的key里，index变成value，然后直接取 时间复杂度O(n) => O(1)
        2. 1.8.2. 二分法查找
      9. 1.9. 洗牌(乱序)算法
        1. 1.9.1. 时间复杂度:O(n²)
        2. 1.9.2. 时间复杂度:O(n)空间复杂度O(1)
      10. 1.10. 两数之和
        1. 1.10.1. 双循环
        2. 1.10.2. Map
      11. 1.11. 假设有130个苹果，你我轮流拿，每次可拿1-5个，如何保证你拿到最后一个苹果

    +
    1. 1. 五大算法
      1. 1.1. 数据树
      2. 1.2. 写出一个方法输出1-100内的所有素数
      3. 1.3. (数组中第K大元素)给定一个整数数组，实现快速排序算法进行升序排列。如[2, 5, 8, 9, 3] =>[2, 3, 5, 8, 9]
      4. 1.4. 求一个字符串中最长的非重复连续子串
      5. 1.5. 求字符串数组的最长公共前缀
      6. 1.6. 实现二叉树(构建、遍历)
      7. 1.7. 二叉树的非递归遍历
        1. 1.7.1. 深度优先非递归(栈的先进后出)DFS
        2. 1.7.2. 广度优先非递归(队列的先进先出)BFS
      8. 1.8. 一个数组，里面是排好序的数字，输入一个数字怎么能找到它的index
        1. 1.8.1. 把这些数字放到对象的key里，index变成value，然后直接取 时间复杂度O(n) => O(1)
        2. 1.8.2. 二分法查找
      9. 1.9. 洗牌(乱序)算法
        1. 1.9.1. 时间复杂度:O(n²)
        2. 1.9.2. 时间复杂度:O(n)空间复杂度O(1)
      10. 1.10. 两数之和
        1. 1.10.1. 双循环
        2. 1.10.2. Map
      11. 1.11. 假设有130个苹果，你我轮流拿，每次可拿1-5个，如何保证你拿到最后一个苹果
      12. 1.12. 手动控制并发请求fetchWithLimit

    @@ -1047,7 +1048,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\350\247\202\345\257\237\350\200\205\346\250\241\345\274\217VS\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" "b/2020/\350\247\202\345\257\237\350\200\205\346\250\241\345\274\217VS\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" index adda3e25b..fb3b970fb 100644 --- "a/2020/\350\247\202\345\257\237\350\200\205\346\250\241\345\274\217VS\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" +++ "b/2020/\350\247\202\345\257\237\350\200\205\346\250\241\345\274\217VS\345\217\221\345\270\203\350\256\242\351\230\205\346\250\241\345\274\217.html" @@ -975,7 +975,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\350\266\205\350\257\246\347\273\206\347\232\204TypeScript\346\225\231\347\250\213.html" "b/2020/\350\266\205\350\257\246\347\273\206\347\232\204TypeScript\346\225\231\347\250\213.html" index 87715704e..f1a42a920 100644 --- "a/2020/\350\266\205\350\257\246\347\273\206\347\232\204TypeScript\346\225\231\347\250\213.html" +++ "b/2020/\350\266\205\350\257\246\347\273\206\347\232\204TypeScript\346\225\231\347\250\213.html" @@ -1229,7 +1229,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\351\235\242\350\257\225\347\273\217\351\252\214\345\210\206\344\272\253.html" "b/2020/\351\235\242\350\257\225\347\273\217\351\252\214\345\210\206\344\272\253.html" index c555de841..add3da9be 100644 --- "a/2020/\351\235\242\350\257\225\347\273\217\351\252\214\345\210\206\344\272\253.html" +++ "b/2020/\351\235\242\350\257\225\347\273\217\351\252\214\345\210\206\344\272\253.html" @@ -1009,7 +1009,7 @@

    最后
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\351\235\242\350\257\225\351\227\256\351\242\230\351\233\206\351\224\246.html" "b/2020/\351\235\242\350\257\225\351\227\256\351\242\230\351\233\206\351\224\246.html" index 64f6812f1..1d7bb88d5 100644 --- "a/2020/\351\235\242\350\257\225\351\227\256\351\242\230\351\233\206\351\224\246.html" +++ "b/2020/\351\235\242\350\257\225\351\227\256\351\242\230\351\233\206\351\224\246.html" @@ -1049,7 +1049,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/2020/\351\274\240\346\240\207\347\202\271\345\207\273\347\210\261\345\277\203\345\222\214\345\257\214\345\274\272\347\211\271\346\225\210.html" "b/2020/\351\274\240\346\240\207\347\202\271\345\207\273\347\210\261\345\277\203\345\222\214\345\257\214\345\274\272\347\211\271\346\225\210.html" index 31f58216d..abf211780 100644 --- "a/2020/\351\274\240\346\240\207\347\202\271\345\207\273\347\210\261\345\277\203\345\222\214\345\257\214\345\274\272\347\211\271\346\225\210.html" +++ "b/2020/\351\274\240\346\240\207\347\202\271\345\207\273\347\210\261\345\277\203\345\222\214\345\257\214\345\274\272\347\211\271\346\225\210.html" @@ -953,7 +953,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/React Refs\345\222\214DOM\346\217\255\345\257\206.html" "b/React Refs\345\222\214DOM\346\217\255\345\257\206.html" index f4c1b7ea2..1d55e04e6 100644 --- "a/React Refs\345\222\214DOM\346\217\255\345\257\206.html" +++ "b/React Refs\345\222\214DOM\346\217\255\345\257\206.html" @@ -966,7 +966,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/[1,2,3]\346\230\257JSON\345\220\227\357\274\237.html" "b/[1,2,3]\346\230\257JSON\345\220\227\357\274\237.html" index 62a53334e..edfd007f0 100644 --- "a/[1,2,3]\346\230\257JSON\345\220\227\357\274\237.html" +++ "b/[1,2,3]\346\230\257JSON\345\220\227\357\274\237.html" @@ -997,7 +997,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/about/index.html b/about/index.html index 9045cfe68..d474c72de 100644 --- a/about/index.html +++ b/about/index.html @@ -671,7 +671,7 @@

    关于

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git "a/angular7\350\257\246\350\247\243.html" "b/angular7\350\257\246\350\247\243.html" index e3a214b90..7b4830315 100644 --- "a/angular7\350\257\246\350\247\243.html" +++ "b/angular7\350\257\246\350\247\243.html" @@ -1033,7 +1033,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/archives/2018/04/index.html b/archives/2018/04/index.html index 4f5078cf4..a57e2fefe 100644 --- a/archives/2018/04/index.html +++ b/archives/2018/04/index.html @@ -796,7 +796,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/archives/2018/06/index.html b/archives/2018/06/index.html index 823ad88a8..fe3cf2d64 100644 --- a/archives/2018/06/index.html +++ b/archives/2018/06/index.html @@ -645,7 +645,7 @@

    1. 数据树

        +

      • 二叉树: 最多只有两个子节点

        +
          +
        • 完全二叉树
            +
          • 若设二叉树的深度为k，除第 k 层外，其它各层 (1～k-1) 的结点数都达到最大个数，第k 层所有的结点都连续集中在最左边
            • +
          +
          • +
        • 满二叉树
            +
          • 深度为 h, 有 n 个节点，且满足 n = 2^h - 1
            • +
          • -

        • 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

          +
        • 平衡二叉树
            +
          • 它或者是一颗空树，或它的左子树和右子树的深度之差(平衡因子)的绝对值不超过1，且它的左子树和右子树都是一颗平衡二叉树
            • +
          • -

        • IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

          +
        • 最优二叉树(哈夫曼树)
            +
          • 树的带权路径长度达到最小，称这样的二叉树为最优二叉树，也称为哈夫曼树(Huffman Tree)。哈夫曼树是带权路径长度最短的树，权值较大的结点离根较近。
            • +
          • -
    -

    浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;}

    -

    这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

    -
    1
    2
    3
    4
    5
    6
    .bb{
        background-color:red;/*所有识别*/
        background-color:#00deff\9; /*IE6、7、8识别*/
        +background-color:#a200ff;/*IE6、7识别*/
        _background-color:#1e0bd1;/*IE6识别*/
    }
    + + +

  • 二叉查找树: 是一种特殊的二叉树，能有效地提高查找效率

    +
      +
    • 小值在左，大值在右
      • +
    • 节点 n 的所有左子树值小于 n，所有右子树值大于 n
      • +
    +
    • + +

    binary-search-tree

    +
      +
    • 遍历节点
        +
      • 前序遍历
          +
        • 根节点
          • +
        • 访问左子节点，回到 1
          • +
        • 访问右子节点，回到 1
          • +
        +
        • +
      • 中序遍历
          +
        • 先访问到最左的子节点
          • +
        • 访问该节点的父节点
          • +
        • 访问该父节点的右子节点， 回到 1
          • +
        +
        • +
      • 后序遍历
          +
        • 先访问到最左的子节点
          • +
        • 访问相邻的右节点
          • +
        • 访问父节点， 回到 1
          • +
        +
        • +
      +
      • +
    +

    DLR–前序遍历（根在前，从左往右，一棵树的根永远在左子树前面，左子树又永远在右子树前面 ）

    +

    dlr

    +

    LDR–中序遍历（根在中，从左往右，一棵树的左子树永远在根前面，根永远在右子树前面）

    +

    ldr

    +

    LRD–后序遍历（根在后，从左往右，一棵树的左子树永远在右子树前面，右子树永远在根前面）

    +

    lrd

    +
      +
    • 插入与删除节点
      • +
    - + 阅读全文 »
    @@ -1763,12 +1789,12 @@

    -
    +
    9月
    -
    05
    +
    08
    更新于
    -
    9月05
    +
    9月08
    2020
    @@ -1781,8 +1807,8 @@

    - @@ -1797,7 +1823,7 @@

    - +

    @@ -1828,8 +1854,8 @@

    发表于 -

    @@ -1913,21 +1939,24 @@

    - -

    面试遇到了问题:<p>中能不能插入<div>? 插入<div>会如何?

    -

    先直接实践下：

    -

    div1

    -

    我们可以看到,

    把

    分成了两段, 并且div外字段并不在

    内。把div变成行内块级元素也不行。

    -

    div2

    -

    解答: -可以在HTML标准(https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)中看到,

    -
    -

    虽然是块级元素, 但是只能包含行内元素, 不能包含块级元素(包括

    自己)

    +

    👨提问：注册路由时 app.get、app.use、app.all 的区别是什么？

    app.use(path,callback)

    +

    app.use是express用来调用中间件的方法。中间件通常不处理请求和响应，一般只处理输入数据，并将其交给队列中的下一个处理程序，比如下面这个例子app.use +(‘/user’)，那么只要路径以 /user 开始即可匹配，如 /user/tree 就可以匹配。

    -

    div3

    -

    over!

    -

    - +

    app.all()

    +

    app.all 是路由中指代所有的请求方式，用作路由处理，匹配完整路径，在app.use之后可以理解为包含了app.get、app.post等的定义，比如app.all(‘/ +user/tree’),能同时覆盖：get(‘/user/tree’) 、 post(‘/user/tree’)、 put(‘/user/tree’) ,不过相对于app.use()的前缀匹配，它则是匹配具体的路 +由。

    +
    +

    all完整匹配，use只匹配前缀

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

    @@ -1981,12 +2010,12 @@

    -
    +
    9月
    -
    03
    +
    08
    更新于
    -
    9月03
    +
    9月08
    2020
    @@ -1999,8 +2028,8 @@

    - @@ -2015,7 +2044,7 @@

    - +

    @@ -2046,8 +2075,8 @@

    发表于 -

    @@ -2131,18 +2160,24 @@

    -

    JS的相关知识点比较繁杂，特此开篇整理一波，方便回顾总结查阅。

    +

    👨提问：最近Deno很火，会不会替代node的替代品，学node是不是没有前途？

    +

    莫慌，Node依旧是社区热捧的服务器端 JavaScript 运行环境，Deno的出现其实本质上是完善现阶段的Node（新轮子），包括原生支持TS、安全性、支持ES +Module浏览器模块、等特征。万变不离其宗，虽然有了Deno，将来可能就不需要 Node.js，但是新事物总是需要不断推演和考验后，所以这一点而言，Node短时间内很 +难被替换，毕竟背后依附着强大社区的支撑。

    +
    +

    node 如何获取命令行传来的参数？

    +

    process.argv。process是一个全局变量，它提供当前 Node.js 进程的有关信息，而process.argv 属性则返回一个数组，数组中的信息包括启动Node.js进程时的命令行参数。

    +
      -
    • 运行在宿主环境环境中，比如浏览器或node环境
      • -
    • 不用预编译，直接解释执行代码
      • -
    • 是弱类型语言，较为灵活
      • -
    • 与操作系统无关，跨平台的语言
      • -
    • 脚本语言，解释性语言
      • +
    • process.argv[0] : 返回启动Node.js进程的可执行文件所在的绝对路径
      • +
    • process.argv[1] : 为当前执行的JavaScript文件路径
      • +
    • process.argv.splice(2) : 移除前两者后，剩余的元素为其他命令行参数(也就是我们自定义部分)
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    "script": {
        "serve": "node test.js arg1 arg2 arg3"
    }

    // test.js
    const arguments = process.argv.splice(2) // [arg1, arg2, arg3]

    // 结合commander
    commander.parse(process.argv)
    - + 阅读全文 »
    @@ -2200,12 +2235,12 @@

    -
    +
    9月
    -
    03
    +
    08
    更新于
    -
    9月03
    +
    9月08
    2020
    @@ -2218,8 +2253,8 @@

    - @@ -2234,7 +2269,7 @@

    - +

    @@ -2265,8 +2300,8 @@

    发表于 -

    @@ -2350,11 +2385,24 @@

    -

    埋点的需求：一个网站上线,开发者除了保证网站功能正常,体验优好之外,还有一项重要的工作是数据收集,通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求,导流方式是否有效,新功能上线后是否效果是否达到设计初衷,根据数据指引有效优化产品体验以及发现新的产品方向是产品经理的必备技能,而如何采集准确并且足够的网站数据则应该是开发者的责任.在大数据处理能力越来越强下,以及机器学习等依赖数据哺育的工具进化下,采集足够多的数据往往是网站向着良性方向进化的必备条件

    +

    vue 双向绑定的原理

    采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，实现视图刷新。

    +

    具体流程： +Vue中先遍历data选项中所有的属性（发布者）用Object.defineProperty劫持这些属性将其转为getter/setter。读取数据时候会触发getter。修改数据时会触发setter。

    +

    然后给每个属性对应new Dep()，Dep是专门收集依赖、删除依赖、向依赖发送消息的。先让每个依赖设置在Dep.target上，在Dep中创建一个依赖数组，先判断Dep.target是否已经在依赖中存在，不存在的话添加到依赖数组中完成依赖收集，随后将Dep.target置为上一个依赖。

    +

    组件在挂载过程中都会new一个Watcher实例。这个实例就是依赖（订阅者）。Watcher第二参数是一个函数，此函数作用是更新且渲染节点。在首次渲染过程，会自动调用Dep方法来收集依赖，收集完成后组件中每个数据都绑定上该依赖。当数据变化时就会在setter中通知对应的依赖进行更新。在更新过程中要先读取数据，就会触发Wacther的第二个函数参数。一触发就再次自动调用Dep方法收集依赖，同时在此函数中运行patch（diff运算)来更新对应的DOM节点，完成了双向绑定。

    +
      +
    • 每一个组件默认都会创建一个 Watcher，自定义的 watch 和 computed 方法也会创建 Watcher
      • +
    +

    Object.defineProperty()实现双向绑定的缺点

      +
    1. 只能监听某个属性，不能监听整个对象
      2. +
    2. 需要使用for in遍历对象属性绑定监听
      3. +
    3. 不能监听数组，需要重写数组方法进行特异性操作
      4. +
    4. 会污染原对象
      5. +
    - + 阅读全文 »
    @@ -2412,12 +2460,12 @@

    -
    +
    9月
    -
    03
    +
    08
    更新于
    -
    9月03
    +
    9月08
    2020
    @@ -2446,7 +2494,7 @@

    - +

    @@ -2477,8 +2525,8 @@

    发表于 -

    @@ -2562,19 +2610,23 @@

    -

    A: “这个接口我传个 JSON 给你，格式是这样的 ‘[1, 2, 3]’”

    -

    B: “等下，这不是数组吗，JSON 应该有键啊，类似这样才行’{ “key”: [1, 2, 3] }’”

    -

    A: “不，这就是 JSON 格式的数据”

    -

    B: “啊，是吗？” -你是否也有这样的疑惑？ wappalyzer chrome网页分析插件

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

    面试遇到了问题:<p>中能不能插入<div>? 插入<div>会如何?

    +

    先直接实践下：

    +

    div1

    +
    +

    我们可以看到,

    把

    分成了两段, 并且div外字段并不在

    内。把div变成行内块级元素也不行。

    +

    +

    div2

    +

    解答: +可以在HTML标准(https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)中看到,

    +
    +

    虽然是块级元素, 但是只能包含行内元素, 不能包含块级元素(包括

    自己)

    +
    +

    div3

    +

    over!

    + +

    @@ -2833,7 +2885,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/interview.html b/interview.html index c291f4761..566606e1c 100644 --- a/interview.html +++ b/interview.html @@ -147,7 +147,7 @@ - + @@ -422,12 +422,12 @@

    Blog

    -
    +
    9月
    -
    07
    +
    08
    更新于
    -
    9月07
    +
    9月08
    2020
    @@ -532,7 +532,7 @@

    面试题整理归纳

    字数统计： - 7,853 (字) + 7,921 (字) @@ -857,13 +857,19 @@

    差异

      -

    1. CommonJS 模块输出的是一个值的浅拷贝，ES6 模块输出的是值的引用。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6 模块的运行机制与 +

    2. CommonJS 模块输出的是一个值的浅拷贝，ES6 模块输出的是值的引用。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令 import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那 个模块里面去取值。

      3. -

    3. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块就是对象，即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读 +

    4. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块就是对象，即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读 取方法，这种加载称为“运行时加载”。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

      5. +

    5. CommonJs导入的模块路径可以是一个表达式，因为它使用的是require()方法；而ES6 Modules只能是字符串。

      +
      6. +

    6. CommonJS this指向当前模块，ES6 Modules this指向undefined

      +
      7. +

    7. ES6 Modules中没有这些顶层变量：arguments、require、module、exports、filename、dirname

      +

    js的几种继承方式？

    • 使用对象冒充实现继承
      • @@ -2281,6 +2287,44 @@

      前后端分离的项目如何seo

        +
      1. 使用prerender。
        2. +
      2. 先去 https://www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫，就用nginx方向代理到我们自己用nodejs + +puppeteer实现的爬虫服务器上，然后用你的爬虫服务器爬自己的前后端分离的前端项目页面，增加扒页面的接收延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即 +可。
        3. +
      +

      常见模板语言

        +
      • jade
        • +
      • pug
        • +
      • thymeleaf
        • +
      +

      BFF(Back-end for Front-end)中间层

      前端分层和建模，实现上没太大限制，就是一层nodejs，能做请求转发和数据转化即可。

      +
        +
      • 优点
        • +
      +
        +

      1. 前后端彻底分离，即便是后期有微服务迁移，也不需改动前端代码

        +
        2. +

      2. 业务更向前靠拢，琐碎的api由前端开发自己决定，更适配前端框架

        +
        3. +

      3. BFF可以自开mock，插件也能生成API文档，相比后端单开这类服务要方便些吧

        +
        4. +

      4. 留给后端更清晰的服务边界，只需要提供粗粒度的接口即可

        +
        5. +
      +
        +
      • 缺点
        • +
      +
        +

      1. 中间层转发会增加请求延迟。

        +
        2. +

      2. 需要保证端到端测试

        +
        3. +

      3. 必须随时准备好后端异常请求

        +
        4. +

      4. BFF分层会增加开发成本

        +
        5. +
    @@ -2312,7 +2356,7 @@

    面试题整理归纳

    文章作者:陈宇（cosyer）

    发布时间:2018年06月23日 - 10:06

    -

    最后更新:2020年09月07日 - 22:09

    +

    最后更新:2020年09月08日 - 19:09

    原始链接:http://mydearest.cn/interview.html

    @@ -2661,7 +2705,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/java -jar\344\270\216nohup.html" "b/java -jar\344\270\216nohup.html" index 72c176e0e..2e72982d2 100644 --- "a/java -jar\344\270\216nohup.html" +++ "b/java -jar\344\270\216nohup.html" @@ -987,7 +987,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/jssummary.html b/jssummary.html index c8d91252e..fa63d224d 100644 --- a/jssummary.html +++ b/jssummary.html @@ -139,7 +139,7 @@ - + @@ -413,12 +413,12 @@

    Blog

    -
    +
    9月
    -
    03
    +
    08
    更新于
    -
    9月03
    +
    9月08
    2020
    @@ -523,7 +523,7 @@

    JavaScript整理总结

    字数统计： - 11,289 (字) + 11,290 (字) @@ -843,7 +843,7 @@ 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var myIterable = {};
    myIterable[Symbol.iterator] = function* () {
        yield 1;
        yield 2;
        yield 3;
    };

    for (let value of myIterable) { 
        console.log(value); 
    }
    // 1
    // 2
    // 3

    or
    [...myIterable]; // [1, 2, 3]

    3行实现Promise

    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
    function Promise (fn) {
        this.then = cb => this.cb = cb
        this.resolve = data => this.cb(data)
        fn(this.resolve)
    }
    // 使用
    new Promise((resolve) => {
        setTimeout(() => {
            resolve("延时执行")
        }, 1000)
    }).then((data) => {
        console.log(data)
    })

    function Promise(fn) {
      var value = null,
          callbacks = [];  //callbacks为数组，因为可能同时有很多个回调

      this.then = function (onFulfilled) {
          callbacks.push(onFulfilled);
      };

      function resolve(value) {
          callbacks.forEach(function (callback) {
              callback(value);
          });
      }

      fn(resolve);
    }
      -
    • 简单版
      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
      function myPromise(constructor) {
          let self = this;
          self.status = "pending";
          // resolved时候的值
          self.value = undefined;
          // rejected时候的值
          self.reason = undefined;
          // 存放成功回调的数组
          self.onResolveCallbacks = [];
          // 存放失败回调的数组
          self.onRejectedCallbacks = [];
          function resolve(value) {
              if(self.status === 'pending') {
                  self.value = value;
                  self.status = "resolved";
                  self.onResolveCallbacks.forEach(cb => cd(self.value))
              }
          }
          function reject(reason) {
              if(self.status === 'pending') {
                  self.reason = reason;
                  self.status = "rejected";
                  self.onRejectedCallbacks.forEach(cb => cd(self.value))
              }
          }
          // 捕获构造异常
          try {
              constructor(resolve, reject);
          } catch(e) {
              reject(e);
          }
      }

      myPromise.prototype.then = function(onFulfilled, onRejected) {
        // let self = this;
        // switch(self.status) {
        //     case "resolved":
        //         resolved(self.value);
        //         break;
        //     case "rejected":
        //         rejected(self.reason);
        //         break;
        //     default:

        // 如果成功和失败的回调没有传，表示这个then没有任何逻辑，只负责把值往后抛
        onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : value => value
        onRejected = typeof onRejected == 'function' ? onRejected : reason => { throw reason }
        let self = this;
        let promise2;
        // 实现链式调用，每一种状态都要返回的是一个promise实例
        if(self.status == "resolved"){ // 如果promise状态已经是成功态，onFulfilled直接取值
          return promise2 = new Promise(function(resolve, reject){
            setTimeout(function(){  // 保证返回的promise是异步
              try{
                onFulfilled(self.value)
              } catch (e){
                //  如果执行成功的回调过程中出错，用错误原因把promise2 reject
                reject(e)
              }
            })
          })
        }
        if(self.status == "rejected"){
          return promise2 = new Promise(function(resolve, reject){
            setTimeout(function(){
              try{
                onRejected(self.reason)
              } catch (e){
                reject(e)
              }
            })
          })
        }
        if(self.status === "pending"){
          return promise2 = new Promise(function(resolve, reject){
            // pending 状态时就会把所有的回调函数都添加到实例中的两个堆栈中暂存，等状态改变后依次执行，其实这个过程就是观察者模式
            self.onResolveCallbacks.push(function(){
              setTimeout(function(){
                try{
                  onFulfilled(self.value)
                } catch(e){
                  reject(e)
                }
              })
            })
          })
          self.onRejectCallbacks.push(){
            setTimeout(function(){
              try{
                onRejected(self.reason)
              } catch(e){
                reject(e)
              }
            })
          }
        }
      }
      +
    • 简单版
      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
      function myPromise(constructor) {
          let self = this;
          self.status = "pending";
          // resolved时候的值
          self.value = undefined;
          // rejected时候的值
          self.reason = undefined;
          // 存放成功回调的数组
          self.onResolveCallbacks = [];
          // 存放失败回调的数组
          self.onRejectedCallbacks = [];
          function resolve(value) {
              if(self.status === 'pending') {
                  self.value = value;
                  self.status = "resolved";
                  self.onResolveCallbacks.forEach(cb => cb(self.value))
              }
          }
          function reject(reason) {
              if(self.status === 'pending') {
                  self.reason = reason;
                  self.status = "rejected";
                  self.onRejectedCallbacks.forEach(cb => cb(self.value))
              }
          }
          // 捕获构造异常
          try {
              constructor(resolve, reject);
          } catch(e) {
              reject(e);
          }
      }

      myPromise.prototype.then = function(onFulfilled, onRejected) {
        // let self = this;
        // switch(self.status) {
        //     case "resolved":
        //         resolved(self.value);
        //         break;
        //     case "rejected":
        //         rejected(self.reason);
        //         break;
        //     default:

        // 如果成功和失败的回调没有传，表示这个then没有任何逻辑，只负责把值往后抛
        onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : value => value
        onRejected = typeof onRejected == 'function' ? onRejected : reason => { throw reason }
        let self = this;
        let promise2;
        // 实现链式调用，每一种状态都要返回的是一个promise实例
        if(self.status == "resolved"){ // 如果promise状态已经是成功态，onFulfilled直接取值
          return promise2 = new Promise(function(resolve, reject){
            setTimeout(function(){  // 保证返回的promise是异步
              try{
                onFulfilled(self.value)
              } catch (e){
                //  如果执行成功的回调过程中出错，用错误原因把promise2 reject
                reject(e)
              }
            })
          })
        }
        if(self.status == "rejected"){
          return promise2 = new Promise(function(resolve, reject){
            setTimeout(function(){
              try{
                onRejected(self.reason)
              } catch (e){
                reject(e)
              }
            })
          })
        }
        if(self.status === "pending"){
          return promise2 = new Promise(function(resolve, reject){
            // pending 状态时就会把所有的回调函数都添加到实例中的两个堆栈中暂存，等状态改变后依次执行，其实这个过程就是观察者模式
            self.onResolveCallbacks.push(function(){
              setTimeout(function(){
                try{
                  onFulfilled(self.value)
                } catch(e){
                  reject(e)
                }
              })
            })
            self.onRejectCallbacks.push(function(){
              setTimeout(function(){
                try{
                  onRejected(self.reason)
                } catch(e){
                  reject(e)
                }
              })
            })
          })
        }
      }

    现一个函数，将一个字符串中的空格替换成“%20”

    1
    2
    3
    4
    5
    6
    function convertSpace2percent20(str){
      return str.replace(/\s+?/g,"%20"); //开启非贪婪模式
    }

    convertSpace2percent20("hellow world")
    // "hellow%20world"
    @@ -1313,7 +1313,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/jsthis.html b/jsthis.html index 09de69d78..123470f9f 100644 --- a/jsthis.html +++ b/jsthis.html @@ -967,7 +967,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/js\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226.html" "b/js\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226.html" index 85ab8bd62..eac2ad3dd 100644 --- "a/js\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226.html" +++ "b/js\345\207\275\346\225\260\346\237\257\351\207\214\345\214\226.html" @@ -964,7 +964,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/js\345\210\233\345\273\272\345\257\271\350\261\241\345\256\236\347\216\260\347\273\247\346\211\277.html" "b/js\345\210\233\345\273\272\345\257\271\350\261\241\345\256\236\347\216\260\347\273\247\346\211\277.html" index eca4ce152..ed6e8bad1 100644 --- "a/js\345\210\233\345\273\272\345\257\271\350\261\241\345\256\236\347\216\260\347\273\247\346\211\277.html" +++ "b/js\345\210\233\345\273\272\345\257\271\350\261\241\345\256\236\347\216\260\347\273\247\346\211\277.html" @@ -1064,7 +1064,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/js\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213.html" "b/js\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213.html" index 06bf83b3a..4b51d5fe4 100644 --- "a/js\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213.html" +++ "b/js\345\210\244\346\226\255\346\225\260\346\215\256\347\261\273\345\236\213.html" @@ -965,7 +965,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/js\345\210\244\346\226\255\346\265\217\350\247\210\345\231\250\347\261\273\345\236\213\345\222\214\350\256\277\351\227\256\346\235\245\346\272\220.html" "b/js\345\210\244\346\226\255\346\265\217\350\247\210\345\231\250\347\261\273\345\236\213\345\222\214\350\256\277\351\227\256\346\235\245\346\272\220.html" index d557187e5..a9f3ca03d 100644 --- "a/js\345\210\244\346\226\255\346\265\217\350\247\210\345\231\250\347\261\273\345\236\213\345\222\214\350\256\277\351\227\256\346\235\245\346\272\220.html" +++ "b/js\345\210\244\346\226\255\346\265\217\350\247\210\345\231\250\347\261\273\345\236\213\345\222\214\350\256\277\351\227\256\346\235\245\346\272\220.html" @@ -949,7 +949,7 @@

    方
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/links/index.html b/links/index.html index 845260c46..e142910f3 100644 --- a/links/index.html +++ b/links/index.html @@ -812,7 +812,7 @@
    本站链接信息
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/markdownGrammar.html b/markdownGrammar.html index c71810f3e..b05da9ee1 100644 --- a/markdownGrammar.html +++ b/markdownGrammar.html @@ -1009,7 +1009,7 @@

    折叠
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/mobx.html b/mobx.html index 3b034f201..2dca1b47d 100644 --- a/mobx.html +++ b/mobx.html @@ -971,7 +971,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/page/10/index.html b/page/10/index.html index 539b07908..b667c408b 100644 --- a/page/10/index.html +++ b/page/10/index.html @@ -2820,7 +2820,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/page/11/index.html b/page/11/index.html index d77e8e30d..4ddc58612 100644 --- a/page/11/index.html +++ b/page/11/index.html @@ -2839,7 +2839,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/page/12/index.html b/page/12/index.html index 8ef64cd49..c2ecefc86 100644 --- a/page/12/index.html +++ b/page/12/index.html @@ -2905,7 +2905,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/page/13/index.html b/page/13/index.html index c3b33fe35..b609d5c69 100644 --- a/page/13/index.html +++ b/page/13/index.html @@ -2785,7 +2785,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
    diff --git a/page/14/index.html b/page/14/index.html index 96a754233..bada1a20f 100644 --- a/page/14/index.html +++ b/page/14/index.html @@ -2799,7 +2799,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/page/15/index.html b/page/15/index.html index eb25f5a21..f2136960a 100644 --- a/page/15/index.html +++ b/page/15/index.html @@ -2844,7 +2844,7 @@

    前言
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/page/2/index.html b/page/2/index.html index a8c5349e7..52472461c 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -428,12 +428,12 @@

    Blog

    -
    +
    9月
    -
    03
    +
    08
    更新于
    -
    9月03
    +
    9月08
    2020
    @@ -446,8 +446,8 @@

    Blog

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

    Blog

    - +

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

    发表于 -

    @@ -578,25 +578,17 @@

    -

    通常在前端中，实现动画的方案主要有6种：

    -
      -

    • js 直接实现

      -
      • -

    • SVG（可伸缩矢量图形

      -
      • -

    • CSS3 transition

      -
      • -

    • CSS3 animation

      -
      • -

    • Canvas动画

      -
      • -

    • requestAnimationFrame

      -
      • -
    +

    它来了，它来了，16.8版本hooks成功加入(^▽^)

    +

    你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？ +—— 拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

    +

    你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？ +—— 拥有了Hooks，生命周期钩子函数可以先丢一边了。

    +

    你在还在为组件中的this指向而晕头转向吗？ +—— 既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

    - + 阅读全文 »
    @@ -654,12 +646,12 @@

    -
    -
    8月
    -
    31
    +
    +
    9月
    +
    08
    更新于
    -
    8月31
    +
    9月08
    2020
    @@ -688,7 +680,7 @@

    - +

    @@ -719,8 +711,8 @@

    发表于 -

    @@ -804,20 +796,21 @@

    -

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

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

    +
      +

    1. png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

      +
      2. +

    2. 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

      +
      3. +

    3. IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

      +
      4. +
    +

    浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;}

    +

    这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

    +
    1
    2
    3
    4
    5
    6
    .bb{
        background-color:red;/*所有识别*/
        background-color:#00deff\9; /*IE6、7、8识别*/
        +background-color:#a200ff;/*IE6、7识别*/
        _background-color:#1e0bd1;/*IE6识别*/
    }
    - + 阅读全文 »
    @@ -875,12 +868,12 @@

    -
    8月
    -
    31
    +
    +
    9月
    +
    08
    更新于
    -
    8月31
    +
    9月08
    2020
    @@ -893,8 +886,8 @@

    - @@ -909,7 +902,7 @@

    - +

    -

    +

    @@ -940,8 +933,8 @@

    发表于 -

    @@ -1025,28 +1018,70 @@

    -

    vue 双向绑定的原理

    采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，实现视图刷新。

    -

    具体流程： -Vue中先遍历data选项中所有的属性（发布者）用Object.defineProperty劫持这些属性将其转为getter/setter。读取数据时候会触发getter。修改数据时会触发setter。

    -

    然后给每个属性对应new Dep()，Dep是专门收集依赖、删除依赖、向依赖发送消息的。先让每个依赖设置在Dep.target上，在Dep中创建一个依赖数组，先判断Dep.target是否已经在依赖中存在，不存在的话添加到依赖数组中完成依赖收集，随后将Dep.target置为上一个依赖。

    -

    组件在挂载过程中都会new一个Watcher实例。这个实例就是依赖（订阅者）。Watcher第二参数是一个函数，此函数作用是更新且渲染节点。在首次渲染过程，会自动调用Dep方法来收集依赖，收集完成后组件中每个数据都绑定上该依赖。当数据变化时就会在setter中通知对应的依赖进行更新。在更新过程中要先读取数据，就会触发Wacther的第二个函数参数。一触发就再次自动调用Dep方法收集依赖，同时在此函数中运行patch（diff运算)来更新对应的DOM节点，完成了双向绑定。

    + +

    浏览器内核

      +

    • Trident:IE，360，搜狗

      +
      • +

    • Gecko：firefox

      +
      • +

    • webkit:safari，旧版chrome

      +
      • +

    • presto：旧版opera

      +
      • +

    • blink(webkit的一个分支)：新版chrome，新版opera

      +
      • +
    +

    浏览器的渲染方式

      +

    1. 构建DOM树 +浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。（解码->令牌化->词法分析->dom树创建）

      +
      2. +

    2. 构建CSSOM +css文件加载完成，开始构建CSSOM（CSSOM只输出包含有样式的节点）

      +
      3. +

    3. 生成渲染树（Render Tree） +CSSOM构建结束后，和DOM一起生成Render Tree

      +
      4. +

    4. 计算渲染树布局（Layout） +有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。

      +
      5. +

    5. 将布局Paint绘制到屏幕上 +布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。

      +
      6. +
    +

    render

    +

    CSS阻塞渲染：由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。 +JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了。

    +

    重绘（Repaint）：

    当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

      -
    • 每一个组件默认都会创建一个 Watcher，自定义的 watch 和 computed 方法也会创建 Watcher
      • +
    • 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少。
    -

    Object.defineProperty()实现双向绑定的缺点

      -
    1. 只能监听某个属性，不能监听整个对象
      2. -
    2. 需要使用for in遍历对象属性绑定监听
      3. -
    3. 不能监听数组，需要重写数组方法进行特异性操作
      4. -
    4. 会污染原对象
      5. +

      触发重绘

        +
      1. DOM改动
        2. +
      2. CSS改动
      -
      - -
      - - 阅读全文 » - -
      - +

      重排（Reflow）：

      DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

      +
        +
      • 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
        • +
      +

      触发重排

        +
      1. 当增加、删除、修改DOM节点时，会导致reflow或repaint
        2. +
      2. 当移动DOM的位置，或是插入动画的时候
        3. +
      3. 当修改CSS样式的时候
        4. +
      4. 当Resize窗口的时候，或是滚动的时候
        5. +
      5. 当修改网页的默认字体时
        6. +
      +

      最小化重绘和重排

        +

      1. 避免频繁使用 style，而是采用修改class的方式。

        +
        2. +

      2. 批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment）使用createDocumentFragment进行批量的 DOM 操作。

        +
        3. +

      3. 缓存布局信息

        +
        4. +

      4. 对于 resize、scroll 等进行防抖/节流处理。

        +
        5. +
      + +
    @@ -1100,12 +1135,12 @@

    -
    8月
    -
    31
    +
    +
    9月
    +
    07
    更新于
    -
    8月31
    +
    9月07
    2020
    @@ -1118,8 +1153,8 @@

    - @@ -1134,7 +1169,7 @@

    - +

    -

    +

    @@ -1165,8 +1200,8 @@

    发表于 -

    @@ -1250,43 +1285,34 @@

    -

    开始准备

      -

    1. 安装nodejs

      -
      1
      npm -v
      -
      2. -

    2. 安装@angular/cli

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

    3. CLI命令建立项目

      -
      1
      ng new ng7demo
      -

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

      -
      4. -
    + +

    typeof

    +

    typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined字符串

    +
    -

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

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

    对于Array,null等特殊对象使用typeof一律返回object，这正是typeof的局限性。

    -

    or

    -
      -

    1. npm install -g cnpm -cnpm install

      -
      2. -

    2. 启动项目

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

    typeof表示是对某个变量类型的检测，基本数据类型除了null都能正常的显示为对应的类型，引用类型除了函数会显示为’function’，其它都显示为object。

    +
    +
    1
    2
    3
    var fn = new Function ('a', 'b', 'return a + b')

    typeof fn // function
    +

    instanceof

    +

    instanceof适用于检测对象，它是基于原型链运作的。

    +
    +
    +

    instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。换种说法就是如果左侧的对象是右侧对象的实例， 则表达式返回true, 否则返回false 。

    +
    +
    +

    instanceof对基本数据类型检测不起作用，因为基本数据类型没有原型链。可以准确的判断复杂数据类型。

    +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [1, 2, 3] instanceof Array // true 
    /abc/ instanceof RegExp // true 
    ({}) instanceof Object // true 
    (function(){}) instanceof Function // true

    // 基于constructor 
    a.constructor === Array; 
    // 基于Object.prototype.isPrototypeOf 
    Array.prototype.isPrototypeOf(a); 
    // 4.基于getPrototypeOf 
    Object.getPrototypeOf(a) === Array.prototype;
    +

    Object.prototype.toString.call

    可以检测各种数据类型，推荐使用。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Object.prototype.toString.call([]); // => [object Array] 
    Object.prototype.toString.call({}); // => [object Object] 
    Object.prototype.toString.call(''); // => [object String] 
    Object.prototype.toString.call(new Date()); // => [object Date] 
    Object.prototype.toString.call(1); // => [object Number] 
    Object.prototype.toString.call(function () {}); // => [object Function] 
    Object.prototype.toString.call(/test/i); // => [object RegExp] 
    Object.prototype.toString.call(true); // => [object Boolean] 
    Object.prototype.toString.call(null); // => [object Null] 
    Object.prototype.toString.call(); // => [object Undefined]
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    let isType = type => obj => {
      return Object.prototype.toString.call( obj ) === '[object ' + type + ']';
    }
     
    var isString = isType( 'String' ); 
    var isArray = isType( 'Array' ); 
    var isNumber = isType( 'Number' );

    console.log( isArray( [ 1, 2, 3 ] ) ); //true
    +

    constructor

    constructor也不是保险的，因为constructor属性是可以被修改的，会导致检测出的结果不正确。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    console.log([].constructor === Array)   // true
    function a() {}
    console.log(a.constructor === Function)   // true
    console.log(12.constructor === Number)  // true
    console.log('22'.constructor === String)  // true
    console.log([] .constructor ===  Array)   // true
    console.log({a: 1}.constructor ===  Object) // true
    console.log(true.constructor === Boolean) // true
    console.log(json.constructor === Object) // true
    console.log((new Date()).constructor === Date)   // true
    console.log(reg.constructor ===  RegExp) //true
    console.log(error.constructor === Error) // true
    + +
    @@ -1340,12 +1366,12 @@

    -
    8月
    -
    31
    +
    +
    9月
    +
    07
    更新于
    -
    8月31
    +
    9月07
    2020
    @@ -1358,8 +1384,8 @@

    - @@ -1374,7 +1400,7 @@

    - +

    -

    +

    @@ -1405,8 +1431,8 @@

    发表于 -

    @@ -1490,78 +1516,14 @@

    -

    五大算法

      -
    • 贪心算法：局部最优解法
      • -
    • 分治算法：分成多个小模块，与原问题性质相同
      • -
    • 动态规划：每个状态都是过去历史的一个总结
      • -
    • 回溯法：发现原先选择不优时，退回重新选择
      • -
    • 分支限界法：按广度优先策略搜索问题的解空间树，适合求解最优化问题
      • -
    -

    数据树

      -

    • 二叉树: 最多只有两个子节点

      -
        -
      • 完全二叉树
          -
        • 若设二叉树的深度为k，除第 k 层外，其它各层 (1～k-1) 的结点数都达到最大个数，第k 层所有的结点都连续集中在最左边
          • -
        -
        • -
      • 满二叉树
          -
        • 深度为 h, 有 n 个节点，且满足 n = 2^h - 1
          • -
        -
        • -
      • 平衡二叉树
          -
        • 它或者是一颗空树，或它的左子树和右子树的深度之差(平衡因子)的绝对值不超过1，且它的左子树和右子树都是一颗平衡二叉树
          • -
        -
        • -
      • 最优二叉树(哈夫曼树)
          -
        • 树的带权路径长度达到最小，称这样的二叉树为最优二叉树，也称为哈夫曼树(Huffman Tree)。哈夫曼树是带权路径长度最短的树，权值较大的结点离根较近。
          • -
        -
        • -
      -
      • -

    • 二叉查找树: 是一种特殊的二叉树，能有效地提高查找效率

      -
        -
      • 小值在左，大值在右
        • -
      • 节点 n 的所有左子树值小于 n，所有右子树值大于 n
        • -
      -
      • -
    -

    binary-search-tree

    -
      -
    • 遍历节点
        -
      • 前序遍历
          -
        • 根节点
          • -
        • 访问左子节点，回到 1
          • -
        • 访问右子节点，回到 1
          • -
        -
        • -
      • 中序遍历
          -
        • 先访问到最左的子节点
          • -
        • 访问该节点的父节点
          • -
        • 访问该父节点的右子节点， 回到 1
          • -
        -
        • -
      • 后序遍历
          -
        • 先访问到最左的子节点
          • -
        • 访问相邻的右节点
          • -
        • 访问父节点， 回到 1
          • -
        -
        • -
      -
      • -
    -

    DLR–前序遍历（根在前，从左往右，一棵树的根永远在左子树前面，左子树又永远在右子树前面 ）

    -

    dlr

    -

    LDR–中序遍历（根在中，从左往右，一棵树的左子树永远在根前面，根永远在右子树前面）

    -

    ldr

    -

    LRD–后序遍历（根在后，从左往右，一棵树的左子树永远在右子树前面，右子树永远在根前面）

    -

    lrd

    -
      -
    • 插入与删除节点
      • -
    +

    javascript-puzzlers

    +

    void

    void其实是javascript中的一个函数，接受一个参数，返回值永远是undefined +void expression

    +
    1
    2
    3
    4
    5
    6
    7
    void 0  
    void() // 报错
    void (0)  
    void "hello"  
    void (new Date())  
    // all will return undefined  
    context === void 666
    - + 阅读全文 »
    @@ -1619,12 +1581,12 @@

    -
    8月
    -
    31
    +
    +
    9月
    +
    07
    更新于
    -
    8月31
    +
    9月07
    2020
    @@ -1653,7 +1615,7 @@

    - +

    @@ -1684,8 +1646,8 @@

    发表于 -

    @@ -1769,122 +1731,26 @@

    -

    概念

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

    -

    设计原则（5个）

    S – Single Responsibility Principle 单一职责原则

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

    O – OpenClosed Principle 开放/封闭原则

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

    L – Liskov Substitution Principle 里氏替换原则

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

      描述事件队列的过程？

        +
      • js是单线程的，会出现阻塞问题，因此有了任务队列的出现
        • +
      • 主线程同步执行任务，异步的工作一般会交给其他线程完成，然后回调函数会放到任务队列中
        • +
      • 等候主线程执行完毕后再执行任务队列中的操作
      -

      I – Interface Segregation Principle 接口隔离原则

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

      D – Dependency Inversion Principle 依赖倒转原则

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

      设计模式的类型

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

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

      event-queue

      +
      +

      同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

      +
      +
      +

      异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。只要异步任务有了运行结果，就在”任务队列”之 +中放置一个事件。

      +
      +

      task-queue +任务队列中存着的是异步任务，这些异步任务一定要等到执行栈清空后才会执行。

      +

      同步就是发出一个请求后什么事都不做，一直等待请求返回后才会继续做事；异步就是发出请求后继续去做其他事，这个请求处理完成后会通知你，这时候就可以处理这个回应了。

      - + 阅读全文 »
      @@ -1942,12 +1808,12 @@

      -
      8月
      -
      31
      +
      +
      9月
      +
      03
      更新于
      -
      8月31
      +
      9月03
      2020
      @@ -1960,8 +1826,8 @@

      - @@ -1976,7 +1842,7 @@

      - +

      -

      +

      @@ -2007,8 +1873,8 @@

      发表于 -

      @@ -2092,20 +1958,11 @@

      -

      👨提问：注册路由时 app.get、app.use、app.all 的区别是什么？

      app.use(path,callback)

      -

      app.use是express用来调用中间件的方法。中间件通常不处理请求和响应，一般只处理输入数据，并将其交给队列中的下一个处理程序，比如下面这个例子app.use -(‘/user’)，那么只要路径以 /user 开始即可匹配，如 /user/tree 就可以匹配。

      -
      -

      app.all()

      -

      app.all 是路由中指代所有的请求方式，用作路由处理，匹配完整路径，在app.use之后可以理解为包含了app.get、app.post等的定义，比如app.all(‘/ -user/tree’),能同时覆盖：get(‘/user/tree’) 、 post(‘/user/tree’)、 put(‘/user/tree’) ,不过相对于app.use()的前缀匹配，它则是匹配具体的路 -由。

      -
      -

      all完整匹配，use只匹配前缀

      +

      埋点的需求：一个网站上线,开发者除了保证网站功能正常,体验优好之外,还有一项重要的工作是数据收集,通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求,导流方式是否有效,新功能上线后是否效果是否达到设计初衷,根据数据指引有效优化产品体验以及发现新的产品方向是产品经理的必备技能,而如何采集准确并且足够的网站数据则应该是开发者的责任.在大数据处理能力越来越强下,以及机器学习等依赖数据哺育的工具进化下,采集足够多的数据往往是网站向着良性方向进化的必备条件

      - + 阅读全文 »
      @@ -2163,12 +2020,12 @@

      app -
      -
      8月
      -
      31
      +
      +
      9月
      +
      03
      更新于
      -
      8月31
      +
      9月03
      2020
      @@ -2181,8 +2038,8 @@

      app - @@ -2197,7 +2054,7 @@

      app
      - +

      @@ -2228,8 +2085,8 @@

      发表于 -

      @@ -2313,24 +2170,15 @@

      -

      👨提问：最近Deno很火，会不会替代node的替代品，学node是不是没有前途？

      -

      莫慌，Node依旧是社区热捧的服务器端 JavaScript 运行环境，Deno的出现其实本质上是完善现阶段的Node（新轮子），包括原生支持TS、安全性、支持ES -Module浏览器模块、等特征。万变不离其宗，虽然有了Deno，将来可能就不需要 Node.js，但是新事物总是需要不断推演和考验后，所以这一点而言，Node短时间内很 -难被替换，毕竟背后依附着强大社区的支撑。

      -
      -

      node 如何获取命令行传来的参数？

      -

      process.argv。process是一个全局变量，它提供当前 Node.js 进程的有关信息，而process.argv 属性则返回一个数组，数组中的信息包括启动Node.js进程时的命令行参数。

      -
      -
        -
      • process.argv[0] : 返回启动Node.js进程的可执行文件所在的绝对路径
        • -
      • process.argv[1] : 为当前执行的JavaScript文件路径
        • -
      • process.argv.splice(2) : 移除前两者后，剩余的元素为其他命令行参数(也就是我们自定义部分)
        • -
      -
      1
      2
      3
      4
      5
      6
      7
      8
      9
      "script": {
          "serve": "node test.js arg1 arg2 arg3"
      }

      // test.js
      const arguments = process.argv.splice(2) // [arg1, arg2, arg3]

      // 结合commander
      commander.parse(process.argv)
      +

      A: “这个接口我传个 JSON 给你，格式是这样的 ‘[1, 2, 3]’”

      +

      B: “等下，这不是数组吗，JSON 应该有键啊，类似这样才行’{ “key”: [1, 2, 3] }’”

      +

      A: “不，这就是 JSON 格式的数据”

      +

      B: “啊，是吗？” +你是否也有这样的疑惑？ wappalyzer chrome网页分析插件

      - + 阅读全文 »
      @@ -2388,12 +2236,12 @@

      -
      8月
      -
      31
      +
      +
      9月
      +
      03
      更新于
      -
      8月31
      +
      9月03
      2020
      @@ -2406,8 +2254,8 @@

      - @@ -2422,7 +2270,7 @@

      - +

      -

      +

      @@ -2453,8 +2301,8 @@

      发表于 -

      @@ -2538,33 +2386,25 @@

      -

      现代的前端框架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 方法是利用了相当于页面锚点的功能，所以与原来的通过锚点定位来进行页面滚动定位的方式冲突，导致定位到错误的路由路径，因此需要采用别的办法。

      -
      +

      通常在前端中，实现动画的方案主要有6种：

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

      • js 直接实现

        +
        • +

      • SVG（可伸缩矢量图形

        +
        • +

      • CSS3 transition

        +
        • +

      • CSS3 animation

        +
        • +

      • Canvas动画

        +
        • +

      • requestAnimationFrame

        +
      -

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

      -
      -

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

      -
      - + 阅读全文 »
      @@ -2622,12 +2462,12 @@

      +
      8月
      -
      30
      +
      31
      更新于
      -
      8月30
      +
      8月31
      2020
      @@ -2640,8 +2480,8 @@

      - @@ -2656,7 +2496,7 @@

      - +

      -

      +

      @@ -2687,8 +2527,8 @@

      发表于 -

      @@ -2772,11 +2612,20 @@

      - reactInterview +

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

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

      - + 阅读全文 »
      @@ -3039,7 +2888,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
      diff --git a/page/3/index.html b/page/3/index.html index a5d99f0ab..1c938826c 100644 --- a/page/3/index.html +++ b/page/3/index.html @@ -428,12 +428,12 @@

      Blog

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

      Blog

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

      Blog

      - +

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

      发表于 -

      @@ -578,48 +578,39 @@

      -

      谈谈你对webpack的看法

      webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

      +

      开始准备

        +

      1. 安装nodejs

        +
        1
        npm -v
        +
        2. +

      2. 安装@angular/cli

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

      3. CLI命令建立项目

        +
        1
        ng new ng7demo
        +

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

        +
        4. +
      -

      webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。

      +

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

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

      webpack的基本功能和工作原理？

        -
      • 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
        • -
      • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
        • -
      • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
        • -
      • 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
        • -
      • 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
        • -
      • 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
        • -

      • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

        +

        or

        +
          +

        1. npm install -g cnpm +cnpm install

          2. -

        2. Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

          +

        3. 启动项目

          +
          1
          ng serve --open // 自动打开浏览器 http://localhost:4200/
          4. -
        4. Output（出口）：指示 webpack 如何去输出、以及在哪里输出
          5. -
        5. Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
          6. -
        6. Chunk（代码块）：一个 Chunk 由多个模块组合而成，用于代码合并与分割。
          7. -
        7. Loader（模块转换器）：用于把模块原内容按照需求转换成新内容。
          8. -
        8. Plugin（扩展插件）：在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件，并改变输出结果
          9. -
      -

      webpack构建过程

        -
      • 从entry里配置的module开始递归解析entry依赖的所有module
        • -
      • 每找到一个module，就会根据配置的loader去找对应的转换规则
        • -
      • 对module进行转换后，再解析出当前module依赖的module
        • -
      • 这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
        • -
      • 最后webpack会把所有Chunk转换成文件输出
        • -
      • 在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑
        • -
      -
        -
      1. 初始化：解析webpack配置参数，生成 Compiler 实例
        2. -
      2. 注册插件：调用插件的apply方法，给插件传入compiler实例的引用，插件通过compiler调用Webpack提供的API，让插件可以监听后续的所有事件节点。
        3. -
      3. 入口：读取入口文件
        4. -
      4. 解析文件：使用loader将文件解析成抽象语法树 AST
        5. -
      5. 生成依赖图谱：找出每个文件的依赖项（遍历）
        6. -
      6. 输出：根据转换好的代码，生成 chunk
        7. -
      7. 生成最后打包的文件
      -

      webpack打包原理

      将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

      +
      - + 阅读全文 »
      @@ -677,12 +668,12 @@

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

      - @@ -711,7 +702,7 @@

      - +

      -

      +

      @@ -742,8 +733,8 @@

      发表于 -

      @@ -827,15 +818,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模式
      享元模式访问者模式参与者模式
      中介者模式等待者模式
      备忘录模式
      迭代器模式
      解释器模式
      - + 阅读全文 »
      @@ -893,12 +991,12 @@

      -
      +
      8月
      -
      28
      +
      31
      更新于
      -
      8月28
      +
      8月31
      2020
      @@ -927,7 +1025,7 @@

      - +

      @@ -958,8 +1056,8 @@

      发表于 -

      @@ -1043,26 +1141,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 错误。

      +
      - + 阅读全文 »
      @@ -1120,12 +1225,12 @@

      +
      8月
      -
      28
      +
      30
      更新于
      -
      8月28
      +
      8月30
      2020
      @@ -1138,8 +1243,8 @@

      - @@ -1154,7 +1259,7 @@

      - +

      -

      +

      @@ -1185,8 +1290,8 @@

      发表于 -

      @@ -1270,19 +1375,48 @@

      -

      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）

      +

      谈谈你对webpack的看法

      webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

      -

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

      +

      webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。

      -
      +

      webpack的基本功能和工作原理？

        +
      • 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
        • +
      • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
        • +
      • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
        • +
      • 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
        • +
      • 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
        • +
      • 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
        • +

      • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

        +
        • +

      • Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

        +
        • +
      • Output（出口）：指示 webpack 如何去输出、以及在哪里输出
        • +
      • Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
        • +
      • Chunk（代码块）：一个 Chunk 由多个模块组合而成，用于代码合并与分割。
        • +
      • Loader（模块转换器）：用于把模块原内容按照需求转换成新内容。
        • +
      • Plugin（扩展插件）：在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件，并改变输出结果
        • +
      +

      webpack构建过程

        +
      • 从entry里配置的module开始递归解析entry依赖的所有module
        • +
      • 每找到一个module，就会根据配置的loader去找对应的转换规则
        • +
      • 对module进行转换后，再解析出当前module依赖的module
        • +
      • 这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
        • +
      • 最后webpack会把所有Chunk转换成文件输出
        • +
      • 在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑
        • +
      +
        +
      1. 初始化：解析webpack配置参数，生成 Compiler 实例
        2. +
      2. 注册插件：调用插件的apply方法，给插件传入compiler实例的引用，插件通过compiler调用Webpack提供的API，让插件可以监听后续的所有事件节点。
        3. +
      3. 入口：读取入口文件
        4. +
      4. 解析文件：使用loader将文件解析成抽象语法树 AST
        5. +
      5. 生成依赖图谱：找出每个文件的依赖项（遍历）
        6. +
      6. 输出：根据转换好的代码，生成 chunk
        7. +
      7. 生成最后打包的文件
        8. +
      +

      webpack打包原理

      将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

      - + 阅读全文 »
      @@ -1340,12 +1474,12 @@

      -
      +
      8月
      -
      27
      +
      29
      更新于
      -
      8月27
      +
      8月29
      2020
      @@ -1358,8 +1492,8 @@

      - @@ -1374,7 +1508,7 @@

      - +

      @@ -1405,8 +1539,8 @@

      发表于 -

      @@ -1490,19 +1624,15 @@

      -

      Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

      -

      localStorage(属于浏览器对象模型BOM的对象window)

      localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

      -

      缺点：

      -
        -
      1. 存储容量限制，大部分浏览器应该最多5M。
        2. -
      2. 仅支持字符串，如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换，有些啰嗦。
        3. -
      3. 读取都是同步的。大多数情况下，还挺好使的。但如果存储数据比较大，例如一张重要图片base64格式存储了，读取可能会有可感知的延迟时间。
        4. -
      -

      sessionStorage

      sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

      +

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

      +

      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 是服务端返回的数据
        }
      })
      - + 阅读全文 »
      @@ -1560,12 +1690,12 @@

      +
      8月
      -
      27
      +
      28
      更新于
      -
      8月27
      +
      8月28
      2020
      @@ -1578,8 +1708,8 @@

      - @@ -1594,7 +1724,7 @@

      - +

      -

      +

      @@ -1625,8 +1755,8 @@

      发表于 -

      @@ -1710,14 +1840,26 @@

      -

      黑科技JS代码整理 是不是很void 666

      -

      一行代码实现评级

      1
      "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);定义一个变量rate是1到5的值
      -

      SB、NB、Hello World

      1
      2
      3
      4
      5
      (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

      ([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]

      ([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[+[]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[+[]]+([][[]]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()([][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()(([]+{})[+[]])[+[]]+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+[]))+([]+{})[+!![]]+(!![]+[])[+!![]]+(![]+[])[!+[]+!![]]+([][[]]+[])[!+[]+!![]]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[+[]]+([][[]]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()([][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()(([]+{})[+[]])[+[]]+(!+[]+!![]+[])+(+!![]+[]))
      -

      错误处理的正确方法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      try {
          something
      } catch (e) {
          window.location.href =
              "http://stackoverflow.com/search?q=[js]+" +
              e.message;
      }
      // 百度版
      try {
          something
      } catch (e) {
          window.location.href =
              "https://www.baidu.com/s?wd=" +
              e.message;
      }
      +

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

      +

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

      +

      对称加密

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

      +

      非对称加密

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

      +

      混合加密

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

      +

      摘要

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

      +

      数字签名

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

      +

      数字证书

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

      - + 阅读全文 »
      @@ -1775,12 +1917,12 @@

      +
      8月
      -
      27
      +
      28
      更新于
      -
      8月27
      +
      8月28
      2020
      @@ -1793,8 +1935,8 @@

      - @@ -1809,7 +1951,7 @@

      - +

      -

      +

      @@ -1840,8 +1982,8 @@

      发表于 -

      @@ -1925,22 +2067,19 @@

      -

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

      +

      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.验证网站服务器身份

      -

      每个对象都会在其内部初始化一个属性，就是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。

      - + 阅读全文 »
      @@ -1998,12 +2137,12 @@

      +
      8月
      -
      24
      +
      27
      更新于
      -
      8月24
      +
      8月27
      2020
      @@ -2016,8 +2155,8 @@

      - @@ -2032,7 +2171,7 @@

      - +

      -

      +

      @@ -2063,8 +2202,8 @@

      发表于 -

      @@ -2148,14 +2287,14 @@

      -
        -
      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. -
      +

      黑科技JS代码整理 是不是很void 666

      +

      一行代码实现评级

      1
      "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);定义一个变量rate是1到5的值
      +

      SB、NB、Hello World

      1
      2
      3
      4
      5
      (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

      ([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]

      ([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[+[]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[+[]]+([][[]]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()([][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()(([]+{})[+[]])[+[]]+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+[]))+([]+{})[+!![]]+(!![]+[])[+!![]]+(![]+[])[!+[]+!![]]+([][[]]+[])[!+[]+!![]]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[+[]]+([][[]]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()([][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()(([]+{})[+[]])[+[]]+(!+[]+!![]+[])+(+!![]+[]))
      +

      错误处理的正确方法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      try {
          something
      } catch (e) {
          window.location.href =
              "http://stackoverflow.com/search?q=[js]+" +
              e.message;
      }
      // 百度版
      try {
          something
      } catch (e) {
          window.location.href =
              "https://www.baidu.com/s?wd=" +
              e.message;
      }
      - + 阅读全文 »
      @@ -2213,12 +2352,12 @@

      -
      +
      8月
      -
      24
      +
      27
      更新于
      -
      8月24
      +
      8月27
      2020
      @@ -2231,8 +2370,8 @@

      - @@ -2247,7 +2386,7 @@

      - +

      @@ -2278,8 +2417,8 @@

      发表于 -

      @@ -2363,12 +2502,19 @@

      -

      今天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() ==> {}
      +

      Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

      +

      localStorage(属于浏览器对象模型BOM的对象window)

      localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

      +

      缺点：

      +
        +
      1. 存储容量限制，大部分浏览器应该最多5M。
        2. +
      2. 仅支持字符串，如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换，有些啰嗦。
        3. +
      3. 读取都是同步的。大多数情况下，还挺好使的。但如果存储数据比较大，例如一张重要图片base64格式存储了，读取可能会有可感知的延迟时间。
        4. +
      +

      sessionStorage

      sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

      - + 阅读全文 »
      @@ -2426,12 +2572,12 @@

      +
      8月
      -
      24
      +
      27
      更新于
      -
      8月24
      +
      8月27
      2020
      @@ -2460,7 +2606,7 @@

      - +

      @@ -2491,8 +2637,8 @@

      发表于 -

      @@ -2576,14 +2722,22 @@

      -

      this 的指向

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

      -
      -

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

      +

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

      +

      每个对象都会在其内部初始化一个属性，就是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。

      - + 阅读全文 »
      @@ -2846,7 +3000,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

      diff --git a/page/4/index.html b/page/4/index.html index 9b1d0a57d..409c21586 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -428,7 +428,7 @@

      Blog

      -
      +
      8月
      24
      @@ -446,8 +446,8 @@

      Blog

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

      Blog

      - +

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

      发表于 -

      @@ -578,11 +578,14 @@

      -

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

      +
        +
      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. +
      - + 阅读全文 »
      @@ -658,8 +661,8 @@

      - @@ -674,7 +677,7 @@

      - +

      @@ -705,8 +708,8 @@

      发表于 -

      @@ -790,12 +793,12 @@

      -

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

      -

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

      +

      今天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() ==> {}
      - + 阅读全文 »
      @@ -887,7 +890,7 @@

      - +

      @@ -918,8 +921,8 @@

      发表于 -

      @@ -1003,28 +1006,14 @@

      -

      subscribe

      -

      从图中可以看出：

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

      两者的优缺点：

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

      举个栗子：

      -
        -

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

        -
        • -

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

        -
        • -
      +

      this 的指向

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

      +
      +

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

      +
      - + 阅读全文 »
      @@ -1100,8 +1089,8 @@

      - @@ -1116,7 +1105,7 @@

      - +

      @@ -1147,8 +1136,8 @@

      发表于 -

      @@ -1232,13 +1221,11 @@

      -

      一. package.json 解读

      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
      {
      	"name": "hello world", // 项目名称
      	"version": "0.0.1", // 版本号：大版本.次要版本.小版本
      	"author": "张三",
      	"description": "第一个node.js程序",
      	"keywords":["node.js","javascript"], // 关键词，有助于 npm search 发现
      	"repository": { // 存储库，指定代码所在位置（如果git repo在GitHub上，那么该npm docs 命令将能够找到文件位置。）
      		"type": "git",
      		"url": "https://path/to/url"
      	},
      	"license":"MIT", // 指定包许可证，详细可见[SPDX许可证ID的完整列表](https://spdx.org/licenses/)
      	"engines": {"node": "0.10.x"}, // 指定该模块运行的平台，可以指定 node 版本、npm 版本等
      	"bugs":{"url":"http://path/to/bug","email":"bug@example.com"}, // 项目问题跟踪器的URL和应报告问题的电子邮件地址。
      	"contributors":[{"name":"李四","email":"lisi@example.com"}],
          "bin": { // 指定内部命令对应的可执行文件的位置，在 scripts 中就可以简写
          	"webpack": "./bin/webpack.js"
        	},
          "main": "lib/webpack.js", // 指定加载的模块入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
          "config" : { "port" : "8080" }, // 用于添加命令行的环境变量（用户在运行 scripts 命令时，就默认在脚本文件中添加 process.env.npm_package_config_port，用户可以通过 npm config set foo:port 80 命令更改这个值）
      	"scripts": { // 指定运行脚本的 npm 命令行缩写
      		"start": "node index.js"
      	},
          "peerDependencies": { // 指定项目安装必须一起安装的模块及其版本号，（注意：从 npm 3.0 开始，peerDependencies不会再默认安装）
          	"chai": "1.x"
        	},
      	"dependencies": { // 指定项目运行所依赖的模块
      		"express": "latest",
      		"mongoose": "~3.8.3",
      		"handlebars-runtime": "~1.0.12",
      		"express3-handlebars": "~0.5.0",
      		"MD5": "~1.2.0"
      	},
      	"devDependencies": { // 指定项目开发所需要的模块
      		"bower": "~1.2.8",
      		"grunt": "~0.4.1",
      		"grunt-contrib-concat": "~0.3.0",
      		"grunt-contrib-jshint": "~0.7.2",
      		"grunt-contrib-uglify": "~0.2.7",
      		"grunt-contrib-clean": "~0.5.0",
      		"browserify": "2.36.1",
      		"grunt-browserify": "~1.3.0",
      	},
          "browser": { // 指定该模板供浏览器使用的版本
        		"tipso": "./node_modules/tipso/src/tipso.js"
      	},
          "preferGlobal": true, // 表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，表示该模块的本意就是安装为全局模块。
      }
      -

      package.json 在 node 和 npm 环节都要使用，node 在调用 require 的时候去查找模块，会按照一个次序去查找，package.json 会是查找中的一个环节。npm 用的就比较多，其中的 dependencies 字段就是本模块的依赖的模块清单。每次npm update的时候，npm会自动的把依赖到的模块也下载下来。当npm install 本模块的时候，会把这里提到的模块都一起下载下来。通过package.json,就可以管理好模块的依赖关系。

      -

      关于更多规范，请看官方npm-package.json

      +

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

      - + 阅读全文 »
      @@ -1330,7 +1317,7 @@

      - +

      -

      +

      @@ -1361,8 +1348,8 @@

      发表于 -

      @@ -1446,15 +1433,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后暂停。

      +

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

      +
      - + 阅读全文 »
      @@ -1546,7 +1530,7 @@

      - +

      @@ -1577,8 +1561,8 @@

      发表于 -

      @@ -1662,13 +1646,28 @@

      -

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

      -

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

      -

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

      +

      subscribe

      +

      从图中可以看出：

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

      两者的优缺点：

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

      举个栗子：

      +
        +

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

        +
        • +

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

        +
        • +
      - + 阅读全文 »
      @@ -1726,12 +1725,12 @@

      -
      +
      8月
      -
      23
      +
      24
      更新于
      -
      8月23
      +
      8月24
      2020
      @@ -1744,8 +1743,8 @@

      - @@ -1760,7 +1759,7 @@

      - +

      @@ -1791,8 +1790,8 @@

      发表于 -

      @@ -1876,11 +1875,13 @@

      - MongoDB -

      MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

      +

      一. package.json 解读

      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
      {
      	"name": "hello world", // 项目名称
      	"version": "0.0.1", // 版本号：大版本.次要版本.小版本
      	"author": "张三",
      	"description": "第一个node.js程序",
      	"keywords":["node.js","javascript"], // 关键词，有助于 npm search 发现
      	"repository": { // 存储库，指定代码所在位置（如果git repo在GitHub上，那么该npm docs 命令将能够找到文件位置。）
      		"type": "git",
      		"url": "https://path/to/url"
      	},
      	"license":"MIT", // 指定包许可证，详细可见[SPDX许可证ID的完整列表](https://spdx.org/licenses/)
      	"engines": {"node": "0.10.x"}, // 指定该模块运行的平台，可以指定 node 版本、npm 版本等
      	"bugs":{"url":"http://path/to/bug","email":"bug@example.com"}, // 项目问题跟踪器的URL和应报告问题的电子邮件地址。
      	"contributors":[{"name":"李四","email":"lisi@example.com"}],
          "bin": { // 指定内部命令对应的可执行文件的位置，在 scripts 中就可以简写
          	"webpack": "./bin/webpack.js"
        	},
          "main": "lib/webpack.js", // 指定加载的模块入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
          "config" : { "port" : "8080" }, // 用于添加命令行的环境变量（用户在运行 scripts 命令时，就默认在脚本文件中添加 process.env.npm_package_config_port，用户可以通过 npm config set foo:port 80 命令更改这个值）
      	"scripts": { // 指定运行脚本的 npm 命令行缩写
      		"start": "node index.js"
      	},
          "peerDependencies": { // 指定项目安装必须一起安装的模块及其版本号，（注意：从 npm 3.0 开始，peerDependencies不会再默认安装）
          	"chai": "1.x"
        	},
      	"dependencies": { // 指定项目运行所依赖的模块
      		"express": "latest",
      		"mongoose": "~3.8.3",
      		"handlebars-runtime": "~1.0.12",
      		"express3-handlebars": "~0.5.0",
      		"MD5": "~1.2.0"
      	},
      	"devDependencies": { // 指定项目开发所需要的模块
      		"bower": "~1.2.8",
      		"grunt": "~0.4.1",
      		"grunt-contrib-concat": "~0.3.0",
      		"grunt-contrib-jshint": "~0.7.2",
      		"grunt-contrib-uglify": "~0.2.7",
      		"grunt-contrib-clean": "~0.5.0",
      		"browserify": "2.36.1",
      		"grunt-browserify": "~1.3.0",
      	},
          "browser": { // 指定该模板供浏览器使用的版本
        		"tipso": "./node_modules/tipso/src/tipso.js"
      	},
          "preferGlobal": true, // 表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，表示该模块的本意就是安装为全局模块。
      }
      +

      package.json 在 node 和 npm 环节都要使用，node 在调用 require 的时候去查找模块，会按照一个次序去查找，package.json 会是查找中的一个环节。npm 用的就比较多，其中的 dependencies 字段就是本模块的依赖的模块清单。每次npm update的时候，npm会自动的把依赖到的模块也下载下来。当npm install 本模块的时候，会把这里提到的模块都一起下载下来。通过package.json,就可以管理好模块的依赖关系。

      +

      关于更多规范，请看官方npm-package.json

      +
      - + 阅读全文 »
      @@ -1938,12 +1939,12 @@

      +
      8月
      -
      18
      +
      24
      更新于
      -
      8月18
      +
      8月24
      2020
      @@ -1956,8 +1957,8 @@

      - @@ -1972,7 +1973,7 @@

      - +

      @@ -2003,8 +2004,8 @@

      发表于 -

      @@ -2088,22 +2089,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。

      - + 阅读全文 »
      @@ -2161,12 +2155,12 @@

      特点 +
      8月
      -
      14
      +
      24
      更新于
      -
      8月14
      +
      8月24
      2020
      @@ -2179,8 +2173,8 @@

      特点 - @@ -2195,7 +2189,7 @@

      特点 - +

      @@ -2226,8 +2220,8 @@

      发表于 -

      @@ -2311,11 +2305,13 @@

      - Shadowsocks +

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

      +

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

      +

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

      - + 阅读全文 »
      @@ -2373,12 +2369,12 @@

      -
      +
      8月
      -
      14
      +
      23
      更新于
      -
      8月14
      +
      8月23
      2020
      @@ -2391,8 +2387,8 @@

      - @@ -2407,7 +2403,7 @@

      - +

      @@ -2438,8 +2434,8 @@

      发表于 -

      @@ -2523,11 +2519,11 @@

      -

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

      -
      + MongoDB +

      MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

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

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
      diff --git a/page/5/index.html b/page/5/index.html index 1bd57d075..cfd5925fb 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -428,12 +428,12 @@

      Blog

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

      Blog

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

      Blog

      - +

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

      发表于 -

      @@ -578,11 +578,22 @@

      -

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

      +

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

      +
      +

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

      +
      +

      nginx

      +

      特点

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

      -
      +
      8月
      -
      13
      +
      14
      更新于
      -
      8月13
      +
      8月14
      2020
      @@ -658,8 +669,8 @@

      - @@ -674,7 +685,7 @@

      - +

      @@ -705,8 +716,8 @@

      发表于 -

      @@ -790,17 +801,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属性将失效。

      + Shadowsocks
      - + 阅读全文 »
      @@ -858,12 +863,12 @@

      -
      +
      8月
      -
      12
      +
      14
      更新于
      -
      8月12
      +
      8月14
      2020
      @@ -876,8 +881,8 @@

      - @@ -892,7 +897,7 @@

      - +

      @@ -923,8 +928,8 @@

      发表于 -

      @@ -1008,19 +1013,11 @@

      -

      Docker，是一款现在最流行的 软件容器平台，提供了软件运行时所依赖的环境。

      -

      物理机

      硬件环境，真实的 计算机实体，包含了例如物理内存，硬盘等等硬件；

      -

      虚拟机:

      在物理机上 模拟出一套硬件环境和操作系统，应用软件可以运行于其中，并且毫无感知，是一套隔离的完整环境。本质上，它只是物理机上的一份运行文件。

      -

      为什么需要虚拟机？

      环境配置与迁移

      在软件开发和运行中，环境依赖一直是一个很头疼的难题，比如你想运行 node 应用，那至少环境得安装 node 吧，而且不同版本，不同系统都会影响运行。解决的办法就是我们的包装包中直接包含运行环境的安装，让同一份环境可以快速复制到任意一台物理机上。

      -

      资源利用率与隔离

      通过硬件模拟，并包含一套完整的操作系统，应用可以独立运行在虚拟机中，与外界隔离。并且可以在同一台物理机上，开启多个不同的虚拟机启动服务，即一台服务器，提供多套服务，且资源完全相互隔离，互不影响。不仅能更好提高资源利用率率，降低成本，而且也有利于服务的稳定性。

      -

      传统虚拟机的缺点

      资源占用大

      由于虚拟机是模拟出一套完整系统，包含众多系统级别的文件和库，运行也需要占用一部分资源，单单启动一个空的虚拟机，可能就要占用 100+MB 的内存了。

      -

      启动缓慢

      同样是由于完整系统，在启动过程中就需要运行各种系统应用和步骤，也就是跟我们平时启动电脑一样的耗时。

      -

      冗余步骤多

      系统有许多内置的系统操作，例如用户登录，系统检查等等，有些场景其实我们要的只是一个隔离的环境，其实也就是说，虚拟机对部分需求痛点来说，其实是有点过重的。

      -

      Linux 容器

      Linux 中的一项虚拟化技术，称为 Linux 容器技术(LXC)。它在进程层面模拟出一套隔离的环境配置，但并没有模拟硬件和完整的操作系统。因此它完全规避了传统虚拟机的缺点，在启动速度，资源利用上远远优于虚拟机；

      +

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

      - + 阅读全文 »
      @@ -1078,12 +1075,12 @@

      +
      8月
      -
      08
      +
      14
      更新于
      -
      8月08
      +
      8月14
      2020
      @@ -1096,8 +1093,8 @@

      - @@ -1112,7 +1109,7 @@

      - +

      -

      +

      @@ -1143,8 +1140,8 @@

      发表于 -

      @@ -1228,10 +1225,11 @@

      -

      前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。

      +

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

      +
      - + 阅读全文 »
      @@ -1289,12 +1287,12 @@

      +
      8月
      -
      08
      +
      13
      更新于
      -
      8月08
      +
      8月13
      2020
      @@ -1307,8 +1305,8 @@

      - @@ -1323,7 +1321,7 @@

      - +

      @@ -1354,8 +1352,8 @@

      发表于 -

      @@ -1439,11 +1437,17 @@

      -

      一、必备知识点

      git

      +

      芮 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属性将失效。

      - + 阅读全文 »
      @@ -1501,12 +1505,12 @@

      +
      8月
      -
      05
      +
      12
      更新于
      -
      8月05
      +
      8月12
      2020
      @@ -1519,8 +1523,8 @@

      - @@ -1535,7 +1539,7 @@

      - +

      -

      +

      @@ -1566,8 +1570,8 @@

      发表于 -

      @@ -1651,11 +1655,19 @@

      -

      Error Boundary

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

      +

      Docker，是一款现在最流行的 软件容器平台，提供了软件运行时所依赖的环境。

      +

      物理机

      硬件环境，真实的 计算机实体，包含了例如物理内存，硬盘等等硬件；

      +

      虚拟机:

      在物理机上 模拟出一套硬件环境和操作系统，应用软件可以运行于其中，并且毫无感知，是一套隔离的完整环境。本质上，它只是物理机上的一份运行文件。

      +

      为什么需要虚拟机？

      环境配置与迁移

      在软件开发和运行中，环境依赖一直是一个很头疼的难题，比如你想运行 node 应用，那至少环境得安装 node 吧，而且不同版本，不同系统都会影响运行。解决的办法就是我们的包装包中直接包含运行环境的安装，让同一份环境可以快速复制到任意一台物理机上。

      +

      资源利用率与隔离

      通过硬件模拟，并包含一套完整的操作系统，应用可以独立运行在虚拟机中，与外界隔离。并且可以在同一台物理机上，开启多个不同的虚拟机启动服务，即一台服务器，提供多套服务，且资源完全相互隔离，互不影响。不仅能更好提高资源利用率率，降低成本，而且也有利于服务的稳定性。

      +

      传统虚拟机的缺点

      资源占用大

      由于虚拟机是模拟出一套完整系统，包含众多系统级别的文件和库，运行也需要占用一部分资源，单单启动一个空的虚拟机，可能就要占用 100+MB 的内存了。

      +

      启动缓慢

      同样是由于完整系统，在启动过程中就需要运行各种系统应用和步骤，也就是跟我们平时启动电脑一样的耗时。

      +

      冗余步骤多

      系统有许多内置的系统操作，例如用户登录，系统检查等等，有些场景其实我们要的只是一个隔离的环境，其实也就是说，虚拟机对部分需求痛点来说，其实是有点过重的。

      +

      Linux 容器

      Linux 中的一项虚拟化技术，称为 Linux 容器技术(LXC)。它在进程层面模拟出一套隔离的环境配置，但并没有模拟硬件和完整的操作系统。因此它完全规避了传统虚拟机的缺点，在启动速度，资源利用上远远优于虚拟机；

      - + 阅读全文 »
      @@ -1713,12 +1725,12 @@

      +
      8月
      -
      05
      +
      08
      更新于
      -
      8月05
      +
      8月08
      2020
      @@ -1731,8 +1743,8 @@

      - @@ -1747,7 +1759,7 @@

      - +

      -

      +

      @@ -1778,8 +1790,8 @@

      发表于 -

      @@ -1863,25 +1875,10 @@

      -

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

      -

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

      -

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

      -

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

      -

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

      -

      下面的参数-f是必须的

      -

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

      -
      +

      前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。

      - + 阅读全文 »
      @@ -1939,12 +1936,12 @@

      -
      -
      7月
      -
      30
      +
      +
      8月
      +
      08
      更新于
      -
      7月30
      +
      8月08
      2020
      @@ -1957,8 +1954,8 @@

      - @@ -1973,7 +1970,7 @@

      - +

      @@ -2004,8 +2001,8 @@

      发表于 -

      @@ -2089,68 +2086,15 @@

      - -

      浏览器内核

        -

      • Trident:IE，360，搜狗

        -
        • -

      • Gecko：firefox

        -
        • -

      • webkit:safari，旧版chrome

        -
        • -

      • presto：旧版opera

        -
        • -

      • blink(webkit的一个分支)：新版chrome，新版opera

        -
        • -
      -

      浏览器的渲染方式

        -

      1. 构建DOM树 -浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。（解码->令牌化->词法分析->dom树创建）

        -
        2. -

      2. 构建CSSOM -css文件加载完成，开始构建CSSOM（CSSOM只输出包含有样式的节点）

        -
        3. -

      3. 生成渲染树（Render Tree） -CSSOM构建结束后，和DOM一起生成Render Tree

        -
        4. -

      4. 计算渲染树布局（Layout） -有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。

        -
        5. -

      5. 将布局Paint绘制到屏幕上 -布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。

        -
        6. -
      -

      render

      -

      CSS阻塞渲染：由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。 -JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了。

      -

      重绘（Repaint）：

      当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

      -
        -
      • 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少。
        • -
      -

      触发重绘

        -
      1. DOM改动
        2. -
      2. CSS改动
        3. -
      -

      重排（Reflow）：

      DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

      -
        -
      • 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
        • -
      -

      触发重排

        -
      1. 当增加、删除、修改DOM节点时，会导致reflow或repaint
        2. -
      2. 当移动DOM的位置，或是插入动画的时候
        3. -
      3. 当修改CSS样式的时候
        4. -
      4. 当Resize窗口的时候，或是滚动的时候
        5. -
      5. 当修改网页的默认字体时
        6. -
      -

      最小化重绘和重排

        -

      1. 一次性修改样式：减少内联样式使用，样式合并写法

        -
        2. -

      2. 批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment）

        -
        3. -

      3. 缓存布局信息

        -
        4. -
      - - +

      一、必备知识点

      git

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

      @@ -2204,12 +2148,12 @@

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

      - @@ -2238,7 +2182,7 @@

      - +

      -

      +

      @@ -2269,8 +2213,8 @@

      发表于 -

      @@ -889,8 +876,8 @@

      - @@ -905,7 +892,7 @@

      - +

      -

      +

      @@ -936,8 +923,8 @@

      发表于 -

      @@ -1021,21 +1008,28 @@

      -

      前言

      react-native开发使用的是JS,但是并不是纯正的JS,而是一种JSX语言，就是在JS中嵌入XML语言，因此，只要有一些JS的语法基础的原生开发者，就可以肯容易理解JSX的语法了，在RN中，推荐使用ES6的语法。

      -

      性能

      使用react-native开发的最大的有点在于开发效率，加入APP并不复杂的话，那么完全可以使用纯JS开发，也就是Android和iOS公用一套界面和逻辑。极大的提高了开发效率。在性能上，RN的表现比原生弱一些，但 -是远好于H5。所以总体来看，其实RN的未来还是可以期待的。

      -

      运行机制

      RN是运行JS的，Android是运行Java字节码的，所以，实际上JS代码的最终运行是通过一层封装，把JS的代码映射成原生代码，而界面上的元素最终使用的也是原生的组件，而不是自己渲染（所以在性能上，RN比H5要 -好很多）。

      -

      Component简介

      在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：组件。我觉得Component和原生的Fragment其实很像，都存在于activity中，都受制于activity的生命周期，都可卸 -载和装载。

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

      meta基础知识

      H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

      1
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
      +

      ios竖屏拍照上传，图片被旋转问题

      1
      2
      3
      4
      5
      6
      7
      // 1.通过第三方插件exif-js获取到图片的方向
      // 2.new一个FileReader对象，加载读取上传的图片
      // 3.在fileReader的onload函数中，得到的图片文件用一个Image对象接收
      // 4.在image的onload函数中，利用步骤1中获取到的方向orientation，通过canvas旋转校正，重新绘制一张新图
      // 注意iPhone有3个拍照方向需要处理，横屏拍摄，home键在左侧，竖屏拍摄，home建上下
      // 5.将绘制的新图转成Blob对象，添加到FormData对象中，然后进行校正后的上传操作
      // 代码有点杂，待整理后上传，网上应该是可以找到的
      +

      ios：DOM元素固定一边，另一边滚动，滚动很卡的问题

      1
      2
      // (横向滚动用的多些)简单粗暴的办法，样式添加如下属性
      -webkit-overflow-scrolling: touch;
      +

      部分手机第三方输入法会将页面网上挤的问题

      1
      2
      3
      4
      5
      6
      // 特定需求页面，比如评论页面，输入框在顶部之类的
      const interval = setInterval(function() {
          document.body.scrollTop = 0;
      }, 100)
      // 注意关闭页面或者销毁组件的时候记得清空定时器
      clearInterval(interval);
      +

      iPhoneX适配

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      // 1.viewport meta 标签增加属性viewport-fit=cover
      <meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
      // 2.body元素增加样式
      body {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
      }
      // 3.如有fixed底部的元素，也增加上面样式
      xxx {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况
      }
      +

      某些机型不支持video标签的poster属性，特别是安卓

      1
      2
      3
      用图片元素 <img />来代替poster
      播放前显示<img />，隐藏 <video />
      播放后显示<video />，隐藏 <img />
      +

      CSS透明度颜色设置问题

      1
      2
      Android部分不支持 hex写法，推荐用rgba的写法
      #0000009c --> rgba(0, 0, 0, 0.61)
      +

      flex对低版本的ios和Android的支持问题

      1
      2
      3
      4
      5
      6
      7
      8
      // 使用postcss的autoprefixer插件，自动添加浏览器内核前缀，
      // 并且增加更低浏览器版本的配置，自动添加flex老版本的属性和写法
      autoprefixer({
          browsers: [
              'iOS >= 6',     // 特殊处理支持低版本IOS
              'Safari >= 6',  // 特殊处理支持低版本Safari
          ],
      }),
      +

      ios 页面回退到长列表出现灰色遮挡问题

      1
      2
      3
      4
      5
      6
      方案1：对列表数据进行缓存，比如redux之类的用法。
      方案2：回退时，跳到页面顶部。
      const timer = setTimeout(() => {
          window.scrollTo(0, 1);
          window.scrollTo(0, 0);
      }, 0);
      +

      ios 日期转换NAN的问题

      1
      2
      将日期字符串的格式符号替换成'/'。
      栗子：'yyyy-MM-dd'.replace(/-/g, '/')
      +

      react未知错误异常，导致页面崩溃，空白

      1
      2
      React 16.x 增加了componentDidCatch() 生命周期方法
      捕获全局异常来进行页面的友好提示
      +

      移动端适配

        +
      • 媒体查询
        • +
      • px2rem
        • +
      • flexible
        • +
      • flex
        • +
      • grid
        • +
      • 百分比
        • +
      + +

      @@ -1089,12 +1083,12 @@

      +
      7月
      -
      24
      +
      28
      更新于
      -
      7月24
      +
      7月28
      2020
      @@ -1107,8 +1101,8 @@

      - @@ -1123,7 +1117,7 @@

      - +

      -

      +

      @@ -1154,8 +1148,8 @@

      发表于 -

      @@ -1239,15 +1233,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
      };
      +

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

      + +

      @@ -1301,12 +1301,12 @@

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

      - @@ -1335,7 +1335,7 @@

      - +

      -

      +

      @@ -1366,8 +1366,8 @@

      发表于 -

      @@ -1451,11 +1451,17 @@

      -

      超文本传输协议（HTTP, HyperText Transfer Protocol）是一种无状态的协议，它位于OSI七层模型的传输层。HTTP客户端会根据需要构建合适的HTTP请求方法，而HTTP服务器会根据不同的HTTP请求方法做出不同的响应。

      +

      前言

      react-native开发使用的是JS,但是并不是纯正的JS,而是一种JSX语言，就是在JS中嵌入XML语言，因此，只要有一些JS的语法基础的原生开发者，就可以肯容易理解JSX的语法了，在RN中，推荐使用ES6的语法。

      +

      性能

      使用react-native开发的最大的有点在于开发效率，加入APP并不复杂的话，那么完全可以使用纯JS开发，也就是Android和iOS公用一套界面和逻辑。极大的提高了开发效率。在性能上，RN的表现比原生弱一些，但 +是远好于H5。所以总体来看，其实RN的未来还是可以期待的。

      +

      运行机制

      RN是运行JS的，Android是运行Java字节码的，所以，实际上JS代码的最终运行是通过一层封装，把JS的代码映射成原生代码，而界面上的元素最终使用的也是原生的组件，而不是自己渲染（所以在性能上，RN比H5要 +好很多）。

      +

      Component简介

      在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：组件。我觉得Component和原生的Fragment其实很像，都存在于activity中，都受制于activity的生命周期，都可卸 +载和装载。

      - + 阅读全文 »
      @@ -1513,12 +1519,12 @@

      -
      +
      7月
      -
      22
      +
      24
      更新于
      -
      7月22
      +
      7月24
      2020
      @@ -1531,8 +1537,8 @@

      - @@ -1547,7 +1553,7 @@

      - +

      @@ -1578,8 +1584,8 @@

      发表于 -

      @@ -1663,15 +1669,11 @@

      -
      -

      Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 内部所使用的语法解析器是 Babylon

      -
      -

      一个基本的.babelrc配置:

      -
      1
      2
      3
      4
      5
      6
      7
      {
        "presets": [
          "env",
          "stage-0"
        ],
        "plugins": ["transform-runtime"]
      }
      +

      什么是响应式网站

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

      - + 阅读全文 »
      @@ -1729,7 +1731,7 @@

      -
      +
      7月
      22
      @@ -1747,8 +1749,8 @@

      - @@ -1763,7 +1765,7 @@

      - +

      @@ -1794,8 +1796,8 @@

      发表于 -

      @@ -1879,31 +1881,11 @@

      -

      h5 132合法标签 -大而全的angular -emmm一上午要讲基础–还都是基本例子基本都见过

      -

      编译器

      集成开发环境@angular/cli

      -

      模板引擎

      组件库

        -
      • datagrid
        • -
      • tree z-tree
        • -
      • datepicker
        • -
      • formvalid -ng2-admin -比较接地气
        • -
      • JHipster
        • -

      • nicefish

        -
        • -

      • 生成组件

        -
        -

        ng g c User

        -
        -
        • -
      -
      1
      npm install -g @angular/cli
      +

      超文本传输协议（HTTP, HyperText Transfer Protocol）是一种无状态的协议，它位于OSI七层模型的传输层。HTTP客户端会根据需要构建合适的HTTP请求方法，而HTTP服务器会根据不同的HTTP请求方法做出不同的响应。

      - + 阅读全文 »
      @@ -1961,7 +1943,7 @@

      +
      7月
      22
      @@ -1979,8 +1961,8 @@

      - @@ -1995,7 +1977,7 @@

      - +

      -

      +

      @@ -2026,8 +2008,8 @@

      发表于 -

      @@ -2111,13 +2093,15 @@

      -

      组件通讯，意在不同的指令和组件之间共享信息。

      -

      父->子 input

      1
      2
      3
      4
      5
      // parent.html
      <child [content]="i"></child>

      // child.ts
      @Input() content:string;
      -

      子->父 output

      1
      2
      3
      4
      5
      6
      7
      // parent.html
      <child (changeNumber)="changeNumber($event)"></child>

      // child.ts
      @Output() changeNumber: EventEmitter<number> = new EventEmitter();

      this.changeNumber(1);
      +
      +

      Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 内部所使用的语法解析器是 Babylon

      +
      +

      一个基本的.babelrc配置:

      +
      1
      2
      3
      4
      5
      6
      7
      {
        "presets": [
          "env",
          "stage-0"
        ],
        "plugins": ["transform-runtime"]
      }
      - + 阅读全文 »
      @@ -2175,7 +2159,7 @@

      +
      7月
      22
      @@ -2193,8 +2177,8 @@

      - @@ -2209,7 +2193,7 @@

      - +

      -

      +

      @@ -2240,8 +2224,8 @@

      发表于 -

      @@ -2325,37 +2309,31 @@

      -

      前言

      本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建。

      -

      客户端渲染与服务端渲染

      客户端渲染

        -
      • 客户端渲染，实际上就是客户端向服务端请求页面，服务端返回的是一个非常简单的 HTML 页面，在这个页面里，只有很少的一些 HTML 标签
        • -
      • 客户端渲染时，页面中有两个比较重要的点，第一个是 script 标签，可能会有好几个 script 标签，这个标签是打包后的 js 代码，用来生成 DOM 元素，发送请求，事件绑定等。但是，生成的 DOM 元素需要有一个在页面上展示的容器，所以另外一个点就是容器，一般是一个 id 名为 root 或 app 的 div 标签，类似于这样 <div id="root"></div> 或<div id="app"></div>
        • -
      • 客户端渲染的特点
          -
        • 客户端加载所有的 js 资源，渲染 DOM 元素
          • -
        • 在浏览器页面上的所有资源，都由客户端主动去获取，服务端只负责静态资源的提供和 API 接口，不再负责页面的渲染，如果采用 CDN 的话，服务端仅仅需要提供 API 接口
          • -
        • 优点: 前后端分离，责任区分，前端专注页面的开发，后端专注接口的开发
          • -
        • 缺点: 首屏加载资源多，首屏加载时响应慢。页面上没有 DOM 元素，不利于 SEO 优化
          • -
        +

        h5 132合法标签 +大而全的angular +emmm一上午要讲基础–还都是基本例子基本都见过

        +

        编译器

        集成开发环境@angular/cli

        +

        模板引擎

        组件库

          +
        • datagrid
          • +
        • tree z-tree
          • +
        • datepicker
          • +
        • formvalid +ng2-admin +比较接地气
          • +
        • JHipster
          • +

        • nicefish

          • -
        -

        服务端渲染

          -
        • 服务端渲染，就是客户端页面上的 HTML 元素，都要由服务端负责渲染。服务端利用模板引擎，把数据填充到模板中，生成 HTML 字符串，最终把 HTML 字符串返回到浏览器，浏览器接收到 HTML 字符串，通过 HTML 引擎解析，最终生成 DOM 元素，显示在页面上
          • -
        • 比如 Node.js 可以渲染的模板引擎有 ejs，nunjucks，pug 等。Java 最常见的是 JSP 模板引擎。Python 最常见的是 Jinja2 模板引擎。
          • -
        • 服务端渲染的特点
            -
          • 优点: 页面资源大多由服务端负责处理，所以页面加载速度快，缩短首屏加载时间。有利于 SEO 优化。无需占用客户端资源
            • -
          • 缺点: 不利于前后端分离，开发效率低。占用服务器资源
            • -
          +

        • 生成组件

          +
          +

          ng g c User

          +
        -

        区分与选择

          -
        • 客户端渲染和服务端渲染本质的区别就是，是谁负责 HTML 页面的拼接，那么就是谁渲染的页面
          • -
        • 如果对首屏加载时间有非常高的需求，或者是需要 SEO 优化，那么就选择服务端渲染
          • -
        • 如果对首屏加载时间没有要求，也不需要做 SEO 优化，类似于做后台管理系列的业务，那么就可以选择客户端渲染
          • -
        • 具体选择客户端渲染还是服务端渲染，没有强制的要求，具体要根据项目的需求来区分选择
          • -
        +
        1
        npm install -g @angular/cli
        - + 阅读全文 »
        @@ -2413,12 +2391,12 @@

        +
        7月
        -
        21
        +
        22
        更新于
        -
        7月21
        +
        7月22
        2020
        @@ -2431,8 +2409,8 @@

        - @@ -2447,7 +2425,7 @@

        - +

        -

        +

        @@ -2478,8 +2456,8 @@

        发表于 -

        @@ -2563,16 +2541,13 @@

        -

        聊聊 Vue 中 axios 的封装

        axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：

        -
        -

        Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

        -
        -

        作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。

        -

        虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用。下面，我们就来聊聊 Vue 中 axios 的封装。

        +

        组件通讯，意在不同的指令和组件之间共享信息。

        +

        父->子 input

        1
        2
        3
        4
        5
        // parent.html
        <child [content]="i"></child>

        // child.ts
        @Input() content:string;
        +

        子->父 output

        1
        2
        3
        4
        5
        6
        7
        // parent.html
        <child (changeNumber)="changeNumber($event)"></child>

        // child.ts
        @Output() changeNumber: EventEmitter<number> = new EventEmitter();

        this.changeNumber(1);
        - + 阅读全文 »
        @@ -2835,7 +2810,7 @@

        - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

      diff --git a/page/7/index.html b/page/7/index.html index 21689f262..a994c1ae5 100644 --- a/page/7/index.html +++ b/page/7/index.html @@ -428,12 +428,12 @@

      Blog

      -
      +
      7月
      -
      21
      +
      22
      更新于
      -
      7月21
      +
      7月22
      2020
      @@ -446,8 +446,8 @@

      Blog

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

      Blog

      - +

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

      发表于 -

      @@ -578,27 +578,41 @@

      - -

      eval

      1
      2
      var json = '{"a":"1", "b":2}';
      var obj = eval("(" + json + ")");  // obj 就是 json 反序列化之后得到的对象
      -
      -

      为什么要加括号呢？ -因为js中{}通常是表示一个语句块，eval只会计算语句块内的值进行返回。加上括号就变成一个整体的表达式。

      -
      -
      1
      2
      console.log( eval('{}') );      // undefind
      console.log( eval('({})') );    // Object {}
      -
      -

      eval作用域问题 -

      1
      2
      3
      4
      5
      6
      7
      var s = 1;
      function a() {
          eval('var s=2');
          console.log(s);
      }
      a();                // 2
      console.log(s);     // 1
      -在局部环境使用eval便会创建局部变量。可以显示指定eval调用者来改变上下文环境。

      -
      -
      1
      2
      3
      4
      5
      6
      7
      var s = 'global';
      function a() {
          eval('var s = "local"');
          console.log(s);                 // local
          console.log(eval('s'));         // local
          console.log(window.eval('s'));  // global
      }
      -

      对参数json进行校验防止xss漏洞

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      var rx_one = /^[\],:{}\s]*$/;
      var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
      var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
      var rx_four = /(?:^|:|,)(?:\s*\[)+/g;

      if (
          rx_one.test(
              json
                  .replace(rx_two, "@")
                  .replace(rx_three, "]")
                  .replace(rx_four, "")
          )
      ) {
          var obj = eval("(" +json + ")");
      }
      -

      递归手动扫描每个字符

      new Function 函数声明的传参形式

      1
      2
      var add = new Function('a, b', 'return a+b;');
      console.log( add(2, 3) );    // 5
      -
      1
      2
      var jsonStr = '{ "age": 20, "name": "jack" }',
          json = (new Function('return ' + jsonStr))();
      -

      插入script

      -

      模拟jsonP的方式拼接字符串然后以callBack的方式返回。

      -
      - - +

      前言

      本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建。

      +

      客户端渲染与服务端渲染

      客户端渲染

        +
      • 客户端渲染，实际上就是客户端向服务端请求页面，服务端返回的是一个非常简单的 HTML 页面，在这个页面里，只有很少的一些 HTML 标签
        • +
      • 客户端渲染时，页面中有两个比较重要的点，第一个是 script 标签，可能会有好几个 script 标签，这个标签是打包后的 js 代码，用来生成 DOM 元素，发送请求，事件绑定等。但是，生成的 DOM 元素需要有一个在页面上展示的容器，所以另外一个点就是容器，一般是一个 id 名为 root 或 app 的 div 标签，类似于这样 <div id="root"></div> 或<div id="app"></div>
        • +
      • 客户端渲染的特点
          +
        • 客户端加载所有的 js 资源，渲染 DOM 元素
          • +
        • 在浏览器页面上的所有资源，都由客户端主动去获取，服务端只负责静态资源的提供和 API 接口，不再负责页面的渲染，如果采用 CDN 的话，服务端仅仅需要提供 API 接口
          • +
        • 优点: 前后端分离，责任区分，前端专注页面的开发，后端专注接口的开发
          • +
        • 缺点: 首屏加载资源多，首屏加载时响应慢。页面上没有 DOM 元素，不利于 SEO 优化
          • +
        +
        • +
      +

      服务端渲染

        +
      • 服务端渲染，就是客户端页面上的 HTML 元素，都要由服务端负责渲染。服务端利用模板引擎，把数据填充到模板中，生成 HTML 字符串，最终把 HTML 字符串返回到浏览器，浏览器接收到 HTML 字符串，通过 HTML 引擎解析，最终生成 DOM 元素，显示在页面上
        • +
      • 比如 Node.js 可以渲染的模板引擎有 ejs，nunjucks，pug 等。Java 最常见的是 JSP 模板引擎。Python 最常见的是 Jinja2 模板引擎。
        • +
      • 服务端渲染的特点
          +
        • 优点: 页面资源大多由服务端负责处理，所以页面加载速度快，缩短首屏加载时间。有利于 SEO 优化。无需占用客户端资源
          • +
        • 缺点: 不利于前后端分离，开发效率低。占用服务器资源
          • +
        +
        • +
      +

      区分与选择

        +
      • 客户端渲染和服务端渲染本质的区别就是，是谁负责 HTML 页面的拼接，那么就是谁渲染的页面
        • +
      • 如果对首屏加载时间有非常高的需求，或者是需要 SEO 优化，那么就选择服务端渲染
        • +
      • 如果对首屏加载时间没有要求，也不需要做 SEO 优化，类似于做后台管理系列的业务，那么就可以选择客户端渲染
        • +
      • 具体选择客户端渲染还是服务端渲染，没有强制的要求，具体要根据项目的需求来区分选择
        • +
      +
      + +
      + + 阅读全文 » + +
      +
      @@ -652,7 +666,7 @@

      +
      7月
      21
      @@ -686,7 +700,7 @@

      - +

      -

      +

      @@ -717,8 +731,8 @@

      发表于 -

      @@ -802,17 +816,16 @@

      -

      执行上下文(EC)就是当前JavaScript代码被解析和执行是所在环境的抽象概念，JavaScript中运行任何的代码都是在执行上下文中运行。

      -

      变量/函数提升(函数及变量的声明都将被提升到函数的最顶部，且函数声明在变量声明上边)

      1
      2
      3
      4
      5
      if(!("a" in window)){ // false
          var a=1;
      }
      console.log(a) // undefined
      // if(o.x){} // 不能判断属性存不存在 假值undefine,null,false," ",0或NaN
      -
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      function foo() {
          console.log('foo1');
      }

      foo();  // foo2

      function foo() {
          console.log('foo2');
      }

      foo(); // foo2
      ---
      var getName = function () { alert (4);};
      function getName() { alert (5);}
      getName(); // 4
      ---
      function getName() { alert (5);}
      var getName = function () { alert (4);};
      function getName() { alert (6);}
      getName(); // 4
      -

      函数表达式执行的优先级==!主要原因是函数声明都被提前了，所以函数表达式在最后会覆盖。

      -

      JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。插槽slot -可执行代码的类型：全局代码、函数代码、eval代码。 -JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文

      +

      聊聊 Vue 中 axios 的封装

      axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：

      +
      +

      Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

      +
      +

      作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。

      +

      虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用。下面，我们就来聊聊 Vue 中 axios 的封装。

      - + 阅读全文 »
      @@ -904,7 +917,7 @@

      - +

      @@ -935,8 +948,8 @@

      发表于 -

      @@ -1101,8 +1125,8 @@

      - @@ -1117,7 +1141,7 @@

      - +

      -

      +

      @@ -1148,8 +1172,8 @@

      发表于 -

      @@ -1233,23 +1257,17 @@

      -

      web安全一直是开发中不可忽视的一部分。而xss作为web开发中最常见的攻击手段，防范是必然的。基于web浏览器tricks，JavaScript的发展，npm等开源项目漏 -洞，web注入等会让开发者越来越防不胜防。

      -

      插入执行标签

        -
      • script
        • -
      • img onerror触发
        • -
      • iframe srcdoc触发
        • -
      -

      标签等提前闭合(截断)

        -
      • 如在富文本, input, textarea, 可编辑div等，0x01，0x02
        • -
      • style标签
        1
        2
        3
        <style>
        </style ><script>alert(1)</script>
        </style>
        • -
      • 注释提前闭合
        1
        --!><script>alert(1)</script>
        -
        • -
      +

      执行上下文(EC)就是当前JavaScript代码被解析和执行是所在环境的抽象概念，JavaScript中运行任何的代码都是在执行上下文中运行。

      +

      变量/函数提升(函数及变量的声明都将被提升到函数的最顶部，且函数声明在变量声明上边)

      1
      2
      3
      4
      5
      if(!("a" in window)){ // false
          var a=1;
      }
      console.log(a) // undefined
      // if(o.x){} // 不能判断属性存不存在 假值undefine,null,false," ",0或NaN
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      function foo() {
          console.log('foo1');
      }

      foo();  // foo2

      function foo() {
          console.log('foo2');
      }

      foo(); // foo2
      ---
      var getName = function () { alert (4);};
      function getName() { alert (5);}
      getName(); // 4
      ---
      function getName() { alert (5);}
      var getName = function () { alert (4);};
      function getName() { alert (6);}
      getName(); // 4
      +

      函数表达式执行的优先级==!主要原因是函数声明都被提前了，所以函数表达式在最后会覆盖。

      +

      JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。插槽slot +可执行代码的类型：全局代码、函数代码、eval代码。 +JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文

      - + 阅读全文 »
      @@ -1307,12 +1325,12 @@

      +
      7月
      -
      18
      +
      21
      更新于
      -
      7月18
      +
      7月21
      2020
      @@ -1325,8 +1343,8 @@

      - @@ -1341,7 +1359,7 @@

      - +

      -

      +

      @@ -1372,8 +1390,8 @@

      发表于 -

      @@ -1457,27 +1475,12 @@

      -

      webpack4 最主要的卖点便是零配置，要想成为一位webpack配置工程师怎么能不开始了解呢？话不多说，让我们开始体验 webpack 4 的一些特性。

      -

      entry 和 output

        -

      1. 创建空目录，初始化配置

        -
        1
        2
        3
        mkdir webpack4-quickstart
        cd  webpack4-quickstart
        npm init -xyz
        -
        2. -

      2. 安装相关依赖

        -
        1
        2
        npm i webpack --save-dev
        npm i webpack-cli --save-dev
        -
        3. -
      -
        -
      • webpack： 即 webpack 核心库。它提供了很多 API, 通过 Node.js 脚本中 require(‘webpack’) 的方式来使用 webpack。
        • -
      • webpack-cli：是 webpack 的命令行工具。webpack 4 之前命令行工具是集成在 webpack 包中的，4.0 开始 webpack 包本身不再集成 cli。
        • -
      -
        -
      1. package.json添加构建命令
        1
        2
        3
        "scripts":{
            "build":"webpack"
        }
        -
        2. -
      +

      防止冒泡

      w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

      +

      stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。

      - + 阅读全文 »
      @@ -1535,12 +1538,12 @@

      +
      7月
      -
      17
      +
      21
      更新于
      -
      7月17
      +
      7月21
      2020
      @@ -1553,8 +1556,8 @@

      - @@ -1569,7 +1572,7 @@

      - +

      -

      +

      @@ -1600,8 +1603,8 @@

      发表于 -

      @@ -1685,13 +1688,23 @@

      -

      JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里。

      -
      -

      在JS中函数作为普通对象进行传递

      +

      web安全一直是开发中不可忽视的一部分。而xss作为web开发中最常见的攻击手段，防范是必然的。基于web浏览器tricks，JavaScript的发展，npm等开源项目漏 +洞，web注入等会让开发者越来越防不胜防。

      +

      插入执行标签

        +
      • script
        • +
      • img onerror触发
        • +
      • iframe srcdoc触发
        • +
      +

      标签等提前闭合(截断)

        +
      • 如在富文本, input, textarea, 可编辑div等，0x01，0x02
        • +
      • style标签
        1
        2
        3
        <style>
        </style ><script>alert(1)</script>
        </style>
        • +
      • 注释提前闭合
        1
        --!><script>alert(1)</script>
        +
        • +
      - + 阅读全文 »
      @@ -1749,12 +1762,12 @@

      -
      +
      7月
      -
      17
      +
      18
      更新于
      -
      7月17
      +
      7月18
      2020
      @@ -1783,7 +1796,7 @@

      - +

      @@ -1814,8 +1827,8 @@

      发表于 -

      @@ -1899,26 +1912,27 @@

      -

      HTTP 特性

        -
      • 基于TCP-IP协议 应用层协议 默认端口号80
        • -
      • 无连接无状态
        • -
      -

      什么是无状态

        -
      • 状态】的含义就是：客户端和服务器在某次会话中产生的数据
        • -
      • 那么对应的【无状态】就意味着：这些数据不会被保留
        • -
      • 通过增加cookie和session机制，现在的网络请求其实是有状态的
        • -
      • 在没有状态的http协议下，服务器也一定会保留你每次网络请求对数据的修改，但这跟保留每次访问的数据是不一样的，保留的只是会话产生的结果，而没有保留会话
        • -
      -

      HTTP 报文

      请求报文

      HTTP 协议是以 ASCII （a s ki）码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。

      +

      webpack4 最主要的卖点便是零配置，要想成为一位webpack配置工程师怎么能不开始了解呢？话不多说，让我们开始体验 webpack 4 的一些特性。

      +

      entry 和 output

        +

      1. 创建空目录，初始化配置

        +
        1
        2
        3
        mkdir webpack4-quickstart
        cd  webpack4-quickstart
        npm init -xyz
        +
        2. +

      2. 安装相关依赖

        +
        1
        2
        npm i webpack --save-dev
        npm i webpack-cli --save-dev
        +
        3. +
        -
      • GET 可提交的数据量受到URL长度的限制，HTTP 协议规范没有对 URL 长度进行限制。这个限制是特定的浏览器及服务器对它的限制
        • -
      • 理论上讲，POST 是没有大小限制的，HTTP 协议规范也没有进行大小限制，出于安全考虑，服务器软件在实现时会做一定限制
        • -
      • 参考上面的报文示例，可以发现 GET 和 POST 数据内容是一模一样的，只是位置不同，一个在 URL 里，一个在 HTTP 包的包体里
        • +
      • webpack： 即 webpack 核心库。它提供了很多 API, 通过 Node.js 脚本中 require(‘webpack’) 的方式来使用 webpack。
        • +
      • webpack-cli：是 webpack 的命令行工具。webpack 4 之前命令行工具是集成在 webpack 包中的，4.0 开始 webpack 包本身不再集成 cli。
      +
        +
      1. package.json添加构建命令
        1
        2
        3
        "scripts":{
            "build":"webpack"
        }
        +
        2. +
      - + 阅读全文 »
      @@ -1976,7 +1990,7 @@

      +
      7月
      17
      @@ -1994,8 +2008,8 @@

      - @@ -2010,7 +2024,7 @@

      - +

      -

      +

      @@ -2041,8 +2055,8 @@

      发表于 -

      @@ -2126,16 +2140,13 @@

      -

      圣杯布局和双飞翼布局(其实是一回事)都是实现的三栏布局。

      -

      浮动布局(float + margin)

      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
      <div class="container">
          <div class="left">Left</div>
           <!-- 右栏部分要写在中间内容之前 -->
          <div class="right">Right</div>
          <div class="main">Main</div>
      </div>

      body,html,.container{
          height: 100%;
          padding:0;
          margin: 0;
      }
      /*左边栏左浮动*/
      .left{
          float:left;
          height:100%;
          width:200px;
          background:#333;
      }
      /*中间栏自适应*/
      .main{
          height:100%;
          margin:0 200px;
          background: red;
      }
      /*右边栏右浮动*/
      .right{
          float:right;
          height:100%;
          width:200px;
          background:#333;
      }
      -
        -
      • 优点：快捷 简单 兼容性较好
        • -
      • 缺点: 有局限性 脱离文档流 需要清除浮动等
        • -
      +

      JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里。

      +
      +

      在JS中函数作为普通对象进行传递

      - + 阅读全文 »
      @@ -2193,12 +2204,12 @@

      +
      7月
      -
      15
      +
      17
      更新于
      -
      7月15
      +
      7月17
      2020
      @@ -2211,8 +2222,8 @@

      - @@ -2227,7 +2238,7 @@

      - +

      -

      +

      @@ -2258,8 +2269,8 @@

      发表于 -

      @@ -2343,17 +2354,26 @@

      -

      它来了，它来了，16.8版本hooks成功加入(^▽^)

      -

      你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？ -—— 拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

      -

      你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？ -—— 拥有了Hooks，生命周期钩子函数可以先丢一边了。

      -

      你在还在为组件中的this指向而晕头转向吗？ -—— 既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

      +

      HTTP 特性

        +
      • 基于TCP-IP协议 应用层协议 默认端口号80
        • +
      • 无连接无状态
        • +
      +

      什么是无状态

        +
      • 状态】的含义就是：客户端和服务器在某次会话中产生的数据
        • +
      • 那么对应的【无状态】就意味着：这些数据不会被保留
        • +
      • 通过增加cookie和session机制，现在的网络请求其实是有状态的
        • +
      • 在没有状态的http协议下，服务器也一定会保留你每次网络请求对数据的修改，但这跟保留每次访问的数据是不一样的，保留的只是会话产生的结果，而没有保留会话
        • +
      +

      HTTP 报文

      请求报文

      HTTP 协议是以 ASCII （a s ki）码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。

      +
        +
      • GET 可提交的数据量受到URL长度的限制，HTTP 协议规范没有对 URL 长度进行限制。这个限制是特定的浏览器及服务器对它的限制
        • +
      • 理论上讲，POST 是没有大小限制的，HTTP 协议规范也没有进行大小限制，出于安全考虑，服务器软件在实现时会做一定限制
        • +
      • 参考上面的报文示例，可以发现 GET 和 POST 数据内容是一模一样的，只是位置不同，一个在 URL 里，一个在 HTTP 包的包体里
        • +
      - + 阅读全文 »
      @@ -2411,12 +2431,12 @@

      -
      +
      7月
      -
      13
      +
      17
      更新于
      -
      7月13
      +
      7月17
      2020
      @@ -2429,8 +2449,8 @@

      - @@ -2445,7 +2465,7 @@

      - +

      @@ -2476,8 +2496,8 @@

      发表于 -

      @@ -2561,15 +2581,16 @@

      -

      1.01^365=37.8

      -
      -

      两个盒子，一个下边距20px，一个上边距50px，最后为两个盒子之间的距离为多少 50px -解决:根据W3C的标准，在页面中元素都一个隐含的属性叫做Block FormattingContext -简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

      +

      圣杯布局和双飞翼布局(其实是一回事)都是实现的三栏布局。

      +

      浮动布局(float + margin)

      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
      <div class="container">
          <div class="left">Left</div>
           <!-- 右栏部分要写在中间内容之前 -->
          <div class="right">Right</div>
          <div class="main">Main</div>
      </div>

      body,html,.container{
          height: 100%;
          padding:0;
          margin: 0;
      }
      /*左边栏左浮动*/
      .left{
          float:left;
          height:100%;
          width:200px;
          background:#333;
      }
      /*中间栏自适应*/
      .main{
          height:100%;
          margin:0 200px;
          background: red;
      }
      /*右边栏右浮动*/
      .right{
          float:right;
          height:100%;
          width:200px;
          background:#333;
      }
      +
        +
      • 优点：快捷 简单 兼容性较好
        • +
      • 缺点: 有局限性 脱离文档流 需要清除浮动等
        • +
      - + 阅读全文 »
      @@ -2832,7 +2853,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
      diff --git a/page/8/index.html b/page/8/index.html index acc2afd48..cfe743dd4 100644 --- a/page/8/index.html +++ b/page/8/index.html @@ -428,12 +428,12 @@

      Blog

      -
      +
      7月
      -
      11
      +
      13
      更新于
      -
      7月11
      +
      7月13
      2020
      @@ -446,8 +446,8 @@

      Blog

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

      Blog

      - +

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

      发表于 -

      @@ -578,43 +578,15 @@

      -

      主流的双向绑定方法 -1.发布-订阅模式 -通过使用 get 和 set 的方式获取数据然后更新数据，其原理就是监听页面中某个具体元素的事件，然后将其最新的值手动 set 到 数据中，同时订阅 model 层的改变，然后触发页面的渲染更新

      -

      2.脏检测 -通过对比数据是否有变更，来决定是否更新视图。最简单的可以通过定时轮询去检测数据的变动。Angular 只有在指定事件触发时进入脏检测：

      -
        -
      • DOM事件，比如用户输入文本点击按钮等（ng-click）
        • -
      • XHR响应事件 -浏览器 Location 变更
        • -
      • Timer事件
        • -
      • 执行 $digest() 或 $apply();
        • -
      -

      脏检查的主要原理是在将数据绑定到 View 的时候，就在监听器列表（scope 作用域中的监听队列 watchList）中插入一条监听器，当触发 UI 事件或者 Ajax 请求时，就会触发脏检查（$digest cycle), 在 $digest 流程中，将遍历每个数据变量的 watcher，比较它的新旧值。当新旧值不同时，触发 listener 函数，执行相关的更新逻辑。这个过程将会一直重复，直到所有数据指令的新旧值都相同为止。

      -

      脏检查虽然可以达到实现双向绑定，但是当页面中绑定的 watcher 过多时，就会引发性能问题。所以 angular 在进行 $digest 检测时，会限制循环检查的次数最少2次，最多10次，防止无效的检查。

      -

      3.数据劫持 -通过 ES5 的 Object.defineProperty() 来劫持数据属性的 getter 和 setter， 在数据变动时触发订阅者（watcher），从而触发相应的监听回调更新视图。

      -
        -
      • Observer 对数据的所有属性进行监听其 getter 和 setter
        • -
      • Compile 是一个指令解析器，对 MVVM 实例的所有元素指令进行解析，并渲染成 model 中的绑定数据，当数据进行更新时，也能替换为更新后的值。
        • -
      • Watcher 作为 Compile 和 Observer 的桥梁，能够订阅数据属性的更新，然后执行相应的监听回调
        • -
      • Deps 用于存放监听器数组，主要用来保存 Watcher
        • -
      • Updater 执行更新操作，针对不同的指令进行不同的更新操作，如 v-model, v-class, v-html 等类型的指令。
        • -
      • MVVM 作为入口函数，整合以上所有的功能。
        • -
      -

      vue-mvvm

      -

      Observer 劫持了所有数据属性的 getter 和 setter，当数据发生改变时，就会通知 deps 中所有 watcher 的更新操作，进而触发页面的重新渲染，这是修改 Model 层从而引发 View 层的重新渲染。 -在 Compile 中监听可输入元素的事件，然后将新值更新到 model 的数据中，这是修改 View 层触发的 Model 层的修改。

      -
        -
      • 用户名或者邮箱跟github没有关联上， github认为不是你提交的， 不统计。
        • -
      • fork 的项目， 不统计
        • -
      • 没有在版本库的master【默认分支】上提交
        • -
      -

      解读

      +

      1.01^365=37.8

      +
      +

      两个盒子，一个下边距20px，一个上边距50px，最后为两个盒子之间的距离为多少 50px +解决:根据W3C的标准，在页面中元素都一个隐含的属性叫做Block FormattingContext +简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

      - + 阅读全文 »
      @@ -672,12 +644,12 @@

      -
      +
      7月
      -
      10
      +
      11
      更新于
      -
      7月10
      +
      7月11
      2020
      @@ -706,7 +678,7 @@

      - +

      @@ -737,8 +709,8 @@

      发表于 -

      @@ -822,48 +794,47 @@

      - -

      在JS中，我们可以使用 setTimeout 和 setIntarval 实现动画，但是 H5 的出现，让我们又多了两种实现动画的方式，分别是 CSS 动画（transition、animation）和 H5的canvas 实现。除此以外，H5还提供了一个专门用于请求动画的API，让 DOM 动画、canvas动画、svg动画、webGL动画等有一个专门的刷新机制。

      -
      -

      传统的javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题

      +

      主流的双向绑定方法 +1.发布-订阅模式 +通过使用 get 和 set 的方式获取数据然后更新数据，其原理就是监听页面中某个具体元素的事件，然后将其最新的值手动 set 到 数据中，同时订阅 model 层的改变，然后触发页面的渲染更新

      +

      2.脏检测 +通过对比数据是否有变更，来决定是否更新视图。最简单的可以通过定时轮询去检测数据的变动。Angular 只有在指定事件触发时进入脏检测：

        -
      • 动画的循时间环间隔不好确定(推荐的最佳循环间隔是17ms（大多数电脑的显示器刷新频率是60Hz，1000ms/60）)
        • -
      • 定时器第二个时间参数只是指定了多久后将动画任务添加到浏览器的UI线程队列中，如果UI线程处于忙碌状态，那么动画不会立刻执行
        • +
      • DOM事件，比如用户输入文本点击按钮等（ng-click）
        • +
      • XHR响应事件 +浏览器 Location 变更
        • +
      • Timer事件
        • +
      • 执行 $digest() 或 $apply();
      -
      -

      1. 定义

      requestAnimationFrame 方法会告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画。

      -
      1
      window.requestAnimationFrame(callback)
      +

      脏检查的主要原理是在将数据绑定到 View 的时候，就在监听器列表（scope 作用域中的监听队列 watchList）中插入一条监听器，当触发 UI 事件或者 Ajax 请求时，就会触发脏检查（$digest cycle), 在 $digest 流程中，将遍历每个数据变量的 watcher，比较它的新旧值。当新旧值不同时，触发 listener 函数，执行相关的更新逻辑。这个过程将会一直重复，直到所有数据指令的新旧值都相同为止。

      +

      脏检查虽然可以达到实现双向绑定，但是当页面中绑定的 watcher 过多时，就会引发性能问题。所以 angular 在进行 $digest 检测时，会限制循环检查的次数最少2次，最多10次，防止无效的检查。

      +

      3.数据劫持 +通过 ES5 的 Object.defineProperty() 来劫持数据属性的 getter 和 setter， 在数据变动时触发订阅者（watcher），从而触发相应的监听回调更新视图。

        -
      • callback：下一次重绘之前更新动画帧所调用的函数，callback仅有一个参数，为DOMHighResTimeStamp参数，表示requestAnimationFrame()开始执行回调函数的时刻。
        • -
      • 返回值：一个 long 类型整数，唯一标志元组在列表中的位置，你可以传这个值给cancelAnimationFrame() 以取消动画。
        • +
      • Observer 对数据的所有属性进行监听其 getter 和 setter
        • +
      • Compile 是一个指令解析器，对 MVVM 实例的所有元素指令进行解析，并渲染成 model 中的绑定数据，当数据进行更新时，也能替换为更新后的值。
        • +
      • Watcher 作为 Compile 和 Observer 的桥梁，能够订阅数据属性的更新，然后执行相应的监听回调
        • +
      • Deps 用于存放监听器数组，主要用来保存 Watcher
        • +
      • Updater 执行更新操作，针对不同的指令进行不同的更新操作，如 v-model, v-class, v-html 等类型的指令。
        • +
      • MVVM 作为入口函数，整合以上所有的功能。
      -

      在使用和实现上， requestAnimationFrame 与 setTimeout 类似。举个例子：

      -
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      let count = 0;
      let rafId = null;
      /**
       * 回调函数
       * @param time requestAnimationFrame 调用该函数时，自动传入的一个时间
       */
      function requestAnimation(time) {
        console.log(time); // 打印执行requestAnimation函数的时刻
        // 动画没有执行完，则递归渲染
        if (count < 5) {
          count++;
          // 渲染下一帧
          rafId = window.requestAnimationFrame(requestAnimation);
        }
      }
      // 渲染第一帧
      window.requestAnimationFrame(requestAnimation);
      -

      2.怎样执行

        -
      • 首先判断 document.hidden 属性是否可见（true），可见状态下才能继续执行以下步骤
        • -
      • 浏览器清空上一轮的动画函数
        • -
      • requestAnimationFrame 将回调函数追加到动画帧请求回调函数列表的末尾 -注意：当执行 requestAnimationFrame(callback)的时候，不会立即调用 callback 回调函数，只是将其放入回调函数队列而已，同时注意，每个 callback回调函数都有一个 cancelled 标志符，初始值为 false，并对外不可见。
        • -
      • 当页面可见并且动画帧请求callback回调函数列表不为空时，浏览器会定期将这些回调函数加入到浏览器 UI 线程的队列中（由系统来决定回调函数的执行时机）。当浏览器执行这些 callback 回调函数的时候，会判断每个元组的 callback 的cancelled标志符，只有 cancelled 为 false 时，才执行callback回调函数。
        • +

        vue-mvvm

        +

        Observer 劫持了所有数据属性的 getter 和 setter，当数据发生改变时，就会通知 deps 中所有 watcher 的更新操作，进而触发页面的重新渲染，这是修改 Model 层从而引发 View 层的重新渲染。 +在 Compile 中监听可输入元素的事件，然后将新值更新到 model 的数据中，这是修改 View 层触发的 Model 层的修改。

        +
          +
        • 用户名或者邮箱跟github没有关联上， github认为不是你提交的， 不统计。
          • +
        • fork 的项目， 不统计
          • +
        • 没有在版本库的master【默认分支】上提交
        -

        3. 优点

          -
        1. requestAnimationFrame 自带函数节流功能，采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间的过短，造成过度绘制，增加页面开销，也不会因为间隔时间过长，造成动画卡顿，不流程，影响页面美观。 -浏览器的重绘频率一般会和显示器的刷新率保持同步。大多数采用 W3C规范，浏览器的渲染页面的标准频率也为 60 FPS（frames/per second）即每秒重绘60次，requestAnimationFrame的基本思想是 让页面重绘的频率和刷新频率保持同步，即每 1000ms / 60 = 16.7ms执行一次。 -通过 requestAnimationFrame 调用回调函数引起的页面重绘或回流的时间间隔和显示器的刷新时间间隔相同。所以 requestAnimationFrame 不需要像 setTimeout 那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷新频率。例如在某些高频事件（resize，scroll 等）中，使用 requestAnimationFrame 可以防止在一个刷新间隔内发生多次函数执行，这样保证了流程度，也节省了开销
          2. -
        2. 另外，该函数的延时效果是精确的，没有setTimeout或setInterval不准的情况（JS是单线程的，setTimeout 任务被放进异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列的任务是否需要开始执行，造成时间延时）。 -setTimeout的执行只是在内存中对图像属性进行改变，这个改变必须要等到下次浏览器重绘时才会被更新到屏幕上。如果和屏幕刷新步调不一致，就可能导致中间某些帧的操作被跨越过去，直接更新下下一帧的图像。即 掉帧 -使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿
          3. -
        3. 节省资源，节省开销 -在之前介绍requestAnimationFrame执行过程，我们知道只有当页面激活的状态下，页面刷新任务才会开始，才执行 requestAnimationFrame，当页面隐藏或最小化时，会被暂停，页面显示，会继续执行。节省了 CPU 开销。 -注意：当页面被隐藏或最小化时，定时器setTimeout仍在后台执行动画任务，此时刷新动画是完全没有意义的（实际上 FireFox/Chrome 浏览器对定时器做了优化：页面闲置时，如果时间间隔小于 1000ms，则停止定时器，与requestAnimationFrame行为类似。如果时间间隔>=1000ms，定时器依然在后台执行）
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          // 在浏览器开发者工具的Console页执行下面代码。
          // 当开始输出count后，切换浏览器tab页，再切换回来，可以发现打印的值从离开前的值继续输出
          let count = 0;
              function requestAnimation() {
                  if (count < 100) {
                      count++;
                      console.log(count);
                      requestAnimationFrame(requestAnimation);
                  }
              }
          requestAnimationFrame(requestAnimation);
          4. -
        4. 能够在动画流刷新之后执行，即上一个动画流会完整执行
          5. -
        -

        4. 实现

        我们可以使用 requestAnimationFrame 实现setInterval及 setTimeout

        -
        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
        // setInterval实现
        function setInterval(callback, interval) {
            let timer
            const now = Date.now
            let startTime = now()
            let endTime = startTime
            const loop = () ={
                timer = window.requestAnimationFrame(loop)
                endTime = now()
                if (endTime - startTime >= interval) {
                    startTime = endTime = now()
                    callback(timer)
                }
            }
            timer = window.requestAnimationFrame(loop)
            return timer
        }

        let a = 0
        setInterval(timer ={
            console.log(a)
            a++
            if (a === 3) window.cancelAnimationFrame(timer)
        }, 1000)
        // 0
        // 1
        // 2
        -
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        // setTimeout 实现
        function setTimeout(callback, interval) {
            let timer
            const now = Date.now
            let startTime = now()
            let endTime = startTime
            const loop = () ={
                timer = window.requestAnimationFrame(loop)
                endTime = now()
                if (endTime - startTime >= interval) {
                    callback(timer)
                    window.cancelAnimationFrame(timer)
                }
            }
            timer = window.requestAnimationFrame(loop)
            return timer
        }

        let a = 0
        setTimeout(timer ={
            console.log(a)
            a++
        }, 1000)
        // 0
        -

        5. 参考

        MDN

        - - +

        解读

        +
        + +
        + + 阅读全文 » + +
        +
      @@ -917,7 +888,7 @@

      5 -
      +
      7月
      10
      @@ -935,8 +906,8 @@

      5 - @@ -951,7 +922,7 @@

      5
      - +

      @@ -982,8 +953,8 @@

      发表于 -

      @@ -1067,14 +1038,48 @@

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

      在JS中，我们可以使用 setTimeout 和 setIntarval 实现动画，但是 H5 的出现，让我们又多了两种实现动画的方式，分别是 CSS 动画（transition、animation）和 H5的canvas 实现。除此以外，H5还提供了一个专门用于请求动画的API，让 DOM 动画、canvas动画、svg动画、webGL动画等有一个专门的刷新机制。

      +
      +

      传统的javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题

      +
        +
      • 动画的循时间环间隔不好确定(推荐的最佳循环间隔是17ms（大多数电脑的显示器刷新频率是60Hz，1000ms/60）)
        • +
      • 定时器第二个时间参数只是指定了多久后将动画任务添加到浏览器的UI线程队列中，如果UI线程处于忙碌状态，那么动画不会立刻执行
        • +
      +
      +

      1. 定义

      requestAnimationFrame 方法会告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画。

      +
      1
      window.requestAnimationFrame(callback)
      +
        +
      • callback：下一次重绘之前更新动画帧所调用的函数，callback仅有一个参数，为DOMHighResTimeStamp参数，表示requestAnimationFrame()开始执行回调函数的时刻。
        • +
      • 返回值：一个 long 类型整数，唯一标志元组在列表中的位置，你可以传这个值给cancelAnimationFrame() 以取消动画。
        • +
      +

      在使用和实现上， requestAnimationFrame 与 setTimeout 类似。举个例子：

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      let count = 0;
      let rafId = null;
      /**
       * 回调函数
       * @param time requestAnimationFrame 调用该函数时，自动传入的一个时间
       */
      function requestAnimation(time) {
        console.log(time); // 打印执行requestAnimation函数的时刻
        // 动画没有执行完，则递归渲染
        if (count < 5) {
          count++;
          // 渲染下一帧
          rafId = window.requestAnimationFrame(requestAnimation);
        }
      }
      // 渲染第一帧
      window.requestAnimationFrame(requestAnimation);
      +

      2.怎样执行

        +
      • 首先判断 document.hidden 属性是否可见（true），可见状态下才能继续执行以下步骤
        • +
      • 浏览器清空上一轮的动画函数
        • +
      • requestAnimationFrame 将回调函数追加到动画帧请求回调函数列表的末尾 +注意：当执行 requestAnimationFrame(callback)的时候，不会立即调用 callback 回调函数，只是将其放入回调函数队列而已，同时注意，每个 callback回调函数都有一个 cancelled 标志符，初始值为 false，并对外不可见。
        • +
      • 当页面可见并且动画帧请求callback回调函数列表不为空时，浏览器会定期将这些回调函数加入到浏览器 UI 线程的队列中（由系统来决定回调函数的执行时机）。当浏览器执行这些 callback 回调函数的时候，会判断每个元组的 callback 的cancelled标志符，只有 cancelled 为 false 时，才执行callback回调函数。
        • +
      +

      3. 优点

        +
      1. requestAnimationFrame 自带函数节流功能，采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间的过短，造成过度绘制，增加页面开销，也不会因为间隔时间过长，造成动画卡顿，不流程，影响页面美观。 +浏览器的重绘频率一般会和显示器的刷新率保持同步。大多数采用 W3C规范，浏览器的渲染页面的标准频率也为 60 FPS（frames/per second）即每秒重绘60次，requestAnimationFrame的基本思想是 让页面重绘的频率和刷新频率保持同步，即每 1000ms / 60 = 16.7ms执行一次。 +通过 requestAnimationFrame 调用回调函数引起的页面重绘或回流的时间间隔和显示器的刷新时间间隔相同。所以 requestAnimationFrame 不需要像 setTimeout 那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷新频率。例如在某些高频事件（resize，scroll 等）中，使用 requestAnimationFrame 可以防止在一个刷新间隔内发生多次函数执行，这样保证了流程度，也节省了开销
        2. +
      2. 另外，该函数的延时效果是精确的，没有setTimeout或setInterval不准的情况（JS是单线程的，setTimeout 任务被放进异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列的任务是否需要开始执行，造成时间延时）。 +setTimeout的执行只是在内存中对图像属性进行改变，这个改变必须要等到下次浏览器重绘时才会被更新到屏幕上。如果和屏幕刷新步调不一致，就可能导致中间某些帧的操作被跨越过去，直接更新下下一帧的图像。即 掉帧 +使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿
        3. +
      3. 节省资源，节省开销 +在之前介绍requestAnimationFrame执行过程，我们知道只有当页面激活的状态下，页面刷新任务才会开始，才执行 requestAnimationFrame，当页面隐藏或最小化时，会被暂停，页面显示，会继续执行。节省了 CPU 开销。 +注意：当页面被隐藏或最小化时，定时器setTimeout仍在后台执行动画任务，此时刷新动画是完全没有意义的（实际上 FireFox/Chrome 浏览器对定时器做了优化：页面闲置时，如果时间间隔小于 1000ms，则停止定时器，与requestAnimationFrame行为类似。如果时间间隔>=1000ms，定时器依然在后台执行）
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        // 在浏览器开发者工具的Console页执行下面代码。
        // 当开始输出count后，切换浏览器tab页，再切换回来，可以发现打印的值从离开前的值继续输出
        let count = 0;
            function requestAnimation() {
                if (count < 100) {
                    count++;
                    console.log(count);
                    requestAnimationFrame(requestAnimation);
                }
            }
        requestAnimationFrame(requestAnimation);
        4. +
      4. 能够在动画流刷新之后执行，即上一个动画流会完整执行
        5. +
      +

      4. 实现

      我们可以使用 requestAnimationFrame 实现setInterval及 setTimeout

      +
      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
      // setInterval实现
      function setInterval(callback, interval) {
          let timer
          const now = Date.now
          let startTime = now()
          let endTime = startTime
          const loop = () ={
              timer = window.requestAnimationFrame(loop)
              endTime = now()
              if (endTime - startTime >= interval) {
                  startTime = endTime = now()
                  callback(timer)
              }
          }
          timer = window.requestAnimationFrame(loop)
          return timer
      }

      let a = 0
      setInterval(timer ={
          console.log(a)
          a++
          if (a === 3) window.cancelAnimationFrame(timer)
      }, 1000)
      // 0
      // 1
      // 2
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      // setTimeout 实现
      function setTimeout(callback, interval) {
          let timer
          const now = Date.now
          let startTime = now()
          let endTime = startTime
          const loop = () ={
              timer = window.requestAnimationFrame(loop)
              endTime = now()
              if (endTime - startTime >= interval) {
                  callback(timer)
                  window.cancelAnimationFrame(timer)
              }
          }
          timer = window.requestAnimationFrame(loop)
          return timer
      }

      let a = 0
      setTimeout(timer ={
          console.log(a)
          a++
      }, 1000)
      // 0
      +

      5. 参考

      MDN

      + +

      @@ -2832,7 +2837,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字
      diff --git a/page/9/index.html b/page/9/index.html index c9c99fae1..e31410989 100644 --- a/page/9/index.html +++ b/page/9/index.html @@ -2877,7 +2877,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

      diff --git a/prototype.html b/prototype.html index 42236bceb..97dbbd2c5 100644 --- a/prototype.html +++ b/prototype.html @@ -1064,7 +1064,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

      diff --git a/react16.html b/react16.html index d2bae0ff1..dcbbc780f 100644 --- a/react16.html +++ b/react16.html @@ -958,7 +958,7 @@

      - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

      diff --git a/reactInterview.html b/reactInterview.html index facc9270c..f66891313 100644 --- a/reactInterview.html +++ b/reactInterview.html @@ -140,7 +140,7 @@ - + @@ -416,12 +416,12 @@

      Blog

      -
      -
      8月
      -
      30
      +
      +
      9月
      +
      08
      更新于
      -
      8月30
      +
      9月08
      2020
      @@ -526,7 +526,7 @@

      react面试题记录

      字数统计： - 9,322 (字) + 9,496 (字) @@ -542,7 +542,7 @@

      react面试题记录

      阅读时长： - 35 (分钟) + 36 (分钟)
      @@ -626,14 +626,26 @@

      何为高阶组件(higher order component)

      高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。 装饰器@decoration -练习

      -

      高阶函数就是接受函数作为参数并且/或者返回函数作为输出的函数

      - +优点:

      +
        +
      • 逻辑复用
        • +
      • 不影响被包裹组件的逻辑
        • +
      +

      缺点:

      +
        +
      • 传递的props和包裹组件的props发生重名会覆盖
        • +
      • 组件嵌套导致层级过深
        • +
      +

      渲染属性(render props)

      Render prop 是一个告知组件需要渲染什么内容的函数 prop +优点:

        -
      • 写一个反转其输入的 HOC
        • -
      • 写一个从 API 提供数据给传入的组件的 HOC
        • -
      • 写一个实现 shouldComponentUpdate 来避免 reconciliation 的 HOC
        • -
      • 写一个通过 React.Children.toArray 对传入组件的子组件进行排序的 HOC
        • +
      • 逻辑复用
        • +
      • 数据共享
        • +
      +

      缺点:

      +
        +
      • 嵌套
        • +
      • 无法在return语句外访问数据

      使用箭头函数(arrow functions)的优点是什么

      • 作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this 是未定义的；如果函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。
        • @@ -646,7 +658,7 @@

        react 与 vue 数组中 key 的作用是什么

        diff算法需要比对虚拟dom的修改，然后异步的渲染到页面中，当出现大量相同的标签时，vnode会首先判断key和标签名是否一致，如果一致再去判断子节点一致，使用key可以帮助diff算法提升判断的速度，在页面 重新渲染时更快消耗更少。

        (在构造函数中)调用 super(props) 的目的是什么

        在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

        -

        何为 JSX

        JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React “元素”，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就编程了常规的 JavaScript 对象，这意味着你可以在 if 语句和 for 循环内部使用 JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。

        +

        何为 JSX

        JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React “元素”，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你可以在 if 语句和 for 循环内部使用 JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。

        缺点：b&& 强转成boolean类型 否则如果b=0渲染出0

        怎么用 React.createElement 重写下面的代码

        Question：

        1
        2
        3
        4
        5
        const element = (
          <h1 className="greeting">
            Hello, world!
          </h1>
        );
        @@ -693,7 +705,7 @@

        虚拟dom的作用

        兼容性好。因为Vnode本质是JS对象，所以不管Node还是浏览器环境，都可以操作； 减少了对Dom的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能。

        -

        事件委托

        每个setState重新渲染整个子树标记为dirty。 如果要压缩性能，请尽可能调用 setState，并使用shouldComponentUpdate 来防止重新渲染大型子树。把树形结构按照层级分解，只比较同级元素。给列表结构的每个单元添加唯一的key属性，方便比较。pureComponent(浅比较)+immutable 替换成preact

        +

        每个setState重新渲染整个子树标记为dirty。 如果要压缩性能，请尽可能调用 setState，并使用shouldComponentUpdate 来防止重新渲染大型子树。把树形结构按照层级分解，只比较同级元素。给列表结构的每个单元添加唯一的key属性，方便比较。pureComponent(浅比较)+immutable 替换成preact

        diff算法

        一开始会根据真实DOM生成虚拟DOM，当虚拟DOM某个节点的数据改变后会生成一个新的Vnode，然后VNode和oldVnode对比，把不同的地方修改在真实DOM上，最后再使得oldVnode的值为Vnode。

        @@ -803,7 +815,7 @@

        getInitialState

        -
      1. 挂载阶段
        2. +
      2. 挂载阶段
        1
        2
        3
        4
        组件实例化。
        组件的props发生变化。
        父组件重新渲染。
        this.setState()不会触发getDerivedStateFromProps()，但是this.forceUpdate()会。
       @@ -966,9 +978,9 @@

      单向数据流

      单向数据流是指数据的流向只能由父组件通过props将数据传递给子组件，不能由子组件向父组件传递数据，要想实现数据的双向绑定，只能由子组件接收父组件props传过来的方法去改变父组件的数据，而不是直接将 子组件的数据传递给父组件。

      -

      react和vue的对比

      react 函数式思想 纯组件传入状态和逻辑，所以单项数据流结合immutable setState 触发重新render 单项数据流设计成不可变数据 purecomponent对shouldconponentupdate是否触发重新渲染

      -

      vue 响应式的思想 监听数据的变化 初始化时对数据的每一个属性添加watcher基于数据可变 数据变化时触发watcher回调 更新虚拟dom

      -

      react的性能优化需要手动去判断 vue是自动的应为要给每个属性添加 watcher所以大型项目state不比较多的时候watcher也会比较多容易造成卡顿的情况

      +

      react和vue的对比

      react 函数式思想 纯组件传入状态和逻辑，所以单项数据流结合immutable setState 触发重新render 单项数据流设计成不可变数据 purecomponent对shouldconponentupdate是否触发重新渲染。不可变数据返回新的state，计算虚拟dom的差异。数据流props/callback，context

      +

      vue 响应式的思想 监听数据的变化 初始化时对数据的每一个属性添加watcher基于数据可变 数据变化时触发watcher回调 更新虚拟dom。可变数据直接修改，setter能精确监听数据变化。数据流props/event，inject/provide

      +

      react的性能优化需要手动去判断 vue是自动的应为要给每个属性添加 watcher所以大型项目state不比较多的时候watcher也会比较多容易造成卡顿的情况。redux不能直接调用reducer进行修改。而vuex有dispatch和commit

      React 中，cloneElement 与 createElement 各是什么，有什么区别

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      React.cloneElement(
        element,
        [props],
        [...children]
      )

      React.createElement(
        type,
        [props],
        [...children]
      )

      React Portal 有哪些使用场景

      在以前， react 中所有的组件都会位于 #app 下，而使用 Portals 提供了一种脱离 #app 的组件。 因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed 的组件。比如模态框，通知，警告，goTop 等。

      @@ -980,7 +992,7 @@ 

      1
      2
      3
      4
      5
      路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
      路由跳转并传递参数：
          链接方式：<Link to={{pathname:'/demo',query:{id:22,name:'dahuang'}}}>XX</Link>
          js方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})
      获取参数： this.props.location.query.name
      -

    • state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

      +

    • state传参(刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

      1
      2
      3
      4
      5
      路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
      路由跳转并传递参数：
          链接方式： <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link> 
          js方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})
      获取参数： this.props.location.state.name
      • @@ -1017,6 +1029,12 @@ 

      1
      2
      3
      4
      // 阻止事件冒泡，（阻止这个合成事件，往document上冒泡，因此不会触发click方法）
      e.stopPropagation();
      // 阻止合成事件间的冒泡，不会往最外层冒了
      e.nativeEvent.stopImmediatePropagation();

    +

    redux存在的问题 => 重

      +
    • 一份store树，离开页面再次进入，数据不会初始化
      • +
    • reducer拆分造成汇总困难
      • +
    • action的type管理混乱，重复问题
      • +
    • 繁杂的使用规则，index页面action和store引入，纯函数reducer大量case仅仅为了改变一个值
      • +

    常用UI库

    +
    1. 1. React面试问题
      1. 1.1. React 的响应式原理
      2. 1.2. 使用 React 有何优点
      3. 1.3. 展示组件(Presentational component)和容器组件(Container component)之间有何不同
      4. 1.4. 类组件(Class component)和函数式组件(Functional component)之间有何不同
      5. 1.5. (组件的)状态(state)和属性(props)之间有何不同
      6. 1.6. 指出(组件)生命周期方法的不同
      7. 1.7. 应该在 React 组件的何处发起 Ajax 请求
      8. 1.8. 何为受控组件(controlled component)
      9. 1.9. 在 React 中，refs 的作用是什么
      10. 1.10. 三种ref方式
      11. 1.11. 何为高阶组件(higher order component)
      12. 1.12. 渲染属性(render props)
      13. 1.13. 使用箭头函数(arrow functions)的优点是什么
      14. 1.14. 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
      15. 1.15. 除了在构造函数中绑定 this，还有其它方式吗
      16. 1.16. 怎么阻止组件的渲染
      17. 1.17. react 与 vue 数组中 key 的作用是什么
      18. 1.18. (在构造函数中)调用 super(props) 的目的是什么
      19. 1.19. 何为 JSX
      20. 1.20. 怎么用 React.createElement 重写下面的代码
      21. 1.21. 何为 Children
      22. 1.22. 在 React 中，何为 state
      23. 1.23. 你为何排斥 create-react-app
      24. 1.24. 何为 redux
      25. 1.25. 在 Redux 中，何为 store
      26. 1.26. 何为 action
      27. 1.27. 何为 reducer
      28. 1.28. Redux Thunk 的作用是什么
      29. 1.29. 何为纯函数(pure function)
      30. 1.30. redux有哪些中间件，作用？
      31. 1.31. 示例项目
      32. 1.32. 虚拟dom(虚拟节点)是用JS对象来模拟真实DOM中的节点
      33. 1.33. 为什么使用虚拟dom
      34. 1.34. 虚拟dom的作用
      35. 1.35. diff算法
      36. 1.36. setState的理解
      37. 1.37. 替换的属性
      38. 1.38. 插入html文本
      39. 1.39. 15版本的生命周期如下：
      40. 1.40. 16版本生命周期如下：
      41. 1.41. 事件机制
      42. 1.42. 为什么react事件要自己绑定this
      43. 1.43. react和原生事件的执行顺序是什么，可以混用吗
      44. 1.44. 虚拟dom比普通dom更快吗
      45. 1.45. 虚拟dom中的$$typeof属性的作用是什么
      46. 1.46. HOC在业务场景中有哪些实际的应用
      47. 1.47. HOC和mixin的异同点是什么
        1. 1.47.1. hooks有哪些优势
      48. 1.48. Fiber
      49. 1.49. 为什么生命周期有了变动
      50. 1.50. SSR
        1. 1.50.1. 原理
      51. 1.51. 为什么react没有双向绑定
      52. 1.52. 单向数据流
      53. 1.53. react和vue的对比
      54. 1.54. React 中，cloneElement 与 createElement 各是什么，有什么区别
      55. 1.55. React Portal 有哪些使用场景
      56. 1.56. 路由传参
      57. 1.57. create-react-app配置文件修改
      58. 1.58. react diff和vue diff的区别
      59. 1.59. react StrictMode严格模式
      60. 1.60. react事件的合成机制
      61. 1.61. redux存在的问题 => 重
      62. 1.62. 常用UI库
    @@ -1412,7 +1430,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/react\347\273\204\344\273\266\345\256\236\347\216\260\346\214\211\351\234\200\345\212\240\350\275\275.html" "b/react\347\273\204\344\273\266\345\256\236\347\216\260\346\214\211\351\234\200\345\212\240\350\275\275.html" index 88d6f7dda..b4cf34bd7 100644 --- "a/react\347\273\204\344\273\266\345\256\236\347\216\260\346\214\211\351\234\200\345\212\240\350\275\275.html" +++ "b/react\347\273\204\344\273\266\345\256\236\347\216\260\346\214\211\351\234\200\345\212\240\350\275\275.html" @@ -973,7 +973,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/reduxstate.html b/reduxstate.html index 576ae4f16..81fa98c4b 100644 --- a/reduxstate.html +++ b/reduxstate.html @@ -1045,7 +1045,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/responsive.html b/responsive.html index 708a8056b..ce855a444 100644 --- a/responsive.html +++ b/responsive.html @@ -995,7 +995,7 @@

    实战
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/rss2.xml b/rss2.xml index 20a1fa2bc..1e5c38c13 100644 --- a/rss2.xml +++ b/rss2.xml @@ -8,7 +8,7 @@ 陈宇的博客 - Sat, 05 Sep 2020 12:48:22 GMT + Tue, 08 Sep 2020 11:14:21 GMT http://hexo.io/ @@ -27,7 +27,7 @@ - 面试遇到了问题:<p>中能不能插入<div>? 插入<div>会如何?

    先直接实践下：

    div1

    我们可以看到,

    把

    分成了两段, 并且div外字段并不在

    内。把div变成行内块级元素也不行。

    div2

    解答:可以在HTML标准(https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)中看到,

    虽然是块级元素, 但是只能包含行内元素, 不能包含块级元素(包括

    自己)

    div3

    over!

    ]]>     + 面试遇到了问题:<p>中能不能插入<div>? 插入<div>会如何?

    先直接实践下：

    div1

    我们可以看到,

    把

    分成了两段, 并且div外字段并不在

    内。把div变成行内块级元素也不行。

    div2

    解答:可以在HTML标准(https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)中看到,

    虽然是块级元素, 但是只能包含行内元素, 不能包含块级元素(包括

    自己)

    div3

    over!

    ]]>     http://mydearest.cn/2020/HTML%E4%B8%ADp%E6%A0%87%E7%AD%BE%E4%B8%AD%E6%8F%92%E5%85%A5div%E6%A0%87%E7%AD%BE%E4%BC%9A%E5%8F%91%E7%94%9F%E4%BB%80%E4%B9%88.html#disqus_thread     @@ -130,7 +130,7 @@ user/tree’),能同时覆盖：get(‘/user/tree’) 、 post(‘/user/tree’) - 👨提问：注册路由时 app.get、app.use、app.all 的区别是什么？

    app.use(path,callback)

    app.use是express用来调用中间件的方法。中间件通常不处理请求和响应，一般只处理输入数据，并将其交给队列中的下一个处理程序，比如下面这个例子app.use(‘/user’)，那么只要路径以 /user 开始即可匹配，如 /user/tree 就可以匹配。

    app.all()

    app.all 是路由中指代所有的请求方式，用作路由处理，匹配完整路径，在app.use之后可以理解为包含了app.get、app.post等的定义，比如app.all(‘/user/tree’),能同时覆盖：get(‘/user/tree’) 、 post(‘/user/tree’)、 put(‘/user/tree’) ,不过相对于app.use()的前缀匹配，它则是匹配具体的路由。

    all完整匹配，use只匹配前缀

    express response有哪些常用方法?

    express response对象是对Node.js原生对象ServerResponse的扩展，express response常见的有：res.end()、res.send()、res.render()、res.redirect()，而这几个有什么不同呢？更多请看文档express Response

    res.end()

    结束response - 如果服务端没有数据回传给客户端则可以直接用res.end返回，以此来结束响应过程。

    res.send(body)

    如果服务端有数据可以使用res.send,可以忽略res.end，body参数可以是一个Buffer对象，一个String对象或一个Array。

    res.render

    res.render用来渲染模板文件，也可以结合模版引擎来使用，下面看个简单的demo (express+ejs模版引擎)

    node-ejs

    • 配置
      1
      2
      app.set('views', path.join(__dirname, 'views')); // views：模版文件存放的位置，默认是在项目根目录下
      app.set('view engine', 'ejs'); // view engine：使用什么模版引擎

    其次是根据使用的模版引擎语法编写模版，最后通过res.render(view,locals, callback)导出，具体使用参数

    1
    2
    3
    view：模板的路径
    locals：渲染模板时传进去的本地变量
    callback：如果定义了回调函数，则当渲染工作完成时才被调用，返回渲染好的字符串（正确）或者错误信息 ❌

    res.redirect

    重定义到path所指定的URL，同时也可以重定向时定义好HTTP状态码（默认为302）

    1
    2
    res.redirect('http://baidu.com');
    res.redirect(301, 'http://baidu.com');

    node如何利用多核CPU以及创建集群?

    众所周知，nodejs是基于chrome浏览器的V8引擎构建的，一个nodejs进程只能使用一个CPU(一个CPU运行一个node实例)，举个例子：我们现在有一台8核的服务器，那么如果不利用多核CPU，是很一种浪费资源的行为，这个时候可以通过启动多个进程来利用多核CPU。

    Node.js给我们提供了cluster模块，用于nodejs多核处理，同时可以通过它来搭建一个用于负载均衡的node服务集群。创建多进程。

    本质还是通过 child_process.fork() 专门用于衍生新的 Node.js 进程,衍生的 Node.js 子进程独立于父进程，但两者之间建立的 IPC 通信通道除外， 每个进程都有自己的内存，带有自己的 V8 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const cluster = require('cluster')
    const os = require('os')
    const express = require('express')
    const path = require('path')
    const ejs = require('ejs')
    const app = express()

    const numCPUs = os.cpus().length

    if (cluster.isMaster) {
        for (let i =0 ;i<numCPUs.length;++i) {
            cluster.fork()
        }
        cluster.on('exit', (worker, code, signal) => {
            console.log(`worker ${worker.process.pid} died`)
        })
    } else {
        app.listen(3000, function(){
            console.log(`worker ${worker.process.pid} started`)
        })
    }
    // 一个端口被多个进程监听
    1
    2
    lsof -i -P -n | grep 3000
    ps -ef | grep pid

    开启多个子线程

    1
    2
    3
    4
    5
    6
    const {
        Worker, isMainThread, parentPort, workerData
    } = require('worker_threads');
    const worker = new Worker(__filename, {
        workerData: script
    });
    • 线程间如何传输数据: parentPort postMessage on 发送监听消息

    • 共享内存： SharedArrayBuffer 通过这个共享内存

    • 在服务中若需要执行 shell 命令，那么就需要开启一个进程

      1
      2
      3
      4
      5
      6
      7
      8
      var exec = require('child_process').exec;
      exec('ls', function(error, stdout, stderr){
          if(error) {
              console.error('error: ' + error);
              return;
          }
          console.log('stdout: ' + stdout);
      });

    node是怎样支持https?

    https实现，离不开证书，通过openssl生成公钥私钥（不做详细介绍），然后基于 express的 https模块 实现，设置options配置, options有两个选项，一个是证书本体，一个是密码。

    node和客户端怎么解决跨域的问题？

    app.all(‘*’,(req,res,next)=>{}) 效果相当于app.use((req,res,next)=>{}), 这也是app.all的一个比较常见的应用，就是用来处理跨域请求。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    app.all('*', function (req, res, next) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'X-Requested-With');
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
        res.header('Content-Type', 'application/json;charset=utf-8');
        if (req.method == 'OPTIONS') {
            res.send(200);
        } else {
            next();
        }
    });

    • cors模块

    两个node程序之间怎样交互?

    通过fork，原理是子程序用process.on来监听父程序的消息，用 process.send给子程序发消息，父程序里用child.on,child.send进行交互，来实现父进程和子进程互相发送消息。

    执行中间件（洋葱模型）

    我们通过 use 注册中间件，中间件函数有两个参数第一个是上下文，第二个是 next，在中间件函数执行过程中，若遇到 next() ，那么就会进入到下一个中间件中执行，下一个中间执行完成后，在返回上一个中间件执行 next() 后面的方法，这便是中间件的执行逻辑。

    介绍下 stream

    流在 nodejs 用的很广泛，但对于大部分开发者来说，更多的是使用流，比如说 HTTP 中的 request respond ，标准输入输出，文件读取（createReadStream）， gulp 构建工具等等。流，可以理解成是一个管道，比如读取一个文件，常用的方法是从硬盘读取到内存中，在从内存中读取，这种方式对于小文件没问题，但若是大文件，效率就非常低，还有可能内存不足，采用流的方式，就好像给大文件插上一根吸管，持续的一点点读取文件的内容，管道的另一端收到数据，就可以进行处理，了解 Linux 的朋友应该非常熟悉这个概念。

    • Node.js 中有四种基本的流类型：
    1. Writable - 可写入数据的流（例如 fs.createWriteStream()）。
    2. Readable - 可读取数据的流（例如 fs.createReadStream()）。
    3. Duplex - 可读又可写的流（例如 net.Socket）。
    4. Transform - 在读写过程中可以修改或转换数据的 Duplex 流（例如 zlib.createDeflate()）。接触比较多的还是第一二种pipe 来消费可读流
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const fs = require('fs');
    // 直接读取文件
    fs.open('./xxx.js', 'r', (err, data) => {
        if (err) {
            console.log(err)
        }
        console.log(data)
    })
    // 流的方式读取、写入
    let readStream = fs.createReadStream('./a.js');
    let writeStream = fs.createWriteStream('./b.js')
    readStream.pipe(writeStream).on('data', (chunk) => { // 可读流被可写流消费
        console.log(chunk)
        writeStream.write(chunk);
    }).on('finish', () => console.log('finish'))
    ]]> + 👨提问：注册路由时 app.get、app.use、app.all 的区别是什么？

    app.use(path,callback)

    app.use是express用来调用中间件的方法。中间件通常不处理请求和响应，一般只处理输入数据，并将其交给队列中的下一个处理程序，比如下面这个例子app.use(‘/user’)，那么只要路径以 /user 开始即可匹配，如 /user/tree 就可以匹配。

    app.all()

    app.all 是路由中指代所有的请求方式，用作路由处理，匹配完整路径，在app.use之后可以理解为包含了app.get、app.post等的定义，比如app.all(‘/user/tree’),能同时覆盖：get(‘/user/tree’) 、 post(‘/user/tree’)、 put(‘/user/tree’) ,不过相对于app.use()的前缀匹配，它则是匹配具体的路由。

    all完整匹配，use只匹配前缀

    express response有哪些常用方法?

    express response对象是对Node.js原生对象ServerResponse的扩展，express response常见的有：res.end()、res.send()、res.render()、res.redirect()，而这几个有什么不同呢？更多请看文档express Response

    res.end()

    结束response - 如果服务端没有数据回传给客户端则可以直接用res.end返回，以此来结束响应过程。

    res.send(body)

    如果服务端有数据可以使用res.send,可以忽略res.end，body参数可以是一个Buffer对象，一个String对象或一个Array。

    res.render

    res.render用来渲染模板文件，也可以结合模版引擎来使用，下面看个简单的demo (express+ejs模版引擎)

    node-ejs

    • 配置
      1
      2
      app.set('views', path.join(__dirname, 'views')); // views：模版文件存放的位置，默认是在项目根目录下
      app.set('view engine', 'ejs'); // view engine：使用什么模版引擎

    其次是根据使用的模版引擎语法编写模版，最后通过res.render(view,locals, callback)导出，具体使用参数

    1
    2
    3
    view：模板的路径
    locals：渲染模板时传进去的本地变量
    callback：如果定义了回调函数，则当渲染工作完成时才被调用，返回渲染好的字符串（正确）或者错误信息 ❌

    res.redirect

    重定义到path所指定的URL，同时也可以重定向时定义好HTTP状态码（默认为302）

    1
    2
    res.redirect('http://baidu.com');
    res.redirect(301, 'http://baidu.com');

    node如何利用多核CPU以及创建集群?

    众所周知，nodejs是基于chrome浏览器的V8引擎构建的，一个nodejs进程只能使用一个CPU(一个CPU运行一个node实例)，举个例子：我们现在有一台8核的服务器，那么如果不利用多核CPU，是很一种浪费资源的行为，这个时候可以通过启动多个进程来利用多核CPU。

    Node.js给我们提供了cluster模块，用于nodejs多核处理，同时可以通过它来搭建一个用于负载均衡的node服务集群。创建多进程。

    本质还是通过 child_process.fork() 专门用于衍生新的 Node.js 进程,衍生的 Node.js 子进程独立于父进程，但两者之间建立的 IPC 通信通道除外， 每个进程都有自己的内存，带有自己的 V8 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const cluster = require('cluster')
    const os = require('os')
    const express = require('express')
    const path = require('path')
    const ejs = require('ejs')
    const app = express()

    const numCPUs = os.cpus().length

    if (cluster.isMaster) {
        for (let i =0 ;i<numCPUs.length;++i) {
            cluster.fork()
        }
        cluster.on('exit', (worker, code, signal) => {
            console.log(`worker ${worker.process.pid} died`)
        })
    } else {
        app.listen(3000, function(){
            console.log(`worker ${worker.process.pid} started`)
        })
    }
    // 一个端口被多个进程监听
    1
    2
    lsof -i -P -n | grep 3000
    ps -ef | grep pid

    开启多个子线程

    1
    2
    3
    4
    5
    6
    const {
        Worker, isMainThread, parentPort, workerData
    } = require('worker_threads');
    const worker = new Worker(__filename, {
        workerData: script
    });
    • 线程间如何传输数据: parentPort postMessage on 发送监听消息

    • 共享内存： SharedArrayBuffer 通过这个共享内存

    • 在服务中若需要执行 shell 命令，那么就需要开启一个进程

      1
      2
      3
      4
      5
      6
      7
      8
      var exec = require('child_process').exec;
      exec('ls', function(error, stdout, stderr){
          if(error) {
              console.error('error: ' + error);
              return;
          }
          console.log('stdout: ' + stdout);
      });

    node是怎样支持https?

    https实现，离不开证书，通过openssl生成公钥私钥（不做详细介绍），然后基于 express的 https模块 实现，设置options配置, options有两个选项，一个是证书本体，一个是密码。

    node和客户端怎么解决跨域的问题？

    app.all(‘*’,(req,res,next)=>{}) 效果相当于app.use((req,res,next)=>{}), 这也是app.all的一个比较常见的应用，就是用来处理跨域请求。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    app.all('*', function (req, res, next) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'X-Requested-With');
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
        res.header('Content-Type', 'application/json;charset=utf-8');
        if (req.method == 'OPTIONS') {
            res.send(200);
        } else {
            next();
        }
    });

    • cors模块

    两个node程序之间怎样交互?

    通过fork，原理是子程序用process.on来监听父程序的消息，用 process.send给父程序发消息，父程序里用child.on,child.send进行交互，来实现父进程和子进程互相发送消息。

    child-process和process的stdin,stdout,stderror是一样的吗?概念都是一样的，输入，输出，错误，都是流．区别是在父程序眼里，子程序的stdout是输入流，stdin是输出流

    执行中间件（洋葱模型）

    我们通过 use 注册中间件，中间件函数有两个参数第一个是上下文，第二个是 next，在中间件函数执行过程中，若遇到 next() ，那么就会进入到下一个中间件中执行，下一个中间执行完成后，在返回上一个中间件执行 next() 后面的方法，这便是中间件的执行逻辑。

    介绍下 stream

    流在 nodejs 用的很广泛，但对于大部分开发者来说，更多的是使用流，比如说 HTTP 中的 request respond ，标准输入输出，文件读取（createReadStream）， gulp 构建工具等等。流，可以理解成是一个管道，比如读取一个文件，常用的方法是从硬盘读取到内存中，在从内存中读取，这种方式对于小文件没问题，但若是大文件，效率就非常低，还有可能内存不足，采用流的方式，就好像给大文件插上一根吸管，持续的一点点读取文件的内容，管道的另一端收到数据，就可以进行处理，了解 Linux 的朋友应该非常熟悉这个概念。

    • Node.js 中有四种基本的流类型：
    1. Writable - 可写入数据的流（例如 fs.createWriteStream()）。
    2. Readable - 可读取数据的流（例如 fs.createReadStream()）。
    3. Duplex - 可读又可写的流（例如 net.Socket）。
    4. Transform - 在读写过程中可以修改或转换数据的 Duplex 流（例如 zlib.createDeflate()）。接触比较多的还是第一二种pipe 来消费可读流
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const fs = require('fs');
    // 直接读取文件
    fs.open('./xxx.js', 'r', (err, data) => {
        if (err) {
            console.log(err)
        }
        console.log(data)
    })
    // 流的方式读取、写入
    let readStream = fs.createReadStream('./a.js');
    let writeStream = fs.createWriteStream('./b.js')
    readStream.pipe(writeStream).on('data', (chunk) => { // 可读流被可写流消费
        console.log(chunk)
        writeStream.write(chunk);
    }).on('finish', () => console.log('finish'))
    ]]> http://mydearest.cn/2020/%E5%85%B3%E4%BA%8Enode%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B(%E8%BF%9B%E9%98%B6%E7%AF%87).html#disqus_thread @@ -312,7 +312,7 @@ Module浏览器模块、等特征。万变不离其宗，虽然有了Deno，将 - 👨提问：最近Deno很火，会不会替代node的替代品，学node是不是没有前途？

    莫慌，Node依旧是社区热捧的服务器端 JavaScript 运行环境，Deno的出现其实本质上是完善现阶段的Node（新轮子），包括原生支持TS、安全性、支持ES Module浏览器模块、等特征。万变不离其宗，虽然有了Deno，将来可能就不需要 Node.js，但是新事物总是需要不断推演和考验后，所以这一点而言，Node短时间内很难被替换，毕竟背后依附着强大社区的支撑。

    node 如何获取命令行传来的参数？

    process.argv。process是一个全局变量，它提供当前 Node.js 进程的有关信息，而process.argv 属性则返回一个数组，数组中的信息包括启动Node.js进程时的命令行参数。

    • process.argv[0] : 返回启动Node.js进程的可执行文件所在的绝对路径
    • process.argv[1] : 为当前执行的JavaScript文件路径
    • process.argv.splice(2) : 移除前两者后，剩余的元素为其他命令行参数(也就是我们自定义部分)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    "script": {
        "serve": "node test.js arg1 arg2 arg3"
    }

    // test.js
    const arguments = process.argv.splice(2) // [arg1, arg2, arg3]

    // 结合commander
    commander.parse(process.argv)

    怎么看 nodejs 可支持高并发

    nodejs 其实并不是真正的单线程架构，因为 nodejs 还有I/O线程存在（网络I/O、磁盘I/O），这些I/O线程是由更底层的 libuv 处理，这部分线程对于开发者来说是透明的。 JavaScript 代码永远运行在V8上，是单线程的。

    • 单线程架构的优势和劣势：
      • 优势：
    1. 单线程就一个线程在玩，省去了线程间切换的开销

    2. 还有线程同步的问题，线程冲突的问题的也不需要担心

      • 劣势：

    3. 劣势也很明显，现在起步都是 4 核，单线程没法充分利用 cpu 的资源

    4. 单线程，一旦崩溃，应用就挂掉了，大家调试脚本也知道一旦执行过程报错了，本次调试就直接结束了
    5. 因为只能利用一个 cpu ，一旦 cpu 被某个计算一直占用， cpu 得不到释放，后续的请求就会一直被挂起，直接无响应了

    node有哪些相关的文件路径？

    Node 中的文件路径有 dirname, filename, process.cwd(), ./ 或者 ../

    • __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
    • __filename: 总是返回被执行的 js 的绝对路径
    • process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

    node相关path API 有哪些？

    path 模块提供了一些实用工具，用于处理文件和目录的路径，常用api有：path.dirname、path.join、path.resolve 其他的看文档 Path API

    • path.dirname()： 返回 path 的目录名
    • path.join()：所有给定的 path 片段连接到一起，然后规范化生成的路径
    • path.resolve()：方法会将路径或路径片段的序列解析为绝对路径，解析为相对于当前目录的绝对路径，相当于cd命令

    path.join(dirname, ‘../lib/common.js’)和 path.resolve(dirname, ‘../lib/common.js’)返回的结果相同，难道可以相互替换？

    1. join是把各个path片段连接在一起， resolve把/当成根目录

      1
      2
      path.join('/a', '/b') // '/a/b'
      path.resolve('/a', '/b') //'/b'

    2. join是直接拼接字段，resolve是解析路径并返回

      1
      2
      path.join("a","b")  // "a/b"
      path.resolve("a", "b") // "/Users/tree/Documents/infrastructure/KSDK/src/a/b"

    node的文件读取怎么做的？

    通过fs文件系统模块提供的API，也是node中重要的模块之一，fs模块主要用于文件的读写、移动、复制、删除、重命名等操作。

    1
    2
    3
    4
    5
    6
    7
    fs.rename('a', 'b', (err)=>{
        if (err) {
            exec('rm -rf a', function(err, out) {

            })
        } else {}
    })

    ⏰需要注意的是，使用require(‘fs’)载入fs模块，fs模块中所有方法都有同步和异步两种形式,刚刚我们展示的rename是异步方法的调用，因为在繁忙的进程中，应使用异步方法， 同步的版本会阻塞整个进程（停止所有的连接），当然fs.rename对应的同步方法就是fs.renameSync

    1
    2
    3
    4
    5
    6
    // 同步的例子
    let isExists = fs.existsSync('dirname')
    if (isExists) {
        process.exit(1);
    }
    // 无论同步异步尽量对抛出的异常做相应的处理

    node的url模块是用来干嘛的？

    用来对url的字符串解析、url组成等功能，主要包括以下几个API。url.parse()、url.format()

    • url.parse：可以将一个url的字符串解析并返回一个url的对象
    • url.format:将传入的url对象解析成一个url字符串并返回
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    url.parse("https://baidu.com:8080/test/h?query=js#node")

    Url {
      protocol: 'http:',
      slashes: true,
      auth: null,
      host: 'baidu.com:8080',
      port: '8080',
      hostname: 'baidu.com',
      hash: '#node',
      search: '?query=js',
      query: 'query=js',
      pathname: '/test/h',
      path: '/test/h?query=js',
      href: 'http://baidu.com:8080/test/h?query=js#node'
    }

    node的http模块创建服务与Express或Koa框架有何不同?

    express是一个服务端框架，框架简单封装了node的http模块，express支持node原生的写法，express不仅封装好服务器，还封装了中间件、路由等特征，方便开发web服务器，换句话说express = http模块 + 中间件 + 路由

    http

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const http = require('http')
    const server = http.createServer(function (req, res) {
        res.writeHead(200, {
           'content-type': 'text/plain'
        })
        res.write('hello world')
        res.end()
    })
    server.listen(3000)

    express

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const express = require('express')
    const app = express()
    app.user(middleware)

    app.get('/', function(req, res){
        res.send('hello world')
    })

    app.listen(3000, function() {

    })

    function middleware(req, res, next) {
        next()
    }

    koa

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const Koa = require('koa')
    const app = new Koa()
    app.user(middleware)

    app.listen(3000)

    async function middleware(ctx, next) {
        await next()
    }

    Express和Koa框架中间件有什么不同？

    中间件： app.use方法就是往中间件队列中塞入新的中间件，express中间件处理方式是线性的，next过后继续寻找下一个中间件，当然如果没有调用next()的话，就不会调用下一个函数了，调用就会被终止。

    • express 中间件：是通过 next 的机制，即上一个中间件会通过 next 触发下一个中间件
    • koa2 中间件：是通过 async await 实现的，中间件执行顺序是“洋葱圈”模型（推荐）
    1. express大而全有路由，而koa2小而精通过中间件
    2. koa2使用async await，express next
    3. koa2有洋葱模型和ctx上下文，express没有

    koa2和egg的区别

    • egg是在koa2上的封装
    • egg有controller、service、router
    • egg约定了文件目录结构

    什么是模版引擎？

    模板引擎是一个通过结合页面模板、要展示的数据生成HTML页面的工具，本质上是后端渲染（SSR）的需求，加上Node渲染页面本身是纯静态的，当我们需要页面多样化、更灵活，我们就需要使用模板引擎来强化页面，更好的凸显服务端渲染的优势。

    常见主流模版引擎有：

    • art-template 官方文档 ：号称效率最高的，模版引擎
    • ejs 官方文档：是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。
    • pug 官方文档：是一款健壮、灵活、功能丰富的模板引擎，专门为 Node.js 平台开发

    Node.js入门教程

    ]]> + 👨提问：最近Deno很火，会不会替代node的替代品，学node是不是没有前途？

    莫慌，Node依旧是社区热捧的服务器端 JavaScript 运行环境，Deno的出现其实本质上是完善现阶段的Node（新轮子），包括原生支持TS、安全性、支持ES Module浏览器模块、等特征。万变不离其宗，虽然有了Deno，将来可能就不需要 Node.js，但是新事物总是需要不断推演和考验后，所以这一点而言，Node短时间内很难被替换，毕竟背后依附着强大社区的支撑。

    node 如何获取命令行传来的参数？

    process.argv。process是一个全局变量，它提供当前 Node.js 进程的有关信息，而process.argv 属性则返回一个数组，数组中的信息包括启动Node.js进程时的命令行参数。

    • process.argv[0] : 返回启动Node.js进程的可执行文件所在的绝对路径
    • process.argv[1] : 为当前执行的JavaScript文件路径
    • process.argv.splice(2) : 移除前两者后，剩余的元素为其他命令行参数(也就是我们自定义部分)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    "script": {
        "serve": "node test.js arg1 arg2 arg3"
    }

    // test.js
    const arguments = process.argv.splice(2) // [arg1, arg2, arg3]

    // 结合commander
    commander.parse(process.argv)

    为什么要用node（基于v8引擎运行在服务端的JS运行环境）

    总结起来node有以下几个特点:简单强大，轻量可扩展．简单体现在node使用的是javascript，json来进行编码，人人都会；强大体现在非阻塞IO,可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问；轻量体现在node本身既是代码，又是服务器，前后端使用统一语言;可扩展体现在可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件。

    • 全局对象process、console、Buffer

    基于事件驱动和无阻塞适合高并发的场景，统一语言

    怎么看 nodejs 可支持高并发

    nodejs 其实并不是真正的单线程架构，因为 nodejs 还有I/O线程存在（网络I/O、磁盘I/O），这些I/O线程是由更底层的 libuv 处理，这部分线程对于开发者来说是透明的。 JavaScript 代码永远运行在V8上，是单线程的。异步通过一次次循环事件队列来实现的。

    • 单线程架构的优势和劣势：
      • 优势：
    1. 单线程就一个线程在玩，省去了线程间切换的开销

    2. 还有线程同步的问题，线程冲突的问题的也不需要担心

      • 劣势：

    3. 劣势也很明显，现在起步都是 4 核，单线程没法充分利用 cpu 的资源

    4. 单线程，一旦崩溃，应用就挂掉了，大家调试脚本也知道一旦执行过程报错了，本次调试就直接结束了
    5. 因为只能利用一个 cpu ，一旦 cpu 被某个计算一直占用， cpu 得不到释放，后续的请求就会一直被挂起，直接无响应了

    node有哪些相关的文件路径？

    Node 中的文件路径有 dirname, filename, process.cwd(), ./ 或者 ../

    • __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
    • __filename: 总是返回被执行的 js 的绝对路径
    • process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

    node相关path API 有哪些？

    path 模块提供了一些实用工具，用于处理文件和目录的路径，常用api有：path.dirname、path.join、path.resolve 其他的看文档 Path API

    • path.dirname()： 返回 path 的目录名
    • path.join()：所有给定的 path 片段连接到一起，然后规范化生成的路径
    • path.resolve()：方法会将路径或路径片段的序列解析为绝对路径，解析为相对于当前目录的绝对路径，相当于cd命令

    path.join(dirname, ‘../lib/common.js’)和 path.resolve(dirname, ‘../lib/common.js’)返回的结果相同，难道可以相互替换？

    1. join是把各个path片段连接在一起， resolve把/当成根目录

      1
      2
      path.join('/a', '/b') // '/a/b'
      path.resolve('/a', '/b') //'/b'

    2. join是直接拼接字段，resolve是解析路径并返回

      1
      2
      path.join("a","b")  // "a/b"
      path.resolve("a", "b") // "/Users/tree/Documents/infrastructure/KSDK/src/a/b"

    node的文件读取怎么做的？

    通过fs文件系统模块提供的API，也是node中重要的模块之一，fs模块主要用于文件的读写、移动、复制、删除、重命名等操作。

    1
    2
    3
    4
    5
    6
    7
    fs.rename('a', 'b', (err)=>{
        if (err) {
            exec('rm -rf a', function(err, out) {

            })
        } else {}
    })

    ⏰需要注意的是，使用require(‘fs’)载入fs模块，fs模块中所有方法都有同步和异步两种形式,刚刚我们展示的rename是异步方法的调用，因为在繁忙的进程中，应使用异步方法， 同步的版本会阻塞整个进程（停止所有的连接），当然fs.rename对应的同步方法就是fs.renameSync

    1
    2
    3
    4
    5
    6
    // 同步的例子
    let isExists = fs.existsSync('dirname')
    if (isExists) {
        process.exit(1);
    }
    // 无论同步异步尽量对抛出的异常做相应的处理

    node的url模块是用来干嘛的？

    用来对url的字符串解析、url组成等功能，主要包括以下几个API。url.parse()、url.format()

    • url.parse：可以将一个url的字符串解析并返回一个url的对象
    • url.format:将传入的url对象解析成一个url字符串并返回
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    url.parse("https://baidu.com:8080/test/h?query=js#node")

    Url {
      protocol: 'http:',
      slashes: true,
      auth: null,
      host: 'baidu.com:8080',
      port: '8080',
      hostname: 'baidu.com',
      hash: '#node',
      search: '?query=js',
      query: 'query=js',
      pathname: '/test/h',
      path: '/test/h?query=js',
      href: 'http://baidu.com:8080/test/h?query=js#node'
    }

    node的http模块创建服务与Express或Koa框架有何不同?

    express是一个服务端框架，框架简单封装了node的http模块，express支持node原生的写法，express不仅封装好服务器，还封装了中间件、路由等特征，方便开发web服务器，换句话说express = http模块 + 中间件 + 路由

    http

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const http = require('http')
    const server = http.createServer(function (req, res) {
        res.writeHead(200, {
           'content-type': 'text/plain'
        })
        res.write('hello world')
        res.end()
    })
    server.listen(3000)

    express

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const express = require('express')
    const app = express()
    app.user(middleware)

    app.get('/', function(req, res){
        res.send('hello world')
    })

    app.listen(3000, function() {

    })

    function middleware(req, res, next) {
        next()
    }

    koa

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const Koa = require('koa')
    const app = new Koa()
    app.user(middleware)

    app.listen(3000)

    async function middleware(ctx, next) {
        await next()
    }

    Express和Koa框架中间件有什么不同？

    中间件： app.use方法就是往中间件队列中塞入新的中间件，express中间件处理方式是线性的，next过后继续寻找下一个中间件，当然如果没有调用next()的话，就不会调用下一个函数了，调用就会被终止。

    • express 中间件：是通过 next 的机制，即上一个中间件会通过 next 触发下一个中间件
    • koa2 中间件：是通过 async await 实现的，中间件执行顺序是“洋葱圈”模型（推荐）

    1. 语法区别experss 异步使用 回调koa1 异步使用 generator + yieldkoa2 异步使用 await/async

    2. 中间件区别koa采用洋葱模型，进行顺序执行，出去反向执行，支持context传递数据express本身无洋葱模型，需要引入插件，不支持contextexpress的中间件中执行异步函数，执行顺序不会按照洋葱模型，异步的执行结果有可能被放到最后，response之前。

    3. 集成度区别express 内置了很多中间件，集成度高，使用省心，koa 轻量简洁，容易定制

    koa2和egg的区别

    • egg是在koa2上的封装
    • egg有controller、service、router
    • egg约定了文件目录结构

    什么是模版引擎？

    模板引擎是一个通过结合页面模板、要展示的数据生成HTML页面的工具，本质上是后端渲染（SSR）的需求，加上Node渲染页面本身是纯静态的，当我们需要页面多样化、更灵活，我们就需要使用模板引擎来强化页面，更好的凸显服务端渲染的优势。

    常见主流模版引擎有：

    • art-template 官方文档 ：号称效率最高的，模版引擎
    • ejs 官方文档：是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。
    • pug 官方文档：是一款健壮、灵活、功能丰富的模板引擎，专门为 Node.js 平台开发

    Node.js入门教程

    ]]> http://mydearest.cn/2020/%E5%85%B3%E4%BA%8Enode%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B(%E5%9F%BA%E7%A1%80%E7%AF%87).html#disqus_thread @@ -512,7 +512,7 @@ Module浏览器模块、等特征。万变不离其宗，虽然有了Deno，将 - 它来了，它来了，16.8版本hooks成功加入(^▽^)

    你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？—— 拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

    你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？—— 拥有了Hooks，生命周期钩子函数可以先丢一边了。

    你在还在为组件中的this指向而晕头转向吗？—— 既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

    React为什么要搞一个Hooks？

    想要复用一个有状态的组件太麻烦了！我们都知道react的核心思想是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。

    那之前，官方推荐怎么解决这个问题呢？答案是：渲染属性（Render Props）和高阶组件（Higher-Order Components）。

    渲染属性

    渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到DataProvider组件包含了所有跟状态相关的代码，而Cat组件则可以是一个单纯的展示型组件，这样一来DataProvider就可以单独复用了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import Cat from 'components/cat'
    class DataProvider extends React.Component {
      constructor(props) {
        super(props);
        this.state = { target: 'Zac' };
      }

      render() {
        return (
          <div>
            {this.props.render(this.state)}
          </div>
        )
      }
    }

    <DataProvider render={data => (
      <Cat target={data.target} />
    )}/>

    虽然这个模式叫Render Props，但不是说非用一个叫render的props不可，习惯上大家更常写成下面这种：

    1
    2
    3
    4
    5
    <DataProvider>
      {data => (
        <Cat target={data.target} />
      )}
    </DataProvider>

    其他🌰

    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
    class GithubProfile extends React.PureComponent<IProps, IStates> {
      state: IStates = {
        profile: {}
      }

      componentDidMount() {
        fetch('https://api.github.com/users/cosyer')
          .then(response => {
            return response.json()
          })
          .then(res => {
            this.setState({
              profile: res
            })
          })
      }
      
      render() {
        const { profile } = this.state
        return (
          <div className="profile">
            <img src={profile.avatar_url} alt="avatar" width="200px" />
            <div>name: {profile.name}</div>
            <div>company: {profile.company}</div>
            <div>bio: {profile.bio}</div>
          </div>
        )
      }
    }

    如果其它页面也有相同的需求，或者数据一样，仅仅 UI 不一样，那么我们该怎么处理？其实这个问题目的很简单，那就是：如何实现代码复用。

    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
    // Render Props
    class Profile extends React.Component<IProps, IStates> {
      constructor(props:IProps) {
        super(props)
        this.state = {
          profile: {}
        }
      }

      componentDidMount() {
        fetch('https://api.github.com/users/cosyer')
          .then(response => {
            return response.json()
          })
          .then(res => {
            this.setState({
              profile: res
            })
          })
      }

      render() {
        const { profile } = this.state
        return <React.Fragment>{this.props.children(profile)}</React.Fragment>
      }
    }
    定义 props 渲染函数：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    class ProfileRenderProps extends React.PureComponent {
      render() {
        return (
          <Profile>
            {(profile:any) => (
              <div className="profile">
                <img src={profile.avatar_url} alt="avatar" width="200px" />
                <div>name: {profile.name}</div>
                <div>company: {profile.company}</div>
                <div>bio: {profile.bio}</div>
              </div>
            )}
          </Profile>
        )
      }
    }

    缺点

    • 回调地狱

    高阶组件

    说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。

    看个栗子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const withUser = WrappedComponent => {
      const user = sessionStorage.getItem("user");
      return props => <WrappedComponent user={user} {...props} />;
    };

    const UserPage = props => (
      <div class="user-container">
        <p>My name is {props.user}!</p>
      </div>
    );

    export default withUser(UserPage);
    withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。但是这两种模式会增加代码的层级关系，而hooks简洁多了，没有多余的层级嵌套，把各种想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook即可。

    生命周期钩子函数里的逻辑太乱了吧！我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观。

    class真的太让人困惑了！我们用class来创建react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，我们要经常写这样的代码：this.handleClick = this.handleClick.bind(this)，或者是这样的代码：<button onClick={() => this.handleClick(e)}>。一旦我们不小心忘了绑定this，各种bug就随之而来，很麻烦。

    还有就是无状态组件因为需求的变动需要有自己的state，又得很麻烦的改成class组件。

    在 React 16.8 之前 function 有两个问题：

    • function 组件不得不返回一些 UI 信息，即 JSX 代码

    • function 组件内部不能拥有 state

    • Hooks 让函数式组件拥有类组件一样的功能，state ，lifecycle 以及 context。

    • Hooks 不是 React 的新功能，可以将它理解为一个“钩子”，可以让你在不写类组件的情况下“勾住”React 的所有功能。
    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
    // withGithubProfile
    const withGithubProfile = (WrappedComponent:any) => {
      return class extends React.Component<IProps, IStates> {
        constructor(props:IProps) {
          super(props)
          this.state = {
            profile: {}
          }
        }
        
        componentDidMount() {
          fetch('https://api.github.com/users/cosyer')
            .then(response => {
              return response.json()
            })
            .then(res => {
              this.setState({
                profile: res
              })
            })
        }
        
        render() {
          const { profile } = this.state
          return <WrappedComponent profile={profile} {...this.props} />
        }
      }
    }

    引入高阶组件，使用其profile

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class GithubProfileHoc extends React.Component<IProps, IStates> {
      render() {
        const { profile } = this.props
        return (
          <div className="profile">
            <img src={profile.avatar_url} alt="avatar" width="200px" />
            <div>name: {profile.name}</div>
            <div>followers: {profile.followers}</div>
            <div>following: {profile.following}</div>
          </div>
        )
      }
    }

    export default WithGithubProfile(GithubProfileHoc)

    缺点

    • 使用多个高阶组件时，无法确定 props 来源
    • 相同的 props 会存在覆盖的情况
    • 增加调试难度

    State Hooks

    状态组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    class Example extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        };
      }

      render() {
        return (
          <div>
            <p>You clicked {this.state.count} times</p>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
              Click me
            </button>
          </div>
        );
      }
    }

    hooks改造

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import { useState } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

    是不是简单多了！可以看到，Example变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）。

    除了useState这个hook外，还有很多别的hook，比如useEffect提供了类似于componentDidMount等生命周期钩子的功能，useContext提供了上下文（context）的功能等等。

    useState是react自带的一个hook函数，它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前的状态值，第[1]项是可以改变状态值的方法函数。

    当用户点击按钮时，我们调用setCount函数，这个函数接收的参数是修改过的新状态值。接下来的事情就交给react了，react将会重新渲染我们的Example组件，并且使用的是更新后的新的状态，即count=1。Example本质上也是一个普通的函数，为什么它可以记住之前的状态？Example函数每次执行的时候，都是拿的上一次执行完的状态值作为初始值？

    组件有多个状态值

    1
    2
    3
    4
    5
    function ExampleWithManyStates() {
      const [age, setAge] = useState(42);
      const [fruit, setFruit] = useState('banana');
      const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
    }

    useState接收的初始值没有规定一定要是string/number/boolean这种简单数据类型，它完全可以接收对象或者数组作为参数。唯一需要注意的点是，之前我们的this.setState做的是合并状态后返回一个新状态，而useState是直接替换老状态后返回新状态。最后，react也给我们提供了一个useReducer的hook，如果你更喜欢redux式的状态管理方案的话。

    从ExampleWithManyStates函数我们可以看到，useState无论调用多少次，相互之间是独立的。其实我们看hook的“形态”，有点类似之前被官方否定掉的Mixins这种方案，都是提供一种“插拔式的功能注入”的能力。而Mixins之所以被否定，是因为Mixins机制是让多个Mixins共享一个对象的数据空间，这样就很难确保不同Mixins依赖的状态不发生冲突。不同组件调用同一个hook也能保证各自状态的独立性，这就是两者的本质区别。

    react是怎么保证多个useState的相互独立的？

    看上面给出的ExampleWithManyStates例子，我们调用了三次useState，每次我们传的参数只是一个值（如42，‘banana’），我们根本没有告诉react这些值对应的key是哪个，那react是怎么保证这三个useState找到它对应的state呢？

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //第一次渲染
    useState(42);  //将age初始化为42
    useState('banana');  //将fruit初始化为banana
    useState([{ text: 'Learn Hooks' }]); //...

    //第二次渲染
    useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
    useState('banana');  //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
    useState([{ text: 'Learn Hooks' }]); //...

    答案是，react是根据useState出现的顺序来定的。我们具体来看一下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let showFruit = true;
    function ExampleWithManyStates() {
      const [age, setAge] = useState(42);
      
      if(showFruit) {
        const [fruit, setFruit] = useState('banana');
        showFruit = false;
      }
     
      const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //第一次渲染
    useState(42);  //将age初始化为42
    useState('banana');  //将fruit初始化为banana
    useState([{ text: 'Learn Hooks' }]); //...

    //第二次渲染
    useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
    // useState('banana');  
    useState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值，导致报错

    所以react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。

    Effect Hooks

    同样是上个栗子，俺们增加一个新功能：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import { useState, useEffect } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      // 类似于componentDidMount 和 componentDidUpdate:
      useEffect(() => {
        // 更新文档的标题
        document.title = `You clicked ${count} times`;
      });

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }
    我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如componentDidMount，componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三，厉害了！

    同时，由于前文所说hooks可以反复多次使用，相互独立。所以我们合理的做法是，给每一个副作用一个单独的useEffect钩子。这样一来，这些副作用不再一股脑堆在生命周期钩子里，代码变得更加清晰。

    useEffect做了什么？

    首先，我们声明了一个状态变量count，将它的初始值设为0。然后我们告诉react，我们的这个组件有一个副作用。我们给useEffect hook传了一个匿名函数，这个匿名函数就是我们的副作用。在这个例子里，我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时，它会先记住我们用到的副作用。等react更新了DOM之后，它再依次执行我们定义的副作用函数。

    这里要注意：

    1. react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染componentDidMount，和之后的更新导致的重新渲染componentDidUpdate。

    2. useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。这种安排对大多数副作用说都是合理的，但有的情况除外，比如我们有时候需要先根据DOM计算出某个元素的尺寸再重新渲染，这时候我们希望这次重新渲染是同步发生的，也就是说它会在浏览器真的去绘制这个页面前发生。

    useEffect怎么解绑一些副作用？

    这种场景很常见，当我们在componentDidMount里添加了一个注册，我们得在componentWillUnmount中，也就是组件被注销之前清除掉我们添加的注册，否则内存泄漏的问题就出现了。

    怎么清除呢？让我们传给useEffect的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。这种模式在一些pubsub模式的实现中很常见。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import { useState, useEffect } from 'react';

    function FriendStatus(props) {
      const [isOnline, setIsOnline] = useState(null);

      function handleStatusChange(status) {
        setIsOnline(status.isOnline);
      }

      useEffect(() => {
        ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
        // 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup
        return function cleanup() {
          ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
        };
      });

      if (isOnline === null) {
        return 'Loading...';
      }
      return isOnline ? 'Online' : 'Offline';
    }
    这里有一个点需要重视！这种解绑的模式跟componentWillUnmount不一样。componentWillUnmount只会在组件被销毁前执行一次而已，而useEffect里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。所以我们一起来看一下面这个问题：

    为什么要让副作用函数每次组件更新都执行一遍？

    我们先看以前的模式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    componentDidMount() {
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }

    componentWillUnmount() {
      ChatAPI.unsubscribeFromFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }
    我们在componentDidMount注册，再在componentWillUnmount清除注册。但假如这时候props.friend.id变了怎么办？我们不得不再添加一个componentDidUpdate来处理这种情况：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    componentDidUpdate(prevProps) {
      // 先把上一个friend.id解绑
      ChatAPI.unsubscribeFromFriendStatus(
        prevProps.friend.id,
        this.handleStatusChange
      );
      // 再重新注册新但friend.id
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }
    很繁琐，而我们但useEffect则没这个问题，因为它在每次组件更新后都会重新执行一遍。所以代码的执行顺序是这样的：
    1
    2
    3
    4
    5
    6
    7
    1.页面首次渲染
    2.替friend.id=1的朋友注册

    3.突然friend.id变成了2
    4.页面重新渲染
    5.清除friend.id=1的绑定
    6.替friend.id=2的朋友注册

    怎么跳过一些不必要的副作用函数？

    按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。

    1
    2
    3
    useEffect(() => {
      document.title = `You clicked ${count} times`;
    }, [count]); // 只有当count的值发生变化时，才会重新执行`document.title`这一句

    当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。

    怎么写自定义的Effect Hooks?

    为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里，so easy！看一个完整的例子，你就明白了。

    比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import { useState, useEffect } from 'react';

    function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);

      function handleStatusChange(status) {
        setIsOnline(status.isOnline);
      }

      useEffect(() => {
        ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
        return () => {
          ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
        };
      });

      return isOnline;
    }
    这时候FriendStatus组件就可以简写为：
    1
    2
    3
    4
    5
    6
    7
    8
    function FriendStatus(props) {
      const isOnline = useFriendStatus(props.friend.id);

      if (isOnline === null) {
        return 'Loading...';
      }
      return isOnline ? 'Online' : 'Offline';
    }
    假如这个时候我们又有一个朋友列表也需要显示是否在线的信息也可以复用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function FriendListItem(props) {
      const isOnline = useFriendStatus(props.friend.id);

      return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
          {props.friend.name}
        </li>
      );
    }
    funky!!!

    比如还有

    useProfile 使用 Hooks 实现 API 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // useProfile
    const useProfile = () => {
      const [profile, setProfile] = useState({} as TProfile)
      const [loading, setLoading] = useState(false)
      const [isError, setIsError] = useState(false)

      useEffect(() => {
        setLoading(true)
        fetch('https://api.github.com/users/gaearon')
          .then(response => {
            return response.json()
          })
          .then(res => {
            setProfile(res as TProfile)
            setIsError(false)
            setLoading(false)
          }).catch(()=> {
            setIsError(true)
            setLoading(false)
          })
      }, [])

      return { profile, loading,isError }
    }

    使用 useProfile Hooks：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    const UseProfilePage = () => {
      const { profile, loading, isError } = useProfile()
      return (
        <React.Fragment>
          {isError ? (
            <div>Network Error...</div>
          ) : (
            <div className="profile">
              {loading ? (
                <div>loading profile...</div>
              ) : (
                <React.Fragment>
                  <img src={profile.avatar_url} alt="avatar" width="200px" />
                  <div>name: {profile.name}</div>
                  <div>company: {profile.company}</div>
                  <div>bio: {profile.bio}</div>
                </React.Fragment>
              )}
            </div>
          )}
        </React.Fragment>
      )
    }

    useInput 使用 Hooks 实现 input 输入逻辑

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const useInput = (initialValue:string) => {
      const [value, setValue] = useState(initialValue)

      const handleChange = (e:any) => {
        setValue(e.target.value)
      }

      return {
        value,
        onChange: handleChange
      }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const useInputDemo = () => {
      const value = useInput('KuangPF')

      return (
        <div className="use-input">
          <p>current name: {value.value}</p>
          <input {...value} />
        </div>
      )
    }

    useContext

    useContext 是为了在 function 组件中使用类组件的 context API，使用方法很简单，首先创建一个 context：

    1
    2
    const local = '🇨🇳'
    const ThemeContext = React.createContext(local)
    然后在 useContext hook 使用 context：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function UseContextDemo() {
      const local = useContext(ThemeContext)
      return (
        <div>
          <p>local: {local}</p>
        </div>
      )
    }
    // render: 🇨🇳
    在 class 组件中，如果想要修改 context 的值，我们会使用 Provider 提供 value 值，同样，在 function 组件中也可以：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const ThemeContext = React.createContext('🇨🇳')

    function Context() {
      const local = useContext(ThemeContext)
      return <p>local: {local}</p>
    }

    function App() {
      return (
        <ThemeContext.Provider value={'🇺🇸'}>
          <Context />
        </ThemeContext.Provider>
      )
    }
    // render: 🇺🇸

    useReducer

    useReducer 是 useState 的一种代替方案，用于 state 之间有依赖关系或者比较复杂的场景。useReducer 接收三个参数：

    • reducer：(state, action) => newState
    • initialArg： 初始化参数
    • Init： 惰性初始化,返回初始化数据

    返回当前 state 以及配套的 dispatch 方法。首先看下 useReducer 处理简单的 state：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function UseReducerDemo() {
      const [count, dispatch] = useReducer(state => {
        return state + 1
      }, 0)

      return (
        <div>
          <p>count: {count}</p>
          <button
            onClick={() => {
              dispatch()
            }}
          >
            add
          </button>
        </div>
      )
    }
    这个例子和使用 useState 一样，都达到了计数的效果。 该例子中，useReducer 初始化了 count 值为 0，传入的 reducer 很简单，当接收到一个 dispatch 时，将 count 的值增加 1。

    处理 state 有相互依赖的场景

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const CountApp = () => {
      const [count, setCount] = useState(0)
      const [frozen, setFrozen] = useState(false)

      const increase = () => {
        setCount(prevCount => {
          if (frozen) {
            return prevCount
          }
          return prevCount + 1
        })
      }

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

      return <p>count {count}</p>
    }
    // render 1

    原因在于 function 组件的更新机制，当引入 hooks 以后，function 组件也拥有了 state 的功能，当我们 setState 时，UI 会重新渲染，但在这个过程中function 组件中，state 以及 props 都是静态值，不存在引用，或者也可以理解为 state 和 props 是一个 capture value，每次渲染的 state 和 props 都是独立的。

    在这个例子中，由于 useEffect 传入的依赖为 []，即该副作用只会在 UI 第一次渲染结束后执行一次。而在这次 render 中，count 的值为 0， frozen 值为 false，所以第二次执行 increase 时，frozen 值依然为 false， setCount 返回的 prevCount 为 1 ，然后增加 1，这也就是为什么最后 render 的结果为 2，而不是 1。

    对于 state 有相互依赖的情况，我们可以用 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
    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 可以理解为将函数进行了缓存，它接收一个回调函数和一个依赖数组，只有当依赖数组中的值发生改变时，该回调函数才会更新。

    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 值，这种优化有助于避免在每次渲染时都进行高开销的计算。

    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
    function UseMemoDemo() {
      const [count, setCount] = useState(0)
      const [value, setValue] = useState('')

      const useMemoChild = useMemo(() => <Child count={count} />, [count])
      return (
        <div>
          <p>{count}</p>
          <button
            onClick={() => {
              setCount(count + 1)
            }}
          >
            click
          </button>
          <br />
          <input value={value} onChange={e => setValue(e.target.value)} />
          {useMemoChild}
        </div>
      )
    }

    function Child({ count }: { count: number }) {
      console.log('child render')
      return (
        <Fragment>
          <p>useMemo hooks</p>
          <p>child count: {count}</p>
        </Fragment>
      )
    }

    该例子中，UseMemoDemo 组件引用了 Child 组件，在 UseMemoDemo 组件中，定义了 count 和 value 两个 state，如果不使用 useMemo，那么每当 UseMemoDemo 中 input 发生改变时，Child 组件就会重新渲染。但 Child 组件 UI 只和 count 有关，那么这样就会造成 Child 组件无效更新，因此就引入了 useMemo，将 count 作为依赖传入，这样只有当 count 值发生改变时， Child 组件才会重新渲染。

    useRef

    useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数 （initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。在 function 组件中， 使用 useRef 主要可以完成以下两件事：

    1. 获取 dom 结构
    2. 保存变量

    先看一个获取 dom 节点, 点击 button 时，input 聚焦。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function UseRefDemo() {
      const inputRef = useRef(null as any)

      const handleFocusInput = () => {
        inputRef.current.focus()
      }

      return (
        <div>
          <input ref={inputRef} />
          <button onClick={handleFocusInput}>click focus</button>
        </div>
      )
    }
    官方demo
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function Counter() {
      const [count, setCount] = useState(0)

      useEffect(() => {
        setTimeout(() => {
          console.log(`You clicked ${count} times`)
        }, 3000)
      })

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      )
    }
    如果我们 3s 点多次点击 button，那么控制台输出的结果会是 0,1,2,3…， 这是由于每次渲染时 count 的值都是固定的。但类似的逻辑在 class 组件中表现不一样：
    1
    2
    3
    4
    5
    componentDidUpdate() {
      setTimeout(() => {
        console.log(`You clicked ${this.state.count} times`);
      }, 3000);
    }
    在 class 组件中，我们在 3s 内多次点击 button，最后在控制台输出的结果是最后一次 count 更新的值。而在 function 组件中，我们使用 useRef实现这个效果 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function useRefDemo() {
      const [count, setCount] = useState(0)
      const countRef = useRef(count)

      useEffect(() => {
        countRef.current = count
        setTimeout(() => {
          console.log(`You clicked ${countRef.current} times`)
        }, 2000)
      }, [count])

      return (
        <div>
          <p>count: {count}</p>
          <button
            onClick={() => {
              setCount(count + 1)
            }}
          >
            click
          </button>
        </div>
      )
    }
    useRef 返回的对象在组件的整个生命周期内保持不变，每次渲染时返回的是同一个ref对象，因此 countRef.current 始终是最新的 count 值。

    useImperativeHandle

    useImperativeHandle 可以让你在使用 ref 时，自定义暴露给父组件的实例值，在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function FancyInput(props, ref) {
      const inputRef = useRef(null as any)
      useImperativeHandle(ref, () => ({
        focus: () => {
          inputRef.current.focus()
        }
      }))
      return <input ref={inputRef} />
    }

    const FancyInputRef = forwardRef(FancyInput)

    const useImperativeHandleDemo = () => {
      const inputRef = useRef(null as any)

      useEffect(() => {
        inputRef.current.focus()
      })

      return <FancyInputRef ref={inputRef} />
    }

    useLayoutEffect

    其函数签名 与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const BlinkyRender = () => {
      const [value, setValue] = useState(0);

      useEffect(() => {
        if (value === 0) {
          setValue(10 + Math.random() * 200);
        }
      }, [value]);

      return (
        <div onClick={() => setValue(0)}>value: {value}</div>
      );
    };
    当我们快速点击时，value 会发生随机变化，但 useEffect 是 UI 已经渲染到屏幕上以后才会执行，value 会先渲染为 0，然后在渲染成随机数，因此屏幕会出现闪烁。
    1
    2
    3
    4
    5
    useLayoutEffect(() => {
      if (value === 0) {
        setValue(10 + Math.random() * 200);
      }
    }, [value]);
    相比使用 useEffect，当点击 div，value 更新为 0，此时页面并不会渲染，而是等待 useLayoutEffect 内部状态修改后，才会去更新页面，所以页面不会闪烁。

    useDebugValue

    useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function useFriendStatus() {
      const [isOnline] = useState(null)
      useDebugValue(isOnline ? 'Online' : 'Offline')

      return isOnline
    }

    const App = () => {
      const isOnline = useFriendStatus()

      return <div>{isOnline}</div>
    }
    在某些情况下，格式化值的显示可能是一项开销很大的操作，因此，useDebugValue 接受一个格式化函数作为可选的第二个参数。该函数只有在 Hook 被检查（打开 React 开发者工具）时才会被调用。它接受 debug 值作为参数，并且会返回一个格式化的显示值。例如， 一个返回 Date 值的自定义 Hook 可以通过格式化函数来避免不必要的 toDateString 函数调用:
    1
    useDebugValue(date, date => date.toDateString());

    仓库代码

    react-hooks-demo

    总结

    这篇文章将 React Hooks 语法进行了简单介绍，Hooks 功能十分强大，如果看完文章还不是很理解的话，建议把这些 demo 自己再手动实现一遍，这样收获会更多。如果文章内容有哪些描述错误或者不清的地方，欢迎各位纠正并一起交流。👏👏👏

    ]]>     + 它来了，它来了，16.8版本hooks成功加入(^▽^)

    你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？—— 拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

    你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？—— 拥有了Hooks，生命周期钩子函数可以先丢一边了。

    你在还在为组件中的this指向而晕头转向吗？—— 既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

    React为什么要搞一个Hooks？

    想要复用一个有状态的组件太麻烦了！我们都知道react的核心思想是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。

    那之前，官方推荐怎么解决这个问题呢？答案是：渲染属性（Render Props）和高阶组件（Higher-Order Components）。

    渲染属性

    渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到DataProvider组件包含了所有跟状态相关的代码，而Cat组件则可以是一个单纯的展示型组件，这样一来DataProvider就可以单独复用了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import Cat from 'components/cat'
    class DataProvider extends React.Component {
      constructor(props) {
        super(props);
        this.state = { target: 'Zac' };
      }

      render() {
        return (
          <div>
            {this.props.render(this.state)}
          </div>
        )
      }
    }

    <DataProvider render={data => (
      <Cat target={data.target} />
    )}/>

    虽然这个模式叫Render Props，但不是说非用一个叫render的props不可，习惯上大家更常写成下面这种：

    1
    2
    3
    4
    5
    <DataProvider>
      {data => (
        <Cat target={data.target} />
      )}
    </DataProvider>

    其他🌰

    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
    class GithubProfile extends React.PureComponent<IProps, IStates> {
      state: IStates = {
        profile: {}
      }

      componentDidMount() {
        fetch('https://api.github.com/users/cosyer')
          .then(response => {
            return response.json()
          })
          .then(res => {
            this.setState({
              profile: res
            })
          })
      }
      
      render() {
        const { profile } = this.state
        return (
          <div className="profile">
            <img src={profile.avatar_url} alt="avatar" width="200px" />
            <div>name: {profile.name}</div>
            <div>company: {profile.company}</div>
            <div>bio: {profile.bio}</div>
          </div>
        )
      }
    }

    如果其它页面也有相同的需求，或者数据一样，仅仅 UI 不一样，那么我们该怎么处理？其实这个问题目的很简单，那就是：如何实现代码复用。

    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
    // Render Props
    class Profile extends React.Component<IProps, IStates> {
      constructor(props:IProps) {
        super(props)
        this.state = {
          profile: {}
        }
      }

      componentDidMount() {
        fetch('https://api.github.com/users/cosyer')
          .then(response => {
            return response.json()
          })
          .then(res => {
            this.setState({
              profile: res
            })
          })
      }

      render() {
        const { profile } = this.state
        return <React.Fragment>{this.props.children(profile)}</React.Fragment>
      }
    }
    定义 props 渲染函数：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    class ProfileRenderProps extends React.PureComponent {
      render() {
        return (
          <Profile>
            {(profile:any) => (
              <div className="profile">
                <img src={profile.avatar_url} alt="avatar" width="200px" />
                <div>name: {profile.name}</div>
                <div>company: {profile.company}</div>
                <div>bio: {profile.bio}</div>
              </div>
            )}
          </Profile>
        )
      }
    }

    缺点

    • 回调地狱

    高阶组件

    说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。

    看个栗子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const withUser = WrappedComponent => {
      const user = sessionStorage.getItem("user");
      return props => <WrappedComponent user={user} {...props} />;
    };

    const UserPage = props => (
      <div class="user-container">
        <p>My name is {props.user}!</p>
      </div>
    );

    export default withUser(UserPage);
    withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。但是这两种模式会增加代码的层级关系，而hooks简洁多了，没有多余的层级嵌套，把各种想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook即可。

    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
    // withGithubProfile
    const withGithubProfile = (WrappedComponent:any) => {
      return class extends React.Component<IProps, IStates> {
        constructor(props:IProps) {
          super(props)
          this.state = {
            profile: {}
          }
        }
        
        componentDidMount() {
          fetch('https://api.github.com/users/cosyer')
            .then(response => {
              return response.json()
            })
            .then(res => {
              this.setState({
                profile: res
              })
            })
        }
        
        render() {
          const { profile } = this.state
          return <WrappedComponent profile={profile} {...this.props} />
        }
      }
    }

    引入高阶组件，使用其profile

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class GithubProfileHoc extends React.Component<IProps, IStates> {
      render() {
        const { profile } = this.props
        return (
          <div className="profile">
            <img src={profile.avatar_url} alt="avatar" width="200px" />
            <div>name: {profile.name}</div>
            <div>followers: {profile.followers}</div>
            <div>following: {profile.following}</div>
          </div>
        )
      }
    }

    export default WithGithubProfile(GithubProfileHoc)

    缺点

    • 使用多个高阶组件时，无法确定 props 来源
    • 相同的 props 会存在覆盖的情况
    • 增加调试难度

    生命周期钩子函数里的逻辑太乱了吧！我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观。

    class真的太让人困惑了！我们用class来创建react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，我们要经常写这样的代码：this.handleClick = this.handleClick.bind(this)，或者是这样的代码：<button onClick={() => this.handleClick(e)}>。一旦我们不小心忘了绑定this，各种bug就随之而来，很麻烦。

    还有就是无状态组件因为需求的变动需要有自己的state，又得很麻烦的改成class组件。

    在 React 16.8 之前 function 有两个问题：

    • function 组件不得不返回一些 UI 信息，即 JSX 代码

    • function 组件内部不能拥有 state

    • Hooks 让函数式组件拥有类组件一样的功能，state ，lifecycle 以及 context。

    • Hooks 不是 React 的新功能，可以将它理解为一个“钩子”，可以让你在不写类组件的情况下“勾住”React 的所有功能。

    State Hooks

    状态组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    class Example extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        };
      }

      render() {
        return (
          <div>
            <p>You clicked {this.state.count} times</p>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
              Click me
            </button>
          </div>
        );
      }
    }

    hooks改造

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import { useState } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

    是不是简单多了！可以看到，Example变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）。

    除了useState这个hook外，还有很多别的hook，比如useEffect提供了类似于componentDidMount等生命周期钩子的功能，useContext提供了上下文（context）的功能等等。

    useState是react自带的一个hook函数，它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前的状态值，第[1]项是可以改变状态值的方法函数。

    当用户点击按钮时，我们调用setCount函数，这个函数接收的参数是修改过的新状态值。接下来的事情就交给react了，react将会重新渲染我们的Example组件，并且使用的是更新后的新的状态，即count=1。Example本质上也是一个普通的函数，为什么它可以记住之前的状态？Example函数每次执行的时候，都是拿的上一次执行完的状态值作为初始值？

    组件有多个状态值

    1
    2
    3
    4
    5
    function ExampleWithManyStates() {
      const [age, setAge] = useState(42);
      const [fruit, setFruit] = useState('banana');
      const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
    }

    useState接收的初始值没有规定一定要是string/number/boolean这种简单数据类型，它完全可以接收对象或者数组作为参数。唯一需要注意的点是，之前我们的this.setState做的是合并状态后返回一个新状态，而useState是直接替换老状态后返回新状态。最后，react也给我们提供了一个useReducer的hook，如果你更喜欢redux式的状态管理方案的话。

    从ExampleWithManyStates函数我们可以看到，useState无论调用多少次，相互之间是独立的。其实我们看hook的“形态”，有点类似之前被官方否定掉的Mixins这种方案，都是提供一种“插拔式的功能注入”的能力。而Mixins之所以被否定，是因为Mixins机制是让多个Mixins共享一个对象的数据空间，这样就很难确保不同Mixins依赖的状态不发生冲突。不同组件调用同一个hook也能保证各自状态的独立性，这就是两者的本质区别。

    react是怎么保证多个useState的相互独立的？

    看上面给出的ExampleWithManyStates例子，我们调用了三次useState，每次我们传的参数只是一个值（如42，‘banana’），我们根本没有告诉react这些值对应的key是哪个，那react是怎么保证这三个useState找到它对应的state呢？

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //第一次渲染
    useState(42);  //将age初始化为42
    useState('banana');  //将fruit初始化为banana
    useState([{ text: 'Learn Hooks' }]); //...

    //第二次渲染
    useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
    useState('banana');  //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
    useState([{ text: 'Learn Hooks' }]); //...

    答案是，react是根据useState出现的顺序来定的。我们具体来看一下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let showFruit = true;
    function ExampleWithManyStates() {
      const [age, setAge] = useState(42);
      
      if(showFruit) {
        const [fruit, setFruit] = useState('banana');
        showFruit = false;
      }
     
      const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //第一次渲染
    useState(42);  //将age初始化为42
    useState('banana');  //将fruit初始化为banana
    useState([{ text: 'Learn Hooks' }]); //...

    //第二次渲染
    useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
    // useState('banana');  
    useState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值，导致报错

    所以react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。

    Effect Hooks

    同样是上个栗子，俺们增加一个新功能：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import { useState, useEffect } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      // 类似于componentDidMount 和 componentDidUpdate:
      useEffect(() => {
        // 更新文档的标题
        document.title = `You clicked ${count} times`;
      });

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }
    我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如componentDidMount，componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三，厉害了！

    同时，由于前文所说hooks可以反复多次使用，相互独立。所以我们合理的做法是，给每一个副作用一个单独的useEffect钩子。这样一来，这些副作用不再一股脑堆在生命周期钩子里，代码变得更加清晰。

    useEffect做了什么？

    首先，我们声明了一个状态变量count，将它的初始值设为0。然后我们告诉react，我们的这个组件有一个副作用。我们给useEffect hook传了一个匿名函数，这个匿名函数就是我们的副作用。在这个例子里，我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时，它会先记住我们用到的副作用。等react更新了DOM之后，它再依次执行我们定义的副作用函数。

    这里要注意：

    1. react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染componentDidMount，和之后的更新导致的重新渲染componentDidUpdate。

    2. useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。这种安排对大多数副作用说都是合理的，但有的情况除外，比如我们有时候需要先根据DOM计算出某个元素的尺寸再重新渲染，这时候我们希望这次重新渲染是同步发生的，也就是说它会在浏览器真的去绘制这个页面前发生。

    useEffect怎么解绑一些副作用？

    这种场景很常见，当我们在componentDidMount里添加了一个注册，我们得在componentWillUnmount中，也就是组件被注销之前清除掉我们添加的注册，否则内存泄漏的问题就出现了。

    怎么清除呢？让我们传给useEffect的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。这种模式在一些pubsub模式的实现中很常见。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import { useState, useEffect } from 'react';

    function FriendStatus(props) {
      const [isOnline, setIsOnline] = useState(null);

      function handleStatusChange(status) {
        setIsOnline(status.isOnline);
      }

      useEffect(() => {
        ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
        // 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup
        return function cleanup() {
          ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
        };
      });

      if (isOnline === null) {
        return 'Loading...';
      }
      return isOnline ? 'Online' : 'Offline';
    }
    这里有一个点需要重视！这种解绑的模式跟componentWillUnmount不一样。componentWillUnmount只会在组件被销毁前执行一次而已，而useEffect里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。所以我们一起来看一下面这个问题：

    为什么要让副作用函数每次组件更新都执行一遍？

    我们先看以前的模式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    componentDidMount() {
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }

    componentWillUnmount() {
      ChatAPI.unsubscribeFromFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }
    我们在componentDidMount注册，再在componentWillUnmount清除注册。但假如这时候props.friend.id变了怎么办？我们不得不再添加一个componentDidUpdate来处理这种情况：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    componentDidUpdate(prevProps) {
      // 先把上一个friend.id解绑
      ChatAPI.unsubscribeFromFriendStatus(
        prevProps.friend.id,
        this.handleStatusChange
      );
      // 再重新注册新但friend.id
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }
    很繁琐，而我们但useEffect则没这个问题，因为它在每次组件更新后都会重新执行一遍。所以代码的执行顺序是这样的：
    1
    2
    3
    4
    5
    6
    7
    1.页面首次渲染
    2.替friend.id=1的朋友注册

    3.突然friend.id变成了2
    4.页面重新渲染
    5.清除friend.id=1的绑定
    6.替friend.id=2的朋友注册

    怎么跳过一些不必要的副作用函数？

    按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。

    1
    2
    3
    useEffect(() => {
      document.title = `You clicked ${count} times`;
    }, [count]); // 只有当count的值发生变化时，才会重新执行`document.title`这一句

    当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。

    怎么写自定义的Effect Hooks?

    为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里，so easy！看一个完整的例子，你就明白了。

    比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import { useState, useEffect } from 'react';

    function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);

      function handleStatusChange(status) {
        setIsOnline(status.isOnline);
      }

      useEffect(() => {
        ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
        return () => {
          ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
        };
      });

      return isOnline;
    }
    这时候FriendStatus组件就可以简写为：
    1
    2
    3
    4
    5
    6
    7
    8
    function FriendStatus(props) {
      const isOnline = useFriendStatus(props.friend.id);

      if (isOnline === null) {
        return 'Loading...';
      }
      return isOnline ? 'Online' : 'Offline';
    }
    假如这个时候我们又有一个朋友列表也需要显示是否在线的信息也可以复用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function FriendListItem(props) {
      const isOnline = useFriendStatus(props.friend.id);

      return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
          {props.friend.name}
        </li>
      );
    }
    funky!!!

    比如还有

    useProfile 使用 Hooks 实现 API 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // useProfile
    const useProfile = () => {
      const [profile, setProfile] = useState({} as TProfile)
      const [loading, setLoading] = useState(false)
      const [isError, setIsError] = useState(false)

      useEffect(() => {
        setLoading(true)
        fetch('https://api.github.com/users/gaearon')
          .then(response => {
            return response.json()
          })
          .then(res => {
            setProfile(res as TProfile)
            setIsError(false)
            setLoading(false)
          }).catch(()=> {
            setIsError(true)
            setLoading(false)
          })
      }, [])

      return { profile, loading, isError }
    }

    使用 useProfile Hooks：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    const UseProfilePage = () => {
      const { profile, loading, isError } = useProfile()
      return (
        <React.Fragment>
          {isError ? (
            <div>Network Error...</div>
          ) : (
            <div className="profile">
              {loading ? (
                <div>loading profile...</div>
              ) : (
                <React.Fragment>
                  <img src={profile.avatar_url} alt="avatar" width="200px" />
                  <div>name: {profile.name}</div>
                  <div>company: {profile.company}</div>
                  <div>bio: {profile.bio}</div>
                </React.Fragment>
              )}
            </div>
          )}
        </React.Fragment>
      )
    }

    useInput 使用 Hooks 实现 input 输入逻辑

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const useInput = (initialValue:string) => {
      const [value, setValue] = useState(initialValue)

      const handleChange = (e:any) => {
        setValue(e.target.value)
      }

      return {
        value,
        onChange: handleChange
      }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const useInputDemo = () => {
      const value = useInput('cosyer')

      return (
        <div className="use-input">
          <p>current name: {value.value}</p>
          <input {...value} />
        </div>
      )
    }

    useContext

    useContext 是为了在 function 组件中使用类组件的 context API，使用方法很简单，首先创建一个 context：

    1
    2
    const local = '🇨🇳'
    const ThemeContext = React.createContext(local)
    然后在 useContext hook 使用 context：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function UseContextDemo() {
      const local = useContext(ThemeContext)
      return (
        <div>
          <p>local: {local}</p>
        </div>
      )
    }
    // render: 🇨🇳
    在 class 组件中，如果想要修改 context 的值，我们会使用 Provider 提供 value 值，同样，在 function 组件中也可以：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const ThemeContext = React.createContext('🇨🇳')

    function Context() {
      const local = useContext(ThemeContext)
      return <p>local: {local}</p>
    }

    function App() {
      return (
        <ThemeContext.Provider value={'🇺🇸'}>
          <Context />
        </ThemeContext.Provider>
      )
    }
    // render: 🇺🇸

    useReducer

    useReducer 是 useState 的一种代替方案，用于 state 之间有依赖关系或者比较复杂的场景。useReducer 接收三个参数：

    • reducer：(state, action) => newState
    • initialArg： 初始化参数
    • Init： 惰性初始化,返回初始化数据

    返回当前 state 以及配套的 dispatch 方法。首先看下 useReducer 处理简单的 state：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function UseReducerDemo() {
      const [count, dispatch] = useReducer(state => {
        return state + 1
      }, 0)

      return (
        <div>
          <p>count: {count}</p>
          <button
            onClick={() => {
              dispatch()
            }}
          >
            add
          </button>
        </div>
      )
    }
    这个例子和使用 useState 一样，都达到了计数的效果。 该例子中，useReducer 初始化了 count 值为 0，传入的 reducer 很简单，当接收到一个 dispatch 时，将 count 的值增加 1。

    处理 state 有相互依赖的场景

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const CountApp = () => {
      const [count, setCount] = useState(0)
      const [frozen, setFrozen] = useState(false)

      const increase = () => {
        setCount(prevCount => {
          if (frozen) {
            return prevCount
          }
          return prevCount + 1
        })
      }

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

      return <p>count {count}</p>
    }
    // render 2

    原因在于 function 组件的更新机制，当引入 hooks 以后，function 组件也拥有了 state 的功能，当我们 setState 时，UI 会重新渲染，但在这个过程中function 组件中，state 以及 props 都是静态值，不存在引用，或者也可以理解为 state 和 props 是一个 capture value，每次渲染的 state 和 props 都是独立的。

    在这个例子中，由于 useEffect 传入的依赖为 []，即该副作用只会在 UI 第一次渲染结束后执行一次。而在这次 render 中，count 的值为 0， frozen 值为 false，所以第二次执行 increase 时，frozen 值依然为 false， setCount 返回的 prevCount 为 1 ，然后增加 1，这也就是为什么最后 render 的结果为 2，而不是 1。

    对于 state 有相互依赖的情况，我们可以用 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
    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 可以理解为将函数进行了缓存，它接收一个回调函数和一个依赖数组，只有当依赖数组中的值发生改变时，该回调函数才会更新。

    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 值，这种优化有助于避免在每次渲染时都进行高开销的计算。

    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
    function UseMemoDemo() {
      const [count, setCount] = useState(0)
      const [value, setValue] = useState('')

      const useMemoChild = useMemo(() => <Child count={count} />, [count])
      return (
        <div>
          <p>{count}</p>
          <button
            onClick={() => {
              setCount(count + 1)
            }}
          >
            click
          </button>
          <br />
          <input value={value} onChange={e => setValue(e.target.value)} />
          {useMemoChild}
        </div>
      )
    }

    function Child({ count }: { count: number }) {
      console.log('child render')
      return (
        <Fragment>
          <p>useMemo hooks</p>
          <p>child count: {count}</p>
        </Fragment>
      )
    }

    该例子中，UseMemoDemo 组件引用了 Child 组件，在 UseMemoDemo 组件中，定义了 count 和 value 两个 state，如果不使用 useMemo，那么每当 UseMemoDemo 中 input 发生改变时，Child 组件就会重新渲染。但 Child 组件 UI 只和 count 有关，那么这样就会造成 Child 组件无效更新，因此就引入了 useMemo，将 count 作为依赖传入，这样只有当 count 值发生改变时， Child 组件才会重新渲染。

    useRef

    useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数 （initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。在 function 组件中， 使用 useRef 主要可以完成以下两件事：

    1. 获取 dom 结构
    2. 保存变量

    先看一个获取 dom 节点, 点击 button 时，input 聚焦。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function UseRefDemo() {
      const inputRef = useRef(null as any)

      const handleFocusInput = () => {
        inputRef.current.focus()
      }

      return (
        <div>
          <input ref={inputRef} />
          <button onClick={handleFocusInput}>click focus</button>
        </div>
      )
    }
    官方demo
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function Counter() {
      const [count, setCount] = useState(0)

      useEffect(() => {
        setTimeout(() => {
          console.log(`You clicked ${count} times`)
        }, 3000)
      })

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      )
    }
    如果我们 3s 点多次点击 button，那么控制台输出的结果会是 0,1,2,3…， 这是由于每次渲染时 count 的值都是固定的。但类似的逻辑在 class 组件中表现不一样：
    1
    2
    3
    4
    5
    componentDidUpdate() {
      setTimeout(() => {
        console.log(`You clicked ${this.state.count} times`);
      }, 3000);
    }
    在 class 组件中，我们在 3s 内多次点击 button，最后在控制台输出的结果是最后一次 count 更新的值。而在 function 组件中，我们使用 useRef实现这个效果 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function useRefDemo() {
      const [count, setCount] = useState(0)
      const countRef = useRef(count)

      useEffect(() => {
        countRef.current = count
        setTimeout(() => {
          console.log(`You clicked ${countRef.current} times`)
        }, 2000)
      }, [count])

      return (
        <div>
          <p>count: {count}</p>
          <button
            onClick={() => {
              setCount(count + 1)
            }}
          >
            click
          </button>
        </div>
      )
    }
    useRef 返回的对象在组件的整个生命周期内保持不变，每次渲染时返回的是同一个ref对象，因此 countRef.current 始终是最新的 count 值。

    useImperativeHandle

    useImperativeHandle 可以让你在使用 ref 时，自定义暴露给父组件的实例值，在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function FancyInput(props, ref) {
      const inputRef = useRef(null as any)
      useImperativeHandle(ref, () => ({
        focus: () => {
          inputRef.current.focus()
        }
      }))
      return <input ref={inputRef} />
    }

    const FancyInputRef = forwardRef(FancyInput)

    const useImperativeHandleDemo = () => {
      const inputRef = useRef(null as any)

      useEffect(() => {
        inputRef.current.focus()
      })

      return <FancyInputRef ref={inputRef} />
    }

    useLayoutEffect

    其函数签名 与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const BlinkyRender = () => {
      const [value, setValue] = useState(0);

      useEffect(() => {
        if (value === 0) {
          setValue(10 + Math.random() * 200);
        }
      }, [value]);

      return (
        <div onClick={() => setValue(0)}>value: {value}</div>
      );
    };
    当我们快速点击时，value 会发生随机变化，但 useEffect 是 UI 已经渲染到屏幕上以后才会执行，value 会先渲染为 0，然后在渲染成随机数，因此屏幕会出现闪烁。
    1
    2
    3
    4
    5
    useLayoutEffect(() => {
      if (value === 0) {
        setValue(10 + Math.random() * 200);
      }
    }, [value]);
    相比使用 useEffect，当点击 div，value 更新为 0，此时页面并不会渲染，而是等待 useLayoutEffect 内部状态修改后，才会去更新页面，所以页面不会闪烁。

    useDebugValue

    useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function useFriendStatus() {
      const [isOnline] = useState(null)
      useDebugValue(isOnline ? 'Online' : 'Offline')

      return isOnline
    }

    const App = () => {
      const isOnline = useFriendStatus()

      return <div>{isOnline}</div>
    }
    在某些情况下，格式化值的显示可能是一项开销很大的操作，因此，useDebugValue 接受一个格式化函数作为可选的第二个参数。该函数只有在 Hook 被检查（打开 React 开发者工具）时才会被调用。它接受 debug 值作为参数，并且会返回一个格式化的显示值。例如， 一个返回 Date 值的自定义 Hook 可以通过格式化函数来避免不必要的 toDateString 函数调用:
    1
    useDebugValue(date, date => date.toDateString());

    仓库代码

    react-hooks-demo

    总结

    这篇文章将 React Hooks 语法进行了简单介绍，Hooks 功能十分强大，如果看完文章还不是很理解的话，建议把这些 demo 自己再手动实现一遍，这样收获会更多。如果文章内容有哪些描述错误或者不清的地方，欢迎各位纠正并一起交流。👏👏👏

    ]]>     http://mydearest.cn/2020/30%E5%88%86%E9%92%9F%E7%B2%BE%E9%80%9AReact%20Hooks.html#disqus_thread diff --git a/sass.html b/sass.html index 96609d4a7..dc21a149f 100644 --- a/sass.html +++ b/sass.html @@ -976,7 +976,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git "a/sass\343\200\201less\345\222\214stylus\345\214\272\345\210\253.html" "b/sass\343\200\201less\345\222\214stylus\345\214\272\345\210\253.html" index 45c432139..61a0caa14 100644 --- "a/sass\343\200\201less\345\222\214stylus\345\214\272\345\210\253.html" +++ "b/sass\343\200\201less\345\222\214stylus\345\214\272\345\210\253.html" @@ -1064,7 +1064,7 @@

    总结
    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/scienceInternet.html b/scienceInternet.html index 852642017..7b5aee2f0 100644 --- a/scienceInternet.html +++ b/scienceInternet.html @@ -966,7 +966,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/scope.html b/scope.html index 71455ae27..37778d675 100644 --- a/scope.html +++ b/scope.html @@ -961,7 +961,7 @@

    - Blog总字数: 286.9k字 + Blog总字数: 288.0k字

    diff --git a/search.json b/search.json index b9368d695..0dafd71e8 100644 --- a/search.json +++ b/search.json @@ -1 +1 @@ -[{"title":"HTML中p标签中插入div标签会发生什么","url":"%2F2020%2FHTML%E4%B8%ADp%E6%A0%87%E7%AD%BE%E4%B8%AD%E6%8F%92%E5%85%A5div%E6%A0%87%E7%AD%BE%E4%BC%9A%E5%8F%91%E7%94%9F%E4%BB%80%E4%B9%88.html","content":"\n面试遇到了问题:`

    中能不能插入

    ? 插入
    会如何?`\n\n先直接实践下：\n\n![div1](http://cdn.mydearest.cn/blog/images/div1.png)\n\n我们可以看到,
    把

    分成了两段, 并且div外字段并不在

    内。把div变成行内块级元素也不行。\n\n![div2](http://cdn.mydearest.cn/blog/images/div2.png)\n\n解答:\n可以在HTML标准(https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)中看到,\n>

    虽然是块级元素, 但是只能包含行内元素, 不能包含块级元素(包括

    自己)\n\n![div3](http://cdn.mydearest.cn/blog/images/div3.png)\n\nover!\n","tags":["前端"],"categories":["知识"]},{"title":"Docker","url":"%2F2020%2Freact-native%E5%B0%8F%E7%BB%93.html","content":"\n## 前言\nreact-native开发使用的是JS,但是并不是纯正的JS,而是一种JSX语言，就是在JS中嵌入XML语言，因此，只要有一些JS的语法基础的原生开发者，就可以肯容易理解JSX的语法了，在RN中，推荐使用ES6的语法。\n\n## 性能\n使用react-native开发的最大的有点在于开发效率，加入APP并不复杂的话，那么完全可以使用纯JS开发，也就是Android和iOS公用一套界面和逻辑。极大的提高了开发效率。在性能上，RN的表现比原生弱一些，但\n是远好于H5。所以总体来看，其实RN的未来还是可以期待的。\n\n## 运行机制\nRN是运行JS的，Android是运行Java字节码的，所以，实际上JS代码的最终运行是通过一层封装，把JS的代码映射成原生代码，而界面上的元素最终使用的也是原生的组件，而不是自己渲染（所以在性能上，RN比H5要\n好很多）。\n\n## Component简介\n在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：组件。我觉得Component和原生的Fragment其实很像，都存在于activity中，都受制于activity的生命周期，都可卸\n载和装载。\n\n---\n\n\n## 原有架构和问题\n1. 用户编写的React代码\n2. React代码转换之后的js\n3. The Bridge\n4. Native side\n\n- 组件和 API 太过依赖 JSBridge 的初始化，而且通讯能力也局限于这一条通道。\n- JS和Native之间并不真正直接通信，它们的通信依赖于跨Bridge传输的异步JSON消息。\n\n> UI 的渲染过程分为三层：JS 业务层、shadow tree、原生 UI 层。\n\n其中 JS 和 shadow tree 是通过 JSBridge 来同步数据的，JS 层会将所有 UI node 生成一串 JSON 数据，传递到原生 shadow 层，原生 shadow 层通过传入 node 数据，新增新 UI 或者删除一些不需要的 \nUI 组件。\n\n从渲染的层次来看，React Native 是多线程运行的，最常见的是 JS 线程和原生端的线程，一旦线程间异常，JSBridge 整体将会阻塞，我们经常也能看到 JS 运行异常了，实际 JS 线程已经无响应了，但原生端\n还能响应滚动事件。\n\n## 新的架构\n\n> RN 在 0.59 版本使用 JSI 取代了先前的 JSBridge。\n分为两部分：\n- Fabric，新架构的UI manager\n- TurboModules，这个与native端交互的新一代实现\n\n现在不需要序列化成JSON并双向传递等一系列操作，实现了Native和 JS间的直接同步通讯。\n","tags":["react"],"categories":["React"]},{"title":"Vue中axios的封装","url":"%2F2020%2FVue%E4%B8%ADaxios%E7%9A%84%E5%B0%81%E8%A3%85.html","content":"\n## 聊聊 Vue 中 axios 的封装\naxios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：\n\n> Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。\n\n作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。\n\n虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用。下面，我们就来聊聊 Vue 中 axios 的封装。\n\n---\n\n\n### 开始\n其实，网上关于 axios 封装的代码不少，但是大部分都是在入口文件（main.js）中进行 axios 全局对象属性定义的形式进行配置，类似于如下代码：\n\n```js\naxios.defaults.timeout = 10000\n```\n\n该方案有两个不足，首先，axios 封装代码耦合进入入口文件，不方便后期维护；其次，使用 axios 全局对象属性定义的方式进行配置，代码过于零散。\n\n1. 针对问题一，我使用了 Vue 源码结构中的一大核心思想——将功能拆分为文件，方便后期的维护。单独创建一个 `http.js` 或者 `http.ts` 文件，在文件中引入 axios 并对其进行封装配置，最后将其导出并挂载到 Vue 的原型上即可。此时，每次修改 axios 配置，只需要修改对应的文件即可，不会影响到不相关的功能。\n\n2. 针对问题二，采用 axios 官方推荐的，通过配置项创建 axios 实例的方式进行配置封装。\n\n代码如下：\n\n```js\n// http.js\nimport axios from 'axios'\n// 创建 axios 实例\nconst service = axios.create({\n // 配置项\n})\n```\n\n### 根据环境设置 baseURL\nbaseURL 属性是请求地址前缀，将自动加在 url 前面，除非 url 是个绝对地址。正常情况下，在开发环境下和生产模式下有着不同的 baseURL，所以，我们需要根据不同的环境切换不同的 baseURL。\n\n在开发模式下，由于有着 devServer 的存在，需要根据固定的 url 前缀进行请求地址重写，所以，在开发环境下，将 baseURL 设为某个固定的值，比如：`/apis`。\n\n在生产模式下，根据 Java 模块的请求前缀的不同，可以设置不同的 baseURL。\n\n具体代码如下：\n\n```js\n// 根据 process.env.NODE_ENV 区分状态，切换不同的 baseURL\nconst service = axios.create({\n\tbaseURL: process.env.NODE_ENV === 'production' ? `/java` : '/apis',\n})\n```\n\n### 统一设置请求头\n在这里和大家聊一个问题，什么是封装？在我看来，封装是通过更少的调用代码覆盖更多的调用场景。\n\n由于，大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，所以，在这里，我采用的方案是，将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置。\n\n代码如下：\n\n```js\nconst service = axios.create({\n ...\n\theaders: {\n get: {\n 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'\n // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来\n },\n post: {\n 'Content-Type': 'application/json;charset=utf-8'\n // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来\n }\n },\n})\n```\n\n### 跨域、超时、响应码处理\naxios 中，提供是否允许跨域的属性——withCredentials，以及配置超时时间的属性——timeout，通过这两个属性，可以轻松处理跨域和超时的问题。\n\n下面，我们来说说响应码处理：\n\naxios 提供了 validateStatus 属性，用于定义对于给定的HTTP 响应状态码是 resolve 或 reject promise。所以，正常设置的情况下，我们会将状态码为 2 系列或者 304 的请求设为 resolve 状态，其余为 reject 状态。结果就是，我们可以在业务代码里，使用 catch 统一捕获响应错误的请求，从而进行统一处理。\n\n但是，由于我在代码里面使用了 async-await，而众所周知，async-await 捕获 catch 的方式极为麻烦，所以，在此处，我选择将所有响应都设为 resolve 状态，统一在 then 处理。\n\n此部分代码如下：\n\n```js\nconst service = axios.create({\n\t// 跨域请求时是否需要使用凭证\n\twithCredentials: true,\n // 请求 30s 超时\n\ttimeout: 30000,\n\tvalidateStatus: function () {\n\t\t// 使用async-await，处理reject情况较为繁琐，所以全部返回resolve，在业务代码中处理异常\n\t\treturn true\n\t},\n})\n```\n\n### 请求、响应处理\n在不使用 axios 的情况下，每次请求或者接受响应，都需要将请求或者响应序列化。\n\n而在 axios 中， `transformRequest` 允许在向服务器发送请求前，修改请求数据；`transformResponse` 在传递给 then/catch 前，允许修改响应数据。\n\n通过这两个钩子，可以省去大量重复的序列化代码。\n\n代码如下：\n\n```js\nconst service = axios.create({\n // 在向服务器发送请求前，序列化请求数据\n transformRequest: [function (data) {\n data = JSON.stringify(data)\n return data\n }],\n // 在传递给 then/catch 前，修改响应数据\n transformResponse: [function (data) {\n if (typeof data === 'string' && data.startsWith('{')) {\n data = JSON.parse(data)\n }\n return data\n }]\n})\n```\n\n### 拦截器\n拦截器，分为请求拦截器以及响应拦截器，分别在请求或响应被 then 或 catch 处理前拦截它们。\n\n之前提到过，由于 async-await 中 catch 难以处理的问题，所以将出错的情况也作为 resolve 状态进行处理。但这带来了一个问题，请求或响应出错的情况下，结果没有数据协议中定义的 msg 字段（消息）。所以，我们需要在出错的时候，手动生成一个符合返回格式的返回数据。\n\n由于，在业务中，没有需要在请求拦截器中做额外处理的需求，所以，请求拦截器的 resolve 状态，只需直接返回就可以了。\n\n请求拦截器代码如下：\n\n```js\n// 请求拦截器\nservice.interceptors.request.use((config) ={\n\treturn config\n}, (error) ={\n\t// 错误抛到业务代码\n error.data = {}\n error.data.msg = '服务器异常，请联系管理员！'\n return Promise.resolve(error)\n})\n```\n\n再来聊聊响应拦截器，还是之前的那个问题，除了请求或响应错误，还有一种情况也会导致返回的消息体不符合协议规范，那就是状态码不为 2 系列或 304 时。此时，我们还是需要做一样的处理——手动生成一个符合返回格式的返回数据。但是，有一点不一样，我们还需要根据不同的状态码生成不同的提示信息，以方便处理上线后的问题。\n\n响应拦截器代码如下：\n\n```js\n// 根据不同的状态码，生成不同的提示信息\nconst showStatus = (status) ={\n let message = ''\n // 这一坨代码可以使用策略模式进行优化\n switch (status) {\n case 400:\n message = '请求错误(400)'\n break\n case 401:\n message = '未授权，请重新登录(401)'\n break\n case 403:\n message = '拒绝访问(403)'\n break\n case 404:\n message = '请求出错(404)'\n break\n case 408:\n message = '请求超时(408)'\n break\n case 500:\n message = '服务器错误(500)'\n break\n case 501:\n message = '服务未实现(501)'\n break\n case 502:\n message = '网络错误(502)'\n break\n case 503:\n message = '服务不可用(503)'\n break\n case 504:\n message = '网络超时(504)'\n break\n case 505:\n message = 'HTTP版本不受支持(505)'\n break\n default:\n message = `连接出错(${status})!`\n }\n return `${message}，请检查网络或联系管理员！`\n}\n\n// 响应拦截器\nservice.interceptors.response.use((response) ={\n const status = response.status\n let msg = ''\n if (status < 200 || status >= 300) {\n // 处理http错误，抛到业务代码\n msg = showStatus(status)\n if (typeof response.data === 'string') {\n response.data = { msg }\n } else {\n response.data.msg = msg\n }\n }\n return response\n}, (error) ={\n // 错误抛到业务代码\n error.data = {}\n error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'\n return Promise.resolve(error)\n})\n```\n\n_tips：友情提示，上面那一坨 switch-case 代码，可以使用策略模式进行优化~_\n\n### 支持 TypeScript\n由于前段时间，我在部门内推了 TypeScript，为了满足自己的强迫症，将所有 js 文件改写为了 ts 文件。由于 axios 本身有 TypeScript 相关的支持，所以只需要把对应的类型导入，然后赋值即可。\n\n### 完整代码\n```ts\n// http.ts\nimport axios, { AxiosRequestConfig, AxiosResponse } from 'axios'\n\nconst showStatus = (status: number) ={\n let message = ''\n switch (status) {\n case 400:\n message = '请求错误(400)'\n break\n case 401:\n message = '未授权，请重新登录(401)'\n break\n case 403:\n message = '拒绝访问(403)'\n break\n case 404:\n message = '请求出错(404)'\n break\n case 408:\n message = '请求超时(408)'\n break\n case 500:\n message = '服务器错误(500)'\n break\n case 501:\n message = '服务未实现(501)'\n break\n case 502:\n message = '网络错误(502)'\n break\n case 503:\n message = '服务不可用(503)'\n break\n case 504:\n message = '网络超时(504)'\n break\n case 505:\n message = 'HTTP版本不受支持(505)'\n break\n default:\n message = `连接出错(${status})!`\n }\n return `${message}，请检查网络或联系管理员！`\n}\n\nconst service = axios.create({\n // 联调\n baseURL: process.env.NODE_ENV === 'production' ? `/` : '/apis',\n headers: {\n get: {\n 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'\n },\n post: {\n 'Content-Type': 'application/json;charset=utf-8'\n }\n },\n // 是否跨站点访问控制请求\n withCredentials: true,\n timeout: 30000,\n transformRequest: [(data) ={\n data = JSON.stringify(data)\n return data\n }],\n validateStatus () {\n // 使用async-await，处理reject情况较为繁琐，所以全部返回resolve，在业务代码中处理异常\n return true\n },\n transformResponse: [(data) ={\n if (typeof data === 'string' && data.startsWith('{')) {\n data = JSON.parse(data)\n }\n return data\n }]\n})\n\n// 请求拦截器\nservice.interceptors.request.use((config: AxiosRequestConfig) ={\n return config\n}, (error) ={\n // 错误抛到业务代码\n error.data = {}\n error.data.msg = '服务器异常，请联系管理员！'\n return Promise.resolve(error)\n})\n\n// 响应拦截器\nservice.interceptors.response.use((response: AxiosResponse) ={\n const status = response.status\n let msg = ''\n if (status < 200 || status >= 300) {\n // 处理http错误，抛到业务代码\n msg = showStatus(status)\n if (typeof response.data === 'string') {\n response.data = {msg}\n } else {\n response.data.msg = msg\n }\n }\n return response\n}, (error) ={\n // 错误抛到业务代码\n error.data = {}\n error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'\n return Promise.resolve(error)\n})\n\nexport default service\n```\n","tags":["工具"],"categories":["JS"]},{"title":"对称加密、非对称加密、摘要、数字签名、数字证书","url":"%2F2020%2F%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86%E3%80%81%E9%9D%9E%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86%E3%80%81%E6%91%98%E8%A6%81%E3%80%81%E6%95%B0%E5%AD%97%E7%AD%BE%E5%90%8D%E3%80%81%E6%95%B0%E5%AD%97%E8%AF%81%E4%B9%A6.html","content":"\n作为一个开发人员，或多或少都听说过对称加密、非对称加密、摘要、数字签名、数字证书这几个概念，它们是用来保证在互联网通信过程中数据传输安全的。有人可能会有疑惑，我给传输数\n据加个密不就安全了，为什么还要搞这么多花样出来？本文主要通过一个案例来讲解这几个概念的实际作用。\n\n在此之前，我先简单介绍一下这几个概念。\n## 对称加密\n对称加密是指用来加密和解密的是同一个秘钥。其特点是加密速度快，但是秘钥容易被黑客截获，所以安全性不高。密钥不可能一开始在发送方和接收方都全部生成好了 需要在一方生成之后传递给另一方 如果在传递过程密钥被劫持 整个加密就不安全了。常见的有AES、DES算法。\n\n## 非对称加密\n非对称加密是指用来加密和解密的是不同的秘钥，它们是成对出现的，称为公钥和私钥，知道其中一个秘钥是无法推导出另外一个秘钥的。用公钥加密的内容需要用私钥才能解密，用私钥加密\n的内容需要用公钥才能解密。非对称加密的特点是安全性高，缺点是加密速度慢。公钥对外公开 如果密文是私钥加密 那么任何人都能用公钥解密。常见的有RSA、ECC算法。\n\n## 混合加密\n在传递过程把我们的对称加密中的密钥用非对称加密的方式去传递就好了。\n![mix](http://cdn.mydearest.cn/blog/images/mix.png)\n\n## 摘要\n所谓的摘要就是一段信息或者一个文件通过某个哈希算法(也叫摘要算法)而得到的一串字符。摘要算法的特点就是不同的文件计算出的摘要是不同的(也有可能相同，但是可能性非常非常低)，\n比如一个1G的视频文件，哪怕只是改动其中一个字节，最后计算得到的摘要也是完全不同的，所以摘要算法通常是用来判断文件是否被篡改过。其还有一个特点就是通过摘要是无法推导出源文\n件的信息的。常用的摘要(散列)算法有MD5、SHA等。\n\n## 数字签名\n数字签名就是一个文件的摘要加密后的信息。数字签名是和源文件一起发送给接收方的，接收方收到后对文件用摘要算法算出一个摘要，然后和数字签名中的摘要进行比对，两者不一致的话说\n明文件被篡改了。\n\n## 数字证书\n数字证书是一个经证书授权中心生成的文件，数字证书里一般会包含公钥、公钥拥有者名称、CA的数字签名、有效期、授权中心名称、证书序列号等信息。其中CA的数字签名是验证证书是否被\n篡改的关键，它其实就是对证书里面除了CA的数字签名以外的内容进行摘要算法得到一个摘要，然后CA机构用他自己的私钥对这个摘要进行加密就生成了CA的数字签名，CA机构会公开它的公\n钥，验证证书时就是用这个公钥解密CA的数字签名，然后用来验证证书是否被篡改。\n\n---\n\n\n## 案例讲解\n场景：\n张三要找人装修一个房子，原则是谁的出价便宜就给谁装修，所以对于报价文件就是属于机密文件。下面我们来看下不同的方式传输报价文件都会有什么风险。\n\n### 通过对称加密有什么风险\n现在李四想接这个装修的活，他做了一份报价文件(文件名:lisi.txt，文件内容:报价50万)。然后李四用一个对称秘钥123对这个文件进行加密。最后李四将这个秘钥和加密的文件发给张三，\n张三收到后用这个秘钥解密，知道了李四的报价是50万。同时王五也想接这个装修的活，他本来是想报价55万的，但是又担心报价太高而丢掉这个活。恰巧王五是个黑客高手，于是他截获了李\n四发给张三的秘钥和加密文件，知道了李四报价是50万。最后王五将自己的报价改成了49万发给张三，结果王五接下了这个装修活。\n\n> 结论：用对称加密的话，一旦秘钥被黑客截获，加密就形同虚设，所以安全性比较低。\n\n### 如果用非对称加密会怎么样\n首先张三会生成一对秘钥，私钥是zhangsan1，公钥是zhangsan2，私钥张三自己保存，将公钥公布出去。\n\n李四将报价文件list.txt用张三公布的公钥zhangsan2进行加密后传给张三，然后张三用私钥zhangsan1进行解密得到李四的报价是50万。\n\n这个时候即使王五截获到了李四发给张三的报价文件，由于王五没有张三的私钥，所以他是无法解密文件的，也就无法知道李四的报价。最后王五因为报价55万而丢掉了这个装修的机会。\n\n所以用非对称加密是可以保证数据传输安全的。不过这里说一句题外话，既然非对称加密安全性高，那为什么不淘汰掉对称加密呢？其实关键就在于加密速度，非对称加密计算量很大，所以加\n密速度是很慢的，如果发送消息非常频繁，使用非对称加密的话就会对性能造成很大影响。所以在实际开发过程中通常是对称加密和非对称加密结合使用的。也就是对称加密的秘钥是用非对称\n加密后发送的，这样能保证对称加密的秘钥不被黑客截获，然后在发送业务数据时就用对称加密。这样既保证了安全性也保证了加密速度。\n\n> 结论：非对称加密可以防止黑客截获加密后的内容，安全性高。\n\n### 数字签名有什么用\n前面都说了非对称加密是安全的，那为什么还要数字签名呢？\n\n设想一下，王五截获了李四的报价文件，王五虽然无法知道李四的实际报价，但是他完全可以伪造一份李四的报价(文件名:lisi.txt，文件内容:报价60万)，然后将这份伪造文件用张三公布\n的公钥zhangsan2进行加密后替换原来的报价文件。张三收到后解密发现报价是60万，于是张三就以为李四报的价是60万，最后决定将装修的活给报价55万的王五来做。\n\n发生这个问题的关键就在于张三无法知道报价文件是否被篡改过。要解决这个问题就需要用到数字签名。首先李四需要自己生成一对非对称加密的秘钥，私钥lisi1自己保存，公钥lisi2发给张\n三。然后李四对自己的报价文件通过摘要算法得到一个摘要(假设摘要是aaa)，再用自己的私钥lisi1加密这个摘要就得到了报价文件的数字签名，最后将加密的报价文件和数字签名一起发给张\n三，张三收到后先用李四发过来的公钥lisi2解密数字签名得到摘要aaa，然后用自己的私钥zhangsan1解密加密的文件得到报价源文件，然后对报价源文件进行摘要算法，看计算得到的结果是\n不是aaa，如果不是aaa的话就说明报价文件被篡改了。\n\n在这种情况下，如果王五截获了李四发给张三的文件。王五是无法解密报价文件的。如果王五伪造一份报价文件的话，等张三收到后就会发现报价文件和数字签名不匹配。那王五能不能伪造报\n价文件的同时也伪造签名呢？因为王五没有李四的私钥，所以没法对伪造的报价文件的摘要进行加密，所以也就没法伪造签名。\n\n> 结论：非对称加密虽然能确保加密文件内容不被窃取，但不能保证文件不被篡改。数字签名就是用来验证文件是否被篡改过。\n\n### 数字证书有什么用\n既然非对称加密可以保证文件内容的安全性，数字签名又可以保证文件不被篡改，那还要数字证书有什么用呢？\n\n我们再来设想一下，王五自己也生成了一对用于非对称加密的秘钥，私钥是wangwu1，公钥是wangwu2。前面李四将自己的公钥lisi2发给张三的过程中被王五给截获了，王五用自己的公钥\nwangwu2替换了李四的公钥lisi2，所以张三最后收到的公钥实际上是王五的，但张三对这并不知情。后面李四发的数字签名和加密的报价文件都被王五截获，并且王五伪造了一份报价文件，同\n时用自己的私钥加密报价文件的摘要生成伪造的签名并发给张三，张三收到后进行验证发现数字签名和报价文件是匹配的，就以为这份报价文件是真实的。\n\n出现这个问题的关键就在于张三没法确认收到的公钥到底是不是李四发的，这个时候数字证书就起到作用了。李四到权威的数字证书机构申请数字证书，证书里面包含了公钥(lisi2)和公钥的\n拥有者(李四)等相关信息，然后李四将证书发给张三，张三通过证书里面的信息就可以知道公钥到底是不是李四的了。\n\n那证书在发送过程中有没有可能被王五截获并篡改呢？要知道证书里面还包含CA的数字签名，这个签名是证书机构用他们自己的私钥对证书的摘要进行加密的，而公钥是公开的。所以即便王五\n截获并篡改了证书内容，他也无法伪造证书机构的签名，张三在收到证书后通过验证签名也会发现证书被篡改了。\n","tags":["http"],"categories":["知识"]},{"title":"关于node的那些事(进阶篇)","url":"%2F2020%2F%E5%85%B3%E4%BA%8Enode%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B(%E8%BF%9B%E9%98%B6%E7%AF%87).html","content":"\n## 👨提问：注册路由时 app.get、app.use、app.all 的区别是什么？\n\n### app.use(path,callback)\n\n> app.use是express用来调用中间件的方法。中间件通常不处理请求和响应，一般只处理输入数据，并将其交给队列中的下一个处理程序，比如下面这个例子app.use\n('/user')，那么只要路径以 /user 开始即可匹配，如 /user/tree 就可以匹配。\n\n### app.all()\n\n> app.all 是路由中指代所有的请求方式，用作路由处理，匹配完整路径，在app.use之后可以理解为包含了app.get、app.post等的定义，比如app.all('/\nuser/tree'),能同时覆盖：get('/user/tree') 、 post('/user/tree')、 put('/user/tree') ,不过相对于app.use()的前缀匹配，它则是匹配具体的路\n由。\n\n`all完整匹配，use只匹配前缀`\n\n---\n\n\n## express response有哪些常用方法?\nexpress response对象是对Node.js原生对象ServerResponse的扩展，express response常见的有：res.end()、res.send()、res.render()、res.\nredirect()，而这几个有什么不同呢？更多请看文档[express Response](https://www.expressjs.com.cn/4x/api.html#res)\n\n### res.end()\n结束response - 如果服务端没有数据回传给客户端则可以直接用res.end返回，以此来结束响应过程。\n\n### res.send(body)\n如果服务端有数据可以使用res.send,可以忽略res.end，body参数可以是一个Buffer对象，一个String对象或一个Array。\n\n### res.render\nres.render用来渲染模板文件，也可以结合模版引擎来使用，下面看个简单的demo (express+ejs模版引擎)\n\n[node-ejs](http://cdn.mydearest.cn/blog/images/node-ejs.png)\n\n- 配置\n```js\napp.set('views', path.join(__dirname, 'views')); // views：模版文件存放的位置，默认是在项目根目录下\napp.set('view engine', 'ejs'); // view engine：使用什么模版引擎\n```\n\n其次是根据使用的模版引擎语法编写模版，最后通过res.render(view,locals, callback)导出，具体使用参数\n\n```\nview：模板的路径\nlocals：渲染模板时传进去的本地变量\ncallback：如果定义了回调函数，则当渲染工作完成时才被调用，返回渲染好的字符串（正确）或者错误信息 ❌\n```\n\n### res.redirect\n重定义到path所指定的URL，同时也可以重定向时定义好HTTP状态码（默认为302）\n```js\nres.redirect('http://baidu.com');\nres.redirect(301, 'http://baidu.com');\n```\n\n## node如何利用多核CPU以及创建集群?\n众所周知，nodejs是基于chrome浏览器的V8引擎构建的，一个nodejs进程只能使用一个CPU(一个CPU运行一个node实例)，举个例子：我们现在有一台8核的服务器，\n那么如果不利用多核CPU，是很一种浪费资源的行为，这个时候可以通过启动多个进程来利用多核CPU。\n\nNode.js给我们提供了cluster模块，用于nodejs多核处理，同时可以通过它来搭建一个用于负载均衡的node服务集群。创建多进程。\n\n> 本质还是通过 child_process.fork() 专门用于衍生新的 Node.js 进程,衍生的 Node.js 子进程独立于父进程，但两者之间建立的 IPC 通信通道除外， 每\n个进程都有自己的内存，带有自己的 V8 实例\n\n```js\nconst cluster = require('cluster')\nconst os = require('os')\nconst express = require('express')\nconst path = require('path')\nconst ejs = require('ejs')\nconst app = express()\n\nconst numCPUs = os.cpus().length\n\nif (cluster.isMaster) {\n for (let i =0 ;i {\n console.log(`worker ${worker.process.pid} died`)\n })\n} else {\n app.listen(3000, function(){\n console.log(`worker ${worker.process.pid} started`)\n })\n}\n// 一个端口被多个进程监听\n```\n\n```bash\nlsof -i -P -n | grep 3000\nps -ef | grep pid\n```\n\n## 开启多个子线程\n```js\nconst {\n Worker, isMainThread, parentPort, workerData\n} = require('worker_threads');\nconst worker = new Worker(__filename, {\n workerData: script\n});\n```\n\n- 线程间如何传输数据: parentPort postMessage on 发送监听消息\n- 共享内存： SharedArrayBuffer 通过这个共享内存\n\n- 在服务中若需要执行 shell 命令，那么就需要开启一个进程\n```js\nvar exec = require('child_process').exec;\nexec('ls', function(error, stdout, stderr){\n if(error) {\n console.error('error: ' + error);\n return;\n }\n console.log('stdout: ' + stdout);\n});\n```\n\n## node是怎样支持https?\nhttps实现，离不开证书，通过openssl生成公钥私钥（不做详细介绍），然后基于 express的 https模块 实现，设置options配置, options有两个选项，一个是\n证书本体，一个是密码。\n\n## node和客户端怎么解决跨域的问题？\napp.all('*',(req,res,next)=>{}) 效果相当于app.use((req,res,next)=>{}), 这也是app.all的一个比较常见的应用，就是用来处理跨域请求。\n```js\napp.all('*', function (req, res, next) {\n res.header('Access-Control-Allow-Origin', '*');\n res.header('Access-Control-Allow-Headers', 'X-Requested-With');\n res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');\n res.header('Content-Type', 'application/json;charset=utf-8');\n if (req.method == 'OPTIONS') {\n res.send(200);\n } else {\n next();\n }\n});\n```\n\n- cors模块\n\n## 两个node程序之间怎样交互?\n通过fork，原理是子程序用process.on来监听父程序的消息，用 process.send给子程序发消息，父程序里用child.on,child.send进行交互，来实现父进程和子\n进程互相发送消息。\n\n## 执行中间件（洋葱模型）\n我们通过 use 注册中间件，中间件函数有两个参数第一个是上下文，第二个是 next，在中间件函数执行过程中，若遇到 next() ，那么就会进入到下一个中间件中执\n行，下一个中间执行完成后，在返回上一个中间件执行 next() 后面的方法，这便是中间件的执行逻辑。\n\n## 介绍下 stream\n\n流在 nodejs 用的很广泛，但对于大部分开发者来说，更多的是使用流，比如说 HTTP 中的 request respond ，标准输入输出，文件读取\n（createReadStream）， gulp 构建工具等等。\n流，可以理解成是一个管道，比如读取一个文件，常用的方法是从硬盘读取到内存中，在从内存中读取，这种方式对于小文件没问题，但若是大文件，效率就非常低，还有\n可能内存不足，采用流的方式，就好像给大文件插上一根吸管，持续的一点点读取文件的内容，管道的另一端收到数据，就可以进行处理，了解 Linux 的朋友应该非常熟\n悉这个概念。\n\n\n- Node.js 中有四种基本的流类型：\n\n1. Writable - 可写入数据的流（例如 fs.createWriteStream()）。\n2. Readable - 可读取数据的流（例如 fs.createReadStream()）。\n3. Duplex - 可读又可写的流（例如 net.Socket）。\n4. Transform - 在读写过程中可以修改或转换数据的 Duplex 流（例如 zlib.createDeflate()）。接触比较多的还是第一二种pipe 来消费可读流\n\n```js\nconst fs = require('fs');\n// 直接读取文件\nfs.open('./xxx.js', 'r', (err, data) => {\n if (err) {\n console.log(err)\n }\n console.log(data)\n})\n// 流的方式读取、写入\nlet readStream = fs.createReadStream('./a.js');\nlet writeStream = fs.createWriteStream('./b.js')\nreadStream.pipe(writeStream).on('data', (chunk) => { // 可读流被可写流消费\n console.log(chunk)\n writeStream.write(chunk);\n}).on('finish', () => console.log('finish'))\n```\n\n","tags":["NodeJS"],"categories":["Node"]},{"title":"实现图片懒加载","url":"%2F2020%2F%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD.html","content":"\n## 前言\n图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名\n下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。 \n\n[效果预览](http://cdn.mydearest.cn/blog/images/lazyload.png)\n\n---\n\n## 如何做\n\n### 步骤一\n首先我们需要让我们html中需要懒加载的img标签的src设置缩略图或者不设置src，然后自定义一个属性，值为真正的图片或者原图的地址（比如下面的data-src），\n并且定义一个类名，表示该图片是需要懒加载的（比如下面例子的lazy-image），这有两个作用：\n\n1. 为以后获取需要懒加载图片的img元素 \n2. 可以给这个类名设置背景图片，作为图片未加载前的过度图片，比如显示为loading的图片。\n\n```js\n \n// css部分 \n.lazy-image { \n background: url('../img/loading.gif') no-repeat center; \n}\n```\n\n### 步骤二\n页面加载完后，我们需要获取所有需要懒加载的图片的元素集合，判断是否在可视区域，如果是在可视区域的话，设置元素的src属性值为真正图片的地址。\n\n```js\ninViewShow() { \n let imageElements = Array.prototype.slice.call(document.querySelectorAll('.lazy-image')) \n let len = imageElements.length \n for(let i = 0; i < len; i++) { \n let imageElement = imageElements[i] \n const rect = imageElement.getBoundingClientRect() // 出现在视野的时候加载图片 \n if(rect.top < document.documentElement.clientHeight) { \n imageElement.src = imageElement.dataset.src // 移除掉已经显示的 \n imageElements.splice(i, 1) \n len-- \n i-- \n } \n } \n}\n```\n这里判断是否出现在可视区域内，是通过获取元素的getBoundingClientRect属性的top值和页面的clientHeight进行对比，如果top值小于clientHeight，则说\n明元素出现在可视区域了。BoundingClientRect是获取某个元素相对于视窗的位置集合，见下图，注意bottom和right和我们平时的bottom和right不一样。 \n\n[lazyload2](http://cdn.mydearest.cn/blog/images/lazyload2.png)\n\n### 步骤三\n用户滚动窗口的时候，遍历所有需要懒加载的元素，通过每个元素的BoundingClientRect属性来判断元素是否出现在可视区域内，判断方法同第二步一样。 \n\n```js\ndocument.addEventListener('scroll', inViewShow)\n```\n\n这里我们可以优化下，可以通过函数节流优化滚动事件的处理函数。\n\n\n### 补充-利用高级特性Intersection Observer来判断元素是否可见。\n上面我们利用元素的BoundingClientRect的top属性和body的clientHeight来判断元素是否可见，这种传统方式获取元素是否可见的一个缺点是我们还需要绑定\nscroll事件，scroll事件是伴随着大量计算的，会造成资源浪费，虽然我们可以通过节流函数来提高性能，但还是会有性能浪费的问题，而Intersection Observer\n可以不用监听scroll事件，做到元素一可见便调用回调，在回调里面我们来判断元素是否可见。\n\n```js\nif (\"IntersectionObserver\" in window) { \n let lazyImageObserver = new IntersectionObserver((entries, observer) => { \n entries.forEach((entry, index) => { \n // 如果元素可见 \n if (entry.intersectionRatio > 0) { \n let lazyImage = entry.target \n lazyImage.src = lazyImage.dataset.src \n lazyImage.classList.remove(\"lazy-image\") \n lazyImageObserver.unobserve(lazyImage) \n // this.lazyImages.splice(index, 1) \n } \n }) \n }) \n this.lazyImages.forEach(function(lazyImage) { \n lazyImageObserver.observe(lazyImage); \n }) \n}\n```\n\n## 仓库代码\n[lazyload](/~https://github.com/cosyer/jelly/tree/gh-pages/lazyload)\n\n[在线预览](https://cosyer.github.io/jelly/lazyload/)\n","tags":["优化"],"categories":["工具"]},{"title":"超详细的TypeScript教程","url":"%2F2020%2F%E8%B6%85%E8%AF%A6%E7%BB%86%E7%9A%84TypeScript%E6%95%99%E7%A8%8B.html","content":"\n# typescript\n[TypeScript](https://www.typescriptlang.org/) 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。\n\n## 区别\n|TypeScript|JavaScript|\n|:---:|:---:|\n|JavaScript 的超集用于解决大型项目的代码复杂性|一种脚本语言，用于创建动态网页|\n|可以在编译期间发现并纠正错误|作为一种解释型语言，只能在运行时发现错误|\n|强类型，支持静态和动态类型|弱类型，没有静态类型选项|\n|最终被编译成 JavaScript 代码，使浏览器可以理解|可以直接在浏览器中使用|\n|支持模块、泛型和接口|不支持模块，泛型或接口|\n|支持 ES3，ES4，ES5 和 ES6 等|不支持编译其他 ES3，ES4，ES5 或 ES6 功能|\n|社区的支持仍在增长，而且还不是很大|大量的社区支持以及大量文档和解决问题的支持|\n\n### 安装\n```js\nnpm install -g typescript\n```\n\n### 编译\n```js\ntsc helloworld.ts\n// helloworld.ts => helloworld.js\n```\n\n[在线学习语法和特性](https://www.typescriptlang.org/play)\n\n---\n\n\n## 类型 (11种)\n### Boolean\n```js\nlet isDone: boolean = false;\n// ES5：var isDone = false;\n```\n\n### Number\n```js\nlet count: number = 10;\n// ES5：var count = 10;\n```\n\n### String\n```js\nlet name: string = \"cosyer\";\n// ES5：var name = 'cosyer';\n```\n\n### Array\n```js\nlet list: number[] = [1, 2, 3];\n// ES5：var list = [1,2,3];\n\nlet list: Array = [1, 2, 3]; // Array泛型语法\n// ES5：var list = [1,2,3];\n```\n\n### Enum\n使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript 支持数字的和基于字符串的枚举。\n#### 数字枚举\n```js\nenum Direction {\n NORTH,\n SOUTH,\n EAST,\n WEST,\n}\n\nlet dir: Direction = Direction.NORTH;\n```\n默认情况下，NORTH 的初始值为 0，其余的成员会从 1 开始自动增长。换句话说，Direction.SOUTH 的值为 1，Direction.EAST 的值为 2，Direction.WEST 的值为 3。上面的枚举示例代码经过编译后会生成以下代码：\n```js\n\"use strict\";\nvar Direction;\n(function (Direction) {\n Direction[(Direction[\"NORTH\"] = 0)] = \"NORTH\";\n Direction[(Direction[\"SOUTH\"] = 1)] = \"SOUTH\";\n Direction[(Direction[\"EAST\"] = 2)] = \"EAST\";\n Direction[(Direction[\"WEST\"] = 3)] = \"WEST\";\n})(Direction || (Direction = {}));\nvar dir = Direction.NORTH;\n```\n也可以设置 NORTH 的初始值，比如：\n```js\nenum Direction {\n NORTH = 3,\n SOUTH,\n EAST,\n WEST,\n}\n```\n\n#### 字符串枚举\n```js\nenum Direction {\n NORTH = \"NORTH\",\n SOUTH = \"SOUTH\",\n EAST = \"EAST\",\n WEST = \"WEST\",\n}\n```\n编译生成：\n```js\n\"use strict\";\nvar Direction;\n(function (Direction) {\n Direction[\"NORTH\"] = \"NORTH\";\n Direction[\"SOUTH\"] = \"SOUTH\";\n Direction[\"EAST\"] = \"EAST\";\n Direction[\"WEST\"] = \"WEST\";\n})(Direction || (Direction = {}));\n```\n\n#### 异构枚举\n异构枚举的成员值是数字和字符串的混合：\n```js\nenum Enum {\n A,\n B,\n C = \"C\",\n D = \"D\",\n E = 8,\n F,\n}\n```\n编译生成：\n```js\n\"use strict\";\nvar Enum;\n(function (Enum) {\n Enum[Enum[\"A\"] = 0] = \"A\";\n Enum[Enum[\"B\"] = 1] = \"B\";\n Enum[\"C\"] = \"C\";\n Enum[\"D\"] = \"D\";\n Enum[Enum[\"E\"] = 8] = \"E\";\n Enum[Enum[\"F\"] = 9] = \"F\";\n})(Enum || (Enum = {}));\n```\n数字枚举相对字符串枚举多了 “反向映射”：\n```js\nconsole.log(Enum.A) //输出：0\nconsole.log(Enum[0]) // 输出：A\n```\n\n### Any\n在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型（也被称作全局超级类型）。\n```js\nl et notSure: any = 666;\nnotSure = \"cosyer\";\nnotSure = false;\n```\nany 类型本质上是类型系统的一个逃逸舱。作为开发者，这给了我们很大的自由：TypeScript 允许我们对 any 类型的值执行任何操作，而无需事先执行任何形式的检查。\n```js\nlet value: any;\n\nvalue.foo.bar; // OK\nvalue.trim(); // OK\nvalue(); // OK\nnew value(); // OK\nvalue[0][1]; // OK\n```\n在许多场景下，这太宽松了。使用 any 类型，可以很容易地编写类型正确但在运行时有问题的代码。如果我们使用 any 类型，就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题，TypeScript 3.0 引入了 unknown 类型。AnyScript 2333.\n\n### Unknown\n就像所有类型都可以赋值给 any，所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型（另一种是 any）。下面我们来看一下 unknown 类型的使用示例：\n```js\nlet value: unknown;\n\nvalue = true; // OK\nvalue = 42; // OK\nvalue = \"Hello World\"; // OK\nvalue = []; // OK\nvalue = {}; // OK\nvalue = Math.random; // OK\nvalue = null; // OK\nvalue = undefined; // OK\nvalue = new TypeError(); // OK\nvalue = Symbol(\"type\"); // OK\n```\n\n对 value 变量的所有赋值都被认为是类型正确的。但是，当我们尝试将类型为 unknown 的值赋值给其他类型的变量时会发生什么？\n\n```js\nlet value: unknown;\n\nlet value1: unknown = value; // OK\nlet value2: any = value; // OK\nlet value3: boolean = value; // Error\nlet value4: number = value; // Error\nlet value5: string = value; // Error\nlet value6: object = value; // Error\nlet value7: any[] = value; // Error\nlet value8: Function = value; // Error\n```\nunknown 类型只能被赋值给 any 类型和 unknown 类型本身。直观地说，这是有道理的：只有能够保存任意类型值的容器才能保存 unknown 类型的值。毕竟我们不知道变量 value 中存储了什么类型的值。\n\n将 value 变量类型设置为 unknown 后，这些操作都不再被认为是类型正确的。通过将 any 类型改变为 unknown 类型，我们已将允许所有更改的默认设置，更改为禁止任何更改。\n\n### Tuple\n众所周知，数组一般由同种类型的值组成，但有时我们需要在单个变量中存储不同类型的值，这时候我们就可以使用元组。在 JavaScript 中是没有元组的，元组是 TypeScript 中特有的类型，其工作方式类似于数组。\n\n元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。使用元组时，必须提供每个属性的值。为了更直观地理解元组的概念，我们来看一个具体的例子：\n```js\nlet tupleType: [string, boolean]; // 强制类型匹配\ntupleType = [\"cosyer\", true];\n```\n\n### Void\n某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：\n```js\n// 声明函数返回值为void\nfunction warnUser(): void {\n console.log(\"This is my warning message\");\n}\n```\n\n需要注意的是，声明一个 void 类型的变量没有什么作用，因为它的值只能为 undefined 或 null：\n```js\nlet unusable: void = undefined;\n```\n\n### Null/Undefined\nTypeScript 里，undefined 和 null 两者有各自的类型分别为 undefined 和 null。\n```js\nlet u: undefined = undefined;\nlet n: null = null;\n```\n默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。然而，如果你指定了--strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自的类型。\n\n### Never\nnever 类型表示的是那些永不存在的值的类型。 例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。\n\n```js\n// 返回never的函数必须存在无法达到的终点\nfunction error(message: string): never {\n throw new Error(message);\n}\n\nfunction infiniteLoop(): never {\n while (true) {}\n}\n```\n\n在 TypeScript 中，可以利用 never 类型的特性来实现全面性检查，具体示例如下：\n```js\ntype Foo = string | number;\n\nfunction controlFlowAnalysisWithNever(foo: Foo) {\n if (typeof foo === \"string\") {\n // 这里 foo 被收窄为 string 类型\n } else if (typeof foo === \"number\") {\n // 这里 foo 被收窄为 number 类型\n } else {\n // foo 在这里是 never\n const check: never = foo;\n }\n}\n```\n\n注意在 else 分支里面，我们把收窄为 never 的 foo 赋值给一个显示声明的 never 变量。如果一切逻辑正确，那么这里应该能够编译通过。但是假如后来有一天你的同事修改了 Foo 的类型：\ntype Foo = string | number | boolean;\n复制代码然而他忘记同时修改 controlFlowAnalysisWithNever 方法中的控制流程，这时候 else 分支的 foo 类型会被收窄为 boolean 类型，导致无法赋值给 never 类型，这时就会产生一个编译错误。通过这个方式，我们可以确保\ncontrolFlowAnalysisWithNever 方法总是穷尽了 Foo 的所有可能类型。 通过这个示例，我们可以得出一个结论：`使用 never 避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码。`\n\n## 类型断言\n### 尖括号\n```js\nlet someValue: any = \"this is a string\";\nlet strLength: number = (someValue).length;\n```\n\n### as\n```js\nlet someValue: any = \"this is a string\";\nlet strLength: number = (someValue as string).length;\n```\n\n## 类型守卫\n类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。目前主要有四种的方式来实现类型保护：\n\n### in 关键字\n```js\ninterface Admin {\n name: string;\n privileges: string[];\n}\n\ninterface Employee {\n name: string;\n startDate: Date;\n}\n\ntype UnknownEmployee = Employee | Admin;\n\nfunction printEmployeeInformation(emp: UnknownEmployee) {\n console.log(\"Name: \" + emp.name);\n if (\"privileges\" in emp) {\n console.log(\"Privileges: \" + emp.privileges);\n }\n if (\"startDate\" in emp) {\n console.log(\"Start Date: \" + emp.startDate);\n }\n}\n```\n\n### typeof 关键字\n```js\nfunction padLeft(value: string, padding: string | number) {\n if (typeof padding === \"number\") {\n return Array(padding + 1).join(\" \") + value;\n }\n if (typeof padding === \"string\") {\n return padding + value;\n }\n throw new Error(`Expected string or number, got '${padding}'.`);\n}\n```\ntypeof 类型保护只支持两种形式：typeof v === \"typename\" 和 typeof v !== typename，\"typename\" 必须是 \"number\"， \"string\"， \"boolean\" 或 \"symbol\"。 但是 TypeScript 并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。\n\n### instanceof 关键字\n```js\ninterface Padder {\n getPaddingString(): string;\n}\n\nclass SpaceRepeatingPadder implements Padder {\n constructor(private numSpaces: number) {}\n getPaddingString() {\n return Array(this.numSpaces + 1).join(\" \");\n }\n}\n\nclass StringPadder implements Padder {\n constructor(private value: string) {}\n getPaddingString() {\n return this.value;\n }\n}\n\nlet padder: Padder = new SpaceRepeatingPadder(6);\n\nif (padder instanceof SpaceRepeatingPadder) {\n // padder的类型收窄为 'SpaceRepeatingPadder'\n}\n```\n\n### 自定义类型保护的类型谓词\n```js\nfunction isNumber(x: any): x is number {\n return typeof x === \"number\";\n}\n\nfunction isString(x: any): x is string {\n return typeof x === \"string\";\n}\n```\n\n## 联合类型和类型别名\n### 联合类型\n联合类型通常与 null 或 undefined 一起使用：\n```js\nconst sayHello = (name: string | undefined) => {\n /* ... */\n};\n```\n例如，这里 name 的类型是 string | undefined 意味着可以将 string 或 undefined 的值传递给sayHello 函数。\n```js\nsayHello(\"cosyer\");\nsayHello(undefined);\n```\n\n### 可辨识联合\n\nTypeScript 可辨识联合（Discriminated Unions）类型，也称为代数数据类型或标签联合类型。它包含 3 个要点：`可辨识、联合类型和类型守卫。`\n\n这种类型的本质是结合联合类型和字面量类型的一种类型保护方法。`如果一个类型是多个类型的联合类型，且多个类型含有一个公共属性，那么就可以利用这个公共属性，来创建不同的类型保护区块。`\n\n#### 可辨识\n可辨识要求联合类型中的每个元素都含有一个单例类型属性(公共属性)，比如：\n```js\nenum CarTransmission {\n Automatic = 200,\n Manual = 300\n}\n\ninterface Motorcycle {\n vType: \"motorcycle\"; // discriminant\n make: number; // year\n}\n\ninterface Car {\n vType: \"car\"; // discriminant\n transmission: CarTransmission\n}\n\ninterface Truck {\n vType: \"truck\"; // discriminant\n capacity: number; // in tons\n}\n```\n在上述代码中，我们分别定义了 Motorcycle、 Car 和 Truck 三个接口，在这些接口中都包含一个 vType 属性，该属性被称为可辨识的属性，而其它的属性只跟特性的接口相关。\n\n#### 联合类型\n基于前面定义了三个接口，我们可以创建一个 Vehicle 联合类型：\n```js\ntype Vehicle = Motorcycle | Car | Truck;\n```\n现在我们就可以开始使用 Vehicle 联合类型，对于 Vehicle 类型的变量，它可以表示不同类型的车辆。\n\n#### 类型守卫\n下面我们来定义一个 evaluatePrice 方法，该方法用于根据车辆的类型、容量和评估因子来计算价格，具体实现如下：\n```js\nconst EVALUATION_FACTOR = Math.PI; \nfunction evaluatePrice(vehicle: Vehicle) {\n return vehicle.capacity * EVALUATION_FACTOR;\n}\n\nconst myTruck: Truck = { vType: \"truck\", capacity: 9.5 };\nevaluatePrice(myTruck);\n```\n对于以上代码，TypeScript 编译器将会提示以下错误信息：\n```js\nProperty 'capacity' does not exist on type 'Vehicle'.\nProperty 'capacity' does not exist on type 'Motorcycle'.\n```\n\n原因是在 Motorcycle 接口中，并不存在 capacity 属性，而对于 Car 接口来说，它也不存在 capacity 属性。那么，现在我们应该如何解决以上问题呢？这时，我们可以使用类型守卫。下面我们来重构一下前面定义的 evaluatePrice 方法，重构后的代码如下：\n```js\nfunction evaluatePrice(vehicle: Vehicle) {\n switch(vehicle.vType) {\n case \"car\":\n return vehicle.transmission * EVALUATION_FACTOR;\n case \"truck\":\n return vehicle.capacity * EVALUATION_FACTOR;\n case \"motorcycle\":\n return vehicle.make * EVALUATION_FACTOR;\n }\n}\n```\n\n### 类型别名\n类型别名用来给一个类型起个新名字(alias)。\n```js\ntype Message = string | string[];\n\nlet greet = (message: Message) => {\n // ...\n};\n```\n\n## 交叉类型\nTypeScript 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。\n\n```js\ninterface IPerson {\n id: string;\n age: number;\n}\n\ninterface IWorker {\n companyId: string;\n}\n\ntype IStaff = IPerson & IWorker;\n\nconst staff: IStaff = {\n id: 'E1006',\n age: 33,\n companyId: 'EFT'\n};\n\nconsole.dir(staff)\n```\n在上面示例中，我们首先为 IPerson 和 IWorker 类型定义了不同的成员，然后通过 & 运算符定义了 IStaff 交叉类型，所以该类型同时拥有 IPerson 和 IWorker 这两种类型的成员。\n\n## 函数\n### 区别\n|TypeScript|JavaScript|\n|:---:|:---:|\n|含有类型|无类型|\n|箭头函数|箭头函数（ES2015）|\n|函数类型|无函数类型|\n|必填和可选参数|所有参数都是可选的|\n|默认参数|默认参数|\n|剩余参数|剩余参数|\n|函数重载|无函数重载|\n\n### 箭头函数\n简单看下示例，详细可见[JavaScript 中 this 的详解](https://mydearest.cn/jsthis.html)\n```js\nmyBooks.forEach(() => console.log('reading'));\n\nmyBooks.forEach(title => console.log(title));\n\nmyBooks.forEach((title, idx, arr) =>\n console.log(idx + '-' + title);\n);\n\nmyBooks.forEach((title, idx, arr) => {\n console.log(idx + '-' + title);\n});\n```\n\n### 参数类型和返回类型\n```js\nfunction createUserId(name: string, id: number): string {\n return name + id;\n}\n```\n\n### 函数类型\n```js\nlet IdGenerator: (chars: string, nums: number) => string;\n\nfunction createUserId(name: string, id: number): string {\n return name + id;\n}\n\nIdGenerator = createUserId;\n```\n\n### 可选参数和默认参数\n```js\n// 可选参数\nfunction createUserId(name: string, id: number, age?: number): string {\n return name + id;\n}\n\n// 默认参数\nfunction createUserId(\n name: string = \"cosyer\",\n id: number,\n age?: number\n): string {\n return name + id;\n}\n```\n在声明函数时，可以通过 ? 号来定义可选参数，比如 age?: number 这种形式。在实际使用时，需要注意的是可选参数要放在普通参数的后面，不然会导致编译错误。\n\n### 剩余参数\n```js\nfunction push(array, ...items) {\n items.forEach(function (item) {\n array.push(item);\n });\n}\n\nlet a = [];\npush(a, 1, 2, 3);\n```\n\n### 函数重载\n函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。要解决前面遇到的问题，方法就是为同一个函数提供多个函数类型定义来进行函数重载，编译器会根据这个列表去处理函数的调用。\n```js\nfunction add(a: number, b: number): number;\nfunction add(a: string, b: string): string;\nfunction add(a: string, b: number): string;\nfunction add(a: number, b: string): string;\nfunction add(a: Combinable, b: Combinable) {\n if (typeof a === \"string\" || typeof b === \"string\") {\n return a.toString() + b.toString();\n }\n return a + b;\n}\n```\n\n方法重载是指在同一个类中方法同名，参数不同（参数类型不同、参数个数不同或参数个数相同时参数的先后顺序不同），调用时根据实参的形式，选择与它匹配的方法执行操作的一种技术。所以类中成员方法满足重载的条件是：在同一个类中，方法名相同且参数列表不同。下面我们来举一个成员方法重载的例子：\n```js\nclass Calculator {\n add(a: number, b: number): number;\n add(a: string, b: string): string;\n add(a: string, b: number): string;\n add(a: number, b: string): string;\n add(a: Combinable, b: Combinable) {\n if (typeof a === \"string\" || typeof b === \"string\") {\n return a.toString() + b.toString();\n }\n return a + b;\n }\n}\n\nconst calculator = new Calculator();\nconst result = calculator.add(\"cosyer\", \" chenyu\");\n```\n这里需要注意的是，当 TypeScript 编译器处理函数重载时，它会查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。另外在 Calculator 类中，add(a: Combinable, b: Combinable){ } 并不是重载列表的一部分，因此对于 add 成员方法来说，我们只定义了四个重载方法。\n\n## 数组\n### 数组解构\n```js\nlet x: number; let y: number; let z: number;\nlet five_array = [0,1,2,3,4];\n[x,y,z] = five_array; // 0 1 2\n```\n\n### 扩展运算符\n```js\nlet two_array = [0, 1];\nlet five_array = [...two_array, 2, 3, 4];\n```\n\n### 数组遍历\n```js\nlet colors: string[] = [\"red\", \"green\", \"blue\"];\nfor (let i of colors) {\n console.log(i);\n}\n```\n\n## 对象\n### 对象解构\n```js\nlet person = {\n name: \"cosyer\",\n gender: \"Male\",\n};\n\nlet { name, gender } = person;\n```\n\n### 对象展开扩展\n```js\nlet person = {\n name: \"cosyer\",\n gender: \"Male\",\n address: \"Nanjing\",\n};\n\n// 组装对象\nlet personWithAge = { ...person, age: 33 };\n\n// 获取除了某些项外的其它项\nlet { name, ...rest } = person;\n```\n\n## 接口\n\n在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。\n\nTypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述\n\n### 对象的形状(描述)\n```js\ninterface Person {\n name: string;\n age: number;\n}\n\nlet cosyer: Person = {\n name: \"cosyer\",\n age: 25,\n};\n```\n\n### 可选、只读属性\n```js\ninterface Person {\n readonly name: string;\n age?: number;\n}\n```\n只读属性用于限制只能在对象刚刚创建的时候修改其值。此外 TypeScript 还提供了 ReadonlyArray 类型，它与 Array 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。\n\n```js\nlet a: number[] = [1, 2, 3, 4];\nlet ro: ReadonlyArray = a;\nro[0] = 12; // error!\nro.push(5); // error!\nro.length = 100; // error!\na = ro; // error!\n```\n\n\n## 泛型\n软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。\n\n> 在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。\n\n设计泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。\n\n泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。\n\n### 泛型接口\n```js\ninterface GenericIdentityFn {\n (arg: T): T;\n}\n```\n\n### 泛型类\n```js\nclass GenericNumber {\n zeroValue: T;\n add: (x: T, y: T) => T;\n}\n\nlet myGenericNumber = new GenericNumber();\nmyGenericNumber.zeroValue = 0;\nmyGenericNumber.add = function (x, y) {\n return x + y;\n};\n```\n\n### 泛型变量\n对刚接触 TypeScript 泛型的小伙伴来说，看到 T 和 E，还有 K 和 V 这些泛型变量时，估计会一脸懵逼。其实这些大写字母并没有什么本质的区别，只不过是一个约定好的规范而已。也就是说使用大写字母 A-Z 定义的类型变量都属于泛型，把 T 换成 A，也是一样的。下面我们介绍一下一些常见泛型变量代表的意思：\n\n- T（Type）：表示一个 TypeScript 类型\n- K（Key）：表示对象中的键类型\n- V（Value）：表示对象中的值类型\n- E（Element）：表示元素类型\n\n### 泛型工具类型(6种)\n为了方便开发者 TypeScript 内置了一些常用的工具类型，比如 Partial、Required、Readonly、Record 和 ReturnType 等。\n#### type\ntypeof 操作符可以用来获取一个变量声明或对象的类型。\n```js\ninterface Person {\n name: string;\n age: number;\n}\n\nconst cosyer: Person = { name: 'cosyer', age: 25 };\ntype Cosyer= typeof cosyer; // -> Person\n\nfunction toArray(x: number): Array {\n return [x];\n}\n\ntype Func = typeof toArray; // -> (x: number) => number[]\n```\n\n#### keyof\nkeyof 操作符可以用来一个对象中的所有 key 值：\n```js\ninterface Person {\n name: string;\n age: number;\n}\n\ntype K1 = keyof Person; // \"name\" | \"age\"\ntype K2 = keyof Person[]; // \"length\" | \"toString\" | \"pop\" | \"push\" | \"concat\" | \"join\" \ntype K3 = keyof { [x: string]: Person }; // string | number\n```\n\n#### in\nin 用来遍历枚举类型：\n```js\ntype Keys = \"a\" | \"b\" | \"c\"\n\ntype Obj = {\n [p in Keys]: any\n} // -> { a: any, b: any, c: any }\n```\n\n#### infer\n在条件类型语句中，可以用 infer 声明一个类型变量并且对它进行使用。\n```js\ntype ReturnType = T extends (\n ...args: any[]\n) => infer R ? R : any;\n```\n以上代码中 infer R 就是声明一个变量来承载传入函数签名的返回值类型，简单说就是用它取到函数返回值的类型方便之后使用。\n\n#### extends\n有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过 extends 关键字添加泛型约束。\n```js\ninterface ILengthwise {\n length: number;\n}\n\nfunction loggingIdentity(arg: T): T {\n console.log(arg.length);\n return arg;\n}\n```\n```js\n// error, number doesn't have a .length property\nloggingIdentity(3)\n\nloggingIdentity({length: 10, value: 3});\n```\n\n#### Partial\nPartial 的作用就是将某个类型里的属性全部变为可选项 ?。\n```js\n/**\n * node_modules/typescript/lib/lib.es5.d.ts\n * Make all properties in T optional\n */\ntype Partial = {\n [P in keyof T]?: T[P];\n};\n```\n\n```js\ninterface Todo {\n title: string;\n description: string;\n}\n\nfunction updateTodo(todo: Todo, fieldsToUpdate: Partial) {\n return { ...todo, ...fieldsToUpdate };\n}\n\nconst todo1 = {\n title: \"organize desk\",\n description: \"clear clutter\",\n};\n\nconst todo2 = updateTodo(todo1, {\n description: \"throw out trash\",\n});\n```\n\n## 装饰器\n### 装饰器是什么\n- 它是一个表达式\n- 该表达式被执行后，返回一个函数\n- 函数的入参分别为 target、name 和 descriptor\n- 执行该函数后，可能返回 descriptor 对象，用于配置 target 对象\n\n### 装饰器的分类\n- 类装饰器（Class decorators）\n- 属性装饰器（Property decorators）\n- 方法装饰器（Method decorators）\n- 参数装饰器（Parameter decorators）\n\n#### 类装饰器\n```js\ndeclare type ClassDecorator = (\n target: TFunction\n) => TFunction | void;\n```\n类装饰器顾名思义，就是用来装饰类的。它接收一个参数：\n- target: TFunction - 被装饰的类\n```js\nfunction Greeter(target: Function): void {\n target.prototype.greet = function (): void {\n console.log(\"Hello cosyer!\");\n };\n}\n\n@Greeter\nclass Greeting {\n constructor() {\n // 内部实现\n }\n}\n\nlet myGreeting = new Greeting();\nmyGreeting.greet(); // console output: 'Hello cosyer!';\n```\n\n`自定义参数`\n```js\nfunction Greeter(greeting: string) {\n return function (target: Function) {\n target.prototype.greet = function (): void {\n console.log(greeting);\n };\n };\n}\n\n@Greeter(\"Hello TS!\")\nclass Greeting {\n constructor() {\n // 内部实现\n }\n}\n\nlet myGreeting = new Greeting();\nmyGreeting.greet(); // console output: 'Hello TS!';\n```\n\n#### 属性装饰器\n```js\ndeclare type PropertyDecorator = (target:Object, \n propertyKey: string | symbol ) => void;\n```\n\n属性装饰器顾名思义，用来装饰类的属性。它接收两个参数：\n- target: Object - 被装饰的类\n- propertyKey: string | symbol - 被装饰类的属性名\n\n```js\nfunction logProperty(target: any, key: string) {\n delete target[key];\n\n const backingField = \"_\" + key;\n\n Object.defineProperty(target, backingField, {\n writable: true,\n enumerable: true,\n configurable: true\n });\n\n // property getter\n const getter = function (this: any) {\n const currVal = this[backingField];\n console.log(`Get: ${key} => ${currVal}`);\n return currVal;\n };\n\n // property setter\n const setter = function (this: any, newVal: any) {\n console.log(`Set: ${key} => ${newVal}`);\n this[backingField] = newVal;\n };\n\n // Create new property with getter and setter\n Object.defineProperty(target, key, {\n get: getter,\n set: setter,\n enumerable: true,\n configurable: true\n });\n}\n\nclass Person { \n @logProperty\n public name: string;\n\n constructor(name : string) { \n this.name = name;\n }\n}\n\nconst p1 = new Person(\"cosyer\");\np1.name = \"chenyu\";\n// Set: name => cosyer\n// Set: name => chenyu\n```\n\n#### 方法装饰器\n```js\ndeclare type MethodDecorator = (target:Object, propertyKey: string | symbol, \t \t\n descriptor: TypePropertyDescript) => TypedPropertyDescriptor | void;\n```\n\n方法装饰器顾名思义，用来装饰类的方法。它接收三个参数：\n- target: Object - 被装饰的类\n- propertyKey: string | symbol - 方法名\n- descriptor: TypePropertyDescript - 属性描述符\n\n```js\nfunction LogOutput(tarage: Function, key: string, descriptor: any) {\n let originalMethod = descriptor.value;\n let newMethod = function(...args: any[]): any {\n let result: any = originalMethod.apply(this, args);\n if(!this.loggedOutput) {\n this.loggedOutput = new Array();\n }\n this.loggedOutput.push({\n method: key,\n parameters: args,\n output: result,\n timestamp: new Date()\n });\n return result;\n };\n descriptor.value = newMethod;\n}\n\nclass Calculator {\n @LogOutput\n double (num: number): number {\n return num * 2;\n }\n}\n\nlet calc = new Calculator();\ncalc.double(11);\n// console ouput: [{method: \"double\", output: 22, ...}]\nconsole.log(calc.loggedOutput); \n```\n\n#### 参数装饰器\n```js\ndeclare type ParameterDecorator = (target: Object, propertyKey: string | symbol, \n parameterIndex: number ) => void\n```\n参数装饰器顾名思义，是用来装饰函数参数，它接收三个参数：\n- target: Object - 被装饰的类\n- propertyKey: string | symbol - 方法名\n- parameterIndex: number - 方法中参数的索引值\n\n```js\nfunction Log(target: Function, key: string, parameterIndex: number) {\n let functionLogged = key || target.prototype.constructor.name;\n console.log(`The parameter in position ${parameterIndex} at ${functionLogged} has\n\tbeen decorated`);\n}\n\nclass Greeter {\n greeting: string;\n constructor(@Log phrase: string) {\n\tthis.greeting = phrase; \n }\n}\n\n// console output: The parameter in position 0 \n// at Greeter has been decorated\n```\n\n\n## 类\n### 类的属性和方法\n在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。\n```js\nclass Greeter {\n // 静态属性\n static cname: string = \"Greeter\";\n // 成员属性\n greeting: string;\n\n // 构造函数 - 执行初始化操作\n constructor(message: string) {\n this.greeting = message;\n }\n\n // 静态方法\n static getClassName() {\n return \"Class name is Greeter\";\n }\n\n // 成员方法\n greet() {\n return \"Hello, \" + this.greeting;\n }\n}\n\nlet greeter = new Greeter(\"world\");\n```\n编译生成：\n```js\n\"use strict\";\nvar Greeter = /** @class */ (function () {\n // 构造函数 - 执行初始化操作\n function Greeter(message) {\n this.greeting = message;\n }\n // 静态方法\n Greeter.getClassName = function () {\n return \"Class name is Greeter\";\n };\n // 成员方法\n Greeter.prototype.greet = function () {\n return \"Hello, \" + this.greeting;\n };\n // 静态属性\n Greeter.cname = \"Greeter\";\n return Greeter;\n}());\nvar greeter = new Greeter(\"world\");\n```\n\n### 访问器(getter/setter)\n在 TypeScript 中，我们可以通过 getter 和 setter 方法来实现数据的封装和有效性校验，防止出现异常数据。\n```js\nlet passcode = \"Hello TypeScript\";\n\nclass Employee {\n private _fullName: string;\n\n get fullName(): string {\n return this._fullName;\n }\n\n set fullName(newName: string) {\n if (passcode && passcode == \"Hello TypeScript\") {\n this._fullName = newName;\n } else {\n console.log(\"Error: Unauthorized update of employee!\");\n }\n }\n}\n\nlet employee = new Employee();\nemployee.fullName = \"cosyer\";\nif (employee.fullName) {\n console.log(employee.fullName);\n}\n```\n\n### 继承\n继承 (Inheritance) 是一种联结类与类的层次模型。指的是一个类（称为子类、子接口）继承另外的一个类（称为父类、父接口）的功能，并可以增加自己新功能的能力，继承是类与类或者接口与接口之间最常见的关系。\n```js\nclass Animal {\n name: string;\n \n constructor(theName: string) {\n this.name = theName;\n }\n \n move(distanceInMeters: number = 0) {\n console.log(`${this.name} moved ${distanceInMeters}m.`);\n }\n}\n\nclass Snake extends Animal {\n constructor(name: string) {\n super(name);\n }\n \n move(distanceInMeters = 5) {\n console.log(\"Slithering...\");\n super.move(distanceInMeters);\n }\n}\n\nlet sam = new Snake(\"Sammy the Python\");\nsam.move();\n```\n\n### 私有字段\n在 TypeScript 3.8 版本就开始支持ECMAScript 私有字段\n```js\nclass Person {\n #name: string;\n\n constructor(name: string) {\n this.#name = name;\n }\n\n greet() {\n console.log(`Hello, my name is ${this.#name}!`);\n }\n}\n\nlet cosyer = new Person(\"cosyer\");\n\ncosyer.#name;\n// Property '#name' is not accessible outside class 'Person'\n// because it has a private identifier.\n```\n\n与常规属性（甚至使用 private 修饰符声明的属性）不同，私有字段要牢记以下规则：\n\n- 私有字段以 # 字符开头，有时我们称之为私有名称；\n- 每个私有字段名称都唯一地限定于其包含的类；\n- 不能在私有字段上使用 TypeScript 可访问性修饰符（如 public 或 private）；\n- 私有字段不能在包含的类之外访问，甚至不能被检测到。\n\n## 编译上下文\n### tsconfig.json 的作用\n- 用于标识 TypeScript 项目的根路径；\n- 用于配置 TypeScript 编译器；\n- 用于指定编译的文件。\n\n### tsconfig.json 重要字段\n- files - 设置要编译的文件的名称；\n- include - 设置需要进行编译的文件，支持路径模式匹配；\n- exclude - 设置无需进行编译的文件，支持路径模式匹配；\n- compilerOptions - 设置与编译流程相关的选项。\n\n### compilerOptions 选项\n```js\n{\n \"compilerOptions\": {\n\n /* 基本选项 */\n \"target\": \"es5\", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'\n \"module\": \"commonjs\", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'\n \"lib\": [], // 指定要包含在编译中的库文件\n \"allowJs\": true, // 允许编译 javascript 文件\n \"checkJs\": true, // 报告 javascript 文件中的错误\n \"jsx\": \"preserve\", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'\n \"declaration\": true, // 生成相应的 '.d.ts' 文件\n \"sourceMap\": true, // 生成相应的 '.map' 文件\n \"outFile\": \"./\", // 将输出文件合并为一个文件\n \"outDir\": \"./\", // 指定输出目录\n \"rootDir\": \"./\", // 用来控制输出目录结构 --outDir.\n \"removeComments\": true, // 删除编译后的所有的注释\n \"noEmit\": true, // 不生成输出文件\n \"importHelpers\": true, // 从 tslib 导入辅助工具函数\n \"isolatedModules\": true, // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.\n\n /* 严格的类型检查选项 */\n \"strict\": true, // 启用所有严格类型检查选项\n \"noImplicitAny\": true, // 在表达式和声明上有隐含的 any类型时报错\n \"strictNullChecks\": true, // 启用严格的 null 检查\n \"noImplicitThis\": true, // 当 this 表达式值为 any 类型的时候，生成一个错误\n \"alwaysStrict\": true, // 以严格模式检查每个模块，并在每个文件里加入 'use strict'\n\n /* 额外的检查 */\n \"noUnusedLocals\": true, // 有未使用的变量时，抛出错误\n \"noUnusedParameters\": true, // 有未使用的参数时，抛出错误\n \"noImplicitReturns\": true, // 并不是所有函数里的代码都有返回值时，抛出错误\n \"noFallthroughCasesInSwitch\": true, // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）\n\n /* 模块解析选项 */\n \"moduleResolution\": \"node\", // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)\n \"baseUrl\": \"./\", // 用于解析非相对模块名称的基目录\n \"paths\": {}, // 模块名到基于 baseUrl 的路径映射的列表\n \"rootDirs\": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容\n \"typeRoots\": [], // 包含类型声明的文件列表\n \"types\": [], // 需要包含的类型声明文件名列表\n \"allowSyntheticDefaultImports\": true, // 允许从没有设置默认导出的模块中默认导入。\n\n /* Source Map Options */\n \"sourceRoot\": \"./\", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置\n \"mapRoot\": \"./\", // 指定调试器应该找到映射文件而不是生成文件的位置\n \"inlineSourceMap\": true, // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件\n \"inlineSources\": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性\n\n /* 其他选项 */\n \"experimentalDecorators\": true, // 启用装饰器\n \"emitDecoratorMetadata\": true // 为装饰器提供元数据的支持\n }\n}\n```\n\n## 仓库代码\n[typescript-learn](/~https://github.com/cosyer/typescript-learn)\n\n## 相关问题\n[TypeScript 中，interface 和 type 的区别](https://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)\n","tags":["typescript"],"categories":["JS"]},{"title":"XSS学习&实践","url":"%2F2020%2FXSS%E5%AD%A6%E4%B9%A0%26%E5%AE%9E%E8%B7%B5.html","content":"\n`web安全`一直是开发中不可忽视的一部分。而xss作为web开发中最常见的攻击手段，防范是必然的。基于web浏览器tricks，JavaScript的发展，npm等开源项目漏\n洞，web注入等会让开发者越来越防不胜防。\n\n## 插入执行标签\n- script\n- img onerror触发\n- iframe srcdoc触发\n\n## 标签等提前闭合(截断)\n- 如在富文本, input, textarea, 可编辑div等，[0x01](https://xss.haozi.me/#/0x01)，[0x02](https://xss.haozi.me/#/0x02)\n- style标签\n```js\n\n\n```\n- 注释提前闭合\n```js\n--!>\n```\n\n---\n\n\n- input type重写\ninput的type，在type之前可以重写为image，通过onerror注入\n\n## ES6 tag标签\n```js\n\n```\n\n## 转义字符仍可执行\n- script标签可执行 base64的html代码片段\n- onerror可执行 转义为 html 10进制， 16进制的代码片段\n- url转义为 html 10进制， 16进制 仍可执行, url的定义可获取其他域下的资源文件\n```js\nscheme:[//[user:password@]host[:port]][/]path[?query][#fragment]\n```\n\n## svg不闭合也执行\n## 正则替换不靠谱\n- 正则替换\n- 正则命中\n- 追加执行，正则替换失效\n\n## 防护\n- 配置安全头\n- xss监控\n- 服务端白名单过滤\n","tags":["前端"],"categories":["工具"]},{"title":"windows安装mysql","url":"%2F2020%2Fwindows%E5%AE%89%E8%A3%85mysql.html","content":"\n## 安装包下载\n\n- 下载地址：https://dev.mysql.com/downloads/mysql/\n\n- Mysql国内镜像：http://mirrors.sohu.com/mysql/MySQL-8.0/\n\n下载完成后，选择一个磁盘内放置并解压。\n\n## 设置环境变量 \n1. 变量名：MYSQL_HOME\n2. 变量值：E:\\mysql5.7.23\n3. path里添加：%MYSQL_HOME%\\bin\n\n## 初始化设置\n### 创建data Uploads文件夹\n### my.init文件\n\n```js\n[mysqld]\nport=3306\ncharacter_set_server=utf8\nbasedir=E:\\mysql5.7.23\ndatadir=E:\\mysql5.7.23\\data\nserver-id=1\nsql_mode=NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION\nlower_case_table_names=1\ninnodb_file_per_table = 1\nlog_timestamps=SYSTEM\n\nlog-error = error.log\nslow_query_log = 1\nslow_query_log_file = slow.log\nlong_query_time = 5\nlog-bin = binlog\nbinlog_format = row\nexpire_logs_days = 15\nlog_bin_trust_function_creators = 1\nsecure-file-priv=E:\\mysql5.7.23\\Uploads\n\n[client] \ndefault-character-set=utf8\n```\n\n---\n\n\n### 初始化生成data下文件(以管理员身份运行cmd)\n```js\nmysqld --initialize-insecure\n```\n\n### 安装服务\n```js\nmysqld --install mysql8\n```\n\n### 启动和停止\n```js\nnet start mysql8 \nnet stop mysql8\n```\n\n## MySQL初始化root密码\n\n- mysql默认root用户没有密码，输入mysql –u root 进入mysql\n\n1. 进入mysql数据库\n```js\nuse mysql;\n```\n\n2. 初始化root密码\n```js\nmysql>update user set password=PASSWORD('123456') where User='root';\n```\n\n`8.0+版本`\n```js\nALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';\n```\n\n## root密码忘记解决方法（Windows环境）\n\n1. 确保MySQL服务停止\n\n2. 打开第一个cmd窗口，进入MySQL安装目录下的bin目录\n\n3. 跳过权限安全检查，MySQL服务运行起来后，不用输入密码就能进入数据库\n\n例如，D:\\mysql-5.5.35-win32\\bin>mysqld –defaults-file=”D:\\mysql-5.5.35-win32\\my.ini” –console –skip-grant-tables\n\n4. 打开第二个cmd窗口，连接MySQL\n\n- 输入命令：mysql -uroot -p\n\n- 出现 Enter password: 直接回车\n\n5. 使用命令切换到mysql数据库：\n```js\nuse mysql;\n```\n\n6. 使用命令更改root密码：\n```js\nUPDATE user SET Password=PASSWORD('123456') where USER='root';\n```\n\n7. 刷新权限：\n```js\nFLUSH PRIVILEGES;\n```\n8. 退出：\n```js\nquit;\n```\n\n9. 关闭上面打开的两个cmd窗口，重新启动MySQL服务。\n","tags":["mysql"],"categories":["工具"]},{"title":"【Mac 终端配置】iTerm2 + oh-my-zsh","url":"%2F2020%2FMac%20iTerm2%20%2B%20oh-my-zsh.html","content":"\n## 前置校验\n```bash\n# 1、默认已安装 Homebrew、iTerm2\n# 2、查看是否安装了zsh，查看是否返回 /usr/bin/zsh\ncat /etc/shells\n# 若未安装\nbrew install zsh\n\n# iTerm2 启动项配置\nchsh -s /bin/zsh # 设置为zsh\nchsh -s /bin/bash # 设置为bash（Mac自带默认）\n```\n\n---\n\n\n## 安装 ob-my-zsh\n```bash\n# 方式一：wegt安装\nwget /~https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh\n\n# 方式二：curl 安装\nsh -c \"$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)\"\n\n# 方式三：手动安装\ngit clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh\ncp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc\n\n# 卸载\nuninstall_oh_my_zsh zsh\n\n# zsh配置环境变量\n~/.zshrc\n```\n\n## 安装 Powerline\n```bash\n# 1、检测是否已经安装，若有版本信息则已安装\npip show powerline-status\n\n# 2、将 powerline-status 安装在/usr/根目录中\npip install --user powerline-status\n\n# 上一步若显示没有 pip,先安装pip\nsudo easy_install pip\n```\n\n## 设置字体\n```bash\n# 1、新建文件夹(如~/Desktop/OpenSource)，文件夹下\ncd ~/Desktop/OpenSource\ngit clone /~https://github.com/powerline/fonts.git --depth=1\n# 2、进入脚本目录\ncd fonts\n# 3、执行脚本\n./install.sh\n\n# 进入 iTerm2 -> Preferences -> Profiles -> Text -> Font -> Change Font\n# 选择Meslo LG S for Powerfine, 常规， 12\n```\n\n## 设置配色方案\n```bash\n# 直接下载tar.zip包(包含全部配色)\n# 进入 iTerm2 -> Preferences -> Profiles->Color \n# 选择 Color Presets->import 选择解压好的目录下schemes目录中相应配色方案导入\n```\n\n## 安装 oh-my-zsh 主题\n```bash\n# 下载安装 agnoster 主题，将主题拷贝到oh my zsh的zsh中\ncd ~/Desktop/OpenSource\ngit clone /~https://github.com/fcamblor/oh-my-zsh-agnoster-fcamblor.git\ncd oh-my-zsh-agnoster-fcamblor/\n./install\n\n# 将 ZSH_THEME 值改为 agnoster，ecs 退出，:wq 保存\nvi ~/.zshrc\n```\n\n## 安装插件\n```bash\n# ======================== 高亮插件 ========================\n# 在 ~ 目录下新建文件夹 zsh-plugins(~/.zshrc 默认目录)\ncd zsh-plugins\ngit clone git://github.com/zsh-users/zsh-syntax-highlighting.git\nvim .zshrc\n# 文末添加以下配置\nsource ~/zsh-pludins/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh\ncd ~/.oh-my-zsh/custom/plugins\nvim .zshrc\n# 文末添加以下配置\nplugins=(zsh-syntax-highlighting)\n\n# ======================== 自动补齐插件 ========================\ncd zsh-plugins\nhttp://mimosa-pudica.net/src/incr-0.2.zsh\n# 将文件放到 ~/zsh-pludins/inrc下\nvim .zshrc\nsource ~/.oh-my-zsh/plugins/incr/incr*.zsh\n```\n","tags":["工具"],"categories":["工具"]},{"title":"关于node的那些事(基础篇)","url":"%2F2020%2F%E5%85%B3%E4%BA%8Enode%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B(%E5%9F%BA%E7%A1%80%E7%AF%87).html","content":"\n## 👨提问：最近Deno很火，会不会替代node的替代品，学node是不是没有前途？\n> 莫慌，Node依旧是社区热捧的服务器端 JavaScript 运行环境，Deno的出现其实本质上是完善现阶段的Node（新轮子），包括原生支持TS、安全性、支持ES \nModule浏览器模块、等特征。万变不离其宗，虽然有了Deno，将来可能就不需要 Node.js，但是新事物总是需要不断推演和考验后，所以这一点而言，Node短时间内很\n难被替换，毕竟背后依附着强大社区的支撑。\n\n## node 如何获取命令行传来的参数？\n> process.argv。process是一个全局变量，它提供当前 Node.js 进程的有关信息，而process.argv 属性则返回一个数组，数组中的信息包括启动Node.js进程时的命令行参数。\n\n- process.argv[0] : 返回启动Node.js进程的可执行文件所在的绝对路径\n- process.argv[1] : 为当前执行的JavaScript文件路径\n- process.argv.splice(2) : 移除前两者后，剩余的元素为其他命令行参数(也就是我们自定义部分)\n\n```js\n\"script\": {\n \"serve\": \"node test.js arg1 arg2 arg3\"\n}\n\n// test.js\nconst arguments = process.argv.splice(2) // [arg1, arg2, arg3]\n\n// 结合commander\ncommander.parse(process.argv)\n```\n\n---\n\n\n## 怎么看 nodejs 可支持高并发\nnodejs 其实并不是真正的单线程架构，因为 nodejs 还有I/O线程存在（网络I/O、磁盘I/O），这些I/O线程是由更底层的 libuv 处理，这部分线程对于开发者来\n说是透明的。 JavaScript 代码永远运行在V8上，是单线程的。\n\n- 单线程架构的优势和劣势：\n - 优势：\n1. 单线程就一个线程在玩，省去了线程间切换的开销\n2. 还有线程同步的问题，线程冲突的问题的也不需要担心\n\n - 劣势：\n\n1. 劣势也很明显，现在起步都是 4 核，单线程没法充分利用 cpu 的资源\n2. 单线程，一旦崩溃，应用就挂掉了，大家调试脚本也知道一旦执行过程报错了，本次调试就直接结束了\n3. 因为只能利用一个 cpu ，一旦 cpu 被某个计算一直占用， cpu 得不到释放，后续的请求就会一直被挂起，直接无响应了\n\n## node有哪些相关的文件路径？\n> Node 中的文件路径有 __dirname, __filename, process.cwd(), ./ 或者 ../\n\n- __dirname: 总是返回被执行的 js 所在文件夹的绝对路径\n- __filename: 总是返回被执行的 js 的绝对路径\n- process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径\n\n## node相关path API 有哪些？\n> path 模块提供了一些实用工具，用于处理文件和目录的路径，常用api有：path.dirname、path.join、path.resolve 其他的看文档 [Path API](http://nodejs.cn/api/path.html)\n\n- path.dirname()： 返回 path 的目录名\n- path.join()：所有给定的 path 片段连接到一起，然后规范化生成的路径\n- path.resolve()：方法会将路径或路径片段的序列解析为绝对路径，解析为相对于当前目录的绝对路径，相当于cd命令\n\npath.join(__dirname, '../lib/common.js')和 path.resolve(__dirname, '../lib/common.js')返回的结果相同，难道可以相互替换？\n\n1. join是把各个path片段连接在一起， resolve把/当成根目录\n```js\npath.join('/a', '/b') // '/a/b'\npath.resolve('/a', '/b') //'/b'\n```\n\n2. join是直接拼接字段，resolve是解析路径并返回\n```js\npath.join(\"a\",\"b\") // \"a/b\"\npath.resolve(\"a\", \"b\") // \"/Users/tree/Documents/infrastructure/KSDK/src/a/b\"\n```\n\n## node的文件读取怎么做的？\n> 通过fs文件系统模块提供的API，也是node中重要的模块之一，fs模块主要用于文件的读写、移动、复制、删除、重命名等操作。\n\n```js\nfs.rename('a', 'b', (err)=>{\n if (err) {\n exec('rm -rf a', function(err, out) {\n\n })\n } else {}\n})\n```\n\n> ⏰需要注意的是，使用require('fs')载入fs模块，fs模块中所有方法都有同步和异步两种形式,刚刚我们展示的rename是异步方法的调用，因为在繁忙的进程中，应使用异步方法， 同步的版本会阻塞整个进程（停止所有的连接），当然fs.rename对应的同步方法就是fs.renameSync\n\n```js\n// 同步的例子\nlet isExists = fs.existsSync('dirname')\nif (isExists) {\n process.exit(1);\n}\n// 无论同步异步尽量对抛出的异常做相应的处理\n```\n\n## node的url模块是用来干嘛的？\n> 用来对url的字符串解析、url组成等功能，主要包括以下几个API。url.parse()、url.format()\n\n- url.parse：可以将一个url的字符串解析并返回一个url的对象\n- url.format:将传入的url对象解析成一个url字符串并返回\n\n```js\nurl.parse(\"https://baidu.com:8080/test/h?query=js#node\")\n\nUrl {\n protocol: 'http:',\n slashes: true,\n auth: null,\n host: 'baidu.com:8080',\n port: '8080',\n hostname: 'baidu.com',\n hash: '#node',\n search: '?query=js',\n query: 'query=js',\n pathname: '/test/h',\n path: '/test/h?query=js',\n href: 'http://baidu.com:8080/test/h?query=js#node'\n}\n```\n\n## node的http模块创建服务与Express或Koa框架有何不同?\n> express是一个服务端框架，框架简单封装了node的http模块，express支持node原生的写法，express不仅封装好服务器，还封装了中间件、路由等特征，方便开发web服务器，换句话说express = http模块 + 中间件 + 路由\n\n### http\n```js\nconst http = require('http')\nconst server = http.createServer(function (req, res) {\n res.writeHead(200, {\n 'content-type': 'text/plain'\n })\n res.write('hello world')\n res.end()\n})\nserver.listen(3000)\n```\n\n### express\n```js\nconst express = require('express')\nconst app = express()\napp.user(middleware)\n\napp.get('/', function(req, res){\n res.send('hello world')\n})\n\napp.listen(3000, function() {\n\n})\n\nfunction middleware(req, res, next) {\n next()\n}\n```\n\n### koa\n```js\nconst Koa = require('koa')\nconst app = new Koa()\napp.user(middleware)\n\napp.listen(3000)\n\nasync function middleware(ctx, next) {\n await next()\n}\n```\n\n## Express和Koa框架中间件有什么不同？\n> 中间件： app.use方法就是往中间件队列中塞入新的中间件，express中间件处理方式是线性的，next过后继续寻找下一个中间件，当然如果没有调用next()的话，就不会调用下一个函数了，调用就会被终止。\n\n- express 中间件：是通过 next 的机制，即上一个中间件会通过 next 触发下一个中间件\n- koa2 中间件：是通过 async await 实现的，中间件执行顺序是“洋葱圈”模型（推荐）\n\n1. express大而全有路由，而koa2小而精通过中间件\n2. koa2使用async await，express next\n3. koa2有洋葱模型和ctx上下文，express没有\n\nkoa2和egg的区别\n- egg是在koa2上的封装\n- egg有controller、service、router\n- egg约定了文件目录结构\n\n## 什么是模版引擎？\n> 模板引擎是一个通过结合页面模板、要展示的数据生成HTML页面的工具，本质上是后端渲染（SSR）的需求，加上Node渲染页面本身是纯静态的，当我们需要页面多样化、更灵活，我们就需要使用模板引擎来强化页面，更好的凸显服务端渲染的优势。\n\n常见主流模版引擎有：\n\n- art-template [官方文档](http://aui.github.io/art-template/) ：号称效率最高的，模版引擎\n- ejs [官方文档](https://ejs.co/)：是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。\n- pug [官方文档](https://pugjs.org/api/getting-started.html)：是一款健壮、灵活、功能丰富的模板引擎，专门为 Node.js 平台开发\n\n[Node.js入门教程](/~https://github.com/cosyer/node-learn)\n","tags":["NodeJS"],"categories":["Node"]},{"title":"react SSR教程","url":"%2F2020%2Freact%20SSR%E6%95%99%E7%A8%8B.html","content":"\n# 前言\n\n本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建。\n\n## 客户端渲染与服务端渲染\n\n### 客户端渲染\n+ 客户端渲染，实际上就是客户端向服务端请求页面，服务端返回的是一个非常简单的 HTML 页面，在这个页面里，只有很少的一些 HTML 标签\n+ 客户端渲染时，页面中有两个比较重要的点，第一个是 script 标签，可能会有好几个 script 标签，这个标签是打包后的 js 代码，用来生成 DOM 元素，发送请求，事件绑定等。但是，生成的 DOM 元素需要有一个在页面上展示的容器，所以另外一个点就是容器，一般是一个 id 名为 root 或 app 的 div 标签，类似于这样 `

    ` 或`
    `\n+ 客户端渲染的特点\n + 客户端加载所有的 js 资源，渲染 DOM 元素\n + 在浏览器页面上的所有资源，都由客户端主动去获取，服务端只负责静态资源的提供和 API 接口，不再负责页面的渲染，如果采用 CDN 的话，服务端仅仅需要提供 API 接口\n + 优点: 前后端分离，责任区分，前端专注页面的开发，后端专注接口的开发\n + 缺点: 首屏加载资源多，首屏加载时响应慢。页面上没有 DOM 元素，不利于 SEO 优化\n\n### 服务端渲染\n+ 服务端渲染，就是客户端页面上的 HTML 元素，都要由服务端负责渲染。服务端利用模板引擎，把数据填充到模板中，生成 HTML 字符串，最终把 HTML 字符串返回到浏览器，浏览器接收到 HTML 字符串，通过 HTML 引擎解析，最终生成 DOM 元素，显示在页面上\n+ 比如 Node.js 可以渲染的模板引擎有 ejs，nunjucks，pug 等。Java 最常见的是 JSP 模板引擎。Python 最常见的是 Jinja2 模板引擎。\n+ 服务端渲染的特点\n + 优点: 页面资源大多由服务端负责处理，所以页面加载速度快，缩短首屏加载时间。有利于 SEO 优化。无需占用客户端资源\n + 缺点: 不利于前后端分离，开发效率低。占用服务器资源\n\n### 区分与选择\n+ 客户端渲染和服务端渲染本质的区别就是，是谁负责 HTML 页面的拼接，那么就是谁渲染的页面\n+ 如果对首屏加载时间有非常高的需求，或者是需要 SEO 优化，那么就选择服务端渲染\n+ 如果对首屏加载时间没有要求，也不需要做 SEO 优化，类似于做后台管理系列的业务，那么就可以选择客户端渲染\n+ 具体选择客户端渲染还是服务端渲染，没有强制的要求，具体要根据项目的需求来区分选择\n\n---\n\n\n## SSR 介绍\nServer Slide Rendering，缩写为 **ssr** 即服务器端渲染，这个要从SEO说起，目前react单页应用HTML代码是下面这样的\n```html\n\n\n \n \n \n \n \n React App\n \n \n \n
    \n \n \n\n```\n1. 如果main.js 加载比较慢，会出现白屏一闪的现象。\n2. 传统的搜索引擎爬虫因为不能抓取JS生成后的内容，遇到单页web项目，抓取到的内容啥也没有。在SEO上会吃很多亏，很难排搜索引擎到前面去。\nReact SSR（react服务器渲染）正好解决了这2个问题。\n\n## React SSR介绍\n\n这里通过一个例子来带大家入坑！先使用create-react-app创建一个react项目。因为要修改webpack，这里我们使用react-app-rewired启动项目。根目录创建一个server目录存放服务端代码，服务端代码我们这里使用koa2。\n\n这里先来看看react ssr是怎么工作的。\n\n![图片描述][1]\n\n这个业务流程图比较清晰了，服务端只生成HTML代码，实际上前端会生成一份main.js提供给服务端的HTML使用。这就是react ssr的工作流程。有了这个图会更好的理解，如果这个业务没理解清楚，后面的估计很难理解。\n\n> react提供的SSR方法有两个renderToString 和 renderToStaticMarkup，区别如下：\n\n- renderToString 方法渲染的时候带有 data-reactid 属性. 在浏览器访问页面的时候，main.js能识别到HTML的内容，不会执行React.createElement二次创建DOM。\n- renderToStaticMarkup 则没有 data-reactid 属性，页面看上去干净点。在浏览器访问页面的时候，main.js不能识别到HTML内容，会执行main.js里面的React.createElement方法重新创建DOM。适用于纯静态页面。\n\n## 实现流程\n\n```javascript\nimport \"./App.css\";\n\nimport React, { Component } from \"react\";\n\nimport logo from \"./logo.svg\";\n\nclass App extends Component {\n componentDidMount() {\n console.log('哈哈哈~ 服务器渲染成功了！');\n }\n\n render() {\n return (\n     \n );\n }\n}\n\nexport default App;\n```\n\n在项目中新建server目录，用于存放服务端代码。项目中我们用的ES6，所以还要配置下.babelrc\n\n> .babelrc 配置，因为要使用到ES6\n```json\n{\n \"presets\": [\n \"env\",\n \"react\"\n ],\n \"plugins\": [\n \"transform-decorators-legacy\",\n \"transform-runtime\",\n \"react-hot-loader/babel\",\n \"add-module-exports\",\n \"transform-object-rest-spread\",\n \"transform-class-properties\",\n [\n \"import\",\n {\n \"libraryName\": \"antd\",\n \"style\": true\n }\n ]\n ]\n}\n```\n\n> index.js 项目入口做一些预处理，使用asset-require-hook过滤掉一些类似 ```import logo from \"./logo.svg\";``` 这样的资源代码。因为我们服务端只需要纯的HTML代码，不过滤掉会报错。这里的name，我们是去掉了hash值的。\n\n```javascript\nrequire(\"asset-require-hook\")({\n extensions: [\"svg\", \"css\", \"less\", \"jpg\", \"png\", \"gif\"],\n name: '/static/media/[name].[ext]'\n});\nrequire(\"babel-core/register\")();\nrequire(\"babel-polyfill\");\nrequire(\"./app\");\n```\n\n> public/index.html html模版代码要做个调整，```{{root}}``` 这个可以是任何可以替换的字符串，等下服务端会替换这段字符串。\n\n```html\n\n\n \n \n \n \n \n \n React App\n \n \n \n
    {{root}}
    \n \n\n\n```\n\n> app.js 服务端渲染的主要代码，加载App.js，使用renderToString 生成html代码，去替换掉 index.html 中的 ```{{root}}``` 部分\n\n```javascript\nimport App from '../src/App';\nimport Koa from 'koa';\nimport React from 'react';\nimport Router from 'koa-router';\nimport fs from 'fs';\nimport koaStatic from 'koa-static';\nimport path from 'path';\nimport { renderToString } from 'react-dom/server';\n\n// 配置文件\nconst config = {\n port: 3030\n};\n\n// 实例化 koa\nconst app = new Koa();\n\n// 静态资源\napp.use(\n koaStatic(path.join(__dirname, '../build'), {\n maxage: 365 * 24 * 60 * 1000,\n index: 'root' \n // 这里配置不要写成'index'就可以了，因为在访问localhost:3030时，不能让服务默认去加载index.html文件，这里很容易掉进坑。\n })\n);\n\n// 设置路由\napp.use(\n new Router()\n .get('*', async (ctx, next) => {\n ctx.response.type = 'html'; //指定content type\n let shtml = '';\n await new Promise((resolve, reject) => {\n fs.readFile(path.join(__dirname, '../build/index.html'), 'utfa8', function(err, data) {\n if (err) {\n reject();\n return console.log(err);\n }\n shtml = data;\n resolve();\n });\n });\n // 替换掉 {{root}} 为我们生成后的HTML\n ctx.response.body = shtml.replace('{{root}}', renderToString());\n })\n .routes()\n);\n\napp.listen(config.port, function() {\n console.log('服务器启动，监听 port： ' + config.port + ' running~');\n});\n\n```\n\n> config-overrides.js 因为我们用的是create-react-app，这里使用react-app-rewired去改下webpack的配置。因为执行**npm run build**的时候会自动给资源加了hash值，而这个hash值，我们在asset-require-hook的时候去掉了hash值，配置里面需要改下，不然会出现图片不显示的问题，这里也是一个坑，要注意下。\n\n```javascript\nmodule.exports = {\n webpack: function(config, env) {\n // ...add your webpack config\n // console.log(JSON.stringify(config));\n // 去掉hash值，解决asset-require-hook资源问题\n config.module.rules.forEach(d => {\n d.oneOf &&\n d.oneOf.forEach(e => {\n if (e && e.options && e.options.name) {\n e.options.name = e.options.name.replace('[hash:8].', '');\n }\n });\n });\n return config;\n }\n};\n\n```\n\n好了，所有的代码就这些了，是不是很简单了？我们koa2读取的静态资源是 build目录下面的。先执行**npm run build**打包项目，再执行**node ./server** 启动服务端项目。看下\nhttp://localhost:3030 页面的HTML代码检查下：\n\n![图片描述][2]\n\n没有```{{root}}```了，服务器渲染成功！\n\n> 注: 这个项目只是用来学习 react 的服务端渲染，而非安利大家一定要使用服务端渲染，因为 react 和 vue 的服务端渲染和普通的服务端渲染有很多的不一样，所以可以学习一下，提高一下自己的水平。\n\n## 代码仓库地址\n[react-koa2-ssr](/~https://github.com/cosyer/react-koa2-ssr)\n\n[1]: http://cdn.mydearest.cn/blog/images/react-ssr.png\n[2]: http://cdn.mydearest.cn/blog/images/react-ssr-demo.png\n","tags":["解决方案"],"categories":["React"]},{"title":"Docker","url":"%2F2020%2FDocker.html","content":"\nDocker，是一款现在最流行的 软件容器平台，提供了软件运行时所依赖的环境。\n\n## 物理机\n硬件环境，真实的 计算机实体，包含了例如物理内存，硬盘等等硬件；\n\n## 虚拟机:\n在物理机上 模拟出一套硬件环境和操作系统，应用软件可以运行于其中，并且毫无感知，是一套隔离的完整环境。本质上，它只是物理机上的一份运行文件。\n\n## 为什么需要虚拟机？\n\n### 环境配置与迁移\n在软件开发和运行中，环境依赖一直是一个很头疼的难题，比如你想运行 node 应用，那至少环境得安装 node 吧，而且不同版本，不同系统都会影响运行。解决的办法就是我们的包装包中直接包含运行环境的安装，让同一份环境可以快速复制到任意一台物理机上。\n\n### 资源利用率与隔离\n通过硬件模拟，并包含一套完整的操作系统，应用可以独立运行在虚拟机中，与外界隔离。并且可以在同一台物理机上，开启多个不同的虚拟机启动服务，即一台服务器，提供多套服务，且资源完全相互隔离，互不影响。不仅能更好提高资源利用率率，降低成本，而且也有利于服务的稳定性。\n\n### 传统虚拟机的缺点\n\n#### 资源占用大\n由于虚拟机是模拟出一套完整系统，包含众多系统级别的文件和库，运行也需要占用一部分资源，单单启动一个空的虚拟机，可能就要占用 100+MB 的内存了。\n \n#### 启动缓慢\n同样是由于完整系统，在启动过程中就需要运行各种系统应用和步骤，也就是跟我们平时启动电脑一样的耗时。\n\n#### 冗余步骤多\n系统有许多内置的系统操作，例如用户登录，系统检查等等，有些场景其实我们要的只是一个隔离的环境，其实也就是说，虚拟机对部分需求痛点来说，其实是有点过重的。\n\n## Linux 容器\nLinux 中的一项虚拟化技术，称为 Linux 容器技术(LXC)。它在进程层面模拟出一套隔离的环境配置，但并没有模拟硬件和完整的操作系统。因此它完全规避了传统虚拟机的缺点，在启动速度，资源利用上远远优于虚拟机；\n\n---\n\n\n## Docker\n\nDocker 就是基于 Linux 容器的一种上层封装，提供了更为简单易用的 API 用于操作 Docker，属于一种`容器解决方案`。\n基本概念: 在 Docker 中，有三个核心的概念:\n\n### 镜像 (Image):\n\n1. 从原理上说，镜像属于一种`root 文件系统`，包含了一些系统文件和环境配置等，可以将其理解成一套`最小操作系统`。为了让镜像轻量化和可移植，Docker 采用了`Union FS 的分层存储模式`。将文件系统分成一层一层的结构，逐步从底层往上层构建，每层文件都可以进行继承和定制。这里从前端的角度来理解:`镜像就类似于代码中的 class，可以通过继承与上层封装进行复用`。\n2. 从外层系统看来，一个镜像就是一个 Image`二进制文件`，可以任意迁移，删除，添加；\n\n### 容器 (Container):\n\n1. 镜像是一份静态文件系统，无法进行运行时操作，就如class，如果我们不进行实例化时，便无法进行操作和使用。因此`容器可以理解成镜像的实例`，即`new 镜像()`，这样我们便可以创建、修改、操作容器；一旦创建后，就可以简单理解成一个轻量级的操作系统，可以在内部进行各种操作，例如运行 node 应用，拉取 git 等；\n2. 基于镜像的分层结构，容器是`以镜像为基础底层`，在上面封装了一层`容器的存储层`；\n\n- 存储空间的生命周期与容器一致；\n- 该层存储层会随着容器的销毁而销毁；\n- 尽量避免往容器层写入数据；\n\n3. 容器中的数据的持久化管理主要由两种方式:\n\n- 数据卷 (Volume): 一种可以在多个容器间共享的特殊目录，其处于容器外层，并不会随着容器销毁而删除；\n- 挂载主机目录: 直接将一个主机目录挂载到容器中进行写入；\n\n### 仓库 (Repository):\n\n1. 为了便于镜像的使用，Docker 提供了类似于 git 的仓库机制，在仓库中包含着各种各样版本的镜像。官方服务是 Docker Hub；\n2. 可以快速地从仓库中拉取各种类型的镜像，也可以基于某些镜像进行自定义，甚至发布到仓库供社区使用；\n\n### 安装\n- linux\n> curl -sSL https://get.docker.com/ | sh或者wget -qO- https://get.docker.com/ | sh\n\n```bash\ncurl https://get.docker.com/ > install-docker.sh # 下载安装脚本\nsh install-docker.sh # 执行安装脚本\n```\n\n- Mac\nhttps://download.docker.com/mac/stable/Docker.dmg\n\n- windows\nhttps://download.docker.com/win/stable/Docker%20for%20Windows%20Installer.exe\n\n### 第一个 docker 项目\n接下来我们搭建一个能够托管静态文件的 Nginx 服务器，容器运行程序，而容器哪来的呢？容器是镜像创建出来的。那镜像又是哪来的呢？\n\n镜像是通过一个 Dockerfile 打包来的，它非常像我们前端的package.json文件。\n\n```\nDockerfile: 类似于“package.json”\n |\n V\nImage: 类似于“Win7纯净版.rar”\n |\n V\nContainer: 一个完整操作系统\n```\n\n#### 创建文件\n```\nhello-docker\n |____index.html\n |____Dockerfile\n```\n- index.html\n```html\n

    Hello docker

    \n```\n\n- Dockerfile\n```\nFROM nginx\n\nCOPY ./index.html /usr/share/nginx/html/index.html\n\nEXPOSE 80\n```\n\n#### 打包镜像\n```bash\ncd hello-docker/ # 进入刚刚的目录\ndocker image build ./ -t hello-docker:1.0.0 # 打包镜像\n```\n此时遇到问题`Docker 安装后 报 Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? `\n\n```bash\nsystemctl daemon-reload\nsudo service docker restart\nsudo service docker status (should see active (running))\n```\n然后重新运行 `docker image build ./ -t hello-docker:1.0.0` 命令。这条命令的意思是基于路径./（当前路径）打包一个镜像，镜像的名字是hello-docker，版本号是1.0.0。该命令会自动寻找\nDockerfile来打包出一个镜像。\n\n解读下Dockerfile的内容：\n- FROM nginx：基于哪个镜像\n- COPY ./index.html /usr/share/nginx/html/index.html：将宿主机中的./index.html文件复制进容器里的/usr/share/nginx/html/index.html\n- EXPOSE 80：容器对外暴露80端口\n\n> 注意！Docker 中的选项（Options）放的位置非常有讲究，docker --help image和docker image --help是完全不同的命令\n\n#### 配置国内镜像源\n在 Linux 环境下，我们可以通过修改 /etc/docker/daemon.json ( 如果文件不存在，你可以直接创建它 ) 这个 Docker 服务的配置文件达到效果。\n- Docker中国官方镜像加速\n```\n{\n \"registry-mirrors\": [\n \"https://registry.docker-cn.com\"\n ]\n}\n```\n- 网易163镜像加速\n```\n{\n \"registry-mirrors\": [\"http://hub-mirror.c.163.com\"]\n}\n```\n- 中科大镜像加速\n```\n{\n \"registry-mirrors\": [\"https://docker.mirrors.ustc.edu.cn\"] \n}\n```\n- 直接下载站点镜像\n> docker pull hub.c.163.com/library/tomcat:latest //复制站点链接用 pull 下来\n\n然后重启 docker 让配置生效\n```bash\nsudo systemctl restart docker\n```\n\n通过 docker info 来查阅当前注册的镜像源列表，验证我们配置的镜像源是否生效\n```bash\nsudo docker info\n```\n\n#### 运行容器\n```bash\ndocker container create -p 9000:80 hello-docker:1.0.0 # 根据镜像创建容器\ndocker container start xxx # xxx 为上一条命令运行得到的结果\n```\n\n然后在浏览器打开ip:9000，就能刚刚自己写的index.html内容。\n\n在上边第一个命令中，我们使用docker container create来创建基于hello-docker:1.0.0镜像的一个容器，使用-p来指定端口绑定——将容器中的80端口绑定在宿主机的2333端口。执行完该命令，会返回一个容ID\n而第二个命令，则是启动这个容器启动后，就能通过访问本机的9000端口来达到访问容器内80端口的效果了\n\n> Tips: 你可以使用docker container ls来查看当前运行的容器\n当容器运行后，可以通过如下命令进入容器内部：\n```bash\ndocker container exec -it xxx /bin/bash # xxx 为容器ID\n```\n\n原理实际上是启动了容器内的/bin/bash，此时你就可以通过bash shell与容器内交互了。就像远程连接了SSH一样\n\n#### 退出容器\n```bash\nexit # 直接退出\n\nCtrl + p + q # 退出不停止\n```\n\n#### 制作镜像\n```bash\ndocker commit -m='message' -a='cosyer' containerId hello-docker:1.0.1\n```\n\n#### DockerFile\n- FROM：这个镜像依赖谁（基础镜像）\n- MAINTAINER：这个镜像是谁写的（维护者的信息）\n- RUN：构建镜像需要运行的命令\n- ADD：步骤：copu 文件，会自动解压\n- WORKDIR：设置当前工作目录\n- VOLUME：设置券，挂载主机目录\n- EXPOSE： 暴露端口\n- CMD：指定这个容器启动的时候要运行的命令 只有最后一个会生效，可被替代\n- ENTRYPOINT：指定这个容器启动的时候要运行的命令，可以追加命令\n- ONBUILD：当构建一个被继承 DockerFile 这个时候就会运行 ONBUILD 的命令，触发指令\n- COPY：类似 ADD 将我们的文件拷贝到镜像中\n- ENV：构建镜像的时候设置环境变量\n\n#### 发布镜像\n- docker login\n- docker tag imageId message\n- docker push imageId\n\n#### 总结\n1. 写一个 Dockerfile\n2. 使用docker image build来将Dockerfile打包成镜像\n3. 使用docker container create来根据镜像创建一个容器\n4. 使用docker container start来启动一个创建好的容器\n\n```bash\n# images\ndocker pull image\ndocker images # 查看所有镜像\ndocker rmi imageId -f # 强制删除镜像\ndocker rmi -f \\$(docker images -aq) # 小技巧删除所有镜像\n\n# container\ndocker ps # 查看运行容器\n-a 列出历史\n-n 列出最近\n-q 只显示编号\ndocker rm containerId # 删除容器\ndocker rmi -f \\$(docker ps -aq) # 小技巧删除所有容器\ndocker start id # 启动容器\ndocker restart id #重启容器\ndocker stop id # 停止当前运行的容器\ndocker kill id # 强制停止当前运行容器\ndocker inspect containerId # 查看容器基本信息\ndocker logs containerId # 查看容器日志\ndocker exec -it containerId /bin/bash # 进入容器\ndocker attach # 本机输入到容器中\ndocker cp 本机路径 容器id:文件路径 # 主机内容拷贝到容器\ndocker cp 容器id:文件路径 本机路径 # 容器拷贝内容到主机\n```\n\n![docker](http://cdn.mydearest.cn/blog/images/docker.png)\n\n```bash\niptables --list | grep DOCKER\n\niptables -t nat -nvL\n\nsysctl net.ipv4.ip_forward \n\nfirewall-cmd --state\n\nvi /etc/sysctl.conf\n\ndocker rm -f `docker ps -a -q`\n\ndocker inspect my-nginx9|grep IPAddress\n\ndocker container run --name nginxserver -d -p 80:80 nginx\n\n172.17.0.2:80\n```\n\n- 遇到了centos7系统docker 宿主机不能访问容器问题，unbantu系统没问题\n```bash\n#停止docker\nsystemctl stop docker\n#关闭docker0\nip link set dev docker0 down\n#删除docker0网桥\nbrctl delbr docker0\n#防火墙设置,后来发现这一步不用执行可以\niptables -t nat -F POSTROUTING\n#增加docker0 网桥\nbrctl addbr docker0\n#增加网卡\nip addr add 172.16.10.1/24 dev docker0\n#启用网卡\nip link set dev docker0 up\n#重启docker服务\nsystemctl restart docker\n```\n\n#### 三种网络模式\n- bridge(桥接)\n- host(主机模式与宿主机共享网络)\n- none(不配置网络)\n```bash\n# 自定义网络\ndocker network create --driver bridge --subnet 192.168.3.0/16 --gateway 192.168.3.1 mynet\n\n# 查看网络列表\ndocker network ls\n# 删除网络\ndocker neteork rm id\n```\n\n### SPA应用静态站点迁移\n之前的步骤：\n1. 本地`npm run build`打包静态文件\n2. 手动FTP传输到服务器\n3. git push更新github\n\n自动化CI：\n1. 执行git push\n2. 自动检测到 github 有代码更新，自动打包出一个 Docker 镜像\n3. CI 编译完成后，SSH 登录 VPS，删掉现有容器，用新镜像创建一个新容器\n\n好处：\n1. 不必再手动 FTP 上传文件\n2. 当进行修改错别字这样的简单操作时，可以免测。改完直接git push，而不必本地npm run build\n\n#### travis\n免费的CI资源[travis](https://www.travis-ci.org/)，需要在[/hub.docker.com](https://hub.docker.com/)注册账号。\n使用 Github 登录 Travis CI 后，在左边点击+加号添加自己的 Github 仓库后，需要移步到 Setting 为项目添加DOCKER_USERNAME和DOCKER_PASSWORD环境变量。这样保证我们可以秘密的登录 Docker Hub 而\n不被其他人看到自己的密码。\n\n```\nlanguage: node_js\nnode_js:\n - \"12\"\nservices:\n - docker\n\nbefore_install:\n - npm install\n\nscript:\n - npm run build\n - echo \"$DOCKER_PASSWORD\" | docker login -u \"$DOCKER_USERNAME\" --password-stdin\n - docker build -t cosyer/hello-docker:1.0.0 .\n - docker push cosyer/hello-docker:1.0.0\n```\n\n然后需要添加 Dockerfile 文件来描述如何打包 Docker 镜像。\n按照.travis.yml的命令次序，在打包镜像时，npm run build已经执行过了，项目产出已经有了。不必在 Docker 容器中运行npm install和npm run build之类的，直接复制文件即可：\n\n```\nFROM nginx\n\nCOPY ./dist/ /usr/share/nginx/html/\nCOPY ./vhost.nginx.conf /etc/nginx/conf.d/hello-docker.conf\n\nEXPOSE 80\n```\n将不访问文件的请求全部重定向到/index.html，处理history路由`vhost.nginx.conf`\n```\nserver {\n listen 80;\n server_name localhost;\n location / {\n root /usr/share/nginx/html;\n index index.html index.htm;\n proxy_set_header Host $host;\n\n if (!-f $request_filename) {\n rewrite ^.*$ /index.html break;\n }\n\n }\n\n error_page 500 502 503 504 /50x.html;\n location = /50x.html {\n root /usr/share/nginx/html;\n }\n}\n```\n\n### nginx反向代理\n宿主机`/etc/nginx/conf.d/vhost.conf`\n```\nserver {\n listen 80;\n server_name pea3nut.info;\n\n location / {\n proxy_pass http://127.0.0.1:8082;\n }\n}\n```\n配置的意思是，监听来自 80 端口的流量，若访问域名是mydearest.cn（替换为你自己的域名），则全部转发到http://127.0.0.1:8082中\n\n### nodejs站点迁移(express)\n之前的步骤：\n1. 本地修改好 Ejs 或者其他文件\n2. 手动通过 FTP 上传到服务器\n3. 在服务器端重启 Nodejs 进程。若有 npm 包依赖改动，需要在VP S服务器上手动执行npm install\n4. git push更新 Github 源码\n\n> Tips: 你可能发现了 Dockerfile 中的ENTRYPOINT命令必须指定一个前台进程。若你的 Nodejs 应用是使用 PM2 进行保护的，你需要替换pm2 start app.js为pm2-docker app.js\n\n### docker-compose \ndocker-compose 是 Docker 官方提供的一个 Docker 管理工具。\n\ndocker-compose 和 Docker 差不多，也是只要一份文件就能跑起来。docker-compose 主要的作用就是能够让你不必手敲那么多 Docker 命令\n\n- 安装\n```bash\ncurl -L \"/~https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)\" -o /usr/local/bin/docker-compose\nchmod +x /usr/local/bin/docker-compose\n```\n\n- 目录\n建立一个目录，然后在目录中建立docker-compose.yml，内容如下：\n```bash\nversion: \"3.7\" # 这个是配置文件的版本，不同的版本号声明方式会有细微的不同\nservices:\n info:\n container_name: hello-docker\n image: cosyer/hello-docker:1.0.0\n ports:\n - \"8082:80\"\n restart: on-failure\n```\n\n- 启动\n```bash\ndocker-compose up info\n```\ndocker-compose 会帮我们自动去拉镜像，创建容器，将容器中的80端口映射为宿主机的8082端口。restart字段还要求 docker-compose 当发现容器意外挂掉时\n重新启动容器，类似于 pm2，所以你不必再在容器内使用 pm2\n\n如果想要更新一个镜像创建新容器，只需要：\n```bash\ndocker-compose pull info\ndocker-compose stop info\ndocker-compose rm info\ndocker-compose up -d info # -d 代表后台运行\n```\n","tags":["解决方案"],"categories":["工具"]},{"title":"Nginx","url":"%2F2020%2FNginx.html","content":"\n定义：轻量级、高性能的 Web 服务器，在现今的大型应用、网站基本都离不开 Nginx，已经成为了一项必选的技术；其实可以把它理解成 入口网关。\n\n> 当你去银行办理业务时，刚走进银行，需要到入门处的机器排队取号，然后按指令到对应的柜台办理业务，或者也有可能告诉你，今天不能排号了，回家吧！\n> 这样一个场景中，取号机器就是 Nginx(入口网关)。一个个柜台就是我们的业务服务器(办理业务)；银行中的保险箱就是我们的数据库(存取数据)；🤣\n\n![nginx](http://cdn.mydearest.cn/blog/images/nginx.png)\n\n## 特点\n1. 轻量级，配置方便灵活，无侵入性；\n2. 占用内存少，启动快，性能好；\n3. 高并发，事件驱动，异步；\n4. 热部署，修改配置热生效；\n\n---\n\n\n## 架构模型\n- 基于 socket 与 Linux epoll (I/O 事件通知机制)，实现了高并发；\n - 基于 socket 与 Linux epoll (I/O 事件通知机制)，实现了 高并发；\n - 磁盘不足的情况，可能会导致阻塞；\n\n- Master-worker 进程模式\n - Nginx 启动时会在内存中常驻一个 Master 主进程\n - 读取配置文件\n - 创建、绑定、关闭 socket\n - 启动、维护、配置 worker 进程\n - 编译脚本、打开日志\n - master 进程会开启配置数量的 worker 进程，比如根据 CPU 核数等\n - 利用 socket 监听连接，不会新开进程或线程，节约了创建与销毁进程的成本\n - 检查网络、存储，把新连接加入到轮询队列中，异步处理\n - 能有效利用 cpu 多核，并避免了线程切换和锁等待\n- 热部署模式\n - 当我们修改配置热重启后，master 进程会以新的配置新创建 worker 进程，新连接会全部交给新进程处理\n - 老的 worker 进程会在处理完之前的连接后被 kill 掉，逐步全替换成新配置的 worker 进程\n\n## 配置\n\n### 官网下载\n\n### 配置文件路径： /usr/local/etc/nginx/nginx.conf\n\n### 启动: 终端输入 nginx，访问 localhost:8080 就能看到 Welcome...\n\n### 停止与启动\n```bash\nnginx -s stop: # 停止服务\nnginx -s reload # 热重启服务\n```\n\n### 配置代理\n```bash\nserver {\n listen 80;\n location / {\n proxy_pass http://xxx.xxx.xx.xx:3000;\n }\n}\n```\n\n## 常用场景\n### 代理\n其实 Nginx 可以算一层 代理服务器，将客户端的请求处理一层后，再转发到业务服务器，这里可以分成两种类型，其实实质就是请求的转发，使用 Nginx 非常合适、高效；\n\n### 正向代理(VPN)\n\n- 即用户通过访问这层正向代理服务器，再由代理服务器去到原始服务器请求内容后，再返回给用户；\n- 例如我们常使用的 VPN 就是一种常见的正向代理模式。通常我们无法直接访问谷歌服务器，但是通过访问一台国外的服务器，再由这台服务器去请求谷歌返回给用户，用户即可访问谷歌；\n\n#### 特点\n1. 代理服务器属于`客户端层`，称之为正向代理；\n2. 代理服务器是`为用户服务`，对于用户是透明的，用户知道自己访问代理服务器；\n3. 对内容服务器来说是隐藏的，内容服务器并无法分清访问是来自用户或者代理；\n\n![forward-agent](http://cdn.mydearest.cn/blog/images/forward-agent.png)\n\n### 反向代理(Nginx)\n\n- 用户访问头条的反向代理网关，通过网关的一层处理和调度后，再由网关将访问转发到内部的服务器上，返回内容给用户；\n\n#### 特点\n1. 代理服务器属于`服务端层`，因此称为反向代理。通常代理服务器与内部内容服务器会隶属于同一内网或者集群；\n2. 代理服务器是`为内容服务器`服务的，对用户是隐藏的，用户不清楚自己访问的具体是哪台内部服务器；\n\n![reverse-proxy](http://cdn.mydearest.cn/blog/images/reverse-proxy.png)\n\n#### 反向代理的好处:\n\n1. 安全与权限:\n用户访问必须通过反向代理服务器，也就是便可以在做这层做统一的请求校验，过滤拦截不合法、危险的请求，从而就能更好的保证服务器的安全与稳定；\n\n2. 负载均衡: 能有效分配流量，最大化集群的稳定性，保证用户的访问质量；\n\n##### 负载均衡\n- 负载均衡是基于反向代理下实现的一种 流量分配 功能，目的是为了达到服务器资源的充分利用，以及更快的访问响应；\n\n- 其实很好理解，还是以上面银行的例子来看: 通过门口的取号器，系统就可以根据每个柜台的业务排队情况进行用户的分配，使每个柜台都保持在一个比较高效的运作状态，避免出现分配不均的情况；\n\n- 由于用户并不知道内部服务器中的队列情况，而反向代理服务器是清楚的，因此通过Nginx，便能很简单地实现流量的均衡分配；\n\n- Nginx 实现: Upstream模块，这样当用户访问 http://xxx 时，流量便会被按照一定的规则分配到upstream中的3台服务器上；\n\n```js\nhttp {\n upstream xxx {\n server 1.1.1.1:3001;\n server 2.2.2.2:3001;\n server 3.3.3.3:3001;\n }\n server {\n listen 8080;\n location / {\n proxy_pass http://xxx;\n }\n }\n}\n```\n- 分配的策略\n - 分配的权重(weight)\n ```js\n upstream xxx {\n server 1.1.1.1:3001 weight=1;\n server 2.2.2.2:3001 weight=1;\n server 3.3.3.3:3001 weight=8;\n }\n ```\n - 时间顺序(默认): 按用户的访问的顺序逐一的分配到正常运行的服务器上；\n - 连接数优先(least_conn): 优先将访问分配到列表中连接数队列最短的服务器上；\n - 响应时间优先(fair): 优先将访问分配到列表中访问响应时间最短的服务器上；\n - ip_hash: 通过 ip_hash 指定，使每个 ip 用户都访问固定的服务器上，有利于用户特异性数据的缓存，例如本地 session 服务等\n - url_hash: 通过 url_hash 指定，使每个 url 都分配到固定的服务器上，有利于缓存；\n\n## Nginx 对于前端的作用\n1. 快速配置静态服务器(当访问 localhost:80 时，就会默认访问到 /Users/files/index.html)\n```js\nserver {\n\tlisten 80; \n\tserver_name localhost; \n\t\t\n\tlocation / {\n\t\troot /Users/files;\n\t\tindex index.html;\n\t}\n}\n```\n\n2. 访问限制(可以制定一系列的规则进行访问的控制，例如直接通过 ip 限制)\n```bash\n# 屏蔽 192.168.1.1 的访问；\n# 允许 192.168.1.2 ~ 10 的访问；\nlocation / {\n deny 192.168.1.1;\n allow 192.168.1.2/10;\n deny all;\n}\n```\n\n3. 解决跨域(其实跨域是浏览器的安全策略，这意味着只要不是通过浏览器，就可以绕开跨域的问题。所以只要通过在同域下启动一个 Nginx 服务，转发请求即可)\n```bash\nlocation ^~/api/ {\n\t# 重写请求并代理到对应域名下\n rewrite ^/api/(.*)$ /$1 break;\n proxy_pass https://www.cross-target.com/;\n}\n```\n\n4. 图片处理(通过 ngx_http_image_filter_module 这个模块，可以作为一层图片服务器的代理，在访问的时候 对图片进行特定的操作，例如裁剪，旋转，压缩等)\n\n5. 本地代理，绕过白名单限制\n\n- 例如我们在接入一些第三方服务时经常会有一些域名白名单的限制，如果我们在本地通过localhost进行开发，便无法完成功能。这里我们可以做一层本地代理，便可以直接通过指定域名访问本地开发环境；\n\n```js\nserver {\nlisten 80;\nserver_name www.toutiao.com;\n\n// server_name xxxx.cn xxxx.xxxx.cn;\n// rewrite ^/(.*) https://xxx.xxxx.cn permanent; #跳转到Https\n\nlocation / {\n proxy_pass http://localhost:3000;\n }\n}\n```\n","tags":["解决方案"],"categories":["工具"]},{"title":"Hybrid混合方案","url":"%2F2020%2FHybrid.html","content":"\n随着 Web技术 和 移动设备 的快速发展，在各家大厂中，Hybrid 技术已经成为一种最主流最不可取代的架构方案之一。一套好的 Hybrid 架构方案能让 App 既能拥有极致的体验和性能，同时也能拥有Web技术灵活的开发模式、跨平台能力以及热更新机制。因此，相关的 Hybrid 领域人才也是十分的吃香，精通Hybrid 技术和相关的实战经验，也是面试中一项大大的加分项。\n\n## 混合方案简析\nHybrid App，俗称 混合应用，即混合了 Native技术 与 Web技术 进行开发的移动应用。现在比较流行的混合方案主要有三种，主要是在UI渲染机制上的不同:\n\n### Webview UI\n\n#### 通过 JSBridge 完成 H5 与 Native 的双向通讯，并 基于 Webview 进行页面的渲染；\n##### 优势: 简单易用，架构门槛/成本较低，适用性与灵活性极强；\n##### Webview 性能局限，在复杂页面中，表现远不如原生页面；\n\n### Native UI\n\n#### 通过 JSBridge 赋予 H5 原生能力，并进一步将 JS 生成的虚拟节点树(Virtual DOM)传递至 Native 层，并使用 原生系统渲染。\n##### 优势: 用户体验基本接近原生，且能发挥 Web技术 开发灵活与易更新的特性；\n##### 上手/改造门槛较高，最好需要掌握一定程度的客户端技术。相比于常规Web开发，需要更高的开发调试、问题排查成本；\n\n\n### 小程序\n\n#### 通过更加定制化的 JSBridge，赋予了 Web 更大的权限，并使用双 WebView 双线程的模式隔离了 JS逻辑 与 UI渲染，形成了特殊的开发模式，加强了 H5 与 Native 混合程度，属于第一种方案的优化版本；\n##### 优势: 用户体验好于常规 Webview 方案，且通常依托的平台也能提供更为友好的开发调试体验以及功能；\n##### 劣势: 需要依托于特定的平台的规范限定\n\n---\n\n\n## Webview\nWebview 是 Native App 中内置的一款基于Webkit内核的浏览器，主要由两部分组成:\n- WebCore 排版引擎\n- JSCore 解析引擎\n\n在原生开发 SDK 中 Webview 被封装成了一个组件，用于作为 Web页面 的容器。因此作为宿主的客户端中拥有更高的权限，可以对 Webview 中的Web页面进行配置和开发。\nHybrid技术中双端的交互原理，便是基于 Webview 的一些 API 和特性。\n\n## 交互原理\nHybrid技术中最核心的点就是Native端与H5端之间的双向通讯层，其实这里也可以理解为我们需要一套跨语言通讯方案，便是我们常听到的JSBridge。\n\n### JavaScript 通知 Native\n1. API注入，Native 直接在 JS 上下文中挂载数据或者方法\n\n延迟较低，在安卓4.1以下具有安全性问题，风险较高\n\n2. WebView URL Scheme 跳转拦截\n\n兼容性好，但延迟较高，且有长度限制\n\n3. WebView 中的 prompt/console/alert拦截(通常使用 prompt)\n\n### Native 通知 Javascript\n1. IOS: stringByEvaluatingJavaScriptFromString\n```js\n// Swift\nwebview.stringByEvaluatingJavaScriptFromString(\"alert('NativeCall')\")\n```\n\n2. Android: loadUrl (4.4-)\n```js\n// 调用js中的JSBridge.trigger方法\n// 该方法的弊端是无法获取函数返回值；\nwebView.loadUrl(\"javascript:JSBridge.trigger('NativeCall')\")\n```\n\n3. Android: evaluateJavascript (4.4+)\n```js\n// 4.4+后使用该方法便可调用并获取函数返回值；\nmWebView.evaluateJavascript（\"javascript:JSBridge.trigger('NativeCall')\", new ValueCallback() {\n @Override\n public void onReceiveValue(String value) {\n //此处为 js 返回的结果\n }\n});\n```\n\n## 接入方案\n整套方案需要 Web 与 Native 两部分共同来完成:\n\n- Native: 负责实现URL拦截与解析、环境信息的注入、拓展功能的映射、版本更新等功能；\n- JavaScirpt: 负责实现功能协议的拼装、协议的发送、参数的传递、回调等一系列基础功能。\n\n接入方式:\n- 在线H5: 直接将项目部署于线上服务器，并由客户端在 HTML 头部注入对应的 Bridge。\n - 优势: 接入/开发成本低，对 App 的侵入小；\n - 劣势: 重度依赖网络，无法离线使用，首屏加载慢；\n\n- 内置离线包: 将代码直接内置于 App 中，即本地存储中，可由 H5 或者 客户端引用 Bridge。\n - 优势: 首屏加载快，可离线化使用；\n - 劣势: 开发、调试成本变高，需要多端合作，且会增加 App 包体积\n\n## 5. 优化方案简述\n- Webview 预加载: Webview 的初始化其实挺耗时的。我们测试过，大概在100~200ms之间，因此如果能前置做好初始化于内存中，会大大加快渲染速度。\n- 更新机制: 使用离线包的时候，便会涉及到本地离线代码的更新问题，因此需要建立一套云端下发包的机制，由客户端下载云端最新代码包 (zip包)，并解压替换本地代码。\n - 增量更新: 由于下发包是一个下载的过程，因此包的体积越小，下载速度越快，流量损耗越低。只打包改变的文件，客户端下载后覆盖式替换，能大大减小每次更新包的体积。 \n - 条件分发: 云平台下发更新包时，可以配合客户端设置一系列的条件与规则，从而实现代码的条件更新:\n - 单 地区 更新: 例如一个只有中国地区才能更新的版本；\n - 按 语言 更新: 例如只有中文版本会更新；\n - 按 App 版本 更新: 例如只有最新版本的 App 才会更新；\n - 灰度 更新: 只有小比例用户会更新；\n - AB测试: 只有命中的用户会更新；\n- 降级机制: 当用户下载或解压代码包失败时，需要有套降级方案，通常有两种做法:\n\n - 本地内置: 随着 App 打包时内置一份线上最新完整代码包，保证本地代码文件的存在，资源加载均使用本地化路径；\n - 域名拦截: 资源加载使用线上域名，通过拦截域名映射到本地路径。当本地不存在时，则请求线上文件，当存在时，直接加载；\n\n- 跨平台部署: Bridge层 可以做一套浏览器适配，在一些无法适配的功能，做好降级处理，从而保证代码在任何环境的可用性，一套代码可同时运行于 App内 与 普通浏览器；\n-环境系统: 与客户端进行统一配合，搭建出 正式 / 预上线 / 测试 / 开发环境，能大大提高项目稳定性与问题排查；\n- 开发模式:\n - 能连接PC Chrome/safari 进行代码调试；\n - 具有开发调试入口，可以使用同样的 Webview 加载开发时的本地代码；\n - 具备日志系统，可以查看 Log 信息；\n","tags":["解决方案"],"categories":["工具"]},{"title":"如何在 create-react-app 中使用 CSS Modules","url":"%2F2020%2F%E5%A6%82%E4%BD%95%E5%9C%A8%20create-react-app%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20CSS%20Modules.html","content":"\n先简单了解下什么是 [CSS Modules](/~https://github.com/css-modules/css-modules)\n\n> A CSS Module is a CSS file in which all class names and animation names are scoped locally by default\n\n简单点说 CSS Module 是具有局部作用域的 css 文件。既然提到了局部作用域，那么肯定有全局作用域，在 create-react-app 中，我们引入 css 文件通常为以下形式：\n\n```css\n/* index.css */\n.color {\n color: red;\n}\n```\n\n```js\n/* index.tsx */\nimport React, { Component } from 'react'\nimport './index.css'\n\nexport default class Index extends Component {\n // ...\n}\n```\n\n---\n\n\n## 全局污染和错误覆盖\n\n这种引入方法就会出现全局污染的问题，CSS 使用全局选择器机制来设置样式，优点是方便重写样式，缺点是所有的样式都是全局生效，样式可能被错误覆盖。假定一个页面有以下两个组件：\n\n-
    ，内容如下：\n```js\nimport React, { Component } from 'react'\nimport './header.css'\n\nexport default class Index extends Component {\n // ...\n render() {\n return
    Header color
    \n }\n}\n```\n\n- header.css\n```css\n.color {\n color: red;\n}\n```\n\n- , 内容如下：\n```js\nimport React, { Component } from 'react'\nimport './content.css'\n\nexport default class Index extends Component {\n // ...\n render() {\n return
    Content color
    \n }\n}\n```\n\n- content.css\n```css\n.color {\n color: green;\n}\n```\n\n我们期待在页面上 Header color 的字的颜色为 red，Content color 为 green，但实际上是两个都为 green，这就是因为我们直接引入 header.css 和 content.css 后，样式拥有全局作用域，而相同的样式又可能出现错误地覆盖，因此就出现了上面的情况。\n\n避免这种情况在 create-react-app 的方法就是使用 CSS Modules，使用方法就是将对应的 css 文件名称命名为 [name].module.css 的形式（使用 less 或者 sass 类似），以 Header 组件为例，修改如下：\n```css\n/* header.module.css */\n.color {\n color: red;\n}\n```\n\n```js\nimport React, { Component } from 'react'\nimport headerStyle from './header.module.css'\n\nexport default class Index extends Component {\n // ...\n render() {\n return
    Header color
    \n }\n}\n```\n\n这样 Header color 的颜色就会为 red。\n\n它的实现过程就是利用 Webpack 的 css-loader 生成（基本）唯一的 class 名称，在 create-react-app 中会以 [filename]_[classname]__[hash] 的命名规则来生成 class 名称，例如 Header 组件生成后的 html 如下：\n```html\n
    Header color
    \n```\n\n使用了 CSS Modules 后，就相当于给每个 class 名外加加了一个 :local，以此来实现样式的局部化，如果你想切换到全局模式，使用对应的 :global。:local 与 :global 的区别是 CSS Modules 只会对 :local 块的 class 样式做规则处理，:global 的样式编译后不变。\n\n```css\n.color {\n color: red\n}\n\n/* 以上与下面等价 */\n:local(.color) {\n color: red; \n}\n\n/* 定义全局样式 */\n:global(.global-bg) {\n background-color: red;\n}\n```\n\n## composes处理复用\n在开发中会遇到样式的复用问题，CSS Modules 只提供了唯一的方式来处理：`composes` 组合:\n\n```css\n/* 基础样式 */\n.base {\n font-size: 20px;\n color: #82D7F7\n}\n\n.active {\n composes: base;\n /* 组合外部文件 */\n composes: bold from './content.module.css';\n /* active 其他样式 */\n text-decoration: underline;\n}\n```\n\n在 active 中 composes base，编译后会 active 会变成三个 class\n```html\n
    active
    \n```\n\n## 总结\n在 create-react-app 中使用 CSS Modules 会频繁的输入 styles.**，可以使用 [react-css-modules](/~https://github.com/gajus/react-css-modules)来避免这点，它通过高阶函数的形式来避免重复输入 styles.**。\n\n栗子↓\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport styles from './table.css';\n\nclass Table extends React.Component {\n render () {\n return
    \n
    \n
    A0
    \n
    B0
    \n
    \n
    ;\n }\n}\nexport default CSSModules(Table, styles);\n```\n\n有兴趣的同学可以参考模拟下`react-css-modules`的实现。\n\n总的来说在 create-react-app 中使用 CSS Modules 还是比较容易，如果还没有在项目中尝试的话非常值得去使用 CSS Modules👏👏👏。\n","tags":["性能优化"],"categories":["JS"]},{"title":"TypeScript 中，interface 和 type 的区别","url":"%2F2020%2FTypeScript%20%E4%B8%AD%EF%BC%8Cinterface%20%E5%92%8C%20type%20%E7%9A%84%E5%8C%BA%E5%88%AB.html","content":"\n在 `TypeScript` 中，`interface` 和 `type` 主要用于类型的声明，它们的相同点以及区别如下：\n\n---\n\n\n## 相同点\n\n### 都可以描述一个对象或者函数\n```js\n/* interface */\ninterface User {\n name: string\n age: number\n}\n\ninterface SetUser {\n (name: string, age: number): string\n}\n```\n\n```js\n/* type */\ntype User = {\n name: string\n age: number\n}\n\ntype SetUser = {\n (name: string, age: number): string\n}\n```\n\n### 都可以进行拓展\n```js\n/* interface */\ninterface User {\n name: string\n age: number\n}\n\ninterface ProUser extends User {\n email: string\n}\n\ntype VipUserType = {\n readonly vip: boolean\n}\n\n/* interface 和 type 拓展*/\ninterface VipUserInterfce extends VipUserType {\n member: boolean\n}\n```\n\n```js\n/* type */\ntype User = {\n name: string\n age: number\n}\n\ntype ProUser = User & {\n email: string\n}\n\ninterface VipUserInterface {\n readonly vip: boolean\n}\n\n/* type 与 interface 拓展 */\ntype VipUserType = VipUserInterface & {\n member: boolean\n}\n```\n\n## 区别\n\n### type 可以声明基本类型别名，联合类型，元组类型，而 interface 不可以\n```js\n/* 基本类型 */\ntype Name = string\n\n/* 联合类型 */\ninterface Dog {}\ninterface Cat {}\n\ntype Pet = Dog | Cat\n\n/* 元组类型 */\ntype PetList = [Dog, Cat]\n```\n\n### interface 可以进行类型合并，而 type 不可以\n```js\ninterface Cloner {\n clone(animal: Animal): Animal\n}\n\ninterface Cloner {\n clone(animal: Sheep): Sheep\n}\n\ninterface Cloner {\n clone(animal: Dog): Dog\n clone(animal: Cat): Cat\n}\n\n// 以上三个 interface 会被合并成一个声明\ninterface Cloner {\n clone(animal: Dog): Dog\n clone(animal: Cat): Cat\n clone(animal: Sheep): Sheep\n clone(animal: Animal): Animal\n}\n```\n\n[关于 declaration-merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)\n","tags":["性能优化"],"categories":["JS"]},{"title":"大文件分片上传优化","url":"%2F2020%2F%E5%A4%A7%E6%96%87%E4%BB%B6%E5%88%86%E7%89%87%E4%B8%8A%E4%BC%A0%E4%BC%98%E5%8C%96.html","content":"\n> 在开发过程中，会遇到在网站上传 100 MB 以上的文件经常失败，重试也要等老半天。那么应该怎么做才能快速上传，就算失败了再次发送也能从上次中断的地方继续上传呢？\n\n## 整体思路\n第一步是结合项目背景，调研比较优化的解决方案。\n文件上传失败是老生常谈的问题，常用方案是将一个大文件切片成多个小文件，并行请求接口进行上传，所有请求得到响应后，在服务器端合并所有的分片文件。当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分，减少用户的等待时间，缓解服务器压力。这就是分片上传文件。\n\n流程图如下：\n![upload-flow](http://cdn.mydearest.cn/blog/images/upload-flow.png)\n\n---\n\n\n### 文件 MD5 加密\n- MD5 是文件的唯一标识，可以利用文件的 MD5 查询文件的上传状态。\n\n根据文件的修改时间、文件名称、最后修改时间等信息，通过 [spark-md5](https://www.npmjs.com/package/spark-md5) 生成文件的 MD5。需要注意的是，大规格文件需要分片读取文件，将读取的文件内容添加到 通过 [spark-md5](https://www.npmjs.com/package/spark-md5) 的 hash 计算中，直到文件读取完毕，最后返回最终的 hash 码到 callback 回调函数里面。这里可以根据需要添加文件读取的进度条。\n\n```js\nfunction md5File(file) {\n return new Promise((resolve, reject) => {\n var blobSlice =\n File.prototype.slice ||\n File.prototype.mozSlice ||\n File.prototype.webkitSlice,\n chunkSize = file.size / 100, // 分成100份\n chunks = 100,\n currentChunk = 0,\n spark = new SparkMD5.ArrayBuffer(),\n fileReader = new FileReader();\n\n fileReader.onload = function (e) {\n console.log(\"read chunk nr\", currentChunk + 1, \"of\", chunks);\n spark.append(e.target.result); // Append array buffer\n currentChunk++;\n\n if (currentChunk < chunks) {\n loadNext();\n } else {\n let cur = +new Date();\n console.log(\"finished loading\");\n // alert(spark.end() + '---' + (cur - pre)); // Compute hash\n let result = spark.end();\n resolve(result);\n }\n };\n\n fileReader.onerror = function () {\n console.warn(\"oops, something went wrong.\");\n };\n\n function loadNext() {\n var start = currentChunk * chunkSize,\n end =\n start + chunkSize >= file.size ? file.size : start + chunkSize;\n\n fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));\n $(\"#checkProcessStyle\").css({\n width: currentChunk + 1 + \"%\",\n });\n $(\"#checkProcessValue\").html(currentChunk + 1 + \"%\");\n }\n\n loadNext();\n });\n}\n```\n\n### 查询文件状态\n前端得到文件的 MD5 后，从后台查询是否存在名称为 MD5 的文件夹，如果存在，列出文件夹下所有文件，得到已上传的切片列表，如果不存在，则已上传的切片列表为空。\n\n```js\n// 校验文件的MD5\ncheckFileMD5 (file, fileName, fileMd5Value, onError) {\n const fileSize = file.size\n const { chunkSize, uploadProgress } = this\n this.chunks = Math.ceil(fileSize / chunkSize)\n return new Promise(async (resolve, reject) => {\n const params = {\n fileName: fileName,\n fileMd5Value: fileMd5Value,\n }\n const { ok, data } = await services.checkFile(params)\n if (ok) {\n this.hasUploaded = data.chunkList.length\n uploadProgress(file)\n resolve(data)\n } else {\n reject(ok)\n onError()\n }\n })\n}\n```\n\n### 文件分片\n文件上传优化的核心就是文件分片，Blob 对象中的 slice 方法可以对文件进行切割，File 对象是继承 Blob 对象的，因此 File 对象也有 slice 方法。\n定义每一个分片文件的大小变量为 chunkSize，通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks，使用 for 循环和 file.slice() 方法对文件进行分片，序号为 0 - n，和已上传的切片列表做比对，得到所有未上传的分片，push 到请求列表 requestList。\n\n![chunk](http://cdn.mydearest.cn/blog/images/chunk.png)\n\n```js\nasync checkAndUploadChunk (file, fileMd5Value, chunkList) {\n let { chunks, upload } = this\n const requestList = []\n for (let i = 0; i < chunks; i++) {\n let exit = chunkList.indexOf(i + '') > -1\n // 如果已经存在, 则不用再上传当前块\n if (!exit) {\n requestList.push(upload(i, fileMd5Value, file))\n }\n }\n console.log({ requestList })\n const result =\n requestList.length > 0\n ? await Promise.all(requestList)\n .then(result => {\n console.log({ result })\n return result.every(i => i.ok)\n })\n .catch(err => {\n return err\n })\n : true\n console.log({ result })\n return result === true\n}\n```\n\n### 上传分片\n调用 `Promise.all` 并发上传所有的切片，将切片序号、切片文件、文件 `MD5` 传给后台。\n后台接收到上传请求后，首先查看名称为文件 MD5 的文件夹是否存在，不存在则创建文件夹，然后通过 `fs-extra` 的 rename 方法，将切片从临时路径移动切片文件夹中，结果如下：\n\n![file-chunk](http://cdn.mydearest.cn/blog/images/file-chunk.png)\n\n当全部分片上传成功，通知服务端进行合并，当有一个分片上传失败时，提示“上传失败”。在重新上传时，通过文件 MD5 得到文件的上传状态，当服务器已经有该 MD5 对应的切片时，代表该切片已经上传过，无需再次上传，当服务器找不到该 MD5 对应的切片时，代表该切片需要上传，用户只需上传这部分切片，就可以完整上传整个文件，这就是文件的断点续传。\n\n```js\n// 上传chunk\nupload (i, fileMd5Value, file) {\n const { uploadProgress, chunks } = this\n return new Promise((resolve, reject) => {\n let { chunkSize } = this\n // 构造一个表单，FormData是HTML5新增的\n let end =\n (i + 1) * chunkSize >= file.size ? file.size : (i + 1) * chunkSize\n let form = new FormData()\n form.append('data', file.slice(i * chunkSize, end)) // file对象的slice方法用于切出文件的一部分\n form.append('total', chunks) // 总片数\n form.append('index', i) // 当前是第几片\n form.append('fileMd5Value', fileMd5Value)\n services\n .uploadLarge(form)\n .then(data => {\n if (data.ok) {\n this.hasUploaded++\n uploadProgress(file)\n }\n console.log({ data })\n resolve(data)\n })\n .catch(err => {\n reject(err)\n })\n })\n}\n```\n### 上传进度\n虽然分片批量上传比大文件单次上传会快很多，也还是有一段加载时间，这时应该加上上传进度的提示，实时显示文件上传进度。\n原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，这个事件会返回文件已上传的大小和总大小。项目使用 [axios](https://www.kancloud.cn/yunye/axios/234845) 对 ajax 进行封装，可以在 config 中增加 `onUploadProgress` 方法，监听文件上传进度。\n\n```js\nconst config = {\n onUploadProgress: progressEvent => {\n var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'\n }\n}\nservices.uploadChunk(form, config)\n```\n\n### 合并分片\n上传完所有文件分片后，前端主动通知服务端进行合并，服务端接受到这个请求时主动合并切片，通过文件 MD5 在服务器的文件上传路径中找到同名文件夹。从上文可知，文件分片是按照分片序号命名的，而分片上传接口是异步的，无法保证服务器接收到的切片是按照请求顺序拼接。所以应该在合并文件夹里的分片文件前，根据文件名进行排序，然后再通过 `concat-files` 合并分片文件，得到用户上传的文件。至此大文件上传就完成了。\n\n![file-merge](http://cdn.mydearest.cn/blog/images/file-merge.png)\n\n```js\n// node\n// 合并文件\nexports.merge = {\n validate: {\n query: {\n fileName: Joi.string()\n .trim()\n .required()\n .description('文件名称'),\n md5: Joi.string()\n .trim()\n .required()\n .description('文件md5'),\n size: Joi.string()\n .trim()\n .required()\n .description('文件大小'),\n },\n },\n permission: {\n roles: ['user'],\n },\n async handler (ctx) {\n const { fileName, md5, size } = ctx.request.query\n let { name, base: filename, ext } = path.parse(fileName)\n const newFileName = randomFilename(name, ext)\n await mergeFiles(path.join(uploadDir, md5), uploadDir, newFileName, size)\n .then(async () => {\n const file = {\n key: newFileName,\n name: filename,\n mime_type: mime.getType(`${uploadDir}/${newFileName}`),\n ext,\n path: `${uploadDir}/${newFileName}`,\n provider: 'oss',\n size,\n owner: ctx.state.user.id,\n }\n const key = encodeURIComponent(file.key)\n .replace(/%/g, '')\n .slice(-100)\n file.url = await uploadLocalFileToOss(file.path, key)\n file.url = getFileUrl(file)\n const f = await File.create(omit(file, 'path'))\n const files = []\n files.push(f)\n ctx.body = invokeMap(files, 'toJSON')\n })\n .catch(() => {\n throw Boom.badData('大文件分片合并失败，请稍候重试~')\n })\n },\n}\n```\n\n\n## 仓库代码\n[nodeFileUploadDemo](/~https://github.com/cosyer/nodeFileUploadDemo)\n\n## 总结\n本文讲述了大规格文件上传优化的一些做法，总结为以下 4 点：\n\n1. `Blob.slice` 将文件切片，并发上传多个切片，所有切片上传后告知服务器合并，实现大文件分片上传；\n2. 原生 XMLHttpRequest 的 `onprogress` 对切片上传进度的监听，实时获取文件上传进度；\n3. `spark-md5 `根据文件内容算出文件 MD5，得到文件唯一标识，与文件上传状态绑定；\n4. 分片上传前通过文件 MD5 查询已上传切片列表，上传时只上传未上传过的切片，实现断点续传。\n","tags":["性能优化"],"categories":["Node"]},{"title":"30分钟精通React Hooks","url":"%2F2020%2F30%E5%88%86%E9%92%9F%E7%B2%BE%E9%80%9AReact%20Hooks.html","content":"\n它来了，它来了，16.8版本`hooks`成功加入(*^▽^*)\n\n你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？\n—— 拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。\n\n你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？\n—— 拥有了Hooks，生命周期钩子函数可以先丢一边了。\n\n你在还在为组件中的this指向而晕头转向吗？\n—— 既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。\n\n---\n\n\n## React为什么要搞一个Hooks？\n***想要复用一个有状态的组件太麻烦了！***\n我们都知道react的核心思想是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。\n\n那之前，官方推荐怎么解决这个问题呢？答案是：[渲染属性（Render Props）](https://reactjs.org/docs/render-props.html)和[高阶组件（Higher-Order Components）](https://reactjs.org/docs/higher-order-components.html)。\n\n### 渲染属性\n渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到DataProvider组件包含了所有跟状态相关的代码，而Cat组件则可以是一个单纯的展示型组件，这样一来DataProvider就可以单独复用了。\n\n```js\nimport Cat from 'components/cat'\nclass DataProvider extends React.Component {\n constructor(props) {\n super(props);\n this.state = { target: 'Zac' };\n }\n\n render() {\n return (\n
    \n {this.props.render(this.state)}\n
    \n )\n }\n}\n\n (\n \n)}/>\n```\n虽然这个模式叫Render Props，但不是说非用一个叫render的props不可，习惯上大家更常写成下面这种：\n```js\n\n {data => (\n \n )}\n\n```\n\n#### 其他🌰\n```js\nclass GithubProfile extends React.PureComponent {\n state: IStates = {\n profile: {}\n }\n\n componentDidMount() {\n fetch('https://api.github.com/users/cosyer')\n .then(response => {\n return response.json()\n })\n .then(res => {\n this.setState({\n profile: res\n })\n })\n }\n \n render() {\n const { profile } = this.state\n return (\n
    \n \"avatar\"\n
    name: {profile.name}
    \n
    company: {profile.company}
    \n
    bio: {profile.bio}
    \n
    \n )\n }\n}\n```\n如果其它页面也有相同的需求，或者数据一样，仅仅 UI 不一样，那么我们该怎么处理？其实这个问题目的很简单，那就是：如何实现代码复用。\n```js\n// Render Props\nclass Profile extends React.Component {\n constructor(props:IProps) {\n super(props)\n this.state = {\n profile: {}\n }\n }\n\n componentDidMount() {\n fetch('https://api.github.com/users/cosyer')\n .then(response => {\n return response.json()\n })\n .then(res => {\n this.setState({\n profile: res\n })\n })\n }\n\n render() {\n const { profile } = this.state\n return {this.props.children(profile)}\n }\n}\n```\n定义 props 渲染函数：\n```js\nclass ProfileRenderProps extends React.PureComponent {\n render() {\n return (\n \n {(profile:any) => (\n
    \n \"avatar\"\n
    name: {profile.name}
    \n
    company: {profile.company}
    \n
    bio: {profile.bio}
    \n
    \n )}\n     \n )\n }\n}\n```\n#### 缺点\n- 回调地狱\n\n### 高阶组件\n说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。\n\n看个栗子\n```js\nconst withUser = WrappedComponent => {\n const user = sessionStorage.getItem(\"user\");\n return props => ;\n};\n\nconst UserPage = props => (\n
    \n

    My name is {props.user}!

    \n
    \n);\n\nexport default withUser(UserPage);\n```\n`withUser`函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。\n但是这两种模式会增加代码的层级关系，而hooks简洁多了，没有多余的层级嵌套，把各种想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook即可。\n\n***生命周期钩子函数里的逻辑太乱了吧！***\n我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观。\n\n***class真的太让人困惑了！***\n我们用class来创建react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，我们要经常写这样的代码：`this.handleClick = this.handleClick.bind(this)`，或者是这样的代码：`\n
    \n );\n }\n}\n```\n\n### hooks改造\n```js\nimport { useState } from 'react';\n\nfunction Example() {\n const [count, setCount] = useState(0);\n\n return (\n
    \n

    You clicked {count} times

    \n \n
    \n );\n}\n```\n是不是简单多了！可以看到，Example变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）。\n\n除了`useState`这个hook外，还有很多别的hook，比如`useEffect`提供了类似于`componentDidMount`等生命周期钩子的功能，`useContext`提供了上下文（context）的功能等等。\n\n`useState`是react自带的一个hook函数，它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前的状态值，第[1]\n项是可以改变状态值的方法函数。\n\n当用户点击按钮时，我们调用setCount函数，这个函数接收的参数是修改过的新状态值。接下来的事情就交给react了，react将会重新渲染我们的Example组件，并且使用的是更新后的新的状态，即count=1。\nExample本质上也是一个普通的函数，为什么它可以记住之前的状态？Example函数每次执行的时候，都是拿的上一次执行完的状态值作为初始值？\n\n### 组件有多个状态值\n```js\nfunction ExampleWithManyStates() {\n const [age, setAge] = useState(42);\n const [fruit, setFruit] = useState('banana');\n const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);\n}\n```\n`useState`接收的初始值没有规定一定要是`string/number/boolean`这种简单数据类型，它完全可以接收对象或者数组作为参数。唯一需要注意的点是，之前我们的`this.setState`做的是合并状态后返回一个新\n状态，而`useState`是直接替换老状态后返回新状态。最后，react也给我们提供了一个`useReducer`的hook，如果你更喜欢redux式的状态管理方案的话。\n\n从`ExampleWithManyStates`函数我们可以看到，`useState`无论调用多少次，相互之间是独立的。其实我们看hook的“形态”，有点类似之前被官方否定掉的`Mixins`这种方案，都是提供一种“插拔式的功能注入”\n的能力。而`Mixins`之所以被否定，是因为`Mixins`机制是让多个Mixins共享一个对象的数据空间，这样就很难确保不同`Mixins`依赖的状态不发生冲突。不同组件调用同一个hook也能保证各自状态的独立性，这\n就是两者的本质区别。\n\n### react是怎么保证多个useState的相互独立的？\n看上面给出的`ExampleWithManyStates`例子，我们调用了三次`useState`，每次我们传的参数只是一个值（如42，‘banana’），我们根本没有告诉react这些值对应的key是哪个，那react是怎么保证这三个useState找到它对应的state呢？\n\n```js\n//第一次渲染\nuseState(42); //将age初始化为42\nuseState('banana'); //将fruit初始化为banana\nuseState([{ text: 'Learn Hooks' }]); //...\n\n//第二次渲染\nuseState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）\nuseState('banana'); //读取状态变量fruit的值（这时候传的参数banana直接被忽略）\nuseState([{ text: 'Learn Hooks' }]); //...\n```\n\n答案是，react是根据`useState`出现的顺序来定的。我们具体来看一下：\n```js\nlet showFruit = true;\nfunction ExampleWithManyStates() {\n const [age, setAge] = useState(42);\n \n if(showFruit) {\n const [fruit, setFruit] = useState('banana');\n showFruit = false;\n }\n \n const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);\n}\n```\n\n```js\n//第一次渲染\nuseState(42); //将age初始化为42\nuseState('banana'); //将fruit初始化为banana\nuseState([{ text: 'Learn Hooks' }]); //...\n\n//第二次渲染\nuseState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）\n// useState('banana'); \nuseState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值，导致报错\n```\n所以react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。\n\n## Effect Hooks\n同样是上个栗子，俺们增加一个新功能：\n```js\nimport { useState, useEffect } from 'react';\n\nfunction Example() {\n const [count, setCount] = useState(0);\n\n // 类似于componentDidMount 和 componentDidUpdate:\n useEffect(() => {\n // 更新文档的标题\n document.title = `You clicked ${count} times`;\n });\n\n return (\n
    \n

    You clicked {count} times

    \n \n
    \n );\n}\n```\n我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如\n`componentDidMount`，`componentDidUpdate`和`componentWillUnmount`。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三，厉害了！\n\n同时，由于前文所说hooks可以反复多次使用，相互独立。所以我们合理的做法是，给每一个副作用一个单独的useEffect钩子。这样一来，这些副作用不再一股脑堆在生命周期钩子里，代码变得更加清晰。\n\n### useEffect做了什么？\n首先，我们声明了一个状态变量count，将它的初始值设为0。然后我们告诉react，我们的这个组件有一个副作用。我们给`useEffect hook`传了一个匿名函数，这个匿名函数就是我们的副作用。在这个例子里，我\n们的副作用是调用`browser API`来修改文档标题。当react要渲染我们的组件时，它会先记住我们用到的副作用。等react更新了DOM之后，它再依次执行我们定义的副作用函数。\n\n这里要注意：\n1. react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染`componentDidMount`，和之后的更新导致的重新渲染`componentDidUpdate`。\n\n2. `useEffect`中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的`componentDidMount`或`componentDidUpdate`中的代码则是同步执行的。这种安排对大多数副作\n用说都是合理的，但有的情况除外，比如我们有时候需要先根据DOM计算出某个元素的尺寸再重新渲染，这时候我们希望这次重新渲染是同步发生的，也就是说它会在浏览器真的去绘制这个页面前发生。\n\n### useEffect怎么解绑一些副作用？\n这种场景很常见，当我们在`componentDidMount`里添加了一个注册，我们得在`componentWillUnmount`中，也就是组件被注销之前清除掉我们添加的注册，否则内存泄漏的问题就出现了。\n\n怎么清除呢？让我们传给`useEffect`的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。这种模式在一些pubsub模式的实现中很常见。\n```js\nimport { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n // 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup\n return function cleanup() {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n });\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}\n```\n这里有一个点需要重视！这种解绑的模式跟`componentWillUnmount`不一样。`componentWillUnmount`只会在组件被销毁前执行一次而已，而useEffect里的函数，每次组件渲染后都会执行一遍，包括副作用函数\n返回的这个清理函数也会重新执行一遍。所以我们一起来看一下面这个问题：\n\n### 为什么要让副作用函数每次组件更新都执行一遍？\n我们先看以前的模式：\n```js\ncomponentDidMount() {\n ChatAPI.subscribeToFriendStatus(\n this.props.friend.id,\n this.handleStatusChange\n );\n}\n\ncomponentWillUnmount() {\n ChatAPI.unsubscribeFromFriendStatus(\n this.props.friend.id,\n this.handleStatusChange\n );\n}\n```\n我们在`componentDidMount`注册，再在`componentWillUnmount`清除注册。但假如这时候props.friend.id变了怎么办？我们不得不再添加一个componentDidUpdate来处理这种情况：\n```js\ncomponentDidUpdate(prevProps) {\n // 先把上一个friend.id解绑\n ChatAPI.unsubscribeFromFriendStatus(\n prevProps.friend.id,\n this.handleStatusChange\n );\n // 再重新注册新但friend.id\n ChatAPI.subscribeToFriendStatus(\n this.props.friend.id,\n this.handleStatusChange\n );\n}\n```\n很繁琐，而我们但`useEffect`则没这个问题，因为它在每次组件更新后都会重新执行一遍。所以代码的执行顺序是这样的：\n```\n1.页面首次渲染\n2.替friend.id=1的朋友注册\n\n3.突然friend.id变成了2\n4.页面重新渲染\n5.清除friend.id=1的绑定\n6.替friend.id=2的朋友注册\n```\n\n### 怎么跳过一些不必要的副作用函数？\n按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改\n变时，才执行我们传的副作用函数（第一个参数）。\n\n```js\nuseEffect(() => {\n document.title = `You clicked ${count} times`;\n}, [count]); // 只有当count的值发生变化时，才会重新执行`document.title`这一句\n```\n当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是`componentDidMount`加`componentWillUnmount`的模式。不过这种用法可能带来bug，少用。\n\n## 怎么写自定义的Effect Hooks?\n为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里，so easy！看一个完整的例子，你就明白了。\n\n比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。\n```js\nimport { useState, useEffect } from 'react';\n\nfunction useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);\n };\n });\n\n return isOnline;\n}\n```\n这时候FriendStatus组件就可以简写为：\n```js\nfunction FriendStatus(props) {\n const isOnline = useFriendStatus(props.friend.id);\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}\n```\n假如这个时候我们又有一个朋友列表也需要显示是否在线的信息也可以复用：\n```js\nfunction FriendListItem(props) {\n const isOnline = useFriendStatus(props.friend.id);\n\n return (\n
  • \n {props.friend.name}\n
    • \n );\n}\n```\nfunky!!!\n\n比如还有\n\n### useProfile 使用 Hooks 实现 API 请求\n```js\n// useProfile\nconst useProfile = () => {\n const [profile, setProfile] = useState({} as TProfile)\n const [loading, setLoading] = useState(false)\n const [isError, setIsError] = useState(false)\n\n useEffect(() => {\n setLoading(true)\n fetch('https://api.github.com/users/gaearon')\n .then(response => {\n return response.json()\n })\n .then(res => {\n setProfile(res as TProfile)\n setIsError(false)\n setLoading(false)\n }).catch(()=> {\n setIsError(true)\n setLoading(false)\n })\n }, [])\n\n return { profile, loading,isError }\n}\n```\n使用 `useProfile` Hooks：\n```js\nconst UseProfilePage = () => {\n const { profile, loading, isError } = useProfile()\n return (\n \n {isError ? (\n
    Network Error...
    \n ) : (\n
    \n {loading ? (\n
    loading profile...
    \n ) : (\n \n \"avatar\"\n
    name: {profile.name}
    \n
    company: {profile.company}
    \n
    bio: {profile.bio}
    \n     \n )}\n
    \n )}\n     \n )\n}\n```\n### useInput 使用 Hooks 实现 input 输入逻辑\n```js\nconst useInput = (initialValue:string) => {\n const [value, setValue] = useState(initialValue)\n\n const handleChange = (e:any) => {\n setValue(e.target.value)\n }\n\n return {\n value,\n onChange: handleChange\n }\n}\n```\n```js\nconst useInputDemo = () => {\n const value = useInput('KuangPF')\n\n return (\n
    \n

    current name: {value.value}

    \n \n
    \n )\n}\n```\n\n## useContext\n`useContext` 是为了在 function 组件中使用类组件的 [context](https://reactjs.org/docs/context.html) API，使用方法很简单，首先创建一个 context：\n```js\nconst local = '🇨🇳'\nconst ThemeContext = React.createContext(local)\n```\n然后在 `useContext hook` 使用 context：\n```js\nfunction UseContextDemo() {\n const local = useContext(ThemeContext)\n return (\n
    \n

    local: {local}

    \n
    \n )\n}\n// render: 🇨🇳\n```\n在 class 组件中，如果想要修改 context 的值，我们会使用 Provider 提供 value 值，同样，在 function 组件中也可以：\n```js\nconst ThemeContext = React.createContext('🇨🇳')\n\nfunction Context() {\n const local = useContext(ThemeContext)\n return

    local: {local}

    \n}\n\nfunction App() {\n return (\n \n \n \n )\n}\n// render: 🇺🇸\n```\n\n## useReducer\n`useReducer` 是 `useState` 的一种代替方案，用于 state 之间有依赖关系或者比较复杂的场景。`useReducer` 接收三个参数：\n\n- reducer：(state, action) => newState\n- initialArg： 初始化参数\n- Init： 惰性初始化,返回初始化数据\n\n返回当前 state 以及配套的 dispatch 方法。首先看下 `useReducer` 处理简单的 state：\n```js\nfunction UseReducerDemo() {\n const [count, dispatch] = useReducer(state => {\n return state + 1\n }, 0)\n\n return (\n
    \n

    count: {count}

    \n {\n dispatch()\n }}\n >\n add\n \n
    \n )\n}\n```\n这个例子和使用 `useState` 一样，都达到了计数的效果。 该例子中，`useReducer` 初始化了 count 值为 0，传入的 reducer 很简单，当接收到一个 dispatch 时，将 count 的值增加 1。\n\n### 处理 state 有相互依赖的场景\n```js\nconst CountApp = () => {\n const [count, setCount] = useState(0)\n const [frozen, setFrozen] = useState(false)\n\n const increase = () => {\n setCount(prevCount => {\n if (frozen) {\n return prevCount\n }\n return prevCount + 1\n })\n }\n\n useEffect(() => {\n increase()\n setFrozen(true)\n increase()\n }, [])\n\n return

    count {count}

    \n}\n// render 1\n```\n原因在于 function 组件的更新机制，当引入 hooks 以后，function 组件也拥有了 state 的功能，当我们 setState 时，UI 会重新渲染，但在这个过程中**function 组件中，state 以及 props 都是静态值，不存在引用，或者也可以理解为 state 和 props 是一个 capture value，每次渲染的 state 和 props 都是独立的。**\n\n在这个例子中，由于 useEffect 传入的依赖为 []，即该副作用只会在 UI 第一次渲染结束后执行一次。而在这次 render 中，count 的值为 0， frozen 值为 false，所以第二次执行 increase 时，frozen 值依然为 false， setCount 返回的 prevCount 为 1 ，然后增加 1，这也就是为什么最后 render 的结果为 2，而不是 1。\n\n对于 state 有相互依赖的情况，我们可以用 `useReducer` 来处理：\n```js\nconst INCREASE = 'INCREASE'\nconst SET_FROZEN = 'SET_FROZEN'\n\nconst initialState = {\n count: 0,\n frozen: false\n}\n\nconst CountApp = () => {\n const reducer = (state: any, action: any) => {\n switch (action.type) {\n case INCREASE:\n if (state.frozen) {\n return state\n }\n return {\n ...state,\n count: state.count + 1\n }\n\n case SET_FROZEN:\n return {\n ...state,\n frozen: action.frozen\n }\n default:\n return state\n }\n }\n const [state, dispath] = useReducer(reducer, initialState)\n\n useEffect(() => {\n dispath({ type: INCREASE })\n dispath({ type: SET_FROZEN, frozen: true })\n dispath({ type: INCREASE })\n }, [])\n\n return

    current count: {state.count}

    \n}\n```\n\n### 如何用useState实现useReducer\n```js\nconst CountApp = () => {\n const [state, setState] = useState({\n count: 0,\n frozen: false,\n });\n\n const increase = () => {\n setState(prevState => {\n if (prevState.frozen) {\n return prevState;\n }\n return {\n ...prevState,\n count: state.count + 1,\n };\n });\n };\n\n const setFrozen = () => {\n setState(prevState => {\n return {\n ...prevState,\n frozen: true,\n };\n });\n };\n\n useEffect(() => {\n increase();\n setFrozen();\n increase();\n }, []);\n\n return

    current count: {state.count}

    ;\n // render：1\n};\n```\n`useReducer` 和 `useState` 相比，优势在于可以将使用 reducer 将一些逻辑进行抽离，进行集中化管理。\n\n## useCallback\n\n`useCallback` 可以理解为将函数进行了缓存，它接收一个回调函数和一个依赖数组，只有当依赖数组中的值发生改变时，该回调函数才会更新。\n```js\nfunction UseCallbackDemo() {\n const [count, setCount] = useState(0)\n\n const handleResize = useCallback(() => {\n console.log(`the current count is: ${count}`)\n }, [count])\n\n useEffect(() => {\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [handleResize])\n\n return (\n
    \n {\n setCount(count + 1)\n }}\n >\n click\n \n

    current count: {count}

    \n
    \n )\n}\n```\n该例子中，当改变 count 后，然后改变浏览器窗口大小，可以获取到最新的 count 。如果传入的依赖为 []，handleResize 不会更新，则改变浏览器窗口时， count 的值始终为 0 。\n\n## useMemo\n`useMemo` 对值进行了缓存，与 `useCallback` 类似，接收一个创建值的函数和一个依赖数组，它仅会在某个依赖项改变时才重新计算 memoized 值，这种优化有助于避免在每次渲染时都进行高开销的计算。\n\n```js\nfunction UseMemoDemo() {\n const [count, setCount] = useState(0)\n const [value, setValue] = useState('')\n\n const useMemoChild = useMemo(() => , [count])\n return (\n
    \n

    {count}

    \n {\n setCount(count + 1)\n }}\n >\n click\n \n
    \n setValue(e.target.value)} />\n {useMemoChild}\n
    \n )\n}\n\nfunction Child({ count }: { count: number }) {\n console.log('child render')\n return (\n \n

    useMemo hooks

    \n

    child count: {count}

    \n     \n )\n}\n```\n该例子中，UseMemoDemo 组件引用了 Child 组件，在 UseMemoDemo 组件中，定义了 count 和 value 两个 state，如果不使用 `useMemo`，那么每当 UseMemoDemo 中 input 发生改变时，Child 组件就会重\n新渲染。但 Child 组件 UI 只和 count 有关，那么这样就会造成 Child 组件无效更新，因此就引入了 `useMemo`，将 count 作为依赖传入，这样只有当 count 值发生改变时， Child 组件才会重新渲染。\n\n## useRef\n`useRef` 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数 （initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。在 function 组件中， 使用 `useRef` 主要可以完成以\n下两件事：\n\n1. 获取 dom 结构\n2. 保存变量\n\n先看一个获取 dom 节点, 点击 button 时，input 聚焦。\n```js\nfunction UseRefDemo() {\n const inputRef = useRef(null as any)\n\n const handleFocusInput = () => {\n inputRef.current.focus()\n }\n\n return (\n
    \n \n \n
    \n )\n}\n```\n官方demo\n```js\nfunction Counter() {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setTimeout(() => {\n console.log(`You clicked ${count} times`)\n }, 3000)\n })\n\n return (\n
    \n

    You clicked {count} times

    \n \n
    \n )\n}\n```\n如果我们 3s 点多次点击 button，那么控制台输出的结果会是 0,1,2,3…， 这是由于每次渲染时 count 的值都是固定的。但类似的逻辑在 class 组件中表现不一样：\n```js\ncomponentDidUpdate() {\n setTimeout(() => {\n console.log(`You clicked ${this.state.count} times`);\n }, 3000);\n}\n```\n在 class 组件中，我们在 3s 内多次点击 button，最后在控制台输出的结果是最后一次 count 更新的值。而在 function 组件中，我们使用 `useRef`实现这个效果 \n```js\nfunction useRefDemo() {\n const [count, setCount] = useState(0)\n const countRef = useRef(count)\n\n useEffect(() => {\n countRef.current = count\n setTimeout(() => {\n console.log(`You clicked ${countRef.current} times`)\n }, 2000)\n }, [count])\n\n return (\n
    \n

    count: {count}

    \n {\n setCount(count + 1)\n }}\n >\n click\n \n
    \n )\n}\n```\nuseRef 返回的对象在组件的整个生命周期内保持不变，每次渲染时返回的是同一个ref对象，因此 countRef.current 始终是最新的 count 值。\n\n## useImperativeHandle\n`useImperativeHandle` 可以让你在使用 ref 时，自定义暴露给父组件的实例值，在大多数情况下，应当避免使用 ref 这样的命令式代码。`useImperativeHandle` 应当与 `forwardRef` 一起使用：\n```js\nfunction FancyInput(props, ref) {\n const inputRef = useRef(null as any)\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus()\n }\n }))\n return \n}\n\nconst FancyInputRef = forwardRef(FancyInput)\n\nconst useImperativeHandleDemo = () => {\n const inputRef = useRef(null as any)\n\n useEffect(() => {\n inputRef.current.focus()\n })\n\n return \n}\n```\n\n## useLayoutEffect\n其函数签名 与 `useEffect` 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，`useLayoutEffect` 内部的更新计划将被同步刷\n新。\n```js\nconst BlinkyRender = () => {\n const [value, setValue] = useState(0);\n\n useEffect(() => {\n if (value === 0) {\n setValue(10 + Math.random() * 200);\n }\n }, [value]);\n\n return (\n
    setValue(0)}>value: {value}
    \n );\n};\n```\n当我们快速点击时，value 会发生随机变化，但 `useEffect` 是 UI 已经渲染到屏幕上以后才会执行，value 会先渲染为 0，然后在渲染成随机数，因此屏幕会出现闪烁。\n```js\nuseLayoutEffect(() => {\n if (value === 0) {\n setValue(10 + Math.random() * 200);\n }\n}, [value]);\n```\n相比使用 `useEffect`，当点击 div，value 更新为 0，此时页面并不会渲染，而是等待 useLayoutEffect 内部状态修改后，才会去更新页面，所以页面不会闪烁。\n\n## useDebugValue\n`useDebugValue` 可用于在 React 开发者工具中显示自定义 hook 的标签。\n```js\nfunction useFriendStatus() {\n const [isOnline] = useState(null)\n useDebugValue(isOnline ? 'Online' : 'Offline')\n\n return isOnline\n}\n\nconst App = () => {\n const isOnline = useFriendStatus()\n\n return
    {isOnline}
    \n}\n```\n在某些情况下，格式化值的显示可能是一项开销很大的操作，因此，`useDebugValue` 接受一个格式化函数作为可选的第二个参数。该函数只有在 Hook 被检查（打开 React 开发者工具）时才会被调用。它接受 debug 值作为参数，并且会返回一个格式化的显示值。\n例如， 一个返回 Date 值的自定义 Hook 可以通过格式化函数来避免不必要的 toDateString 函数调用:\n```js\nuseDebugValue(date, date => date.toDateString());\n```\n\n## 仓库代码\n\n[react-hooks-demo](/~https://github.com/cosyer/react-hooks-demo)\n\n## 总结\n\n这篇文章将 React Hooks 语法进行了简单介绍，Hooks 功能十分强大，如果看完文章还不是很理解的话，建议把这些 demo 自己再手动实现一遍，这样收获会更多。\n如果文章内容有哪些描述错误或者不清的地方，欢迎各位纠正并一起交流。👏👏👏\n","tags":["react"],"categories":["JS"]},{"title":"面试问题集锦","url":"%2F2020%2F%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E9%9B%86%E9%94%A6.html","content":"\n## 请做一下自我介绍\n**回答提示：** 一般人回答这个问题过于平常，只说姓名、年龄、工作经验，这些在简历上都有。其实，企业最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事，主要的成就等，要突出积极的个性和做事的能力，说的合情合理企业才会相信。\n\n## 你最大的优点是什么？\n**回答提示：** 沉着冷静、条理清楚、立场坚定、乐于助人等，加上例子如：我在XX经过一到两年的培训及项目实战，加上实习工作，我想我适合这份工作。\n\n## 说说你最大的缺点？\n**回答提示：** 这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、非常懒、工作效率低，企业肯定不会录用你。要从自己的优点说起，中间加一些小缺点，最后再把问答转回到优点上，突出优点的部分。\n\n---\n\n\n## 说说你对加班的看法？\n**回答提示：** 实际上好多公司问这个问题，并不证明一定要加班，只是想测试你是否愿意为公司奉献。\n\n**回答样本：** 如果是工作需要我会义不容辞加班，我现在单身，没有任何家庭负担，可以全身心的投入工作。但同时，我也会提高工作效率，减少不必要的加班。\n\n## 说说你对薪资的要求？\n**回答提示：** 如果你对薪资的要求太低，那显然贬低自己的能力；如果你对薪资的要求太高，那又会显得你分量过重，公司受用不起。一些雇主通常都事先对求聘的职位定下开支预算，因而他们第一次提出的价钱往往是他们所能给予的最高价钱，他们问你只不过想证实一下这笔钱是否足以引起你对该工作的兴趣。\n\n**回答样本：**\n\n①我对工资没有硬性要求，我相信贵公司会友善合理。我注重的是找到工作机会，所以只要条件公平，我则不会计较太多。\n\n②我受过系统的软件编程的训练，不需要进行大量的培训，而且我本人也对编程特别感兴趣。因此，我希望公司能根据我的情况和市场标准的水平，给我合理的薪水。\n\n③如果你必须自己说出具体数目，请不要说一个宽泛的范围，那样你将只能得到最低限度的数字。最好给出一个具体的数字，这样表明你已经对当今的人才市场做了调查，知道像自己这样学历的雇员有什么样的价值。\n\n## 在五年内，你的职业规划？\n**回答提示：** 这是每一个应聘者都不希望被问到的问题，但是几乎每个人都会被问到，比较多的答案是“管理者”。当然，说出其他一些你感兴趣的职位也是可以的。要知道，考官总是喜欢有进取心的应聘者，此时如果说“不知道”，或许就会使你丧失一个好机会。最普通的回答应该是“我准备在技术领域有所作为”或“我希望能按照公司的管理思路发展”。\n\n## 你朋友对你的评价?\n**回答提示：** 想从侧面了解一下你的性格及与人相处的问题。\n\n**回答样本：**\n\n①我朋友都说我是一个可以信赖的人。因为，我一旦答应别人的事情，就一定会做到。如果我做不到，我就不会轻易许诺。\n\n②我觉的我是一个比较随和的人，与不同的人都可以友好相处。在我与人相处时，我总是能站在别人的角度考虑问题。\n\n## 你还有什么问题要问吗?\n**回答提示：** 企业的这个问题看上去可有可无，其实很关键，企业不喜欢说“没问题”的人，因为其很注重员工的个性和创新能力。企业不喜欢求职者问个人福利之类的问题，如果有人这样问：贵公司对新入公司的员工有没有什么培训项目，我可以参加吗？或者说贵公司的晋升机制是什么样的？企业将很欢迎，因为体现出你对学习的热情和对公司的忠诚度以及你的上进心。\n\n## 录用后发现不适合这个职位，怎么办?\n**回答提示：** 工作一段时间发现工作不适合，有两种情况：\n\n①如果你确实热爱这个职业，那就要不断学习，虚心向领导和同事学习业务知识和处事经验，了解这个职业的精神内涵和职业要求，力争减少差距；\n\n②你觉得这个职业可有可无，那还是趁早换个职业，去发现适合你的，你热爱的职业，那样你的发展前途也会大点，对单位和个人都有好处。\n\n## 工作时跟领导意见不同怎么办?\n**回答样本：** \n\n①原则上我会尊重和服从领导的工作安排，同时私底下找机会以请教的口吻，婉转地表达自己的想法，看看领导是否能改变想法。\n\n②如果领导没有采纳我的建议，我也同样会按领导的要求认真地去完成这项工作。\n\n③还有一种情况，假如领导要求的方式违背原则，我会坚决提出反对意见，如领导仍固执己见，我会毫不犹豫地再向上级领导反映。\n\n## 工作出现失误并造成损失，你会怎么做?\n**回答样本：** \n\n①我本意是为公司努力工作，如果造成经济损失，我认为首要的问题是想方设法去弥补或挽回经济损失。如果我无能力负责，希望单位帮助解决。\n\n②分清责任，各负其责，如果是我的责任，我甘愿受罚；如果是一个我负责的团队中别人的失误，也不能幸灾乐祸，作为一个团队，需要互相提携共同成工作，安慰同事并且帮助同事查找原因总结经验。\n\n③个人的一生不可能不犯错误，重要的是能从自己的或者是别人的错误中吸取经验教训，要检讨自己的工作方法、分析问题的深度和力度。\n\n## 谈谈你对跳槽的看法?\n**回答样本：** \n\n①正常的“跳槽”能够促进人才合理流动，应该支持。\n\n②频繁的跳槽对单位和个人双方都不利，应该反对。\n\n##和同事、上司难以相处，你怎么办?\n**回答样本：** \n\n①我会服从领导的指挥，配合同事的工作。\n\n②我会从自身找原因，仔细分析是不是自己工作做得不好。还要看看是不是为人处世方面做得不好，如果是这样的话我会努力改正。\n\n③如果我找不到原因，我会找机会跟他们沟通，请他们指出我的不足，及时改正。\n\n④作为优秀的员工，应该时刻以大局为重，即使在一段时间内，领导和同事对我不理解，我也会做好本职工作，虚心向他们学习，我相信，他们会看见我的努力。\n\n##上级领导抢了你的功劳怎么办?\n**回答样本：** 首先我不会找那位上级领导说明这事，我会主动找我的主管领导来沟通，因为沟通是解决人际关系的最好办法，但结果会有两种：\n\n①我的主管领导认识到自己的错误，我想我会视具体情况决定是否原谅他。\n\n②他更加变本加厉的来威胁我，那我会毫不犹豫地找我的上级领导反映此事，因为他这样做会造成负面影响，对今后的工作不利。\n\n## 同事孤立你，你怎么办?\n**回答样本：** \n\n①检讨一下自己是不是对工作的热心度超过同事间交往的热心了，加强同事间的交往及共同的兴趣爱好。\n\n②工作中，切勿伤害别人的自尊心。\n\n③不在领导前拨弄是非。\n\n## 你最近是否参加了培训课程?\n**回答提示：** 自费参加，就是XX的培训课程（可以多谈谈自己学的技术）。\n\n## 你对于我们公司了解多少?\n**回答提示：** 在去公司面试前上网查一下该公司主营业务。可类似回答：贵公司有意改变策略，加强与国外大厂的OEM合作，自有品牌的部分则透过海外经销商。\n\n## 你最擅长的技术方向是什么?\n**回答提示：** 说和你要应聘的职位相关的技术，表现一下自己的热诚没有什么坏处。\n\n## 请说出你选择这份工作的动机?\n**回答提示：** 这是想知道面试者对这份工作的热忱及理解度，并筛选因一时兴起而来应试的人，如果是无经验者，可以强调“就算职种不同，也希望有机会发挥之前的经验”。\n\n**回答样本：** 因为我很热爱这个工作，很想从事这方面的工作。\n\n## 你能为我们公司带来什么呢?\n**回答提示：** \n\n①假如你可以的话，试着告诉他们你可以减低他们的费用“我已经接受过XX近两年专业的培训，立刻就可以上岗工作”。\n\n②企业很想知道未来的员工能为企业做什么，求职者应再次重复自己的优势，然后表示：“就我的能力，我可以做一个优秀的员工在组织中发挥能力，给组织带来高效率和更多的收益”。企业喜欢求职者就申请的职位表明自己的能力，比如申请营销之类的职位，可以说：“我可以开发大量的新客户，同时，对老客户做更全面周到的服务，开发老客户的新需求和消费。” 等等。\n\n## 最能概括你自己的三个词?\n**回答样本：** 我经常用的三个词是：适应能力强，有责任心和做事有始终，并结合具体例子向主考官解释。\n\n## 作为被面试者给我打一下分?\n**回答提示：** 试着列出四个优点和一个非常非常非常小的缺点（可以抱怨一下设施，没有明确责任人的缺点是不会有人介意的）。\n\n## 你怎么理解你应聘的职位?\n**回答提示：** 可以把岗位职责和任务及工作态度阐述下。\n\n## 喜欢这份工作的哪一点?\n**回答提示：** 在回答面试官这个问题时不能太直接就把自己心理的话说出来，尤其是薪资方面的问题，不过一些无伤大雅的回答是不错的考虑，如交通方便，工作性质及内容颇能符合自己的兴趣等等都是不错的答案，不过如果这时自己能仔细思考出这份工作的与众不同之处，相信在面试上会大大加分。\n\n## 为什么要离职?\n**回答提示：** \n\n①回答这个问题时一定要小心，就算在前一个工作受到再大的委屈，对公司有多少的怨言都千万不要表现出来，尤其要避免对公司本身主管的批评，避免面试官的负面情绪及印象。建议此时最好的回答方式是将问题归咎在自己身上，例如觉得工作没有学习发展的空间，自己想在面试工作的相关产业中多加学习，或是前一份工作与自己的生涯规划不合等等，回答的答案最好是积极正面的。\n\n②我希望能获得一份更好的工作，如果机会来临，我会抓住。我觉得目前的工作，已经达到顶峰，即没有升迁机会。\n\n## 说说你对行业、技术发展趋势的看法?\n**回答提示：** 企业对这个问题很感兴趣，只有有备而来的求职者能够过关。求职者可以直接在网上查找对你所申请的行业部门的信息，只有深入了解才能产生独特的见解。企业认为最聪明的求职者是对所面试的公司预先了解很多，包括公司各个部门，发展情况，在面试回答问题的时候可以提到所了解的情况，企业欢迎进入企业的人是“知己”，而不是“盲人”。\n\n## 对工作的期望与目标何在?\n**回答提示：** 这是面试者用来评断求职者是否对自己有一定程度的期望、对这份工作是否了解的问题。 对于工作有确实学习目标的人通常学习较快，对于新工作自然较容易进入状况，这时建议你，最好针对工作的性质找出一个确实的答案，如业务员的工作可以这样回答：“我的目标是能成为一个超级业务员，将公司的产品广泛的推销出去，达到最好的业绩成效；为达到这个目标，我一定会努力学习，而我相信以我认真负责的态度，一定可以达到这个目标。” 其他类的工作也可以比照这个方式回答，只要在目标方面稍微修改一下就可以了。\n\n## 谈谈你的家庭?\n**回答提示：** 企业面试时询问家庭问题不是非要知道求职者家庭的情况，而是要了解家庭背景对求职者的塑造和影响。企业希望听到的重点也在于家庭对求职者的积极影响。\n\n**回答样本：** 我很爱我的家庭，我们家一向很和睦，虽然我的父亲和母亲都是普通人，但是从小，我就看到我父亲起早贪黑，每天工作特别勤劳，他的行动无形中培养了我认真负责的态度和勤劳的精神。我母亲为人善良，对人热情，特别乐于助人，所以在单位人缘很好，她的一言一行也一直在教导我做人的道理。\n\n## 你认为自己申请这个职位还欠缺什么?\n**回答提示：** 企业喜欢问求职者弱点，但精明的求职者一般不直接回答。\n\n**回答样本：** 继续重复自己的优势，然后说：“对于这个职位和我的能力来说，我相信自己是可以胜任的，只是缺乏经验，这个问题可以进入公司以后以最短的时间来解决，我的学习能力很强，我相信可以很快融入公司的企业文化，进入工作状态。\n\n## 你欣赏哪种性格的人?\n**回答提示：** 诚实、不死板而且容易相处的人、有实际行动的人，加上具体例子。\n\n## 你通常如何处理别人的批评?\n**回答提示：** \n\n①沉默是金，不必说什么，否则情况更糟，不过我会接受建设性的批评。\n\n②我会等大家冷静下来再讨论。\n\n## 怎样对待自己的失败?\n**回答提示：** 大意：我们生来都不是十全十美的，我相信我有第二个机会改正我的错误。\n\n## 什么会让你有成就感?\n**回答提示：** 为贵公司竭力效劳，尽我所能，完成一个项目。\n\n## 眼下你生活中最重要的是什么?\n**回答提示：** 对我来说，能在这个领域找到工作是最重要的，能在贵公司任职对我说最重要。\n\n## 你为什么愿意到我们公司来工作?\n**回答提示：** 对于这个问题，你要格外小心，如果你已经对该单位作了研究，你可以回答一些详细的原因。\n\n**回答样本：** \n\n①公司本身高技术开发环境很吸引我我同公司出生在同样的时代，我希望能够进入一家与我共同成长的公司。\n\n②你们公司一直都稳定发展，在近几年来在市场上有竞争力。我认为贵公司能够给我提供一个与众不同的发展道路。\n\n## 你和别人发生过争执吗?\n**回答提示：** 这是面试中最险恶的问题，其实是考官布下的一个陷阱，成功解决矛盾是一个协作团体中成员所必备的能力。假如你工作在一个服务行业，这个问题简直成了最重要的个环节。你是否能获得这份工作，将取决于这个问题的回答。考官希望看到你是成熟且乐于奉献的。他们通过这个问题了解你的成熟度和处世能力。在没有外界干涉的情况下，通过妥协的方式来解决才是正确答案。\n\n## 你做过的哪件事最令自己感到骄傲?\n**回答提示：** 这是考官给你的一个机会，让你展示自己把握命运的能力。这会体现你潜在的领导能力以及你被提升的可能性。假如你应聘于一个服务性质的单位，你很可能会被邀请聚餐。记住：你的前途取决于你的知识、你的社交能力和综合表现。\n\n## 对这项工作，你有哪些可预见的困难?\n**回答提示：** \n\n①不宜直接说出具体的困难，否则可能令对方怀疑应聘者不行。\n\n②可以尝试迂回战术，说出应聘者对困难所持有的态度工作中出现一些困难是正常的，也是难免的，但是只要有坚忍不拔的毅力、良好的合作精神以及事前周密而充分的准备，任何困难都是可以克服。\n\n## 录用后你将怎样开展工作?\n**回答提示：** \n\n①如果应聘者对于应聘的职位缺乏足够的了解，最好不要直接说出自己开展工作的具体办法。\n\n②可以尝试采用迂回战术来回答，如“首先听取领导的指示和要求，然后就有关情况进行了解和熟悉，接下来制定一份近期的工作计划并报领导批准，最后根据计划开展工作。”。\n\n## 你希望与什么样的上级共事?\n**回答提示：** \n\n①通过应聘者对上级的“希望”可以判断出应聘者对自我要求的意识，这既上一个陷阱，又是一次机会。\n\n②最好回避对上级具体的希望，多谈对自己的要求。如“做为刚步入社会的新人，我应该多要求自己尽快熟悉环境、适应环境，而不应该对环境提出什么要求，只要能发挥我的专长就可以了。\n\n## 你工作经验欠缺，如何能胜任这项工作?\n**回答提示：** \n\n①如果招聘单位对应届毕业生的应聘者提出这个问题，说明招聘公司并不真正在乎经验，关键看应聘者怎样回答。\n\n②对这个问题的回答最好要体现出应聘者的诚恳、机智、果敢及敬业。\n\n**回答样本：** 作为应届毕业生，在工作经验方面的确会有所欠缺，因此在读书期间我一直利用各种机会在这个行业里做兼职。我也发现，实际工作远比书本知识丰富、复杂。但我有较强的责任心、适应能力和学习能力，而且比较勤奋，所以在兼职中均能圆满完成各项工作，从中获取的经验也令我受益非浅。请贵公司放心，学校所学及兼职的工作经验使我一定能胜任这个职位。\n\n## 你会怎样获得同事的帮助?\n**回答提示：** 每个公司都在不断变化发展的过程中，你当然希望你的员工也是这样。你希望得到那些希望并欢迎变化的人，因为这些明白，为了公司的发展，变化是公司日常生活中重要组成部分。这样的员工往往很容易适应公司的变化，并会对变化做出积极的响应。\n\n## 如果你没被录用，你怎么打算?\n**回答样本：** 现在的社会是一个竞争的社会，从这次面试中也可看出这一点，有竞争就必然有优劣，有成功必定就会有失败。往往成功的背后有许多的困难和挫折，如果这次失败了也仅仅是一次而已，只有经过经验经历的积累才能塑造出一个完全的成功者。我会从以下几个方面来正确看待这次失败：①要敢于面对，面对这次失败不气馁，接受已经失去了这次机会就不会回头这个现实，从心理意志和现出对这次失败的抵抗力。要有自信，相信自己经历了这次之后经过努力一定能行，能够超越自我。②善于反思，对于这次面试经验要认真总结，思考剖析，能够从自身的角度找差距正确对自己，实事求是地评价自己，辩证的看待自己的长短得失，做一个明白人。③走出阴影，克服这一次失败带给自己的心理压力，时刻牢记自己弱点，防患于未然，加强学习，提高自身素质。④认真工作，回到原单位岗位上后，要实实在在、踏踏实实地工作，三十六行行行出状元，争取在本岗位上做出一定的成绩。⑤再接再厉，以后如果有机会我仍然后再次参加竞争。\n\n## 最令你沮丧的事情?\n**回答样本：** 曾经接触过一个客户，原本就有耳闻他以挑剔出名，所以事前的准备功夫做得十分充分，也投入了相当多的时间与精力，最后客户虽然并没有照单全收，但是接受的程度已经出乎我们意料之外了。原以为从此可以合作愉快，却得知客户最后因为预算关系选择了另一家代理商，之前的努力因而付诸流水。尽管如此，我还是从这次的经验学到很多，如对该产业的了解，整个team的默契也更好了。\n\n## 想过创业吗?\n**回答提示：** 这个问题可以显示你的冲劲，但如果你的回答是“有”的话，千万小心，下一个问题可能就是：那么为什么你不这样做呢?\n\n## 为什么我们要在众多的面试者中选择你?\n**回答提示：** 别过度吹嘘自己的能力，或信口开河地乱开支票，例如一定会为该公司带来多少钱的业务等，这样很容易给人一种爱说大话、不切实际的感觉。\n\n**回答样本：** 根据我对贵公司的了解，以及我在这份工作上所累积的专业、经验及人脉，相信正是贵公司所找寻的人才。而我在工作态度、EQ上，也有圆融、成熟的一面，和主管、同事都能合作愉快。\n\n## 除了本公司外，还应聘了哪些公司?\n**回答提示：** 这是相当多公司会问的问题，其用意是要概略知道应征者的求职志向，所以这并非绝对是负面答案，就算不便说出公司名称，也应回答“销售同种产品的公司”，如果应聘的其他公司是不同业界，容易让人产生无法信任的感觉。\n\n## 你并非毕业于名牌院校?\n**回答样本：** 是否毕业于名牌院校不重要，重要的是有能力完成您交给我的工作，我接受了XX的职业培训，掌握的技能完全可以胜任贵公司现在工作，而且我比一些名牌院校的应届毕业生的动手能力还要强，我想我更适合贵公司这个职位。\n\n## 怎样看待学历和能力?\n**回答样本：** 学历我想只要是大学专科的学历，就表明觉得我具备了根本的学习能力。剩下的，你是学士也好，还是博士也好，对于这一点的讨论，不是看你学了多少知识，而是看你在这个领域上发挥了什么，也就是所说的能力问题。一个人工作能力的高低直接决定其职场命运，而学历的高低只是进入一个企业的敲门砖，如果公司把学历卡在博士上我就无法进入贵公司，当然这不一定只是我个人的损失，如果一个专科生都能完成的工作，您又何必非要招聘一位博士生呢?\n\n## 谈谈如何适应办公室工作的新环境?\n**回答样本：** \n\n①办公室里每个人都有各自的岗位与职责，不得擅离岗位。\n\n②根据领导指示和工作安排，制定工作计划，提前预备，并按计划完成。\n\n③多请示并及时汇报，遇到不明白的要虚心请教。④抓间隙时间，多学习，努力提高自己的政治素质和业务水平。\n\n## 谈谈对这个职务的期许?\n**回答提示：** 回答前不妨先询问公司对这项职务的责任认定及归属，因为每一家公司的状况不尽相同，以免说了一堆理想抱负却发现牛头不对马嘴。\n\n**回答样本：** 希望能借此发挥我的所学及专长，同时也吸收贵公司在这方面的经验，就公司、我个人而言，缔造双赢的局面。\n\n## 何时可以到职?\n**回答提示：** 大多数企业会关心就职时间，最好是回答：“如果被录用的话，到职日可以按公司规定上班”，但是如果还未辞去上一个工作、上班时间又太近，似乎有些强人所难，因为交接至少要一个月的时间，应进一步说明原因，录取公司应该会通融的。\n","tags":["面试"],"categories":["知识"]},{"title":"三栏布局总结（左右固定宽度 中间自适应）","url":"%2F2020%2F%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E6%80%BB%E7%BB%93.html","content":"\n圣杯布局和双飞翼布局(其实是一回事)都是实现的三栏布局。\n\n## 浮动布局(float + margin)\n```css\n
    \n
    Left
    \n \n
    Right
    \n
    Main
    \n
    \n\nbody,html,.container{\n height: 100%;\n padding:0;\n margin: 0;\n}\n/*左边栏左浮动*/\n.left{\n float:left;\n height:100%;\n width:200px;\n background:#333;\n}\n/*中间栏自适应*/\n.main{\n height:100%;\n margin:0 200px;\n background: red;\n}\n/*右边栏右浮动*/\n.right{\n float:right;\n height:100%;\n width:200px;\n background:#333;\n}\n```\n- 优点：快捷 简单 兼容性较好\n- 缺点: 有局限性 脱离文档流 需要清除浮动等\n\n---\n\n\n## 绝对布局(position)\n```css\n
    \n
    Left
    \n
    Main
    \n
    Right
    \n
    \n\nbody,html,.container{\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: hidden;\n}\n/*左右进行绝对定位*/\n.left,.right{\n position: absolute;\n height:100%;\n top: 0;\n background: #333;\n}\n.left{\n left: 0;\n width: 200px;\n}\n.right{\n right: 0;\n width: 200px;\n}\n/*中间用margin空出左右元素所占的空间*/\n.main{\n height:100%;\n margin: 0 200px;\n background: red;\n}\n/*或者中间也进行绝对定位*/\n.main{\n position: absolute;\n height:100%;\n left: 200px;\n right:200px;\n background: red;\n}\n```\n- 优点：简单粗暴\n- 缺点: 脱离文档流 高度未知会出现问题 可用性差\n\n## 弹性盒子布局(flex)\n```css\n
    \n
    Left
    \n
    Main
    \n
    Right
    \n
    \n\nbody,html{\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: hidden;\n}\n.container{\n display: flex;\n}\n.left{\n width:200px;\n background: red;\n}\n.main{\n flex: 1;\n background: blue;\n}\n.right{\n width:200px;\n background: red;\n}\n```\n- 优点：比较完美 移动端首选\n- 缺点: 不兼容 ie9 及以下\n\n## 表格布局(table)\n```css\n
    \n
    Left
    \n
    Main
    \n
    Right
    \n
    \n\nbody,html{\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: hidden;\n}\n.container{\n display: table;\n width:100%;\n}\n.container>div{\n display: table-cell;\n}\n.left{\n width: 200px;\n background: red;\n}\n.main{\n background: blue;\n}\n.right{\n width: 200px;\n background: red;\n}\n```\n- 优点：兼容性很好（ie8 及以上） 父元素高度会被子元素撑开（不担心高度塌陷）\n- 缺点: seo 不友好 当其中一个单元格高度超出的时候，其他的单元格也是会跟着一起变高的\n\n## 网格布局(Grid)\n```css\n
    \n
    Left
    \n
    Main
    \n
    Right
    \n
    \n\nbody,html{\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: hidden;\n}\n.container{\n display: grid;\n width: 100%;\n grid-template-rows: 100px; /*设置行高*/\n grid-template-columns: 200px auto 200px; /*设置列数属性*/\n}\n.left{\n background: red;\n}\n.main{\n background: blue;\n}\n.right{\n background:red;\n}\n```\n- 优点：简单强大 解决二维布局问题\n- 缺点: 不兼容 ie9 及以下\n\n## 总结\n|布局方案|实现|优点|缺点|\n|:--|:--|:--|:--|\n|Float布局|左右中三列，左列左浮动，右列右浮动，中间列设置左右margin|比较简单，兼容性也比较好|浮动元素脱离文档流，使用的时候只需要注意一定要清除浮\n动。|\n|Position布局|左中右三列（无顺序），根据定位属性去直接设置各个子元素位置|快捷，设置很方便|元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，\n会有问题，有效性和可使用性比较差|\n|Table布局|左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度|使用起来方便,兼容性也不存在问题|①无法设置栏边距；②\n对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的|\n|Flex布局|左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1;|比较完美|存在IE上兼容性问题，只能支持到IE9以上|\n|Grid布局|左中右三列，父元素display: grid;利用网格实现|最强大和最简单|兼容性不好，IE10+上支持，而且也仅支持部分属性|\n","tags":["布局"],"categories":["CSS"]},{"title":"js二进制和位运算","url":"%2F2020%2Fjs%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%92%8C%E4%BD%8D%E8%BF%90%E7%AE%97.html","content":"\n# js 二进制与位运算\n生活中，我们经常用到的是以十进制为单位，进位是满 10 进 1，而计算机是用二进制，那么就是满 2 进 1 喽，为什么采用二进制呢？简单说下，Ta的由来其实是根据电路的开关闭合，电路只有 0 和 1，具体的详情这里不多做解释了，可以自行百科^_^。javascript 采用有符号 32 位的 2 进制，可表示 4294967295 个整数(含正负)，范围是 -2147483648(2 的 32 次方) ~ 2147483647。\n\n## 带符号二进制基本规则与几个概念\n在计算机中规定最高位是符号位，0 为正，1 为负。正数表示是原码，负数是原码的补码。\n\n### 原码\n除去符号位，其他 32 位都为正。\n\n例：00000000000000000000000000001010 原码 00000000000000000000000000001010。\n\n### 反码\n所谓反码，除符号位外，其他位 0 变 1，1 变 0。\n例：1010 反码 1101\n\n### 补码\n所谓补码，就像是小学学过的 10 进制补数，举个例子就很好理解，3 的补数是多少？是 7。4 的补数是 6，补数就是 10 减去这个数。在二进制的补码就是相加等于 0，互为相反数。\n\n* 0 的补码\n 0 的原码、反码、补码均为 0\n* 正数的补码\n 原码\n* 负数的补码\n 原码除符号位外的所有位取反+1。如何推出来的，看了一篇文章，挺有意思。[点击查看](https://blog.csdn.net/wenxinwukui234/article/details/42119265)\n\n---\n\n\n## 位运算\n### 按位与（AND） &\n描述：a & b 对于每一个比特位，只有两个操作数相应的比特位都是 1 时，结果才为 1，否则为 0。(摘自 MDN)\n\n举例：2 & 3 = 2\n    0000 0010\n& 0000 0011\n———————\n    0000 0010\n\n#### 应用场景:\n判断奇偶\n\n```js\nconsole.log(num & 1) // 1 是奇数 0是偶数\n```\n\n__权限设置：解权限__\n\n因为奇数的最后一位永远是 1。\n举例：num 是 3\n0000 0011\n0000 0001\n—————\n0000 0001\n\n### 按位或（OR）|\n描述：对于每一个比特位，当两个操作数相应的比特位至少有一个 1 时，结果为 1，否则为 0。(摘自 MDN)\n\n举例：2 | 3 = 3\n   0000 0010\n | 0000 0011\n———————\n    0000 0011\n\n#### 应用场景：\n**小数取整**\n\n```js\nfunction fn(n) {\n return n | 0\n}\nfn(3.2) // 3\n```\n\n**权限**\n\n假设我们读的权限是 1 写的权限是 2，如果一个用户同时拥有读和写两种权限，正常来分配就是用一个数组[1,2]，那么用或运算符如何分配呢？\n\n```js\nclass Permission {\n constructor() {\n this.instance = null\n this.permissions = {\n r: 1, // 读\n w: 2, // 写\n e: 4 // 执行\n }\n }\n getR() { return this.permissions.r }\n getW() { return this.permissions.w }\n getE() { return this.permissions.e }\n \n getRW() { return this.permissions.r | this.permissions.w }\n getRE() { return this.permissions.r | this.permissions.e }\n getWE() { return this.permissions.w | this.permissions.e }\n \n getRWE() { return this.permissions.r | this.permissions.w | this.permissions.e }\n getAll() { return Object.values(this.permissions).reduce((p1, p2, i) =p1 | p2) }\n \n isR(per) { return Boolean(per & this.permissions.r) }\n isW(per) { return Boolean(per & this.permissions.w) }\n isE(per) { return Boolean(per & this.permissions.e) }\n \n static getInstance() {\n !this.instance && (this.instance = new Permission())\n return this.instance\n }\n}\nconst per = Permission.getInstance()\nper.getRW() // 读写权限：3\nper.getAll() // 所有权限：7\nper.isR(3) // true 是否有读的权限\nper.isW(5) // false 是否有写的权限\nper.isE(5) // true 是否有执行的权限\n```\n\n注：基本运算过程\n1 | 2 =>\n  0000 0001\n| 0000 0010\n————————————\n0000 0011\n=3\n\n### 按位异或（XOR）^\n描述：对于每一个比特位，当两个操作数相应的比特位有且只有一个 1 时，结果为 1，否则为 0。(摘自 MDN)\n\n举例：2 ^ 3\n   0000 0010\n^ 0000 0011\n——————\n    0000 0001\n\n#### 应用场景\n变量交换\n我们会用到两个变量的值进行交换，比如冒泡排序的两两对比，若前者比后者大就交换位置：\n\n```js\nvar a = 1,\n b = 2\nvar temp = a\nvar a = b\nvar b = temp\n```\n\n这里是声明第三个变量来实现交换。那么，用按位异或可以这么做：\n\n```js\nvar a = 1,\n b = 2\na ^= b\nb ^= a\na ^= b\n```\n\n分解一下上面的：\na += 1 和 a ^= b 表达式规则是一样的\n所以 a ^= b =a = a ^ b， 看下面运算过程：\n    0000 0001\n ^ 0000 0010\n——————\n    0000 0011\n此时，a 就变成了 3。\nb ^= a =b = b ^ a\n    0000 0010\n ^ 0000 0011\n——————\n    0000 0001\n此时，b 变成了 1。\n重复第一步：\n    0000 0011\n ^ 0000 0001\n——————\n    0000 0010\n此时，a 变成了 2。最终 a=2,b=1 实现了变量的交换。好处是少声明了一个临时变量，效率上，亲测结果 异或运算交换并不比第三变量的效率高(测试交换 100 次)。\n\n## 按位非（NOT）~\n描述：反转操作数的比特位，即 0 变成 1，1 变成 0。\n看到这个可能会想到上面所说的反码，这两者是有区别的，反码是**按照有符号和无符号算的**,取反是不管有没有符号全部 0 变 1,1 变 0 的\n\n### 应用场景\n**小数取整**\n还有一个特征是取反是不能用于浮点型，所以可以用来向下取整，效果和 Math.floor()一样，~~效率要高。\n\n```js\nfunction fn(n) {\n return ~~n\n}\nfn(3.2) // 3\n```\n\n## 左移（Left shift）<<\n描述：a << b ,将 a 的二进制形式向左移 b (< 32) 比特位，右边用 0 填充。(摘自 MDN)\n举例：3 << 4\n0000 0011 向左移动 4 位 =0011 0000\n可知，左移数是越来越大的。**移动运算符运算效率较高**\n\n### 应用场景\nx 乘以 y 的 n 次方：**x << y**\n\n```js\n1 << 3 =0000 1000 化成10进制 =1 * 2的3次方 =8\n```\n\n2 进制化成 10 进制 就是 2 的 n 次方 乘以 当前位。\n\n## 有符号右移 a >b\n描述：将 a 的二进制表示向右移 b (< 32) 位，丢弃被移出的位。\n该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，拷贝最左侧的位以填充左侧。由于新的最左侧的位总是和以前相同，符号位没有被改变。所以被称作“符号传播”。\n举例：\n正数右移：4 >2\n\n```js\n 0000 0000 0000 0000 0000 0000 0000 0100\n> 2\n——————————————————————————————————————————\n 0000 0000 0000 0000 0000 0000 0000 0001\n```\n\n正数右移，不够的位数用符号位 0 补全，可以发现规律，结果是 4 / (2 的 2 次方) =当前位/(2 的移位的位数的次方)\n\n负数右移：-3 >4\n\n```js\n 1000 0000 0000 0000 0000 0000 0000 0011 的补码是=>\n 1111 1111 1111 1111 1111 1111 1111 1101 向右移动4位，右边舍去，左侧用符号位补齐\n> 4\n——————————————————————————————————————————\n 1111 1111 1111 1111 1111 1111 1111 1111 补码是=>\n 1000 0000 0000 0000 0000 0000 0000 0001 所以,最终是-1\n```\n\n## 无符号右移 a >>b\n描述：将 a 的二进制表示向右移 b (< 32) 位，丢弃被移出的位，并使用 0 在左侧填充。\n正数右移：4 >>2\n\n```js\n 0000 0000 0000 0000 0000 0000 0000 0100\n>> 2\n———————————————————————————————————————————\n 0000 0000 0000 0000 0000 0000 0000 0001\n```\n\n可以发现 4 >>2 和 4 >2 结果都是 1，也就是说，对于非负数来说，有无符号右移结果都是相同。\n负数右移：-4 >>2\n\n```js\n 1000 0000 0000 0000 0000 0000 0000 0100 补码=>\n 1111 1111 1111 1111 1111 1111 1111 1100\n>> 2\n———————————————————————————————————————————\n 0011 1111 1111 1111 1111 1111 1111 1111\n 化成10进制=2^29...2^1+1 = 1073741823\n```\n\n## 总结：\n**位运算 优势：乘除，取模，运算效率高 劣势：可读性较低，对初学者有难度，工作中应当按需所取，不应为炫技滥用。** 好多源码都有用到位运算（express、koa、koa-body），现在学习了位运算，妈妈再也不担心读不懂源码了！\n","tags":["工具"],"categories":["JS"]},{"title":"HTML5中的Web Notification桌面通知","url":"%2F2020%2FHTML5%E4%B8%AD%E7%9A%84Web%20Notification%E6%A1%8C%E9%9D%A2%E9%80%9A%E7%9F%A5.html","content":"\nWeb Notifications 技术使页面可以发出通知，通知将被显示在页面之外的系统层面上。能够为用户提供更好的体验，即使用户忙于其他工作时也可以收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。\n\n> PS：除了IE外，各大现代浏览器都对这个桌面推送有了基本的支持。\n\n---\n\n\n## 开始\n要创建一个消息通知，非常简单，直接使用 window 对象下面的Notification类即可，代码如下：\n```js\nvar n = new Notification(\"桌面推送\", {\n\ticon: 'img/icon.png',\n\tbody: '这是我的第一条桌面通知。',\n image:'img/1.jpg'\n});\n```\n\n> PS：消息通知只有通过Web服务访问该页面时才会生效，如果直接双击打开本地文件，是没有任何效果的。也就是说你的文件需要使用服务器的形式打开，而不是直接使用浏览器打开本地文件。\n\n## 语法\n```js\nlet myNotification = new Notification(title, options);\n```\n- title：定义一个通知的标题，当它被触发时，它将显示在通知窗口的顶部。\n\n- options（可选）对象包含应用于通知的任何自定义设置选项。\n\n常用的选项有：\n\n- body: 通知的正文，将显示在标题下方。\n\n- tag: 类似每个通知的ID，以便在必要的时候对通知进行刷新、替换或移除。\n\n- icon: 显示通知的图标\n\n- image: 在通知正文中显示的图像的URL。\n\n- data: 您想要与通知相关联的任意数据。这可以是任何数据类型。\n\n- renotify: 一个 Boolean 指定在新通知替换旧通知后是否应通知用户。默认值为false，这意味着它们不会被通知。\n\n- requireInteraction: 表示通知应保持有效，直到用户点击或关闭它，而不是自动关闭。默认值为false。\n\n当这段代码执行时，浏览器会询问用户，是否允许该站点显示消息通知，如下图所示：\n\n![notification](http://cdn.mydearest.cn/blog/images/notification.png)\n\n只有用户点击了允许，授权了通知，通知才会被显示出来。\n\n## 授权\n\n**如何获取到用户点击的是“允许”还是“阻止”呢？**\n\nwindow的 Notification实例有一个 requestPermission 函数用来获取用户的授权状态：\n```js\n// 首先，我们检查是否具有权限显示通知\n// 如果没有，我们就申请权限\nif (window.Notification && Notification.permission !== \"granted\") {\n Notification.requestPermission(function (status) {\n // status是授权状态。\n // 如果用户点击的允许，则status为'granted'\n // 如果用户点击的禁止，则status为'denied'\n \n // 这将使我们能在 Chrome/Safari 中使用 Notification.permission\n if (Notification.permission !== status) {\n Notification.permission = status;\n }\n });\n}\n```\n> 注意：如果用户点击了授权右上角的关闭按钮，则status的值为default。\n\n之后，我们只需要判断 status 的值是否为granted，来决定是否显示通知。\n\n## 通知事件\n但是单纯的显示一个消息框是没有任何吸引力的，所以消息通知应该具有一定的交互性，在显示消息的前前后后都应该有事件的参与。\n\nNotification一开始就制定好了一系列事件函数，开发者可以很方面的使用这些函数处理用户交互：\n\n有：onshow,onclick,onerror,onclose。\n```js\nvar n = new Notification(\"桌面推送\", {\n\ticon: 'img/icon.png',\n\tbody: '这是我的第一条桌面通知。'\n});\n \n//onshow函数在消息框显示时触发\n//可以做一些数据记录及定时关闭消息框等\nn.onshow = function() {\n\tconsole.log('显示消息框');\n\t//5秒后关闭消息框\n\tsetTimeout(function() {\n\t\tn.close();\n\t}, 3000);\n};\n \n//消息框被点击时被调用\n//可以打开相关的视图，同时关闭该消息框等操作\nn.onclick = function() {\n\tconsole.log('点击消息框');\n\t// 打开相关的视图\n\tn.close();\n};\n \n//当有错误发生时会onerror函数会被调用\n//如果没有granted授权，创建Notification对象实例时，也会执行onerror函数\nn.onerror = function() {\n\tconsole.log('消息框错误');\n\t// 做些其他的事\n};\n \n//一个消息框关闭时onclose函数会被调用\nn.onclose = function() {\n\tconsole.log('关闭消息框');\n\t//做些其他的事\n};\n```\n\n## 项目实例\n[pwa版旅游站点H5](/~https://github.com/cosyer/pwa-tour)\n","tags":["工具"],"categories":["工具"]},{"title":"前端动画的实现方式总结","url":"%2F2020%2F%E5%89%8D%E7%AB%AF%E5%8A%A8%E7%94%BB%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F%E6%80%BB%E7%BB%93.html","content":"\n通常在前端中，实现动画的方案主要有6种：\n\n- js 直接实现\n\n- SVG（可伸缩矢量图形\n\n- CSS3 transition\n\n- CSS3 animation\n\n- Canvas动画\n\n- requestAnimationFrame\n\n---\n\n\n## js 直接实现动画\n> 其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。\n\n🌰\n```html\n\n\n\n \n \n\n\n
    \n \n\n\n```\n\n- 缺点：js 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。\n\n### Tip：为什么是16ms\n上面例子中，我们设置的setInterval时间间隔是16ms。一般认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。 \n\n在很多移动端动画性能优化时，一般使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率，可以大大提升动画的流畅性。\n\n## SVG\n🌰\n```html\n\n\n\n \n Document\n \n\n\n \n \n \n \n \n \n \n \n \n\n\n```\n\n- 优缺点\n\nSVG的一大优势是含有较为丰富的动画功能，原生绘制各种图形、滤镜和动画，并且能被js调用。html是对dom的渲染，那么svg就是对图形的渲染。 \n但是，另一方面元素较多且复杂的动画使用svg渲染会比较慢，而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。\n\n## CSS3 transition\ntransition是过渡动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。\n\n### Tips\n\n在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。\n\n## CSS3 animation\nanimation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。\n\n- 优点\nCSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。\n\n## Canvas动画\n> canvas作为H5新增元素，是借助Web API来实现动画的。\n\n🌰\n```html\n\n\n\n \n Document\n \n\n\n \n \n\n\n```\n\n- 优点\nCanvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。\n\n## requestAnimationFrame\nrequestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。\n\n栗子🌰\n```html\n\n\n\n \n \n\n\n
    \n \n\n\n```\n\n## 总结\n复杂的动画是通过一个个简单的动画组合实现的。基于兼容性问题，通常在项目中，一般在\n\n- 桌面端浏览器推荐使用javascript直接实现动画或SVG方式；\n- 移动端可以考虑使用CSS3 transition、CSS3 animation、Canvas或requestAnimationFrame方式**。\n","tags":["布局"],"categories":["CSS"]},{"title":"TAR命令详解","url":"%2F2020%2FTAR%E5%91%BD%E4%BB%A4%E8%AF%A6%E8%A7%A3.html","content":"在Linux中，压缩与解压用得最多的是 `tar` 命令。\n\n-c: 建立压缩档案\n-x：解压\n-t：查看内容\n-r：向压缩归档文件末尾追加文件\n-u：更新原压缩包中的文件\n\n以上五个是独立的命令参数，压缩解压都要用到其中一个，可以和别的命令连用但只能用其中一个。下面的参数是根据需要在压缩或解压档案时可选的。\n\n-z：有gzip属性的 gz\n-j：有bz2属性的 bz2\n\n-J ：有xz属性的 xz\n-Z：有compress属性的\n-v：显示所有过程\n-O：将文件解开到标准输出\n\n下面的参数-f是必须的\n\n-f: 使用档案名字，切记，这个参数是最后一个参数，后面只能接档案名。\n\n---\n\n\n## 栗子🌰\n### tar -cf all.tar *.jpg\n这条命令是将所有.jpg的文件打成一个名为all.tar的包。-c是表示产生新的包，-f指定包的文件名。\n\n### tar -rf all.tar *.gif\n这条命令是将所有.gif的文件增加到all.tar的包里面去。-r是表示增加文件的意思。\n\n### tar -uf all.tar logo.gif\n这条命令是更新原来tar包all.tar中logo.gif文件，-u是表示更新文件的意思。\n\n### tar -tf all.tar\n这条命令是列出all.tar包中所有文件，-t是列出文件的意思\n\n### tar -xf all.tar\n这条命令是解出all.tar包中所有文件，-t是解开的意思\n\n## 压缩\n```js\n// 将目录里所有jpg文件打包成tar.jpg\ntar -cvf jpg.tar *.jpg \n\n// 将目录里所有jpg文件打包成jpg.tar后，并且将其用gzip压缩，生成一个gzip压缩过的包，命名为jpg.tar.gz\ntar -czf jpg.tar.gz *.jpg\n\n// 将目录里所有jpg文件打包成jpg.tar后，并且将其用bzip2压缩，生成一个bzip2压缩过的包，命名为jpg.tar.bz2\ntar -cjf jpg.tar.bz2 *.jpg\n\n// 将目录里所有jpg文件打包成jpg.tar后，并且将其用compress压缩，生成一个umcompress压缩过的包，命名为jpg.tar.Z\ntar -cZf jpg.tar.Z *.jpg\n\n// rar格式的压缩，需要先下载rar for linux\nrar a jpg.rar *.jpg\n\n// zip格式的压缩，需要先下载zip for linux\nzip jpg.zip *.jpg \n```\n\n## 解压\n```js\n// 解压 tar包\ntar -xvf file.tar \n\n// 解压tar.gz\ntar -xzvf file.tar.gz\n\n// 解压 tar.bz2\ntar -xjvf file.tar.bz2\n\n// 解压tar.Z\ntar -xZvf file.tar.Z\n\n// 解压tar.xz\ntar -Jxvf fle.tar.xz\n\n// 解压rar\nunrar e file.rar \n\n// 解压zip\nunzip file.zip\n```\n\n## 总结\n```js\n1、*.tar 用 tar -xvf 解压\n\n2、*.gz 用 gzip -d或者gunzip 解压\n\n3、*.tar.gz和*.tgz 用 tar -xzf 解压 tar.xz 用 tar -Jxvf 解压\n\n4、*.bz2 用 bzip2 -d或者用bunzip2 解压\n\n5、*.tar.bz2用tar -xjf 解压\n\n6、*.Z 用 uncompress 解压\n\n7、*.tar.Z 用tar -xZf 解压\n\n8、*.rar 用 unrar e解压\n\n9、*.zip 用 unzip 解压\n\ntar -zcvf 1.tar.gz xxx\ntar -zxvf 1.tar.gz\n```\n","tags":["shell"],"categories":["工具"]},{"title":"算法题练习","url":"%2F2020%2F%E7%AE%97%E6%B3%95%E9%A2%98%E7%BB%83%E4%B9%A0.html","content":"\n# 五大算法\n- 贪心算法：局部最优解法\n- 分治算法：分成多个小模块，与原问题性质相同\n- 动态规划：每个状态都是过去历史的一个总结\n- 回溯法：发现原先选择不优时，退回重新选择\n- 分支限界法：按广度优先策略搜索问题的解空间树，适合求解最优化问题\n\n## 数据树\n- 二叉树: 最多只有两个子节点\n - 完全二叉树\n - 若设二叉树的深度为k，除第 k 层外，其它各层 (1～k-1) 的结点数都达到最大个数，第k 层所有的结点都连续集中在最左边\n - 满二叉树\n - 深度为 h, 有 n 个节点，且满足 n = 2^h - 1\n - 平衡二叉树\n - 它或者是一颗空树，或它的左子树和右子树的深度之差(平衡因子)的绝对值不超过1，且它的左子树和右子树都是一颗平衡二叉树\n - 最优二叉树(哈夫曼树)\n - 树的带权路径长度达到最小，称这样的二叉树为最优二叉树，也称为哈夫曼树(Huffman Tree)。哈夫曼树是带权路径长度最短的树，权值较大的结点离根较近。\n\n- 二叉查找树: 是一种特殊的二叉树，能有效地提高查找效率\n - 小值在左，大值在右\n - 节点 n 的所有左子树值小于 n，所有右子树值大于 n\n\n![binary-search-tree](http://cdn.mydearest.cn/blog/images/binary-search-tree.png)\n\n- 遍历节点\n - 前序遍历\n - 根节点\n - 访问左子节点，回到 1\n - 访问右子节点，回到 1\n - 中序遍历\n - 先访问到最左的子节点\n - 访问该节点的父节点\n - 访问该父节点的右子节点， 回到 1\n - 后序遍历\n - 先访问到最左的子节点\n - 访问相邻的右节点\n - 访问父节点， 回到 1\n\nDLR--前序遍历（根在前，从左往右，一棵树的根永远在左子树前面，左子树又永远在右子树前面 ）\n\n![dlr](http://cdn.mydearest.cn/blog/images/dlr.png)\n\nLDR--中序遍历（根在中，从左往右，一棵树的左子树永远在根前面，根永远在右子树前面）\n\n![ldr](http://cdn.mydearest.cn/blog/images/ldr.png)\n\nLRD--后序遍历（根在后，从左往右，一棵树的左子树永远在右子树前面，右子树永远在根前面）\n\n![lrd](http://cdn.mydearest.cn/blog/images/lrd.png)\n\n- 插入与删除节点\n\n---\n\n\n## 写出一个方法输出1-100内的所有素数\n解析：\n由素数（质数）定义可知：\n\n- ① 0、1都不是质数，那么最小的质数就是2。\n- ② 除了1和它自身，不能被其他数整除，那么代码表达式表示为：\n\n```js\ni % j === 0\n```\n- 代码实现\n\n```js\nfunction fn() {\n const arr = []\n for (let i = 2; i <= 100; i++) {\n let bl = false\n for (let j = 2; j <= i; j++) {\n if (i === j) continue\n i % j === 0 && (bl = true)\n }\n !bl && arr.push(i)\n }\n return arr\n}\nconsole.log(fn()) \n```\n\n## 给定一个整数数组，实现快速排序算法进行升序排列。如[2, 5, 8, 9, 3] =>[2, 3, 5, 8, 9]\n解析：（分治法）\n将一个列表分割为左右两块，然后再将字列表再进行分割为左右两块，如何反复，知道子元素长度为1时，结束！\n- 代码实现\n```js\nfunction qSort(arr) {\n if (arr.length <= 1) return arr\n const index = Math.floor(arr.length / 2)\n const midVal = arr.splice(index, 1)[0]\n const left = [],\n right = []\n arr.forEach(item => {\n if (item < midVal) left.push(item)\n else right.push(item)\n })\n return [...qSort(left), midVal, ...qSort(right)]\n}\nqSort([2, 5, 8, 9, 3])\n```\n\n## 求一个字符串中最长的非重复连续子串\n```js\nfunction find(s) {\n var str = '';//存放当前最大无重复项字符串\n var len = 0;//存放当前最大无重复项字符串长度\n for(var i=0;i 比如输入: [\"flower\",\"flow\",\"flight\"]，输出: \"fl\"\n\n```js\nvar longestCommonPrefix = function(strs) {\n if (strs === null || strs.length === 0) return \"\";\n if(strs.length === 1) return strs[0]\n let min = 0, max = 0\n for(let i = 1; i < strs.length; i++) {\n if(strs[min] > strs[i]) min = i\n if(strs[max] < strs[i]) max = i\n }\n for(let j = 0; j < strs[min].length; j++) {\n if(strs[min].charAt(j) !== strs[max].charAt(j)) {\n return strs[min].substring(0, j)\n }\n }\n return strs[min]\n};\n```\n\n## 实现二叉树(构建、遍历)\n```js\nfunction TreeCode() {\n let BiTree = function (ele) {\n this.data = ele;\n this.lChild = null;\n this.rChild = null;\n }\n\n this.createTree = function () {\n let biTree = new BiTree('A');\n biTree.lChild = new BiTree('B');\n biTree.rChild = new BiTree('C');\n biTree.lChild.lChild = new BiTree('D');\n biTree.lChild.lChild.lChild = new BiTree('G');\n biTree.lChild.lChild.rChild = new BiTree('H');\n biTree.rChild.lChild = new BiTree('E');\n biTree.rChild.rChild = new BiTree('F');\n biTree.rChild.lChild.rChild = new BiTree('I');\n return biTree;\n }\n}\n\n//前序遍历\nfunction ProOrderTraverse(biTree) {\n if (biTree == null) return;\n console.log(biTree.data);\n ProOrderTraverse(biTree.lChild);\n ProOrderTraverse(biTree.rChild);\n}\n\n//中序遍历\nfunction InOrderTraverse(biTree) {\n if (biTree == null) return;\n InOrderTraverse(biTree.lChild);\n console.log(biTree.data);\n InOrderTraverse(biTree.rChild);\n}\n\n//后续遍历\nfunction PostOrderTraverse(biTree) {\n if (biTree == null) return;\n PostOrderTraverse(biTree.lChild);\n PostOrderTraverse(biTree.rChild);\n console.log(biTree.data);\n}\n\nlet myTree = new TreeCode();\nconsole.log(myTree.createTree());\nconsole.log('前序遍历')\nProOrderTraverse(myTree.createTree());\nconsole.log('中序遍历')\nInOrderTraverse(myTree.createTree());\nconsole.log('后续遍历')\nPostOrderTraverse(myTree.createTree());\n```\n\n## 二叉树的非递归遍历\n### 深度优先非递归(栈的先进后出)DFS\n```js\nfunction DepthFirstSearch(biTree) {\n let stack = [];\n stack.push(biTree);\n\n while (stack.length != 0) {\n let node = stack.pop();\n console.log(node.data);\n if (node.rChild) {\n stack.push(node.rChild);\n }\n if (node.lChild) {\n stack.push(node.lChild);\n }\n\n }\n\n}\n```\n\n### 广度优先非递归(队列的先进先出)BFS\n```bash\nfunction BreadthFirstSearch(biTree) {\n let queue = [];\n queue.push(biTree);\n while (queue.length != 0) {\n let node = queue.shift();\n console.log(node.data);\n if (node.lChild) {\n queue.push(node.lChild);\n }\n if (node.rChild) {\n queue.push(node.rChild);\n }\n }\n\n}\n```\n\n## 一个数组，里面是排好序的数字，输入一个数字怎么能找到它的index\n\n### 把这些数字放到对象的key里，index变成value，然后直接取 时间复杂度O(n) => O(1)\n\n### 二分法查找\n```js\nlet arr = [0, 1, 2, 4, 5, 6, 7, 8];\nlet arr2 = [88, 77, 66, 55, 44, 33, 22, 11];\n\nBinarySearch(arr2, 77);\nBinarySearch(arr, 2);\n\nfunction BinarySearch(arr, target) {\n let s = 0;\n let e = arr.length - 1;\n let m = Math.floor((s + e) / 2);\n let sortTag = arr[s] <= arr[e];//确定排序顺序\n\n while (s < e && arr[m] !== target) {\n if (arr[m] > target) {\n sortTag && (e = m - 1);\n !sortTag && (s = m + 1);\n } else {\n !sortTag && (e = m - 1);\n sortTag && (s = m + 1);\n }\n m = Math.floor((s + e) / 2);\n }\n\n if (arr[m] == target) {\n console.log('找到了,位置%s', m);\n return m;\n } else {\n console.log('没找到');\n return -1;\n }\n\n}\n```\n\n## 洗牌(乱序)算法\n### 时间复杂度:O(n²)\n```js\nfunction shuffle(arr) {\n return arr.sort(function() {\n return Math.random() - 0.5;\n });\n}\n```\n\n### 时间复杂度:O(n)空间复杂度O(1)\n```js\nfunction shuffle(arr) {\n var newArr = [];\n for(var i = 0, len = arr.length; i < len; i++) {\n var j = Math.floor(Math.random() * (len - i));\n newArr[i] = arr[j];\n arr.splice(j, 1)\n }\n return newArr;\n}\n```\n\n## 两数之和\n[2,7,11,88,34],9 => [0,1]\n\n### 双循环\n```js\nfunction twoSum(arr, target) {\n var result = []\n for (let m=0;m\n\n### v-show和v-if有什么区别\n\n- v-if（初始化不会渲染）\nv-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建，也是惰性的，如果在初始渲染条件为假时，则什么也不做——直到条件第一次变为真时才开始渲染条件块，能用在