title: 我在阿里这仨月 categories:
<h2 id="_1"><a class="headeranchor-link" name="user-content-_1" href="#_1"></a></h2>
<p>Alibaba 试用期是三个月，转眼三个月过去了，也到了转正述职的时间。回想这三个月做过的事情，很多很杂，但还是有重点。</p> <p>本文谈一谈工作中遇到的各种场景，需要用到的一些前端知识，以及我对前端进阶学习的一点思考。</p> <h3 id="_2"><a class="headeranchor-link" name="user-content-_2" href="#_2"></a>一、漫谈</h3> <p>刚入职不久阿里巴巴就上市了，这是件振奋人心的事情。实际上在正式入职之前，我就已经在淘宝UED实习了三个月，所以这边的工作环境和开发流程都比较熟悉了。</p> <p>在工作中，遇到了很多这样的场景：</p> <h4 id="1-bug"><a class="headeranchor-link" name="user-content-1-bug" href="#1-bug"></a>1. 线上 bug 处理</h4> <blockquote> <p>运营："嘿，小胡子，有客户反馈这个提交表单的页面中，上传图片预览总是失败，麻烦你跟进下这个case~"。 小胡子哥："哦，好的！"</p></blockquote>
<p>这个时候手头可能有很多工作，但记住一个原则，线上问题的优先级是最高的，"客户第一"是阿里也是所有公司必须秉承的一个价值观理念。</p> <p>打开浏览器，发现我这边并没有图片上传预览失败的问题，我纳闷了良久，期间让用户尝试换浏览器、电脑，未果，最后不得不远程连接客户的电脑，查看问题。（最后定位原因为某个地区的 CDN 出了问题）</p> <h4 id="2"><a class="headeranchor-link" name="user-content-2" href="#2"></a>2. 网站改版（前端开发流程）</h4> <blockquote> <p>老大："小胡子，以后你就负责这两条业务线了哈~"。 小胡子哥："嗯"。 某天，运营："网站上线几个新增功能，之前的流程需要优化，本次将对 xx网站改版，几哩吧啦几哩吧啦..... 小胡子啊，几哩吧啦几哩吧啦....."。 小胡子哥："这个需求前端实现成本太高，是不是可以这样；这个地方的修改，几哩吧啦几哩吧啦.....好的！"。</p></blockquote>
<p>一个大的需求过来，一般会经过多次评审。刚开始是产品GG和运营MM们互喷口水，喷完了PRM评审也就完了，那么这个时候一般就确定要做什么啦，然后会把前端、视觉、开发等同学都叫过去参加交互评审，交互评审敲定之后，视觉同学就回去画图啦，这个时候后端同学会去准备数据，前端同学会跟视觉MM联系紧密，形影不离。</p> <p>视觉稿设计完了之后，前端就正式投入开发了。刚开始会面临一个问题，前后端的接口谁来拟订？</p> <p>后端数据还在准备中，<strong>如果后端拟订接口</strong>，则刚开始后端需要模拟数据，此时接口地址和前端开发环境还不在一个域下，取数据存在跨域问题，如果先改成 jsonp 的接口，开发完毕再改成 json 接口，那么后续程序也需要跟着一起改动。<strong>如果前端拟订接口</strong>，则前端需要在本地 mock 数据，若开发完毕时后端数据依然没有准备好，那么联调又是一个麻烦事儿，可能后端还得模拟一次数据，这样前端后端都实现了依次数据模拟，重复工作，冗余。庆幸的是我们有数据接口拟订的工具，这个工具可以将接口信息以文档形式沉淀，并且提供了可跨域访问的 mock 数据，接口的修改也变得异常方便。</p> <p>好，既然有工具，那我就辛苦点吧~ 写好数据接口，交给后端同学 review，然后开始切图（做业务嘛，唉...）公司内部使用的前端框架叫做 <a href="http://docs.kissyui.com/5.0/">KISSY</a>，目前已经升级到 5.0，而使用比较多的还是 1.4.x 版本。这是个啥玩意儿呢，很多公司没有自己的框架，于是便使用 JQ 开发，这个 KISSY 也是一样的，他就是公司的 JQuery，不过框架对业务更加有亲和力，KISSY 提供了数量庞大的组件和插件，易用性很强，但学习有一定的门槛。</p> <p>使用 KISSY 完成业务逻辑的开发。我们会将代码发布到 CDN 上，这点我需要得瑟下，阿里的前端发布系统真是好用到了极致！因为 HTML 部分是后端管的，我们开发好 HTML/CSS/JS 之后，会将 HTML 交给后端同学，同时将静态资源 (CSS/JS/IMG) 发布到线上，图片可以直接上传，CSS和JS在本地打包之后，push 到仓库，系统会自动完成 CDN 部署，一般前端的改动在两分钟之内就能在线上见效，一天发布几十个版本毫无压力，不像某度公司，胆战心惊的排着长队发布一个小小的改动，发布的时候还担心别人抢先上线，自己又得 merge 代码（去年在百度实习情况还是这样，不知道如今改善了多少）。</p> <p>待后端同学也开发完毕后，我们会把测试MM叫到旁边，让她们帮着测试系统bug，这个时候也可以把运营MM叫过来一起测试，修完 bug 就可以正式上线了。</p> <p>所以在阿里，前端资源是提早上线的，完了后端代码才会上。上面所说皆为 PC 端的开发流程，Mobile 端还是有很大差异，这里就不细说了。</p> <h4 id="3"><a class="headeranchor-link" name="user-content-3" href="#3"></a>3. 需求的变更</h4> <blockquote> <p>小胡子哥正在得瑟顺利的完成了一个项目的开发，可是此时，运营MM跑过来说："某个功能因为xx原因本期不能上线了，需要等到V2版本再发，需要前端协助删除xx模块。" 小胡子寻思着，皱了皱眉头。运营MM含情脉脉的对视着小胡子，小胡子说："那，好吧，改完之后需求还变么？" 运营MM点了点头，然后又摇了摇头。 小胡子心想："妈蛋"。</p></blockquote>
<p>然后继续上述流程。</p> <p>那些还没有出过校门的童鞋们，看到这里，你是不是对公司项目的开发有了大概的了解呢？以上的三个场景是十分常见的，但是在公司绝不仅仅只干这些事情。</p> <p>在这三个月里，我参与了一个前端自动化检测工具的开发，完成了前后端的改造。所用到的技术嘛，稍微列一列：</p> <ul> <li>websocket 实时通讯</li> <li>scss/less css预处理语言</li> <li>grunt/gulp 打包工具</li> <li>MVC 分离思想</li> <li>Promise 异步编程框架</li> <li>Middleware 中间件的编写</li> <li>Express Node的框架</li> <li>...</li> </ul> <p>涉及到的技术点，很多很多，这些只是一个项目中用到的部分内容。前端，暗藏无数杀机，如果对基础东西掌握不牢靠，你会发现别人三小时搞定的事情，到你这里就得三天，因为你一直在踩坑！</p> <h3 id="_3"><a class="headeranchor-link" name="user-content-_3" href="#_3"></a>二、前端进阶的思考</h3> <blockquote> <p>很多优秀的前端同学，在学到一定水平之后，会感觉学到尽头了，每天愁着怎么去学习新知识，学习什么新知识。也有很多同学，学习的重点跟工作后的从事内容偏差颇大。所以我想着能不能在这方面跟大家交流一下，一起探讨。</p></blockquote>
<p>我在微博上也提出了这样的问题。很多同学学习没有规律，今天来点这个明天来点那个，学完之后感觉自己都懂了，但没有太多的平台/工具来检测自己所学是不是到位，然后突然某一天问道，下一步我该学啥？</p> <p>每个人成长都有一个过程，在这个过程中，我们会经历多次蜕变。踏过前端门槛之后，下一步要想的事情是进阶，提升自己的技能。</p> <p>在进阶方面，我问个简单的问题：git，你熟练么？</p> <p>前端发布资源到 CDN 采用的就是 git，诸如 add commit diff log status tag remote push merge 等等，这些 git 常用命令，你是否都熟悉了？git 的版本管理有哪些思路，比如线上出现了 bug，你会如何处理程序，新建分支开发？在原有基础上开发？如何管理版本？等等。</p> <p>很多知识是需要花费大量的时间学习的，比如 backbone, JQuery源码分析, MVVM, 设计模式, HTTP协议, 响应式, 异步编程, 模块化, websocket, DOM监控, 本地储存, 浏览器渲染原理等等，平时学习的时候可以把这些关键字枚举下，然后针对每个关键字延伸学习。</p> <p>延伸学习的方式很简单，google 一个关键词你能看到十几篇优秀的博文，再这些博文中寻找新的关键字，直到整个大知识点得到突破。我一直都是这么学习的。</p> <h3 id="_4"><a class="headeranchor-link" name="user-content-_4" href="#_4"></a>三、小结</h3> <p>好吧，叽哩咕噜又扯了一堆，阿里巴巴是个不错的公司，如果想过来的话，可以联系我哟~ 学习是件长久并且艰苦的事情，收拾好心情，先睡个好觉，明天搞起吧！</p>