我所理解的前端

入坑前端到今天也将近两年半了,这两天突然想到了第一次面试时面试官的一个问题-------你怎样理解前端的工作?

对于当时我一个小白而言完全是胡说一通,词不达意,搞得面试官一脸懵逼,现在想想那可能就叫尬聊吧……时隔两年在不断爬坑中对这个问题有了自己新的认识,今天趁着上午没什么事情,写下这篇博客,想到哪写到哪,谈一谈我所理解的前端。

技术方面:

第一阶段(新手村)

一个前端初学者必须所掌握的核心技能HTML,CSS,JavaScript,这三项是前端最底层的技术支持了,如果你看几年前的回答应该还会有一项jquery,但我个人觉得现阶段的前端圈jquery可以不作为必备技能,虽然Jquery对新人很友好,但现在mvvm框架满天飞Vue, Angular,React三分天下,用起来要比直接操作dom的jquery舒服很多,当然在这个阶段是打基础的阶段框架,类库什么的可以往后靠。原生Js永远都是重中之重,只会用框架不懂底层原理永远达不到精通,推荐红宝书Javascript高级程序设计,吃透红宝书打牢基础再去学习其他框架,妈妈就再也不用担心你的学习。接下来还有一项额外的技能PhotoShop,要知道ps可以不用去做,但必须要会,而且在一些小公司里UI只会丢给你一个PSD,没有什么Sketch之类的东西,也没人帮你切图,这些都需要你自己来处理,所以ps是额外的必备技能。

第二阶段(副本开启)

进入告诉成长阶段,开始打怪升级,这个阶段的时间持续最长,在这期间你需要爬无数的坑,积累各种失败的经验,一关一关的往下刷,关于HTML和CSS你需要知道各种UI框架的使用,如BootStrap,ElementUI……,关于不同图片的格式标准,浏览器的兼容性,移动和pc端的区别,响应式布局,flex布局,栅格布局,对设计审美的提升…等关于提高你页面开发效率的各种技能,UI框架这一块比较杂选自己感兴趣的看看就好。

Js方面这时候已经可以开始挑一种主流框架进行学习了,前面提到的Vue, Angular,React都是不错的选择, 并且对面向对象编程,对象封装,原型继承,闭包,同步异步差异,等一系列的js进阶知识应该进行深入了解,同时对es6标准也需要了解,可以参考阮一峰老师的es6入门,书中包含了es6的各种新特性,默认参数,模版表达式,多行字符串,拆包表达式,改进的对象表达式,箭头函数 =&>,Promise,块级作用域的let和const,class类,模块化等常用特性.可以做到自己封装组件,编写维护性高,可读性强的代码. 而且在平时需要多看别人写的代码,汲取别人的优点,并且阅读大量的技术文献,最重要的是要总结自己的问题,比如说你遇到一个bug,迷迷糊糊的就解决了,下一次你又遇到相同的问题,这个时候有没有对之前问题进行总结的效果就看出来了.

第三阶段及更高级

了解各种设计模式,看得懂各种框架源码,前后端通吃,可以自己手写js框架...好吧,我还没到这个阶段就不写了..............

在工作中

一个完整的的工作流程应该是:

立项--à项目研讨--à需求确认--à后台开发--à产品出原型--à设计师拿到原型进行UI设计--à前端开始开发--à测试提bug--à改bug--à重复n次--à产品验收

上面只是一套笼统的流程,至少在前端这方面我们需要做的有梳理业务逻辑并理解业务逻辑,这对你后面的开发很有用处,同时根据需求进行应用技术的选择,项目结构的划分,需求模块的划分,完整项目的搭建,当然现在有很多可以自动化构建工具可以节省你很多时间, 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要,但新手入门还是应该去尝试自己一点一点的去构建一个项目,等你多做几个项目觉得每次都这样重复好烦,自然而然的就入了自动化构建的坑,毕竟这样能让你更深刻的理解,为什么要使用自动化构建……比如我们主栈是vue,我们最常用的就是vue-cli,自动化工具有很多选择如Bower、Gulp、Grunt、node、yeoman,我们应该根据需求选择最适合自己的去研究。

沟通

前端是团队里最应该学会沟通的人,界面有问题需要和UI沟通,数据有问题需要和后台沟通,功能有问题需要和产品沟通,测试的时候给你提bug你还需要和测试沟通……emmm心累

沟通ui

前端是最接近用户的人,用户对一个网站,软件最直观的感受是反映到前端的,可能你会说最直观的不应该是UI设计师么,你要知道我是前端我为设计师代言!!!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdzfw.html