工作5年 后面4年重复着我的前端开发之路

原文出处： 小胡子哥 (@Barret李靖)   

当我们沉浸在旺盛的需求之中时，整个人便会成为一台工作的机器，切着类似的页面，写着同样的逻辑，重复着昨天或者上个月做的事情，时间久了，觉得腻味，没有什么创新，也没有明显的成长。用一句通俗的话来讲：工作五年，后面四年重复着第一年的活儿。

很多人尝试跳出这个怪圈，不过基于环境压力和思维受阻，最后又不得不选择放弃。今天想通过介绍如何高效有保障地开发一个无线页面来帮助大家找到突破口。

日常开发状态

很多无线页面的开发有两种模式，一种是后台输出 JSON 数据，前端根据数据来渲染页面（同步模式）；第二种是前端异步加载后端数据然后渲染（异步模式）。当然，两种模式夹杂在一起也是存在的，这种情况一般会有一个由前端控制的中间层提供同步数据和异步数据。为了减少前后端的沟通成本，往往采用第二种模式。

拿到设计稿后，与后端同学约定接口格式，让后端同学尽快提供 mock 数据，如果提供不了，便自己构造测试数据。接着回到自己的工位上切图，切图过程中会解决好响应式问题和兼容性问题，待到后端产出真实数据时，更换 JS 中的接口地址，联调 ok 便发布页面，大功告成！

整个流程很顺畅，这对一个工作了三四年的程序员来说，没有任何压力便完成甚至提前完成了任务。但是，回过头来想一想，整个开发过程中我们留下了什么？沉淀了什么？

放慢节奏，我们再走一遍流程

对于上面的开发流程，先提出几个常见的问题：

• 你是如何良好处理大、中、小等各型号手机的适配问题的？Media Query？等比布局？
• 模块如何渲染，模板和接口数据如何拼装？字符串拼接？正则替换？模板引擎？
• 本地、预发和线上三套环境，如何进行无痕切换？
• 如果开发时接口有变动，线上数据暂未产出，本地 mock 接口如何快速响应？
• 如何解决异步 JSONP 接口的安全问题？JSONP 接口请求异常、超时、失败等情况如何处理？
• 页面中的 Slide 和 Tab 逻辑如何写？复制之前写过的代码？找一个好用的组件？
• 图片的懒加载处理如何控制？脚本的懒执行如何控制？
• 首屏加载页面空白体验如何优化？
• 页面回退 Session 和 Token 失效如何处理？
• …

上面提出的几个问题，列的不全面。有一些可能是你经常碰到的，甚至有了成熟的解决方案，而也有一些问题可能是你从未考虑过的。

我们把整个前端开发流程做简单切割：切图、获取数据、渲染、事件绑定、数据统计、页面优化、监控。这种切割很暴力，也比较粗糙，不过它不妨碍我们在下面讨论，作为前端工程师，除了完成日常需求外，还要做什么？还能做什么？

切图

隐约还记得三年前，我接了一个无线页面的外包活儿，页面的结构很简单，但我做的很糟糕。为了适配不同尺寸的机型，我写了无数 Media Query，加上当时采用的 em 作单位，很多细节位置都没控制好。

回到现在，已经有了很通用、主流的方案