text: (this["webpackJsonpfront-end-roadmap"]=this["webpackJsonpfront-end-roadmap"]||[]).push([[0],Array(43).concat([function(e,t,i){e.exports=i(124)},,,,,function(e,t,i){},,,,,,function(e,t){},function(e,t){},function(e,t){},function(e,t,i){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){},function(e,t,i){var a={"./afterwave.md":97,"./build-tools.md":98,"./code-quality.md":99,"./css-framework.md":100,"./css-modern.md":101,"./css-preprocessor.md":102,"./css.md":103,"./data-view.md":104,"./desktop-app.md":105,"./editor.md":106,"./git.md":107,"./how-does-the-browser-work.md":108,"./how-does-the-internet-work.md":109,"./html.md":110,"./javascript.md":111,"./js-framework.md":112,"./learn-from-github.md":113,"./mini-app.md":114,"./mobile-app.md":115,"./node.md":116,"./performance.md":117,"./ssr.md":118,"./static-site.md":119,"./temp-md.md":120,"./test-framework.md":121,"./web-assembly.md":122,"./webview.md":123};function l(e){var t=o(e);return i(t)}function o(e){if(!i.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}l.keys=function(){return Object.keys(a)},l.resolve=o,e.exports=l,l.id=96},function(e,t){e.exports='<h1 id="\u540e\u6d6a">\u540e\u6d6a</h1> <blockquote> <p>\u606d\u559c\u4f60\uff0c\u5230\u8fd9\u91cc\u5c31\u770b\u5b8c\u4e86\u6240\u6709\u7684\u6761\u76ee\u3002\u7528\u4f60\u7684\u6bd5\u751f\u6240\u5b66\uff0c\u53bb\u6210\u4e3a\u540e\u6d6a\u5427\uff01</p> </blockquote> <p><a href="https://www.bilibili.com/video/BV1FV411d7u7">bilibili\u732e\u7ed9\u65b0\u4e00\u4ee3\u7684\u6f14\u8bb2\u300a\u540e\u6d6a\u300b</a></p> '},function(e,t){e.exports='<h1 id="\u81ea\u52a8\u5316\u6784\u5efa">\u81ea\u52a8\u5316\u6784\u5efa</h1> <h2 id="npm-scripts">npm scripts</h2> <blockquote> <p>npm \u5141\u8bb8\u5728 package.json \u6587\u4ef6\u91cc\u9762\uff0c\u4f7f\u7528 scripts \u5b57\u6bb5\u5b9a\u4e49\u811a\u672c\u547d\u4ee4</p> </blockquote> <ul> <li><a href="https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html">npm scripts \u4f7f\u7528\u6307\u5357</a></li> <li><a href="https://docs.npmjs.com/misc/scripts">npm scripts \u5b98\u65b9\u6587\u6863</a></li> </ul> <h2 id="\u5e38\u7528\u6253\u5305\u5de5\u5177">\u5e38\u7528\u6253\u5305\u5de5\u5177</h2> <ul> <li>Webpack</li> <li>Rollup</li> <li>Parcel</li> <li>Gulp/Grunt</li> <li>\u6700\u8fd1\u6d41\u884c\u7684\uff1a Snowpack / Vite</li> </ul> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://www.webpackjs.com/concepts/">Webpack \u4e2d\u6587\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://github.com/ruanyf/webpack-demos">Webpack demos-\u962e\u4e00\u5cf0\u8001\u5e08\u51fa\u54c1</a></li> <li><a href="https://rollupjs.org/guide/en/">Rollupg\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://www.snowpack.dev/">Snowpack\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://zhuanlan.zhihu.com/p/144993158">\u7cbe\u8bfb\u300asnowpack\u300b</a></li> <li>[vitejs/vite](Native-ESM powered web dev build tool. It&#39;s fast)</li> </ul> '},function(e,t){e.exports='<h1 id="\u4ee3\u7801\u8d28\u91cf">\u4ee3\u7801\u8d28\u91cf</h1> <h2 id="\u7c7b\u578b\u6821\u9a8c">\u7c7b\u578b\u6821\u9a8c</h2> <h3 id="typescript">TypeScript</h3> <ul> <li><a href="https://www.typescriptlang.org/">\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://jkchao.github.io/typescript-book-chinese/#why">\u6df1\u5165\u7406\u89e3 TypeScript</a></li> <li><a href="https://juejin.im/post/5ea40427518825736f6434ef">\u3010\u4e07\u5b57\u957f\u6587\u3011\u6df1\u5165\u7406\u89e3 Typescript \u9ad8\u7ea7\u7528\u6cd5</a></li> <li><a href="https://github.com/semlinker/awesome-typescript">semlinker/awesome-typescript</a></li> <li><a href="https://github.com/dzharii/awesome-typescript">dzharii/awesome-typescript</a></li> </ul> <h3 id="flow">Flow</h3> <blockquote> <p>\u4e0d\u592a\u63a8\u8350\u4f7f\u7528</p> </blockquote> <h2 id="linter--formatter">linter &amp; formatter</h2> <ul> <li><a href="https://cn.eslint.org/">eslint</a></li> <li><a href="https://prettier.io/">prettier</a></li> </ul> <h2 id="\u7f16\u7801\u89c4\u8303">\u7f16\u7801\u89c4\u8303</h2> <ul> <li><a href="https://github.com/airbnb/javascript">javascript</a></li> <li><a href="https://github.com/airbnb/css">css</a></li> <li><a href="https://github.com/airbnb/javascript/tree/master/react">react</a></li> <li><a href="https://github.com/ryanmcdermott/clean-code-javascript">clean-code-javascript</a></li> </ul> '},function(e,t){e.exports='<h1 id="ui\u6846\u67b6">UI\u6846\u67b6</h1> <h2 id="ui\u6846\u67b6-1">UI\u6846\u67b6</h2> <ul> <li><a href="https://www.bootcss.com/">Bootstrap</a></li> <li><a href="https://foundation.zurb.com/">Fundation</a></li> <li><a href="https://bulma.io/">Bulma</a></li> <li><a href="https://semantic-ui.com/">Semantic UI</a></li> <li><a href="https://materializecss.com/">Materialize CSS</a></li> <li><a href="hhttps://material-ui.com/">Material UI</a></li> </ul> <h2 id="ui\u7ec4\u4ef6\u5e93">UI\u7ec4\u4ef6\u5e93</h2> <ul> <li><a href="https://ant.design/index-cn">Ant Design</a></li> <li><a href="https://element.eleme.cn/">Element UI</a></li> <li><a href="https://blueprintjs.com/">Blueprint UI</a></li> <li><a href="https://github.com/amazeui/amazeui">Amaze UI</a></li> </ul> <h2 id="ui\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf">UI\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf</h2> <ul> <li><a href="https://www.layui.com/admin/">Layui</a></li> <li><a href="https://pro.ant.design/index-cn">Ant Design Pro</a></li> <li><a href="https://panjiachen.github.io/vue-element-admin-site/zh/">Vue Element Admin</a></li> </ul> '},function(e,t){e.exports='<h1 id="css-modern">CSS Modern</h1> <h2 id="styled-component">Styled Component</h2> <ul> <li><a href="https://styled-components.com/">\u5b98\u65b9\u6587\u6863</a></li> </ul> <h2 id="css-modules">CSS Modules</h2> <ul> <li><a href="http://www.ruanyifeng.com/blog/2016/06/css_modules.html">CSS Modules \u7528\u6cd5\u6559\u7a0b</a></li> <li><a href="https://github.com/css-modules/css-modules">CSS Modules</a></li> <li><a href="https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/">Adding a CSS Modules Stylesheet</a></li> </ul> '},function(e,t){e.exports='<h1 id="css\u9884\u5904\u7406">CSS\u9884\u5904\u7406</h1> <h2 id="css\u9884\u5904\u7406\u5668">CSS\u9884\u5904\u7406\u5668</h2> <ul> <li>Sass</li> <li>Less</li> <li>PostCSS</li> <li>Stylus</li> </ul> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://sass.bootcss.com/">Sass \u4e2d\u6587\u6587\u6863</a></li> <li><a href="http://lesscss.cn/">Less \u4e2d\u6587\u6587\u6863</a></li> <li><a href="https://www.postcss.com.cn/">PostCSS \u4e2d\u6587\u6587\u6863</a></li> <li><a href="https://stylus.bootcss.com/">Stylus \u4e2d\u6587\u6587\u6863</a></li> </ul> '},function(e,t){e.exports='<h1 id="css">CSS</h1> <h2 id="\u91cd\u70b9\u638c\u63e1">\u91cd\u70b9\u638c\u63e1</h2> <ul> <li>\u5e03\u5c40\uff08\u76d2\u6a21\u578b\u3001\u5b9a\u4f4d\u3001\u6d6e\u52a8\u3001flex\u7b49\uff09</li> <li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1</li> <li>px/rem/em/vw/wh \u7684\u533a\u522b</li> <li>\u9009\u62e9\u5668\u3001\u4f2a\u7c7b</li> <li>\u52a8\u753b\u3001transition</li> </ul> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://www.runoob.com/css/css-intro.html">CSS \u6559\u7a0b</a></li> <li><a href="https://www.cnblogs.com/theblogs/p/10516098.html">Css\u5355\u4f4dpx\uff0crem\uff0cem\uff0cvw\uff0cvh\u7684\u533a\u522b</a></li> <li><a href="https://mubu.com/doc/1U8CWlk1GDP">CSS YuelinWang\u7b14\u8bb0</a></li> </ul> <h2 id="\ud83d\udcfa-\u89c6\u9891">\ud83d\udcfa \u89c6\u9891</h2> <ul> <li><a href="https://www.bilibili.com/video/BV1x54y1B7RE/">\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f</a></li> </ul> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <ul> <li>\u300aHead First HTML and CSS\u300b</li> <li>\u300aCSS\u6743\u5a01\u6307\u5357\u300b</li> <li><a href="https://book.douban.com/subject/4736167/">\u300a\u7cbe\u901aCSS\uff08\u7b2c2\u7248\uff09\u300b</a></li> <li><a href="https://book.douban.com/subject/26745943/">\u300aCSS\u63ed\u79d8\u300b</a></li> </ul> '},function(e,t){e.exports='<h1 id="\u6570\u636e\u53ef\u89c6\u5316">\u6570\u636e\u53ef\u89c6\u5316</h1> <p>\u6570\u636e\u53ef\u89c6\u5316\u7814\u7a76\u7684\u662f\uff0c\u5982\u4f55\u5c06\u6570\u636e\u8f6c\u5316\u6210\u4e3a\u4ea4\u4e92\u7684\u56fe\u5f62\u6216\u56fe\u50cf\u7b49\uff0c\u4ee5\u89c6\u89c9\u53ef\u4ee5\u611f\u53d7\u7684\u65b9\u5f0f\u8868\u8fbe\uff0c\u589e\u5f3a\u4eba\u7684\u8ba4\u77e5\u80fd\u529b\uff0c\u8fbe\u5230\u53d1\u73b0\u3001\u89e3\u91ca\u3001\u5206\u6790\u3001\u63a2\u7d22\u3001\u51b3\u7b56\u548c\u5b66\u4e60\u7684\u76ee\u7684\u3002</p> <h2 id="\u76f8\u5173\u77e5\u8bc6\u70b9">\u76f8\u5173\u77e5\u8bc6\u70b9</h2> <p>\u2022 bizcharts bizcharts.net/index<br>\u963f\u91cc\u5df4\u5df4\u56fd\u9645 UED \u56e2\u961f\u51fa\u54c1\uff0cG2 \u7684 react \u5c01\u88c5\uff0c\u4e3b\u6253\u7535\u5546\u4e1a\u52a1\u56fe\u8868\u53ef\u89c6\u5316\uff0c\u6c89\u6dc0\u7535\u5546\u4e1a\u52a1\u7ebf\u7684\u53ef\u89c6\u5316\u89c4\u8303\u3002\u5728 React \u9879\u76ee\u4e2d\u5b9e\u73b0\u5e38\u89c1\u56fe\u8868\u548c\u81ea\u5b9a\u4e49\u56fe\u8868\u3002<br>\u2022 viser viserjs.github.io/<br>\u963f\u91cc\u6570\u636e\u5e73\u53f0\u6280\u672f\u90e8\u51fa\u54c1\uff0c\u652f\u6301 vue, react\uff0cangularjs\u4e09\u4e2a\u6846\u67b6\u3002 </p> <p>\u2022 jointjs \u805a\u7126\u4e8e\u56fe\u7f16\u8f91\uff0c\u5305\u542b\u4e86\u5e38\u89c1\u7684\u6d41\u7a0b\u56fe\u548cBPMN \u56fe\u7684\u529f\u80fd\uff0c\u4e0a\u624b\u5bb9\u6613\uff0c\u5f00\u7bb1\u5373\u7528\u4f46\u662f\u4e8c\u6b21\u5f00\u53d1\u975e\u5e38\u56f0\u96be\u3002<br>\u2022 d3.js \u975e\u5e38\u5e95\u5c42\u7684\u53ef\u89c6\u5316\u5e93\uff0c\u6709\u5927\u91cf\u56fe\u5206\u6790\u573a\u666f\u7684\u6848\u4f8b\uff0c\u4e0a\u624b\u6210\u672c\u9ad8\uff0cdemo \u540c\u4e1a\u52a1\u7684\u8ddd\u79bb\u6bd4\u8f83\u5927\u3002 </p> <p>\u5176\u5b83\u5e93\uff1a</p> <p>Chart.js<br>AnyChart<br>amCharts </p> <h2 id="\u76f8\u5173\u6280\u672f">\u76f8\u5173\u6280\u672f</h2> <ul> <li><a href="https://echarts.apache.org/zh/index.html">EChart</a></li> <li><a href="https://www.highcharts.com.cn/">HighChart</a></li> <li><a href="https://antv.vision/zh">AntV</a></li> </ul> '},function(e,t){e.exports='<h1 id="\u684c\u9762app\u5f00\u53d1">\u684c\u9762app\u5f00\u53d1</h1> <h2 id="electron">Electron</h2> <ul> <li><a href="http://www.electronjs.org/">\u5b98\u65b9\u6587\u6863</a></li> </ul> <h2 id="nwjs">NW.JS</h2> <ul> <li><a href="https://nwjs.org.cn/">\u5b98\u65b9\u6587\u6863</a></li> </ul> '},function(e,t){e.exports='<h1 id="\u7f16\u8f91\u5668">\u7f16\u8f91\u5668</h1> <h2 id="\u5e38\u7528\u7684\u7f16\u8f91\u5668">\u5e38\u7528\u7684\u7f16\u8f91\u5668</h2> <ul> <li><a href="https://code.visualstudio.com">VSCode</a></li> <li><a href="https://www.jetbrains.com/webstorm/">WebStorm</a></li> <li><a href="https://atom.io/">Atom</a></li> <li><a href="https://www.sublimetext.com/">Sublime</a></li> </ul> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md">VSCode\u7684\u4f7f\u7528</a></li> <li><a href="https://zhuanlan.zhihu.com/p/44044896">VSCode\u7684\u5e38\u7528\u5feb\u6377\u952e</a></li> </ul> '},function(e,t){e.exports='<h1 id="git">Git</h1> <h2 id="git-\u4f7f\u7528\u6559\u7a0b">Git \u4f7f\u7528\u6559\u7a0b</h2> <ul> <li><a href="https://learngitbranching.js.org/?demo=&amp;locale=zh_CN">\u5b66\u4e60 git \u5206\u652f-\u53ef\u89c6\u5316\u5b66\u4e60\uff0c\u8d85\u8d5e \ud83d\udc4d</a></li> <li><a href="http://marklodato.github.io/visual-git-guide/index-zh-cn.html">\u56fe\u89e3 Git</a></li> <li><a href="http://think-like-a-git.net/">Think like a Git </a></li> <li><a href="https://www.liaoxuefeng.com/wiki/896043488029600">Git\u6559\u7a0b \u5ed6\u96ea\u5cf0</a></li> <li><a href="https://git-scm.com/book/zh/">Pro Git</a></li> </ul> <h2 id="github-\u7684\u4f7f\u7528">Github \u7684\u4f7f\u7528</h2> <blockquote> <p>GitHub\u662f\u901a\u8fc7Git\u8fdb\u884c\u7248\u672c\u63a7\u5236\u7684\u8f6f\u4ef6\u6e90\u4ee3\u7801\u6258\u7ba1\u670d\u52a1\u5e73\u53f0</p> </blockquote> <ul> <li><a href="https://zh.wikipedia.org/wiki/GitHub">Github \u7ef4\u57fa\u767e\u79d1</a></li> <li><a href="https://juejin.im/post/5d635670e51d4561e721df15">Github \u4f7f\u7528\u6559\u7a0b\u56fe\u6587\u8be6\u89e3</a></li> <li><a href="https://github.phodal.com/">GitHub \u6f2b\u6e38\u6307\u5357</a></li> </ul> <h2 id="\u4f7f\u7528-github-\u642d\u5efa\u4e2a\u4eba\u535a\u5ba2">\u4f7f\u7528 Github \u642d\u5efa\u4e2a\u4eba\u535a\u5ba2</h2> <p>\u641c\u4e86\u4e0b\u57fa\u672c\u90fd\u662f\u7528 Hexo \u6765\u642d\u5efa\u535a\u5ba2\uff0c\u8fd9\u91cc\u4e0d\u5c31\u4e0d\u8d34\u5730\u5740\u4e86\u3002\u6211\u66f4\u63a8\u8350\u4f7f\u7528 <code>Gatsby</code>,<code>VuePress</code> \u8fd9\u79cd\u9759\u6001\u7ad9\u70b9\u6846\u67b6\u6765\u642d\u5efa\uff0c\u540e\u9762\u51fa\u4e2a\u6559\u7a0b\u3002\u6216\u8005\u81ea\u5df1\u5199\u4e2a\u9875\u9762\uff08\u4f7f\u7528 <code>React/Vue</code>\uff09\uff0c\u7136\u540e\u4f7f\u7528 <code>gp-pages</code> \u5305\u6765\u90e8\u7f72\u5230 Github \u4ed3\u5e93</p> '},function(e,t){e.exports='<h1 id="\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f">\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f</h1> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><p><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout">how browsers work: behind the scenes of modern web browsers</a></p> </li> <li><p><a href="https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/">\u6d4f\u89c8\u5668\u7684\u5de5\u4f5c\u539f\u7406\uff1a\u65b0\u5f0f\u7f51\u7edc\u6d4f\u89c8\u5668\u5e55\u540e\u63ed\u79d8</a></p> </li> <li><p><a href="https://www.chromium.org/developers/design-documents">Chromium \u8bbe\u8ba1\u6587\u6863</a></p> </li> <li><p><a href="https://developers.google.com/web/updates/2018/09/inside-browser-part1">Inside look at modern web browser (part 1)</a></p> </li> <li><p><a href="https://developers.google.com/web/updates/2018/09/inside-browser-part2">Inside look at modern web browser (part 2)</a></p> </li> <li><p><a href="https://developers.google.com/web/updates/2018/09/inside-browser-part3">Inside look at modern web browser (part 3)</a></p> </li> <li><p><a href="https://developers.google.com/web/updates/2018/09/inside-browser-part4">Inside look at modern web browser (part 4)</a></p> </li> <li><p><a href="https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.g60f92a5151_40_1445">Life of a Pixel</a></p> </li> </ul> <h2 id="\ud83d\udcfa-\u89c6\u9891">\ud83d\udcfa \u89c6\u9891</h2> <ul> <li><a href="https://www.bilibili.com/video/BV1x54y1B7RE/">\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f</a></li> </ul> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <ul> <li>\u300aWebKit \u6280\u672f\u5185\u5e55\u300b</li> </ul> '},function(e,t){e.exports='<h1 id="\u4e92\u8054\u7f51\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f">\u4e92\u8054\u7f51\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f</h1> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm">InternetWhitepaper</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/learn/How_the_Internet_works">\u4e92\u8054\u7f51\u662f\u5982\u4f55\u5de5\u4f5c\u7684 MDN</a></li> <li><a href="https://mubu.com/doc/4n-ehUovcCP">30 \u5f20\u56fe\u89e3 HTTP </a></li> <li><a href="https://mubu.com/doc/12i79Sq9hmP">\u8fd8\u5206\u4e0d\u6e05 Cookie\u3001Session\u3001Token\u3001JWT\uff1f</a></li> </ul> <h2 id="\ud83d\udcfa-\u89c6\u9891">\ud83d\udcfa \u89c6\u9891</h2> <ul> <li><a href="https://www.bilibili.com/video/BV1Rz4y197Jd">\u4e92\u8054\u7f51\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f</a></li> </ul> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <ul> <li>\u300a\u56fe\u89e3 HTTP\u300b</li> </ul> '},function(e,t){e.exports='<h1 id="html">HTML</h1> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://www.runoob.com/html/html-tutorial.html">HTML \u6559\u7a0b</a></li> <li><a href="https://mubu.com/doc/a9YYeiV0Y0">HTML YuelinWang\u7b14\u8bb0</a></li> </ul> <h2 id="\ud83d\udcfa-\u89c6\u9891">\ud83d\udcfa \u89c6\u9891</h2> <ul> <li><a href="https://www.bilibili.com/video/BV1x54y1B7RE/">\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u8fd0\u4f5c\u7684\uff1f</a></li> </ul> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <ul> <li>\u300aHead First HTML and CSS\u300b</li> </ul> '},function(e,t){e.exports='<h1 id="javascript">JavaScript</h1> <h2 id="\ud83d\udca5-\u91cd\u70b9\u638c\u63e1">\ud83d\udca5 \u91cd\u70b9\u638c\u63e1</h2> <ul> <li>ECMAScript \u57fa\u672c\u8bed\u6cd5</li> <li>DOM\u7f16\u7a0b</li> <li>BOM\u7684\u4f7f\u7528</li> <li>\u4f5c\u7528\u57df\u3001\u95ed\u5305\u3001\u539f\u578b\u94fe</li> <li>\u4e8b\u4ef6\u4ee3\u7406/\u59d4\u6258</li> <li>\u9519\u8bef\u5904\u7406/\u5f02\u5e38\u5904\u7406</li> <li>\u4e8b\u4ef6\u961f\u5217 (setTimeout/setInterval/Promise)</li> <li>JSON</li> <li>Ajax/Fetch</li> <li>ES6+</li> <li>\u6b63\u5219\u8868\u8fbe\u5f0f</li> </ul> <h2 id="\ud83d\udcc4-\u6587\u7ae0\u6559\u7a0b">\ud83d\udcc4 \u6587\u7ae0&amp;\u6559\u7a0b</h2> <ul> <li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript \u6559\u7a0b</a></li> <li><a href="https://eloquentjavascript.net/">Eloquent Javascript</a></li> <li><a href="https://es6.ruanyifeng.com/">ECMAScript 6 \u5165\u95e8-\u962e\u4e00\u5cf0</a></li> <li><a href="https://zh.javascript.info/">\u73b0\u4ee3 JavaScript \u6559\u7a0b</a></li> </ul> <h2 id="\ud83d\udcfa-\u89c6\u9891">\ud83d\udcfa \u89c6\u9891</h2> <p>\u5f85\u8865\u5145...</p> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <ul> <li>\u300aJavaScript DOM \u7f16\u7a0b\u827a\u672f\u300b</li> <li>\u300aJavaScript \u9ad8\u7ea7\u7a0b\u5e8f\u8bbe\u8ba1\u300b</li> <li>\u300aJavaScript \u8bed\u8a00\u7cbe\u7cb9\u300b</li> <li>\u300a\u4f60\u4e0d\u77e5\u9053\u7684 JavaScript\u300b</li> <li>\u300aJavaScript\u8bbe\u8ba1\u6a21\u5f0f\u300b</li> <li>\u300aJavaScript\u6743\u5a01\u6307\u5357\u300b</li> <li>\u300aSecrets of the JavaScript Ninja\u300b</li> <li>\u300aHow JavaScript Works\u300b</li> </ul> '},function(e,t){e.exports='<h1 id="js-\u6846\u67b6">JS \u6846\u67b6</h1> <h2 id="\u4e3b\u6d41\u6846\u67b6">\u4e3b\u6d41\u6846\u67b6</h2> <ul> <li><a href="https://reactjs.org/">React</a></li> <li><a href="https://vuejs.org">Vue</a></li> <li><a href="https://angular.io/">Angular</a></li> </ul> <h2 id="react\u76f8\u5173">React\u76f8\u5173</h2> <blockquote> <p>\u7528\u4e8e\u6784\u5efa\u7528\u6237\u754c\u9762\u7684 JavaScript \u5e93</p> </blockquote> <ul> <li><a href="https://reactjs.org/docs/getting-started.html">\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://github.com/enaqx/awesome-react">Awesome React</a></li> <li><a href="http://www.ruanyifeng.com/blog/2015/03/react.html">React \u5165\u95e8\u5b9e\u4f8b\u6559\u7a0b-\u962e\u4e00\u5cf0\u8001\u5e08</a></li> <li><a href="http://huziketang.mangojuice.top/books/react/">React.js \u5c0f\u4e66</a></li> <li><a href="https://create-react-app.dev/">\u5b98\u65b9cli-create react app</a></li> <li><a href="https://github.com/reactjs/react-basic">Basic Theoretical Concepts</a></li> <li><a href="https://github.com/acdlite/react-fiber-architecture">React Fiber Architecture</a></li> <li><a href="https://devhints.io/react">React cheatsheet</a></li> <li><a href="https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS">Under the hood: React</a>(\u8bb2Stack reconciler\uff0c\u6709\u4e9b\u8fc7\u65f6\u4e86)</li> <li><a href="https://juejin.im/post/5be90d825188254b0917f180">React \u7684\u4eca\u5929\u548c\u660e\u5929</a></li> </ul> <h2 id="vue\u76f8\u5173">Vue\u76f8\u5173</h2> <blockquote> <p>Vue.js \u662f\u4e00\u5957\u6784\u5efa\u7528\u6237\u754c\u9762\u7684\u6e10\u8fdb\u5f0f\u6846\u67b6</p> </blockquote> <ul> <li><a href="https://vuejs.bootcss.com/guide/">\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://github.com/vuejs/awesome-vue">Awesome Vue</a></li> </ul> <h2 id="angular\u76f8\u5173">Angular\u76f8\u5173</h2> <blockquote> <p>\u4e00\u5957\u7528\u4e8e\u79fb\u52a8\u7aef &amp; \u684c\u9762\u7aef\u7684\u5f00\u53d1\u6846\u67b6</p> </blockquote> <ul> <li><a href="https://angular.cn/docs">\u5b98\u65b9\u6587\u6863</a></li> </ul> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <p>\u6ca1\u53d1\u73b0\u5f88\u597d\u7684\u4e66\uff0c\u6682\u4e0d\u63a8\u8350</p> '},function(e,t){e.exports='<h1 id="\u5b66\u4e60\u6c38\u65e0\u6b62\u5883">\u5b66\u4e60\u6c38\u65e0\u6b62\u5883</h1> <blockquote> <p>\u8fd9\u91cc\u63a8\u8350\u4e86\u4e00\u4e9b\u5bf9\u524d\u7aef\u7a0b\u5e8f\u5458\u5341\u5206\u6709\u7528\u7684\u5b66\u4e60\u7f51\u7ad9\uff0c\u5728\u7ebf\u5de5\u5177\u548c\u5f00\u6e90\u9879\u76ee\u3002\u5e2e\u52a9\u4f60\u53bb\u5b9e\u8df5\u8def\u7ebf\u56fe\u4e2d\u7684\u5185\u5bb9\u3002</p> </blockquote> <blockquote> <p>\u8be5\u6761\u76ee\u8fd8\u5728\u8865\u5145\u4e2d \ud83c\udf83</p> </blockquote> <h2 id="gitpod">GitPod</h2> <p>GitPod\u662f\u4e00\u4e2a\u8fd0\u884c\u5728Web\u7684\u4ee3\u7801\u5de5\u4f5c\u7a7a\u95f4\u3002\u53ef\u4ee5\u4eceGithub\u6216\u8005GitLab\u62c9\u53d6\u4efb\u4f55\u9879\u76ee\uff08\u6307\u4f60\u6709\u6743\u9650\u8bbf\u95ee\uff0c\u5305\u62ec\u516c\u5f00\uff09\u6765\u521b\u5efa\u5de5\u4f5c\u7a7a\u95f4\u3002\u652f\u6301JavaScript\u5728\u5185\u768418\u79cd\u7f16\u7a0b\u8bed\u8a00\u3002</p> <p><a href="https://gitpod.io">https://gitpod.io</a></p> <h2 id="runkit">RunKit</h2> <p>\u901a\u8fc7RunKit\uff0c\u4f60\u53ef\u4ee5\u5728\u5ba2\u6237\u7aef\u8fd0\u884c\u4efb\u4f55NodeJS\u4ee3\u7801\uff08\u652f\u6301\u6240\u6709Node\u7248\u672c\uff09\uff0c\u8fd8\u53ef\u4ee5\u901a\u8fc7\u94fe\u63a5\u5206\u4eab\u7ed9\u4ed6\u4eba\uff0c\u5e76\u4e14\u65e0\u9700\u767b\u5165\uff0c\u6ca1\u6709\u9650\u5236</p> <p><a href="https://runkit.com/home">https://runkit.com/home</a></p> '},function(e,t){e.exports='<h1 id="\u5c0f\u7a0b\u5e8f">\u5c0f\u7a0b\u5e8f</h1> <h2 id="\u5404\u5382\u7684\u5c0f\u7a0b\u5e8f\u4eec">\u5404\u5382\u7684\u5c0f\u7a0b\u5e8f\u4eec</h2> <ul> <li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/">\u5fae\u4fe1\u5c0f\u7a0b\u5e8f</a></li> <li><a href="https://smartprogram.baidu.com/docs/develop/fuctionlist/list/">\u767e\u5ea6\u5c0f\u7a0b\u5e8f</a></li> <li><a href="https://microapp.bytedance.com/">\u5b57\u8282\u8df3\u52a8\u5c0f\u7a0b\u5e8f</a></li> <li><a href="https://opendocs.alipay.com/mini/developer">\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f</a></li> <li><a href="https://mp.jd.com/?entrance=taro">\u4eac\u4e1c\u5c0f\u7a0b\u5e8f</a></li> </ul> <h2 id="\u8de8\u7aef\u89e3\u51b3\u65b9\u6848">\u8de8\u7aef\u89e3\u51b3\u65b9\u6848</h2> <ul> <li><a href="https://taro.aotu.io/">Taro</a>/\u9075\u5faa React \u8bed\u6cd5\u89c4\u8303\u7684 \u591a\u7aef\u5f00\u53d1 \u89e3\u51b3\u65b9\u6848,\u5c06\u6e90\u4ee3\u7801\u5206\u522b\u7f16\u8bd1\u51fa\u53ef\u4ee5\u5728\u4e0d\u540c\u7aef\uff08\u5fae\u4fe1 / \u4eac\u4e1c / \u767e\u5ea6 / \u652f\u4ed8\u5b9d / \u5b57\u8282\u8df3\u52a8 \u5c0f\u7a0b\u5e8f\u3001\u5feb\u5e94\u7528\u3001H5\u3001React-Native \u7b49\uff09\u8fd0\u884c\u7684\u4ee3\u7801</li> <li><a href="https://taro.aotu.io/">uni-app</a>/\u4f7f\u7528 Vue.js \u5f00\u53d1\u6240\u6709\u524d\u7aef\u5e94\u7528\u7684\u6846\u67b6\uff0c\u5f00\u53d1\u8005\u7f16\u5199\u4e00\u5957\u4ee3\u7801\uff0c\u53ef\u53d1\u5e03\u5230iOS\u3001Android\u3001H5\u3001\u4ee5\u53ca\u5404\u79cd\u5c0f\u7a0b\u5e8f\uff08\u5fae\u4fe1/\u652f\u4ed8\u5b9d/\u767e\u5ea6/\u5934\u6761/QQ/\u9489\u9489/\u6dd8\u5b9d\uff09\u3001\u5feb\u5e94\u7528\u7b49\u591a\u4e2a\u5e73\u53f0\u3002</li> </ul> '},function(e,t){e.exports='<h1 id="\u79fb\u52a8\u7aef\u5e94\u7528">\u79fb\u52a8\u7aef\u5e94\u7528</h1> <h2 id="\u6df7\u5408\u5f00\u53d1">\u6df7\u5408\u5f00\u53d1</h2> <blockquote> <p>Hybrid App\uff0c\u4fd7\u79f0\u6df7\u5408\u5e94\u7528\uff0c\u5373\u6df7\u5408\u4e86 Native\u6280\u672f \u4e0e Web\u6280\u672f \u8fdb\u884c\u5f00\u53d1\u7684\u79fb\u52a8\u5e94\u7528</p> </blockquote> <h3 id="\u539f\u7406">\u539f\u7406</h3> <ul> <li><a href="https://www.cnblogs.com/peakleo/p/10572749.html">Hybrid App\u5f00\u53d1\u539f\u7406</a></li> <li><a href="https://juejin.im/post/5b4ff3bee51d4519721b9986">Hybrid App\u6280\u672f\u89e3\u6790</a></li> </ul> <h3 id="\u6df7\u5408\u5f00\u53d1\u6846\u67b6">\u6df7\u5408\u5f00\u53d1\u6846\u67b6</h3> <h4 id="react-native">React Native</h4> <ul> <li><a href="https://reactnative.cn/">React Native\u4e2d\u6587\u7f51</a></li> <li><a href="https://github.com/jondot/awesome-react-native">Awesome React Native</a></li> </ul> <h4 id="weexvue\u8bed\u6cd5">Weex(Vue\u8bed\u6cd5)</h4> <ul> <li><a href="https://weex.apache.org/zh/">\u5b98\u65b9\u6587\u6863</a></li> </ul> <h4 id="ionic">Ionic</h4> <ul> <li><a href="https://ionicframework.com/docs/v3/">\u5b98\u65b9\u6587\u6863</a></li> </ul> '},function(e,t){e.exports='<h1 id="nodejs">NodeJS</h1> <blockquote> <p>NodeJS\u662f\u4e00\u4e2a\u57fa\u4e8eChrome V8\u7684JavaScript\u8fd0\u884c\u73af\u5883\uff0c\u901a\u5e38\u7528\u4e8e\u5f00\u53d1Web\u670d\u52a1\u5668\u7b49\u4e1a\u52a1\uff0c\u4e5f\u53ef\u4ee5\u5f00\u53d1\u684c\u9762\u5e94\u7528\uff0c\u79fb\u52a8\u7aef\u5e94\u7528\u7b49\u7b49\u3002 </p> </blockquote> <ul> <li><a href="http://nodejs.cn/learn/">NodeJS \u4e2d\u6587\u5165\u95e8</a></li> </ul> <hr> <ul> <li><a href="https://www.nodebeginner.org/index-zh-cn.html">Node \u5165\u95e8</a></li> <li><a href="https://nqdeng.github.io/7-days-nodejs/">\u4e03\u5929\u5b66\u4f1a NodeJS</a></li> </ul> <h2 id="npm\u7684\u4f7f\u7528">NPM\u7684\u4f7f\u7528</h2> <blockquote> <p>NPM\u662fNodeJS\u7684\u4e00\u4e2a\u5305\u7ba1\u7406\u5668\uff08\u5185\u7f6e\uff09\uff0c\u901a\u8fc7\u547d\u4ee4\u884c\u754c\u9762\u6765\u4e0b\u8f7d\u6765\u81ea <a href="https://npmjs.com">npmjs.com</a> \u7684JavaScript\u5305\u3002\u4f60\u4e5f\u53ef\u4ee5\u901a\u8fc7\u5b83\u6765\u6d4b\u8bd5\uff0c\u53d1\u5e03\u81ea\u5df1\u7684JavaScript\u5305</p> </blockquote> <ul> <li><a href="https://www.runoob.com/nodejs/nodejs-npm.html">NPM \u4f7f\u7528\u4ecb\u7ecd-\u83dc\u9e1f\u6559\u7a0b</a></li> <li><a href="https://www.npmjs.cn/">Npm \u4e2d\u6587\u6587\u6863</a></li> <li><a href="https://medium.com/@hossam.hilal0/package-json-vs-package-lock-json-vs-npm-shrinkwrap-json-33fcddc1521a">package.json/package-lock.json/npm-shrinkwrap.json \u7684\u533a\u522b</a></li> </ul> <h2 id="\u9879\u76ee\u5b9e\u8df5">\u9879\u76ee\u5b9e\u8df5</h2> <ul> <li><a href="https://github.com/goldbergyoni/nodebestpractices">Node Best Practices</a></li> <li><a href="https://eggjs.org/">\u4f01\u4e1a\u7ea7\u6846\u67b6 Egg.js</a></li> </ul> <h3 id="\ud83d\udcda-\u4e66\u7c4d">\ud83d\udcda \u4e66\u7c4d</h3> <ul> <li>\u300a\u6df1\u5165\u6d45\u51fa Node\u300b</li> <li>\u300aNodeJs \u5b9e\u6218\u300b</li> </ul> '},function(e,t){e.exports='<h1 id="\u6027\u80fd">\u6027\u80fd</h1> <h2 id="web\u6027\u80fd">web\u6027\u80fd</h2> <ul> <li><a href="https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics?hl=zh-cn">\u4ee5\u7528\u6237\u4e3a\u4e2d\u5fc3\u7684\u6027\u80fd\u6307\u6807</a></li> <li><a href="https://web.dev/rail/">Measure performance with the RAIL model</a></li> <li><a href="https://developers.google.com/web/tools/chrome-devtools/rendering-tools?hl=zh-cn">\u4f7f\u7528DevTools\u5206\u6790\u8fd0\u884c\u65f6\u6027\u80fd</a></li> <li><a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance">Get Started With Analyzing Runtime Performance</a></li> <li><a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance Analysis Reference</a></li> </ul> <h2 id="\ud83d\udee0-\u6d4b\u8bd5\u6027\u80fd\u5de5\u5177">\ud83d\udee0 \u6d4b\u8bd5\u6027\u80fd\u5de5\u5177</h2> <ul> <li><a href="https://developers.google.com/web/tools/lighthouse?hl=zh-cn">\u4f7f\u7528 Lighthouse \u5ba1\u67e5\u7f51\u7edc\u5e94\u7528</a></li> <li><a href="https://www.webpagetest.org/">web page test</a></li> </ul> '},function(e,t){e.exports='<h1 id="\u670d\u52a1\u7aef\u6e32\u67d3">\u670d\u52a1\u7aef\u6e32\u67d3</h1> <blockquote> <p>SSR\u670d\u52a1\u7aef\uff08Server Side Render\uff09\u6e32\u67d3\u6307\u4e00\u822c\u60c5\u51b5\u4e0b,\u4e00\u4e2aweb\u9875\u9762\u7684\u6570\u636e\u6e32\u67d3\u90fd\u662f\u7531\u5ba2\u6237\u7aef\u6216\u8005\u6d4f\u89c8\u5668\u7aef\u6765\u5b8c\u6210\u7684\uff0c\u5148\u4ece\u670d\u52a1\u5668\u8bf7\u6c42\uff0c\u7136\u540e\u5230\u9875\u9762\uff0c\u518d\u901a\u8fc7AJAX\u8bf7\u6c42\u5230\u9875\u9762\u6570\u636e\uff0c\u4e4b\u540e\u628a\u76f8\u5e94\u7684\u6570\u636e\u586b\u5145\u5230\u6a21\u677f\uff0c\u5f62\u6210\u5b8c\u6574\u7684\u9875\u9762\u6765\u5448\u73b0\u7ed9\u7528\u6237\u3002\u670d\u52a1\u7aef\u6e32\u67d3\u628a\u6570\u636e\u7684\u521d\u59cb\u8bf7\u6c42\u653e\u5728\u4e86\u670d\u52a1\u7aef\uff0c\u7136\u540e\u670d\u52a1\u7aef\u6536\u5230\u8bf7\u6c42\u540e,\u628a\u6570\u636e\u586b\u5145\u5230\u6a21\u677f\u5f62\u6210\u5b8c\u6574\u7684\u9875\u9762\uff0c\u7531\u670d\u52a1\u7aef\u628a\u6e32\u67d3\u7684\u5b8c\u6574\u7684\u9875\u9762\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef\u3002\u8fd9\u6837\u51cf\u5c11\u4e86\u4e00\u6b21\u5ba2\u6237\u7aef\u5230\u670d\u52a1\u7aef\u7684Http\u8bf7\u6c42\uff0c\u52a0\u5feb\u4e86\u76f8\u5e94\u901f\u5ea6\uff0c\u4e00\u822c\u7528\u4e8e\u9996\u5c4f\u7684\u6027\u80fd\u4f18\u5316\u3002 --wikipedia</p> </blockquote> <h2 id="\u539f\u7406\u89e3\u6790">\u539f\u7406\u89e3\u6790</h2> <ul> <li><a href="https://www.zhihu.com/question/59578433">\u4e3a\u4ec0\u4e48\u73b0\u5728\u53c8\u6d41\u884c\u670d\u52a1\u7aef\u6e32\u67d3html\uff1f</a></li> <li><a href="https://juejin.im/post/5d1fe6be51882579db031a6d">\u4ece\u5934\u5f00\u59cb\uff0c\u5f7b\u5e95\u7406\u89e3\u670d\u52a1\u7aef\u6e32\u67d3\u539f\u7406</a></li> </ul> <h2 id="\u670d\u52a1\u7aef\u6e32\u67d3\u6846\u67b6">\u670d\u52a1\u7aef\u6e32\u67d3\u6846\u67b6</h2> <ul> <li><a href="https://nextjs.org/">Next.JS</a> (\u57fa\u4e8eReact)</li> <li><a href="https://nuxtjs.org/">Nuxt.JS</a> (\u57fa\u4e8eVue)</li> </ul> '},function(e,t){e.exports='<h1 id="\u9759\u6001\u7ad9\u70b9\u6784\u5efa">\u9759\u6001\u7ad9\u70b9\u6784\u5efa</h1> <blockquote> <p>\u9759\u6001\u7f51\u7ad9\u751f\u6210\u5668\u662f\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\uff0c\u5b83\u53ef\u4ee5\u83b7\u53d6\u60a8\u7684\u7f51\u7ad9\u5185\u5bb9\uff0c\u5c06\u5176\u5e94\u7528\u4e8e\u6a21\u677f\uff0c\u5e76\u751f\u6210\u7eaf\u9759\u6001HTML\u6587\u4ef6\u7684\u7ed3\u6784\uff0c\u51c6\u5907\u5c06\u5176\u4f20\u9012\u7ed9\u8bbf\u95ee\u8005\u3002</p> </blockquote> <p><img src="https://snipcart.com/media/203662/ssg1.png?width=1600&format=webp&quality=80&upscale=false" alt=""></p> <h2 id="\u6587\u6863\u7ad9\u70b9\u751f\u6210">\u6587\u6863\u7ad9\u70b9\u751f\u6210</h2> <ul> <li><a href="https://docusaurus.io/en/">Docusaurus</a>(\u4f7f\u7528React)</li> <li><a href="https://docsify.js.org/#/?id=docsify">docsify</a></li> </ul> <h2 id="\u6846\u67b6">\u6846\u67b6</h2> <ul> <li><a href="https://www.gatsbyjs.org/">Gatsby</a>(\u4f7f\u7528React&amp;GraphQL\uff0c\u7a0d\u5fae\u6709\u4e9b\u590d\u6742\uff0c\u4f46\u529f\u80fd\u5f3a\u5927)</li> <li><a href="https://www.gatsbyjs.org/">Next.js</a>(\u4f7f\u7528React)</li> <li><a href="https://nuxtjs.org/">Nuxt.JS</a>(\u57fa\u4e8eVue)</li> <li><a href="https://vuepress.vuejs.org/zh/">VuePress</a></li> </ul> '},function(e,t){e.exports='<h1 id="\u8865\u5145\u4e2d">\u8865\u5145\u4e2d...</h1> <p>\u8d44\u6599\u8fd8\u5728\u8865\u5145\u4e2d\uff0c\u8fd1\u671f\u4f1a\u66f4\u65b0\uff01\uff01\uff01 \u8bf7\u8010\u5fc3\u7b49\u5f85~~</p> '},function(e,t){e.exports='<h1 id="\u6d4b\u8bd5\u6846\u67b6">\u6d4b\u8bd5\u6846\u67b6</h1> <h2 id="\u57fa\u7840\u77e5\u8bc6">\u57fa\u7840\u77e5\u8bc6</h2> <ul> <li><a href="https://juejin.im/entry/584ab2dc128fe1006c7cdc11">JavaScript \u6d4b\u8bd5\ufe30 \u5355\u5143 vs \u529f\u80fd vs \u96c6\u6210\u6d4b\u8bd5</a></li> <li><a href="https://juejin.im/entry/589d6f072f301e0069bda275">\u7406\u89e3\u524d\u7aef\u5f00\u53d1\u4e2d\u7684unit test \u548ce2e test</a></li> </ul> <h2 id="js\u6d4b\u8bd5\u6846\u67b6">JS\u6d4b\u8bd5\u6846\u67b6</h2> <ul> <li><a href="https://jestjs.io/">Jest</a></li> <li><a href="https://mochajs.org/">Mocha</a></li> <li><a href="https://jasmine.github.io/">Jasmine</a></li> </ul> <h2 id="e2e\u6d4b\u8bd5">E2E\u6d4b\u8bd5</h2> <ul> <li><a href="https://github.com/puppeteer/puppeteer">Puppeteer</a></li> <li><a href="https://www.cypress.io/">Cypress</a></li> </ul> '},function(e,t){e.exports='<h1 id="web-assembly\uff08wasm\uff09">Web Assembly\uff08wasm\uff09</h1> <blockquote> <p>WebAssembly\u6216\u79f0wasm\u662f\u4e00\u4e2a\u5b9e\u9a8c\u6027\u7684\u4f4e\u7ea7\u7f16\u7a0b\u8bed\u8a00\uff0c\u5e94\u7528\u4e8e\u6d4f\u89c8\u5668\u5185\u7684\u5ba2\u6237\u7aef\u3002WebAssembly\u662f\u4fbf\u643a\u5f0f\u7684\u62bd\u8c61\u8bed\u6cd5\u6811\uff0c\u88ab\u8bbe\u8ba1\u6765\u63d0\u4f9b\u6bd4JavaScript\u66f4\u5feb\u901f\u7684\u7f16\u8bd1\u53ca\u8fd0\u884c\u3002WebAssembly\u5c06\u8ba9\u5f00\u53d1\u8005\u80fd\u8fd0\u7528\u81ea\u5df1\u719f\u6089\u7684\u7f16\u7a0b\u8bed\u8a00\uff08\u6700\u521d\u4ee5C/C++\u4f5c\u4e3a\u5b9e\u73b0\u76ee\u6807\uff09\u7f16\u8bd1\uff0c\u518d\u85c9\u865a\u62df\u673a\u5f15\u64ce\u5728\u6d4f\u89c8\u5668\u5185\u8fd0\u884c\u3002WebAssembly\u7684\u5f00\u53d1\u56e2\u961f\u5206\u522b\u6765\u81eaMozilla\u3001Google\u3001Microsoft\u3001Apple\uff0c\u4ee3\u8868\u7740\u56db\u5927\u7f51\u7edc\u6d4f\u89c8\u5668Firefox\u3001Chrome\u3001Microsoft Edge\u3001Safari\u30022017\u5e7411\u6708\uff0c\u4ee5\u4e0a\u56db\u4e2a\u6d4f\u89c8\u5668\u90fd\u5f00\u59cb\u5b9e\u9a8c\u6027\u7684\u652f\u6301WebAssembly\u3002WebAssembly \u4e8e 2019 \u5e74 12 \u6708 5 \u65e5\u6210\u4e3a\u4e07\u7ef4\u7f51\u8054\u76df\uff08W3C\uff09\u7684\u63a8\u8350\uff0c\u4e0e HTML\uff0cCSS \u548c JavaScript \u4e00\u8d77\uff0c\u6210\u4e3a Web \u7684\u7b2c\u56db\u79cd\u8bed\u8a00.</p> </blockquote> <h2 id="\ud83d\udcc4-\u6587\u6863">\ud83d\udcc4 \u6587\u6863</h2> <ul> <li><a href="http://webassembly.org.cn/">\u5b98\u65b9\u6587\u6863</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/WebAssembly">MDN\u6307\u5357</a></li> </ul> '},function(e,t){e.exports='<h1 id="webview">WebView</h1> <blockquote> <p>\u53ef\u4ee5\u5185\u5d4c\u5728\u79fb\u52a8\u7aef\uff0c\u5b9e\u73b0\u524d\u7aef\u7684\u6df7\u5408\u5f0f\u5f00\u53d1\uff0c\u5927\u591a\u6570\u6df7\u5408\u5f0f\u5f00\u53d1\u6846\u67b6\u90fd\u662f\u57fa\u4e8e WebView \u6a21\u5f0f\u8fdb\u884c\u4e8c\u6b21\u5f00\u53d1\u7684</p> </blockquote> <h2 id="\ud83d\udcc4-\u6587\u7ae0">\ud83d\udcc4 \u6587\u7ae0</h2> <ul> <li><a href="https://blog.csdn.net/xiaoqiang_0719/article/details/52383920">\u4f7f\u7528 webview \u51e0\u79cd\u5e38\u89c1\u7684 hybrid \u901a\u4fe1\u65b9\u5f0f</a></li> <li><a href="https://www.cnblogs.com/pqjwyn/p/7120342.html">\u524d\u7aef\u89e3\u8bfb WebView</a></li> </ul> '},function(e,t,i){"use strict";i.r(t);var a={};i.r(a),i.d(a,"all",(function(){return M})),i.d(a,"p1",(function(){return q})),i.d(a,"p2",(function(){return J})),i.d(a,"p3",(function(){return W}));var l=i(0),o=i.n(l),r=i(12),s=i.n(r),h=i(17),n=i(3),c=(i(48),i(9)),p=i(41),u=i(36),d=i.n(u),m=i(42),f=(i(49),i(16)),b=i(10),g={width:140,height:40,bgColor:["#ea5455","#f07b3f","#ffd460"],subCardMargin:10,lineColor:"#fff",textColor:"#444",strokeColor:"#3A7AF2"},w={recommand:"\u2b50\ufe0f",optional:"\u2705",notRecommand:"\u274e"},v="recommand",k="optional",x="notRecommand";function S(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:200,a=arguments.length>3?arguments[3]:void 0,l=arguments.length>4?arguments[4]:void 0,o=a||{},r=o.h,s=void 0===r?40:r,h=o.bgColor,n=o.textColor,c=o.link,p=o.process,u=o.tag,d={text:e,w:i,h:s,children:l,bgColor:h,textColor:n,link:c,process:p,tag:u};return"number"===typeof t?d.x=t:d=Object(f.a)(Object(f.a)({},d),t),d}function y(e,t,i){var a=new b.fabric.Text("".concat(w[e]),{fontSize:14,fill:"#fff",originX:"center",originY:"center",fontFamily:" Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '\u5fae\u8f6f\u96c5\u9ed1', Arial, sans-serif",fontWeight:"500"}),l=new b.fabric.Group([a],{left:i?t.left-5:t.left+t.width-6,top:t.top-4,lockMovementX:!0,lockMovementY:!0,globalCompositeOperation:"source-over"});return l.hasControls=!1,l}function C(e,t){var i=t.x,a=t.y,l=t.depth,o=void 0===l?1:l,r=t.w,s=void 0===r?g.width:r,h=t.h,n=void 0===h?g.height:h,c=t.bgColor,p=void 0===c?g.bgColor[o-1]:c,u=t.textColor,d=void 0===u?g.textColor:u,m=(t.isMain,t.isEnd,new b.fabric.Rect({fill:p,width:s,height:n,originX:"center",originY:"center",rx:4,ry:4,shadow:"rgba(0,0,0,0.3) 2px 2px 4px",hasControls:!1})),f=new b.fabric.Text(e,{fontSize:15,fill:d,originX:"center",originY:"center",fontFamily:" Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '\u5fae\u8f6f\u96c5\u9ed1', Arial, sans-serif",fontWeight:"500"}),w=new b.fabric.Group([m,f],{left:i,top:a,lockMovementX:!0,lockMovementY:!0});return w.hasControls=!1,w}var j,E="left";function N(e,t){var i=new b.fabric.Path("M 65 0 Q 100, 100, 200, 0",{fill:"",stroke:g.lineColor,strokeWidth:2,objectCaching:!1});return i.strokeDashArray=[5,5],i.path[0][1]=e.left+e.width,i.path[0][2]=e.top+e.height/2,e.left>t.left?(i.path[1][1]=t.left-(e.left-t.left)/2,i.path[1][2]=e.top+(t.top-e.top)/2):e.left<t.left&&(i.path[1][1]=e.left+(t.left+e.width-e.left)/2,i.path[1][2]=e.top+(t.top-e.top)/2),i.path[1][3]=t.left,i.path[1][4]=t.top+t.height/2,i.globalCompositeOperation="destination-over",i}function A(e,t,i){var a={containerClass:"roadmap-canvas",selection:!1,interactive:!1,hoverCursor:"pointer"};j?(j.clear(),window.__GO_TO_MARKDOWN__&&(j=new b.fabric.Canvas(e,a),window.__GO_TO_MARKDOWN__=!1)):j=new b.fabric.Canvas(e,a);var l,o=[],r=[];return t.forEach((function(e){var t=C(e.text,e);if(t.link=e.link,o.push(t),e.tag&&i){var a=y(e.tag,t);o.push(a)}function s(t,a,l,h){a&&a.forEach((function(n,c){var p=a.length,u=p%2===0,d=n.y||t.top-(Math.floor(p/2)-c)*(g.height+g.subCardMargin);d+=u?g.height/2:0;var m=C(n.text,Object(f.a)(Object(f.a)({},n),{},{y:d,depth:h}));m.link=n.link||e.link,o.push(m);var b="left"===l?N(m,t):N(t,m);if(r.push(b),n.tag&&i){var w=y(n.tag,m,"left"===l);o.push(w)}n.children&&s(m,n.children,l,h+1)}))}if(l&&r.push(function(e,t){var i=new b.fabric.Path("M 65 0 Q 100, 100, 200, 0",{fill:"",stroke:g.lineColor,strokeWidth:3,objectCaching:!1});return i.path[0][1]=e.left+g.width/2,i.path[0][2]=e.top+g.height/2,i.path[1][1]="left"===E?e.left-g.width/3:e.left+g.width,E="left"===E?"right":"left",i.path[1][2]=e.top+(t.top-e.top)/2,i.path[1][3]=t.left+g.width/2,i.path[1][4]=t.top+g.height/2,i.globalCompositeOperation="destination-over",i}(l,t)),l=t,e.children){var h=e.children[0],n=e.children[1];s(t,h,"left",2),s(t,n,"right",2)}})),o.map((function(e){return j.add(e)})),r.map((function(e){return j.add(e)})),j}var M=[{text:"\u51c6\u5907\u5f00\u59cb",x:400,y:0,process:1},{text:"\u4e92\u8054\u7f51",x:400,y:100,tag:v,link:"/how-does-the-internet-work",process:2,children:[[S("\u4e92\u8054\u7f51\u5982\u4f55\u8fd0\u4f5c\uff1f",100),S("\u4ec0\u4e48\u662fHTTP/HTTPS",100)],[S("DNS\u539f\u7406",700),S("CDN\u539f\u7406",700)]]},{text:"\u6d4f\u89c8\u5668",x:400,y:280,process:2,link:"/how-does-the-browser-work",children:[[S("\u6d4f\u89c8\u5668\u5982\u4f55\u8fd0\u884c\uff1f",160,160),S("\u6d4f\u89c8\u5668\u5dee\u5f02/\u517c\u5bb9\u6027",160,160,{},[S("Chrome",0,120),S("Safari",0,120),S("Firefox",0,120),S("Android Browser",0,120),S("iOS Safari",0,120)])],[S("Headless Browser",700,200,{bgColor:"#CCCCCC"}),S("WebView",700,200,{bgColor:"#CCCCCC"})]]},{text:"\u7f16\u8f91\u5668",x:400,y:460,link:"/editor",process:1,children:[[],[S("VSCode",700,100,{tag:v}),S("WebStorm",700,100,{tag:k}),S("Atom",700,100,{tag:k}),S("Sublime",700,100,{tag:k})]]},{text:"HTML",x:400,y:600,link:"/html",process:1,children:[[S("\u5e38\u7528\u6807\u7b7e",100),S("\u8868\u5355",100)],[S("SEO\u641c\u7d22\u4f18\u5316",{x:700,y:590},140,{bgColor:"#CCCCCC"})]]},{text:"CSS",x:400,y:720,link:"/css",process:1,children:[[],[S("\u57fa\u672c\u8bed\u6cd5",700,140),S("\u5e03\u5c40",700,140,{},[S("\u6d6e\u52a8float",900,100),S("\u5b9a\u4f4dpostion",900,100),S("\u76d2\u6a21\u578b",900,100),S("flex",900,100),S("grid/layout",900,100)]),S("\u54cd\u5e94\u5f0f\u8bbe\u8ba1",700,140)]]},{text:"JavaScript",x:400,y:800,link:"/javascript",process:1,children:[[S("\u57fa\u672c\u8bed\u6cd5",100),S("DOM & BOM",100),S("\u63a5\u53e3\u8bf7\u6c42Ajax/Fetch",100),S("ES6+",100),S("\u91cd\u70b9\u7406\u89e3\u6982\u5ff5 \n\u53d8\u91cf\u63d0\u5347\u3001\u65f6\u95f4\u5192\u6ce1\u6355\u83b7\u3001 \n\u4f5c\u7528\u57df\u3001\u539f\u578b\u7b49 ",100,200,{h:100})]]},{text:"\u7248\u672c\u7ba1\u7406\u5de5\u5177Git",x:380,y:960,link:"/git",process:1,children:[[],[S("\u57fa\u672c\u547d\u4ee4",600),S("\u6ce8\u518cgithub\u8d26\u53f7\u5e76\u5b66\u4f1a\u4f7f\u7528",600),S("\u642d\u5efa\u4e00\u4e2a\u9759\u6001\u535a\u5ba2\u7ad9\u70b9",600,200,{},[S("xxx.github.io/blog",840,160)])]]},{text:"           Node\u57fa\u7840 \n \uff08\u6682\u65f6\u4e0d\u7528\u6df1\u5165\u5b66\u4e60\uff09",x:440,y:1100,w:200,h:50,link:"/node",children:[[S("\u5305\u7ba1\u7406",200,100,{},[S("npm",0,100),S("yarn",0,100),S("npx",0,100)]),S("\u5e38\u7528\u5305",{x:200,y:1200},100,{},[S("\u6587\u4ef6\u8bfb\u5199fs",0,100),S("\u8def\u5f84\u67e5\u627epath",0,100),S("\u7f51\u7edchttp",0,100)])]]},{text:"\u6784\u5efa\u5de5\u5177",x:400,y:1300,link:"/build-tools",children:[[],[S("\u81ea\u52a8\u5316\u6784\u5efa",{x:600,y:1200},100,{},[S("npm script",800,100),S("gulp",800,100,{bgColor:"#CCCCCC"})]),S("\u6a21\u5757\u5316\u6253\u5305",{x:600,y:1360},100,{},[S("Webpack",800,100,{tag:v}),S("Rollup",800,100,{tag:k}),S("Parcel",800,100,{tag:k}),S("Snowpack",800,100,{tag:k})])]]},{text:"CSS\u9884\u5904\u7406",x:300,y:1400,process:2,link:"/css-preprocessor",children:[[S("Sass",100,100,{tag:v}),S("PostCss",100,100,{tag:v}),S("Stylus",100,100,{tag:k}),S("Less",100,100,{tag:x})]]},{text:"JS\u6846\u67b6",x:500,y:1700,process:2,link:"/js-framework",children:[[S("React",{x:200,y:1570},100,{},[S("Redux",10,100,{tag:v}),S("Mobx",10,100,{tag:k}),S("React-router",10,100,{tag:v})]),S("Vue",{x:200,y:1700},100,{},[S("VueX",10,100,{tag:v}),S("Vue-router",10,100,{tag:v})]),S("Angular",{x:200,y:1800},100,{},[S("RxJS",10,100),S("NgRx",10,100)])]]},{text:"CSS\u6846\u67b6",x:400,y:1900,process:2,link:"/css-framework",children:[[],[S("Antd",700,100,{tag:v}),S("Element UI",700,100,{tag:v}),S("Material UI",700,100,{tag:k})]]},{text:"CSS\u4f18\u5316\u65b9\u6848",x:300,y:2e3,process:3,link:"/css-modern",children:[[S("Styled Component",10,140,{tag:v}),S("CSS Modules",10,140,{tag:v}),S("Styled JSX",10,140,{tag:k})]]},{text:"\u6d4b\u8bd5",x:400,y:2200,process:3,link:"/test-framework",children:[[S("\u5355\u5143\u6d4b\u8bd5",200,100),S("\u96c6\u6210\u6d4b\u8bd5",200,100),S("E2E\u6d4b\u8bd5",200,100)],[S("Jest",700,100),S("Enzyme",700,100),S("Puppeteer",700,100)]]},{text:"\u4ee3\u7801\u8d28\u91cf",x:400,y:2400,link:"/code-quality",process:3,children:[[S("\u7c7b\u578b\u6821\u9a8c",200,100,{},[S("TypeScript",10,100,{tag:v}),S("Flow",10,100,{tag:x})]),S("Linter & Formatter",{x:200,y:2460},140,{},[S("ESLint",0,100),S("Prettier",0,100)])],[S("\u7f16\u7801\u89c4\u8303",600,100,{},[S("JavaScript Style Guide",800,180),S("CSS Style Guide",800,180),S("React Style Guide",800,180)])]]},{text:"\u6027\u80fd",x:380,y:2760,process:3,link:"/performance",children:[[S("\u6027\u80fd\u6307\u6807",140,100,{},[S("FP",0,60),S("FCP",0,60),S("FMP",0,60),S("TTI",0,60)]),S("RAIL\u6a21\u578b",140,120),S("Lighthouse \u6307\u6807",140,120),S("DevTools",140,100)],[S("PWA",700,100),S("Service Worker",700,140),S("\u9aa8\u67b6\u5c4f",700,140)]]},{text:"\u6570\u636e\u53ef\u89c6\u5316",x:300,y:2980,link:"/data-view",children:[[S("EChart",100,100,{tag:v}),S("AntV",100,100,{tag:k}),S("HighChart",100,100,{tag:k})],[S("D3.js",500,100)]]},{text:"\u670d\u52a1\u7aef\u6e32\u67d3SSR",x:420,y:3180,process:3,link:"/ssr",children:[[],[S("Next.js (React)",700,120),S("Nuxt.js (Vue)",700,120)]]},{text:"\u79fb\u52a8\u7aef\u5e94\u7528",x:360,y:3340,link:"/mobile-app",children:[[S("React Native",200,100),S("Weex",200,100),S("hybrid",200,100),S("Flutter",200,100)],[S("\u8c03\u8bd5",600,100,{},[S("Chrome DevTools",800,140),S("Android Simulator",800,140),S("iOS Simulator",800,140)])]]},{text:"\u5c0f\u7a0b\u5e8f",x:400,y:3560,link:"/mini-app",children:[[S("\u539f\u751f",200,100,{},[S("\u5fae\u4fe1",0,100),S("\u652f\u4ed8\u5b9d",0,100),S("\u5934\u6761",0,100)])],[S("\u8de8\u7aef\u89e3\u51b3\u65b9\u6848",660,100,{},[S("Taro",850,100,{tag:v}),S("uni-app",850,100,{tag:v}),S("Chameleon",850,100,{tag:k})])]]},{text:"\u684c\u9762\u5e94\u7528",x:450,y:3670,link:"/desktop-app",children:[[S("Electron",200,100,{tag:v}),S("NW.js",200,100)]]},{text:"\u9759\u6001\u7ad9\u70b9\u6784\u5efa",x:400,y:3840,process:3,link:"/static-site",children:[[],[S("GatsbyJS",700,100,{tag:v}),S("VuePress",700,100,{tag:v}),S("Docusaurus",700,100,{tag:k}),S("Hexo",700,100,{tag:x})]]},{text:"Web Assembly",x:400,y:4e3,link:"/web-assembly",bgColor:"#CCC",children:[[S("\u62e5\u62b1\u672a\u6765",200,100)]]},{text:"\u5b66\u4e60\u6c38\u65e0\u6b62\u5883",x:300,y:4500,process:1,link:"/learn-from-github"},{text:"\u7ffb\u6eda\u5427\uff01\u540e\u6d6a\uff01",x:400,y:4900,process:1,link:"/afterwave"}];function R(e){return M.filter((function(t){return e.includes(t.process)}))}var q=R([1]),J=R([1,2]),W=R([1,2,3]),O=(i(57),[{value:"all",label:"\u5b8c\u6574\u8def\u7ebf",canvasHeight:5e3},{value:"p1",label:"\ud83d\udc76\ud83c\udffb \u9636\u6bb51",canvasHeight:2e3},{value:"p2",label:"\ud83d\udc66\ud83c\udffb \u9636\u6bb52",canvasHeight:3e3},{value:"p3",label:"\ud83d\udc68\ud83c\udffb \u9636\u6bb53",canvasHeight:2e3}]);var z=function(){var e=Object(n.e)(),t=Object(l.useState)(O[0]),i=Object(c.a)(t,2),r=i[0],s=i[1],h=Object(l.useState)(!0),u=Object(c.a)(h,2),f=u[0],b=u[1];Object(l.useEffect)((function(){var t=A("roadmapCanvas",a[r.value],f),i=function(t){t.target&&t.target.link&&(window.__GO_TO_MARKDOWN__=!0,e.push("/guide".concat(t.target.link)))};return t.on("mouse:down",i),function(){t.off("mouse:down",i)}}),[e,r,f]);var g=Object(l.useCallback)((function(e){b(e)}),[]),w=Object(l.useCallback)((function(){var e=document.querySelector(".roadmap"),t=r.label.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,"").trim();d.a.toJpeg(e).then((function(e){var i=document.createElement("a");i.download="roadmap-".concat(t,".jpeg"),i.href=e,i.click()}))}),[r]);return o.a.createElement("div",{className:"roadmap-container"},o.a.createElement("div",{className:"process-select-container"},o.a.createElement("div",{className:"tag-switch"},o.a.createElement("span",null,"\u5c55\u793a\u6807\u7b7e"),o.a.createElement(m.a,{checkedChildren:"\u5f00",unCheckedChildren:"\u5173",defaultChecked:!0,onChange:g})),o.a.createElement(p.a,{options:O,defaultValue:O[0],onChange:s,placeholder:"\u8bf7\u9009\u62e9",className:"process-select"}),o.a.createElement("div",{className:"download",onClick:w},"\u4e0b\u8f7d\u8def\u7ebf\u56fe")),o.a.createElement("div",{className:"roadmap"},f&&o.a.createElement("div",{className:"desc-container"},o.a.createElement("div",{className:"explain-square"},o.a.createElement("div",{className:"explain-content"},o.a.createElement("div",null,"1."," ",o.a.createElement("span",{role:"img","aria-label":"recommend"},"\u2b50\ufe0f")," ","- \u63a8\u8350\u4f7f\u7528"),o.a.createElement("div",null,"2."," ",o.a.createElement("span",{role:"img","aria-label":"prepare"},"\u2705")," ","- \u5907\u9009\u65b9\u6848"),o.a.createElement("div",null,"3."," ",o.a.createElement("span",{role:"img","aria-label":"no recommend"},"\u274e")," ","- \u4e0d\u63a8\u8350\u5b66\u4e60\uff08\u6280\u672f\u5df2\u8fc7\u65f6\u6216\u5176\u4ed6\u539f\u56e0\uff09"),o.a.createElement("div",null,"4.",o.a.createElement("span",{className:"grey-card"},"xxxx")," - \u9700\u8981\u65f6\u518d\u5b66")))),o.a.createElement("div",null,o.a.createElement("canvas",{id:"roadmapCanvas",height:"5000px",width:"1000px"}))))},G=i(18),T=i(39),H=i(40),V=i.n(H);i(95);function P(){var e=Object(n.f)().query,t=i(96)("./".concat(e,".md"));return o.a.createElement("div",{dangerouslySetInnerHTML:{__html:t}})}function _(){return o.a.createElement("div",{className:"header"},o.a.createElement("div",{className:"top"},o.a.createElement("span",{className:"github-button"},o.a.createElement("iframe",{src:"https://ghbtns.com/github-btn.html?user=virkano&repo=front-end-roadmap&type=star&count=true&size=large",frameBorder:"0",scrolling:"0",width:"170",height:"30",title:"GitHub"}))),o.a.createElement("div",{className:"title"},o.a.createElement("span",{className:"text"},"\u524d\u7aef\u5b66\u4e60\u8def\u7ebf",o.a.createElement("span",{className:"emoji"},o.a.createElement("span",{role:"img","aria-label":"line"},"\ud83e\uddf6"),o.a.createElement("span",{role:"img","aria-label":"road"},"\ud83e\udd8c")))),o.a.createElement("div",{className:"sub-title"},o.a.createElement("span",{role:"img","aria-label":"workholic"},"\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb")," \u597d\u597d\u5b66\u4e60\uff0c\u5929\u5929\u6572\u4ee3\u7801 ",o.a.createElement("span",{role:"img","aria-label":"workholic"},"\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb")))}Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));s.a.render(o.a.createElement(o.a.Fragment,null,o.a.createElement(_,null),o.a.createElement(h.a,{basename:"/front-end-roadmap"},o.a.createElement(n.a,{exact:!0,path:"/",component:z}),o.a.createElement(n.a,{path:"/guide/:query",component:function(){var e=Object(n.f)().query,t=Object(n.e)(),i=Object(l.useState)([]),a=Object(c.a)(i,2),r=a[0],s=a[1];return Object(l.useEffect)((function(){window.scrollTo(0,0)}),[]),Object(l.useEffect)((function(){Array.from(document.getElementsByTagName("a")).forEach((function(e){e.setAttribute("target","_blank")}));var t="https://api.github.com/repos/Virkano/front-end-roadmap/commits?path=src/page/guide/md/".concat(e,".md");V.a.get(t).then((function(e){if(e.status&&e.data){var t=function(e){var t,i=new Map,a=Object(T.a)(e);try{for(a.s();!(t=a.n()).done;){var l=t.value;i.has(l.author.id)||i.set(l.author.id,l)}}catch(o){a.e(o)}finally{a.f()}return Object(G.a)(i.values())}(e.data).map((function(e){return{name:e.author.login,avatar_url:e.author.avatar_url,github:e.author.html_url}})).reverse();s(t)}}))}),[e]),o.a.createElement("div",{className:"guide-container"},o.a.createElement("div",{className:"go-home",onClick:t.goBack},o.a.createElement("span",null,"<- \u8fd4\u56de")),o.a.createElement(o.a.Fragment,null,o.a.createElement(P,null),o.a.createElement("div",{className:"go-github-edit"},o.a.createElement("a",{href:"https://github.com/Virkano/front-end-roadmap/tree/main/src/page/guide/md/".concat(e,".md")},"\u60f3\u8981\u8865\u5145\uff0c\u70b9\u51fb\u8fd9\u91cc",o.a.createElement("span",{role:"img","aria-label":"cool"},"\ud83d\udcdd"))),o.a.createElement("div",{className:"github-contributors"},o.a.createElement("div",{className:"github-contributors-title"},"\u8d21\u732e\u4eba\u5458"),o.a.createElement("div",{className:"github-contributors-info"},r.map((function(e,t){return o.a.createElement("a",{href:e.github,key:"contributors-"+t,target:"_blank",rel:"noopener noreferrer"},o.a.createElement("img",{src:e.avatar_url,alt:e.name}),o.a.createElement("span",null,e.name))}))))))}}))),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){console.error(e.message)}))}]),[[43,1,2]]]);
  //# sourceMappingURL=main.26735f8f.chunk.js.map