前端开发的三个境界，你属于哪一个？

第 1 重境界：把事情做成

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

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

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

或者在 JS 中埋点：

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

接下来由于业务需要，相同的统计，需要往 Google Analytics 发一份，最简单粗暴的解决方案如下：<aοnclick="_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”带你进粉丝群！