寫在前面

首先非常感謝qunar給我的這次寶貴的實(shí)習(xí)機(jī)會(huì)，有幸可以在flight-fe實(shí)習(xí)。在qunar已經(jīng)工作兩個(gè)月多的時(shí)間，期間學(xué)習(xí)到很多的新東西，了解并體驗(yàn)了整個(gè)開發(fā)流程。最重要的是在生產(chǎn)環(huán)境下寫了一些代碼，感受很深。在qunar的這段時(shí)間對(duì)我成長幫助很大，讓我對(duì)前端開發(fā)也有了新的認(rèn)識(shí)，受益匪淺。

實(shí)習(xí)過程

1 關(guān)于開發(fā)環(huán)境

在學(xué)校的時(shí)候，不太可能接觸到真實(shí)的公司開發(fā)環(huán)境。所以，一直對(duì)開發(fā)環(huán)境非常好奇。能想到的除了版本控制，可能也就是sublime或者webStorm這些開發(fā)工具了。開始入職之后，用了兩天的時(shí)間配置了開發(fā)環(huán)境，現(xiàn)在想想也夠低能的了。其中包括fekit、qzz、nginx、node等等。搞了半天也不明白自己到底在做什么。當(dāng)跑起來一個(gè)項(xiàng)目之后，瞬間有點(diǎn)受刺激。明明訪問的qunar域名，請求到的卻是本地文件。后面慢慢的理解，我認(rèn)為的麻煩實(shí)際上是極大的方便了開發(fā)。fekit完全包攬了所有的前端開發(fā)需求，方便本地開發(fā)，靜態(tài)文件的編譯，還可以當(dāng)包管理器使。最重要的是，打包發(fā)布。不知道是哪位前輩所做，在這表達(dá)一下敬意。
????touch的開發(fā)環(huán)境，很有意思。后端是一個(gè)項(xiàng)目，前端有一個(gè)qzz項(xiàng)目，還有Zeus項(xiàng)目。一直以為qzz項(xiàng)目用不到，直到要發(fā)beta的時(shí)候我才明白了。原來前端都是在qzz上面。后來一直考慮為什么前端有兩個(gè)項(xiàng)目，Zeus到底做了什么，想了想發(fā)現(xiàn)Zeus支持了本地開發(fā)，編譯了sass，一個(gè)ctrl+s就直接同步到了瀏覽器。從后臺(tái)打印信息來看，是用的推送。后來了解了一下，Websocket做的類似熱部署。再后來在使用weinre的時(shí)候發(fā)現(xiàn)，好像weinre應(yīng)該也用到了同樣的東西。然后想想自己low到爆的ajax輪詢，默默的在本上記下“推送”這個(gè)關(guān)鍵字，加入學(xué)習(xí)計(jì)劃。另外，IDEA是一個(gè)牛逼的IDE。

2 關(guān)于項(xiàng)目經(jīng)歷

1 天地行項(xiàng)目
???? 參與的第一個(gè)項(xiàng)目是“天地行項(xiàng)目”。主要負(fù)責(zé)PNR導(dǎo)入頁、部分mustache模板開發(fā)、模板渲染以及一些簡單功能比如經(jīng)停退改簽等等的開發(fā)。接觸到了mustache、kendo等沒有接觸過的技術(shù)。在開發(fā)過程中，也學(xué)習(xí)了公司的開發(fā)規(guī)范。對(duì)于jquery的API使用和原理也有了一些提高。期間也學(xué)習(xí)了項(xiàng)目中的部分代碼，第一次見設(shè)計(jì)模式的使用還是很新奇的。
???? 濤哥有一天過來笑呵呵問我說：小伙子有什么問題。技術(shù)上的、業(yè)務(wù)上的、項(xiàng)目上的。當(dāng)時(shí)突然就理清了在“天地行”項(xiàng)目上面的一些問題。PRN導(dǎo)入、黑屏建單、白屏建單、聯(lián)程、政策等等問題都屬于業(yè)務(wù)問題。而jquery的緩存原理屬于技術(shù)問題。組件的使用，老代碼的維護(hù)修改則屬于項(xiàng)目問題。現(xiàn)在想想也很簡單，但是當(dāng)時(shí)懵到不行，還是不夠思維清晰沒有理清楚思路。
???? 在天地行項(xiàng)目中，最大的收獲可能不是技術(shù)上的而是對(duì)于開發(fā)環(huán)境的熟悉，和項(xiàng)目開發(fā)的認(rèn)識(shí)。一個(gè)新的項(xiàng)目，在開發(fā)之初會(huì)做好設(shè)計(jì)工作。包括類庫、框架的選擇，項(xiàng)目開發(fā)規(guī)范的約定。開發(fā)完畢之后需要和后端聯(lián)調(diào)，聯(lián)調(diào)完畢需要測試，之后再發(fā)布上線。項(xiàng)目在開發(fā)過程中可能經(jīng)歷本地開發(fā)環(huán)境、DEV環(huán)境、BETA環(huán)境。不同環(huán)境需要不同的配置，當(dāng)然fekit和qzz起到的非常重要的作用。
????2 機(jī)票touch改版項(xiàng)目
???? touch改版是我第一次負(fù)責(zé)一個(gè)模塊的開發(fā)，也是第一次嘗試移動(dòng)端的開發(fā)。主要負(fù)責(zé)機(jī)票首頁和城市列表頁的開發(fā)。移動(dòng)端的開發(fā)，相對(duì)來說可以使用的技術(shù)更廣泛，HTML5、CSS3、ES5等等相對(duì)選擇更多。但是麻煩的是，設(shè)備的性能決定代碼的質(zhì)量要比較高。減少DOM操作，HTML盡量精簡且語義化要好，JS耗時(shí)的操作也得盡可能避免。最讓人頭疼的是瀏覽器的兼容性問題，因?yàn)橐苿?dòng)設(shè)備的特殊性，調(diào)試起來還是相當(dāng)麻煩的。對(duì)于復(fù)雜的UI設(shè)計(jì)和交互效果，做起來還是很吃力的。
???? 在touch改版項(xiàng)目中，使我的切圖技術(shù)提高很多。對(duì)于標(biāo)簽語義化也有了新的理解。CSS方面，學(xué)習(xí)使用到了伸縮盒模型flex布局、線性漸變、calc、響應(yīng)式布局、媒體查詢、非對(duì)稱圓角、水平垂直居中等等。HTML書寫上更加注意到語義化標(biāo)簽，模塊的劃分，DOM的復(fù)用，避免多余的wrapper等等問題。選擇器的命名規(guī)范，嚴(yán)格區(qū)分CSS和JS的使用，避免使用標(biāo)簽選擇器等等可能造成安全風(fēng)險(xiǎn)和維護(hù)困難的問題。JS方面。對(duì)于項(xiàng)目組件化有了一些理解，JS文件的頁面劃分，功能劃分也有了一些認(rèn)識(shí)。在review代碼的過程中，學(xué)習(xí)到了很多。對(duì)于開發(fā)原則、JS代碼規(guī)范、解耦、面向?qū)ο缶幊桃灿辛诵碌恼J(rèn)識(shí)。也嘗試著做了一些性能優(yōu)化的工作，感受很多。
???? 好代碼是改出來的——濤哥。自己寫的代碼就像自己的孩子——宇歡。對(duì)于這兩句名言，也是感觸很深。開始在解耦首頁與城市列表頁的邏輯的時(shí)候，感覺牽一發(fā)動(dòng)全身改起來相當(dāng)?shù)睦щy。然后改著改著就順利了。感覺思路越來越清晰。同樣的在修bug的時(shí)候，也是把握不住，不斷的打斷點(diǎn)來定位。后來bug提上來，想一下大概就知道是什么地方出問題了。很慚愧，估計(jì)bug率創(chuàng)紀(jì)錄了。雖然到現(xiàn)在為止好像沒有大的問題了，但是我自己心里了解，代碼還是不夠清晰不夠魯棒，應(yīng)該可以做的更好。
???? 關(guān)于移動(dòng)端兼容性的一點(diǎn)總結(jié)：雖然移動(dòng)端瀏覽器已經(jīng)很好的支持了CSS3和HTML5.但是不同廠家在實(shí)現(xiàn)標(biāo)準(zhǔn)的時(shí)候還是有很大的差異的。比如說UC對(duì)于線性漸變的解釋就和標(biāo)準(zhǔn)有些不同。首頁的搜索記錄末尾需要一個(gè)模糊遮罩，使用黑色透明零漸變到白色透明零，其他瀏覽器都是支持的，但是在UC上就有bug，必須使用白色漸變到白色。另外active在UC上也是不被支持的，當(dāng)你選擇使用touchstart和touchend來模擬active時(shí)，不好意思UC的touchmove和touchend是有bug的。最后只能在tap事件上做一個(gè)延遲的效果來模擬active。對(duì)于flex布局，必須嚴(yán)格的按照規(guī)范來書寫。有時(shí)候可能不給父容器確定的寬高可以，但是chrome會(huì)告訴你這樣做不可以。實(shí)際上我所理解的大多數(shù)兼容性問題出現(xiàn)在瀏覽器的容錯(cuò)性上，也就是說我的代碼實(shí)際上是不那么規(guī)范的。但是，也有些情況下是存在不可避免的問題，那么就需要降級(jí)處理或者使用hack寫法。

我的反思

不得不承認(rèn)，我有很多的缺點(diǎn)。計(jì)劃不夠，有些急于求成。在實(shí)習(xí)開始的一段時(shí)間，坦白的講我顯的比較急躁。迫切的想投入到項(xiàng)目中去，沒有靜下心來好好的研究業(yè)務(wù)。開始的時(shí)候，每天會(huì)覺得比較閑沒有事情要做也很苦惱。后來，和導(dǎo)師交流了一下。導(dǎo)師問我，做完了功能點(diǎn)，那你有沒有閱讀這個(gè)功能相關(guān)的代碼，航班是怎么渲染的有沒有了然于心。這句話點(diǎn)醒了我。實(shí)際上是自己的心態(tài)問題，還是不夠沉穩(wěn)，急于求進(jìn)不是一件好事。實(shí)習(xí)快完了還是有很多的遺憾，計(jì)劃學(xué)習(xí)的jquery緩存還沒有徹底搞清楚、想用Python來實(shí)現(xiàn)一個(gè)修改host即改即生效程序也沒有實(shí)現(xiàn)、使用一次websocket也沒有能抽出時(shí)間。越想越覺得自己low到?jīng)]朋友了。好消息是我還有時(shí)間去靜下心來做想做而沒有做完的事情。是時(shí)候閉關(guān)修煉了。

感謝

1 感謝做了我兩天導(dǎo)師的 @佳梅，在我有些凌亂的時(shí)候幫助我理清了思路。
2 感謝導(dǎo)師 @張宏，非常有耐心的解釋問題甚至舉一反三。
3 感謝 @宇歡 導(dǎo)師，數(shù)不清回答了我多少問題了。不說了，你懂的。
4 感謝 @地木 多次回答了我的問題，謝謝支持。
5 謝謝 @張老師 @俞斌 的分享，很精彩。另外，張老師真的應(yīng)該當(dāng)老師。
6 感謝 @濤哥 @文祥 @君婷 @張哲 @海斌 @Flight-FE @測試 @PM 你們受苦了。

H5定位

依賴jquer

<pre>

• html方式綁定類名即可
  <div class="h-location">點(diǎn)我定位</div>
• js方式，傳遞一個(gè)回調(diào)到getLocationCity即可
  getLocationCity(function(err,result){ //
  if(err){console.log(err); return false;}
  console.log("定位到的城市是："+result);
  })
  }
  </pre>