確切來(lái)說(shuō)第三個(gè)項(xiàng)目說(shuō)由三個(gè)小項(xiàng)目組成的：1、后臺(tái)管理頁(yè)面 2、清單detail頁(yè)面 3、活動(dòng)頁(yè)面
- 后臺(tái)管理頁(yè)面：也可稱為產(chǎn)品頁(yè)面，因?yàn)檫@是一個(gè)新的產(chǎn)品功能。用戶可以在頁(yè)面中添加刪除自己的清單，在這個(gè)開(kāi)發(fā)的過(guò)程中，比較坑爹的就是需求一直在變化，由于是倒推的項(xiàng)目，所以時(shí)間很緊，需求還沒(méi)確定下來(lái)就開(kāi)始開(kāi)發(fā)了。跟以往碰到的不同之處以及遇到的問(wèn)題：1、項(xiàng)目是在本地開(kāi)發(fā)的，存放在gitlab上，所以需要自己搭建開(kāi)發(fā)環(huán)境，同時(shí)需要修改host去滿足獲取資源路徑。2、由于是產(chǎn)品頁(yè)面，所以頁(yè)面生存時(shí)間很長(zhǎng)，在開(kāi)發(fā)的時(shí)候樣式、命名等要盡量滿足規(guī)范。在開(kāi)發(fā)的過(guò)程中，需要注意給請(qǐng)求上鎖，不要出現(xiàn)響應(yīng)前多次點(diǎn)擊多次發(fā)請(qǐng)求的情況，可以對(duì)button進(jìn)行disabled處理。3、本頁(yè)面主要是表單提交，所以需要做好表單驗(yàn)證功能，對(duì)輸入框的字?jǐn)?shù)監(jiān)聽(tīng)的時(shí)候可以使用input的事件，可以監(jiān)聽(tīng)復(fù)制黏貼和輸入的變化；如果某些驗(yàn)證在失去焦點(diǎn)的時(shí)候才會(huì)驗(yàn)證時(shí)，則在總的驗(yàn)證之前對(duì)輸入框進(jìn)行blur處理。4、本次開(kāi)發(fā)中通過(guò)變量保存需要變化的數(shù)據(jù)，然后對(duì)改變量進(jìn)行操作，等最后提交的時(shí)候再把原數(shù)據(jù)進(jìn)行替換。
- 清單detail頁(yè)面：該頁(yè)面的主要功能就時(shí)將用戶在后臺(tái)添加的清單展示出來(lái)。1、通過(guò)2:1寬高的圖片進(jìn)行縮放時(shí)候會(huì)有動(dòng)態(tài)效果 。2、對(duì)div進(jìn)行overflow：hidden之后，div中的內(nèi)容的box－shadow如果超出div也會(huì)被隱藏。3、table－cell的新感悟，已經(jīng)寫在簡(jiǎn)書中。后來(lái)?yè)Q成inline－block去實(shí)現(xiàn)了。4、在展示商品圖片的時(shí)候要注意商品圖片的尺寸是不是1:1，不要因?yàn)槿珗D顯示而把整個(gè)頁(yè)面的布局破壞了。
- 活動(dòng)頁(yè)面：一個(gè)正常的項(xiàng)目沒(méi)什么可說(shuō)的1、減少突變帶來(lái)的視覺(jué)體驗(yàn)。2、移動(dòng)端的橫向滑動(dòng)需要加overflow：auto和-webkit-overflow-scrolling : touch來(lái)提高滑屏體驗(yàn)。 3、低端機(jī)還是多用float少用flex吧。
