前端开发的三个境界,你属于哪一个?

转载 2017年12月26日 00:00:00

第 1 重境界:把事情做成

把事情做成是公司对员工的基本要求,绝大多数入门同学就处在这个境界,这个境界的人可称为程序员(Programmer),对于 Programmer 通常需要告诉他做什么、怎么做,他所需要的是执行力和基础技能,这里的技能包括:基本的编程技能,至少会一门编程语言,对这门语言的熟悉程度至少能够让他把基本需求解决。具体到前端领域,对 Programmer 的要求就是需要能够使用 JS、CSS、HTML,并且熟悉编辑器、浏览器来完成基本需求。

以常见的 WEB 端统计为例,为了研究页面关键元素的用户行为,需要对用户的部分交互添加事件统计(更常见的叫法是“埋点”),比如单击事件,表单提交事件,如果使用百度统计,在页面中埋点的方法大概如下:

<a onclick="_hmt.push(['_trackEvent', 'checkout', 'click']);">购买</a>

或者在 JS 中埋点:

// 需要发送统计的时候_hmt.push(['_trackEvent', 'checkout', 'click']);

接下来由于业务需要,相同的统计,需要往 Google Analytics 发一份,最简单粗暴的解决方案如下:<aonclick="_hmt.push(['_trackEvent', 'checkout', 'click']); _gaq.push(['_trackEvent', 'checkout', 'click']);">购买</a>

JS 中也需要做同样的修改:

// 需要发送统计的时候_hmt.push(['_trackEvent', 'checkout', 'click']);_gaq.push(['_trackEvent', 'checkout', 'click']);

第 2 重境界:把事情做好

具备什么样的能力才能把事情做好?对基本技术的熟悉程度超过(需要超过一大截)把事情做成的需要;对于业务需求有一定的前瞻性;能给出比较健壮的技术方案,能一次解决一类问题而不是一个问题,知道什么样的方案是不靠谱的,具备这些能力的人可称为开发者。

不可否认,Developer 是升级版的 Programmer,相比而言,Developer 大多数时候需要自行找到问题的解决方案并落地实施。通俗的说,面对具体的技术、业务问题,Developer 能比 Programmer 顾及到更多的点,想到更多的方案。但是要实现这两个“更多”,需要的是努力、时间和经验的积累。

当然,从 Programmer 到 Developer 的进阶是可以加速的,需要压缩自己的时间在更短的时间内做更多的事情,注意这里不是把相同的事情重复 N 遍,如果是那样就很容易出现 3 年工作时间半年工作经验的尴尬。

回到上面提到的埋点方案,简单粗暴的解决方式存在什么问题?

  • 首先,代码扩展性太差,后续如果需求方需要接入自建的统计,前端的工作量并没有减少,反而改起来会需要更加的小心翼翼;

  • 其次,直接发送统计是否能保障精确送达,有没有可能存在漏报的情况,细心的同学肯定能想到这种风险;

  • 最后,前端代码风格,其实不太推荐在 HTML 中内联书写 JS 事件,这就是脏代码的典型例子;

Developer 会如何解决这个问题呢?先理清楚埋点代码的本质:发送统计的动作、指定统计参数,其中发送统计的动作跟需要接入的统计平台有关,确保统计到达也跟这个动作有关,这个动作跟统计参数无关,而统计参数本身跟节点的关系比较紧密,动作和参数可以解耦开。

基于这样的认知,不难设计出下面的方案,在所有需要埋点的地方约定参数的标记方式,使用 data-event-* 参数标记事件名称、事件类型以及额外的参数:

<a data-event-name='checkout' data-event-type='click'>购买</a>

然后,在页面级别监听那些埋点的节点,并且恰当的时机发送统计代码,简化版如下:

// 相同的参数发送给所有已接入的统计平台,如果平台不同,适配工作也在这里做const sendEventLog = (name, type, param) => { _hmt.push([ '_trackEvent', name, 'click', param]); _gaq.push([ '_trackEvent', name, 'click', param]); }; // 针对单击事件的处理,其他事件可以类似处理$(body).on( 'click''[data-event-name][data-event-type="click"]',function(e){// 拿到事件发生的节点 const target = $(e.target); // 获取事件属性constname = target.attr( 'data-event-name'); constparam = target.attr( 'data-event-param') || ''if(!name) { return; } // 这里如果是链接跳转,需要走单独的逻辑 sendEventLog(name, 'click', param); });

不得不承认,从 Programmer 进阶到 Developer 需要非常多的努力和积累才行,但是精进之路永无止境,下面说说第三重境界。

第 3 重境界:把事情做绝

能够把事情做绝的人,可以称得上是工程师,那么到底怎么才算是把事情做绝?以统计埋点为例,能够洞悉埋点需求的本质,把日志发送和埋点标记解耦之后,将两者都做到极致。现实中埋点需求的来源通常是运营和产品经理,所有的变更基本都是由他们驱动,如果能够给他们提供工具管理页面中的埋点标记,就能把工程师从这种琐碎需求中解放出来去做更有意义的事情,这样也就改变了组织中不同员工间的协作方式,提高组织的效率。

想成为前端工程师,要先成为工程师。工程师应该具备怎样的能力?要回答这个问题,我们不妨仔细思考下什么是工程,WIKIPEDIA**的原文如下:

Engineering is the application of mathematics and scientific, economic, social, and practical knowledge in order to invent, innovate, design, build, maintain, research, and improve structures, machines, tools, systems, components, materials, processes, solutions, and organizations.

简单说,工程就是运用知识去设计、创建、维护、改进工具、系统、流程和组织的过程,而工程师是推动这个过程的最主要角色。

工程师,首先要具备很强的学习能力,知识的来源并不重要,可以来自于自学,也可以来自于学校,以及生产实践的总结,只局限于一门编程语言或特定的几个工具是远远不够的,让一个工程师切换到新语言不会有什么障碍,扎实的计算机科学基础是基石。具体到前端领域,基本的数据结构和算法、设计模式和变成范式、网络、JS、CSS、浏览器、性能、设计,软件质量、可维护性、可扩展性,软件工程化(构建、部署、运维、监控)。

工程师,还要具备良好的抽象思维能力,有了抽象思维能力就能够快速建立起系统运行机制的思维模型,也能把现实世界的业务问题转化为了恰当的模型,然后用技术去解决。具体到前端领域,比如前端应用的典型信息架构,状态机、栈、队列这些数据结构在前端的应用。

冰冻三尺非一日之寒,成长为靠谱的前端工程师也不能一蹴而就,需要长时间的积累和沉淀,而到达这个境界之后就结束了么?绝对不是,阻碍人前进的最大障碍就是他的心智,还是那句话,精进永无止境。

公众号内回复“1”带你进粉丝群!0?wx_fmt=gif

前端工作总结

今天我的导师突然要求我写下这进一年来的工作总结,作为一名毕业不到一年的前端,写总结让我觉得有些头疼,文采这东西不是与生俱来的,而是需要不断的磨练,想想自己毕业后还真的从来没有写过总结,面对这项巨大的任...
  • bingkingboy
  • bingkingboy
  • 2016年03月30日 18:23
  • 7347

前端工作3个月小结

从学习前端到投入前端工作已经有3个多月了,对前端有了一定的了解。这里写一下自己对前端的一些想法。 学习方法我一共花了一个多月学习前端,从基本的HTML、CSS和JS,到后来的react-native、...
  • violetjack0808
  • violetjack0808
  • 2016年07月25日 15:17
  • 3891

前端里最帅的2016年终总结

年底了,我奋战到最后一刻,虽说我很帅,但是 免不了俗。 人人都写各种年终总结,年终告白,虽说大部分人是在应付公司(我不揭穿你们额),但如果是自己真心实意的想写,确实是有很多东西值得记录和思考的。 我...
  • xllily_11
  • xllily_11
  • 2017年01月24日 23:25
  • 4666

前端工作心得

1.首先要把页面布局理解清楚再动手,确定哪里是需要切图,哪里是需要用代码编写的,同时注意能用代码编写的地方不要懒省事去切图。 2.在写代码的时候要确定好类名,类名要语义化,同时在写代码的时候随时随地...
  • Annay_li
  • Annay_li
  • 2016年08月31日 14:28
  • 1281

2017年工作总结

转眼2017年就要结束了,感觉这一年又是虚度光阴了,也许普通百姓就是这样平凡的日复一日的过着,过着平凡幸福的生活。 这一年一共经历了4个半项目,第一个是去年的项目,年初主要做性能优化以及功能的增加,...
  • dz45693
  • dz45693
  • 2017年12月27日 09:00
  • 261

惊呼——SVM支持向量机三重境界!

转载自:原文 前言     动笔写这个支持向量机(support vector machine)是费了不少劲和困难的,原因很简单,一者这个东西本身就并不好懂,要深入学习和研究下去需...
  • alwaystry
  • alwaystry
  • 2017年03月09日 11:34
  • 582

支持向量机通俗导论(理解SVM的三层境界)

from July,转载自:http://blog.csdn.net/v_july_v/article/details/7624837 hypervector算法优化数据挖掘 ...
  • nanjunxiao
  • nanjunxiao
  • 2013年05月27日 21:11
  • 7362

止损的三个境界

止损的三个境界(转载)   做股票的股友都知道每笔交易必须要设定止损。但是应该怎样设定止损呢!我们觉得止损分为三个境界。 1、 技术性止损:是在交易架构的基础上建立的。这个层面上的止损是最低层...
  • wb96a1007
  • wb96a1007
  • 2017年12月13日 22:28
  • 44

程序员10大境界

作者简介:周伟明先生毕业于上海交通大学,1994年开始 从事专业软件开发,曾工作于美国加州硅谷的DASCOM Inc公司(现为IBM的全资子公司)和华为技术有限公司等企业。在网络安全软件、服务端软件、...
  • zy563900384
  • zy563900384
  • 2013年09月14日 11:26
  • 2356

定位决定地位,眼界决定境界

培训告一段落,天天嘻嘻哈哈,sui
  • shixihaoma
  • shixihaoma
  • 2014年07月16日 23:42
  • 656
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端开发的三个境界,你属于哪一个?
举报原因:
原因补充:

(最多只允许输入30个字)