工作五年,后面四年重复着第一年的活儿?
当我们沉浸在旺盛的需求之中时,整个人便会成为一台工作的机器,切着类似的页面,写着同样的逻辑,重复着昨天或者上个月做的事情,时间久了,觉得腻味,没有什么创新,也没有明显的成长。用一句通俗的话来讲:工作五年,后面四年重复着第一年的活儿。
很多人尝试跳出这个怪圈,不过基于环境压力和思维受阻,最后又不得不选择放弃。今天想通过介绍如何高效有保障地开发一个无线页面来帮助大家找到突破口。
日常开发状态
很多无线页面的开发有两种模式,一种是后台输出 JSON 数据,前端根据数据来渲染页面(同步模式);第二种是前端异步加载后端数据然后渲染(异步模式)。当然,两种模式夹杂在一起也是存在的,这种情况一般会有一个由前端控制的中间层提供同步数据和异步数据。为了减少前后端的沟通成本,往往采用第二种模式。
拿到设计稿后,与后端同学约定接口格式,让后端同学尽快提供 mock 数据,如果提供不了,便自己构造测试数据。接着回到自己的工位上切图,切图过程中会解决好响应式问题和兼容性问题,待到后端产出真实数据时,更换 JS 中的接口地址,联调 ok 便发布页面,大功告成!
整个流程很顺畅,这对一个工作了三四年的程序员来说,没有任何压力便完成甚至提前完成了任务。但是,回过头来想一想,整个开发过程中我们留下了什么?沉淀了什么?
放慢节奏,我们再走一遍流程
对于上面的开发流程,先提出几个常见的问题:
- 你是如何良好处理大、中、小等各型号手机的适配问题的?Media Query?等比布局?
- 模块如何渲染,模板和接口数据如何拼装?字符串拼接?正则替换?模板引擎?
- 本地、预发和线上三套环境,如何进行无痕切换?
- 如果开发时接口有变动,线上数据暂未产出,本地 mock 接口如何快速响应?
- 如何解决异步 JSONP 接口的安全问题?JSONP 接口请求异常、超时、失败等情况如何处理?
- 页面中的 Slide 和 Tab 逻辑如何写?复制之前写过的代码?找一个好用的组件?
- 图片的懒加载处理如何控制?脚本的懒执行如何控制?
- 首屏加载页面空白体验如何优化?
- 页面回退 Session 和 Token 失效如何处理?
- …
上面提出的几个问题,列的不全面。有一些可能是你经常碰到的,甚至有了成熟的解决方案,而也有一些问题可能是你从未考虑过的。
我们把整个前端开发流程做简单切割:切图、获取数据、渲染、事件绑定、数据统计、页面优化、监控。这种切割很暴力,也比较粗糙,不过它不妨碍我们在下面讨论,作为前端工程师,除了完成日常需求外,还要做什么?还能做什么?
切图
隐约还记得三年前,我接了一个无线页面的外包活儿,页面的结构很简单,但我做的很糟糕。为了适配不同尺寸的机型,我写了无数 Media Query,加上当时采用的 em 作单位,很多细节位置都没控制好。
回到现在,已经有了很通用、主流的方案——使用 rem,动态计算 html 标签的 font-size
,思路很简单,但是存在不少的坑,和一些较难理解的概念,Google 搜索下 lib-flexible
能够找到这些问题以及解决方案。不过我们切图时还可以思考一些其他的问题:
- 各类静态资源(image/css/js/font)如何放置?新建各种文件夹?
- 是否还是修改代码再刷新页面的调试手段?考虑过 liveload?
- CSS 复用率如何?跨项目的复用率呢?使用预处理语言封装基类?
- 还在心算从 px 折算为 rem?用计算器算?
- 身旁放 20 台机器测试页面兼容性?
以上问题,没有哪一个会让人特别苦恼,但是堆积起来,却让我们的开发效率和开发体验落后了好几个档次。这些问题并非无解,我们可以尝试着帮助同事和团队找到问题的答案,比如:
- 统一团队的本地构建环境,初始化一个工程目录的脚手架
- 统一打包脚本,实时编译和预览
- 封装预处理基类,屏蔽 rem 计算,比如编译时自动转换 px 为 rem
- 构建云测平台,云端测试各种机型兼容性,打开网页输入网址即可批量测试
有些解决方案只需要几行脚本就能搞定,而有一些可能需要投入时间和精力。
获取数据
本地、预发、线上三套环境,如何做到环境的顺滑切换?我在百度的时候,团队最常用的方案就是:
- 线上测试,本地反向代理到预发或者线上环境;
- 本地测试,则使用 apache 开启服务提供 mock 接口
可一旦与后端约定的接口有变动,本地 mock 数据也要跟着一起变动。这个问题有什么好的处理方案?在团队中,好的方案一定不是几行文字的提示或指引,而是通过流程和监控来控制!
这里提到的获取数据,细想之下可不是什么轻松的事情。有很多问题需要思考:
- 如何保障 JSONP 数据的安全问题?refer 限制?token 验证?
- 数据来源很多,如何减少页面的请求数量?让后端合并数据?如果是多个团队提供数据呢?
- 如何控制需求变化导致的接口格式变化?
- 如何处理接口的不稳定问题?
- 如何处理超时问题?
- 如何产生容灾数据?如何获取容灾数据?
- 如何控制数据缓存?如前端控制缓存一分钟?
- 如何对接口做监控?
- 如何减少数据的重复请求问题?
以上每个问题都有很多处理方案,而这些问题不仅仅是自己会遇到,身边的同事也会遇到。如果可以站在团队的角度去思考问题,很多思路会比较容易涌现出来,比如:
- 构建一个平台,用于接口格式约定,通过约定好的格式,系统自动生成 mock 数据,用于本地开发,后端也必须遵循这个接口约定,任何接口的变动,mock 数据自动变动
- 构建一个平台,让不规范的数据进入这个平台,规范化输出,前端只考虑规范化的接口提示和解析,同时该平台产出数据的备份接口
- 前端添加一个请求 Hub,当页面有很多请求出来时,合并请求统一发出,当数据回来时,统一储存和过滤
数据是最容易出问题的地方,每一个接口请求都需要一大堆的逻辑处理异常。倘若接口格式、开发流程和前端模式都可以规范化,我们需要做的就剩下套公式,这种高效你能否想象?
渲染
大胆地揣测下大家在写一个模块的时候,跟我一样也是这么划分的函数:
var Module = function() {this.init(); };// 初始化 Module.prototype.init = function() {this.fetchData(function() {// do something }); };// 绑定事件 Module.prototype.bindEvent = function() {// ... };// 获取数据 Module.prototype.fetchData = function(cb) {var self = this;ajax({}).then(function(data) {self.renderData(data);}).catch(function() {self._fetchDataFailed();}).fin(function() {cb && cb();}); };// 渲染数据 Module.prototype.renderData = function(data) {data = this._resolveData(data);// ...this.bindEvent(); };// 处理数据 Module.prototype._resolveData = function() {// ... };// 加载失败 Module.prototype._fetchDataFailed = function() {// ... };
在代码中写大量的字符串模板不管一个模块有多么简单,它基本都会包含以上步骤,倘若没有用函数隔离每步操作的意图,代码会显得十分散乱。我经常看到,有同学把「渲染」这一块的代码被放到「获取数据」甚至是「初始化」中,这种程序结构显然是不合理的。同时,也经常会看到渲染时,
- 写一个工具函数,解析字符串模块中的循环逻辑
- 使用 replace 函数正则替换字符串变量
- 使用 innerHTML 函数插入拼装好的字符串
- 在渲染模块中添加大量逻辑
以上,没有哪一种是不正确的,我也没有对哪一种写法开喷的意图。但是至少我们可以在多次编程经验中提炼出一些有价值的内容:
- 团队统一的模板引擎,并且提供模块的离线编译,提高线上运行效率
- 提供安全机制,保障插入的数据不会产生安全问题
- 严格编程范式,分离视图和逻辑层,把数据处理好了再送入模板
有一个可执行的编码规范,加上适当合理的 Code Review,整个团队代码便会如出一辙。
后续操作
本想写成一篇长文,把每个环节可以综合考虑的问题都提出来,不过本文的目的,只是表述一些观点,期望大家在编程的时候,有更多基于团队的思考,针对具体问题提出一些通用的解决方案。比如下面,再提出几个问题:
- 首屏加载白屏问题,如何处理?本地缓存?等待提示?假数据?同步输出?
- 如何减少页面的请求?资源内敛?如何做到自动内敛所有的资源?
- 页面报错的统计如何做?做了之后如何分析?分析之后如何推动线上错误减少?
- 页面发布时如何自动回归检测?点下链接看看是否 404?打开控制台看看是否有报错?滚屏看看图片是否加载正确?
- …
以上问题,都有相当成熟的解决方案,那你们团队呢?
小结
当发现工作做起来索然无味的时候,我脑海中蹦出来的第一个念头是:最近是不是有点放纵了?
我喜欢用编程解决问题,只要是重复的事情,我一定会想尽办法简化,然后交给机器去做。我希望今年可以用程序解决更多的问题。
本文转自我的个人博客:http://www.barretlee.com/blog/2016/07/21/donnot-repeat-yourself/
工作五年,后面四年重复着第一年的活儿?相关推荐
- AI大牛李沐的《工作五年反思》火了,网友:再一次impress了我
从象牙塔步入职场,很多人都会感到迷茫或是困惑: 这条漫漫长路该怎么走?又如何走好? 最近,亚马逊资深首席科学家.AI大牛李沐,根据自己五年的工作过往,在知乎中发表了<工作五年反思>一文. ...
- 工作五年以上的程序员,应该干些什么
第一阶段 认真构建完整的知识体系 十几年前我投身软件行业的时候,光是讲解数据库原理.操作系统.TCP/IP.组网.算法等等基础知识的英文原版书摞起来就等身,认认真真看完,各种上手实践,入行后,读遍 C ...
- 《计算机网络教程》(微课版 第五版)第四章 网络层与网络互连
<计算机网络教程>(微课版 第五版)第四章 网络层与网络互连 课后习题及答案 1.网络层向上提供的服务有哪两种?试比较其优缺点. 解答:面向连接的虚电路服务和无连接的数据报服务. 2.请简 ...
- 摊手:工作五年我拿了两次 N+1 赔偿!
作者 | 轩辕之风O 来源 | 编程技术宇宙(ID:xuanyuancoding) 前两天,一读者给我私信说他所在的部门估计得被优化掉了: 这一聊不小心勾起了我的"伤心"往事:工作 ...
- 出来工作五年的经历总结(五年前,你在干嘛?)
2009年,第一次踏入社会 注册博客园已经两年了,在园子中看到的文章都是对自己很有帮助,lz今年出来工作五年了,五年前你在干嘛呢?这是今年年初在优酷看到的一个视频话题,记者采访了很多人,这里也 ...
- 工作经验教训_在设计工作五年后获得的经验教训
工作经验教训 This June it has been five years since I graduated from college. Since then I've been working ...
- 工作五年的UI设计师,现在混的怎么样?不看是你的损失
很多刚入门UI设计师的小白都担心自己的前途到底怎么样,自己工作了几年有没有晋升的空间.毕竟很多人都不想要在基层工作一辈子,都想要往管理层发展.关于这个问题我自己也查了很多资料,看了很多UI设计师的故事 ...
- 某大厂程序员炫耀:来新加坡后,每天最多工作五六个小时,家庭年收入150万人民币,已躺平!...
源 / 文/ 随着国内互联网环境越来越卷,许多程序员选择去国外发展.其中,新加坡由于环境好.机会多.要求低.加班少等优势,成为许多人求职的重要选项之一. 一个去了新加坡的程序员发帖&q ...
- 过来人经验!工作五年以上的UI设计师都在干什么?
聊聊设计师的六大瓶颈期 http://www.mobileui.cn/talk-about-six-designer-bottleneck.html 0-2年,做交互设计,打基础,锻炼技能,积累经验 ...
最新文章
- DeepMind难以盈利,人工智能该走向何处去?
- ROS 总结(二):创建URDF模型
- 一个图片轮换效果的JS
- 20145326蔡馨熤《网络对抗》——信息搜集与漏洞扫描
- 芒果广告不能用百度了,怎么办?
- DBSCAN聚类算法+demo
- 二叉查找树与平衡二叉树
- 小程序uv访客怎么刷_免费小程序模板怎么选择?
- 泊松分布的期望和方差推导
- 为什么程序员应该写博客?用什么博客系统?
- 修改Endnote插入Word参考文献中位置
- 三款国产操作系统使用初步体验
- android 签名文件与sha1获取
- Python安装Pycrypto
- linux文件查找命令
- 联想台式主机拆机教程_联想z465怎么拆机 联想z465拆机教程【图文详解】
- table表头th太多根据需要显示和隐藏
- MSE和Video标签的关系
- android 图片滑动动画,Android实现图片滚动效果
- 电脑计算机为什么不是有效程序,电脑无法运行程序提示“不是有效的Win32应用程序”如何解决...
热门文章
- 很强的PHP图片处理类
- 如何:对 SharePoint 列表项隐藏 ECB 中的菜单项
- 2011 总结 2012 计划
- perm函数c语言_理解C语言(三) 字符串处理函数
- 2020-11-05 关于前端‘古董‘dojo的树结构如何默认展开根节点
- aforge videoresolution获取的相机像素不全_新手做视觉系统,如何选择合适的相机?...
- 仓库管理员怎样做台账_工作日志之仓库管理员与会计之间的对接工作
- 苹果连接电脑只能充电_苹果获得MagSafe式充电技术专利 可自动连接充电
- 有汇编功能的python编译器_7.12 计算机基础理念与python解释器编译器安装使用
- MJExtension 模型嵌套模型数组