我在阿里這仨月 前端開發流程 前端進階的思考 延伸學習的方式很簡單：google 一個關鍵詞你能看到十幾篇優秀的博文，再這些博文中尋找新的關鍵字，直到整個大知識點獲得突破

我在阿里這仨月

Alibaba 試用期是三個月，轉眼三個月過去了，也到了轉正述職的時間。回想這三個月作過的事情，不少很雜，但仍是有重點。

本文談一談工做中遇到的各類場景，須要用到的一些前端知識，以及我對前端進階學習的一點思考。

1、漫談

剛入職不久阿里巴巴就上市了，這是件振奮人心的事情。實際上在正式入職以前，我就已經在淘寶UED實習了三個月，因此這邊的工做環境和開發流程都比較熟悉了。

在工做中，遇到了不少這樣的場景：

1. 線上 bug 處理

運營：「嘿，小鬍子，有客戶反饋這個提交表單的頁面中，上傳圖片預覽老是失敗，麻煩你跟進下這個case~」。
小鬍子哥：「哦，好的！」

這個時候手頭可能有不少工做，但記住一個原則，線上問題的優先級是最高的，「客戶第一」是阿里也是全部公司必須秉承的一個價值觀理念。

打開瀏覽器，發現我這邊並無圖片上傳預覽失敗的問題，我納悶了良久，期間讓用戶嘗試換瀏覽器、電腦，未果，最後不得不遠程鏈接客戶的電腦，查看問題。（最後定位緣由爲某個地區的 CDN 出了問題）

2. 網站改版（前端開發流程）

老大：「小鬍子，之後你就負責這兩條業務線了哈~」。
小鬍子哥：「嗯」。
某天，運營：「網站上線幾個新增功能，以前的流程須要優化，本次將對 xx網站改版，幾哩吧啦幾哩吧啦..... 小鬍子啊，幾哩吧啦幾哩吧啦.....」。
小鬍子哥：「這個需求前端實現成本過高，是否是能夠這樣；這個地方的修改，幾哩吧啦幾哩吧啦.....好的！」。

一個大的需求過來，通常會通過屢次評審。剛開始是產品GG和運營MM們互噴口水，噴完了PRM評審也就完了，那麼這個時候通常就肯定要作什麼啦，而後會把前端、視覺、開發等同窗都叫過去參加交互評審，交互評審敲定以後，視覺同窗就回去畫圖啦，這個時候後端同窗會去準備數據，前端同窗會跟視覺MM聯繫緊密，如影隨行。

視覺稿設計完了以後，前端就正式投入開發了。剛開始會面臨一個問題，先後端的接口誰來擬訂？

後端數據還在準備中，若是後端擬訂接口，則剛開始後端須要模擬數據，此時接口地址和前端開發環境還不在一個域下，取數據存在跨域問題，若是先改爲 jsonp 的接口，開發完畢再改爲 json 接口，那麼後續程序也須要跟着一塊兒改動。若是前端擬訂接口，則前端須要在本地 mock 數據，若開發完畢時後端數據依然沒有準備好，那麼聯調又是一個麻煩事兒，可能後端還得模擬一次數據，這樣前端後端都實現了依次數據模擬，重複工做，冗餘。慶幸的是咱們有數據接口擬訂的工具，這個工具能夠將接口信息以文檔形式沉澱，而且提供了可跨域訪問的 mock 數據，接口的修改也變得異常方便。

好，既然有工具，那我就辛苦點吧~ 寫好數據接口，交給後端同窗 review，而後開始切圖（作業務嘛，唉…）公司內部使用的前端框架叫作 KISSY，目前已經升級到 5.0，而使用比較多的仍是 1.4.x 版本。這是個啥玩意兒呢，不少公司沒有本身的框架，因而便使用 JQ 開發，這個 KISSY 也是同樣的，他就是公司的 JQuery，不過框架對業務更加有親和力，KISSY 提供了數量龐大的組件和插件，易用性很強，但學習有必定的門檻。

使用 KISSY 完成業務邏輯的開發。咱們會將代碼發佈到 CDN 上，這點我須要得瑟下，阿里的前端發佈系統真是好用到了極致！由於 HTML 部分是後端管的，咱們開發好 HTML/CSS/JS 以後，會將 HTML 交給後端同窗，同時將靜態資源 (CSS/JS/IMG) 發佈到線上，圖片能夠直接上傳，CSS和JS在本地打包以後，push 到倉庫，系統會自動完成 CDN 部署，通常前端的改動在兩分鐘以內就能在線上見效，一天發佈幾十個版本毫無壓力，不像某度公司，膽戰心驚的排着長隊發佈一個小小的改動，發佈的時候還擔憂別人搶先上線，本身又得 merge 代碼（去年在百度實習狀況仍是這樣，不知道現在改善了多少）。

待後端同窗也開發完畢後，咱們會把測試MM叫到旁邊，讓她們幫着測試系統bug，這個時候也能夠把運營MM叫過來一塊兒測試，修完 bug 就能夠正式上線了。

因此在阿里，前端資源是提前上線的，完了後端代碼纔會上。上面所說皆爲 PC 端的開發流程，Mobile 端仍是有很大差別，這裏就不細說了。

3. 需求的變動

小鬍子哥正在得瑟順利的完成了一個項目的開發，但是此時，運營MM跑過來講：「某個功能由於xx緣由本期不能上線了，須要等到V2版本再發，須要前端協助刪除xx模塊。」
小鬍子尋思着，皺了皺眉頭。運營MM含情脈脈的對視着小鬍子，小鬍子說：「那，好吧，改完以後需求還變麼？」
運營MM點了點頭，而後又搖了搖頭。
小鬍子心想：「媽蛋」。

而後繼續上述流程。

那些尚未出過校門的童鞋們，看到這裏，你是否是對公司項目的開發有了大概的瞭解呢？以上的三個場景是十分常見的，可是在公司毫不僅僅只幹這些事情。

在這三個月裏，我參與了一個前端自動化檢測工具的開發，完成了先後端的改造。所用到的技術嘛，稍微列一列：

• websocket 實時通信
• scss/less css預處理語言
• grunt/gulp 打包工具
• MVC 分離思想
• Promise 異步編程框架
• Middleware 中間件的編寫
• Express Node的框架
• …

涉及到的技術點，不少不少，這些只是一個項目中用到的部份內容。前端，暗藏無數殺機，若是對基礎東西掌握不牢靠，你會發現別人三小時搞定的事情，到你這裏就得三天，由於你一直在踩坑！

2、前端進階的思考

不少優秀的前端同窗，在學到必定水平以後，會感受學到盡頭了，天天愁着怎麼去學習新知識，學習什麼新知識。也有不少同窗，學習的重點跟工做後的從事內容誤差頗大。因此我想着能不能在這方面跟你們交流一下，一塊兒探討。

我在微博上也提出了這樣的問題。不少同窗學習沒有規律，今天來點這個明天來點那個，學完以後感受本身都懂了，但沒有太多的平臺/工具來檢測本身所學是否是到位，而後忽然某一天問道，下一步我該學啥？

每一個人成長都有一個過程，在這個過程當中，咱們會經歷屢次蛻變。踏過前端門檻以後，下一步要想的事情是進階，提高本身的技能。

在進階方面，我問個簡單的問題：git，你熟練麼？

前端發佈資源到 CDN 採用的就是 git，諸如 add commit diff log status tag remote push merge 等等，這些 git 經常使用命令，你是否都熟悉了？git 的版本管理有哪些思路，好比線上出現了 bug，你會如何處理程序，新建分支開發？在原有基礎上開發？如何管理版本？等等。

不少知識是須要花費大量的時間學習的，好比 backbone, JQuery源碼分析, MVVM, 設計模式, HTTP協議, 響應式, 異步編程, 模塊化, websocket, DOM監控, 本地儲存, 瀏覽器渲染原理等等，平時學習的時候能夠把這些關鍵字枚舉下，而後針對每一個關鍵字延伸學習。

延伸學習的方式很簡單，google 一個關鍵詞你能看到十幾篇優秀的博文，再這些博文中尋找新的關鍵字，直到整個大知識點獲得突破。我一直都是這麼學習的。

3、小結

好吧，嘰哩咕嚕又扯了一堆，阿里巴巴是個不錯的公司，若是想過來的話，能夠聯繫我喲~ 學習是件長久而且艱苦的事情，收拾好心情，先睡個好覺，明天搞起吧！