亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

有不少前端工程師，在寫簡(jiǎn)歷時(shí)就發(fā)愁。簡(jiǎn)歷中的項(xiàng)目怎么寫，怎么描述。覺得自己雖然工作了好幾年，做過許多項(xiàng)目，但是覺得都沒做什么高大上的事情，自然就覺得沒啥可寫的?；蛘哂X得做的事情都一樣，寫來寫去都那幾樣。

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

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

項(xiàng)目：騰訊管家前端動(dòng)畫

作品描述：該項(xiàng)目將一個(gè)完整flash劇情動(dòng)畫還原成一個(gè)由JS+CSS3實(shí)現(xiàn)的前端動(dòng)畫。

鏈接：https://dxb123456.github.io/tengxun/

實(shí)現(xiàn)技術(shù)：CSS+HTML+JS+H5+CSS3+jqury；

項(xiàng)目難點(diǎn)：

1.定時(shí)器的清除 

部分動(dòng)畫效果需要js自動(dòng)生成，時(shí)間的控制使用了timeout和innertal，其中timerout包含了innertal，點(diǎn)擊事件和定時(shí)器不在同一個(gè)js文件中，快速來回點(diǎn)擊的時(shí)候，定時(shí)器清除不起作用。 

解決方案：將該li對(duì)應(yīng)頁(yè)的所有定時(shí)器綁定在該li身上，每次點(diǎn)擊的時(shí)候清除timeout和innertal。

2.帶陰影折線運(yùn)動(dòng)處理 

對(duì)于傾斜的div通過js改變其高度，并且按照數(shù)學(xué)邏輯改變top和left值的情況下，div在運(yùn)動(dòng)時(shí)候會(huì)出現(xiàn)偏移，和抖動(dòng)。 

解決方案：給div一個(gè)運(yùn)動(dòng)基準(zhǔn)點(diǎn)，這樣div在運(yùn)動(dòng)的時(shí)候就無需改變top和left值，只需要改變寬度或高度即可。

3.拋物線的運(yùn)動(dòng) 

css中兩個(gè)點(diǎn)運(yùn)動(dòng)都是直線運(yùn)動(dòng)。 

解決方案：給初始點(diǎn)一個(gè)旋轉(zhuǎn)角度，這樣看起來就有拋物線的感覺。

4.遮罩層處理 

在多層級(jí)的html渲染中，中間圖層的遮罩效果無法實(shí)現(xiàn)。 

解決方案：遮罩層可以在最底層使用，但是中間層級(jí)的遮罩效果需要對(duì)圖片進(jìn)行處理，改成png圖片，再進(jìn)行css操作。

5.卡頓的處理 

在Firefox和ie中，小圖標(biāo)的緩慢移動(dòng)效果會(huì)出現(xiàn)卡頓。 

解決方案：給運(yùn)動(dòng)時(shí)間的時(shí)候，判斷如果不是chrome瀏覽器，減小運(yùn)動(dòng)時(shí)間。

6.性能的優(yōu)化 

圖片的使用讓動(dòng)畫加載的速度變慢，影響用戶體驗(yàn)。 

解決方案：對(duì)部分能使用div代替的圖片采用div生成，對(duì)代碼，圖片進(jìn)行深度壓縮上傳等。

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

項(xiàng)目一：奕賞

項(xiàng)目描述：本項(xiàng)目是一款手機(jī)端APP，采用vue框架構(gòu)建，其中涉及swiper觸控滑動(dòng)模塊，slide子頁(yè)之間采用了懶加載技術(shù)保證用戶體驗(yàn)，iscroll上拉加載下拉刷新模塊，購(gòu)物車模塊與登錄注冊(cè)模塊均采用了本地存儲(chǔ)技術(shù)。

崗位職責(zé)：主要負(fù)責(zé)頁(yè)面的布局和數(shù)據(jù)渲染，并且配合APP完成頁(yè)面的嵌套。

項(xiàng)目架構(gòu)：

1.使用vue框架，以及vue-router構(gòu)建單頁(yè)面應(yīng)用。 

2.項(xiàng)目采用vuex處理各組件間的通訊，vue-resource處理請(qǐng)求，使用mint-ui組件庫(kù)中部分功能進(jìn)行快速開發(fā)，通過vue-cli 快速搭建開發(fā)環(huán)境。 

3.采用手機(jī)淘寶適配方案。 

4.使用阿里矢量圖標(biāo)庫(kù)。

技術(shù)要求：

運(yùn)用HTML5語義化標(biāo)簽+CSS3新特性進(jìn)行頁(yè)面布局，實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)效果，提高代碼的清 晰度和代碼質(zhì)量，將頁(yè)面體現(xiàn)的更加豐滿，代碼更健壯。

運(yùn)用vue.js開發(fā)，采用前后端分離開發(fā)模式。

運(yùn)用vue.js中的指令和服務(wù)與后臺(tái)接口對(duì)接，進(jìn)行數(shù)據(jù)交互，進(jìn)行頁(yè)面渲染，實(shí)現(xiàn)功能 模塊的判斷。

使用JavaScript實(shí)現(xiàn)某些功能的邏輯處理和某些頁(yè)面的動(dòng)態(tài)效果。

項(xiàng)目測(cè)試階段可以自己用node連接數(shù)據(jù)庫(kù)進(jìn)行接口對(duì)接和數(shù)據(jù)渲染模擬，測(cè)試功能模塊 是否完善，邏輯處理是否正確。

運(yùn)用swiper框架進(jìn)行部分頁(yè)面的設(shè)計(jì)。

運(yùn)用sass進(jìn)行代碼的編寫，運(yùn)用gulp進(jìn)行代碼的整理和壓縮。

項(xiàng)目二：省錢日?qǐng)?bào)

項(xiàng)目描述：本項(xiàng)目是一個(gè)促銷商品推薦網(wǎng)站的移動(dòng)APP，使用vue+webpack構(gòu)建的單頁(yè)面應(yīng)用，項(xiàng)目采用了vuex、vue-route、vue-resource以及ES6語法，采用組件化思想搭建整個(gè)項(xiàng)目，從而使組件高度復(fù)用，代碼十分簡(jiǎn)潔。

崗位職責(zé)：主要負(fù)責(zé)項(xiàng)目頁(yè)面的布局和數(shù)據(jù)渲染，完成與后端的接口對(duì)接，配合后端的對(duì)接聯(lián)調(diào)，解決不同瀏覽器或者不同手機(jī)端頁(yè)面布局錯(cuò)亂的問題。

項(xiàng)目架構(gòu)：

1.使用vue框架，以及vue-router構(gòu)建單頁(yè)面應(yīng)用。 

2.使用vue+webpack構(gòu)建項(xiàng)目環(huán)境。 

3.采用手機(jī)淘寶適配方案。 

4.使用阿里矢量圖標(biāo)庫(kù)。

技術(shù)要求：

1.項(xiàng)目采用node(express框架)+mysql來搭建后臺(tái)服務(wù)器； 

2.基于webpack來搭建項(xiàng)目工程，配置第三方插件； 

3.使用vue框架，vue-router搭建項(xiàng)目路由，vuex來實(shí)現(xiàn)單文件組件和數(shù)據(jù)的抽離 

4.使用Swiper實(shí)現(xiàn)首頁(yè)banner的輪播切換，iscoll結(jié)合ajax實(shí)現(xiàn)上拉加載，下拉刷新 

5.合理使用鉤子函數(shù)，實(shí)現(xiàn)數(shù)據(jù)的監(jiān)聽、渲染頁(yè)面、頁(yè)面節(jié)點(diǎn)的實(shí)例化功能。

---------------------