如何打好前端游击战

 

 

1、前端游击战为哪般？

小鹿乱撞，心花盛开。终于有机会在求之不得的团队博客的评论之外位置留下本身的痕迹啦，撒花撒花！淡定淡定，官博是严肃的地方，要是随便侃大山侃小山，拙文估计会被“里德尔”砍成袁姗姗。

深吸一口气，闲话少说，放马入题。

首先有必要先回答这个问题：“何为前端游击战？”

所谓“前端游击战”是相对“前端常规战”而言的。通常而言，一个前端会负责一个（也有多个项目）的开发、上线以及后期维护，精雕细琢产品。所谓一个 team, 一个团队，大体如此。比方说Qzone的前端er, 至少在一个很长的时期里面，都会泡在Qzone这个产品上，此为“常规战”，我想大部分的小伙伴都是这样子的，不仅前端，设计师甚至后台开发也是如此。而 “游击战”就大不同了，打一枪，放一炮，点到为止而后基本上就放手拜拜啦！“我擦”，你可能会惊讶，“还有这样玩的，能作出高品质的产品吗？”

无数的偶然能够造就生命，天然各类因素相互碰撞也会造就不同的开发模式。

腾讯社交用户体验设计的小伙伴们遍及祖国大江南北，为亿万网民设计优质体验、提高生活品质。天然，上海这边也有很多很Nice的小伙伴啦，都是国内 顶尖的用研、交互与视觉。稍等…这里怎么有个另类——那个喝娃哈哈AD钙奶的，没错，就是你！古人云，相由心生，你这么黑，快说，你究竟是干吗的！我…… 我是作前端重构的……

剧情正如你看到的，咱们上海设计中心如今有个独苗前端。要知道，咱们设计中心是个支持性部门，每一个交互、视觉都在特定的产品线上。那这个独苗前端该 如何定位呢？我我的定位是这样的：对内辅助，对外桥梁。所谓“对内辅助”包括原型、工具以及活跃气氛；“对外桥梁”指对外精确包装与传达交互细节、设计思 想等。

这种角色定位以及一些其余的机缘巧合就造成了有特有的游击开发策略。哦？略闻一二！

1. 咱们设计中心就像个……中心，你能够想象成一个圆圆的小太阳；
2. 这个小太阳里面有不少人美心更美的小伙伴，这是小太阳持续发热的根源所在；
3. 而后小太阳周围有不少的星球a, 星球b，就是实际上的咱们所说的项目a, 项目b, …；
4. 这些星球是最终做品产出的工厂。可是，要想产出好的做品，须要设计中心的支持。就像地球的繁荣离不开太阳的普照。因而，每一个项目就会圈中设计中心的几位小伙伴，协助开发与产出；
5. 可是，毕竟不在一个球体上，思惟方式也有差别，左脑主义 VS 右脑主义。信息从小太阳传到周围星球上的时候有时候就会脱节，设计输送的是玉米，结果最后工厂产出的是爆米花；
6. 因此，须要一个保证交互、视觉准确输出的角色，其任务很简单，做为前期的信息传递的桥梁。
7. 实践代表，这样的模式先后工做都更轻松了，产品也更保真。
8. 因而，后来的新项目，都但愿这位小工在前期搭好桥梁，保证设计几乎无损运到后方。
9. 虽然小工活好耐劳效率高，但N头并进神仙也吃不消。
10. 因而，就开始了游击策略，打一枪，放一炮；不尾随，不深刻；货到桥头，各走各路。

从上面的进程史能够看出，前端游击战是本着作出更精湛产品目的、同时受制于人力资源最大效益权衡下的一种开发合做模式。看上去很简单，很洒脱，实则 偏偏相反。若是你真就很简单、很洒脱地按照本身的心情交付个看上去是那么回事，实则半吊子产出而后秋扇见捐，额，好吧，开发要佛跳墙，项目经理还会来骚扰 你，这桥梁已然不是链接，而成了瓶颈，还不如当初直接设计、开发连线。因此，要想半途全身而退，仍是有不少讲究的地方，这里，我就将分享本身的一些前端游 击战的经验与心得，但愿对这种合做方式有兴趣的团队或我的提供一些帮助。

2、如何打好前端游击战？

1. 前期沟通很重要

前期沟通的重要性应该没有谁不知道，因此一些喜闻乐见、耳熟能详的沟通要点就不赘述，说个前端游击很重要的一个沟通点——介入深度。“介入深度”之重要性如秃子头上的虱子——显而易见：你打游击进入敌方腹地太深，抽不出来被灭的命；入敌太浅，隔靴搔痒，又没有任何效果，还要重来，费时费力。

然而，“介入深度”实际上是个比较虚的概念。我本身心中的衡量是这样的：

• 发挥口遁，提供一些实现建议以及选型方案，但不码一行代码，此乃10%介入。
• 快速成型，给老板、产品经理或者开发抢先过目体验的，CSS代码什么的不能做为实际项目代码使用的，为20%介入。
• 与设计图一一匹配的HTML页面，此乃30%介入。例如，一个单页的制做工具，每一个制做模块的展开状态采用独立的.html页面表示，因而，最终交付的可能就是10~20个页面；
• 包含纯视觉层面交互的原型页面，任何交互代码都不会被开发采用，纯示意，此乃40%介入。此时，你能够用CSS3高级特性完成些效果，甚至jQuery UI走起，不要担忧你的代码很懒，由于都会被无视；
• 与开发公用解决方案，负责UX相关交互，JS代码直接利用，会与开发的JS合并并最终上线，此乃60%介入。此时，须要考虑规范、兼容性以及性能等等。
• 不只负责纯视觉交互，还使用伪数据模拟与后台的通讯的完整交互，但代码依然本着纯演示目的，此也是60%介入。例如，点击个按钮，ajax请求走起，按钮状态变化，菊花出现，成功后，载入内容，并出现成功提示。
• CSS, UX JS, Server JS均须要最终上线，然数据是假的，此乃80%介入。
• 页面、交互、开发一把抓，从头撸到尾，此乃100%介入。

凡事都须要经验积累的，以前就存在介入深度把我不许的问题：

① 介入过深

去年作企业盘，本身参与的第一个比较大而完整的项目，本身有点high, 彻底把本身当其余部门的人使用了。作得很拼，原型页面作得超级高保真，文件上传，进度条什么的都是真实的，介入程度70%左右。然而，这种介入过于深刻且 分界不明，所以，开发在代码剥离的时候花了一番功夫，这种刮骨疗伤的感受没人会喜欢的！

② 介入过浅

今年手Q某项目，原型页华丽丽地完成了，其中的交互效果，我是按照40%的深度介入的（效果代码仅供参考）。而后，企业这边移动端经验还不是不少，因而直 接采用了我还不成熟的过场代码（无Ajax处理），先不说代码风格不一致，技术策略也不同，因此，从代码层面讲，并不美丽。总结下来，就是经验不足，虽 有分工等前期沟通，但技术介入深度这个细节并未细致探讨，因而出现了链接不畅的状况。若是从新作这个项目，就会60%介入，数据请求与视图绘制就会与过 场交互造成一个完总体系。合做就会顺畅不少！

后来，就聪明了。和其余团队合做时候，会事先沟通好介入深度，说白了就是：我是否是只负责出现演示？仍是我帮大家实现演示？前者属于打枪，后者属于放炮。都属于游击战范畴，后者嘛成本稍微高一点。通常状况下，我都是作到前者这一步，以便足够精力身退参与其余部门的项目。

例如，最近要开始的XXX项目，就约定好了，不管JS多么华丽，都无视，由于只是用来展现效果的花衣裳。像这样，介入深度明确，才能准确知道何时该撤，何时来补枪。

2. 不以物喜、不以己悲的胸襟

处处打游击，说穿了就是吃百家饭。然而，每家的饭菜的食材、口味都是不同的。如何才能在别人家吃得开心？很简单，放弃本身特有的口味，尝试接受别 人家但你本身可能不喜欢的口味。这前端游击战也是如此。不少有经验有资历的开发常常会鄙视别人写的代码，若是团队里有另一个有经验有资历但世界观不同 的开发，每每会为技术选项或者命名之类的事情闹得不开心，我之前就遇到过一个开发逼走另一个开发的状况。这种代码洁癖的完美主义者看上去有追求，固然， 自我感受也是我这是有追求，优越感油然而生，实际上，只是心胸狭隘的表现罢了！让这样的人去打游击，感受就像是让关羽背后偷袭别人，而后撒腿就跑——不可 想象，难于上青天！

因此，要想游击打得好，宽广胸襟少不了！具体该如何作呢？我总结了下面几条供你们参考：

① 放弃本身的经常使用习惯

这里所说的习惯不少啦。包括，命名、文件组织方式、代码排版（缩进），书写风格，语言模式等等。尤为当一我的在一个团队呆久了，当然会有不少的习惯，这其 实挺好的，保持一致性，代码迭代什么的先后风格统一，更利于维护和协做。可是，若是你是搞游击战的，那这些习惯都是要弃之不顾的。为什么？很简单，由于每一个 部门，每一个团队的风格、习惯都是不同的，你确定不能按照本身的习惯来走，不然合做起来代码不和谐，还容易出乱子。举个例子：你的CSS命名都是下划线开 始的，JS参与的类名都是大小写组合的驼峰命名；可是，跟你游击合做的团队规范是，CSS命名短链接符，JS类名都是js_开头。这显然问题来了，你的HTML代码还能用吗？哪一个用来显示样式、哪一个脚本绑定傻傻分不清楚。

因此，合做动手以前，先要把本身的那些各类习惯放在一边，去看看跟你游击的团队之前的文件名、变量、属性名如何命名的、JS的习惯书写模式是什么的，等等。而后，按照这个团队的习惯来写代码，哪怕这个习惯在你“专业”的眼光里是欠妥的。记住，重要的是团队合做！

拿我本身举例，我以前CSS命名一直使用下划线_，由于能够愉快的双击选中（历史缘由）。来设计中心后发现，合做的项目都是短横线-。你知道的，毅然舍弃了5~6年的命名习惯，“短命（短横线命名）”走起，而后愉快地打游击~~

② 丢弃本身的那点小资本

工做久了，总会积累些技术资本，比方说组件达人，SASS好手，YUI忠实粉，CoffeeScript第二人。没错，这些都是好东西，没人会否定的，很 多人说不定要靠这些升职加薪迎娶白富美呢！可是，亲们哪，在打前端游击战的时候，这些东西呢，就不要放出来了！你可能会疑问：“为何不要啊，我以为这些 东西很好啊！我用起来很顺手！”问题在于，你顺手，跟你不是一个团队的其余小伙伴不顺手哈！

游击战的精髓的是能「击」更能「游」！你说你使用CoffeeScript, 没错，是能「击」，对其余同事心理打击确实很大，可是「游」不回去啦。无非两种结果：“受”说，哎呦，你这个好高大上，给咱们几个培训下嘛；“攻”说，我 们可没精力专门找人维护你的**（屏蔽）代码！不管哪一种状况，都被套牢，脱不开身！

因此，你本身那点引觉得豪的资本都放在一边。首先，使用合做团队的一般解决方案，是否是有本身的框架与组件库；而后，若是没有，你也应该使用业界开 源、广泛承认、富含文档的解决方案。比方说MVC方案，你牛，你有本身一套web开发框架，上可风卷残云，下可飞沙走石，抱歉，仍是老老实实使用 Backbone.js. 由于你必须牢记这一点：我这是在打游击战，其余部门也须要我，我要速度撤离，没人会傻不拉几跪舔一我的不在、文档缺失、潜在风险不详的框架的！若是你在一 个稳定团队作一个稳定项目，这么牛的东西那铁定要上啊，绩效考评什么的，就期望它了！

仍是拿我举例吧，OOCSS用的不亦乐乎，quicklayout独步江湖，用之写页面速度遇上高铁，一切尽在弹指间。可是，我如今游击的至少5~6个项目，没有一个使用之，由于，只有我和对我关注的人对此熟悉。页面交付后，一些微调的CSS维护工做我其实不参与的⑴，因此，若是CSS过于个性化，显然是给本身挖坑。

⑴ 跟我游击合做的小伙伴中也有很多对CSS比较熟悉的，彻底可以驾驭平常维护。这是前端游击战可以执行很重要的前提之一。

③ 学会退而求其次

都据说过，“作最好的本身，给最爱的人”，确实，咱们在团队里作开发时候，是应该精益求精，精上加精。可是，有时候须要把完美主义情怀放在一边了，没必要执着于完美的代码。

首先明确一点，一个产品的最终质量，给企业最终带来的收益，与代码是否完美的相关系数其实很低。

有时候，跟随合做团队的集成解决方案，最终生成或发布的代码可能并非完美的状态。比方说，依赖Less, 计算数值N位小数，嵌套、函数滥用，致使最终CSS太多层级，可重复利用CSS只是编写时候重复利用，生成的CSS依然狗皮膏药显啰嗦。或者模块依赖过于 耦合，以致于一个很简单页面，也要加载一堆CSS以及JS, 显得较重等~

这些是问题吗？确实是！可是，千万不要用你狭隘的眼神去评判之，指责之，或者本身为是走自认为最精简，代码最完美度方案——不成熟。多人协做、工程化等是个很复杂的事情，舍弃一点点完美的代码退而求其次，其实是种大智。

做为一个游击战士，必定要有着眼大局，退而求其次的意识。若是你实在看不惯，你能够主动请缨去该团队，帮助其解决方案进一步完善。那你晋级考评什么 的一定妥妥的！若是没有这份心，就作好本身的工做，跟大部队一块儿，拧成一股绳，把产品质量、体验作好，这些才是更要关注的更高境界。

④ 乐于接受并学习新事物

不一样部门，不一样团队显然其使用的一些技术选型都是不同的，有的多是你一直不推崇的方式，此时怎么办？

作技术的人，必定要有博大的胸怀，去接受各类不一样思想、不一样工具、不一样的开发模式。那种歧视用QQ邮箱，鄙弃党员，鄙视陆琪的人实际上是很幼稚与狭隘的。我虽不赞同，但我乐于接受。

尤为你想成为游击开发专家，天然这方面要更甚一筹。我年初有个项目，颇有意思，使用Git协做开发，头一遭，好在我对Git没啥特别的情感，一番折 腾，感受不错，学到了不少东西，并且最后合做也很顺利。看到没，诸位，前端游击战的好处在于有机会学习其余知识、接触其余时髦的工具，若是你是狭隘的排斥 的，不乐于接受与学习的话，其实是阻碍了本身的成长与发展。

再举个更有表明性的例子，我是个忠实的不推崇Sass, Less, 以及Stylus的人，我是个道家主义者，推崇本源、无为而治。虽不推崇，但我很乐于接受这方面的知识，关注这方面的发展，甚至，12年时候，花大功夫翻译了stylus的中文文档，目前也就这一文档吧。最近的一个项目，嘿，就是基于Less的生成CSS的，遇到了本身一贯不推崇的东西。虽然，合做的小伙伴说，你直接写CSS代码也是能够的。但我仍是还乐意地用起了Less⑵, 当年翻译Stylus积累的知识2年后竟然起了做用，分分钟上手。最后，开发开心，我也开心，你们都开心。

因此，像咱们写代码的，不管什么时候，都不能被本身所掌握的那点技术造成的世界观所束缚，接受不一样风格的人，不一样技术背景的人，不一样技术擅长点的人。招 聘的时候尤为注意，狭隘的技术人老是倾向于招聘跟本身同类的人，最后，就是个全是中锋的球队，作出来的东西嘛，我就不说什么了。

⑵ 切记，前端游击战要想打得好，必须使用团队的技术方案！不然你本身开发时候顺手爽，完了合做同事三天两头找你有得烦！

3. 文档以及注释

沟通很顺畅，开发制做时候也是按照了团队的规范、方案走了，而后直接SVN提交拍屁股走人？且慢，还有个很重要的东西，就是文档以及详尽的注释。

前端游击战的精髓之一就是「游」，你说你啥都不交代，回头前端开发遇到疑问还不是得来找你，你游啊？你游得走嘛！磨刀不误砍柴工，写好文档，写好注释，顺利交工。开发开心，你也开心，你们都开心！

有不少人真是不擅长写文档，从小怕写做文给烙下的阴影。其实呢，不要多专业，只要换位思考下就能够了。脑补下，跟我交接的小伙伴，他什么都不知道， 第一次看到我这个代码，他知道该如何触发这里效果显示吗？稍微一想就会发现，擦，我这里不写点内容，就是亲妈来了也不知道这里要加个.active的类名啊！因而，你就能够注释了：

<!-- 
注意，前方高能：
这里点击显示下拉直接经过添加和删除类名.active便可；
禁用使用类名.disable;
注意这里HTML位置，以及后面不能换行，以避免出现空格
...
-->

多站在对方立场考虑，天然就知道该写些什么了。若是你仍是驾驭不了，恩，能够文末的邮箱联系我，我会传授写做大法，祝你练成神功 。

3、结语以及广告

你东西作的好，合做开心，别人都找你，才会有游击战这种模式。下面问题来了，1. 如何作的好？首先最最重要的 是超出常人，开发所望尘的敏感的设计之心，作出来的东西必须可以精确传达设计思想、交互体验（不然，合做团队里的前端直接开发岂不更爽气）；而后是须要比 较多的积累，一是深度，要你介入多深，你就能有多深；二是广度，我之前经常深刻研究业务之外的知识点，结果为如今在各个团队快速上手打下了较好的的基础。2. 如何合做开心？心胸宽广，视野开阔，团队合做放在第一位；过于我的的东西舍弃、团队的东西跟随，不会的东西学习，交接文档要清楚等。

根据我没有依据的猜测，这种游击战风格的前端开发模式应该不多见。要是哪一个厂子或者团队看到了本文，不管有没有兴趣，均可以试试这种开发模式，对吧，要有宽广的胸怀，能够不赞同，但心里要乐于接受，说不定能提升产品情感化方面的档次与质量，能与腾讯的产品竞争呢！

最后，打一个广告，若是哪位小伙伴想和我一块儿愉快地打游击战，能够发送简历至zhangxinxu@zhangxinxu.com, 有信必回。

原文来自： 腾讯ISUX