這里我獻丑，貢獻幾個項目經驗寫法的小實例！

一、第一種項目風格

項目：騰訊管家前端動畫

作品描述：該項目將一個完整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.帶陰影折線運動處理 
        對于傾斜的p通過js改變其高度，并且按照數學邏輯改變top和left值的情況下，p在運動時候會出現偏移，和抖動。 
   解決方案：給p一個運動基準點，這樣p在運動的時候就無需改變top和left值，只需要改變寬度或高度即可。
3.拋物線的運動 
         css中兩個點運動都是直線運動。 
   解決方案：給初始點一個旋轉角度，這樣看起來就有拋物線的感覺。
4.遮罩層處理 
     在多層級的html渲染中，中間圖層的遮罩效果無法實現。 
   解決方案：遮罩層可以在最底層使用，但是中間層級的遮罩效果需要對圖片進行處理，改成png圖片，再進行css操作。
5.卡頓的處理 
      在Firefox和ie中，小圖標的緩慢移動效果會出現卡頓。 
   解決方案：給運動時間的時候，判斷如果不是chrome瀏覽器，減小運動時間。
6.性能的優化 
      圖片的使用讓動畫加載的速度變慢，影響用戶體驗。 
   解決方案：對部分能使用p代替的圖片采用p生成，對代碼，圖片進行深度壓縮上傳等。

二、第二種項目風格

項目一：奕賞

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

以上就是前端工程師簡歷中的項目經驗怎么寫的詳細內容，更多請關注php中文網其它相關文章！