前端工程師簡歷中的項目經(jīng)驗如何寫

這里我獻(xiàn)丑，貢獻(xiàn)幾個項目經(jīng)驗寫法的小實例！

一、第一種項目風(fēng)格

項目：騰訊管家前端動畫

作品描述：該項目將一個完整flash劇情動畫還原成一個由JS+CSS3實現(xiàn)的前端動畫。
鏈接：https://dxb123456.github.io/tengxun/
實現(xiàn)技術(shù)：CSS+HTML+JS+H5+CSS3+jqury；
項目難點：
1.定時器的清除 
        部分動畫效果需要js自動生成，時間的控制使用了timeout和innertal，其中timerout包含了innertal，點擊事件和定時器不在同一個js文件中，快速來回點擊的時候，定時器清除不起作用。 
   解決方案：將該li對應(yīng)頁的所有定時器綁定在該li身上，每次點擊的時候清除timeout和innertal。
2.帶陰影折線運動處理 
        對于傾斜的p通過js改變其高度，并且按照數(shù)學(xué)邏輯改變top和left值的情況下，p在運動時候會出現(xiàn)偏移，和抖動。 
   解決方案：給p一個運動基準(zhǔn)點，這樣p在運動的時候就無需改變top和left值，只需要改變寬度或高度即可。
3.拋物線的運動 
         css中兩個點運動都是直線運動。 
   解決方案：給初始點一個旋轉(zhuǎn)角度，這樣看起來就有拋物線的感覺。
4.遮罩層處理 
     在多層級的html渲染中，中間圖層的遮罩效果無法實現(xiàn)。 
   解決方案：遮罩層可以在最底層使用，但是中間層級的遮罩效果需要對圖片進行處理，改成png圖片，再進行css操作。
5.卡頓的處理 
      在Firefox和ie中，小圖標(biāo)的緩慢移動效果會出現(xiàn)卡頓。 
   解決方案：給運動時間的時候，判斷如果不是chrome瀏覽器，減小運動時間。
6.性能的優(yōu)化 
      圖片的使用讓動畫加載的速度變慢，影響用戶體驗。 
   解決方案：對部分能使用p代替的圖片采用p生成，對代碼，圖片進行深度壓縮上傳等。

二、第二種項目風(fēng)格

項目一：奕賞

項目描述：本項目是一款手機端APP，采用vue框架構(gòu)建，其中涉及swiper觸控滑動模塊，slide子頁之間采用了懶加載技術(shù)保證用戶體驗，iscroll上拉加載下拉刷新模塊，購物車模塊與登錄注冊模塊均采用了本地存儲技術(shù)。
崗位職責(zé)：主要負(fù)責(zé)頁面的布局和數(shù)據(jù)渲染，并且配合APP完成頁面的嵌套。
項目架構(gòu)：
1.使用vue框架，以及vue-router構(gòu)建單頁面應(yīng)用。 
   2.項目采用vuex處理各組件間的通訊，vue-resource處理請求，使用mint-ui組件庫中部分功能進行快速開發(fā)，通過vue-cli 快速搭建開發(fā)環(huán)境。 
   3.采用手機淘寶適配方案。 
   4.使用阿里矢量圖標(biāo)庫。
技術(shù)要求：
運用HTML5語義化標(biāo)簽+CSS3新特性進行頁面布局，實現(xiàn)頁面的動態(tài)效果，提高代碼的清            晰度和代碼質(zhì)量，將頁面體現(xiàn)的更加豐滿，代碼更健壯。
運用vue.js開發(fā)，采用前后端分離開發(fā)模式。
運用vue.js中的指令和服務(wù)與后臺接口對接，進行數(shù)據(jù)交互，進行頁面渲染，實現(xiàn)功能            模塊的判斷。
使用JavaScript實現(xiàn)某些功能的邏輯處理和某些頁面的動態(tài)效果。
項目測試階段可以自己用node連接數(shù)據(jù)庫進行接口對接和數(shù)據(jù)渲染模擬，測試功能模塊         是否完善，邏輯處理是否正確。
運用swiper框架進行部分頁面的設(shè)計。
運用sass進行代碼的編寫，運用gulp進行代碼的整理和壓縮。

項目二：省錢日報

項目描述：本項目是一個促銷商品推薦網(wǎng)站的移動APP，使用vue+webpack構(gòu)建的單頁面應(yīng)用，項目采用了vuex、vue-route、vue-resource以及ES6語法，采用組件化思想搭建整個項目，從而使組件高度復(fù)用，代碼十分簡潔。
崗位職責(zé)：主要負(fù)責(zé)項目頁面的布局和數(shù)據(jù)渲染，完成與后端的接口對接，配合后端的對接聯(lián)調(diào)，解決不同瀏覽器或者不同手機端頁面布局錯亂的問題。
項目架構(gòu)：
1.使用vue框架，以及vue-router構(gòu)建單頁面應(yīng)用。 
   2.使用vue+webpack構(gòu)建項目環(huán)境。 
   3.采用手機淘寶適配方案。 
   4.使用阿里矢量圖標(biāo)庫。
技術(shù)要求：
1.項目采用node(express框架)+mysql來搭建后臺服務(wù)器；  
   2.基于webpack來搭建項目工程，配置第三方插件； 
   3.使用vue框架，vue-router搭建項目路由，vuex來實現(xiàn)單文件組件和數(shù)據(jù)的抽離 
   4.使用Swiper實現(xiàn)首頁banner的輪播切換，iscoll結(jié)合ajax實現(xiàn)上拉加載，下拉刷新 
   5.合理使用鉤子函數(shù)，實現(xiàn)數(shù)據(jù)的監(jiān)聽、渲染頁面、頁面節(jié)點的實例化功能。

以上就是前端工程師簡歷中的項目經(jīng)驗怎么寫的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！