前端工程师作事的三重境界：个人进阶之路

共 2835 字，读完需 5 分钟。写做本文的目的：构建本身关于前端工程师成长过程的认知模型，从本身的视角来分析 Programmer、Developer、Enginner 的能力结构与工程师成长过程的关联，并分享出来给你们，指望能对入门的前端同窗有所借鉴和启发。须要提早说明的是，文中用到的工程师的不一样叫法并非要给工程师分类或者贴标签，由于工程师的成长过程是连续的，喜欢钻牛角尖的同窗请自行绕路。

程序员 or 工程师

圈内对从事软件开发的同窗有不少叫法，如程序员（Programmer）、开发者（Developer）、工程师（Engineer），甚至是码农，“码农”是圈内人用来自嘲的，那其余几个名词呢？表面上看起来都是作软件开发，叫什么真的重要么？

不得不说，叫什么并不重要，不管是自称仍是他称，什么学历、几年工做经验也不重要，真正重要的是人所具有的能力。那么既然名称不重要？为何还要谈论它？名称的真正意义在于能让我积极拓宽本身的视野，不断点亮本身的技能树，在职业发展的道路上不断积累、不断提高。

工程师作事的三重境界是什么？程序员、开发者、工程师这些叫法跟这三重境界又有啥关系？

第 1 重境界：把事情作成

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

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

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

或者在 JS 中埋点：

// 须要发送统计的时候
_hmt.push(['_trackEvent', 'checkout', 'click']);复制代码

接下来因为业务须要，相同的统计，须要往 Google Analytics 发一份，最简单粗暴的解决方案以下：

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

JS 中也须要作一样的修改：

// 须要发送统计的时候
_hmt.push(['_trackEvent', 'checkout', 'click']);
_gaq.push(['_trackEvent', 'checkout', 'click']);复制代码

若是网站的页面规模、统计事件量小，变动埋点可能会比较轻松，但当页面和事件数量随着业务发展激增，估计程序员会埋点埋到手抽筋了。这个时候 Programmer 会不高兴，极可能 Boss 也会不高兴，由于埋点效率提不上来，而且容易出错。聪明的 Programmer 会发现，仅仅从表面上把问题解决貌似还不够。该如何破局？

第 2 重境界：把事情作好

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

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

固然，从 Programmer 到 Developer 的进阶是能够加速的，须要压缩本身的时间在更短的时间内作更多的事情，注意这里不是把相同的事情重复 N 遍，若是是那样就很容易出现 3 年工做时间半年工做经验的尴尬。

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

• 首先，代码扩展性太差，后续若是需求方须要接入自建的统计，前端的工做量并无减小，反而改起来会须要更加的当心翼翼；
• 其次，直接发送统计是否能保障精确送达，有没有可能存在漏报的状况，细心的同窗确定能想到这种风险；
• 最后，前端代码风格，其实不太推荐在 HTML 中内联书写 JS 事件，这就是脏代码的典型例子；

Developer 会如何解决这个问题呢？先理清楚埋点代码的本质：发送统计的动做、指定统计参数，其中发送统计的动做跟须要接入的统计平台有关，确保统计到达也跟这个动做有关，这个动做跟统计参数无关，而统计参数自己跟节点的关系比较紧密，动做和参数能够解耦开。

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

<a data-event-name='checkout' data-event-type='click'>购买复制代码

而后，在页面级别监听那些埋点的节点，而且恰当的时机发送统计代码，简化版以下：

// 相同的参数发送给全部已接入的统计平台，若是平台不一样，适配工做也在这里作
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);

    // 获取事件属性
    const name = target.attr('data-event-name');
    const param = target.attr('data-event-param') || '';

    if (!name) {
        return;
    }

    // 这里若是是连接跳转，须要走单独的逻辑
    sendEventLog(name, 'click', param);
});复制代码

上面探讨了从 Programmer 进阶到 Developer 的方法就是积累，那么怎么积累？我行动的基本法则是：作出好的东西先要知道好的东西长啥样。一方面，多读经典的书，仔细读高质量的文章，注意这里面读远比收藏重要，上哪里去找经典的书和高质量的文章？这须要创建本身的信息筛选机制；另一方面，遇到问题要学会去搜索，找更多的解决方案，而后比较，融会贯通。

不得不认可，从 Programmer 进阶到 Developer 须要很是多的努力和积累才行，可是精进之路永无止境，下面说说第三重境界。

第 3 重境界：把事情作绝

可以把事情作绝的人，能够称得上是工程师（Engineer），那么到底怎么才算是把事情作绝？以统计埋点为例，可以洞悉埋点需求的本质，把日志发送和埋点标记解耦以后，将二者都作到极致。现实中埋点需求的来源一般是运营和产品经理，全部的变动基本都是由他们驱动，若是可以给他们提供工具管理页面中的埋点标记（思路关键词：XPath、微服务、浏览器插件，细节不在本文描述），就能把工程师从这种琐碎需求中解放出来去作更有意义的事情，这样也就改变了组织中不一样员工间的协做方式，提升组织的效率。

想成为前端工程师，要先成为工程师。工程师应该具有怎样的能力？要回答这个问题，咱们不妨仔细思考下什么是工程，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、浏览器、性能、设计，软件质量、可维护性、可扩展性，软件工程化（构建、部署、运维、监控）。

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

工程师，还要具有良好的沟通能力，沟通能力的好坏决定了你是否能准确理解需求的本质，是否能把本身的的设计方案清晰的展现给同事，而沟通的形式就不那么重要了，能够是书面文字，能够是白板、思惟导图，甚至是动画演示。

工程师，还要具有平衡取舍能力，知道在哪些地方只须要作成，哪些地方须要作好，哪些地方要作绝，由于工程的要义就是取舍，在商业和技术之间寻求平衡点，这每每是不少人所忽视的能力。

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

One More Thing

本文做者王仕军，商业转载请联系做者得到受权，非商业转载请注明出处。若是你以为本文对你有帮助，请点赞！若是对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅个人掘金专栏或知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。

Happy Hacking