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

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

技术方面:

第一阶段(新手村)

一个前端初学者必须所掌握的核心技能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设计师么,你要知道我是前端我为设计师代言!!!

和UI的沟通,在工作中我们不应该是被动的实现UI的设计,而是应该合理化的提出自己的想法,不然日后返工浪费的是双方的时间,比如最开始刚来公司的时候,项目里对一些小图标的图片还在使用雪碧图,但很明显随着浏览器的支持越来越好,svg和字体图标慢慢占据主流,我在阿里巴巴图标库建了一个项目把UI也拉了进来,UI把他用到的图标直接添加进项目,前端直接从项目生成字体图标引入到项目,绝逼要比自己慢慢切图,扣图标,合并雪碧图要省事的多,而且用起来也特别爽,想改颜色就改颜色。再比如你需要做一个图表,用到了echarts,你完全可以让UI基于echarts去设计样式,而不是让他在那里自由发挥,因为你永远不知道设计师的脑子里装了多少创意,这样节省的是两个人的时间,不会出现他做好样式而你实现不了的尴尬。

沟通产品

一般来说程序员和产品经理之间是最难沟通的,只有相杀没有相爱,毕竟子曾经曰过:’这个需求很简单,怎么实现我不管,明天上线!’,

下面引用lensuntop的一篇文章,我觉得写的非常好

记得有一个段子：

产品汪：程序猿，我们来实现一个紧急需求？

程序猿：请说。

产品汪：请根据手机壳的颜色，来实现APP启动的颜色。

程序猿已经在风中凌乱。。。

从这个段子中多少能折射出产品和技术之间的各种激情“火花”。产品经理眼中简单的需求，而在我们看来是不可能实现的。而程序员也无法理解产品经理为什么要实现这样的需求。那么，站在一个程序员的角度应该怎么样和产品经理沟通呢？

1.深刻理解需求，清楚需求的动机和缘由

我们程序员一定会在问，产品经理为什么想要根据手机壳的颜色来动态实现APP启动时的颜色。既然想听解析，那就先别急着说出自己的结论——技术上无法实现！既然有疑问，那就先将自己的疑问解决。

2.换位思考

产品有产品的角度。作为程序员我们追求的是什么？逻辑正确，更快，更容易扩展。产品追求的是什么？说实话，我自己没有深刻去思考过这个问题。站在一个惯性的角度思考可以想到：一个产品为什么存在，他的存在能解决什么问题，他的用户体验好不好。这些才是决定一个产品的核心价值。毕竟工作性质影响了一个人的思维逻辑，所以这时候，我们能站在一个产品的角度去思考每一个需求，便显得尤其重要。

3.不放过每一个细节

作为程序员想必对这句话都是深深认同的。因为一个标点符号或者类型的错误，会导致一个自己意想不到的bug。产品经理在设计一个产品的时候，都是从大方向去想问题的，大方向没有错就行了，细节脱离不了大方向。这是他们想的。但是对于程序来说，却万万不能。因为一个细节的逻辑往往决定了整个大方向。举个例子：有一个需求，用户的作品需要提交审核，经过审核才可以让所有人看到。当产品经理交这个需求给你的时候，你能察觉到什么问题了吗？这里面有几个细节：1.用户提交审核后，用户可以不可以再编辑作品；2.作品是否会多次审核；3.需不需要记录审核历史；4.用户作品是否需要有版本的控制，如要产生版本，版本又是如何产生的；5.审核通过后，用户可以不可以再修改作品，若不可以，那么是不是其他人就看不见用户作品……话说回来这只是一个简单的逻辑需求！但是涉及的细节却是太多太多。我们往往在编码的时候写不下去，就是因为给的需求太模糊，没有细化到点上。

4.换一种方式说“不能实现”

不能实现，这句话想必我们都是经常说。但是直接对产品经理说，没准会让产品经理抓狂。因为我们会让他们觉得他们提出的任何需求，我们都不能实现。但是事实并非如此，因为不能实现是有条件的，比如时间不够。所以我们要先认同产品经理的观点（“能实现”），再提出自己实现他的需求的条件是什么。因为现实产品经理也不会经常犯傻，经常提出一些不合理的需求，但是面对需求，我们需要评估实现的时间，而且这个时间不是那么容易评估准确的。

5.当遇到不合理的需求时，积极寻求替换方案

就拿段子里面的需求来说，让我们提供几种APP皮肤给用户进行选择，肯定比原先的需求容易实现，而且也更加符合人性化。说另外一个故事，有家智能家居的公司，要实现厨房水龙头，根据人声说水温几度，就可以达到几度。换个角度想，你会感觉出40度和45度水的温差吗？而且根据人声判断，这又涉及到声音识别系统，你要兼容多少种语言？其实我就觉得左右切换就挺智能的，完全没有必要搞的那么复杂。所以程序员要找到一种更好更容易实现的方法。别给产品经理的想当然自乱阵脚。

6.必须遵循文档精神

在开发的时候，我们往往会另外与产品经理进行细节化的讨论。但是这种讨论结果，我们并没有记录到产品原型里面或者需求列表里面。但是过了几个月后，我们自己往往会忘记我们当初为什么会讨论出这样或者那样的一个细节。所以一切的需求必须是根据的。从另一方面来说，也保障了双方的利益，别等到出问题的时候，不知道是谁的责任，而在这一方面，程序员往往很吃亏。

6.对自己的程序有一颗艺术的心

有人说过，当需求影响到代码扩展性的时候，会首先砍需求，而不是改代码！在一定程度上，我是认同这句话的。在我看来，程序是一件思想上的作品，要达到艺术的境界，从功能、体验和逻辑上都必须是合情合理的。就像一件艺术品一样，看起来是浑然天成的！因为一件看起来很“丑陋”作品，一定是不符合人的逻辑和习惯的。

写到最后，感觉绕回到程序员自身了。其实跟产品经理沟通，最重要的是要明白到：我们是在解决问题，而不是在制造问题！主要抱着这个核心，一切问题迎刃而解

一般来说和后台沟通没那么多的麻烦,约定好规则后,一般来说你们是通过api来沟通的,但当你调试接口时,出现一些未知的,你感觉不是自己问题的时候,及时的沟通后台是最明智的。

责任划分

相信大家在这一点上都深有感触,因为前端是最后一关,所有的需求都是在前端手里变成一个具体的产品的,这样也就导致你很容易变成背锅侠,导致项目延期的情况有很多种,设计图不及时,后台数据出现问题,产品临时改需求,如果你不能证明是这些问题导致项目延期,这个锅你必背无疑,唯一的方法就是–à口头确认–à发email到责任人确认–à通知上级,千万不要觉得这个麻烦,出问题的时候会比这个更麻烦的,

写不动了,以上就是个人爬坑后对前端的一些理解(ps:虽然我还在坑里),也算对自己工作的一个总结吧,写的比较絮叨,不喜勿喷,最后祝大家2018升职加薪,找到女朋友!!!