NO IMAGE

有不少前端工程師,在寫簡歷時就發愁。簡歷中的專案怎麼寫,怎麼描述。覺得自己雖然工作了好幾年,做過許多專案,但是覺得都沒做什麼高大上的事情,自然就覺得沒啥可寫的。或者覺得做的事情都一樣,寫來寫去都那幾樣。

這裡我獻醜,貢獻幾個專案經驗寫法的小例項!


一、第一種專案風格

專案:騰訊管家前端動畫

作品描述:該專案將一個完整flash劇情動畫還原成一個由JS CSS3實現的前端動畫。

連結https://dxb123456.github.io/tengxun/

實現技術:CSS HTML JS H5 CSS3 jqury;

專案難點

1.定時器的清除
部分動畫效果需要js自動生成,時間的控制使用了timeout和innertal,其中timerout包含了innertal,點選事件和定時器不在同一個js檔案中,快速來回點選的時候,定時器清除不起作用。
解決方案:將該li對應頁的所有定時器繫結在該li身上,每次點選的時候清除timeout和innertal。

2.帶陰影折線運動處理
對於傾斜的div通過js改變其高度,並且按照數學邏輯改變top和left值的情況下,div在運動時候會出現偏移,和抖動。
解決方案:給div一個運動基準點,這樣div在運動的時候就無需改變top和left值,只需要改變寬度或高度即可。

3.拋物線的運動
css中兩個點運動都是直線運動。
解決方案:給初始點一個旋轉角度,這樣看起來就有拋物線的感覺。

4.遮罩層處理
在多層級的html渲染中,中間圖層的遮罩效果無法實現。
解決方案:遮罩層可以在最底層使用,但是中間層級的遮罩效果需要對圖片進行處理,改成png圖片,再進行css操作。

5.卡頓的處理
在Firefox和ie中,小圖示的緩慢移動效果會出現卡頓。
解決方案:給運動時間的時候,判斷如果不是chrome瀏覽器,減小運動時間。

6.效能的優化
圖片的使用讓動畫載入的速度變慢,影響使用者體驗。
解決方案:對部分能使用div代替的圖片採用div生成,對程式碼,圖片進行深度壓縮上傳等。


二、第二種專案風格

專案一:奕賞

專案描述:本專案是一款手機端APP,採用vue框架構建,其中涉及swiper觸控滑動模組,slide子頁之間採用了懶載入技術保證使用者體驗,iscroll上拉載入下拉重新整理模組,購物車模組與登入註冊模組均採用了本地儲存技術。

崗位職責:主要負責頁面的佈局和資料渲染,並且配合APP完成頁面的巢狀。

專案架構

1.使用vue框架,以及vue-router構建單頁面應用。
2.專案採用vuex處理各元件間的通訊,vue-resource處理請求,使用mint-ui元件庫中部分功能進行快速開發,通過vue-cli 快速搭建開發環境。
3.採用手機淘寶適配方案。
4.使用阿里向量圖示庫。

技術要求

  1. 運用HTML5語義化標籤 CSS3新特性進行頁面佈局,實現頁面的動態效果,提高程式碼的清 晰度和程式碼質量,將頁面體現的更加豐滿,程式碼更健壯。
  2. 運用vue.js開發,採用前後端分離開發模式。
  3. 運用vue.js中的指令和服務與後臺介面對接,進行資料互動,進行頁面渲染,實現功能 模組的判斷。
  4. 使用JavaScript實現某些功能的邏輯處理和某些頁面的動態效果。
  5. 專案測試階段可以自己用node連線資料庫進行介面對接和資料渲染模擬,測試功能模組 是否完善,邏輯處理是否正確。
  6. 運用swiper框架進行部分頁面的設計。
  7. 運用sass進行程式碼的編寫,運用gulp進行程式碼的整理和壓縮。

專案二:省錢日報

專案描述:本專案是一個促銷商品推薦網站的移動APP,使用vue webpack構建的單頁面應用,專案採用了vuex、vue-route、vue-resource以及ES6語法,採用元件化思想搭建整個專案,從而使元件高度複用,程式碼十分簡潔。

崗位職責:主要負責專案頁面的佈局和資料渲染,完成與後端的介面對接,配合後端的對接聯調,解決不同瀏覽器或者不同手機端頁面佈局錯亂的問題。

專案架構

1.使用vue框架,以及vue-router構建單頁面應用。
2.使用vue webpack構建專案環境。
3.採用手機淘寶適配方案。
4.使用阿里向量圖示庫。

技術要求

1.專案採用node(express框架) mysql來搭建後臺伺服器;
2.基於webpack來搭建專案工程,配置第三方外掛;
3.使用vue框架,vue-router搭建專案路由,vuex來實現單檔案元件和資料的抽離
4.使用Swiper實現首頁banner的輪播切換,iscoll結合ajax實現上拉載入,下拉重新整理
5.合理使用鉤子函式,實現資料的監聽、渲染頁面、頁面節點的例項化功能。