11个前端必备问题复盘

那那

今天我们来聊一些关于技术的思考和解答,  作为技术人, 每年总得读5本技术书, 才能对得起日夜操劳的自己.
这篇文章阅读时间5-10分钟, 希望这段旅程, 对大家有所收获.

• 关于技术的思考和解答
  
  
  
  • 前端组件拆分的依据究竟是复用性还是可测试性？
    
  • 初中级前端，每天晚上坚持做些什么，可以让一年后的自己受益匪浅？
    
  • Web 前端自学可以么？
    
  • 前端如何学习和实际操作才能通过布局把页面写好看一些？
    
  • 前端项目中的图片资源越来越多，怎么处理呢？
    
  • 前端开发代码越写越臃肿该怎么办？
    
  • 前端有哪些值得深入研究的小方向？
    
  • 用原生 JS 开发时，你遇到最头疼的问题是什么？
    
  • 怎么学习前端开发？求推荐学习路线？
    
  • 前后端同构和模板渲染的区别是什么呢？
    
  • 让程序员越来越优秀的底层思维
    
  
  

接下来我们开始正文.
1. 关于技术的思考和解答

1.1 前端组件拆分的依据究竟是复用性还是可测试性？

前端组件拆分我们团队一般会遵循如下原则：

• 跨页面多次使用的组件，一般放在公共组件里，一般src下的一级目录components里，封装公共组件一般会组件内部使用的props方便父组件使用。公共组件更多的是依据复用性，这样我们对组件写测试用例也比较方便。
  
• 对于只能在某一页面内使用的组件，我们一般放在页面内的组件文件夹中，这样可以方便子路由下的页面局部复用。比如我们在pages下有A目录，A目录对应A页面，那么我们可以在A目录下建立components，存放页面内部公共的组件，通过暴露属性和方法供页面传递和调用。这样是不需要使用redux的。
  
• 一般我们组件都不建议单独再使用redux，因为这违反的组件设计的原则，这样会增组件的副作用，对后期维护也很不方便。所以一般建议使用props来传递，更常用的做法是使用hooks来做，将组件粒度按照以上一二点所述的原则进行拆分。
  

1.2 初级前端，每天晚上坚持做些什么，可以让一年后的自己受益匪浅？

前端进阶这块很值得思考，关于如何从初级前端工程师进阶到能独挡一面的高级工程师，我花了两年时间，具体可以参考如下方法:

• 每天晚上花30－60分钟总结一天的工作，思考自己有没有写很多重复的代码，如何改进代码，如何抽离出公共的代码让后期的工作效率更好？
  
• 每隔1－3天学一个新的前端知识点，并坚持写学习总结。
  
• 坚持巩固基础，定期做js算法题，定期掌握一个设计模式。
  
• 学习数据结构与算法。这块是前端进阶必备知识。
  
• 抽出一段时间掌握前端工程化的知识，比如webpack,gulp,rollup, vite等，这块是前端架构的基础。
  
• 慢慢的学习nodeJs,了解后端内容。这样可以让你对前后端协作有个更好的认知。
  

坚持半年到1年，你的水平一定会飞速的发展。
1.3 Web 前端自学可以么？

web前端自学的话完全没问题，但是要付出额外的努力和正确的学习路径。一般从入门到做项目至少2个月。综合笔者多年的前端从业经验，总结出如下学习路径：

• html,css(css3)基础。时间一般在2周－3周，期间需要注意多练习，多做一些代码的梳理和实战。目标是能写出基本的静态页面。
  
• javascript基础。时间一般在2－3周，需要掌握基本的js逻辑操作，循环，数据结构以及对象的基本用法。目标是能写出基本的js逻辑，比如数组去重，轮播图动画，倒计时效果，定时功能等。
  
• 基本框架的使用以及javascript深入。时间一般在2－4周，这块前期建议先学习vue，因为学习成本比较低，又能了解到主流框架的设计思路和实现方式，对数据驱动会有更多的想法，与此同时还能对js的对象，数据类型如数组，对象，深拷贝，浅拷贝等有一定的了解。学习目标是可以利用vue开发基本的应用程序，并会使用第三方UI组件如element。
  
• 前端工程化相关的知识，比如webpack，gulp，前端项目管理git或svn的用法。时间一般在1－2周，时间虽然短但是需要我们充分了解他们的使用背景和优缺点。目标是可以修改项目脚手架，会用git提交自己的代码并熟悉分支管理策略。
  
• 熟悉小程序开发，node的基本使用。这块属于前端进阶的一部分，需要我们掌握一定的前端知识和后台知识。周期在2－3个月，目标是熟悉小程序基本的开发流程，并能独立负责某个模块的开发，掌握node的几个核心api并知道如何使用。
  
• 前端算法，数据结构，设计模式的学习。这块不是必要但是对后期发展很有帮助。
  
• webrtc, 跨平台技术flutter, react native , weex 等有一定的了解。(高级岗位)
  
• 熟悉前端基本组件库，类库的构建，发布，管理。(前端架构)。并能基于项目环境搭建适合的脚手架。
  

关于前端各个领域的知识笔者也在专栏《趣谈前端》有过很多项目的教程，可以参考了解一下。总之，多努力，相信自己才是最棒的.
1.4 前端如何学习和实际操作才能通过布局把页面写好看一些？

写页面其实很简单，掌握以下几点就好了：

• 掌握3种常用的css盒模型，如border－box, content－box，padding－box等。
  
• 4 种布局方式，如百分比布局，浮动布局，flex布局，grid布局。
  
• 理解BFC(即块级格式化上下文)的用法和实现。
  
• css3媒介查询，过渡(transition),动画(animation)，以及常用的样式。
  
• 浏览器样式兼容性。
  
• 熟悉 css 伪类和伪对象，这会让你写 css 更强大。
  
• 熟悉h5常用标签及语意化实现。
  

掌握了以上内容，90%的页面需求都能迎刃而解。
1.5 前端项目中的图片资源越来越多，怎么处理呢？

对于项目中图片资源不断增多的情况，为了提高打包速度和体积，针对你的情况，可以使用一下方法来优化：

• 图片资源单独打包，让业务代码的打包和图片打包并行，维护好相互之间的引用关系。
  
• 对公共库文件和框架使用webpack的dll，可以避免每次都打包不变的库。
  
• 将webpack和gulp结合使用，gulp专注于处理静态资源。
  
• 由于有多个活动页面的入口，我们可以使用环境变量，利用传参的方式控制只打包某一个入口的活动页面。当然这块也可以用shell脚本来实现。这样就不用每次都打包一遍所有的活动页面。
  

5.采用webpack多进程模式，这块有专门的插件可以使用，原理也是使用node的多进程模块。
6.使用oss或者其他对象存储服务器，将静态资源存放cdn,可以提高资源加载速度。由于浏览器http在同域下一次只能并发4-6条请求，用cdn则可以突破这个限制，加快首屏渲染速度。
1.6 前端开发代码越写越臃肿该怎么办？

代码越写越臃肿笔者总结主要的原因有以下几种原因：

• 前期没有考虑可扩展性，导致很多代码更多的采用面相过程式编程。这种情况的解决方案是写之前多思考一下，代码是否可复用，是否可以把逻辑抽象出来作为工具函数？这种建议多考虑用面向对象或者面向切面的方式编程。
  
• 产品需求不断变更，导致相关逻辑无法复用。这种情况的解决方案可以多和产品确认需求，团队形成一定的约定，在方案确定后再做需求。或者可以使用单例模式和单一职业原理，将业务逻辑解耦，这样就能在一定程度上避免牵一发而动全身。
  
• 在写代码时没有用到更优雅的方式解决问题。这种情况主要和程序员的编程经验有关，比如遇到很多条件判断时可以用 switch,三目运算和对象的方式去避免 if else,多采用函数式编程来降低代码复杂度和可读性，规范数据结构，让其更可复用。
  

笔者之前也重构过很多项目的代码，也当过接盘侠，所以建议可以多看看设计模式和函数式编程的知识，在写代码前多思考，不要一股脑的直接写代码。
1.7 前端有哪些值得深入研究的小方向？

前端研究热门方向：

• 数据可视化
  
• IOT前端架构
  
• 跨平台技术，flutter, weex, rn等
  
• 前端智能组件技术
  
• WebRTC实时音视频技术
  
• Serverless 技术
  

7.跨端小程序，小游戏

• Css 环境感应技术
  
• javascript 面向硬件编程
  
• 同构架构
  
• web3.0
  

1.8 用原生 JS 开发时，你遇到最头疼的问题是什么？

首先，框架的出现是为了简化我们使用javascript的逻辑，以一种更简洁，更高效，更工程化的模式开发我们的应用。
我们从几个金典的javascript框架和库，来分析使用原生javascript将会遇到的问题。

• 首先从jquery开始。jquery是前端界出现的比较早，也是最经典的js库之一，它的出现极大的简化了我们操作dom的难度，并且提供了不同浏览器之间dom和js的兼容，使得我们不用再写一大堆兼容性代码来兼容不同浏览器。另一方面，它使用原型链和闭包等方式，让jquery本身拥有了更多的扩展性和作用域之间的隔离。基于jquery的插件市场应孕而生，我们业务中出现的很多问题和需求，都可以在插件市场中找到，不需要我们繁琐的再去人工手写一堆代码。jquery的生态链一步步扩大，意味着我们手写js业务的场景越来越少，我们更加关注业务场景而不是具体的交互的实现，更加适合团队协作和高效开发。
  
• vue/react/angular等数据驱动的框架出现。(这些框架笔者都有应用于公司的不同系统下，虽然目前主要用react，因为它有更高的灵活性)。它们更多的是提供一种工程化规范，基于一定的设计模式，来让我们更灵活，更高效的开发复杂应用。我们只需要关注数据之间的流转，极大的避免了频繁操作dom的场景(虚拟dom)。其底层使用的设计模式如观察者模式，原型继承以及事件代理机制，很值得我们学习。
  

还有很多优秀的库，大部分都是为了让我们操作javascript更加高效和简洁，比如lodash, rxjs等，所以我这里总结一下原生javascript写代码的一些弊端和优势：

• 面向浏览器编程，需要写很多兼容性代码
  
• 操作dom更繁琐，复杂交互需要频繁操作dom，且代码不够友好。
  
• 可扩展性和可维护性没有保证。
  
• 团队协作困难。
  
• 开发效率低下。
  

不过原生还是有很多优点，如果你对js很熟悉的话，也可以自己实现一个类库或者框架，原生操作对于简单的场景性能还是高的。笔者在《趣谈前端》专栏也有很多性能和工程化的探索，可以探索一下。
1.9 怎么学习前端开发？求推荐学习路线？

学习前端需要分阶段,通过阶段性的学习才能快的掌握前端技能.
前端基础是第一步,笔者从初学前端到成长为一名架构师,也经历了很多波折,唯一不变的就是坚持,成长,与反思. 前端学习的方法很重要,笔者特地总结了学习前端的三个阶段,如下图所示:


每个阶段都有不同的技术需要理解和掌握, 这些技能的掌握不能仅仅通过书籍和理论的学习,更多的是要实战, 前端框架如react, vue这些,要想做项目和理解它,一定要深入项目中去,去结构化,双向的去学习.比如项目中遇到的问题,通过自己的探索和查找,可以对这块知识有更好的理解,或者自己做一个独立的项目,发布到github上开源,这也是一种成长,笔者就开源了很多插件和全栈项目到github,通过和前端工程师的沟通,自己也收获了很多知识.
所以做前端或者学前端,一定要有正确的方法论和格局,多去交流, 多实战,才能让自己知道哪些应该研究, 什么样的学习路径是自己需要的.希望通过笔者对前端学习路径的总结,能帮助到还在迷茫的各位.
2.0 前后端同构和模板渲染的区别是什么呢？

要想说明前后端同构和模版渲染的区别，首先笔者先解释一下两者的概念。
1.前后端同构

指的是前后端使用共同的javascript，在页面首次渲染时通过nodeJs直接返回html给浏览器，强调的是前后端共有的一部分代码。 前后端同构核心思想就是把一部分代码拿到服务端来执行，以此来实现在不同端（浏览器/服务器）复用代码，并能分而治之。我们可以在服务端来请求数据并渲染成html字符串直接返回给浏览器端，在浏览器端可以直接渲染html并且将权利转移给浏览器端执行后续富应用的能力。其好处就是提高首屏渲染性能和SEO，并且服务端专注于首次渲染收据，客户端专注于交互。但是其也有很多直接的缺点，就是虽然能复用部分代码，但是由于服务端和浏览器端环境的不同，我们仍然需要维护不同的代码来处理不同环境下的交互和业务逻辑。另一方面如果一个页面需要调用不同接口获取不同数据，比如可视化图表和用户数据，那么完全等到服务器拿到数据后在渲染反而会增加首屏渲染的时间。所以类似React/Vue的服务端渲染方案是一种同构的尝试，但是仍然不是一种通用的方案，需要根据具体需求来采用。

2.模版渲染

对于node的模版渲染，比如ejs，jade等模版引擎，更像是传统PHP，Java后端渲染，虽然能达到首屏优势，但是对于富应用和复杂应用来说，模版语法显然不利于维护和管理，并且编写成本较高。对于博客或者简单型/展示型方案来说可以一试。
目前的前端渲染方案，仍然是主流的开发方式，我们可以通过爬虫和静态模版来解决SEO的问题，对于首屏渲染，也可以通过懒加载和分块来进行一定程度的优化，但是大方向笔者还是更倾向于真正的同构技术。
2.1 让程序员越来越优秀的底层思维

灰度思维

判断一个人成熟与否的一个标准就是：面对事情的时候不要以非黑即白的简化思维，而是用灰度思维(考虑事情的第三种可能性)去思考。
双赢思维

从长远来看，输或赢的结果，往往是两败俱伤。 只有双赢模式，让双方达成共赢, 才是长期相互依赖环境中唯一可行的交往模式。
奥卡姆剃刀

如无必要，勿增实体。
叔本华说：“一个明智的人就是一个不会被表面现象所欺骗的人，他甚至预见到了事情将往哪一方向变化。”
生活中，只有看清事物的本质，找到问题的根源，才能彻底而有效地去解决问题。
卢维斯定理

谦虚不是把自己想得很糟糕，而是完全不想自己。
生活中，不少人会陷入这样的误区：以为谦虚就是，把自己想得或者说得很糟。
但这种所谓的谦虚，并不是真正的谦虚，充其量只是一种彩色谎言，作为特定环境下社交的润滑剂。
真正的谦虚，不是不自尊、不自爱，也不是自卑，而是刻意地忘记你是谁，你的资历深浅，专注做一个倾听者、分析者。
我们要有意识地进行视角切换，调用自身的元认知，以旁观者来看待自己，从而不过多地受自我本能的干扰。
复盘思维

复盘，并不是要求我们一定要每一次都将过去的事情重做一遍。
它更多的是一种思维上对事件的重现，通过对过去的思维和行为进行回顾、反思，从而发现问题，吸取经验，最终实现能力的提升。
好了, 技术先分享到这里, 如果大家有其他问题, 可以在和我反馈, 后续陆续做一些解答.
更多推荐