前端从三四年前的无人问津到现在众所周知，有越来越多的人要涌入前端行业。起初很多人都觉得前端门槛低容易学想来分一杯羹，现如今初中级前端工程师有很多，高级前端工程师还是比较欠缺的。
要在众多前端工程师中脱颖而出，有两点很重要，扎实的基础和前端编程思维。这听着有点虚，我直接举例子来说明。
image
CSS
image
css作为前端的基础之一，看起来比较简单，基本只是调整一下颜色、位置，但是深入研究它的原理并巧妙应用，css也能有不少亮点。
随着现在结构越来越复杂，css的实现也需要一定的设计，防止一个小的变动让整个界面的样式连着变动，甚至导致浏览器的过多重流重绘影响性能。
image
由于图片宽度用百分比的形式展示，高度是通过宽高比撑开的。上图可以看到，在打开页面的时候，有一个闪烁加载的过程，只有图片出来了才可以撑开，这时候已经导致了页面的重流，浏览器需要重新计算元素应该绘制的位置，不仅影响用户体验，还影响页面性能。
image
那么这时候就会想到padding百分比是相对父元素宽度来计算的，就可以通过padding来针对宽度以一定比例将元素原有高度撑开，上图padding-bottom注释打开可见下图，页面没有闪烁过程，也不会因为后续的加载让浏览器产生重流。
image
当能够从尝试样式布局去实现需求，成长到拿到布局需求就知道使用什么样的属性去实现这个需求，清晰的知道使用的属性对于浏览器计算绘制的原理，那么在前端道路上你已经开始慢慢的进阶了，后续的则是针对不同的场景，思考更多不一样的样式解决方案。这就是我开头提到的前端思维。
image
JavaScript
image
现有的热门JavaScript框架（vue/react/angular）已经比较成熟了，但是其实它们也是由扎实的基础知识搭建起来的，那么怎么更好的去理解框架原理和夯实自己的JS基础呢？下面拿闭包来举个例子。
闭包，就是一个能访问到其他函数内部变量的函数，那么相信大家基本都见过下面这个应用场景：
image
通过闭包读取局部变量到index，这样才能正确输出想要的01234，如果直接读取全局变量i，则只会输出55555，但是这种场景其实已经有很多种方式可以解决了，比如使用ES6的let的块级作用域或者使用setTimeout的第三个参数：
image
第三个参数会作为参数在定时器执行回调函数时传入，那么闭包在日常应用中究竟有什么样的用途呢？
image
这是一个典型的计数器控件，通过返回的4个闭包（甚至可以更多）来对计数器进行操作，计数器本身可以多次reset使用。
在JavaScript中还有很多这样类似的基础知识可以直接在实际应用场景中结合起来使用解决需求问题。
我们在面试中甚至在工作中，只有结合真实场景来展现相关的基础内容，才能更加清晰易懂，才能真正向面试官展示出你对相关内容的掌握程度。
image
前端进阶方法
image
对于前段进阶而言，扎实的基础和编程思维缺一不可，结合近期的一些热门方向，建议分以下四个专题进行基础夯实、能力突破：
image
多年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun：296，212，562，即可免费获取，学习不怕从零开始，就怕从不开始。
网友评论