SegmentFault 全栈修炼最新的文章
2021-12-19T23:26:05+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
推荐 10 个好用的 Vue3 的开源项目,开发效率又能提升了👍
https://segmentfault.com/a/1190000041144429
2021-12-19T23:26:05+08:00
2021-12-19T23:26:05+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
15
<p><img src="/img/remote/1460000041144431" alt="" title=""></p><p>大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫又在线营业啦 ~</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=2d2FI8ZEFUwJ%2Fpqp%2FwKDxg%3D%3D.53bl5sx9F39inm3iPhwzJg952sCzAhgWEDxl58X1deecwD1KDOdTyZhpJcIdnWjo4sw3wvAlySAW2erHr8U%2FJw%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><img src="/img/remote/1460000041144432" alt="" title=""></p><h2>1. vueuse</h2><p><img src="/img/remote/1460000041144433" alt="" title=""></p><p>Vue 2 和 3 的基本 Vue 组合实用程序集合。</p><blockquote><a href="https://link.segmentfault.com/?enc=XRsEl%2FHbMmhvcjePqBTQAA%3D%3D.aNPazWHsCU4ey%2BWL1m%2Bji2Lycqia3WXv%2Bq25HWQBkOx981XKr2Ow%2BGMMsypSeCJ8" rel="nofollow">https://github.com/vueuse/vueuse</a></blockquote><h2>2. volar</h2><p><img src="/img/remote/1460000041144434" alt="" title=""></p><p>VueLF 是一个专为 Vue 3 构建的语言支持插件。</p><blockquote><a href="https://link.segmentfault.com/?enc=WwraruRfS4Xasw4vA7zutQ%3D%3D.7wtFVm%2F2eqQmYvuWXv%2Bj3H8Rh33CmuMK7lWeWRdEwb1Hdg0rzV%2Bn9q3x1clbNR3X" rel="nofollow">https://github.com/johnsoncod...</a></blockquote><h2>3. buefy</h2><p><img src="/img/remote/1460000041144435" alt="" title=""></p><p>Buefy 是基于 Bulma 框架和设计的 Vue.js 响应式 UI 组件的轻量级库。</p><blockquote><a href="https://link.segmentfault.com/?enc=IRf%2B%2BTc9uCrypNXqh4uvbA%3D%3D.PzQZy9flck%2F9U9R%2FTatrbLnTG0F3jfYc0E9ir6aXvoI%3D" rel="nofollow">https://github.com/buefy/buefy</a></blockquote><h2>4. vodal</h2><p><img src="/img/remote/1460000041144436" alt="" title=""></p><p>带有动画的 Vue 模态框。</p><blockquote><a href="https://link.segmentfault.com/?enc=VgD5PYXhJ5rPf5FfJ%2BJg2A%3D%3D.dfWcwhhxw6gPAiKTdra%2B0X6Fotc%2FRu0CEocsPLx7KELy%2B%2BVo8tzZo%2BwxmC3Cn10t" rel="nofollow">https://github.com/chenjiahan...</a></blockquote><h2>5. vuetify</h2><p><img src="/img/remote/1460000041144437" alt="" title=""></p><p>Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。 </p><p>不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及。</p><blockquote><a href="https://link.segmentfault.com/?enc=8q7fG47Ibf2TJmv4KThn5g%3D%3D.dSkrh9BO%2B7kiY5%2BHCdgdWeuYf3mZfnrOuMJb7MvbJUuFBaryNmnh%2FWNZTfoFNKyV" rel="nofollow">https://github.com/vuetifyjs/...</a></blockquote><h2>6. vue-multiselect</h2><p><img src="/img/remote/1460000041144438" alt="" title=""></p><p>Vue.js 的通用选择/多选/标记组件。</p><blockquote><a href="https://link.segmentfault.com/?enc=Cw%2FhXVdi4WSkoUs5Anl5MA%3D%3D.tIGuhEjrLHnqmQTK19D3gXd8nZG619cDHQWUD7i9EatYAfTYnGWa%2FlA4h2ADTjL9" rel="nofollow">https://github.com/shentao/vu...</a></blockquote><h2>7. vue-composable</h2><p><img src="/img/remote/1460000041144439" alt="" title=""></p><p>Vue composition-api 可组合组件。 i18n、验证、分页、获取等 +50 种不同的组合。</p><blockquote><a href="https://link.segmentfault.com/?enc=hAwl9vXUoMJo8jRFjrohIg%3D%3D.bqY%2BZm0S94sGTg3acUOgvgOWc4h%2FNDOhTHb6bQCBl5mQOuA%2B2emiX2sZ%2B2LhFn2P" rel="nofollow">https://github.com/pikax/vue-...</a></blockquote><h2>8. pdfvuer</h2><p>Vue 的 PDF 查看器,使用 Mozilla 的 PDF.js,支持 Vue2 和 Vue3。</p><blockquote><a href="https://link.segmentfault.com/?enc=KLglacmZKyW2%2BGuCg%2BUazQ%3D%3D.5hDbUL9VnQyaO8RjdGufgb2RKaDsjFarpP7F8BuzxCcVX37z13651WEGHoh8tCpv" rel="nofollow">https://github.com/arkokoley/...</a></blockquote><h2>9. gridsome</h2><p><img src="/img/remote/1460000041144440" alt="" title=""></p><p>Gridsome 是一个 Vue 驱动的静态站点生成器,用于为任何无头 CMS、本地文件或 API 构建支持 CDN 的网站。</p><blockquote><a href="https://link.segmentfault.com/?enc=pSh7F2Rp9ZMKw%2F%2B26lRTww%3D%3D.0CUo1OmdXByGEzwM1vY5Rsb19ybcQXMP%2BFzin1ebTkAY5ESYdNC8Y3BGz%2FBWZ8Lw" rel="nofollow">https://github.com/gridsome/g...</a></blockquote><h2>10. mijin</h2><p><img src="/img/remote/1460000041144441" alt="" title=""></p><p>为 Vue.js / Nuxt.js 构建的 Tailwind CSS UI 组件。</p><blockquote><a href="https://link.segmentfault.com/?enc=bfIszuRnJvBiBEBDeW5GHg%3D%3D.8qUYYdrC7tPAW4gLJgyFR3BlVQUhJPRSH0SwPujV2NHtnDkvy342gDxMAbN3Jlk4" rel="nofollow">https://github.com/lecoueyl/m...</a></blockquote><h2>最后</h2><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=Baf4iOygwVQSPH4agBmVww%3D%3D.fcmmHlMfuZpQ1iR5iA5CVmepFUDNLTdREo8dx5lvi7wsGnQJCQ6RKFBUp8OA%2BqSANuOhr5xJqn09UWUi%2BLZs%2FQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>更多精彩项目,请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=%2BC6vpib%2FmhY8VjLPQmqUNw%3D%3D.tIaVRivsjBLkhQmxguI9f9BhK3NKe8HgyESMqeWJSKZb2Lrrn3kUZPjqMZTVsm%2BPNRcnYiq%2F9HZqmCCByZgF4A%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>关注公众号,回复 <strong>电子书</strong> 即可以获得下面 <strong>1000</strong> 本技术精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p>不知不觉,原创文章已经写到第 <strong>63</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后顺手点个赞或者转发吧,就当给猫哥一点鼓励吧。</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=SDw6a9snQaTLK49vBb7biw%3D%3D.Gw5MN2GBWbjpVQoo7ghHqUTCKRtywjsI%2Bv16PhWgLBgH5HYuNkJCImPzATy3vC94vQgjhqZ8zOWk%2FoZhUedVUw%3D%3D" rel="nofollow">猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!</a></li><li><a href="https://link.segmentfault.com/?enc=9gj91%2FuAOxagyHLqPmtQgQ%3D%3D.W0kZ6zeDlC82M%2BVBqTK1VZX%2FSI8QF%2BJ%2F9XC2auZcpa%2FLGhfc9%2BNrejuRF%2Fv%2BEHJraj%2BVfJfoEl47u99iSkJgjg%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=h%2BervOKWZ8mn%2FumwpgI1xQ%3D%3D.8FqkWwmJHq4oat3O5y5DpA4uiq9oWEv2oJbCpsg6nyA9BbeCtS1fG4YqqmdpAugtYaqtChcXK1kdPQwOf6JMfg%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=gNBeS8df2LFVlX38YaUpNA%3D%3D.j9mLL72%2B8JtANUhN3XxAYkewbocTFlafwmhpf%2BiD4v3KEsI7XLhtJbGUO0jgeexmdduYRetB5znV%2FlpqqAWZUw%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li></ul>
2K Star!超过 50 个专题、450 个好项目,大半年来推荐过的重磅项目合集 👍
https://segmentfault.com/a/1190000040255573
2021-06-28T22:53:32+08:00
2021-06-28T22:53:32+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
28
<p>这大半年来,猫哥已经推荐过超过 <strong>50</strong> 个专题, <strong>400</strong> 个超级好的开源项目了,今天把往期推荐过的文章与项目做个合集吧,方便大家能快速得查阅到想要的项目。</p><p>我是你们的 猫哥,还是那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>不知不觉,公众号:<a href="https://link.segmentfault.com/?enc=MlzEo3dP3YTK3L6SNR6TPw%3D%3D.IQ%2BRkGndIzZpXpfbQoSUoQcK%2BwnQ12vKBWTqmcG6wZ5dc0TR%2FqEXrC94ZCPym47CErrdzYcX9GuhSQL7FckVqQ%3D%3D" rel="nofollow">前端GitHub</a> 和 GitHub 上的仓库 <a href="https://link.segmentfault.com/?enc=6YXWcq7zVNdjpvFS5Tb7hA%3D%3D.rCX38nDhY7h1c6DMUMw79PTBRAyfkgbCTFIJZ753RXPLm6QG3MZJeEuenTn0l%2BhxkIDIjssmbrTm9GcIUm1Sow%3D%3D" rel="nofollow">FrontEndGitHub</a> 都已经更新并运营超过半年了呀, 前端GitHub 的定位是如下的:</p><blockquote><strong>专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。</strong></blockquote><p>虽然更新文章的频率不高,平均一周一更,但是还是一直在更新的,而且更新的文章内容还是很有质量的。</p><p>FrontEndGitHub 也收获了 2K 的 Star!感谢各位大佬的肯定与鼓励。</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-512bfa6d97c1a327.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=Pu%2FXA907IIKkzE1ECFRAVA%3D%3D.ahpg6zw35hcJnZkIVFq3ViTvx%2FzChTZZ2OtGP7f6fdgRBZnrsHW8WLl7GFinmt3gcUlhASji8y2GsmB2RrxYPQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-dca068181ef5cb6f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><h2>软技能</h2><ul><li><a href="https://link.segmentfault.com/?enc=KeflbWU0%2B12QU9J2KGf4cw%3D%3D.VpfFOwrjrCMZ7h%2BZqWnyFm4%2B5dE9hwqc7Ke%2FPzwIna3zVEpBohZ%2FqDRzjiNn5e872%2BiVI3CBhpigoJOWagDH5g%3D%3D" rel="nofollow"><strong>自从掌握了Google和百度的 16 个高级搜索技巧,我再也没有解决不了的 bug 了</strong></a></li><li><a href="https://link.segmentfault.com/?enc=R%2BPEVwy3%2BXLeK6KRknP1PQ%3D%3D.nDKL%2FnEMJMGvXjCsEJhsrp53M5SCjwnSJ55dBQuzXtvRIvr8Dzmhoc81PovxnTPvTqT1cujXzlKc28RqlPSHNg%3D%3D" rel="nofollow"><strong>恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>GitHub 官方文档:使用、搜索、管理开源项目</td><td><a href="https://link.segmentfault.com/?enc=XWi2Ho2wso7vaIDcTVeCGA%3D%3D.Gc4HTlm7nhJ7fUNslwStp5QWpqsqG1Gl90OZjTBDMDA%3D" rel="nofollow">https://docs.github.com/cn</a></td></tr></tbody></table><h2>前端趋势榜</h2><ul><li><a href="https://link.segmentfault.com/?enc=svNH4jnhfsoDUAZtvX4VYg%3D%3D.x%2F7bPXQoBPAQS9KkXPzrwe4E8m2d1V0oySASjqf7Q04v5EaT5timafO1W8qDi9IgPBwQ5PZIbVwICdcieyflWQ%3D%3D" rel="nofollow"><strong>影响了一代代前端人的 20 个里程碑式的顶级开源项目!</strong></a></li><li><a href="https://link.segmentfault.com/?enc=hTTkQRfAqEGFJzevrlGWUw%3D%3D.mBUJhyA7Y%2Fvf0IVWw3b42K5UqcORDtvn5tAgp9HNPmsLWUkV36HTdTEPnhL9ZhfCk2Y207qfHxzwnANT%2FwB4ng%3D%3D" rel="nofollow"><strong>1534K Star!排名前十的 10 大前端顶级开源项目!</strong></a></li><li><a href="https://link.segmentfault.com/?enc=7Q7Rae5Bs4I4SnO8N468aA%3D%3D.Wh%2B7p%2F8XzkXsWCr%2FW1qenSjyEpRwV%2F7W6UbWjFIsdzTr2ZSw2BkzNcptFQhtsJgz8UG7Uqf7IWgjd9fcC2wK8Q%3D%3D" rel="nofollow"><strong>猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!</strong></a></li><li><a href="https://link.segmentfault.com/?enc=htGmsyQv%2BJOWIyFVNVXY1Q%3D%3D.zw3WUSoYi2jBSJJ7zwK7b2nQAzVEQ48NcasJ9ymdWLVNgsYbqN27hF3w775Pr3ePoVkgMC%2BAj%2BV1nFmz5FPq3w%3D%3D" rel="nofollow"><strong>前端最流行的 10 大顶级开源项目!猛增 174K Star!</strong></a></li><li><a href="https://link.segmentfault.com/?enc=a3sqdNcPR85kdD51w3d%2Bqw%3D%3D.WhQ82lCzdadnh9faP1lyzrvBZJi%2Ft%2FiL8YNE5a6KdQt1XikIIehr8l5zoB82Wm28Re72Z7aowY60PsqFilGfbA%3D%3D" rel="nofollow"><strong>前端月趋势榜:5 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目! - 2105</strong></a></li><li><a href="https://link.segmentfault.com/?enc=ZnEfwfMrDts58T42pOyN0A%3D%3D.YCEkPsFPxtv2I0XJW3H7gtsPK%2F7K7Bxh4Rej5lhHVLlKV%2BBvNF%2F%2BKub7tHqVJ8akgbscxQs3KKMkhRNQb251rQ%3D%3D" rel="nofollow"><strong>前端月趋势榜:4 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目!- 2104</strong></a></li><li><a href="https://link.segmentfault.com/?enc=aV2rnS6TZTI9ayWA2cZHyg%3D%3D.40IsaE8F6cIJX0mkx1jjVKpDavxFLigxI7G2UPySZgXXUIEVJGiqPK8grZ3SgPwQsPnYdTV9tOmxwMk8grm4pQ%3D%3D" rel="nofollow"><strong>Web 趋势榜:上周最热门的 10 大 Web 项目 - 210410</strong></a></li><li><a href="https://link.segmentfault.com/?enc=fLEA4i0Zf195OuDZmGEigA%3D%3D.ulVgtHKShIbF2hj8t3nZw1LCYksIWaP6TkbDd3x3TEfZaXBPv89HhYooVTTLcV9%2FJew50lhBTW8SsMEA50Yn2w%3D%3D" rel="nofollow"><strong>前端趋势榜:上周最热门的 10 大前端项目 - 210327</strong></a></li><li>精彩待续。。。</li></ul><h2>Vue3</h2><ul><li><a href="https://link.segmentfault.com/?enc=h06CCyHD43InrWibaYomDQ%3D%3D.BcFTe1YIMX5UgNRGloNlglMH7D3s6JTJc2qgpvvS594DSp0BsJ9VB4E2GAnV4pozdxNmtHHMtiXmPmEHR9loaQ%3D%3D" rel="nofollow"><strong>Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Vue3 中文文档</td><td> <a href="https://link.segmentfault.com/?enc=awR%2BrCGzRQNCi3oCT%2Bp6VQ%3D%3D.ain1y3tznoXXlUo%2BPvI1W7A%2Fq4nG%2Br%2BZOLYjucc26t0%3D" rel="nofollow">https://vue3js.cn/docs/zh/</a></td></tr><tr><td>Vue3 设计理念</td><td><a href="https://link.segmentfault.com/?enc=No8XiD55%2BHJek8lmC3drvg%3D%3D.LvEE9WXhB1k8yhV3yBml5raoUCAMcSx%2BCZelwOYXrXKR0T89ZfGg0Na3LtH6wZgT" rel="nofollow">https://vue3js.cn/vue-composition/</a></td></tr><tr><td>Vue3 相关项目聚合网站</td><td><a href="https://link.segmentfault.com/?enc=7i7qv8rLyyPH%2BDDNw1PuRg%3D%3D.ARAdcU1m0MWFHnW2kHabf6lcEg6b5Ju%2BexGCqnoZr5Y%3D" rel="nofollow">https://vue3js.cn/</a></td></tr><tr><td>Vue3 源码</td><td><a href="https://link.segmentfault.com/?enc=tKrTYKVlhJ4ox648cBlYJA%3D%3D.4kBaPIeL89ojChlm%2FuOqOkwva%2FcPJt4fGsDeuzql0wg%3D" rel="nofollow">https://vue3js.cn/start/</a></td></tr><tr><td>Ant-design-vue</td><td><a href="https://link.segmentfault.com/?enc=tFF9zs1Dovowdq8t4IwWOg%3D%3D.e0bJZveZ7R%2BPioLNc%2BwgzRHc3Ozdgh2y5qxwCdy5qw%2Bf5qn3%2F%2FAfnxEyk%2BPcI9wT" rel="nofollow">https://antdv.com/docs/vue/introduce-cn/</a></td></tr><tr><td>Vant 3.0</td><td><a href="https://link.segmentfault.com/?enc=%2BBRpzQi%2Bbn4%2FznmKyPm96w%3D%3D.KUhy46zXUndolfXcSzOVy2EiZzikwtiEYdc6bQcsFx7smmDqVWp0Db2Wn16WxP4K" rel="nofollow">https://vant-contrib.gitee.io/vant/v3/</a></td></tr><tr><td>Element-plus</td><td> <a href="https://link.segmentfault.com/?enc=czdUB%2FOvuyh7A1aETe1EFg%3D%3D.nEYXaD%2FXslRer5Jw8RNSVic732bhFIHzZNqzVQdIfz%2Bj04PQQ5tLmRAWO9CCoolZ" rel="nofollow">https://element-plus.org/#/zh-CN</a></td></tr><tr><td>element 3</td><td><a href="https://link.segmentfault.com/?enc=Z5DRN2SN64xEjG%2Ftbl4BSg%3D%3D.aA5vAeocnBLsbj%2BP8A4VxQOIgkykumf6Kfuwr%2B5n4IatzDlMetyaCbxezA8ogS%2Bf" rel="nofollow">https://github.com/hug-sun/element3</a></td></tr><tr><td>vue-vben-admin</td><td><a href="https://link.segmentfault.com/?enc=%2FQFm4FHSuugnCrQcfStVGA%3D%3D.gYIxcEuw24W97Ubl%2BpG0ocsr%2FE%2F2ClcW8DJ6yynvFsJUKhh5u%2BU0K2IgsmfKjO87" rel="nofollow">https://github.com/anncwb/vue-vben-admin</a></td></tr><tr><td>vue-admin-beautiful</td><td><a href="https://link.segmentfault.com/?enc=%2FQrzcaGMOQde4gvxxd%2B%2BZg%3D%3D.Smk9k5Xf4dXTcUs6VsYTg760duQtSf8shf1U%2Bb00u1DyXKMxbk2mhwDHc%2Fmos8GrhGyyI218PFhQQDQN6FXCvA%3D%3D" rel="nofollow">https://github.com/chuzhixin/vue-admin-beautiful</a></td></tr><tr><td>vue-cli</td><td><a href="https://link.segmentfault.com/?enc=TNCwygZkTbbbwF%2FJtUJptQ%3D%3D.Ypl5ofoM0e3qjU4ehtFMfgwFzc1%2F20f68XNobbtCvAxNp2PHg9NGHlYAcqPuRIcN" rel="nofollow">https://github.com/Wscats/vue-cli</a></td></tr><tr><td>movie-trailer</td><td><a href="https://link.segmentfault.com/?enc=7QOB2gUjjnRHTpQsbJ6Yxw%3D%3D.CjglSJyXHLdtCzTgTphdyfs5gyN%2FSuCgyEoN4BhTlPKnumZYgurNiAw4VjMF%2FBP3" rel="nofollow">https://github.com/lhz960904/movie-trailer</a></td></tr><tr><td>newbee-mall-vue3-app</td><td><a href="https://link.segmentfault.com/?enc=4CvsDHUpp84Ab6VQRouVDQ%3D%3D.Aw7I97RNEH6q1rh6UDMNRv7Xl8FDHC4S1Oq%2FbZafZDJGf%2Fd9QEQBZIyL9KxkeIyfOKBV0qXbGlIh6CoZU7URIg%3D%3D" rel="nofollow">https://github.com/newbee-ltd/newbee-mall-vue3-app</a></td></tr><tr><td>vue3-jd-h5</td><td><a href="https://link.segmentfault.com/?enc=ZE3jyy8bJlLzpuGW5pY%2FLw%3D%3D.mlrDY53HKqyyoX6xGbt1Gz1dQFM7WDdDnh3Ygx85SjQkgjmIcGsBoQuetw9M%2Fdkw" rel="nofollow">https://github.com/GitHubGanKai/vue3-jd-h5</a></td></tr></tbody></table><h2>Vue 源码解密</h2><ul><li><a href="https://link.segmentfault.com/?enc=0q55dDGoTv0R5a1tllFtCA%3D%3D.qWqLTjmEQRN2D9rojqaNVRCAf7surDolC0ZBz5OjmlMNO4moCC7SGX6%2F1FxoGGEWg0d5MeAnr%2B2mLdz%2FT2qeLQ%3D%3D" rel="nofollow"><strong>推荐 7 个 Vue2、Vue3 源码解密分析的开源项目 👍</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>vue-analysis:Vue.js 源码分析</td><td> <a href="https://link.segmentfault.com/?enc=oxmbaXCX3qYVzarYZz114w%3D%3D.snhT3ZP6YeLLt0CcDd0%2BhUXfyoVTwor%2By%2B1vPCJdfjCUMi46Solv4LPg5O62R8Wh" rel="nofollow">https://github.com/ustbhuangyi/vue-analysis</a></td></tr><tr><td>vue-design:逐行级别的分析</td><td><a href="https://link.segmentfault.com/?enc=qcGWJHqWzwFjTQsamM7XqA%3D%3D.uvTwEOIPns6hkZ%2Fz0FNayWf6nei05L1wqefFwHzu8oA%3D" rel="nofollow">http://hcysun.me/vue-design/zh/</a></td></tr><tr><td>vue-family-mindmap:用一张思维导图总结了 Vue、Vue-Router、Vuex 源码与架构要点</td><td><a href="https://link.segmentfault.com/?enc=hL9ueB5W0G%2FJ7E3hwR%2F4fQ%3D%3D.y9kJAR1MZrphnASjvrij9hzPaeOr6F2DV1m4eSR%2B%2B35rmTl3itGL6kkXunHNx4Am9jfw0zwaEHX8xLOyERP0mA%3D%3D" rel="nofollow">https://github.com/biaochenxuying/vue-family-mindmap</a></td></tr><tr><td>learnVue:Vue.js 源码分析</td><td><a href="https://link.segmentfault.com/?enc=SRxvSpquBElOWMYI9Qyqww%3D%3D.K0ygSiqn9Sj9FprHElrJU5wQvqrfzoRedO63LueFB4rhHWOoJIiIOBwT4khSB9M8" rel="nofollow">https://github.com/answershuto/learnVue</a></td></tr><tr><td>vue:Vue 源码逐行注释分析</td><td><a href="https://link.segmentfault.com/?enc=FPZuApGygy5oTHYt%2F2ogGg%3D%3D.yIOhiV7zVGOfd5FP3bajoRXjXlmiR35FtlQyf%2BY1T6tWY3ChGuRrCB5%2FBsi38uiw" rel="nofollow">https://github.com/qq281113270/vue</a></td></tr><tr><td>vue2.0-source:Vue 源码分析</td><td><a href="https://link.segmentfault.com/?enc=6DzgnYdehueCsqxiBIxRZg%3D%3D.oXvV75f%2BUaHoTDkLoicwrpW4pvQ3QlclZ3T8IoDp0B5kFRObX7TQ2otesxiGvw6V" rel="nofollow">https://github.com/liutao/vue2.0-source</a></td></tr><tr><td>Vue3 源码:Vue3 源码系列</td><td> <a href="https://link.segmentfault.com/?enc=pv%2BGUTD4fBspw2LNPa%2BbFw%3D%3D.AVpMLY0MIDvl95BTSj81sZtevd%2FIJhK5SptYdrpxs3M%3D" rel="nofollow">https://vue3js.cn/start/</a></td></tr></tbody></table><h2>React 源码解密</h2><ul><li><a href="https://link.segmentfault.com/?enc=Nv%2Bow12AntG9Pv4JgZZAxw%3D%3D.dqRclhu4iMdGXrgWe9wVqf3C6Oztedq7CS4iXp6z7%2FPBmLMcdVkBtfvolJPjJyl69zFX%2BzNHCt98ZM0QdMmd1Q%3D%3D" rel="nofollow"><strong>推荐一个 React 技术揭秘的项目,自顶向下的 React 源码分析</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>just-react:严谨、易懂的 React 源码分析教程</td><td> <a href="https://link.segmentfault.com/?enc=UNuRjkjrMygtsf07eyDNvQ%3D%3D.3ZbSzt7GIIBlV%2BU3stkkAi8Ziwf0B%2BvFjWsrcvRYyamv53d6LP8qSbYsz7XW7Vzx" rel="nofollow">https://github.com/BetaSu/just-react</a></td></tr></tbody></table><h2>面试专题</h2><ul><li><a href="https://link.segmentfault.com/?enc=pl7bvkfVBpSO1HUyeW7cKw%3D%3D.rXdWsBb9VlgXZeimze1gEEOo8HkegN7sVya6oWmv6sH2L8EWu2rFShCzzzeYZ5KufNVXAvwjDR7xEBZshexrtw%3D%3D" rel="nofollow"><strong>推荐这 10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Front-end-Developer-Questions:前端面试题</td><td> <a href="https://link.segmentfault.com/?enc=mp%2BtF3E0eDNzQGHqQtFkMw%3D%3D.%2F9FN1FVInqO0Nx%2Bg3w1gpPIsVPs1wGMYlqALbWnigU80BG0j1y1sWroNhB6PrO0ZDB6nfkD2Ew67IjxZ1mxujQ%3D%3D" rel="nofollow">https://h5bp.org/Front-end-Developer-Interview-Questions/</a></td></tr><tr><td>javascript-questions:JavaScript 进阶问题列表</td><td><a href="https://link.segmentfault.com/?enc=1U%2FoclvguFnkPGR37TI5EQ%3D%3D.P3TAkVcQ0ALQ9md984OCTzyonaymf5t4%2FvvvBG8K%2FIN2Epj9Q6icz%2Fl7g146WpJ4sLxwLl0g9omXQg0c8A2tFw%3D%3D" rel="nofollow">https://github.com/lydiahallie/javascript-questions</a></td></tr><tr><td>Daily-Question:每天一道大厂面经推送</td><td><a href="https://link.segmentfault.com/?enc=yLuxTmrulrnpeTD2olAX5w%3D%3D.Xi0xxLnQy9vZ%2BL%2BvM0f8NiXjEabKcsX68J1zZgll0Me%2FqgfROg8eyN3qyzLtt8CY" rel="nofollow">https://github.com/shfshanyue/Daily-Question</a></td></tr><tr><td>CS-Interview-Knowledge-Map:一线大厂面试题</td><td><a href="https://link.segmentfault.com/?enc=I%2FxGWu1MNL3XvVVXETAtoQ%3D%3D.k4gNuEKRhd4pXUnmuKMeG0Tnkl42IlhPoy%2BiYputi8lDmUEDm5NWsXQGrgQmbKZHGEVOlSe7tpv9F9HfxpZbPw%3D%3D" rel="nofollow">https://github.com/InterviewMap/CS-Interview-Knowledge-Map</a></td></tr><tr><td>Daily-Interview-Question:每天搞定一道前端大厂面试题</td><td><a href="https://link.segmentfault.com/?enc=dacf3mhaSqLOX0o62e4jLg%3D%3D.ZKhfMrEJnA088UG0z%2Fkdigjo%2BcqLTEDPSe99%2B2m%2BoSYqEGIrbBGOafkYxO7nyNhACGCCCgdsPutihwk3HcJnbA%3D%3D" rel="nofollow">https://github.com/Advanced-Frontend/Daily-Interview-Question</a></td></tr><tr><td>fe-interview:前端面试的一个复习汇总项目</td><td><a href="https://link.segmentfault.com/?enc=j19PVrafHvvLt6kwp%2FVcDw%3D%3D.fjJEJ2Cil3afOozKyDNgJYM3isf%2FOvbXe15D9ZdjArtJ%2BC4F3SKb7zryPGZiHkcl" rel="nofollow">https://lucifer.ren/fe-interview</a></td></tr><tr><td>fe-interview:前端面试专题</td><td> <a href="https://link.segmentfault.com/?enc=VC3YeQD2W59BqTGbH8aUNw%3D%3D.kP6dcoem%2FruH4Ok5GFd%2FszJhOAi%2FyPbDFpi1A5ORrZsTXnCMkBHrHZZHWW4a5Yvy3Xmw%2Fv9wih1B0rghJAJjlTnBDAtHXobhEc6Ln8nyj1Y%3D" rel="nofollow">https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md</a></td></tr><tr><td>fe-interview:前端知识题库</td><td><a href="https://link.segmentfault.com/?enc=C1qciAU0xqSO9krzsOJdKw%3D%3D.DNMUEjCqfUTyxst3LgQvxSYNy7gpXXV%2Fvzai%2BLGMzZsV1g5cpo5IUfC82jFXeGyg" rel="nofollow">https://github.com/haizlin/fe-interview</a></td></tr><tr><td>node-interview:饿了么大前端的面试</td><td><a href="https://link.segmentfault.com/?enc=sEhT6UQvDGHhhCfb3g1I2w%3D%3D.p9K5KKw7pioIMRuCHRdYdvQzGapuT4%2BtALDd5p8TgdsiLYYZn24iBJeUWvmGQ38bq1lI2eseWPCEjns%2FPrzk9OWJyR0znbxD3SFVFxzE5zI%3D" rel="nofollow">https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn</a></td></tr><tr><td>Front-End-Interview-Notebook:前端复习笔记</td><td><a href="https://link.segmentfault.com/?enc=1xTNmrX%2FdJDUY%2FB2EXj2aQ%3D%3D.t%2FCpUGqJiibmIhFZgUkSkP2i0tyHKoRRROEWHC0ib8mVeBKqaCGdit7tfJMlWc4JhjcyG%2F9d7Xkb1erOVOwnjQ%3D%3D" rel="nofollow">https://github.com/CavsZhouyou/Front-End-Interview-Notebook</a></td></tr><tr><td>FE-Interview:前端面试必备题库</td><td><a href="https://link.segmentfault.com/?enc=4GxPD4Fe5lzOQkz1dHMhWQ%3D%3D.MHJQCneaD7UnZiLeu0is1tkI8YlFyMFwoLHOUnE6dYxR7hIAoammNjCBKJm%2Fmdjj" rel="nofollow">https://github.com/lgwebdream/FE-Interview</a></td></tr><tr><td>web-interview:Vue 面试题库</td><td><a href="https://link.segmentfault.com/?enc=UgbjOjs%2FhAgsIH%2Bvwp%2FDRQ%3D%3D.qJyzuAgPxskvfgoKLUimwEu%2FIuQpeI7W3Y1Llh2S5%2BdoMi9hoP7hZp3omEoscHMI" rel="nofollow">https://github.com/febobo/web-interview</a></td></tr></tbody></table><h2>简历专题</h2><ul><li><a href="https://link.segmentfault.com/?enc=FyhdDzUnu%2B5EAdX5cNXABA%3D%3D.UL9L2b%2BsaO13lKNj5G%2FvDvEzBGDtGskOi82mEi1OfgTJ%2Bw9Ur%2FKAQfxfOtFxypy0XNxwV6Zp8MaTF%2F47FNGjdA%3D%3D" rel="nofollow"><strong>10 个 GitHub 上最火的程序员简历项目,2021 金三银四必备!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>ResumeSample:程序员简历模板系列</td><td> <a href="https://link.segmentfault.com/?enc=TNLHjB9Aj%2FgKAX3U%2FACiUA%3D%3D.FjIieOMhvK5zMpxYOtIQLMOWs3%2BZW2pPBuLQAngpIlRdn2tmVEi5%2FIZOZTuo80QW" rel="nofollow">https://github.com/geekcompany/ResumeSample</a></td></tr><tr><td>Markdown-Resume:用 markdown 语法来写的简历模版,非常简结通用</td><td><a href="https://link.segmentfault.com/?enc=8NHWdvE%2Bi4P1sBFgQ%2FPc5Q%3D%3D.8uW047NAB4nL5tsbXvU9FKQ47U94iTdzkoYQvks0u4oXylcUG8tUXUEaAccmsM2N" rel="nofollow">https://github.com/CyC2018/Markdown-Resume</a></td></tr><tr><td>awesome-resume:程序员简历例句,程序员简历范例</td><td><a href="https://link.segmentfault.com/?enc=OCooLWgB0nHDMJndLjUzBw%3D%3D.a9WNLGdzPrKbBKUDRjFecbsSrE0J4b%2BVzC1qkH%2FU96x0Y9gK1ZO7du2fAIsljq6O" rel="nofollow">https://github.com/resumejob/awesome-resume</a></td></tr><tr><td>DeerResume:好用的 MarkDown 在线简历工具,可在线预览、编辑、设置访问密码和生成 PDF</td><td><a href="https://link.segmentfault.com/?enc=FZ9ZcEjGFyP9wPVypC01nw%3D%3D.tTU1bTLtcnBwXROzSG1WRrICLkV00ONPOSRgKfwuqLmNgi%2BDqxep%2FcFcwsVPHkiK" rel="nofollow">https://github.com/geekcompany/DeerResume</a></td></tr><tr><td>markdown-resume:在线简历排版工具,支持切换 4 种模版、自定义和导出功能</td><td><a href="https://link.segmentfault.com/?enc=PR1t8HuaAz1Ja73IXpgzrg%3D%3D.CDq6aeft8aW0acwM99NCbqzZ9fmpPZYaNsWl5VbVihDJ9ZiB2wMYHHHThIqAIUTF" rel="nofollow">https://github.com/mdnice/markdown-resume</a></td></tr><tr><td>best-resume-ever:快速生成漂亮简历的工具,它基于 Vue 和 LESS</td><td><a href="https://link.segmentfault.com/?enc=X9WUvPpxk36sgbzTXoe%2BTA%3D%3D.ZdtD39oiMJ0liDitEeo4US3PZWntQxTxZ7jAwUHsbpLFe9EogxR8lwws7XesmJOq" rel="nofollow">https://github.com/salomonelli/best-resume-ever</a></td></tr><tr><td>awesome-resume-for-chinese:适合中文的简历模板收集</td><td> <a href="https://link.segmentfault.com/?enc=uIOSdjYCL4jHVOYHl32gew%3D%3D.VcLTLgpGKCl7TpuTZTY0GL8HqtdvvkybeOvokSu8OVyorzeo5xMECwnBXVI%2FQ9ZLtNo3eqXa1dE%2BYaFvIIwkWg%3D%3D" rel="nofollow">https://github.com/dyweb/awesome-resume-for-chinese</a></td></tr><tr><td>resume:一份优雅简约的简历</td><td><a href="https://link.segmentfault.com/?enc=i%2BsKXo4nk7yK0GZ69Ygqkw%3D%3D.RL3tR%2FcwwooUN%2BwzdquJNVS0BpxYDLUQ334kFs0lRQHiG5dxvfhQWiqM7XGfil%2Bd" rel="nofollow">https://github.com/gwuhaolin/resume</a></td></tr><tr><td>biaochenxuying:非常自由的自定义的前端程序员模版</td><td><a href="https://link.segmentfault.com/?enc=64cMQv7rtWvDBAYHg4B5%2BQ%3D%3D.3zY6pxEEidkfg9b7ScU9OJlXCTKrUoVg%2F0s0OHiKBTGVyJ%2BeLAOAv8lgwEzcGHR3LAVL3%2FF70y9WBHWNw3Hw1ZHOld536BoeVMtrqKgohZk%3D" rel="nofollow">https://github.com/biaochenxuying/blog/blob/master/resume/resume.md</a></td></tr><tr><td>github-readme-stats:在你的 README 中获取动态生成的 GitHub 统计信息</td><td><a href="https://link.segmentfault.com/?enc=LNwV4I0z%2BhAjet9NTUoSkw%3D%3D.3JAAwt3qiWzp895m%2FGT%2FksC8QZ5J4%2B%2B8TFMvP2p56Ts9nSH7xltkylYooU60vqGkYZb8Em4lJB70N7FUpMMDDQ%3D%3D" rel="nofollow">https://github.com/anuraghazra/github-readme-stats</a></td></tr></tbody></table><h2>JavaScript</h2><ul><li><a href="https://link.segmentfault.com/?enc=QWC1N9H%2FLhR1uD54IK40WQ%3D%3D.5q%2B5K6N6TpFt8FT6FPCzZ5XPnooGj88b%2B1zEzDlOYjfhS1NTlxkR3GIuQ3HgVOmCzOe%2BJBjDHutf8sKlqsCBXQ%3D%3D" rel="nofollow"><strong>12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>30-seconds-of-code:简短代码段,经常会用到而且是非常经典的代码</td><td> <a href="https://link.segmentfault.com/?enc=l3%2BmVbIk2qMoFpulwRTlVA%3D%3D.sOjV%2F7h%2B1nT49bx%2Fg2oKFyoH3Qgcux48ey66anZ2oIMb6GGsxRn5Jr6Sbwijzv7lDzQFmOj47K7pyI4diMwHrg%3D%3D" rel="nofollow">https://github.com/30-seconds/30-seconds-of-code</a></td></tr><tr><td>33-js-concepts:JavaScript开发者应懂的 33 个概念</td><td><a href="https://link.segmentfault.com/?enc=eDmqP7ITW%2BZNYVoHN25vsg%3D%3D.%2Bjxg%2B3ZyhW5vNOClNalpf%2FXxr6aNuWQAoBWExPUzD90%2FLCk%2BO5Y5z0MrUcAkwV5M" rel="nofollow">https://github.com/leonardomso/33-js-concepts</a></td></tr><tr><td>javascript-questions:JavaScript 进阶问题列表</td><td><a href="https://link.segmentfault.com/?enc=XNnw7k3o8dIYz7tAvziehQ%3D%3D.IzSSbAb7QIWKWTj%2BMvDyqKJwwlrCI%2FBI97Spbz%2BwqyU7A8kbgWGI5GtI23WAX5rqGyG%2FLvPZ91L2JjC8E2pgjA%3D%3D" rel="nofollow">https://github.com/lydiahallie/javascript-questions</a></td></tr><tr><td>JavaScript 30:使用原生 JavaScript 在 30 天内完成 30 个项目</td><td><a href="https://link.segmentfault.com/?enc=e8oTikTNGpCUuPfOHWNMxQ%3D%3D.%2BmmttAWBlDjh0XonDZtXpERr6J%2Fs2xiH9nv%2BceLOVCmntjUZrQ9u9N%2Fm9woQnQ8k" rel="nofollow">https://github.com/wesbos/JavaScript30</a></td></tr><tr><td>Codewars:和 leetcode 有点类似,也是在平台上和其他人一起完成真实的代码挑战,提升你的技术</td><td><a href="https://link.segmentfault.com/?enc=CtcXuvF8cdvxLvDjlbeMIA%3D%3D.IIKlrQevjrKhu2WL7tFaDr9o4nIsRcOtypSMmbtkduk%3D" rel="nofollow">https://www.codewars.com/</a></td></tr><tr><td>ES6 入门教程:开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性</td><td><a href="https://link.segmentfault.com/?enc=OqYPh%2FWqFpUSWMVKOie6Ww%3D%3D.YNn%2BcT0psC9TjAZLKWrCzy%2BSaBJr7JnTro7HT%2BTLZVw%3D" rel="nofollow">https://es6.ruanyifeng.com/</a></td></tr><tr><td>JavaScript 教程:全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容</td><td> <a href="https://link.segmentfault.com/?enc=0YWIFzu0WJQtsGOfEgSdNQ%3D%3D.6DyKH5pQQOej%2FSDcJwrc3JeQye2XB%2FGqnXcGfaEhc5s%3D" rel="nofollow">https://wangdoc.com/javascript/</a></td></tr><tr><td>现代 JavaScript 教程:以最新的 JavaScript 标准为基准。从基础到高阶的 JavaScript 相关知识</td><td><a href="https://link.segmentfault.com/?enc=ElfCzn9oOtvCm%2Ft2qeFtWQ%3D%3D.olF1EquGr%2Fcke75w3BsHISbvKvR4D08cwII2sd4jx7c%3D" rel="nofollow">https://zh.javascript.info/</a></td></tr><tr><td>MDN:提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API</td><td><a href="https://link.segmentfault.com/?enc=h%2FzpuLMjGDbTXiupo2GRbw%3D%3D.WLLz3Uv6QgTbrKaXsuAxHvGFIgT4PUdmPE5Df5aCX0UaKsKnGB7IonqHc2SaOdJC" rel="nofollow">https://developer.mozilla.org/zh-CN/</a></td></tr><tr><td>clean-code-javascript:优秀的 JS 代码规范</td><td><a href="https://link.segmentfault.com/?enc=8gAaKB1y%2FYztckuJcZ5Yfw%3D%3D.%2FlYEV9U5EKEaPUcd9%2B7V7XfhwfQaij6a9mi0pg8N%2BfInJI0BMt0r3pZhmGV724rCAk1a131pyu1q65u1CEHGww%3D%3D" rel="nofollow">https://github.com/ryanmcdermott/clean-code-javascript</a></td></tr><tr><td>TypeScript 入门教程:从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript</td><td><a href="https://link.segmentfault.com/?enc=IM4nsd8H9U9q2nmt%2Bx7aiw%3D%3D.AqgllMHmux5yVQWee1%2FJgbTpba%2F7syDdd7IyQxNxmi4%3D" rel="nofollow">https://ts.xcatliu.com</a></td></tr><tr><td>w3school:前端必须知道的 Web 技术教程平台</td><td><a href="https://link.segmentfault.com/?enc=esb6SPD1Gb%2BBEazcJqm7CQ%3D%3D.FBHhPMgPZN3BFpLo8o482T8mUZU9qQ8ZFjicUWKt9bg2zWh%2B6PCvFAUAow0cZHaN" rel="nofollow">https://www.w3school.com.cn/js/index.asp</a></td></tr><tr><td>three.js:JavaScript编辑3D模型,各种各样炫酷的效果以及Documentation值得你去了解<a href="https://link.segmentfault.com/?enc=51qrQ3fFp8ihBFohaAiXeA%3D%3D.A9ziuFaGWsIqHdZ%2F3dKzwrT4U9MzSqwawMMNDcIImIY%3D" rel="nofollow">three.js</a></td><td><a href="https://link.segmentfault.com/?enc=X%2F2t43yy8hsYvBtXvmGG7g%3D%3D.ZfWma3s7IBNkcrk8oxg%2Bob6WeS2zh1YuvtKwuomWhZ4%3D" rel="nofollow">three.js</a>](<a href="https://link.segmentfault.com/?enc=HwulZgnZAdBrfOSHbnXSsg%3D%3D.sPdmxU819Dx9JqvwHDNKkB4l7liECdmeWPS4srRWwTk%3D" rel="nofollow">https://threejs.org/)</a></td></tr></tbody></table><h2>Flutter</h2><ul><li><a href="https://link.segmentfault.com/?enc=OA7Zvx5dfksCzcNLdCWylg%3D%3D.eR9EZ00fuLt09IsNnYV%2BKJ2Lf95EXa5kFiUXvQ%2B80e%2FEeL69S4tI97DUSZPUAb%2BsVQ%2BTEOTpGiYgZv1e5BqBhQ%3D%3D" rel="nofollow"><strong>推荐 4 个基于 Flutter 的重磅高仿开源项目</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>网站</th><th>说明</th></tr></thead><tbody><tr><td><a href="https://link.segmentfault.com/?enc=JkxUTKG7iOTknSzNTBsVQg%3D%3D.S36Y5k9zkA1SoH7ujRJdjSy61vboBlN57z4%2FqYjwbHNObn1WQ6ox1osb17hFYLf3" rel="nofollow">dy_flutter</a></td><td>斗鱼 APP</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=Nk6TSbNBGwXtY%2Bh3j%2F9BZQ%3D%3D.S5dpU0o6BQ3or%2FZIO70DBeMg%2BGNkl96SWGD0T4UAkvud467RLmuJ%2FFO6%2B7g29nWT" rel="nofollow">flutter_tiktok</a></td><td>精仿抖音</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=vuckV%2BJ3XOqBqi3ToMIg9w%3D%3D.Mi4dPN3B1vIR1A66qjwk78gTaGlXzIyjomnPpOTF81ScICcf9ZblVy5DiFKQFoJN" rel="nofollow">flutter-osc</a></td><td>开源中国客户端</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=37k3Qq%2BKzF466w%2BE2VFwHg%3D%3D.XmAVRsCGpH4mdOY4a2RWLar6CSfn0eMycqX2h13ECeEU0qifsdb0JOShAcqYftVZ" rel="nofollow">FlutterDouBan</a></td><td>豆瓣客户端</td></tr></tbody></table><h2>TypeScript</h2><ul><li><a href="https://link.segmentfault.com/?enc=a1uAMsqdM3d1j2pRUtuXcw%3D%3D.UBXkjwpEeiQmlYLaxIOiQyHwf3nuyyaSCxrA5dAWfAarA8UEmX%2B7rY5aTUrD%2BhOe%2BSg6mw2Tfxq%2BPhzPCEXjRg%3D%3D" rel="nofollow"><strong>推荐 7 个学习 TypeScript 的宝库,2021 是时候给自己加薪了!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>网站</th><th>说明</th></tr></thead><tbody><tr><td><a href="https://link.segmentfault.com/?enc=zyI3rbEZnyR%2BHmGshA1aYg%3D%3D.DupNuM7arkQ7alHpENI%2F9P6rcUxbj5C5Nq0DZO24GStXiEC1PMQyOc4SzYHpTjoc" rel="nofollow">TypeScript</a></td><td>TypeScript 官网,TS 扩展了 JavaScript ,为它添加了类型支持</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=DNb7N9MFPjSmiMUA8QLq2A%3D%3D.qvJcakw5yXYQO7IswvqK%2FcizcnHaZr3KVs%2BJyEXVbfEZ0SYIG36toRCQf08OTsWB" rel="nofollow">typescript-tutorial</a></td><td>TypeScript 入门教程,循序渐进的理解 TypeScript</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=vIh2%2FzglJ8xzvKHS0xRQ%2FA%3D%3D.wlPbYfkXbNg7RGKygHvT3FkqcXGvvAVtjWevjPOJrDSuGfMUVkp4wbWpN%2Bo9pLde" rel="nofollow">TypeScript</a></td><td>TypeScript 使用手册</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=Zxm5%2FhFG5L%2BBWX4ASC0JRA%3D%3D.cAY0sQa9PBOwBptSv9RpwhUIRn%2B7ZeLgJPCQ8p5iKSjGoL6eBS4ZhnCJW%2FeVuXVbMvQC9T8sO6Pe0CkcHUhDcA%3D%3D" rel="nofollow">typescript-book-chinese</a></td><td>深入理解 TypeScript</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=9mQZ3N%2FWXBfRgNo7oOo6pQ%3D%3D.JIimYePafokOlMcSTkCerF5XKjVc5efPCQF0UDYhSgbOtxE8ceEPEjAaI2iCXF17SKhUrJB6feUqAtEqibpdGQ%3D%3D" rel="nofollow">clean-code-typescript</a></td><td>适用于TypeScript的简洁代码概念</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=I5kWZUvNTSxwYXB5hLe0JA%3D%3D.oQOh7LGHKaH%2FKbdxLPseVzKj8P91z7bgL6Sjs9f2MJg%3D" rel="nofollow">TypeScript入门</a></td><td>TypeScript 入门的视频教程</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=gLFMZXhZhxUSaONuTV%2Fc2g%3D%3D.bMS%2BR6gwRfZqXFGNAMLR54gAYquGnDszElUpHX9YNrlVuEfpJAX7y9xWyKqhCyWK" rel="nofollow">typescript-tutorial</a></td><td>TypeScript 速成教程(2小时速成)</td></tr></tbody></table><h2>前端必备在线工具</h2><ul><li><a href="https://link.segmentfault.com/?enc=EqZSOp8wSq4eyZsTWmMVMw%3D%3D.XE7wlDXf3Wfn7H4Iot0fxI3B6DZ5ODgjsOZtO4gh%2FzLZ9%2FgRtpb0haf26vf9m0a0cFRcZVXwcC1dhS8ZAS5gow%3D%3D" rel="nofollow"><strong>白嫖 11 个超火的前端必备在线工具,终于有时间上班摸鱼了</strong></a></li><li><a href="https://link.segmentfault.com/?enc=doOtZhX%2Ff%2F6K79WOHzNwFQ%3D%3D.rpRoTnITVzMB2TDm3rIDFS5RXLCFmo6v0sLMCoxRC80gMHT8Av477f%2FtURRSpAjTzuJMjTG%2FRRcNoo7SAH%2FZRw%3D%3D" rel="nofollow"><strong>推荐 12 个学习前端必备的神仙级工具类项目与网站</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>LightHouse:一个开源的自动化工具,用于改进网络应用的质量</td><td><a href="https://link.segmentfault.com/?enc=TcCV1SAqmyAxEwok7NKFWQ%3D%3D.6HO2KrimDF56VNI2Y4ujV5FAfO31y8gs%2Brp8ZDNiNhNk8Vj9GMdr2JwdVopW1ayr" rel="nofollow">https://github.com/GoogleChrome/lighthouse</a></td></tr><tr><td>Can I Use:查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站</td><td><a href="https://link.segmentfault.com/?enc=nLoXCXq0Y4Umoa9Ij6BsoA%3D%3D.SRe3L1kEE3hCCTsnI2tLJ3fRxPCZVnXkgALkVk6GgWw%3D" rel="nofollow">https://caniuse.com/</a></td></tr><tr><td>ios font:IOS 字体支持查询和 IOS 系统自带字体查询</td><td><a href="https://link.segmentfault.com/?enc=Q2zpcJgIriOaZllJKIivGg%3D%3D.cWp0f77ukYrkWtF8zJJu1FGsywwSaDP6tW30ZBu0P90%3D" rel="nofollow">http://iosfonts.com/</a></td></tr><tr><td>web 安全色:尽量让用户看到色彩相同的网页,请尽量使用 216 色的 web 安全色</td><td><a href="https://link.segmentfault.com/?enc=sJP4hW95rwmnT9grwYIh3g%3D%3D.4%2BtDe%2FCE2xlwMnaQNd0zx1oVIVaAKEjg2jTL9xmddp5LiaHHxjJbUC55XSPbU%2BBu" rel="nofollow">https://www.bootcss.com/p/websafecolors/</a></td></tr><tr><td>TinyPNG:PNG/JPG 图片在线压缩利器,智能 PNG 和 JPEG 图片压缩</td><td><a href="https://link.segmentfault.com/?enc=Wf%2FI2f5Jtem0I1RPo9py%2BA%3D%3D.qHZmcpiO4czKnFeL4MTkZn8swe4sZslZJS8chNzAdf0%3D" rel="nofollow">https://tinypng.com/</a></td></tr><tr><td>二维码生成器:草料二维码生成器</td><td><a href="https://link.segmentfault.com/?enc=8n6rKsbmbDGheJwBkpyqzg%3D%3D.2wdogzenvviczc%2BLJQArow%3D%3D" rel="nofollow">https://cli.im/</a></td></tr><tr><td>Shape Divider:定制各种形状的网站分区 SVG 的工具</td><td><a href="https://link.segmentfault.com/?enc=Sj6z0WT2SphHNyx7haVynQ%3D%3D.tixQ6R8VmH0flep6%2Bde5dThssHHbl8UjCnED6LQ%2B9Mg%3D" rel="nofollow">https://www.shapedivider.app/</a></td></tr><tr><td>json 格式化: json 在线解析的网站</td><td><a href="https://link.segmentfault.com/?enc=gZdmAMed5tLtLZ79%2F%2Fe0cw%3D%3D.A%2B2%2FvWJAOTQofY4ATlI7YA%3D%3D" rel="nofollow">http://json.cn/</a></td></tr><tr><td>sojson:前端WEB工具大合集</td><td><a href="https://link.segmentfault.com/?enc=YT7CEQhXxNV0DCOnrCIBFA%3D%3D.p0FOc2dBr6LTfOigz2yJgKGWS%2Bw1a1x%2FPispCv4IYo0%3D" rel="nofollow">https://www.sojson.com/</a></td></tr><tr><td>站长工具:站长的必备工具</td><td><a href="https://link.segmentfault.com/?enc=GZ4P%2FktdU40W71g5a7PpKg%3D%3D.ruHZ8z9NuZlutWpWWlC0aoLE3DhV0I%2B6d3Uy0AHRm1U%3D" rel="nofollow">https://tool.chinaz.com/</a></td></tr><tr><td>codelf:变量命名智能推荐(支持中文)</td><td><a href="https://link.segmentfault.com/?enc=yRtQ5dcGQItb4OdXksSASw%3D%3D.AapyBOsaOUnIIPINrrO%2FwavB58r518ifvK3e5SnGoRQ%3D" rel="nofollow">https://unbug.github.io/codelf/</a></td></tr><tr><td>印象笔记:Web 前端开发人员提供优质中文文档</td><td><a href="https://link.segmentfault.com/?enc=ZtzmPqBMqDpkTIkoveftbg%3D%3D.YhLymfKrbDwXHTkFat%2BVwMbOnIaEfScSd%2B04ZUqzhZI%3D" rel="nofollow">https://www.docschina.org</a></td></tr><tr><td>regexr:正则表达式验证匹配</td><td><a href="https://link.segmentfault.com/?enc=FLZjT%2FrcyWjkAk70%2BKzXuw%3D%3D.VPpNau20Q7UsdIU8r8OI5cJ74qMpHb3%2F%2BxjRfAfbj3w%3D" rel="nofollow">https://regexr.com/</a></td></tr><tr><td>any-rule:正则表达式库,非常全,使用起来很方便</td><td><a href="https://link.segmentfault.com/?enc=ymmZZ7KikglRGkpTcNsJ0g%3D%3D.gAkepiYg%2BwPl9T6dCDZU7oMl7%2FBk1yvHmcFPYcwa8auJzBidJqzZeYuChYbsOaW5" rel="nofollow">https://github.com/any86/any-rule</a></td></tr><tr><td>bootcdn:国内的CDN库,速度快</td><td><a href="https://link.segmentfault.com/?enc=sVQcZeBE%2B3ZVayfv5Op40g%3D%3D.UdfX4cRJmgKC5E%2FLeRM7KmaI4VfinwF2BzINUA2jtbA%3D" rel="nofollow">www.bootcdn.cn</a> 或 <a href="https://link.segmentfault.com/?enc=L9eagc%2BaWCiYCmII2qyhMg%3D%3D.yT4%2BqPGQetg0RJy6e2RY6JTbNrL0yWkxY61j4NmFRD0%3D" rel="nofollow">cdn.baomitu.com</a></td></tr><tr><td>jsdelivr:国外的 cdn 库,支持 github,npm,WordPress</td><td><a href="https://link.segmentfault.com/?enc=QUOMRvGFbWXBEj%2B7v4Rz9g%3D%3D.6swvIeDk5HXYrFz%2FxuiD4hvJlccmdLreSHZYhJaAQnY%3D" rel="nofollow">https://www.jsdelivr.com</a></td></tr><tr><td>gitignore:根据选择会去生成 .gitignore 文件</td><td><a href="https://link.segmentfault.com/?enc=E%2FPpv3KcxG9cuyQSfAYSMg%3D%3D.kL5wRLGcovQy1jq7JFI1jBJ0yoelcnGp4lfBP4bI%2Bf8%3D" rel="nofollow">https://www.gitignore.io/</a></td></tr><tr><td>codesandbox:在线编辑代码</td><td><a href="https://link.segmentfault.com/?enc=lvis73%2FJiwcLQvkhAXNQxg%3D%3D.zAwb%2FP4XS6bHcfycpRsZCHjq4M%2Fz2V9XQkIWw0pBeP4%3D" rel="nofollow">https://codesandbox.io/</a></td></tr><tr><td>typora:实用的 Markdown 写作工具,所见即所得</td><td><a href="https://link.segmentfault.com/?enc=%2BwEzhsNDuKRYUPGnoTgOVA%3D%3D.Eui8fKH8WL9DuUMnWP0RdADwQq95BzKjUzkE5TlshQY%3D" rel="nofollow">https://www.typora.io</a></td></tr><tr><td>mdnice:使 markdown 语法更加美观,写作工具(强烈推荐)</td><td><a href="https://link.segmentfault.com/?enc=9fyeUofkMb%2FIN%2BVKw8Z05w%3D%3D.ekO%2FhA9%2Bd1zCMlbIjKFRYaDAVv7DLl7ni1B8KnCxvSA%3D" rel="nofollow">https://mdnice.com</a></td></tr><tr><td>toptal:多张图片合成雪碧图,并生成对应 css</td><td><a href="https://link.segmentfault.com/?enc=d3E2bRKRtrflqmICvQIgLw%3D%3D.Pe9vwuZ%2F2Sk19lkqp0hWen3mT%2BVRzW1bGa6Mz8aWSOLMiL%2BWjVKGjk1%2BwQIvnZSRZvMiIjU8fjCCD3V2WDLUIQ%3D%3D" rel="nofollow">https://www.toptal.com/developers/css/sprite-generator</a></td></tr><tr><td>tool:众多工具集合,包括时间戳转换,进制转换等</td><td><a href="https://link.segmentfault.com/?enc=RrCcgwCd%2F4xjxOO%2BolXwKA%3D%3D.tEClbT%2Fpok3YOoQrlurU20oaBQdAE6kdP2VMU%2Bne%2F9o%3D" rel="nofollow">https://tool.lu/</a></td></tr></tbody></table><h2>计算机内功秘籍</h2><ul><li><a href="https://link.segmentfault.com/?enc=cgYKS7YrnLbf93Bh8JPZWg%3D%3D.dc0UX4RNwt6G63Yg1yQAHOGCXup%2BcT%2FSL0Mk9hq61hWSsB4QgemWbn2tRts%2B04fYYbjBcYoIVs%2B1NClwO9s%2BhQ%3D%3D" rel="nofollow"><strong>推荐 7 个 Github 上近 200k Star 的计算机学习资源,练好前端内功的秘籍!</strong></a></li><li><a href="https://link.segmentfault.com/?enc=GSRUowdTUbQ%2FrRk3w8YCzw%3D%3D.X%2BG1UosQkWd477bcPhrsDnaxcXwOHg%2BgQpCu%2FYyzGZgWeLg5T%2FwApRh39tEbCvTJzGrPOZQ8EXSKCUcxtY06Pw%3D%3D" rel="nofollow"><strong>B站收藏 12.5w+!GitHub 标星 6.6k+!这门神课拯救了我薄弱的计算机基础</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Crash-Course-Computer-Science-Chinese:计算机科学速成课</td><td><a href="https://link.segmentfault.com/?enc=l4niV3Er%2B6RcMuNNPUwKmw%3D%3D.SjOwDqXu%2B0qv06rLhiELdnpXNFLaPIBh9eFarV54O1CajpU1DFlm7y685WkRvt%2FVeIX3q1veuvw3Yqpqn%2BjazQ%3D%3D" rel="nofollow">https://github.com/1c7/Crash-Course-Computer-Science-Chinese</a></td></tr><tr><td>computer-science:通往计算机科学免费自学教育之路!</td><td><a href="https://link.segmentfault.com/?enc=cW0LNhEzyzA4GjeF1hKNVA%3D%3D.LFd5LguBJjEvj13dNGkVa47ppTIMYNw33B%2BkNlcbg%2BxpzDpp5KYUlRSyHrSupp4r" rel="nofollow">https://github.com/ossu/computer-science</a></td></tr><tr><td>CS-Notes:技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++</td><td><a href="https://link.segmentfault.com/?enc=6NiAL6OaZviwCAPb1dmdjw%3D%3D.9VgaqyPD3vVBafrkTjknCz2DUww3U1vTNiK89XEQA7Ers%2BRdJS%2B8XNJzCie6E24m" rel="nofollow">https://github.com/CyC2018/CS-Notes</a></td></tr><tr><td>REKCARC-TSC-UHT:清华大学计算机系课程攻略</td><td><a href="https://link.segmentfault.com/?enc=fcVeExNOK85wti1X2%2BU8Dw%3D%3D.THGRh6nOrlxEq8Np6VBUs50opaMQ8IYGTtn4QGHtfwZhtA%2FZYz7meW2z91koETne" rel="nofollow">https://github.com/PKUanonym/REKCARC-TSC-UHT</a></td></tr><tr><td>zju-icicles:浙江大学课程攻略共享计划</td><td><a href="https://link.segmentfault.com/?enc=%2FSYXQ573YLdEOz36FI33CA%3D%3D.S6cxrAk%2BM%2F3VW1rAtx2%2FIunuJPAOVku6l43t3XdIMM23%2BxjDHIPAg7JTMZtxyoRj" rel="nofollow">https://github.com/QSCTech/zju-icicles</a></td></tr><tr><td>TeachYourselfCS-CN:仅仅依靠自己,你就可以获得世界一流水平的教育</td><td><a href="https://link.segmentfault.com/?enc=D%2FTC5WmV8%2B8GIFYCpD1f4w%3D%3D.hlLLxXniC%2FSzD9XPDiZUVFMCBigsbRsrPFDxW916U8nHjWqxhXiFqGbzZTh2wtCw" rel="nofollow">https://github.com/keithnull/TeachYourselfCS-CN</a></td></tr><tr><td>CS-Xmind-Note:计算机专业课(408)思维导图和笔记</td><td><a href="https://link.segmentfault.com/?enc=XTVvk%2F31eenY5zn8JuFgZg%3D%3D.bnEmLO83%2FR98jPkbuJoBpMrUXRtJoecCookE0wtPSoqFIguRhLSmcQ6xNax5Ckw6" rel="nofollow">https://github.com/SSHeRun/CS-Xmind-Note</a></td></tr><tr><td>awesome-books:160+ 本开源技术类精华电子书,包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍</td><td><a href="https://link.segmentfault.com/?enc=W60o2Pn0kDVcjnrf3M8TLg%3D%3D.kweH8qayitzxrMqpJ6uXUrsTiTenL7zg9cDXDyN7es0SfVTheI89K12VR3bvP3g%2B" rel="nofollow">https://github.com/biaochenxuying/awesome-books</a></td></tr></tbody></table><h2>在线的代码转图片</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Carbon:在线的代码转图片工具</td><td><a href="https://link.segmentfault.com/?enc=r6bDzXBof86bk%2FHB0CpJpw%3D%3D.h2u%2FsPtbJL%2BfDaDaVU6Z3BaGDXwnvtWkQnI9LbVCMP8%3D" rel="nofollow">https://carbon.now.sh/</a></td></tr><tr><td>glorious.codes:在线的代码转图片工具</td><td><a href="https://link.segmentfault.com/?enc=MKq1haGi6Yg6zGkwCdziyw%3D%3D.NaN263kXZPSmlm9EgvXFJybgmPux1t18pMPnK3d%2BwUg%3D" rel="nofollow">https://glorious.codes/demo</a></td></tr><tr><td>codezen:在线的代码转图片工具</td><td><a href="https://link.segmentfault.com/?enc=a1%2BUksp3VV4UCvHnvgF0AA%3D%3D.4lwj0vz7LXWe25sQmP9HTr71KaWCWSAmcc3xuSlH0yU%3D" rel="nofollow">http://codezen.rishimohan.me/</a></td></tr><tr><td>codeimg:在线的代码转图片工具</td><td><a href="https://link.segmentfault.com/?enc=TOeUWxMav%2BW%2BOgOT2ac4QQ%3D%3D.RwOviF1IJ3gDSNY0h%2BSg0dGmRYD9EQc8aoGntIW8NQc%3D" rel="nofollow">https://codeimg.io/</a></td></tr></tbody></table><h2>管理后台 admin</h2><ul><li><a href="https://link.segmentfault.com/?enc=yyrUksIWpWyeNwXt9uiRLw%3D%3D.hPnRChQSvSao6zCt89v20eKJm%2F5AIgFbLRlj9BO9Ii4uBDvOdnktCpfJ26%2FabmSFiRuyDJL7u7NTaSNGKEzNfg%3D%3D" rel="nofollow"><strong>10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了单</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>vue-Element-Admin:后台前端解决方案,它基于 vue 和 element-ui 实现</td><td><a href="https://link.segmentfault.com/?enc=zGNpF5O%2FI%2BIpY93ixTzGpw%3D%3D.qtWN9JR2VG180EuLbxUolKU2qejrMKXay9EcEMpJyGXNXt4Gzf%2BK3ft6tAa%2BiDtY" rel="nofollow">https://github.com/PanJiaChen/vue-element-admin</a></td></tr><tr><td>iview-admin:基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案</td><td><a href="https://link.segmentfault.com/?enc=y8uKUVpGYyRcHUcTdaIIIg%3D%3D.Uqbd46yk4HNjwSNLnB7Et%2F%2FGrxMyj74UL9CXwltLBDElPz5UAzu5FSw1sPqL1XQ6" rel="nofollow">https://github.com/iview/iview-admin</a></td></tr><tr><td>vue-admin-template:极简的 vue admin 管理后台</td><td><a href="https://link.segmentfault.com/?enc=W2Xc%2BYNaYOMBj53kl%2FlhGg%3D%3D.A32p3LMBcs0UxO%2BwD5X1aGFwlBuyZ1O%2BYIC0GI5PeUH7HaxPc54ibPd802KzGyDWzvT%2Bd3tt3rrWIvsn2VOA%2Fw%3D%3D" rel="nofollow">https://github.com/PanJiaChen/vue-admin-template</a></td></tr><tr><td>ant-design-pro:Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案</td><td><a href="https://link.segmentfault.com/?enc=XYmmEANki%2FX5BkJeX9NYxA%3D%3D.agWYW6vhvfyieEHq%2FWr8LBcyJAYja91RZVfwYrnBbS5SzOoAmeLPHbmSVVQYVK%2B3" rel="nofollow">https://github.com/ant-design/ant-design-pro</a></td></tr><tr><td>ngx-admin:基于Angular 10+ 的可定制管理仪表板模,还拥有 6 个惊人的视觉主题</td><td><a href="https://link.segmentfault.com/?enc=TSmYTRD7sFZFlcycDloiGA%3D%3D.4DEwThwJJS558dKIXc9uxZbTF8qLaejflqQYrApuq2kJ0rhN3SgtQTIet6VQPnor" rel="nofollow">https://github.com/akveo/ngx-admin</a></td></tr><tr><td>vue-admin-beautiful:基于 vue+element-ui 的绝佳的中后台前端开发管理框架</td><td><a href="https://link.segmentfault.com/?enc=fyLRYI%2Bmsv27nPVbh7yvTQ%3D%3D.ZuW5G3jTYsXL8sjxgqVseweiExOSosgkIq5UH7aft1oJUocz14nx87BG3MA8scfuMQ6N%2BMLppOjH%2FRUU9O%2BbGg%3D%3D" rel="nofollow">https://github.com/chuzhixin/vue-admin-beautiful</a></td></tr><tr><td>vuestic-admin:免费与美妙 Vue.js 管理模板,包括 38 以上个定制用户界面组件</td><td><a href="https://link.segmentfault.com/?enc=qa5LmfVt%2BMv2hLC2Qn2zDA%3D%3D.OwL4MAjH%2FtuNaVzmJ1SxOc%2FkrskoFAzSiKqRuBOFbSpNCZRqND%2B3sh6kjgCbfgU8" rel="nofollow">https://github.com/epicmaxco/vuestic-admin</a></td></tr><tr><td>antd-admin:一套优秀的中后台前端解决方案</td><td><a href="https://link.segmentfault.com/?enc=4VfIhxWJxQ3rQreGmDsRAA%3D%3D.oSI55Zfv4sXBpwJNm7BpWUT%2BKvNtSIqF5eIOcLVjvs%2B0dhEcNLudXWaFcu8ShY5t" rel="nofollow">https://github.com/zuiidea/antd-admin</a></td></tr><tr><td>eladmin:SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发</td><td><a href="https://link.segmentfault.com/?enc=1uu5xrANfXs3eiM0lkUDpw%3D%3D.iBpADZ%2F9IDkwhEqtNPc7bwL2E%2FZyliA86ayt1mEKRpsKbZnZLuOUh1rC2IsehqxT" rel="nofollow">https://github.com/elunez/eladmin</a></td></tr><tr><td>AdminLTE:是一个完全响应的管理模板。基于 Bootstrap 4.5 框架以及 JS / jQuery 插件</td><td><a href="https://link.segmentfault.com/?enc=7knnwG6YLzhH%2BzmrcS9tyw%3D%3D.lZDfi2oY%2Bb4GhQ0V0gZSqOlm6iuySs9PsFEAUVnfQAvMPBSwh019xMoJtm59Zw%2Bw" rel="nofollow">https://github.com/almasaeed2010/AdminLTE</a></td></tr></tbody></table><h2>逼格满满的 PPT</h2><ul><li><a href="https://link.segmentfault.com/?enc=S8T6j%2FYRkDEtVw8nZrFoWw%3D%3D.cxl8GANkz3Wdku64MB%2BrO4XtPngzm63sQRmwTjScnWLNndoL%2FKZcbFKjgzKOIE2wrW136PNET8vrSIEfS53nig%3D%3D" rel="nofollow"><strong>GitHub 标星 54K + 2K!这才是程序员写逼格满满的 PPT 的正确姿势!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>reveal-md:使用 Markdown 来做 PPT 展示的开源项目</td><td><a href="https://link.segmentfault.com/?enc=pT%2FjBVfObOsnmKEH5Tjxvg%3D%3D.0hGo%2BWECKnoK0DBZiB58%2FyUF7JTgFS07B%2FOtCjBsCP%2FQyJA3AEIAX32YahhnE%2BY%2F" rel="nofollow">https://github.com/webpro/reveal-md</a></td></tr><tr><td>reveal.js:使用 html、markdown 写静态的文本,创建功能齐全且美观的 PPT</td><td><a href="https://link.segmentfault.com/?enc=msj3OpC%2FjelIDqkdypN44w%3D%3D.NXTK3oZ%2FR5X0Ypo3Kw6hYaYxbh0Q5rvyzHkeKn4G6p9sZxXZDK1yLedtTmNm3PjH" rel="nofollow">https://github.com/hakimel/reveal.js</a></td></tr></tbody></table><h2>数据结构与算法</h2><ul><li><a href="https://link.segmentfault.com/?enc=j%2FODIk46pLGyLXVfnDCPDw%3D%3D.igxMWvZYepJlnWGVuFeLP9wv8ttFn8NTS%2BRLYTOL0zgJViEZt27Sv0qwy3KFdGl78KT79gZm9057eBGWh%2BqtRA%3D%3D" rel="nofollow"><strong>7 个GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>javascript-algorithms:含了多种基于 JavaScript 的算法与数据结构</td><td><a href="https://link.segmentfault.com/?enc=A%2FN8%2BinAGK4c34Kf1UCfLw%3D%3D.6QjaKOPvwXLEDm6kw%2FhX%2FjENIeT0nVPtD2R%2FtHLraHYlqvSGQ0gMBnqkOE3CCzBex%2BesrO7Qr29wS%2FoMr93n0Q%3D%3D" rel="nofollow">https://github.com/trekhleb/javascript-algorithms</a></td></tr><tr><td>algorithm-visualizer:算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法</td><td><a href="https://link.segmentfault.com/?enc=tQEvaMfRx5xCGE8a%2BhSZQg%3D%3D.yLTOasG2jx%2BvK%2FXeJnUmQmdD9JTassdYums3rRwrze6AZHXf3G1HrWaA1VyAZ%2BybFJCeM9WnjlOaY19d4Pte0A%3D%3D" rel="nofollow">https://github.com/algorithm-visualizer/algorithm-visualizer</a></td></tr><tr><td>algo:数据结构和算法必知必会的 50 个代码实现</td><td><a href="https://link.segmentfault.com/?enc=e5sMsZYIuvFa5UewYoidRA%3D%3D.UCSmxp0XT5etra8N%2FwZIfoQT8Qc%2BK%2B8Cm66F4hcPZrhDo7EkdqTLtV3ccLimzDfQ" rel="nofollow">https://github.com/wangzheng0822/algo</a></td></tr><tr><td>awesome-algorithms:包含不同著名计算机科学算法的 javascript 实现</td><td><a href="https://link.segmentfault.com/?enc=oXK2%2Bt%2F8lcZLkU6X3YJyPg%3D%3D.j3SztyT0YckKMGlzgIcCfs6Xi%2F%2BZw2WdcrS33Q9s2zLW49zu1ibD2qgX2OC8tn7FoVnR1zqDoxjAyS%2BxBqeulw%3D%3D" rel="nofollow">https://github.com/mgechev/javascript-algorithms</a></td></tr><tr><td>JS-Sorting-Algorithm:关于排序算法的 GitBook 在线书籍 《十大经典排序算法》</td><td><a href="https://link.segmentfault.com/?enc=Ed3zgA8MXH7V6nnJOxg2%2FQ%3D%3D.CsbDFyxzqXRTvZkL5uhRMbEBouCRPvzR9Y%2FV3LT6ZJHNyVgJWzqRd0PlCyALtaIz" rel="nofollow">https://github.com/hustcc/JS-Sorting-Algorithm</a></td></tr><tr><td>JavaScript 数据结构与算法之美:包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画</td><td><a href="https://link.segmentfault.com/?enc=STQR%2FPcHqFJolTVjnSPFow%3D%3D.ILgomLKXneF4zflwIPTpRgIHwpZJ230hZLUGPGgH2QsUaF2sQGKDau0jQIF1u3X1TF05wrPIpxSM6LIUWe9qkIhbeIlmDULQCm8AglI6TQDHNMwOi7zgP4HiFmsereCysi6yl130%2FKwSISyIScq%2F29ntYPzr5uDuaQrl50sLcj5b1PAjKIEhAwC%2FblxK78T%2B" rel="nofollow">https://github.com/biaochenxuying/blog</a></td></tr><tr><td>daily-algorithms:算法,每日练习的一个项目</td><td><a href="https://link.segmentfault.com/?enc=uznw89n9ZBst7s0RaFSOug%3D%3D.WR7RHrCqOWeHR%2F6sPnuOqkvo7FA0MTkl1Pj1X4MYf2hsxLFKPTLgu8zACzilswxM" rel="nofollow">https://github.com/barretlee/daily-algorithms</a></td></tr><tr><td>JavaScript 更多 ...</td><td><a href="https://link.segmentfault.com/?enc=kfFd6xrevZiQCR8iWLMTTQ%3D%3D.VzIMf5EFvNmykKJSVTKts7QgNLHuXwc0zUcdJ1%2FN92C08ILF9xiamjvJB6CpyZ9bMQnKtM9N1FkGDIXc%2Fj187WrzYKVsJFN3ZA7der2vX%2Fyq7Ef9QkLIxhxdItGvXWPk" rel="nofollow">https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories</a></td></tr></tbody></table><h2>CSS 学习专题</h2><ul><li>[<strong>[10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!]</strong>](<a href="https://link.segmentfault.com/?enc=h%2BHhGv0%2B2BZyu9pf253YXg%3D%3D.PAIbXzx6k9JLH01t8L3cwqVwJOhxZNnlPCjcstx2%2BMScNZMEHQ4pYXklXApo3EFzQvCmLvJWD%2F2qfBbkzNVS2A%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>You-need-to-know-css: CSS 的各种效果实现,尤其是动画效果</td><td><a href="https://link.segmentfault.com/?enc=F2HwJPH56RlYfD2AaRs6sQ%3D%3D.0VGYsNRg5dvxsRGs4TKw3ManqOLEOPdnMfHjk9Tb7lfQoLT%2FPOq4p%2FZJanp5BJPSWRwT%2B6VYxNBQsWdO%2FmbaWw%3D%3D" rel="nofollow">https://lhammer.cn/You-need-to-know-css/#/zh-cn/</a></td></tr><tr><td>CSS-Inspiration:找到使用或者是学习 CSS 的灵感</td><td><a href="https://link.segmentfault.com/?enc=PtO7VKaHFPxb1za9qmBjWA%3D%3D.H1uSIH%2B7SebKXBAHsFkHVHWjGIy80BWDsC3Bhr3KgmaXGjhhQtMTXJU9E5qHSSAz" rel="nofollow">https://github.com/chokcoco/CSS-Inspiration</a></td></tr><tr><td>css_tricks: 总结了一些常用的 CSS 的新属性和一点奇技淫巧</td><td><a href="https://link.segmentfault.com/?enc=cGTm34thsPIhwn58a2b%2FRQ%3D%3D.21un6qFGZYwA674HnrDGZwj4FaoDyIFj3ybWFST%2FqwU0mMjT1x%2Fzo4qdPrHGwqIf" rel="nofollow">https://github.com/QiShaoXuan/css_tricks</a></td></tr><tr><td>animista: 各种 CSS 实现的效果,还有代码演示,方便直接复制代码</td><td><a href="https://link.segmentfault.com/?enc=GdsP7uXgCXdwt6P4%2FS1JzA%3D%3D.DV2lDq5efKsaMBg9O9KziCKpg8JHmd9BT1%2B6ItZoUZk%3D" rel="nofollow">http://animista.net/</a></td></tr><tr><td>spinkit: 汇集了实现各种加载效果的 CSS 代码片段</td><td><a href="https://link.segmentfault.com/?enc=15lspc7TN5mGrntSwisihQ%3D%3D.x%2Bf8%2BDOMGCdYD%2FL9nnAmEJuz%2FQmKzefqMfrySVqqiTacsdl%2FnWR7pGQarEcgmW0K" rel="nofollow">https://tobiasahlin.com/spinkit/</a></td></tr><tr><td>十天精通 CSS3: CSS3 教程</td><td><a href="https://link.segmentfault.com/?enc=JyA7Ws%2Fzem%2Fx3PG4WX%2FjxA%3D%3D.pH1IHUjiHvPe3gJnANvQVsCq%2FhrCP74Is2G2QEZr2TM%3D" rel="nofollow">https://www.imooc.com/learn/33</a></td></tr><tr><td>Animate: 有趣的,跨浏览器的 css3 动画库</td><td><a href="https://link.segmentfault.com/?enc=9b0uHrvAAVAJHWWD%2FDylpQ%3D%3D.i3viaMiAGUN2S6CJkKyeTezfi4hJGVkQJJp8CzYcLl8%3D" rel="nofollow">https://animate.style/</a></td></tr><tr><td>sass:Sass 是一种 CSS 的预编译语言,Sass 为 CSS 赋予了更强大的功能</td><td><a href="https://link.segmentfault.com/?enc=Y3Zywsgque5mJSkIzT%2FA9g%3D%3D.pY2gv0KMkhGawvkvrzy1gRCwqJJa0mgz7GRCu6ye9ooilMHqGpTwix81zL1nJGCt" rel="nofollow">https://sass.bootcss.com/documentation</a></td></tr><tr><td>less:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性</td><td><a href="https://link.segmentfault.com/?enc=z3xKjB5VtPIEyIT%2FFGggvw%3D%3D.U4XzJYJlvIrji%2Fuf42hMlLG6avyPi%2BDOTOGGN%2BMJGuw%3D" rel="nofollow">https://less.bootcss.com/</a></td></tr><tr><td>cssdeck:在线 CSS 前端代码 Demo 样式效果</td><td><a href="https://link.segmentfault.com/?enc=Rot73gzpeWBFhhJy9TIIkQ%3D%3D.V2iAYhpBtR3GVpf0m%2FAAt7dOw1Sl%2F%2Fy7GC1I3iZpM3I%3D" rel="nofollow">http://cssdeck.com/</a></td></tr><tr><td>codepen:前端炫酷样式效果,各种 loading 效果,在线编程,Vue 组件也特别多</td><td><a href="https://codepen.io/">https://codepen.io/</a></td></tr><tr><td>cubic-bezier:CSS3 贝塞尔曲线在线调试工具</td><td><a href="https://link.segmentfault.com/?enc=wqWrVn9wls0%2FtHmAVoq91w%3D%3D.8BAx6YsslA8rVzhA4EG0GXGFNAmd4%2B60LNVihZ%2BcC10%3D" rel="nofollow">https://cubic-bezier.com/</a></td></tr><tr><td>Snapsvg:SVG 动效的 JS 库,各种炫酷的效果。</td><td><a href="https://link.segmentfault.com/?enc=LayaMO5AJUCNViEnZ8UJ%2BA%3D%3D.jYaEV2iGDDNEWoP8MmqXVjCsoItFzZkLwUjlFoPafxw%3D" rel="nofollow">http://snapsvg.io/</a></td></tr><tr><td>Cool Backgrounds:超酷的背景图片,渐变的色彩的图片背景都有,看起来很酷。</td><td><a href="https://link.segmentfault.com/?enc=4E9QIBEirYwl%2Byc70WbzzQ%3D%3D.KIoUU4OfXlBtM9yoQBb06SRfEYbN5HaAp2%2BVg0fbp6k%3D" rel="nofollow">https://coolbackgrounds.io/</a></td></tr></tbody></table><h2>Node.js</h2><ul><li><a href="https://link.segmentfault.com/?enc=MNFndDl9LAn8ukXA%2BcE%2B5g%3D%3D.lkKHXi8Uo4wae6tsdncVHLgXt%2FfAqwsi2BLXE1k7H9XvyM%2FS%2F8cli1iXsijFA6hfUzXbuCFI0ItSlr01WJTQRQ%3D%3D" rel="nofollow"><strong>推荐 9 个 Node.js 学习、进阶、debugging 分析、实战 的重磅开源项目 👍</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>node:最佳的学习资源肯定是 最权威的 Node.js 的官方项目啦。</td><td><a href="https://link.segmentfault.com/?enc=wQddpLhqg7gzWTXJfb9PGQ%3D%3D.JCs95%2FSevJK6PHa3S%2BEbNajlFyqe439EvBq7IAIQ5YM%3D" rel="nofollow">https://github.com/nodejs/node</a></td></tr><tr><td>node-api-cn:Node.js API 中文文档项目</td><td><a href="https://link.segmentfault.com/?enc=IRkuWFFrAsG6uEdTjPALsA%3D%3D.epwhvsXeLPIp7ojlhKJq9DPQVskvsa7jIkfdERoSauMqYSWPeTkojjbSaYG1VDUD" rel="nofollow">https://github.com/nodejscn/node-api-cn</a></td></tr><tr><td>node-in-debugging: Node.js 调试指南的项目</td><td><a href="https://link.segmentfault.com/?enc=3cKw6n8Y1hP942TjV43vDw%3D%3D.AGA1tPr6lZnps%2BddVb1N4vjbIO%2FNnf9%2BIawsDuBOREE7IWfkkkOFFklOaDsisgFH" rel="nofollow">https://github.com/nswbmw/node-in-debugging</a></td></tr><tr><td>nodebestpractices:对Node.js最佳实践中排名最高的内容的总结和分享</td><td><a href="https://link.segmentfault.com/?enc=sfPxctw24DX0ygBvQA2I4Q%3D%3D.Pnkj5gERT%2Bs943%2FQtWDC4o1hvkQwXP8pDtsUu7OaeNReN8DZYlZooVTVNkTeBBchN25bKurPF%2BAMEOHEtfXyAw%3D%3D" rel="nofollow">https://github.com/goldbergyoni/nodebestpractices</a></td></tr><tr><td>deep-into-node:深入理解 Node.js:核心思想与源码分析</td><td><a href="https://link.segmentfault.com/?enc=TnfSwsUmrh4vB16xDxSsiw%3D%3D.GeboiB4y4jTnj77r6RGEcNI2BVmZlPLLH%2FQ7ttmQGPZHeUD0BElRvPZbMrvaECAR" rel="nofollow">https://github.com/yjhjstz/deep-into-node</a></td></tr><tr><td>Nodejs-Roadmap:Node.js 服务端所涉及的技术栈</td><td><a href="https://link.segmentfault.com/?enc=q3jGmHfkFOajoyQu%2FsY7Ow%3D%3D.HMfTIy3v59PDZlcBRERxlc5P%2FKvWvCqhig2RONGjBgQ%2FrqU9xuOJspSMmXshw7l8" rel="nofollow">https://github.com/qufei1993/Nodejs-Roadmap</a></td></tr><tr><td>NeteaseCloudMusicApi:网易云音乐 Node.js API service</td><td><a href="https://link.segmentfault.com/?enc=88P0SJ%2FXsC%2FoQ3qJ9moSVg%3D%3D.MjM2TRwp4Mh1jmkLAxKDg%2BAq9FDgEFxvGK4baluaT9%2FAMMksQQ2AeC%2BzcdhVT4mm%2FzagPSfvun8PYT%2Fel7YLDQ%3D%3D" rel="nofollow">https://github.com/Binaryify/NeteaseCloudMusicApi</a></td></tr><tr><td>node-elm:这是基于 node.js + Mongodb 构建的后台系统</td><td><a href="https://link.segmentfault.com/?enc=zB3KTiYYV8Y%2BKSmSMRztMw%3D%3D.EL8a0nNoGFWjZtXEU6HXAqvQBmlZtnRwPlcwhOq0%2B%2Bf8Xn4amPCiAIGKrTFmjiJB" rel="nofollow">https://github.com/bailicangdu/node-elm</a></td></tr><tr><td>awesome-nodejs:Node.js 资源合集</td><td><a href="https://link.segmentfault.com/?enc=hmji35EK6RSIVuKufUZECw%3D%3D.9Yn8kZO3df1XTRKpbcc68fW%2F1vExoN1UDvQEpbnhdY99plM21hAyPKTN3aM%2FBLIr" rel="nofollow">https://github.com/sindresorhus/awesome-nodejs</a></td></tr></tbody></table><h2>小程序</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>mpvue:基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系</td><td><a href="https://link.segmentfault.com/?enc=QgqtTxzRAT3SGIaqvcCBVg%3D%3D.p%2FhD8KnlbL7WpOQ3ESB%2BnNsBRgHiiGUyqpiA9i3H5M0TwPUJmoiM9LjXOyja%2F5YS" rel="nofollow">https://github.com/Meituan-Dianping/mpvue</a></td></tr><tr><td>wepy:小程序组件化开发框架</td><td><a href="https://link.segmentfault.com/?enc=QXQy5lPNG2DplFnBd67hhA%3D%3D.82l8ZKD2R5RYLEpZIrGkkUa9S0zM0WAFN0%2Bw6rsQTPQ%3D" rel="nofollow">https://github.com/Tencent/wepy</a></td></tr><tr><td>westore:微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发</td><td><a href="https://link.segmentfault.com/?enc=z0FAcVGyMVUTi8nh%2F9pWlg%3D%3D.W0kMWzPtfG6FUhph%2FpiaOrp1PbMJ4qrUdnh9GtUH%2F3c5GkDvRHTIerW4Ke7TgzUV" rel="nofollow">https://github.com/Tencent/westore</a></td></tr><tr><td>ColorUI:鲜亮的高饱和色彩,专注视觉的小程序组件库</td><td><a href="https://link.segmentfault.com/?enc=DAGOIgVN2ElJunTms9IBPw%3D%3D.jc5qqShHx35hoGVRbyPLkT2%2B%2F8HNHN4nZeoD334icvq9e6ha2Kh7F7Ptmu9NmnmA" rel="nofollow">https://github.com/weilanwl/ColorUI</a></td></tr><tr><td>Gitter:采用 Taro 框架 + Taro UI 进行开发的 demo , 可能是目前颜值最高的 GitHub 微信小程序客户端</td><td><a href="https://link.segmentfault.com/?enc=5b%2B4vgwgUFUhwEEaObA3GQ%3D%3D.FOjDFpds7MIjlnc4o%2FgIsCJ%2FzwVV3%2B6qml1Rf3VJu8E2Da3viKrr9EiD%2FK0YqGkV" rel="nofollow">https://github.com/huangjianke/Gitter</a></td></tr><tr><td>Taro:多端统一开发框架,支持用 React 的开发方式编写一次代码</td><td><a href="https://link.segmentfault.com/?enc=nTJG65ZuSX97uR0vZfGzgQ%3D%3D.dUzb6PqCBgfH4VXoIaJEwmvPjuvQ7J0gpvuu%2BMPawNw%3D" rel="nofollow">https://github.com/NervJS/taro</a></td></tr><tr><td>Painter:小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片</td><td><a href="https://link.segmentfault.com/?enc=YSo3bgmO%2Fb0xP0udFDdPkg%3D%3D.GTPeei9oqVkUf14HTv%2FzgyBPm4THjs%2FN3G3z8MUtXIqad%2BezUVx7IcDkfS5lH8wB" rel="nofollow">https://github.com/Kujiale-Mobile/Painter</a></td></tr><tr><td>kbone:Web 与小程序同构解决方案,微信官方</td><td><a href="https://link.segmentfault.com/?enc=DcmURA08V9fcdC%2BUT90o%2Bg%3D%3D.nWCuO%2Fo4X1Vb%2FH%2FQYGmDpGxtIGVGM5AEPQBYtOI%2BHA6tmYMDSpECrH8d8lP1Zbte" rel="nofollow">https://github.com/wechat-miniprogram/kbone</a></td></tr></tbody></table><h2>前端监控</h2><ul><li><a href="https://link.segmentfault.com/?enc=TKrQKPm2oHvVDB%2BUFD6wqA%3D%3D.f%2FHYZfagnKmt2%2FiOdQE1n4AJIr77LLzSAokNOOsesq9PI%2F1Tr5BwVbK%2BdzMfk3IZTwkqpRjRsKk4WsGN5Yfc3w%3D%3D" rel="nofollow"><strong>推荐 GitHub 2K+ 星:前端监控工具 - webfunny 项目!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>网站</th><th>说明</th></tr></thead><tbody><tr><td><a href="https://link.segmentfault.com/?enc=Y9YUIkWtmQg4fgN8LswyUA%3D%3D.PEzD8Acr4OtabeeCdEvlJuN8TdgtM2932sCRQ%2FClM90vcbyWvN1oyeNAe91JpfMG" rel="nofollow">前端监控工具 - webfunny 项目</a></td><td>一款轻量级前端异常监控和前端性能监控系统</td></tr></tbody></table><h2>前端的代码规范</h2><ul><li><a href="https://link.segmentfault.com/?enc=%2FbGjdPd5jaMah2xOp7KHRw%3D%3D.7kwD7ZScmUE%2FhgfqTnjV2tYCSmfVLfPmlpT%2FzhaFffIfkO5NBOiLPTdL8ORgwPJ9HHQLVpQjoNbvxk%2FsjSWogQ%3D%3D" rel="nofollow"><strong>恕我直言,这几个大厂的前端代码规范你可能还不会 - 能精进前端的代码规范</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>腾讯</td><td><a href="https://link.segmentfault.com/?enc=7IXxT0ZZunKNaXBvuB2nYQ%3D%3D.7uWGZsSNmNK0zhD4XN4xsRPQHIcaXumYm8IiOw1FlAwfzLzyDTMcDMIuupt0zDs4" rel="nofollow">http://tgideas.qq.com/doc/index.html</a></td></tr><tr><td>京东</td><td><a href="https://link.segmentfault.com/?enc=92nIOzoCgqNHFRC2hlrzoQ%3D%3D.u4BzTolZai7bEwGySZI%2FSxeokXKna%2BpBsfkwYz8J%2FQUj4SrkSiJpNKQnLNd5iwlN" rel="nofollow">https://guide.aotu.io/index.html</a></td></tr><tr><td>airbnb</td><td><a href="https://link.segmentfault.com/?enc=T76KjaCtNb6CnQ9kEyrnQA%3D%3D.wvhh37mrWpChGObuenzv%2BkMhNA%2FkjhxewoWeg2t0jou%2FKQafIBtzgYrBpm0bcUeU" rel="nofollow">https://github.com/airbnb/javascript</a></td></tr><tr><td>百度</td><td><a href="https://link.segmentfault.com/?enc=n9M3GbZq3bAG%2FuVFXaWHdw%3D%3D.GIynQ%2BQ6pi%2B%2BKr%2Fb%2FGvK1buVKjqB12HK8w1DyM3gJrqvrNumHdL86v4j9BrY%2BJ7zt%2FVfHASKaH0odiGsc2mPfD1CD%2FbRWP%2BTvcB5IGpbhGM%3D" rel="nofollow">https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md</a></td></tr><tr><td>JavaScript Standard Style</td><td><a href="https://link.segmentfault.com/?enc=dmqQaIK%2FnNvMaGZPEbk%2FyA%3D%3D.7GrAx8zNttU%2FHUbg2nLKV90oY539JIKp5Cha49NVchFhM%2F2T%2BvUPVv1U%2FK%2B31b94" rel="nofollow">https://github.com/standard/standard</a></td></tr><tr><td>Vue</td><td> <a href="https://link.segmentfault.com/?enc=em0arhE01CjsLgo%2BWvFlUQ%3D%3D.hZHAFjfqooGZlk46AXvGKvkhkw8oca5zb0Gik3wgt1qigNPzJ85UyG3AI%2FhMKWAy" rel="nofollow">https://cn.vuejs.org/v2/style-guide/index.html</a></td></tr><tr><td>ES6</td><td><a href="https://link.segmentfault.com/?enc=FVB0pO7L7OXOd5VUyzqq9g%3D%3D.Tnn4STYEN%2FVwKJ%2FDrV8hTugyK1hXDmTaLK%2BaHRksTXel524wv7tcfl2%2B7Cn0tU5U" rel="nofollow">http://es6.ruanyifeng.com/#docs/style</a></td></tr><tr><td>Bootstrap</td><td><a href="https://link.segmentfault.com/?enc=zvBTk%2BoYB4GIWOFuH5uj6A%3D%3D.M7PC3%2FrNMne0yoEWVHiPnbQveSscRlpjcX0OJNWOvaY%3D" rel="nofollow">https://codeguide.bootcss.com/</a></td></tr><tr><td>ESLint</td><td><a href="https://link.segmentfault.com/?enc=6Fv2aOc9v6evgrcqOmXRPw%3D%3D.gsi8pr1SG9f%2FRlor3N5aTD1FnlZRyMB8KQnu8CAm7Rg%3D" rel="nofollow">https://eslint.org/</a></td></tr><tr><td>Prettier</td><td><a href="https://link.segmentfault.com/?enc=E%2Bbrh2yd%2Ft04%2B6plKBQFWw%3D%3D.c7%2FfcUojngVOEhgG%2FPzMdLPKHDFyQTYvIVzE6w2Rsxc%3D" rel="nofollow">https://prettier.io/</a></td></tr></tbody></table><h2>程序员必备仓库</h2><ul><li><a href="https://link.segmentfault.com/?enc=oLKHjpVQO34eao5vY0O%2B4A%3D%3D.lfKaBBZg%2B0jKZzT5P6Xf75Tgaefri2IuluT4eijDESKex7pTBN7zypGkKYI28pjju55dxrx8zPHqcR%2B5xZB58g%3D%3D" rel="nofollow"><strong>推荐程序员必备的 10 大 GitHub 仓库,前端占了 7 个!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>build-your-own-x:构建自己想做的应用</td><td><a href="https://link.segmentfault.com/?enc=SFE9odNN7waVkSDig9lKgg%3D%3D.ufsKPPbrMoBvZo2%2FDMK3THTeHtncFt4Cnqr%2FWCda%2BUsX%2FB0BymCdME%2B%2BMoGIAB1rCjwMFWdJF9PjJV7l%2BSNrrA%3D%3D" rel="nofollow">https://github.com/danistefanovic/build-your-own-x</a></td></tr><tr><td>javascript-algorithms:多种基于 JavaScript 的算法与数据结构</td><td><a href="https://link.segmentfault.com/?enc=WajWBD1Nef3i10deqwhBug%3D%3D.XrmzBd1WMbZoOhJyvQuqvO9BjagQgOe1YMBapY4E4hct1QJlwNdfYQMVBj3JKowzvlCMN6Js%2BL2DGZSmgk7DkA%3D%3D" rel="nofollow">https://github.com/trekhleb/javascript-algorithms</a></td></tr><tr><td>computer-science:为所有想要学习计算机科学的人提供了大量的免费学习资源</td><td><a href="https://link.segmentfault.com/?enc=va76e7fgLgeNKX4KISflRQ%3D%3D.21CBWIokFCTQaxPcgIf4pdg35m1mdHKQ3L%2BlEoFCNwkJAkc5fL%2Bv%2Bs%2BNlIaR4bmu" rel="nofollow">https://github.com/ossu/computer-science</a></td></tr><tr><td>30-seconds-of-code:超过 100 个代码段,涵盖了 JavaScript 中的各种内容</td><td><a href="https://link.segmentfault.com/?enc=Bf2742zQuymbPyzJfbY9eg%3D%3D.Fr8PCYNeVGZPbob%2B5%2F2YnNRwkdMFS2s47X9QH5fiGPezRocNMREK8hU41PSVp6tLI%2FZp%2Ba6NG6cUhQuWuD%2BkEA%3D%3D" rel="nofollow">https://github.com/30-seconds/30-seconds-of-code</a></td></tr><tr><td>nodebestpractices:Node.js 最佳实践中排名最高的内容的总结和分享</td><td><a href="https://link.segmentfault.com/?enc=%2FMv63blV8vTyzzV1FblZsw%3D%3D.LoVGLxydjWiyEF0Bh%2FH0Tn7EfjGiG1Y9t4zUy0eezWftTLaxhgbeTa7oi7jcJdkryKfEZabI2q1b09EEv4kTtw%3D%3D" rel="nofollow">https://github.com/goldbergyoni/nodebestpractices</a></td></tr><tr><td>realworld:如何使用特定的语言 / 技术开发适当的应用</td><td><a href="https://link.segmentfault.com/?enc=S7oPdCwW%2FaIcHO2TaaQQ5g%3D%3D.ut2m8eR73gyU2FgFSEC3Y1X7fKNw5BMt6KpLf%2BfEFHkQQE%2BUKnLK8rUAqVdT4SIn" rel="nofollow">https://github.com/gothinkster/realworld</a></td></tr><tr><td>free-programming-books:免费提供编程书籍</td><td> <a href="https://link.segmentfault.com/?enc=jqEeoEGrqZIBfWiC1hdOmQ%3D%3D.O%2BSZAynZ3lqbCglcKYQRXTMmJX%2BwfSXn8VsaUGL2qlI5xBHWcv2myBFPrWlYqK6qxjcTLgHr54Gm1Z2eMwSXgw%3D%3D" rel="nofollow">https://github.com/EbookFoundation/free-programming-books</a></td></tr><tr><td>system-design-primer:学习如何设计大型系统,为系统设计面试做准备</td><td><a href="https://link.segmentfault.com/?enc=2bEprdHe2vUKhFnELt%2Fv1g%3D%3D.2BzMPi1cGd4rroTirykeqWE%2F5fXhL6LfA3Y9zsycT7cqJEb%2BUsyNCsxG7Vwet3e9U1eyK0jRjW%2FoZax4MEkEww%3D%3D" rel="nofollow">https://github.com/donnemartin/system-design-primer</a></td></tr><tr><td>awesome-python:精选的 Python 框架,库,软件和资源的精选清单</td><td><a href="https://link.segmentfault.com/?enc=46ySCBPDvkldFdrUr8lfzg%3D%3D.vsnLGL%2FsE2YyYIPPzlGEAdh44hdSkkkOmBshEABdIOLAwya5LTNADg6da6btDDn9" rel="nofollow">https://github.com/vinta/awesome-python</a></td></tr><tr><td>awesome-machine-learning:精选的很棒的机器学习框架,库和软件的列表</td><td><a href="https://link.segmentfault.com/?enc=Y6mjFCDd8KPkIGeQbCrPYQ%3D%3D.T2zyySFn59epjSENIyFO3PNVwc6co1qEjbcZor852PDCupBYBh%2B2TwxAjI01vovyD5SuBQaOZXk7xM2Sk72NJg%3D%3D" rel="nofollow">https://github.com/josephmisiti/awesome-machine-learning</a></td></tr></tbody></table><h2>国外网站</h2><ul><li><a href="https://link.segmentfault.com/?enc=LRJQL247n4IMaloznY16qg%3D%3D.wPrjOkV7VBjGVIyGWR1QxrUIlKRROWS%2BSgHj7V6xLgsnO7koxEMSQOXRRNupROKz310Eke3XEadQWqKXtwjDHQ%3D%3D" rel="nofollow"><strong>涨姿势了!22 个拓展程序员技术与视野的国外网站!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>GitHub:开源项目仓库</td><td><a href="https://link.segmentfault.com/?enc=vVjKBxk2fTqUv8eBB4btTA%3D%3D.yjiP6Kt%2BSUc9SGsAI0tRK5cRIVA%2B44Ew8ZuFpK%2Fi5aQ%3D" rel="nofollow">https://github.com</a></td></tr><tr><td>GitLab:仓库管理系统的开源项目</td><td><a href="https://link.segmentfault.com/?enc=px05sFu6RUbM%2BlgeaS6xEA%3D%3D.2N1EWiMVyGJH%2FEaUDoQrye%2BJdGcg3UhQ5yzN%2FWkIsck%3D" rel="nofollow">https://about.gitlab.com/</a></td></tr><tr><td>dev.to:技术博客社区</td><td><a href="https://link.segmentfault.com/?enc=xgzE8sEbKSStJ%2B%2BpgNyaAA%3D%3D.jOklV7PIv194lcSLw%2BokJQ%3D%3D" rel="nofollow">https://dev.to/</a></td></tr><tr><td>dreamincode:小众的技术博客</td><td><a href="https://link.segmentfault.com/?enc=8883cDNonXvTnbvejBPdUw%3D%3D.1FTWgE1uJk3Za39mNkkGHxhqH2Npe%2Bb4sJaipVjQ2R8%3D" rel="nofollow">https://www.dreamincode.net</a></td></tr><tr><td>bytes:和 dreamcode 类似,简约但不简单</td><td><a href="https://link.segmentfault.com/?enc=dzHWGd%2BBfhEzR%2BDi7qL1%2Bg%3D%3D.Yo3hU4PNcRIWE0%2Bz2M7RtA6GuZCPGzYlRlHVarTKETc%3D" rel="nofollow">https://bytes.com</a></td></tr><tr><td>hongkiat:技术、设计领域相关的技术文章</td><td><a href="https://link.segmentfault.com/?enc=9cUO4eHuo6n%2FWGFMZmy65g%3D%3D.TFgAO8X7KfixnsWAB7qXimP6wsFapgycjMOE2ChxAbdhbXImHWP077Kw2UK6fK0S" rel="nofollow">https://www.hongkiat.com/blog/design-dev</a></td></tr><tr><td>IBM Developer:一线工程师,技术性很强的文章</td><td><a href="https://link.segmentfault.com/?enc=4X3OTmzOWOvkoG1MtiYWZw%3D%3D.aojCUtCV%2FdtouxBWPLnzedDHi6u5TvOuhqOSeyRgVfo%3D" rel="nofollow">https://developer.ibm.com</a></td></tr><tr><td>StackOverFlow:专为程序员提供的国际性问题解答交流社区</td><td><a href="https://link.segmentfault.com/?enc=9tVvByH0UCxojyxaQGvr8w%3D%3D.UsUBmbhUfE%2FBTSual7VFlhYtv22l%2FGmvO28q3UYKXFM%3D" rel="nofollow">https://stackoverflow.com</a></td></tr><tr><td>Reddit:非常个性的社区,你可以讨论编程问题,还可以学习学英语</td><td><a href="https://link.segmentfault.com/?enc=OEZ6CaiRnr9Hl4jFpCBtqw%3D%3D.Dxi37hoX1YPBmcitLEqIgny6ioHZPIMg2XJDhzQ7yXQ%3D" rel="nofollow">https://www.reddit.com</a></td></tr><tr><td>daniweb:质量比较高的问答平台</td><td><a href="https://link.segmentfault.com/?enc=Zt8YFhfEg1VsDT5GPCQx1A%3D%3D.OUNPGXRaNq6U3md1bWPdWvqmukZMlUuEXo%2FEfNw2w44%3D" rel="nofollow">https://www.daniweb.com</a></td></tr><tr><td>LeetCode:国内的 leetcode 一样都是刷题用的</td><td><a href="https://link.segmentfault.com/?enc=0BRRGnH%2B4aOF%2Fz4O6GHVjA%3D%3D.yV%2BczphfIqT9J4e7qv91YK2OhJ80hsie5%2BSMBsXvbUk%3D" rel="nofollow">https://leetcode.com</a></td></tr><tr><td>LintCode:LintCode 领扣上有数量超过 1000 道的算法题目和人工智能题目</td><td><a href="https://link.segmentfault.com/?enc=GBX37ui79Yhwsq6SFWQYAw%3D%3D.wiUTtDlzP955cnCsCpwhQLi6lFHqOD1isgNOZM7D3x0%3D" rel="nofollow">https://www.lintcode.com</a></td></tr><tr><td>Codeforces:全球最著名的在线评测系统之一</td><td><a href="https://link.segmentfault.com/?enc=fLYoJA8CaMV9%2F066r16cVA%3D%3D.FxmBS8qQm1Zkk3NbChJdxxnZK53ty7vcC6ahEI2kZzY%3D" rel="nofollow">http://codeforces.com/</a></td></tr><tr><td>Topcoder:世界上规模最大的编程网站</td><td><a href="https://link.segmentfault.com/?enc=XFRIiqlDIcSHHOAXVSc%2Frg%3D%3D.BFqzGL5yZm7ZnkuxwwqmIoK2r5eEsvIittL%2BQSzR4gI%3D" rel="nofollow">https://www.topcoder.com</a></td></tr><tr><td>tutorialspoint:在线学习的网站,并且免费,里面有各种技术、各个知识点的讲解和demo</td><td><a href="https://link.segmentfault.com/?enc=iHwd%2FT25Z0w%2B2U9zRA1VoA%3D%3D.f1C8k1C7m%2BQcyo%2BnrTR8sFLELkfucdfrlSMjMfItvHcy%2BmgNneHqFMDDf4eBp1VB" rel="nofollow">https://www.tutorialspoint.com/index.htm</a></td></tr><tr><td>codecademy:简化编程学习的过程</td><td><a href="https://link.segmentfault.com/?enc=oK4QyKCOJnCFofs0ArZIRw%3D%3D.o8tqAQ5EmIJ8ed5EUXeaWwgvJgeXN%2Bd7X%2FrPxIcv0l8%3D" rel="nofollow">https://www.codecademy.com</a></td></tr><tr><td>Livecoding.tv:为全球程序员提供一个实时高效的互动平台</td><td><a href="https://link.segmentfault.com/?enc=SRwaBgva9HFStiMVcnm6DQ%3D%3D.WisSL0wOOY5Xi3lYbyrHXR7lvkHwadUae62jSt1sY96946ZRIoMuAKYvaaVDE%2Fmq" rel="nofollow">https://www.livecoding.tv/accounts/login/</a></td></tr><tr><td>Dzone:技术涵盖比较全面的网站</td><td><a href="https://link.segmentfault.com/?enc=DV8zxXsCT7CjcrDZgxQGtw%3D%3D.Zs2YV8dLFgCWlG83C20JgaHwDkHA4ECGjzteIJowrjU%3D" rel="nofollow">https://dzone.com</a></td></tr><tr><td>simpleprogrammer:纯技术文章不多,指导建议性的文章比较多</td><td><a href="https://link.segmentfault.com/?enc=iHj2uBYop6pUqQTebkvd1w%3D%3D.Es4TDNKMKY1Ir91GY6QaN4lfOLZlpZk2FJeyWQ3eCPc%3D" rel="nofollow">https://simpleprogrammer.com/</a></td></tr><tr><td>SitePoint:学习 Web 设计和开发 HTML5,CSS3,JavaScript,PHP,移动应用</td><td><a href="https://link.segmentfault.com/?enc=3xZkvs5h5XanXLuQ6zX8wg%3D%3D.SwOsJSznTQjPXb5zpb1aX5Fb7lZJYfE40FcLqr67jRQ%3D" rel="nofollow">https://www.sitepoint.com/web</a></td></tr><tr><td>YouTobe:国内的哔哩哔哩一样,各类视频汇聚于此,当然各国编程大神也在这啦</td><td><a href="https://link.segmentfault.com/?enc=gqBqaQ7CFLBr4SXLaS1krQ%3D%3D.vNzC%2BDTIxXBcCQvdB2KfP%2FvVL99595MgnKiAWr8osTQ%3D" rel="nofollow">https://www.youtube.com/</a></td></tr></tbody></table><h2>设计规范</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>iPhone各设备屏幕尺寸</td><td><a href="https://link.segmentfault.com/?enc=0Ko%2BHAKXhWFXhgiRYCCchw%3D%3D.uzvD4eQ%2BgZZuWH%2FithVwS93BFyla%2BHgcTG6k7fYRqfJCMUSQbDGnEnW8si6hVxuCqZmstfp%2F6ks%2BYaX%2B6xEHRIE87Tn05UppmStevS90cR0%3D" rel="nofollow">https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions</a></td></tr><tr><td>移动屏幕尺寸设计规范</td><td><a href="https://link.segmentfault.com/?enc=5AGKbKRWymaNGCvUExPQZw%3D%3D.IheVXk2krEF5iAd%2FQDOVWC9OjhBy5PwO5IZqMAXjUI4%3D" rel="nofollow">http://screensiz.es/phone</a></td></tr><tr><td>微信官方小程序UI样式库</td><td><a href="https://link.segmentfault.com/?enc=nsZYWCKiLZmht9UfBA7hiQ%3D%3D.Eir%2FrRcBjvoGahJHUsS2P%2BUU3BRXBIRJGmxeZRJCumk%3D" rel="nofollow">https://weui.io/</a></td></tr><tr><td>各大尺寸设备响应式屏幕效果显示</td><td><a href="https://link.segmentfault.com/?enc=8F8LIgZQTSsK7avEKYWWoQ%3D%3D.p6kLomh9agbI7b8RuoEJrFbdRW3qjjNusWP5vcG8agY%3D" rel="nofollow">http://www.responsinator.com/</a></td></tr></tbody></table><h2>可视化</h2><ul><li><a href="https://link.segmentfault.com/?enc=c9Jx08gx6Vn0Ri0MD%2B9MfQ%3D%3D.UyKuasWKlA%2FbzbiQ%2Fd0VnS4gJ9LgeL3ZBvoktower1Lsw%2F53gNUp90XXJlSMEBRELdUnzmuIg8kF92t3zEillg%3D%3D" rel="nofollow"><strong>推荐 brick design全场景可视化拖拽低代码前端框架</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>brick-design:全场景可视化拖拽低代码前端框架</td><td><a href="https://link.segmentfault.com/?enc=5hu3OVQelo%2BEYCgZd998Zw%3D%3D.uQ7ogCwt6t6Qa6npC87bvOdDGLeB0r0wLml0tjiwyjMbkn8HmZqCL6ORfBwumiTE" rel="nofollow">https://github.com/brick-design/brick-design</a></td></tr></tbody></table><h2>代码生成器</h2><ul><li><a href="https://link.segmentfault.com/?enc=mCWK5LHF0mGpLHTMUlcKoA%3D%3D.fXLVQNmrxIUDBiu2Q%2F7SbJASY%2Ba1l08y%2FScARiv7BeCf9mUQMogiI77NYgVndKKMgW9oE3r3c4AFbVq%2FiSykpg%3D%3D" rel="nofollow"><strong>GitHub 2W 星:一键生成前后端代码</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>jeecg-boot:一键生成前后端代码</td><td><a href="https://link.segmentfault.com/?enc=IK8dr5sShYdHYWOAdPnMLg%3D%3D.oilHr9zbe2hw6h79b%2FDhotj7G2UE7cLw2ExzqlpAH%2FSF3F%2Bu0S4sKmESCNHKZvTm" rel="nofollow">https://github.com/zhangdaiscott/jeecg-boot</a></td></tr></tbody></table><h2>下载全网视频</h2><ul><li><a href="https://link.segmentfault.com/?enc=AiBwju0W2Hiaqf%2BmlKu5Uw%3D%3D.xoCMcs%2FCOtTLE%2Fd4cUuVMGjSCqyAWBcLb45ZNVVPKAwbPH8tdGHDn8au2OSEEoLZRJM8XqB%2BDGnix5VKOBv9CQ%3D%3D" rel="nofollow"><strong>GitHub 5W 星:一行命令下载全网视频的两个开源项目</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>you-get:一行命令下载全网视频</td><td><a href="https://link.segmentfault.com/?enc=%2Fovnhm9cL8uMS5wd%2F%2BrEMA%3D%3D.AfHi8VbPJ6J%2BadwRuWeTJWjYYpB8dAe8eB5L7Ks2u9puDc5rLK%2F0UNlU8qFegnNm" rel="nofollow">https://github.com/soimort/you-get</a></td></tr><tr><td>annie:一行命令下载全网视频</td><td><a href="https://link.segmentfault.com/?enc=Ef8hzu3bXzV8F5X7zph7yA%3D%3D.kfJdnr7qF1NbPxU%2Bvl1T7igoBTfZ9TQYMxPFTsV455GfIqpfZiEabvgJZMiVZ7nM" rel="nofollow">https://github.com/iawia002/annie</a></td></tr></tbody></table><h2>酷炫的极客界面</h2><ul><li><a href="https://link.segmentfault.com/?enc=j5sGX%2Fl3ofGlQ6X8HvDsJw%3D%3D.zSSkdgO%2BE%2BQPhAm5LpSOOFSt0w0g%2FmvYBn35dXwo2Ezma5fOr%2BEC6FKZl%2FelhOPnWtrZ9WKKPeOZz8kaXGNXyA%3D%3D" rel="nofollow"><strong>被惊艳到了!适用 Win、Mac、Linux,酷炫的极客界面 eDEX-UI</strong></a></li><li><a href="https://link.segmentfault.com/?enc=SEgz3aepfa9xWR2geo1DeA%3D%3D.vqfvI7o%2BCsDTAD8xNKiEwWSP1vENWXBFm9FEUyzElYJY28zyzQdqgJAdFXZuFaIP" rel="nofollow"><strong>程序员最想要的高逼格,都藏在这个开源项目里了!</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>eDEX-UI:酷炫的极客界面</td><td><a href="https://link.segmentfault.com/?enc=%2B8DsXplXrYRq7o%2FlSTd0AA%3D%3D.%2Bu%2FS0Bn0EksgDbKfW9zWjPgeOJWazY7nubMcwhEfLTKyYN2c2cxfEQmys6TNUWLT" rel="nofollow">https://github.com/GitSquared/edex-ui</a></td></tr><tr><td>lively:拉高程序员电脑桌面逼格</td><td><a href="https://link.segmentfault.com/?enc=sQ3TZ9OQPIXFPUQFyY8dcw%3D%3D.5UiHiyQ6ayeKl8mdnUT7UFvamA58O%2F1eXZui2rrr6wI%3D" rel="nofollow">http://screensiz.es/phone</a></td></tr></tbody></table><h2>抠图神器</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>removebg</td><td><a href="https://link.segmentfault.com/?enc=r%2FSqpE1IU4NKhGNDiVNrBw%3D%3D.KGkpq7nbpwAEmu6QKvv3AbKeHC9vci4HmjQc2DsUEQM%3D" rel="nofollow">https://www.remove.bg/zh</a></td></tr><tr><td>在线 ps-uupoop</td><td><a href="https://link.segmentfault.com/?enc=QoqntfYoxL6kxuKAYUxBhA%3D%3D.aXXKidOf12qqDLFwM9YnTWQ77r78zgoQFzy2SGiwJzE%3D" rel="nofollow">https://www.uupoop.com/</a></td></tr></tbody></table><h2>在线绘图</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>ProcessOn</td><td><a href="https://link.segmentfault.com/?enc=CBj6483B5%2FQ3ImXIE%2BPcQA%3D%3D.FhAlPTjUdNjnMTp0wF8gBYFqL%2BWsaZrJuG42Brf4yuo%3D" rel="nofollow">https://www.processon.com/</a></td></tr><tr><td>draw.io</td><td><a href="https://link.segmentfault.com/?enc=%2BPc66wP7pU%2FSHhtLZxE6dw%3D%3D.qfjsbKcHblO3on0S%2BEiodboDTyxqIjLDRKQPM9uqMbY%3D" rel="nofollow">https://www.draw.io/</a></td></tr><tr><td>excalidraw</td><td><a href="https://link.segmentfault.com/?enc=uCC7y4uxfhGMfnB%2FfLlk%2Fg%3D%3D.dFmpOVO8lhG%2FCo0bfbCtRDq8hMoF7Pskgd29CRoEWTc%3D" rel="nofollow">https://excalidraw.com/</a></td></tr></tbody></table><h2>颜色搭配</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>中科院色谱的中国传统色</td><td><a href="https://link.segmentfault.com/?enc=9%2Frw4VdlK9H9dwelVs3P%2FQ%3D%3D.Ph296dWVmtNXuINdEYd62WBksmAHAkFe7KLobka%2FrKA%3D" rel="nofollow">http://zhongguose.com/#yuhong</a></td></tr><tr><td>在线快速配色生成工具</td><td><a href="https://link.segmentfault.com/?enc=rWn3b1e%2F%2Be1BmhAYiRcD0Q%3D%3D.AYeCTscqd533KahPaytnscCpEZ%2FIyNaov1Tg1%2Bwr%2FCQ%3D" rel="nofollow">https://coolors.co/</a></td></tr><tr><td>每天更新一组简洁舒服的配色方案</td><td><a href="https://link.segmentfault.com/?enc=6baSos5%2FmPbL%2BuMdzHdrUw%3D%3D.oRqiLICvjphXkxhvfwlZNsmCbyJuY4OyIdtWuCp1WlU%3D" rel="nofollow">https://colorhunt.co/</a></td></tr><tr><td>MaterialDesign强大的在线配色</td><td><a href="https://link.segmentfault.com/?enc=8cMTKW85NZnhVezSMadhCA%3D%3D.tzvMoYpw%2BqEQZ%2BhSMou2WkE%2F4GjK1kcx%2BMY26tfzFKDJk48BUd9HSxlv8FaBMt3M" rel="nofollow">https://www.materialpalette.com/blue/purple</a></td></tr><tr><td>通过网址获取分析网站配色</td><td><a href="https://link.segmentfault.com/?enc=rTCnnQw%2BpVWHBOaY3xdqpg%3D%3D.Cg%2FDyDldDg4gBsI7pm5w97uksc%2F2YDURV7pHq6yrlOo%3D" rel="nofollow">http://webcolourdata.com/</a></td></tr><tr><td>炫酷多边形背景色块生成</td><td><a href="https://link.segmentfault.com/?enc=NfcigE60iUfJttZiFCTGZg%3D%3D.qh5wsccYZnl52LgtRtFOJgcW4GqStaNeJGo8I9g%2Fq8o%3D" rel="nofollow">https://trianglify.io/</a></td></tr><tr><td>色彩搜索引擎</td><td><a href="https://link.segmentfault.com/?enc=uVEECIRsCeFI8O7OWnd0LA%3D%3D.ldo79OB5UkUyi1hhYwux4hP8OUqWN9Ckguz7laRMlNs%3D" rel="nofollow">https://picular.co/</a></td></tr><tr><td>流行的网格渐变背景免费下载</td><td><a href="https://link.segmentfault.com/?enc=bKJqcI2br3EruH5pRXJGlw%3D%3D.IBkHlofrnU6YnOFqEJyYgGAl5L5juQsCliDXinu0rhk%3D" rel="nofollow">https://webgradients.com/</a></td></tr><tr><td>上传并匹配提取图片风格的颜色</td><td><a href="https://link.segmentfault.com/?enc=GU2hk1wTjhAH1sJT%2F9%2FdaQ%3D%3D.pVmqq4%2FVBnoi45rS4W5ce%2F7SBzhA2Tg9kHguD9q1Ikc%3D" rel="nofollow">http://www.colorfavs.com/</a></td></tr></tbody></table><h2>开发思想</h2><ul><li><a href="https://link.segmentfault.com/?enc=%2B%2FTdXx3ipspG1G5UZkVm9Q%3D%3D.XnKivQ6IiH%2BTkEr0eAdvhz6V8xD%2Fm34QEojI7NYSP%2B27WB%2FxnDYwWdIYB%2B8d%2FAJ5oFqo8r777Y8UlMffMZGWrw%3D%3D" rel="nofollow"><strong>Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>hacker-laws:最常见的定律、原则等</td><td><a href="https://link.segmentfault.com/?enc=%2BBbseQgSevNZ1fV5NFI0SA%3D%3D.MADLudeb2pwRkJF1TpsZVqWAWnCY%2BQlRqxguVxZTNgf055bEPosB4fwkE8cXVJSw" rel="nofollow">https://github.com/nusr/hacker-laws-zh</a></td></tr></tbody></table><h2>技术社区</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>GitHub:高质量的内容创作和分享平台</td><td><a href="https://link.segmentfault.com/?enc=o3q6iouDgd3xX2VC%2BAt0gg%3D%3D.wy6Jpw1Lvb5gb3%2BvHy2972Yk6A6ROLFHApt9JDmpti0%3D" rel="nofollow">https://github.com/</a></td></tr><tr><td>stackoverflow:一个回答技术问题的网站</td><td><a href="https://link.segmentfault.com/?enc=a49d9yWmt5TizUSBFxZl3w%3D%3D.NkF42%2FQ0b2UhHK2MmSgPyIbku30bR1%2FNbYhgb6F0ItM%3D" rel="nofollow">https://stackoverflow.com/</a></td></tr><tr><td>掘金:目前来看,国内的很多优质前端文章,都在掘金上</td><td><a href="https://link.segmentfault.com/?enc=L3ZPMDXXUg55bDAc%2FcJT7Q%3D%3D.txXGo5X6Oz%2Fl%2BpTKUjjKBRqojWSdtLku9v4lx3hIwlE%3D" rel="nofollow">https://juejin.cn/</a></td></tr><tr><td>博客园:一个很纯粹的技术博客平台</td><td><a href="https://link.segmentfault.com/?enc=IQ3kf95m8UuxNxB3wBiZTg%3D%3D.Mg8JdaFqZ9095TtOu%2B9f9nnx3o%2BAOsBMT0b6YoqMDtQ%3D" rel="nofollow">https://www.cnblogs.com/</a></td></tr><tr><td>知乎:很多做技术的同学也开始玩知乎了,阿里的不少前端大牛在知乎上就非常活跃</td><td><a href="https://link.segmentfault.com/?enc=TWZxMr1f8021LYk5FrtA2Q%3D%3D.lOe2YcS%2FpX5i5zuEPwXPSKyUV3cQU3QyNTUmP4lz37U%3D" rel="nofollow">https://www.zhihu.com/</a></td></tr><tr><td>segmentfault:比较低调的技术博客平台</td><td><a href="https://segmentfault.com/">https://segmentfault.com/</a></td></tr><tr><td>CSDN:广告太多,但奈何你这么老牌</td><td><a href="https://link.segmentfault.com/?enc=G7lW%2FytqUKiu%2FUy2MIALXg%3D%3D.54jBjHhULaTA3F7234gu61WMphjzA%2FjS89sWpZtXZA4%3D" rel="nofollow">https://www.csdn.net/</a></td></tr><tr><td>v2ex:一个关于分享和探索的地方</td><td><a href="https://link.segmentfault.com/?enc=%2BKKv9wxu2nONiXq6I2nLRg%3D%3D.QoxllCz8AsazcVoUaNYfwOkK0bxd6Y%2F%2FqxpXJNDeUbM%3D" rel="nofollow">https://www.v2ex.com/</a></td></tr><tr><td>Node.js专业中文社区</td><td><a href="https://link.segmentfault.com/?enc=NIFWtkb3Uobt1crDHdlWAA%3D%3D.DF7vgZBGrM%2B2GFC7%2BcE6KZ5PQ%2BEtw5HJ7A04KOmHmWQ%3D" rel="nofollow">https://www.jstips.co/</a></td></tr><tr><td>JS技巧:每天推出一个JS技巧的网站</td><td><a href="https://link.segmentfault.com/?enc=0KA8ck2yvq0YhczjePTTFQ%3D%3D.6pUA9TQLyd8w%2FLBdqbQKzWm61rCTQkvso4E7c7lXXVA%3D" rel="nofollow">http://cnodejs.org/</a></td></tr><tr><td>W3cplus:是一个致力于推广国内前端行业的技术博客</td><td><a href="https://link.segmentfault.com/?enc=DjPI%2FL3Z0glYNIYbLNvs2A%3D%3D.K1C1N0KSeBg9Stl0xBEnbIHBtHBdbkpFa5MU79koFv8%3D" rel="nofollow">https://www.w3cplus.com/</a></td></tr><tr><td>印记中文:是最权威是技术中文文档社区</td><td><a href="https://link.segmentfault.com/?enc=owpGTqJcWz50O47o7m%2BDDQ%3D%3D.GdsagjTJaEidf2dPFmx12vi%2BrYvfGK%2BZ3Ie7KtqyKvc%3D" rel="nofollow">https://docschina.org/</a></td></tr></tbody></table><h2>博客团队</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>腾讯AlloyTeam</td><td><a href="https://link.segmentfault.com/?enc=r0gVaMzA8kIOXmA9N1Po7g%3D%3D.7AjJLBxt2CTToFTDyDfxfdyO8WgOsWdTtNhFkJb4K8E%3D" rel="nofollow">http://www.alloyteam.com/</a></td></tr><tr><td>腾讯社交用户体验ISUX</td><td><a href="https://link.segmentfault.com/?enc=EEQLpCKPedIhSX5PNGs3vg%3D%3D.CjVWAgnD8LsskHgWJHsBRh2nRm0YA9icgWtxskvpAl4%3D" rel="nofollow">https://isux.tencent.com/</a></td></tr><tr><td>淘系前端团队</td><td><a href="https://link.segmentfault.com/?enc=GxAVyD%2FA0Y5gTQ8zj9RuMg%3D%3D.yyisVGz1xb7oPNXtPvRsMTR4baIHTsOTsXBSPjHDqFY%3D" rel="nofollow">https://fed.taobao.org/</a></td></tr><tr><td>阿里巴巴国际UED</td><td><a href="https://link.segmentfault.com/?enc=fzSPusZZbaMcePj5dt60oQ%3D%3D.qgjklKlQpkh6SVmuE5TlMvsdl9DOqbYNhL0YihkTa3E%3D" rel="nofollow">http://www.aliued.com/</a></td></tr><tr><td>京东 凹凸实验室</td><td><a href="https://link.segmentfault.com/?enc=7jyzKCRjEVL5PM7Vo%2BV%2BHQ%3D%3D.k%2BOp%2FYWaBwasOTM8FGsRzLO9xmMW5nd3V7SlTLHKXhU%3D" rel="nofollow">https://aotu.io/</a></td></tr><tr><td>饿了么前端</td><td><a href="https://link.segmentfault.com/?enc=vfkqHVW%2FEAcg4nnUdFaYqQ%3D%3D.TBzd1J2vrLkGazuaHOSmDpSOg0Uu53tZoIx3eiN%2B02m%2FRE8e4i0PghxsLIKFnqyj" rel="nofollow">https://zhuanlan.zhihu.com/ElemeFE</a></td></tr><tr><td>百度前端研发部FEX</td><td><a href="https://link.segmentfault.com/?enc=d045ECVO2SZph%2BDpTJZNzg%3D%3D.WTgQw%2FA8TlyNIyxJyMbXu5pwsFsvOzUyR9SUhZBLU64%3D" rel="nofollow">http://fex.baidu.com/</a></td></tr><tr><td>360 奇舞团</td><td><a href="https://link.segmentfault.com/?enc=9JOqCZ9KddsnGq%2FBMO3I1g%3D%3D.rPluMJ4xCM4cdox6Zzycj7c4GEpZdzFUtxwkjW%2F36HY%3D" rel="nofollow">https://75team.com/</a></td></tr><tr><td>美团技术团队</td><td><a href="https://link.segmentfault.com/?enc=SKS%2B%2FoYYRluof78UIXI0tA%3D%3D.VezIEKu%2FF%2F7Z9DvlINx7WXUxbZV5Wng0RYwa3biCR3Y%3D" rel="nofollow">https://tech.meituan.com/</a></td></tr><tr><td>夜尽天明</td><td><a href="https://link.segmentfault.com/?enc=g8f0tk802F5XoGdQCYD4Tw%3D%3D.Gm8w2Wjq4AblyNgsJBnvzBgdzpsR6R5%2BbJPMdUAuvR9QdfTOEUquQ%2BXAbj7KbQiM" rel="nofollow">https://github.com/biaochenxuying/blog</a></td></tr></tbody></table><h2>GitHub 统计</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>GitHub 全球排名:这个排名很权威</td><td><a href="https://link.segmentfault.com/?enc=n9a62Pbo7zddIBkPRQ%2Bdvw%3D%3D.kVj%2FEQNfFsMe%2BsluCcniMP2mRfMUECZ%2B9Qx3%2FY5Nu4I%3D" rel="nofollow">https://gitstar-ranking.com/</a></td></tr><tr><td>GitHub 中文排行榜、高分优秀中文项目</td><td><a href="https://link.segmentfault.com/?enc=DBRYQwWECkfmYgTpVSSxOw%3D%3D.wrj2yCAM3pDRxtYdv%2FMwIAL6duBUC2hdWsz1z4Tanbl7QM%2FtGIWVZfNNMa0LdCvTZnJTFAJUQhmvyHCxo3tt4Q%3D%3D" rel="nofollow">https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts</a></td></tr></tbody></table><h2>前端大会</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Vue.js 开发者大会:Vue.js 开发者大会中国</td><td><a href="https://link.segmentfault.com/?enc=mEyf0FuFTzFK3KSZP7X7aA%3D%3D.z1uxLsxaUTWRPmka3DHA3X9pFZQbbCgwxjeXimwQgfE%3D" rel="nofollow">https://fequan.com/</a></td></tr><tr><td>中国 JS 开发者大会:一场专注于 JavaScript 和 Node.js 技术的国际性大会</td><td><a href="https://link.segmentfault.com/?enc=0HTmjtXd%2B7tRuzHaLOytlQ%3D%3D.tt9yYiH5tZ6%2BXz16XecWKxminQfiQlV9I9ruim%2Fm8wU%3D" rel="nofollow">https://jsconfchina.com/</a></td></tr><tr><td>中国 CSS 开发者大会:提高 css 开发姿势的大会</td><td><a href="https://link.segmentfault.com/?enc=roaM%2BmBejSmppXC2Y6pxEg%3D%3D.Ap7tiOGsHCvpD2IJRvmZoq4wiR6rrw4b9kYxXC%2Beq3M%3D" rel="nofollow">https://css.w3ctech.com/</a></td></tr><tr><td>D2 前端技术论坛:阿里巴巴举办,分享技术的乐趣,探讨行业的发展</td><td><a href="https://link.segmentfault.com/?enc=FDE%2F0Fm6%2F0PdDe3YtbPktA%3D%3D.LbkzZU4NhWWSoGI4gQ1JfnQ0j%2FmJgVXK2S0JzOPCoPk%3D" rel="nofollow">http://d2forum.alibaba-inc.com/</a></td></tr></tbody></table><h2>打包工具</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>NPM</td><td><a href="https://link.segmentfault.com/?enc=TqE%2B9ntGVHHRypDBHJEeQA%3D%3D.n1bSZeyMYvcbx5M5%2FIAt5SCNwxRmoZ0CkUjF8SahAcA%3D" rel="nofollow">https://www.npmjs.com/</a></td></tr><tr><td>Yarn</td><td><a href="https://link.segmentfault.com/?enc=yVfdd3AJa4Hbit6PSzv78w%3D%3D.ZAqOAH9%2BThhftVycIQcYpl2%2BELweDO0QEY5yjNiXYuU%3D" rel="nofollow">https://yarnpkg.com/zh-Hans/</a></td></tr><tr><td>Webpack</td><td><a href="https://link.segmentfault.com/?enc=VDqgjl81ntgEEIr2YaEa%2BA%3D%3D.i9RxBbA3fEKhRMYBh6IE0XSf%2Fhv8SAGDXws5WiK9ssk%3D" rel="nofollow">https://webpack.js.org/</a></td></tr><tr><td>Gulp</td><td><a href="https://link.segmentfault.com/?enc=6wqLyzigo5hImJzMcAdDHg%3D%3D.smc24QH01zxg0Qsqc3YX1h5ffolZRmc40vLWBddFB30%3D" rel="nofollow">https://www.gulpjs.com.cn/</a></td></tr><tr><td>Babel</td><td><a href="https://link.segmentfault.com/?enc=EfokmjQOP8SrOrQQ0qZftQ%3D%3D.iWBtjCum8jPTWKRwAMTJooNoxbQGlA0dS27u%2FyWzsPg%3D" rel="nofollow">https://babeljs.io/</a></td></tr><tr><td>ESLint:可组装的 JavaScript 和 JSX 检查工具</td><td><a href="https://link.segmentfault.com/?enc=wz%2By51Of55H9CncwNx3bww%3D%3D.FrUaA1I%2Bkyb7CNdFh8GPS4iZFmk7myJ%2F5CDYI%2F3cHUk%3D" rel="nofollow">https://cn.eslint.org/</a></td></tr><tr><td>PostCSS:用 JavaScript 工具和插件转换 CSS 代码的工具</td><td><a href="https://link.segmentfault.com/?enc=Dvs7m3XbVK%2B20kYsFt28Nw%3D%3D.W2EgH%2FiseynixYRRMnowUvsTP7Mkd2t%2F2ixOJ3emQ%2Bg%3D" rel="nofollow">https://www.postcss.com.cn/</a></td></tr><tr><td>rollup: 打包 npm 库</td><td><a href="https://link.segmentfault.com/?enc=5C6lPMEMT3VubCZiFiUD9g%3D%3D.pmjXKgQv1DOl%2FR%2B5vHMqIiT5KY2cw30g6%2BKmIOptHFDgaxgB8IJGJ9QN0HSgM3Is" rel="nofollow">https://github.com/rollup/rollup</a></td></tr><tr><td>parcel: 和 webpack 类似的打包工具</td><td><a href="https://link.segmentfault.com/?enc=xae1oeMmDuf%2Fmbksgmc7sg%3D%3D.juzDwMVeIrP3SiCKHHnlFyy456J7S%2BUNs16TacbZckP2F56RkEe9t9Coyfh62qjc" rel="nofollow">https://github.com/parcel-bundler/parcel</a></td></tr><tr><td>systemjs:针对一些特殊场景会比较有用,比如云 ide,支付宝小程序 IDE 等</td><td><a href="https://link.segmentfault.com/?enc=75nDcOG%2FEpAfNXf1FFr3wQ%3D%3D.bgen5TE7c2tO%2BPn1H24siDqbUHCTxEowMj4gpSeUqBaJm9U1BcuaaVM3I728FzJi" rel="nofollow">https://github.com/systemjs/systemjs</a></td></tr><tr><td>microbundle:基于 rollup,简化配置</td><td><a href="https://link.segmentfault.com/?enc=ZXiUyyvJLZet0b5XySSukQ%3D%3D.eDi7DIRX3RxeF6iyEqQeB0oxEkXLnrSXSl5UJ%2B8o79KrNadJIpGbTrhdaqGNJ7fM" rel="nofollow">https://github.com/developit/microbundle</a></td></tr><tr><td>bili:基于 rollup,同上</td><td><a href="https://link.segmentfault.com/?enc=WyJD7fjjVOEclDooSvJcZQ%3D%3D.keq%2BGuDN%2BR%2B6ed%2BQHBebqGSysFPmw8kq4UI%2BKsEn8eA%3D" rel="nofollow">https://github.com/egoist/bili</a></td></tr><tr><td>vue-cli:vue 命令行工具</td><td><a href="https://link.segmentfault.com/?enc=mxYA4CJZzrTDzlkSD926QA%3D%3D.BRJbmFeVWlkjZjBJbRX9ESj6g5avAUFoooO7OAgNDvHCS4GsZFLwDH9QI%2F6uhxHU" rel="nofollow">https://github.com/vuejs/vue-cli</a></td></tr><tr><td>create-react-app:react 官方脚手架</td><td><a href="https://link.segmentfault.com/?enc=b75aO6zXM%2B9IovPVLdNgTA%3D%3D.nAkBIDq9HEIhcF1lFy2l5kSYuGKsiuA2Dgqgkyzh7b4lkCKaMrS%2BLFcWTD4M%2B%2BVY" rel="nofollow">https://github.com/facebook/create-react-app</a></td></tr><tr><td>prepack:通过预先执行的方式优化打包结果</td><td><a href="https://link.segmentfault.com/?enc=a6uCg5euZrEdHA44bwbRPg%3D%3D.m4A2BYcIKPug8ttdWPU6zlqX7kuXUgxP0XcOrFg5gL7PyGW9rtKwMyY15Afdu%2BIz" rel="nofollow">https://github.com/facebook/prepack</a></td></tr><tr><td>swc:基于 rust 的语法转换器,babel 的竞争者</td><td><a href="https://link.segmentfault.com/?enc=L1QIbDGjVu0OHwJlZoudSg%3D%3D.RPANEgptPnmigKIPNRhChVcevw0%2BPDTgFjtzXrFwNIPCxHvkgXXGAF%2FM2M7xck6x" rel="nofollow">https://github.com/swc-project/swc</a></td></tr><tr><td>nathan/pax:基于 rust,据说是这个星球最快的 JavaScript 打包工具</td><td><a href="https://link.segmentfault.com/?enc=mJp%2BVhDrztLyZ1bF%2FgdnGQ%3D%3D.YdjZKsaMpCnWH8LBK7oA%2BxobPIJw8Z0HE%2FGeZrGQnYo%3D" rel="nofollow">https://github.com/nathan/pax</a></td></tr><tr><td>pikapkg/web: 浏览器里跑 npm 依赖,面向现代浏览器</td><td><a href="https://link.segmentfault.com/?enc=Z2wzqEYvhIeHQ39MnkCz8g%3D%3D.YJJtRgySZSVfFZyv%2BYE8xey4q98p1llnMISj4lvyxXk%3D" rel="nofollow">https://github.com/pikapkg/web</a></td></tr><tr><td>lebab/lebab:把 es5 代码转成 es6,反向 babel</td><td><a href="https://link.segmentfault.com/?enc=Eg7FZKKvRlcF%2FiB%2BVQOIXQ%3D%3D.8qtlLsKxfa0TsQ0EltdXeFjrdoVY1sWMy243mJLA1GA%3D" rel="nofollow">https://github.com/lebab/lebab</a></td></tr><tr><td>snowpack:现代Web的更快打包工具系统</td><td><a href="https://link.segmentfault.com/?enc=Ds8bPQOiYGqzfW2ZrVI6hg%3D%3D.MqDOibvmIzdo18N2%2FXmr06illC1YoGA5FN9ki706iEbpG3yvvSjp%2FuqZ50gwm1D0" rel="nofollow">https://github.com/pikapkg/snowpack</a></td></tr></tbody></table><h2>代码托管平台</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>coding:代码托管平台</td><td><a href="https://link.segmentfault.com/?enc=dy73FifJuNQ4YF5rAY4N2w%3D%3D.gVydJZKip1GY2HI8n4LwI3w8C%2BOHLac0SUyFR7%2Bgh28%3D" rel="nofollow">https://coding.net/</a></td></tr><tr><td>码云:代码托管平台</td><td><a href="https://link.segmentfault.com/?enc=X7iCe9%2Ba%2FXGL4tuEckXvAA%3D%3D.HRVLXZx7r%2F9z5OupbltF3d%2BQUOOf4HQrcMJFT9bozK4%3D" rel="nofollow">https://gitee.com/</a></td></tr><tr><td>github:代码托管平台</td><td><a href="https://link.segmentfault.com/?enc=MjZa%2BqfgcQD%2B7N0RVkA%2FuQ%3D%3D.euWz36%2B0%2Fe09jEJiKiHsQjpZye2OCHttRocK6%2FT%2BipA%3D" rel="nofollow">https://github.com/</a></td></tr><tr><td>SVN:代码托管平台</td><td><a href="https://link.segmentfault.com/?enc=JtT64CwTPb%2FtJlqwUBzWEw%3D%3D.pqarexMZwcsSI2OgDVFWJrutX9Gg52uWfcATupTQstgXFYJdCklSgeyTwU4isn7c" rel="nofollow">https://svnbucket.com/?ADTAG=bdss#/</a></td></tr><tr><td>SVN:代码托管中心</td><td><a href="https://link.segmentfault.com/?enc=FkTb7pPeKI8wSG6Q3LV7PA%3D%3D.XnoyCtYraqmxLZMWLHRkGHS0xYAPfGTRRA9Btqko4GQ%3D" rel="nofollow">http://www.svnchina.com/</a></td></tr><tr><td>git:官网</td><td><a href="https://link.segmentfault.com/?enc=xvN2axaBNygV24maV8%2BzDw%3D%3D.%2BJzTOyP7xEGrRGp%2FEOL6s5gzbOrjKQ5zvKWzsgn54fw%3D" rel="nofollow">https://git-scm.com/</a></td></tr><tr><td>阿里云</td><td><a href="https://link.segmentfault.com/?enc=RKWQp9HAWyXMoOapWqO35A%3D%3D.D50EyX7FuHuiDqYriZY9JQFnTemPAncj1Ev82Xawq6Y%3D" rel="nofollow">https://www.aliyun.com</a></td></tr><tr><td>腾讯云</td><td><a href="https://link.segmentfault.com/?enc=46FNLgF59xE86AGLgHuCvQ%3D%3D.vJliye85A8kZNN4XBNcFIjNliPWYOzw8RcqztNXhQR0%3D" rel="nofollow">https://cloud.tencent.com/</a></td></tr></tbody></table><h2>调试抓包</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>whistle:代理抓包工具,很好很强大</td><td><a href="https://link.segmentfault.com/?enc=jdNBeAZgCpyAenzMdBeZpw%3D%3D.Ws6vky1nuhmM1K7v6SWA1Qq1vMRnxdP%2FYlr8LO30XTs%3D" rel="nofollow">https://wproxy.org/whistle/</a></td></tr><tr><td>Easy Mock</td><td><a href="https://link.segmentfault.com/?enc=PTUJi3sWurNwrL6B35Xd8Q%3D%3D.dm2lwIlC1CwRgrvKASZ6vxB%2Fl5HDA%2FRI%2B9fA2sBQkKY%3D" rel="nofollow">https://www.easy-mock.com</a></td></tr><tr><td>Fiddler:代理抓包工具</td><td><a href="https://link.segmentfault.com/?enc=tI9N10WWfsw8rmC5dAtK2Q%3D%3D.kmYS8p1k6llsWarZjohl6UluCWY7KO52gNd46csxxGo%3D" rel="nofollow">https://www.telerik.com/fiddler</a></td></tr></tbody></table><h2>开发工具</h2><ul><li><a href="https://link.segmentfault.com/?enc=OZek0HuS7AO89xH0%2BLdFUw%3D%3D.fOvt6tS1AEVVQKhXZwRaGdjNDzc%2F%2FL3IAtUw4vTOfndtqPK2IE3XXX9BlZJb80grcS10YLXxjmilyxwIO1HzVw%3D%3D" rel="nofollow"><strong>推荐 12 个提升程序员软技能与效率的必备工具,爱了爱了 👍</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>VS Code</td><td><a href="https://link.segmentfault.com/?enc=jddvCPhMjdceIruLGyZqlQ%3D%3D.wUnnqeF3sNgS7UMj4Wq5YMsSb%2BORSkt%2FJk3cJrJ2g%2BM%3D" rel="nofollow">https://code.visualstudio.com/</a></td></tr><tr><td>Sublime Text</td><td><a href="https://link.segmentfault.com/?enc=kqH9OlL%2BtNoi3WPoQQX1hw%3D%3D.NzVN6P%2BCbYcw9jI%2BLnBoJB7lz6qAK1QYAyOkXKPSMy0%3D" rel="nofollow">https://www.sublimetext.com/</a></td></tr><tr><td>WebStorm</td><td><a href="https://link.segmentfault.com/?enc=HfhEz8RrcSoenAT1aPqciQ%3D%3D.3AFYXNMBxWodRywY0aAZ59x4JLV9pO%2FPZOrlRxUoCElsUUx8txk46UB3mNdch%2Fkm" rel="nofollow">https://www.jetbrains.com/webstorm/</a></td></tr><tr><td>Atom</td><td><a href="https://link.segmentfault.com/?enc=k22zwSeie0HsXchEmM5yyw%3D%3D.TcjQhO%2FV%2F7M5F0Orrt3vUlQsc7u%2BpXKMVIUcfuto9uY%3D" rel="nofollow">https://atom.io/</a></td></tr></tbody></table><h2>录屏工具</h2><ul><li><a href="https://link.segmentfault.com/?enc=3UYjV7vwpM4fW9lA0u2QdA%3D%3D.Fc3NOMIJyr3fn5rOgMfB%2BLa7%2BcB6OqEn7bJ%2F1WJeEbVhFtsgbblfMWETTFizS3%2BCRySeAjPj0zM%2FOzSdtW%2F86Q%3D%3D" rel="nofollow">推荐 GitHub 上很火的录屏工具,秒杀 33 种同行工具</a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>screenity</td><td><a href="https://link.segmentfault.com/?enc=lXuHVU48mDtfa29Bv6tYTw%3D%3D.qs2qriprcW6ayH%2BUnDWXIVItM0ubi9mJfyDfZuOkSKmzfpxUgH9W%2B04%2F4vd9gMpA" rel="nofollow">https://github.com/alyssaxuu/screenity</a></td></tr></tbody></table><h2>买房实用指南</h2><ul><li><a href="https://link.segmentfault.com/?enc=b8fdTq0Ub07UwLaP99vpCg%3D%3D.N5Iz0uhGOIjJi4JvkiScboq%2B4Wa6X7xj38QPitka%2F4KL%2B9EOht8oGjlJaStZHGIH%2BDxcjw8WHUyDQzSt4GOp2A%3D%3D" rel="nofollow">推荐 2 个 Github 上超火的程序员买房必备实用指南!</a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>hangzhou_house_knowledge: 杭州</td><td><a href="https://link.segmentfault.com/?enc=5g%2FTxDNA38L%2FnmOi6GnYeA%3D%3D.PxN8vk6vxYI2ougClyiQW6mwZDw0KEObDgc59yMIyvmUDG%2B%2B2JyOtE7FkfWxOV%2B%2FBAqj7ntwPMYCdnn9XGh13g%3D%3D" rel="nofollow">https://github.com/houshanren/hangzhou_house_knowledge</a></td></tr><tr><td>hangzhou_house_knowledge:上海</td><td><a href="https://link.segmentfault.com/?enc=eY1knyVWU8pDOR1%2BztxW3A%3D%3D.CygC3lxr0ASAUYq2tjd6VjdTpLKFC6GTFfFwT7KNfDNDKDvl%2FwvELB%2FobzYSBuZo1kkkssQOlDQ7misZRj6snQ%3D%3D" rel="nofollow">https://github.com/ayuer/shanghai_house_knowledge</a></td></tr></tbody></table><h2>优质的前端博客</h2><table><thead><tr><th>公众号</th><th>作者</th><th>微信</th><th>地址</th><th>简介</th></tr></thead><tbody><tr><td>全栈修炼</td><td>夜尽天明</td><td>CB834301747</td><td><a href="https://link.segmentfault.com/?enc=e9C1%2Bhf%2Bw%2BRUYa%2B4BfSOjg%3D%3D.J5SAToTi%2BBhcF8A0MSPHg3YQVX%2BeR6rq1JdZXzO0xQNwoCFOsi7PY7tK5cnlcINn" rel="nofollow">https://github.com/biaochenxuying/blog</a></td><td>分享大前端开发相关的技术文章,热点资源,全栈程序员的成长之路</td></tr><tr><td>前端下午茶</td><td>SHERlocked93</td><td>qianyu443033099</td><td><a href="https://link.segmentfault.com/?enc=gHTBn0INt%2FaiH0G9Q%2BaOHQ%3D%3D.uIv8vP7AfShBVWca3LujwW5d5lyHh5b2MelMNW1PGosHO2sGD8I1VJ2E1KbzVnpJ" rel="nofollow">https://github.com/SHERlocked93/blog</a></td><td>分享前端相关的技术博客、精选文章,期待在这里和大家一起进步!</td></tr><tr><td>前端UpUp</td><td>天天</td><td>DayDay2021</td><td><a href="https://link.segmentfault.com/?enc=7pGWX1Smru6jG1a9cE8l9w%3D%3D.J24EhFxD987MSuZcEPlkOov3NgPS%2B6GkwWOS%2BqgaNsuHx1VOsKD%2FH67SYs7nNct16oRTidFa%2F4LiqWI8tWMZLg%3D%3D" rel="nofollow">https://github.com/daydaylee1227/leetcode-Algorithms</a></td><td>leetcode算法相关的,从0到1刷leetcode。</td></tr><tr><td>前端从进阶到入院</td><td>ssh</td><td>sshsunlight</td><td><a href="https://link.segmentfault.com/?enc=KuhcYD3sbR1VuEhMSuXn4Q%3D%3D.RUfPokFpvYh9uC1X%2FEegGIqfOz0rJ88mbCOF5SugwvAV5g8ewBEQWboRppdwC8xY" rel="nofollow">https://github.com/sl1673495/blogs</a></td><td>📖全网 100w+ 阅读量的进阶前端技术博客仓库,Vue 源码解析,React 深度实践,TypeScript 进阶艺术,工程化,性能优化实践……</td></tr><tr><td>iCSS前端趣闻</td><td>Coco</td><td>coco1s</td><td><a href="https://link.segmentfault.com/?enc=%2BnlwQHKUPkxqzRG05Tr5uw%3D%3D.a56y2PdN0OfcnfxXhHEjg%2FhKKJ113dSbVoVT5Ue3Ul%2B9UChSnr2q7938vfRaZ9gz" rel="nofollow">https://github.com/chokcoco/iCSS</a></td><td>9300+ Stars 的 CSS 仓库,各种 CSS 奇技淫巧,在这里,都有。</td></tr><tr><td>若川视野</td><td>若川</td><td>ruochuan12</td><td><a href="https://link.segmentfault.com/?enc=%2BIvldFJcG03UU%2BwsBv3dsw%3D%3D.qs4v7bcDirJpDnKJw7rvC8qckpo9zJENqCw4z5Y6jDND2CpqYXQLmOAnWNQoet50" rel="nofollow">https://github.com/lxchuan12/blog</a></td><td>学习源码整体架构系列多篇,前端面试高频源码</td></tr><tr><td>前端布道师</td><td>苏南</td><td>su-south</td><td><a href="https://link.segmentfault.com/?enc=5KfPIT6d%2B8OpB%2F6QR7U2gw%3D%3D.TCshjVrGljeTddGk1cUaDp9Rtk8NzDIu%2FL4HtIhbY%2B2oyU2lm5RNd3J20fKvMKLy" rel="nofollow">https://github.com/meibin08/comics-program-life</a></td><td>一个用漫画演绎程序员日常轶事、分享前端前沿技术、大厂面经与干货的公众号,号主是个爱画画的前端切图崽,热爱代码的同时,也希望用漫画的形式让更多了解程序员。</td></tr><tr><td>秋风的笔记</td><td>秋风</td><td>qiufengblue</td><td><a href="https://link.segmentfault.com/?enc=sFiNz4brRARxvS3vgGjCRA%3D%3D.R3oyOSxdfsxippaQooKfs42%2FBnLNAlLdNGJNUAkjHre8NrT%2Fg4FEU3hkZYEXAbfY" rel="nofollow">https://github.com/hua1995116/vuepress-blog</a></td><td>分享工程化、开源知识、有趣的前端知识。</td></tr><tr><td>前端食堂</td><td>童欧巴</td><td>hungryturbo</td><td><a href="https://link.segmentfault.com/?enc=BLukAUhP%2FLN9b91IZenODA%3D%3D.OTrWNBkXV2rD69arp9khzI%2BTMeF7mNGzTt3QA8d5yNVis36RCY1s%2Fy2AFuDy5rcl" rel="nofollow">https://github.com/Geekhyt/front-end-canteen</a></td><td>你的前端食堂,吃好每一顿饭🍥</td></tr><tr><td>深圳湾码农</td><td>Rock</td><td>ruanxiongbiao</td><td><a href="https://link.segmentfault.com/?enc=xmoJfzxW40e1zH7QZaNgdQ%3D%3D.NYjXQMxM6Eb9UHov%2ByLDuqMNYcKce7hZsXr82bxROvSDQxC%2FgloA2%2FCK6Sl1ZdxF" rel="nofollow">https://github.com/qappleh/Interview</a></td><td>分享BAT大厂面试题,每天攻破一道题,带你从0到1系统构建web全栈完整的知识体系!</td></tr><tr><td>进击的大前端</td><td>蒋鹏飞</td><td>ffx313</td><td><a href="https://link.segmentfault.com/?enc=LVQZeeGlhJMgk1aClWnjaQ%3D%3D.F53ZuN5NuRf%2FgEVkGWeQXDj%2F2Fg4uR47RIpQB9YdDRK3%2BW1bNyjbGeuky5uIXvuq6Vo3EGDOStSkM6xzo5i%2FtA%3D%3D" rel="nofollow">https://github.com/dennis-jiang/Front-End-Knowledges</a></td><td>成体系的前端进阶知识</td></tr><tr><td>小鹿动画学编程</td><td>小鹿</td><td>lxq17853556107</td><td><a href="https://link.segmentfault.com/?enc=uaCmHsfvoZYC%2FWUv5kKVyw%3D%3D.AVzHg41wTw9eInIRxDovyprn1ZcXn2hzfDSTk9bodfmwP4iabyd9znTG5oBWBIjE" rel="nofollow">https://github.com/luxiangqiang/Blog</a></td><td>全Github唯一动画仓库,用动画的形式把前端技术讲的淋漓尽致!也包括自己整理的前端面试和进阶文章分享,欢迎关注哦!</td></tr><tr><td>编程如画</td><td>大鹏</td><td>aaron875499765</td><td><a href="https://link.segmentfault.com/?enc=1tKUiZ1cFwZfhBxu7OtwqA%3D%3D.mFSU1D%2FT%2BaC%2F3Z0s2TEHW18IRtsfhNdQx7%2F3o5OQIdBRx%2Fu0xVaRLAijeSG0RKD4" rel="nofollow">https://github.com/guanpengchn/blog</a></td><td>全网最特别的画解算法,mdnice作者官方博客</td></tr><tr><td>前端思维框架</td><td>ViktorHub</td><td>viktorhub</td><td><a href="https://link.segmentfault.com/?enc=UWAaylfzbLIcaRS0PJLk6w%3D%3D.YkOKd8%2Fqx71%2FZVvqGJDlXQp2xy3GP178fwyQ3LUbsjkqLt8ygPGfLXqyXOoKg0mr" rel="nofollow">https://github.com/ViktorWong/my-docs</a></td><td>建设Web全栈数字图书馆,揭秘Web全栈架构师,打造个人核心竞争力。</td></tr></tbody></table><h2>图标</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Font Awesome:网站开发最流行的图标集</td><td><a href="https://link.segmentfault.com/?enc=hepjV5oWxzOSt1OupESQNg%3D%3D.DVK1EBaUd3TU4IZNQOsXhuuaDBwIrDO%2FWCpNnNdn0f0%3D" rel="nofollow">http://www.fontawesome.com.cn/</a></td></tr><tr><td>Feather:简洁美观的开源图标</td><td><a href="https://link.segmentfault.com/?enc=SqN0ydCYriU5oTghVIqzQg%3D%3D.j59s6IzzztuevxTvrUD0jcr4COF4tzOef9WVLyXgi2c%3D" rel="nofollow">https://feathericons.com/</a></td></tr><tr><td>Ionicons:精心绘制的开源图标</td><td><a href="https://link.segmentfault.com/?enc=NK6%2FnY6wNf1NDAa8KLbeZQ%3D%3D.zQNCymM%2F1aJ7Lb9419yORVXVtTBa%2BXIeNUuoyJ9smbM%3D" rel="nofollow">https://ionicons.com/</a></td></tr><tr><td>Simple Icons:常见品牌的 SVG 图标:轻快、精美的符号图标,包括常见操作和事项</td><td><a href="https://link.segmentfault.com/?enc=O5FDvffvRN5dW4yw%2FF8GRQ%3D%3D.aJjX2VNe2VFJGrNsGGahfzCNRIoF9QXtav%2FumI8%2F2Dk%3D" rel="nofollow">https://simpleicons.org/</a></td></tr><tr><td>Material Design Icons</td><td><a href="https://link.segmentfault.com/?enc=UovcMCowKsBnE8vGBrYOcQ%3D%3D.zRu%2BZ6Z%2F7sQ3CTGV2khhW6JWT%2F4NLQcIZFVHHiUyu2Fm54qqTfPZetclZFg3gYEF" rel="nofollow">https://material.io/resources/icons/</a></td></tr><tr><td>Tabler Icons:681 枚可定制的开源 SVG 图标</td><td><a href="https://link.segmentfault.com/?enc=A2lEEEaRGWf5gWUrS1VOBQ%3D%3D.n0phjOoEH83n8UE36z6UnB%2BG2KWsRacIymGKgThW6G8%3D" rel="nofollow">https://tablericons.com/</a></td></tr></tbody></table><h2>色彩</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Material Design Colors</td><td><a href="https://link.segmentfault.com/?enc=7sLrCBjBXg4aN304%2FiNU3g%3D%3D.6DaI6A7kXNg78%2Bdtlbsjj9TcUS9OmJgZpqbcI4E%2B0ExE6rHRhvtUVPa%2F3F5%2Bp7DS" rel="nofollow">https://www.materialui.co/colors</a></td></tr><tr><td>Flat UI Colors:14 组配色、280 种颜色</td><td><a href="https://link.segmentfault.com/?enc=1cC5i8cdTKDbJZdipbjhDA%3D%3D.6U6xOCyGC%2BwgzwF8cuUJjmZkjRm63ytL99cjiaODImc%3D" rel="nofollow">https://flatuicolors.com/</a></td></tr><tr><td>Color Hunt:分享色彩搭配的自由开放平台,包括成千上万人工选取的配色,可以从中获取配色的灵感</td><td><a href="https://link.segmentfault.com/?enc=25VhoBew043OrMlCb5xfew%3D%3D.cPf6CSM0Fr7m%2BPlqRAma%2F38imEFQgrgJu9F4vbplEDY%3D" rel="nofollow">https://colorhunt.co/</a></td></tr><tr><td>Color Space:配色方案、CSS 颜色渐变生成工具</td><td><a href="https://link.segmentfault.com/?enc=TRPJ2uq6fosY7wnW29DNcg%3D%3D.3hFjPbYiEk1mVPplRRVyf1PLQr5yH1SyjMS5Scwp5Ow%3D" rel="nofollow">https://mycolor.space/</a></td></tr><tr><td>uiGradients:美观的颜色渐变</td><td><a href="https://link.segmentfault.com/?enc=bF1rznrjnbk%2F1yavrDkKzA%3D%3D.XEn1SrVYeyHbmCH1wqrORyza1Yix4U7jiHUUOAUFqcc%3D" rel="nofollow">http://www.uigradients.com/</a></td></tr><tr><td>Colors and Fonts:色彩和字体工具</td><td><a href="https://link.segmentfault.com/?enc=oeasyLEyEqrOIZUZl%2ByiXw%3D%3D.4yVpU7NTq1uUcmKbLQCfYreGv%2BHoU%2BIVYkKmNei%2BSxQ%3D" rel="nofollow">https://colorsandfonts.com/</a></td></tr><tr><td>Coolors:配色方案生成工具</td><td><a href="https://link.segmentfault.com/?enc=P8qu8dnhClwkdDXbN0XQ4g%3D%3D.znkLpJxLjOzfaYQwzxdDtHRXyfwb3B6TuroriUpOa%2B0%3D" rel="nofollow">https://coolors.co/</a></td></tr></tbody></table><h2>插画</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Undraw:持续更新的精美的 SVG 插画集</td><td><a href="https://link.segmentfault.com/?enc=KG6s1WQHFz0%2Bd0OKexjq2w%3D%3D.SdAA7%2BKECLAWBUPxOUJTOyCywUJMDvYewGRaJCa6IHc%3D" rel="nofollow">https://undraw.co/illustrations</a></td></tr><tr><td>manypixels:免费插画集</td><td><a href="https://link.segmentfault.com/?enc=h3mQLudGDdsv2lbBOGORiA%3D%3D.lpPoMVWLo%2B3x52ivdiqyb9EHxRIeNVqfj6ET2WOS3go%3D" rel="nofollow">https://gallery.manypixels.co/</a></td></tr><tr><td>IRA Design:通过调配渐变色、搭配手绘组件定制插画</td><td><a href="https://link.segmentfault.com/?enc=JQF6XWouHaIj43%2BScZdaEA%3D%3D.WBgWUzAaKqROnPL0YeDCLwQG0xWILeaGC9kGi9NWF937FLl9UlH8gL0kr7Y8Pbhh" rel="nofollow">https://iradesign.io/gallery/illustrations</a></td></tr><tr><td>Free Illustrations by Lukasz Adam:免费 SVG 插画</td><td><a href="https://link.segmentfault.com/?enc=cG2BiPjbp4Fsinzl0ZGenA%3D%3D.QplCCuE%2F6DaxDUzDycDBNrzPjLwOYenPHCDPkyKeUjV1akWsyQIS57HOcX7vhmgE" rel="nofollow">https://lukaszadam.com/illustrations</a></td></tr><tr><td>Blobmaker:在线 SVG 形状生成器</td><td><a href="https://link.segmentfault.com/?enc=LyRWQIOoJkHNVceqKzr4gg%3D%3D.6IQ2BVtD9K3ffKJO%2FnTH4oMl%2FYNCi%2FXlO0%2Fs8m8f044%3D" rel="nofollow">https://www.blobmaker.app/</a></td></tr><tr><td>Get Waves:在线 SVG 波形生成器</td><td><a href="https://link.segmentfault.com/?enc=TH0pcyNNtv2oxW76GlvOTA%3D%3D.LgYJzRBuRMJYRPv0dmA4WHhs1cDxi72LHSbFAtnd%2BFE%3D" rel="nofollow">https://getwaves.io/</a></td></tr></tbody></table><h2>图片</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>Unsplash:可供免费使用的图片</td><td><a href="https://link.segmentfault.com/?enc=Dv2Z8wjWN%2BIOOH1ms0jJiQ%3D%3D.RFr7Yebi85Yv6xpD%2F4EElOgVA23DwVLgBtcyuDT9duc%3D" rel="nofollow">https://unsplash.com/</a></td></tr><tr><td>Pexels:精美的免费图片和视频</td><td><a href="https://link.segmentfault.com/?enc=G%2BM5iSoNDfL9JJwo%2FJioig%3D%3D.l9MkK6XKqJ%2FTzzDjNuK%2Fbv1pTwlVokN1%2BuAPfQmBspY%3D" rel="nofollow">https://www.pexels.com/</a></td></tr><tr><td>Burst:免费高分辨率图片,可用于网站和商业用途</td><td><a href="https://link.segmentfault.com/?enc=sV2B3d5hCRd0h7p6s9z%2B8Q%3D%3D.0%2FnrqyEVEpBR5IMU1FUsghLhfB3qkBQOt6ABwSY%2FOxM%3D" rel="nofollow">https://burst.shopify.com/</a></td></tr><tr><td>ISO Republic:使用 CC0 许可的免费高分辨率图片和视频</td><td><a href="https://link.segmentfault.com/?enc=TzPxFav%2FYBt1%2BbkNvg5gow%3D%3D.8HWrlPOOIztBdBoq7WlU4%2BypPDFsFuMfaTujIqDLIW0%3D" rel="nofollow">https://isorepublic.com/</a></td></tr><tr><td>Pixabay:令人惊叹的免费(公共领域)图片和视频站点</td><td><a href="https://link.segmentfault.com/?enc=DOdRCWGl1S6NzKqW2EaLWQ%3D%3D.tUucUl9SoMYlfwDPeFy1s9JiEGZXKFTqrx9JnHfQT8Q%3D" rel="nofollow">https://pixabay.com/</a></td></tr><tr><td>StockSnap:精美的免费图片,同样使用 CC0 许可</td><td><a href="https://link.segmentfault.com/?enc=SluT2LG5Qx628hNVtwNRKQ%3D%3D.9TlIDM%2Bz85%2FYOMXad9iNaEt16YEhxYbapK5SQYnZENw%3D" rel="nofollow">https://stocksnap.io/</a></td></tr><tr><td>Photopea:在线图片编辑工具,支持大量高级功能</td><td><a href="https://link.segmentfault.com/?enc=TjYKGPuH1zon5jzz2Rg46Q%3D%3D.6rnwacwCbMEw1UvrGjTrWB1ibwAayN7X48xqConcoAY%3D" rel="nofollow">https://www.photopea.com/</a></td></tr><tr><td>Online Image Compressor:在线图片压缩工具,一次可以压缩多达 20 张图片</td><td><a href="https://link.segmentfault.com/?enc=E8MeVqnjW3jD9djh%2FG2ZrA%3D%3D.7Rhj3o8sMz5oHWv2k%2BQcFsMZI5neUumHbySw1JSgBf0%3D" rel="nofollow">https://imagecompressor.com/</a></td></tr><tr><td>Bulk Resize Photos:最快的在线图片缩放工具(图片缩放和压缩在本地完成,无需上传到服务器</td><td><a href="https://link.segmentfault.com/?enc=VvhmsjVSNRGxuu67vGMZ2Q%3D%3D.FDw5156pZemHYzUNFS6JlORs3SNkEzDOzzTnaXNHjIc%3D" rel="nofollow">https://bulkresizephotos.com/en</a></td></tr></tbody></table><h2>设计工具</h2><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>墨刀:原型设计工具</td><td><a href="https://link.segmentfault.com/?enc=o8ADdWAq8e1hnHlQLH41yg%3D%3D.dFCUllAGIRoi8Kng48yq%2FrH3c%2F9Tea93FKuSFi2y2bs%3D" rel="nofollow">https://modao.cc/</a></td></tr><tr><td>蓝湖:一款产品文档和设计图的在线协作平台</td><td><a href="https://link.segmentfault.com/?enc=QjOcriQBSChjrVpnIXg%2BGw%3D%3D.7mwUgX%2FESdtLqW2RphuDD%2BNdpAXmtfZcbEnd1gxfWo4%3D" rel="nofollow">https://lanhuapp.com</a></td></tr><tr><td>PxCook(像素大厨):高效易用的自动标注工具</td><td><a href="https://link.segmentfault.com/?enc=3FLs8qXZ1UhKiPp06OlypQ%3D%3D.PZAKqJBYWjLpImi%2FaW71qH9sKeC6oDFGCr7OeewuA51Wac6RMKwTYqtrMSdMq9DC" rel="nofollow">https://www.fancynode.com.cn/pxcook</a></td></tr></tbody></table><h2>WEB 技术清单</h2><ul><li><a href="https://link.segmentfault.com/?enc=oYw0cV%2F4UR%2B9vth%2FOfxShQ%3D%3D.1N%2B6Ygq5odgopnKPeyoNF5YPpsZnY4MxEwlTBdESPWzXz3xht1zDL9OD6vnf0i27oaDsgUOQ6zQ66AFi%2B%2FGr5w%3D%3D" rel="nofollow"><strong>2020-WEB开发路线图,和即将到来的 2021-WEB技术清单</strong></a></li><li>精彩待续。。。</li></ul><table><thead><tr><th>项目</th><th>地址</th></tr></thead><tbody><tr><td>developer-roadmap:开发人员路线图,循序渐进的指南和路径,以学习不同的工具或技术</td><td><a href="https://link.segmentfault.com/?enc=ghjipDAP97XDhndWdO1fXA%3D%3D.2itTRkSLuYK61bZVwwF9EeDBNQMYijAslWkCvoT8hDoj6xwxkMEpg9aseBj377xyB46ODlG9vqlTbutI2woMLg%3D%3D" rel="nofollow">https://github.com/kamranahmedse/developer-roadmap</a></td></tr></tbody></table><p>前端</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-ff9d99fad58862b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="frontend-map.png" title="frontend-map.png"></p><p>后端</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-e4eed2031f6575ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="backend-map.png" title="backend-map.png"></p><p>运维</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-ffc09d05b8abcecb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="devops-map.png" title="devops-map.png"></p><h2>最后</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-2f0f05ec4b16c547.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>好了,猫哥这大半年来推荐过的好开源项目就是上面那些了。</p><p><strong>时间会让一件件平凡的事情变得不平凡</strong>。</p><p>不知不觉,原创文章已经写到第 <strong>47</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,更新并运营大半年更是不易,花费了很多时间、精力去筛选和写推荐理由,大佬们看完文章后,顺手来个一键三连吧,就当给猫哥一点鼓励吧。</p><p>往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=PoAeX10NlD2rlIb4hBfWag%3D%3D.3tNQbfXV6YbQC0ZhEWG3JIBH74xkg1azZBzBSHZz5JWHuEo0kCObaeP2mg5zyBsdmYxMeyAgtt9BeBn3KjWzLw%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>微信搜索 <strong>前端GitHub</strong>,回复 <strong>电子书</strong> 就送你 <strong>1000+</strong> 本精华编程电子书;回复 <strong>1024</strong> 送你一套完整的 <strong>前端</strong> 视频教程,<strong>绝对免费,无套路获取</strong>。</p><p><strong>更新并运营大半年不易,往后会不断更新更好优质的内容,感谢各位读者那么久的陪伴,曾经的点赞与分享,对猫哥的文章的肯定与鼓励,谢谢</strong>。</p>
推荐 12 个提升程序员软技能与效率的必备工具,爱了爱了 👍
https://segmentfault.com/a/1190000040070107
2021-05-26T21:07:21+08:00
2021-05-26T21:07:21+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
18
<p><img src="/img/remote/1460000040070109" alt="" title=""></p><p>大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>这一期的内容有点不一般哦,先来几个在线绘图类的工具吧。</p><h2>1. draw.io</h2><p>draw.io 是一款免费的在线图表编辑工具, 可以用来编辑工作流, BPM, org charts, UML, ER图, 网络拓朴图等,而且是免费的哦,创建的图表等可能无限哦。</p><p><img src="/img/remote/1460000040070110" alt="" title=""></p><p>还可以 GitHub 授权登录,然后把自己创建的流程图等保存到 GitHub 仓库,还可以在 GitHub 仓库里面打开自己保存过的流程等图哦!</p><p>猫哥就是一直在用这个来画图的,然后自己创建一个私有 GitHub 仓库来存放这些图的,非常好用哦。</p><p><img src="/img/remote/1460000040070111" alt="" title=""></p><p><img src="/img/remote/1460000040070112" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=1gC37IhZTkqV4PvWN%2Be9Jw%3D%3D.v3JKd5x2zOa%2B4pvNjPNP6my2uNlLXPK%2FnCqj8whtyio%3D" rel="nofollow">https://www.draw.io/</a></blockquote><h2>2. ProcessOn</h2><p><img src="/img/remote/1460000040070113" alt="" title=""></p><p>ProcessOn 是一个在线作图工具的聚合平台,它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等,<br>不管 Mac 还是 Windows,一个浏览器就可以随时随地的发挥创意,规划工作。</p><p><img src="/img/remote/1460000040070114" alt="" title=""></p><p>缺点就是免费用户能创建 9 个图,不是无限的。</p><blockquote><a href="https://link.segmentfault.com/?enc=UNTdtDtRS3Xd4Eu4ZJdSkg%3D%3D.C61xHRpGsm2Mbvin49pAPuBnkEx%2F3LO2eIadsQ5rzKQ%3D" rel="nofollow">https://www.processon.com/</a></blockquote><h2>3. excalidraw</h2><p>Excalidraw 是一款非常轻量的 <strong>在线白板</strong> 工具,可以直接在浏览器打开,轻松绘制具有 <strong>手绘风格</strong> 的图形。</p><p>比如可以绘制这样的图形:</p><p><img src="/img/remote/1460000040070115" alt="" title=""></p><ul><li>一个开源免费的画图软件</li><li>个人目前看到的最舒服的画图软件</li><li>支持多人协作</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=Ro8DZe1UmktB%2BtE87fk1Mg%3D%3D.EoTkVtoHCO76mQUiZ1zFwUztMwElqyEpOBiuTRG9UuQ%3D" rel="nofollow">https://excalidraw.com/</a></blockquote><h2>4. whistle</h2><p>代理抓包工具,很好很强大。</p><p>基于 Node 实现的跨平台 web 调试代理工具,类似的工具有 Windows 平台上的 Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket 的请求、响应,也可以作为 HTTP 代理服务器使用。</p><p>不同于 Fiddler 通过断点修改请求响应的方式,whistle 采用的是类似配置系统 hosts 的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过 Node 模块扩展功能。</p><blockquote><a href="https://link.segmentfault.com/?enc=xL%2BSxHofN8ikGgxuJjEXsQ%3D%3D.JCE3vm1e6KhOKEmwHErtk9V5Sn8ay6QSBfjEo1pG4MA%3D" rel="nofollow">https://wproxy.org/whistle/</a></blockquote><h2>5. Easy Mock</h2><p>Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的 在线 mock 服务 。以项目管理的方式组织 Mock List,能帮助我们更好的管理 Mock 数据.</p><p>不过目前该网站正在备案中,暂时访问不了,要等几天了。</p><blockquote><a href="https://link.segmentfault.com/?enc=tCTkMQQVCcCzkfr3o3lK%2Bw%3D%3D.XH4iMw0FIKnrCrcfG%2BuTlvXysCo2ghRv%2F6H7Y9Ff%2FcU%3D" rel="nofollow">https://www.easy-mock.com</a></blockquote><h2>6. Fiddler</h2><p><img src="/img/remote/1460000040070116" alt="" title=""></p><p>Fiddler 是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。</p><blockquote><a href="https://link.segmentfault.com/?enc=P3sG1cwZBWivmBMTKxmbEA%3D%3D.XMIYdSAmbYY0sz2VXD8sqB2UJ5D4sdwtFlUKM1xtyvw%3D" rel="nofollow">https://www.telerik.com/fiddler</a></blockquote><h2>6. GitHub 统计</h2><p><img src="/img/remote/1460000040070117" alt="" title=""></p><p>GitHub 全球排名:这个排名很权威。</p><p>每个在 GitHub 开源的开发者,都想知道自己在 GitHub 上的排名吧,很简单只要在上面输入框输入自己的 GitHub 用户名即可,就可以看到自己的统计数据了。</p><p>比如猫哥的统计数据:<code>https://gitstar-ranking.com/biaochenxuying</code></p><blockquote><a href="https://link.segmentfault.com/?enc=GOz7inJxplWzKw%2FGW7JCbA%3D%3D.2w0D9swMoFfR2Nfibg5KWfYfNA6OpNAxfZ1c35hGTxM%3D" rel="nofollow">https://gitstar-ranking.com/</a></blockquote><h2>8. 墨刀</h2><p><img src="/img/remote/1460000040070118" alt="" title=""></p><p>原型设计工具,原型、设计、流程图、思维导图......享受创造的乐趣,成就团队和个人</p><ul><li>产品设计,何止是快,简单的拖拽,即可快速完成产品设计,将更多的时间留给思考</li><li>尺寸灵活,创作不受限,适配各类移动产品、网页设计、后台管理、小程序、活动原型....</li><li>支持制作高、低保真原型,不论是工作交流,还是客户展示,都能完美满足团队需求</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=QYWn%2BtcCIh3%2FL%2Fo7jl4hOA%3D%3D.mCWl0ugPxkyPUlsiJ0oCiihldvH%2F7NVPeuaSJyntCwM%3D" rel="nofollow">https://modao.cc/</a></blockquote><h2>8. 蓝湖</h2><p>一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。</p><p>蓝湖可以在线展示 Axure,自动生成设计图标注,与团队共享设计图,展示页面之间的跳转关系。</p><ul><li>高效的产品设计协作平台</li><li>无缝衔接产品、设计、研发流程</li><li>降低沟通成本,缩短开发周期,提高工作效率</li></ul><p><img src="/img/remote/1460000040070119" alt="" title=""></p><p>国内大部分设计师和前端在用这个来对接 ps 文件吧,真的好用!</p><blockquote><a href="https://link.segmentfault.com/?enc=jf%2FGpglUX0N2zfU4RmO9Eg%3D%3D.0wvCVR9TATzfYMFxBDPZlb1FFRtsxGmrcgiuR%2FXPf%2FI%3D" rel="nofollow">https://lanhuapp.com</a></blockquote><h2>10. PxCook</h2><ul><li>从设计到代码, 让团队高效协作</li><li>高效易用的自动标注工具,生成前端代码,设计研发协作利器</li></ul><p><img src="/img/remote/1460000040070120" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=ABvB2wKVFdNeplWzyeMZzQ%3D%3D.%2BJOXPoP3pEGFi5agnMwWMtnADnLaWaX%2FSZROwNt3BH0j9BEr4dUxtTtp6bSnQFa1" rel="nofollow">https://www.fancynode.com.cn/...</a></blockquote><h2>11. removebg</h2><p><img src="/img/remote/1460000040070121" alt="" title=""></p><p>一个抠图神器类工具,消除图片背景:100% 自动 – 只需 5 秒– 无需点击 – 免费。</p><p>Remove.bg 是一款非常神奇强大的在线人像照片/物品图片背景快速去除工具,你只需要上传图片,它就会利用「人工智能」技术全自动帮你扣掉背景,5 秒钟就能给你一张透明的移除背景后的主体照片。整个过程非常的简单傻瓜,你完完全全不需要花费任何精力去自己抠图。</p><blockquote><a href="https://link.segmentfault.com/?enc=RTuTaMNk708%2F9QVEHii66A%3D%3D.w%2BQRKdA7jvv7ndVvOvJI44vlz0qJ91GQHsLvWB3sHTU%3D" rel="nofollow">https://www.remove.bg/zh</a></blockquote><h2>12. ps-uupoop</h2><p><img src="/img/remote/1460000040070122" alt="" title=""></p><p>PS 在线图片编辑器是一个专业精简的在线 ps 图片照片制作处理软件工具,直接在浏览器打开就可用它修正,调整和美化图像。</p><p>相比同类软件,uupoop 支持的文件格式更多,包含 psd、xd、sketch、xcf、raw、pdf 及常见图片格式。</p><p>整体体验下来,我觉得 uupoop 拥有了原版PS 80% 的功能,基本可以满足轻量的编辑或应急情况下的编辑需求。</p><blockquote><a href="https://link.segmentfault.com/?enc=k7YuY3%2FCmJfmLD9f1LCAHw%3D%3D.xPK294XpQczmxeE6JQ9LetpE61FNc9XlQz4QxRnISd0%3D" rel="nofollow">https://www.uupoop.com/</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000040070123" alt="" title=""></p><p>好了,提升个程序员软技能的必备工具项目,今天先推荐这 12 个吧。</p><p>往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=GDtb39y30ILWYf2jRN%2F0xQ%3D%3D.sTN5yVtCcVIKD2QjbyLHZJdIr4jdsxyU4DDFA8xXPcfZqBjHcRjAQC7RkKle5JGct88HL1hQ4MDr4OsBjDPXKA%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=B73oRzfbM%2FuEuIy314F4uA%3D%3D.RG0m9eMth1Z7n7TX%2FdZgsIWOLJuWZOhzrV764rmKfleA4UIH0vlqhjWJmASCgJa7k%2Fqb%2Fcz8baaQ04%2B4%2BrLhFQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>不知不觉,<a href="https://link.segmentfault.com/?enc=rmADVsMzuQ%2Bkk3fQD3R45w%3D%3D.0hP0UodgrovlvFvri0x8YKZGFd5m6YW16PAyvxdnt%2BtfSCra2grZoL9DaYxH4pgzDbp2JCLxkC6Kg4sPwgXWCw%3D%3D" rel="nofollow">FrontEndGitHub</a> 这个开源项目 <strong>已经开源了快半年了,一直在高频更新和维护中</strong>,原创文章都已经写到第 <strong>44</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后,顺手来个一键三连吧,就当给猫哥一点鼓励吧。</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=FeUW6dp13NHpBsd4xz7xtg%3D%3D.%2B00bOCmbf%2FTiEqLYFa5BUjtJmJjI5U72SoDO8lBw1qMsnlhIGi15FS5IdNbSk3ebo9fj6KHupnGhyDtp3r8Omg%3D%3D" rel="nofollow">推荐 9 个 Node.js 学习、进阶、debugging 分析、实战 的重磅开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=sRYQ%2F5pZhaJHgnMI2EPvuA%3D%3D.9DbPl%2Flo0yi6fcrsAKhXa%2FOGWF%2Fo5ewUmQrMThtM2gdYhL5OXkdmXEDPEQeE2DUllEF%2F7xdXOzxsCGmes1Jokw%3D%3D" rel="nofollow">猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!</a></li><li><a href="https://link.segmentfault.com/?enc=WSvWSocJfgm4kaQSd7WGAA%3D%3D.YODlYOBBz8iCx5sW6pQiHcnBcNYOKEpJLpbtPqIx2X77mFq8f6EXkjzQ7B5hbSaLdGxASuv00IZaxWxh%2B0DGTA%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=%2FAfTocG6i0fv2D8NYo77eg%3D%3D.NvSBy8xAqFFGRl%2BHv6O7%2Bt8sHjZXgwG4%2B60%2BS%2B0KYIPzDbZS0VFz2%2Bs2bTrbHEW17PegWDkFI8mUI%2FDFGybDmg%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li></ul><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=gfB3AmprvYkYZOzMgKEpoA%3D%3D.M2waXDxMBcWBxmbcFmUmBJdNwwlZV9866P%2FLDD%2FmRu493hubjyu2FSvlI8s1MUtUDwmcfhAse0gdAbWSifhBYA%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送,已经推荐了 面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具 等专题的近 300 个优秀项目了。</blockquote><p>希望你在浏览、学习了超级猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><p>初次见面,也不知道送你们啥。微信搜索 <strong>前端GitHub</strong>,回复 <strong>电子书</strong> 就送你 <strong>1000+</strong> 本精华编程电子书;回复 <strong>1024</strong> 送你一套完整的 <strong>前端</strong> 视频教程。<strong>绝对免费,无套路获取</strong>。</p><p>如果看到这里,喜欢这篇文章的话,请帮点个<strong>好看</strong>。</p>
推荐 9 个 Node.js 学习、进阶、debugging 分析、实战 的重磅开源项目 👍
https://segmentfault.com/a/1190000039984386
2021-05-12T02:40:40+08:00
2021-05-12T02:40:40+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
12
<p>今天给大家带来的是 Node.js 学习的最佳开源项目!Node.js 最佳的学习资源。相信你会找到学习 Node.js 的兴趣!</p><p>大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>1. node</h2><p><img src="/img/remote/1460000039984388" alt="" title=""></p><p>最佳的学习资源肯定是 最权威的 Node.js 的官方项目啦。</p><p>Node.js 是一个开源,跨平台的 JavaScript 运行时环境。它在浏览器外部执行 JavaScript 代码。</p><p>有关使用 Node.js 的更多信息,请参见 <a href="https://link.segmentfault.com/?enc=eYUHkia8YJ8gj9jol3ECkg%3D%3D.AXwEiXQPIhbHqqSJUYR0NSupzNGdQad87bsTTtI9kcQ%3D" rel="nofollow">Node.js网站</a>。</p><blockquote><a href="https://link.segmentfault.com/?enc=2%2FoHudQwfkOjd7q93m%2FwSQ%3D%3D.Pnr46Ocdbcqb8uBWWO5OeuAjN801JV08LFTRFWGvixM%3D" rel="nofollow">https://github.com/nodejs/node</a></blockquote><h2>2. node-api-cn</h2><p><img src="/img/remote/1460000039984389" alt="" title=""></p><p>Node.js API 中文文档项目</p><blockquote><a href="https://link.segmentfault.com/?enc=LNdMrJ1qD9s8rGQTEcekTg%3D%3D.GAP%2Bdjze%2Fw%2F5OJ6%2FQ2CsV54xL8FKXzPtSCaoGthf3KXPh%2Bc3NYRuQpMOzRyC1xS1" rel="nofollow">https://github.com/nodejscn/n...</a></blockquote><h2>3. node-in-debugging</h2><p>这是一个 Node.js 调试指南的项目,已经出书了。</p><p>里面讲到当程序出现性能瓶颈时,如何结合代码去推测可能出问题的地方,展现程序的性能瓶颈的方法。</p><p>比如用 perf、火焰图、红蓝差分火焰图 去分析和定位问题。</p><p>perf:</p><p><img src="/img/remote/1460000039984390" alt="" title=""></p><p>火焰图:</p><p><img src="/img/remote/1460000039984391" alt="" title=""></p><p>红蓝差分火焰图 :</p><p><img src="/img/remote/1460000039984392" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=F0QS7rCf1rLTy1zqLzFTnw%3D%3D.azkqPVEiFCjQ11o3GM0O0jSPPnvh5YlrFE4qDuW0RtUn3LWas%2B2Z1uwWaAz%2Ft8NU" rel="nofollow">https://github.com/nswbmw/nod...</a></blockquote><h2>4. nodebestpractices</h2><p><img src="/img/remote/1460000039984393" alt="" title=""></p><p>Node.js 最佳实践</p><ul><li>这是对Node.js最佳实践中排名最高的内容的总结和分享</li><li>这里是最大的汇集,且每周都在增长。 当前,超过 50 个最佳实现,样式指南,架构建议已经呈现。每天都有新的 issue 和 PR 被创建,以使这本在线书籍不断更新。</li><li>大部分的条目包含额外的信息。大部分的最佳实践条目的旁边,您将发现链接,它将呈现给您示例代码,博客引用和更多信息</li></ul><p>目录</p><ul><li>项目结构实践 (5)</li><li>异常处理实践 (11)</li><li>编码规范实践 (12)</li><li>测试和总体质量实践 (8)</li><li>进入生产实践 (16)</li><li>⭐ 新: 安全实践(23)</li><li>Performance Practices (coming soon)</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=RSsPA0Xp1TKeo9i%2BX%2B3OTQ%3D%3D.4VvwImE0Sc%2BYqu6g9o2bZK3oFp0KJUB9TYPpGSAgNftZckDD1x4LeucLdAcUS4vqg087iE8TTL2og0fdAxEKpw%3D%3D" rel="nofollow">https://github.com/goldbergyo...</a></blockquote><h2>5. deep-into-node</h2><p><img src="/img/remote/1460000039984394" alt="" title=""></p><p>这个项目是关于:深入理解 Node.js:核心思想与源码分析。</p><p>源码分析包括(libuv, v8), 需要有一定的 C、C++基础。 Node.js 的源码到处闪烁着开发者的智慧和追求极致的精神。 包括但不限于:</p><ul><li>系统架构</li><li>设计模式</li><li>性能优化</li><li>奇技淫巧</li></ul><p>本书通过分析 node 核心模块的实现,向读者阐述 node 异步 IO,事件循环的核心思想。帮助开发者更好的使用 Node.js。</p><p>通过追溯 node 社区开发issue, 探讨 node 的变迁和演进,学习 node.js 的设计哲学。</p><blockquote><a href="https://link.segmentfault.com/?enc=66xoDlqKKCHzcX2XaMYFRw%3D%3D.7vS0lQIyb34RpaUICaX5q6PqnAnUYhKACz8qKByhRIFaOs3%2BC1axMTkuy%2B2X77PG" rel="nofollow">https://github.com/yjhjstz/de...</a></blockquote><h2>6. Nodejs-Roadmap</h2><p><img src="/img/remote/1460000039984395" alt="" title=""></p><p>这个项目是作者从事 Node.js 开发以来的学习历程,旨在为大家提供一个较详细的学习教程,侧重点更倾向于 Node.js 服务端所涉及的技术栈,如果本文能为您得到帮助,请给予支持!</p><p>Node.js 由 Libuv、Chrome V8、一些核心 API 构成,如下图所示:</p><p><img src="/img/remote/1460000039984396" alt="" title=""></p><p>以上展示了 Node.js 的构成,下面做下简单说明:</p><ul><li>Node Standard Library:Node.js 标准库,对外提供的 JavaScript 接口,例如模块 http、buffer、fs、stream 等</li><li>Node bindings:这里就是 JavaScript 与 C++ 连接的桥梁,对下层模块进行封装,向上层提供基础的 API 接口。</li><li>V8:Google 开源的高性能 JavaScript 引擎,使用 C++ 开发,并且应用于谷歌浏览器。如果您感兴趣想学习更多的 V8 引擎知识,请访问 <a href="https://link.segmentfault.com/?enc=NP4LLIQAJG2%2BzLXmPWg%2Byw%3D%3D.8PJn028VVxq8mP0qNfj46Q%3D%3D" rel="nofollow">What is V8?</a></li><li>Libuv:是一个跨平台的支持事件驱动的 I/O 库。它是使用 C 和 C++ 语言为 Node.js 所开发的,同时也是 I/O 操作的核心部分,例如读取文件和 OS 交互。来自一份 <a href="https://link.segmentfault.com/?enc=ZXMCV1Qi1whMImAZ%2F45L8A%3D%3D.oLK09QlTS%2F12pWt3JdnkSA1dguUX2aGl5%2F3mfsu2T%2FdAxTq2gFqFgVRgLzlyZREm" rel="nofollow">Libuv 的中文教程</a></li><li>C-ares:C-ares 是一个异步 DNS 解析库</li><li>Low-Level Components:提供了 http 解析、OpenSSL、数据压缩(zlib)等功能。</li></ul><p>以上只是做一个初步的认知,如果你想深入了解 Node.js 那么多每个点都是值得你深入研究的。</p><p>无论是内容还是阅读效果,都很好,是值得推荐的一个学习 Node 的开源项目。</p><blockquote><a href="https://link.segmentfault.com/?enc=Qij4heRX6Lgg2XSZFoYlSQ%3D%3D.9lH47IMaiheqUzjum4Q%2B5ibnF4ejnGNRNcW05D7u7wI0f6%2FjVnvf5z2UQO%2BeAgBq" rel="nofollow">https://github.com/qufei1993/...</a></blockquote><h2>7. NeteaseCloudMusicApi</h2><p><img src="/img/remote/1460000039984397" alt="" title=""></p><p>网易云音乐 Node.js API service</p><p><strong>功能特性</strong></p><p>总共有 206 个 api !</p><p>比如:</p><pre><code class="js">登录
刷新登录
发送验证码
校验验证码
注册(修改密码)
获取用户信息 , 歌单,收藏,mv, dj 数量
获取用户歌单
获取用户电台
获取用户关注列表
获取用户粉丝列表
获取用户动态
获取用户播放记录
获取精品歌单
获取歌单详情
搜索
搜索建议
获取歌词
歌曲评论
收藏单曲到歌单
专辑评论
歌单评论
mv 评论
电台节目评论
banner
获取歌曲详情
获取专辑内容
获取歌手单曲
获取歌手 mv
获取歌手专辑
获取歌手描述
获取相似歌手
获取相似歌单
相似 mv
获取相似音乐
获取最近 5 个听了这首歌的用户
获取每日推荐歌单
获取每日推荐歌曲
私人 FM
签到
喜欢音乐
等等。。。</code></pre><p>如果你想做一个 音乐 类的开源项目,可以好好看看这个项目哦。</p><blockquote><a href="https://link.segmentfault.com/?enc=3cMx%2BX9OiUrw0DnPp%2BnJQg%3D%3D.agpFfkXqdgxqeNQwpBIo2HsH680RGlXuCo%2FXnwWE9JeqysrD6xYD%2B86riE%2BA1xn%2FzeqKn6vaiXpPsY5bc51n%2Bg%3D%3D" rel="nofollow">https://github.com/Binaryify/...</a></blockquote><h2>8. node-elm</h2><p><img src="/img/remote/1460000039984398" alt="" title=""></p><p>这是基于 node.js + Mongodb 构建的后台系统。</p><p>整个项目分为两部分:前台项目接口、后台管理接口,共 60 多个。涉及登陆、注册、添加商品、商品展示、筛选排序、购物车、下单、用户中心等,构成一个完整的流程。</p><p>目标功能</p><pre><code class="js"> IP定位 -- 完成
城市列表 -- 完成
搜索地址 -- 完成
上传图片 -- 完成
添加商铺 -- 完成
添加食品 -- 完成
测量距离 -- 完成
搜索美食,餐馆 -- 完成
根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成
评价列表 -- 完成
食品详情 -- 完成
商家详情 -- 完成
购物车功能 -- 完成
登录、注册 -- 完成
修改密码 -- 完成
用户信息 -- 完成
添加、删除、修改收货地址 -- 完成
下单 -- 完成 ✨✨
订单信息 -- 完成
红包 -- 完成
商铺管理 -- 完成
食品管理 -- 完成
管理员权限验证 -- 完成
超级管理员 -- 完成
订单管理 -- 完成
流量统计 -- 完成
前后台路由同构 -- 完成
部署上线 -- 完成</code></pre><p><img src="/img/remote/1460000039984400" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=7eGFDxy0ZY9LJYqC1J7eKQ%3D%3D.2VnfB%2FeCG9nI7NkaBBG0912b5eZtyGC2Y82vo6JfWY410bcm2TBJkxqnk6%2Fo%2FHP3" rel="nofollow">https://github.com/bailicangd...</a></blockquote><h2>9. awesome-nodejs</h2><p><img src="/img/remote/1460000039984401" alt="" title=""></p><p><strong>内容目录</strong></p><pre><code class="js">官方的
配套
疯狂科学
命令行应用
功能编程
HTTP
调试/分析
记录中
命令行实用程序
构建工具
硬件
模板化
Web框架
文献资料
文件系统
控制流
溪流
即时的
图像
文本
数字
数学
日期
网址
资料验证
解析中
人性化
压缩
网络
数据库
测验
安全
标杆管理
缩小器
验证
授权
电子邮件
作业队列
Node.js管理
自然语言处理
流程管理
自动化
AST
静态网站生成器
内容管理系统
论坛
写博客
奇怪的
序列化
各种各样的
资源
讲解
发现
文章
时事通讯
影片
图书
网志
课程
备忘单
工具
社区
各种各样的
相关清单</code></pre><blockquote><a href="https://link.segmentfault.com/?enc=UKlsHZKj7R7QQat2v3ns9A%3D%3D.TslgGw2fEpZU1E1uV9woDSxIEaFBzjOa8pkJpnzSAc0Gm1hevTkr3%2BBFPjg6JNBM" rel="nofollow">https://github.com/sindresorh...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039984402" alt="" title=""></p><p>好了,Node.js 学习的好开源项目,目前发现的就是上面那些了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=DVYR%2Fi%2FhgR3VlwXelFCyIQ%3D%3D.QsFlFWNQYG8Ptag3xVu9AiGk49ERGOJc3qQl2YpaBEtEIsTUpiyzuSqsp8vU14v%2FLTyF7ycRRU0BRIEUwXTNtw%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>不知不觉,原创文章已经写到第 <strong>43</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后,顺手来个一键三连吧,就当给猫哥一点鼓励吧。</p><p>往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=imHGOzWSjRhgK75GvgjeIw%3D%3D.ULmbKlORZkIGnM1raNfh8Q7sGzX1EylYqxFJelfz4qDvrER0i1NHu%2BuTFgwgGeC%2FGTo1IKlkWouM331bJQpVbA%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=wgUFInuY3GJB9x5fbJrMEQ%3D%3D.9AE3U3UFLVZ%2FKh2yP%2B3SXJThzSLP2%2Fk78HLjtYRD6GekCmXFZTSQi9VXRnbNvM7InRFtnK1bsMBU%2FD1XDILuOg%3D%3D" rel="nofollow">前端最流行的 10 大顶级开源项目!猛增 174K Star!</a></li><li><a href="https://link.segmentfault.com/?enc=ouqYe3OthhDgE0MjsDdFGw%3D%3D.bdc4vHvYfMBz7T1SUo7KNGVCCOWEVpf4oAaGPX%2F5YTxOgEM5JQaZlD8H5F1fqFNtf%2BG61xx9H153xexb1zh1xw%3D%3D" rel="nofollow">猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!</a></li><li><a href="https://link.segmentfault.com/?enc=YT9PS03Rj7aXmLt6xiJdAA%3D%3D.9SEp0ubDfYR9V%2B9o06mxYFRN3NazEs7LsvKs8yJoYYyfmW3pBvW3I2rEkAU8Bgq28UxTZxcMzHvPKG8U3V5AJw%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=xSncdowkPe0D5J4Z%2BfF%2Fwg%3D%3D.%2FMT4Xw4%2BdPsc5H9doKFMex%2ByC1gtHGBsVUhbWQgx7nO1sUdhYq1ZDGAe%2FLbkFxP6pO2cuIaTwWfJWI2uzlqgpw%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=fzBpKnwNylciYTGcF2pMoA%3D%3D.S9vkGwDiaAwe6Ar3CXMVRhZhuEpihuovCcQJ%2F2APY29riPl7cZuLXl7d7cRwir%2FbjFmLbRYkVlcJLGmj02rZ3g%3D%3D" rel="nofollow">程序员必备的 10 大 GitHub 仓库,前端占了 7 个!</a></li></ul><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=O2ux08fyIumvkQuW5YCGWQ%3D%3D.3M9nQheJfVeWd%2B6AQkkJ6KyqWvPa0OV4HhwSZFDxCBxqyFLXbPBRb%2FSRyStbAEDocsIXuhS34ifKRwarNphYSA%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称,致力于打造最优质的前端开源项目资源库。</blockquote><p>如果看到这里,喜欢这篇文章的话,请帮点个<strong>好看</strong>。</p>
Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记
https://segmentfault.com/a/1190000039954905
2021-05-06T21:54:22+08:00
2021-05-06T21:54:22+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
21
<p><img src="/img/remote/1460000039954907" alt="" title=""></p><p>五一期间,花了 3 天时间,边学 Vue3 和 Vite2,边重构自己的项目,终于都用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 重构完啦!</p><p>终于完成一项心心念念的 2021 年度目标了 ✌️</p><p>项目地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=PjzpXfRg3VXHJ5MvQn61kw%3D%3D.ufeodN8keIPMr74jLWAkIxqOtWfrouBxxu33S2LIVyMDGG%2BZklmoIXyy6Hm8ddMahGFXoMWAL7NmxqyaTfC2WA%3D%3D" rel="nofollow">https://github.com/biaochenxuying/blog-vue-typescript</a></blockquote><p><img src="/img/remote/1460000039954908" alt="" title=""></p><h2>效果</h2><p>效果图:</p><ul><li>pc 端</li></ul><p><img src="/img/remote/1460000018720574" alt="" title=""></p><ul><li>移动端</li></ul><p><img src="/img/remote/1460000018720575" alt="" title=""></p><p>完整效果请看:</p><blockquote><a href="https://link.segmentfault.com/?enc=Auvmg8GK0VbxvD6NO8tAZQ%3D%3D.HBx9eS2nWQVv25XvJ53RBBBBEkmm9gcUc%2B%2B%2B9QKRPtE%3D" rel="nofollow">https://biaochenxuying.cn</a></blockquote><h2>功能</h2><h3>已经完成功能</h3><ul><li>[x] 登录</li><li>[x] 注册</li><li>[x] 文章列表</li><li>[x] 文章归档</li><li>[x] 标签</li><li>[x] 关于</li><li>[x] 点赞与评论</li><li>[x] 留言</li><li>[x] 历程</li><li>[x] 文章详情(支持代码语法高亮)</li><li>[x] 文章详情目录</li><li>[x] 移动端适配</li><li>[x] github 授权登录</li></ul><p><a href="##%E7%AE%80%E4%BB%8B">⬆️ 返回顶部</a></p><h2>前端主要技术</h2><p>所有技术都是当前最新的。</p><ul><li>vue:^3.0.5</li><li>typescript : ^4.1.3</li><li>element-plus: ^1.0.2-beta.41</li><li>vue-router : ^4.0.6</li><li>vite: ^2.2.3</li><li>vuex: ^4.0.0</li><li>axios: ^0.21.1</li><li>highlight.js: ^10.7.2</li><li>marked:^2.0.3</li></ul><h2>1. 初化化项目</h2><p>用 vite-app 创建项目</p><pre><code class="js">yarn create vite-app <project-name>
# 或者
npm init vite-app <project-name></code></pre><p>然后按照提示操作即可!</p><p>进入项目,安装依赖</p><pre><code class="js">cd <project-name>
yarn # 或 npm i</code></pre><p>运行项目</p><pre><code class="js">yarn dev </code></pre><p>打开浏览器 <a href="https://link.segmentfault.com/?enc=jTpc%2BDvnE99J%2BFD6wpc3NQ%3D%3D.VOpg6dEDXxsVzXJ2mlPoD%2F6KLvOCQkvTTkpH6ffGIJY%3D" rel="nofollow">http://localhost:3000</a> 查看</p><h2>2. 引入 TypeScript</h2><p>在创建项目的时候可以 TypeScript 的,如果你选择了 TypeScript ,可以忽略第 2 个步骤。</p><p>加入 ts 依赖</p><pre><code class="js">yarn add --dev typescript</code></pre><p>在 项目根目录下创建 TypeScript 的配置文件 tsconfig.json</p><pre><code class="js">{
"compilerOptions": {
// 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出,仅为了类型检查。
"allowSyntheticDefaultImports": true,
// 解析非相对模块名的基准目录
"baseUrl": ".",
"esModuleInterop": true,
// 从 tslib 导入辅助工具函数(比如 __extends, __rest等)
"importHelpers": true,
// 指定生成哪个模块系统代码
"module": "esnext",
// 决定如何处理模块。
"moduleResolution": "node",
// 启用所有严格类型检查选项。
// 启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict,
// --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。
"strict": true,
// 生成相应的 .map文件。
"sourceMap": true,
// 忽略所有的声明文件( *.d.ts)的类型检查。
"skipLibCheck": true,
// 指定ECMAScript目标版本
"target": "esnext",
// 要包含的类型声明文件名列表
"types": [
],
"isolatedModules": true,
// 模块名到基于 baseUrl的路径映射的列表。
"paths": {
"@/*": [
"src/*"
]
},
// 编译过程中需要引入的库文件的列表。
"lib": [
"ESNext",
"DOM",
"DOM.Iterable",
"ScriptHost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}</code></pre><p>在 src 目录下新加 shim.d.ts 文件</p><pre><code class="js">/* eslint-disable */
import type { DefineComponent } from 'vue'
declare module '*.vue' {
const component: DefineComponent<{}, {}, any>
export default component
}</code></pre><p>把 main.js 修改成 main.ts</p><p>在根目录,打开 Index.html</p><pre><code class="js"><script type="module" src="/src/main.js"></script>
修改为:
<script type="module" src="/src/main.ts"></script></code></pre><h2>3. 引入 eslint</h2><p>安装 eslint prettier 依赖</p><p><code>@typescript-eslint/parser @typescr ipt-eslint/eslint-plugin</code> 为 eslint 对 typescript 支持。</p><pre><code class="js">yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin</code></pre><p>在根目录下建立 eslint 配置文件: .eslintrc.js</p><pre><code class="js">module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
// 'no-use-before-define': [
// 'error',
// {
// functions: false,
// classes: true,
// },
// ],
'@typescript-eslint/no-use-before-define': 'off',
// '@typescript-eslint/no-use-before-define': [
// 'error',
// {
// functions: false,
// classes: true,
// },
// ],
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$'
}
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$'
}
],
'space-before-function-paren': 'off',
quotes: ['error', 'single'],
'comma-dangle': ['error', 'never']
}
};</code></pre><p>建立 prettier.config.js</p><pre><code class="js">module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: false, // 未尾逗号
vueIndentScriptAndStyle: true,
singleQuote: true, // 单引号
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'none', // 未尾分号
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf'
}</code></pre><h2>4. vue-router、vuex</h2><pre><code>npm install vue-router@4 vuex</code></pre><h3>4.1 vuex</h3><p>在根目录下创建 store/index.ts</p><pre><code>import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
export interface State {
count: number
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})</code></pre><p>main.ts 修改</p><pre><code>import { createApp } from 'vue'
import { store, key } from './store'
import App from './App'
import './index.css'
const app = createApp(App)
app.use(store, key)
app.mount('#app')</code></pre><p>components/HelloWord.vue 修改</p><pre><code><template>
<h1>{{ msg }}</h1>
<button @click="inCrement"> count is: </button>
<p>{{ count }}</p>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import { key } from '../store'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: {
type: String,
default: ''
}
},
setup() {
const store = useStore(key)
const count = computed(() => store.state.count)
return {
count,
inCrement: () => store.commit('increment')
}
}
})
</script></code></pre><h3>4.2 vue-router</h3><p>在 src 目录下建立 router/index.ts,内容如下:</p><pre><code class="js">import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "About" */ "../components/About.vue")
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;</code></pre><p>再新建一个 components/About.vue 文件,内容如下:</p><pre><code class="js"><template>
<img
alt="Vue logo"
src="../assets/logo.png"
/>
<h1>{{ msg }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'About',
data() {
return {
msg: 'Hello Vue 3.0 + Vite!'
}
},
setup() {}
})
</script></code></pre><p>再修改 main.ts</p><pre><code>import { createApp } from 'vue'
import { store, key } from './store'
import router from "./router";
import App from './App'
import './index.css'
const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')</code></pre><p>再访问 <a href="https://link.segmentfault.com/?enc=iWm3GMS%2FZu1eFbXbh5USRw%3D%3D.ooOmtLJNrQDwXNlcIyD3RM%2FSbO%2B8iBve97NCFRNF5ag%3D" rel="nofollow">http://localhost:3000/</a> </p><p><img src="/img/remote/1460000039157362" alt="" title=""></p><p>和 <a href="https://link.segmentfault.com/?enc=J3tQzt%2BBedD8ec0WQMhKdA%3D%3D.SI3ITlcchaY0JpVVodpN5ofsCqRGBoxfsRGnFMjKZ4g%3D" rel="nofollow">http://localhost:3000/about</a> 即可</p><p><img src="/img/remote/1460000039157363" alt="" title=""></p><h2>5. 加入 Element Plus</h2><h3>5.1 安装 element-plus</h3><p><strong>全局安装</strong></p><pre><code class="js">npm install element-plus --save</code></pre><h3>5.2 引入 Element Plus</h3><p>你可以引入整个 Element Plus,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。</p><p><strong>完整引入</strong></p><p>在 main.js 中写入以下内容:</p><pre><code>import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import router from "./router";
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import './index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')</code></pre><p>以上代码便完成了 Element Plus 的引入。需要注意的是,样式文件需要单独引入。</p><hr><p><strong>按需引入</strong></p><p>借助 <a href="https://link.segmentfault.com/?enc=Cydv5zt2ktY7Z%2BFY0AWUVQ%3D%3D.Z9PcZ5yc5fOxoWgqABQdNer%2BtgHJAunzfhGIVEZ3gEH6xs2Y8uLRA0QHcBQkFki1JbKEbSKW1WJeq%2BAkYlzk8g%3D%3D" rel="nofollow">babel-plugin-component</a>,我们可以只引入需要的组件,以达到减小项目体积的目的。</p><p>首先,安装 babel-plugin-component:</p><pre><code>npm install babel-plugin-component -D</code></pre><p>然后,将 .babelrc 修改为:</p><pre><code class="js">{
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}</code></pre><p>接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:</p><pre><code class="js">import { createApp } from 'vue'
import { store, key } from './store';
import router from "./router";
import { ElButton, ElSelect } from 'element-plus';
import App from './App.vue';
import './index.css'
const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
/* or
* app.use(ElButton)
* app.use(ElSelect)
*/
app.use(store, key)
app.use(router)
app.mount('#app')
app.mount('#app')</code></pre><p>更详细的安装方法请看 <a href="https://link.segmentfault.com/?enc=%2FPGOwfaCccVFr5VWlWf76g%3D%3D.scfGcwTY0j%2FK1H6i9yq5%2BqgcJqXXHxVM5bI9tL9hNTgD2BclBziCiLKPbodndVIj9RcYtb5N2OWLQeSyNx42ig%3D%3D" rel="nofollow">快速上手</a>。</p><h3>5.3 全局配置</h3><p>在引入 Element Plus 时,可以传入一个全局配置对象。</p><p>该对象目前支持 <code>size</code> 与 <code>zIndex</code> 字段。<code>size</code> 用于改变组件的默认尺寸,<code>zIndex</code> 设置弹框的初始 z-index(默认值:2000)。按照引入 Element Plus 的方式,具体操作如下:</p><p>完整引入 Element:</p><pre><code class="js">import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });</code></pre><p>按需引入 Element:</p><pre><code class="js">import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);</code></pre><p>按照以上设置,项目中所有拥有 <code>size</code> 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。</p><h3>5.4 配置 vite.config.ts</h3><p>其中 proxy 和 alias 是和 vue-cli 区别比较大的地方。</p><pre><code class="js">import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
},
resolveComponent: (name) => {
return `element-plus/lib/${name}`;
},
}
]
})
],
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: './',
/**
* 与“根”相关的目录,构建输出将放在其中。如果目录存在,它将在构建之前被删除。
* @default 'dist'
*/
// outDir: 'dist',
server: {
// hostname: '0.0.0.0',
host: "localhost",
port: 3001,
// // 是否自动在浏览器打开
// open: true,
// // 是否开启 https
// https: false,
// // 服务端渲染
// ssr: false,
proxy: {
'/api': {
target: 'http://localhost:3333/',
changeOrigin: true,
ws: true,
rewrite: (pathStr) => pathStr.replace('/api', '')
},
},
},
resolve: {
// 导入文件夹别名
alias: {
'@': path.resolve(__dirname, './src'),
views: path.resolve(__dirname, './src/views'),
components: path.resolve(__dirname, './src/components'),
utils: path.resolve(__dirname, './src/utils'),
less: path.resolve(__dirname, "./src/less"),
assets: path.resolve(__dirname, "./src/assets"),
com: path.resolve(__dirname, "./src/components"),
store: path.resolve(__dirname, "./src/store"),
mixins: path.resolve(__dirname, "./src/mixins")
},
}
})
</code></pre><h2>踩到坑</h2><p>在 <code>npm run dev</code> 打包时不报错,但是在 <code>npm run build</code> 时却报错了,build 的时候会把 <code>node_modules</code> 里面的文件也编译,所以挺多 element-plus 的类型文件报错了。</p><p>把 <code>tsconfig.json</code> 里面的 <code>include</code> 和 <code>exclude</code> 修改一下就不会了,配置如下</p><pre><code class="js">{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
// 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
"noImplicitThis": false,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client"]
},
"include": ["/src/**/*.ts", "/src/**/*.d.ts", "/src/**/*.tsx", "/src/**/*.vue"],
// ts 排除的文件
"exclude": ["node_modules"]
}</code></pre><p>Vue3 + vite2 打包出来的文件和原来 vue2 版的差别也挺大的,由原来 2.5M 直接变成了 1.8M ,amazing!</p><p><img src="/img/remote/1460000039954909" alt="" title=""></p><h2>最后</h2><p><img src="/img/remote/1460000039157361" alt="" title=""></p><p>项目代码大多都是 2 年前的,还有很多可以优化的地方,这次重构的过程没对原来的样式和代码做什么改动,没那么多时间,加上我懒 😂</p><p>这次就升级了主要框架与相应的 ui 库,过了一遍 Vue3 中的 API,发现很多 Vue3 中新的 API 都用不上,主要是要熟练一下 Vue3 和 Vite2 项目搭建,这假期也算有所收获。</p><p>具体项目源码请看:</p><blockquote><a href="https://link.segmentfault.com/?enc=ARTFJfIgclwYSGfv%2BMW06Q%3D%3D.c%2F6zqBbKriXRM4kcQOJ%2FgKFMJ%2FtHQJiWla5JvIYFva9ha5NmaNTx18gZEBiZ6vZCJHyZguEfU1cZV5YoOP%2B6MA%3D%3D" rel="nofollow">https://github.com/biaochenxuying/blog-vue-typescript</a></blockquote><p>至此,一个基于 Vue3 全家桶 + Vite2 + TypeScript + Element Plus 的开发环境已经搭建完毕,现在就可以编写代码了,各个组件的使用方法请参阅它们各自的文档。</p><p>不得不说 Vue3 + Element Plus + Vite + TypeScript 是真的香!</p><p>推荐一个 Vue3 相关的资料汇总: <a href="https://link.segmentfault.com/?enc=i7w9Qym3BOy3%2B0Go%2FH%2BN8g%3D%3D.rnJBwtOOkHcQ0vCgAh%2Fp4robjgEHTfWuN8RIuRB04kcdUbai5KcvmNikOIukIExxwjIQQi2tkQj%2FQM8QUIqttQ%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a>,相信你会挖到矿哦!</p><p>参考文章:<a href="https://segmentfault.com/a/1190000038533257">vue3 + vite + typescript + eslint + jest 项目配置实践</a></p><p><strong>推荐阅读</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=BLq9KD2BRabGyhOwtc54pg%3D%3D.ERM6Uf8ciXmv1umACx%2F0l4fsVlCjNX2NQnzCNadea1dQLALV5ynJWkPUyIO3idsHV99xTEjQpXLqZ4dCbJS%2FWA%3D%3D" rel="nofollow">TypeScript 中提升幸福感的 10 个高级技巧</a></li></ul><p>欢迎关注公众号: “<strong>全栈修炼</strong>”,回复 “<strong>电子书</strong>” 即可以获得下面 <strong>300</strong> 本技术精华书籍哦,猫哥 wx:CB834301747 。</p><p><img src="/img/remote/1460000039913812" alt="" title=""></p>
提高 DevTools 控制台调试的 12 种方法
https://segmentfault.com/a/1190000039913799
2021-04-27T21:08:01+08:00
2021-04-27T21:08:01+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
7
<p>很多开发人员都只是略知道一些浏览器 <code>DevTool</code> 调试的基础知识。</p><p>使用最多的 <code>console.log()</code> 对于在代码运行时输出值非常有用,通常可以帮助查明错误。</p><p>但是,还有一高级的用法还有很多人不知道,所以并未得到充分利用,更快,更容易和更有用的高级的用法,这些高级的用法可用于客户端脚本,Web 工作人员和服务工作人员。</p><p><code>Node.js</code> 和 <code>Deno</code> 运行时控制台也支持许多功能。</p><h2>1. 使用 ES6 解构输出变量名称</h2><p>当监视多个值时,日志记录可能会变得很复杂。通常有必要添加更多信息,例如</p><pre><code class="js">const x = 42;
console.log('variableX:', variableX);
// or
console.log(`variableX: ${ variableX }`);
/*
output:
variableX: 42
*/</code></pre><p>更快的选择是使用 ES6 对象销毁分配。这会将变量添加到具有匹配属性名称的对象。</p><p>换句话说,只要地方 <code>{ and }</code> 括号一个变量来显示其名称和值:</p><pre><code class="js">console.log({ variableX });
/*
output:
{ variableX: 42 }
*/</code></pre><h2>2. 使用适当的日志消息类型</h2><p><code>console.log()</code> 众所周知的最简单的方法:</p><pre><code class="js">console.log('no-frills log message');</code></pre><p>但这不是唯一的类型。消息可以归类为信息(与相同处理 console.log() ):</p><pre><code class="js">console.info('this is an information message');</code></pre><p><code>warnings</code>:</p><pre><code class="js">console.warn('I warned you this could happen!');</code></pre><p><code>errors</code>:</p><pre><code class="js">console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');</code></pre><p>或更不重要的 <code>debug</code> 调试消息:</p><pre><code class="js">console.debug('nothing to see here - please move along');</code></pre><p><code>console.table()</code> 可以以更友好的格式输出对象值:</p><pre><code class="js">const obj = {
propA: 1,
propB: 2,
propC: 3
};
console.table( obj );</code></pre><p><img src="/img/remote/1460000039913801" alt="" title=""></p><p><code>console.table()</code> 也可以用于一维或多维数组:</p><pre><code class="js">const arr1 = [
[ 1, 2, 3 ],
[ 4, 5, 6 ],
[ 7, 8, 9 ]
];
console.table( arr1 );</code></pre><p><img src="/img/remote/1460000039913802" alt="" title=""></p><p>或对象数组:</p><pre><code class="js">const arr2 = [
{ a: 1, b: 2, c: 3 },
{ a: 4, b: 5, c: 6 },
{ a: 7, b: 8, c: 9 }
];
console.table( arr2 );</code></pre><p><img src="/img/remote/1460000039913803" alt="" title=""></p><p>其他选项包括:</p><ul><li><code>console.dir( obj )</code> 在 JavaScript 对象中显示属性的交互式列表</li><li><code>console.dirxml( element )</code> 显示来自指定 HTML 或 XML 节点的后代元素的交互式树</li><li><code>console.clear()</code> 清除控制台中所有以前的消息。</li></ul><h2>3. 过滤日志消息</h2><p>浏览器以适当的颜色显示日志消息,但也可以对其进行过滤以显示特定类型。</p><p>单击 <strong>控制台</strong> 面板左上方的图标,可打开 Chrome 的侧栏:</p><p><img src="/img/remote/1460000039913804" alt="" title=""></p><p>请注意,<code>console.debug()</code> 仅在查看 <em>详细</em> 选项时才会显示消息。</p><h2>4. 使用 <code>printf-type</code> 消息</h2><p>所有日志类型都可以使用 C 样式的 <a href="https://link.segmentfault.com/?enc=Z0WdfgAwuiwj7JbPSuni1A%3D%3D.9Y%2BBa1FB%2BAUU262SX6dcyvtl6tG9I5PdiexaHYCiB8WPO8cxOR%2Fzw2VA1F9%2FaTP%2BkwYvEPJEqxa0Za9hBbRtpw%3D%3D" rel="nofollow"><code>printf</code>消息格式</a>,该格式定义带有 <code>%</code> 指示符的模板,该指示符用于替换变量。</p><p>例如:</p><pre><code class="js">console.log(
'The answer to %s is %d.',
'life, the universe and everything',
42
);
// The answer to life, the universe and everything is 42.</code></pre><h2>5. 记录样式</h2><p>可以使用在任何消息类型的第二个参数中作为字符串传递的标准 CSS 设置日志消息的样式。</p><p><code>%c</code> 消息中的标记指示样式的应用位置,例如</p><pre><code class="js">console.log(
'%cOK, things are really bad now!',
`
font-size: 2em;
padding: 0.5em 2em;
margin: 1em 0;
color: yellow;
background-color: red;
border-radius: 50%;
`
);</code></pre><p>在 DevTools 控制台中的结果是:</p><p><img src="/img/remote/1460000039913805" alt="" title=""></p><h2>6. 使用类似测试的断言</h2><p><code>console.assert()</code> 当条件失败时,可以使用类似 test 的命令来输出消息。</p><p>可以使用条件定义断言,然后在该条件失败时输出一个或多个对象,例如</p><pre><code class="js">console.assert(
life === 42,
'life is expected to be',
42,
'but is set to',
life
);</code></pre><p>或者,可以使用消息和替换值:</p><pre><code class="js">console.assert(
life === 42,
'life is expected to be %s but is set to %s',
42,
life
);</code></pre><p>当条件失败时,这两个选项都将显示断言错误:</p><p><img src="/img/remote/1460000039913806" alt="" title=""></p><h2>7. 运行堆栈跟踪</h2><p>可以使用以下命令输出构成当前执行点的所有函数调用的日志 <code>console.trace()</code>:</p><pre><code class="js">function callMeTwo() {
console.trace();
return true;
}
function callMeOne() {
return callMeTwo();
}
const r = callMeOne();</code></pre><p>跟踪显示了每个调用的行,可以在 “控制台” 窗格中折叠或展开该行:</p><p><img src="/img/remote/1460000039913807" alt="" title=""></p><h2>8. 组日志消息</h2><p>可以 <code>console.group( label )</code> 在开头和 <code>console.groupEnd()</code> 结尾使用来将日志消息分为命名组。</p><p>消息组可以嵌套,折叠或展开(<code>console.groupCollapsed( label )</code> 最初显示该组处于折叠状态):</p><pre><code class="js">// start log group
console.group('iloop');
for (let i = 3; i > 0; i--) {
console.log(i);
// start collapsed log group
console.groupCollapsed('jloop');
for (let j = 97; j < 100; j++) {
console.log(j);
}
// end log group (jloop)
console.groupEnd();
}
// end log group (iloop)
console.groupEnd();</code></pre><p><img src="/img/remote/1460000039913808" alt="" title=""></p><h2>9. 使用性能计时器</h2><p>该 <code>time( label )</code> 命令启动一个计时器。<code>timeEnd( label )</code> 到达关联的命令后,将报告经过的时间(以毫秒为单位)。</p><p>计时器可用于评估操作的性能-比管理自己的 Date() 计算更容易,更准确,例如</p><pre><code class="js">// start timer
console.time('bigloop');
for (let i = 999999999; i > 0; i--);
// show elapsed time
console.timeEnd('bigloop');</code></pre><p><img src="/img/remote/1460000039913809" alt="" title=""></p><p>一个页面上最多可以添加 <code>10,000</code> 个计时器,并且该 <code>console.timeLog( label )</code> 命令将报告经过的时间而不会停止计时器。</p><p>一个类似的选项是 <code>console.count( label )</code> 报告命令被调用的次数。</p><p><code>console.countReset( label )</code> 将命名计数器重置为零。</p><h2>10. 按名称调试和监视功能</h2><p><code>DevTools Sources</code> 面板(或 Firefox 中的 Debugger)允许您通过单击行号来打开文件并设置断点。</p><p>基于 Chrome 的浏览器还允许您通过 <code>debug( functionName )</code> 在控制台中输入来设置断点,例如</p><pre><code class="js">debug( doSomething );</code></pre><p>该函数必须在全局名称空间中可用,并且浏览器将在调用调试器后立即启动它。可以使用 <code>undebug( functionName )</code> 或通过重新加载页面来取消调试。</p><p>的 <code>monitor( functionName )</code> 和其相关联的 <code>unmonitor( functionName )</code> 命令被以类似的方式使用。他们没有停止执行,而是记录了对函数的每次调用并显示了传递的参数:</p><pre><code class="js">function doSomething called with arguments: "hello", 2</code></pre><h2>11. 查找并修复事件侦听器</h2><p>Firefox DevTools 检查器面板在任何附加了处理程序的 DOM 元素旁边显示一个事件图标。</p><p>单击该图标以查看功能名称,然后单击左侧的箭头图标以展开代码。</p><p>另外,“在调试器中打开” 图标可在 “调试器” 窗格中找到处理程序,因此你可以设置断点:</p><p><img src="/img/remote/1460000039913810" alt="" title=""></p><p>Chrome 的实现并不理想,但是您可以通过将 <code>DOM</code> 节点传递给 <code>getEventListeners()</code> 函数来查看所有事件侦听器。例如,<code>getEventListeners( $0 )</code> 显示应用于“元素”面板中当前突出显示的 <code>DOM</code> 节点的侦听器:</p><p><img src="/img/remote/1460000039913811" alt="" title=""></p><h2>12. 将属性复制到剪贴板</h2><p><code>console copy()</code> 命令可以将任何值复制到剪贴板。它可以是原始值,数组,对象或 DOM 节点。</p><p>传递 DOM 节点后,<code>copy()</code> 将该元素及其所有子元素的 HTML 放置在剪贴板上。</p><p>等同于右键单击一个节点,然后选择 “复制”,然后选择 “复制外部HTML” 。</p><p>该命令将 <code>copy( document.documentElement )</code> 复制整个 <code>HTML </code>文档。可以将其粘贴到文本编辑器中,以方便阅读标记。</p><h2>最后</h2><p>浏览器 DevTools 已从基本控制台演变为复杂的开发和调试环境。</p><p><code>console.log()</code> 始终会很受欢迎,但其他选项可能会提供更快,更轻松的方法来实现零错误!</p><p>本文翻译自文章:<a href="https://link.segmentfault.com/?enc=5mMeIGSDT51UXc4V%2BVTcmA%3D%3D.QKZRpWh7copRlmLdU8IPgwoHJp%2BwgrsEsq6rVdE40V7tBh4Rp7%2Bd8b%2FIKFv4NJHIYEFyt6a0581RC753zxLHiJwYeBaRbnjHhEyJwVxEo%2Bw%3D" rel="nofollow"><strong>12 Ways to Improve Your DevTools Console Logging</strong></a></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=ESvoBOEyjD6xDYyPVmIOoQ%3D%3D.5jy7q0QohQ4qbtMvhAw2NquARnicZ9%2BT3DxkSRS%2B9P1MgwkpzX%2BjFZ1X%2BKTo1OEgN8Ri4%2BLjNWrcZAxSeJIqlw%3D%3D" rel="nofollow">Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践</a></li><li><a href="https://link.segmentfault.com/?enc=zCRdG3AsenFOqnt0b%2FRvfw%3D%3D.tOmA9kpPm%2FVDHBLKEyCECV9uH6revSNbiWK4QsoRtk5msoQzawLC3JXEZ%2FxecVtQNprFJgFC5Ya3%2FO7ExOB%2BLg%3D%3D" rel="nofollow">TypeScript 中提升幸福感的 10 个高级技巧</a></li><li><a href="https://link.segmentfault.com/?enc=P0upO8a%2FCpvQNmkrunIAYQ%3D%3D.VA6Em94tzYQfur9qL57UH3YkIJEShD1Ef32qgC2UgKCwxBqUYfnxifhjB%2FWhrwvF2GVB9LqoGXc68Kaijgl13A%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目</a></li></ul><p>欢迎关注公众号: “<strong>全栈修炼</strong>”,回复 “<strong>电子书</strong>” 即可以获得下面 <strong>300</strong> 本技术精华书籍哦,猫哥 wx:CB834301747 。</p><p><img src="/img/remote/1460000039913812" alt="" title=""></p><p>通过阅读本篇文章,如果有收获的话,可以<strong>点个赞</strong>和<strong>在看</strong>,这将会成为我持续分享的动力,感谢~</p>
影响了一代代前端人的 20 个里程碑式的顶级开源项目!2021 成为里程碑的项目又是哪个呢?
https://segmentfault.com/a/1190000039906747
2021-04-26T23:24:37+08:00
2021-04-26T23:24:37+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
12
<p><img src="/img/remote/1460000039906749" alt="" title=""></p><p>大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>猫哥会在每周的周一给大家推荐一篇上周的 <strong>前端周趋势榜的 10 大项目</strong>,每月给大家推荐一篇上个月的 <strong>前端月趋势榜的 20 大项目</strong>,方便大家知道最近都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,以免错过了好的开源项目。</p><p><a href="https://link.segmentfault.com/?enc=0sYGxrX%2F%2Fdqcs6voo8ezUw%3D%3D.knH0A63WXI%2FL1RK2SDkG0dRB7ZiPXwC7lzmtNYIxeuh4UyvQ4FxBa%2FJQpuBBxlzE8rtUZACjY4JZQsfF5QqHxw%3D%3D" rel="nofollow">前端GitHub</a> 可以算是很多人主动获取一些开源项目和活跃开发者最好的途径。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=K3iAFqB2Fyt5uU8jBLZ94g%3D%3D.0f0Bh6QkYdPsaYDcsr5Dw8UPqMIG4i5hd6gkQ4pVUdAV8L7R%2BWiIirP5RhGbLTovsWzmLqr0abpaDmhm%2F9enRQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><img src="/img/remote/1460000039906750" alt="" title=""></p><p>本文介绍 2006 年至 2020 年的 20 个重要的前端项目,每一个都是里程碑式的顶级开源项目。</p><h2>1. jQuery</h2><p>2006 年 8 月</p><p>jQuery 由 John Resig 创建并于 2006 年发布,在 Ajax 框架与 Prototype.js,Dojo 或 YUI 之类的库的争夺中胜出。</p><p>成为几乎所有网页中都包含的事实上的标准库,即使在今天。</p><p>一个源于广阔的“插件”生态系统的精美软件。</p><p>提供统一的 API 来处理浏览器不一致的工作非常出色。</p><p>本月趋势: GitHub上的+ 114 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=VyvqnELZdQDxq7iXnSFa1w%3D%3D.jJoL0TxVOaAmbLayfPhd2%2FerxnJJ9YBYkrTbItm%2FiFttGx8%2B6jBKQl%2FXdGkv%2F%2Fs7" rel="nofollow">https://github.com/jquery/jquery</a></blockquote><h2>2. Node.js</h2><p>2009 年 5 月</p><p>由 Ryan Dahl 在 JavaScript V8 引擎之上创建的 Node.js 将 JavaScript 带到了服务器端。</p><p>强大的 API,命令行工具,IoT 设备和所有现代 Web 开发工具。</p><p>本月趋势: GitHub 上的 + 743 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=g0tPSvjbJStenGfodUgX6w%3D%3D.nsRlsG0PZrcmwhqFEohWCJAcaVPTvqzRy4shFjedywA%3D" rel="nofollow">https://github.com/nodejs/node</a></blockquote><h2>3. Express</h2><p>2009 年 6 月</p><p>Express 几乎与 Node.js 一样古老,但仍被认为是 Node.js 的标准 Web 框架。</p><p>由于其极简的方法,因此拥有深厚的中间件生态系统。</p><p>更现代的替代方法包括Nest,Fastify或Next.js。</p><p>本月趋势: GitHub 上的 + 402 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=EqXlsTurGvt%2BBSWExdF25Q%3D%3D.feoW%2BnhZAVfesKb31u4AIzT8KIhdpAUW%2BZzgROjU1TrSQohct0B9x9kutcG6XqPJ" rel="nofollow">https://github.com/expressjs/...</a></blockquote><h2>4. D3</h2><p>2010 年 9 月</p><p>Mike Bostok 创建的经典数据可视化库在将近 10 年后仍然有用。</p><p>许多图表库都建立在其强大的原语之上。</p><p>本月趋势: GitHub 上的 + 351 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=84Ojjl9pSdrCuhWHccMtzQ%3D%3D.SwKzcVNCmrWY3DrdTcMxQ%2Bz%2FAg9xQXrz7G8AkpazqAU%3D" rel="nofollow">https://github.com/d3/d3</a></blockquote><h2>5. Angular</h2><p>2010 年 1 月</p><p>2010 年,来自 Google 的 Angular 通过提供可在浏览器中运行的完整框架,开始颠覆开发人员构建应用程序的方式。</p><p>它没有增强服务器生成的 DOM,而是将页面的控制移至客户端,从而进入了“单页面应用程序”时代。</p><p>Angular 2 在 2014 年作为一个单独的项目发布。</p><p>本月趋势: + 2 ☆ 在 GitHub 上</p><blockquote><a href="https://link.segmentfault.com/?enc=UHs1kpvyQAx%2FNpRz8uYLJA%3D%3D.VJiQmi7Li4b5RWsnOl7StUvFqN2uV9qxvlGPnsDydaQIDDs2uT0AziV1wklLSnel" rel="nofollow">https://github.com/angular/an...</a></blockquote><h2>6. ember.js</h2><p>2011 年 5 月</p><p>一个 UI框架,该框架倾向于使用强约定以使 Web 开发人员更加高效。</p><p>在 JavaScript 的现代化过程中发挥了重要作用。</p><p>本月趋势: GitHub 上 + 35 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=Tc8qRxWcdOG%2FNh%2BqMSkz3g%3D%3D.1f08YwcFV0ZbWhZ7vZbvvq1KyMc%2BDB9fEYWM2Yl5LPCGQ9UurNaFf9OxUnnnZO7x" rel="nofollow">https://github.com/emberjs/em...</a></blockquote><h2>7. Bootstrap</h2><p>2011 年 7 月</p><p>Bootstrap 由 Twitter 在 2011 年开源,是一组 JavaScript 和 CSS 元素,用于向网页添加常见的小部件。</p><p>得益于整洁的文档,一致的开发人员体验和灵巧设计的响应式设计功能,它闪闪发光。</p><p>当开发人员在智能手机上浏览网页时,已帮助开发人员使网页适合移动设备浏览。</p><p>本月趋势: GitHub 上的 + 530 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=Z07YQaAKjVAPNumm7UohHQ%3D%3D.0IUxvmJnsXyGyUmIc%2FUCasnUaryKeDQnqWpchOdiYInij7tqgidrzXgM1pZZuCN8" rel="nofollow">https://github.com/twbs/boots...</a></blockquote><h2>8. Webpack</h2><p>2012 年 3 月</p><p>Webpack 是前端工具的关键部分,它能够从任何种类的资产生成 JavaScript 捆绑包。</p><p>第五版主要版本将于 2020 年仍在 Create React App 或 Next.js 等项目中使用,即将推出。</p><p>包裹和汇总是最受欢迎的两种。</p><p>本月趋势: + 247 ☆在GitHub上</p><blockquote><a href="https://link.segmentfault.com/?enc=gc4CDY4cSTnMXF4IZrXfew%3D%3D.sKpwaruCGDj66EB6%2BzJB0UGIon6jTwf7xPEr3e1dceTIygM9gdX1eoNFjgWH%2F%2BFm" rel="nofollow">https://github.com/twbs/boots...</a></blockquote><h2>9. TypeScript</h2><p>2012 年 10 月</p><p>为 JavaScript 提供静态类型安全性的 JavaScript 的超集。</p><p>赢得了转译者与竞争对手 Flow 的战斗,几乎成为前端和后端开发的标准。</p><p><code>DefinitelyTyped</code> 项目为 7000 多个软件包提供了其他类型!</p><p>趋势这个月: + 740 ☆ GitHub 上</p><blockquote><a href="https://link.segmentfault.com/?enc=pV%2Fgf4jPikB6lGALOtGfQg%3D%3D.7BP0rb8nXhGAYdm0%2FCWy0kZBOWUpZZOYBiJNtITezeUBTquv82EntUk6Eb7PjBsp" rel="nofollow">https://github.com/microsoft/...</a></blockquote><h2>10. electron</h2><p>2013 年 4 月</p><p>使用 Web 技术构建桌面应用程序的解决方案。</p><p>由流行的桌面应用程序使用,例如 VS Code,Slack ...</p><p>本月趋势: GitHub 上的 + 440 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=aE3KHwX4OtolpOMowZdAbg%3D%3D.%2Bx5KqQMhWcw4AKQZCFsV3FJ4iv02dHfC916WN9kZ2NKxSFf1HnA8mD%2F4Kbnws%2FLO" rel="nofollow">https://github.com/electron/e...</a></blockquote><h2>11. React</h2><p>2013 年 5 月</p><p>React 由 Facebook 开源,以创建动态,快速的 UI。</p><p>不是像 Angular 这样的完整框架,因为它仅处理视图层。</p><p>它的组件方法和 JSX 语法变得非常流行,并启发了许多项目。</p><p>本月趋势: GitHub 上的 + 1646 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=0z5SvmP8ktbdSvJo63oyBQ%3D%3D.xCpzfJSuHVZW9i5uQQfPohfAMkBUz8Oxxq4a1NMtURSj0CoBc3f09z9YpEhYvfDG" rel="nofollow">https://github.com/facebook/r...</a></blockquote><h2>12. Vue.js</h2><p>2013 年 7 月</p><p>Vue.js 在 React 之后仅两个月发布,采用了另一种方法来处理反应性。</p><p>通常被认为对初学者更友好。</p><p>没有像 React 与 Facebook 或 Angular 与 Google 这样的大型公司的支持,而是由 Evan You 创建的。</p><p>强大的社区,尤其是在中国。</p><p>版本 3 提供了巨大的改进,包括更好的 TypeScript 支持和 Composition API。</p><p>本月趋势: GitHub 上 + 1415 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=hToRcwzSXZRzgcaT%2BBLUbg%3D%3D.FuQB%2BGONkUeS6nWlq65EIZUrFKK7hlV%2BSJcNPkBLfJs%3D" rel="nofollow">https://github.com/vuejs/vue</a></blockquote><h2>13. babel</h2><p>2014 年 9 月</p><p>最初称为 6 to 5 的编译器 Babel 帮助使 JavaScript 的 ES6 版本流行,这是 React 成功的关键部分。</p><p>让开发人员使用 JavaScript 的最新功能编写代码,而不必担心浏览器的支持。</p><p>作为许多项目的依赖项包括在内。</p><p>本月趋势: + 184 ☆在 GitHub 上</p><blockquote><a href="https://link.segmentfault.com/?enc=YmDTchvBLG9zAvl7%2Fur1VQ%3D%3D.3RYfwranBnhPBMEDdLfW2z%2FHk%2FRkrowVYS8b9jYg2rQ%3D" rel="nofollow">https://github.com/babel/babel</a></blockquote><h2>14. VsCode</h2><p>2015 年 9 月</p><p>基于 Electron 的最流行的 IDE,用于编码 JavaScript 和 TypeScript 应用程序。</p><p>GitHub 上的 Atom 于 2012 年推出,它是该概念的先驱:使用 Web 技术构建的代码编辑器,可通过安装插件进行扩展。</p><p>凭借其 TypeScript 支持而发光……这两个项目均来自 Microsoft。</p><p>本月趋势: GitHub上为+ 1562 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=R4orNj4rLdAhJ0ur%2BRZU%2Fw%3D%3D.6RMyJ6njiKQvxnVo7joQNseoujD9H%2Br6yIGPiscDK%2BYHKLNgK5aPzIfrj16qz5f0" rel="nofollow">https://github.com/microsoft/...</a></blockquote><h2>15. react-native</h2><p>2015 年 1 月</p><p>利用 React Native,开发人员可以利用对 React 框架的了解,为 iOS 或 Android 构建移动应用程序。</p><p>本月趋势: GitHub 上的 + 577 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=5hkUofM1zuVL67jTEr2BXg%3D%3D.Kk%2B6%2Fw3EJrsD%2F4qB7p%2FNWmSxrAx4C%2Fa0cxkgHcfP2MwElpMJEaKQzmnW9Xgtl%2F10" rel="nofollow">https://github.com/facebook/r...</a></blockquote><h2>16. next.js</h2><p>2016 年 10 月</p><p>成为最受欢迎的框架,用于构建全栈 JavaScript 应用程序(在前端和后端均运行的应用程序)。</p><p>在前端使用 React,并提供服务器端渲染功能,以提供最佳的用户体验。</p><p>本月趋势: GitHub 上的 + 1345 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=IE0wA1%2BHjYTw0Wl3mLNtKw%3D%3D.x3wzrvOcXyYmUGdi2Erc39G2PXqz2%2Fb6EN7BpASVqPEVUp7uZEeQGWGoQq%2Bz6r6Y" rel="nofollow">https://github.com/vercel/nex...</a></blockquote><h2>17. puppeteer</h2><p>2017 年 5 月</p><p>一个 Node.js 库,用于控制无头 Chrome 浏览器执行诸如浏览器测试或 Web 抓取之类的操作。</p><p>本月趋势: GitHub 上的 + 746 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=1sr0Icj2YlOa%2FOJI8WRDXw%3D%3D.n5lT3s6RL0ZKsfzg9KZ6Wo4AjCWc141Fi6FrqHo8aC7mYqEZ68evJkOxv1Zf8137" rel="nofollow">https://github.com/puppeteer/...</a></blockquote><h2>18. deno</h2><p>2018 年 5 月</p><p>Node.js 发行 9 年后,Ryan Dahl 再次采用新的服务器端 JavaScript 运行时。</p><p>旨在解决与 Node.js 相关的几个问题。</p><p>没有集中的程序包管理器,可以从任何 URL 加载任何 JavaScript 依赖项。</p><p>2020 年最受欢迎的项目之一。</p><p>本月趋势: GitHub 上的 + 1304 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=dumWC3bl3uB6k2S1VK1j4g%3D%3D.Ymxy1ekwDG7uMHx%2F7nQh261BLchzTX83fawqeSxxVagcZrIVdL0n%2BVIBcQSFsRMd" rel="nofollow">https://github.com/denoland/deno</a></blockquote><h2>19. snowpack</h2><p>2019 年 2 月</p><p>一种构建工具,可利用有关 JavaScript 模块的最新更改来提供出色的开发人员体验。</p><p>本月趋势: GitHub 上的 + 431 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=1uA7BBHu0U%2By8nlmZ610BA%3D%3D.aEDvkX1eZNeLx%2B6dLWqud7EW8rve20pe9bOYgZguL2u5vbQlAM2U2iy2IQWJlWaf" rel="nofollow">https://github.com/snowpackjs...</a></blockquote><h2>20. Rome</h2><p>2020 年 2 月</p><p>Rome 由 Seb McKenzie 创建,旨在提供一个依赖项来处理所有前端工具(皮棉,测试,构建...)。</p><p>这个冒似还不是非常出名,这将是 2020 年的成功项目吗?还将有待时间验证!</p><p>本月趋势: GitHub 上的 + 114 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=WMGChNFKbD%2BWkrOgeKG5eQ%3D%3D.WcGYqRpuEW2uacLVdxnQvLOe08yuefF88gn3gbE77vU%3D" rel="nofollow">https://github.com/rome/tools</a></blockquote><h2>21. Vite ?</h2><p>2020 年</p><p>Vite 下一代前端工具</p><p>Vite 是 Vue 的作者尤雨溪开发的 Web 开发构建工具,它是一个基于浏览器原生 ES 模块导入的开发服务器,在开发环境下,利用浏览器去解析 import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用。同时不仅对 Vue 文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用 Rollup 打包。</p><ul><li>💡 即时服务器启动</li><li>⚡️ 快如闪电的 HMR</li><li>🛠️ 丰富的功能</li><li>📦 优化的构建</li><li>🔩 通用插件接口</li><li>🔑 全类型 API</li></ul><p>这将是 2021 年的成功项目吗?还将有待时间验证!</p><p>本月趋势: GitHub 上的 + 1403 ☆</p><blockquote><a href="https://link.segmentfault.com/?enc=5kqzb3gUMyJvGaHR7mlYOA%3D%3D.CHvCBDnvhDDRj74exPIqGYjg4428qLjNOsJdj3Q6tbs%3D" rel="nofollow">https://github.com/vitejs/vite</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039906751" alt="" title=""></p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=iCYgCWKIBFkrgqLHskdW%2FQ%3D%3D.MccfUN7qMUAQMZQk3cPkNRxh8iAUvpvfd7p%2FZzPe2rcE1MqTEEEQF6TvNWIqaSFhDVC%2F1GjxaMTjBHgXt7INnA%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><a href="https://link.segmentfault.com/?enc=pl83JH4Gu2ZwZAMmLy69%2Bw%3D%3D.dvRIUZaBG%2FqPOsEdXHJfPvCV8D%2FvI4TyS48pIy98Qft7fSOGe3l%2Fb95APvvz%2FsmpD8vFiGveE11PJFBFcRK51A%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a> 专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送。</p><p>原文链接请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=cfBoJJYuHeEG4ahCZ5ii5w%3D%3D.seSI%2Ft8%2FOk7KirPLXbqr1xCAY5aUCMgg0LfejVWagQtRooKiwAlBnL9FIWFNcldnnWzIlS4C77VryWguZfgGdg%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=ALDc1NNILkP02D7w8sVGUA%3D%3D.raWY1JBqybjWvEQQss7pXJh8CKrJxeufzM8K%2F4ejAF84jZPwEoU8HU4DUGGTuYS9Y1wF6NOZWb7lRY4EAP5CJA%3D%3D" rel="nofollow">猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!</a></li><li><a href="https://link.segmentfault.com/?enc=uwa3m26YDJBiysSZ5dVBtw%3D%3D.2rUaYxB%2B6acmLyaZOzwn2kOVMirrySMALxNrbx8urGFVSvt4ztf%2F06H8hRt6az8M%2Bc6eIfuI0b02XODxQDnrVg%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=S09rEWJnPAkOcWHUKLf7NQ%3D%3D.2PXJ3CMG5OXZrLO5ctxvzPBr6H5MxCuCknmGRUD%2FtRtRBUf7g9aSczMEAX2uDQOflKaue%2Fb0%2FZf0lV%2BY3MULEw%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=PV3KWvxcdLYqnukyZ7RPQw%3D%3D.Sj8Cs6zV4xULXaY5l1pJbZWEgHDsUb2IY3an0BCRYa0X%2F22Vb%2Bd9bxgJAOnc1G5XC1Dp8D729yHTjm4GfwVARA%3D%3D" rel="nofollow">程序员必备的 10 大 GitHub 仓库,前端占了 7 个!</a></li></ul><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得下面 <strong>300</strong> 本技术精华书籍哦,猫哥 wx:<strong>CB834301747</strong> 。</p><p><img src="/img/remote/1460000039862851" alt="" title=""></p><p>不知不觉,原创文章已经写到第 <strong>41</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后顺手点个赞或者转发吧,就当给猫哥一点鼓励吧。</p>
排名前十的 10 大顶级前端开源项目!1534K Star!
https://segmentfault.com/a/1190000039862840
2021-04-21T08:06:20+08:00
2021-04-21T08:06:20+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
14
<p>大家好,猫哥今天给大家推荐的是排名前十的 10 大前端开源项目,每个都有 100K 左右的 Star,都开源了些啥?</p><p>相信很多人都不知道吧,今天猫哥带大家来了解一下吧。</p><p><img src="/img/remote/1460000039862849" alt="" title=""></p><h2>1. freeCodeCamp</h2><ul><li>323 K</li></ul><p><img src="/img/remote/1460000039862845" alt="" title=""></p><p>FreeCodeCamp 是一个自由开源的学习编程的社区,致力于帮助人们利用零散时间学习编程。它的使命是 Learn to code and help nonprofits(学习编程,去帮助那些非盈利组织)。</p><p>FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程,游戏化程度非常高,学员可以通过线上聊天室和线下社区活动(Coffee and Code)相互帮助。</p><p>目前覆盖全球 160+ 个国家、1000+ 个城市,40W+ 开发者在平台学习。</p><p>FreeCodeCamp 国内的中文版请看 <a href="https://link.segmentfault.com/?enc=Tu6Vehlqjui0xrXisAU7gA%3D%3D.uW7jtiyLJ6h67hWfGD2bcxGJsy%2FG%2BUuHilK%2BC4Qe5wc%3D" rel="nofollow">https://freecodecamp.cn</a> (这是由国内爱好者翻译的中文版本)</p><blockquote><a href="https://link.segmentfault.com/?enc=Kky2TpnKhRTFXn3T2yycYA%3D%3D.LEeeYN%2F%2FQjVCD9aOAsBJKEZPk0ttLZsz3OAh8NstzwsZHWfC9kYIZZrFbb9t0sC%2F" rel="nofollow">https://github.com/freeCodeCa...</a></blockquote><h2>2. Vue.js</h2><ul><li>182K</li></ul><p><img src="/img/remote/1460000039862842" alt="" title=""></p><p>Vue.js 是一个渐进式 JavaScript 框架,也是目前前端最流行的框架。</p><p><strong>易用</strong></p><ul><li>已经会了 HTML、CSS、JavaScript?即刻阅读指南开始构建应用!</li></ul><p><strong>灵活</strong></p><ul><li>不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。</li></ul><p><strong>高效</strong></p><ul><li>20kB min+gzip 运行大小</li><li>超快虚拟 DOM</li><li>最省心的优化</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=D5yyMfzL3L6qHIrytpRFIg%3D%3D.V%2FC5jyEPUOT0%2F5SEsu9LMGgrWvyWUkj2JXqgos8Dkww%3D" rel="nofollow">https://github.com/vuejs/vue</a></blockquote><p>Vue 相关的项目可以看看:<a href="https://link.segmentfault.com/?enc=VkIdtTvSF4TTArs64N3M9w%3D%3D.Vi6PRpr1AdOLs10SU87AKAkXAXF2Y1cE0yvv4cnphuVPGu9EjndcxgzPfybOaN0k%2FIar4J8ShJivgwb%2F%2FCxx4A%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=oNG08Ol1O1W0vhEr8yzCqw%3D%3D.KSnQkroVn7N27fgXslejvWKTaQZ08%2B3vHPSINmOOGg%2FgFcVjoIt6P4%2ByLyopqio34IybEvho5PVX%2BYK1FO5IfA%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a> ,你会找到 Vue 的学习宝藏库。</p><h2>3. React</h2><ul><li>167K</li></ul><p><img src="/img/remote/1460000039862846" alt="" title=""></p><p>一个声明性,高效且灵活的 JavaScript 库,用于构建用户界面。</p><p><strong>声明式</strong></p><p>React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。</p><p>以声明式编写 UI,可以让你的代码更加可靠,且方便调试。</p><p><strong>组件化</strong></p><p>创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。</p><p>组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。</p><p><strong>一次学习,随处编写</strong></p><p>无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。</p><p>React 还可以使用 Node 进行服务器渲染,或使用 <a href="https://link.segmentfault.com/?enc=Q7%2FV3NVoQ3%2FZHl0M2pcWjw%3D%3D.UvrUkd8E6JA%2FFb6uiMvbjUFRzPKiylVZxa8CpphQz%2FE%3D" rel="nofollow">React Native</a> 开发原生移动应用。</p><blockquote><a href="https://link.segmentfault.com/?enc=HRUsw%2FgXbD6Ct0YKVD6%2FcQ%3D%3D.TeIcH5IypJDd9rbAaA5Lo%2Brbn2zGbGYGIS6nWVI54gcSLY9pMFd424lR8fyYeFhx" rel="nofollow">https://github.com/facebook/r...</a></blockquote><p>React 相关的项目可以看: <a href="https://link.segmentfault.com/?enc=7xjjByTyuqtdUNEuYCqqqA%3D%3D.z183y2cDhKjvqcB8rHF1SLNxW%2Bn8cTpEESxku79Csg%2FftDg110vw9z0cbx2ECFwfmURrl0%2F3LXYERSxG5mnX%2BA%3D%3D" rel="nofollow">一个 React 技术揭秘的项目,自顶向下的 React 源码分析</a>。</p><h2>4. awesome</h2><ul><li>157K</li></ul><p><img src="/img/remote/1460000039862850" alt="" title=""></p><p>awesome:令人敬畏的;使人畏惧的;可怕的;极好的</p><p>就像我们汇总我们常用的电脑环境软件一样,我们会找一些非常好的适合我们用的软件来做一个总结,awesome 项目也是如此,由于 GitHub 上有大量的开源项目,开发者就会根据需要汇总一些常用的好用的资源,并且根据 awesome 的主题做一下划分,开发语言等也有类似资源汇总。</p><blockquote><a href="https://link.segmentfault.com/?enc=kF2WZWw0dnPRBgrKQnzcIQ%3D%3D.tChv8uUDj33ysbHsfyvz9Xv9Vwb%2Blj700zprTY5%2FMqKq0bCQvxRYmgT4gPJUMB0W" rel="nofollow">https://github.com/sindresorh...</a></blockquote><h2>5. bootstrap</h2><ul><li>149K</li></ul><p><img src="/img/remote/1460000039862844" alt="" title=""></p><p>流畅,直观且功能强大的前端框架,可更快,更轻松地进行 Web 开发。</p><p>使用世界上最流行的前端开源工具包 Bootstrap 快速设计和自定义响应式移动优先站点,它具有 Sass 变量和 mixins,响应式网格系统,大量的预构建组件以及强大的 JavaScript 插件。</p><blockquote><a href="https://link.segmentfault.com/?enc=Utj6rVQMkJUONk%2FT1rdXiw%3D%3D.XO0QGxB6x9CpTVxszAF5OezkUZKB4hFKpxzNxllCgLEmadHh%2F44vS0TqtiU9j2qh" rel="nofollow">https://github.com/twbs/boots...</a></blockquote><h2>6. You-Dont-Know-JS</h2><ul><li>136K</li></ul><p>该项目为 YDNJS(You Don’t Know JS) 图书系列,包含一系列深入探讨 JavaScript 语言核心机制的书籍。</p><p><strong>内容大纲</strong></p><ul><li>入门与进阶</li><li>作用域与闭包</li><li>this 与对象原型</li><li>类型与文法</li><li>异步与性能</li><li>ES6 与未来</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=sMGkmNa9mLHN9cIi9Oi7Ew%3D%3D.BGxt4gEicHaqVBDP8TW0cwUcE2gbB6Lg6c%2FMxTsAB6aVQantKAgVUVqMG4exQuzo" rel="nofollow">https://github.com/getify/You...</a></blockquote><h2>7. vscode</h2><ul><li>114K</li></ul><p>Visual Studio Code 是一个运行于 OS X,Windows 和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台编辑器。</p><p>也是当今天前端最流行的编辑器!</p><p><img src="/img/remote/1460000039862843" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=4y8VGygOL8FFMU1I3WRhFQ%3D%3D.%2FUHOJAMZAAl7cZe7DVpOdpIzmuHT66DHYXjY0CAph4ktMAHP1Za28QMDLcNsbEKZ" rel="nofollow">https://github.com/microsoft/...</a></blockquote><h2>8. javascript</h2><ul><li>107K</li></ul><p>这个项目是 JavaScript 编程风格指南。</p><p>包含了:类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明</p><blockquote><a href="https://link.segmentfault.com/?enc=o8zSNiOxJOSIwqO%2BMXJWsw%3D%3D.fDTj2NOs1VrdyqdL3tUusv08qsUmrrO6C9ajqN0BQbW9dwc%2Fga56lmyEcF2UmVGO" rel="nofollow">https://github.com/airbnb/jav...</a></blockquote><h2>9. javascript-algorithms</h2><ul><li>103K</li></ul><p>该仓库包含了多种基于 JavaScript 的算法与数据结构。</p><p>每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。</p><p>数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器</p><p>算法包含了 算法主题 和 算法范式。</p><p>其中算法主题又包含了:数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。</p><p>算法范式:算法范式是一种通用方法,基于一类算法的设计。这是比算法更高的抽象,就像算法是比计算机程序更高的抽象。</p><p>算法范式包含了:BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。</p><p>这项目还出了对应的教学视频,总共 81 个视频讲解,每个视频大概 5 - 10分钟左右,还能学习英语哦 😉</p><p><img src="/img/remote/1460000037686958" alt="" title=""></p><blockquote>youtube 的教学视频:<a href="https://link.segmentfault.com/?enc=DpeTumuaXEa68m23xXGEAw%3D%3D.hkS4hQJe7yViQZ8O8nre0VwqM7DksBnEP6jc4G6dUAzUArzUyyJls3NMrbrGlUN6mVcUsvJ4mktSNE5zJf5Ia9KOKcKx5sUGfZiYg8xda5w%3D" rel="nofollow">https://www.youtube.com/playl...</a></blockquote><p>猫哥之前学习算法的时候,也在这个项目中收益良多呢!</p><p>而且这个项目还一直有维护和更新内容哦!真的非常不错的一个项目!</p><blockquote><a href="https://link.segmentfault.com/?enc=5dT3QMSXgB7rbT3JtTtTXQ%3D%3D.qBMnNFGWOoDgnytmv7GpgmVivGa%2Fhz3644iKkXO2Gk0iC9hltdT2PTVgAxOjIGfh3lFLHiObmJUHKxf4ojYI7Q%3D%3D" rel="nofollow">https://github.com/trekhleb/j...</a></blockquote><p>更多算法相关的项目推荐可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=RXlo4n4VDzoh7pW8lJOL3w%3D%3D.nrbYpoB8eLt5cP45b8jvM5bCsYg0N2tac2bWofrwD%2F8e6P2YbDGAQZ1%2Bc6tFd2NH8dqvuM4yJg6GA8C42UeOTA%3D%3D" rel="nofollow">7 个 GitHub 上超火的前端学习的数据结构与算法项目</a></p><h2>10. d3</h2><ul><li>96K</li></ul><p><img src="/img/remote/1460000039862848" alt="" title=""></p><p>使用 SVG、Canvas 和 HTML 使数据生动起来。</p><p>D3(或D3.js)是一个 JavaScript 库,用于使用 Web 标准可视化数据。D3 可帮助您使用SVG,Canvas 和 HTML 使数据栩栩如生。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法相结合,为您提供现代浏览器的全部功能,并为您的数据设计正确的可视界面提供了自由。</p><blockquote><a href="https://link.segmentfault.com/?enc=S2JbB5BEJsfMTEDhvh1mTw%3D%3D.m0qzVHWQIDqgpZniLYpsYfdmM%2BdKxDtxTGg11NXSnew%3D" rel="nofollow">https://github.com/d3/d3</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039862847" alt="" title=""></p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=VMn4EMkCoeUmZuzvWjtvHg%3D%3D.rGDh1T4ahAAuZ2XR%2BA8%2FU6AnQXlqoRQcm4xL1JfJEnI0rlwuc47Wr0FHqmj1go%2FMD%2B%2FDgfOvfcG1xHWqP3vzhg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><a href="https://link.segmentfault.com/?enc=ElOGPWF3xnmGANHCCPAcDQ%3D%3D.9gaHqoevdz%2FwGv9qbpEa3jFwof50S%2Fcq9s4KUBcA8cSJvMWXpRJxInhXa6Mrkx4gb1DmJr468E90s5SrEan6uQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a> 专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送。</p><p>原文链接在下方宝库:</p><blockquote><a href="https://link.segmentfault.com/?enc=tdDuHdAHRXG4Js6cceR%2BIA%3D%3D.eejD6Ds1w8IeCRz0Tk5I42H0nIlLtDjXJAALAfVdp9NDH4rF%2BWQSCXgNEI70%2Baufekuv3yymhXyWFYUEHg0evA%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=00fpNFHVz1kgCzgeUOm3ZA%3D%3D.u8A%2F0PUsVtwKyammbGZ0Z6HVMzWwIIArDGdHEqsA%2B4OYBQEiHsDhOeSnc9Wv%2F3kt1wW9g6Ckf%2BsjXMpO2UEz%2FQ%3D%3D" rel="nofollow">前端最流行的 10 大顶级开源项目!猛增 174K Star!</a></li><li><a href="https://link.segmentfault.com/?enc=HdcPsQfo13TLIDchhyQpyg%3D%3D.HptpkBNkAZt5%2FyT8iEOeHyCX7mdNU7%2BGMFHHuB3y0Zrg3Vp0TlSMTxMGuMXZAH8xGzh7K5kyFFdTmfTGvdyA2w%3D%3D" rel="nofollow">猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!</a></li><li><a href="https://link.segmentfault.com/?enc=xRukiTaKDTHYgSE6SfUfpQ%3D%3D.dob4IDTGk8KNuGxYprnUYMYypwbfiNHnlOtIzmIimVkh72JCDx63kyJQfmE8vF%2FLYMuKctlAkK6It%2FZxqumieQ%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=Fz5SEeKWCa5g04j8kd9DaA%3D%3D.f%2Ft4huOmDj3vqVvWa82RbVUqAn356YK2TtoSxRdAHjEVvqfyBzb6eA9HA4tnDqILtFGCtAa7KqnW2ziPNy%2FhZg%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li></ul><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得下面 <strong>300</strong> 本技术精华书籍哦,猫哥 wx:<strong>CB834301747</strong> 。</p><p><img src="/img/remote/1460000039862851" alt="" title=""></p><p>不知不觉,原创文章已经写到第 <strong>39</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后顺手点个赞或者转发吧,就当给猫哥一点鼓励吧。</p>
JavaScript ES2021 最值得期待的 5 个新特性解析
https://segmentfault.com/a/1190000039744750
2021-03-30T21:28:51+08:00
2021-03-30T21:28:51+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
6
<p><img src="/img/remote/1460000039744753" alt="" title=""></p><p>在写本文时,本文提到的新的 JavaScript 提案功能已进入第 4 阶段,并且几乎肯定会包含在 ES2021 中。你已经可以开始在 <a href="https://link.segmentfault.com/?enc=Gguf6r7fosXoJUD6fJx0kw%3D%3D.EuXv3xK4jovb12SRRnlmTwhy%2FVLwOaNGzxRfO%2Bhbgl8b84j11CoFKZPvl%2Bs%2BHVJF95%2BeIzPFfPooNuIgyPJuEg%3D%3D" rel="nofollow">最新版本的浏览器,Node.js 和 Babel 中使用</a>。</p><p><em>注意:ECMAScript 是 JavaScript 所基于的标准,由 TC39 委员会管理。ECMAScript 始终是一个不需要的名称,这会使一切都对初学者感到困惑。人们经常谈论 JavaScript 功能,但参考的是 ECMAScript 规范。</em></p><p><strong>更新特性</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=gLh8dei%2BqAFVUu%2FHQjt6mg%3D%3D.XZxvRvJt%2FUfVNuansge0slZiUuoXAmSMwq4RQuHZyNxa%2F84rJ1DZl9L%2Bmte%2F1BnMomFzmH074q%2Fi29JZBJwjow%3D%3D" rel="nofollow">数字分隔符</a>(<code>_</code>)</li><li><a href="https://link.segmentfault.com/?enc=6Wb1aE66CiINIWlZXDzDgg%3D%3D.A%2BJsK2l3X5D5tukL3KvOZXudV8apos9M6wEuneXBZhEQ2oCixaZGvcXy9idVc%2Fc5eS0rbY13yXQZ30nL3z34GQ%3D%3D" rel="nofollow">逻辑分配</a>(<code>&&=</code>,<code>||=</code>,<code>??=</code>)</li><li><a href="https://link.segmentfault.com/?enc=nYlIjwpyhB87Ce3%2BitsZsQ%3D%3D.JZGY%2F4Qx0ii1DFd3bgiHAXxvsPXbNDCFh%2Fxc7F73D4OsxvorGEVj2HGYp4DIiJsK" rel="nofollow">引用不足</a>(<code>WeakRef</code>和<code>FinalizationRegistry</code>)</li><li><a href="https://link.segmentfault.com/?enc=ZcmUNTSfnfrH4Sm9t5EbJg%3D%3D.H5n1XxmY8KoYs5J554YpV%2B43WYxkHqnTArNpCxBM3AJv8sZRkCamoLQj7dszyHgQ" rel="nofollow">Promise.any</a></li><li><a href="https://link.segmentfault.com/?enc=Bq2Epculd1Bttkcko2KRMg%3D%3D.6WTE4vHoOlS3sRy8cH0l0IPbnSioXN9HuIDbMxgfb0nbKaQ%2BmNr9Y4inebVvyOGmOQ%2FkjKfrw334AlUjHOaNqQ%3D%3D" rel="nofollow">String.prototype.replaceAll</a></li></ul><h2>1. 数值分隔符</h2><p>大数字文字很难使人眼快速解析,尤其是当有很多重复的数字时:</p><pre><code>1000000000000 1019436871.42</code></pre><p>为了提高可读性,<a href="https://link.segmentfault.com/?enc=997NN2a800noBGBCiPqV%2Bw%3D%3D.VWLcVU%2BOst%2BpPqdrpATL68Ynk1HpRv2col50wo7Q2UgSrQ4I%2BYXrHbAvtayICl6mkq3uZX7iLjTzyqy4IoICKQ%3D%3D" rel="nofollow">新的 JavaScript 语言功能</a> 启用了下划线作为数字文字中的分隔符。因此,上面的内容现在可以重写为每千位数字,例如:</p><pre><code>1_000_000_000_000 1_019_436_871.42</code></pre><p>现在,更容易说出第一个数字是 1 万亿,而第二个数字大约是 10 亿。</p><p>数字分隔符有助于提高各种数字文字的可读性:</p><pre><code>// A decimal integer literal with its digits grouped per thousand:
1_000_000_000_000
// A decimal literal with its digits grouped per thousand:
1_000_000.220_720
// A binary integer literal with its bits grouped per octet:
0b01010110_00111000
// A binary integer literal with its bits grouped per nibble:
0b0101_0110_0011_1000
// A hexadecimal integer literal with its digits grouped by byte:
0x40_76_38_6A_73
// A BigInt literal with its digits grouped per thousand:
4_642_473_943_484_686_707n</code></pre><p>它们甚至适用于八进制整数文字(尽管 <a href="https://link.segmentfault.com/?enc=ZbQ7k7vkG9g28ZE9QBqzlA%3D%3D.wdbO3V0vcoVbdXcdIdM8jZS35WzEX6rrkulFD1myEQwHQl%2F1bK9bdkNhhm3Usy35%2FTgvEvBophOpmkoMH3XNIg%3D%3D" rel="nofollow">我想不出</a> 其中分隔符为此类文字提供值 <a href="https://link.segmentfault.com/?enc=podu0NhYylvZifAGJji4uA%3D%3D.1r%2FWlODACjA2Qd4c%2FZqlJdN9nqYKx2c%2BEoUCqQkMkngxpy7hjN5HPUgpcFxeDcowcXVJFwHqo5nhAt6R5VGa5w%3D%3D" rel="nofollow">的示例</a>):</p><pre><code class="js">// A numeric separator in an octal integer literal: 🤷♀️
0o123_456</code></pre><p>请注意,JavaScript 还具有不带显式 <code>0o</code> 前缀的八进制文字的旧式语法。例如,<code>017 === 0o17</code>。在严格模式下或模块内不支持此语法,并且在现代代码中不应使用此语法。因此,这些文字不支持数字分隔符。使用 <code>0o17</code> 风格的文字代替。</p><h2>2. Promise combinators</h2><p>自从 ES2015 中引入 Promise 以来,JavaScript 完全支持两种 Promise 组合器:静态方法 Promise.all 和 Promise.race。</p><p>目前有两个新提案正在通过标准化流程:Promise.allSettled 和 Promise.any。有了这些添加,JavaScript 中将总共有四个诺言组合器,每个组合器支持不同的用例。</p><p>以下是这四个组合器的概述:</p><p><img src="/img/remote/1460000039744752" alt="" title=""></p><h3>2.1 Promise.allSettled</h3><p>Promise.allSettled 给你当所有输入的诺言是一种信号结算,这意味着他们要么履行或拒绝。如果您不在乎承诺的状态,而只是想知道工作何时完成,无论它是否成功,这都是很有用的。</p><p>例如,您可以启动一系列独立的 API 调用,并使用 Promise.allSettled 它们来确保它们已全部完成,然后再执行其他操作,例如删除加载微调器:</p><pre><code class="js">const promises = [
fetch('/api-call-1'),
fetch('/api-call-2'),
fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.
await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).
removeLoadingIndicator();</code></pre><h3>2.2 Promise.any</h3><p><code>Promise.any</code> 方法和 <code>Promise.race</code> 类似——只要给定的迭代中的一个 <code>promise</code> 成功,就采用第一个 <code>promise</code> 的值作为它的返回值,但与 <code>Promise.race</code> 的不同之处在于——它会等到所有 <code>promise</code> 都失败之后,才返回失败的值:</p><pre><code class="js">const promises = [
fetch('/endpoint-a').then(() => 'a'),
fetch('/endpoint-b').then(() => 'b'),
fetch('/endpoint-c').then(() => 'c'),
];
try {
const first = await Promise.any(promises);
// Any of the promises was fulfilled.
console.log(first);
// → e.g. 'b'
} catch (error) {
// All of the promises were rejected.
console.assert(error instanceof AggregateError);
// Log the rejection values:
console.log(error.errors);
// → [
// <TypeError: Failed to fetch /endpoint-a>,
// <TypeError: Failed to fetch /endpoint-b>,
// <TypeError: Failed to fetch /endpoint-c>
// ]
}</code></pre><p>此代码示例检查哪个端点响应最快,然后将其记录下来。只有当 <em>所有</em> 请求都失败时,我们才最终进入代码 <code>catch</code> 块,然后在其中处理错误。</p><p><code>Promise.any</code> 拒绝可以一次代表多个错误。 为了在语言级别支持此功能,引入了一种新的错误类型,称为 <code>AggregateError</code>。 除了上面示例中的基本用法外,还可以以编程方式构造 <code>AggregateError</code> 对象,就像其他错误类型一样:</p><pre><code class="js">const aggregateError = new AggregateError([errorA, errorB, errorC], 'Stuff went wrong!');</code></pre><h2>3. Weak references and finalizers</h2><p>此功能包含两个高级对象 <code>WeakRef</code> 和 <code>FinalizationRegistry</code>。根据使用情况,这些接口可以单独使用,也可以一起使用。正确使用它们需要仔细考虑,如果可能,最好避免使用它们。</p><p>一般来说,在JavaScript中,对象的引用是强保留的,这意味着只要持有对象的引用,它就不会被垃圾回收。</p><pre><code class="js">const ref = { x: 42, y: 51 };
// 只要我们访问 ref 对象(或者任何其他引用指向该对象),这个对象就不会被垃圾回收</code></pre><p>目前在 Javascript 中,WeakMap 和 WeakSet 是弱引用对象的唯一方法:将对象作为键添加到 WeakMap 或 WeakSet 中,是不会阻止它被垃圾回收的。</p><p>JavaScript 的 WeakMap 并不是真正意义上的弱引用:实际上,只要键仍然存活,它就强引用其内容。WeakMap 仅在键被垃圾回收之后,才弱引用它的内容。</p><p>WeakRef 是一个更高级的 API,它提供了真正的弱引用,Weakref 实例具有一个方法 deref,该方法返回被引用的原始对象,如果原始对象已被收集,则返回 undefined 对象。</p><p>JavaScript 中对象的引用是强引用,WeakMap 和 WeakSet 可以提供部分的弱引用功能,若想在 JavaScript 中实现真正的弱引用,可以通过配合使用 WeakRef 和终结器(Finalizer)来实现。</p><p><a href="https://link.segmentfault.com/?enc=LSvdocrYoIDWTnf6qPH6Dw%3D%3D.%2FE7tiJOcMluC9AGb1YjO0njB%2Fph33otvjFCvXqOasDqgvFaKVaNEq8svLae8v20ZcdoBExMU3w5FsAkbAiB4I1RVYo1ujmqWcpSgRbsHeMKl7MjzS6rpo33uONsOznWY" rel="nofollow">WeakRef</a> 是用来指目标对象不脱离垃圾收集保留它的对象。如果未通过垃圾回收回收目标对象,则 WeakRefs 可以取消引用以允许访问目标对象。</p><pre><code class="js">// Create a WeakRef object referring to a given target object
const ref = new WeakRef(targetObject)
// Return the WeakRef instance's target object, or undefined if the target object has been garbage-collected
const obj = ref.deref()</code></pre><p>使用 <a href="https://link.segmentfault.com/?enc=Py28Q9FS8u7gfqqW2x%2FVnA%3D%3D.Au51x1CyloMdTUYrEG4Sur8W4gqj6HRuvfTFbMT2MnEAnpaDF8miAV%2FsennQlnLjNn7kWufUgr%2FpNfrsdUnInyK%2BdQr16jQ0iy8As0QUsN%2FiRezEkwir9WOzBVZsUyxQgXENWGWqJ76vAq%2FAjLbTBg%3D%3D" rel="nofollow">FinalizationRegistry</a> 对象可以在垃圾回收对象时请求回调。</p><pre><code class="js">// Create a registry object that uses the given callback
const registry = new FinalizationRegistry([callback])
// Register an object with a registry instance so that if the object is garbage-collected, the registry's callback may get called
registry.register(target, heldValue, [unregisterToken])
// Unregister a target object from a registry instance
registry.unregister(unregisterToken)</code></pre><p>更多信息:<a href="https://link.segmentfault.com/?enc=rfbVqQgTwEIZps%2F8myrWjg%3D%3D.qeS3TI3dmLmVlnZr%2BVD7XwE4OSBHgY0NvXSmF26bzzSD579LlU6G7ix1OOkuvO64" rel="nofollow">TC39提案</a>,<a href="https://link.segmentfault.com/?enc=XywwUxHbo1jRqd%2B%2BlTucGw%3D%3D.tRX0kyEhs6hI%2BU7gYQqpZ%2FNjc7e%2FLHOxK2UctSY2orYYHrzvOGGGxvFngkOID3W1" rel="nofollow">V8</a></p><h2>4. String.prototype.replaceAll</h2><p>当前,如果不使用全局正则表达式,就无法替换字符串中子字符串的所有实例。与字符串参数一起使用时,<a href="https://link.segmentfault.com/?enc=Vqtnwi9CrWeuT5NNFZbY9A%3D%3D.aI0ee9o9PK7V4jk41DwapxJPs7ROlxfbCfmejtGsHB2R9vsae9tA4Zkh7Hi1padbAs8bAlMg6lrTf%2BCv8qt1Zv05jp0G9Iz%2BURwHX7mAw0CLnI70RMhZ7bk1U8pc0EXw" rel="nofollow">String.prototype.replace</a> 仅影响首次出现。</p><p><code>String.prototype.replaceAll()</code> 将为开发人员提供一种简单的方法来完成此常见的基本操作。</p><pre><code>'aabbcc'.replaceAll('b', '.') // 'aa..cc'
'aabbcc'.replaceAll(/b/g, '.') // 'aa..cc'</code></pre><h2>5. Logical assignment (逻辑分配)</h2><p>支持与新的运营逻辑分配 <code>&&=</code>,<code>||=</code> 和 <code>??=</code>。与它们的 <a href="https://link.segmentfault.com/?enc=pVvlUG2OJ2OY%2B71pN0j5lQ%3D%3D.QgVin8O9mokXprLzHXBgoCJBEY44nJQGnJNA8sQF%2FKKFSPUaQ2YevUodGK1eoFsh4dlIDfoF6TrjZfhZGJ4j7JWnIkmD498u36JVMIri9kBLrkwH3uQWsV37jrHeAi5e7XfK%2B2sTQTEAnAZGYx7tFg%3D%3D" rel="nofollow">数学和按位对应物不同</a>,逻辑分配遵循其各自逻辑操作的短路行为。仅当逻辑运算将评估右侧时,它们才执行分配。</p><pre><code class="js">// falsy: false, 0, -0, 0n, "", null, undefined, and NaN
// truthy: all values are truthy unless defined as falsy
// nullish: null or undefined
a ||= b
// Logical OR assignment
// Equivalent to: a || (a = b);
// Only assigns if a is falsy
a &&= b
// Logical AND assignment
// Equivalent to: a && (a = b);
// Only assigns if a is truthy
a ??= b
// Logical nullish assignment
// Equivalent to: a ?? (a = b);
// Only assigns if a is nullish</code></pre><h3>5.1 具体例子</h3><p><strong>带有 <code>&&</code> 运算符的逻辑赋值运算符</strong></p><p>仅当 LHS 值为真时,才将 RHS 变量值赋给 LHS 变量。</p><pre><code class="js">// Logical Assignment Operator with && operator
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2</code></pre><p><strong>带有 <code>||</code> 的运算符逻辑赋值运算符</strong></p><p>仅当 LHS 值为假时,才将 RHS 变量值赋给 LHS 变量。</p><pre><code class="js">// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2</code></pre><p><strong>带有 <code>??</code> 运算符的逻辑赋值运算符</strong></p><p>ES2020 引入了空值合并运算符,其也可以与赋值运算符结合使用。<br>仅当 LHS 为 undefined 或仅为 null 时,才将 RHS 变量值赋给 LHS 变量。</p><pre><code class="js">// Logical Assignment Operator with ?? operator
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// Line 5 can also be written as following ways
// num1 ?? (num1 = num2)</code></pre><h2>概括</h2><p><img src="/img/remote/1460000039744754" alt="" title=""></p><p>作为开发人员,跟紧语言的新特性是很重要的。</p><p>以上将在 2021 年发布的一些新功能,它们是进入第 4 阶段的提案,几乎可以肯定会包括在内,这些功能已经在最新的浏览器和 babel 中实现。</p><p>欢迎关注公众号: “<strong>全栈修炼</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p>参考文章:<a href="https://link.segmentfault.com/?enc=YS4CIsdH1fKe%2Bff7U5EmAA%3D%3D.8IoPCd46%2Bda%2B6Mdd0vjzEtFui6R3ANNGU3Fa%2F4iwHy53cN6RyAQhp6tgB%2B3dNKEr" rel="nofollow">JavaScript Features in 2021</a></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=KpqnauSRLVK3cNEolbaILQ%3D%3D.SWZnoy0A1oW4o06fJR93Z2BG0eYCpDbWOiX6JtPratpqqAj%2FpAqvgBMmv420BZjshA2QkIzRE8zoKhERPsYjbg%3D%3D" rel="nofollow">Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践</a></li><li><a href="https://link.segmentfault.com/?enc=9PFdCki9rKmBv7V2cQoplg%3D%3D.%2BBBFZEF3fHf%2FU6r463ILzLANJqKtvkPzvep1Afd3z2RBhc3aCoCYIA2bqkDnxt4rpo3TKYrSN1VkF5sYamQLDw%3D%3D" rel="nofollow">TypeScript 中提升幸福感的 10 个高级技巧</a></li><li><a href="https://link.segmentfault.com/?enc=Jwu5RBQOHsFlKoqhwhCXXQ%3D%3D.GtlAvueQFP3fgrB%2BrHUWInjjQQuJ44NvmmZWCDd%2Bik45L3MsFoLHFdS54nDcRDhMd0yVEE27vBPuxYetj7EZqQ%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目</a></li></ul><p>通过阅读本篇文章,如果有收获的话,可以<strong>点个赞</strong>和<strong>在看</strong>,这将会成为我持续分享的动力,感谢~</p>
猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!
https://segmentfault.com/a/1190000039729227
2021-03-28T17:29:39+08:00
2021-03-28T17:29:39+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
57
<p><img src="/img/remote/1460000039729235" alt="" title=""></p><p>大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>关于猫哥,大家可以看看我的年终总结 <a href="https://link.segmentfault.com/?enc=ptVhxY4ZK8y9GZXxpYiwXw%3D%3D.k2BukD1lkhv9FHbBesE38Goqngq2p%2F9nimCxubAINRzaOP%2BQFmPaWAhYq9jyb5NuAYTMLu3o0gjFz6p%2FEdq6cA%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>。</p><p>今天给大家推荐 2020 年增长数最多的 10 大顶级前端学习资源项目!</p><p>看完这 10 大顶级项目,你会发现原来 GitHub 上也有这么多的 JavaScript 学习资源!</p><h2>1. javascript-algorithms</h2><ul><li>2020 年增长 31.9K</li></ul><p><img src="/img/remote/1460000039729240" alt="" title=""></p><p>该仓库包含了多种基于 JavaScript 的算法与数据结构。</p><p>每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。</p><p>数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器</p><p>算法包含了 算法主题 和 算法范式。</p><p>其中算法主题又包含了:数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。</p><p>算法范式:算法范式是一种通用方法,基于一类算法的设计。这是比算法更高的抽象,就像算法是比计算机程序更高的抽象。</p><p>算法范式包含了:BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。</p><p>这项目还出了对应的教学视频,总共 81 个视频讲解,每个视频大概 5 - 10分钟左右,还能学习英语哦 😉</p><p><img src="/img/remote/1460000037686958" alt="" title=""></p><blockquote>youtube 的教学视频:<a href="https://link.segmentfault.com/?enc=eTg8ijvX7bKAKqHXKp2zZQ%3D%3D.b%2Ff2VrsT2QWON0mf882uTKzYowLLT0t7GLMiMZCeOyRHxyaQgNSrAhFpAEDMFyGQzayFpudVoFRF1BIxr5j1mbSfrT%2FZxvEz%2FnS%2F%2Bx09H44%3D" rel="nofollow">https://www.youtube.com/playl...</a></blockquote><p>猫哥之前学习算法的时候,也在这个项目中收益良多呢!</p><p>而且这个项目还一直有维护和更新内容哦!真的非常不错的一个项目!</p><blockquote><a href="https://link.segmentfault.com/?enc=LTVn7AP8LLJL22%2Bq%2Bi5GaQ%3D%3D.Yq7aSJ181y4iO2i6Fc1azKSkwS8KhjZjYJvNUMl8LiVT2xsxDuoYYst%2F6sw7Fcfu4i10wW0fLSKCqFpGwcS%2BGQ%3D%3D" rel="nofollow">https://github.com/trekhleb/j...</a></blockquote><p>更多算法相关的项目推荐可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=R5pXDggqqELrOKT7UNTrIA%3D%3D.Aq8T%2BBioP0b0IjGEIRcgyv0viUlKo6xLLFvA4eZjkojQaB4kXQGQGQvBkIHbPb3BEjKi03yF%2FJSSey1uOFV1BQ%3D%3D" rel="nofollow">7 个 GitHub 上超火的前端学习的数据结构与算法项目</a></p><h2>2. nodebestpractices</h2><ul><li>2020 年增长 20.2K</li></ul><p><img src="/img/remote/1460000039729239" alt="" title=""></p><p>Node.js 最佳实践。</p><p>这个项目是对 Node.js 最佳实践中排名最高的内容的总结和分享。</p><p>这里是最大的汇集,且每周都在增长 - 当前,超过 50 个最佳实现,样式指南,架构建议已经呈现。</p><p>目录</p><ul><li>项目结构实践 (5)</li><li>异常处理实践 (11)</li><li>编码规范实践 (12)</li><li>测试和总体质量实践 (8)</li><li>进入生产实践 (16)</li><li>新: 安全实践(23)</li><li>Performance Practices (coming soon)</li></ul><p>比如 错误处理最佳实践 中 使用 Async-Await 和 promises 用于异步错误处理</p><p>TL;DR: 使用回调的方式处理异步错误可能是导致灾难的最快的方式(a.k.a the pyramid of doom)。对您的代码来说,最好的礼物就是使用规范的 promise 库或 async-await 来替代,这会使其像 try-catch 一样更加简洁,具有熟悉的代码结构。</p><p>否则: Node.js 回调特性, function(err, response), 是导致不可维护代码的一个必然的方式。究其原因,是由于混合了随意的错误处理代码,臃肿的内嵌,蹩脚的代码模式。</p><blockquote><a href="https://link.segmentfault.com/?enc=H%2B1wX8v%2BjrqMZPIowmdrpQ%3D%3D.XGl%2FTXzZBCO42lvZQ0FAK9RGMRvHapIcXEM6Vqj%2FZZfoWEgSHWGU6LZj0ShlaQZO8blIVLk6TxIz7pIZULKjHQ%3D%3D" rel="nofollow">https://github.com/goldbergyo...</a></blockquote><h2>3. You-Dont-Know-JS</h2><ul><li>2020 年增长 18K</li></ul><p><img src="/img/remote/1460000039729232" alt="" title=""></p><p>该项目为 YDNJS(You Don’t Know JS) 图书系列,包含一系列深入探讨 JavaScript 语言核心机制的书籍。</p><p><strong>内容大纲</strong></p><ul><li>入门与进阶</li><li>作用域与闭包</li><li>this 与对象原型</li><li>类型与文法</li><li>异步与性能</li><li>ES6 与未来</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=Vl4UUDJPwG0WMwfks25gOA%3D%3D.zEwEzMl1v%2B5Ww8F2ebND9EbNGAudkY%2BRUqL9P88F2XKn0soZMklz6MN5X2w0TshU" rel="nofollow">https://github.com/getify/You...</a></blockquote><h2>4. clean-code-javascript</h2><ul><li>2020 年增长 15.1K</li></ul><p><img src="/img/remote/1460000039729229" alt="" title=""></p><p>优秀的 JS 代码规范。</p><p><img src="/img/remote/1460000038477707" alt="" title=""></p><p>比如:<strong>对相同类型的变量使用相同的关键字</strong></p><p>Bad:</p><pre><code class="js">getUserInfo();
getClientData();
getCustomerRecord();</code></pre><p>Good:</p><pre><code class="js">getUser();</code></pre><p>再比如:<strong>使用可搜索的命名</strong></p><p>在开发过程中,我们阅读代码的时间会远远超过编写代码的时间,因此保证代码的可读性与可搜索会非常重要。</p><p>切记,没事不要坑自己。</p><p>Bad:</p><pre><code class="js">//525600到底啥意思?
for (var i = 0; i < 525600; i++) {
runCronJob();
}</code></pre><p>Good:</p><pre><code class="js">// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
runCronJob();
}</code></pre><blockquote><a href="https://link.segmentfault.com/?enc=d%2B6Bn%2ByCJb1wnp3VvO5L0A%3D%3D.da6XFBQ%2B8QMUFKA8LQaBwBXl9%2BNld39ounf0hDzWLy88dXuQsvdaEutiZtAPW3mYUn4ovlkoFBdJ1L5Q%2FtDjrQ%3D%3D" rel="nofollow">https://github.com/ryanmcdermott/clean-code-javascript</a></blockquote><h2>5. 30-seconds-of-code</h2><ul><li>2020 年增长 13.3K</li></ul><p><img src="/img/remote/1460000039729231" alt="" title=""></p><p>该项目讲的是满足你所有开发需求的简短代码段,里面都是些经常会用到而且是非常经典的代码,非常值得学习!</p><p>比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。</p><p><img src="/img/remote/1460000038477697" alt="" title=""></p><p>比如:<strong>你必须知道的 4 种 JavaScript 数组方法</strong></p><p>Array.prototype.map()</p><pre><code class="js">const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]</code></pre><p>Array.prototype.filter()</p><pre><code class="js">const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]</code></pre><p>Array.prototype.reduce()</p><pre><code class="js">const arr = [1, 2, 3];
const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6
const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]</code></pre><p>Array.prototype.find()</p><pre><code class="js">const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1</code></pre><p>又比如:<strong>如何在 JavaScript 中实现睡眠功能?</strong></p><p>同步版本</p><pre><code class="js">const sleepSync = (ms) => {
const end = new Date().getTime() + ms;
while (new Date().getTime() < end) { /* do nothing */ }
}
const printNums = () => {
console.log(1);
sleepSync(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)</code></pre><p>异步版本</p><pre><code class="js">const sleep = (ms) =>
new Promise(resolve => setTimeout(resolve, ms));
const printNums = async() => {
console.log(1);
await sleep(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)</code></pre><p>其实上面讲到的事例里面还提供 api 和方法的讲解的,方便读者能看懂的,这里就不写出来了。</p><p>还想学更多的 经典 js 代码片段,请看下面的仓库</p><blockquote><a href="https://link.segmentfault.com/?enc=DCpuVOnGshKvm3oRPRbmWg%3D%3D.A%2FDe%2FgOiUnBEbSbbGsdnl8ceCwiDSbMoQ%2FBQ9iYdZPT6ThjB%2F%2Brdra62aVT2%2B9Iv00mhglDKgDmy1%2FtRO7EOTw%3D%3D" rel="nofollow">https://github.com/30-seconds...</a></blockquote><h2>6. javascript</h2><ul><li>2020 年增长 11.8K</li></ul><p><img src="/img/remote/1460000039729233" alt="" title=""></p><p>这个项目是 JavaScript 编程风格指南。</p><p>包含了:类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明</p><blockquote><a href="https://link.segmentfault.com/?enc=8SNNoSjigZJK84699xq6ng%3D%3D.v%2FXeFRl7xBaFP%2FboBq3gLntPsmU64dJsF6fl9hhfqkzLsZhkmYcf5QUuX7qUatQ0" rel="nofollow">https://github.com/airbnb/javascript</a></blockquote><h2>7. tech-interview-handbook</h2><ul><li>2020 年增长 10.6K</li></ul><p><img src="/img/remote/1460000039729230" alt="" title=""></p><p>技术人员求职面试,单刷leetcode上的大厂题库可能还不够。</p><p>简历怎么写才能吸引HR的眼光,可能会被技术老大问到哪些常见问题,拿到Offer之后怎样才能让自己的优势最大化然后优中选优?</p><p>面对这些赤果果的问题,目前就职于Facebook的新加坡小哥Yangshun Tay就整理了一份干货。</p><p>面试全流程需要注意的事项都在里面了,包含从简历准备、面经和谈判全过程,教你如何避雷不踩坑。</p><p>精心策划的内容可帮助您获得下一次技术面试的机会,重点是算法。</p><p>除了常见的算法问题外,其他出色的功能还包括:</p><ul><li>如何准备编码面试</li><li>面试备忘单-直截了当的注意事项</li><li>按主题分类的算法技巧和最佳实践问题</li><li>“前端面试问题”答案</li><li>顶尖科技公司的面试形式</li><li>顶尖科技公司提出的行为问题</li><li>在面试结束时问您的面试官的好问题</li><li>有用的简历提示,以使您的简历受到关注以及注意事项</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=ZS2xD%2BemFgLi8donaNdDyQ%3D%3D.rbm3w55Haozs%2BDZrCNVwUwGLCVpm6eVX1iJAxaO7LwlnlBCa%2FBdlIuXQkg%2Fad5VvZ5vgpv5Xa3%2B%2B2GvaA7HOZQ%3D%3D" rel="nofollow">https://github.com/yangshun/t...</a></blockquote><h2>8. freeCodeCamp</h2><ul><li>2020 年增长 10.4K</li></ul><p><img src="/img/remote/1460000039729234" alt="" title=""></p><p>FreeCodeCamp 是一个自由开源的学习编程的社区,致力于帮助人们利用零散时间学习编程。</p><p>它的使命是 Learn to code and help nonprofits(学习编程,去帮助那些非盈利组织)。</p><p>FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程,游戏化程度非常高,学员可以通过线上聊天室和线下社区活动(Coffee and Code)相互帮助。</p><p>目前覆盖全球 160+ 个国家、1000+ 个城市,40W+ 开发者在平台学习。</p><blockquote><a href="https://link.segmentfault.com/?enc=8wT8XDhW5OeJ9RKAj9iCew%3D%3D.RodnIVntaS3IF%2FDCIdgS9G7Zhf4RQy6FBEEOSDMm6b50uI1VYTD31hAr8ivceKow" rel="nofollow">https://github.com/freeCodeCa...</a></blockquote><h2>9. Front-End-Checklist</h2><ul><li>2020 年增长 9.2K</li></ul><p><img src="/img/remote/1460000039729236" alt="" title=""></p><p>该项目是详尽的关于前端开发的清单,它列出了将 HTML 页面投入生产之前需要进行测试的所有元素。</p><p>它基于众多前端开发人员的多年经验,其中一部分整合自其他的开源清单。</p><p>内容包含:</p><ul><li>Head</li><li>HTML</li><li>Webfonts</li><li>CSS</li><li>Images</li><li>JavaScript</li><li>Security</li><li>Performance</li><li>Accessibility</li><li>SEO</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=LnBYhNUa%2FkKGFKqaiD1Ozg%3D%3D.K0OJarYfdQurYghj7IG%2FlXZaLG4T%2FDpVUaU7KwyPzo8Fm9lttZ4%2FR3eCOglxpfpxDeyycEQXBDnxMDa16WEWdQ%3D%3D" rel="nofollow">https://github.com/thedaviddi...</a></blockquote><h2>10. vanillawebprojects</h2><ul><li>2020 年增长 8.2K</li></ul><p><img src="/img/remote/1460000039729237" alt="" title=""></p><p>新手上路最开始用的就是基础的 HTML+CSS+JS 三件套,而在框架和库越来越多的现在,更多的时候使用它们来提高效率是常见的选择。</p><p>这个项目则是反过来,是使用老三件套实现的一些小项目合集,不管是为了更好理解框架,还是为了验证一下自己的知识水平,重新操刀老三件套都不失为一个好选择,要知道不管是什么框架和库,基础都是由这三板斧搭建起来的。</p><blockquote><a href="https://link.segmentfault.com/?enc=RBxHHBwIPDJ6iPxydw%2Fkew%3D%3D.tSafKGe4ENAU7fr5nE1yNaUnIrsumlsTeNBk9b8RimN8mFSIrQzVMz5%2BJiQoXFY7MSAJMTFOgEK496Bo%2BhvsPw%3D%3D" rel="nofollow">https://github.com/bradtraver...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039729238" alt="" title=""></p><p>不知不觉,原创文章已经写到第 <strong>33</strong> 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。</p><p>原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后顺手点个赞或者转发吧,给猫哥一点鼓励吧。</p><p>往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=tFY3WxhrOiDVuP5x%2FDf6Sg%3D%3D.BpIAt9FjLhaQs3xVYAjZl0hrca2wc8IPhyFeDRFw0sFU5qOX3nuHHaljWj4NgsywelHaYhnwRSm2TzeicnpCTA%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=%2BeXLNL33xgM0SLEX%2FhPcAA%3D%3D.pQnNYRfzKf2cQH4U4xUE6R6Tm7waLacS4bS6rBQdw9gRVooc2PUvLu6j7m9Di09ka%2FnSoiK7wTDAIl6Pih%2FwQw%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=rxcBK7%2FUhegnwU2xU%2FWjWg%3D%3D.rsWJCIcuGGOdlzzdYTfAqCOoFO5AnDupjwNqUSeWPmyd%2Fb7T40mQRXNt3sxBXFySSxTdTH8MlDJWFhNF%2F9tKEg%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称,致力于打造最优质的前端开源项目资源库。</blockquote><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得上面 <strong>160</strong> 本前端精华书籍哦,猫哥 WX:<strong>CB834301747</strong> 。</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=dBgc2VRtXjPph4beVUTYXQ%3D%3D.rnoxu6IkY6oYUSby4TJ%2FlRVkuOh7%2FkrYdGomMrA56vYmKxXYrRYvrHJTJUvy68dNFch2KANxa%2Fz2xOyYOmp8Ew%3D%3D" rel="nofollow">推荐 7 个 Vue2、Vue3 源码解密分析的开源项目</a></li><li><a href="https://link.segmentfault.com/?enc=jjD8S2Cv9f1eJIUHUhov0Q%3D%3D.ri9pw2RbSI7WguFefbofkb2%2FgmSJfMejBKFY83Zh5Jqc2Nhm8%2BSRM34VoocnTYmH%2BNmjLlw6mMqeNbJ0vN3T4Q%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=KWhi8NxDftfspmtalRpwNw%3D%3D.qmKf4lBND6BkvRA65v6ZltIBTs4jfHrDh3tL7P%2BIWtRY7ZfuUHI691jE9ohtDEqUf3Ke3Qe8g%2FOfHJgyUzb2YQ%3D%3D" rel="nofollow">GitHub 2W 星:一键生成前后端代码</a></li><li><a href="https://link.segmentfault.com/?enc=JMO1eua0mCE%2BPxRQcRt0EA%3D%3D.2vfR4SS9NA1WsaoJT9u%2BmgbpyebJ06%2Fas469EzBiPWRTR0pXmRsIKQFY1ONQj3OYPJkTjlw80O8b1l9qdGh6Ig%3D%3D" rel="nofollow">程序员必备的 10 大 GitHub 仓库,前端占了 7 个!</a></li></ul><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p>原创不易,给点鼓励吧</p>
推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目 👍
https://segmentfault.com/a/1190000039691166
2021-03-22T23:06:22+08:00
2021-03-22T23:06:22+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
59
<p>大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>1. 为什么要学习源码 ?</h2><ol><li>阅读优秀的代码的目的是让我们能够写出优秀的代码。</li><li>不给自己设限,不要让你周围人的技术上限成为你的上限。</li></ol><p>其实就跟我们写作文一样,你看的高分作文越多,写出高分作文的概率就越大。</p><p>基于现在的程序员工作模式(模块化开发,只需要拿到需求做自己的部分),别说看源码,甚至就连项目里的代码都懒的去看,我认识的很多程序员就是这样的,一个项目摸了两三年,你要问他项目中 webpack 都干了哪些事情,他的回答是不知道,反而趾高气扬的告诉你,那些他从来都用不上,看了也没什么用,也看不懂,这里省略内心千字脏文。</p><p>阅读主要目的 是为了帮助我们 积累素材,不要书到用时方恨少,看到美女我们应该能有一万种词语去形容,如气若幽兰,美艳不可方物,一笑倾城,再笑倾国,世间尤物,而不是简短的几个字,我艹,美女!</p><p><strong>功利性的阅读源码</strong></p><p>功利性即指有目的性的,明确知道自己干完某一件事后能得到什么样的回报,所以首先你要知道你想得到什么?</p><p>看每一本书都有明确的目的,想学会理财,就得看理财相关的书,想学点技术,就得看点技术相关的书</p><p>看源码也是一样,你对 Vue.use 之后发生了什么比较好奇,或者是你觉得现在面试都需要会看点源码,这都很好,至少你有明确的诉求</p><p>凡事只要有了功利属性,才更容易走的下去,否则就是真香警告。</p><h2>2. Vue2</h2><p>Vue 虽然出到 Vue3 了,也出了不少 Vue3 的源码教程,但是 Vue2 还是很棒的框架,它的源码还是值得细读的,所以先推荐几个 Vue2 的源码项目。</p><h3>2.1 vue-analysis</h3><p><img src="/img/remote/1460000039691169" alt="" title=""></p><p>👍 Vue.js 源码分析</p><p>目前社区有很多 Vue.js 的源码解析文章,但是质量层次不齐,不够系统和全面,这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理,让同学们可以彻底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0,并且之后会随着版本升级而做相应的更新,充分发挥电子书的优势。</p><p>这本电子书是作为 <a href="https://link.segmentfault.com/?enc=PPATfAbeBtiphfQdMtNCCQ%3D%3D.PPo6Acjd5Bd2wYTI19Tzyu7WTEzQGcEKuR62AXQBtlTK6vxUOUYpPu8Hb2Ooq%2Ftr" rel="nofollow">《Vue.js 源码揭秘》</a> 视频课程的辅助教材。电子书是开源的,同学们可以免费阅读,视频是收费的,25+小时纯干货课程,如果有需要的同学可以购买来学习,<strong>但请务必支持正版,请尊重作者的劳动成果</strong>。</p><blockquote><a href="https://link.segmentfault.com/?enc=9tP9VPvTKldsozdfYHoV7g%3D%3D.GHP25k3MpjJz9gWXL7fVPLsWtSdfT2zMjHj5Cf8WeuXtnGWslXNEWSGrVIo1GaNw" rel="nofollow">https://github.com/ustbhuangy...</a></blockquote><h3>2.2 vue-design</h3><p><img src="/img/remote/1460000039691170" alt="" title=""></p><p><strong>超级详细 - 逐行级别的分析</strong></p><p>所谓逐行并非一行接着一行,逐行指的是讲解的详细程度,这套文章将致力于覆盖所有核心代码,毕竟每一句代码都有他存在的意思,假如我们不讲明白任何一句代码的意义,那又怎么敢说是源码分析呢?</p><p><strong>深度分析 - 讲解 issue</strong></p><p>我们知道 Vue 这个项目自诞生以来一直都在不断的更新完善,比如添加新的特性,修复已知bug等等。而在这个过程中源码也将越来越完善,这也意味着代码曾经并不完善,本套文章在分析源码时除了告诉你这段代码为什么这么写之外,还会根据相关 issue 分析这段代码之前是怎么写的以及存在的问题。</p><blockquote><a href="https://link.segmentfault.com/?enc=0D1I9HBoBzsg7z%2BeBCe%2FGw%3D%3D.VEnO0T1z%2Bj82r%2FqYQC76tZPMtpVPf3Cji3ihgtaWZYM%3D" rel="nofollow">http://hcysun.me/vue-design/zh/</a></blockquote><h3>2.3 vue-family-mindmap</h3><p><img src="/img/remote/1460000039691168" alt="" title=""></p><p>用一张思维导图总结了 Vue | Vue-Router | Vuex 源码与架构要点。</p><p>以上内容是笔者最近学习 Vue 源码时的收获与所做的笔记,本文内容大多是开源项目 <strong>Vue.js 技术揭秘</strong> 的内容,只不过是以思维导图的形式来展现,内容有省略,还加入了笔者的一点理解。</p><p>笔者之所以采用思维导图的形式来记录所学内容,是因为思维导图更能反映知识体系与结构,更能使人形成完整的知识架构,知识一旦形成一个体系,就会容易理解和不易忘记。</p><blockquote><strong>注意</strong>:文章的图片可能上传时会经过压缩,可能有点模糊,不过本文用到的 所有 <strong>超清图片</strong> 都已经放在 <a href="https://link.segmentfault.com/?enc=JmdDYm4Mpkhy8HCXuW3NhQ%3D%3D.HwltWTVPcHkDnzbJ0fqNdKuo0CKsB9cRaJBEi4Ap1yAo%2BFqKlF5rOrIva%2FWAlXRfdhpTgng6LW3iNAiV1y2W2Q%3D%3D" rel="nofollow">github</a> 上,而且还有 <strong>pdf 格式、markdown 语法、思维导图 的原文件</strong>,自己可以根据 <strong>思维导图原文件</strong> 导出相应的超清图片。</blockquote><blockquote><a href="https://link.segmentfault.com/?enc=WB4u8xsGtDlGfkk1JPSsKw%3D%3D.sgUZYnUWh3q72%2Bdyw6teU4eL3nTgiLMVKhYK22r25i7bpPckMpNbfWgkyO%2BXRa2S%2FgHbHA3nnHgzI0TnETEaHg%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><h3>2.4 learnVue</h3><p>Vue.js 源码分析,记录了个人学习 Vue.js 源码的过程中的一些心得以及收获。以及对于 Vue 框架,周边库的一些个人见解。</p><p>在学习的过程中我为Vue.js(2.3.0)、Vuex(2.4.0)、Vue-router(3.0.1)加上了注释,分别在文件夹 vue-src、vuex-src 以及 vue-router-src 中,希望可以帮助有需要的同学更好地学习理解 Vue.js 及周边库的源码。</p><blockquote><a href="https://link.segmentfault.com/?enc=YUCR5o3LmpJOxndLaMi%2FiA%3D%3D.qBMqcRmr4PWmFuFpNDD2gXevUb5d%2BRYUTvBGwWq%2BAjfv6MuWtsOhzYaHI7fSFgMD" rel="nofollow">https://github.com/answershut...</a></blockquote><h3>2.5 vue</h3><p>Vue 源码逐行注释分析 +40 多 M 的 Vue 源码程序流程图思维导图 (diff 部分待后续更新)</p><p>Vue 源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了 。</p><p>这个 Vue 源码逐行分析,我基本每一行都打上注释,加上整个框架的流程思维导图,基本上是小白也能看懂的 Vue 源码了。</p><blockquote><a href="https://link.segmentfault.com/?enc=i3f5%2Fr7a2R5N2dAGZ5aSDQ%3D%3D.celP%2BCi%2Bf%2B7hQTcTFBg%2FC9ZC1ukwtECn8%2BPybR6gEuXZzGI2E1qhbfaSLbbmJDKH" rel="nofollow">https://github.com/qq28111327...</a></blockquote><h2>2.6 vue2.0-source</h2><p>Vue 源码分析 -- 基于 2.2.6 版本</p><p>该源码分析,会带着大家一起学习 Vue 的大部分代码,而不是简单的讲一下它的原理,我会尽可能的多解释每一行主要的代码含义,另外一些辅助方法什么的,大家可以在学习的过程中,自己看一眼就知道了。</p><blockquote><a href="https://link.segmentfault.com/?enc=wJL%2F6h8HWpkqoW7qATKHUA%3D%3D.c2l6EZBg5LRyVqDRdlcp9YTnKlT9kTRiDMDam0IMM0rmCyBLJptqwC2jnBMzvAvc" rel="nofollow">https://github.com/liutao/vue...</a></blockquote><h2>3. Vue3</h2><p><img src="/img/remote/1460000039691172" alt="" title=""></p><h3>3.1 中文学习网址</h3><p>先给大家提供 2 个 Vue3 的中文学习网址。</p><p>Vue3 中文文档,国内 CDN 加速版</p><blockquote><a href="https://link.segmentfault.com/?enc=JRSNlqU8F%2FZscFha62am9Q%3D%3D.o8vYQDNRgtg09YAzrMGFkimsfy1JTkFec0NEO41pWsg%3D" rel="nofollow">https://vue3js.cn/docs/zh/</a></blockquote><p>Vue3 相关项目聚合网站</p><blockquote><a href="https://link.segmentfault.com/?enc=EYe5HOiebF%2Feym2ofsKzgQ%3D%3D.rBSF%2FLzaeao%2B0iFZmezdTRmn3SkDOgcVzGuZr7oyEwc%3D" rel="nofollow">https://vue3js.cn/</a></blockquote><hr><h3>3.2 Vue3 源码</h3><p><img src="/img/remote/1460000039691173" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=Dz4eEPo%2Bn0jBaQRoxW4PvQ%3D%3D.OyS3tJWIc9vdcgX2rpp675yHqP1JsOwgVoGFDwm4HLg%3D" rel="nofollow">https://vue3js.cn/start/</a></blockquote><h2>最后</h2><p>更多关于 Vue3 的优质项目,请看往期精文: <a href="https://link.segmentfault.com/?enc=1njoKa5rUN%2Bi6gSi0NntPA%3D%3D.ektz7cbjcujaT5pTDPy3LEUitY8Q7XrEiiySr4u7PvTuwbiVvdVM0uHl9xyNi%2BRDxPweYvQLi9BroBgPRDl2QA%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></p><p><img src="/img/remote/1460000039047751" alt="" title=""></p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=a%2FadVZdsu%2ByNlHSB4IdS0w%3D%3D.IqD7QCWtQbSKTbxiBJVbuK6hkgcc8dinNucdSYXegKcmM9a31RP6zgEkpZAB7D1s7NeaxRROzSzxFi9ZhLjRBQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。</blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=PZ9FTgixCp%2FneA018F8cxg%3D%3D.VYh7voGm5AIsJlfAuCE%2BxEZVZddZs866VTqwYywE%2B316bqLQCjlL5eQS0YpwiN9dB%2B50G8h20aWjeoFRI2KYug%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></p><hr><p>关于猫哥,大家可以看看我的年终总结 <a href="https://link.segmentfault.com/?enc=KuxpWsPv1zAKgLiqbf6eoQ%3D%3D.n98kYUOSLRI0GKsWuPD%2BoIodr%2Br7LNHfepw1kYI%2Bsh8s%2FFPFvXDs4Go7Kcohl5dUQoKdN561Pd9V30ryxzRbJw%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a></p><p>不知不觉,已经写到第 <strong>31</strong> 期了呢,往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=Ui8qYC42rsv9YwmbPsy1xA%3D%3D.qwxjEI%2Bpif7C5QU1cVlyl1CC%2FDIDZYJCTLNh1ZCVlwXF8sz%2FgEjsG1wAfEUBBgYzHaxv9Iqw5NF4ZZMyC3fFvg%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍,回复 “<strong>1024</strong>”,获取前端精华学习视频。</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=ErBFhynYY%2FeAtpOOu8Merg%3D%3D.q6zc%2Bq7cAwEkjWqRdhZtm2S2BzoLtMAFry7BlHmTZyh%2FBDJPSDfcvokcmCHpoeOHSwi2GkmoyXlO69tU0SWKSg%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=8aHepB1f7XFPE3ci5k8CLw%3D%3D.06J2iKgKxs2jAYqvYQnxo717N84luO%2BNdDxCpoQLTNDORUtCFw0ag2tPNoYRCo0rx0dMJzMBkswV5UHssv5p5Q%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=aikfF4SBS1Nbgf90gDSqVQ%3D%3D.XxAsAx5yghs8qvhJbttpyNbHClVQxYTfjO6IUOD%2B8RmROcRuBYkIv2UZNTC93fDsFGB0LeSq1MUWIn3tyv64jA%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=6YZNvHuGTwt6YB%2FggfpAMQ%3D%3D.xKt%2BDGxKU9NZwGPoW4wGvnCoXzaj1vO8SMDyOE92NRRXyqI4UBFBseHUq%2FRaKI%2BskwBOMil1VxWugkX3%2BAhwOA%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li></ul><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><img src="/img/remote/1460000039691171" alt="" title=""></p>
解秘 Node.js 单线程实现高并发请求原理,以及串联同步执行并发请求的方案
https://segmentfault.com/a/1190000039682723
2021-03-21T20:58:19+08:00
2021-03-21T20:58:19+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
9
<p>最近在做一个支持多进程请求的 Node 服务,要支持多并发请求,而且请求要按先后顺序串联同步执行返回结果。</p><p>对,这需求就是这么奇琶,业务场景也是那么奇琶。</p><p>需求是完成了,为了对 Node.js 高并发请求原理有更深一些的理解,特意写一篇文章来巩固一下相关的知识点。</p><h2>问题</h2><p>Node.js 由这些关键字组成: <strong>事件驱动、非阻塞I/O、高效、轻量</strong>。</p><p>于是在我们刚接触 Node.js 时,会有所疑问:</p><ul><li>为什么在浏览器中运行的 JavaScript 能与操作系统进行如此底层的交互?</li><li>Node 真的是单线程吗?</li><li>如果是单线程,他是如何处理高并发请求的?</li><li>Node 事件驱动是如何实现的?</li></ul><p>下来我们一起来解秘这是怎么一回事!</p><h2>架构一览</h2><p>上面的问题,都挺底层的,所以我们从 Node.js 本身入手,先来看看 Node.js 的结构。</p><p><img src="/img/remote/1460000039682726" alt="" title=""></p><ul><li>Node.js 标准库,这部分是由 Javascript编写的,即我们使用过程中直接能调用的 API。在源码中的 lib 目录下可以看到。</li><li>Node bindings,这一层是 Javascript 与底层 C/C++ 能够沟通的关键,前者通过 bindings 调用后者,相互交换数据。</li><li>第三层是支撑 Node.js 运行的关键,由 C/C++ 实现。</li><li>V8:Google 推出的 Javascript VM,也是 Node.js 为什么使用的是 JavaScript 的关键,它为 JavaScript 提供了在非浏览器端运行的环境,它的高效是 Node.js 之所以高效的原因之一。</li><li>Libuv:它为 Node.js 提供了跨平台,线程池,事件池,异步 I/O 等能力,是 Node.js 如此强大的关键。</li><li>C-ares:提供了异步处理 DNS 相关的能力。</li><li>http_parser、OpenSSL、zlib 等:提供包括 http 解析、SSL、数据压缩等其他的能力。</li></ul><h2>单线程、异步</h2><ul><li>单线程:所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。Node 单线程指的是 Node 在执行程序代码时,<strong>主线程是单线程</strong>。</li><li>异步:主线程之外,还维护了一个"事件队列"(Event queue)。当用户的网络请求或者其它的异步操作到来时,Node 都会把它放到 Event Queue 之中,此时并不会立即执行它,代码也不会被阻塞,继续往下走,直到主线程代码执行完毕。</li></ul><p>注:</p><ul><li>JavaScript 是单线程的,Node 本身其实是多线程的,只是 I/O 线程使用的 CPU 比较少;还有个重要的观点是,除了用户的代码无法并行执行外,所有的 I/O (磁盘 I/O 和网络 I/O) 则是可以并行起来的。</li><li>libuv 线程池默认打开 4 个,最多打开 128 个 线程。</li></ul><h2>事件循环</h2><p>Nodejs 所谓的单线程,只是主线程是单线程。</p><ul><li>主线程运行 V8 和 JavaScript</li><li>多个子线程通过 <code>事件循环</code> 被调度</li></ul><p>可以抽象为:主线程对应于老板,正在工作。一旦发现有任务可以分配给职员(子线程)来做,将会把任务分配给底下的职员来做。同时,老板继续做自己的工作,等到职员(子线程)把任务做完,就会通过事件把结果回调给老板。老板又不停重复处理职员(子线程)子任务的完成情况。</p><p>老板(主线程)给职员(子线程)分配任务,当职员(子线程)把任务做完之后,通过事件把结果回调给老板。老板(主线程)处理回调结果,执行相应的 JavaScript。</p><p>更具体的解释请看下图:</p><p><img src="/img/remote/1460000039682725" alt="" title=""></p><p>1、每个 Node.js 进程只有一个主线程在执行程序代码,形成一个执行栈(execution context stack)。</p><p>2、Node.js 在主线程里维护了一个"事件队列"(Event queue),当用户的网络请求或者其它的异步操作到来时,Node 都会把它放到 Event Queue之中,此时并不会立即执行它,代码也不会被阻塞,继续往下走,直到主线程代码执行完毕。</p><p>3、主线程代码执行完毕完成后,然后通过 Event Loop,也就是事件循环机制,检查队列中是否有要处理的事件,这时要分两种情况:如果是非 I/O 任务,就亲自处理,并通过回调函数返回到上层调用;如果是 I/O 任务,就从 <code>线程池</code> 中拿出一个线程来处理这个事件,并指定回调函数,当线程中的 I/O 任务完成以后,就执行指定的回调函数,并把这个完成的事件放到事件队列的尾部,线程归还给线程池,等待事件循环。当主线程再次循环到该事件时,就直接处理并返回给上层调用。 这个过程就叫 <code>事件循环 (Event Loop)</code>。</p><p>4、期间,主线程不断的检查事件队列中是否有未执行的事件,直到事件队列中所有事件都执行完了,此后每当有新的事件加入到事件队列中,都会通知主线程按顺序取出交 Event Loop 处理。</p><h2>优缺点</h2><p>Nodejs 的优点:I/O 密集型处理是 Nodejs 的强项,因为 Nodejs 的 I/O 请求都是异步的(如:sql 查询请求、文件流操作操作请求、http 请求...)</p><p>Nodejs 的缺点:不擅长 cpu 密集型的操作(复杂的运算、图片的操作)</p><h2>总结</h2><p>1、Nodejs 与操作系统交互,我们在 JavaScript 中调用的方法,最终都会通过 process.binding 传递到 C/C++ 层面,最终由他们来执行真正的操作。Node.js 即这样与操作系统进行互动。</p><p>2、Nodejs 所谓的单线程,只是主线程是单线程,所有的网络请求或者异步任务都交给了内部的线程池去实现,本身只负责不断的往返调度,由事件循环不断驱动事件执行。</p><p>3、Nodejs 之所以单线程可以处理高并发的原因,得益于 libuv 层的事件循环机制,和底层线程池实现。</p><p>4、Event loop 就是主线程从主线程的事件队列里面不停循环的读取事件,驱动了所有的异步回调函数的执行,Event loop 总共 7 个阶段,每个阶段都有一个任务队列,当所有阶段被顺序执行一次后,event loop 完成了一个 tick。</p><p>参考文章:<a href="https://link.segmentfault.com/?enc=hMrtlYDe%2Bor9YinM9J6QhA%3D%3D.RjSpKNEOmQIgrAudg5VoY%2BZrslTz3bYxKSRoJimiLfC2gzEtUFI6VJipCzkhuqYTB6KKcdauU17fGMwlQCXN5Q%3D%3D" rel="nofollow">Nodejs探秘:深入理解单线程实现高并发原理</a></p><h2>串联同步执行并发请求</h2><p>就像上面说的:Node.js 在主线程里维护了一个"事件队列"(Event queue),当用户的网络请求或者其它的异步操作到来时,Node 都会把它放到 Event Queue之中,此时并不会立即执行它,代码也不会被阻塞,继续往下走,直到主线程代码执行完毕。</p><p>所以要串联同步执行并发请求的关键在于维护一个队列,队列的特点是 <code>先进先出</code>,按队列里面的顺序执行就可以达到串联同步执行并发请求的目的。</p><p><strong>方案</strong></p><ul><li>根据每个请求的 uniqueId 变量作为唯一令牌</li><li>队列里面维护一个结果数组和一个执行队列,把执行队列完成的 <code>令牌与结果</code> 存储在结果数组里面</li><li>根据唯一令牌,一直去获取执行完成的结果,间隔 200 毫秒,超时等待时间为 10 分钟</li><li>一直等待并获取结果,等待到有结果时,才返回给请求;并根据令牌把结果数组里面相应的项删除</li></ul><h3>队列</h3><p>代码:</p><pre><code class="js">class Recorder {
private list: any[];
private queueList: any[];
private intervalTimer;
constructor() {
this.list = [];
this.queueList = [];
this.intervalTimer = null;
}
// 根据 id 获取任务结果
public get(id: string) {
let data;
console.log('this.list: ', this.list);
let index;
for (let i = 0; i < this.list.length; i++) {
const item = this.list[i];
if (id === item.id) {
data = item.data;
index = i;
break;
}
}
// 删除获取到结果的项
if (index !== undefined) {
this.list.splice(index, 1);
}
return data;
}
public clear() {
this.list = [];
this.queueList = [];
}
// 添加项
public async addQueue(item: any) {
this.queueList.push(item);
}
public async runQueue() {
clearInterval(this.intervalTimer);
if (!this.queueList.length) {
// console.log('队列执行完毕');
return;
}
// 取出队列里面的最后一项
const item = this.queueList.shift();
console.log('item: ', item);
// 执行队列的回调
const data = await item.callback();
console.log('回调执行完成: ', data);
// 把结果放进 结果数组
this.list.push({ id: item.id, data });
}
public interval() {
clearInterval(this.intervalTimer);
this.intervalTimer = setInterval(async () => {
clearInterval(this.intervalTimer);
// 一直执行里面的任务
await this.runQueue();
this.interval();
}, 200);
}
}
const recorder = new Recorder();
recorder.interval();
export default recorder;</code></pre><h3>服务</h3><p>下面模拟一个请求端口的的 Node 服务。</p><p>代码:</p><pre><code class="js">const Koa = require('koa')
const Router = require('koa-router')
const cuid = require('cuid');
const bodyParser = require('koa-bodyparser')
import recorder from "./libs/recorder";
const MAX_WAITING_TIME = 60 * 5; // 最大等待时长
// web服务端口
const SERVER_PORT: number = 3000;
const app = new Koa();
app.use(bodyParser());
const router = new Router();
/**
* 程序睡眠
* @param time 毫秒
*/
const timeSleep = (time: number) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve("");
}, time);
});
};
/**
* 程序睡眠
* @param second 秒
*/
const sleep = (second: number) => {
return timeSleep(second * 1000);
};
router.post("/getPort", async (ctx, next) => {
const { num } = ctx.request.body;
const uniqueId = cuid();
console.log('uniqueId: ', uniqueId);
recorder.addQueue({
id: uniqueId,
callback: getPortFun(num)
});
let waitTime = 0;
while (!ctx.body) {
await sleep(0.2);
console.log('1');
const data: any = recorder.get(uniqueId);
if (data) {
ctx.body = {
code: 0,
data: data,
msg: 'success'
};
}
waitTime++;
// 超过最大时间就返回一个结果
if (waitTime > MAX_WAITING_TIME) {
ctx.body = {};
}
}
});
// 返回一个函数
function getPortFun(num) {
return () => {
return new Promise((resolve) => {
// 模拟异步程序
setTimeout(() => {
console.log(`num${num}: `, num);
resolve(num * num);
}, num * 1000);
});
};
}
app.use(router.routes()).use(router.allowedMethods());
app.listen(SERVER_PORT);</code></pre><h2>最后</h2><p><img src="/img/remote/1460000039682727" alt="" title=""></p><p>最近状态很差劲,所以最近的原创技术文章有点难产了 😥</p><p>心态急需调整,周末想出去玩,放松一下自己,找回那个斗志满满的真我才行,唉。 </p><p><img src="/img/remote/1460000039682728" alt="" title=""></p><p><strong>推荐阅读</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=12%2F%2BOF8GUGdI2RESYtZI5w%3D%3D.IWwko5EZJA%2BZAp3JoJi%2BRCjLK01y5R1R0qcWA7U9L%2FZU81rUnozxQU8bGS6whfYJzaHjL5VtVPDRRTNYJUySlQ%3D%3D" rel="nofollow">TypeScript 中提升幸福感的 10 个高级技巧</a></li></ul><p><img src="/img/remote/1460000022064008" alt="" title=""></p><p>支持一下下👇</p>
推荐 2 个用 VS Code 直接浏览 GitHub 代码!只需要 1s !
https://segmentfault.com/a/1190000039361443
2021-03-08T08:27:53+08:00
2021-03-08T08:27:53+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
8
<p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>喵~ 喵~ 喵~ 正文开始了,上车坐稳扶好了~</p><p>今天给大家推荐可以直接在 VS Code 界面读取 GitHub 项目的代码,实现了 GitHub 项目与 VS Code 的无缝衔接的两个项目。</p><h2>1. github1s</h2><p>这个项目叫做 github1s,也正如其名,作者对其的解释是:只需 1 秒,就可以用 VS Code 方式来看 GitHub 代码。</p><p>毕竟代码嘛,在“原汁原味”的环境下看,还是比较舒服的。</p><p>而且操作方式也是非常的简单,只需要在浏览器网址部分中的 “github” 后边,添加一个 “1s” 就可以了。</p><p><img src="/img/remote/1460000039361445" alt="" title=""></p><p><img src="/img/remote/1460000039361447" alt="" title=""></p><p><img src="/img/remote/1460000039361446" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=EC4wj81nOz8bk79axdn3iA%3D%3D.jPo9IqX0%2FArGeC06pVh2ahr3xsRrqxz7hlqT9wi3Hp3zHkfU0kJSTJjen6VXpy6i" rel="nofollow">https://github.com/conwnet/gi...</a></blockquote><h2>2. 1s</h2><p>还有一个项目是「<strong>+1s</strong>」,有些网站,当我们给它 +1s 时,会有意想不到的奇效。</p><p><strong>1、github +1s</strong></p><p>在 GitHub 域名后面加 1s 可以直接使用 VSCode Online 打开仓库代码,例如:</p><blockquote><a href="https://link.segmentfault.com/?enc=nsuLCQLI%2FqJTTv%2FMRAXPyw%3D%3D.TdQLYgEWj6roGR4wytHZa6VizegG7A8khAfW9auKrF0A%2BvNPjDNpU77Ic6NMIp6X" rel="nofollow">https://github1s.com/microsof...</a><br> </blockquote><p><img src="/img/remote/1460000039361448" alt="" title=""></p><p><strong>2、youtube +1s</strong></p><p>当你看到喜欢的 YouTube 视频时,可以在 youtube 后面加 1s,直接下载此视频。</p><blockquote><a href="https://link.segmentfault.com/?enc=aX4BM00n1CiyV8dZvBnO%2FQ%3D%3D.R2Wx4ugJ%2FOrnhiF981LM%2B%2FOZ%2FLL4X6G1Sc3tPRQ7DSoqxROqdcH5a%2BNFuBgVzjsz" rel="nofollow">https://www.youtube1s.com/wat...</a></blockquote><p><strong>3、tiktok +1s</strong></p><p>国外版抖音的视频,可以在 tiktok 后面加 1s,直接下载此视频。</p><blockquote><a href="https://link.segmentfault.com/?enc=FRRhQWkN%2B82ecUP%2B2b13HA%3D%3D.JYyVqCfjtnyl3QsG%2FZRGeIiSdjTcAsrIyFmrl3FPrPLU%2ByUPs2%2BOaspnImwUgmpJoVyRR2GfzfHfFkUf6VRUe9H9EmBeFpJqPurTrfw85PDCz7BiG1NCcocQZizD7CB1%2FLq9my13tvy5d1S9UOJzCg%3D%3D" rel="nofollow">https://www.tiktok1s.com/@ram...</a></blockquote><p>是不是很神奇,赶紧去试试吧。</p><p>项目地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=LEfRxTWBRXT96G4hq6Bemg%3D%3D.SrMZr2OJgvggMP0b626Xh58mbLVQlh2c96H2vC1KDFc%3D" rel="nofollow">https://github.com/justjavac/1s</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039361449" alt="" title=""></p><p>初级前端与高级前端之间,很大原因就是投入学习前端的时间、经验的差别,其实就是信息差。</p><p>如果有一个地方能又快又好的获得这些优质的前端信息,那么将会大大缩短从初级到高级的时间。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=jGbDnTLbgSeDPQ3%2B7kOyag%3D%3D.zkuthGVZ%2FEypYlXJffsjnjy9LGDbSHOS2Gu%2B3Zain04iBOE82DRhmp7qsiEmzvozMjYg6krMZo36sCR99%2BtrBQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。</blockquote><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦,猫哥 WX:<strong>CB834301747</strong> 。</p><p>已经推荐了 <code>面试项目</code>、<code>CSS 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 200 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=M6rBQOqWX%2BgFVZuvVTtH8Q%3D%3D.QB4rgJQCCmz5tcJYtwQPbW3rQI%2BFmA2z4V25uaDgCfOdXcKQ2r8KPhgIeqXKaeOd5l75IcT96S%2BJAUpApYJTWA%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></p><hr><p>关于猫哥,大家可以看看我的年终总结 <a href="https://link.segmentfault.com/?enc=JHi4GS%2BCKQRoRicL6VjiyQ%3D%3D.mBBCk8P8TUXBjV0u0OWcV7GP7vMXtG3FgtR5UVnrmORJ8XaWjC5SGzwpC7ICdbZQQJXxG5tY8jEUlx1gVPVzYA%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>。</p><p>不知不觉,已经写到第 <strong>20</strong> 期了呢,往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=dFcaX3K2trUQdIwFIp5vTg%3D%3D.PCVypCNSQH%2F7GiIKohTyvPuf3T25KIfIvOI5mMBvWVHwQ5rGD%2BlqwXB9eP2uYM2afc%2F2MV7qPxfbUwy92OUN3A%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=edyBvrCudOUo2P6qjHvo6Q%3D%3D.rG8%2BxQSiPJC4gBw165uH%2FnCtB6opp8XF%2FPTPGOFiswBRjJGa%2FYoVFyWVp%2Ft7o6rvL7wvABKZJ2s1uTQ7tFI5MQ%3D%3D" rel="nofollow">B站收藏 12.5w+!GitHub 标星 6.6k+!这门神课拯救了我薄弱的计算机基础</a></li><li><a href="https://link.segmentfault.com/?enc=jOKsAozjQrZE2plFZLyaWQ%3D%3D.8FFVwVo7Ezf53fsNqU%2Ba7%2Bost9wJBK9bQmzLJfKyvGy%2Fj2cJBIG42HqirSxGT%2BzbxvX964uxpy87owKjCzwN0g%3D%3D" rel="nofollow">22 个拓展程序员技术与视野的国外网站,快添加进收藏夹!</a></li><li><a href="https://link.segmentfault.com/?enc=%2BkoeY5QJlyVN9ShaJCyXxQ%3D%3D.YJxSf6usgzhAHRDBWsZtll8tPQsgDxH2L6G2TMX5Sl1okbSL4kzvWLMOqgQ77wyCsBG1V8TFTMu06yvGV33QNw%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=v6jvgHeflltGlk%2Fd3GwJLw%3D%3D.2zYOv0PFWtPE8ljHJpz5Ntku75RgdjiNu0uxj4hHdBRiZu2kZF%2BZQZjwLngQnRAePawp4xVBM2oYoN74%2FpfZXw%3D%3D" rel="nofollow">程序员必备的 10 大 GitHub 仓库,前端占了 7 个!</a></li><li><a href="https://link.segmentfault.com/?enc=7hy4OlCbcT1y%2FfS8mt8iZg%3D%3D.UeWbaYKp3s3cQe0DzLe5Pz33PRRwnZQDlu%2Fz0UfNVw5xx6nbT%2Fo7XRmWWars%2F5c2BEuN%2FKZnmoW%2Ft%2BZsSWg7vQ%3D%3D" rel="nofollow">推荐 7 个学习 TypeScript 的宝库,2021 是时候给自己加薪了!</a></li></ul><p><img src="/img/remote/1460000037614301" alt="" title=""></p>
B站收藏 12.5w+!GitHub 标星 6.6k+!这门神课拯救了我薄弱的计算机基础
https://segmentfault.com/a/1190000039352340
2021-03-06T16:19:59+08:00
2021-03-06T16:19:59+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
34
<p>大家新年好呀,我是你们的 猫哥,我又回来啦 ~</p><p>相信大家过年都过得开心吧</p><p>过得开心,那么就开始学习了哈 ~</p><h2>前言</h2><p>作为一个所谓的计算机科班出身的人来说,特别难为情的是自己的计算机基础很差,相信这不是少数程序员的现状,而是绝大多数程序员的现状。</p><p>比如计算机网络当年一度差点挂掉,多亏当时的老师手下留情,给我一个刚及格的分数。</p><p>但是猫哥出来工作之后,特别觉得学生的计算机基础特别差,主要原因是老师和教育资源的问题,老师都是照着书本或者 PPT 讲的,十分乏味。</p><p>如果有好的学习资源,肯定能激发学习的兴趣的,或者学习起来容易一点,没那么难懂。</p><p>当程序员的时间越长好像越明白这些基础知识和原理的重要性,这样说起来简单,但是其中的枯燥就让很多摩拳擦掌的同学折戟沉沙,都说兴趣最重要,怎么提气这个兴趣。</p><p>最近猫哥在逛 b 站的时候偶然发现了这么一个课程,通过图文并茂生动形象的介绍计算机的基础知识,看了几集,觉得非常的棒,特地把这个《计算机科学速成课》推荐给大家。</p><h2>计算机科学速成课</h2><p>这门 40 集的课真的包含了超多的基础知识:</p><pre><code class="js">1 - 早期的计算 - Early Computing
2 - 电子计算 - Electronic Computing
3 - 布尔逻辑与逻辑电路 - Boolean Logic & Logic Gates
4 - 二进制 - Representing Numbers and Letters with Binary
5 - 算术逻辑单元 - How Computers Calculate - the ALU
6 - 寄存器 & 内存 - Registers and RAM
7 - 中央处理器 - The Central Processing Unit(CPU)
8 - 指令和程序 - Instructions & Programs
9 - 高级 CPU 设计 - Advanced CPU Designs
10 - 编程史话 - Early Programming
11 - 编程语言 - The First Programming Languages
12 - 编程原理:语句和函数 - Programming Basics: Statements & Functions
13 - 算法初步 - Intro to Algorithms
14 - 数据结构 - Data Structures
15 - 阿兰·图灵 - Alan Turing
16 - 软件工程 - Software Engineering
17 - 集成电路、摩尔定律 - Integrated Circuits & Moore’s Law
18 - 操作系统 - Operating Systems
19 - 内存 & 储存介质 - Memory & Storage
20 - 文件系统 - Files & File Systems
21 - 压缩 - Compression
22 - 命令行界面 - Keyboards & Command Line Interfaces
23 - 屏幕 & 2D 图形显示 - Screens & 2D Graphics
24 - 冷战和消费主义 - The Cold War and Consumerism
25 - 个人计算机革命 - The Personal Computer Revolution
26 - 图形用户界面 - Graphical User Interfaces
27 - 3D 图形 - 3D Graphics
28 - 计算机网络 - Computer Networks
29 - 互联网 - The Internet
30 - 万维网 - The World Wide Web
31 - 网络安全 - Cybersecurity
32 - 黑客与攻击 - Hackers & Cyber Attacks
33 - 加密 - Cryptography
34 - 机器学习与人工智能 - Machine Learning & Artificial Intelligence
35 - 计算机视觉 - Computer Vision
36 - 自然语言处理 - Natural Language Processing
37 - 机器人 - Robots
38 - 计算机中的心理学 - Psychology of Computing
39 - 教育型科技 - Educational Technology
40 - (完结) 奇点,天网,计算机的未来 - The Singularity, Skynet, and the Future of Computing</code></pre><p>到这里你以为完了么?不!这怎么能够!</p><p>译者们还贴心的在每一集的开头放上了 <strong>片头总结</strong>,让你刚开始就能知道这一集讲了啥。</p><p>哪个时间点讲了哪些知识点,真的是炒鸡贴心!</p><p><img src="/img/remote/1460000039352344" alt="" title=""></p><p><img src="/img/remote/1460000039352343" alt="" title=""></p><p><img src="/img/remote/1460000039352342" alt="" title=""></p><p>如此贴心的翻译团队,制作出如此良心的一门课。</p><p><strong>真的强烈建议大家一定要好好看,沉下心来,认认真真的每天学一点,当复利拐点到了,有一天你会顿悟、和突飞猛进的</strong>。</p><p>当然这么好看的课当然希望大家能够 <strong>多多转发</strong>,<strong>在看</strong> 支持,让更多的朋友能够看到,大家一起学习一起进步!</p><p>b 站地址:</p><blockquote><a href="https://www.bilibili.com/video/av21376839/">https://www.bilibili.com/vide...</a></blockquote><p>GitHub 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=aUPmN3Nz2w%2F9IE7KlbulHA%3D%3D.sNH121F15EJe501YsyRj4A1DufmTEvg2u7ZxR5g0R%2F7ji6RyVAC%2BiK%2BNjsOkRw5U%2FTa2cnNxv%2BFffWbBULpwYQ%3D%3D" rel="nofollow">https://github.com/1c7/Crash-...</a></blockquote><p>如果你还想下载这门课,请在关注本公众号,回复 <strong>计算机</strong> ,即可获得下载链接了。</p><p><img src="/img/remote/1460000039352345" alt="" title=""></p><p>之前还写过类似的:<a href="https://link.segmentfault.com/?enc=uxp8iRuBDmMltsmz5ubSVg%3D%3D.dbAmkrVg25ydFsS4ws0u6SJQH0tOjVOO7st0zM1h2ISs1855wVXMBjsagRvmSum7KyG%2BxJ6y%2BvHWeaVBHeoByg%3D%3D" rel="nofollow">推荐 7 个 Github 上近 200k Star 的计算机学习资源,练好内功的秘籍!</a>,相信你会找到宝藏!</p><h2>最后</h2><p><img src="/img/remote/1460000039047751" alt="" title=""></p><p>初级前端与高级前端之间,很大原因就是投入学习前端的时间、经验的差别,其实就是信息差。</p><p>如果有一个地方能又快又好的获得这些优质的前端信息,那么将会大大缩短从初级到高级的时间。</p><p><a href="https://link.segmentfault.com/?enc=XHtvRJnu4hum1JAirUDHRQ%3D%3D.NZ6sQ6mVNFWpqgWn8uqvhfwbbVgZrRnhGWeZjBgQmJBT81ztsOrIAyurmXlncBGs96Q5K5twnBG9wfrDFlM4vQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a> 就是这样一个仓库,能帮助前端开发人员节省时间的仓库!</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=bRMHVBfJ%2BWPoUuNqBtgbRA%3D%3D.Kw5pX7Q%2Badwuk6iaSifn6%2FQPqtLOqT9NmIC0RaLxIESoeJI3kI%2FvxGMvxtr4DJgjr4E2a0W5PvOUgB9hwQ0Gmw%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>CSS 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 200 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=%2FQ%2BO9Ro5zDfxpzx8rnB6Cg%3D%3D.cs%2FcbtVZ3y1kC9l%2BVRwkyART%2BODPKkhRrXMrc7ibyjuSpzIv459vxDYGAtbGjZh3QZLpFN6XHCK3RDRyoKDHyQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></p><hr><p>关于猫哥,大家可以看看我的年终总结 <a href="https://link.segmentfault.com/?enc=mw4Qc4U4gdJf0mFxv1c%2BVg%3D%3D.e74v3Kn9EZG9rVM0CO9H8rQ9PxIkOmaIVyrkXVJ%2F8wTOfyhLrdnXjIHpBqS3Jf6nYMg%2BogN6KPx7HW2nu42X1A%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>。</p><p>不知不觉,已经写到第 <strong>19</strong> 期了呢,往期精文请看下方宝藏仓库,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=ja7%2B5wU7v5jjCkJMME3lIA%3D%3D.ssJ8tSArPzTA3Dq5f3WJio%2B9QZakPJV1jRJGlN%2Bmpg5iJyOboOh15neFkPQiYPTpO26UOm2rjEarrfmYxFxwmQ%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=o3d60T%2BjwW2qMw0l%2F8wg8A%3D%3D.fwQmFh3quR0ExiMU5201nmp%2FJt7wkj9XCrneWOKklb6rrDQMP%2FFmB4oTIJ0ikcRlPnPpkKtK1MqdWmj5iirQHQ%3D%3D" rel="nofollow">推荐 12 个学习前端必备的神仙级工具类项目与网站</a></li><li><a href="https://link.segmentfault.com/?enc=4%2BzzHdZuP0wsNVTfwmjvtQ%3D%3D.qXNp%2FyYyaIojM5smtN%2BS7J6C1duMxc1awSvevOoXtkINWoYERRNe8XU8ySCmCQ%2F0hA1QFXF2DRQsPAJnCXoy8A%3D%3D" rel="nofollow">22 个拓展程序员技术与视野的国外网站,快添加进收藏夹!</a></li><li><a href="https://link.segmentfault.com/?enc=x%2BFuhzj%2F8m1AVel21jTwsw%3D%3D.jR7tJxwAAGTEQbIdMe98xL0rwYDQJ%2BYW%2FuWtQ%2FsW9IJL19opMlWPkB%2FaEvITkyTeLU6bvNcn5EaOdKgZUCC5rw%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a></li><li><a href="https://link.segmentfault.com/?enc=%2FMF3AyUkjmnijJI0G7K5Gg%3D%3D.JpFTIRJVW5uitBYec8rAYYdam%2BCPcN3ZYZd8hF4CkmESadxg6MdilQdFIopDOJtIODEGHN360GO3DNGogZi5vQ%3D%3D" rel="nofollow">程序员必备的 10 大 GitHub 仓库,前端占了 7 个!</a></li><li><a href="https://link.segmentfault.com/?enc=0cVvH4%2FQ5ifD%2FCbW%2Fx0Vgg%3D%3D.UyZyNMJWVkaJYCbiVL24TH3mTudhw2cycZ8lUEkZgcid1YzW1DjtmbH6ho2kWDxKzCOp9O8BUpx2XH5yBSPijg%3D%3D" rel="nofollow">推荐 7 个学习 TypeScript 的宝库,2021 是时候给自己加薪了!</a></li></ul><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦,猫哥 WX:<strong>CB834301747</strong> 。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p>
22 个拓展程序员技术与视野的国外网站!奇怪的知识又增加了!
https://segmentfault.com/a/1190000039247043
2021-02-21T22:52:34+08:00
2021-02-21T22:52:34+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
14
<p>大家新年好呀,我是你们的 猫哥,我又回来啦 ~</p><p>相信大家过年都过得开心吧</p><p>过得开心,那么就开始学习了哈 ~</p><p>关于猫哥,大家可以看看我的年终总结 <a href="https://link.segmentfault.com/?enc=pWs63%2FD61%2BzrVVm9qR0Pww%3D%3D.N2syHrLViuXKWynEA6SsRXh5a%2BXH%2FTbnMpYoL2kUPYw27Svug0Oof3vkUioez8lxE3PMrCRMiTo4cNZsVPiOJg%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>。</p><h2>前言</h2><p>初级前端与高级前端之间,很大原因就是投入学习前端的时间、经验的差别,其实就是信息差。</p><p>如果有一个地方能又快又好的获得这些优质的前端信息,那么将会大大缩短从初级到高级的时间。</p><p><a href="https://link.segmentfault.com/?enc=1QPXYCeHSnTCl%2FpyLZV1NA%3D%3D.tEAxRbSmEu11cULhZByszbQ5fl1FARujovVwH%2BR5xAB9uXQCkuWKS8mo%2F%2BPkMF1xcEugoF3%2BblU1Zkau8sQJbA%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a> 就是这样一个仓库,能帮助前端开发人员节省时间的仓库!</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=Zb53Fwkby285at8l8HkGNA%3D%3D.NpmyUuaqMq1eyPgblCahOmJLX%2BW07LIAniW1DdxYBr05uqUCEozMgpT86CUqIHt97G%2FffjZEcGoPEIlqVV9SUQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>CSS 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 200 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=3FGQwS%2BDAf%2Fu4yCHGkQvnQ%3D%3D.AMMPcXwUArVBgMl%2BaWQs3d0rc89xafAlJ9Md4eHKmCybztgw2uxj4MoEYEPX2LD%2FrRhtNsGSGOOSV5KAEii2zg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为今天【前端GitHub】的第 18 期精华内容。</p><p><img src="/img/remote/1460000039247051" alt="" title=""></p><p>今天给大家推荐一些程序员经常使用的网站,也是我经常上的一些网站,让大家也一下拓展视野。</p><p>猫哥还将网站做了分类整理,方便大家阅读。</p><h2>1. 项目类</h2><p>项目是一个面试官非常看重的点,也是拓展视野、挖掘轮子一个的地方。</p><p>下面就为你推荐几个程序员都应该 mark 的项目类网站。</p><h3>1.1 GitHub 代码托管 </h3><p>GitHub 作为全球最大的同性交友网站,也是矿资源非常丰富的矿场。</p><p>GitHub 有时比 Google 还有用,如果你不懂如何使用它来挖矿,那你不算一名合格的程序员。</p><p>GitHub 是一个宝藏库,可没有藏宝图,GitHub 这个亿计的优秀的开源项目也和你没有关系。</p><p><img src="/img/remote/1460000039247053" alt="" title=""></p><p>GitHub 也有非常多好的项目可以推荐,比如我自己的 github (逃了)</p><blockquote><a href="https://link.segmentfault.com/?enc=CHcTPqC%2FwN7hujSAFqGZkQ%3D%3D.J0sfCWUcjwzwFAhgHVpfoDcNeChDQpwPQRC1DQHGUCqtP9BVc491h9oJsZakHCth" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><p>还有很多非常优秀的 GitHub 项目,比如 <strong>FrontEndGitHub、CS-notes、mall 商城项目</strong>。</p><h3>1.2 GitLab</h3><p>对于有些人,提到 GitHub 就会自然的想到 Gitlab, Gitlab 支持无限的公有项目和私有项目。</p><p>GitLab 是一个用于仓库管理系统的开源项目,使用 Git 作为代码管理工具,并在此基础上搭建起来的 web 服务。</p><p><img src="/img/remote/1460000039247052" alt="" title=""></p><p>猫哥目前公司的项目用的就是 GitLab 平台。</p><blockquote><a href="https://link.segmentfault.com/?enc=Jx2Co%2FUGAhm22jjlbuh%2Bhw%3D%3D.%2BouU0g4552%2BJlcEro%2FJKSgYzSQlVNS0uIGBBlRUtPUA%3D" rel="nofollow">https://about.gitlab.com/</a></blockquote><h2>2. 博客类</h2><h3>2.1 dev</h3><p>dev 社区和国内的掘金社区很相似,技术分类也比较多,各种技术应有尽有,文章质量都很不错。</p><p>像 Java、Python、js、分布式等应有尽有,文章质量普遍都还不错,其实如果平时多留意不难发现,掘金上有一些文章是翻译自 dev 社区。</p><p>这个社区也是猫哥经常去看的网站,还翻译过几篇该网站的文章呢。</p><p><img src="/img/remote/1460000039247045" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=EwxuHAjvjg%2BO5I42UQ0y6g%3D%3D.xGuDkvTUjfrV6YEOWgyboA%3D%3D" rel="nofollow">https://dev.to/</a></blockquote><h3>2.2 dreamincode</h3><p>dreamincode 是一个相对小众的技术博客,界面和 博客园 风格颇为相似,属于简约而不简单的那种,但是内容却不简单。</p><p><img src="/img/remote/1460000039247047" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=0FjrkxZE0sD4n67IEZo5xw%3D%3D.6Jto85R2xBaA0iC4WUbRHbAoiKWZAjCN3mJJCeWYUis%3D" rel="nofollow">https://www.dreamincode.net</a></blockquote><h3>2.3 bytes</h3><p>bytes 和 dreamcode 类似,简约但不简单,不多说了。</p><p><img src="/img/remote/1460000039247048" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=M7eIoXOn6Z0ZagI8Hufrdg%3D%3D.c8qLL0FoCv7YKIen7235%2Bsc5amvYy57GbFkDm32t94M%3D" rel="nofollow">https://bytes.com</a></blockquote><h3>2.4 hongkiat</h3><p>hongkiat 是与技术、设计领域相关的站点之一,大家可以在这里分享技术文章。</p><p><img src="/img/remote/1460000039247054" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=N8Hs%2Be8%2BCw5xyPUW%2FyOX%2Bg%3D%3D.h2kWLsYT%2BpIRW7zF6jWHZHvPuGERPUaGqyLLTo3WMoLod6D0tz85g4dVpmZ6zuFz" rel="nofollow">https://www.hongkiat.com/blog...</a></blockquote><h3>2.5 IBM Developer</h3><p>这里面都是一线工程师,技术性很强,每一篇文章都值得细细观看,认真学习。</p><p><img src="/img/remote/1460000039247055" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=rrGy1%2BP5a8cH2thImCv14A%3D%3D.ydoI183wBc5zhqRjxNwb3%2FWuDGVF8ZQf%2FaAgR8VhVz0%3D" rel="nofollow">https://developer.ibm.com</a></blockquote><h2>3. 问答类</h2><h3>3.1 StackOverFlow</h3><p>作为一名程序员,如果没有听过 Stackoverflow,那么你最好去面壁思过一下。</p><p>这是一个由外国人创办的专为程序员提供的国际性问题解答交流社区,正如网站签名:<strong>Stack Overflow - Where Developers Learn, Share, & Build Careers</strong>。</p><p>这个网站非常的纯粹,一般人还真不太习惯用这个,没有一手好英语还看不太懂全英文的技术交流与问答。</p><blockquote>当你拋出一个技术问题时,最终是否能得到有用的回答,往往取决于你所提问和追问的方式。 –Eric S. Raymond</blockquote><p><img src="/img/remote/1460000039247056" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=fXaVwEYz82rxSakWPDIvBg%3D%3D.I0Tmz0bfpzu1DDl79zwAt7DXT%2FrpoqbuD8GkVxRNg%2FA%3D" rel="nofollow">https://stackoverflow.com</a></blockquote><h3>3.2 Reddit</h3><p>reddit 是一个非常个性的社区,你可以在这里讨论编程问题,还可以学习学英语,reddit 还很幽默,有古怪的莫名笑点,评论接楼很有意思。</p><p><img src="/img/remote/1460000039247046" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=Bl28tWfHcUsS48OjT3j0dA%3D%3D.szCPuk4aEwQ1qlzAMVWCekZjEvJzUIwiYKCquiukD08%3D" rel="nofollow">https://www.reddit.com</a></blockquote><h3>3.3 daniweb</h3><p>daniweb 也是一个质量比较高的问答平台,有一种像社交平台的感觉。</p><p><img src="/img/remote/1460000039247050" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=Fhl8017ySV1p6jnxQBGoAg%3D%3D.qAY4%2Fa6mIgMTPF3FyGJiAflqo3pyQyiSW9%2BAr8yqruM%3D" rel="nofollow">https://www.daniweb.com</a></blockquote><h2>4. 算法类</h2><h3>4.1 LeetCode</h3><p>和国内的 leetcode 一样都是刷题用的,但是国际版的 leetcode 汇聚了全球各国大神,看看你和大神的思路是否一样呢。</p><p><img src="/img/remote/1460000039247049" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=5uVfb4mVa%2FZAAnpESLxuWg%3D%3D.aNDk2HAC5q8G5cM%2BL%2BaL7P3SpOl5kxOruIkIEAmRNfw%3D" rel="nofollow">https://leetcode.com</a></blockquote><h3>4.2 LintCode</h3><p>LintCode 领扣上有数量超过 1000 道的算法题目和人工智能题目,通过刷题熟练掌握数据结构和算法。</p><p>完成各大名企的阶梯训练,为你斩获心仪的 offer 打下坚实的基础</p><p><img src="/img/remote/1460000039247057" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=g3bmcZhchliVZzirdELC0A%3D%3D.M2xLDsn19TM9vDhqgPTepfg26ZlBsYHedpPCKclEnns%3D" rel="nofollow">https://www.lintcode.com</a></blockquote><h3>4.3 Codeforces</h3><p>Codeforces是全球最著名的在线评测系统之一,这里有高水平的选手,高质量的题目,高密度的比赛。</p><p>该网站由俄罗斯的一个团体创立并负责运营。当然,该网站上大部分博客、评论、题面都是英语的。</p><p><img src="/img/remote/1460000039247058" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=mPuJtC8NrbN5NAD23dcfoA%3D%3D.aCiu5H2R%2F1P%2FU4CWdTOJEsG8kxbJIr7ZxOTfurMq9%2BE%3D" rel="nofollow">http://codeforces.com/</a></blockquote><h3>4.4 Topcoder</h3><p>Topcoder 据说是世界上规模最大的编程网站,这里面的题型,比赛形式跟 ACM/ICPC 极不相同。</p><p>该网站把中国纳入其赛区,大家可以上去那里跟来自全世界的程序员(事实上大多数也是大学生)进行更直接的交流,可能也是 ACM/ICPC 练兵的好地方吧。</p><p>该网站每个月都有两到三次在线比赛,根据比赛的结果对参赛者进行新的排名。</p><p>参赛者可根据自己的爱好选用 Java, C++, C#, VB 或 python 进行编程。</p><p><img src="/img/remote/1460000039247059" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=LjG2p8pUEqJ7lD%2BzJdtK5A%3D%3D.TPUFVP4ldBY23SXdPHf7nnt1OG1P%2BTSzN8JzBdA1DCY%3D" rel="nofollow">https://www.topcoder.com</a></blockquote><h2>5. 教程类</h2><h3>5.1 tutorialspoint</h3><p>这是一个在线学习的网站,并且免费,里面有各种技术、各个知识点的讲解和demo,灰常全面,这比查找API方便多了,遇到不明白的知识点直接根据索引找就是了,还有各种电子书。</p><p><img src="/img/remote/1460000039247060" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=Sh5wxhfxoC5%2B4Ty5%2BQbmfA%3D%3D.XfFR3GBq5qNyEGMQ7QHRPV6u5niJpfJuAw0V%2BjtFMqSQFSW97Qpc%2FcCTxWLUGE3Q" rel="nofollow">https://www.tutorialspoint.co...</a></blockquote><h3>5.2 codecademy</h3><p>学习新语言,敲代码玩就在这里了。这个网站将简化编程学习的过程。比如说网站左边会讲解知识点,右边直接练习。如果出现错误,就会有错误提示,直接给你反馈。所以,使用它不用想太多,直接拼命硬干敲代码入门。</p><p><img src="/img/remote/1460000039247061" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=6Gmp43k2YOM6xJxRiISYDg%3D%3D.PYYpVDY8qnJUIZ%2Bt%2Be742TqY30%2B0szmYNghceUTWISA%3D" rel="nofollow">https://www.codecademy.com</a></blockquote><h3>5.3 Livecoding.tv</h3><p>Livecoding.tv由一群欧美程序爱好者共同发起成立,旨在为全球程序员提供一个实时高效的互动平台。特色是使用了录屏直播技术,用户可以在线观看高手实时编程并且可以向对方提问互动,网站现在已经汇集了一大批程序精英。现在Livecoding.TV来到中国,希望更多的中国程序员加入进来一起切磋技术。</p><p><img src="/img/remote/1460000039247062" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=RLOW1C46%2FB6DsailMWSKOQ%3D%3D.AnJngkjzqBPSGnmLBpSiJnq%2FY1fLKsusAJ2nIvlXcXRXl9UCKGPtlF5Hv2eGpoY1" rel="nofollow">https://www.livecoding.tv/acc...</a></blockquote><h3>5.4 Dzone</h3><p>Dzone是一个技术涵盖比较全面的网站,像云平台、数据库、物联网、开发运维、Java语言等都有。</p><p><img src="/img/remote/1460000039247066" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=0SbKpnPsNhBOUVlzQDYg9Q%3D%3D.JM4PdjHr%2BT7tpsCtYIhZOHPSBpyJ395N9qHS6C4wnoQ%3D" rel="nofollow">https://dzone.com</a></blockquote><h3>5.5 simpleprogrammer</h3><p>simpleprogrammer 简单的程序员,这个网站上纯技术文章不多,指导建议性的文章比较多。</p><p>讲述一些职场、以及软件开发中的一些“ 潜规则”。</p><p><img src="/img/remote/1460000039247064" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=jWjYdlhAg5Qxhk7ySaKhxQ%3D%3D.E4YWNBd1d8LjWsDTgs5qFdHkAiIXBPf6XRHcUB1N718%3D" rel="nofollow">https://simpleprogrammer.com/</a></blockquote><h3>5.6 SitePoint</h3><p>通过 SitePoint 教程,课程和书籍学习 Web 设计和开发 HTML5,CSS3,JavaScript,PHP,移动应用。</p><p>这是一个偏向前端方向的网站,在这里包含了各种高质量的前端方面的文章,电子书。</p><p><img src="/img/remote/1460000039247063" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=%2FzcPqfRSHJhh1gnG%2ByjrIA%3D%3D.J4yUqPnrh7Hpy92EJi%2BL0KsI5M9WCDFI%2BZvG5eBGTEQ%3D" rel="nofollow">https://www.sitepoint.com/web</a></blockquote><h3>5.7 YouTobe</h3><p>YouTobe 这个网站可算是经典,和国内的哔哩哔哩一样,各类视频汇聚于此,当然各国编程大神也在这啦。</p><p><img src="/img/remote/1460000039247065" alt="" title=""></p><p>YouTube 是源自美国的视频分享网站,也是当前全球最大的视频搜索和分享平台,让用户上传、观看、分享及评论视频。</p><p>此网站没有官方的中文名字,较为广泛使用的俗称有油管、水管、你管等。</p><blockquote><a href="https://link.segmentfault.com/?enc=I0TAi001e43qFVgHLI7CMQ%3D%3D.EB9YgEjwRQ7au%2BI8RV7jYbYPwxNvvK1i8s6qRnvKcP8%3D" rel="nofollow">https://www.youtube.com/</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039047751" alt="" title=""></p><p>如果你访问不了国外网站,那就上网站 GitHub 上搜索一下,你会找到属于你的惊喜!!!猫哥只能帮助你到这里了。</p><p>关于猫哥,大家可以看看我另一个号的 <a href="https://link.segmentfault.com/?enc=J8k%2FlwTQX84vpjCqiXDv7A%3D%3D.M8h%2FNgk0YHU1XKZc%2BAGYOAubDuiWjEkDzGjjeIA1uXSehOeFbXHnK%2BbEgniFo1CXf%2FXixSk3hSSid6ANSqDkBw%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>,看看猫哥的脸都被打歪的 😂。</p><p>不知不觉,已经写到第 <strong>18</strong> 期了呢,已经分享超过 <strong>200</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=NyPHnLivrlRHFI3rc%2Bd%2F6Q%3D%3D.c%2FFN06Uj7puLEysBhbZLeTfkOJFOm%2FkTjOYC0382X1g6e78Tt0KkIeaSUb5cVkzmMap7WPv3D2Kqr1%2BicBGAlw%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=4PvNstRtZmqWp4k943faMw%3D%3D.2GFsR0R%2FLJlFOsEZ%2BAo3KeOYJvUZhXxMghF4x6UL6yup88LExvwUEl8Y6KRobpgNhIQJ3EYRqZYGZoqLhf001g%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=mS6Z%2BmrAUE43KEp73NneHg%3D%3D.zLHL0Q42Oarm%2BauBDo7AKRxa6tdZrjZep51FW4sxEVukTALN83ORBAzWBq6TKf3fB39PhvjL4wcqGOaVOonqXQ%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=4oJjFosNkO6RdUnHRPoktA%3D%3D.ZU8OqjF%2BQF4Oael%2Bf9WlD9h28W9XopwkEbUYsNTe893bVQMuaLxV6%2FGHDCNaOIzDb%2Fc5TIKNqFqvobG2mkK7hQ%3D%3D" rel="nofollow">推荐 12 个学习前端必备的神仙级工具类项目与网站</a></li><li><a href="https://link.segmentfault.com/?enc=nsBlWC5cGNVodZvM8A6a9A%3D%3D.D4XlDCkLnKQT%2B2XOoS%2F6SdIwJlzOM0%2BZV7dLAvL9rmegpwUhg0BiTdDL79n1Gy%2BRFLRKb7IWsCEkX8AL0mYXgg%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=lNuC%2FJV%2B5hbWNw3iF83VaA%3D%3D.4PDJ6%2F6I0MGVnUPgDLoemwzAIMzMsUxMJq6swIO19ncW7wEGZW6w2WbTcmce4hTSdF6FUzPmkcjDM9Tij84jHQ%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=fJl8K7mVtqboaQt77IfspQ%3D%3D.NZFlP61ESG9ltZqr0M%2BTPdm6vXufaJhaFuIls7zJpVY64Wsrg6jSiVpIsRBpfDGNk5k%2BC4Dk42c%2Fi91CahatPQ%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li><li><a href="https://link.segmentfault.com/?enc=4dEtWCt0Gr4OI73RlDB1%2FQ%3D%3D.uVR%2FI2Xitoxiu2KIJWg7pPWAvhUPItAkt5AnUTnlDNizkKgUgE6qHcUFhppKTkHwiche6lpTj27qCmv%2BXSggJw%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li></ul><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦,加超级猫的 WX:<strong>CB834301747</strong> ,一起闲聊前端。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p>
相亲感悟:关于恋爱择偶的几点直击心灵深处的认知
https://segmentfault.com/a/1190000039234910
2021-02-19T23:09:25+08:00
2021-02-19T23:09:25+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
1
<p><img src="/img/remote/1460000039234913" alt="" title=""></p><p>今年年三十中午吃饭时,老爸突然说给我安排了一场相亲,我 😲。。。</p><p>真的是 生活艰难,落魄少年,被迫营业。</p><p>相亲就是认识一个人,还是要聊聊和接触了才能知道是否合适,比如三观(人生观、世界观、价值观)是否合得来,并没什么特别的。</p><p>如果身边有比较了解并觉得比较合适的人,选择身边的人是个不错的选择,因为了解一个陌生人是否合适,是很需要花费时间、精力的事情。</p><p>今年回家,倒是从别人的相亲过程中,发现了几点很重要的认知。</p><p>昨晚猫哥思如泉涌,又很有表达欲,所以还是想写下这篇文章,给读者一点启发。</p><p><img src="/img/remote/1460000039234914" alt="" title=""></p><h2>优胜劣汰、适者生存</h2><p>这个世界上自古以来奉行的就是 <strong>优胜劣汰、适者生存</strong> 的大自然法则,没有丝毫例外。</p><p>情侣的选择也同样在用这个法则,试问一下自己 <strong>在选取对象的时候,是不是倾向于选择比自己优秀或者同等条件的人</strong>,就算不符合这个法则,早早找到的对象都是那些不是很差的人。反正我是,我相信绝大部分的人都是这个思想。</p><p>一般是相对于自己来说,倾向于选择比自己优秀或者同等条件的人,是个高价值的人。</p><p>高价值简单来说,就是一切向好的价值。</p><p>大概是以下三类:</p><ul><li>生存价值:社会地位,收入、房、车等等与物质相关的</li><li>繁衍价值:身高,长相,体格等等与身体相关的</li><li>情绪价值:情绪能量,知识储备,性格,抗干扰能力,带动他人的能力等等与情绪精神相关的</li></ul><p>先说明一下,优质的对象一般是指具备高价值的人。</p><p><strong>绝大部分人都是趋利避害的,所以同龄的优质的对象一般都被人选择了,或者他(她)已经选择了同样优质的对象了。</strong></p><p>所以就导致了一个问题:<strong>年龄越大,同龄留下的优质对象就越少,被留下的绝大部分都是很有自己想法的人,或者不那么优质的,或者说某些方面是不尽人意的(一般都是 身材、样貌、学历、经济、风趣幽默、各种软能力等,总有某一项或者几项真的很差,让人不能接受的)</strong>。这个情况也是从大概率上来说的,说的是中位数的情况。</p><p>猫哥回想了一下,无论是读书时代、工作后的这几年里、就连村里面,这个现象都存在。</p><p>读书时代,漂亮女生、帅气的男生、或者成绩好的人 都有很多人追,而且已经有了对象了。</p><p>工作后的几年里面,身边的实习生,正职,条件优质也同样选择好了对象。</p><p>而那些还没对象的,一般来说条件都不优质,这里面只能指大概率是这个情况,当然有些是不着急找对象、或者还在找优质对象的同样优质的人还单着,只不过是极少数了。</p><p>身边的某位亲人的朋友,今年 29 了,这几年相亲了 10 来个,10 个里面,达到同等条件的只有那么一两个,其余的 8 个条件都不怎么样;</p><p>还有另外一个亲人的朋友,也是 29 岁了,条件是很不错的,这几年相亲了 30 来个了,最后都没成。</p><p>我猜那些相亲的对象不怎么样,我让这位亲人特意问了一下那位朋友,那些相亲的对象的质量怎么样,得到的回答也果真和我猜想的一样。</p><p>也印证了 <strong>一般来说,年龄越大,同龄留下的优质对象就越少,被留下的绝大部分都是很有自己想法的人,或者都是不那么优质的,或者说某些方面是不尽人意的</strong>。</p><p><img src="/img/remote/1460000039234915" alt="" title=""></p><h2>向上向下</h2><p>目前中国社会,<strong>绝大多数男生会倾向于选择同龄或者比自己年龄小几岁的女生做为对象,而女生会倾向于选择同龄或者比自己大几岁的男生做为对象</strong>,注意这里说的绝大多数,是个概率问题,而且是大概率是这种情况。</p><p>之所以会出现这种情况,猫哥觉得,很大原因是:因为同龄来说,男生一般比女生的思想晚成熟,而女生一般想找成熟稳重一点的男生,而男生想找年轻漂亮的女生。</p><ul><li>向上:指的是对象是高价值的</li><li>向下:指的是对象的价值是比自己低的</li></ul><p>根据前面的 <strong>优胜劣汰、适者生存</strong> 的法则,<strong>年龄越大,身边留下的单身的人,都是很有自己想法的人,或者一般来说都是不优质的,而且年龄越大,一般来说就更不优质,都是被挑剩下的</strong>。</p><p>虽然有一些条件优质的人是自愿留下的,但是如果还要找同样优质的对象的话,就会很难,因为条件优质的人一般不会被留下,所以就又造成另外一个现象:<strong>一般来说,留下的优质的人会更加难找到或者一直找不到高价值的人(也就是平时大家说的合适的对象),也就是向上取不到</strong>。</p><p><strong>如果你是那个留下的优质的人,那就赶紧找那个属于你的另外一个优质条件的人,不然再拖下去,能选择的对象只会更少,甚至没有得选择,那就只能向下取了!</strong></p><p>你选择别人,别人选择你,都是互相选择的结果。</p><p>而且目前中国社会的世俗眼光,大部分人(特别是父辈)对年龄大的男生和女生都存在很多偏见,只不过对男生好像少一点。</p><p><img src="/img/remote/1460000039234916" alt="" title=""></p><h2>事业 VS 爱情</h2><p>钱是可以解决很多社会及家庭问题的,因为 <strong>物质是最重要的基础,基础不牢地动山摇</strong>。</p><p>也是为什么那么多人想先挣钱,想先财富自由,关于对财富自由的认知,可以看看我写的那篇 <a href="https://link.segmentfault.com/?enc=5XUUvBLmQv%2BeaqCfc8tKfg%3D%3D.ABqU7pZpYNHpiuq7BrczxEVwBZCN8WYkYvF3Sm0HfNz%2BDU6bjzsqBaE9xkEY6uBeJAjXQJ5S75ny0ASWUSq7XA%3D%3D" rel="nofollow">用钱生钱,谈谈我对财富自由的理解</a>,自认为写的真的很不错。</p><p>钱财可以在往后的时间里挣到,但是优质的对象一旦错过了,就真的是没了,因为一般来说,年龄越大,同龄状态下,留下的对象的质量就越差,结婚生子什么的可以不着急,但是找到合适的对象要抓紧。</p><p>而且我发现高价值的人,事业和爱情真的两不误,事业和爱情并不是互斥的。</p><p>成家立业,现在觉得先成家后立业还是有一点道理的,先找到优质的对象成家,再和优质的对象一起打拼,打造属于你们共同的家,这样的关系可能更稳固,更长久。</p><p>前几年,猫哥一直想挣钱,一直想财富自由,对找对象这件事情并不是十分上心,觉得随缘就好,缘份到了就找到了,现在觉得并不是那么一回事了。</p><p>就算自己有钱了,财富自由了,自己变成了优质对象了,但是没有了优质的对象可以选择,那也就成了人生的一大难题了。</p><p>一旦错过了该谈恋爱与结婚的年龄,可能就会一直错过了。</p><p>在合适的年龄做合适的事情。</p><p><img src="/img/remote/1460000039234912" alt="" title=""></p><h2>爱情的逻辑认知</h2><p><strong>谈恋爱也是要调动智商、情商,考验个人能力的呀!可惜大多数人都太不重视了,得过且过。能谈好恋爱的人,一定是情商智商双高的人。</strong></p><p>很多人以为自己会谈恋爱的,其实不是,很多事情没经历过,很多知识、认知、道理都不知道!</p><p>知道自己不知道是很重要的一件事情!</p><p>所以过年这几天,猫哥也没干啥事,就看了几本关于恋爱与爱情的书籍,其中有一本叫 《爱情的逻辑:破除亲密关系中的认知陷阱》,微信读书 APP 上能找到,猫哥看完后,觉得这是很棒的一本书,把爱情逻辑与认知讲得很通透,能给 5 星评分。</p><p>其中还看了一本极客时间上新出的一本书,叫《恋爱必修课》,这本书内容不多,也还没更完,不过猫哥觉得很不错,写的很接地气,也很受用,能给 5 星评分。</p><p>这几天猫哥还记录下了一些觉得很有用或者有感觉的语句,分享给大家。</p><p><img src="/img/remote/1460000039234918" alt="" title=""></p><h3>有感语句</h3><blockquote>爱与被爱,是一种可以习得的能力。知识和方法可以复制,虽然不可能速成,但是能力可以通过训练得到。<p>恋爱就是自我成长。与 ta 相处的过程中,其实就是一场自我认识、自我和解的旅程。</p></blockquote><blockquote><strong>心有戚戚但不发一言,人潮之中彼此相视而窃喜</strong>。<p><strong>痛痛快快地勇敢追求心中所爱,成了,你抱得美人归;没成,你也可以昂首挺胸走出这段关系。任何人挑不出你毛病,拒绝你的姑娘,也得给你点个赞:“是个坦荡人”。</strong></p></blockquote><blockquote>当暂时没有具体目标的时候,让自己变得有趣是最好的办法,也是给未来的 TA 的最好礼物。<p><strong>在恋爱过程中也是这样,对绝大多数人来说,投入到感情中的金钱、精力、时间和机会成本都是非常宝贵而有限的。如果你在最好的年华被渣男 / 渣女耽搁两三年,你的择偶质量可能就要凭空下降一档。更何况,那些对爱情的信心和憧憬,被狠狠撕碎一次后,可能就再也找不回来了。</strong></p><p>你要记住,越强大的人,越能兼容别人的价值观。这是爱的能力的修炼,也是人生的修炼。</p></blockquote><blockquote>选伴侣就像选牌,过日子就像打牌,想要把牌出得顺畅,前提自然是牌好。谁都希望自己起手就是一把好牌,只是起手的好牌通常是给男神、女神准备的,普通人有很大概率摸不到好牌,只能拿到跟自己在人群中的世俗地位大致相称的牌。此时,如果你跟别人的牌比较了一下,觉得不够满意,那么你有两个选择:<br>1.继续打下去,把这副牌打好。随着你对自己的牌型和打牌技巧越来越熟悉,用点心的话,你是可以在这副牌允许的范围内达到接近上限的位置的;<br>2.你也可以选择换牌(换伴侣),可能换得更好,也可能换得更差。<strong>只是换牌也有成本,最怕的是随着时间的流逝,你自己的“交换价值”也在下降,例如年龄增大但其他方面的吸引力又没有增加或增加得不够快,于是你换到的牌大概率是越来越差的。这种情况下如果你还频繁换牌,就等于每次都得在更差的池子里选牌——就像在单纯的比大小游戏中,原本可以在 6~10 中选,过几年再换牌或许只能在 3~7 里选了</strong>。</blockquote><blockquote>你该关心的是你欣赏的那些优点是否能长期维持在让你欣赏的最低水平线之上,如果能,这些优点就是你要优先选择的;如果不是,则不选。<p>两个人相比一个人是否更舒适,很重要的一点就是是否要极大地改变自己既有的习惯和行为状态,若是需要,体验就会变差。</p><p>“爱钱”是个正常的偏好,和喜欢颜值、喜欢性格、喜欢某些优秀品质是一个级别的偏好,并不存在喜欢这些就高级,喜欢另一些就低级。</p><p>当钱的增减到了不影响生活状态的时候,它的效用自然就会降低。</p></blockquote><blockquote>如果我们粗略地把人的世俗价值分为 A、B、C 三个等级,通常来说,在匹配的时候某人就达到了 A 级,那他很少会找 C 级的对象。但如果你一开始是 C 级,后期通过一些方式快速逆袭成了 A 级,由于你在 C 级时很难匹配到 A 级对象,现在却能轻易匹配上了,此时你受到的诱惑就大多了,因为直接回到了我们的第一条,你原先的伴侣覆盖的优势变得极小。优势就是优势,为什么会变呢?当然会,你接触的人不同了,拿来和伴侣做比较的对象就有了不同。</blockquote><blockquote>因此,在爱情中智商降为零,并不意味着当事人真的一沾到爱情就变得特别笨,而是当事人更愿意为了期待对方的某些回报或害怕失去手里的某些东西,自愿牺牲某些利益而已。<p>恋爱是一个审视他人和审视自己的过程,审视他人主要是发现他人的优点和缺点,审视自己主要是通过跟他人的互动来发掘自己内心真正的需求。</p><p><strong>对于一个三观正常、有一些正确的底层逻辑基础的人来说,每一次恋爱都是一次修行,无论是成功还是失败,都能使自己的想法、行为往正确的方向修正。所以,修习底层智慧和逻辑能力是第一位,然后再在实践中多用世界给的结果反馈来修补自己的理念,就肯定能让自己的爱情观更靠近“真理”。</strong></p></blockquote><blockquote><strong>修炼爱情智慧的主要目的并不是获得爱情,而是修炼自身。至于持久的爱情,只不过是由于你的智慧体现在了你的思想和行为上,从而可能得到的一件附属品而已。</strong></blockquote><blockquote>其实爱情只是众多人生体验的一种,当我们过于在意这一类体验的得失时,自然就会放大每一个相关行为的影响,于是当我们在其他方面由于付出时间和精力不够,得不到足够好的体验时,就会很容易联想到那些在爱情的付出中得不偿失的瞬间,从而怀疑自己在时间精力分配上的选择;仅有当我们能不因为过多地为爱情付出而影响我们对其他体验的享受时,才能更好地享受爱情带来的独有“惊喜”。<p><strong>爱情是没有理由的,它只是我们在合适的时间、合适的地点遇到了合适的人,只要遵从自己内心的感觉,以真心换真心,就能谈一场轰轰烈烈、无愧于心的恋爱。</strong></p><p>往往就是爱得太过努力,用情太过认真,才会在爱情中注入过多的感性因素,被并不理智的情绪所控制,犹如紧紧拢住微弱的爱情火苗不放,急切地吹气,反而一口气吹熄了它。</p><p><strong>爱与被爱都是需要一生去学习的能力。爱情的修炼其实是两个人的共同成长,修炼的是自身。长久的爱情都很需要智慧的引导。</strong></p><p>爱情就是一场自我修炼,找对象其实也是在找寻自我。</p><p>务必真诚,求真是人类的永恒追求之一。</p></blockquote><p>人一生会遇到约 2920 万人,两个人相遇的概率是 0.00478,而你我相识的概率是 0.0000005,而跨过相遇相识相知乃至相爱,概率 0.000049,如此之低。 </p><p>一个人走过最有勇气的路,就是从路人甲走到你心里。</p><p>如果遇见你花光了我所有的运气,那和你在一起用光了我所有的智商。</p><p>如此来之不易,且行且珍惜。</p><p><img src="/img/remote/1460000039234917" alt="" title=""></p><p>更多有感语句请看原文:<a href="https://link.segmentfault.com/?enc=BP4ZNWRDas5xl3eIxS58dw%3D%3D.RHZdz5V69jS2LWi4NN%2FoBOMnj2rRevf1Zch29%2FGfpcro%2BDj4Pl%2F5EWRO83mGb%2BM5314JZk8IWzPffTkAR1gHxA%3D%3D" rel="nofollow">相亲感悟:关于恋爱择偶的几点直击心灵深处的认知</a></p>
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
https://segmentfault.com/a/1190000039157357
2021-02-02T23:24:35+08:00
2021-02-02T23:24:35+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
32
<p><img src="/img/remote/1460000039157360" alt="" title=""></p><p>尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了。</p><p>而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。</p><p>主要是要熟练一下 Vue3,好准备用 Vue3 重构一下自己的网站项目: <a href="https://link.segmentfault.com/?enc=hErGQVDM%2BJgpQOU%2BdUQ19Q%3D%3D.ltFAaeW1v7vzU%2B6AfdXwbpCp4%2FA2afIpNOY%2BVjgihjSU7H87jRno3eYn7MaUmOzuYC%2B7LEq7kU%2BgqaDWBCiiDw%3D%3D" rel="nofollow">blog-vue-typescript</a> ,计划是过年期间会着手重构这个项目,年后会上线。</p><p><img src="/img/remote/1460000039157359" alt="" title=""></p><h2>1. 初化化项目</h2><p>全局安装 vite-app</p><pre><code class="js">npm i -g vite-app</code></pre><p>创建项目</p><pre><code class="js">yarn create vite-app <project-name>
# 或者
npm init vite-app <project-name></code></pre><p>进入项目,安装依赖</p><pre><code class="js">cd <project-name>
yarn # 或 npm i</code></pre><p>运行项目</p><pre><code class="js">yarn dev </code></pre><p>打开浏览器 <a href="https://link.segmentfault.com/?enc=5Mth5nnqyRjZozbHojhqAw%3D%3D.2w21jow2ZD1u8UFbwCY05hVDFs5naZ06YMbYSCMYCmw%3D" rel="nofollow">http://localhost</a>:3000 查看</p><h2>2. 引入TypeScript</h2><p>加入 ts 依赖</p><pre><code class="js">yarn add --dev typescript</code></pre><p>在 项目根目录下创建 TypeScript 的配置文件 tsconfig.json</p><pre><code class="js">{
"compilerOptions": {
// 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出,仅为了类型检查。
"allowSyntheticDefaultImports": true,
// 解析非相对模块名的基准目录
"baseUrl": ".",
"esModuleInterop": true,
// 从 tslib 导入辅助工具函数(比如 __extends, __rest等)
"importHelpers": true,
// 指定生成哪个模块系统代码
"module": "esnext",
// 决定如何处理模块。
"moduleResolution": "node",
// 启用所有严格类型检查选项。
// 启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict,
// --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。
"strict": true,
// 生成相应的 .map文件。
"sourceMap": true,
// 忽略所有的声明文件( *.d.ts)的类型检查。
"skipLibCheck": true,
// 指定ECMAScript目标版本
"target": "esnext",
// 要包含的类型声明文件名列表
"types": [
],
"isolatedModules": true,
// 模块名到基于 baseUrl的路径映射的列表。
"paths": {
"@/*": [
"src/*"
]
},
// 编译过程中需要引入的库文件的列表。
"lib": [
"ESNext",
"DOM",
"DOM.Iterable",
"ScriptHost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}</code></pre><p>在 src 目录下新加 shim.d.ts 文件</p><pre><code class="js">/* eslint-disable */
import type { DefineComponent } from 'vue'
declare module '*.vue' {
const component: DefineComponent<{}, {}, any>
export default component
}</code></pre><p>把 main.js 修改成 main.ts</p><p>在根目录,打开 Index.html</p><pre><code class="js"><script type="module" src="/src/main.js"></script>
修改为:
<script type="module" src="/src/main.ts"></script></code></pre><h2>3. 引入 eslint</h2><p>安装 eslint prettier 依赖</p><p><code>@typescript-eslint/parser @typescr ipt-eslint/eslint-plugin</code> 为 eslint 对 typescript 支持。</p><pre><code class="js">yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin</code></pre><p>在根目录下建立 eslint 配置文件: .eslintrc.js</p><pre><code class="js">module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
// 'no-use-before-define': [
// 'error',
// {
// functions: false,
// classes: true,
// },
// ],
'@typescript-eslint/no-use-before-define': 'off',
// '@typescript-eslint/no-use-before-define': [
// 'error',
// {
// functions: false,
// classes: true,
// },
// ],
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$'
}
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$'
}
],
'space-before-function-paren': 'off',
quotes: ['error', 'single'],
'comma-dangle': ['error', 'never']
}
};</code></pre><p>建立 prettier.config.js</p><pre><code class="js">module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: false, // 未尾逗号
vueIndentScriptAndStyle: true,
singleQuote: true, // 单引号
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'none', // 未尾分号
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf'
}</code></pre><h2>4. vue-router、vuex</h2><pre><code>yarn add vue-router@next vuex@next</code></pre><h3>4.1 vuex</h3><p>在根目录下创建 store/index.ts</p><pre><code>import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
export interface State {
count: number
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})</code></pre><p>main.ts 修改</p><pre><code>import { createApp } from 'vue'
import { store, key } from './store'
import App from './App'
import './index.css'
const app = createApp(App)
app.use(store, key)
app.mount('#app')</code></pre><p>components/HelloWord.vue 修改</p><pre><code><template>
<h1>{{ msg }}</h1>
<button @click="inCrement"> count is: </button>
<p>{{ count }}</p>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import { key } from '../store'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: {
type: String,
default: ''
}
},
setup() {
const store = useStore(key)
const count = computed(() => store.state.count)
return {
count,
inCrement: () => store.commit('increment')
}
}
})
</script></code></pre><h3>4.2 vue-router</h3><p>在 src 目录下建立 router/index.ts,内容如下:</p><pre><code class="js">import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "About" */ "../components/About.vue")
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;</code></pre><p>再新建一个 components/About.vue 文件,内容如下:</p><pre><code class="js"><template>
<img
alt="Vue logo"
src="../assets/logo.png"
/>
<h1>{{ msg }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'About',
data() {
return {
msg: 'Hello Vue 3.0 + Vite!'
}
},
setup() {}
})
</script></code></pre><p>再修改 main.ts</p><pre><code>import { createApp } from 'vue'
import { store, key } from './store'
import router from "./router";
import App from './App'
import './index.css'
const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')</code></pre><p>再访问 <a href="https://link.segmentfault.com/?enc=OWZasJGPJAWuWQCHFqfXCA%3D%3D.CAmGlxbBZXUUiNYhSco04jqqNQe1h%2Fu%2B3yrSDfPZQrQ%3D" rel="nofollow">http://localhost</a>:3000/ </p><p><img src="/img/remote/1460000039157362" alt="" title=""></p><p>和 <a href="https://link.segmentfault.com/?enc=g2Co7ncrg8Dj1uUW%2BlejVw%3D%3D.jwIdLt%2BYy1X8fLf%2FM07zJ0vv5v46w6txjjfrc1HYh0M%3D" rel="nofollow">http://localhost</a>:3000/about 即可</p><p><img src="/img/remote/1460000039157363" alt="" title=""></p><h2>5. 加入 Element Plus</h2><h3>5.1 安装 element-plus</h3><p><strong>全局安装</strong></p><pre><code class="js">npm install element-plus --save</code></pre><h3>5.2 引入 Element Plus</h3><p>你可以引入整个 Element Plus,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。</p><p><strong>完整引入</strong></p><p>在 main.js 中写入以下内容:</p><pre><code>import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import router from "./router";
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import './index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')</code></pre><p>以上代码便完成了 Element Plus 的引入。需要注意的是,样式文件需要单独引入。</p><hr><p><strong>按需引入</strong></p><p>借助 <a href="https://link.segmentfault.com/?enc=aa5m7lqE5JPkfREpGurx2w%3D%3D.RyhOk97mVvSnrsUN4u1qQTGvt%2Bv7jK%2BGnZ052iwBfgd5amhCDb1pE3moaipymXtNCoRO7Nq0XJNT92SMTsCBIw%3D%3D" rel="nofollow">babel-plugin-component</a>,我们可以只引入需要的组件,以达到减小项目体积的目的。</p><p>首先,安装 babel-plugin-component:</p><pre><code>npm install babel-plugin-component -D</code></pre><p>然后,将 .babelrc 修改为:</p><pre><code class="js">{
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}</code></pre><p>接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:</p><pre><code class="js">import { createApp } from 'vue'
import { store, key } from './store';
import router from "./router";
import { ElButton, ElSelect } from 'element-plus';
import App from './App.vue';
import './index.css'
const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
/* or
* app.use(ElButton)
* app.use(ElSelect)
*/
app.use(store, key)
app.use(router)
app.mount('#app')
app.mount('#app')</code></pre><p>更详细的安装方法请看 <a href="https://link.segmentfault.com/?enc=Kk0Dw%2BgK4Ems%2FjjmOoEOoA%3D%3D.pCK%2FdgCTYJfBa13YoZVg3yWc%2B9YBu%2F7tWIHVSkLjZUo5BNwQFpf4ayGADoQX5DAS7ZA5AKI0mXhEoGYQL5vDjg%3D%3D" rel="nofollow">快速上手</a>。</p><h3>5.3 全局配置</h3><p>在引入 Element Plus 时,可以传入一个全局配置对象。</p><p>该对象目前支持 <code>size</code> 与 <code>zIndex</code> 字段。<code>size</code> 用于改变组件的默认尺寸,<code>zIndex</code> 设置弹框的初始 z-index(默认值:2000)。按照引入 Element Plus 的方式,具体操作如下:</p><p>完整引入 Element:</p><pre><code class="js">import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });</code></pre><p>按需引入 Element:</p><pre><code class="js">import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);</code></pre><p>按照以上设置,项目中所有拥有 <code>size</code> 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。</p><h2>最后</h2><p><img src="/img/remote/1460000039157361" alt="" title=""></p><p>至此,一个基于 Vue3 全家桶 + Vite + TypeScript + Eslint + Element Plus 的开发环境已经搭建完毕,现在就可以编写代码了。</p><p>各个组件的使用方法请参阅它们各自的文档。</p><p>不得不说 Vue3 + Element Plus + Vite + TypeScript 是真的香!</p><p>推荐一个 Vue3 相关的资料汇总: <a href="https://link.segmentfault.com/?enc=cNlJxNTsvQzRJ1TOzj%2FaaA%3D%3D.cgkQiMHJ1aEmFmhVxEUw8SeyxDHE611tsUAHfWr9aof7zWxGHipeD7iH0WhbLz2TaaW4f5zKXgPqD2zs8DhZaA%3D%3D" rel="nofollow">Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目</a>,相信你会挖到矿哦!</p><p>Vue3 中文文档,国内 CDN 加速版:</p><blockquote><a href="https://link.segmentfault.com/?enc=cY8GAAQa9ywp0weJJoyvFg%3D%3D.0EQc7TsZZQxo9Bfro%2FgR7S2Ix7tGGYrU4UySlw0%2B5Ng%3D" rel="nofollow">https://vue3js.cn/docs/zh/</a></blockquote><p>Element Plus 官网:</p><blockquote><a href="https://link.segmentfault.com/?enc=4LZIbn8YbI9c52fhPCckSg%3D%3D.7M0kofuItBWLUXTWk4gMF%2FAm2KEqtsGS7X9PJiKd5PPZiHKcqF0PGtOHixCK31yE" rel="nofollow">https://element-plus.org/#/zh-CN</a></blockquote><hr><p>作为 2021 第 2 篇原创技术文章,质量应该还可以吧,1 月的 KPI 完成,哈哈哈 😅</p><p>猫哥的年终总结在这里: <a href="https://link.segmentfault.com/?enc=RHvEFoKB%2BrMzposFTy4YNA%3D%3D.wqSrUgEYq7kcLCxZYNNbSkD%2F0kfOI3sU21Ih19uj3uvy1nTSP0TccVKyDp7uw0C1hwUgtn9x%2BznLTWB6%2FKrVDw%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>,希望能带给你一点启发,也看看猫哥的脸都被打歪的 😂 </p><p>参考文章:<a href="https://segmentfault.com/a/1190000038533257">vue3 + vite + typescript + eslint + jest 项目配置实践</a></p><p><strong>推荐阅读</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=XI6EQsVIkDoLcDhCdXUGXg%3D%3D.RtQ75QyQKVQ%2F711EXiHjipNjvbWK9ABR1v4FQOCpcKaRPmdPgeXM8HApe86uidi3YZDRedbIKkpPOdZ43ECRyw%3D%3D" rel="nofollow">TypeScript 中提升幸福感的 10 个高级技巧</a></li><li><a href="https://link.segmentfault.com/?enc=nZxoGDpvFqg1qMgaHfinrw%3D%3D.YjTUZsCd5hauExVdcWwKiC8vTpI2sga%2BEcznkvGd0RQdBdD%2BX%2FIUnLnOQEQxTkb4RN6RACc67k7jxWfqoisvow%3D%3D" rel="nofollow">前端工程师的 2019 年终总结 - 当勤精进,但念无常</a></li><li><a href="https://link.segmentfault.com/?enc=4mqZhpLuHRpItB5M%2FpmRaw%3D%3D.fE86lPTEenK1P4f9Halbdda8aqtLv%2FRq%2BES8GCNt2wC2iUWdGPfEVEQUgF%2BgS6Mezwjz3u6eC3byR7CPl7nGfA%3D%3D" rel="nofollow">前端工程师的 2018 年终总结 - 我的本命年</a></li></ul>
推荐程序员必备的 10 大 GitHub 仓库,前端占了 7 个!
https://segmentfault.com/a/1190000039147033
2021-02-01T20:56:28+08:00
2021-02-01T20:56:28+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
41
<p><img src="/img/remote/1460000039147041" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>关于猫哥,大家可以看看我的年终总结 <a href="https://segmentfault.com/a/1190000038859115https://mp.weixin.qq.com/s/qNxmvFxLCQVst4keREc72w">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>。</p><h2>前言</h2><p>初级前端与高级前端之间,很大原因就是投入学习前端的时间、经验的差别,其实就是信息差。</p><p>如果有一个地方能又快又好的获得这些优质的前端信息,那么将会大大缩短从初级到高级的时间。</p><p><a href="https://link.segmentfault.com/?enc=jIVui%2B1yuTVmbCUnVwZCNQ%3D%3D.3HLskUvJl632%2FeWXB%2FrotnoE0Isl1hsJqGRQ0ITYcIVyc0ZAbF5Icd3M3gMZ177HfykNP%2Bd9O53KnB1WibP%2FlA%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a> 就是这样一个仓库,能帮助前端开发人员节省时间的仓库!</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=RHVoGT4v1S2GHOzd1RU%2BBg%3D%3D.lTxTfw99Vc%2BCCw3S5%2Fn3q02udD%2F%2Fb9HcyrkuEgO9NtuG%2BBJvk1Gl42%2BEO35OfYTdcHrZaTXO3ipiBIiBNRX1Tw%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>CSS 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 200 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=2MQY1y8%2FmYAqcA90u8cdsg%3D%3D.PMfLkv%2BFiu1fCcr9VTvcKbAIARneewHuSKwHnIpIFMMPuL%2FuJjv5z8OqyK%2FYa2ZHZMTOxOYSkLZ6Yz85JMrYwA%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为今天【前端GitHub】的第 17 期精华内容。</p><p><img src="/img/remote/1460000039147036" alt="" title=""></p><h2>1. build-your-own-x</h2><p>GitHub stars: 94k</p><p>如果你想要做些什么,并且想要获得一些关于如何实现它的指导,这是一个很好的资源。</p><p>通过浏览列表,你还会发现很多真正有趣的事情。</p><p>比如建立你自己的 Front-end Framework / Library</p><p><img src="/img/remote/1460000039147038" alt="" title=""></p><p>建立你自己的 Game</p><p><img src="/img/remote/1460000039147040" alt="" title=""></p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=dHgig9z6FO1jZjaokvPVxw%3D%3D.bhRkskUgrAC4lkkbbATT2Ogxf6DODBgVc2jaxnQPL6vSxM5RnxbAsHGiazWtTS5ccOwvAO60662aYAniLTZQhA%3D%3D" rel="nofollow">https://github.com/danistefan...</a></blockquote><h2>2. javascript-algorithms</h2><p>GitHub stars: 94k</p><p>该仓库包含了多种基于 JavaScript 的算法与数据结构。</p><p>每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。</p><p>数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器</p><p>算法包含了 算法主题 和 算法范式。</p><p>其中算法主题又包含了:数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。</p><p>算法范式:算法范式是一种通用方法,基于一类算法的设计。这是比算法更高的抽象,就像算法是比计算机程序更高的抽象。</p><p>算法范式包含了:BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。</p><p>这项目还出了对应的教学视频,总共 81 个视频讲解,每个视频大概 5 - 10分钟左右,还能学习英语哦 😉</p><p><img src="/img/remote/1460000039147037" alt="" title=""></p><blockquote>youtube 的教学视频:<a href="https://link.segmentfault.com/?enc=NjQ2jv6wp8o6kaTrZLrp9A%3D%3D.A552MFa4VJS2oElyUXK8gJ3vpxTHcWjx6lYPe2lO4uCq%2Fn%2BMw%2FMQOuJCQtApbCMVkyfkz70WQwvpzmew1DN6QS%2BTzm0ooFXZQh0Ezh0qKlY%3D" rel="nofollow">https://www.youtube.com/playl...</a></blockquote><p>前端章鱼猫之前学习算法的时候,也在这个项目中收益良多呢!</p><p>而且这个项目还一直有维护和更新内容哦!真的非常不错的一个项目!</p><p>还想知道更多好的数据结构与算法项目,可以看看 <a href="https://link.segmentfault.com/?enc=yTzBb%2FAfxk0IoPGsanA1qg%3D%3D.%2FTqkeU1T9d8PzMogETmXY4XPri9%2FiuU5yYAE1F5VB7BPKEY4li3eyg1L6JZ3dhkC8qdbHd7YhVd4WVQg%2BJoegg%3D%3D" rel="nofollow">GitHub 上值得前端学习的 7 个数据结构与算法项目</a> ,相信猫哥,你会被惊艳到 ~</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=qhlCkc63etZ2XCbO4%2Bbg4A%3D%3D.byQluK0VsUykz%2BFvxtc%2F5fQfbF8XgIz7xiX1fHt0DKtUwu%2FkV5Jp3FVB1jDoIWwQGx6NdyVokPWymTRnO1AqSg%3D%3D" rel="nofollow">https://github.com/trekhleb/j...</a></blockquote><h2>3. computer-science</h2><p>GitHub stars: 74k</p><p>不管你是一个从事编程的人,还是一个已经在业界自学的开发者, OSSU 的课程为所有想要学习计算机科学的人提供了大量的免费学习资源。</p><p>OSSU 课程是使用在线材料进行的完整的计算机科学教育。它不仅用于职业培训或专业发展。</p><p>它适用于那些希望对所有计算学科具有基本概念的正确,全面的基础,以及那些拥有该学科,具有意愿和(最重要的是!)良好习惯的人,可以在很大程度上依靠自己的力量来接受这种教育来自世界各地的学习者社区。</p><p>它是根据本科计算机科学专业的学位要求减去通识教育(非CS)要求而设计的,因为假定遵循此课程的大多数人已经在CS领域以外接受了教育。</p><p>这些课程本身是世界上最好的课程,通常来自哈佛大学,普林斯顿大学,麻省理工学院等。</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=lpBj1DdKjrv%2Ftwe7axWb9w%3D%3D.p1U0n3qE5ywzqgk1eff%2FyDiOOZEvvisCNtu0f5bX2VAvgLMe%2BdS2BK4hM3zmj%2FsD" rel="nofollow">https://github.com/ossu/compu...</a></blockquote><p>类似的项目推荐:<a href="https://link.segmentfault.com/?enc=JLiZf9zptVtaPnpfveEcIA%3D%3D.nXuV7ptvKpeAGVeenOSI%2FzKTV4tP2iMurdVVgFLXaTHN1ypK0JP7K9TTbXKO1QN2ArNXEWvdx%2FHAT48ojCF28w%3D%3D" rel="nofollow">7 个 Github 上近 200k Star 的计算机学习资源,练好前端内功的秘籍!</a>相信你会找到你的武功秘籍!</p><h2>4. 30-seconds-of-code</h2><p>GitHub stars: 67k</p><p>超过 100 个代码段,涵盖了 JavaScript 中的各种内容,从典型的算法,到你可能会发现自己需要完成的常见任务。非常值得一看!</p><p>该项目讲的是满足你所有开发需求的简短代码段,里面都是些经常会用到而且是非常经典的代码,非常值得学习!</p><p>比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。</p><p><img src="/img/remote/1460000039147042" alt="" title=""></p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=oqNHqmsmNPFP3IDLtzkeGg%3D%3D.griyHh1K%2FdPIHpm7fCjPeamlnqn%2B1F4rprNr8FpWUL61JZ1DAq134VMBvgerKas05hxFTWkqcu0%2FpQeCJ9z3fA%3D%3D" rel="nofollow">https://github.com/30-seconds...</a></blockquote><p>类似的项目推荐可以看看这篇: <a href="https://link.segmentfault.com/?enc=bq3Vh2j94N54g1U8j2wgGA%3D%3D.D27JjncirrtY6FEN8e4pH6yDu3oPB7rCSzAHVMSd22bUqWnYDfwygOGf2foeIkPdLxI3WcdZ4iivUjc48idOFg%3D%3D" rel="nofollow">12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!</a>,你会发现新大陆的!</p><h2>5. realworld</h2><p>GitHub stars: 53k</p><p>有没有想过要学习如何使用特定的语言 / 技术开发适当的应用?</p><p>这就是为你准备的 GitHub 仓库!这超出了典型的“ to-do”应用程序, RealWorld 的示例使整个 “Medium-style” 应用程序更加丰富,包括了所有的钟声、哨声和最佳实践!</p><p>比如前端项目:</p><p><img src="/img/remote/1460000039147043" alt="" title=""></p><p>又比如后端项目:</p><p><img src="/img/remote/1460000039147035" alt="" title=""></p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=ixg9iNRNXEZy0ulCACIRwA%3D%3D.oLGxYTdsJF7%2FiP2ZCTbFZFFEuOQpDU%2FyWr80%2By0mCgA1c90DL%2BsXEhmJEPrRKz1m" rel="nofollow">https://github.com/gothinkste...</a></blockquote><h2>6. free-programming-books</h2><p>GitHub stars: 170k</p><p>该仓库主要是免费提供编程书籍。</p><p>大量的免费编程书籍可以帮助你的知识和理解更上一层楼。</p><p>除了编程书籍,还包含了免费在线课程、互动编程资源。</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=LhXpS754PcO1nEFUuYWQmg%3D%3D.RB56fqoyGRNaSMmB5rEf9S%2BN%2BHJZXO7ci7MYV2abKnvwTu6nS0R2A6qocIp87M1T4tMXKcocaT%2BhAT5L%2F%2FpK%2BQ%3D%3D" rel="nofollow">https://github.com/EbookFound...</a></blockquote><p>类似的项目推荐:<a href="https://link.segmentfault.com/?enc=ehAnnjKeYPsdg3lgobwAyg%3D%3D.ovch1ou8hyHaCNBmBkD1YS5RtQdDQkNPhrLYhpDAwoZ9xfRgFIS%2BMNOal%2F5uiI5yOgsE54Qw9bnjxPzNMYXcmg%3D%3D" rel="nofollow">160+ 本技术类精华电子书开源了,包括前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍</a>。</p><h2>7. system-design-primer</h2><p><img src="/img/remote/1460000039147039" alt="" title=""></p><p>GitHub stars: 120k</p><p>学习如何设计大型系统。为系统设计面试做准备。</p><p>如果你正在寻找高级软件工程(或更高的)职位,那么拥有设计大型系统的能力是很有价值的,很多大型技术公司都希望你具备这一能力。</p><p>这也是一个重要技巧,如果你打算为你正在做的任何工作构建任何大型系统的话。</p><p>这份指南提供了大量的信息来帮助你做好准备。</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=YuFruE1Kk2w8O%2FN0oGaQPA%3D%3D.pIm%2BvaWuk4OtEoV6fKqgmMY3mTbNq3biwidwa7zCYfW4Ofjsb0g3SDtDj6AtyTQX8XLDkisSt8Hq8OgHPOlWrA%3D%3D" rel="nofollow">https://github.com/donnemarti...</a></blockquote><h2>8. awesome-python</h2><p>GitHub stars: 92.2k</p><p>精选的 Python 框架,库,软件和资源的精选清单。</p><p>Python 内建了一系列不同的库、框架和技术的列表。</p><p>对那些想要学习一种新的编程语言或仅仅想要提高对已有 Python 的了解的人来说,这是一个极好的指南。</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=j0Ig4TaBlJyIyk26KrSYLQ%3D%3D.eZR4x%2FFMCS7QmzaC9wpBx9qSadsIkehVFOUcAfLOng51dfW2AfxdVVkjLashaYGa" rel="nofollow">https://github.com/vinta/awes...</a></blockquote><h2>9. nodebestpractices</h2><p>GitHub stars 59k</p><p>该仓库是对 Node.js 最佳实践中排名最高的内容的总结和分享。</p><p>当前,超过 50 个最佳实现,样式指南,架构建议已经呈现。</p><p>每天都有新的 issue 和 PR 被创建,以使这本在线书籍不断更新。</p><p>因此,拥有这些详细的指南可以帮助你快速提高技能。</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=abTqirarGzoLrjA2jTVY6Q%3D%3D.ddFPs9uSLHttCAZe1PLawu4TnlA6fpkWo870%2B%2FYNs1S6ECD8xO07GM7b9t7THlx5Pzg3Uldh5bbzi765BJSHqg%3D%3D" rel="nofollow">https://github.com/goldbergyo...</a></blockquote><h2>10. awesome-machine-learning</h2><p>GitHub stars: 47.8k</p><p>这个 GitHub 仓库包含了精选的很棒的机器学习框架,库和软件的列表。</p><p>地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=on29lOXqi4wPHLj07spC3g%3D%3D.EDD2sWi9%2BC%2F1Duv61lGFMEkdF8vgl%2Fea3PPlAhcK%2FxtEWGnIGF%2FqZKCV06A9m5mvjMqVJP89iTx0UHgaIxkTXA%3D%3D" rel="nofollow">https://github.com/josephmisi...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039047751" alt="" title=""></p><p>关于猫哥,大家可以看看 <a href="https://link.segmentfault.com/?enc=GH6l9EJUNH8eryxFxF%2BJMg%3D%3D.EIewkdEQuQy86Fukw23c%2Ba9W3Tf8EV0kGACMvgAlpB8th5bVYG9kBDY2lTyVtgtA4gnMN7FiFidp5MwYolMFkQ%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>,看看猫哥的脸都被打歪的 😂。</p><p>不知不觉,已经写到第 <strong>17</strong> 期了呢,已经分享超过 <strong>200</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=tNm%2FCyZK3Yd%2BZ5p6LKo55g%3D%3D.BOfTge8PJWh06nvwYjYC7ASW5q4OQq2EL%2B5tUTQMD6jzi3dIeW80mFjehk4TzDTQZIiQXZrXPa%2FPFRlkY%2BAEZg%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=vd%2F6cc3np%2FjRo7863HensA%3D%3D.39JqgQnY489n2atdaRCN5jAKdr1vPkRnjAKEO8pkTgWPEaq1Gzhujh%2FvJZjr87cLtoYc6WghMdGugCBbGaeLJA%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=NrwmPcz%2Fbp6VEXNGIlkcMw%3D%3D.udW71ankOxpq4%2BEOYignY%2BLemBtxMS%2BE9NVbztvi5GSsE2vyhLJ1hbE0kG7YMdLUTm6Gy1%2FowYLY6iHULsr%2BNA%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=oMjeGRpJ%2BWJxoBLBcbpFuQ%3D%3D.UVKydxZE7bJ2TJt51xrOsFBGYCh%2FBDjlQI7DEhO6HrJvaAGMFPkTqkZmOslo00ZqkxDJzhIshZk11mhFLFN7UQ%3D%3D" rel="nofollow">推荐 12 个学习前端必备的神仙级工具类项目与网站</a></li><li><a href="https://link.segmentfault.com/?enc=H5ER3DFNbe6TB83mid8pYw%3D%3D.JqjKluNhuj3q3BLPifaAjcFw4IiWgfy6MpWpNDoMawXHafQsO44OGAObQQGcQuTyYqjNHDlb31%2F%2BsCnOHbCBJQ%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=lpEuwy7bmB5xSpCvgKpZ9Q%3D%3D.b6TgeqvMIQO1U9OxnJrQnCGILufFL%2B8PRlMpNlC5RBxhRWHPluwBl%2B74upJtlmAxKxSosYgYibxjl%2Fnpk%2Boppg%3D%3D" rel="nofollow">12 个 GitHub 上超火的 JavaScript 奇技淫巧项目</a></li><li><a href="https://link.segmentfault.com/?enc=tUxCVos7sN6WUjtt9VqLOA%3D%3D.UxX3rwJ4dopWEr4ZazM8O2ebXeLYKovbASZJcNIemisq89X0TYf3642leJ2KhK%2BWDcNQPfd2rN0%2BI4gblTzRHA%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=oNcosY9sGsvLLqP5p7OlgA%3D%3D.wfPCWt9s7dlwd4e4lOXDenbWU99IylkqPPtp3pFahf3%2FuFuAJXPdh8xhKLQ9skp8sTUAQY3VPxACrAoT3D%2BNNg%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li></ul><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦,加超级猫的 WX:<strong>CB834301747</strong> ,一起闲聊前端。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p>
Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目
https://segmentfault.com/a/1190000039047740
2021-01-21T12:51:22+08:00
2021-01-21T12:51:22+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
22
<p><img src="/img/remote/1460000039047744" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>关于猫哥,大家可以看看我的年终总结 <a href="https://link.segmentfault.com/?enc=q9Dc9lh7kmxeidNWIkREkA%3D%3D.9dp%2FNP0tj4D2Fb8t6h4%2FVrk5WkLvGC9K7BD20vh21m9tk3JiNBXwjUuJZAkM4mylKhTkVNMRraOshvtb2s6lbA%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 3 年之痒</a>。</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=MQCvzmXI%2BKi2%2FWVkmaqP3A%3D%3D.0FWhQn4GHgpAop09LyYu6fcg10w%2BhFdHBF%2BhOFHWldfZqbbEhc3O6aDTlTi733lFvrlqkywy1%2Bk%2BtGbkw597%2Bg%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送,与时俱进版前端资源教程。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>CSS 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 100 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=RGzDJECuFfCIz7CMTKRH6g%3D%3D.UrtucdFLcBNsNCPAZJlclTZfWCdC%2BGzfpRaQhkcsg%2B4A9IWi9qr1ccZpjMtZVg575LzFhpGYfaq%2Fr7vkV%2FrEwQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>今天给大家推荐的是 Vue3 的源码中文学习教程、支持的 UI 组件库、优质实战项目。</p><p>以下为【前端GitHub】的第 16 期精华内容。</p><p><img src="/img/remote/1460000038959319" alt="" title=""></p><h2>1. Vue3 中文文档</h2><p><img src="/img/remote/1460000039047745" alt="" title=""></p><p>先给大家提供 3 个 Vue3 的中文学习网址。</p><p>Vue3 中文文档,国内 CDN 加速版</p><blockquote><a href="https://link.segmentfault.com/?enc=zkL62ZudYwE289z0pu%2Bzsg%3D%3D.A4LvswkCev%2FZOEQ%2BwodE%2BbYQab1Zy%2BcVPQs6CFP4NA8%3D" rel="nofollow">https://vue3js.cn/docs/zh/</a></blockquote><p><strong>Vue3 设计理念</strong></p><p>Vue3 设计理念,动机与目的,上手必读。</p><blockquote><a href="https://link.segmentfault.com/?enc=NnaKCN3ALLK2iED2fzX6Cg%3D%3D.s97CX9S%2BnAIxyRGIqn44FtSK8J6aOcC3fGCzv5hH2%2Bt2ZGPYUIrZGiJbsYD4XBpp" rel="nofollow">https://vue3js.cn/vue-composi...</a></blockquote><p><strong>Vue3 相关项目聚合网站</strong></p><blockquote><a href="https://link.segmentfault.com/?enc=iowCWLEwhWibFablMMC6HA%3D%3D.aSlh3JyhGhPtuD2%2Bson4X6UiKI9m6c%2F0CQp0Z06ZtEQ%3D" rel="nofollow">https://vue3js.cn/</a></blockquote><h2>2. Vue3 源码</h2><p>为什么要学习源码 ?</p><blockquote><strong>1. 阅读优秀的代码的目的是让我们能够写出优秀的代码</strong>。<p><strong>2. 不给自己设限,不要让你周围人的技术上限成为你的上限</strong>。</p></blockquote><p>其实就跟我们写作文一样,你看的高分作文越多,写出高分作文的概率就越大。</p><p>基于现在的程序员工作模式(模块化开发,只需要拿到需求做自己的部分),别说看源码,甚至就连项目里的代码都懒的去看,我认识的很多程序员就是这样的,一个项目摸了两三年,你要问他项目中 <code>webpack</code> 都干了哪些事情,他的回答是不知道,反而趾高气扬的告诉你,那些他从来都用不上,看了也没什么用,也看不懂,这里省略内心千字脏文。</p><p><strong>阅读主要目的</strong> 是为了帮助我们 <strong>积累素材</strong>,不要书到用时方恨少,看到美女我们应该能有一万种词语去形容,如气若幽兰,美艳不可方物,一笑倾城,再笑倾国,世间尤物,而不是简短的几个字,我艹,美女!</p><blockquote><a href="https://link.segmentfault.com/?enc=u%2Bnb17X2g4kp01CBdoz%2B9g%3D%3D.fa%2Ftf05vtD4mR0yK3Ym2N8hwyVjzP%2FBUJYJlnWVicd8%3D" rel="nofollow">https://vue3js.cn/start/</a></blockquote><h2>3. UI 组件库</h2><h3>Ant-design-vue</h3><p>ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步, 目前支持 Vue 3.0 的 2.0.0 测试版 已发布。</p><blockquote><a href="https://link.segmentfault.com/?enc=B%2BoNudSJ0Af%2FUqQINueLSA%3D%3D.wqvoohwwaU4YbNI7rNesAYmL8UBrUcZ%2BuAcTD%2Fe7fbfAbynuE67jgHGuDrGQ%2F%2FFK" rel="nofollow">https://antdv.com/docs/vue/in...</a></blockquote><h2>Vant 3.0</h2><p>轻量、可靠的移动端 Vue 组件库。</p><p>Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。</p><p>目前 Vant 已完成了对 Vue 3.0 的适配工作,并发布了 Vant 3.0 版本</p><blockquote><a href="https://link.segmentfault.com/?enc=SO5IUznycsv%2B%2FJue0lF%2BsQ%3D%3D.Q1hT%2BpUZrTgZzalJiMj9fKHboFtyLhuBBResoE81yWt3N70yIxxsX7emOuId7Zfk" rel="nofollow">https://vant-contrib.gitee.io...</a></blockquote><h3>Element-plus</h3><p><img src="/img/remote/1460000039047746" alt="" title=""></p><p>Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。</p><blockquote><a href="https://link.segmentfault.com/?enc=iE%2FIHAVf70TUYxscAKMYIA%3D%3D.0JUscq9aWiHGW7jAxMnwX4CibnPDRa1SSwMWWEC0HtiRg4J3YRS8zVnCGFYRuPP4" rel="nofollow">https://element-plus.org/#/zh-CN</a></blockquote><h3>element 3</h3><p><img src="/img/remote/1460000039047742" alt="" title=""></p><p>Element 3,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。</p><blockquote><a href="https://link.segmentfault.com/?enc=lTEYgTujX86SHrsWQy7TEw%3D%3D.h3Kpdd46Jq%2Fidj5Of3OF1ZpHP9NONGTTbg531L4L8EAXubs%2BjRIK9vX7AFclL9Ko" rel="nofollow">https://github.com/hug-sun/el...</a></blockquote><h2>4. 实战项目</h2><h3>vue-vben-admin</h3><p><img src="/img/remote/1460000039047750" alt="" title=""></p><p>基于 ant-design-vue,typescript,vue3.0,vite 实现的 vue3 风格的后台管理系统。</p><blockquote><a href="https://link.segmentfault.com/?enc=eOeIQ3eXcddR%2BPKCA9yy%2Bg%3D%3D.%2Faka%2FnWUgdvEcTLfrudPHyIWjxJkQqjWHi2MDv4Gj0Gnfi6dAUlXYck4bUfPmnMn" rel="nofollow">https://github.com/anncwb/vue...</a></blockquote><h3>vue-admin-beautiful</h3><p><img src="/img/remote/1460000039047749" alt="" title=""></p><p>基于 vue3.0 的开源 admin 项目,同时支持电脑,手机,平板,🔥🔥🔥默认分支使用vue3.x+antdv 开发,master 分支使用的是 vue2.x+element 开发。</p><blockquote><a href="https://link.segmentfault.com/?enc=4%2BaGYipxfJ16BvLQ34e4Yw%3D%3D.tgC5SgfsbNgb2NSnuxid3%2FRgXNMfS6YSMyFoi9xnbcNO%2FZ01qoeJNbAcZnz6jhKzG3UlNMzQSkqo84TlVX43gw%3D%3D" rel="nofollow">https://github.com/chuzhixin/...</a></blockquote><h3>vue-cli</h3><p>基于 Vue3.0 Composition Api 快速构建实战项目</p><blockquote><a href="https://link.segmentfault.com/?enc=H6x2cYQk2brHFM2h5%2BqXbg%3D%3D.NNlrvfEtxhaLUCRGT8i3z%2FkgzoktF6ejO9UaxFaT82FlixNeozFCzZB%2F5cc0jMyN" rel="nofollow">https://github.com/Wscats/vue...</a></blockquote><h3>movie-trailer</h3><p><img src="/img/remote/1460000039047748" alt="" title=""></p><p>Vue3 + TypeScript 开发的电影预告片 webAPP,可以查看正在热映与即将上映的电影信息和短片。</p><blockquote><a href="https://link.segmentfault.com/?enc=okW6d%2BOlDXj3o7FpjZPrhA%3D%3D.m09AM8BSEIyJm0quEiLAz5GTBM9G1HHla1U7arEkUauLlgdU%2FAEF%2Bil634OvCdb2" rel="nofollow">https://github.com/lhz960904/...</a></blockquote><h3>newbee-mall-vue3-app</h3><p><img src="/img/remote/1460000039047747" alt="" title=""></p><p>newbee-mall 项目是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 </p><p>前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。</p><blockquote><a href="https://link.segmentfault.com/?enc=D%2BxJmg0gdr4Y3OO2B%2BwXOg%3D%3D.LMKeXhGTdyAGoKuy%2BPruCQ%2BbmqgYGV4L5lX6XzWombnkrDrpldNXL6RH8ntj%2BOOrvPCOckJlrJjjmCm2VcHZJA%3D%3D" rel="nofollow">https://github.com/newbee-ltd...</a></blockquote><h3>vue3-jd-h5</h3><p><img src="/img/remote/1460000039047743" alt="" title=""></p><p>🔥 基于 vue3.0.0 ,vant3.0.0,vue-router4.0.0-0, vuex^4.0.0-0,vue-cli3,mockjs,仿京东淘宝的,移动端 H5 电商平台!</p><blockquote><a href="https://link.segmentfault.com/?enc=GhMWBC9iLsfQDdxg0C4KYw%3D%3D.QVRtGXdzF0ss8Gl6Sp1h847bIGNYEmyw07EpRryZrEWAVR10Teigzd7nYe%2F3sk5Z" rel="nofollow">https://github.com/GitHubGanK...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000039047751" alt="" title=""></p><p>关于猫哥,大家可以看看 <a href="https://link.segmentfault.com/?enc=CixKcVspB0PhBUrDxSSiiA%3D%3D.B%2B8YiF4IZmUNoWRg0NYFQbfMn8xQU6brLIZi9SYRh2mQ4NAhfjtmu0qg3VUr5BSbVL8loYL%2Fkp%2FDgaKgUaPJBA%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 3 年之痒</a>,看看猫哥的脸都被打歪的 😂。</p><p>不知不觉,已经写到第 <strong>16</strong> 期了呢,已经分享超过 <strong>200</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=jAHYy2%2FpeQVdK2R1zttf6Q%3D%3D.HAbEOvgpr8Tbi3HTPXAo8GEz%2BGkUD0E7L92t9u8V8ZpVF1NMNsZ4BupPVP2KWrMEIg1UycOgp5Xyg9VBEkdRZg%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=sE4bqRsSc6XaNqpO89RnrA%3D%3D.kW3G2MSvJi1R5MgkuNcn8vr%2BZ7y%2BQX97X8JNLAmcMQPoK7aqlk3FIC8OEodHQS9JTYia%2BMufIz9sPh8AyzbdsA%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=KJgNEt1Gwym2P3wi2c%2FAwQ%3D%3D.ac09dY8YDH4gh5xp1C7IYSRY%2FLh9Oel7VIbuU8YWk3TE9AwNZ3YdoOjvdl4uo%2Bhf5t7Thma020U8naVvWV9msA%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 WX:<strong>CB834301747</strong> ,一起闲聊前端。</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=L49uf6q9NR63BarIYvFjjA%3D%3D.YTglfqRCwl4WCY%2B%2FZ7SJy%2FlUWIWh62nuV0J9qVzuDIljXa2%2BxMyMJ3fK5%2FuWZlPRcoYZ3UVSKVUWOm4Al33vvw%3D%3D" rel="nofollow">推荐 12 个学习前端必备的神仙级工具类项目与网站</a></li><li><a href="https://link.segmentfault.com/?enc=mOc0skQtqC%2FrQfYgFHXKBw%3D%3D.HdDd1vC%2BYq0mLxjcYGpc6ADJabGUpLH5K2BmW9wK8aDGYhHCTYqde6MyuEOuSPEYwKYMFsd02UlpQFYp%2B%2BDJoQ%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=3n4%2FuGG179VkZkRtgRvkzg%3D%3D.4mlzJ3xKC6WPomPJq9AgX2KfpVmKdAqvxIu%2FjgC7025nWc4V8A3%2BQkrD9Ep52Q1zVFQYfxc8aaZUipkbDm%2FH7g%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li></ul>
TypeScript 中提升幸福感的 10 个高级技巧
https://segmentfault.com/a/1190000039030887
2021-01-19T22:38:13+08:00
2021-01-19T22:38:13+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
57
<p><img src="/img/remote/1460000039030890" alt="" title=""></p><p>用了一年时间的 TypeScript 了,项目中用到的技术是 Vue + TypeScript 的,深感中大型项目中 TypeScript 的必要性,特别是生命周期比较长的大型项目中更应该使用 TypeScript。</p><p>以下是我在工作中总结到的经常会用到的 TypeScript 技巧。</p><h2>1. 注释</h2><p>通过 <code>/** */</code> 形式的注释可以给 TS 类型做标记提示,编辑器会有更好的提示:</p><pre><code class="js">/** This is a cool guy. */
interface Person {
/** This is name. */
name: string,
}
const p: Person = {
name: 'cool'
}</code></pre><p>如果想给某个属性添加注释说明或者友好提示,这种是很好的方式了。</p><p><img src="/img/remote/1460000039030892" alt="" title=""></p><p><img src="/img/remote/1460000039030894" alt="" title=""></p><h2>2. 接口继承</h2><p>和类一样,接口也可以相互继承。 </p><p>这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。</p><pre><code class="js">interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;</code></pre><p>一个接口可以继承多个接口,创建出多个接口的合成接口。</p><pre><code class="js">interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;</code></pre><h2>3. interface & type</h2><p>TypeScript 中定义类型的两种方式:接口(interface)和 类型别名(type alias)。</p><p>比如下面的 Interface 和 Type alias 的例子中,除了语法,意思是一样的:</p><p><strong>Interface</strong></p><pre><code class="js">interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}</code></pre><p><strong>Type alias</strong></p><pre><code class="js">type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;</code></pre><hr><p>而且两者都可以扩展,但是语法有所不同。此外,请注意,接口和类型别名不是互斥的。接口可以扩展类型别名,反之亦然。</p><p><strong>Interface extends interface</strong></p><pre><code class="js">interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }</code></pre><p><strong>Type alias extends type alias</strong></p><pre><code class="js">type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };</code></pre><p><strong>Interface extends type alias</strong></p><pre><code class="js">type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }</code></pre><p><strong>Type alias extends interface</strong></p><pre><code class="js">interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };</code></pre><hr><p>它们的差别可以看下面这图或者看 <a href="https://link.segmentfault.com/?enc=TzZejWFDR9Co0dqoRIf%2FCw%3D%3D.XRAOZOGPLWIgmBl6uSTcB8iHhv4yo840jWKFfoYBGsi9zjwsvjLk%2FPV9W8OozZCNOH2%2BFoqQ3EYHEYdH9md40qyWBbfgWE9Zj1JLsNHwti0%3D" rel="nofollow">TypeScript: Interfaces vs Types</a>。</p><p><img src="/img/remote/1460000039030898" alt="" title=""></p><p>所以檙想巧用 interface & type 还是不简单的。</p><p>如果不知道用什么,记住:能用 interface 实现,就用 interface , 如果不能就用 type 。</p><h2>4. typeof</h2><p><code>typeof</code> 操作符可以用来获取一个变量或对象的类型。</p><p>我们一般先定义类型,再使用:</p><pre><code class="js">interface Opt {
timeout: number
}
const defaultOption: Opt = {
timeout: 500
}</code></pre><p>有时候可以反过来:</p><pre><code class="js">const defaultOption = {
timeout: 500
}
type Opt = typeof defaultOption</code></pre><p><img src="/img/remote/1460000039030897" alt="" title=""></p><p>当一个 interface 总有一个字面量初始值时,可以考虑这种写法以减少重复代码,至少减少了两行代码是吧,哈哈~</p><h2>5. keyof</h2><p>TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称。</p><p>keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。</p><p><code>keyof</code> 与 <code>Object.keys</code> 略有相似,只不过 <code>keyof</code> 取 <code>interface</code> 的键。</p><pre><code class="js">const persion = {
age: 3,
text: 'hello world'
}
// type keys = "age" | "text"
type keys = keyof Point;</code></pre><p>写一个方法获取对象里面的属性值时,一般人可能会这么写</p><pre><code class="js">function get1(o: object, name: string) {
return o[name];
}
const age1 = get1(persion, 'age');
const text1 = get1(persion, 'text');</code></pre><p>但是会提示报错</p><p><img src="/img/remote/1460000039030893" alt="" title=""></p><p>因为 object 里面没有事先声明的 key。</p><p>当然如果把 <code>o: object</code> 修改为 <code>o: any</code> 就不会报错了,但是获取到的值就没有类型了,也变成 any 了。</p><p><img src="/img/remote/1460000039030899" alt="" title=""></p><p>这时可以使用 <code>keyof</code> 来加强 <code>get</code> 函数的类型功能,有兴趣的同学可以看看 <code>_.get</code> 的 <code>type</code> 标记以及实现</p><pre><code class="js">function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
return o[name]
}</code></pre><p><img src="/img/remote/1460000039030896" alt="" title=""></p><h2>6. 查找类型</h2><pre><code class="js">interface Person {
addr: {
city: string,
street: string,
num: number,
}
}</code></pre><p>当需要使用 addr 的类型时,除了把类型提出来</p><pre><code class="js">interface Address {
city: string,
street: string,
num: number,
}
interface Person {
addr: Address,
}</code></pre><p>还可以</p><pre><code class="js">Person["addr"] // This is Address.</code></pre><p>比如:</p><pre><code class="js">const addr: Person["addr"] = {
city: 'string',
street: 'string',
num: 2
}</code></pre><p><img src="/img/remote/1460000039030900" alt="" title=""></p><p>有些场合后者会让代码更整洁、易读。</p><h2>7. 查找类型 + 泛型 + keyof</h2><p>泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。</p><pre><code class="js">interface API {
'/user': { name: string },
'/menu': { foods: string[] }
}
const get = <URL extends keyof API>(url: URL): Promise<API[URL]> => {
return fetch(url).then(res => res.json());
}
get('');
get('/menu').then(user => user.foods);</code></pre><p><img src="/img/remote/1460000039030891" alt="" title=""></p><p><img src="/img/remote/1460000039030901" alt="" title=""></p><h2>8. 类型断言</h2><p>Vue 组件里面经常会用到 ref 来获取子组件的属性或者方法,但是往往都推断不出来有啥属性与方法,还会报错。</p><p>子组件:</p><pre><code class="html"><script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
props: {
msg: String,
},
})
export default class HelloWorld extends Vue {
msg!: string;
}
</script></code></pre><p>父组件:</p><pre><code class="html"><template>
<div class="home">
<HelloWorld
ref="helloRef"
msg="Welcome to Your Vue.js + TypeScript App"
/>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
@Options({
components: {
HelloWorld,
},
})
export default class Home extends Vue {
print() {
const helloRef = this.$refs.helloRef;
console.log("helloRef.msg: ", helloRef.msg);
}
mounted() {
this.print();
}
}
</script></code></pre><p>因为 <code>this.$refs.helloRef</code> 是未知的类型,会报错误提示:</p><p><img src="/img/remote/1460000039030895" alt="" title=""></p><p>做个类型断言即可:</p><pre><code class="js"> print() {
// const helloRef = this.$refs.helloRef;
const helloRef = this.$refs.helloRef as any;
console.log("helloRef.msg: ", helloRef.msg); // helloRef.msg: Welcome to Your Vue.js + TypeScript App
}</code></pre><p>但是类型断言为 <code>any</code> 时是不好的,如果知道具体的类型,写具体的类型才好,不然引入 TypeScript 冒似没什么意义了。</p><h2>9. 显式泛型</h2><p>$('button') 是个 DOM 元素选择器,可是返回值的类型是运行时才能确定的,除了返回 any ,还可以</p><pre><code class="js">function $<T extends HTMLElement>(id: string): T {
return (document.getElementById(id)) as T;
}
// 不确定 input 的类型
// const input = $('input');
// Tell me what element it is.
const input = $<HTMLInputElement>('input');
console.log('input.value: ', input.value);</code></pre><p><img src="/img/remote/1460000039030902" alt="" title=""></p><p><img src="/img/remote/1460000039030903" alt="" title=""></p><p>函数泛型不一定非得自动推导出类型,有时候显式指定类型就好。</p><h2>10. DeepReadonly</h2><p>被 <code>readonly</code> 标记的属性只能在声明时或类的构造函数中赋值。</p><p>之后将不可改(即只读属性),否则会抛出 TS2540 错误。</p><p>与 ES6 中的 <code>const</code> 很相似,但 <code>readonly</code> 只能用在类(TS 里也可以是接口)中的属性上,相当于一个只有 <code>getter</code> 没有 <code>setter</code> 的属性的语法糖。</p><p>下面实现一个深度声明 <code>readonly</code> 的类型:</p><pre><code class="js">type DeepReadonly<T> = {
readonly [P in keyof T]: DeepReadonly<T[P]>;
}
const a = { foo: { bar: 22 } }
const b = a as DeepReadonly<typeof a>
b.foo.bar = 33 // Cannot assign to 'bar' because it is a read-only property.ts(2540)</code></pre><p><img src="/img/remote/1460000039030904" alt="" title=""></p><h2>最后</h2><p><img src="/img/remote/1460000039030905" alt="" title=""></p><p>大佬们,觉得有用就赞一个呗。</p><p>挺久没写原创技术文章了,作为 2021 第一篇原创技术文章,质量应该还可以吧 😅</p><p>笔者的年终总结在这里: <a href="https://link.segmentfault.com/?enc=rCs%2FYr3UBCnzJLvinLB7eg%3D%3D.PD46ZFem5aNALMr8Q8mfqbj%2FCykH623xZMaz3dvxAQxN6pKlixycw8hkpkobUYOPoOyhP0j71DOsj1LwANl%2Frw%3D%3D" rel="nofollow">前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马</a>,希望能带给你一点启发。</p><p>参考文章:</p><ul><li><a href="https://link.segmentfault.com/?enc=Ml47AQm7idXC5bVUTSUAOA%3D%3D.vfPLuWwWyq%2FeTRb%2BB4wy3y%2F99ovuDOHxWuvvC9nHULxTDd7GunhZBECvxhhgOPGQ" rel="nofollow">TypeScript 高级技巧</a></li><li><a href="https://link.segmentfault.com/?enc=8m%2BpxxLCz%2FoUsdVyQB1WCQ%3D%3D.a9srE5w8XdNidQG51OeI%2BMmkwOcxhAvYU70ROFvvFiUnChX7qww3vaQIQGIMP6dC" rel="nofollow">巧用 Typescript</a></li><li><a href="https://link.segmentfault.com/?enc=5iphh41b%2Fvu63p5GJGfswg%3D%3D.BrvkqVXiXQzdogK06EIliOXFFo0fEiE8qh15oxaQVcLr9mAhBZQvBl7VJtKtKZla" rel="nofollow">巧用 Typescript (二)</a></li><li><a href="https://link.segmentfault.com/?enc=oWUlFvCzKOWPKt9TycZmjw%3D%3D.xVmr2gmgS3jfT%2BOxFt5%2B1uO2DOJoQUVsPIPs5%2ByKqW14KPLffWbfvGzawC7sqaDUS88UXIVxe3XQbCblTgtUMw%3D%3D" rel="nofollow">接口</a></li></ul><p><strong>推荐阅读</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=MS6rPcReiRQwBAyctUcJmA%3D%3D.XBzI2Du5T2yMDMQinZpanc52f1arnm7LoQMPYxHW8MIsUAYN7bo8mbMJ8pJRS3aLxSTZg79q8n8z11z4KSepZQ%3D%3D" rel="nofollow">前端工程师的 2019 年终总结 - 当勤精进,但念无常</a></li><li><a href="https://link.segmentfault.com/?enc=dtCA51%2BA5sy5a4lwTq97zA%3D%3D.F9RN%2BKN3CsPkFXigK2ydgcBjmuCwSp%2FHkLlaZIPCTkV02YochccabXKuGHgd4%2FIUWXgPvbMNBYQzc%2FWqLl3FyQ%3D%3D" rel="nofollow">前端工程师的 2018 年终总结 - 我的本命年</a></li></ul>
推荐 7 个学习 TypeScript 的宝库,2021 学 TS 看这篇就够了!
https://segmentfault.com/a/1190000038959316
2021-01-12T21:38:43+08:00
2021-01-12T21:38:43+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
48
<p><img src="/img/remote/1460000038959325" alt="" title=""></p><p>大家好,新年快乐,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=FpA1iLYcS1KA0h0h%2FIgBQA%3D%3D.Eu77e0ZBC7tk24baVMsiTxoj9PKcJbfJo%2B7%2FDrzzkCKTj5j4MXO1gKG2tx1rz6mJtHYzNCwCf66nWJ%2FWqcbVhg%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送,与时俱进版前端资源教程。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>CSS 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 100 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=mb225DTbYjREDwm6m9K%2FVw%3D%3D.%2FM8G%2BhymzUJ0sWJfT1fgtteN3b8KaHyBosV8AdLoyXYXPn8qiKJL6hckWKyOR6WgFequwxSkJ6Sc2rF7kyIPGg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>今天给大家推荐的是学习 TypeScript 的优质项目。</p><p>以下为【前端GitHub】的第 15 期精华内容。</p><p><img src="/img/remote/1460000038959319" alt="" title=""></p><h2>TypeScript</h2><p>TypeScript 是适用于任何规模应用的 JavaScript。</p><p>TypeScript 扩展了 JavaScript ,为它添加了类型支持。</p><p>TypeScript 可以在您运行代码之前找到错误并提供修复,从而改善您的开发体验。</p><p>任何浏览器,任何操作系统,任何运行 JavaScript 的地方,完全开源。</p><table><thead><tr><th>网站</th><th>说明</th></tr></thead><tbody><tr><td><a href="https://link.segmentfault.com/?enc=OwFWTP%2BoaMQF3vShYTEXXA%3D%3D.HfOWu2d%2F3QX4YjogCr3bYS%2BwPJjcZASMX%2FKYiH7PHQVLPNgBqrNAqYghKAfEphpa" rel="nofollow">TypeScript</a></td><td>TypeScript 官网,TS 扩展了 JavaScript ,为它添加了类型支持</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=GzPWvGufkxPLcF9iF%2BonTA%3D%3D.cGGtYLUJUuHsG7TJ32aCqs9KlxpnNqS7gQXVG5QPDNHZT5CF70Ib%2BIcOwdmGjrSK" rel="nofollow">typescript-tutorial</a></td><td>TypeScript 入门教程,循序渐进的理解 TypeScript</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=4MG0FNDMu7t%2FH%2F3z%2BTfwNQ%3D%3D.K7FvUEs0CY69vzWthWugf5Xd94xOIYg%2Bq%2BJ8%2BlkSs75dthiyk4kzOp6KxsUJzC9k" rel="nofollow">TypeScript</a></td><td>TypeScript 使用手册</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=DJWAy2LsrEIJQMZpxJVpsg%3D%3D.hb5hEeoyeL5AGZpgR05WJFaAuYXBRTWPVOwJF7rBDHxR2BmniqKv7X2Zt3aDPzSdwG%2FOkB7prRqifZkJ40xNtg%3D%3D" rel="nofollow">typescript-book-chinese</a></td><td>深入理解 TypeScript</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=0KIjWahj0oDtl2oxS%2Fn4EA%3D%3D.ZdczuMJFBUYt9iJyKXBTCPv9cx6c%2F7Ap7MACVHq%2BnZqrnm6Bomv%2FivmoprJQNT1eNVbpQJaOcN%2B9yKuTsE%2F6jQ%3D%3D" rel="nofollow">clean-code-typescript</a></td><td>适用于TypeScript的简洁代码概念</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=Re%2F7kFn2IdCXa%2Fn0ZzDPXA%3D%3D.wkTESS6H0BqX%2F6ZirvnqSie6%2Ba9Auxw6aXEqjbx6upc%3D" rel="nofollow">TypeScript入门</a></td><td>TypeScript 入门的视频教程</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=VPykE23MVeRsKEQUB5fGhA%3D%3D.N1HTcECp1yScuEA8Bsc6aqt3gIHXojPAdD7BtDXof5EESxR9XOWPluNr%2BGsYAI1m" rel="nofollow">typescript-tutorial</a></td><td>TypeScript 速成教程(2小时速成)</td></tr></tbody></table><h2>1. TypeScript</h2><p><img src="/img/remote/1460000038959322" alt="" title=""></p><p>学习一门技术,最好的方式肯定是看官网的教程啦!</p><p>官网上有什么是 TypeScript,为什么要用 TypeScript ,和 api 相关的文档,而且还是一手的学习资料,无疑是最好的学习资料了。</p><p>而且还可以通过社区了解最新的进展。</p><p><img src="/img/remote/1460000038959320" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=TLHCVWPKUEfkpbeBnKbV9g%3D%3D.ld0ShOKHuKX29SWLK3pSw259pmvA%2BdG3cyCn6Afuc5gtZBILq53KR3SROJg1%2BkrL" rel="nofollow">https://github.com/microsoft/...</a></blockquote><h2>2. typescript-tutorial</h2><p><img src="/img/remote/1460000038959326" alt="" title=""></p><p>从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。</p><p>与官方手册不同,本书着重于从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript,希望能给大家一些帮助和启示。</p><p><strong>适合人群</strong></p><p>本书适合以下人群</p><ul><li>熟悉 JavaScript,至少阅读过一遍《JavaScript 高级程序设计》</li><li>了解 ES6,推荐阅读 ECMAScript 6 入门</li><li>了解 Node.js,会用 npm 安装及使用一些工具</li><li>想了解 TypeScript 或者想对 TypeScript 有更深的理解</li></ul><p>本书不适合以下人群</p><ul><li>没有系统学习过 JavaScript</li><li><p>已经能够很熟练的运用 TypeScript</p><blockquote><a href="https://link.segmentfault.com/?enc=mqkyVOT%2BzLQWqWdCQVKg9w%3D%3D.wnf9iwzCR3mfQBHPLwWmUxiOWNI3LkpFo%2FoXSXStVNNWf0VkiED6oJtN34tjoj9H" rel="nofollow">https://github.com/xcatliu/ty...</a></blockquote></li></ul><h2>3. TypeScript</h2><p><img src="/img/remote/1460000038959328" alt="" title=""></p><p>TypeScript 中文使用手册。</p><p>这个好像是 TypeScript 官网的中文翻译原文,猫哥不是很确定,不过是个学习 TS 的好仓库。</p><ul><li>✔️ TypeScript 语言用于大规模应用的 JavaScript 开发。</li><li>✔️ TypeScript 支持类型,是 JavaScript 的超集且可以编译成纯 JavaScript 代码。</li><li>✔️ TypeScript 兼容所有浏览器,所有宿主环境,所有操作系统。</li><li><p>✔️ TypeScript 是开源的。</p><blockquote><a href="https://link.segmentfault.com/?enc=B5H93d%2FZ5zGFppqnJ2m9Rw%3D%3D.ZoCL%2B%2FZEvikuxx%2FYxmYFt2NnSfLAO%2BTFISwwCq14KBzepzzb5C2CAMoGE0TQ%2BxtV" rel="nofollow">https://github.com/zhongsp/Ty...</a></blockquote></li></ul><h2>4. typescript-book-chinese</h2><p><img src="/img/remote/1460000038959321" alt="" title=""></p><p>TypeScript Deep Dive 中文版,深入理解 TypeScript。</p><p>《TypeScript Deep Dive》 是一本很好的开源书,从基础到深入,很全面的阐述了 TypeScript 的各种魔法,不管你是新手,还是老鸟,它都将适应你。</p><p>此外,它不同于 TypeScript 官方给出的文档(当然 TypeScript 给出的文档是很好的),在此书中,结合实际应用下的场景用例,你将能更深入的理解 TypeScript。</p><blockquote><a href="https://link.segmentfault.com/?enc=5jpEhSODJ8zw0vz29ATmrA%3D%3D.UqvsNJPQ3R1iBFpFWllQSsib19p8o7B0rVd7e7STpgeedf1sSjc3g8zQZUiMz2kjR8QmeknAY%2Fi7IweKmiShJQ%3D%3D" rel="nofollow">https://github.com/jkchao/typ...</a></blockquote><h2>5. clean-code-typescript</h2><p><img src="/img/remote/1460000038959324" alt="" title=""></p><p>将 Clean Code 的概念适用到 TypeScript,灵感来自 <a href="https://link.segmentfault.com/?enc=9rOapaGhdI3f7zSrG%2FdLTA%3D%3D.4rb7XW8RR%2F6TnfPp7WgbSQ4DMA4RM7nfwqbgDwBq3qqsVv3QGLc%2FAMPcuYMn%2B4BZ1rSql%2FmitIQGjZUwtBFgtw%3D%3D" rel="nofollow">clean-code-javascript</a>。</p><p>将源自 Robert C. Martin 的 <a href="https://link.segmentfault.com/?enc=ZSqh4YVodo8kuRaNqMoAfA%3D%3D.dyeO3k5%2FxQ8YHwVcEZkhLRCth78VuLXwc9NeQLaGa2LT1dZXhW2%2FK7m9EveRqG05z1HhOpRl2PRbO6%2B2MFPX%2Fup5m99x7MC%2BPPS3Re5E08g%3D" rel="nofollow"><em>Clean Code</em></a> 的软件工程原则适配到 TypeScript 。 这不是一个代码风格指南, 它是一个使用 TypeScript 来生产 可读的, 可重用的, 以及可重构的软件的指南。</p><p>这里的每一项原则都不是必须遵守的, 甚至只有更少的能够被广泛认可。 这些仅仅是指南而已, 但是却是 <em>Clean Code</em> 作者多年经验的结晶。</p><p>我们的软件工程行业只有短短的 50 年, 依然有很多要我们去学习。 当软件架构与建筑架构一样古老时, 也许我们将会有硬性的规则去遵守。 而现在, 让这些指南做为你和你的团队生产的 TypeScript 代码的 质量的标准。</p><p>比如:使用有意义的变量名</p><p>做有意义的区分,让读者更容易理解变量的含义。</p><p>👎 反例:</p><pre><code class="js">function between<T>(a1: T, a2: T, a3: T) {
return a2 <= a1 && a1 <= a3;
}</code></pre><p>👍 正例:</p><pre><code class="js">function between<T>(value: T, left: T, right: T) {
return left <= value && value <= right;
}</code></pre><p>提醒一下,该仓库末尾有中文翻译版。</p><blockquote><a href="https://link.segmentfault.com/?enc=6M1eblJcCJwLnmRmItT3DQ%3D%3D.tnFWhdbNmTU3EXp7mYEWI0RVgzj8iVaY%2BIRY4qf5vrtc91h2jh3qN7eQ3MAQlDR0NitFvPewaO%2Bkq6OhQIDNiw%3D%3D" rel="nofollow">https://github.com/labs42io/c...</a></blockquote><h2>6. TypeScript入门</h2><p><img src="/img/remote/1460000038959323" alt="" title=""></p><p>这个是个视频课程,介绍了 TypeScript 的基本概念、常用语法和高级特性。</p><blockquote><a href="https://link.segmentfault.com/?enc=D38FjR4S%2FU7jjgJEyQiO3Q%3D%3D.%2BKBcjN%2Fzgo1VplToi18KunRj74dRkke5beAmzP1qzTY%3D" rel="nofollow">http://www.imooc.com/learn/763</a></blockquote><h2>7. typescript-tutorial</h2><p>这个仓库的教程以快速工程实践为目标,旨在让读者速成,能够迅速的 GET 到语言的核心知识点,并付诸实践!</p><p>语言始终是一种改进生产力的工具,陌生使用者最迫切的需求应该是快速掌握工具的使用,而不是在连工具都没学会使用的时候,就先沉迷于细枝末叶,奇技淫巧。</p><p>真正的熟练:应该是在实践中大量使用、在实践中踩坑、以及在实践中理解的过程中自然形成的。</p><p>这个教程真的非常简结,只讲经常使用的知识点,可以说是 2 小时速成 😂。</p><blockquote><a href="https://link.segmentfault.com/?enc=g6QvYT8ocPy8sEGe6BrPeg%3D%3D.dMHDwhrYeT4LxMOsGFOvNpErA8bePVjKCSOOrOIvc9xfXTg0JuAXqjKDpq1MC%2FLr" rel="nofollow">https://github.com/joye61/typ...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000038959327" alt="" title=""></p><p>关于猫哥,大家可以看看 <a href="https://link.segmentfault.com/?enc=QFeqoZvzmF3sp2zn98xWDA%3D%3D.h6d7M8XBvgRLWwzD6B8HXXiVV0%2B1KJUQgyapGmhoObrvEG51hKjxDTioaCnDg2zb4I5psDDa2HTm931F7Tvbpg%3D%3D" rel="nofollow">我的 2020 年终总结</a>,看看猫哥的脸都被打歪的 😂。</p><p>不知不觉,已经写到第 <strong>15</strong> 期了呢,已经分享超过 <strong>100</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote><a href="https://link.segmentfault.com/?enc=FWByebtFq7G7No4%2Fwi0v6Q%3D%3D.OxFOg5HRGBMA6qLJEEp%2BoWD8rdNOR3MJ7H%2FcjOKtr%2B%2B5JkN8ABm0oo%2B7QDRr5YC3ZE86ygkyAC3mTAhG56PNYg%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=wew7EaKv88FncOnk1er7Ew%3D%3D.sG4lT0FOi%2FzlUi6mKjymZFxShXVnG%2FvD8Z3l7yQn52GOmtQDCEd9vF9fZAbKorDfJ68YYv2SzKOE1gmms7LjNQ%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=5CEg5vzqQNMn5WuZk%2Bs6Tw%3D%3D.p8K0Pycq4HcfRJbkF6pYR%2FtClw6Hh02kaS4Nkp7EUcq7XsBWZZ7EOnMBL8hIfREoHc%2Fi9EW2LhaHXlv5M69IQA%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!</p><p>可以加超级猫的 WX:<strong>CB834301747</strong> ,一起闲聊前端。</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=%2FfY7f0D2zNf1FNqFenoLHA%3D%3D.zBiuRxoVJxKY1GkMEU4nAacJKH48idUiZPn8tQSscJ2VWvTXzQLsYbQGyeLjs63vsunewJpG9ZVyfielu%2FFAAQ%3D%3D" rel="nofollow">推荐 12 个学习前端必备的神仙级工具类项目与网站</a></li><li><a href="https://link.segmentfault.com/?enc=1LE4Q76QeybACbXfrg8M1g%3D%3D.9vgFHV8dnujw4dna3gMcNNFjiKuQc86Bd8%2B8du5nFrLWMK%2FKK5VejKsCYSx69wYht4e2vq694q3C%2B3Id4g346w%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=M9I5VYJ5l0n%2BVIogagIKtA%3D%3D.jKyRAya9kggs5fO7Nyg%2B9rqN9GVxVG85sK2%2B9fBBoEsqYVhchp2j6shtM6WZUzuG7t5OrOVmuEHIFPHtnaBV6A%3D%3D" rel="nofollow">12 个 GitHub 上超火的 JavaScript 奇技淫巧项目</a></li><li><a href="https://link.segmentfault.com/?enc=gNV43TN0reDfgnGwRX4GXw%3D%3D.1mth4FhIsGyEXIbAXGVFKgGs5SF2VyeEys3tGiDSJQk%2FwOdC3wtPGNOkwvVOsqRK2XxKWMjgHHWiqiphqIpscA%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=Wxh5h5%2BbkG1mB%2B5qQuGo8A%3D%3D.s6WTrVxmRD8HVjk8vOukoQEgxZFt6ZwVgAfi7BOboqQjNquQI4QXMm4lrDATAd49%2FfjpQu2mr8qvgYp8DsR1FA%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li></ul><p><img src="/img/remote/1460000038959329" alt="" title=""></p>
前端工程师的 2020 年终总结 - 成长不及预期的 3 年之痒
https://segmentfault.com/a/1190000038859115
2021-01-06T22:50:00+08:00
2021-01-06T22:50:00+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
21
<p><img src="/img/remote/1460000038859119" alt="" title=""></p><p>Hello,小伙伴们好呀!</p><p>又一年过去了,新年快乐呀!</p><p>极其魔幻 2020 终于都过去了,庆幸的是我们还活着,感谢那些逆行者们,感谢!</p><p>又到总结一年成长的时刻,我 2020 的关键词是:<strong>成长不及预期的 3 年之痒</strong></p><p>阅读本文之前,最好先阅读我的:<a href="https://link.segmentfault.com/?enc=6OLSAd%2B170NrbZ%2ByXKKV%2Fg%3D%3D.mPdHLNP%2Fp7r2P02tApqaj64CfBUpSMipF7z4TGob29xdljXezyAitOmVetPJ%2FSVdd4QAh%2BNCB0UtnT979urc6Q%3D%3D" rel="nofollow">我的 2019 年 - 当勤精进,但念无常</a>,坐看我被打脸 😅。</p><p>和 <a href="https://link.segmentfault.com/?enc=kE%2B%2Fl%2Bw4YVIzUqol1koq8A%3D%3D.qyGalvxCwVDpi2EluiwgUE5j172fmuuU60EWCsk40aADJldL1D%2FnfAuSsPeOr0t8Rs3w0YoJH0r8Oz6PLGtyLA%3D%3D" rel="nofollow">我的 2019 年年终总结 - 真香篇</a> ,感受一下,今年的自己是不是也一样呢。</p><p><img src="/img/remote/1460000038859125" alt="" title=""></p><h2>回顾 2020 的目标</h2><ul><li><strong>深入 Vue 技术栈的原理与内在实现</strong> - 没完成<p>这个没完成,一是因为要出 Vue3.0 了,所以没有继续学习,二是因为没时间。</p></li><li><strong>学习 Vue3、 TypeScript、Node 技术栈</strong> - 完成<p>这 3 个都有学习,Vue3 是 2021 年前端必备的技术了,并写下了这篇文章 <a href="https://link.segmentfault.com/?enc=skSdtAbGrCH7bsiI%2FpAJ2A%3D%3D.1jMknQZWCYP6xNMWrleOXyGVTd%2FAIxQOhItbPyFa9qEK6%2FLAYjptbZseyyzPL%2BC2u7BAm7%2BIp5IeQtQbv1GiSg%3D%3D" rel="nofollow">快速入门熟练 Vue3 核心新特性,这10个实例练习就够了</a>,还学习了 TypeScript 和 Node ,因为工作中要用到,不过没有输出文章。</p></li><li><strong>英语词汇量达到 7000+</strong> - 完成 30%<p>这个就惭愧了,年初报的一期英文阅读里有《寻梦环游记》和《冰雪奇缘》两部经典,《寻梦环游记》阅读了 60% 左右而已,另外一部都没开始,一部都没有完成 😢,强行推锅给工作加班 😬</p></li><li><strong>保持运动,常锻炼</strong> - 完成<p>这应该是一直在践行并快乐着的事项了,一直有跑步和健身,今年还多了一项游泳,哈哈。</p></li><li><strong>坚持写作、运营好公众号</strong> - 完成 50%<p>今年只写了 12 篇原创技术文章,惭愧。还写了 14 篇前端优质项目推荐的文章。写作与运营比较佛系,读者没有大幅度增长,唉。</p></li><li><strong>多阅读</strong> - 完成 50%<p>今年读完了几本书,在读的书有十几本,读过的书不及往年。</p></li><li><strong>掌握摄影技术</strong> - 完成 20%<p>这个没排上日程,只看了些抖音的摄影博主发的拍摄技巧。</p></li><li><strong>多做持续、延迟满足和有复利效应的事情</strong> - 完成 60%<p>学习、读书、写作、开源、做有影响力的事情,算是一直在践行吧。</p></li><li><strong>做一个有作品的人!</strong> - 完成 60%<p>同上,只是开源的作品还不算特别优质。</p></li><li><strong>暴富!暴富!暴富!</strong> - 完成 0%</li></ul><p><img src="/img/remote/1460000038859120" alt="" title=""></p><ul><li><strong>等国家给我发一个女朋友!</strong> - 完成 0%</li></ul><p><img src="/img/remote/1460000038859118" alt="难受想哭" title="难受想哭"></p><p>所以,总的来说,去年的目标几乎都被打脸了啊 😥,还被打的好痛那种 😰。</p><p><img src="/img/remote/1460000038859130" alt="" title=""></p><p>魔幻的 2020 ,去你的,哼。</p><p><img src="/img/remote/1460000038859123" alt="" title=""></p><h2>工作与技术</h2><p>今年的工作真的好忙、好忙、好忙!!!</p><p>今年,我做的项目是创新项目,也就是刚起步不久的项目。</p><p>本来人手还勉强能达到平衡,我是做前端项目的,就是 Vue + TypeScript 的项目的。</p><p>但是在年初的时候,一个后端大佬和一个做自动化的大佬调回原来的部门去了,所以我要接手自动化的工作,工作交接时,因为疫情的关系,还是线上远程交接的,非常被动。</p><p>自动化的项目就是用了 Puppeteer + Node 的技术栈的,所以又临时临急去学了 Puppeteer,Node 是很久之前有学过的,加上是 js ,不用花太多时间去学习。</p><p>因为自动化项目都是根据页面元素去捉取数据的,所有只要网站的元素变化了,就会出现异常,所经常周末要处理异常,也总遇到一些奇奇怪怪的问题,周末还时不时要做技术调研,研究某个方面的技术能否实现某个需求,从而减轻工作量或者实现某个业务需求。</p><p>熟悉了自动化项目后,平时除了做前端项目,还要做自动化项目,这个状态一直持续到了 12 月下询,经常都是 21 点 或者 22 点左右才下班。</p><p>今年带过 2 个前端实习生,一个正职前端,在带人上也积累了一些经验吧。</p><p>4 - 9 月的这段时间里,还没有客服团队的时候,都是所有正职的技术、产品、市场轮流做客服的,周一到周五的晚上要值班到 22:00,周六和周日是值班到 19:00,一是熟悉自己做的产品,二是人手真的不够。</p><p>所以直到 10 月份招了客服团队了,周末才有空写下文章。</p><p>比较幸运的是:做的项目起来了,3 月份从原来部门里面独立出来,成立了一个新的部门;9 月,部门独立出来成了一家公司,自负盈亏,几乎完全脱离了原来的公司。</p><p>也算做过一个成功的项目了,这个过程还是学到了很多技术之外的东西吧,如何把敏捷开发思想与目前的团队结合起来,leader 是如何做的项目管理,怎样的团队成员才有战斗力,项目做到哪个阶段可以大力推广,种子用户是如何培养起来了,项目需求的优先级是如何安排的。</p><hr><p>技术方面,今年最大的收获就是增加了技术的广度,而深度方面并没有太大收获。</p><p>今年重温了一下 TypeScript,还学了 Puppeteer 的自动化或者叫爬虫技术,还有 Node.js 的熟练使用,还试了一下新出的 Vue3。</p><p>最不幸的是又多了一根白头发 😲,除了那两根白头发,剩余的三千青丝秀发如初,乌黑发亮浓密。</p><p><img src="/img/remote/1460000038859128" alt="" title=""></p><h2>GitHub</h2><p>最近几年一直有在 GitHub 上为开源做贡献,今年的代码贡献相对少了好多,但是也还是取得了一点点成果。</p><p>一直有更新的 <a href="https://link.segmentfault.com/?enc=kyDAzJXkTbgRCqkMNlL7vQ%3D%3D.xTq1FJVaGiEAD8TXIUTC8uVwiJxZIgmecAdaAkSLvi01UJbGlXpy9e7XJRAxfGzR" rel="nofollow">blog</a> 项目达到了 2K Stars,11 月份还开源了一个 <a href="https://link.segmentfault.com/?enc=YNucblcgQJIjNyF1Ke%2FdFQ%3D%3D.zTjDrUTt5cRgPDjtiuM9K9XqkyGYDDPcheQ7kM8c4zKDPLVTimeYNp8Kj3jpEpB6H4iLVVZohC84Dki%2BzK5IIw%3D%3D" rel="nofollow">FrontEndGitHub</a> 前端宝藏项目,达到了 575 Stars,这应该是 GitHub 最全、最新的前端资源汇总仓库,包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等 200 个优质项目推荐。</p><p><img src="/img/remote/1460000038859124" alt="" title=""></p><p>2020 年,在 GitHub 上总共达到了 2.1K followers,5.4K Stars,GitHub 中国区排名也到了 195 名。</p><p><img src="/img/remote/1460000038859122" alt="" title=""></p><p>如果大家想看自己的中国区排名,可以看这个仓库,在页面或者控制台能看到结果哦:</p><blockquote><a href="https://link.segmentfault.com/?enc=AovcjoEeULTizTQ%2BGfkoeQ%3D%3D.a%2Fy1szAhwK6r3qvMBY5noJGflWQgzf927FCB%2Bn3dxaHTwivti9iV%2FWH%2BNAq75fjv" rel="nofollow">https://github.com/xibang/git...</a></blockquote><p>GitHub 全球排名为 1065 名。</p><p><img src="/img/remote/1460000038859121" alt="" title=""></p><p>全球排名可以看这个网站:</p><blockquote><a href="https://link.segmentfault.com/?enc=VvBLiXBG%2FCiUqq%2FsHZ8HKQ%3D%3D.TALESsESUQei0aS94FQ521706rdBF8LwHeBg1JuPeTvBaw8uJta77rdtgwkSDT9j" rel="nofollow">https://gitstar-ranking.com/b...</a></blockquote><p>当然,这个排名不代表技术的深浅,只能表示一点点的影响力吧。</p><p>时间可以让平凡的事情,变得不平凡。</p><p>3 年了,越来越感觉自己的技术还很弱,还有很长很长的路要走。</p><h2>关于学习</h2><p>今年最大的感触就是 <strong>过度忙碌使你落后</strong>。</p><p>一个人的学习热情总是有时限的,总会在一段时间过后消耗殆尽,如何平时工作过度忙碌,那么学习热情也会下降,这个时限也会缩短,太过忙碌,有空时就想娱乐一下,最终导致本来有空学习的时候不会学习了。</p><p>最可怕的是:在一个公司没日没夜的干了几年,没有留一点学习时间给自己。几年之后倒是对公司越来越 “忠诚” 了,但忙碌的工作同时也导致了没有时间更新知识,使得自己已经落后了,连跳槽的能力和勇气都失去了。</p><p>过度忙碌会导致没有时间学习和更新自己的知识,尤其在这个高速发展的时代。</p><p>很容易带来如下问题:</p><ul><li>缺乏学习导致工作能力没有提升,而面对的问题却变得日益复杂。</li><li>技术和业务上没有更大的领先优势,只能被动紧紧追赶。</li></ul><p>反过来上面这些问题会导致你更加繁忙,进而更没有时间提高自己的技术技能,很快就形成了一个恶性循环,并最终成为井底之蛙。</p><p>今年差点就进入了那个状态了,再忙也要留一点时间给自己,充实一下自己,更新一下自己的知识库。</p><h2>阅读</h2><p>今年读过的书比上一年少了好多啊,唉 😲</p><p><img src="/img/remote/1460000038859129" alt="" title=""></p><p>最惭愧的是英文阅读了,年初报的一期英文阅读里有《寻梦环游记》和《冰雪奇缘》两部经典,一部都没有完成 😢,强行推锅给工作加班 😰</p><p><img src="/img/remote/1460000038859126" alt="" title=""></p><blockquote>昨日种种,皆成今我,切莫思量,更莫哀,从今往后,怎么收获,怎么栽。</blockquote><p>这个世界发展的真相就是马太效应,强者越强,弱者越弱。</p><h2>公众号</h2><p>今年的绝大数时间都给了公司的项目,有得就必有失,失就是自己的自由时间少了很多,所以影响力没增加多少和公众号读者也没怎么涨。</p><p>加班忙成狗,所以公众号的原创写作与运营都只能比较佛系了,有时候周更,有时候月更,没有原创时就转载一些好文章。</p><p>如果平时上班像 2018 年那样,几乎天天 18:30 分准时下班,就会有非常多的自由时间可以用来写文章、搞自己的开源项目,非常怀念啊。</p><p>2021 年争取至少写 24 篇原创技术文章,和至少 24 篇前端优质项目推荐的文章。</p><p>因为这两年不断的写技术文章,思否声望终于达到了 11K,感谢思否社区,今年会继续分享些有价值的内容。</p><p><img src="/img/bVcNda9" alt="image" title="image"></p><h2>理财</h2><p>投资是认知的变现。</p><p>我的理财类型应该是属于平衡型理财,我的一部分资金用来定期理财,一部分用来购买货币类产品、基金等中下风险的产品,还没有买股票,只是观望,也还没购买过高风险高收益的产品。</p><p>今年理财的收益还行吧,用手中的闲钱买了几万的基金,挣到了 1 万多。</p><p>用于理财部分,总体收益达到了 25% 左右,还算一般般吧,收益基本都是今年基金卖出带来的收益。</p><p><img src="/img/remote/1460000038859134" alt="" title=""></p><p>我的基金基本都是以定投的形式买入的,定投了十几个基金,每个基金每周定投 2 百块左右,并设置了智能定投。</p><p>今年 2 月中旬的时候,疫情来临,我看到股市与基金都跌的那么多,我赶紧加仓了大概 1 万块,其实那时还想继续加仓的,但是毕竟是疫情,不知道影响面会有多大,所以还是要留点闲钱来应对未来更糟糕的疫情与经济危机。</p><p>今年 8 月的时候,股市和基金涨的比较凶,有的基金收益达到了 70% - 80%,所以我分批卖出了,选择了落袋为安,因为只要还没落袋,就不是你的收益。</p><p>基金的策略就是:低位时买入,攒便宜份额,定投能平摊成本,等到高位时卖出,赚取中间的收益。</p><p>买基金与股票切忌 <strong>追涨杀跌</strong>,而是应该 <strong>别人恐惧时我贪婪,别人贪婪时我恐惧</strong>。</p><p>提醒一下:<strong>不懂的东西最好不要碰,特别是关乎钱方面,要不然很可能会成为韭菜,要碰也是学习了相关知识再去碰</strong>。</p><hr><p><strong>该如何确定自己的财务自由目标?</strong></p><p>如果大家给自己定财务目标的话,我建议可以分级制定目标(这里参考也大的建议)。</p><ul><li>先根据自己的当前年度日常开支,乘以 10(以 10% 收益率为参考)作为第一个目标。<br>达到这个目标后,被动收入基本可以超过日常开支。虽然还没有自由,但是你的心态已经非常不一样了。</li><li>再根据自己的当前年度工作收入,乘以 10(以 10% 收益率为参考) 作为第二个目标。<br> 达到这个目标后,被动收入可以超过工资收入,你就有了充足的炒老板的底气。</li><li>然后再往上就是逐层增加安全边际了。</li></ul><p>德国有个统计,当人的年收入超过 50 万以后,收入再增加对生活幸福感的贡献就趋近于 0 了,可以作为大家的最终目标来参考。</p><p>我觉得,对于普通人来说,在没有资源,没有背景的情况下,第一桶金就显得尤为重要了,特别是第一个 100 万,因为它反映了你当前的认知与挣钱能力,还有这过程中得到的各方面的锻炼和所提升的能力。</p><p>今年看到的一句话让我感触颇深:<strong>任何一个男孩子小时候的梦想绝对不是买套房!</strong></p><blockquote>普通人,在没有资源,没有背景,靠知识、经验、技能的积累,再有一些耐心,才是唯一的出路。</blockquote><h2>健身</h2><p>这一年来,还是和往年一样,时不时会进行各种运动。</p><ul><li>跑步平均 3 次 / 每月,5 公里左右 / 每次</li><li>健身平均 1次 / 每周</li><li>游泳(7 - 9 月的每周四有进行)</li><li>骑行平均 1 次 / 每周</li></ul><p>还有羽毛球的,因为搬办公地点时,弄丢了,就没有再玩了 😭</p><p>健身次数比之前少了啊,还好好身材还在。</p><p><img src="/img/remote/1460000038859127" alt="" title=""></p><p>我对健康的理解,可以看下我写的那篇:<a href="https://link.segmentfault.com/?enc=KUJQEny8Qn6qS5eyz%2Fvn2Q%3D%3D.H99Sj%2B%2FP4D5LIGUAULNxYqKmKnXvQnza1V3lTrzEmFe4gqL3sIzNFqZQ83L1pE2Xdp56hAnDdiJV1zEcYWMyWw%3D%3D" rel="nofollow">程序员不止眼前的逻辑和代码,还应有健康的体魄和精气神</a>。</p><p>不间断的运动已经成为了一种习惯,或者可以说是一项兴趣了,非常棒。</p><p>还保持着一个健康的身形,腹肌,胸肌都还在,只是这一年感觉肚皮比之前厚了一丢丢了 😂。</p><p>今年跑步最远的一次:</p><p><img src="/img/remote/1460000038859132" alt="" title=""></p><p>还有当时的朋友圈:</p><p><img src="/img/remote/1460000038859133" alt="" title=""></p><p>今年跑步应该有一百多公里吧。</p><p>今年进行了一项新运动项目:游泳。</p><p>从蛙泳到自游泳,虽然还没学会自游泳,但是这个夏天值得。</p><p><img src="/img/remote/1460000038859135" alt="" title=""></p><p>今年的小米运动的年度报告没有出来,不然可以晒一下年度运动报告的。</p><p>今年搬到江边了,不在原来的地方了,所以运动场所也发生了改变,我平时都在江边跑步了,风景也换了。</p><p><img src="/img/remote/1460000038859136" alt="" title=""></p><p><img src="/img/remote/1460000038859131" alt="" title=""></p><p><img src="/img/remote/1460000038859137" alt="" title=""></p><p>还偶遇了一次小灰兔</p><p><img src="/img/remote/1460000038859139" alt="" title=""></p><h2>斯人若彩虹,遇上方知有</h2><p><img src="/img/remote/1460000038859138" alt="" title=""></p><p>今年又拒绝了三个女生,我真是一个优秀的男孩,看着她们落寞的背影,我只能默默的说声抱歉,你们的这个楼盘、保险、理财产品我是真的买不起呀,拜托,别找我了。</p><p>这么好的女生,就这样被我拒绝了,渣男!</p><p>所以,2020 年过去了,我依然散发着单身狗的清香。</p><p><img src="/img/remote/1460000038859140" alt="" title=""></p><p>今年请了一天假参加了一个同学的婚礼,毕业至今,已经参加了两个同学的婚礼了。</p><p>如果今年不是请了那一天假,我都成为公司全年都全勤的人了 😂。</p><p>前端老大说的对,去年我唯一一次请假是参加别人的婚礼,今年的唯一一次请假还是参加别人的婚礼,什么时候请假是为了自己的呢 😂 </p><p>我 。。。我是一个没有感情的工具人 😭</p><p><img src="/img/remote/1460000038859143" alt="" title=""></p><p>未来要和你共度一生的那个人,其实在与你相同的时间里,也忍受着同样的孤独,那个人一定也怀着满心的期待,拥着一腔孤勇,穿过茫茫人海,也要来与你相见,愿世间美好与你环环相扣...</p><p>好吧,这鸡汤我干了。</p><hr><p><strong>女朋友的科斯定律</strong></p><p>这个故事是这样的:</p><p>有天有个人 A 和一个经济学家叫 Ronald 的吃饭。</p><p>A 很苦恼,饭桌上 A 跟 Ronald 说:我喜欢上一个妹子,她非常优秀,琴棋书画样样精通,还特别好看,可是她已经有男朋友了咋办?</p><p>Ronald 说,你还是没那么懂科斯定律啊。</p><p>A 说:???</p><p>Ronald 说,如果你知道科斯定律,那么就知道,不管这个女孩现在跟谁谈对象,她最后都会跟最匹配她的人在一起的。</p><p>A 说:!!!</p><p>Ronald 说,“你激动什么,你不是知道科斯定律吗?<strong>科斯定律就是谁最匹配这个资源的,最终总会归谁所有</strong>。”</p><p>经济上,可以简单粗暴总结为:<strong>谁用得最好就归谁,给用得最好的人,有些资源在过程中会贬值,有些则会升值</strong>。</p><p>对啊,是你的就是你的,不是你的也强求不来。</p><blockquote>爱情这个东西,始于颜值,陷于才华,忠于人品,痴于肉体,迷于声音,最后折扣于物质,败于现实,最后归于尘土。</blockquote><p><img src="/img/remote/1460000038859142" alt="" title=""></p><h2>旅游</h2><p>今年去了广州极地海洋世界逛了一下</p><p><img src="/img/remote/1460000038859141" alt="" title=""></p><p><img src="/img/remote/1460000038859144" alt="" title=""></p><p><img src="/img/remote/1460000038859147" alt="" title=""></p><p>团建去了清远漂流与轰趴、玩了卡丁车、嗨马乐动</p><p><img src="/img/remote/1460000038859145" alt="" title=""></p><p><img src="/img/remote/1460000038859146" alt="" title=""></p><p>还是太宅了啊,2021 年,多出去走、多出去走、多出去走。</p><h2>3 年之痒</h2><p>今年已经是工作的第三年了啊,7 月份的时候,3 年之期到来的时候,真的是非常彷徨,非常迷茫,心态有点不适应。</p><p>之所以心态有点不适应,可能就是因为这 3 年的成长不及预期吧,和工作了一两年的时候的感觉完全不同,真的是非常焦虑,非常感慨,原来自己已经毕业 3 年了啊,都成了混社会的老油条了啊。</p><p>是啊,谁的青春不迷茫呢,既然迷茫没有方向就专注于做好当下的事情。</p><p>可能要渡过迷茫这场大劫,要做些跳出当前舒适圈的事情,和更困难的事情。</p><p><img src="/img/remote/1460000038859148" alt="" title=""></p><p>今后的经历下来,有个很强烈的想法是做个自由职业者,不过是程序员的自由职业者,发现自己目前的技术栈,可以做很多东西了,比如 网站、管理后台、自动化或者叫爬虫、后端与数据库、浏览器插件,还会写作与运营公众号。</p><p>今年一直有两个开源项目想实现的,一个是关于 GitHub 的,一个是关于 B 站的,就是没有时间,忙成狗。</p><p>今年年末最多的想法就是想成为自由职业者,想开源些有意思又能挣钱的项目,有空多读书,然后写写文章、分享些感悟,记录自己的收获与成长。</p><p>等哪一天如果副业收入能超过主业了,我应该真的就做自由职业者了。</p><h2>总结</h2><p>总的来说,2020 成长不及预期,收获也不及预期,不由得一声叹息:生活艰难!</p><hr><p>像我这样迷茫的人</p><p>像我这样寻找的人</p><p>像我这样碌碌无为的人</p><p>你还见过多少人</p><p>像我这样不甘平凡的人</p><p>世界上有多少人</p><p>一首毛不易的《像我这样的人》就是我 2020 年的最真实写照了。</p><p><img src="/img/remote/1460000038859149" alt="" title=""></p><h2>进阶 2021</h2><p><img src="/img/remote/1460000038859152" alt="" title=""></p><p>2021 目标</p><ul><li>用 Vue3.0 重构我的开源博客项目</li><li>继续深入学习 Vue3.0、 TypeScript、Node 技术栈</li><li>保持运动与健身</li><li>继续学习理财,入手新股新债</li><li>坚持写作、开源、24 篇原创技术文章和 24 篇前端优质项目推荐</li><li>运营好公众号</li><li>多阅读</li><li>掌握摄影技术</li><li>脱单</li></ul><p><img src="/img/remote/1460000038859150" alt="" title=""></p><p>乾坤未定,你我皆黑马。</p><p>黑不黑不重要,要得是这么个态度,哼~</p><h2>最后</h2><p>祝大家新年快乐。</p><p>最后,一首林俊杰的《进阶》送给你。</p><p>前方被乌云笼罩了</p><p>重生的力量来自真我</p><p>战胜可敬的对手</p><p>坚持信念是我的所有</p><p>抵达心中的辽阔</p><p>希望听过这首歌的人以及看到这篇文章的人都能 <strong>进阶</strong>,不再迷惘,心灵在进阶之后找到方向。</p><p><strong>愿你尝遍烟火,依然相信,人间值得。</strong></p><p><strong>乾坤未定,你我皆黑马!</strong></p><p><strong>对未来还很有信心,我相信我可以。</strong></p><p><strong>时光正好,未来还有无限可能!</strong></p><p><strong>2021 我们一起进阶!!!</strong></p><p><img src="/img/remote/1460000038859151" alt="" title=""></p><p>推荐阅读</p><ul><li><a href="https://link.segmentfault.com/?enc=e2gk5v98pPlTRz1DblGIAg%3D%3D.S5eYgRDxlzG6Db1tsEZrGOe0uAKuWi0bTY53%2F%2FhWIn%2Bipe5yvKIa1MDBso2xIe286EP5x6YvPU193oZF%2FzInEg%3D%3D" rel="nofollow">我的 2019 年 - 当勤精进,但念无常,何以解忧,唯有暴富</a></li><li><a href="https://link.segmentfault.com/?enc=mTjB4mghNuJnKPop39Vahg%3D%3D.qdTKejo5iqcbLpq7lRyx8yaMJKV6Dm73MzWiYXET3O7awNWYtslDsVnn31oicqRSppXFrh70e7zvff6gH0FIig%3D%3D" rel="nofollow">2018 年,我的本命年</a></li></ul><hr><p><a href="https://link.segmentfault.com/?enc=Lp9F%2F%2BjInlMcWXt3I9UGwg%3D%3D.N2xlFyZBtBHnP8fQFk%2F4ov0zH7gxbrsslTqvuVNgk6PAoDRSy%2BWb94VIAdCo13tJoyEaO122gSUpF6WDGhBxjg%3D%3D" rel="nofollow">本文参与了 SegmentFault 思否征文「2020 总结」,欢迎正在阅读的你也加入。</a></p>
推荐 12 个学习前端必备的神仙级工具类项目与网站
https://segmentfault.com/a/1190000038730850
2020-12-30T00:12:02+08:00
2020-12-30T00:12:02+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
46
<p><img src="/img/remote/1460000038730858" alt="" title=""></p><p>今天给大家推荐的是平时学习前端时,经常用到的一些辅助工具类网站。</p><h2>前言</h2><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=%2FjT3JX31e1e1obwHqShtmw%3D%3D.44622hzoqGdUwCKG%2B6xFMEz%2BlwuuP52CikSinvyF5QBiqCjce2KwpCJN9Bztn%2BNiauLHD%2BTccJnrgLXlG96hBg%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送,与时俱进版前端资源教程。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>css 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 100 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=AQZ0s9XG93ILVCklrDK8Rw%3D%3D.T5dYOrv72WKPZdS8omZlcJ0qalZqEXPw3NyLD8kz6QzzrKzkBGuglJu9QNtI0KecfB0BcWl63A4oa7XhyxdAmg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为【前端GitHub】的第 14 期精华内容。</p><p><img src="/img/remote/1460000038730857" alt="" title=""></p><hr><p>今天给大家推荐的是平时学习前端时,经常用到的一些辅助工具类网站。</p><table><thead><tr><th>网址</th><th>描述</th></tr></thead><tbody><tr><td><a href="https://link.segmentfault.com/?enc=a59bYqId058sLW%2F3wR7oGA%3D%3D.eWr0XOtSOhjGZkBV5uTcxQwv3KoEvQKjocegBuqy0LU%3D" rel="nofollow">unbug.github.io/codelf</a></td><td>变量命名智能推荐(支持中文)</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=4VMxFkmi87d93xaRf%2F5fFA%3D%3D.%2BtTkdM93HjOnZCAzmhu7QwwnxQzi11pFYUmnsBFwRNA%3D" rel="nofollow">www.docschina.org</a></td><td>Web 前端开发人员提供优质中文文档</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=fWMoRaYa3CNGXiGkQwXkYw%3D%3D.gohYJzERo2dcWUluMJUqb8DY0DxE72oGPXr0%2FEUGYSI%3D" rel="nofollow">regexr.com</a></td><td>正则表达式验证匹配</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=N3w4nqlcBfB%2BDdbKsF7p5Q%3D%3D.dbdX94gMat%2F5aYS0WYJqr9b%2Bp%2BGCRcVd3dzwO%2FusHJTBKKCj4YPzhcoFtM9n6Bue" rel="nofollow">any-rule</a></td><td>正则表达式库,非常全,使用起来很方便</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=8uyk7t9z8ShIRdmsNOqx0w%3D%3D.IEDQgxg9y4ctkDVI663L5fDosM3C980KNxAs0X8i17rWNZgnhXj4IgRuTPpsjLy%2F87ot5q1wlPCTZOSJd1WIGA%3D%3D" rel="nofollow">www.toptal.com/developers</a></td><td>多张图片合成雪碧图,并生成对应 css</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=LRkt3jlC1NspX%2BiYzOBBXQ%3D%3D.hE4Um697ZWSV6LgV9Kvj6EKO1eKLIpSaVyWm0MXnDA8%3D" rel="nofollow">tool.lu</a></td><td>众多工具集合,包括时间戳转换,进制转换等</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=OP6AWE5U0gskiu6EKE8h2Q%3D%3D.XUSnkVjFnv62aeJCOGkXanqedgl3YLbd1DkoRoVQOMc%3D" rel="nofollow">www.bootcdn.cn</a> 或 <a href="https://link.segmentfault.com/?enc=yuknD4lAdG0EwXktMSIrjg%3D%3D.yEQ7ABJJQF36ffTIfwJypjiaRzGFf2oXIWZTbLvQVRM%3D" rel="nofollow">cdn.baomitu.com</a></td><td>国内的CDN库,速度快</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=FnGWty0iJjXIE%2BoM0YTUlg%3D%3D.mk451viop61yMhJb1ozmzGD14C7zblRqkHnv%2FpZHoZg%3D" rel="nofollow">www.jsdelivr.com</a></td><td>国外的 cdn 库,支持 github,npm,WordPress</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=MDmpDwTniHRC5C4WVtZJQA%3D%3D.r6fu3tUnVNHAhjKFwgCQZmedAGnlwuzmFttpnTL4tXw%3D" rel="nofollow">www.gitignore.io</a></td><td>根据选择会去生成 .gitignore 文件</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=7d7fJH41O%2F0NKGNjNiZCrQ%3D%3D.XZaRgzrZhjbC2HLokiHZpSwcAf6yLvPUvWvS4lni64w%3D" rel="nofollow">codesandbox.io</a></td><td>在线编辑代码</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=JVmTxQso66hAZn3wFE8%2Fjg%3D%3D.wIMKZxwjdIy08JilA8xLSHJ1TSOv12IKd488NrVaNWM%3D" rel="nofollow">www.typora.io</a></td><td>实用的 Markdown 写作工具,所见即所得</td></tr><tr><td><a href="https://link.segmentfault.com/?enc=biuXSpIUhF0aHf3H2BpAug%3D%3D.HNgsPghxUI90Gsi9k2w4gKqPcU51X84EkZ%2Bw913%2FlgM%3D" rel="nofollow">mdnice.com</a></td><td>使 markdown 语法更加美观,如果你有写博客,那这个非常合适你(强烈推荐)</td></tr></tbody></table><h2>1. codelf</h2><p>有一种痛,不是程序员可能不懂,但如果是程序员一定懂,那就是给变量或函数命名。</p><p>随着项目越来越复杂,变量和函数数量越来越多,英语水平貌似也 hold 不住了。</p><p>虽然每个编程语言都有各种命名规范,但是也不能解决所有的问题。</p><p>每个程序员或多或少都在写代码的时候为变量和函数命名苦恼过!</p><p><img src="/img/remote/1460000038730855" alt="" title=""></p><p>也可以在自己用的编辑器里安装插件,支持 VS Code、Atom、Sublime Text 和 Chrome。</p><p>超级猫就是用 VS Code,也有装这个插件呢。</p><p><img src="/img/remote/1460000038730853" alt="" title=""></p><p><img src="/img/remote/1460000038730861" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=X1QlGn6ExenweQRz2o2wHg%3D%3D.24iD333L%2Bb1gH0wjixmRBydMl13PMtTlmGlbT3UiAvg%3D" rel="nofollow">https://unbug.github.io/codelf/</a></blockquote><h2>2. docschina</h2><p>印象中文,为 Web 前端开发人员提供优质中文文档。</p><p><img src="/img/remote/1460000038730856" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=KvYSL1hiqmyz3DPvt7O5GA%3D%3D.H1uZ9i1JhnXufl02IbUlEePG8MENa0iYvufSlu%2F7VIw%3D" rel="nofollow">https://www.docschina.org</a></blockquote><h2>3. regexr</h2><p>RegExr 是一个基于 HTML/JS 开发的在线工具,用来创建、测试和学习正则表达式。</p><p><strong>特性</strong></p><ul><li>输入时,结果会实时更新</li><li>支持 JavaScript 和 PHP/PCRE RegEx</li><li>将匹配项或表达式移至详细信息</li><li>保存并与他人共享表达式</li><li>在编辑器中使用 cmd-Z/Y 撤消和重做</li></ul><p><img src="/img/remote/1460000038730860" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=fJdem5xnlzI%2BtjdaEvmI9g%3D%3D.YgnFTdr8O%2BKcfeDVpwbIncxlU3l%2F9g83dfkzxnuMvKY%3D" rel="nofollow">https://regexr.com/</a></blockquote><h2>4. any-rule</h2><p><img src="/img/remote/1460000038730863" alt="" title=""></p><p>any-rule 正则表达式</p><p>any-rule 维护了一个常用正则表达式合集,并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具。</p><p><img src="/img/remote/1460000038730867" alt="" title=""></p><p><img src="/img/remote/1460000038730859" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=SpZ1oZuIysW33gjuXcc7Zw%3D%3D.vMRYPGj5PnpgbrUKOPJE17ZyN9P8EWS%2Fsry4SWIirt2%2F%2BzEPnjnDpulooJNLrFOF" rel="nofollow">https://github.com/any86/any-rule</a></blockquote><h2>5. CSS Sprites Generato</h2><p>在很多前端展示页面需要用到将小图标拼合为一整个图片,然后在使用的时候,自动裁剪为单一图片展示。</p><p>这个时候就需要一个便捷的工具,CSS Sprites Generator 就是这样一个便捷的CSS图像拼合工具。</p><p>比如多张图片生成雪碧图,还有国内的 CDN 库,赶紧去试一试吧。</p><p><img src="/img/remote/1460000038730854" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=p6%2FxMoZnXj76CGuvaFVn4g%3D%3D.Zt%2BC1m43Ic9dkUstZSqX67rtsB%2BlW6jqmMrxTwodm3tl8UY8OLhWfi2s6jT56VnryuMX6rSef6KU%2FaiwX9H%2Bog%3D%3D" rel="nofollow">https://www.toptal.com/developers/css/sprite-generator</a></blockquote><h2>6. tool.lu</h2><p><img src="/img/remote/1460000038730862" alt="" title=""></p><p>众多工具集合,包括时间戳转换,进制转换等</p><blockquote><a href="https://link.segmentfault.com/?enc=dvCE0Gv6cd62wtpdUnM%2BVA%3D%3D.z4%2FRQzpmLIF4PYj%2BZK7r3nw%2F8AsAVnIrBFStzAnf%2F2o%3D" rel="nofollow">https://tool.lu/</a></blockquote><h2>7. bootcdn / baomitu</h2><p><img src="/img/remote/1460000038730864" alt="" title=""></p><p>国内的CDN库,速度快</p><p><img src="/img/remote/1460000038730865" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=vmZAfLT7coGypeCYn61L1w%3D%3D.YgPBZBIFdkHWsVvA4g6ZBDEWYZ6pkINlwWZbwqOdFpY%3D" rel="nofollow">https://www.bootcdn.cn/</a> 或 <a href="https://link.segmentfault.com/?enc=I42kZFKaOsn5jVdGRbKhKQ%3D%3D.PWWNS4GhxoUjwT6%2BGK%2FiVddCh12iIwcn4e2FGGQ3fDw%3D" rel="nofollow">https://cdn.baomitu.com/</a></blockquote><h2>8. jsdelivr</h2><p><img src="/img/remote/1460000038730870" alt="" title=""></p><p>国外的 cdn 库,支持 github,npm,WordPress。</p><blockquote><a href="https://link.segmentfault.com/?enc=d6o%2FHOWB1WNgwnvudvYB4Q%3D%3D.PGgXR3fKw%2FVkbM4F8gUAiEXPWVhJjyP46JhkIMNK95o%3D" rel="nofollow">https://www.jsdelivr.com</a></blockquote><h2>9. gitignore</h2><p><img src="/img/remote/1460000038730866" alt="" title=""></p><p>根据选择会去生成 .gitignore 文件。</p><p>根据用户输入的语言类型或者平台类型,自动生成对应的 gitignore 文件。 </p><p>例如,输入 Vue,React,点击 "Create" 即可。</p><blockquote><a href="https://link.segmentfault.com/?enc=JuooTdb4grZdiYb%2BpajEJg%3D%3D.DcTNGo92Y9XwFW79TzH70irlMnAfweXSm12L9Z6jkCo%3D" rel="nofollow">https://www.gitignore.io/</a></blockquote><h2>10. codesandbox</h2><p>CodeSandbox 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。</p><p>支持主流的前端相关文件的编辑:JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。</p><p>支持自动代码提示。</p><p>比如选择创建相关的项目</p><p><img src="/img/remote/1460000038730869" alt="" title=""></p><p>可以直接编辑代码运行</p><p><img src="/img/remote/1460000038730873" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=lnTRXMK3RDhMAYiUmqLV3g%3D%3D.u76pW9LVeb9%2BSINuPMaeMZ5Uhk1O%2BM51%2BQ6XYtjLVag%3D" rel="nofollow">https://codesandbox.io/</a></blockquote><h2>11. typora</h2><p><img src="/img/remote/1460000038730871" alt="" title=""></p><p>实用的 Markdown 写作工具,所见即所得。</p><blockquote><a href="https://link.segmentfault.com/?enc=Dlqw%2BeFNjnbuwYKVXfcyDw%3D%3D.Fs10ICDQUmyJ0%2Bjr4KrJE6dw2%2F6idWBODWyUPQNPEx8%3D" rel="nofollow">https://www.typora.io</a></blockquote><h2>12. mdnice</h2><p><img src="/img/remote/1460000038730868" alt="" title=""></p><p>MDNice 微信 Markdown 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队,提供文章一键排版,同时支持知乎、掘金、微信。</p><p>使 markdown 语法更加美观,如果你有写博客,那这个非常合适你,强烈推荐。</p><p>这个工具是大鹏大佬开发的,超级猫一直有用这个工具,那个工具仓库 Star 还不到 200 的时候就给它点赞了,因为实在是好用,觉得肯定会火,现在的确是火了,几乎经常写博客的人都知道和用它。</p><p>超级猫还贡献了 2 种主题呢,里面的 绿意、科技蓝 的主题就是笔者贡献的,哈哈。</p><p><img src="/img/remote/1460000038730874" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=hfGGA%2BnlW6aRQgIRU8ZsAw%3D%3D.XH30v55EYQIvYRXiIgGiwXTRtYQ1SilPmV8uHJACy6MYIc73SYz1lPtEtapZIZSw" rel="nofollow">https://github.com/mdnice/markdown-nice</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000038730872" alt="" title=""></p><p>不知不觉,已经写到第 <strong>14</strong> 期了呢,已经分享超过 <strong>100</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote>[前端GitHub]:<a href="https://link.segmentfault.com/?enc=kTw29oKYA3qdolJx8fDrvw%3D%3D.dUITvzBdX6iBtZcEtTY2JSYUlabgu4bx%2FnWM7tuu62notV9X3r%2F312sOn1DNAOckXyJLJ2ppwxYYvIPLygYaaQ%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=a1PRkLBQb3GA1JFvCb4SqA%3D%3D.hQVuP6jmiZ%2FbE0A4uk3oHU5s8u8iUqMxgPdEGn0K5%2Bbm3888D50KOsR1LB0wKK8ezLQnEmal7KP7MF4Gbgzq8A%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=bfvPeBZ5DYv4uTtyto5tIA%3D%3D.CKGmORy4YJ5%2FkmGjMtzFZNyv5zt6Pj0AM0S3BBTWAek%2FhqkvAMkJZ7CzD8l5wbXZABbyz1MwcYtfbKzYCsBlRQ%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!</p><p>可以加超级猫的 wx:<strong>CB834301747</strong> ,一起闲聊前端。</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=fRS7XltUGrwjgmhq7y1FSA%3D%3D.bgcUTGiC19vZvv69VFk7CXJaEygmUTwlIoBpZRS03OPL5Q6893xOQe5ybzYCMwiyE8V128PC3JFPwCw9E6RNGg%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=ARz%2BC%2FjJhwfB93c%2BP3sq3A%3D%3D.0Ck15f%2FUYC37FqwlaxyJ2u3FYfMjrD%2BSxiTUz%2FJHIgq1L4MqFuJyxqDk8mrTgRTsZu5p9MAhOcgBVpJE1QCXVg%3D%3D" rel="nofollow">12 个 GitHub 上超火的 JavaScript 奇技淫巧项目</a></li><li><a href="https://link.segmentfault.com/?enc=cvQpR76ViER2Fh7wQictkg%3D%3D.3NZ2NI0Duvgc3%2F27FGodz0bXZqjE0HyuVLWUASNDj6Gco%2BBg4oj35A7y2WPKMahJCCrIsrl4uMTGZJ52vZ%2BBAw%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=SXBq9m8qEbkwTTGqfCDa2g%3D%3D.VKbwsQJL9G5GN7lA%2Fl5APV1TZzp%2BH1VKnotApGOQWciZ6syc6UIZrg5wPYTAYjHBXWfLwO7r%2BgQUQ7lLQZut6A%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li><li><a href="https://link.segmentfault.com/?enc=mazHFD%2BHHFXtpCrkQMRDUQ%3D%3D.eRcL4BgSDVjSbd6NQv4LZgo2wZwpDbdS4PDyYtyhZfrfZmCZR1m%2BahfKeINXVj7Fa8X9QuLAcLZhmpQZVikIbw%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li></ul>
前端工程化必备,语义化版本号扫盲,支持任意版本号位数的比较方法
https://segmentfault.com/a/1190000038706313
2020-12-28T22:16:53+08:00
2020-12-28T22:16:53+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
7
<p><img src="/img/remote/1460000038706316" alt="" title=""></p><p>因为最近在做 Node 相关的项目,涉及到版本号的处理,根据版本号大小做升级 js 处理的,而因为多加了一位数,导致线上的 js 不能升级。</p><p>所以只能重写一个支持任意位数的版本号对比方法。</p><p>顺便先来一个语义化版本号的扫盲吧。</p><h2>为什么需要语义化版本号?</h2><p>在软件管理的领域里存在着被称作“依赖地狱”的死亡之谷,系统规模越大,加入的套件越多,你就越有可能在未来的某一天发现自己已深陷绝望之中。</p><p>在依赖高的系统中发布新版本套件可能很快会成为恶梦。</p><p>如果依赖关系过高,可能面临版本控制被锁死的风险(必须对每一个相依套件改版才能完成某次升级)。</p><p>而如果依赖关系过于松散,又将无法避免版本的混乱(假设兼容于未来的多个版本已超出了合理数量)。</p><p>当你专案的进展因为版本相依被锁死或版本混乱变得不够简便和可靠,就意味着你正处于依赖地狱之中。</p><p>作为这个问题的解决方案之一,就是用一组简单的规则及条件来约束版本号的配置和增长,也就是 <code>语义化版本号</code>。</p><h2>语义化版本号</h2><p>一般语义化版本号通常定义是这样的:</p><p>js 代码:</p><pre><code>Major_Version_Number.Minor_Version_Number[.Revision_Number[.Build_Number]]
主版本号 .子版本号 [.修正版本号 [.编译版本号 ]]</code></pre><p>定界符一般使用 <code>.</code></p><p>版本格式:<code>主版本号.次版本号.修订号</code>,版本号递增规则如下:</p><ul><li>主版本号(major):当你做了不兼容的 API 修改</li><li>次版本号(minor):当你做了向下兼容的功能性新增,可以理解为 Feature 版本</li><li>修订号(patch):当你做了向下兼容的问题修正,可以理解为 Bug fix 版本</li></ul><p>先行版本号及版本编译信息可以加到 “<code>主版本号.次版本号.修订号</code>” 的后面,作为延伸。</p><p>而且版本号都是递增的,在相同的位上递增、或者更高位递增,比如:'1.2.5.1' => '1.2.5.2'、'1.2.5.1' => '1.2.6.1'、'1.9.9.9' => '2.0.0.0'。</p><p>更详细的版本解释请看这里 <a href="https://link.segmentfault.com/?enc=ae1tUok4OxWhHGTaGnnARg%3D%3D.eRYX9yQ7X1%2Bf2DFzISR2aDJ9WakbVLFbOAJg%2F7ANUfA%3D" rel="nofollow">语义化版本 2.0.0</a>。</p><h2>比较方法</h2><p>这样我们可以做版本号比较,这里提供一个我们项目中使用的方法,支持任意版本号位数的比较哦,比如 3 位的、4 位的。</p><pre><code>// 3 位
Major_Version_Number.Minor_Version_Number[.Revision_Number]
主版本号 .子版本号 [.修正版本号]
// 4 位
Major_Version_Number.Minor_Version_Number[.Revision_Number[.Build_Number]]
主版本号 .子版本号 [.修正版本号 [.编译版本号 ]]</code></pre><p>之所以支持任意版本号位数的比较,是因为版本号都是递增的,而以下的方法是从左到右,一位一位的比较的。</p><p>js 代码:</p><pre><code>/**
* 版本比较 VersionCompare
* @param {String} curVersion 当前版本
* @param {String} supportVersion 比较版本
* @return {Boolean} false 当前版本小于比较版本返回 true
*/
const versionCompare = (curVersion, supportVersion) => {
if (!curVersion) {
return false;
}
if (!supportVersion) {
return false;
}
// 相等 也是比较关键的一步
if (curVersion === supportVersion) {
return true;
}
const curArr = curVersion.split('.');
const supportArr = supportVersion.split('.');
for (let i = 0; i < curArr.length; i += 1) {
// 只有当两个版本号不相等才比较
if (+curArr[i] !== +supportArr[i]) {
// 直接返回 结果,中止循环
return +curArr[i] > +supportArr[i];
}
}
return false;
};</code></pre><p>使用也很简单:</p><p>js 代码:</p><pre><code>// 3 位比较
versionCompare('1.3.3', '1.2.5'); // true
versionCompare('1.1.3', '1.2.5'); // false
versionCompare('1.2.5', '1.2.5'); // true
// 4 位比较
versionCompare('1.2.5.1', '1.2.5.1'); // true
versionCompare('1.2.3.4', '1.2.3.5'); // false
versionCompare('1.2.3.6', '1.2.3.5'); // true
versionCompare('1.3.3.4', '1.2.3.5'); // true
// 单 位上大于 10 的位进行比较
versionCompare('1.2.15.1', '1.2.5.1'); // true
versionCompare('1.2.15.1', '1.2.16.1'); // false</code></pre><p>这里需要注意的是根据我自己的业务逻辑 当前版本小于比较版本返回 false,当前版本等于比较版本返回 true。</p><p>你可以根据自己的业务逻辑修改代码。</p><h2>最后</h2><p>有一段时间没写技术文章了啊 😂 实在惭愧。</p><p>下一篇原创应该是自己的年终总结了,今年的年终要比往年来得更晚一些,往年的年终总结都是 12 月下询就写好了的。</p><p>没办法,今年的 12 月份的确很忙,还没排上期,2020 的年终总结,会有 2021 年 1 月写好 😂 。</p><p>不过往年的年终总结可以先看一下:</p><ul><li><a href="https://link.segmentfault.com/?enc=AE0brPvJJFmU0jto4vRVOA%3D%3D.nVJt41Pml0ikvnt%2BZNSoK%2BjYmV68qcAlUuap%2BOTwFTE0smDjexgoZOcqIoxMUjLY3zq9WQVYfEttfwhAr%2Bd7vw%3D%3D" rel="nofollow">我的 2019 年 - 当勤精进,但念无常,何以解忧,唯有暴富</a></li><li><a href="https://link.segmentfault.com/?enc=7%2B1F0NF88dJHGNugnIcbcw%3D%3D.MVQOavLrlRP0PG8d9C7Lhnt1CHYhOPL0xVrFL77kIP4yBBMGxcg1n5rEqKboYHqOMCayGG9DMqUOlBGffLCnxA%3D%3D" rel="nofollow">2018 年,我的本命年</a></li><li><a href="https://link.segmentfault.com/?enc=2LRo96xrNS89kps4D33Ppg%3D%3D.jSVo1JkGE9eeK4e0PzKX5emitFMW7FHC6klsmsZXisyChIeZQAmDJLaWHIugEdSV5MXFW8lVimnkAwqokRte3A%3D%3D" rel="nofollow">前端工程师的 2019 年年终总结 - 真香篇</a></li></ul>
10 个 GitHub 上最火的程序员简历项目,2021 金三银四必备的加薪宝剑!
https://segmentfault.com/a/1190000038571000
2020-12-21T20:32:18+08:00
2020-12-21T20:32:18+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
43
<p><img src="/img/remote/1460000038571003" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=GZFV2eyDKtdqXDWACiDsDQ%3D%3D.rmifEe9%2FXygS7DA9MIEhYydNGIAAsqZj%2Btcs4rEjQX2BwYmd%2BiSxRxKmafDC77cWmP7yTh6tVNpGRmefVq1lJQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送,与时俱进版前端资源教程。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>css 奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>JavaScript 奇技淫巧项目</code>、<code>前端必备在线工具</code> 等专题的近 100 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=kLl4CHMibsxfWIH4Lj7qdg%3D%3D.a3cAGrdP7JjGTVVQdA7KUGGSXx0Twpz3VJ%2Bp%2FAiRuIBxEQvNeuTFo2WlrUcWwhzAU%2F6dWcQDFRTV%2BmTc%2Bf835Q%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为【前端GitHub】的第 13 期精华内容。</p><p><img src="/img/remote/1460000038374609" alt="" title=""></p><hr><h2>1. ResumeSample</h2><p><img src="/img/remote/1460000038571005" alt="" title=""></p><p>程序员简历模板系列。</p><p>包括 PHP 程序员简历模板、iOS 程序员简历模板、Android 程序员简历模板、Web 前端程序员简历模板、Java 程序员简历模板、C/C++ 程序员简历模板、NodeJS 程序员简历模板、架构师简历模板以及通用程序员简历模板。</p><blockquote><a href="https://link.segmentfault.com/?enc=ZCGr8V16bx0TOVfkGzdFug%3D%3D.QiPnn1B%2FmQ6sbwNCJFDoA8Nz0MIiMdHaVAVihh9BjBzuwfPLFWS6cIp454WgRyBw" rel="nofollow">https://github.com/geekcompan...</a></blockquote><h2>2. Markdown-Resume</h2><p>用 markdown 语法来写的简历模版,非常简结通用。</p><p>还介绍了导出 PDF 的方法。</p><p><img src="/img/remote/1460000038571014" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=9g%2BIoicolY4owI02JPYusw%3D%3D.g%2BZZebznrq76G8zW1Ujth3BuAq3nMipbDGQxIGdvmdmaN4UD%2BwMc%2BIETI%2B1kbp4K" rel="nofollow">https://github.com/CyC2018/Ma...</a></blockquote><h2>3. awesome-resume</h2><p>项目包括程序员简历例句,程序员简历范例,Java 简历模版,Python 简历模版,C++ 简历模版。</p><p>比如前端:</p><ul><li>对前后端分离模式,可视化开发深入理解,对 Vue 和 react 有丰富的开发经验,具备一定的框架设计能力。</li><li>对 Javascript 中闭包、函数式语言等概念有清晰的认知,对常见库的源码实现有了解。</li><li>熟悉模块化、前端编译和构建工具,熟练运用主流的移动端 JS 库和开发框架,并深入理解其设计原理,例如:Zepto、React 等。</li><li>熟悉 Node.js 开发,熟练使用 npm, webpack, gulp 等工具。熟悉前端性能的优化,熟悉使用 Chrome,Safari 等前端调试工具。</li><li>熟悉 Node.js 以及 V8 的性能和稳定性优化,能对系统整体性能进行评估,解决内存瓶颈。</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=AYXWd5Ec4E1Q8k0VpxVdBw%3D%3D.BIaQysvqn%2FOnrr5mC%2FDfZxlOK1afYDIp3o7mcgHPc5ohMRqhwYQuWHcVzmhNMQ%2Bt" rel="nofollow">https://github.com/resumejob/...</a></blockquote><h2>4. DeerResume</h2><p><img src="/img/remote/1460000038571012" alt="" title=""></p><p>好用的 MarkDown 在线简历工具,可在线预览、编辑、设置访问密码和生成 PDF。</p><ul><li>可自行搭建,任意修改页面样式和风格</li><li>免安装,可放置于任何支持静态页面的云和服务器(当然包括GitHub</li><li>在线MarkDown编辑器+实时预览</li><li>在浏览器中实时保存草稿</li><li>支持阅读密码,您可以直接将网址和密码发送,供招聘方在线浏览</li><li>一键生成简单雅致的PDF,供邮件发送及打印</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=x2ZYz2QkTe31ZWFJaHSzIQ%3D%3D.ephF7C6Ey2EBWOO%2FIuiAXAG5%2FcNLW4Qtbcdg%2FZPM40W7eCUZocK6TcsHgCvnUs%2Bf" rel="nofollow">https://github.com/geekcompan...</a></blockquote><h2>5. markdown-resume</h2><p><img src="/img/remote/1460000038571007" alt="" title=""></p><p>支持 Markdown 和富文本的在线简历排版工具,支持切换 4 种模版、自定义和导出功能。</p><p>简历的制作过程考验了一个人的两个能力,逻辑能力和细节能力。</p><blockquote><a href="https://link.segmentfault.com/?enc=UiSoOD1uvgzyfVUjgRvI2A%3D%3D.IH1HkQ6iE5kDUI2PoBlNSidNz3VS4wAiEEbh3lRmP3RWrqyXYWMVVKyIE1gGRmCb" rel="nofollow">https://github.com/mdnice/mar...</a></blockquote><h2>6. best-resume-ever</h2><p><img src="/img/remote/1460000038571010" alt="" title=""></p><p>是一个帮助你快速生成漂亮简历的工具,它基于 Vue 和 LESS,生成的简历可导出为 PDF 格式。</p><blockquote><a href="https://link.segmentfault.com/?enc=YJdNr9YpcYslW%2BG9wZtxug%3D%3D.6wzsH8a3%2BLabn9iKJ0e3Mlb0xN%2FnKLGpmuHO3AOQxijiFoDQO9vf8amsTaVCDgOE" rel="nofollow">https://github.com/salomonell...</a></blockquote><h2>7. awesome-resume-for-chinese</h2><p><img src="/img/remote/1460000038571004" alt="" title=""></p><p>适合中文的简历模板收集。</p><p>该项目收集了好多个中文的简历开源项目模版,比如上图那个。</p><blockquote><a href="https://link.segmentfault.com/?enc=zIXUxHRqvEoCjO4FZoxXVA%3D%3D.RBXSD4PLaUmyyrTcKdWwJM3znBok%2FmpNqE2uc6oNtUb%2FIhmHupWLpnpGcR1oAXUSGgVoOPJwdgewzCq7mZ%2BsMA%3D%3D" rel="nofollow">https://github.com/dyweb/awes...</a></blockquote><h2>8. resume</h2><p>一份优雅简约的简历</p><ul><li>优化构建,页面秒开无闪烁</li><li>自适应屏幕兼容移动端</li><li>Github Action 自动部署部署到 ghpages,可在线浏览</li><li>自动生成 PDF,全自动化流程</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=%2BJ4gXUE3oo%2FXIOH%2FFJNK9Q%3D%3D.xvdxyMbUImigOYtTvxrOApwbgjvKIlvYafUvqwMqxAU5XnXtObE9xQxYEZA4HNid" rel="nofollow">https://github.com/gwuhaolin/...</a></blockquote><h2>9. resume</h2><p><img src="/img/remote/1460000038571009" alt="" title=""></p><p><img src="/img/remote/1460000038571011" alt="" title=""></p><p>前端程序员模版,这个模版就是结合前面的几个简历模版,结合笔者自己的工作经验,写的简历,也就是笔者上一年跳槽时的简历 😂,其中部分内容做了处理。</p><p>这个是在 VsCode 里面用 markdown 语法写好,然后导出来的,非常简单,而且自由度非常高,随自己怎么修改。</p><p>其中装的 VsCode 插件是 <a href="https://link.segmentfault.com/?enc=0bLhbvsyq8OEW2szxU81rw%3D%3D.4xSVNL%2BaO2vEXPJHNmKmApfyxoVGaCNS3o4jjNqI9KLiigW52p2P5VqwV3mB9y3ELOcg%2FJdb4pBhl5%2FojMkHswwJa0cZl%2Bsyj3sYzBXyzWg%3D" rel="nofollow">markdown-all-in-one</a> 和 <a href="https://link.segmentfault.com/?enc=d2n%2B3ijUm%2FQSbFikI7IdXQ%3D%3D.2BDT9Qp3QpPgYyJtwBYCI%2BB9dSPmNyau394cpC4S%2BZ2FeQIajhgnixEqEkZ8mTRgDx4nL2iNP9wBgP9z3pWRndqpF4b6rwEaqjbOIfStlog%3D" rel="nofollow">markdown-pdf</a>,支持预览 md 文件以及导入各种格式的 md 文件。</p><p>支持导出的格式:</p><ul><li>markdown-pdf: Export (settings.json)</li><li>markdown-pdf: Export (pdf)</li><li>markdown-pdf: Export (html)</li><li>markdown-pdf: Export (png)</li><li>markdown-pdf: Export (jpeg)</li><li>markdown-pdf: Export (all: pdf, html, png, jpeg)</li></ul><p><img src="/img/remote/1460000038571006" alt="" title=""></p><p>上面简历的原文件地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=b%2B8XUZ51MTtgCY1S9JRWvg%3D%3D.XxQ8GqIbnaLwGsnC0vfppnxxfdiFLRPlODFwlNJiGyZ%2FWE6KI%2FM%2FFzy1Y%2BszJYEpr9bCc%2FOK6R1XQfHV%2FB%2FxZPOqdblM5Fz3Ot0NNBqV5KE%3D" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><h2>10. github-readme-stats</h2><p><img src="/img/remote/1460000038571008" alt="" title=""></p><p>这个项目是在你的 README 中获取动态生成的 GitHub 统计信息!</p><p>不过这种简历的方式要对自己的 GitHub 贡献很有信心才好哦。</p><p>比如笔者的如下,也不好做为简历来写 😂</p><p><img src="/img/remote/1460000038571013" alt="" title=""></p><p>不过只要是 readme 文件,放在 <code>自己的用户名的仓库</code> 里面也是可以的,也能达到第 9 个项目中简历的效果。</p><blockquote><a href="https://link.segmentfault.com/?enc=rPJpH9tR83hHhJw0eEHa2Q%3D%3D.yfxbOHYFNvSvSX9Tw8e5lfN%2BmbaHETnvKT76m9PtXhBBYYgPa3YRqcgvPv5z1RaG2nGXrZGQg4hy5%2BiMmCnwyA%3D%3D" rel="nofollow">https://github.com/anuraghazr...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000038477711" alt="" title=""></p><p>不知不觉,已经写到第 <strong>13</strong> 期了呢,已经分享了 <strong>100</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote>[前端GitHub]:<a href="https://link.segmentfault.com/?enc=8CsKWZU6oPw0T7KzSeERpg%3D%3D.wp6yA2gjEeoMeNuDAKu1eWWLDWp0SNB2wI7Q9x0EUfx%2B10VcIIbu%2BKlCN%2FaEK3XGESlQFte2kmnXmEIsU9Riag%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=d24qsa0TJt6xOcya0whO7g%3D%3D.45DRR8YzG2ZRD62J%2Fhun3fPWFr4tkwztPUqafsX9tVPL5bDQ3yuc6c8DX4Lux441D3N7Qbw8ZqDb%2BwlDc9jRaw%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=agadYu3ziBuYTTUKKR1LYQ%3D%3D.U%2FVZkTUlPw6ZoXKJk4bgHfaCEYnUhI84eUyt5PNjaHrkDk8xa1jwwnpVpamCCHDPK0eUW1jiLNtvPJPKjlyndw%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 wx:<strong>CB834301747</strong> ,一起闲聊前端。</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=RJfVQXtMsnHfcy0Kx%2FqR4Q%3D%3D.bxmPOQ4R0bkDZCiTIjyPvlzjtFQt6dcSWazT5qQcyZm4lfstvvMn%2FDjFkrp4%2BqXn0Y%2BtR2UpS7Ln8vNQENgBjA%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=iW72DCJOqlt6uWjr84Vjwg%3D%3D.qYRphaAIG0Ijt0HyCI7qSORqE5Fdierq2td9mc5e3zWkJdFTW%2BRjHFS5B9NFbNXHAPRfNMKKkEJlBy4BVzOpEA%3D%3D" rel="nofollow">12 个 GitHub 上超火的 JavaScript 奇技淫巧项目</a></li><li><a href="https://link.segmentfault.com/?enc=K4RqIoj598UDi5QXbd2GxQ%3D%3D.LgeJjwJxInQ7Q%2BZKS5sQcU3Loc3XdSHWDXoDNs8PsjqVkfxBO9jnhlM7D8moL%2Bl3z%2F%2FV0jEzayZ4h56tOUs8tg%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=pJwZl5mB4bcsdhODfqwjyA%3D%3D.Crr9ENhVnysctqML2sRKkrkZ01TEcU6kC4SKn8VoQQzuTDJpnTLwa%2FWtO64cxDSFv7VzPny85kv%2FSLjVycb8YQ%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li><li><a href="https://link.segmentfault.com/?enc=7Gb4mIve9iEVSnKWye7pBg%3D%3D.BH2C4pOQuXZdsyTTCjk340okz43R2PirOLcZzEK10ZHQZvGlnawGeln66GicOsOSG0Fb7J5ymytZxK65cH23vw%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li></ul><p>喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!</p>
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!
https://segmentfault.com/a/1190000038477694
2020-12-14T23:03:37+08:00
2020-12-14T23:03:37+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
51
<p><img src="/img/remote/1460000038477701" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=RM09peOOmUgy4LcO0R%2BtzA%3D%3D.%2Fq8vmgjKx4f08j5zBHQZtvwY7azXPLOTDnay8%2FPfQDOrp3%2BFCbtNK6MGeGLT8MP%2FihkBrwmvQauuREZah4SS3A%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送。</blockquote><p>已经推荐了 <code>面试项目</code>、<code>css奇技淫巧项目</code>、<code>代码规范项目</code>、<code>数据结构与算法项目</code>、<code>管理后台模板</code>、<code>前端必备在线工具</code> 等专题的近 100 个优秀项目了。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=Sg%2B0y1yXYCeKQMJKrW29dw%3D%3D.wKNNXT%2FOYEp11zp4GNILzlLwnpDOYbCHox9%2BjaIoHSLjuG8NmLklY3ZLP1Ics69cVREe8LScpKPGnqYa%2FRT9cA%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为【前端GitHub】的第 12 期精华内容。</p><p><img src="/img/remote/1460000038374609" alt="" title=""></p><hr><h2>1. 30-seconds-of-code</h2><p><img src="/img/remote/1460000038477698" alt="" title=""></p><p>该项目讲的是满足你所有开发需求的简短代码段,里面都是些经常会用到而且是非常经典的代码,非常值得学习!</p><p>比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。</p><p><img src="/img/remote/1460000038477697" alt="" title=""></p><p>比如:<strong>你必须知道的 4 种 JavaScript 数组方法</strong></p><p>Array.prototype.map()</p><pre><code class="js">const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]</code></pre><p>Array.prototype.filter()</p><pre><code class="js">const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]</code></pre><p>Array.prototype.reduce()</p><pre><code class="js">const arr = [1, 2, 3];
const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6
const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]</code></pre><p>Array.prototype.find()</p><pre><code class="js">const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1</code></pre><p>又比如:<strong>如何在 JavaScript 中实现睡眠功能?</strong></p><p>同步版本</p><pre><code class="js">const sleepSync = (ms) => {
const end = new Date().getTime() + ms;
while (new Date().getTime() < end) { /* do nothing */ }
}
const printNums = () => {
console.log(1);
sleepSync(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)</code></pre><p>异步版本</p><pre><code class="js">const sleep = (ms) =>
new Promise(resolve => setTimeout(resolve, ms));
const printNums = async() => {
console.log(1);
await sleep(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)</code></pre><p>其实上面讲到的事例里面还提供 api 和方法的讲解的,方便读者能看懂的,这里就不写出来了。</p><p>还想学更多的 经典 js 代码片段,请看下面的仓库</p><blockquote><a href="https://link.segmentfault.com/?enc=q%2BZbc3G4W%2BnDrvkMbeaNfA%3D%3D.uoSWyvArY%2FOtcpi13zKSbzOSIYuHVMxgggX0UL3lNHm9DBfxinkXF2AXp9EorNc%2F%2FQ%2FM%2BoCMnzU0ZgjySu1Fhg%3D%3D" rel="nofollow">https://github.com/30-seconds...</a></blockquote><h2>2. 33-js-concepts</h2><p><img src="/img/remote/1460000038477703" alt="" title=""></p><p>JavaScript开发者应懂的 33 个概念</p><p>这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。</p><p>目录</p><pre><code>调用堆栈
原始类型
值类型和引用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量提升
Promise
立即执行函数, 模块化, 命名空间
递归
算法
数据结构
消息队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变化
耗性能操作和时间复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 科学记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道</code></pre><p>而且每个主题都包含了相关的精彩文章和视频,非常适合学习。</p><p><img src="/img/remote/1460000038477705" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=xuliTBZVfH391S%2Ba8JfXZA%3D%3D.dfuY28nrhNRkQnadWZhZlNezpObZgeGBkvJaNDeSKD2Y1sSzucHjrciXevm2sU%2FP" rel="nofollow">https://github.com/leonardoms...</a></blockquote><h2>3. javascript-questions</h2><p><img src="/img/remote/1460000038477700" alt="" title=""></p><p>JavaScript 进阶问题列表。</p><p>从基础到高级:测试您对 JavaScript 的了解程度,稍微刷新一下知识或为编写代码面试做准备! </p><p>比如下面会输出是什么?</p><pre><code class="js">let a = 3
let b = new Number(3)
let c = 3
console.log(a == b)
console.log(a === b)
console.log(b === c)</code></pre><ul><li>A: true false true</li><li>B: false false true</li><li>C: true false false</li><li>D: false true true</li></ul><p>答案: C</p><p>解释:</p><p><code>new Number()</code> 是一个内建的函数构造器。虽然它看着像是一个 number,但它实际上并不是一个真实的 number:它有一堆额外的功能并且它是一个对象。</p><p>当我们使用 <code>==</code> 操作符时,它只会检查两者是否拥有相同的<em>值</em>。因为它们的值都是 <code>3</code>,因此返回 <code>true</code>。</p><p>然后,当我们使用 <code>===</code> 操作符时,两者的值以及<em>类型</em>都应该是相同的。<code>new Number()</code> 是一个对象而不是 number,因此返回 <code>false</code>。</p><blockquote><a href="https://link.segmentfault.com/?enc=iom3Xqji%2BEUIGYBuo%2FX3HA%3D%3D.ERjpi%2FSYWt9rvTKG%2Bczt4wu77pEmLoPnZaNXAzMZGS4GzCJYjkhV77g09Iu2grz2K70YSjXSlyVsWAD0truy2g%3D%3D" rel="nofollow">https://github.com/lydiahalli...</a></blockquote><h2>4. JavaScript 30</h2><p><img src="/img/remote/1460000038477699" alt="" title=""></p><p>使用原生 JavaScript 在 30 天内完成 30 个项目。</p><p>每天完成的 HTML, CSS 和 javascript 解决方案。</p><blockquote><a href="https://link.segmentfault.com/?enc=Sg6AoISCgTVwrZQuKYyhtA%3D%3D.4JCYy8Ewj8y2xJaw7NOrDTsbKeuuCebqyCzZfzVN09ZnxQMyJMcIBEs2eq6IdJ0R" rel="nofollow">https://github.com/wesbos/JavaScript30</a></blockquote><h2>5. Codewars</h2><p>和 leetcode 有点类似,也是在平台上和其他人一起完成真实的代码挑战,提升你的技术。</p><p>相比于其他平台,codewars 给出的问题更加贴合实际工作与生活,很多题都会给出题目背景,更有代入感。</p><p>可以提升技能:在社区创建的 kata 上挑战自我,以增强各种技能。掌握您当前选择的语言,或扩展您对新语言的理解。</p><p>要加入这个社区,您必须先答题证明自己的技能才可以的。</p><blockquote><a href="https://link.segmentfault.com/?enc=pX0SqAkrX1gfC7qpp7K2FA%3D%3D.XIVz8pLhonSPC4tSeiFLm9N3rVjZLV8CNduvwrPPgws%3D" rel="nofollow">https://www.codewars.com/</a></blockquote><h2>6. ES6 入门教程</h2><p><img src="/img/remote/1460000038477704" alt="" title=""></p><p>入门的前端都应该都知道的 ES6 开源书籍,猫哥初入前端时就是学了 阮一峰 老师开源的 ES6 内容的,一直实用至今!</p><p>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。</p><p>本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。</p><p>本书为中级难度,适合已经掌握 ES5 的读者,用来了解这门语言的最新发展;也可当作参考手册,查寻新增的语法点。</p><p>如果你是 JavaScript 语言的初学者,建议先学完《JavaScript 语言入门教程》,再来看这本书。</p><blockquote><a href="https://link.segmentfault.com/?enc=mrSH82DY6E87C%2BoOWgyqVA%3D%3D.el3pWuwmJoFw6hIDZEYi5LScAuziP71oo6%2BeNXg%2BiQM%3D" rel="nofollow">https://es6.ruanyifeng.com/</a></blockquote><h2>7. JavaScript 教程</h2><p>本教程全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容。</p><p>也是 阮一峰 老师写的,真的非常通俗易懂,非常适合前端学习。</p><p>不得不说,知识掌握通透的人写的技术文章,非常能让人容易明白。</p><p>内容上从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。</p><p>所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。</p><p>本教程适合初学者当作 JavaScript 语言入门教程,学完后就可以承担实际的网页开发工作,也适合当作日常使用的参考手册。</p><p>目录</p><pre><code class="js">入门篇
数据类型
运算符
语法专题
标准库
面向对象编程
异步操作
DOM
事件
浏览器模型
附录:网页元素接口</code></pre><blockquote><a href="https://link.segmentfault.com/?enc=O0p%2BSBlmNyykL51P6riwDw%3D%3D.b8ZxEemhrhG32PI2jGrodEfJDvfGjSk7eXDd5kOa104%3D" rel="nofollow">https://wangdoc.com/javascript/</a></blockquote><h2>8. 现代 JavaScript 教程</h2><p>以最新的 JavaScript 标准为基准。通过简单但足够详细的内容,为你讲解从基础到高阶的 JavaScript 相关知识。</p><p>课程的核心内容包含 2 部分,涵盖了 JavaScript 编程语言相关知识和浏览器行为。此外还有一系列的专题文章。</p><p><strong>JavaScript 编程语言</strong></p><p>在这儿我们将从头开始学习 JavaScript,也会学习 OOP 等相关高级概念。</p><p>本教程专注于语言本身,我们默认使用最小环境。</p><p><img src="/img/remote/1460000038477706" alt="" title=""></p><p><strong>浏览器:文档,事件,接口</strong></p><p>学习如何管理浏览器页面:添加元素,操纵元素的大小和位置,动态创建接口并与访问者互动。</p><p><img src="/img/remote/1460000038477709" alt="" title=""></p><p><strong>其他文章</strong></p><p>教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构,你可以按你需要的顺序阅读文章。</p><p><img src="/img/remote/1460000038477702" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=LOooC7W%2B7R29Q5pODzrDDg%3D%3D.gTBX2KbVRzhFhNC1zJzU344c%2BMReiHLM3mXgSDK9HkE%3D" rel="nofollow">https://zh.javascript.info/</a></blockquote><h2>9. MDN</h2><p><img src="/img/remote/1460000038477708" alt="" title=""></p><p>MDN Web Docs 网站提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API。</p><p>Mozilla, Microsoft, Google, Samsung 和 W3C 将合作把 MDN 打造成最好的 Web 文档。</p><p>所以在这个平台学习 web 技术算是比较权威的了。</p><p>源于开发者,服务开发者。</p><blockquote><a href="https://link.segmentfault.com/?enc=TP76USVncasisQPMqtf7Wg%3D%3D.YWtfjZvVeqbQCmbr5T2HOEwbGOd6mPFwodVacg4LeUSVhHiDEHzcIFMv%2BER%2Fx50t" rel="nofollow">https://developer.mozilla.org...</a></blockquote><h2>10. clean-code-javascript</h2><p>优秀的 JS 代码规范。</p><p><img src="/img/remote/1460000038477707" alt="" title=""></p><p>比如:<strong>对相同类型的变量使用相同的关键字</strong></p><p>Bad:</p><pre><code class="js">getUserInfo();
getClientData();
getCustomerRecord();</code></pre><p>Good:</p><pre><code class="js">getUser();</code></pre><p>再比如:<strong>使用可搜索的命名</strong></p><p>在开发过程中,我们阅读代码的时间会远远超过编写代码的时间,因此保证代码的可读性与可搜索会非常重要。切记,没事不要坑自己。</p><p>Bad:</p><pre><code class="js">//525600到底啥意思?
for (var i = 0; i < 525600; i++) {
runCronJob();
}</code></pre><p>Good:</p><pre><code class="js">// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
runCronJob();
}</code></pre><blockquote><a href="https://link.segmentfault.com/?enc=I0uFMWtGvNaRUNFzyyD4fw%3D%3D.sl5HYYDU5X0b2DWWjrvef%2B2wZBJU3jqEyz4JZnGAWlPD9mf47sCg9QYTzNNNf8ZxW6sun8PzVF4ojhsgaHh7Fg%3D%3D" rel="nofollow">https://github.com/ryanmcdermott/clean-code-javascript</a></blockquote><h2>11. TypeScript 入门教程</h2><p>从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。</p><p>这个教程真的是猫哥看过的最完整而简洁、并且通俗易懂的 TypeScript 教程!</p><blockquote>《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统,完整而简洁,示例丰富,比官方文档更易读,非常适合作为初学者学习 TypeScript 的第一本书。 —— <a href="https://link.segmentfault.com/?enc=Jv9yVHm6NPXiZ%2Fh8HoeUBA%3D%3D.%2Bc6%2FbJHqlCXV3eJpP%2F5xPZ1odOa8vs881l8Im0DzyGg%3D" rel="nofollow">阮一峰</a></blockquote><p>比如 <strong>类型别名</strong>:类型别名用来给一个类型起个新名字。</p><p>简单的例子:</p><pre><code class="js">type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
</code></pre><p>上例中,我们使用 <code>type</code> 创建类型别名。</p><p>类型别名常用于联合类型。</p><blockquote><a href="https://link.segmentfault.com/?enc=Yx4NNfpmD90y5BHUfDFzHw%3D%3D.gk1pwXShXTuoGRASBt7T9zuYUsl7GlsuGVrnKUcCXe4%3D" rel="nofollow">https://ts.xcatliu.com</a></blockquote><h2>12. w3school</h2><p>前端必须知道的 Web 技术教程平台,虽然很多前端都知道了,但是有必要提一下。</p><p>领先的 Web 技术教程 - 全部免费。</p><p>在 W3School,你可以找到你所需要的所有的网站建设教程。</p><p>从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS。</p><p>在这里学习前端最好的地方就是有 demo 可能学习,可以验证你的效果或者输出。</p><p><img src="/img/remote/1460000038477710" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=jMde3RPzFik62svvt9cYAQ%3D%3D.yZbQHzGq%2F2Yap5zFHii20OyHP80loiPBj096G6dYWDwbJ5mp0U03TIXeSrJJmQ9%2B" rel="nofollow">https://www.w3school.com.cn/j...</a></blockquote><h2>最后</h2><p><img src="/img/remote/1460000038477711" alt="" title=""></p><p>不知不觉,已经写到第 <strong>12</strong> 期了呢,已经分享了接近 <strong>100</strong> 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!</p><blockquote>[前端GitHub]:<a href="https://link.segmentfault.com/?enc=GRfJJIisO1%2FlY4CsyXTdOQ%3D%3D.UbmtY%2FLH0m%2BhIJ5E1CoifYiD1KRVt077%2BLhnnhnRFvXG6RprE8HXptGvYhBhysbDOAop5O3zGeC9YMqBGtBakA%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=roZXq4wBTlRcay76gZ83%2Fg%3D%3D.%2BAZkhMSKgnQJt%2Byf3W8M8kI774eCwSZznBKbEAKJq3viy7Q4KJXiv5pAyXjY3hKejplrjrjjwL5JR4H2PQfppg%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=mHz5mcmBhEihpr9gl11aXQ%3D%3D.Xb%2F1FuFZQ4HBDuRWCuQTU5CrJi4Fxklu8udnnaeDI%2Fip%2FxEFCfWscoTBta78FkgSTrszCKeVMt68KWnHkAw87Q%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!</p><p>超级猫的 wx:<strong>CB834301747</strong> ,微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=lTUZPW6%2B9fTpmk3ydQzz5A%3D%3D.DDLnhWVaJ17JHkW1GehP9ukUkzqoqhf2Tor5nGIX9ez063yx%2FeDS9egg3kRvsDX7TThTZ%2FnueGNP7MGOZ%2BjFew%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=o0GOlhiRMn7%2BHeBOMOoYbQ%3D%3D.oKoA9bnNVAD%2BDJLJi9RhUuPG3GOlfjd8pVFCcer%2BCqFEz9yswUFtetD%2B%2Ffi2dD9kn2fzOdvxDRaFwUgdzSgt6Q%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=dG0DVz3j4iRUxxBs2SUBoQ%3D%3D.gDG8QaksLtHIL3bTp5py466sM5kt3X9wxx2HtgPHnnW0ooqIoQyrfyQ64bc0%2BxGN6oMLBh7F1Sa8g%2FxJj8rJzA%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li><li><a href="https://link.segmentfault.com/?enc=HjjdTJF%2F%2BXqK2jSJzgCQrQ%3D%3D.OtYDvWBZjBQDvVGNEHXydq8HqzcohZDN2CWBmzfp0ZqBGXvc%2BZDhC9S0hi2LQlZET9XRBDqwquhYTy953tNiFw%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li></ul>
自从掌握了 Google 和 Baidu 的 16 个高级搜索技巧,再也没有解决不了的 bug 了!
https://segmentfault.com/a/1190000038432191
2020-12-09T23:20:03+08:00
2020-12-09T23:20:03+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
49
<p><img src="/img/remote/1460000038432200" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=x2SKXkkUYR8Imrb6UNT4kQ%3D%3D.uPAxKSz5aJ6tuzHgLPpXhvuq8nKGUfLOq2CIcY7XJK%2B1dotXozobN%2F8A6tcSAUCiXzixUoI46gmackFooWWvBg%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,收集、整理、推荐业界高品质前端资源合集,优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术,抹平你的前端信息不对称。</blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=Dpr2ChwvtI2xZva5YJYsJQ%3D%3D.AB9z6qmkGjKP33ZMw%2F%2FBBlHp2gGALVxI6h1FRUsoZYIp0a8Q%2FAAARairpnZYYaRd8soGrorLmHOHdpRP0RdVnw%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为【前端GitHub】的第 11 期精华内容。</p><p><img src="/img/remote/1460000038374609" alt="" title=""></p><hr><p>做为一名程序员,在学习的过程中,肯定会遇到很多的 Bug,有时候,并不会有前辈在我们的身边指导我们该如何地去学习。这个时候,我们就得靠自己去使用搜索引擎去解决我们的问题。</p><p>幸运的是,我们所运到的问题,前人都已经遇到过了,并且给出了相应的解决办法。基本上百分之九十的问题,我们都能在互联网上搜索得到。</p><p>如果搜索之后,你还解决不了,那可能是因为你还没掌握如下技巧!</p><p>下面我给大家介绍下,Google 和 Baidu 这两个搜索引擎的高级搜索技巧。</p><h2>Google</h2><p>前提是能访问外网 🤩,不能访问的,请看下半文的百度搜索部分。</p><h3>精确搜索:双引号</h3><p>精确搜索,就是在你要搜索的词上,加上双引号,那个 Google 搜索引擎,就会完全的匹配你所要的词</p><p>比如搜索:"前端GitHub"</p><p><img src="/img/remote/1460000038432202" alt="" title=""></p><h3>站内搜索:site</h3><p>这是一个比较常用的搜索方法,<code>site 搜索</code>,就是在站内进行搜索.</p><p>语法是:<code>site:stackoverflow.com</code> ,其中 <code>site:后面加上你要搜索的网站地址</code>。</p><p>一般程序猿解决问题,用 <code>site:stackoverflow.com</code>,大部分解决不了的问题,都会有答案了。</p><p>比如在 segmentfault.com 里面搜索:"react打包npm run build生成的文件好大,怎样关掉生成 sourceMap" site:segmentfault.com</p><p><img src="/img/remote/1460000038432198" alt="" title=""></p><p>除了以上内容之外,还可以在 <code>工具</code> 那里进行筛选,有语言、时间、结果 3 种选项。</p><p><img src="/img/remote/1460000038432194" alt="" title=""></p><p>如果想通过时间筛选出最近的的内容,就可以试试时间的筛选了</p><p><img src="/img/remote/1460000038432204" alt="" title=""></p><p>还可以对结果进行 精确匹配 的筛选</p><p><img src="/img/remote/1460000038432197" alt="" title=""></p><h3>通配符搜索:*</h3><p>这也是一个比较常用的搜索方法,通常通配符搜索,用在模糊印象的地方比较多。</p><p>当我想搜一句歌词,“让我们同步进阶 重生的力量来自真我 战胜可敬的对手 yeah” ,但是前边的 “让我们同步进阶”,就可以用这个方法进行搜索了。搜索 *重生的力量来自真我</p><p>就会得到我们想要的结果了:林俊杰唱的《进阶》。</p><p><img src="/img/remote/1460000038432199" alt="" title=""></p><h3>减号排除,缩小范围:-</h3><p>当搜索量比较大的时候,使用减号 <code>-</code> 通过减号,能够去掉一些无关的搜索。</p><p>比如:全栈修炼 -全栈修炼之路</p><p><img src="/img/remote/1460000038432196" alt="" title=""></p><h3>文档搜索:filetype</h3><p>文档搜索命令 <code>filetype</code>,多数情况下用以查找我们所需要的资料,返回的页面是你搜索的文档相应格式。</p><p>如搜 JavaScript权威指南(第四版)的 pdf,就是: filetype:pdf JavaScript权威指南(第四版)</p><p><img src="/img/remote/1460000038432195" alt="" title=""></p><h3>图片搜索</h3><p>平常在网上考到一张好的图片,可以保持下来,但是由于图片的尺寸过小,或者像素不合适,这个时候,只要用谷歌图片搜索,就能找到许多类似的,或者尺寸清晰度更好的同一张。</p><p><img src="/img/remote/1460000038432205" alt="" title=""></p><p><img src="/img/remote/1460000038432201" alt="" title=""></p><p>比如我上传了一张 node 的 logo 的图片时,结果如下:</p><p><img src="/img/remote/1460000038432203" alt="" title=""></p><h2>Baidu</h2><p>因为很多同学用不了 google ,所以我觉得还是有必要讲一下 百度常用的搜索技巧。</p><p>百度常用的技巧,许多和谷歌大同小异,常用的这些命令,这 10 个就够用了,其他高级技巧,不是做 SEO 没得必要去记太多。</p><h3>普通搜索</h3><p>普通人是直接搜索关键字。</p><p>比如:前端开发</p><p><img src="/img/remote/1460000038432217" alt="" title=""></p><p>下面介绍直接在百度搜索上用 <code>语法</code> 搜索的高级技巧。</p><h3>intitle - 搜索范围限定在网页标题</h3><p>搜索范围限定在包含 <code>keyword</code> 的网页标题中,这也是最普通的搜索。</p><p><code>intitle</code>: 和后面的关键词之间不要有空格。</p><p>例如:</p><p><code>intitle:前端开发</code></p><p><img src="/img/remote/1460000038432207" alt="" title=""></p><p>对比普通搜索的图,发现搜索到的内容有一点点不一样,但并无太大差别。</p><h3>site - 搜索范围限定在特定站点中</h3><p>搜索范围限定在特定站点中。</p><p>如果知道某个站点中有自己需要找的东西,就可以把搜索范围限定在这个站点中,提高查询效率。</p><p>注意</p><ul><li><code>site:</code> 后面跟的站点域名,不要带 <code>http://</code></li><li><code>site:</code> 和站点名之间,不要带 <code>空格</code></li></ul><p>例如思否网站:<code>全栈修炼 site:segmentfault.com</code></p><p><img src="/img/remote/1460000038432218" alt="" title=""></p><p>例如 GitHub:<code>全栈修炼 site:github.com</code></p><p><img src="/img/remote/1460000038432208" alt="" title=""></p><h3>inurl 搜索范围限定在 url 链接中</h3><p><strong>搜索范围限定在 <code>url</code> 链接中</strong>.</p><p>网页 <code>url</code> 中的某些信息,常常有某种有价值的含义。您如果对搜索结果的 <code>url</code> 做某种限定,可以获得良好的效果。</p><p>例如:前端教程 inurl:video</p><p>查询词 “前端教程” 是可以出现在网页的任何位置,而 “video” 则必须出现在网页 <code>url</code> 中。</p><p><img src="/img/remote/1460000038432210" alt="" title=""></p><h3>双引号 “”</h3><p>精确搜索:双引号</p><ul><li>查询词加上双引号 <code>“”</code>,则表示查询词不能被拆分,在搜索结果中必需完整出现,可以对查询词精确匹配。</li><li>如果不加双引号 <code>“”</code>,经过百度分析后可能会拆分。</li></ul><p>比如搜索 "前端开源项目"</p><p><img src="/img/remote/1460000038432213" alt="" title=""></p><h2>书名号<code>《》</code></h2><p>查询词加上书名号<code>《》</code>有两层特殊功能</p><ul><li>一是书名号会出现在搜索结果中;</li><li>二是被书名号括起来的内容,不会被拆分。</li></ul><p>比如:《JavaScript高级程序设计(第4版)》</p><p><img src="/img/remote/1460000038432211" alt="" title=""></p><p>书名号在某些情况下特别有效果,比如查询词为手机,如果不加书名号在很多情况下出来的是通讯工具手机,而加上书名号后,《手机》结果就都是关于电影方面的了。</p><h3>- 不含特定查询词</h3><p>查询词用减号 <code>-</code> 语法可以帮您在搜索结果中 <code>排除包含特定的关键词</code> 的所有网页。</p><p>例子:全栈工程师 -java </p><p>查询词 “全栈工程师” 在搜索结果中,“java” 被排除在搜索结果中。</p><p><img src="/img/remote/1460000038432212" alt="" title=""></p><h3>+ 包含特定查询词</h3><p>查询词用加号 <code>+</code> 语法可以帮您在搜索结果中 <strong>必需包含特定的关键词</strong> 的所有网页。</p><p>例子:全栈工程师 +node</p><p>查询词 “全栈工程师” 在搜索结果中,“node” 被必需被包含在搜索结果中。</p><p><img src="/img/remote/1460000038432206" alt="" title=""></p><h3>Filetype 搜索指定文档格式</h3><p>查询词用 <code>Filetype</code> 语法可以限定查询词出现在指定的文档中,支持文档格式有 <code>pdf,doc,xls,ppt,rtf</code>。对于找文档资料相当有帮助。</p><p>比如:filetype:pdf JavaScript高级程序设计(第4版)</p><p><img src="/img/remote/1460000038432219" alt="" title=""></p><p>不过相对谷歌而已,百度的搜索是把自己的产品,放在前面,见上图,排在前面的都是百度自己的产品,百度文库。</p><h3>图片搜索</h3><p>百度和谷歌一样,都是提供了这个功能。</p><p><img src="/img/remote/1460000038432209" alt="" title=""></p><p>比如我上传的是一张 vue 的图片时,结果如下</p><p><img src="/img/remote/1460000038432215" alt="" title=""></p><h3>百度高级搜索页面</h3><p><a href="https://link.segmentfault.com/?enc=6yNlIHIr8LrWp3PM2JSh3A%3D%3D.UCpiRkuSTPOEu33PQI6bWSQtBqFJZv4h5%2FI2JPKHXqpuuY15HuBRBkg59%2FoDiG0F" rel="nofollow">https://www.baidu.com/gaoji/a...</a></p><p><img src="/img/remote/1460000038432214" alt="" title=""></p><p>搜索结果:</p><p><img src="/img/remote/1460000038432216" alt="" title=""></p><hr><p>在百度搜索中,其中 <code>site</code> 命令和双引号关键词 <code>" "</code> 这两个命令用得相对较多,也最容易记住。</p><h2>最后</h2><p>看到这里面,是不是又被你发现了新世界?觉得以后还能有 Bug 解决不了的 ? 不可能了!!!</p><p>不知不觉,已经写到第 <strong>11</strong> 期了呢,已经分享了接近 <strong>85</strong> 个好的前端项目了呢,往期精文请看下方仓库,点击很危险,请慎入!</p><blockquote>[前端GitHub]:<a href="https://link.segmentfault.com/?enc=aaL12ZPHdHwY9QPrJ6xmbQ%3D%3D.uEoQG597pzWYt53kU3EcUbk4BcyqHtXvydQAFGqrIA1LntR7z1S9K5A9HXF788J51NpZUAbfkHPWlmZEGp5uSw%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=01a9TjfLelTgM9rU342XRw%3D%3D.RqX5gqWJZ3IyQht%2F3J1CpGCEJDOmZ0Ib0xhBfFnC90rrNkDtxgEBwAlbj7uN4TE3Q%2Ba%2BbpG%2FGwJKm%2BgcMu4ecg%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=07lqrE%2B0tLZdL22ELmBpVQ%3D%3D.HquX1I3irdjPhnadihdhzp1qLRr1G6hA3GpIFwBX5Ict6nDkwotC5%2B1OrML%2BKaSIQNW6W2vRQ55%2BXBVUDCloSg%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!</p><p>可以加超级猫的 wx:<strong>CB834301747</strong> ,一起闲聊前端。</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=zsEM8UrF2m0bsQLubsxUQw%3D%3D.7tlPTi5h5gDpwbw9XjQv%2BlBJYzNgvatYiVdVHqt9J0eHPNM3I5a1tddk1rmvmZ%2FsS6C5elpKMo2bNU%2FUK4QKSA%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li><li><a href="https://link.segmentfault.com/?enc=yUl%2Fw56yDrjwEp%2BIVsZhqw%3D%3D.57guMllI%2FHYpYNME7u1sCzxYhX99a8KobyhgeG5TYJmtWFsi9o9it%2BFkG4oUF2CfIyPDy0zsFHn17Nse62mJjg%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=D9r6sD4LMuBtBFI4474LOQ%3D%3D.fJUcnMeC2RWLSMaWEZ2M2X%2Bqw0nwjMSSVT7WGDRRl7zslKZ26fU5Y4Jmbz30UdfzecVm2fjNn8oUwzcKQBZ9KQ%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=hgeIMdJEvtIFj1dEzwPgoA%3D%3D.BTIoCJ%2BuH6wl29UmaCeccoz6w8ZMW%2B34ZKi94SRPJOJc%2BySEoaX%2FDedNaPfbC%2FyOhRB4xeZ%2FhAVBDB%2FukPfgmg%3D%3D" rel="nofollow">10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了</a></li><li><a href="https://link.segmentfault.com/?enc=Pm5NI8ovLs4VnHGq78Ds7w%3D%3D.ZJTgKdiXPixz7KOyMDiRo76XF6iJhBaMS8scSziiF9Smhs8N%2BDujYxhe8l6%2Fx5UaAGvAJmW1fsh0OODfVqHhTA%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li><li><a href="https://link.segmentfault.com/?enc=wvzVYHV6FTOHfIX4ovW%2B8A%3D%3D.YV%2FUEVmj1eFi5ZouAHYNy7EYDQD%2F4UxNE4E%2FYclj55X4olVY9uxxtf%2B0zDRB%2FdlbI6tV1RsxV0dYsezxwubaVQ%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=Dhz5N88DkOd54U3gTKPeYA%3D%3D.Bs9SQpvD3yLwzr%2FBXRewNHFMWrXiE5K%2FmdvvEelpEMnK1%2Bi7YowUZpl5z58k1syC%2Fv6TS6fessZySP4U%2FNgn4A%3D%3D" rel="nofollow">GitHub 上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=ApMoJdTax5zVVZh3FF%2Fzzw%3D%3D.bF97E5oTRXywjFGMfOtnXgbbtOrFhs8InPvM4pwdW5f%2BlwSWE9IdzynChvxqTQLmx5Bmv1m%2FyE9t2zEG1TeODg%3D%3D" rel="nofollow">GitHub 标星 54K + 2K!这才是程序员写逼格满满的 PPT 的正确姿势!</a></li><li><a href="https://link.segmentfault.com/?enc=DoW%2Bel198AO3L7CJ%2Fzy0wA%3D%3D.61anwI4CoOiKrLXpi2uFjDON2X820o%2FTcu1k4eGJPWkbSGtcqv9qj8H5E8up2apipBTFZNu9o26Ww2Pz2rmMjw%3D%3D" rel="nofollow">全球最火的 WEB 开发学习路线!没有之一!3 天就在 GitHub 收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=c3Ng6DVMfggbB5Xx6IR5uA%3D%3D.U0HPVSmR5APJRCErvRvL2NvowaGuz14wwfC3g77uXT1QeCQl%2Bd5xDw%2BjGfXt3qT8sPHruRt1Utn8Mp%2BcPKtnhQ%3D%3D" rel="nofollow">GitHub 标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul><p>你最想对超级猫说点啥?</p>
GitHub 标星 54K + 2K!这才是程序员写逼格满满的 PPT 的正确姿势!
https://segmentfault.com/a/1190000038407989
2020-12-08T09:44:43+08:00
2020-12-08T09:44:43+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
46
<p><img src="/img/remote/1460000038407994" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=pbkeDFrrCEqwMA%2FmUwH5%2BQ%3D%3D.7nnOBIOIvBr9lxcWNPE2b9fM6UWx5ecngknGFuAViVLzZBcuiJ1hA2Ykj1UJYbs7teDa6MWorNPuhsf7%2BW6pyQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,收集、整理、推荐业界高品质前端资源合集,优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术,抹平你的前端信息不对称。</blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=dzC3qTUSG0y3DcWbbirTRQ%3D%3D.B7lwTL5hvyjIt7jNh06WpqA3YhoIvY7s4a5lbXOn96NdRB4GstYZGbw4AY0gCr%2FzByBSLEMBs3DG%2FdfBW8DcTQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p>以下为【前端GitHub】的第 10 期精华内容。</p><p><img src="/img/remote/1460000038374609" alt="" title=""></p><hr><p>相信大家都有过 PPT 分享的经历,超级猫一直觉得用 powerpoint 写幻灯片太麻烦,效率太低了。</p><p>作为程序员,特别是前端,有没有更简结与高逼格幻灯片实现方式呢?肯定是有的啊!</p><p>今天给大家带来的是使用 Markdown 和 HTML 写逼格满满的 PPT 的正确姿势!</p><h2>reveal-md</h2><p>reveal-md 是使用 Markdown 来做 PPT 展示的开源项目,标星 2.1K 。</p><h3>安装</h3><pre><code>npm install -g reveal-md</code></pre><h3>使用</h3><pre><code>reveal-md path/demo.md</code></pre><p>其中,<code>path/demo.md</code> 是你的 Markdown 文件地址,可以使用本地地址,也可以使用 URL。</p><p>使用如下的 Markdown 文件 demo.md :</p><pre><code>## 前端GitHub
* 大前端集合
* GitHub 优秀开源项目推荐
---
## 内容
> 专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。
涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等!
---
## 前端资源合集
* 收集、整理、推荐业界高品质前端资源合集
* 优秀的工具、库、好的教程
* 了解业界更优秀的代码、工具、业界最新的技术</code></pre><p>在终端运行命令:<code>reveal-md ./demo.md</code> </p><p>效果如图:</p><p><img src="/img/remote/1460000038407992" alt="" title=""></p><h3>主题使用</h3><p>包含的主题有以下几种:</p><ul><li>beige</li><li>black</li><li>blood</li><li>league</li><li>moon</li><li>night</li><li>serif</li><li>simple</li><li>sky</li><li>solarized</li><li>white</li></ul><p>比如指定 league 主题使用:</p><pre><code>reveal-md path/demo.md --theme league</code></pre><p>效果如图:</p><p><img src="/img/remote/1460000038407996" alt="" title=""></p><p>还可以指定自己写的主题,也就是自己写的 css 样式,使用自定义主题后,会覆盖默认的主题。</p><p>比如自定义文件位于 <code>./theme/my-custom.css</code> 中时,指定对应的路径即可。</p><pre><code>reveal-md slides.md --theme theme/my-custom.css</code></pre><p>项目地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=Lgnzx0cyHebmcpcXbyFxRQ%3D%3D.IjjnH7AHYB3FK4tYpRQO576EaIhCbxjuCS3l4fDNVWplo9%2FgMf8Fml%2BPUPv0rhro" rel="nofollow">https://github.com/webpro/rev...</a></blockquote><h2>reveal.js</h2><p><img src="/img/remote/1460000038407997" alt="" title=""></p><p>这是一个基于 CSS 的 3D 幻灯片工具,标星 54K。</p><p>Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本,并可以加入各种 html 语言支持的交互动画,然后由 Pandoc 直接转化成 PPT。</p><p>reveal.js 是一个开放源代码 HTML 表示框架。 它使使用 Web 浏览器的任何人都可以免费创建功能齐全且美观的演示文稿。</p><p>该框架具有广泛的功能,包括嵌套幻灯片,Markdown 支持,自动动画,PDF 导出,演讲者注释,LaTeX 支持,语法突出显示的代码等等。</p><p>reveal.js 有一下几个特点:</p><ul><li>支持标签来区分每一页幻灯片</li><li>可以使用 markdown 来写内容</li><li>支持 pdf 的导出</li><li>支持演说注释</li><li>提供 JavaScript API 来控制页面</li><li>提供了多个默认主题和切换方式</li><li>自适应移动端和 PC 端</li></ul><h3>使用</h3><p>使用分为 基本使用、完整安装、npm 方式安装 3 种方式。</p><h4>基本使用</h4><ol><li>下载最新的 manifest.js版本 <a href="https://link.segmentfault.com/?enc=idOIMjrlYCeSOSx4AeEmBw%3D%3D.Eijt0wGKgim8PuTGhJd1Fr5iDLIfx3Y5EPpE1D46hEPOzjX3xf%2BKMJS9WZDcIPeJflzwEQNhGlhr8hgcwRpwEQ%3D%3D" rel="nofollow">https://github.com/hakimel/reveal.js/archive/master.zip</a></li><li>解压缩并将 index.html 中的示例内容替换为您自己的内容</li><li>在浏览器中打开 index.html 进行查看</li></ol><h3>完整安装</h3><p>安装:</p><pre><code>git clone https://github.com/hakimel/reveal.js.git</code></pre><pre><code>cd reveal.js && npm install</code></pre><pre><code>npm start</code></pre><p>打开 <code>http://localhost:8000</code> 查看您的演示文稿。</p><h3>npm 方式安装</h3><pre><code>npm install reveal.js
# or
yarn add reveal.js</code></pre><p>直接导入使用</p><pre><code>import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
let deck = new Reveal({
plugins: [ Markdown ]
})
deck.initialize();</code></pre><p>还需要添加 reveal.js 样式 和 <a href="https://link.segmentfault.com/?enc=Zo1I60luMZoqxpflBNg0ow%3D%3D.jvSoGwd1hp5I%2BBtFZ%2BwVIu4H67QZHx7dl2QosQynnm0%3D" rel="nofollow">主题</a>.</p><pre><code><link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css"></code></pre><h3>使用</h3><p>幻灯片的内容需要包含在 <code><div class="reveal"> <div class="slides"></code> 的标签中。</p><p>一个 <code>section</code> 是一页幻灯片。当 <code>section</code> 包含在 <code>section</code> 中时,是一个纵向的幻灯片。</p><p>怎么理解呢? 可以这样理解:横向的幻灯片代表一章,纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的,而纵向的幻灯片是上下切换的。</p><p>For example:</p><pre><code><div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div></code></pre><h3>html 实现</h3><p><strong>标题和正文</strong></p><p><code>section</code> 中的内容就是幻灯片的内容,你可以使用 <code>h2</code> 标签标示 <code>title</code>,<code>p</code> 表示内容。需要红色的字体可以直接设置 <code>style</code> 的 <code>color</code> 为 <code>red</code>。</p><p>当某一页需要特殊背景色,可以使用 <code>data-background</code> 在 <code>section</code> 上设置, <code>data-background-transition</code> 表示背景的过渡效果。</p><p>For example:</p><pre><code><section data-background-transition="zoom" data-background="#dddddd"></code></pre><p>如果需要正文一段一段出现。可以使用 <code>fragment</code>。</p><p>For Example:</p><pre><code><p class="fragment"></p></code></pre><p><strong>代码</strong></p><p>reveal.js 使用 <code>highlight.js</code> 来支持代码高亮。可以直接写 <code>code</code> 标签来实现, <code>data-trim</code> 表示去除多余的空格。</p><p>For Example:</p><pre><code><pre><code data-trim>
console.log('hello reveal.js!');
</code></pre></code></pre><p><strong>注释</strong></p><p>在演说时,会用到注释,对于注释,可以通过 <code><aside class="notes"></code> 来实现。</p><p>For Example:</p><pre><code><aside class="notes">
这里是注释。
</aside></code></pre><p>在幻灯片页面,按下 s 键,就可以调出注释页面,注释页面包含了当前幻灯片,下一章幻灯片,注释,以及幻灯片播放时间。</p><h3>markdown 实现</h3><p>reveal.js 不仅支持 <code>html</code> 表示来实现内容, 还可以通过 <code>markdown</code> 来实现内容。使用 <code>markdown</code> 实现内容时,需要对 <code>section</code> 标示添加 <code>data-markdown</code> 属性,然后将 <code>markdown</code> 内容写到一个 <code>text/template</code> 脚本中。</p><p>For Example:</p><pre><code><section data-markdown>
<script type="text/template">
## Page title
A paragraph with some text and a [link](http://hakim.se).
</script>
</section>
背景色,fragment功能的实现,可以通过注释来实现。For Example:
<section data-markdown>
<script type="text/template">
<!-- .slide: data-background="#ff0000" -->
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
</script>
</section></code></pre><p><strong>外置 md 文件</strong></p><p>reveal.js 可以引用一个外置的 <code>markdown</code> 文件来解析。</p><p>For Example:</p><pre><code><section data-markdown="example.md"
data-separator="^\n\n\n"
data-separator-vertical="^\n\n"
data-separator-notes="^Note:"
data-charset="iso-8859-15">
</section></code></pre><p><strong>分页实现</strong></p><p>一个 markdown 文件中可以连续包含多个章内容。可以在 <code>section</code> 中 通过属性 <code>data-separator, data-separator-vertical</code> 来划分章节。</p><p>For Example:</p><pre><code><section data-separator="---" data-separator-vertical="--" >
<script type="text/template">
# 主题1
- 主题1-内容1
- 主题1-内容2
--
## 主题1-内容1
内容1-细节1
--
## 主题1-内容2
内容1-细节2
---
# 主题2
</script>
</section></code></pre><p><strong>注释</strong></p><p>对 section 添加 <code>data-separator-notes="^Note:"</code> 属性,就可以指定 <code>Note:</code> 后面的内容为当前幻灯片的注释。</p><p>For Example:</p><pre><code># Title
## Sub-title
Here is some content...
Note:
This will only display in the notes window.</code></pre><h3>导出 PDF</h3><ul><li>在浏览器打开文件的 url 上添加 <code>print-pdf</code> 即可以,比如: <code>http://localhost:8000/demo.html/?print-pdf</code>,你可以测试一下官方的 <a href="https://link.segmentfault.com/?enc=UHVxPmPgLrTqn2AgUqVAmA%3D%3D.luQPcerpUDlwgixvFOZWnWr2mlsWHuONF4E8uGV3CWjFt5Ow4bvPayTWGt2tvY%2Fk" rel="nofollow">revealjs.com/demo?print-pdf</a></li><li>打开浏览器的保存为 pdf 的弹框,快捷键为:CTRL/CMD + P</li><li>边距设置为 无</li><li>勾上背景图形</li><li>点击 保存 即可</li></ul><p><img src="/img/remote/1460000038407993" alt="" title=""></p><h3>多主题</h3><p>reveal.js 提供了多种样式。可以通过引用不同的主题来实现。具体主题查看 <code>reveal.js/css/theme</code> 下的 <code>css</code> 文件。</p><h3>总结</h3><p>用 <code>reveal.js</code> 来实现幻灯片,可以只关注内容,忽略各种切换效果。</p><p>而且可以使用 <code>markdown</code> 来实现,大大提高了编写效率。对于最后生成的 <code>html</code> 文件,可以部署到服务器,这样只需要网络就可以进行分享,不需要使用 U 盘拷来拷去了。</p><blockquote><a href="https://link.segmentfault.com/?enc=G3di4opxxNrWVlJ1RTxSCw%3D%3D.WxyZTwog6Gx7XhD7Iqdoveo7R2H2njvi7iPwur9N3uFBhf1hRbhkqgkddTdzgapn" rel="nofollow">https://github.com/hakimel/re...</a></blockquote><p><img src="/img/remote/1460000038407995" alt="" title=""></p><h2>最后</h2><p>这两个神级项目的功能远远不止这么点,还有多少呢?</p><p>看看 Github 上的 README.md 你就知道了,在现在这样一个大前端的时代,有什么是网页不能完成的呢?</p><p>好了,看到这里,下次演示 PPT 时,你应该就能在众人面前装逼了 😉</p><p>好了啦,【前端GitHub】的第 10 期内容已经讲完了啦~</p><p>不知不觉,已经写到第 <strong>10</strong> 期了呢,已经分享了接近 <strong>80</strong> 个好的前端项目了呢,往期精文请看下方仓库,点击很危险,请慎入!</p><blockquote>[前端GitHub]:<a href="https://link.segmentfault.com/?enc=3MCMUJHHetsPI1R%2Fq2YpyA%3D%3D.fVmsbyUT%2FDACNWOzYbZMtkN8GG6j89uJiCGszWeiCrm9G6ojPaQx7Po1eVhon0zPA9cyqwbhWHoOlnytCkeyqg%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=GZ4jK5WJW3dq3aF6%2BpH4hg%3D%3D.FnT7BLp3flcko%2BBPn%2FAiDXrVJeJW2twMnI7yxh%2FVyRIzRdSm%2Fvx7cD0WMUJebFMsEqH76wLmX%2F%2FcX9Cl6r9p0A%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=8Ju%2BzumtqrxXW5Q0fKc4Mw%3D%3D.VIvO%2B9igT6lVRf5d8C3uOe5vly8X9QMBQDkW%2BnG9dfmVZlvi%2BVKCiMLhdKqUdhxfTAJy6PxMNHwAfo%2Fx4uVLuA%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 wx:<strong>CB834301747</strong> ,一起闲聊前端。</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=hazMqeN5wZ2irhhIriQthQ%3D%3D.BZb2IbF4Lncjq5LQ2Un9lFqLjY89XWVWZ3TO4km7I%2B%2FgLJvxT9PdxEAi0%2Bqblsd%2BUS%2BXRKGpDIUVJIGzdM8SmQ%3D%3D" rel="nofollow">11 个超火的前端必备在线工具,终于有时间上班摸鱼了</a></li><li><a href="https://link.segmentfault.com/?enc=4aLCwWgMAA%2FmT5Tv2TOIOA%3D%3D.950PNklDISyIziH7jAoG8rLgSbr8l0hHL62pxm%2FCKYWH2DykE3bndXfQ1NcrNXb7%2FGD%2B1Z2uO4JBzYOs%2FveYhA%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=PgnRwQl1z5vMI3YSpp4zNA%3D%3D.8ds7%2B%2BHJ2jG9bxjz8RGIdJ0CDILBvG%2FIsuzQbIJAFv6LTNwQ2W0SKs5TM9xzBJnb6C9lTQqkE5Ii6XP5hTYW8w%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=gYNqgy2orC0WNDUoLLPazw%3D%3D.SXiPtiG%2BNdyUpV8JPeO0uONJlC3OLOOniVAeeD2ynySa79R5AQd8QtJ4%2FUXSZEFeWYX0NG%2BRA%2FpXufzzj7uuCw%3D%3D" rel="nofollow">10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了</a></li><li><a href="https://link.segmentfault.com/?enc=1z1NRsrY%2BegyvrtvCLA9jw%3D%3D.HOUN1OwOGaXvRAz1AmrqkSY%2BKtfuvJ4MPMqek5R2TR3mvJQL3Rp8buySnq5vKn2p2zrUacxMbAVldUSYML9tiA%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li><li><a href="https://link.segmentfault.com/?enc=5nOrDOMq3opeDd6R6kwfeA%3D%3D.WLVo94hSklc2KzkyiviPACuf9zrfCpUNeBOh3KTOQ5NFvXNgcXgstIW2EXaqry1yJTO9ioGsjLt1%2F%2F5QKSB7Sg%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=sEhYsVeAXfkhMJu0IWGcoA%3D%3D.5RZJzcXJ0jTYmf6evmjh09wmsSKKZW%2BJ3o9xSGKmGRyG6m11hz03uYnT4458oBRI%2FPIWEZaYUJtTDJ9EXMcaVA%3D%3D" rel="nofollow">GitHub 上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=ueQUj9H1RhvmM2X6USU88w%3D%3D.y0lRM3TlEA5EQKZHSZvei53EsFcrqDDb%2FvVFD8TgKw4pbdh1Cx8t5yKIle3cbjlZnh7JUDeM%2BwFpeCxtFWWLgw%3D%3D" rel="nofollow">全球最火的 WEB 开发学习路线!没有之一!3 天就在 GitHub 收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=GctwuPrpIqR99t2X8nl%2FwA%3D%3D.juhFoCtWoP%2BmAJqvBGruy02GdmfIYGNpiidDURzR%2BjxPkoWNNWIx6tVrbcdp9yT2hp44YvUfCTvXKLBie9I2fg%3D%3D" rel="nofollow">GitHub 标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!</p>
白嫖 11 个超火的前端必备在线工具,终于有时间上班摸鱼了
https://segmentfault.com/a/1190000038374601
2020-12-04T08:13:56+08:00
2020-12-04T08:13:56+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
34
<p><img src="/img/remote/1460000038374605" alt="" title=""></p><p>大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>前言</h2><p>猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目,在此分享给大家。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=wNfhxVqpkjA5t%2F2fahEpQw%3D%3D.g%2F68kfjRpFd8LcsHh6qfttlwhTW5QIivJ8ju7vVIt8%2Fh0WmPCd0E36in1WNvEnJtYJJiNoj6G4UCNQVnlmkMTQ%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,收集、整理、推荐业界高品质前端资源合集,优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术,抹平你的前端信息不对称。</blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=G%2BLjlxD2V17E5SUzyL8MYA%3D%3D.CY6HIpNjM5vv7SCIF3N%2Bgf4gSfPFuaghyBVDfgzd7hzA8OZgWqj74jK1GVyEbm4AlCLUkGfQWycnQkajN%2FQnMw%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><img src="/img/remote/1460000038374609" alt="" title=""></p><hr><p>以下为【前端GitHub】的第 9 期精华内容。</p><p>这几天简单整理了一下自己日常经常使用的工具网站,把好用的分享给小伙伴们!</p><p>所以今天给大家带来的是 <strong>10 个 GitHub 上超火的前端实用在线工具</strong>,终于有时间上班摸鱼了,嘻嘻~</p><p>喵~ 喵~ 喵~ 正文要开始了,上车坐稳扶好了~</p><p><img src="/img/remote/1460000038374614" alt="" title=""></p><h2>1. LightHouse</h2><p>LightHouse 是一个开源的自动化工具,用于改进网络应用的质量。 </p><p>可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 </p><p>当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。</p><p>让开发人员根据生成的页面性能的报告,来进行网站优化和完善,提高用户体验。</p><p>可以参考失败的测试,看看可以采取哪些措施来改进应用。</p><p><img src="/img/remote/1460000038374604" alt="" title=""></p><p>在里面你可以看到它给你各个方面的建议,比如图片、css、js 这些文件的处理,还有 html 里面标签的使用,缓存处理等建议,可以根据这些来对网站进行优化。</p><blockquote><a href="https://link.segmentfault.com/?enc=20%2BbL6r0BmRoMiy4hA0Qbg%3D%3D.U5CRINbmt3yR7h6GmeWggCA8hV%2Bd6Z7o7JT6M%2BKVQcVwv3w0KoRpRKOohPvEzuJc" rel="nofollow">https://github.com/GoogleChro...</a></blockquote><h2>2. Can I Use</h2><p><img src="/img/remote/1460000038374606" alt="" title=""></p><p>这个是一个针对前端开发人员定制的一个查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站,可以很好的保证网页的浏览器兼容性。</p><p>有了这个工具可以快速的了解到代码在各个浏览器钟的效果。</p><p>比如查询 <code>transform</code> 的浏览器支持情况:</p><p><img src="/img/remote/1460000038374608" alt="" title=""></p><p>再比如 <code>proxy</code> 的浏览器支持情况:</p><p><img src="/img/remote/1460000038374611" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=Bvrl6mBSeBr9FnHQad1ZbQ%3D%3D.09qwMjXSbkcnccbpFSWNtJHrneMP%2BlG7M2VQHBl2IBA%3D" rel="nofollow">https://caniuse.com/</a></blockquote><h2>3. Carbon</h2><p><img src="/img/remote/1460000038374612" alt="" title=""></p><p>Carbon 是一个在线的代码转图片工具。</p><p>相信小伙伴们见过很多人的博客上面都有类似这种代码图片吧? </p><p><img src="/img/remote/1460000038374607" alt="" title=""></p><p>Carbon 可以很容易的为你的代码创建漂亮的图片。</p><p><strong>特性</strong></p><ul><li>GitHub gist 导入. 只需要在 url 后面加上 github gist id 就可以导入</li><li>定制化. 可定制图片的语法主题,窗口样式等</li><li>所见即分享. 点下鼠标就可以分享到推特上面</li></ul><p>不过有个缺点就是国内网络访问时,复制图片很慢。</p><blockquote><a href="https://link.segmentfault.com/?enc=7zP5%2BHM8ObKzo1KnModRYQ%3D%3D.qObpAuAUm%2B%2B8Cl2FpXbl6wnYuXcHDsdbOxFn6v4CMCc%3D" rel="nofollow">https://carbon.now.sh/</a></blockquote><h2>4. ios font</h2><p><img src="/img/remote/1460000038374615" alt="" title=""></p><p>IOS 字体支持查询和 IOS 系统自带字体查询。</p><blockquote><a href="https://link.segmentfault.com/?enc=Yb67HW83gkJoof5f1Oo6MA%3D%3D.n6OFnc0K8E1lCPKzQLLpQWGzE4WbctiTR6NkTwxFIVA%3D" rel="nofollow">http://iosfonts.com/</a></blockquote><h2>5. web 安全色查询</h2><p><img src="/img/remote/1460000038374610" alt="" title=""></p><p>web color 为了尽量让用户看到色彩相同的网页,请尽量使用 216 色的 web 安全色。</p><blockquote><a href="https://link.segmentfault.com/?enc=bDNX8bwJdKvV5a%2BOKeh%2B4A%3D%3D.2upBHDbYDtKqJmglqTjh9WVMQHKkPPYSx0UqkOZ%2BQ9WEGAHblI57ruu4mjliqfH9" rel="nofollow">https://www.bootcss.com/p/web...</a></blockquote><h2>6. TinyPNG</h2><p><img src="/img/remote/1460000038374613" alt="" title=""></p><p>PNG/JPG 图片在线压缩利器,智能 PNG 和 JPEG 图片压缩。</p><p>TinyPNG 使用智能有损压缩技术将您的 PNG 文件的文件大小降低。 通过选择性的减少图片中的颜色,只需要很少的字节数就能保存数据。 对视觉的影响几乎不可见,但是在文件大小上有非常大的差别。</p><blockquote><a href="https://link.segmentfault.com/?enc=nac11FsyMo%2FUotbKRlNO7Q%3D%3D.fEkWUFFsHQyXT6CzqrBYPZ0HtFDuCCaT6YlOskqNYoU%3D" rel="nofollow">https://tinypng.com/</a></blockquote><h2>7. 二维码生成器</h2><p><img src="/img/remote/1460000038374617" alt="" title=""></p><p>草料二维码生成器,相信很多人都用过。</p><p>常用的工具也很多:</p><p><img src="/img/remote/1460000038374616" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=aESpGbmihVwKBbAa9uFY8Q%3D%3D.UMdbscp2p1983flXn1sAbQ%3D%3D" rel="nofollow">https://cli.im/</a></blockquote><h2>8. Shape Divider</h2><p><img src="/img/remote/1460000038374618" alt="" title=""></p><p>定制各种形状的网站分区 SVG 的工具,调整好了自己想要的形状之后,可以一键复制和下载。</p><p><img src="/img/remote/1460000038374619" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=LjBTTsdkJu8zvi3JxllyFQ%3D%3D.yXte0CD5zIlwIkFVhHBzf%2BzbhVF2FAiBk8hBGn%2FnE3g%3D" rel="nofollow">https://www.shapedivider.app/</a></blockquote><h2>9. json 格式化</h2><p><img src="/img/remote/1460000038374621" alt="" title=""></p><p>这是一个 json 在线解析的网站,是我最常使用的一个网站。</p><p>功能包括了:json 在线解析,json 格式化,json 格式验证,json 转 xml,xml 转 json,json 压缩,json 转义,js 混淆加密,JSON 转实体,json 在线,JSON 校验。</p><blockquote><a href="https://link.segmentfault.com/?enc=u4zFufcD4vfa3dUaDDTnHA%3D%3D.E83fKZL1cWavlrkfFyuaxg%3D%3D" rel="nofollow">http://json.cn/</a></blockquote><h2>10. sojson</h2><p><img src="/img/remote/1460000038374620" alt="" title=""></p><p>这是一个功能多到发指的网站!</p><p>比如 前端WEB工具 就包含了以下的工具:</p><p><img src="/img/remote/1460000038374622" alt="" title=""></p><p>而且还有更多:</p><ul><li>JSON 在线工具:JSON 在线解析、JSON 格式化、JSON 对比、JSON 压缩</li><li>加密/解密:在线加密/解密 | JS 加密 | JS 解密 | AES | DES | MD5 | Base64</li><li>压缩/格式化:在线压缩/格式化/美化 | JSON | JS | HTML | Java | SQL</li><li>开发文档:开发文档/API文档</li><li>前端 WEB 工具/前端工具</li><li>在线转换:在线转换 | 单位转换 | 数据转换 | 格式转换</li><li>二维码:二维码生成 | 二维码解析 | 动态二维码 | 二维码美化</li><li>正则表达式:正则表达式 | 正则表达式测试工具 | 正则表达式教程</li><li>站长工具:备案查询 | SEO 检测 | HTTPS 检测 | 微信防封检测 | DNS 检测 | Robots 生成</li><li>HTTP工具:HTTP 模拟请求 | HTTP 测试工具 | HTTP 协议 | GET/POST</li><li>房贷计算工具 房贷计算器 | 最新房贷计算器 | 2020房贷利率</li><li>生活工具:时间 | 万年历 | 放假 | 老黄历 | 测网速 | 天气</li><li>修改图片:在线修改图片 | 图片尺寸修改 | 图片压缩 | 图片美化 | 图片批量处理 | 图片水印</li><li>JS 加密 / JS 解密:JS 解密 | JS 加密 | JS 美化 | JS 格式化 | JS 混淆</li></ul><blockquote><a href="https://link.segmentfault.com/?enc=Z7QFNJKSPhgMlxkeOy%2BNmw%3D%3D.ndo1JvKcK6rLJyAVqf%2B7qPnTKMAcVKHZLrs%2B7lq5WuY%3D" rel="nofollow">https://www.sojson.com/</a></blockquote><h2>11. 站长工具</h2><p><img src="/img/remote/1460000038374624" alt="" title=""></p><p>站长工具是站长的必备工具。</p><p>经常上站长工具可以了解 SEO 数据变化。</p><p>还可以检测网站死链接、蜘蛛访问、HTML格式检测、网站速度测试、友情链接检查、网站域名IP查询。</p><p>SEO 相关类的有 WHOIS 查询,DNS 查询过期域名查询,NsLookup 查询,域名删除时间备案查询删除域名归档备案批量查询等,除此之外,还有 IP 类,百度相关,测速/监控,网页相关,网站优化人员必备。</p><blockquote><a href="https://link.segmentfault.com/?enc=TL3wcsgI0z4%2Fh1xZRJyUMw%3D%3D.6jIHyU6XXB4eakgYDPB3v0jS3R%2FR%2FleuIaE4QHLg7s4%3D" rel="nofollow">https://tool.chinaz.com/</a></blockquote><h2>最后</h2><p>最近加班有点严重,经常都是晚上 11 点多才下班,所以文章更新慢了很多。</p><p>因为文章都是在晚上肝出来的,一篇文章要肝几个晚上才行,肝到这里时,已经过了零晨了,唉。</p><p><strong>同是打工猫,生活不易啊!</strong></p><p>鲁迅在《狂人日记》里曾说过:“<code>能打败我的,只有女人和酒精,而不是加班</code>”</p><p>每当身处黑暗之时,这句话总能让我看到光。</p><p>最后就以一张很治愈的图片来治愈一下疲惫的心灵吧。</p><p><img src="/img/remote/1460000038374623" alt="" title=""></p><p>好了啦,【前端GitHub】的第 9 期内容已经讲完了啦。</p><p>下方仓库很危险,请慎入!</p><blockquote>原文地址:<a href="https://link.segmentfault.com/?enc=Ry4aTeJVsTMFt5PCFrd9Bw%3D%3D.sQSTu1mZFt6Zikv1t2S5CVMBSCPCVVclbZ%2By7x08lbiNjrDLY6CAzc2CH1457Wnnf6QIoPDx%2F2ktDJotGWAYRQ%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=rZTfvXpjUWHeaBbeUXAsHQ%3D%3D.bJFP93y6kHEQRA6qVotkEdK5cpHDVeAlbAci%2FH4etoZZETeW%2BMdvB2e6Oyc6jvHxqy2ykQpF4PluCw5%2BKKkZGg%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=x2N0K3L50n1CjxFoE3maXQ%3D%3D.WkbV1OJUrYDbCZDGNBGqA7Yr58G5iEUeaVDvLdPc2iWgL4CXvg09Xp3kOSSUkKmT5LkN8hLAdy%2BbOksSnXEZIw%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=QV8hCIuZ9cHlXD7NiOjPRA%3D%3D.Wxzdh%2F5pzKmIi1ZDhr59cA%2FuckArEe%2B8lyNdqERklQ4hXmLoTM%2FVkpR3U3X9%2FIKYKW8LP79Q2%2BQNGFJEbHKq3Q%3D%3D" rel="nofollow">如何在 GitHub 上发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=k%2BiOfX07A%2F3P7FFAxCi3HA%3D%3D.UjZ%2FOlNyXuGbylHbyV2U6ewSv%2BngAM4rJIoKr9RrVohAa%2BvLQoDYGJ6X0V0EpLtyY37Pi6jB7m9tUvbp3Gzrgg%3D%3D" rel="nofollow">如何使用 GitHub 进行精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 wx:<strong>CB834301747</strong> ,一起闲聊 前端GitHub。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “<strong>电子书</strong>” 即可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=ohxgZbod9VnEGEajT94lqw%3D%3D.rJXElXeJy0dg%2BFaorpjeTG48L%2FCJ0TMGLtJzgskyfM3vswy6MWiJCbIfNZThiz8qB%2BCNObCzJHa6flUjkfzFFw%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=hqsMdvyHTd3H3isWdGFvmw%3D%3D.iIzsMRv1x5PhT5p0PQ9i8K1C%2F%2F9AxOMimH1gETe4dXsDjIAcG8j99eb0E8oZNbFqBk%2FW6cgZYXhGBVB0x1Byvg%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=NE5t8n0WsKT8A8r%2FT6nWew%3D%3D.EDJVwJQgyApv%2F58L8NlL1hOE5zgNYOd%2Bt8yPPvh8%2Fql0mxsqqhQFnWpDBBO5%2BiK%2FNb%2BLDGCzlumNSJB6u2Fj8w%3D%3D" rel="nofollow">10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了</a></li><li><a href="https://link.segmentfault.com/?enc=lV%2BQWuiLhWv4BIpuvIItkg%3D%3D.uomH4CT7QGl90AK1bYFMuEm3pjewkHQ6Z1knzPjpG0OWpSAuD%2BlY%2FjNkNaF%2FVfc9x%2BaejBaiXZ5gR1qCS8n1Ig%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li><li><a href="https://link.segmentfault.com/?enc=4jJFnK1pY%2FQGRdxq%2FfEoXA%3D%3D.lDw8QP4SIcgwfpmoc79dCi4GHUg9%2Bje3IGTnzmboNYmGbm7sr0OooXah4ocTXS2Dqn8PRoxZzQ%2BPijBxjFtSig%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=RRkFJHQmA8gpeY8GZcRBrA%3D%3D.czIQsdPUR%2BMvqJRFR0dxosU9%2BbaQ7xxgOi0MKUiv4loHat9mCCO4jAzdelMnuZM01qqEbe6B1qr%2FCklj5j16MA%3D%3D" rel="nofollow">GitHub 上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=nC1QLumI6YSuriRplQByFA%3D%3D.GufOVaOdG7uNUILdUa2Y9CgbyrPtWJzpoM73Ea5mp1Nos9%2FBFGNKKFVtRyDeBeYOJTNhH%2B1axY9m21bBTWRb3w%3D%3D" rel="nofollow">全球最火的 WEB 开发学习路线!没有之一!3 天就在 GitHub 收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=yn%2Fj%2FBpXURAniU1cQo4GIg%3D%3D.vOnpRKXGXy6hVClZxGN4vTO3L3Wo7rX7sY%2F37S%2BzNnvbb5IqRtIq7fc0FXZfJlJQoYcFE%2B2JBmHAisOFpJAU9w%3D%3D" rel="nofollow">GitHub 标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul>
10 个 GitHub 上超火和超好看的管理后台模版,又能愉快的上班摸鱼了
https://segmentfault.com/a/1190000038323430
2020-11-30T08:46:02+08:00
2020-11-30T08:46:02+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
64
<p><img src="/img/remote/1460000038323434" alt="" title=""></p><p>大家好,我是你们的 超级猫,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p><img src="/img/remote/1460000038323436" alt="" title=""></p><h2>前言</h2><p>一般人没事的时候刷刷朋友圈、微博、电视剧、知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目。</p><p>久而久之,这差距就越来越大,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。</p><p>初步前端与高级前端之间,最大的差距可能就是信息差造成的。</p><p>超级猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。</p><p>从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。</p><p>看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。</p><p>因此也收藏了不少好的开源项目,在此推荐给大家,每周会有一到三篇精华文章推送。</p><p>希望你在浏览、学习了超级猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=OYXTg7jehBMbedCb87lG4g%3D%3D.FjltArdnpHmNlbskkj%2B89kiBu0z%2FpgV8hOfsPb3HJp1PmrN%2B1JAOnDqhVbMH3gvbFsWnLqUk5lJn7efy%2FYsBOA%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。</blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=IUfCa3BhRDJW6vzUOosCtw%3D%3D.ICJSHUY9uVSgpvtvP3JcgqSmvaTZl5mXIpoBQRGgdmsnJNefQY1%2BWVOU7a6G%2BZ5j8wU6dC4BwMj56Rezq3vBFg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> </p><p><img src="/img/remote/1460000038323437" alt="" title=""></p><hr><p>以下为【前端GitHub】的第 8 期精华内容。</p><p>今天给大家带来的是 <strong>GitHub 上 10 个超火和超好看管理后台模版</strong>,希望你在这里面找到写 省时省力的模版!</p><p>喵~ 喵~ 喵~ 正文开始了,上车坐稳扶好了~</p><hr><p>Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套管理后台模版并不容易,幸运的是有很多开源免费的管理后台模版可以给开发者使用。</p><p>那么有哪些优秀的开源免费的管理后台模版呢?</p><p>我在 GitHub 上收集了一些优秀的管理后台模版,而且是还在不断更新和维护的项目,并总结得出 Top 10。 </p><p><img src="/img/remote/1460000038323435" alt="" title=""></p><h2>1. vue-Element-Admin</h2><p>vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui 实现。</p><p>它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。</p><p>同时配套了系列教程文章,如何从零构建后一个完整的后台项目。</p><ul><li>手摸手,带你用 vue 撸后台 系列一(基础篇)</li><li>手摸手,带你用 vue 撸后台 系列二(登录权限篇)</li><li>手摸手,带你用 vue 撸后台 系列三 (实战篇)</li><li>手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)</li><li>手摸手,带你用 vue 撸后台 系列五(v4.0新版本)</li><li>手摸手,带你封装一个 vue component</li><li>手摸手,带你优雅的使用 icon</li><li>手摸手,带你用合理的姿势使用 webpack4(上)</li><li>手摸手,带你用合理的姿势使用 webpack4(下)</li></ul><p>该项目还在一直维护中。</p><p>而且也是配有使用文档的,很不错。</p><p>Github Star 数 62.2K, Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=lQGrBkJB0d3itcXg4ALeBA%3D%3D.d60qQXrO7Mqpv7QYExhk8yQRO9xA%2BoMqqL62YVUBOxozBYW47%2B%2BRz%2F1R2HiI9E2o" rel="nofollow">https://github.com/PanJiaChen...</a></blockquote><p><img src="/img/remote/1460000038323442" alt="" title=""></p><h2>2. iview-admin</h2><p>iView Admin 是基于 Vue.js,搭配使用 <a href="https://link.segmentfault.com/?enc=eCl7%2FzpU4iFxJHLIc5UQcg%3D%3D.OFhwBF5ZBX87duK57N7p6Q4JgHVCJDDhuB%2BbUTSMN14%3D" rel="nofollow">iView UI</a> 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。</p><p>iView Admin 遵守 iView 设计和开发约定,风格统一,设计考究,并且更多功能在不停开发中。</p><p>不过该项目已经一年多没有更新维护了,估计是在等出了配合 Vue3 相关的 iView UI 库再更新了吧。</p><p>而且也是配有使用文档的,很不错。</p><p>Github Star 数 15.3K,Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=KenuxXzJV5tmVYy97%2FhNzw%3D%3D.w8jvLtKDEvwsfeEmLv2iO03VKpwXGT9QhcJ4YH44%2BQoJQfbMbafLluezzh6V9Q7a" rel="nofollow">https://github.com/iview/ivie...</a></blockquote><p><img src="/img/remote/1460000038323433" alt="" title=""></p><h2>3. vue-admin-template</h2><p><img src="/img/remote/1460000038323439" alt="" title=""></p><p>这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。</p><p>目前版本为 <code>v4.0+</code> 基于 <code>vue-cli</code> 进行构建,若你想使用旧版本,可以切换分支到 <a href="https://link.segmentfault.com/?enc=uuK1yw%2BhwQyhJ5l6euVziw%3D%3D.u8nPjlQ1WffaimpGECKoVU3PgUf8oK8fB4C20p42WaW%2FRIe%2FI1AAvRYYxZ7k1l0GatI1Tsl%2Fp%2BjXRFHLC6NvPyWzQMDm2C986WuiWuzSrpA%3D" rel="nofollow">tag/3.11.0</a>,它不依赖 <code>vue-cli</code>。</p><p>极简版,就是 vue-Element-Admin 的简化版,功能简单一点,方便快速开发用的。</p><p>而且也是配有使用文档的,很不错。</p><p>Github Star 数 12K,Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=IcVYNBCMt%2FUPHu%2BlOsQ5Gg%3D%3D.20s%2Fr5sSpUwd1aioM8ho12i194s%2BGmYr%2BQEsvI7LCH82diXHwtn23poHaCQpIa%2F5YVE3y6UtRQNEQV1zqJME2g%3D%3D" rel="nofollow">https://github.com/PanJiaChen...</a></blockquote><h2>4. ant-design-pro</h2><p>开箱即用的中台前端 / 设计解决方案。</p><p><img src="/img/remote/1460000038323438" alt="" title=""></p><p>Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。</p><p>随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。</p><p>Ant Design Pro 在力求提供开箱即用的开发体验,为此我们提供完整的脚手架,涉及国际化,权限,mock,数据流,网络请求等各个方面。</p><p>为这些中后台中常见的方案提供了最佳实践来减少学习和开发成本。</p><p>而且也是配有使用文档的,很不错。</p><p>Github Star 数 27.2K,Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=SU9ECgO1%2F28lVyz6fKGo9w%3D%3D.BijBgrrQrTAN6cylcczeJL%2FfdOggIHM%2B6p3sezI42XJ7AK2Y%2FIki84Y4J%2FvQGQS2" rel="nofollow">https://github.com/ant-design...</a></blockquote><h2>5. ngx-admin</h2><p><img src="/img/remote/1460000038323440" alt="" title=""></p><p>基于Angular 10+ 的可定制管理仪表板模,还拥有 6 个惊人的视觉主题。</p><p>Github Star 数 21.7K,Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=hPZt49p%2FEAyfE1vyMCXqvg%3D%3D.blXhXoC1vy1LS0WVXY5wNMXJ%2FHl50EbfVmU0r5b3MuDsSot11UREQhl31YMhueCR" rel="nofollow">https://github.com/akveo/ngx-...</a></blockquote><h2>6. vue-admin-beautiful</h2><p><img src="/img/remote/1460000038323441" alt="" title=""></p><p>vue-admin-beautiful 是一款基于 vue+element-ui 的绝佳的中后台前端开发管理框架(基于 vue/cli 4 最新版,同时支持电脑,手机,平板)。</p><p>vue-admin-beautiful-pro 拥有四种布局(画廊布局、综合布局、纵向布局、横向布局)四种主题(默认、海洋之心、绿茵草场,荣耀典藏),共计 16 布局主题种组合,满足所有项目场景。</p><p>已支持常规 bug 自动修复,前端代码自动规范,代码一键生成等众多功能,可以在完全不依赖后台的情况下独立开发完成项目,以及接口自动模拟生成,支持 JAVA、PHP、NODE、.NET、Django 等常用所有后台对接,甚至完全放弃 JAVA 等常规后端开发,内置 node 服务支持直接操作数据库进行增删改查,支持当前流行的 unicloud、serverless 云开发。</p><p>该项目还在不断更新和维护中,不错。</p><blockquote><a href="https://link.segmentfault.com/?enc=niXnPJXkAaBJI9gBHy1%2BfA%3D%3D.tKHADmf3atr1LuFp0TLTquzKPXVf%2BO3ddZdFfGjBy52yXAASovcG4dvI5VrK0foRIw7jkEnnLp2hDtuwhjRMmw%3D%3D" rel="nofollow">https://github.com/chuzhixin/...</a></blockquote><h2>7. vuestic-admin</h2><p><img src="/img/remote/1460000038323444" alt="" title=""></p><p>这是一个免费与美妙 Vue.js 管理模板,包括 38 以上个定制用户界面组件。</p><p>响应布局 | 图表(Charts.js) | 进度表 | 表格 | 选辑 | 日期选择器 | 复选框和单选框 | 静态表与数据表 | medium editor | 平滑设计字体 | 按钮 | 塌缩 | 颜色选择器 | 时间线 | 土司通知 | 工具提示 | 弹窗 | 图标 | 自旋体 | 模式 | 文件上传 | 厚切薯条通知 | 树 | 卡片 | 等级 | 滑动器 | 聊天系统 | 地图(Google, Yandex, Leaflet, amMap) | 登录/注册页模板 | 404页模板 | i18n</p><p>Github Star 数 7.6K,Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=UlxCgMpiKXVN5y4P02aF%2FA%3D%3D.ainLBVQf96HIyriZGJSzvCzCfk6fSOlMUp2hP17qx8XOPKxw3eoUldoH%2BB3qKgqx" rel="nofollow">https://github.com/epicmaxco/...</a></blockquote><h2>8. antd-admin</h2><p><img src="/img/remote/1460000038323445" alt="" title=""></p><p>一套优秀的中后台前端解决方案。</p><p><strong>特性</strong></p><ul><li>国际化,源码中抽离翻译字段,按需加载语言包</li><li>动态权限,不同权限对应不同菜单</li><li>优雅美观,Ant Design 设计体系</li><li>Mock 数据,本地数据调试</li></ul><p>而且也是配有使用文档的,很不错。</p><blockquote><a href="https://link.segmentfault.com/?enc=dev8NsvJR8P0FxsQ3iE79g%3D%3D.BfxnDw0bYhfoJkDr%2FuMBD%2B2eymuKDkB2W8gOpy68HrnY6Qe6wHhRSV7Mj2VbxINF" rel="nofollow">https://github.com/zuiidea/an...</a></blockquote><h2>9. eladmin</h2><p><img src="/img/remote/1460000038323443" alt="" title=""></p><p>一个简单且易上手的 Spring boot 后台管理框架</p><p><strong>技术栈</strong></p><p>使用 SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发。</p><p><strong>模块化</strong></p><p>后端采用按功能分模块开发方式,提升开发,测试效率。</p><p><strong>高效率</strong></p><p>项目简单可配,内置代码生成器,配置好表信息就能一键生成前后端代码。</p><p><strong>分离式</strong></p><p>前后端完全分离,前端基于 Vue,后端基于 Spring boot。</p><p><strong>响应式</strong></p><p>支持电脑、平板、手机等所有主流设备访问。</p><p><strong>易用性</strong></p><p>几乎可用于所有 Web 项目的开发,如 OA、Cms,网址后台管理等。</p><p>前后端都有,还是挺不错的。</p><blockquote><a href="https://link.segmentfault.com/?enc=v11Q6WoHxTP493UddgObrA%3D%3D.GLAzBCITMsS8NuIrlR2UEF%2Frbz3oNprV7OYrCDoPY%2Bg760I4GsHus8w0jm%2BKVdyK" rel="nofollow">https://github.com/elunez/ela...</a></blockquote><h2>10. AdminLTE</h2><p><img src="/img/remote/1460000038323448" alt="" title=""></p><p><strong>AdminLTE</strong> 是一个完全响应的管理模板。基于 <strong><a href="https://link.segmentfault.com/?enc=ouxA%2FPGdboMDmpKMwWNJVg%3D%3D.qXPU05HuJ%2BBLZ9K9%2B1D919FwUnuoHh3%2B%2B6A3rWouKHE%3D" rel="nofollow">Bootstrap 4.5</a></strong> 框架以及 JS / jQuery 插件。</p><p>高度可定制且易于使用。适合从小型移动设备到大型台式机的多种屏幕分辨率。</p><p>AdminLTE 的所有 JS,SCSS 和 HTML 文件均经过精心编码,并带有清晰的注释。SCSS 已用于提高代码的可定制性。</p><p>ui 风格也不偏向于外国吧,比较简结。</p><p>好的地方是还一直在更新和维护,最大的不足就是还依赖于 jQuery 这个旧时代的产物,唉。</p><p>Github Star 数 36.8K 也非常高 , Github 地址:</p><blockquote><a href="https://link.segmentfault.com/?enc=%2F6wCBKxGx3t0gXBgnFZqkg%3D%3D.ylQQvcIQnohk8DU%2BPTINBwPTiHC6SLL55vVuISqdJrO%2FONo%2FAu1glHErxrLIA1gb" rel="nofollow">https://github.com/almasaeed2...</a></blockquote><p><img src="/img/remote/1460000038323446" alt="" title=""></p><h2>最后</h2><p>最近加班有点严重,经常都是晚上 10、11 点多才下班,所以文章更新慢了很多。</p><p>因为文章都是在晚上肝出来的,一篇文章要肝几个晚上才行,肝到这里时,已经过了零晨了,唉。</p><p><strong>同是打工猫,生活不易啊!</strong></p><p>最后就以一张很治愈的图片来治愈一下疲惫的心灵吧。</p><p><img src="/img/remote/1460000038323447" alt="" title=""></p><p>好了啦,【前端GitHub】的第 8 期内容已经讲完了啦。</p><p>更多精彩内容请关注下方仓库,你将发现更大的前端世界:</p><blockquote>原文地址:<a href="https://link.segmentfault.com/?enc=PQRTRR%2BvYZJwX5773AxQSA%3D%3D.V6C8MfnTH8s%2B0eYQnHEE%2FhsS%2FQOvJAMrjF0Hd%2FCIB4c%2FnnZTV55LSmKVmewyfhUx%2FqK1aX3VIVJMSzag04PDqA%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=sS2Ckiihhl%2BdCJ9VWoZvGA%3D%3D.y2dGvWkHT5MXc0yHx6bgDs5Cw6FFd4P57wNZ7nUHa6w54VHZM1sd7AUTiRiyZnxyKU8COpmUY5hfLYSoj9z%2FEA%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=TzO9gSNg1CgTJP5%2F4QbyUg%3D%3D.5Bm8WjvODSadB%2Bx5nO9uO%2Fj5URARiUduewJgLp5rW6yRayuAnvNqHj8%2F69ibvMYQZVDSI%2FRtmiLehZMSd0D5SQ%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 wx:CB834301747 ,一起闲聊 前端GitHub。</p><p>微信搜 “前端GitHub”,回复 “电子书” 即可以获得 160 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=nnV%2FZ5iDxSgt7DFRzGFU4Q%3D%3D.WqBQ8Vxj%2Bk%2B4tc3r%2BlHfsLwj57QG1Gxl7RDt24HLkk54mePD3aQ%2BDpHeLbb5dDe2W5srsE6tYXXK5eb2PW7jQg%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=thrpxkCz8n4YFjB%2F5VXxow%3D%3D.ogc430rzPgfmxbA32hDjHPoqwr6MWLoxi9Tjgdvm%2FdxohdOWEpUVKxWu1xdcYuJsHakJP43t8Ke4viOl2ZhfKw%3D%3D" rel="nofollow">10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!</a></li><li><a href="https://link.segmentfault.com/?enc=lvrNO%2BXPT7MrZC5HsKa%2F2w%3D%3D.G9JH4LYHA1D%2BskBAcrqp8waH0Lt21z%2FiWr%2Bj0kV2QHek304%2FeV76hqZo%2BIhtVR%2Fc6ArNU5C9bG45lPHIeGOafw%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li><li><a href="https://link.segmentfault.com/?enc=oLTigceuSrUk0Yl2GKSyYg%3D%3D.W78aQlaYkCguE5uATASZr62UhOXj3unJ%2FpJY%2BmmAJz1Rxcje8WOBZ9e1IOvfWvBy4BLygcEGzotJfklJtEV1kg%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=GxDEqzEJaWmf09YjmhjBrg%3D%3D.MDJKnG89k9n7VAy2ATa66jHPcyDD%2FGEvGLLfKi%2FjRSGiT6OwH7qbuWRpZibanW1SI%2Fn1PLIengI2S%2BR2vfGyTA%3D%3D" rel="nofollow">GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=wy3QaQsshe48VItXSi20Uw%3D%3D.bNRl%2BPunp9aL%2F%2FqzwQqsga6WDfNsB6g7vPy5t8az2JY1a5WX4lXqBu6lOn4KGwIOIfPWQEqSKKR8vnWQVc3C1w%3D%3D" rel="nofollow">全球最火的WEB开发学习路线!没有之一!3 天就在GitHub收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=Ec0TBxo2LTBWReRzUr3rQA%3D%3D.qwrH%2FPSCK79oB3bJ34wDI5mPuzsxk0RxQXFxWF%2BX6h%2BZ8P1kHd2umchI%2BBO183alsgZ4NKu8fPyUX6UntVU1pg%3D%3D" rel="nofollow">Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p>
10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!
https://segmentfault.com/a/1190000038263876
2020-11-24T08:38:58+08:00
2020-11-24T08:38:58+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
89
<p><img src="/img/remote/1460000038263884" alt="" title=""></p><p>大家好,我是你们的 超级猫,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><p>如果 CSS 是女孩子,肯定如上图那样吧 🤩 ~</p><h2>简介</h2><p><img src="/img/remote/1460000038263887" alt="" title=""></p><p>一般人没事的时候刷刷朋友圈、微博、电视剧、知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目。</p><p>久而久之,这差距就越来越大,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。</p><p>初步前端与高级前端之间,最大的差距可能就是信息差造成的。</p><p>超级猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。</p><p>从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。</p><p>看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。</p><p>因此也收藏了不少好的开源项目,在此推荐给大家,每周会有一到三篇精华文章推送。</p><p>希望你在浏览、学习了超级猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=MCL9CiwX6hGs573%2B6z7U4A%3D%3D.L2gpC4580fzCbEGGGeKTs%2FUnn7fhhN%2F3QddrCJENprJPXEn76JUpnt9XBbRYF9%2F%2F00ADAZzwBMJ1L4vITpfkhw%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。</blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=yrAkhtL3U9EKeXr9KYnygQ%3D%3D.%2F1E%2BeGPf8Ni6i7E4L8gddB72ht5GLjCN33%2FAyj8jWCofdnBSHs0ZthgEdIAS%2F8K7GxqOR9T1cxvuyjR4tlYIkg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></p><hr><p>以下为【前端GitHub】的第 7 期精华内容。</p><p>今天给大家带来的是 <strong>GitHub 上超火的 10 个 CSS 项目</strong>,希望你在这里面找到写 CSS 的灵感!</p><p>喵~ 喵~ 喵~ 正文开始了,上车坐稳扶好了~</p><p><img src="/img/remote/1460000038263879" alt="" title=""></p><hr><h2>You-need-to-know-css</h2><p><img src="/img/remote/1460000038263886" alt="" title=""></p><p>该项目是 CSS 的各种效果实现,尤其是动画效果。</p><p>笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档。</p><p>目前文档一共包含 43 个 CSS 的小样式(持续更新…),所以还是很不错的学习 CSS 的项目来的。</p><p><img src="/img/remote/1460000038263885" alt="" title=""></p><p>比如: 打字效果</p><pre><code class="html"><style>
main {
width: 100%; height: 229px;
display: flex;
justify-content: center;
align-items: center;
}
span {
display: inline-block;
width: 21ch;
font: bold 200% Consolas, Monaco, monospace; /*等宽字体*/
overflow: hidden;
white-space: nowrap;
font-weight: 500;
border-right: 1px solid transparent;
animation: typing 10s steps(21), caret .5s steps(1) infinite;
}
@keyframes typing{
from {
width: 0;
}
}
@keyframes caret{
50% { border-right-color: currentColor}
}
</style>
<template>
<main class="main">
<span>前端GitHub</span>
</main>
</template>
<script>
</script></code></pre><blockquote><a href="https://link.segmentfault.com/?enc=fwukG1ZNCe84fYPUeJ%2FNpA%3D%3D.I376hvp39i4zUY3DGlbVQU1UBEKtvWHhTK4s0lilNny6ZjPb921ikbJdlvHlsIwu0tjvHZPHm1Fdp4z2VlzfRw%3D%3D" rel="nofollow">https://lhammer.cn/You-need-to-know-css/#/zh-cn/</a></blockquote><hr><h2>CSS-Inspiration</h2><p><img src="/img/remote/1460000038263882" alt="" title=""></p><p>这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。</p><p>包含了:布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框(border)、背景/渐变(linear-gradient/radial-gradient/conic-gradient)、混合模式(mix-blend-mode/background-blend-mode)、3D、动画/过渡(transition/animation)、clip-path、文本类、综合、CSS-Doodle、SVG 等内容。</p><p>比如:<a href="https://link.segmentfault.com/?enc=rmCLhhC%2F9UC7S2mge3GiUg%3D%3D.HNi2oIvQ5%2FQMhX%2F3cwIu%2FNr47jIgTZJbCKH6dpf9H%2B0KunA7TgV%2BskNMDm83%2BAng" rel="nofollow">巧用 CSS 实现酷炫的充电动画</a></p><p><img src="/img/remote/1460000038263883" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=t9T3GpiX0SXqpywNjOByoQ%3D%3D.Qe1hA%2FX3IVYFdpSfa3xmfvYrS5wsYXZXboBGS95QXGMMU7q9KHo04v%2FTDVXtfNMH" rel="nofollow">https://github.com/chokcoco/CSS-Inspiration</a></blockquote><hr><h2>css_tricks</h2><p>该项目总结了一些常用的 CSS 样式,记录一些 CSS 的新属性和一点奇技淫巧。</p><p>比如 提示气泡的效果</p><pre><code><div class="poptip btn" aria-controls="弹出气泡">poptip</div></code></pre><pre><code>$poptipBg: #30363d;
$color: #fff;
$triangle: 8px;
$distance: -12px;
.poptip {
position: relative;
z-index: 101;
&::before,
&::after {
visibility: hidden;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: all 0.3s ease 0.2s;
box-sizing: border-box;
}
&::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: $triangle $triangle 0 $triangle;
border-color: $poptipBg transparent transparent transparent;
left: calc(50% - #{$triangle});
top: 0px;
transform: translateX(0%) translateY($distance);
}
&::after {
font-size: 14px;
color: $color;
content: attr(aria-controls);
position: absolute;
padding: 6px 12px;
white-space: nowrap;
z-index: -1;
left: 50%;
bottom: 100%;
transform: translateX(-50%) translateY($distance);
background: $poptipBg;
line-height: 1;
border-radius: 2px;
}
&:hover::before,
&:hover::after {
visibility: visible;
opacity: 1;
}
}
.btn {
min-width: 100px;
line-height: 1.5;
padding: 5px 10px;
color: #fff;
background: #00adb5;
border-radius: 4px;
text-align: center;
cursor: pointer;
}</code></pre><p>效果:</p><p><img src="/img/remote/1460000038263881" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=K50KOX3cw75%2FnZbB3JpE7w%3D%3D.cgKWkNJ7%2BYccrjJXz640E%2FEHhR%2FmRPqqNmaXG45eqF0qifRYvRai71%2BZlAsl%2BNZW" rel="nofollow">https://github.com/QiShaoXuan/css_tricks</a></blockquote><hr><h2>animista</h2><p>该项目里面有各种 CSS 实现的效果,还有代码演示,方便直接复制代码,还可以复制压缩后的代码,如果你在找某个 CSS 的效果的话,可以到这里找找看。</p><p><img src="/img/remote/1460000038263880" alt="" title=""></p><p><img src="/img/remote/1460000038263888" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=JwzNBwKSFDrh9rHibX2puA%3D%3D.8r7tXZGoqyMSxnkIEJ6TikNIKRVG6XWYX98MAXU3zt0%3D" rel="nofollow">http://animista.net/</a></blockquote><h2>spinkit</h2><p><img src="/img/remote/1460000038263892" alt="" title=""></p><p>汇集了实现各种加载效果的 CSS 代码片段。</p><p>SpinKit 仅使用(<code>transform</code> 和 <code>opacity</code>)CSS 动画来创建平滑且易于自定义的动画。</p><blockquote><a href="https://link.segmentfault.com/?enc=q%2BTTPzKZtmJnarJguATPQw%3D%3D.mMMm3P8eWmfB%2FnavXZb62DUnX0XIt9d0IVwj%2BEqu3B0iy0pRKqp8rekN7FlmNchU" rel="nofollow">https://tobiasahlin.com/spinkit/</a></blockquote><hr><h2>十天精通 CSS3</h2><p>这是前端大佬大漠出的一个免费的 CSS3 教程,对于有一定 CSS2 经验的伙伴,能让您系统的学习 CSS3,快速的理解掌握并应用于工作之中。</p><p>里面的内容有讲解,还有代码演习,学完之后,可以练习所学的 api ,真的很不错。</p><p><img src="/img/remote/1460000038263889" alt="" title=""></p><p>超级猫入门前端时,也学习过里面的内容呢,虽然现在忘记的差不多了 😂,但是学过!。</p><blockquote><a href="https://link.segmentfault.com/?enc=tc814TfBf7WuxqD4XIvkow%3D%3D.gpgIcInfmjBRh0avEZ9qBVyVa5mcfIOKdwAKbrrojvM%3D" rel="nofollow">https://www.imooc.com/learn/33</a></blockquote><hr><h2>Animate</h2><p><img src="/img/remote/1460000038263891" alt="" title=""></p><p>是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。</p><p>animate.css 的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类 animated 和相应的类添加到元素上就行了。</p><p>做为一个前端开发,如果不知道这个库就真的很失败了。</p><blockquote><a href="https://link.segmentfault.com/?enc=XSVSU7Ew61bwx5wAASTrEg%3D%3D.%2Fd58rKeRmioi%2Fk1PQXd7I7%2Fv52T2Lm5GktM1rOnMWCQ%3D" rel="nofollow">https://animate.style/</a></blockquote><hr><h2>sass</h2><p>Sass 是一种 CSS 的预编译语言,Sass 为 CSS 赋予了更强大的功能。</p><p>它提供了 变量(variables)、嵌套(nested rules) [混合(mixins)、函数(functions)等功能,并且完全兼容 CSS 语法。</p><p>Sass 能够帮助复杂的样式表更有条理, 并且易于在项目内部或跨项目共享设计。</p><blockquote><a href="https://link.segmentfault.com/?enc=eFuW0X%2FVDC0pjsTpbXDOpA%3D%3D.ZozugLAQi17SVF2Smx3IearwPW0JyU8UxxTEepe6dPcC3R%2F8Yg4PiDeGwMYIUzIL" rel="nofollow">https://sass.bootcss.com/documentation</a></blockquote><hr><h2>less</h2><p>Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。</p><p>Less 可以运行在 Node 或浏览器端。</p><blockquote><a href="https://link.segmentfault.com/?enc=wqOXqmKocR%2B%2Fgpm61oz6cg%3D%3D.SrT5s4IvuR0LAcTx1G0FQBby5s3RZsNgjxV%2FKwuhIyg%3D" rel="nofollow">https://less.bootcss.com/</a></blockquote><hr><h2>stylus</h2><p>富有表现力、动态、健壮的 CSS。</p><p>它提供了一种高效,动态和表达方式来生成 CSS。同时支持缩进语法和常规 CSS 样式。</p><blockquote><a href="https://link.segmentfault.com/?enc=lkBTcyysVsnz8fVEULNiwQ%3D%3D.lT%2FR9nk8ZAJpb0LS8FLEYnDQEwv7B141p822VdeaOOc%3D" rel="nofollow">https://stylus-lang.com/</a></blockquote><hr><p>CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。</p><p>对于 sass 、less 和 stylus,都是在现在的 vue 和 react 项目中经常用到的,用法也很简单,只要学会一种,其他两种都很容易上手,项目中用哪一种就要看自己的喜欢了。</p><p><img src="/img/remote/1460000038263890" alt="" title=""></p><h2>最后</h2><p><img src="/img/remote/1460000038263893" alt="" title=""></p><p>最近加班有点严重,所有文章更新慢了很多,同是打工猫,生活不易啊!</p><p>好了啦,【前端GitHub】的第 7 期内容已经讲完了啦。</p><p>更多精彩内容请关注下方仓库:</p><blockquote>原文地址:<a href="https://link.segmentfault.com/?enc=YzetPq5nBAbo53YVs9aJrg%3D%3D.trPAogKP9ZPK2LNhflglP1S14QLsgv%2FC3AS6QOPSSOUsT5Evy8xmVKEAjRMR216l%2B4cYJhdW7%2FyNqVqJD20uxw%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=2S7yu1s9s66sBNt2hzvgYg%3D%3D.jcAANai4PEtsNSz%2B%2Fnf1aDKHdwxg5Jhpgpblu6KE5vmIs1GuHsA4%2F0Z7WUlWHGfh5%2FnJ2pak%2FSi%2FLbQa4zz4NA%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=vaR%2FRShR8WvIEvBSlQl9rQ%3D%3D.R5nCph8RamqCdPrepA7E2Mz7en8fltAEPlGF9LDvjzmq%2B2b0aeqiyEQ%2BaI%2FMokf%2FuKpdpCf91fUH%2BB7wthRZMA%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 wx:CB834301747 ,一起闲聊前端。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=R%2B%2FHIwWy6lXeLZU3u1Jfig%3D%3D.Zx5uLihuPXNPeng8E9CL1LBDvYUZp5Kopf3%2FagbSqUAwTC3Xy98vTokCYVgVGsrERe4veH%2FfzU1SqYjrrYQyPg%3D%3D" rel="nofollow">10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!</a></li><li><a href="https://link.segmentfault.com/?enc=Sabr%2FYLq8suT2yZocDrjEQ%3D%3D.c35pwAKNm6t4zwhTlh3tvqXfDa9dwNK7ftVG84XjfABIFQE1lfsRv7d9N%2FsFmTMOKQUW8Rzvtj8Th5dEbCFq2A%3D%3D" rel="nofollow">11 个超火的大厂前端代码规范,你也能写出诗一样的代码!</a></li><li><a href="https://link.segmentfault.com/?enc=GkAB8bFOXONBS%2B0zdg6wIg%3D%3D.1NEwK0YefENN7UxpzxQLTl6cuQDt9nXXJR5IXPO6qOAhGn3%2F9S7MBgEzVsZtRR%2Fu44lXDuTlKwALfnEgDJgYZA%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=e3M%2F9zr7BE2LecZ2AlXwMg%3D%3D.pP3yjOrQBB%2F130IMAuXgoJ3WEV3YyVsfiS0VlITa7nc7FznDOJq%2BLPKVo3vRL%2BBo6lR3pzCUE0WwvXZ7dIr%2Bug%3D%3D" rel="nofollow">GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=n4B8yVQw5O%2Fffjs2Rbn2PQ%3D%3D.o31LshdrEG09LgsIwAPrQYHgk%2Fsgo%2BkMImGFbnz%2FdK7xGSfrKzFcSrD5UbP4VJJWUhDA3Xwp5AyYuQCB0Xvjig%3D%3D" rel="nofollow">全球最火的WEB开发学习路线!没有之一!3 天就在GitHub收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=Fq2%2Fxy2VcOg5v3uvJ4BkAA%3D%3D.aMF8KssP9%2FajSGgJGgCG2p80I2L99VXJVSYnfpuUJeCX9IG%2BL3H9sM15UdGw6NlpxzqwZeHnqCDU40R5Tek3MQ%3D%3D" rel="nofollow">Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul>
11 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!
https://segmentfault.com/a/1190000038204736
2020-11-18T00:13:47+08:00
2020-11-18T00:13:47+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
56
<p><img src="https://upload-images.jianshu.io/upload_images/12890819-a53c0b51d93129ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>大家好,我是你们的 超级猫,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>简介</h2><p>一般人没事的时候刷刷朋友圈、微博、电视剧、知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目。</p><p>久而久之,这差距就越来越大,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。</p><p>初步前端与高级前端之间,最大的差距可能就是信息差造成的。</p><p>前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。</p><p>从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。</p><p>看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。</p><p>因此也收藏了不少好的开源项目,在此推荐给大家,每周会有一到三篇精华文章推送。</p><p>希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=wA1tHZqKVslfoK282epKcg%3D%3D.grmW%2Bew%2BcF01ubKBatcEBcPMtDcvrHdTvK28hRuedR3PiYBHTjDXLOBa0ougaD%2BPzSaBJomPd%2BcR9te8LItQtA%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。</blockquote><p>以下为【前端GitHub】的第 6 期精华内容。</p><p>今天给大家带来的是 <strong>GitHub 上超火的 10 个前端面试项目</strong>。</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-9bded23edcb522df.gif?imageMogr2/auto-orient/strip" alt="" title=""></p><h2>Front-end-Developer-Questions</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-e718c56076afa0a3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>这个项目里面很多面试题,而且 star 数非常高,最大的缺点就是 <strong>没有答案!</strong></p><p>包含了:常见问题、HTML 相关问题、CSS 相关问题、JS 相关问题、测试相关问题、效能相关问题、网络相关问题、代码相关问题、趣味问题。</p><p>比如 JS 相关问题:</p><ul><li>请解释事件代理 (event delegation)。</li><li>请解释 JavaScript 中 <code>this</code> 是如何工作的。</li><li>请解释原型继承 (prototypal inheritance) 的原理。</li><li>你怎么看 AMD vs. CommonJS?</li><li>请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式):<code>function foo(){ }();</code>,要做哪些改动使它变成 IIFE?</li><li>描述以下变量的区别:<code>null</code>,<code>undefined</code> 或 <code>undeclared</code>?该如何检测它们?</li><li>什么是闭包 (closure),如何使用它,为什么要使用它?</li><li>请举出一个匿名函数的典型用例?</li><li>你是如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?</li></ul><p>超级猫 觉得可以作为前端自检清单吧。</p><blockquote> <a href="https://link.segmentfault.com/?enc=FfSpt9gqoBILRnyZltVZpQ%3D%3D.JBSFaYpKO9zY8HKLetsFYTx7nAmCfuhAHT47%2FVoDBf5BJOl13pSANRZ2%2ByKFC224KywvXwriVimEx0ainzIVXw%3D%3D" rel="nofollow">https://h5bp.org/Front-end-Developer-Interview-Questions/</a></blockquote><h2>javascript-questions</h2><p>JavaScript 进阶问题列表</p><p>从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试! 💪 🚀 我每周都会在这个仓库下更新新的问题。</p><blockquote><a href="https://link.segmentfault.com/?enc=9osaMFgLKvR%2Fnd2sWJ1MmA%3D%3D.N3YUkQ82XFAIDee3aEBvxRA8DjxuCpoC5c3gj3DyCqJi%2BLYnIV4Xp8Act755jpb%2BxiKi2rukPMYu%2BEvvOmB9BA%3D%3D" rel="nofollow">https://github.com/lydiahalli...</a></blockquote><h2>Daily-Question</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-4ae153610284b26e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>这是山月大佬整理的:互联网大厂内推及大厂面经整理,并且每天一道面试题推送。每天五分钟,半年大厂中。</p><p>每天至少一个问题,有关前后端,DevOps,微服务以及软技能,促进个人职业成长。</p><blockquote><a href="https://link.segmentfault.com/?enc=70yBIbyl8FFvGzXElYjuwQ%3D%3D.4jP25F6ONt1EJHBOqAJfKIWN7guGx0Nh2dQoqqCqHtMs%2B%2FEtHsByQfC%2BplqLupkU" rel="nofollow">https://github.com/shfshanyue/Daily-Question</a></blockquote><p>还有 <strong>掘金前端面试题合集</strong></p><p>用简单的命令爬取了掘金的面试集合榜单,还是挺全的。</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-881266f68e827896.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=7%2Fvt1%2Fr1WwoI6o4qJv0OYw%3D%3D.WAVFXF%2BhbIUDyZy2fGdQbbKDr1j0FdFkoVBRUUcpfHaOVaZ2lt4wn%2BBz7BP0MSqfyI4A%2BwhPJH6xL8y1bfKgeQklPIHv8J2JEZyu%2FZp9vyA%3D" rel="nofollow">https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md</a></blockquote><h2>CS-Interview-Knowledge-Map</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-1e3948e3b112f245.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>这是小册作者 yck 大佬花了半年的时间做了一个这个开源项目。在半年的时间里,收集了大量的一线大厂面试题,通过大数据统计出了近百个常考知识点,然后根据这些知识点写成了近十万字的内容。</p><p>目前的内容包括 js、网络、浏览器相关、性能优化、安全性、框架、git、数据结构、算法等。</p><blockquote><a href="https://link.segmentfault.com/?enc=A35cK%2BZzBlWV6sUFcwnjrg%3D%3D.RJq3mRdBpE17NE%2Fys9UIq7N1G%2FJYzgpb6tHjrW1hMPDQjQb7fYtanajcaOgVMs6Vgml6UzZGl1RzrloBBWrRkw%3D%3D" rel="nofollow">https://github.com/InterviewMap/CS-Interview-Knowledge-Map</a></blockquote><h2>Daily-Interview-Question</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-eb739a21964e9e9e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>每天搞定一道前端大厂面试题,祝大家天天进步,一年后会看到不一样的自己。</p><p>这项目的问题,很多同学参与回答,内容也很新,作为每日突击的学习,很适合准备跳槽的同学。</p><blockquote><a href="https://link.segmentfault.com/?enc=jF%2BtwBXrvsxwsKrzQsXGrA%3D%3D.mEY%2BuIvae%2FCmSJN01g4aE2IoIOr4f2TQaF9P4l5LOelo7D02YMHzgsrisICilgPogn64dQS5cNQZ9TDF%2BR4aOg%3D%3D" rel="nofollow">https://github.com/Advanced-Frontend/Daily-Interview-Question</a></blockquote><h2>fe-interview</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-d468bcaca46b3e20.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>这是一份作者总结的关于准备前端面试的一个复习汇总项目,项目不定时更新。</p><p>这不仅仅是一份用于求职面试的攻略,也是一份前端 er 用来检视自己,实现突破的宝典。</p><p>希望通过这个指南,大家可以打通自己的任督二脉,在前端的路上更进一步。</p><p>本仓库大量采用图的形式来传达知识,所谓一图胜千言,希望通过这种图文并茂的表达方式让你更容易记住一些抽象,难以理解的概念。</p><blockquote><a href="https://link.segmentfault.com/?enc=6vsjriSYzclghgPTLSGbPA%3D%3D.WlUSsSfjXduOpYBAiPzdlK%2BsUFPwmRTfHXzyROuzIvBT0UBxQpw00sb53dUc%2Bxuy" rel="nofollow">https://lucifer.ren/fe-interview</a></blockquote><h2>fe-interview</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-38254101648d9f27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>该专题的面试内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git ,内容还是比较齐全的。</p><p>复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累!</p><p>内容大概是一年前了,内容都在一个 readme 文件里面,阅读不是很方便。</p><blockquote><a href="https://link.segmentfault.com/?enc=wqt5wwfJJ8Sq5VG4M0sFtA%3D%3D.vvE6i58iklZaytHKLjfx%2FFqOQD4SMJVUd2NeiN5FyCtJ0rQQz%2BOUA6wPD1QT66audosM1sgJEQC0al2QRVgO%2BdJQ47GBp8vb%2B1%2Flbs7hFG4%3D" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><h2>fe-interview</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-f7f1a08fae7da557.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>这是一个涉及前端知识题库 最多(3000+)、最全,参与人数最多的免费开源项目!</p><p>前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上 5 点纯手工发布面试题(死磕自己,愉悦大家)。</p><blockquote><a href="https://link.segmentfault.com/?enc=bhHd583MEhzRLDVKLg79TQ%3D%3D.PDNeNyoLp5lxl82NTFyVft6%2BkepnVWVNaYvo%2BooZAj5wBvMfLHXmIq75tx6UoU22" rel="nofollow">https://github.com/haizlin/fe-interview</a></blockquote><h2>node-interview</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-9366bdabf93f10ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>该项目的目的是教你如何通过饿了么大前端的面试, 职位是 2~3 年经验的 Node.js 服务端程序员 (并不是全栈)。</p><p>需要注意的是, 该项目针对的并不是零基础的同学, 你需要有一定的 JavaScript/Node.js 基础, 并且有一定的工作经验. 另外该项目的重点更准确的说是服务端基础中 Node.js 程序员需要了解的部分。</p><blockquote><a href="https://link.segmentfault.com/?enc=WAhf0TYeWDc6AMys1S0hGA%3D%3D.vRKfNj2BIkDfdXcgGh1vVFNLf%2BugxhfGZAPaIuFYqcEVsGE%2BUKpSZZRPm0qrvIqLmJOC1Vr8ef7mM3HrPDFY9MwFiANavhscFaUx%2BZySfKg%3D" rel="nofollow">https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn</a></blockquote><h2>Front-End-Interview-Notebook</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-a3c27518693fd636.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>这个仓库是笔者校招时的前端复习笔记,主要总结一些比较重要的知识点和前端面试问题,对大家应该有所帮助。</p><blockquote><a href="https://link.segmentfault.com/?enc=UV5BCcWfA9OMuNKCJ1pyHA%3D%3D.4xtcO2hanrernlFSBMsHTdmhCBp4ylkY82EhdVJhVjSVXNRLPzMTnsEhiO425C%2FhDXog7oKcfdXZgsD78P80nA%3D%3D" rel="nofollow">https://github.com/CavsZhouyou/Front-End-Interview-Notebook</a></blockquote><h2>FE-Interview</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-c27a720d197387f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>每天 get 一个知识点。</p><p>前端面试必备题库,1000+ 面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器。</p><blockquote><a href="https://link.segmentfault.com/?enc=5W8WkcLOOoUnJ%2Bdxjw1KIg%3D%3D.9YLtUyhQhM3w%2BPgY3dQKJFuWZ9vRwk8%2B8LUhFzxTiRKgZbDHNi1Atgiy7hAfaffq" rel="nofollow">https://github.com/lgwebdream/FE-Interview</a></blockquote><h2>更多</h2><p>更多前端面试开源项目 ...</p><blockquote><a href="https://link.segmentfault.com/?enc=IB7B6rSvVUtx%2BfzBqXtBhw%3D%3D.vwxdc3WakOKfVlsmbhiz5vzdnyM85FkQcANGMGSU73KH4%2BBl4tyymwfHM8t0B%2B%2Ft7kwyx%2BvOP83XIqpfBTaY1z9n5uJae04XINt9FE%2FWoHpCmvffDN4iewzBXu8dl%2B1fChB2YwqQEaeaiS81zkPCY34DJ6%2B4AaKMXDqEVapAgnE%3D" rel="nofollow">https://github.com/search?o=desc&p=1&q=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95&s=&type=Repositories</a></blockquote><p><img src="https://upload-images.jianshu.io/upload_images/12890819-6fd605f528682683.gif?imageMogr2/auto-orient/strip" alt="" title=""></p><h2>最后</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-6b3b3bd777ba069f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>好了,【前端GitHub】的第 6 期内容已经讲完了,更多精彩请看下方仓库地址:</p><blockquote>原文地址:<a href="https://link.segmentfault.com/?enc=jAyf%2BJMM0jW4T8ghkmXFZQ%3D%3D.ejINQwBl3O7hqJW%2BuqtAYtR1f4tPfC1tWVgwAQIYo0RTNOqNRHEvSwxU5RRt2pCjr54jhTPRynbWP%2BMrt1bZ3A%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=96jSngEBD9qDxRyPv9eimg%3D%3D.CyBbhpdFyKm%2BiCIK0fahxpBi1ESqiX5ZJgU8zcikB2m9GMj3h6ug9S9jBzI6S9iTr9%2BE8hSKUcr3s1bvw42OGg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=kD0Bllm0i%2FZV8iBn5ea%2BXg%3D%3D.3pH%2B9Fps2GIXh1qU%2BmeRLDwJAfZmAEwPlJN8rjSdJePzz7KP6Jbnj22muGBRl0RzSmPU3zP%2FbUZz1fGW%2BTyaQQ%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a>。</p><p>可以加超级猫的 wx:CB834301747 ,一起闲聊前端GitHub。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p><p>微信搜 “前端GitHub”,回复 “电子书” 即可以获得 160 本前端精华书籍哦。</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-9a13b43f4feb8f84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=Efpg8ylKZCTBTLhYk95vHg%3D%3D.6DxTgMOywzu0P8WZSwxQFgOhWs1kmgXU3eOdSIO2MKLBMzhhVQNAfiKc8GtmoK7D5aXgKRCKLB2pUg%2B3sp0hjg%3D%3D" rel="nofollow">推荐几个大厂的前端代码规范,你也能写出诗一样的代码!</a></li><li><a href="https://link.segmentfault.com/?enc=OZIt3SXMLX8j1bwvyCGakw%3D%3D.2%2BNGE%2BbiwimWvuaPLbkwklhDgfX2FxSB5Ij4MWUY9DVudFCQ2lD%2FYhJ5BI4ftpDPyf6XIzLRyKMZqe5Eyf0dkA%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=yVW7927UVkvewEETL8epRA%3D%3D.4YyOnqXB9Ze9Ne9HLkpMiQpuoCutmEjtcn91gCN5oehJ88uUYQSBSkP59iLLjGis5UzeRRmNIyO%2FwRPOP%2FOAcg%3D%3D" rel="nofollow">GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=hV7Dt%2F2DB%2BvAUibNUuv5oQ%3D%3D.c%2FxJTBHneiMQijKlE%2BAWcqO2u3desTK9%2BGn%2FqpJLpgiG5FmeDOCyteibNeSgAH32H%2BdRdyK88QaqZigT4YETdQ%3D%3D" rel="nofollow">全球最火的WEB开发学习路线!没有之一!3 天就在GitHub收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=kS5FXUYPzLQJMZ2dsPyoBw%3D%3D.OBa62nC8EpNiwsYmhqicrjQfygHUB4TU5kjkPi7rit39qxdlnqJbU6TGqzrKMSU7TMEDACUwqsEy72XgcmKPeQ%3D%3D" rel="nofollow">Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul><p>点此评论及推荐好的开源项目哦!</p>
推荐几个大厂的前端代码规范,学会了,你也能写出诗一样的代码!
https://segmentfault.com/a/1190000038140027
2020-11-11T23:47:36+08:00
2020-11-11T23:47:36+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
27
<p><img src="/img/remote/1460000038140030" alt="" title=""></p><p>大家好,我是你们的 前端章鱼猫,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~</p><h2>简介</h2><p>前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。</p><p>相信很多人都没有逛 GitHub 的习惯,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。</p><p>初步前端与高级前端之间,最大的差距可能就是信息差造成的。</p><p>从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。</p><p>看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。</p><p>因此也收藏了不少好的开源项目,在此推荐给大家,每周会有一到三篇精华文章推送。</p><p>希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><blockquote>公众号:<a href="https://link.segmentfault.com/?enc=ALnSfIKigwS6y2PxY4%2B9vw%3D%3D.%2F7T5U5ZpDgoRcQC3aC7Dri7huoz6MW8fwZGoJ%2B9fvHcqITZWgIrz8QS02K912zsZdaGEz%2BuEUq%2BGAeWGeawm9Q%3D%3D" rel="nofollow"><strong>前端GitHub</strong></a>,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。</blockquote><p>以下为【前端GitHub】的第 5 期内容。</p><p>今天给大家带来的是 <strong>几个大厂的前端代码规范</strong>。</p><p><img src="/img/remote/1460000038140031" alt="" title=""></p><h2>前端代码规范 </h2><blockquote>代码千万行,安全第一行;前端不规范,同事两行泪。</blockquote><h3>腾讯</h3><p><img src="/img/remote/1460000038140032" alt="" title=""></p><p><img src="/img/remote/1460000038140033" alt="" title=""></p><p>包含内容也挺多的:</p><p><strong>PC端专题</strong>:快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试</p><p><strong>移动端专题</strong>:快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求</p><p><strong>双端官网</strong>:快速上手、页面跳转</p><blockquote><a href="https://link.segmentfault.com/?enc=7zdFllYQvYI1FAYhEzd3FQ%3D%3D.WEgnUjl5c3oC6iviSxbK5%2F1tEakEK1SPVxcd1BjSUfKYf7uPVcT3dGxX9UpTUpxm" rel="nofollow">http://tgideas.qq.com/doc/index.html</a></blockquote><p>不过里面也有一些内容是针对其业务的,并不通用。</p><h3>京东</h3><p><img src="/img/remote/1460000038140034" alt="" title=""></p><p><img src="/img/remote/1460000038140037" alt="" title=""></p><p>对比腾讯的代码规范,我更推荐凹凸实验室的代码规范,比较齐全。</p><p><strong>HTML规范</strong></p><p>基于W3C、苹果开发者等官方文档,并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。</p><p><strong>图片规范</strong></p><p>了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等。</p><p><strong>CSS 规范</strong></p><p>统一团队 CSS 代码书写和 SASS 预编译语言的语法风格,提供常用媒体查询语句和浏览器私有属性引用,并从业务层面统一规范常用模块的引用。</p><p><strong>命名规范</strong></p><p>从 “目录命名”、“图片命名”、“ClassName” 命名等层面约定规范团队的命名习惯,增强团队代码的可读性。</p><p><strong>JavaScript 规范</strong></p><p>统一团队的 JS 语法风格和书写习惯,减少程序出错的概率,其中也包含了 ES6 的语法规范和最佳实践。</p><blockquote>凹凸实验室:<a href="https://link.segmentfault.com/?enc=9e5d4pHjlB5DFbISQ%2B7wuA%3D%3D.wZjw8AbPT%2Fwy5wUPCvzWYkwYsz4p25w0VhbIO%2FzGm7v3RDjFTwL0SDk%2BPvyIJBd%2B" rel="nofollow">https://guide.aotu.io/index.html</a></blockquote><h3>阿里巴巴</h3><p><img src="/img/remote/1460000038140038" alt="" title=""></p><p>包含了:类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明</p><blockquote>Airbnb Javascript Style Guide:<a href="https://link.segmentfault.com/?enc=kwsry9EG5%2FOEq%2BaZ7FnukQ%3D%3D.ShSz5N%2FQmpJMUWjUJJOUOQn%2FsW1FGXYNvazKLxMkh2aGGACbbkfaKRmORQJaoXQ9" rel="nofollow">https://github.com/airbnb/javascript</a></blockquote><h3>百度</h3><p><img src="/img/remote/1460000038140042" alt="" title=""></p><p>JavaScript编码规范、HTML、CSS、Less、E-JSON 数据传输标准、模块和加载器、包结构、项目目录结构、图表库标准、react 编码规范。</p><p>比如:缩进</p><ul><li>[强制] 使用 <code>4</code> 个空格做为一个缩进层级,不允许使用 <code>2</code> 个空格 或 <code>tab</code> 字符。</li><li>[强制] <code>switch</code> 下的 <code>case</code> 和 <code>default</code> 必须增加一个缩进层级。</li></ul><pre><code class="js">// good
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
// bad
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}</code></pre><blockquote>规范文档:<a href="https://link.segmentfault.com/?enc=n6l0Qa3j1xZUTLMyC1q%2BAw%3D%3D.YGG%2Fh1pgprRNIl6yi%2BXtNLG6u5aC7EOL4zrMZHWPnEn8NTbdXQB%2BM2EBYl6TeJGmxV%2Fzcx6lOeJMTSARY7lfZe6GMerKTq9IV0Km5s4voDc%3D" rel="nofollow">https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md</a></blockquote><h3>网易编码规范:</h3><p><img src="/img/remote/1460000038140035" alt="" title=""></p><p><strong>CSS规范</strong>:一系列规则和方法,帮助你架构并管理好样式</p><p><strong>HTML规范</strong>:一系列建议和方法,帮助你搭建简洁严谨的结构</p><p><strong>工程师规范</strong>:前端页面开发工程师的工作流程和团队协作规范</p><p>但是并不止于此,还有更多:</p><p><img src="/img/remote/1460000038140036" alt="" title=""></p><blockquote><a href="https://link.segmentfault.com/?enc=VrC%2BXIp53DDDKynr%2ByUpEA%3D%3D.nwKhabsi4C3X1Zp%2FxaAWRVyBByFJxSMcsHx6Zsw1YWA%3D" rel="nofollow">http://nec.netease.com/standard</a></blockquote><h3>JavaScript Standard Style</h3><p><img src="/img/remote/1460000038140039" alt="" title=""></p><p>除很多公司组织外,很多个人也在项目中使用的规范。</p><blockquote><a href="https://link.segmentfault.com/?enc=ERbGXqWZKEVOt1bqKj7Q5Q%3D%3D.ObFfNt0AghET%2FKlntTdSj%2FQLCMVOy7gjRZuF%2BUjmuTGvAmZeXaCAEFdK3Ts7LmY7" rel="nofollow">https://github.com/standard/standard</a></blockquote><h3>Vue</h3><p><img src="/img/remote/1460000038140040" alt="" title=""></p><p>这里是官方的 Vue 特有代码的风格指南。</p><p>如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的参考。</p><p>不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。</p><p>所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏差是可取的。</p><blockquote>官方风格指南: <a href="https://link.segmentfault.com/?enc=5tVt4n1%2B9dIzXjzn2L5X4Q%3D%3D.Ca5NHzpjjGO5DD90v3LFdRylT9a3GASz74GWUu3gV91pPf5SKd%2FGN7lXUT%2FhZTR8" rel="nofollow">https://cn.vuejs.org/v2/style-guide/index.html</a></blockquote><h3>es6</h3><p><img src="/img/remote/1460000038140047" alt="" title=""></p><p>如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的、易于阅读和维护的代码。</p><blockquote>es6 编程风格:<a href="https://link.segmentfault.com/?enc=JNAMbhwJ98W1e%2F4aTV%2FCUA%3D%3D.489%2Bukpou39eyHpARCu1eQsz8vQ6TX8aAwgt4dZnslsLRSBxf4su%2FXFk3vJAXxwt" rel="nofollow">http://es6.ruanyifeng.com/#docs/style</a></blockquote><h3>Bootstrap</h3><p><img src="/img/remote/1460000038140041" alt="" title=""></p><p>内容包含 HTML 和 CSS。</p><p><strong>HTML</strong></p><p>语法、HTML5 doctype、语言属性、IE 兼容模式、字符编码、引入 CSS 和 JavaScript 文件、实用为王、属性顺序、布尔型属性、减少标签的数量、JavaScript 生成的标签。</p><p><strong>CSS</strong></p><p>语法、声明顺序、不要使用 @import、媒体查询(Media query)的位置、带前缀的属性、单行规则声明、简写形式的属性声明、Less 和 Sass 中的嵌套、Less 和 Sass 中的操作符、注释、class 命名、选择器、代码组织。</p><blockquote>Bootstrap 编码规范:<a href="https://link.segmentfault.com/?enc=PxR5g%2BbloZkEkuRZ94MefQ%3D%3D.xjtCsC9clRBWnyVbVB9G4ij3j0OHkqadK3dsOdS5TnY%3D" rel="nofollow">https://codeguide.bootcss.com/</a></blockquote><h3>ESLint</h3><p><img src="/img/remote/1460000038140044" alt="" title=""></p><p>目前绝大多数前端项目都会用到的 可组装的 JavaScrip t和 JSX 检查工具。</p><p><strong>发现问题</strong></p><p>ESLint 静态分析您的代码以快速发现问题。ESLint 内置于大多数文本编辑器中,您可以将ESLint 作为持续集成管道的一部分运行。</p><p><strong>自动修复</strong></p><p>ESLint 发现的许多问题都可以自动修复。ESLint 修复程序可识别语法,因此您不会遇到传统的查找和替换算法引入的错误。</p><p><strong>定制</strong></p><p>预处理代码,使用自定义解析器,并编写与 ESLint 内置规则一起使用的自己的规则。您可以自定义 ESLint,使其完全按照项目所需的方式工作。</p><blockquote>ESLint: <a href="https://link.segmentfault.com/?enc=cPfeMKoFFmfH7sfxAH%2BXqw%3D%3D.0Ky2gXTLmU7lE908gUv1dCN%2FXEozGCM8wCqzP5SytW0%3D" rel="nofollow">https://eslint.org/</a> <p>ESLint 中文网:<a href="https://link.segmentfault.com/?enc=dSKNUs0JpLYMqRLbYDfACg%3D%3D.VBchwKiv3R3apmSFp7p%2B3cBaHGDB67gDyypsc0gzTro%3D" rel="nofollow">https://eslint.bootcss.com/</a></p></blockquote><h3>Prettier</h3><p><img src="/img/remote/1460000038140045" alt="" title=""></p><p>Prettier 是一个“有主见”的代码格式化工具。</p><p>简而言之,这个工具能够使输出代码保持风格一致。</p><p>也是目前绝大多数前端项目都会用到的哦。</p><blockquote>Prettier:<a href="https://link.segmentfault.com/?enc=%2FCJrBF6kDyEFU62L7rRNIg%3D%3D.8WGGAMz9QxPAbmBph%2BfOoN8X%2FC3Vxfu6MbB6nj4vz9o%3D" rel="nofollow">https://prettier.io/</a></blockquote><p><img src="/img/remote/1460000038140043" alt="" title=""></p><h2>最后</h2><p><img src="/img/remote/1460000038140046" alt="" title=""></p><p>好了,【前端GitHub】的第 5 期内容已经讲完了,更多精彩请看下方仓库地址:</p><blockquote>原文地址:<a href="https://link.segmentfault.com/?enc=r%2BIcp9KsXZ7MGh58vhr1CQ%3D%3D.XXEENP8Jsfowv3Az%2F4Umu7Z42%2FW65qkYM6Th%2FhyH1y7aeH3BHIaINDPaYuuF2tFgct5%2FfUm2gz71%2F1YhqNJ4hw%3D%3D" rel="nofollow">https://github.com/FrontEndGitHub/FrontEndGitHub</a></blockquote><p>平时如何发现好的开源项目,可以看看这两篇文章:<a href="https://link.segmentfault.com/?enc=68C5kMpWD1T9hndxGkrEyA%3D%3D.ga%2F7WeZdrsQLfouvHx9N7R9z6kQ4rkDXJvwAAMhEd%2BBkobPsuFKKfGz9Dv9o7Lb%2Ftj9LxdoKwUO5bZfyjkvP7w%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> 和 <a href="https://link.segmentfault.com/?enc=IzYLTKyDfTJuMjx%2FLyHb9w%3D%3D.1mXSxbx6HXUytGE5385acMFnmmfqVgwq1W5T94kczlAAEDdIQIAGw1NJwN3MxNE1QQULsaIHFS8Jw4HOHVEw%2Fw%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a>。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p><p>微信搜 “<strong>前端GitHub</strong>”,回复 “电子书” 即可以获得 160 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=dK1azDFKU%2BHh%2FwY1%2BlfspQ%3D%3D.51xcFAHNtr2NhMvgxwEz9AoAUZ30I8eMA%2B2uJVFHF8oiIO%2Bdeo1xBHVp9i%2BSUg7e50W35mA1fXH8hSOoJOeWoA%3D%3D" rel="nofollow">恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧</a></li><li><a href="https://link.segmentfault.com/?enc=Kr73%2BUt49x648r8mVXDa%2FA%3D%3D.P0L4Thug0RUiy%2FjqqJC2wk5xk0xn8n0Bdc8S%2BPj27bRlLQZNetsbBEMxqAAUi%2BpDKOcnZIcpk9ynL%2B2yUo7DGg%3D%3D" rel="nofollow">GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=%2Fizd07e6WulM2KsCQ71IEg%3D%3D.VT9Pb9mM6MTYxFWvgBrtxKYwnLw%2BwAN%2ByRqX8xdONbjm2dybeyd%2FTWNqfPVdvYyFsXj6rYP7r2L%2FPFOJyb9MZA%3D%3D" rel="nofollow">全球最火的WEB开发学习路线!没有之一!3 天就在GitHub收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=ZrfKNgWyJYVZKqCTfkHkOA%3D%3D.5BJX%2Fx09h3oe6GtJyfhxUGJAikA2CLgrjaDxtPX2oscc7kKj5dUNua1Yz9%2B%2B11hBZIOIDpmTUcF%2FNDl11Sc%2Fzg%3D%3D" rel="nofollow">Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul>
恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧
https://segmentfault.com/a/1190000037727553
2020-11-04T22:30:45+08:00
2020-11-04T22:30:45+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
13
<p><img src="/img/remote/1460000037727557" alt="" title=""></p><p>大家好,我是你们的 前端章鱼猫,一个不喜欢喵、又不喜欢吃鱼的超级猫 ~</p><p>今天给大家带来的是 <strong>在 GitHub 上如何精准搜索的神仙技巧</strong>。</p><p><img src="/img/remote/1460000037727556" alt="" title=""></p><blockquote>【前端GitHub】,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。<p>[前端GitHub] 地址:<a href="https://link.segmentfault.com/?enc=8QVzMGq7yLKbG48DRqv6Bg%3D%3D.LqHhNlv5H5GIX7Hi%2BSsHbR9xJ%2BTc6dK8IxUeVfgz%2B8dDdLYQo%2B5xg%2BvNoUDiMKYRA01e%2B0YJpLSOcSWFVHLgdA%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></p></blockquote><p>以下为【前端GitHub】的第 4 期内容。</p><p><img src="/img/remote/1460000037686955" alt="" title=""></p><h2>普通的搜索</h2><p>相信一般人搜索项目时,都是直接搜索技术栈相关的项目。</p><p>高级一点的搜索,会根据 最匹配、最多 Star 来进行排序、选择相应的语言、选择仓库或者代码来进行筛选。</p><p><img src="/img/remote/1460000037727558" alt="" title=""></p><p>但是 GitHub 的搜索功能只支持以上这些而已吗 ?</p><p>No!</p><p>如果你只会用以上的功能,那你知道的仅仅是 GitHub 搜索的冰山一角!</p><p>GitHub 的搜索是非常强大的!下面介绍更高级的搜索技巧。</p><p><img src="/img/remote/1460000037727560" alt="" title=""></p><h2>搜索语法</h2><p>搜索 GitHub 时,你可以构建匹配特定数字和单词的查询。</p><h3>查询大于或小于另一个值的值</h3><p>您可以使用 <code>></code>、<code>>=</code>、<code><</code> 和 <code><=</code> 搜索大于、大于等于、小于以及小于等于另一个值的值。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>>*n*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=OyNoTzSnvfJDCTOHjUe0pQ%3D%3D.lUOYuQMsb%2F0920l1Wx8HhyY0JrwR2j1ifADU2%2FOKj%2BV2IPQaWOTwZfS0HrbOMR176UY0t7KcVdSB0tIvAj%2F8o4yzmE%2FxO4WndnyecTQhBxpj35e8b4eKnzlh4TZfgTT7" rel="nofollow">cats vue:>1000</a></strong> 匹配含有 "vue" 字样、星标超过 1000 个的仓库。</td></tr><tr><td><code>>=*n*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=HWQIEGUX5jlKxzH3wB%2BVXw%3D%3D.b0H3F06TqCY%2FxPehRNd%2F5d6wXnaYEOCXdAvyI01PEpJESky4i0ygNtnvoXg6jZdDhyNEF%2BejL7HDtjndD2PoYoG4wKWYaqkCJtr7dmCZ%2B6E%2FUY9clRGb4H4N3UNm2Lla" rel="nofollow">vue topics:>=5</a></strong> 匹配含有 "vue" 字样、有 5 个或更多主题的仓库。</td></tr><tr><td><code><*n*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=1QCHqivCPWwuP7poinjgCw%3D%3D.IS4sNzHU%2BBbyZoJoHq6WLTFZIBuEHArWrr%2BnC%2BH6VvTvXXV0mWNzHItRX42pviag6j5ffTmnp7Ct95QrqEQPxkMuZPh%2Fe2iojOZvuRxst8JLwPGr%2Bc5x25A%2BRC9wtqiP" rel="nofollow">vue size:<10000</a></strong> 匹配小于 10 KB 的文件中含有 "vue" 字样的代码。</td></tr><tr><td><code><=*n*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=OAUAw9aWF3caPLJQun%2FKzw%3D%3D.hGBLkE%2BhKTrAPuf6sNtBud341LB2XBL52VUI3vJPdIIekZd0QwrmlziDT0H7ODANSpALkI9qeB%2BtaJ%2B1dH9Gjq7A3io0mQt0oe8LZOr6m5WqxDDl1UVIMXp4Jvi218A7" rel="nofollow">vue stars:<=50</a></strong> 匹配含有 "vue" 字样、星标不超过 50 个的仓库。</td></tr></tbody></table><p>您还可以使用 范围查询 搜索大于等于或小于等于另一个值的值。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>*n*..*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=r7en7P4CZ0thm7xdw6z1IQ%3D%3D.gJF2FQENpsylbl2P8vfwBUnvc44B9HX%2FzaI5HO50cZF%2F3Vkpd7rpOcc2aku%2FAUwhCO%2B5bk5WQMADpnBkrjYxE2ir%2BlHEzC4eO9Qqek6xjyK%2BNlYMW1MYZe9YczgrdVev" rel="nofollow">vue stars:10..*</a></strong> 等同于 <code>stars:>=10</code> 并匹配含有 "vue" 字样、有 10 个或更多星号的仓库。</td></tr><tr><td><code>*..*n*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=SsbW%2BiJaP26fftkehSUU%2BA%3D%3D.9TOwiuXFuAGRfaiJksOkZnBHS8EdGntDEyKtUhBHSt0FVhd0YiS357ACj9rjy%2B3cotqjeGZfkD2WujTJR2Jl5S8OVKrZjnqmQBtMcVwPIqEPraqkuVp7syuef0cPjvSD" rel="nofollow">vue stars:*..10</a></strong> 等同于 <code>stars:<=10</code> 并匹配含有 "vue" 字样、有不超过 10 个星号的仓库。</td></tr></tbody></table><h3>查询范围之间的值</h3><p>您可以使用范围语法 <code>*n*..*n*</code> 搜索范围内的值,其中第一个数字 <em>n</em> 是最低值,而第二个是最高值。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>*n*..*n*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=ByQOKpP2Y93lROkjltYkfA%3D%3D.YEgicGwp5VRfjlSWm%2Fou%2BY6JO9XOLsVp%2B0bc0dm5bJkEuLinxDrZQ6HrROSFtm0E9NUZEs3A4IDr03d0ctBtaBBGiOPeRplh3ZAZUgm2BkSmLnqHKpMO60Q0QSkv6mVh" rel="nofollow">vue stars:10..50</a></strong> 匹配含有 "vue" 字样、有 10 到 50 个星号的仓库。</td></tr></tbody></table><h3>查询日期</h3><p>您可以通过使用 <code>></code>、<code>>=</code>、<code><</code>、<code><=</code> 和 范围查询 搜索早于或晚于另一个日期,或者位于日期范围内的日期。 </p><p>日期格式必须遵循 <a href="https://link.segmentfault.com/?enc=%2FBaBorvkTHwUcjn2QYI6Cw%3D%3D.FiCcWX38i7FsdC39EXEYdhNkG8Eo5ZFkysgB4jSXamz5eoHZogO7yOxRUBrOKBcQ" rel="nofollow">ISO8601</a> 标准,即 <code>YYYY-MM-DD</code>(年-月-日)。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>>*YYYY*-*MM*-*DD*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=EasdwlO33Ht4gLm9XcQI9Q%3D%3D.i7UA1p%2FYxpxOaA9XDP4azFgh%2FN%2FI%2BJjbs1GDlJUAKxxU2GN3u1mmzf55cth%2B%2BJNqTv9WaBpnVCA%2FANppNIWOWyct9braNhdt7EV3i7HbMBxNh%2BPW6nyefUQOc2gEbWUp" rel="nofollow">vue created:>2016-04-29</a></strong> 匹配含有 "vue" 字样、在 2016 年 4 月 29 日之后创建的议题。</td></tr><tr><td><code>>=*YYYY*-*MM*-*DD*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=nl9CqP5Z5q6lgrJ%2FSv59Sw%3D%3D.CIi5LUPSV1jswISf%2FBB%2Faqw4qn7QuhK49PKe0TXMEV193YmYuHDIGuW%2BC6ocZj6AQOQsJO7wAvqYPEa9CG8N1QPvQk1zCkP0pUhE5g%2FlSajWkl5pbieQ3OEFnOqw9A4D" rel="nofollow">vue created:>=2017-04-01</a></strong> 匹配含有 "vue" 字样、在 2017 年 4 月 1 日或之后创建的议题。</td></tr><tr><td><code><*YYYY*-*MM*-*DD*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=iW1ogD1AhMhhC%2F6aKcYabA%3D%3D.VbjPcac48yrtWEg9wxU49oUe%2FuUT9tLj2fDvL7Gn8tUTnFs0APXTCuRf6qnueJOLnpWi3FHcduRxgTmH%2Bgb0OeOiYE78rwTBihtA5t3lQ3FYoAMGvFeOfeKnaiPDg3Zf" rel="nofollow">vue pushed:<2012-07-05</a></strong> 匹配在 2012 年 7 月 5 日之前推送的仓库中含有 "vue" 字样的代码。</td></tr><tr><td><code><=*YYYY*-*MM*-*DD*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=yZ1QmGlZdZEcl1CQGN9N%2FA%3D%3D.EYVUEs7GYEqPVY2mtjc0ew3uHrNIxv%2BmS8phKal9JvFSqWWmVpvdqIiF19BUkOUzp9e8t0PCrQ%2F1ats15KJmV3Xxtue7MNPisaR27%2Fo%2FaLD0fdb9rILNt4FkaCtf5iZT" rel="nofollow">vue created:<=2012-07-04</a></strong> 匹配含有 "vue" 字样、在 2012 年 7 月 4 日或之前创建的议题。</td></tr><tr><td><code>*YYYY*-*MM*-*DD*..*YYYY*-*MM*-*DD*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=Pez%2F4FCwNIAhVaUqegoJeA%3D%3D.PdAvSJMg1rCYAbgnpFp0sT%2F9DHdKOW2HdsDhtPGe8Ft1JULjLr1%2BGNTQJ9F1h2U1VCl7focZ6lF7lQ%2BsFDcYy5pdapn0kHuRAmQOxGzcaxB14vCWUtslm3zLSxArUTtAZTqh0fud7IZnp1skw9UPWg%3D%3D" rel="nofollow">vue pushed:2016-04-30..2016-07-04</a></strong> 匹配含有 "vue" 字样、在 2016 年 4 月末到 7 月之间推送的仓库。</td></tr><tr><td><code>*YYYY*-*MM*-*DD*..*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=uWIjG1s2etl3q26ouEYylw%3D%3D.WOPfFRle%2BU6hLe9XLfj8FEknXfXzi9mnzIMJP21xiKzUrEin71BfT8wicwpAH6F4YDeL0RGyOvBFOsRU5TIu2tzdbAGl%2FxVDP%2FJEuWVvd359FBgdlUpjA1ES3Wo%2FpIQa" rel="nofollow">vue created:2012-04-30..*</a></strong> 匹配在 2012 年 4 月 30 日之后创建、含有 "vue" 字样的议题。</td></tr><tr><td><code>*..*YYYY*-*MM*-*DD*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=pUIOOM2Pn7MdpGlokpnYiA%3D%3D.e2OMJmnn2rYsW3ZUPcA9l7eh%2B90f03yzzDr2bxpn9x5Xs5jjFPRJksOP16wikp7NLDK2gI9pUSUJt2VFINIMJU6R1%2BJRl9nIhcEpTFNLbq9wP3sKGNMabl1gkqOS8co%2B" rel="nofollow">vue created:*..2012-04-30</a></strong> 匹配在 2012 年 7 月 4 日之前创建、含有 "vue" 字样的议题。</td></tr></tbody></table><p>您也可以在日期后添加可选的时间信息 <code>THH:MM:SS+00:00</code>,以便按小时、分钟和秒进行搜索。 这是 <code>T</code>,随后是 <code>HH:MM:SS</code>(时-分-秒)和 UTC 偏移 (<code>+00:00</code>)。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>*YYYY*-*MM*-*DD*T*HH*:*MM*:*SS*+*00*:*00*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=aB%2FvGAFw5Gl%2BkbMkZeFbGA%3D%3D.%2BO9MpK4bFtWs5yGsvxf9dX2dmSoXqOXcQt50mFTW79lazymRd8Zswz4MDwL77%2FchJHpvc%2BkjxwyodYiMGs%2FLVcsQTeWKX6%2B1uCdrjLa12y2IMe2i1PGr0HOscvZ8NcNkSJlcij%2F5%2BbccJ8hXzqds6IODA0aOjU8b7HbrSVL7LdsivCmrv6o5SvolRGwCVk%2BTQ%2FcvwBYEfBZtqr2pu2h1Zw%3D%3D" rel="nofollow">vue created:2017-01-01T01:00:00+07:00..2017-03-01T15:30:15+07:00</a></strong> 匹配在 2017 年 1 月 1 日凌晨 1 点(UTC 偏移为 <code>07:00</code>)与 2017 年 3 月 1 日下午 3 点(UTC 偏移为 <code>07:00</code>)之间创建的议题。 UTC 偏移量 <code>07:00</code>,2017 年 3 月 1 日下午 3 点。 UTC 偏移量 <code>07:00</code>。</td></tr><tr><td><code>*YYYY*-*MM*-*DD*T*HH*:*MM*:*SS*Z</code></td><td><strong><a href="https://link.segmentfault.com/?enc=XQ7i56bN4BolqM%2FS7%2BxuLQ%3D%3D.0mFxkfQREhVHz5MMJo90i3uCZ7CCs0Zcdc1R0wmuEh4BxewVR%2FGfmIBU2Kr8YFJYoeZ8kRCBOfwG0Hfo98GqQFs6z4d79%2BCd%2FH9ECDPpIXM9WAPpGU1ctAUVbjtGXFcXkIdvLN3fSkODXGJbWVfdU%2BuG69Z0JrYYrBfD1Wt73ak%3D" rel="nofollow">vue created:2016-03-21T14:11:00Z..2016-04-07T20:45:00Z</a></strong> 匹配在 2016 年 3 月 21 日下午 2:11 与 2016 年 4 月 7 日晚上 8:45 之间创建的议题。</td></tr></tbody></table><h3>排除特定结果</h3><p>您可以使用 <code>NOT</code> 语法排除包含特定字词的结果。 <code>NOT</code> 运算符只能用于字符串关键词, 不适用于数字或日期。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>NOT</code></td><td><strong><a href="https://link.segmentfault.com/?enc=n9%2Bd9TUcF7%2FrJpWfizR8Jw%3D%3D.P81iP50C41XxcZsSq6CmFLIYc0L%2FuTJZllk4l%2FqIFmVDaG1mzWx16Lx5%2F4%2FmKC4OSBj20h6VseVldVZs55jA3q3Etn1dxgEYp5ZYRWLngco%3D" rel="nofollow">hello NOT world</a></strong> 匹配含有 "hello" 字样但不含有 "world" 字样的仓库。</td></tr></tbody></table><p>缩小搜索结果范围的另一种途径是排除特定的子集。 您可以为任何搜索限定符添加 <code>-</code> 前缀,以排除该限定符匹配的所有结果。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>-*QUALIFIER*</code></td><td><strong><a href="https://link.segmentfault.com/?enc=TjEonOt%2F9EKirOcZL8cv7A%3D%3D.%2BPuaMpF2XrhBlaRCVP%2BZHn25baHcJEFKR%2FKYqq1PpTeLhyQmJACXx9EQ%2F7igBL%2FpqBHweg9zE%2FGzIapedHMOeQlMDehYGT4SBeEXlAYhIIwtSsxy%2BwSNN0gbRk%2BDfFz5" rel="nofollow">vue stars:>10 -language:javascript</a></strong> 匹配含有 "vue" 字样、有超过 10 个星号但并非以 JavaScript 编写的仓库。</td></tr><tr><td> </td><td><strong><a href="https://link.segmentfault.com/?enc=uvKK8S1yBppXRRtwbfZYjw%3D%3D.JwKFCjvNgmOj9%2FqhcNXT%2B4fHvoYOOK8X3a85yKT2xjHdCO8lcHqTX29Ly%2BsPCHBjQM1yZMw0I48HUWmdAim7A4lOTnkFg3JTRNdKtnk0AOcq79esPLCFJkbE7dvZhrQu" rel="nofollow">mentions:biaochenxuying -org:github</a></strong> 匹配提及 @biaochenxuying 且不在 GitHub 组织仓库中的议题</td></tr></tbody></table><h3>对带有空格的查询使用引号</h3><p>如果搜索含有空格的查询,您需要用引号将其括起来。 例如:</p><ul><li><a href="https://link.segmentfault.com/?enc=pPrJ6yurChl3PSmvA7QHAg%3D%3D.VCDo3rNkSHltpfhZbQeMnAMrgTHSyt2TrlqocnHeIMK0BA%2B7qQQASJZgnmpO0nE6bspCt%2FZMqFYoF9ttO6k0KlSd5U%2Fm0z%2BqFHArgU8ai1toske%2BCDTp788kibZ5M5BV" rel="nofollow">cats NOT "hello world"</a> 匹配含有 "vue" 字样但不含有 "hello world" 字样的仓库。</li><li><a href="https://link.segmentfault.com/?enc=xXPb8tT1EFb3266IF26lng%3D%3D.EiCKErSp%2B4M4Z%2FSqfD8XkLLz3YBeyRE3ihoIrZSNrbOGCZOYEUm3Bjo%2FeJf4Sm5ULg6fX%2F5FnSA%2FryA9Ckkf20u2gB69Dc2dzbCh0RjLqHPuhFjp2hJMWt1op2Uo%2BHmq" rel="nofollow">build label:"bug fix"</a> 匹配具有标签 "bug fix"、含有 "build" 字样的议题。</li></ul><p>某些非字母数字符号(例如空格)会从引号内的代码搜索查询中删除,因此结果可能出乎意料。</p><h3>使用用户名的查询</h3><p>如果搜索查询包含需要用户名的限定符,例如 <code>user</code>、<code>actor</code> 或 <code>assignee</code>,您可以使用任何 GitHub 用户名指定特定人员,或使用 <code>@me</code> 指定当前用户。</p><table><thead><tr><th>查询</th><th>示例</th></tr></thead><tbody><tr><td><code>QUALIFIER:USERNAME</code></td><td><a href="https://link.segmentfault.com/?enc=u5%2BQSLUvwTWKyjXFbGMwHA%3D%3D.NpQ0UmL2tC8EiBpLYZ%2BTneUfrScQZDK85z2aOdVqfrmda7H8ldIr%2BsOWtoP7MfJVlDQdcBHp8rMXtdQwN5GhQQ%3D%3D" rel="nofollow"><code>author:biaochenxuying</code></a> 匹配 @biaochenxuying 创作的提交。</td></tr><tr><td><code>QUALIFIER:@me</code></td><td><a href="https://link.segmentfault.com/?enc=5F8s3QqK%2FlYfcEqR%2B28qNw%3D%3D.c5mwmIrxRC81PdQ%2FG2C4cWyZpP1giEvj6VnQ6BVTobfTjJ5%2FajiE86cTrRfo4uHgk7VmLTwq3nxo8Hl9Fallv%2FmZqy%2FBaxvL1XT9Prq6ECE%3D" rel="nofollow"><code>is:issue assignee:@me</code></a> 匹配已分配给结果查看者的议题</td></tr></tbody></table><p><code>@me</code> 只能与限定符一起使用,而不能用作搜索词,例如 <code>@me main.workflow</code>。</p><h2>高级的搜索</h2><h3>按仓库名称、说明或自述文件内容搜索</h3><p>通过 <code>in</code> 限定符,您可以将搜索限制为仓库名称、仓库说明、自述文件内容或这些的任意组合。</p><p>如果省略此限定符,则只搜索仓库名称和说明。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>in:name</code></td><td><a href="https://link.segmentfault.com/?enc=J3w%2FezcnNJOETHoLYdNEmw%3D%3D.nfaJg4602Gra38Jselg9o0%2FqX8z5VBdAwfM%2BGz1Kwl5adM1DpYD7Ul7UzP87zGpTV7IoosQZ3r2914LYPh0qhQ%3D%3D" rel="nofollow"><strong>vue in:name</strong></a> 匹配其名称中含有 "jquery" 的仓库。</td></tr><tr><td><code>in:description</code></td><td><a href="https://link.segmentfault.com/?enc=m0aGjd48UICPHA27LRp1RA%3D%3D.lMgP27BdUYL34w72V0yvbJqazGmQ1sXnSMtmBBIDpg8cn5zazdrVxCuEMHkBEqaGt%2BeTT%2FN80UaVKVP1pvEc%2FuXMOnnLY%2FvaxKz4dKdazWA%3D" rel="nofollow"><strong>vue in:name,description</strong></a> 匹配其名称或说明中含有 "vue" 的仓库。</td></tr><tr><td><code>in:readme</code></td><td><a href="https://link.segmentfault.com/?enc=PYTTgceb8ImQ3oMbzMNLXQ%3D%3D.E6uC1g2wQ%2B1e%2FfqW%2B2j55psM3w1E3B1HC2W1XisjsjK2xmfBpe85EbbDJrFKD7u7TnWJXva0iXe%2F%2B5AtJx%2B%2F1Z%2FTx5ZQ5qzTmQ2zXGDEOD8%3D" rel="nofollow"><strong>vue in:readme</strong></a> 匹配其自述文件中提及 "vue" 的仓库。</td></tr><tr><td><code>repo:owner/name</code></td><td><a href="https://link.segmentfault.com/?enc=jyv7C%2BeolCyB%2FZn7wTHWOA%3D%3D.tcuExhWTCkdZ4gBCu2QoSVxXXy4Yc1Qp6fsMKK0WWcmF4K%2BhZ0rBOyKtjAoQtRMg%2B8oFuaOzT%2BR2Wkxv%2B2qmeg%3D%3D" rel="nofollow"><strong>repo:biaochenxuying/blog</strong></a> 匹配特定仓库名称,比如:用户为 biaochenxuying 的 blog 项目。</td></tr></tbody></table><p><img src="/img/remote/1460000037727559" alt="" title=""></p><h3>在用户或组织的仓库内搜索</h3><p>要在 <code>特定用户或组织</code> 拥有的所有仓库中搜索,您可以使用 <code>user</code> 或 <code>org</code> 限定符。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>user:*USERNAME*</code></td><td><a href="https://link.segmentfault.com/?enc=gQmTLikA2QY%2BKqACRPG1Aw%3D%3D.jQ9n6miixfNTzSzVY3jpjorTPI83lv1CK0WF4dsYG1gviZYB26kuodxE8udKoLmGh%2BmmfzR1VjsYrugvcdXkJmH8GqbF4%2FzmlC1bliph3IUonSSd0GdlKXkkteNjMnEI" rel="nofollow"><strong>user:biaochenxuying forks:>=100</strong></a> 匹配来自 @biaochenxuying、拥有超过 100 复刻的仓库。</td></tr><tr><td><code>org:*ORGNAME*</code></td><td><a href="https://link.segmentfault.com/?enc=pSiG%2FKfpk7isToZ3Wl6tHg%3D%3D.AQoZpKga8whV9gJCsPT3Juz5MOBtHtkhLKpK2V0ruQV5Q6ds8iJ6tZQbXz%2B3OB8fSN32Tds8NzaW8P1MOuU26URGBlQ6Yj2E%2BOgOgoCUww%2FvWP%2BiBxZuNf6kbDt2B28T" rel="nofollow"><strong>org:github</strong></a> 匹配来自 GitHub 的仓库。</td></tr></tbody></table><h3>按仓库大小搜索</h3><p><code>size</code> 限定符使用 <a href="https://link.segmentfault.com/?enc=o1rb1Aanv21gVYA80dvuUw%3D%3D.xuIErWZmgfHe4IMzE1RPds3Dgm4wTNoB1pqP0WZCLXvQb0EV9a0bNnpSNObIydMqk%2BrpRkzVUarivZ5uyIBqHE3lV6G9aP2MTqXDv0WedmEhI%2FDhmpVYclZMYj5Ond2V" rel="nofollow">大于、小于和范围限定符</a> 查找匹配特定大小(以千字节为单位)的仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>size:*n*</code></td><td><a href="https://link.segmentfault.com/?enc=v7hHdbamdGyJT7Vy42HOaw%3D%3D.k%2F98JF%2FDij2dYMAa2BTqu5%2BYjfTClFZaZ%2BlQuYeD4ATcD8mCIt4ILrpZIGFHsO0UBPPL6N6LUlvUXtQ2xNd3cA%3D%3D" rel="nofollow"><strong>size:1000</strong></a> 匹配恰好为 1 MB 的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=%2FuQKnbQ1M1nzipWH1v5m6A%3D%3D.oVQ6EBCuZkW1HO4Qa1vqbxxvPubitkM%2F3y112jH3vFelxKMMnqoR3vW8TIEGL%2BCQwTKIaq0xPZRuTIYEGXQgWLdE70HBTF8vZFNiIHFgKbs%3D" rel="nofollow"><strong>size:>=30000</strong></a> 匹配至少为 30 MB 的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=ynfPpx3TLTtsegDKg44sSQ%3D%3D.sMeFub4CJWIO4wzJCQbHb7AI7IClU6bnGIsQLObiQmoW4BZUT6X1mUZNSo8j3OdsyBQGyp%2BYRPsAcTBKLBaU%2FQ%3D%3D" rel="nofollow"><strong>size:<50</strong></a> 匹配小于 50 KB 的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=OhnN6rxh62a87U2IkF%2FxDA%3D%3D.6Lr2LDMypJYQr2Br08ueT0FGo1uatgiBx2HyDM%2BtWbuFV5aqUFAtrf3nF35WC5672VznQyo8DaSbCtZ4QrEAiJd%2Fn268M7YBBM1eHYEzFhY%3D" rel="nofollow"><strong>size:50..120</strong></a> 匹配介于 50 KB 与 120 KB 之间的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727562" alt="" title=""></p><h3>按关注者数量搜索</h3><p>您可以使用 <code>followers</code> 限定符以及<a href="https://link.segmentfault.com/?enc=gssHNLGiXrJzZrOmFJNOqQ%3D%3D.wtxGid1rahk7%2F6eb4l3KeU5ydZI%2BqtPpX0GrCi37EVZBKpf34U6koU5IAfAM2W%2FW09iF0rsfO%2BEMLZXNx5iztWQYNxRKJ5UEzrtRsEu7gu7OYSo5RU%2FZsBdyczvNrib%2F" rel="nofollow">大于、小于和范围限定符</a>基于仓库拥有的关注者数量过滤仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>followers:*n*</code></td><td><a href="https://link.segmentfault.com/?enc=f2uIrJm3vpjlHjqFfYAWlA%3D%3D.Bw79uZT7WaoFIE4rhLHlXOxb1QnpJIP94xBOCDImaxmNU3U55XCNjA6oM4emQddZT6So6NF7bHyaflWT1eidlw%3D%3D" rel="nofollow"><strong>node followers:>=10000</strong></a> 匹配有 10,000 或更多关注者提及文字 "node" 的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=mF5nb8WO962Er4QkaH5smQ%3D%3D.JdMyslo6e3nMvELXw%2BkxkoDmPGi7RYiY8LS6VTWZ%2Fx%2F%2Bc%2Bhs1uq6ESin9dJ5PWMXABJgRLPiKILLA%2FYXv87QjWSktVF4X5FYT8HZaGZB8Dgzavux%2B3E82tBQUN37l5Ua" rel="nofollow"><strong>styleguide linter followers:1..10</strong></a> 匹配拥有 1 到 10 个关注者并且提及 "styleguide linter" 一词的的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727561" alt="" title=""></p><p><img src="/img/remote/1460000037727565" alt="" title=""></p><h3>按复刻数量搜索</h3><p><code>forks</code> 限定符使用<a href="https://link.segmentfault.com/?enc=vaiXX1dyoXphrnzo%2BR5xgQ%3D%3D.QcDnz%2BOKJU4koyERaQ2iN8F0z273oGYjbzLepdIh2LPXelumfevL9iG3wVpRPDt3mgV16luM704kXWCAiEGV6TVYEQAfmdetHzvK74gF94oEzIczdbrLZytfcl37KQB0" rel="nofollow">大于、小于和范围限定符</a>指定仓库应具有的复刻数量。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>forks:*n*</code></td><td><a href="https://link.segmentfault.com/?enc=7JZ1cBlU%2FsbFO5%2BMGok47A%3D%3D.WfE2TGbCswtHbR81ulgY7KLukeyIjFCW5jF67O%2B5gD6Em%2Ffp7dKAiWEydaSROdy9wJ9nBDx9G0vVCZFTWh2bCA%3D%3D" rel="nofollow"><strong>forks:5</strong></a> 匹配只有 5 个复刻的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=zPIa%2FGx6%2BjfuCsSi%2FxOgyg%3D%3D.oiKOiDRKznUBv9Gio6EDdKVgpjHqTOtwBldSCJ3V2sZJ1FvYsnV5m6m0tumhWdQUgmu2kipaD2xYPS5jvwI%2B1jtmCyUTZR2HAvuDBocszq4%3D" rel="nofollow"><strong>forks:>=205</strong></a> 匹配具有至少 205 个复刻的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=L6jg5GHbUkK74sqlU%2BNKhA%3D%3D.58p%2BVz%2Fasr4BTR5OWsM4wdaWGfenFwfQc9x5AoceMACaojAu%2BcTgyBEh5brIb3yVhChXKbEQUPaM4UdQKvubvw%3D%3D" rel="nofollow"><strong>forks:<90</strong></a> 匹配具有少于 90 个复刻的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=6V6MPIWi7umtPDLTkpdJrw%3D%3D.fQA3MvLmn%2FU92xmFzAuPSd2Lmmbd9e1hQ1ncdz2Atgk1B8IEz2rrajeP09%2BEgmQxl4uxEeWEVPGrz915FILwyJk0trDX4ZZC5Hz8HkCkH%2BM%3D" rel="nofollow"><strong>forks:10..20</strong></a> 匹配具有 10 到 20 个复刻的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727564" alt="" title=""></p><h3>按星号数量搜索</h3><p>您可以使用 <a href="https://link.segmentfault.com/?enc=KA370aLW8S66gHIcpiiw2g%3D%3D.Uj%2FKqEwvd0WyShZAyiOHH1r8jn5di%2BPDZQ58D3H%2FyNgcP4SEZVCFQ2x1dU3%2F2WZt8yg6PesZpF5r7t8UX84L%2F2OcOsQlMnMiCxWHWdT%2FpQ3ZEQeFJDX%2Fv8qGwTScVGuD" rel="nofollow">大于、小于和范围限定符</a> 基于仓库具有的 <a href="https://link.segmentfault.com/?enc=2v1qFOT%2Byk%2FdV%2BAEdEitHw%3D%3D.mwR0TY7LL5wErV3Kj3ru0qfxZzDREQ4KwHGP0pKbsRNi24ushwJHN6UYW9ZQlUw0Vf7vAZExkZ31xRFHMPxni8pz5Ru3LhzzGoqbfLa1HwuZwX9eG8O%2FQaSufECPK77l" rel="nofollow">星标</a> 数量搜索仓库</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>stars:*n*</code></td><td><a href="https://link.segmentfault.com/?enc=BuOSqQwpeTlqnMgy0RoEIA%3D%3D.IxEoBXiiZaeNXuUWNDAt%2FiifcTVwzqmWnAqYujp6sL1yAucfiVqugegJCLCauHyZD8DUN4k%2BMqsLoxen5oIXlZ6y4FmFXnmkmPMIirM3m60iw%2ByVLufuN015LufEmeW1" rel="nofollow"><strong>stars:500</strong></a> 匹配恰好具有 500 个星号的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=%2Bri4%2B%2F7Ln55W0WhbuBa0iQ%3D%3D.0zoc76VWHA0nEPxU0T2Rdk52ePMCm38Vy3CXbQp0Fwhuo0vYPyTwlFYjVbvLvzK5U6FzA%2FsFDN3m0lzWFuhuDqZr5T8%2FSG1%2FxcKF5Dd2XWI%3D" rel="nofollow"><strong>stars:10..20</strong></a> 匹配具有 10 到 20 个星号、小于 1000 KB 的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=jecy%2F8mJ%2B86TvSeCTtT0jg%3D%3D.Ci2HpSvUx2ITiAFA8n7pCZYPJ4nXif5%2BLlldHzblnp2dO%2FQkwhFWkQvQZQHyzFxFvr4bFEoqkpIXA%2F9oLWng5sOriDjEhRjXdTEb%2BY6ha59IiAlr8M3v9R0XAW7AdNNy" rel="nofollow"><strong>stars:>=500 fork:true language:vue</strong></a> 匹配具有至少 500 个星号,包括复刻的星号(以 vue 编写)的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727567" alt="" title=""></p><h3>按仓库创建或上次更新时间搜索</h3><p>你可以基于创建时间或上次更新时间过滤仓库。</p><ul><li>对于仓库创建,您可以使用 <code>created</code> 限定符;</li><li>要了解仓库上次更新的时间,您要使用 <code>pushed</code> 限定符。 <code>pushed</code> 限定符将返回仓库列表,按仓库中任意分支上最近进行的提交排序。</li></ul><p>两者均采用日期作为参数。 日期格式必须遵循 ISO8601 标准,即 <code>YYYY-MM-DD</code>(年-月-日)。 </p><p>也可以在日期后添加可选的时间信息 <code>THH:MM:SS+00:00</code>,以便按小时、分钟和秒进行搜索。 这是 <code>T</code>,随后是 <code>HH:MM:SS</code>(时-分-秒)和 UTC 偏移 (<code>+00:00</code>)。</p><p>日期支持 <code>大于、小于和范围限定符</code>。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>created:*YYYY-MM-DD*</code></td><td><a href="https://link.segmentfault.com/?enc=hIusYl0wN%2FFyBuQKGtIC0A%3D%3D.bUvDX8O1RN87hTp6YX0VukSSds3gz1zzXbKNPOOFCmqpjiBE7LcrHThnYVmEycTznRLlzheYYAd3GlWsWMkJAHHXHDqN%2F%2Fhg7b0wlx%2FwCzE%3D" rel="nofollow"><strong>vue created:<2020-01-01</strong></a> 匹配具有 "vue" 字样、在 2020 年之前创建的仓库。</td></tr><tr><td><code>pushed:*YYYY-MM-DD*</code></td><td><a href="https://link.segmentfault.com/?enc=Pt0l%2F29D%2BMXmSX%2FoKEgfig%3D%3D.R%2FSJ9jf7OhS1qY0xSpbguRfZbiP3jLzBdLue%2BNAJJoAa3KHlJvLjQLyYfLGACAi7h01p2%2BfPajPg6bDMrBhlCQI3FU0DVfev5Y1mPKb4dJwyTzuaLvGleJs8Q%2BErUsnL" rel="nofollow"><strong>css pushed:>2020-02-01</strong></a> 匹配具有 "css" 字样、在 2020 年 1 月之后收到推送的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=o45Cc5OP3A7L7YhGMwg5Iw%3D%3D.7JF2pJvCCZavsHP%2BJfZEU113QJPMhVqIuN0pez%2Bk%2BwIEjj%2BDYoAsjBi1%2Bp1q%2BX%2Bgq6xbF8CNarJJbQIn5JA987i%2FFpoFQCsTE8ayxyQuke2aWFi0K7yG5VOgNuNuT9%2FY" rel="nofollow"><strong>vue pushed:>=2020-03-06 fork:only</strong></a> 匹配具有 "vue" 字样、在 2020 年 3 月 6 日或之后收到推送并且作为复刻的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727566" alt="" title=""></p><h3>按语言搜索</h3><p>您可以基于其编写采用的主要语言搜索仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>language:*LANGUAGE*</code></td><td><a href="https://link.segmentfault.com/?enc=GTOdWzOMsixuDWCMTaqr1A%3D%3D.MaIeS8eqwQH2k7%2B3dq5Bc8QVHacRbGWpssIPZyR1w31C424H054kYADVDJt9wB%2B7%2Buv05%2BFhFpgpBbtOANWU%2BC2V3OZrLAil1aGSFXwZYF4%3D" rel="nofollow"><strong>vue language:javascript</strong></a> 匹配具有 "vue" 字样、以 JavaScript 编写的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727563" alt="" title=""></p><h3>按主题搜索</h3><p>您可以查找归类为特定 <a href="https://link.segmentfault.com/?enc=giw3Do7LRRxHrlIAvtnGTw%3D%3D.7Qa1c5jRb9VM4ZGuHxuFCOQDxK0xddlAATSAu44Yn3hY8N3YtLvMT31Hly12w%2ByZJPFoYgJ3J%2BP6WDd%2FL9u4vHGlzqMNYnL5R%2FVhv0znfP1Dx0VYxKbQrFLvVXmH7W67ghi9BA%2BOfLypRPSKXoO%2BqQ%3D%3D" rel="nofollow">主题</a> 的所有仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>topic:*TOPIC*</code></td><td><a href="https://link.segmentfault.com/?enc=H6v6gk4x7VnVhBmmX82ozw%3D%3D.RigX%2BP2yF9ztmham7japzoSp5Z06CogbuVXkyhT8szAXraMeBM20UIIlyJMPcOWW33D4gUfBB1bgjOqHp5hTnas8eueTjtLXEh2CU3CKwhLkwg%2B5sN%2BJ6UQFraUiPW1hrTsdg0dCKMJ9G6Q1mM0BEA%3D%3D" rel="nofollow"><strong>topic:algorithm</strong></a> 匹配已归类为 "algorithm" 主题的仓库。</td></tr></tbody></table><p>估计又有很多人不知道 GitHub 上有话题一说的吧。</p><p><img src="/img/remote/1460000037727568" alt="" title=""></p><p><img src="/img/remote/1460000037727570" alt="" title=""></p><h3>按主题数量搜索</h3><p>您可以使用 <code>topics</code> 限定符以及 <a href="https://link.segmentfault.com/?enc=jyDwQbT5allb6U5NdGRqBA%3D%3D.JKP36TE%2F9RkuVHrvSgGvfyz1JQWDZ8jrVN85GeTiAULXZk08HTDHaoYo4rAaoOl8NWkF654TSBjBanWQl731qmrdwSs0S3Yc6po4qmfFR2bpEuVv4X7wjlK5WJQfU8PU" rel="nofollow">大于、小于和范围限定符</a> 按应用于仓库的 <a href="https://link.segmentfault.com/?enc=Y0iUxMMcwTHi47Fwlhl%2BVQ%3D%3D.w9OcXZzlgDWixYFIp1CFEDOwgvJqlh7Ml9n9hQ2qYg%2FTr6Q8UIx7V1%2FAv5IPCS3K9NX83eQM9oLtOah27JiS%2FgcyucsVXWfXMo%2B3uuw6zrqZs0DSwvRSbxTjpb67imr8buFEwdg6f%2B8Dt%2FmFA9N3hA%3D%3D" rel="nofollow">主题</a> 数量搜索仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>topics:*n*</code></td><td><a href="https://link.segmentfault.com/?enc=XAff3gtiyHz5kpsFBI92lw%3D%3D.AWvymCNrdsJTSDiDEpOsTTMOJ%2BU82b%2FNujwMlIRJfVwF8qXTI8MdrEOdzQtGTaXq%2Fv77cHXMqsdaT3ZpVfLiYRxug7KPm73Jrnc7wpWLpncTRyPAhRPsKfC7JyAUSR0gpWWw5Nrkd0ZIgPequAEOXw%3D%3D" rel="nofollow"><strong>topics:5</strong></a> 匹配具有五个主题的仓库。</td></tr><tr><td> </td><td><a href="https://link.segmentfault.com/?enc=zWZ8dKIS67k60%2F2VcPd9vg%3D%3D.Wj4%2FwbdMs6e585qAp%2BUTxG%2B1%2Fud64MrB%2Fjv4LkJJuGnhVdCJ72uBurrajRnnaZomvbJMvi6YbdRYh5SqII%2BMidia7xb2mUCGvncH7io%2F1KIIKROeLEWGPaSLMnIKaWWEiWq%2FkzoT%2Br3NoM4qQ6SFBA%3D%3D" rel="nofollow"><strong>topics:>3</strong></a> 匹配超过三个主题的仓库。</td></tr></tbody></table><p><img src="/img/remote/1460000037727571" alt="" title=""></p><h3>使用可视界面搜索</h3><p>还可以使用 <a href="https://link.segmentfault.com/?enc=XeNmQnqmyipd2%2FQdhiRUXg%3D%3D.PUk%2F9NKWIbMP%2F%2Bq%2F5NlXUesAPm4Dz4u481sKzesTFHY%3D" rel="nofollow">search</a> page 或 <a href="https://link.segmentfault.com/?enc=v%2B2mwfD%2FdgztxAscjXo2SQ%3D%3D.GpQGH%2F7lbcFHCf0S%2Bldgd%2BP4VoTybA2sD%2FpWUG9zMUZKlMerdVwuluHnp%2F4fGBlb" rel="nofollow">advanced search</a> page 搜索 GitHub 哦。</p><p>这种搜索方式,估计就更少人知道了吧。</p><p><a href="https://link.segmentfault.com/?enc=InTEccwqyp9DI%2FNaksFZSA%3D%3D.plvEYQn%2B6Y1mJ9m4GMDdwHffyn08k9h4DGgvHxZVWaaIL%2FekAO9sLz8UoU%2BqJZmQ" rel="nofollow">advanced search</a> page 提供用于构建搜索查询的可视界面。 </p><p>您可以按各种因素过滤搜索,例如仓库具有的星标数或复刻数。 在填写高级搜索字段时,您的查询将在顶部搜索栏中自动构建。</p><p><img src="/img/remote/1460000037727573" alt="高级搜索" title="高级搜索"></p><h3>按许可搜索</h3><p>您可以按其<a href="https://link.segmentfault.com/?enc=aZClro2smvhqkdoZK9KBvQ%3D%3D.m41k%2B87MmyNCqLweIpN6QLoS6F2wBkBTWudzbMHCmjqOZeo95HO3xjabv1ERh%2FleSTH4yQ3t5Ys3GPloFDOLsVwmy7jVDiOsZ9nobV21Ihw%3D" rel="nofollow">许可</a>搜索仓库。 您必须使用<a href="https://link.segmentfault.com/?enc=q0d3ZS6oxE9sjQ%2B0f62Yaw%3D%3D.iNr5TIKP5orOhtE1DvHznidE1o5Ee0U2bDOkaehT0ZdckRz2i4BSCztO0YB98ORxbgDjMXmxFYwGq1Qqz3UccK3I452yqbVjOlwl1jZtfsPHPt5oIiNpDzV%2BXSGJoYcipvxPfZQQz7sYy%2FowMRBTAuDQf97W1usrJ7TAlylym0s%3D" rel="nofollow">许可关键词</a>按特定许可或许可系列过滤仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>license:*LICENSE_KEYWORD*</code></td><td><a href="https://link.segmentfault.com/?enc=tIe1Z7ZdWIrAu2Vubu2VbQ%3D%3D.4HuruOtPycsDvVHZeTr0h2VPaJQ%2F%2BKtaHGgwSmeyTmWzObOIeQmSqZI4okhGJGAus6izq%2BdojWB2D5XRqH9zrPIHM0IjRQoQ1c19Ydz66BqoMxjbS7oh8mmfVOWPhWRCKyyln9aoPiCj9PfKG6goHQ%3D%3D" rel="nofollow"><strong>license:apache-2.0</strong></a> 匹配根据 Apache License 2.0 授权的仓库。</td></tr></tbody></table><h3>按公共或私有仓库搜索</h3><p>您可以基于仓库是公共还是私有来过滤搜索。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>is:public</code></td><td><a href="https://link.segmentfault.com/?enc=tVTrIFQXz0KYNViScEd0Jw%3D%3D.H2iAdLnnP0dE2cl0WD0vhkE%2FHWMO%2FYuTZ%2BWqrrFhCo4VNZpDq2Z4XSsE%2BxbiNQPsLgqjmv55aPFY1bw87vMxyZ4SNtpmPE5xfCcd1gWr3VKEb8NJdp1M043Y0H2CmbRz" rel="nofollow"><strong>is:public org:github</strong></a> 匹配 GitHub 拥有的公共仓库。</td></tr><tr><td><code>is:private</code></td><td><a href="https://link.segmentfault.com/?enc=13DRQ%2FIJJHHZeWW3MoX7IA%3D%3D.bGT0MAYu1Icr%2FxpKn8YDIVwlPhoPalMouIfF%2BPiIjhLx5F3CZKNnv%2FO23vrOJevIhqJgOKvLYZr9C2%2BWXNrUZJliP1gf1tLob5pzjfRDFwjSmiwts4U4pq26kCcCJAv%2B" rel="nofollow"><strong>is:private pages</strong></a> 匹配您有访问权限且包含 "pages" 字样的私有仓库。</td></tr></tbody></table><h3>按公共或私有仓库搜索</h3><p>您可以根据仓库是否为镜像以及托管于其他位置托管来搜索它们。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>mirror:true</code></td><td><a href="https://link.segmentfault.com/?enc=1dU9kOpTEm%2BjPlL27WGyzA%3D%3D.qXyNNVPgB4GiYnSvYnxbGHLGM19Iz4rwsSGLdgdZrNQNSAS%2FvL6MYAf6xbU1gNAbL6VDOz%2FWqKCTNF1MJT3lq4iO5YDygvvW%2Bh5CxIaI6GE%3D" rel="nofollow"><strong>mirror:true GNOME</strong></a> 匹配是镜像且包含 "GNOME" 字样的仓库。</td></tr><tr><td><code>mirror:false</code></td><td><a href="https://link.segmentfault.com/?enc=xp%2BCbrZ6wETjWfhd0TH%2FOw%3D%3D.qmTW3UvBe4beC1%2FfYA8ak%2B4afCtNoyYveXBau1rbP8OHRv3297zOom7Kw9BGmYn2LTbv7bVTarn%2BdgsXAbIWbqLFFXkr%2FOKyrmk0wjJJjwk%3D" rel="nofollow"><strong>mirror:false GNOME</strong></a> 匹配并非镜像且包含 "GNOME" 字样的仓库。</td></tr></tbody></table><h3>基于仓库是否已存档搜索</h3><p>你可以基于仓库是否<a href="https://link.segmentfault.com/?enc=xeVFatnkvmSyXxhCaLzedw%3D%3D.tygzEppuEbGTNtDZ7mDZyks7QISk%2FJeHhnKC6ZRl984tkhnx%2F%2B04tdzWpKBx0XnGa82z3QbKwib3YVcWUvnu4POj%2BGgMZM79B48fGryrNWm0bxH4mLhQmuyHaflYU474" rel="nofollow">已存档</a>来搜索仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>archived:true</code></td><td><a href="https://link.segmentfault.com/?enc=y9pyNSB9o7Wjv2sfLz8lYw%3D%3D.1CCoDDmQa0NQyfFu1nXOkOhmZZxjSkkIR76AU2dp0bdji%2FgzYB6y0lFuiD6iyoY51SgT%2BWlyLr4LWtl%2Btdftaqnh%2BFdZwxB5WXY0mRyPjR4%3D" rel="nofollow"><strong>archived:true GNOME</strong></a> 匹配已存档且包含 "GNOME" 字样的仓库。</td></tr><tr><td><code>archived:false</code></td><td><a href="https://link.segmentfault.com/?enc=DSv1Y6fKmDD0%2Bg0ePUfO1Q%3D%3D.VmrwLs0w0nz%2FlpOwPfQDpWjwubh7sXRDFZQ9uE6KXU%2Fji0Gl6eHz7%2BD21f025ebc7CT3GE83mkcg8w31Eypz%2BqtU5clmnfONdSmRL6g7H00%3D" rel="nofollow"><strong>archived:false GNOME</strong></a> 匹配未存档且包含 "GNOME" 字样的仓库。</td></tr></tbody></table><h3>基于具有标签的议题数量搜索</h3><p>您可以使用限定符 <code>help-wanted-issues:>n</code> 和 <code>good-first-issues:>n</code> 搜索具有最少数量标签为 <code>help-wanted</code> 或 <code>good-first-issue</code> 议题的仓库。</p><table><thead><tr><th>限定符</th><th>示例</th></tr></thead><tbody><tr><td><code>good-first-issues:>n</code></td><td><a href="https://link.segmentfault.com/?enc=X3I9qj1hSr0Wbn%2Bgo6kvtQ%3D%3D.jaO9HdtVqXBsS284rCKx8YFAOPl8IMJ%2BMhHNvT544lxWn%2FwAU40Uzlt3YxZ%2Fj34hi38mON2Z5F%2FXnjeek6Wo%2FWQdfiDaZwOwySQ2PCGJAa5WEeR4RDKQYPxoZ5pLUSmX" rel="nofollow"><strong>good-first-issues:>2 javascript</strong></a> 匹配具有超过两个标签为 <code>good-first-issue</code> 的议题且包含 "javascript" 字样的仓库。</td></tr><tr><td><code>help-wanted-issues:>n</code></td><td><a href="https://link.segmentfault.com/?enc=lLvzqBx5k73xMCnOwPfVpg%3D%3D.AZTf%2BKodsAFs3kycGoUEYcwUfGNRvIH6EpjqJ1eocjfpDxRH%2F9C5cMaYRcVFwoKiUcMgTAjIyWxvYszSE1tJuuespam6T88QyWzrCSTZ54y033HiMRP0bh09eAvsEpbx" rel="nofollow"><strong>help-wanted-issues:>4 react</strong></a> 匹配具有超过四个标签为 <code>help-wanted</code> 的议题且包含 "React" 字样的仓库。</td></tr></tbody></table><h2>学习</h2><p>其实,以上很多内容的都是来自于 GitHub 的官方文档,如果你还想学习更多技巧,请看</p><blockquote><a href="https://link.segmentfault.com/?enc=4dFfRY21PdzRIJcvd1b%2BSg%3D%3D.L4UhMe0lMw1aKZAZM3QPOCsM31lKOUMkO%2BDqPEUZNAQ%3D" rel="nofollow">GitHub 官方文档</a> : <a href="https://link.segmentfault.com/?enc=VE7p%2BH58OhiTSu1P7C2dUg%3D%3D.rB%2BhL3PKANgA7TTzbq26lB1vfEKopOanYuNzKCOlgIs%3D" rel="nofollow">https://docs.github.com/cn</a></blockquote><p><img src="/img/remote/1460000037727572" alt="" title=""></p><p><img src="/img/remote/1460000037727569" alt="" title=""></p><p>如果你还不了解或者不会使用 GitHub ,可以看看这一章节:</p><blockquote><a href="https://link.segmentfault.com/?enc=Me6JyivK1uG%2ByZFmgkvZsw%3D%3D.1OJEbFd8hu6BefcjWaeRfCcIWwstWqysKThGgs1jLrKiNA4Q3tZ7BoVmItLGzYIxHdzpMw%2B%2BEtlk8pEuMRMo1qQiRMElPl7yIk%2F0fTyv%2Bi%2B%2BcNN5Y9i1m%2BLZ6xJ9t6VQ1rykBJ85flUtCocL2TcjO87jDujQ9bRNJ8avshwyOfc%3D" rel="nofollow">Git 和 GitHub 学习资源</a> :<a href="https://link.segmentfault.com/?enc=LWG0itb4R1qwD9NrAhrYiw%3D%3D.79%2FWfWJwNYZU27OU5o10EWJG4%2FtEYNYQGwxwhi9IPZQDGgwJHYmhWuRUEKZhFsAlSlI9%2B52kYwypni2%2Bs5a5NTG8hWVQ1c%2F%2Fb%2FIQ%2BOzDBpzgo3suukFiK1QH%2FhF6P8m33242VzRWxt2WfvqZor%2FrYMeeVH1jdCwj7yn07msbX6M%3D" rel="nofollow">https://docs.github.com/cn/fr...</a></blockquote><p><img src="/img/remote/1460000037727575" alt="" title=""></p><h2>最后</h2><p><img src="/img/remote/1460000037727574" alt="" title=""></p><blockquote>[前端GitHub] 地址:<a href="https://link.segmentfault.com/?enc=zfh8iY71kPeMh9%2BZjvANFQ%3D%3D.72yx7Y7NivPNbtYuzDKu%2BnEhR20%2FtVJnTcKEdL0ljqJBiDkQlCWC0XnyljtfZleYO4gm%2FNH9vwAp6jMCeVh8Gw%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=Ktr2pi5JfVOdchsyZELhKw%3D%3D.CnkXAX%2Ffj5OcWX4qsM2FFWhE8X6R4AbxiT5CChitFhdwHorBKvNFgBJO0HkKuAFDHFHJXyzcWILs5jtfeHREUw%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a>。</p><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p><p>在公众号后台回复:<strong>电子书</strong> ,可以获得 <strong>160</strong> 本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p><p><strong>往期精文</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=imbJ%2BfH0Dd2y%2BzeG9YGyeA%3D%3D.7U2fIlHaEOdaX%2BJ%2BnjMYMzRIlHcVawsFjye1SZzuh383iUzsZXQt0URvmQj6CAtOLEb%2FPVN3dKrjb3ET9AT12Q%3D%3D" rel="nofollow">GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一</a></li><li><a href="https://link.segmentfault.com/?enc=mP1VsracvwcIRGiICmI0fw%3D%3D.tH50AWtSltqxJNY64hwK3nlftOGw4Tskw1O5n%2FUkzAv5ujOXts%2BHvhBSsdUDbosqATcjM0fOq7j3ZItt3375Cw%3D%3D" rel="nofollow">全球最火的WEB开发学习路线!没有之一!3 天就在GitHub收获了接近 1w 点赞</a></li><li><a href="https://link.segmentfault.com/?enc=S7A%2FOQJCWfO5KwoNBv9orQ%3D%3D.jg9DLoMwuAVyoub13drzgj02ocWiLNro%2BR688gteNF0kj1D%2BOp1BuMMv5Bg%2BtcEew5XMd0Q3zT0Z%2BEbt9LrMhA%3D%3D" rel="nofollow">Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了</a></li></ul>
GitHub上最火的、最值得前端学习的几个数据结构与算法项目!没有之一!
https://segmentfault.com/a/1190000037686952
2020-11-02T08:15:16+08:00
2020-11-02T08:15:16+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
35
<p><img src="/img/remote/1460000037686956" alt="" title=""></p><hr><p>Hello,大家好,我是你们的 前端章鱼猫。</p><h2>简介</h2><p>前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。</p><p>相信很多人都没有逛 GitHub 的习惯,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。</p><p>从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。</p><p>看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。</p><p>因此也收藏了不少好的开源项目,在此推荐给大家,每周会有一到三篇的文章推送。</p><p>希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><blockquote>【前端GitHub】,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。</blockquote><p>以下为【前端GitHub】的第二期内容。</p><p><img src="/img/remote/1460000037686955" alt="" title=""></p><h2>前言</h2><blockquote>算法为王。<p>想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手;只有内功深厚者,前端之路才会走得更远。</p></blockquote><p>本文推荐几个 GitHub 上值得前端学习的数据结构与算法项目,包含 gif 图的演示过程与视频讲解。</p><h2>数据结构与算法</h2><p>关于数据结构与算法的 GitHub 项目,star 数由高到低排序。</p><h3>javascript-algorithms</h3><blockquote><a href="https://link.segmentfault.com/?enc=2f55mH%2BlOC5LT1cD5hVttw%3D%3D.oOMjQ90%2FTejbrH5Dqd0M3xio%2B2EMmZw2clF1tHykxj1HzFTcey%2FfZwPQQ30YjYAN9rRtKjkgrcfNRhpNk7na2Q%3D%3D" rel="nofollow">https://github.com/trekhleb/javascript-algorithms</a></blockquote><p>该仓库包含了多种基于 JavaScript 的算法与数据结构。</p><p>每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。</p><p>数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器</p><p>算法包含了 算法主题 和 算法范式。</p><p>其中算法主题又包含了:数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。</p><p>算法范式:算法范式是一种通用方法,基于一类算法的设计。这是比算法更高的抽象,就像算法是比计算机程序更高的抽象。</p><p>算法范式包含了:BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。</p><p>这项目还出了对应的教学视频,总共 81 个视频讲解,每个视频大概 5 - 10分钟左右,还能学习英语哦 😉</p><p><img src="/img/remote/1460000037686958" alt="" title=""></p><blockquote>youtube 的教学视频:<a href="https://link.segmentfault.com/?enc=l%2B%2F86IC6Ei2qx7bSuWlcHA%3D%3D.HKBJRYbDLA%2BW0imqaP%2FXmZKtNvFZMRhrTquEafucin4DHtQEcivFBGHrIb27cbGKHOpyHXLH6RLGuayugJgjD2dwR1%2FZILZIo1tc%2FlRJRf4%3D" rel="nofollow">https://www.youtube.com/playl...</a></blockquote><p>前端章鱼猫之前学习算法的时候,也在这个项目中收益良多呢!</p><p>而且这个项目还一直有维护和更新内容哦!真的非常不错的一个项目!</p><hr><h3>algorithm-visualizer</h3><blockquote><a href="https://link.segmentfault.com/?enc=XgHrqruxwacDa5jOMCVmnw%3D%3D.TfQ6jDsgPQ3g9qzgKvoemVGHboZeKaAxHpEst09MWZZ20jIgBYHfUBNBQeWPs26r0ox4yYjTPUapY5vUYNzznw%3D%3D" rel="nofollow">https://github.com/algorithm-visualizer/algorithm-visualizer</a></blockquote><p>算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法。</p><p>通过可视化方法学习算法变得容易得多。</p><p>Algorithm Visualizer 是一款有趣的在线开源工具,内含多种算法并进行了直观可视化呈现, 让学习算法和数据结构更加直观。</p><p>目前支持的算法包括回溯法、加密算法、动态规划、图搜索、贪婪算法、搜索算法、排序算法等。</p><p>Algorithm Visualizer 的目录区,选择任何算法,中间就会动态演示,日志输出区记录每次搜索的过程。</p><p>该算法可视化工具是一个用 React 编写的 web 应用程序。它包含 UI 组件并将命令解释为可视化。</p><p>如果你是算法初学者,强烈推荐这个「算法可视化」工具 Algorithm Visualizer,很清晰地绘制了每一个基础算法的原理和运作流程。</p><p><img src="/img/remote/1460000037686957" alt="算法可视化工具" title="算法可视化工具"></p><hr><h3>algo</h3><blockquote><a href="https://link.segmentfault.com/?enc=fG9TTgwqgc2iymsxRkEQNQ%3D%3D.EloCx1MUiiuqW54wYiR6jkhC46Z2AaLj7hy9rqHun7KsU70c7P5m4Q4VxYq5%2BY2G" rel="nofollow">algo: https://github.com/wangzheng0822/algo</a></blockquote><p>数据结构和算法必知必会的 50 个代码实现。</p><p>包含数组、链表、栈、队列、递归、排序、二分查找、散列表、字符串、二叉树、堆、图、回溯、分治、动态规划 等。</p><p>每个代码实现有解释,测试用例。</p><pre><code>// 选择排序
const selectionSort = (arr) => {
if (arr.length <= 1) return
// 需要注意这里的边界, 因为需要在内层进行 i+1后的循环,所以外层需要 数组长度-1
for (let i = 0; i < arr.length - 1; i++) {
let minIndex = i
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] < arr[minIndex]) {
minIndex = j // 找到整个数组的最小值
}
}
const temp = arr[i]
arr[i] = arr[minIndex]
arr[minIndex] = temp
}
console.log(arr)
}
const test = [4, 5, 6, 3, 2, 1]
bubbleSort(test)
const testSort = [4, 1, 6, 3, 2, 1]
insertionSort(testSort)
const testSelect = [4, 8, 6, 3, 2, 1, 0, 12]
selectionSort(testSelect)</code></pre><p>该仓库是《数据结构和算法之美》《设计模式之美》专栏作者创建的,前端章鱼猫也学习过他的《数据结构和算法之美》,非常不错的学习教程。</p><hr><h3>awesome-algorithms</h3><blockquote><a href="https://link.segmentfault.com/?enc=hGj7qBa71jxVgR0kgxPR2Q%3D%3D.Hq9AMoeuqgqn%2BZ6zdAiKPIDTXKVsWcJkhtlqKKAfW8ArhUubJDgwjyKntVaUKArzco%2Fl4k%2F1AIZfwmghMOrf1g%3D%3D" rel="nofollow">https://github.com/mgechev/javascript-algorithms</a></blockquote><p>此存储库包含不同著名计算机科学算法的 javascript 实现。</p><p>该仓库是不错的,不方便学习的地方就是需要安装依赖并运行才能看到效果及文档。</p><pre><code>Call:
npm install
To setup repository with documentation
npm run doc
This will build the documentation and open it in your browser.</code></pre><hr><h3>JS-Sorting-Algorithm</h3><blockquote><a href="https://link.segmentfault.com/?enc=e17LOvs24oh2mwIxFNhdDQ%3D%3D.85d7axbUOK5NF2a7A1emTDFq%2BjaY%2FS0cs30kfjRBLtFuy84eoQhFIiuDbAVo0wn%2F" rel="nofollow">https://github.com/hustcc/JS-Sorting-Algorithm</a></blockquote><p>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》,使用 JavaScript & Python & Go & Java 实现。</p><p>包含冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。</p><p><img src="/img/remote/1460000037686963" alt="" title=""></p><p>该仓库的文章有定义有解释、有代码实现、还有动态图,入门十大经典排序算法是个不错的教程。</p><p><img src="/img/remote/1460000037686959" alt="" title=""></p><hr><h3>JavaScript 数据结构与算法之美</h3><blockquote><a href="https://link.segmentfault.com/?enc=nZq3eimj%2B4YsViSZ65PN0A%3D%3D.BNgCtxBQsIp3Q34vX6aqrQCW4MFEEWDzv9HD%2Fa%2BM9etrUIa3XXOzJW%2BSYSyBdKQEWooMW50QCwAPH08IWsEYTNDmcxz7wSJdFs2VKmaxg38nq%2B9k4RqmmjHT%2FxC8mXe0Vir26UsYPUadH89l4nFWKaHo5x7CQL%2B4jtLBBlt1kNthFp%2BLxAy%2B8c2P3Aiyd35X" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><p>包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画、还有算法可视化工具。</p><p><img src="/img/remote/1460000037686960" alt="" title=""></p><p>这是比较精简的 JavaScript 数据结构与算法 的讲解。</p><p>该仓库总共写了 10 篇算法入门的文章</p><ol><li>时间和空间复杂度</li><li>线性表(数组、队列、栈、链表)</li><li>实现一个前端路由,如何实现浏览器的前进与后退 ?</li><li>栈内存与堆内存 、浅拷贝与深拷贝</li><li>递归</li><li>非线性表(树、堆)</li><li>冒泡排序、选择排序、插入排序</li><li>归并排序、快速排序、希尔排序、堆排序</li><li>计数排序、桶排序、基数排序</li><li>十大经典排序算法汇总</li><li>GitHub 上 170K+ Star 的前端学习的数据结构与算法项目</li></ol><p>也是非常不错的数据结构与算法的入门学习资料。</p><p><img src="/img/remote/1460000037686962" alt="" title=""></p><hr><h3>daily-algorithms</h3><blockquote><a href="https://link.segmentfault.com/?enc=NP%2BwxHCJU2FtV0lfYmnKmg%3D%3D.FYjJ82G0i3KtNPiQQ1DRvuRZUeX9POlsDRXQOqIFecfMlHPTZs2oHcjUlSsLDkr%2F" rel="nofollow">https://github.com/barretlee/...</a></blockquote><p>算法,每日练习的一个项目。</p><ul><li>★ 表示 easy,★★ 表示 medium,★★★ 表示 hard;</li><li>题目主要来自 leetcode,可能会适当变换题设,改变难度;</li><li>对于 ★ 和 ★★ 难度的题目,每天的量会随机出现 1~5 个,尤其是 ★ 的题目,比较简单。</li></ul><p>白天出题,尽量晚上给出参考答案。</p><p><img src="/img/remote/1460000037686964" alt="" title=""></p><p>项目也不错,是以参与讨论的形式与大家一起学习数据结构与算法的。</p><p>就是内容积累还不够多,还不够火。</p><hr><h3>JavaScript 更多 ...</h3><blockquote><a href="https://link.segmentfault.com/?enc=RhdrTfSXbysrvzv9VdV%2BHQ%3D%3D.kOyEF0%2FcPlyB6Cv24I8erBdwT0RtQFJaXerKxfeim5Pa%2Bup4zKDgSf0fvktArLH9pR5Y4XpV8ATtj567wgCwkVE4k%2B%2BsZuNL%2BpXFsS%2BE1eYHBni9GG6y9VI6zTt2aFY7" rel="nofollow">https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories </a></blockquote><p><img src="/img/remote/1460000037686965" alt="" title=""></p><p>还想知道更多好的数据结构与算法项目,可以点击上面的链接进行搜索。</p><hr><h2>最后</h2><p><img src="/img/remote/1460000037686961" alt="" title=""></p><p>Star 数最多,但是并不代表该项目就最好并适合你哦,因为有些项目早于几年前就不再更新与维护了。</p><p>本文推荐的都是一些真的实用并还在更新的开源仓库,估计都比较适合前端学习。</p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=r8h7kN0HRN12Jvvfqg0WTw%3D%3D.LzJTq4E14ZUNajw7StGPflADP7rlboEP7F4T7AXiNMrzOt9%2BpyDzw3Ccp8T09ssdjrhJq7klIV4edxkcJawXBQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a>。</p><blockquote>本文原文 GitHub 地址:<a href="https://link.segmentfault.com/?enc=WHnmrkg9PdIc%2BcokCpRE4g%3D%3D.T6knbL9hASQbyIGl5Drjd7XIprYKpLw52D0w%2BmT%2BdC5FeT3hNxACNWaVe6vfEck2WKuw54fQR9%2FTXmkb%2BtNOJw%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><p>觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!</p><p>在公众号后台回复:<strong>电子书</strong> ,可以获得160本前端精华书籍哦。</p><p><img src="/img/remote/1460000037614301" alt="" title=""></p>
全球最火的WEB开发学习路线!没有之一!3 天就在GitHub收获了接近 1w 点赞
https://segmentfault.com/a/1190000037614292
2020-10-27T06:52:38+08:00
2020-10-27T06:52:38+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
19
<p><img src="https://upload-images.jianshu.io/upload_images/12890819-b689b5d8f762527c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>Hello,大家好,我是你们的 前端章鱼猫。</p><h2>简介</h2><p>前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。</p><p>相信很多人都没有逛 GitHub 的习惯,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。</p><p>从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。</p><p>看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。</p><p>因此也收藏了不少好的开源项目,以后会在公众号【前端GitHub】上推荐给大家,每周会有一到三篇的文章推送。</p><p>希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。</p><blockquote>【前端GitHub】,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。</blockquote><p>以下为【前端GitHub】的第 1 期内容。</p><h2>前言</h2><p>Web 开发是一个不断变化的领域 - 我们今天构建网站的方式与几年前的方式完全不同。</p><p>随着大量工具的出现以及新工具的层出不穷,大多数时候开发人员发现对于自己该怎么选择感到困惑。</p><p>如果你是一个刚刚踏入 WEB 开发的初学者,这里有一份修炼图谱给你。</p><p>如果你是一个早已入门的高级开发者,那 2020 即将过去了,你的技术都学对了吗 ?</p><p>快来检验一下吧!</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-b3544e478450b26b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><h2>前端</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-ff9d99fad58862b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="frontend-map.png" title="frontend-map.png"></p><h2>后端</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-e4eed2031f6575ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="backend-map.png" title="backend-map.png"></p><h2>运维</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-ffc09d05b8abcecb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="devops-map.png" title="devops-map.png"></p><h2>最后</h2><p><img src="https://upload-images.jianshu.io/upload_images/12890819-26eabf6db49e22a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p><p>平时如何发现好的开源项目,可以看看这篇文章:<a href="https://link.segmentfault.com/?enc=Cvk5oInsEG6KN%2FvzLl1dRA%3D%3D.vH%2Bb6%2B4Ggzyxq10OjW9A%2F%2FfNel%2FdDEDeftOZyejPVhxsnSQmZ18RsawohCnmMMYNTh0GFo2PtZjlcjsOzBlj8w%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a>。</p><p>文章中的技术图片均来自如下开源项目:</p><p>【开发人员路线图】: 循序渐进的指南和路径,以学习不同的工具或技术。</p><blockquote>GitHub 中文地址:<a href="https://link.segmentfault.com/?enc=%2Fp0OSN3lW6nloW6BWgcrig%3D%3D.NOCt7IjRgS06ReHebz%2F14UuPanAELzvzjAYI5N0pMwz42l1odtKPOX8eiOPZ4gDvvPFU8Mj48l8qCmR9XJ1RYCAqEa%2Bn1gT7slylnyHJCSZnYwAPoZ7iY0TNMvYM71k7" rel="nofollow">https://github.com/kamranahme...</a></blockquote><p>对了,新一年的 WEB开发路线图 会在每年的年初进行更新,各位看官到时可以留意一下哦。</p><p>当然 前端章鱼猫 也会关注的,到时出了新的技术图谱,也会发出来的哦。</p><blockquote>本文原文地址:<a href="https://link.segmentfault.com/?enc=Owoel3b9nzjsHXs33j62cQ%3D%3D.pBccAECIROSer9CEv%2F8b9TryH64%2F2gdnsUfuNOYQkSoTQL0Mf9gpWrP5LXBBqDoWDfdxrjJ80sPW%2BpAPFMNQdQ%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><p>在公众号后台回复:<strong>电子书</strong> ,可以获得160本高分技术电子书哦。</p><p><img src="https://upload-images.jianshu.io/upload_images/12890819-9a13b43f4feb8f84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p>
2020 - 2021 年 Web 前端最新导航 - 前端学习资源分享&前端面试资源汇总
https://segmentfault.com/a/1190000033134496
2020-10-09T23:07:21+08:00
2020-10-09T23:07:21+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
77
<p><img src="/img/remote/1460000037449440" alt="" title=""></p><p><img src="/img/remote/1460000037449439" alt="" title=""></p><p>国庆这几天,我收集了大量可以显著提升开发效率的前端导航链接。</p><p>这些导航链接对我很有帮助,希望对你也是如此。</p><p>这些好用的导航链接都已经部署到下面的网站上了,在那里食用更美味哦。</p><blockquote>Web 前端最新导航 <a href="https://link.segmentfault.com/?enc=0hZ9c9ASkjd9bVH1JO4AAA%3D%3D.FKeq2NMJfLX%2BKr27VNFUia40mdt0XYpL4q3r1jksTF4%3D" rel="nofollow">https://www.kwgg2020.com/</a></blockquote><blockquote>笔者博客地址:<a href="https://link.segmentfault.com/?enc=DbA4SM0e6x0QHLzmp5hJqQ%3D%3D.2%2Fa0ri0mLUd%2BC2jJ2f8gA%2F%2BVZpAUdstJwIPEN7it00bFXfiYKo9W%2F6CV8gqBXKn3" rel="nofollow">https://github.com/biaochenxu...</a></blockquote><h2>JavaScript</h2><ul><li><a href="https://link.segmentfault.com/?enc=h2YVURgG6eEx4IB29aGqFA%3D%3D.RMSsUmFHPnNDP%2BBHICchDHV4io4u1%2F6pXXs60vyc3kI%3D" rel="nofollow">JavaScript 教程</a></li><li><a href="https://link.segmentfault.com/?enc=T9zPgZWd5m00VZl224mmcA%3D%3D.%2FsbqYzUWHm4eFcIaQZ%2BpIIeoPtEIy7DaX0jcHkxYJfU%3D" rel="nofollow">ES6 入门教程</a></li><li><a href="https://link.segmentfault.com/?enc=r7LsNC9oqp%2BV%2FkF5XpCUaw%3D%3D.gPGklY%2BYuZTJPklLZBncKhvQiRS7auW7VbhVyO7xNw4%3D" rel="nofollow">JavaScript 30</a> 使用原生 JavaScript 在 30 天内完成 30 个项目</li><li><a href="https://link.segmentfault.com/?enc=cVNh%2Bk7sq5RXqc1pj%2BxsMA%3D%3D.mkXRE5ieR5jhVbp6cyqUDux%2BT1OSwztrcxkctnFDpfQ%3D" rel="nofollow">Codewars</a> 和其他人一起完成真实的代码挑战,提升你的技术</li><li><a href="https://link.segmentfault.com/?enc=nxkedv1uOkP47CvbMknIrg%3D%3D.SvWnqDesZeLhvzewjbT2eNLaFlJDm3Dw9SZ8C%2B1lFqo%3D" rel="nofollow">JavaScript 教程</a> 现代 JavaScript 教程</li><li><a href="https://link.segmentfault.com/?enc=oGf2k3OuSwEKBPr4fLP5cw%3D%3D.PGJz3qy4%2Fq3H%2FtwpcYJCVGh1Dz0WykgEP3untzODU9loQdKhbW4dgeWKNQQYuOpP2lOAAbSZEfOScKk5DPXHIA%3D%3D" rel="nofollow">优秀的JS代码规范</a></li><li><a href="https://link.segmentfault.com/?enc=LYiySMWedZHi5HpI5bMSGg%3D%3D.KXD1zohKQz2TiF71AN758ewgKOk8XrfbhUqELO1UajldcbdsQ%2Fi%2FEXh0BUCFep88PDoM7R0rN9qJRz5OeKuQ1Q%3D%3D" rel="nofollow">开发的宝藏项目</a></li><li>TypeScript 教程:<a href="https://link.segmentfault.com/?enc=bDR1cNV41rmdrg84WoXatw%3D%3D.cFfvr8eBChSncBYCg4e5J8rrbCxJs%2F1NPZn5ZBJaQSiNIMoTrJL%2FLPv9A2U59pCP" rel="nofollow">https://github.com/xcatliu/typescript-tutorial</a></li><li>Node.js学习 <a href="https://link.segmentfault.com/?enc=7U69osI6d%2BHl0TCQQ%2BTR8g%3D%3D.wTSdi1dBFhV4IGcHOucvWuOCzOQkSy9VNIodlX1iC1KPYER6PsBaHQBsnnkXUFym" rel="nofollow">https://blog.poetries.top/node-learning-notes/</a></li></ul><h2>CSS</h2><ul><li><a href="https://link.segmentfault.com/?enc=FWPmqpO56zEo5g2zFMfpyw%3D%3D.z3jKjKJP6LyoAecDH1PNaUgPp2Gl2qmVzHMWWBAPx9trk7Lclg0xD1%2FKgg1tytYoR9KmZrAZOcAHQnCZrls%2FFQ%3D%3D" rel="nofollow">css的各种效果实现</a> css的各种效果实现(尤其是动画效果)</li><li><a href="https://link.segmentfault.com/?enc=9YJ9pGTNM%2B%2BDNzoCED8J1w%3D%3D.z9x1aawrK9zGxgE3QoHJHuyyA9pQMehQA2JXzVjrsV4kIAdQ7qUV8q7YMDL5DdPa" rel="nofollow">CSS Inspiration</a> 在这里找到写 CSS 的灵感</li><li><a href="https://link.segmentfault.com/?enc=Urn%2FB3%2FQ3W1umbGdIVyI5Q%3D%3D.ewADNAILv9%2BZA%2FmFz%2F7K0Cu%2FGPlJlGE1GroioqHadJG0XebmuIzgSkftvez%2BRHv4" rel="nofollow">CSS 常用样式</a> 总结一些常用的 CSS 样式</li><li><a href="https://link.segmentfault.com/?enc=wVzlrWOTnObVW04GZ3PseA%3D%3D.OPWvC69qUvycBx%2Bv0snXMoHxYmOGJrQEgb%2FBjO%2Fsqf0%3D" rel="nofollow">Animate.css</a> 开箱即用的跨浏览器 CSS 动画效果</li><li><a href="https://link.segmentfault.com/?enc=tv2DXwZYlu9kJ7hqvb925Q%3D%3D.JkE%2F8xgmWnaOJAJRt%2FSLpMMVmmndsTkm298p5ekdTsY%3D" rel="nofollow">animista</a> 按需定制 CSS 动画效果</li><li><a href="https://link.segmentfault.com/?enc=FlqahIfKcuCDFCx2UTVamg%3D%3D.mKRz3JnbxDQYLFmMntIG4rx5snFKn0e8ktT1HlCT23148Z%2BkSYs%2BXcvI5GPxguQo" rel="nofollow">SpinKit</a> 汇集了实现各种加载效果的 CSS 代码片段</li><li><a href="https://link.segmentfault.com/?enc=Wh37NdzCVm1pGAtNOrqNuA%3D%3D.aADWT1MzmktC8lko%2FU7UyS2jQmGuO1cmC5XblYUxVyc%3D" rel="nofollow">CSS Minifier</a> 在线 CSS 代码极简化/压缩工具</li><li><a href="https://link.segmentfault.com/?enc=KrMW%2BggLmFPv%2F%2FmSZyQJ%2FA%3D%3D.qxGMKyx0z2CcWv9x5pf%2Bg3bdkmLedGujOzWF5AuO30%2FZWwQ49zeU6cZs%2B95%2FUcDH" rel="nofollow">https://sass.bootcss.com/docu...</a> Sass 是成熟、稳定、强大的 CSS 扩展语言</li><li><a href="https://link.segmentfault.com/?enc=Rv61OslCxzb6%2FRHXKTiGPg%3D%3D.Y3D66vFhnW1PibnD4%2FSn3wicOkZVEXF6%2Bmaxfgkgt7o%3D" rel="nofollow">https://less.bootcss.com/</a> 一种将css赋予了动态语言特性的动态样式语言</li><li><a href="https://link.segmentfault.com/?enc=puQ6b%2FaDnUgflDOq%2FxE92w%3D%3D.Mru2HytY19DshLHhim9fwDfFWouAMmP7lFFQ88pVXtc%3D" rel="nofollow">https://stylus-lang.com/</a> 富有表现力、动态、健壮的CSS</li></ul><h2>算法</h2><ul><li>JavaScript 算法与数据结构:<a href="https://link.segmentfault.com/?enc=u0fNNmdJPNnPU%2FhGkl84Wg%3D%3D.U4fhRxMwoeGJJ5diAwmo75r8BrdWWgQ4Nx8K0622GwVOby9aP8ZFP7OuBIUMPe23I9AuGjLf%2FgmEXizbQE3fgA%3D%3D" rel="nofollow">https://github.com/trekhleb/javascript-algorithms</a></li><li>leetcode解题之路:<a href="https://link.segmentfault.com/?enc=o3MTlBTZ99Moc4fKTXmYjw%3D%3D.LNSONAq7SoWU%2FeVVzHal4YdoriOe47C8RI%2F7tVqxahqzRsCjkl8sIBs609qvQwBo" rel="nofollow">https://github.com/azl397985856/leetcode</a></li><li>五分钟学算法:<a href="https://link.segmentfault.com/?enc=yAUxRkv4ko3CgNyoYKQGtw%3D%3D.L7Le69Y8RhZXE5ONYWAsuGFBUSopN0ES%2FAIG0ur8tcWc36gMqHFmJnnE9gQUcVHp" rel="nofollow">https://github.com/MisterBooo/LeetCodeAnimation</a></li><li>LeetCode题目的思路 <a href="https://link.segmentfault.com/?enc=qCLqZhYmAUYgQZsaOYYmzg%3D%3D.9MiKB9%2BHm46Qhj4jHUbhHYOHCM%2FLrofIaE94Jm7%2BWc0%2FK1l8ksFkILRLjhDE0ZGr" rel="nofollow">https://github.com/MisterBooo/LeetCodeAnimation</a> 用动画的形式呈现解LeetCode题目的思路。</li><li>极客时间 App 的《数据结构与算法之美》</li><li>GitHub 上 170K+ Star 的前端学习的数据结构与算法项目 <a href="https://link.segmentfault.com/?enc=%2BnZoI2%2BruVhhz8t7NLMY8w%3D%3D.qNxs5UNoRV40XYlOJWEAhPTRK44WpJHbbG3G%2F8JvcnsoB%2Ft%2FkiQCcWv5MAPPvVnr2MW4D8Yd88vaHLUT%2FNiqZw%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></li><li>JavaScript 数据结构与算法之美 - 十大经典排序汇总: <a href="https://link.segmentfault.com/?enc=cXTFRwbebRrx9SsW6%2F8Fjg%3D%3D.fav2Iy18fDdnG6Z03wTJhE5znnLuaHxpqvUg0o2KYmFhj3jfJvFREAGNsLl%2FLw2CRwZkiQSK5HUjibDVy%2B0%2Feg%3D%3D" rel="nofollow">https://github.com/biaochenxuying/blog/issues/42</a></li><li>算法可视化工具 <a href="https://link.segmentfault.com/?enc=vD8eJqaLbnmL3131fRw7Dw%3D%3D.1tpY%2F%2BWlChwtpJ7CzBXJHkrS1FJ03LmgMH0v8jW2TXYR80AzLzE4GaP80GhhPeHvQRqe2GqApJziLG%2F5q%2B2U2w%3D%3D" rel="nofollow">https://github.com/algorithm-visualizer/algorithm-visualizer</a> 算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法。</li><li>算法可视化来源 <a href="https://link.segmentfault.com/?enc=4m9QhxMidEwYXNLKrRS1xA%3D%3D.JFYc5NZayBI2l10yjZGdopeGzHmFm3NV3UHS9yTeaTM%3D" rel="nofollow">https://visualgo.net/en</a></li><li>观察算法的工作方式 <a href="https://link.segmentfault.com/?enc=v4nm4SHM2lNDYaVk6PWgbg%3D%3D.DQsCrTrcYOXj0QckJYwHIs7q8qd8Xpdzwd62tGVPscJwV3Hzz8H9UOrRGwnCYe8s5984A7Mpnm6F4DHICMBZSw%3D%3D" rel="nofollow">https://github.com/skidding/illustrated-algorithms</a> 变量和操作的可视化表示增强了控制流和实际源代码。</li></ul><h2>前端面试</h2><ul><li>前端面试常考问题整理,按模块知识点分类:<a href="https://link.segmentfault.com/?enc=NudL63Rm5c01FWDwLlJvAQ%3D%3D.YVUvN%2FqzoynDwlGC5fvqa%2B7MiEMVkCLXoAZonP%2FG9AFHrzsZCLjmpUqHiBDHzM6w%2BMsYSIVPF%2FegTceKLXgiFw%3D%3D" rel="nofollow">https://blog.poetries.top/FE-Interview-Questions/</a></li><li>前端开发面试题: <a href="https://link.segmentfault.com/?enc=lOxX5dfY4uenBC7tJQugvA%3D%3D.RjqSWTKBmb%2BO71hBnhAiM9AbBNSl24gRUW5lG2pyerMLUIlILyBQsR8KEv4Sf2XiD7On6O2icLaWE%2BH6XT%2FVDaotBSB%2BSDgjTxnzk5hZK%2BM%3D" rel="nofollow">https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions</a></li><li>web前端面试宝典:<a href="https://link.segmentfault.com/?enc=2a6S%2B0kgOFKlIFVeJe8iWg%3D%3D.7RXs2bDF%2BUr7RUDaMU%2BtC1yI8bJsEBMsCPRakFZXKbF8t%2BYAtvcvNYHy5t59uzJP0%2FJa6kpnl8JAULDjqIUKrVsHQvzYOsp5zwHo9XLQNj4%3D" rel="nofollow">https://github.com/h5bp/Front-end-Developer-Interview-Questions/</a></li><li>掘金前端面试题合集:<a href="https://link.segmentfault.com/?enc=pBYIVMzChFuoOsh6o2Myvg%3D%3D.a4qKZENOT%2BZMbys9ja0PSRDcDszz5bvPJdLQyVoc2Kmo%2BioXSuzJEU%2BdXPwwD776obVlqVddS5bk81UHxk0CqhHlk0CBsFDwfsIIwaOrcoA%3D" rel="nofollow">https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md</a></li><li>前端面试图谱:<a href="https://link.segmentfault.com/?enc=XJ603e9UjlXdHQOo%2FCTepg%3D%3D.28qnRnQzdxyLRxK4odWYcmLAhdE74wf9Y6Y8eN0HMzw%3D" rel="nofollow">https://yuchengkai.cn/docs/zh/</a></li><li>GitHub 上 100K+ Star 的前端面试开源项目汇总 <a href="https://link.segmentfault.com/?enc=WKnbe4CocxHcne0Rn93GvA%3D%3D.uHSJmbHRmcVNoEPZpnkS8KoIXSKdw5cTKpqX4FNJNeWGczqQIAXQrzX14jx7qNY%2Bf%2Bqbite9SSD9ipxHw8S4Aw%3D%3D" rel="nofollow">https://github.com/biaochenxu...</a></li></ul><h2>技术社区</h2><ul><li>GitHub:<a href="https://link.segmentfault.com/?enc=5e243%2BGmWFVukK%2Bsz1uwuA%3D%3D.8tId66P%2B%2FcekOUF9gAkLN0LzvthUtp9fMgOEEXwER5E%3D" rel="nofollow">https://github.com/</a> 高质量的内容创作和分享平台</li><li>stackoverflow:<a href="https://link.segmentfault.com/?enc=DsRXFTVJ%2FkF6Lm8xkExYEA%3D%3D.wThsqVcmeDr3k8epMNIUNq4T2g34jzVO622iIBWUM4k%3D" rel="nofollow">https://stackoverflow.com/</a> 一个回答技术问题的网站</li><li>掘金:<a href="https://link.segmentfault.com/?enc=lKSBNAoyZLwCYayCjSGaBQ%3D%3D.hY%2Faz9QY0Pkqj%2Fv7Imj8sdianuMLLImGLaV5stZKQd4%3D" rel="nofollow">https://juejin.im/</a> 目前来看,国内的很多优质前端文章,都在掘金上。</li><li>博客园:<a href="https://link.segmentfault.com/?enc=KhlqbNYcEdaC6wFL2gOWIA%3D%3D.9CBRu6x7srPBTwpL8QDPF8lMFbk5xkZD%2Fae3%2FgAniT0%3D" rel="nofollow">https://www.cnblogs.com/</a> 一个很纯粹的技术博客平台。</li><li>知乎:<a href="https://link.segmentfault.com/?enc=I%2BMyqCcMSr40wYbFFXDkCg%3D%3D.AKBK9sUFpd0t8datANS6iPhJZJd0N1k6l%2BajOu3mjaU%3D" rel="nofollow">https://www.zhihu.com/</a> 很多做技术的同学也开始玩知乎了,阿里的不少前端大牛在知乎上就非常活跃。</li><li>CSDN:<a href="https://link.segmentfault.com/?enc=0toU5X2NaoaguSgzg9IzUw%3D%3D.cXSGZYI3fxf6HsQD70mLvYVsLBY%2FBZziKceuogbCzwo%3D" rel="nofollow">https://www.csdn.net/</a> 广告太多,但奈何你这么老牌。</li><li>segmentfault:<a href="https://segmentfault.com/">https://segmentfault.com/</a> 比较低调的技术博客平台。</li><li>v2ex:<a href="https://link.segmentfault.com/?enc=hTBkmQGf32jkEakWz9VZhQ%3D%3D.PXD7z485mrHaEj7YFNXfahJfc%2Fs%2FLAt3Kisc6pSUPbU%3D" rel="nofollow">https://www.v2ex.com/</a> 一个关于分享和探索的地方</li><li><a href="https://link.segmentfault.com/?enc=7dN%2FpY6Y%2BcaLx37Vo1YygA%3D%3D.7LFHRzEq%2BSwp8fgBwwNscb0EtHF4DrCYtUygYiwPTos%3D" rel="nofollow">http://cnodejs.org/</a> Node.js专业中文社区</li><li><a href="https://link.segmentfault.com/?enc=uhCMqCuNfo5mYSHsFuF8ig%3D%3D.1FK1kuBpV1Tu2qoaNd%2FRacG6uixVwtl9TaN%2B62ysDE7bteNQ%2FJHLa2VEXjqY0sPr" rel="nofollow">https://www.smashingmagazine....</a> 一个web技术类的博客杂志站点</li><li><a href="https://link.segmentfault.com/?enc=z5%2F%2FpWUPSv8ioVTuKrvr6A%3D%3D.Ep4T7DSi8YZvgzevzxbp8tfCGRYi5JQLvcHD9LHy83s%3D" rel="nofollow">https://www.jstips.co/</a> 每天推出一个JS技巧的网站</li><li>W3cplus:<a href="https://link.segmentfault.com/?enc=%2Fm2TAWOTPDLE6qK3XJ%2FcQQ%3D%3D.YUsRGXvf0Xo80hk4hGvHUwiDYfvkkskBM727spNiMEE%3D" rel="nofollow">https://www.w3cplus.com/</a> 是一个致力于推广国内前端行业的技术博客</li><li>印记中文 - <a href="https://link.segmentfault.com/?enc=Lxi3ZUtb%2Fhcvtfta8BwbEw%3D%3D.uXMk%2FivJTpfnq5qyYaJYK5IdF25tvCWhTZQA3VJvPV4%3D" rel="nofollow">https://docschina.org/</a> 印记中文是最权威是技术中文文档社区</li><li>收集优质的中文前端博客:<a href="https://link.segmentfault.com/?enc=6bk2n15SBfTtgtO16OvRQg%3D%3D.VDIp8HWlj1voBI2ga5zVrCzjQKDOzmafoq42mwkk%2F3%2BZUAiyoHo5tkW%2Fi5Fxmc8TB6Y7LGpUofxY95W40yLcRA%3D%3D" rel="nofollow">https://github.com/FrankFang/best-chinese-front-end-blogs</a></li></ul><h2>博客团队</h2><ul><li>腾讯AlloyTeam:<a href="https://link.segmentfault.com/?enc=dFBDMgj%2F1%2FV6yA1x7OtChA%3D%3D.c5ZqnBUU%2BCM6g5gCW0LCVLbta2eKu1SaecvIEv%2BJeqM%3D" rel="nofollow">http://www.alloyteam.com/</a></li><li>腾讯社交用户体验ISUX:<a href="https://link.segmentfault.com/?enc=ma0lmEj8wyOLNvYvSiNH5w%3D%3D.DKHCxYhHRcDTQQfkkLrNjEO1wcqpYE%2F%2FK8x%2BLujakCM%3D" rel="nofollow">https://isux.tencent.com/</a></li><li>淘宝FED | 淘宝前端团队:<a href="https://link.segmentfault.com/?enc=MaNtMHwmA%2BIAHnBEYk7rOA%3D%3D.5aTXXeWcA3Jy1BN6%2F8fGpCPJyGPsyRGTkoUhEVvFQcw%3D" rel="nofollow">http://taobaofed.org/</a></li><li>阿里巴巴国际UED:<a href="https://link.segmentfault.com/?enc=%2Br3gz9XrctyEsKBrM4MCjg%3D%3D.hAXGOqCgiXkED9SPxVXmew40tX7HlgXhyAHP5TObbiA%3D" rel="nofollow">http://www.aliued.com/</a></li><li>京东 | 凹凸实验室:<a href="https://link.segmentfault.com/?enc=ks5nmJNJBKO3B6FKNWvD%2FQ%3D%3D.XKpKae4bcVqDiCuitav6byGIxhESfiYY1%2F8TijirwPU%3D" rel="nofollow">https://aotu.io/</a></li><li>饿了么前端:<a href="https://link.segmentfault.com/?enc=QkdQPZrBSo5RCf3zgkbCTQ%3D%3D.Sxv0alu5ANLAXGX3arB1O77CajCL1DYWJ46qDw8N7NunYBqn6TrW8mxEZmL5ZfKu" rel="nofollow">https://zhuanlan.zhihu.com/ElemeFE</a></li><li>百度前端研发部FEX:<a href="https://link.segmentfault.com/?enc=99rfthtnIWGqx5HiubsxTQ%3D%3D.Clt6b5W9NgPhAy8Zy2wBNIEjR6lmt3eqeMT0iUYCB2M%3D" rel="nofollow">http://fex.baidu.com/</a></li><li>360 | 奇舞团:<a href="https://link.segmentfault.com/?enc=h%2BBz35XHU6nnxST3IPwjWw%3D%3D.1SGGaWLBVRm3QfX3sgIMR%2FDjgOldqo9XZMTkJM7TrvA%3D" rel="nofollow">https://75team.com/</a></li><li>美团技术团队: <a href="https://link.segmentfault.com/?enc=7g%2Fq%2FY4ebxMuhfveneRyjQ%3D%3D.Y2XSmH%2Bhrh6CcqkQNsOsUmWV0IhgoG%2BVK%2B1%2F%2Ful7cus%3D" rel="nofollow">https://tech.meituan.com/</a></li></ul><h2>GitHub 统计</h2><ul><li>GitHub 中文排行榜、高分优秀中文项目:<a href="https://link.segmentfault.com/?enc=TcBSyO5ql1FVQex0RQnm6A%3D%3D.LoiDmg0DIj7LYE2c2VBU12e%2Bz4qjHY293QlkbLQ%2FKDZIkKUuwekKBQYtosKKJzACu%2B3Oes13hK5JKHi0PAVOVw%3D%3D" rel="nofollow">https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts</a></li><li>GitHub 全球排名:<a href="https://link.segmentfault.com/?enc=tfie9CHGfKeN%2FhoLfFa5Cg%3D%3D.Uo0u1ABhYsfksB5vAfAQAoEWTy67ogJcPeuPa8FuAC4%3D" rel="nofollow">https://gitstar-ranking.com/</a> 这个排名很权威。如果你的项目超过 10k star,就能上榜,跻身全球 GitHub 项目前1000名。</li></ul><h2>构建</h2><ul><li>NPM:<a href="https://link.segmentfault.com/?enc=1FQpLSqGu1FaTBMZOpT0ow%3D%3D.2nI5%2FhC3lbT1uTBBMfr5K73JMBnUw%2BjuoJab3jz3G7k%3D" rel="nofollow">https://www.npmjs.com/</a></li><li>Yarn:<a href="https://link.segmentfault.com/?enc=MBQTWiuq7ugWpnJHcpSXqg%3D%3D.Z9yZLv3BO1v8JabAp4buI8aqMbFiEsn9wN3FAcItKhQ%3D" rel="nofollow">https://yarnpkg.com/zh-Hans/</a></li><li>Webpack:<a href="https://link.segmentfault.com/?enc=uaWe2O90iDZY4%2BF%2BZ0eTKw%3D%3D.%2BPdHC3C%2FIFiBuf0eQ%2FPRETU5TLkdXjHKFHmu%2BK0ceqE%3D" rel="nofollow">https://webpack.js.org/</a></li><li>Gulp:<a href="https://link.segmentfault.com/?enc=Iw6SrHYnf81ptUEiU%2BiUqA%3D%3D.lUTlnI3Uhs8zrO53khbkxPsza74yAmLdDaOSb9Cx%2Bzw%3D" rel="nofollow">https://www.gulpjs.com.cn/</a></li><li>Babel:<a href="https://link.segmentfault.com/?enc=SKSGrzCvfB7RoJIPsDNBoQ%3D%3D.bp2jN%2F7SwyvhiyAUu3J3osP21GGZJHOOp71%2Bm6LCxJc%3D" rel="nofollow">https://babeljs.io/</a></li><li>ESLint:<a href="https://link.segmentfault.com/?enc=B2hAHKdfRnSnHL0eYO%2BtTA%3D%3D.9P1UdB%2FDFooeMJhkGE5NKAnm844CEMGypp9H0rgIUYQ%3D" rel="nofollow">https://cn.eslint.org/</a> 可组装的JavaScript和JSX检查工具。</li><li>PostCSS:<a href="https://link.segmentfault.com/?enc=X9z3UrFXmamVgOsMfe%2B6BQ%3D%3D.7i74%2FUanBM8M%2B5H%2BsMRk%2By7AzEW8CzcVl9zh%2FfI1cZc%3D" rel="nofollow">https://www.postcss.com.cn/</a> 用 JavaScript 工具和插件转换 CSS 代码的工具</li></ul><h2>部署</h2><ul><li><a href="https://link.segmentfault.com/?enc=UGEnbXxdlx3ohnTg6LwBRg%3D%3D.8U00NIYp2MttF4UJHgAyouowtNIYjvTbx%2F2rCnq10c0%3D" rel="nofollow">GitHub Pages</a> GitHub 提供的免费静态网站托管服务</li><li><a href="https://link.segmentfault.com/?enc=8xFPxhxzaBHYpaGxoEuT7A%3D%3D.N%2FHO1v2j4lEuUItqCBExdkPysUClKDR85g6RvMY1MWA%3D" rel="nofollow">Netlify</a> 30 秒内部署你的网站</li><li><a href="https://link.segmentfault.com/?enc=bNE%2FEt%2FYNJFzT0vAnR4EeA%3D%3D.D8Ed3OyPFXmRSYvygwRwv90Edy4QYD2LgUhSnRCyvGE%3D" rel="nofollow">Vercel</a> 快速部署你的网站</li><li><a href="https://link.segmentfault.com/?enc=PVDz1P6qxk9fF6E2hClm%2Bg%3D%3D.3H%2Ftp%2BxX7ueqYXvIMX%2F4ovtPex1Mj%2BGrEro9XPl68oQ%3D" rel="nofollow">Surge</a> 只需一个命令就可以发布你的网站</li><li><a href="https://link.segmentfault.com/?enc=C155qYGRNmrreA8pwyOfFA%3D%3D.V%2FXiz%2BTdBE9XnUfaH0mKv6JshD9eMRQlLCHNVYDMLs4%3D" rel="nofollow">Heroku</a> 在云端构建、运行你的应用</li></ul><h2>静态站点搭建工具</h2><ul><li>Hexo:<a href="https://link.segmentfault.com/?enc=jXWXHTTqTzasNDJUpcSDwg%3D%3D.fDeUHtcGhO7rgqQnS3JDUQZ7jfjdAjWcmc0%2BzeUNINc%3D" rel="nofollow">https://hexo.io/zh-cn/</a></li><li>VuePress:<a href="https://link.segmentfault.com/?enc=84Xh9ZQtWWG5gvcw25U1aA%3D%3D.fpKO%2FuQbujTkaz8FXf%2FkmhIO7vKM7A4%2BnR%2Fk6jLU%2FqU%3D" rel="nofollow">https://www.vuepress.cn/</a></li><li>GitBook:<a href="https://link.segmentfault.com/?enc=02YIQ5Wv8ZwOFR0cwB6YPQ%3D%3D.6dNSRkfRIiau1REcrJF9C4qZh%2FMImsiB7HGvi8%2Ftkq0%3D" rel="nofollow">https://www.gitbook.com/</a></li></ul><h2>前端代码规范 </h2><ul><li>腾讯的 <a href="https://link.segmentfault.com/?enc=%2BXsCbAHJBqJThbcDal%2FzBQ%3D%3D.TR1jTIH%2FnMXhz3jdiepsC0n5ys2J7bh6XWXE2ie1mdKNZeB5765ZcH0m%2FthS8XkX" rel="nofollow">http://tgideas.qq.com/doc/index.html</a></li><li>京东的 <a href="https://link.segmentfault.com/?enc=tAdJcJN4lH%2BhSbrqJdaIBQ%3D%3D.SFj%2BNbPyFkhEWkxgMe07R8fdsbO4UuAUvPv4XNGSb4AbrAcn8cGFxJOgCLY%2BaHnu" rel="nofollow">https://guide.aotu.io/index.html</a></li><li>Bootstrap编码规范:<a href="https://link.segmentfault.com/?enc=GanneM27v%2BMq0u6QCLkfQg%3D%3D.u5dzUZNf%2BhZ5cFisuhaz3%2BkfXLuQhUXKyx1pl37GszU%3D" rel="nofollow">https://codeguide.bootcss.com/</a></li><li>es6编程风格:<a href="https://link.segmentfault.com/?enc=AlGpiw5JnRRwv1HAyb9MrQ%3D%3D.wBorfwvxR6xaHJ%2FiBRIxNPbYonULxEUEx3bni51UkFS%2BI9kUYRw54i5JhWXCRlbP" rel="nofollow">http://es6.ruanyifeng.com/#docs/style</a></li><li>Airbnb Javascript Style Guide:<a href="https://link.segmentfault.com/?enc=8A5CLiuiy%2BRIA%2B%2BqwRfyIg%3D%3D.Jyb69acjx2btGhb8ojQl4s%2BKh2mRVINgKMx9lszWpXrD%2F1z0CElE6cJFxhJ3bZnO" rel="nofollow">https://github.com/airbnb/javascript</a></li><li><a href="https://link.segmentfault.com/?enc=zE4gKfDdiAz4yKmmq%2FCg5w%3D%3D.uCuPbXOjBqNOimLeC2qQjRruoIaXT5vZBTveVpXuRoQ%3D" rel="nofollow">ESLint</a> 检测、修正 JavaScript 代码的问题</li><li><a href="https://link.segmentfault.com/?enc=ymLsiF3NIvPACFkSa4tetg%3D%3D.K%2BbC06ErCA83hG%2BfjaQRTz5N7pH7pMi5ZktKAKMd0LU%3D" rel="nofollow">Prettier</a> 格式化 JavaScript 代码</li></ul><h2>调试抓包</h2><ul><li>whistle:<a href="https://link.segmentfault.com/?enc=PXG64T2lSoOkmaLlw6HkVA%3D%3D.KJsg8%2FLN3J%2B9%2FjS2EfQX6Q8m0tzcNCvVCj20IGP70NM%3D" rel="nofollow">https://wproxy.org/whistle/</a> 代理抓包工具,很好很强大。</li><li>Fiddler:<a href="https://link.segmentfault.com/?enc=PHcNkPGNbwKuHSccrDNgGQ%3D%3D.U4HtGXvlevCIYNvbpo9oGbTO%2BBz3NKCiV8eo93Gky7U%3D" rel="nofollow">https://www.telerik.com/fiddler</a> 代理抓包工具。</li><li>Easy Mock:<a href="https://link.segmentfault.com/?enc=enbf%2Bq5m8Nhbs5qs0Q80Bg%3D%3D.ApRgGiuUgXjdFc8y1EWA5Sdw5yuyHkkPm%2FCYG5kxNW4%3D" rel="nofollow">https://www.easy-mock.com</a></li></ul><h2>开发工具</h2><ul><li>VS Code:<a href="https://link.segmentfault.com/?enc=rgj%2FTx5D%2BCUcz6m8EANvxA%3D%3D.iqZ51JTXxoVGCc3D74lPTDbbt1leUPntSLBgylDaUfs%3D" rel="nofollow">https://code.visualstudio.com/</a></li><li>Sublime Text:<a href="https://link.segmentfault.com/?enc=yN66lFmNZB%2BeAenPOtngPQ%3D%3D.XwSMJ54lIVa7y6FEYY3lSQENFY2SV9wcCS5Adb6bB6c%3D" rel="nofollow">https://www.sublimetext.com/</a></li><li>WebStorm:<a href="https://link.segmentfault.com/?enc=nO%2BdC190Gr3KnNbApOSYxg%3D%3D.gBJEgEdDVse%2Bdxm84C746lbFoJ74U7xk2YP4xVAOpTqe2Mi7qmDRJiilDoC6HC4y" rel="nofollow">https://www.jetbrains.com/webstorm/</a></li><li>Atom:<a href="https://link.segmentfault.com/?enc=od2wuLIW388xOzJ4sKq00g%3D%3D.miVNRTBHGyqqQUVfrK236gVW4Egqx5TSckI1PG69%2FPU%3D" rel="nofollow">https://atom.io/</a></li></ul><h2>在线工具</h2><li><ul><li>CodePen - <a href="https://codepen.io/">https://codepen.io/</a> 在线代码测试工具</li></ul></li><ul><li>Can I use - <a href="https://link.segmentfault.com/?enc=U8kOv7RmqgQa%2BRBUggfKgA%3D%3D.HO2iHamn36nC0Jo1DXKdCaCtGt3LcFPa9oWihk2ReZo%3D" rel="nofollow">https://caniuse.com/</a> Web前端兼容性列表</li><li>TinyPNG - <a href="https://link.segmentfault.com/?enc=Yx7Yo3%2Fb8SUGavJl18Rasg%3D%3D.UvWyWefkdaACQCP%2FeuQnD7wpKQJpo0aDuWihN2wxLvo%3D" rel="nofollow">https://tinypng.com/</a> PNG/JPG 图片在线压缩利器</li><li>CNZZ站点统计 - <a href="https://link.segmentfault.com/?enc=2rEH861uBf7pmbuq46Ba9g%3D%3D.BHHPerCZnohPbCMJ9CoL%2FIX6nyXljCOlOKoi%2FfIgzbs%3D" rel="nofollow">https://www.umeng.com/</a> 国内常用的站点统计工具</li></ul><h2>前端大会</h2><ul><li>Vue.js开发者大会 <a href="https://link.segmentfault.com/?enc=EzkacPWCxsixf85ht2UKGQ%3D%3D.sUZPWuZgr3421MiNtzUJALunvu4LB0fqKvl781xm2J8%3D" rel="nofollow">https://fequan.com/</a> Vue.js开发者大会中国</li><li>中国JS开发者大会 <a href="https://link.segmentfault.com/?enc=P3Oqu4M1OwhmTXVnfM6Qcg%3D%3D.plUIPITvZMlUHDoTwfjDsoCpfKfPBsfJTb6OsSClNgY%3D" rel="nofollow">https://jsconfchina.com/</a> 一场专注于JavaScript和Node.js技术的国际性大会</li><li>中国CSS开发者大会 <a href="https://link.segmentfault.com/?enc=AVxhEMwenLrqwFliil8Dzw%3D%3D.GI7gPgqkoIk%2Fq46dJ1inH1YuUj%2BJquZFZ5o%2FjM0a4Us%3D" rel="nofollow">https://css.w3ctech.com/</a> 提高css开发姿势的大会</li><li>D2前端技术论坛 <a href="https://link.segmentfault.com/?enc=DAuqhpytlzcmAuZBFiR1bg%3D%3D.PfKGEXTa4KXplMGzpZ5R0DJ66%2FkXIVBANUEftg6A1q4%3D" rel="nofollow">http://d2forum.alibaba-inc.com/</a> 阿里巴巴举办,分享技术的乐趣,探讨行业的发展</li></ul><h2>图标</h2><ul><li>Font Awesome:<a href="https://link.segmentfault.com/?enc=0hVMvzPNRKEqS8oA6jZMmg%3D%3D.l25rSTrvvLjO2GXe9tGubHg1ouVNVLK1Ke4hlMklup0%3D" rel="nofollow">http://www.fontawesome.com.cn/</a> 网站开发最流行的图标集</li><li><a href="https://link.segmentfault.com/?enc=9%2FwVQwaiOX0PvB7WyDUQZQ%3D%3D.1qf21gfelR%2FEaR9y3C62WdS9by4rwhTJoHiUwj6PPak%3D" rel="nofollow">Feather</a> 简洁美观的开源图标</li><li><a href="https://link.segmentfault.com/?enc=ADWP92gLNPXPPLV2IIKO%2Bw%3D%3D.gLYRBV9IMch%2F7YrRDdCmtjW6AB2vh4miStBixdNjkEw%3D" rel="nofollow">Ionicons</a> 精心绘制的开源图标</li><li><a href="https://link.segmentfault.com/?enc=qjitz3smxXsMWptflPOMAg%3D%3D.3r7UcDlhO3RZYwHsgaoKhUGn9qQVJKh54wYcovhcSKw%3D" rel="nofollow">Simple Icons</a> 常见品牌的 SVG 图标</li><li><a href="https://link.segmentfault.com/?enc=3wYbu%2FjCIQTRi0hsD3KaqQ%3D%3D.vYsVN%2FMcaqRJKrn3BFkTAsq9rC%2FdyWiNLvdN9olSnjmhuglZkEHn%2FJ%2BPWmYa3kZa" rel="nofollow">Material Design Icons</a> 轻快、精美的符号图标,包括常见操作和事项</li><li><a href="https://link.segmentfault.com/?enc=75rLSzMuDHcNJF66jbOnSw%3D%3D.oMwCUwTcETE5aXLCiDZFFGRX%2BfWHyzXDmWZWl6OuCfY%3D" rel="nofollow">Tabler Icons</a> 681 枚可定制的开源 SVG 图标</li></ul><h2>色彩</h2><ul><li><a href="https://link.segmentfault.com/?enc=YdctY%2FkY%2B19EwabNMx58Qw%3D%3D.t1tqqNdZUYzHp7kJqx5slkojMq%2BwhGD250PoRMzDt%2BZlKouFU3IyFyUqwq77wy7Y" rel="nofollow">Material Design Colors</a> Material Design 色彩</li><li><a href="https://link.segmentfault.com/?enc=C%2B7t6d3AR5nvqBl08L0B1Q%3D%3D.jZ%2BLOclR2jAJNAqgSJQTSfUstepX0JNW%2BNt7%2BDmRZs4%3D" rel="nofollow">Flat UI Colors 2</a> 14 组配色、280 种颜色</li><li><a href="https://link.segmentfault.com/?enc=qn8avDXPt7ccSbb1HXqiqQ%3D%3D.OsqdW5dqy9wga8laHZhVtn29OnBbaYL1NhGLvpV1p%2FQ%3D" rel="nofollow">Color Hunt</a> 分享色彩搭配的自由开放平台,包括成千上万人工选取的配色,可以从中获取配色的灵感</li><li><a href="https://link.segmentfault.com/?enc=c%2F7opn%2Fh2PYsz%2F854RPJWg%3D%3D.FMkfegchlWaOo%2F75pNX%2B%2FUIgSTH96yJQUiwJULaQ3FM%3D" rel="nofollow">Color Space</a> 配色方案、CSS 颜色渐变生成工具</li><li><a href="https://link.segmentfault.com/?enc=Yc3PGC%2F1KcarUNo57y0H7w%3D%3D.F%2BePUaBz3U0glJ5nbvd59E3rKcN%2B0IQFALtMGqPhpuQ%3D" rel="nofollow">uiGradients</a> 美观的颜色渐变</li><li><a href="https://link.segmentfault.com/?enc=FgDW1gkEyWyAaAi7HO64bA%3D%3D.osg7RajP%2FnSM%2B6Y96TjfGFfeMXhgEvFj0qsbvMhWx48%3D" rel="nofollow">Colors and Fonts</a> 色彩和字体工具</li><li><a href="https://link.segmentfault.com/?enc=K7K%2F757GM94Ywx6zVIy6sQ%3D%3D.dBeEyxLDtjo640Ydnr5NSTT2q3E2%2FPuuwgTgKNYgSw8%3D" rel="nofollow">Coolors</a> 配色方案生成工具</li></ul><h2>插画</h2><ul><li><a href="https://link.segmentfault.com/?enc=yqDQTPLpbFirX0NruTzkeQ%3D%3D.1XsAK6GoicFUyCEEtOJAsThYufr8HfC4EqRXI9xBSAc%3D" rel="nofollow">Undraw</a> 持续更新的精美的 SVG 插画集</li><li><a href="https://link.segmentfault.com/?enc=OnWcdXJtIO%2FLalLvph2QSA%3D%3D.vpjoS31tKPxBNxyeW2XsnL6Zypj%2B0%2BUCZg1PbeGwZ7Y%3D" rel="nofollow">manypixels</a> 免费插画集</li><li><a href="https://link.segmentfault.com/?enc=bBnvZpugsQDDqIZtM1kGrA%3D%3D.1Unm3TYT16OfuOfLaiD2h3wCDouLDN5Z%2FFFa5olTfIFBcP%2FgF6%2FXHKGQn7EEbCXe" rel="nofollow">IRA Design</a> 通过调配渐变色、搭配手绘组件定制插画</li><li><a href="https://link.segmentfault.com/?enc=rwGQZ5BqKzLHXZz%2FgLfEyA%3D%3D.4vDCgyh2M5qBKfUI00E3egLsbCOIYW1sOOfPpbMNZft08we3LEAvNyATGt2q1fDH" rel="nofollow">Free Illustrations by Lukasz Adam</a> 免费 SVG 插画</li><li><a href="https://link.segmentfault.com/?enc=V%2FSBZuHi4ZLDsyEmGrrkcQ%3D%3D.hNXb36NSeG6Uh5HL6BhRGgNrWELgbUR76nhevpzFyQQ%3D" rel="nofollow">Blobmaker</a> 在线 SVG 形状生成器</li><li><a href="https://link.segmentfault.com/?enc=u1E%2FGsGwrknsi%2BIHphqVdQ%3D%3D.iwRfarQQRElPD%2Bk1wqNX6WM6w5zb2BhqbH0enqmWmC0%3D" rel="nofollow">Get Waves</a> 在线 SVG 波形生成器</li></ul><h2>图片</h2><ul><li><a href="https://link.segmentfault.com/?enc=1kTxBCtI8HEKRDl6QZHhAw%3D%3D.c1BqDhetyWjKzNaujDzRhtjZHSBx0aNuav3ZHf0ZwCQ%3D" rel="nofollow">Unsplash</a> 可供免费使用的图片</li><li><a href="https://link.segmentfault.com/?enc=Ym43PeKR8nd8anzDkdRtzw%3D%3D.U7VbmAeHPxuOBRB1tnRFViIfzRtCDpf7oHKv8beyxZ0%3D" rel="nofollow">Pexels</a> 精美的免费图片和视频</li><li><a href="https://link.segmentfault.com/?enc=GAzCDjbzApEAeBjtn15BXQ%3D%3D.8ADBDK8oWw%2BZmSbaOIFGsJGC%2FRtArSkj1IoBmb1IlU0%3D" rel="nofollow">Burst</a> 免费高分辨率图片,可用于网站和商业用途</li><li><a href="https://link.segmentfault.com/?enc=MJg5oHqGVTtUo5fZP4ed9A%3D%3D.x3IOn5HIavUT4BnZKiiF8c0dWag3j9c3dUDqcWz%2Fwyw%3D" rel="nofollow">ISO Republic</a> 使用 CC0 许可的免费高分辨率图片和视频</li><li><a href="https://link.segmentfault.com/?enc=oi252XzxLA%2F2xlxGOLwOmw%3D%3D.J5wzNdMqnQGYDfsjEdIhjmH1wgTTJJmRft4KBVbsMN4%3D" rel="nofollow">Pixabay</a> 令人惊叹的免费(公共领域)图片和视频站点</li><li><a href="https://link.segmentfault.com/?enc=ZUCWi%2FQuo6SPHE3T9IiwBg%3D%3D.jinXsiJc%2FRK3oBWrS06tC6qJAnxTVMQF8DnqaWr0RBk%3D" rel="nofollow">StockSnap.io</a> 精美的免费图片,同样使用 CC0 许可</li><li><a href="https://link.segmentfault.com/?enc=DiFLHbrYHMJR3ADFSAFUbQ%3D%3D.dM43mLv9yrlb2ZVlsY36YaQMpxGKX9IhEgCsen%2BIxns%3D" rel="nofollow">Photopea</a> 在线图片编辑工具,支持大量高级功能</li><li><a href="https://link.segmentfault.com/?enc=0qi7RDEa35RxPo0aVORK3g%3D%3D.tB%2F2wu%2Bz3Fl81YnM%2FXE6EZnFgq0eEIkmiSQuG3j6xbY%3D" rel="nofollow">Online Image Compressor</a> 在线图片压缩工具,一次可以压缩多达 20 张图片</li><li><a href="https://link.segmentfault.com/?enc=5N2iQKTy%2BKA5vHTM21tCnA%3D%3D.xkLxMjdRR20NXVVYxN6iFwWx9BnHsfTQNJUT3tnoriY%3D" rel="nofollow">Bulk Resize Photos</a> 最快的在线图片缩放工具(图片缩放和压缩在本地完成,无需上传到服务器)</li></ul><h2>其他</h2><ul><li>单元测试:<a href="https://link.segmentfault.com/?enc=6Fh5BREWR8DUX5padutEiA%3D%3D.ChNQ4DycTXOlCnJhY3Pd2%2F1NCaX%2BZKmvbObOn3Ml%2F0zlInpuFcJqIX2TbM0fujrgNXglUTqFj3xmsNrKLdAg%2FAMIZEeaEUD4p%2Fw7rxJ1K3Q%3D" rel="nofollow">https://github.com/goldbergyoni/javascript-testing-best-practices</a></li><li><a href="https://link.segmentfault.com/?enc=NPGTuKqLeDWaXeTC5lw3Ug%3D%3D.y7ckZOweho1%2F0tqsjHKh38bWA9wsXKifOrLqRl1N7Gw%3D" rel="nofollow">web.dev</a> 评测网站性能(基于 Lighthouse)</li><li><a href="https://link.segmentfault.com/?enc=ziNSNlgCIxZhYKZTpSFH1Q%3D%3D.qKxLfv%2FXHtb4gUyW8lSTagmKHH1wv7n5PSGWX71XVZA%3D" rel="nofollow">Shape Divider</a> 定制各种形状的网站分区 SVG 的工具</li><li><a href="https://link.segmentfault.com/?enc=0vwBPO6XRpXMY0rqaF4NEg%3D%3D.xrpulMyWPFADsm2N4dBLHukKBof6SyU%2BlJ6IS74PppI%3D" rel="nofollow">GTmetrix</a> 网页性能分析工具</li><li><a href="https://link.segmentfault.com/?enc=YjDOqzthZ9BYl38tSseUPw%3D%3D.rNxpE7Qb0vzzZL%2FsMbxfPh3CgH7%2FPr3m5sHaWa6ieIM%3D" rel="nofollow">Can I Use</a> 前端技术的浏览器支持情况</li><li><a href="https://link.segmentfault.com/?enc=Ph%2BmyD6k2%2F39YKRbgWZKWA%3D%3D.zFrjEd3361poSMvH1QPP9Wcaeyn7ZtHbiEM1oa7FLdc%3D" rel="nofollow">Carbon</a> 代码转图片工具</li><li><a href="https://link.segmentfault.com/?enc=2FNdMOzJrwG1vgTHXnV7dw%3D%3D.823PMMPZL59yKhcjrAd1fw5OIUbEKlK63U1JwFr%2BcuM%3D" rel="nofollow">Wappalyzer</a> 检测某个网站使用的技术栈</li></ul><h2>设计工具</h2><ul><li><strong>墨刀</strong>:原型设计工具。网址:<a href="https://link.segmentfault.com/?enc=arHrxb0lYCg%2FXoNgk9qhnQ%3D%3D.Tsq6LkoFJR06N8uDOujCskbjszHfuGRoT7LkJmV8DvI%3D" rel="nofollow">https://modao.cc/</a></li><li><strong>蓝湖</strong>:一款产品文档和设计图的在线协作平台。网址:<a href="https://link.segmentfault.com/?enc=2TiicHx8CoeQhwjQofTBTQ%3D%3D.v2gzjGJwbydO4Prf1E8JGczec6ha5UIBA8b4QUaLPO8%3D" rel="nofollow">https://lanhuapp.com</a></li><li><strong>PxCook(像素大厨)</strong>:高效易用的自动标注工具。软件下载链接:<a href="https://link.segmentfault.com/?enc=KbuDa%2BlqVwfR7llP9UYilw%3D%3D.qYcyG4usJW7ylxIwVtk5KxMALyZOR0gTYs4viROS3PLUFgaYhQxVmAT%2BUvd4f0Y%2F" rel="nofollow">https://www.fancynode.com.cn/pxcook</a></li></ul><blockquote>前端导航网站地址: <a href="https://link.segmentfault.com/?enc=6UDrB4dZqlUhGYFveL9XzQ%3D%3D.CsWTNJwZyrV1m6GxrFf9AJyuk%2BErQ%2BLV7tOkZtfVBrM%3D" rel="nofollow">https://www.kwgg2020.com</a> <p>笔者博客地址:<a href="https://link.segmentfault.com/?enc=4ciwkHqYHIDa2FrlAffqLA%3D%3D.%2FNeqFNRDT22uIHq%2Famrkzz3%2B0Z6eDeHtoZqPIfgAbKfk2pKRu6zclxqT%2Bn0ejO3o" rel="nofollow">https://github.com/biaochenxu...</a></p></blockquote><p><strong>推荐阅读:</strong></p><ul><li><a href="https://link.segmentfault.com/?enc=cdB389vyolA9CfQezaRGbQ%3D%3D.0w8g5jw4V9wAHuF3IRK3lcnUexBq%2BHgoWhvd5XdMkfiS0aAdqV8ndZymRA75oc6%2BTAgd38EJFx31879dRnanCg%3D%3D" rel="nofollow">通过10个实例小练习,快速入门熟练 Vue3 核心新特性</a></li></ul><p><img src="/img/remote/1460000022064008" alt="" title=""></p><p>支持一下下👇</p>
推荐一个学习的网站,学习、资源、工具、电子书、影视、资讯、还有强大的搜索!
https://segmentfault.com/a/1190000024459197
2020-09-15T08:31:49+08:00
2020-09-15T08:31:49+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
8
<p><img src="/img/remote/1460000024459201" alt="" title=""></p><p>哈喽,大家好,我是你们的小乖乖!</p><p>今天给大家带来的是一个资源网站的导航。</p><p>网站里面,资源、工具、电子书、影视、资讯、学习 的资源这里的都有,非常实用!</p><p>学习 主要是以实用的网站为主,娱乐主要是以 B 站有趣的频道为主。</p><p><img src="/img/remote/1460000024459200" alt="" title=""></p><p>这个网站的风格非常极客、简结并且漂亮,而且完全没有广告哦!</p><blockquote>网站地址: <a href="https://link.segmentfault.com/?enc=PU%2Fmfv96qKH9k%2Fo9U2LXkA%3D%3D.gzLN1sTt77NbHTBFRX4J0wFTwW%2FePNZAu%2BfdXNmy0PY%3D" rel="nofollow">https://www.kwgg2020.com/</a></blockquote><p><img src="/img/remote/1460000024459203" alt="" title=""></p><p><img src="/img/remote/1460000024459202" alt="" title=""></p><h2>搜索</h2><p>该网站最强大的是它的搜索功能,是一个聚合型搜索功能,包括 搜索、网盘、软件、书籍、其他。</p><p><img src="/img/remote/1460000024459204" alt="" title=""></p><p>不得不提的是联想词,会根据输入的关键字出现相关的联想词。</p><p>比如搜索 “穷爸爸富爸爸” 会出现很多联想词,而且这些词是调用的百度的联想的 api 来的,所以都是热门的联想词,可以点击相应的导航来搜索。</p><p><img src="/img/remote/1460000024459205" alt="" title=""></p><p>还可以在某网盘里面搜索</p><p><img src="/img/remote/1460000024459206" alt="" title=""></p><p>搜索到资源之后,直接下载即可,非常方便!</p><p><img src="/img/remote/1460000024459207" alt="" title=""></p><h2>学习</h2><p>分别是学习、资源、工具、读书、影视、资讯。</p><p>在资讯类目主要用来查看互联网最新的资讯,其中人人都是产品经历和增长黑盒的文章很值得一看,而知微事见很适合来做热点新闻的数据分析。</p><p>学习类目主要是各种网络课程,有少部分以文章和网页游戏的形式来呈现,适合自学某些技能。</p><p>资源类目主要是提供内容制作的素材,包含图片、声音、视频、文献以及软件资源等,其中图片和视频均为无版权素材,可以商用。</p><p>除了自有的网站资源提供外,可以通过搜索和字典查找的方式来获取更多的资源。</p><p>工具类目主要是进行内容制作的一些工具,包括海报、logo、视频以及声音制作,此外还有相关PDF、视频以及图片的格式转换工具、视频下载以及内容的数据分析工具等。</p><p>读书类目分为书籍网站和书籍搜索,书籍网站主要以网站的形式呈现,可以进行电子书的查找和免费下载,书籍搜索则通过搜索的方式来获取电子书资源进行下载或阅读。</p><p>最后影视类目主要是纪录片、电影以及动漫的观看网站和资源搜索网站,其中zzzFun动漫网经常用,里面有很多 B 站会员才能看的动漫,直接在线免费观看。</p><h3>IT学习</h3><p><img src="/img/remote/1460000024459208" alt="" title=""></p><h3>外语学习</h3><p><img src="/img/remote/1460000024459209" alt="" title=""></p><h3>综合学习</h3><p><img src="/img/remote/1460000024459210" alt="" title=""></p><h3>思想开拓</h3><p><img src="/img/remote/1460000024459211" alt="" title=""></p><h3>创意设计</h3><p><img src="/img/remote/1460000024459212" alt="" title=""></p><h3>视频素材</h3><p><img src="/img/remote/1460000024459214" alt="" title=""></p><h3>声音素材</h3><p><img src="/img/remote/1460000024459213" alt="" title=""></p><h3>图片素材</h3><p><img src="/img/remote/1460000024459215" alt="" title=""></p><h3>文献资源</h3><p><img src="/img/remote/1460000024459216" alt="" title=""></p><h3>搜索查找</h3><p><img src="/img/remote/1460000024459217" alt="" title=""></p><h3>字典查找</h3><p><img src="/img/remote/1460000024459218" alt="" title=""></p><h3>历史文献</h3><p><img src="/img/remote/1460000024459219" alt="" title=""></p><h3>数据报告</h3><p><img src="/img/remote/1460000024459220" alt="" title=""></p><h3>生活技巧</h3><p><img src="/img/remote/1460000024459221" alt="" title=""></p><h3>软件资源</h3><p><img src="/img/remote/1460000024459222" alt="" title=""></p><h3>设计创作</h3><p><img src="/img/remote/1460000024459225" alt="" title=""></p><h3>文件格式转换</h3><p><img src="/img/remote/1460000024459224" alt="" title=""></p><h3>网络安全</h3><p><img src="/img/remote/1460000024459226" alt="" title=""></p><h3>办公常用</h3><p><img src="/img/remote/1460000024459223" alt="" title=""></p><h3>视频下载</h3><p><img src="/img/remote/1460000024459228" alt="" title=""></p><h3>数据分析</h3><p><img src="/img/remote/1460000024459227" alt="" title=""></p><h3>书籍网站</h3><p><img src="/img/remote/1460000024459229" alt="" title=""></p><h3>书籍搜索</h3><p><img src="/img/remote/1460000024459230" alt="" title=""></p><h3>关于影视</h3><p><img src="/img/remote/1460000024459231" alt="" title=""></p><h3>其他推荐</h3><p><img src="/img/remote/1460000024459232" alt="" title=""></p><h3>推荐</h3><p><img src="/img/remote/1460000024459233" alt="" title=""></p><h3>资讯阅读</h3><p><img src="/img/remote/1460000024459234" alt="" title=""></p><h2>娱乐</h2><p>资讯视频主要是 B站 几个官方站,可以查看到B站的一些官方消息和 up 主资讯。</p><p>学习视频主要是有剪辑以及常用办公软件的使用技巧学习,兴趣学习以开拓视野为主,综合视频里更多的是赏课,娱乐视频里主要是电影解说和图书评论。</p><p>其他视频里是一些有鲜明特色的up主。</p><p>最后有趣的网站主要收录了一些奇奇怪怪但是很有趣味的网站,可以作为消遣使用。</p><h3>资讯视频</h3><p><img src="/img/remote/1460000024459235" alt="" title=""></p><h3>软件学习</h3><p><img src="/img/remote/1460000024459237" alt="" title=""></p><h3>语言学习</h3><p><img src="/img/remote/1460000024459236" alt="" title=""></p><h3>技能学习</h3><p><img src="/img/remote/1460000024459238" alt="" title=""></p><h3>兴趣学习</h3><p><img src="/img/remote/1460000024459239" alt="" title=""></p><h3>纪录片</h3><p><img src="/img/remote/1460000024459241" alt="" title=""></p><h3>科普片</h3><p><img src="/img/remote/1460000024459240" alt="" title=""></p><h3>人文片</h3><p><img src="/img/remote/1460000024459242" alt="g" title="g"></p><h3>读书视频</h3><p><img src="/img/remote/1460000024459243" alt="" title=""></p><h3>影视解说</h3><p><img src="/img/remote/1460000024459244" alt="" title=""></p><h3>其他视频</h3><p><img src="/img/remote/1460000024459245" alt="" title=""></p><h3>有趣网站</h3><p><img src="/img/remote/1460000024459246" alt="" title=""></p><h2>过程与计划</h2><h3>过程</h3><p>这网站其实是小乖乖用业余时间做的,花费了很多时间去搜寻了这么多的网站资源。</p><p>搜索资源的过程用了好几天,搭建的整个过程又用了好几天,上上周的两天周末就是在搭建这个网站,申请域名备案的过程又等待了一周,所以整个过程下来就都大半过月了。</p><p>所以最近一直没更新文章 😂</p><p>网站其实在一周之前就做好了,只是平时工作加班比较严重,加上上周末的两天都在做工作上的技术调研,所以没空写文章,所以等到了今天才写好。</p><p>实用的话,大家就支持一下小乖乖吧。</p><blockquote>网站地址: <a href="https://link.segmentfault.com/?enc=sfJ29HKwxJuxVfEEmmzIsg%3D%3D.wZB1ps8vFmtX1VKa0xttcNM2qU7zD3I%2BpWRpcrqp25g%3D" rel="nofollow">https://www.kwgg2020.com/</a></blockquote><p>网站地址收藏起来!</p><h3>计划</h3><p>未来将添加更多实用的网站,删除一些失效的网站。</p><p>网站支持评论功能哦,欢迎大家在网站的评论里提供更多实用的网站哦。</p><p>成长的路上,我们一起进步。</p><p>欢迎大家提供更多的建议,欢迎在下方讨论哦。</p>
惊艳!可视化的 js:动态图演示 Promises & Async/Await 的过程!
https://segmentfault.com/a/1190000022743630
2020-05-25T23:17:29+08:00
2020-05-25T23:17:29+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
36
<p><img src="/img/remote/1460000022743634" alt="" title=""></p>
<blockquote><ul>
<li>原文地址:<a href="https://link.segmentfault.com/?enc=k2vYWFEWqAfJ1oyKFf%2FazQ%3D%3D.BQqb1O3l2mKpfpdEZ1qjSKrfY6SkmTiCCXKeUx%2BZZA2oiFd59xtcjDS3j7uRRpPvbeY1%2Fq1VapuwaDnnYwyOl95hDEcmTePcJpSI7y1Uiyo%3D" rel="nofollow">https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke</a>
</li>
<li>原文作者:Lydia Hallie</li>
</ul></blockquote>
<h2>原由</h2>
<p>你是否运行过不按你预期运行的 js 代码 ?</p>
<p>比如:某个函数被随机的、不可预测时间的执行了,或者被延迟执行了。</p>
<p>这时,你需要从 ES6 中引入的一个非常酷的新特性: Promise 来处理你的问题。</p>
<p>为了深入理解 Promise ,我在某个不眠之夜,做了一些动画来演示 Promise 的运行,我多年来的好奇心终于得到实现。</p>
<p>对于 Promise ,您为什么要使用它,它在底层是如何工作的,以及我们如何以最现代的方式编写它呢?</p>
<h2>介绍</h2>
<p>在书写 JavaScript 的时候,我们经常不得不去处理一些依赖于其它任务的任务!</p>
<p>比如:我们想要得到一个图片,对其进行压缩,应用一个滤镜,然后保存它 。</p>
<p>首先,先用 getImage 函数要得到我们想要编辑的图片。</p>
<p>一旦图片被成功加载,把这个图片值传到一个 ocmpressImage 函数中。</p>
<p>当图片已经被成功地重新调整大小后,在 applyFilter 函数中为图片应用一个滤镜。</p>
<p>在图片被压缩和添加滤镜后,保存图片并且打印成功的日志!</p>
<p>最后,代码很简单如图:</p>
<p><img src="/img/remote/1460000022743633" alt="" title=""></p>
<p>注意到了吗?尽管以上代码也能得到我们想要的结果,但是完成的过程并不是友好。</p>
<p>使用了大量嵌套的回调函数,这使我们的代码阅读起来特别困难。</p>
<p>因为写了许多嵌套的回调函数,这些回调函数又依赖于前一个回调函数,这通常被称为 <a href="https://link.segmentfault.com/?enc=3KR%2B0MPTi642Sc74J9RjLQ%3D%3D.n40271gwyFkaUrKGd0k2ZEJV%2FFF%2BJ8f3%2BMilGUhNCMM%3D" rel="nofollow">回调地狱</a>。</p>
<p>幸运的,ES6 中的 Promise 的能很好的处理这种情况!</p>
<p>让我们看看 promise 是什么,以及它是如何在类似于上述的情况下帮助我们的。</p>
<h2>Promise语法</h2>
<p>ES6引入了Promise。在许多教程中,你可能会读到这样的内容:</p>
<blockquote>Promise 是一个值的占位符,这个值在未来的某个时间要么 resolve 要么 reject 。</blockquote>
<p>对于我来说,这样的解释从没有让事情变得更清楚。</p>
<p>事实上,它只是让我感觉 Promise 是一个奇怪的、模糊的、不可预测的一段魔法。</p>
<p>接下来让我们看看 promise 真正是什么?</p>
<p>我们可以使用一个接收一个回调函数的 Promise 构造器创建一个 promise。</p>
<p>好酷,让我们尝试一下!</p>
<p><img src="/img/remote/1460000022743635" alt="" title=""></p>
<p>等等,刚刚得到的返回值是什么?</p>
<p>Promise 是一个对象,它包含一个状态 <code>PromiseStatus</code> 和一个值 <code>PromiseValue</code>。</p>
<p>在上面的例子中,你可以看到 <code>PromiseStatus</code> 的值是 pending, <code>PromiseValue</code> 的值是 undefined。</p>
<p>不过 - 你将永远不会与这个对象进行交互,你甚至不能访问 <code>PromiseStatus</code> 和 <code>PromiseValue</code> 这两个属性!</p>
<p>然而,在使用 Promise 的时候,这俩个属性的值是非常重要的。</p>
<hr>
<p><code>PromiseStatus</code> 的值,也就是 <code>Promise</code> 的状态,可以是以下三个值之一:</p>
<ul>
<li>✅ <code>fulfilled</code>: <code>promise</code> 已经被 <code>resolved</code>。一切都很好,在 <code>promise</code> 内部没有错误发生。</li>
<li>❌ <code>rejected</code>: <code>promise</code> 已经被 <code>rejected</code>。哎呦,某些事情出错了。</li>
<li>⏳ <code>pending</code>: <code>promise</code> 暂时还没有被解决也没有被拒绝,仍然处于 <code>pending</code> 状态</li>
</ul>
<p>好吧,这一切听起来很棒,但是什么时候 <code>promise</code> 的状态是 <code>pending</code>、<code>fulfilled</code> 或 <code>rejected</code> 呢? 为什么这个状态很重要呢?</p>
<p>在上面的例子中,我们只是为 <code>Promise </code>构造器传递了一个简单的回调函数 <code>() => {}</code> 。</p>
<p>然而,这个回调函数实际上接受两个参数。</p>
<ul>
<li>第一个参数的值经常被叫做 <code>resolve</code> 或 <code>res</code>,它是一个函数,在 <code>Promise</code> 应该解决 <code>resolve</code> 的时候会被调用。</li>
<li>第二个参数的值经常被叫做 <code>reject</code> 或<code> rej</code>,它也是一个函数,在 <code>Promise</code> 出现一些错误应该被拒绝 <code>reject</code> 的时候被调用。</li>
</ul>
<p><img src="/img/remote/1460000022743636" alt="" title=""></p>
<p>让我们尝试看看当我们调用 <code>resolve</code> 或 <code>reject</code> 方法时得到的日志。</p>
<p>在我的例子中,把 <code>resolve</code> 方法叫做 <code>res</code>,把 <code>reject</code> 方法叫做 <code>rej</code>。</p>
<p><img src="/img/remote/1460000022743637" alt="" title=""></p>
<p>太好了!我们终于知道如何摆脱 <code>pending</code> 状态和 <code>undefined</code> 值了!</p>
<ul>
<li>当我们调用 <code>resolve</code> 方法时,<code>promise</code> 的状态是 <code>fulfilled</code>。</li>
<li>当我们调用 <code>reject</code> 方法时,<code>promise</code> 的状态是 <code>rejected</code>。</li>
</ul>
<blockquote>有趣的是,我让(Jake Archibald)校对了这篇文章,他实际上指出 Chrome 中存在一个错误,该错误当前将状态显示为 “ fulfilled” 而不是 “ resolved”。感谢 Mathias Bynens,它现已在Canary 中修复! 🥳🕺🏼<br><img src="/img/remote/1460000022743638" alt="" title="">
</blockquote>
<p>好了,现在我们知道如何更好控制那个模糊的 Promise 对象。但是他被用来做什么呢?</p>
<p>在前面的介绍章节,我展示了一个获得图片、压缩图片、为图片应用过滤器并保存它的例子!最终,这变成了一个混乱的嵌套回调。</p>
<p>幸运的,<code>Promise</code> 可以帮助我们解决这个问题!</p>
<p>首先,让我们重写整个代码块,以便每个函数返回一个 <code>Promise</code> 来代替之前的函数。</p>
<p>如果图片被加载完成并且一切正常,让我们用加载完的图片解决 <code> (resolve)promise</code>。</p>
<p>否则,如果在加载文件时某个地方有一个错误,我们将会用发生的错误拒绝 <code>(reject)promise</code> 。</p>
<p><img src="/img/remote/1460000022743646" alt="" title=""></p>
<p>让我们看下当我们在终端运行这段代码时会发生什么?</p>
<p><img src="/img/remote/1460000022743640" alt="" title=""></p>
<p>非常酷!就像我们所期望的一样,<code>promise</code> 得到了解析数据后的值。</p>
<p>但是现在呢?我们不关心整个 <code>promise</code> 对象,我们只关心数据的值!幸运的,有内置的方法来得到 <code>promise</code> 的值。</p>
<p>对于一个 <code>promise</code>,我们可以使用它上面的 3 个方法:</p>
<ul>
<li>.then(): 在一个 promise 被 resolved 后调用</li>
<li>.catch(): 在一个 promise 被 rejected 后被调用</li>
<li>.finally(): 不论 promise 是被 resolved 还是 reject 总是调用</li>
</ul>
<p><img src="/img/remote/1460000022743639" alt="" title=""></p>
<p>.then 方法接收传递给 <code>resolve</code> 方法的值。</p>
<p><img src="/img/remote/1460000022743641" alt="" title=""></p>
<p>.catch 方法接收传递给 <code>rejected</code> 方法的值。</p>
<p><img src="/img/remote/1460000022743642" alt="" title=""></p>
<p>最终,我们拥有了 <code>promise</code> 被解决后 <code>(resolved)</code> 的值,并不需要整个 <code>promise</code> 对象!</p>
<p>现在我们可以用这个值做任何我们想做的事。</p>
<hr>
<p>顺便提醒一下,当你知道一个 <code>promise</code> 总是 <code>resolve</code> 或者总是 <code>reject</code> 的时候,你可以写 <code>Promise.resolve</code> 或 <code>Promise.reject</code>,传入你想要 <code>reject</code> 或 <code>resolve</code> 的 <code>promise</code> 的值。</p>
<p><img src="/img/remote/1460000022743643" alt="" title=""></p>
<p>在下边的例子中你将会经常看到这个语法。</p>
<p>在 getImage 的例子中,为了运行它们,我们最终不得不嵌套多个回调。幸运的,<code>.then</code> 处理器可以帮助我们完成这件事!</p>
<p><code>.then</code> 它自己的执行结果是一个 <code>promise</code>。这意味着我们可以链接任意数量的 <code>.then</code>:前一个 <code>then</code> 回调的结果将会作为参数传递给下一个 <code>then</code> 回调!</p>
<p><img src="/img/remote/1460000022743644" alt="" title=""></p>
<p>在 getImage 示例中,为了传递被处理的图片到下一个函数,我们可以链接多个 <code>then</code> 回调。</p>
<p>相比于之前最终得到许多嵌套回调,现在我们得到了整洁的 <code>then</code> 链。</p>
<p><img src="/img/remote/1460000022743645" alt="" title=""></p>
<p>完美!这个语法看起来已经比之前的嵌套回调好多了。</p>
<h2>宏任务和微任务(macrotask and microtask)</h2>
<p>我们知道了一些如何创建 <code>promise</code> 以及如何提取出 <code>promise</code> 的值的方法。</p>
<p>让我们为脚本添加一些更多的代码并且再次运行它:</p>
<p><img src="/img/remote/1460000022743647" alt="" title=""></p>
<p>等下,发生了什么?!</p>
<p>首先,<code>Start!</code> 被输出。</p>
<p>好的,我们已经看到了那一个即将到来的消息:<code>console.log('Start!')</code> 在最前一行输出!</p>
<p>然而,第二个被打印的值是 <code>End!</code>,并不是 <code>promise</code> 被解决的值!只有在 <code>End!</code> 被打印之后,<code>promise</code> 的值才会被打印。</p>
<p>这里发生了什么?</p>
<p>我们最终看到了 <code>promise</code> 真正的力量! 尽管 <code>JavaScript</code> 是单线程的,我们可以使用 <code>Promise</code> 添加异步任务!</p>
<p>等等,我们之前没见过这种情况吗? </p>
<p>在 <a href="https://link.segmentfault.com/?enc=NaQnZYV0H5bxKMNtYH0DFw%3D%3D.C%2FXEPRb3w7SQIxUVpixFkZNa1OxpfdkknkLJ4bXVHPhDZZoZhowhPNnOk1ZVo5YfYS%2F1G1Hvi2pVEwU4h9n6i4gE0fun0Y76UKMUbF%2FE9CA%3D" rel="nofollow">JavaScript Event Loop</a> 中,我们不是也可以使用浏览器原生的方法如 <code>setTimeout</code> 创建某类异步行为吗?</p>
<p>是的!然而,在事件循环内部,实际上有 2 种类型的队列:<strong>宏任务(macro)队列</strong> (或者只是叫做 <strong>任务队列</strong> )和 <strong>微任务队列</strong>。</p>
<p>(宏)任务队列用于 <strong>宏任务</strong>,微任务队列用于 <strong>微任务</strong>。</p>
<p>那么什么是宏任务,什么是微任务呢?</p>
<p>尽管他们比我在这里介绍的要多一些,但是最常用的已经被展示在下面的表格中!</p>
<p>| | | | | <br>| :------: | :------: | :------: | :------: | <br>| (Macro)task: | setTimeout | setInterval | setImmediate |<br>| Microtask: | process.nextTick | Promise callback | queueMicrotask |</p>
<p>我们看到 <code>Promise</code> 在微任务列表中! 当一个 <code>Promise</code> 解决 (<code>resolve</code>) 并且调用它的 <code>then()</code>、<code>catch()</code> 或 <code>finally()</code> 方法的时候,这些方法里的回调函数被添加到微任务队列!</p>
<p>这意味着 <code>then(),chatch() 或 finally()</code> 方法内的回调函数不是立即被执行,本质上是为我们的 <code>JavaScript</code> 代码添加了一些异步行为!</p>
<p>那么什么时候执行 then(),catch(),或 finally() 内的回调呢?</p>
<p>事件循环给与任务不同的优先级:</p>
<ol>
<li>当前在调用栈 (call stack) 内的所有函数会被执行。当它们返回值的时候,会被从栈内弹出。</li>
<li>当调用栈是空的时,所有排队的微任务会一个接一个从微任务任务队列中弹出进入调用栈中,然后在调用栈中被执行!(微任务自己也能返回一个新的微任务,有效地创建无限的微任务循环 )</li>
<li>如果调用栈和微任务队列都是空的,事件循环会检查宏任务队列里是否还有任务。如果宏任务中还有任务,会从宏任务队列中弹出进入调用栈,被执行后会从调用栈中弹出!</li>
</ol>
<p>让我们快速地看一个简单的例子:</p>
<ul>
<li>Task1: 立即被添加到调用栈中的函数,比如在我们的代码中立即调用它。</li>
<li>Task2,Task3,Task4: 微任务,比如 <code>promise</code> 中 <code>then</code> 方法里的回调,或者用 <code>queueMicrotask</code> 添加的一个任务。</li>
<li>Task5,Task6: 宏任务,比如 <code>setTimeout 或者 setImmediate</code> 里的回调</li>
</ul>
<p><img src="/img/remote/1460000022743649" alt="" title=""></p>
<p>首先,Task1 返回一个值并且从调用栈中弹出。然后,<code>JavaScript</code> 引擎检查微任务队列中排队的任务。一旦微任务中所有的任务被放入调用栈并且最终被弹出,JavaScript 引擎会检查宏任务队列中的任务,将他们弹入调用栈中并且在它们返回值的时候把它们弹出调用栈。</p>
<p>图中足够粉色的盒子是不同的任务,让我们用一些真实的代码来使用它!</p>
<p><img src="/img/remote/1460000022743648" alt="" title=""></p>
<p>在这段代码中,我们有宏任务 setTimeout 和 微任务 promise 的 then 回调。</p>
<p>一旦 JavaScript 引擎到达 setTimeout 函数所在的那行就会涉及到事件循环。</p>
<p>让我们一步一步地运行这段代码,看看会得到什么样的日志!</p>
<blockquote>快速提一下:在下边的例子中,我正在展示的像 <code>console.log</code>,<code>setTimeout</code> 和 <code>Promise.resolve</code> 等方法正在被添加到调用栈中。它们是内部的方法实际上没有出现在堆栈痕迹中,因此如果你正在使用调试器,不用担心,你不会在任何地方见到它们。它只是在没有添加一堆样本文件代码的情况下使这个概念解释起来更加简单。</blockquote>
<p>在第一行,<code>JavaScript</code> 引擎遇到了 <code>console.log()</code> 方法,它被添加到调用栈,之后它在控制台输出值 Start!。<code>console.log</code> 函数从调用栈内弹出,之后 <code>JavaScript</code> 引擎继续执行代码。</p>
<p><img src="/img/remote/1460000022743650" alt="" title=""></p>
<p><code>JavaScript</code> 引擎遇到了 <code>setTimeout</code> 方法,他被弹入调用栈中。<code>setTimeout</code> 是浏览器的原生方法:它的回调函数 <code>(() => console.log('In timeout'))</code> 将会被添加到 <code>Web API</code>,直到计时器完成计时。尽管我们为计时器提供的值是 0,在它被添加到宏任务队列 (<code>setTimeout</code> 是一个宏任务) 之后回调还是会被首先推入 <code>Web API</code>。</p>
<p><img src="/img/remote/1460000022743651" alt="" title=""></p>
<p><code>JavaScript</code> 引擎遇到了 <code>Promise.resolve</code> 方法。<code>Promise.resolve</code> 被添加到调用栈。在 <code>Promise</code> 解决 (<code>resolve</code>) 值之后,它的 <code>then</code> 中的回调函数被添加到微任务队列。</p>
<p><img src="/img/remote/1460000022743652" alt="" title=""></p>
<p><code>JavaScript</code> 引擎看到调用栈现在是空的。由于调用栈是空的,它将会去检查在微任务队列中是否有在排队的任务!是的,有任务在排队,<code>promise</code> 的 <code>then</code> 中的回调函数正在等待轮到它!它被弹入调用栈,之后它输出了 <code>promise</code> 被解决后( <code>resolved</code> )的值: 在这个例子中的字符串 <code>Promise!</code>。</p>
<p><img src="/img/remote/1460000022743653" alt="" title=""></p>
<p><code>JavaScript</code> 引擎看到调用栈是空的,因此,如果任务在排队的话,它将会再次去检查微任务队列。此时,微任务队列完全是空的。</p>
<p>到了去检查宏任务队列的时候了:<code>setTimeout</code> 回调仍然在那里等待!<code>setTimeout</code> 被弹入调用栈。回调函数返回 <code>console.log</code> 方法,输出了字符串 <code>In timeout!</code>。<code>setTimeout</code> 回调从调用栈中弹出。</p>
<p><img src="/img/remote/1460000022743654" alt="" title=""></p>
<p>终于,所有的事情完成了! 看起来我们之前看到的输出最终并不是那么出乎意料。</p>
<h2>Async/Await</h2>
<p><code>ES7</code> 引入了一个新的在 <code>JavaScript</code> 中添加异步行为的方式并且使 <code>promise</code> 用起来更加简单!随着 <code>async</code> 和 <code>await</code> 关键字的引入,我们能够创建一个隐式的返回一个 <code>promise</code> 的 <code>async</code> 函数。但是,我们该怎么做呢?</p>
<p>之前,我们看到不管是通过输入 <code>new Promise(() => {})</code>,<code>Promise.resolve</code> 或 <code>Promise.reject</code>,我们都可以显式的使用 <code>Promise</code> 对象创建 <code>promise</code>。</p>
<p>我们现在能够创建隐式地返回一个对象的异步函数,而不是显式地使用 <code>Promise</code> 对象!这意味着我们不再需要写任何 <code>Promise</code> 对象了。</p>
<p><img src="/img/remote/1460000022743656" alt="" title=""></p>
<p>尽管 <code>async</code> 函数隐式的返回 <code>promise</code> 是一个非常棒的事实,但是在使用 <code>await</code> 关键字的时候才能看到 <code>async</code> 函数的真正力量。当我们等待 <code>await</code> 后的值返回一个 <code>resolved</code> 的 <code>promise</code> 时,通过 <code>await</code> 关键字,我们可以暂停异步函数。如果我们想要得到这个 <code>resolved</code> 的 <code>promise</code> 的值,就像我们之前用 <code>then</code> 回调那样,我们可以为被 <code>await</code> 的 <code>promise</code> 的值赋值为变量!</p>
<p>这样,我们就可以暂停一个异步函数吗?很好,但这到底是什么意思?</p>
<p>当我们运行下面的代码块时让我们看下发生了什么:</p>
<p><img src="/img/remote/1460000022743655" alt="" title=""></p>
<p>额,这里发生了什么呢?</p>
<p><img src="/img/remote/1460000022743658" alt="" title=""></p>
<p>首先,<code>JavaScript</code> 引擎遇到了 <code>console.log</code>。它被弹入到调用栈中,这之后 <code>Before function!</code> 被输出。</p>
<p><img src="/img/remote/1460000022743657" alt="" title=""></p>
<p>然后,我们调用了异步函数<code>myFunc()</code>,这之后<code>myFunc</code>函数体运行。函数主体内的最开始一行,我们调用了另一个<code>console.log</code>,这次传入的是字符串<code>In function!</code>。<code>console.log</code>被添加到调用栈中,输出值,然后从栈内弹出。</p>
<p><img src="/img/remote/1460000022743659" alt="" title=""></p>
<p>函数体继续执行,将我们带到第二行。最终,我们看到一个<code>await</code>关键字!</p>
<p>最先发生的事是被等待的值执行:在这个例子中是函数<code>one</code>。它被弹入调用栈,并且最终返回一个解决状态的<code>promise</code>。一旦<code>Promise</code>被解决并且<code>one</code>返回一个值,<code>JavaScript</code>遇到了<code>await</code>关键字。</p>
<p>当遇到<code>await</code>关键字的时候,异步函数被暂停。函数体的执行被暂停,<code>async</code>函数中剩余的代码会在微任务中运行而不是一个常规任务!</p>
<p><img src="/img/remote/1460000022743660" alt="" title=""></p>
<p>现在,因为遇到了<code>await</code>关键字,异步函数<code>myFunc</code>被暂停,<code>JavaScript</code>引擎跳出异步函数,并且在异步函数被调用的执行上下文中继续执行代码:在这个例子中是<strong>全局执行上下文</strong>! ♀️</p>
<p><img src="/img/remote/1460000022743661" alt="" title=""></p>
<p>最终,没有更多的任务在全局执行上下文中运行!事件循环检查看看是否有任何的微任务在排队:是的,有!在解决了<code>one</code>的值以后,异步函数<code>myFunc</code>开始排队。<code>myFunc</code>被弹入调用栈中,在它之前中断的地方继续运行。</p>
<p>变量<code>res</code>最终获得了它的值,也就是<code>one</code>返回的<code>promise</code>被解决的值!我们用<code>res</code>的值(在这个例子中是字符串<code>One!</code>)调用<code>console.log</code>。<code>One!</code>被打印到控制台并且<code>console.log</code>从调用栈弹出。</p>
<p>最终,所有的事情都完成了!你注意到<code>async</code>函数相比于<code>promise</code>的<code>then</code>有什么不同吗?<code>await</code>关键字暂停了<code>async</code>函数,然而如果我们使用<code>then</code>的话,<code>Promise</code>的主体将会继续被执行!</p>
<p>嗯,这是相当多的信息! 当使用<code>Promise</code>的时候,如果你仍然感觉有一点不知所措,完全不用担心。我个人认为,当使用异步<code>JavaScript</code>的时候,只是需要经验去注意模式之后便会感到自信。</p>
<p>当使用异步<code>JavaScript</code>的时候,我希望你可能遇到的“无法预料的”或“不可预测的”行为现在变得更有意义!</p>
<h2>最后</h2>
<p>外国友人技术博客的语言表达的方式和风格、与国人的还是有很大差别的啊。</p>
<p>每每看到有很长或者很拗口的句子的时候,我就想按自己的语言来写一篇了 🤩</p>
<p>可能自己写一篇都比翻译的快 🤩</p>
<p><img src="/img/remote/1460000022743662" alt="" title=""></p>
<p><strong>推荐阅读:</strong></p>
<ol><li><a href="https://link.segmentfault.com/?enc=iDvLZOZ7E5pleqPVZgIuDg%3D%3D.UpXyjPjcrCGRuYoed3MXnp4x44XNYmcPLuF%2BWH7xUMvWA5i0CCVOHdr2mS2lXlQ2eAGmsPBiQCYi35RwUfiMdw%3D%3D" rel="nofollow">通过10个实例小练习,快速入门熟练 Vue3 核心新特性</a></li></ol>
<p>2. <a href="https://link.segmentfault.com/?enc=pQo2TbYkUruW18zmgPW1Uw%3D%3D.pYn4eL92eAYwCw7fLwR7mhCHewhin4taZW1iD9mk8reTsEupPAPvGcYwDkrvkz35hneJenz9nIdr2LBimqySKQ%3D%3D" rel="nofollow">重磅:GitHub 上 100K+ Star 的前端面试开源项目汇总(进大厂必备)</a></p>
<ol>
<li><a href="https://link.segmentfault.com/?enc=7RlPieGNEm0mumbnZfMdHw%3D%3D.B78fxgBqpjcLYso0f7YmYQuCjWdFGAZlk0RKYCzX9Q22t%2FCObCGXwwqMlrz%2FpW4nC7kvk54qK6ia0gCgLuuIYA%3D%3D" rel="nofollow">强烈推荐: GitHub 上 170K+ Star 的前端学习的数据结构与算法项目</a></li>
<li><a href="https://link.segmentfault.com/?enc=DZkF0stvEraqrWe9unldDg%3D%3D.TDvSOzSfYEmPtb8kupxXyYEQqpQEc54SVexlTm543scfwTw95Y3JXo5T7v%2B6Fv8jbbh47KJAKwwqVDWby8aJ5w%3D%3D" rel="nofollow">一张图理清Vue 3.0的响应式系统,实现精简版的响应式系统</a></li>
<li><a href="https://link.segmentfault.com/?enc=JgGktC4FPeTV83EO%2BHokiw%3D%3D.G4mHi%2BrfiaSHvCxikfl5%2FVpiCKpxmRBEXqo5fc1J7to6bogkU%2Fk89lmpXfAypHeJSj6XRAK3vjY6T37WFCj0IQ%3D%3D" rel="nofollow">黑学习方式:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></li>
</ol>
<p><img src="/img/remote/1460000022064008" alt="" title=""></p>
<p>支持一下下👇</p>
通过10个实例小练习,快速入门熟练 Vue3.0 核心新特性
https://segmentfault.com/a/1190000022612964
2020-05-11T23:32:29+08:00
2020-05-11T23:32:29+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
14
<p><img src="/img/remote/1460000022612967" alt="" title=""></p>
<p>Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。</p>
<p>GitHub 博客地址: <a href="https://link.segmentfault.com/?enc=XHg%2FLmTwnivIbxa9BR2bHg%3D%3D.u%2BFu3dkF27HSoW7wMOCIppgA%2FJM7tsHaWWniageIulNjf2PH2DyRo54WUmg3G4Wr" rel="nofollow">https://github.com/biaochenxu...</a></p>
<h2>环境搭建</h2>
<pre><code>$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn</code></pre>
<p>下载完成之后打开代码, 开启 sourceMap :</p>
<ul>
<li>tsconfig.json 把 sourceMap 字段修改为 true: <code>"sourceMap": true</code>
</li>
<li>rollup.config.js 在 rollup.config.js 中,手动键入: <code>output.sourcemap = true</code>
</li>
<li>生成 vue 全局的文件:<code>yarn dev</code>
</li>
<li>在根目录创建一个 demo 目录用于存放示例代码,并在 demo 目录下创建 html 文件,引入构建后的 vue 文件</li>
</ul>
<hr>
<p>api 的使用都是很简单的,下文的内容,看例子代码就能懂了的,所以下面的例子不会做过多解释。</p>
<h2>reactive</h2>
<blockquote>reactive: 创建响应式数据对象<p>setup 函数是个新的入口函数,相当于 vue2.x 中 beforeCreate 和 created,在 <code>beforeCreate</code> 之后 <code>created</code> 之前执行。</p>
</blockquote>
<pre><code class="html"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>reactive</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive } = Vue
const App = {
template: `
<button @click='click'>reverse</button>
<div style="margin-top: 20px">{{ state.message }}</div>
`,
setup() {
console.log('setup ');
const state = reactive({
message: 'Hello Vue3!!'
})
click = () => {
state.message = state.message.split('').reverse().join('')
}
return {
state,
click
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612968" alt="" title=""></p>
<h2>ref & isRef</h2>
<blockquote>ref : 创建一个响应式的数据对象<br>isRef : 检查值是否是 ref 的引用对象。</blockquote>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>ref & isRef</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, isRef } = Vue
const App = {
template: `
<button @click='click'>count++</button>
<div style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const count = ref(0);
console.log("count.value:", count.value) // 0
count.value++
console.log("count.value:", count.value) // 1
// 判断某值是否是响应式类型
console.log('count is ref:', isRef(count))
click = () => {
count.value++;
console.log("click count.value:", count.value)
}
return {
count,
click,
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612970" alt="" title=""></p>
<h2>Template Refs</h2>
<p>使用 <code>Composition API</code> 时,反应性引用和模板引用的概念是统一的。</p>
<p>为了获得对模板中元素或组件实例的引用,我们可以像往常一样声明 <code>ref</code> 并从 <code>setup()</code> 返回。</p>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>Template Refs</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue
const App = {
template: `
<button @click='click'>count++</button>
<div ref="count" style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const count = ref(null);
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(count.value) // <div/>
})
click = () => {
count.value++;
console.log("click count.value:", count.value)
}
return {
count,
click
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612969" alt="" title=""></p>
<hr>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>Template Refs</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue
const App = {
template: `
<div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
{{ item }}
</div>
`,
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// make sure to reset the refs before each update
onBeforeUpdate(() => {
divs.value = []
})
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(divs.value) // [<div/>]
})
return {
list,
divs
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612973" alt="" title=""></p>
<h2>toRefs</h2>
<blockquote>toRefs : 将响应式数据对象转换为单一响应式对象</blockquote>
<p>将一个 reactive 代理对象打平,转换为 ref 代理对象,使得对象的属性可以直接在 template 上使用。</p>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>toRefs</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, isRef, toRefs } = Vue
const App = {
// template: `
// <button @click='click'>reverse</button>
// <div style="margin-top: 20px">{{ state.message }}</div>
// `,
// setup() {
// const state = reactive({
// message: 'Hello Vue3.0!!'
// })
// click = () => {
// state.message = state.message.split('').reverse().join('')
// console.log('state.message: ', state.message)
// }
// return {
// state,
// click
// }
// }
template: `
<button @click='click'>count++</button>
<div style="margin-top: 20px">{{ message }}</div>
`,
setup() {
const state = reactive({
message: 'Hello Vue3.0!!'
})
click = () => {
state.message = state.message.split('').reverse().join('')
console.log('state.message: ', state.message)
}
return {
click,
...toRefs(state)
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612974" alt="" title=""></p>
<h2>computed</h2>
<blockquote>computed : 创建计算属性</blockquote>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>computed</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, computed } = Vue
const App = {
template: `
<button @click='handleClick'>count++</button>
<div style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const refData = ref(0);
const count = computed(()=>{
return refData.value;
})
const handleClick = () =>{
refData.value += 1 // 要修改 count 的依赖项 refData
}
console.log("refData:" , refData)
return {
count,
handleClick
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612972" alt="" title=""></p>
<hr>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>computed</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, computed } = Vue
const App = {
template: `
<button @click='handleClick'>count++</button>
<div style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const refData = ref(0);
const count = computed({
get(){
return refData.value;
},
set(value){
console.log("value:", value)
refData.value = value;
}
})
const handleClick = () =>{
count.value += 1 // 直接修改 count
}
console.log(refData)
return {
count,
handleClick
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612971" alt="" title=""></p>
<h2>watch & watchEffect</h2>
<blockquote>watch : 创建 watch 监听<p>watchEffect : 如果响应性的属性有变更,就会触发这个函数</p>
</blockquote>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>watch && watchEffect</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, ref, watch, watchEffect } = Vue
const App = {
template: `
<div class="container">
<button style="margin-left: 10px" @click="handleClick()">按钮</button>
<button style="margin-left: 10px" @click="handleStop">停止 watch</button>
<button style="margin-left: 10px" @click="handleStopWatchEffect">停止 watchEffect</button>
<div style="margin-top: 20px">{{ refData }}</div>
</div>`
,
setup() {
let refData = ref(0);
const handleClick = () =>{
refData.value += 1
}
const stop = watch(refData, (val, oldVal) => {
console.log('watch ', refData.value)
})
const stopWatchEffect = watchEffect(() => {
console.log('watchEffect ', refData.value)
})
const handleStop = () =>{
stop()
}
const handleStopWatchEffect = () =>{
stopWatchEffect()
}
return {
refData,
handleClick,
handleStop,
handleStopWatchEffect
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612978" alt="" title=""></p>
<h2>v-model</h2>
<blockquote>v-model:就是双向绑定</blockquote>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>v-model</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, watchEffect } = Vue
const App = {
template: `<button @click='click'>reverse</button>
<div></div>
<input v-model="state.message" style="margin-top: 20px" />
<div style="margin-top: 20px">{{ state.message }}</div>`,
setup() {
const state = reactive({
message:'Hello Vue 3!!'
})
watchEffect(() => {
console.log('state change ', state.message)
})
click = () => {
state.message = state.message.split('').reverse().join('')
}
return {
state,
click
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612975" alt="" title=""></p>
<h2>readonly</h2>
<p>使用 <code>readonly</code> 函数,可以把 普通 <code>object 对象</code>、<code>reactive 对象</code>、<code>ref 对象</code> 返回一个只读对象。</p>
<p>返回的 <code>readonly 对象</code>,一旦修改就会在 <code>console</code> 有 <code>warning</code> 警告。</p>
<p>程序还是会照常运行,不会报错。</p>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>readonly</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, readonly, watchEffect } = Vue
const App = {
template: `
<button @click='click'>reverse</button>
<button @click='clickReadonly' style="margin-left: 20px">readonly++</button>
<div style="margin-top: 20px">{{ original.count }}</div>
`,
setup() {
const original = reactive({ count: 0 })
const copy = readonly(original)
watchEffect(() => {
// works for reactivity tracking
console.log(copy.count)
})
click = () => {
// mutating original will trigger watchers relying on the copy
original.count++
}
clickReadonly = () => {
// mutating the copy will fail and result in a warning
copy.count++ // warning!
}
return {
original,
click,
clickReadonly
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612976" alt="" title=""></p>
<h2>provide & inject</h2>
<p><code>provide</code> 和 <code>inject</code> 启用类似于 2.x <code>provide / inject</code> 选项的依赖项注入。</p>
<p>两者都只能在 <code>setup()</code> 当前活动实例期间调用。</p>
<pre><code class="js">import { provide, inject } from 'vue'
const ThemeSymbol = Symbol()
const Ancestor = {
setup() {
provide(ThemeSymbol, 'dark')
}
}
const Descendent = {
setup() {
const theme = inject(ThemeSymbol, 'light' /* optional default value */)
return {
theme
}
}
}</code></pre>
<p><code>inject</code> 接受可选的默认值作为第二个参数。</p>
<p>如果未提供默认值,并且在 <code>Provide</code> 上下文中找不到该属性,则 <code>inject</code> 返回 <code>undefined</code>。</p>
<h2>Lifecycle Hooks</h2>
<p>Vue2 与 Vue3 的生命周期勾子对比:</p>
<p>| <strong>Vue2</strong> | <strong>Vue3</strong> |<br>| :------ | :------ | <br>| beforeCreate | setup(替代) | <br>| created | setup(替代) | <br>| beforeMount | onBeforeMount | <br>| mounted | onMounted | <br>| beforeUpdate | onBeforeUpdate | <br>| updated | onUpdated | <br>| beforeDestroy | onBeforeUnmount | <br>| destroyed | onUnmounted | <br>| errorCaptured | onErrorCaptured | <br>| 空 | onRenderTracked |<br>| 空 | onRenderTriggered |</p>
<p>除了 2.x 生命周期等效项之外,<code>Composition API</code> 还提供了以下调试挂钩:</p>
<ul>
<li><code>onRenderTracked</code></li>
<li><code>onRenderTriggered</code></li>
</ul>
<p>这两个钩子都收到一个 <code>DebuggerEvent</code>,类似于观察者的 <code>onTrack</code> 和 <code>onTrigger</code> 选项:</p>
<pre><code class="js">export default {
onRenderTriggered(e) {
debugger
// inspect which dependency is causing the component to re-render
}
}</code></pre>
<hr>
<p>例子:</p>
<pre><code class="html"><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style>
body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>Lifecycle Hooks</h3>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, onMounted, onUpdated, onUnmounted } = Vue
const App = {
template: `
<div class="container">
<button @click='click'>reverse</button>
<div style="margin-top: 20px">{{ state.message }}</div>
</div>`
,
setup() {
console.log('setup!')
const state = reactive({
message: 'Hello Vue3!!'
})
click = () => {
state.message = state.message.split('').reverse().join('')
}
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
return {
state,
click
}
}
}
createApp(App).mount('#app')
</script>
</html></code></pre>
<p><img src="/img/remote/1460000022612977" alt="" title=""></p>
<h2>最后</h2>
<p>本文只列出了笔者觉得会用得非常多的 api,Vue3.0 里面还有不少新特性的,比如 <code>customRef</code>、<code>markRaw </code> ,如果读者有兴趣可看 Vue Composition API 文档。</p>
<ul>
<li>Vue Composition API 文档: <a href="https://link.segmentfault.com/?enc=ePCdSHFweZQVon5oUmroEw%3D%3D.QNtfXrfaOmAfm9EdtSylRniEbYj%2BTLDQHlSe3Dy9oinrvEuV43Cn4ib1hiYRJwNAKqPWB%2BCWOfvhf%2BwM%2F7Rfcw%3D%3D" rel="nofollow">https://composition-api.vuejs...</a>
</li>
<li>vue-next 地址: <a href="https://link.segmentfault.com/?enc=nYOWGE8XU9M1QvsGi7sVlg%3D%3D.K6ypmThZuzb%2BBzk3TPAerkd1oywXEK%2F%2B4%2FK2ONutF0AcOhz9rmej0fE3c7vX9DKs" rel="nofollow">https://github.com/vuejs/vue-...</a>
</li>
</ul>
<p><strong>参考文章:</strong></p>
<ul><li><a href="https://link.segmentfault.com/?enc=Y6rsnHe5LzR1wwioYc6FSw%3D%3D.vmxEf6hzNLXahCeSBqlUqsP5ja9wnB8%2Fc9qFOvQ1HtvXSctzN2%2F5xmQ8h%2Bi5My7b" rel="nofollow">Vue3 尝鲜</a></li></ul>
<p><strong>推荐阅读:</strong></p>
<p>1. <a href="https://link.segmentfault.com/?enc=D1IkBH2fp9TS4KOq287%2BgQ%3D%3D.YjY0QnQc%2FGy16OTw4r4wY9uPAcQTNseW8F95yZqAlKR%2BS9Gdgh84XB4jU66Bh8QHk4fZxaUIg7kgwGxE8a%2FV2g%3D%3D" rel="nofollow">重磅:GitHub 上 100K+ Star 的前端面试开源项目汇总(进大厂必备)</a></p>
<ol>
<li><a href="https://link.segmentfault.com/?enc=HGLSM%2Bb2G%2FbBUjghWEGXQA%3D%3D.JWuj8AU6BFzBUCaWZ2KxqqsQD8TOAuPW7cwugowzbq1XRlhaewBDXy8PI5gwMpzc%2FrEoLDrLMChMRxX9LjcbNQ%3D%3D" rel="nofollow">强烈推荐: GitHub 上 170K+ Star 的前端学习的数据结构与算法项目</a></li>
<li><a href="https://link.segmentfault.com/?enc=TLH%2BxUPa38HPioU0ALtDrQ%3D%3D.gqU5%2B6ztcG78ai9pnsVawSNjRRXkKyeAswlYG86jWMUUjlOlORLzzfAbpSafz0zFlN70ic5QssPAktVbkHFGZg%3D%3D" rel="nofollow">一张图理清Vue 3.0的响应式系统,实现精简版的响应式系统</a></li>
<li><a href="https://link.segmentfault.com/?enc=U58AlbeYwr63DrC1JUOm0g%3D%3D.ll%2FpENoX3ZMncWeSIGG%2FQYlJsDJbr9miz7imoQX1IVgdfOdrlXyFvM7nhNys6mcGA35R55O74t9CElbIthVNwg%3D%3D" rel="nofollow">黑学习方式:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></li>
</ol>
<p><img src="/img/remote/1460000022064008" alt="" title=""></p>
<p>支持一下下👇</p>
揭密浏览器指纹:原来我们一直被互联网巨头监视,隐私在网上裸奔、无处可藏
https://segmentfault.com/a/1190000022063995
2020-03-18T22:31:56+08:00
2020-03-18T22:31:56+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
13
<p><img src="/img/remote/1460000022063998" alt="" title=""></p>
<p>今天讲⼀些让您按捺不住和欲求不满的反浏览器追踪技术,揭开你是如果被互联网巨头监控的。</p>
<ul>
<li>场景一:在⽹站上浏览了某个商品,了解了相关的商品信息,但并没有下单购买,甚⾄没有进⾏登录操作,过两天⽤同台电脑访问其他⽹站的时候却发现很多同类商品的⼴告。</li>
<li>场景二:在某博客中你有多个小号(水军),这些小号的存在就是为了刷某个帖子的热度或者进行舆论引导,又或者纯粹进行流量交易,即便你在切换账号的时候清空了cookie、本地缓存,重开路由器甚至使用 vpn 来进行操作,你觉得自己足够小心,并尽可能提高水军的真实性,但是管理人员可能还是知道这是同一个人在操作,从而被打击。</li>
</ul>
<p>一般情况下,网站或者广告商都想要一种技术可以在网络上精确的定位到每一个个体,就算你没有账号,没有登录,也可以通过收集这些个体的数据,然后加以分析之后更加精确的去推送广告和其他的一些活动。</p>
<p>而这个技术就是浏览器指纹,这还是用前端技术来实现的。</p>
<p>笔者博客首更地址:<a href="https://link.segmentfault.com/?enc=tAC7ytvHCzHOtVAwoS851A%3D%3D.uL0jNeSR6A42Miz9QnYbapNcB%2F3SKnMu0qU2byesMJMdR%2FG84nXgZxr6%2FPfLfwzk" rel="nofollow">https://github.com/biaochenxuying/blog</a></p>
<h2>定义</h2>
<p>游览器指纹,就像现实生活中人的指纹一样,特异地标记着每个上网用户。</p>
<p>浏览器指纹:是一种通过浏览器对网站可见的配置和设置信息来跟踪Web浏览器的方法,浏览器指纹就像我们人手上的指纹一样,具有个体辨识度,只不过现阶段浏览器指纹辨别的是浏览器。</p>
<p>人手上的指纹之所以具有唯一性,是因为每个指纹具有独特的纹路、这个纹路由凹凸的皮肤所形成。每个人指纹纹路的差异造就了其独一无二的特征。</p>
<p>那么浏览器指纹也是同理,获取浏览器具有辨识度的信息,进行一些计算得出一个值,那么这个值就是浏览器指纹。</p>
<p>辨识度的信息可以是UA、时区、地理位置或者是你使用的语言等等,你所选取的信息决定了浏览器指纹的准确性。</p>
<h2>指纹技术历史</h2>
<ol><li>第 1 代:服务端在客户端设置标志</li></ol>
<p>第一代指纹追踪是 cookie 这类的服务端在客户端设置标志的追踪技术,evercookie 是 cookie 的加强版。</p>
<ol><li>第 2 代:单浏览器指纹</li></ol>
<p>第二代指纹追踪是设备指纹技术,发现 IP 背后的设备。</p>
<p>通过 js 获取操作系统、分辨率、像素比等等一系列信息,传到后台计算,然后归并设备。</p>
<ol><li>第 2.5 代:跨浏览器指纹识别技术。</li></ol>
<p>跨浏览器之后,第二代技术中很重要的 canvas 指纹、浏览器插件指纹都变了,所以很难把跨浏览器指纹归并到同一设备上。</p>
<p>因为设备指纹相同,很大概率上是同一台设备;但是,设备指纹不同时,不一定不是同一台设备。</p>
<ol><li>第三代:跨设备指纹</li></ol>
<p>第三代指纹追踪技术,则是发现设备后面的人。通过人的习惯、人的行为等等来对人进行归并,此项技术比较复杂。</p>
<ol><li>总 结</li></ol>
<p>第一代、第二代的指纹追踪技术是可以直接通过 js 收集信息的,第三代指纹追踪技术目前可看到的案例是 2017 年 RSA 创新沙盒的冠军 unifyid 技术,unifyid 在移动端安装软件、收集信息,不仅仅是通过 js。</p>
<p>至于利用于 web 上,还任重而道远。</p>
<h2>应用</h2>
<ul>
<li>分析可能导致识别欺诈者和其他需要调查的可疑活动</li>
<li>⼴告营销机器获取您的数据,以便跟踪您的在线活动</li>
<li>银⾏使⽤此⽅法来识别潜在的欺诈案件</li>
</ul>
<p><img src="/img/remote/1460000022064000" alt="" title=""></p>
<h2>是什么让你暴露身份</h2>
<p>当你使⽤浏览器访问某个⽹站的时候,浏览器【必定会暴露】某些信息给这个⽹站。</p>
<p>有些是跟 HTTP 协议相关的。</p>
<p>只要你基于 HTTP 协议访问⽹站,浏览器就【必定】会传输这些信息给⽹站的服务器。</p>
<p>因此,Web ⽹站的服务器必定可以获取到跟你的浏览器相关的某些信息</p>
<pre><code class="js">{
"headers": {
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
"Host": "httpbin.org",
"Sec-Fetch-Mode": "navigate",
"Sec-Fetch-Site": "none",
"Sec-Fetch-User": "?1",
"Upgrade-Insecure-Requests": "1",
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
}
}</code></pre>
<h2>基本的浏览器指纹</h2>
<p><img src="/img/remote/1460000022063999" alt="" title=""></p>
<h3>指纹采集</h3>
<blockquote>信息熵(entropy)是接收的每条消息中包含的信息的平均量,熵越高,则能传输越多的信息,熵越低,则意味着传输的信息越少。</blockquote>
<p>浏览器指纹是由许多浏览器的特征信息综合起来的,其中特征值的信息熵也是不尽相同。</p>
<p>点击 <a href="https://link.segmentfault.com/?enc=omhSCXplu4ooTOqyACiZgA%3D%3D.pWzWsFxxTnBW5mUHMKcxVh2Wv5t1pBYlABtD%2F9kQHYA%3D" rel="nofollow">这里</a> 查看自己的浏览器指纹ID和基本信息。</p>
<p><img src="/img/remote/1460000022064001" alt="" title=""></p>
<p>这个网站也可以查看你浏览器的指纹相关信息:<a href="https://link.segmentfault.com/?enc=xjhVfV5LKdt8FyFrvnLkgA%3D%3D.jglbAhtJp27PY7YFJB3X07YUYBOTVhvfdOBr5Nfq6XI%3D" rel="nofollow">https://amiunique.org/fp</a>。</p>
<p>它可查看到哪些信息呢?如下:</p>
<p><img src="/img/remote/1460000022064002" alt="" title=""></p>
<p><img src="/img/remote/1460000022064004" alt="" title=""></p>
<p><img src="/img/remote/1460000022064005" alt="" title=""></p>
<p><img src="/img/remote/1460000022064003" alt="" title=""></p>
<p><img src="/img/remote/1460000022064007" alt="" title=""></p>
<p><img src="/img/remote/1460000022064006" alt="" title=""></p>
<p>而且浏览器指纹还有一个开源项目了,纯 JS 实现的,只有引用这个项目就可以获取浏览器的各种信息或者系统的配置了。</p>
<p>现代而灵活的浏览器指纹库:<a href="https://link.segmentfault.com/?enc=To%2BwMftu3dQTq7piCVBZMg%3D%3D.9udMzWsx0HSoOhTHSnciRJKShpHlgTBEE4xC11YuUzr%2F7Gqzqe4ZAjYJdYv5sfq%2B" rel="nofollow">https://github.com/Valve/fingerprintjs2</a>。</p>
<p>使用也很简单,如下:</p>
<p><strong>安装(Installation)</strong></p>
<ul>
<li>Bower: bower install fingerprintjs2</li>
<li>NPM: npm install fingerprintjs2</li>
<li>Yarn: yarn add fingerprintjs2</li>
</ul>
<p><strong>使用(Usage)</strong></p>
<pre><code class="js">if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
}, 500)
}</code></pre>
<p>还有一个用纯JavaScript编写的设备信息和数字指纹的开源项目:<a href="https://link.segmentfault.com/?enc=D9d2oMgrjn29EDNJ8QzLHA%3D%3D.LxMbBD5e5qjsUTTFU%2BVbrHux5kV5L9ofdAn0BOpliC3%2FYu%2FK%2F2BmCuaBqj%2FOTkKK" rel="nofollow">https://github.com/jackspirou/clientjs</a>。</p>
<h2>总结</h2>
<p>科技公司通过大数据,会对你进行一个大体的画像,然后按照你的喜好推送信息。</p>
<ul>
<li>比如一些精准的广告,刺激你荷尔蒙的小视频等。</li>
<li>就拿你在玩的抖音来说,你其实可以匿名使用,但是你爱抖胸妹子的喜好,不会因为重装抖音而消失,它已熟知了你的癖好。</li>
<li>这些收集你浏览器信息的动作,默默的在后台发生,用户根本毫无觉察。</li>
<li>你的每一次点击,都无情的出卖了你,这些信息会被综合分析,相关网站和部门,能够对你进行唯一性识别,进而锁定、追踪。</li>
<li>你虽然没有注册账号,平台却为你分配了身份。</li>
<li>这是识别方式,用于识别你这个个体,而收集的内容,可能更让人瞠目结舌,不要觉得垃圾数据多,存不下,行为数据比那些廉价的磁盘,值钱的多。</li>
<li>包括你的每一次点击,停留的时长,阅读、观看的位置,都在全方位的展示你的个体。</li>
<li>设备、IP、位置、操作习惯,都在不同的角度绘制你的指纹,让你在匿名的互联网上,无处可藏。</li>
</ul>
<p>如果你没有足够专业的知识或者非常频繁更换浏览器信息的话,几乎 100% 可以通过浏览器指纹定位到一个用户,当然这也不见得全是坏事。</p>
<ul>
<li>泄露的隐私非常片面,只能说泄露了用户部分浏览网页时的行为。</li>
<li>价值不够,用户行为并未将实际的账户或者具体的人对应起来,产生的价值有限。</li>
<li>有益利用,利用浏览器指纹可以隔离部分黑产用户,防止刷票或者部分恶意行为。</li>
</ul>
<h2>最后</h2>
<p><strong>原来我们一直被互联网巨头监视,隐私在网上裸奔、无处可藏!</strong></p>
<p>笔者博客首更地址:<a href="https://link.segmentfault.com/?enc=XQUrDt4pz%2BvmIsIQOx8IfA%3D%3D.OWWfnB4ue8KpL6yBRmCFGSR8ls7gTCCBQpMKENl4PAlYdxvinJcGcFuTzmbnTgW7" rel="nofollow">https://github.com/biaochenxuying/blog</a></p>
<p>参考文章:<a href="https://link.segmentfault.com/?enc=iJP%2FhSSn4TJNrbEHwhKONw%3D%3D.np2%2B24mwQueiPzOBWv9Zn3BPGBO0cSiUOmZ6XCfJhXOEpvWT1dQ7fe73SAVIgKlv" rel="nofollow">浏览器指纹追踪技术简述</a>。</p>
<p>发送 <strong><a href="https://link.segmentfault.com/?enc=N8tsPpMEyHKi7Vo4WIvssw%3D%3D.OzBrUDOj4Yf3pZHrHV5wIRtSXljfuFqrGYMTawBgLuNM%2BhwYRbs4aeK69zl%2Fpbp%2BDTBQl8sGupJhHXHB6xDmiQ%3D%3D" rel="nofollow">电子书</a></strong>,可领取 160+ 本精华技术电子书。</p>
<p><img src="/img/remote/1460000022064008" alt="" title=""></p>
<p><strong>转发、在看</strong> 就是最大的支持 ?</p>
程序员如何优雅的挣零花钱!9 种思路打开你挣钱的世界
https://segmentfault.com/a/1190000021963071
2020-03-09T22:57:03+08:00
2020-03-09T22:57:03+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
58
<p><img src="/img/remote/1460000021963075" alt="" title=""></p>
<p>如何优雅而不失体面!</p>
<p>虽然程序员有女朋友的不多(误),但是开销往往都不小。</p>
<p>VPS、域名、Mac 上那一堆的收费软件、还有 Apple 每年更新的那些设备,经常都是肾不够用的节奏。</p>
<p>幸好作为程序员,我们有更多挣钱的姿势。</p>
<p>有同学该嚷了:不就是做私单嘛。</p>
<p>对,但是也不太对。</p>
<p>做私单的确是一个简单直接方式,但在我看来,私单的投入产出比很差,并不是最优的。</p>
<p>但既然提到了,就先说说吧。</p>
<p>笔者博客首更地址:<a href="https://link.segmentfault.com/?enc=vzFDj%2BCWMWEWV5iVWSfsUg%3D%3D.FeR3oREVIuesm1o9XAqKD9hZjIV6LR0a7MZYoer6PyMKnCs0YgNly%2F%2Fny2iNEOtY" rel="nofollow">https://github.com/biaochenxuying/blog</a>。</p>
<h2>1. 私单</h2>
<h3>1.1 按需雇用</h3>
<p>按需雇用是近几年新兴的私单方式,开发者在业余时间直接到雇主公司驻场办公,按时薪领取报酬。这种方式省去了网络沟通的低效率,也避免了和雇主的讨价还价,适合怕麻烦的程序员。</p>
<p><strong>程序员客栈</strong></p>
<p>不太熟悉,但国内按需雇用的网站不多,写出来供大家参考。</p>
<h3>1.2 远程外包</h3>
<p>最理想的单子还是直接接海外的项目,比如 <a href="https://link.segmentfault.com/?enc=PuJVXJ%2B6uTCyDw9q7FPoww%3D%3D.QwwfRLdJS8k%2F3q0HmeB6YH2PwLUpBT80EIAXO8I2%2B7Q%3D" rel="nofollow">freelancer.com</a> 等网站。</p>
<p>一方面是因为挣的是美刀比较划算,之前看到像给 WordPress 写支付+发送注册码这种大家一个周末就能做完的项目,也可以到 200~300 美刀;另一方面是在国外接单子比较隐蔽。</p>
<p>常用国外网站:</p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=V51KdDaQZxNUJ%2FdnDpAjeg%3D%3D.xkngi8c%2BwWodiSpCQ1V24siQiYcV2D%2BIFEZks1TKR5Y%3D" rel="nofollow">http://freelancer.com</a></li>
<li><a href="https://link.segmentfault.com/?enc=QjPd4jjjkrtMzAmMGaLf6w%3D%3D.20h9%2B1QzUG2ano%2FeiOT0X0J4C9j9j69nNjWdysiyQxQ%3D" rel="nofollow">https://www.upwork.com/</a></li>
</ul>
<p>国内也有一个软件众包平台 <a href="https://link.segmentfault.com/?enc=8kYMJsOTQWDWJQ3raF%2FLmA%3D%3D.haykWJrBtDlwTvcQc1XGcR2KZn%2FPFd9MJB3GK6nkwVE%3D" rel="nofollow">CODING 码市</a> 。</p>
<p>码市基于云计算技术搭建的云端软件开发平台 <a href="https://link.segmentfault.com/?enc=cwO7Sj%2B8dSV04iMxqWW54Q%3D%3D.jIM1juMK5gpxqSOrpdkvkC9uRo0KFEpF4xm2VyBgID0%3D" rel="nofollow">Coding.net</a> 作为沟通和监管工具,快速连接开发者与需求方,旨在通过云端众包的方式提高软件交付的效率。</p>
<p>码市作为第三方监管平台,会对所有项目进行审核以保证项目需求的明确性,并提供付款担保,让开发者只要按时完成项目开发即可获取酬劳。</p>
<p>你可以 <a href="https://link.segmentfault.com/?enc=cIk1pMnYaTcCHC3exQY4cQ%3D%3D.o4FqK4YdSMNZa2ShA67cFAe89utNUBB%2F2JLYoIHZa0KQruK5%2FpgIU727AOHNT74B" rel="nofollow">在这里</a> 看到开发者对码市的评价。</p>
<p>当然,猪八戒这种站我就不多说了,不太适合专业程序员去自贬身价。</p>
<p><strong>实现网</strong></p>
<p><a href="https://link.segmentfault.com/?enc=QG24JoNDZvJxeclJGpZczQ%3D%3D.mUFErThCq2YVkO2gL9ptfsaVu00%2BKfeYLV3OF8R65TE%3D" rel="nofollow">实现网</a> 的价格也很不错,但是我强烈建议大家不要在介绍中透漏实名和真实的公司部门信息,因为这实在太高调了。</p>
<p>有同学说,这是我的周末时间啊,我爱怎么用就怎么用,公司还能告我怎么的?</p>
<p>虽然很多公司的劳动合同里边并不禁止做兼职,但在网上如此高调的干私活,简直就是在挑衅HR:「我工作不饱和」、「公司加班不够多」…</p>
<p>再想象下你一边和产品经理说这个需求做不完,一边自己却有时间做私单的样子。你自己要是老板也不愿提拔这样的人吧。</p>
<h2>2. Side Project</h2>
<p>比起做私单,做一个 Side Project 会更划算。</p>
<p>Side Project 的好处是你只需要对特定领域进行持续投入,就可以在很长时间获得收入。<br>这可以让你的知识都在一棵树上分支生长,从而形成良好的知识结构,而不是变成一瓶外包万金油。</p>
<p>思路有两种:</p>
<p>一种是做小而美的,针对一个细分领域开发一个功能型应用,然后放到市场上去卖;</p>
<p>另一种是做大而全的基础应用(想想 WordPress),方便别人在上边直接添加代码,定制成自己想要的应用。</p>
<p>前一种做起来比较快,但需要自己去做一些销售工作;后一种通常是开源/免费+收费模式,推广起来更简单。</p>
<p>有同学会说,我写的 Side Project 就是卖不掉啊。项目方向的选取的确是比较有技巧的,但简单粗暴的解决方案就是找一个现在卖得非常好、但是产品和技术却不怎样的项目,做一个只要一半价格的竞品。</p>
<p>比如 Mac 下有一个非常有名的写作软件,叫 Ulysses 。我试用了一下非常不错,但就是贵,283 RMB。后来看到了 Mweb ,光是免费的 Lite 版覆盖了 Ulysses 的主功能,完整版也才 98RMB,几乎没有思考就买下来了。</p>
<h2>3. 做咨询</h2>
<h3>3.1 付费社群</h3>
<p>除了 APP 外,我觉得收费群也是可以做的。</p>
<p>比如可以搞一个技术创业群,找一些创业成功的同学、做投资的同学、做法务的同学,面向想创业的同学开放,每人收个几百块的年费。</p>
<p>然后你在创业过程中遇到的问题,都可以有人解答,不会觉得是孤零零的一个人。</p>
<p>如果遇到了问题,群里的人可以解答;如果没遇到问题,那不是更好么。有种卖保险的感觉,哈哈哈。</p>
<p>比较好用的工具是 <a href="https://link.segmentfault.com/?enc=6i2qdvO6HPOj9F1hj0z8bg%3D%3D.pM1YhFsPch%2FrZuNTtbpfJiZti47B%2F1mY4gWfQXKTORY%3D" rel="nofollow">知识星球</a> 也就是之前的小密圈。这个工具比较适合交流和讨论,长文比较痛苦。可以发布到其他地方,然后粘贴回来。</p>
<p>另一个靠谱的工具大概是微博的 V+ 会员。说它靠谱主要是它在微博上,所以等于整合了 「内容分发」→ 「新粉丝获取」 → 「付费用户转化」 的整个流程。</p>
<p>PS:交流型付费社群的一个比较难处理的事情是,很难平衡免费的粉丝和付费的社群之间的关系,所以我最后的选择是付费类的提供整块的内容,比如整理成册的小书、录制的实战视频等;而日常零碎的资料分享还是放到微博这种公开免费的平台。</p>
<h3>3.2 专家平台</h3>
<p>如果你在技术圈子里边小有名气,或者在某一个业务上特别精通,那么通过做咨询来挣钱是一种更轻松的方式。</p>
<p>和人在咖啡厅聊几个小时,几百上千块钱就到手了。</p>
<p>国内这方面的产品,我知道的有下边几个:</p>
<ul>
<li>
<a href="https://link.segmentfault.com/?enc=VtC4dUOb49lCd3q2tolVCQ%3D%3D.5m8LrHsf%2FU%2FWLwGASqXyhztALmYU6VaX89KPWiMQCEs%3D" rel="nofollow">在行</a>: 这个是果壳旗下的,做得比较早,内容是全行业的,所以上边技术向的反而不多。</li>
<li><del><a href="https://link.segmentfault.com/?enc=0m0VgBigOjpAZW97x%2BZMJg%3D%3D.nICd8n3UBlc5%2BzxHlkILNvL4Sa1OeSHaYwBG9jhXbHvTwoEEAna%2FuT0nGxB0hgvC" rel="nofollow">缘创派</a>: 缘创派的轻合伙栏目,主要面向创业者,适合喜欢感受创业氛围的技术专家们。</del></li>
<li><del><a href="https://link.segmentfault.com/?enc=PaeGWZb5Kf7m0EjW1ee0bg%3D%3D.TnMykr1KNLA24pUaohp8DMDZeYbKMhvwj8jo4rUJWgk%3D" rel="nofollow">极牛</a>: 你可以认为这是一个程序员版本的「在行」,我浏览了下,虽然被约次数比在行要低不少,但专业性比较强,期望他们能尽快的推广开来吧。</del></li>
<li><del><a href="https://link.segmentfault.com/?enc=XzaanTMj4ucBUC3bryP02g%3D%3D.QooEUwiOALPxJ6nPgAtr6rcWr5i4R9tnzprcfiJOxZU%3D" rel="nofollow">知加</a>:这个项目是我参与的,面向程序员,类似「分答」的付费语音问答,刚开始内测,上边有一些硅谷科技公司的同学。感兴趣的可以看看。</del></li>
</ul>
<p>做咨询虽然也是实名的,但和私活是完全不同的。</p>
<p>咨询的时间短,不会影响到正常的休息,更不会影响上班;</p>
<p>而且大部分公司是鼓励技术交流的,所以大家的接受度都很高。</p>
<h2>4. 写文章</h2>
<h3>4.1 投稿</h3>
<p>很多同学喜欢写技术博客,其实把文章投给一些网站是有稿费的。</p>
<p>比如 InfoQ,他们家喜欢收 3000~4000 字的深度技术文章;稿费是 200 元 / 篇。</p>
<p>虽然不算太多,但一篇长文的稿费也够买个入门级的 Cherry 键盘了。我喜欢 InfoQ 的地方是他们的版权要求上比较宽松。<br>文章在他们网站发布后,你可以再发布到自己博客的;而且文章可以用于出书,只要标明原发于 InfoQ 即可。</p>
<p>文章还可以发到微博、微信、简书等支持打赏的平台。个人建议是换个咱程序员自己的平台写文章。</p>
<p>更详细的说明见这里:<a href="https://link.segmentfault.com/?enc=xrA4Cfspu9d%2FcPCjLL%2BHgw%3D%3D.U3RmU5riDtoYhvNCH%2FNzm3RkE%2Fs2omeb1IFoIv8vr7DNpnvkFgpuAVH3jQN3rauv" rel="nofollow">https://www.infoq.cn/instruction</a></p>
<h3>4.2 出版</h3>
<p>顺便说一句,比起写文章,其实通过传统发行渠道出书并不怎么挣钱,我之前到手的版税是8%,如果通过网络等渠道销售,数字会更低。</p>
<p>出电子书收益会好一些,我之前写过一篇文章专门介绍:《<a href="https://link.segmentfault.com/?enc=Vde2fgwDQmzHKkd1eAu%2BGg%3D%3D.mp8tnKhwtKoJsM6WaHWbn%2B%2BFIZ71JxOokZL99o%2F6Zec%3D" rel="nofollow">如何通过互联网出版一本小书</a>》</p>
<p>以前一直写图文为主的书,用 Markdown 非常不错;但最近开始写技术教程类的书,发现 Markdown 不太够用了,最主要的问题有</p>
<ul>
<li>① 不支持视频标签,尤其是本地视频方案</li>
<li>② 代码高亮什么的很麻烦</li>
<li>③ 也没有 footer note、文内说明区域的预置。</li>
</ul>
<p>这里要向大家严重推荐 <a href="https://link.segmentfault.com/?enc=WzmfCqkEvStn3cLrfM9LFg%3D%3D.Kpa6smFFGCuHI7Us6SM7LVNbieiMpA0BqoJzagBFd3o9X8I4qcig%2F5PIFg453GjznrWp3c6BWJGLS%2FdybWxFMQ%3D%3D" rel="nofollow">Asciidoc</a>,你可以把它看成一个增强版的 Markdown,预置了非常多的常用格式,而且 GitBook 直接就支持这个格式(只要把.md 搞成 .adoc 就好),Atom 也有实时预览插件。<br>用了一段时间,非常喜欢。</p>
<p><strong>掘金小册</strong></p>
<p><a href="https://link.segmentfault.com/?enc=YWTZmgpg15qBz5pkD2MxVA%3D%3D.K4SV5NfSMkK76jZO%2FcP4dWSYHpwrt%2FDTEKtaxnlu6dU%3D" rel="nofollow">小册</a> 是由掘金推出的付费文集产品。</p>
<p>我是小册的第一批作者,一路用下来还是很不错的。</p>
<p>文章格式直接采用 Markdown , 发布以后可以实时更新,保证内容的新鲜度,非常的方便。</p>
<p>小册的一般定价在 19~29,通用内容销量好的能过千,细分内容基本也能过百。</p>
<p>挣零花钱的话,是个非常不错的选择。</p>
<h3>4.3 付费文集</h3>
<p>最近一年有不少的付费文集产品出现,可以把它看成传统出版的一个网络版。</p>
<p>一般是写作十篇以内的系列文章,定价为传统计算机书的一半到三分之一。</p>
<p>付费文集产品通常是独家授权,所以在选择平台方面一定要慎重,不然一个好作品可能就坑掉了。</p>
<p><strong>达人课</strong></p>
<p><a href="https://link.segmentfault.com/?enc=AIVfzP84pSt9AqN0b0cgSQ%3D%3D.zYXVrlAdRP7x3owd5rsdJ2ck8kCGW%2F0Q1JQ9FjtHqcajAO7lzuJfwV6xqkm8ct3Z" rel="nofollow">达人课</a> 是 GitChat 旗下的付费文集产品,现在应该已经合并到 CSDN 了。</p>
<p>GitChat 的用户群不算大,但付费意愿还可以,大概因为内容就没有免费的🤣。</p>
<p>之前我上课的时候是提交完成以后的文档给编辑,由编辑同学手动上架。</p>
<p>感觉比较麻烦,尤其是修改错别字什么的。</p>
<p><strong>小专栏</strong></p>
<p>这个平台不熟……写到这里仅供参考。</p>
<h2>5. 教学视频</h2>
<p>应聘程序教学网站讲师的经验:应聘程序教学网站讲师,出视频+作业教程,平台按小时支付,这个不知道算不算挣零花钱,我算了一下去年,一年大概出 20 个小时视频,拿到手是不到 6 万的样子,平时就是周末花时间弄下。</p>
<p>在线教育起来以后,录制教学视频也可以赚钱了。</p>
<p>关于录制在线课程的收益,一直不为广大程序员所知。但最近和 <a href="https://link.segmentfault.com/?enc=1zz3%2Fcln3SmBzwcGSx289w%3D%3D.Z67NPsfcWDCznH7gXcDwgSNnJ1idAEQ8WtdgCLpHRX0%3D" rel="nofollow">51CTO 学院</a> 和 <a href="https://link.segmentfault.com/?enc=JKhSJ93t2A%2Bv%2FVmCz0clSg%3D%3D.oUCvKv9mfiIH%2F67fYrjhuNSOibstLQwWqvaB%2BLSIKFs%2Fp%2Fh6ps72DSBcH19t%2F3bUFOn8UOA%2FeB95B%2BNMXHzOMQ%3D%3D" rel="nofollow">网易云课堂</a> 的同学聊天,才发现一个优秀的 40~60 节的微专业课程,一年的收益比得上一线城市高级总监的收入。</p>
<p>难怪最近做培训的人这么多 😂</p>
<h3>5.1 渠道和分成</h3>
<p>大部分的平台合同有保密协议,所以不能对外讲。</p>
<p>但 <a href="https://link.segmentfault.com/?enc=B0AoXOJFWncPDCqOl9r4Jw%3D%3D.%2F7r6ihvysMtWUab4l3NhmbV29o8X73m7JBRiZG5zsJ0%3D" rel="nofollow">网易云课堂</a> 和 <a href="https://link.segmentfault.com/?enc=QI6JCdupvkEIXqCoxqWeeQ%3D%3D.MJ%2BJLVtgfMkdKlhJHK9xXKDCGEiLUKfP1B8rOUKsZGU%3D" rel="nofollow">Udemy</a> 在公开的讲师注册协议中写明了分成,所以这里说一下。</p>
<p><strong>网易云课堂</strong></p>
<p>网易的课分三类:</p>
<ul>
<li>独立上架:等于网易提供平台(视频上传管理、用户管理、支付系统等),由你自己来负责营销。这个分成比例在 9:1 ,平台收取 10% 的技术服务费。我觉得非常划算。</li>
<li>精品课:由网易帮你推广,但需要和他们签订独立的合同,会收取更多的分成。最麻烦的是,通常是独家授权。一旦签署了,就不能在其他平台上架课程了。</li>
<li>微专业:这个是网易自己规划的课程体系,从课程的策划阶段就需要和他们深度沟通。也是网易推广力度最大、收益最大的一类课程。</li>
</ul>
<p>方糖全栈课就放在网易平台上,觉得好的地方如下:</p>
<ul>
<li>支付渠道相对全,还支持花呗,这样对于我这种高价课就非常重要。苹果应用内购买课程渠道费用会被苹果扣掉 30%,好想关掉 🤣</li>
<li>自带推广系统,愿意的话可以用来做课程代理系统。</li>
</ul>
<p><strong>Udemy</strong></p>
<p>相比之下 Udemy 就很贵了,分成是 5:5 ;支付上国内用户只能通过信用卡或者银行卡绑 paypal 支付。但可以把课程推向全球。(但我英文还不能讲课🙃)</p>
<p>腾讯课堂没用过,欢迎熟悉的同学 PR 。</p>
<h3>5.2 小课和大课</h3>
<p>我个人喜欢把视频分成小课和大课两种。</p>
<p>因为视频虽然看起来时间短,但实际上要做好的话,背后要消耗的时间、要投入精力还是非常多的。</p>
<p>大课动不动就是几十上百个课时,绝大部分上班的程序员都没有时间来录制。</p>
<p>所以挣零花钱更适合做小课,这种课一般就几个小时,剪辑成 10 个左右的小课时,价格在几十百来块。</p>
<p>如果是自己专业纯熟的领域,一个长假就可以搞定。</p>
<h3>5.3 表现形式</h3>
<p>在课程的表现形式上,我个人更喜欢 <a href="https://link.segmentfault.com/?enc=AbvMwbVeOEf5EM%2FEEPRJDw%3D%3D.jQL95rDJyqyTOq6Bncz2ClAehb7uRMdXjM1d1DLouvI%3D" rel="nofollow">designcode.io</a> 这种 图文+视频 的模式,一方面是学习者可以快速的翻阅迅速跳过自己已经学会的知识;另一方面,会多出来 微博头条文章、微信公众号、知乎和简书专栏这些长文推广渠道。</p>
<p>当然,内容本身才是最核心的。现在那么多的免费视频,为什么要来买你的收费版?</p>
<p>其实现在绝大部分教学视频,往往都真的只是教学,和现实世界我们遇到的问题截然不同。里边都是一堆简化后的假项目,为了教学而刻意设计的。</p>
<p>这里和大家分享一个我之前想操作的想法。</p>
<p>就是在自己决定开始做一个开源项目后,用录屏软件把整个过程完完整整的录下来。开源的屏幕录制工具 <a href="https://link.segmentfault.com/?enc=8KQ6ucNyV%2BQFEaYvOh3bqA%3D%3D.HtDrELxXeQ8J42fG3AxskFvGO8tTFdR6%2F16KT3O6W6I%3D" rel="nofollow">OBS</a>,1920*1080 的屏幕录成 FLV 格式,一个小时只需要 1G,一个 T 的移动硬盘可以录制上千小时,对一个中型项目来说也足够了。</p>
<p>等项目做完,就开源放到 GitHub,让大家先用起来。等迭代稳定后,再从录制的全量视频中剪辑出一系列的教程,整理出一系列的文章,放到网站上做收费课程。</p>
<p>这样做有几个好处:</p>
<ul>
<li>保证所有遇到的问题都是真实的,不是想象出来的,学习过这个课程的人,可以独立的将整个项目完整的实现。</li>
<li>没有特意的录制过程,所以教程其实是软件开发的副产品,投入产出比更高。</li>
<li>如果你的软件的确写得好,那么用过你软件的人可以成为你的客户或者推荐员。</li>
</ul>
<h3>5.4 后续</h3>
<p>今年我录制 <a href="https://link.segmentfault.com/?enc=BAVnnhJuTa3AbF88xT8AOw%3D%3D.fstOpaemNynVYocWt7jQNl5dtEjFYZPf9%2FMAQ%2BtC6Ro%3D" rel="nofollow">方糖全栈课</a> 的时候就采用了上边这个思路,效果还不错,不过有几个小问题:</p>
<ul>
<li>连续性。录着视频写代码总会有一种潜在焦虑,平时经常写一会儿休息一会儿,录像时就会留下大段的空白,有点浪费空间。当然这个主要是心理上的。</li>
<li>录音。录音的问题更大一些。因为一个长期项目很难一直处于一个安静的环境,另外基础课录制可能需要大量的讲解,几个小时写下来嗓子哑了 🤣 。</li>
<li>最后的解决方式是剪辑的时候重新配音,不过需要注意音画同步问题。</li>
</ul>
<h3>5.5 硬件</h3>
<p>硬件上边,最好买一个用来支撑话筒的支架。不要用手直接握着话筒来录,这样就不会有电流声(或者很小)。</p>
<p>外接声卡我用的是 XOX , 在 Mac 下边效果挺好,但不知道为啥在 Windows 上回声比较大(当然也可能是系统设置的原因)。</p>
<hr>
<p>2019年的做课总结:《如何做一个日入十万的技术课程》</p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=Uxxg5vAk8ZpYar7UB37dlg%3D%3D.BUOpb1KENx2xJyD%2BV3zLG1zNBQ2cLAVt71H00Kzf1v5eRe87gNiQ%2B8JFLDBzMMEmSQOjngMd0o1L0EpqK%2BjvRw%3D%3D" rel="nofollow">上篇:关于做课你不知道的几个事实</a></li>
<li><a href="https://link.segmentfault.com/?enc=YzbcsCgUXeisFVvkIBYGcg%3D%3D.e9MUB8PwStVqj7eaXpIz1FaxU9T08KMWI5OwLJhooeJxeF6BrLlSds2QfmlMTFE7L%2BZFj%2BbbicyTf1N9QWoj3Q%3D%3D" rel="nofollow">中篇:选题、定价和预售</a></li>
<li><a href="https://link.segmentfault.com/?enc=%2FTIgA3s0YvpoEevnbW4GNw%3D%3D.ZosqkW1tcvZdXWqxWrD0CJU%2BkpLXnk3Du2M%2BtJql8lMlmdxIgcccyfD4GWGljpyHTHDgqTxZOK6mEao9enjKWQ%3D%3D" rel="nofollow">下篇:大纲、内容组织和软硬件</a></li>
</ul>
<h3>5.6 软件</h3>
<p>如果是没有太多界面切换的课程,那可以使用 keynote 自带的录音。在其他环境里边的演示的视频可以直接粘贴到 keynote 里面来播放。</p>
<p>但是当你有很多的外部界面的时候,就需要录屏了。mac 上可以直接用 quicktime 来录制。文件,新建里边选 record screen 就好。</p>
<p>我录全栈课的时候,因为会在三个操作系统上录一些界面,所以我选择了 obs。虽然这个工具主打的是直播,但实际上它的录制功能也还是挺不错的。 </p>
<p>剪辑的话,用 mac 的 imovie 基本就够了,主要用到的功能就是分割片段,然后把不要的删掉。音频去下底噪。部分等待时间过长的片段加速下。当然 adobe 家的也行,就是贵。</p>
<h2>6. 内部推荐和猎头推荐</h2>
<p>如果你在 BAT 等一流互联网公司工作,如果你有一帮志同道合的程序员朋友,那么基本上每隔几个月你应该就会遇到有想换工作的同事和朋友,所以千万别错过你挣推荐费的大好时机。</p>
<p>一般来讲,公司内部推荐的钱会少一些,我见过的 3000~6000 的居多。<br>但因为是自己公司,会比较靠谱,所以风险小一些。经常给公司推荐人才,还会提升老大多你的好感度,能优先就优先吧。</p>
<p>比起内部推荐,猎头推荐的推荐费则会多很多。<br>一个 30 万年薪的程序员,成功入职后差不多可以拿到 1万RMB 的推荐费。但猎头渠道的问题在于对简历质量要求非常高,有知名公司背景的才容易成单;回款周期又特别长,一般要入职过了试用期以后才能拿到全部推荐费,得小半年。</p>
<h2>7. 小结</h2>
<blockquote>工作两三年的程序员,如果不是非常非常需要钱,我还是建议先做好本职工作,把业余时间用来学习技术、深入技术,因为前几年是技术提升非常快的时期,提高技术带来的财富往往是翻倍增长的,也是这些小小的零花钱比不了的。</blockquote>
<p><strong>天下熙熙皆为利来,天下攘攘皆为利往</strong>,钱财所到之处,必然人头攒动、摩肩接踵。当大家躬身入局之时,定会发现存在僧多肉少的尴尬局面。</p>
<p>学会挣钱是一件非常重要的事情,它会让你了解商业是如何运作的,帮助你理解公司的产品逻辑、以及为你可能的技术创业打下坚实的基础。</p>
<p>所以我鼓励大家多去挣零花钱,最好各种姿势都试试,会有意想不到的乐趣。</p>
<p>本文大部分内容来自于开源项目:<a href="https://link.segmentfault.com/?enc=7E%2BJzKke%2FcdqGrusAImKDg%3D%3D.FOlYW8aOAohDGm7HfI1pQf9Zl%2Bi9Mc2%2BO%2Be8TJQTS8%2Fc%2BwUe5u736al%2B5tJ8Cg8%2BDAsPd9SCd%2FKyImMaLFVqJA%3D%3D" rel="nofollow">程序员如何优雅的挣零花钱:https://github.com/easychen/howto-make-more-money</a>。</p>
<p>笔者丰富了很多内容,并重新进行了排版优化。</p>
<h2>8. 几点思维与认知</h2>
<p>作为程序员来讲,我一直都认为:</p>
<blockquote><strong>技术重要吗?重要!非常重要!毕竟这毕竟是谋生的技能。但是技术以外的能力,程序员真的都应该学一学。技术一般也只能用 3 - 10 年而已,但是相比于人的一生,真的非常短。技术以外的东西,绝对能够提高一个人的高度,陷在技术里,只会让自己的思维越来越窄。</strong></blockquote>
<h3>8.1 技术只是一个工具</h3>
<p>我们要深刻的认识到技术仅仅只是一个工具。当程序员是学会使用了工具,用这个工具去打工赚钱。其实,我们应该脱离出这个思维陷阱出来,学会让工具为你打工,而不是你用着这个工具去给别人打工。</p>
<p>举个简单例子:别人用 Python 写了一个爬虫,天天爬美女图片,然后搭建了一个美图的网站,上面放上了 Google 的广告联盟,每天爬虫工具都会定时去其他网站去爬美女图片,放到自己的网站上,而自己的网站久而久之就会很多流量进入,然后广告收入就越来越多。</p>
<p>所以,程序员应该学会让工具为你打工,而不是你用工具给别人打工。</p>
<h3>8.2 接私活不挣钱,学会利用边际成本递减</h3>
<p>很多程序员想:我拥有技术,我可以开发软件,我可以利用业余时间接私活挣钱。</p>
<p>现实情况是接私活非常累,看似自己挣钱了,其实与自己投入的时间和精力相比,你根本就没有挣钱。接过私活的同学都应该有这种感受吧?</p>
<p>就是大家应该开发一个软件,比如:小程序商城,你开发出来了,你这套程序员可以重复卖。你开发第一个小程序商城的成本可能是 2 万,你卖给第一个客户 5000 ,你可能感觉自己赔了,但是,你这套代码可以重复卖很多人啊,卖到第四个人的时候,收回成本,卖到第 6 个人,就是赚钱,等卖到 10 个人的时候,你哪里还会有成本呢?</p>
<p>这就是边际成本递减效应。大家应该学会重复利用软件的价值,可以做到软件的边际成本为 0 。</p>
<h3>8.3 用钱买别人的时间是最划算的买卖</h3>
<p>第一层境界——打工者:同一份时间,出售一次。</p>
<p>第二层境界——成长者:同一份时间,出售两次。</p>
<p>第三层境界——IP者:同一份时间,出售多次。</p>
<p>到了第三层境界,你发现你自己的时间价值已经到顶了,同一份时间已经出售多次了,还能怎么提升?</p>
<p>第四层境界——资本家:用钱买别人的时间,创造了价值,然后再卖出去。</p>
<h2>9. 最后</h2>
<p><br>笔者博客首更地址:<a href="https://link.segmentfault.com/?enc=CQAg2zyBdjjIsX3%2BCgaapA%3D%3D.v1VY9UCc5cko35Sy%2B6dENiO2VhNKzkhSpVSCO4nY22K3wAE95pWolMsjahbzps%2Bn" rel="nofollow">https://github.com/biaochenxuying/blog</a>。</p>
<p><strong>何以解忧?唯有暴富!</strong></p>
<p>如果本文对你哪怕有一丁点帮助,可以点个赞,你的肯定是我继续写出好作品的最大动力。</p>
<p>读者们有什么建议,可以点击上面链接进去评论留言,还可以添加图片来留言哦。<br><br>提示:想获取文中外链,点击 <strong>原文阅读</strong> 即可,或者在公众号后台回复 <strong>零花钱</strong> 亦可。</p>
<p><a href="https://link.segmentfault.com/?enc=oEA%2BfXcGJk17o7Ye44bq6A%3D%3D.jPgeylhFXRoIhdNOCNBPzTU5nOmsFRog3YSWUS4OPwCggGoNfAc9a3iAvUpFkRMCJUC9pMROhpUzqmwpxncX2w%3D%3D" rel="nofollow">1. GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a><br><a href="https://link.segmentfault.com/?enc=pSWCgYkjjiNszhvfml33fw%3D%3D.%2F6u2BldrBvOJdKAnZE1IbaiYokItEeThUUA%2FEHF3F3%2BMy5CZmrBLJcvax9Yp2jpmzl8aY2NhkM4A%2Fe8B%2FwFgOw%3D%3D" rel="nofollow">2. 150+ 本技术类精华电子书开源了,包括前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍</a></p>
<p>另外,关注公众号:<strong>全栈修炼</strong>,发送 <strong><a href="https://link.segmentfault.com/?enc=W5o4os57ig7Jt4aWQQb7cA%3D%3D.wX040BSh4IpD7Hap9bbbr4Z0tBX1npfTO8eiVAhzNimXLYKQvMoGEbqtmtaDqO4T" rel="nofollow">1024</a></strong> 可领取免费视频资料。</p>
<p>发送 <strong><a href="https://link.segmentfault.com/?enc=DfzvsaACYpi1nMIOIhQlPw%3D%3D.Al4eKdT6J6RMyHPf%2FTFEhI%2FlldDGRdIo9rkC%2Bik2NEGd%2B76HWhOp0YQfvyvIvBFLCw3NjMLxwkFOnjPkQWJvlg%3D%3D" rel="nofollow">电子书</a></strong>,可领取 160+ 本精华技术电子书。</p>
<p><img src="/img/remote/1460000021963074" alt="" title=""></p>
<p><strong>转发、在看</strong> 就是最大的支持 👇</p>
150+ 本技术类精华电子书开源了,免费下载,包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍
https://segmentfault.com/a/1190000021678598
2020-02-03T18:03:32+08:00
2020-02-03T18:03:32+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
19
<p><img src="/img/remote/1460000021678603" alt="" title=""></p>
<blockquote>
<strong>读一本好书,就是在和高尚的人谈话</strong>。 ——歌德<p><strong>喜欢读书的人在死之前,活过 1000 次,不读书的人只活过一次</strong>。 -- 乔治 R.R. 马丁</p>
</blockquote>
<p>项目地址:<a href="https://link.segmentfault.com/?enc=96AXtpJRgJCUXUSsJoc3ww%3D%3D.0NjKhz6STB4MjLHd6fOZuEMnBK8gFR0P%2FQykPBhdJvFTDWIupd0MHwKjVf9f43TX" rel="nofollow">https://github.com/biaochenxuying/awesome-books</a></p>
<h2>简介</h2>
<p>技术类精华电子书整理,并且附带下载链接,包括 前端、后端、数据结构与算法、计算机基础、设计模式等书籍。</p>
<p>计算机类的书籍那么贵,作为一个几个小时看完一本书且机不离身的程序员,天天买纸质书是不可能的了,所以对电子书的需求量还是挺多的。</p>
<p>为了方便广大的小伙伴也能方便找到对应的电子书,我花费洪荒之力收集了 150+ 本精华电子书。</p>
<p>并且为了解决百度云链接容易失效的问题,我把电子书全部下载打包上传到 GitHub 了,都有哪些电子书呢?</p>
<p>请往下看。</p>
<h2>目录</h2>
<h3>网络</h3>
<p><img src="/img/remote/1460000021678602" alt="" title=""></p>
<h3>算法</h3>
<p><img src="/img/remote/1460000021678601" alt="" title=""></p>
<h3>前端</h3>
<p><img src="/img/remote/1460000021678604" alt="" title=""></p>
<p><img src="/img/remote/1460000021678607" alt="" title=""></p>
<p><img src="/img/remote/1460000021678605" alt="" title=""></p>
<p><img src="/img/remote/1460000021678609" alt="" title=""></p>
<h3>Java</h3>
<p><img src="/img/remote/1460000021678606" alt="" title=""></p>
<h3>数据库</h3>
<p><img src="/img/remote/1460000021678615" alt="" title=""></p>
<h3>运维</h3>
<p><img src="/img/remote/1460000021678608" alt="" title=""></p>
<h3>操作系统</h3>
<p><img src="/img/remote/1460000021678611" alt="" title=""></p>
<h3>机器学习</h3>
<p><img src="/img/remote/1460000021678610" alt="" title=""></p>
<h3>软件工程</h3>
<p><img src="/img/remote/1460000021678614" alt="" title=""></p>
<h3>编程语言</h3>
<p><img src="/img/remote/1460000021678612" alt="" title=""></p>
<h3>架构设计</h3>
<p><img src="/img/remote/1460000021678617" alt="" title=""></p>
<h3>编译原理</h3>
<p><img src="/img/remote/1460000021678616" alt="" title=""></p>
<h3>软件测试</h3>
<p><img src="/img/remote/1460000021678613" alt="" title=""></p>
<h3>C++</h3>
<p><img src="/img/remote/1460000021678618" alt="" title=""></p>
<h3>其他好书</h3>
<p><img src="/img/remote/1460000021678619" alt="" title=""></p>
<h2>下载</h2>
<pre><code>git clone https://github.com/biaochenxuying/awesome-books.git</code></pre>
<p><strong>整个项目大小为 </strong>4GB<strong> 左右,多达 150 本精华电子书,下载请谨慎!</strong></p>
<p>我上传时都用了几天的时间,还经常断了,要重新上传,所以下载本项目的内容是很慢的。</p>
<p>建议一本本的下载,或者先保存到百度网盘,再下载。</p>
<p>关注公众号:<strong>全栈修炼</strong>,回复 <strong>电子书</strong> 即可获得全部的电子书的下载链接。</p>
<p>网盘的电子书也是来自别人的整理,我这里提供下载的链接。</p>
<p><strong>不知道这个项目能存在到什么时候,所以要下载的要赶紧!</strong></p>
<p><strong>共克时艰!</strong></p>
<h2>免责声明</h2>
<p>书籍全部来源于网络其他人的整理,仅用于个人学习,请勿用于商业获利,造成后果自负!!!</p>
<p>如有侵权,马上联系我,我立马删除对应对应电子书及百度网盘的链接。</p>
<p>参考项目:<a href="https://link.segmentfault.com/?enc=5hIojh7ridha9MdXJYXHYw%3D%3D.LFMfmBKNQHU6WySnCcagh%2BoFDbTKacuV2Bkhu2X9rL1yoiOuPcf1wZSYjHh13Q88" rel="nofollow">https://github.com/guanpengchn/awesome-books</a></p>
<h2>联系我</h2>
<p>微信:<strong>CB834301747</strong>,加我时的验证申请,请输入暗号哦,暗号是:<strong>夜尽天明</strong>,(非诚勿扰)。</p>
<p><strong>推荐阅读</strong></p>
<p><a href="https://link.segmentfault.com/?enc=6dNeuacxiQHGNoeMiUNE2A%3D%3D.7kNGmQTqwNskrgUHHwtADj2XBTdLsEf7z7nQ5ZoPa%2FXBXUrHOeOfcIC%2BZZuMF7VL15DBP22BAYOasfZUaIxssg%3D%3D" rel="nofollow">1. 学习资源分享 - Vue、React、Node、MongoDB、 全栈打造商城系统、实战项目汇总</a></p>
<p><a href="https://link.segmentfault.com/?enc=V3zZ8Cwxw7EvLJqjlGttCQ%3D%3D.MI2avy0Yj5Dna2mkutvoKhTE6NYgYbjF4UHeoMQmmxZ2ZxgiSXdXkRy7RYMXQh9vjDhsewddW2iFl2RXGAtx6w%3D%3D" rel="nofollow">2. 重磅:硬核前端面试开源项目汇总(进大厂必备)</a></p>
<p>花了几天的时间整理,收集不易,希望读者点个赞 👇</p>
<p><img src="/img/remote/1460000021292940" alt="" title=""></p>
我的 2019 年 - 当勤精进,但念无常,何以解忧,唯有暴富
https://segmentfault.com/a/1190000021447041
2019-12-30T23:06:32+08:00
2019-12-30T23:06:32+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
32
<p><img src="/img/remote/1460000021447046" alt="" title=""></p>
<p>人就是这样,越长大,越觉得时间溜得快,时光总是在推着我们前进。</p>
<p>又到总结一年成长的时刻,我 2019 的关键词是:<strong>当勤精进,但念无常,何以解忧,唯有暴富。</strong></p>
<p>阅读本文之前,最好先阅读我的:<a href="https://link.segmentfault.com/?enc=m8Y0bFqCxVh8hV1FL9GfFw%3D%3D.4jLtXCrfCHMMnOGMo1KKHtrTHMCiooPsSnQ4jUeUiP2rG2KVWB49fWlIn%2F7JxX7lh0JU0a57NT9I3ynNrjzt8Q%3D%3D" rel="nofollow">前端工程师的 2018 年总结</a>,坐看我被打脸 😅。</p>
<h2>为什么要写年终总结</h2>
<p><strong>可能很多人可能不明白我为什么要写年终总结吧。</strong></p>
<p>我之所以坚持写是有原因的,特别是要写自己已经做成功的事情。</p>
<p>那些在所成就的人,很多都有纪录自己做成功的事情的习惯,有些是每天都纪录,也些是每月或者每年纪录一次。</p>
<p>因为自己每做成一件事,会给自己增加自信心,自己做成的事情越来越多,自信心就越足。</p>
<p>而且当自己遇到困难、或者感觉做不成某些事件的时候,自己就可以从以往的成功事件中找到信心,做成某些困难事情的成功率就越高。</p>
<p>而且人越自信,做成功的事情会越多,形成一个正向循环。</p>
<p>还有就是兴趣,不是自己感兴趣而去做某件事,而是因为你做了,还做成了,而且是比他人做得更好,给了自己信心,从而形成的兴趣。</p>
<p>你可以回想一下自己的兴趣培养起来的过程是不是这样的。</p>
<p>这其实就是一个认知问题,当你没有意识到这个点的时候,是不知道的,更不会知道如何利用。</p>
<p>所以我希望屏幕前的读者们,可以回想一下自己在 2019 年做成功的事情,给自己增加自信心。</p>
<p>最好也开始写作,写年终总结,从写 2019 年年终开始!</p>
<h2>回顾 2019 目标</h2>
<p><strong>1. 把个人博客网站接入到公众号里面 【 </strong>完成<strong> 】</strong></p>
<p>因为公众号接入个人网站后,不少原本的功能受限了,还要备案很多资料,所以就没接入,而是给自己的网站接入了 GitHub 授权登录,很方便。</p>
<p>所以目标 1 算完成了。</p>
<hr>
<p><strong>2. 深入 Vue 技术栈的原理与内在实现 【 </strong>完成 50%<strong> 】</strong></p>
<p>深入 Vue 技术栈过程,是跟着黄轶大佬的开源项目 <a href="https://link.segmentfault.com/?enc=bW%2Bd0Y5rp6h%2FWO7MDLbfBA%3D%3D.nRHwkzv%2B2Gzy%2FzX3RdAfYpQnh%2BZE99EljAInWi0EghPPgYcfHZwfUyWTSUdRs65H" rel="nofollow">Vue.js 技术揭秘</a> 的内容一步步学的,学过之后,我还 <a href="https://link.segmentfault.com/?enc=zsiHXdY1XsmHMVlzydKtoA%3D%3D.b6RhE5u7ySE7jEoZs0epxba8UIa101Ot0Ec3qLwsqc2lDaLxR10LIczecMpmaop1SllgA%2FdBH5%2Bn%2FqmIfWtJyA%3D%3D" rel="nofollow">用一张思维导图总结了 Vue | Vue-Router | Vuex 源码与架构要点</a>,其实不算上很深入,但总算理解了 Vue 的一些内在原理与架构吧。</p>
<p>所以目标 2 算完成了一半吧,2020 年再继续深入。</p>
<hr>
<p><strong>3. 熟练 React 和 Node 技术栈,可能还要学 Java 【 </strong>打脸<strong> 】</strong></p>
<p>因为 React 和 Node 两个技术栈在我的日常工作中用不上,所以做完我的网站之后就没有再深入了。</p>
<p>Java 就更用不上,所以也没学。</p>
<p>所以目标 3 打脸了。</p>
<hr>
<p><strong>4. 学习算法与数据结构 【 </strong>完成<strong> 】</strong></p>
<blockquote>算法为王。<p>想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手。<br>只有内功深厚者,前端之路才会走得更远。</p>
</blockquote>
<p>大概 7 月的时候,学习了算法与数据结构,我是跟着极客时间的课程和 GitHub 上的优秀开源项目学的,其实还没学完,因为 10 月的时候选择了换工作,所以中断了。</p>
<p>不过在学习的过程中,保持着边学边输出的习惯,输出倒逼输入,所以写了 11 篇文章,以加深理解,技术总是要反复学习,往后有时间会再次学习的,特别是数据结构与算法。</p>
<p><img src="/img/remote/1460000021447044" alt="" title=""></p>
<p>所以目标 4 完成了。</p>
<hr>
<p><strong>5. 英语词汇量达到 7000 【 </strong>完成 70%<strong> 】</strong></p>
<p>学习英语是个长期的过程,想一蹴而就就达到比较满意的结果,真的不现实。</p>
<p>2019 年,一直有在学英语,都是跟着水滴阅读的原著文章来阅读与理解的。</p>
<p>截止到今天,总共阅读了 6 本英语原著了,分别是</p>
<p>a.《怦然心动》:一个讲述青春期中男孩女孩之间的有趣战争。</p>
<p>我看到知乎上某人对整个故事的评论非常贴切而且精辟:</p>
<blockquote>印证了一个爱情中的 “时差”:<strong>我注意你的时候,你没注意到我;我爱上你的时候,你注意到我;我准备离开的时候,你爱上了我;好险,你终于喜欢我的时候我还喜欢着你。</strong>
</blockquote>
<p>b.《人性的弱点》:卡耐基的人性系列。</p>
<p>卡耐基-《人性的弱点》,讲到了很多人性有的弱点,进而推出做人要平和、真诚、沟通的成功在于尽量避免争辩,最常见的情况是在争辩中取得了胜利却失去了成功的机会。</p>
<p>c.《人性的优点》:卡耐基的人性系列。</p>
<p>这本书是讲运用心理学的知识,教我们如何战胜忧虑,开创崭新人生。</p>
<p>有空还要把《人性的弱点》和 《人性的优点》的中文版看一遍才行,英语版的有点难,看的不是很懂,哈哈哈~</p>
<p>d.《小王子》</p>
<p>书中以一位飞行员作为故事叙述者,讲述了小王子从自己星球出发前往地球的过程中,所经历的各种历险。从中透视出成年人的某些不好品质,比如空虚,盲目,愚妄和死板教条等。</p>
<p>这个故事还有电影版哦,都不错。</p>
<p>e.《绿野仙踪》</p>
<p>讲述了一个小女孩被飓风刮到奥兹国,和狮子、机器人、稻草人追寻勇气、善心和智慧的历险故事。</p>
<p>f.《爱丽丝梦游仙境》</p>
<p>讲述了一个小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞,从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。</p>
<p>所以目标 5 完成了 70%。</p>
<hr>
<p><strong>6. 加大运动量,增重 5 斤 【 </strong>完成 60%<strong> 】</strong></p>
<p>今年也一直保持着锻炼,但是没有加大运动量,因为时间真的少,特别今年的 6、7、8 月的周末不是高温就是下雨。</p>
<p>只增重了 2 斤左右。</p>
<p>因为锻炼没有增加,所以也不想增重太多,不然增加的都是脂肪,我宁愿不要。</p>
<p>所以目标 6 完成了 60%。</p>
<hr>
<p><strong>7. 坚持写作,运营好公众号 【 </strong>完成 90%<strong> 】</strong></p>
<p>一直有坚持写作,今年大概写了 24 篇文章吧,包括技术与非技术文章,平均一个月 2 篇。</p>
<p>公众号【全栈修炼】也一直有在更新,只不过更新的频率不定,也和写文章的频率一样,平均一个月 2 篇。</p>
<p>所以目标 7 完成了 90%。</p>
<hr>
<p><strong>8. 多看书与文章 【 </strong>完成<strong> 】</strong></p>
<p>今年读完上面写到的 6 本英语原著之外,还读了 7 本中文书,经常看有质量的文章。</p>
<p>所以目标 8 完成了 100%。</p>
<hr>
<p><strong>9. 逐渐深入其他理财方式 【 </strong>完成<strong> 】</strong></p>
<p>读了 2 本理财的书籍,基金也买多几种,虽然投入的金额不多。</p>
<p>所以目标 9 算完成了。</p>
<hr>
<p><strong>10. 培养其他技能 【 </strong>完成<strong> 】</strong></p>
<p>培养的技能:阅读。包括中文和英文原著阅读。</p>
<hr>
<p>基本上,今年我没有很大的野心,就是让根基更稳固一点,顺便赚点钱。</p>
<p>自己也还在成长,多学习吧,一步一步走吧。</p>
<h2>2019 目标之外</h2>
<p>计划赶不上变化。</p>
<p>所以,除了 2018 年末定的 2019 目标之外,还做成了如下几个事情。</p>
<p><strong>1. 学习了 TypeScript,并与 Vue 结合,做了个开源项目</strong></p>
<p>项目地址:<a href="https://link.segmentfault.com/?enc=KwpRxksozdkfz%2BK9EqAKfQ%3D%3D.mxu5ab%2B3LHYJqMHzWRELkY9C90GOFPNV4c3xRIfuEqp4HE32vnKdhRCkTMnK2iSOklq1A7%2Fb86EG9sHc%2BH7dug%3D%3D" rel="nofollow">Vue + TypeScript + Element-Ui 支持 MarkDown 渲染的博客前台展示</a>,截止到 2020-01-01,总共收获了 <strong>540+</strong> Star。</p>
<p>2018 年年尾的时候,我就意识到 TypeScript 已然成为了大趋势,所以 TypeScript + Vue 也必然会是趋势了,特别是 Vue3.0 将对其有更有好的支持,所以选择学习 TS 。</p>
<p>并与 Vue 结合,加以实践,所以我也算走在了前端技术的前沿吧,想学习 Vue + TypeScript 的前端人员可以看看,为学习即将发布的 Vue3.0 做好准备。</p>
<p>我觉得这是比较好的用 TypeScript + Vue 结合的入门级的开源项目了,因为到目前为止, TS 与 Vue 结合的开源项目是寥寥无几的,而且网上的相关文章也是屈指可数,所以我学习的过程中也踩了很多坑,不过都过来了。</p>
<p>开源不易,喜欢的可以给个 Star 😁。</p>
<p>目前公司的项目用的技术栈就是 TypeScript + Vue,这应该真的是趋势吧,太巧。</p>
<p><em>_</em></p>
<p><strong>2. 玩了一下 VuePress 和 GitBook</strong></p>
<p>工作中的意外之喜吧,因为要做技术选型,所以玩了下 VuePress 和 GitBook,具体可以看我写的:<a href="https://link.segmentfault.com/?enc=kkBvq%2Bi1vWC0nW3N99lYCA%3D%3D.TpFQ0hjdt%2Bd7G17HXK7WOfCIHwy8z%2BzI8TKbb2B8HuMJdF80x2uTzDL%2Fs%2FOFQkOx" rel="nofollow">Leader 让我做 CMS 帮助中心的技术选型,我撸了 VuePress 和 GitBook,然后选择...</a></p>
<hr>
<p><strong>3. 纪念小企鹅</strong></p>
<p>腾讯云的纪念小企鹅,哈哈哈~</p>
<p>感谢腾讯云。</p>
<p><img src="/img/remote/1460000021447049" alt="" title=""></p>
<h2>技术</h2>
<p>技术方面,今年一直做前端技术相关的工作,没怎么接触后端了,因为工作中不需要。</p>
<p>今年一直有精进技术和学习新技术,比如 Vue 、TypeScript。</p>
<p>我学习的方式,一般都是学完了某些知识,写写文章、或者写个效果、或者做个开源项目,让自己的技术得到实践,以加深理解,以及加深印象。</p>
<p>但是 2020 年,要学习 Node 了,因为工作中会用到。</p>
<p>工作了几年了,至今最大的收获:<strong>秀发如初!</strong> 浓密、乌黑发亮,哈哈哈。</p>
<p><img src="/img/remote/1460000021447047" alt="" title=""></p>
<h2>GitHub</h2>
<p>做前端这几年,今年是在 GitHub 上最活跃的一年,利用业余时间,创建和维护了 6 个开源项目,还有剩下的 4 个是 2018 年创建的。</p>
<p>除了会一直更新和维护的 <a href="https://link.segmentfault.com/?enc=PogZ6BWYQfj7fePEgZkPAw%3D%3D.T30TF7JORIpDlGmKaLsfYDpH0e4odUrxYAiw%2FLvOxqTpjA74zPRm8x5o6YOTBokA" rel="nofollow">https://github.com/biaochenxuying/blog</a> 外,其他的项目,有空闲时间也会更新。</p>
<p>想知道我如何玩 GitHub ,可以看看我写的 <a href="https://link.segmentfault.com/?enc=phsd5xNXUbOQ76GQZcXfdA%3D%3D.QOaJAFwrHx5maHP1ptv35KZzhVrOeeSRL0KT%2BiqC%2FlzFOh4hMGwEoA9iQIAAPpyapK4SVtPWdlybR0W2v8PiJg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a> 。</p>
<p>如果你也想开源,可以看看我写的:<a href="https://link.segmentfault.com/?enc=Cz37LPQJrw57ZP6WsuGr2Q%3D%3D.XRoNspnunEoUQ8B8j%2BZclH5LPttDJn%2BOInLo3Xy2M8AMDzyOzROGskGqzPZeJdgGhNKLAlIcIROLoOBwsdBNAg%3D%3D" rel="nofollow">GitHub 吸星大法 - 一年收获 2000+ Star 的心得</a> 。</p>
<p>我的 2019 年 GitHub 年度报告:<a href="https://link.segmentfault.com/?enc=THu2nRb%2BNBPApjNOTVhvjg%3D%3D.ZZDNlc2Wej7ugybXo7xj1baFKQRg8nJd6LVBqiSIlW5fs2kP2ugtoJLt%2F4nltkNfGXeQAjemZK77oaEgzjNInw%3D%3D" rel="nofollow">https://githubreport.mdnice.com/?username=biaochenxuying</a>。</p>
<p>如果你想看自己的 GitHub详解报告:<a href="https://link.segmentfault.com/?enc=AHqccKpo6uUbPyCHAkNTEA%3D%3D.9TtBPMNDfrgz8knW5RNlCn1KBS5n6EJiABv7EW7z1Pm4UrJKTxX1rRpwryeO670hQ%2B6kVt9pZ%2Bp20gIEl2hlkg%3D%3D" rel="nofollow">github-annual-report</a>,可以通过此链接获取报告:<a href="https://link.segmentfault.com/?enc=Sx1quxjwNAUzSVDaPp8q%2BA%3D%3D.0Q3JHhyKcF9Ru0E1C64Z%2BoVtJGDJ2oU1qRioiPUtNj0%2BZ27uJ%2FLt4ncH585%2B2uMz" rel="nofollow">https://githubreport.mdnice.com/</a></p>
<p>今年收获了 2460+ Star,和 920+ Follower ,数据如下:</p>
<p><img src="/img/remote/1460000021447051" alt="GitHub" title="GitHub"></p>
<p><img src="/img/remote/1460000021447045" alt="gitstar-ranking" title="gitstar-ranking"></p>
<p><img src="/img/remote/1460000021447050" alt="profile-summary-for-github" title="profile-summary-for-github"></p>
<p><img src="/img/remote/1460000021447048" alt="github-rank" title="github-rank"></p>
<p>GitHub 全球排名 2644,中国区排名 426 名左右,不知不觉间,原来已经走的那么远了啊。</p>
<p>但我的技术还很弱,还有很长很长的路要走。</p>
<p>对的事情,只要你坚持,就一定会有收获。</p>
<p><img src="/img/remote/1460000021447054" alt="" title=""></p>
<h2>工作</h2>
<p><img src="/img/remote/1460000021447052" alt="" title=""></p>
<p>今年 10 月份的时候,裸辞,换了东家,因为在原来的东家,比较休闲,我能提升的空间真的不大了。</p>
<p>离职的时候,还发生了一件特别尴尬的事情,真的很尴尬,就不说出来了。</p>
<p>入职场也没几年,所以不少职场的错误还是会犯的啊。</p>
<p>这次换工作,因为平时的写作与开源,所以 GitHub 给了我很大的助力。</p>
<p>现在的公司,很不错,发现身边很多优秀的人,很多先行者,能学习到的东西很多,也有很好的团队氛围。</p>
<p>感谢帮我内推的升哥和现在带我适应的文哥,以及 2019 年里给过我帮助的人。</p>
<p>找工作就是这样,有的羡慕工资高,有的羡慕加班少,有的羡慕漂亮妹子多,得看自己的需求啊。</p>
<p>我的当时出发点是想接触 Global 的公司或者项目、提升英语、有全球的视野,有机会多出国走走。</p>
<p>现在我在公司做的项目就是主做 facebook 广告投放的,经常要接触到英语,嗯,非常不错。</p>
<p>虽然离当初想找的公司还有一点点差距,但是现在的公司,我还是比较满意。</p>
<p>当初的自己还是比较心急了,实力还是不太够,还是得一步一个脚印的稳定前行。</p>
<p>现在公司用到的前端技术是 Vue + TypeScript ,也是我想专注的方向。</p>
<p>总的来说,今年加班的情况非常少,很棒,就是我喜欢的状态。</p>
<p>相信一切都是最好的选择。</p>
<p><img src="/img/remote/1460000021447053" alt="" title=""></p>
<hr>
<p>新东家在 43 层,平时可以看到不错的风景,嗯,还有。。。。。雾霾。</p>
<p>比如广州的小蛮腰:</p>
<p><img src="/img/remote/1460000021447055" alt="广州小蛮腰" title="广州小蛮腰"></p>
<p>和公司周边:</p>
<p><img src="/img/remote/1460000021447056" alt="" title=""></p>
<p><img src="/img/remote/1460000021447057" alt="" title=""></p>
<p>当你越来越优秀,看到的风景也会越来越不一样,你的格局也会不一样。</p>
<p><img src="/img/remote/1460000021447063" alt="" title=""></p>
<h2>阅读</h2>
<blockquote>
<strong>喜欢读书的人在死之前,活过 1000 次,不读书的人只活过一次。</strong><br>-- 乔治 R.R. 马丁,《冰与火之歌》的作者</blockquote>
<p>今年看几本书和大量的文章,我发现我喜欢上了阅读,喜欢沉迷书海,与有灵魂的作者的作者进行心灵的碰撞,思想的交流。</p>
<p>我平时的零碎时间一般都用来看文章和书籍,但我看的书都不是纸质的书。</p>
<p>因为在十几年的读书生涯,看的纸质书多了,已经厌了,而且携带也不方便,所以我都是在电脑和手机上看文章。</p>
<p>2019年读完的书籍:</p>
<p><img src="/img/remote/1460000021447064" alt="2019年读完的书籍" title="2019年读完的书籍"></p>
<p>还有几本今年没读完的,但还在读的,比如《墨菲定律》《财务自由之路》《半小时中国史》《指数基金从入门到精通》《曾国藩》等等。</p>
<p>我看的书还是比较有功利心的,比如 理财、基金、买房相关的书,读的书对自己有用,才会容易坚持下去。</p>
<p>如果你叫我看些文艺相关的书籍,我看不下去,因为觉得完全没用,或者说对现在我的没用。</p>
<p>如果你是想读书的人,但是还没怎么开始这个习惯,我建议看些能解决你现在刚需的书,对现在的你有用的书,比如:理财类、提升认知的书籍。</p>
<p>有时,功利一点是好事,能让自己有坚持的动力,做完自己想完成的事。</p>
<p>我的微信读书的书架上还有 60 多本优质书籍准备要读的,和时间做朋友,我知道总有一天我会读完它们的,和那些作者进行一次心灵的交流。</p>
<p>其实我看得最多的还是公众号的优质文章和知识星球的帖子,每天都会看。</p>
<p>可能很多人还不知道 <strong>知识星球</strong> 这个产品吧,是一些大 V 分享精华内容的地方,很多圈子是要付费加入的。</p>
<p>我是加入了几个付费星球的,比如:张哥的、曹大的、feng 大的。</p>
<p>别人分享的东西也不一定是好的,只吸收对自己认为有用或者真的有用的认知就好。</p>
<hr>
<p>今年是意识到读书有用,非常有用的一年,早点知道,就会少走很多弯路。</p>
<p>读书对于开放格局非常有帮助,很多前人,历史的经验都在里面。</p>
<p>很多聪明人经常把这两句话挂在嘴边:<strong>选择大于努力。</strong></p>
<p>但在我看来,<strong>正确选择的本身就需要十倍的努力!</strong></p>
<p><strong>请不要用战术上的勤奋代替战略上的懒惰!努力提升自己的认知才是王道。</strong></p>
<p><strong>很多人都是这样,坚持不了短期吃苦,但坚持长期吃苦却坚持的很好。</strong></p>
<p><strong>多读书,多开拓思维,提高认知,不要人生过半才发现一手好牌被自己打的稀巴烂。</strong></p>
<p><img src="/img/remote/1460000021447060" alt="" title=""></p>
<h2>写作</h2>
<blockquote><strong>没有财务自由,就没有思想自由。</strong></blockquote>
<p>经济学家许小年说:”<strong>挣钱不丢人,你反而要感谢那些能让你挣到钱的人,要感谢甲方,正是他们帮你解决了财务的问题,你才能够在创作内容时更加挥洒自如</strong>“。</p>
<p>今年年初,有一位同龄人,他是因为我的文章找到的我,聊着聊着,说要面基,因为就住我附近,所以进行了 “大型网友见面现场”,嗯,就我和他两人而已。</p>
<p>他问过我写作的动力是什么,是什么让你坚持写作,当时我毫不犹豫的回答:因为钱!</p>
<p>他不太相信,我说如果硬要加上一个不俗的理由的话,那兴趣算一个吧。</p>
<p>还有不少读者问过我,问我的学习动力是什么,我也是毫不犹豫的回答:<strong>无它,唯钱而已!</strong></p>
<p>是的,我对万恶的金钱毫无抵抗力!拥有万恶的金钱,我就不觉得累。。。</p>
<p>我这嘴上老挂着钱,那是为了掩饰我的才华,太锋芒毕露那是很危险的。</p>
<p>每天没有动力的时候,就多看看自己银行卡里的存款。</p>
<p>经历过没钱的艰苦,才会把钱看得那么重要,才会那么需要渴望钱。</p>
<p>不存在一劳永逸,穷则思变,才会想办法创建更多的社会价值,从而带来更多的财富。</p>
<p><strong>想挣钱不丢人,一个人拥有的财富往往是一个人综合能力的体现</strong>。</p>
<p>当然,家里本来就有矿的那种不一定是。</p>
<p><strong>兜里有 RMB 的人,对待这个世界才会更平和。</strong></p>
<p>而且,<strong>赚钱本身就是一件有意义的事,从经济学的角度,每个人赚钱的多少其实从某种意义上就能衡量他对这个世界的贡献。</strong></p>
<p>如果你能赚到更多的钱,本质上对这个社会也创造了更多的价值。</p>
<p>既然对金钱毫无抵抗力,那就想办法多赚点,等我有了更多的钱,谁特么再用钱砸我。。。。那你依然是爷!</p>
<p>我常告诉自己,<strong>这辈子,就做个庸俗的人挺好的,贪财好色,一身正气!</strong></p>
<p>你看,都凌晨了,我不是还在为了恰饭而写文章吗。</p>
<p>真的是:没有财务自由,就没有思想自由。</p>
<p><img src="/img/remote/1460000021447065" alt="" title=""></p>
<p>挣钱虽然是我写作的一部分动力,但写作的意义远不止于此。</p>
<p>比如你看那个最近那个 【某易裁员,让保安把身患绝症的 5 年老员工赶出公司一事】就知道了。</p>
<p><strong>写作可是一个能救命的技能!</strong></p>
<p>2019 在写作平台上的数据如下:</p>
<p>思否</p>
<p><img src="/img/remote/1460000021447062" alt="segmentfault" title="segmentfault"></p>
<p>其实今年因为有做开源项目,所以输出的文章还是比较少的,因为做一个开源项目是很需要时间的,一般都要耗费一个月甚至更久的业余时间,所以真没什么时间写文章。</p>
<p>明年专注于一个平台上写文章吧,不想花费多余的时间在多个平台上了,搬运也很需要时间呀,时间是宝贵的。</p>
<p>一天只有 24 小时,时间对于我来说,真的很有限。</p>
<h2>花钱买时间与认知</h2>
<p>今年总是觉得时间不够用,真的不够用,所以花钱买时间。</p>
<p>今年花钱来买时间,所花费的钱真不少。</p>
<ul>
<li>掘金上,买了几本小册,花了 100 左右</li>
<li>极客时间上买了 7 门课,花了 500 左右</li>
<li>加入 3 付费的知识星球圈子,花了 900 左右</li>
<li>视频超级 VIP ,花了 250 左右</li>
<li>某滴阅读的英文原著课程,花了 300 左右</li>
<li>微信读书,连续包月,花了 230 左右</li>
<li>其他,不记得了</li>
</ul>
<p>总共 2500元 左右。</p>
<p>在如今信息泛滥的时代,你接收到的有效信息越多,提升的认知越多,你拥有的财富就越多。</p>
<blockquote>你永远赚不到,超出你认知范围外的钱,除非你靠运气,但是靠运气赚到的钱,最后往往又会靠实力亏掉,这是一种必然。<br>你所赚的每一分钱,都是你对这个世界认知的变现,你所亏的每一分钱,都是因为对这个世界的认知有缺陷。<br>这个世界最大的公平在于:当一个人的财富大于自己的认知时,这个社会有100种方法收割你,直到你的认知和财富相匹配为止。</blockquote>
<p>你可能看过上面的一段话了,具体的出处,我也不知道了。</p>
<p>当然,上面说到的是钱,其实换成其他东西都是一样的。</p>
<p>无论是学习还是娱乐,拥有优质的资源才是最好的方式,特别是学习。</p>
<p>而找免费资源是一个很耗费时间的事情,好的资源一般都是付费的。</p>
<p>所以在自己的经济条件许可的情况下,花钱来买资源、买时间是很划算的。</p>
<p>如果你觉得买了不学不是浪费了吗,这个得自己权衡,真的需要才买。</p>
<p>对于买视频的 VIP,也是为了省时间。</p>
<p>既然每天那么努力学习,那么自己基本的爱好或者欲望是不是应该满足呢,满足了自己的欲望之后,才有动力继续学习。</p>
<p>比如看电影、电视剧、动漫,最新的动漫都是要付费的,不用付费的都是要上网上找来找去的,质量还不好,可能找的过程所花费的时间都够自己看完整部动漫了。</p>
<p>学习、挣钱、花钱再到学习,形成一个正向循环。</p>
<p>年轻人最值钱的是时间,最缺的也是时间!当然很多人的时间并不值钱。</p>
<p>所以我总是投资我自己,精进自己的专业技能。</p>
<p><strong>在经济允许的范围内,在自己身上投资不要省钱,把自己当做一个产品,你是你这一生最好的产品。</strong></p>
<p>有这个意识,其实哪些钱该花,哪些钱不该花你就清楚了。</p>
<p><img src="/img/remote/1460000021447061" alt="" title=""></p>
<h2>当勤精进,但念无常</h2>
<p>佛教名词:<strong>当勤精进,如救头燃,但念无常,慎勿放逸!</strong></p>
<p>按佛教的理解是:我们应当勤奋修行勇猛精进,就像脑袋着火那样紧迫,时刻想到生命无常,千万不要放纵自我!</p>
<p>但我不是很认同,我觉得 <strong>当勤精进,但念无常</strong> 更好一点。</p>
<p><strong>人应该认真追求正确的东西,努力当下,和时间做朋友,因为生命无常,不应浪费时光;努力过后就不要想太多了,当你回头一看,其实自己已经走了那么远了</strong>。</p>
<p>还记得当年毕业时,准备离校的前两天,特意写下的 8 个字就是 <strong>当勤精进,但念无常</strong>。</p>
<p><img src="/img/remote/1460000021447058" alt="当勤精进,但念无常" title="当勤精进,但念无常"></p>
<p>因为那时就知道一离校就将要为生活奔波劳碌了,没什么时间练毛笔字了。</p>
<p>出来工作后,也真的是没时间,都在为了生活奔波劳碌,已经好久没写过毛笔字了啊。</p>
<p>今年说得最多的一句口头禅是:<strong>生活艰难</strong>,说了不下几百遍吧。</p>
<p>生活真的好艰难,所以要 <strong>当勤精进,但念无常,何以解忧,唯有暴富!</strong>。</p>
<p>我还记得 2019 年的最小的一个生日愿望是:<strong>猪年暴富!</strong></p>
<p>嗯,是的,你没看错,是最小的一个,可能还是实现不了的一个 ... </p>
<p>咸鱼也要有梦想。</p>
<p><img src="/img/remote/1460000021447059" alt="" title=""></p>
<h2>公众号</h2>
<blockquote><strong>做一个有作品的人!</strong></blockquote>
<p>今年把公众号名更名为 <strong>全栈修炼</strong>,笔名取名为 <strong>夜尽天明</strong>。</p>
<p>全栈修炼这个名字,很多人以为说的只是技术吧,但我给它的定位并不止于技术,而是以大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者,只是这几年都是以大前端技术为主而已。</p>
<p>夜尽天明这个名词是秦时明月里面的,天明是我最喜欢的角色,没有之一,所以笔名取名:夜尽天明。</p>
<p>天明这个角色在秦时明月里面,应该说是一个武功很差,而且脑子也不是很聪明的孩子,但他最大的优点就是充满勇气、不怕失败!而且他的目标就是不断变强,经历了大量磨难和战胜了很多困难后才会慢慢变强。</p>
<p>天明的这些特点都和我很像,唯一不同的是:我只想当一条咸鱼,哈哈哈。</p>
<p><img src="/img/remote/1460000021447067" alt="" title=""></p>
<hr>
<p>我不喜欢把关注我的人称为粉丝,而更喜欢称他们为读者、后来者,或者是倾听者。</p>
<p>我只是表达我想表达的内容,想不想看是 TA 们的自由,我也不强推给 TA 们。</p>
<p>我很感谢我的读者,我写作的动力中,很大一部分就是读者给的,他们的 点赞、评论、关注 都会成为我的动力。</p>
<p>其实我更新公众号的内容一直比较佛系,有时一天一更,有时一周一更,甚至有时一月一更,非常佛系,名副其实的佛系公众号。</p>
<p>我还记得在一人 70 多人的前端号主群里,我问过大佬们一个问题:<strong>写公众号那么累,大佬们为什么而写公众号?</strong></p>
<p>有大佬说是为了保护自己的原创、有大佬说是为了有点影响力、有大佬说不知道为了啥 ... 等等。</p>
<p>我说我是为了钱!相信很多大佬也是这样子吧,只是不说出来而已,觉得谈钱很俗而已。</p>
<p>我就是那么现实,是真的为了钱,谈钱不丢人,靠自己的努力挣钱,有什么丢人的。</p>
<blockquote>因为钱,是你做完事情后,衡量价值的计数器。它是一个指标,而不仅仅是目的。</blockquote>
<p>它只是一个顺带的、自然而然发生的结果,英文上叫做 consequence,就是结果,而不是 object,object 就是目标。</p>
<p>你只有把另外一件事情作为目标,比如为别人创造价值,钱才会随之而来。</p>
<p>你为别人付出价值,你会得到相应的回报,这个时候,钱会作为一个结果而出现。</p>
<p>当你把赚钱作为目标的时候,你会发现你可能会误入歧途。</p>
<p>每件事情都要谈钱,你会被钱左右,想出各种花招,一遍遍地圈钱、割韭菜。</p>
<p>你甚至会开始追逐高风险和高利润,一心只想一夜暴富,从而丧失很多机会。</p>
<p>思考如何 “赚钱”,如何 “变现”,如何 “收割”,都可能会让你求之不得。</p>
<p>是啊,今年就经历过这种情况,给自己订了读者过万的目标,总是想着如何增加读者,就做了一些不太想做的事情。</p>
<p>比如:加某些大佬的群,把自己发的文章转发到群里面增加阅读量与读者,虽然能增加一定的量,但是我真的不喜欢这样。</p>
<p>就这样引流了大概几次吧,后面被某位大佬踢出群了,哈哈哈。</p>
<p>那次之后就不想做那些违心的事情了,把加的几个群全都退了,还是随心而行吧。</p>
<p>那有好几个公众号大佬,找我互推,但我都拒绝了,还是先扎扎实实做好优质内容再说吧。</p>
<p><img src="/img/remote/1460000021447068" alt="" title=""></p>
<p>认认真真写写技术、写写经验、写有价值的文章,做一个有作品的人。</p>
<p>所以在 2020 年,我给自己的公众号定的价值观是:<strong>如何给读者提供更多的价值!</strong></p>
<blockquote>
<strong>世界奇怪的很,冲着钱去的,一般都赚不到钱。</strong><br><strong>把基本功练好,把事儿做好,赚钱才会自然而然。</strong>
</blockquote>
<p><strong>慢慢来,比较快!</strong></p>
<hr>
<p>我的公众号其实是在 2018 年 6 月就已经在运营了的,一直有更新,到现在都一年半了,读者数量都还没过万,其实也挺失败的。</p>
<p>看到那些写了几个月的公众号,读者数量就过万了,我说我不羡慕是假的。</p>
<p>可能你会说:你说了那么多,还不是为自己的失败找借口。</p>
<p>嗯嗯嗯,你说的对,但我不听你的,哈哈哈~</p>
<p><img src="/img/remote/1460000021447066" alt="" title=""></p>
<p>不过我写<strong>技术公众号</strong>真的不挣钱、真的挣不了什么钱,对比于主业,可能每月挣的钱都没有工资的千分之一,或者百分之一。</p>
<p>因为我现在还没有把做技术公众号当作自己的副业,而是当作写技术文章的一个动力,更好的辅助我的主业前端生涯的发展而已。</p>
<p>今年从开通流量主以来,靠流量广告挣到的钱都在这里了。</p>
<p><img src="/img/remote/1460000021447074" alt="" title=""></p>
<p>因为我的公众号的文章,没有在文章中间插入广告,虽然靠微信的广告费是挣不了什么钱的。</p>
<p>但是就中间广告与底部广告来说,中间的广告费是比底部的广告费多的。</p>
<p>因为我很注重文章的阅读体验,也很注重文章排版,平时看文章都不想文章中间有广告,所以我就去掉了。</p>
<p>看我文章的读者的阅读体验是比较好的,比如这篇文章的阅读体验是不是很好呢。</p>
<p>2020 年,这些广告费都会用于抽奖送书活动,取于读者,还于读者。</p>
<hr>
<p>我还记得当前有不少大佬说:每天更新、或者每周更新、写公众号真 TM 的累。</p>
<p>还有不少大佬因为发的文章质量差一点,引用过别人文章的小部分内容,被粉丝喷过、怼过、被说是抄袭、心理压力特别大,每天有 99 次想放弃,觉得自己坚持不下去了。</p>
<p>当时我说管它那么多干嘛,<strong>佛系更新</strong> 就好。</p>
<p>工作中不能如意的事情已经够多的了,自己的自由时间、自由表达的窗口 如果都不能随意一点,那生活真的没什么乐趣了啊。</p>
<p>因为我也写公众号,有看到有些公众号主,为了整理文章、写作,每天搞到零晨 2 - 3 点,每天只睡 4 个小时,还说先写十几、二十几年,我非常佩服,真的,但我不认同!</p>
<p>他是很拼,但是是在拼命!是有力过猛的表现!这样的姿态又能拼几年呢 ?</p>
<p>看看这些年,二三十岁就猝死的那些人,用力过猛就是其中的一个重要的因素。</p>
<p>动不动就给自己定个十几、二十年的目标,我觉得也不现实,正所谓:计划跟不上变化。</p>
<p>而我更加注重长远、可持续的发展!以人一生的时间来算,真的不必太着急。</p>
<p>虽然经常因为思如泉涌,一个不留意就写文章写到了零晨 1 点的情况也有,但是我平均每天都保证 7 小时的睡眠。</p>
<hr>
<p>记得 2018 年的时候,技术的公众号还没那么多的,2019 年的时候,已经是到处都是了,几乎掘金首页上分享的文章都是公众号的号主写的。</p>
<p>现在还想靠做技术的公众号获取的收入来致富,或者达到主业的水平,真的很难了。</p>
<p>更何况现在的人已经不是很想在公众号里面看纯技术的文章了,一般都是在技术社区里面看的,而且更想看的是技术外的文章。</p>
<p>更何况现在不是公众号的红利期了,已经是蓝海期了。</p>
<p>毕竟技术人才的基数本来就不大,还都是高学历、高素质的人才。</p>
<p>但是写作的作用大吗 ?</p>
<p>大,非常大,对于职场还是个人生涯来说,写作的作用都非常大,是一个受用终生的技能。</p>
<p>因为写作,认识了很多同样写作的大佬,也有不少猎头找上门来。</p>
<p>但是想靠写技术公众号来致富(看仔细,我是说技术公众号)的机会非常小非常小。</p>
<p>现在经济下行,用户下沉,中老年人的网民基数在增加,应该是写适合中老年人的公众号更简单,更能致富。</p>
<p>以上是我个人的一点见解,不喜欢的,就当我瞎 BB 就好,哈哈哈~</p>
<p>毕竟,<strong>我不是人民币,做不到让人人都喜欢</strong>。</p>
<p><img src="/img/remote/1460000021447071" alt="" title=""></p>
<h2>恣意生长</h2>
<p>我总觉得反正还年轻,我非常不愿意过早的定义自己是个干啥的。</p>
<p>做为一个前端开发技术人员,技术对我来说重要吗 ?重要!非常重要!毕竟这是我谋生的技能!</p>
<p>技术一般也只能用 3 - 10 年而已,但是相比于人的一生,真的非常短。</p>
<p>所以我的这篇文章也是以个人成长的角度来写的,而不仅仅是技术。</p>
<p>我业余时间的 80% 都花在技术的精进上,其余的 20% 花在提升自己的软技能上,花在有时间复利效应的事情上,比如 读书、学习理财、提升认知、健身、运动 等等。</p>
<p>所以花自己业余时间的 20% 的时间来培养一个能长期有用并且有复利效应的技能非常重要。</p>
<blockquote>**把时间拉长,你现在所做的事情,其实没你想像的那么重要!<br>把时间拉长,你现在所做的事情,其实比你想象的更加重要!**</blockquote>
<p>这两年,35 岁危机不绝于耳,我觉得没有拥有一个长期有用的技能是其中一个重要原因!</p>
<p>我做的很多事情,都是以个人的长远成长为目的,所以做了很多有长期有用或者有时间复利的事情。</p>
<p>真的到了 35 岁了,我觉得那时的我有足够的资本,根本不用担心所谓的 35 岁中年危机。</p>
<p>我觉得 35 岁应该是财富积累最容易的时候,因为那时的你,拥有了自己的人脉,应该对你所在的行业或者这个社会的规则有了一定的了解,想挣钱应该是比较容易的事,</p>
<p>我们这代人,没大问题都能活超过 90 岁吧,不高于 40 岁的人都还很年轻,40 岁之前都算是资源积累期吧,现在赚的钱都还是小钱。</p>
<p>一定要告诉自己:<strong>现在才刚开始,别太着急给自己定型,别太着急给自己设限,多发掘自己的兴趣和才能,恣意生长,世界很大,路还很长。</strong></p>
<p><img src="/img/remote/1460000021447070" alt="" title=""></p>
<p>其实说了那么多,我都是在瞎 BB 啦,其实我想的是下图的,哈哈哈~</p>
<p><img src="/img/remote/1460000021447072" alt="这个时代,像他这么努力的人真的不多了" title="这个时代,像他这么努力的人真的不多了"></p>
<h2>斯人若彩虹,遇上方知有</h2>
<p><img src="/img/remote/1460000021447075" alt="女神镇楼" title="女神镇楼"></p>
<p>上图是我女朋友,漂亮吧 😉。</p>
<p>从 2017 年 10 月 到现在,转眼已经两年多了啊,是时候为她正名了。</p>
<p>这两年多,跟着我南征北战,每天我去上班,她就跟在我身后,但是坐公交或者地铁时,她就坐我前面,被我紧紧的抱在怀里。</p>
<p>你现在看到的文字也是她的功劳,写的每一篇文章,都是她在陪着我,还常常陪我到深夜,敲的每一个跳动的文字都要经过她,如果没有她,你们也看不到这篇文章啊。</p>
<p>她听话、高颜值、好用、耐用。</p>
<p>屏幕前的你是不是很羡慕,我不是在开车,哈哈哈~</p>
<hr>
<p>其实我说的她,其实是她,是她、是她、是她、就是她 👇</p>
<p><img src="/img/remote/1460000021447073" alt="MBP + 27 寸 1080 显示器" title="MBP + 27 寸 1080 显示器"></p>
<p>15.4 寸 MBP + + 27 寸 1080 显示器,嗯,真香!</p>
<p>如果你要用一种工具用十几年,那就现在开始用它,把它用熟,那它将在你将来的工作中节省掉很大一部分的时间。</p>
<p>而把这部分节省下来的时间用于学习或者其他用途,产生更大的价值!</p>
<hr>
<p><img src="/img/remote/1460000021447076" alt="" title=""></p>
<blockquote>有人住高楼,有人在深沟,有人光万丈,有人一身锈,<br>世人万千种,浮云莫去求,斯人若彩虹,遇上方知有。 <br>—— 韩寒</blockquote>
<p>今年,当年喜欢的人找到蓝朋友了,我也是时候向前看了,浮云莫去求。</p>
<p>我说的那个人,其实是我自己,哈哈哈~</p>
<p>在没有遇到那个属于你的彩虹之前,修炼自己,不为迎合谁,按自己心之所向扎扎实实去努力,积累来自于心底的自信,待那个人出现之时,能以势均力敌的姿态站在 TA 身旁,毕竟,棋逢对手才好玩儿,才会走得更长远,不是吗 ?</p>
<p><img src="/img/remote/1460000021447069" alt="" title=""></p>
<h2>运动</h2>
<blockquote>身体是一,金钱、地位、荣誉则是零。<br>只有有了前面的一,后面的零才会有用。<br>反之,则都是做了无用功。</blockquote>
<p>2019 年,996 和修改福报的话题不绝于耳,大家对工作与家庭与健康的重视程度都加深了。</p>
<p>我一直都把健康放在第一位,可以看下我写的那篇:<a href="https://link.segmentfault.com/?enc=fw%2BVQyG2q7NA4s85aa1%2F7w%3D%3D.BrCnyRRcDZraXSpWr0FiJqljGvV0eQoDVT8ql1V8DdbiRpLAkwGKtS7yv2sg%2BI5o4AHTLRr2NhnrlpRG08ypnA%3D%3D" rel="nofollow">程序员不止眼前的逻辑和代码,还应有健康的体魄和精气神</a>。</p>
<p>这一年来,还是和往年一样,时不时会进行各种运动。</p>
<ul>
<li>跑步平均 3 次 / 每月,5 公里左右 / 每次;</li>
<li>健身平均 2 次 / 每周;</li>
<li>骑行平均 3 次 / 每周。</li>
</ul>
<p>不间断的运动已经成为了一种习惯,或者可以说是一项兴趣了,非常棒。</p>
<p>正因为一直有不间断的运动,所以这一年来又没有感冒过,身体健康,真的很棒。</p>
<p>今年还记得有个同事说我:每天看起来都很精神,其他人都没我那么神采奕奕。</p>
<p>我想,一个原因是我还年轻,二是我有坚持不间断的运动吧。</p>
<p>2019 年跑步最远的一次:</p>
<p><img src="/img/remote/1460000021447079" alt="2019 年跑步最远的一次" title="2019 年跑步最远的一次"></p>
<p>当时发的朋友圈,哈哈哈~</p>
<p><img src="/img/remote/1460000021447078" alt="追女生要有好体力啊" title="追女生要有好体力啊"></p>
<p>2018 年跑步最快的一次 VS 2019 年跑步最快的一次:</p>
<p><img src="/img/remote/1460000021447080" alt="2018 年跑步最快的一次 VS 2019 年跑步最快的一次" title="2018 年跑步最快的一次 VS 2019 年跑步最快的一次"></p>
<p>5 公里的最快纪录被打破了,快了 33 秒,哈哈哈~</p>
<p>其实我跑得其实并不快,只是按自己的节奏来而已。</p>
<p>我的朋友圈里一堆跑步忒快的人,还有动不动就跑 10 几公里的人,好像都是今年才加了我的微信的。</p>
<p>不知道是不是看了我去年的年终总结(看到我有跑步和锻炼),才加的我,有时看到他们发的朋友圈,我都不好意思发了 😂。</p>
<p>不过我还是坚持自己,只要以保持身体健康为目的,不用太刻意,身体自然健康、好身材也自然会来。</p>
<p><img src="/img/remote/1460000021447077" alt="运动 2019 年度报告" title="运动 2019 年度报告"></p>
<p><img src="/img/remote/1460000021447082" alt="" title=""></p>
<p>2019 结束了,良好的身材也还在,哈哈哈~</p>
<p>那个,因为颜值太高,身材太好了,朋友说不放出来的好,所以完美的健身照就不放出来了,不然酸了屏幕就不好了。</p>
<p><img src="/img/remote/1460000021447081" alt="" title=""></p>
<p><strong>当运动成为一种习惯,终将会是受益一生的事情。</strong></p>
<p><strong>一个身心健康的人,对待这个世界才会更平和。</strong></p>
<hr>
<p>当一个男生开始早睡早起,开始投资自己,戒烟戒酒,每天健身学习,走路开始抬头挺胸,一心向前,你猜他是为了什么 ?</p>
<ul>
<li>泡妞 ?</li>
<li>泡更靓的妞 ?</li>
<li>为了配上更好的她 ?</li>
<li>为了家庭无后顾之忧 ?</li>
<li>为了下一代 ?</li>
<li>为了将来不因为钱而必须作出取舍 ?</li>
<li>为了做更好的自己 ?</li>
<li>为了自己的梦想,作出最大的努力 ?</li>
<li>以上部分 ?</li>
<li>以上全部 ?</li>
</ul>
<p>我的答案很简单,想知道是什么吗 ?</p>
<p>就不告诉你,你猜,嘻嘻 😉。</p>
<h2>做一顿好吃的</h2>
<p>警告:一大波美图来袭!</p>
<p><img src="/img/remote/1460000021447087" alt="" title=""></p>
<p><img src="/img/remote/1460000021447085" alt="" title=""></p>
<p><img src="/img/remote/1460000021447084" alt="" title=""></p>
<p><img src="/img/remote/1460000021447083" alt="" title=""></p>
<p><img src="/img/remote/1460000021447086" alt="" title=""></p>
<p>嗯,全是我做的,哈哈哈~</p>
<p>色香味具全,屏幕前的你们流口水了吗,哈哈哈~</p>
<h2>娱乐</h2>
<blockquote>学得凶,玩得疯。</blockquote>
<p>虽然学习学的凶,但是玩起来也玩得疯。</p>
<p>平时的娱乐兴趣就是看电影、看电视剧、看动漫、旅游还有运动。</p>
<p>总有一段时间是不想学习的,毕竟想玩和懒是人的天性。</p>
<p>比如,五一时,什么事情都不想做,所以一口气看了几天的生化危机,重温了一遍 1 - 7 部,哈哈哈~</p>
<p>又比如,什么都不想做时,就去跑几公里。</p>
<p>今年看了很多优质的 3D 国漫,比如:《斗罗大陆》、和等了足足一年才更新的非常热血的《武庚纪》等等。</p>
<p>关于旅游,今年国庆去了澳门。</p>
<p><img src="/img/remote/1460000021447088" alt="1" title="1"></p>
<p><img src="/img/remote/1460000021447089" alt="2" title="2"></p>
<p><img src="/img/remote/1460000021447092" alt="3" title="3"></p>
<p><img src="/img/remote/1460000021447090" alt="4" title="4"></p>
<p><img src="/img/remote/1460000021447091" alt="5" title="5"></p>
<p>去过澳门的人都知道,那些高大豪华的建筑几乎都是赌场。</p>
<p>所以大家别拦我,临走前让我来一把,赢了会所嫩模,输了,当会所嫩模 🤩。</p>
<p>另外,问读者一个问题:知道上面的第 3 和 第 4 幅图是怎么拍出来的吗 ?😉欢迎在评论区写下你的答案~</p>
<p>第二天回来广州时,还去广州长隆水上乐园浪了一圈,好玩的项目都玩了个遍,还看了那个什么电音节,哈哈哈~</p>
<p><img src="/img/remote/1460000021447094" alt="6" title="6"></p>
<p><img src="/img/remote/1460000021447095" alt="7" title="7"></p>
<p>祖国山河那么秀丽,还是得努力挣钱,去看一看,领略一下各地的风情,装个逼。</p>
<h2>期望 2020</h2>
<p>2020 的目标</p>
<ul>
<li>深入 Vue 技术栈的原理与内在实现</li>
<li>学习 Vue3.0、 TypeScript、Node 技术栈</li>
<li>英语词汇量达到 7000+</li>
<li>保持运动,常锻炼</li>
<li>坚持写作、运营好公众号</li>
<li>多阅读</li>
<li>掌握摄影技术</li>
<li>多做持续、延迟满足和有复利效应的事情</li>
<li>做一个有作品的人!</li>
</ul>
<p>哦,还有两个:</p>
<ul>
<li>暴富!暴富!暴富!在线等那种!</li>
<li>等国家给我发一个女朋友,在线等那种!</li>
</ul>
<p>嗯,最后两个目标才是重点,很重要!非常重要!特别重要!</p>
<p>虽说有些目标说出来了,反而实现不了,所以有些目标不要立的好,心里知道就好。</p>
<p>嗯,是的啊,我的目标是立来打脸的,所以坐看明年打脸 🤩。</p>
<p><img src="/img/remote/1460000021447096" alt="" title=""></p>
<h2>总结</h2>
<p>二十多岁的年纪,虽是一无所有的年纪,但也是人生最美好的年纪,是当前人生中烦恼最少的年纪。</p>
<p>越长大,烦恼肯定越多,特别是成家立室之后,烦恼更多。</p>
<p>也没几年可以洒了啊,当珍惜当下。</p>
<p>总的来说:2019 年虽有遗憾,但过得充实,过得自在。</p>
<p>我们都生活在阴沟里,但仍有人仰望星空。</p>
<p>对未来还很有信心,我相信我可以。</p>
<p><strong>愿世界美好,与你环环相扣。</strong></p>
<p><strong>时光正好,未来还有无限可能!</strong></p>
<p><strong>加油!</strong></p>
<p><img src="/img/remote/1460000021447093" alt="" title=""></p>
<h2>最后</h2>
<p>这篇文章说到了很多有用的认知,请品,你细品!</p>
<p><img src="/img/remote/1460000021447097" alt="" title=""></p>
<p>今年的冬天还是很冷,互联网的寒冬更冷!</p>
<p>朋友圈都能发表情包了,我半月前写的这篇文章应该能博你一笑,并收集一波表情包:<a href="https://link.segmentfault.com/?enc=jRWwwlre9bVSXEqNB0zyvQ%3D%3D.8KX7E6wsWZFc%2B8P%2BWCc7QoFH9h5ys8tDlrLCWOC57LZ4gUBM97g4OlHNLGclOspi4xTIo5paTFHl8XVzGmpcLw%3D%3D" rel="nofollow">我的 2019 年年终总结 - 真香篇</a> 。</p>
<p>甚至戳中你的心窝,不香就加我微信,骂我不香 😂。</p>
<hr>
<p>号外,我的表情包告急了,各位有收藏表情包的大侠、女神,请多发些表情包到我的公众号后台。</p>
<p>是的,我是来骗表情包了,下次你可能会在我的文章中看到你的表情包了,哈哈哈~</p>
<hr>
<p>听说在上一年里,点在看 👀的人都很好看!点赞 👍的人都找到了女(男)朋友 👫 !转朋友圈的人都买车又买楼了!扫码关注的人都暴富了 ❤️ !</p>
<p>洋洋洒洒,居然写了 12000+ 文字,如果这篇文章有一点打动了你,就给个赞吧。</p>
<hr>
<p>本文参与了 <a href="https://segmentfault.com/a/1190000021354599">SegmentFault思否征文「2019 总结」</a>,欢迎正在阅读的你也加入。</p>
前端工程师的 2019 年年终总结 - 真香篇
https://segmentfault.com/a/1190000021292891
2019-12-15T21:28:58+08:00
2019-12-15T21:28:58+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
25
<p><img src="/img/remote/1460000021292895" alt="2019 年终总结" title="2019 年终总结"></p>
<p>2020 已经进入倒计时了,2019 即将过去了啊!</p>
<p>今天有空就写篇 2019 的年终总结吧。</p>
<p>讲个鬼故事:第一批 90 后马上年满 30 岁了。</p>
<p>笔者觉得每个开发者都应该拥有自己的网站和服务器,这可是很酷的事情,学习 Linux、跑跑脚本、建站、搭博客、搭建个项目给面试官看也香,对找工作和面试都加分,还可以熟悉技术栈。</p>
<h2>我的财富</h2>
<p>先来看看别人的财富:</p>
<p><img src="/img/remote/1460000021292894" alt="" title=""></p>
<p>再来看看我的:</p>
<p><img src="/img/remote/1460000021292896" alt="" title=""></p>
<p><img src="/img/remote/1460000021292897" alt="" title=""></p>
<p><img src="/img/remote/1460000017441976" alt="" title=""></p>
<h2>我的体重</h2>
<p><img src="/img/remote/1460000021292915" alt="我的体重.gif" title="我的体重.gif"></p>
<p><img src="/img/remote/1460000021292898" alt="肥常忧伤" title="肥常忧伤"></p>
<h2>我的健身成果</h2>
<p>你为以是这样的 ?</p>
<p><img src="/img/remote/1460000021292900" alt="" title=""></p>
<p>其实是这样的:</p>
<p><img src="/img/remote/1460000021292899" alt="我的健身成果.gif" title="我的健身成果.gif"></p>
<h2>我的发量</h2>
<p><img src="/img/remote/1460000021292916" alt="" title=""></p>
<h2>我的感情经历</h2>
<p>是这样的:</p>
<p><img src="/img/remote/1460000021292901" alt="" title=""></p>
<p>相信自己的眼睛,你没有看错、网络也正常。</p>
<p>或者是这样的:</p>
<p><img src="/img/remote/1460000021292902" alt="别人的状态,我的单身状态.gif" title="别人的状态,我的单身状态.gif"></p>
<p>这样的:</p>
<p><img src="/img/remote/1460000021292903" alt="" title=""></p>
<p>这样的:</p>
<p><img src="/img/remote/1460000021292904" alt="" title=""></p>
<p>这样的:</p>
<p><img src="/img/remote/1460000021292905" alt="" title=""></p>
<p>甚至是这样的:</p>
<p><img src="/img/remote/1460000021292914" alt="" title=""></p>
<h2>我的求知欲</h2>
<p>学习使我进步,我对知识的渴望……</p>
<p><img src="/img/remote/1460000021292912" alt="" title=""></p>
<p><img src="/img/remote/1460000021292913" alt="" title=""></p>
<p><img src="/img/remote/1460000021292906" alt="" title=""></p>
<h2>我的夜生活</h2>
<p><img src="/img/remote/1460000021292907" alt="" title=""></p>
<h2>我对生活的态度</h2>
<p><img src="/img/remote/1460000021292908" alt="" title=""></p>
<p><img src="/img/remote/1460000021292909" alt="" title=""></p>
<h2>我的生活</h2>
<p><img src="/img/remote/1460000021292910" alt="" title=""></p>
<h2>残酷的现实</h2>
<p><img src="/img/remote/1460000021292911" alt="" title=""></p>
<h2>我的养生理念</h2>
<p><img src="/img/remote/1460000021292917" alt="" title=""></p>
<p><img src="/img/remote/1460000021292918" alt="" title=""></p>
<h2>我的精神</h2>
<p><img src="/img/remote/1460000021292919" alt="" title=""></p>
<h2>我的上班状态</h2>
<p><img src="/img/remote/1460000021292920" alt="" title=""></p>
<p><img src="/img/remote/1460000021292921" alt="开机,开始混底薪" title="开机,开始混底薪"></p>
<h2>我的下班状态</h2>
<p><img src="/img/remote/1460000021292922" alt="关机,一天工资到手" title="关机,一天工资到手"></p>
<p><img src="/img/remote/1460000021292923" alt="" title=""></p>
<h2>领导对我工作的指引</h2>
<p><img src="/img/remote/1460000021292930" alt="都听我的" title="都听我的"></p>
<p><img src="/img/remote/1460000021292931" alt="" title=""></p>
<p><img src="/img/remote/1460000021292924" alt="需求又修改了" title="需求又修改了"></p>
<h2>我的工作</h2>
<p><img src="/img/remote/1460000021292925" alt="" title=""></p>
<p><img src="/img/remote/1460000021292926" alt="那么快进大厂" title="那么快进大厂"></p>
<h2>我的投资</h2>
<p><img src="/img/remote/1460000021292927" alt="" title=""></p>
<p><img src="/img/remote/1460000021292928" alt="投资赔了伤心吗" title="投资赔了伤心吗"></p>
<h2>总的来说</h2>
<p>我的 2019 年大概是这样的</p>
<p><img src="/img/remote/1460000021292929" alt="" title=""></p>
<p><img src="/img/remote/1460000017441975" alt="" title=""></p>
<p><img src="/img/remote/1460000021292933" alt="" title=""></p>
<p><img src="/img/remote/1460000021292932" alt="苦笑" title="苦笑"></p>
<p><img src="/img/remote/1460000021292934" alt="mmp" title="mmp"></p>
<p>真是丰富而又充实的一年呢!</p>
<p>好啦,2019 即将过完啦,大概就是这样。</p>
<p>2020,请千万对我好一点啊~~</p>
<h2>2020 期望</h2>
<p><img src="/img/remote/1460000021292935" alt="" title=""></p>
<p><img src="/img/remote/1460000021292937" alt="被安排的明明白白" title="被安排的明明白白"></p>
<p><img src="/img/remote/1460000021292936" alt="" title=""></p>
<p><img src="/img/remote/1460000021292941" alt="吃好喝好,长生不老" title="吃好喝好,长生不老"></p>
<p><img src="/img/remote/1460000021292942" alt="请用钱砸死我" title="请用钱砸死我"></p>
<p><img src="/img/remote/1460000021292938" alt="" title=""></p>
<h2>最后</h2>
<p>笔者博客常更地址:<a href="https://link.segmentfault.com/?enc=9Vzoj%2B0ekr3xZ54f8mAgwg%3D%3D.gqglwl4%2BkNUy9Py%2FyZTiouYspxYIVFKSubTlbLygdZ4VASylcRCNSUOxNim0ZkBn" rel="nofollow">blog</a></p>
<p>今年的冬天还是很冷,希望此文能博你一笑。</p>
<p>此处送上我的 2018 年的年终总结:<a href="https://link.segmentfault.com/?enc=B9xtNHGKhh%2FVbs6sRAlYRA%3D%3D.pUbW3hYfC8AFjH4tWc3oILIqlABXfoc02aNabrP1aq6BQwwElIY4CbXva%2BejiIo3ILWlzTAkAOA7Hu5%2FJ8lLlw%3D%3D" rel="nofollow">前端工程师的 2018 年总结</a>。</p>
<p>预告一下,<strong>我真正的 2019 年的年终总结</strong>,将于 2020-01-01 在我的公众号【全栈修炼】发布,敬请期待 😁。</p>
<p><img src="/img/remote/1460000021292939" alt="" title=""></p>
Leader 让我做 CMS 帮助中心的技术选型,我撸了 VuePress 和 GitBook,然后选择...
https://segmentfault.com/a/1190000021234353
2019-12-09T12:43:51+08:00
2019-12-09T12:43:51+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
23
<p><img src="/img/remote/1460000021234359" alt="" title=""></p>
<h2>前言</h2>
<p>因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 <code>CMS</code> 的帮助中心的技术选型,<code>CMS</code> 的帮助中心的功能:是通过文章来教用户如何使用我们的项目。</p>
<p>所以笔者要做一个静态网站的技术选型,笔者把网上流行的 <code>VuePress</code> 和 <code>GitBook</code> 两种方式都尝试了一下,并做了对比,这里写篇文章总结一下,顺便把自己的博客网站重作一便,哈哈。</p>
<p><img src="/img/remote/1460000021234361" alt="" title=""></p>
<p><strong>优惠消息</strong>:<a href="https://link.segmentfault.com/?enc=RmhSvA1MGcGasPCIq4TDCw%3D%3D.LIAvlzziK5lF6kwh9H2LTQtRi3R1jc5XiAH8g%2F678E4ry3kLFumoDwKzU7iJz%2B8GIs9%2FXasyUSWyl16eY8U1gg%3D%3D" rel="nofollow">双 12,阿里服务器新用户 1 折,老用户 5 折</a>:笔者觉得每个开发者都应该拥有自己的网站和服务器,这可是很酷的事情,学习 Linux、跑跑脚本、建站、搭博客啥的都行,现在阿里云的服务器只需要 <code>89元</code> 一年,一起参与瓜分 60 万现金,优惠只剩下最后几天了,需要的赶快上车了,错过还需要再等一年。</p>
<h2>1. VuePress</h2>
<h3>1.1 简介</h3>
<p><strong>VuePress</strong> 是 <code>Vue</code> 驱动的静态网站生成器。</p>
<p><strong>简洁至上</strong></p>
<p>以 <code>Markdown</code> 为中心的项目结构,以最少的配置帮助你专注于写作。</p>
<p><strong>Vue 驱动</strong></p>
<p>享受 <code>Vue + webpack</code> 的开发体验,可以在 <code>Markdown</code> 中使用 <code>Vue</code> 组件,又可以使用 <code>Vue</code> 来开发自定义主题。</p>
<p><strong>高性能</strong></p>
<p><code>VuePress</code> 会为每个页面预渲染生成静态的 <code>HTML</code>,同时,每个页面被加载的时候,将作为 <code>SPA</code> 运行。</p>
<h3>1.2 效果</h3>
<p>首页:</p>
<p><img src="/img/remote/1460000021234362" alt="" title=""></p>
<p>评论:</p>
<p><img src="/img/remote/1460000021234360" alt="" title=""></p>
<p>效果详情请看:<a href="https://link.segmentfault.com/?enc=SPGI4oUdSVGTbjznr6otMQ%3D%3D.xGR0xOj4MFx3L69UieKlrhzsGfpPUWehOf6LOTqOJJT02c28bSJHBhFsdOrtXOBf" rel="nofollow">https://biaochenxuying.github.io/blog/</a> 。</p>
<h3>1.3 简单使用</h3>
<p>像数 1, 2, 3 一样容易</p>
<pre><code># 安装
yarn global add vuepress # 或者:npm install -g vuepress
# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
# 开始写作
vuepress dev .
# 构建静态文件
vuepress build .</code></pre>
<h3>1.4 目录结构</h3>
<p>VuePress 遵循 “约定优于配置” 的原则,推荐的目录结构如下:</p>
<pre><code>├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json</code></pre>
<p>注意:请留意目录名的大写。</p>
<ul>
<li>
<code>docs/.vuepress</code>: 用于存放全局的配置、组件、静态资源等。</li>
<li>
<code>docs/.vuepress/components</code>: 该目录中的 <code>Vue</code> 组件将会被自动注册为全局组件。</li>
<li>
<code>docs/.vuepress/theme</code>: 用于存放本地主题。</li>
<li>
<code>docs/.vuepress/styles</code>: 用于存放样式相关的文件。</li>
<li>
<code>docs/.vuepress/styles/index.styl</code>: 将会被自动应用的全局样式文件,会生成在最终的 <code>CSS</code> 文件结尾,具有比默认样式更高的优先级。</li>
<li>
<code>docs/.vuepress/styles/palette.styl</code>: 用于重写默认颜色常量,或者设置新的 <code>stylus</code> 颜色常量。</li>
<li>
<code>docs/.vuepress/public</code>: 静态资源目录。</li>
<li>
<code>docs/.vuepress/templates</code>: 存储 <code>HTML</code> 模板文件。</li>
<li>
<code>docs/.vuepress/templates/dev.html</code>: 用于开发环境的 <code>HTML</code> 模板文件。</li>
<li>
<code>docs/.vuepress/templates/ssr.html</code>: 构建时基于 <code>Vue SSR</code> 的 <code>HTML</code> 模板文件。</li>
<li>
<code>docs/.vuepress/config.js</code>: 配置文件的入口文件,也可以是 <code>YML</code> 或 <code>toml</code>。</li>
<li>
<code>docs/.vuepress/enhanceApp.js</code>: 客户端应用的增强。</li>
</ul>
<p><strong>注意</strong>:</p>
<ol>
<li>当你想要去自定义 <code>templates/ssr.html</code> 或 <code>templates/dev.html</code> 时,最好基于 <a href="https://link.segmentfault.com/?enc=BK%2F%2BanmnuYa7jlLgHeQ4kQ%3D%3D.H%2FQWXwB%2Ft49qTpOGzRMFIjdPGwxHmoRcqgFm9QFk0igRhZ91vzhWffsojjA5sSGM4%2B4CuAnjKH3Wz1xUiG93%2Bz9N5x78Fm7EP%2Bk8mohVsWwPShlGFmF62kIoSEyiIOG4GbqreouMuo9JtJUEjAgoDA%3D%3D" rel="nofollow">默认的模板文件</a> 来修改,否则可能会导致构建出错。</li>
<li>还有就是笔者的 <code>templates/ssr.html</code> 和 <code>templates/dev.html</code> 是有添加如下这一行代码的:</li>
</ol>
<pre><code><meta id="referrer" name="referrer" content="never" /></code></pre>
<p>因为笔者的图片都是存在简书上的,所以为了可以访问第三方图床的图片,才添加了这句代码,如果你的图片是存在本地的,去掉这句代码即可,至于具体原因请看笔者写的文章:<a href="https://link.segmentfault.com/?enc=GvDpUj3Bx2h9i1yUmuVxsA%3D%3D.8mkouDfewveZOU6PB9txw2%2FpMT%2BDLkobUsDq%2FJbtR4xuKz%2Bm628s9DksJdFCzT2%2FWIdy%2BXU%2BD7%2F0k%2FUh7M95bQ%3D%3D" rel="nofollow">前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题</a> 。</p>
<ol><li>笔者的目录也是按官方推荐的来的,如下:</li></ol>
<p><img src="/img/remote/1460000021234363" alt="" title=""></p>
<h3>1.5 评论</h3>
<p>评论功能用了 GitTalk。</p>
<h4>1.5.1 申请一个 OAuth App</h4>
<p><strong>具体实践如下:</strong></p>
<ol><li>首先登录你的 GitHub 账号,然后点击进入Settings。</li></ol>
<p><img src="/img/remote/1460000018372847" alt="" title=""></p>
<ol><li>点击 OAuth Apps , Register a new application 或者 New OAuth App 。</li></ol>
<p><img src="/img/remote/1460000018372848" alt="" title=""></p>
<ol><li>输入信息。</li></ol>
<p><img src="/img/remote/1460000018372849" alt="image.png" title="image.png"></p>
<ol><li>应用信息说明:<code>Client ID</code> && <code>Client Secret</code>
</li></ol>
<p><img src="/img/remote/1460000021234365" alt="" title=""></p>
<p>创建成功有 <code>Client ID</code> 和 <code>Client Secret</code> ,保存下来,后面我们会用到。</p>
<ol><li>创建评论组件</li></ol>
<p><code>Vuepress</code> 默认 <code>.vuepress / components</code> 文件夹下的组件会全局注册,因此我们创建一个 <strong>comment</strong> 组件。</p>
<p>gittalk.css 请点击 <a href="https://link.segmentfault.com/?enc=e0JS1WB%2Fj4eUJVfinueDsQ%3D%3D.V7sF5PxRkW7PCHSwZWSf4Beo2rJQ2jVDKh5VCeLxwMgtdyFacoZOmjLMqc016uxQtWVjg7RXi%2FnZdkumGOHzkw%3D%3D" rel="nofollow">这里</a></p>
<pre><code class="js"><template>
<div class="gitalk-container">
<div id="gitalk-container"></div>
</div>
</template>
<script>
export default {
name: 'comment',
data() {
return {};
},
mounted() {
let body = document.querySelector('.gitalk-container');
let script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
body.appendChild(script);
script.onload = () => {
const commentConfig = {
clientID: '你的clientID',
clientSecret: '你的clientSecret',
repo: '你的仓库名称',
owner: '你的用户名',
// 这里接受一个数组,可以添加多个管理员,可以是你自己
admin: ['管理用户名'],
// id 用于当前页面的唯一标识,一般来讲 pathname 足够了,
// 但是如果你的 pathname 超过 50 个字符,GitHub 将不会成功创建 issue,此情况可以考虑给每个页面生成 hash 值的方法.
id: location.pathname,
distractionFreeMode: false,
};
const gitalk = new Gitalk(commentConfig);
gitalk.render('gitalk-container');
};
},
};
</script>
<style>
@import '../css/gittalk.css';
</style></code></pre>
<ol><li>使用评论组件</li></ol>
<p>理论上,我们在每个 <code>markdown</code> 文件里直接加入这个组件即可,但是每次都添加有点麻烦,还是让 <code>node</code> 来帮我们吧</p>
<p>根目录创建 <code>build</code> 文件夹, 创建三个文件 <code>addComponents.js</code>, <code>delComponents.js</code>, <code>findMarkdown.js</code>, 分别代码如下:</p>
<pre><code class="js">// addComponents.js
const fs = require("fs");
const findMarkdown = require("./findMarkdown");
const rootDir = "./docs";
findMarkdown(rootDir, writeComponents);
function writeComponents(dir) {
if (!/README/.test(dir)) {
fs.appendFile(dir, `\n \n <comment/> \n `, err => {
if (err) throw err;
console.log(`add components to ${dir}`);
});
}
}</code></pre>
<pre><code class="js">// delComponents.js
const fs = require("fs");
const findMarkdown = require("./findMarkdown");
const rootDir = "./docs";
findMarkdown(rootDir, delComponents);
function delComponents(dir) {
fs.readFile(dir, "utf-8", (err, content) => {
if (err) throw err;
fs.writeFile(
dir,
content.replace(/\n \n <comment\/> \n /g, ""),
err => {
if (err) throw err;
console.log(`del components from ${dir}`);
}
);
});
}</code></pre>
<pre><code class="js">// findMarkdown.js
const fs = require("fs");
function findMarkdown(dir, callback) {
fs.readdir(dir, function(err, files) {
if (err) throw err;
files.forEach(fileName => {
let innerDir = `${dir}/${fileName}`;
if (fileName.indexOf(".") !== 0) {
fs.stat(innerDir, function(err, stat) {
if (stat.isDirectory()) {
findMarkdown(innerDir, callback);
} else {
// 跳过readme 文件,当然你也可以自行修改
if (/\.md$/.test(fileName) && !/README/.test(fileName))
callback(innerDir);
}
});
}
});
});
}
module.exports = findMarkdown;</code></pre>
<p>修改 <code>package.json</code> 的 <code>scripts</code>, 先为每个 <code>md</code> 文件添加组件,然后打包,最后再一一删除 <code>markdown</code> 中的 <code>comment</code> 组件。</p>
<pre><code>"build": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js",</code></pre>
<p>笔者的项目里面是把添加了二条命令的,比如 <code>npm run dev:md</code> 和 <code>npm run build:md</code> 才是有评论组件的。</p>
<pre><code>"scripts": {
"dev": "vuepress dev docs",
"dev:md": "node ./builds/addComponents.js && vuepress dev docs && node ./builds/delComponents.js",
"docs:dev": "vuepress dev docs",
"build": "vuepress build docs",
"build:md": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js",
"docs:build": "vuepress build docs",
"delay": "bash delay.sh",
"test": "echo \"Error: no test specified\" && exit 1"
},</code></pre>
<p>想要怎样的打包命令,自己修改就行。</p>
<ol><li>
<strong>注意</strong>:如果你的文章的评论要和 <code>github</code> 的 <code>issues</code> 的同步的话,还要在 <code>issues</code> 的 <code>label</code> 里添加相应的 <code>pathname</code> 和 <code>gitalk</code>,其中 <code>pathname</code> 就是评论组件里面的 <code>location.pathname</code> 。</li></ol>
<p>比如我的:</p>
<p><img src="/img/remote/1460000021234364" alt="" title=""></p>
<h3>1.6 部署到 Github pages</h3>
<p>当我们将文档写好后就到了我们最关心的地方了,怎么将打包后的代码推送到远程仓库的 <code>gh-pages</code> 分支上。</p>
<ol><li>创建一个deploy.sh</li></ol>
<pre><code>touch deploy.sh</code></pre>
<ol><li>编写脚本</li></ol>
<pre><code>#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
</code></pre>
<ol><li>设置 <code>package.json</code>
</li></ol>
<pre><code>{
"scripts": {
"deploy": "bash deploy.sh"
},
}</code></pre>
<ol><li>发布</li></ol>
<pre><code>npm run deploy // 即可自动构建部署到 github 上。</code></pre>
<ol><li>访问自己的域名,比如笔者的:<a href="https://link.segmentfault.com/?enc=P958i2wWF%2BTkTYFmMjCLbw%3D%3D.KO31AsnUlNAmO4qTJrCHStqehhbud%2FInyj3s3sanPgDApFLb0%2FrZNywcU7U%2F%2B7vZ" rel="nofollow">https://biaochenxuying.github.io/blog/</a> 。</li></ol>
<p><strong>详情移步 vuepress 官网</strong> <a href="https://link.segmentfault.com/?enc=G46tsmu08yJGW%2FbpzYAZ2w%3D%3D.mFBn%2B86Tg8QjhAhGmMnC7glAuUNIEgKCae4O%2FeWHFhXO3qIiWPJOJ3PWhv1Zx27y" rel="nofollow">vuepress.vuejs.org</a>。</p>
<h2>2. GitBook</h2>
<p>效果:</p>
<p><img src="/img/remote/1460000021234367" alt="" title=""></p>
<p>效果详情请看:<a href="https://link.segmentfault.com/?enc=ewyZM0mOcyOtGxDUeoxeZA%3D%3D.WpH9VzlfFA1%2F%2B0inkNpduVEPTAK2tbgK76zSdD3qPjw%3D" rel="nofollow">http://biaochenxuying.cn:2021</a>。</p>
<h3>2.1 GitBook 常用指令</h3>
<ul>
<li>
<strong>安装 GitBook</strong>:<code>npm i gitbook-cli -g</code>
</li>
<li>
<strong>初始化 GitBook 项目</strong>:<code>gitbook init</code>
</li>
<li>
<strong>安装 GitBook 依赖</strong>:<code>gitbook install</code>
</li>
<li>
<strong>开启 GitBook 服务</strong>:<code>gitbook serve</code>
</li>
<li>
<strong>打包 GitBook 项目</strong>:<code>gitbook build</code>
</li>
<li>
<strong>GitBook 命令行查看</strong>:<code>gitbook -help</code>
</li>
<li>
<strong>GitBook 版本查看</strong>:<code>gitbook -V</code>
</li>
</ul>
<h3>2.2 简单上手</h3>
<p>然后,我们找个空文件夹,初始化一个 GitBook 项目。</p>
<ul>
<li>
<code>gitbook init</code> 初始化 README.md 和 SUMMARY.md 两个文件.</li>
<li>
<code>gitbook build</code> 本地构建但不运行服务,默认输出到 _book/ 目录.</li>
<li>
<code>gitbook serve</code> 本地构建并运行服务,默认访问 <a href="https://link.segmentfault.com/?enc=8zbS300YF14%2FOwdowUbqcw%3D%3D.uCP8A928T4%2FE9FepCT0b%2BOZDL4CSUKxdW2T321eszpI%3D" rel="nofollow">http://localhost</a>:4000 实时预览.</li>
</ul>
<pre><code>- GitBook
- README.md
- SUMMARY.md</code></pre>
<p><img src="/img/remote/1460000021234369" alt="" title=""></p>
<ul>
<li>
<code>README.md</code> 是默认首页文件,相当于网站的首页 <code>index.html</code> ,一般是介绍文字或相关导航链接.</li>
<li>
<code>SUMMARY.md</code> 是默认概括文件,主要是根据该文件内容生成相应的目录结构,同 <code>README.md</code> 一样都是被 <code>gitbook init</code> 初始化默认创建的重要文件.</li>
<li>
<code>_book</code> 是默认的输出目录,存放着原始 <code>markdown</code> 渲染完毕后的 <code>html</code> 文件,可以直接打包到服务器充当静态网站使用。一般是执行 <code>gitbook build</code> 或 <code>gitbook serve</code> 自动生成的.</li>
<li>
<code>book.json</code> 是配置文件,用于个性化调整 <code>gitbook</code> 的相关配置,如定义电子书的标题、封面、作者等信息。虽然是手动创建但一般是必选的.</li>
<li>
<code>GLOSSARY.md</code> 是默认的词汇表,主要说明专业词汇的详细解释,这样阅读到专业词汇时就会有相应提示信息,也是手动创建但是可选的.</li>
<li>
<code>LANGS.md</code> 是默认的语言文件,用于国际化版本翻译和 <code>GLOSSARY.md</code> 一样是手动创建但是可选的.</li>
</ul>
<p><strong>book.json 的意思:</strong></p>
<ol>
<li>
<code>title</code>:网站标题</li>
<li>
<code>author</code>:网站作者</li>
<li>
<code>description</code>:网站功能描述</li>
<li>
<code>language</code>:网站使用语言</li>
<li>
<code>styles</code>:网站额外配置的样式表</li>
<li>
<code>plugins</code>:网站使用的插件</li>
<li>
<code>pluginsConfig</code>:网站使用的插件的额外配</li>
</ol>
<p>笔者的 <code>book.json</code>:</p>
<pre><code class="js">{
"title": "夜尽天明的博客",
"author": "biaochenxuying",
"description": "大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。",
"language": "zh-hans",
"plugins": [
"-highlight",
"copy-code-button",
"search-pro",
"-search",
"-lunr",
"expandable-chapters",
"splitter",
"-sharing",
"github-buttons",
"donate",
"tbfed-pagefooter",
"baidu-tongji",
"anchor-navigation-ex"
],
"pluginsConfig": {
"github-buttons": {
"buttons": [
{
"user": "biaochenxuying",
"repo": "blog",
"type": "star",
"count": true,
"size": "small"
},
{
"user": "biaochenxuying",
"width": "160",
"type": "follow",
"count": true,
"size": "small"
}
]
},
"donate": {
"button": "打赏",
"wechatText": "微信打赏",
"wechat": "https://camo.githubusercontent.com/ee094d402f957e5d656a399b9dc50ff8c010114e/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f31323839303831392d666661623762643234643038633030642e6a7065673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f31323430"
},
"tbfed-pagefooter": {
"copyright":"Copyright &copy biaochenxuying.cn 2019",
"modify_label": "该文件修订时间:",
"modify_format": "YYYY-MM-DD HH:mm:ss"
},
"baidu-tongji": {
"token": "XXXXX"
},
"anchor-navigation-ex": {
"showLevel": false
}
}
}</code></pre>
<h3>2.3 插件</h3>
<p>插件的配置可以说是 GitBook 的核心。</p>
<p>详情可以看 <a href="https://link.segmentfault.com/?enc=XDRarw3vRAB41SsqCJa2mQ%3D%3D.0ak4EeEHwkNlNQzTj2ssFA%2F7Hw6viy5JlSAcy1trN1a0l7SIraeRQ7F%2FCjYPwKgcyuhe3vs7tzVKrdL962v3zw%3D%3D" rel="nofollow">GitBook - 快速打造可留言的博客</a>,这里就不展开讲了。</p>
<h2>3. VuePress VS GitBook</h2>
<p><strong>相同点</strong></p>
<ol>
<li>目前只支持 <code>markdown</code> 格式,图片、视频 等静态资源可以保存在本地,或者保存到允许访问的第三方服务商(如七牛云);</li>
<li>如果是 <code>world</code> 文档或者 <code>html</code> 格式,要转换成 <code>md</code> 格式才行。</li>
<li>找了几个 <code>world</code> 文档转换成 md 格式的工具,都不好用,特别是有原文档有图片的时候。</li>
</ol>
<p><strong>不同点</strong></p>
<ol>
<li>
<code>GitBook</code> 的配置成本很小,可以本地编辑,然后直接部署;<code>GitBook</code> 官方还有个在线编辑器,不过内容要存在 <code>GitBook</code> 的服务器上。</li>
<li>
<code>VuePress</code> 的配置成本稍稍大一点,不过可以使用 <code>Vue</code> 的语法与组件,定制化更自由一点,而且 <code>VuePress</code> 中编写 <code>Vue</code> 和平时一样,学习成本几乎为零,可以本地用 VsCode 编辑,然后直接命令行部署。</li>
</ol>
<p><strong>结论</strong></p>
<ol>
<li>都要用 <code>markdown</code> 语法来写文章,<code>markdown</code> 也就几个常用语法而已,非常简单上手。</li>
<li>
<strong>非技术人员推荐用 <code>GitBook</code>,技术人员推荐用 <code>VuePress</code>,特别是前端技术人员</strong>。</li>
<li>个人更喜欢 <code>VuePress</code> 。</li>
</ol>
<h2>4. 项目源码</h2>
<p>本文中使用 <code>VuePress</code> 和 <code>GitBook</code> 的搭建的完整示例代码都已经上传到 <code>GitHub</code> 上了,可以自行下载来用。</p>
<p>只要把其中的一些配置信息换成自己的就行,比如 <code>仓库</code>、<code>Client ID</code> && <code>Client Secret</code>、作者等。</p>
<p>源码地址: <a href="https://link.segmentfault.com/?enc=DfekwpzORW8mICf11grRAQ%3D%3D.I3k2tqsvSll3MC5SlNKqIFprSh8C7sTn04obfPSQcSVwwsuzn9ggYooPgizatj7%2B" rel="nofollow">https://github.com/biaochenxuying/blog</a> 。</p>
<p>其中 <code>VuePress</code> 和 <code>GitBook</code> 的示例代码都在 <code>blog-gitbook</code> 和 <code>blog-vuepress</code> 里面了。</p>
<p><img src="/img/remote/1460000021234368" alt="" title=""></p>
<p><strong>这次需求的结果</strong></p>
<p>令笔者吐血的是:花了 3 天搞的调研,最后 leader 没有采用 😭,还是用回了 功能很重的 <code>wordpress</code>。</p>
<p>因为非技术人员要用起来的话,学习成本是比较大的 😂,比如要学 <code>markdown 语法</code>、<code>ide 编辑器</code>、基本的打包命令、可能还要学 <code>git</code> ,而非技术人员编辑文档时,一般是用 <code>wps</code> 的 😂。</p>
<p><img src="/img/remote/1460000021234366" alt="" title=""></p>
<p>比较欣慰的是:笔者做完调研后,自己的博客网站也能用上了,哈哈。</p>
<p><img src="/img/remote/1460000021234370" alt="" title=""></p>
<h2>最后</h2>
<p><strong>推荐阅读</strong>:<a href="https://link.segmentfault.com/?enc=YAgvGe0RLid4RLpV6CPnLQ%3D%3D.cIO2OTNJ7Zn5MsPnaZ4fv7P3gVhiZ5AP%2Bvt5g%2B4SlzEXzvVW4zEuSfH1ak7a7C2564TUjrOtztZmJiNBfq8OBQ%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a>,估计很多人都不知道的技巧,甚至很多高级工程师都不知道。</p>
<p>参考文章:<a href="https://link.segmentfault.com/?enc=dO5FIk5gmMUC3H5CU%2F75Gw%3D%3D.oO08l4Mvy5tFOJbNYJhHvr%2FC5QnE32QDvExGrJl4ns2kyyq%2FReGblALfrodGYoz%2F" rel="nofollow">为你的 VuePress 博客添加 GitTalk 评论</a></p>
<p><img src="/img/remote/1460000020954557" alt="" title=""></p>
GitHub 吸星大法 - 一年收获 2000+ Star 的心得
https://segmentfault.com/a/1190000020959635
2019-11-10T17:02:02+08:00
2019-11-10T17:02:02+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
19
<p><img src="/img/remote/1460000020954548" alt="" title=""></p>
<h2>1. 前言</h2>
<p>笔者做前端开发这些年,几乎每天都会刷 GitHub,也时不时在上面分享博客和做一些开源项目,也算是 GitHub 的重度使用者了,其中也掌握了一定的技巧,并在一年内收获了 <strong>2000+</strong> Star。</p>
<p>因为有读者问过我,想知道我在 GitHub 上做开源项目并获得 <strong>2000+</strong> Star 的心得,所以笔者在此分享一下这过程的一些经验与心得,算是给那些关注了我的读者的福利。</p>
<p><img src="/img/remote/1460000020954549" alt="" title=""></p>
<h2>2. 为什么要经营好你的 GitHub ?</h2>
<p>GitHub 可以说是你的技术名片,你在 GitHub 的贡献可以作为简历的加分项。</p>
<p>据我所知,对于技术岗位,猎头在找候选人的诸多方法中,有一条就是通过 GitHub 来找技术比较好的候选人的,如果你的 GitHub 经营得很好,开源项目收获的 Star 比较多,一般都会为你提供一些好的机会。</p>
<p>为什么笔者知道 ?因为 ta 们找过笔者,所以我知道,哈哈哈。</p>
<p>而且如果某个公司的团队负责人看到你的 GitHub,觉得你的技术不错,也会给你抛来招揽的橄榄枝。这种情况,笔者也遇到过,哈哈哈。</p>
<p>笔者也是最近裸辞并换了工作,最近在找工作过程中,笔者知道了:想通过社招获得好工作或者进大厂,一般都要有如下 4 点中的 1 - 2 个亮点才行。</p>
<ul>
<li>高学历,名校毕业</li>
<li>工作年限足,经验丰富(但不是 1 年经验当 5 年用那种)</li>
<li>有开源与影响力,GitHub 的贡献或者经常写优质博客</li>
<li>本身就有大厂的工作经历</li>
</ul>
<p>大多数人都是普通人,平时所做工作几乎都是写业务而已,那么只有你具备 1 - 2 个亮点,HR 或者面试官 在筛选简历时,才会选中你,或者好机会才会自动找上你。</p>
<p>找工作时,我简历中的亮点就是 GitHub 的贡献,在开源与影响力的一栏中,我是这样写的:</p>
<blockquote>
<h4>开源与影响力</h4>
<ul>
<li>GitHub: <a href="https://link.segmentfault.com/?enc=giPZmsnMVWgju1WiPVOSBA%3D%3D.jK4EEjihUj8iq%2Bw1fESJi0VwvHjUSDZ423k6lUz2nVk8bmmtZ5DG3c2yD2rewFpL" rel="nofollow"><strong>https://github.com/biaochenxuying</strong></a> 。</li>
<li>本人有 <strong>写技术博客和做开源项目</strong> 的习惯,<strong>乐于分享</strong>,坚持写博客和做开源项目的时间长达 <strong>一年半</strong>。</li>
<li>利用业余时间开源和维护了 <strong>10</strong> 个个人项目,有 博客文章、Vue 源码的思维导图、Vue 版的博客网站前台、React 管理后台、Express 后台、还有一些 js 轮子。</li>
<li>GitHub 上总共收获 <strong>2000+</strong> Star,<strong>500+</strong> Fork ,<strong>570+</strong> Followers;超过 <strong>100</strong> star 的项目有 <strong>6</strong> 个,超过 <strong>500</strong> star 的项目有 <strong>1</strong> 个。</li>
</ul>
</blockquote>
<p>如果没有这个亮点,估计在这互联网寒冬期间,笔者也很难有好公司的面试机会或者找到工作啊。</p>
<p><img src="/img/remote/1460000020954550" alt="" title=""></p>
<h2>3. 如何经营好你的 GitHub ?</h2>
<blockquote>你能为他人提供什么样的价值。</blockquote>
<p>想收获到很多小星星,那你首先要想的是:<strong>你能为他人提供什么样的价值</strong>。</p>
<p>就笔者来说,笔者在 GitHub 上为他人提供的价值有:</p>
<ul>
<li>写的博客文章,他人可以从中吸取到 经验、知识点,或者思维得到提升;</li>
<li>把相关知识总结成思维导图,分享出来,他人可以直接学习;</li>
<li>把根据自己的兴趣,做了个博客网站,并把源码分享出来,并做了开源,别人可以直接用;</li>
<li>自己工作中造的一些轮子,也分享出来,他人可以直接用。</li>
</ul>
<p>总之,原则就是:<strong>你能提供的价值越大越多,收获到的小星星就会越多</strong>。</p>
<h3>3.1 写博客文章</h3>
<p>至于为什么要写博客,我就不说了,很多大神已经写过了,可以参考一下几个大佬们写的 <a href="https://segmentfault.com/a/1190000009781697#articleHeader2">我为什么要写博客 ?</a></p>
<p>笔者只想说,<strong>只要你开始了写博客之路,那基本就是一条一去不回头的路了</strong>。因为笔者就是这样,而且我看到很多写博客的人也是这样。</p>
<p>还有就是最好用 markdown 语法来写作,也可以参考阮一峰写的 <a href="https://link.segmentfault.com/?enc=g2Xz3e1CGd%2FXoR7RHWCtYg%3D%3D.FsPFA92pE6m%2BIdLaG2uIzJXJUIxbGJD0tZ3qn1wuwJlTU53Z2Sk%2BFezicAJGSszh" rel="nofollow">中文技术文档的写作规范</a>,这样可以更加关注内容本身,而不是样式,多个平台也可以发布。</p>
<p>而且写作这是非常重要的一环,因为后面介绍的方法,多多少少都依赖于写作。</p>
<p>笔者专门在 GitHub 上创建了一个 blog 仓库来写文章的,也是目前笔者收获最多 Star 的开源项目,而且布局和风格什么的,都是比较正规的。如果你也想创建个仓库专门来写文章的,可以参考我这个 <a href="https://link.segmentfault.com/?enc=yB2ACBGj9ARVrh3WlHp24Q%3D%3D.VJ2uETgTF%2B%2FhOF9qtxBWWaVXxO%2BD32D8BOI3FwlI5Dgqy%2BjXTIBBVcp6Rxm4tSO4" rel="nofollow">blog</a> 项目。</p>
<p><img src="/img/remote/1460000020954551" alt="" title=""></p>
<h3>3.2 做开源项目</h3>
<p>可能你觉得自己的代码写的不好,没有什么流弊的功能,不敢开源代码之类的,这想法也没错,但你要知道,<strong>大神都是从小白过来的,每个人都有是小白的时候</strong>。</p>
<p>而且后来者从来都不缺,很多时候,你的分享主要是对那些后来者有用而已;更何况,比你厉害的人可能会指出你分享中的错误或者改进的地方,也是能促进你的进步的。</p>
<p>这个开源项目类型可以是很多种的,有造轮子的、写插件的、高仿某个 app 或者网站的、用某些技术写个通用模版的、总结知识做成思维导图的、提供某个功能的 等等。</p>
<p>虽然类型那么多,最主要的是:<strong>要根据自身的兴趣和平时日常工作来选择要做哪种类型的开源项目</strong>。</p>
<p>笔者因为平时有写博客,所以想做个自己的个人网站,专门来展示自己的文章的,而且当时想学习 react 和 node ,所以做了个网站的项目并开源了,包含 <a href="https://link.segmentfault.com/?enc=j6v%2BuFz4I8wOZhY65iDnuw%3D%3D.ZzoAW8NeB6K7X%2BBHLuyJ7HLKTVKp7FnCf%2FwmiNn1my1tD22yxHQ5zarGpmC3o2eh" rel="nofollow">前台展示</a>、<a href="https://link.segmentfault.com/?enc=%2F05tressaEOrUkVNmwkHIQ%3D%3D.NntNtNJ0wz34x54Vy8J9PWEilkyOb6Gk3yrETXUFgwZ%2FVIIr%2BIF8bQU%2FPqgwLM9FF5yHDSDW6ck8otK3Efyufg%3D%3D" rel="nofollow">管理后台</a>、<a href="https://link.segmentfault.com/?enc=mdHM6EjZZ%2BDs2r%2F4FU6zNQ%3D%3D.%2Bb48xW3JLLyP%2FM4gBYdUGV3QucTJkaZT3mzNHYgHNvjtc1CLW6F%2Fvsv6%2FU906s7b" rel="nofollow">后台</a>。</p>
<p>还有一些开源项目是笔者在工作中造的轮子或者插件(ps:如果是公司的机密项目的轮子、插件之类,又或者公司声明了不能把代码外传的,不要随意开源哦)。</p>
<p>我是这样想的:既然自己有这样的需求(比如:做个自己的个人网站需求),那么同理,其他人可能也有这个需求的,所以我做好功能并开源,对他人就可能有帮助。</p>
<p>我开源了之后,也的确给不少人提供了经验或者帮助,因为这个项目,笔者收获了很多的小星星。而且很多人是伸手党来的,你做好了,别人可以直接用,多方便啊。</p>
<p>还有一个项目就是 <a href="https://link.segmentfault.com/?enc=kIU2yGfE7tGbU32grgrnyA%3D%3D.YfqCV%2FwjtlhaI%2BbYg4zPDy4uHACqV%2Fnug8P%2FiWdlr%2BMFYXSnkeAtjzE5CzGTRZT9FDpKjDNBCeLyUTY0lnaTkw%3D%3D" rel="nofollow">vue + typescript</a> 版的博客前台展示,当时我已经写了一版 react 版的前台展示了,为什么还写一版 vue 版的呢 ?因为我想学习 typescirpt,所以想在结合 vue 来实践一下,而工作中还没用得上,所以又把我的网站前台展示用 vue + typescript 用了一版。</p>
<p>而且当时 typescript 加 vue 的开源项目还很少的,连相关的博客都少,我想参考一下别人的项目,但是没有啊,所以当时也踩了很多坑。所以我想:我如果开源了的话,肯定很多人会参考我这个项目的,也会带来一定的流量,所以能收获不少的 star 。也的确是这样,这个项目也是我目前的完整项目中最多 star 的一个。</p>
<p>有一点要注意的是:<strong>一个人的精力与业余时间是非常有限的。如果是一个人的话,做的开源项目不要太多吧,维护好一个开源项目是很需要时间的,维护多个项目所需要的时间就更多了</strong>。</p>
<p>你以为开源了就行了吗 ?太天真了。</p>
<p>那要写 README.md 来介绍你开源的项目的,比如一般要有如下内容:</p>
<ul>
<li>简介:简单说明一下这个项目是干嘛的</li>
<li>结果:这个项目的代码达到了什么效果</li>
<li>步骤:怎么运行你这个项目,或者怎么使用你写的插件。</li>
<li>文章:详细讲解这个项目(可无,最好有)</li>
</ul>
<p>有了这个 README.md 之后,别人一看到你的项目的 github 就知道这个项目的情况了。</p>
<p><img src="/img/remote/1460000020954552" alt="" title=""></p>
<h3>3.3 硬核为王</h3>
<blockquote>以做好一个伟大的产品的心态来做开源项目。</blockquote>
<p>做开源项目说白了就是做一个产品,我们要以做好一个产品的心态来做开源项目,这样你的产品质量才会更优,才会够硬核,也就是有料。</p>
<p>我做这个博客网站的时候是有这个意识的,做完第一版之后,也在不断的迭代和完善。</p>
<p>就我做成的成果来看,其实还不够硬核,因为还有一些优化的点和实用的功能的,只是我还没做。</p>
<p>目前,笔者比较遗憾的是:还没有一个达到 1000+ Star、甚至 10000+ Star 的硬核开源项目。以后技术更精进了,或者有好想法了,再开源一个好的开源项目吧。</p>
<p>我知道的一个比较硬核的开源项目是这个:<a href="https://link.segmentfault.com/?enc=FvRb0RoCFNZTdTUknnIlYQ%3D%3D.MakuhgdpWFCdZxipgNlN4m%2F041EcrVESYRokf2v%2BuErF5sbwQYnOvH1eBwQ9Ngbd" rel="nofollow">支持自定义样式的 Markdown 编辑器</a>,这个项目就是以一个产品的理念来做的,作者也在不断的迭代和完善。而且更新的速度很快,也很规范。</p>
<p>当然你也可以参考那些做得很出名的开源项目,毕竟做得那么成功,肯定有其原因。</p>
<p><img src="/img/remote/1460000020954553" alt="" title=""></p>
<h3>3.4 时间与坚持</h3>
<p>做开源项目是很需要时间的。</p>
<p>比如笔者做的博客网站项目就用了 2 个多月的业余时间来做,还好公司的正常的上班时间是 965 的,平时上班只需要 7 个钟,加班的情况比较少,所以业余时间比较多。</p>
<p>但利用业余时间做开源项目时,我的每天真实工作时间可以说是 9117 或者 907,因为晚上下班了,我都会用 2 - 3 个钟来做开源项目,周末的两天也是这样,而且周一到周五的中午吃完饭时,我也会挤出大概 30 - 40 分钟的时候来学习相关的技术,或者做开源项目。</p>
<p>这样习惯了大概两个月之后,终于把网站的第一版撸了出来。</p>
<p>所以时间很重要,没有时间你就做不出好的开源项目。</p>
<p>而且这是一直坚持的结果,如果中途觉得累了,可能就放弃了。</p>
<p>如果你问我难道不觉得累吗,其实我很少觉得累,因为是做自己喜欢的事,兴致比较高,再加上平时有锻炼身体,所以不累。</p>
<p>当然,如果你的工作时间是 996 的,可能没那么多时间了,最好是开源一些工作中开发好的插件或者特定功能的轮子之类的。</p>
<p><img src="/img/remote/1460000020954554" alt="" title=""></p>
<h3>3.5 推广自己的项目</h3>
<blockquote>有才华很重要,让别人知道你的才华更重要。</blockquote>
<p>酒好也怕巷子深。</p>
<p>当你做好你的开源项目之后,你以为就会有人给你小星星了,那你就太天真了。</p>
<p>想收获小星星,还要自己去技术社区推广的,不然没人知道你的项目,现在这个时代,<strong>流量为王</strong>,这一点对于开源项目也是一样的,人来了,了解到你的项目,才有可能给你小星星。</p>
<p>而且要推广就要脸皮厚,这叫做自我营销。</p>
<p>所以要写文章介绍你的开源项目,文章的要点主要是突出 <strong>效果与功能</strong>。</p>
<p>然后就是 <strong>宣传</strong> 了,到各大技术社区(比如:思否、掘金 等)去发布你的文章,达到引流的目的。</p>
<p>如果想知道怎么写推广的文章,可以参考我写的这两篇文章: <a href="https://link.segmentfault.com/?enc=CSIcY7cEsVyl3QskIloumA%3D%3D.d%2FBuoePyyQc%2BHmsehlgrfKzeg%2BY28o7zec41s5IOyyMaR1027uyizHMEyNJ09RTz" rel="nofollow">react + node + express + ant + mongodb 的简洁兼时尚的博客网站</a> 和 <a href="https://link.segmentfault.com/?enc=kdHDvj5kf%2Bg%2FqxIEKyQ8Gw%3D%3D.ApSkPFUGXyYvKN5MFXl1Q17FRAYRQ25axL7kxbLa7d%2F6hjrhKeG%2FDlNZ6Fr4KuQZ" rel="nofollow">Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记</a>。</p>
<p><img src="/img/remote/1460000020954555" alt="" title=""></p>
<h2>4. 总结</h2>
<p>笔者觉得想做好开源项目,最重要因素是兴趣,不然你可能中途就放弃了,很难坚持到把项目做完和做好。</p>
<p>有时候,有很强的功利心(比如 为了钱、为了名)也是好事,这可是你的一大助力,是可以推动你做完你想做的事的。</p>
<p>最后,要掌握 GitHub 吸星大法,先从写作开始,从现在开始。</p>
<p><strong>推荐阅读</strong>:</p>
<p><a href="https://link.segmentfault.com/?enc=XbChsphUN1DBR9PIwJeWrQ%3D%3D.qCcqdMhuYp11Mo4naYev2z73ePYB6ROl21wp%2BFta7asC0kS66lP9bxhHYq5%2BR%2FA4i1Gvhc3T2W6PqT%2Fufw6EIg%3D%3D" rel="nofollow">GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a>,估计很多人都不知道的技巧,甚至很多高级工程师都不知道。</p>
<p><img src="/img/remote/1460000020954556" alt="" title=""></p>
<p><img src="/img/remote/1460000020954557" alt="" title=""></p>
重磅:硬核前端面试开源项目汇总(进大厂必备)
https://segmentfault.com/a/1190000020480229
2019-09-25T07:00:00+08:00
2019-09-25T07:00:00+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
167
<p><img src="/img/remote/1460000020480232?w=900&h=400" alt="" title=""></p>
<blockquote>复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累!</blockquote>
<p>笔者博客地址:<a href="https://link.segmentfault.com/?enc=SMbAts2Z848OqOLJ9EhWTQ%3D%3D.5%2FS%2FzRLwcEQr2PLIMiXormfuvlgIJTTin%2BPlN5DTEKV2AoVqEM9IJIPZ9onNoULN" rel="nofollow">https://github.com/biaochenxu...</a>。</p>
<h2>开源项目</h2>
<ul><li><a href="https://link.segmentfault.com/?enc=Eo7jP0gP53PYlkoHyNq1IQ%3D%3D.FCVrV2SV3tg3W6GLWD9nr%2Bk2jkT6iQ5oWmOAa9SA%2Fgx1Ddp6QvCWudRHod4zaJZ5iEc5SMg9YJvL9o7Sj7fSUw%3D%3D" rel="nofollow">https://github.com/InterviewMap/CS-Interview-Knowledge-Map</a></li></ul>
<p>建立最好的面试地图。目前的内容包括js、网络、浏览器相关、性能优化、安全性、框架、git、数据结构、算法等。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=f3%2BnINS6NQ7A1gs%2BbL7gcQ%3D%3D.Hy7iRj2Hsb8iJORxMtuIOsxQPM6yiEhTKJ1%2FizqBK7ecs%2Bkn2pR5Rf5Te9wHqlo38hxCTLlcfVfcrA8UxaQNuQ%3D%3D" rel="nofollow">https://github.com/Advanced-Frontend/Daily-Interview-Question</a></li></ul>
<p>每天搞定一道前端大厂面试题,祝大家天天进步,一年后会看到不一样的自己。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=MJMKtYU1IvCtS1emfrNlbQ%3D%3D.tP6hmsSFSzecTuW26poiQ58fnh8q80FTw1%2BJJxN6g7ccjiG64wGZD3nhtbfsLzST" rel="nofollow">https://lucifer.ren/fe-interview</a></li></ul>
<p>宇宙最强的前端面试指南。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=4SAlQoxZWmTOAz9%2FDXq8HQ%3D%3D.ulYomeowttO0XHWqpjxrVm5H2XapIi854lTIq7FFxfqn%2FFig58sscisMLM7DQ2%2Fe" rel="nofollow">https://github.com/stone0090/alibaba-interview</a></li></ul>
<p>阿里巴巴面试资源汇总。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=8b1ASdj1N1lK8Yv8cx1f5Q%3D%3D.uFesdAek0a5plpHjEIXuiRD%2F2vx%2FP%2BiE7xL1Pidw8mV9Wk%2BZ%2BKZT7G7wLz%2FtgOEp" rel="nofollow">https://github.com/haizlin/fe-interview</a></li></ul>
<p>前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家)。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=Pl%2FtIzZzJ7ZkTwtseBAu%2BA%3D%3D.mNLnuwghr6LzlHYN9EWmZ1%2FWobW%2FTuLUeHtqZMR9pF72RTcVtJvN78bIkIfvdDmcU27gEdO0NOzY9Y7u%2FNSqsq%2F8agm0NyGnREzKWySUXuE%3D" rel="nofollow">https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn</a></li></ul>
<p>如何通过饿了么大前端的面试, 职位是 2~3 年经验的 Node.js 服务端程序员 (并不是全栈)。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=UBVhRINmB0PueObXClpUAQ%3D%3D.qNPesAuvQTtbNO6HaRh62iYwLmtzRRKdUGAe1LB%2F0fcUedyF5Vjdb6YPnpkPxqQvnmwhzmYpnwdUac%2B3vKK2AA%3D%3D" rel="nofollow">https://github.com/HerbertKarajan/Fe-Interview-questions</a></li></ul>
<p>目前最全的前端开发面试题及答案。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=A2XE6ELzjKy7alz3UUctkQ%3D%3D.WfD7iRiX5UbuOhooYfpHIhKXRNII8aTvSyfcbBwxEtk%2BRAfyRG%2F86VJ6OtTG9kbCO5TOYY6rToLMtalMw%2Fk6nw%3D%3D" rel="nofollow">https://github.com/poetries/FE-Interview-Questions</a></li></ul>
<p>前端面试常考问题整理,按模块知识点分类。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=6irsumsC2d9rOOxgVLBrEA%3D%3D.LP8Mx7gjaLvEitmzGzYZbTH8G5juWCuQnxvD9AtGMKR%2FZVKucBMHRLM5VV7kvIE6" rel="nofollow">https://github.com/fex-team/interview-questions</a></li></ul>
<p>FEX 面试问题。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=jCMn7TWGxW1Av9PlvH3b3A%3D%3D.Pyj7SHJIcew013hpw802%2B1ccoEe6q88EVLuckaapH0Jedo5Bbm9FSlYRtJgogpPc7iO6UQbEwVPXU8giqgLYMw%3D%3D" rel="nofollow">https://github.com/h5bp/Front-end-Developer-Interview-Questions</a></li></ul>
<p>一个有用的前端相关问题列表,你可以用来面试潜在的候选人,测试自己或完全忽略。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=gsJ%2BhZBV747h11hqS7MkVA%3D%3D.ShChBpAgudwtUIFVnUJQ9lNu%2BsPBPqCYw0GOWJom%2BFLrIAsDj9aE6qIOo%2FYv9r%2FZc787GxlxdWT7xC9txbdVNFJKwP46%2BMIloaYudps0em4%3D" rel="nofollow">https://github.com/paddingme/Front-end-Web-Development-Interview-Question</a></li></ul>
<p>前端开发面试题大收集,前端面试集锦。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=%2FzA1gkGuu444L2XQgOO%2Fmw%3D%3D.51gKcmFdtVyq7boAbQA8qCA4iqEd5Ddo1L3h1eiqUDDYAyOe0n1NqSQScXxAjEhyYkmOlOoRGktD0yC2w21yaUTVwTNnFVYVRep5VedFhhw%3D" rel="nofollow">https://github.com/helloqingfeng/Awsome-Front-End-learning-resource</a></li></ul>
<p>GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、求职面试等)。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=bx25FaAIgB2Cj2Qqa0CPCw%3D%3D.jzaTP0NzSTwhDn0xe1LS4Gq5oW%2BrU2SFSBrV19fGAnZTeSGSeSacVA8iQaD9RA1j9k1ulQMOgOghNQZL%2Brr7E9BO5YCvxHVBTnjm22PvbbQ%3D" rel="nofollow">https://github.com/Advanced-Interview-Question/front-end-interview</a></li></ul>
<p>前端开发者面试清单。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=%2B01MjaLCpf%2BBEBFUOUXEAQ%3D%3D.z6vEvdiOHX6G26dbqH5mqF98hMoJXhyMr7%2FKfCUh%2FX%2BrYASzOKBzENqC5RNmKViX" rel="nofollow">https://github.com/airuikun/Weekly-FE-Interview</a></li></ul>
<p>每周十道前端大厂面试题,并收集大家在大厂面试中遇到的难题,一起共同成长。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=TPNciXU8QhmNbmKwPlW8Dw%3D%3D.A4WYGTh%2F7uoQS2xWvfRfmsQmCDCeRVcp4FfUI5TltGx8juoiWPjO4%2FPTs5hJALPYoHcemd1a6pBpYBEcbyUWsfjY55CY4YbSYigivHXq%2BV0%3D" rel="nofollow">https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md</a></li></ul>
<p>面试的内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=1txHCtlR%2F3YnpaSUvPni6w%3D%3D.uP9BjsiY29OHNcFmbrj00F%2BbYhCnZ1J45ckvG0VW4BIDCDXYurFXBDBUBXKunWuH" rel="nofollow">https://github.com/biaochenxuying/blog</a></li></ul>
<p>JavaScript 数据结构与算法之美。</p>
<ul><li><a href="https://link.segmentfault.com/?enc=VG8d2sLr%2BtgfqjfnwJGD8g%3D%3D.WA0Bw2p6CedXcVuXschfpLi8p%2F2G1M14JU8sghB2KkjI%2BW0IlXHDqIZM1I%2BNUwzHcrcfp0d6iePO48iQsj9nn1%2FXYRHFdkOWBhbiG5Qf%2BywL8rRpQSUONxEW3rbqF1rApJV22TGk1Lnwi3JwoH9taPMHedcMuk%2BnAQ4E6T9vyq4%3D" rel="nofollow">https://github.com/search?o=desc&p=1&q=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95&s=stars&type=Repositories</a></li></ul>
<p>更多前端面试开源项目 ...</p>
<h2>最后</h2>
<p><a href="https://link.segmentfault.com/?enc=l1TgdXSx2qGSIXLOKqe6lg%3D%3D.1GHsXoYZjd%2BXrJ0NFKeS0Dgj3YFEMeujwVrEP%2BkqI3H6gd4YnOjo3qATSM3aIzMB8NQ0WHx0huExDIUT0G8doQ%3D%3D" rel="nofollow">1. Vue + TypeScript + Element 项目实战及踩坑记 </a><br><a href="https://link.segmentfault.com/?enc=J73lD64SAeq1bXodLzNfpw%3D%3D.rCuUN9zdqlPjyymEtus9H5vKaDy0px%2FidJ5NuzdAgn0YVyP%2FtrYTnobVQnGRccS%2BC2E56cZW9pNJUS8aHpxtoQ%3D%3D" rel="nofollow">2. GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a>。</p>
<p>觉得有用 ?那就收藏,顺便点个赞吧,你的支持是我最大的鼓励 !</p>
<p>笔者的技术博客首发地址在下图,关注不迷路,第一时间收获最新文章。</p>
<p><img src="/img/remote/1460000020362459" alt="全栈修炼" title="全栈修炼"></p>
2019 前端秋季社招面试经历总结(二年多经验)
https://segmentfault.com/a/1190000020460644
2019-09-22T21:09:58+08:00
2019-09-22T21:09:58+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
48
<p><img src="/img/remote/1460000020460647?w=872&h=852" alt="" title=""></p>
<h2>1. 前言</h2>
<p>本文内容讲笔者在 2019 的秋季社招时期,去大厂面试的问题和经验总结。</p>
<blockquote>居安思危,安逸久了,都要试着知道自己目前的市场价,而最好的方法就是去外面面试几场,受受打击,知道自己的不足,以后加强。</blockquote>
<p>笔者入坑前端 3 年多了,有 2 年多的前端工作经验,面试坐标:广州。</p>
<p>本文的面试问题只写了些开放性的问题,其公司要求保密的试题就不写出来了。</p>
<h2>2. 字节跳 X</h2>
<p><strong>一面,45分钟</strong></p>
<ul>
<li>根据自己简历和做过的项目,问一系列相关问题。</li>
<li>闭包的输出值,考查闭包(看试题给结果,分析过程)。</li>
<li>状态码 304 是什么意思,有什么用 ?</li>
<li>浏览器缓存的方法有哪些,它们的优先级是怎样的 ?</li>
<li>都说要减少 https 的请求,https 为什么慢 ?</li>
<li>http2 与 http1 有什么区别 ?</li>
<li>click DOM 节点的 inner 与 outer 的执行机制,考查事件冒泡与事件捕获 (看试题给结果,分析过程)。</li>
<li>for 循环中的 var 、let 与 const 区别,比如 for( const i = 0; i< 3; i++ ){ console.log(i); } 会输出什么结果 ?(看试题给结果,分析过程)。</li>
<li>有没有系统学习过 es6 或者看过 es6 的书 ?</li>
<li>js 单线程、宏任务与微任务的执行顺序 (看试题给结果,分析过程)。</li>
<li>考查箭头函数的 this 与 普通函数的区别,this 的指向 (看试题给结果,分析过程)。</li>
<li>vue 中 computed 与 watch 的内在是如何实现的 ?</li>
<li>接下来前端要深入的方向 ?</li>
<li>写一个方法输出 ABCDEFG 的值(看试题、现场写程序)。</li>
<li>从排好序的两个链表中,找到相同的节点,并输出链表(看试题、现场写程序)。</li>
<li>最后面试官问了句,你没刷过什么面试题吗 😪。</li>
</ul>
<p><strong>总结</strong></p>
<p>最后没过面试,总结一下原因。</p>
<ul>
<li>因为这次面试是字节的猎头找的我,帮我内推的,但我还没准备好就去了,没多大信心;</li>
<li>很久没面试了,第一次面试还是比较紧张,很多技术问题的回答也不是很好,现在回想下,当时连情商都不在线 😪。</li>
</ul>
<p><img src="/img/remote/1460000020460649?w=804&h=728" alt="" title=""></p>
<p><img src="/img/remote/1460000020460650?w=794&h=578" alt="" title=""></p>
<h2>3. CVT X</h2>
<p><strong>一面是电话面试,半小时</strong></p>
<ul>
<li>问了简历中的项目的一系列问题(此处省略)。</li>
<li>vue 中 next-tick 的作用与大概实现原理 ?</li>
<li>vue 组件的双向绑定通信是如何实现的 ?</li>
<li>vue 按需加载的方式有几种,是哪几种 ?</li>
<li>浏览器缓存的类别与优先级 ?</li>
<li>react 中数据请求为什么要在 某个生命周期里面执行,在哪个生命周期 ?</li>
<li>react 高级组件的作用 ?本质是什么来的 ?</li>
</ul>
<p><strong>总结</strong></p>
<ul>
<li>CVT X 的面试是找熟人内推的。</li>
<li>回答的都挺好,过了一面。</li>
</ul>
<p><strong>二面是视频 HR 面试,20 分钟</strong></p>
<ul><li>问了一系列个人以及在现在公司的问题。</li></ul>
<p><strong>总结</strong></p>
<p>后面就没有下文了,所以没有第三轮现场技术面,我猜原因如下:</p>
<ul>
<li>谈期望薪资时,我说了该公司的招聘信息上的最低薪资,应该还是太高了,因为那是 <strong>3年+ 经验</strong> 的薪资范围。</li>
<li>再加上我是以前面的字节跳 X 的薪资范围做为了参考标准 😂,字节跳 X 的薪资范围的是很高的,我有点漂了 😰。</li>
</ul>
<p><img src="/img/remote/1460000020460651?w=700&h=700" alt="" title=""></p>
<p><img src="/img/remote/1460000020460652?w=256&h=235" alt="" title=""></p>
<h2>4. X 教育</h2>
<p><strong>一面,现场面试,大概 1 小时</strong></p>
<ul>
<li>var 和 let 的作用域,匿名表达式的运用(看试题给结果,分析过程)。</li>
<li>--proto-- 指向 (看试题给结果,分析过程)</li>
<li>闭包,及修正方法 (看试题给结果,分析过程)</li>
<li>一个从小到大排好的数字型数组,找到数值为 target 值,并返回 index 值(现场写程序)</li>
</ul>
<p>function findIndex(arr, target){ ... }</p>
<ul>
<li>给两个 input 框,实现双向绑定功能的思路或者代码(现场写程序)。<a href="https://link.segmentfault.com/?enc=Od6OQG%2FFpeBugE5Pn0l3oQ%3D%3D.F6IxAlO23Xt1VhZmS2iryLkbhdwbq%2B6jUdijtzNoKQU7%2Bu%2B75%2B2DNp6NHZyGnlFzEEOI53nMFYBHhhp43vY6JA%3D%3D" rel="nofollow">【JavaScript学习笔记】自己实现双向绑定</a>
</li>
<li>nextTick 的使用场景 ?</li>
<li>vue 路由中,有 post/:id 的路由,当路由切换 post/1 => post/2 时,组件会更新吗,如何修改能更新 ?<a href="https://link.segmentfault.com/?enc=dOkyy%2BGxabeMm4fW4hPn1w%3D%3D.YssL1ttYzaRY2EHU9sI%2Bop3a6JwfCwSldJLZpykCiBq1AefWUTG9%2F0%2B90dJGQGohCMlJCqr8qdhK2gE5%2FG4cXw%3D%3D" rel="nofollow">vue更新路由router-view复用组件内容不刷新</a>
</li>
<li>vue-router 的导航钩子有哪些 ?组件里面的导航钩子又有哪些 ?</li>
<li>header 头部固定,剩下 body 占满全部高,超出就上下滚动,如何实现 ?</li>
<li>平时的开发流程 ?</li>
</ul>
<p><strong>二面,大概一个钟</strong></p>
<ul>
<li>tcp 和 udp 的区别,各自的优势是什么 ?</li>
<li>web-socket 用过吗 ?</li>
<li>对计算机的基础知识熟悉吗,比如网络层什么的 ?</li>
<li>给 10 亿的数据的 url 去重,思路(现场写部分代码)</li>
</ul>
<p><strong>三面,HR 面</strong></p>
<ul><li>问了一系列个人以及在现在公司的问题。</li></ul>
<p><strong>总结</strong></p>
<ul>
<li>技术面试的过程表现的都不错,最终拿到了 offer ,开出的薪资涨了不少。</li>
<li>虽然总收入涨了,但是就时薪来说,还是亏了的。</li>
<li>跳槽的成本是很高的,总薪资或者时薪没有涨 30% ,都是亏的。</li>
<li>因为现在的公司上班时间是 965 或者说是 955,平时有比较多的时间写博客,做些有意思的开源项目什么的,入职这家公司估计就不能了。</li>
<li>所以没去这家公司。</li>
</ul>
<p><img src="/img/remote/1460000020460653?w=234&h=236" alt="" title=""></p>
<h2>5. 酷 X</h2>
<p><strong>一面</strong></p>
<p><strong>线上笔试,20 分钟</strong></p>
<ul><li>线上笔试的内容应该是有试题库的,笔试前签了不能泄露试题的协议之类,就不写出来了。</li></ul>
<p><strong>现场逻辑题面试,30 分钟</strong></p>
<ul><li>行测逻辑题面试,试题声明了不能泄露试题之类,就不写出来了。</li></ul>
<p><strong>现场技术面试,大概 10 分钟,就问 10 个问题左右</strong></p>
<ul>
<li>模块化开发方式有哪些,你用过哪些 ?</li>
<li>闭包的理解和其应用场景有哪些 ?<a href="https://link.segmentfault.com/?enc=%2BJ5NPNKKSRE%2Bfq03HulTtA%3D%3D.B88lU1yeQ1ukqpB2apP9jxbNtoWwKIh1%2BzB8nsr3iavONOpT4j6M5WiW8kW9yZDWiQvYqUpdD%2Fs82ggJnaTzfw%3D%3D" rel="nofollow">对JS闭包的理解及常见应用场景</a>
</li>
<li>对 mvc、mvp、mvvm 的理解 ?</li>
<li>vue 双向绑定的理解 ?</li>
<li>对设计模式的理解,有用过哪些 ?</li>
<li>http 的理解,tcp 包有什么内容 ?</li>
<li>https 为什么比 http 安全 ?</li>
<li>https 请求,你通常要注意的是什么 ?</li>
<li>post 和 get 请求的区别 ?</li>
<li>前端要考虑什么安全问题,比如:你知道 ssr 跨站脚本攻击吗 ?</li>
<li>一般工作中你是如何排查前端性能问题的 ?</li>
</ul>
<p><strong>总结</strong></p>
<ul>
<li>结果是没过,技术面试问的太宽了,以上写出来的问题还是我细化之后的了。</li>
<li>我感觉我的技术范围和面试公司的不是很一致。</li>
</ul>
<p><img src="/img/remote/1460000020460654?w=282&h=285" alt="" title=""></p>
<h2>6. 总结</h2>
<p><strong>情况</strong></p>
<ul>
<li>投了十来份简历,都是离我住的地方不是很远的公司,都是广州的大厂,收到的面试邀请才 4 个而已,有些投了简历都没人看。</li>
<li>笔者 <a href="https://link.segmentfault.com/?enc=HiIhcM3OJMIr58Qe2rxUQA%3D%3D.zVb0Dn7LtcC3%2FKKEKlaWzsh23AO78aK4KWZFEVScVOrcRGAy%2FhbBVC31l6fx%2FG39" rel="nofollow">GitHub</a> 上的开源项目总收获的 Star 数超过了 <strong>1.6K</strong> 好像也没多大作用,面试过程都没怎么问。</li>
<li>广州的互联网大厂其实挺少的,目前大厂没有什么坑位,有的估计也是候补的,要求更加严格,而且社招的几乎都是 3 年及以上的高级前端工程师,不到 3 年经验的没多少机会。</li>
<li>2 年多的社招,面试的内容绝大部分还是基础知识,实际工作的内容问得少。</li>
<li>笔者在广州的时薪应该算是中偏上的水平。</li>
</ul>
<p>经过最近的面试,笔者感觉如下:</p>
<ul>
<li>经过 2018 年的寒冬,现在 2019 年下半年了,寒冬依然严峻。</li>
<li>想通过社招进大厂的程序员,最好有 3 年及以上经验了再去面试大厂。</li>
<li>回答开放性问题时,要把面试官往自己熟悉的方向引。</li>
<li>很久没面试了,要准备好再去面试,不然信心不足,成功率不高。</li>
<li>面试成功往往是后面面试的公司,先去面试几个不是最想去的公司,再去面试最想去的公司。</li>
<li>不要裸辞,特别是才工作一两年的程序员,不然压力非常大,最后可能找到的也是不是非常理想的公司。</li>
<li>如果非要跳槽,那建议: <strong>骑驴找马</strong>。</li>
</ul>
<p><img src="/img/remote/1460000020460655?w=1240&h=1240" alt="" title=""></p>
<h2>7. 最后</h2>
<p><img src="/img/remote/1460000020460656?w=298&h=142" alt="" title=""></p>
<p>推荐阅读:</p>
<p><a href="https://link.segmentfault.com/?enc=q17jTON2SvLE867HI0uuvA%3D%3D.kxiTRPf8QT6UhQmvotRhol6Z4itP1phgf3nn1etyEv%2FdniIjhxi%2FVZqZILvcGRs1OvC8gaR7QuaS5NHmw%2FQMVQ%3D%3D" rel="nofollow">1. 重磅:硬核前端面试开源项目汇总(进大厂必备)</a></p>
<p><a href="https://link.segmentfault.com/?enc=3X4pUCkoXAP0lM38hAe1Lw%3D%3D.gbJ1QxVs858QYk92HSrUniEDz%2B7r80um6Xc0U%2BSJb74wYfHdWLIe95LZTRXEkAa20LpOjHWyTjxmAxlP5NWw0AS8NqpG%2BQrdFcBJANmk%2FB0%3D" rel="nofollow">2. 前端硬核面试专题</a>,内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。</p>
<p><a href="https://link.segmentfault.com/?enc=P8lUx%2BZvigSrp%2FgGsIGldw%3D%3D.nrYGLy56Aekg43yCpPkGaloIglUbUUz4%2FhoRWSRohD%2F86eA3M2bhtpFG2Jb0yWVr7K7pjnDhG61q%2Bv2KIl%2FDfQ%3D%3D" rel="nofollow">3. GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目</a></p>
<p><img src="/img/bVbx0Ed?w=900&h=383" alt="clipboard.png" title="clipboard.png"></p>
GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目
https://segmentfault.com/a/1190000020362447
2019-09-11T18:00:00+08:00
2019-09-11T18:00:00+08:00
夜尽天明
https://segmentfault.com/u/biaochenxuying
54
<p><img src="/img/remote/1460000020362450?w=1240&h=1064" alt="" title=""></p>
<h2>1. 前言</h2>
<p>本文介绍如何在 GitHub 上发现优秀的开源项目,找到你想要的矿。</p>
<p>GitHub 作为全球最大的同性交友网站,也是矿资源非常丰富的矿场。</p>
<p>GitHub 有时比 Google 还有用,如果你不懂如何使用它来挖矿,那你不算一名合格的程序员。</p>
<p>GitHub 是一个宝藏库,可没有藏宝图,GitHub 这个亿计的优秀的开源项目也和你没有关系。</p>
<p>一般人没事的时候刷刷朋友圈、微博、电视剧、知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目,久而久之,这差距就越来越大,那么如何发现优秀的开源项目呢 ?</p>
<p>笔者做前端开发这些年,几乎每天都会刷 GitHub,也算是 GitHub 的重度使用者了,其中也掌握了一定的技巧,由此写一下我是如何使用它来挖矿的 !</p>
<p>笔者博客地址:<a href="https://link.segmentfault.com/?enc=%2FQ8jDGe0WBWUAT32mCxXyA%3D%3D.m%2B2XZOGhZD6RpywBV6adO3y0LatFVc3WUk6b3n%2BU2yfLzkVKhPjAvkkvg3Uq5yAq" rel="nofollow">GitHub</a>。</p>
<h2>2. Fllow</h2>
<p>关注 GitHub 上活跃的大牛。</p>
<p>GitHub 主页有一个类似微信的朋友圈,所有你关注的人(相当于微信的好友)的动作,比如 create、star、fork 了某个项目都会出现在你的时间线上,这种方式适合我这种比较懒的人,不用主动去找项目,而这种基本是我每天获取信息的一个很重要的方式。</p>
<p>一些大牛 create、star、fork 了某个项目,很大程度是因为该项目做的好,或者对他有用的。</p>
<p>比如:github 上的 actions 功能刚出不是很久,很多人还不会用,然后阮玉峰老师今天就创建了一个 github-actions-demo 的仓库。</p>
<p>再比如:还有过几天就是中秋了,所以很多人抢票回家,所以不少人 star 了 12306 的智能刷票,订票的项目。</p>
<p>比如下图就是我关注的一些大牛在今天点了 Star 的项目。</p>
<p><img src="/img/remote/1460000020362451?w=1240&h=1234" alt="" title=""></p>
<p>不知道怎么关注这些人?那么很简单,关注我 biaochenxuying ,以及我 GitHub 上关注的一些大牛,基本就差不多了,因为我关注的很多在 GitHub 上活跃的大牛,平时看到活跃的大牛也会继续关注。</p>
<p><img src="/img/remote/1460000020362452?w=1240&h=1243" alt="" title=""></p>
<p>可能很多人不想 Fllow 别人,因为不想被别人看到,不想承认别人比自己优秀。</p>
<p>但我想说:<strong>承认别人比自己优秀不丢脸</strong>。</p>
<p>Vue.js 的作者尤雨溪够牛 B 吧,都关注了不少大牛呢,都虚心向别人学习呢,更何况我们呢。</p>
<p><img src="/img/remote/1460000020362453?w=1240&h=552" alt="" title=""></p>
<blockquote>活跃是指:经常在 GitHub 上做开源项目、 Star 别人优秀项目、Fork 别人优秀项目、Flow 别人、或者写博客。</blockquote>
<p>但是你关注太多比你的 level 高太多的大牛用处不是很大的,往往对你现在的帮助不是很大,所以关注顶级大牛的目的应该是更好的知道行业的动态或者方向。</p>
<p>多关注一些 level 高一两级的大牛,比如你是初级前端,那你应该关注多一些中级或者高级的前端, 只比你的 level 高一两级的前端现在关注的内容或者知识往往是你即将要学到或者用到的。</p>
<p>至于为什么只关注活跃的大牛呢,因为自己能从他那里有所收获,如果某个技术大牛确实很厉害,但是对你没什么帮助,关注 TA 有个毛用嘛!</p>
<h2>3. Explore Repositories</h2>
<p>github 也会推一些你可能感兴趣的仓库给你的,只要你一打开 <a href="https://link.segmentfault.com/?enc=2LXX2tkmICZMTXiTwD3TEg%3D%3D.kif1HcWqM2fGPJdASIusJtSH0gzRvZOmGYJltDco%2BME%3D" rel="nofollow">github.com</a> 网站,就出现了。比如下图是今天推送给我的仓库。</p>
<p><img src="/img/remote/1460000020362454?w=734&h=1006" alt="" title=""></p>
<h2>4. Explore</h2>
<h3>4.1 Trending</h3>
<p>Trending:趋势的意思。</p>
<p>在 Trending 页面,你可以看到最近一些热门的开源项目或者开发者,这个页面可以算是很多人主动获取一些开源项目和活跃开发者最好的途径。</p>
<p>首先点击 Explore => Trending。</p>
<ul>
<li>可以选择看开源项目还是开发者,切换 Repositories 和 Developers 即可。</li>
<li>可以选择「当天热门」、「一周之内热门」和「一月之内热门」来查看。</li>
<li>可以选择语言类来查看,比如你想查看最近热门的 Vue 项目,那么右边就可以选择 Vue 语言。</li>
</ul>
<p><img src="/img/remote/1460000020362455?w=1240&h=1170" alt="" title=""></p>
<p>这个页面推荐大家每隔几天就去看下,主动发掘一些优秀的开源项目。</p>
<h3>4.2 Topics</h3>
<p>Topics 里面也可以看某个话题或者领域内最优秀的项目。</p>
<p>比如前端领域: <a href="https://link.segmentfault.com/?enc=rXouWnvcroQAn4283bFbBQ%3D%3D.RamLbjS%2F7h5xTUeV%2BKPjGd4%2BKpLSrJaAaB27sJJ5ELYpt96pSo6k85S5M5bEwZs%2B" rel="nofollow">Front end</a></p>
<p><img src="/img/remote/1460000020362456?w=1240&h=1127" alt="" title=""></p>
<h2>5. Star</h2>
<p>因为笔者也做过几个开源项目,所以知道 star 数会给作者动力的,越多人点 star ,维护这个开源项目的驱动力就越足。</p>
<p>笔者经常看到不错的、有趣的、有用的,或者现在没用,以后会用到的优秀开源项目,都会 star 一下,当是给这个开源的作者一份鼓励,希望 TA 更好的维护这个开源项目,以后用到的时候可以在 star 过的项目里面找出来。</p>
<p>笔者不想 fork 别人的项目,除非想深入研究该项目的源码才会 fork。</p>
<p><strong>别人是把 fork 当收藏,而我把是 star 当收藏,把 fork 当研究</strong>。</p>
<p>所以你也可以在某些大牛的 star 列表里面找优秀开源项目,比如笔者就 star 了不少优秀的开源项目,如下图。</p>
<p><img src="/img/remote/1460000020362457?w=1240&h=1107" alt="" title=""></p>
<p>如果你在笔者的<a href="https://link.segmentfault.com/?enc=mtIWmllESrZogN6W5tIOiw%3D%3D.7kvgt1WUaBYvb2B9zd7EdS0W4xBqTwy%2FXQQ2%2BK4HISls4DhBe3OsmZVbCJW71LFt" rel="nofollow"> star 列表 </a>里面找的话,你应该会有惊喜,你会发现很多有趣实用的项目的。</p>
<p>因为笔者 star 过前端学习、教程、免费电子书、工具、资源、面试、Git 的奇技淫巧、有趣实用的项目等等。</p>
<p>比如:</p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=BP3D3KwIE2TfcZ0qE2AmYg%3D%3D.bHKwvZ6n33Bz7wT%2Bs6ILpADEQuAy1cwfTmkUpp5B238Usc7R0bsJy%2FSanghc%2FGmz" rel="nofollow">油猴脚本 一个脚本搞定百度网盘下载</a></li>
<li><a href="https://link.segmentfault.com/?enc=Fyu4nLKjdrdrTWgTA6%2BQeQ%3D%3D.RYdLX3zOylmF7lGmd%2BryHxPwJjVlG6bFzr4omkCiCxtlz2rkaXcVxK8lPFailiMt2H6wv7%2F3%2BCdPEs0nWpYhHw%3D%3D" rel="nofollow">总结关于科学上网的概念方法及工具</a></li>
</ul>
<h2>6. Search</h2>
<p>除了平时主动发现优秀开源项目之外,主动搜索又是非常重要的技能,很多百度或者 google 不到的东西,在 github 上都能找到。</p>
<p>输入搜索关键字,可以选择排序的方式、语言、仓库。</p>
<p><img src="/img/remote/1460000020362458?w=1240&h=911" alt="" title=""></p>
<h2>7. 总结</h2>
<p>GitHub 上优秀开源项目真的是一大堆,授人以鱼不如授人以渔,请大家自行主动发掘自己需要的开源项目吧,不管是应用在实际项目上,还是对源码的学习,都是提升自己工作效率与技能的很重要的一个渠道,总有一天,你会突然意识到,原来不知不觉你已经走了这么远!</p>
<p>推荐阅读:<a href="https://link.segmentfault.com/?enc=0TsViXVt%2F6b%2FpiJKa8RdXA%3D%3D.r6dzo2GO3hfVkv0XlrJloAICFIetjmkmrRydZVb4z%2B4%2F%2FHXHyzDKKSr9XP81INyAiuuzmqlMNlB%2FchDaljYb8A%3D%3D" rel="nofollow">重磅:硬核前端面试开源项目汇总(进大厂必备)</a></p>
<p>觉得不错,不妨随手转发、点赞,都是对我这个良心笔者莫大的鼓励!</p>
<p>参考文章:<a href="https://segmentfault.com/a/1190000010022776">从 0 开始学习 GitHub 系列之「如何发现优秀的开源项目?」</a></p>
<p><img src="/img/remote/1460000020362459?w=900&h=383" alt="全栈修炼" title="全栈修炼"></p>