实习总结

写在前面

---

首先非常感谢qunar给我的这次宝贵的实习机会，有幸可以在flight-fe实习。在qunar已经工作两个月多的时间，期间学习到很多的新东西，了解并体验了整个开发流程。最重要的是在生产环境下写了一些代码，感受很深。在qunar的这段时间对我成长帮助很大，让我对前端开发也有了新的认识，受益匪浅。

实习过程

---

1 关于开发环境

在学校的时候，不太可能接触到真实的公司开发环境。所以，一直对开发环境非常好奇。能想到的除了版本控制，可能也就是sublime或者webStorm这些开发工具了。开始入职之后，用了两天的时间配置了开发环境，现在想想也够低能的了。其中包括fekit、qzz、nginx、node等等。搞了半天也不明白自己到底在做什么。当跑起来一个项目之后，瞬间有点受刺激。明明访问的qunar域名，请求到的却是本地文件。后面慢慢的理解，我认为的麻烦实际上是极大的方便了开发。fekit完全包揽了所有的前端开发需求，方便本地开发，静态文件的编译，还可以当包管理器使。最重要的是，打包发布。不知道是哪位前辈所做，在这表达一下敬意。
    touch的开发环境，很有意思。后端是一个项目，前端有一个qzz项目，还有Zeus项目。一直以为qzz项目用不到，直到要发beta的时候我才明白了。原来前端都是在qzz上面。后来一直考虑为什么前端有两个项目，Zeus到底做了什么，想了想发现Zeus支持了本地开发，编译了sass，一个ctrl+s就直接同步到了浏览器。从后台打印信息来看，是用的推送。后来了解了一下，Websocket做的类似热部署。再后来在使用weinre的时候发现，好像weinre应该也用到了同样的东西。然后想想自己low到爆的ajax轮询，默默的在本上记下“推送”这个关键字，加入学习计划。另外，IDEA是一个牛逼的IDE。

2 关于项目经历

1 天地行项目
     参与的第一个项目是“天地行项目”。主要负责PNR导入页、部分mustache模板开发、模板渲染以及一些简单功能比如经停退改签等等的开发。接触到了mustache、kendo等没有接触过的技术。在开发过程中，也学习了公司的开发规范。对于jquery的API使用和原理也有了一些提高。期间也学习了项目中的部分代码，第一次见设计模式的使用还是很新奇的。
     涛哥有一天过来笑呵呵问我说：小伙子有什么问题。技术上的、业务上的、项目上的。当时突然就理清了在“天地行”项目上面的一些问题。PRN导入、黑屏建单、白屏建单、联程、政策等等问题都属于业务问题。而jquery的缓存原理属于技术问题。组件的使用，老代码的维护修改则属于项目问题。现在想想也很简单，但是当时懵到不行，还是不够思维清晰没有理清楚思路。
     在天地行项目中，最大的收获可能不是技术上的而是对于开发环境的熟悉，和项目开发的认识。一个新的项目，在开发之初会做好设计工作。包括类库、框架的选择，项目开发规范的约定。开发完毕之后需要和后端联调，联调完毕需要测试，之后再发布上线。项目在开发过程中可能经历本地开发环境、DEV环境、BETA环境。不同环境需要不同的配置，当然fekit和qzz起到的非常重要的作用。
    2 机票touch改版项目
     touch改版是我第一次负责一个模块的开发，也是第一次尝试移动端的开发。主要负责机票首页和城市列表页的开发。移动端的开发，相对来说可以使用的技术更广泛，HTML5、CSS3、ES5等等相对选择更多。但是麻烦的是，设备的性能决定代码的质量要比较高。减少DOM操作，HTML尽量精简且语义化要好，JS耗时的操作也得尽可能避免。最让人头疼的是浏览器的兼容性问题，因为移动设备的特殊性，调试起来还是相当麻烦的。对于复杂的UI设计和交互效果，做起来还是很吃力的。
     在touch改版项目中，使我的切图技术提高很多。对于标签语义化也有了新的理解。CSS方面，学习使用到了伸缩盒模型flex布局、线性渐变、calc、响应式布局、媒体查询、非对称圆角、水平垂直居中等等。HTML书写上更加注意到语义化标签，模块的划分，DOM的复用，避免多余的wrapper等等问题。选择器的命名规范，严格区分CSS和JS的使用，避免使用标签选择器等等可能造成安全风险和维护困难的问题。JS方面。对于项目组件化有了一些理解，JS文件的页面划分，功能划分也有了一些认识。在review代码的过程中，学习到了很多。对于开发原则、JS代码规范、解耦、面向对象编程也有了新的认识。也尝试着做了一些性能优化的工作，感受很多。
     好代码是改出来的——涛哥。自己写的代码就像自己的孩子——宇欢。对于这两句名言，也是感触很深。开始在解耦首页与城市列表页的逻辑的时候，感觉牵一发动全身改起来相当的困难。然后改着改着就顺利了。感觉思路越来越清晰。同样的在修bug的时候，也是把握不住，不断的打断点来定位。后来bug提上来，想一下大概就知道是什么地方出问题了。很惭愧，估计bug率创纪录了。虽然到现在为止好像没有大的问题了，但是我自己心里了解，代码还是不够清晰不够鲁棒，应该可以做的更好。
     关于移动端兼容性的一点总结：虽然移动端浏览器已经很好的支持了CSS3和HTML5.但是不同厂家在实现标准的时候还是有很大的差异的。比如说UC对于线性渐变的解释就和标准有些不同。首页的搜索记录末尾需要一个模糊遮罩，使用黑色透明零渐变到白色透明零，其他浏览器都是支持的，但是在UC上就有bug，必须使用白色渐变到白色。另外active在UC上也是不被支持的，当你选择使用touchstart和touchend来模拟active时，不好意思UC的touchmove和touchend是有bug的。最后只能在tap事件上做一个延迟的效果来模拟active。对于flex布局，必须严格的按照规范来书写。有时候可能不给父容器确定的宽高可以，但是chrome会告诉你这样做不可以。实际上我所理解的大多数兼容性问题出现在浏览器的容错性上，也就是说我的代码实际上是不那么规范的。但是，也有些情况下是存在不可避免的问题，那么就需要降级处理或者使用hack写法。

我的反思

---

不得不承认，我有很多的缺点。计划不够，有些急于求成。在实习开始的一段时间，坦白的讲我显的比较急躁。迫切的想投入到项目中去，没有静下心来好好的研究业务。开始的时候，每天会觉得比较闲没有事情要做也很苦恼。后来，和导师交流了一下。导师问我，做完了功能点，那你有没有阅读这个功能相关的代码，航班是怎么渲染的有没有了然于心。这句话点醒了我。实际上是自己的心态问题，还是不够沉稳，急于求进不是一件好事。实习快完了还是有很多的遗憾，计划学习的jquery缓存还没有彻底搞清楚、想用Python来实现一个修改host即改即生效程序也没有实现、使用一次websocket也没有能抽出时间。越想越觉得自己low到没朋友了。好消息是我还有时间去静下心来做想做而没有做完的事情。是时候闭关修炼了。

感谢

---

1 感谢做了我两天导师的 @佳梅，在我有些凌乱的时候帮助我理清了思路。
2 感谢导师 @张宏，非常有耐心的解释问题甚至举一反三。
3 感谢 @宇欢 导师，数不清回答了我多少问题了。不说了，你懂的。
4 感谢 @地木 多次回答了我的问题，谢谢支持。
5 谢谢 @张老师 @俞斌 的分享，很精彩。另外，张老师真的应该当老师。
6 感谢 @涛哥 @文祥 @君婷 @张哲 @海斌 @Flight-FE @测试 @PM 你们受苦了。

H5定位

依赖jquer

 
 
 
  
html方式绑定类名即可
 
点我定位
 
  
js方式，传递一个回调到getLocationCity即可
 getLocationCity(function(err,result){ //
 if(err){console.log(err); return false;}
 console.log("定位到的城市是："+result);
 })
 }