确切来说第三个项目说由三个小项目组成的:1、后台管理页面 2、清单detail页面 3、活动页面
- 后台管理页面:也可称为产品页面,因为这是一个新的产品功能。用户可以在页面中添加删除自己的清单,在这个开发的过程中,比较坑爹的就是需求一直在变化,由于是倒推的项目,所以时间很紧,需求还没确定下来就开始开发了。跟以往碰到的不同之处以及遇到的问题:1、项目是在本地开发的,存放在gitlab上,所以需要自己搭建开发环境,同时需要修改host去满足获取资源路径。2、由于是产品页面,所以页面生存时间很长,在开发的时候样式、命名等要尽量满足规范。在开发的过程中,需要注意给请求上锁,不要出现响应前多次点击多次发请求的情况,可以对button进行disabled处理。3、本页面主要是表单提交,所以需要做好表单验证功能,对输入框的字数监听的时候可以使用input的事件,可以监听复制黏贴和输入的变化;如果某些验证在失去焦点的时候才会验证时,则在总的验证之前对输入框进行blur处理。4、本次开发中通过变量保存需要变化的数据,然后对改变量进行操作,等最后提交的时候再把原数据进行替换。
- 清单detail页面:该页面的主要功能就时将用户在后台添加的清单展示出来。1、通过2:1宽高的图片进行缩放时候会有动态效果 。2、对div进行overflow:hidden之后,div中的内容的box-shadow如果超出div也会被隐藏。3、table-cell的新感悟,已经写在简书中。后来换成inline-block去实现了。4、在展示商品图片的时候要注意商品图片的尺寸是不是1:1,不要因为全图显示而把整个页面的布局破坏了。
- 活动页面:一个正常的项目没什么可说的1、减少突变带来的视觉体验。2、移动端的横向滑动需要加overflow:auto和-webkit-overflow-scrolling : touch来提高滑屏体验。 3、低端机还是多用float少用flex吧。