-
Notifications
You must be signed in to change notification settings - Fork 94
/
Copy pathfaq.html
22 lines (20 loc) · 17.4 KB
/
faq.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>喵喵喵？？ | 被删的前端游乐场</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="Just playing around">
<link rel="preload" href="/front-end-playground/assets/css/0.styles.a0b3413c.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.f21f6395.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.e5aa9928.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.ab142917.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/39.54aa5ca4.js" as="script">
<link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a0b3413c.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/angular/" class="nav-link">Angular学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/angular/" class="nav-link">Angular学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="喵喵喵"><a href="#喵喵喵" class="header-anchor">#</a> 喵喵喵？？</h2> <h3 id="我是个小白-没有前端基础-要怎么学习呢"><a href="#我是个小白-没有前端基础-要怎么学习呢" class="header-anchor">#</a> 我是个小白（没有前端基础），要怎么学习呢？</h3> <br> <ol><li>可以翻看<a href="/front-end-playground/front-end-basic/#学习资源">前端基础-学习资源</a>，根据这些网站提供的教程来学习。</li> <li>建议边看边操作，可以结合<a href="/front-end-playground/front-end-basic/#练习空间">前端基础-练习空间</a>中的 freeCodeCamp 进行一步步学习，也可以直接选择想练习的课程来进行。</li> <li>查看<a href="/front-end-playground/front-end-basic/front-end/front-end-1.html">前端入门系列</a>，补充对前端的一些认识和理解。</li> <li>开始尽情地撸代码吧，根据自己的需要，可以搜一些在线的资源来修改，也可以自己根据其他教程（Vue、小程序等）来完成一个项目。</li></ol> <blockquote><p>Tips:</p> <ol><li>很多的报错、API、以及遇到一些不知所措的问题，可以尽情谷歌噢。如果你家的梯子不方便，可以去 <a href="https://cn.bing.com/" target="_blank" rel="noopener noreferrer">bing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 上搜噢。</li> <li>一些调试的技巧，可以找一些视频或者教程来看，这边除了<a href="/front-end-playground/front-end-basic/front-end/front-end-7.html">前端入门-代码调试</a>这一节内容，别的需要自己去找噢。</li></ol></blockquote> <br> <h3 id="我已经掌握一些基本的前端语法-要怎么提升写代码的能力呢"><a href="#我已经掌握一些基本的前端语法-要怎么提升写代码的能力呢" class="header-anchor">#</a> 我已经掌握一些基本的前端语法，要怎么提升写代码的能力呢？</h3> <br> <p>一句话：多练！</p> <p>至于怎么练习呢，首先前端它可以是一个很有成就感的事情，例如我在这个网站中不停地塞各种猫猫的时候，是开心地飞起的。那要抓住这种成就感，你可以：</p> <ul><li>根据自己喜欢的画风，设计一个博客，然后搭建起来</li> <li>写一点好玩的交互、动画，或者小游戏</li> <li>找自己喜欢的网站，试着自己写出一个一样的</li></ul> <p>对于 CSS，只能熟能生巧，当然你可以搭配一下一些盒子模型、元素堆叠和定位、文档流等原理来理解（可参考<a href="/front-end-playground/front-end-basic/front-end/front-end-3.html">前端入门-HTML 和 CSS</a>），可以帮助你更好地记住这些技巧。</p> <p>对于 javascript、DOM、BOM、浏览器原理和机制这些，我能提供的方向也都写在了<a href="/front-end-playground/front-end-basic/front-end/front-end-1.html">前端入门系列</a>中了，剩下的只能靠你们自己啦。</p> <br> <h3 id="我已经可以熟练地写项目-但是觉得自己每天都在做重复的工作-可以怎么深入学习呢"><a href="#我已经可以熟练地写项目-但是觉得自己每天都在做重复的工作-可以怎么深入学习呢" class="header-anchor">#</a> 我已经可以熟练地写项目，但是觉得自己每天都在做重复的工作，可以怎么深入学习呢？</h3> <br> <p>一句话：多思考！</p> <p>我也经常写差不多的项目，但是每一次我都能自己找到可以优化、比较有意思的地方，你也应该这样。</p> <p>前端除了做一些工具、开源库，其实前端的选型、架构、项目设计也是很重要的一个技能。这样的技能除了看别人的一些整理和总结，更多其实还是需要自己去思考，不要贪多嚼不烂。我自己也有一些稍微好玩的思考，可以查看<a href="/front-end-playground/front-end-basic/understanding/build-application.html">前端深入理解系列</a>，如果你也有好玩的想法，欢迎一起来讨论~</p> <br> <h3 id="很多面试会问一些原理、抽象设计-但是平时很少接触底层的东西-要怎么提升自己呢"><a href="#很多面试会问一些原理、抽象设计-但是平时很少接触底层的东西-要怎么提升自己呢" class="header-anchor">#</a> 很多面试会问一些原理、抽象设计，但是平时很少接触底层的东西，要怎么提升自己呢？</h3> <br> <ol><li><strong>首先，还是那句话：多思考！</strong></li></ol> <p>框架和一些很热门的开源库为什么会火，因为解决了很多开发的痛点。那么，你想要了解的这些工具，它的痛点背景是什么呢？解决方案又是怎样的？为什么要选这样的方案，是否有可以优化的地方呢？</p> <p>实现其实对很多程序员来说都不是难事，而我们和大神们的区别在于，他们可以想到这样的痛点，同时还能做出方案对比、方案选型、代码设计，做出来其实是最简单的一部分而已。</p> <p>我们做的很多时候是业务代码，但是业务代码就没有可以进行方案设计、选型、抽象的地方了吗？不，只是我们自己放弃了去做这样的事情，多思考吧，你会发现你的未来大不一样。</p> <ol start="2"><li><strong>其次，学会写。</strong></li></ol> <p>你得把每次想到的、学到的，都记录下来。一个人的记忆力是有限的，但我们有容量超大的硬盘可以帮我们记住。</p> <p>不要怕写得不准确，也不要觉得这么简单写下来意义不大。既然会有疑问，意味着未来的你会遇到同样的疑问，而其他人也会遇到。写下来，下次想起来时可以翻开看，同时还能以新的视角来纠正之前的内容。</p> <br> <h3 id="我觉得前端很容易到达天花板-我该转行吗"><a href="#我觉得前端很容易到达天花板-我该转行吗" class="header-anchor">#</a> 我觉得前端很容易到达天花板，我该转行吗？</h3> <br> <ol start="2"><li>其实，我个人觉得天花板跟职业和岗位关系不大，所谓的天花板更多是个人的天花板。</li></ol> <p>相对于抱怨环境，提升自己更重要。怎样提升自己呢？还是那句话，多思考。首先，你要想清楚自己的职业规划，如果你刚毕业还不是很清晰，没有关系，你喜欢什么总该知道吧？找准自己的兴趣，然后可以以“又能做喜欢的事情，又能赚钱”作为目标，看看自己缺什么，然后慢慢补吧。</p> <p>千万不要急，这个浮躁的社会，最忌讳急。</p> <p>一个人的潜能，总是跟爱好又很大关系的。所以找准你的爱好，想办法把它变成能让你每天相处得很开心的一份工作吧。不要相信“把爱好变成工作就会失去热爱”这种话，那只是因为不够热爱而已。</p> <ol start="2"><li>根据自己的兴趣，可以将技术栈往外扩一些（后台、运维、设计、交互都可以）。</li></ol> <p>如果只会前端，其实局限性会比较大（像我，切图不会切、设计又丑的不行、后台又不会写、机器运维更是不怎么了解）。这种情况下，不管是从与合作伙伴协作、讨论需求的时候，背景知识的欠缺也会使得沟通不顺畅。</p> <p>更深一些的想法，程序设计最终是相通的，而程序设计与我们的生活工作其实也是相通的。学习一些其他的思维模式、结构设计，对深入前端领域也好，对视野和思维的拓展也好，都是很不错的。嗯，我也在学，也整理了一份<a href="/front-end-playground/front-end-addon/">前端的进击系列</a>。希望和你们一起共同进步呀。</p> <h3 id="最后-祝愿你们都能找到一份喜欢的工作-上班开心地干活-下班和喜爱的人一起-每天都一样幸福。"><a href="#最后-祝愿你们都能找到一份喜欢的工作-上班开心地干活-下班和喜爱的人一起-每天都一样幸福。" class="header-anchor">#</a> 最后，祝愿你们都能找到一份喜欢的工作，上班开心地干活，下班和喜爱的人一起，每天都一样幸福。</h3></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/faq.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <!----> <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-826" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
<script src="/front-end-playground/assets/js/app.f21f6395.js" defer></script><script src="/front-end-playground/assets/js/2.e5aa9928.js" defer></script><script src="/front-end-playground/assets/js/3.ab142917.js" defer></script><script src="/front-end-playground/assets/js/39.54aa5ca4.js" defer></script>
</body>
</html>